/** GENERAL STYLING **/

html {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: normal;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    background: whitesmoke;
    user-select: none;
    width: 100vw;
    margin: 0 auto;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div,
span,
p,
img,
a,
li,
button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
}

a,
a:hover,
a:link,
a:visited,
a:active {
    cursor: pointer;
    color: #EC6F18;
    text-decoration: underline;
}

button {
    font-family: 'Jura', sans-serif;
}

.fa {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-smile-o:before {
    content: "☻";
    color: white;
}


/** SCROLL BAR **/

::-webkit-scrollbar {
    width: 0.6vw;
    background: #33333300;
}

 ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px #333333;
    border-radius: 50px;
}

 ::-webkit-scrollbar-thumb {
    background: #ec7018a5;
    border-radius: 10px;
}

 ::-webkit-scrollbar-thumb:hover {
    background: #EC6F18;
}


/** DESKTOP CSS **/

@media only screen and (min-width: 601px) {
    .toast-box {
        background: red;
        margin-left: 50vw;
        width: 0vw;
        height: 0vw;
        padding: 0vw 0vw 0vw 0vw;
        position: fixed;
        z-index: 99999;
        border-radius: 20px;
        bottom: -3vw;
        box-shadow: 5px 10px 25px black;
        opacity: 0;
        transition: 0.5s all;
    }
    .toast-box-activated {
        margin-left: 30vw;
        width: 40vw;
        height: 1.2vw;
        padding: 0.5vw 0vw 0.5vw 0vw;
        bottom: 1vw;
        opacity: 1;
        transition: 0.5s all;
    }
    .toast-msg {
        display: block;
        font-size: 0vw;
        font-weight: bold;
        color: white;
        width: 0vw;
        text-align: center;
        transition: 0.5s all;
    }
    .toast-msg-activated {
        font-size: 1vw;
        width: 40vw;
        transition: 0.5s all;
    }
    .toast-close {
        position: absolute;
        right: 0.5vw;
        color: white;
        font-size: 0vw;
        font-weight: bold;
        opacity: 0;
        transition: 0.5s all;
    }
    .toast-close-activated {
        font-size: 1vw;
        opacity: 0.5;
        transition: 0.5s all;
    }
    .toast-close-activated:hover {
        opacity: 1;
        cursor: pointer;
        transition: 0.5s all;
    }
    .loader-cont {
        position: absolute;
        left: 45vw;
        top: 17.5vw;
        z-index: 999;
    }
    .loader {
        border-radius: 0%;
        border: 0.5vw solid rgba(253, 167, 0, 0.2);
        box-shadow: 3px 2px 80px 2px rgba(253, 167, 0, 1);
        background: #00000097;
        width: 10vw;
        height: 10vw;
        -webkit-animation: spin 1.5s linear infinite;
        /* Safari */
        animation: spin 1.5s linear infinite;
    }
    /* Safari */
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            box-shadow: 3px 2px 80px 2px rgba(253, 167, 0, 1);
        }
        25% {
            box-shadow: 5px 2px 160px 2px rgba(253, 167, 0, 1);
        }
        50% {
            box-shadow: 3px 2px 80px 2px rgba(253, 167, 0, 1);
        }
        75% {
            box-shadow: 1px 1px 10px 1px rgba(253, 167, 0, 1);
        }
        100% {
            -webkit-transform: rotate(360deg);
            box-shadow: 3px 2px 80px 2px rgba(253, 167, 0, 1);
        }
    }
    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            box-shadow: 3px 2px 80px 2px rgba(253, 167, 0, 1);
        }
        25% {
            box-shadow: 5px 2px 160px 2px rgba(253, 167, 0, 1);
        }
        50% {
            box-shadow: 3px 2px 80px 2px rgba(253, 167, 0, 1);
        }
        75% {
            box-shadow: 1px 1px 0px 1px rgba(253, 167, 0, 1);
        }
        100% {
            -webkit-transform: rotate(360deg);
            box-shadow: 3px 2px 80px 2px rgba(253, 167, 0, 1);
        }
    }
    .loader-text {
        color: rgba(253, 167, 0, 0.3);
        position: absolute;
        width: 10vw;
        text-align: center;
        margin-top: -6vw;
        margin-left: 0.7vw;
        font-size: 1.2vw;
        font-weight: bold;
        opacity: 1;
        text-shadow: 0px 0px 8px red;
    }
    .body-content {
        display: none;
        min-width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        margin: 0 auto;
        opacity: 0;
        background-color: #040035;
        animation-name: body-load;
        animation-duration: 1.5s;
        animation-delay: 0s;
        animation-fill-mode: both;
    }
    @keyframes body-load {
        from {
            opacity: 0;
            background-color: black;
        }
        to {
            opacity: 1;
            background-color: black;
        }
    }
    .ad-modal {
        position: fixed;
        z-index: 9999999;
        width: 100vw;
        height: 100vh;
        opacity: 1;
        background-color: #040035e5;
        display: none;
    }
    .ad-modal-text {
        color: white;
        position: fixed;
        font-size: 3vw;
        top: 10vw;
        width: 100vw;
        text-align: center;
    }
    .modal-ad-cont {
        position: fixed;
        height: 25vw;
        width: 25vw;
        top: 12.5vw;
        left: 37.5vw;
    }
    .modal-ad-img {
        height: 25vw;
        width: 25vw;
        object-fit: contain;
    }
    .modal-ad-close-div {
        position: fixed;
        height: 4vw;
        width: 100vw;
        top: 37.5vw;
        color: white;
        text-align: center;
    }
    .modal-ad-close-txt {
        min-width: 10vw;
        font-size: 1vw;
        padding: 0.5vw;
        opacity: 0.6;
        transition: 0.5s all;
    }
    .modal-ad-close-btn {
        min-width: 10vw;
        font-size: 1.5vw;
        font-weight: bold;
        border-radius: 1vw;
        background-color: orange;
        padding: 0.5vw;
        cursor: pointer;
        transition: 0.5s all;
    }
    .modal-ad-close-btn:hover {
        min-width: 10vw;
        font-size: 1.6vw;
        font-weight: bold;
        border-radius: 1vw;
        background-color: rgb(172, 114, 5);
        padding: 0.4vw;
        cursor: pointer;
        transition: 0.5s all;
    }
    .page-body {
        width: 100%;
        display: flex;
    }
    .leftpnl-admin-cont {
        display: block;
        width: 20%;
        height: 100vh;
        margin: 0;
        border-radius: 10px;
        padding-top: 4vw;
        padding-bottom: 1vw;
        /**box-shadow: 1px 1px 10px 2px #EC6F18;**/
        position: fixed;
        top: 0vw;
        background-color: #EC6F18;
        overflow: hidden;
        transition: 0.2s all;
    }
    .leftpnl-admin-btn-cont {
        width: 96%;
        display: flex;
        overflow: hidden;
        height: 2.5vw;
        border-radius: 10px;
        padding-left: 4%;
        padding-top: 0.5vw;
        opacity: 0.8;
        transition: 0.2s all;
        margin: 1%;
    }
    .leftpnl-admin-btn-cont:hover,
    .leftpnl-admin-btn-active {
        opacity: 1;
        cursor: pointer;
        transition: 0.2s all;
    }
    .leftpnl-admin-btn-cont:hover>.leftpnl-admin-btn-icon-cont>.leftpnl-admin-btn-icon-img,
    .leftpnl-admin-btn-active>.leftpnl-admin-btn-icon-cont>.leftpnl-admin-btn-icon-img {
        filter: brightness(100%);
        cursor: pointer;
        transition: 0.2s all;
    }
    .leftpnl-admin-btn-cont:hover>.leftpnl-admin-btn-text-cont>.leftpnl-admin-btn-text-value,
    .leftpnl-admin-btn-active>.leftpnl-admin-btn-text-cont>.leftpnl-admin-btn-text-value {
        color: white;
        cursor: pointer;
        transition: 0.2s all;
    }
    .leftpnl-admin-btn-icon-cont {
        width: 10%;
    }
    .leftpnl-admin-btn-icon-img {
        width: 2vw;
        height: 2vw;
        object-fit: cover;
        filter: brightness(100%);
    }
    .leftpnl-admin-btn-text-cont {
        width: 86%;
        margin-left: 4%;
    }
    .leftpnl-admin-btn-text-value {
        color: white;
        font-weight: bold;
        font-size: 1.2vw;
        margin-top: 0.5vw;
    }
    .leftpnl-cont {
        display: block;
        width: 20%;
        height: 50vw;
        margin: 0.25%;
        border-radius: 10px;
        padding-bottom: 1vw;
        /**box-shadow: 1px 1px 10px 2px #EC6F18;**/
        position: fixed;
        top: 4vw;
        transition: 0.2s all;
    }
    .leftpnl-btn-cont {
        width: 96%;
        display: flex;
        overflow: hidden;
        height: 2.5vw;
        border-radius: 10px;
        padding-left: 4%;
        padding-top: 0.5vw;
        transition: 0.2s all;
        margin: 1%;
    }
    .leftpnl-btn-cont:hover,
    .leftpnl-btn-active {
        background-color: #EC6F18;
        cursor: pointer;
        transition: 0.2s all;
    }
    .leftpnl-btn-cont:hover>.leftpnl-btn-icon-cont>.leftpnl-btn-icon-img,
    .leftpnl-btn-active>.leftpnl-btn-icon-cont>.leftpnl-btn-icon-img {
        filter: brightness(100%);
        cursor: pointer;
        transition: 0.2s all;
    }
    .leftpnl-btn-cont:hover>.leftpnl-btn-text-cont>.leftpnl-btn-text-value,
    .leftpnl-btn-active>.leftpnl-btn-text-cont>.leftpnl-btn-text-value {
        color: white;
        cursor: pointer;
        transition: 0.2s all;
    }
    .leftpnl-btn-icon-cont {
        width: 10%;
    }
    .leftpnl-btn-icon-img {
        width: 2vw;
        height: 2vw;
        object-fit: cover;
        filter: brightness(0%);
    }
    .leftpnl-btn-text-cont {
        width: 86%;
        margin-left: 4%;
    }
    .leftpnl-btn-text-value {
        color: black;
        font-weight: bold;
        font-size: 1.2vw;
        margin-top: 0.5vw;
    }
    .clock-cont {
        width: 80%;
        box-shadow: 1px 1px 10px 2px black;
        border-radius: 10px;
        margin: 0 auto;
    }
    .clock-time-cont {
        border-radius: 10px 10px 0px 0px;
        width: 100%;
        background-color: white;
        margin: 0 auto;
    }
    .clock-time-cont>p {
        width: 100%;
        padding: 0.6vw 0vw;
        text-align: center;
        font-size: 3vw;
        font-weight: bold;
        color: black;
    }
    .clock-date-cont {
        border-radius: 0px 0px 10px 10px;
        width: 100%;
        margin: -3vw auto;
        background-color: #EC6F18;
    }
    .clock-date-cont>p {
        width: 100%;
        padding: 0.1vw;
        text-align: center;
        font-size: 1.2vw;
        color: white;
    }
    .admin-section {
        margin-top: 2vw;
        width: 76.5%;
        height: auto;
        display: block;
        justify-content: center;
        text-align: center;
        padding: 1vw;
        margin-left: 21%;
    }
    .group-instructions-cont {
        width: 61%;
        height: auto;
        min-height: 2.5vw;
        max-height: 20vw;
        overflow-y: auto;
        background-color: rgba(236, 111, 24, 1);
        position: fixed;
        z-index: 999;
        margin-left: 21%;
        border-radius: 10px;
        box-shadow: 1px 1px 10px 2px black;
    }
    .group-instructions-text-cont {
        width: 90%;
        margin: 4vw auto 0 auto;
        color: white;
    }
    .group-inst-info-cont {
        margin: 0;
        width: 100%;
    }
    .group-inst-info-title {
        font-size: 1.2vw;
        width: 100%;
    }
    .group-inst-info-value {
        width: 100%;
        font-size: 1vw;
        font-style: italic;
        color: rgba(255, 255, 255, 0.8);
    }
    .group-inst-rules-cont {
        margin: 0;
        width: 100%;
    }
    .group-inst-rules-title {
        width: 100%;
        font-size: 1.2vw;
    }
    .group-inst-rules-value {
        width: 100%;
        font-size: 1vw;
        font-style: italic;
        color: rgba(255, 255, 255, 0.8);
    }
    /** HHH */
    /** HH */
}