@media (prefers-color-scheme: dark) {
	:root {
	  --background-color: #040615;/* 101219 */
	  --background-color-nav: #333333;
	  --background-color-article: #07111D;
	  --background-color-Fahrzeugplan: #006d9c;
	  --background-color-BSW: #9c0000;
	  --background-color-Übung: #009c6d;
	  --background-color-Veranstaltung: #9c6d9c;
	  --background-color-Raumplan: #006eff;
	  --background-color-Geräteplan: #938a0f;
	  --background-color-freigabe: #333333;
	  --background-color-input: #1c1c1e;
	  --background-color-info-button: #006eff;
	  --text-color: #f0f0f0;
	  --text-color-primary: #f0f0f0;
	  --text-color-h1: #FF0000;
	  --text-color-link: #BBBBBB;
	  --border-article: #555555;
	  --border-tabelle: #555555;
	  --shadow-color: #111111;
	  --highlight: var(--wa-color-gray-10);
	  --highlight-color: var(--wa-color-gray-30);
	  --primary: #B4182D;
	  --wa-color-text-link: var(--wa-color-red-50);
	  --dialog: #37415C;
	  /* Schriftart */
  --font-family: 'Montserrat', sans-serif; /* Moderne Schriftart */
  background-image: url("../bilder/hintergrund-d.jpg");
	}
	header#bild img{
		filter: invert(50) hue-rotate(180deg) brightness(0.8) contrast(2) saturate(3);
	}
}

@media (prefers-color-scheme: light) {
	:root {
	  --background-color: #FFFFFF;
	  --background-color-nav: #555555;
	  --background-color-article: #FFFFFF;
	  --background-color-Fahrzeugplan: #C8FFFF;
	  --background-color-BSW: #FFC8C8;
	  --background-color-Übung: #C8FFC8;
	  --background-color-Veranstaltung: #C8C8FF;
	  --background-color-Raumplan: #A3E3FF;
	  --background-color-Geräteplan: #FFFFC8;
	  --background-color-freigabe: #FFFFFF;
	  --background-color-input: #f7f7f7;
	  --background-color-info-button: #5b9cff;
	  --text-color: #333333;
	  --text-color-primary: #FFFFFF;
	  --text-color-h1: #DD0000;
	  --text-color-link: #555555;
	  --border-article: #DDDDDD;
	  --border-tabelle: #AAAAAA;
	  --shadow-color: #FFFFFF;
	  --highlight: #fafafa;
	  --highlight-color: #f2f2f2;
	  --primary: #B4182D;
	  --dialog: #FFFFFF;
	  /* Schriftart */
  		--font-family: 'Montserrat', sans-serif; /* Moderne Schriftart */
		  background-image: url("../bilder/hintergrund.jpg");
	}
}

body, html {
	background-repeat: no-repeat;
	background-position: top center;
	background-size:cover; 
	background-attachment:fixed;
	margin: 0;
	padding: 0;
	font-family: 'Trebuchet MS', sans-serif;
}

:not(:defined) {
	visibility: hidden;
  }

textarea,input{
	font-family: 'Trebuchet MS', sans-serif;
}

/* HEADER ---------------------------------------------------------------------- */

header#text{
	float: right;
	padding: 0;
	background: var(--primary);
	margin: 0 0 5px 0 ;
	width: 80%;
	display: block;
}

header#text h1{
	padding: 15px 0px 15px 40px;
	margin: 0 0 5px 0 ;
	color: var(--text-color-primary);
	font-weight: bold;
	font-size: 35px;
	background: var(--primary);
}

header#bild {
	width: 20%;
	float: left;
	margin: 0 ;
	padding: 0;
	background-color: var(--background-color);
}

header#bild img{
	width: 80%;
	max-width: 300px;
	margin: 1% auto;
	display: block;
	padding-right: 5px;
}

input[type=submit]{
    cursor: pointer;
}

/* NAV ---------------------------------------------------------------------- */

nav#normal {

	margin: 0 0 0 0;
	padding: 0;
	display: inline-block;
	background: var(--background-color-nav);
	width: 100%;
}

nav#normal p {
	margin: 0;
	padding: 10px 15px 0 0;
	text-align: right;
	font-size: 16px;
	color: var(--text-color-primary);
}

nav#normal ul{

	margin: 0;
	padding: 0;
	transition: all 300ms;
	display: block;
} 

nav#normal ul li{
	
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	position: relative;
	transition: 300ms all ;
} 

nav#normal ul li a{

	display: inline-block;
	padding: 10px;
	
	min-width: 120px;
	text-align: center;
	font-size: 16px;
	color: var(--text-color-primary);
	margin: 0 ;
	text-decoration: none;
	background: var(--background-color-nav);
	font-weight: 300;
	transition: 300ms all ;
	font-family: sans-serif;
}

nav#normal ul li:hover > a{
	background: #222222;
} 

nav#normal ul li ul {
	overflow: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	transition: 300ms all ;
	max-height: 0;
} 

nav#normal ul li:hover > ul{
	max-height: 700px; 
} 

nav#mobile {
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 100%;
}

nav#mobile ul{
	width: 100%;
	margin: 0;
	padding: 0;
	transition: all 500ms;
	overflow: hidden;
	float:left;
}

nav#mobile:hover > ul{
	max-height: 800px;
	
} 

nav#mobile ul li{
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	list-style: none;
	position: relative;
	transition: 500ms all ;
} 

nav#mobile ul li a{
	display: inline-block;
	padding: 10px 0 10px 10px ;
	width: 100%;
	text-align: left;
	font-size: 16px;
	color: #FFFFFF;
	margin: 0;
	text-decoration: none;
	background: var(--background-color-nav);
	transition: 500ms all ;
	font-family: sans-serif;
}

nav#mobile ul li:hover > a{
	background: #550000;
} 

nav#mobile ul li ul {
	width: 100%;
	transition: 500ms all ;
	max-height: 0;
	overflow: hidden;
	float: left;
} 

nav#mobile ul li:hover > ul{
	max-height: 700px; 
} 

/* ARTICLE ---------------------------------------------------------------------- */

article {
	margin: 20px 0 0 0;
	padding: 0 50px 0 45px;
	width: 70%;
	float: left;
	box-sizing: border-box;
	font-size: 16px;
	
}

article h1{
	margin: 0;
	padding: 0;
	color: var(--text-color-h1);
	font-size: 30px;
	text-decoration: underline;
	display: inline;
}

.article_bearbeiten{
	float: right;
	margin: 5px 5px 0 0;
}

article h2{
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
	display: inline;
}

article p{
	margin: 0;
	padding: 10px 0 0 10px;
	color: var(--text-color);
	font-size: 16px;
	text-decoration: none;
	font-weight: normal;
}

article p.bearbeitet{
	margin: 0;
	padding: 0 0 0 20px;
	color: var(--text-color);
	font-size: 14px;
	text-decoration: none;
	font-weight: normal;
	display: inline;
}
article wa-avatar{
	--size: 30px;
	margin: 0 0 0 20px;
}
article img{
	margin: 0;
	padding: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#daumen{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 8px;
}

#article_box,
#article_box0 {
	overflow: auto;
	width: 100%;
	margin: 0 0 20px 0;
	padding: 10px;
	color: #FFFFFF;
	box-sizing: border-box;
	background: var(--background-color-article);
	border: 1px var(--border-article) solid;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#article_box1 {
	overflow: auto;
	width: 100%;
	margin: 0 0 20px 0;
	padding: 10px;
	color: #FFFFFF;
	box-sizing: border-box;
	background: var(--background-color-article);
	border: 5px #FFFF00 solid;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#article_box2 {
	overflow: auto;
	width: 100%;
	margin: 0 0 20px 0;
	padding: 10px;
	color: #FFFFFF;
	box-sizing: border-box;
	background: var(--background-color-article);
	border: 5px #DD0000 solid;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#article_box3 {
	overflow: auto;
	width: 100%;
	margin: 0 0 20px 0;
	padding: 10px;
	color: #FFFFFF;
	box-sizing: border-box;
	background: #FFFFFF;
	border: 5px #000000 solid;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#bild_text {
	width: 100%;
	display: block;
	margin: 0 ;
	padding: 0 ;
	overflow: auto;
}

#erstellt_bearbeitet {
	width: 100%;
	margin: 0 ;
	padding: 0 ;
}

.article_news_bild {
	width: 100px;
	float: left;
	margin: 0 10px 0 0;
}

article a:link,
article a:visited,
article a:focus,
article a:active { color:var(--text-color-link); text-decoration: none; }

article a:hover { color:#DD0000; text-decoration: none; }

.linknews:link,
.linknews:visited,
.linknews:focus,
.linknews:active { color:#DD0000; text-decoration: underline; }

.linknews:hover { color:#555555; text-decoration: underline; }





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

#login {
	margin: auto;
	padding: 30px ;
	width: 400px;
	background: #DDDDDD;
	height: 300px; 
	font-size: 16px;
    position: absolute;
	box-sizing: border-box;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

#login p{
	margin-top: 5px;
	padding: 0;
	color: #DD0000;
	font-size: 13px;
	text-decoration: underline;
	text-align:left;
	transition: 900ms all ;
}

#login a:link { color:#555555; text-decoration: underline; }
#login a:visited { color:#555555; text-decoration: underline; }
#login a:focus { color:#555555; text-decoration: underline; }
#login a:hover { color:#DD0000; text-decoration: underline; }
#login a:active { color:#555555; text-decoration: underline; }

.sbn, .passwort{
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 10px ;
	color: #000000;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	text-align:left;
	 outline: none;
}

.passwort{
	margin-top: 20px;
}

.loginbuton {
    background-color: #DD0000;
    border: none;
    color: #FFFFFF;
	width: 100%;
	margin-top: 20px;
	padding: 10px ;
    text-decoration: none;
    cursor: pointer;
	font-size: 20px;
	font-weight: bold;
}

.versendebuton {
    background-color: #DD0000;
    border: none;
    color: #FFFFFF;
	width: 150px;
	margin: 10px 0 0 10px;
	padding: 5px ;
    text-decoration: none;
    cursor: pointer;
	font-size: 16px;
	font-weight: normal;
	
}

.email{
	box-sizing: border-box;
	width: 300px;
	margin: 20px 0 10px 10px;
	padding: 5px ;
	color: #000000;
	font-size: 16px;
	font-weight: normal;
	text-decoration: none;
	text-align:left;
	outline: none;
}

/* ASIDE ---------------------------------------------------------------------- */

aside {
	width: 30%;
	color: var(--text-color);
	padding: 0 50px 0 0;
	margin: 0 ;
	float: right;
	box-sizing: border-box;
}

aside p.flohmarkt0{
	margin: 0;
	padding: 0 0 0 10px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	background: #DD0000;
}

aside h2{
	margin: 0 0 5px 0;
	padding: 0;
	color: var(--text-color);;
	font-size: 16px;
	text-decoration: underline;
}

aside p{
	margin: 0;
	padding: 0 0 5px 10px;
	color: var(--text-color);
	font-size: 14px;
	text-decoration: none;
}

aside a:link { color:#555555; text-decoration: none; }
aside a:visited { color:#555555; text-decoration: none; }
aside a:focus { color:#555555; text-decoration: none; }
aside a:hover { color:#DD0000; text-decoration: none; }
aside a:active { color:#555555; text-decoration: none; }

#aside_container, #aside_container_clear {
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0px;
	box-sizing: border-box;
	background: var(--background-color-article);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#aside_container h2 {
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	color: var(--text-color);
}

.wa-progress-bar-green{
	--indicator-color: #4CAF50;
	margin: 0 20px 0 20px;
}

.wa-progress-bar-orange{
	--indicator-color: #FF8C00;
	margin: 0 20px 0 20px;
}

.wa-progress-bar-red{
	--indicator-color: #f44336;
	margin: 0 20px 0 20px;
}

.wa-progress-bar-gray{
	--indicator-color: #555555;
	margin: 0 20px 0 20px;
}

#aside_kacheln {
	width: 100%;
	height: 65px;
	margin: 0 0 20px 0;
	box-sizing: border-box;
}

#aside_box{
	width: 18%;
	padding: 20px 0;
	float: left;
	margin: 0 1% 0 1%;
	font-size: 20px;
	font-weight:bold;
	text-align: center;
	vertical-align: middle;
}

#aside_box_full{
	width: 100%;
	padding: 20px 0;
	float: left;
	margin: 0 ;
	font-size: 20px;
	font-weight:bold;
	text-align: center;
	vertical-align: middle;
}

#aside_box_full_geraete{
	width: 100%;
	padding: 5px 0 5px 10px;
	float: left;
	margin: 0 ;
	font-size: 14px;
	font-weight:normal;
	text-align: left;
	vertical-align: middle;
}

#aside_container_clear {
	background-color: #FFE6E6;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.8) 20px, rgba(255,255,255,0.8) 40px);
	border: 5px #DD0000 solid;
}

#aside_clear ul{
	list-style-type: none;
	position: relative;
	margin: 0 ;
	padding: 0;
	overflow: hidden;
	transition: all 500ms;
	text-align: center;
}

#aside_clear li{
	position: relative;
	display: inline;
	float: left;

} 

.clear_ja, .clear_nein {
	margin: 10px;
    display: block;
    text-align: center;
    padding: 6px 0 6px 0 ;
    text-decoration: none;
    text-align: center;
    width: 100px;
	font-size: 16px;
    font-family: sans-serif;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	cursor: pointer;
	transition: all 500ms;
	color:#FFFFFF;
}

.clear_ja {
    background: #00DD00;
	border: 4px #00DD00 solid;
}

.clear_nein{
    background: #DD0000;
	border: 4px #DD0000 solid;
}

.clear_ja:hover, .clear_nein:hover{
	background: #FFFFFF;
}

.speichern {
    background-color: #DD0000;
    border: none;
    color: #FFFFFF;
    padding: 12px 28px;
    text-decoration: none;
    cursor: pointer;
	font-size: 14px;
	margin: 0 0 20px 220px;
}

.speichern_links {
    background-color: #DD0000;
    border: none;
    color: #FFFFFF;
    padding: 6px 10px 6px 10px;
    text-decoration: none;
    cursor: pointer;
	font-size: 14px;
	margin: 5px 0 0 10px;
}

#aside_clear a:link,
#aside_clear a:visited,
#aside_clear a:focus,
#aside_clear a:hover,
#aside_clear a:active { 
	color:#FFFFFF;
	text-decoration: none;
	transition: all 500ms;
}

#aside_clear a:hover, .clear_ja:hover, .clear_nein:hover {
	color:#000000;
	text-decoration: none;
	transition: all 500ms;
}

.aside_news_bild {
	width: 100px;
}

/* The Modal (background) */
.modal,
.modal2,
.modal3 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 150px; /* Location of the box */
    left: 0;
    top: 0;
	transition: all 1500ms;
    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.6); /* Black w/ opacity */
	transition: all 1500ms;
}

.modali {
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 200px; /* Location of the box */
	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.7); /* Black w/ opacity */
  }

/* Modal Content */
.modal-content,
.modal-content2,
.modal-content3 {
    margin: auto;
    padding: 0;
	box-sizing: border-box;
	background-color: var(--background-color);
	border: 5px #DD0000 solid;
	border-radius: 20px;
    width: 40%;
	font-size: 16px;
	position: relative;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0} 
	to {top:0; opacity:1}
}
  
@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

.modal-header {
	padding: 15px 15px;
	color: var(--text-color);
	border-bottom: 1px #555555 solid;
	background-color: var(--dialog);
	border-radius: 15px 15px 0 0;
  }
.modal-header h2{
	font-size: 20px;

  }

.modal-body {
	padding: 15px 15px;
	font-size: 16px;
	color: var(--text-color);
	background-color: var(--background-color);
}

.modal-body p {
	font-size: 16px;
	color: var(--text-color);
}

.modal-footer {
	margin: 20px 0px 20px 0px;
	height: 30px;
	width: 100%;
  }
  .modal-button {
	float: left;
	width: 30%;
	color: white;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	margin: 0px 0px 0px 13.33%;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 8px;

  }

  .button_ {
	float: left;
	width: 30%;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	margin: 0px 0px 0px 2.33%;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 8px;
  }

  .button_2x {
	float: left;
	width: 30%;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	margin: 0px 0px 0px 13.33%;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 8px;
  }

  .button1 {
	background: var(--background-color);
	color: var(--text-color); 
	border: 2px solid #4CAF50;
  }

  .button1on {
	background-color: #4CAF50; 
	color: #FFFFFF; 
	border: 2px solid #4CAF50;
  }

  .button1:hover {
	background-color: #4CAF50;
	color: white;
  }

  .button2 {
	color: var(--text-color);
	box-sizing: border-box;
	background: var(--background-color);
	border: 2px solid #FF8C00;
  }

  .button2on {
	background-color: #FF8C00; 
	color: #FFFFFF; 
	border: 2px solid #FF8C00;
  }

  .button2:hover {
	background-color: #FF8C00;
	color: white;
  }

  .button3 {
	background: var(--background-color);
	color: var(--text-color);
	border: 2px solid #f44336;
  }

  .button3on {
	background-color: #f44336; 
	color: #FFFFFF; 
	border: 2px solid #f44336;
  }

  .button3:hover {
	background-color: #f44336;
	color: white;
  }

  .button4 {
	background-color: #555555; 
	color: #FFFFFF; 
	border: 2px solid #DD5555;
	width: 95.34%;
  }

  .button5 {
	background-color: #555555; 
	color: #FFFFFF; 
	border: 2px solid #DD5555;
	width: 95.34%;
	float: left;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	margin: 0px 0px 0px 2.33%;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 8px;
  }

  .button6 {
	background-color: #f44336; 
	color: #FFFFFF; 
	border: 2px solid #DD5555;
	width: 95.34%;
	float: left;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	margin: 0px 0px 0px 2.33%;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 8px;
  }

/* The Close Button */
.close,
.close2,
.close3 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus,
.close2:hover,
.close2:focus,
.close3:hover,
.close3:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.p_rechts {
    float: right;
}


/* MELDUNGEN, FEHLER ---------------------------------------------------------------------- */

div#meldung, div#fehler, div#leer {
	margin: 0 0 5px 0;
	padding: 0;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

div#leer {
	color: var(--background-color);
	border: 2px var(--background-color) solid;
}

div#meldung {
    background: green; /* For browsers that do not support gradients */
	background-color: #E6FFE6;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.8) 20px, rgba(255,255,255,0.8) 40px);
	border: 2px #00DD00 solid;
	color: #000000;
}

div#fehler {
    background: red; /* For browsers that do not support gradients */
	background-color: #FFE6E6;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.8) 20px, rgba(255,255,255,0.8) 40px);
	border: 2px #DD0000 solid;
	color: #000000;
}

div#meldung p, div#fehler p, div#leer p{
	margin: 0 ;
	padding: 6px;
	font-size: 15px;
	font-weight: bold;
}

#back {
	color: #DD0000;
	font-size: 30px;
	position: fixed;
	top: 129px;
	left: 10px;
	transition: all 500ms;
}

#back:hover {
	color: #FF0000;
	transition: all 500ms;
}

footer{
	position: sticky;
    bottom: 0px;
    overflow: hidden;

    margin: 15px 0 0 0;

   
    width: 100%;
	
	transition: all 500ms;
	float: left;
	height: 30px;

}

footer p{
	color: #555555;
	font-size: 10px;
	text-align: center;
	display: none;
}


/* DRUCKEN ---------------------------------------------------------------------- */

@media print {
	nav#normal,
	nav#mobile,
	div#meldung,
	div#fehler,
	div#leer, 
	#aside_container,
	#aside_container_clear,
	header#bild,
	#back {
		display: none;
	}
	
	header#text{
		width: 100%;
	}
	
	article {
		width: 100%;
		padding: 0;
		height: 100%; 
	}
	
	#article_box,
	#article_box0 {
		margin: 0 0 20px 0;
		box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
		border: 0px #DDDDDD solid;
	}
}

/* EINSTELLUNGEN ---------------------------------------------------------------------- */

#einstellungen_tabelle{
	margin: 20px 0 5px 0;
	width:100%;
	border-collapse:collapse;
	font-size: 14px;
}

#einstellungen_tabelle tr{
	height:35px;
}

#einstellungen_tabelle_fix {
	width:180px;
	border: 0px #000000 solid;
	text-align:left;
	padding-left: 20px;
	color:#000000;
	background-color: #FFFFFF;
	font-size: 14px;
	font-weight:bold;
}

#einstellungen_tabelle_bearbeiten {
	border: 0px #000000 solid;
	text-align:left;
	padding-left: 20px;
	color:#000000;
	background-color: #FFFFFF;
	font-size: 14px;
}

#einstellungen_tabelle_info{
	width:350px;
	padding: 5px;
	text-align:left;
	color:#000000;
	font-size: 14px;
	font-weight:normal;
	background-color: #FFFFFF;
	box-sizing: border-box;
}

#einstellungen_vorwahl_mobile {
	margin: 20px 0 20px 0;
	text-align:left;
	color:#000000;
	font-size: 14px;
	font-weight:normal;
	outline: none;
	border: 1px #DDDDDD solid;
	width:35%;
	display: inline-block;
}

#einstellungen_tel_mobile {
	padding: 5px;
	text-align:left;
	color:#000000;
	font-size: 14px;
	font-weight:normal;
	background-color: #FFFFFF;
	box-sizing: border-box;
	outline: none;
	border: 1px #DDDDDD solid;
	width:60%;
}

#einstellungen_email_mobile,
#einstellungen_passwort_mobile,
#einstellungen_passwort_mobile_mitte {
	margin: 20px 0 20px 0;
	padding: 5px;
	text-align:left;
	color:#000000;
	font-size: 14px;
	font-weight:normal;
	background-color: #FFFFFF;
	box-sizing: border-box;
	outline: none;
	border: 1px #DDDDDD solid;
	width:100%;
}

#einstellungen_passwort_mobile_mitte {
	margin: 0;
}
	
#einstellungen_anlegen_feld,
#einstellungen_anlegen_feld_lang {
	width:250px;
	padding: 5px;
	text-align:left;
	color:#000000;
	font-size: 14px;
	font-weight:normal;
	background-color: #FFFFFF;
	box-sizing: border-box;
	outline: none;
	border: 1px #DDDDDD solid;
}

#einstellungen_anlegen_feld_lang {
	width:430px;
}

#einstellungen_dropdown_vorwahl {
	width:100px;
	text-align:left;
	color:#000000;
	font-size: 14px;
	font-weight:normal;
	outline: none;
	border: 1px #DDDDDD solid;
}

/* Checkbox ------------------------------------------------------------------------------ */

.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 21px;
}

.switch input {
	display:none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555555;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #DD0000;
}

input:disabled + .slider {
	background-color: #DDDDDD;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 24px;
}

.slider.round:before {
	border-radius: 50%;
}

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 24px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #DD0000;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* Überschrift mit Icons ------------------------------------------------------------------------------ */

.tab_ue {
	width: 100%;
}

.tab_ue,
.tab_ue td,
.tab_ue th {
	border: 0px;
	border-collapse: collapse;
	margin: 0px ;
}

.tab_ue_text {
	font-size: 30px;
	font-weight: bold;
	text-decoration: underline;
	color: var(--text-color-h1);
	background-color: var(--background-color-article);
	padding: 5px 0px 5px 20%;
}

.tab_ue_text_ganz {
	font-size: 30px;
	font-weight: bold;
	text-decoration: underline;
	color: var(--text-color-h1);
	background-color: var(--background-color-article);
	padding: 5px 0px 5px 5px;
}

.tab_zuabsage_clear, .tab_zuabsage_sperre, .tab_ue_icon, .tab_ue_icon_mobile {
	width: 30px;
	background-color: var(--background-color-article);
	color: var(--text-color-link);
	font-size: 18px;
	text-align: center;
	cursor: pointer;
}

#myBtn:hover,
#myBtn2:hover,
#button-add-teilnehmer:hover,
.tab_ue_icon:hover,
.tab_ue_icon_mobile:hover {
	color: #DD0000;
}

.tab_icon_mobile, .tab_icon_mobile td, .tab_icon_mobile th {
	border: 0px solid #DDDDDD;
	border-collapse: collapse;
	margin: 0px ;
}


.details_datum{
	margin: 15px 5px 25px 20%;
	padding-left: 5px;
	width: 60%;
}


.details_datum p{
	margin: 0px 0px 3px 0px;
	padding: 0px;
	color: var(--text-color);
	text-align: left;
	font-size: 20px;
	font-weight: bold;
}

.leiter, .teilnehmer, .bekleidung, .bearbeitet {
	margin: 0px 5px 0px 20%;
	width: 35%;
	padding-left: 5px;
}

.leiter wa-avatar{
	--size:25px;
	padding: 0px;
	margin: 0px 5px 0px 5px;
}

.leiter p, .teilnehmer p, .bekleidung p, .details_info p, .info_teilnehmer p{
	margin: 10px 0px 10px 0px;
	padding: 0px;
	color: var(--text-color);
	text-align: left;
	font-size: 16px;
	display:inline-block;
}

.leiter wa-icon-button, .teilnehmer wa-icon-button, .bekleidung wa-icon-button, .details_info wa-icon-button, .info_teilnehmer wa-icon-button{
	margin: 3px 5px 0px 0px;
	float: right;
	color: var(--background-color-info-button);
}

.strich_kalender {
	margin: 0px 0px 0px 20%;
	width: 35%;
	--color: var(--border-article);
}

#details_img{
	max-height: 180px;
	padding: 0;
	margin: 20px 10% 0 0 ;
	float: right;
	box-sizing: border-box;
	border-radius: 20px;
}

.details_info {
	margin: 0px 5px 40px 20%;
	width: 60%;
	padding-left: 5px;
}

.buttongesamt {
	display: block;
	margin: 0px 0px 40px 20%;
	height: 30px;
	width: 60%;
}

.info_teilnehmer {
	margin: 8px 0px 0px 20%;
	width: 60%;
	padding-left: 5px;
}

.tab_zusage, .tab_vielleicht, .tab_absage, .tab_gesperrt {
	border: 1px solid var(--border-article);
	border-collapse: collapse;
	margin: 0px 0px 10px 20%;
	width: 60%;
	font-size: 16px;
}
.tab_zusage td, .tab_vielleicht td, .tab_absage td, .tab_gesperrt td{
	border: 1px solid var(--border-article);
	border-collapse: collapse;
}

.tab_zusage_name {
	background-color: #4CAF50;
	padding: 5px;
}

.tab_vielleicht_name {
	background-color: #FF8C00;
	padding: 5px;
}

.tab_absage_name {
	background-color: #f44336;
	padding: 5px;
}

.tab_gesperrt_name {
	background-color: #555555;
	padding: 5px;
}

.tab_zusage wa-avatar, .tab_vielleicht wa-avatar, .tab_absage wa-avatar, .tab_gesperrt wa-avatar{
	--size:25px;
	padding: 0px;
	margin: 0px 5px 0px 5px;
}

.tab_zuabsage_datum {
	width: 130px;
	background: var(--background-color-article);
	color: var(--text-color);
	font-size: 14px;
	text-align: center;
	padding-left: 5px;
}