@font-face { font-family:"cfont"; src:url("muff.otf"); }
html { margin:0; }
body { height:100vh; height:calc(var(--vh, 1vh) * 100); margin:0; font-family:Arial; font-size:16px; background-size:cover; background-color:#303030; }
#LCMain { background-color: red; z-index:10; }
#Private { background-color: green; z-index:11; }
#Users { background-color: blue; z-index:12; }
#About { background-color: orange; z-index:13; }
.audiv3 { width:100%; padding:4px; text-align:center; }
.code-input { width:40px; height:40px; font-size:16px; text-align:center;
      margin:2px; }
.divhead { position:fixed; width:100%; top:0; left:0; z-index:13; }
.div0L { position:relative; margin: auto; width:268px; top:56px; }
.div0R { position:relative; margin:auto; margin-top:83px; }
.exittab { background-color:transparent; border:none; cursor:pointer; font-weight:bold; font-size:21px; width: 60px; padding-top:5px; }
.tablink { background-color:#555; color:#FFF; border:none; float:left;
  outline:none; cursor:pointer; padding: 10px 4px; font-size:18px;
  width: calc((100vw - 60px) / 4); }
.tablink:hover { background-color: #777; }
.tabcontent { color:white; display:none; padding: 50px 20px; height:calc(100% - 160px); }
.menuhead { position:fixed; left:0; top:0; width:100%; height:48px; z-index:133; background-color:#555555;}
.footer { position:fixed; bottom:0; width:98%; height:100px; background-color:#BDCF3B; color:white; border-radius:20px 20px 0 0; left:50%;
    transform: translate(-50%, 0); }
#dmList { width:100%; display:inline-block; margin:0; padding:0; border-radius:20px; overflow:scroll; height: 95%; }
#msgList { width:100%; display:inline-block; margin:0; padding:0; border-radius:20px; overflow:scroll; height:95%; }
#uList { width:100%; display:inline-block; margin:0; padding:0; border-radius:20px; overflow:scroll; height: 95%; }
#uList li { cursor:pointer; border:1px solid #000000; margin-top: -1px; background-color:rgb(245,245,220); opacity:0.9; padding:12px; color:black; display:block; }
#uList li:hover:not(.header) { background-color: #C7EA46; font-weight: bold; }
#viewprofile { position:absolute; top:53px; left:50%; transform:translate(-50%, 0); padding:2px 5px 1px 5px; width:400px; border:2px solid #ff3503; border-radius:20px; background-color:#ff8567; z-index:88; display:none; height: calc(100vh - 80px); } 
#w1 { display:none; }

/* =========================================================================*/

#onlineusers { width:100%; height:28px; font-size:16px; background-color:beige; border:0; }
#onlineusers option:checked:after { content: attr(title); background: #666; color: #fff; position: absolute; width: 100%; left: 0; border: none; }
#std { display:inline-block; }
#mini { display:none; }
#playcon,#mutecon,#volcon { width:32px;height:32px;text-align:center;color:#CDC4D6; vertical-align:middle; }
#playcon,#mutecon { font-size:18px; cursor:pointer; }
#playcon2,#mutecon2 { width:32px; height:32px; text-align:center; color:#CDC4D6; font-size:18px; cursor:pointer; }
#volume-slider { cursor:pointer; }
#regd { width:80%;position:relative;height:auto;background-color:#B2DD5D;min-height:100%;margin:0 auto;top:90px; }
#regd img { object-fit: contain; }
.active_users { width:100%; padding-top:4px; background-color:beige; display:none; }
.pmdiv0 { position:relative; width:53%; height:100%; float:left; padding-bottom:2px;  }
.pmdiv1 { width:100%; padding:2px; background-color:#e5e513; }
.pmdiv2 { width:100%; padding:2px; height:90%; overflow:auto; margin:10px 0 10px 0; }
.dmdiv0 { position:relative; width:46%; height:100%; float:right; padding-bottom:2px; }
.dmdiv1 { width:100%; padding:2px; background-color:#e5e513; }
.dmdiv2 { width:100%; padding:2px; height:78%; overflow:auto; margin: 10px 0 3px 0; }
.dmdiv3 { width:100%; padding:0 2px 0 2px; overflow:auto; margin:0; }
.audiv1 { width:100%; padding:2px; background-color:#e5e513; }
.audiv2 { width:100%; padding:2px; height:93%; overflow:auto; margin: 10px 0 10px 0; }

.div01 { position:relative; width:70%; height:90%; max-height:90%; float:right; padding:0; border-left:6px solid #e5e513; top:36px; z-index:2; display: inline-block; }
.div02 { position:relative; width:25%; height:90%; max-height:90%; float:left; padding:0; margin-top:36px; z-index:6; display: inline-block; }
.menu { position:fixed; width:98%; padding:0; margin-top:38px; z-index:6; display: inline-block; }

.overlay { height:100%;width:0;position:fixed;z-index:91;top:0;left: 0;background-color: rgba(0,0,0, 0.7);overflow-x: hidden; }
.overlay-content { position:relative;top:25%;width:100%;text-align:center;margin-top: 30px; }

.rw { border:1px solid #000000; margin-top:-1px; background-color:rgb(245,245,220); opacity:0.9; padding:12px; text-decoration:none; font-size:16px; color:black; display:block; word-wrap:break-word; white-space:normal; }
.rx { border:1px solid #000000; margin-top:-1px; background-color:rgb(245,245,220); opacity:0.9; padding:12px; text-decoration:none; font-size:16px; color:black; display:block; word-wrap:break-word; white-space:normal; }
#so1 { display: block; }
#so2 { display: none; }
/* #i1 { border: 1px solid #000000; margin-top: -1px; background-color: #F5F5DC; padding: 12px; text-decoration: none; color: black; display: block; } */
#imsg { width:90%; height:42px; background-color: #2B2A33; color: #f8f8f8; font-size: 16px; border:solid 2px #8BC53F; margin:0; overflow-y:scroll; resize: none; }
.stdbtn { width:90%; font-size:16px; background-color:#E0FFE0; border:solid 4px #000000; }
.stdbtn:hover { background-color:#BDEA46; }
.acell { background-color:#CEED68; text-align:center; line-height:32px; cursor:pointer; border-top: 2px solid #303030; border-bottom: 2px solid #303030; }
.acell:hover { background-color:#E5E513; }
.bcell { background-color:#B2DD5D; text-align:center; line-height:25px; cursor:pointer; }
.bcell:hover { background-color:#C7EA46; }
.tbounce { font-family: 'cfont'; font-size:15px; animation: bounce .4s ease infinite alternate; }
@keyframes bounce { 100% { transform:translateY(-5px); } }
.tips { font-size:12px; }
#btn { width:150px; font-size:16px; background-color:#FCCF00; color:#303030; cursor:pointer; position: fixed; left: 50%; bottom: 20px; margin: 0 auto; }
#btn:hover { background-color:#C7EA46; }
.tinput { height:28px; }
#sendmsg { width:90%; height:50px; font-size:16px; background-color:#E0FFE0; border:solid 2px #000000; margin: 0 2px; }
#sendmsg:hover { background-color:#C7EA46; }
#clear { width:90%; height:50px; font-size:16px; background-color:#E0FFE0; border:solid 2px #000000; margin: 0 5px 0 0; }
#clear:hover { background-color:#C7EA46; }
#m0 { position:absolute; width:100%; height:40px; text-align:center; line-height:40px; display:none; z-index:8; }
#m1 { width:100%; text-align:center; line-height:40px; border-radius:18px; display:none; }
@keyframes fO { 0% { opacity: 1; } 100% { opacity: 0; } }
#OLay { height:100%; width:100%; position:fixed; z-index:99; top:0; left:0; overflow:hidden; background-image:linear-gradient(to right, rgba(64,64,64,1), rgba(255,52,3,0.9)); }
.gspan { width:80%; display:block; margin:0 auto; text-align:justify;
  text-justify:inter-word; font-size:18px; font-family:'cfont'; }
.uid:hover { color: #EC4D37; }
.uid { cursor:pointer; color: #000000; }
.tuid { color: #C70039; }                                  /*  Temp Message  */


@media screen and (max-width: 700px) {
body { background-image: url("bg_31.gif"); }
.tabcontent { padding: 50px 2px; }
.tablink { background-color: transparent; }
.tablink:hover { background-color: transparent; }
.div01 { width: 100%; float:none; height:74%; padding: 0 0 8px 0; border-left:0; top:28px; }
.div02 { width:100%; float:none; max-height:64px; padding: 0 0 0 0; margin-top:98px; }
.div0L { float:none; width:100%; top:38px; }
.div0L1 { width:99%; padding:5px; background-color:#303030; border-radius:10px; }
.div0R { width:100%; margin-left:0; margin-top:93px; }
.div0R img { width:100%; height:auto; }
.audiv1 { padding:2px 0; }
.audiv2 { display:none; }
.active_users { display:inline-block; }
.gspan { width:96%; }
.tbounce { font-size:19px; }
#regd { width:100%; }
#so1 { display: none; }
#so2 { display: block; }
#sendmsg { width:59px; padding:0; }
#clear { width:59px; padding:0; }
#std { display:none; }
#mini { display:inline-block; }
#viewprofile { width:96%; height:90%; }
}