@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Orbitron:wght@400..900&family=Outfit:wght@100..900&display=swap');

body {
    font-family: "Inter", sans-serif;
    letter-spacing: 2px;
    overflow-y: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mainFlex {
    height: 100vh;
}

.mainFlexVertical {
    height: 100vh;
    width: 50%;
    margin: 0 auto;
}

.colFlex1 {
    height: 7vh;
}

.colFlex2 {
    height: 30vh;
}

.colFlex3 {
    height: 63vh;
}

button:hover {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.borderBox {
    margin: 100px auto;
    border: 2px solid #ccc;
    border-radius: 15px;
    width: 440px;
    padding: 50px;
}

    .borderBox .heading {
        background-color: #003d7e;
        border-radius: 8px 8px 0 0;
        color: #fff;
        text-align: center;
        font-size: 1.5rem;
        text-transform: uppercase;
        padding: 7px 0;
    }

.inputBox {
    /*    margin: 10px auto;*/
}

    .inputBox label {
        display: block;
        width: 100%;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.7px;
    }

    .inputBox button {
        width: 100%;
        border: none;
        padding: 10px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 0;
        cursor: pointer;
        border-radius: 4px;
        background-color: #003d7e;
        color: #fff;
        /*        box-shadow: inset -12px 4px 20px 11px rgba(0, 0, 0, .5);*/
    }


    .inputBox input[type="text"] {
        margin: 0 0 5px 0;
        width: 100%;
        max-width: 100%;
    }

    .inputBox
    input[type="text"] {
        padding: 10px 16px;
        margin: 8px 0;
        display: inline-block;
        border: 2px solid #ccc;
        border-radius: 2px;
        box-sizing: border-box;
        font-size: 1rem;
    }

.headerArea {
    min-width: 500px;
    display: flex;
 
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

    .headerArea .leftArea {
        width: 20%;
        height: 100%;
        position: relative;
    }

        .headerArea .leftArea .logoArea {
            display: flex;
            align-items: end;
            position: absolute;
            bottom: 0;
            left: 10px;
            text-align: left;
        }

            .headerArea .leftArea .logoArea img {
                border-radius: 8px 8px 0 0;
                margin: 0 2px;
                padding: 1vh 0.5vw;
                width: 7vw;
                height: 5vh;
            }

            .headerArea .leftArea .logoArea button {
                text-transform: uppercase;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              
                border: none;
                border-radius: 8px 8px 0 0;
                cursor: pointer;
                margin: 0 2px;
                height: 5vh;
            }

                .headerArea .leftArea .logoArea button.reset {
                    width: 5vw;
                }

                .headerArea .leftArea .logoArea button.fullScreen {
                    width: 10vw;
                }

                .headerArea .leftArea .logoArea i {
                    font-size: min(1.5vh, 9vw);
                }

                .headerArea .leftArea .logoArea button span {
                    font-size: min(1.5vh, 9vw);
                }

                .headerArea .leftArea .logoArea button:focus {
                    border: none;
                }
            .headerArea .leftArea .logoArea .selectBox {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .headerArea .leftArea .logoArea .selectBox span {
                font-size: min(1.4vh, 9vw);
            }



    .headerArea .centerArea {
        width: 50%;
        color: #ffff;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .headerArea .centerArea .label {
            text-align: center;
            font-size: 2vh;
            font-size: min(1.5vw, 2vh);
        }

        .headerArea .centerArea .value {
            text-align: center;
            font-size: 4vh;
            text-transform: uppercase;
            font-weight: 500;
            font-size: min(1.93vw, 3.5vh);
            letter-spacing:0.1vw;
        }

    .headerArea .rightArea {
        width: 20%;
        height: 100%;
        position: relative;
    }

        .headerArea .rightArea .btnArea {
            display: flex;
            align-items: end;
            position: absolute;
            bottom: 0;
            right: 10px;
            text-align: right;
        }

            .headerArea .rightArea .btnArea button {
                margin: 0 2px;
                border: 0;
            }
            .selectBox {
                margin: 0 2px;
                text-transform: uppercase;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                /*                background-color: #fff;*/
                border: none;
                border-radius: 8px 8px 0 0;
                cursor: pointer;
                letter-spacing: 0;
                text-align: center;
                padding: 0;
                height: 5vh;
            }
.headerArea .rightArea .btnArea .selectBox {
    height: 6.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

                 .selectBox span {
                    font-size: min(1.5vh, 5vw);
                }

                 .selectBox i {
                    font-size: min(2vh, 5vw);
                    padding: 3px 15px;
                    cursor: unset;
                }

.selectBox .dropdown-menu {
    font-size: min(1.3vh, 9vw);
}


.textDiv .selectBox {
    /*    width: 8vw;*/
    width: min(10vw, 18vh);
}

.backDiv .selectBox {
    width: 12vw;
}
 .headerArea .rightArea .btnArea .selectBox .selectDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    /*                    height: 100vh; */
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 200px;
    font-size: 1.2vh;
}

.dropdown-toggle {
    
}

    .dropdown-toggle i {
        padding: 0 !important;
    }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

.dropdown-itemF {
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

    .dropdown-itemF:hover {
        background-color: #eee;
    }

.dropdown-itemB {
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

    .dropdown-itemB:hover {
        background-color: #eee;
    }

.dropdown-itemD {
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

    .dropdown-itemD:hover {
        background-color: #eee;
    }

.dropdown-itemT {
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

    .dropdown-itemT:hover {
        background-color: #eee;
    }



.headerArea .rightArea .btnArea .selectBox label {
    border: none !important;
    height: 100%;
    font-size: 0.8rem;
    background-color: #fff;
    text-align: center;
    margin-left: 4px;
    cursor: pointer;
    letter-spacing: 0px;
    align-content: center;
}

.headerArea .rightArea .btnArea .selectBox select {
    border: none !important;
    height: 100%;
    font-size: 0.8rem;
    background-color: #fff;
    text-align: left;
    margin: 0;
    cursor: pointer;
}

    .headerArea .rightArea .btnArea .selectBox select:focus {
        outline: none;
    }

.headerArea .rightArea .btnArea button.iconTextButton {
    text-transform: uppercase;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 2.5px;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}


.headerArea .rightArea .btnArea button.large {
    width: 5.5vw;
    height: 6.5vh;
}

    .headerArea .rightArea .btnArea button.large .icon {
        font-size: min(2vh, 9vw);
        margin-bottom: 5px;
    }

    .headerArea .rightArea .btnArea button.large .text {
        font-size: min(2vh, 9vw);
    }

.headerArea .rightArea .btnArea button.small {
    width: 8.5vw;
    height: 6.5vh;
}

    .headerArea .rightArea .btnArea button.small .icon {
        font-size: 2vh;
        margin-bottom: 5px;
        /*        color: red;*/
    }

    .headerArea .rightArea .btnArea button.small .text {
        font-size: min(1.5vh, 5vw);
        /*        color: red;*/
    }


.coArea {
    min-width: 500px;
    display: block;
    justify-content: center;
    align-items: center;
    width: calc(100%-30px);
    padding: 5px 30px;
    height: 93vh;
}

    .coArea .timeArea {
        align-content: center;
        text-align: center;
        height: 55vh;
    }

        .coArea .timeArea div.clock {
            display: flex;
            font-family: "Inter", sans-serif;
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            text-align: center;
            margin: 0 auto;
            white-space: nowrap;
            letter-spacing: 10px;
            justify-content: center;
        }

            .coArea .timeArea div.clock .timeValue {
                font-size: 50vh;
            }

            .coArea .timeArea div.clock .timeDetail {
                letter-spacing: 5px;
                font-size: min(15vh, 5vw);
                justify-content: space-evenly;
                align-content: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 12vw;
            }

                .coArea .timeArea div.clock .timeDetail .timeSecond {
                    display: flex;
                    align-items: center;
                    opacity: 0.5;
                    font-size: 6.5vw;
                    height: 50%;
                }

                .coArea .timeArea div.clock .timeDetail .timeFormat {
                    display: flex;
                    align-items: center;
                    font-size: 4vw;
                    height: 50%;
                    font-weight: 400;
                }

    .coArea .dateArea {
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 5px;
        margin-top: 10px;
        height: calc(43vh - 0px);
        display: flex;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 5px;
        margin-top: 10px;
        align-items: center;
        flex-direction: column;
        height: calc(37vh - 10px);
        justify-content: center;
    }

        .coArea .dateArea .dateDetail {
            font-size: 4vw;
            padding: 20px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            width: 100%;
        }

        .coArea .dateArea .centreDetail {
            display: flex;
            justify-content: center;
            padding: 20px;
            border-bottom: 1px solid #ccc;
            width: 100%;
        }

        .coArea .dateArea .label {
            text-align: center;
            align-content: center;
            font-size: 4vw;
            padding: 0 5px;
        }

        .coArea .dateArea .value {
            text-align: center;
            font-size: 7vw;
            font-weight: 500;
            padding: 0 5px;
        }



.blue {
    background-color: #003d7e !important;
}

.orange {
    background-color: #f04e20 !important;
}

.green {
    background-color: #35e400 !important;
}

.red {
    background-color: #d71818 !important;
}

/*START*/
.greenAndWhite {
    color: green;
    background-color: white;
}

    .greenAndWhite .headerArea {
        background-color: green;
    }

.greenAndBlack .centerArea {
    color: white;
}

.greenAndWhite .statusBox {
    background-color: green;
    color: white;
}

.greenAndWhite .selectBox {
    background-color: white;
}

.greenAndWhite .iconTextButton {
    color: green;
    background-color: white;
}

.greenAndWhite .logoArea img {
    background-color: white;
}

.greenAndWhite .logoArea button {
    color: green;
}

.greenAndWhite .dropdown-menu {
    background-color: White;
}

.greenAndBlack {
    color: green;
    background-color: black;
}

    .greenAndBlack .headerArea {
        background-color: green;
    }

    .greenAndBlack .centerArea {
        color: black;
    }

    .greenAndBlack .statusBox {
        background-color: green;
        color: black;
    }

    .greenAndBlack .selectBox {
        background-color: black;
    }

    .greenAndBlack .iconTextButton {
        color: green;
        background-color: black;
    }

    .greenAndBlack .logoArea img {
        background-color: black;
    }

    .greenAndBlack .logoArea button {
        color: green;
    }

    .greenAndBlack .dropdown-menu {
        background-color: black;
    }

.greenAndBlue {
    color: green;
    background-color: #003d7e;
}

    .greenAndBlue .headerArea {
        background-color: green;
    }

    .greenAndBlue .centerArea {
        color: #003d7e;
    }

    .greenAndBlue .statusBox {
        background-color: green;
        color: #003d7e;
    }

    .greenAndBlue .selectBox {
        background-color: #003d7e;
    }

    .greenAndBlue .iconTextButton {
        color: green;
        background-color: #003d7e;
    }

    .greenAndBlue .logoArea img {
        background-color: #003d7e;
    }

    .greenAndBlue .logoArea button {
        color: green;
    }

    .greenAndBlue .dropdown-menu {
        background-color: #003d7e;
    }

/*END*/

/*START*/
.blackAndWhite {
    color: unset;
}

    .blackAndWhite .headerArea {
        background-color: black;
    }

    .blackAndWhite .centerArea {
        color: white;
    }

    .blackAndWhite .statusBox {
        background-color: black;
        color: white;
    }


    .blackAndWhite .selectBox {
        background-color: white;
    }

    .blackAndWhite .iconTextButton {
        color: black;
        background-color: white;
    }

    .blackAndWhite .logoArea img {
        background-color: white;
    }

    .blackAndWhite .logoArea button {
        color: black;
    }

    .blackAndWhite .dropdown-menu {
        background-color: White;
    }

.blackAndBlack {
    color: unset;
}

    .blackAndBlack .headerArea {
        background-color: black;
    }

    .blackAndBlack .centerArea {
        color: black;
    }

    .blackAndBlack .statusBox {
        background-color: black;
        color: black;
    }

    .blackAndBlack .selectBox {
        background-color: white;
    }

    .blackAndBlack .iconTextButton {
        color: black;
        background-color: white;
    }

    .blackAndBlack .logoArea img {
        background-color: black;
    }

    .blackAndBlack .logoArea button {
        color: black;
    }

    .blackAndBlack .dropdown-menu {
        background-color: black;
    }

.blackAndBlue {
    color: unset;
    background-color: #003d7e;
}

    .blackAndBlue .headerArea {
        background-color: black;
    }

    .blackAndBlue .centerArea {
        color: #003d7e;
    }

    .blackAndBlue .statusBox {
        background-color: black;
        color: #003d7e;
    }


    .blackAndBlue .selectBox {
        background-color: #003d7e;
    }

    .blackAndBlue .iconTextButton {
        color: black;
        background-color: #003d7e;
    }

    .blackAndBlue .logoArea img {
        background-color: #003d7e;
    }

    .blackAndBlue .logoArea button {
        color: black;
    }

    .blackAndBlue .dropdown-menu {
        background-color: #003d7e;
    }


/*END*/


/*START*/
.whiteAndWhite {
    color: unset;
}

    .whiteAndWhite .headerArea {
        background-color: black;
    }

    .whiteAndWhite .centerArea {
        color: white;
    }

    .whiteAndWhite .statusBox {
        background-color: black;
        color: white;
    }

    .whiteAndWhite .selectBox {
        background-color: black;
    }

    .whiteAndWhite .iconTextButton {
        color: white;
        background-color: black;
    }

    .whiteAndWhite .dropdown-menu {
        background-color: white;
    }

    .whiteAndWhite .centerArea {
        color: white;
    }

    .whiteAndWhite .logoArea img {
        background-color: white;
    }

    .whiteAndWhite .logoArea button {
        color: white;
    }

    .whiteAndWhite .dropdown-menu {
        background-color: White;
    }

.whiteAndBlack {
    color: white;
    background-color: black;
}

    .whiteAndBlack .headerArea {
        color: black;
        background-color: white;
    }

    .whiteAndBlack .centerArea {
        color: black;
    }

    .whiteAndBlack .statusBox {
        color: black;
        background-color: white;
    }

    .whiteAndBlack .selectBox {
        color: white;
        background-color: black;
    }

    .whiteAndBlack .iconTextButton {
        color: white;
        background-color: black;
    }

    .whiteAndBlack .logoArea img {
        background-color: black;
    }

    .whiteAndBlack .logoArea button {
        color: white;
    }

    .whiteAndBlack .dropdown-menu {
        background-color: black;
    }

.whiteAndBlue {
    color: white;
    background-color: #003d7e;
}

    .whiteAndBlue .headerArea {
        color: #003d7e;
        background-color: white;
    }

    .whiteAndBlue .centerArea {
        color: #003d7e;
    }

    .whiteAndBlue .statusBox {
        color: #003d7e;
        background-color: white;
    }

    .whiteAndBlue .selectBox {
        color: white;
        background-color: #003d7e;
    }

    .whiteAndBlue .iconTextButton {
        color: white;
        background-color: #003d7e;
    }

    .whiteAndBlue .logoArea img {
        background-color: #003d7e;
    }

    .whiteAndBlue .logoArea button {
        color: white;
    }

    .whiteAndBlue .dropdown-menu {
        background-color: #003d7e;
    }
/*END*/
/*START*/
.blueAndWhite {
    color: #003d7e;
    background-color: white;
}

    .blueAndWhite .headerArea {
        background-color: #003d7e;
    }

    .blueAndWhite .centerArea {
        color: white;
    }

    .blueAndWhite .statusBox {
        background-color: #003d7e;
        color: white;
    }

    .blueAndWhite .selectBox {
        background-color: white;
    }

    .blueAndWhite .iconTextButton {
        color: #003d7e;
        background-color: white;
    }

    .blueAndWhite .logoArea img {
        background-color: white;
    }

    .blueAndWhite .logoArea button {
        color: #003d7e;
    }

    .blueAndWhite .dropdown-menu {
        background-color: White;
    }

.blueAndBlack {
    color: #003d7e;
    background-color: black;
}

    .blueAndBlack .headerArea {
        background-color: #003d7e;
    }

    .blueAndBlack .centerArea {
        color: black;
    }

    .blueAndBlack .statusBox {
        background-color: #003d7e;
        color: black;
    }

    .blueAndBlack .selectBox {
        background-color: black;
    }

    .blueAndBlack .iconTextButton {
        color: #003d7e;
        background-color: black;
    }

    .blueAndBlack .logoArea img {
        background-color: black;
    }

    .blueAndBlack .logoArea button {
        color: #003d7e;
    }

    .blueAndBlack .dropdown-menu {
        background-color: black;
    }

blueAndBlue {
    color: #003d7e;
    background-color: #003d7e;
}

.blueAndBlue .headerArea {
    background-color: #003d7e;
}

.blueAndBlue .centerArea {
    color: #003d7e;
}

.blueAndBlue .statusBox {
    background-color: #003d7e;
    color: #003d7e;
}

.blueAndBlue .selectBox {
    background-color: #003d7e;
}

.blueAndBlue .iconTextButton {
    color: #003d7e;
    background-color: #003d7e;
}

.blueAndBlue .logoArea img {
    background-color: #003d7e;
}

.blueAndBlue .logoArea button {
    color: #003d7e;
}

.blueAndBlue .dropdown-menu {
    background-color: black;
}
/*END*/

/*START*/
.orangeAndWhite {
    color: #f04e20;
    background-color: white;
}

    .orangeAndWhite .headerArea {
        background-color: #f04e20;
    }

    .orangeAndWhite .centerArea {
        color: white;
    }

    .orangeAndWhite .statusBox {
        background-color: #f04e20;
        color: white;
    }

    .orangeAndWhite .selectBox {
        background-color: white;
    }

    .orangeAndWhite .iconTextButton {
        color: #f04e20;
        background-color: white;
    }

    .orangeAndWhite .logoArea img {
        background-color: white;
    }

    .orangeAndWhite .logoArea button {
        color: #f04e20;
    }

    .orangeAndWhite .dropdown-menu {
        background-color: White;
    }

.orangeAndBlack {
    color: #f04e20;
    background-color: black;
}

    .orangeAndBlack .headerArea {
        background-color: #f04e20;
    }

    .orangeAndBlack .centerArea {
        color: black;
    }

    .orangeAndBlack .statusBox {
        background-color: #f04e20;
        color: black;
    }

    .orangeAndBlack .selectBox {
        background-color: black;
    }

    .orangeAndBlack .iconTextButton {
        color: #f04e20;
        background-color: black;
    }

    .orangeAndBlack .logoArea img {
        background-color: black;
    }

    .orangeAndBlack .logoArea button {
        color: #f04e20;
    }

    .orangeAndBlack .dropdown-menu {
        background-color: black;
    }

.orangeAndBlue {
    color: #f04e20;
    background-color: #003d7e;
}

    .orangeAndBlue .headerArea {
        background-color: #f04e20;
    }

    .orangeAndBlue .centerArea {
        color: #003d7e;
    }

    .orangeAndBlue .statusBox {
        background-color: #f04e20;
        color: #003d7e;
    }

    .orangeAndBlue .selectBox {
        background-color: #003d7e;
    }

    .orangeAndBlue .iconTextButton {
        color: #f04e20;
        background-color: #003d7e;
    }

    .orangeAndBlue .logoArea img {
        background-color: #003d7e;
    }

    .orangeAndBlue .logoArea button {
        color: #f04e20;
    }

    .orangeAndBlue .dropdown-menu {
        background-color: #003d7e;
    }
/*END*/

/*START*/
.yellowAndWhite {
    color: #FFD700;
    background-color: white;
}

    .yellowAndWhite .headerArea {
        background-color: #FFD700;
    }

    .yellowAndWhite .centerArea {
        color: white;
    }

    .yellowAndWhite .statusBox {
        background-color: #FFD700;
        color: white;
    }

    .yellowAndWhite .selectBox {
        background-color: white;
    }

    .yellowAndWhite .iconTextButton {
        color: #FFD700;
        background-color: white;
    }

    .yellowAndWhite .logoArea img {
        background-color: white;
    }

    .yellowAndWhite .logoArea button {
        color: #FFD700;
    }

    .yellowAndWhite .dropdown-menu {
        background-color: White;
    }

.yellowAndBlack {
    color: #FFD700;
    background-color: black;
}

    .yellowAndBlack .headerArea {
        background-color: #FFD700;
    }

    .yellowAndBlack .centerArea {
        color: black;
    }

    .yellowAndBlack .statusBox {
        background-color: #FFD700;
        color: black;
    }

    .yellowAndBlack .selectBox {
        background-color: black;
    }

    .yellowAndBlack .iconTextButton {
        color: #FFD700;
        background-color: black;
    }

    .yellowAndBlack .logoArea img {
        background-color: black;
    }

    .yellowAndBlack .logoArea button {
        color: #FFD700;
    }

    .yellowAndBlack .dropdown-menu {
        background-color: black;
    }

.yellowAndBlue {
    color: #FFD700;
    background-color: #003d7e;
}

    .yellowAndBlue .headerArea {
        background-color: #FFD700;
    }

    .yellowAndBlue .centerArea {
        color: #003d7e;
    }

    .yellowAndBlue .statusBox {
        background-color: #FFD700;
        color: #003d7e;
    }

    .yellowAndBlue .selectBox {
        background-color: #003d7e;
    }

    .yellowAndBlue .iconTextButton {
        color: #FFD700;
        background-color: #003d7e;
    }

    .yellowAndBlue .logoArea img {
        background-color: #003d7e;
    }

    .yellowAndBlue .logoArea button {
        color: #FFD700;
    }

    .yellowAndBlue .dropdown-menu {
        background-color: #003d7e;
    }
/*END*/

/*START*/
.redAndWhite {
    color: #FF0000;
    background-color: white;
}

    .redAndWhite .headerArea {
        background-color: #FF0000;
    }

    .redAndWhite .centerArea {
        color: white;
    }

    .redAndWhite .statusBox {
        background-color: #FF0000;
        color: white;
    }

    .redAndWhite .selectBox {
        background-color: white;
    }

    .redAndWhite .iconTextButton {
        color: #FF0000;
        background-color: white;
    }

    .redAndWhite .logoArea img {
        background-color: white;
    }

    .redAndWhite .logoArea button {
        color: #FF0000;
    }

    .redAndWhite .dropdown-menu {
        background-color: White;
    }


.redAndBlack {
    color: #FF0000;
    background-color: black;
}

    .redAndBlack .headerArea {
        background-color: #FF0000;
    }

    .redAndBlack .centerArea {
        color: black;
    }

    .redAndBlack .statusBox {
        background-color: #FF0000;
        color: black;
    }

    .redAndBlack .selectBox {
        background-color: black;
    }

    .redAndBlack .iconTextButton {
        color: #FF0000;
        background-color: black;
    }

    .redAndBlack .logoArea img {
        background-color: black;
    }

    .redAndBlack .logoArea button {
        color: #FF0000;
    }

    .redAndBlack .dropdown-menu {
        background-color: black;
    }

.redAndBlue {
    color: #FF0000;
    background-color: #003d7e;
}

    .redAndBlue .headerArea {
        background-color: #FF0000;
    }

    .redAndBlue .centerArea {
        color: #003d7e;
    }

    .redAndBlue .statusBox {
        background-color: #FF0000;
        color: #003d7e;
    }

    .redAndBlue .selectBox {
        background-color: #003d7e;
    }

    .redAndBlue .iconTextButton {
        color: #FF0000;
        background-color: #003d7e;
    }

    .redAndBlue .logoArea img {
        background-color: #003d7e;
    }

    .redAndBlue .logoArea button {
        color: #FF0000;
    }

    .redAndBlue .dropdown-menu {
        background-color: #003d7e;
    }
/*END*/



/*START*/
.greyAndWhite {
    color: #4F4F4F;
    background-color: white;
}

    .greyAndWhite .headerArea {
        background-color: #4F4F4F;
    }

    .greyAndWhite .centerArea {
        color: white;
    }

    .greyAndWhite .statusBox {
        background-color: #4F4F4F;
        color: white;
    }

    .greyAndWhite .selectBox {
        background-color: white;
    }

    .greyAndWhite .iconTextButton {
        color: #4F4F4F;
        background-color: white;
    }

    .greyAndWhite .logoArea img {
        background-color: white;
    }

    .greyAndWhite .logoArea button {
        color: #4F4F4F;
    }

    .greyAndWhite .dropdown-menu {
        background-color: White;
    }

.greyAndBlack {
    color: #4F4F4F;
    background-color: black;
}

    .greyAndBlack .headerArea {
        background-color: #4F4F4F;
    }

    .greyAndBlack .centerArea {
        color: black;
    }

    .greyAndBlack .statusBox {
        background-color: #4F4F4F;
        color: black;
    }

    .greyAndBlack .selectBox {
        background-color: black;
    }

    .greyAndBlack .iconTextButton {
        color: #4F4F4F;
        background-color: black;
    }

    .greyAndBlack .logoArea img {
        background-color: black;
    }

    .greyAndBlack .logoArea button {
        color: #4F4F4F;
    }

    .greyAndBlack .dropdown-menu {
        background-color: black;
    }

.greyAndBlue {
    color: #4F4F4F;
    background-color: #003d7e;
}

    .greyAndBlue .headerArea {
        background-color: #4F4F4F;
    }

    .greyAndBlue .centerArea {
        color: #003d7e;
    }

    .greyAndBlue .statusBox {
        background-color: #4F4F4F;
        color: #003d7e;
    }

    .greyAndBlue .selectBox {
        background-color: #003d7e;
    }

    .greyAndBlue .iconTextButton {
        color: #4F4F4F;
        background-color: #003d7e;
    }

    .greyAndBlue .logoArea img {
        background-color: #003d7e;
    }

    .greyAndBlue .logoArea button {
        color: #4F4F4F;
    }

    .greyAndBlue .dropdown-menu {
        background-color: #003d7e;
    }
/*END*/

.confirm-div {
    background-color: #ccc;
}

.green-btn {
    background-color: #47a04b;
}

    .green-btn:hover {
        background-color: #368339;
    }

    .green-btn:active {
        background-color: #2d6830;
    }

    .green-btn:disabled {
        background-color: #c8eac9;
        color: #1b7a43;
    }

.red-btn {
    background-color: #f93a3a;
}

    .red-btn:hover {
        background-color: #e71f1f;
    }

    .red-btn:active {
        background-color: #c21313;
    }

    .red-btn:disabled {
        background-color: #ffc7c7;
        color: #c21313;
    }

.confirm-div {
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
    box-shadow: 4px 4px 15px #3e3e3e;
    font-family: "Segoe UI", Tahoma, sans-serif;
    cursor: default;
}

    .confirm-div button {
        cursor: pointer;
        width: 100%;
        padding: 4px 6px;
        border-radius: 4px;
        color: #fff;
        border: none;
        height: 30px;
        width: 100%;
    }

    .confirm-div p {
        display: flex;
        flex-direction: column;
    }

        .confirm-div p strong {
            margin-bottom: 15px;
        }

.warning-general {
    border: 0;
    position: absolute; /* switch to fixed */
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modals-container {
    display: flex;
    flex-direction: row;
    height: 32px;
    margin-top: 20px;
    gap: 7px;
    width: 100%;
}



.mainFlexVertical {
    width: 100%; /* fills parent */
    max-width: 600px;
}
    .mainFlexVertical  .headerArea {
        height:7vh;
    }
        .mainFlexVertical .headerArea .leftArea {
            width: 50%;
        }

        .mainFlexVertical .headerArea .leftArea .logoArea img {
    width: 100px;
        }
        .mainFlexVertical .headerArea .leftArea .logoArea button.reset {
            width: 50px;
            height:5vh;
        }
        .mainFlexVertical .headerArea .leftArea .logoArea button.fullScreen {
            width: 65px;
            height: 5vh;
        }
.mainFlexVertical .headerArea .leftArea .logoArea button span {
    font-size: min(1vh, 9vw);
}



.mainFlexVertical .headerArea .rightArea {
    width: 50%;
}
    .mainFlexVertical .headerArea .rightArea .textDiv .selectBox {
        width: 65px;
    }

    .mainFlexVertical .headerArea .rightArea .backDiv .selectBox {
        width: 70px;
    }
    .mainFlexVertical .headerArea .rightArea .btnArea button.large {
        width: 70px;
    }
    .mainFlexVertical .headerArea .rightArea .btnArea .selectBox i {
        font-size: min(1.3vh, 5vw);
    }
    .mainFlexVertical .headerArea .rightArea .btnArea .selectBox span {
        font-size: 1vh;
    }
.mainFlexVertical .mainFlexVertical .headerArea .rightArea .btnArea button.large .icon {
    font-size: min(1.5vh, 9vw);
}
.mainFlexVertical .headerArea .rightArea .btnArea button.large .text {
    font-size: min(1.5vh, 9vw);
}

    .mainFlexVertical .centerArea {
        width: 100%;
        text-align: center;
        display: flex;
        text-align: center;
        text-transform: uppercase;
        justify-content: center;
        align-items: center;
        height:4vh;
        /*    color: #ffff;*/
    }

    .mainFlexVertical .centerArea .value {
        font-size: 2.5vh;
        font-weight: 500;
    }
    .mainFlexVertical .clockArea {
        display: flex;
        text-transform: uppercase;
        flex-direction: column;
        height:29vh;
        justify-content:start;
        padding:0;
    }

        .mainFlexVertical .clockArea .centreDetail {
            display: flex;
            place-content: center;
            border-bottom: 0px solid rgb(204, 204, 204);
            height: calc(7vh);
            text-transform: uppercase;
        }
            .mainFlexVertical .clockArea .centreDetail .label {
                text-align: center;
                align-content: center;
                font-size: min(7.5vh, 1.5vw);
                padding: 0 5px;
            }

            .mainFlexVertical .clockArea .centreDetail .value {
                align-content: center;
                text-align: center;
                font-size: min(6.5vh, 5vw);
                font-weight: 500;
                padding: 0 5px;
            }


.mainFlexVertical .clockArea .dateDetail {
    font-size: 2vw;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    height: 7vh;
    align-content: center;
    text-align:center;

}

            .mainFlexVertical .clockArea .dateDetail span {
                font-size: min(6.5vh, 2.8vw);
            }



        .mainFlexVertical .clockArea  div.clock {
            display: flex;
            font-family: "Inter", sans-serif;
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            text-align: center;
            margin: 0 auto;
            white-space: nowrap;
            letter-spacing: 10px;
            justify-content: center;
            height:15vh;
            align-items:center;
        }

            .mainFlexVertical .clockArea div.clock .timeValue {
                font-size: min(15vh,150px);

            }

            .mainFlexVertical .clockArea div.clock .timeDetail {
                letter-spacing: 5px;
                font-size: min(15vh, 5vw);
                justify-content: space-evenly;
                align-content: center;
                display: flex;
                flex-direction: column;
                align-items: center;
/*                width: 7vw;*/
                height:100%;
            }

                .mainFlexVertical .clockArea div.clock .timeDetail .timeSecond {
                    display: flex;
                    align-items: center;
                    opacity: 0.5;
                    font-size: min(15vh, 50px);
                    height: 50%;
                }

                .mainFlexVertical .clockArea div.clock .timeDetail .timeFormat {
                    display: flex;
                    align-items: center;
                    font-size: min(15vh, 2.8vw);
                    height: 50%;
                    font-weight: 400;
                }


.mainFlexVertical .paperArea .statusBox {
    font-size: 2vh;
    height:3.5vh
}

    .mainFlexVertical .paperArea ul li {
        padding: 0 5px;
/*        max-width: 200px;*/
    }
    .mainFlexVertical .paperArea .subjectBox span.qual {
        font-size: 2.2vh;
        align-items:unset;
        text-align:center;
    }
    .mainFlexVertical .paperArea .subjectBox span.code {
        font-size: 2.4vh;
    }
    .mainFlexVertical .paperArea .subjectBox span.title {
        font-size: 2.4vh;
    }

    .mainFlexVertical .paperArea .timeBox div {
        justify-content: center;
        display:flex;
        flex-direction:column;
    }
        .mainFlexVertical .paperArea .timeBox div label {
            font-size: 1.4vh;
            text-align: center;
            text-transform: uppercase;
            align-content: unset;
        }

.mainFlexVertical .paperArea .timeBox div output {
    font-size: 5vh;
    text-align: center;
}

    .mainFlexVertical .paperArea .timeBox div.durationBox output {
        letter-spacing: 0px;
        font-size: 2.5vh;
    }

.mainFlexVertical .paperArea .subjectBox2 {
    
}
    .mainFlexVertical .paperArea .subjectBox2 label {
        font-size: 1.4vh;
        text-align: center;
        text-transform: uppercase;
    }

    .mainFlexVertical .paperArea .subjectBox2 span.code {
        text-align: center;
        height: 6vh;
        align-content: unset;
        /*        height:unset;*/
    }
    .mainFlexVertical .paperArea .subjectBox2 span.title {
        text-align: center;
        align-items: start;
    }