:root{
    --background: linear-gradient(to top, var(--header-bg1), 80%, var(--header-bg2));
    --shadow-chatbar: 0 7px 30px 4px #3948ab57;
    --chatbar-color:#1d70b9;
    --chatscrollbar: #249dbb;    
}
body.dark-mode{
    --background: linear-gradient(to top, var(--header-bg1), 80%, var(--header-bg2));
    --shadow-chatbar: 0 7px 30px 4px #1d4b9657;
    --chatbar-color:#1d70b9;
    --chatscrollbar: #5f5f5f;
}
.pagecenter *{
    box-sizing: border-box;
}
.cantainer{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}
.header-cantainer{
    width: 100%;
    grid-row: 1;
    grid-column: 1;
    flex: 0 0 auto;
}
.pagecenter{
    flex: 1 1 auto;
    position: relative;
}
.logo-cantainer{}


/* چت بار */

.chatbar-cantainer{
    min-height: 115px;
    width: 70%;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

#chatbarbox{
    min-height: 100%;
    width: 100%;
    border-radius: 26px;
    background: var(--background);
    border: 2px solid var(--br);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.chatbarbx{
    min-height: 70px;
    padding: 10px;
    display: flex;
    align-items: center;
    width: 95%;
}

#chatbar{
    min-height: 100%;
    cursor: text;
    width: 100%;
    
}

#chatspan{
    color: #888;
    font-size: 21px;
    font-weight: 500;
}

.chatoptions{
    width: 100%;
    height: 40px;
}

@media (min-width: 700px) {
    #chatinput{
        font-size: larger;
    }
    .chatbar-cantainer{
        width: 30%;
    }
}