.horizontalMode1 {
    display: block;
}
.horizontalMode2 {
    display: none;
}
.verticalMode {
    display: none;
}
.contentFlex {
    height: 93vh;
}
.clockArea {
    min-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100%-30px);
    padding: 0px 30px;
}

    .clockArea .timeArea {
        height: 100%;
        width: 65%;
        align-content: center;
        text-align: center;
    }

        .clockArea .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;
        }

            .clockArea .timeArea div.clock .timeValue {
                font-size: min(30vh, 17.5vw);
            }

            .clockArea .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: 7vw;
            }

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

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

    .clockArea .dateArea {
        width: 35%;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 5px;
    }

        .clockArea .dateArea .dateDetail {
            font-size: 2vw;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            height: calc(30vh / 2);
            align-content: center;
        }

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

        .clockArea .dateArea .centreDetail {
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #ccc;
            height: calc(30vh / 2);
            align-content: center;
        }

        .clockArea .dateArea .label {
            text-align: center;
            align-content: center;
            font-size: min(15vh, 2vw);
            padding: 0 5px;
        }

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



.paperArea {

}

    .paperArea ul {
        display: flex;
        gap: 1px;
        padding: 1px;
        height: 100%;
        justify-content: center;
    }

        .paperArea ul li {
            max-width: 48vw;
            flex: 1;
            padding: 0px 20px;
            border-right: 3px solid #ccc;
        }

            .paperArea ul li:last-child {
                border-right: none;
            }


    .paperArea .statusBox {
        align-content: center;
        height: 3.5vh;
/*        color: #fff;*/
        text-align: center;
        font-size: 3vh;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 1px;
    }


    .paperArea .subjectBox {
        /*        height: 27vh;*/
        text-align: center;
        font-weight: 500;
        padding: 0px 5px;
    }

        .paperArea .subjectBox output {
            display: block;
        }

            .paperArea .subjectBox output span:last-child {
                /*                border-bottom: none;*/
                align-items: center;
            }

        .paperArea .subjectBox span {
            display: block;
            padding: 0 0;
            border-bottom: 1px solid #ddd;
            text-align: left;
            letter-spacing: 0px;
        }

            .paperArea .subjectBox span.code {
                padding: 5px 0;
                height: 6vh;
                font-size: 3vh;
                align-content: center
            }

            .paperArea .subjectBox span.qual {
                padding: 5px 0;
                height: 15vh;
                font-size: 3vh;
                align-content: center;
                display: flex;
                align-items: flex-start;
                align-content: center
            }

            .paperArea .subjectBox span.title {
                padding: 5px 0;
                height: 10vh;
                font-size: 3vh;
                display: flex;
                align-items: flex-start;
                align-content: center
            }

    .paperArea .subjectBox1 {
        height: 15vh;
    }

    .paperArea .subjectBox2 {
        height: 15vh;
    }


    .paperArea .timeBox {
        height: 28vh;
        padding: 0px 5px;
    }

        .paperArea .timeBox div {
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            height: 7vh;
        }



            /*        .paperArea .timeBox div:last-child {
            border-bottom: none;
        }
*/

            .paperArea .timeBox div label {
                flex: 1;
                /*            text-align: right;*/
                font-size: 3vh;
                font-weight: 500;
                align-content: center;
                letter-spacing: 0px;
            }

            .paperArea .timeBox div output {
                text-align: right;
                font-family: "Inter", sans-serif;
                font-variant-numeric: tabular-nums;
                font-size: 4.5vh;
                font-size: 6.5vh;
                font-weight: 600;
                align-content: center;
                letter-spacing: 2.5px;
            }

            .paperArea .timeBox div.durationBox label {
            }

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