/*
Hier werden Textfarbe am Chatstart und Systemtextfarbe angegeben.
Die Parameter werden mit PHO ausgelesen, deshalb bitte die Syntaxis beachten!
---------------------
Textfarbe:ffffff
Systemfarbe:ffffff
---------------------
*/
/* **********************************************************************************************
 *  ET-Chat Copyright by SEDesign http://www.sedesign.de
 *  ET-Chat v3.x.x | Lizenz: CCPL - http://creativecommons.org/licenses/by-nc/2.0/de/
 *  Autor: Evgeni Tcherkasski <SEDesign /> | E-mail: info@s-e-d.de
 *  Modifiziert von [Chatradiotechnik] [2021] https://chatradiotechnik.de
 * **********************************************************************************************/

/* for index.php - Login */


#body {
height: 100%; text-align: center; font-family: verdana, sans-serif; 
background-color: #000000;
*/background-image: url('img/bg.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center fixed;
}

#player {
    padding: 5px;
    float: right;
    width: 220px;
    height: 155px;
    overflow: auto;
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid white;
    border-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 0 10px #ff7907;
}

#player {
    width: 195px;
    height: 36px;
    display: inline-block;
}

/* for chat.php*/
table {
font-size: 11pt;
}

#body_id {
height: 100%;
width: 100%;
background-image: url('img/bg.jpg');
margin: 0px auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center fixed;
}

#rahmen_um_alles {
margin: 10px;
}

body {
background-color: #000000;
scrollbar-face-color: #006699;
scrollbar-shadow-color: #808080;
scrollbar-highlight-color: #006699;
scrollbar-3dlight-color: #006699;
scrollbar-darkshadow-color: #006699;
scrollbar-track-color: #006699;
scrollbar-arrow-color: #808080;
-ms-overflow-style: -ms-autohiding-scrollbar;
-ms-overflow-style: none;
}

#kopf {
background-color: rgba(0, 0, 0, 0.50);
font-size: 11pt;
font-family: verdana, sans-serif;
font-style: normal;
color: #FFFFFF;
padding: 0px;
margin-bottom: 10px;
border: 1px solid #FFFF00;
    border-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
box-shadow: 0px 0px 0px #006699;
}

#onlinelist {
padding: 5px;
background-color: rgba(0, 0, 0, 0.50);
font-size: 11pt;
font-family: verdana, sans-serif;
font-style: normal;
color: yellow;
border: 1px solid #FFFF00;
    border-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

height: 250px;
line-height: 150%;
padding-bottom: 5px;
overflow: auto;
box-shadow: 0px 0px 0px #006699;
}

#online {
padding: 5px;
background-color: rgba(0, 0, 0, 0.50);
font-size: 11pt;
font-family: verdana, sans-serif;
font-style: normal;
color: #FFFFFF;
border: 1px solid #FFFF00;
    border-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

height: 250px;
line-height: 150%;
padding-bottom: 5px;
overflow: auto;
box-shadow: 0px 0px 0px #006699;
}

* html #splitpane {
margin-left: 0px;
}

#splitpane {
/*background-image: url('../../img/splitpane.png');*/
background-repeat: no-repeat;
background-position: center;
font-size: 11pt;
font-family: verdana, sans-serif;
font-style: normal;
float: right;
color: #FFFFFF;
width: 8px;
margin: 1px;
height: 450px;
/*cursor:e-resize;*/
}

#chatinhalt {
padding: 5px;
border: 1px solid #FFFF00;
    border-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

background-color: rgba(0, 0, 0, 0.50);
font-size: 11pt;
font-family: verdana, sans-serif;
font-style: normal;
color: #FFFFFF;
line-height: 150%;
/*margin-right: 200px;*/
position: relative;
height: 450px;
overflow: auto;
padding-bottom: 5px;
box-shadow: 0px 0px 0px #006699;
}

#form {
background-color: rgba(0, 0, 0, 0.50);
font-size: 11pt;
font-family: verdana, sans-serif;
font-style: normal;
clear: both;
border: 1px solid #FFFF00;
    border-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

margin-top: 10px;
padding: 5px;
height: 50px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
box-shadow: 0px 0px 0px #006699;

}

#form_left {
border: 0px solid #006699;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 10px;
position: relative;
float: left;
}

#form_right {
border: 0px solid #006699;
padding-top: 9px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
position: relative;
float: left;
}

#privat_messages{
 position: absolute;
 top: 100px;
 left: 100px;
 background-color: #cccccc;
 border: 1px solid #006699;
 padding: 5px;
}

.rooms {

background: transparent url('img/rooms.png') top center repeat;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;

color: yellow:
border: 0px solid #006699;
padding: 7px;
padding-left: 0px;
margin-bottom: 2px;
}

.rooms_not_allowed {
background-color: #3D3D3D;
border: 1px solid #006699;
padding: 1px;
color: #CCCCCC;
margin-bottom: 2px;
cursor: pointer;
}

.privat_ausg_an {
background-color: rgba(0, 0, 0, 0.00);
border: 0px solid #006699;
border-radius: 0px;
padding: 10px 20px 10px 0px;
margin-bottom: 3px;
display: inline-block;
box-shadow: 0px 0px 0px #006699;
}

.privat_ausg_von {
background-color: rgba(0, 0, 0, 0.00);
border: 0px solid #006699;
border-radius: 0px;
padding: 10px 20px 10px 0px;
margin-bottom: 3px;
display: inline-block;
box-shadow: 0px 0px 0px #006699;
}

#close_privat {
cursor: pointer;
background-color: #FFFFFF;
font-size: 11pt;
font-family: verdana, sans-serif;
font-style: normal;
border: 1px solid #000000;
padding-left: 4px;
padding-right: 4px;
}

#privat_anzeige {
padding-bottom: 3px;
color: #FFFFFF;
height: 18px;
}

#privat_modus {
font-size: 11pt;
}

#close_privat {
color: #000000;
}

.privat_mesages_window {
height: 337px;
padding: 3px;
border: 1px solid #006699;
overflow: auto;
}

.privat_win_button {
cursor: pointer; 
font-weight: bold;
border: 1px solid #FFFFFF;
width: 190px;
margin-top: 3px;
background-color: #000000;
text-align: center;
}

.colorpick {
font-size: 11pt;
cursor: pointer;
border: 1px solid #000000;
width: 100%;
}

.dialog {
font-size: 11pt;
font-family: verdana, sans-serif;
font-style: normal;
}


.img_button{
	cursor:pointer;	
}

.img_button:active {
position: relative;
transform: scale(1.11);
}

.img_smiley {
cursor: pointer;
}

.img_smiley:active {
position: relative; 
box-shadow: 0px 0px 50px #FFFFFF, inset 0px 0px 150px #666666;
}

.teamspeak_submit_button {
cursor: pointer;
}

.teamspeak_submit_button:hover {
background-image: linear-gradient(to bottom, #000000, #2B344E);
}

.teamspeak_submit_button:active {
position: relative;
transform: scale(1.11);
background-image: linear-gradient(to bottom, #000000, #2B344E);
}

.img_chat {
cursor: pointer;
}

.button_admin {
cursor: pointer;
}

.button_admin:active {
position: relative;
transform: scale(1.11);
}

.img_chat:active {
position: relative;
box-shadow: 0px 0px 50px #FFFFFF, inset 0px 0px 150px #666666;
}

.userbild {
box-shadow: 0px 0px 0px #006699;
height: 40px;
width: 40px;
}

.useronlinebild {
border: 1px solid #006699;
cursor: pointer;
height: 16px;
width: 16px;
}

.useronlinebild:active  {
border: 1px solid #006699;
transform: scale(4.00) translate(-35%, -35%);
}

.gender_icon {
height: 16px;
width: 15px;
vertical-align: text-bottom;
}

.gender_icon_userliste {
height: 17px;
width: 16px;
vertical-align: text-bottom;
}

.zauberstab {
cursor: pointer;
height: 18px;
width: 17px;
vertical-align: text-bottom;
}

#message {
border: 1px solid #FFFF00;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
outline: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
font-size: 11pt;
background-color: rgba(0, 0, 0, 0.75);
}

.mess_back{
background-color: rgba(0, 0, 0, 0.00);
border: 2px solid #FFFF66;
border-radius: 15px;
padding: 10px 20px 10px 0px;
margin-bottom: 3px;
display: inline-block;
box-shadow: 2px 2px 2px #006699;
}

.mess_self{
background-color: rgba(0, 0, 0, 0.00);
border: 2px solid #FFFFCC;
border-radius: 15px;
padding: 10px 20px 10px 0px;
margin-bottom: 3px;
display: inline-block;
direction: ltr;
box-shadow: 2px 2px 2px #006699;
}

.private_message_field {
font-size: 11pt;
width: 200px;
margin-top: 10px;
margin-left: 0px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #000000;
border: 1px solid #006699;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
outline: none;
}
a:link {font-family:Arial,serif; font-size:10pt; color:#ffffff; text-decoration:underline;}
a:visited {font-family:Arial,serif;	font-size:10pt;	color:#ffffff; text-decoration:underline;}
a:active {font-family:Arial,serif; font-size:10pt; color:#ffffff; text-decoration:underline;}
a:hover {font-family:Arial,serif; font-size:10pt; color:#ffffff; text-decoration:none;}

/*------------ for history -----------------------*/
.kopf{ background-color:#006699; }
.gerade{ background-color:#f04c29; }
.ungerade{ background-color: #7a3323 ; }
.privat_von{ background-color:#ddffdd; }
.privat_nach{ background-color:#ffdddd; }

/*------------ for adminbereich -----------------------*/
#adminbereich_body{
background-color:#000000;
color:#ffffff;
font-size: 12px;
font-family: sans-serif;
}
#adminbereich_body a:link {font-family:Arial,serif; font-size:10pt; color:#ffffff; text-decoration:underline;}
#adminbereich_body a:visited {font-family:Arial,serif;	font-size:10pt;	color:#ffffff; text-decoration:underline;}
#adminbereich_body a:active {font-family:Arial,serif; font-size:10pt; color:#ffffff; text-decoration:underline;}
#adminbereich_body a:hover {font-family:Arial,serif; font-size:10pt; color:#ffffff; text-decoration:none;}



/*---------------------------- for Window -------------------------*/
.overlay_etchat_black {
	background-color: #ffffff;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

.etchat_black_nw {
 border-left: 1px solid #006699;
 border-top: 1px solid #006699;
 border-bottom: 1px dashed #006699;
  width:10px;
  height:18px;
  background-color: #006699;
}

.etchat_black_n {
  border-top: 1px solid #006699;
  border-bottom: 1px dashed #006699;
  background-color: #006699;  
}

.etchat_black_ne {
 border-right: 1px solid #006699;
 border-top: 1px solid #006699;
 border-bottom: 1px dashed #006699;
  width:10px;
  height:18px;
  background-color: #006699;

}

.etchat_black_w {
 border-left: 0px solid #006699;
 width:10px;
 background-color: #000000;
 background-image: linear-gradient(to left, #000000, #006699); 
}

.etchat_black_e {
  border-right: 0px solid #006699;
  width:10px;
  background-color: #000000;
  background-image: linear-gradient(to right, #000000, #006699);
}

.etchat_black_sw {
 border-left: 0px solid #006699;
 border-bottom: 0px solid #006699;
  width:10px;
  height:3px;
  background-color: #000000;
  background-image: linear-gradient(-135deg, #000000, #006699);
}

.etchat_black_s  {
border-bottom: 0px solid #006699;
background-color: #000000;
background-image: linear-gradient(to bottom, #000000, #006699);
}

.etchat_black_se, .etchat_bvb_sizer {
 border-right: 0px solid #006699;
 border-bottom: 0px solid #006699;
  width:10px;
  height:3px;
  background-color: #000000;
  background-image: linear-gradient(135deg, #000000, #006699);
}

.etchat_black_sizer {
	cursor:se-resize;
}

.etchat_black_close {
	width: 32px;
	height: 32px;
	background: transparent url(button-close-focus.gif) no-repeat 0 0;
	position:absolute;
	top:10px;
	right:11px;
	cursor:pointer;
	z-index:1000;
}

.etchat_black_minimize {
	width: 32px;
	height: 32px;
	background: transparent url(button-min-focus.gif) no-repeat 0 0;
	position:absolute;
	top:10px;
	right:55px;
	cursor:pointer;
	z-index:1000;
}

.etchat_black_maximize {
	width: 32px;
	height: 32px;
	background: transparent url(button-max-focus.gif) no-repeat 0 0;
	position:absolute;
	top:10px;
	right:33px;
	cursor:pointer;
	z-index:1000;
}

.etchat_black_title {
color: #ffffff;
float: left;
font-size: 11pt;
font-family: verdana, sans-serif;
font-weight: bold;
margin: 0;
padding: 16px 5px;
}

.etchat_black_content {
padding-top: 5px;
overflow: auto;
color: #FFFFFF;
font-family: verdana, sans-serif;
font-size: 11pt;
background: #000000;
overflow-x: hidden;
}

/* Für Bilderupload von Fizzy Lemon */

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
   border: none; 
  width: 250px;
  height: 20px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-image:
  -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),
  -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
  -webkit-linear-gradient(left, #006633, #00ff66);
  border-radius: 2px; 
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

progress[value]::-moz-progress-bar { 
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left, 
      #006633, 
      #00ff66
    );

  border-radius: 2px; 
  background-size: 35px 20px, 100% 100%, 100% 100%; 
}

#Filesendmain{
 width: 100%;
 height: 100%;
 padding: 1px;
 overflow: hidden;
 background-image: url('https://chathost.de/grazybeats/chat/styles/etchat_bvb/img/bg.jpg');*/
 border-radius: 8px;
 }
 
#fizfooter{
 color: #1f4f1e;
 font-size: x-small;
 }
 
 .img_smiley {
cursor: pointer;
}

.img_smiley:active {
position: relative; 
box-shadow: 0px 0px 50px #FFFFFF, inset 0px 0px 150px #666666;
}

 @media only screen and ( max-width: 533px ) {
#chatinhalt, #splitpane, #onlinelist { height: 450px; }
#onlinelist { background-color: #000000; box-shadow: 0px 0px 0px #7A0000; height: 70vh!important; }
#message { width: 100px; }
#kopf  { margin-bottom: 0px; }
#form { margin-top: 0px; }
#form_right { padding-top: 10px; padding-right: 0px; }
#chatinhalt { margin-left: 0px; }
#video_background { display: none; }

.button_admin { 
width: 30px;
height: 30px;
}
.img_button {
width: 30px;
height: 30px;
}
.img_home {
display: none;
}
.img_color {
display: none;
}
.img_prop {
display: none;
}
.img_filesend {
display: none;
}
.img_wuerfel {
display: none;
}
.img_teamspeak {
display: none;
}
.img_info {
display: none;
}
.img_fullscreen {
display: none;
}
.img_smiley {
width: auto;
height: 50px;
}
.triger-modal {
background-color: tranzparent; 
border: none;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11pt;
}
.modal-wrap {
background-color: #000000;
height: 100%;
left: 0;
opacity: 0;
overflow: auto;
position: fixed;
top: -1px;
visibility: hidden;
width: 100%;
z-index: 10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.modal-wrap.visible {
opacity: 1;
visibility: visible;
}
.modal-wrap .modal-container {
background: #000000;
margin-left: 8px;
margin-right: 10px;
max-width: 100%;
width: 600px;
z-index: 100;
}
.modal-wrap .modal-container .modal-header, .modal-wrap .modal-container .modal-footer {
background: #006699;
border: 1px solid #006699;
float: left;
width: 100%;
}
.modal-wrap .modal-header .modal-title {
color: #ffffff;
float: left;
font-size: 11pt;
font-family:verdana, sans-serif;
margin: 0;
padding: 17px 20px;
}
.modal-wrap .modal-header .close-modal {
background: transparent;
border: 0;
color: #ffffff;
cursor: pointer;
float: right;
padding: 2px 10px;
font-size: 40px;
font-weight: bold;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.modal-wrap .modal-header .close-modal:hover {
opacity: 1;
}
.modal-wrap .modal-content {
border: 1px solid #006699;
float: left;
margin: 0;
padding: 3% 3%;
width: 94%;
}
.modal-wrap .modal-content p:last-child {
margin-bottom: 0;
}
}

@media only screen and ( min-width: 533px ) {
#mobile { display: none; }
.button_userliste { display: none; }
#splitpane, #onlinelist { float: right; }
#chatinhalt, #splitpane, #onlinelist { height: 450px; }
#onlinelist { width: 328px; height: 450px; }
#chatinhalt { margin-left: 0px; }

.img_smiley {
width: auto;
height: 75px;
}
}
@media screen and ( min-width: 1024px ) {
#message { width: 250px; }
.img_home {
display: inline;
}
.img_color {
display: none;
}
.img_prop {
display: none;
}
.img_filesend {
display: none;
}
.img_wuerfel {
display: none;
}
.img_teamspeak {
display: inline;
}
.img_info {
display: inline;
}
.img_fullscreen {
display: inline;
}
.img_smiley {
width: auto;
height: 90px;
}
}

@media screen and ( min-width: 1500px ) {
#message { width: 400px; }
.img_smiley {
width: auto;
height: auto;
}
}


* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 1.00) rgba(0, 0, 0, 1.00); }
* ::-webkit-scrollbar { width: 1px; }
* ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 1.00); }
* ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 1.00); }
* ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 1.00); }