@font-face {  font-display: swap;   font-family: 'Noto Sans Display';  font-style: normal;  font-weight: 400; src: url('noto-sans-display-v26-latin-regular.woff2') format('woff2'); }
@font-face {  font-display: swap;   font-family: 'Noto Sans Display'; font-style: normal;  font-weight: 900;  src: url('noto-sans-display-v26-latin-900.woff2') format('woff2'); }

* {box-sizing: border-box; font-family: 'Noto Sans Display'; outline: none;   -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none;  }
.noapp { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

html, body {margin: 0; padding: 0; background-color: #000; color: #fff; min-height: 100%; }
html.bright, body.bright {background-color: #fff; color: #000; }
section {	max-width: 800px;	margin: 0 auto;	background-color: #000;	color: #fff; position: relative;  min-height: 100%; 	}
.bright section {background-color: #fff; color: #000; }
header,footer,main {padding: 20px; }
main {
	padding-top: 150px;
	
}

p > a {color: #2483dc; text-decoration: none;}
p > a:hover {color: #2483dc; text-decoration: underline;}

td > a {color: #2483dc; text-decoration: none;}
td > a:hover {color: #2483dc; text-decoration: underline;}


header {	display: block;	z-index: 10000;	 position: fixed; background-color: #fff; height: 100px; top: 0; left: 0; right: 0; overflow: hidden; border-bottom: 1px solid #000;}
header > div.nav { display: block; text-align: center; margin-top: 45px;}
header > div.nav a { color: #000; text-decoration: none; font-weight: bold; font-size: 20px;}
header > div.nav u { color: #fff; text-decoration: none; font-weight: bold;  font-size: 20px;
	background-color: #000;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 15px;
}
.bright header > div.nav a { color: #000; text-decoration: none;}

header > div.nav a.activenav { color: #2483dc;}
nav {	position: absolute; 	top: 0;	width: 300px;	left: -1000px;	display: block;	background-color: #fff;	color: #fff;	transition: 600ms ease-in-out; opacity: 0;	padding: 20px;	padding-top: 90px;	border-bottom-right-radius: 20px; z-index: 20000; }
.bright nav {	background-color: #000;	color: #000;}
nav.expanded {	left: 0;	transition: 600ms ease-in-out;	opacity: 1;}
nav a {	font-weight: 900;	color: #000;	text-decoration: none;	display: block;	padding-top: 10px;	padding-bottom: 10px; }
.bright nav a {		color: #fff; }
nav a:hover {color: #2483dc;}
footer {display: block;}

h1 {font-family: 'Noto Sans Display'; font-weight: 900; font-size: 50px; letter-spacing: -0.8px; margin-top: 20px; margin-bottom: 20px; line-height: 100%;}
h2 {font-family: 'Noto Sans Display'; font-weight: 900; font-size: 30px; letter-spacing: -0.5px; margin-top: 30px;}
p {margin-top: 10px; margin-bottom: 10px;}
hr {margin-top: 50px; margin-bottom: 50px; background-color: rgba(0,0,0,0); border: 0; height: 0px;}
nav hr {margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #ccc; }
a {cursor: pointer;}

.error {color: #f00;}
.blue {color: #2483dc ! important;}
.bluebg {background-color: #2483dc ! important; color: #fff ! important;}

input[type="text"], input[type="password"]  { width: 100%; max-width: 300px; font-size: 18px; color: #fff; padding: 0px; border: 0; border-bottom: 2px solid #999; background: rgba(0,0,0,0); margin-top: 20px; margin-bottom: 20px; }
.bright input[type="text"], .bright  input[type="password"]  { color: #000; border-bottom: 2px solid #ccc;  }
button, .button { font-weight: 900; font-size: 18px; padding: 20px; background-color: #fff; border: 0; border-radius: 20px; letter-spacing: -0.5px; cursor: pointer; margin-top: 10px; margin-bottom: 10px; display: inline-block; text-decoration: none; color: #000; margin-right: 0px;}
.bright button, .bright .button { background-color: #000; color: #fff; }
button:hover, .button:hover { color: #000; background-color: #0f0;}
.redhover:hover { color: #000; background-color: #f00;}
input::placeholder { color: #999; }

p > a.button {text-decoration: none;}

div.usericon {display: block; width: 34px; height: 34px; padding: 5px; border-radius: 50%; text-align: center; cursor: pointer; background-color: #fff; color: #000; z-index: 25000; position: absolute; top: 20px; left: 20px; }
.bright div.usericon {background-color: #000; color: #fff}
div.closebutton {color: #000; padding: 10px; font-weight: 900; text-align: right; cursor: pointer;}
.bright div.closebutton {color: #fff;}
div.closebutton:hover {color: #2483dc;}


div.checkleiste {padding: 20px 2px;}
div.checkleiste input[type=radio],
div.checkleiste input[type=checkbox] {
    display: none;
}
div.checkleiste input[type=radio] + label,
div.checkleiste input[type=checkbox] + label {
    display: inline-block;
    margin: -2px;
    padding: 15px 30px;
    margin-bottom: 0;
    font-size: inherit;
    line-height: 20px;
    color: #000;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
	font-weight: 900;
	font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	 
}

.bright div.checkleiste input[type=radio] + label,
.bright div.checkleiste input[type=checkbox] + label {
	 background-image: linear-gradient(to bottom, #222, #000);
	 border: 1px solid #000;
	  color: #fff;
	  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
}

div.checkleiste input[type=radio]:checked + label,
div.checkleiste input[type=checkbox]:checked + label {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(to bottom, #090, #0c0);
	border-top-color: #050;
	border-bottom-color: #090;
	color: #fff;
	 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

div.checkleiste input[type=radio]:checked + label.green,
div.checkleiste input[type=checkbox]:checked + label.green {
	background-image: linear-gradient(to bottom, #090, #0c0);
	border-top-color: #050;
	border-bottom-color: #090;
}

div.checkleiste input[type=radio]:checked + label.red,
div.checkleiste input[type=checkbox]:checked + label.red {
	background-image: linear-gradient(to bottom, #900, #c00);
	border-top-color: #500;
	border-bottom-color: #900;
}

div.checkleiste input[type=radio]:checked + label.yellow,
div.checkleiste input[type=checkbox]:checked + label.yellow {
	background-image: linear-gradient(to bottom, #c29b0f, #ffc804);
	border-top-color: #c29b0f;
	border-bottom-color: #ffc804;
}

div.checkleiste input[type=radio]:checked + label.grey,
div.checkleiste input[type=checkbox]:checked + label.grey {
	background-image: linear-gradient(to bottom, #999, #ccc);
	border-top-color: #555;
	border-bottom-color: #999;
}

div.checkleiste_breit input[type=radio] + label,
div.checkleiste_breit input[type=checkbox] + label { 
	width: 100%;
	padding: 20px 30px;
	text-align: left;
}

.t_bos, .t_dev, .t_van {display: none;}
.tw_bos, .tw_dev, .tw_van {display: none;}
body.bos .t_bos {display: block;}
body.dev .t_dev {display: block;}
body.van .t_van {display: block;}
body.bos .tw_bos {display: inline;}
body.dev .tw_dev {display: inline;}
body.van .tw_van {display: inline;}

.disabled {background-color: #888 ! important;}
.disabled:hover {background-color: #888 ! important; color: #aaa}

.hidden {display: none;}

#codeForm input[type=text] {
	font-size: 30px;
	border: 1px solid #ccc;
	width: 30px;
	height: 40px;
	display: inline-block;
	margin-right: 5px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 900;
	
}


.devtipp {
	
	font-size: 18px;
  padding: 20px;
  background-color: #fff;
  border: 0;
  border-radius: 20px;
  letter-spacing: -0.5px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
  text-decoration: none;
  color: #000;
  margin-right: 20px;
	background-color: #e3a912 !important;
	
}

select, option {
	font-family: 'Noto Sans Display';
	font-size: 30px;
	padding: 5px 15px;
	margin-right: 10px;
	
	
}


.button_disabled {background-color: #888 ! important; color: #ccc ! important; cursor: initial;}
.button_disabled:hover{background-color: #888 ! important; color: #ccc ! important;}





		.dashbutton-quick-punkte {
			display: inline-block;
			background-color: #2483dc;
			color: #fff;
			padding: 1px 5px;
			border-radius: 5px;
			white-space: nowrap;	
margin-right: 5px;			
margin-bottom: 5px;
		}
		
		
		.dashbutton-quick-punkte-good { background-color: #060; }
		.dashbutton-quick-punkte-bad { background-color: #600; }
	
	.dashbutton-quick-punkte { transition: font-size 500ms;}
	

.dashbutton-quick-live { }
.usericon {position: relative;}
.alertbubble{
	margin-left: 5px;
	display: inline-block;
	border-radius: 5px;
	padding: 2px 10px; 
	font-size: 12px;
	color: #fff;
	background-color: #dc24c8;
	
}

.usericon .alertbubble {
	position: absolute;
	top: 5px;
	
}


select.profile_sel {width: 100%; margin-bottom: 10px;}


div.hr {position: relative; margin-top: 30px;}
div.hr .hrhead {display: block; position: absolute; margin: 0 auto; width: 100%; text-align: center; top: -10px; text-transform: uppercase; font-size: 13px; color: #000; text-shadow: 0 0 2px #fff, 0 0 2px #fff,  0 0 3px #fff,  0 0 4px #fff,  0 0 8px #fff; letter-spacing: 1px;}
.bright div.hr .hrhead {color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000,  0 0 3px #000,  0 0 4px #000,  0 0 8px #000}


.profitag {display: inline-block; text-transform: uppercase; font-size: 11px; padding: 2px 6px; background-color: #fff; border-radius: 6px; color: #000;}
.bright .profitag {background-color: #000; color: #fff;}

.toptag {display: inline-block; text-transform: uppercase; font-size: 11px; padding: 2px 6px; background-color: #0f0; border-radius: 6px; color: #000;}


.profilepic{
	width: 100%;
	border-radius: 8px;
}


main p {line-height: 180%;}

p.left {max-width: 450px;}

div.right {width: 100%; max-width: 500px; float: right;}














		main u {text-decoration: none; color: #2483dc; }
				h2 {margin-top: 20px;}
				.imgright {float: right; height: 350px; width: 350px; margin-right: -150px; margin-left: 0px; border-radius: 4px;}
				.imgleft {float: left; height: 350px; width: 350px; margin-left: -150px; margin-right: 0px; border-radius: 4px;}
				@media screen and (max-width: 1100px) {
					
					.imgright {margin: 0; width: 100%; height: initial; max-width: 350px; margin-top: 0px;  margin-right: 0px; margin-left: 0px; padding: 20px; }
					.imgleft { margin: 0 auto; width: 100%; height: initial; max-width: 350px; margin-top: 0px; text-align: center; padding: 20px; }
					p.left {max-width: 100%;}
					div.right {float: initial; max-width: 100%;}
				}
				
				@media screen and (max-width: 800px) {
					main {text-align: center;}
					.imgright {float: initial; margin: 0; width: 100%; height: initial; max-width: 350px; margin-top: 20px;  padding: 0px; }
					.imgleft {float: initial; margin: 0; width: 100%; height: initial; max-width: 350px; margin-top: 20px;  padding: 0px; }
					main > br {display: none;}


				}
				

header > section { background-color: #fff; position: relative; top: 0; left: 0; right: 0; min-height: initial; margin-top: -20px; padding-bottom: 20px;}

#logo {
	z-index: 999999;
	position: absolute;
	top: 0; left: 20px; 
	text-align: left;
	color: #2483dc;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	padding-top: 15px;
	
}
#login {
	z-index: 999999;
	position: absolute;
	top: 0; right: 20px; 
	text-align: right;
	color: #2483dc;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	padding-top: 15px;
}

#login a {
	color: #2483dc;
		letter-spacing: 2px;
	font-size: 12px;
	text-decoration: none;
}