/* CSS fuer Skin 14   */


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


body {
      width: 95%; max-width: 70em;min-width:41em;
      margin: auto;
	  height:100%;
}

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

@keyframes myfirst {
	from {opacity: 0;}
	to {opacity: 1;}
}

#topic, #topic_wdw {background:#0003;margin-bottom: 3px;border-radius:4px;padding-left:.5em;color: #fff !important;}

/* css13 => css14 */
#topic, .marquee span, #topic_wdw, #topic_wdw a, #topic_wdw span {
	/* 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;
	
}


#wall p .marquee {
	display:inline-block;
}
#wall p .marquee span {
	text-shadow:none;
}



legend, #upload_2 a, #reload_btn, button[type=submit]{color: #fff;vertical-align:40%}

.rooms {
	margin: 0 0 0 0;
	background-color: rgba(255,255,255,0.8);
	height: unset !important;
	padding: 5px 5px 0 5px;
	border-radius: 6px !important;
	border: 1px solid #aaa !important;
}



fieldset, #wall {border:0 !important;}

fieldset .rooms {margin-bottom:0 !important;/* max-width:15em; */}

h1 {
	font-size:1.45em;
	line-height:125%;
	padding-top:4px;
	padding-bottom:4px;
	font-variant:small-caps;
	color:#555;
	background-image: linear-gradient(90deg,#7a7afb,red,yellow,green,purple);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #000;
}


h2 {
	font-size:.8em;
	line-height:125%;
	margin: 1em 0 .3em 0;
}

h3, h4, h5 {
	font-size:.8em;
	margin-top: 1em;
	line-height:125%;
	color:#747474;
}

p, ol li, #user, #help tr, legend, select {
	font-size:.8em;
}

video {vertical-align:top}


/* #wrapper {margin-top:2em} */


#addsmileys ul li, #farben ul li {
	display:inline;
	margin:0;
}

#mixed_content a {	color:#747474;font-size:80%}

#reload_btn, button[type=submit] {
	border: 0;
	background: transparent;
	font-size: 2em;
	text-shadow: black 0.1em 0.1em 0.2em;
	cursor: pointer;
}



ul {
	font-size:.8em;
	list-style-type: none;
}


li {
	margin: 0 1em 0 0;
}

fieldset {
	clear: right;
	/* background: #fff;		 die Hintergrundfarbe fuer das Chatfenster */
	margin:0 0 0 0;
	border:none;
	padding: 2px 2px 0 2px;
}

fieldset fieldset {
       /* background: #fff;	 die Hintergrundfarbe fuer die Optionsfelder */
       /*background-image:url(bg_teaser.gif);
       background-repeat:repeat-x;
       */

	 padding: 2px 4px 4px 3px;
	 margin-bottom: 3px;
}
* html fieldset fieldset {
         float:right;
         width:20%;
}


.dt, .uz {
	font-size:.7em;
	color:#888;
/*	background: rgba(255,255,255,0.6); */
	display:contents;
}

/*
.bg .dt, .bg .uz {
	background: rgba(190, 202, 197, 0.6);
}
*/

.dt {
right: 5.5em;
padding-right: .7em;
}


.tr {
	display:none;
}

.av_link a {text-decoration:none;}

.klein {
	font-size: .7em;
	margin: 0 0 .3em .3em;
}

.emoji {display:inline-block;margin-bottom:3px;vertical-align: middle;}

#talk {
	width: calc(100% - 18em) !important;
	margin: 0 1em 1em 0;
	background-color: rgba(2,2,2,0.2);
	height: unset !important;
	padding: 3px 2px 0 .7em;
	border-radius:6px;
}

#wall {
	overflow-y: scroll;
	/* height: calc(100vh - 18.5em); */
	margin: 0 0 5px 0;
	padding: .7em .3em 0 .7em;
	line-height: 1.1em;
	/* max-width: 60em;  damit word-wrap weiss was es tun soll */
	word-wrap:break-word;
	max-width:70vw; /* hack gegen Layout-Zerschießen wenn Endlosstring, z.B. base64 img */
}
* html #wall {
      background-attachment:fixed;
}


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

#wall p {
	position: relative;
	background: #fff;
	color: #333 !important;
	border-radius: 0 .7em .7em .7em;
	padding: 5px 5px 2px 7px;
	margin: 6px 0;
	max-width: calc(100% - 3.5em);
	line-height: 1.3em;
	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, #wall p.bm {
	background: #cacaca;
	background: #dad5d5;	
	border-radius: .7em 0 .7em .7em;
	margin-left:0;
	padding:5px 6px 2px 9px;
	max-width: calc(100% - 8em);
}
#wall .bg .av, #wall .bm .av {margin-left: -4px;margin-top:2px;border-color:#fff} 

#wall p.bm {
	background: #ffffff;	
}

#wall span img, #wall span video {margin-bottom:3px}



#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: #ffffff transparent transparent #ffffff;
}

/*
#wall p.bm:before {
	border-color: #e1e1e1 #e1e1e1 transparent transparent;
}
*/
	
#wall img {
	vertical-align:text-top;
	/* margin-bottom:3px; */
}

#wall  img:not(.av) {
	border-radius:4px;
}

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

#wall .pop::after {
	bottom: -7px;
	right: 2px;
}


.ip {display:inline-block;}

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

#wall .nick, #wall .nk {
	font-weight:900;
/*	float:left; */
	margin: 0 3px 0 0;	
}

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

/* #uo {min-height:unset !important;} */


#wall::-webkit-scrollbar, #user_pro_room::-webkit-scrollbar, #user::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 8px;height:8px;
  }
#wall::-webkit-scrollbar-thumb, #user_pro_room::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: rgba(255, 255, 255, .7);
}
#user::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: rgba(0, 0, 0, .4);
}

#wall::-webkit-scrollbar-corner, #user_pro_room::-webkit-scrollbar-corner, #user::-webkit-scrollbar-corner {
	background-color:transparent;
}


#wall::-webkit-resizer {
background-color: rgba(255, 255, 255, .7);
border-radius:1em;
}
#user::-webkit-resizer {
background-color: rgba(0, 0, 0, .4);
border-radius:1em;
}


#line {
	width: 85%;
	max-width: 78%;
	max-width: min(82%, 60vw);
	margin-left:0;
    border: 1px solid #aaa;
	border-radius:.2em;
    padding: 3px 7px !important;
	font-size:1em;
}
input#line {position:relative; top: -7px;}
input[type=text] {height:20px}
textarea {height:35px}


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




#op {margin:3px 0}

#ton {
	width: 0;
	height: 0;
}



#user{
	min-height: calc(85vh - 330px) !important;	overflow-y:scroll !important;
	max-width:unset !important;
	padding:2px 0;
}




#user ul {/* background:#ddd; */ min-height:unset !important; display:block;}

#user ul, #user ul li {
	display: inline;
	display:block;	font-size:100%;
	margin: 0; 
	padding:0 .1em;
}

#user ul, #user_pro_room ul {
	padding: 0 0 .25em 0;
	margin-top: 0;
	line-height:1.35em;
	
}

#user_pro_room{
	display:block; 
	min-height: 3em; 
/*	overflow-y:auto; overflow-x:hidden; */

}

#user_pro_room em {
	font-weight: bold;
	/* font-family:Arial; */
	font-style: normal;
	color: red;
	border:1px solid #aaa;
	border-radius:1em;
	background: #fff;
	padding:4px 8px;
}

#user_pro_room em:after { 
	content:" ✔︎";
}

#user_pro_room ul li {
	list-style-type:none;
	display:inline-block;
	margin: 11px 0 0 0;
}

#user_pro_room ul li a:hover, #user_pro_room ul li a:focus {
	background: #fff;
}

#user_pro_room a {
	text-decoration:none;
	color:#222;
	border:1px solid #aaa;
	border-radius:1em;
	background: #eee;
	padding:3px 20px 4px 8px;
}

#user_pro_room a:has(span) {
	padding:3px 8px 4px 8px;
}



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

#user ul li {color:#444}
/* #user ul li a {color:#444} */
#addsmileys {
	float:left;
	margin: 0 !important;
}
object {margin: 5px;}

dfn, .dot, #sr {
	position:absolute;
	left:-1000px;
	top:-1000px;
	width:0;
	height:0;
	overflow:hidden;
	display:inline;
}


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


label,
select,
input {
cursor: pointer;
}

.button {padding:3px; top:-7px}

* html .button {padding:0;}
*+html .button {padding:0;}

.away {
    border-radius: 1em;
    padding:2px 8px;
    background-color: #747474;
    color: #fff;
}

label {margin:0 3px}


#line, #handle, #room {
	background:#fff;
	cursor:text;
}
#line {
	border: 2px solid transparent;
}

#line:focus, #line:hover {
	outline:none;
	border: 2px solid #aaa;
	border-radius:3px;
}

#menu1, #menu2 {width:70%}

select {font-size: 100%}


#menu1 {width: 100%}* html #menu1 {width:96%}
#opt2 {clear:left; padding-top: 5px}
.opt {
     display:block;
     margin: 0 0 2px 0;
     padding: 0;
}
* html .opt {margin: 0 0 -4px 0;}
.uolist {display:none;}

#upload {
	clear:left;
	margin: 0 5px 3px -6px;
	min-height:4em !important;
}

#wrapper fieldset legend {
/*	font-size: .8em;
	position: relative;
	top: 1.8em;
	left: -8em; */
	display:none;
}


#mp3 {clear:unset !important}
#addsmileys {margin-right: 1em !important;}

#mp3 audio {
	margin-top: 0;
	margin-left: 0;
	width: 15em; 
	max-height:20px;
}
@-moz-document url-prefix() {
	audio {filter: invert(1);}
	#mp3 audio {max-height:30px;margin-top:0;}
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* nur Blink, also Chrome - und natürlich Opera */
	audio {
	border: 1px solid #ccc;
	border-radius: 40px;
	}
}

_::-webkit-full-page-media, _:future, :root audio { /*Safari*/
	border: 0;
}

#upload_2 {margin: 0 6px ;}
#addsmileys ul li a:visited span {color:#ddd}


#wdw_logo {filter: invert(.4);max-width:15em !important}

#logout, .logout, #einaus_ae {
	text-align:center;
	margin:7px 0;
	padding:5px 8px;
	border: 1px solid #ccc;
	border-radius:1em;
	background-color: #f1f3f4;
	cursor:pointer;
	display:block;
}

#logout {background-color:#e22;}
#logout a {color:#fff;}
#logout:focus a, #logout:hover a{color:#555;}

#logout:focus, #logout:hover, .logout:focus, .logout:hover, #einaus_ae:hover, #einaus_ae:focus {
	background-color:#fff;
}

.logout a {text-decoration:none; color:#555;}

.helplinks {
margin-right:4px;
}
.helplinks p {color:transparent!important}

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

/*
.flag {
margin-top: -2px !important;
}
*/

input, select {
border: 1px dotted #666;
padding: 2px;
background:#fff;
}
input {
margin-right: 2px;
}

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

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

fieldset #upload #file{border:0 none !important;} /* fuer Chrome */

a.stop {
color:#fff;
background: #747474 !important;
text-decoration:none;
font-size: 80%;
padding: 3px 6px;
border-radius: 1em;
}
#ae {margin-bottom:.5em;}
#einaus_ae {color:#555;min-height:17px}

#reverse, #mehrzeilig, #datum, #uhr, #bilder, #avatar, #sound, #nickfarben,#nickfarben2, #time_online, #time_real {
      border: 0;
      background: transparent;
}

#r_player ul, #player ul {background: #fff;}
#r_player a, #player a {color: #222;}

/* #webradio {color:#666;} */
#radio {text-align:center;}
#player_0 embed {max-width: 100%; outline:0; margin: 0 auto;}


/* #nickname {display:inline-block; position:relative;bottom: 5px; margin-left: 6px; color:red;}*/
#nickname {
    display: inline-block;
    color: red;
    margin: .5em 0 1em 0;
}

.uhr {font-size:.7rem;color:#747474;margin-left:1em}


.more_smileys span {display:none}

.more_smileys img {
    border: 1px solid #eee;
    border-radius: 2em;
}

input::-webkit-file-upload-button {
    border-radius: 1em;
    border: 1px solid #555;
    padding: 2px 8px;
}


.yta {color:black;font-weight:bold; font-family:Arial narrow; font-size: 1.2em;}
.ytb {font-family:Arial narrow; background:red;color:white !important;font-weight:bold;font-size: 1.2em; padding: 0 .2em; margin-left: .1em; border-radius:.4em;margin-right:5px;}


#webradio {text-align:center;max-width:100%}
input[type="image"] {cursor:pointer; padding: 2px 5px;border:1px solid #888;border-radius:5px;}
input[type="image"]:hover, input[type="image"]:focus { background: #fff}
input[type="image"]:disabled {
	opacity:.4;
	cursor:default;
	background:transparent;
}
#audio-controls {
	margin-top: -36px;
	margin-bottom:5px;
	padding-top: 10px;
	border-radius: 10px;
	background: #f1f3f4;
	border:1px solid #ccc;
}

.pin {
	background: #eee !important;
	border:1px solid #888;
	border-radius: 7px !important;
	margin-left: -.9em !important;
	top:-11px !important;
}
.pin::before {display:none;}
	
@media (prefers-color-scheme: dark) {
	body::after {filter:invert(1);}
	#talk {	background-color: rgba(255,255,255,0.5);}
}
@supports (-moz-appearance:none) { /* damit dunkle Firefox-Themes die Skins nicht zerschießen */
	body:after{filter:invert(0) !important;}
}