/*
Hellblau Kinderheim   : 192,229,247 bzw. #C0E2F2
Dunkelblau Kinderheim : 0,120,189   bzw. #0078BD
*/
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
	color: #0078BD;
}

body {
	font-family: arial,verdana;
	-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    /*-webkit-user-select: none;*/                  /* prevent copy paste, to allow, change 'none' to 'text' */
	color: #0078BD;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
	background-size: cover;
	background-color:#000000;

}
body.light-mode {
	background-color:#ffffff;
	background-image: url("../thisapp/img/hgmback01.jpg");
}
body.dark-mode {
	color: #0078BD;
	background-image: url("../thisapp/img/hgmback01_dark.jpg");
	background-color:#000000;

}
.streamlogobig{
	content: url(../thisapp/img/streamlogobig.png);
}
body.dark-mode .streamlogobig{
	content: url(../thisapp/img/streamlogobig_dark.png);
	color: #999;
}

.streamlogo02{
	content: url(../thisapp/img/streamlogo02.png);
}
body.dark-mode .streamlogo02{
	content: url(../thisapp/img/streamlogo02_dark.png);
}


.streamlogobig{
	display: inline-block;
	width:80%;
	max-width:1000px;

}

body.dark-mode .but_chatgroup{
	content: url(../img/but_chatgroup_dark.png);
}
body.dark-mode .but_chat{
	content: url(../img/but_chat_dark.png);
}

body.dark-mode .but_plus{
	content: url(../img/but_plus_dark.png);
}

#offlinebar{
	display:none;
	z-index:999999999999;
	position:fixed;
	text-align:center;
	width:33%;
	top:0px;
	margin: 0px;
	padding:12px;
	margin-left:30%;
	background-color:rgba(240,240,240,0.9);
	border-radius:0px 0px 10px 10px;
	border-color:rgba(0,120,189,0.3);
	border: 1px solid;
	border-top: 0px;
	font-size: 1.4em;
	opacity:0.5;
}
body.dark-mode #offlinebar{
	background-color:rgba(10,10,10,0.9);


}
#splashscreen{
	z-index:999999999998;
	background-color:rgba(255,255,255,0);
	position:fixed;
	width:100%; 
	height:25px;
    justify-content: center; 
    align-items: center;
	left:0px;
	bottom:30px;
	padding: 4px;
	text-align: center;
}
.but_chatgroup{
	position:absolute;
	left:4px;
	width:48px;
	vertical-align:middle;
}
.but_chat{
	position:absolute;
	left:4px;
	width:48px;
	vertical-align:middle;
}

.but_plus{
	position:fixed;
	bottom:20px;
	right:20px;
	width:48px;
	height:48px;
	opacity:0.9
}



.streamlogo02{
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}

.loginback{
	background-color:rgba(255,255,255,0.8);
}
body.dark-mode .loginback{
	background-color:rgba(30,30,30,0.8);
}

.seite{
	display:none;
}
.checkboxdivouter{
	border-radius: 4px;
	border: 0px solid;
	border-bottom: 1px solid;
	background-color: rgba(240,242,245,0.4);
	border-color: rgba(0,0,0,0.1);
	margin-bottom:4px;
}
body.dark-mode .checkboxdivouter{
	background-color: rgba(0,0,0,0.2);
	border-color: rgba(100,100,100,100.1);
}
.checkboxtextdiv{
	text-align: left;
	display:inline-block;
	font-size:1.1em;
	padding:15px;
	width:60%;
	min-width:120px;
	max-width:800px;
}
.checkboxdiv{
	display:inline-block;
	font-size:1.1em;
	padding:15px;
	width:20%;
	min-width:20px;
	max-width:200px;
}
.jaycheckbox{
	width:	32px;
	height: 32px;
}

.maniacsonly{
	display:none;
}
.appversion{
	font-size:0.8em;
	color:rgba(0,0,0,0.5);
	text-align:right;
}
body.dark-mode .appversion{
	color:rgba(100,100,100,0.8);
}
.browseronly{
	display:none;
}

#uploadbereich{
	display:none;
	z-index: 99996;
	position: fixed;
	width:100%;
	height:64px;
	left:0px;
	bottom:50px;
	background-color: rgba(255,255,255,0.9);
	padding: 0px;
	margin:0px;
	-webkit-box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	-moz-box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	border-bottom: 1px solid;
	border-top: 1px solid;
	border-color:rgba(0,120,189,0.5);

}
body.dark-mode #uploadbereich{
	background-color: rgba(0,0,0,0.9);
	border-color:rgba(0,120,189,0.3);
}
.uploaditem{
	font-size:0.9em;
	color:rgba(0,120,189,0.35);
	width: 25%;
	display:inline-block;
	border: 0px solid;
	text-align: center;
	vertical-align:middle;
	padding: 0px;
	margin:0px;
	height:62px;
	position:relative;
	top: 0px;
}
#videocontainer{
	border:0px solid;
	left:0px;
	top:59px;
	border-color:rgba(0,120,189,0.3);
	z-index:99994;
	min-width:200px;
	min-height:100px;

}
#example-video{
width:50%;
height:50%

}
.song {clear:left; margin:1 0;}
.song input {margin: 0 1em .5em 0;float:left;padding:0;}
.song p {margin:0 0 1.5em 0;}
.song:after {
	content : ".";
	display : block;
	height : 0;
	clear : left;
	visibility : hidden;
}
.vorschaubild
{
	display: flex; 
    justify-content: center; 
    align-items: center;
}
.newreg
{
	display:none;
}
#answer
{
	width:230px;
	max-height:50%;
	padding:15px;
	border: 2px solid rgba(0,120,189,0.25);
	border-radius:15px;
	text-align: left;
	background-color:#ffffff;
	vertical-align: bottom;
	position:absolute;
	bottom:0px;
	left:2px;
}
body.dark-mode #answer{
	background-color:#000000;
}

.lightonly{
	display: unset;	
}
body.dark-mode .lightonly{
	display:none;
}
.darkonly{
	display:none;
}
body.dark-mode .darkonly{
	display: unset;
}

#outanswer{
	position:absolute;
	left:0px;
	top:0px;
	width:300px;
	bottom: 75px;
	z-index:99995;
	display:none;
	text-align:center;
	vertical-align: bottom;
}
.context{
	position:absolute;
	border:1px solid;
	border-color:rgba(0,60,120,0.1);
	z-index:199951;
	background-color:rgba(255,255,255,0.9);

	-webkit-box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	-moz-box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	padding:0px 10px 0px 0px;
}
.ctxitem
{
		padding:5px 0px 5px 10px;
		font-size:1.2em;
		opacity:0.9;
		border-bottom: 1px solid;
		border-color:rgba(0,60,120,0.2);
		width:100%;
		cursor:pointer;
}
.ctxitem:hover{
	background-color:rgba(0,60,120,0.05);
}
#outlogindiv
{
	width:100%;
	height:100%;

}
.rdio{
display:none;
}
.nulink:link {
  text-decoration: none;
}

.nulink:visited {
  text-decoration: none;
}

.nulink:hover {
  text-decoration: none;
}

.nulink:active {
  text-decoration: none;
}

.sprechblase2 .zitat{
	opacity:0.8;
	padding:5px;
	border: 1px solid rgba(0,120,189,0.2);
	margin-bottom: 10px;
	background-color:rgba(255,255,255,0.5);
	border-radius:5px;
}
body.dark-mode .sprechblase2 .zitat{
	background-color:rgba(55,55,55,0.2);
}

.sprechblase1 .zitat{
	opacity:0.8;
	padding:5px;
	border: 1px solid rgba(0,120,189,0.2);
	margin-bottom: 10px;
	background-color:rgba(0,120,189,0.1);
	border-radius:5px;
}
body.dark-mode .sprechblase1 .zitat{
	background-color:rgba(0,120,189,0.1);
}

.antclose{
	position:relative;
	right:-32px;
	top:-28px;
	width: 30px;
	height:30px;
  display:inline-block;
  z-index: 100;
  cursor: pointer;
  border: 2px solid;
  border-radius: 130px;
  border-color:rgba(0,120,189,0);
  transition: all 0.15s;
  transition-timing-function: ease;
}
.antclose:hover{
		border-color:rgba(0,120,189,1);
  width: 32px;
  height: 32px;

}

.reply{
	position:relative;
	right:-28px;
	top:15px;
	width: 24px;
	height:24px;
  display:inline-block;
  z-index: 100;
  cursor: pointer;
  border: 2px solid;
  border-radius: 130px;
  border-color:rgba(0,120,189,0);
  transition: all 0.5s;
  transition-timing-function: ease;
  opacity:.3;
  }
.reply:hover{
		border-color:rgba(0,120,189,1);
  width: 27px;
  height: 27px;
  opacity:1;

}



.zentriert {
width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#dclosebutton{
	position:absolute;
	top: 4%;
	right:4%;
	width:32px;
	height:32px;
}
#dialog{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	display: flex; 
    justify-content: center; 
    align-items: center;	
	z-index:99999;
	background-color:rgba(255,255,255,0.97);
}

body.dark-mode #dialog{
	background-color:rgba(0,0,0,0.97);
}

#progress-wrp {
  display:none;
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
  z-index:100001;
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: rgba(0,120,189,0.8);
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

.hover-image{
  display:inline-block;
  width: 32px;
  height: 32px;
  z-index: 100;
  cursor: pointer;
  border: 2px solid;
  border-radius: 130px;
  border-color:rgba(0,120,189,0);
  transition: all 0.5s;
  transition-timing-function: ease;
}
.hover-image:hover{
		border-color:rgba(0,120,189,1);

}

.hovertext
{
  transition: all 0.15s;
  transition-timing-function: ease;
  font-size:1.0em;
  cursor: pointer;
  color:rgba(0,120,189,.7);

}
.hovertext:hover
{
  font-size:1.05em;
  color:rgba(0,120,189,1);
}
.icon-image{
  display:inline-block;
  width: 30px;
  height: 30px;
  z-index: 100;
  cursor: pointer;
  border: 2px solid;
  border-radius: 130px;
  border-color:rgba(0,120,189,0);
  transition: all 0.5s;
  transition-timing-function: ease;
}

.menueicon
{
  display:inline-block;
  width: 30px;
  height: 30px;
  z-index: 100;
  cursor: pointer;
  border: 2px solid;
  border-radius: 130px;
  border-color:rgba(0,120,189,0);
  transition: all 0.5s;
  vertical-align: middle;
}
.menuentry{
		display: inline-block;
		vertical-align: middle;
		font-size:1.2em;
		padding-left:5px;
		opacity:0.8;
}
.menout{
	height:35px;
	top:4px;
	position:relative;
	cursor: pointer;
}

.menout:hover img{
	border-color:rgba(0,120,189,1);
}
.menout:hover .menuentry{
	opacity:1;
	font-size:1.25em;
}

.menout1:hover img{
	border-color:rgba(0,120,189,1);
}
.menout1:hover .menuentry{
	opacity:1;
	font-size:1.25em;
}


.menout1{
	height:30px;
	padding-left: 20px;
	cursor: pointer;
}
.zeit{
	position:absolute;
	right:4px;
	bottom:1px;
	line-break :none;
	font-size:0.7em;
	color: #888888;
	white-space: nowrap;
}
.inview{
	height:3px;
}
.pretext{
	font-size:0.8em;
	color: #888888;
}

.zeit2{
	height:0px;
	position:realtive;
	top:10px;
	font-size:0.6em;
	color: #aaaaaa;
	text-align: right;
}
.chatpartner{
	vertical-align:top;
	font-weight:bold;
	font-size:0.9em;
	opacity:0.4;
	opacity: 0.75;
	text-shadow: 0px 0px 0px rgba(255,255,255,0), 0.5px 0.5px 0.5px rgba(0,0,0,.2);
}
body.dark-mode .chatpartner{
	font-weight: normal;
    filter: invert(100%);
}
#jaymoji{
    position: fixed;
    left: 10px;
    bottom: 10px;
	opacity:0.6;
}
.jmenubutton
{
	display:inline-block;
	padding:5px;
	border: 1px solid;
	background-color:rgba(0,120,189,0.2);
	border-color:rgba(0,120,189,0.8);
	font-size: 1.2em;
	color:#ffffff;
	font-weight:bold;
	cursor: pointer;

}
.jmenubutton:hover
{
	background-color:rgba(0,120,189,0.5);
}
#chatpartnerdisplay{
	position: fixed;
	top:1px;
	width:100%;
	text-align:center;
}

#chatpartnerdisplayinner{
	text-align: center;
	display: inline-block;
	border-radius : 50px;
	border: 2px solid;
	border-color: rgba(0,120,189,0);
	background-color: rgba(240,242,245,1);
	margin-top: 0px;
	padding: 16px 12px 0px 12px;
	font-size:0.9em;
	height:36px;
	vertical-align:middle;
	min-width: 350px;
}
body.dark-mode #chatpartnerdisplayinner{
	border-color: rgba(0,120,189,0.45);
	background-color: rgba(0,0,0,1);
}
.datumbetween{
	border-radius : 50px;
	border: 2px solid;
	border-color: rgba(0,120,189,0.25);
	background-color: rgba(240,242,245,0.7);
	margin-top: 5px;
	margin-bottom: 5px;
	transition: all 0.5s;
	padding: 3px 8px 3px 8px;
	font-size:0.9em;
	opacity:0.7;
}
body.dark-mode .datumbetween{
	background-color: rgba(0,0,0,0.7);
}

#menueleiste
{
	position:fixed;
	left:0px;
	top:0px;
	height: 48px;
	padding:5px;
	background-color:rgba(255,255,255,9.5);
	width:100%;
	z-index:99998;
	-webkit-box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	-moz-box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.19);
	border-bottom: 1px solid;
	border-color:rgba(0,120,189,0.5);
}
body.dark-mode #menueleiste
{
	background-color:rgba(0,0,0,9.5);
	border-color:rgba(0,120,189,0.5);
}


::-webkit-scrollbar{
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb{
background: #444444;
border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover{
background: ##A1A1A1;
}
::-webkit-scrollbar-track{
background: rgba(0,0,0,0.2);
border: 0.3px solid rgba(200,200,200,0.3);
border-radius: 15px;
box-shadow: inset 0px 0px 0px 0px #F0F0F0;
}

.body.dark-mode ::-webkit-scrollbar-thumb{
background: #B3AFB3;
}


#hauptmenue
{
	display:none;
	position:fixed;
	top:59px;
	#bottom:0px;
	max-height: calc(100% - 100px);
    width: 15%;
	right: 0px;
    max-width: 450px;
	padding:5px;
	background-color:rgba(255,255,255,0.9);
	min-width:300px;
	z-index:99999;
	#transition: all 0.25s;
	border-left: 1px solid;
	border-bottom: 1px solid;
	border-color:rgba(0,120,189,0.5);
	#transition-timing-function: ease;
	overflow-y: auto;
}
body.dark-mode #hauptmenue{
	background-color:rgba(0,0,0,0.9);
}
#chat{
	background-color:rgba(0,120,120,0.1);
	position:absolute;
	right:0px;
	left:unset;
	z-index:99950;
	transition: all 0.5s;
	border-radius:1.2em;
	border: 1px solid;
	border-color: rgba(0,0,0,0.1);

}


body.dark-mode #chat{
	#background-image: url("../img/chatback3.png");
}


.jaytabon{
	border: 1px solid;
	border-radius: 4px 4px 0px 0px;
	border-color: rgba(0,0,0,0.5);
	padding:15px;
	width: calc(50% - 32px);
	font-size:1.3em;
	display: inline-block;
	margin:0px;
	border-bottom:0px;
	position: relative;
	top: 1px;
}
.jaytaboff{
	cursor: pointer;
	color: rgba(0,0,0,0.2);
	border: 1px solid;
	border-radius: 4px 4px 0px 0px;
	border-color: rgba(0,0,0,0.1);
	padding:15px;
	width: calc(50% - 32px);
	font-size:1.3em;
	display: inline-block;
	margin:0px;
	border-bottom: 1px solid #888888;

}
body.dark-mode .jaytaboff{
color: rgba(100,140,190,0.25);
}
.jaytab{
	border: 1px solid;
	border-top: 0px;
	border-radius: 0px 0px 4px 4px;
	border-color: rgba(0,0,0,0.5);
	padding-top:15px;
	margin:0px;
}

#waitback{
	background-color:#fff;
	position:fixed;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	width:100%;
	height:100%;
	z-index:9999999999;
}
body.dark-mode #waitback{
background-color: #000;
}

#chatfenster{
    font-family: helvetica;
	font-size:1em;
	top: 59px;
	left:0px;
	right:0px;
	bottom:50px;
	position: absolute;
	overflow-y: auto;
}
.logininput{
color: rgba(0,0,75,0.7);
font-size:1.1em;
padding:15px;
border-radius: 4px;
border: 0px solid;
border-bottom: 1px solid;
background-color: rgba(240,242,245,0.4);
border-color: rgba(0,0,0,0.1);
width:80%;
min-width:120px;
max-width:800px;
}
body.dark-mode .logininput{
background-color: rgba(0,0,0,0.4);
color: rgba(200,200,200,0.7);
}

body.dark-mode ::placeholder{
color: rgba(100,100,100,0.6);
}

.nb{
	background-color:#ffffff;
}

body.dark-mode .nb{
	background-color:#000000;
}

.formbutton{
font-size:1.1em;
padding:15px;
border-radius: 4px;
border: 1px solid;
background-color: rgba(240,242,245,1);
border-color: rgba(0,0,0,0.1);
width:80%;
min-width:120px;
max-width:800px;
}
body.dark-mode .formbutton{
background-color: rgba(4,4,4,0.4);
border-color: rgba(80,80,80,0.4);
}
.errordiv{
color:#aa0000;
font-size:1.1em;
font-weight: bold;
padding:15px;
width:80%;
min-width:120px;
max-width:800px;
opacity: 0.8;
}
.chatsmooth{
	#-webkit-transition: all 0.25s;
	#-moz-transition: all 0.25s;
	#transition: all 0.25s;
	#scroll-behavior: auto;
}

.sl{
	height:0px;
	width:100%;
	text-align:right;
}
.si{
	font-size:1.6em;
	height:32px;
	text-align:center;
}
.eyelisttop{
	position : fixed;
	right:10px;
	top:60px;
	padding:7px;
	background-color: rgba(240,240,240,0.9);
	border: 2px solid;
	border-color: rgba(255,255,255,0.9);
	border-radius: 4px;
	cursor:pointer;
}

body.dark-mode .eyelisttop{
	border-color: rgba(0,120,189,0.45);
	background-color: rgba(0,0,0,0.7);
}

.eyelistbottom
{
	position:fixed;
	bottom:50px;
	top:initial;
	right:initial;
	left:3px;
	opacity:0.85;
	cursor:pointer;
	padding:7px;
	padding-bottom:15px;
	background-color: rgba(240,240,240,0.9);
	border: 2px solid;
	border-color: rgba(255,255,255,0.9);
	border-radius: 4px;
}
body.dark-mode .eyelistbottom{
	border-color: rgba(0,120,189,0.45);
	background-color: rgba(0,0,0,0.7);
}
.inaktivkat{
	border: 1px solid;
	border-radius: 5px 5px 0px 0px;
	opacity: 0.35;
	border-color: rgba(0,120,189,0.45);
	background-color:rgba(255,255,255,1);
}
.aktivkat{
	border: 1px solid;
	border-bottom: 0px solid;
	border-radius: 5px 5px 0px 0px;
	opacity: 0.85;
	border-color: rgba(0,120,189,0.45);
	background-color:rgba(255,255,255,1);
}
body.dark-mode .inaktivkat{
	background-color:rgba(0,0,0,1);
}
body.dark-mode .aktivkat{
	background-color:rgba(0,0,0,1);
}
#emojicats{
	display:inline-block;
	position:fixed;
	bottom: 268px;
	background-color:rgba(255,255,255,0.95);
}
body.dark-mode #emojicats{
	background-color:rgba(0,0,0,0.95);
}
#nachrichtenfenster{
    font-family: helvetica;
	font-size:1em;
	height:50px;
	position:fixed;
	bottom:0px;
	left:0px;
	right:0px;
	#-webkit-transition: all 0.5s;
	#-moz-transition: all 0.5s;
	#transition: all 0.5s;
	z-index: 99996;
	#scroll-behavior: smooth;
}
.emojihead{
	display: inline-block;
	cursor:pointer;
	padding:5px;
}
#emojibutton{
	position: fixed;
	display:inline-block;
	left:7px;
	bottom:15px;
	cursor:pointer;
}
#emojifenster{
	width: calc(100% - 13px);
	text-align: justify;
	justify-content: space-between;
	padding: 2px;
	position: fixed;
	height:210px;
	background-color: rgba(255,255,255,0.85);
	bottom: 54px;
	border: 1px solid;
	border-radius:5px;
	border-color:rgba(0,120,189,0.2);
	overflow-y: auto;
}
body.dark-mode #emojifenster{
	background-color: rgba(0,0,0,0.85);
}

.emoji{
	cursor:pointer;
	display:inline-block;
	font-size:28px;
	transition: all 0.1s;
	text-align:center;
	vertical-align:middle;
	width:38px;
	height: 38px;
	}
.emoji:hover{
	font-size:30px;
	}
#nachricht{
	position: absolute;
	left:0px;
	right: 74px;
	bottom:1px;
	padding: 2px 10px 2px 35px;
	border-radius : 10px;
	border: 2px solid;
	border-color: rgba(0,120,189,0.25);
	background-color: rgba(255,255,255,1);
	float:left;
	margin-top: 5px;
	height:90%;
	transition: all 0.5s;
}
body.dark-mode #nachricht{
	background-color: rgba(0,0,0,1);
	border-color: rgba(0,120,189,0.45);
}
#nachricht textarea{
	font-size:1.2em;
}
#chatnachricht{
	width:100%;
	max-height:100%;
	background-color: rgba(255,255,255,0);
	border: 0px solid;
	border-color: rgba(255,255,255,0);
	overflow: auto;
	outline: none;
	resize: none;
    font-family: helvetica;
	transition: all 0.5s;
}
body.dark-mode #chatnachricht{
	background-color: rgba(0,0,0,0);
}
#abschicken{
	position:absolute;
	vertical-align:middle;
	right:5px;
	top:5px;
}

#anhang{
	position:absolute;
	/*width:40px;*/
	vertical-align:middle;
	right:40px;
	top:5px;
}
.leftchat{
	position:static;
	left:5px;
	max-width:75%;
	float:left;
	min-width: 30%;
}
.rightchat{
	position:static;
	right:0px;
	max-width:75%;
	margin-right: 5px;
	float:right;
	min-width: 30%;
}
.clear{
	clear:both;
}

.sprechblase1 {
position: relative;
padding: 0.5rem;
border: 1px solid rgba(0,120,189,0.75);
border-radius: 10px;
background: #ffffff;
max-width:90%;
left: 5px;
margin-top: 20px;
padding-bottom: 13px;
padding-top: 0px;
min-width:100px;
color: #000000;
white-space: pre-wrap;
word-wrap:break-word;

}
body.dark-mode .sprechblase1 {
background: #1a1a1a;
color:#aaaaaa;
border: 1px solid rgba(0,120,189,0.35);
}

.sprechblase1:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
top: 100%;
border: 10px solid;
border-color: rgba(0,120,189,0.75) transparent transparent rgba(0,120,189,0.75);
}
body.dark-mode .sprechblase1:before {
border-color: rgba(0,120,189,0.35) transparent transparent rgba(0,120,189,0.35);
}
.sprechblase1:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 31px;
top: 100%;
border: 9px solid;
border-color: #ffffff transparent transparent #ffffff;
}
body.dark-mode .sprechblase1:after {
border-color: #1a1a1a transparent transparent #1a1a1a;
}

.sprechblase2 {
position: relative;
padding: 0.5rem;
border: 1px solid rgba(0,120,189,0.55);
border-radius: 10px;
background: rgba(212,249,255,1);
right: 5px;
margin-left: auto;
max-width:90%;
margin-top: 20px;
padding-bottom: 13px;
min-width:100px;
color: #000000;
white-space: pre-wrap;
word-wrap:break-word;
}
body.dark-mode .sprechblase2 {
background: #000000;
color:#888888;
}

.sprechblase2:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 30px;
top: 100%;
border: 10px solid;
border-color: rgba(0,120,189,0.55) rgba(0,120,189,0.55) transparent transparent ;}

.sprechblase2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 31px;
top: 100%;
border: 9px solid;
border-color: rgba(212,249,255,1) rgba(212,249,255,1) transparent transparent ;}

body.dark-mode .sprechblase2:after {
border-color: #000000 #000000 transparent transparent ;}
}
.exitbutton{
	z-index:999999999;
	position:absolute;
	right:10px;
	top:10px;
	opacity:0.8;
	cursor:pointer;
	width:38px;
	text-align:right;
}

#jaysidebar{
	border : solid 2px;
	border-color: rgba(0,0,0,1);
	position:absolute;
	width:400px;
	height:100%;
	border-radius:5px;
	background-color:rgba(230,230,255,0.95);
	z-index:9999999;
	top:0px;
	left: -390px;
	transition: all 0.5s ease;
	display:none;
}
	#streamlogo
	{
		height:32px;
	}
#menueleiste{
	text-align:center;
}

.eyecounttop{
	position:fixed;
	top:56px;
	right:15px;
	cursor:pointer;
	z-index:9999999;
}
.eyecountbottom{
	position:fixed;
	bottom:50px;
	top:initial;
	left:10px;
	opacity:0.85;
	cursor:pointer;
	z-index:9999999;
}


.chatfull{
		right:0px;
		width:100%;
		max-width:100%;
		min-width:100%;
}

@media only screen and (min-width: 681px)
{
	.chatnormal{
	min-width:300px;
	width:35%;
	max-width:680px;

		/*width:35%;
		max-width:450px;*/
		top:0px;
	}
	#chatfenster{
		top: 59px;
	}
	#videocontainer
	{
		/*width: 55%;
		
		height:55%;*/
		width:100%;
	}
	#overover{
		width:100%;
	}

}

@media only screen and (max-width: 680px)
{
	.chatnormal{
		/*max-height:80%;*/
		bottom:0px;
		/*top:25%;*/
		right:0px;
		width:100%;
		max-width:100%;
	}
	#chatfenster{
		/*height:100%;*/
		position: fixed;
	}
	
	#videocontainer
	{
		width: 100%;
		
		/*height:20%;*/
	}
	#overover{
		width:100%;
	}
	#streamlogo
	{
		#height:46px;
	}
	#menueleiste{
		text-align:left;
	}
	#chatpartnerdisplay{
		text-align: left;
	}	
	#chatpartnerdisplayinner{
	text-align: left;
	display: inline-block;
	border: 0px solid;
	margin-top: 0px;
	padding: 14px 0px 2px 38px;
	font-size:0.8em;
	height:36px;
}
	
	
}


#log-output{
    background-color: lightgrey;
    white-space: normal;
    word-wrap: break-word;
}

#log-output > span{
    line-height: 20px;
    padding: 4px;
}

button {
    margin: 8px;
    padding: 4px 8px;
}
.teltable{
	border-spacing: 0px;
	border-collapse: collapse;
	width:100%;
}
.mailtable{
	border-spacing: 0px;
	border-collapse: collapse;
	width:100%;
	padding:2px;
}
.magruppe{
	font-size: 1.0em;
	color: rgba(0,120,189,0.8);
	padding:3px;
	margin:2px;
	border: 1px solid;
	border-color: rgba(0,120,189,0.2);
	background-color: rgba(192,229,247,0.2);
	text-align: center;
	border-radius: 4px;
}


.jayinput01
{
	border-left : 0px solid;
	border-right: 0px solid;
	border-bottom: 1px solid;
	border-top: 0px solid;
	border-color: #999999;
	font-size: 1.2em;
	background: rgba(255,255,255,0.1);
	padding:7px;
	margin: 6px;
}

.jayinput02
{
	border : 1px solid;
	border-color: #bbbbbb;
	border-radius: 4px;
	padding:5px;
	font-size: 1.2em;
	color: #555555;
	margin : 4px;
}
.jaybutton01 {
   background: #3D94F6;
   background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   color: #FFFFFF;
   font-family: Arial;
   font-size: 17px;
   font-weight: 400;
   padding: 8px;
   box-shadow: 1px 1px 4px 0px #000000;
   -webkit-box-shadow: 1px 1px 4px 0px #000000;
   -moz-box-shadow: 1px 1px 4px 0px #000000;
   text-shadow: 1px 1px 20px #000000;
   border: solid #337FED 1px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
}

.jaybutton01:hover {
   border: solid #337FED 1px;
   background: #1E62D0;
   background-image: -webkit-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -moz-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -ms-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -o-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   text-decoration: none;
}

.bigbox{
	width: 24px;
	height:24px;
}

.log{
    color: black;
}
.info{
    color: blue;
}
.warn{
    color: orange;
}
.error{
    color: red;
}

::placeholder {
    color: #ccc;
}

.field{
    margin: 16px;
}

body:not(.android) .android-only,
body:not(.ios) .ios-only,
body:not(.autoinit-enabled) .autoinit-disable,
body:not(.autoinit-disabled) .autoinit-enable,
#useVerificationCode{
    display: none;
}

.appinput01:focus {
	outline: none;
}
button:focus {
	outline: none;
}
checkbox:focus {
	outline: none;
}
.vok{
	display:none;
}
.appinput01 {
	width:98%;
	padding: 5px;
	border: 2px solid;
	border-color: #dddddd;
	border-radius: 2px;
	font-size: 1.2em;
	border-top : 0px;
	border-left : 0px;
	border-right : 0px;
	background-color: rgba(255,255,255,0);
}
.infodiv{
	color:#ffffff;
	font-weight:bold;
	padding:10px;
	border-radius: 10px;
	background-color:rgba(130,178,212,0.95);
}

.infodiv2{
	background-color: #82B2D4;
}

.hoverpic:hover {
	z-index: 10;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    transition: all .1s;
	-webkit-transform: rotate(360deg) scale(1.6);
	-o-transform: rotate(360deg) scale(1.6);
	-moz-transform: rotate(360deg) scale(1.6);
	-ms-transform: rotate(360deg) scale(1.6);
	transform: rotate(360deg) scale(1.6);
}
.hoverpic {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	-webkit-transform: rotate(0deg) scale(1);
	-o-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	cursor: pointer;
}

.details-animated {
  transition: height 1s ease;
}
.details-animated:not([open]) { height: 1.25em; }
.details-animated[open] { height: 3.75em; }
.bigtext
{
	font-weight: bold;
	font-size:1.1em;
	color: #0078BD;
}
.normaltext
{
	font-size:1.0em;
	color: #0078BD;
}
.smalltext
{
	font-size:0.9em;
	color: #0078BD;
}
.mailtable td
{
	padding: 5px;
	cursor:pointer;
}
#version{
	font-size:0.6em;
	color: rgba(0,120,189,0.5);
	padding: 0px;
}

.telbig{
	font-size:1.3em;
	font-weight: normal;
	color: #0078BD;
	word-break: break-all;
	text-align: left;
	cursor:pointer;
	padding:16px 8px 16px 64px;
	border-top:1px solid;
	border-color:rgba(0,0,0,0.05);
}

.telbig:hover{
	background-color:rgba(180,180,180,0.1);
}


body.dark-mode .telbig{
	border-top:1px solid;
	border-color:rgba(255,255,255,0.1);
}
.telnormal{
	font-size:1.2em;
	color: rgba(0,120,189,0.7);
	padding:4px;
	 word-break: break-all;
}

.telsmall{
	font-size:1.0em;
	color: rgba(0,120,189,0.5);
	padding: 0px 4px 0px 4px;
}
.telmedium{
	font-size:1.1em;
	color: rgba(0,120,189,0.6); 
	padding: 3px 4px 3px 4px;
}
.toggler{
	display:none;
}
.mlevel1{
	padding:5px;
	margin-top:4px;
	margin-left:10px;
	font-size:1.0em;
	color: rgba(0,120,189,0.5);
	border-bottom: 1px solid;
	border-color: rgba(0,0,0,0.1);
}
.mlevel2{
	padding:5px;
	margin-left:18px;
	font-size:1.2em;
	color: rgba(0,120,189,1.0);
}
.mlevel3{
	padding:4px;
	margin-left:28px;
	font-size:1.0em;
	color: rgba(0,120,189,0.75);
}
.lftmenue{
	background-color: rgba(255,255,255,0.98);
	min-height:100%;
}
.maindiv{
	background-color: #ffffff;
	position: absolute;
	top:0px;
	padding-top: 55px;
	bottom:0px;
	left: 0px;
	right: 0px;
	overflow-y: auto;
	max-height:100%;
}
#hauptfenster{
	height:100%;
	position: absolute;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


.startbutton{
display:inline-block;
padding:0.4em 1.4em;
margin:0 0.3em 0.3em 0;
border-radius:0.2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#0078BD;
background-color:#C0E2F2;
border: 1px solid;
border-color: #0078BD;
/*
box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
*/
text-align:center;
position:relative;


}
.startbutton:active{
box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}

/*
Hellblau Kinderheim   : 192,229,247 bzw. #C0E2F2
Dunkelblau Kinderheim : 0,120,189   bzw. #0078BD
*/

.receiver{
display:inline-block;
padding:0.1em 0.1em;
margin:0 0.3em 0.3em 0;
border-radius:0.1em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#0078BD;
background-color:rgba(192,229,247,0.2);
border: 1px solid;
border-color: rgba(0,120,189,0.2);
/*
box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
*/
text-align:center;
position:relative;
align-items: center; /* Vertikale Zentrierung */
z-index:20;
}


.mailhead{
padding:0.1em 0.1em;
margin:0 0.3em 0.3em 0;
border-radius:0.1em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#0078BD;
background-color:rgba(192,229,247,0.2);
border: 1px solid;
border-color: rgba(0,120,189,0.2);
/*
box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
*/
text-align:center;
align-items: center; /* Vertikale Zentrierung */
}

.mailbetween{
padding:4px;
border-radius:0.1em;
color:#FFFFFF;
background-color:rgba(0,120,189,0.35);
border: 1px solid;
border-color: rgba(192,229,247,1);
text-shadow: none;
font-weight:bold;
}


.actiondiv{
	z-index:50;
	text-align:right;
	position:fixed;
	bottom:15px;
	right:15px;
	opacity: 0.95;
    font-size: 0.85em;
    font-family: sans-serif;
    color: rgba(250,252,255,1);
    text-shadow___:  1px  1px 1px rgba(0,120,189,0.5),
                  1px -1px 1px rgba(0,120,189,0.5),
                 -1px  1px 1px rgba(0,120,189,0.5),
                 -1px -1px 1px rgba(0,120,189,0.5);
}
.actiontext{
	color:rgba(0,120,189,0.9);
}
.actionbottom{
	position:fixed;
	bottom:0px;
	left:0px;
	height:45px;
	width:100%;
	background-color:rgba(250,252,255,0.85);
	border-top:2px solid;
	border-color:rgba(0,20,90,0.2);
	display: inline-block;
	white-space: nowrap;
}
.actionbutton
{
	margin : 1px;
	margin-top: 3px;
	font-size:0.8em;
	background-color:#bbc2cf;
	color:#ffffff;
	padding: 0.5em 0.7em 0.5em 0.7em;
	border: 0.1em solid;
	border-color: #e0e7ef;
	text-transform: uppercase;
	-webkit-box-shadow: 0.1em 0.1em 0.2em 0.1em rgba(0,0,0,0.1);
	-moz-box-shadow: 0.1em 0.1em 0.2em 0.1em rgba(0,0,0,0.1);
	box-shadow: 0.1em 0.1em 0.2em 0.1em rgba(0,0,0,0.1);
}
.popup{
	display:none;
	padding:4px;
	background-color:rgba(240,247,255,0.95);
	border-radius:14px;
	border: 2px solid;
	border-color:rgba(0,120,189,0.2);
}
.popupbutton{
	width:42px;vertical-align: middle;margin:4px;
}
.wrapper{
 display: none;
 align-items: center; /* Vertikale Zentrierung */
 justify-content: center; /* Horizontale Zentrierung */
 height:100%;
 width:100%;
 position:fixed;
 top:0px;
 left:0px;
 z-index:999;
}
#qaoverlayinner{
	max-width:400px;
	min-width: 200px;
	text-align:center;
	padding:4px;
	background-color:rgba(240,247,255,0.95);
	border-radius:14px;
	border: 3px solid;
	border-color:rgba(0,120,189,0.5);
	color:rgba(0,120,189,1);
}
.anhang:active{
	background-color: rgba(0,0,0,0);
}
.anhang{
background: url("../img/anhang.png") no-repeat 0 6px ;
background-size: 26px; 
padding:10px 10px 10px 26px;
background-color: rgba(0,120,189,0.03);
border-top: 1px solid;
border-color: rgba(0,120,189,0.1);
}
.addreceiver{
padding:5px 5px 5px 10px;
background-color: rgba(0,120,189,0.03);
border-top: 1px solid;
border-color: rgba(0,120,189,0.1);
}
#newmailtext{
	position: absolute;
	bottom:0px;
	top:180px;
	left: 0px;
	overflow: auto;
	width:98%;
	opacity: 0.9;
	z-index: 2;
}

#newitdtext{
	position: absolute;
	bottom:0px;
	top:80px;
	left: 0px;
	overflow: auto;
	width:98%;
	opacity: 0.9;
	z-index: 2;
}

#attachmentdiv
{
	display:none;
	position:absolute;
	z-index:3;
	background-color:#ffffff;
	width:98%;
	max-height:50%;
	overflow-y: auto;
	-webkit-box-shadow: 1px 1px 7px 0px rgba(50, 50, 50, 0.7);
	-moz-box-shadow:    1px 1px 7px 0px rgba(50, 50, 50, 0.7);
	box-shadow:         1px 1px 7px 0px rgba(50, 50, 50, 0.7);
}

#receiverdiv
{
	display:none;
	position:absolute;
	z-index:3;
	background-color:#ffffff;
	width:98%;
	max-height:50%;
	overflow-y: auto;
	-webkit-box-shadow: 1px 1px 7px 0px rgba(50, 50, 50, 0.7);
	-moz-box-shadow:    1px 1px 7px 0px rgba(50, 50, 50, 0.7);
	box-shadow:         1px 1px 7px 0px rgba(50, 50, 50, 0.7);
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #0078BD;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: .5em;
  height: .5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: rgba(0,120,189,0.95);
  font-size: 10px;
  margin: 3px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: .5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 .5em 0 -.25em;
  }
  40% {
    box-shadow: 0 .5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 .5em 0 -.25em;
  }
  40% {
    box-shadow: 0 .5em 0 0;
  }
}