body { background-color:#404040;color:#111;overflow-y:hidden; }
.page { display:none;position:fixed;left:0;top:0;width:100%;height:100%;overflow-y:auto;z-index:+1;
-ms-overflow-style:none;scrollbar-width:none;box-sizing:border-box;background-image:url('../image/back_light.jpg');
background-position:center;background-size:cover; }
.page::-webkit-scrollbar { display:none; }
.page.active { display:block; }
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { 
box-shadow: 0 0 0px 100px white inset;-webkit-box-shadow: 0 0 0px 100px white inset; }

#input_back { position:fixed;left:0;top:0;width:100%;height:100%;display:none;z-index:+9; }
input { position:relative;z-index:+10; }

#chat_header { width:100%;height:75px;background-color:#fff;table-layout:fixed;padding:0px 15px;box-sizing:border-box;
position:absolute;left:0;top:0;z-index:+2; }
#chat_header > div:nth-child(1) { width:55px;padding-right:5px;cursor:pointer;padding-left:10px; }
#chat_header > div:nth-child(1) .avatar { width:55px;height:55px; }
#chat_header > div:nth-child(1) .avatar img { width:100%;height:100%;object-fit:cover;object-position:center;border-radius:100%; }
#chat_header > div:nth-child(2) { line-height:22px; }
#chat_header > div:nth-child(2) > div { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#chat_header > div:nth-child(2) > div:nth-child(1) { font-size:12pt;font-weight:600; }
#chat_header > div:nth-child(2) > div:nth-child(2) { font-size:8pt;color:#888; }
#chat_header > div:nth-child(3) { text-align:left;width:20px; }
#chat_header > div:nth-child(3) img { width:100%; }
#chat_footer { width:100%;height:50px;background-color:#fff;table-layout:fixed;z-index:+2;position:absolute;
left:0;bottom:0;z-index:+2;transition:300ms;-webkit-transition:300ms;-moz-transition:300ms; }
#chat_footer input { width:100%;height:50px;margin:0;outline-style:none;border-style:none;padding:0px 15px;
font-size:10pt;box-sizing:border-box;letter-spacing:-0.4pt;padding-left:90px;background:none; }
#chat_footer i { position:absolute;left:45px;top:10px;width:30px;height:30px;cursor:pointer;background-size:100%;
background-image:url('../image/send.png');display:block;z-index:+20; }
#chat_image > input { display:none; }
#chat_image > i { position:absolute;left:10px;top:10px;width:30px;height:30px;cursor:pointer;background-size:90%;
background-image:url('../image/image.png');display:block;z-index:+20;background-position:center;background-repeat:no-repeat; }
#chat_body { overflow-y:auto;padding:20px 15px 25px;z-index:+1;box-sizing:border-box;-ms-overflow-style:none;
scrollbar-width:none;position:absolute;left:0;top:75px;bottom:50px;width:100%; }
#chat_body::-webkit-scrollbar { display:none; }
.chat { margin:10px 0px; }
.chat.you { direction:ltr; }
.chat > .tbl > div:nth-child(1) { font-size:10pt;direction:rtl;line-height:22px; }
.chat > .tbl > div:nth-child(1) > div { display:inline-block;vertical-align:middle;padding:10px 15px;
border-radius:8px;max-width:180px; }
.chat > .tbl > div:nth-child(1) > div img { width:100%;border-radius:4px; }
.chat.me > .tbl > div:nth-child(1) > div { color:#333;background-color:#dbd3d7; }
.chat.you > .tbl > div:nth-child(1) > div { color:#333;background-color:#fff; }
.chat > .tbl > div:nth-child(2) { line-height:14px;font-size:8pt;text-align:center;color:#888;
direction:rtl;padding:0px 10px; }
.chat > .tbl > div:nth-child(2) span { display:none; }

#login { position:absolute;left:0;top:0;width:100%;height:100%; }
#login > div { text-align:center; }

#login > div > div:nth-child(1) { width:90%;max-width:300px;margin:0px auto 10px;font-weight:600;text-align:right; }
#login > div > div:nth-child(2) { width:90%;max-width:300px;margin:0px auto; }
#login > div > div:nth-child(2) input { width:100%;height:45px;border-radius:10px;border:1px solid #ddd;text-align:center;direction:ltr;
font-size:14pt;letter-spacing:2pt;box-sizing:border-box; }
#login > div > div:nth-child(3) { margin:10px auto 0px;width:90%;max-width:300px;border-radius:10px;padding:15px 0px;text-align:center;
background-color:#226fe3;color:#fff;font-weight:600;cursor:pointer;font-size:11pt; }

@media only screen and (max-width:350px) {

}
@media only screen and (max-height:400px) {
    
}