/*  AUTHENTICATION  */

.userNotAuthenticatedMessage {
    background-color: #292c33;
    color: #ffffff;
    font-weight: bold;
    padding: 15px 15px 30px 60px;
    position: fixed;
    top: 107px;
    right: 20px;
    max-width: 100vw;
    max-width: calc(100vw - 20px);
    animation-name: authenticationFlash;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    border: 5px white solid;
    outline: 1px solid #292c33;
    z-index: 1000;
}

.row .userNotAuthenticatedMessage {
    top: 395px;
    right: 50%;
    transform: translateX(50%);
}

.userNotAuthenticatedMessage:before{
    content: "!";
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 4rem;
    
}

.userNotAuthenticatedMessageClose {
    color: #58aaa5;
    cursor: pointer;
    transition: color 0.5s linear;
}

.userNotAuthenticatedMessage a:hover, .userNotAuthenticatedMessageClose:hover {
    color: white;
}

@keyframes authenticationFlash {
    0% {
        border: 5px #292c33 solid;
    }
    80% {
        border: 5px #292c33 solid;
    }
    90% {
        border: 5px #ffffff solid;
    }
    100% {
        border: 5px #292c33 solid;
    }
}

@media screen and (max-width: 768px) {
    .userNotAuthenticatedMessage, .row .userNotAuthenticatedMessage {
        top: 200px;
        right: 50%;
        transform: translateX(50%);
    }
}