.emtech-idle-warning {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;

    box-sizing: border-box;

    width: min(
        390px,
        calc(100vw - 32px)
    );

    padding: 20px;

    border: 1px solid #315062;
    border-radius: 14px;

    color: #edf6fa;

    background:
        linear-gradient(
            145deg,
            #102630,
            #0b1c25
        );

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .32);
}


.emtech-idle-warning[hidden] {
    display: none !important;
}


.emtech-idle-warning__eyebrow {
    display: block;

    margin-bottom: 6px;

    color: #63c8e8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;

    text-transform: uppercase;
}


.emtech-idle-warning__title {
    display: block;

    margin-bottom: 8px;

    color: #f4f8fa;

    font-size: 17px;
    line-height: 1.25;
}


.emtech-idle-warning__text {
    margin: 0;

    color: #9cb2be;

    font-size: 12px;
    line-height: 1.5;
}


.emtech-idle-warning__countdown {
    display: block;

    margin: 12px 0 16px;

    color: #f0c866;

    font-size: 25px;
    font-variant-numeric:
        tabular-nums;
}


.emtech-idle-warning__actions {
    display: flex;
    gap: 9px;

    flex-wrap: wrap;
}


.emtech-idle-warning__actions button {
    min-height: 38px;

    padding: 0 14px;

    border-radius: 9px;

    cursor: pointer;

    font: inherit;
    font-size: 11px;
    font-weight: 800;
}


.emtech-idle-warning__continue {
    border: 1px solid #277ca0;

    color: #e7f6fc;

    background: #126b8f;
}


.emtech-idle-warning__logout {
    border: 1px solid #3a4d58;

    color: #b9c8d0;

    background: transparent;
}


@media (max-width: 600px) {

    .emtech-idle-warning {
        right: 16px;
        bottom: 16px;
    }

}