*{
  margin:0px;
  padding:0px;
}

body{
  width:100%;
  height:100%;
  font-size:16px;
  font-family:handlee;
  background:#f2f2f2;
  color:#000;
}

ul{
  background:#000;
  color:#cde;
  width:100%;
  height:265px;
  overflow:auto;
  outline:none;
  list-style-type:none;
}

pre{
  white-space:pre-wrap;
}

#appxlist{
  background:#000;
  color:#cde;
  width:100%;
  height:265px;
  overflow:auto;
  outline:none;
  list-style-type:none;
}

ul>li{
  height:54px;
  font-size:16px;
  padding:2px 0px 2px 4px;
  position:relative;
  width:99%;
  overflow:hidden;
  box-sizing:border-box;
  border:2px dotted #000;
  border-radius:10px;
  white-space:pre;
}

li span{
  position:absolute;
  top:40%; left:60px;
}

li.apxItm:focus{
  background-image:linear-gradient(
  rgba(30,144,230, 0.6),
  rgba(30,144,230, 0.4), 
  rgba(30,144,230, 0.3), 
  rgba(30,144,230, 0.2), 
  rgba(30,144,230, 0.3), 
  rgba(30,144,230, 0.4), 
  rgba(30,144,230, 0.6));
  border:2px dotted rgba(176,224,230, 0.5);
  outline:none;
}

.board{
  display:none;
  background:gray;
  width:100%;
  height:100%;
  position:fixed; 
  top:0px; left:0px;
  z-index:11;
  animation:sltr 0.3s;
}

.footer{
  width: 100%;
  height:27px;
  background:#567;
  color:#def;
  font-size:16px;
  position:fixed; 
  bottom:0px; left:0px;
}

.footerbody{
  width:100%;
  height:100%;
  position:relative;
}

.hidden{
  display:none;
}

#loading{
  display:none;
  position:fixed;
  top:0; left:0;
  width:0%;
  height:0%;
  
}

#pan{
  width:98%;
  height:25%;
  box-sizing:border-box;
  background:rgb(42,165,66);
  padding:9px 5px;
  border-radius:5px;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
}

#hover{
	width:94%;
	height:20px;
  background:rgb(2,2,2);
  border-radius:15px;
	position:fixed;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
}

#filler{
  width:1%;
	height:20px;
  background:linear-gradient(to right, #ffc155, #ffb077, #ffa167, #ff9148, #ff8246, #ff7345, tomato, orangered, red, crimson, firebrick, brown, darkred, maroon);
  border-radius:15px;
  font-size:15px;
  line-height:22px;
}

.left{
  position:absolute;
  top:51%; left:3px;
  transform:translate(0, -50%);
}

.center{
  position:absolute;
  top:51%; left:50%;
  transform:translate(-50%, -50%);
  color:white;
}

.right{
  position:absolute;
  top:51%; right:3px;
  transform:translate(0, -50%);
}

h1{
  text-align:center;
}

h2{
  background:darkcyan;
  color:#eee;
  text-align:center;
}

h3{
  width:100%;
  text-align:center;
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
}

h4{
  text-decoration:underline silver wavy 2px;
  font-size:20px;
}

hr{
  width:200px;
  margin:10px auto;
}

.blurx{
  display:none;
  width:0%;
  height:0%;
  position:fixed;
  top:0%;
  left:0%;
  z-index:50;
  background: none;
}

#no_internet{
  width:50px;
  height:50px;
  border:0px solid white;
  border-radius:0px;
  
  font-size:18px;
  padding:5px 0px;
  font-weight:bold;
  text-align:center;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

#login,#snd_reset{
  width:90%;
  height:26px;
  box-sizing:content-box;
  background:#4CAF50;
  color:white;
  text-align:center;
  padding:5px 8px;
  border:none;
  border-radius:8px;
  font-size:20px;
  margin-bottom:8px;
  box-shadow:3px 3px 10px #666;
}


#login:focus,#snd_reset:focus{
  background:#024d05;
}

#help{
  width:100%;
  height:100%;
  color:#123;
  background:#fff;
  overflow:auto;
  font-family:'handlee';
}

#help p{
  font-size:18px;
  padding:3px 0px 0px 5px;
  word-spacing:2px;
}

#login_board,#signup_board,#forgot_board{
  display:none;
  box-sizing:border-box;
  width: 100%;
  height:100%;
  background:#f2f2f2;
  position:fixed;
  top:0px;left:0px;
  text-align:center;
  overflow:scroll;
  z-index:1;
}

#signup_board,#forgot_board{
  display:none;
  animation:sltr 0.3s;
  z-index:2;
}

@keyframes sltr{
	from{left:-250px;} to{left:0px;}
}

@keyframes srtl{
	from{left:0px;} to{left:-250px;}
}

input{
  width:90%;
  font-size:16px;
  padding:7px;
  margin-bottom:7px;
  border-radius:10px;
  border:3px solid #def;
  outline:none;
}

input:focus{
  border:3px solid darkcyan;
}

button{
  outline:none;
  padding-inline:0px;
  padding-block:0px;
}

#signup_btn,#create_acc,#req_pass,#srx_btn{
  width: 90%;
  background:#0eaabb;
  text-align:center;
  padding:5px;
  border:none;
  border-radius:8px;
  font-size:19px;
  height:26px;
  box-sizing:content-box;
  color:white;
  box-shadow:3px 3px 10px #666;
}

#signup_btn:focus,#create_acc:focus,#req_pass:focus{
  background:#074b53;
}

#srx_btn:focus{
  box-sizing:border-box;
  height:36px;
  width:90%;
  outline:3px solid darkcyan;
  border:2px solid #def;
}

#forgot_pass{
  width:90%;
  border:none;
  border-radius:8px;
  text-align:center;
  color:#c70e6b;
  font-size:18px;
  padding:4px;
  background:#f2f2f2;
}

#forgot_pass:focus{
  background:#9f0808;
  color:#fff;
}

#invalid_auth,#invalid_auth2,#invalid_auth3,#err_stt{
  display:none;
  color:#970b0b;
  background:#f1c1c9;
  font-size:18px;
  padding:2px 3px;
  margin-bottom:7px;
}

#pswd_hint,#pswd_hint2{
  width:220px;
  font-size:14px;
  color:#7b8081;
  visibility:hidden;
}

#upld_img{
  width:190px;
  height:40px;
  font-size:16px;
  margin-bottom:7px;
  border:3px solid #def;
  background:#fff;
  border-radius:8px;
  color:#123;
  overflow:hidden;
  outline:none;
}

#upld_img:focus{
  background:darkcyan;
  color:#fff;
}

#upload_pic{
  display:none;
  box-sizing:border-box;
  width: 100%;
  height:293px;
  background:#f2f2f2;
  position:fixed;
  top:0px;left:0px;
  text-align:center;
  overflow:hidden;
  animation:sltr 0.3s;
  z-index:15;
}

#upld_state{
  display:none;
  font-size:18px;
  font-weight:bold;
}

.colorWave{
  
}

.colorWave span{
  animation:colorave 1.5s infinite;
  display:inline-block;
}

.colorWave span:nth-child(1){ animation-delay:0s; }
.colorWave span:nth-child(2){ animation-delay:0.1s; }
.colorWave span:nth-child(3){ animation-delay:0.2s; }
.colorWave span:nth-child(4){ animation-delay:0.3s; }
.colorWave span:nth-child(5){ animation-delay:0.4s; }
.colorWave span:nth-child(6){ animation-delay:0.5s; }
.colorWave span:nth-child(7){ animation-delay:0.6s; }

@keyframes colorave{
  0%  { color:#ffffff; }
  25% { color:#23ec59; }
  50% { color:#ee6767; }
  75% { color:#e8cb56; }
  100%{ color:#ffffff; }
}

#verify_box,#congr_box,#reverify_box,#reset_box{
  display:none;
  width:90%;
  height:100%;
  padding:3px;
  position:fixed;
  top:5px;left:12px;
  z-index:99;
  text-align:center;
  box-shadow:0 0 10px #4caf50;
  border-radius:8px;
  background:#e6f9f0;
  color:#2e7d32;
  animation:sltr 0.3s;
}

#reset_box{
  display:block;
  top:110px;
}

#verify_box{
  top:120px;
}

#reverify_box{
  color:#c70e6b;
  width:224px;
  left:5px;
  top:50%;
  transform:translate(0,-50%);
}

#buddies,#chat_board,#srx_buddies{
  display:none;
  box-sizing:border-box;
  width: 100%;
  height:90%;
  background:#f2f2f2;
  position:fixed;
  top:0px;left:0px;
  animation:sltr 0.3s;
  z-index:1;
}

#chat_board{
  display:none;
  height:90%;
  background:#a5bcc7;
  z-index:15;
}

#srx_buddies{
  z-index:12;
}

#messages_board{
  width:95%;
  height:90%;
  padding:3px 5px 2px 5px;
  display:flex;
  flex-direction:column;
  overflow:auto;
}
.message{
  width:70%;
  margin-bottom:10px;
  padding:3px;
  padding-bottom:0;
  border-radius:5px;
  font-size:16px;
  border: 1px solid black;
  box-shadow:0 0 12px #555;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.sent{
  align-self:flex-end;
  background-color:#ffffff;
  border-top-right-radius:0;
}
.received{
  align-self:flex-start;
  background-color:#dcf8c6;
  border-top-left-radius:0;
}
.timestamp{
  font-size:12px;
  color:gray;
  text-align:right;
}

#buddies_list,#srx_buddies_list{
  box-sizing:border-box;
  width: 100%;
  height:100%;
  position:fixed;
  top:32px;left:0px;
  overflow:scroll;
}

#buddies_opt{
  display:none;
  width:150px;
  height:180px;
  overflow:auto;
  position:fixed;
  bottom:28px;
  left:1px;
  z-index:234;
  background:#fff;
  color:#123;
  border:3px solid darkgreen;
  border-radius:10px;
  padding:2px;
  animation:btt 0.3s;
}

#log_opt{
  display:none;
  width:115px;
  height:auto;
  position:fixed;
  bottom:32px;
  left:2px;
  z-index:234;
  background:#fff;
  color:#123;
  border:3px solid darkgreen;
  border-radius:10px;
  padding:2px;
  text-align:left;
  animation:btt 0.3s;
}

.bud_opt,.logopt{
  border-bottom:1px dashed #123;
  padding:7px 0 7px 7px;
  outline:none;
}

.bud_opt:focus,.logopt:focus{
  background:dodgerblue;
  border-radius:8px;
  border-color:dodgerblue;
  color:#fff
}

.buddy,#receiver_guy{
  height:50px;
  padding:1px 0px;
  position:relative;
  outline:none;
}

#receiver_guy{
  height:43px;
  background:darkcyan;
  color:#fff;
}

.buddy:focus{
  background:darkcyan;
  color:#fff;
}

.buddy img{
  width:50px;
  position:relative;
}

#receiver_guy img{
  width:42px;
  position:relative;
}

.pro_pic{
  position:absolute;
  top:0px;
  left:5px;
  width:48px;
  height:48px;
  border-radius: 50%;
  overflow: hidden;
  text-align:center;
  border:1px solid darkcyan;
}

.pro_picb{
  position:absolute;
  top:1px;
  left:3px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  text-align:center;
}

.pro_name{
  position:absolute;
  top:6px;left:60px;
  white-space:pre;
}

.got_msg{
  display:none;
  position:absolute;
  right:17px;
  top:15px;
  width:12px;
  height:12px;
  background:#09d909;
  border-radius:50%;
  border:1px solid #fff;
}

#msg_notify{
  display:none;
  width:45px;
  height:45px;
  background:#fff;
  position:fixed;
  bottom:30px;
  right:4px;
  border-radius:50%;
  animation:rtl 0.6s;
  z-index:9999;
  overflow: hidden;
  text-align:center;
  border: 2px solid #075cc2;
}

.Active,.Offline{
  color:darkcyan;
  font-size:12px;
  background:#f2f2f2;
  border-radius:6px;
  padding:0 2px;
  font-weight:bold;
}

.Offline{
  color:#333;
  font-weight:normal;
}

#msgr{
  height:40px;
  position:relative;
  top:0;
  transition:top 0.1s ease;
  background:#fff;
}

#msgr_text{
  box-sizing:border-box;
  height:40px;
  width:200px;
  border:none;
  margin-left:35px;
  outline:none;
  font-size:16px;
  padding:5px;
  font-family:'handlee';
}

#guy_state{
  font-size:12px;
  color:#d0d5d5;
  line-height:18px;
}

span.typing{
  animation:wave 0.9s infinite ease-in-out;
  display:inline-block;
  position:relative;
}

span.typing:nth-child(1){ animation-delay:0s; }
span.typing:nth-child(2){ animation-delay:0.1s; }
span.typing:nth-child(3){ animation-delay:0.2s; }

@keyframes wave{
  0%{top:0px}
  50%{top:-4px}
  100%{top:0px}
}

.seen,.unseen{
  display:inline-block;
  margin-left:3px;
  width:12px;
  height:12px;
  font-weight:bold;
  text-align:center;
}

.seen{
  background:#0081ff;
  border-radius:50%;
  color:#fff;
  padding:1px;
  line-height:16px;
}

#contact_page{
  background:#fff;
  height:255px;
  padding:5px;
}

#prog_bar{

}

#my_profile,#cng_pass{
  text-align:center;
  background:#124;
  color:#fff;
  height:265px;
  padding-top:12px;
  animation:sltr 0.3s;
}

#my_profile{padding:0;}

#my_profile>div{
  padding:2px;
}

#cng_pass{
  padding-top:2px;
  background:#fff;
  color:#123;
  overflow:auto;
}

#srx_usr{
  box-sizing:border-box;
  width: 100%;
  height:265px;
  background:#def;
  color:#123;
  text-align:center;
}

#usr_name{
  border:3px solid darkseagreen;
  box-shadow:3px 3px 10px #6f99c3;
}

#srx_res{
  color:#eee;
  margin-top:10px;
  background:#950d51;
}

#see_more_btn{
  width:130px;
  background:dodgerblue;
  color:#fff;
  border: 2px solid #f2f2f2;
  border-radius:6px;
  margin: 6px auto 8px auto;
  text-align:center;
  height: 31px;
  line-height: 34px;
}

#see_more_btn:focus{
  outline:3px solid darkcyan;
}

#veri_prompt{
  display:none;
  position:fixed;
  bottom:42px;
  left:5px;
  border:1px solid #c3759c;
  width:180px;
  height:auto;
  padding:5px;
  border-radius:10px 0 10px 0;
  z-index:5;
  background:#dfb3c9;
  color:#9b0931;
  font-style:italic;
  font-size:18px;
  animation:sltr 0.3s;
}

#filds {
  box-sizing:border-box;
  width:  100%;
  height: 55px;
  position: fixed;
  bottom: 28px;
  left: 0px;
  z-index:-3;
}

#filds>.view_ad_button{
  position:fixed;
  right:0;
  bottom:0;
  width: 62px;
  height:27px;
  background: #820489;
  color:#fff;
  font-size: 18px;
  line-height: 29px;
  padding: 0 7px;
  border-radius: 12px;
}

#filds>.view_ad_img{
  display:none;
  width: 0px;
  height: 0px;
  position:fixed;
  right:2px;
  bottom:5px;
  
}

#filds>.container {
  box-sizing: border-box;
  width:  100%;
  height: inherit;
  position: relative;
}

#ad-container {
  box-sizing: border-box;
  width: 0px;
  height: 0px;
  text-align:center;
  position: absolute;
  left: 5px;
  top: 0px;
}

.blankc{
  width: 100%;
  height:320px;
  position:fixed;
  top:0;left:0;
  z-index:-1;
  background:#f2f2f2;
}

#callee_pic,#caller_pic{
  margin:7px auto 0 auto;
  width:120px;
  height:120px;
  border-radius: 50%;
  overflow: hidden;
  text-align:center;
}

#callee_name,#caller_name{
  text-align:center;
  font-size:25px;
  white-space: pre;
}

#callee_state,#caller_state{
  text-align:center;
  font-size: 20px;
}

#caller_state{
  margin-top:25px;
}

.call_accept,.call_decline{
  text-align:right;
  position: fixed;
  bottom: 3px;
  right: 3px;
  height: 36px;
}

.call_accept{
  right:200px;
}

#callee_state span{
  animation:dott 1.5s infinite ease-in-out;
  display:inline-block;
  font-size:50px;
}

#callee_state span:nth-child(1){ animation-delay:0s; }
#callee_state span:nth-child(2){ animation-delay:0.2s; }
#callee_state span:nth-child(3){ animation-delay:0.4s; }

#update_notice{
  height:261px;
  overflow:scroll;
  background:#fff;
  color:#111;
  padding:5px;
  width: 100%;
  box-sizing:border-box;
}


@keyframes dott{
  0%{opacity:0;}
  50%{opacity:1;}
  100%{opacity:0;}
}

@keyframes rtl{
  from{right:-60px;}
  to{right:4px;}
}

@keyframes btt{
  from{bottom:-150px;left:-120px;}
  to{bottom:32px;left:0px;}
}

@keyframes ttb{
  from{bottom:32px;left:0px;}
  to{bottom:-180px;left:-150px;}
}

@keyframes abtt{
  from{top:320px;left: 100%;}
  to{top:0px;left:0px;}
}

@keyframes attb{
  from{top:0px;left:0px;}
  to{top:340px;left:260px;}
}

@keyframes ltr{
  from{right:4px;}
  to{right:-60px;}
}