@font-face {
	font-family: yekanBakh;
	font-style: normal;
	font-weight: bold;
	src: url('fonts/YekanBakh-Bold.ttf') format('truetype');
}

@font-face {
	font-family: yekanBakh;
	font-style: normal;
	font-weight: 300;
	src: url('fonts/YekanBakh-Light.ttf') format('truetype');

}

@font-face {
	font-family: yekanBakh;
	font-style: normal;
	font-weight: normal;
	src: url('fonts/YekanBakh-Regular.ttf') format('truetype');

}

@font-face {
	font-family: yekanBakh;
	font-style: normal;
	font-weight: 500;
	src: url('fonts/YekanBakh-Medium.ttf') format('truetype');

}

@font-face {
	font-family: yekanBakh;
	font-style: normal;
	font-weight: 900;
	src: url('fonts/YekanBakh-Heavy.ttf') format('truetype');
}

body {
background:url(bg.png);
	font-family: yekanBakh;

}
#chatarea {

border-radius:10px;
 margin:2px auto;
 width:100%;
 position:relative;
 font-family:yekanBakh, sans-serif;
 font-size:15px;
 text-align:left;
}
#chatarea #chlogged {
 margin:3px 18%;
 border:1px solid red;
 padding:2px 1px;
 text-align:center;
 font-style:italic;
}
#chatwindow {
 margin:0;
 padding:0;
}
#chatrooms {
 margin:3px auto 0px 2px;
 width:78%;
}
#chatrooms .chatroom {
 margin-right:3px;
 margin-left:4px;
 border-top:1px solid blue;
 border-right:1px solid blue;
 border-left:1px solid blue;
 background-color:#dadae8;
 cursor:pointer;
 padding:2px 3px 2px 4px;
 font-weight:700;
 -moz-border-top-left-radius:0.6em;
 -webkit-border-top-left-radius:0.6em;
 -khtml-border-top-left-radius:0.6em;
 border-top-left-radius:0.6em;
 -moz-border-top-right-radius:0.6em;
 -webkit-border-top-right-radius:0.6em;
 -khtml-border-top-right-radius:0.6em;
 border-top-right-radius:0.6em;
}
#chatrooms .chatroom:hover {
 background:#fdfdfe;
 text-decoration:underline;
}
#chatrooms #s_room {
 background-color:#fefe89;
 color:#0001d8;
 box-shadow:0.1em 0.1em 0.15em #a0a1da inset;
 -webkit-box-shadow:0.1em 0.1em 0.15em #a0a1da;    /* Safari and Chrome */
}
#chatusersli span, #chats q { display:none; }
#chatusers {
 top:3px;
 left:2px;
 width:10em;
 height:200px;
 position:absolute;
 background-color:#f9fbef;
 overflow:auto;
 font-size:13px;
 padding:2px 3px;
 box-shadow:0.15em 0.15em 0.22em #a0a1d8;
 -webkit-box-shadow:0.15em 0.15em 0.22em #a0a1d8;    /* Safari and Chrome */
 -moz-border-radius:0.58em;
 -webkit-border-radius:0.58em;
 -khtml-border-radius:0.58em;
 border-radius:0.58em;
 display:none;
}
#chatusers #onl {
 width:100%;
 margin:2px auto;
 font-weight:bold;
 text-decoration:underline;
 font-style:italic;
 text-align:center;
}
#chatusers ul {
 margin:0px auto 0px 15px;
 padding:0px;
}
#chats {
height: 75vh;
  overflow: auto;
  padding: 2px;
  padding-bottom:5vh;
}
body{  background: rgb(223, 225, 230);
}
body:before {
    content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url("new-pattern-6.png");
  background-size: 300px;
  position: absolute;
  opacity: 0.1;
  filter: invert(0);
    
}

#chats p {
}
#chats p:nth-child(odd) {
 background-color:#f0f1fe;
 background: -moz-linear-gradient(top, #eeeefe, #fbfbfe);          /* for Firefox */
 /* for Safari, Chrome */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #eeeefe), color-stop(1, #fbfbfe));

 background-image: -o-linear-gradient(top, #eeeefe, #fbfbfe);          /* Opera 11.1+ */
 background: linear-gradient(top, #eeeefe, #fbfbfe);          /* W3C Markup */
}
#chats p:last-child {
 margin:2px auto 8px 1px;
 background:#fefed0;
  border:2px solid #abcdef;
  border-bottom:none;
 -moz-border-radius:0.7em;
 -webkit-border-radius:0.7em;
 -khtml-border-radius:0.em;
 border-radius:0.7em;
}
#chats .chatusr {
 font-weight:bold;
}
#chats p em {
 margin:0;
 font-size:10px;
}
#chats .chat {
 display:block;
 margin:0px auto 0px 29px;
 padding:0px 1px;
 line-height:97%;
 text-indent:-8px;
}
#chats .sb {
 font-weight:800;
}
#chats .su {
 text-decoration:underline;
}
#chats .si {
 font-style:italic;
}

#playbeep {
 margin:0 auto 0 18px;
 border:none;
 cursor:pointer;
}

/* Chat Form */

#form_chat {
  position: absolute;
  left: 0;
  bottom: -12vh;
  background: #fff;
  width: 100%;}
#form_chat #chatex img{
 margin:auto 2px;
 border:none;
 cursor:pointer;
}
#name_code, #chatex {
 text-align:center;
}

.chattype{
      padding: .5em 1em;

}
#chatadd {
  position: relative;
  display: none;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fcfcfc;
  box-sizing: border-box;
  margin: 0;
  left: 0;}
#code_ch {
font-weight:bold;
font-size:16px;
padding:2px;
color:blue;
}

.chattype .btn{
  width: 10%;
  float: right;
 margin-left: 3%;    
}
#adchat {
 width:67%;
 height:20px;
 background-color:#d8fed9;
color:#0101de;
font-size:0.9em;
padding:1px 2px 0 8px;
 -moz-border-top-left-radius:0.9em;
 -webkit-border-top-left-radius:0.9em;
 -khtml-border-top-left-radius:0.9em;
 border-top-left-radius:0.9em;
 -moz-border-bottom-left-radius:0.9em;
 -webkit-border-bottom-left-radius:0.9em;
 -khtml-border-bottom-left-radius:0.9em;
 border-bottom-left-radius:0.9em;
   width: 75%;
  height: 20px;
  background-color: #eee;
  color: #0101de;
  font-size: 0.9em;
  padding: 1px 2px 0 8px;
  -moz-border-top-left-radius: 0.9em;
  -webkit-border-top-left-radius: 0.9em;
  -khtml-border-top-left-radius: 0.9em;
  border-top-left-radius: 0.9em;
  -moz-border-bottom-left-radius: 0.9em;
  -webkit-border-bottom-left-radius: 0.9em;
  -khtml-border-bottom-left-radius: 0.9em;
  border-bottom-left-radius: 0.9em;
  border: 1px solid #eee;
  padding: .5em 1em;
  border-radius: 0;
  text-align: right; 
}
#adchat:focus { background-color:#fefed8; }
#enterchat {
margin:3px auto;
cursor:pointer;
text-decoration:underline;
font-style:italic;
font-size:17px;
color:#0101da;
}
#logoutchat {
    
    font-size: 1em;
  position: fixed;
  bottom: 6em;
  right: 0;
  background: #fff;
  color: #333;
  border-radius: 1em;
  padding: 0 1em;
  cursor: pointer;
}
#logoutchat:hover, #enterchat:hover {
      background: #ccc;

text-decoration:none;
font-style:none;
color:green;
}
#chatadd #mp {
margin:2px auto;
font-size:7px;
color:#bcdeff;
}

.chatbox {
margin:.25em;
padding:.5em 1em;
  display: block;
  width:50%;
}
#chatex {
    width: 100%;
  overflow: hidden;
}
.chatbox.me {
    direction:rtl;
      border-bottom-left-radius: 0;
  -webkit-user-select: text;
  user-select: text;
  border-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
  position: relative;
  direction:rtl;
  text-align:right;
   border-top-left-radius:0.7em;
 border-bottom-right-radius:1em;
 background-color:#DCFAF5;
 /* for Safari, Chrome */
   float:right;


}


.chatbox em {
    font-size:12px;
    text-align:left;
float:left;
  direction:ltr;

}





.chatbox.nome {
      border-bottom-left-radius: 0;
  -webkit-user-select: text;
  user-select: text;
  border-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
  position: relative;
  text-align:left;
   background-color:#F4F5F7;
  float:left;


}

.chatusr{
    display:block;

}
.chatbox.nome .chatusr{
color: #F257A8
}

.chat{
      line-height:1.25 !important;
      font-size:.9em;

}

#onlinebtn {
    background: #fff;
  position: absolute;
  padding: 0 1em;
  border-radius: 1em;
  left: 0;
  top: 0;
  cursor:pointer;
}


#onlinebtnclose {
        background: #fff;
  border-radius: 1em;
  cursor:pointer;
  width:2em;
  margin:0 auto;

}

#onlinebtn:hover {
    background: #ccc;
    
}

#playchatbeep {
  position: absolute;
  right: 1.5em;
  top: 0;
 }