.cronometro-sessao {
    position: fixed;
    top: 42px;
    right: 0;
    border-radius: 10px 0px 0 10px;
    background: #787878;
    color: #fff;
    width: 58px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: end;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.5s ease, height 0.5s ease;
    cursor: default;
    z-index: 100000;
}

.cronometro-sessao .conteudo-text {
    opacity: 0;
    transition: opacity 0.5s ease;
    font-size: 14px;
    margin-right: 5px;
    font-weight: 600;
}

.cronometro-sessao.tempo-acabando {
    background: #58a15c;
    animation: background-loop 1s infinite backwards;
}

.cronometro-sessao.tempo-acabou {
    background: #892525;
}

@-webkit-keyframes background-loop {
    0% {background: #892525;}
    100% {background: #787878;}
}

@-moz-keyframes background-loop {
    0% {background: #892525;}
    100% {background: #787878;}
}

@keyframes background-loop {
    0% {background: #892525;}
    100% {background: #787878;}
}


.cronometro-sessao .conteudo-time {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    margin: 0 3px;
    font-weight: 600;
}

.cronometro-sessao #countdownSessaoIcone {
    position: relative;
    width: 12px;
    height: 12px;
    transform-origin: center center;
}

.cronometro-sessao #countdownSessaoIcone::before {
    position: absolute;
    content: "\f253";
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    font-weight: 900;
}

.cronometro-sessao #countdownSessaoIcone.animacao-giro::before {
    -webkit-animation: hourglass-animation 1.5s infinite linear;
    animation: hourglass-animation 1.5s infinite linear;
    transition: content 0.3s;
}

@-webkit-keyframes hourglass-animation {
    0%, 25% {
        content: "\f251";
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25%, 50% {
        content: "\f252";
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50%, 75% {
        content: "\f253";
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        content: "\f253";
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        content: "\f251";
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@-moz-keyframes hourglass-animation {
    0%, 25% {
        content: "\f251";
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25%, 50% {
        content: "\f252";
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50%, 75% {
        content: "\f253";
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        content: "\f253";
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        content: "\f251";
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes hourglass-animation {
    0%, 25% {
        content: "\f251";
        transform: rotate(0deg);
    }
    25%, 50% {
        content: "\f252";
        transform: rotate(0deg);
    }
    50%, 75% {
        content: "\f253";
        transform: rotate(0deg);
    }
    75% {
        content: "\f253";
        transform: rotate(0deg);
    }
    100% {
        content: "\f251";
        transform: rotate(180deg);
    }
}
