*{
    
    --palletColor1 : #282B57;
    --palletColor2 : #443482;
    --palletColor3 : #703E9C;
    --palletColor4 : #C2469D;
    --palletColor5 : #E35F8D;
    --palletColor6 : #EB7A7E;
    --palletColor7 : #F59182;
    --palletColor8 : #FAB88E;
    
    --lavenderShade1 : #777696;
    --lavenderShade2 : #695887;
    
    --sectionTitleColor: #d0bcff;
}

#chat-sidebar
{
    height: max-content;
    background-color: var(--palletColor1);
    
    justify-content: flex-end;
    align-items: center;
    
    position: fixed;
    bottom: 15px;
    right: 0;
    
    padding: 5px;
    border-radius: 1px;
    
    font-size: 25px;
    
    z-index: 15;
}

.chat-container
{
    height: 900px;
    /*width: 100%;*/
    width: 360px;
    
    background-color: var(--palletColor1);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    position: fixed;
    top: 0;
    right: -200%;
    
    overflow-y:auto;
    
    z-index: 10;
    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
    
    transition: 0.75s ease-out;
}

.open-sidebar-button
{
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: var(--sectionTitleColor);
    
    text-align: center;
}

.close-sidebar-button
{
    display: flex;
    justify-content: start;
}

#chat-sidebar svg
{
    fill: var(--sectionTitleColor);
    padding: 15px;
}

#sidebar-active
{
    display: none;
}

#sidebar-active:checked ~ .chat-container
{
    padding: 15px;
    right: 0;
}

#sidebar-active:checked ~ #chat-sidebar
{
    right: 0px;
}