* 
  {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

body {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

table
  {
  table-layout: fixed;
  border-collapse: collapse;
  }
  
td, th
  {
  margin: 0;
  padding: 0px 5px 0px 5px; 
  border: 1px solid #f5f5f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }

.title-nav {
    display: flex;
    align-items: center;
    justify-content: center;
		padding: 0.85rem 14px;
		text-align: center;
    color: #FFF;
    background-color: #043312;
	  border-top-left-radius: 0.5rem;
  	border-top-right-radius: 0.5rem;
}

.title-nav h3 {
		font-size: 1.1rem;
    margin: 0;
}

.nav-btn {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    font: inherit;
    color: inherit;
    padding: 5px;
    position: relative;
    border-radius: 5px;
}

.nav-btn:hover {
    text-color: ;
}

.nav-btn:first-child {
    margin-right: auto;
}

.nav-btn:last-child {
    margin-left: auto;
}

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    transition: border-color 0.3s ease;
}

.arrow-left {
    border-width: 8px 16px 8px 0;
    border-color: transparent #1db0e9 transparent transparent;
    margin-right: 6px;
}

.arrow-right {
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #1db0e9;
    margin-left: 6px;
}

.nav-btn:hover .arrow-left {
    border-color: transparent #FDC519 transparent transparent;
}

.nav-btn:hover .arrow-right {
    border-color: transparent transparent transparent #FDC519;
}

.kalender 
  {
  display: flex;
  flex-flow: column;
  background: none!important;
  }
  
.kalender .header .month-year 
  {
  font-weight: bold;
  color: #636e73;
  padding: 20px 0;
  }
  
.kalender .days 
  {
  display: flex;
  flex-flow: wrap;
  }

.kalender .days .day_name
  {
  width: calc(100% / 7);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-transform: capitalize;
  font-size: 1rem;
  font-weight: bold;
  color: rgba(1, 1, 1, 0.5);
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  }
  
.kalender .days .day_name:nth-child(7) {border: none;}

.kalender .days .day_num
  {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-flow: column;
  width: calc(100% / 7);
  border-right: 1px solid rgba(1, 1, 1, 0.05);
  border-bottom: 1px solid rgba(1, 1, 1, 0.05);
  padding: 5px 5px 5px 7px;
  font-weight: bold;
  color: rgba(1, 1, 1, 0.5);
  cursor: pointer;
  min-height: 60px;
  }
  
.kalender .days .day_num span 
  {
  display: inline-flex;
  width: 30px;
  font-size: 1rem;
  }
  
.kalender .days .day_num .event 
  {
  text-align: center;
  vertical-align: middle;
  margin-top: 5px;
  font-weight: 500;
  font-size: 14px;
  padding: 1px 0;
  border-radius: 5px;
  background-color: #f7c30d;
  color: rgba(1, 1, 1, 0.9);
  }

.kalender .days .day_num .event {background-color: red}
.kalender .days .day_num .event.a {background-color: hsl(120, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.b {background-color: hsl(115, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.c {background-color: hsl(110, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.d {background-color: hsl(106, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.e {background-color: hsl(101, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.f {background-color: hsl(96, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.g {background-color: hsl(91, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.h {background-color: hsl(86, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.i {background-color: hsl(82, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.j {background-color: hsl(77, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.k {background-color: hsl(72, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.l {background-color: hsl(67, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.m {background-color: hsl(62, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.n {background-color: hsl(58, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.o {background-color: hsl(53, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.p {background-color: hsl(48, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.q {background-color: hsl(43, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.r {background-color: hsl(36, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.s {background-color: hsl(34, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.t {background-color: hsl(29, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.u {background-color: hsl(24, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.v {background-color: hsl(19, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.w {background-color: hsl(14, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.x {background-color: hsl(10, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.y {background-color: hsl(5, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.z {background-color: hsl(0, 100%, 50%)} /* 0 (red)-120 (groen) */
.kalender .days .day_num .event.green {background-color: #51ce57;}
.kalender .days .day_num .event.blue {background-color: #518fce;}
.kalender .days .day_num .event.red {background-color: #ce5151;}
.kalender .days .day_num:nth-child(7n+1) {border-left: 1px solid rgba(253, 197, 25, 0.5);}

.kalender .days .day_num:hover
  {
  color: rgba(0, 0, 0, 0.5);
  background-color: rgba(253, 197, 25, 1);
  cursor: inherit;
  }
  
.kalender .days .day_num.ignore
  {
  color: rgba(1, 1, 1, 0.2);
  background-color: rgba(0, 0, 0, 0.05);
  cursor: inherit;
  text-align: left;
  min-height: 60px;
  }
  
.kalender .days .day_num.selected
  {
  background-color: rgba(253, 197, 25, 0.2);
  cursor: inherit;
  }

.kalender .days .day_num.arrangement
  {
  background-color: rgba(255, 255, 255, 0.9);
  cursor: inherit;
  }