/* CSS fuer Skin 7 mobile */

* {outline:none;max-width:unset;}



html,body,div,p,h1,h2,h3,h4,h5,ul,ol,span,form,img,li {
	font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
	border:0;
	margin:0 auto;
	padding:0;
	color: #343; /* die Schriftfarbe fuer alle Texte, kann fuer jedes Element individuell ueberschrieben werden */
}

html {-webkit-text-size-adjust: 100%; background-color: #d1d1c9;} 

html {
	background:#ddd; 	/* hier die Hintergrundfarbe fuer die Seite */
	background: url(img/wa4.png) repeat; /* https://papers.co/android/va28-pop-art-cultures-pattern/ */
}


body {padding:0 3px 0 10px;margin:0;background:#ddd;}

#kopf {margin-top:0}




body:after {
	content: "";
	position: fixed;
	top: 0;
	height: 100vh;
	left: 0;
	right: 0;
	z-index: -1;
	background: url() center;
	background-size: cover;
}

@media (prefers-color-scheme: dark) {
	body::after{background:unset !important;}
	#dark, #bg_mobil {display:none !important;}
}


p, ul li, #uo, #upload input {
	margin-bottom: 2px;
}


a {color: blue;}

/* #uo li {
	font-size:100%;
} */

#user_pro_room ul, #uo ul{
	margin:5px 0 0 0;
}


#uo a, #user_pro_room a {text-decoration:none}


#uo ul li {
	display: inline-block;
	background: #eee;
	margin: 0 2px 7px 0;
	padding: 2px 5px;
	color:#999;
	background: #eee;
	border:1px solid #aaa;
	border-radius:3px;
	line-height:1.5em;
	/* min-width: 30%;
	text-align:center; */
}


#uo li img {margin-right: 1px;}
#uo li .us_ip {margin-right: 3px;}
#uo br {display:none;}

#uo ul li a {
	color:#222;
	font-family:Arial, system-ui;
}

#uo span {margin-right:5px;}

#user p {font-size:1rem !important;}

#wall img {vertical-align:top}


#wall .pop::after {top: 6px;}

#wrapper {height:unset !important;}

#reload_btn {
    font-size: 24px;
	margin:0;
	top:4px;
	padding: 1px 5px !important;
}
/* #reload_time {display:none;} */

#befehle .away {padding:2px 4px;}
#inner_befehle {margin-left:1em !important;}
#toggle_games_link {margin-right:-26px;}

fieldset {
	float:left;
	border:none;
	/* background: #ddd;	 die Hintergrundfarbe fuer das Chatfenster */
	margin:0;
	padding:0;
}

.mob_not {display: none !important;}

#befehle ul {
    margin: 0 5px 0px 0;
}
#addsmileys {
	display:inline-block;
	margin:0;
	line-height:2em 
}

#addsmileys ul {
	clear: left;
	padding-top: 10px;
	margin-left: 3px;
}
	
#addsmileys ul li{display:inline-block;max-width:90%}

/* #addsmileys img {zoom:1.05;} */
.more_smileys img {border:1px solid #ddd;border-radius:1em; }

h1,
.rooms p img,
#switch,
.dot,
dfn,
/* input, #opt, #farben, .rooms p, #opt2, */  /* diese Zeile entkommentieren, um eine Infobox zu erstellen */
/* fieldset fieldset,    */            /* diese Zeile entkommetieren um alle Optionen auszublenden */
#Anzeige,
#Uhr_Anzeige,
#offaddsmileys ul,
#header,
.ytpreview,
#curr_tit {
	display:none;
}

img.ytpreview_mob {margin-bottom:3px;}

.nick, #nickname, #afk_button {
    display: none !important;
}


h2 {
font-size:1em;
margin: .5em 0 0 0;
}

video {max-height:150px; max-width:260px;vertical-align:top}

#topic, #topic_wdw {margin: 0;}

.rooms {clear:left;width:100%;}


#mp3 audio, #webradio audio, #r_player audio, #player audio {width:98%;border:none;font-size: 1em;}
#r_player {margin-top: 5px;}
#r_player ul, #player ul {margin: 0 4px 0 0;}
#r_player a{color:#222}

#mp3 audio {
	margin-top: 2px;
	margin-left: 5px;
	width: 15em; 
	max-height:20px;
}

#webradio {
    padding: 7px 5px 0 5px;
    margin-top: 7px;
	text-align:center;
}
#audio-controls {text-align:left !important; display:block !important;} /* iOS kann onunload nicht */ 

#webradio h3 {margin: 0 0 .5em 0;font-size:.8rem; color:#666;font-family:Arial}
#webradio  {font-size:.7rem; color:#666;font-family:Arial}

input[type="image"] {cursor:pointer; padding: 2px 5px;border:1px solid #888;border-radius:5px;background:#eee}
input[type="image"]:disabled {
	opacity:.4;
	cursor:default;
	background:transparent;
}


/* On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1. */


#topic {
	width: calc(100vw + 6px);
	margin: 5px -1em;
    background: #0004;
}

#topic {
	/* text-shadow: black 0.1em 0.1em 0.2em; */
	text-shadow:.6px  .6px .6px #000,
	.6px -.6px .6px #000,
	-.6px  .6px .6px #000,
	-.6px -.6px .6px #000;
}



#topic, .marquee span, #topic_wdw, #topic_wdw a, #topic_wdw span {
	letter-spacing:1px;
	color: #fff;
	font-size:1em;
}


#user_pro_room ul li {
	list-style-type:none;
	display:inline-block;
	border:1px solid;
	border-radius:4px;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d1d1d1));
	margin: 5px 3px 0 0;
	padding:3px 6px;
}

#user_pro_room em {
	font-weight: bold;
	font-style: normal;
	color: red;
	margin:0 !important;
}

#user_pro_room a {text-decoration:none;color:#222;}


#user_pro_room em:after { 
	content:"\00a0✔︎";
	line-height:1em;
}

#uo, #uo ul {min-height: 6.5em !important;}

.uo_head {display:inline-block;}

#talk {
   font-size: 100%;
}

#wall {
/*	overflow: auto; */
/*	-webkit-overflow-scrolling: touch !important; */
	margin: 10px 0 10px 0;
	padding: 1px 3px;
	height: 60vh;
}


.tr  {
	visibility:hidden;
	height: 0;
	display: block;
	margin-bottom: -1px;
}
/* span.tr:after {
    content: "";
    display: block;
} */


.av {
	margin: 0 5px 0 0;
	border:1px solid #888;
	border-radius:3em;
	/* max-height:3em; */
	width:31px !important;
	object-fit: cover;
	/* clip-path: circle(50% at 50% 50%); */
	float:left;
	background:#fff;
}

#wall p {
	position: relative;
	background: #fff;
	color: #333 !important;
	border-radius: 0 .7em .7em .7em;
	padding: 5px 5px 4px 7px;
	margin-bottom: 6px;
	margin-left:.7em;
	max-width: 81vw;
	word-wrap:break-word;
	clear:left;
	display:table;
	/*overflow:auto;*/
}



#wall p:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 100%;
	top: 0;
	border: 5px solid;
	border-color: #fff #fff transparent transparent;
}


/* das sollte natürlich nicht .bb sein, sondern der schreibende User, also in chat? */
#wall p.bg {
	background: rgba(193,204,199,0.93);
	background: #dad5d5;
	position: relative;
	left: 3%;
	width:86%;
	border-radius: .7em 0 .7em .7em;
	margin-left:0;		
}

#wall p.bm {
	background: rgba(255,255,255,0.93);
	position: relative;
	left: 3%;
	width:86%;
	border-radius: .7em 0 .7em .7em;
	margin-left:0;		
}

#wall p.bg:before, #wall p.bm:before {
	border:0;	
}

#wall p.bg:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 100%;
	top: 0;
	border: 5px solid;
	border-color: rgba(193,204,199,0.93) transparent transparent rgba(193,204,199,0.93);
}
	
#wall p.bm:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 100%;
	top: 0;
	border: 5px solid;
	border-color: rgba(255,255,255,0.93) transparent transparent rgba(255,255,255,0.93);
}
	
#wall span img:not(.av), #wall span video {margin-bottom:3px;border-radius:3px}
	
/*
#wall p.bm {
	background: #ece9e1;
}


#wall p.bm:before {
	border-color: #eee #eee transparent transparent;
}
*/

#wall p.bg span:not(.ytb) {
	color: #222 !important;
}

canvas {vertical-align:text-top;border-radius:4px;}



#wall .whisper, #wall .at {color:red; background: yellow}

/* .bg {background:#eee;}   der Hintergrund fuer den Admin */

textarea#line {width:97.5%;}
input#line {
	max-width: calc(100vmin - 150px); 
    line-height: 1.5em;
    margin-bottom: .5em;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
input#line { 
	max-width: 70%; 
}
}

input {
      background:#fafafa;
      margin: 0 0 0 0;
      font-size: 100%;
}

input#reset_button {padding:5px 10px 6px 10px !important;margin:0 !important;position:relative;top:0;margin:0; -webkit-appearance: button;font-weight:bold;}

/* .button {margin:15px 0 0 0 !important;} */

button.button {
	margin-top: 0 !important;
	padding: 5px 8px 6px 8px !important;
	bottom: 0;
}
#f .button {display:inline-block; margin-top: 1em;}

.opt, .opt3 {
     display:block;
     margin-top: .2em;
}

#menu1 {margin-right:1em;float:none !important}  /* damit's untereinander steht */

#menu1, #menu2{
  width:288px;
  height:1.6em;
  font-size: 1em;
}

#room {
     width:50%;
     margin-top: 5px;
}



#logout, .logout, .button, .away {
	display:inline-block;
	margin:5px 1px 2px 0;
	padding:2px 8px;
	background-color: #fff;
	border: 1px solid #555;
  	border-radius: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d1d1d1));
	background: -moz-linear-gradient(top,  #fff,  #d1d1d1);
	font-size: 1em;
}
#logout {
	background: red;
}
#logout a {color:#fff;}

fieldset.rooms {
	background: #fff;
	max-width: calc(100% - 17px);
	max-width: 92vw;
	padding: 5px;
	opacity: .9;
	margin-bottom: 5em !important;
	border-radius:5px;
}

.logout a, a.away {font-family: sans-serif; text-decoration:none; color: #222; font-weight: normal !important;} 
#logout a, .logout a {display:block}



a.stop {
color:#fff;
background: #888 !important;
text-decoration:none;
font-size: 80%;
padding: 1px 7px;
border-radius: 2em;
}

#upload {
	clear:both;
	margin:.7em 0 0 0;
	border:none;
	padding:0;
	min-height:3em !important;
}

input[type="file"]::-webkit-file-upload-button {
	font-size:1em;
	color:#444;
	border:1px solid #444;
	border-radius: 4px;
	padding: 3px 5px;
}

#upload legend {display:none}



#ip {margin-top:0}

#file {color: transparent;background-color:transparent;max-width:95vw}


a.mp3 {
text-decoration: none;
padding-left: 20px;
background-image:url(img/audio.gif) !important;
background-repeat:no-repeat !important;
background-position: 0 50% !important ;
}

#mob_yt{display:block !important; width:94vmin;height:0;border:0;}
#yt_dt {display:none}
.yta {color:black;font-weight:bold; font-family:Arial; font-size: 1em;}
.ytb {font-family:Arial; background:#a00;color:white !important;font-weight:bold;font-size: 1em; padding: 0 .2em; margin-left: .1em; border-radius:.4em;}

.dt, .uz, .tr {font-size:.7em;display:contents;}

.hello {color: red !important; font-size: 80%; font-style:italic;font-weight:700;}
#footerlink{display:none;}

#einaus_ae {font-size:1.5em}	
#esc {display:none !important}
	
#eu-cookie-irrsinn {opacity:1 !important}	
	

#f .button, .button, .logout, #logout {max-width:90vw !important;padding:.6em;color:#555}

#logout {width: 66vmin;
    text-align: center;}

#radiowahl {font-size:1em !important; margin-top:1em !important;float:none}
	
@media only screen and (orientation:landscape){	
	#wall {height: 60vmin;}
	#wall p {
		/* damit word-wrap weiss was es tun soll */
		max-width: 30em;  	
	}	
}

#mixed_content {display: none;}
#popout_icon {bottom:0 !important;margin: 16px;}

#toggle_games_link {margin-bottom:5px !important;}

.helplinks {
display:inline-block;
margin:0 5px 0 0 !important;
position:relative;top:5px;
}
.helplinks p {color:transparent !important; margin-bottom:10px}

.helplinks p a:not(.flag) {
border: 1px solid;
border-radius:3px;
padding: 2px 4px;
background:#fff;
}
.helplinks a {color:#747474;text-decoration:none}
.helplinks a span.dot {display:none}

#kalender {
	width: 27px !important;
	height: 25px !important;
}


form#opt1 {
background: #fff8;
padding: 5px;
}	

.pin {
	background: #eee !important;
	border:1px solid #888;
	border-radius: 7px !important;
	margin-left: 0 !important;
	top:-1px !important;
	position:static !important;
	
}
.pin::before {display:none;}

.emoji {display:inline-block;font-size:18px;vertical-align: middle;}