/*@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --secondary-bg: #f2f2f2;
  --primary-color: #5434e2;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
  --secondary-bg: #1e1e1e;
  --primary-color: #9b59b6;
}
body {
  /*font-family: 'Rubik', sans-serif;*/
  font-family: 'Poppins', sans-serif;
	
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #5434e265;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5434e2;
}

.container {
  width: 95%;
  margin: 0 auto;
}

a, button, div, span, i, b, h1, h2, h3, h4, h5, h6, p, input, ul, li, select, label, textarea {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /*font-family: 'Rubik', sans-serif;*/
  font-family: 'Poppins', sans-serif;
}

button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* Safari */
}

button .loader {
  border: 2px solid transparent;
  border-radius: 50%;
  border-top: 2px solid white;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  -webkit-animation: spin 0.5s linear infinite;
  /* Safari */
  animation: spin 0.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  /*font-family: 'Rubik', sans-serif;*/
  font-family: 'Poppins', sans-serif;
}

input {
  -webkit-tap-highlight-color: transparent;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: transparent;
}

textarea {
  resize: none;
  /*font-family: 'Rubik', sans-serif;*/
  font-family: 'Poppins', sans-serif;
}
nav, .sidemenu, .mobileSidemenu, .examBox, main, .mobileFixedMenu, .expandBtn, .examQuestionFooter a, .themeToggleBtn, .infoDescription, .loadinSection {
  background-color: var(--secondary-bg) !important;
}

a, p, h1, h2, h3, h4, h5, h6, span {
  color: var(--text-color);
}
.themeToggleBtn, .navFullscreenBox, .FullscreenCloseBox{
	background-color: var(--secondary-bg) !important;
  color: var(--text-color) !important;
}
button, .loginSbtBtn {
  background-color: var(--primary-color);
  color: #fff;
}
main {
  overflow: visible;
  overflow-x: clip;
	width: 100%;
	min-height: 100vh;
}

.shimmer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  min-height: 100vh;
  z-index: 105;
  background: rgba(0, 0, 0, 0.295);
  display: none;
  overscroll-behavior: none;
  touch-action: none;
}

.dicarmelWatermark{
	position: fixed;
    content: '';
    width: 100%;
    height: 100vh;
    z-index: 0;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.1;
	background: url(../images/athena.png);
    background-size: 16px;
    transform: rotate(-45deg) scale(20);
    background-repeat: space;
    pointer-events: none !important;
}
.dicarmelWatermark img{
	width: 150px;
	object-fit: contain;
	display: none;
}

.startExamLoader{
	position: fixed;
	width: 400px;
	padding: 40px;
	background: white;
	border-radius: 15px;
	transform: translate(-50%, -50%);
	top: 45%;
	left: 50%;
	z-index: 110;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: 0.2s;
}
.startExamLoaderActive{
	top: 50%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: 0.2s;
}
@media(max-width: 480px){
	.startExamLoader{
		width: 90%;
		padding: 30px 20px;
	}
}
.startExamLoaderThumbnail{
	width: 100%;
	height:200px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.startExamLoaderThumbnail img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.startExamLoaderDetails{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.startExamLoaderDetails p{
	font-size: 14px;
	color: #686868;
	text-align: center;
}
.startExamLoaderDetails a{
    padding: 12px 35px;
    color: white !important;
    background: #5434e2;
    border-radius: 10px;
    outline: none;
    border: none;
    font-size: 16px;
	text-decoration: none;
    cursor: pointer;
	margin-top: 20px;
	display: none;
}

#loginCanvas {
  width: 100%;
  min-height: 100vh;
  background: #EFEFEF;
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 50px 5%;
}

@media (max-width: 480px) {
  #loginCanvas {
    padding: 30px 5%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

#loginCanvas .loginCanvasBuble {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 500px;
  left: 0;
}

@media (max-width: 480px) {
  #loginCanvas .loginCanvasBuble {
    width: 70%;
  }
}

#loginCanvas .loginCanvasBuble img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#loginCanvas .loginCanvasHead {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#loginCanvas .loginCanvasHead h2 {
  font-size: 2em;
  text-align: center;
  font-weight: 500;
    font-family: 'Spectral', serif;
}

@media (max-width: 480px) {
  #loginCanvas .loginCanvasHead h2 {
    font-size: 25px;
  }
}

#loginCanvas .loginCanvasHead .loginCanvasHeadThumbnail {
  width: 250px;
}

@media (max-width: 480px) {
  #loginCanvas .loginCanvasHead .loginCanvasHeadThumbnail {
    width: 100%;
  }
}

#loginCanvas .loginCanvasHead .loginCanvasHeadThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#loginCanvas .loginCanvasHead .loginCanvasHeadThumbnail video {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#loginCanvas .loginCanvasBox {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 20px;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form {
  width: 350px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 480px) {
  #loginCanvas .loginCanvasBox .loginCanvasHeadForm form {
    width: 100%;
  }
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 15px;
  position: relative;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup input {
  width: 100%;
  height: 45px;
  border: 2px solid white;
  outline: none;
  border-radius: 15px;
  padding: 15px;
  font-weight: 500;
  font-size: 14px;
  color: black;
}

@media (max-width: 480px) {
  #loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup input {
    height: 50px;
  }
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup input::-webkit-input-placeholder {
  color: black;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup input:-ms-input-placeholder {
  color: black;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup input::-ms-input-placeholder {
  color: black;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup input::placeholder {
  color: black;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup input:focus {
  border: 2px solid #5434e2;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup span {
  font-size: 12px;
  margin-top: 10px;
  color: black;
  opacity: 0.7;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup #btnToggle {
  position: absolute;
  background: none;
  outline: none;
  border: none;
  font-size: 14px;
  top: 50%;
  right: 5%;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .forgtPswd {
  width: 100%;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .forgtPswd a {
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  text-align: right;
  display: block;
  color: black;
  margin-top: 15px;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSbtBtn {
  width: 100%;
  height: 45px;
  background: #5434e2;
  color: white;
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 15px;
  cursor: pointer;
  outline: none;
  margin-top: 25px;
  border: none;
}

@media (max-width: 480px) {
  #loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSbtBtn {
    height: 50px;
  }
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSbtBtn:hover {
  -webkit-animation: pulse10 1s;
          animation: pulse10 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse10 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse10 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSecondaryBtn {
  width: 100%;
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSecondaryBtn p {
  font-size: 14px;
  text-align: center;
  color: #4b4b4b;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSecondaryBtn p a {
  text-decoration: none;
  color: #5434e2;
}

.version{
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: 50px;
    opacity: .6;
}
.updatedOn{
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
    opacity: .6;
}

.mobileSidemenu {
  position: fixed;
  display: none;
  width: 35%;
  top: 0;
  bottom: 0;
  height: auto;
  background: white;
  right: -110%;
  z-index: 110;
  overscroll-behavior: contain;
  -webkit-transition: right .3s ease;
  transition: right .3s ease;
}

@media (max-width: 1024px) {
  .mobileSidemenu {
    display: block;
  }
}

@media (max-width: 768px) {
  .mobileSidemenu {
    width: 45%;
  }
}

@media (max-width: 480px) {
  .mobileSidemenu {
    width: 90%;
  }
}

.mobileSidemenu .mobileSidemenuHead {
  width: 100%;
  padding: 20px;
  background: #5434e2;
}

.mobileSidemenu .mobileSidemenuHead .mobileSidemenuHeadProfile {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mobileSidemenu .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileThumbnail {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
}

.mobileSidemenu .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.mobileSidemenu .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileName {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 10px;
}

.mobileSidemenu .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileName h1 {
  font-size: 20px;
  font-weight: 400;
  height: 25px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: white;
}

.mobileSidemenu .mobileSidemenuBody {
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.mobileSidemenu .mobileSidemenuBody ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 20px 0px;
  border-top: 1px solid #eee;
  margin: 0;
}

.mobileSidemenu .mobileSidemenuBody ul:nth-child(1) {
  border-top: none;
}

.mobileSidemenu .mobileSidemenuBody ul li {
  list-style: none;
}

.mobileSidemenu .mobileSidemenuBody ul li a {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 20px;
  text-decoration: none;
  font-size: 16px;
}

.mobileSidemenu .mobileSidemenuBody ul li a:hover {
  background: #5434e20e;
}

.mobileSidemenu .mobileSidemenuBody ul li a span {
  color: #5434e2;
  margin-right: 15px;
}

.mobileSidemenu .mobileSidemenuBody ul li a p {
  color: black;
  font-size: 14px;
}

.mobileSidemenu .mobileSidemenuBody ul li .mobileSidemenuActive {
  background: #5434e20e;
}

.mobileSidemenu .mobileSidemenuBody ul li .mobileSidemenuActive:hover {
  background: #5434e20e;
}
.sidemenuFooter{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
}
.sidemenuFooter p{
    font-size: 12px;
    color: black;
    opacity: 0.4;
}

.mobileSidemenuActive {
  right: 0;
  -webkit-transition: right .3s ease;
  transition: right .3s ease;
}

nav {
  width: 100%;
  height: 60px;
  background: white;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.082);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.082);
}

nav .navLogo {
  float: left;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

nav .navLogo h1 {
  font-size: 25px;
  font-weight: 600;
}

nav .navLogo img {
  width: 90%;
  height: 90%;
  -o-object-fit: contain;
     object-fit: contain;
}

nav .navProfile {
  float: right;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 1024px) {
  nav .navProfile {
    display: none;
  }
}

nav .navProfile .navProfileBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  outline: none;
}

nav .navProfile .navProfileBox .navProfileThumbnail {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #5434e2;
  border: 2px solid #5434e2;
  overflow: hidden;
}

nav .navProfile .navProfileBox .navProfileThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

nav .navProfile .navProfileBox .navProfileName {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 10px;
}

nav .navProfile .navProfileBox .navProfileName h2 {
  font-size: 16px;
  font-weight: 500;
  height: 20px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: black;
}

nav .navProfile .navProfileBox .downIcon {
  font-size: 25px;
  margin-left: 5px;
  color: black;
}
nav .navBtnArea{
	display: flex;
	align-items: center;
	gap: 30px;
	float: right;
	margin-right: 50px;
	height: 60px;
}
nav .navBtnArea .navFullscreen{
	margin-right: 0;
	float: inherit;
}
nav .navBtnArea .themeToggleBtn{
	display: none !important;
	width:35px;
	height: 35px;
	border: none;
	outline: none;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	border-radius: 8px;
}
nav .navBar {
  display: none;
}

nav .navFullscreen{
  float: right;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
      margin-right: 50px;
          flex-direction: column;
}
nav .navFullscreen .navFullscreenBox{
    font-size: 16px;
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: white;
	padding: 0px 10px;
	height: 35px;
	border-radius: 8px;
  display: flex;
          justify-content: center;
	align-items: center;
	white-space: nowrap;
}
nav .navFullscreen .navFullscreenBox i{
    margin-right: 10px;
    font-size: 20px;
}

@media (max-width: 1024px) {
  nav > .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: 60px;
  }
  nav .navLogo {
    float: none;
    order: 1;
    margin-right: auto;
    height: 52px;
    max-width: 150px;
    flex-shrink: 1;
  }
  nav .navLogo img {
    width: auto;
    max-width: 100%;
    height: 42px;
    object-fit: contain;
  }
  nav .navBtnArea {
    float: none;
    order: 2;
    height: 60px;
    margin-right: 16px;
    gap: 12px;
    flex-shrink: 0;
  }
  nav > .container > .navFullscreen {
    float: none;
    order: 2;
    margin-right: 16px;
    flex-shrink: 0;
  }
  nav .navBar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: none;
    order: 3;
    flex-shrink: 0;
    height: 60px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  nav .navBar .navBarBox {
    width: 25px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  nav .navBar .navBarBox span {
    width: 100%;
    height: 2px;
    background: black;
    border-radius: 5px;
    margin-top: 2px;
  }
  nav .navBar .navBarBox span:nth-child(1) {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  nav .navLogo {
    max-width: 126px;
  }
  nav .navLogo img {
    height: 36px;
  }
  nav .navBtnArea {
    margin-right: 12px;
    gap: 8px;
  }
  nav > .container > .navFullscreen {
    margin-right: 12px;
  }
  nav .navFullscreen .navFullscreenBox {
    font-size: 13px;
    padding: 0px 9px;
    height: 34px;
  }
  nav .navFullscreen .navFullscreenBox i {
    margin-right: 5px;
    font-size: 15px;
  }
  nav .navBtnArea .themeToggleBtn {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}

.sidemenu {
  width: 16%;
  height: calc(100vh - 64px);
  position: fixed;
  left: 0;
	background :white;
	transition: .3s;
  top: 64px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.082);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.082);
  /*overflow-y: auto;*/
  z-index: 90;
}
.expandSidemenu{
    display: none;
}
@media (max-width: 1024px) {
    .expandSidemenu{
        display: none;
    }
}
@media (max-width: 1024px) {
  .sidemenu {
    display: none;
  }
}

.sidemenu ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 20px 0px;
  border-top: 1px solid #eee;
  margin: 0;
  overflow: hidden;
}

.sidemenu ul:nth-child(1) {
  border-top: none;
}

.sidemenu ul li {
  list-style: none;
}

.sidemenu ul li a {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 50px;
  text-decoration: none;
  font-size: 16px;
}

.sidemenu ul li a:hover {
  background: #5434e20e;
}

.sidemenu ul li a span {
  color: #5434e2;
  margin-right: 15px;
}

.sidemenu ul li a p {
  color: black;
  font-size: 14px;
}
.sidemenuFooter{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
}
.sidemenuFooter p{
    font-size: 12px;
    color: black;
    opacity: 0.4;
}

.sidemenu ul li .sidemenuActive {
  background: #5434e20e;
}

.sidemenu ul li .sidemenuActive:hover {
  background: #5434e20e;
}

.sidemenu .expandBtn{
	position: absolute;
	right: -25px;
	top: 47%;
	width:25px;
	cursor: pointer;
	height: 80px;
	background: #f2f5f4;
	border-radius: 0 10px 10px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	padding-right: 5px;
	transition: .2s;
}
.sidemenu .expandBtn:hover{
    background: #eee;
	transition: .2s;
}
.sidemenu .expandBtn i{
	transition: .2s;
}
.rotateExpandIcon{
	transform: rotate(180deg);
	transition: .2s;
}
@media (max-width: 480px) {
	.sidemenu .expandBtn{
		display: none;
	}
}

.sidemenuExpant{
	width: 60px !important;
	transition: .3s;
}

.sidemenuExpant ul li a{
    padding: 15px 25px;
}

.sidemenuExpant ul li a p{
    display: none;
}

.sidemenuExpant .sidemenuFooter{
    display: none;
}

.mobileFixedMenu {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: white;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.082);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.082);
  overflow: hidden;
  display: none;
}

@media (max-width: 1024px) {
  .mobileFixedMenu {
    display: block;
  }
}

.mobileFixedMenu ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0px 2.5%;
  margin: 0;
  width: 100%;
}

.mobileFixedMenu ul li {
  list-style: none;
  flex: 1;
  text-align: center;
}

.mobileFixedMenu ul li:empty,
.mobileFixedMenu ul li:not(:has(a)) {
  display: none !important;
}

.mobileFixedMenu ul li a {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px 0px;
  font-size: 16px;
  width: 100%;
}

.mobileFixedMenu ul li a span {
  color: #5434e2;
}

.mobileFixedMenu ul li a p {
  font-size: 12px;
  margin-top: 5px;
  color: black;
}

@media (max-width: 480px) {
  .mobileFixedMenu ul li a p {
    font-size: 10px;
  }
}

.mobileFixedMenu ul li .mobilemenuActive {
  border-top: 2px solid #5434e2;
}

.hr {
  width: 100%;
  height: 1px;
  background: #eee;
  margin-top: 50px;
}

.canvas {
  width: 82%;
	margin-left: auto;
  margin-top: 60px;
  padding-bottom: 50px;
  position: relative;
}

@media (max-width: 1024px) {
  .canvas {
    width: 100%;
    padding-bottom: 100px;
  }
}
.expandCanvas{
    width: 100%;
    margin-top: 20px;
}

@media (max-width: 1024px) {
    .expandCanvas{
        width: 100%;
    }
}
.flexCanvas{
	display: flex;
}
@media (max-width: 1024px) {
    .flexCanvas{
		flex-direction :column;
    }
}
.FullscreenCloseBox{
    position: absolute;
    right: 20px;
    top: 0px;
    font-size: 16px;
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: white;
    display: none;
	padding: 0px 10px;
	height: 35px;
	display: none;
	justify-content: center;
	align-items: center;
}
.FullscreenCloseBox i{
    margin-right: 10px;
    font-size: 20px;
}
.synario{
	width: calc(100% / 2);
	border: 1px solid #aaa;
	border-radius: 10px;
	margin: 20px 20px 20px 0px;
	display: flex;
	flex-direction: column;
	padding: 20px;
	height: calc(100vh - 60px);
	overflow-y: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
	position: sticky;
	top: 60px;
	margin-left: 10px;
	box-sizing: border-box;
}
@media (max-width: 1024px) {
    .synario{
		width :100%;
		padding-right :16px;
		border-right: 1px solid #aaa;
		padding-bottom :16px;
		border-bottom: 1px solid #aaa;
		height: auto;
		max-height: min(48vh, 380px);
		overflow-y: auto;
		overflow-x: auto;
		margin-left: 0px;
		margin-top: 10px;
    }
}
.synario .highlight{
	color: black !important;
}
.canvas .canvasMain {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .welcomeMessage {
  width: 100%;
  margin-top: 20px;
}

.canvas .canvasMain .welcomeMessage h1 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .canvas .canvasMain .welcomeMessage h1 {
    font-size: 20px;
  }
}

.canvas .canvasMain .welcomeMessage h2 {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .canvas .canvasMain .welcomeMessage h2 {
    font-size: 20px;
  }
}

.canvas .canvasMain .examBox {
  width: 100%;
  padding: 40px;
  margin-top: 30px;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.062);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.062);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examBox {
    padding: 20px;
  }
}
.canvas .canvasMain .examBox .examBoxBanner{
	width: 100%;
	background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	justify-content: space-between;
}
@media(max-width:480px){
	.canvas .canvasMain .examBox .examBoxBanner{
		padding: 10px;
	}
}
.canvas .canvasMain .examBox .examBoxBannerThumbnail{
	width: 300px;
	display: flex;
	flex-direction :column;
	position: relative;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBannerThumbnail{
		width :100%;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerThumbnail .examBoxBannerImg{
	background :#eaeaea36;
	width:100%;
	border-radius: 20px;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBannerThumbnail .examBoxBannerImg{
		height: 300px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerThumbnail .examBoxBannerImg img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerName{
	width: 100%;
	padding: 10px 20px;
	background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
	border-radius:10px;
	display: flex;
	flex-direction :column;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerName h3{
	font-size :18px;
	font-weight: 500;
	text-align: center;
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerName p{
	font-size :14px;
	font-weight: 400;
	text-align: center;
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails{
	width: calc(100% - 350px);
	display :flex;
	flex-direction :column;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails{
		width :100%;
		margin-top: 40px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails h2{
	color: white;
	font-size: 3em;
	font-weight: 500;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails h2{
		font-size :2.5em;
	}
}
@media(max-width:480px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails h2{
		font-size: 2em;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails p{
	color: white;
	font-size: 16px;
	font-weight: 300;
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails h3{
	color: white;
	font-size: 20px;
	font-weight: 500;
	margin-top: 30px;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails h3{
		font-size :18px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails ul{
	width :100%;
	display :flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails ul li{
	list-style: none;
	font-size: 18px;
	background: white;
	color: black;
	padding: 5px 20px;
	border-radius: 5px;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails ul li{
		font-size :16px;
		padding: 5px 15px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeBoxMain{
	width: 100%;
	display :flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top :30px;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeBoxMain{
		gap :10px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeBoxMain .guaranteeBox{
	padding: 20px 20px;
	width: 100%;
	background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
	border-radius: 10px;
	display :flex;
	justify-content :center;
	align-items: center;
	font-size: 24px;
	display :flex;
	flex-wrap: wrap;
	color: white;
	text-align: center;
	gap :10px;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeBoxMain .guaranteeBox{
		font-size :20px;
	}
}
@media(max-width:480px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeBoxMain .guaranteeBox{
		gap :5px;
		padding:10px;
		font-size: 20px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeBoxMain .guaranteeBox2{
	padding: 20px 20px;
	width: 100%;
	background: white;
	border-radius: 10px;
	display :flex;
	justify-content :center;
	align-items: center;
	font-size: 24px;
	display :flex;
	text-align: center;
	flex-wrap: wrap;
	color: green;
	gap :10px;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeBoxMain .guaranteeBox2{
		font-size :20px;
	}
}
@media(max-width:480px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeBoxMain .guaranteeBox2{
		gap :5px;
		padding:10px;
		font-size: 20px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeLogo{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top :30px;
	gap :20px;
}
@media(max-width:1024px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeLogo{
		gap: 10px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeLogo .guaranteeLogoBox{
	height: 40px;
	background: white;
	border-radius:5px;
	padding :10px;
}
@media(max-width:480px){
	.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeLogo .guaranteeLogoBox{
		height: 35px;
	}
}
.canvas .canvasMain .examBox .examBoxBanner .examBoxBannerDetails .guaranteeLogo .guaranteeLogoBox img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.canvas .canvasMain .examBox .examBoxThumbanil {
  width: 400px;
}

@media (max-width: 1024px) {
  .canvas .canvasMain .examBox .examBoxThumbanil {
    width: 350px;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examBox .examBoxThumbanil {
    width: 100%;
  }
}

.canvas .canvasMain .examBox .examBoxThumbanil img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.canvas .canvasMain .examBox .examBoxDetails {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 50px;
}

.canvas .canvasMain .examBox .examBoxDetails h1 {
  font-size: 2em;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 1024px) {
  .canvas .canvasMain .examBox .examBoxDetails h1 {
    font-size: 25px;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examBox .examBoxDetails h1 {
    font-size: 20px;
  }
}

.canvas .canvasMain .examBox .examBoxDetails p {
  text-align: center;
  width: 70%;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 10px;
  color: #8d8d8d;
  font-weight: 300;
}

@media (max-width: 1024px) {
  .canvas .canvasMain .examBox .examBoxDetails p {
    width: 100%;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examBox .examBoxDetails p {
    font-size: 12px;
  }
}

.canvas .canvasMain .examBox .examBoxDetails a {
  text-decoration: none;
  width: 200px;
  padding: 15px;
  border-radius: 10px;
  background: #5434e2;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 50px;
}

.canvas .canvasMain .examBox .examBoxDetails a:hover {
  -webkit-animation: pulse 1s;
          animation: pulse 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@media (max-width: 1024px) {
  .canvas .canvasMain .examBox .examBoxDetails a {
    margin-top: 40px;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examBox .examBoxDetails a {
    padding: 12px;
    margin-top: 30px;
  }
}

.canvas .canvasMain .breadCrumbs {
  width: 100%;
  margin-top: 20px;
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.canvas .canvasMain .breadCrumbs h1 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.5;
  color: black;
}

@media (max-width: 480px) {
  .canvas .canvasMain .breadCrumbs h1 {
    font-size: 20px;
  }
}

.canvas .canvasMain .breadCrumbs h1 a {
  text-decoration: none;
  color: black;
}
.canvas .canvasMain .breadCrumbs .breadCrumbsCol2{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}
.canvas .canvasMain .breadCrumbs .breadCrumbsCol2 .resumeTestBtn{
  padding: 10px 30px;
  background: #5434e2;
  color: white;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  transition: .3s;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.canvas .canvasMain .breadCrumbs .breadCrumbsCol2 .resumeTestBtn:hover{
  transition: .3s;
  opacity: .7;
}
.loaderBtn{
  border: 2px solid white;
  width: 15px;
  height:15px;
  border-radius: 50%;
  margin-left: 10px;
  border-top: 2px solid transparent;
  animation: roat 1s infinite linear;
  display: none;
}
@keyframes roat {
  100%{
    transform: rotate(1turn)
  }
}



.canvas .canvasMain .formWrapper .info {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 30px;
}

.canvas .canvasMain .formWrapper .info p {
  font-size: 14px;
  opacity: 0.7;
}

.canvas .canvasMain .formWrapper .info .infoBtn {
  margin-left: 5px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.canvas .canvasMain .formWrapper .info .infoBtn:hover .infoDescription {
  visibility: visible;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
}

.canvas .canvasMain .formWrapper .info .infoBtn i {
  color: #5434e2;
}

.canvas .canvasMain .formWrapper .info .infoBtn .infoDescription {
  position: absolute;
  background: white;
  z-index: 1;
  border-radius: 10px;
  padding: 15px;
  font-size: 14px;
	border: 1px solid #b5b5b5;
  width: 300px;
  line-height: 1.5;
  top: 100%;
  left: 0;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.082);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.082);
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
}

@media (max-width: 480px) {
  .canvas .canvasMain .formWrapper .info .infoBtn .infoDescription {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    top: inherit;
    z-index: 150;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 16px;
  }
}
.canvas .canvasMain .formWrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .formWrapper h1 {
  font-size: 20px;
  font-weight: 500;
  margin-top: 50px;
}

.canvas .canvasMain .formWrapper h1 .titleCheckbox {
  width: 100%;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.canvas .canvasMain .formWrapper h1 .titleCheckbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.canvas .canvasMain .formWrapper h1 .titleCheckbox label {
  position: relative;
  cursor: pointer;
}

.canvas .canvasMain .formWrapper h1 .titleCheckbox label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #E0E4E8;
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 9px;
}

.canvas .canvasMain .formWrapper h1 .titleCheckbox input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.canvas .canvasMain .formWrapper h1 .titleCheckbox input:checked + label:before {
  background: #5434e2;
  border: 2px solid #5434e2;
}

.canvas .canvasMain .formWrapper h1 .titleCheckbox input:checked + label:before {
  -webkit-animation: pulse26 1s;
          animation: pulse26 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse26 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse26 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.canvas .canvasMain .formWrapper h1 .titleCheckbox span {
  font-size: 10px;
  color: #5434e2;
  border: 1px solid #E0E4E8;
  border-radius: 50px;
  padding: 3px 6px;
  margin-left: 10px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4::after {
  content: '';
  height: 0;
  width: 23%;
}

@media (max-width: 1024px) {
  .canvas .canvasMain .formWrapper .formGroupMainCont4::after {
    width: 30%;
  }
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .dummyFormGroupCont4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 23%;
          flex: 0 0 23%;
}

@media (max-width: 1024px) {
  .canvas .canvasMain .formWrapper .formGroupMainCont4 .dummyFormGroupCont4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
  }
}

@media (max-width: 768px) {
  .canvas .canvasMain .formWrapper .formGroupMainCont4 .dummyFormGroupCont4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
  }
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 23%;
          flex: 0 0 23%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
  }
}

@media (max-width: 768px) {
  .canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
  }
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle {
  width: 100%;
  margin-top: 10px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 20px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--switch input {
  display: none;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--slider .fa-check {
  color: #FFFFFF;
  position: absolute;
  left: 15px;
  font-size: 16px;
  display: none;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--slider .fa-times {
  color: #FFFFFF;
  position: absolute;
  font-size: 16px;
  right: 15px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--slider {
  position: absolute;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #c4c4c4;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: -1px;
  bottom: -1px;
  border-radius: 50%;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.185);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.185);
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--switch input:checked + .--slider .fa-check {
  display: block;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--switch input:checked + .--slider .fa-times {
  display: none;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--switch input:checked + .--slider {
  background-color: #52b69a;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--switch input:focus + .--slider {
  -webkit-box-shadow: 0 0 1px #52b69a;
          box-shadow: 0 0 1px #52b69a;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formToggle .--switch input:checked + .--slider:before {
  -webkit-transform: translateX(25px);
  transform: translateX(25px);
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox {
  width: 100%;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox label {
  position: relative;
  cursor: pointer;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #E0E4E8;
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 9px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox input:checked + label:before {
  background: #5434e2;
  border: 2px solid #5434e2;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox input:disabled + label {
  opacity: 0.3;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox input:disabled ~ span {
  opacity: 0.3;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox input:checked + label:before {
  -webkit-animation: pulse25 1s;
          animation: pulse25 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse25 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse25 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formCheckbox span {
  font-size: 10px;
  color: #5434e2;
  border: 1px solid #E0E4E8;
  border-radius: 50px;
  padding: 3px 6px;
  margin-left: 10px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formGroupBtnArea {
  width: 100%;
  margin-top: 20px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formGroupBtnArea button {
  padding: 15px 30px;
  color: white;
  background: #5434e2;
  border-radius: 10px;
  outline: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formGroupBtnArea button {
    width: 100%;
  }
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formGroupBtnArea button:hover {
  -webkit-animation: pulse2 1s;
          animation: pulse2 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse2 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse2 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formGroupBtnArea button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupCont4 .formGroupBtnArea button:disabled:hover {
  -webkit-animation: none;
          animation: none;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox input {
  width: 100px;
  height: 40px;
  border: 2px solid #E0E4E8;
  border-radius: 10px;
  text-align: center;
  font-size: 20px;
  color: black;
  outline: none;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox input:focus {
  border: 2px solid #5434e2;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox input::-webkit-input-placeholder {
  color: black;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox input:-ms-input-placeholder {
  color: black;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox input::-ms-input-placeholder {
  color: black;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox input::placeholder {
  color: black;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox p {
  font-size: 14px;
  margin-left: 15px;
}

.canvas .canvasMain .formWrapper .formGroupMainCont4 .formGroupContAllowdBox span {
  font-size: 14px;
  color: white !important;
  border: 1px solid #5434e2;
  border-radius: 50px;
  background: #5434e2;
  padding: 4px 8px;
  margin-left: 10px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .formWrapper .mobleformGroupCol2 {
    -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 48% !important;
            flex: 0 0 48% !important;
  }
}

.canvas .canvasMain .examCanvas {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
	margin-right: 10px;
}

.canvas .canvasMain .examCanvas .examCanvasHead {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: linear-gradient(45deg, #336aff, #00c3ff);
  padding: 10px;
  margin-top: 20px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

@media (max-width: 768px) {
  .canvas .canvasMain .examCanvas .examCanvasHead {
    padding-top: 0;
  }
}

.canvas .canvasMain .examCanvas .examCanvasHead::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 20%;
  width: 70%;
  height: 500px;
  background: linear-gradient(45deg, #03c4ff, rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  /*-webkit-animation: wave1 2s;
          animation: wave1 2s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;*/
}

/*@-webkit-keyframes wave1 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes wave1 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}*/

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasHead::before {
    width: 300px;
    height: 300px;
    left: 30%;
    top: 60%;
  }
}

.canvas .canvasMain .examCanvas .examCanvasHead::after {
  position: absolute;
  content: '';
  top: -50%;
  right: -30%;
  width: 70%;
  height: 500px;
  background: linear-gradient(45deg, #30cfff, rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  /*-webkit-animation: wave2 1.5s;
          animation: wave2 1.5s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;*/
}

/*@-webkit-keyframes wave2 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes wave2 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}*/

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasHead::after {
    width: 250px;
    height: 250px;
    top: 30%;
    right: -35%;
  }
}

.canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /*-ms-flex-wrap: wrap;*/
  /*    flex-wrap: wrap;*/
}
@media(max-width:768px){
    .canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }
}

.canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox {
  /*-webkit-box-flex: 0;*/
  /*    -ms-flex: 0 0 24%;*/
  /*        flex: 0 0 24%;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (max-width: 768px) {
  .canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    margin-top: 20px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
  }
}
.canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox:nth-child(5){
    margin-top: 0px;
}
@media (max-width: 768px) {
    .canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox:nth-child(5){
    margin-top: 20px;
}
}

.canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox h4 {
  font-size: 14px;
  color: #fff !important;
  font-weight: 300;
}

.canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox p {
  font-size: 16px;
  margin-top: 5px;
  color: #fff !important;
}

.canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox p span {
  font-size: 12px;
  color: #fff !important;
}

.canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox #countdown {
  font-weight: 700;
  width: 100px;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.274);
          box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.274);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

.canvas .canvasMain .examCanvas .examCanvasHead .examCanvasHeadMain .examCanvasHeadBox #countdown::after {
  position: absolute;
  content: '';
  width: 15px;
  height: 100%;
  top: 0;
  left: -100%;
  background: rgba(255, 255, 255, 0.308);
  -webkit-animation: glowing 1000ms infinite;
          animation: glowing 1000ms infinite;
}

@-webkit-keyframes glowing {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes glowing {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody {
  width: 100%;
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
	position: relative;
	z-index: 0;
}


.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox {
  width: 100%;
  display: none;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .info {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 30px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .info p {
  font-size: 14px;
  opacity: 0.7;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .info .infoBtn {
  margin-left: 5px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .info .infoBtn:hover .infoDescription {
  visibility: visible;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .info .infoBtn i {
  color: #5434e2;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .info .infoBtn .infoDescription {
  position: absolute;
  background: white;
  z-index: 1;
  border-radius: 10px;
  padding: 15px;
  font-size: 14px;
  width: 300px;
  line-height: 1.5;
	border: 1px solid #b5b5b5;
  top: 100%;
  left: 0;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.082);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.082);
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .info .infoBtn .infoDescription {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    top: inherit;
    z-index: 150;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 16px;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn {
  padding: 12px 40px;
  color: white;
  background: #ff8733;
  border-radius: 10px;
  outline: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-left: 20px;
}


.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox h1 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox h1 {
    font-size: 18px;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox h1 input {
  border: none;
  border-bottom: 1px dashed black;
  outline: none;
  font-size: 25px;
  color: #5434e2;
  width: 200px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 10px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li {
  list-style: none;
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li .objectiveTypeBtn {
  width: 30px;
  position: relative;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li .objectiveTypeBtn input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li .objectiveTypeBtn label {
  position: relative;
  cursor: pointer;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li .objectiveTypeBtn label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #E0E4E8;
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 9px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li .objectiveTypeBtn input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          display: flex;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li .objectiveTypeBtn input:checked + label:before {
  background: #5434e2;
  border: 2px solid #5434e2;
  display: flex;
}
.correctAnsewr ~ label::before{
	background :#03a9f4 !important;
  border-color: #03a9f4 !important;
}
.correctAnsewr ~ label::after{
	content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          display: flex;
}

.correctAnsewrCheck ~ label::before{
  background: rgb(3, 196, 3) !important;
  border-color: rgb(3, 196, 3) !important;
}


.wrongAnsewrCheck ~ label{
  width: 24px !important;
  height: 24px !important;
  background: red;
  top: 0 !important;
  transform: rotate(0) !important;
  left: 0 !important;
  border: none !important;
  border-radius: 9px;
  display: flex;
	justify-content :center;
	align-items: center;
} 
 .wrongAnsewrCheck ~ label::after{
  width: 2px !important;
  height: 15px !important;
  background: white !important;
  transform: rotate(47deg) !important;
    border: none !important;
    border-radius: 2px !important;
    left: 10.5px !important;
    top: 5px !important;
}
.wrongAnsewrCheck ~ label::before{
 width: 2px !important;
 height: 15px !important;
 background: white !important;
 transform: rotate(-45deg) !important;
 padding: 0 !important;
 border: none !important;
 border-radius: 2px !important;
 margin-right: inherit !important;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li p {
  width: calc(100% - 35px);
  margin-top: 2px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

@media (max-width: 768px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li p {
    margin-top: 0;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul .rightAnswer .objectiveTypeBtn input:checked + label:before {
  background: green;
  border: 2px solid green;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul .rightAnswer p {
  color: green;
  font-weight: 400;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul .wronAnswer .objectiveTypeBtn input:checked + label:before {
  background: red;
  border: 2px solid red;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul .wronAnswer .objectiveTypeBtn input:checked + label:after {
  content: 'x';
  top: 0px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  color: white;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul .wronAnswer p {
  color: red;
  font-weight: 400;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 10px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li {
  list-style: none;
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li .multipleTypeBtn {
  width: 30px;
  position: relative;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li .multipleTypeBtn input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li .multipleTypeBtn label {
  position: relative;
  cursor: pointer;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li .multipleTypeBtn label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #E0E4E8;
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 9px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li .multipleTypeBtn input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li .multipleTypeBtn input:checked + label:before {
  background: #5434e2;
  border: 2px solid #5434e2;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li p {
  width: calc(100% - 35px);
  margin-top: 2px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

@media (max-width: 768px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li p {
    margin-top: 0;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul .rightAnswer .multipleTypeBtn input:checked + label:before {
  background: green;
  border: 2px solid green;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul .rightAnswer p {
  color: green;
  font-weight: 400;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul .wronAnswer .multipleTypeBtn input:checked + label:before {
  background: red;
  border: 2px solid red;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul .wronAnswer .multipleTypeBtn input:checked + label:after {
  content: 'x';
  top: 0.5px;
  left: 6.5px;
  width: 5px;
  height: 10px;
  border: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  color: white;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul .wronAnswer p {
  color: red;
  font-weight: 400;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 30px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .DragRoot {
  width: 100%;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .layout__wrapper {
  border-radius: 5px;
  width: 400px;
  border: 2px dashed #5434e265;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .layout__wrapper {
    width: 100%;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .app-bar {
  border-radius: 3px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .app-bar__title {
  color: var(--color-on-background);
  font-size: 1rem;
  font-weight: bold;
  padding: 1rem;
  text-align: center;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .list {
  list-style: none;
  margin: 0;
  min-height: 1.5rem;
  padding: 0;
  position: relative;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .card {
  background-color: #525d6d;
  cursor: pointer;
  color: white;
  padding: .66rem 1rem;
  position: relative;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 100;
  width: 100%;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .list__item + .list__item {
  margin-top: .5rem;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .holder {
  padding: 20px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .holder__title {
  background-color: #1da5f9;
  background-image: -webkit-gradient(linear, left top, right top, from(#028ce1), to(#6acbe0));
  background-image: linear-gradient(90deg, #028ce1 0%, #6acbe0 100%);
  border-radius: var(--border-radius-500);
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .holder--tint-2 .holder__title {
  background-image: -webkit-gradient(linear, left top, right top, from(#2fd4bd), to(#66e887));
  background-image: linear-gradient(90deg, #2fd4bd 0%, #66e887 100%);
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dragDropExam .dragDropExamMain .holder--tint-3 .holder__title {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(33%, #fe8080), to(#fea380));
  background-image: linear-gradient(90deg, #fe8080 33%, #fea380 100%);
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .examSbtBtn {
  width: 100%;
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .examSbtBtn button {
  padding: 12px 40px;
  color: white;
  background: #5434e2;
  border-radius: 10px;
  outline: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .examSbtBtn button {
    width: 100%;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .examSbtBtn button:hover {
  -webkit-animation: pulse2 1s;
          animation: pulse2 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@keyframes pulse2 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation {
  width: 100%;
  position: fixed;
  right: -100%;
  width: 40%;
  top: 60px;
  background: white;
  z-index: 10;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.096);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.096);
  padding: 20px;
  height: calc(100vh - 60px);
  transition: 0.2s;
}

@media(max-width:1024px){
    .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation {
        width: 60%;
        height: calc(100vh - 110px);
    }
}

@media(max-width:768px){
    .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation {
        width: 100%;
    }
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situationActive {
    right: 0;
    transition: 0.2s;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation h2 {
  font-size: 16px;
  font-weight: 500;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation{
    font-size: 25px;
    color: black;
    cursor: pointer;
    position: absolute;
    left: 530px;
    top: 20px;
    display: block;
}
@media(max-width:768px){
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation{
    display: block;
}
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-top: 30px;
  padding-right: 4px;
  padding-bottom: 8px;
  display: block;
  height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

@media(max-width:1024px){
    .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain {
        height: calc(100vh - 180px);
    }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain p {
  font-size: 16px;
  line-height: 1.7;
  margin-top: 20px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain .situationImage {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain .situationImage img {
  width: 48%;
  -o-object-fit: contain;
     object-fit: contain;
  margin-top: 30px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain .situationImage img {
    width: 100%;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation {
  width: 100%;
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.explanationBoxIdentify{
display: none;
gap: 20px;
margin-top: 20px;
align-items: center;
padding-bottom: 20px;

}
.explanationBoxIdentify .redBox{
	display:flex;
	gap:10px;
	align-items :center;
}
.explanationBoxIdentify .greenBox{
	display:flex;
	gap:10px;
	align-items :center;
}
.explanationBoxIdentify .blueBox{
	display:flex;
	gap:10px;
	align-items :center;
}
.explanationBoxIdentify .redBox button {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    border-style: solid;
    color: #d00606;
    border-color: red;
    background-color: red;
}
.explanationBoxIdentify .redBox p{
	font-size: 14px;
}

.explanationBoxIdentify .greenBox button {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    border-style: solid;
    color: #03c403;
    border-color: #03c403;
    background-color: #03c403;

}
.explanationBoxIdentify .greenBox p{
	font-size: 14px;
}

.explanationBoxIdentify .blueBox button {
      width: 13px;
    height: 13px;
    border-radius: 4px;
    border-style: solid;
    color: #03a9f4;
    border-color: #03a9f4;
    background-color: #03a9f4;
}
.explanationBoxIdentify .blueBox p{
	font-size: 14px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation {
  padding: 20px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation i {
  font-size: 30px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation h4 {
  font-size: 14px;
  font-weight: 500;
  margin-top: 5px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation p {
  font-size: 14px;
  margin-top: 15px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .wronAnswer {
  border: 2px solid red;
  background: rgba(255, 0, 0, 0.075);
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .wronAnswer i {
  color: red;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .wronAnswer h4 {
  color: red;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .rightAnswer {
  border: 2px solid green;
  background: rgba(0, 128, 0, 0.082);
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .rightAnswer i {
  color: green;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .rightAnswer h4 {
  color: green;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .timeSpend {
  margin-left: 20px;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.089);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.089);
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: break-word;
  margin-top: 24px;
  background: #ffffff;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.062);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.062);
  padding: 24px 26px;
  border-radius: 12px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody > h2:first-child {
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 12px 0;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody p:last-child {
  margin-bottom: 0;
}
@media(max-width:768px){
    .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody {
        margin-top: 16px;
        padding: 14px 14px;
        max-height: none;
    }
    .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody:not(:has(> div)) {
        max-height: min(62vh, 460px);
    }
    .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody > h2:first-child {
        font-size: 15px;
        padding-bottom: 10px;
        margin-bottom: 12px;
    }
    .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody img:not(.athenaScrollableWideImg){
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .blockCard1{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .blockCard2{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .blockCard3{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox{
  width: 100%;
  padding: 20px;
  height: 120px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  background: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox span{
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  z-index: -1;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox .draggable1{
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  background: #f3f4ff;
  border: 1px solid #aab1fe;
  cursor: move;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox .draggable2{
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  background: #f3f4ff;
  border: 1px solid #aab1fe;
  cursor: move;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox .draggable3{
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  background: #f3f4ff;
  border: 1px solid #aab1fe;
  cursor: move;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadGap{
  position: relative;
  height: 100%;
  width: clamp(24px, 5vw, 80px);
  flex: 0 1 clamp(24px, 5vw, 80px);
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadGap .tabDragDropBoxHeadGapLine1{
  width: 120px;
  height: 2px;
  background: #ccc;
  transform: rotate(35deg);
  position: relative;
  top: -35px;
  left: -10px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadGap .tabDragDropBoxHeadGapLine2{
  width: 120px;
  height: 2px;
  background: #ccc;
  transform: rotate(-35deg);
  position: relative;
  bottom: -35px;
  left: -10px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadGap .tabDragDropBoxHeadGapLine3{
  width: 120px;
  height: 2px;
  background: #ccc;
  transform: rotate(-35deg);
  position: relative;
  top: -35px;
  left: -10px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadGap .tabDragDropBoxHeadGapLine4{
  width: 120px;
  height: 2px;
  background: #ccc;
  transform: rotate(35deg);
  position: relative;
  bottom: -35px;
  left: -10px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;
  align-items: flex-start;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol{
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  background: white;
  margin-top: 30px;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #F5EDCE;
  position: relative;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol .blockCard1{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol .blockCard2{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol .blockCard3{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}
@media(max-width:1024px){
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol{
    flex: 0 0 48%;
  }
}
@media(max-width:480px){
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol{
    flex: 100%;
  }
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol h2{
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol .dragArea{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  height: 100%;
  min-height: 50px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol .dragArea p{
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  background: #f3f4ff;
  border: 1px solid #aab1fe;
  cursor: move;
}
.dragging{
  opacity: .5;
  background: #BAD7E9 !important;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable{
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
  box-sizing: border-box;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable::-webkit-scrollbar{
  height: 6px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable::-webkit-scrollbar-track{
  background: #f1f5f9;
  border-radius: 999px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable::-webkit-scrollbar-thumb{
  background: #94a3b8;
  border-radius: 999px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table{
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table th{
  background: #c5664a;
  border: 1px solid #ccc;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  color: white;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-align: center;
  vertical-align: middle;
}
@media(max-width:768px){
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table th{
    font-size: 13px;
    padding: 10px 14px;
  }
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table th:nth-of-type(1){
  text-align: left;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td{
  border: 1px solid #ccc;
  padding: 10px 18px;
  font-size: 14px;
  vertical-align: middle;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td:not(:nth-of-type(1)){
  white-space: nowrap;
  text-align: center;
  min-width: 84px;
}
@media(max-width:768px){
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td{
    font-size: 13px;
    padding: 10px 14px;
  }
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td:nth-of-type(1){
  text-align: left;
  min-width: 210px;
  white-space: normal;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.45;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio{
  display: flex;
  justify-content: center;
  align-items: center;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio input{
  display: none;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio label{
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #FF8B13;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio label::after{
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  background: #FF8B13;
  border-radius: 50%;
  display: none;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio input:checked ~ label::after{
  display: block;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox{
  display: flex;
  justify-content: center;
  align-items: center;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox input{
  display: none;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox label{
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #FF8B13;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox label::after{
  position: absolute;
  content: '';
  width: 10px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
  display: none;
  top: 3px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox input:checked ~ label{
  background: #FF8B13;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox input:checked ~ label::after{
  display: block;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentence{
  width: 100%;
  margin-top: 50px;
  border: 1px solid #A084E8;
  padding: 20px;
  border-radius: 10px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentence p{
  font-size: 16px;
  line-height: 2.2;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentence .prDiv{
  font-size: 16px;
  line-height: 2.2;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentence .prDiv p{
  display: block;
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
  cursor: move;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentence p select{
  border: 1px solid #aaa;
  height: 35px;
  padding: 0px 10px;
  border-radius: 5px;
  outline: none;
  margin: 0px 5px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentence .prDiv .droptextArea{
  background: #9df0f6;
  height: auto;
  min-height: 36px;
  min-width: 180px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
  top: 0;
  padding: 6px 12px;
  margin: 4px 4px;
  border-radius: 6px;
  box-sizing: border-box;
  line-height: 1.35;
}
.dropDownBetweenSentenceDargArea{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentenceOptions{
  width: 400px;
  display: flex;
  flex-direction: column;
  background: white;
  margin-top: 30px;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #F5EDCE;
}
@media(max-width:480px){
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentenceOptions{
    width: 100%;
  }
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentenceOptions h2{
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentenceOptions .dropDownBetweenSentenceOptionsDragArea{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  height: 100%;
  min-height: 50px;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentenceOptions .dropDownBetweenSentenceOptionsDragArea p{
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  background: #f3f4ff;
  border: 1px solid #aab1fe;
  cursor: move;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox  .matchTheFollowing{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  margin-top: 50px;
}
@media(max-width:480px){
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox  .matchTheFollowing{
    gap: 20px;
  }
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox  .matchTheFollowing .matchTheFollowingBox{
  width: 400px;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 10px;
  border: 2px solid #F5EDCE;
}
@media(max-width:480px){
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox  .matchTheFollowing .matchTheFollowingBox{
    width: 100%;
  }
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox  .matchTheFollowing .matchTheFollowingBox .matchTheFollowingBoxHead{
  width: 100%;
  padding: 15px 20px;
  border-bottom: 2px solid #F5EDCE;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox  .matchTheFollowing .matchTheFollowingBox .matchTheFollowingBoxBody{
  width: 100%;
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox  .matchTheFollowing .matchTheFollowingBox .matchTheFollowingBoxBody p{
      width: 100%;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    background: #f3f4ff;
    border: 1px solid #aab1fe;
    cursor: move;
}
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox  .matchTheFollowing .matchTheFollowingBox .matchTheFollowingBoxBody .dragging{
  transform: scale(1.1);
}








.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 50px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter a {
  background: #eff3f7;
  padding: 10px 20px;
  margin-left: 10px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  color: black;
  text-align: center;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter a {
    font-size: 12.5px;
    margin-left: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
    padding: 9px 14px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter a:nth-child(1) i {
    margin-left: 0;
    margin-right: 5px;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter a i {
  color: #5434e2;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter a i {
    margin-left: 5px;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter .nextExamActive {
  background: #5434e2;
  color: white;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter .nextExamActive i {
  color: white;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionFooter .nextExamActive:hover {
  -webkit-animation: pulse6 1s;
          animation: pulse6 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse6 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse6 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm {
  width: 100%;
  margin-top: 50px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formTextareaGroup {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 20px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formTextareaGroup label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #686868;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formTextareaGroup textarea {
  width: 100%;
  margin-top: 5px;
  border-radius: 5px;
  height: 45px;
  padding: 10px;
  border: 1px solid #686868;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  height: 100px;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formTextareaGroup textarea:focus {
  border: 1px solid #5434e2;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formBtnArea {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formBtnArea {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formBtnArea button {
  padding: 10px 30px;
  background: #5434e2;
  color: white;
  border: none;
  outline: none;
  font-size: 14px;
  border-radius: 10px;
  font-weight: 300;
  cursor: pointer;
  min-width: 150px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formBtnArea button {
    width: 95%;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 400;
    position: fixed;
    bottom: 10px;
    z-index: 90;
    left: 2.5%;
  }
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .addSuggestionForm .formBtnArea button:hover {
  -webkit-animation: pulse30 1s;
          animation: pulse30 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@keyframes pulse30 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.canvas .canvasMain .examResultHead {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /*background: linear-gradient(45deg, #336aff, #00c3ff);*/
  /*padding: 20px;*/
  margin-top: 20px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

@media (max-width: 768px) {
  .canvas .canvasMain .examResultHead {
    padding-top: 0;
  }
}

.canvas .canvasMain .examResultHead::before {
  position: absolute;
  /*content: '';*/
  top: 50%;
  left: 20%;
  width: 70%;
  height: 500px;
  background: linear-gradient(45deg, #03c4ff, rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave3 2s;
          animation: wave3 2s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes wave3 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes wave3 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examResultHead::before {
    width: 300px;
    height: 300px;
    left: 30%;
    top: 60%;
  }
}

.canvas .canvasMain .examResultHead::after {
  position: absolute;
  /*content: '';*/
  top: -50%;
  right: -30%;
  width: 70%;
  height: 500px;
  background: linear-gradient(45deg, #30cfff, rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave4 1.5s;
          animation: wave4 1.5s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes wave4 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes wave4 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examResultHead::after {
    width: 250px;
    height: 250px;
    top: 30%;
    right: -35%;
  }
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	position: relative;
}
.canvas .canvasMain .examResultHead .examCanvasHeadMain::after{
	content: '';
	height: 0;
	width: 30%;
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  display: -webkit-box;
  display: -ms-flexbox;
	padding: 30px 20px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.048);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.048);
	border-radius: 10px;
	overflow: hidden;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 0;
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 20%;
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.103), rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave70 2s;
          animation: wave70 2s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@keyframes wave70 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox::before {
    width: 100px;
    height: 100px;
    left: 30%;
    top: 60%;
  }
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox::after {
  position: absolute;
  content: '';
  top: -50%;
  right: -30%;
  width: 250px;
  height: 250px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave8 1.5s;
          animation: wave8 1.5s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@keyframes wave80 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox::after {
    width: 150px;
    height: 150px;
    top: 30%;
    right: -35%;
  }
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox:nth-child(1) {
  background: linear-gradient(45deg, #1984ff, #0168c9);
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox:nth-child(2) {
  background: linear-gradient(45deg, #ffa319, #c95b01);
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox:nth-child(3) {
  background: linear-gradient(45deg, #20a000, #06be0f);
}

@media (max-width: 768px) {
  .canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    margin-top: 20px;
	  padding: 20px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox h4 {
  font-size: 16px;
  color: #fff;
  font-weight: 300;
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox p {
  font-size: 20px;
  margin-top: 5px;
  color: #fff;
}

.canvas .canvasMain .examResultHead .examCanvasHeadMain .examResultHeadBox p span {
  font-size: 12px;
}

.canvas .canvasMain .examResultList {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 20px;
  position: relative;
}

@media (max-width: 480px) {
  .canvas .canvasMain .examResultList {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
    margin-top: 30px;
  }
}

.canvas .canvasMain .examResultList::after {
  content: '';
  height: 0;
  width: 30%;
}

.canvas .canvasMain .examResultList .examResultListBox {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  border-radius:10px;
  background: white;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.055);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.055);
  margin-top: 20px;
	display: flex; 
	align-items: center;
	overflow: hidden;
}

@media (max-width: 768px) {
  .canvas .canvasMain .examResultList .examResultListBox {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .examResultList .examResultListBox {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
    margin-top: 10px;
  }
}

.canvas .canvasMain .examResultList .examResultListBox ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 20px;
}

.canvas .canvasMain .examResultList .examResultListBox ul li {
  list-style: none;
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 48%;
          flex: 0 0 48%;
}

.canvas .canvasMain .examResultList .examResultListBox ul li:nth-child(1) {
  margin-top: 0;
}

.canvas .canvasMain .examResultList .examResultListBox ul li:nth-child(2) {
  margin-top: 0;
}

.canvas .canvasMain .examResultList .examResultListBox ul li span {
  font-size: 12px;
  opacity: 0.7;
}

.canvas .canvasMain .examResultList .examResultListBox ul li p {
  font-size: 14px;
  margin-top: 5px;
}

.canvas .canvasMain .examResultList .examResultListBox .examResultIcon{
	padding: 20px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	height: 100%;
	font-size: 20px;
} 

.canvas .canvasMain .examResultList .examResultListBox .rightAnswerIcon{
	background: green;
}

.canvas .canvasMain .examResultList .examResultListBox .wrongAnswerIcon{
	background: red;
}
/*.canvas .canvasMain .examResultList .wronAnswer {
  border-left: 2px solid red;
}

.canvas .canvasMain .examResultList .rightAnswer {
  border-left: 2px solid green;
}*/

.canvas .canvasMain .previousTest {
  width: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 20px;
  position: relative;
}

@media (max-width: 480px) {
  .canvas .canvasMain .previousTest {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
    margin-top: 30px;
  }
}

.canvas .canvasMain .previousTest::after {
  content: '';
  height: 0;
  width: 30%;
}

.canvas .canvasMain .previousTest .previousTestBox {
  -webkit-box-flex: 0 0 30%;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  border-radius: 10px;
  background: white;
  -webkit-box-shadow: -7px 11px 17px 1px rgb(0 0 0 / 11%);
-moz-box-shadow: -7px 11px 17px 1px rgb(0 0 0 / 11%);
box-shadow: -7px 11px 17px 1px rgb(0 0 0 / 11%);
	transition: .3s;
  padding: 20px;
  margin-top: 20px;
  text-decoration: none;
  border: 1px solid #5434e265;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
          position: relative;
  /*-ms-flex-wrap: wrap;
      flex-wrap: wrap;*/
}

@media (max-width: 768px) {
  .canvas .canvasMain .previousTest .previousTestBox {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .previousTest .previousTestBox {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
    margin-top: 10px;
  }
}

.canvas .canvasMain .previousTest .previousTestBox:hover {
  border: 1px solid #5434e265;
  background: #5434e209;
	box-shadow: none;
	transition: .3s;
}

.canvas .canvasMain .previousTest .previousTestBox .previousTestBoxLink{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.canvas .canvasMain .previousTest .previousTestBox .previousTestBoxresumeTestBtn{
  padding: 4px 12px;
  background: #5434e2;
  color: white;
  font-size: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: .3s;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 10px;
}
.canvas .canvasMain .previousTest .previousTestBox .previousTestBoxresumeTestBtn:hover{
  transition: .3s;
  opacity: .7;
}


.canvas .canvasMain .previousTest .previousTestBox ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.canvas .canvasMain .previousTest .previousTestBox .previousTestBoxColumn1{
	flex: 0 0 65%;
	flex-direction: column;
}
.canvas .canvasMain .previousTest .previousTestBox .previousTestBoxColumn2{
	flex: 0 0 30%;
  display: flex;
	justify-content: center;
	align-items: center;
}
.canvas .canvasMain .previousTest .previousTestBox .previousTestBoxColumn2 li {
	flex-direction: column;
}
.canvas .canvasMain .previousTest .previousTestBox .previousTestBoxColumn2 li p{
	font-size: 1.8em;
}

.canvas .canvasMain .previousTest .previousTestBox ul li {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
	align-items: center;
    margin-top: 15px;
}

/*@media (max-width: 768px) {
  .canvas .canvasMain .previousTest .previousTestBox ul li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
  }
}*/

.canvas .canvasMain .previousTest .previousTestBox ul li span {
  font-size: 12px;
  opacity: 0.7;
  color: black;
}

.canvas .canvasMain .previousTest .previousTestBox ul li p {
  font-size: 14px;
  color: black;
  margin-left: 10px;
}

.canvas .canvasMain .previousTest .previousTestBox ul li .TopScore {
  color: green;
  font-weight: 500;
}

.canvas .canvasMain .previousTest .previousTestBox ul li .AverageScore {
  color: #dfb600;
  font-weight: 500;
}

.canvas .canvasMain .previousTest .previousTestBox ul li .LowScore {
  color: red;
  font-weight: 500;
}

.canvas .canvasMain .facultyNotes {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .facultyNotes .facultyNotesBox {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  border-radius: 10px;
  background: white;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.055);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.055);
  padding: 20px;
  margin-top: 20px;
  text-decoration: none;
  border: 1px solid white;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 1px solid white;
}

.canvas .canvasMain .facultyNotes .facultyNotesBox:hover {
  border: 1px solid #5434e265;
  background: #5434e209;
}

.canvas .canvasMain .facultyNotes .facultyNotesBox span {
  font-size: 12px;
  color: black;
  opacity: 0.7;
  margin-top: 20px;
}

.canvas .canvasMain .facultyNotes .facultyNotesBox span:nth-child(1) {
  margin-top: 0;
}

.canvas .canvasMain .facultyNotes .facultyNotesBox p {
  font-size: 16px;
  color: black;
  margin-top: 5px;
  line-height: 1.5;
}

.canvas .canvasMain .facultyNotes .facultyNotesBox h6 {
  font-size: 12px;
  color: black;
  font-weight: 400;
  margin-top: 5px;
}

.canvas .canvasMain .innerFacultyNotes {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 50px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .innerFacultyNotes {
    margin-top: 30px;
  }
}

.canvas .canvasMain .innerFacultyNotes h1 {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .canvas .canvasMain .innerFacultyNotes h1 {
    font-size: 20px;
  }
}

.canvas .canvasMain .innerFacultyNotes h1 input {
  border: none;
  border-bottom: 1px dashed black;
  outline: none;
  font-size: 25px;
  color: #5434e2;
  width: 200px;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 10px;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li {
  list-style: none;
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li .objectiveTypeBtn {
  width: 30px;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li .objectiveTypeBtn input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li .objectiveTypeBtn label {
  position: relative;
  cursor: pointer;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li .objectiveTypeBtn label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #E0E4E8;
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 9px;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li .objectiveTypeBtn input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li .objectiveTypeBtn input:checked + label:before {
  background: #5434e2;
  border: 2px solid #5434e2;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li p {
  width: calc(100% - 35px);
  margin-top: 2px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul li p {
    margin-top: 0;
  }
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul .rightAnswer .objectiveTypeBtn input:checked + label:before {
  background: green;
  border: 2px solid green;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul .rightAnswer p {
  color: green;
  font-weight: 400;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul .wronAnswer .objectiveTypeBtn input:checked + label:before {
  background: red;
  border: 2px solid red;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul  .wronAnswer .objectiveTypeBtn input:checked + label:after {
  content: 'x';
  top: 0px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  color: white;
}

.canvas .canvasMain .innerFacultyNotes .objectiveTypeExam ul .wronAnswer p {
  color: red;
  font-weight: 400;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 10px;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li {
  list-style: none;
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li .multipleTypeBtn {
  width: 30px;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li .multipleTypeBtn input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li .multipleTypeBtn label {
  position: relative;
  cursor: pointer;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li .multipleTypeBtn label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #E0E4E8;
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 9px;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li .multipleTypeBtn input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li .multipleTypeBtn input:checked + label:before {
  background: #5434e2;
  border: 2px solid #5434e2;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li p {
  width: calc(100% - 35px);
  margin-top: 2px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul li p {
    margin-top: 0;
  }
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul .rightAnswer .multipleTypeBtn input:checked + label:before {
  background: green;
  border: 2px solid green;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul .rightAnswer p {
  color: green;
  font-weight: 400;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul .wronAnswer .multipleTypeBtn input:checked + label:before {
  background: red;
  border: 2px solid red;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul .wronAnswer .multipleTypeBtn input:checked + label:after {
  content: 'x';
  top: 0px;
  left: 8px;
  width: 5px;
  height: 10px;
  border: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  color: white;
}

.canvas .canvasMain .innerFacultyNotes .multipleTypeExam ul .wronAnswer p {
  color: red;
  font-weight: 400;
}

.canvas .canvasMain .innerFacultyNotes .dargExamNote {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 25px;
}

.canvas .canvasMain .innerFacultyNotes .dargExamNote ul {
  width: 350px;
  border: 2px dashed #5434e265;
  border-radius: 5px;
  padding: 10px 20px 20px 20px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .innerFacultyNotes .dargExamNote ul {
    width: 100%;
  }
}

.canvas .canvasMain .innerFacultyNotes .dargExamNote ul li {
  background-color: #525d6d;
  color: white;
  padding: .66rem 1rem;
  position: relative;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 100;
  width: 100%;
  margin-top: 10px;
}

.canvas .canvasMain .innerFacultyNotes .dargExamNote ul .rightAnswer {
  background: green;
}

.canvas .canvasMain .innerFacultyNotes .dargExamNote ul .wronAnswer {
  background: red;
}

.canvas .canvasMain .innerFacultyNotes .facualtyNoteExplanation {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 20px;
}

.canvas .canvasMain .innerFacultyNotes .facualtyNoteExplanation .facualtyNoteExplanationMain {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.096);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.096);
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.canvas .canvasMain .innerFacultyNotes .facualtyNoteExplanation .facualtyNoteExplanationMain h2 {
  font-size: 18px;
  font-weight: 500;
}

.canvas .canvasMain .innerFacultyNotes .facualtyNoteExplanation .facualtyNoteExplanationMain p {
  font-size: 16px;
  line-height: 1.7;
  margin-top: 20px;
}

.canvas .canvasMain .perfomance {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 10px;
}

.canvas .canvasMain .perfomance .perfomanceBox {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24%;
          flex: 0 0 24%;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.048);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.048);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .canvas .canvasMain .perfomance .perfomanceBox {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    margin-top: 10px;
  }
}

.canvas .canvasMain .perfomance .perfomanceBox::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 20%;
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.103), rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave7 2s;
          animation: wave7 2s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes wave7 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes wave7 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .perfomance .perfomanceBox::before {
    width: 100px;
    height: 100px;
    left: 30%;
    top: 60%;
  }
}

.canvas .canvasMain .perfomance .perfomanceBox::after {
  position: absolute;
  content: '';
  top: -50%;
  right: -30%;
  width: 250px;
  height: 250px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave8 1.5s;
          animation: wave8 1.5s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes wave8 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes wave8 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .perfomance .perfomanceBox::after {
    width: 150px;
    height: 150px;
    top: 30%;
    right: -35%;
  }
}

.canvas .canvasMain .perfomance .perfomanceBox:nth-child(1) {
  background: linear-gradient(45deg, #1984ff, #0168c9);
}

.canvas .canvasMain .perfomance .perfomanceBox:nth-child(2) {
  background: linear-gradient(45deg, #ffa319, #c95b01);
}

.canvas .canvasMain .perfomance .perfomanceBox:nth-child(3) {
  background: linear-gradient(45deg, #0abcff, #00aef0);
}

.canvas .canvasMain .perfomance .perfomanceBox:nth-child(4) {
  background: linear-gradient(45deg, #20a000, #06be0f);
}

.canvas .canvasMain .perfomance .perfomanceBox:nth-child(5) {
  background: linear-gradient(45deg, #a00000, #ec0808);
}

.canvas .canvasMain .perfomance .perfomanceBox h1 {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  color: white;
}

@media (max-width: 480px) {
  .canvas .canvasMain .perfomance .perfomanceBox h1 {
    font-size: 25px;
  }
}

.canvas .canvasMain .perfomance .perfomanceBox p {
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
  color: white;
}

.canvas .canvasMain .editProfile {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.canvas .canvasMain .editProfile form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.canvas .canvasMain .editProfile form .file-upload {
  margin-bottom: 30px;
}

.canvas .canvasMain .editProfile form .file-upload .image-box {
  margin-top: 30px;
  width: 150px;
  height: 150px;
  cursor: pointer;
  border: 3px solid #5434e2;
  border-radius: 25px;
  position: relative;
  z-index: 0;
}

.canvas .canvasMain .editProfile form .file-upload .image-box img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 23px;
}

.canvas .canvasMain .editProfile form .file-upload .image-box .editPen {
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 30px;
  background: #5434e2;
  color: white;
  bottom: -10px;
  right: -10px;
  border-radius: 50px;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.canvas .canvasMain .editProfile form .formGroup {
  width: 400px;
  margin-top: 15px;
  position: relative;
}

@media (max-width: 480px) {
  .canvas .canvasMain .editProfile form .formGroup {
    width: 100%;
  }
}

.canvas .canvasMain .editProfile form .formGroup input {
  width: 100%;
  height: 45px;
  background: #f2f7f7;
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 15px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #f2f7f7;
}

.canvas .canvasMain .editProfile form .formGroup input:focus {
  border: 1px solid #5434e2;
}

@media (max-width: 480px) {
  .canvas .canvasMain .editProfile form .formGroup input {
    height: 50px;
  }
}

.canvas .canvasMain .editProfile form .formGroup #btnToggle2 {
  position: absolute;
  background: none;
  outline: none;
  border: none;
  font-size: 14px;
  top: 50%;
  right: 5%;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.canvas .canvasMain .editProfile form .formBtnArea {
  width: 400px;
  margin-top: 30px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .editProfile form .formBtnArea {
    width: 100%;
  }
}

.canvas .canvasMain .editProfile form .formBtnArea button {
  width: 100%;
  padding: 15px;
  background: #5434e2;
  color: white;
  font-size: 16px;
  font-weight: 400;
  border: none;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}

.canvas .canvasMain .editProfile form .formBtnArea button:hover {
  -webkit-animation: pulse15 1s;
          animation: pulse15 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse15 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse15 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.canvas .canvasMain .changePassword {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.canvas .canvasMain .changePassword .changePasswordThumbnail {
  width: 300px;
  margin-bottom: 20px;
  margin-top: 20px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .changePassword .changePasswordThumbnail {
    width: 70%;
  }
}

.canvas .canvasMain .changePassword .changePasswordThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.canvas .canvasMain .changePassword form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.canvas .canvasMain .changePassword form .formGroup {
  width: 400px;
  margin-top: 15px;
  position: relative;
}

@media (max-width: 480px) {
  .canvas .canvasMain .changePassword form .formGroup {
    width: 100%;
  }
}

.canvas .canvasMain .changePassword form .formGroup input {
  width: 100%;
  height: 45px;
  background: #f2f7f7;
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 15px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #f2f7f7;
}

.canvas .canvasMain .changePassword form .formGroup input:focus {
  border: 1px solid #5434e2;
}

@media (max-width: 480px) {
  .canvas .canvasMain .changePassword form .formGroup input {
    height: 50px;
  }
}

.canvas .canvasMain .changePassword form .formGroup #btnToggle2,
.canvas .canvasMain .changePassword form .formGroup #btnToggleOld,
.canvas .canvasMain .changePassword form .formGroup #btnToggleConfirm,
.canvas .canvasMain .changePassword form .formGroup .password-eye {
  position: absolute;
  background: none;
  outline: none;
  border: none;
  font-size: 14px;
  top: 50%;
  right: 5%;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.canvas .canvasMain .changePassword form .formBtnArea {
  width: 400px;
  margin-top: 30px;
}

@media (max-width: 480px) {
  .canvas .canvasMain .changePassword form .formBtnArea {
    width: 100%;
  }
}

.canvas .canvasMain .changePassword form .formBtnArea button {
  width: 100%;
  padding: 15px;
  background: #5434e2;
  color: white;
  font-size: 16px;
  font-weight: 400;
  border: none;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}

.canvas .canvasMain .changePassword form .formBtnArea button:hover {
  -webkit-animation: pulse15 1s;
          animation: pulse15 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@keyframes pulse15 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.canvas .canvasMain .resultProgressBar {
  width: 100%;
  margin-top: 30px;
}

.canvas .canvasMain .resultProgressBar h3 {
  font-size: 18px;
  font-weight: 500;
}

.canvas .canvasMain .resultProgressBar .resultProgress {
  width: 100%;
  height: 100px;
  position: relative;
  background: #f7f7f7;
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}

.canvas .canvasMain .resultProgressBar .resultProgress .progress {
  height: 100%;
  border-radius: 3px;
  background-size: 12000px 1px;
  background-image: url("../images/illustration/progress.png");
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2em;
  font-weight: 600;
  color: white;
  border-radius: 0px 10px 10px 0px;
}

.canvas .canvasMain .answerList {
  width: 100%;
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .canvasMain .answerList .answerListBox {
  width: 100%;
  text-decoration: none;
  margin-top: 15px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.048);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.048);
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}

@media (max-width: 768px) {
  .canvas .canvasMain .answerList .answerListBox {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn1 {
  padding: 15px;
  font-size: 30px;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 768px) {
  .canvas .canvasMain .answerList .answerListBox .answerListbolumn1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .answerList .answerListBox .answerListbolumn1 {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
  }
}

.canvas .canvasMain .answerList .answerListBox .wrong {
  background: red;
}

.canvas .canvasMain .answerList .answerListBox .right {
  background: green;
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn2 {
  width: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (max-width: 768px) {
  .canvas .canvasMain .answerList .answerListBox .answerListbolumn2 {
    width: inherit;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .answerList .answerListBox .answerListbolumn2 {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
  }
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn2 span {
  font-size: 14px;
  color: black;
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn2 p {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 500;
  color: black;
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn3 {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (max-width: 768px) {
  .canvas .canvasMain .answerList .answerListBox .answerListbolumn3 {
    width: inherit;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .answerList .answerListBox .answerListbolumn3 {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
  }
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn3 span {
  font-size: 14px;
  color: black;
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn3 p {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 500;
  color: black;
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn4 {
  width: 10%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (max-width: 768px) {
  .canvas .canvasMain .answerList .answerListBox .answerListbolumn4 {
    width: inherit;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .canvas .canvasMain .answerList .answerListBox .answerListbolumn4 {
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
  }
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn4 span {
  font-size: 14px;
  color: black;
}

.canvas .canvasMain .answerList .answerListBox .answerListbolumn4 p {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 500;
  color: black;
}

.canvas .profile {
  width: 100%;
  position: relative;
  z-index: 0;
}

.canvas .profile::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 50px;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #2cc7ff27;
}

.canvas .profile .profileDetails {
  width: 100%;
  border-radius: 0px 0px 20px 20px;
  background: linear-gradient(45deg, #336aff, #00c3ff);
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.canvas .profile .profileDetails::before {
  position: absolute;
  content: '';
  top: 20%;
  left: -5%;
  width: 250px;
  height: 250px;
  background: linear-gradient(45deg, #03c4ff, rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave15 2s;
          animation: wave15 2s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes wave15 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes wave15 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .profile .profileDetails::before {
    width: 200px;
    height: 200px;
    left: -15%;
    top: -30%;
  }
}

.canvas .profile .profileDetails::after {
  position: absolute;
  content: '';
  top: -30%;
  left: -5%;
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, #30cfff, rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave16 1.5s;
          animation: wave16 1.5s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@keyframes wave15 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .profile .profileDetails::after {
    width: 150px;
    height: 150px;
    top: 20%;
    left: -15%;
  }
}

.canvas .profile .profileDetails .profileDetailsMain {
  width: 100%;
  padding: 50px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 768px) {
  .canvas .profile .profileDetails .profileDetailsMain {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 30px 0px;
  }
}

.canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainThumbnail {
  width: 150px;
  height: 150px;
  border-radius: 30px;
  overflow: hidden;
  border: 2px solid white;
}

@media (max-width: 768px) {
  .canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainThumbnail {
    width: 100px;
    height: 100px;
  }
}

.canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainDetails {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainDetails {
    margin-top: 20px;
  }
}

.canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainDetails h2 {
  font-size: 25px;
  font-weight: 400;
  color: white;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainDetails h2 {
    font-size: 18px;
    font-weight: 500;
  }
}

.canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainDetails p {
  font-size: 16px;
  margin-top: 7px;
  color: white;
  font-weight: 300;
}

@media (max-width: 480px) {
  .canvas .profile .profileDetails .profileDetailsMain .profileDetailsMainDetails p {
    font-size: 14px;
    margin-top: 5px;
  }
}

.canvas .profilePerfomance {
  width: 100%;
  padding: 20px 0px;
  background: #2cc7ff27;
  border-radius: 0px 0px 20px 20px;
}

.canvas .profilePerfomance h2 {
  font-size: 20px;
  font-weight: 500;
}

@media (max-width: 480px) {
  .canvas .profilePerfomance h2 {
    font-size: 18px;
  }
}

.canvas .profilePerfomance .profilePerfomanceMian {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24%;
          flex: 0 0 24%;
  padding: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.048);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.048);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  z-index: 0;
  margin-top: 20px;
  overflow: hidden;
}

@media (max-width: 480px) {
  .canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox {
    padding: 10px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    margin-top: 15px;
  }
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 20%;
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.103), rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave7 2s;
          animation: wave7 2s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@keyframes wave7 {
  0% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox::before {
    width: 100px;
    height: 100px;
    left: 30%;
    top: 60%;
  }
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox::after {
  position: absolute;
  content: '';
  top: -50%;
  right: -30%;
  width: 250px;
  height: 250px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0));
  z-index: -1;
  border-radius: 50%;
  -webkit-animation: wave8 1.5s;
          animation: wave8 1.5s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@keyframes wave8 {
  0% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@media (max-width: 480px) {
  .canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox::after {
    width: 150px;
    height: 150px;
    top: 30%;
    right: -35%;
  }
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox:nth-child(1) {
  background: linear-gradient(45deg, #1984ff, #0168c9);
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox:nth-child(2) {
  background: linear-gradient(45deg, #ffa319, #c95b01);
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox:nth-child(3) {
  background: linear-gradient(45deg, #0abcff, #00aef0);
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox:nth-child(4) {
  background: linear-gradient(45deg, #20a000, #06be0f);
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox:nth-child(5) {
  background: linear-gradient(45deg, #a00000, #ec0808);
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox h1 {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  color: white;
}

@media (max-width: 480px) {
  .canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox h1 {
    font-size: 16px;
  }
}

.canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox p {
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
  color: white;
}

@media (max-width: 480px) {
  .canvas .profilePerfomance .profilePerfomanceMian .perfomanceBox p {
    font-size: 10px;
    margin-top: 5px;
  }
}

.canvas .profileMenu {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.canvas .profileMenu ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 20px;
}

.canvas .profileMenu ul li {
  list-style: none;
}

.canvas .profileMenu ul li:nth-child(1) a {
  border-top: none;
}

.canvas .profileMenu ul li a {
  text-decoration: none;
  padding: 20px 2.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: #5434e2;
      -ms-flex-align: #5434e2;
          align-items: #5434e2;
  color: black;
  font-size: 16px;
  border-top: 1px solid #eee;
  opacity: 0.7;
}

@media (max-width: 480px) {
  .canvas .profileMenu ul li a {
    font-size: 14px;
    padding: 15px 2.5%;
  }
}

.canvas .profileMenu ul li a i {
  margin-right: 10px;
  color: #5434e2;
}

.navigation {
  position: fixed;
  width: 60%;
  background: white;
  border-radius: 10px;
  z-index: 150;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  overflow: hidden;
  border: 2px solid #5434e2;
  background: #5434e2;
  display: none;
}

@media (max-width: 1024px) {
  .navigation {
    width: 80%;
  }
}

@media (max-width: 768px) {
  .navigation {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .navigation {
    width: 95%;
  }
}

.navigation .navigationHead {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #5434e2;
  padding: 20px;
}

.navigation .navigationHead h1 {
  font-size: 25px;
  font-weight: 400;
  color: white;
}

@media (max-width: 480px) {
  .navigation .navigationHead h1 {
    font-size: 20px;
  }
}

.navigation .navigationBody {
  width: 100%;
  padding: 20px;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
}

.navigation .navigationBody .navigationTitle {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: #eee;
  border-radius: 10px;
}

.navigation .navigationBody .navigationTitle .navigationTitleBox {
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  padding: 10px 15px;
}

.navigation .navigationBody ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.navigation .navigationBody ul li {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.navigation .navigationBody ul li a {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  border-radius: 10px;
  color: red;
}

.navigation .navigationBody ul li a:hover {
  background: #5434e265;
}

.navigation .navigationBody ul li a .navigationContentBox {
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  padding: 10px 15px;
}

.navigation .navigationBody ul li .completed {
  color: green;
}

.navigation .navigationBodyFooter {
  width: 100%;
  background: #eee;
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navigation .navigationBodyFooter p {
  font-size: 14px;
}

.navigation .navigationBodyFooter .navigationClose {
  padding: 10px 30px;
  background: #5434e2;
  color: white;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

.navigation .navigationBodyFooter .navigationClose:hover {
  -webkit-animation: pulse3 1s;
          animation: pulse3 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse3 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse3 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

.completeExamPopup {
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50%;
  max-height: 80vh;
  background: white;
  z-index: 160;
  border-radius: 10px;
  padding: 50px;
  display: none;
}

@media (max-width: 1024px) {
  .completeExamPopup {
    width: 70%;
  }
}

@media (max-width: 768px) {
  .completeExamPopup {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .completeExamPopup {
    width: 90%;
    padding: 20px;
  }
}

.completeExamPopup .completeExamPopupMain {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.completeExamPopup .completeExamPopupClose {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 18px;
  cursor: pointer;
}

.completeExamPopup .completeExamPopupThumbnail {
  width: 300px;
}

@media (max-width: 480px) {
  .completeExamPopup .completeExamPopupThumbnail {
    width: 100%;
  }
}

.completeExamPopup .completeExamPopupThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.completeExamPopup .completeExamPopupContent {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 30px;
}

.completeExamPopup .completeExamPopupContent h1 {
  font-size: 25px;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 480px) {
  .completeExamPopup .completeExamPopupContent h1 {
    font-size: 22px;
  }
}

.completeExamPopup .completeExamPopupContent p {
  font-size: 14px;
  opacity: 0.7;
  text-align: center;
  margin-top: 15px;
  width: 70%;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .completeExamPopup .completeExamPopupContent p {
    width: 100%;
  }
}

.completeExamPopup .completeExamPopupContent a {
  text-decoration: none;
  width: 200px;
  padding: 15px;
  border-radius: 10px;
  background: #5434e2;
  color: white;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 30px;
}

.completeExamPopup .completeExamPopupContent a:hover {
  -webkit-animation: pulse5 1s;
          animation: pulse5 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse5 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@keyframes pulse5 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@media (max-width: 480px) {
  .completeExamPopup .completeExamPopupContent a {
    padding: 12px;
    width: 100%;
  }
}

.elseDesign {
  width: 100%;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 50px;
}

.elseDesign .elseDesignThumbnail {
  width: 300px;
}

@media (max-width: 480px) {
  .elseDesign .elseDesignThumbnail {
    width: 100%;
  }
}

.elseDesign .elseDesignThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.elseDesign .elseDesignContent {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 30px;
}

.elseDesign .elseDesignContent h1 {
  font-size: 25px;
  text-align: center;
  font-weight: 500;
}

@media (max-width: 480px) {
  .elseDesign .elseDesignContent h1 {
    font-size: 22px;
  }
}

.profileUpdatedPopup {
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50%;
  max-height: 80vh;
  background: white;
  z-index: 160;
  border-radius: 10px;
  padding: 50px;
  display: none;
}

@media (max-width: 1024px) {
  .profileUpdatedPopup {
    width: 70%;
  }
}

@media (max-width: 768px) {
  .profileUpdatedPopup {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .profileUpdatedPopup {
    width: 90%;
    padding: 20px;
  }
}

.profileUpdatedPopup .profileUpdatedPopupMain {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.profileUpdatedPopup .profileUpdatedPopupClose {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 18px;
  cursor: pointer;
}

.profileUpdatedPopup .profileUpdatedPopupThumbnail {
  width: 300px;
}

@media (max-width: 480px) {
  .profileUpdatedPopup .profileUpdatedPopupThumbnail {
    width: 100%;
  }
}

.profileUpdatedPopup .profileUpdatedPopupThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.profileUpdatedPopup .profileUpdatedPopupContent {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 30px;
}

.profileUpdatedPopup .profileUpdatedPopupContent h1 {
  font-size: 25px;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 480px) {
  .profileUpdatedPopup .profileUpdatedPopupContent h1 {
    font-size: 22px;
  }
}

.profileUpdatedPopup .profileUpdatedPopupContent p {
  font-size: 14px;
  opacity: 0.7;
  text-align: center;
  margin-top: 15px;
  width: 70%;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .profileUpdatedPopup .profileUpdatedPopupContent p {
    width: 100%;
  }
}

.profileUpdatedPopup .profileUpdatedPopupContent a {
  text-decoration: none;
  width: 200px;
  padding: 15px;
  border-radius: 10px;
  background: #5434e2;
  color: white;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 30px;
}

.profileUpdatedPopup .profileUpdatedPopupContent a:hover {
  -webkit-animation: pulse5 1s;
          animation: pulse5 1s;
  -webkit-box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
          box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0);
}

@keyframes pulse5 {
  0% {
    -webkit-box-shadow: 0 0 0 0 #5434e265;
            box-shadow: 0 0 0 0 #5434e265;
  }
}

@media (max-width: 480px) {
  .profileUpdatedPopup .profileUpdatedPopupContent a {
    padding: 12px;
    width: 100%;
  }
}

.timerOutPopup {
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 30%;
  max-height: 80vh;
  background: white;
  z-index: 160;
  border-radius: 10px;
  padding: 50px;
  display: none;
}

@media (max-width: 1024px) {
  .timerOutPopup {
    width: 40%;
  }
}

@media (max-width: 768px) {
  .timerOutPopup {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .timerOutPopup {
    width: 90%;
    padding: 20px;
  }
}

.timerOutPopup .timerOutPopupThumbnail {
  width: 100%;
  height: 250px;
}

.timerOutPopup .timerOutPopupThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.timerOutPopup .timerOutPopupContent {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.timerOutPopup .timerOutPopupContent h1 {
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  color: red;
}

.timerOutPopup .timerOutPopupContent .closeTimerOutPopup {
  padding: 18px 30px;
  background: #5434e2;
  color: white;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 30px;
}








.closeExamPopup {
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 400px;
  max-height: 80vh;
  background: white;
  z-index: 160;
  border-radius: 10px;
  padding: 50px;
  display: none;
}

@media (max-width: 480px) {
  .closeExamPopup {
    width: 90%;
    padding: 20px;
  }
}

.closeExamPopup .closeExamPopupThumbnail {
  width: 100%;
  height: 250px;
}

.closeExamPopup .closeExamPopupThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.closeExamPopup .closeExamPopupContent {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.closeExamPopup .closeExamPopupContent h1 {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}
.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .cancelCloseExamPopup {
    flex: 0 0 48%;
  padding: 16px;
  background: #eee;
  color: #5434e2;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 30px;
  text-align: center;
    transition: .3s;
}
.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .cancelCloseExamPopup:hover{
    opacity: 0.7;
    transition: .3s;
}
.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .submitCloseExamPopup {
    flex: 0 0 48%;
  padding: 16px;
  background: #5434e2;
  color: white;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 30px;
  text-align: center;
    transition: .3s;
}
.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .submitCloseExamPopup:hover{
    opacity: 0.7;
    transition: .3s;
}

.loadinSection {
  position: fixed;
  top: 64px;
  left: 16%;
  right: 0;
  width: 84%;
  height: calc(100vh - 64px);
  z-index: 80;
  background: rgba(248, 250, 252, 0.96);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  .sidemenu.sidemenuExpant ~ .canvas .loadinSection,
  .sidemenu.sidemenuExpant ~ .loadinSection {
    left: 60px;
    width: calc(100% - 60px);
  }
}

.canvas.expandCanvas .loadinSection,
.sidemenu.expandSidemenu ~ .canvas .loadinSection {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
}

[data-theme="dark"] .loadinSection {
  background: rgba(15, 23, 42, 0.94);
}

@media (max-width: 1024px) {
  .loadinSection {
    top: 64px;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - 64px);
    padding-bottom: 64px;
  }
}

.loadinSection .loadinSectionThumbnail {
  width: 250px;
}

.loadinSection .loadinSectionThumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}




.answerRevission {
    position: absolute;
    z-index: 2;
    width: 80%;
    height: 95%;
    top: 0;
    left: 0;
    background: white;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: red;
}
.answerRevissionActive{
    display: flex;
}

.canvas{
	/*margin-top:10rem;*/
	height:100%;
}
.canvas .canvasMain{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 1rem;
	
}
.canvas .canvasMain .card-head{
	background:linear-gradient(45deg, #ffa319, #c95b01);
	width:calc(95% / 3);
	padding:2.5rem 0;
	text-align:center;
	border-radius:8px;
	color:white;
}
.status-1::before {
	background-color: #52b69a;
	border-color: #52b69a;
}

/* Apply this class when data-status is 0 and checkbox is checked */
.status-0::before {
	background-color: red;
	border-color: red;
}

/* ==========================================================================
   Phase E — UI Revamp, Accessibility, Responsive Runner & Dashboard Styles
   ========================================================================== */

/* Lightweight CSS Loader (replaces decorative multi-MB GIFs) */
.athena-css-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 26px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  min-width: 64px;
  min-height: 64px;
}
.athena-css-loader::before {
  content: '';
  width: 38px;
  height: 38px;
  border: 3.5px solid rgba(84, 52, 226, 0.18);
  border-top-color: #5434e2;
  border-radius: 50%;
  animation: athenaCssSpin 0.75s linear infinite;
}
.athena-css-loader:has(.athena-css-spinner)::before {
  display: none;
}
.athena-css-spinner {
  width: 38px;
  height: 38px;
  border: 3.5px solid rgba(84, 52, 226, 0.18);
  border-top-color: #5434e2;
  border-radius: 50%;
  animation: athenaCssSpin 0.75s linear infinite;
}
@keyframes athenaCssSpin {
  to { transform: rotate(360deg); }
}

/* Keyboard Focus Visibility & Non-Drag Alternative Selection */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid #5434e2 !important;
  outline-offset: 2px !important;
}

.athena-drag-selected:not([style*="background"]) {
  outline: 3px solid #2563eb !important;
  background-color: #dbeafe !important;
  color: #1e3a8a !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2) !important;
  transform: translateY(-1px);
}

/* Dashboard Workspace */
.canvas .canvasMain .welcomeMessage h1 {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b !important;
  line-height: 1.35;
}
.canvas .canvasMain .welcomeMessage h2 {
  font-size: 15px;
  font-weight: 400;
  color: #64748b !important;
  margin-top: 2px;
}

.athenaDashboardWorkspace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 14px;
  margin-bottom: 24px;
}

.athenaResumeBanner {
  width: 100%;
  background: linear-gradient(135deg, #3b28ab 0%, #5434e2 60%, #6849f0 100%) !important;
  color: #ffffff !important;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 8px 20px rgba(84, 52, 226, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.athenaResumeBannerInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.athenaResumeBannerInfo .athenaResumeTag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  margin-bottom: 2px;
}
.athenaResumeBannerInfo h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: #ffffff !important;
}
.athenaResumeBannerInfo p {
  font-size: 13px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88) !important;
}
.athenaResumeBannerActions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.athenaBtnPrimary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #ffffff !important;
  color: #3b28ab !important;
  font-weight: 600;
  font-size: 13.5px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.athenaBtnPrimary i {
  color: #5434e2 !important;
  font-size: 15px;
}
.athenaBtnPrimary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.athenaBtnSecondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.athenaBtnSecondary:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

.athenaDashboardGrid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .athenaDashboardGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .athenaDashboardGrid {
    grid-template-columns: 1fr;
  }
}

.athenaStatCard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #5434e2;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.athenaStatCard.statCardPrimary {
  border-top-color: #5434e2;
}
.athenaStatCard.statCardBlue {
  border-top-color: #0284c7;
}
.athenaStatCard.statCardGreen {
  border-top-color: #16a34a;
}
.athenaStatCard.statCardAmber {
  border-top-color: #d97706;
}

.athenaStatCard .statCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.athenaStatCard .statLabel {
  font-size: 13px;
  font-weight: 500;
  color: #64748b !important;
}
.athenaStatCard .statIcon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: #f3f0ff;
  color: #5434e2 !important;
}
.athenaStatCard .statIcon i {
  color: inherit !important;
}
.athenaStatCard.statCardBlue .statIcon {
  background: #e0f2fe;
  color: #0284c7 !important;
}
.athenaStatCard.statCardGreen .statIcon {
  background: #dcfce7;
  color: #16a34a !important;
}
.athenaStatCard.statCardAmber .statIcon {
  background: #fef3c7;
  color: #d97706 !important;
}

.athenaStatCard .statValue {
  font-size: 23px;
  font-weight: 600;
  color: #1e293b !important;
  line-height: 1.25;
  white-space: nowrap;
}
.athenaStatCard .statValue .dashCorrectVal {
  color: #15803d !important;
  font-weight: 600;
}
.athenaStatCard .statValue .dashDivider {
  color: #cbd5e1 !important;
  margin: 0 6px;
  font-weight: 400;
}
.athenaStatCard .statValue .dashWrongVal {
  color: #dc2626 !important;
  font-weight: 600;
}
.athenaStatCard .statSub {
  font-size: 12.5px;
  color: #64748b !important;
  line-height: 1.4;
}
.athenaStatCard .statActionLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #5434e2 !important;
  font-weight: 500;
  text-decoration: none;
  font-size: 12.5px;
}
.athenaStatCard .statActionLink i {
  color: #5434e2 !important;
  font-size: 15px;
  transition: transform 0.15s ease;
}
.athenaStatCard .statActionLink:hover i {
  transform: translateX(2px);
}

.athenaDashSection {
  width: 100%;
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.athenaDashSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.athenaDashSectionHeader h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b !important;
  margin: 0;
}
.athenaDashSectionHeader a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 500;
  color: #5434e2 !important;
  text-decoration: none;
}
.athenaDashSectionHeader a i {
  color: #5434e2 !important;
  font-size: 16px;
}
.athenaDashSectionHeader a:hover {
  text-decoration: underline;
}

.athenaEmptyText,
.athenaEmptyState {
  padding: 16px 0;
  color: #64748b !important;
  font-size: 13.5px;
}
.athenaEmptyState a {
  color: #5434e2 !important;
  font-weight: 500;
  text-decoration: none;
}

.athenaRecentList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.athenaRecentRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fcfcfd !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.athenaRecentRow:hover {
  border-color: #cbd5e1;
  background: #f8fafc !important;
}
.athenaRecentMeta {
  display: grid;
  grid-template-columns: 95px 115px 90px 110px max-content max-content;
  align-items: center;
  gap: 18px;
  flex: 1;
}
@media (max-width: 900px) {
  .athenaRecentMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
  }
}
.athenaRecentItem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.athenaRecentItem .metaLabel {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.athenaRecentItem .metaValue {
  font-size: 13.5px;
  font-weight: 500;
  color: #334155 !important;
}
.athenaRecentItem .metaValue.metaStrong {
  color: #5434e2 !important;
  font-weight: 600;
}
.athenaRecentItem .metaValue.TopScore {
  color: #15803d !important;
  font-weight: 600;
}
.athenaRecentItem .metaValue.AverageScore {
  color: #b45309 !important;
  font-weight: 600;
}
.athenaRecentItem .metaValue.LowScore {
  color: #dc2626 !important;
  font-weight: 600;
}

.athenaStatusBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 96px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.athenaStatusBadge.completed {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}
.athenaStatusBadge.in-progress {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a;
}

.athenaRecentActions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.athenaActionBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  transition: all 0.15s ease;
}
.athenaActionBtn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
.athenaActionBtn.primary {
  background: #5434e2 !important;
  color: #ffffff !important;
  border-color: #5434e2 !important;
}
.athenaActionBtn.primary i {
  color: #ffffff !important;
}
.athenaActionBtn.primary:hover {
  background: #4327c7 !important;
  border-color: #4327c7 !important;
}

@media (max-width: 768px) {
  .athenaRecentRow {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }

  .athenaRecentMeta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 12px 12px;
    width: 100%;
    flex: none;
  }

  .athenaRecentItem.statusCol {
    justify-content: center;
  }

  .athenaRecentActions {
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .athenaRecentActions .athenaActionBtn {
    flex: 1 1 0%;
    justify-content: center;
    min-height: 38px;
  }
}

/* Unified Mode Switcher Tabs & History Filter Toolbar */
.canvas:has(.athenaHistoryPage),
.canvas:has(#athenaHistoryPagination) {
  padding-bottom: 24px !important;
}

@media (max-width: 1024px) {
  .canvas:has(.athenaHistoryPage),
  .canvas:has(#athenaHistoryPagination) {
    padding-bottom: 78px !important;
  }
}

.canvas .canvasMain.athenaHistoryPage,
.athenaHistoryPage {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-top: 8px;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  row-gap: 0 !important;
}

.athenaHistoryPage .athenaSrOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.athenaHistoryPage .athenaHistoryHeader {
  width: 100%;
  display: block !important;
  padding: 16px 0 22px;
  margin-top: 8px;
  background: transparent;
  border: 0;
}

.athenaHistoryPage .athenaHistoryHeaderTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  width: 100%;
}

.athenaHistoryPage .athenaHistoryTitleGroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.athenaHistoryPage .athenaHistoryEyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #6d5c9f !important;
  text-transform: uppercase;
}

.athenaHistoryPage .athenaHistoryHeader h1 {
  font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.2;
}

.athenaHistoryPage .athenaHistorySubtitle {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin: 4px 0 0 0 !important;
}

.athenaHistoryPage .athenaHistoryHeaderActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.athenaModeTabs {
  display: inline-flex;
  background: #eae8f3;
  padding: 4px;
  border-radius: 11px;
  gap: 4px;
  margin-bottom: 0;
}
.athenaModeTab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569 !important;
  text-decoration: none;
  transition: all 0.15s ease;
}
.athenaModeTab i {
  font-size: 15px;
}
.athenaModeTab.active {
  background: #ffffff !important;
  color: #5434e2 !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.athenaModeTab.active i {
  color: #5434e2 !important;
}

.athenaHistoryPage .athenaNewTestCtaBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #5434e2 !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(84, 52, 226, 0.2);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.athenaHistoryPage .athenaNewTestCtaBtn i {
  color: #ffffff !important;
  font-size: 16px;
}
.athenaHistoryPage .athenaNewTestCtaBtn:hover {
  background: #4327c7 !important;
  transform: translateY(-1px);
}

/* Summary KPI Strip */
.athenaHistoryPage .athenaHistoryStatsGrid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.athenaHistoryPage .athenaHistoryStatCard {
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.athenaHistoryPage .athenaHistoryStatCard .statIconWrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.athenaHistoryPage .athenaHistoryStatCard .statIconWrap.total {
  background: #f2effc;
  color: #5434e2 !important;
}
.athenaHistoryPage .athenaHistoryStatCard .statIconWrap.total i {
  color: #5434e2 !important;
}
.athenaHistoryPage .athenaHistoryStatCard .statIconWrap.completed {
  background: #ecfdf5;
  color: #15803d !important;
}
.athenaHistoryPage .athenaHistoryStatCard .statIconWrap.completed i {
  color: #15803d !important;
}
.athenaHistoryPage .athenaHistoryStatCard .statIconWrap.progress {
  background: #fffbeb;
  color: #b45309 !important;
}
.athenaHistoryPage .athenaHistoryStatCard .statIconWrap.progress i {
  color: #b45309 !important;
}

.athenaHistoryPage .athenaHistoryStatCard .statInfo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.athenaHistoryPage .athenaHistoryStatCard .statLabel {
  font-size: 12px;
  font-weight: 500;
  color: #64748b !important;
}
.athenaHistoryPage .athenaHistoryStatCard .statNumber {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a !important;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.athenaHistoryPage .athenaHistoryStatCard .statHint {
  font-size: 11px;
  color: #94a3b8 !important;
}

/* Quick Resume Latest Banner */
.athenaHistoryPage .athenaLatestResumeBanner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f5f2ff 0%, #fcfbff 100%);
  border: 1px solid #d7cdf8;
  box-shadow: 0 3px 12px rgba(84, 52, 226, 0.06);
}
.athenaHistoryPage .resumeBannerLeft {
  display: flex;
  align-items: center;
  gap: 14px;
}
.athenaHistoryPage .resumeBannerIcon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #5434e2;
  color: #ffffff !important;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.athenaHistoryPage .resumeBannerIcon i {
  color: #ffffff !important;
}
.athenaHistoryPage .resumeBannerText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.athenaHistoryPage .resumeBannerTag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5434e2 !important;
}
.athenaHistoryPage .resumeBannerText strong {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b !important;
}
.athenaHistoryPage .resumeBannerMeta {
  font-size: 12px;
  color: #64748b !important;
}
.athenaHistoryPage .resumeBannerActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.athenaHistoryPage .athenaBannerSecondaryBtn {
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155 !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.athenaHistoryPage .athenaBannerSecondaryBtn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.athenaHistoryPage .athenaBannerPrimaryBtn {
  position: static !important;
  padding: 9px 16px !important;
  border-radius: 9px !important;
  background: #5434e2 !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.22);
}
.athenaHistoryPage .athenaBannerPrimaryBtn i {
  color: #ffffff !important;
  font-size: 15px;
}
.athenaHistoryPage .athenaBannerPrimaryBtn:hover {
  background: #4327c7 !important;
  opacity: 1 !important;
}

/* Interactive Filter & Search Toolbar */
.athenaHistoryToolbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
}

.athenaHistoryPage .athenaHistoryFilterPrimary {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.athenaHistoryPage .athenaStatusChipGroup {
  flex: 1.35 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 10px;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
}

.athenaHistoryPage .athenaFilterChip {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 7px;
  border: none;
  background: transparent !important;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.athenaHistoryPage .athenaFilterChip:hover {
  color: #0f172a !important;
}
.athenaHistoryPage .athenaFilterChip.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.athenaHistoryPage .athenaFilterChip .statusDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.athenaHistoryPage .athenaFilterChip .statusDot.progress {
  background: #f59e0b;
}
.athenaHistoryPage .athenaFilterChip .statusDot.completed {
  background: #10b981;
}

.athenaHistoryPage .athenaFilterChip .chipBadge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155 !important;
  font-variant-numeric: tabular-nums;
}
.athenaHistoryPage .athenaFilterChip.active .chipBadge {
  background: #ede9fe;
  color: #5434e2 !important;
}

.athenaHistoryPage .athenaModeChipGroup {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.athenaHistoryPage .athenaModeChip {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.athenaHistoryPage .athenaModeChip i {
  color: #64748b !important;
  font-size: 13.5px;
}
.athenaHistoryPage .athenaModeChip:hover {
  border-color: #cbd5e1;
  background: #f8fafc !important;
}
.athenaHistoryPage .athenaModeChip.active {
  background: #f5f3ff !important;
  border-color: #5434e2;
  color: #5434e2 !important;
  font-weight: 600;
}
.athenaHistoryPage .athenaModeChip.active i {
  color: #5434e2 !important;
}

.athenaHistoryPage .athenaHistoryFilterSecondary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1 1 480px;
  margin-left: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Dedicated Date Filter Dropdown */
.athenaHistoryPage .athenaDateFilterWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.athenaHistoryPage .athenaDateFilterControl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.athenaHistoryPage .athenaDateDropdownBtn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 124px;
  height: 35px;
  padding: 5px 9px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.athenaHistoryPage .athenaDateDropdownBtn:hover {
  border-color: #94a3b8;
  background: #ffffff !important;
}
.athenaHistoryPage .athenaDateDropdownBtn.is-open,
.athenaHistoryPage .athenaDateDropdownBtn.is-filtered {
  border-color: #5434e2;
  background: #f5f3ff !important;
  box-shadow: 0 0 0 3px rgba(84, 52, 226, 0.08);
}

.athenaHistoryPage .athenaDateCalendarIcon {
  font-size: 15px;
  color: #5434e2 !important;
}

.athenaHistoryPage .athenaDateDropdownLabel {
  flex: 1;
  text-align: center;
  color: #0f172a !important;
  font-weight: 600;
  white-space: nowrap;
}

.athenaHistoryPage .athenaDateChevronIcon {
  font-size: 15px;
  color: #64748b !important;
  transition: transform 0.15s ease;
}
.athenaHistoryPage .athenaDateDropdownBtn.is-open .athenaDateChevronIcon {
  transform: rotate(180deg);
}

.athenaHistoryPage .athenaDateClearBtn {
  border: none;
  background: transparent !important;
  color: #5434e2 !important;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 4px;
  cursor: pointer;
  white-space: nowrap;
}
.athenaHistoryPage .athenaDateClearBtn:hover {
  text-decoration: underline;
}

.athenaHistoryPage .athenaDateDropdownMenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 195px;
  max-height: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.athenaHistoryPage .athenaDateDropdownMenu::-webkit-scrollbar {
  width: 6px;
}
.athenaHistoryPage .athenaDateDropdownMenu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.athenaHistoryPage .athenaDateDropdownMenu::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.athenaHistoryPage .athenaDateOption {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent !important;
  color: #1e293b !important;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.12s ease;
}
.athenaHistoryPage .athenaDateOption:hover {
  background: #f1f5f9 !important;
}
.athenaHistoryPage .athenaDateOption.active {
  background: #f1f5f9 !important;
  font-weight: 600;
  color: #0f172a !important;
}
.athenaHistoryPage .athenaDateOption .optionCheck {
  font-size: 15px;
  color: #0f172a !important;
  opacity: 0;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.athenaHistoryPage .athenaDateOption.active .optionCheck {
  opacity: 1;
}

.athenaHistoryPage .athenaCustomDateRange {
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed #e2e8f0;
}
.athenaHistoryPage .customDateRangeTitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569 !important;
}
.athenaHistoryPage .customDateRangeTitle i {
  color: #5434e2 !important;
  font-size: 15px;
}
.athenaHistoryPage .customDateField {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569 !important;
  cursor: pointer;
}
.athenaHistoryPage .customDateField input[type="date"] {
  height: 35px;
  min-width: 148px;
  padding: 4px 10px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a !important;
  font-size: 12.5px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  position: relative;
}
.athenaHistoryPage .customDateField input[type="date"]:focus {
  border-color: #5434e2;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(84, 52, 226, 0.1);
}
/* Override legacy global rule that hid native calendar picker indicator and date fields */
.athenaHistoryPage .customDateField input[type="date"]::-webkit-calendar-picker-indicator {
  display: inline-block !important;
  -webkit-appearance: auto !important;
  opacity: 0.8;
  cursor: pointer;
  padding: 2px;
}
.athenaHistoryPage .customDateField input[type="date"]::-webkit-datetime-edit,
.athenaHistoryPage .customDateField input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.athenaHistoryPage .customDateField input[type="date"]::-webkit-datetime-edit-text,
.athenaHistoryPage .customDateField input[type="date"]::-webkit-datetime-edit-month-field,
.athenaHistoryPage .customDateField input[type="date"]::-webkit-datetime-edit-day-field,
.athenaHistoryPage .customDateField input[type="date"]::-webkit-datetime-edit-year-field {
  color: #0f172a !important;
}

.athenaHistoryPage .athenaHistorySearchBox {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 115px;
  min-width: 110px;
}
.athenaHistoryPage .athenaHistorySearchBox i {
  position: absolute;
  left: 10px;
  font-size: 14px;
  color: #94a3b8 !important;
  pointer-events: none;
}
.athenaHistoryPage .athenaHistorySearchBox input {
  width: 100%;
  height: 35px;
  padding: 4px 26px 4px 30px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: 12px;
  color: #0f172a !important;
  background: #f8fafc;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.athenaHistoryPage .athenaHistorySearchBox input:focus {
  border-color: #5434e2;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(84, 52, 226, 0.1);
}
.athenaHistoryPage .athenaSearchClearBtn {
  position: absolute;
  right: 6px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: #e2e8f0 !important;
  color: #475569 !important;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.athenaHistoryPage .athenaSearchClearBtn:hover {
  background: #cbd5e1 !important;
  color: #0f172a !important;
}

.athenaHistoryPage .athenaHistoryToolbarMeta {
  font-size: 12px;
  font-weight: 500;
  color: #64748b !important;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* Redesigned Session Card Grid */
.canvas .canvasMain.athenaHistoryPage .previousTest.athenaHistoryGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin-top: 4px !important;
}
.canvas .canvasMain.athenaHistoryPage .previousTest.athenaHistoryGrid::after {
  display: none !important;
}

.canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox.athenaHistoryCard {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  padding: 20px !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  border: 1px solid #e5e4ef !important;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.035) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox.athenaHistoryCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: #cbd5e1;
}
.canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox.athenaHistoryCard.is-completed::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox.athenaHistoryCard.is-progress::before {
  background: linear-gradient(90deg, #5434e2, #8b5cf6);
}

.canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox.athenaHistoryCard:hover {
  transform: translateY(-3px);
  border-color: #c4b5fd !important;
  box-shadow: 0 10px 24px rgba(84, 52, 226, 0.08) !important;
}

.athenaHistoryPage .athenaHistoryCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.athenaHistoryPage .cardIdentity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.athenaHistoryPage .cardIconBadge {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: #f3f0ff;
  color: #5434e2 !important;
  flex-shrink: 0;
}
.athenaHistoryPage .athenaHistoryCard.is-completed .cardIconBadge {
  background: #ecfdf5;
  color: #059669 !important;
}
.athenaHistoryPage .cardIconBadge i {
  color: inherit !important;
}

.athenaHistoryPage .cardTitleMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.athenaHistoryPage .cardTestId {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.athenaHistoryPage .cardDate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748b !important;
  white-space: nowrap;
}
.athenaHistoryPage .cardDate i {
  font-size: 13px;
  color: #94a3b8 !important;
}

/* Status & Mode Badges */
.athenaBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}
.athenaBadge i {
  font-size: 13px;
  color: inherit !important;
}
.athenaBadgeCompleted {
  background: #ecfdf5;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}
.athenaBadgeProgress {
  background: #fffbeb;
  color: #b45309 !important;
  border: 1px solid #fde68a;
}
.athenaBadgeTutor {
  background: #f5f3ff;
  color: #5434e2 !important;
  border: 1px solid #ddd6fe;
}
.athenaBadgeTimed {
  background: #eff6ff;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe;
}

.athenaHistoryPage .athenaHistoryCardBody {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.athenaHistoryPage .cardMetaPills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.athenaHistoryPage .athenaMetaPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  color: #334155 !important;
  white-space: nowrap;
}
.athenaHistoryPage .athenaMetaPill i {
  color: #64748b !important;
  font-size: 13.5px;
}

.athenaHistoryPage .athenaCardScorePill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.athenaHistoryPage .athenaCardScorePill .scoreLabel {
  font-size: 11px;
  color: #64748b !important;
}
.athenaHistoryPage .athenaCardScorePill .scoreValue {
  font-size: 14px;
  font-weight: 700;
}
.athenaHistoryPage .athenaCardScorePill .scoreValue.TopScore {
  color: #15803d !important;
}
.athenaHistoryPage .athenaCardScorePill .scoreValue.AverageScore {
  color: #b45309 !important;
}
.athenaHistoryPage .athenaCardScorePill .scoreValue.LowScore {
  color: #dc2626 !important;
}

/* Card Footer Actions */
.athenaHistoryPage .athenaHistoryCardFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  position: relative;
  z-index: 3;
}

.canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox .previousTestBoxresumeTestBtn.athenaCardPrimaryBtn {
  position: static !important;
  flex: 1 1 auto;
  height: 38px !important;
  min-height: 38px;
  padding: 0 12px !important;
  border-radius: 9px !important;
  background: #5434e2 !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.18);
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}
.canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox .previousTestBoxresumeTestBtn.athenaCardPrimaryBtn i {
  color: #ffffff !important;
  font-size: 15px;
}
.canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox .previousTestBoxresumeTestBtn.athenaCardPrimaryBtn:hover {
  background: #4327c7 !important;
  opacity: 1 !important;
}

.athenaHistoryPage .athenaCardSecondaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.athenaHistoryPage .athenaCardSecondaryBtn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a !important;
}

.athenaHistoryPage .athenaCardReviewBtn {
  width: 100%;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 9px;
  background: #f5f3ff;
  border: 1px solid #e4ddfd;
  color: #5434e2 !important;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.athenaHistoryPage .athenaCardReviewBtn span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5434e2 !important;
}
.athenaHistoryPage .athenaCardReviewBtn i {
  color: #5434e2 !important;
  font-size: 15px;
}
.athenaHistoryPage .athenaCardReviewBtn:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}

/* Empty State & Reset Filter Button */
.athenaHistoryPage .athenaHistoryEmptyState,
.athenaHistoryPage .elseDesign.athenaHistoryEmptyState {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 4px !important;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 44px 24px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
}
.athenaHistoryPage .athenaHistoryEmptyState .elseDesignThumbnail {
  width: 210px;
  max-width: 65%;
  margin: 0 auto;
}
.athenaHistoryPage .athenaHistoryEmptyState .elseDesignContent {
  margin-top: 18px !important;
}
.athenaHistoryPage .athenaHistoryEmptyState .elseDesignContent h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0;
}
.athenaHistoryPage .athenaHistoryEmptyState p {
  font-size: 13.5px;
  color: #64748b !important;
  margin-top: 6px;
  max-width: 440px;
}
.athenaHistoryPage .athenaResetFiltersBtn {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid #5434e2;
  background: #5434e2 !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(84, 52, 226, 0.2);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.athenaHistoryPage .athenaResetFiltersBtn:hover {
  background: #4327c7 !important;
  transform: translateY(-1px);
}
.athenaHistoryPage .athenaResetFiltersBtn i {
  color: #ffffff !important;
  font-size: 15px;
}

.athenaPaginationBar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 0;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
}

.athenaPaginationInfo {
  font-size: 13px;
  color: #64748b !important;
}
.athenaPaginationInfo strong {
  color: #0f172a !important;
  font-weight: 600;
}

.athenaPaginationBtns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.athenaPageBtn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.athenaPageBtn i {
  font-size: 15px;
  color: inherit !important;
}
.athenaPageBtn:hover:not(:disabled) {
  border-color: #cbd5e1;
  background: #f8fafc !important;
  color: #0f172a !important;
}
.athenaPageBtn.active {
  background: #5434e2 !important;
  border-color: #5434e2 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(84, 52, 226, 0.22);
}
.athenaPageBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f8fafc !important;
}

.athenaPageEllipsis {
  padding: 0 4px;
  color: #94a3b8 !important;
  font-size: 13px;
}

/* ==========================================================================
   Responsive Breakpoints for Previous Tests Page (.athenaHistoryPage)
   ========================================================================== */

/* 1. Stacked 2-Row Filter Card (<= 1536px, including standard laptops 1366px, 1406px, 1440px, 1448px, 1024px & 768px): Fill 100% of both rows with zero empty white space */
@media (max-width: 1536px) {
  .athenaHistoryToolbar {
    gap: 10px;
    box-sizing: border-box;
  }
  .athenaHistoryPage .athenaHistoryFilterPrimary {
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .athenaHistoryPage .athenaStatusChipGroup {
    flex: 1.35 1 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .athenaHistoryPage .athenaModeChipGroup {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .athenaHistoryPage .athenaFilterChip,
  .athenaHistoryPage .athenaModeChip {
    width: 100%;
    justify-content: center;
  }
  .athenaHistoryPage .athenaHistoryFilterSecondary {
    width: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    gap: 10px;
    box-sizing: border-box;
  }
  .athenaHistoryPage .athenaDateDropdownBtn {
    min-width: 150px;
  }
  .athenaHistoryPage .athenaHistorySearchBox {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: none;
  }
  .athenaHistoryPage .athenaHistoryToolbarMeta {
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* 2. Small Laptop & Tablet Landscape (<= 1060px): 2-column card grid */
@media (max-width: 1060px) {
  .canvas .canvasMain.athenaHistoryPage,
  .athenaHistoryPage {
    padding-bottom: 0 !important;
  }
  .canvas .canvasMain.athenaHistoryPage .previousTest.athenaHistoryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }
}

/* 3. Tablet (<= 820px, e.g., iPad 768px): Compact 3-col KPI strip */
@media (max-width: 820px) {
  .athenaHistoryPage .athenaHistoryStatsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .athenaHistoryPage .athenaHistoryStatCard {
    padding: 14px;
    gap: 10px;
  }
  .athenaHistoryPage .athenaHistoryStatCard .statIconWrap {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }
  .athenaHistoryPage .athenaHistoryStatCard .statNumber {
    font-size: 20px;
  }
}

/* 4. Mobile Phones (<= 640px, e.g., 375px–430px): Full-width touch-friendly layout */
@media (max-width: 640px) {
  .athenaHistoryPage .athenaHistoryHeader {
    padding: 10px 0 16px;
  }
  .athenaHistoryPage .athenaHistoryHeaderTop {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .athenaHistoryPage .athenaHistoryHeaderActions,
  .athenaHistoryPage .athenaNewTestCtaBtn {
    width: 100%;
    justify-content: center;
  }

  /* Compact 3-column KPI strip on mobile so it doesn't push tests off-screen */
  .athenaHistoryPage .athenaHistoryStatsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }
  .athenaHistoryPage .athenaHistoryStatCard {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 10px;
    gap: 6px;
    border-radius: 12px;
  }
  .athenaHistoryPage .athenaHistoryStatCard .statIconWrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 16px;
  }
  .athenaHistoryPage .athenaHistoryStatCard .statLabel {
    font-size: 11px;
  }
  .athenaHistoryPage .athenaHistoryStatCard .statNumber {
    font-size: 18px;
  }
  .athenaHistoryPage .athenaHistoryStatCard .statHint {
    font-size: 10px;
    line-height: 1.25;
  }

  /* Resume Banner on mobile */
  .athenaHistoryPage .athenaLatestResumeBanner {
    padding: 14px;
    gap: 12px;
  }
  .athenaHistoryPage .resumeBannerLeft {
    align-items: flex-start;
  }
  .athenaHistoryPage .resumeBannerActions {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
  }
  .athenaHistoryPage .athenaBannerSecondaryBtn,
  .athenaHistoryPage .athenaBannerPrimaryBtn {
    justify-content: center;
    text-align: center;
  }

  /* Filter Toolbar on mobile: zero horizontal overflow, clean full-width rows */
  .athenaHistoryToolbar {
    padding: 12px;
    gap: 10px;
  }
  .athenaHistoryPage .athenaHistoryFilterPrimary {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .athenaHistoryPage .athenaStatusChipGroup {
    flex: none;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
  }
  .athenaHistoryPage .athenaFilterChip {
    padding: 7px 4px;
    font-size: 11.5px;
    gap: 4px;
  }
  .athenaHistoryPage .athenaFilterChip .chipBadge {
    font-size: 10px;
    padding: 1px 5px;
  }
  .athenaHistoryPage .athenaModeChipGroup {
    flex: none;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .athenaHistoryPage .athenaModeChip {
    padding: 7px 6px;
    font-size: 11.5px;
  }

  .athenaHistoryPage .athenaHistoryFilterSecondary {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
  }
  .athenaHistoryPage .athenaDateFilterWrap {
    width: 100%;
  }
  .athenaHistoryPage .athenaDateFilterControl {
    width: 100%;
  }
  .athenaHistoryPage .athenaDateDropdownBtn {
    flex: 1;
    min-width: 0;
    height: 38px;
  }
  .athenaHistoryPage .athenaDateDropdownMenu {
    left: 0;
    right: 0;
    width: 100%;
  }
  .athenaHistoryPage .athenaHistorySearchBox {
    width: 100%;
    max-width: none;
    flex: none;
  }
  .athenaHistoryPage .athenaHistorySearchBox input {
    height: 38px;
    font-size: 13px;
  }
  .athenaHistoryPage .athenaHistoryToolbarMeta {
    margin-left: 0;
    text-align: right;
    width: 100%;
  }

  /* Custom Date Range on mobile: clean 2-column From / To layout */
  .athenaHistoryPage .athenaCustomDateRange {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    padding-top: 10px;
  }
  .athenaHistoryPage .customDateRangeTitle {
    grid-column: 1 / -1;
  }
  .athenaHistoryPage .customDateField {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
  }
  .athenaHistoryPage .customDateField input[type="date"] {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 4px 8px;
    font-size: 12px;
  }

  /* Single-column session cards on mobile */
  .canvas .canvasMain.athenaHistoryPage .previousTest.athenaHistoryGrid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }
  .canvas .canvasMain.athenaHistoryPage .previousTest .previousTestBox.athenaHistoryCard {
    padding: 16px !important;
    gap: 14px;
  }

  /* Single-line compact pagination bar on mobile */
  .athenaPaginationBar,
  .athenaTestResultPage .athenaResultPagination {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    text-align: left !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .athenaPaginationInfo {
    font-size: 12px !important;
    white-space: nowrap;
  }
  .athenaPaginationInfo .pagTextVerbose {
    display: none !important;
  }
  .athenaPaginationBtns {
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .athenaPageBtn {
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 7px !important;
    font-size: 12px !important;
  }
  .athenaPageBtn .pagBtnText,
  .athenaPageBtn.page-neighbor {
    display: none !important;
  }
  .athenaPageEllipsis {
    padding: 0 2px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   Performance Analytics Page (.athenaPerformancePage)
   ========================================================================== */

/* 1. 5-Column Balanced KPI Strip */
.athenaPerformancePage .athenaPerfStatsGrid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.athenaPerformancePage .athenaPerfStatCard {
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-top: 3.5px solid #5434e2;
  border-radius: 14px;
  padding: 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.athenaPerformancePage .athenaPerfStatCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.athenaPerformancePage .athenaPerfStatCard.card-total {
  border-top-color: #5434e2;
}
.athenaPerformancePage .athenaPerfStatCard.card-attended {
  border-top-color: #0284c7;
}
.athenaPerformancePage .athenaPerfStatCard.card-unattended {
  border-top-color: #f59e0b;
}
.athenaPerformancePage .athenaPerfStatCard.card-right {
  border-top-color: #10b981;
}
.athenaPerformancePage .athenaPerfStatCard.card-wrong {
  border-top-color: #ef4444;
}

.athenaPerformancePage .perfStatTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.athenaPerformancePage .perfStatLabel {
  font-size: 12px;
  font-weight: 600;
  color: #475569 !important;
  line-height: 1.25;
}

.athenaPerformancePage .perfStatIcon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}
.athenaPerformancePage .perfStatIcon.total {
  background: #f3f0ff;
  color: #5434e2 !important;
}
.athenaPerformancePage .perfStatIcon.attended {
  background: #e0f2fe;
  color: #0284c7 !important;
}
.athenaPerformancePage .perfStatIcon.unattended {
  background: #fffbeb;
  color: #d97706 !important;
}
.athenaPerformancePage .perfStatIcon.right {
  background: #ecfdf5;
  color: #059669 !important;
}
.athenaPerformancePage .perfStatIcon.wrong {
  background: #fef2f2;
  color: #dc2626 !important;
}
.athenaPerformancePage .perfStatIcon i {
  color: inherit !important;
}

.athenaPerformancePage .perfStatNumber {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a !important;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.athenaPerformancePage .perfStatHint {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b !important;
}

/* 2. Visual Question Distribution & Accuracy Stacked Bar Card */
.athenaPerformancePage .athenaPerfDistributionCard {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.athenaPerformancePage .perfDistHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.athenaPerformancePage .perfDistTitleBlock h2 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0;
}
.athenaPerformancePage .perfDistTitleBlock p {
  font-size: 12px;
  color: #64748b !important;
  margin: 2px 0 0 0;
}

.athenaPerformancePage .perfDistMetrics {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.athenaPerformancePage .perfDistMetricPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.athenaPerformancePage .perfDistMetricPill.accuracy {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.athenaPerformancePage .perfDistMetricPill.completion {
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.athenaPerformancePage .perfDistMetricPill .metricLabel {
  font-size: 11.5px;
  font-weight: 600;
  color: #475569 !important;
}
.athenaPerformancePage .perfDistMetricPill.accuracy .metricValue {
  font-size: 14px;
  font-weight: 700;
  color: #047857 !important;
}
.athenaPerformancePage .perfDistMetricPill.completion .metricValue {
  font-size: 14px;
  font-weight: 700;
  color: #5434e2 !important;
}

.athenaPerformancePage .perfStackedBarTrack {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  display: flex;
  gap: 2px;
}

.athenaPerformancePage .perfStackedSegment {
  height: 100%;
  transition: width 0.35s ease;
}
.athenaPerformancePage .perfStackedSegment.right {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.athenaPerformancePage .perfStackedSegment.wrong {
  background: linear-gradient(90deg, #ef4444, #f87171);
}
.athenaPerformancePage .perfStackedSegment.unattended {
  background: #fbbf24;
}

.athenaPerformancePage .perfDistLegend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #475569 !important;
}
.athenaPerformancePage .perfDistLegend .legendItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.athenaPerformancePage .perfDistLegend strong {
  color: #0f172a !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.athenaPerformancePage .perfDistLegend .legendPct,
.athenaPerformancePage .perfDistLegend .legendPct span {
  color: #64748b !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.athenaPerformancePage .perfDistLegend .legendDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.athenaPerformancePage .perfDistLegend .legendDot.right {
  background: #10b981;
}
.athenaPerformancePage .perfDistLegend .legendDot.wrong {
  background: #ef4444;
}
.athenaPerformancePage .perfDistLegend .legendDot.unattended {
  background: #f59e0b;
}

/* 3. Interactive Analytics Dual-Panel Grid */
.athenaPerformancePage .athenaPerfAnalyticsGrid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.athenaPerformancePage .athenaPerfAnalyticsGrid:has(> #perfScoreTrendPanel[style*="display: none"]),
.athenaPerformancePage .athenaPerfAnalyticsGrid.single-panel {
  grid-template-columns: 1fr;
}

.athenaPerformancePage .athenaPerfAnalyticsGrid:has(> #perfScoreTrendPanel[style*="display: none"]) .perfMasteryList,
.athenaPerformancePage .athenaPerfAnalyticsGrid.single-panel .perfMasteryList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.athenaPerformancePage .athenaPerfPanelCard {
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-radius: 15px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.athenaPerformancePage .perfPanelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.athenaPerformancePage .perfPanelTitleGroup h2 {
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0;
}
.athenaPerformancePage .perfPanelTitleGroup p {
  font-size: 12px;
  color: #64748b !important;
  margin: 2px 0 0 0;
}

.athenaPerformancePage .perfPanelControls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.athenaPerformancePage .perfMasteryTabGroup {
  display: inline-flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 9px;
  gap: 2px;
}

.athenaPerformancePage .perfMasteryTab {
  padding: 5px 10px;
  border: none;
  border-radius: 7px;
  background: transparent !important;
  color: #475569 !important;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.athenaPerformancePage .perfMasteryTab.active {
  background: #ffffff !important;
  color: #5434e2 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.athenaPerformancePage .perfMasterySortSelect {
  height: 31px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155 !important;
  font-size: 11.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}
.athenaPerformancePage .perfMasterySortSelect:focus {
  border-color: #5434e2;
}

.athenaPerformancePage .perfMasteryList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
}
.athenaPerformancePage .perfMasteryList::-webkit-scrollbar {
  width: 6px;
}
.athenaPerformancePage .perfMasteryList::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.athenaPerformancePage .perfMasteryItem {
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid #eef2f6;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.athenaPerformancePage .perfMasteryItemTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.athenaPerformancePage .perfMasteryTitleWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.athenaPerformancePage .perfMasteryName {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a !important;
}

.athenaPerformancePage .perfMasterySubTag {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ede9fe;
  color: #5434e2 !important;
}

.athenaPerformancePage .perfMasteryBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.athenaPerformancePage .perfMasteryBadge.strong {
  background: #ecfdf5;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}
.athenaPerformancePage .perfMasteryBadge.moderate {
  background: #fffbeb;
  color: #b45309 !important;
  border: 1px solid #fde68a;
}
.athenaPerformancePage .perfMasteryBadge.focus {
  background: #fef2f2;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
}
.athenaPerformancePage .perfMasteryBadge.unstarted {
  background: #f1f5f9;
  color: #64748b !important;
  border: 1px solid #e2e8f0;
}

.athenaPerformancePage .perfMasteryBarTrack {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.athenaPerformancePage .perfMasteryBarFill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.athenaPerformancePage .perfMasteryBarFill.strong {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.athenaPerformancePage .perfMasteryBarFill.moderate {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.athenaPerformancePage .perfMasteryBarFill.focus {
  background: linear-gradient(90deg, #ef4444, #f87171);
}
.athenaPerformancePage .perfMasteryBarFill.unstarted {
  background: #cbd5e1;
}

.athenaPerformancePage .perfMasteryMetaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: #64748b !important;
}
.athenaPerformancePage .perfMasteryMetaRow strong {
  color: #0f172a !important;
}

.athenaPerformancePage .perfMasteryRightWrong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.athenaPerformancePage .rwPill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
}
.athenaPerformancePage .rwPill.right {
  color: #059669 !important;
}
.athenaPerformancePage .rwPill.right i {
  color: #059669 !important;
}
.athenaPerformancePage .rwPill.wrong {
  color: #dc2626 !important;
}
.athenaPerformancePage .rwPill.wrong i {
  color: #dc2626 !important;
}

/* 4. Score Progression Bar Chart */
.athenaPerformancePage .perfTrendSummaryBadges {
  display: flex;
  align-items: center;
  gap: 8px;
}
.athenaPerformancePage .perfTrendStatPill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
}
.athenaPerformancePage .perfTrendStatPill strong {
  color: #0f172a !important;
}
.athenaPerformancePage .perfTrendStatPill.best {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857 !important;
}
.athenaPerformancePage .perfTrendStatPill.best strong {
  color: #047857 !important;
}

.athenaPerformancePage .perfTrendChartWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
}

.athenaPerformancePage .perfTrendBarsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 220px;
  padding: 14px 10px 8px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 12px;
}

.athenaPerformancePage .perfTrendBarCol {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
}

.athenaPerformancePage .perfTrendBarVal {
  font-size: 10px;
  font-weight: 700;
  color: #334155 !important;
  white-space: nowrap;
}
.athenaPerformancePage .perfTrendBarVal.TopScore {
  color: #059669 !important;
}
.athenaPerformancePage .perfTrendBarVal.AverageScore {
  color: #d97706 !important;
}
.athenaPerformancePage .perfTrendBarVal.LowScore {
  color: #dc2626 !important;
}

.athenaPerformancePage .perfTrendBarTrack {
  width: 100%;
  max-width: 26px;
  flex: 1;
  background: #e2e8f0;
  border-radius: 7px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.athenaPerformancePage .perfTrendBarFill {
  width: 100%;
  border-radius: 7px;
  transition: height 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.15s ease;
}
.athenaPerformancePage .perfTrendBarFill.TopScore {
  background: linear-gradient(180deg, #10b981, #059669);
}
.athenaPerformancePage .perfTrendBarFill.AverageScore {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}
.athenaPerformancePage .perfTrendBarFill.LowScore {
  background: linear-gradient(180deg, #ef4444, #dc2626);
}
.athenaPerformancePage .perfTrendBarCol:hover .perfTrendBarFill {
  filter: brightness(1.1);
}

.athenaPerformancePage .perfTrendBarLabel {
  font-size: 9.5px;
  font-weight: 600;
  color: #64748b !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.athenaPerformancePage .perfTrendFooterHint {
  font-size: 11.5px;
  color: #94a3b8 !important;
  text-align: center;
}

.athenaPerformancePage .perfEmptyMiniState {
  padding: 36px 18px;
  text-align: center;
  color: #64748b !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.athenaPerformancePage .perfEmptyMiniState i {
  font-size: 28px;
  color: #94a3b8 !important;
}
.athenaPerformancePage .perfEmptyMiniState p {
  font-size: 12.5px;
  max-width: 300px;
  margin: 0;
}

/* 5. Section Heading & Session Card Mini Breakdown */
.athenaPerformancePage .athenaPerfSectionHeading {
  width: 100%;
  margin: 4px 0 12px 0;
}
.athenaPerformancePage .athenaPerfSectionHeading h2 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0;
}
.athenaPerformancePage .athenaPerfSectionHeading p {
  font-size: 12.5px;
  color: #64748b !important;
  margin: 2px 0 0 0;
}

.athenaPerformancePage .perfCardMiniBreakdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.athenaPerformancePage .miniBreakPill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.athenaPerformancePage .miniBreakPill.right {
  background: #ecfdf5;
  color: #047857 !important;
}
.athenaPerformancePage .miniBreakPill.right i {
  color: #047857 !important;
}
.athenaPerformancePage .miniBreakPill.wrong {
  background: #fef2f2;
  color: #dc2626 !important;
}
.athenaPerformancePage .miniBreakPill.wrong i {
  color: #dc2626 !important;
}
.athenaPerformancePage .miniBreakPill.unattended {
  background: #f1f5f9;
  color: #475569 !important;
}
.athenaPerformancePage .miniBreakPill.unattended i {
  color: #64748b !important;
}

/* Responsive Breakpoints for Performance Page */
@media (max-width: 1180px) {
  .athenaPerformancePage .athenaPerfStatsGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .athenaPerformancePage .athenaPerfStatCard.card-total,
  .athenaPerformancePage .athenaPerfStatCard.card-attended,
  .athenaPerformancePage .athenaPerfStatCard.card-unattended {
    grid-column: span 2;
  }
  .athenaPerformancePage .athenaPerfStatCard.card-right,
  .athenaPerformancePage .athenaPerfStatCard.card-wrong {
    grid-column: span 3;
  }
  .athenaPerformancePage .athenaPerfAnalyticsGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .athenaPerformancePage .athenaPerfStatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .athenaPerformancePage .athenaPerfStatCard.card-total {
    grid-column: 1 / -1;
  }
  .athenaPerformancePage .athenaPerfStatCard.card-attended,
  .athenaPerformancePage .athenaPerfStatCard.card-unattended,
  .athenaPerformancePage .athenaPerfStatCard.card-right,
  .athenaPerformancePage .athenaPerfStatCard.card-wrong {
    grid-column: span 1;
  }
  .athenaPerformancePage .athenaPerfStatCard {
    padding: 13px 14px;
  }
  .athenaPerformancePage .perfStatNumber {
    font-size: 22px;
  }
  .athenaPerformancePage .perfPanelControls {
    width: 100%;
    justify-content: space-between;
  }
  .athenaPerformancePage .perfMasteryTabGroup {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .athenaPerformancePage .perfMasterySortSelect {
    width: 100%;
    height: 35px;
  }
}


/* ==========================================================================
   Create Practice Test Page (Scoped to .athenaCreateTestPage)
   ========================================================================== */
.athenaCreateTestPage {
  width: 100%;
  padding-bottom: 48px;
}

.athenaCreateTestPage .athenaSrOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 1. Simplified Header & Compact Metadata */
.athenaCreateTestPage .athenaCreateHeader {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 20px;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.athenaCreateTestPage .athenaCreateHeaderMain {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.athenaCreateTestPage .athenaCreateHeaderTitle h1 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.25;
}

.athenaCreateTestPage .athenaCreateSubtitle {
  font-size: 14px !important;
  color: #64748b !important;
  margin: 4px 0 0 0 !important;
  line-height: 1.4;
}

.athenaCreateTestPage .athenaBackLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155 !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.athenaCreateTestPage .athenaBackLink i {
  color: #5434e2 !important;
  font-size: 15px;
}

.athenaCreateTestPage .athenaBackLink:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a !important;
}

.athenaCreateTestPage .athenaHeaderMetaBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  font-size: 13px;
  color: #475569;
}

.athenaCreateTestPage .athenaMetaChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.athenaCreateTestPage .athenaMetaChip .metaLabel {
  color: #64748b !important;
  font-weight: 400;
}

.athenaCreateTestPage .athenaMetaChip strong {
  color: #1e293b !important;
  font-weight: 600;
}

.athenaCreateTestPage .athenaMetaDivider {
  width: 1px;
  height: 14px;
  background: #cbd5e1;
}

/* 2. Responsive Two-Column Grid Layout */
.athenaCreateTestPage .athenaTestBuilder {
  margin-top: 0 !important;
}

.athenaCreateTestPage .athenaTestBuilder form {
  width: 100%;
  display: block;
}

.athenaCreateTestPage .athenaCreateLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  width: 100%;
}

.athenaCreateTestPage .athenaCreateConfigCol {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

main.athenaCreateMain,
main:has(.athenaCreateTestPage) {
  overflow: visible !important;
  overflow-x: clip !important;
}

.athenaCreateTestPage .athenaCreateSummaryCol {
  position: -webkit-sticky;
  position: sticky;
  top: 84px;
  align-self: start;
  z-index: 20;
  min-width: 0;
}

/* 3. Section Cards */
.athenaCreateTestPage .athenaSectionCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.athenaCreateTestPage .athenaSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.athenaCreateTestPage .athenaSectionHead h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.3;
}

.athenaCreateTestPage .athenaSectionDesc {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 4px 0 0 0 !important;
  line-height: 1.45;
}

/* 4. Accessible Radio & Selection Cards (Test mode, Question pool, Topic scope) */
.athenaCreateTestPage .athenaModeRadioGrid,
.athenaCreateTestPage .athenaTopicScopeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.athenaCreateTestPage .athenaPoolRadioGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.athenaCreateTestPage .athenaChoiceCard {
  position: relative;
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 76px;
}

.athenaCreateTestPage .athenaPoolCard {
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.athenaCreateTestPage .athenaChoiceCard:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.athenaCreateTestPage .athenaChoiceCard input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.athenaCreateTestPage .athenaChoiceCard:has(input[type="radio"]:checked) {
  background: #f5f3ff;
  border-color: #5434e2;
  box-shadow: 0 0 0 1px rgba(84, 52, 226, 0.12);
}

.athenaCreateTestPage .athenaChoiceCard:has(input[type="radio"]:focus-visible) {
  outline: 2px solid #5434e2;
  outline-offset: 2px;
}

.athenaCreateTestPage .athenaRadioIndicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  background: #ffffff;
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.athenaCreateTestPage .athenaChoiceCard:has(input[type="radio"]:checked) .athenaRadioIndicator {
  border-color: #5434e2;
  background: #5434e2;
}

.athenaCreateTestPage .athenaChoiceCard:has(input[type="radio"]:checked) .athenaRadioIndicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.athenaCreateTestPage .athenaChoiceBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.athenaCreateTestPage .athenaChoiceTitle {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 1.3;
}

.athenaCreateTestPage .athenaChoiceDesc {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #475569 !important;
  line-height: 1.45;
}

.athenaCreateTestPage .athenaPoolCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.athenaCreateTestPage .athenaPoolTitleGroup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.athenaCreateTestPage .athenaPoolTitleGroup .athenaRadioIndicator {
  margin-top: 0;
}

.athenaCreateTestPage .athenaPoolCountBadge {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: #f1f5f9;
  padding: 2px 9px;
  border-radius: 6px;
  line-height: 1.4;
}

.athenaCreateTestPage .athenaChoiceCard:has(input[type="radio"]:checked) .athenaPoolCountBadge {
  background: #ede9fe;
  color: #5434e2 !important;
}

/* Secondary Bank Progress Statistics */
.athenaCreateTestPage .athenaBankMasteryWrap {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.athenaCreateTestPage .athenaBankMasteryLabels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #64748b !important;
}

.athenaCreateTestPage .athenaBankLegend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #64748b !important;
}

.athenaCreateTestPage .athenaBankLegend .legendItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.athenaCreateTestPage .athenaBankLegend .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.athenaCreateTestPage .athenaBankLegend .dot.correct {
  background: #16a34a;
}

.athenaCreateTestPage .athenaBankLegend .dot.incorrect {
  background: #dc2626;
}

.athenaCreateTestPage .athenaBankLegend .dot.unused {
  background: #cbd5e1;
}

.athenaCreateTestPage .athenaBankMasteryTrack {
  width: 100%;
  height: 5px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.athenaCreateTestPage .athenaBankMasteryTrack .barSeg {
  height: 100%;
  transition: width 0.3s ease;
}

.athenaCreateTestPage .athenaBankMasteryTrack .barSeg.correct {
  background: #16a34a;
}

.athenaCreateTestPage .athenaBankMasteryTrack .barSeg.incorrect {
  background: #dc2626;
}

/* 5. Topics Section: All Topics Notice, Removable Chips, Searchable Subjects & Systems */
.athenaCreateTestPage .athenaInlineStatus {
  font-size: 12px;
  font-weight: 500;
  color: #5434e2 !important;
}

.athenaCreateTestPage .athenaAllTopicsNotice {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #475569 !important;
  line-height: 1.45;
}

.athenaCreateTestPage .athenaAllTopicsNotice strong {
  color: #0f172a !important;
  font-weight: 600;
}

.athenaCreateTestPage .athenaSelectedChipsBar {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.athenaCreateTestPage .athenaSelectedChipsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.athenaCreateTestPage .athenaSelectedChipsHeader .chipsTitle {
  font-size: 12px;
  font-weight: 600;
  color: #475569 !important;
}

.athenaCreateTestPage .athenaTextActionBtn {
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 500;
  color: #5434e2 !important;
  cursor: pointer;
  border-radius: 4px;
}

.athenaCreateTestPage .athenaTextActionBtn:hover {
  background: #f3f0ff;
  text-decoration: underline;
}

.athenaCreateTestPage .athenaSelectedChipsList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 110px;
  overflow-y: auto;
}

.athenaCreateTestPage .athenaTopicChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  color: #1e293b !important;
  line-height: 1.3;
}

.athenaCreateTestPage .athenaTopicChip .chipKind {
  color: #64748b !important;
  font-weight: 500;
}

.athenaCreateTestPage .athenaTopicChip .chipLabel {
  font-weight: 500;
  color: #0f172a !important;
}

.athenaCreateTestPage .athenaTopicChip .chipCount {
  color: #64748b !important;
  font-size: 11.5px;
}

.athenaCreateTestPage .athenaRemoveChipBtn {
  background: transparent;
  border: none;
  color: #64748b !important;
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  margin-left: 2px;
  cursor: pointer;
  border-radius: 4px;
}

.athenaCreateTestPage .athenaRemoveChipBtn:hover {
  color: #dc2626 !important;
  background: #fee2e2;
}

.athenaCreateTestPage .athenaTopicsCustomPanel {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.athenaCreateTestPage .athenaTopicGroup {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.athenaCreateTestPage .athenaTopicGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.athenaCreateTestPage .athenaTopicGroupTitleWrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.athenaCreateTestPage .athenaTopicGroupTitleWrap h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.athenaCreateTestPage .athenaSelectionCountPill {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

.athenaCreateTestPage .athenaSelectionCountPill.active {
  color: #5434e2 !important;
  font-weight: 600 !important;
}

.athenaCreateTestPage .athenaTopicGroupControls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.athenaCreateTestPage .athenaQuickFilter {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.athenaCreateTestPage .athenaQuickFilter i {
  position: absolute;
  left: 10px;
  font-size: 14px;
  color: #94a3b8 !important;
  pointer-events: none;
}

.athenaCreateTestPage .athenaQuickFilter input[type="text"] {
  width: 190px !important;
  height: 34px !important;
  padding: 4px 10px 4px 30px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  outline: none;
}

.athenaCreateTestPage .athenaQuickFilter input[type="text"]:focus {
  border-color: #5434e2 !important;
}

.athenaCreateTestPage .athenaBulkBtnGroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.athenaCreateTestPage .athenaMiniActionBtn {
  height: 34px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155 !important;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.athenaCreateTestPage .athenaMiniActionBtn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.athenaCreateTestPage .athenaMiniActionBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid {
  padding: 14px 16px !important;
  margin-top: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid[style*="display: none"],
.athenaCreateTestPage .athenaTopicCheckboxGrid[style*="display:none"] {
  display: none !important;
}

.athenaCreateTestPage .athenaTopicGroup:has(.athenaTopicCheckboxGrid[style*="display: none"]),
.athenaCreateTestPage .athenaTopicGroup:has(.athenaTopicCheckboxGrid[style*="display:none"]) {
  display: none !important;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formGroupCont4 {
  flex: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox {
  margin: 0 !important;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox:has(input:checked) {
  background: #f5f3ff;
  border-color: #5434e2;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox:has(input:disabled) {
  opacity: 0.5;
  background: #f8fafc;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox label {
  flex: 1;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox label:before {
  padding: 7px !important;
  border-radius: 4px !important;
  border: 1.5px solid #94a3b8 !important;
  background: #ffffff;
  margin-right: 9px !important;
  flex-shrink: 0;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox input:checked + label:before {
  background: #5434e2 !important;
  border-color: #5434e2 !important;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox input:checked + label:after {
  top: 50% !important;
  left: 6px !important;
  width: 4px !important;
  height: 8px !important;
  margin-top: -5px;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #f1f5f9;
  border: none !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  margin-left: auto !important;
  flex-shrink: 0;
}

.athenaCreateTestPage .athenaTopicCheckboxGrid .formCheckbox:has(input:checked) span {
  background: #ede9fe;
  color: #5434e2 !important;
}

.athenaCreateTestPage .athenaEmptyText {
  grid-column: 1 / -1;
  margin: 4px 0;
  font-size: 13px;
  color: #64748b !important;
}

/* 6. Number of Questions Section */
.athenaCreateTestPage .athenaEstTimePill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f5f3ff;
  color: #5434e2 !important;
}

.athenaCreateTestPage .athenaEstTimePill i {
  color: #5434e2 !important;
}

.athenaCreateTestPage .athenaCountControlsWrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.athenaCreateTestPage .athenaQuickPresetRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.athenaCreateTestPage .athenaQuickPresetRow .presetLabel {
  font-size: 13px;
  font-weight: 500;
  color: #475569 !important;
  margin-right: 4px;
}

.athenaCreateTestPage .athenaPresetChip {
  min-width: 52px;
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b !important;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.athenaCreateTestPage .athenaPresetChip:hover:not(:disabled) {
  border-color: #5434e2;
  background: #f8fafc;
}

.athenaCreateTestPage .athenaPresetChip.active {
  background: #f5f3ff !important;
  color: #5434e2 !important;
  border-color: #5434e2 !important;
}

.athenaCreateTestPage .athenaPresetChip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f8fafc;
}

.athenaCreateTestPage .athenaNumericInputRow {
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.athenaCreateTestPage .athenaNumericLabel {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  margin-right: 4px;
}

.athenaCreateTestPage .athenaNumberStepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.athenaCreateTestPage .athenaNumberStepper:focus-within {
  border-color: #5434e2;
  box-shadow: 0 0 0 2px rgba(84, 52, 226, 0.14);
}

.athenaCreateTestPage .athenaStepBtn {
  width: 38px;
  height: 40px;
  border: none;
  background: #f8fafc;
  color: #334155 !important;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.athenaCreateTestPage .athenaStepBtn:hover:not(:disabled) {
  background: #f1f5f9;
  color: #5434e2 !important;
}

.athenaCreateTestPage .athenaStepBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.athenaCreateTestPage .athenaNumericInputRow input.maxAllowedBlockBtn {
  width: 126px !important;
  min-width: 120px !important;
  height: 40px !important;
  border: none !important;
  border-left: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  text-align: center;
  background: #ffffff;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield;
}

.athenaCreateTestPage .athenaNumericInputRow input.maxAllowedBlockBtn::-webkit-outer-spin-button,
.athenaCreateTestPage .athenaNumericInputRow input.maxAllowedBlockBtn::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.athenaCreateTestPage .athenaNumericInputRow input.maxAllowedBlockBtn::placeholder {
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  text-align: center;
}

.athenaCreateTestPage .athenaNumericInputRow input.maxAllowedBlockBtn:focus {
  outline: none;
  box-shadow: none !important;
}

.athenaCreateTestPage .athenaAvailableInlineNote {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.athenaCreateTestPage .athenaFieldError {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: #dc2626 !important;
}

/* 7. Sticky Test Summary Card (Right Column) */
.athenaCreateTestPage .athenaStickySummaryCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.athenaCreateTestPage .athenaSummaryCardHead {
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.athenaCreateTestPage .athenaSummaryCardHead h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.athenaCreateTestPage .athenaSummaryList {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.athenaCreateTestPage .athenaSummaryRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.athenaCreateTestPage .athenaSummaryRow dt {
  color: #64748b !important;
  font-weight: 400;
  margin: 0;
}

.athenaCreateTestPage .athenaSummaryRow dd {
  color: #0f172a !important;
  font-weight: 600;
  margin: 0;
  text-align: right;
}

.athenaCreateTestPage .athenaSummaryRow dd.is-unset,
.athenaCreateTestPage .athenaSummaryRow dd .is-unset {
  color: #94a3b8 !important;
  font-weight: 400;
}

.athenaCreateTestPage .athenaSummaryRowHighlight {
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.athenaCreateTestPage .athenaCreateErrorBanner {
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

.athenaCreateTestPage .athenaCreateErrorBanner .errorBannerContent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.athenaCreateTestPage .athenaCreateErrorBanner i {
  color: #dc2626 !important;
  font-size: 18px;
  line-height: 1.2;
}

.athenaCreateTestPage .athenaCreateErrorBanner strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #991b1b !important;
}

.athenaCreateTestPage .athenaCreateErrorBanner p {
  margin: 2px 0 0 0;
  font-size: 12.5px;
  color: #b91c1c !important;
  line-height: 1.4;
}

.athenaCreateTestPage .athenaSummaryActionFooter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.athenaCreateTestPage .athenaMobileSummaryStrip {
  display: none;
}

.athenaCreateTestPage .athenaNextStepHint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #64748b !important;
  font-weight: 400;
}

.athenaCreateTestPage .athenaNextStepHint.ready {
  color: #15803d !important;
  font-weight: 500;
}

.athenaCreateTestPage .athenaPrimaryActionWrap {
  margin-top: 0 !important;
  width: 100%;
}

.athenaCreateTestPage .athenaPrimaryActionWrap .generateExamBtn {
  width: 100%;
  min-height: 44px;
  padding: 12px 20px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none;
  background: #5434e2 !important;
  color: #ffffff !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.athenaCreateTestPage .athenaPrimaryActionWrap .generateExamBtn:hover:not(:disabled) {
  background: #4327c7 !important;
}

.athenaCreateTestPage .athenaPrimaryActionWrap .generateExamBtn:disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  cursor: not-allowed;
}

/* 8. Responsive Breakpoints & Mobile Bottom Action Bar */
@media (max-width: 960px) {
  .athenaCreateTestPage {
    padding-bottom: 32px;
  }

  .athenaCreateTestPage .athenaCreateLayout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .athenaCreateTestPage .athenaCreateSummaryCol {
    position: static;
  }

  .athenaCreateTestPage .athenaSummaryActionFooter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 90;
    background: #ffffff;
    border-top: 1px solid #cbd5e1;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
    padding: 10px 16px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .athenaCreateTestPage .athenaSummaryActionFooter .athenaNextStepHint {
    display: none;
  }

  .athenaCreateTestPage .athenaMobileSummaryStrip {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  .athenaCreateTestPage .athenaMobileSummaryStrip .mobileStripPrimary {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a !important;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .athenaCreateTestPage .athenaMobileSummaryStrip .mobileStripSecondary {
    font-size: 11px;
    color: #64748b !important;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .athenaCreateTestPage .athenaPrimaryActionWrap {
    width: auto;
    flex: 0 0 auto;
    flex-shrink: 0;
    max-width: 52%;
  }

  .athenaCreateTestPage .athenaPrimaryActionWrap .generateExamBtn {
    width: auto;
    min-height: 40px;
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .athenaCreateTestPage .athenaCreateHeader {
    padding: 16px;
  }

  .athenaCreateTestPage .athenaSectionCard {
    padding: 16px;
  }

  .athenaCreateTestPage .athenaModeRadioGrid,
  .athenaCreateTestPage .athenaPoolRadioGrid,
  .athenaCreateTestPage .athenaTopicScopeGrid {
    grid-template-columns: 1fr;
  }

  .athenaCreateTestPage .athenaQuickFilter,
  .athenaCreateTestPage .athenaQuickFilter input[type="text"] {
    width: 100% !important;
  }
}


/* Runner Save Status Pill & Mobile Split-View Collapse */
.athenaRunnerSaveStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}
.athenaRunnerSaveStatus.saving {
  background: #fef3c7;
  color: #92400e;
}
.athenaRunnerSaveStatus.saved {
  background: #dcfce7;
  color: #166534;
}
.athenaRunnerSaveStatus.error {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 960px) {
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox {
    flex-direction: column !important;
  }
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .examQuestionRead,
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .examQuestionWrite {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   TEST RESULT & QUESTION REVIEW HUB (.athenaTestResultPage)
   ========================================================================== */
.athenaTestResultPage .athenaResultHero {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}

.athenaTestResultPage .athenaResultHeroLeft {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.athenaTestResultPage .athenaResultBackRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.athenaTestResultPage .athenaResultBackLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #5434e2 !important;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.athenaTestResultPage .athenaResultBackLink i {
  color: #5434e2 !important;
  font-size: 15px;
}
.athenaTestResultPage .athenaResultBackLink:hover {
  opacity: 0.8;
}
.athenaTestResultPage .athenaResultCrumbSep {
  color: #cbd5e1 !important;
}

.athenaTestResultPage .athenaResultTitleRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.athenaTestResultPage .athenaResultTitleRow h1 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.athenaTestResultPage .athenaResultExamIdBadge {
  font-size: 16px;
  font-weight: 700;
  color: #5434e2 !important;
  background: #f3f0ff;
  border: 1px solid #ddd6fe;
  padding: 2px 10px;
  border-radius: 8px;
}
.athenaTestResultPage .athenaResultExamIdBadge:empty {
  display: none;
}

.athenaTestResultPage .athenaResultMetaPills {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.athenaTestResultPage .resMetaPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
}
.athenaTestResultPage .resMetaPill i {
  color: inherit !important;
  font-size: 13.5px;
}
.athenaTestResultPage .resMetaPill.mode {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #5434e2 !important;
}
.athenaTestResultPage .resMetaPill.status-completed {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857 !important;
}
.athenaTestResultPage .resMetaPill.status-progress {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309 !important;
}

.athenaTestResultPage .athenaResultHeroActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.athenaTestResultPage .athenaReviewWrongBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 15px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626 !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.16s ease;
}
.athenaTestResultPage .athenaReviewWrongBtn i {
  color: #dc2626 !important;
  font-size: 16px;
}
.athenaTestResultPage .athenaReviewWrongBtn:hover {
  background: #fee2e2;
  transform: translateY(-1px);
}

.athenaTestResultPage .resumeTestBtn {
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #5434e2, #6f52ed) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(84, 52, 226, 0.22);
}
.athenaTestResultPage .resumeTestBtn i,
.athenaTestResultPage .resumeTestBtn span {
  color: #ffffff !important;
}

/* 1. 5-Card KPI Summary Strip */
.athenaTestResultPage .athenaResultStatsGrid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.athenaTestResultPage .athenaResultStatsGrid.four-col-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.athenaTestResultPage .athenaResultStatCard {
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-top: 3.5px solid #5434e2;
  border-radius: 14px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.athenaTestResultPage .athenaResultStatCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.athenaTestResultPage .athenaResultStatCard.card-total {
  border-top-color: #5434e2;
}
.athenaTestResultPage .athenaResultStatCard.card-right {
  border-top-color: #10b981;
}
.athenaTestResultPage .athenaResultStatCard.card-wrong {
  border-top-color: #ef4444;
}
.athenaTestResultPage .athenaResultStatCard.card-unattended {
  border-top-color: #f59e0b;
}
.athenaTestResultPage .athenaResultStatCard.card-score {
  border-top-color: #0284c7;
}

.athenaTestResultPage .resStatTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.athenaTestResultPage .resStatLabel {
  font-size: 12px;
  font-weight: 600;
  color: #475569 !important;
  line-height: 1.25;
}

.athenaTestResultPage .resStatIcon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}
.athenaTestResultPage .resStatIcon.total {
  background: #f3f0ff;
  color: #5434e2 !important;
}
.athenaTestResultPage .resStatIcon.right {
  background: #ecfdf5;
  color: #059669 !important;
}
.athenaTestResultPage .resStatIcon.wrong {
  background: #fef2f2;
  color: #dc2626 !important;
}
.athenaTestResultPage .resStatIcon.unattended {
  background: #fffbeb;
  color: #d97706 !important;
}
.athenaTestResultPage .resStatIcon.score {
  background: #e0f2fe;
  color: #0284c7 !important;
}
.athenaTestResultPage .resStatIcon i {
  color: inherit !important;
}

.athenaTestResultPage .resStatNumber {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a !important;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.athenaTestResultPage .resStatHint {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b !important;
}

/* 2. Session Breakdown & Quick Question Map Card */
.athenaTestResultPage .athenaResultOverviewCard {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.athenaTestResultPage .resOverviewTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.athenaTestResultPage .resOverviewTitleGroup h2 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0;
}
.athenaTestResultPage .resOverviewTitleGroup p {
  font-size: 12px;
  color: #64748b !important;
  margin: 2px 0 0 0;
}

.athenaTestResultPage .resOverviewLegend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #475569 !important;
}
.athenaTestResultPage .resOverviewLegend .legendItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.athenaTestResultPage .resOverviewLegend strong {
  color: #0f172a !important;
  font-weight: 700;
}
.athenaTestResultPage .resOverviewLegend .legendDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.athenaTestResultPage .resOverviewLegend .legendDot.right {
  background: #10b981;
}
.athenaTestResultPage .resOverviewLegend .legendDot.wrong {
  background: #ef4444;
}
.athenaTestResultPage .resOverviewLegend .legendDot.unattended {
  background: #cbd5e1;
}

.athenaTestResultPage .resStackedBarTrack {
  width: 100%;
  height: 11px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  display: flex;
  gap: 2px;
}
.athenaTestResultPage .resStackedSegment {
  height: 100%;
  transition: width 0.35s ease;
}
.athenaTestResultPage .resStackedSegment.right {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.athenaTestResultPage .resStackedSegment.wrong {
  background: linear-gradient(90deg, #ef4444, #f87171);
}
.athenaTestResultPage .resStackedSegment.unattended {
  background: #cbd5e1;
}

.athenaTestResultPage .resQuestionMapGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 116px;
  overflow-y: auto;
  padding-top: 2px;
}

.athenaTestResultPage .resMapChip {
  min-width: 38px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.athenaTestResultPage .resMapChip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1);
}
.athenaTestResultPage .resMapChip.status-right {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857 !important;
}
.athenaTestResultPage .resMapChip.status-wrong {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626 !important;
}
.athenaTestResultPage .resMapChip.status-unattended {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b !important;
}

/* 3. Interactive Filter & Search Toolbar */
.athenaTestResultPage .athenaResultToolbar {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}

.athenaTestResultPage .resFilterPills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.athenaTestResultPage .resFilterPill {
  height: 36px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.athenaTestResultPage .resFilterPill i {
  color: inherit !important;
  font-size: 14px;
}
.athenaTestResultPage .resFilterPill .pillCount {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: inherit !important;
}
.athenaTestResultPage .resFilterPill.active {
  background: #5434e2 !important;
  border-color: #5434e2 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.22);
}
.athenaTestResultPage .resFilterPill.active .pillCount {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff !important;
}
.athenaTestResultPage .resFilterPill.pill-right.active {
  background: #059669 !important;
  border-color: #059669 !important;
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.22);
}
.athenaTestResultPage .resFilterPill.pill-wrong.active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.22);
}

.athenaTestResultPage .resToolbarRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
  min-width: 280px;
}

.athenaTestResultPage .resSubjectFilterWrap,
.athenaTestResultPage .resSearchInputWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.athenaTestResultPage .resSubjectFilterWrap i,
.athenaTestResultPage .resSearchInputWrap i {
  position: absolute;
  left: 11px;
  font-size: 15px;
  color: #64748b !important;
  pointer-events: none;
}

.athenaTestResultPage .resSubjectFilterWrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
}

.athenaTestResultPage .resSubjectSelect {
  height: 36px;
  padding: 0 28px 0 32px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a !important;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  width: auto;
  min-width: 160px;
  max-width: 480px;
  box-sizing: border-box;
}
.athenaTestResultPage .resSubjectSelect:focus {
  border-color: #5434e2;
  background: #ffffff;
}

.athenaTestResultPage .resSearchInputWrap {
  flex: 1;
  max-width: 280px;
  min-width: 200px;
}
.athenaTestResultPage .resSearchInputWrap input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a !important;
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.athenaTestResultPage .resSearchInputWrap input:focus {
  border-color: #5434e2;
  background: #ffffff;
}

/* 4. Rich Question Review Cards Grid */
.athenaTestResultPage .athenaResultQuestionGrid {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 0 !important;
}

.athenaTestResultPage .examResultListBox.athenaResultCard {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  height: auto !important;
  min-height: 154px;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e6e5ef !important;
  border-left: 4.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
  text-decoration: none !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
  overflow: hidden;
}
.athenaTestResultPage .examResultListBox.athenaResultCard:hover:not(.is-disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}
.athenaTestResultPage .examResultListBox.athenaResultCard.card-right {
  border-left-color: #10b981 !important;
}
.athenaTestResultPage .examResultListBox.athenaResultCard.card-wrong {
  border-left-color: #ef4444 !important;
}
.athenaTestResultPage .examResultListBox.athenaResultCard.card-unattended {
  border-left-color: #f59e0b !important;
  background: #fcfcfd !important;
}

.athenaTestResultPage .resCardTopRow {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.athenaTestResultPage .resCardIdentity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.athenaTestResultPage .resCardTitleGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.athenaTestResultPage .athenaResultCard .examResultIcon {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}
.athenaTestResultPage .athenaResultCard .examResultIcon.rightAnswerIcon {
  background: #ecfdf5 !important;
  color: #059669 !important;
}
.athenaTestResultPage .athenaResultCard .examResultIcon.rightAnswerIcon i {
  color: #059669 !important;
}
.athenaTestResultPage .athenaResultCard .examResultIcon.wrongAnswerIcon {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}
.athenaTestResultPage .athenaResultCard .examResultIcon.wrongAnswerIcon i {
  color: #dc2626 !important;
}
.athenaTestResultPage .athenaResultCard .examResultIcon.unattendedAnswerIcon {
  background: #fffbeb !important;
  color: #d97706 !important;
}
.athenaTestResultPage .athenaResultCard .examResultIcon.unattendedAnswerIcon i {
  color: #d97706 !important;
}

.athenaTestResultPage .resCardQNum {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a !important;
  white-space: nowrap;
}

.athenaTestResultPage .resCardPkId {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: #64748b !important;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.athenaTestResultPage .resCardStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.athenaTestResultPage .resCardStatusBadge i {
  color: inherit !important;
  font-size: 12px;
}
.athenaTestResultPage .resCardStatusBadge.right {
  background: #ecfdf5;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}
.athenaTestResultPage .resCardStatusBadge.wrong {
  background: #fef2f2;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
}
.athenaTestResultPage .resCardStatusBadge.unattended {
  background: #fffbeb;
  color: #b45309 !important;
  border: 1px solid #fde68a;
}

.athenaTestResultPage .resCardSnippet {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #334155 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.athenaTestResultPage .resCardBottomRow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.athenaTestResultPage .resCardTags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.athenaTestResultPage .resMetaTag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.athenaTestResultPage .resMetaTag i {
  color: inherit !important;
  font-size: 12px;
}
.athenaTestResultPage .resMetaTag.subject {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #5434e2 !important;
}
.athenaTestResultPage .resMetaTag.qtype {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155 !important;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.athenaTestResultPage .resCardActionLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #5434e2 !important;
  white-space: nowrap;
  margin-left: auto;
}
.athenaTestResultPage .resCardActionLink i {
  color: #5434e2 !important;
  transition: transform 0.15s ease;
}
.athenaTestResultPage .athenaResultCard:hover .resCardActionLink i {
  transform: translateX(3px);
}

.athenaTestResultPage .resCardUnattendedNote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #b45309 !important;
  white-space: nowrap;
  margin-left: auto;
}
.athenaTestResultPage .resCardUnattendedNote i {
  color: #b45309 !important;
}

.athenaTestResultPage .resEmptyFilterState {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 38px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.athenaTestResultPage .resEmptyFilterState .resEmptyIcon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f3f0ff;
  color: #5434e2 !important;
  display: grid;
  place-items: center;
  font-size: 24px;
}
.athenaTestResultPage .resEmptyFilterState .resEmptyIcon i {
  color: #5434e2 !important;
}
.athenaTestResultPage .resEmptyFilterState h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 4px 0 0;
}
.athenaTestResultPage .resEmptyFilterState p {
  font-size: 13px;
  color: #64748b !important;
  margin: 0 0 8px;
}
.athenaTestResultPage .resResetFilterBtn {
  height: 36px;
  padding: 0 16px;
  border-radius: 9px;
  border: none;
  background: #5434e2 !important;
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* 5. Test Result Pagination Bar */
.athenaTestResultPage .athenaResultPagination {
  position: static !important;
  height: auto !important;
  z-index: auto !important;
  width: 100%;
  margin-top: 22px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e6e5ef;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.025);
}

.athenaTestResultPage .resPageInfo {
  font-size: 13px;
  color: #64748b !important;
}
.athenaTestResultPage .resPageInfo strong {
  color: #0f172a !important;
  font-weight: 700;
}

.athenaTestResultPage .resPageControls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.athenaTestResultPage .resPageBtn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.athenaTestResultPage .resPageBtn i {
  font-size: 16px;
  color: inherit !important;
}
.athenaTestResultPage .resPageBtn:hover:not([disabled]):not(.active) {
  border-color: #5434e2;
  color: #5434e2 !important;
  background: #f5f3ff !important;
}
.athenaTestResultPage .resPageBtn.active {
  background: #5434e2 !important;
  border-color: #5434e2 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.24);
}
.athenaTestResultPage .resPageBtn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.athenaTestResultPage .resPageEllipsis {
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8 !important;
}

/* Responsive Breakpoints for Test Result Page */
@media (max-width: 1280px) {
  .athenaTestResultPage .athenaResultQuestionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  .athenaTestResultPage .athenaResultStatsGrid,
  .athenaTestResultPage .athenaResultStatsGrid.four-col-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .athenaTestResultPage .athenaResultStatsGrid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .athenaTestResultPage .resToolbarRight {
    width: 100%;
    justify-content: stretch;
  }
  .athenaTestResultPage .resSubjectFilterWrap,
  .athenaTestResultPage .resSubjectSelect,
  .athenaTestResultPage .resSearchInputWrap {
    flex: 1;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .athenaTestResultPage .athenaResultQuestionGrid {
    grid-template-columns: 1fr !important;
  }
  .athenaTestResultPage .athenaResultHero {
    flex-direction: column;
    align-items: flex-start;
  }
  .athenaTestResultPage .athenaResultHeroActions {
    width: 100%;
  }
  .athenaTestResultPage .athenaReviewWrongBtn,
  .athenaTestResultPage .resumeTestBtn {
    flex: 1;
    justify-content: center;
  }
  .athenaTestResultPage .athenaResultPagination {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  .athenaTestResultPage .athenaResultStatsGrid,
  .athenaTestResultPage .athenaResultStatsGrid.four-col-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .athenaTestResultPage .resFilterPills {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .athenaTestResultPage .resFilterPill {
    justify-content: center;
  }
  .athenaTestResultPage .resToolbarRight {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }
}

/* ==========================================================================
   REVIEW EXAM QUESTION VIEW (.athenaReviewPage)
   ========================================================================== */
.canvas.athenaReviewPage .canvasMain .breadCrumbs.athenaReviewTopBar {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 22px;
  margin-top: 16px;
  margin-bottom: 18px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.athenaReviewPage .athenaReviewUtilityBar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.athenaReviewPage .athenaReviewTopRow {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.athenaReviewPage .athenaReviewTitleGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.athenaReviewPage .athenaReviewBackBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #5434e2 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  opacity: 1 !important;
  transition: all 0.18s ease;
}

.athenaReviewPage .athenaReviewBackBtn:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #3b1fc4 !important;
  transform: translateX(-2px);
}

.athenaReviewPage .athenaReviewHeadingWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.athenaReviewPage .athenaReviewHeadingWrap h1 {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.athenaReviewPage .athenaReviewQCounter {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 8px;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  color: #4338ca;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.athenaReviewPage .athenaReviewMetaPills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.athenaReviewPage .revMetaPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.athenaReviewPage .revMetaPill i {
  font-size: 14px;
}

.athenaReviewPage .revMetaPill.status-right {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.athenaReviewPage .revMetaPill.status-wrong {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.athenaReviewPage .revMetaPill.question-id {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  font-weight: 600;
}

.athenaReviewPage .revMetaPill.test-id {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.athenaReviewPage .revMetaPill.subject {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #e0e7ff;
}

.athenaReviewPage .revMetaPill.system {
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #ccfbf1;
}

.athenaReviewPage .athenaReviewNavActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.athenaReviewPage .revNavBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 10px;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b !important;
  opacity: 1 !important;
  transition: all 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}

.athenaReviewPage .revNavBtn:hover:not(.is-disabled) {
  border-color: #5434e2;
  color: #5434e2 !important;
  background: #f5f3ff;
  transform: translateY(-1px);
}

.athenaReviewPage .revNavBtn.next {
  background: #5434e2;
  border-color: #5434e2;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.22);
}

.athenaReviewPage .revNavBtn.next:hover:not(.is-disabled) {
  background: #4324ce;
  border-color: #4324ce;
  color: #ffffff !important;
}

.athenaReviewPage .revNavBtn.wrong-jump {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c !important;
}

.athenaReviewPage .revNavBtn.wrong-jump:hover:not(.is-disabled) {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #9f1239 !important;
}

.athenaReviewPage .FullscreenCloseBox.revNavBtn.minimize-screen {
  position: static !important;
  top: auto !important;
  right: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid #312e81 !important;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  box-shadow: 0 4px 12px rgba(30, 27, 75, 0.22) !important;
  z-index: 5;
}

.athenaReviewPage .FullscreenCloseBox.revNavBtn.minimize-screen i,
.athenaReviewPage .FullscreenCloseBox.revNavBtn.minimize-screen span {
  margin-right: 0 !important;
  color: #ffffff !important;
}

.athenaReviewPage .FullscreenCloseBox.revNavBtn.minimize-screen i {
  font-size: 15px !important;
}

.athenaReviewPage .FullscreenCloseBox.revNavBtn.minimize-screen:hover {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 100%) !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(67, 56, 202, 0.3) !important;
}

.athenaReviewPage .athenaReviewBackBtn span,
.athenaReviewPage .athenaReviewBackBtn i,
.athenaReviewPage .revNavBtn span,
.athenaReviewPage .revNavBtn i,
.athenaReviewPage .revBottomBtn span,
.athenaReviewPage .revBottomBtn i,
.athenaTestResultPage .athenaReviewWrongBtn span,
.athenaTestResultPage .athenaReviewWrongBtn i,
.athenaTestResultPage .resumeTestBtn span,
.athenaTestResultPage .resumeTestBtn i,
.athenaTestResultPage .athenaResultBackLink span,
.athenaTestResultPage .athenaResultBackLink i {
  color: inherit !important;
}

.athenaReviewPage .revNavBtn.is-disabled {
  opacity: 0.42 !important;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}

/* Interactive Question Switcher Strip */
.athenaReviewPage .athenaReviewQuestionStrip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 2px;
}

.athenaReviewPage .revStripLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  flex-shrink: 0;
}

.athenaReviewPage .revStripLabel i {
  color: #5434e2;
  font-size: 15px;
}

.athenaReviewPage .revStripChips {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 6px;
  scrollbar-width: thin;
  flex: 1 1 0%;
}

.athenaReviewPage .revStripChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: all 0.16s ease;
  flex-shrink: 0;
}

.athenaReviewPage .revStripChip.status-right {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.athenaReviewPage .revStripChip.status-wrong {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.athenaReviewPage .revStripChip.status-unattended {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.athenaReviewPage .revStripChip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.athenaReviewPage .revStripChip.is-current {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #5434e2;
  font-weight: 800;
}

/* Framed Exam Question Container & Legend */
.athenaReviewPage .examCanvas .examCanvasBody {
  margin-top: 0 !important;
  transition: opacity 0.14s ease;
}

.athenaReviewPage .examCanvas .examCanvasBody.is-switching {
  opacity: 0.55;
  pointer-events: none;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.04);
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image: url(../images/athena.png);
  background-size: 16px;
  background-repeat: space;
  transform: rotate(-45deg) scale(20);
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox > * {
  position: relative;
  z-index: 1;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info {
  position: relative;
  z-index: 25 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info p {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1 !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .infoBtn {
  position: relative;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .infoBtn .infoDescription {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60 !important;
  width: 310px;
  max-width: calc(100vw - 48px);
  padding: 12px 15px !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox > h1,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionWrite > h1 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 1.65 !important;
  margin-bottom: 6px;
}

/* 3-Color Answer Key Legend */
.athenaReviewPage .explanationBoxIdentify {
  flex-wrap: wrap;
  gap: 10px !important;
  margin-top: 16px !important;
  margin-bottom: 10px;
  padding: 10px 14px !important;
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.athenaReviewPage .explanationBoxIdentify .redBox,
.athenaReviewPage .explanationBoxIdentify .greenBox,
.athenaReviewPage .explanationBoxIdentify .blueBox {
  display: inline-flex;
  align-items: center;
  gap: 7px !important;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.athenaReviewPage .explanationBoxIdentify .redBox {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.athenaReviewPage .explanationBoxIdentify .greenBox {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.athenaReviewPage .explanationBoxIdentify .blueBox {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #075985;
}

.athenaReviewPage .explanationBoxIdentify .redBox p,
.athenaReviewPage .explanationBoxIdentify .greenBox p,
.athenaReviewPage .explanationBoxIdentify .blueBox p {
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Scannable Option Cards for Single & Multiple Choice */
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li {
  margin-top: 10px !important;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: rgba(252, 253, 255, 0.72);
  align-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li p,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li p {
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  color: #1e293b;
  margin-top: 0 !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li:has(.correctAnsewrCheck),
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li:has(.correctAnsewrCheck) {
  background: rgba(240, 253, 244, 0.78);
  border-color: #86efac;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li:has(.wrongAnsewrCheck),
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li:has(.wrongAnsewrCheck) {
  background: rgba(254, 242, 242, 0.78);
  border-color: #fca5a5;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .objectiveTypeExam ul li:has(.correctAnsewr:not(.correctAnsewrCheck)),
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .multipleTypeExam ul li:has(.correctAnsewr:not(.correctAnsewrCheck)) {
  background: rgba(240, 249, 255, 0.78);
  border-color: #7dd3fc;
}

/* Horizontal Status Banner & Clinical Rationale Card */
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation {
  margin-top: 24px !important;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation {
  width: 100%;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px 10px;
  padding: 16px 20px !important;
  border-radius: 12px !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation i {
  font-size: 24px !important;
  line-height: 1;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation h4 {
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation > p {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 4px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(220, 38, 38, 0.16);
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .answerExplanation > p:empty {
  display: none !important;
}

.athenaReviewPage .revCorrectAnsWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.athenaReviewPage .revCorrectAnsTitle {
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7f1d1d !important;
}

.athenaReviewPage .revCorrectAnsList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.athenaReviewPage .revCorrectAnsItem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 9px 13px;
  background: #ffffff;
  border: 1px solid #fecaca;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b !important;
  line-height: 1.45;
}

.athenaReviewPage .revCorrectAnsItem i {
  font-size: 17px !important;
  color: #16a34a !important;
  margin-top: 2px;
  flex-shrink: 0;
}

.athenaReviewPage .revCorrectAnsItem span {
  color: #1e293b !important;
}

.athenaReviewPage .revCorrectAnsSingle {
  font-size: 14px;
  font-weight: 600;
  color: #475569 !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .wronAnswer {
  border: 1px solid #fecaca !important;
  background: rgba(254, 242, 242, 0.78) !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .wronAnswer > i,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .wronAnswer > h4 {
  color: #dc2626 !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .rightAnswer {
  border: 1px solid #bbf7d0 !important;
  background: rgba(240, 253, 244, 0.78) !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .rightAnswer > i,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationHead .rightAnswer > h4 {
  color: #16a34a !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody {
  margin-top: 16px !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #5434e2;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: break-word;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody > h2:first-child {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}

.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #1e293b;
  margin: 0 0 12px 0;
}
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody p:last-child {
  margin-bottom: 0;
}

/* Bottom Navigation Bar */
.athenaReviewPage .athenaReviewBottomNav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 24px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.athenaReviewPage .revBottomBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b !important;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.athenaReviewPage .revBottomBtn:hover:not(.is-disabled) {
  border-color: #5434e2;
  color: #5434e2 !important;
  background: #f5f3ff;
  transform: translateY(-1px);
}

.athenaReviewPage .revBottomBtn.back-list {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569 !important;
}

.athenaReviewPage .revBottomBtn.back-list:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a !important;
}

.athenaReviewPage .revBottomBtn.next {
  background: #5434e2;
  border-color: #5434e2;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.22);
}

.athenaReviewPage .revBottomBtn.next:hover:not(.is-disabled) {
  background: #4324ce;
  border-color: #4324ce;
  color: #ffffff !important;
}

.athenaReviewPage .revBottomBtn.is-disabled {
  opacity: 0.42 !important;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 768px) {
  .canvas.athenaReviewPage .canvasMain .breadCrumbs.athenaReviewTopBar {
    padding: 14px 16px;
  }
  .athenaReviewPage .athenaReviewTopRow {
    flex-direction: column;
    align-items: flex-start;
  }
  .athenaReviewPage .athenaReviewNavActions {
    width: 100%;
  }
  .athenaReviewPage .athenaReviewNavActions .revNavBtn {
    flex: 1;
  }
  .athenaReviewPage .athenaReviewQuestionStrip {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .athenaReviewPage .revStripChips {
    width: 100%;
  }
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox {
    padding: 18px 16px;
  }
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody {
    padding: 14px 14px !important;
  }
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody > h2:first-child {
    font-size: 14.5px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
  }
  .athenaReviewPage .athenaReviewBottomNav {
    flex-direction: column;
    align-items: stretch;
  }
  .athenaReviewPage .revBottomBtn {
    width: 100%;
  }
}

/* ==========================================================================
   ATHENA MODERN PROFILE PAGE (.athenaProfilePage)
   ========================================================================== */

.canvas.athenaProfilePage .canvasMain {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 22px;
  padding-bottom: 36px;
}

/* 1. Compact Profile Identity Hero */
.athenaProfilePage .athenaProfileHero {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  position: relative;
}

.athenaProfilePage .athenaProfileHeroBanner {
  height: 76px;
  background: linear-gradient(125deg, #4324ce 0%, #5434e2 48%, #7c3aed 100%);
  position: relative;
}

.athenaProfilePage .athenaProfileHeroBanner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 55%);
  pointer-events: none;
}

.athenaProfilePage .athenaProfileHeroBody {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 28px 24px 28px;
  margin-top: 0;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.athenaProfilePage .athenaProfileIdentity {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.athenaProfilePage .athenaProfileAvatarWrap {
  width: 98px;
  height: 98px;
  margin-top: -52px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: #f8fafc;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
}

.athenaProfilePage .athenaProfileAvatarWrap img.user_profile_pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.athenaProfilePage .athenaProfileAvatarEditBtn {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #5434e2;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(84, 52, 226, 0.32);
  transition: transform 0.18s ease, background 0.18s ease;
  padding: 0;
}

.athenaProfilePage .athenaProfileAvatarEditBtn i {
  color: #ffffff !important;
  font-size: 15px;
  line-height: 1;
}

.athenaProfilePage .athenaProfileAvatarWrap:hover .athenaProfileAvatarEditBtn {
  transform: scale(1.08);
  background: #4324ce;
}

.athenaProfilePage .athenaProfileMeta {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.athenaProfilePage .athenaProfileTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.athenaProfilePage .athenaProfileTitleRow h2 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0;
  line-height: 1.25;
}

.athenaProfilePage .athenaProfileBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.athenaProfilePage .athenaProfileBadge i,
.athenaProfilePage .athenaProfileBadge span {
  color: inherit !important;
}

.athenaProfilePage .athenaProfileBadge.status-active {
  background: #ecfdf5;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}

.athenaProfilePage .athenaProfileBadge.category-badge {
  background: #f5f3ff;
  color: #5434e2 !important;
  border: 1px solid #ddd6fe;
}

.athenaProfilePage .athenaProfileBadge.role-badge {
  background: #f1f5f9;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
}

.athenaProfilePage .athenaProfileContactRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.athenaProfilePage .athenaProfileContactChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155 !important;
  font-size: 13px;
}

.athenaProfilePage .athenaProfileContactChip i {
  color: #5434e2 !important;
  font-size: 15px;
}

.athenaProfilePage .athenaProfileContactChip p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #334155 !important;
}

.athenaProfilePage .athenaProfileHeroActions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 0;
  flex-wrap: wrap;
}

.athenaProfilePage .athenaProfHeroBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}

.athenaProfilePage .athenaProfHeroBtn span,
.athenaProfilePage .athenaProfHeroBtn i {
  color: inherit !important;
}

.athenaProfilePage .athenaProfHeroBtn.primary {
  background: #5434e2;
  border-color: #5434e2;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.22);
}

.athenaProfilePage .athenaProfHeroBtn.primary:hover {
  background: #4324ce;
  border-color: #4324ce;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.athenaProfilePage .athenaProfHeroBtn.secondary {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b !important;
}

.athenaProfilePage .athenaProfHeroBtn.secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a !important;
}

/* 2. Unified 5-Card Performance Strip & Progress Bar */
.athenaProfilePage .profilePerfomance.athenaProfilePerfCard {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
  padding: 24px 28px;
  margin-top: 0 !important;
}

.athenaProfilePage .athenaProfileSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.athenaProfilePage .athenaProfileSectionTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.athenaProfilePage .athenaProfileSectionTitle h2 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0 !important;
}

.athenaProfilePage .athenaProfileExamCountPill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #eef2ff;
  color: #4338ca !important;
  border: 1px solid #c7d2fe;
}

.athenaProfilePage .athenaProfileAnalyticsLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #5434e2 !important;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  padding: 7px 13px;
  border-radius: 9px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.athenaProfilePage .athenaProfileAnalyticsLink span,
.athenaProfilePage .athenaProfileAnalyticsLink i {
  color: inherit !important;
}

.athenaProfilePage .athenaProfileAnalyticsLink:hover {
  background: #5434e2;
  border-color: #5434e2;
  color: #ffffff !important;
}

.athenaProfilePage .profilePerfomanceMian.athenaProfileKpiGrid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 0 !important;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox {
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 18px 16px 18px !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox .kpiTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox .kpiLabel {
  font-size: 13px;
  font-weight: 600;
  color: #334155 !important;
  line-height: 1.3;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox .kpiIcon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox .kpiIcon i {
  color: inherit !important;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 2px 0 !important;
  color: #0f172a !important;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox .kpiSub {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin: 0 !important;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-total {
  background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%) !important;
  border-color: #ddd6fe;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-total .kpiIcon {
  background: #5434e2;
  color: #ffffff !important;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-total h1 {
  color: #4324ce !important;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-attended {
  background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #bfdbfe;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-attended .kpiIcon {
  background: #2563eb;
  color: #ffffff !important;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-attended h1 {
  color: #1d4ed8 !important;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-unattended {
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: #fde68a;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-unattended .kpiIcon {
  background: #d97706;
  color: #ffffff !important;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-unattended h1 {
  color: #b45309 !important;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-right {
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-color: #a7f3d0;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-right .kpiIcon {
  background: #059669;
  color: #ffffff !important;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-right h1 {
  color: #047857 !important;
}

.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-wrong {
  background: linear-gradient(145deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border-color: #fecdd3;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-wrong .kpiIcon {
  background: #e11d48;
  color: #ffffff !important;
}
.athenaProfilePage .athenaProfileKpiGrid .perfomanceBox.kpi-wrong h1 {
  color: #be123c !important;
}

/* Visual Question Breakdown Bar */
.athenaProfilePage .athenaProfileProgressWrap {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.athenaProfilePage .athenaProfileProgressMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}

.athenaProfilePage .progMetaTitle {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b !important;
}

.athenaProfilePage .progLegendRow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.athenaProfilePage .progLegendItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #475569 !important;
}

.athenaProfilePage .progLegendItem strong {
  color: #0f172a !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.athenaProfilePage .progLegendItem .legendPct,
.athenaProfilePage .progLegendItem .legendPct span {
  color: #64748b !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.athenaProfilePage .progLegendItem .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.athenaProfilePage .progLegendItem .dot.right { background: #10b981; }
.athenaProfilePage .progLegendItem .dot.wrong { background: #f43f5e; }
.athenaProfilePage .progLegendItem .dot.unattend { background: #f59e0b; }

.athenaProfilePage .athenaProfileStackedBar {
  height: 10px;
  width: 100%;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.athenaProfilePage .athenaProfileStackedBar .barSeg {
  height: 100%;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.athenaProfilePage .athenaProfileStackedBar .barSeg.right { background: #10b981; }
.athenaProfilePage .athenaProfileStackedBar .barSeg.wrong { background: #f43f5e; }
.athenaProfilePage .athenaProfileStackedBar .barSeg.unattend { background: #fbbf24; }

/* 3. Interactive Account Settings & Quick Links Hub */
.athenaProfilePage .athenaProfileHubGrid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 22px;
  align-items: start;
}

.athenaProfilePage .athenaProfileSettingsCard,
.athenaProfilePage .profileMenu.athenaProfileMenuCard {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
  padding: 24px 28px;
  margin-top: 0 !important;
}

/* Settings Tabs */
.athenaProfilePage .athenaProfileTabsHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 22px;
}

.athenaProfilePage .athenaProfileTabBtn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #475569 !important;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.athenaProfilePage .athenaProfileTabBtn span,
.athenaProfilePage .athenaProfileTabBtn i {
  color: inherit !important;
}

.athenaProfilePage .athenaProfileTabBtn:hover:not(.active) {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.65);
}

.athenaProfilePage .athenaProfileTabBtn.active {
  background: #5434e2;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.24);
}

/* Inline Avatar Row */
.athenaProfilePage .profInlineAvatarRow {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  margin-bottom: 20px;
}

.athenaProfilePage .profInlineAvatarBox {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  flex-shrink: 0;
}

.athenaProfilePage .profInlineAvatarBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.athenaProfilePage .profInlineAvatarOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.athenaProfilePage .profInlineAvatarOverlay i {
  color: #ffffff !important;
  font-size: 18px;
}

.athenaProfilePage .profInlineAvatarBox:hover .profInlineAvatarOverlay {
  opacity: 1;
}

.athenaProfilePage .profInlineAvatarInfo h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0 0 3px 0;
}

.athenaProfilePage .profInlineAvatarInfo p {
  font-size: 12px;
  color: #64748b !important;
  margin: 0 0 8px 0;
}

.athenaProfilePage .profUploadTriggerBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155 !important;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.athenaProfilePage .profUploadTriggerBtn i {
  color: #5434e2 !important;
}

.athenaProfilePage .profUploadTriggerBtn:hover {
  border-color: #5434e2;
  color: #5434e2 !important;
  background: #f5f3ff;
}

/* Inline Form Fields */
.athenaProfilePage .profFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.athenaProfilePage .profFormField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.athenaProfilePage .profFormField.full-width {
  grid-column: 1 / -1;
}

.athenaProfilePage .profFormField label {
  font-size: 13px;
  font-weight: 600;
  color: #334155 !important;
}

.athenaProfilePage .profInputWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.athenaProfilePage .profInputWrap > i {
  position: absolute;
  left: 13px;
  color: #64748b !important;
  font-size: 16px;
  pointer-events: none;
}

.athenaProfilePage .profInputWrap input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 38px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 14px;
  color: #0f172a !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.athenaProfilePage .profInputWrap input:focus {
  outline: none;
  border-color: #5434e2;
  box-shadow: 0 0 0 3px rgba(84, 52, 226, 0.12);
}

.athenaProfilePage .profPwdEyeBtn {
  position: absolute;
  right: 10px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #64748b !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.athenaProfilePage .profPwdEyeBtn i {
  color: inherit !important;
  font-size: 16px;
}

.athenaProfilePage .profPwdEyeBtn:hover {
  color: #0f172a !important;
  background: #f1f5f9;
}

.athenaProfilePage .profFormFeedback {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.athenaProfilePage .profHeroAvatarFeedback {
  margin: 0 28px 20px 28px;
}

@media (max-width: 768px) {
  .athenaProfilePage .profHeroAvatarFeedback {
    margin: 0 16px 16px 16px;
  }
}

.athenaProfilePage .profFormFeedback span,
.athenaProfilePage .profFormFeedback i {
  color: inherit !important;
}

.athenaProfilePage .profFormFeedback.is-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857 !important;
}

.athenaProfilePage .profFormFeedback.is-error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c !important;
}

.athenaProfilePage .profFormFeedback.is-info {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #4338ca !important;
}

.athenaProfilePage .profFormActions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.athenaProfilePage .profPrimarySubmitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid #5434e2;
  background: #5434e2;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(84, 52, 226, 0.22);
  transition: all 0.18s ease;
}

.athenaProfilePage .profPrimarySubmitBtn span,
.athenaProfilePage .profPrimarySubmitBtn i {
  color: #ffffff !important;
}

.athenaProfilePage .profPrimarySubmitBtn:hover:not(:disabled) {
  background: #4324ce;
  border-color: #4324ce;
  transform: translateY(-1px);
}

.athenaProfilePage .profPrimarySubmitBtn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Right Column: Quick Actions & Links Card */
.athenaProfilePage .athenaProfileMenuHead {
  margin-bottom: 16px;
}

.athenaProfilePage .athenaProfileMenuHead h3 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0 0 4px 0;
}

.athenaProfilePage .athenaProfileMenuHead p {
  font-size: 13px;
  color: #64748b !important;
  margin: 0;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard ul li {
  margin: 0 !important;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  text-decoration: none;
  transition: all 0.18s ease;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard ul li a:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  transform: translateX(2px);
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuIconWrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuIconWrap i {
  color: inherit !important;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuIconWrap.purple {
  background: #ede9fe;
  color: #5434e2 !important;
}
.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuIconWrap.blue {
  background: #dbeafe;
  color: #2563eb !important;
}
.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuIconWrap.teal {
  background: #ccfbf1;
  color: #0d9488 !important;
}
.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuIconWrap.amber {
  background: #fef3c7;
  color: #d97706 !important;
}
.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuIconWrap.rose {
  background: #ffe4e6;
  color: #e11d48 !important;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuTextWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuTextWrap strong {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a !important;
  line-height: 1.25;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuTextWrap small {
  font-size: 12px;
  color: #64748b !important;
  line-height: 1.3;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard .menuArrow {
  font-size: 18px;
  color: #94a3b8 !important;
  transition: transform 0.18s ease, color 0.18s ease;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard ul li a:hover .menuArrow {
  transform: translateX(3px);
  color: #5434e2 !important;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard ul li a.dangerLogoutLink:hover {
  border-color: #fecdd3;
  background: #fff1f2;
}

.athenaProfilePage .profileMenu.athenaProfileMenuCard ul li a.dangerLogoutLink:hover .menuTextWrap strong,
.athenaProfilePage .profileMenu.athenaProfileMenuCard ul li a.dangerLogoutLink:hover .menuArrow {
  color: #be123c !important;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .athenaProfilePage .profilePerfomanceMian.athenaProfileKpiGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .athenaProfilePage .athenaProfileHubGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .athenaProfilePage .athenaProfileHeroBody {
    padding: 16px 18px 20px 18px;
    flex-direction: column;
    align-items: flex-start;
  }
  .athenaProfilePage .athenaProfileIdentity {
    width: 100%;
    align-items: center;
  }
  .athenaProfilePage .athenaProfileMeta {
    padding-top: 0;
    width: 100%;
  }
  .athenaProfilePage .athenaProfileTitleRow {
    gap: 8px;
  }
  .athenaProfilePage .athenaProfileTitleRow h2 {
    flex: 1 1 100%;
    width: 100%;
    margin-bottom: 2px;
  }
  .athenaProfilePage .athenaProfileHeroActions {
    padding-top: 2px;
    width: 100%;
  }
  .athenaProfilePage .athenaProfHeroBtn {
    flex: 1;
  }
  .athenaProfilePage .profilePerfomance.athenaProfilePerfCard,
  .athenaProfilePage .athenaProfileSettingsCard,
  .athenaProfilePage .profileMenu.athenaProfileMenuCard {
    padding: 18px 16px;
  }
  .athenaProfilePage .athenaProfileSectionHead {
    gap: 10px;
  }
  .athenaProfilePage .athenaProfileSectionTitle {
    display: contents;
  }
  .athenaProfilePage .athenaProfileSectionHead h2 {
    flex: 1 1 100%;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a !important;
    margin: 0 !important;
  }
  .athenaProfilePage .profilePerfomanceMian.athenaProfileKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .athenaProfilePage .profFormGrid {
    grid-template-columns: 1fr;
  }
  .athenaProfilePage .profInlineAvatarRow {
    flex-direction: column;
    align-items: flex-start;
  }
  .athenaProfilePage .profPrimarySubmitBtn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .athenaProfilePage .athenaProfileIdentity {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .athenaProfilePage .profilePerfomanceMian.athenaProfileKpiGrid {
    grid-template-columns: 1fr !important;
  }
  .athenaProfilePage .athenaProfileTabsHeader {
    flex-direction: column;
  }
  .athenaProfilePage .athenaProfileTabBtn {
    width: 100%;
  }
}

/* Custom Confirmation & Warning Popup Modals (Unsaved Changes & Logout) */
.athenaProfModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.athenaProfModalCard {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  padding: 28px 26px 24px 26px;
  text-align: center;
  animation: athenaProfModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes athenaProfModalPop {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.athenaProfModalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #f8fafc;
  color: #64748b !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
}

.athenaProfModalClose i {
  color: inherit !important;
  font-size: 18px;
}

.athenaProfModalClose:hover {
  background: #f1f5f9;
  color: #0f172a !important;
}

.athenaProfModalIconWrap {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fffbeb;
  border: 2px solid #fde68a;
  color: #d97706 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.14);
}

.athenaProfModalIconWrap i {
  color: #d97706 !important;
  font-size: 28px;
  line-height: 1;
}

.athenaProfModalIconWrap.is-danger {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #e11d48 !important;
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.14);
}

.athenaProfModalIconWrap.is-danger i {
  color: #e11d48 !important;
}

.athenaProfModalCard h3 {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0 0 8px 0;
}

.athenaProfModalCard p {
  font-size: 14px;
  line-height: 1.55;
  color: #475569 !important;
  margin: 0 0 22px 0;
}

.athenaProfModalActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.athenaProfModalBtn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}

.athenaProfModalBtn span,
.athenaProfModalBtn i {
  color: inherit !important;
}

.athenaProfModalBtn.stay {
  background: #5434e2;
  border-color: #5434e2;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(84, 52, 226, 0.24);
}

.athenaProfModalBtn.stay:hover {
  background: #4324ce;
  border-color: #4324ce;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.athenaProfModalBtn.discard {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c !important;
}

.athenaProfModalBtn.discard:hover {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #9f1239 !important;
}

.athenaProfModalBtn.cancel-neutral {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155 !important;
}

.athenaProfModalBtn.cancel-neutral:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a !important;
}

.athenaProfModalBtn.confirm-danger {
  background: #e11d48;
  border-color: #e11d48;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.24);
}

.athenaProfModalBtn.confirm-danger:hover {
  background: #be123c;
  border-color: #be123c;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .athenaProfModalActions {
    flex-direction: column;
  }
  .athenaProfModalBtn {
    width: 100%;
  }
}

/* Smooth Animated KPI Card Numbers */
.athenaAnimatedNum {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.athenaAnimatedNum.is-counting {
  animation: athenaCardNumReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes athenaCardNumReveal {
  0% {
    opacity: 0.35;
    transform: translateY(6px) scale(0.94);
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.perfAnimatedBlock {
  animation: athenaPerfBlockFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes athenaPerfBlockFadeUp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Modernized Interactive Sidemenu (Mobile Drawer & Desktop Left Sidebar)
   ========================================================================== */

/* 1. Mobile Slide-Out Drawer (.mobileSidemenu.athenaModernMobileDrawer) */
@media (max-width: 1024px) {
  html.athena-mobile-drawer-open,
  body.athena-mobile-drawer-open,
  html:has(.mobileSidemenu.mobileSidemenuActive),
  body:has(.mobileSidemenu.mobileSidemenuActive) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

.mobileSidemenu.athenaModernMobileDrawer {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 86% !important;
  max-width: 330px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  border-radius: 24px 0 0 24px !important;
  background: #f8fafc !important;
  box-shadow: -16px 0 45px rgba(15, 23, 42, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-transition: right 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition: right 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuHead {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 26px 18px 22px !important;
  background: linear-gradient(135deg, #2e1065 0%, #4c1d95 52%, #6d28d9 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  touch-action: none;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuHead::before {
  content: "";
  position: absolute;
  top: -45px;
  right: -35px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuHead .mobileSidemenuHeadProfile {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding-right: 36px !important;
  position: relative !important;
  z-index: 2 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileThumbnail {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 50% !important;
  border: 2.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileThumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileName {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-left: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileName h1,
.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuHead .mobileSidemenuHeadProfile .mobileSidemenuHeadProfileName h1.side_user_name {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  max-width: 100% !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileDrawerMetaRow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileDrawerRolePill,
.mobileSidemenu.athenaModernMobileDrawer #mobileDrawerMetaPill {
  padding: 4px 11px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  letter-spacing: 0.01em !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mobileSidemenu.athenaModernMobileDrawer .mobileDrawerRolePill i,
.mobileSidemenu.athenaModernMobileDrawer .mobileDrawerRolePill span,
.mobileSidemenu.athenaModernMobileDrawer #mobileDrawerMetaPill i,
.mobileSidemenu.athenaModernMobileDrawer #mobileDrawerMetaPill span,
.mobileSidemenu.athenaModernMobileDrawer #mobileDrawerCatText {
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.mobileSidemenuCloseBtn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease !important;
  z-index: 3 !important;
}

.mobileSidemenuCloseBtn i {
  font-size: 19px !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

.mobileSidemenuCloseBtn:hover,
.mobileSidemenuCloseBtn:active {
  background: rgba(255, 255, 255, 0.26) !important;
  transform: scale(1.06);
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody {
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #f8fafc !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuScrollArea {
  width: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y;
  padding: 14px 14px 18px !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileDrawerSectionLabel {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #475569 !important;
  padding: 6px 8px 6px !important;
  margin-top: 2px !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList {
  width: 100% !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  list-style: none !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a span {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: #f3e8ff !important;
  color: #5b21b6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a span i {
  font-size: 18px !important;
  margin: 0 !important;
  color: #5b21b6 !important;
  line-height: 1 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a p {
  flex: 1 1 auto !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a i.drawerChevron {
  font-size: 17px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  color: #64748b !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a:hover,
.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a:active {
  border-color: #c4b5fd !important;
  background: #faf5ff !important;
  transform: translateX(2px);
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a:hover i.drawerChevron {
  transform: translateX(3px);
  color: #5b21b6 !important;
}

/* Active Page State in Mobile Drawer */
.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileSidemenuActive {
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%) !important;
  border-color: #4c1d95 !important;
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.26) !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileSidemenuActive span {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileSidemenuActive span i,
.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileSidemenuActive p,
.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileSidemenuActive i.drawerChevron {
  color: #ffffff !important;
}

/* Danger Logout Row in Mobile Drawer */
.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileDrawerLogoutLink {
  margin-top: 2px !important;
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileDrawerLogoutLink span {
  background: #ffe4e6 !important;
  color: #e11d48 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileDrawerLogoutLink span i {
  color: #e11d48 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileDrawerLogoutLink p {
  color: #be123c !important;
  font-weight: 700 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileDrawerLogoutLink i.drawerChevron {
  color: #e11d48 !important;
}

.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody ul.mobileDrawerNavList li a.mobileDrawerLogoutLink:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
}

/* Footer inside Mobile Drawer */
.mobileSidemenu.athenaModernMobileDrawer .sidemenuFooter,
.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody .sidemenuFooter {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
  touch-action: none;
}

.mobileSidemenu.athenaModernMobileDrawer .sidemenuFooter p,
.mobileSidemenu.athenaModernMobileDrawer .mobileSidemenuBody .sidemenuFooter p {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  opacity: 1 !important;
  margin: 1px 0 !important;
}

/* 2. Desktop Left Sidebar Enhancements (.sidemenu) */
.sidemenu,
.sidemenu.athenaModernDesktopSidemenu {
  top: 64px !important;
  height: calc(100vh - 64px) !important;
  z-index: 90 !important;
  padding: 16px 12px 72px !important;
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  transition: none !important;
}

.sidemenu.expandSidemenu,
.sidemenu.athenaModernDesktopSidemenu.expandSidemenu {
  display: none !important;
}

.sidemenu.sidemenuExpant .athenaSidemenuGroupLabel,
.sidemenu.sidemenuExpant ul li a p,
.sidemenu.sidemenuExpant .sidemenuFooter {
  display: none !important;
}

.sidemenu.sidemenuExpant ul li a {
  justify-content: center !important;
  padding: 9px 0 !important;
}

@media (max-width: 1024px) {
  .sidemenu,
  .sidemenu.athenaModernDesktopSidemenu {
    display: none !important;
  }
}

.sidemenu .athenaSidemenuGroupLabel {
  width: 100% !important;
  padding: 6px 12px 8px !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #64748b !important;
  line-height: 1.2 !important;
}

.sidemenu .athenaSidemenuGroupLabel.support-group {
  margin-top: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.sidemenu ul {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: visible !important;
}

.sidemenu ul + ul {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.sidemenu .athenaSidemenuGroupLabel + ul {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.sidemenu ul li {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.sidemenu ul li a,
.sidemenu ul li a:focus,
.sidemenu ul li a:active,
.sidemenu ul li a:visited {
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

.sidemenu ul li a span {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 9px !important;
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.sidemenu ul li a span i {
  font-size: 17px !important;
  color: #5b21b6 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.sidemenu ul li a p {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidemenu ul li a:hover {
  background: #f1f5f9 !important;
  transform: translateX(2px);
}

.sidemenu ul li a:hover span {
  background: #ede9fe !important;
  color: #4c1d95 !important;
}

.sidemenu ul li a:hover p {
  color: #0f172a !important;
}

/* Active Page Item in Desktop Sidebar */
.sidemenu ul li a.sidemenuActive,
.sidemenu ul li a.sidemenuActive:hover,
.sidemenu ul li a.sidemenuActive:focus,
.sidemenu ul li a.sidemenuActive:active {
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.22) !important;
}

.sidemenu ul li a.sidemenuActive span,
.sidemenu ul li a.sidemenuActive:hover span {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.sidemenu ul li a.sidemenuActive span i,
.sidemenu ul li a.sidemenuActive p,
.sidemenu ul li a.sidemenuActive:hover span i,
.sidemenu ul li a.sidemenuActive:hover p {
  color: #ffffff !important;
}

/* Logout Item in Desktop Sidebar */
.sidemenu ul li a[href*="logout_action.php"] span,
.sidemenu ul li a.sidemenuLogoutLink span {
  background: #fff1f2 !important;
  color: #e11d48 !important;
}

.sidemenu ul li a[href*="logout_action.php"] span i,
.sidemenu ul li a.sidemenuLogoutLink span i {
  color: #e11d48 !important;
}

.sidemenu ul li a[href*="logout_action.php"] p,
.sidemenu ul li a.sidemenuLogoutLink p {
  color: #be123c !important;
}

.sidemenu ul li a[href*="logout_action.php"]:hover,
.sidemenu ul li a.sidemenuLogoutLink:hover {
  background: #fff1f2 !important;
}

.sidemenu ul li a[href*="logout_action.php"]:hover span,
.sidemenu ul li a.sidemenuLogoutLink:hover span {
  background: #ffe4e6 !important;
}

.sidemenu ul li a[href*="logout_action.php"]:hover p,
.sidemenu ul li a[href*="logout_action.php"]:hover span,
.sidemenu ul li a[href*="logout_action.php"]:hover i,
.sidemenu ul li a.sidemenuLogoutLink:hover p,
.sidemenu ul li a.sidemenuLogoutLink:hover span,
.sidemenu ul li a.sidemenuLogoutLink:hover i {
  color: #be123c !important;
}

/* Desktop Sidebar Footer */
.sidemenu .sidemenuFooter {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}

.sidemenu .sidemenuFooter p {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  opacity: 1 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Desktop Sidebar Collapse/Expand Toggle Tab (.expandBtn) */
.sidemenu .expandBtn {
  position: absolute !important;
  right: -24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 64px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: 4px 0 14px rgba(15, 23, 42, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 30 !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, width 0.18s ease, right 0.18s ease !important;
}

.sidemenu .expandBtn i {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #5b21b6 !important;
  line-height: 1 !important;
  transition: transform 0.22s ease, color 0.18s ease !important;
}

.sidemenu .expandBtn:hover {
  background: #f5f3ff !important;
  border-color: #a78bfa !important;
  box-shadow: 5px 0 16px rgba(109, 40, 217, 0.18) !important;
  width: 27px !important;
  right: -27px !important;
}

.sidemenu .expandBtn:hover i {
  color: #4c1d95 !important;
}

@media (max-width: 1024px) {
  .sidemenu .expandBtn {
    display: none !important;
  }
}

/* ==========================================================================
   Help & Support Center Page (user/help.php - .athenaHelpPage)
   ========================================================================== */

.canvas.athenaHelpPage,
.athenaHelpPage {
  margin-top: 0 !important;
  padding-top: 88px !important;
  padding-bottom: 110px !important;
  overflow-x: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

.athenaHelpPage .canvasContainer {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  min-width: 0;
}

/* 1. Hero Banner */
.athenaHelpHeroCard {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #2e1065 0%, #4c1d95 52%, #6d28d9 100%);
  padding: 34px 32px 30px;
  box-shadow: 0 16px 38px rgba(76, 29, 149, 0.2);
}

.athenaHelpHeroCard::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.athenaHelpHeroContent {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.athenaHelpEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.athenaHelpEyebrow i {
  color: #ffffff !important;
  font-size: 14px;
}

.athenaHelpHeroContent h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff !important;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.athenaHelpHeroContent > p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 0 20px 0;
}

.athenaHelpSearchWrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 14px;
  padding: 4px 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.athenaHelpSearchWrap:focus-within {
  border-color: #a78bfa;
  box-shadow: 0 10px 28px rgba(109, 40, 217, 0.22), 0 0 0 3px rgba(167, 139, 250, 0.25) !important;
}

.athenaHelpSearchIcon {
  font-size: 20px;
  color: #6d28d9 !important;
  margin-right: 10px;
  flex: 0 0 auto;
}

.athenaHelpSearchWrap input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 44px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  font-size: 14.5px;
  font-weight: 500;
  color: #0f172a;
  box-sizing: border-box;
}

.athenaHelpSearchWrap input:focus,
.athenaHelpSearchWrap input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.athenaHelpSearchWrap input::placeholder {
  color: #94a3b8;
  white-space: nowrap;
}

.athenaHelpSearchWrap input::-webkit-input-placeholder {
  color: #94a3b8;
  white-space: nowrap;
}

.athenaHelpSearchWrap input::-moz-placeholder {
  color: #94a3b8;
  white-space: nowrap;
}

.athenaHelpSearchClear {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #475569 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.athenaHelpSearchClear i {
  color: #475569 !important;
  font-size: 16px;
}

.athenaHelpFilterRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.athenaHelpFilterPill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.athenaHelpFilterPill:hover {
  background: rgba(255, 255, 255, 0.22);
}

.athenaHelpFilterPill.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #4c1d95 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}

/* 2. Quick-Start Guide Cards */
.athenaHelpSectionHead h2 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0 0 3px 0;
}

.athenaHelpSectionHead p {
  font-size: 13px;
  color: #64748b !important;
  margin: 0;
}

.athenaHelpGuideGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.athenaHelpGuideCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.athenaHelpGuideCard:hover {
  transform: translateY(-2px);
  border-color: #c4b5fd;
  box-shadow: 0 10px 24px rgba(109, 40, 217, 0.09);
}

.athenaHelpGuideIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.athenaHelpGuideIcon i {
  font-size: 22px;
}

.athenaHelpGuideIcon.purple {
  background: #f3e8ff;
  color: #6d28d9 !important;
}
.athenaHelpGuideIcon.purple i { color: #6d28d9 !important; }

.athenaHelpGuideIcon.emerald {
  background: #dcfce7;
  color: #059669 !important;
}
.athenaHelpGuideIcon.emerald i { color: #059669 !important; }

.athenaHelpGuideIcon.blue {
  background: #dbeafe;
  color: #2563eb !important;
}
.athenaHelpGuideIcon.blue i { color: #2563eb !important; }

.athenaHelpGuideIcon.amber {
  background: #fef3c7;
  color: #d97706 !important;
}
.athenaHelpGuideIcon.amber i { color: #d97706 !important; }

.athenaHelpGuideCard h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0 0 8px 0;
}

.athenaHelpGuideCard p {
  font-size: 13px;
  line-height: 1.55;
  color: #475569 !important;
  margin: 0 0 16px 0;
  flex: 1 1 auto;
}

.athenaHelpGuideLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #5b21b6 !important;
  text-decoration: none;
}

.athenaHelpGuideLink span,
.athenaHelpGuideLink i {
  color: #5b21b6 !important;
  transition: transform 0.18s ease;
}

.athenaHelpGuideLink:hover i {
  transform: translateX(3px);
}

/* 3. Main Two-Column Layout (FAQs + Contact/Diagnostics) */
.athenaHelpMainLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.athenaHelpFaqCard,
.athenaHelpContactCard,
.athenaHelpDiagCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.athenaHelpSideCol {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.athenaHelpCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.athenaHelpCardHead h2 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.athenaHelpCardHead h2 i {
  color: #5b21b6 !important;
  font-size: 20px;
}

.athenaHelpCardHead p {
  font-size: 13px;
  color: #64748b !important;
  margin: 0;
}

.athenaHelpCountBadge {
  padding: 5px 12px;
  border-radius: 999px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #5b21b6 !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* FAQ Accordion Items */
.athenaHelpFaqList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.athenaHelpFaqItem {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.athenaHelpFaqItem.is-open {
  background: #ffffff;
  border-color: #c4b5fd;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.06);
}

.athenaHelpFaqTrigger {
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.faqTag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.faqTag.exam {
  background: #ede9fe;
  color: #5b21b6 !important;
}

.faqTag.ngn {
  background: #dcfce7;
  color: #047857 !important;
}

.faqTag.tech {
  background: #dbeafe;
  color: #1d4ed8 !important;
}

.faqTag.account {
  background: #fef3c7;
  color: #b45309 !important;
}

.faqQuestionText {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a !important;
  line-height: 1.35;
}

.faqChevron {
  font-size: 19px;
  color: #64748b !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.athenaHelpFaqItem.is-open .faqChevron {
  transform: rotate(180deg);
  color: #5b21b6 !important;
}

.athenaHelpFaqBody {
  display: none;
  padding: 0 16px 16px 16px;
  border-top: 1px solid #f1f5f9;
}

.athenaHelpFaqBody p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #334155 !important;
  margin: 12px 0 0 0;
}

.athenaHelpFaqBody ul {
  margin: 10px 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.athenaHelpFaqBody ul li {
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155 !important;
}

/* Empty State */
.athenaHelpEmptyState {
  text-align: center;
  padding: 32px 16px;
}

.athenaHelpEmptyState i {
  font-size: 36px;
  color: #94a3b8 !important;
}

.athenaHelpEmptyState h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 10px 0 4px;
}

.athenaHelpEmptyState p {
  font-size: 13px;
  color: #64748b !important;
  margin: 0 0 14px;
}

.athenaHelpResetBtn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155 !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Support Form */
.athenaHelpForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.athenaHelpFormRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.athenaHelpFormRow label {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155 !important;
}

.athenaHelpFormRow label .optLabel {
  font-weight: 500;
  color: #94a3b8 !important;
}

.athenaHelpFormRow select,
.athenaHelpFormRow input,
.athenaHelpFormRow textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.athenaHelpFormRow select:focus,
.athenaHelpFormRow input:focus,
.athenaHelpFormRow textarea:focus {
  border-color: #6d28d9;
  background: #ffffff;
}

.athenaHelpFeedback {
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.athenaHelpFeedback.is-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46 !important;
}
.athenaHelpFeedback.is-success i,
.athenaHelpFeedback.is-success span {
  color: #065f46 !important;
}

.athenaHelpFeedback.is-error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #9f1239 !important;
}
.athenaHelpFeedback.is-error i,
.athenaHelpFeedback.is-error span {
  color: #9f1239 !important;
}

.athenaHelpSubmitBtn {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.athenaHelpSubmitBtn i,
.athenaHelpSubmitBtn span {
  color: #ffffff !important;
}

.athenaHelpSubmitBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.32);
}

/* Diagnostics Card */
.athenaHelpDiagTop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.diagIconWrap {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #f3e8ff;
  color: #5b21b6 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.diagIconWrap i {
  font-size: 20px;
  color: #5b21b6 !important;
}

.athenaHelpDiagTop h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a !important;
  margin: 0 0 2px 0;
}

.athenaHelpDiagTop p {
  font-size: 12px;
  color: #64748b !important;
  margin: 0;
}

.athenaHelpDiagList {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.diagRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.diagRow span {
  color: #64748b !important;
  font-weight: 500;
}

.diagRow strong {
  color: #0f172a !important;
  font-weight: 700;
}

.diagStatusOnline {
  color: #059669 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.diagStatusOnline .statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
}

.athenaHelpCopyDiagBtn {
  width: 100%;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155 !important;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.athenaHelpCopyDiagBtn i,
.athenaHelpCopyDiagBtn span {
  color: #334155 !important;
}

.athenaHelpCopyDiagBtn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.athenaHelpCopyDiagBtn.copied {
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.athenaHelpCopyDiagBtn.copied i,
.athenaHelpCopyDiagBtn.copied span {
  color: #047857 !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .canvas.athenaHelpPage,
  .athenaHelpPage {
    margin-top: 0 !important;
    padding-top: 84px !important;
    padding-bottom: 110px !important;
  }
  .athenaHelpPage .canvasContainer {
    padding: 0 20px;
    gap: 20px;
  }
  .athenaHelpGuideGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .athenaHelpMainLayout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .canvas.athenaHelpPage,
  .athenaHelpPage {
    margin-top: 0 !important;
    padding-top: 80px !important;
  }
  .athenaHelpPage .canvasContainer {
    padding: 0 16px;
    gap: 16px;
  }
  .athenaHelpGuideGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .athenaHelpHeroCard {
    padding: 22px 16px 20px;
    border-radius: 16px;
  }
  .athenaHelpHeroContent h1 {
    font-size: 21px;
    line-height: 1.25;
  }
  .athenaHelpHeroContent p {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .athenaHelpSearchWrap {
    padding: 2px 10px;
    border-radius: 12px;
  }
  .athenaHelpSearchIcon {
    font-size: 16px;
    margin-right: 6px;
  }
  .athenaHelpSearchWrap input {
    height: 40px;
    font-size: clamp(9.5px, 2.5vw, 11px) !important;
    letter-spacing: -0.25px !important;
  }
  .athenaHelpSearchWrap input:focus,
  .athenaHelpSearchWrap input:not(:placeholder-shown) {
    font-size: 13.5px !important;
    letter-spacing: normal !important;
  }
  .athenaHelpSearchWrap input::placeholder {
    font-size: inherit;
    letter-spacing: inherit;
  }
  .athenaHelpSearchWrap input::-webkit-input-placeholder {
    font-size: inherit;
    letter-spacing: inherit;
  }
  .athenaHelpFilterRow {
    gap: 6px;
    margin-top: 12px;
  }
  .athenaHelpFilterPill {
    padding: 5px 11px;
    font-size: 12px;
  }
  .athenaHelpGuideGrid {
    grid-template-columns: 1fr !important;
  }
  .athenaHelpGuideCard {
    padding: 16px;
    border-radius: 16px;
  }
  .athenaHelpFaqCard,
  .athenaHelpContactCard,
  .athenaHelpTicketsCard,
  .athenaHelpDiagCard {
    padding: 18px 16px;
    border-radius: 16px;
  }
  .athenaHelpFaqTrigger {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .canvas.athenaHelpPage,
  .athenaHelpPage {
    margin-top: 0 !important;
    padding-top: 76px !important;
  }
  .athenaHelpPage .canvasContainer {
    padding: 0 12px;
    gap: 14px;
  }
  .athenaHelpHeroCard {
    padding: 18px 14px 16px;
    border-radius: 14px;
  }
  .athenaHelpHeroContent h1 {
    font-size: 18.5px;
  }
  .athenaHelpEyebrow {
    font-size: 10px;
    padding: 4px 9px;
  }
  .athenaHelpSearchWrap {
    padding: 2px 8px;
    border-radius: 11px;
  }
  .athenaHelpSearchIcon {
    font-size: 15px;
    margin-right: 5px;
  }
  .athenaHelpSearchWrap input {
    height: 38px;
    font-size: clamp(8.8px, 2.55vw, 9.8px) !important;
    letter-spacing: -0.3px !important;
  }
  .athenaHelpSearchWrap input:focus,
  .athenaHelpSearchWrap input:not(:placeholder-shown) {
    font-size: 13px !important;
    letter-spacing: normal !important;
  }
  .athenaHelpSearchWrap input::placeholder {
    font-size: inherit;
    letter-spacing: inherit;
  }
  .athenaHelpSearchWrap input::-webkit-input-placeholder {
    font-size: inherit;
    letter-spacing: inherit;
  }
  .athenaHelpFilterPill {
    padding: 4px 9px;
    font-size: 11px;
  }
  .athenaHelpGuideCard {
    padding: 14px 12px;
    border-radius: 14px;
  }
  .athenaHelpFaqCard,
  .athenaHelpContactCard,
  .athenaHelpTicketsCard,
  .athenaHelpDiagCard {
    padding: 15px 13px;
    border-radius: 14px;
  }
}

@media (max-width: 360px) {
  .athenaHelpSearchWrap {
    padding: 2px 6px;
  }
  .athenaHelpSearchIcon {
    font-size: 14px;
    margin-right: 4px;
  }
  .athenaHelpSearchWrap input {
    font-size: 8.2px !important;
    letter-spacing: -0.35px !important;
  }
  .athenaHelpSearchWrap input:focus,
  .athenaHelpSearchWrap input:not(:placeholder-shown) {
    font-size: 12.5px !important;
    letter-spacing: normal !important;
  }
  .athenaHelpSearchWrap input::placeholder {
    font-size: inherit;
    letter-spacing: inherit;
  }
  .athenaHelpSearchWrap input::-webkit-input-placeholder {
    font-size: inherit;
    letter-spacing: inherit;
  }
}

/* Student's Submitted Support Tickets Card */
.athenaHelpTicketsCard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.athenaHelpTicketsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

.athenaStudentTicketItem {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ticketItemTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ticketIdTag {
  font-size: 11.5px;
  font-weight: 800;
  color: #4c1d95 !important;
  background: #ede9fe;
  padding: 2px 9px;
  border-radius: 999px;
}

.ticketStatusPill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ticketStatusPill.is-open {
  background: #fef3c7;
  color: #b45309 !important;
}

.ticketStatusPill.is-progress {
  background: #dbeafe;
  color: #1d4ed8 !important;
}

.ticketStatusPill.is-resolved {
  background: #dcfce7;
  color: #047857 !important;
}

.ticketTopicTitle {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a !important;
}

.ticketRefChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569 !important;
  background: #e2e8f0;
  padding: 2px 8px;
  border-radius: 6px;
}

.ticketBodyText {
  font-size: 12.5px;
  line-height: 1.5;
  color: #334155 !important;
  margin: 0;
  white-space: pre-wrap;
}

.ticketReplyBox {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.ticketReplyBox strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #047857 !important;
  margin-bottom: 3px;
}

.ticketReplyBox strong i {
  color: #047857 !important;
}

.ticketReplyBox p {
  font-size: 12.5px;
  line-height: 1.45;
  color: #065f46 !important;
  margin: 0;
  white-space: pre-wrap;
}

.ticketFooterTime {
  font-size: 11px;
  color: #94a3b8 !important;
  font-weight: 500;
}

/* Support Ticket Screenshot Upload & Preview */
.athenaHelpUploadTrigger {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px dashed #c4b5fd;
  background: #faf5ff;
  color: #5b21b6 !important;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.athenaHelpUploadTrigger i,
.athenaHelpUploadTrigger span {
  color: #5b21b6 !important;
}

.athenaHelpUploadTrigger i {
  font-size: 18px;
}

.athenaHelpUploadTrigger:hover {
  background: #f3e8ff;
  border-color: #8b5cf6;
}

.athenaHelpAttachmentPreview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
}

.athenaHelpAttachmentPreview img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #c4b5fd;
  background: #ffffff;
  flex-shrink: 0;
}

.athenaHelpAttachmentPreview .attMeta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.athenaHelpAttachmentPreview .attMeta strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.athenaHelpAttachmentPreview .attMeta small {
  font-size: 11px;
  color: #64748b !important;
}

.athenaHelpAttachmentPreview .attRemoveBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #e11d48 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.athenaHelpAttachmentPreview .attRemoveBtn i {
  color: #e11d48 !important;
  font-size: 16px;
}

.ticketAttachmentLink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  text-decoration: none;
  margin-top: 2px;
  width: fit-content;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.ticketAttachmentLink:hover {
  border-color: #8b5cf6;
  background: #faf5ff;
}

.ticketAttachmentLink img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

.ticketAttachmentLink span,
.ticketAttachmentLink span i {
  font-size: 12px;
  font-weight: 700;
  color: #4c1d95 !important;
}

/* ==========================================================================
   Concurrent Login / Session Transferred Interactive Countdown Modal
   ========================================================================== */
.athenaSessionEndedOverlay {
  z-index: 100050 !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(15, 23, 42, 0.62) !important;
}

.athenaSessionEndedCard {
  max-width: 440px !important;
  padding: 28px 26px 24px !important;
  text-align: center;
  border-radius: 22px !important;
  border: 1px solid #fecdd3 !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28) !important;
}

.athenaSessionPulseBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  margin: 0 auto 14px auto;
  animation: athenaSessionPulseAnim 1.8s ease-in-out infinite;
}

.athenaSessionPulseBadge i,
.athenaSessionPulseBadge span {
  font-size: 12px;
  font-weight: 700;
  color: #be123c !important;
  letter-spacing: 0.02em;
}

.athenaSessionPulseBadge i {
  font-size: 15px;
}

@keyframes athenaSessionPulseAnim {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.22);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(225, 29, 72, 0);
  }
}

.athenaSessionTimerBox {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin: 0 0 20px 0;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  text-align: left;
}

.athenaSessionRingWrap {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.athenaSessionRingSvg {
  transform: rotate(-90deg);
  width: 84px;
  height: 84px;
}

.athenaSessionRingSvg .ringTrack {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 6.5;
}

.athenaSessionRingSvg .ringProgress {
  fill: none;
  stroke: #e11d48;
  stroke-width: 6.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.08s linear;
}

.athenaSessionRingNumber {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.athenaSessionRingNumber strong {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a !important;
  font-variant-numeric: tabular-nums;
}

.athenaSessionRingNumber small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b !important;
  margin-top: 2px;
}

.athenaSessionTimerMeta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.athenaSessionTimerMeta strong {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a !important;
}

.athenaSessionTimerMeta span {
  font-size: 12.5px;
  color: #475569 !important;
}

.athenaSessionTimerMeta span b {
  color: #e11d48 !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.athenaSessionLinearBar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 4px;
}

.athenaSessionLinearFill {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4c1d95 0%, #e11d48 100%);
}

/* ==========================================================================
   Athena Forgot Password Interactive UI/UX
   ========================================================================== */
#loginCanvas.athenaForgotCanvas {
  min-height: 100vh;
  padding: 32px 16px;
  background: radial-gradient(circle at 15% 15%, rgba(139, 92, 246, 0.14) 0%, rgba(84, 52, 226, 0.05) 42%, #f1f5f9 100%) !important;
  justify-content: center !important;
}

.athenaForgotCard {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1), 0 4px 16px rgba(84, 52, 226, 0.06);
  padding: 24px 28px 26px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

@media (max-width: 520px) {
  #loginCanvas.athenaForgotCanvas {
    padding: 18px 12px;
  }
  .athenaForgotCard {
    padding: 18px 16px 20px;
    border-radius: 20px;
  }
}

.athenaForgotBrandBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.athenaForgotBackPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: #334155 !important;
  transition: all 0.18s ease;
}

.athenaForgotBackPill i,
.athenaForgotBackPill span {
  color: inherit !important;
  font-size: 12px;
}

.athenaForgotBackPill i {
  font-size: 15px;
}

.athenaForgotBackPill:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #4c1d95 !important;
  transform: translateX(-2px);
}

.athenaForgotSecurityBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  font-size: 11px;
  font-weight: 700;
  color: #5b21b6 !important;
}

.athenaForgotSecurityBadge i,
.athenaForgotSecurityBadge span {
  color: #5b21b6 !important;
}

#loginCanvas .loginCanvasHead.athenaForgotHero {
  text-align: center;
  margin-bottom: 14px;
}

.athenaForgotIconOrbit {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #ddd6fe;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin: 0 auto 12px auto;
  box-shadow: 0 10px 24px rgba(84, 52, 226, 0.1);
}

@media (max-width: 480px) {
  .athenaForgotIconOrbit {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    padding: 10px;
    margin-bottom: 10px;
  }
}

.athenaForgotIconOrbit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#loginCanvas .loginCanvasHead.athenaForgotHero h2 {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: #0f172a !important;
  margin-bottom: 5px;
}

@media (max-width: 480px) {
  #loginCanvas .loginCanvasHead.athenaForgotHero h2 {
    font-size: 19px;
  }
}

.athenaForgotSubtitle {
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b !important;
  max-width: 370px;
  margin: 0 auto;
}

/* 3-Step Recovery Progress Tracker */
.athenaForgotSteps {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 13px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-bottom: 14px;
  overflow: hidden;
}

.forgotStepItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  min-width: 0;
}

.forgotStepItem .stepDot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b !important;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.forgotStepItem .stepLabel {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b !important;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.forgotStepItem.active .stepDot {
  background: #5434e2;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(84, 52, 226, 0.15);
}

.forgotStepItem.active .stepLabel {
  color: #1e1b4b !important;
  font-weight: 700;
}

.forgotStepItem.completed .stepDot {
  background: #10b981;
  color: #ffffff !important;
}

.forgotStepItem.completed .stepLabel {
  color: #047857 !important;
}

.forgotStepLine {
  flex: 1 1 6px;
  height: 2px;
  background: #e2e8f0;
  border-radius: 999px;
  min-width: 4px;
}

@media (max-width: 480px) {
  .athenaForgotSteps {
    padding: 8px 9px;
    gap: 4px;
  }
  .forgotStepItem {
    gap: 4px;
  }
  .forgotStepItem .stepDot {
    width: 19px;
    height: 19px;
    font-size: 10px;
  }
  .forgotStepItem .stepLabel {
    font-size: 10.5px;
  }
}

#loginCanvas .loginCanvasBox.athenaForgotFormBox {
  margin-top: 0;
  width: 100%;
}

#loginCanvas .loginCanvasBox.athenaForgotFormBox .loginCanvasHeadForm form {
  width: 100%;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup.athenaForgotFieldGroup {
  margin-top: 4px;
}

.athenaForgotLabel {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b !important;
  margin-bottom: 7px;
  display: block;
}

.athenaForgotInputWrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.athenaForgotInputWrap .inputLeadIcon {
  position: absolute;
  left: 14px;
  font-size: 19px;
  color: #64748b !important;
  pointer-events: none;
  transition: color 0.18s ease;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaForgotInputWrap input {
  width: 100%;
  height: 46px;
  padding: 11px 42px 11px 42px;
  border-radius: 13px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f172a !important;
  text-overflow: ellipsis;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaForgotInputWrap.is-valid input {
  padding-right: 68px !important;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaForgotInputWrap input::placeholder {
  color: #94a3b8 !important;
  font-weight: 400;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaForgotInputWrap input:focus {
  background: #ffffff;
  border-color: #5434e2;
  box-shadow: 0 0 0 4px rgba(84, 52, 226, 0.12);
}

.athenaForgotInputWrap:focus-within .inputLeadIcon {
  color: #5434e2 !important;
}

.athenaForgotInputWrap.is-valid input {
  border-color: #10b981 !important;
  background: #ffffff !important;
}

.athenaForgotInputWrap.is-valid .inputLeadIcon {
  color: #059669 !important;
}

.athenaForgotInputWrap.is-invalid input {
  border-color: #e11d48 !important;
  background: #fff1f2 !important;
}

.athenaForgotInputWrap.is-invalid .inputLeadIcon {
  color: #e11d48 !important;
}

.athenaForgotInputWrap .inputClearBtn {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #475569 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease;
}

.athenaForgotInputWrap .inputClearBtn[hidden] {
  display: none !important;
}

.athenaForgotInputWrap .inputClearBtn i {
  font-size: 14px;
  color: #475569 !important;
}

.athenaForgotInputWrap .inputClearBtn:hover {
  background: #cbd5e1;
}

.athenaForgotInputWrap .inputValidBadge {
  position: absolute;
  right: 40px;
  margin-top: 0 !important;
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}

.athenaForgotInputWrap .inputValidBadge[hidden] {
  display: none !important;
}

.athenaForgotInputWrap .inputValidBadge i {
  font-size: 17px;
  color: #10b981 !important;
}

@keyframes athenaForgotShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.athenaForgotInputWrap.shakeError {
  animation: athenaForgotShake 0.32s ease;
}

.athenaForgotHelperRow {
  margin-top: 7px;
}

.athenaForgotHelperRow[hidden] {
  display: none !important;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaForgotHelperRow .helperHint {
  margin-top: 0 !important;
  font-size: 11.5px;
  color: #64748b !important;
  opacity: 1 !important;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.4;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaForgotHelperRow .helperHint span {
  margin-top: 0 !important;
  opacity: 1 !important;
  font-size: 11.5px;
  color: #64748b !important;
}

.athenaForgotHelperRow .helperHint i {
  font-size: 14px;
  color: #6d28d9 !important;
  flex-shrink: 0;
  margin-top: 1px;
}

.athenaForgotAlert {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.athenaForgotAlert[hidden] {
  display: none !important;
}

.athenaForgotAlert i {
  font-size: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaForgotAlert #mail_error {
  margin-top: 0 !important;
  opacity: 1 !important;
  font-size: 12px;
  font-weight: 600;
}

.athenaForgotAlert.is-error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.athenaForgotAlert.is-error i,
.athenaForgotAlert.is-error #mail_error {
  color: #be123c !important;
}

.athenaForgotAlert.is-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.athenaForgotAlert.is-success i,
.athenaForgotAlert.is-success #mail_error {
  color: #047857 !important;
}

.athenaForgotAlert.is-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.athenaForgotAlert.is-warning i,
.athenaForgotAlert.is-warning #mail_error {
  color: #b45309 !important;
}

/* Recovery Success Card */
.athenaForgotSuccessCard {
  width: 100%;
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 15px;
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #a7f3d0;
  text-align: left;
}

.athenaForgotSuccessCard[hidden] {
  display: none !important;
}

.athenaForgotSuccessCard .successCardTop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.athenaForgotSuccessCard .successIconBadge {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.athenaForgotSuccessCard .successIconBadge i {
  font-size: 20px;
  color: #ffffff !important;
}

.athenaForgotSuccessCard .successMeta {
  min-width: 0;
  flex: 1 1 auto;
}

.athenaForgotSuccessCard .successMeta strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #065f46 !important;
}

.athenaForgotSuccessCard .successMeta p {
  font-size: 11.5px;
  color: #047857 !important;
  margin-top: 2px;
  line-height: 1.4;
}

.athenaForgotSuccessCard .maskedEmailPill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #6ee7b7;
  font-weight: 700;
  font-size: 11.5px;
  color: #065f46 !important;
  word-break: break-all;
  margin-top: 0 !important;
  opacity: 1 !important;
}

.athenaForgotSuccessCard .successChecklist {
  list-style: none;
  padding: 0;
  margin: 0 0 11px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.athenaForgotSuccessCard .successChecklist li {
  font-size: 11.5px;
  color: #065f46 !important;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
}

.athenaForgotSuccessCard .successChecklist li i {
  color: #047857 !important;
  flex-shrink: 0;
  margin-top: 2px;
}

.athenaForgotSuccessCard .successChecklist li span {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0 !important;
  opacity: 1 !important;
  font-size: 11.5px !important;
  color: #065f46 !important;
  line-height: 1.45;
}

.athenaForgotSuccessCard .successChecklist li b {
  color: #047857 !important;
  font-weight: 700;
}

.athenaForgotSuccessCard .proceedLoginBtn {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  background: #059669;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background-color 0.18s ease;
}

.athenaForgotSuccessCard .proceedLoginBtn i,
.athenaForgotSuccessCard .proceedLoginBtn span {
  color: #ffffff !important;
  margin-top: 0 !important;
  opacity: 1 !important;
}

.athenaForgotSuccessCard .proceedLoginBtn:hover {
  background: #047857;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSbtBtn.athenaForgotSubmitBtn {
  height: 48px;
  margin-top: 18px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  background: linear-gradient(135deg, #5434e2 0%, #6d28d9 100%);
  box-shadow: 0 10px 22px rgba(84, 52, 226, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSbtBtn.athenaForgotSubmitBtn .btnIcon,
#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSbtBtn.athenaForgotSubmitBtn .btnText {
  color: #ffffff !important;
  font-size: 15px;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSbtBtn.athenaForgotSubmitBtn .btnIcon {
  font-size: 18px;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSbtBtn.athenaForgotSubmitBtn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  box-shadow: none;
}

.spinIcon {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSecondaryBtn.athenaForgotFooterLinks {
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSecondaryBtn.athenaForgotFooterLinks p {
  font-size: 13px;
  color: #475569 !important;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSecondaryBtn.athenaForgotFooterLinks p a {
  font-weight: 700;
  color: #5434e2 !important;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSecondaryBtn.athenaForgotFooterLinks p.supportSubLink {
  font-size: 12px;
  color: #94a3b8 !important;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .loginSecondaryBtn.athenaForgotFooterLinks p.supportSubLink a {
  font-weight: 600;
  color: #64748b !important;
  text-decoration: underline;
}

/* ==========================================================================
   Athena Login Page Interactive UI/UX Extensions
   ========================================================================== */
.athenaLoginPortalPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #334155 !important;
}

.athenaLoginPortalPill i,
.athenaLoginPortalPill span {
  color: #334155 !important;
}

.athenaLoginPortalPill i {
  font-size: 15px;
  color: #5434e2 !important;
}

.athenaLoginLogoBox {
  width: 210px;
  max-width: 75%;
  padding: 12px 18px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin: 0 auto 14px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.athenaLoginLogoBox img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup.athenaLoginPwdGroup {
  margin-top: 14px;
}

.athenaLoginLabelRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.athenaLoginLabelRow .athenaForgotLabel {
  margin-bottom: 0;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .athenaLoginLabelRow .forgtPswd {
  width: auto;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .athenaLoginLabelRow .forgtPswd a {
  margin-top: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #5434e2 !important;
  transition: color 0.15s ease;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .athenaLoginLabelRow .forgtPswd a:hover {
  color: #4338ca !important;
  text-decoration: underline;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaPasswordInputWrap #btnToggle.athenaPwdEyeBtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: transparent !important;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaPasswordInputWrap #btnToggle.athenaPwdEyeBtn i {
  font-size: 18px;
  color: #64748b !important;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaPasswordInputWrap #btnToggle.athenaPwdEyeBtn:hover {
  background: #e2e8f0 !important;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .formGroup .athenaPasswordInputWrap #btnToggle.athenaPwdEyeBtn:hover i {
  color: #1e293b !important;
}

.athenaCapsLockNotice {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #b45309 !important;
}

.athenaCapsLockNotice[hidden] {
  display: none !important;
}

.athenaCapsLockNotice i,
.athenaCapsLockNotice span {
  margin-top: 0 !important;
  opacity: 1 !important;
  font-size: 11.5px !important;
  color: #b45309 !important;
}

.athenaLoginMetaRow {
  width: 100%;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.athenaRememberCheck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.athenaRememberCheck input {
  display: none;
}

.athenaRememberCheck .checkBoxUi {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.athenaRememberCheck .checkBoxUi i {
  font-size: 13px;
  color: #ffffff !important;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.15s ease;
}

.athenaRememberCheck input:checked + .checkBoxUi {
  background: #5434e2;
  border-color: #5434e2;
}

.athenaRememberCheck input:checked + .checkBoxUi i {
  opacity: 1;
  transform: scale(1);
}

.athenaRememberCheck .checkText {
  font-size: 12.5px;
  font-weight: 500;
  color: #475569 !important;
}

.athenaRoleHint {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.athenaRoleHint i {
  font-size: 14px;
  color: #6d28d9 !important;
}

#loginCanvas .loginCanvasBox .loginCanvasHeadForm form .athenaForgotAlert #errorMsg {
  margin-top: 0 !important;
  opacity: 1 !important;
  font-size: 12.5px;
  font-weight: 600;
}

.athenaForgotAlert.is-error #errorMsg {
  color: #be123c !important;
}

.athenaForgotAlert.is-success #errorMsg {
  color: #047857 !important;
}

.athenaForgotAlert.is-warning #errorMsg {
  color: #b45309 !important;
}

.athenaAuthMetaFooter {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.athenaAuthMetaFooter .version,
.athenaAuthMetaFooter .updatedOn {
  width: auto;
  margin-top: 0;
  font-size: 12px;
  color: #64748b !important;
  opacity: 0.85;
}

.athenaAuthMetaFooter .updatedOn::before {
  content: "•";
  margin-right: 12px;
  color: #cbd5e1;
}

@media (max-width: 480px) {
  .athenaAuthMetaFooter {
    flex-direction: column;
    gap: 4px;
  }
  .athenaAuthMetaFooter .updatedOn::before {
    display: none;
  }
}

/* ==========================================================================
   ATHENA NGN EXAM ATTENDING / RUNNER UI/UX (.athenaExamRunnerPage)
   ========================================================================== */

.canvas.flexCanvas.athenaExamRunnerPage,
.canvas.flexCanvas.athenaReviewPage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 20px 36px;
  background: #f8fafc;
  min-height: calc(100vh - 60px);
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  overflow-x: clip;
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  .sidemenu.sidemenuExpant ~ .canvas:not(.expandCanvas) {
    width: calc(100% - 60px) !important;
  }
}

html:fullscreen:not(:has(iframe:fullscreen)):not(:has(video:fullscreen)),
html:-webkit-full-screen:not(:has(iframe:-webkit-full-screen)):not(:has(video:-webkit-full-screen)),
html:fullscreen:not(:has(iframe:fullscreen)):not(:has(video:fullscreen)) body,
html:-webkit-full-screen:not(:has(iframe:-webkit-full-screen)):not(:has(video:-webkit-full-screen)) body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  background: #f8fafc !important;
}

.canvas.athenaExamRunnerPage.expandCanvas,
.sidemenu.sidemenuExpant ~ .canvas.athenaExamRunnerPage.expandCanvas,
.canvas.athenaReviewPage.expandCanvas,
.sidemenu.sidemenuExpant ~ .canvas.athenaReviewPage.expandCanvas {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  min-height: 100vh !important;
  padding: 16px 28px 48px !important;
}

.athenaExamRunnerPage > .container,
.athenaReviewPage > .container {
  flex: 1 1 auto;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  box-sizing: border-box !important;
}

.athenaExamRunnerPage .canvasMain,
.athenaReviewPage .canvasMain {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.athenaExamRunnerPage .athenaRunnerWorkspaceSplit,
.athenaReviewPage .athenaRunnerWorkspaceSplit {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0;
  box-sizing: border-box !important;
}

/* Hide legacy duplicate blue top bar inside examCanvas since .athenaRunnerTopBar replaces it */
.athenaExamRunnerPage .examCanvasHead,
.athenaReviewPage .examCanvasHead {
  display: none !important;
}

.athenaExamRunnerPage .examCanvas,
.athenaExamRunnerPage .examCanvasMain,
.athenaReviewPage .examCanvas,
.athenaReviewPage .examCanvasMain {
  flex: 1 1 auto;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent;
  padding: 0;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Full-Width Stacked EHR Clinical Scenario Card (.synario) below Top Bar */
.athenaExamRunnerPage .synario,
.athenaReviewPage .synario {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  top: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: none;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #cbd5e1 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  padding: 0 !important;
  margin: 0 0 18px 0 !important;
  align-self: stretch !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.athenaExamRunnerPage .athenaScenarioHeader,
.athenaReviewPage .athenaScenarioHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  user-select: none;
}

.athenaExamRunnerPage .synario.is-collapsed .athenaScenarioHeader,
.athenaReviewPage .synario.is-collapsed .athenaScenarioHeader {
  border-bottom: none;
}

.athenaExamRunnerPage .athenaScenarioTitleWrap,
.athenaExamRunnerPage .athenaScenarioHeaderLeft,
.athenaReviewPage .athenaScenarioTitleWrap,
.athenaReviewPage .athenaScenarioHeaderLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.athenaExamRunnerPage .athenaScenarioIcon,
.athenaReviewPage .athenaScenarioIcon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #e0e7ff !important;
  flex-shrink: 0;
}

.athenaExamRunnerPage .athenaScenarioIcon i,
.athenaReviewPage .athenaScenarioIcon i {
  color: #e0e7ff !important;
}

.athenaExamRunnerPage .athenaScenarioBadge,
.athenaReviewPage .athenaScenarioBadge {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c7d2fe !important;
  margin-bottom: 2px;
}

.athenaExamRunnerPage .athenaScenarioHeader h2,
.athenaReviewPage .athenaScenarioHeader h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.athenaExamRunnerPage .athenaScenarioToggleBtn,
.athenaExamRunnerPage .athenaScenarioCollapseBtn,
.athenaReviewPage .athenaScenarioToggleBtn,
.athenaReviewPage .athenaScenarioCollapseBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.16s ease, transform 0.16s ease;
}

.athenaExamRunnerPage .athenaScenarioToggleBtn i,
.athenaReviewPage .athenaScenarioToggleBtn i {
  color: #ffffff !important;
  transition: transform 0.2s ease;
}

.athenaExamRunnerPage .synario.is-collapsed .athenaScenarioToggleBtn i,
.athenaReviewPage .synario.is-collapsed .athenaScenarioToggleBtn i {
  transform: rotate(180deg);
}

.athenaExamRunnerPage .athenaScenarioBody,
.athenaReviewPage .athenaScenarioBody {
  padding: 20px 24px 22px 24px !important;
  max-height: min(55vh, 420px);
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
  font-size: 14.5px;
  line-height: 1.72;
  color: #1e293b !important;
  background: #ffffff;
}

.athenaExamRunnerPage .athenaScenarioBody p,
.athenaReviewPage .athenaScenarioBody p {
  font-size: 14.5px !important;
  line-height: 1.72 !important;
  color: #1e293b !important;
  margin: 0 0 12px 0;
}

.athenaExamRunnerPage .athenaScenarioBody p:empty,
.athenaReviewPage .athenaScenarioBody p:empty {
  display: none;
}

.athenaExamRunnerPage .athenaScenarioBody p:last-child,
.athenaExamRunnerPage .athenaScenarioBody > *:last-child,
.athenaReviewPage .athenaScenarioBody p:last-child,
.athenaReviewPage .athenaScenarioBody > *:last-child {
  margin-bottom: 0 !important;
}

.athenaExamRunnerPage .athenaScenarioBody table,
.athenaReviewPage .athenaScenarioBody table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 10px 0 14px;
  font-size: 13.5px;
}

.athenaExamRunnerPage .athenaScenarioBody table td,
.athenaExamRunnerPage .athenaScenarioBody table th,
.athenaReviewPage .athenaScenarioBody table td,
.athenaReviewPage .athenaScenarioBody table th {
  border: 1px solid #cbd5e1;
  padding: 8px 10px;
}

.athenaExamRunnerPage .synario.is-collapsed .athenaScenarioBody,
.athenaReviewPage .synario.is-collapsed .athenaScenarioBody {
  display: none !important;
}

.athenaExamRunnerPage .synario.is-collapsed,
.athenaReviewPage .synario.is-collapsed {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  top: 0 !important;
  margin: 0 0 16px 0 !important;
}

/* Unified Command Header (.athenaRunnerTopBar) */
.canvas.athenaExamRunnerPage .canvasMain .breadCrumbs.athenaRunnerTopBar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 14px;
}

.athenaExamRunnerPage .revTopUtilityRow {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.athenaExamRunnerPage .revUtilityLeft,
.athenaExamRunnerPage .revUtilityRight {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.athenaExamRunnerPage .revUtilDivider {
  width: 1px;
  height: 18px;
  background: #cbd5e1;
  display: inline-block;
}

.athenaExamRunnerPage .revCandidateChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155 !important;
  font-size: 12.5px;
  font-weight: 700;
}

.athenaExamRunnerPage .revCandidateChip i {
  color: #5434e2 !important;
  font-size: 15px;
}

.athenaExamRunnerPage .revCandidateChip span {
  color: #334155 !important;
}

.athenaExamRunnerPage .athenaRunnerPauseBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 10px;
  border: 1px solid #fecdd3;
  background: #fff1f2 !important;
  color: #be123c !important;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.athenaExamRunnerPage .athenaRunnerPauseBtn i,
.athenaExamRunnerPage .athenaRunnerPauseBtn span {
  color: #be123c !important;
}

.athenaExamRunnerPage .athenaRunnerPauseBtn:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af;
  transform: translateY(-1px);
}

.athenaExamRunnerPage .athenaRunnerFlagBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.18s ease;
}

.athenaExamRunnerPage .athenaRunnerFlagBtn i,
.athenaExamRunnerPage .athenaRunnerFlagBtn span {
  color: #475569 !important;
}

.athenaExamRunnerPage .athenaRunnerFlagBtn:hover {
  border-color: #f59e0b;
  background: #fffbeb !important;
  color: #b45309 !important;
}

.athenaExamRunnerPage .athenaRunnerFlagBtn:hover i,
.athenaExamRunnerPage .athenaRunnerFlagBtn:hover span {
  color: #b45309 !important;
}

.athenaExamRunnerPage .athenaRunnerFlagBtn.is-flagged {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #92400e !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.athenaExamRunnerPage .athenaRunnerFlagBtn.is-flagged i,
.athenaExamRunnerPage .athenaRunnerFlagBtn.is-flagged span {
  color: #92400e !important;
}

.athenaExamRunnerPage .athenaRunnerGridBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 10px;
  border: 1px solid #c7d2fe;
  background: #eef2ff !important;
  color: #4338ca !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.18s ease;
}

.athenaExamRunnerPage .athenaRunnerGridBtn i,
.athenaExamRunnerPage .athenaRunnerGridBtn span {
  color: #4338ca !important;
}

.athenaExamRunnerPage .athenaRunnerGridBtn:hover {
  background: #e0e7ff !important;
  border-color: #a5b4fc;
}

/* Hero Main Row inside Top Bar */
.athenaExamRunnerPage .revHeroMainRow {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.athenaExamRunnerPage .revHeroTitleBlock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.athenaExamRunnerPage .revHeroTitleWrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.athenaExamRunnerPage #runnerHeroExamTitle {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
}

.athenaExamRunnerPage .revQuestionCounterBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #4338ca !important;
  font-size: 13px;
  font-weight: 700;
}

.athenaExamRunnerPage .revHeroMetaPills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.athenaExamRunnerPage .revMetaPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 100%;
}

.athenaExamRunnerPage .revMetaPill i,
.athenaExamRunnerPage .revMetaPill strong {
  color: inherit !important;
}

.athenaExamRunnerPage .revMetaPill.pill-test {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
}

.athenaExamRunnerPage .revMetaPill.pill-mode {
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  color: #4338ca !important;
}

.athenaExamRunnerPage .revMetaPill.pill-type {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #6d28d9 !important;
}

.athenaExamRunnerPage .athenaRunnerHeroActions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.athenaExamRunnerPage .revQuickJumpGroup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.athenaExamRunnerPage .revNavBtn.revNavBtnPrimary {
  background: #5434e2 !important;
  border-color: #5434e2 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.22);
}

.athenaExamRunnerPage .revNavBtn.revNavBtnPrimary i,
.athenaExamRunnerPage .revNavBtn.revNavBtnPrimary span {
  color: #ffffff !important;
}

.athenaExamRunnerPage .revNavBtn.revNavBtnPrimary:hover:not(:disabled) {
  background: #4324ce !important;
  border-color: #4324ce !important;
  color: #ffffff !important;
}

.athenaExamRunnerPage .revNavBtn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Live Timer Pill */
.athenaExamRunnerPage .athenaRunnerTimerPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a !important;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.athenaExamRunnerPage .athenaRunnerTimerPill .timerIconWrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #4f46e5 !important;
}

.athenaExamRunnerPage .athenaRunnerTimerPill .timerIconWrap i {
  color: inherit !important;
}

.athenaExamRunnerPage .athenaRunnerTimerPill .timerTextWrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.athenaExamRunnerPage .athenaRunnerTimerPill .timerLabel,
.athenaExamRunnerPage .athenaRunnerTimerLabel {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b !important;
}

.athenaExamRunnerPage .athenaRunnerTimerPill .timerValue,
.athenaExamRunnerPage .athenaRunnerTimerValue {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a !important;
}

.athenaExamRunnerPage .athenaRunnerTimerPill.is-tutor {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46 !important;
}

.athenaExamRunnerPage .athenaRunnerTimerPill.is-tutor .timerIconWrap,
.athenaExamRunnerPage .athenaRunnerTimerPill.is-tutor .timerLabel,
.athenaExamRunnerPage .athenaRunnerTimerPill.is-tutor .timerValue {
  color: #047857 !important;
}

.athenaExamRunnerPage .athenaRunnerTimerPill.is-warning {
  background: #fffbeb;
  border-color: #fcd34d;
}

.athenaExamRunnerPage .athenaRunnerTimerPill.is-warning .timerIconWrap,
.athenaExamRunnerPage .athenaRunnerTimerPill.is-warning .timerValue {
  color: #b45309 !important;
}

.athenaExamRunnerPage .athenaRunnerTimerPill.is-danger {
  background: #fef2f2;
  border-color: #fca5a5;
  animation: athenaTimerPulse 1.2s infinite ease-in-out;
}

.athenaExamRunnerPage .athenaRunnerTimerPill.is-danger .timerIconWrap,
.athenaExamRunnerPage .athenaRunnerTimerPill.is-danger .timerValue {
  color: #dc2626 !important;
}

@keyframes athenaTimerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Runner Progress Bar & Question Strip */
.athenaExamRunnerPage .athenaRunnerProgressBarWrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.athenaExamRunnerPage .athenaRunnerProgressBarTrack {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-bottom: 10px;
}

.athenaExamRunnerPage .athenaRunnerProgressBarFill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
  transition: width 0.35s ease;
}

.athenaExamRunnerPage .athenaRunnerQuestionStrip {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px 2px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.athenaExamRunnerPage .athenaRunnerQuestionStrip::-webkit-scrollbar {
  height: 5px;
}

.athenaExamRunnerPage .athenaRunnerQuestionStrip::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.athenaExamRunnerPage .athenaRunnerQuestionStrip::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.athenaExamRunnerPage .runnerQStripPill {
  position: relative;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.16s ease;
}

.athenaExamRunnerPage .runnerQStripPill span,
.athenaExamRunnerPage .runnerQStripPill i {
  color: inherit !important;
}

.athenaExamRunnerPage .runnerQStripPill:hover:not(:disabled):not(.is-current) {
  border-color: #6366f1 !important;
  background: #eef2ff !important;
  color: #4338ca !important;
  transform: translateY(-1px);
}

.athenaExamRunnerPage .runnerQStripPill.is-seen {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

.athenaExamRunnerPage .runnerQStripPill.is-answered {
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #047857 !important;
}

.athenaExamRunnerPage .runnerQStripPill.is-flagged {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

.athenaExamRunnerPage .runnerQStripPill.is-current {
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%) !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
}

.athenaExamRunnerPage .runnerQStripPill.is-current span,
.athenaExamRunnerPage .runnerQStripPill.is-current i {
  color: #ffffff !important;
}

.athenaExamRunnerPage .runnerQStripPill.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Validation Banner */
.athenaExamRunnerPage .athenaRunnerValidationBanner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 13px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  color: #92400e !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.14);
  scroll-margin-top: 96px;
}

.athenaExamRunnerPage .athenaRunnerValidationBanner > i {
  font-size: 18px;
  color: #d97706 !important;
  flex-shrink: 0;
}

.athenaExamRunnerPage .athenaRunnerValidationBanner > span {
  color: #92400e !important;
  flex: 1 1 auto;
}

@keyframes athenaValidationPulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
  }
  35% {
    transform: translateY(-2px);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  70% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
  100% {
    transform: translateY(0);
  }
}

.athenaExamRunnerPage .athenaRunnerValidationBanner.is-validation-pulse {
  animation: athenaValidationPulse 0.65s ease-out;
}

.athenaExamRunnerPage .athenaRunnerValidationContent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.athenaExamRunnerPage .athenaRunnerValidationContent i {
  font-size: 16px;
  color: #d97706 !important;
}

.athenaExamRunnerPage .athenaRunnerValidationContent span {
  color: #92400e !important;
}

.athenaExamRunnerPage .athenaRunnerValidationClose {
  background: transparent !important;
  border: none;
  color: #92400e !important;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

/* Main Exam Question Card (.examCanvasBody & .examQuestionBox) */
.athenaExamRunnerPage .examCanvasBody {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

/* Clinical Exhibit Question Card & Inline Collapsible Diagnostic Chart (.Exhibits_Question) */
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox.Exhibits_Question > .info,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox.Exhibits_Question > .info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn {
  margin-left: auto !important;
  padding: 7px 14px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn i,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn span,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn i,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn span {
  color: #ffffff !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn.active,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn.active {
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  color: #4338ca !important;
  box-shadow: none !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn.active i,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn.active span,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn.active i,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn.active span {
  color: #4338ca !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn:hover,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .info .exhibitPopupBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(79, 70, 229, 0.26);
}

/* Override legacy fixed right-drawer .situation to render as an inline Clinical Chart Card above the question stem */
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation.athenaClinicalExhibitCard,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation.athenaClinicalExhibitCard {
  position: relative !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: 1 !important;
  margin: 12px 0 16px 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #dbe3ef !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden;
  display: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation.situationActive,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation.situationActive {
  display: block !important;
}

.athenaExamRunnerPage .athenaExhibitCardHeader,
.athenaReviewPage .athenaExhibitCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
  color: #ffffff;
}

.athenaExamRunnerPage .athenaExhibitCardTitleGroup,
.athenaReviewPage .athenaExhibitCardTitleGroup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.athenaExamRunnerPage .athenaExhibitCardIcon,
.athenaReviewPage .athenaExhibitCardIcon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #ffffff !important;
  flex-shrink: 0;
}

.athenaExamRunnerPage .athenaExhibitCardIcon i,
.athenaReviewPage .athenaExhibitCardIcon i {
  color: #ffffff !important;
}

.athenaExamRunnerPage .athenaExhibitCardTitles,
.athenaReviewPage .athenaExhibitCardTitles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.athenaExamRunnerPage .athenaExhibitCardTitles h2,
.athenaReviewPage .athenaExhibitCardTitles h2 {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: 0.01em;
}

.athenaExamRunnerPage .athenaExhibitCardTitles span,
.athenaReviewPage .athenaExhibitCardTitles span {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.8) !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation {
  position: static !important;
  left: auto !important;
  top: auto !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation i,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation span,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation i,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation span {
  color: #ffffff !important;
  font-size: 12.5px !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation:hover,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(56vh, 420px) !important;
  padding: 16px 20px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  word-break: normal;
  overflow-wrap: break-word;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  color: #1e293b !important;
  font-size: 14.5px !important;
  line-height: 1.68 !important;
  box-sizing: border-box !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain > p:first-child,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain > p:first-child {
  margin-top: 0 !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain > p:last-child,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain > p:last-child {
  margin-bottom: 0 !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain h1,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain h2,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain h3,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain h4,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain h1,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain h2,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain h3,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain h4 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain p,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain p {
  font-size: 14.5px !important;
  line-height: 1.68 !important;
  color: #1e293b !important;
  margin: 8px 0 !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain ul,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain ol,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain ul,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain ol {
  margin: 8px 0 14px 0 !important;
  padding-left: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain li,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain li {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain strong,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain b,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain strong,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain b {
  color: #0f172a !important;
  font-weight: 700;
}

.athenaExamRunnerPage .athenaExhibitQuestionStemBox,
.athenaReviewPage .athenaExhibitQuestionStemBox {
  margin: 14px 0 12px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: #f8fafc;
  border-left: 4px solid #4f46e5;
  max-height: min(52vh, 420px);
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.athenaExamRunnerPage .athenaExhibitStemBadge,
.athenaReviewPage .athenaExhibitStemBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4f46e5 !important;
  margin-bottom: 6px;
}

.athenaExamRunnerPage .athenaExhibitStemBadge i,
.athenaReviewPage .athenaExhibitStemBadge i {
  color: #4f46e5 !important;
  font-size: 14px;
}

.athenaExamRunnerPage .athenaExhibitQuestionStemBox #Exhibits_Question_details,
.athenaReviewPage .athenaExhibitQuestionStemBox #Exhibits_Question_details {
  margin: 0 !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #0f172a !important;
}

/* Interactive Option Cards (Objective, SATA Multiple Choice & Exhibits) */
.athenaExamRunnerPage .objectiveTypeExam ul,
.athenaExamRunnerPage .multipleTypeExam ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.athenaExamRunnerPage .objectiveTypeExam ul li,
.athenaExamRunnerPage .multipleTypeExam ul li {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  cursor: pointer;
  transition: all 0.16s ease;
  margin: 0 !important;
}

.athenaExamRunnerPage .objectiveTypeExam ul li:hover,
.athenaExamRunnerPage .multipleTypeExam ul li:hover {
  border-color: #a5b4fc !important;
  background: #f8fafc !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.06);
}

.athenaExamRunnerPage .objectiveTypeExam ul li.is-selected,
.athenaExamRunnerPage .multipleTypeExam ul li.is-selected {
  border-color: #4f46e5 !important;
  background: #f5f3ff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.12);
}

.athenaExamRunnerPage .objectiveTypeExam ul li p.paraEl,
.athenaExamRunnerPage .multipleTypeExam ul li p.paraEl {
  flex: 1 1 auto;
  width: auto !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #1e293b !important;
  margin: 0 !important;
  cursor: pointer;
}

.athenaExamRunnerPage .objectiveTypeExam ul li.is-eliminated p.paraEl,
.athenaExamRunnerPage .multipleTypeExam ul li.is-eliminated p.paraEl,
.athenaExamRunnerPage p.paraEl.activeLine {
  text-decoration: line-through !important;
  color: #94a3b8 !important;
}

.athenaExamRunnerPage .objectiveTypeExam ul li.is-eliminated,
.athenaExamRunnerPage .multipleTypeExam ul li.is-eliminated {
  opacity: 0.68;
  background: #f8fafc !important;
}

/* Keep checkbox/radio wrapper relative for checkmark positioning and .answerRevission cleanly on the right of the card */
.athenaExamRunnerPage .objectiveTypeExam ul li .objectiveTypeBtn,
.athenaExamRunnerPage .multipleTypeExam ul li .multipleTypeBtn {
  width: 28px !important;
  height: 24px !important;
  flex-shrink: 0;
  position: relative !important;
  display: inline-flex;
  align-items: center;
}

.athenaReviewPage .answerRevission {
  display: none !important;
}

.athenaExamRunnerPage:not(.athenaReviewPage) .objectiveTypeExam ul li .answerRevission,
.athenaExamRunnerPage:not(.athenaReviewPage) .multipleTypeExam ul li .answerRevission {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 2 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s ease;
}

.athenaExamRunnerPage .objectiveTypeExam ul li .answerRevission i,
.athenaExamRunnerPage .multipleTypeExam ul li .answerRevission i {
  color: inherit !important;
}

.athenaExamRunnerPage .objectiveTypeExam ul li .answerRevission:hover,
.athenaExamRunnerPage .multipleTypeExam ul li .answerRevission:hover {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.athenaExamRunnerPage .objectiveTypeExam ul li.is-eliminated .answerRevission,
.athenaExamRunnerPage .multipleTypeExam ul li.is-eliminated .answerRevission {
  border-color: #fca5a5 !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

/* Submit & Bottom Navigation Buttons (.examSbtBtn & .examQuestionFooter) */
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examSbtBtn {
  margin-top: 22px !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examSbtBtn button {
  min-height: 44px;
  padding: 11px 32px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border: none !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examSbtBtn button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.34);
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examSbtBtn button:disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a.Next_class,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.Next_class {
  margin-left: auto !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a.is-disabled,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a i,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a i {
  color: inherit !important;
  font-size: 17px !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a:hover:not(.is-disabled),
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a:hover:not(.is-disabled) {
  border-color: #6366f1 !important;
  background: #eef2ff !important;
  color: #4338ca !important;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter {
    gap: 8px;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a {
    min-height: 38px;
    padding: 8px 14px !important;
    font-size: 13px !important;
    gap: 5px;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a i,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a i {
    font-size: 16px !important;
  }
}

@media (max-width: 360px) {
  .athenaExamRunnerPage .revQuickJumpGroup {
    flex-direction: column;
    align-items: stretch;
  }

  .athenaExamRunnerPage .revQuickJumpGroup .revNavBtn {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px !important;
    justify-content: center;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionFooter a.Next_class,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.Next_class {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    min-height: 40px;
    padding: 9px 14px !important;
    font-size: 13px !important;
    gap: 6px;
    justify-content: center !important;
  }
}

/* Clean Button Focus States inside Exam Runner (prevents heavy global purple outline box on click) */
.athenaExamRunnerPage button:focus,
.athenaExamRunnerPage button:focus-visible,
.closeExamPopup div:focus,
.timerOutPopup div:focus {
  outline: none !important;
}

.athenaExamRunnerPage .athenaRunnerPauseBtn:focus-visible {
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.28) !important;
}

.athenaExamRunnerPage .athenaRunnerNavBtn:focus-visible,
.athenaExamRunnerPage .athenaRunnerMapBtn:focus-visible,
.athenaExamRunnerPage .runnerQStripPill:focus-visible,
.athenaExamRunnerPage .examSbtBtn button:focus-visible {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.28) !important;
}

/* Pause / Exit Exam Modal, Time's Up Modal & Complete Exam Modal Polish */
.closeExamPopup,
.timerOutPopup {
  width: 440px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 28px 28px 26px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.26), 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

.timerOutPopup {
  width: 460px !important;
  padding: 28px 28px 26px !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 4px solid #f59e0b !important;
}

.timerOutPopup .athenaTimerOutBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309 !important;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 auto 14px auto;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.1);
}

.timerOutPopup .athenaTimerOutBadge i {
  font-size: 14px;
  color: #d97706 !important;
  line-height: 1;
}

.timerOutPopup .athenaTimerOutBadge span {
  color: #b45309 !important;
  line-height: 1.2;
}

.closeExamPopup .closeExamPopupThumbnail {
  width: 100% !important;
  height: 136px !important;
  margin-bottom: 6px;
}

.timerOutPopup .timerOutPopupThumbnail {
  width: 104px !important;
  height: 104px !important;
  margin: 0 auto 14px auto !important;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fffbeb 0%, #fef3c7 100%);
  border: 2px solid #fde68a;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.16), inset 0 0 0 4px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.closeExamPopup .closeExamPopupThumbnail img,
.timerOutPopup .timerOutPopupThumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.closeExamPopup .closeExamPopupContent,
.timerOutPopup .timerOutPopupContent {
  margin-top: 4px !important;
  text-align: center;
  width: 100%;
}

.closeExamPopup .closeExamPopupContent h1,
.timerOutPopup .timerOutPopupContent h1 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.01em;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutSubtitle {
  font-size: 13.8px !important;
  color: #64748b !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.5 !important;
  font-weight: 500;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutInfoBox {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  text-align: left;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutInfoIcon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #10b981;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.24);
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutInfoIcon i {
  color: #ffffff !important;
  line-height: 1;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutInfoText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutInfoText strong {
  font-size: 13.2px;
  font-weight: 700;
  color: #065f46 !important;
  line-height: 1.3;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutInfoText span {
  font-size: 12.4px;
  font-weight: 500;
  color: #047857 !important;
  line-height: 1.45;
}

.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea,
.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: 18px !important;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea {
  margin-top: 0 !important;
}

.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .cancelCloseExamPopup,
.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .submitCloseExamPopup,
.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .timerOutResultBtn,
.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup {
  flex: 1 1 0% !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .cancelCloseExamPopup {
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border: 1px solid #4338ca !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25);
}

.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .cancelCloseExamPopup:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.34);
}

.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .submitCloseExamPopup {
  background: #fff1f2 !important;
  color: #be123c !important;
  border: 1px solid #fecdd3 !important;
  box-shadow: none;
}

.closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea .submitCloseExamPopup:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
  color: #9f1239 !important;
  transform: translateY(-1px);
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .timerOutResultBtn {
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border: 1px solid #4338ca !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.26);
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .timerOutResultBtn i,
.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .timerOutResultBtn span {
  color: #ffffff !important;
  font-size: 14px;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .timerOutResultBtn i {
  font-size: 16px;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .timerOutResultBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.36);
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: none !important;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup i,
.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup span {
  color: #334155 !important;
  font-size: 14px;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup i {
  font-size: 16px;
}

.timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

body.darkMode .closeExamPopup,
body.darkMode .timerOutPopup {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.darkMode .closeExamPopup .closeExamPopupContent h1,
body.darkMode .timerOutPopup .timerOutPopupContent h1 {
  color: #f8fafc !important;
}

body.darkMode .timerOutPopup .timerOutPopupContent .athenaTimerOutSubtitle {
  color: #94a3b8 !important;
}

body.darkMode .timerOutPopup .timerOutPopupThumbnail {
  background: radial-gradient(circle at 50% 35%, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.12) 100%);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), inset 0 0 0 3px #1e293b;
}

body.darkMode .timerOutPopup .timerOutPopupContent .athenaTimerOutInfoBox {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

body.darkMode .timerOutPopup .timerOutPopupContent .athenaTimerOutInfoText strong {
  color: #34d399 !important;
}

body.darkMode .timerOutPopup .timerOutPopupContent .athenaTimerOutInfoText span {
  color: #a7f3d0 !important;
}

body.darkMode .timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

body.darkMode .timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup i,
body.darkMode .timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea .closeTimerOutPopup span {
  color: #e2e8f0 !important;
}

@media (max-width: 440px) {
  .closeExamPopup .closeExamPopupContent .closeExamPopupBtnArea,
  .timerOutPopup .timerOutPopupContent .athenaTimerOutBtnArea {
    grid-template-columns: 1fr;
  }
}

/* Cloze Drop-Down in Between Sentence (.drop_down_in_between) */
.athenaExamRunnerPage .drop_down_in_between .drop_down_section {
  font-size: 15px;
  line-height: 2;
  color: #1e293b;
}

.athenaExamRunnerPage .drop_down_in_between .drop_down_section select {
  display: inline-block;
  width: auto !important;
  min-width: 190px;
  max-width: 100%;
  height: 38px;
  padding: 4px 32px 4px 12px;
  margin: 4px 6px;
  border-radius: 8px;
  border: 1.5px solid #6366f1;
  background-color: #f5f3ff;
  color: #1e1b4b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.1);
}

.athenaExamRunnerPage .drop_down_in_between .drop_down_section select:focus {
  outline: none;
  border-color: #4338ca;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.athenaExamRunnerPage .drop_down_in_between .div1 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 38px !important;
  padding: 4px 12px;
  margin: 4px 6px;
  vertical-align: middle;
  border-radius: 8px;
  border: 1.5px dashed #6366f1 !important;
  background: #f5f3ff;
}

/* Compact NGN Bow-Tie (.tab_drag_drop_data) */
.athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBox {
  gap: 14px;
  margin-bottom: 18px;
}

.athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxActionBox {
  min-height: 54px !important;
  height: auto !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1.5px dashed #94a3b8 !important;
  background: #f8fafc !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.16s ease;
}

.athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxActionBox:hover {
  border-color: #6366f1 !important;
  background: #f5f3ff !important;
}

.athenaExamRunnerPage .tab_drag_drop_data .draggable1,
.athenaExamRunnerPage .tab_drag_drop_data .draggable2,
.athenaExamRunnerPage .tab_drag_drop_data .draggable3,
.athenaExamRunnerPage .drop_down_in_between .draggable4,
.athenaExamRunnerPage .match_the_following .draggable5 {
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.athenaExamRunnerPage .tab_drag_drop_data .draggable1:hover,
.athenaExamRunnerPage .tab_drag_drop_data .draggable2:hover,
.athenaExamRunnerPage .tab_drag_drop_data .draggable3:hover,
.athenaExamRunnerPage .drop_down_in_between .draggable4:hover,
.athenaExamRunnerPage .match_the_following .draggable5:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
}

/* Question Navigator Modal (.navigation.athenaRunnerNavModal) */
.navigation.athenaRunnerNavModal {
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
}

.navigation.athenaRunnerNavModal .navigationHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}

.navigation.athenaRunnerNavModal .athenaNavModalHeadWrap,
.navigation.athenaRunnerNavModal .navigationHeadTitleWrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.navigation.athenaRunnerNavModal .athenaNavModalHeadWrap h1,
.navigation.athenaRunnerNavModal .navigationHeadTitleWrap h1 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff !important;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.navigation.athenaRunnerNavModal .athenaNavModalHeadWrap h1 i,
.navigation.athenaRunnerNavModal .navigationHeadTitleWrap h1 i {
  color: #ffffff !important;
}

.navigation.athenaRunnerNavModal .athenaNavModalHeadWrap p,
.navigation.athenaRunnerNavModal .navigationHeadTitleWrap p {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0;
  line-height: 1.4;
}

.navigation.athenaRunnerNavModal .athenaNavModalCloseIcon,
.navigation.athenaRunnerNavModal .navigationCloseIcon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.navigation.athenaRunnerNavModal .athenaNavModalCloseIcon:hover,
.navigation.athenaRunnerNavModal .navigationCloseIcon:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.4);
}

.navigation.athenaRunnerNavModal .athenaNavModalCloseIcon i,
.navigation.athenaRunnerNavModal .navigationCloseIcon i {
  color: #ffffff !important;
  font-size: 18px;
  line-height: 1;
}

.navigation.athenaRunnerNavModal .athenaNavLegendBar {
  width: 100%;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.navigation.athenaRunnerNavModal .athenaNavLegendBar .legendItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569 !important;
  line-height: 1.3;
}

.navigation.athenaRunnerNavModal .athenaNavLegendBar .legendDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.navigation.athenaRunnerNavModal .athenaNavLegendBar .legendDot.is-current {
  background: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.navigation.athenaRunnerNavModal .athenaNavLegendBar .legendDot.is-answered {
  background: #10b981;
}

.navigation.athenaRunnerNavModal .athenaNavLegendBar .legendDot.is-flagged {
  background: #f59e0b;
}

.navigation.athenaRunnerNavModal .athenaNavLegendBar .legendDot.is-unseen {
  background: #cbd5e1;
}

.navigation.athenaRunnerNavModal .navigationBody {
  padding: 16px 20px;
}

.navigation.athenaRunnerNavModal .navigationBody .navigationTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px !important;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 10px;
}

.navigation.athenaRunnerNavModal .navigationBody .navigationTitle .navigationTitleBox {
  flex: 0 0 33.333% !important;
  padding: 0 !important;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569 !important;
}

.navigation.athenaRunnerNavModal .runnerNavJumpItem {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px !important;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 8px;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.navigation.athenaRunnerNavModal .runnerNavJumpItem .navigationContentBox {
  flex: 0 0 33.333% !important;
  padding: 0 !important;
  font-size: 13.5px;
  color: #1e293b !important;
}

.navigation.athenaRunnerNavModal .runnerNavJumpItem .navigationContentBox strong {
  color: #1e293b !important;
  font-weight: 700;
}

.navigation.athenaRunnerNavModal .runnerNavJumpItem.is-current-row {
  border-color: #4f46e5;
  background: #eef2ff;
}

.navigation.athenaRunnerNavModal .navFlagBadge {
  color: #d97706 !important;
  font-size: 12.5px;
  font-weight: 700;
}

.navigation.athenaRunnerNavModal .navFlagBadge i {
  color: #d97706 !important;
}

.navigation.athenaRunnerNavModal .navStatusBadge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.navigation.athenaRunnerNavModal .navStatusBadge.status-answered {
  background: #ecfdf5;
  color: #047857 !important;
}

.navigation.athenaRunnerNavModal .navStatusBadge.status-seen {
  background: #eff6ff;
  color: #1d4ed8 !important;
}

.navigation.athenaRunnerNavModal .navStatusBadge.status-unseen {
  background: #f1f5f9;
  color: #64748b !important;
}

.navigation.athenaRunnerNavModal .navigationBodyFooter {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.navigation.athenaRunnerNavModal .navigationBodyFooter p {
  font-size: 13px;
  font-weight: 600;
  color: #475569 !important;
  margin: 0;
}

.navigation .navigationBodyFooter .navigationClose,
.navigation.athenaRunnerNavModal .navigationBodyFooter .navigationClose {
  margin-left: auto !important;
  flex-shrink: 0;
}

body.darkMode .navigation.athenaRunnerNavModal .athenaNavLegendBar {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

body.darkMode .navigation.athenaRunnerNavModal .athenaNavLegendBar .legendItem {
  color: #cbd5e1 !important;
}

body.darkMode .navigation.athenaRunnerNavModal .navigationBody {
  background: #0f172a !important;
}

body.darkMode .navigation.athenaRunnerNavModal .navigationBody .navigationTitle {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.darkMode .navigation.athenaRunnerNavModal .navigationBody .navigationTitle .navigationTitleBox {
  color: #cbd5e1 !important;
}

body.darkMode .navigation.athenaRunnerNavModal .runnerNavJumpItem {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.darkMode .navigation.athenaRunnerNavModal .runnerNavJumpItem.is-current-row {
  background: rgba(79, 70, 229, 0.2) !important;
  border-color: #6366f1 !important;
}

body.darkMode .navigation.athenaRunnerNavModal .runnerNavJumpItem .navigationContentBox,
body.darkMode .navigation.athenaRunnerNavModal .runnerNavJumpItem .navigationContentBox strong {
  color: #f1f5f9 !important;
}

body.darkMode .navigation.athenaRunnerNavModal .navigationBodyFooter {
  background: #1e293b !important;
  border-top-color: #334155 !important;
}

body.darkMode .navigation.athenaRunnerNavModal .navigationBodyFooter p {
  color: #cbd5e1 !important;
}

/* Responsive & Question Type Layout Enhancements */
.athenaExamRunnerPage .checkboxRadioButtonTable,
.checkboxRadioButtonTable {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  margin-top: 20px !important;
}

.athenaExamRunnerPage .dropDownBetweenSentenceOptions {
  width: 100% !important;
  max-width: 480px;
}

.athenaExamRunnerPage .matchTheFollowing {
  gap: 20px !important;
  margin-top: 24px !important;
}

.athenaExamRunnerPage .matchTheFollowing .matchTheFollowingBox {
  flex: 1 1 280px;
  width: auto !important;
  max-width: 100%;
}

/* Responsive Breakpoints for Fullscreen, Tablet & Mobile Screens */
@media (max-width: 1080px) {
  .canvas.flexCanvas.athenaExamRunnerPage {
    width: 100% !important;
    margin-left: 0 !important;
    flex-direction: column;
    padding: 12px 14px 96px;
  }

  .canvas.athenaExamRunnerPage.expandCanvas,
  .sidemenu.sidemenuExpant ~ .canvas.athenaExamRunnerPage.expandCanvas {
    padding: 12px 16px 40px !important;
  }

  .athenaExamRunnerPage .athenaRunnerWorkspaceSplit,
  .athenaReviewPage .athenaRunnerWorkspaceSplit {
    flex-direction: column !important;
    gap: 0;
  }

  .athenaExamRunnerPage .synario,
  .athenaReviewPage .synario {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
    max-height: none !important;
    margin: 0 0 16px 0 !important;
  }

  .athenaExamRunnerPage .athenaScenarioBody,
  .athenaReviewPage .athenaScenarioBody {
    padding: 18px 20px 20px 20px !important;
    max-height: min(48vh, 380px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 768px) {
  .athenaReviewPage.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }

  .tab_drag_drop_data .tabDragDropBox,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBox,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBox {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 18px !important;
    overflow: visible !important;
  }

  .tab_drag_drop_data .tabDragDropBoxHead,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxHead,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxHead {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadGap,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadGap,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadGap {
    display: none !important;
  }

  .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1 {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 12px 14px 12px !important;
    position: relative;
  }

  .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1.action_to_take_head::before {
    content: "Action to Take";
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    padding: 6px 12px;
    border-radius: 8px;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    margin-bottom: 2px;
  }

  .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1.action_to_take_head[data-mobile-heading]:not([data-mobile-heading=""])::before {
    content: attr(data-mobile-heading);
  }

  .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1.Condition_most_exp_head::before {
    content: "Condition Most Likely Experiencing";
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    padding: 6px 12px;
    border-radius: 8px;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    margin-bottom: 2px;
  }

  .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1.Condition_most_exp_head[data-mobile-heading]:not([data-mobile-heading=""])::before {
    content: attr(data-mobile-heading);
  }

  .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1.Complication_head::before {
    content: "Parameters to Monitor";
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #0f766e;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    padding: 6px 12px;
    border-radius: 8px;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    margin-bottom: 2px;
  }

  .tab_drag_drop_data .tabDragDropBoxHead .tabDragDropBoxHeadCol1.Complication_head[data-mobile-heading]:not([data-mobile-heading=""])::before {
    content: attr(data-mobile-heading);
  }

  .tab_drag_drop_data .tabDragDropBoxActionBox,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxActionBox,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxActionBox {
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    border: 1.5px dashed #94a3b8 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .tab_drag_drop_data .tabDragDropBoxActionBox span,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxActionBox span,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxActionBox span {
    font-size: 13px !important;
    color: #64748b !important;
    text-align: center;
  }

  .tab_drag_drop_data .tabDragDropBoxActionBox .draggable1,
  .tab_drag_drop_data .tabDragDropBoxActionBox .draggable2,
  .tab_drag_drop_data .tabDragDropBoxActionBox .draggable3,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxActionBox .draggable1,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxActionBox .draggable2,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxActionBox .draggable3,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxActionBox .draggable1,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxActionBox .draggable2,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxActionBox .draggable3 {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .tab_drag_drop_data .tabDragDropBoxBody,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxBody,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxBody {
    margin-top: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol h2,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol h2,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol h2 {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
  }

  .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol .dragArea p,
  .athenaReviewPage .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol .dragArea p,
  .athenaExamRunnerPage .tab_drag_drop_data .tabDragDropBoxBody .tabDragDropBoxCol .dragArea p {
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 640px) {
  .canvas.flexCanvas.athenaExamRunnerPage {
    padding: 10px 10px 92px;
  }

  .canvas.athenaExamRunnerPage.expandCanvas,
  .sidemenu.sidemenuExpant ~ .canvas.athenaExamRunnerPage.expandCanvas {
    padding: 10px 10px 36px !important;
  }

  .canvas.athenaExamRunnerPage .canvasMain .breadCrumbs.athenaRunnerTopBar {
    padding: 12px 14px;
    border-radius: 14px;
    margin-top: 6px;
    margin-bottom: 14px;
    gap: 10px;
  }

  .athenaExamRunnerPage .revTopUtilityRow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding-bottom: 10px;
  }

  .athenaExamRunnerPage .revUtilityRight {
    display: contents !important;
  }

  .athenaExamRunnerPage .revUtilityRight .FullscreenCloseBox {
    order: 1 !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  .athenaExamRunnerPage .revUtilityLeft {
    order: 2 !important;
    flex: 0 0 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px;
  }

  .athenaExamRunnerPage .revUtilityRight .athenaRunnerFlagBtn {
    order: 3 !important;
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center;
    text-align: center;
    padding: 7px 10px;
    font-size: 12px !important;
  }

  .athenaExamRunnerPage .revUtilityRight .athenaRunnerGridBtn {
    order: 4 !important;
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center;
    text-align: center;
    padding: 7px 10px;
    font-size: 12px !important;
  }

  .athenaExamRunnerPage .revUtilDivider {
    display: none;
  }

  .athenaExamRunnerPage .revHeroMainRow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .athenaExamRunnerPage .revHeroTitleBlock {
    width: 100%;
    gap: 8px;
  }

  .athenaExamRunnerPage .revHeroTitleWrap {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .athenaExamRunnerPage #runnerHeroExamTitle {
    font-size: 16.5px !important;
  }

  .athenaExamRunnerPage .revQuestionCounterBadge {
    font-size: 12px;
    padding: 3px 10px;
  }

  .athenaExamRunnerPage .revHeroMetaPills {
    width: 100%;
    gap: 6px;
  }

  .athenaExamRunnerPage .revMetaPill {
    font-size: 11.5px;
    padding: 4px 9px;
    white-space: normal;
  }

  .athenaExamRunnerPage .athenaRunnerHeroActions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .athenaExamRunnerPage .revQuickJumpGroup {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .athenaExamRunnerPage .revQuickJumpGroup .revNavBtn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 12px;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  .athenaExamRunnerPage .athenaRunnerTimerPill {
    width: 100%;
    justify-content: center;
  }

  .athenaExamRunnerPage .athenaRunnerProgressBarWrap {
    padding-top: 10px;
  }

  .athenaExamRunnerPage .runnerQStripPill {
    min-width: 32px;
    height: 28px;
    padding: 0 7px;
    font-size: 11.5px;
  }

  .athenaExamRunnerPage .synario,
  .athenaReviewPage .synario {
    border-radius: 14px !important;
    margin: 0 0 14px 0 !important;
  }

  .athenaExamRunnerPage .athenaScenarioHeader,
  .athenaReviewPage .athenaScenarioHeader {
    padding: 12px 14px;
  }

  .athenaExamRunnerPage .athenaScenarioIcon,
  .athenaReviewPage .athenaScenarioIcon {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .athenaExamRunnerPage .athenaScenarioBadge,
  .athenaReviewPage .athenaScenarioBadge {
    font-size: 9.5px;
  }

  .athenaExamRunnerPage .athenaScenarioHeader h2,
  .athenaReviewPage .athenaScenarioHeader h2 {
    font-size: 14px !important;
  }

  .athenaExamRunnerPage .athenaScenarioBody,
  .athenaReviewPage .athenaScenarioBody {
    padding: 14px 14px 16px 14px !important;
    font-size: 13.8px !important;
    line-height: 1.65 !important;
    max-height: min(45vh, 340px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
  }

  .athenaExamRunnerPage .athenaScenarioBody p,
  .athenaReviewPage .athenaScenarioBody p {
    font-size: 13.8px !important;
    line-height: 1.65 !important;
  }

  .athenaReviewPage.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox {
    padding: 15px 14px !important;
  }

  .athenaReviewPage.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox > h1,
  .athenaReviewPage.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionWrite > h1 {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }

  .athenaExamRunnerPage .drop_down_in_between .dropDownBetweenSentence {
    padding: 14px !important;
    margin-top: 18px !important;
  }

  .athenaExamRunnerPage .drop_down_in_between .drop_down_section select,
  .athenaExamRunnerPage .drop_down_in_between .div1 {
    width: 100% !important;
    min-width: 0 !important;
    margin: 6px 0 !important;
  }

  .athenaExamRunnerPage .drop_down_in_between .dropDownBetweenSentence .prDiv .droptextArea {
    min-width: 140px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    margin: 5px 2px !important;
    top: 0 !important;
  }
}

/* Touch Drag-and-Drop & Tap-to-Place Support for All Screen Sizes */
.draggable1,
.draggable2,
.draggable3,
.draggable4,
.tile {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  cursor: grab;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.draggable1:active,
.draggable2:active,
.draggable3:active,
.draggable4:active,
.tile:active {
  cursor: grabbing;
}

.draggable1.dragging,
.draggable2.dragging,
.draggable3.dragging,
.draggable4.dragging,
.tile.dragging {
  opacity: 0.45 !important;
}

.draggable1.is-option-selected,
.draggable2.is-option-selected,
.draggable3.is-option-selected,
.draggable4.is-option-selected,
.tile.is-option-selected {
  border-color: #6d28d9 !important;
  background: #ede9fe !important;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.24) !important;
}

.droptextArea,
.tabDragDropBoxActionBox {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
}

.droptextArea.is-drag-over,
.droptextArea.is-target-selected {
  background: #67e8f9 !important;
  outline: 2px dashed #5b21b6 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.18) !important;
}

.tabDragDropBoxActionBox.is-drag-over,
.tabDragDropBoxActionBox.is-target-selected,
.matchTheFollowingBox.is-drag-over,
.dropDownBetweenSentenceOptionsDragArea.is-drag-over {
  outline: 2px dashed #5b21b6 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.16) !important;
}

/* Long Option Text Wrapping & Dynamic Expansion Across All Drag-and-Drop / Select Types */
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 {
  flex: 1 1 0%;
  min-width: 0;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox {
  height: auto !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  box-sizing: border-box;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox span {
  position: static !important;
  z-index: 0 !important;
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox span:not(:only-child) {
  display: none !important;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox .draggable1,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox .draggable2,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxHead .tabDragDropBoxHeadCol1 .tabDragDropBoxActionBox .draggable3,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol .dragArea p,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentenceOptions .dropDownBetweenSentenceOptionsDragArea p,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .dropDownBetweenSentence .prDiv .droptextArea p,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .matchTheFollowing .matchTheFollowingBox .matchTheFollowingBoxBody p {
  height: auto !important;
  min-height: 38px;
  line-height: 1.45 !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  box-sizing: border-box;
  margin: 0;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .tabDragDropBox .tabDragDropBoxBody .tabDragDropBoxCol,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .matchTheFollowing .matchTheFollowingBox {
  min-width: 0;
  box-sizing: border-box;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .drop_down_in_between .drop_down_section select {
  max-width: 100%;
  text-overflow: ellipsis;
}

.athenaTouchDragGhost {
  position: fixed;
  z-index: 999999;
  pointer-events: none !important;
  background: #ede9fe;
  border: 2px solid #6d28d9;
  color: #1e1b4b;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  max-width: min(320px, 86vw);
  word-break: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 14px 32px rgba(76, 29, 149, 0.28);
  transform: translate(-50%, -50%) scale(1.03);
}

/* Exam Completed Persistent Banner & Check Result Button States */
.athenaExamRunnerPage .athenaExamCompletedBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1.5px solid #34d399;
  color: #065f46 !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.12);
}

.athenaExamRunnerPage .athenaExamCompletedBarText {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
}

.athenaExamRunnerPage .athenaExamCompletedBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #10b981;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.athenaExamRunnerPage .athenaExamCompletedBadge i {
  color: #ffffff !important;
  font-size: 14px;
}

.athenaExamRunnerPage .athenaExamCompletedBarBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.athenaExamRunnerPage .athenaExamCompletedBarBtn i,
.athenaExamRunnerPage .athenaExamCompletedBarBtn span {
  color: #ffffff !important;
}

.athenaExamRunnerPage .athenaExamCompletedBarBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.34);
}

.athenaExamRunnerPage #runnerTopNextBtn.is-finish-result-btn,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.Next_class.is-finish-result-btn {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(5, 150, 105, 0.26) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.athenaExamRunnerPage #runnerTopNextBtn.is-finish-result-btn i,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.Next_class.is-finish-result-btn i {
  color: #ffffff !important;
}

.athenaExamRunnerPage #runnerTopNextBtn.is-finish-result-btn:hover,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.Next_class.is-finish-result-btn:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.athenaExamRunnerPage #runnerTopNextBtn.is-next-unanswered-btn,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.Next_class.is-next-unanswered-btn {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(79, 70, 229, 0.25) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.athenaExamRunnerPage #runnerTopNextBtn.is-next-unanswered-btn i,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.Next_class.is-next-unanswered-btn i {
  color: #ffffff !important;
}

.athenaExamRunnerPage #runnerTopNextBtn.is-next-unanswered-btn:hover,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .examQuestionFooter a.Next_class.is-next-unanswered-btn:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.completeExamPopup .completeExamPopupContent .completeExamPopupBtnGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 24px;
}

.completeExamPopup .completeExamPopupContent .completeExamPopupBtnGroup a {
  margin-top: 0 !important;
  width: auto !important;
  min-width: 170px;
  padding: 12px 24px !important;
  font-weight: 700;
}

.completeExamPopup .completeExamPopupContent .completeExamPopupBtnGroup .completeExamReviewBtn {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 170px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #334155 !important;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.completeExamPopup .completeExamPopupContent .completeExamPopupBtnGroup .completeExamReviewBtn:hover {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca !important;
}

@media (max-width: 640px) {
  .athenaExamRunnerPage .athenaExamCompletedBar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .athenaExamRunnerPage .athenaExamCompletedBarBtn {
    width: 100%;
  }

  .completeExamPopup .completeExamPopupContent .completeExamPopupBtnGroup {
    flex-direction: column;
    align-items: stretch;
  }

  .completeExamPopup .completeExamPopupContent .completeExamPopupBtnGroup a,
  .completeExamPopup .completeExamPopupContent .completeExamPopupBtnGroup .completeExamReviewBtn {
    width: 100% !important;
  }
}

/* Matrix / Grid: show white tick mark inside blue (right answer not chosen by student) cells */
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox label.matrix-unmarked-correct::after,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox label[style*="03a9f4"]::after,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableCheckbox label[style*="169, 244"]::after,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio label.matrix-unmarked-correct::after,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio label[style*="03a9f4"]::after,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio label[style*="169, 244"]::after,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .checkboxRadioButtonTable table td .checkboxRadioButtonTableRadio label[style*="03c403"]::after {
  position: absolute;
  content: '';
  width: 10px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background: transparent !important;
  border-radius: 0 !important;
  transform: rotate(-45deg);
  display: block !important;
  top: 3px;
}

/* Global Portal-Wide Network Connection Status Banner & Slow-Load Detector UI */
#runnerNetworkStatusBanner {
  display: none !important;
}

.athenaGlobalNetworkBanner {
  position: fixed;
  top: 76px;
  left: calc(250px + (100vw - 250px) / 2);
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 290px));
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fbbf24;
  color: #92400e !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(245, 158, 11, 0.16);
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body:has(.sidemenu.expandSidemenu) .athenaGlobalNetworkBanner,
body:not(:has(.sidemenu)) .athenaGlobalNetworkBanner {
  left: 50%;
  width: min(920px, calc(100vw - 32px));
}

.athenaGlobalNetworkInner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.athenaGlobalNetworkActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.athenaGlobalNetworkCloseBtn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: inherit !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.athenaGlobalNetworkCloseBtn i {
  color: inherit !important;
  line-height: 1;
}

.athenaGlobalNetworkCloseBtn:hover {
  background: #ffffff;
  transform: scale(1.04);
}

.athenaGlobalNetworkBanner.is-offline,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-offline {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: #fb7185;
  color: #9f1239 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14), 0 6px 18px rgba(225, 29, 72, 0.18);
}

.athenaGlobalNetworkBanner.is-online,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-online {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #34d399;
  color: #065f46 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12), 0 6px 18px rgba(16, 185, 129, 0.16);
}

.athenaGlobalNetworkBanner .athenaNetworkStatusIcon,
.athenaExamRunnerPage .athenaNetworkStatusIcon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f59e0b;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
}

.athenaGlobalNetworkBanner .athenaNetworkStatusIcon i,
.athenaExamRunnerPage .athenaNetworkStatusIcon i {
  color: #ffffff !important;
  line-height: 1;
}

.athenaGlobalNetworkBanner.is-offline .athenaNetworkStatusIcon,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-offline .athenaNetworkStatusIcon {
  background: #e11d48;
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.25);
}

.athenaGlobalNetworkBanner.is-online .athenaNetworkStatusIcon,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-online .athenaNetworkStatusIcon {
  background: #10b981;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

.athenaGlobalNetworkBanner .athenaNetworkStatusText,
.athenaExamRunnerPage .athenaNetworkStatusText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.athenaGlobalNetworkBanner .athenaNetworkStatusText strong,
.athenaExamRunnerPage .athenaNetworkStatusText strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #92400e !important;
  line-height: 1.3;
}

.athenaGlobalNetworkBanner .athenaNetworkStatusText span,
.athenaExamRunnerPage .athenaNetworkStatusText span {
  font-size: 12.6px;
  font-weight: 500;
  color: #b45309 !important;
  line-height: 1.45;
}

.athenaGlobalNetworkBanner.is-offline .athenaNetworkStatusText strong,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-offline .athenaNetworkStatusText strong {
  color: #9f1239 !important;
}

.athenaGlobalNetworkBanner.is-offline .athenaNetworkStatusText span,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-offline .athenaNetworkStatusText span {
  color: #be123c !important;
}

.athenaGlobalNetworkBanner.is-online .athenaNetworkStatusText strong,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-online .athenaNetworkStatusText strong {
  color: #065f46 !important;
}

.athenaGlobalNetworkBanner.is-online .athenaNetworkStatusText span,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-online .athenaNetworkStatusText span {
  color: #047857 !important;
}

.athenaGlobalNetworkBanner .athenaNetworkStatusRetryBtn,
.athenaExamRunnerPage .athenaNetworkStatusRetryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #d97706;
  background: #ffffff;
  color: #b45309 !important;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.athenaGlobalNetworkBanner .athenaNetworkStatusRetryBtn i,
.athenaGlobalNetworkBanner .athenaNetworkStatusRetryBtn span,
.athenaExamRunnerPage .athenaNetworkStatusRetryBtn i,
.athenaExamRunnerPage .athenaNetworkStatusRetryBtn span {
  color: inherit !important;
}

.athenaGlobalNetworkBanner.is-offline .athenaNetworkStatusRetryBtn,
.athenaExamRunnerPage .athenaNetworkStatusBanner.is-offline .athenaNetworkStatusRetryBtn {
  border-color: #e11d48;
  color: #be123c !important;
}

.athenaGlobalNetworkBanner .athenaNetworkStatusRetryBtn:hover,
.athenaExamRunnerPage .athenaNetworkStatusRetryBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

@media (max-width: 1050px) {
  .athenaGlobalNetworkBanner {
    left: 50%;
    top: 68px;
    width: calc(100vw - 24px);
    padding: 10px 14px;
  }
}

@media (max-width: 640px) {
  .athenaGlobalNetworkInner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .athenaGlobalNetworkActions {
    margin-left: auto;
  }
}

.loadinSection .loadinSectionThumbnail {
  width: auto !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
}

.loadinSection .athenaLoaderNetworkBox {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}

.loadinSection .athenaLoaderNetworkBox.is-offline {
  background: #fff1f2;
  border-color: #fecdd3;
}

.loadinSection .athenaLoaderNetworkBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #b45309 !important;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.loadinSection .athenaLoaderNetworkBadge i,
.loadinSection .athenaLoaderNetworkBadge span {
  color: #b45309 !important;
}

.loadinSection .athenaLoaderNetworkBox.is-offline .athenaLoaderNetworkBadge {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #be123c !important;
}

.loadinSection .athenaLoaderNetworkBox.is-offline .athenaLoaderNetworkBadge i,
.loadinSection .athenaLoaderNetworkBox.is-offline .athenaLoaderNetworkBadge span {
  color: #be123c !important;
}

.loadinSection .athenaLoaderNetworkText {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  font-weight: 500;
  margin: 0 !important;
}

.loadinSection .athenaLoaderRetryBtn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid #4338ca;
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.24);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loadinSection .athenaLoaderRetryBtn i,
.loadinSection .athenaLoaderRetryBtn span {
  color: #ffffff !important;
}

.loadinSection .athenaLoaderRetryBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.34);
}

@media (max-width: 640px) {
  .athenaExamRunnerPage .athenaNetworkStatusBanner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .athenaExamRunnerPage .athenaNetworkStatusRetryBtn {
    width: 100%;
  }
}

/* ==========================================================================
   Interactive Question-Type Visual Guide (.athenaQGuideSection in help.php)
   ========================================================================== */

.athenaHelpPage .athenaQGuideSection {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px 26px 28px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.athenaHelpPage .athenaQGuideHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.athenaHelpPage .athenaQGuideTitleGroup {
  max-width: 680px;
}

.athenaHelpPage .athenaQGuideBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #6d28d9 !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.athenaHelpPage .athenaQGuideTitleGroup h2 {
  font-size: 21px;
  font-weight: 800;
  color: #0f172a !important;
  margin: 0 0 5px 0;
  letter-spacing: -0.015em;
}

.athenaHelpPage .athenaQGuideTitleGroup p {
  font-size: 13.5px;
  color: #64748b !important;
  line-height: 1.5;
  margin: 0;
}

.athenaHelpPage .athenaQGuideColorKey {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 10px 14px;
  border-radius: 12px;
}

.athenaHelpPage .athenaQGuideColorKey .colorKeyLabel {
  font-size: 12px;
  font-weight: 700;
  color: #475569 !important;
  margin-right: 4px;
}

.athenaHelpPage .colorKeyChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.athenaHelpPage .colorKeyChip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.athenaHelpPage .colorKeyChip.is-green {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534 !important;
}

.athenaHelpPage .colorKeyChip.is-green .dot {
  background: #16a34a;
}

.athenaHelpPage .colorKeyChip.is-red {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b !important;
}

.athenaHelpPage .colorKeyChip.is-red .dot {
  background: #dc2626;
}

.athenaHelpPage .colorKeyChip.is-blue {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e40af !important;
}

.athenaHelpPage .colorKeyChip.is-blue .dot {
  background: #2563eb;
}

/* Selector Tabs */
.athenaHelpPage .athenaQGuideTabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.athenaHelpPage .athenaQGuideTab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: 11px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569 !important;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.athenaHelpPage .athenaQGuideTab i {
  font-size: 16px;
  color: #64748b !important;
}

.athenaHelpPage .athenaQGuideTab:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #4c1d95 !important;
}

.athenaHelpPage .athenaQGuideTab.active {
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
  border-color: #4338ca;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.24);
}

.athenaHelpPage .athenaQGuideTab.active i,
.athenaHelpPage .athenaQGuideTab.active span {
  color: #ffffff !important;
}

/* Panel Layout */
.athenaHelpPage .athenaQGuidePanel {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.athenaHelpPage .athenaQGuideVisualCol {
  display: flex;
  flex-direction: column;
}

.athenaHelpPage .qMockFrame {
  flex: 1;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: inset 0 1px 0 #ffffff;
}

.athenaHelpPage .qMockTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px dashed #cbd5e1;
}

.athenaHelpPage .qMockPill {
  font-size: 11.5px;
  font-weight: 800;
  color: #4c1d95 !important;
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  padding: 4px 10px;
  border-radius: 999px;
}

.athenaHelpPage .qMockHint {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 1. Bow-Tie Mockup */
.athenaHelpPage .qMockBowtieDiagram {
  display: grid;
  grid-template-columns: 1fr 22px 1fr 22px 1fr;
  align-items: center;
  gap: 4px;
}

.athenaHelpPage .qMockBtCol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.athenaHelpPage .qMockBtSlot {
  background: #ffffff;
  border: 1.5px dashed #94a3b8;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.athenaHelpPage .qMockBtSlot .slotTag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b !important;
}

.athenaHelpPage .qMockBtSlot.is-filled-green {
  background: #dcfce7;
  border: 1.5px solid #16a34a;
  color: #14532d !important;
}

.athenaHelpPage .qMockBtSlot.is-filled-purple {
  background: #ede9fe;
  border: 1.5px solid #6d28d9;
  color: #2e1065 !important;
}

.athenaHelpPage .qMockBtSlot.is-empty-target {
  background: #fffbeb;
  border: 1.5px dashed #d97706;
  color: #92400e !important;
}

.athenaHelpPage .qMockBtConnectors {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 76px;
}

.athenaHelpPage .qMockBtConnectors .btLine {
  display: block;
  width: 100%;
  height: 2px;
  background: #94a3b8;
}

.athenaHelpPage .qMockBtConnectors.is-left .btLine.top {
  transform: rotate(24deg);
}

.athenaHelpPage .qMockBtConnectors.is-left .btLine.bottom {
  transform: rotate(-24deg);
}

.athenaHelpPage .qMockBtConnectors.is-right .btLine.top {
  transform: rotate(-24deg);
}

.athenaHelpPage .qMockBtConnectors.is-right .btLine.bottom {
  transform: rotate(24deg);
}

.athenaHelpPage .qMockBtPools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.athenaHelpPage .qMockBtPoolCol {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.athenaHelpPage .qMockBtPoolCol h5 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: #1e293b !important;
  text-align: center;
}

.athenaHelpPage .qMockPoolToken {
  background: #f3f4ff;
  border: 1px solid #aab1fe;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1e293b !important;
  line-height: 1.3;
}

.athenaHelpPage .qMockPoolToken.is-clickable-demo {
  background: #ede9fe;
  border: 1.5px solid #6d28d9;
  color: #4c1d95 !important;
  font-weight: 700;
}

.athenaHelpPage .qMockPoolToken.is-selected-purple {
  background: #ede9fe;
  border: 1.5px solid #6d28d9;
  color: #4c1d95 !important;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.16);
}

.athenaHelpPage .qMockPoolToken.is-placed-green {
  background: #dcfce7;
  border: 1.5px solid #16a34a;
  color: #14532d !important;
}

/* 2. Matrix Mockup */
.athenaHelpPage .qMockMatrixWrap {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.athenaHelpPage .qMockMatrixTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.athenaHelpPage .qMockMatrixTable th {
  background: #4c1d95;
  color: #ffffff !important;
  padding: 9px 10px;
  font-weight: 700;
  text-align: left;
  font-size: 11.5px;
}

.athenaHelpPage .qMockMatrixTable th:not(:first-child),
.athenaHelpPage .qMockMatrixTable td:not(:first-child) {
  text-align: center;
}

.athenaHelpPage .qMockMatrixTable td {
  padding: 9px 10px;
  border-top: 1px solid #e2e8f0;
  color: #1e293b !important;
  font-weight: 600;
}

.athenaHelpPage .qMockMatrixTable .rowTypeHint {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b !important;
}

.athenaHelpPage .mockCtrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid #94a3b8;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff !important;
}

.athenaHelpPage .mockCtrl.radio {
  border-radius: 50%;
}

.athenaHelpPage .mockCtrl.checkbox {
  border-radius: 6px;
}

.athenaHelpPage .mockCtrl.is-correct {
  background: #16a34a;
  border-color: #16a34a;
}

.athenaHelpPage .mockCtrl.is-wrong {
  background: #dc2626;
  border-color: #dc2626;
}

.athenaHelpPage .mockCtrl.is-missed {
  background: #0284c7;
  border-color: #0284c7;
}

.athenaHelpPage .qMockLegendMini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155 !important;
}

.athenaHelpPage .qMockLegendMini .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
}

.athenaHelpPage .qMockLegendMini .dot.green { background: #16a34a; }
.athenaHelpPage .qMockLegendMini .dot.red { background: #dc2626; }
.athenaHelpPage .qMockLegendMini .dot.blue { background: #0284c7; }

/* 3. Cloze Drag & Drop Mockup */
.athenaHelpPage .qMockClozeSplit {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.athenaHelpPage .qMockClozeSentence {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  line-height: 2;
  color: #1e293b !important;
}

.athenaHelpPage .qMockClozeSentence p {
  margin: 0;
}

.athenaHelpPage .qMockBlank {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  margin: 0 3px;
  line-height: 1.4;
}

.athenaHelpPage .qMockBlank.is-filled {
  background: #dcfce7;
  border: 1.5px solid #16a34a;
  color: #166534 !important;
}

.athenaHelpPage .qMockBlank.is-active-target {
  background: #e0f2fe;
  border: 1.5px dashed #5b21b6;
  color: #4c1d95 !important;
}

.athenaHelpPage .qMockClozeBank {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.athenaHelpPage .qMockClozeBank h5 {
  margin: 0 0 2px 0;
  font-size: 11.5px;
  font-weight: 800;
  color: #0f172a !important;
}

/* 4. Cloze Drop-Down Mockup */
.athenaHelpPage .qMockDropdownBox {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.athenaHelpPage .qMockDropdownBox p {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  color: #1e293b !important;
}

.athenaHelpPage .qMockSelect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid #94a3b8;
  background: #f8fafc;
}

.athenaHelpPage .qMockSelect.is-chosen {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534 !important;
}

.athenaHelpPage .qMockSelect.is-open {
  background: #ede9fe;
  border-color: #6d28d9;
  color: #4c1d95 !important;
}

.athenaHelpPage .qMockDropdownMenu {
  align-self: flex-end;
  width: 220px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.athenaHelpPage .qMockDropdownMenu .ddOpt {
  padding: 6px 10px;
  font-size: 11.5px;
  color: #334155 !important;
  border-top: 1px solid #f1f5f9;
}

.athenaHelpPage .qMockDropdownMenu .ddOpt.is-active {
  background: #ede9fe;
  color: #4c1d95 !important;
  font-weight: 700;
}

/* 5. Extended Match Mockup */
.athenaHelpPage .qMockMatchStack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.athenaHelpPage .qMockMatchBox {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
}

.athenaHelpPage .qMockMatchBox.is-answer-zone {
  border: 1.5px dashed #6d28d9;
  background: #faf5ff;
}

.athenaHelpPage .qMockMatchBox h5 {
  margin: 0 0 8px 0;
  font-size: 11.5px;
  font-weight: 800;
  color: #1e293b !important;
}

.athenaHelpPage .qMockMatchTiles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* 6. SATA & Single-Choice Mockup */
.athenaHelpPage .qMockOptionsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.athenaHelpPage .qMockOptRow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b !important;
}

.athenaHelpPage .qMockOptRow.is-green {
  background: #f0fdf4;
  border-color: #86efac;
}

.athenaHelpPage .qMockOptRow.is-red {
  background: #fef2f2;
  border-color: #fca5a5;
}

.athenaHelpPage .qMockOptRow.is-blue {
  background: #eff6ff;
  border-color: #93c5fd;
}

.athenaHelpPage .qMockOptRow .mockBox {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff !important;
  flex-shrink: 0;
}

.athenaHelpPage .qMockOptRow .mockBox.is-green { background: #16a34a; border-color: #16a34a; }
.athenaHelpPage .qMockOptRow .mockBox.is-red { background: #dc2626; border-color: #dc2626; }
.athenaHelpPage .qMockOptRow .mockBox.is-blue { background: #2563eb; border-color: #2563eb; }

.athenaHelpPage .qMockOptRow .optText {
  flex: 1;
}

.athenaHelpPage .qMockOptRow .optBadge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.athenaHelpPage .qMockOptRow .optBadge.green { background: #dcfce7; color: #166534 !important; }
.athenaHelpPage .qMockOptRow .optBadge.red { background: #fee2e2; color: #991b1b !important; }
.athenaHelpPage .qMockOptRow .optBadge.blue { background: #dbeafe; color: #1e40af !important; }

/* 7. Case Study & Exhibit Mockup */
.athenaHelpPage .qMockCaseSplit {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 10px;
}

.athenaHelpPage .qMockEhrPane,
.athenaHelpPage .qMockCaseQPane {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.athenaHelpPage .qMockEhrTabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
}

.athenaHelpPage .qMockEhrTabs .ehrTab {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569 !important;
}

.athenaHelpPage .qMockEhrTabs .ehrTab.active {
  background: #4c1d95;
  color: #ffffff !important;
}

.athenaHelpPage .qMockEhrBody {
  font-size: 11.5px;
  line-height: 1.45;
  color: #334155 !important;
}

.athenaHelpPage .ehrVitalRow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.athenaHelpPage .ehrVitalRow span {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b !important;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}

.athenaHelpPage .caseStepChip {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  background: #ede9fe;
  color: #5b21b6 !important;
  padding: 2px 8px;
  border-radius: 999px;
}

.athenaHelpPage .miniCheck {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b !important;
  background: #f8fafc;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
}

.athenaHelpPage .miniCheck .box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #4f46e5;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

/* Right Info Column inside Panel */
.athenaHelpPage .athenaQGuideInfoCol {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.athenaHelpPage .qGuideTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.athenaHelpPage .qGuideTitleRow h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a !important;
}

.athenaHelpPage .qGuideScoreBadge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857 !important;
}

.athenaHelpPage .qGuideLead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #475569 !important;
}

.athenaHelpPage .qGuideStepsList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.athenaHelpPage .qGuideStepItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 11px 14px;
}

.athenaHelpPage .qGuideStepItem .stepNum {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4f46e5;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.athenaHelpPage .qGuideStepItem strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a !important;
  margin-bottom: 2px;
}

.athenaHelpPage .qGuideStepItem p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #475569 !important;
}

.athenaHelpPage .qGuideDeviceBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.athenaHelpPage .deviceTip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #334155 !important;
}

.athenaHelpPage .deviceTip i {
  font-size: 18px;
  color: #6d28d9 !important;
  margin-top: 1px;
}

@media (max-width: 992px) {
  .athenaHelpPage .athenaQGuidePanel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .athenaHelpPage .athenaQGuideSection {
    padding: 18px 16px;
  }

  .athenaHelpPage .qMockBowtieDiagram,
  .athenaHelpPage .qMockBtPools,
  .athenaHelpPage .qMockClozeSplit,
  .athenaHelpPage .qMockCaseSplit,
  .athenaHelpPage .qGuideDeviceBox {
    grid-template-columns: 1fr;
  }

  .athenaHelpPage .qMockBtConnectors {
    display: none;
  }
}

/* ==========================================================================
   Professional Interactive Top Navbar (nav.athenaModernTopNav)
   ========================================================================== */

nav,
nav.athenaModernTopNav {
  width: 100%;
  height: 64px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06) !important;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100 !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
}

.mobileSidemenu,
.mobileSidemenu.athenaModernMobileDrawer {
  z-index: 165 !important;
}

nav > .container,
nav.athenaModernTopNav > .container {
  width: 96% !important;
  max-width: 1640px;
  height: 64px !important;
  margin: 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px;
}

nav > .container::after,
nav.athenaModernTopNav > .container::after {
  display: none !important;
}

/* 1. Brand Logo */
nav .navLogo,
nav.athenaModernTopNav .navLogo {
  float: none !important;
  order: 1;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  padding: 4px 8px;
  border-radius: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

nav .navLogo:hover,
nav.athenaModernTopNav .navLogo:hover {
  background: #f8fafc !important;
  transform: translateY(-1px);
}

nav .navLogo img,
nav.athenaModernTopNav .navLogo img {
  width: auto !important;
  height: 36px !important;
  max-width: 155px;
  object-fit: contain;
}

/* 2. Workspace Context Pill (#athenaNavPageContext) */
nav.athenaModernTopNav .athenaNavPageContext {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-right: auto;
  min-width: 0;
}

nav.athenaModernTopNav .athenaNavContextDivider {
  width: 1px;
  height: 24px;
  background: #e2e8f0 !important;
  flex-shrink: 0;
}

nav.athenaModernTopNav .athenaNavContextPill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 7px;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  min-width: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

nav.athenaModernTopNav .athenaNavContextPill.is-live {
  background: #f5f3ff !important;
  border-color: #ddd6fe;
}

nav.athenaModernTopNav .athenaNavContextIcon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ede9fe !important;
  color: #5b21b6 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

nav.athenaModernTopNav .athenaNavContextIcon i {
  color: #5b21b6 !important;
  line-height: 1;
}

nav.athenaModernTopNav .athenaNavContextText {
  display: flex;
  align-items: center;
  min-width: 0;
}

nav.athenaModernTopNav .athenaNavContextTitle {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav.athenaModernTopNav .athenaNavLiveDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  flex-shrink: 0;
  animation: athenaNavPulseDot 2s infinite;
}

@keyframes athenaNavPulseDot {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.24);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.08);
  }
}

nav.athenaModernTopNav .athenaNavContextBadge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ede9fe !important;
  color: #5b21b6 !important;
  white-space: nowrap;
}

/* 3. Right Quick-Action Cluster (.athenaNavQuickActions) */
nav.athenaModernTopNav .athenaNavQuickActions {
  order: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

nav.athenaModernTopNav .athenaNavTrackBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe;
  color: #5b21b6 !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

nav.athenaModernTopNav .athenaNavTrackBadge i {
  font-size: 15px;
  color: #6d28d9 !important;
}

nav.athenaModernTopNav .athenaNavTrackBadge span {
  color: #4c1d95 !important;
}

nav.athenaModernTopNav .athenaNavCreateTestBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5434e2 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.22);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  white-space: nowrap;
}

nav.athenaModernTopNav .athenaNavCreateTestBtn i,
nav.athenaModernTopNav .athenaNavCreateTestBtn span {
  color: #ffffff !important;
}

nav.athenaModernTopNav .athenaNavCreateTestBtn i {
  font-size: 15px;
}

nav.athenaModernTopNav .athenaNavCreateTestBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(84, 52, 226, 0.3);
  filter: brightness(1.04);
}

nav.athenaModernTopNav .athenaNavCreateTestBtn.is-active {
  background: linear-gradient(135deg, #5434e2 0%, #6d28d9 100%) !important;
  border: 1px solid transparent;
  box-shadow: 0 3px 10px rgba(84, 52, 226, 0.22);
  color: #ffffff !important;
}

nav.athenaModernTopNav .athenaNavCreateTestBtn.is-active i,
nav.athenaModernTopNav .athenaNavCreateTestBtn.is-active span {
  color: #ffffff !important;
}

nav.athenaModernTopNav .athenaNavIconBtn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.16s ease;
}

nav.athenaModernTopNav .athenaNavIconBtn i {
  color: #475569 !important;
  font-weight: 400 !important;
}

nav.athenaModernTopNav .athenaNavIconBtn:hover {
  background: #f5f3ff !important;
  border-color: #c4b5fd;
  color: #5b21b6 !important;
  transform: translateY(-1px);
}

nav.athenaModernTopNav .athenaNavIconBtn:hover i {
  color: #5b21b6 !important;
}

nav.athenaModernTopNav .athenaNavIconBtn.is-active {
  background: #f8fafc !important;
  border-color: #e2e8f0;
  color: #475569 !important;
}

/* 4. Fullscreen Button Area on Exam Runner Pages */
nav.athenaModernTopNav .navBtnArea,
nav.athenaModernTopNav > .container > .navFullscreen {
  float: none !important;
  order: 3;
  height: auto !important;
  margin-right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0;
}

nav.athenaModernTopNav .navFullscreen {
  float: none !important;
  height: auto !important;
  margin-right: 0 !important;
}

nav.athenaModernTopNav .navFullscreen .navFullscreenBox {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.16s ease;
}

nav.athenaModernTopNav .navFullscreen .navFullscreenBox i {
  margin-right: 0 !important;
  font-size: 13px !important;
  color: #5434e2 !important;
}

nav.athenaModernTopNav .navFullscreen .navFullscreenBox:hover {
  background: #f5f3ff !important;
  border-color: #a78bfa !important;
  color: #4c1d95 !important;
  transform: translateY(-1px);
}

nav.athenaModernTopNav .navFullscreen .navFullscreenBox.is-fullscreen-active {
  background: #ede9fe !important;
  border-color: #8b5cf6 !important;
  color: #4c1d95 !important;
}

/* 5. Interactive Profile Trigger & Dropdown Menu (.navProfile) */
nav .navProfile,
nav.athenaModernTopNav .navProfile {
  float: none !important;
  order: 4;
  position: relative;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-shrink: 0;
}

nav:not(.athenaModernTopNav) > .container > .navProfile {
  margin-left: auto;
}

nav .navProfile .navProfileBox,
nav.athenaModernTopNav .navProfile .navProfileBox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

nav .navProfile .navProfileBox:focus,
nav .navProfile .navProfileBox:active,
nav.athenaModernTopNav .navProfile .navProfileBox:focus,
nav.athenaModernTopNav .navProfile .navProfileBox:active {
  outline: none !important;
}

nav .navProfile .navProfileBox:hover,
nav .navProfile.is-dropdown-open .navProfileBox,
nav.athenaModernTopNav .navProfile .navProfileBox:hover,
nav.athenaModernTopNav .navProfile.is-dropdown-open .navProfileBox {
  background: #f8fafc !important;
  border-color: #c4b5fd !important;
  box-shadow: 0 4px 12px rgba(84, 52, 226, 0.1);
}

nav .navProfile .navProfileBox .navProfileThumbnail,
nav.athenaModernTopNav .navProfile .navProfileBox .navProfileThumbnail {
  position: relative;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  border: 2px solid #6d28d9 !important;
  background: #ede9fe !important;
  overflow: visible !important;
  flex-shrink: 0;
}

nav .navProfile .navProfileBox .navProfileThumbnail img,
nav.athenaModernTopNav .navProfile .navProfileBox .navProfileThumbnail img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

nav .athenaNavOnlineDot,
nav.athenaModernTopNav .athenaNavOnlineDot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981 !important;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
}

nav .navProfile .navProfileBox .navProfileName,
nav.athenaModernTopNav .navProfile .navProfileBox .navProfileName {
  margin-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 1px;
  max-width: 155px;
}

nav .navProfile .navProfileBox .navProfileName h2,
nav.athenaModernTopNav .navProfile .navProfileBox .navProfileName h2 {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  height: auto !important;
  max-width: 150px;
  color: #0f172a !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
}

nav .navProfile .navProfileBox .navProfileName .athenaNavRoleSub,
nav.athenaModernTopNav .navProfile .navProfileBox .navProfileName .athenaNavRoleSub {
  font-size: 10.5px;
  font-weight: 500;
  color: #64748b !important;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

nav .navProfile .navProfileBox .downIcon,
nav.athenaModernTopNav .navProfile .navProfileBox .downIcon {
  font-size: 18px !important;
  margin-left: 2px !important;
  color: #64748b !important;
  transition: transform 0.22s ease, color 0.18s ease;
}

nav .navProfile.is-dropdown-open .navProfileBox .downIcon,
nav.athenaModernTopNav .navProfile.is-dropdown-open .navProfileBox .downIcon {
  transform: rotate(180deg);
  color: #5b21b6 !important;
}

/* Profile Dropdown Card (.athenaNavProfileDropdown) */
nav.athenaModernTopNav .athenaNavProfileDropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 292px;
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 8px;
  z-index: 220;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

nav.athenaModernTopNav .navProfile.is-dropdown-open .athenaNavProfileDropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

nav.athenaModernTopNav .athenaNavDropHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f5f3ff 100%) !important;
  border: 1px solid #ede9fe;
}

nav.athenaModernTopNav .athenaNavDropAvatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #6d28d9;
  background: #ede9fe !important;
  flex-shrink: 0;
}

nav.athenaModernTopNav .athenaNavDropAvatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

nav.athenaModernTopNav .athenaNavDropMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

nav.athenaModernTopNav .athenaNavDropdownName {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav.athenaModernTopNav .athenaNavDropdownEmail {
  font-size: 11.5px;
  color: #64748b !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav.athenaModernTopNav .athenaNavDropTrackPill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ede9fe !important;
  color: #5b21b6 !important;
  font-size: 10.5px;
  font-weight: 600;
}

nav.athenaModernTopNav .athenaNavDropTrackPill i,
nav.athenaModernTopNav .athenaNavDropTrackPill span {
  color: #5b21b6 !important;
}

nav.athenaModernTopNav .athenaNavDropDivider {
  height: 1px;
  background: #f1f5f9 !important;
  margin: 6px 4px;
}

nav.athenaModernTopNav .athenaNavDropList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

nav.athenaModernTopNav .athenaNavDropItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

nav.athenaModernTopNav .athenaNavDropItem:hover {
  background: #f8fafc !important;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemIcon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #f3f0ff !important;
  color: #5b21b6 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemIcon i {
  color: inherit !important;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemIcon.is-indigo {
  background: #e0e7ff !important;
  color: #3730a3 !important;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemIcon.is-emerald {
  background: #dcfce7 !important;
  color: #15803d !important;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemIcon.is-amber {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemText {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemText strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b !important;
  line-height: 1.25;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemText small {
  font-size: 11px;
  color: #64748b !important;
  line-height: 1.25;
}

nav.athenaModernTopNav .athenaNavDropItem .dropItemArrow {
  font-size: 16px;
  color: #94a3b8 !important;
  transition: transform 0.15s ease, color 0.15s ease;
}

nav.athenaModernTopNav .athenaNavDropItem:hover .dropItemArrow {
  transform: translateX(2px);
  color: #5b21b6 !important;
}

nav.athenaModernTopNav .athenaNavDropFooter {
  padding: 2px;
}

nav.athenaModernTopNav .athenaNavDropLogout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fef2f2 !important;
  border: 1px solid #fecaca;
  color: #dc2626 !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

nav.athenaModernTopNav .athenaNavDropLogout i,
nav.athenaModernTopNav .athenaNavDropLogout span {
  color: #dc2626 !important;
}

nav.athenaModernTopNav .athenaNavDropLogout:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5;
}

/* 6. Mobile Hamburger Button (.navBar) */
nav.athenaModernTopNav .navBar {
  order: 5;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

nav.athenaModernTopNav .navBar .navBarBox {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  padding: 0 9px;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

nav.athenaModernTopNav .navBar .navBarBox:hover {
  background: #f5f3ff !important;
  border-color: #c4b5fd;
}

nav.athenaModernTopNav .navBar .navBarBox span {
  width: 18px !important;
  height: 2px !important;
  background: #1e293b !important;
  border-radius: 4px;
  margin-top: 0 !important;
}

/* Responsive Breakpoints for Top Navbar */
@media (max-width: 1180px) {
  nav.athenaModernTopNav .athenaNavTrackBadge,
  nav.athenaModernTopNav .athenaNavContextBadge {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  nav.athenaModernTopNav .navProfile {
    display: none !important;
  }

  nav.athenaModernTopNav .athenaNavQuickActions {
    margin-right: 2px;
    gap: 8px;
  }

  nav.athenaModernTopNav .athenaNavCreateTestBtn span {
    display: none;
  }

  nav.athenaModernTopNav .athenaNavCreateTestBtn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 680px) {
  nav.athenaModernTopNav > .container {
    width: 96% !important;
    gap: 5px !important;
  }

  nav.athenaModernTopNav .athenaNavContextDivider {
    display: none !important;
  }

  nav.athenaModernTopNav .navLogo {
    margin-right: 0 !important;
    padding: 2px !important;
    flex-shrink: 0 !important;
  }

  nav.athenaModernTopNav .navLogo img {
    height: 26px !important;
    max-width: 78px !important;
  }

  nav.athenaModernTopNav .athenaNavPageContext {
    display: inline-flex !important;
    margin-right: auto !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
    gap: 4px !important;
    overflow: hidden;
  }

  nav.athenaModernTopNav .athenaNavContextPill {
    padding: 3px 8px 3px 4px !important;
    gap: 5px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  nav.athenaModernTopNav .athenaNavContextIcon {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  nav.athenaModernTopNav .athenaNavContextText {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden;
  }

  nav.athenaModernTopNav .athenaNavContextTitle {
    font-size: 11px !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  nav.athenaModernTopNav .athenaNavLiveDot {
    width: 6px !important;
    height: 6px !important;
  }

  nav.athenaModernTopNav .athenaNavQuickActions {
    display: inline-flex !important;
    gap: 4px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }

  nav.athenaModernTopNav .athenaNavCreateTestBtn,
  nav.athenaModernTopNav .athenaNavIconBtn {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  nav.athenaModernTopNav .athenaNavCreateTestBtn i {
    font-size: 14px !important;
  }

  nav.athenaModernTopNav .navBtnArea,
  nav.athenaModernTopNav > .container > .navFullscreen {
    margin-right: 0 !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  nav.athenaModernTopNav .navFullscreen .navFullscreenBox {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }

  nav.athenaModernTopNav .navFullscreen .navFullscreenBox i {
    font-size: 10.5px !important;
  }

  nav.athenaModernTopNav .navBar .navBarBox {
    width: 32px !important;
    height: 30px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    gap: 3.5px !important;
  }

  nav.athenaModernTopNav .navBar .navBarBox span {
    width: 15px !important;
  }
}

@media (max-width: 400px) {
  nav.athenaModernTopNav > .container {
    width: 97% !important;
    gap: 4px !important;
  }

  nav.athenaModernTopNav .navLogo img {
    height: 22px !important;
    max-width: 64px !important;
  }

  nav.athenaModernTopNav .athenaNavContextPill {
    padding: 3px 6px 3px 3px !important;
    gap: 4px !important;
  }

  nav.athenaModernTopNav .athenaNavContextIcon {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }

  nav.athenaModernTopNav .athenaNavContextTitle {
    font-size: 10px !important;
  }

  nav.athenaModernTopNav .athenaNavCreateTestBtn,
  nav.athenaModernTopNav .athenaNavIconBtn {
    width: 28px !important;
    height: 28px !important;
    font-size: 13.5px !important;
    border-radius: 7px !important;
  }

  nav.athenaModernTopNav .athenaNavCreateTestBtn i {
    font-size: 13px !important;
  }

  nav.athenaModernTopNav .navFullscreen .navFullscreenBox {
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    gap: 3px !important;
    border-radius: 7px !important;
  }

  nav.athenaModernTopNav .navFullscreen .navFullscreenBox i {
    font-size: 10px !important;
  }

  nav.athenaModernTopNav .navBar .navBarBox {
    width: 30px !important;
    height: 28px !important;
    padding: 0 5px !important;
    border-radius: 7px !important;
  }

  nav.athenaModernTopNav .navBar .navBarBox span {
    width: 14px !important;
  }
}

/* ============================================================
   ATHENA EXAM PORTAL - RICH CONTENT & RESPONSIVE IMAGE DISPLAY
   Ensures rich text authored in Summernote (explanations,
   exhibits, scenarios, headings, blockquotes, code/pre blocks,
   lists, tables, inline styles, and images) renders identically
   across exam attending, resuming, and reviewing pages without
   overflowing containers.
   ============================================================ */

/* Flex/Grid container overflow prevention for exam runner & review */
.athenaRunnerWorkspaceSplit,
.canvas .canvasMain .examCanvas,
.canvas .canvasMain .examCanvas .examCanvasBody,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody,
.explanationBody > div,
.explanationBody > p,
.objective_explanation_data,
.Multiple_Correct_correct_Exp,
.Fill-in-the-Blank_correct_exp,
.Exhibits_Question_Explanation,
.tab_drag_drop_data_explanation_data,
.checkbox_and_radio_table_explanation_data,
.drop_down_in_between_explanation_data,
.match_the_following_explanation_data,
#explanation_details,
#multiple_explanation_details,
#fill_explanation_details,
#exhibits_question_details_exp,
#exhibits_question_details_exp_exb {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.explanationBody:not(:has(> div)),
.explanationBody > div,
.objective_explanation_data,
.Multiple_Correct_correct_Exp,
.Fill-in-the-Blank_correct_exp,
.Exhibits_Question_Explanation,
.tab_drag_drop_data_explanation_data,
.checkbox_and_radio_table_explanation_data,
.drop_down_in_between_explanation_data,
.match_the_following_explanation_data,
#explanation_details,
#multiple_explanation_details,
#fill_explanation_details,
#exhibits_question_details_exp,
#exhibits_question_details_exp_exb {
  width: 100%;
  max-height: min(65vh, 560px);
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  padding-right: 4px;
  padding-bottom: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: #1e293b;
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox > h1,
.canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .examQuestionWrite > h1,
.examQuestionRead {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: min(52vh, 420px);
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  padding-right: 4px;
  padding-bottom: 4px;
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.athenaScenarioBody::-webkit-scrollbar,
.synario::-webkit-scrollbar,
.situationMain::-webkit-scrollbar,
.examQuestionBox > h1::-webkit-scrollbar,
.examQuestionBox .examQuestionWrite > h1::-webkit-scrollbar,
.examQuestionRead::-webkit-scrollbar,
.athenaExhibitQuestionStemBox::-webkit-scrollbar,
.explanationBody:not(:has(> div))::-webkit-scrollbar,
.explanationBody > div::-webkit-scrollbar,
.objective_explanation_data::-webkit-scrollbar,
.Multiple_Correct_correct_Exp::-webkit-scrollbar,
.Fill-in-the-Blank_correct_exp::-webkit-scrollbar,
.Exhibits_Question_Explanation::-webkit-scrollbar,
.tab_drag_drop_data_explanation_data::-webkit-scrollbar,
.checkbox_and_radio_table_explanation_data::-webkit-scrollbar,
.drop_down_in_between_explanation_data::-webkit-scrollbar,
.match_the_following_explanation_data::-webkit-scrollbar,
#explanation_details::-webkit-scrollbar,
#multiple_explanation_details::-webkit-scrollbar,
#fill_explanation_details::-webkit-scrollbar,
#exhibits_question_details_exp::-webkit-scrollbar,
#exhibits_question_details_exp_exb::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.athenaScenarioBody::-webkit-scrollbar-track,
.synario::-webkit-scrollbar-track,
.situationMain::-webkit-scrollbar-track,
.examQuestionBox > h1::-webkit-scrollbar-track,
.examQuestionBox .examQuestionWrite > h1::-webkit-scrollbar-track,
.examQuestionRead::-webkit-scrollbar-track,
.athenaExhibitQuestionStemBox::-webkit-scrollbar-track,
.explanationBody:not(:has(> div))::-webkit-scrollbar-track,
.explanationBody > div::-webkit-scrollbar-track,
.objective_explanation_data::-webkit-scrollbar-track,
.Multiple_Correct_correct_Exp::-webkit-scrollbar-track,
.Fill-in-the-Blank_correct_exp::-webkit-scrollbar-track,
.Exhibits_Question_Explanation::-webkit-scrollbar-track,
.tab_drag_drop_data_explanation_data::-webkit-scrollbar-track,
.checkbox_and_radio_table_explanation_data::-webkit-scrollbar-track,
.drop_down_in_between_explanation_data::-webkit-scrollbar-track,
.match_the_following_explanation_data::-webkit-scrollbar-track,
#explanation_details::-webkit-scrollbar-track,
#multiple_explanation_details::-webkit-scrollbar-track,
#fill_explanation_details::-webkit-scrollbar-track,
#exhibits_question_details_exp::-webkit-scrollbar-track,
#exhibits_question_details_exp_exb::-webkit-scrollbar-track {
  background: transparent;
}

.athenaScenarioBody::-webkit-scrollbar-thumb,
.synario::-webkit-scrollbar-thumb,
.situationMain::-webkit-scrollbar-thumb,
.examQuestionBox > h1::-webkit-scrollbar-thumb,
.examQuestionBox .examQuestionWrite > h1::-webkit-scrollbar-thumb,
.examQuestionRead::-webkit-scrollbar-thumb,
.athenaExhibitQuestionStemBox::-webkit-scrollbar-thumb,
.explanationBody:not(:has(> div))::-webkit-scrollbar-thumb,
.explanationBody > div::-webkit-scrollbar-thumb,
.objective_explanation_data::-webkit-scrollbar-thumb,
.Multiple_Correct_correct_Exp::-webkit-scrollbar-thumb,
.Fill-in-the-Blank_correct_exp::-webkit-scrollbar-thumb,
.Exhibits_Question_Explanation::-webkit-scrollbar-thumb,
.tab_drag_drop_data_explanation_data::-webkit-scrollbar-thumb,
.checkbox_and_radio_table_explanation_data::-webkit-scrollbar-thumb,
.drop_down_in_between_explanation_data::-webkit-scrollbar-thumb,
.match_the_following_explanation_data::-webkit-scrollbar-thumb,
#explanation_details::-webkit-scrollbar-thumb,
#multiple_explanation_details::-webkit-scrollbar-thumb,
#fill_explanation_details::-webkit-scrollbar-thumb,
#exhibits_question_details_exp::-webkit-scrollbar-thumb,
#exhibits_question_details_exp_exb::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

body.darkMode .athenaScenarioBody,
body.darkMode .synario,
body.darkMode .situationMain,
body.darkMode .examQuestionBox > h1,
body.darkMode .examQuestionBox .examQuestionWrite > h1,
body.darkMode .examQuestionRead,
body.darkMode .athenaExhibitQuestionStemBox,
body.darkMode .explanationBody:not(:has(> div)),
body.darkMode .explanationBody > div,
body.darkMode .objective_explanation_data,
body.darkMode .Multiple_Correct_correct_Exp,
body.darkMode .Fill-in-the-Blank_correct_exp,
body.darkMode .Exhibits_Question_Explanation,
body.darkMode .tab_drag_drop_data_explanation_data,
body.darkMode .checkbox_and_radio_table_explanation_data,
body.darkMode .drop_down_in_between_explanation_data,
body.darkMode .match_the_following_explanation_data,
body.darkMode #explanation_details,
body.darkMode #multiple_explanation_details,
body.darkMode #fill_explanation_details,
body.darkMode #exhibits_question_details_exp,
body.darkMode #exhibits_question_details_exp_exb {
  scrollbar-color: #475569 transparent;
}

.athenaScenarioBody .katex-display,
.athenaScenarioBody math[display="block"],
.synario .katex-display,
.synario math[display="block"],
.situationMain .katex-display,
.situationMain math[display="block"],
.examQuestionBox > h1 .katex-display,
.examQuestionBox > h1 math[display="block"],
.examQuestionWrite > h1 .katex-display,
.examQuestionWrite > h1 math[display="block"],
.examQuestionRead .katex-display,
.examQuestionRead math[display="block"],
.athenaExhibitQuestionStemBox .katex-display,
.athenaExhibitQuestionStemBox math[display="block"],
.explanationBody .katex-display,
.explanationBody math[display="block"],
.explanationArea .katex-display,
.explanationArea math[display="block"] {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}

/* Hide raw TeX annotations and duplicate KaTeX visual spans inside pasted MathML so formulas never duplicate */
.explanationBody annotation,
.situationMain annotation,
.athenaScenarioBody annotation,
.examQuestionBox annotation,
.explanationBody .katex-mathml + .katex-html,
.situationMain .katex-mathml + .katex-html,
.athenaScenarioBody .katex-mathml + .katex-html,
.examQuestionBox .katex-mathml + .katex-html {
  display: none !important;
}

/* Paragraphs inside rich text areas */
.explanationBody p,
.situationMain p,
.athenaScenarioBody p,
.explanationArea p,
.Exhibits_Question_Explanation p,
.ExplanationDetailsArea p {
  margin: 0 0 12px 0;
  line-height: 1.65;
}
.explanationBody p:last-child,
.situationMain p:last-child,
.athenaScenarioBody p:last-child,
.explanationArea p:last-child,
.Exhibits_Question_Explanation p:last-child,
.ExplanationDetailsArea p:last-child {
  margin-bottom: 0;
}

/* Headings inside rich text areas (matching Summernote Style dropdown) */
.explanationBody h1,
.situationMain h1,
.athenaScenarioBody h1,
.explanationArea h1,
.Exhibits_Question_Explanation h1,
.ExplanationDetailsArea h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 18px 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.explanationBody > div h2,
.explanationBody blockquote h2,
.situationMain h2,
.athenaScenarioBody h2,
.explanationArea h2,
.Exhibits_Question_Explanation h2,
.ExplanationDetailsArea h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 16px 0 8px 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.explanationBody h3,
.situationMain h3,
.athenaScenarioBody h3,
.explanationArea h3,
.Exhibits_Question_Explanation h3,
.ExplanationDetailsArea h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 14px 0 6px 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.4 !important;
}

.explanationBody h4,
.situationMain h4,
.athenaScenarioBody h4,
.explanationArea h4,
.Exhibits_Question_Explanation h4,
.ExplanationDetailsArea h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 12px 0 6px 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.45 !important;
}

.explanationBody h5,
.explanationBody h6,
.situationMain h5,
.situationMain h6,
.athenaScenarioBody h5,
.athenaScenarioBody h6,
.explanationArea h5,
.explanationArea h6,
.Exhibits_Question_Explanation h5,
.Exhibits_Question_Explanation h6,
.ExplanationDetailsArea h5,
.ExplanationDetailsArea h6 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin: 10px 0 4px 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.45 !important;
}

/* Inline typography (bold, italic, underline, strikethrough, sub/sup, links, hr) */
.explanationBody strong,
.explanationBody b,
.situationMain strong,
.situationMain b,
.athenaScenarioBody strong,
.athenaScenarioBody b {
  font-weight: 700;
}

.explanationBody em,
.explanationBody i:not([class*="uil"]):not([class*="fa-"]),
.situationMain em,
.situationMain i:not([class*="uil"]):not([class*="fa-"]),
.athenaScenarioBody em,
.athenaScenarioBody i:not([class*="uil"]):not([class*="fa-"]) {
  font-style: italic;
}

.explanationBody u,
.situationMain u,
.athenaScenarioBody u {
  text-decoration: underline;
}

.explanationBody s,
.explanationBody strike,
.explanationBody del,
.situationMain s,
.situationMain strike,
.situationMain del,
.athenaScenarioBody s,
.athenaScenarioBody strike,
.athenaScenarioBody del {
  text-decoration: line-through;
}

.explanationBody sub,
.situationMain sub,
.athenaScenarioBody sub {
  vertical-align: sub;
  font-size: 75%;
  line-height: 0;
}

.explanationBody sup,
.situationMain sup,
.athenaScenarioBody sup {
  vertical-align: super;
  font-size: 75%;
  line-height: 0;
}

.explanationBody a,
.situationMain a,
.athenaScenarioBody a {
  color: #5434e2;
  text-decoration: underline;
  font-weight: 500;
}
.explanationBody a:hover,
.situationMain a:hover,
.athenaScenarioBody a:hover {
  color: #4324ca;
}

.explanationBody hr,
.situationMain hr,
.athenaScenarioBody hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 16px 0;
}

/* Images */
.explanationBody img,
.situationMain img,
.athenaScenarioBody img,
.explanationArea img,
.Exhibits_Question_Explanation img,
.ExhibitsArea img,
.ExplanationDetailsArea img,
.examQuestionBox img,
.new_gen_explanation img,
.scenarioText img,
.examInputArea img,
.objectiveTypeOption img,
.multipleTypeOption img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin: 6px 0;
}

.explanationBody img[style*="float: left"],
.explanationBody img.note-float-left,
.situationMain img[style*="float: left"],
.situationMain img.note-float-left,
.athenaScenarioBody img[style*="float: left"],
.explanationArea img[style*="float: left"],
.Exhibits_Question_Explanation img[style*="float: left"] {
  float: left !important;
  margin: 6px 18px 14px 0 !important;
}

.explanationBody img[style*="float: right"],
.explanationBody img.note-float-right,
.situationMain img[style*="float: right"],
.situationMain img.note-float-right,
.athenaScenarioBody img[style*="float: right"],
.explanationArea img[style*="float: right"],
.Exhibits_Question_Explanation img[style*="float: right"] {
  float: right !important;
  margin: 6px 0 14px 18px !important;
}

.explanationBody img[style*="float: none"],
.explanationBody img.note-float-none,
.situationMain img[style*="float: none"],
.situationMain img.note-float-none,
.athenaScenarioBody img[style*="float: none"],
.explanationArea img[style*="float: none"] {
  float: none !important;
  margin: 10px auto !important;
  display: block !important;
}

/* Lists (Unordered, Ordered, Nested) */
.explanationBody ul,
.situationMain ul,
.athenaScenarioBody ul,
.examQuestionBox > h1 ul,
.examQuestionWrite > h1 ul,
.examQuestionRead ul,
.athenaExhibitQuestionStemBox ul,
.explanationArea ul,
.Exhibits_Question_Explanation ul,
.ExplanationDetailsArea ul {
  list-style-type: disc !important;
  padding-left: 28px !important;
  margin: 8px 0 14px 0 !important;
}

.explanationBody ol,
.situationMain ol,
.athenaScenarioBody ol,
.examQuestionBox > h1 ol,
.examQuestionWrite > h1 ol,
.examQuestionRead ol,
.athenaExhibitQuestionStemBox ol,
.explanationArea ol,
.Exhibits_Question_Explanation ol,
.ExplanationDetailsArea ol {
  list-style-type: decimal !important;
  padding-left: 28px !important;
  margin: 8px 0 14px 0 !important;
}

.explanationBody li,
.situationMain li,
.athenaScenarioBody li,
.examQuestionBox > h1 li,
.examQuestionWrite > h1 li,
.examQuestionRead li,
.athenaExhibitQuestionStemBox li,
.explanationArea li,
.Exhibits_Question_Explanation li,
.ExplanationDetailsArea li {
  display: list-item !important;
  list-style: inherit !important;
  margin-bottom: 4px !important;
  line-height: 1.6 !important;
}

.explanationBody ul ul,
.explanationBody ol ul,
.situationMain ul ul,
.situationMain ol ul,
.athenaScenarioBody ul ul,
.athenaScenarioBody ol ul,
.examQuestionBox > h1 ul ul,
.examQuestionBox > h1 ol ul,
.athenaExhibitQuestionStemBox ul ul,
.athenaExhibitQuestionStemBox ol ul {
  list-style-type: circle !important;
  margin: 4px 0 !important;
}

.explanationBody ol ol,
.explanationBody ul ol,
.situationMain ol ol,
.situationMain ul ol,
.athenaScenarioBody ol ol,
.athenaScenarioBody ul ol,
.examQuestionBox > h1 ol ol,
.examQuestionBox > h1 ul ol,
.athenaExhibitQuestionStemBox ol ol,
.athenaExhibitQuestionStemBox ul ol {
  list-style-type: lower-alpha !important;
  margin: 4px 0 !important;
}

/* Blockquote (matching Admin Summernote Editor) */
.explanationBody blockquote,
.situationMain blockquote,
.athenaScenarioBody blockquote,
.examQuestionBox > h1 blockquote,
.examQuestionWrite > h1 blockquote,
.examQuestionRead blockquote,
.athenaExhibitQuestionStemBox blockquote,
.explanationArea blockquote,
.Exhibits_Question_Explanation blockquote,
.ExplanationDetailsArea blockquote {
  border: 1px solid #eef2f6 !important;
  border-left: 4px solid #5434e2 !important;
  background: #f8fafc !important;
  padding: 12px 18px !important;
  margin: 14px 0 !important;
  border-radius: 0 8px 8px 0 !important;
  color: #475569 !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Code & Pre (matching Admin Summernote Editor with contained horizontal scroll) */
.explanationBody code,
.situationMain code,
.athenaScenarioBody code,
.examQuestionBox > h1 code,
.examQuestionWrite > h1 code,
.examQuestionRead code,
.athenaExhibitQuestionStemBox code,
.explanationArea code,
.Exhibits_Question_Explanation code,
.ExplanationDetailsArea code {
  background: #f1f5f9 !important;
  color: #7c3aed !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  border: 1px solid #e2e8f0 !important;
}

.explanationBody pre,
.situationMain pre,
.athenaScenarioBody pre,
.examQuestionBox > h1 pre,
.examQuestionWrite > h1 pre,
.examQuestionRead pre,
.athenaExhibitQuestionStemBox pre,
.explanationArea pre,
.Exhibits_Question_Explanation pre,
.ExplanationDetailsArea pre,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain pre,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain pre {
  display: block !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
  margin: 14px 0 !important;
  font-size: 13px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: pre !important;
  flex-shrink: 0 !important;
}

.explanationBody pre *,
.situationMain pre *,
.athenaScenarioBody pre *,
.examQuestionBox > h1 pre *,
.examQuestionWrite > h1 pre *,
.examQuestionRead pre *,
.athenaExhibitQuestionStemBox pre *,
.explanationArea pre *,
.Exhibits_Question_Explanation pre *,
.ExplanationDetailsArea pre *,
.athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain pre *,
.athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain pre * {
  background: transparent !important;
  color: #f8fafc !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}

/* Tables (matching Admin Summernote Editor across Scenario, Exhibit, Question Stem & Explanation) */
.athenaRichTableScroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  margin: 14px 0 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.athenaRichTableScroll::-webkit-scrollbar {
  height: 6px;
}

.athenaRichTableScroll::-webkit-scrollbar-track {
  background: transparent;
}

.athenaRichTableScroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.athenaRichTableScroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.explanationBody table,
.situationMain table,
.athenaScenarioBody table,
.synario table,
.examQuestionBox > h1 table,
.examQuestionBox .examQuestionWrite > h1 table,
.examQuestionRead table,
.athenaExhibitQuestionStemBox table,
#objective_question table,
#multiple_question table,
#fill_in_blanks_question table,
#Drag_question table,
#Exhibits_Question_details table,
.tab_drag_drop_data_question table,
#checkbox_and_radio_table_question table,
.drop_down_question table,
.match_the_following_question table,
.explanationArea table,
.Exhibits_Question_Explanation table,
.ExplanationDetailsArea table,
.athenaRichTableScroll > table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  margin: 14px 0 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
}

.athenaRichTableScroll > table {
  max-width: none !important;
  min-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.explanationBody th,
.explanationBody td,
.situationMain th,
.situationMain td,
.athenaScenarioBody th,
.athenaScenarioBody td,
.synario th,
.synario td,
.examQuestionBox > h1 th,
.examQuestionBox > h1 td,
.examQuestionBox .examQuestionWrite > h1 th,
.examQuestionBox .examQuestionWrite > h1 td,
.examQuestionRead th,
.examQuestionRead td,
.athenaExhibitQuestionStemBox th,
.athenaExhibitQuestionStemBox td,
#objective_question th,
#objective_question td,
#multiple_question th,
#multiple_question td,
#fill_in_blanks_question th,
#fill_in_blanks_question td,
#Drag_question th,
#Drag_question td,
#Exhibits_Question_details th,
#Exhibits_Question_details td,
.tab_drag_drop_data_question th,
.tab_drag_drop_data_question td,
#checkbox_and_radio_table_question th,
#checkbox_and_radio_table_question td,
.drop_down_question th,
.drop_down_question td,
.match_the_following_question th,
.match_the_following_question td,
.explanationArea th,
.explanationArea td,
.Exhibits_Question_Explanation th,
.Exhibits_Question_Explanation td,
.ExplanationDetailsArea th,
.ExplanationDetailsArea td,
.athenaRichTableScroll > table th,
.athenaRichTableScroll > table td {
  border: 1px solid #cbd5e1 !important;
  padding: 10px 14px !important;
  vertical-align: top !important;
  text-align: left !important;
  font-size: inherit !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.athenaRichTableScroll > table th *,
.athenaRichTableScroll > table td *,
.explanationBody th *,
.explanationBody td *,
.situationMain th *,
.situationMain td *,
.athenaScenarioBody th *,
.athenaScenarioBody td *,
.examQuestionBox > h1 th *,
.examQuestionBox > h1 td *,
.athenaExhibitQuestionStemBox th *,
.athenaExhibitQuestionStemBox td * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  max-width: none !important;
}

.athenaRichTableScroll > table th.athenaRichCellLong,
.athenaRichTableScroll > table td.athenaRichCellLong {
  min-width: 210px !important;
}

.athenaRichTableScroll > table th a,
.athenaRichTableScroll > table td a {
  overflow-wrap: break-word !important;
}

.athenaRichTableScroll > table th img,
.athenaRichTableScroll > table td img {
  min-width: 72px;
  max-width: min(260px, 70vw) !important;
  height: auto !important;
}

.athenaRichTableScroll > table td,
.examQuestionBox > h1 td,
.examQuestionBox .examQuestionWrite > h1 td,
.athenaExhibitQuestionStemBox td {
  font-weight: 400 !important;
}

.athenaRichTableScroll > table td strong,
.athenaRichTableScroll > table td b,
.athenaRichTableScroll > table th strong,
.athenaRichTableScroll > table th b,
.examQuestionBox > h1 td strong,
.examQuestionBox > h1 td b,
.athenaExhibitQuestionStemBox td strong,
.athenaExhibitQuestionStemBox td b {
  font-weight: 700 !important;
  color: #0f172a !important;
}

.athenaRichTableScroll > table th p,
.athenaRichTableScroll > table td p,
.explanationBody th p,
.explanationBody td p,
.situationMain th p,
.situationMain td p,
.athenaScenarioBody th p,
.athenaScenarioBody td p,
.examQuestionBox > h1 th p,
.examQuestionBox > h1 td p,
.athenaExhibitQuestionStemBox th p,
.athenaExhibitQuestionStemBox td p {
  margin: 0 0 6px 0 !important;
  font-size: inherit !important;
  line-height: 1.45 !important;
}

.athenaRichTableScroll > table th p:last-child,
.athenaRichTableScroll > table td p:last-child,
.explanationBody th p:last-child,
.explanationBody td p:last-child,
.situationMain th p:last-child,
.situationMain td p:last-child,
.athenaScenarioBody th p:last-child,
.athenaScenarioBody td p:last-child,
.examQuestionBox > h1 th p:last-child,
.examQuestionBox > h1 td p:last-child,
.athenaExhibitQuestionStemBox th p:last-child,
.athenaExhibitQuestionStemBox td p:last-child {
  margin-bottom: 0 !important;
}

.athenaRichTableScroll > table tr > th:first-child,
.athenaRichTableScroll > table tr > td:first-child {
  border-left: 0 !important;
}

.athenaRichTableScroll > table tr > th:last-child,
.athenaRichTableScroll > table tr > td:last-child {
  border-right: 0 !important;
}

.athenaRichTableScroll > table > thead:first-child > tr:first-child > th,
.athenaRichTableScroll > table > thead:first-child > tr:first-child > td,
.athenaRichTableScroll > table > tbody:first-child > tr:first-child > th,
.athenaRichTableScroll > table > tbody:first-child > tr:first-child > td,
.athenaRichTableScroll > table > tr:first-child > th,
.athenaRichTableScroll > table > tr:first-child > td {
  border-top: 0 !important;
}

.athenaRichTableScroll > table > tbody:last-child > tr:last-child > th,
.athenaRichTableScroll > table > tbody:last-child > tr:last-child > td,
.athenaRichTableScroll > table > tfoot:last-child > tr:last-child > th,
.athenaRichTableScroll > table > tfoot:last-child > tr:last-child > td,
.athenaRichTableScroll > table > tr:last-child > th,
.athenaRichTableScroll > table > tr:last-child > td {
  border-bottom: 0 !important;
}

.explanationBody th,
.situationMain th,
.athenaScenarioBody th,
.synario th,
.examQuestionBox > h1 th,
.examQuestionBox .examQuestionWrite > h1 th,
.examQuestionRead th,
.athenaExhibitQuestionStemBox th,
.explanationArea th,
.Exhibits_Question_Explanation th,
.ExplanationDetailsArea th,
.athenaRichTableScroll > table th,
.athenaRichTableScroll > table thead td {
  background: #f8fafc !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.explanationBody tr:nth-child(even),
.situationMain tr:nth-child(even),
.athenaScenarioBody tr:nth-child(even),
.synario tr:nth-child(even),
.examQuestionBox > h1 tr:nth-child(even),
.examQuestionBox .examQuestionWrite > h1 tr:nth-child(even),
.examQuestionRead tr:nth-child(even),
.athenaExhibitQuestionStemBox tr:nth-child(even),
.explanationArea tr:nth-child(even),
.Exhibits_Question_Explanation tr:nth-child(even),
.ExplanationDetailsArea tr:nth-child(even),
.athenaRichTableScroll > table tbody tr:nth-child(even) {
  background: #fcfcfd !important;
}

body.darkMode .athenaRichTableScroll {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.darkMode .athenaRichTableScroll > table {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

body.darkMode .athenaRichTableScroll > table th,
body.darkMode .athenaRichTableScroll > table thead td {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.darkMode .athenaRichTableScroll > table td {
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

body.darkMode .athenaRichTableScroll > table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.45) !important;
}

@media (max-width: 640px) {
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain {
    padding: 14px 14px !important;
    max-height: min(46vh, 340px) !important;
  }

  .athenaExamRunnerPage .athenaExhibitQuestionStemBox,
  .athenaReviewPage .athenaExhibitQuestionStemBox {
    padding: 12px 14px;
    max-height: min(44vh, 320px);
  }

  .explanationBody blockquote,
  .situationMain blockquote,
  .athenaScenarioBody blockquote,
  .examQuestionBox > h1 blockquote,
  .examQuestionWrite > h1 blockquote,
  .examQuestionRead blockquote,
  .athenaExhibitQuestionStemBox blockquote,
  .explanationArea blockquote,
  .Exhibits_Question_Explanation blockquote,
  .ExplanationDetailsArea blockquote {
    padding: 10px 12px !important;
    margin: 10px 0 !important;
  }

  .athenaRichTableScroll {
    margin: 10px 0 !important;
  }

  .explanationBody table,
  .situationMain table,
  .athenaScenarioBody table,
  .synario table,
  .examQuestionBox > h1 table,
  .examQuestionBox .examQuestionWrite > h1 table,
  .examQuestionRead table,
  .athenaExhibitQuestionStemBox table,
  .explanationArea table,
  .Exhibits_Question_Explanation table,
  .ExplanationDetailsArea table,
  .athenaRichTableScroll > table {
    font-size: 13px !important;
  }

  .explanationBody th,
  .explanationBody td,
  .situationMain th,
  .situationMain td,
  .athenaScenarioBody th,
  .athenaScenarioBody td,
  .synario th,
  .synario td,
  .examQuestionBox > h1 th,
  .examQuestionBox > h1 td,
  .examQuestionBox .examQuestionWrite > h1 th,
  .examQuestionBox .examQuestionWrite > h1 td,
  .examQuestionRead th,
  .examQuestionRead td,
  .athenaExhibitQuestionStemBox th,
  .athenaExhibitQuestionStemBox td,
  .explanationArea th,
  .explanationArea td,
  .Exhibits_Question_Explanation th,
  .Exhibits_Question_Explanation td,
  .ExplanationDetailsArea th,
  .ExplanationDetailsArea td,
  .athenaRichTableScroll > table th,
  .athenaRichTableScroll > table td {
    padding: 8px 10px !important;
  }

  .athenaRichTableScroll > table th.athenaRichCellLong,
  .athenaRichTableScroll > table td.athenaRichCellLong {
    min-width: 180px !important;
  }
}

/* Clearfix for floated images inside rich text */
.explanationBody::after,
.explanationBody > div::after,
.situationMain::after,
.athenaScenarioBody::after,
.synario::after,
.examQuestionBox > h1::after,
.examQuestionWrite > h1::after,
.examQuestionRead::after,
.athenaExhibitQuestionStemBox::after,
.explanationArea::after,
.Exhibits_Question_Explanation::after,
.ExplanationDetailsArea::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   Responsive Rich-Text Media (Images & Videos from Summernote)
   Applies across Exhibit, Question Stem, Clinical Scenario & Explanation
   on Exam Attend, Exam Resume, and Exam Review pages
   ========================================================================== */

/* 1. Prevent horizontal clipping/overflow on all 4 rich-text containers */
.situation,
.situationMain,
.synario,
.athenaScenarioBody,
.examQuestionBox,
.examQuestionRead,
.athenaExhibitQuestionStemBox,
#objective_question,
#multiple_question,
#fill_in_blanks_question,
#Exhibits_Question_details,
.tab_drag_drop_data_question,
.checkbox_and_radio_table_question,
.drop_down_in_between_question_data,
.match_the_following_question_data,
.explanation,
.explanationBody,
.explanationArea,
.objective_explanation_data,
.Multiple_Correct_correct_Exp,
.Fill-in-the-Blank_correct_exp,
.Exhibits_Question_Explanation,
.tab_drag_drop_data_explanation_data,
.checkbox_and_radio_table_explanation_data,
.drop_down_in_between_explanation_data,
.match_the_following_explanation_data,
#explanation_details,
#multiple_explanation_details,
#fill_explanation_details,
#exhibits_question_details_exp,
#exhibits_question_details_exp_exb {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 2. Responsive Videos (Summernote .note-video-clip, iframe, video, embed, object) */
.situationMain iframe,
.situationMain video,
.situationMain embed,
.situationMain object,
.situationMain .note-video-clip,
.athenaScenarioBody iframe,
.athenaScenarioBody video,
.athenaScenarioBody embed,
.athenaScenarioBody object,
.athenaScenarioBody .note-video-clip,
.synario iframe,
.synario video,
.synario .note-video-clip,
.examQuestionBox iframe,
.examQuestionBox video,
.examQuestionBox embed,
.examQuestionBox object,
.examQuestionBox .note-video-clip,
.examQuestionRead iframe,
.examQuestionRead video,
.examQuestionRead .note-video-clip,
.athenaExhibitQuestionStemBox iframe,
.athenaExhibitQuestionStemBox video,
.athenaExhibitQuestionStemBox .note-video-clip,
.explanationBody iframe,
.explanationBody video,
.explanationBody embed,
.explanationBody object,
.explanationBody .note-video-clip,
.explanationArea iframe,
.explanationArea video,
.explanationArea .note-video-clip,
.Exhibits_Question_Explanation iframe,
.Exhibits_Question_Explanation video,
.Exhibits_Question_Explanation .note-video-clip,
.ExplanationDetailsArea iframe,
.ExplanationDetailsArea video,
.ExplanationDetailsArea .note-video-clip {
  display: block !important;
  width: 100% !important;
  max-width: min(100%, 480px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
  border-radius: 12px !important;
  margin: 8px auto !important;
  box-sizing: border-box !important;
  background: #0f172a;
}

.athenaRichVideoWrap {
  display: block;
  position: relative;
  width: 100%;
  max-width: min(100%, 480px);
  margin: 8px auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
  background: #0f172a;
  box-sizing: border-box;
}

.situationMain .athenaRichVideoWrap {
  max-width: min(100%, 460px);
  margin: 6px auto;
}

.athenaMobileYtTapZone,
.athenaMobileYtBar,
.athenaVideoInlineFsBtn,
.athenaVideoFsControls {
  display: none !important;
}

@media (max-width: 768px) {
  .athenaRichVideoWrap {
    position: relative;
  }
}

.athenaRichVideoWrap > iframe:not(:fullscreen):not(:-webkit-full-screen):not(.is-athena-fs-media),
.athenaRichVideoWrap > video:not(:fullscreen):not(:-webkit-full-screen):not(.is-athena-fs-media),
.athenaRichVideoWrap > .note-video-clip:not(:fullscreen):not(:-webkit-full-screen):not(.is-athena-fs-media) {
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: 100% !important;
}

/* 3. Responsive Images across all 4 sections (centered, reduced desktop size, clean aspect fit) */
.athenaScenarioBody img,
.synario img,
.examQuestionBox h1 img,
.examQuestionRead img,
.athenaExhibitQuestionStemBox img,
#objective_question img,
#multiple_question img,
#fill_in_blanks_question img,
#Exhibits_Question_details img,
.tab_drag_drop_data_question img,
.checkbox_and_radio_table_question img,
.drop_down_in_between_question_data img,
.match_the_following_question_data img,
.explanationBody img,
.explanationArea img,
.objective_explanation_data img,
.Multiple_Correct_correct_Exp img,
.Fill-in-the-Blank_correct_exp img,
.Exhibits_Question_Explanation img,
.tab_drag_drop_data_explanation_data img,
.checkbox_and_radio_table_explanation_data img,
.drop_down_in_between_explanation_data img,
.match_the_following_explanation_data img,
#explanation_details img,
#multiple_explanation_details img,
#fill_explanation_details img,
#exhibits_question_details_exp img,
#exhibits_question_details_exp_exb img {
  display: block !important;
  max-width: min(100%, 440px) !important;
  max-height: 260px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 8px auto !important;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
  box-sizing: border-box !important;
}

/* Exhibit Card Images: centered, compact on desktop so full image fits without vertical cutoff */
.situationMain img {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 420px) !important;
  max-height: 250px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 6px auto !important;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
  box-sizing: border-box !important;
}

/* 4. Clamp any Summernote wrapper elements with inline fixed pixel widths */
.situationMain div,
.situationMain p,
.situationMain figure,
.athenaScenarioBody div,
.athenaScenarioBody p,
.athenaScenarioBody figure,
.examQuestionBox h1 div,
.examQuestionBox h1 p,
.examQuestionBox h1 figure,
.athenaExhibitQuestionStemBox div,
.athenaExhibitQuestionStemBox p,
.explanationBody div,
.explanationBody p,
.explanationBody figure,
.explanationArea div,
.explanationArea p,
.explanationArea figure {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 5. Smaller Screens (Tablet & Mobile): compact Exhibit UI, centered clean media & no clipping */
@media (max-width: 768px) {
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation.athenaClinicalExhibitCard,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation.athenaClinicalExhibitCard {
    margin: 10px 0 14px 0 !important;
    border-radius: 12px !important;
  }

  .athenaExamRunnerPage .athenaExhibitCardHeader,
  .athenaReviewPage .athenaExhibitCardHeader {
    padding: 9px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  .athenaExamRunnerPage .athenaExhibitCardTitleGroup,
  .athenaReviewPage .athenaExhibitCardTitleGroup {
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .athenaExamRunnerPage .athenaExhibitCardIcon,
  .athenaReviewPage .athenaExhibitCardIcon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
  }

  .athenaExamRunnerPage .athenaExhibitCardTitles h2,
  .athenaReviewPage .athenaExhibitCardTitles h2 {
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .athenaExamRunnerPage .athenaExhibitCardTitles span,
  .athenaReviewPage .athenaExhibitCardTitles span {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation {
    padding: 5px 10px !important;
    border-radius: 7px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation i,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation span,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation i,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation span {
    font-size: 11.5px !important;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain {
    padding: 12px !important;
    max-height: min(44vh, 300px) !important;
  }

  .situationMain iframe:not(.is-athena-fs-media),
  .situationMain video:not(.is-athena-fs-media),
  .situationMain .note-video-clip:not(.is-athena-fs-media),
  .athenaScenarioBody iframe:not(.is-athena-fs-media),
  .athenaScenarioBody video:not(.is-athena-fs-media),
  .athenaScenarioBody .note-video-clip:not(.is-athena-fs-media),
  .synario iframe:not(.is-athena-fs-media),
  .synario video:not(.is-athena-fs-media),
  .synario .note-video-clip:not(.is-athena-fs-media),
  .examQuestionBox iframe:not(.is-athena-fs-media),
  .examQuestionBox video:not(.is-athena-fs-media),
  .examQuestionBox .note-video-clip:not(.is-athena-fs-media),
  .examQuestionRead iframe:not(.is-athena-fs-media),
  .examQuestionRead video:not(.is-athena-fs-media),
  .examQuestionRead .note-video-clip:not(.is-athena-fs-media),
  .athenaExhibitQuestionStemBox iframe:not(.is-athena-fs-media),
  .athenaExhibitQuestionStemBox video:not(.is-athena-fs-media),
  .athenaExhibitQuestionStemBox .note-video-clip:not(.is-athena-fs-media),
  .explanationBody iframe:not(.is-athena-fs-media),
  .explanationBody video:not(.is-athena-fs-media),
  .explanationBody .note-video-clip:not(.is-athena-fs-media),
  .explanationArea iframe:not(.is-athena-fs-media),
  .explanationArea video:not(.is-athena-fs-media),
  .explanationArea .note-video-clip:not(.is-athena-fs-media),
  .Exhibits_Question_Explanation iframe:not(.is-athena-fs-media),
  .Exhibits_Question_Explanation video:not(.is-athena-fs-media),
  .Exhibits_Question_Explanation .note-video-clip:not(.is-athena-fs-media),
  .ExplanationDetailsArea iframe:not(.is-athena-fs-media),
  .ExplanationDetailsArea video:not(.is-athena-fs-media),
  .ExplanationDetailsArea .note-video-clip:not(.is-athena-fs-media) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 6px 0 !important;
    border-radius: 10px !important;
  }

  .athenaRichVideoWrap:not(.is-athena-landscape-fs),
  .situationMain .athenaRichVideoWrap:not(.is-athena-landscape-fs) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
    border-radius: 10px !important;
  }

  .athenaRichVideoWrap:not(.is-athena-landscape-fs) > iframe:not(:fullscreen):not(:-webkit-full-screen):not(.is-athena-fs-media),
  .athenaRichVideoWrap:not(.is-athena-landscape-fs) > video:not(:fullscreen):not(:-webkit-full-screen):not(.is-athena-fs-media),
  .athenaRichVideoWrap:not(.is-athena-landscape-fs) > .note-video-clip:not(:fullscreen):not(:-webkit-full-screen):not(.is-athena-fs-media) {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Mobile YouTube same-origin touch bridge: ensures click/tap to Play, Pause, Mute & Fullscreen
     always works reliably in Chrome DevTools mobile emulation & real mobile browsers */
  .athenaRichVideoWrap.is-youtube-wrap:not(.is-athena-landscape-fs) > .athenaMobileYtTapZone {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 4 !important;
    background: transparent !important;
    cursor: pointer !important;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .athenaRichVideoWrap.is-youtube-wrap:not(.is-athena-landscape-fs) > .athenaMobileYtBar {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    z-index: 6 !important;
    padding: 3px 6px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.84) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  }

  .athenaMobileYtBar .athenaMobileYtCtrlBtn {
    appearance: none;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none !important;
  }

  .athenaMobileYtBar .athenaMobileYtCtrlBtn:hover,
  .athenaMobileYtBar .athenaMobileYtCtrlBtn:active {
    background: rgba(255, 255, 255, 0.2) !important;
  }

  .athenaMobileYtBar .athenaMobileYtCtrlBtn i {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .athenaRichVideoWrap:not(.is-youtube-wrap):not(.is-athena-landscape-fs) > .athenaVideoInlineFsBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(15, 23, 42, 0.78) !important;
    color: #ffffff !important;
    z-index: 6 !important;
    cursor: pointer;
  }

  .athenaRichVideoWrap:not(.is-youtube-wrap):not(.is-athena-landscape-fs) > .athenaVideoInlineFsBtn i {
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox > h1,
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .examQuestionWrite > h1,
  .examQuestionRead,
  .athenaExamRunnerPage .athenaExhibitQuestionStemBox,
  .athenaReviewPage .athenaExhibitQuestionStemBox {
    max-height: min(46vh, 340px);
    padding-right: 2px;
  }

  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody:has(> div),
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody:has(> div) {
    max-height: none !important;
  }

  .explanationBody:not(:has(> div)),
  .explanationBody > div,
  .objective_explanation_data,
  .Multiple_Correct_correct_Exp,
  .Fill-in-the-Blank_correct_exp,
  .Exhibits_Question_Explanation,
  .tab_drag_drop_data_explanation_data,
  .checkbox_and_radio_table_explanation_data,
  .drop_down_in_between_explanation_data,
  .match_the_following_explanation_data,
  #explanation_details,
  #multiple_explanation_details,
  #fill_explanation_details,
  #exhibits_question_details_exp,
  #exhibits_question_details_exp_exb {
    max-height: min(60vh, 450px);
    font-size: 14px;
    line-height: 1.6;
    padding-right: 2px;
    padding-bottom: 10px;
  }

  .explanationBody pre,
  .situationMain pre,
  .athenaScenarioBody pre,
  .synario pre,
  .examQuestionBox > h1 pre,
  .examQuestionWrite > h1 pre,
  .examQuestionRead pre,
  .athenaExhibitQuestionStemBox pre,
  .explanationArea pre,
  .Exhibits_Question_Explanation pre,
  .ExplanationDetailsArea pre,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain pre,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain pre {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 14px !important;
    margin: 10px 0 !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }

  .explanationBody pre *,
  .situationMain pre *,
  .athenaScenarioBody pre *,
  .synario pre *,
  .examQuestionBox > h1 pre *,
  .examQuestionWrite > h1 pre *,
  .examQuestionRead pre *,
  .athenaExhibitQuestionStemBox pre *,
  .explanationArea pre *,
  .Exhibits_Question_Explanation pre *,
  .ExplanationDetailsArea pre *,
  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain pre *,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain pre * {
    white-space: inherit !important;
    overflow-wrap: inherit !important;
    word-break: inherit !important;
  }

  .situationMain ul,
  .situationMain ol,
  .athenaScenarioBody ul,
  .athenaScenarioBody ol,
  .examQuestionBox > h1 ul,
  .examQuestionBox > h1 ol,
  .examQuestionWrite > h1 ul,
  .examQuestionWrite > h1 ol,
  .examQuestionRead ul,
  .examQuestionRead ol,
  .athenaExhibitQuestionStemBox ul,
  .athenaExhibitQuestionStemBox ol,
  .explanationBody ul,
  .explanationBody ol,
  .explanationArea ul,
  .explanationArea ol,
  .Exhibits_Question_Explanation ul,
  .Exhibits_Question_Explanation ol,
  .ExplanationDetailsArea ul,
  .ExplanationDetailsArea ol {
    padding-left: 18px !important;
    margin: 6px 0 10px 0 !important;
  }

  .situationMain blockquote,
  .athenaScenarioBody blockquote,
  .examQuestionBox > h1 blockquote,
  .examQuestionWrite > h1 blockquote,
  .examQuestionRead blockquote,
  .athenaExhibitQuestionStemBox blockquote,
  .explanationBody blockquote,
  .explanationArea blockquote,
  .Exhibits_Question_Explanation blockquote,
  .ExplanationDetailsArea blockquote {
    padding: 10px 12px !important;
    margin: 8px 0 !important;
    border-left-width: 3px !important;
  }

  .situationMain img,
  .situationMain img[style*="float"],
  .situationMain img.note-float-left,
  .situationMain img.note-float-right {
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 220px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 6px 0 !important;
    padding: 6px;
    border-radius: 9px;
    box-sizing: border-box !important;
  }

  .athenaScenarioBody img:not(.athenaScrollableWideImg),
  .athenaScenarioBody img[style*="float"]:not(.athenaScrollableWideImg),
  .synario img:not(.athenaScrollableWideImg),
  .examQuestionBox h1 img:not(.athenaScrollableWideImg),
  .examQuestionRead img:not(.athenaScrollableWideImg),
  .athenaExhibitQuestionStemBox img:not(.athenaScrollableWideImg),
  #objective_question img:not(.athenaScrollableWideImg),
  #multiple_question img:not(.athenaScrollableWideImg),
  #fill_in_blanks_question img:not(.athenaScrollableWideImg),
  #Drag_question img:not(.athenaScrollableWideImg),
  #Exhibits_Question_details img:not(.athenaScrollableWideImg),
  .tab_drag_drop_data_question img:not(.athenaScrollableWideImg),
  #checkbox_and_radio_table_question img:not(.athenaScrollableWideImg),
  .checkbox_and_radio_table_question img:not(.athenaScrollableWideImg),
  .drop_down_question img:not(.athenaScrollableWideImg),
  .drop_down_in_between_question_data img:not(.athenaScrollableWideImg),
  .match_the_following_question img:not(.athenaScrollableWideImg),
  .match_the_following_question_data img:not(.athenaScrollableWideImg),
  #object_question img:not(.athenaScrollableWideImg),
  #exhibits_question_question img:not(.athenaScrollableWideImg),
  .explanationBody img:not(.athenaScrollableWideImg),
  .explanationBody img[style*="float"]:not(.athenaScrollableWideImg),
  .explanationBody img.note-float-left:not(.athenaScrollableWideImg),
  .explanationBody img.note-float-right:not(.athenaScrollableWideImg),
  .explanationArea img:not(.athenaScrollableWideImg),
  .explanationArea img[style*="float"]:not(.athenaScrollableWideImg),
  .Exhibits_Question_Explanation img:not(.athenaScrollableWideImg),
  .Exhibits_Question_Explanation img[style*="float"]:not(.athenaScrollableWideImg),
  .ExplanationDetailsArea img:not(.athenaScrollableWideImg) {
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 10px 0 !important;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    box-sizing: border-box !important;
  }

  /* Wide images scale cleanly to 100% width in mobile view */
  .athenaScenarioBody img.athenaScrollableWideImg,
  .synario img.athenaScrollableWideImg,
  .examQuestionBox h1 img.athenaScrollableWideImg,
  .examQuestionRead img.athenaScrollableWideImg,
  .athenaExhibitQuestionStemBox img.athenaScrollableWideImg,
  #objective_question img.athenaScrollableWideImg,
  #multiple_question img.athenaScrollableWideImg,
  #fill_in_blanks_question img.athenaScrollableWideImg,
  #Drag_question img.athenaScrollableWideImg,
  #Exhibits_Question_details img.athenaScrollableWideImg,
  .tab_drag_drop_data_question img.athenaScrollableWideImg,
  #checkbox_and_radio_table_question img.athenaScrollableWideImg,
  .checkbox_and_radio_table_question img.athenaScrollableWideImg,
  .drop_down_question img.athenaScrollableWideImg,
  .drop_down_in_between_question_data img.athenaScrollableWideImg,
  .match_the_following_question img.athenaScrollableWideImg,
  .match_the_following_question_data img.athenaScrollableWideImg,
  #object_question img.athenaScrollableWideImg,
  #exhibits_question_question img.athenaScrollableWideImg,
  .explanationBody img.athenaScrollableWideImg,
  .explanationArea img.athenaScrollableWideImg,
  .Exhibits_Question_Explanation img.athenaScrollableWideImg,
  .ExplanationDetailsArea img.athenaScrollableWideImg,
  #explanation_details img.athenaScrollableWideImg,
  #multiple_explanation_details img.athenaScrollableWideImg,
  #fill_explanation_details img.athenaScrollableWideImg,
  #exhibits_question_details_exp img.athenaScrollableWideImg,
  #exhibits_question_details_exp_exb img.athenaScrollableWideImg {
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .athenaExamRunnerPage .athenaExhibitCardHeader,
  .athenaReviewPage .athenaExhibitCardHeader {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .athenaExamRunnerPage .athenaExhibitCardIcon,
  .athenaReviewPage .athenaExhibitCardIcon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  .athenaExamRunnerPage .athenaExhibitCardTitles h2,
  .athenaReviewPage .athenaExhibitCardTitles h2 {
    font-size: 12.5px !important;
  }

  .athenaExamRunnerPage .athenaExhibitCardTitles span,
  .athenaReviewPage .athenaExhibitCardTitles span {
    font-size: 10px !important;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .closeSituation {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  .athenaExamRunnerPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain,
  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .situation .situationMain {
    padding: 10px !important;
    max-height: min(42vh, 260px) !important;
  }

  .situationMain img,
  .situationMain img[style*="float"],
  .situationMain img.note-float-left,
  .situationMain img.note-float-right {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 200px !important;
    padding: 5px;
  }

  .athenaScenarioBody img:not(.athenaScrollableWideImg),
  .synario img:not(.athenaScrollableWideImg),
  .examQuestionBox h1 img:not(.athenaScrollableWideImg),
  .examQuestionRead img:not(.athenaScrollableWideImg),
  .athenaExhibitQuestionStemBox img:not(.athenaScrollableWideImg),
  #objective_question img:not(.athenaScrollableWideImg),
  #multiple_question img:not(.athenaScrollableWideImg),
  #fill_in_blanks_question img:not(.athenaScrollableWideImg),
  #Drag_question img:not(.athenaScrollableWideImg),
  #Exhibits_Question_details img:not(.athenaScrollableWideImg),
  .explanationBody img:not(.athenaScrollableWideImg),
  .explanationArea img:not(.athenaScrollableWideImg),
  .Exhibits_Question_Explanation img:not(.athenaScrollableWideImg),
  .ExplanationDetailsArea img:not(.athenaScrollableWideImg) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: 5px;
  }

  .athenaReviewPage .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody,
  .canvas .canvasMain .examCanvas .examCanvasBody .examQuestionBox .explanation .explanationBody {
    padding: 12px 12px !important;
  }

  .situationMain ul,
  .situationMain ol,
  .athenaScenarioBody ul,
  .athenaScenarioBody ol,
  .examQuestionBox > h1 ul,
  .examQuestionBox > h1 ol,
  .athenaExhibitQuestionStemBox ul,
  .athenaExhibitQuestionStemBox ol,
  .explanationBody ul,
  .explanationBody ol {
    padding-left: 16px !important;
  }
}

/* ==========================================================================
   6. Fullscreen Support for Embedded YouTube & HTML5 Videos (Desktop & Mobile)
   Placed after all @media rules so fullscreen dimensions always win over
   inline 16:9 card rules and never get clipped by ancestor scrollboxes
   ========================================================================== */
body.has-athena-video-fs .dicarmelWatermark,
body.has-athena-video-fs .examQuestionBox::before {
  display: none !important;
}

html.has-athena-mobile-video-fs,
body.has-athena-mobile-video-fs {
  overflow: hidden !important;
  max-width: 100vw !important;
  background: #000000 !important;
  background-color: #000000 !important;
  overscroll-behavior: none !important;
  touch-action: none;
}

body.has-athena-mobile-video-fs nav,
body.has-athena-mobile-video-fs .sidemenu,
body.has-athena-mobile-video-fs .mobileSidemenu,
body.has-athena-mobile-video-fs .mobileFixedMenu,
body.has-athena-mobile-video-fs .breadCrumbs,
body.has-athena-mobile-video-fs .athenaRunnerTopBar,
body.has-athena-mobile-video-fs .athenaReviewTopBar,
body.has-athena-mobile-video-fs .athenaRunnerBottomBar,
body.has-athena-mobile-video-fs .athenaReviewBottomNav {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs,
body.has-athena-mobile-video-fs .situationMain .athenaRichVideoWrap.is-athena-landscape-fs {
  position: fixed !important;
  inset: 0 !important;
  top: var(--athena-fs-top, 0px) !important;
  left: var(--athena-fs-left, 0px) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--athena-fs-vw, 100vw) !important;
  height: var(--athena-fs-vh, 100vh) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000000 !important;
  z-index: 2147483646 !important;
  overflow: hidden !important;
  display: block !important;
}

@supports (height: 100dvh) {
  body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs,
  body.has-athena-mobile-video-fs .situationMain .athenaRichVideoWrap.is-athena-landscape-fs {
    height: var(--athena-fs-vh, 100dvh) !important;
  }
}

/* Upright mobile fullscreen fit (landscape screen or manual Rotate toggle) */
body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs > iframe,
body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs > video,
body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs > .note-video-clip {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  object-fit: contain !important;
  background: #000000 !important;
}

body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs > .athenaMobileYtBar,
body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs > .athenaVideoInlineFsBtn {
  display: none !important;
}

body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-youtube-wrap.is-athena-landscape-fs > .athenaMobileYtTapZone {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483646 !important;
  background: transparent !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

body.has-athena-mobile-video-fs .athenaRichVideoWrap:not(.is-youtube-wrap).is-athena-landscape-fs > .athenaVideoFsControls .athenaMobileYtPlayBtn,
body.has-athena-mobile-video-fs .athenaRichVideoWrap:not(.is-youtube-wrap).is-athena-landscape-fs > .athenaVideoFsControls .athenaMobileYtMuteBtn {
  display: none !important;
}

body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs > .athenaVideoFsControls {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2147483647 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.has-athena-mobile-video-fs .athenaRichVideoWrap.is-athena-landscape-fs:not(.is-rotated-landscape) > .athenaVideoFsControls {
  left: auto !important;
  right: 14px !important;
  transform: none !important;
}

.athenaVideoFsControls .athenaVideoFsBtn {
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}

.athenaVideoFsControls .athenaVideoFsBtn:hover,
.athenaVideoFsControls .athenaVideoFsBtn:active {
  background: rgba(255, 255, 255, 0.18) !important;
}

.athenaVideoFsControls .athenaVideoFsBtn i,
.athenaVideoFsControls .athenaVideoFsBtn span {
  color: #ffffff !important;
  font-size: 12px !important;
}

.athenaVideoFsControls .athenaVideoFsBtn i {
  font-size: 14px !important;
}

iframe:fullscreen,
iframe:-webkit-full-screen,
video:fullscreen,
video:-webkit-full-screen,
.note-video-clip:fullscreen,
.note-video-clip:-webkit-full-screen,
.situationMain iframe:fullscreen,
.situationMain iframe:-webkit-full-screen,
.situationMain video:fullscreen,
.situationMain video:-webkit-full-screen,
.situationMain .note-video-clip:fullscreen,
.situationMain .note-video-clip:-webkit-full-screen,
.athenaScenarioBody iframe:fullscreen,
.athenaScenarioBody iframe:-webkit-full-screen,
.athenaScenarioBody video:fullscreen,
.athenaScenarioBody video:-webkit-full-screen,
.athenaScenarioBody .note-video-clip:fullscreen,
.athenaScenarioBody .note-video-clip:-webkit-full-screen,
.examQuestionBox iframe:fullscreen,
.examQuestionBox iframe:-webkit-full-screen,
.examQuestionBox video:fullscreen,
.examQuestionBox video:-webkit-full-screen,
.examQuestionBox .note-video-clip:fullscreen,
.examQuestionBox .note-video-clip:-webkit-full-screen,
.explanationBody iframe:fullscreen,
.explanationBody iframe:-webkit-full-screen,
.explanationBody video:fullscreen,
.explanationBody video:-webkit-full-screen,
.explanationBody .note-video-clip:fullscreen,
.explanationBody .note-video-clip:-webkit-full-screen,
.explanationArea iframe:fullscreen,
.explanationArea iframe:-webkit-full-screen,
.explanationArea video:fullscreen,
.explanationArea video:-webkit-full-screen,
.explanationArea .note-video-clip:fullscreen,
.explanationArea .note-video-clip:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  object-fit: contain !important;
  background: #000000 !important;
  z-index: 2147483647 !important;
}

/* Keep the question navigator usable on narrow and short mobile screens. */
@media screen and (max-width: 600px) {
  .navigation.athenaRunnerNavModal {
    box-sizing: border-box;
    width: calc(100vw - 16px);
    max-width: 760px;
    max-height: calc(100vh - 16px);
    border-radius: 12px;
  }

  .navigation.athenaRunnerNavModal .navigationHead {
    box-sizing: border-box;
    gap: 8px;
    padding: 12px;
  }

  .navigation.athenaRunnerNavModal .navigationHeadTitleWrap {
    min-width: 0;
  }

  .navigation.athenaRunnerNavModal .navigationHeadTitleWrap h1 {
    font-size: clamp(16px, 4.8vw, 19px);
    line-height: 1.2;
    gap: 6px;
  }

  .navigation.athenaRunnerNavModal .navigationHeadTitleWrap p {
    font-size: 11.5px;
    line-height: 1.35;
  }

  .navigation.athenaRunnerNavModal .navigationCloseIcon {
    width: 32px;
    height: 32px;
  }

  .navigation.athenaRunnerNavModal .athenaNavLegendBar {
    box-sizing: border-box;
    padding: 8px 12px;
    gap: 6px 12px;
  }

  .navigation.athenaRunnerNavModal .athenaNavLegendBar .legendItem {
    font-size: 11.5px;
  }

  .navigation.athenaRunnerNavModal .navigationBody {
    box-sizing: border-box;
    min-height: 0;
    max-height: calc(100vh - 370px);
    padding: 10px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .navigation.athenaRunnerNavModal .navigationBody .navigationTitle,
  .navigation.athenaRunnerNavModal .runnerNavJumpItem {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
  }

  .navigation.athenaRunnerNavModal .navigationBody .navigationTitle {
    padding: 9px 10px !important;
  }

  .navigation.athenaRunnerNavModal .navigationBody .navigationTitle .navigationTitleBox,
  .navigation.athenaRunnerNavModal .runnerNavJumpItem .navigationContentBox {
    min-width: 0;
    width: auto;
    flex: initial !important;
    overflow-wrap: anywhere;
  }

  .navigation.athenaRunnerNavModal .navigationBody .navigationTitle .navigationTitleBox {
    font-size: 10px;
    letter-spacing: 0.01em;
  }

  .navigation.athenaRunnerNavModal .runnerNavJumpItem {
    padding: 9px 10px !important;
    margin-bottom: 6px;
  }

  .navigation.athenaRunnerNavModal .runnerNavJumpItem .navigationContentBox {
    font-size: 12px;
  }

  .navigation.athenaRunnerNavModal .navStatusBadge {
    display: inline-block;
    max-width: 100%;
    padding: 3px 7px;
    font-size: 10.5px;
    white-space: normal;
    line-height: 1.2;
  }

  .navigation.athenaRunnerNavModal .navigationBodyFooter {
    box-sizing: border-box;
    padding: 10px 12px;
    gap: 8px;
  }

  .navigation.athenaRunnerNavModal .navigationBodyFooter p {
    flex: 1 1 160px;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.35;
  }

  .navigation.athenaRunnerNavModal .navigationBodyFooter .navigationClose {
    padding: 9px 18px;
    font-size: 13px;
  }
}

@supports (height: 100dvh) {
  @media screen and (max-width: 600px) {
    .navigation.athenaRunnerNavModal {
      max-height: calc(100dvh - 16px);
    }

    .navigation.athenaRunnerNavModal .navigationBody {
      max-height: calc(100dvh - 370px);
    }
  }
}

@media screen and (max-width: 600px) and (max-height: 540px) {
  .navigation.athenaRunnerNavModal .navigationHead {
    padding: 8px 12px;
  }

  .navigation.athenaRunnerNavModal .athenaNavLegendBar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .navigation.athenaRunnerNavModal .navigationBody {
    max-height: calc(100vh - 300px);
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .navigation.athenaRunnerNavModal .navigationBodyFooter {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

@supports (height: 100dvh) {
  @media screen and (max-width: 600px) and (max-height: 540px) {
    .navigation.athenaRunnerNavModal .navigationBody {
      max-height: calc(100dvh - 300px);
    }
  }
}

/* Keep the Next label readable when the final-question control is disabled. */
.athenaExamRunnerPage #runnerTopNextBtn > span {
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
}

@media screen and (max-width: 768px) {
  .athenaExamRunnerPage #runnerTopNextBtn:disabled {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
    color: #4338ca !important;
    opacity: 1 !important;
  }

  .athenaExamRunnerPage #runnerTopNextBtn:disabled > span,
  .athenaExamRunnerPage #runnerTopNextBtn:disabled > i {
    color: #4338ca !important;
  }
}
/*# sourceMappingURL=style.css.map */

/* Keep the Help & Support FAQ and ticket history together in the left column. */
.athenaHelpPage .athenaHelpLeftCol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.athenaHelpPage .athenaHelpLeftCol > .athenaHelpFaqCard,
.athenaHelpPage .athenaHelpLeftCol > .athenaHelpTicketsCard { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

/* Fit the native YouTube landscape player inside portrait mobile fullscreen. */
@media screen and (max-width: 768px) and (orientation: portrait) {
  body.has-athena-video-fs .athenaRichVideoWrap.is-youtube-wrap:not(.is-athena-landscape-fs) > iframe.is-athena-fs-media,
  body.has-athena-video-fs .athenaRichVideoWrap.is-youtube-wrap:not(.is-athena-landscape-fs) > iframe:fullscreen,
  body.has-athena-video-fs .athenaRichVideoWrap.is-youtube-wrap:not(.is-athena-landscape-fs) > iframe:-webkit-full-screen {
    position: fixed !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: min(100vh, 177.7778vw) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    object-fit: contain !important;
  }
}

/* Mobile YouTube: playback-speed menu (opened from YouTube's settings icon) and toast */
.athenaRichVideoWrap > .athenaYtSpeedMenu {
  position: absolute;
  top: 48px;
  right: 10px;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  max-height: calc(100% - 56px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
  border-radius: 10px;
  background: rgba(28, 28, 28, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.athenaRichVideoWrap > .athenaYtSpeedMenu .athenaYtSpeedTitle {
  padding: 6px 14px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.athenaRichVideoWrap > .athenaYtSpeedMenu .athenaYtSpeedOpt {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.athenaRichVideoWrap > .athenaYtSpeedMenu .athenaYtSpeedOpt.is-active {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
}

.athenaRichVideoWrap > .athenaYtToast {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  z-index: 2147483647;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(28, 28, 28, 0.9);
  color: #ffffff;
  font-size: 13px;
  pointer-events: none;
}

.athenaRichVideoWrap > .athenaYtSeekLabel {
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 600;
}