#colorbox{
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
    /* replacing rgba into hex, might be that clients device can not handle rgba 
    https://pixelmechanics.atlassian.net/browse/NEMA-138?focusedCommentId=66688
    background-color: rgba(0,0,0,0.8) !important;*/
    background-color: #000000CC !important;
    backdrop-filter: blur(10px);
}
#colorbox #modal-content{
    opacity: 1;
    background: transparent;
}

button#cboxClose{
    display: none;
}


.circle-container{
    position: fixed;
}
.circle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50%);
    border-radius: 50%;
}
.no1 #counter{
    display: block;
    color: #fff;
    font-size: calc(var(--h1-size) * 3);
    text-align: center;
    height: 160px;
}
.no1{
    --size: 350px;
    
    width: var(--size);
    height: var(--size);
    z-index: 99999;
    background: rgb(17,161,170);
    display: flex;
    justify-content: center;
    align-items: center;
}
.no2{
    --size: 450px;

    width: var(--size);
    height: var(--size);
    z-index: 9999;
    /*background: rgba(17,161,170,0.6);*/
    background: #11a1aa99;
}
.no3{
    --size: 550px;

    width: var(--size);
    height: var(--size);
    z-index: 9999;
    /*background: rgba(17,161,170,0.5);*/
    background: #11a1aa80;
}
.no4{
    --size: 650px;

    width: var(--size);
    height: var(--size);
    z-index: 99;
    /*background: rgba(17,161,170,0.4);*/
    background: #11a1aa66;
}
.no5{
    --size: 750px;

    width: var(--size);
    height: var(--size);
    z-index: 9;
    /*background: rgba(17,161,170,0.3);*/
    background: #11a1aa4D;
}

#modal-content .btn-group{
    position: fixed;
}
#modal-content .btn-group br{
    display: none;
}
#modal-content .btn{
    display: block;
    font-size: var(--space);
    width: calc( var(--space) * 20);
    line-height: var(--small-btn-height);
    border: 3px solid #fff;
    border-radius: 20px;
    padding-left: 20px;

    position: relative;
}
#modal-content .btn::before{
    content: "";
    display: block;
    width:  var(--small-btn-height);
    height:  var(--small-btn-height);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translate(0, -50%);
}

#colorbox .continue::before{
    background-image: url(../images/icons/icon_timeout_continue.png);
    background-size: 75%;
}
#colorbox .back_to_home::before{
    background-image: url(../images/icons/icon_timeout_home.png);
}
#colorbox a.back_to_home{
    color: #A2165E;
    background-color: #fff;
    margin-top: calc(var(--small-btn-height) * 0.75);
}

/*
Portrait Mode
*/
@media only screen and (orientation:portrait){
    .circle-container{
        top:35%;
        left:50%;
    }

    #modal-content .btn-group{
        position: fixed;
        bottom: 20%;
        left: 50%;
        transform: translate( -50%,0);
    }
}

/*
Landscape Mode
*/
@media only screen and (orientation:landscape){
    .circle-container{
        top:50%;
        left:25%;
    }

    #modal-content .btn-group{
        top: 50%;
        right: 13%;
        transform: translate( 0,-50%);
    }
}