@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: 600px;	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 {
	
	
}

p > a {color: #2483dc; text-decoration: none;}
li > a {color: #2483dc; text-decoration: none;}
p > a:hover {color: #2483dc; text-decoration: underline;}
li > 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: relative; }
header > div.nav { display: block; text-align: right; margin-top: -7px;}
header > div.nav a { color: #fff; text-decoration: none;}
.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: 40px; letter-spacing: -0.5px; margin-top: 20px; margin-bottom: 20px;}
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: 20px;}
.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;
}

div.checkleiste_schmal input[type=radio] + label,
div.checkleiste_schmal input[type=checkbox] + label {
	
	padding: 10px 10px;
	vertical-align: top;
width: 14.28%;
	height: 50px;
}
div.checkleiste_schmal {
	padding: 2px 2px;
	white-space: nowrap;
		
		width: 100%;
}
.toggler {cursor: pointer; padding-top: 30px; padding-bottom: 5px; font-weight: bold;}
.toggler span {display: inline-block; border-radius: 3px; padding: 2px 6px;}

.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;
	
}

#overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); z-index:999999; color: #2483dc;  opacity: 0; transition: opacity 500ms ease 100ms;}
.bright #overlay {background-color:rgba(255,255,255,0.8);  }
#overlay > div {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

#alertoverlay {position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); z-index:99999; color: #2483dc;  }
.bright #alertoverlay {background-color:rgba(255,255,255,0.8);  }



.tipp-trick {
	width: 100%;
	overflow: hidden;
	border-radius: 25px;
	
	position: relative;
	display: flex; /* optional für zentrierte Text-Ausrichtung */
    align-items: center; /* optional für zentrierte Text-Ausrichtung */
    justify-content: center; /* optional für zentrierte Text-Ausrichtung */	
	margin-top: 50px;
	margin-bottom: 50px;
}
.tipp-trick-text {
	margin: 15px;
	width: 100%;
	position: relative;
	z-index: 400;
	border-radius: 20px;
	padding: 20px;
	background-color: #000;
	color: #fff;
}
.rainbow-background {
	z-index: 300;
	width: 2000px;
    height: 2000px;
    border-radius: 50%;
	position: absolute;
    background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
    animation: rotatetipp 5s linear infinite;
	position: absolute;

    transform: translate(-50%, -50%);
}


.bright .tipp-trick-text {
	background-color: #fff;
	color: #000;
	
}


@keyframes rotatetipp {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.vbutton > div {height: auto ! important;}
.vbutton > div > div {height: auto ! important;}
.vbutton > div > div div {position: relative; display: block; top: 0; margin-top: 0 ! important;}


div.checkleiste input[type=checkbox] +label .labelaktiv {
	display: none;
}
div.checkleiste input[type=checkbox] +label .labelinaktiv {
	display: block;
}
div.checkleiste input[type=checkbox]:checked +label .labelaktiv {
	display: block;
}
div.checkleiste input[type=checkbox]:checked +label .labelinaktiv {
	display: none;
}
.labelaktiv, .labelinaktiv {
	width: 100%;
	
}