/* body {
            font:
                15px "Open Sans",
                "Arial",
                sans-serif;
            margin: 0;
            padding: 0;
            overflow: visible; */
/* center all element in body */
/* display: flex;
            flex-direction: column;
            align-items: center; */
/* } */

.fliping {
    /* margin-top: 20px; */
    /* border: 1px solid black; */
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.iFramecanvas {
    /* margin-top: 20px; */
    /* border: 1px solid black; */
    position: absolute;
    /* top: 0;
    left: 0; */
}

.custom16_9 {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: 100%;
}

.custom4_3 {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 100%;
}

.custom9_16 {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 100%;
}

.custom3_4 {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 100%;
}

.custom1_1 {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 100%;
}

.custom100 {
    /* width: 100%; */
    height: 100dvh;
}

.custom16_9_h {
    aspect-ratio: 16 / 9;
    width: auto;
    height: calc(100dvh - 70px);
}

.custom4_3_h {
    aspect-ratio: 4 / 3;
    width: auto;
    height: calc(100dvh - 70px);
}

.custom9_16_h {
    aspect-ratio: 9 / 16;
    width: auto;
    height: calc(100dvh - 70px);
}

.custom3_4_h {
    aspect-ratio: 3 / 4;
    width: auto;
    height: calc(100dvh - 70px);
}

.custom1_1_h {
    aspect-ratio: 1 / 1;
    width: auto;
    height: calc(100dvh - 70px);
}

.button1 {
    margin-left: 10px;
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 10px;
    max-width: 65px;

}

.button2 {
    margin-left: 10px;
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 10px;
    /* max-width: 100px; */
}

.button3 {
    margin-left: 10px;
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 10px;
    /* max-width: 180px; */
}

.button4 {
    margin-left: 10px;
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 10px;
    /* max-width: 65px; */
}

.button5 {
    margin-left: 10px;
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 10px;
    max-width: 180px;
}

.button6,
.button7 {
    margin-left: 10px;
    margin-bottom: 10px;
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    width: 65px;
}

.button8,
.button9 {
    margin-left: 10px;
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 10px;
    max-width: 100px;
}

.button10 {
    margin-left: 10px;
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 10px;
    max-width: 180px;
}

.button1 {
    background-color: #00a8e0;
}

.button2,
.button8 {
    background-color: #356ddc;
}

.button3,
.button10 {
    background-color: #0049a2;
}

.button4,
.button9 {
    background-color: #ff6c4f;
}

.button5 {
    background-color: #075aff;
}

.button6 {
    background-color: #00a244;
}

.button7 {
    background-color: #f04a38;
}

.button8 {
    background-color: #FFC107; /* Amber color for pause */
    font-size: 14px;
    padding: 8px 16px;
    transition: background-color 0.3s ease;
}

.button1:hover,
.button2:hover,
.button3:hover,
.button4:hover,
.button5:hover,
.button6:hover,
.button7:hover,
.button8:hover,
.button9:hover,
.button10:hover {
    opacity: 0.8;
}

.button_disabled {
    background-color: gray;
    cursor: not-allowed;
}



/* p {
            padding: 0px;
            margin-left: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        h2 {
            margin-left: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
        } */

.left {
    margin-left: 10px;
    float: left;
    width: 650px;
    margin-right: 2%;
}

.right {
    float: right;
    width: 28%;
    margin-left: 2%;
}

.deviceList {
    width: 300px;
    border: 1px solid black;
    font-size: 14px;
    list-style-type: none;
    margin-top: 2px;
    padding: 6px;
}

select {
    width: 300px;
    height: 50px;
    font-size: 16px;
    text-align: left;
    /* padding-top: 2px;
                padding-bottom: 4px; */
    color: #333;
}

.data-output {
    width: 100%;
    height: auto;
    min-height: 10px;
    max-height: calc(4vh + 2px);
    /* Dynamic height based on viewport */
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    /* padding: 5px; */
}

.data-outputbox {
    width: 100%;
    height: 95%;
    /* min-height: 10px; */
    /* max-height: calc(4vh + 2px); */
    /* Dynamic height based on viewport */
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    /* padding: 5px; */
}

.data-outputbox3 {
    width: 100%;
    height: auto;
    /* Dynamic height based on viewport */
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.cards {
    width: 100%;
    min-width: 280px;
    /* Minimum width for mobile */
    max-width: 100%;
    height: auto;
    min-height: calc(4vh + 2px);
    /* Dynamic height based on viewport */
    margin: 5px 0;
    border-radius: 15px;
    /* Responsive border radius */
    /* background: #f4f8ff;
            background-image: radial-gradient(at 88% 40%,
                    hsla(240, 0%, 20%, 0) 0px,
                    transparent 100%),
                radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
                radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
                radial-gradient(at 0% 64%, hsla(222, 77%, 50%, 0.5) 0px, transparent 100%),
                radial-gradient(at 41% 94%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%),
                radial-gradient(at 100% 99%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%); */
    /* box-shadow:
                clamp(5px, 1vw, 15px) clamp(5px, 1vw, 15px) clamp(10px, 2vw, 30px) #dfdfdf,
                clamp(-5px, -1vw, -15px) clamp(-5px, -1vw, -15px) clamp(10px, 2vw, 30px) #ffffff; */
    /* color: #ffffff; */
}

/* Media queries for different screen sizes */
@media screen and (max-width: 768px) {
    .cards {
        margin: 3px 0;
    }

    .data-output {
        font-size: clamp(8px, 2vw, 14px);
        max-height: calc(4vh + 15px);
    }

    .data-outputbox {
        font-size: clamp(8px, 2vw, 14px);
        /* max-height: calc(4vh + 15px); */
    }

    .data-outputbox3 {
        font-size: clamp(10px, 2vw, 14px);
        /* max-height: calc(4vh + 15px); */
    }

    .chevron_text {
        font-size: clamp(10px, 2vw, 24px);
    }
}

@media screen and (max-width: 480px) {
    .cards {
        margin: 2px 0;
    }

    .data-output {
        font-size: clamp(8px, 1.8vw, 12px);
        max-height: calc(3vh + 10px);
    }

    .data-outputbox {
        font-size: clamp(8px, 1.8vw, 12px);
        /* max-height: calc(3vh + 10px); */
    }

    .data-outputbox3 {
        font-size: clamp(10px, 1.8vw, 12px);
        /* max-height: calc(3vh + 10px); */
    }

    .chevron_text {
        font-size: clamp(10px, 1.8vw, 12px);
    }
}

.menu {
    float: left;
    width: 500px;
    height: 100dvh;
    /* border: 1px solid black; */
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    /* Add this line to enable vertical scrolling */
    /* overflow-x: auto; */
    /* Add this line to hide horizontal overflow */
    /* display: flex;
            flex-direction: column;
            align-items: center; */
}

.card-menu {
    margin-top: 10px;
    width: 250px;
    height: 100dvh;
    border-radius: 30px;
    /* background: #e5f0fe; */
    /* box-shadow: 15px 15px 30px #dfdfdf,
                -15px -15px 30px #ffffff; */
    overflow-y: hidden;
    /* Add this line to enable vertical scrolling */
    overflow-x: auto;
    /* Add this line to hide horizontal overflow */

    /* make the item in the card-menu to be center */
    /* display: flex;
            flex-direction: column;
            align-items: left; */
}

.canvas-container {
    position: relative;
    display: inline-block;
}

.orientation-canvas-container {
    position: relative;
    display: inline-block;
    width: 125px;
    height: 135px;
}

.orientation-canvas-container img {
    position: block;
    display: inline-block;
    width: 250px;
    height: 270px;
}

.title-main {
    font-weight: bold;
    color: #333;
    background: #eee;
}

.title-sub {
    font-weight: normal;
    color: #666;
    padding-left: 10px;
    font-style: italic;
    background: #f5f5f5;
}

/* accordion */
.section-header {
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px;
    /* background-color: #bed5ff; */
    cursor: pointer;
    margin: 5px 0;
}

details {
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 99%;
}

details>div {
    padding: 5px;
}

details[open] summary {
    border-bottom: 1px solid #ddd;
}

/* The gooey effect switch */
input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

label.switchNormal {
    cursor: pointer;
    text-indent: -9999px;
    width: 50px;
    height: 25px;
    display: block;
    border-radius: 50px;
    position: relative;
    /* filter: url('#gooey'); */

    background: #FF4651;
    box-shadow: 0 8px 16px -1px rgba(255, 70, 81, 0.2);
    transition: .3s ease-in-out;
    transition-delay: .2s;
}

label.switchNormal:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    background: #fff;
    border-radius: 21px;
    /* transition: 0.3s; */
    animation: expand-left .5s linear forwards;


}

input:checked+label.switchNormal {
    /* background: #bada55; */
    background: #48EA8B;
    box-shadow: 0 8px 16px -1px rgba(72, 234, 139, 0.8);
    /* animation: jelly-left  */
}

input:checked+label.switchNormal:after {
    background: #fff;
    animation: expand-right .5s linear forwards;
    /* left: calc(100% - 5px); */
    /* transform: translateX(-100%); */
}

/* label:active:after {
    width: 20px;
} */
@-webkit-keyframes expand-right {
    0% {
        left: 2px;
        /* background:white; */
    }

    30%,
    50%

    /* 50% 80% */
        {
        left: 2px;
        width: 46px;

    }

    60% {
        left: 34px;
        width: 14px;
    }

    80% {
        left: 24px;
        width: 24px;
    }

    90% {
        left: 29px;
        width: 19px;
    }

    100% {
        left: 27px;
        width: 21px;
    }
}

@keyframes expand-right {
    0% {
        left: 2px;
        /* background:white; */
    }

    30%,
    50%

    /* 50% 80% */
        {
        left: 2px;
        width: 46px;

    }

    60% {
        left: 34px;
        width: 14px;
    }

    80% {
        left: 24px;
        width: 24px;
    }

    90% {
        left: 29px;
        width: 19px;
    }

    100% {
        left: 27px;
        width: 21px;
    }
}

@-webkit-keyframes expand-left {
    0% {
        left: 27px;
        /* background:white; */
    }

    30%,
    50% {
        left: 2px;
        width: 46px;
    }

    60% {
        right: 34px;
        width: 14px;
    }

    80% {
        right: 24px;
        width: 24px;
    }

    90% {
        right: 29px;
        width: 19px;
    }

    100% {
        left: 2px;
        width: 21px;
    }
}

@keyframes expand-left {
    0% {
        left: 27px;
        /* background:white; */
    }

    30%,
    50% {
        left: 2px;
        width: 46px;
    }

    60% {
        right: 34px;
        width: 14px;
    }

    80% {
        right: 24px;
        width: 24px;
    }

    90% {
        right: 29px;
        width: 19px;
    }

    100% {
        left: 2px;
        width: 21px;
    }
}

/* module selection */
.module-group {
    width: 210px;
    padding: 5px;
    border-bottom: 1px solid #eee;
}

.module-group-title {
    font-weight: bold;
    color: #333;
    padding: 10px;
    background: #bed5ff;
    margin: 5px 0;
    width: 210px;
}

.module-subgroup-title {
    font-weight: normal;
    color: #666;
    padding: 8px;
    background: #e8f0ff;
    margin: 5px 0;
    width: 210px;
}

.module-button {
    width: 210px;
    color: #666;
    padding: 8px;
    margin: 5px;
    background: rgb(200, 226, 255);
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.module-button:hover {
    background: #f0f0f0;
    transform: translateX(5px);
}

.module-button.active {
    background: #356ddc;
    color: white;
}

/* small card1 */
.smallCards {
    /* margin-top: 5px; */
    width: 100%;
    height: 270px;
    /* max-width: 450px; */
    border-radius: 30px;
    /* background: #f4f8ff;
            background-image: radial-gradient(at 88% 40%,
                    hsla(240, 0%, 20%, 0) 0px,
                    transparent 100%),
                radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
                radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
                radial-gradient(at 0% 64%, hsla(222, 77%, 50%, 0.5) 0px, transparent 100%),
                radial-gradient(at 41% 94%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%),
                radial-gradient(at 100% 99%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%); */
    /* box-shadow: 15px 15px 30px #dfdfdf,
                -15px -15px 30px #ffffff; */
}

/* small card1 */
.smallCardsVitals {
    /* display: flex; */
    flex-direction: column;
    /* scrollable */
    overflow: auto;
    padding: 15px;
    margin-top: 5px;
    width: 95%;
    max-width: 99vw;
    max-height: 800px;
    /* max-width: 450px; */
    border-radius: 20px;
    background: #f4f8ff;
    background-image: radial-gradient(at 88% 40%,
            hsla(240, 0%, 20%, 0) 0px,
            transparent 100%),
        radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
        radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
        radial-gradient(at 0% 64%, hsla(222, 77%, 50%, 0.5) 0px, transparent 100%),
        radial-gradient(at 41% 94%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%),
        radial-gradient(at 100% 99%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%);
    /* box-shadow: 15px 15px 30px #dfdfdf,
                -15px -15px 30px #ffffff; */
}

.smallCardsVitals2 {
    /* scrollable */
    overflow: auto;
    padding: 15px;
    margin-top: 10px;
    /* width: 100%; */
    max-width: 80vw;
    max-height: 800px;
    /* max-width: 450px; */
    border-radius: 20px;
    /* color: #ffffff; */
    background: #f4f8ff;
    background-image: radial-gradient(at 88% 40%,
            hsla(0, 0%, 100%, 0) 0px,
            transparent 100%),
        radial-gradient(at 49% 30%, hsla(0, 0%, 47%, 0.5) 0px, transparent 0%),
        radial-gradient(at 14% 26%, hsla(240, 64%, 38%, 0.5) 0px, transparent 0%),
        radial-gradient(at 0% 64%, hsla(222, 95%, 64%, 0.5) 0px, transparent 100%),
        radial-gradient(at 41% 94%, hsla(222, 96%, 71%, 0.5) 0px, transparent 100%),
        radial-gradient(at 100% 99%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%);
    /* box-shadow: 15px 15px 30px #dfdfdf,
                -15px -15px 30px #ffffff; */
}

.smallCardsmenu {
    float: left;
    width: 500px;
    height: 950px;
    /* border: 1px solid black; */
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    /* Add this line to enable vertical scrolling */
    /* overflow-x: auto; */
    /* Add this line to hide horizontal overflow */
    /* display: flex;
            flex-direction: column;
            align-items: center; */
}

.smallCards-menu {
    margin-top: 10px;
    width: 250px;
    height: 1060px;
    border-radius: 30px;
    background: #f4f8ff;
    box-shadow: 15px 15px 30px #dfdfdf,
        -15px -15px 30px #ffffff;
    overflow-y: hidden;
    /* Add this line to enable vertical scrolling */
    overflow-x: auto;
    /* Add this line to hide horizontal overflow */

    /* make the item in the card-menu to be center */
    /* display: flex;
            flex-direction: column;
            align-items: left; */
}

/* Container for the circle image */
#circleContainer {
    position: relative;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    min-width: 150px;
    /* max-width: 230px; */
    margin: auto auto;
    /* center horizontally */
    /* vertical-align: auto;
    align-self: center; */

}

/* The circle image itself */
#circleContainer img {
    width: 100%;
    height: 100%;
    display: block;
    /* remove gaps under images */
}

/* The red dot we will place on top of the circle */
#dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgb(213, 213, 213);
    border-radius: 50%;
    /* By default, anchor dot in the center of its (x,y) to avoid offset shifts */
    transform: translate(-50%, -50%);
}

/* Loading */
/* From Uiverse.io by Deri-Kurniawan */
.loader {
    perspective: 600px;
    width: 100px;
    height: 100px;
}

.cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate 4s linear infinite;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #3453db, #3ce7e7);
    opacity: 0.8;
    border: 0.5px solid #fff;
    border-radius: 25%;
}

.face:nth-child(1) {
    transform: rotateX(90deg) translateZ(50px);
}

.face:nth-child(2) {
    transform: rotateX(-90deg) translateZ(50px);
}

.face:nth-child(3) {
    transform: translateZ(50px);
}

.face:nth-child(4) {
    transform: rotateY(90deg) translateZ(50px);
}

.face:nth-child(5) {
    transform: rotateY(-90deg) translateZ(50px);
}

.face:nth-child(6) {
    transform: rotateY(180deg) translateZ(50px);
}

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* Full body checker */
#checkbox {
    display: none;
}

.switch2 {
    position: relative;
    width: 35px;
    height: 35px;
    background-color: rgb(255, 5, 5);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(255, 126, 126);
    box-shadow: 0px 0px 3px rgb(248, 248, 248) inset;
    color: white;
}

.switch2_5 {
    position: relative;
    width: 35px;
    height: 35px;
    background-color: rgb(255, 242, 0);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(253, 255, 126);
    box-shadow: 0px 0px 3px rgb(246, 247, 177) inset;
    color: white;
}

.switch3 {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 1px rgb(150, 255, 194) inset,
        0px 0px 2px rgb(150, 255, 194) inset,
        0px 0px 10px rgb(150, 255, 194) inset,
        0px 0px 40px rgb(150, 255, 194),
        0px 0px 100px rgb(150, 255, 194),
        0px 0px 5px rgb(150, 255, 194);
    border: 2px solid rgb(255, 255, 255);
    background-color: rgb(62, 202, 85);
    color: white;
}

.switch3_1 {
    position: relative;
    width: 35px;
    height: 35px;
    background-color: rgb(153, 244, 149);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(126, 255, 184);
    box-shadow: 0px 0px 3px rgb(246, 247, 177) inset;
    color: white;
}

.switch3_2 {
    position: relative;
    width: 35px;
    height: 35px;
    background-color: rgb(158, 255, 247);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(253, 255, 126);
    box-shadow: 0px 0px 3px rgb(246, 247, 177) inset;
    color: white;
}

.switch3_3 {
    position: relative;
    width: 35px;
    height: 35px;
    background-color: rgb(162, 255, 224);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(174, 255, 140);
    box-shadow: 0px 0px 3px rgb(177, 247, 216) inset;
    color: white;
}

/* .switch5 {
            position: relative;
            width: 35px;
            height: 35px;
            background-color: rgb(0, 221, 255);
            border-radius: 50%;
            z-index: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgb(126, 195, 255);
            box-shadow: 0px 0px 3px rgb(69, 112, 255) inset;
            color: white;
        } */

.switch2:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
}

.switch2:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
}

.switch2_5:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
}

.switch2_5:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
}

.switch3:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
}

.switch3:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
}

.switch3_1:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
}

.switch3_1:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
}

.switch3_2:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
}

.switch3_2:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
}

.switch3_3:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
}

.switch3_3:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
}

/* Arrow Animation */
.chevronsOG {
    margin-left: 10px;
    width: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    --color: #1cc256;

}

.chevron_text {
    margin-left: 15px;
    /* font-size: 16px; */
    border-radius: 15px;
    background: #f4f8ff;
    background-image: radial-gradient(at 88% 40%,
            hsla(240, 0%, 20%, 0) 0px,
            transparent 100%),
        radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
        radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
        radial-gradient(at 0% 64%, hsla(222, 77%, 50%, 0.5) 0px, transparent 100%),
        radial-gradient(at 41% 94%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%),
        radial-gradient(at 100% 99%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%);
    color: #ffffff;
    padding: 5px;
    font-size: 18px;
    vertical-align: middle;
}

.directionBack {
    transform: rotate(180deg);
}

.directionFront {
    transform: rotate(0deg);
}

.directionRight {
    transform: rotate(-90deg);
}

.directionLeft {
    transform: rotate(90deg);
}

.chevrondown {
    position: relative;
    border: solid var(--color);
    border-width: 0 10px 10px 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
}

.chevrondown:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
}

@keyframes pulse54012 {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 0.9;
    }
}

/* Chart */
.outter-chart-container {
    width: 25%;
    aspect-ratio: 4/3;
    height: auto;
    border-radius: 15px;
    background: #f4f8ff;
    background-image: radial-gradient(at 88% 40%,
            hsla(240, 0%, 20%, 0) 0px,
            transparent 100%),
        radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
        radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 0.5) 0px, transparent 0%),
        radial-gradient(at 0% 64%, hsla(222, 77%, 50%, 0.5) 0px, transparent 100%),
        radial-gradient(at 41% 94%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%),
        radial-gradient(at 100% 99%, hsla(222, 79%, 49%, 0.5) 0px, transparent 100%);
    /* color: #ffffff; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: 1rem;
    font-family: sans-serif;
    align-items: center;
    display: flex;
}

/* Tab container styling */
.tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    gap: 0.5rem;
    justify-content: center;
}

.tab-button {
    background: #ddd;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.tab-button.active {
    background: #4a90e2;
    color: #fff;
}

.tab-button:hover {
    background: #1c00bd;
    color: #fff;
}



/* Chart container styling */
.chart-container {
    width: 90%;
    height: auto;
    display: none;
    aspect-ratio: 16/9;
    /* min-height: 100px;  */
    /* Default to hidden for all tabs */
    background: linear-gradient(135deg, #293e8a 0%, #3a4b8a 43%, #092795 100%);
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    /* margin-bottom: 1rem; */
    max-width: 800px;
    /* margin: 0 auto 2rem auto; */
    /* Center horizontally */

}

.chart-container.active {
    display: block;
    /* Show the active tab*/
}

/* Chart header + legend */
.chart-header {
    margin-bottom: 0.5rem;
}

.chart-header h2 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
    /* color: #ffffff; */
    /* or your preferred color */
}

.chart-legend {
    font-size: 0.9rem;
    /* color: #ffffff; */
}

/* Canvas styling */
.chart-container canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    /* responsive; will scale */
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #0465b9;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .chart-container canvas {
        max-height: 100px;
    }
}

@media (max-width: 900px) {
    .outter-chart-container {
        display: none;
    }
}

/* 3D Three.js plot */
/* #visualization-container {
            position: relative; */
/* width: 100vw;
            height: 100vh; */
/* } */

#info-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 12px;
    border-radius: 8px;
    max-width: 300px;
    font-size: 14px;
    z-index: 10;
    pointer-events: none;
    transition: background-color 0.3s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dark #info-panel {
    background-color: rgba(16, 0, 88, 0.8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#selected-point-info {
    margin-top: 10px;
    font-weight: bold;
}

#loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    z-index: 20;
    display: none;
}

.dark #loading-indicator {
    background-color: rgba(40, 40, 40, 0.8);
}

.axis-label {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
}

#x-axis {
    color: #ff0000;
    bottom: 10px;
    right: 10px;
}

#y-axis {
    color: #00ff00;
    bottom: 30px;
    right: 10px;
}

#z-axis {
    color: #0000ff;
    bottom: 50px;
    right: 10px;
}

#rotation-controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.control-button {
    background-color: rgba(16, 0, 88, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s, transform 0.1s;
}

.control-button:hover {
    background-color: #4a49c0;
    transform: scale(1.05);
}

.control-button:active {
    transform: scale(0.95);
}

.dark .control-button {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}


@media (max-width: 600px) {
    #info-panel {
        max-width: 200px;
        font-size: 12px;
        padding: 8px;
    }

    .axis-label {
        font-size: 12px;
    }

    .hide-menu1 {
        display: none !important;
      }
}

/* universe button*/
.uiverse {
    --duration: 7s;
    --easing: linear;
    --c-color-1: #0035f7;
    --c-color-2: #69a5ff;
    --c-color-3: #c29fff;
    --c-color-4: rgba(222, 183, 6, 0.7);
    --c-shadow: rgba(99, 85, 255, 0.59);
    --c-shadow-inset-top: rgba(132, 156, 255, 0.9);
    --c-shadow-inset-bottom: rgba(62, 255, 229, 0.614);
    --c-radial-inner: #2637a4;
    --c-radial-outer: #0040ff;
    --c-color: #ffffff;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
    position: relative;
    cursor: pointer;
    border: none;
    display: table;
    border-radius: 24px;
    padding: 0;
    margin: 0;
    text-align: center;
    font-weight: 600;
    flex-shrink: 1; 
    font-size: clamp(16px, 2vw, 25px);
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: var(--c-color);
    background: radial-gradient(
      circle,
      var(--c-radial-inner),
      var(--c-radial-outer) 80%
    );
    box-shadow:
    0 0 0.5em rgba(0, 0, 0, 0.5),
    0 0 1em #d2cddf,
    0 0 0.5em #0675a5;
    animation: bounce_513 1.5s infinite;
    min-height: 60px;
  }

  .uiverse2 {
    --duration: 3s;
    --easing: linear;
    --c-color-1: #00b795;
    --c-color-2: #69dfff;
    --c-color-3: #271c8e;
    --c-color-4: rgba(10, 206, 255, 0.911);
    --c-shadow: rgba(85, 255, 212, 0.59);
    --c-shadow-inset-top: rgba(132, 156, 255, 0.9);
    --c-shadow-inset-bottom: rgba(62, 255, 229, 0.614);
    --c-radial-inner: #2637a4;
    --c-radial-outer: #5f64ea;
    --c-color: #ffffff;
    font-size: clamp(16px, 2vw, 25px);
  }

  @keyframes bounce_513 {

    0%,
    100% {
        transform: translateY(-15%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
  
  .uiverse:before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 28px;
    box-shadow:
      inset 0 3px 12px var(--c-shadow-inset-top),
      inset 0 -3px 4px var(--c-shadow-inset-bottom);
  }
  
  .uiverse .wrapper {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
    border-radius: 26px;
    min-width: 100px;
    min-height: 50px;
    padding: 12px 0;
  }
  
  .uiverse .wrapper span {
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  
  .uiverse:hover {
    --duration: 1400ms;
  }
  
  .uiverse .wrapper .circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    filter: blur(var(--blur, 8px));
    background: var(--background, transparent);
    transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
    animation: var(--animation, none) var(--duration) var(--easing) infinite;
  }
  
  .uiverse .wrapper .circle.circle-1,
  .uiverse .wrapper .circle.circle-9,
  .uiverse .wrapper .circle.circle-10 {
    --background: var(--c-color-4);
  }
  
  .uiverse .wrapper .circle.circle-3,
  .uiverse .wrapper .circle.circle-4 {
    --background: var(--c-color-2);
    --blur: 14px;
  }
  
  .uiverse .wrapper .circle.circle-5,
  .uiverse .wrapper .circle.circle-6 {
    --background: var(--c-color-3);
    --blur: 16px;
  }
  
  .uiverse .wrapper .circle.circle-2,
  .uiverse .wrapper .circle.circle-7,
  .uiverse .wrapper .circle.circle-8,
  .uiverse .wrapper .circle.circle-11,
  .uiverse .wrapper .circle.circle-12 {
    --background: var(--c-color-1);
    --blur: 12px;
  }
  
  .uiverse .wrapper .circle.circle-1 {
    --x: 0;
    --y: -40px;
    --animation: circle-1;
  }
  
  .uiverse .wrapper .circle.circle-2 {
    --x: 92px;
    --y: 8px;
    --animation: circle-2;
  }
  
  .uiverse .wrapper .circle.circle-3 {
    --x: -12px;
    --y: -12px;
    --animation: circle-3;
  }
  
  .uiverse .wrapper .circle.circle-4 {
    --x: 80px;
    --y: -12px;
    --animation: circle-4;
  }
  
  .uiverse .wrapper .circle.circle-5 {
    --x: 12px;
    --y: -4px;
    --animation: circle-5;
  }
  
  .uiverse .wrapper .circle.circle-6 {
    --x: 56px;
    --y: 16px;
    --animation: circle-6;
  }
  
  .uiverse .wrapper .circle.circle-7 {
    --x: 8px;
    --y: 28px;
    --animation: circle-7;
  }
  
  .uiverse .wrapper .circle.circle-8 {
    --x: 28px;
    --y: -4px;
    --animation: circle-8;
  }
  
  .uiverse .wrapper .circle.circle-9 {
    --x: 20px;
    --y: -12px;
    --animation: circle-9;
  }
  
  .uiverse .wrapper .circle.circle-10 {
    --x: 64px;
    --y: 16px;
    --animation: circle-10;
  }
  
  .uiverse .wrapper .circle.circle-11 {
    --x: 4px;
    --y: 4px;
    --animation: circle-11;
  }
  
  .uiverse .wrapper .circle.circle-12 {
    --blur: 14px;
    --x: 52px;
    --y: 4px;
    --animation: circle-12;
  }
  
  
  @keyframes circle-1 {
    33% {
      transform: translate(0px, 16px) translateZ(0);
    }
  
    66% {
      transform: translate(12px, 64px) translateZ(0);
    }
  }
  
  @keyframes circle-2 {
    33% {
      transform: translate(80px, -10px) translateZ(0);
    }
  
    66% {
      transform: translate(72px, -48px) translateZ(0);
    }
  }
  
  @keyframes circle-3 {
    33% {
      transform: translate(20px, 12px) translateZ(0);
    }
  
    66% {
      transform: translate(12px, 4px) translateZ(0);
    }
  }
  
  @keyframes circle-4 {
    33% {
      transform: translate(76px, -12px) translateZ(0);
    }
  
    66% {
      transform: translate(112px, -8px) translateZ(0);
    }
  }
  
  @keyframes circle-5 {
    33% {
      transform: translate(84px, 28px) translateZ(0);
    }
  
    66% {
      transform: translate(40px, -32px) translateZ(0);
    }
  }
  
  @keyframes circle-6 {
    33% {
      transform: translate(28px, -16px) translateZ(0);
    }
  
    66% {
      transform: translate(76px, -56px) translateZ(0);
    }
  }
  
  @keyframes circle-7 {
    33% {
      transform: translate(8px, 28px) translateZ(0);
    }
  
    66% {
      transform: translate(20px, -60px) translateZ(0);
    }
  }
  
  @keyframes circle-8 {
    33% {
      transform: translate(32px, -4px) translateZ(0);
    }
  
    66% {
      transform: translate(56px, -20px) translateZ(0);
    }
  }
  
  @keyframes circle-9 {
    33% {
      transform: translate(20px, -12px) translateZ(0);
    }
  
    66% {
      transform: translate(80px, -8px) translateZ(0);
    }
  }
  
  @keyframes circle-10 {
    33% {
      transform: translate(68px, 20px) translateZ(0);
    }
  
    66% {
      transform: translate(100px, 28px) translateZ(0);
    }
  }
  
  @keyframes circle-11 {
    33% {
      transform: translate(4px, 4px) translateZ(0);
    }
  
    66% {
      transform: translate(68px, 20px) translateZ(0);
    }
  }
  
  @keyframes circle-12 {
    33% {
      transform: translate(56px, 0px) translateZ(0);
    }
  
    66% {
      transform: translate(60px, -32px) translateZ(0);
    }
  }


  /* From Uiverse.io by augustin_4687 */ 
  .interButtonColor1{
    --stone-50: #fafaf9;
    --stone-800: #292524;
    --yellow-400: #dddddd;
  }

  .interButtonColor2{
    --stone-50: #fafaf9;
    --stone-800: #292524;
    --yellow-400: #c6e6ff;
  }

  .interButtonColor3{
    --stone-50: #fafaf9;
    --stone-800: #292524;
    --yellow-400: #aedfff;
  }
  .interButtonReady {
    --stone-50: #00be4f;
  }

  .interButtonPlaying {
    --stone-50: #0072be;
  }
.interButton {
    
    width: 25dvh;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    line-height: 1;
    padding: 1px;
    transform: translate(-4px, -4px);
    outline: 2px solid transparent;
    outline-offset: 5px;
    border-radius: 9999px;
    background-color: var(--stone-800);
    color: var(--stone-800);
    transition:
      transform 150ms ease,
      box-shadow 150ms ease;
    text-align: center;
    box-shadow:
      0.5px 0.5px 0 0 var(--stone-800),
      1px 1px 0 0 var(--stone-800),
      1.5px 1.5px 0 0 var(--stone-800),
      2px 2px 0 0 var(--stone-800),
      2.5px 2.5px 0 0 var(--stone-800),
      3px 3px 0 0 var(--stone-800),
      0 0 0 2px var(--stone-50),
      0.5px 0.5px 0 2px var(--stone-50),
      1px 1px 0 2px var(--stone-50),
      1.5px 1.5px 0 2px var(--stone-50),
      2px 2px 0 2px var(--stone-50),
      2.5px 2.5px 0 2px var(--stone-50),
      3px 3px 0 2px var(--stone-50),
      3.5px 3.5px 0 2px var(--stone-50),
      4px 4px 0 2px var(--stone-50);
  
    &:hover {
      transform: translate(0, 0);
      box-shadow: 0 0 0 2px var(--stone-50);
    }
  
    &:active,
    &:focus-visible {
      outline-color: var(--yellow-400);
    }
  
    &:focus-visible {
      outline-style: dashed;
    }
  
    & > div {
      position: relative;
      pointer-events: none;
      background-color: var(--yellow-400);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 9999px;
  
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 9999px;
        opacity: 0.5;
        background-image: radial-gradient(
            rgb(255 255 255 / 80%) 20%,
            transparent 20%
          ),
          radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
        background-position:
          0 0,
          4px 4px;
        background-size: 8px 8px;
        mix-blend-mode: hard-light;
        animation: dots 0.5s infinite linear;
      }
  
      & > span {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.25rem;
        gap: 0.25rem;
        filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.25));
  
        &:active {
          transform: translateY(2px);
        }
      }
    }
  }
  
  @keyframes dots {
    0% {
      background-position:
        0 0,
        4px 4px;
    }
    100% {
      background-position:
        8px 0,
        12px 4px;
    }
  }

  .sidebar-bottom1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 10px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
    /* margin-top: 20px; */
  }
  
  .CamBtn {
    width: 25dvw;
    height: auto;
    background-color: transparent;
    color: white;
    font-weight: bold;
    border-width: 5px;
    border-color: #5877ff;
    border-radius: 20px;
    transition: all 0.3s;
    margin: 5px;
    font-size: 20px;
    background-color: #002fc9;
  }
  .CamBtn2 {
    width: 25dvw;
    height: auto;
    background-color: transparent;
    color: white;
    font-weight: bold;
    border-width: 5px;
    border-color: #6278db;
    border-radius: 20px;
    transition: all 0.3s;
    margin: 5px;
    font-size: 15px;
    background-color: #3589d3;
  }
  
  .CamBtn:hover {
    transform: translateY(-10px);
    background-color: #2c8ee9;
  }
  
  .CamBtn::after {
    transform: translateY(0);
  }

  .report-container {
    /* width: 100%; 
    height: auto; */
    width: 1240px;
    /* width: 794px;    */
    /* height: 1123px;  */
    /* background: url('../images/FID_BAT_sitting_report_Empty.png') no-repeat center center; */
    /* background-size: 1240px 100%; */
    position: relative;
    margin: 0px auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
  }
  /* Overlay text fields (use absolute positioning to match your template) */
  .result-field {
    position: absolute;
    color: #333;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
  }
  .moduleHighRiskColor {
    color: #ff7673; /* Red for risk */
    /* black font outline */
    text-shadow: 1px 1px 0 #818181, -1px -1px 0 #818181, 1px -1px 0 #818181, -1px 1px 0 #818181;
  }

    .moduleLowRiskColor {
        color: #37c200; /* Green for no risk */
        text-shadow: 1px 1px 0 #818181, -1px -1px 0 #818181, 1px -1px 0 #818181, -1px 1px 0 #818181;
    }

    .moduleMediumRiskColor {
        color: #ffd857; /* Orange for medium risk */
        text-shadow: 1px 1px 0 #818181, -1px -1px 0 #818181, 1px -1px 0 #818181, -1px 1px 0 #818181;
    }

    .moduleGreenColor {
        color: #37c200; /* Green for no risk */
    }
    .moduleRedColor {
        color: #ff7673; /* Red for risk */
    }

  .module4-1Report {
    width: 1240px;
    height: 3508px;
    background: 
        url('../images/Accudex Lite Report 4-1 p1.png') no-repeat left top,
        url('../images/Accudex Lite Report 4-1 p2.png') no-repeat left bottom;
    /* background-size: 100%, 100%; */
  }

  @media print {
    .module4-1Report {
        page-break-inside: avoid; /* Avoid splitting the container mid-page */
    }
    }

  .module5-2Report {
    width: 1240px;
    height: 3668px;
    background: 
    url('../images/FID_BAT_sitting_report_Empty.png') no-repeat left top,
    url('../images/FID_BAT_sitting_report2.png') no-repeat left bottom;
  }
  /* Module 5-2 */
    /* Module 5-2: Report Page 1 */
  .module5-2Result1 { left: 303px; top: 622px; width: auto; font-size: 26px;}  /* Sitting Tolerance */
  .module5-2Result2 { left: 303px; top: 668px; width: auto; font-size: 26px;}  /* Good Sitting Time */
  .module5-2Result3 { left: 303px; top: 710px; width: auto; font-size: 26px;}  /* Bad Sitting Time */
  .module5-2Result4 { left: 473px; top: 668px; width: auto; font-size: 26px;}  /* Good Sitting % */
  .module5-2Result5 { left: 473px; top: 710px; width: auto; font-size: 26px;}  /* Bad Sitting % */
.module5-2Result12 { left: 303px; top: 752px; width: auto; font-size: 26px;} /* Not Sitting Time*/
    .module5-2Result13 { left: 473px; top: 752px;  width: auto; font-size: 26px;} /* Not Sitting % */
    .module5-2Result14 { left: 859px; top: 635px; width: auto; font-size: 30px;} /* Overall Result*/
    .module5-2Result15 { left: 960px; top: 693px; width: auto; font-size: 26px;} /* Change Count */

  /* Module 5-2: Report Personal Info */
.module5-2Result28 { left: 152px; top: 227px; width: auto; font-size: 26px;} /* ID */
.module5-2Result29 { left: 152px; top: 281px; width: auto; font-size: 26px;} /* Name */
.module5-2Result30 { left: 559px; top: 281px; width: auto; font-size: 26px;} /* Gender */
.module5-2Result31 { left: 747px; top: 281px; width: auto; font-size: 26px;} /* Edu Level */
.module5-2Result32 { left: 172px; top: 345px; width: auto; font-size: 26px;} /* Use Hand */
.module5-2Result33 { left: 478px; top: 345px; width: auto; font-size: 26px;} /* Birth */
.module5-2Result34 { left: 747px; top: 345px; width: auto; font-size: 26px;} /* Age */
.module5-2Result35 { left: 1014px; top: 281px; width: auto; font-size: 26px;} /* Height */
.module5-2Result36 { left: 192px; top: 408px; width: auto; font-size: 26px;} /* Center */
.module5-2Result37 { left: 478px; top: 408px; width: auto; font-size: 26px;} /* School */
.module5-2Result38 { left: 155px; top: 481px; width: auto; font-size: 16px;} /* Condition */

    /* Module 5-2: Angles Table (average values) */
    .module5-2Result6 { left: 670px; top: 1179px; width: auto; font-size: 26px;} /* Trunk Average*/
    .module5-2Result7 { left: 670px; top: 1222px; width: auto; font-size: 26px;} /* Shoulder Average*/
    .module5-2Result8 { left: 670px; top: 1265px; width: auto; font-size: 26px;} /* Elbow Average*/
    .module5-2Result9 { left: 670px; top: 1308px; width: auto; font-size: 26px;} /* Hip Average*/
    .module5-2Result10 { left: 670px; top: 1351px; width: auto; font-size: 26px;} /* Knee Average*/
    .module5-2Result11 { left: 670px; top: 1394px; width: auto; font-size: 26px;} /* Ankle Average*/
    .module5-2Result39 { left: 670px; top: 1437px; width: auto; font-size: 26px;} /* Knee non-dominant Average*/
    .module5-2Result40 { left: 670px; top: 1506px; width: auto; font-size: 26px;} /* Ankle non-dominant Average*/

    .module5-2Result16 { right: 413px; top: 1179px; width: auto; font-size: 26px;} /* Trunk Min */
    .module5-2Result17 { right: 413px; top: 1222px; width: auto; font-size: 26px;} /* Shoulder Min */
    .module5-2Result18 { right: 413px; top: 1265px; width: auto; font-size: 26px;} /* Elbow Min */
    .module5-2Result19 { right: 413px; top: 1308px; width: auto; font-size: 26px;} /* Hip Min */
    .module5-2Result20 { right: 413px; top: 1351px; width: auto; font-size: 26px;} /* Knee Min */
    .module5-2Result21 { right: 413px; top: 1394px; width: auto; font-size: 26px;} /* Ankle Min */
    .module5-2Result41 { right: 413px; top: 1437px; width: auto; font-size: 26px;} /* Knee non-dominant Min */
    .module5-2Result42 { right: 413px; top: 1506px; width: auto; font-size: 26px;} /* Ankle non-dominant Min */

    .module5-2Result22 { left: 878px; top: 1179px; width: auto; font-size: 26px;} /* Trunk Max */
    .module5-2Result23 { left: 878px; top: 1222px; width: auto; font-size: 26px;} /* Shoulder Max */
    .module5-2Result24 { left: 878px; top: 1265px; width: auto; font-size: 26px;} /* Elbow Max */
    .module5-2Result25 { left: 878px; top: 1308px; width: auto; font-size: 26px;} /* Hip Max */
    .module5-2Result26 { left: 878px; top: 1351px; width: auto; font-size: 26px;} /* Knee Max */
    .module5-2Result27 { left: 878px; top: 1394px; width: auto; font-size: 26px;} /* Ankle Max */
    .module5-2Result43 { left: 878px; top: 1437px; width: auto; font-size: 26px;} /* Knee non-dominant Max */
    .module5-2Result44 { left: 878px; top: 1506px; width: auto; font-size: 26px;} /* Ankle non-dominant Max */

    /* Module 5-2: Special Notes */
    .module5-2Result45 { left: 465px; top: 1480px; width: auto; font-size: 13px;} /* Knee Special Notes */
    .module5-2Result46 { left: 465px; top: 1545px; width: auto; font-size: 13px;} /* Ankle Special Notes */

    /* Module 5-2: Chart */
    .module5-2Result47 { left: 137px; top: 821px;}
    #chart5-2-container {
        width: 967px;
        max-width: 100vw;
        height: 283px;
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 16px #0001;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #chart5-2 {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
      }

    /* Module 5-2: Page2 */
    .module5-2Result48 { left: 152px; top: calc(1834px + 227px); width: auto; font-size: 26px;} /* ID */
    .module5-2Result49 { left: 152px; top: calc(1834px + 281px); width: auto; font-size: 26px;} /* Name */
    .module5-2Result50 { left: 559px; top: calc(1834px + 281px); width: auto; font-size: 26px;} /* Gender */
    .module5-2Result51 { left: 747px; top: calc(1834px + 281px); width: auto; font-size: 26px;} /* Edu Level */
    .module5-2Result52 { left: 172px; top: calc(1834px + 345px); width: auto; font-size: 26px;} /* Use Hand */
    .module5-2Result53 { left: 478px; top: calc(1834px + 345px); width: auto; font-size: 26px;} /* Birth */
    .module5-2Result54 { left: 747px; top: calc(1834px + 345px); width: auto; font-size: 26px;} /* Age */
    .module5-2Result55 { left: 1014px; top: calc(1834px + 281px); width: auto; font-size: 26px;} /* Height */
    .module5-2Result56 { left: 192px; top: calc(1834px + 408px); width: auto; font-size: 26px;} /* Center */
    .module5-2Result57 { left: 478px; top: calc(1834px + 408px); width: auto; font-size: 26px;} /* School */

    .module5-2Result58 { left: 303px; top: calc(1834px + 622px); width: auto; font-size: 26px;}  /* Sitting Tolerance */
    .module5-2Result59 { left: 303px; top: calc(1834px + 668px); width: auto; font-size: 26px;}  /* Good Sitting Time */
    .module5-2Result60 { left: 303px; top: calc(1834px + 710px); width: auto; font-size: 26px;}  /* Bad Sitting Time */
    .module5-2Result61 { left: 473px; top: calc(1834px + 668px); width: auto; font-size: 26px;}  /* Good Sitting % */
    .module5-2Result62 { left: 473px; top: calc(1834px + 710px); width: auto; font-size: 26px;}  /* Bad Sitting % */
    .module5-2Result63 { left: 303px; top: calc(1834px + 752px); width: auto; font-size: 26px;} /* Not Sitting Time*/
    .module5-2Result64 { left: 473px; top: calc(1834px + 752px);  width: auto; font-size: 26px;} /* Not Sitting % */
    .module5-2Result65 { left: 815px; top: calc(1834px + 652px); width: auto; font-size: 50px;} /* Overall Result*/

      /* Module 5-2: Pie Chart */
    .module5-2Result66 { left: 137px; top: calc(1834px + 900px);}
    #pieChart5-2-container {
        width: 633px;
      height: 633px;
      max-width: 100vw;
      max-height: 100vw;
      margin: 0 auto;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 16px #0001;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      }
      #pieChart5-2 {
        width: 633px;
      height: 633px;
        min-width: 0;
        min-height: 0;
      }

    .moduleFIDBATReportDate1 { left: 788px; top: 227px; width: auto; font-size: 26px;} /* page 1 Report Date */
    .moduleFIDBATReportDate2 { left: 788px; top: calc(1834px + 227px); width: auto; font-size: 26px;} /* page 2 Report Date */
    .moduleFIDBATReportDate3 { left: 788px; top: calc(3668px + 227px); width: auto; font-size: 26px;} /* page 3 Report Date */

    /* Module 4-1 Page 1*/
    .module4-1Result1 { left: 550px; top: 79px; width: auto; font-size: 20px;} /* Name */
    .module4-1Result108 { left: 820px; top: 79px; width: auto; font-size: 20px;} /* Temp PIN For HH */
    .module4-1Result2 { left: 549px; top: 122px; width: auto; font-size: 20px;} /* Height */
    .module4-1Result3 { left: 678px; top: 122px; width: auto; font-size: 20px; } /* Gender */
    .module4-1Result4 { left: 820px; top: 122px; width: auto; font-size: 20px;} /* Birth */
    .module4-1Result5 { left: 1001px; top: 122px; width: auto; font-size: 20px;} /* Date */
    .module4-1Result11 { left: 975px; top: 936px; width: auto; font-size: 32px;} /* Cervical Spine Flexion Risk Level */
    .module4-1Result12 { left: 975px; top: 1127px; width: auto; font-size: 32px;} /* Head Rotation Risk Level */
    .module4-1Result13 { left: 975px; top: 1319px; width: auto; font-size: 32px;} /* Rounded Shoulder Risk Level */
    .module4-1Result14 { left: 975px; top: 1511px; width: auto; font-size: 32px;} /* Shoulder Height Difference Risk Level */
    .module4-1Result23 { left: 974px; top: 157px; width: auto; font-size: 80px; color: #fff;} /* Total Score */
    .module4-1Result24 { left: 322px; top: 422px; width: auto; font-size: 30px;} /* Head Score */
    .module4-1Result25 { left: 322px; top: 507px; width: auto; font-size: 30px;} /* Shoulder Score */
    .module4-1Result26 { left: 322px; top: 593px; width: auto; font-size: 30px;} /* Torso Score */
    .module4-1Result27 { left: 322px; top: 677px; width: auto; font-size: 30px;} /* Hip Score */
    .module4-1Result28 { left: 322px; top: 765px; width: auto; font-size: 30px;} /* Legs Score */
    .module4-1Result29 { left: 712px; top: 409px; width: auto; font-size: 18px;} /* Head Rotation on body angle */
    .module4-1Result30 { left: 726px; top: 447px; width: auto; font-size: 18px;} /* Shoulder Height Difference on body angle */
    .module4-1Result31 { left: 726px; top: 525px; width: auto; font-size: 18px;} /* Torso on body angle */
    .module4-1Result32 { left: 701px; top: 564px; width: auto; font-size: 18px;} /* Hip on body angle */
    .module4-1Result33 { left: 714px; top: 653px; width: auto; font-size: 18px;} /* Left Leg on body angle */
    .module4-1Result34 { left: 481px; top: 653px; width: auto; font-size: 18px;} /* Right Leg on body angle */
    .module4-1Result35 { left: 1133px; top: 408px; width: auto; font-size: 18px;} /* Side Head on body angle */
    .module4-1Result36 { left: 1142px; top: 462px; width: auto; font-size: 18px;} /* Side Shoulder on body angle */
    .module4-1Result37 { left: 1133px; top: 639px; width: auto; font-size: 18px;} /* Side legs on body angle */
    .module4-1Result38 { left: 381px; top: 951px; width: auto; font-size: 20px;} /* Cervical Spine Flexion angle text*/
    .module4-1Result39 { left: 381px; top: 985px; width: auto; font-size: 25px;} /* Cervical Spine Flexion angle below text*/
    .module4-1Result40 { left: 381px; top: 1135px; width: auto; font-size: 20px;} /* Head Rotation angle text*/
    .module4-1Result41 { left: 381px; top: 1179px; width: auto; font-size: 25px;} /* Head Rotation angle below text*/
    .module4-1Result42 { left: 381px; top: 1327px; width: auto; font-size: 20px;} /* Rounded Shoulder angle text*/
    .module4-1Result43 { left: 381px; top: 1371px; width: auto; font-size: 25px;} /* Rounded Shoulder angle below text*/
    .module4-1Result44 { left: 381px; top: 1529px; width: auto; font-size: 20px;} /* Shoulder Height Difference angle text*/
    .module4-1Result45 { left: 381px; top: 1563px; width: auto; font-size: 25px;} /* Shoulder Height Difference angle below text*/
    .module4-1Result62-1 { z-index: 10; left: 168px; top: 949px; width: 180px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Cervical Spine Flexion.png') no-repeat top left;
        background-size: 50%; 
    } /* Cervical Spine Flexion png 1*/
    .module4-1Result62-2 { z-index: 10; left: 168px; top: 949px; width: 179px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Cervical Spine Flexion Acceptable forward.png') no-repeat top left;
        background-size: 50%; 
    } /* Cervical Spine Flexion png 2*/
    .module4-1Result62-3 { z-index: 10; left: 168px; top: 949px; width: 189px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Cervical Spine Flexion High Risk forward.png') no-repeat top left;
        background-size: 50%;
    } /* Cervical Spine Flexion png 3*/
    .module4-1Result62-4 { z-index: 10; left: 168px; top: 949px; width: 164px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Cervical Spine Flexion Acceptable backward.png') no-repeat top left;
        background-size: 50%;
    } /* Cervical Spine Flexion png 4*/
    .module4-1Result62-5 { z-index: 10; left: 168px; top: 949px; width: 160px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Cervical Spine Flexion High Risk backward.png') no-repeat top left;
        background-size: 50%;
    } /* Cervical Spine Flexion png 5*/

    .module4-1Result63-1 { z-index: 10; left: 152px; top: 1139px; width: 225px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Head Rotation.png') no-repeat top left;
        background-size: 50%; 
    } /* Head Rotation png 1*/
    .module4-1Result63-2 { z-index: 10; left: 152px; top: 1139px; width: 222px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Head Rotation Acceptable left.png') no-repeat top left;
        background-size: 50%; 
    } /* Head Rotation png 2*/
    .module4-1Result63-3 { z-index: 10; left: 152px; top: 1139px; width: 230px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Head Rotation High Risk left.png') no-repeat top left;
        background-size: 50%; 
    } /* Head Rotation png 3*/
    .module4-1Result63-4 { z-index: 10; left: 152px; top: 1139px; width: 243px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Head Rotation Acceptable right.png') no-repeat top left;
        background-size: 50%; 
    } /* Head Rotation png 4*/
    .module4-1Result63-5 { z-index: 10; left: 152px; top: 1139px; width: 253px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Head Rotation High Risk right.png') no-repeat top left;
        background-size: 50%; 
    } /* Head Rotation png 5*/

    .module4-1Result64-1 { z-index: 10; left: 175px; top: 1323px; width: 142px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Rounded Shoulder.png') no-repeat top left;
        background-size: 50%; 
    } /* Rounded Shoulder png 1*/
    .module4-1Result64-2 { z-index: 10; left: 175px; top: 1323px; width: 124px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Rounded Shoulder Protraction Acceptable.png') no-repeat top left;
        background-size: 50%; 
    } /* Rounded Shoulder png 2*/
    .module4-1Result64-3 { z-index: 10; left: 175px; top: 1323px; width: 155px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Rounded Shoulder Protraction High Risk.png') no-repeat top left;
        background-size: 50%; 
    } /* Rounded Shoulder png 3*/
    .module4-1Result64-4 { z-index: 10; left: 175px; top: 1323px; width: 122px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Rounded Shoulder Retraction Acceptable.png') no-repeat top left;
        background-size: 50%; 
    } /* Rounded Shoulder png 4*/
    .module4-1Result64-5 { z-index: 10; left: 175px; top: 1323px; width: 134px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Rounded Shoulder Retraction High Risk.png') no-repeat top left;
        background-size: 50%; 
    } /* Rounded Shoulder png 5*/

    .module4-1Result65-1 { z-index: 10; left: 155px; top: 1519px; width: 226px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder Height Difference.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder Height Difference png 1*/
    .module4-1Result65-2 { z-index: 10; left: 155px; top: 1519px; width: 226px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder Height Difference Acceptable left.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder Height Difference png 2*/
    .module4-1Result65-3 { z-index: 10; left: 155px; top: 1519px; width: 226px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder Height Difference High Risk left.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder Height Difference png 3*/
    .module4-1Result65-4 { z-index: 10; left: 155px; top: 1519px; width: 226px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder Height Difference Acceptable right.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder Height Difference png 4*/
    .module4-1Result65-5 { z-index: 10; left: 155px; top: 1519px; width: 226px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder Height Difference High Risk right.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder Height Difference png 5*/

    .module4-1Result74 { z-index: 10; top: 260px; width: 35px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow.png') no-repeat top left;
    } /* scale arrow png*/

    .module4-1Result75 { z-index: 10; top: 1015px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Cervical Spine Flexion scale arrow png*/
    .module4-1Result76 { z-index: 10; top: 1207px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Head Rotation scale arrow png*/
    .module4-1Result77 { z-index: 10; top: 1399px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Rounded Shoulder scale arrow png*/
    .module4-1Result78 { z-index: 10; top: 1591px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Shoulder Height Difference scale arrow png*/



    .module4-1Result87 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Head Rotation Left.png') no-repeat top left;
    } /* Front: Head Rotation Left arrow png*/

    .module4-1Result88 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Head Rotation Right.png') no-repeat top left;
    } /* Front: Head Rotation Right arrow png*/

    .module4-1Result89 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Left Knee Valgus.png') no-repeat top left;
    } /* Front: Left Knee Valgus arrow png*/

    .module4-1Result90 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Left Knee Varus.png') no-repeat top left;
    } /* Front: Left Knee Varus arrow png*/

    .module4-1Result91 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Right Knee Valgus.png') no-repeat top left;
    } /* Front: Right Knee Valgus arrow png*/

    .module4-1Result92 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Right Knee Varus.png') no-repeat top left;
    } /* Front: Right Knee Varus arrow png*/

    .module4-1Result93 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Pelvic Rotation Left.png') no-repeat top left;
    } /* Front: Pelvic Rotation Left arrow png*/

    .module4-1Result94 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Pelvic Rotation Right.png') no-repeat top left;
    } /* Front: Pelvic Rotation Right arrow png*/

    .module4-1Result95 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Pelvic Tilt Left Arrow.png') no-repeat top left;
    } /* Front: Pelvic Tilt Left Arrow png*/

    .module4-1Result96 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Pelvic Tilt Right Arrow.png') no-repeat top left;
    } /* Front: Pelvic Tilt Right Arrow png*/

    .module4-1Result97 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Pelvic Tilt Left.png') no-repeat top left;
    } /* Front: Pelvic Tilt Left Line png*/

    .module4-1Result98 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Pelvic Tilt Right.png') no-repeat top left;
    } /* Front: Pelvic Tilt Right Line png*/

    .module4-1Result99 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Shoulder Tilt Left Arrow.png') no-repeat top left;
    } /* Front: Shoulder Tilt Left Arrow png*/

    .module4-1Result100 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Shoulder Tilt Right Arrow.png') no-repeat top left;
    } /* Front: Shoulder Tilt Right Arrow png*/

    .module4-1Result101 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Shoulder Tilt Left.png') no-repeat top left;
    } /* Front: Shoulder Tilt Left Line png*/

    .module4-1Result102 { z-index: 10; left: 451px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Shoulder Tilt Right.png') no-repeat top left;
    } /* Front: Shoulder Tilt Right Line png*/



    .module4-1Result103 { z-index: 10; left: 880px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Cervical Spine Backward.png') no-repeat top left;
    } /* Side: Cervical Spine Backward arrow png*/

    .module4-1Result104 { z-index: 10; left: 880px; top: 349px; width: 307px; height: 100%; max-height:530px;
        background: url('../images/5-2Arrows/Cervical Spine Forward.png') no-repeat top left;
    } /* Side: Cervical Spine Forward arrow png*/

    .module4-1Result105 { z-index: 10; left: 880px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Knee Flexion Forward.png') no-repeat top left;
    } /* Side: Knee Flexion Forward arrow png*/

    .module4-1Result106 { z-index: 10; left: 880px; top: 349px; width: 307px; height: 100%; max-height: 530px;
        background: url('../images/5-2Arrows/Rounded Shoulder Backward.png') no-repeat top left;
    } /* Side: Rounded Shoulder Backward arrow png*/

    .module4-1Result107 { z-index: 10; left: 880px; top: 349px; width: 307px; height: 100%; max-height:530px;
        background: url('../images/5-2Arrows/Rounded Shoulder Forward.png') no-repeat top left;
    } /* Side: Rounded Shoulder Forward arrow png*/


    /* Module 4-1 Page 2*/
    .module4-1Result6 { left: 550px; top: 1833px; width: auto; font-size: 20px;} /* Name */
    .module4-1Result109 { left: 824px; top: 1833px; width: auto; font-size: 20px;} /* Temp PIN For HH */
    .module4-1Result7 { left: 549px; top: 1876px; width: auto; font-size: 20px;} /* Height */
    .module4-1Result8 { left: 678px; top: 1876px; width: auto; font-size: 20px;} /* Gender */
    .module4-1Result9 { left: 824px; top: 1876px; width: auto; font-size: 20px;} /* Birth */
    .module4-1Result10 { left: 1001px; top: 1876px; width: auto; font-size: 20px;} /* Date */
    .module4-1Result15 { left: 975px; top: 1954px; width: auto; font-size: 32px;} /* Shoulder-hip Misalignment Risk Level */
    .module4-1Result16 { left: 975px; top: 2146px; width: auto; font-size: 32px;} /* Elbow Flexion Risk Level */
    .module4-1Result17 { left: 975px; top: 2338px; width: auto; font-size: 32px;} /* Thoracic Kyphosis Risk Level */
    .module4-1Result18 { left: 975px; top: 2530px; width: auto; font-size: 32px;} /* Pelvic Rotation Risk Level */
    .module4-1Result19 { left: 975px; top: 2722px; width: auto; font-size: 32px;} /* Pelvic Lateral Tilt Risk Level */
    .module4-1Result20 { left: 975px; top: 2914px; width: auto; font-size: 32px;} /* Knee Flexion Risk Level */
    .module4-1Result21 { left: 975px; top: 3106px; width: auto; font-size: 32px;} /* Left Knee Alignment Risk Level */
    .module4-1Result22 { left: 975px; top: 3298px; width: auto; font-size: 32px;} /* Right Knee Alignment Risk Level */
    .module4-1Result46 { left: 381px; top: 1972px; width: auto; font-size: 20px;} /* Shoulder-hip Misalignment angle text */
    .module4-1Result47 { left: 381px; top: 2009px; width: auto; font-size: 25px;} /* Shoulder-hip Misalignment angle below text*/
    .module4-1Result48 { left: 381px; top: 2164px; width: auto; font-size: 20px;} /* Elbow Flexion angle text */
    .module4-1Result49 { left: 381px; top: 2201px; width: auto; font-size: 25px;} /* Elbow Flexion angle below text*/
    .module4-1Result50 { left: 381px; top: 2356px; width: auto; font-size: 20px;} /* Thoracic Kyphosis angle text */
    .module4-1Result51 { left: 381px; top: 2393px; width: auto; font-size: 25px;} /* Thoracic Kyphosis angle below text*/
    .module4-1Result52 { left: 381px; top: 2548px; width: auto; font-size: 20px;} /* Pelvic Rotation angle text */
    .module4-1Result53 { left: 381px; top: 2585px; width: auto; font-size: 25px;} /* Pelvic Rotation angle below text*/
    .module4-1Result54 { left: 381px; top: 2739px; width: auto; font-size: 20px;} /* Pelvic Lateral Tilt angle text */
    .module4-1Result55 { left: 381px; top: 2776px; width: auto; font-size: 25px;} /* Pelvic Lateral Tilt angle below text*/
    .module4-1Result56 { left: 381px; top: 2931px; width: auto; font-size: 20px;} /* Knee Flexion angle text */
    .module4-1Result57 { left: 381px; top: 2968px; width: auto; font-size: 25px;} /* Knee Flexion angle below text*/
    .module4-1Result58 { left: 381px; top: 3123px; width: auto; font-size: 20px;} /* Left Knee Alignment angle text */
    .module4-1Result59 { left: 381px; top: 3160px; width: auto; font-size: 25px;} /* Left Knee Alignment angle below text*/
    .module4-1Result60 { left: 381px; top: 3315px; width: auto; font-size: 20px;} /* Right Knee Alignment angle text */
    .module4-1Result61 { left: 381px; top: 3352px; width: auto; font-size: 25px;} /* Right Knee Alignment angle below text*/

    .module4-1Result66-1 { z-index: 10; left: 169px; top: 1953px; width: 155px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder-hip Misalignment.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder-hip Misalignment png 1*/
    .module4-1Result66-2 { z-index: 10; left: 169px; top: 1953px; width: 163px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder-hip Misalignment Acceptable left.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder-hip Misalignment png 2*/
    .module4-1Result66-3 { z-index: 10; left: 169px; top: 1953px; width: 162px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder-hip Misalignment High Risk left.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder-hip Misalignment png 3*/
    .module4-1Result66-4 { z-index: 10; left: 169px; top: 1953px; width: 163px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder-hip Misalignment Acceptable right.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder-hip Misalignment png 4*/
    .module4-1Result66-5 { z-index: 10; left: 169px; top: 1953px; width: 162px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Shoulder-hip Misalignment High Risk right.png') no-repeat top left;
        background-size: 50%; 
    } /* Shoulder-hip Misalignment png 5*/

    .module4-1Result67-1 { z-index: 10; left: 187px; top: 2156px; width: 122px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Elbow Flexion.png') no-repeat top left;
        background-size: 50%; 
    } /* Elbow Flexion png 1*/
    .module4-1Result67-2 { z-index: 10; left: 187px; top: 2156px; width: 89px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Elbow Flexion Acceptable.png') no-repeat top left;
        background-size: 50%; 
    } /* Elbow Flexion png 2*/
    .module4-1Result67-3 { z-index: 10; left: 187px; top: 2156px; width: 95px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Elbow Flexion High Risk.png') no-repeat top left;
        background-size: 50%; 
    } /* Elbow Flexion png 3*/

    .module4-1Result68-1 { z-index: 10; left: 134px; top: 2353px; width: 252px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Thoracic kyphosis Normal.png') no-repeat top left;
        background-size: 50%; 
    } /* Thoracic Kyphosis png 1*/
    .module4-1Result68-2 { z-index: 10; left: 134px; top: 2353px; width: 222px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Thoracic kyphosis Mild.png') no-repeat top left;
        background-size: 50%; 
    } /* Thoracic Kyphosis png 2*/
    .module4-1Result68-3 { z-index: 10; left: 134px; top: 2353px; width: 252px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Thoracic kyphosis Severe.png') no-repeat top left;
        background-size: 50%; 
    } /* Thoracic Kyphosis png 3*/
    .module4-1Result68-4 { z-index: 10; left: 134px; top: 2353px; width: 252px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Lordois.png') no-repeat top left;
        background-size: 50%; 
    } /* Thoracic Kyphosis png 4*/

    .module4-1Result69-1 { z-index: 10; left: 167px; top: 2547px; width: 184px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Rotation.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Rotation png 1*/
    .module4-1Result69-2 { z-index: 10; left: 167px; top: 2547px; width: 137px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Rotation Acceptable left.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Rotation png 2*/
    .module4-1Result69-3 { z-index: 10; left: 167px; top: 2547px; width: 131px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Rotation High Risk left.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Rotation png 3*/
    .module4-1Result69-4 { z-index: 10; left: 167px; top: 2547px; width: 137px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Rotation Acceptable right.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Rotation png 4*/
    .module4-1Result69-5 { z-index: 10; left: 167px; top: 2547px; width: 131px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Rotation High Risk right.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Rotation png 5*/

    .module4-1Result70-1 { z-index: 10; left: 166px; top: 2738px; width: 190px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Lateral Tilt.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Lateral Tilt png 1*/
    .module4-1Result70-2 { z-index: 10; left: 166px; top: 2738px; width: 137px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Lateral Tilt Acceptable left.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Lateral Tilt png 2*/
    .module4-1Result70-3 { z-index: 10; left: 166px; top: 2738px; width: 139px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Lateral Tilt High Risk left.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Lateral Tilt png 3*/
    .module4-1Result70-4 { z-index: 10; left: 166px; top: 2738px; width: 137px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Lateral Tilt Acceptable right.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Lateral Tilt png 4*/
    .module4-1Result70-5 { z-index: 10; left: 166px; top: 2738px; width: 139px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Pelvic Lateral Tilt High Risk right.png') no-repeat top left;
        background-size: 50%; 
    } /* Pelvic Lateral Tilt png 5*/

    .module4-1Result71-1 { z-index: 10; left: 162px; top: 2934px; width: 156px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Knee Flexion.png') no-repeat top left;
        background-size: 50%; 
    } /* Knee Flexion png 1*/
    .module4-1Result71-2 { z-index: 10; left: 162px; top: 2934px; width: 143px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Knee Flexion Acceptable.png') no-repeat top left;
        background-size: 50%; 
    } /* Knee Flexion png 2*/
    .module4-1Result71-3 { z-index: 10; left: 162px; top: 2934px; width: 140px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Knee Flexion High Risk.png') no-repeat top left;
        background-size: 50%; 
    } /* Knee Flexion png 3*/

    .module4-1Result72-1 { z-index: 10; left: 170px; top: 3121px; width: 219px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Left Knee Alignment.png') no-repeat top left;
        background-size: 50%; 
    } /* Left Knee Alignment png 1*/
    .module4-1Result72-2 { z-index: 10; left: 170px; top: 3121px; width: 187px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Left Knee Valgus Acceptable.png') no-repeat top left;
        background-size: 50%; 
    } /* Left Knee Alignment png 2*/
    .module4-1Result72-3 { z-index: 10; left: 170px; top: 3121px; width: 198px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Left Knee Valgus High Risk.png') no-repeat top left;
        background-size: 50%; 
    } /* Left Knee Alignment png 3*/
    .module4-1Result72-4 { z-index: 10; left: 170px; top: 3121px; width: 146px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Left Knee Varus Acceptable.png') no-repeat top left;
        background-size: 50%; 
    } /* Left Knee Alignment png 4*/
    .module4-1Result72-5 { z-index: 10; left: 170px; top: 3121px; width: 200px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Left Knee Varus High Risk.png') no-repeat top left;
        background-size: 50%; 
    } /* Left Knee Alignment png 5*/

    .module4-1Result73-1 { z-index: 10; left: 170px; top: 3318px; width: 219px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Right Knee Alignment.png') no-repeat top left;
        background-size: 50%; 
    } /* Right Knee Alignment png 1*/
    .module4-1Result73-2 { z-index: 10; left: 170px; top: 3318px; width: 187px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Right Knee Valgus Acceptable.png') no-repeat top left;
        background-size: 50%; 
    } /* Right Knee Alignment png 1*/
    .module4-1Result73-3 { z-index: 10; left: 170px; top: 3318px; width: 198px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Right Knee Valgus High Risk.png') no-repeat top left;
        background-size: 50%; 
    } /* Right Knee Alignment png 1*/
    .module4-1Result73-4 { z-index: 10; left: 170px; top: 3318px; width: 146px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Right Knee Varus Acceptable.png') no-repeat top left;
        background-size: 50%; 
    } /* Right Knee Alignment png 1*/
    .module4-1Result73-5 { z-index: 10; left: 170px; top: 3318px; width: 200px; height: 100%; max-height: 300px;
        background: url('../images/Accudex Lite Posture Report Figure 1/Right Knee Varus High Risk.png') no-repeat top left;
        background-size: 50%; 
    } /* Right Knee Alignment png 1*/

    .module4-1Result79 { z-index: 10; top: 2035px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Shoulder-hip Misalignment scale arrow png*/
    .module4-1Result80 { z-index: 10; top: 2228px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Elbow Flexion scale arrow png*/
    .module4-1Result81 { z-index: 10; top: 2421px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Thoracic Kyphosis scale arrow png*/
    .module4-1Result82 { z-index: 10; top: 2614px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Pelvic Rotation scale arrow png*/
    .module4-1Result83 { z-index: 10; top: 2806px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Pelvic Lateral Tilt scale arrow png*/
    .module4-1Result84 { z-index: 10; top: 3000px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Knee Flexion scale arrow png*/
    .module4-1Result85 { z-index: 10; top: 3193px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Left Knee Alignment scale arrow png*/
    .module4-1Result86 { z-index: 10; top: 3385px; width: 30px; height: 100%; max-height: 50px;
        background: url('../images/scaleArrow2.png') no-repeat top left;
    } /* Right Knee Alignment scale arrow png*/



    .exceltable { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-bottom: 2rem; }
    th, td { border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: left; }
    th { background: #f4f4f4; }

    /* Module 5-0 */
    .module5-0Report {
    width: 1240px;
    height: 3668px;
    background: 
    url('../images/FID_BAT_pencil_report1.png') no-repeat left top,
    url('../images/FID_BAT_pencil_report2.png') no-repeat left bottom;
  }
  
    /* Module 5-0: Report Page 1 */
    .module5-0Result1 { left: 303px; top: 622px; width: auto; font-size: 26px;}  /* Total Time */
    .module5-0Result2 { left: 775px; top: 630px; width: auto; font-size: 40px;} /* Overall Result*/

    /* Module 5-0: Report Personal Info */
    .module5-0Result3 { left: 152px; top: 227px; width: auto; font-size: 26px;} /* ID */
    .module5-0Result4 { left: 152px; top: 281px; width: auto; font-size: 26px;} /* Name */
    .module5-0Result5 { left: 559px; top: 281px; width: auto; font-size: 26px;} /* Gender */
    .module5-0Result6 { left: 765px; top: 281px; width: auto; font-size: 26px;} /* Edu Level */
    .module5-0Result7 { left: 172px; top: 345px; width: auto; font-size: 26px;} /* Use Hand */
    .module5-0Result8 { left: 478px; top: 345px; width: auto; font-size: 26px;} /* Birth */
    .module5-0Result9 { left: 747px; top: 345px; width: auto; font-size: 26px;} /* Age */
    .module5-0Result10 { left: 1014px; top: 281px; width: auto; font-size: 26px;} /* Height */
    .module5-0Result11 { left: 192px; top: 408px; width: auto; font-size: 26px;} /* Center */
    .module5-0Result12 { left: 478px; top: 408px; width: auto; font-size: 26px;} /* School */
    .module5-0Result13 { left: 155px; top: 481px; width: auto; font-size: 16px;} /* Condition */


    /* Module 5-0: Chart */
    .module5-0Result14 { left: 137px; top: 821px;}
    #piecChart5-0-container {
        width: calc(1933px / 2);
        max-width: 100vw;
        height: calc(1354px / 2);
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 16px #0001;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #pieChart5-0 {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
      }

      .module5-0Result15 { left: calc(273px / 2); top: calc(543px / 2 + 1834px);}
    #listChart5-0-container {
        width: calc(1933px / 2);
        max-width: 100vw;
        height: calc(2274px / 2);
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 16px #0001;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #listChart5-0 {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
      }


      /* Module 5-05-2 */
    .module5-05-2Report {
  width: 1240px;
  height: 7336px;
  background-image: 
    url('../images/FID_BAT_sitting_report_Empty.png'),
    url('../images/FID_BAT_sitting_report2.png'),
    url('../images/FID_BAT_pencil_report1.png'),
    url('../images/FID_BAT_pencil_report2.png');
  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-position: 
    left top,
    left 0px bottom 3668px,  /* Positioned directly below the first image */
    left 0px bottom 1834px,  /* Positioned directly below the second image */
    left bottom;             /* Positioned at the very bottom */
}
  


      /* Module 5-05-2: Report Page 1 */
    .module5-0R5-2esult1 { left: 303px; top: calc(622px + 3668px); width: auto; font-size: 26px;}  /* Total Time */
    .module5-05-2Result2 { left: 775px; top: calc(630px + 3668px); width: auto; font-size: 40px;} /* Overall Result*/
    /* Module 5-05-2: Report Personal Info */
    .module5-05-2Result3 { left: 152px; top: calc(227px + 3668px); width: auto; font-size: 26px;} /* ID */
    .module5-05-2Result4 { left: 152px; top: calc(281px + 3668px); width: auto; font-size: 26px;} /* Name */
    .module5-05-2Result5 { left: 559px; top: calc(281px + 3668px); width: auto; font-size: 26px;} /* Gender */
    .module5-05-2Result6 { left: 747px; top: calc(281px + 3668px); width: auto; font-size: 26px;} /* Edu Level */
    .module5-05-2Result7 { left: 172px; top: calc(345px + 3668px); width: auto; font-size: 26px;} /* Use Hand */
    .module5-05-2Result8 { left: 478px; top: calc(345px + 3668px); width: auto; font-size: 26px;} /* Birth */
    .module5-05-2Result9 { left: 747px; top: calc(345px + 3668px); width: auto; font-size: 26px;} /* Age */
    .module5-05-2Result10 { left: 1014px; top: calc(281px + 3668px); width: auto; font-size: 26px;} /* Height */
    .module5-05-2Result11 { left: 192px; top: calc(408px + 3668px); width: auto; font-size: 26px;} /* Center */
    .module5-05-2Result12 { left: 478px; top: calc(408px + 3668px); width: auto; font-size: 26px;} /* School */
    .module5-05-2Result13 { left: 155px; top: calc(481px + 3668px); width: auto; font-size: 16px;} /* Condition */
    /* Module 5-05-2: Chart */
    .module5-05-2Result14 { left: 137px; top: calc(821px + 3668px);}
    .module5-05-2Result15 { left: calc(273px / 2); top: calc(543px / 2 + 5502px);}

/* ===== PRO CLIENT SITTING POSTURE REPORT (Module 5-2-B) ===== */
/* This is a separate report template for pro clients with professional styling */
/* Single page report - customized layout */

.module5-2-ProReport {
    width: 1240px;
    height: 1834px;
    /* Single page report background */
    background: 
    url('../images/Pro_sitting_report_Empty.png') no-repeat left top;
}

/* Module 5-2-Pro: Report Page 1 */
.module5-2-ProResult1 { left: 303px; top: 622px; width: auto; font-size: 26px;}  /* Sitting Tolerance */
.module5-2-ProResult2 { left: 303px; top: 668px; width: auto; font-size: 26px;}  /* Good Sitting Time */
.module5-2-ProResult3 { left: 303px; top: 710px; width: auto; font-size: 26px;}  /* Bad Sitting Time */
.module5-2-ProResult4 { left: 473px; top: 668px; width: auto; font-size: 26px;}  /* Good Sitting % */
.module5-2-ProResult5 { left: 473px; top: 710px; width: auto; font-size: 26px;}  /* Bad Sitting % */
.module5-2-ProResult12 { left: 303px; top: 752px; width: auto; font-size: 26px;} /* Not Sitting Time*/
.module5-2-ProResult13 { left: 473px; top: 752px;  width: auto; font-size: 26px;} /* Not Sitting % */
.module5-2-ProResult14 { left: 790px; top: 615px; width: 350px; font-size: 22px; text-align: center; line-height: 1.3;} /* Overall Result - bilingual*/
.module5-2-ProResult15 { left: 960px; top: 693px; width: auto; font-size: 26px;} /* Change Count */

/* Module 5-2-Pro: Angles Table (average values) */
.module5-2-ProResult6 { left: 670px; top: 1179px; width: auto; font-size: 26px;} /* Trunk Average*/
.module5-2-ProResult7 { left: 670px; top: 1222px; width: auto; font-size: 26px;} /* Shoulder Average*/
.module5-2-ProResult8 { left: 670px; top: 1265px; width: auto; font-size: 26px;} /* Elbow Average*/
.module5-2-ProResult9 { left: 670px; top: 1308px; width: auto; font-size: 26px;} /* Hip Average*/
.module5-2-ProResult10 { left: 670px; top: 1351px; width: auto; font-size: 26px;} /* Knee Average*/
.module5-2-ProResult11 { left: 670px; top: 1394px; width: auto; font-size: 26px;} /* Ankle Average*/
.module5-2-ProResult39 { left: 670px; top: 1437px; width: auto; font-size: 26px;} /* Knee non-dominant Average*/
.module5-2-ProResult40 { left: 670px; top: 1506px; width: auto; font-size: 26px;} /* Ankle non-dominant Average*/

/* Min values */
.module5-2-ProResult16 { right: 413px; top: 1179px; width: auto; font-size: 26px;} /* Trunk Min */
.module5-2-ProResult17 { right: 413px; top: 1222px; width: auto; font-size: 26px;} /* Shoulder Min */
.module5-2-ProResult18 { right: 413px; top: 1265px; width: auto; font-size: 26px;} /* Elbow Min */
.module5-2-ProResult19 { right: 413px; top: 1308px; width: auto; font-size: 26px;} /* Hip Min */
.module5-2-ProResult20 { right: 413px; top: 1351px; width: auto; font-size: 26px;} /* Knee Min */
.module5-2-ProResult21 { right: 413px; top: 1394px; width: auto; font-size: 26px;} /* Ankle Min */
.module5-2-ProResult41 { right: 413px; top: 1437px; width: auto; font-size: 26px;} /* Knee non-dominant Min */
.module5-2-ProResult42 { right: 413px; top: 1506px; width: auto; font-size: 26px;} /* Ankle non-dominant Min */

/* Max values */
.module5-2-ProResult22 { left: 878px; top: 1179px; width: auto; font-size: 26px;} /* Trunk Max */
.module5-2-ProResult23 { left: 878px; top: 1222px; width: auto; font-size: 26px;} /* Shoulder Max */
.module5-2-ProResult24 { left: 878px; top: 1265px; width: auto; font-size: 26px;} /* Elbow Max */
.module5-2-ProResult25 { left: 878px; top: 1308px; width: auto; font-size: 26px;} /* Hip Max */
.module5-2-ProResult26 { left: 878px; top: 1351px; width: auto; font-size: 26px;} /* Knee Max */
.module5-2-ProResult27 { left: 878px; top: 1394px; width: auto; font-size: 26px;} /* Ankle Max */
.module5-2-ProResult43 { left: 878px; top: 1437px; width: auto; font-size: 26px;} /* Knee non-dominant Max */
.module5-2-ProResult44 { left: 878px; top: 1506px; width: auto; font-size: 26px;} /* Ankle non-dominant Max */

/* Module 5-2-Pro: Special Notes */
.module5-2-ProResult45 { left: 465px; top: 1480px; width: auto; font-size: 13px;} /* Knee Special Notes */
.module5-2-ProResult46 { left: 465px; top: 1545px; width: auto; font-size: 13px;} /* Ankle Special Notes */

/* Module 5-2-Pro: Chart */
.module5-2-ProResult47 { left: 137px; top: 821px;}

/* Pro Report Date field */
.moduleProReportDate1 { left: 788px; top: 227px; width: auto; font-size: 26px;} /* page 1 Report Date */

/* Module 5-2-Pro: QR Code for PDF Report Link */
.module5-2-ProQRCode {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 100px;
    height: 100px;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.module5-2-ProQRCode img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* QR Code label text */
.module5-2-ProQRCodeLabel {
    position: absolute;
    right: 20px;
    top: 123px;
    width: 100px;
    font-size: 10px;
    text-align: center;
    color: #333;
}

/* ===== END PRO CLIENT SITTING POSTURE REPORT ===== */

/* ===== MODULAR QR CODE SYSTEM - GENERIC CLASSES ===== */
/* These classes work for any module report with QR codes */

/* Base QR code container styles */
.report-qr-container {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* QR code image inside container */
.report-qr-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* QR code label text - base styles */
.report-qr-label {
    position: absolute;
    width: 100px;
    font-size: 10px;
    text-align: center;
    color: #333;
}

/* ===== POSITION VARIANTS ===== */

/* Top-right position for single-page reports */
.report-qr-top-right {
    right: 20px;
    top: 15px;
}

.report-qr-label-top-right {
    right: 20px;
    top: 123px;
}

/* Bottom-right position for reports where top is occupied */
.report-qr-bottom-right {
    right: 20px;
    bottom: 15px;
}

.report-qr-label-bottom-right {
    right: 20px;
    bottom: 123px;
}

/* Top-left position (alternative) */
.report-qr-top-left {
    left: 20px;
    top: 15px;
}

.report-qr-label-top-left {
    left: 20px;
    top: 123px;
}

/* Bottom-left position (alternative) */
.report-qr-bottom-left {
    left: 20px;
    bottom: 15px;
}

.report-qr-label-bottom-left {
    left: 20px;
    bottom: 123px;
}

/* ===== SIZE VARIANTS FOR MULTI-PAGE REPORTS ===== */

/* Standard size (100x100) - default */
.report-qr-size-standard {
    width: 100px;
    height: 100px;
}

/* Small size (80x80) - for compact reports */
.report-qr-size-small {
    width: 80px;
    height: 80px;
}

.report-qr-size-small + .report-qr-label {
    width: 80px;
}

/* Large size (120x120) - for prominent display */
.report-qr-size-large {
    width: 120px;
    height: 120px;
}

.report-qr-size-large + .report-qr-label {
    width: 120px;
}

/* ===== MULTI-PAGE REPORT POSITIONING ===== */
/* For reports with multiple pages, position QR on first page only */
/* The JavaScript will handle page detection */

/* Page indicator for multi-page reports */
.report-qr-page-indicator {
    position: absolute;
    font-size: 8px;
    color: #666;
    text-align: center;
}

/* ===== END MODULAR QR CODE SYSTEM ===== */