/***********************Start Server Message CSS***********************/
#subHeader{
    display: flex;
    position: sticky;
    top:0rem;
    left:1rem;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.5rem;
    z-index: 90;
    padding:1rem;
    width:100%;
    background-color: var(--backgroundGradient);
    border-bottom:1px solid #0004;
}

#subHeader #languageLabel{
    color: var(--primaryColour);
    font-size: 0.8rem;
    margin: 0.4rem 0.5rem 0.5rem;
    cursor: pointer;
}

#subHeader i{
    cursor: pointer;
    transform-origin: 50% 0%;
    transform: rotate(0deg);
    color:var(--underline);
}

#subHeader i[data-state=notAnimating]{
    animation: none;
}

#subHeader i[data-state=animating]{
    animation: bell-shake 1s ease-in-out 0s 1 forwards;
}

@keyframes bell-shake{
    0%{
        transform: rotate(0deg);
    }
    20%{
        transform: rotate(-20deg);
    }
    40%{
        transform: rotate(20deg);
    }
    60%{
        transform: rotate(-10deg);
    }
    80%{
        transform: rotate(10deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

#subHeader #bellHolder{
    position:relative;
}

#subHeader #notificationNumber{
    position: absolute;
    top:-0.2rem;
    left:0rem;
    font-size: 0.7rem;
    font-weight: 900;
    width:15px;
    height:15px;
    z-index: 1;
    text-align: center;
    cursor: pointer;
    pointer-events: none;
    display: none;
}

#subHeader #notificationNumber::before{
    content:'';
    position: absolute;
    top:-1px;
    left:-1px;
    right:-1px;
    bottom:-1px;
    background-color: var(--backgroundColour);
    border:1px solid var(--primaryColour);
    z-index: -1;
    border-radius: 50%;
}

#bellHolder[data-state=hasNotifications] #bell{
    color:#888;
}

#bellHolder[data-state=hasNotifications] #notificationNumber{
    display: block;
}

#bellHolder[data-state=noNotifications] #bell{
    color:#c7c7c7;
}

#bellHolder[data-state=noNotifications] #notificationNumber{
    display: none;
}

#clientMessages{
    background-image: linear-gradient(40deg, var(--gradientMin) 0%, var(--gradientMax) 100%);
    padding:1rem;
    width:200px;
    position:absolute;
    top:3rem;
    left:4rem;
    transform:translateX(-150%);
    transition:transform 0.5s;
    border-radius: 8px;
    box-shadow: 5px 5px 3px var(--underline);
    z-index: 98;
}

#clientMessages[data-state=open]{
    transform: translateX(0);
}

#messageContainer{
    max-height: 15vh;
    overflow-y: auto;
    padding-right:0.5rem;
    margin-bottom:0.5rem;
}

#messageContainer p{
    font-size:0.8rem;
    font-weight:400;
    letter-spacing: normal;
}

#subHeader :last-child{
    margin-left:auto;
}

#subHeader img{
    width:55px;
    display: none;
}

@media only screen and (max-width:767px){
    #subHeader{
        padding:0.5rem;
    }
    #messageContainer p{
        text-align: left;
    }
    #subHeader img{
        display: block;
    }
}