body{
    margin: 0;
}
.chatroom {
    display: flex;
    animation: 0.5s ease 0s 1 normal forwards running slide-in-courseNotification;
}
.navchat{
    background-color: #f6f7f9;
    padding: 0.7em;
}
.chat{
    background-color:rgb(255 255 255);
    flex: 5;
    

}
@media only screen and (max-width: 536px) {
    #chatshow {
        display: block;
        position: fixed;
        bottom: 7em;
        z-index: 100000;
        width: 100%;
    }
}
@media only screen and (min-width: 537px) {
    #chatshow {
        display: block;
        position: fixed;
        bottom: 7em;
        right: 5em;
        z-index: 100000;
        width: 30em;
    }
}

   

    #chathiden {
        display: none;
    }

    .navchat hr {
        margin: 2em;
    }

    .inputnav input[type="text"] {
        font-size: larger;
        margin: 0.3em 0.1em 0.3em 0.1em;
        padding: 0.5em;
        border-radius: 0.6em;
        border: 0;
    }

        .inputnav input[type="text"]:focus-visible {
            outline: none;
        }

    .inputnav input[type="email"] {
        font-size: larger;
        margin: 0.3em 0.1em 0.3em 0.1em;
        padding: 0.5em;
        border-radius: 0.6em;
        border: 0;
    }

        .inputnav input[type="email"]:focus-visible {
            outline: none;
        }

    .inputnav input[type="number"] {
        font-size: larger;
        margin: 0.3em 0.1em 0.3em 0.1em;
        padding: 0.5em;
        border-radius: 0.6em;
        border: 0;
    }

    .inputnav input[type="submit"] {
        padding: 1em;
        border: 0;
        background-color: #8ABAD3FF;
        font-size: large;
        border-radius: 0.5em;
        margin: 2.3em 0.1em 0.3em 0.1em;
        color: #FCF6F5FF;
    }

        .inputnav input[type="submit"]:hover {
            padding: 1em;
            border: 0;
            background-color: #5c656d52;
            font-size: large;
            border-radius: 0.5em;
            margin: 2.3em 0.1em 0.3em 0.1em;
            cursor: pointer;
        }

    .navinfo {
        display: flex;
        flex-direction: column;
        padding: 1em 3em;
        width: 20em;
    }

    .navchat article {
        color: #8abad3;
        font-weight: bold;
        font-size: x-large;
        padding: 1em;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .navchat article span {
            margin: 2em 0;
        }

        .navchat article a {
            background-color: #8abad3;
            color: white;
            padding: 1em;
            width: 100%;
            border-radius: 0.5em;
            margin: 0.5em 0;
        }

    .inputnav {
        display: flex;
        flex-direction: column;
        direction: rtl;
    }

    a {
        text-decoration: none;
    }

    .navchat .navbar a {
        text-decoration: none;
        flex: auto;
        text-align: center;
        color: #007fff2b;
        display: flex;
        flex-direction: column;
        padding: 1em;
        font-size: x-large;
    }

        .navchat .navbar a:hover {
            color: #007fff;
        }

    navchat .navbar a:hover .fa {
        color: #007fff;
    }

    .navchat .navbar a i {
        padding: 0.5em;
        color: #007fff2b;
        font-size: xx-large;
    }

    .navinfo img {
        animation: mover 2s infinite alternate;
    }

    @keyframes mover {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-20px);
        }
    }

    .navbar {
        display: flex;
    }

.chattop {
    display: flex;
    height: 2em;
    flex-direction: row;
    background-color: #005e54;
    padding: 2em 1em;
    color: #FCF6F5FF;
    align-items: center;
    justify-content: flex-start;
    justify-content: space-between;
    align-items: center;
}

    .close {
        padding: 0.3em;
        border-radius: 1em;
        cursor: pointer;
    }

    .chatroom .chattop img {
        width: 3em;
        border-radius: 10em;
    }

    .chattop p {
        font-size: larger;
        margin: 1em 1em 1em 0;
    }

    .youchat {
        margin: 1em 0.5em 1em 0.5em;
    }

    .chatbody {
        direction: ltr;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        height: 35em;
        background: url(/icon/StaticAdhoosh/Image/backchat.jpg);
    }

        .chatbody .youchat {
            margin: 0.6em 0.5em 1em 0.5em;
            display: flex;
            justify-content: flex-start;
            flex-direction: row-reverse;
        }

        .chatbody img {
            width: 2em;
            border-radius: 10em;
            height: fit-content;
            border: 0.9px solid #878181;
        }

        .chatbody .youchat .chattext {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            margin: 1em;
            background-color: #ffffff;
            padding: 1em;
            border-radius: 14px;
            color: #000021 !important;
        }

        .chatbody .adminchat {
            margin: 1em 0.5em 1em 0.5em;
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
        }

        .chatbody span {
            color: #9ca3a9;
        }

        .chatbody .adminchat .chattext {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            margin: 1em;
            background-color: #fff9ef;
            padding: 1em;
            color: #8abad3;
            border-radius: 14px;
        }

    @media only screen and (max-width: 943px) {
        .chatroom {
            display: flex;
            flex-direction: column-reverse;
            height: auto;
        }

        .navinfo img {
            width: 15em;
        }

        .navinfo {
            display: flex;
            flex-direction: column;
            padding: 5em;
            align-items: center;
        }
    }


    .chatbody .youchat .notification {
        display: flex;
        direction: rtl;
        text-align: justify;
        flex-direction: column;
        align-items: flex-end;
        /*    margin: 1em;
*/ background-color: #e1ffc7;
        padding: 1em;
        color: black;
        font-size: larger;
        height: max-content;
    }

    .chatfooter {
        display: flex;
        flex-direction: row;
        background-color: white;
        flex-wrap: nowrap;
        position: absolute;
        border-bottom: 2px solid #8d8a88;
        width: 100%;
    }

        .chatfooter input[type="text"] {
        }

            .chatfooter input[type="text"]:focus-visible {
                outline: none;
            }

        .chatfooter input[type="submit"] {
            flex: 1;
            background-color: #005e54;
            color: white !important;
            border: 2px;
            font-size: x-large;
            padding: 0.3em;
        }

            .chatfooter input[type="submit"]:hover {
                background-color: white;
                font-size: x-large;
            }

    .submit-btn {
        background-color: #008a7c; /* رنگ پس‌زمینه */
        color: white; /* رنگ متن */
        padding: 10px 20px; /* فاصله داخلی */
        border: none; /* بدون حاشیه */
        cursor: pointer; /* نشانگر موس */
        font-size: 16px; /* اندازه فونت */
        display: flex; /* استفاده از فلکس‌باکس */
        align-items: center; /* تراز عمودی */
    }



    .chatbodyadmin {
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        height: 50em;
        background: url(/Img/More/backchat.jpg);
        width: 50em;
    }

        .chatbodyadmin
        .youchat {
            margin: 0.6em 0.5em 1em 0.5em;
            display: flex;
            justify-content: flex-start;
            flex-direction: row-reverse;
        }

        .chatbodyadmin
        img {
            width: 2em;
            border-radius: 10em;
            height: fit-content;
            border: 0.9px solid #878181;
        }

        .chatbodyadmin
        .youchat .chattext {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 1em;
            background-color: #f6f7f9;
            padding: 1em;
            border-radius: 14px;
            color: #8abad3;
        }

        .chatbodyadmin
        .adminchat {
            margin: 1em 0.5em 1em 0.5em;
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
        }

        .chatbodyadmin
        span {
            color: #9ca3a9;
        }

        .chatbodyadmin
        .adminchat .chattext {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 1em;
            background-color: #fff9ef;
            padding: 1em;
            color: #8abad3;
            border-radius: 14px;
        }

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

    ::-webkit-scrollbar-thumb {
        background: #bccdcb;
    }

        ::-webkit-scrollbar-thumb:hover {
            background: #525942;
        }