* {
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

/*#map .gm-style > div:not(:first-child) { display: none; }*/


:root {
--main-bg-color: #3498DB;
--main-font-color:dimgrey;
--main-green:#48c9b0;
--main-light-green:#00FF00;
--main-red:#FA5858;
--main-mild-red:#fa8580;
--main-yellow:#ffe23d;
--main-orange:#FF8C00;
--main-purple:#FF10F0;
--main-very-light-grey:#ECF0F1;
--main-light-grey:lightgrey;
--main-grey:grey;
--main-font:Arial;
--main-large-font:22px;
--main-medium-font:18px;
--main-small-font:14px;
--main-input-height:60px;
--main-violet:#d291bc;
}


body {
	font-family: var(--main-font);
	color:var(--main-font-color);
	background-color: var(--main-bg-color);
  }
  

.loading-screen{
	margin: 20px auto;
	width: 300px;
	background-color: #FFF;
	margin-top:70px;
	padding: 20px;
}

.login {
	margin: 20px auto;
	width: 300px;
}


.login-field{
	min-width:140px;
}


.comment{
	display:block;
	max-width:140px;
	height:52px;
	word-wrap:break-word;
	overflow:auto;
	padding: 10px 0;

}

.reset_pass a{
	text-decoration: none;
	color:var(--main-font-color);
	font-size:var(--main-small-font);
}
.reset_pass a:hover{
	text-decoration: none;
	color:var(--main-green);
}

.reset_pass{
	width:inherit;
	margin:0 auto;
	text-align: center;

}


.badge {
	width: 35px;
	height: 20px;
	display: block;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s;
	font-size: var(--main-small-font);
	font-family: var(--main-font);
	color:#ffffff;
	opacity:0.9;
	
}

.badge:hover{
 cursor:pointer
}

.badge_top {
	background: var(--main-green);
	top: -33px;
	right: -8px;
}

.badge_middle {
	top: -9px;
	right: -8px;
	color: var(--main-font-color);
	background: var(--main-yellow);
}

.badge_bottom {
	top: +16px;
	right: -8px;
	background: var(--main-violet);
}


.btn {
	font-weight: normal;
	-webkit-appearance: none;
	text-decoration: none;
	text-shadow: none;
	border-radius:0px;
	background: var(--main-bg-color);
	color: #ffffff;
	font-size: var(--main-small-font);
	font-family: var(--main-font);
	padding: 10px 0;
	transition: 0.25s;
	text-align:center;
	width: 140px;
	min-height:var(--main-input-height);
	margin: 5px auto;
	
  	display: -webkit-flex;
  	display: flex;
  	align-items: center;
	justify-content: center;
	
}


.btn:hover {
	cursor: pointer;
	background-color: #2980B9;
}

.tracking-btn {
	min-height:30px;
}


.inactive-btn{
	background:var(--main-light-grey);
	color:var(--main-font-color);
	cursor: default;

}

.inactive-btn:hover{
	cursor: default;
	background-color:transparent;
}

.grey_btn {
	background: #ECF0F1;
	color: var(--main-font-color);
}

.dispo-btn{
		background-color: var(--main-orange);
		color:white
	
}
.grey_btn:hover {
	background-color: #48c9b0;
}


.teacher-btn {
	background: #ECF0F1;
}

.teacher-btn:hover {
	background-color: #2980B9;
}

.button-mild-red {
	background-color: var(--main-mild-red);
	color:white
}
.button-mild-red:hover{
	background-color: --main-bg-color;
}

.button-purple {
	background-color: var(--main-purple);
	color:white
}
.button-purple:hover{
	background-color: --main-bg-color;
}

.button-mild-yellow {
	background-color:var(--main-yellow);
	color:var(--main-font-color)
}
.button-mild-yellow:hover{
	color:white;
	background-color: --main-bg-color;
}

.button-violet {
	background-color:var(--main-violet);
	color:white
}
.button-violet:hover{
	color:white;
	background-color: --main-bg-color;
}


.button-mild-yellow-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
background-color: #ffdb0f;
}
.button-mild-yellow-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-mild-grey-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
background-color: var(--main-light-grey);
}
.button-mild-grey-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-light-green-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
background-color: var(--main-light-green);
}
.button-light-green-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-light-green-red-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-mild-red) 32px, var(--main-mild-red) 64px);
background-color: var(--main-light-green);
}
.button-light-green-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}


.button-mild-red-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
background-color: var(--main-mild-red);
}
.button-mild-red-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-mild-red-green-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-green) 32px, var(--main-green) 64px);
background-color: var(--main-mild-red);
}
.button-mild-red-green-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-green) 32px, var(--main-green) 64px);
}

.button-green-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
background-color: var(--main-green);
}
.button-green-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-purple-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
background-color: var(--main-purple);

}
.button-purple-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-violet-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
background-color: var(--main-violet);

}
.button-violet-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}


.button-purple-grey-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-light-grey) 32px, var(--main-light-grey) 64px);
background-color: var(--main-purple);

}
.button-purple-grey-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}



.button-orange-grey-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-orange) 32px, var(--main-orange) 64px);
background-color: var(--main-light-grey);
color:white

}
.button-orange-grey-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-orange-green-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-orange) 32px, var(--main-orange) 64px);
background-color: var(--main-green);

}
.button-orange-green-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}


.button-red-grey-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-light-grey) 32px, var(--main-light-grey) 64px);
background-color: var(--main-mild-red);

}
.button-red-grey-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-orange-purple-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-orange) 32px, var(--main-orange) 64px);
background-color: var(--main-purple);
color:white
}
.button-orange-purple-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}

.button-mild-red-purple-diagonal {
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-mild-red) 32px, var(--main-mild-red) 64px);
background-color: var(--main-purple);

}
.button-mild-red-purple-diagonal:hover{
background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
}


.button-yellow-purple-diagonal {
	background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-yellow) 32px, var(--main-yellow) 64px);
	background-color: var(--main-purple);
	
	}
	.button-yellow-purple-diagonal:hover{
	background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, var(--main-bg-color) 32px, var(--main-bg-color) 64px);
	}



.button-red {
	background-color: var(--main-red);
	color:white
}

.button-red:hover {
	background-color: #bc0303;
}

.button-green {
	background-color: var(--main-green);
	color:white
}

.button-green:hover {
	background-color: --main-bg-color;
}

.button-orange {
	background-color: var(--main-orange);
	color:white
}

.button-green:hover {
	background-color: --main-bg-color;
}




.impressum {
	padding: 20px;
	color:#c9c9c9;
	text-align:center;
	width:100%;
}

.login-screen {
	background-color: #FFF;
	margin-top:70px;
	padding: 20px;
}

.login-form {
	text-align: center;
}

.app-title {
	text-align: center;
	font-size: var(--main-large-font);
}

.login-title {
	text-align: center;
	font-size: var(--main-large-font);
	color:var(--main-very-light-grey);
}

.select-date{
	max-width:250px;
}

.ui-datepicker {
   	background: var(--main-very-light-grey);
   	color:var(--main-font-color);
	border:none;
}


.ui-datepicker .ui-datepicker-header {
	background:var(--main-green);
	border:none;
}
.ui-datepicker .ui-datepicker-title{
	background:var(--main-green);
	color:var(--main-yellow);
	height:50px;
	text-align:center;	
	border:none;
}

.ui-datepicker-month{
	background:var(--main-green);
	color:var(--main-light-green);
	font-weight:bold;
	border:none
}
.ui-datepicker-year{
	background:var(--main-green);
	color:var(--main-light-green);
	font-weight:bold;
	border:none;
}


.select-time {
	max-width: 90px;
}

.select-period {
	max-width: 120px;
}

.timedate-selector {
	width: 210px;
	min-width:210px;
}


.select-screen {
	text-align: center;
	background-color: #FFF;
	padding: 10px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	width:900px;
}

.select-screen-transparent {
	text-align: center;
	background-color: #FFF;
	padding: 10px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	width:900px;
	opacity:0.6;
}


.scroll-tbody{
	height:220px;
	width:100%;
	display:block;
	overflow-y:scroll
}

.scroll-tbody:hover{
	background:var(--main-very-light-grey);
}

.scroll-thead{
     width:100%;
     display: table;
 }

thead th{
	width:190px;
	height:45px;
	text-align:center;	
	font-size:16px;
}

.hiderow{
opacity:0.3;
height:5px;
overflow:hidden;
font-size:70%;
}

.hidecell{
height:5px;
overflow:hidden;
}

.hiderow:hover{
height:50px;
font-size:100%;
opacity:1;
}

hr {
	color:var(--main-light-grey)
}

h1 {
	font-size:var(--main-large-font)
}

h4 {
	font-size:(--main-medium-font);
}

.center {
  margin-left: auto;
  margin-right: auto;
}

table td{
	width:190px;
	height:45px;
	text-align:center;	
}

.menu-bar {
	margin: auto;
	width:950px;
}

.menu-element {
	width: 100px;
}

.navigator {
   margin-left: auto;
  margin-right: auto;
}

.navigator-button {
	background: var(--main-green);
	padding: 10px 0;
	font-weight:bold;
	text-decoration: none;
	text-shadow: none;
	border:none;
	transition: 0.25s;
	display: block;
	height:41px;
	width: 140px;
	margin: 5px;
}

.navigator-button:hover{
	background:#35b198;
}
.emailmessage {
	height:300px;
	width:800px;	
	font-family: var(--main-font);
	outline: none !important;
    border:2px solid var(--main-very-light-grey);
	background:var(--main-very-light-grey);
	font-size:12pt;
}

.emailmessage:hover{
border: 2px solid var(--main-bg-color);
	
}

.message {
	background-color: var(--main-yellow);
	text-align:center;
}

.success-message {
	background-color: var(--main-green);
	color:white;
	text-align:center;
}

.error-message {
	background-color: var(--main-red);
	color:white;
	text-align:center;
}

.list-item {
	text-align: center;
	border: 2px solid transparent;
	font-size: var(--main-small-font);
	padding: 10px 0;
	width: 140px;
}

input{
	-webkit-appearance: none;
	border:none;
	border-radius:none;
	-webkit-appearance: none;
	text-decoration:none;
	font-size: var(--main-small-font);
}


.text-input{
	-webkit-appearance: none;
	text-align: center;
	background-color: var(--main-very-light-grey);
	border: 2px solid transparent;
	font-size: var(--main-small-font);
	font-family: var(--main-font);	
	color:var(--main-font-color);
	padding: 10px 0;
	width: 140px;
	transition: border 0.5s;
	height:var(--main-input-height);
	border-radius:0px;
}

.text-input:hover{
	border: 2px solid var(--main-bg-color);
	cursor: pointer;
}


input:focus {
	border: 2px solid var(--main-bg-color);
	cursor: pointer;
}

.menu-item {
	color: #444;
	font-size: 20px;
	padding: 10px 10;
	text-decoration: none;
	text-shadow: none;
	transition: 0.25s;
	width: 140px;
	margin: 0 auto;
}


.timetable-field {
}


.selected-item {
	color: #444;-webkit-appearance: none;
	text-align: center;
	background-color: var(--main-very-light-grey);
	border: 2px solid transparent;
	font-size: var(--main-small-font);
	color:var(--main-font-color);
	padding: 10px 0;
	width: 140px;
	transition: border 0.5s;
	height:120%;
	-webkit-appearance: none;
	font-size: 20px;
	text-decoration: underline;
	padding: 10px 10;
	text-shadow: none;
	transition: 0.25s;
	width: 100px;
	margin: 0 auto;
}



.login-link {
	font-size: 12px;
	color: #444;
	display: block;
	margin-top: 12px;
}


input[type=radio]:checked+ span {
    background: var(--main-green);
}

input[type=radio] {
	display: none;
  }

input[type=checkbox] {
  display: none;
}


input[type=checkbox]:checked~.remove-check {
  display: none;
}

input[type=checkbox]:checked~#day {
  display: block;
}

input[type=checkbox]:checked+ span {
  background:var(--main-green);
}

.checkbox_btn{
color:var(--main-font-color);
background:var(--main-very-light-grey)
}

.checkbox_btn:hover{
background:var(--main-bg-color);
color:white;
}


#day {
  display: none;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  font-weight:normal;
  font-size:var(--main-small-font);
  background-color: lightgrey;
  color: dimgrey;
  text-align: center;
  padding: 5px 0;

 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1000;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  transition-delay:1.5s;
  visibility: visible;
}

 /* The navigation bar */
.navbar {
	background:var(--main-bg-color);
	text-align: center;
	margin-top: 10px;
  width: 100%; /* Full width */

}


/* Position the logo at the far left */
.navbar-logo {
	left: 16px;
  }
  
  .navbar-logo img {
	height: 40px;  /* Adjust as needed */
  }


  


/* Links inside the navbar */
.navbar a {
display: inline-block;
  font-size: 24px;
  color: var(--main-light-grey);
font-weight:bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
display: inline-block;
}

/* Dropdown button */
.dropdown .dropbtn {
display: inline-block;
  font-size: 24px;
  color: lightgrey;
font-weight:bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
	background: inherit;
	border: inherit;
	cursor: pointer;
	
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  color:white ;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--main-very-light-grey);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  font-size: 14px;
  color: var(--main-bg-color);
	font-weight:bold;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;

}

.dropdown-content h3 {
font-size:18px;
color:var(--main-grey);
}

.column {
  float: left;
  padding: 10px;

}


/* Style links inside the columns */
.column a {
  float: none;
  color:var(--main-bg-color);
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a background color on hover */
.column a:hover {
color: white;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}




/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  color: var(--main-grey);
  background-color:var(--main-green);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}



.time-cursor {
	text-align: center;
  width: 100%; /* Full width */
margin-bottom:20px;
}

.time-cursor elem{
display: inline-block;
	font-size:16px;	
font-weight:bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

.cursor-button {
	background:#48c9b0;
	color:grey;
	font-weight:bold;
	height:60px;
	font-size:var(--main-medium-font);
	text-align: center;
}

.edit-time-button {
	background:var(--main-yellow);
	color:grey;
	font-weight:bold;
	height:60px;
	font-size:var(--main-medium-font);
	text-align: center;
}

.edit-time-button:hover{
	background:var(--main-yellow);
		color:grey;
	
}

.cursor-button:hover{
	background:#3bc4a9
}


#container {
	overflow: auto;
	 -ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
	  margin-left: auto;
  margin-right: auto;
}

#container::-webkit-scrollbar {
  display: none;
}

#container table{
	line-height: 1; 	
	}

#container table thead th {
		position: sticky; 
		top: 0; 
		background:white;
		border-top: 0px;
	}



.hide{
	display:none;
}

.monitor-entry{
	font-weight:bold;
	color:black;
	
}

.period-bar{
  width: 100%;
}

.period-bar-table{
  display: table;
  margin: 0 auto;
  width:140px;
border-collapse: collapse; 
}

.period-bar-element{
	width:8px;
	height:8px;	
}

.period-bar-element-striped{
	width:8px;
	height:8px;	
	background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--main-light-grey) 6px, var(--main-light-grey) 64px);
	background-color: var(--main-purple);
}


.school-tag {
  background-color: #4285F4;
  opacity:0.7;
  color: #FFFFFF;
  font-size: 14px;
  padding: 10px 15px;
  position: relative;
}


.marker-tag {
  background-color: var(--main-purple);
  opacity:0.7;
  color: #FFFFFF;
  font-size: 14px;
  padding: 10px 15px;
  position: relative;
}


.school-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #4285F4;
}

.marker-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--main-purple);
}


.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: white;
        z-index: 9999;
    }