@import "../perfect-scrollbar.css";

@font-face {
    font-family: 'Montserrat-Light';
    src: url(../font/Montserrat-Light.otf);
    src: local('Montserrat-Light'), url(../font/Montserrat-Light.otf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url(../font/Montserrat-Medium.otf);
    src: local('Montserrat-Light'), url(../font/Montserrat-Light.otf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url(../font/Montserrat-Bold.otf);
    src: local('Montserrat-Light'), url(../font/Montserrat-Light.otf) format('truetype');
}

.first-bg {
    position: absolute;
    height: 100%;
    width: 100%;
    background: -webkit-linear-gradient(left top,black,maroon, black);
    background: -o-linear-gradient(bottom right, black, maroon, black);
    background: -moz-linear-gradient(bottom right, black, maroon, black);
    background: linear-gradient(to bottom right, black, maroon, black);
    font-family: Impact;
}

.second-bg {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    filter: alpha(opacity=60);
    background: -webkit-linear-gradient(black 1%, Indigo 55%, black 90%);
    background: -o-linear-gradient(black 1%, Indigo 55%, black 90%);
    background: -moz-linear-gradient(black 1%, Indigo 55%, black 90%);
    background: linear-gradient(black 1%, Indigo 55%, black 90%);
}

.timeout-text-1 {
    height: 8%;
    width: 100%;
    color: rgba(255,36,36,1.00);
    line-height: 0.9;
    top: 10%;
    position: absolute;
    text-align: center;
    text-shadow: 0px 5px 5px rgba(1, 1, 1, 0.75);
}

.timeout-text-2 {
    position: absolute;
    color: orange;
    width: 100%;
    top: 24%;
    line-height: 0.9;
    text-align: center;
    height: 8%;
    text-shadow: 0px 5px 5px rgba(1, 1, 1, 0.75);
}

.timeout-text-3 {
    position: absolute;
    width: 100%;
    top: 73%;
    line-height: 0.9;
    text-align: center;
    height: 8%;
    color: white;
    text-shadow: 0px 5px 5px rgba(1, 1, 1, 0.75);
}

.img-Timeout {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 37%;
    top: 33%;
    text-align: center;
    margin: 0 auto;
    background-image: url(../imgs/timer.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.img-Error {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 37%;
    top: 33%;
    text-align: center;
    margin: 0 auto;
    background-image: url(../imgs/error.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.error-text-1 {
    height: 8%;
    width: 100%;
    color: rgba(255,36,36,1.00);
    line-height: 0.9;
    top: 21%;
    position: absolute;
    text-align: center;
    text-shadow: 0px 5px 5px rgba(1, 1, 1, 0.75);
}

.error-text-2 {
    position: absolute;
    width: 100%;
    top: 73%;
    line-height: 0.9;
    text-align: center;
    height: 8%;
    color: white;
    text-shadow: 0px 5px 5px rgba(1, 1, 1, 0.75);
}
.button-style-1 {
    background-image: url(../imgs/btn-close-00.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 5.2%;
    width: 9.3%;
    color: #61d8ff;
}

.button-style-1:active {
    background-image: url(../imgs/btn-close-01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    color: #ffffff;
}
/***********************SESSION-CONTAINER**********************/
.session-container {
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    background: rgba(0,0,0,.6);
    max-width: fit-content;
    padding: 2px 5px;
    position: absolute;
    right: 30px;
    bottom: 60px;
    font-size: 16px;
    border-radius: 4px;
    display: none;
}
.session-container.show {
    display: block;
}
.session-container .session-container-row {
    display: flex;
    flex-direction: row;
}
.session-container .session-container-label{
    margin-right: 5px;
}
/***********************SESSION-CONTAINER**********************/