/* NAVIGATION MENU BEGIN*/
:root{
  /* Core brand */
  --brand-blue: #064EB8;
  --brand-blue-soft: #0A5ED9;
  --brand-green: #4CAF50;
  /* --brand-green: #22C55E; */

  /* Accent */
  --accent-gold: #E9B949;       /* warmer + more premium */
  --accent-gold-soft: #FFF5DB;  /* subtle background use */

  /* Neutrals */
  --bg-page: #F7F9FC;           /* modern light gray-blue */
  --bg-card: #FFFFFF;
  --bg-soft: #F1F5FA;

  --text: #0F172A;              /* deeper modern charcoal */
  --text-soft: #475569;         /* better muted gray */
  --text-light: #64748B;

  --border: #E2E8F0;            /* cleaner border tone */

  /* Radius */
  --radius-lg: 20px;
  --radius-md: 14px;

  /* Shadows */
  --shadow-sm: 0 6px 18px rgba(15,23,42,0.06);
  --shadow-md: 0 18px 40px rgba(15,23,42,0.10);

    --nav-h: 120px; /* desktop */

    /* desaturated/soft blues for backgrounds */
  --blue-50: rgba(6,78,184,0.04);
  --blue-100: rgba(6,78,184,0.06);
  --blue-200: rgba(6,78,184,0.10);
  --blue-border: rgba(6,78,184,0.14);
  
}

    .no-margin-padding {
        margin: 0;
        padding: 0;
        overflow-x: hidden; 
    }

    /* 11/10/2025 attempt to fix fullscreen background color change */
        html:fullscreen,
        body:fullscreen,
        #mainGridContainer:fullscreen {
        background: rgba(255, 255, 255, 1);          /* your real background */
        width: 100vw;
        height: 100vh;
        }

        /* optional: make children not transparent in fullscreen */
        #mainGridContainer:fullscreen .grid-item,
        #mainGridContainer:fullscreen > div {
        background-color: rgba(255, 255, 255, 1);
        }

        /* 3/27/2026 */
                html, body {
                overscroll-behavior: none;
                }
                #appRoot,
                .grid-container {
                touch-action: none;
                }
/* 4/27/2026 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

    /* 8/12/2025 iphone fix 1*/
            /* html, body { height: 100%; margin: 0; }
        body.app-locked {
        position: fixed; 
        inset: 0;
        overflow: hidden;
        width: 100%;
        }
        #appRoot {
        position: fixed;
        inset: 0;
        height: 100dvh;              
        width: 100vw;
        padding-bottom: env(safe-area-inset-bottom);
        background: #111;           
        
        height: var(--app-h);
        } */

        /* Base app styles for everyone 8/12/2025 iphone fix 2 */
                /* Commenting out html, body and appRoot dont seem to affect program too much*/
                /* html, body { height: 100%; margin: 0; }

                #appRoot {
                position: relative;      
                width: 100%;
                height: 100vh;          
                background: #111;
                } */

                .modal-overlay {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.7);
                z-index: 102;
                touch-action: none;
                padding: env(safe-area-inset-top) env(safe-area-inset-right)
                        env(safe-area-inset-bottom) env(safe-area-inset-left);
                }

                /* 3/27/2026 OG LOGIC */
                /* Body scroll lock only for iPhone Safari */
                /* body.ios-iphone-safari.app-locked {
                position: fixed;
                inset: 0;
                overflow: hidden;
                width: 100%;
                } */

                /* 3/27/2026 */
                body.ios-iphone-safari.app-locked {
                position: fixed;
                overflow: hidden;
                width: 100%;
                height: 100%;
                touch-action: none;
                }

                /* App root behaves like fullscreen only on iPhone Safari */
                body.ios-iphone-safari #appRoot {
                position: fixed;
                inset: 0;
                width: 100vw;
                height: 100dvh;      /* dynamic viewport on iOS */
                height: var(--app-h);/* JS fallback */
                padding-bottom: env(safe-area-inset-bottom);
                }

                /* Optional: if you want to be extra explicit */
                @supports (height: 100dvh) {
                body.ios-iphone-safari #appRoot { height: 100dvh; }
                }

                /* iPhone Safari only */
                /* // 4/15/2026 commenting this out */
                    /* body.ios-iphone-safari .grid-container { top: -10%; } */

/* // 3/30/2026 Adding this class to all images stops Safari/iPhones from allowing users to highlight items and to trigger their second menu IMPORTANT IMPORTANT */
.no-select-image {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

    /* 5/14/2025 BTS ISSUE fix attempt */
        /* #simulatorWrapper {
            max-width: 1440px;
        } */

                      /* html { 
                        zoom: 100%; }   forces 1-device-pixel = 1-CSS-pixel 
                            */
                    
                    /* (optional) keep small laptops from crunching below 1024 px */
                    /* body { min-width: 1024px; } */


    .NavMenu {
        position: absolute;
        overflow: hidden;
        background-color: #064EB8;
        width: 100%;
        justify-content: space-between; /* Align items to the left and right */
        align-items: center;
        z-index: 103;
        padding-top: 0.5%;
    }

    .legend-container {
        display: flex;
        align-items: center;
    }

    /* Backflow Testing Simulator Headline*/
    .NavMenu a {
        color: #f2f2f2;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.25em;
        font-family: Arial, Helvetica, sans-serif;
    }

/*
    #testprocedureoptions {
        position: absolute;
        overflow: hidden;
        background-color: #064EB8;
        width: 100%;
        justify-content: space-between; /* Align items to the left and right //
        align-items: center;
        z-index: 101;
        padding-top: 0.5%;
    }
*/

    .large-screen{
    position: absolute;
    text-align: center;
    left: 3.5%;
    }

    .legendorg {
        width: 100%;
        display: flex;
        justify-content: flex-end; /* Align fieldsets to the right */
        align-items: flex-end; /* Align fieldsets at the bottom */
    }

    .field {
        width: 25%; /* Each fieldset occupies 33.33% of the available width */
        display: block; /* Hide the fieldsets by default */
    }

    .last-field {
        margin-right: 1%; /* Remove the right margin of the last fieldset */
    }

    /* Menu Option Names - Test Kit, Backflow Condition */
    fieldset {
        border: none;
        padding: 1%;
        font-size: 1.25em;
        font-weight: bold;
        /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
        /* 7/13/2025 Font Change*/
        font-family: 'Montserrat', sans-serif;
        color: white;
    }

    /* Actual Menu Options */
    select {
        width: 100%;
        padding: 2% 0;
        border-radius: 5px;
        text-align: center;
  font-size: 1em; /* was 0.75em — bumped to 16px to prevent iOS auto-zoom iphones*/
        font-family: 'Montserrat', sans-serif;
    }

    .icon {
        color: #f2f2f2;
        font-size: 20px;
        cursor: pointer;
        padding-right: 4.5%;
        display: none;
        margin-left: auto; /* Move the icon to the right */
    }

    .xIcon {
        color: #f2f2f2;
        transform: scale(1.5);
        transform-origin: 50% 50%;
        cursor: pointer;
        padding-right: 5%;
        display: none;
        margin-left: auto; /* Move the icon to the right */
    }

    .field.show {
        display: block;
        
    }

    
/* NAVIGATION MENU END */


/* Highlights */

        .highlight {
            animation: flash 1s infinite;
        }

        @keyframes flash {
            0%, 100% { box-shadow: 0 0 10px 10px rgba(25, 240, 10, 0.7); } /* try rgba(224, 224, 224, 0.7); */
            50% { box-shadow: 0 0 10px 10px rgba(214, 221, 3, 0.75); }
        }

/* Main Body Responsive Images BEGIN */
    /* CSS GRID BEGIN */
        .grid-container {
        position: relative;
        /* 3/27/2026 OG LOGIC */
        /* 1/22/2025 removed (-) */
        /* top: 20%;  */
            /* 3/27/2026 */
                height: calc(100dvh - var(--nav-height));
                top: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        gap: 0.5%;
        /* background-color: #ddebf7; */ /* Hides light blue lines that separates grid*/ 
                /* 11/10/2025 */
                background-color: rgba(255, 255, 255 /* , 0.8 */, 1); /* 5/26/2025 adjusted */
        padding: 0.5%;
                /* 3/27/2026 */
                /* height: 95vh; */
                height: 100dvh;
        z-index: 2;
        overflow: hidden; /* Prevents scrolling on small screens- added 8/2/24, seems like it prevents scrolling/dragging screen !!!! */
        }
        
        .grid-container > div {
        /* background-color: rgba(255, 255, 255, 0.01); 5/26/2025 adjusted */
        background-color: rgba(255, 255, 255 /* , 0.8 */, 1); /* 5/26/2025 adjusted */
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
        }

        .grid-container:fullscreen {
            background-color: rgba(255, 255, 255, 0.8); /* Keep the background color */
        }

        :fullscreen {
            background-color: rgba(255, 255, 255, 0.8);
        }
        
        
        /* Moves toolbox grid to top- important!!!!!!
        .TestKitGrid {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 5;
        position: relative;
        }
        
        .BackflowGrid {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 5;
        position: relative;
        }
        
        .ToolBoxGrid {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 2;
        position: relative;
        }
        */

.TestKitGrid {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 4;
        position: relative;
        }
        
        .BackflowGrid {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 4;
        position: relative;
                background-color: transparent !important;
  /* pointer-events: none; */

        }
        
        .ToolBoxGrid {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 4;
        grid-row-end: 5;
        position: relative;
        background-color: transparent !important;
  pointer-events: none;
        }

        /* corrects CSS grid positioning
        .TestKitGrid {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    position: relative;
    }
    
    .BackflowGrid {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
    position: relative;
    }

    .BackflowGrid { use to give backflow more room
    grid-column-start: 2; //// Start from the second column line 
    grid-column-end: 5;   //// Span to the end of the grid (after the fourth column) 
    grid-row-start: 1;
    grid-row-end: 4;      //// Span to the end of the third row 
    position: relative;
}
    
    .ToolBoxGrid {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    position: relative;
    }
        */

        /*
                .TestKitGrid {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 4;
        position: relative;
        }
        
        .BackflowGrid {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 3;
        position: relative;
        }
        
        .ToolBoxGrid {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 3;
        grid-row-end: 4;
        position: relative;
        }
        */
        
    /* CSS GRID END */

    /* Empty Toolbox and Background End*/
    #reset-enableButtons{
        position: absolute;
        top: 0;
        left: 30%;
        width: 10%;
        z-index: 102;
    }

    #resetToolboxButton{
        position: absolute;
        top: 30%;
        left: 0%;
        z-index: 102;
        display: none;
    }
    
    #resetFTKButton{
        position: absolute;
        top: 0;
        left: -150%;
        z-index: 102;
        display: none;
    }
    
    #redrawHosesButton{
        position: absolute;
        top: 0;
        left: 150%;
        z-index: 102;
        display: none;
    }
    
#toolbox{
    position: relative; /* deleting this will move toolbox to top of toolbox grid- aka top line */
        /*overflow: hidden; /* Ensures content does not move unexpectedly */
        left: 9.35%; /* !!!!! this moves toolbox over 9/12/24 */
}

    /* Snappable Elements */
    .draggable {
        touch-action: none;
        user-select: none;
        -webkit-user-select: none; /* Safari fallback 11/21/24 Edge Error */
    }   
    
                /* 5/14/2025 BTS ISSUE attempt to fix issue with BTS not working on some machines, "*" applies styles to child contents */
            .draggable * {
                touch-action: none;   /* or pan-y if vertical scroll is needed */
            }

       
/* changes toolbox shape, doesn't include images */
      #emptytoolbox{
        position: absolute;
        width: 30%;
        top: -20px;
        left: 60%;
    }

#BOV{
    position: relative;
}

        #bovimage{
            position: absolute;
            width: 6.25%;
            /* top: 20px; */
            top: 70%;
            left: 70.5%;
            z-index: 102;
        }

        #bovimageOpenNoFlow{
            position: absolute;
            width: 6.25%;
            top: -20px;
            left: 60.5%;
            z-index: 102;
            display: none;
        }
/* OG LOGIC 1/28/2025
        #bovimageVB{
            position: absolute;
            width: 6.25%;
            top: -20px;
            left: 60.5%;
            z-index: 102;
            display: none;
        }
*/

/* 1/28/2025 */
#bovimageVB{
    position: absolute;
    width: 6.25%;
    /* top: -20px; */
    top: 72%;
    left: 70.5%;
    z-index: 102;
    display: none;
}

        #bovimageVBOpen-noFlow{
            position: absolute;
            width: 6.25%;
            top: -20px;
            left: 60.5%;
            z-index: 102;
            display: none;
        }
/* OG LOGIC when it was listed in the toolbox area of HTML
        #bovimage2Drops{
            position: absolute;
            width: 2.5%;
            /* top: -220px; 
            /*top: -230px; 
            top: -170px;
            left: 49%;
            z-index: 102;
            display: none;
        }
*/

/*
#bovimage2Drops{
    position: absolute;
    width: 10.5%;
    /* top: -220px; //
    /*top: -230px; //
    top: 37%;
    left: -21%;
    z-index: 102;
    display: none;
}
    */

    #bovimage2Drops{
        position: absolute;
        width: 2.8%;
        /* top: -220px; */
        /*top: -230px; */
        top: 38%;
        left: 66.5%;
        z-index: 102;
        display: none;
    }
    
/* OG LOGIC
        #bovimage2Drops4TP{
            position: absolute;
            width: 2.5%;
            /* top: -220px; //
            top: -230px;
            left: 66%;
            z-index: 102;
            display: none;
        }
        */

        #bovimage2Drops4TP{
            position: absolute;
            width: 2.8%;
            /* top: -220px; */
            top: 38%;
            left: 76.5%;
            z-index: 102;
            display: none;
        }


        #bovimageVB2Drops{
            /*
            position: absolute;
            width: 2.5%;
            top: -220px;
            left: 68.5%;
            z-index: 102;
            display: none;
            */

            transform: scaleX(-1);

            position: absolute;
            width: 2.5%;
            /* top: -220px; */
            /*top: -230px; */
            top: 46.75%;
            left: 54%;
            z-index: 102;
            display: none;
    
        }

        #bovimageWflow{
            position: absolute;
           /* width: 12.25%;*/
            width: 8%;
            top: -20px;
            left: 60.5%;
            z-index: 102;
            display: none;
        }

        #BOValve {
            position: absolute;
            width: 3.8%;
            top: 10%;
            left: 54.5%;
            z-index: 102;
        }

        #BOVBFConnector{
            position: absolute;
            width: 3%;
            top: 27.5%;
            left: 51.3%;
            z-index: 102;
        }

        #BOVHConnector{
            position: absolute;
            width: 3%;
            top: 3%;
            left: 51.3%;
            z-index: 102;
        }

    #fittingDiv{
        position: relative;
    }
    
/* 1/26/2025 */
/* 7/13/2025 - Fittings may be too small, it seems like they are the only ones that are hard to drag, everything else drags easy */
        /* #Fittings1 {
            position: absolute;
            width: 2%;
            top: 75%;
            left: 80%;
            z-index: 13;
            display: block;
        } */
        #Fittings1 {
            position: absolute;
            /* width: 2%;  OG LOGIC*/
            width: 2.35%; /* 8/20/2025 iphone fix */
            top: 75%;
            left: 80%;
            z-index: 13;
            display: block;
        }

        
        
        #Fittings2 {
            position: absolute;
            /* width: 2%;  OG LOGIC*/
            width: 2.35%; /* 8/20/2025 iphone fix */
            top: 75%;
            left: 80%;
            z-index: 12;
            display: block;
        }

        #Fittings3 {
            position: absolute;
            /* width: 2%;  OG LOGIC*/
            width: 2.35%; /* 8/20/2025 iphone fix */
            top: 75%;
            left: 80%;
            z-index: 11;
            display: block;
        }
        #Fittings4 {
            position: absolute;
            /* width: 2%;  OG LOGIC*/
            width: 2.35%; /* 8/20/2025 iphone fix */
            top: 75%;
            left: 80%;
            z-index: 10;
            display: block;
        }


        /* OG LOGIC 1/28/2025
                #Fittings1VB {
            position: absolute;
            /*width: 2.8%; OG logic/////
            width: 2.4%;
            top: 5%;
            left: 70%;
            z-index: 8;
            display: none;
        }

        #Fittings2VB {
            position: absolute;
            width: 2.4%;
            top: 5%;
            left: 70%;
            z-index: 7;
            display: none;
        }
        */

        /* 1/28/2025 attempt */
        #Fittings1VB {
            position: absolute;
            /*width: 2.8%; OG logic*/
            width: 2.7%;
            /* 4/13/2026 width needs to be adjusted */
            /* width: 2.9%; */
            
            /* top: 80%; iphone fix */
            top: 75%;
            /* top: 75%; OG LOGIC*/
            left: 80%;
            z-index: 8;
            display: none;
        }
        


        #Fittings2VB {
            position: absolute;
            width: 2.7%;
            top: 75%;
            /* top: 80%; iphone fix */
            /* top: 75%; OG LOGIC*/
            left: 80%;
            z-index: 7;
            display: none;
        }


    
    #ST{
        position: relative;
    }
            #sighttubeImage{
                position: absolute;
                width: 2%;
                /* top: -17px; */
                top: 70%;
                left: 87.5%;
                z-index: 101;
            }

            #sighttubeImageOpen3TC{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 87.5%;
                z-index: 101;
                display: none;
            }

            /* // 10/2/2025 */
                        /* #sighttubeImageOpen3TC{
                position: absolute;
                width: 2%;
                /* // 10/2/2025 Attempt- Fixing sighttubeimageOpen3TC jump */
                    /* top: 70%;
                    left: 87.5%; */
                    /* visibility:hidden;
                z-index: 101;
                display: none;
            }
 */
            
            #sighttubeImageFilling{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 77.5%;
                z-index: 109;
                display: none;
            }

            #sighttubeImageFillingwTC{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 77.5%;
                z-index: 101;
                display: none;
            }
            
            #sighttubeImageFULL{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 77.5%;
                z-index: 102;
                display: none;
            }

            #sighttubeImageDraining1{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 77.5%;
                z-index: 102;
                display: none;
            }



            #sighttubeImageDraining2{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 77.5%;
                z-index: 102;
                display: none;
            }
            #sighttubeImageDraining3{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 77.5%;
                z-index: 102;
                display: none;
            }

            #sighttubeImageOpenDraining{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 77.5%;
                z-index: 102;
                display: none;
            }
            
            #sighttubeImageOverfilling{
                position: absolute;
                width: 2%;
                top: 70%;
                left: 50%;
                z-index: 102;
                display: none;
            }

            /* These show when the sight tube is being filled, and has started to overflow*/
            #sighttubeImage3TCOverflowing1{
                position: absolute;
                width: 2%;
                top: 27%;
                left: 72%;
                z-index: 102;
                display: none;
            }
            #sighttubeImage3TCOverflowing2{
                position: absolute;
                width: 2%;
                top: 32%;
                left: 72.5%;
                z-index: 102;
                display: none;
            }
            #sighttubeImage3TCOverflowing3{
                position: absolute;
                width: 2%;
                top: 37%;
                left: 73%;
                z-index: 102;
                display: none;
            }


            #sighttubeImage4TCOverflowing1{
                position: absolute;
                width: 2%;
                top: 27%;
                left: 81.5%;
                z-index: 102;
                display: none;
            }
            #sighttubeImage4TCOverflowing2{
                position: absolute;
                width: 2%;
                top: 32%;
                left: 82%;
                z-index: 102;
                display: none;
            }
            #sighttubeImage4TCOverflowing3{
                position: absolute;
                width: 2%;
                top: 37%;
                left: 82.5%;
                z-index: 102;
                display: none;
            }

    /*SNAPPABLE HOSES*/ 
    /* OG style 9/12/24     
        #svgContainer{
            position: absolute;
            width: 95%;
            height: 95%;
            border: 1px solid; 
            border-color: black;
            pointer-events: none;
        }
            */

            /* attempt to restrict movement*/
            #svgContainer{
                position: absolute;

                /* 5/15/2025 */
                left: 0;                 /* <-- anchor to wrapper, not viewport */
                top:  0;
                
                /* OG LOGIC width: 92%;
                height: 95%; */

                /* 1/26/2025 resize attempt*/
                width: 100%;
                height: 100%;
                /* 1/31/2025 update attempt */
                /* border: 1px solid; */
                /* border-color: black; */
                border-color: black;
                pointer-events: none;
            }
    
            

        #leftHoseEnd1, #leftHoseEnd2, #leftHoseEnd3, #leftHoseEnd4{
            position: absolute;
            width: 3%;
            max-width: 5%; /* Ensures hose ends shrink if on a smaller screen, so that its only 5% of the screen size its on */
            z-index: 97;
            pointer-events: auto;
            /* // 8/28/2025 attempt to replace hose drag logic with pointer events */
                touch-action: none;        /* tells the browser: don't pan/zoom here */
                user-select: none;
                -webkit-user-select: none; /* iOS Safari */
                /* // 8/29/2025 attempt to fix ghost click  */
                -webkit-user-drag:none;   /* <- add this to stop ghost image in Safari */

        }

        #rightHoseEnd1, #rightHoseEnd2, #rightHoseEnd3, #rightHoseEnd4{
            position: absolute;
            width: 3%;
            max-width: 5%; /* Ensures hose ends shrink if on a smaller screen, so that its only 5% of the screen size its on */
            z-index: 97;
            pointer-events: auto;
                /* // 8/28/2025 attempt to replace hose drag logic with pointer events */
                touch-action: none;        /* tells the browser: don't pan/zoom here */
                user-select: none;
                -webkit-user-select: none; /* iOS Safari */
                /* // 8/29/2025 attempt to fix ghost click  */
                -webkit-user-drag:none;   /* <- add this to stop ghost image in Safari */
        }

        #hoseEndFlow{
            position: absolute;
            width: 10%;
            max-width: 5%; /* Ensures hose ends shrink if on a smaller screen, so that its only 5% of the screen size its on */
            z-index: 97;
            display: none;
        }

        .no-pointer { pointer-events: none; }

        
/* OF style 9/12/24
        #hoseSVGs {
            position: absolute;
            width: 95%;
            height: 95%;
            z-index: 4;
            border: 1px solid;
            border-color: red;
        }
            */

            /* attempt 9/12/24 */
        #hoseSVGs {
            position: absolute;
            width: 95%;
            height: 95%;
            z-index: 4;
            left: -10%; /* 5/26/2025 */
            /* border: 1px solid; */
            /* border-color: red; */
        }
    /* Empty Toolbox and Background End*/ 
        
    /* Test Kit Legend Option Begin*/
            .AllTestKitContainer img{
                position: relative;
                width: 100%; /* Ensures the images scale with the container */
                height: auto;  /*Allows the images to maintain their aspect ratio */
            }
        /* Test Kit Legend Option END*/

        /* 2N Test Kit Legend Option BEGIN*/
            
            /*Digital Displays */
            /*
            #valueInput{
                position: absolute;
                top: 30%;
                left: 10%;
              }
  
              #setGaugeButton{
                position: absolute;
                top: 30%;
                left: 40%;
              }
              */
  
              #digitalDisplay2N{
              position: absolute;
              top: 63%;
              left: 35%;
              border: 0.5vh solid rgb(246, 15, 15); 
              z-index: 30;
              font-size: 4vh; 
              width: 8vw; 
              text-align: center; 
              white-space: nowrap; 
              background-color: white; 
              overflow: hidden; 
              }
  
              #digitalDisplay3N{
              position: absolute;
              top: 66%;
              left: 26.5%;
              border: 0.5vh solid rgb(246, 15, 15); 
              z-index: 30;
              font-size: 4vh; 
              width: 8vw; 
              text-align: center; 
              white-space: nowrap; 
              background-color: white; 
              overflow: hidden; 
              }
  
              #digitalDisplay5N{
              position: absolute;
              top: 53%;
              left: 41%;
              border: 0.5vh solid rgb(246, 15, 15); 
              z-index: 30;
              font-size: 4vh; 
              width: 8vw; 
              text-align: center; 
              white-space: nowrap; 
              background-color: white; 
              overflow: hidden; 
              }


        /* 1/7/2025 */
              .modal-contentCustomKeypad {
                background-color: white;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                padding: 10px;
                border-radius: 10px;
                border: 2px solid #070707;
                position: absolute;
                top: 0;
                left: 10%;
                /* transform: scale(0.8); original scale*/

                transform: scale(0.9);
                z-index: 103; /* Place the modal content above the overlay */
                
                display: flex;
                flex-direction: column; /* Ensure elements are stacked vertically */
                align-items: center; /* Horizontally center all child elements */
                justify-content: center; /* Vertically center all child elements */
                text-align: center; /* Optional: center the text in the modal */

                cursor: move; /* show 'move' cursor to indicate drag */
                touch-action: none; /* Disables default scrolling/pinch gestures on this element */

            }
            

              /* Calculator container - white background*/
                #calculator {
                    display: grid;
                    grid-template-rows: auto 1fr;
                    gap: 10px;
                    position: relative;
                    /* width: 255px; */
                    width: 255px;
                    margin: auto;
                }
                
                /* Display Value that the user inputs */
                #displayNumber {
                    grid-column: span 4;
                    background-color: #f3f3f3;
                    /* width: 83%; Original width */
                    width: 50%;
                    padding: 10px;
                    text-align: center;
                    font-size: 24px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                }
                
                /* Keypad grid */
                #keypad {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 5px;
                }
                
                /* Buttons */
                .key-btn,
                #backspaceBtn,
                #enterBtn {
                    padding: 20px;
                    text-align: center;
                    font-size: 18px;
                    border: 1px solid #ccc;
                    background-color: #e0e0e0;
                    border-radius: 5px;
                    cursor: pointer;
                      font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
                }
                
                /* Button adjustments */
                .key-btn {
                    height: 60px;
                }


                .key-btn:active {
                    background-color: #787474; /* Change to a lighter or darker shade to indicate press */
                    transform: scale(0.95); /* Optional: Add a slight "pressed" effect */
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Adjust shadow for depth */
                }
                
                
                #backspaceBtn {
                    grid-row: span 2; /* Backspace spans 2 rows */
                    background-color: #f00a0a;
                    /* height: 60px; 1/10/25 */
                    color: white;
                }

                #backspaceBtn:active {
                    background-color: #f00a0a88; /* Change to a lighter or darker shade to indicate press */
                    transform: scale(0.95); /* Optional: Add a slight "pressed" effect */
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Adjust shadow for depth */
                }

                
                #enterBtn {
                    grid-row: span 2; /* Enter spans 2 rows */
                    background-color: #4CAF50;
                    color: white;
                }

                #enterBtn:active {
                    background-color: #4caf4f82; /* Change to a lighter or darker shade to indicate press */
                    transform: scale(0.95); /* Optional: Add a slight "pressed" effect */
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Adjust shadow for depth */
                }

                
                .key-btn[data-num="0"] {
                    grid-column: span 2; /* "0" spans 2 columns */
                }
                
                .key-btn[data-num="."] {
                    grid-column: 3; /* "." aligns below "9" */
                }
  


                /* 1/6/2025 "Fake" Field and Hidden Input for Test Form Fields to be used with Custom Number Pad and Custom Keyboard (For Small Screens)*/
                .hideCustomKeypadModelCSS{ /* changing the display here will hide and show the CustomKeypad IMPORTANT!!!!!!!!*/
                    display: none;
                }

                #closeKeypad{
                    position: absolute;
                    /*
                    top: 0;
                    left: 91%;
                    */

                    top: 0;
                    left: 90%;
                    z-index: 100;
                }

                .hideLabelForFakeFieldHiddenInput{
                    display: none;
                }



                
                /* Show the normal input (real-input) by default */
                .real-input,
                .label-real {
                    display: inline-block;
                    font-family: 'Open Sans', sans-serif;
                }
                
                .label-real {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 4px;
  display: block;
}

                
                /* Hide the custom keypad version (fake input) by default */
                  .fake-input,
                  .label-fake, 
                  #serialNumberHidden,
                  #manufacturerHidden,
                  #modelHidden,
                  #typeHidden,
                  #sizeHidden {
                    display: none;
                  }

                  .label-fake {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 4px;
  display: none; /* media query overrides this on small screens */
}

                  /* Makes the fake input fields look like real HTML input/text area fields*/
.styled-fake-input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--bg-card);
                      color: var(--brand-blue);
                      font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  min-height: 20px;
  min-width: 120px;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-block;
  min-height: 34px; /* match this to your real input's rendered height */
}

/* // 4/5/2026 updating Fields */
.real-input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--bg-card);
  color: var(--text);
  font-family: 'Open Sans', sans-serif;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  box-sizing: border-box;
                        color: var(--brand-blue);
                      font-weight: 600;

}

.real-input:hover {
  border-color: var(--blue-border);
}

.real-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--blue-100);
}


.real-input,
.styled-fake-input {
  background: var(--blue-50);
  border: 1.5px solid var(--blue-border);
}

/* 4/27/2026 Makes font size a littlel bigger on iPads or tablets */
@media (min-width: 768px) and (max-width: 1200px) {
  .real-input,
  .styled-fake-input {
    font-size: 1.1rem;
    padding: 8px 12px;
    min-height: 42px;
  }
}

/* CUSTOM QWERTY KEYBOARD */
/*
.modalCustomKeyboard {
    position: absolute;
    top: 0; left: 0; 
    width: 100%; 
    height: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
  }
    */
  
  .modal-contentCustomKeyboard {
    background-color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #070707;
    position: absolute;
    top: 0;
    left: 10%;
    min-width: 62%;
    /* transform: scale(0.8); original scale*/

    /* transform: scale(0.8); */
    z-index: 10300; /* Place the modal content above the overlay */
    
    display: flex;
    flex-direction: column; /* Ensure elements are stacked vertically */
    align-items: center; /* Horizontally center all child elements */
    justify-content: center; /* Vertically center all child elements */
    text-align: center; /* Optional: center the text in the modal */

    cursor: move; /* show 'move' cursor to indicate drag */
    touch-action: none; /* Disables default scrolling/pinch gestures on this element */
}

  #qwertyKeyboard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  #displayKeyboardText {
    width: 80%;
    min-height: 20px; /* Adjust as needed  2/7/2025*/
    padding: 5px;
    background: #fafafa;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 1.1rem;
  }
  
  #closeKeyboard{
    position: absolute;
    top: 0;
    left: 95%;
    z-index: 100;
}

/* Makes buttons centered in keyboard, adds 5 px gap between buttons */
  .keyboard-row {
    display: flex;
    margin: 5px 0;
    justify-content: center; /* Center the buttons in each row */
    /* justify-content: space-evenly; /* Evenly space buttons within the row */
     gap: 5px; /* Add space between buttons */
  }

  
  
  /* Generic styling for the keys */
.keyboard-btn {
  min-width: 40px;
  padding: 10px 15px;
  /* margin: 2px; Closes gap between buttons */
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
    color: var(--text);
}
  .keyboard-btn:active {
    background-color: #787474; /* Change to a lighter or darker shade to indicate press */
    transform: scale(0.95); /* Optional: Add a slight "pressed" effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Adjust shadow for depth */
}

  
  #backspaceKeyboardBtn {
    background: #f00a0a;
    color: #fff;
    border-radius: 5px;
  }
  
  #enterKeyboardBtn {
    background: #4caf50;
    color: #fff;
    border-radius: 5px;
  }
  
  .close {
    float: right;
    cursor: pointer;
    font-size: 1.2rem;
    margin: 0 0 5px 0;
  }
    

  .space-btn {
    flex: 1;                /* Make it take all remaining space in the row */
    padding: 10px 60px;     /* Adjust to make it look more like a long spacebar */
    min-width: 150px;       /* A base width so it doesn't collapse too small */
  }
  
  

  

                /* On smaller screens, hide the real input and show the fake one */
                    @media (max-width: 850px) {
                        .real-input,
                        .label-real {
                          display: none;
                        }


                        .fake-input,
                        .label-fake,
                        .hideLabelForFakeFieldHiddenInput, /*Not sure if this is needed here or not*/
                        #serialNumberHidden {
                          display: inline-block; /* or block */
                        }
                    }

                    /* Makes sure when the phone is at least 850px then the fake fields will be hidden, therefore only one set of test form fields will be visible */
                    @media (min-width: 850px) {
                        .real-input,
                        .label-real {
                          display: block;
                        }


                        .fake-input,
                        .label-fake,
                        .hideLabelForFakeFieldHiddenInput, /*Not sure if this is needed here or not*/
                        #serialNumberHidden {
                          display: none; /* or block */
                        }
                    }


           /*   OG LOGIC
#ftkValuesButton {
    position: absolute;
    background-color: #4CAF50;
    color: white; 
    z-index: 30;
    font-size: 3.5vh;
    height: 3vw; 
    width: 13vw; 
    text-align: center;
    white-space: nowrap; 
    overflow: hidden;
    transform: rotate(90deg); 
    transform-origin: center; 
    line-height: 1.2; 
    display: none;
}
*/


#ftkValuesButton {
    position: absolute;
    background-color: #4CAF50;
    color: white; 
    z-index: 30;
    /* font-size: 3.5vh; */
    font-size: 1.85vw;
    height: 3vw; 
    width: 13vw; 
    text-align: center;
    white-space: nowrap; 
    overflow: hidden;
    /* transform: rotate(90deg);  */
    transform-origin: center; 
    line-height: 1.2; 
    display: none;
    border-radius: 50px;
      box-sizing: border-box;

}



#ftkValuesButton:hover {
    /* background-color: yellow;  Change text color to yellow on hover */
    color: white; /* Change text color to white */
}

/* Active state styles */
#ftkValuesButton.active {
    background-color: #e6ea0b; /* Yellow background when active */
    color: black; /* Black text when active */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Slightly darker shadow when active */
}
                                                  
            #TwoNeedleTestKitContainer {
                position: absolute;
                width: 45%;
                top: 35%;
                left: 15%;
                touch-action: none;
            }
            
            #TwoNeedleImage {
                position: relative;
                width: 100%;
                top: 95%;
                left: 5%;
            }
            
            #TwoNeedleLSBNV {
                position: absolute;
                width: 12.85%;
                top: 15%;
                left: 78%;
                z-index: 90;
                display: block;
            }

            #TwoNeedleLSBNVOpenNoFlow {
                position: absolute;
                width: 12.85%;
                top: 13%;
                left: 78%;
                z-index: 90;
                display: none;
            }

            #TwoNeedleLSConnection {
                position: absolute;
                width: 5.75%;
                top: 12.75%;
                left: 81.5%;
                z-index: 70;
                display: block;
            }

            #TwoNeedleHSConnection {
                position: absolute;
                width: 5.75%;
                top: 12.75%;
                left: 23.5%;
                z-index: 70;
                display: block;
            }
            
                #TwoNeedleLSBNV1-4Turn {
                    position: absolute;
                    width: 12.85%;
                    top: 13%;
                    left: 78%;
                    z-index: 90;
                    display: none;
                }

                #TwoNeedleLSBNVOpen {
                    position: absolute;
                    width: 12.85%;
                    /* top: -7.8%; */
                                        top: -4.5%;
                    left: 78%;
                    z-index: 90;
                    display: none;
                }
            
            #TwoNeedleHSBNV {
                position: absolute;
                width: 12.85%;
                top: 15%;
                left: 20%;
                z-index: 90;
                display: block;
            }

            #TwoNeedleHSBNVOpenNoFlow {
                position: absolute;
                width: 12.85%;
                top: 13%;
                left: 20%;
                z-index: 91;
                display: none;
            }

                #TwoNeedleHSBNV1-FullTurn {
                    position: absolute;
                    width: 12.85%;
                    top: 13%;
                    left: 20%;
                    z-index: 90;
                    display: none;
                }

                #TwoNeedleHSBNVOpen {
                    position: absolute;
                    width: 12.85%;
                    /* top: -7.8%; */
                    top: -4.5%;
                    left: 20%;
                    z-index: 90;
                    display: none;
                }

                #TwoNeedleHSBNVOpen14 {
                    position: absolute;
                    width: 12.85%;
                    top: 1.25%;
                    left: 20%;
                    z-index: 90;
                    display: none;
                }
            
            #TwoNeedleLSConnector {
                position: absolute;
                width: 7%;
                top: 78.5%;
                left: 80.5%;
            }

            #TwoNeedleHSConnector {
                position: absolute;
                width: 7%;
                top: 78.5%;
                left: 23%;
                z-index: 10;
            }
            
            #TwoNeedleBlankGauge {
                position: absolute;
                width: 62%;
                top: 17%;
                left: 24.25%;
            }

            #TwoNeedleDashCenterLine {
                position: absolute;
                top: 50%;
                left: 90%;
                height: 10px;
                width: 250%;
                background-image: linear-gradient(to right, #333 50%, rgba(227, 129, 9, 0) 0%);
                background-size: 20px 1px; /* Width of the dashes and space between them */
                background-repeat: repeat-x;
                z-index: 100000;
              }
            
            #TwoNeedleArrow{
                    position: absolute;
                    top: 24.5%;
                    left: 54%;
                    width: 0;
                    height: 0;
                    border-left: 0.35vw solid transparent; 
                    border-right: 0.35vw solid transparent; 
                    border-bottom: 5.75vw solid black; 
                    z-index: 2;
                    /*transition: transform 10s; /* Adjust '2s' to your desired transition time */
                }


                            /* 2N Labels */
            #highSideBNV2NLabel {
                top: -6%;
                left: 35%;
                /*color: red; /* Example of individual text styling */
                background: red;
            }
            
            #lowSideBNV2NLabel {
                top: -6%;
                left: 84%;
                /*font-size: 14px; /* Another example of individual styling */
                background-color: #064EB8;
            }
                        
            #highSideConnection2NLabel {
                top: 105%;
                left: 15%;
                background: red;
            }
            
            #lowSideConnection2NLabel {
                top: 108%;
                left: 85%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #gaugeReading2NLabel {
                top: 91%;
                left: 55%;
                /*color: blue;*/
                background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */
            }

            
                /* 2N Test Kit Legend Option END*/
            
        /* 3N Test Kit Legend Option Begin*/
            #ThreeNeedleTestKitContainer {
                position: absolute;
                width: 45%;
                top: 35%;
                left: 15%;
                touch-action: none;
            }
            
            #ThreeNeedleImage {
                position: relative;
                width: 100%;
                top: 95%;
                left: 5%;
            }
            
            #ThreeNeedleLSBNV {
                position: absolute;
                width: 12.85%;
                top: 21%;
                left: 68.5%;
                z-index: 90;
            }

                #ThreeNeedleLSBNVOpen {
                    position: absolute;
                    width: 12.85%;
                    top: 21%;
                    left: 68.5%;
                    z-index: 90;
                    display: none;
                }

                #ThreeNeedleLSCNV1-4Turn {
                    position: absolute;
                    width: 12.85%;
                    top: 21%;
                    left: 68.5%;
                    z-index: 90;
                    display: none;
                }
            
            #ThreeNeedleHSBNV {
                position: absolute;
                width: 12.85%;
                top: 5.5%;
                left: 26.5%;
            }

                #ThreeNeedleHSBNVOpen {
                    position: absolute;
                    width: 12.85%;
                    top: 5.5%;
                    left: 26.5%;
                    display: none;
                }

                #ThreeNeedleHSCNV1-FullTurn {
                    position: absolute;
                    width: 12.85%;
                    top: 5.5%;
                    left: 26.5%;
                    display: none;
                }

                #ThreeNeedleHSBNVOpenOneQuarter {
                    position: absolute;
                    width: 12.85%;
                    top: 5.5%;
                    left: 26.5%;
                    z-index: 90;
                    display: none;
                }

            #ThreeNeedleLSConnector {
                position: absolute;
                width: 7%;
                top: 84.25%;
                left: 71.5%;
            }

            #ThreeNeedleHSConnector {
                position: absolute;
                width: 7%;
                top: 84.25%;
                left: 13%;
            }

            
            #ThreeNeedleBlankGauge {
                position: absolute;
                width: 62%;
                top: 20%;
                left: 15%;
            }

            #ThreeNeedleDashCenterLine {
                position: absolute;
                top: 55%;
                left: 80%;
                height: 10px;
                width: 250%;
                background-image: linear-gradient(to right, #333 50%, rgba(227, 129, 9, 0) 0%);
                background-size: 20px 1px; /* Width of the dashes and space between them */
                background-repeat: repeat-x;
                z-index: 1000;
              }
            
            #ThreeNeedleArrow{
                position: absolute;
                    top: 28%;
                    left: 44.5%;
                    width: 0;
                    height: 0;
                    border-left: 0.35vw solid transparent; 
                    border-right: 0.35vw solid transparent; 
                    border-bottom: 5.75vw solid black; 
                    z-index: 2;
            }
            
            #ThreeNeedleBypass{
                position: absolute;
                width: 12.85%;
                /*transform: rotate(270deg);*/
                top: 5%;
                left: 84%;
                z-index: 90;
            }
            
            #ThreeNeedleBypassOpen {
                position: absolute;
                width: 38%;
                top: 4.5%;
                left: 84%;
                display: none;
            }
                        
            #ThreeNeedleBypassOpenNoFlow{
                position: absolute;
                width: 12.85%;
                top: 5%;
                left: 84%;
                display: none;
                    z-index: 2;
            }

            #ThreeNeedleBypassConnection {
                position: absolute;
                width: 5.75%;
                /* transform: rotate(90deg); */
                top: 8.35%;
                left: 94%;
                z-index: 1;
                display: block;
            }

            #bypass3NFlow{
                position: absolute;
                width: 20%;
                top: 7%;
                left: 105%;
                /*max-width: 5%; /* Ensures hose ends shrink if on a smaller screen, so that its only 5% of the screen size its on */
                z-index: 97;
                display: none;
            }

            /* 3N Labels */
            #highSideBNV3NLabel {
                top: -6%;
                left: 35%;
                /*color: red; /* Example of individual styling */
                background-color: red;
            }
            
            #lowSideBNV3NLabel {
                top: 44%;
                left: 92.5%;
                /*font-size: 14px; /* Another example of individual styling */
                background-color: #064EB8;
            }
            
            #bypassNV3NLabel {
                top: 12%;
                left: 116%;
                color: black;
                background-color: yellow;
            }
            
            #highSideConnection3NLabel {
                top: 105%;
                left: 15%;
                background-color: red;
            }
            
            #lowSideConnection3NLabel {
                top: 105%;
                left: 75%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #gaugeReading3NLabel {
                top: 92%;
                left: 45%;
                /*color: blue;*/
                background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */
            }

            /* 11/12/2025 3N Australian Labels */
            #bpaaTestKitValveA3NLabel {
                top: -6%;
                left: 35%;
                /*color: red; /* Example of individual styling */
                background-color: red;
            }
            
            #bpaaTestKitValveB3NLabel {
                top: 44%;
                left: 92.5%;
                /*font-size: 14px; /* Another example of individual styling */
                background-color: #064EB8;
            }
            
            #bpaaTestKitValveC3NLabel {
                top: 12%;
                left: 116%;
                color: black;
                background-color: yellow;
            }
            
            #highSideAustralianConnection3NLabel {
                top: 105%;
                left: 15%;
                background-color: red;
            }
            
            #lowSideAustralianConnection3NLabel {
                top: 105%;
                left: 75%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #gaugeAustralianReading3NLabel {
                top: 92%;
                left: 45%;
                /*color: blue;*/
                background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */
            }


            /* 6/1/2025 START Australian Specific Images */
            

                    #ThreeNeedleValveA {
                        position: absolute;
                        width: 12.85%;
                        top: 5.5%;
                        left: 26.5%;
                        /* z-index: 90; */
                        display: none;
                    }

                        #ThreeNeedleValveAOpen {
                            position: absolute;
                            width: 12.85%;
                            top: 5.5%;
                            left: 26.5%;
                            /* z-index: 90; */
                            display: none;
                        }

                    #ThreeNeedleValveB {
                        position: absolute;
                        width: 12.85%;
                        top: 21%;
                        left: 68.5%;
                        z-index: 90;
                        display: none;
                    }

                        #ThreeNeedleValveBOpen {
                            position: absolute;
                            width: 12.85%;
                            top: 21%;
                            left: 68.5%;
                            z-index: 90;
                            display: none;
                        }

                    #ThreeNeedleValveC{
                        position: absolute;
                        width: 12.75%;
                        /*transform: rotate(270deg);*/
                        top: 5%;
                        left: 84%;
                        z-index: 90;
                        display: none;
                    }
                    
                    #ThreeNeedleValveCOpen {
                        position: absolute;
                        width: 12.75%;
                        top: 4.8%;
                        left: 84%;
                        z-index: 90;
                        display: none;
                    }

                    #ThreeNeedleValveCOpenWFlow {
                        position: absolute;
                        width: 38%;
                        top: 4.5%;
                        left: 84%;
                        z-index: 90;
                        display: none;
                    }

                    /* 11/12/2025 */
                        /* By default, hide AU labels */

                        /* When AU mode is active, hide .us-label and show .au-label */
                        body.australian-mode .show-labels .us-label { display: none; }
                        body.australian-mode .show-labels .au-label { display: block; }

                        /* When NOT AU mode, hide .au-label and show .us-label */
                        body:not(.australian-mode) .show-labels .us-label { display: block; }
                        body:not(.australian-mode) .show-labels .au-label { display: none; }

            /* 6/1/2025 START Australian Specific Images */

/* // 2/7/2026 */
.tpb-test-header {
  margin: 9px 0 10px;
  font-size: 1.25rem;          /* slightly bigger than steps */
  font-weight: 700;
  color: #064EB8;              /* blue (Tailwind blue-700-ish) */
  border-bottom: 2px solid rgba(31, 78, 216, 0.2);
  /* padding-bottom: 4px; */
    transition: color 0.25s ease;
}


.tpb-test-header.highlight,
#currentStepText.highlight {
  background-color: rgba(214, 221, 3, 0.75);
  border-radius: 4px;
  padding: 2px 6px;
    transition: background-color 0.2s ease;
}

/* calm highlight for procedure text only */
.highlight-text {
  background-color: rgba(214, 221, 3, 0.75);
  border-radius: 4px;
  padding: 2px 6px;
}

.tpb-alt-preview-wrap { margin-top: 8px; }
.tpb-alt-preview { margin-top: 6px; padding-left: 10px; }
/* .tpb-alt-preview-wrap { display:none; } */
/* #currentStepText.tpb-alt-preview-wrap { display:block; } */

        /* 3N Test Kit Legend Option END*/
            
        /* 5N Test Kit Legend Option Begin*/
            #FiveNeedleTestKitContainer {
                position: absolute;
                width: 45%;
                top: 35%;
                left: 15%;
                touch-action: none;
            }

            #FiveNeedleTestKitContainer:active {
                cursor: grabbing;
              }

              /* Prevent text selection during drag */
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari fallback 11/21/24 Edge Error */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
            
            #FiveNeedleImage {
                position: relative;
                width: 100%;
                top: 95%;
                left: 5%;
            }

            .testkitMovement-disabled {
                user-select: none;
                pointer-events: none;
              }
                          
            #FiveNeedleLSBNV {
                position: absolute;
                width: 12.85%;
                top: 6.75%;
                left: 84%;
                z-index: 90;
            }

                #FiveNeedleLSBNVOpen {
                    position: absolute;
                    width: 12.85%;
                    top: -13.5%;
                    left: 84%;
                    z-index: 90;
                    display: none;
                }
            
            #FiveNeedleHSBNV {
                position: absolute;
                width: 12.85%;
                top: 6.75%;
                left: 26%;
                z-index: 90;
            }

            #FiveNeedleHSBNVFlow {
                position: absolute;
                width: 12.85%;
                top: -42.5%;
                left: 26%;
                z-index: 90;
                display: none;
            }
            #FiveNeedleLSBNVFlow {
                position: absolute;
                width: 12.85%;
                top: -42.5%;
                left: 84%;
                z-index: 90;
                display: none;
            }

                #FiveNeedleHSBNVOpen {
                    position: absolute;
                    width: 12.85%;
                    top: -13%;
                    left: 26%;
                    z-index: 90;
                    display: none;
                }

                #FiveNeedleHSBNVOpenNoFlow {
                position: absolute;
                width: 12.85%;
                top: 6.75%;
                left: 26%;
                z-index: 90;
                    display: none;
                }
                
                #FiveNeedleLSBNVOpenNoFlow {
                position: absolute;
                width: 12.85%;
                top: 6.75%;
                left: 84%;
                z-index: 90;
                    display: none;
                }

                #FiveNeedleHSBNVOpenOneQuarter {
                    position: absolute;
                    width: 12.85%;
                    top: 6.75%;
                    left: 26%;
                    z-index: 90;
                    display: none;
                }
                

            #FiveNeedleLSCNV {
                position: absolute;
                width: 12.85%;
                top: 73%;
                left: 68%;
            }

                #FiveNeedleLSCNV1-4Turn {
                    position: absolute;
                    width: 12.85%;
                top: 73%;
                    left: 68%;
                    display: none;
                }
                
                #FiveNeedleLSCNVOpen {
                    position: absolute;
                    width: 12.85%;
                top: 73%;
                    left: 68%;
                    display: none;
                }
            
            #FiveNeedleHSCNV {
                position: absolute;
                width: 12.85%;
                top: 73%;
                left: 40.5%;
            }

            #FiveNeedleHSCNVopenNoFLow {
                position: absolute;
                width: 12.85%;
                top: 73%;
                left: 40.5%;
                display: none;
            }

                #FiveNeedleHSCNV1-FullTurn {
                    position: absolute;
                    width: 12.85%;
                top: 73%;
                    left: 40.5%;
                    display: none;
                }

            #FiveNeedleLSConnector {
                position: absolute;
                width: 7%;
                top: 87%;
                left: 87%;
            }

            #FiveNeedleHSConnector {
                position: absolute;
                width: 7%;
                top: 87%;
                left: 28.5%;
            }

            #FiveNeedleBPConnector {
                position: absolute;
                width: 7%;
                top: 75%;
                left: 11.8%;
            }
            
            #FiveNeedleBlankGauge {
                position: absolute;
                width: 62%;
                top: 7.5%;
                left: 30%;
            }

            #FiveNeedleDashCenterLine {
                position: absolute;
                top: 42%;
                left: 95%;
                height: 10px;
                width: 250%;
                background-image: linear-gradient(to right, #333 50%, rgba(227, 129, 9, 0) 0%);
                background-size: 20px 1px; /* Width of the dashes and space between them */
                background-repeat: repeat-x;
                z-index: 1000;
              }
            
            #FiveNeedleArrow{
                position: absolute;
                    top: 15%;
                    left: 59.3%;
                    width: 0;
                    height: 0;
                    border-left: 0.35vw solid transparent; 
                    border-right: 0.35vw solid transparent; 
                    border-bottom: 5.75vw solid black; 
                    z-index: 2;
            }
            
            #FiveNeedleBypass{
                position: absolute;
                width: 12.85%;
                top: 64%;
                left: 9%;
                z-index: 1;
            }

                #FiveNeedleBypassOpen{
                    position: absolute;
                    width: 12.85%;
                    top: 64%;
                    left: 9%;
                    display: none;
                }

                #FiveNeedleBypassOpenNoFlow{
                    position: absolute;
                    width: 12.85%;
                    top: 64%;
                    left: 9%;
                    z-index: 1;
                    display: none;
                }

            /* 5N Labels */
            #highSideBNV5NLabel {
                top: -6%;
                left: 35%;
                /*color: red; /* Example of individual styling */
                background-color: red;
            }
            
            #lowSideBNV5NLabel {
                top: -17%;
                left: 92.5%;
                /*font-size: 14px; /* Another example of individual styling */
                background-color: #064EB8;
            }
            
            #bypassNV5NLabel {
                top: 55%;
                left: 1%;
                background-color: yellow;
                color: black;
            }
            
            #highSideConnection5NLabel {
                top: 102%;
                left: 5%;
                background-color: red;
            }
            
            #lowSideConnection5NLabel {
                top: 102%;
                left: 105%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #highSideCNV5NLabel {
                top: 113%;
                left: 40%;
                background-color: red;
            }
            
            #lowSideCNV5NLabel {
                top: 125%;
                left: 75%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #gaugeReading5NLabel {
                top: 70%;
                left: 92%;
                /*color: blue;*/
                /* background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */

                background-color: rgba(76, 175, 80, 1); /* Green with 100% opacity (no transparency) */
            }

        /* 5N Test Kit Legend Option END*/



    /* Test Kit Legend Option END*/
        
    
        
    /* BACKFLOW LEGEND OPTIONS BEGIN*/
        /* DC BACKFLOW IMAGE & COMPONENTS BEGIN*/
        .AllBackflowContainer img {
            position: relative;
            width: 100%; /* Ensures the images scale with the container */
            height: auto; /* Allows the images to maintain their aspect ratio */
        }
        /* Edits entire backflow */
        #DCBackflowImageContainer{
            position: absolute;
            width: 70%;
            /* top: 70%;  use this size on small! screens */
            /* 4/7/2026 OG LOGIC */
            top: 60%;
              /* transform: translateY(0dvh);  */

            /* left: 10%; use this size on small! screens */
            left: 5%;
            }
                
        
        #DCTC1{
            position: absolute;
            width: 4.5%;
            top: 12%;
            left: 3%;
            z-index: 100;
        }

            #DCTC1OpenFlush{
                position: absolute;
                width: 4.5%;
                top: -41%;
                left: 3%;
                z-index: 100;
                display: none;
            }

            #DCTC1Open{
                position: absolute;
                width: 4.46%;
                /* width: 5.25%;4*/
                top: 12.15%;
                left: 3%;
                /* left: 2.75%; */
                z-index: 100;
                display: none;
            }

        #DCTC1FlushnF{
            position: absolute;
            width: 4.5%;
            top: 12%;
            left: 3%;
            z-index: 102;
            display: none;
        }
        
        #DCTC2{
            position: absolute;
            width: 4.5%;
            top: 12%;
            left: 20%;
            z-index: 100;
        }

            #DCTC2OpenFlush{
                position: absolute;
                width: 4.5%;
                top: -41%;
                left: 20%;
                z-index: 100;
                display: none;
            }

            #DCTC2Open{
                position: absolute;
                width: 4.46%;
                top: 12.15%;
                left: 19.98%;
                z-index: 100;
                display: none;
            }
        
        #DCTC3{
            position: absolute;
            width: 4.5%;
            top: 12%;
            left: 48%;
            z-index: 100;
        }

            #DCTC3OpenFlush{
                position: absolute;
                width: 4.5%;
                top: -41%;
                left: 48%;
                z-index: 100;
                display: none;
            }

            #DCTC3Open{
                position: absolute;
                width: 4.46%;
                top: 12.15%;
                left: 47.98%;
                z-index: 100;
                display: none;
            }
        
        #DCTC4{
            position: absolute;
            width: 4.5%;
            top: 12%;
            left: 75%;
            z-index: 100;
        }

            #DCTC4OpenFlush{
                position: absolute;
                width: 4.5%;
                top: -41%;
                left: 75%;
                z-index: 100;
                display: none;
            }

            #DCTC4Open{
                position: absolute;
                width: 4.46%;
                top: 12.15%;
                left: 75.03%;
                z-index: 100;
                display: none;
            }

        .changed-image {
            top: 2%; 
            left: 3%;
        }
        
        #DCSOV1{
            position: absolute;
            width: 25%;
            top: 52%;
            left: 3%;
            z-index: 101;
        }
        
        #DCSOV2{
            position: absolute;
            width: 25%;
            top: 52%;
            left: 72%;
            z-index: 101;
        }
        
        #DCDataPlate{
            position: absolute;
            width: 10%;
            top: 2%;
            left: 31%;
        }

        #DCTC3LeakFlow{
            position: absolute;
            width: 10%;
            top: -180%;
            left: 45%;
            display: none;
        }

        #DCTC4LeakFlow{
            position: absolute;
            width: 10%;
            top: -180%;
            left: 72%;
            display: none;
        }

        #DCDashCenterLine {
            position: absolute;
            top: 60%;
            left: -50%;
            height: 10px;
            width: 250%;
            background-image: linear-gradient(to right, #333 50%, rgba(227, 129, 9, 0) 0%);
            background-size: 20px 1px; /* Width of the dashes and space between them */
            background-repeat: repeat-x;
            z-index: 10;
            display: none;
          }
        
        /* DC BACKFLOW IMAGE & COMPONENTS END*/
        



        /* START of Australian DC Backflow 5/30/2025 */

                /* Edits entire backflow */        
        #DCAustralianImageContainer{
            position: absolute;
            width: 90%;
            /* top: 70%;  use this size on small! screens */
            top: 63%;
            /* left: 10%; use this size on small! screens */
            left: -10%;
            z-index: 15;
            }

            #optionAustralianImage{
                z-index: 4;
            }
            
        #DCTC1Australian{
            position: absolute;
            width: 4.5%;
            top: 12%;
            left: 3%;
            z-index: 100;
            display: none;
        }

            #DCTC1OpenFlushAustralian{
                position: absolute;
                width: 4.5%;
                top: -41%;
                left: 3%;
                z-index: 100;
                display: none;
            }

            #DCTC1OpenAustralian{
                position: absolute;
                /* width: 5.25%;
                top: 11.5%; */
                /* left: 2.75%; */
                width: 4%;
                top: 4.75%;
                left: 2.75%;
                z-index: 100;
                display: none;
            }

        #DCTC1FlushnFAustralian{
            position: absolute;
            width: 4.5%;
            top: 12%;
            left: 3%;
            z-index: 102;
            display: none;
        }
        
        #DCTC2Australian{
            position: absolute;
            width: 4%;
            top: 5%;
            left: 20%;
            z-index: 100;
        }

            #DCTC2OpenFlushAustralian{
                position: absolute;
                width: 4%;
                top: -52.5%;
                left: 20%;
                z-index: 100;
                display: none;
            }

            #DCTC2OpenAustralian{
                position: absolute;
                width: 4%;
                top: 4.75%;
                left: 20%;
                z-index: 100;
                display: none;
            }
        
        #DCTC3Australian{
            position: absolute;
            width: 4%;
            top: 5%;
            left: 50.75%;
            z-index: 100;
        }

            #DCTC3OpenFlushAustralian{
                position: absolute;
                width: 4%;
                top: -52.5%;
                left: 50.75%;
                z-index: 100;
                display: none;
            }

            #DCTC3OpenAustralian{
                position: absolute;
                width: 4%;
                top: 4.75%;
                left: 50.75%;
                z-index: 100;
                display: none;
            }
        
        #DCTC4Australian{
            position: absolute;
            width: 4%;
            top: 5%;
            left: 70%;
            z-index: 100;
        }

            #DCTC4OpenFlushAustralian{
                position: absolute;
                width: 4%;
                top: -52.5%;
                left: 70%;
                z-index: 100;
                display: none;
            }

            #DCTC4OpenAustralian{
                position: absolute;
                width: 4%;
                top: 4.75%;
                left: 70%;
                z-index: 100;
                display: none;
            }

        .changed-image {
            top: 2%; 
            left: 3%;
        }
        
        #DCSOV1Australian{
            position: absolute;
            width: 18%;
            top: 44%;
            left: 3%;
            z-index: 101;
        }
        
        #DCSOV2Australian{
            position: absolute;
            width: 18%;
            top: 44%;
            left: 81%;
            z-index: 101;
        }
        
        #DCDataPlateAustralian{
            position: absolute;
            width: 8%;
            top: 2%;
            left: 38.2%;
            z-index: 5;
        }

        /* // 10/22/2025 */
                    #DCYStrainerAustralian{
                        /* 
                        This block lives inside of DCAustralianImageContainer, but lick/drag does not work on it
                        position: absolute;
                        width: 9.5%;
                        top: 58.5%;
                        left: 15.55%;
                        z-index: -1;
                        display: none; */

                        /* This block lives with the other fittings, but clicks/drags well */
                        position: absolute;
                        width: 4.25%;
                        top: 56.5%;
                        left: 53.25%;
                        z-index: 4;
                        display: none;
                    }

                    #DCYStrainerAustralianClean {
                        position: absolute;
                        width: 4.25%;
                        top: 56.5%;
                        left: 53.25%;
                        z-index: 4;
                        display: none;
                    }

                    /* // 10/28/2025 OG LOGIC*/
                    #RPYStrainerAustralian{
                        position: absolute;
                        width: 4.25%;
                        top: 47.5%;
                        left: 53.25%;
                        z-index: 4;
                        display: none;
                    }

                    #RPYStrainerAustralianClean{
                        position: absolute;
                        width: 4.25%;
                        top: 47.5%;
                        left: 53.25%;
                        z-index: 4;
                        display: none;
                    }

                    /* // 10/28/2025 Attempt after moving it to the inside of RPAustralianImageContainer */
                    /* #RPYStrainerAustralian{
                        position: absolute;
                        width: 10.25%;
                        top: 50%;
                        left: 15.57%;
                        z-index: 25;
                        display: none;
                    } */

                    /* #RPAustralianImage{
                        z-index: 5;
                    } */
/* change z index so RP y strainer can be moved */
                    #RPDataPlateAustralian{
                        position: absolute;
                        width: 8%;
                        top: 2%;
                        left: 38.2%;
                        z-index: 5;
                    }


        /* 5/31/2024 */
        /* one reusable utility class */
            .ignore-pointer {
            pointer-events: none;   /* clicks pass straight through */
            }


        #DCTC3LeakFlowAustralian{
            position: absolute;
            width: 10%;
            top: -180%;
            left: 45%;
            display: none;
        }

        #DCTC4LeakFlowAustralian{
            position: absolute;
            width: 10%;
            top: -180%;
            left: 72%;
            display: none;
        }

        #DCDashCenterLineAustralian {
            position: absolute;
            top: 60%;
            left: -50%;
            height: 10px;
            width: 250%;
            background-image: linear-gradient(to right, #333 50%, rgba(227, 129, 9, 0) 0%);
            background-size: 20px 1px; /* Width of the dashes and space between them */
            background-repeat: repeat-x;
            z-index: 10;
            display: none;
          }
        /* END of Australian DC Backflow 5/30/2025 */



                    #RPAustralianImageContainer {
                        position: absolute;
                        width: 90%;
                        top: 50%;
                        left: -10%;
                        /*transform: translateY(-50%); /* Center the container vertically */
                        /*z-index: 100; /* Ensure it's above other content- this z index not needed, will interrupt flow of snapping Fittings to test ports */

                        /* 10/22/2025 */
                        z-index: 15;
                    }
                    

                            #RPTC1Australian{
                        position: absolute;
                        width: 4.5%;
                        top: 9.5%;
                        left: 3%;
                        z-index: 100;
                    }
                            #RPTC1Australian{
                        position: absolute;
                        width: 4.5%;
                        top: 9.5%;
                        left: 3%;
                        z-index: 100;
                    }

                        #RPTC1OpenFlushAustralian{
                            position: absolute;
                            width: 4.5%;
                            top: -32%;
                            left: 3%;
                            z-index: 100;
                            display: none;
                        }

                        #RPTC1OpenAustralian{
                            position: absolute;
                            width: 5.3%;
                            top: 8.7%;
                            left: 2.6%;
                            z-index: 100;
                            display: none;
                        }
                    /* // 10/7/2025  START*/
                                #RPTC2Australian{
                                    position: absolute;
                                    width: 4%;
                                    top: 4.5%;
                                    left: 20%;
                                    z-index: 100;
                                }

                                    #RPTC2OpenFlushAustralian{
                                        position: absolute;
                                        width: 4%;
                                        top: -47.25%;
                                        left: 20%;
                                        z-index: 100;
                                        display: none;
                                    }

                                    #RPTC2OpenAustralian{
                                        position: absolute;
                                        width: 3.95%;
                                        top: 4.6%;
                                        left: 20%;
                                        z-index: 100;
                                        display: none;
                                    }
                                
                                #RPTC3Australian{
                                    position: absolute;
                                    width: 4%;
                                    top: 4.5%;
                                    left: 50.75%;
                                    z-index: 100;
                                }

                                    #RPTC3OpenFlushAustralian{
                                        position: absolute;
                                        width: 4%;
                                        top: -47.25%;
                                        left: 50.75%;
                                        z-index: 100;
                                        display: none;
                                    }

                                    #RPTC3OpenAustralian{
                                        position: absolute;
                                        width: 3.95%;
                                        top: 4.6%;
                                        left: 50.75%;
                                        z-index: 100;
                                        display: none;
                                    }


                                #RPTC4Australian{
                                    position: absolute;
                                    width: 4%;
                                    top: 4.5%;
                                    left: 70%;
                                    z-index: 100;
                                }

                                    #RPTC4OpenFlushAustralian{
                                        position: absolute;
                                        width: 4%;
                                        top: -47.25%;
                                        left: 70%;
                                        z-index: 100;
                                        display: none;
                                    }

                                    #RPTC4OpenAustralian{
                                        position: absolute;
                                        /* width: 4.8%;
                                        top: 2.5%; */
                                        width: 3.95%;
                                        top: 4.6%;
                                        left: 70.05%;
                                        z-index: 100;
                                        display: none;
                                    }

                /* // 10/7/2025  END*/

                    #RPSOV1Australian{
                        position: absolute;
                        width: 18%;
                        top: 40.5%;
                        left: 3%;
                        z-index: 101;
                    }
                    
                    #RPSOV2Australian{
                        position: absolute;
                        width: 18%;
                        top: 40.5%;
                        left: 81%;
                        z-index: 101;
                    }
                    
                    /* // 10/22/2025
                    #RPDataPlateAustralian{
                        position: absolute;
                        width: 8%;
                        top: 2%;
                        left: 38.2%;
                    } */

        /* 10/26/2025 */
            #RPReliefValveFlowAustralian{
                position: absolute;
                width: 10%;
                /*top: 90%;*/
                top: 94%;
                left: 48%;
                display: none;
                z-index: 1;
            }






            /* 8/20/2024 attempt*/
/* RP BACKFLOW IMAGE & COMPONENTS BEGIN */
#RPBackflowImageContainer {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 5%;
    /*transform: translateY(-50%); /* Center the container vertically */
    /*z-index: 100; /* Ensure it's above other content- this z index not needed, will interrupt flow of snapping Fittings to test ports */
}

/* Style for the labels */
.image-label {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px; /* Adjust font size as needed */
    display: none; /* Initially hidden, will be shown when needed */
    z-index: 1; /* Ensure labels are above the image */
    transform: translate(-50%, -50%); /* Center the label based on its top-left corner */
}

.show-labels .image-label {
    display: block;
}

/* 4/16/2026 Making Labels Smaller on Phones IMPORTANT IMPORTANT IMPORTANT */
.image-label {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  /* font-size: 14px; */
      font-size: 0.85rem;
  font-weight: 600;
  display: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap; /* prevents awkward wrapping */
}

.show-labels .image-label {
  display: block;
}

@media (max-width: 945px) {
  .image-label {
    font-size: 0.8rem;
    padding: 2px 5px;
    border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.02em;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
}

.label-connector {
  position: absolute;
  height: 2px;              /* thickness of the line */
  background-color: rgb(0, 0, 0);  /* or any color you want */
  transform-origin: 0 50%;  /* makes rotation pivot from left end */
  pointer-events: none;     /* so it doesn’t block dragging */
  /* z-index: 1;             under label, above images */
}

#dcLabelTestPort1 {
    top: -10%;
    left: 5%;
    /*color: red; /* Example of individual styling */
    background-color: #CBAE4E;
}

#dcLabelTestPort2 {
    top: -10%;
    left: 22.5%;
    background-color: #CBAE4E;
}

#dcLabelTestPort3 {
    top: -10%;
    left: 51%;
    background-color: #CBAE4E;
}

#dcLabelTestPort4 {
    top: -10%;
    left: 77%;
    background-color: #CBAE4E;
}

#dcLabelShutOffValve1 {
    top: 105%;
    left: 15.5%;
    /*color: blue;*/
    background-color: #064EB8;
}

#dcLabelShutOffValve2 {
    top: 105%;
    left: 84%;
    background-color: #064EB8;
}

#dcLabelCheckValve1 {
    top: -30%;
    left: 38%;
    background-color: #916F02;
}

#dcLabelCheckValve2 {
    top: -30%;
    left: 65%;
    background-color: #916F02;
}

#dcLabelReliefValve {
    top: 110%;
    left: 50%;
}

#dcLabelDataPlate {
    top: -50%;
    left: 30%;
}




/* 11/19/2025 BPAA DCV Start */
#dcAustralianLabelTestPort2 {
    top: -10%;
    left: 22.5%;
    font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#dcAustralianLabelTestPort3 {
    top: -10%;
    left: 51%;
    background-color: #CBAE4E;
}

#dcAustralianLabelTestPort4 {
    top: -10%;
    left: 77%;
    background-color: #CBAE4E;
}

#dcAustralianLabelShutOffValve1 {
    top: 110%;
    left: 15.5%;
    /*color: blue;*/
    background-color: #064EB8;
}

#dcAustralianLabelShutOffValve2 {
    top: 105%;
    left: 84%;
    background-color: #064EB8;
}

#dcAustralianLabelCheckValve1 {
    top: -30%;
    left: 38%;
    background-color: #916F02;
}

#dcAustralianLabelCheckValve2 {
    top: -30%;
    left: 65%;
    background-color: #916F02;
}

#dcAustralianLabelYStrainer {
    top: 91%;
    left: 35%;
}

#dcAustralianLabelDataPlate {
    top: -50%;
    left: 51%;
}

/* 11/19/2025 BPAA DCV END  */





#rpLabelTestPort1 {
    top: -20%;
    left: 5%;
    /*color: red; /* Example of individual styling */
    background-color: #CBAE4E;
}

#rpLabelTestPort2 {
    top: -2%;
    left: 22.5%;
    font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#rpLabelTestPort3 {
    top: -2%;
    left: 51%;
    background-color: #CBAE4E;
}

#rpLabelTestPort4 {
    top: -2%;
    left: 77%;
    background-color: #CBAE4E;
}

#rpLabelShutOffValve1 {
    top: 77%;
    left: 15.5%;
    /*color: blue;*/
    background-color: #064EB8;
}

#rpLabelShutOffValve2 {
    top: 80%;
    left: 84%;
    background-color: #064EB8;
}

#rpLabelCheckValve1 {
    top: -23%;
    left: 38%;
    background-color: #916F02;
}

#rpLabelCheckValve2 {
    top: -23%;
    left: 65%;
    background-color: #916F02;
}

#rpLabelReliefValve {
    top: 110%;
    left: 50%;
    background-color: #916F02;
}

#rpLabelDataPlate {
    top: -45%;
    left: 30%;
}

/* 11/12/2025 Australian RP */

#rpAustralianLabelTestPort2 {
    top: -10%;
    left: 22.5%;
    font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#rpAustralianLabelTestPort3 {
    top: -10%;
    left: 51%;
    background-color: #CBAE4E;
}

#rpAustralianLabelTestPort4 {
    top: -10%;
    left: 77%;
    background-color: #CBAE4E;
}

#rpAustralianLabelShutOffValve1 {
    top: 95%;
    left: 10.5%;
    /*color: blue;*/
    background-color: #064EB8;
}

#rpAustralianLabelShutOffValve2 {
    top: 95%;
    left: 84%;
    background-color: #064EB8;
}

#rpAustralianLabelCheckValve1 {
    top: -33%;
    left: 38%;
    background-color: #916F02;
}

#rpAustralianLabelCheckValve2 {
    top: -33%;
    left: 65%;
    background-color: #916F02;
}

#rpAustralianLabelReliefValve {
    top: 110%;
    left: 55%;
    background-color: #916F02;
}

#rpAustralianLabelYStrainer {
    top: 100%;
    left: 36%;
    background-color: #916F02;
}

#rpAustralianLabelDataPlate {
    top: -57%;
    left: 53%;
}




#pvbLabelTestPort1 {
    top: 46%;
    left: -14%;
    /*color: red; /* Example of individual styling */
    background-color: #CBAE4E;
}

#pvbLabelTestPort2 {
    top: 3%;
    left: -14%;
    /*font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#pvbLabelAirInletValve {
    top: -3%;
    left: 52%;
}

#pvbLabelShutOffValve1 {
    top: 70%;
    left: -10%;
    /*color: blue;*/
    background-color: #064EB8;
}

#pvbLabelShutOffValve2 {
    top: 33%;
    left: 70%;
    background-color: #064EB8;
}

#pvbLabelPVBCover {
    top: -18%;
    left: 20%;
    background-color: black;
}

#pvbLabelDataPlate {
    top: 32%;
    left: 20%;
}

#pvbLabelReading {
    top: -45%;
    left: 38%;
}





#svbLabelTestPort1 {
    top: 46%;
    left: -14%;
    /*color: red; /* Example of individual styling */
    background-color: #CBAE4E;
}

#svbLabelTestPort2 {
    top: 3%;
    left: -14%;
    /*font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#svbLabelAirInletValve {
    top: -3%;
    left: 52%;
}

#svbLabelShutOffValve1 {
    top: 70%;
    left: -10%;
    /*color: blue;*/
    background-color: #064EB8;
}

#svbLabelShutOffValve2 {
    top: 33%;
    left: 70%;
    background-color: #064EB8;
}

#svbLabelsvbCover {
    top: -18%;
    left: 20%;
    background-color: black;
}

#svbLabelDataPlate {
    top: 32%;
    left: 20%;
}

#svbLabelReading {
    top: -45%;
    left: 38%;
}



/* creates lines from label */
.label-with-line::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 40px; /* Adjust based on the length of the line */
    background-color: black; /* Line color */
    top: 100%; /* Start from the bottom of the label */
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1; /* Ensure the line is behind the label */
}
      
/* Specific styles for the Toggle Labels button */
#toggleLabelsButton {
    padding: 10px 20px;
    background-color: #28a745; /* Green background */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
    z-index: 1000;
}

#toggleLabelsButton:hover {
    background-color: #218838; /* Darker green on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

#toggleLabelsButton.TPBbtn-active {
    background-color: #e6ea0b; /* Yellow */
    color: black; /* Black text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Slightly darker shadow */
  }

#toggleLabelsButton:focus {
    outline: none; /* Remove focus outline */
}


            #RPReliefValveFlow{
                position: absolute;
                width: 10%;
                /*top: 90%;*/
                top: 93.5%;
                left: 45%;
                display: none;
                z-index: 1;
            }
            /* IAPMO 5/17/2025 */
                    #testPort3FlowIAMPO{
                        position: absolute;
                        width: 10%;
                        /*top: 90%;*/
                        top: -85.5%;
                        left: 45%;
                        display: none;
                        z-index: 1;
                    }
                    #testPort4FlowIAMPO{
                        position: absolute;
                        width: 10%;
                        /*top: 90%;*/
                        top: -85.5%;
                        left: 72%;
                        display: none;
                        z-index: 1;
                    }
    
        
        #RPTC1{
            position: absolute;
            width: 4.5%;
            top: 9.5%;
            left: 3%;
            z-index: 100;
        }

            #RPTC1OpenFlush{
                position: absolute;
                width: 4.5%;
                top: -32.55%;
                left: 3%;
                z-index: 100;
                display: none;
            }

            #RPTC1Open{
                position: absolute;
                width: 4.46%;
                top: 9.5%;
                left: 3%;
                z-index: 100;
                display: none;
            }
        
        #RPTC2{
            position: absolute;
            width: 4.5%;
            top: 9.5%;
            left: 20%;
            z-index: 100;
        }

            #RPTC2OpenFlush{
                position: absolute;
                width: 4.5%;
                top: -32.55%;
                left: 20%;
                z-index: 100;
                display: none;
            }

            #RPTC2Open{
                position: absolute;
                width: 4.46%;
                top: 9.5%;
                left: 20%;
                z-index: 100;
                display: none;
            }
        
        #RPTC3{
            position: absolute;
            width: 4.5%;
            top: 9.5%;
            left: 48%;
            z-index: 100;
        }

            #RPTC3OpenFlush{
                position: absolute;
                width: 4.5%;
                top: -32.55%;
                left: 48%;
                z-index: 100;
                display: none;
            }

            #RPTC3Open{
                position: absolute;
                width: 4.46%;
                top: 9.5%;
                left: 48%;
                z-index: 100;
                display: none;
            }

            #RPTC3FlowL{
                position: absolute;
                transform: rotate(-130deg);
                width: 5%;
                top: -25%;
                left: 55.5%;
                z-index: 100;
                display: none;
            }

            #RPTC3FlowR{
                position: absolute;
                transform: rotate(130deg);
                width: 5%;
                top: -25%;
                left: 40%;
                z-index: 100;
                display: none;
            }
            #RPTC4FlowL{
                position: absolute;
                transform: rotate(-130deg);
                width: 5%;
                top: -25%;
                left: 82.5%;
                z-index: 100;
                display: none;
            }

            #RPTC4FlowR{
                position: absolute;
                transform: rotate(130deg);
                width: 5%;
                top: -25%;
                left: 67.5%;
                z-index: 100;
                display: none;
            }
    

        #RPTC4{
            position: absolute;
            width: 4.5%;
            top: 9.5%;
            left: 75%;
            z-index: 100;
        }

            #RPTC4OpenFlush{
                position: absolute;
                width: 4.5%;
                top: -32.55%;
                left: 75%;
                z-index: 100;
                display: none;
            }

            #RPTC4Open{
                position: absolute;
                width: 4.46%;
                top: 9.5%;
                left: 75.05%;
                z-index: 100;
                display: none;
            }
        
        #RPSOV1{
            position: absolute;
            width: 25%;
            top: 41.25%;
            left: 3%;
            z-index: 101;
        }
        
        #RPSOV2{
            position: absolute;
            width: 25%;
            top: 41.25%;
            left: 72%;
            z-index: 101;
        }
        
        #RPDataPlate{
            position: absolute;
            width: 10%;
            top: 1.5%;
            left: 31%;
        }


        
        /* RP BACKFLOW IMAGE & COMPONENTS END*/
        
        /* PVB BACKFLOW IMAGE & COMPONENTS BEGIN*/
        #PVBBackflowImageContainer{
            position: absolute;
            width: 40%;
            top: 37%;
            left: 25%;
            /*z-index: 100;*/
            }

            /* // 5/24/2025 may be an important detail, DC and RP dont have this */
            #PVBBackflow{
                z-index: 5;
            }

            #PVBTCFlow{
                    position: absolute;
                    /*transform: rotate(90deg);*/
                    width: 25%;
                    top: 9.2%;
                    left: -57%;
                    display: none;
                }

            #PVBTC1Flow{
                    position: absolute;
                    /*transform: rotate(90deg);*/
                    width: 25%;
                    top: 52.5%;
                    left: -72%;
                    display: none;
                }

            #PVBbovFlow{
                    position: absolute;
                    /*transform: rotate(90deg);*/
                    width: 10%;
                    top: 12%;
                    left: -35%;
                    display: none;
                }

            #PVBAIVFailureFlowL{
                    position: absolute;
                    transform: rotate(350deg);
                    width: 25%;
                    top: 0.5%;
                    left: -25%;
                    display: none;
                }

            #PVBAIVFailureFlowR{
                    position: absolute;
                    transform: rotate(190deg);
                    width: 25%;
                    top: -1.5%;
                    left: 43%;
                    display: none;
                }
                
                #PVBAirInletValveClosed{
                    position: absolute;
                    width: 20%;
                    top: -11%;
                    left: 11%;
                    z-index: 1;
                    display: block;
                }
    
                #PVBAirInletValveOpen{
                    position: absolute;
                    width: 20%;
                    top: -11%;
                    left: 11%;
                    z-index: 1; /* !!!!!!!! */
                    display: none;
                }
            
                #PVBTC1{
                position: absolute;
                transform: rotate(90deg);
                width: 13%;
                top: 47%;
                left: -5.5%;
                z-index: 10;
                }
    
                #PVBTC1OpenFlush{
                    position: absolute;
                    transform: rotate(270deg);
                width: 13.45%;
                top: 28.6%;
                left: -28.5%;
                    display: none;
                                    z-index: 10;
                            }
    
                #PVBTC1Open{
                    position: absolute;
                    transform: rotate(90deg);
                width: 13.15%;
                    top: 46.5%;
                    left: -6%;
                    display: none;
                z-index: 10;
                    }
        
            #PVBTC2{
                position: absolute;
                transform: rotate(90deg);
                width: 13%;
                top: 4%;
                left: -17%;
                z-index: 10;
            }
    
            #PVBTC2OpenFlush{
                position: absolute;
                transform: rotate(270deg);
                width: 13.45%;
                top: -14.5%;
                left: -40%;
                display: none;
                z-index: 10;
                }

    
            #PVBTC2Open{
                position: absolute;
                transform: rotate(90deg);
                width: 13.15%;
                top: 3.75%;
                left: -17%;
                display: none;
                                z-index: 10;
                }
    
            
            #PVBSOV1{
                position: absolute;
                /* 12/19/2025 added data-initial-rotation="90" data-rotation="90" to HTML */
                /* transform: rotate(90deg); */
                width: 48%;
                top: 65%;
                left: -3%;
                z-index: 400;
            }
            
            #PVBSOV2{
                position: absolute;
                width: 48%;
                top: 9.75%;
                left: 45%;
                z-index: 400;
            }
            /* OG LOGIC
            #PVBCover{
                position: absolute;
                width: 45%;
                top: -12%;
                left: -1.5%;
               /*left: 55%;/////
               z-index: 2;
            }
            */

            /* 1/28/2025 */
            #PVBCover{
                position: absolute;
                width: 8%;
                top: 20.5%;
                left: 63.62%;
               /*left: 55%;*/
               z-index: 6;
               display: none;
            }
            
            #PVBDataPlate{
                position: absolute;
                transform: rotate(45deg);
                width: 33%;
                top: 6%;
                left: 4%;
                z-index: 11;
            }

            #PVBFlowDrops{
                position: absolute;
                width: 12%;
                top: 8%;
                left: -160%;
                transform: scaleX(-1);
                display: none;
            }

        /* PVB BACKFLOW IMAGE & COMPONENTS END*/
        
        /* SVB BACKFLOW IMAGE & COMPONENTS BEGIN*/
        #SVBBackflowImageContainer{
            position: absolute;
            width: 40%;
            top: 37%;
            left: 25%;
           /* z-index: 100;*/
            display: block;
            }

            #SVBBackflow{
                z-index: 5;
            }
        
            #SVBTC1{
            position: absolute;
            transform: rotate(90deg);
            width: 13%;
            top: 47%;
                left: -5.5%;
            z-index: 10;
        }

            #SVBTC1OpenFlush{
                position: absolute;
                transform: rotate(270deg);
                width: 13.45%;
                top: 28.6%;
                left: -28.5%;
                display: none;
                z-index: 10;
                }

        #SVBTC1Open{
            position: absolute;
            transform: rotate(90deg);
            width: 13%;
            top: 47%;
            /* top: 46.5%; */
            left: -5.6%;
            display: none;
            z-index: 10;
        }
                    
        #SVBVV{
            position: absolute;
            transform: rotate(90deg);
            width: 11%;
            top: 14%;
            left: -10%;
        }

        #SVBVVCrackedOpen{
            position: absolute;
            transform: rotate(90deg);
            width: 11%;
            top: 14%;
            left: -10%;
            display: none;
        }


        #SVBVVSlightlyOpen{
            position: absolute;
            width: 37%;
            top: -3%;
            left: -35%;
            display: none;
        }

        #SVBVVOpen{
            position: absolute;
            transform: rotate(90deg);
            width: 11%;
            top: 14%;
            left: -10%;
            display: none;
        }

        
        #SVBSOV1{
            position: absolute;
                /* 12/19/2025 added data-initial-rotation="90" data-rotation="90" to HTML */
                /* transform: rotate(90deg); */
            width: 48%;
            top: 65%;
            left: -3%;
            z-index: 100;
        }
        
        #SVBSOV2{
            position: absolute;
            width: 48%;
            top: 9.75%;
            left: 45%;
            z-index: 100;
        }
        /* OG LOGIC
        #SVBCover{
            position: absolute;
            width: 45%;
            top: -12%;
            left: -1.5%;
           /*left: 55%;////
           z-index: 2;
        }
           */
        
                       /* 1/28/2025 */
                       #SVBCover{
                        position: absolute;
                        width: 8%;
                        top: 21.5%;
                        left: 63.58%;
                       /*left: 55%;*/
                       z-index: 2;
                       display: none;
                    }
        
        #SVBDataPlate{
            position: absolute;
            transform: rotate(45deg);
            width: 33%;
            top: 6%;
            left: 4%;
        }

        #SVBAirInletValveClosed{
            position: absolute;
            width: 20%;
            top: -11%;
            left: 11%;
            z-index: 1;
        }

        #SVBAirInletValveOpen{
            position: absolute;
            width: 20%;
            top: -11%;
            left: 11%;
            z-index: 1;
            display: none;
        }
        

        
        #SVBAirInletValveWater{
            position: absolute;
            width: 20.85%;
            top: 0.5%;
            left: 10.5%;
            z-index: 100;
            display: none;
        }

        /*9/6/24 - Added to see if we can fix SVB Air Inlet Valve Open logic and it worked! If specific elements with SVB Components class have their own z-indez thats higher, THAT will override this. !!!!!!!! */
        .SVBComponents {
            position: absolute;
            z-index: 10; /* Adjust as needed */
          }
          
        
        #SVBTCFlowUP{
            position: absolute;
            transform: rotate(30deg);
            width: 25%;
            top: 3.5%;
            left: -25%;
            display: none;
        }

        #SVBTCFlowDOWN{
            position: absolute;
            transform: rotate(330deg);
            width: 25%;
            top: 26.5%;
            left: -25%;
            display: none;
        }

        #SVBVVFlow{
                position: absolute;
                width: 25%;
                top: 13.5%;
                left: -45%;
                display: none;
            }

            /* Single Arrow */
            #SVBTC1SlowFlow{ 
                position: absolute;
                transform: rotate(45deg);
                width: 10%;
                top: 20%;
                left: -25%;
                display: none;
            }
            /* 4/23/2026 */
            #SVBTC1Flow{
                position: absolute;
                width: 25%;
                top: 52.5%;
                left: -71%;
                display: none;
            }

            #SVBFlowDrops{
                position: absolute;
                width: 8%;
                top: 25%;
                left: -18%;
                z-index: 110;
                display: none;
            }

            #SVBAIVFailureFlowL{
                position: absolute;
                transform: rotate(350deg);
                width: 25%;
                top: 0.5%;
                left: -25%;
                display: none;
            }
            
        #SVBAIVFailureFlowR{
                position: absolute;
                transform: rotate(190deg);
                width: 25%;
                top: -1.5%;
                left: 43%;
                display: none;
            }


        /* SVB BACKFLOW IMAGE & COMPONENTS END*/
    /* BACKFLOW LEGEND OPTIONS END*/
/* Main Body Responsive Images END */



/* Modal Overlay to START Test Scenarios BEGIN*/
    /* .modal-overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin-top: 0;
        background-color: rgba(0, 0, 0, 0.7); 
        z-index: 102; 
    } */

    /* 8/12/2025 iphone fix 1 */
        /* .modal-overlay {
            position: fixed;           */
            /* fixed = relative to the viewport */
            /* inset: 0;                  */
            /* top/right/bottom/left: 0 (avoids 100vw overflow quirks) */
            /* Optional, if you need to respect notches/home indicator: */
            /* padding-top: env(safe-area-inset-top);
            padding-right: env(safe-area-inset-right);
            padding-bottom: env(safe-area-inset-bottom);
            padding-left: env(safe-area-inset-left);

            background-color: rgba(0, 0, 0, 0.7); */
            /* z-index: 102;             */
            /* higher than anything else */
            /* touch-action: none;        */
            /* stop scroll/zoom gestures through the overlay */
            /* } */

            /* @supports (height: 100dvh) {
            .modal-overlay { height: 100dvh; }
            } */

    /* LOADING SCREEN LOGIC ------------------------------------------------------------------------------------------------------------------------------------------------------  */


/* OG LOGIC 11/27/24
                    Fullscreen loading screen container 
                    #loadingScreenContainer {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100vw;
                        height: 100vh;
                        background-color: rgba(255, 255, 255, 0.9); /* Light overlay 
                        /*display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 9999; /* On top of all other elements 
                        display: block; 
                    }
                    */

                    /* Loading screen image with effects 
                    #loadingScreen {
                        position: absolute;
                        top: -19%;
                        width: 100%;
                        justify-content: center;
                        align-items: center;
                        /*max-width: 150px; /* Set size 
                        /* animation: pulse 2s infinite ease-in-out; /* Add a pulsing animation 
                        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); /* Add a drop shadow effect 
                        overflow: hidden;
                    }
                    */

                    /*
                    #backflowTestingSimulatorScreen {
                        position: absolute;
                        top: -19%;
                        width: 100%;
                        justify-content: center;
                        align-items: center;
                        /*max-width: 150px; /* Set size 
                        /* animation: pulse 2s infinite ease-in-out; /* Add a pulsing animation 
                        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); /* Add a drop shadow effect 
                        display: none;
                        overflow: hidden;
                    }
                        */



/* 11/27/24 Attempt to make loading screen centered */
    #loadingScreenContainer {
        position: fixed; /* Make sure it's fixed in place */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.9); /* Light overlay */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; /* On top of all other elements */
        /* Hide the container initially if needed */
        display: flex;
        overflow: hidden; /* Prevent scrolling */
    }
    
    #loadingScreen {
        position: absolute;
        width: 100%; /* Adjust as needed */
        max-width: 100%; /* Optional: limit the size */
        /* Add a shadow effect */
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
    }
    
    #backflowTestingSimulatorScreen {
        position: absolute;
        width: 100%; /* Adjust as needed */
        max-width: 100%; /* Optional: limit the size */
        display: none;
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); /* Add a shadow effect */
    }
    
    #loadingText, #loadingBTSText {
        position: absolute;
        font-size: 1.5rem;
        color: #000;
        text-align: center;
        z-index: 10000; /* Ensure it's on top */
    }
    
    /* Optionally, use keyframes to animate loading text or effect */
    #loadingText {
        top: 70%; /* Position below the loading screen image */
        font-weight: bold;
    }
    
    #loadingBTSText {
        top: 80%; /* Position it further down */
        font-weight: bold;
    }
    
    

/* Animation for pulsing effect */
@keyframes pulse {
    0% {
        transform: scale(1); /* Normal size */
    }
    50% {
        transform: scale(1.1); /* Grow slightly */
    }
    100% {
        transform: scale(1); /* Back to normal size */
    }
}

/* Text overlay */
#loadingText {
    position: absolute; /* Position the text absolutely over the image */
    color: white; /* Text color */
    font-size: 2rem; /* Adjust the text size */
    text-align: center;
    bottom: 23%; /* Adjust the position of the text, e.g., near the bottom */
    width: 100%; /* Full width for center alignment */
    z-index: 10000; /* Higher z-index than the image */
    font-family: Arial, sans-serif; /* Font styling */
    animation: pulse 2s infinite ease-in-out; /* Add a pulsing animation */
}

#loadingBTSText {
    position: absolute; /* Position the text absolutely over the image */
    color: rgb(15, 15, 15); /* Text color */
    font-size: 2rem; /* Adjust the text size */
    text-align: center;
    bottom: 23%; /* Adjust the position of the text, e.g., near the bottom */
    width: 100%; /* Full width for center alignment */
    z-index: 10000; /* Higher z-index than the image */
    font-family: Arial, sans-serif; /* Font styling */
    animation: pulse 2s infinite ease-in-out; /* Add a pulsing animation */
    display: none;
}

#testValueModal {
    display: none; /* Hide the modal by default */
    /*animation: fadeIn 0.5s ease-out; /* Apply the fadeIn animation */
}

/* 6/22/2025 */
            #trackingDebugModal {
                display: none; /* Hide the modal by default */
                /*animation: fadeIn 0.5s ease-out; /* Apply the fadeIn animation */
            }

            #trackingDebugList {
            font-family: monospace;
            font-size: 14px;
            line-height: 1.4;
            max-height: 70vh;
            overflow-y: auto;
            padding: 0 10px;
            }

            #trackingDebugList li {
            margin: 2px 0;
            }

            .start-word-tracking {
            color: green;
            font-weight: bold;
            }

            .end-word-tracking {
            color: red;
            font-weight: bold;
            }

            .timestamp-tracking {
            color: #666;
            font-weight: normal;
            font-style: italic;
            font-size: 0.95em;
            }


#examModal {
    display: none; /* Hide the modal by default */
    /*animation: fadeIn 0.5s ease-out; /* Apply the fadeIn animation */
}

#bpaaTestingProceduresWarningModal {
    display: none; /* Hide the modal by default */
    /*animation: fadeIn 0.5s ease-out; /* Apply the fadeIn animation */
}

#flowchartModal {
    display: none; /* Hide the modal by default */
    /*animation: fadeIn 0.5s ease-out; /* Apply the fadeIn animation */
}

/* The Close Buttons */
.close {
    color: #f00a0a;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }




    /* Style for the modal content - OG LOGIC
    .modal-content {
        background-color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 103; /* Place the modal content above the overlay //
    }
*/

.modal-content {
    background-color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 103; /* Place the modal content above the overlay */
    
    display: flex;
    flex-direction: column; /* Ensure elements are stacked vertically */
    align-items: center; /* Horizontally center all child elements */
    justify-content: center; /* Vertically center all child elements */
    text-align: center; /* Optional: center the text in the modal */
}


    /* Style for the modal content */
    .modal-contentTestValues {
        background-color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        width: 25%;
        top: 33%;
        left: 33%;
        /* transform: translate(-50%, -50%); removed this property so the image wont appear in the center anymore but the testvaluemodal can now be moved with makeelementdraggable
        z-index: 101; /* Place the modal content above the overlay */
        
        /* Add border properties */
        border: 2px solid #0a0a0a; /* Example: 2px width, solid style, light gray color */
        touch-action: none; 
        z-index: 103;
    }


    /* ───────────────────────────────
   0)  Generic modal overlay
──────────────────────────────── */
#customExamModal {
    position: fixed;
    inset: 0;                         /* top:0 right:0 bottom:0 left:0 */
    background: rgba(0,0,0,.35);      /* translucent backdrop */
    display: flex;
    justify-content: center;          /* flex-box centering */
    align-items: center;
    z-index: 102;                     /* ✱ overlay under the dialog (103) */
  }

/* ───────────────────────────────
   1)  Dialog box
──────────────────────────────── */
.modal-contentTestValuesCustomExam {
  /* sizing */
  width: 40vw;                      /* 80 % of viewport width  */
  /* max-width: 1000px;                optional hard cap      */
  height: auto;                     /* let height grow until we hit… */
  max-height: 80vh;                 /* …80 % of viewport height */
  overflow-y: auto;                 /* scroll if content is taller   */

  /* visuals */
  background: #fff;
  border: 2px solid #0a0a0a;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  padding: 2px;
  font-family: "Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;

  /* positioning for first open
     (ignored once the user drags it) */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  touch-action: none;               /* keep your draggable helper happy */
  z-index: 103;                     /* one level above the backdrop     */
}

    #confirmBox { 
        display:none; 
        z-index: 10110;    
        }

        .missed-row { font-weight:600; margin-bottom:6px; }
        #missedCount { font-weight:400; font-size:.85rem; color:#555; }


        .pastResultsModalOverlay{
            display: none;
            z-index: 10100;    
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin-top: 0;
            background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
        }

        #startCustomExamBtn{
            background-color: rgb(76, 175, 80);
            color: white;
        }

/* 4/28/2026 long and short modal */
/* .modal-contentcluesQuestion {
  background-color: white;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  border-radius: 10px;
  position: absolute;
  width: 70%;        
  max-width: 700px;  
  top: 20%;          
  left: 50%;
  border: 2px solid #0a0a0a;
  z-index: 1010;
  touch-action: none;
  overflow: hidden;
  max-height: 55vh;  
  display: flex;
  flex-direction: column;
} */

.modal-contentcluesQuestion {
  background-color: #fff;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
  position: relative; /* was absolute — no longer floating */
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: none; /* remove old border */
  font-family: inherit; /* remove old font override */
  touch-action: none;
}
.modal-drag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px;
  flex-shrink: 0; /* never shrinks — always visible */
  cursor: grab;
  touch-action: none; /* drag zone */
  border-bottom: 1px solid var(--border);
}


.modal-drag-header:active {
  cursor: grabbing;
}

.modal-drag-header .close {
  position: static; /* override absolute since it's in flex now */
  flex-shrink: 0;
}

.modal-scrollable-body {
  padding: 12px 20px 20px;
  overflow-y: auto;
  touch-action: pan-y; /* allow vertical touch scrolling here */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  flex: 1; /* fills remaining height */
}
    /* // 4/28/2025 */
                    /* put anywhere after your existing stylesheet */
                .modal-contentcluesQuestion h2 {
                    margin: 0;      /* kills top + bottom margin */
                    padding: 0;     /* kills any default padding */
                }

                .modal-contentTestValuesCustomExam h2{
                    margin-bottom: 0;      /* kills top + bottom margin */
                    padding: 0;     /* kills any default padding */
                  }
              
.modal-drag-header .drag-handle {
  position: static; /* override absolute */
  top: auto;
  left: auto;
  width: 28px;
  height: 28px;
}
                @keyframes practiceExamFlash {
                    /* 0%   { background: #ffefef; } */
                    0%   { background: #e6ea0b; }
                    100% { background: transparent; }
                }
                
                .flash-once-practiceExamFlash {
                    animation: practiceExamFlash 0.75s ease-out;
                }
  

                    /* 4/22/2025 */

                    .clues-media-container {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 8px;
                        margin-bottom: 12px;
                    }
                    .clues-media-container img.clue-image {
                        max-width: 100px;
                        border-radius: 4px;
                    }
                    .clues-media-container video.clue-video {
                        max-width: 240px;
                        border-radius: 4px;
                    }
      
    
    /* #cluesQuestionModal {
        display: none; 
    } */
    /*animation: fadeIn 0.5s ease-out; /* Apply the fadeIn animation */
    /* overflow-y: auto;   Enables vertical scrolling */

    .clue-source {
        font-size: .8rem;
        color: #444;
        border-top: 1px solid #ccc;
        padding-top: 4px;
        margin-bottom: 0;
      }
      
      /* // 4/28/2025 */
      .initial-hint { margin: 0 0 4px 0; font-weight: 300; }
       

    #feedbackModal {
        display: none; /* Hide the modal by default */
        /*animation: fadeIn 0.5s ease-out; /* Apply the fadeIn animation */
    }

    .modal-contentFeedback {
        background-color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        width: 25%;
        top: 33%;
        left: 33%;
        /* transform: translate(-50%, -50%); removed this property so the image wont appear in the center anymore but the testvaluemodal can now be moved with makeelementdraggable
        z-index: 101; /* Place the modal content above the overlay */
        
        /* Add border properties */
        border: 2px solid #0a0a0a; /* Example: 2px width, solid style, light gray color */
        touch-action: none; 
        z-index: 1010;
    }

    .feedback-section {
        margin-bottom: 16px;
      }
      
      .feedback-section label {
        display: block;          /* put label on its own line */
        font-weight: bold;       /* emphasize label */
        margin-bottom: 4px;      /* small space below the label */
      }
      
      /* Make textareas full width, if you want */
      .feedback-section textarea {
        width: 100%;
        min-height: 80px;        /* or as you like */
        resize: vertical;        /* user can drag to resize height */
        box-sizing: border-box;
        padding: 8px;
        font-family: inherit;    /* match the modal’s font */
        font-size: 14px;
      }
      
      /* For the radio or star rating container, some spacing */
      .difficulty-options {
        display: flex;
        gap: 12px; /* space between radio labels */
        margin-top: 4px;
      }
      .star-rating {
        display: inline-block; /* keep them together */
      }
      .star {
        margin-right: 6px;
      }
      
  
    

/* 
                  .modal-contentCustomKeypad {
                background-color: white;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                padding: 10px;
                border-radius: 10px;
                border: 2px solid #070707;
                position: absolute;
                top: 0;
                left: 10%;
                /* transform: scale(0.8); original scale//

                transform: scale(0.9);
                z-index: 103; 
                
                display: flex;
                flex-direction: column;
                align-items: center; 
                justify-content: center; 
                text-align: center; 

                cursor: move; 
                touch-action: none; 

            }
*/

    .modal-contentExamMode {
        background-color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        width: 40%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 101; /* Place the modal content above the overlay */
        
        /* Add border properties */
        border: 2px solid #0a0a0a; /* Example: 2px width, solid style, light gray color */
    }

    .modal-contentBPAABackflowTestingProcedures {
        background-color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        width: 40%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 101; /* Place the modal content above the overlay */
        
        /* Add border properties */
        border: 2px solid #0a0a0a; /* Example: 2px width, solid style, light gray color */
    }



    .modal-contentTestValuesSubmitModal {
        background-color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 12000; /* Place the modal content above the overlay */
        
        /* Add border properties */
        border: 2px solid #0a0a0a; /* Example: 2px width, solid style, light gray color */
    }
    
    /* Used in step1ModalClass */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translate(-50%, -60%); /* Start slightly higher */
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%); /* End at the original position */
        }
    }
    
    /* Step 1 NIIO Modal */
    .step1ModalClass {
        background-color: rgba(76, 175, 80, 0.9); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 35%; /* Center vertically */
        left: 50%; /* Center horizontally 5/14/2025 changed from 50 to 30 to work with simulatorwrapper*/
        transform: translate(-50%, -50%);
        z-index: 98; /* Place the modal content above the overlay */
        color: #ffffff; /* Text color */
    
        /* New properties to make it square and scrollable */
        width: 20%; /* Fixed width */
        height: 20%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .divergentModalClass {
        background-color: rgba(179, 41, 31, 0.8); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #ffffff; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 35%; /* Fixed width */
        height: 8%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .betaTesterModalClass {
        background-color: rgba(8, 91, 199, 0.8); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 40%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 100; /* Place the modal content above the overlay */
        color: #ffffff; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 40%; /* Fixed width */
        height: 40%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .divergentModalClassSmall {
        background-color: rgba(179, 41, 31, 0.8); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 45%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #ffffff; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 20%; /* Fixed width */
        height: 10%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .disconnectSTBOVHEModalClass {
        background-color: rgba(235, 232, 74, 1); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 45%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #000000; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 20%; /* Fixed width */
        height: 10%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .disconnectBypassHoseEndModal {
        background-color: rgba(235, 232, 74, 1); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 45%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #000000; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 20%; /* Fixed width */
        height: 10%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .sighttubeMoveHeadsUpModalClass {
        background-color: rgba(235, 232, 74, 1); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 75%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #000000; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 20%; /* Fixed width */
        height: 10%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

/* 9/10/24 Commented Out !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#toggleModalsButton{
    position: absolute;
    z-index: 150;
}
*/

.simpleReminderModalC{
    display: none;
}
    .valueReminderModal {
        background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #ffffff; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 40%; /* Fixed width */
        height: 8%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }
    .valueReminderModalSmall {
        background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 45%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #ffffff; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 20%; /* Fixed width */
        height: 10%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .observeValueReminderModal {
        background-color: rgba(235, 232, 74, 1); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #111010; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 35%; /* Fixed width */
        height: 8%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }
    
    .universalModalContent {
        background-color: rgba(235, 232, 74, 1); /* Green with 80% opacity */
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        position: absolute;
        top: 20%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 3; /* Place the modal content above the overlay */
        color: #111010; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 35%; /* Fixed width */
        height: 8%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .nameSavedClassModal {
        background-color: rgb(255, 255, 255); 
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        border: 2px solid rgb(0, 0, 0); /* Add a border around the container */
        position: absolute;
        top: 20%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 1000; /* Place the modal content above the overlay */
        color: #111010; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 40%; /* Fixed width */
        height: 8%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .certCalSavedClassModal {
        background-color: rgb(255, 255, 255); 
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        border: 2px solid rgb(0, 0, 0); /* Add a border around the container */
        position: absolute;
        top: 20%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 1000; /* Place the modal content above the overlay */
        color: #111010; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 40%; /* Fixed width */
        height: 8%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .validateFormClassModal {
        background-color: rgb(255, 255, 255); 
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        border: 2px solid rgb(0, 0, 0); /* Add a border around the container */
        position: absolute;
        top: 20%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 1000; /* Place the modal content above the overlay */
        color: #111010; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 40%; /* Fixed width */
        height: 30%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }

    .betaTesterNotesSavedClassModal {
        background-color: rgb(255, 255, 255); 
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 20px;
        border-radius: 10px;
        border: 2px solid rgb(0, 0, 0); /* Add a border around the container */
        position: absolute;
        top: 20%; /* Center vertically */
        left: 60%; /* Center horizontally */
        transform: translate(-50%, -50%);
        z-index: 1000; /* Place the modal content above the overlay */
        color: #111010; /* Text color */
    
        /* New properties to make it square and scrollable */
        /* width: 20%; /* Fixed width */
        width: 40%; /* Fixed width */
        height: 8%; /* Fixed height */
        overflow-y: auto; /* Enable vertical scrolling */
        /* Animation */
    animation: fadeIn 0.5s ease-out; /* Adjust timing as needed */
    }
    
/* validateFormModal */
    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        color: #ff0505;
    }
    
    .close-button:hover {
        color: red; /* Optional hover effect */
    }
    



/* Timer Slider Start*/

/* Toggle Switch Container */
.switch {
  position: relative; /* override absolute */
  top: auto;
  left: auto;
  display: inline-block;
  width: 50px;
  height: 25px;
  flex-shrink: 0;
}  
  /* Hide Default Checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* Slider Track */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 25px;
  }
  
  /* Circle Knob */
/* remove the img element from HTML and use ::before on the knob instead */
.slider:before {
  content: "⏱";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px; /* fixed pixel value instead of 50% + translateY */
  background-color: white;
  border-radius: 50%;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  transform: translateX(0); /* only X ever changes */
}

@media (max-width: 945px) {
  .slider:before {
    top: 2px;
  }
}

input:checked + .slider:before {
  transform: translateX(24px); /* only slide horizontally, no Y involved */
}  input:checked + .slider {
    background-color: #4caf50; /* Green ON state */
  }
  
  .toggle-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    transition: transform 0.3s ease-in-out; /* Matches the transition */
  }
  

  input:checked + .slider .toggle-icon {
    transform: translateX(24px) translateY(-50%);
  }

.timer-wrapper {
  position: relative; /* override absolute */
  top: auto;
  left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
  /* If you want #timerDisplay specifically below the slider, offset it: */
#timerDisplay {
  position: static; /* override absolute */
  transform: none;
  bottom: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  margin-left: 8px; /* gap between toggle and timer text */
}  

  .progress-bar-container {
    width: 100%;         /* or a fixed width, like 300px */
    height: 20px;        /* height of the bar */
    background-color: #ccc;
    border-radius: 10px; /* rounded corners if you like */
    margin-bottom: 10px; /* space beneath the bar */
    overflow: hidden;    /* ensures fill is clipped to the container’s border */
  }
  
  .progress-bar-fill {
    width: 0%;           /* start at 0% */
    height: 100%;
    background-color: #4caf50; /* green fill */
    transition: width 0.5s ease; /* animate the fill */
  }
  
  /* Timer SLider End */


  
        
    #startPTButton{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 15px;
        border-radius: 50px;
        background-color: #4CAF50;
        color: white;
        font-size: 0.9rem;
        font-weight: bold;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
        /* 3/27/2026 */
        -webkit-appearance: none;
        appearance: none;
          -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
    }
/* Modal Overlay to START Test Scenarios BEGIN*/


/* Warning Modal Begin */
.modalC {
    background-color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 103; /* Place the modal content above the overlay */
}

.multipleFailureModalC {
    background-color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #0a0a0a; /* Example: 2px width, solid style, light gray color */
    z-index: 101; /* Place the modal content above the overlay */
}

.modalOverlayC{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    z-index: 102; /* Place the overlay above other content */
}

#arrow-testkit{
    position: absolute;
    top: 10%;
    left: 40.75%;
}

#arrow-backflow{
    position: absolute;
    top: 10%;
    left: 68.15%;
}

#arrow-condition{
    position: absolute;
    top: 10%;
    left: 95.4%;
}

#arrow-startButton{
    position: absolute;
    transform: rotate(270deg);
    top: 28%;
    left: 73%;
    display: block;
    z-index: 101;
}

@keyframes flashArrow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.red-arrow {
    animation: flashArrow 1.5s infinite;
}


/* 11/10/24 attempt*/
                        button[aria-disabled="true"] {
                            opacity: 0.5;
                            pointer-events: none;
                            cursor: not-allowed;
                        }

                        .button-disabled {
                            opacity: 0.5;
                            pointer-events: none;
                            cursor: not-allowed;
                        }

                        .button-enabled {
                            background-color: green; /* or any color you'd like for enabled state */
                            opacity: 1;
                            pointer-events: auto;
                            cursor: pointer;
                        }

/* 3/27/2026 OG LOGIC */
/* #warningContinueButton {
    background-color: green;
    position: relative;
    color: white;
    padding: 1.5% 1.5%;
}

#warningCancelButton{
    background-color: red;
    position: relative;
    color: white;
    padding: 1.5% 1.5%;
} */

/* 3/27/2026 attempt */

button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  background-image: none;
  -webkit-tap-highlight-color: transparent;
  /* font: inherit; */
  cursor: pointer;
}

/* Shared button base */
#warningContinueButton,
#warningCancelButton,
#restartTestAfterCompletionButton,
#changeTestAfterCompletionButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  min-width: 100px;

  padding: 10px 18px;

  border-radius: 8px;
  color: white;
  font-weight: bold;
    font-size: 1.05rem; /* 👈 add this */
}

/* Individual colors */
#warningContinueButton,
#restartTestAfterCompletionButton {
  background-color: #4CAF50;
}

#warningCancelButton,
#changeTestAfterCompletionButton {
  background-color: red;
}

/* Layout container */
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
                    /* 5/10/2025 First attempt at changing Test Procedures */
                            #warningChangeTestProceduresContinueButton {
                                background-color: green;
                                position: relative;
                                color: white;
                                padding: 1.5% 1.5%;
                            }

                            #warningChangeTestProceduresCancelButton{
                                background-color: red;
                                position: relative;
                                color: white;
                                padding: 1.5% 1.5%;
                            }

/* Warning Modal End */


/* Data Plate Modal BEGIN */
#badassModal{
    position: absolute;
    background-color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 1%;
    border-radius: 5%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
z-index: 101;
}

    #copyToFormButton{
        background-color: green;
        color: white;
    }

    #badassModalOverlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin-top: 0;
        background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
        z-index: 100; /* Place the overlay above other content */
    }

#niioModal {
    position: absolute;
    background-color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 1%;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
z-index: 101;
}

/* // 11/1/2025 */
#rpStep1ModalAustralian {
    position: absolute;
    background-color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 1%;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
z-index: 101;
}


/* 3/28/2026  */

    #niioCompleteButton{
        background-color: #4CAF50;
        color: white;
    }


/* 11/1/2025 */
#rpStep1ModalCompleteButton{
    background-color: green;
    color: white;
}

#niioModalOverlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    z-index: 100; /* Place the overlay above other content */

}
/* Data Plate Modal END */

    /* 9/19/2025 */
        :root { --dock-top: 0px; }

/* Responsive Slide Out Test Form BEGIN*/
    /* 9/19/2025 OG LOGIC */
        /* .OuterContainer {
        position: fixed;
        background-color: rgba(156, 156, 156, 1);

        border: 2px solid rgba(156, 156, 156, 1);  */
        /* Add a border around the container */

        /* right: -83%;
        bottom: 0;
        margin: 0;
        padding: 0;
        height:auto;

        width: 90%;  */
        /* Adjust the width of the OuterContainer as needed */

        /* max-width: 90%;  */
        /* Set a maximum width if you want to limit how wide the "box" can be-- if you want it to cover view 100% adjust it */

        /* transition: right 0.3s ease;  */
        /* Add smooth transition for sliding effect */

        /* Center the TestFormContainer and its children using Flexbox */
        /* display: flex;
        flex-direction: row; 
        align-items: center; 
        justify-content: flex-start;
        z-index: 99;
        } */

        /* 9/19/2025 attempt to fix test form getting stuck sometimes on resize */
        .OuterContainer {
            position: fixed;
            /* OG COLOR */
            /* background-color: rgba(156, 156, 156, 1); */
            /* background-color: rgb(207, 205, 205); */
            background-color: rgb(184, 183, 183);
            border: 2px solid rgba(156, 156, 156, 1); /* Add a border around the container */
                /* use *top* from the measured nav/menu; don't also set bottom */
                top: var(--dock-top);
            right: -83%;
            bottom: 0;
            margin: 0;
            padding: 0;
            height:auto;
            width: 90%; /* Adjust the width of the OuterContainer as needed */
            max-width: 90%; /* Set a maximum width if you want to limit how wide the "box" can be-- if you want it to cover view 100% adjust it */
            transition: right 0.3s ease; /* Add smooth transition for sliding effect */

            /* Center the TestFormContainer and its children using Flexbox */
            display: flex;
            flex-direction: row; 
            align-items: center; 
            justify-content: flex-start;
            z-index: 99;
        }

    

    .OpenCloseTestForm {
        writing-mode: vertical-lr;
        text-align: left;
        font-size: 1.5em;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: black;
        cursor: pointer;
        margin-right: auto; /* Pushes everything else to the right, effectively centering this span */
        margin-left: 2%;  /* Adjust this value to your preference */
    }

    .arrow {
        font-weight: bold; /* Make the arrow bold */
        font-size: 1.5em;    /* Adjust this value to make the arrows larger */
    }
    
    
    
    /* main container size and responsiveness */
    /* .TestFormContainer {
    background-color: rgb(247, 245, 245);
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: 0;
    right: 0;
    height: 100%;
    width: inherit;  */
    /* Adjust the width of the form container as needed */
    /* overflow-y: auto;  */
    /* Add this to enable vertical scrolling */
    /* } */
    
    /* .TestFormSection {
        flex: 1;
        background-color: rgba(71, 66, 89, 0.096);
        font-family: Arial, Helvetica, sans-serif;
        min-width: 40vh;
        min-height: 30vh;
        border: 1px solid black;
        padding: 20px;
        box-sizing: border-box;  */
        /* Include padding and border in the width calculation */
    /* } */

    /* 4/6/2026 Update */
    .TestFormContainer {
  background-color: var(--bg-soft);
  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: 0;
  right: 0;
  height: 100%;
  width: inherit;
  overflow-y: auto;
}

.TestFormSection {
  flex: 1;
  background-color: var(--bg-card);
  font-family: Arial, Helvetica, sans-serif;
  min-width: 40vh;
  min-height: 30vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
}

    /* 7/13/2025 */
/* .TestFormSection h3 {
border: 2px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #fefefe;
  } */

.TestFormSection h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.3em;
}

/* Ensures 1st 2 sections of Test Form are bold */
.TestFormSection:nth-of-type(1) label,
.TestFormSection:nth-of-type(2) label {
  font-weight: bold;
}

/* Grouped sections — filled out together */
/* #VBAirInletValveTestFormSection {
  background-color: var(--blue-50);
  border-color: var(--blue-border);
  border-left: 4px solid var(--brand-blue);
}

#VBCheckValveTestFormSection {
  background-color: var(--blue-50);
  border-color: var(--blue-border);
  border-left: 4px solid var(--brand-blue);
} */

#VBAirInletValveTestFormSection {
  background-color: #EDF0F4;
  border-color: #CBD5E1;
  border-left: 4px solid #94A3B8;
}

#VBCheckValveTestFormSection {
  background-color: #EDF0F4;
  border-color: #CBD5E1;
  border-left: 4px solid #94A3B8;
}

/* Test results — important */
#testResultsTestFormSection {
  background-color: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.25);
  border-left: 4px solid #DC2626;
}
    /* Text box length for test for sections */
    .long-textbox {
        width: 96%;
        margin-bottom: 3%;
    }
    
    /* so text area doesn't change size */
    .comment {
        resize: none; /* Allowing this will let the user change the size of the textarea */
        height: 30%;
        width: 99%;
    }
    
    /* Increases the touch or click area */
        .radio::before {
            content: "";
            display: block;
            position: absolute;
            top: -10%; 
            right: -10%;
            bottom: -10%;
            left: -10%;
        }
        
        .radio {
            position: relative;
        }
    
/* BUTTONS */

    #saveNameButton{
        background-color: green;
        color: white;
        margin-bottom: 3%;
    }
    #autofillNameButton{
        background-color: green;
        color: white;
    }
    #autofillButton{
        background-color: green;
        color: white;
                margin-bottom: 3%;
    }
    #saveCertCalButton{
        background-color: green;
        color: white;
                margin-bottom: 3%;
    }
    #autofillCertCalButton{
        background-color: green;
        color: white;
                margin-bottom: 3%;
    }
    
    .universalModalButton.compact {
  padding: 5px 12px;
  font-size: 0.85rem;
  border-radius: 50px;
  min-height: 0;
  box-shadow: none;
}

    /* SubmitButton */
#commentInputButton {
  display: block;
  margin: 0 auto;
  padding: 12px 16px;
  background-color: green;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  color: white;
  cursor: pointer;
  width: 100%; /* or a fixed width like 250px */
  max-width: 280px;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;  /* ✅ allow wrapping */
  word-break: break-word; /* ✅ allow line break */
  line-height: 1.3;
}


    .divider {
        border: none;
        height: 2px;
        background-color: black; /* light gray line */
        /* background-color: #ccc; light gray line */
        /* margin: 30px 0;  */
        margin-bottom: 15px;
      }

      .dividerDash {
        border-top: 2px dashed #000;
        border-bottom: none;
        height: 0;
        margin-bottom: 15px;
        }

    #displayKeyboardButton{
        background-color: green;
        color: white;
    }

    #displayKeypadButton{
        background-color: green;
        color: white;
    }

    /* // 11/10/2025 */
    .dock-flash {
        outline: 3px solid lime !important;
        }


    /* Extra small screens: max-width ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        /* Extra small screens: max-width 320px */
        @media (max-width: 320px) {
        }

        @media (max-width: 480px) {
        }
    


    /* small screens: max-width 640px ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    @media (max-width: 640px) {
        .OuterContainer{
            top: 3%;
            }
            .TestFormContainer {
            width: 90%; /* Occupy full width of the screen on small devices */
            justify-content: center; /* Center the form sections */
            }
        
            .TestFormSection {
            width: 90%; /* Reduce the width of form sections on small devices */
        }

        /* Text overlay */
        #loadingText {
            color: white; /* Text color */
            font-size: 1.5rem; /* Adjust the text size */
            text-align: center;
            bottom: 23%; /* Adjust the position of the text, e.g., near the bottom */
            width: 100%; /* Full width for center alignment */
            z-index: 10000; /* Higher z-index than the image */
            font-family: Arial, sans-serif; /* Font styling */
            animation: pulse 2s infinite ease-in-out; /* Add a pulsing animation */
        }

        #loadingBTSText {
            color: rgb(15, 15, 15); /* Text color */
            font-size: 1.5rem; /* Adjust the text size */
            text-align: center;
            bottom: 23%; /* Adjust the position of the text, e.g., near the bottom */
            width: 100%; /* Full width for center alignment */
            z-index: 10000; /* Higher z-index than the image */
            font-family: Arial, sans-serif; /* Font styling */
            animation: pulse 2s infinite ease-in-out; /* Add a pulsing animation */
            display: none;
        }

        #arrow-testkit{
            position: absolute;
            top: 20%;
            left: 10.75%;
        }

        #arrow-backflow{
            position: absolute;
            top: 20%;
            left: 68.15%;
        }

        #arrow-condition{
            position: absolute;
            top: 20%;
            left: 90.4%;
        }

        #arrow-startButton{
            position: absolute;
            transform: rotate(270deg);
            top: 47%;
            left: 85%;
            display: block;
            z-index: 101;
        }


        #PVBBackflowImageContainer{
            position: absolute;
            width: 40%;
            top: 50%;
            left: 25%;
            /*z-index: 100;*/
            }



        #fabMainMenu {
            position: absolute;
            top: -500%;
            bottom: 100%; /* Position above the main button */
            left: 100%; /* Moves Options Menu to the right or left*/
            width: 100%;
            height: 740%;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            padding: 5px;
            z-index: 201;
            overflow-y: auto; /* Enables scrolling */
        }

        #fabMenuHelp {
            position: absolute; /* Ensure it is positioned relative to the parent */
            top: -500% !important;
            left: 210% !important;
            width: 100%; /* Ensure the menu fits within the viewport */
            height: 740%;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            padding: 10px;
            z-index: 201;
            overflow-y: auto; /* Enables scrolling */
        }

        #fabMenuHelp button {
            font-size: 0.9rem; /* Adjust for better readability on small screens */
            padding: 8px 10px; /* Improve button spacing */
            width: 100%; /* Make buttons span the menu width */
            box-sizing: border-box; /* Prevent overflow */
        }  

        .header {
            font-size: 0.75rem;
            margin: 0;
        }
        #testNumberSpan {
            font-size: 0.65rem;
        }
        #steps {
            font-size: 0.8rem;
        }
        .content{
            max-height: 100px; /* Example fixed max-height */
        }

        .steps-container {
            width: 90%; /* Wider container for smaller screens */
            }
            
            .step {
            height: 50px; /* Reduce height on smaller screens */
            }
    }



    /* Media query for small-medium screens ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    @media (max-width: 945px) {
        
        .NavMenu {
        flex-direction: column;
        align-items: flex-start;
        }

        .NavMenu a {
        margin-top: 1%;
        padding-left: 5%;
        margin-bottom: 1%;
        }

        .legend-container {
        margin-left: auto;
        }

        .legendorg {
        flex-direction: row;
        align-items: flex-start;
        }

        .icon {
        display:grid;
        align-items: center;
        }

        .xIcon {
        display: none;
        text-align: center;
    }        

        .field {
        width: 30%;
        display: none; /* Hide the fieldsets by default on small screens */
        }

        .last-field {
        margin-bottom: 0;
        }
        
        .large-screen {
        display: none; /* Hide the large-screen element on small screens */
        }

        #fabMainMenu {
            position: absolute;
            top: -550%;
            bottom: 100%; /* Position above the main button */
            left: 100%; /* Moves Options Menu to the right or left*/
            width: 100%;
            height: 740%;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            padding: 5px;
            z-index: 201;
            overflow-y: auto; /* Enables scrolling */
        }
        
        #fabMenuHelp {
            position: absolute; /* Ensure it is positioned relative to the parent */
            /* top: -500% !important; OG LOGIC */
            top: -550%;
            left: 210% !important;
            width: 100%; /* Ensure the menu fits within the viewport */
            height: 740%;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            padding: 10px;
            z-index: 201;
            overflow-y: auto; /* Enables scrolling */
        }
        
        #fabMenuHelp button {
            font-size: 0.9rem; /* Adjust for better readability on small screens */
            padding: 8px 10px; /* Improve button spacing */
            width: 100%; /* Make buttons span the menu width */
            box-sizing: border-box; /* Prevent overflow */
        }  

        .OuterContainer{
            top: 3%;
            }
            .TestFormContainer {
            width: 90%; /* Occupy full width of the screen on small devices */
            justify-content: center; /* Center the form sections */
            }
        
            .TestFormSection {
            width: 90%; /* Reduce the width of form sections on small devices */
            }
    
            /* Text overlay */
            #loadingText {
                color: white; /* Text color */
                font-size: 1.5rem; /* Adjust the text size */
                text-align: center;
                bottom: 23%; /* Adjust the position of the text, e.g., near the bottom */
                width: 100%; /* Full width for center alignment */
                z-index: 10000; /* Higher z-index than the image */
                font-family: Arial, sans-serif; /* Font styling */
                animation: pulse 2s infinite ease-in-out; /* Add a pulsing animation */
            }
    
            #loadingBTSText {
                color: rgb(15, 15, 15); /* Text color */
                font-size: 1.5rem; /* Adjust the text size */
                text-align: center;
                bottom: 23%; /* Adjust the position of the text, e.g., near the bottom */
                width: 100%; /* Full width for center alignment */
                z-index: 10000; /* Higher z-index than the image */
                font-family: Arial, sans-serif; /* Font styling */
                animation: pulse 2s infinite ease-in-out; /* Add a pulsing animation */
                display: none;
            }
    
            #arrow-testkit{
                position: absolute;
                top: 23%;
                left: 10.75%;
            }
    
            #arrow-backflow{
                position: absolute;
                top: 23%;
                left: 68.15%;
            }
    
            #arrow-condition{
                position: absolute;
                top: 23%;
                left: 90.4%;
            }
    
            #arrow-startButton{
                position: absolute;
                transform: rotate(270deg);
                top: 42%;
                left: 78%;
                display: block;
                z-index: 101;
            }
    
            #PVBBackflowImageContainer{
                position: absolute;
                width: 40%;
                top: 50%;
                left: 25%;
                /*z-index: 100;*/
            }
    
            #DCBackflowImageContainer{
                position: absolute;
                width: 70%;
                /* top: 70%;  use this size on small! screens */
                /* 4/7/2026 OG LOGIC */
                top: 70%;

                /* 4/7/20256 attempt iPhone fix IMPORTANT IMPORTANT IMPORTANT, 49 dvh works well on iphones */
                    /* top: 49dvh; */

                /* left: 10%; use this size on small! screens */
                left: 5%;
            }
    
            .topHeaderInteractiveFlowchart {
                flex-direction: column;
                align-items: flex-start;
            }

            .topHeaderInteractiveFlashcards {
                flex-direction: column;
                align-items: flex-start;
            }

            .header-title-Flashcards{
                font-size: 0.75em;
            }
        
            #fixed-selectors {
                display: none; /* 12/3/24 !!!!!!!!!!!!!*/
                gap: 10px; /* Space between selectors */
                padding: 10px;
                background-color: #064EB8;
                border-bottom: 1px solid #064EB8;
                z-index: 2; /* Ensures it stays above content */
                position: sticky;
                top: 0;
                }  

            #fixed-selectorsFlashcards {
                display: none; /* 12/3/24 !!!!!!!!!!!!!*/
                gap: 10px; /* Space between selectors */
                padding: 10px;
                background-color: #064EB8;
                border-bottom: 1px solid #064EB8;
                z-index: 2; /* Ensures it stays above content */
                position: sticky;
                top: 0;
                }  

                .small-screen {
                    display: block; /* Hide the small-screen element on large screens ?????????????????? 3/13/2025*/
                    }
            
        

                .flashcard-container {
                    width: 100%; 
                  }

                  /* 6/14/2025 Commenting out because there are two*/
                  /* 5/27/2025 needs attention, IMPORTANT*/
                /* #testingProcedureButtonList {
                    position: absolute;
                    bottom: -28%;
                    left: 100%;
                    background-color: #fff;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    padding: 5px;
                    z-index: 201;
                    margin-bottom: 10px;
                    overflow-y: auto;
                } */

                /* #testingProcedureButtonList.hidden {
                    display: none;
                }

                #testingProcedureButtonList button {
                    margin: 5px 0;
                    padding: 8px 12px;
                    background-color: #064EB8;
                    color: white;
                    border: none;
                    border-radius: 3px;
                    cursor: pointer;
                    font-weight: bold;
                }

                #testingProcedureButtonList button:hover {
                    background-color: #0056b3;
                }

                #testingProcedureButtonList button.activeButton {
                    background-color: yellow;
                    color: black;
                } */

                /* OG LOGIC 8/20/2025 */
            /* #DCTC1{
                position: absolute;
                width: 4.5%;
                top: 12%;
                left: 3%;
                z-index: 100;
            } */

            /* 8/20/2025 iphone fix */
            #DCTC1{
                position: absolute;
                width: 5.5%;
                top: 6%;
                left: 3%;
                z-index: 100;
            }

            #DCTC1OpenFlush{
                position: absolute;
                width: 5.65%;
                top: -59%;
                left: 3%;
                z-index: 100;
                display: none;
            }

            #DCTC1Open{
                position: absolute;
                width: 5.5%;
                top: 6%;
                left: 2.99%;
                /* left: 2.75%; */
                z-index: 100;
                display: none;
            }

        #DCTC1FlushnF{
            position: absolute;
            width: 5.85%;
            top: -62%;
            left: 3%;
            z-index: 102;
            display: none;
        }
        
        #DCTC2{
            position: absolute;
                width: 5.5%;
                top: 6%;
            left: 20%;
            z-index: 100;
        }

            #DCTC2OpenFlush{
                position: absolute;
                width: 5.65%;
                top: -59%;
                left: 20%;
                z-index: 100;
                display: none;
            }

            #DCTC2Open{
                position: absolute;
                width: 5.5%;
                top: 6%;
                left: 19.9%;
                z-index: 100;
                display: none;
            }
        
        #DCTC3{
            position: absolute;
                width: 5.5%;
                top: 6%;
            left: 48%;
            z-index: 100;
        }

            #DCTC3OpenFlush{
                position: absolute;
                width: 5.65%;
                top: -59%;
                left: 48%;
                z-index: 100;
                display: none;
            }

            #DCTC3Open{
                position: absolute;
                width: 5.5%;
                top: 6%;
                left: 47.95%;
                z-index: 100;
                display: none;
            }
        
        #DCTC4{
            position: absolute;
                width: 5.5%;
                top: 6%;
            left: 75%;
            z-index: 100;
        }

            #DCTC4OpenFlush{
                position: absolute;
                width: 5.65%;
                top: -59%;
                left: 75%;
                z-index: 100;
                display: none;
            }

            #DCTC4Open{
                position: absolute;
                width: 5.5%;
                top: 6%;
                left: 75%;
                z-index: 100;
                display: none;
            }

        #RPTC1{
            position: absolute;
            width: 5.5%;
            top: 4%;
            left: 3%;
            z-index: 100;
        }

            #RPTC1OpenFlush{
                position: absolute;
                width: 5.65%;
                top: -48%;
                left: 3%;
                z-index: 100;
                display: none;
            }

            #RPTC1Open{
                position: absolute;
                width: 5.4%;
                top: 4.15%;
                left: 3.05%;
                z-index: 100;
                display: none;
            }
        
        #RPTC2{
            position: absolute;
            width: 5.5%;
            top: 4%;
            left: 20%;
            z-index: 100;
        }

            #RPTC2OpenFlush{
                position: absolute;
                width: 5.65%;
                top: -48%;
                left: 20%;
                z-index: 100;
                display: none;
            }

            #RPTC2Open{
                position: absolute;
                width: 5.4%;
                top: 4.15%;
                left: 20.15%;
                z-index: 100;
                display: none;
            }
        
        #RPTC3{
            position: absolute;
            width: 5.5%;
            top: 4%;
            left: 48%;
            z-index: 100;
        }

            #RPTC3OpenFlush{
                position: absolute;
                width: 5.65%;
                top: -48%;
                left: 48%;
                z-index: 100;
                display: none;
            }

            #RPTC3Open{
                position: absolute;
                width: 5.4%;
                top: 4.15%;
                left: 48%;
                z-index: 100;
                display: none;
            }

            #RPTC3FlowL{
                position: absolute;
                transform: rotate(-130deg);
                width: 5%;
                top: -30%;
                left: 57%;
                z-index: 100;
                display: none;
            }

            #RPTC3FlowR{
                position: absolute;
                transform: rotate(130deg);
                width: 5%;
                top: -30%;
                left: 40%;
                z-index: 100;
                display: none;
            }
            #RPTC4FlowL{
                position: absolute;
                transform: rotate(-130deg);
                width: 5%;
                top: -30%;
                left: 84%;
                z-index: 100;
                display: none;
            }

            #RPTC4FlowR{
                position: absolute;
                transform: rotate(130deg);
                width: 5%;
                top: -30%;
                left: 67%;
                z-index: 100;
                display: none;
            }
    

        #RPTC4{
            position: absolute;
            width: 5.5%;
            top: 4%;
            left: 75%;
            z-index: 100;
        }

            #RPTC4OpenFlush{
                position: absolute;
                width: 5.65%;
                top: -48%;
                left: 75%;
                z-index: 100;
                display: none;
            }

            #RPTC4Open{
                position: absolute;
                width: 5.4%;
                top: 4.15%;
                left: 75.1%;
                z-index: 100;
                display: none;
            }


            #dcLabelTestPort1 {
    top: -10%;
    left: -8%;
    /*color: red; /* Example of individual styling */
    background-color: #CBAE4E;
}

#dcLabelTestPort2 {
    top: -10%;
    left: 22.5%;
    background-color: #CBAE4E;
}

#dcLabelTestPort3 {
    top: -10%;
    left: 51%;
    background-color: #CBAE4E;
}

#dcLabelTestPort4 {
    top: -10%;
    left: 79%;
    background-color: #CBAE4E;
}

#dcLabelShutOffValve1 {
    top: 98%;
    left: 15.5%;
    /*color: blue;*/
    background-color: #064EB8;
}

#dcLabelShutOffValve2 {
    top: 98%;
    left: 84%;
    background-color: #064EB8;
}

#dcLabelCheckValve1 {
    top: -50%;
    left: 28%;
    background-color: #916F02;
}

#dcLabelCheckValve2 {
    top: -50%;
    left: 70%;
    background-color: #916F02;
}

#dcLabelReliefValve {
    top: 110%;
    left: 50%;
}

#dcLabelDataPlate {
    top: -90%;
    left: 51%;
}




/* 11/19/2025 BPAA DCV Start */
#dcAustralianLabelTestPort2 {
    top: -10%;
    left: 22.5%;
    font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#dcAustralianLabelTestPort3 {
    top: -10%;
    left: 51%;
    background-color: #CBAE4E;
}

#dcAustralianLabelTestPort4 {
    top: -10%;
    left: 77%;
    background-color: #CBAE4E;
}

#dcAustralianLabelShutOffValve1 {
    top: 110%;
    left: 1%;
    /*color: blue;*/
    background-color: #064EB8;
}

#dcAustralianLabelShutOffValve2 {
    top: 105%;
    left: 84%;
    background-color: #064EB8;
}

#dcAustralianLabelCheckValve1 {
    top: -45%;
    left: 36%;
    background-color: #916F02;
}

#dcAustralianLabelCheckValve2 {
    top: -45%;
    left: 68%;
    background-color: #916F02;
}

#dcAustralianLabelYStrainer {
    top: 95%;
    left: 40%;
}

#dcAustralianLabelDataPlate {
    top: -80%;
    left: 53%;
}

/* 11/19/2025 BPAA DCV END  */





#rpLabelTestPort1 {
    top: -2%;
    left: -8%;
    /*color: red; /* Example of individual styling */
    background-color: #CBAE4E;
}

#rpLabelTestPort2 {
    top: -2%;
    left: 22.5%;
    font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#rpLabelTestPort3 {
    top: -2%;
    left: 51%;
    background-color: #CBAE4E;
}

#rpLabelTestPort4 {
    top: -2%;
    left: 89%;
    background-color: #CBAE4E;
}

#rpLabelShutOffValve1 {
    top: 77%;
    left: 15.5%;
    /*color: blue;*/
    background-color: #064EB8;
}

#rpLabelShutOffValve2 {
    top: 77%;
    left: 84%;
    background-color: #064EB8;
}

#rpLabelCheckValve1 {
    top: -28%;
    left: 30%;
    background-color: #916F02;
}

#rpLabelCheckValve2 {
    top: -28%;
    left: 65%;
    background-color: #916F02;
}

#rpLabelReliefValve {
    top: 110%;
    left: 50%;
    background-color: #916F02;
}

#rpLabelDataPlate {
    top: -52%;
    left: 38%;
}

/* 11/12/2025 Australian RP */

#rpAustralianLabelTestPort2 {
    top: -10%;
    left: 22.5%;
    font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#rpAustralianLabelTestPort3 {
    top: -10%;
    left: 51%;
    background-color: #CBAE4E;
}

#rpAustralianLabelTestPort4 {
    top: -10%;
    left: 77%;
    background-color: #CBAE4E;
}

#rpAustralianLabelShutOffValve1 {
    top: 95%;
    left: -5%;
    /*color: blue;*/
    background-color: #064EB8;
}

#rpAustralianLabelShutOffValve2 {
    top: 95%;
    left: 84%;
    background-color: #064EB8;
}

#rpAustralianLabelCheckValve1 {
    top: -40%;
    left: 36%;
    background-color: #916F02;
}

#rpAustralianLabelCheckValve2 {
    top: -40%;
    left: 68%;
    background-color: #916F02;
}

#rpAustralianLabelReliefValve {
    top: 115%;
    left: 55%;
    background-color: #916F02;
}

#rpAustralianLabelYStrainer {
    top: 85%;
    left: 36%;
    background-color: #916F02;
}

#rpAustralianLabelDataPlate {
    top: -70%;
    left: 53%;
}




#pvbLabelTestPort1 {
    top: 44%;
    left: -30%;
    /*color: red; /* Example of individual styling */
    background-color: #CBAE4E;
}

#pvbLabelTestPort2 {
    top: 1%;
    left: -30%;
    /*font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#pvbLabelAirInletValve {
    top: -8%;
    left: 69%;
}

#pvbLabelShutOffValve1 {
    top: 60%;
    left: 69%;
    /*color: blue;*/
    background-color: #064EB8;
}

#pvbLabelShutOffValve2 {
    top: 30%;
    left: 75%;
    background-color: #064EB8;
}

#pvbLabelPVBCover {
    top: -18%;
    left: -5%;
    background-color: black;
}

#pvbLabelDataPlate {
    top: 35%;
    left: 20%;
    z-index: 100;
}

/* #pvbLabelReading {
    top: -45%;
    left: 38%;
} */





#svbLabelTestPort1 {
    top: 44%;
    left: -30%;
    /*color: red; /* Example of individual styling */
    background-color: #CBAE4E;
}

#svbLabelTestPort2 {
    top: 7%;
    left: -30%;
    /*font-size: 14px; /* Another example of individual styling */
    background-color: #CBAE4E;
}

#svbLabelAirInletValve {
    top: -8%;
    left: 69%;
}

#svbLabelShutOffValve1 {
    top: 60%;
    left: 69%;
    /*color: blue;*/
    background-color: #064EB8;
}

#svbLabelShutOffValve2 {
    top: 30%;
    left: 75%;
    background-color: #064EB8;
}

#svbLabelsvbCover {
    top: -18%;
    left: -5%;
    background-color: black;
}

#svbLabelDataPlate {
    top: 35%;
    left: 20%;
        z-index: 100;
}

#svbLabelReading {
    top: -45%;
    left: 38%;
}



                            /* 2N Labels */
            #highSideBNV2NLabel {
                top: -15%;
                left: 15%;
                /*color: red; /* Example of individual text styling */
                background: red;
            }
            
            #lowSideBNV2NLabel {
                top: 1%;
                left: 115%;
                /*font-size: 14px; /* Another example of individual styling */
                background-color: #064EB8;
            }
                        
            #highSideConnection2NLabel {
                top: 105%;
                left: 15%;
                background: red;
            }
            
            #lowSideConnection2NLabel {
                top: 95%;
                left: 115%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #gaugeReading2NLabel {
                top: 91%;
                left: 55%;
                /*color: blue;*/
                background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */
            }


            /* 3N Labels */
            #highSideBNV3NLabel {
                top: -6%;
                left: 23%;
                /*color: red; /* Example of individual styling */
                background-color: red;
            }
            
            #lowSideBNV3NLabel {
                top: 44%;
                left: 130%;
                /*font-size: 14px; /* Another example of individual styling */
                background-color: #064EB8;
            }
            
            #bypassNV3NLabel {
                top: -6%;
                left: 140%;
                color: black;
                background-color: yellow;
            }
            
            #highSideConnection3NLabel {
                top: 102%;
                left: 12%;
                background-color: red;
            }
            
            #lowSideConnection3NLabel {
                top: 95%;
                left: 125%;
                /*color: blue;*/
                background-color: #064EB8;
            }


            #gaugeReading3NLabel {
                top: 92%;
                left: 45%;
                /*color: blue;*/
                background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */
            }

            /* 11/12/2025 3N Australian Labels */
            #bpaaTestKitValveA3NLabel {
                top: -6%;
                left: 35%;
                /*color: red; /* Example of individual styling */
                background-color: red;
            }
            
            #bpaaTestKitValveB3NLabel {
                top: 44%;
                left: 92.5%;
                /*font-size: 14px; /* Another example of individual styling */
                background-color: #064EB8;
            }
            
            #bpaaTestKitValveC3NLabel {
                top: 12%;
                left: 116%;
                color: black;
                background-color: yellow;
            }
            
            #highSideAustralianConnection3NLabel {
                top: 105%;
                left: 15%;
                background-color: red;
            }
            
            #lowSideAustralianConnection3NLabel {
                top: 105%;
                left: 75%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #gaugeAustralianReading3NLabel {
                top: 92%;
                left: 45%;
                /*color: blue;*/
                background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */
            }


                        /* 5N Labels */
            #highSideBNV5NLabel {
                top: -18%;
                left: 35%;
                /*color: red; /* Example of individual styling */
                background-color: red;
            }
            
            #lowSideBNV5NLabel {
                top: -3%;
                left: 108%;
                /*font-size: 14px; /* Another example of individual styling */
                background-color: #064EB8;
            }
            
            #bypassNV5NLabel {
                top: 55%;
                left: 1%;
                background-color: yellow;
                color: black;
            }
            
            #highSideConnection5NLabel {
                top: 102%;
                left: 5%;
                background-color: red;
            }
            
            #lowSideConnection5NLabel {
                top: 88%;
                left: 140%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #highSideCNV5NLabel {
                top: 120%;
                left: 70%;
                background-color: red;
            }
            
            #lowSideCNV5NLabel {
                top: 102%;
                left: 108%;
                /*color: blue;*/
                background-color: #064EB8;
            }

            #gaugeReading5NLabel {
                top: 60%;
                left: 98%;
                /*color: blue;*/
                /* background-color: rgba(76, 175, 80, 0.8); /* Green with 80% opacity */

                background-color: rgba(76, 175, 80, 1); /* Green with 100% opacity (no transparency) */
            }

        /* 5N Test Kit Legend Option END*/


    }

    /* 8/20/2025 iphone fix */
    /* @media (orientation: landscape) and (max-height: 480px) and (max-width: 960px) {

    } */

    
/* Responsive Slide Out Test Form END*/



    /* Media query for large screens ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    @media (min-width: 945px) {
        .small-screen {
            display: none; /* Hide the small-screen element on large screens */
            }
    
            /* 5/26/2025 Updated For Bigger Screens*/
            #PVBBackflowImageContainer{
                position: absolute;
                width: 40%;
                top: 43%;
                left: 25%;
                /*z-index: 100;*/
            }
    
            #DCBackflowImageContainer{
                position: absolute;
                width: 70%;
                /* top: 70%;  use this size on small! screens */
                top: 62%;
                /* left: 10%; use this size on small! screens */
                left: 5%;
            }

            #bovimageVB{
                position: absolute;
                width: 6.25%;
                /* top: -20px; */
                top: 72%;
                left: 71%;
                z-index: 102;
                display: none;
            }

            #bovimage{
            position: absolute;
            width: 6.25%;
            /* top: 20px; */
            top: 71%;
            left: 70.5%;
            z-index: 102;
            }

            /* 10/28/2025 OG LOGIC */
            #Fittings1 {
            position: absolute;
            width: 2%;
            top: 75%;
            left: 81%;
            z-index: 13;
            display: block;
            }

            /* 10/28/2025 Attempt */
            /* #Fittings1 {
            position: absolute;
            width: 2%;
            top: 34.5%;
            left: 54.9%;
            z-index: 13;
            display: block;
            } */

            /* 10/28/2025 OG LOGIC */
            #Fittings2 {
                position: absolute;
                width: 2%;
                /* top: 5%; */
                top: 75%;
                left: 81%;
                z-index: 12;
                display: block;
            }

            /* 10/28/2025 Attempt */
            /* #Fittings2 {
                position: absolute;
                width: 2%;
                top: 34.5%;
                left: 68.7%;
                z-index: 12;
                display: block;
            } */

            /* 10/28/2025 OG LOGIC */
            #Fittings3 {
                position: absolute;
                width: 2%;
                /* top: 5%; */
                top: 75%;
                left: 81%;
                z-index: 11;
                display: block;
            }

            /* 10/28/2025 Attempt */
            /* #Fittings3 {
                position: absolute;
                width: 2%;
                top: 34.5%;
                left: 77.35%;
                z-index: 11;
                display: block;
            } */
            #Fittings4 {
                position: absolute;
                width: 2%;
                /* top: 5%; */
                top: 75%;
                left: 81%;
                z-index: 10;
                display: block;
            }

        }

        /* 10/28/2025 */
        /* add once in your stylesheet */
            .fittings-glide {
            transition: top 400ms ease, left 400ms ease;
            will-change: top, left;
            }



    /* Displays message when device is in Portrait mode ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    @media (orientation: portrait) {
        #rotateMessage {
            display: flex; /* Show the message in portrait mode */  
        }
        #loadingScreenContainer {
            display: none; /* Hide the app content */
        }
    }







  #rotateMessage {
    display: none; /* Keep it hidden by default */
    visibility: hidden; /* Prevent flashing during refresh */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    color: white;
    font-size: 1.5rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* On top of everything */
    font-family: Arial, sans-serif;
}



/* Interactive Flowchart Close Button*/
          /* Close Button Styling */

/* Close Button Styling  OG LOGIC 12/3
.closeButton {
    position: absolute; 
    top: 0.5%; 
    right: 0.5%; 
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 1001; 
  }
  */

  /* Hamburger Menu */
.hamburger-menu {
    position: absolute;
    top: 20%;
    right: 4%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2.5%;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
  }

  /*
  /* ENSURES NAVIGATION MENU IS HAMBURGER MENU AUTOMATICALLY ON SMALLER DEVICES 
  .field {
    display: none;  /* By default, the fields are hidden 
}
*/
  .closeButton {
    position: absolute;
    top: 0.5%;
    right: 0.5%;
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
  }
  
  
  .closeButton:hover {
    color: red;
  }

  .closeFlashcardButton {
    position: absolute;
    top: 0.5%;
    right: 0.5%;
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
  }
  
  
  .closeFlashcardButton:hover {
    color: red;
  }

    .hamburger-menuFlashcards {
        position: absolute;
        top: 20%;
        right: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px; /* fixed pixel width often works better than % for a hamburger icon */
        height: 24px;
        cursor: pointer;
        z-index: 1010;
        color: white;
      }
.hamburgerMenuBar {
    width: 100%;
    height: 3px;
    background-color: white; /* Make the lines white */
}

    

            /* Interactive Flowchart Menu Options */

            /*
            #fixed-selectors {
                position: sticky;
                top: 0;
                width: 80%;
                background: white;
                padding: 10px;
                border-bottom: 1px solid #ddd;
                z-index: 1050; 
              }
            */

            /* Positions buttons side by side */



            .test-numberInteractiveFlowchart{
               position: relative;
               color: red; 
               font-weight: bold;
               display: flex; /* Use flexbox for alignment */
               justify-content: center; /* Center content horizontally */
            }

/* Parent container for the steps */
.steps-container {
    position: relative;
    width: 70%; /* Set width to 60% of its parent container */
    height: auto; /* Adjusts to fit all steps */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack steps vertically */
    gap: 10px; /* Space between steps */
    margin: 0 auto; /* Center the container */
    background-color: #f9f9f9; /* Optional background color */
  }
  
  /* Individual step styling */
  .step {
    position: relative;
    width: 100%; /* Full width of the parent .steps-container */
    height: 70px; /* Fixed height for uniformity */
    background-color: #e9e9e9; /* Optional background color */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    margin: 0 auto; /* Center each step horizontally */
    font-size: 1.5em; /* Optional font size */
    font-weight: bold;
    text-align: center;
    overflow: hidden; /* Prevent overflowing content */
  }
  
  /* Hover effect for steps */
  .step:hover {
    background-color: #d4edda;
    cursor: pointer;
  }
  
  /* Ensure text wraps and fits within step */
  .step p {
    margin: 0;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
  }
  


  
  

        .modalInteractiveFLowchart {
          display: none; /* Initially hidden */
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; /* changes height of Interactive Flowchart */
          background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
          z-index: 1000;
          justify-content: center;
          align-items: center;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
        }       

        .modalInteractiveFLowchart[style*="flex"] {
          opacity: 1;
        }

        /* Flashcards */
        /* 1) Skipped => orange outline */
.skipped {
    /* could be background or border; your choice */
    border: 2px solid orange;
    /* or background-color: orange; color: #fff; etc. */
  }
  
  /* 2) Flagged => red outline */
  .flagged-question {
    border: 2px solid red;
  }
  
  /* If you want to combine them when a question is BOTH skipped & flagged,
     you can do a separate rule. For instance: */
  .skipped.flagged-question {
    border: 2px dashed purple; /* Just an example for combined state */
  }
  
  /* The small icon inside the button */
  .flag-icon {
    margin-right: 4px; /* small spacing from the number */
  }

  .flagged-btn {
    background-color: red !important; /* override the existing green */
    color: white;
  }
  
  
        .modalInteractiveFlashcards {
          display: none; /* Initially hidden, turning this one messes up logic  */
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; /* changes height of Interactive Flowchart */
          background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
          z-index: 1000;
          justify-content: center;
          align-items: center;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
        }       

        .modalInteractiveFlashcards[style*="flex"] {
          opacity: 1;
        }

      /* /* Styling for the header at the top- Backflow Exam Prep  */
        .topHeaderInteractiveFlowchart {
          text-align: center;
          font-size: 24px;
          font-weight: bold;
          padding: 10px 0;
          background-color: #064EB8;
          color: white;
          /* /* border-bottom: 1px solid #ddd; 
          /* margin-bottom: 10px;  */
          z-index: 2; 
          font-family: "Grandview", sans-serif; 
        }

        /* Top Header Container */
            .topHeaderInteractiveFlashcards {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.5em;
            font-weight: bold;
            padding: 10px 0;
            background-color: #064EB8;
            color: white;
            /* border-bottom: 1px solid #ddd; */
            z-index: 2;
            font-family: "Grandview", sans-serif;
            }


            /* .hamburger-menu span {
            display: block;
            height: 4px;
            background-color: white;
            border-radius: 2px;
            } */


      
        /* Everything inside Interactive Flowchart is affected by this CSS */
        .modal-contentInteractiveFlowchart {
          position: relative;
          background: white;
          width: 90%;
          height: 90%; /* Fixed height for scrolling */
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          display: flex;
          flex-direction: column; /* Stacks header, selectors, and content */
          overflow: hidden;
        }
        .modal-contentInteractiveFlashcards {
          position: relative;
          background: white;
          width: 90%;
          height: 90%; /* Fixed height for scrolling */
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          display: flex;
          flex-direction: column; /* Stacks header, selectors, and content */
          overflow: hidden;
        }

        /* Styling for the header at the top- ex- USC 2N DC */
        .headerInteractiveFlowchart {
          font-size: 2.5em;
          font-weight: bold;
          /* margin-bottom: 20px; */
          text-align: center;
        }
      
        /* Test Number CSS, rendered dynamically in JS File */
        .test-numberInteractiveFlowchart {
          font-size: 2em;
          margin: 10px 0;
        }
      
        /* Step Number CSS */
        .overallStepsInteractiveFlowchart .step {
          margin: 10px 0;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 5px;
          cursor: pointer;
        
          transition: background 0.3s ease, color 0.3s ease;
        }
        
        .overallStepsInteractiveFlowchart .step.completed {
          background: #d4edda;
          text-decoration: line-through;
          color: #155724;
        }


        /* Scrollable Content */
        .scrollableContent {
          flex: 1; /* Fills the remaining space */
          overflow-y: auto; /* Enable scrolling */
          padding: 10px;
        }

        /* Flashcards 3/13/2025 */
        .studyToolSpace {
          /* flex: 1; Fills the remaining space */
          overflow-y: auto; /* enables scrolling */
          padding: 10px;
        }

        .overallStepsInteractiveFlowchart {
          display: flex;
          flex-direction: column;
          gap: 10px; /* Space between steps */
        }


        .step.completed {
          background-color: #d4edda;
          color: #155724;
          text-decoration: line-through;
        }

        /* Fixed Selectors */
            #fixed-selectors {
            display: flex; /* 12/3/24 !!!!!!!!!!!!!*/
            gap: 10px; /* Space between selectors */
            padding: 10px;
            background-color: #064EB8;
            border-bottom: 1px solid #064EB8;
            z-index: 2; /* Ensures it stays above content */
            position: sticky;
            top: 0;
            }  



          #fixed-selectors select {
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ccc;
            /* border-radius: 5px; */
          }

          /* Flashcards 3/13/2025 */
            #fixed-selectorsFlashcards {
            display: none; /* 12/3/24 !!!!!!!!!!!!!*/
            gap: 10px; /* Space between selectors */
            padding: 10px;
            background-color: #064EB8;
            border-bottom: 1px solid #064EB8;
            z-index: 2; /* Ensures it stays above content */
            position: sticky;
            top: 0;
            }  

            #fixed-selectorsFlashcards.show {
                display: flex; /* or block, whichever you prefer */
              }



          #fixed-selectorsFlashcards{
            padding: 5px;
            font-size: 16px;
            /* border: 1px solid #ccc; */
            /* border-radius: 5px; */
          }
          
          #testProcedureFlowchartSelector, #testKitSelector, #backflowTypeSelector {
            margin: 0 10px;
            padding: 5px;
            font-size: 16px;
          }


        /* 11/10/2025 RealFlashcards */
            .topHeaderRealInteractiveFlashcards {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.5em;
            font-weight: bold;
            padding: 10px 0;
            background-color: #064EB8;
            color: white;
            /* border-bottom: 1px solid #ddd; */
            z-index: 2;
            font-family: "Grandview", sans-serif;
            }

            .topHeaderInteractiveRealFlashcards {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.5em;
            font-weight: bold;
            padding: 10px 0;
            background-color: #064EB8;
            color: white;
            /* border-bottom: 1px solid #ddd; */
            z-index: 2;
            font-family: "Grandview", sans-serif;
            }

            .modal-contentInteractiveRealFlashcards {
                position: relative;        /* so bottom bar can anchor to this */
                background: white;
                width: 90%;
                height: 90%;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                }

                .modalInteractiveRealFlashcards {
                    display: none; /* Initially hidden, turning this one messes up logic  */
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%; /* changes height of Interactive Flowchart */
                    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
                    z-index: 1000;
                    justify-content: center;
                    align-items: center;
                    opacity: 0;
                    transition: opacity 0.3s ease-in-out;
                }       

                .modalInteractiveRealFlashcards[style*="flex"] {
                opacity: 1;
                }

                /* #interactiveRealFlashcardModal{
                    display: block;
                                z-index: 20000000;

                } */



                                        /* <!-- 11/11/2025 Uses hamburger menu --> */
                                                /* .topHeaderInteractiveRealFlashcards {
                                                position: relative;
                                                display: flex;
                                                align-items: center;
                                                gap: 0.5rem;
                                                font-size: 1.5em;
                                                font-weight: bold;
                                                padding: 10px 12px;
                                                background-color: #064EB8;
                                                color: white;
                                                z-index: 2;
                                                font-family: "Grandview", sans-serif;
                                                }

                                                .header-title-Flashcards {
                                                flex: 1;
                                                text-align: center;
                                                font-size: 1rem; 
                                                }

                                                .flashcard-hamburger {
                                                background: none;
                                                border: none;
                                                color: white;
                                                font-size: 1.3rem;
                                                cursor: pointer;
                                                }

                                                .flashcard-close-btn {
                                                position: absolute;
                                                top: 8px;
                                                right: 8px;
                                                background: none;
                                                border: none;
                                                color: white;
                                                font-size: 1rem;
                                                cursor: pointer;
                                                } */

                                                /* the slide-down panel */
                                                /* .flashcard-menu-panel {
                                                max-height: 0;
                                                overflow: hidden;
                                                background: #f6f7fb;
                                                transition: max-height 0.25s ease;
                                                border-bottom: 1px solid #ddd;
                                                padding: 0 12px;
                                                }

                                                .flashcard-menu-panel.open { */
                                                    /* adjust based on what you put inside */
                                                /* max-height: 160px; 
                                                padding-bottom: 8px;
                                                }

                                                .flashcard-menu-panel .menu-section {
                                                margin-top: 8px;
                                                }

                                                .flashcard-menu-panel label {
                                                display: flex;
                                                flex-direction: column;
                                                font-size: 0.8rem;
                                                gap: 4px;
                                                }

                                                .flashcard-menu-panel select {
                                                padding: 4px;
                                                } */

                                                /* keep your body layout */
                                                /* .flashcard-body {
                                                flex: 1;
                                                overflow: auto;
                                                padding: 1rem;
                                                }
                                                */
                                                /* optional: on bigger screens, show controls inline too */
                                                /* @media (min-width: 720px) {
                                                .flashcard-menu-panel { */
                                                    /* stay hidden unless user opens */
                                                    /* max-height: 0; 
                                                }
                                                .controls {
                                                    display: flex;
                                                    gap: 1rem;
                                                    margin-bottom: 1rem;
                                                    flex-wrap: wrap;
                                                }
                                                } */







          /* 3/11/2025 */

          .modal-contentInteractiveFlowchart {
            position: relative;
            background: white;
            width: 90%;
            height: 90%; /* Fixed height for scrolling */
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column; /* Stacks header, selectors, and content */
            overflow: hidden;
          }
  
          /* Styling for the header at the top- ex- USC 2N DC */
          .headerInteractiveFlowchart {
            font-size: 2.5em;
            font-weight: bold;
            /* margin-bottom: 20px; */
            text-align: center;
          }
        
          /* Test Number CSS, rendered dynamically in JS File */
          .test-numberInteractiveFlowchart {
            font-size: 2em;
            margin: 10px 0;
          }
        
          /* Step Number CSS */
          .overallStepsInteractiveFlowchart .step {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
          
            transition: background 0.3s ease, color 0.3s ease;
          }
          
          .overallStepsInteractiveFlowchart .step.completed {
            background: #d4edda;
            text-decoration: line-through;
            color: #155724;
          }
  
  
          /* Scrollable Content */
          /* .scrollableContent { */
              /* Fills the remaining space */
            /* flex: 1;  */
            /* Enable scrolling */
            /* overflow-y: auto; 
            padding: 10px;
          } */
  
          /* .overallStepsInteractiveFlowchart {
            display: flex;
            flex-direction: column; */
            /* Space between steps */
            /* gap: 10px; 
          }
  
  
          .step.completed {
            background-color: #d4edda;
            color: #155724;
            text-decoration: line-through;
          } */
  
          /* Fixed Selectors */
                /* #fixed-selectors { */
                    /* 12/3/24 !!!!!!!!!!!!!*/
                /* display: flex;  */
                /* Space between selectors */
                /* gap: 10px; 
                padding: 10px;
                background-color: #064EB8;
                border-bottom: 1px solid #064EB8; */
                /* Ensures it stays above content */
                /* z-index: 2; 
                position: sticky;
                top: 0;
                }  
  
  
  
            #fixed-selectors select {
              padding: 5px;
              font-size: 16px;
              border: 1px solid #ccc;
              border-radius: 5px;
            }
            
            #testProcedureFlowchartSelector, #testKitSelector, #backflowTypeSelector {
              margin: 0 10px;
              padding: 5px;
              font-size: 16px;
            } */
  

            
              
  




/* Resizeable Text Box BEGIN
    #resizableBox {
    box-sizing: border-box;
    z-index: 98;
    }
*/
    .loweredTPBExamButton {
        transform: translateY(calc(100% - 20px)); /* This will move the box downwards until only 20px (top of the div) is visible */
      }
    
      /* OG LOGIC
    .resizable {
    position: absolute;
    background-color: #f2f2f2;
    top: 85%; /* Adjusts the top position of the entire TPB ///
    bottom: 0;
    width: 100%;
    height: 15%; /* Adjust the height of the text procedure box ////
    border: 1px solid black;
    overflow: hidden;
    /*
    transition: top 0.3s, height 0.1s; 
    /////
    z-index: 98;
    }
    */

    /* Made TPB shorter by 2%  (height: 15% to 13%) and increased the top by 2% (top 85% to 87%)*/
    .resizable {
        position: absolute;
        background-color: #f2f2f2;
        top: 87%; /* Adjusts the top position of the entire TPB */
        bottom: 0;
        width: 100%;
        height: 13%; /* Adjust the height of the text procedure box */
        border: 1px solid black;
        overflow: hidden;
        /*
        transition: top 0.3s, height 0.1s; 
        */
        z-index: 98;
        }
        
        #resizableBox {
            position: fixed; /* Fixes the box's position relative to the viewport */
            bottom: 0; /* Keeps it at the bottom of the screen */
            left: 0; /* Keeps it aligned to the left edge */
            width: 100%; /* Ensures it spans the screen width */
            /* Z index here will control */
        }
        

    .box-content {
    width: 92%;
    height: 100%;
    overflow-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f2f2f2;
    z-index: 98;
    }
    
    /* 4/17/2026 OG LOGIC */
    /* .resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5vh;
    cursor: ns-resize;
    background-color: rgb(220, 9, 9);
    z-index: 98;
    } */

.resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  cursor: ns-resize;
  background-color: rgb(220, 9, 9);
  z-index: 98;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resize-handle::after {
  content: '';
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  animation: handlePulse 1.5s ease-in-out 1s 2; /* plays twice, starts after 1s */
}

@keyframes handlePulse {
  0%, 100% { 
    width: 40px; 
    opacity: 0.6; 
  }
  50% { 
    width: 55px; 
    opacity: 1; 
  }
}

.resize-handle::before {
  content: '▲';
  position: absolute;
  top: 2px;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 4px;
  animation: fadeHint 3s ease-in-out 0.5s forwards;
}

@keyframes fadeHint {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.resize-handle.show-hint::after {
  animation: handlePulse 1.5s ease-in-out 1s 2;
}

.resize-handle.show-hint::before {
  animation: fadeHint 3s ease-in-out 0.5s forwards;
}

    .step-highlight {
        font-weight: bold;
        color: blue;
        /* any other styling you want */
        }


        .textbox {
            position: relative;
            background-color: #f0f0f0;
            /* height: 100px;  Initial height */
            max-height: 100%; /* Prevent it from being resized beyond the viewport */
        }

        .header {
            position: relative;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
            font-weight: bold;
            font-size: 1.5rem; 
        }

        .subheader {
            text-align: left;
            font-style: italic;
            font-size: 1.20rem;
            padding-left: 10px;
            text-decoration: underline;
        }

        .content{
            text-align: left;
            font-size: 1.15rem;
            overflow-y: auto; /* Show scrollbar when necessary */
            padding-left: 20px;
            padding-bottom: 10px;
        }

        .current-step {
            font-weight: bold;
            text-decoration: underline;
          }
/*
          .TPB-highlight-class {
            /*background-color: yellow; /* Apply yellow background for highlighting 
          }
                 */   


    
/* Resizeable Text Box END*/

    /* Responsive Test Button GROUP BEGIN */
    .testButtonGroup {
        position: absolute;
        display: flex;
        flex-direction: column; /* Stack items vertically */
        justify-content:space-around;
        left: 0.5%;
        top: 0;
        width: 10vw;
        display: none; /* 11/25/24 */
    }

    .testButtonGroup .newPracticeTestButton, 
    .testButtonGroup .restartPracticeTestButton,
    .testButtonGroup .examButton {
        margin: 5% 1%; /* Add some margin */
        background-color: #4CAF50; /* Green */
        border: 1px solid black;
        color: white;
        text-align: center; /* Adjust text alignment */
        font-size: 2vh;
        white-space: normal; /* Allow text to wrap */
        cursor: pointer;
        z-index: 97;
    }
    
    .testButtonGroup .newPracticeTestButton:hover, 
    .testButtonGroup .restartPracticeTestButton:hover,
    .testButtonGroup .examButton:hover {
        background-color: #3e8e41;
    }

/* OG LOGIC
    #fab {
        position: fixed;
        /* top: 15%; //
        left: 0;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Aligns the menu and button to the right //
    }
    

    
    #fabButton {
        display: flex; /* Makes the button a flex container //
        align-items: center; /* Aligns the icon and text vertically //
        justify-content: center; /* Centers the content horizontally //
        gap: 10px; /* Adds space between the icon and text //
        padding: 10px 15px; /* Adjusts padding to accommodate text //
        border-radius: 50px; /* Makes the button rounded //
        background-color: #4CAF50;
        color: white;
        font-size: 1rem; /* Adjust font size //
        font-weight: bold; /* Makes the text bold //
        border: none;
        cursor: pointer;
        width: auto; /* Adjusts button width to fit content //
        white-space: nowrap; /* Prevents text wrapping //
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow /
        transition: background-color 0.3s ease; /* Adds hover effect //
    }
    
    #fabButton:hover {
        background-color: #4CAF50;
    }
    
    #fabMenu {
        position: absolute;
        top: 100%; /* Position the menu directly below the button //
        left: 0; /* Align it with the left edge of the button //
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        padding: 5px;
        z-index: 201; /* Ensure it stays above other elements //
    }
    #fabMenu.hidden {
        display: none;
    }
    
    #fabMenu button {
        margin: 5px 0;
        padding: 8px 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        z-index: 99;
    }
    
    #fabMenu button:hover {
        background-color: #0056b3;
    }
    */

/* Attempt 11/25/24 */
/*
    #fab {
        position: fixed;
        left: 0.25%; 
        bottom: 0   ;
        z-index: 99; 
    }
    
    #fabButton {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 15px;
        border-radius: 50px;
        background-color: #4CAF50;
        color: white;
        font-size: 1rem;
        font-weight: bold;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
    }
    
    #fabButton:hover {
        background-color: #45a049;
    }
    
    #fabMenu {
        position: absolute;
        bottom: 100%; 
        left: 150%;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        padding: 5px;
        z-index: 201;
    }
    
    #fabMenu.hidden {
        display: none;
    }
    
    #fabMenu button {
        margin: 5px 0;
        padding: 8px 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    
    #fabMenu button:hover {
        background-color: #0f76e4;
    }



    #fabHelp {
        position: fixed;
        top: 89%; 
        bottom: 0.5%;
        right: 7.5%; 
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    */
    

    #fabButtonHelp {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 15px;
        border-radius: 50px;
        background-color: #4CAF50;
        color: white;
        font-size: 0.95em;
        font-weight: bold;
        border: none;
        cursor: pointer;
        width: auto;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
    }
    
    #fabButtonHelp:hover {
        background-color: #4CAF50;
    }
    
    /* //1/13/2025 OG LOGIC  */
    #fabMenuHelp {
        position: absolute;
        bottom: -28%; /* Position the menu directly above the button */
        left: 100%; /* Align it with the left edge of the button - Moves Features Menu to the right */
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        padding: 5px;
        z-index: 201; /* Ensure it stays above other elements */
        margin-bottom: 10px; /* Optional: Adds space between the button and menu */
        overflow-y: auto; /* Enables scrolling */
    }
    
    #fabMenuHelp.hidden {
        display: none;
    }
        
    #fabMenuHelp button {
        margin: 5px 0;
        padding: 8px 12px;
        background-color: #064EB8; /* Makes Features/Help buttons blue */
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    
    #fabMenuHelp button:hover {
        background-color: #0056b3;
    }

        /* Active state for buttons when clicked */
#fabMenuHelp button.activeButton {
    background-color: yellow;
    color: black;
}

/* // <!-- 5/10/2025, actually 5/9/2025 Incorporating Other Testing Procedures--> */

                #testingProcedureMenuOption {
                    font-weight: bold;
                }
                
                #testingProcedureButtonList {
                    position: absolute;
                    bottom: -28%;
                    left: 256%;
                    background-color: #fff;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    padding: 5px;
                    z-index: 201;
                    margin-bottom: 10px;
                    overflow-y: auto;
                }

                #testingProcedureButtonList.hidden {
                    display: none;
                }

                #testingProcedureButtonList button {
                    margin: 5px 0;
                    padding: 8px 12px;
                    background-color: #064EB8;
                    color: white;
                    border: none;
                    border-radius: 3px;
                    cursor: pointer;
                    font-weight: bold;
                }

                #testingProcedureButtonList button:hover {
                    background-color: #0056b3;
                }

                #testingProcedureButtonList button.activeButton {
                    background-color: yellow;
                    color: black;
                }




        /* 1/13/2025 update to make 3 columns 

        #fabMenuHelp {
            position: absolute;
            bottom: 305%;
            left: 100%;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            /* Instead of `display: flex; flex-direction: column;`, we do: //
            display: grid;
            grid-template-columns: repeat(3, auto); /* or 1fr 1fr 1fr if you want them equal width //
            gap: 10px; /* space between columns //
            padding: 10px;
            z-index: 201;
            margin-bottom: 10px;
          }
          
          /* Make sure each column is vertical //
          #fabMenuHelp .column {
            display: flex;
            flex-direction: column;
          }
          
          /* Keep the existing button styles, or customize as you like //
          #fabMenuHelp button {
            margin: 5px 0;
            padding: 8px 12px;
            background-color: #064EB8;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
          }
          
          #fabMenuHelp button:hover {
            background-color: #0056b3;
          }
                  
        /* Active state for buttons when clicked //
    #fabMenuHelp button.activeButton {
        background-color: yellow;
        color: black;
    }
    */
    
    
        
/* 11/26/24 attempt */
    #fabMain {
        position: fixed;
        top: 75%;
        left: 1%;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    
    /* OG LOGIC*/
    #fabMainButton {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 15px;
        border-radius: 50px;
        background-color: #4CAF50;
        color: white;
        font-size: 1rem;
        font-weight: bold;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
    }
    
    #fabMainButton:hover {
        background-color: #45a049;
    }
    
    #fabMainMenu {
        position: absolute;
        bottom: 100%; /* Position above the main button */
        right: 0; /* Moves Options Menu to the right or left*/
        background-color: #b3adad;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        padding: 5px;
        z-index: 201;
        overflow-y: auto; /* Enables scrolling */

    }
    
    #fabMainMenu.hidden {
        display: none;
    }

    #fabMainMenu #fullscreenToggleButton {
        background-color: red;
    }
    
    #fabMainMenu button {
        margin: 5px 0;
        padding: 8px 12px;
        background-color: #064EB8; /* Changes main Menu Options New Test, Restart Test, Exam Mode background to BEP blue*/
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    
    #fabMainMenu button:hover {
        background-color: #0056b3;
    }
    
    /* Hide the submenus initially */
    #fabMenu.hidden, #fabMenuHelp.hidden {
        display: none;
    }
    
    /* // 7/13/2025 */
            #fontButtonsContainer {
            display: flex;
            justify-content: space-between; /* pushes buttons to edges with gap */
            gap: 8px; /* adds space *between* buttons */
            width: 100%;
            }
            #fontButtonsContainer button {
            flex: 1; /* make buttons grow equally */
            padding: 10px 0; /* adjust height and vertical padding */
            font-size: 1rem;
            min-width: 0; /* allow flex shrinkage */
            }

            /* 7/13/2025 fUTURE uSE OF bUTTONS important important*/
            /* #decrease-font,
            #increase-font {
            font-size: 1.5rem;
            padding: 6px 10px;
            background-color: #064EB8;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            }

            #decrease-font:hover,
            #increase-font:hover {
            background-color: #0056b3;
            } */


            #audioControls {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 5px 0;
            width: 100%;
            }

            #audioControls button {
            background-color: #064EB8;
            color: white;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            }

            #audioControls button:hover {
            background-color: #0056b3;
            }

            #audioControls input[type="range"] {
            width: 100px; /* adjust as needed */
            height: 6px;
            appearance: none;
            background: #ccc;
            border-radius: 5px;
            outline: none;
            cursor: pointer;
            }

            #audioControls input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            height: 14px;
            width: 14px;
            background: #064EB8;
            border-radius: 50%;
            cursor: pointer;
            margin-top: -4px;
            }

            #audioControls input[type="range"]::-moz-range-thumb {
            height: 14px;
            width: 14px;
            background: #064EB8;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            }



    #fullscreenToggleButton {
        background-color: red;
        color: white;
        border: none; /* Remove default border */
        padding: 10px 20px; /* Add some padding */
        font-size: 0.95em;
        font-weight: bold;
        border-radius: 5px; /* Optional: rounded corners */
        cursor: pointer; /* Change cursor to pointer on hover */
    }

    #fullscreenToggleButton:hover {
        background-color: darkred; /* Darken background on hover */
    }

    #newTestButton{
        font-weight: bold;
        font-size: 0.95em;
    }
    #restartTestButton{
        font-weight: bold;
        font-size: 0.95em;
    }
    #examButton{
        font-weight: bold;
        font-size: 0.95em;
    }
    #resetButton{
        font-weight: bold;
        font-size: 0.95em;
    }
    #helpButton{
        font-weight: bold;
        font-size: 0.95em;
    }

    

    /* Responsive Test Button GROUP BEGIN */
    
    /*
#enterFullscreen{
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

#enterFullscreen{
    background-color: #0056b3;
}
    */



    /* 11/22/24 
#enterFullscreen{
    position: fixed;
    right: 7.5%;
    background-color: #fd0808;
    color: white;

    border: none;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 30px; 
    cursor: pointer;
}

#exitFullscreen{
    position: fixed;
    right: 0;
    background-color: #fd0808;
    color: white;
    border: none;

    padding: 10px 15px; 
    font-size: 16px;
    border-radius: 30px; 
    cursor: pointer;
}
*/


    /* 11/27/24 */
    #enterFullscreen{
        position: relative;
        top: -40%;
        background-color: #fd0808;
        color: white;
    /* Styling makes corners rounder, 10x on border radius looks good too*/
        border: none;
        padding: 10px 15px; /* Wider padding for pill shape */
        font-size: 16px;
        border-radius: 30px; /* Fully rounded */
        cursor: pointer;
        z-index: 99999;
    }
    
    #exitFullscreen{
        position: relative;
        top: -40%;
        background-color: #fd0808;
        color: white;
        border: none;
    
        padding: 10px 15px; /* Wider padding for pill shape */
        font-size: 16px;
        border-radius: 30px; /* Fully rounded */
        cursor: pointer;
        z-index: 99999;
    }
    



    /*    Responsive Bottom Test Procedure Buttons */
    #TestProcedureButtons {
        display: flex; /* Use flexbox to layout buttons in a row */
        justify-content: left; /* Center the buttons in the container */
        flex-wrap: wrap; /* Allow buttons to wrap if needed */
        gap: 10px; /* Add some space between the buttons */
        margin: 0;
        padding: 0;
        z-index: 1000;
    }
 
    /*
      .TPBbtn {
        position: relative;
        top: 10%;
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 0.5% 0.5%;
        font-size: 0.85em;
        cursor: pointer;
        z-index: 1000;
      }
      */
      .TPBbtn {
        position: relative;
        top: 10%;
        background-color: #4CAF50;
        border: none;
        color: white;
        border: none;
        padding: 10px 15px; /* Wider padding for pill shape */
        border-radius: 10px; /* Fully rounded */
        cursor: pointer;
            font-size: 0.85em;
        cursor: pointer;
        z-index: 1000;
        display: none; /* 11/25/24 */
      }
      
      #betaTesterNotesSaveButton{
        background-color: #4CAF50;
        color: white;
      }

      #betaTesterNotesCopyButton{
        background-color: #4CAF50;
        color: white;
      }
      
      .TPBbtn-active {
        background-color: #e6ea0b; /* A different shade or color when active */
        color: black;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Slightly darker shadow */
    }
      
      /* Darker background on mouse-over */
      .btn:hover {
        background-color: rgb(6, 32, 110);
      }

         /* Apply to all images that might rotate */
   .rotateSOVs {
    transition: transform 0.5s ease-in-out;
    }


    /* 11/12/24 
    <!-- 11/12/24 Test Procedure Options-->

                            /* Hidden dropdown menu styling 
                        .dropdown-menu {
                            display: none;
                            position: absolute;
                            top: 61%; /* Adjust as needed for your layout 
                            left: 32.5%;
                            background-color: white;
                            border: 1px solid #ccc;
                            width: 200px;
                            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
                            z-index: 9999;
                        }

                        /* Style for each menu option 
                        .dropdown-menu ul {
                            list-style-type: none;
                            margin: 0;
                            padding: 0;
                        }

                        .dropdown-menu li {
                            padding: 10px;
                            cursor: pointer;
                        }

                        .dropdown-menu li:hover {
                            background-color: #f0f0f0;
                        }
                        */

    /*    Responsive Bottom Test Procedure Buttons */



/* 2/16/2026 Flashcard CSS START --------------------------------------------------------------------------------------------------- */
                            /* <!-- 11/30/2025 Media Viewer CSS START--> */
   /* Fullscreen Media Viewer */
/* Fullscreen media lightbox */
.fc-media-lightbox {
  position: absolute;
  inset: 0;
  display: none;           /* toggled by JS */
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.fc-media-lightbox.open {
  display: flex;
}

.fc-media-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

.fc-media-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: #020617;  /* dark */
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-media-close-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  border-radius: 999px;
  padding: 4px 8px;
  cursor: pointer;
  background: rgba(15,23,42,0.9);
  color: #f9fafb;
  font-size: 0.85rem;
}

.fc-media-content img,
.fc-media-content video,
.fc-media-content iframe,
.fc-media-content audio {
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  display: block;
}

/* Dark-mode tweak, optional */
.modalInteractiveRealFlashcards.flashcards-dark .fc-media-lightbox-inner {
  background: #020617;
}

                            /* <!-- 11/30/2025 Media Viewer CSS END--> */

                            /* FAB SECTION */
                          .deck-badge {
  font-size: 0.75rem;
  margin: 4px 0 6px;
  color: #4b5563;
}

/* dark mode tweak */
.modalInteractiveRealFlashcards.flashcards-dark .deck-badge {
  color: #9ca3af;
}

/* Each major section in the FAB panel (Manual, Filter, Study Plan, Display) */
.fab-section {
  padding: 10px 10px 12px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);  /* subtle border */
  background: #f9fafb;                        /* light gray card background */
}

/* Slightly tighter top spacing for the very first section */
.fab-section:first-of-type {
  margin-top: 2px;
}

/* Section titles: a bit bolder and clearer */

/* Container that positions both the FAB and the badge */
.flashcard-fab-row {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 22;
}

/* IMPORTANT: override old absolute positioning on the button */
.flashcard-fab {
  position: static;   /* ← this is key */
  bottom: auto;
  left: auto;

  background: #45a049;
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Deck badge pill next to FAB */
.card-deck-badge {
  display: none;   /* JS sets to inline-flex when active */
  padding: 6px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  background: rgba(6, 78, 184, 1);
  color: #f9fafb;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Muted style when showing "All cards" */
/* .card-deck-badge:not(.is-active) {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
} */

/* Dark mode tweak */
.modalInteractiveRealFlashcards.flashcards-dark .card-deck-badge {
  background: #111827;
  color: #bfdbfe;
  border-color: #1d4ed8;
}

/* Base font inside FAB panel */
#flashcardFabPanel {
  font-size: 0.85rem;
  font-family: "Grandview", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Main panel heading */
#flashcardFabPanel h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding-bottom: 4px;
}

#cardDeckBadge,
#deckBadge {
  display: none;            /* hidden by default */
}

/* Section “cards” */
.fab-section {
  padding: 10px 10px 12px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #f9fafb;
}

/* Section titles */
.fab-section-title {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* Field labels / inline labels */
.fab-field label,
.fab-field-label {
  font-size: 0.8rem;
  font-weight: 500;
}

/* Small helper text */
.filter-hint,
.exam-date-hint,
.study-mode-hint,
.session-timer-label {
  font-size: 0.75rem;
  opacity: 0.75;
}


                          .fab-inline {
                            display: flex;
                            gap: 0.4rem;
                            align-items: center;
                          }

                          .fab-inline select {
                            flex: 1;
                          }

                          .controls {
                          display:flex;
                          gap:1rem;
                          margin-bottom:1rem;
                          flex-wrap:wrap;
                        }
                        .controls select,
                        .controls button {
                          padding:0.4rem 0.6rem;
                        }

                        .flashcard-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.flashcard-controls button {
  padding: 0.4rem 0.8rem;
  min-width: 90px;
}


/* Flashcard Timer */
.header-timer {
  font-size: 0.85rem;
  margin-right: 3rem; /* leave room so it doesn't collide with the X button */
  opacity: 0.9;
}

.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* Container for the custom switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

/* Hide the native checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The track */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: 0.2s;
  border-radius: 22px;
}

/* The knob */
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: 0.2s;
  border-radius: 50%;
}

/* When checked */
.switch input:checked + .slider {
  background-color: #064EB8;
}

.switch input:checked + .slider:before {
  transform: translateX(18px);
}

/* For the rounded look (optional) */
.slider.round {
  border-radius: 22px;
}
.slider.round:before {
  border-radius: 50%;
}


/* make the body a column and center stuff */
/* .flashcard-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; */
  /* center horizontally */
  /* align-items: center;  */
  /* centers vertically */
  /* justify-content: center;  */
  /* ⬅ no scrolling */
    /* overflow: hidden; 
} */

/* buttons row stays small */
.flashcard-body > button {
  align-self: center;
}
.flashcard-body {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}

/* bottom bar */
.flashcard-bottom-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.8rem;
  justify-content: center;
  background: #fff;
  /* stays at bottom because parent is flex column and this comes last */
}

.flashcard-bottom-bar button {
  padding: 0.4rem 0.8rem;
  min-width: 90px;
}

/* Real Flashcard Focus Filter Tracking */
/* Tiny overlay INSIDE the flashcard modal */
.flashcard-focus-modal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;                  /* hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 50;                    /* above card but below global modals */
}

.flashcard-focus-modal.open {
  display: flex;
}

.flashcard-focus-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  text-align: left;
  font-size: 0.9rem;
}

.flashcard-focus-box p {
  margin: 0 0 0.75rem;
}

.focus-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.focus-buttons button {
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
}

#focusClearFilterBtn {
  background: #064EB8;
  color: #fff;
}

#focusKeepBtn {
  background: #e5e7eb;
  color: #111827;
}

/* Real Flashcard Filter */
.fab-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fab-checkbox-group label {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
}


/* Dark mode variant (optional) */
.modalInteractiveRealFlashcards.flashcards-dark .flashcard-focus-box {
  background: #020617;
  color: #e5e7eb;
}

.modalInteractiveRealFlashcards.flashcards-dark #focusKeepBtn {
  background: #1f2937;
  color: #e5e7eb;
}

/* Deck name modal – similar look to focus modal */
.flashcard-deck-modal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 51; /* slightly above focus modal */
}

.flashcard-deck-modal.open {
  display: flex;
}

.flashcard-deck-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  font-size: 0.9rem;
}

.flashcard-deck-box h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.deck-modal-hint {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: #6b7280;
}

#deckNameInput {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 0.85rem;
}

.deck-modal-buttons {
  margin-top: 0.7rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.deck-modal-buttons button {
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
}

#deckNameCancelBtn {
  background: #e5e7eb;
  color: #111827;
}

#deckNameSaveBtn {
  background: #064EB8;
  color: #ffffff;
}

#deckConfirmCancelBtn {
  background: #e5e7eb;
  color: #111827;
}

#deckConfirmDeleteBtn {
  background: #dc2626;
  color: #ffffff;
}

#deckConfirmDeleteBtn:hover {
  background: #b91c1c;
}

/* dark mode tweak */
.modalInteractiveRealFlashcards.flashcards-dark .flashcard-deck-box {
  background: #020617;
  color: #e5e7eb;
}

.modalInteractiveRealFlashcards.flashcards-dark #deckNameInput {
  background: #020617;
  color: #e5e7eb;
  border-color: #374151;
}

.modalInteractiveRealFlashcards.flashcards-dark .deck-modal-hint {
  color: #9ca3af;
}

/* CARD CONTAINER FLASHCARDS CSS START*/
/* BIG CARD: fills ~90% of the body */
.card-container {
  width: 90%;
  height: 90%;
  max-width: 900px;   /* optional safety cap */
  max-height: 900px;  /* optional safety cap */
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* both sides */
.card-side {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem;
  padding-bottom: 0.1rem; /* Lowers rate this card button to bottom of card*/
  text-align: center;
  overflow: hidden;

  backface-visibility: hidden;          /* 👈 critical */
  -webkit-backface-visibility: hidden;  /* 👈 critical (Safari / iOS) */
}

.card-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.3;
  padding: 1rem;
  font-weight: 500;

  transform: rotateY(0deg); /* 👈 explicitly face front */
}
.card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
    height: 100%;

  /* your back layout stuff here */
}

.card.flipped {
  transform: rotateY(180deg);
}

.front-main {
  margin-bottom: 0.5rem;
}

/* wrapper around the image on the front */
.front-media {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Optional: give media area its own max-height */
  max-height: 60vh;
}

.front-media img,
.front-embedded-img {
  max-width: 100%;
  max-height: 60vh;   /* ✅ scale inside viewport */
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .front-media {
    max-height: 50vh;
  }

  .front-media img,
  .front-embedded-img {
    max-height: 50vh;   /* a bit smaller on very small screens */
    max-width: 90vw;
  }
  .video-wrapper {
    max-height: 50vh;
  }
  .card-front {
    font-size: 1.7rem;
  }
}


/* BACK SIDE LAYOUT WORKING WELL< RATINGS BAR PUSHES BACK CONTENT UP*/ 

#cardBackContent {
  flex: 1;                           /* take all remaining height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  overflow: hidden;         /* no scroll yet; just centered */
  padding: 0.5rem;
    gap: 0.5rem;

}

.card-front,
#cardBackContent {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  line-height: 1.3;
}

/* When extra help is open, switch to "top + scroll" */
#cardBackContent.has-extra-open {
  align-items: stretch;     /* content spans width */
  justify-content: flex-start;
  overflow-y: auto;         /* now the whole back content scrolls */
  max-height: 80vh;         /* up to ~80% of viewport if needed */
}

/* rating bar INSIDE the card, starts hidden */
/* RATING DRAWER — fixed area at bottom */
/* BOTTOM STRIP THAT NEVER CHANGES HEIGHT */
.rating-drawer {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  margin-top: auto;          /* keeps it at the bottom of the card */
  height: 3.75rem;            /* fixed strip; tweak as needed */
  display: flex;
  flex-direction: column-reverse;  /* 👈 flip children: toggle goes to bottom */
  justify-content: flex-start;
  overflow: hidden;
}

/* no .rating-drawer.open height changes anymore */

/* toggle button always visible at bottom */
.rating-toggle {
  width: 100%;
  border: none;
  background: #e5edf9;
  color: #064EB8;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-bottom: 0.25rem;
}

/* inside bar = the sliding part */
.inside-rating-bar {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  padding-bottom: 0.25rem;

  max-height: 0;              /* collapsed */
  opacity: 0;
  overflow: hidden;
  transform: translateY(4px);
  transition:
    max-height 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.rating-drawer.open .inside-rating-bar {
  max-height: 3.5rem;         /* enough room for the 3 buttons */
  opacity: 1;
  transform: translateY(0);
}


.rating-btn.need-help   { background: #d9534f; }
.rating-btn.kinda       { background: #f0ad4e; }
.rating-btn.understood  { background: #5cb85c; }


.rating-btn {
  flex: 1;
  padding: 0.35rem 0.55rem;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;

  position: relative;
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    outline-color 0.15s ease;
}

/* When a rating is selected for this card */
.rating-btn.is-selected {
  transform: translateY(1px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9),
              0 0 0 4px rgba(6, 78, 184, 1.0); /* soft halo */
}

/* optional: slightly different BG for selected */
.rating-btn.need-help.is-selected   { filter: brightness(1.1); }
.rating-btn.kinda.is-selected       { filter: brightness(1.1); }
.rating-btn.understood.is-selected  { filter: brightness(1.1); }



/* media inside card */
.media {
  margin-top: 0.5rem;
}

/* <!-- Dark Mode Real Flashcards --> */

/* When dark mode is ON, this class gets added to the modal */
/* when dark mode is on */
.modalInteractiveRealFlashcards.flashcards-dark
  .modal-contentInteractiveRealFlashcards {
  background: #111827;
  color: #f9fafb;
}

.modalInteractiveRealFlashcards.flashcards-dark
  .topHeaderInteractiveRealFlashcards {
  background-color: #020617;
  color: #e5e7eb;
}

.modalInteractiveRealFlashcards.flashcards-dark .card {
  background: #020617;
  color: #f9fafb;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

/* etc – other dark styles… */

/* front / back text colors */
.modalInteractiveRealFlashcards.flashcards-dark .card-front,
.modalInteractiveRealFlashcards.flashcards-dark .card-back {
  color: #f9fafb;
}

/* rating toggle in dark mode */
.modalInteractiveRealFlashcards.flashcards-dark .rating-toggle {
  background: #1f2937;
  color: #e5e7eb;
}

/* rating buttons */
.modalInteractiveRealFlashcards.flashcards-dark .rating-btn.need-help   { background: #b91c1c; }
.modalInteractiveRealFlashcards.flashcards-dark .rating-btn.kinda       { background: #b45309; }
.modalInteractiveRealFlashcards.flashcards-dark .rating-btn.understood  { background: #15803d; }

/* extra-help drawer background */
.modalInteractiveRealFlashcards.flashcards-dark .extra-help {
  background: #020617;
}

/* dropdowns in FAB (optional, but nice) */
.modalInteractiveRealFlashcards.flashcards-dark .flashcard-fab-panel {
  background: #020617;
  color: #e5e7eb;
}

.modalInteractiveRealFlashcards.flashcards-dark .flashcard-fab-panel select {
  background: #111827;
  color: #e5e7eb;
  border-color: #374151;
}



@media (max-width: 975px) {
  .modal-contentInteractiveRealFlashcards {
    width: 95%;
    height: 95%;
  }

  .flashcard-body {
    padding: 0.25rem;
  }

  .card-container {
    width: 95%;
    height: 95%;
  }
}
/* larger screens: don’t let it get silly wide, center it */
@media (min-width: 900px) {
  .flashcard-body {
    justify-content: flex-start; /* top-ish */
  }
  .card-container {
    width: 95%;
    height: 95%;
  }
  .rating-bar {
    width: 520px;
  }
}


                        /* Real Flashcards FAB Button STYLE START-------------------------------------------------------------------------------------------------------------------------------- */
                        /* .flashcard-fab {
                          position: absolute;
                          bottom: 16px;
                          left: 16px;
                          background: #45a049;
                          color: #fff;
                          border: none;
                          border-radius: 9999px;
                          padding: 10px 16px;
                          font-size: 0.9rem;
                          cursor: pointer;
                          box-shadow: 0 4px 12px rgba(0,0,0,0.2);
                          z-index: 20;
                        } */

/* FAB panel container */
.flashcard-fab-panel {
  position: absolute;
  bottom: 70px;
  left: 16px;
  width: 260px;
  background: #ffffff;                    /* white panel */
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  padding: 12px 14px 14px;
  z-index: 21;
  display: none;
  max-height: 70vh;
  overflow-y: auto;
}

/* Section cards */
.fab-section {
  padding: 10px 10px 12px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #f9fafb; /* soft gray */
}

/* Section titles already above */

/* Collapsible header buttons inside sections (Filter, Study Plan) */
.fab-collapsible-header {
  width: 100%;
  text-align: left;
  padding: 6px 10px; /* match select menu left/top/bottom padding */
  border-radius: 6px;
  border: 1.5px solid var(--blue-border, #bfdbfe);
  background: var(--blue-50, #eff6ff);
  
  /* Match select menu text styling */
  font-size: 0.9rem;
  font-family: 'Open Sans', system-ui, sans-serif;
  color: var(--brand-blue, #064EB8);
  font-weight: 600;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fab-collapsible-header:hover {
  border-color: var(--brand-blue, #064EB8);
  box-shadow: 0 0 0 3px rgba(6, 78, 184, 0.12);
}

/* Dark mode */
.flashcards-dark .fab-collapsible-header {
  background: #111827;
  border-color: #1d4ed8;
  color: #e5e7eb;
}
/* Collapsible body */
.fab-collapsible-body {
  margin-top: 4px;
  display: none;
}

.fab-collapsible-body.open {
  display: block;
}

/* Filter sub-sections (My Ratings, Topics, etc.) */
.fab-filter-section {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.fab-filter-section:first-of-type {
  border-top: none;
  padding-top: 4px;
  margin-top: 4px;
}

/* Clear buttons stay light and pill-shaped */
.fab-clear-btn {
  font-size: 0.75rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.fab-clear-btn--primary {
  margin-bottom: 8px;
}
.fab-clear-btn--inline {
  margin-left: auto;
}

                        .flashcard-fab-panel.open {
                          display: block;
                        }

                        .flashcard-fab-panel h3 {
                          margin: 0 0 8px;
                          font-size: 0.9rem;
                        }

.fab-field {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}


                        /* //11/16/2025 Collapsible Filter*/
.fab-collapsible-header {
  width: 100%;
  text-align: left;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);  /* slightly softer */
  background: #eef2ff;                  /* subtle blue-ish to stand out */
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.fab-collapsible-body {
  margin-top: 4px;
  display: none;
}

.fab-collapsible-body.open {
  display: block;
}

.fab-chevron {
  font-size: 0.7rem;
}

.fab-filter-summary {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 4px 0 8px;
}

.fab-filter-section {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.fab-filter-section:first-of-type {
  border-top: none;
  padding-top: 4px;
  margin-top: 4px;
}

.fab-filter-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;

  display: flex;
  align-items: center;
  gap: 6px;
}

.fab-clear-btn {
  font-size: 0.75rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}

/* Top-level "Clear all filters" */
.fab-clear-btn--primary {
  margin-bottom: 8px;
}

/* Tiny inline buttons next to section titles */
.fab-clear-btn--inline {
  margin-left: auto;
}

/* Optional: make title row flex to push Clear to right */
.fab-filter-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;

  display: flex;
  align-items: center;
  gap: 6px;
}


                        /* Real Flashcards FAB Button STYLE END-------------------------------------------------------------------------------------------------------------------------------- */


                        /* Back Card Details*/
.answer-main {
  font-size: clamp(1rem, 1.4vw + 0.6rem, 1.8rem);
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Extra help is just more content, no separate scroll box */
.extra-help {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem 0.5rem;
}

/* .extra-help.hidden {
  display: none;
}
 */
.answer-explainer {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
}

/* media blocks (image/video/audio) stretch but stay centered visually */
.media-thumb {
  margin-top: 0.5rem;
}

.media-thumb img,
.media-thumb iframe,
.media-thumb video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.25rem auto 0;
}

/* Video Support For Real Flashcards */
.video-wrapper {
  position: relative;
  width: 100%;
  max-height: 60vh;        /* ✅ keep it inside the viewport */
  padding-bottom: 56.25%;   /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Real Flashcard Source Styling */
.card-source {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: #666;
  text-align: center;
  border-top: 1px solid #ddd;
  padding-top: 0.7rem;
  font-style: italic;
}

.flashcards-dark .card-source {
  color: #bbb;
  border-top-color: #555;
}



/* ATTEMPT 11/16/2025 */
/* === FAB PANEL BASE (light mode) ==================================== */

#flashcardFabPanel {
  font-size: 0.85rem;
  font-family: "Grandview", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Panel container */
.flashcard-fab-panel {
  position: absolute;
  bottom: 70px;
  left: 16px;
  width: 260px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  padding: 12px 14px 14px;
  z-index: 21;
  display: none;
  max-height: 70vh;
  overflow-y: auto;
}

.flashcard-fab-panel.open {
  display: block;
}

.flashcard-fab-panel h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding-bottom: 4px;
}

/* "Card" sections inside panel */
.fab-section {
  padding: 10px 10px 12px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #f9fafb;
}

.fab-section:first-of-type {
  margin-top: 2px;
}

/* Section titles */
.fab-section-title {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* Fields inside sections */
.fab-field {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fab-field label,
.fab-field-label {
  font-size: 0.8rem;
  font-weight: 500;
}

/* Collapsible headers (Filter, Study Plan) */
.fab-collapsible-header {
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(37, 99, 235, 0.15);
  background: #eef2ff;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.fab-collapsible-body {
  margin-top: 4px;
  display: none;
}

.fab-collapsible-body.open {
  display: block;
}

.fab-chevron {
  font-size: 0.7rem;
}

/* Filter “sub-cards” (My Ratings, Topics, etc.) */
.fab-filter-section {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.fab-filter-section:first-of-type {
  border-top: none;
  padding-top: 4px;
  margin-top: 4px;
}

.fab-filter-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;

  display: flex;
  align-items: center;
  gap: 6px;
}

/* Clear buttons */
.fab-clear-btn {
  font-size: 0.75rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.fab-clear-btn--primary {
  margin-bottom: 8px;
}

.fab-clear-btn--inline {
  margin-left: auto;
}

/* Checkboxes in filter sections */
.fab-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fab-checkbox-group label {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hints / helper text */
.fab-filter-summary,
.filter-hint,
.exam-date-hint,
.study-mode-hint,
.session-timer-label {
  font-size: 0.75rem;
  opacity: 0.75;
}

/* === DARK MODE OVERRIDES FOR FAB & SECTIONS ======================= */
/* Scope: only when the flashcard modal has .flashcards-dark */

.modalInteractiveRealFlashcards.flashcards-dark .flashcard-fab-panel {
  background: #020617;             /* slate-950ish */
  color: #e5e7eb;
  box-shadow: 0 8px 18px rgba(0,0,0,0.6);
  border: 1px solid #111827;
}

/* Section cards in dark mode */
.modalInteractiveRealFlashcards.flashcards-dark .fab-section {
  background: #020617;
  border-color: #1f2937;
}

/* Section titles */
.modalInteractiveRealFlashcards.flashcards-dark .fab-section-title {
  color: #9ca3af;
  opacity: 0.9;
}

/* Collapsible headers */
.modalInteractiveRealFlashcards.flashcards-dark .fab-collapsible-header {
  background: #111827;
  border-color: #1d4ed8;
  color: #e5e7eb;
}

/* Filter summary + small hints */
.modalInteractiveRealFlashcards.flashcards-dark .fab-filter-summary,
.modalInteractiveRealFlashcards.flashcards-dark .filter-hint,
.modalInteractiveRealFlashcards.flashcards-dark .exam-date-hint,
.modalInteractiveRealFlashcards.flashcards-dark .study-mode-hint,
.modalInteractiveRealFlashcards.flashcards-dark .session-timer-label {
  color: #9ca3af;
  opacity: 0.85;
}

/* Filter sub-sections separators */
.modalInteractiveRealFlashcards.flashcards-dark .fab-filter-section {
  border-top-color: #374151;
}

/* Clear buttons */
.modalInteractiveRealFlashcards.flashcards-dark .fab-clear-btn {
  background: #020617;
  border-color: #374151;
  color: #e5e7eb;
}

/* Checkbox labels */
.modalInteractiveRealFlashcards.flashcards-dark .fab-checkbox-group label {
  color: #e5e7eb;
}

/* Inputs / selects in the FAB */
.modalInteractiveRealFlashcards.flashcards-dark .fab-field select,
.modalInteractiveRealFlashcards.flashcards-dark .fab-field input[type="date"],
.modalInteractiveRealFlashcards.flashcards-dark .fab-field input[type="text"],
.modalInteractiveRealFlashcards.flashcards-dark .fab-field input[type="number"] {
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #374151;
}

/* Make the FAB button itself a bit more neon in dark mode (optional) */
.modalInteractiveRealFlashcards.flashcards-dark .flashcard-fab {
  background: #22c55e;
  color: #022c22;
}

#flashcardSearchInput {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  font-size: 0.8rem;
}

/* dark mode */
.modalInteractiveRealFlashcards.flashcards-dark #flashcardSearchInput {
  background: #111827;
  color: #e5e7eb;
  border-color: #374151;
}

.flashcard-streak-toast {
  position: absolute;
  top: 56px;                 /* under the blue header */
  right: 16px;
  background: rgba(15,23,42,0.96);  /* slate-900-ish */
  color: #f9fafb;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 60;
}

.flashcard-streak-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* dark mode tweak (optional, but keeps style consistent) */
.modalInteractiveRealFlashcards.flashcards-dark .flashcard-streak-toast {
  background: rgba(15,23,42,0.98);
  color: #e5e7eb;
}

/* dark mode uses same base; no changes needed but you can lighten text if desired */

.favorite-card-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;          /* 👈 SAME on both sides */
  border: none;
  background: rgba(15, 23, 42, 0.7);
  color: #fbbf24;
  /* 4/25/2026 OG LOGIC - Favorite Button */
  /* width: 26px;
  height: 26px; */
    width: 39px;
  height: 39px;

  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  opacity: 0.9;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

/* Optional “not favorited” style */
.favorite-card-btn.not-favorited {
  background: rgba(209, 213, 219, 0.85);
  color: #6b7280;
}


.favorite-back {
  bottom: 25px;   /* adjust this number to taste */
}

/* Dark mode tweak if you like */
.modalInteractiveRealFlashcards.flashcards-dark .favorite-card-btn.not-favorited {
  background: #374151;
  color: #9ca3af;
}

.favorite-toggle {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 5;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  color: #9ca3af;              /* gray star by default */
  transition: color 0.15s ease, transform 0.15s ease;
}

.favorite-toggle.is-favorite {
  color: #f97316;              /* orange-ish when favorited */
  transform: scale(1.05);
}

/* Dark mode tweak */
.modalInteractiveRealFlashcards.flashcards-dark .favorite-toggle {
  color: #6b7280;
}

.modalInteractiveRealFlashcards.flashcards-dark .favorite-toggle.is-favorite {
  color: #fb923c;
}

.study-streak-line {
  font-size: 0.75rem;
  margin: 4px 0 6px;
  color: #4b5563;      /* slate-ish */
}

/* Dark mode tweak */
.modalInteractiveRealFlashcards.flashcards-dark .study-streak-line {
  color: #9ca3af;
}
/* 2/16/2026 Flashcard CSS END --------------------------------------------------------------------------------------------------- */
/* CARD CONTAINER FLASHCARDS CSS END*/

/* 2/16/2026 Practice Exam CSS START --------------------------------------------------------------------------------------------------- */
                /* <!-- Practice Exam Logic START --> */

                .nav-button {
                  /* Mimic answer-option styles */
                  width: 100%;
                  min-width: 80px;
                  min-height: 35px;
                  border: 1px solid #ccc;
                  border-radius: 4px;
                  background-color: #f8f8f8;
                  cursor: pointer;
                  font-size: 1em;
                  padding: 8px;
                  text-align: center; /* or left, your choice */
                  box-sizing: border-box;
                  transition: background-color 0.2s ease, color 0.2s ease;
                }

                /* Optional: Hover effect */
                .nav-button:hover {
                  background-color: #2f86eb;
                  color: #fff;
                }

                #previousQuestion-btn,
                  #nextQuestionButton,
                  #cluesQuestionsButton,
                  #flagQuestionButton {
                  background-color: #4CAF50;
                  color: white;
                }

                /* // 3/26/2025 */
                .tooltip-hint {
                  position: absolute; /* so you can place it near the button */
                  background: rgb(245, 245, 4);
                  border: 1px solid #fe0808;
                  padding: 5px;
                  display: none; /* hidden by default */
                  z-index: 99999999999999999999999999; /* so it’s above other elements */
                }

                @keyframes pulseBorder {
                  0% {
                    box-shadow: 0 0 0px rgba(255, 215, 0, 0.5);
                  }
                  50% {
                    box-shadow: 0 0 10px rgba(255, 215, 0, 1);
                  }
                  100% {
                    box-shadow: 0 0 0px rgba(255, 215, 0, 0.5);
                  }
                }

                .highlight-pulse {
                  animation: pulseBorder 1s infinite;
                }

                #skipQuestionButton {
                /* background-color: rgba(235, 232, 74, 1); */
                background-color: rgb(240, 240, 238);
                color: black;
                }

                #settingsToggleBtn{
                  /* background-color:#064EB8; */
                  background-color: rgb(240, 240, 238);
                  color: black;
                }

                /* Timer for Exam Mode Practice Exam */
                button:disabled {
                  background-color: #ccc;
                  cursor: not-allowed;
                  opacity: 0.6;
                }

                /* Practice Exam Timer Styling */
                  #timerWrapper {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                  }

                  #toggleTimerButton {
                    padding: 5px 10px;
                    border: none;
                    background-color: #007BFF;
                    color: white;
                    cursor: pointer;
                    border-radius: 4px;
                  }

                  #toggleTimerButton:hover {
                    background-color: #0056b3;
                  }

                  #timerContainer {
                    font-size: 18px;
                    font-weight: bold;
                  }


                  /* 3/13/2025 Practice Exam Settings Buttons ---------------------------------------------------------------------------------------------------------------------*/
                  .settings-dropdown {
                    position: relative; 
                    display: inline-block; 
                  }

                  /* Hidden by default */
                  .settings-menu {
                    display: none;           /* hidden initially */
                    position: absolute;      /* so it’s “on top” of other elements */
                    background-color: #f1f1f1;
                    padding: 8px;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    /* Adjust these to fit your styling */
                    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
                  }

                  /* Show the menu when a class like .show is toggled */
                  .settings-menu.show {
                    display: flex;           /* or block. If you want them in a column, use flex-direction: column */
                    flex-direction: column;
                    gap: 8px;                /* space between buttons */
                  }

                  /* Positioning the menu above and to the left of the button */
                  .settings-menu {
                    bottom: 100%;  /* Moves it above the button */
                    left: auto;
                    right: 0;      /* Aligns it to the left of the button */
                    transform: translateY(-8px) translateX(-10%); /* Moves it 10% further to the left */

                    /* Enable scrolling if the menu is too long */
                    max-height: 200px;  /* Adjust this value as needed */
                    overflow-y: auto;   /* Enables vertical scrolling */
                  }


                /* 3/13/2025 Flashcard Container ---------------------------------------------------------------------------------------------------------------------*/ 
                  .flashcard-container {
                    width: 75%; /* CO*/
                    /* width: 100%; */
                    margin: 20px auto;
                    margin-top: 0;
                    /* border: 1px solid #ccc; */
                    padding: 16px; /* CO*/
                    border-radius: 4px;
                    font-family: Arial, sans-serif;
                    /* We'll be moving this container around with transform */
                    position: relative;
                    /* optionally set a fixed height so the container doesn't jump */
                    /* height: 200px; */
                    box-sizing: border-box;
                    /* we’ll add transitions dynamically via JavaScript */
                    overflow: hidden; /* Keeps content within bounds */
                    /* display: none; 4/26/2025 */ 
                  }

                  /* 4/27/2025 Practice Exam Keyword */
                  .keyword-list {
                    display: flex;
                    flex-direction: column;
                    max-height: 160px;          /* scroll if you ever add more */
                    overflow-y: auto;
                    gap: 4px;
                  }
                  .keyword-list label {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    font-size: 0.9rem;
                  }

                  .keyword-actions { margin: 6px 0; display: flex; gap: 8px; }
                  .small-btn       { padding: 3px 8px; font-size: .8rem; }



                  /* 4/22/2025 Practice Exam Custom Styling*/
                  .exam-setup-container {
                    padding: 10px;
                    margin: 15px;
                    background: #f9f9f9;
                    border-radius: 8px;
                    box-shadow: 0 0 5px rgba(0,0,0,0.2);
                  }

                  .exam-setup-container label {
                    display: block;
                    margin-bottom: 8px;
                  }

                  .exam-setup-container select {
                    margin-left: 5px;
                    padding: 5px;
                  }

                /* Practice Exam May not be needed */
                  .studyToolSpace{
                    overflow: hidden; /* Keeps content within bounds IMPORTANT 4-8-2025 */
                    /* height: 100%;
                    padding: 0; CO */
                  }

                /* Practice Exam Buttons */
                  .top-buttons-row {
                    display: flex;
                    justify-content: space-between; /* left group on left, right group on right */
                    align-items: center;           /* vertically center them */
                    width: 100%;
                    margin-bottom: 8px;            /* spacing below the row */
                  }

                  .left-buttons,
                  .right-buttons {
                    display: flex;  /* horizontally align the buttons */
                    gap: 8px;       /* small spacing between buttons */
                  }

                  .question-number {
                    text-align: center;
                    font-weight: bold;
                    font-size: 1.1em;
                    margin-bottom: 8px;
                  }

                  .question-text {
                    text-align: center;
                    font-weight: bold;
                    font-size: 1.2em;
                    margin-bottom: 16px;
                  }

                  /* 3/13/2025 Container for the answers ---------------------------------------------------------------------------------------------------------------------*/ 
                  .answers {
                    display: flex;           /* use flex so we can align items easily */
                    flex-direction: column;  /* stack the answers vertically */
                    gap: 8px;                /* space between each answer button */
                    margin-bottom: 16px;
                  }
                  /* The answer-option buttons themselves */
                  .answer-option {
                    width: 100%;             /* make them all the same width as the container */
                    min-height: 40px;        /* optional: ensure a minimal height so they look uniform */
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    background-color: #f8f8f8;
                    cursor: pointer;
                    font-size: 1em;
                    padding: 8px;
                    text-align: left;        /* you can also do 'center' if you like */
                    box-sizing: border-box;
                  }

                /* New class for selected answers */
                  .selected {
                    background-color: #064EB8;
                    color: white;
                  }

                  .hiddenPracticeExamEndMessage {
                    display: none;
                  }

                  /* Example of feedback styling */
                  .correct {
                    background-color: lightgreen;
                  }

                  .incorrect {
                    background-color: #f8d7da;
                  }

                  /* // 3/24/2025 Practice Exam Dark Mode --------------------------------------------------------------------------------------------------------------------- */
                    body.dark-mode {
                      color: #ccc;              /* lighter text */
                    }

                    /* If you want to override other elements specifically: */
                    .dark-mode .flashcard-container {
                      background-color: #333; 
                      border: 1px solid #666;
                    }
                    .dark-mode .modal-contentInteractiveFlashcards {
                      background-color: #333; 
                      border: 1px solid #666;
                    }
                    .dark-mode .answers .answer-option {
                      background-color: #444;
                      color: #eee;
                    }

                    .dark-mode .question-text {
                      background-color: #444;
                      color: #eee;
                    }


                    .dark-mode .studyToolSpace {
                      background-color: #2b2b2b; /* or #1f1f1f, any dark color */
                      color: #fff;              /* text color so it's readable on dark background */
                    }

                    .dark-mode .answer-option.selected {
                      background-color: #1854a0;  /* a slightly darker teal/blue, up to you */
                      color: #fff;
                    }

                    .dark-mode .answer-option.correct {
                      background-color: #356b35;  /* a deeper green for dark background */
                      color: #fff;                /* ensure text stands out */
                    }

                    .dark-mode .answer-option.incorrect {
                      background-color: #7b3030;  /* a darker red */
                      color: #fff;
                    }

                    .dark-mode .modal-contentEndQuiz {
                      background-color: #f2f2f2;
                      color: #000;
                      border: 1px solid #ccc;
                    }

                  /*  accordion container  */
                    .keyword-accordion {
                      margin: 8px 0 14px;
                      border: 1px solid #ddd;
                      border-radius: 6px;
                      padding: 0;                /* remove UA default */
                    }

                    /*  summary row  4/29/2025 */
                    .keyword-accordion > summary {
                      list-style: none;          /* hide default arrow so we can style our own */
                      cursor: pointer;
                      padding: 10px 12px;
                      font-weight: 600;
                      user-select: none;
                      position: relative;
                      background: #f9f9f9;
                      border-radius: 8px;
                      box-shadow: 0 0 5px rgba(0,0,0,0.2);
                    }

                    /*  custom caret  */
                    .keyword-accordion > summary::after {
                      content: "▸";
                      position: absolute;
                      right: 12px;
                      transition: transform 0.2s;
                    }

                    /*  rotate caret when open  */
                    .keyword-accordion[open] > summary::after {
                      transform: rotate(90deg);  /* arrow points down */
                    }

                    /*  inner check-box list  */
                    .keyword-list {
                      padding: 10px 15px 15px;
                      max-height: 60vh;          /* safety – keep within viewport */
                      overflow-y: auto;          /* scroll inside if too tall    */
                    }

                    /* make each label blocky */
                    .keyword-list label {
                      display: block;
                      margin-bottom: 6px;
                    }


                  @media (max-width: 945px) {
                    .flashcard-container {
                      width: 95%; /* or 100% */
                      padding: 0; /* CO*/
                      overflow-y: auto;
                    }
                    
                    .modal-contentTestValuesCustomExam {
                      width: 50vw;                    /* narrower on very wide screens */
                    }

                    .modal-contentTestValuesCustomExam h2{
                      margin: 0;      /* kills top + bottom margin */
                      padding: 0;     /* kills any default padding */
                    }

                    .exam-setup-container {
                      padding: 10px;
                      margin: 15px;
                      background: #f9f9f9;
                      border-radius: 8px;
                      box-shadow: 0 0 5px rgba(0,0,0,0.2);
                    }
                  }

                /* <!-- Practice Exam Logic END --> */

/* 2/16/2026 Practice Exam CSS END --------------------------------------------------------------------------------------------------- */

/* 2/16/2026 HELP Modal/Tracking CSS START --------------------------------------------------------------------------------------------------- */
      /* Tracking and Help Modals START*/
#helpModal {
  display: none;
  /* add your modal overlay/backdrop styles if needed */
}
#helpModal.open {
  display: block;
}
        .modal-contentHelpModal {
          background-color: white;
          font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
          padding: 20px;
          border-radius: 10px;
          position: fixed;                /* Use fixed, not absolute */
          top: 50%; left: 50%;
          transform: translate(-50%, -50%);
          width: min(600px, 90vw);        /* Responsive, up to 600px */
          max-height: 80vh;               /* Never grow past 80% of viewport */
          overflow-y: auto;               /* SCROLLBAR APPEARS WHEN NEEDED */
          border: 2px solid #0a0a0a;
          z-index: 103;
          box-sizing: border-box;
        }



      /* accordion */
      .accordion-item + .accordion-item { border-top:1px solid #ddd; }
      .accordion-header {
        width:100%; background:none; border:0; text-align:left;
        font-size:1rem; padding:1rem; cursor:pointer;
      }
      .accordion-header[aria-expanded="true"] { font-weight:600; }
      .accordion-panel {
        max-height:0; overflow:hidden; transition:max-height .3s ease;
        padding:0 1rem;
      }
      .accordion-panel.open { padding-bottom:1rem; }

      /* responsive video */
      .video-wrapper { position:relative; padding-bottom:56.25%; }
      .video-wrapper video,
      .video-wrapper iframe { position:absolute; inset:0; width:100%; height:100%; }

      /* // 6/8/2025 */
      /* ← paste below your existing CSS */

      .cat-header {
        width:100%; cursor:pointer; border:0; text-align:left;
        padding:1rem; font-size:1.05rem; font-weight:700;
        background:#f7f7f7;
      }

      .cat-panel {
        max-height:0; overflow:hidden; transition:max-height .3s ease;
      }
      .cat-panel.open { padding-bottom:.5rem; }

      .cat-item + .cat-item { border-top:2px solid #ccc; }   /* separator */

        /* Help Button and X Button on Help Modal */
        #closeHelpModal {
            color: #f00a0a;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        
        #closeHelpModal:hover,
        #closeHelpModal:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

      #helpButton.active,
      #helpButton.active:hover,
      #helpButton:active {
        background-color: #e6ea0b;
        color: black;
      }


/* 🔷 Modal container */
#trackingDebugModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 103;
  width: min(600px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  border: 2px solid #0a0a0a;
  background: white;
  border-radius: 10px;
  box-sizing: border-box;
}

.trackingModalContent {
  padding: 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 🔷 Header */
#trackingDebugModal h2 {
  color: #004080;
  margin-top: 0;
}

/* 🔷 Accordion basics */
.accordion-item {
  display: block;
  margin-bottom: 16px;
}

#trackingDebugModal .accordion-item + .accordion-item {
  border-top: 1px solid #ddd;
}

.accordion-header {
  width: 100%;
  background-color: #064EB8;
  color: white;
  border: 0;
  text-align: left;
  font-size: 1rem;
  padding: 1rem;
  cursor: pointer;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}

.accordion-header[aria-expanded="true"] {
  font-weight: 600;
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: block;
  position: relative;
}

.accordion-panel.open {
  max-height: 400px;           /* or your desired height */
  overflow-y: auto;
  padding-bottom: 1rem;
}

/* 🔷 Indent nested accordions */
#trackingDebugModal .accordion-panel .accordion-item {
  margin-left: 20px;
  border-left: 2px dashed #ccc;
  padding-left: 10px;
}

/* 🔷 Day blocks */
.day-block {
  margin-bottom: 32px;
  display: block;
}

.day-wrapper {
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fdfefe;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 🔷 Session block wrapper */
.session-content-wrapper {
  display: block;
  width: 100%;
}


.day-block {
  background: rgba(200, 230, 255, 0.1);
}

.session-content-wrapper {
  background: rgba(255, 200, 200, 0.1);
}

      /* Tracking and Help Modals END */

/* 2/16/2026 HELP Modal/Tracking CSS END --------------------------------------------------------------------------------------------------- */

/* 3/28/2026 */
button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  background-image: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.multipleFailureModalC {
  background-color: var(--bg-card);
  color: var(--text);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding: 0;
  border-radius: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  z-index: 101;
  width: min(92vw, 520px);
  max-height: 80vh;
  overflow: hidden;
  box-sizing: border-box;
}

.multipleFailureModalC p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-soft);
}
.modal-scroll-content {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
  box-sizing: border-box;
}


.universalModalButton:active {
  transform: scale(0.97);
}

.universalModalButton:hover {
  filter: brightness(1.03);
}


.secondaryButton:hover {
  border-color: #4CAF50;
}

.modal-title {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--text);
}

.modal-subtitle {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--text-soft);
}

.NavMenu,
#outerTestFormContainer,
#fabMainButton,
.header {
  touch-action: none;
}

.universalModalButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 15px;
  min-height: 0;
  box-sizing: border-box;

  border-radius: 50px;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;

  white-space: normal;
  word-break: break-word;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.1s ease,
    background-color 0.3s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    filter 0.15s ease;
}

.modal-buttons-vertical .universalModalButton {
  width: 100%;
}

.modal-buttons-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px; /* adjust to taste */
}

.modal-buttons-vertical {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers the buttons horizontally */
  gap: 12px;
}

.modal-buttons-vertical .universalModalButton {
  width: auto;        /* remove the 100% override */
  min-width: 260px;   /* keeps them from being too narrow */
  max-width: 400px;   /* keeps them from getting too wide on large screens */
}

.secondaryButton {
  background: linear-gradient(180deg, #F7FAFF 0%, #EEF4FD 100%);
  color: var(--brand-blue);
  border: 2px solid #BFD3F2;
  box-shadow: 0 2px 6px rgba(6, 78, 184, 0.08);
}

.secondaryButton:hover {
  background: linear-gradient(180deg, #EEF5FF 0%, #E4EEFC 100%);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.secondaryButton.selected {
  background: linear-gradient(180deg, #F0FAF0 0%, #E4F6E5 100%);
  border-color: var(--brand-green);
  color: #2F6F33;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.14);
}

/* SECTION CARDS */
.fabMenuSection {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #ffffff;
  border: 1px solid #e3eaf3;
  border-radius: 12px;
  padding: 9px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fabMenuSection:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.fabMenuSection:last-child {
  margin-bottom: 0;
}

.fabMenuSectionTitle {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5b6b7f;
  margin-bottom: 8px;
  padding-left: 2px;
}

#fabButtonSettings {
    font-size: 0.95rem;
}

/* MAIN MENU PANELS */
#fabMainMenu,
#fabMenuHelp {
  gap: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 12px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 220ms ease;

  transform-origin: bottom left;
  will-change: transform, opacity;
  -webkit-overflow-scrolling: touch;
}

#fabMainMenu,
#fabMenuHelp {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  /* changes height of main menu */
  max-height: min(58vh, 700px);
}

#fabMainMenu,
#fabMenuHelp {
  -webkit-overflow-scrolling: touch;
}

/* animated hidden state */
#fabMainMenu.hidden,
#fabMenuHelp.hidden {
  display: flex !important;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
}

/* BUTTON POLISH */
#fabMainMenu button,
#fabMenuHelp button {
  border-radius: 8px;
  font-weight: 600;
  min-height: 44px;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

#fabMainMenu button:hover,
#fabMenuHelp button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#fabMainMenu button:active,
#fabMenuHelp button:active,
#fabMainButton:active {
  transform: scale(0.98);
}

#fabMainMenu::-webkit-scrollbar,
#fabMenuHelp::-webkit-scrollbar {
  width: 8px;
}

#fabMainMenu::-webkit-scrollbar-thumb,
#fabMenuHelp::-webkit-scrollbar-thumb {
  background: rgba(6, 78, 184, 0.25);
  border-radius: 999px;
}

#fabMainMenu::-webkit-scrollbar-track,
#fabMenuHelp::-webkit-scrollbar-track {
  background: transparent;
}

/* Fixes main menu on iPhones so it doesn't grow unexpectedly */
@media (hover: hover) and (pointer: fine) {
  .fabMenuSection:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  #fabMainMenu button:hover,
  #fabMenuHelp button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}

/* FULLSCREEN BUTTON */
#fullscreenToggleButton {
  width: 100%;
  margin-bottom: 8px;
}

/* FONT BUTTONS */
#fontButtonsContainer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

#fontButtonsContainer button {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* AUDIO CONTROLS STACKED */
#audioControls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e6edf5;
}

#fontButtonsContainer {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e6edf5;
}

#fullscreenToggleButton {
  width: 100%;
  margin-top: 8px;
}
#audioControls #muteButton {
  width: 100%;
  justify-content: center;
}

.sliderRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.sliderRow label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4f5f73;
}

#audioControls input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: #ccd6e3;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

#audioControls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #064EB8;
  cursor: pointer;
  border: none;
}

#audioControls input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #064EB8;
  cursor: pointer;
  border: none;
}

/* BIGGER SCREEN POSITION FIX */
/* @media (min-width: 946px) {
  #fabMain {
    left: 2.5%;
  }
  

  #fabMainMenu,
  #fabMenuHelp {
    left: 100%;
    right: auto;
    bottom: 0;
  }

  #fabMenuHelp {
    position: absolute;
    left: calc(247% );
    bottom: 0;
    right: auto;
  }
} */

@media (min-width: 946px) {
  #fabMain {
    position: fixed;
    left: 2.5%;
    overflow: visible;
  }

  /* fabPanels update important important */
  #fabPanels {
    position: absolute;
    left: 110%;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 0;
        pointer-events: none; /* let touches pass through the panel container */
  }

  #fabMainMenu,
  #fabMenuHelp {
    position: static;
    align-self: flex-end;
    margin: 0;
    width: 220px;
    max-height: min(60vh, 720px);
    overflow-y: auto;
    overflow-x: hidden;
        pointer-events: auto; /* but menus themselves still receive clicks */
  }
}
/* SMALLER SCREEN TUNING */
@media (max-width: 945px) {
  #fabPanels {
    display: flex;
    align-items: flex-end;
    gap: 0;
  }

  .fabMenuSection {
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
  }

  .fabMenuSectionTitle {
    font-size: 0.72rem;
  }

  #fabMainMenu {
    width: 150px;
  }

  #fabMenuHelp {
    width: 150px;
    margin-left: 55px;
  }
}

@media (max-width: 640px) {
  #fabMainMenu,
  #fabMenuHelp {
    border-radius: 14px;
    padding: 10px;
  }

  .fabMenuSection {
    border-radius: 10px;
    padding: 9px;
  }
  #fabPanels {
  display: flex;
  align-items: flex-end;
}
#fabMenuHelp {
    transform: translateY(-20px); /* adjust: -6px to -16px */
  }
}

/* Stops scrolling with scroll button and trackpad on laptops */
/* html,
body {
  overflow: hidden;
  height: 100%;
} */

#gridcontainer,
.no-margin-padding {
  height: 100%;
  overflow: hidden;
}

#fabMainMenu #resetButton {
  background-color: #DC2626 !important;
  color: white;
  border: none;
}

#fabMainMenu #resetButton:hover {
  background-color: #B91C1C;
}

#fabMainMenu #helpButton {
  background-color: #4CAF50 !important;
  color: white;
  border: none;
}

#fabMainMenu #helpButton:hover {
  background-color: #45a049;
}

/* 4/4/2026 Updating Radio Buttons */
.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.radio-option:hover {
  background: var(--blue-50);
}

/* hide native */
.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* custom circle */
/* custom circle — keep as-is, or make slightly rounded square if you prefer */
.radio-custom {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px; /* slightly rounded square instead of circle */
background: var(--blue-50);
  border: 2px solid var(--blue-border);
    display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* checkmark instead of dot */
.radio-custom::after {
  content: '';
  width: 5px;
  height: 11px; /* was 9px, increase this to make the right side longer */
  border-right: 2.5px solid white;
  border-bottom: 2.5px solid white;
  border-radius: 1px;
  opacity: 0;
  transform: rotate(45deg) scale(0.4) translate(-1px, -2px); /* adjust translate to re-center */
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.radio-option input[type="radio"]:checked + .radio-custom::after {
  opacity: 1;
  transform: rotate(45deg) scale(1) translate(-1px, -2px);
}
.radio-option input[type="radio"]:checked + .radio-custom {
  border-color: var(--brand-blue);
  background: var(--brand-blue); /* solid fill so white checkmark shows */
  box-shadow: 0 0 0 3px var(--blue-100);
}

.radio-option:hover .radio-custom {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--blue-100);
}

.radio-label {
  font-size: 0.95rem;
  color: var(--text);
  transition: color 0.15s ease;
}

.radio-option input[type="radio"]:checked ~ .radio-label {
  color: var(--brand-blue);
  font-weight: 600;
}

.highlight .radio-custom {
  animation: flash 1s infinite;
}

#closeKeypad,
#closeKeyboard,
.closeHelpModal,
.close-button,
.close,
#closeFlashcards {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  z-index: 100;

  width: 28px;
  height: 28px;
  border-radius: 6px;
  /* border: 1px solid rgba(220, 38, 38, 0.25); */
    border: 1px solid var(--border);
  /* background: var(--border); */
    background: #eef1f5;            /* cleaner border tone */
  color: #DC2626;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;

  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

#closeKeyboard {
  position: absolute;
  top: 1px;
  right: 1px;
  left: auto;
  z-index: 100;
}

#closeKeypad:hover,
#closeKeyboard:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.5);
}

#closeKeypad:active,
#closeKeyboard:active {
  transform: scale(0.92);
  background: rgba(220, 38, 38, 0.18);
}




#fabSettingsDrawer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#fabSettingsDrawer.hidden {
  display: none !important;
}

.settingsSubSection {
  background: var(--blue-50);
  border: 1px solid var(--blue-border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.settingsSubTitle {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
  opacity: 0.8;
  margin-bottom: 2px;
}

/* 4 way directional icon for draggable elements */
.drag-handle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;

  width: 28px;
  height: 28px;
  color: #4CAF50;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.5rem;
  line-height: 1;
  cursor: grab;
  user-select: none;

  transition: color 0.15s ease;
}

.drag-handle:hover {
  color: var(--brand-blue);
}

.drag-handle:active {
  cursor: grabbing;
}

/* override for a specific modal */
#qwertyKeyboard .drag-handle {
  top: 1px;
  left: 3px;
}


#calculator .drag-handle {
  position: absolute;
  top: 8;
  right: 48px; /* sits just left of the X button */
  left: auto;
  z-index: 100;
}

/* 4/24/2026 */
#closeInteractiveRealFlashcardModal .close {
  position: absolute;
  top: 1px;
  right: 4px; /* sits just left of the X button */
  z-index: 100;
}

                                                /* .header-title-Flashcards {
                                                flex: 1;
                                                text-align: left;
                                                font-size: 1rem; 
                                                } */


#nextBtn {
  background-color: #4CAF50;
  color: #fff;
  border: none;
}

#nextBtn:hover {
  background-color: #43A047;
}


#previousBtn {
  background-color: #4CAF50;
  color: #fff;
  border: none;
}

#previousBtn:hover {
  background-color: #43A047;
}


#shuffleBtn {
  background-color: var(--blue-100); /* rgba(6, 78, 184, 0.06) */
  color: var(--brand-blue);
  border: 1px solid var(--blue-border);
}

#shuffleBtn:hover {
  background-color: var(--blue-200);
}

.extra-help-toggle {
  background-color: #E8F0FC;   /* light blue */
  color: var(--brand-blue);
  border: 1px solid var(--blue-border);
}

.extra-help-toggle:hover {
  background-color: var(--blue-200);
}

                                                .flashcard-fab {
  position: static;
  bottom: auto;
  left: auto;
  background: #4CAF50;  /* was #45a049 */
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 1rem;      /* was 0.9rem */
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#cardFrontContent,
#cardBackContent {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 8px;
  padding-top: 80px; /* ← adjust to match height of any overlapping buttons */
}

.card-front {
  justify-content: flex-start; /* was: center */
}

#cardBackContent {
  justify-content: flex-start; /* was: center */
}

#cardFrontContent,
#cardBackContent {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 8px;
  padding-top: 12px; /* you can reduce this back down now */
}

#cardFrontContent,
#cardBackContent {
  /* existing scroll rules above, plus: */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Push content toward center on short cards only */
#cardFrontContent::before,
#cardBackContent::before {
  content: '';
  flex: 1;
}

#cardFrontContent::after,
#cardBackContent::after {
  content: '';
  flex: 1;
}

/* Small screens in landscape — shrink images to fit visible area - Shrinks images in Flashcards so they are fully visible on landscape mode for mobile */
@media (max-height: 500px) and (orientation: landscape) {

  /* Layout — side-by-side when there's an image */
  #cardFrontContent.has-front-image {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  #cardFrontContent.has-front-image .front-media {
    flex: 1;
    max-height: 45vh;
  }

  #cardFrontContent.has-front-image .front-media img {
    max-height: 45vh;
    max-width: 55vw;
  }

  /* Font sizes */
  #cardFrontContent.has-front-image .front-main {
    flex: 1;
    font-size: 1.1rem;
    text-align: left;
  }

  #cardFrontContent:not(.has-front-image) .front-main {
    font-size: 1.6rem;
  }

  .answer-main {
  font-size: clamp(1.1rem, 1.6vw + 0.5rem, 1.8rem);
  }
}

/* ===== FRONT ===== */
.front-main {
  font-size: clamp(1.1rem, 2vw + 0.5rem, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;       /* slightly tighter, feels modern */
  text-align: center;
  color: #0f172a;                 /* slate-950, richer than pure black */
  margin-bottom: 0.5rem;
}

/* ===== BACK — main answer ===== */
.answer-main {
  font-size: clamp(0.95rem, 1.3vw + 0.5rem, 1.6rem);
  font-weight: 400;
  line-height: 1.55;              /* slightly looser for readability */
  letter-spacing: 0em;
  text-align: center;
  color: #1e293b;                 /* slate-800, slightly softer than front */
  margin-bottom: 0.5rem;
}

/* ===== EXTRA HELP — explainer text ===== */
.answer-explainer {
  font-size: clamp(0.8rem, 1vw + 0.4rem, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: #475569;                 /* slate-600, clearly secondary */
  text-align: left;
  font-style: italic;
  margin-top: 0.25rem;
  border-left: 3px solid #cbd5e1; /* subtle left accent line */
  padding-left: 0.75rem;
}

/* ===== EXTRA HELP toggle button ===== */
.extra-help-toggle {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #3b82f6;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  cursor: pointer;
  align-self: center;
  width: fit-content;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  padding: 0.4rem 0.85rem;   /* ← slightly more vertical padding than 0.25rem */
  min-height: 32px;          /* ← consistent baseline height */
}

.extra-help-toggle:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

/* Open state — filled, more prominent */
#cardBackContent.has-extra-open .extra-help-toggle {
  background: #3b82f6;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);

  /* Fix iOS collapse */
  padding: 0.5rem 1.2rem;    /* ← more generous padding all around */
  min-height: 36px;          /* ← ensures it's always tall enough to feel tappable */
  align-self: center;
  margin: 0 auto;
  white-space: nowrap;
}
#cardBackContent.has-extra-open .extra-help-toggle:hover {
  background: #2563eb;
}

.extra-help {
  border-left: 3px solid transparent;
  transition: 
    max-height 0.35s ease,
    opacity 0.3s ease,
    border-color 0.2s ease,
    padding 0.3s ease;
  
  max-height: 0;
  opacity: 0;
  overflow: hidden;    /* hidden while collapsed — needed for animation */
  padding-top: 0;
  padding-bottom: 0;
}

.extra-help.open {
  max-height: 600px;
  opacity: 1;
  overflow: visible;   /* ← switch to visible once open so content isn't clipped */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#cardBackContent.has-extra-open .extra-help {
  border-left-color: #3b82f6;
  padding-left: 0.75rem;
}

#cardBackContent.has-extra-open .extra-help {
  border-left-color: #3b82f6;
  padding-left: 0.75rem;
}

.extra-help-toggle:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* 4/27/2026 Updates for Select buttons on Flashcards on Iphones */
/* Base select styling — overrides iOS native look */
#manualSelectFab,
#deckSelect,
#studyModeOverrideSelect,
#sessionLengthSelect,
#sideModeSelect,
#questionCountSelect {
  -webkit-appearance: none;   /* ← removes iOS native styling */
  appearance: none;
  
  background-color: var(--blue-50, #eff6ff);
  border: 1.5px solid var(--blue-border, #bfdbfe);
  border-radius: 8px;
  padding: 6px 32px 6px 10px;  /* right padding leaves room for the arrow */
  font-size: 0.9rem;
  font-family: 'Open Sans', system-ui, sans-serif;
  color: var(--brand-blue, #064EB8);
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;

  /* Custom dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23064EB8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#manualSelectFab:focus,
#deckSelect:focus,
#studyModeOverrideSelect:focus,
#sessionLengthSelect:focus, 
#sideModeSelect:focus,
#questionCountSelect:focus {
  outline: none;
  border-color: var(--brand-blue, #064EB8);
  box-shadow: 0 0 0 3px rgba(6, 78, 184, 0.12);
}

/* Dark mode */
.flashcards-dark #manualSelectFab,
.flashcards-dark #deckSelect,
.flashcards-dark #studyModeOverrideSelect,
.flashcards-dark #sessionLengthSelect,
.flashcards-dark #sideModeSelect,
.flashcards-dark #questionCountSelect {
  background-color: #111827;
  border-color: #1d4ed8;
  color: #e5e7eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e5e7eb' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===== DARK MODE ===== */
.flashcards-dark .front-main {
  color: #f1f5f9;
}

.flashcards-dark .answer-main {
  color: #e2e8f0;
}

.flashcards-dark .answer-explainer {
  color: #94a3b8;
  border-left-color: #334155;
}

.flashcards-dark .extra-help-toggle {
  background: #1e3a5f;
  border-color: #1d4ed8;
  color: #93c5fd;
}

.flashcards-dark .extra-help-toggle:hover {
  background: #1e40af;
}

mark.fc-search-highlight {
  background: #fef08a;        /* yellow highlight */
  color: #1e293b;
  border-radius: 2px;
  padding: 0 2px;
}

/* Dark mode */
.flashcards-dark mark.fc-search-highlight {
  background: #854d0e;        /* amber-brown in dark mode */
  color: #fef9c3;
}

/* Flashcards */
.flashcard-deck-modal {
  display: none;
  position: fixed;          /* ← fixed, not absolute */
  inset: 0;                 /* top/right/bottom/left all 0 */
  z-index: 100;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45); /* optional backdrop */
}

.flashcard-deck-modal.open {
  display: flex;            /* flex centers the inner box */
}

.flashcard-deck-box {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#startTimedSessionBtn {
  background: #16a34a;  /* green — matches your options button */
  color: #ffffff;
  transition: background 0.2s ease;
}

#startTimedSessionBtn:hover {
  background: #15803d;
}

#startTimedSessionBtn.timer-running {
  background: #dc2626;  /* red when running/stop */
}

#startTimedSessionBtn.timer-running:hover {
  background: #b91c1c;
}

/* 4/28/2026 Updating Practice Exam */
.settings-menu {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap between sections */
  background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 201;
}

/* sections inside settings menu inherit fabMenuSection styling */
.settings-menu .fabMenuSection {
  margin-bottom: 0; /* gap handles spacing instead */
}

.settings-menu .universalModalButton {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 8px;
  justify-content: flex-start;
  padding: 8px 12px;
  min-height: 44px;
  height: 44px;
}
/* override width so buttons fill the menu */
.settings-menu .universalModalButton {
  width: 100%;
}

/* audio controls inside settings menu */
#audioControlsPracticeExam {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid #e6edf5;
  border-bottom: 1px solid #e6edf5;
}

#audioControlsPracticeExam label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4f5f73;
}

#audioControlsPracticeExam input[type="range"] {
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--border);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

#audioControlsPracticeExam input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--brand-blue);
  cursor: pointer;
  border: 2px solid var(--bg-card);
}

#muteButtonPracticeExam {
  width: 100%;
}

#settingsMenu {
  display: none; /* hidden by default */
}

#settingsMenu.show {
  display: flex; /* shown when toggled */
  flex-direction: column;
  gap: 8px;
}

/* Practice Exam buttons */
.nav-button:active {
  transform: scale(0.97);
}

.nav-button:hover {
  filter: brightness(1.03);
}

/* Practice Exam UI 4/28/2026 */
.question-number {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.question-text {
  text-align: left; /* left aligned reads better than centered for questions */
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 20px;
  color: var(--text);
  line-height: 1.5;
}

.answer-option {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg-soft);
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 400; /* not bold — answers should be lighter than question */
  padding: 10px 14px;
  text-align: left;
  box-sizing: border-box;
  /* margin-bottom: 8px; */
  margin-bottom: 0px;
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  line-height: 1.4;
}

.answer-option:hover {
  background-color: var(--blue-50);
  border-color: var(--blue-border);
  color: var(--brand-blue);
}

.answer-option.selected {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
  font-weight: 600;
}

.answer-option.correct {
  background-color: #dcfce7;
  border-color: #4CAF50;
  color: #166534;
  font-weight: 600;
}

.answer-option.incorrect {
  background-color: #fee2e2;
  border-color: #DC2626;
  color: #991b1b;
  font-weight: 600;
}

/* header title — lighter, not bold */
.modal-drag-header h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  flex: 1;
}

/* initial hint line — italic and muted, clearly secondary */
/* initial hint — now bold */
.initial-hint {
  font-size: 0.9rem;
  font-weight: 600; /* was 400 */
  font-style: normal; /* remove italic if you want */
  color: var(--text);
  margin: 0 0 10px 0;
  line-height: 1.5;
}

/* clue list items — now lighter */
#cluesQuestionList li {
  font-size: 0.95rem;
  font-weight: 300; /* was 400 — lighter than the hint */
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 6px;
  padding-left: 4px;
}
/* clue list items — readable body text, not bold */
#cluesQuestionList {
  padding-left: 18px;
  margin: 0;
}


/* source line — very subtle */
.clue-source {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-light);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 10px;
  margin-bottom: 0;
  font-style: italic;
}

/* Past Exam Results */
/* #pastExamResultsModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  background-color: transparent;
  pointer-events: none;
}

#pastExamResultsModal.show {
  display: flex;
} */

/* #pastExamResultsModal .modal-contentPastExamResults {
  pointer-events: auto;
  position: relative;
  top: auto;
  left: auto;
} */

/* #pastExamResultsModal {
  display: none; 
}
 */
#pastExamResultsModal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 1000000;
}

.modal-contentPastExamResults {
  background-color: #fff;
  margin: 0;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 4px;
  position: relative;
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Detailed Result */
/* #detailedResultModal {
  display: none;
} */

#detailedResultModal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.modal-contentDetailed {
  background-color: #fff;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
  position: relative;
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Quiz End Modal */

#quizEndModal .modal-contentEndQuiz {
  pointer-events: auto;
}

/* wrapper for the entire practice exam area */
.studyToolSpace {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* flashcard container shrinks to make room */
.flashcard-container {
  flex: 1; /* takes remaining space */
  min-width: 0;
  transition: flex 0.3s ease;
}

/* right panel — hidden by default, takes up 0 width */
.practice-exam-right-panel {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  flex-shrink: 0;
}

/* when any panel is active, right panel expands */
.practice-exam-right-panel.active {
  width: 300px; /* adjust to match your current overview width */
}

/* individual panel content inside the right panel */
.practiceExamPanel {
  display: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
}

.practiceExamPanel.hidden {
  display: none;
}

.practiceExamPanel:not(.hidden) {
  display: block;
}

                  /* 3/13/2025 Overview Modal shows status of all practice exam questions ---------------------------------------------------------------------------------------------------------------------*/ 
.questionsOverviewModal {
  display: flex;
  align-items: center;
  justify-content: center;
    padding: 10px; /* small gap from the edge */
}


.modal-contentQuestionsOverview {
  background-color: #fff;
  margin: 0; /* remove the margin: 10% auto since flex handles centering */
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 4px;
  position: relative;
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
                    /* "X" close button style */
                    .closeQuestionOverviewModalX {
                      color: #aaa;
                      float: right;
                      font-size: 28px;
                      font-weight: bold;
                      cursor: pointer;
                    }
                    .closeQuestionOverviewModalX:hover {
                      color: #000;
                    }

                    /* Grid container for question numbers */
                    .overview-grid {
                      display: grid;
                      grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
                      gap: 8px;
                      margin-top: 16px;
                    }

                    /* The clickable question number buttons */
                    .question-overview-button {
                      cursor: pointer;
                      padding: 8px;
                      text-align: center;
                      border: 1px solid #ccc;
                      border-radius: 4px;
                    }

                    /* Color classes for different statuses */
                    .correct {
                      background-color: lightgreen;
                      color: #000;
                    }

                    .incorrect {
                      background-color: #f8d7da;
                      color: #000;
                    }

                    .skipped {
                      background-color: yellow;
                      color: #000;
                    }

                    .selectedNoFeedback {
                      /* Example: blue text if user selected but no immediate feedback */
                      background-color: #2f86eb; /* or your preferred color */
                      color: #fff;
                    }

                    /* If you want “not answered yet” to have a specific style: */
                    .unanswered {
                      background-color: #e2e3e5;
                      color: #333;
                    }

                /* 3/13/2025 End Modal for Practice Exam ---------------------------------------------------------------------------------------------------------------------*/ 

                  .modalEndQuiz {
                    display: none; /* hidden by default */
                    position: fixed;
                    z-index: 9999; /* ensure it’s above other content */
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                    background-color: rgba(0, 0, 0, 0.5); /* semi‐transparent overlay */
                  }


.modal-contentEndQuiz {
  background-color: #fff;
  margin: 0; /* remove margin: 10% auto — flex handles centering */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  position: relative;
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
                  .closeEndQuiz {
                    position: absolute;
                    top: 10px;
                    right: 15px;
                    font-size: 28px;
                    cursor: pointer;
                    color: red;
                  }

.modal-scrollable-body {
  touch-action: pan-y;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-drag-header {
  touch-action: none;
}

.quiz-end-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px 12px 12px;
  position: relative;
}

.quiz-end-checkmark {
  font-size: 1.2rem;
  color: #4CAF50;
  font-weight: 700;
}

.quiz-end-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #4CAF50;
  margin: 0;
  text-align: center;
}

.quiz-end-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  cursor: pointer;
  color: #DC2626;
  background: rgba(220, 38, 38, 0.06);
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.quiz-end-close:hover {
  background: rgba(220, 38, 38, 0.12);
}

.quiz-end-divider {
  height: 2px;
  background: #4CAF50;
  border-radius: 2px;
  margin: 0 0 14px 0;
  opacity: 0.3;
}

/* score summary block built by JS */
.quiz-end-message p {
  font-size: 0.88rem;
  color: var(--text-soft, #475569);
  line-height: 1.6;
  margin: 0 0 6px 0;
  padding: 0 4px;
}

/* the score % line specifically */
.quiz-end-message p:nth-child(2) {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text, #0F172A);
  text-align: center;
  margin: 8px 0;
}

/* correct/incorrect/skipped counts */
.quiz-end-message p:nth-child(3) {
  background: var(--bg-soft, #F1F5FA);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-soft, #475569);
  margin-bottom: 10px;
}

.quiz-end-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light, #64748B);
  margin: 14px 0 8px 0;
  padding: 0 4px;
}

/* wrong answers list */
.quiz-end-message h3 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text, #0F172A);
  margin: 14px 0 8px 0;
  padding: 0 4px;
}

.quiz-end-message ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quiz-end-message li {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-soft, #475569);
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-soft, #F1F5FA);
  margin-bottom: 6px;
}

.quiz-end-message li .incorrect {
  color: #DC2626;
  font-weight: 600;
}

.quiz-end-message li .correct {
  color: #16a34a;
  font-weight: 600;
}

.quiz-end-message li strong {
  color: var(--text, #0F172A);
  display: block;
  margin-bottom: 2px;
}

.quiz-end-improve-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text, #0F172A);
  margin: 0 0 6px 0;
}

.quiz-end-improve-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quiz-end-improve-list li {
  font-size: 0.78rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 20px;
  padding: 3px 10px;
  margin: 0;
}

.quiz-end-perfect {
  font-size: 0.88rem;
  font-weight: 600;
  color: #16a34a;
  text-align: center;
  padding: 8px;
  background: rgba(74, 222, 128, 0.1);
  border-radius: 8px;
  margin-bottom: 10px;
}

#detailedResultContainer {
  padding: 4px;
}

/* inherit quiz-end-message styles */
/* #detailedResultContainer p,
#detailedResultContainer h3,
#detailedResultContainer ul,
#detailedResultContainer li {
} */

#detailedResultContainer p {
  font-size: 0.88rem;
  color: var(--text-soft, #475569);
  line-height: 1.6;
  margin: 0 0 6px 0;
}

#detailedResultContainer p:nth-child(2) {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text, #0F172A);
  text-align: center;
  margin: 8px 0;
}

#detailedResultContainer p:nth-child(3) {
  background: var(--bg-soft, #F1F5FA);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-soft, #475569);
  margin-bottom: 10px;
}

#detailedResultContainer h3 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text, #0F172A);
  margin: 14px 0 8px 0;
}

#detailedResultContainer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#detailedResultContainer li {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-soft, #475569);
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-soft, #F1F5FA);
  margin-bottom: 6px;
}

#detailedResultContainer li strong {
  color: var(--text, #0F172A);
  display: block;
  margin-bottom: 4px;
}

#detailedResultContainer li em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--text-light, #64748B);
  display: block;
  margin-top: 2px;
}

#detailedResultContainer li .incorrect {
  color: #DC2626;
  font-weight: 600;
}

#detailedResultContainer li .correct {
  color: #16a34a;
  font-weight: 600;
}

.skipped-answer {
  color: #b45309;
  font-weight: 600;
}

#pastExamResultsContainer h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #0F172A);
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border, #E2E8F0);
}

#pastExamResultsContainer ol {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

#pastExamResultsContainer li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-soft, #F1F5FA);
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--text-soft, #475569);
}

#pastExamResultsContainer li strong {
  font-size: 0.78rem;
  color: var(--text-light, #64748B);
  font-weight: 600;
}

/* the score percentage inline */
#pastExamResultsContainer li > span,
#pastExamResultsContainer li {
  line-height: 1.5;
}

/* Details and Delete buttons inside each result */
#pastExamResultsContainer .viewDetailedResultBtn,
#pastExamResultsContainer .deleteResultBtn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  margin-right: 6px;
  margin-top: 4px;
}

#pastExamResultsContainer .viewDetailedResultBtn {
  background: var(--brand-blue, #064EB8);
  color: #fff;
}

#pastExamResultsContainer .viewDetailedResultBtn:hover {
  background: var(--brand-blue-soft, #0A5ED9);
}

#pastExamResultsContainer .deleteResultBtn {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
}

#pastExamResultsContainer .deleteResultBtn:hover {
  background: rgba(220, 38, 38, 0.15);
}

#clearAllPastResultsBtn {
  width: 100%;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #DC2626;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

#clearAllPastResultsBtn:hover {
  background: rgba(220, 38, 38, 0.12);
}

/* @media (max-width: 945px) { */
  /* right panel takes full width on mobile */
  /* .practice-exam-right-panel.active {
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 9999;
    background: #fff;
    overflow-y: auto;
  }
 */
  /* past results list items stack more compactly */
  /* #pastExamResultsContainer li {
    padding: 8px 10px;
    gap: 4px;
  }

  #pastExamResultsContainer li strong {
    font-size: 0.72rem;
  }

  #pastExamResultsContainer li span {
    font-size: 0.78rem;
  } */

  /* buttons side by side and full width on mobile */
  /* #pastExamResultsContainer li > div {
    display: flex;
    gap: 6px;
    width: 100%;
  }

  #pastExamResultsContainer .viewDetailedResultBtn,
  #pastExamResultsContainer .deleteResultBtn {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    font-size: 0.72rem;
  }

  #clearAllPastResultsBtn {
    padding: 10px;
    font-size: 0.8rem;
  } */

  /* quiz end and detailed result panels also go full width */
  /* .modal-contentEndQuiz,
  .modal-contentDetailed,
  .modal-contentPastExamResults,
  .modal-contentQuestionsOverview {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    max-height: 100vh;
  } */

  /* overview grid fits more buttons on narrow screens */
  /* .overview-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 5px;
  }

  .question-overview-button {
    padding: 6px 4px;
    font-size: 0.78rem;
  }
} */

.modal-drag-header .quiz-end-title {
  color: #4CAF50;
  font-size: 1rem;
}

/* Fix scrolling on ipones for CUSTOM eXAM IN Practice Exam */
#customExamModal {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

.modal-contentTestValuesCustomExam {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  max-height: 85vh; /* prevents it from being taller than the screen */
}

.keyword-list {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  max-height: 40vh;
}

.modal-contentTestValuesCustomExam {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden; /* parent doesn't scroll */
  -webkit-overflow-scrolling: touch;
}

.custom-exam-scroll-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 12px 4px;
  overscroll-behavior: contain; /* prevents page scroll bleeding on iOS */
}

.custom-exam-footer {
  flex-shrink: 0;
  padding: 10px 0 4px 0;
  border-top: 1px solid var(--border, #E2E8F0);
  background: #fff; /* matches modal background */
}

.custom-exam-footer #startCustomExamBtn {
  width: 100%;
}

/* landscape mode — reduce modal height so button stays visible */
@media (max-height: 500px) {
  .modal-contentTestValuesCustomExam {
    max-height: 95vh;
  }

  .keyword-list {
    max-height: 30vh;
  }
}

@media (max-width: 945px) {
  /* when clues panel is active, hide the clues button to make room for Next */
  .practice-exam-right-panel.active #cluesQuestionsButton,
  body.clues-open #cluesQuestionsButton {
    display: none;
  }
}

/* ── Fluid type scale for all right-panel modals ── */

/* Headers (h2 in modal-drag-header) */
.modal-drag-header h2,
.modal-drag-header .quiz-end-title {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

/* Body text — paragraphs */
.practiceExamPanel p,
.quiz-end-message p,
#detailedResultContainer p,
#pastExamResultsContainer li {
  font-size: clamp(0.78rem, 2vw, 0.92rem);
}

/* Score percentage — the big number */
.quiz-end-message p:nth-child(2),
#detailedResultContainer p:nth-child(2) {
  font-size: clamp(1.1rem, 4vw, 1.4rem);
}

/* Stats block — correct/incorrect/skipped */
.quiz-end-message p:nth-child(3),
#detailedResultContainer p:nth-child(3) {
  font-size: clamp(0.75rem, 1.8vw, 0.88rem);
}

/* Wrong answer list items */
.quiz-end-message li,
#detailedResultContainer li {
  font-size: clamp(0.75rem, 1.8vw, 0.85rem);
}

/* Section labels */
.quiz-end-section-label,
.quiz-end-improve-title,
#pastExamResultsContainer li strong {
  font-size: clamp(0.68rem, 1.6vw, 0.82rem);
}

/* Keyword pills */
.quiz-end-improve-list li {
  font-size: clamp(0.68rem, 1.6vw, 0.82rem);
}

/* Past results buttons */
#pastExamResultsContainer .viewDetailedResultBtn,
#pastExamResultsContainer .deleteResultBtn {
  font-size: clamp(0.68rem, 1.6vw, 0.78rem);
}

/* Overview grid buttons */
.question-overview-button {
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
  padding: clamp(4px, 1.2vw, 8px);
}

/* Clues modal list */
#cluesQuestionList li {
  font-size: clamp(0.78rem, 2vw, 0.9rem);
  line-height: 1.6;
}

/* Initial hint */
.initial-hint {
  font-size: clamp(0.8rem, 2vw, 0.95rem);
}

/* Right panel width scaling for tablet */
@media (min-width: 768px) and (max-width: 1200px) {
  .practice-exam-right-panel.active {
    width: clamp(260px, 30vw, 360px);
  }
}

/* Right panel wider on large screens */
@media (min-width: 1200px) {
  .practice-exam-right-panel.active {
    width: 380px;
  }
}

/* Tighter padding on small mobile */
@media (max-width: 480px) {
  .practiceExamPanel {
    padding: 8px;
  }

  .modal-drag-header {
    padding: 8px 10px;
  }

  .quiz-end-message li,
  #detailedResultContainer li {
    padding: 6px 8px;
  }

  #pastExamResultsContainer li {
    padding: 8px 10px;
  }
}