@import '../plugins/fontawesome/css/all.min.css';
@import '../plugins/customicons/css/customicons.css';


@font-face {
  	font-family: 'Open Sans';
  	src: url('../fonts/OpenSans/OpenSans-Light.ttf') format('truetype');
	font-weight: 300;
}

@font-face {
  	font-family: 'Open Sans';
  	src: url('../fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
  	font-family: 'Open Sans';
  	src: url('../fonts/OpenSans/OpenSans-SemiBold.ttf') format('truetype');
	font-weight: 500;
}




@font-face {
  	font-family: 'Roboto';
  	src: url('../fonts/Roboto/Roboto-Thin.ttf') format('truetype');
	font-weight: 200;
}

@font-face {
  	font-family: 'Roboto';
  	src: url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
}

@font-face {
  	font-family: 'Roboto';
  	src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
  	font-family: 'Roboto';
  	src: url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
	font-weight: 500;
}

@font-face {
  	font-family: 'Roboto';
  	src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
	font-weight: 600;
}

@font-face {
  	font-family: 'Roboto';
  	src: url('../fonts/Roboto/Roboto-Black.ttf') format('truetype');
	font-weight: 600;
}


/* ------------------------------ */
/*      Variabeln definieren      */
/* ------------------------------ */

:root {
/* Hauptfarben des Systems */
  /*--primaryColor: #4E9178;
  --secondaryColor: #356251;
*/
  --primaryColor:#4682B4 ; /* #62ACD5;   */
  --secondaryColor:#376b96 ; /* #307CA5; */
  --thirdColor: #fff;
  --grayColor: #f8f8f8;
  --oppositePrimary: #D97E6A;

  --tableHoverColor:#F0FFFF ;

/* Formulare und Rahmen */
  --formBorder: #989797;
  --borderRadius: 10px;
  --borderColor: #e6e6e6;

/* Statusfarben */
  --rot1: #ff0000;
  --gelb1: #ffff00;
  --weiss1: #ffffff;
  --gruen1: #00ff00;


/* Projektfarben */
  --MC: #6AD9C5;
  --eMC: #D97E6A;
  --wMC: #d69081;
  --eKAF: #d19e92;
  --KAF: #37baa2;
  --reMC: #d75a3e;
  --cMC: #a45d4d;
  --BOD: #854a3d;
  --HY: #a9432c;
  --MP:#81d381;
  --eosce: #c173ba;
  --Workshop: #8b6ad9;
  --Schulung: #625da0;
  --Beratung: #00a6ff;
  --Sonstige: #d8b131;
  --ausgegraut: #E5E4E2;
  --Training: #ee8ee6;
  --Einsichtnahme: #008000;
}
/* ------------------------------ */


body {
	background-color:none;
	margin: 0;
  	position:relative;
  	font-family: Roboto, sans-serif;
  	font-weight:300;
}


* {
  box-sizing: border-box;
}

/*  FONT SIZES  */

h1 {
font-size:1.5em;
color:var(--secondaryColor);
margin:0;
margin-bottom:1em;
font-weight:500;
}

h1 > small {
    font-size: 15px;
    display: inline-block;
    padding-left: 1em;
    font-weight: 300;
}


h2 {
margin:0em;
margin-bottom:1.2em;
margin-top:1em;
font-weight:300;
font-size:1.3em;
font-weight:500;
color:var(--secondaryColor);
}

h3{
color:var(--secondaryColor);
font-weight:500;
}

h3 small{
color:var(--secondaryColor);
font-weight:200;
padding-left:2em;
font-size:0.8em;
font-style: italic;
}

h4 {
  font-weight:400;
  color:var(--secondaryColor);
  margin-top:10px;
  margin-bottom:0;
}


a {
	color:var(--secondaryColor);
	text-decoration:none;
}

a:active{
	color: var(--primaryColor);
}

a:hover{
	color: var(--primaryColor);
}

span.subtitle {
font-weight: 200;
padding-left: 0.5em;
font-size: 0.8em;
}


#mainsite {
 position: relative;
 height:100vh;
}


#header {
width:100%;
height:50px;
background-color:var(--primaryColor);
position:fixed;
top:0;
z-index:51;
-webkit-box-shadow: 0px -4px 11px 5px rgba(149,149,149,0.56);
box-shadow: 0px -4px 11px 5px rgba(149,149,149,0.56);
}

#logo {
height:100%;
background-color:var(--secondaryColor);
float:left;
color:#fff;
display:block;
justify-content: center;
align-items: center;
font-size:1.2em;
padding-left:1em;
padding-right:1em;
}


#logo a{
  color:#fff;
  text-decoration:none;
}

#mainsearch {
display:none;
}

.table-responsive {

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ---------------------------------------------------------------------- */
/* 						  KOPF NAVIGATION     							  */
/* ---------------------------------------------------------------------- */



#topnav {
display:none;
float: right;
}


#topnav ul {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
}

#topnav ul li{
  width:60px;
  height:50px;
  padding:1em;
  text-align:center;
}



#topnav ul a{
text-decoration:none;
}

#topnav ul li{
color:#fff;
}

#topnav ul li:hover{
text-decoration:none;
background-color:var(--secondaryColor);
color:#fff;
}

#topnav ul li.userIcon {
width: 40px;
height: 40px;
margin-left: 2em;
margin-right: 1em;
margin-top: 0.3em;
padding-top: 0.6em;
padding-left: 0.81em;
text-align: center;
background-color: var(--secondaryColor);
border-radius: 25px;
}

#topnav ul li.userIcon:hover {
background-color: #fff;
color:var(--secondaryColor);
}



#topnav ul li.topnav-active{
background-color:#fff;
}
#topnav ul li.topnav-active:hover {
background-color:#fff;
}

li.topnav-active i{
color:#000;
}




/* ---------------------------------------------------------------------- */
/* 						  USER INFO										  */
/* ---------------------------------------------------------------------- */


li.userIcon {
cursor:pointer;
}

#userInfo {
display: none;
width: 15em;
height: 11em;
border-radius: 0 0 12px 12px;
background-color: #F0F0F0;
position: absolute;
right: 0.4em;
top: 3.5em;
z-index:100;
}

.userInfo-inner {
width:98%;
height: 10.6em;
margin:0.2em;
border:1px solid #E0E0E0;
border-radius: 0 0 12px 12px;
position:relative;
}

.userInfo-inner h3 {
padding:1em;
text-align:center;
}

.userInfo-inner a.close {
position:absolute;
top:0.5em;
right:0.5em;
color:var(--secondaryColor);
cursor:pointer;
}


.userInfo-language {
margin-top:0;
margin-bottom:0;
}

.userInfo-language ul{
margin-left:0;
padding-left:0;
list-style: none;
width:100%;
display:grid;
grid-template-columns:auto auto auto auto;
text-align:center;
margin-top:0;
margin-bottom:0;
}

.userInfo-language li{
padding-top:0.5em;
padding-bottom:0.5em;
border-right:1px solid #E0E0E0;
border-top:1px solid #E0E0E0;
}

.userInfo-language li:last-child{
border-right:none;
}

.userInfo-language li:hover{
background:var(--primaryColor);
color:#FFF;
}

.userInfo-language-active{
  background:var(--primaryColor);
  color:#FFF;
  }

.userInfo-action {
margin-top:0;
margin-bottom:0;
}


.userInfo-action ul {
margin-left:0;
padding-left:0;
list-style: none;
width:100%;
display:grid;
grid-template-columns:80% 20%;
text-align:center;
margin-top:0;
margin-bottom:0;
}

.userInfo-action ul {
border-top:1px solid #E0E0E0;
}

.userInfo-action li{
padding-top:0.5em;
padding-bottom:0.5em;
}


.userInfo-action a:first-child:hover{
color:#FFF;
background:var(--primaryColor);
border-radius: 0 0 0 12px;
width:100%;
height:100%;
}

.userInfo-action a:last-child:hover{
color:#FFF;
background:var(--primaryColor);
border-radius: 0 0 12px 0;
width:100%;
height:100%;
}



/* ---------------------------------------------------------------------- */
/*        						            Kalender								                */  
/* ---------------------------------------------------------------------- */


td.calendar-Samstag, td.calendar-Sonntag {

  background-color: #ffffca ;
  min-width:150px;
  min-height: 150px;
  background-clip: padding-box;
}

td.calendar-Feiertag {

  background-color: #f0f0a3 ;
  min-width:150px;
  min-height: 150px;
  background-clip: padding-box;
}

td.calendar-keintag {
  background-color: rgb(69, 69, 69) ;
  background-image:
  repeating-linear-gradient(45deg, 
  white 0%, 
  white 2%, rgb(218, 218, 218) 2%, 
  rgb(218, 218, 218) 4%, white 4%);
  border-bottom:1px solid #A1B6AE!important;
}

a.calendar {
  width:100%;
  background-color:green;
  height:20px;
  display:block;
  margin-top:0;
  color:white;
  padding-left:5px;
  padding-right:5px;
  margin-top:1px;
  margin-bottom:1px;
  white-space: nowrap;
}

.calendar-day-triangle {
  position:absolute;
  right:0;
  top:0;
  width: 0px;
  height: 0px;

  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent var(--primaryColor) transparent transparent;
}

.calendar-day-triangle:hover {
  border-color: transparent var(--secondaryColor) transparent transparent;
}

a.cal-eMC, a.cal-wMC, a.cal-eKAF, a.cal-reMC, a.cal-cMC, a.cal-BOD, a.cal-HY, a.cal-MP,
a.cal-MC, a.cal-eosce, a.cal-Workshop, a.cal-Schulung, a.cal-Beartung, a.cal-Sonstige, a.cal-Training {
    background-color:unset;
    font-weight:400;
  
}
/* ------------------------------ */
/*          eMC typen            */

a.cal-eMC {
  color:var(--eMC);
}
a.cal-eMC-complete {
  background-color:var(--eMC);
}

a.cal-wMC {
  color:var(--wMC);
}
a.cal-wMC-complete {
  background-color:var(--wMC);
}

a.cal-eKAF {
  color:var(--eKAF);
}
a.cal-eKAF-complete {
  background-color:var(--eKAF);
}

a.cal-KAF {
  color:var(--KAF);
}
a.cal-KAF-complete {
  background-color:var(--KAF);
}

a.cal-reMC {
  color:var(--reMC);
}
a.cal-reMC-complete {
  background-color:var(--reMC);
}

a.cal-cMC {
  color:var(--cMC);
}
a.cal-cMC-complete {
  background-color:var(--cMC);
}

a.cal-Einsichtnahme {
  color:var(--Einsichtnahme);
  background-color: transparent;
  font-weight: 400;
}
a.cal-Einsichtnahme-complete {
  background-color:var(--Einsichtnahme);
}

a.cal-BOD {
  color:var(--BOD);
}
a.cal-BOD-complete {
  background-color:var(--BOD);
}

a.cal-HY {
  color:var(--HY);
}
a.cal-HY-complete {
  background-color:var(--HY);
}

/* ------------------------------ */
/*              MC                */

a.cal-MC {
  color:var(--MC);
}
a.cal-MC-complete {
  background-color:var(--MC);
}

/* ------------------------------ */
/*              MP                */

a.cal-MP {
  color:var(--MP);
}
a.cal-MP-complete {
  background-color:var(--MP);
}

/* ------------------------------ */
/*           OSCE                */

a.cal-eosce {
  color:var(--eosce);
}
a.cal-eosce-complete {
  background-color:var(--eosce);
}

/* ------------------------------ */
/*           Training                */

a.cal-Training {
  color:var(--Training);
}
a.cal-Training-complete {
  background-color:var(--Training);
}

/* ------------------------------ */
/*          Andere                */

a.cal-Workshop{
  color:var(--Workshop);
}
a.cal-Workshop-complete {
  background-color:var(--Workshop);
}

a.cal-Schulung {
  color:var(--Schulung);
}
a.cal-Schulung-complete {
  background-color:var(--Schulung);
}

a.cal-Beartung {
  color:var(--Beartung);
}
a.cal-Beartung-complete {
  background-color:var(--Beartung);
}

a.cal-Sonstige {
  color:var(--Sonstige);
}
a.cal-Sonstige-complete {
  background-color:var(--Sonstige);
}

/* ------------------------------ */
/*   Nicht meine Projekte         */


a.not-my-project {
  color:var(--ausgegraut);
}
a.not-my-project-complete {
  background-color:var(--ausgegraut);
}

a.project-hidden {
  display:none;
}
a.project-hidden-complete {
  display:none;
}



/* LEISTEN FARBEN SETZEN */

/* ------------------------------ */
/*          eMC typen            */

a.leiste-eMC {
  color:var(--thirdColor);
  background-color:var(--eMC);
}

a.leiste-wMC {
  color:var(--thirdColor);
  background-color:var(--wMC);
}

a.leiste-eKAF {
  color:var(--thirdColor);
  background-color:var(--eKAF);
}

a.leiste-KAF {
  color:var(--thirdColor);
  background-color:var(--KAF);
}

a.leiste-reMC {
  color:var(--thirdColor);
  background-color:var(--reMC);
}

a.leiste-cMC {
  color:var(--thirdColor);
  background-color:var(--cMC);
}

a.leiste-BOD {
  color:var(--thirdColor);
  background-color:var(--BOD);
}

a.leiste-HY {
  color:var(--thirdColor);
  background-color:var(--HY);
}

/* ------------------------------ */
/*              MC                */

a.leiste-MC {
  color:var(--thirdColor);
  background-color:var(--MC);
}

/* ------------------------------ */
/*              MP                */

a.leiste-MP {
  color:var(--thirdColor);
  background-color:var(--MP);
}

/* ------------------------------ */
/*           OSCE                */

a.leiste-eosce {
  color:var(--thirdColor);
  background-color:var(--eosce);
}

/* ------------------------------ */
/*           Training                */

a.leiste-Training {
  color:var(--thirdColor);
  background-color:var(--Training);
}

/* ------------------------------ */
/*          Andere                */

a.leiste-Workshop{
  color:var(--thirdColor);
  background-color:var(--Workshop);
}

a.leiste-Schulung {
  color:var(--thirdColor);
  background-color:var(--Schulung);
}

a.leiste-Beartung {
  color:var(--thirdColor);
  background-color:var(--Beartung);
}

a.leiste-Sonstige {
  color:var(--thirdColor);
  background-color:var(--Sonstige);
}

a.leiste-Einsichtnahme {
  color:var(--thirdColor);
  background-color:var(--Einsichtnahme);
}






/* ------------------------------ */
/*        STATUSFARBEN            */

/* ------------------------------ */
/*        SpaltenZuordnung        */

/* ------------------------------ */
/*       keine Zuordnung          */



td.status-weiss-1 {
  background-color:var(--weiss1);
  color:#000;
  font-weight:500;
}

td.status-gelb-1 {
  background-color:var(--gelb1);
  color:#000;
  font-weight:500;
}

td.status-gruen-1 {
  background-color:var(--gruen1);
  color:#000;
  font-weight:500;
}

td.status-rot-1 {
  background-color:var(--rot1);
  color:#000;
  font-weight:500;
}



/* ------------------------------ */
/*           alte        */
td.status-doppelt {
  background-color:yellow;
}


td.status-eindeutig {
  background-color:#ffffff;
  color:#000;

}

td.cal-erledigt {
  background-color:green;

}
td.status-keine {
  background-color:red;
}

/*        alte löschen?????       */
/* ------------------------------ */





.calendar-today {
  background-color: #e5cac5;
  border: 4px solid green;
  background-clip: padding-box;
}



.download-all {
  margin-right: 1.3em;
  font-size: 1.5em;
}

/*


case "Workshop":
$typWS='selected';
break;
case "Schulung":
$typSchulung='selected';
break;
case "Beratung":
$typBR='selected';
break;
case "Sonstige":
$typSO='selected';
*/

/* ---------------------------------------------------------------------- */
/* 						  MOBILE NAVIGATION								  */
/* ---------------------------------------------------------------------- */

#mobilenav {
display:block;
position:fixed;

bottom:0;
left:0;
right:0;
background-color:var(--primaryColor);
width:100%;
}


#mobilenav ul {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
}

#mobilenav ul li{
  width:60px;
  height:50px;
  padding:1em;
  text-align:center;
  font-size:2em;
}


#mobilenav ul a{
text-decoration:none;
}

#mobilenav ul li{
color:#fff;
}

#mobilenav ul li:hover{
text-decoration:none;
background-color:#F0F0F0;
color:#000;
}

li.mobilenav-active{
background-color:#fff;
}
li.mobilenav-active i{
color:#000;
}




#mobilenav ul li.topnav-active{
background-color:#fff;
}
#mobilenav ul li.topnav-active:hover {
background-color:#fff;
}




#mobilenav ul li.userIcon {
width: 40px;
height: 40px;
margin-left: 2em;
margin-right: 1em;
margin-top: 0.3em;
padding-top: 0.6em;
padding-left: 0.81em;
text-align: center;
background-color: var(--secondaryColor);
border-radius: 25px;
}

#mobilenav ul li.userIcon:hover {
background-color: #fff;
color:var(--secondaryColor);
}


/* ---------------------------------------------------------------------- */
/* 						  HAUPTMENU (links)								  */
/* ---------------------------------------------------------------------- */





#main-menu {
height:100vh;
display:none;
float:left;
min-height:100vh;
position: fixed;
top:2px;
}

div.main-menu-inner {
min-height:100vh;
background-color:var(--grayColor);
border-right:1px solid #e6e6e6;
width:3em;
margin-top: 3em;
-webkit-box-shadow: -10px -1px 11px 5px rgba(149,149,149,0.56); 
box-shadow: -10px -1px 11px 5px rgba(149,149,149,0.56);
}

@keyframes showMenu {
  from {width: 3em;}
  to {width:17em;}
}

div.menu-grow{
animation-name:showMenu;
animation-duration: 1s;
}



#showMenuLink {
padding:1em;
padding-left: 1.7em;
color:gainsboro;
}

#hideMenuLink {
padding:1em;
padding-left: 1.7em;
color:gainsboro;
}

#showMenuLink:hover, #hideMenuLink:hover {
cursor:pointer;
color:gray;
}


#sidebar-menu {
display:block;
}


.sidebar-menu {
list-style: none;
padding:0;
margin:0;
}


.sidebar-menu li {
list-style: none;

}



.sidebar-menu i.fa{
padding-left:7px;
width:100%;
}

.sidebar-menu {
list-style: none;
border-top:1px solid #e6e6e6;
}

.sidebar-menu:last-child {
border-bottom:1px solid #e6e6e6;
}



.sidebar-menu a {
color:#FFF;
padding:1em;
display:block;
}


li.active {
font-weight:400;
}


.sidebar-menu a:active, .sidebar-menu a:hover {
background-color:var(--secondaryColor);
}

.sidebar-text {
  display:inline-block;

  }
  


/* ---------------------------------------------------------------------- */
/* 						  Hauptseite     								  */
/* ---------------------------------------------------------------------- */






#main-content {
height:100vh;
width:100%;
float:left;
}


#content {
margin-top:4em;
position:relative;
overflow:auto;
}



#content-inner {
margin-top: -1em;
padding-left: 1em;
padding-right: 1em;
background-color: var(--grayColor);
margin-left: 0;
margin-right: 0;
padding-top: 2em;
border-radius: 0;
padding-bottom: 3em;
min-height: 100vh;
}

.content-row {
display:flex;
flex-direction:column;
margin-bottom:2em;
}

.content-inner-left {
width:100%;
margin-right:4em;
}


.content-inner-right {
width:100%;
}

.content-inner-full {
width:100%;
}


.content-flex {
display:flex;
flex-direction:column;
margin:0;
}

.content-col-4 {
width:100%;
margin:0.5em 0;
}

.content-col-3 {
width:100%;
margin:0.5em 0;
}

.content-col-2 {
width:100%;
margin:0.5em 0;
}

.content-col-1 {
width:100%;
margin:0.5em 0;
}



.content-inner-detail {
border:1px solid var(--borderColor);
border-radius: var(--borderRadius);
margin-top:2em;
background-color:#fff;
padding-left:1em;
padding-right:1em;
padding-bottom:1em;
}


.content-form-group {
  border:1px solid var(--formBorder);
  border-radius: var(--borderRadius);
  padding-top:1em;
  padding-left:1em;
  padding-right:1em;
  margin-top: 1.5em;
  margin-bottom: 1.1em;
  width:100%;
  }




/* ---------------------------------------------------------------------- */
/* 						  Breadcrumb     								  */
/* ---------------------------------------------------------------------- */





#breadcrumb {
display:none;
padding-left:1.2em;
}

#breadcrumb i.fa{
padding-right: 1em;
font-size: 0.8em;
vertical-align: top;
padding-top: 0.1em;
}


/* ---------------------------------------------------------------------- */
/* 						  		FUSS     								  */
/* ---------------------------------------------------------------------- */



#footer {
width:100%;
float:left;
background-color:var(--primaryColor);
color:#fff;
font-size: 0.5em;
padding:0.5em;
position:fixed;
bottom:0;
text-align:right;
}



/* ---------------------------------------------------------------------- */
/* 						  DASHBOARD										  */
/* ---------------------------------------------------------------------- */

div.dashboard {
width:100%;
}

div.dashboard-entry {
    width: 10em;
    height: 11em;
    background-color: var(--thirdColor);
    padding: 1em;
    border-radius: var(--borderRadius);
    position: relative;
    text-align: center;
    margin-bottom: 1em;
}

div.dashboard-entry a {
width:20em;
height:20em;
}

div.dashboard-entry h2 {
color:var(--secondaryColor);
font-size:1em;
text-transform:none;
margin-top:1em;
font-weight:300;
}

div.dashboard-entry i {
margin-top: 0.6em;
color: var(--secondaryColor);
font-size:3em;
}

div.dashboard-entry:hover {
background-color: var(--secondaryColor);
cursor:pointer;
}

div.dashboard-entry:hover h2 {
color:#fff;
font-weight:300;
}

div.dashboard-entry:hover i{
color:#fff;
}

div.dashboard {
	display:grid;
	grid-template-columns: auto auto;

}

div.dashboard a{
	width: 11em;

}

div.dashboard-entry {
	display: inline-grid;
}



.dashboard-row {
  display:inline-flex;

  }
  
  
  
.dashboard-box {
  width:inherit;
  background-color:#356251;
  display:inline-grid;
  min-height:10em;
  padding:1em;
  margin:1em;
  border-radius: 12px;
  position:relative;
  }
  
  
  .dashboard-box:last-of-type {
  margin-right:0;
  }
  .dashboard-box:first-of-type {
  margin-left:0;
  }
  
  
  .dashboard-box h3 {
  color:#FFF;
  font-weight:300;
  }
  
  
  .dashboard-box:nth-child(even){background-color: #4E9178;}
  
  
  .dashboard-box span {
  color:#4E9178;
  font-weight:600;
  font-size:6em;
  position:absolute;
  top:0.4em;
  right:0.1em;
  }
  
  .dashboard-box:nth-child(even) span{color: #356251;}
  
  


/* ---------------------------------------------------------------------- */
/* 					    	 UHR UND DATUM AUF STARTSEITE               					  */
/* ---------------------------------------------------------------------- */



#auz-time {
  font-size:1.6em!important;
  margin-bottom:-2px!important;
  }
  
  #auz-date {
  display:inline-block!important;
  font-size:0.8em!important;
  margin-top:-6px!important;
  }
  
  #examClock {
    display:none;
    margin-bottom:0!important;
    position: absolute;
    top: 1.9em;
    right: 4em;
    }
  
  #examClock div {
  border:none!important;
  }
  

/* ---------------------------------------------------------------------- */
/* 						  INPUT FIELDS/BUTTONS/FORMS					  */
/* ---------------------------------------------------------------------- */


#mainsearch {
width:auto;

}

input[type=search] {
background:none;
}

input[type="submit"], button {
    background-color: var(--primaryColor);
    border: 1px solid var(--secondaryColor);
    color: #fff;
    padding: 1em;
    padding-right: 1em;
    padding-left: 1em;
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 7px;
}


input[type="submit"]:hover, button:hover {
    background-color:var(--secondaryColor);
    cursor: pointer;
}

input[type="submit"]:disabled, button:disabled {
  background-color:var(--grayColor);
  color:var(--ausgegraut);
  border-color:var(--ausgegraut);
  cursor: not-allowed;
}


.form-group {
margin-bottom: 1em;
}

label {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 300;
    font-size:0.8em;
    text-transform: uppercase;
    color:#393838;
}


input[type=text],input[type=date],input[type=time],input[type=email],input[type=password],input[type=file],input[type=url], select{
 background-color: #FFF; 
 border:1px solid var(--formBorder);
  color: #000;
  display: inline-block;
  border-radius: 7px;
  width:100%;
  height:2.4em;
  font-size:1em;
  font-weight:300;
  padding-left:1em;
}

input[type=radio] {
border:1px solid var(--formBorder);
height:1em;
width:1em;
}


textarea {
  background-color: #FFF; 
  border:1px solid var(--formBorder);
  color: #000;
  display: inline-block;
  border-radius: 7px;
  width:100%;
  height:6em;  
  font-size:1em;
  font-weight:300;
  padding-left:1em;
  /*float:left; */
  font-family: roboto;
  padding-top: 0.6em;
}



input[type=text]:focus,input[type=date]:focus,input[type=time]:focus,input[type=password]:focus,input[type=email]:focus,input[type=file]:focus,input[type=url]:focus, textarea:focus, select:focus{
	border:1px solid #307CA5;

}

input[type=text]:disabled,input[type=date]:disabled,input[type=time]:disabled,input[type=password]:disabled,input[type=email]:disabled,input[type=file]:disabled,input[type=url]:disabled, textarea:disabled, select:disabled{
	color:#9A9A9A!important;
}


input[type=search].light-table-filter{
width:10em;
}

/*
.find-table-content tbody>tr{
display:none;
}
*/

button:disabled {
background-color: var(--grayColor);
border-color:#d9d9d9;
color:#d9d9d9;
}


a.disabled{
  color: var(--grayColor);
}


input[type=date],input[type=time]{

  width:100%!important;
  height:2.4em!important;
  font-size:1em!important;
  font-weight:300!important;
  font-family: Open Sans, sans-serif!important;
}


input[type=text], input[type=password], select{
  font-weight:300!important;
  font-family: Open Sans, sans-serif!important;
}


/* Passwortsicherheit anzeigen */
#feedback{
position:absolute;
right:3em;
}




input[type=text].light-table-filter, input[type=text].search-content-input{
max-width:20em;
}

input[type=text].show-table-content {
max-width: 20em;
}



.btn-right {
float:right;
}

.btn-left {
float:left;
}





.dropdown-devider {
  height:0.25em;
  width:100%;
  margin:0;
  padding:0;
  display:block;
  background-color:var(--borderColor);
}


/* Icons als Button */

button.btn-icon {
background-color:transparent;
border:none;
color:var(--primaryColor);
padding:0;
}

button.btn-icon:hover {
color:var(--secondaryColor);
}

/*
Kalender Filter
*/

.col-nav-filter{
  display:inline-block;
}




/* Abbrechen und Löschen Button */

button.anzeigeButton {
 background-color: #F8F8F8; /* grau */
 border:none;
  color: #000;
  padding: 1em;
  padding-left:2em;
  padding-right:2em;
  text-align: center;
  text-transform:uppercase;
  display: inline-block;
  border-radius: 7px;
  border:1px solid #e6e6e6;

}

button.anzeigeButton:hover {
 background-color: #e6e6e6; /* hellgrün */
 cursor:pointer;
}


button.cancelButton {
 background-color: #F8F8F8; /* grau */
 border:none;
  color: #000;
  padding: 1em;
  padding-left:2em;
  padding-right:2em;
  text-align: center;
  text-transform:uppercase;
  display: inline-block;
  border-radius: 7px;
  border:1px solid #e6e6e6;
  
}

button.cancelButton:hover {
 background-color: #e6e6e6; /* hellgrün */
 cursor:pointer;
}


button.deleteButton {
 background-color: #F05B26; /* grün */
 border:none;
  color: #fff;
  padding: 1em;
  padding-left:2em;
  padding-right:2em;
  text-align: center;
  text-transform:uppercase;
  display: inline-block;
  border-radius: 7px;
  border:1px solid #C64C21;
  
}


button.deleteButton:hover {
 background-color: #C64C21; /* hellgrün */
 cursor:pointer;
}


button.tableButton {
background-color:none;
border:none;
}

.checkbox-label, .radio-label  {
width: auto;
text-transform: initial;
color: var(--primaryColor);
font-size: 1em;
font-weight: 300;
line-height: -2em;
padding-left: 1em;
}


input[type=checkbox]:checked + label, input[type=radio]:checked + label{
color:var(--secondaryColor);
font-weight:400;
}


input[type="checkbox"] ~ label {
  margin-left:10px;
}




/* Dropdown Button */

.dropdown {
  position: relative;
  display: inline-block;
}




.dropdown-content {
  display:none;
  position: absolute;
  background-color: #F8F8F8;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width:10em;
}


.dropdown-content-right {
  display:none;
  right:0;
  position: absolute;
  background-color: #F8F8F8;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width:12em;
}

.dropdown-entry {
  background-color:#F8F8F8;
  border-radius:0;
  color:#000;
  border:none;
  border-bottom:1px solid var(--borderColor);
  min-width:15em;
  text-align: left;
  text-transform:inherit;
  font-size:0.8em;
  padding-left:1em;
  padding-right:0.2em;
}

.dropdown-entry i.fa { 

  padding-right:0.5em;
}


.dropdown:hover .dropdown-content, .dropdown:hover .dropdown-content-right {
	display: block;
}

.dropdown-entry:hover {
  color:#000;

  background-color:var(--borderColor);

}

.dropdown:hover button.btn-dropdown {
background-color:var(--secondaryColor);
}


/*
input[type="file"]  {
    display: none;
}
*/

.custom-file-upload {
    border: 1px solid #e6e6e6;
	background-color: #F8F8F8;
    display: inline-block;
	padding: 2px 2px;
	cursor: pointer;
	width: 14em;
	color: #000;
	border-radius: 7px;
	font-size: 0.7em;
	text-align: center;
	height: 3.5em;
	padding: 1em;
	font-weight: 400;
	z-index: 100;
    }
    
.custom-file-upload:hover {
	background-color:#e6e6e6;

    }
    
    .custom-file-upload-path {
      margin-left:1em;
      padding:0.5em;
      
    }

.btn-upload {
  display:none;
}

input.input-for-new, label.input-for-new {
	display:none;
}

/* ---------------------------------------------------------------------- */
/*      	   	                 Checklisten						       */
/* ---------------------------------------------------------------------- */

tr.bereits-benutzt{
  background-color: #ececec !important;
  color: #b9b9b9!important;
}

/* ---------------------------------------------------------------------- */
/* 								Data Tables  							  */
/* ---------------------------------------------------------------------- */

.data-table {
width:100%;
 border-collapse: collapse;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   overflow-y:auto;
}


.data-table td, .data-table th {
  border: 1px solid #ddd;
  padding: 8px;
}

.data-table tr:nth-child(even){background-color: #F5F5F5;}

.data-table tr:hover {background-color: var(--tableHoverColor);}



.data-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--primaryColor);
  color: white;
  font-weight:500;
}


.nohover-table tr:hover {background-color:unset!important;}




.table-bevor {
width:100%;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

.table-bevor-inner {
width:100%;
}


.data-table th:hover {
cursor:pointer;
}



.data-table {
	border-radius: 5px 5px 5px 5px;
}


.data-table tr::first-line {
	border-radius: 5px 5px 0 0;
}

.data-table tr:last-child {
	border-radius: 0 0 5px 5px;
}

thead {
	border-radius: 5px 5px 0 0;
}





.scrollable-table { 
    width: 100%; 
    overflow-y: auto;
    white-space: nowrap;
    margin-bottom:2em;
}

.scrollable-table::-webkit-scrollbar{
	width: 14px;
	height: 14px;
}

.scrollable-table::-webkit-scrollbar-thumb{
	border-radius: 8px;
	border: 3px solid #fff;
	background-color: rgba(0, 0, 0, .3);
}


.row-link {
  cursor:pointer;
}





/* ---------------------------------------------------------------------- */
/* 								Calendar Table  							  */
/* ---------------------------------------------------------------------- */





.calendar-table {
  width:100%;
   border-collapse: collapse;
     -moz-hyphens: auto;
     -o-hyphens: auto;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
     overflow-y:auto;
  }
  
  
  .calendar-table td, .calendar-table th {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
  }
  
  /*.calendar-table tr:nth-child(even){background-color: #F5F5F5;} */
  
  .calendar-table td:hover {
    background-color:#F5F5F5/* #DDEAE5*/;
    background-clip: padding-box;
  }
  
  
  
  .calendar-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--primaryColor);
    color: white;
    font-weight:500;
  }
  
  
  
  
  .calendar-table th:hover {
  cursor:pointer;
  }
  
  td.daycol {
    position:relative;
  }
  
  td.headcol {
    background-color: var(--primaryColor);
    color:#fff;
    font-weight: 400;
    text-align: center;
    position: sticky;
    z-index:50;
    left: 0;
    border-bottom:var(--borderColor)!important;
  }

  td.headcol:hover {
    background-color: var(--primaryColor);
    color:#fff;
    font-weight: 400;
    background-clip:initial;
  }

 


/* ---------------------------------------------------------------------- */
/*     							            Tooltips 							                    */
/* ---------------------------------------------------------------------- */



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


/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #4d4847 ;
  color: rgb(248, 248, 248);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}





/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
} 


.tooltiptext {
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
}


/* ---------------------------------------------------------------------- */
/* 							User Right Tables  							  */
/* ---------------------------------------------------------------------- */


.userright-table {
   width:100%;
   border-collapse: collapse;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   margin-bottom:2em;
}


.userright-table td, .userright-table th {
  border: 1px solid #ddd;
  padding: 8px;
}

.userright-table tr:nth-child(even){background-color: none;}


.userright-table tr.bereich{background-color: #F5F5F5;}


.userright-table tr:hover {background-color: var(--tableHoverColor);}

.userright-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--primaryColor);
  color: white;
  font-weight:500;
}



.userright-bevor {
width:100%;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

.userright-bevor-inner {
width:100%;
}


.userright-table th:hover {
cursor:pointer;
}






/* ---------------------------------------------------------------------- */
/* 								  WEITERES					  		  	  */
/* ---------------------------------------------------------------------- */

.fa-file-alt {
  padding-left:0.2em;
}
.fa-male {
  padding-left:0.35em;
}



.textarea-info {
  font-style: italic;
  font-size:11px;

}


/* ---------------------------------------------------------------------- */
/* 								 	Chat					  		  	  */
/* ---------------------------------------------------------------------- */

#chatButton {
position: fixed;
right: 2em;
bottom: 2em;
width: 4em;
height: 4em;
border-radius: 3em;
background-color: var(--primaryColor);
padding: 1em;
box-shadow: 3px 3px var(--grayColor);
cursor:pointer;
z-index:100;
padding-left: 0.8em;
}

#chatButton i.fa{
	font-size:2em;
	color:#fff;
}

#Chat i.fa-times{
	font-size:2em;
	color:var(--primaryColor);
	cursor:pointer;
} 

#Chat {
    display: none;
    position: fixed;
    right: 2em;
    bottom: 2em;
    width: 50em;
    height: 35em;
    border-radius: 12px;
    background-color: #fff;
    padding: 1em;
    box-shadow: 3px 3px var(--secondaryColor);
    z-index: 100;
    border: 0.01em solid var(--primaryColor);
}

.chat-inner {
width:100%;
height: 28.5em;
display:flex;
}

.chat-inner-left {
width:30%;
height:98%;
border: 1px solid var(--grayColor);
border-radius:12px 0 0 12px;
overflow-y:auto;
}

.chat-inner-right {
width:70%;
height:98%;
border: 1px solid var(--grayColor);
border-radius:0 12px 12px 0;
border-left:none;
}

#chatbox {
height:90%;
padding:1em;
   overflow:auto;
}



.chat-new-message {
height:10%;
padding-left:1em;
padding-right:1em;
}

.manage-chats {
display:flex;
justify-content: space-around;
margin-top:0.5em;
margin-bottom:0.5em;
}


ul.user-chats {
margin:0;
padding:0;
}

.user-chats-inner {
list-style: none;
padding:1em;
border-bottom:1px solid var(--grayColor);
cursor:pointer;
position:relative;
}

.user-chats-inner:hover {
background-color:var(--grayColor);
}


#usermsg {
    width:90%;
    border:1px solid #ACD8F0; }
  
#submitmsg { 
	font-size:1em;
	margin-left:1em
}
  
.error { color: #ff0000; }
  
#menu { padding:12.5px 25px 12.5px 25px; }
  
.welcome { float:left; }
  
.logout { float:right; }

.chatrow {  
	margin:0 0 0 0;
	display:inline-block;
	width:100%;
}


.msgln { margin:6px 0 6px 0;
	 	 width:auto;
		 float:left;
		 background-color:#f2f2f2;
		 border-radius:4px;
		 max-width:80%;
		 
		 }
		 
.userinfo { text-align:center;
			display:inline-block;
			width:100%;
			margin:5px 0 5px 0; 
		 }



.chat-modal {
	width:100%;
	height:100%;
	z-index:101;
	background-color: rgba(0,0,0,0.4);
	position:absolute;
	top:0;
	left:0;
	border-radius:12px 12px 12px 12px;
}


.chat-modal-inner {
	width:50%;
	height:50%;
	z-index:101;
	background-color: #fff;
	margin:0 auto;
	padding:2em;
	border-radius:0 0 12px 12px;
	position:relative;
}

.newChatIcon, .newGroupIcon {
	cursor:pointer;
	margin-left:3.5em;
	margin-bottom:0.5em;
	color:var(--primaryColor);
}

.newChatIcon:hover, .newGroupIcon:hover {
	color:var(--secondaryColor);
}



#newChatForm {
	display:none;
}

#newGroupForm {
	display:none;
}

h2.chatTitle {
	margin-bottom:1em;
}




.senderInfo {
	padding-top:0.5em;
	padding-bottom:0;
	margin-bottom:0;
	width:100%;
	font-size: 0.8em;
	text-align:center;
	display:inline-block;
}

.chatMessage {
	text-align:left;
	width:100%;
	display:inline-block;
	padding:0.8em;
	padding-top:0.6em;
}

.chat-active {
	background-color:var(--primaryColor);
	color: #fff;
}

.chat-active:hover {
	color: #000;
}




.newMessageNotification {
width: 15px;
height: 15px;
position: absolute;
right: 2em;
top: 38%;
border-radius: 10px 10px 10px 10px;
background-color: red;
color: #fff;
font-size: 11px;
/*display: none; */
padding: 0;
font-weight: bold;
text-align: center;
}




.chatNotification {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0em;
    top: 0;
    border-radius: 10px 10px 10px 10px;
    background-color: red;
    color: #fff;
    font-size: 14px;
    padding: 0;
    padding-top: 2px;
    font-weight: bold;
    text-align: center;
}




/* ---------------------------------------------------------------------- */
/* 					Seiteninhalt mit Buttons         	            	  */
/* ---------------------------------------------------------------------- */


.row {
width:100%;
position:relative;
/* height: 3.5em; */
}


.col-nav {
	display:block;
	width:100%;
	text-align:right;
}

.buttonDivider {
width:2em;
display:inline-block;
}




.nav-link .nav-tabs {
    margin-bottom: -1px;
    background: 0 0;
        background-color: rgba(0, 0, 0, 0);
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    border-radius: 5px 5px 0 0;
}


.nav-link:hover {
	color:#000;
    background-color:#fff;
}



.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    margin-top:0;
    list-style: none;
    flex-direction: row;
}



.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	background-color:var(--oppositePrimary);
	color:#fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight:400;
    
 }   
 
  

/* ---------------------------------------------------------------------- */
/*		    				Registerkartenmenü Mit Links  	              */
/* ---------------------------------------------------------------------- */

 
 .content-menu {
 border:1px #C9C9C9;
 border-radius: var(--borderRadius);
 /*padding:1em; */
 position:relative;
 margin-top:3em;
}
.content-menu-link span {
  display:none;
}

.content-menu-link {
  padding: .5rem 1rem;
} 

@media screen and (min-width: 2400px) {

  .content-menu-link span {
    display:inline-block;
  }

  .content-menu-link {
    padding: .5rem .5rem;
    display: block;
    text-decoration: none;
    color:#000;
  }

}


button.content-menu-link {
border-radius: 8px 8px 0 0;
border: none !important;
color: #fff;
height: 35px;
}

button.content-menu-link:hover {
background-color:#dbdbdb;
}


.content-menu-item, button.content-menu-item {
  display: block;
	margin-right:0.5em;
  text-decoration: none;
	background-color: #C9C9C9;
	color:#000;
	border-color: #C9C9C9;
	border-radius: 8px 8px 0 0;
  position:relative;
}

/*
.filter-pin {
  position:absolute;
  top:-20px;
  left:40%;
  color:var(--borderColor);
 }

 .filter-pin:hover {
  color:var(--primaryColor);
 }
*/

.content-menu-button {
    display: block;
	margin-right:0.3em;
    text-decoration: none;
	background-color: #fff;
	color:#000;
	border-radius: 8px 8px 0 0;
	border-top: 1px solid #dbdbdb;
	border-left: 1px solid #dbdbdb;
	border-right: 1px solid #dbdbdb;
}




.content-menu-item:hover {
    display: block;
	margin-right:0.3em;
    text-decoration: none;
	background-color: #dbdbdb;
	color:#000;
	cursor:pointer;
}




.content-menu-button:hover {

	background-color: #fff;

}




.content-menu-link:hover {
	color:#000;
}


.content-menu-nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    margin-top:0;
    list-style: none;
    flex-direction: row; 
    position: absolute;
	top: -35px;
}

.content-menu-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    margin-top:0;
    list-style: none;
    flex-direction: row; 
    position: absolute;
	top: -35px;
}



.content-menu-active, button.content-menu-active {
    color: #000!important;
    background-color: #fff!important;
    border-radius: 8px 8px 0 0;
    border: 1px #C9C9C9;
    cursor:default;

 }
 
 
 .content-menu-active:hover, button.content-menu-active:hover {
    color: #000;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px #C9C9C9;
    cursor:default;
 }   

 



/* ---------------------------------------------------------------------- */
/* 									HILFE SECTION                        	            	  */
/* ---------------------------------------------------------------------- */

#help-section {
  display:none;
  position:fixed;
  margin:0;
  padding:0;
  height:100vh;
  width:100vw;
  background-color:rgba(0, 0, 0, 0.5);
  z-index:100;
}

#help-section h1 {
  color: var(--weiss1);
  font-size: 3em;
  width:100vw;
  text-align: center;
}

.help-box {
  display:none;
}

.help-box-content {
  display:none;
  position:absolute; 
  top:-10px;
  right:0;
  z-index:101;
  background-color:#fff;
  padding:1em;
  border-radius: var(--borderRadius);
}


.help-box-button {
  display:none;
  position:absolute; 
  top:-25px;
  right:-45%;
  z-index:101;
  background-color:#fff;
  padding:1em;
  color:#000;
  text-transform:none;
  border-radius: var(--borderRadius);
}

.help-box-input {
  display:none;
  position:absolute; 
  top:-10px;
  right:0;
  z-index:101;
  background-color:#fff;
  padding:1em;
  border-radius: var(--borderRadius);
  color:#000;
}

.position-relative {
  position:relative!important;
}

.more-help {
  color:var(--rot1);
  font-size: 20px;
  font-weight: 600;
  padding-left:20px;
}


/* ---------------------------------------------------------------------- */
/* 									Modal	         	            	  */
/* ---------------------------------------------------------------------- */


.modal {
/* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 
}

.modal-inner {
 background-color: #fefefe;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 95%; /* Could be more or less, depending on screen size */
  border-radius: var(--borderRadius);
  position:relative;
}



.modal-inner a.closeLink {
position:absolute; 
right:1em;
top:1em;
color: gray;
font-size:1.5em;
color: var(--primaryColor);
}

.modal-inner a.closeLink:hover {
color: var(--secondaryColor);
}


.modal-inner button.closeLink {
  position:absolute; 
  right:1em;
  top:1em;
  color: gray;
  font-size:1.5em;
  color: var(--primaryColor);
  }
  
  .modal-inner button.closeLink:hover {
  color: var(--secondaryColor);
  }
  




.modal-inner-head {
border-bottom: 1px solid var(--formBorder);
}


.modal-inner-menu {
padding-bottom: 1em;

}

.modal-inner-menu button {
    padding: 0.5em;
    padding-right: 1em;
    padding-left: 1em;;
}


.modal-inner-body {

margin-bottom:2em;
width:100%;
display:flex;
justify-content: space-between;
flex-direction: column;
flex-wrap:wrap;
}

.modal-inner-left {
width:100%;
}

.modal-inner-center {
width:100%;
}

.modal-inner-right {
width:100%;
}




.modal-inner-footer {
border-top: 1px solid var(--formBorder);
padding-top:1em;
text-align:right;
}


.modal h1, .modal h2, .modal h3 {
flex: 1 100%;
}



.modal-img {
border: 1px solid var(--formBorder);
border-radius:7px;
text-align:center;
margin-bottom:1em;
}

.modal-img img {
width: 20em;
}



#createEventModal, #calendarModal {
	display:none;
}

/* ---------------------------------------------------------------------- */
/* 						 MSG _ INFO			           					  */
/* ---------------------------------------------------------------------- */



#msg-info { 
	position:fixed;
	z-index:1000;
	bottom:4em;
	background-color:#64B74F;
	min-height:6em;
	width:100%;
	border-radius: 8px;
	padding:1em;
	color:#FFF;
	border: 1px solid #68BA9A;
	display:flex;
	margin-left:1em;
	margin-right:1em;
	
} 


#msg-info i.fa-info-circle {
 font-size:2.5em;
 padding-top:0.25em;
 padding-right:0.5em;
}


#msg-info .close {
display:inline-grid;
position:absolute;
top:1em;
right:1em;
}

#msg-info a{
color:#F8F8F8;
}

#msg-info a:hover{
color:#FFF;
}



div {
    opacity:1;
    transition:opacity 500ms;
}
div.fadeOut {
    opacity:0;
}





/* ---------------------------------------------------------------------- */
/* 						 MSG _ ERROR			           					  */
/* ---------------------------------------------------------------------- */



#msg-error { 
	position:fixed;
	z-index:1000;
	bottom:4em;
	width:100%;
	background-color:#F05B26;
	min-height:6em;
	left:32%;
	right:32%;
	border-radius: 8px;
	padding:1em;
	color:#FFF;
	border: 1px solid #C64C21;
	display:flex;
	margin-left:1em;
	margin-right:1em;
} 


#msg-error i.fa-exclamation-circle {
 font-size:2.5em;
 padding-top:0.25em;
 padding-right:0.5em;
}


#msg-error .close {
display:inline-grid;
position:absolute;
top:1em;
right:1em;
}

#msg-error a{
color:#F8F8F8;
}

#msg-error a:hover{
color:#FFF;
}



div {
    opacity:1;
    transition:opacity 500ms;
}
div.fadeOut {
    opacity:0;
}



/* ---------------------------------------------------------------------- */
/* 					        	WARTUNGSMODUS          					  */
/* ---------------------------------------------------------------------- */



#Wartungsmodus {
    position: fixed;
    bottom: 0;
    z-index: 200;
    width: 100%;
    height: 40px;
    background-color: #F05B26;
    padding: 0.7em;
    color:#fff;
}



#Wartungsmodus p {
display:inline;
padding-left:0.5em;

}

/* ---------------------------------------------------------------------- */
/* 					        	LOGIN               					  */
/* ---------------------------------------------------------------------- */

#mainsite .login {
height:100vh;
width:100vw;
background-color:#fff;
margin:0 auto;
}

.login-main {
width:90%;
margin:0 auto;
margin-top:2em;
}

.login-main h1 {
	font-size:6em;
	text-align:center;
	margin-bottom:0;
	margin-top:0em;
}

.login-main h6 {
    font-size: 1em;
    text-align: center;
    margin-top: -1em;
    margin-bottom: 1.em;
    font-weight: 400;
}

.login-main p{
font-size:1em;
text-align:center;
}

.login-form {
margin-top:1em;
padding:2em;
background-color:#F8F8F8;
border: 1px solid #e6e6e6;
border-radius: 12px;
float:left;
}

.login-information {
  margin-top:1em;
  padding:2em;
  background-color:#FFF3CD;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  float:left;
  width:30em;
}

.login-information .fa-info-circle {
  font-size: 3em;
  color: #edcc6a;
  margin-left: -15px;
  width: 100%;
  text-align: center;
}
  
.login-information span {
  display: block;
  margin-top: 26px;
  text-align: justify;
}


.first-login-form {
margin-top:1em;
padding:1em;
background-color:#F8F8F8;
border: 1px solid #e6e6e6;
border-radius: 12px;
float:left;
position:relative;
}


.login-form .mainButton {
margin-top:2em;
}


.mainButton {
  background-color: #EAEAEA;
  border: 1px solid #AEAEAE;
  color: #000;
}
.mainButton:hover {
background-color: #D6D6D6;
border: 1px solid #C2C2C2;
color: #000;
}



.login-form input {
width:60%;
background-color:#fff;
}

.login-form label {
font-size:0.8em;
}

.pass-forget {
margin-top:0.8em;
font-size:0.8em;
float:left;
}



#lang-login {
width:100%;
height:100%;
margin-top:2em;
background-color:none;
color:#000;
display: inline-block;
justify-content: center;
align-items: center;
font-size:0.8em;
text-align:center;
}


#lang-login a {
	color:#356251;
	text-decoration:none;
}

#lang-login a.active{
	color: #4E9178;
}

#lang-login a:hover{
	color: #4E9178;
}







/* ---------------------------------------------------------------------- */
/* 							AUFLISTUNGEN			           			*/
/* ---------------------------------------------------------------------- */


dl {
box-sizing:border-box;
line-height: 1.5em;
}


dd {
display:table;
}

.dl-horizontal dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight:400;
}



/* ---------------------------------------------------------------------- */
/* 			        	Offene/Nutzbare CSS-Klassen    					  */
/* ---------------------------------------------------------------------- */




.width-xxs {
max-width:2.5%!important;
}

.width-xs {
max-width:5%!important;
}

.width-s {
max-width:10%!important;
}

.width-m {
max-width:30%!important;
}

.width-l {
max-width:60%!important;
}


.width-xl {
max-width:100!important;
}


.textalign-center{
 text-align:center!important;
}

.textalign-right{
 text-align:right!important;
}

.textalign-left{
 text-align:left!important;
}

.float-right{
 float:right!important;
}

.float-left{
 float:left!important;
}

.marginleft-s {
margin-left:2em!important;
}

.marginleft-m {
margin-left:3em!important;
}

.marginleft-l {
margin-left:4em!important;
}

.marginright-s {
margin-right:2em!important;
}

.marginright-m {
margin-right:3em!important;
}

.marginright-l {
margin-right:4em!important;
}

.margintop-s {
margin-top:2em!important;
}

.margintop-m {
margin-top:3em!important;
}

.margintop-l {
margin-top:4em!important;
}

.marginbottom-xs {
  margin-bottom:1em!important;
  }

.marginbottom-s {
margin-bottom:2em!important;
}

.marginbottom-m {
margin-bottom:3em!important;
}

.marginbottom-l {
margin-bottom:4em!important;
}



.paddingleft-s {
  padding-left:2em!important;
  }
  
  .paddingleft-m {
    padding-left:3em!important;
  }
  
  .paddingleft-l {
    padding-left:4em!important;
  }
  
  .paddingright-s {
    padding-right:2em!important;
  }
  
  .paddingright-m {
    padding-right:3em!important;
  }
  
  .paddingright-l {
    padding-right:4em!important;
  }
  
  .paddingtop-s {
    padding-top:2em!important;
  }
  
  .paddingtop-m {
    padding-top:3em!important;
  }
  
  .paddingtop-l {
    padding-top:4em!important;
  }
  
  .paddingbottom-s {
    padding-bottom:2em!important;
  }
  
  .paddingbottom-m {
    padding-bottom:3em!important;
  }
  
  .paddingbottom-l {
    padding-bottom:4em!important;
  }

.margintop-none {
  margin-top:0!important;
}
.marginbottom-none {
  margin-bottom:0!important;
}
.marginleft-none {
  margin-left:0!important;
}
.marginright-none {
  margin-right:0!important;
}

.paddingtop-none {
  padding-top:0!important;
}
.paddingbottom-none {
  padding-bottom:0!important;
}
.paddingleft-none {
  padding-left:0!important;
}
.paddingright-none {
  padding-right:0!important;
}


.border-none {
border:none!important;
}

.minwidth-xs {
min-width:30%!important;
}

.minwidth-s {
min-width:50%!important;
}

.minwidth-m {
min-width:60%!important;
}

.minwidth-l {
min-width:75%!important;
}


.minwidth-xl {
min-width:85%!important;
}



.d-flex {
  display:flex;
}

/* ---------------------------------------------------------------------- */
/* 					        	DIVERSES               					  */
/* ---------------------------------------------------------------------- */



pre.code {
border:1px solid var(--borderColor);
border-radius: var(--borderRadius);
margin-top:1em;
background-color:#fff;
padding-left:1em;
padding-right:1em;
padding-top:2em;
padding-bottom:2em;
margin-bottom:2em;
overflow-y:auto;
}


.documentation-part {
border:1px solid var(--borderColor);
padding:1em;
margin-bottom:2em;
border-radius: var(--borderRadius);
line-height: 1.5em;
}




/* ----------------------------------------------------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------------------------------------------------- */
/* 						                                  RESPONSIVE STUFF                                 					     */
/* ----------------------------------------------------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------------------------------------------------- */



@media screen and (min-width: 800px) {




#logo {
font-size:1.2em;
width:250px;
padding-top:0.8em;
}




#topnav {
display:block;
}


#mobilenav {
display:none;
}

#content {
    display:flow-root;
}

#content-inner {
margin-top: 1em;
padding-left: 2em;
padding-right: 2em;
background-color: var(--grayColor);
margin-left: 5em;
margin-right: 2em;
padding-top: 2em;
border-radius: var(--borderRadius);
padding-bottom: 3em;
min-height:auto;
}

.content-row {
flex-direction:row;
}


.content-flex {
flex-direction:row;
margin: 0, -1em;
}

.content-col-4 {
width:100%;
margin: 0.5em 1em;
}

.content-col-3 {
width:75%;
margin: 0.5em 1em;
}

.content-col-2 {
width:50%;
margin: 0.5em 1em;
}

.content-col-1 {
width:25%;
margin: 0.5em 1em;
}

/* ---------------------------------------------------------------------- */
/* 						               INHALTSSUCHE						                      */
/* ---------------------------------------------------------------------- */

.highlight{background-color:yellow}

.empty-search-result {
  display:none;
}

/* ---------------------------------------------------------------------- */
/* 						  HAUPTMENU (linke seite)						  */
/* ---------------------------------------------------------------------- */





#main-menu {
display:block;
width:250px;
z-index:1;
}

div.main-menu-inner {
display:block;
width:100%;
z-index:1;

}

#hideMenuLink {
display:inline-block;
}

#showMenuLink {
display:none;
}




.sidebar-menu {
list-style: none;
margin-top:0;
border:none;
}

.sidebar-menu:last-child {
border:none;
}


.sidebar-menu li {
list-style: none;
padding:0;
border:none;
}


.sidebar-menu a {
color:var(--secondaryColor);
}




.sidebar-menu a:active, .sidebar-menu a:hover {
background-color:var(--secondaryColor);
color:#FFF;
}

.sidebar-menu li.active a {
background-color:#FFF;
}

.sidebar-menu li.active a:hover {
background-color:var(--secondaryColor);
color:#FFF;
}

.sidebar-menu i.fa {
  width:2em; 
}


/* ---------------------------------------------------------------------- */
/* 				                 		DASHBOARD  			                					  */
/* ---------------------------------------------------------------------- */


div.dashboard {
	display:grid;
	grid-template-columns: auto auto auto;
}




div.dashboard-entry {
width:11em;
height:11em;
padding: 1em;
border-radius: var(--borderRadius);
position: relative;
text-align:center;
border: 1px solid #f0f0f0;
}



/* ---------------------------------------------------------------------- */
/* 								MODAL									  */
/* ---------------------------------------------------------------------- */


.modal-inner {
  margin: 3% auto; /* 15% from the top and centered */
  width:max-content;
  max-width:95%;
}




.modal-inner-head {
border-bottom: 1px solid var(--formBorder);
margin-bottom: 1em;
}


.modal-inner-body {
flex-direction: row;
}

.modal-inner-left {
width:47%;
margin-right:2em;
}

.modal-inner-center {
width:50%;
margin-right:2em;
}


.modal-inner-right {
width:47%;

}

.modal-inner-full {
width:100%;
flex:1 100%;
}




/* ---------------------------------------------------------------------- */
/* 					        	LOGIN               					  */
/* ---------------------------------------------------------------------- */

#mainsite .login {
height:100vh;
width:100vw;
background-color:#fff;
margin:0 auto;
}

.login-main {
width:30em;
margin:0 auto;
margin-top:4em;
}

.first-login-main {
width:60em;
margin:0 auto;
margin-top:2em;
}

.login-main h1 {
	font-size:6em;
	text-align:center;
	margin-bottom:0;
	margin-top:1em;
}

.login-main h6 {
    font-size: 1em;
    text-align: center;
    margin-top: -1em;
    margin-bottom: 1.em;
    font-weight: 400;
}

.login-main p{
font-size:1em;
text-align:center;
}

.login-form {
width:30em;
padding:2em;
background-color:#F8F8F8;
border: 1px solid #e6e6e6;
border-radius: 12px;
float:left;
}

.first-login-form {
width:60em;
padding:1em;
background-color:#F8F8F8;
border: 1px solid #e6e6e6;
border-radius: 12px;
float:left;
}


.login-form input {
    width: 60%;
    background-color: #fff;
}


.first-login-form input {
	width:100%;
}

.login-form label {
font-size:0.8em;
}

.pass-forget {
margin-top:2.6em;
font-size:0.8em;
float:left;
}



#lang-login {
width:100%;
height:100%;
margin-top:2em;
background-color:none;
color:#000;
display: inline-block;
justify-content: center;
align-items: center;
font-size:0.8em;
text-align:center;
}


#lang-login a {
	color:#356251;
	text-decoration:none;
}

#lang-login a.active{
	color: #4E9178;
}

#lang-login a:hover{
	color: #4E9178;
}


 






/* ---------------------------------------------------------------------- */
/* 						 MSG _ INFO			           					  */
/* ---------------------------------------------------------------------- */



#msg-info { 
	position:fixed;
	z-index:1000;
	bottom:4em;
	min-width:30em;
	width:auto;
	background-color:#64B74F;
	min-height:6em;
	left:32%;
	right:32%;
	border-radius: 8px;
	padding:1em;
	color:#FFF;
	border: 1px solid #68BA9A;
	display:flex;
	margin:0 auto;
} 


#msg-info i.fa-info-circle {
 font-size:2.5em;
 padding-top:0.25em;
 padding-right:0.5em;
}


#msg-info .close {
display:inline-grid;
position:absolute;
top:1em;
right:1em;
}

#msg-info a{
color:#F8F8F8;
}

#msg-info a:hover{
color:#FFF;
}



div {
    opacity:1;
    transition:opacity 500ms;
}
div.fadeOut {
    opacity:0;
}





/* ---------------------------------------------------------------------- */
/* 						 MSG _ ERROR			           					  */
/* ---------------------------------------------------------------------- */



#msg-error { 
	position:fixed;
	z-index:1000;
	bottom:4em;
	min-width:30em;
	width:auto;
	background-color:#F05B26;
	min-height:6em;
	left:32%;
	right:32%;
	border-radius: 8px;
	padding:1em;
	color:#FFF;
	border: 1px solid #C64C21;
	display:flex;
	margin:0 auto;
} 


#msg-error i.fa-exclamation-circle {
 font-size:2.5em;
 padding-top:0.25em;
 padding-right:0.5em;
}


#msg-error .close {
display:inline-grid;
position:absolute;
top:1em;
right:1em;
}

#msg-error a{
color:#F8F8F8;
}

#msg-error a:hover{
color:#FFF;
}



div {
    opacity:1;
    transition:opacity 500ms;
}
div.fadeOut {
    opacity:0;
}





/* ---------------------------------------------------------------------- */
/* 						 MSG _ DEBUG			           					  */
/* ---------------------------------------------------------------------- */



#msg-debug { 
	position:fixed;
	z-index:1000;
	top:4em;
	min-width:30em;
	width:auto;
	background-color:#1f93b4;
	min-height:6em;
	left:32%;
	right:32%;
	border-radius: 8px;
	padding:1em;
	color:#FFF;
	border: 1px solid #12576b;
	display:flex;
	margin:0 auto;
} 


#msg-debug i.fa-bug-slash {
 font-size:2.5em;
 padding-top:0.25em;
 padding-right:0.5em;
}


#msg-debug .close {
display:inline-grid;
position:absolute;
top:1em;
right:1em;
}

#msg-debug a{
color:#F8F8F8;
}

#msg-debug a:hover{
color:#FFF;
}



}

@media screen and (min-width: 1200px) {




#mainsite {
 height:unset;
}

#logo {
font-size:1.2em;
width:250px;
padding-top:0.8em;
}


#topnav {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
}

#topnav ul {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
}

#topnav ul li{
  width:60px;
  height:50px;
  padding:1em;
  text-align:center;
}




#mainsearch {
float:left;
height:50px;
display:block;
}

.searchform {
width:20em;
background-color:var(--secondaryColor);
border-radius: 8px;
margin-top:0.5em;
margin-left:3em;
}



.searchform .fa-search {
margin-left:1em;
margin-right:0.5em;
color:#A1B6AE;
}

.searchform input[type=search] {
border:none;
height:2em;
width:87%;
font-size:1em;
margin:0;
padding:0;
color:#fff;
font-weight:200;
}

.searchform input[type=search]:focus{
outline:none;
}

#content {
    margin-left:250px;
}

#content-inner {
padding-left: 3em;
padding-right: 3em;
background-color: var(--grayColor);
margin-top: 1em;
margin-bottom: 2em;
margin-left: 3em;
margin-right: 3em;
padding-top: 2em;
border-radius: 10px;
padding-bottom: 3em;
min-height:auto;

}




/* ---------------------------------------------------------------------- */
/* 						  Breadcrumb     								  */
/* ---------------------------------------------------------------------- */





#breadcrumb {
display:block;
}



/* ---------------------------------------------------------------------- */
/* 						DASHBOARD  			           					  */
/* ---------------------------------------------------------------------- */



div.dashboard {
	display:grid;
	grid-template-columns: auto auto auto auto auto auto;
}




/* ---------------------------------------------------------------------- */
/* 						 Tabellen und was dazu gehört					  */
/* ---------------------------------------------------------------------- */


/* Navigation für Tabellenkategorien */

.nav {
    
    margin-bottom: 0;
    margin-top:1.1em
}


.table-bevor {
flex-direction:row;
}







/* ---------------------------------------------------------------------- */
/* 					    	 UHR UND DATUM AUF STARTSEITE               					  */
/* ---------------------------------------------------------------------- */



  #examClock {
   
    position: absolute;
    top: 3.4em;
    right: 4em;
    }







/* ---------------------------------------------------------------------- */

}





/* ---------------------      KALENDER TEST     ----------------------- */

ul {list-style-type: none;}


/* Month header */
.month {
  padding: 70px 25px;
  width: 100%;
  background: var(--primaryColor);
  text-align: center;
}

/* Month list */
.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
  float: left;
  padding-top: 10px;
}

/* Next button */
.month .next {
  float: right;
  padding-top: 10px;
}

/* Weekdays (Mon-Sun) */
.weekdays {
  margin: 0;
  padding: 10px 0;
  background-color:#ddd;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  color: #666;
  text-align: center;
}

/* Days (1-31) */
.days {
  padding: 10px 0;
  background: #eee;
  margin: 0;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #777;
}

/* Highlight the "current" day */
.days li .active {
  padding: 5px;
  background: var(--secondaryColor);
  color: white !important
}

/* Upload-Button stylen*/

input[type="file"]{
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: -1px;
    left: 0;
    width: 0.1px;
    height: 0.1px;
    user-select: none;
}

input[type="file"]:focus + label[for="files"]{
    border: 1px solid #85E5FF;
}

label[for="files"]{
    border: 1px solid #e6e6e6;
	background-color: #F8F8F8;
    display: inline-block;
	padding: 2px 2px;
	cursor: pointer;
	width: 14em;
 	height: 2.8em;
	color: #000;
	font-size: 0.9em;
	text-align: center;
	border-radius: 10px;
	padding: 0.8em;
	font-weight: 500;
	z-index: 100;
    
}

label[for="files"]:hover{
    background-color:#e6e6e6;
}


#fileTable {
    width:100%;
    border-collapse: collapse;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
    hyphens: auto;
    overflow-y:auto;
  }

#fileTable th, #fileTable td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
.fileTable tr:nth-child(even){background-color: #F5F5F5;}
.fileTable tr:hover {background-color: var(--tableHoverColor);}


#fileTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--primaryColor);
    color: white;
    font-weight:500;
/*    background-color: #f2f2f2; */
  }
.error-row {background-color: #ffcccc;}
/* ---------------------------------------------------------------------- */

.delete-icon {
    color:var(--primaryColor);
    padding:0;
    font-size: 1em;  /*  Vergrößere das Icon */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    }
.hidden {
    display: none;
}