@font-face {
    font-family: Iransans;
    src: url('../fonts/Iransans.eot?#') format('eot'),
    url(../fonts/Iransans.woff) format('woff'),
    url(../fonts/Iransans.ttf) format('truetype')
}

/* ===========================
   Reset
=========================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-tap-highlight-color:transparent;
}

body{
    min-height:100dvh;
    font-family:
            Iransans;
    background:#edf3ff;
    color:#222;
    direction:rtl;
    overflow-x:hidden;
}

/* ===========================
   Variables
=========================== */

:root{

    --primary:#466ec4;
    --primary-hover:#3b5db0;

    --success:#2fb344;
    --danger:#e03131;

    --bg:#edf3ff;

    --white:#ffffff;

    --border:#e7e7e7;

    --text:#222;

    --text-light:#777;

    --shadow:
            0 10px 35px rgba(0,0,0,.08);

    --radius:18px;

}

/* ===========================
   Elements
=========================== */

img{
    display:block;
    max-width:100%;
}

button{
    border:none;
    outline:none;
    cursor:pointer;
    background:none;
    font-family:inherit;
}

input,
textarea{
    font-family:inherit;
    border:none;
    outline:none;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-thumb{
    background:#c8d2ea;
    border-radius:20px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

/* ===========================
   Utility
=========================== */

.hidden{
    display:none !important;
}

.text-center{
    text-align:center;
}

.w-100{
    width:100%;
}

.mt-10{
    margin-top:10px;
}

.mt-20{
    margin-top:20px;
}

.mb-10{
    margin-bottom:10px;
}

.mb-20{
    margin-bottom:20px;
}

.fade{
    animation:fade .25s;
}

.danger-btn,
#logoutBtn{

    background:#e53935;

    color:#fff;

    border:none;

    border-radius:8px;

    padding:8px 12px;

    font-size:13px;

    cursor:pointer;

}

#message{

    width:100%;

    min-height:70px;

    max-height:140px;

    padding:12px 14px;

    resize:none;

    overflow-y:auto;

    border:none;

    outline:none;

    border-radius:22px;

    font-size:15px;

    line-height:22px;

    font-family:inherit;

    box-sizing:border-box;

    background:#fff;

    -webkit-overflow-scrolling:touch;

}

#emojiBtn{
    display: none !important;
}

.edited{

    font-size:11px;

    opacity:.7;

    margin-left:6px;

    font-style:italic;

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ===========================
   Mobile First
=========================== */

.container{

    width:100%;

    max-width:480px;

    margin:auto;

}

/* ===========================
   Desktop
=========================== */

@media(min-width:768px){

    body{

        padding:30px;

    }

}