* {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;
}

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

html {
	background:#ddd;
	background: url(img/wa4.png) repeat;
}

body {padding:0 3px 0 10px;margin:0;}


#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;}
	#toggle_smileys, #toggle_smileys span {background: #222;color:#ddd;border-color:#aaa;}
}

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

a {color: blue;}

#upload_2 a{color: #fff;}

#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;
	font-family:Arial, system-ui;

	height:1.5em;
}

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

#uo ul li a{
	color:#222;
}

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

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

#wall img {vertical-align:top;}

#wall img:not(.av), #wall video {border-radius:6px;margin:2px -2px 2px 0;vertical-align:top;}

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

#wrapper {height:unset !important;overflow-x:hidden;}

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

#backbutton {
	font-size: 2.2em !important;
}

#chromeRestart {display:none;}

#befehle .away {font-size:1em;padding:2px 4px 3px;height:fit-content;}
#befehle .away a {color:#222;}
#inner_befehle {margin: 1px 5px 0 0 !important;width:6em;}

#befehle {display:flex;float:left;}
#befehle ul li {margin-bottom:5px}

fieldset {
	float:left;
	border:none;

	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%}

#toggle_smileys {
	top: 0 !important;
	line-height: 9px !important;
	font-size: 1em !important;
}

#antenna {
	border: 0;
	background: transparent;
	top: 2px;
	margin: 5px 42%;
}

#einaus_ae {display:inline-block !important;}

.more_smileys img {
	border:1px solid #ddd;
	border-radius:1em;
	height:24px;
	margin-bottom:-8px;
}

h1,
.rooms p img,
#switch,
.dot,
dfn,

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

.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: 0 -1em 0;
	background: #0004;
}

#topic {

	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\2713";
	font-weight: bold;
	line-height:1em;
}

.uo_head {display:inline-block;}

#talk {
	font-size: 100%;
}

#wall {
	margin: 10px 0;
	padding: 1px 3px;
	height: calc(100svh - 15em) !important;
}

.tr  {
	visibility:hidden;
	height: 0;
	display: block;
	margin-bottom: -1px;
}

.av {
	margin: 2px 5px 0 -10px;
	border:1px solid #888;
	border-radius:3em;

	width:31px !important;
	object-fit: cover;

	float:left;
	background:#fff;
}

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

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

#wall p.bg {
	background: #dad5d5;
	position: relative;
	left: 3%;
	width:86%;
	border-radius: 1.2em 0 .7em 1.2em;
	margin-left:0;
}

#wall p.bm {
	background: rgba(255,255,255,0.93);
	position: relative;
	left: 3%;
	width:86%;
	border-radius: 1.2em 0 .7em 1.2em;
	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: #dad5d5 transparent transparent #dad5d5;
}

#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 p.bg span:not(.ytb) {
	color: #222 !important;
}

@media only screen and (orientation:landscape){
	#wall {height: 60vmin;}
	#wall p {
		/* damit word-wrap weiss was es tun soll */
		max-width: 30em;
	}
}

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

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

textarea#line {width:97.5%;}
input#line {
	max-width: calc(100vmin - 150px);
	height: 25px !important;
	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.button {
	margin-top: 0 !important;
	padding: 5px 8px 6px 8px !important;
	bottom: 0;
}

#f * {
	margin: 0;
	vertical-align:top;
	top:0;
}

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

#menu1 {margin-right:1em;float:none !important}

#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;
	cursor:pointer;
}
.logout {
	min-width:35vw;
}
#logout {
	background: red;
	border-radius:2em;
}
#logout a {color:#fff;}

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

.logout a, a.away {font-family: sans-serif; text-decoration:none; color: #343; 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:block;
	margin-bottom:1em;
	position:static !important;
	font-size:.8em !important;
	text-align:center !important;
}

#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: 85vmin;
text-align: center;}

#radiowahl {font-size:1em !important; margin-top:1em !important;float:none}

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

#toggle_games_link {height:fit-content;}

.helplinks {
	display:inline-block;
	margin:0 5px 0 0 !important;
	position:relative;top:8px;
}
.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;}

#wunschbox {zoom:.8;}

@media (max-width:411px) {
	#wunschbox {
		margin: -110px 10px 5px;
	}
}

.marquee_si {
	width: 90vw !important;
}

.marquee_si span {
	font-size: 1em !important;
}

#sendeplan {
	border-bottom: 1px solid #aaa;
}

.uo_head {display:block;}