body {

            margin: 0;

            padding: 0;

            font-family: Arial, sans-serif;

            display: grid;

            grid-template-columns: 100px 1fr; /* Two columns: 100px wide for the vertical stick and the rest for content */

            grid-template-rows: auto 1fr auto; /* Three rows: auto for the header, 1fr for the content, and auto for the footer */

            min-height: 100vh;

            overflow-x : hidden;

        }

        .check-box

        {

            background-color : red;

        }

        .vertical-stick {

            width: 100px;

            position: sticky;

            background-color: #f0f0f0;

            overflow-y: scroll;

            grid-row: 1 / span 3; /* Span three rows to fill the entire height */

            overflow-x: hidden;

            overflow-y : auto;

        }
		
		
		/* When a question is answered, hide the bullet for its number tab */
		.vertical-stick .box.answered .dot {
		  list-style-type: none;   /* removes the bullet */
		  margin-left: 32px;       /* keeps the number aligned nicely */
		}


		/* The icon that replaces the bullet */
		.vertical-stick .box.correct .dot::before,
		.vertical-stick .box.incorrect .dot::before {
		}


		.status-icon {
  position: absolute;
  left: 13px;                     /* visually lines up with inside bullet */
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  margin: 0;
		}
		.vertical-stick .box {
		  position: relative;       /* anchor for absolute child */
}
		
			
		
		
.item-counter {
    font-family: American Typewriter, serif;
    font-size: 20px;
    padding : 2px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    width: 120px;        /* adjust as needed */
    min-width: 120px;
    max-width: 120px;
    display : inline-block;
    box-sizing: border-box;
    border : 1px solid white;
    height : 50px;
}

.item-counter .block-line {
    display: block;
    width: 100%;
}

        

        .box {

            width: 100px;

            height: 20px;m

            background-color: #fff;

            border: 1px solid #ddd;

            text-align: center;

            line-height: 20px; /* Adjust the line-height to vertically center the text */

            -webkit-user-select: none;

            -ms-user-select: none;

            -moz-user-select: none;

            display : flex;

        }



        .box.gray {

            background-color: #ccc;

        }
        
        
        /* ENABLE BOX HOVERING EFFECT */
        
        .box:hover{
    	
        	background-color : navy;
        	
        	color : white;
        }



        .stick-header {

            background: linear-gradient(to bottom, #386ba4, #0056b3);

            color: #fff;

            height: 70px;

            position: sticky;

            top: 0;

            z-index: 100;

            grid-column: 2; /* Place the header in the second column */

        }
        
        
            
         .nav-row {
            display: flex;
            align-items: center;
            gap: 3px;
            margin-left: 10%; /* adjust this 250*/
        }
               
                
                
        
        
        .nav-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: white;
            font-size: 20px;
            width: 110px;
            flex: 0 0 110px;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        

        .previous {
            display: flex;
            
            flex-direction: column;
            
            justify-content: center;
           
            align-items: center;
            
            height: 100%;
            
            margin-top: 0;
            
            transform: none;
           
            padding: 0 12px;

            -webkit-user-select : none;

            -ms-user-select : none;

            -moz-user-select : none;

            user-select : none;


        }

        .previous:hover{

            cursor : pointer;
            border-radius : 5%;
            background-color : #122c94;

        }

        .next{
            display: flex;
            
            flex-direction: column;
            
            justify-content: center;
           
            align-items: center;
            
            height: 100%;
            
            margin-top: 0;
            
            transform: none;
           
            padding: 0 12px;
            -webkit-user-select : none;

            -ms-user-select : none;

            -moz-user-select : none;

            -user-select : none;


        }
        

        .next:hover{

            cursor : pointer;
            border-radius : 5%;
            background-color : #122c94;

        }

        .stick-footer {

            background: linear-gradient(to top, #386ba4, #0056b3);

            color: #fff;

            height: 80px;

            position: sticky;

            bottom: 0;

            z-index: 100;

            grid-column: 2; /* Place the footer in the second column */

        }









        .large-container {
			padding : 0;
			background-color : white;
			display : flex;
			flex-direction : row;
			

			
		}

        .content {
			padding : 0;
			margin : 0;
			background-color : white;
			padding : 0;
			overflow-y : auto;
			height: calc(83vh);
			width : 100%;
            display: flex;
            flex-direction: column;
            grid-column: 2; /* Place the content in the second column */

        }



        .correct-answer {

            color: green;

        }



        button {

            width: 200px;

            background-color: blue;

            color: #fff;

            border: none;

            padding: 10px 20px;

            cursor: pointer;

            transition: background-color 0.3s;

        }



        button:hover {

            background-color: navy;

        }



        /* Modal styles */

    .time-up {
        display: none;
        position: fixed;
        z-index: 20000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    
        background: rgba(0, 0, 0, 0.6);
    
        justify-content: center;
        align-items: center;
    
        backdrop-filter: blur(2px); /* 🔥 subtle blur = premium feel */
    }
    
    
    
    .time-up .modal-content {
    background: white;
    padding: 25px 40px;
    border-radius: 10px;

    text-align: center;
    width: 380px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.4);

    animation: fadeInScale 0.25s ease;
}



.time-up .modal-question {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.time-up p {
    font-size: 14px;
    color: #666;
}



@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}





        #highlightable {

            user-select: text;

            position: relative;

        }



        .highlight {

            background-color: yellow;

            display: inline; /* Display highlights as inline elements */

            cursor: pointer; /* Change cursor to pointer on highlights for clickability */

        }



        .selected {

            background-color: #5590cc;

            color: white;

        }



        .gray.selected {

            background-color: #5590cc;

        }

        .radio-group

        {

            display : inline-block;

            width : auto;

        }

        .lab-tab

        {

            border : 1px solid black;

            border-top-left-radius: 10px; /* Adjust the radius as needed */

            border-top-right-radius: 10px; /* Adjust the radius as needed */

            padding : 5px 10px;

            background-color : #286ec4;

            color : white;

            margin-top : 5px;

            font-style : italic;

            -webkit-user-select : none;

            -ms-user-select : none;

            -moz-user-select : none;

            user-select : none;

        }

        .lab-tab:hover

        {

            cursor : pointer;

        }

        
    .modal-trigger {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4px 6px;       
        border-radius: 6px;
        margin-left: auto;      
        margin-right: 10px;
        transform: scale(1);     
    }
    
    
       .modal-trigger:hover {
        cursor : pointer;
        background-color : #122c94;
        border : 1px solid black;
    } 
    

        
        
        .modal-trigger img {
        width: 28px;
        height: 28px;
    
        }
        
        
        .footer-action {
    margin-left: auto;
    padding-right : 3px;
    padding-left : 3px;
    margin-right: 19px;
    margin-top: 15px;
    
}


.footer-action:hover {
    cursor: pointer;
    background-color: #122c94;   /* your theme blue */
    border-color: rgba(0,0,0,0.4);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);  /* 🔥 subtle elevation */
    transform: translateY(-1px);              /* 🔥 slight lift */
    border-radius : 5%;
}



.footer-action:active {
    transform: translateY(0);   /* press effect */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}




		/* Overlay */

		/* ----- Modal overlay ----- */
		.modal {
		  position: fixed;
		  inset: 0;                          /* top/right/bottom/left: 0 */
		  display: none;                     /* hidden by default */
		  background: rgba(0, 0, 0, 0.55);   /* gray backdrop */
		  z-index: 10000;                    /* above header/footer/etc. */
		}

		/* Your JS sets display:block; convert that to centering */
		.modal[style*="display: block"] {
		  display: grid !important;          /* center without changing JS */
		  place-items: center;               /* horizontal + vertical centering */
		  padding: 16px;                     /* safe gutter on tiny screens */
		}

		/* ----- Modal dialog ----- */
		.modal-content {
		  position: relative;                /* no inline offset, no absolute hack needed */
		  margin: 0 !important;              /* override any inline margins */
		  background: #fff;                  /* solid white */
		  color: #111;
		  width: clamp(320px, 40vw, 560px);  /* responsive width */
		  max-height: 80vh;
		  overflow-y: auto;
		  padding: 16px 20px;
		  border-radius: 12px;
		  box-shadow: 0 20px 40px rgba(0,0,0,.35);
		}

			/* Center ONLY the modal prompt (doesn't touch the main question) */
		.modal-question {
		  display: block;         /* or keep flex/grid if you want */
		  width: 100%;            /* <-- makes it span full modal */
		  text-align: center;     /* centers text horizontally */
		  margin: 0 0 12px;
		}



		/* Buttons side-by-side */
		.modal-content .options {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  gap: 12px;
		}
		.modal-content .btn-yes,
		.modal-content .btn-no {
		  flex: 1 1 0;
		  min-width: 120px;
		}
		
		
				
.modal-grade-table {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 11000;
  overflow-y: auto;

  flex-direction: column;      /* IMPORTANT */
  align-items: center;         /* centers grade-wrap */
  justify-content: flex-start; /* starts below header */
  padding: 0;
}


.modal-grade-table .w3-top {
  position: sticky !important;
  padding : 0;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 12000;
  flex-shrink: 0;
  background-color : white;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.modal-grade-table .w3-top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 8px;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.03),
    rgba(0,0,0,0)
  );

  pointer-events: none;
}




.modal-grade-table #myNavbar {
  height: 56px !important;
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}


.modal-grade-table #myNavbar .w3-wide {
  margin-left: 0 !important;
  margin-right: 28px;
  padding: 0 !important;

  height: 56px;
  display: flex;
  align-items: center;

  font-size: 15px;
  letter-spacing: 6px;
  line-height: 56px;
}

.modal-grade-table .grade-wrap {
  margin-top: 24px;
}


		.question{
			/*webkit-user-select : none;
			ms-user-select : none;
			moz-user-select : none;
			user-select : none;   */
			width : 800px;
		}
		
		
		.question p{
			margin-top : 0;
		}


     .explanation{
		 width : 800px;
	 }




/* keep the box shrink-to-fit */
.radio-group {
  display: inline-block;
  padding: 10px 15px;          
  border: 1px solid blue;
  box-sizing: content-box;     /* width we set is content width, not padding */
}


/* labels can wrap in the UI; we only force nowrap during measurement */
.radio-group .radio-label { white-space: normal; }





/* Give each option a left gutter for the icon */
.radio-option {
  position: relative;          /* room for the icon */
}

/* The little check / x icon */
.radio-option .ans-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;         /* never steal clicks */
}











/* Styles for the buttons */

.btn-yes,

.btn-no {

    margin: 10px;

    padding: 10px 20px;

    background-color: #007BFF;

    color: #fff;

    border: none;

    cursor: pointer;

    border-radius: 5px;

}



.btn-yes:hover,

.btn-no:hover {

    background-color: #0056b3;

}





  li {

    margin-left: 10px; /* Adjust the margin to control the spacing */

  }

  .number_tab

  {

      

  }

      /* CSS code to change the appearance of the checkbox when checked */

    #sample-checkbox:checked + .checkbox-label::before {

        background-color: white; /* Change the background color to white */

        border-color: #ccc; /* Change the border color if needed */

    }

    

/* Remove default checkbox styles and create a custom appearance */

/* Remove default checkbox styles and create a custom appearance */

#sample-checkbox {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    width: 17px;

    height: 17px;

    border: 1px solid #ccc; /* Add border styles if needed */

    background-color: white; /* Set background color to white */

    outline: none; /* Remove outline */

    /* Set custom checkmark image as background */

    background-image: none; /* Initially, no background image */

}



/* Create a custom checkbox appearance when checked */

#sample-checkbox:checked {

    background-image: url('https://premiermedprep.com/images/black_check.png'); /* Add checkmark image when checked */

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-position: center;

}

.lab-icon{
/*
    -webkit-user-select : none;

    -ms-user-select : none;

    -moz-user-select : none;

    -user-select : none;
    
    display : inline-block;
    
    background-color : black;
    
    
    border-radius : 5%;

    transform: scale(1.3);
    
    padding : 3px;
    
    width : 60%;
    
    */


}


.lab-icon,
.fullscreen-icon,
.calculator-icon,
.font-icon {
    -webkit-user-select : none;
    -ms-user-select : none;
    -moz-user-select : none;
    -user-select : none;
    display: flex;
    flex-direction: column;     /* icon above text */
    align-items: center;
    justify-content: center;
    /*background-color: black;   */
    border-radius: 5%;
    padding: 5px;
    width: auto;               /* 🔥 remove 60% */
    transform: scale(1.1);
}


.lab-icon:hover,
.calculator-icon:hover,
.fullscreen-icon:hover,
.font-icon:hover{
    cursor : pointer;
    background-color : #122c94;
}


.tool-container {
    margin-left: auto;
    display: flex;              /* 🔥 key change */
    align-items: center;        /* vertical alignment */
    gap: 10px;                  /* spacing between icons */

    padding: 5px 10px;
}



.radio-option input[type="radio"] {

    margin-left: 20px; /* Adjust the margin value as per your preference */

}



.lab-tab-selected {

    background-color: #27bebf;

    /* Add any other styles you want for the selected tab */

}



.lab-content {

    position: relative;

    background-color: #aacede;

    margin-left: auto;

    display: flex;

    flex-direction: column;

    justify-content: space-between; /* Vertically align the content */

    height: calc(40%); /* Adjust the height to fill the remaining space */

    overflow-y: scroll; /* Always display the vertical scrollbar */
    width : 550px;
}



/* Add this CSS to your styles.css file or in a <style> tag in your HTML */



/* Add this CSS to your styles.css file or in a <style> tag in your HTML */



.lab-content::-webkit-scrollbar {

  width: 8px; /* Set the width of the scrollbar */

  background-color: #aacede; /* Background color of the scrollbar track */

}



.lab-content::-webkit-scrollbar-thumb {

  background: linear-gradient(45deg, #007bff, #00bcd4); /* Gradient for the thumb */

  border-radius: 4px; /* Rounded corners for the thumb */

}



.lab-content::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(45deg, #0056b3, #0097c7); /* Gradient for the thumb on hover */

}



.lab-content::-webkit-scrollbar-track {

  display: none; /* Hide the horizontal scrollbar track */

}





.dot{
	list-style-type: disc; 
    display : visible;
    margin-left : 32px;   /* 32px original */
}










.lab-section {
  margin-left: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.lab-group {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 4px;
  color: #444;
}

.lab-item {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px dashed #ccc;
}

.lab-name {
  color: #222;
}

.lab-value {
  color: #555;
  text-align: right;
}





/* GRADE TABLE */

/* Wrap everything centered with a tasteful width */
.grade-wrap{
  max-width: 980px;
  margin: 26px auto 40px;
  padding: 0 16px; /* small side gutter */
}

/* Reusable card */
.card{
  background:#fff;
  border-radius:6px;
  box-shadow:0 2px 14px rgba(0,0,0,.12);
  padding:18px;
}

/* Top “hero” card: donut left, text right */
.grade-hero{
  display:flex;
  align-items:center;
  gap:36px;
  margin-bottom:18px; /* space before the table card */
}

.donut{ width:220px; height:220px; flex:0 0 220px; }
.hero-text{
  color:#111;
  line-height:1.9;
  font-size:15px;
}

/* Table styles (elegant grey header + zebra rows) */
.results-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  color:#333;
}
.results-table thead th{
  background:#e3e3e3;
  text-align:left;
  padding:12px 14px;
  font-weight:700;
  color:#555;
  border-bottom:1px solid #d9d9d9;
}
.results-table td{
  padding:12px 14px;
  border-bottom:1px solid #eee;
  vertical-align:middle;
}
.results-table tbody tr:nth-child(even){ background:#fafafa; }
.results-table td.ok{ color:#198754; font-weight:700; }
.results-table td.bad{ color:#d21f3c; font-weight:700; }
.results-table td.status{ width:36px; text-align:center; }
.results-table td.status img{ width:16px; height:16px; }

/* Responsive: stack donut over text on small screens */
@media (max-width: 720px){
  .grade-hero{ flex-direction:column; align-items:center; gap:14px; }
  .donut{ width:180px; height:180px; flex:0 0 180px; }
  .hero-text{ text-align:center; }
}



/* the left numbers column */
.vertical-stick {
  height: calc(100vh -  5px); /* full viewport height minus 50px buffer if you want a little gap */
  overflow-y: auto;           /* independent scroll */
  overscroll-behavior: contain;
  padding-right: 4px;
}


/* optional: slimmer scrollbar (Chromium/Edge) */
.vertical-stick::-webkit-scrollbar { width: 8px; }
.vertical-stick::-webkit-scrollbar-track { background: #eee; }
.vertical-stick::-webkit-scrollbar-thumb { background: #bbb; border-radius: 6px; }
.vertical-stick::-webkit-scrollbar-thumb:hover { background: #999; }



.exam-submitted .vertical-stick .box .dot{
	 list-style-type: none;
}







.timer{
     font-family: American Typewriter, serif;
    font-size: 20px;
    padding : 4px;
    border : 1px solid white;
    margin-left : 5px;
}


/*   CODE FOR CALCULATOR  */


.calculator-modal {
    display: none;
    position: fixed;
    top: 120px;
    left: 120px;
    width: 260px;
    background: #ffffff;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 9000;
    overflow: hidden;
    
}

.calculator-header {
    background: linear-gradient(to bottom, #386ba4, #0056b3);
    color: white;
    padding: 8px 10px;
    font-weight: bold;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calculator-close {
    width: auto;
    padding: 0 8px;
    background: transparent;
    color: white;
    font-size: 20px;
    border: none;
    cursor: pointer;
}

.calculator-body {
    padding: 12px;
}

#calcDisplay {
    width: 100%;
    height: 35px;
    font-size: 20px;
    text-align: right;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.calculator-buttons button {
    width: auto;
    padding: 10px;
    background: #f2f2f2;
    color: #111;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.calculator-buttons button:hover {
    background: #dbe8ff;
}

.calc-equals {
    grid-column: span 4;
    background: #0056b3 !important;
    color: white !important;
}


/* NOTEPAD STYLING  */

.notes-modal {
    display: none;
    position: fixed;
    right: 25px;
    bottom: 110px;
    width: 380px;
    height: 230px;          /* important */
    min-height: 230px;
    max-height: 230px;
    background: #d7deef;
    border: 2px solid #0056b3;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 9000;
    overflow: hidden;
    box-sizing: border-box;
}

.notes-header {
    background: linear-gradient(to bottom, #386ba4, #0056b3);
    color: white;
    padding: 8px 10px;
    font-weight: bold;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notes-close {
    width: auto;
    padding: 0 7px;
    background: white;
    color: #0056b3;
    border: 1px solid #0056b3;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}

.notes-body {
    padding: 12px;
}

#notesText {
    width: 100%;
    height: 105px;
    resize: none;
    box-sizing: border-box;
    font-size: 15px;
    padding: 8px;
    border: 1px solid #444;
    outline: none;
}

#notesText:focus {
    border-color: #0056b3;
    box-shadow: 0 0 4px rgba(0,86,179,0.5);
}

.notes-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.notes-actions button {
    width: auto;
    min-width: 120px;
    padding: 6px 12px;
    background: #ffffff;
    color: #000;
    border: 1px solid #0056b3;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.notes-actions button:hover {
    background: #122c94;
    color: white;
}


.modal-grade-table {
    background: linear-gradient(180deg, #0f1115 0%, #1a1d23 100%);
    min-height: 100vh;
    color: #e6e6e6;
}




#review-btn {
    background-color : grey;
    color: white;
    border: none;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    border-radius : 3%;
    transition: all 0.2s ease;
}

#review-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.5);
}


.card grade-hero{
    position : sticky;
}