/* Variablen für Farben definieren. Mehrfach verwendete Farben werden hier geändert. */
  :root{
    --main-green-color: #9CD78C;
    --main-red-notes-color: #B40D40;
    /* Symbolfarben für Urlaubseinträge im Kalender */
    --main-vacation-beantragt: orange;
    --main-vacation-genehmigt: green;
    --main-vacation-abgelehnt: rgba(255, 0, 106, 0.911);
    --main-vacation-block: red;
    --main-fehlzeit: black;
    /*--main-vacation-genommen: rgba(0, 0, 255, 0.705);*/
    --main-vacation-genommen: green;
    /*--main-race: rgb(207, 47, 255);*/
    --main-race: rgb(0, 0, 255, 0.705);  
  }

  .color_beantragt{
    background-color: var(--main-vacation-beantragt);
  }

  .color_genehmigt{
    background-color: var(--main-vacation-genehmigt);
  }

  .color_abgelehnt{
    background-color: var(--main-vacation-abgelehnt);
  }

  .color_genommen{
    background-color: var(--main-vacation-genommen);
  }

  .color_fehlzeit{
    background-color: var(--main-fehlzeit);
  }

  .color_def{
    background-color: #E9ECEF;
  }
  
  .color_race{
    background-color: var(--main-race);
  }

  /* Schriftarten */
  @font-face {
  font-family: 'Segoe UI Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Segoe UI Regular'), url('Segoe UI.woff') format('woff');
  }
  
  @font-face {
  font-family: 'Segoe UI Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Segoe UI Italic'), url('Segoe UI Italic.woff') format('woff');
  }
  
  @font-face {
  font-family: 'Segoe UI Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Segoe UI Bold'), url('Segoe UI Bold.woff') format('woff');
  }

.main{
   width: 100%;
   padding: 12px;
}

.boldtext{
  font-family: 'Segoe UI Bold' !important;
  font-size: 16px !important;
}

.normaltext{
  font-family: 'Segoe UI Regular' !important;
  font-size: 14px !important;
}

.gotdate{
  background-image: url("/data/img/calendar.svg") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center;
}

.loginwrap{
  width: 100%;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 30px;
  line-height: 1;
}

.loginhead{
  font-family: 'Segoe UI Bold' !important;
  font-size: 40px !important;
}

.loginbody{
  font-family: 'Segoe UI Regular' !important;
  font-size: 28px !important;
}

.greenbutton{
  color: white !important;
  background-color: var(--main-green-color) !important;
  border: 1px solid #707070 !important;
  border-radius: 7px !important;
  padding: 7px;
}

.darkbutton{
  color: white !important;
  background-color: #5A6268 !important;
  border: 1px solid #707070;
  border-radius: 7px;
}

.greenbutton:hover{
  background-color: rgb(118, 163, 104) !important;
}

.statusicon{
  height: 16px;
}

.statusbox{
  font-family: 'Segoe UI Bold' !important;
  font-size: 16px !important;
  text-align: center;
  height: 50px;
}

.countbox{
  font-family: 'Segoe UI Bold' !important;
  font-size: 16px !important;
  height: 50px;
}

.darkbutton:hover{
  background-color: rgb(49, 53, 56) !important;
}

.greybutton{
  background-color: #E9ECEF !important;
  border: 1px solid #707070 !important;
  border-radius: 7px !important;
  color: black !important;
  margin-bottom: 20px !important;
}

.greybutton:hover{
  background-color: rgb(196, 198, 201) !important; 
}

.greywrap{
  border-radius: 7px;
  border: 1px solid #707070;
}

.greyhead{
  background-color: #E9ECEF;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
  border-bottom: 1px solid #707070;
  padding: 10px;
  padding-left: 20px !important;
}

.greydiv{
  background-color: #ffffff;
  padding: 10px;
  padding-left: 20px !important;
  padding-right: 20px !important;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.greytip{
   font-family: 'Segoe UI Regular' !important;
   font-size: 12px !important;
   color: #707070;
}

.past_day{
  font-family: 'Segoe UI Regular' !important;
}

.manvacdiv{
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
  padding: 20px;
  margin-bottom: 50px;
}

.manvac_beantragt{
  position: relative;
  z-index: 1;
}

.manvac_genehmigt{
  position: relative;
  z-index: 1;
}

.manvac_genommen{
  position: relative;
  z-index: 1;
}

.manvac_abgelehnt{
  position: relative;
  z-index: 1;
}

.manvac_beantragt::before{
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .5; 
  z-index: -1;
  background-color: var(--main-vacation-beantragt);
}

.manvac_genehmigt::before{
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .5; 
  z-index: -1;
  background-color: var(--main-vacation-genehmigt);
}

.manvac_genommen::before{
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .5; 
  z-index: -1;
  background-color: var(--main-vacation-genommen);
}

.manvac_abgelehnt::before{
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .5; 
  z-index: -1;
  background-color: var(--main-vacation-abgelehnt);
}

.wrap_vacinput{
  width: 100%;
}

.vacstart_div{
  width: 48%;
  width: -webkit-calc(50% - 20px);
  width: -moz-calc(50% - 20px);
  width: calc(50% - 20px);
  float: left;
}

.vacend_div{
  width: 48%;
  width: -webkit-calc(50% - 20px);
  width: -moz-calc(50% - 20px);
  width: calc(50% - 20px);
  float: right;
}

.vac_checkbox{
   padding-top: 10px;
   font-family: 'Segoe UI Regular' !important;
   font-size: 16px !important;
}

.greendiv{
   background-color: var(--main-green-color);
   border: 1px solid #707070;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   font-family: 'Segoe UI Regular' !important;
   font-size: 14px !important;
   padding: 15px;
   padding-left: 20px !important;
   z-index: 10;
}

.menuicon{
  float: left;
  height: 17px;
  width: 20px;
  margin-right: 20px;
  cursor: pointer;
}

.menu_includer{
  width: 295px;
  height: calc(100% - 48px); /* - Top */
  position: fixed;
  top: 48px;
  left: -350px;
  transition: all 0.5s ease-out;
  background-color: var(--main-green-color);
  border: 1px solid #707070;
  display: flex;
  flex-direction: column;
  padding: 10px;
  z-index: 9999;
  overflow-y: auto;
}
.admin_az_div{
  width: 395px;
  height: calc(100% - 50px);
  position: fixed;
  top: 50px;
  left: -450px;
  transition: all 0.5s ease-out;
  border: 1px solid #707070;
  background-color: grey;
  z-index: 100000;
}

.mainmenubutton{
  background-color: white;
  border: 1px solid #ffffff;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 20px !important;
  padding: 10px;
  box-shadow: 2px 2px 2px 2px #0000001c;
  width: 100%;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  margin-top: 10px;
}

.mainmenubutton:hover{
  box-shadow: none;
  background-color: #ddd;
  border: 1px solid #ddd;
}

.secmenubutton{
  background-color: white;
  border: 1px solid white;
  border-radius: 7px;
  font-size: 18px;
  padding: 10px;
  width: calc(100% - 20px);
  margin-bottom: 5px;
  margin-left: 20px;
}

.secmenubutton:hover{
  background-color: #ddd;
  border: 1px solid #ddd;
}

.menuhead{
  width: 100%;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
}

.menuuser{
   font-family: 'Segoe UI Regular' !important;
   font-size: 22px !important;
   padding-left: 20px;
}

.menuvac{
   font-family: 'Segoe UI Bold' !important;
   font-size: 15px !important;
   padding-left: 20px;
   color: var(--main-red-notes-color);
   padding-bottom: 10px;
}

.chosenvac{
  font-family: 'Segoe UI Bold' !important;
   font-size: 15px !important;
}

.menufill{
  width: 100%;
  height: 20px;
}

.nolink{
   text-decoration: none !important;
   color: black !important;
}

.popup {
   width: 100%;
   height: 100%;
   display: none;
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgba(0, 0, 0, 0.75);
   color: black !important;
   overflow-y: auto;
   z-index: 100;
}

/* Inner */
.popup-inner {
   max-width: 700px;
   width: 90%;
   padding: 22px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
   border-radius: 3px;
   background: #fff;
}

/* Close Button */
.popup-close {
   width: 30px;
   height: 30px;
   padding-top: 4px;
   display: inline-block;
   position: absolute;
   top: 0px;
   right: 0px;
   transition: ease 0.25s all;
   -webkit-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
   border-radius: 1000px;
   background: rgba(0, 0, 0, 0.8);
   font-family: Arial, Sans-Serif;
   font-size: 20px;
   text-align: center;
   line-height: 100%;
   color: #fff;
}

.popup-close:hover {
   -webkit-transform: translate(50%, -50%) rotate(180deg);
   transform: translate(50%, -50%) rotate(180deg);
   background: rgba(0, 0, 0, 1);
   text-decoration: none;
}
/* Blockierte Tage im Datepicker */
.Highlighted{
   background-color : red !important;
   background-image :none !important;
   opacity: .70 !important;
}

.tab {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
 }
 
 .tab button {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
   font-size: 17px;
 }
 
 .tab button:hover {
   background-color: #ddd;
 }
 
 .tab button.active {
   background-color: #ccc;
 }
 
 .tabcontent {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
 }

 .maintab {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
 }
 
 .maintab button {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
   font-size: 17px;
 }
 
 .maintab button:hover {
   background-color: #ddd;
 }
 
 .maintab button.active {
   background-color: #ccc;
 }
 
 .maintabcontent {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
 }

 .usertab {
   overflow: scroll;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
   width: 300px;
   height: 70%;
   float: left;
 }
 
 .usertab button {
   background-color: white;
   border: 1px solid #707070;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
   font-size: 17px;
   display: block;
   width: 100%;
 }
 
 .usertab button:hover {
   background-color: #ddd;
 }
 
 .usertab button.active {
   background-color: #ccc;
 }
 
 .usertabcontent {
   display: none;
   padding: 6px 12px;
   margin-left: 10px;
 }

 .useroutput{
    display: inline-block;
    max-width: calc(100% - 301px);
    height: 90%;
    overflow: auto;
 }

 .loadingimg{
   width: 20px;
   margin-top: 8px;
 }

 .loadinput{
   background-repeat: no-repeat;
 }

 .popupdiv{
   color: black !important;
   font-size: 25px;
   text-align: center;
   width: 40px;
   height: 40px;
 }

 .popupdiv:hover{
   color: #111 !important;
 }

 .popoverbutton{
    text-align: center;
    border: 1px solid #707070;
    border-radius: 7px;
    padding: 2px;
    cursor: pointer;
    margin-top: 3px; 
    margin-bottom: 3px;
    color: black !important;
 }

 .popoverbutton:hover{
   background-color: #ddd;
 }

 .popoverdate{
    text-align: center;
    border: 1px solid #707070;
    border-radius: 7px;
    padding: 2px; 
    cursor: pointer;
    width: 50px;
    color: #ddd;
    line-height: 40px;
    display: inline-block;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: #444;
 }

.wrappopovercontent{
  text-align: center;
}

 .popoverdate:hover{
   background-color: #888;
   color: white;
 }

 /* Kalender-Styles */#

 .cal-title {
  border-bottom: 1px solid #999999;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current_day {
  z-index: 10;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border: 6px solid black;
  line-height: 50px;
}

.btn {
  margin: 2px;
}

.btn-add {
  width: 24px;
  padding: 0px !important;
  vertical-align: top;
}

.btn-icon {
  width: 24px;
  padding: 3px !important;
}

@media only screen and (min-width: 1100px) {
  .btn-icon {
     width: auto;
  }
}

.calwrap {
  display: flex;
}

.calwrap>* {
  flex-grow: 1;
}

.cal-noline{
  border-bottom: none !important;
}

.date_select{
  margin-bottom: 8px;
}

.changemonth{
  min-width: 80px;
}

.vacation_day_genehmigt{
  background-color: var(--main-vacation-genehmigt) !important;
  color: black;
  text-align: center;
}

.vacation_day_gehabt{
  background-color: var(--main-vacation-genommen) !important;
  color: black;
  text-align: center;
}

.vacation_day_beantragt{
  background-color: var(--main-vacation-beantragt) !important;
  color: black;
  text-align: center;
}

.vacation_day_abgelehnt{
  background-color: var(--main-vacation-abgelehnt) !important;
  color: black;
  text-align: center;
}

.race_day{
  background-color: var(--main-race) !important;
  color: black;
  text-align: center;
}

.calendar_day_fehlzeit{
  background-color: var(--main-fehlzeit) !important;
  color: #eee;
  text-align: center;
}

.admin_blocked_day{
  background-color: var(--main-vacation-block) !important;
  color: white; 
  text-align: center;
}

.past_day {
  background-color: #EEEEEE;
  color: #A7A8AA;
}

.vacation_day.past_day{
  background-color: rgba(255, 255, 0, 0.267) !important;
}

.day{
  font-size: 13px;
  text-align: center;
  height: 64px;
  background-color: #E9ECEF;
  font-family: 'Segoe UI Bold' !important;
}

.schoolvac_day{
  background-color: #f5f5f5;
}

.dateday{
  font-size: 11px;
  text-align: center;
  width: 20px;
  height: 20px;
  background-color: #E9ECEF;
  font-family: 'Segoe UI Bold' !important;
}

.overview_day{
  text-align: center;
  min-width: 30px;
  min-height: 20px !important;
}

.ov_calwrap{
  display: flex;
}

.ut_wrap{
  display: flex;
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  z-index: 1;
  background-color: white;
}

.alltab_wrap{
  display: flex;
  overflow: auto;
  height: 80vh;
}

.stickyhead{
  background-color: white;
}

.dddiv{
  min-height: 23px;
  background-color: transparent;
  border: none;
  box-shadow: none;
  cursor: default;
}

.cur{
  cursor: pointer;
}

.blocked_day{
  background-color: #D8D8D8;
}

.selected_day{
  background-color: #7c7c7c;
}

.tablehead{
  font-size: 14px;
  text-align: center;
}

.table_sechead{
  text-align: center;
}

.theadbg{
  background-color: #E9ECEF;
}

.tthead{
  width: 14%;
}

.nopad{
  padding: 0px !important;
}

.symbolbutton{
  margin-left: 5px;
  margin-right: 5px;
}

.deletebutton:hover{
  filter: brightness(150%);
}

.upbutton:hover{
  filter: brightness(70%);
}

.downbutton:hover{
  filter: hue-rotate(50deg);
}

.midbutton:hover{
  opacity: 0.5;
}

.wrapsymbols{
  width: 95px;
}

.adminbutton{
  background-image: url('/data/img/admin.png');
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 32px 30px;
}

.calarrowbutton{
  background-color: transparent;
  border: none;
  font-size: 25px;
  font-weight: bold;
  padding: 0px;
  width: 30px;
}

.blockvacwrap{
  width: 100%;
}

#blockvac_enlarger, #chooseusers_enlarger, #form-enlarger{
  cursor: pointer;
  width: max-content;
}

#blockvac_enlarged{
  display: none;
}

#form_div{
  display: none;
}

#blockvac_img, #chooseusers_img, #form_img{
  height: 16px;
}

a:focus, a:active {
  outline: none;
  -moz-outline-style: none;
}

.edit_heading{
  font-family: 'Segoe UI Regular' !important;
  font-size: 22px !important;
}

.checkdiv{
  width: 33%;
  display: inline-block;
}

.wrap_legend{
  margin-top: 10px;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

.showcolor{
  height: 20px; 
  width: 20px;
  border: 1px solid black;
  display: inline-block;
}

.capslocklabel{
  color: var(--main-red-notes-color);
  margin-left: 10px;
  visibility: hidden;
  font-size: 14px;
}

.ov_scroll_left{
  height: 50px;
  width: 50px;
  float: left;
  margin-left: 20px;
  cursor: pointer;
}

.ov_scroll_right{
  height: 50px;
  width: 50px;
  float: right;
  margin-right: 20px;
  cursor: pointer;
}

.scrollarrow_wrap{
  width: 100%;
  height: 50px;
}

.lowmargin{
  margin-bottom: 5px;
}

.brightrow{
   background-color: #fefefe;
}

.brightrow:hover{
   background-color: #eeeeee;
}

.darkrow{
   background-color: #dddddd;
}

.darkrow:hover{
   background-color: #cdcdcd;
}

.headcell{
  background-color: #ffffff;
  position: sticky;
  top: 48px;
}

.menutop{
  font-weight: bold;
  font-size: 22px;
}

.wraptime{
  width: 100%;
  text-align: center;
}

.timebtn{
  margin-left: 0.85em;
  margin-right: 0.85em;
}

.overview_settings{
  height: 18px;
  width: 18px;
  margin-left: 5px;
  cursor: pointer;
}

.usercredit_div{
  display: none;
  width: calc(100% - 311px);
  margin: 5px;
}