@media all and (min-width: 1100px) {
	.container{ 
		/* width: 1100px;
		margin-top: 20px; */
	}
}	
@media all and (max-width: 1100px) {
	.container{ width: 100%;}
}	

.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
  inset: unset !important;
}
.form-floating > label {
  padding: .5rem .75rem;
}

#popup { display: none; }

:root {

  /*Default*/
  --schwarz: #000;
  --hover_menu: #5d9eff;
  --dropdown_menu: #85b6ff;
  --urlaub_color: #83b2ee;
  --urlaubsantrag_color: #d2e5ff;
  --krank_color: #f57878;
  --feiertag_color: #d1eb89;
  --schule_color: #bd9ed6;
  --unbezahlter_urlaub_color: #fffb9f;
  /* --standardtag_color: #f2f2f2; */
  --standardtag_color: #fff;
  --rot: #ff978b;
  --orange: #ffcc8b;
  --gruen: #beff9f;
  --grau: #f5f5f5;
}

.grau { background-color: var(--grau);}

.clear{ clear: both; }

.ui-datepicker-calendar {
  display: none;
}

.container_pegatime {
  border-top-color: var(--primary_color) !important;
  border-top-width: 10px !important;
  border-bottom-color: white !important;
  border-left-color: white !important;
  border-right-color: white !important;
  max-width: 100%;
  margin-bottom: 25px;
  padding: 20px;
}


.container_pegatime:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.form-control:focus {
  border-color: var(--accents_color) !important;
  box-shadow: 0 0 5px var(--accents_color) !important;
}

.disableLink{
  pointer-events: none;
}


/**********/
/* Profil: */
/**********/

.margin_bottom{
	margin-bottom: 15px;
}

.margin_right{
	margin-right: 15px;

}

.row {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.col_no_padding{
  padding: 0;
}


/**********/
/* Menu: */
/**********/
.table {
  caption-side: top !important;
}

/**********/
/* Kalender: */
/**********/
/*******************************Calendar Top Navigation*********************************/
div#calendar{
    margin:0px auto;
    padding:0px;
    /* width: 602px; */
    font-family:Helvetica, "Times New Roman", Times, serif;
}

div#calendarmulti{
  margin:0px auto;
  padding:0px;
  width: 100%;
  font-family:Helvetica, "Times New Roman", Times, serif;
}
   
  div#calendar div.box{
      /* position:relative;
      top:0px;
      left:0px;
      width:100%;
      height:80px; */
      background-color:   #f5f5f5 ;      
  }
  
  .verwaltungskalender_nav .btn{
	  width: 100%;
  }
  
  .verwaltungskalender_nav .schrift{
	  text-align: center;
  }
  
  .verwaltungskalender_nav{
	  text-align: center;
	  margin: 0 0 1rem 0;
  }
  .verwalungskalender .legend li span{
	  margin-top: 6px;
  }
  .legend li span{
	  margin-top: 4px;
  }
   
  /* div#calendar div.header{
      line-height:40px;  
      vertical-align:middle;
      position:absolute;
      left:11px;
      top:0px;
      width:582px;
      height:80px;   
      text-align:center;
  } */
   
  /* div#calendar div.header a.prev,div#calendar div.header a.next{ 
      position:absolute;
      top:0px;   
      height: 17px;
      display:block;
      cursor:pointer;
      text-decoration:none;
      color:black;
  } */
   
  div#calendar div.header span.title{
      color:black;
      font-size:18px;
  }
   
   
  div#calendar div.header a.prev{
      left:0px;
  }
   
  div#calendar div.header a.next{
      right:0px;
  }
  .nav-link{
    cursor:pointer;
  }

	
	#calendarmulti .box-content .calendar-table .row .col{
		min-width: 40px;
		min-height: 40px;
		max-width: 40px;
		max-height: 40px;
		padding: 0;
	}
   #calendarmulti .box-content .calendar-table .row .col .dayOfWeek{
	   font-size: 10px;
	   width: 14px;
   }
   #calendarmulti .box-content .calendar-table .row div{
	   --bs-border-opacity: 1
   }
   @media all and (min-width: 1200px) {
	   #calendarmulti .box-content .calendar-table .row .hidden-on-screen{
		   min-width: 0px;
		   max-width: 0px;
		   visibility: hidden;
	   }
   }
   @media all and (max-width: 1200px) {
	   #calendarmulti .box-content .calendar-table,
	   #calendarmulti .box-content .kalender-name{
		   width: 330px;
	   }
	   #calendarmulti .box-content .kalender-name{
		   margin: 0 auto;
	   }
   }
   
   
   
  /*******************************Calendar Content Cells*********************************/
  /* .heute{
	  flex: 0.15 0 0%;
  } */
  .heute button{
	  background-color: var(--primary_color);
	  --bs-btn-bg: var(--primary_color);
	  --bs-btn-active-bg: var(--primary_color);
	  --bs-btn-border-color: var(--primary_color);
	  
	  --bs-btn-active-border-color: var(--secondary_color);
	  --bs-btn-hover-bg: var(--secondary_color);
	  --bs-btn-hover-color: var(--secondary_color);
	  --bs-btn-hover-border-color: var(--secondary_color);
	  color: var(--secondary_color);
  }
  .heute button:hover{
	  background-color: var(--secondary_color);
	  --bs-btn-bg: var(--secondary_color);
	  --bs-btn-active-bg: var(--secondary_color);
	  --bs-btn-border-color: var(--secondary_color);
	  color: var(--primary_color);
  }
  div#calendar div.box-content{
      border:1px solid #f2f2f2 ;
      border-top:none;
  }
   
  div#calendar ul.label{
      float:left;
      margin: 0px;
      padding: 0px;
      margin-top:5px;
      margin-left: 5px;
  }
   
  div#calendar ul.label li{
      margin:0px;
      padding:0px;
      margin-right:5px;  
      float:left;
      list-style-type:none;
      width:80px;
      height:40px;
      line-height:40px;
      vertical-align:middle;
      text-align:center;
      color:#000;
      font-size: 15px;
      background-color: transparent;
  }

  .current_date {
	background-color: var(--secondary_color) !important;
  }
   
	.innercalendar div div.col { 
    border: 1px solid transparent;
    /* margin: 1px !important; */
    }
    .innercalendar div div.selected_date, .innercalendar div div.current_date {
    /* background-color: var(--accents_color) !important; */
    border: 1px solid #666;
    /* margin: 0 !important; */
    }
    .innercalendar div div.col:hover { 
      border: 1px solid #999;
      /* margin: 0 !important; */
    }

  .urlaub {
    background-color: var(--urlaub_color) !important;
  }
    
  .rad_urlaub_standardtag{
	background-color: var(--urlaub_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--urlaub_color) 0 50%, var(--standardtag_color) 50% 100%);
  background-repeat: no-repeat;
  }
    
  .rad_urlaub_urlaubsantrag{
	background-color: var(--urlaub_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--urlaub_color) 0 50%, var(--urlaubsantrag_color) 50% 100%);
  background-repeat: no-repeat;
  }
    
  .rad_urlaub_schule{
	background-color: var(--urlaub_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--urlaub_color) 0 50%, var(--schule_color) 50% 100%);
  background-repeat: no-repeat;
  }
    
  .rad_urlaub_unbezahlter_urlaub{
	background-color: var(--urlaub_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--urlaub_color) 0 50%, var(--unbezahlter_urlaub_color) 50% 100%);
  background-repeat: no-repeat;
  }

  .urlaubsantrag {
    background-color: var(--urlaubsantrag_color) !important;
  }
    
  .rad_urlaubsantrag_standardtag{
	background-color: var(--urlaubsantrag_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--urlaubsantrag_color) 0 50%, var(--standardtag_color) 50% 100%);
  background-repeat: no-repeat;
  }
    
  .rad_urlaubsantrag_schule{
	background-color: var(--urlaubsantrag_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--urlaubsantrag_color) 0 50%, var(--schule_color) 50% 100%);
  background-repeat: no-repeat;
  }
    
  .rad_urlaubsantrag_unbezahlter_urlaub{
	background-color: var(--urlaubsantrag_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--urlaubsantrag_color) 0 50%, var(--unbezahlter_urlaub_color) 50% 100%);
  background-repeat: no-repeat;
  }

  .krank {
    background-color: var(--krank_color) !important;
  }

  .feiertag {
    background-color: var(--feiertag_color) !important;
  }

  .schule {
    background-color: var(--schule_color) !important;
  }
    
  .rad_schule_standardtag{
	background-color: var(--schule_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--schule_color) 0 50%, var(--standardtag_color) 50% 100%);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  }
    
  .rad_schule_unbezahlter_urlaub{
	background-color: var(--schule_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--schule_color) 0 50%, var(--unbezahlter_urlaub_color) 50% 100%);
  background-repeat: no-repeat;
  }

  .unbezahlter_urlaub {
    background-color: var(--unbezahlter_urlaub_color) !important;
  }
    
  .rad_unbezahlter_urlaub_standardtag{
	background-color: var(--unbezahlter_urlaub_color); /* For browsers that do not support gradients */
	background-image: linear-gradient(135deg, var(--unbezahlter_urlaub_color) 0 50%, var(--standardtag_color) 50% 100%);
  background-repeat: no-repeat;
  }


  .anderer_monat,
  .kein_arbeitstag {
    color: grey !important;
    background-color: #e0e0e0 !important;
  }

  .abgelehnt {
    background-color: rgb(243, 154, 154) !important;
  }

  .btn-danger{
    background: rgb(236, 91, 91) !important;
    color: black !important;
    border-color: rgb(236, 91, 91) !important;
  }

  .btn-danger:hover{
    background: rgb(206, 69, 69) !important;
    color: black !important;
    border-color: rgb(206, 69, 69) !important;
  }

  .btn-success{
    background: rgb(162, 206, 105) !important;
    color: black !important;
    border-color: rgb(162, 206, 105) !important;
  }

  .btn-success:hover{
    background: rgb(105, 139, 61) !important;
    color: black !important;
    border-color: rgb(105, 139, 61) !important;
  }

  .halber_tag {

    /* TODO */
    /* background-color: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%) !important; */
    background: repeating-linear-gradient(315deg, #74ABDD, #74ABDD 49.9%, #e0e0e0 50.1%, #e0e0e0 100%) !important;

    /* background:linear-gradient(341deg, rgba(138,138,138,0)  0%, rgba(138,138,138,0)  31.9%, #000 32.1%, #000 100%);

    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background-color: #f2f2f2;
    z-index: -1; /* Place behind the main content */
}


  .legend { list-style: none; }
  .legend li { float: left; margin-right: 10px; }
  .legend span { border: 1px solid #ccc; float: left; width: 15px; height: 15px; margin: 2px; }

  .legend .urlaub { background-color: #88b1e7; }
  .legend .urlaubsantrag { background-color: #d2e5ff; }
  .legend .heute { background-color: var(--secondary_color); }
  .legend .krank { background-color: #f57878;}
  .legend .feiertag { background-color: #d1eb89; }
  .legend .schule { background-color: #bd9ed6; }

  .pause {
    color:gray !important;
  }

  .status_pause {
    background-color:rgb(236, 91, 91) !important
  }

  .status_anwesend {
    background-color:rgb(162, 207, 102) !important
  }

  .status_abwesend {
    background-color:rgb(189, 189, 189) !important
  }
   
	div#calendar ul.dates{
    	float:left;
    	margin: 0px;
    	padding: 0px;
    	margin-left: 5px;
    	margin-bottom: 5px;
 	}
   
  /** overall width = width+padding-right**/
  div#calendar ul.dates li{
      margin:0px;
      padding:0px;
      margin-right:5px;
      margin-top: 5px;
      vertical-align:middle;
      float:left;
      list-style-type:none;
      /* width:80px;
      line-height:80px;
      height:80px;
      font-size:25px; */
      color:#000;
      text-align:center; 
  }
  div#calendar ul.dates li,
  div#calendarmulti table tr td{
	background-color: var(--standardtag_color);
  }

  :focus{
      outline:none;
  }
   
  div.clear{
      clear:both;
  }
  .user-name{
	background-color: #fff !important;
  }

  .weekdays { display: inline-grid; gap: 5px 5px;  grid-template-columns:repeat(7,1fr); } 
  .weekdays div { display: flex;
    justify-content: center;
    align-items: center; }

  .innercalendar div.col { 
    text-align: center;
  }
  .innercalendar .btn { 
    width: 50px; 
    height: 50px;
  }
  #calendar { max-width: 450px; }
  #calendar .btn { --bs-btn-padding-x: .3rem; }
  #calendar span.title { min-width: 90px; display: inline-block; text-align: center; } 

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.navbar .nav-item .main-submenu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .main-submenu{ display: block; }
	.navbar .nav-item .main-submenu{ margin-top:0; }
}	
@media all and (max-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: block; }
}	

.dropdown-menu li {
position: relative;
}
.dropdown-menu .dropdown-submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu > li:hover > .submenu {
display: block;
}

.dropdown-menu li:hover {
	background-color: var(--hover_menu);
}

.navbar .nav-item .dropdown-menu{ background-color: var(--dropdown_menu); }
/* ============ desktop view .end// ============ */

/**********/
/* Person bearbeiten: */
/**********/

.facet-container .left,
.facet-container .right{
  width: 45%;
  height: 300px;
  background: #eee;
}
.right {
  float: right;
}
.left {
  float: left;
}
.facet-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  padding: 5px;
  min-height: 1.5em;
  font-size: 0.85em;
  height:246px;
}
.facet-list li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  /* width: 120px; */
}
.facet-list li.placeholder {
  height: 1.2em
}
.facet {
  border: 1px solid #bbb;
  background-color: #fafafa;
  cursor: move;
}
.facet.ui-sortable-helper {
  opacity: 0.5;
}
.placeholder {
  border: 1px solid var(--secondary_color);
  background-color: #fffffd;
}

.bg-primary{
  background-color: var(--primary_color) !important;
}

.hidden {
  display: none;
}

/* menu style */

/* Custom Navbar Styling */
.custom-navbar {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

.custom-navbar .dropdown-menu {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Style for the navbar brand */
.custom-navbar .navbar-brand {
  font-weight: bold;
}

/* Style for navbar links */
.custom-navbar .nav-link {
  padding: 10px 15px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.custom-navbar .nav-item {
  position: relative; /* Set position relative for .nav-item */
}

.custom-navbar .nav-item:hover .nav-link:hover {
  background-color: rgb(230, 230, 230); /* Change background color on hover */
  border-radius: 5px;
  color: var(--primary_color) !important;
}


/* Active link styling */
.custom-navbar .nav-link.active {
  color: var(--primary_color);
  background-color: #fff; 
  font-weight: bold;
  border-radius: 5px;
}

.custom-navbar .nav-item.active {
  border-bottom: 3px solid var(--primary_color);
  background-color: transparent;
}

/* admin_uebersicht */

#tabelleArbeitszeiten tr .gruener_background {
	background-color: var(--gruen);
}

#tabelleArbeitszeiten tr .roter_background {
	background-color: var(--rot);
}

#tabelleArbeitszeiten tr .orangener_background {
	background-color: var(--orange);
}

.lb-sm {
  font-size: .7rem;
}

/* Log-In / Landing Page */

.gradientbg {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  background: radial-gradient(circle, #3b55be, #00c6ff);
  background-size: 200% 200%;
  animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.glasseffect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 20px 0;
}

.landing-link {
  color: white;
}

.textshadow {
  text-shadow: rgb(27, 55, 72) 1px 1px 5px;
}

.login-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  color: white;
}

.container-landing {

}

.container-landing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/clock_pattern.png');
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  text-shadow: #000 1px 5px 3px;
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-shadow: #000 1px 2px 5px;
}

.landing-navbar {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 20px 0;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.landing-logo {
  height: 50px;
}

.landing-button {
  background: white;
  color: black;
  width: 100%;
  border: none;
}

.landing-button:hover {
  background: #3b55be;
  color: white;
}

.infopage {
  color: white;
  text-shadow: rgb(27, 55, 72) 1px 1px 5px;
  text-align: left;
}

.abthinweis { 
  font-style: italic;
  font-size: .7rem;
}



/* ###### Style Replacement ###### */

.proc_5_w{ width: 5% }
.proc_10_w{ width: 10% }
.proc_100_w{ width: 100% }

.px_200_w{ width: 200px }

.proc_100_max_w{ max-width: 100% }

.disp_none{ display: none }

.f_left{ float: left }
.f_right{ float: right }
.clear_both{ clear: both }

.cursor_pointer{ cursor: pointer }

.px_10_m_r{ margin-right: 10px; }

.debug { font-size: 11px }

.whitespace-pre{white-space: pre;}

.px_80_w{width: 80px;}