*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'AGoogle',Tahoma;font-size:14px;margin:0;background:#000 url(/theme/img/bg.jpg) repeat;border-top:solid 5px #1C8199;direction:rtl}
*:focus{outline:none}
a{text-decoration:none;color:#666}
ul{margin:0;padding:0;list-style:none}

.asalchatroom-container{width:770px;height:auto;margin:auto;border:dashed 2px rgba(255,255,255,0.1);padding:8px;display:table}

.asalchatroom-message{
    display:block;
    width:100%;
    height:50px;
    background: linear-gradient(135deg, #0a2a3a, #0a1a25);
    margin-bottom:10px;
    text-align:right;
    color:#fff;
    font-size:16px;
    line-height:50px;
    font-family:AGoogle,Yekan;
    text-shadow:1px 1px rgba(0,0,0,0.12);
    border-radius:8px;
    padding:0 15px;
    box-sizing:border-box
}
.asalchatroom-message i{margin-left:10px;font-size:20px;vertical-align:middle;color:#ffd700}

.asalchatroom-row{
    display:flex;
    width:100%;
    gap:10px;
}

.asalchatroom-image{
    background:url(/theme/img/asalchat.png) no-repeat;
    width:460px;
    height:400px;
    background-size:cover;
    flex-shrink:0;
}

.asalchatroom-left{
    flex:1;
    display:flex;
    flex-direction:column;
}

.asalchatroom-login-box{
    display:block;
    margin-bottom:10px
}
.asalchatroom-login-title{
    color:#fff;
    text-align:center;
    background:linear-gradient(135deg,#0e6b5e,#0a4a41);
    display:block;
    width:100%;
    font-family:AGoogle,Tahoma;
    line-height:48px;
    text-shadow:1px 1px rgba(0,0,0,0.2);
    height:48px;
    border-radius:8px 8px 0 0;
    font-size:15px;
    font-weight:bold;
    letter-spacing:0.5px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    padding:0 15px;
    box-sizing:border-box
}
.asalchatroom-login-title i{margin-left:10px;font-size:18px;color:#ffd700}

.asalchatroom-form-container{
    position:relative;
    margin:0 auto;
    text-align:center;
    padding:20px 15px;
    border-radius:0 0 12px 12px;
    width:100%;
    box-sizing:border-box;
    background:rgba(0,0,0,0.2);
}
.asalchatroom-select{
    background:#b7ecff;
    width:220px;
    height:42px;
    border-radius:8px;
    border:0;
    padding:0 15px;
    font-size:13px;
    text-align:right;
    font-family:tahoma;
    color:#333;
    direction:rtl;
    cursor:pointer;
    margin:8px auto;
    display:block
}
.asalchatroom-input,.asalchatroom-input-pass{
    background:#fff;
    width:220px;
    height:42px;
    border-radius:8px;
    border:0;
    padding:0 15px;
    font-size:13px;
    text-align:right;
    font-family:tahoma;
    color:#333;
    direction:rtl;
    margin:8px auto;
    display:block;
    box-sizing:border-box
}
.asalchatroom-input-pass{background:#fff}
.asalchatroom-btn{
    cursor:pointer;
    background:#06596B radial-gradient(#328fa7,transparent);
    border:solid 1px rgba(255,255,255,0.2);
    box-shadow:inset 0 0 20px rgba(0,0,0,0.2);
    font-family:Yekan,tahoma;
    color:rgba(255,255,255,0.95);
    font-size:15px;
    height:44px;
    border-radius:8px;
    padding:0 30px;
    margin-top:10px;
    transition:all 0.2s ease-in;
    font-weight:bold;
    width:auto;
    min-width:200px
}
.asalchatroom-btn:hover{background:#2aa7b2;transform:scale(1.02)}

.asalchatroom-footer-note{
    text-align:right;
    margin-top:13px;
    padding-top:8px;
    border-top:1px dashed rgba(255,255,255,0.1);
    font-size:12px;
    color:#fff;
    line-height:1.7;
    padding-right:10px;
}
.asalchatroom-footer-note div{
    padding:2px 0;
}
.asalchatroom-sep{
    color:#FF2E2E;
    margin-left:2px;
    font-weight:bold;
}



.asalchatroom-nav{
    width:100%;
    height:auto;
    margin:0 0 10px 0;
    padding:8px 10px;
    background:rgba(255,255,255,0.04);
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.06);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}
.asalchatroom-nav ul{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
}
.asalchatroom-nav ul li{
    display:inline-flex;
    margin:0;
    padding:0 12px;
    border-left:1px dashed rgba(255,255,255,0.12);
    font-size:13px;
    line-height:20px;
}
.asalchatroom-nav ul li:last-child{
    border-left:none;
}
.asalchatroom-nav ul li a{
    color:#fff;
    transition:color 0.2s ease;
    font-size:13px;
    white-space:nowrap;
}
.asalchatroom-nav ul li a:hover{
    color:#EE8C8C;
}
.asalchatroom-online-count{
    color:#fff;
    font-size:13px;
    white-space:nowrap;
    padding:0 5px;
}

.asalchatroom-links a{display:inherit;border-top:solid 6px rgb(6 149 15 / 63%);border-radius:10px;background:rgba(255,255,255,0.06);margin-bottom:4px;padding:0 5px;border-right:solid 4px rgba(255,255,255,0.11);color:#A8A8A8;transition:all 0.2s ease-in}
.asalchatroom-links a:hover{border-right:solid 6px rgba(185,63,63,1)}

.asalchatroom-footer{
    height:38px;
    background:#00496e linear-gradient(178deg,#205163,transparent);
    clear:both;
    width:770px;
    margin:5px auto;
    padding:0 5px;
    margin-top:4px
}
.asalchatroom-copyright{
    text-align:right;
    position:relative;
    right:10px;
    top:3px;
    color:#D3D3D3;
    font-size:15px
}
.clear{clear:both}

@media screen and (max-width: 780px) {
    .asalchatroom-container{
        width:95%;
        margin-top:20px;
        padding:10px;
        flex-direction:column;
    }
    .asalchatroom-row{
        flex-direction:column;
        width:100%;
        gap:0;
    }
    .asalchatroom-image{
        width:100%;
        float:none;
        display:block;
        margin:10px auto;
        background-size:contain;
        background-position:center;
        height:auto;
        aspect-ratio:460/400;
        flex-shrink:1;
        order:2;
    }
    .asalchatroom-left{
        width:100%;
        flex:none;
        order:3;
    }
    .asalchatroom-nav{
        flex-direction:column;
        align-items:center;
        padding:12px 8px;
        gap:10px;
        width:100%;
        margin:10px 0;
    }
    .asalchatroom-nav ul{
        justify-content:center;
        gap:6px;
        width:100%;
    }
    .asalchatroom-nav ul li{
        border-left:none;
        padding:0;
        margin:2px 0;
    }
    .asalchatroom-nav ul li a{
        font-size:12px;
        padding:5px 16px;
        background:rgba(255,255,255,0.10);
        border-radius:25px;
        display:inline-block;
        transition:all 0.2s ease;
    }
    .asalchatroom-nav ul li a:hover{
        background:#EE8C8C;
        color:#000;
    }
    .asalchatroom-online-count{
        font-size:12px;
        text-align:center;
        width:100%;
    }
    .asalchatroom-message{
        width:100%;
        text-align:center;
        height:auto;
        padding:0 15px;
        line-height:50px;
        border-radius:8px
    }
    .asalchatroom-login-box{
        width:100%;
        float:none;
        margin-top:5px;
    }
    .asalchatroom-login-title{
        width:100%;
        border-radius:8px 8px 0 0;
        font-size:13px;
        line-height:44px;
        height:44px;
    }
    .asalchatroom-form-container{
        width:100%;
        padding:20px 10px;
    }
    .asalchatroom-input,.asalchatroom-input-pass,.asalchatroom-select{
        width:90%;
        max-width:280px
    }
    .asalchatroom-btn{
        width:auto;
        min-width:180px;
        font-size:14px;
    }
    .asalchatroom-footer{
        width:95%;
        height:auto;
        text-align:center;
        padding:10px;
    }
    .asalchatroom-copyright{
        float:none;
        text-align:center;
        right:0;
        margin:5px 0;
        font-size:13px;
    }
    hr.asalchatroom-line{
        width:90%;
        margin:20px auto
    }
    .asalchatroom-footer-note{

        padding-right:0;
        font-size:11px;
    }
    .asalchatroom-footer-note div{
        padding:3px 0;
    }
}

@media screen and (max-width: 480px) {
    .asalchatroom-message{font-size:12px;line-height:45px}
    .asalchatroom-login-title{font-size:12px;line-height:40px;height:40px}
    .asalchatroom-input,.asalchatroom-input-pass,.asalchatroom-select{width:95%;font-size:12px}
    .asalchatroom-btn{width:95%;font-size:13px;min-width:auto;padding:0 15px}
    .asalchatroom-nav ul li a{font-size:11px;padding:4px 12px}
    .asalchatroom-copyright{font-size:10px}
    .asalchatroom-footer-note{font-size:12px}
}