/* Global CSS Variables */
:root {
  --primary-color: #002664;
  --secondary-color: #ffffff;
  --highlight-color: #9b2020;
  --text-color: #282828;
  --scrollbar-thumb-color: #bbbbbb;
  --footer-bg-color: #c0c9d9;
  --main-bg-color: #f1f1f1;
  --button-hover-bg: #0026643f;
  --btn-text-color: #002664;
}

/* Global Reset */
* {
  padding: 0;
  margin: 0; 
  box-sizing: border-box;
}

/* Body Text */
body {
  font-family: "Roboto", Arial, sans-serif;
  line-height: 1.6;
}

/* Headings */
body h1,
body h2,
body h3,
body h4 {
  font-weight: 600;
  margin-block-start: 0;
  margin-block-end: 0;
  margin: 0;
}

body .hint {
  padding: 0 0 10px 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin: 0;
}
body a:not([href]):not([tabindex]),
body a:not([href]):not([tabindex]):focus {
  color: #fff;
  text-decoration: none;
}

/* Paragraphs */
body p {
  margin-block-start: 0;
  margin-block-end: 0;
  margin: 0;
}

/* Monospace text (Code/Preformatted) */
body code,
body pre {
  font-family: "Courier New", "Lucida Console", monospace;
  margin-block-start: 0;
  margin-block-end: 0;
  margin: 0;
}

/* loader Loading */

.preloader {
  background-color: #002664ca;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 165000;
}
.loader {
  display: inline-block;
  text-align: center;
  line-height: 86px;
  text-align: center;
  position: relative;
  padding: 0 48px;
  font-size: 48px;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}
.loader:before,
.loader:after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  position: absolute;
  animation: load 0.7s infinite alternate ease-in-out;
  top: 0;
}
.loader:after {
  top: auto;
  bottom: 0;
}
@keyframes load {
  0% {
    left: 0;
    height: 43px;
    width: 15px;
    transform: translateX(0);
  }
  50% {
    height: 10px;
    width: 40px;
  }
  100% {
    left: 100%;
    height: 43px;
    width: 15px;
    transform: translateX(-100%);
  }
}

/* Container */
.wiz_container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--secondary-color);
  overflow: hidden;
  min-height: 100vh;
  max-height: 100vh;
  position: relative;
}

/* Images */
/* img {
  max-width: 100%;
  width: 95%;
} */

/* Header Area */
.wiz_container .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  height: 55px;
  margin: 0;
  box-shadow: 0px 0px 11px -3px var(--text-color);
  position: absolute;
  max-width: 1280px;
  width: 100%;
  z-index: 56464;
}

.wiz_container .header .zoom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  max-width: 50px;
  width: 50px;
  border-right: 2px solid var(--primary-color);
  position: relative;
}
.wiz_container .header .zoom .timer-holder .timer-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 23px;
  gap: 5px;
  font-weight: 700;
}
.wiz_container .header .zoom .timer-holder .timer-icon i {
  width: 30px;
  margin-left: 5px;
}

.wiz_container .header .zoom .zoom-options {
  position: absolute;
  padding: 10px;
  background-color: #fff;
  width: 220px;
  font-size: 21px;
  display: none;
}
.wiz_container .header .zoom .zoom-options .option {
  padding: 10px;
  font-weight: 700;
  border-bottom: 4px solid #efefef;
  cursor: pointer;
  transition: all 0.4s;
}
.wiz_container .header .zoom .zoom-options .option:hover {
  scale: 1.1;
}
.wiz_container .header .title-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
}
.wiz_container .header .title-area i {
  font-size: 30px;
  color: var(--btn-text-color);
  cursor: pointer;
}

.wiz_container .header .zoom i {
  max-width: 50px;
  width: 50px;
  font-size: 30px;
  color: var(--primary-color);
}

.wiz_container .header .logo {
  max-width: 50px;
  width: 50px;
}

.wiz_container .header .logo img {
  max-width: 50px;
  width: 50px;
}

/* Main Area */
.wiz_container main {
  margin: 0;
  padding: 20px 20px;
  position: absolute;
  top: 55px;
  height: calc(100vh - 116px);
  max-width: 1280px;
  width: 100%;
  border: 5px double #000;
  overflow: hidden;
}

/* Scrollbar Styling */
.wiz_container .scrollbar {
  overflow-y: auto !important;
  height: 90% !important;
  padding-right: 10px;
}

.wiz_container .scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.wiz_container .scrollbar::-webkit-scrollbar-track {
  background: var(--main-bg-color);
  border-radius: 20px;
}

.wiz_container .scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 20px;
}

.wiz_container .scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--btn-text-color);
}

.wiz_container .scrollbar::-webkit-scrollbar:active {
  background-color: var(--main-bg-color);
}

.wiz_container .scrollbar::-webkit-scrollbar-track-piece {
  background: var(--main-bg-color);
  border-radius: 20px;
}

.wiz_container .scrollbar::-webkit-scrollbar-button {
  display: none;
}

/* Inforamtion Content Styling */
.wiz_container main .information {
  background-color: var(--secondary-color);
  min-height: 100%;
  width: 100%;
  padding: 0 10px;
}

.wiz_container main .information .heading {
  padding: 0 0 20px;
}

.wiz_container main .information .all-instructions h5 {
  padding: 0 0 20px;
}

.wiz_container main .information .all-instructions .details {
  padding: 20px 0 20px 0;
}

.wiz_container main .slides {
  display: none;
  min-height: 100%;
  height: 100%;
}
.wiz_container main .slides.active {
  display: flex;
}

/* Content Divisions */
.wiz_container main .slides .contents {
  min-height: 100%;
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
}
.wiz_container main .slides .contents.flex-row  {
flex-direction: column;
}


.wiz_container main .slides .contents .left {
  min-height: 100%;
  height: 100%;
  width: 50%;
  border-right: 2px solid rgb(236, 236, 236);
  overflow: hidden;
}

/* 
div:focus {
  border: 5px double #000;
} */

.wiz_container main .contents .left .extracts {
  height: 100%;
}
.wiz_container main .contents .left .extracts .extract-heads {
  display: flex;
  gap: 3px;
}
.wiz_container main .contents .left .extracts .extract-heads .heads {
  padding: 10px;
  border: 2px solid #00266410;
  border-bottom: none;
  border-radius: 3px;
}
.wiz_container main .contents .left .extracts .extract-heads .heads.active {
  background-color: #00266420;
}
.wiz_container main .contents .left .extracts .bodys {
  display: none;
}
.wiz_container main .contents .left .extracts .bodys.active {
  display: block;
}
/* Content Center Icons */
.wiz_container main .slides .contents .middle {
  min-height: 100%;
  height: 100%;
  width: 1%;
  display: flex;
  align-content: center;
  align-items: center;
  color: var(--primary-color);
  z-index: 15;
  position: relative;
  padding: 0;
}
.wiz_container main .slides .contents .middle i {
  padding: 0;
  font-size: 55px;
}
.wiz_container main .slides .contents .middle .close-icon {
  display: block;
  position: absolute;
  left: -6px;
}
.wiz_container main .slides .contents .middle .open-icon {
  position: absolute;
  left: -22px;
  display: none;
}

.wiz_container main .slides .contents .right {
  min-height: 100%;
  height: 100%;
  width: 49%;
  padding: 0 0 0 15px;
}
.wiz_container main .slides .contents .right .question {
  padding-bottom: 15px;
}
.wiz_container main .slides .contents .right .question p {
  font-size: 20px;
}
.wiz_container main .slides .contents .right .question h3 {
  font-size: 18px;
}

.wiz_container main .slides .contents .right .q-options {
  height: 90%;
}
.wiz_container main .slides .contents .right .option-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 80%;
  height: 100%;
}

.wiz_container main .slides .contents .right .option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 5px;
	font-size: 16px; 
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wiz_container main .slides .contents .right .option:hover {
  background-color: #f0f0f0;
}

.wiz_container main .slides .contents .right .option input[type="radio"] {
  appearance: none;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border: 2px solid #bbb;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz_container
  main
  .slides
  .contents
  .right
  .option
  input[type="radio"]:checked {
  border-color: var(--btn-text-color);
  background-color: var(--btn-text-color);
}

.wiz_container
  main
  .slides
  .contents
  .right
  .option
  input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  margin: auto;
}

.wiz_container main .slides .contents .right .option label {
  cursor: pointer;
}

.wiz_container main .slides .contents .right .option.selected {
  background-color: #e0f7fa;
}

/* Button Areas */

.wiz-btn {
  position: relative;
  background-color: var(--btn-text-color);
  padding: 20px 25px 15px 25px;
  border: 4px solid transparent;
  border-radius: 3px;
  transition: all 0.5s;
  max-width: 1140px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.wiz-btn:not(:first-of-type) {
  margin-top: 10px;
}

.wiz-btn:hover {
  background-color: #fff;
  border: 4px solid var(--btn-text-color);
}
.wiz-btn:hover a {
  color: var(--btn-text-color);
  background-color: #fff;
}
.wiz-btn a {
  font-family: "Bebas Neue", Sans-serif;
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  line-height: 30px;
  color: #fff;
  text-decoration: none;
  transition: all 0.5s;
}

/* Footer Area */
.wiz_container .footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  margin: 0;
  position: absolute;
  max-width: 1280px;
  width: 100%;
  bottom: 0;
  z-index: 200;
  background-color: var(--footer-bg-color);
}

.wiz_container .footer .button {
  border-color: transparent;
  border-left: 2px solid transparent;
  font-size: 20px;
  border-radius: 0;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  line-height: 1.428571429;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s;
}

.wiz_container .footer .button:hover .wiz-btn {
  background-color: var(--button-hover-bg);
  color: var(--btn-text-color);
}

.wiz_container .footer .button .btn-flag {
  display: flex;
  gap: 20px;
  background: var(--secondary-color);
  border-left-color: var(--secondary-color);
  color: var(--primary-color);
  align-items: center;
  padding: 15px 30px;
  max-height: 60px;
  transition: all 0.3s;
}
.wiz_container .footer .button .wiz-btn.btn-flag.deflag {
  background: #ed6f3d;
}

.wiz_container .footer .button .btn-next {
  display: flex;
  gap: 20px;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 15px 30px;
  max-height: 60px;
  align-items: center;
  height: 100%;
  transition: all 0.3s;
}

/* Pagination Pages */
/* Parent container with max specificity */
.wiz-container.pagination {
  background-color: #fff;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  z-index: 14000;
  top: -800%;
  transition: all 0.5s;
}
.wiz-container.pagination .finsishbutton {
  margin-top: 25px;
  max-width: 150px;
  width: 150px;
}

.wiz-container.pagination .pagination-main {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.wiz-container.pagination .pagination-main .pagination-progress {
  padding: 15px;
}

.wiz-container.pagination .pagination-main .pagination-test {
  font-size: 16px;
}

/* Category Container */
.wiz-container.pagination .pagination-main .pagination-category-containar {
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  margin-top: 40px;
}

.wiz-container.pagination
  .pagination-main
  .pagination-category-containar
  .pagination-category-containar-child {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 4px solid #ccc;
  border-radius: 4px;
  transition: all 0.4s;
}

/* Category Number Circle */
.wiz-container.pagination
  .pagination-main
  .pagination-category-containar
  .pagination-category-containar-child
  .pagination-category-num {
  background-color: #002664;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
  border: 6px solid #ccc;
  border-radius: 5px;
}
.wiz-container.pagination
  .pagination-main
  .pagination-category-containar
  .pagination-category-containar-child.notAns
  .pagination-category-num {
  background-color: #b0b0b0;
  color: #fff;
}
.wiz-container.pagination
  .pagination-main
  .pagination-category-containar
  .pagination-category-containar-child.not-read
  .pagination-category-num {
  background-color: #ffffff;
  color: #000;
}
.wiz-container.pagination
  .pagination-main
  .pagination-category-containar
  .pagination-category-containar-child.flagged
  .pagination-category-num {
  background-color: #ed6f3d;
  color: #000;
}
/* Category Name */
.wiz-container.pagination
  .pagination-main
  .pagination-category-containar
  .pagination-category-containar-child
  .pagination-category-name {
  font-size: 18px;
  font-weight: 400;
}

/* Category Specific Classes */
.wiz-container.pagination
  .pagination-main
  .pagination-category-containar
  .pagination-category-containar-child.active {
  background-color: #002664ec;
  border-radius: 4px;
  border-bottom: 4px solid #002664;
  color: #fff;
}

.wiz-container.pagination .pagination-main .pagination-total-quetions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
  width: 80%;
}

.wiz-container.pagination .pagination-main .pagination-total-quetions .m-page {
  height: 60px;
  width: 60px;
  border: 6px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 28px;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.4s;
  position: relative;
}
.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .m-page:hover {
  scale: 1.1;
}
.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .m-page.answered {
  background-color: #002664;
  color: #fff;
}
.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .m-page.not-answered {
  background-color: #b0b0b0;
  color: #fff;
}
.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .m-page.not-read {
  background-color: #ffffff;
  color: #070707;
}
.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .m-page.flagged {
  background-color: #ed6f3d;
  color: #070707;
}

.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .m-page.desable
  .overlay {
  position: absolute;
  background-color: #d6d6d6d7;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
}

.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .pagination-question-num {
  height: 60px;
  width: 60px;
  border: 6px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 28px;
  font-weight: 600;
  border-radius: 5px;
}

.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .pagination-question-num.active {
  color: #fff;
  background-color: #002664;
  border: none;
}

.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .pagination-question-num.answered {
  background-color: #4caf50;
  border-color: #4caf50;
}

.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .pagination-question-num.not-answered {
  background-color: #f44336;
  border-color: #f44336;
}

.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .pagination-question-num.not-read {
  background-color: #ff9800;
  border-color: #ff9800;
}

.wiz-container.pagination
  .pagination-main
  .pagination-category-containar
  .pagination-category-containar-child:hover {
  background-color: #9dbcfb;
  color: rgb(11, 35, 99);
}
.wiz-container.pagination
  .pagination-main
  .pagination-total-quetions
  .pagination-question-num:hover {
  background-color: #002664;
  color: white;
}

/* Non Specified CSS */

.text-center {
  text-align: center;
}

.w-100 {
  width: 100%;
}

/* Header Section */
.result_container .header {
  background-color: #e0f7fa;
  padding: 20px;
  text-align: center;
}
.result_container .header h1 {
  text-align: center;
  color: var(--btn-text-color);
}

/* Summary Section */
.result_container .summary-section {
  background-color: #e0f7fa;
  border-radius: 8px;
  padding: 20px;
  margin: 20px auto;
  max-width: 940px;
  text-align: center;
}
.wiz_bold-text {
  font-family: "lora";
}

.result_container .summary-header {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.result_container .score-summary {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  font-size: 26px;
  color: var(--btn-text-color);
}

.percentage {
  color: #9f9f9f;
}

/* Question Results Section */
.question-results {
  margin: 20px auto;
  max-width: 800px;
  text-align: center;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  justify-content: center;
}

.question-box {
  padding: 15px;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
}

.correct {
  background-color: #4caf50;
}

.incorrect {
  background-color: #f44336;
}

/* Detailed Results Section */
.detailed-results {
  margin: 20px auto;
  max-width: 800px;
  text-align: center;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.results-table th,
.results-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #ddd;
}

.results-table th {
  background-color: #e0f7fa;
  color: #333;
  font-weight: bold;
}

.result.correct {
  color: #000000;
  background: #4caf50;
  font-weight: bold;
}

.result.incorrect {
  color: #000000;
  background-color: #f44336;
  font-weight: bold;
}
.result.half-correct {
  color: #040404;
  background-color: #f99891;
  font-weight: bold;
}

/* Drag & Drop Container */
.wiz_container main .slides .contents .right .dragable-container .options {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .options
  .drag_option {
  width: 100%;
  min-height: 50px;
  padding: 10px 25px;
  display: flex;
  align-items: center;
  justify-content: start;
  border: 2px dashed #002664;
  border-radius: 5px;
  background-color: #00266429;
  cursor: -webkit-grab;
  cursor: grab;
  transition: background-color 0.4s;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .options
  .drag_option:hover {
  background-color: #00266467;
}

.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .options
  .drag_option:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.wiz_container main .slides .contents .right .dragable-container .answer-boxes {
  display: block;
  gap: 10px;
  margin-bottom: 20px;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .answer-boxes
  .drag_option:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .answer-boxes
  .drag_option {
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00586429;
  cursor: -webkit-grab;
  cursor: grab;
  transition: background-color 0.4s;
}

.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .answer-boxes
  .drag_option:hover {
  background-color: #0026644e;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .answer-boxes
  .ans-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
  background-color: #e5e5e5;
  padding: 5px 15px;
  border-radius: 8px;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .answer-boxes
  .ans-group
  .group-name {
  width: 25%;
  font-size: 19px;
  font-weight: 500;
}

.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .answer-boxes
  .answer-box {
  width: 75%;
  height: auto;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #002664;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container.desable
  .answer-boxes
  .answer-box {
  height: auto;
  padding: 12px;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container
  .answer-boxes
  .answer-box:hover {
  background-color: #00266409;
}
.wiz_container main .slides .contents .right .answer-box.filled {
  background-color: #dff0d8;
}

/* Multiple Dropdown */

.wiz_container main .slides .contents .right .q-multipl-bg {
  background-color: #00266420;
  padding: 1px 2px 3px 1px;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: all 0.4s;
}
.wiz_container main .slides .contents .right .q-multipl-bg:hover {
  background-color: #00266480;
  box-shadow: inset 1px 2px 10px 2px #002664;
}
.wiz_container main .slides .contents .right .question-row {
  background-color: #f1f6ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  padding: 10px 20px;
}
.wiz_container main .slides .contents .right .question-row label {
  flex: 1;
  font-size: 16px;
  color: #002664;
  font-weight: 700;
}
.wiz_container main .slides .contents .right .question-row select {
  width: 140px;
  padding: 10px 12px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9; /* Light background color */
  transition: border-color 0.3s ease; /* Smooth transition for focus */
}

/* Hover effect to improve interactivity */
.wiz_container main .slides .contents .right .question-row select:hover {
  border-color: #002664; /* Blue border on hover */
}

/* Focus effect to indicate the selected dropdown */
.wiz_container main .slides .contents .right .question-row select:focus {
  border-color: #002664; /* Change border color when focused */
  outline: none; /* Remove default outline */
}

/* Login Widzerd */

.wiz-popup {
  width: 600px;
  border: 4px solid #00266457;
  border-radius: 13px;
  padding: 30px;
}
.wiz-popup .name-popup {
  padding: 3px;
}
.wiz-popup .name-popup .login-link {
  display: flex;
  font-size: 22px;
  gap: 30px;
  justify-content: center;
  align-items: center;
}
.wiz-popup .name-popup .login-link a {
  background-color: #002664;
  color: #fff;
  padding: 1px 15px;
  border-radius: 13px;
  text-decoration: none;
  border: 3px solid #002664;
  transition: all 0.4s;
}
.wiz-popup .name-popup .login-link a:hover {
  background-color: #ffffff;
  color: #002664;
  padding: 5px 25px;
  border-radius: 13px;
  text-decoration: none;
}
.wiz-popup .name-popup .anonymus {
  margin-top: 25px;
  font-size: 30px;
  background-color: #ffffff;
  color: #002664;
  border-radius: 13px;
  text-decoration: none;
  text-align: center;
}
.wiz-popup .name-popup .anonymus .name-box {
  width: 100%;
}
.wiz-popup .name-popup .anonymus .name-box input {
  width: 100%;
  border: 4px solid #002664;
  padding: 15px;
  outline: none;
  margin-bottom: 13px;
  border-radius: 5px;
  font-size: 25px;
  text-align: center;
  font-family: "Bebas Neue", "Lora", "Georgia", serif;
}

.wiz-tax-hidden {
  display: none;
}

.wel-name {
  margin-bottom: 30px;
  text-align: center;
  width: 100%;
}

/* Result Page */

.result_container main .question-results .question-box {
  cursor: pointer;
  transition: all 0.4s;
}
.result_container main .question-results .question-box:hover {
  opacity: 0.7;
  scale: 1.05;
}
.result_container main .detailed-results .results-table {
  text-align: left;
}
.result_container main .detailed-results .results-table .question-text {
  text-align: left;
}
.result_container main .detailed-results .results-table .question-text a {
  color: #000;
  /* transition: all 0.4s; */
}
.result_container main .detailed-results .results-table .question-text a:hover {
  color: #1b88f5d1;
}
.result_container main .detailed-results .results-table td.result {
  text-align: center;
}

/* Dashboard */
.dashbaord_container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

.dashbaord_container thead {
  background-color: #001f3f;
  color: #ffffff;
  font-size: 14px;
}

.dashbaord_container th,
.dashbaord_container td {
  padding: 15px;
  border: 1px solid #dddddd;
}

.dashbaord_container tbody tr:nth-child(even) {
  background-color: #ffffff;
}

.dashbaord_container tbody tr:hover {
  background-color: #001f3f10;
}

.wiz_container .welcome-header {
  padding: 20px 0;
  text-align: left;
  font-weight: bold;
  font-size: 24px;
  color: #1a1a1a;
}
.wiz_container .welcome-header h1 {
  font-size: 60px;
}
.wiz_container .welcome-header h4 {
  margin: 0;
  font-size: 32px;
  color: #1a1a1a;
  font-weight: light;
  letter-spacing: 1px;
}
.dashbaord_container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}
.dashbaord_container table th {
  font-family: "Bebas Neue", "Lora", "Georgia", serif;
  letter-spacing: 1px;
  font-weight: 400;
}
.dashbaord_container table td a.results {
  font-family: "Bebas Neue", "Lora", "Georgia", serif;
  letter-spacing: 1px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #002664;
  border-radius: 5px;
  text-decoration: none;
  width: 90%;
  min-height: 36px;
}

/* Result Details Option Container */

.wiz_container
  main
  .slides
  .contents
  .right
  .option-container.desable
  .answer_right,
.wiz_container
  main
  .slides
  .contents
  .right
  .option-container.desable
  .answer_right
  .question-row {
  background-color: #4caf5050;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .option-container.desable
  .answer_wrong,
.wiz_container
  main
  .slides
  .contents
  .right
  .option-container.desable
  .answer_wrong
  .question-row {
  background-color: #f4433650;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .option-container.desable
  .answer_wrong:hover {
  background-color: #f4433650;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .option-container.desable
  .answer_right:hover {
  background-color: #4caf5050;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .option-container.desable
  p.answer_feeback {
  padding: 10px;
  text-align: left;
  width: 100%;
  font-weight: 400;
}

.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container.desable
  .answer-boxes
  .ans-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.flex-starting-ans-group {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 5px 15px;
}

.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container.desable
  .answer-boxes
  .answer_right
  .answer-box {
  background-color: #4caf5050;
  cursor: no-drop;
  transition: background-color 0.4s;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .dragable-container.desable
  .answer-boxes
  .answer_wrong
  .answer-box {
  background-color: #f4433650;
  cursor: no-drop;
  transition: background-color 0.4s;
}

.wiz_container main .slides .contents .right .desable #youranswer {
  border: 3px solid #f4433610;
  padding: 13px;
}
.wiz_container main .slides .contents .right .desable #feedback_answer {
  border: 3px solid #f4433610;
  padding: 13px;
}
.wiz_container main .slides .contents .right .desable .answer-explain {
  border: 3px solid #f4433610;
  background-color: #36f44f52;
  padding: 13px;
}
.wiz_container main .slides .contents .right .desable #feedback_answer_u {
  color: #d53e3e;
}
.wiz_container main .slides .contents .right .desable #feedback_answer_h {
  color: #1d9b4d;
}
.wiz_container main .slides .contents .right .desable .points {
  display: flex;
  align-items: flex-start;
  border: 1px solid #e3e3e35d;
  padding: 13px;
  gap: 30px;
}
.wiz_container main .slides .contents .right .desable .points .comments {
  border: 1px solid #e3e3e35d;
  padding: 10px;
}
.wiz_container
  main
  .slides
  .contents
  .right
  .desable
  .points
  .comments
  .comment {
  font-weight: 400;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.wiz_container main .slides .contents .right .desable .points .point {
  font-size: 30px;
}

/* Exract elements spacings */
/* Styling for elements in .wiz_container main .contents .left .extracts .extract-bodys .bodys */
.wiz_container main .contents .left .extracts .extract-bodys .bodys h1,
.wiz_container main .contents .left .extracts .extract-bodys .bodys h2,
.wiz_container main .contents .left .extracts .extract-bodys .bodys h3,
.wiz_container main .contents .left .extracts .extract-bodys .bodys h4 {
  font-size: 30px;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 10px;
}

.wiz_container main .contents .left .extracts .extract-bodys .bodys h5,
.wiz_container main .contents .left .extracts .extract-bodys .bodys h6 {
  font-size: 23px;
  font-weight: 400;
  color: #191919;
  margin-bottom: 10px;
}

.wiz_container main .contents .left .extracts .extract-bodys .bodys p,
.wiz_container main .contents .left .extracts .extract-bodys .bodys ul,
.wiz_container main .contents .left .extracts .extract-bodys .bodys ol  {
  font-size: 20px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 10px;
} 
/* .wiz_container main .contents .left .extracts .extract-bodys .bodys ul{
  list-style-type: disc;
  list-style-position: outside;
}
.wiz_container main .contents .left .extracts .extract-bodys .bodys ol {
  list-style-type: decimal;
  list-style-position: outside;
}

.wiz_container main .contents .left .extracts .extract-bodys .bodys ul li,
.wiz_container main .contents .left .extracts .extract-bodys .bodys ol li { 
  list-style-position: outside;
 } */

 .wiz_container main .contents .left .extracts .extract-bodys .bodys ul,
.wiz_container main .contents .left .extracts .extract-bodys .bodys ol {
    list-style: revert; /* restores default bullet/number styles */
    padding-left: 1.5rem; /* optional, ensure bullets/numbers appear in view */
    margin: 0;
}

.wiz_container main .contents .left .extracts .extract-bodys .bodys ul li,
.wiz_container main .contents .left .extracts .extract-bodys .bodys ol li {
    list-style-position: outside;
}


/* Styling for elements in .wiz_container main .contents .left .extracts .extract-bodys */
.wiz_container main .contents .left .extracts .extract-bodys p,
.wiz_container main .contents .left .extracts .extract-bodys ul,
.wiz_container main .contents .left .extracts .extract-bodys ol {
  font-size: 20px;
  font-weight: 400;
  color: #002664;
  margin-bottom: 10px;
}

/* Styling for elements in .wiz_container main .information */
.wiz_container main .information h1,
.wiz_container main .information h2,
.wiz_container main .information h3,
.wiz_container main .information h4,
.wiz_container main .information h5,
.wiz_container main .information h6 {
  font-size: 30px;
  font-weight: 400;
  color: #002664;
  margin-bottom: 10px;
}

.wiz_container main .information p,
.wiz_container main .information ul,
.wiz_container main .information ol {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
}

.wiz_container main .information hr {
  margin-bottom: 10px;
}

/* Submission Modal */

.wiz_modal {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #efefefed;
  position: relative;
  z-index: 5000000;
  display: none;
}
.wiz_modal .modal-box {
  background-color: #e7e7e7;
  padding: 30px;
  border: 5px solid #002664;
  max-width: 600px;
  text-align: center;
}
.wiz_modal .modal-box h1 {
  font-size: 46px;
  margin-bottom: 40px;
  line-height: 45px;
}
.wiz_modal .modal-box h3 {
  font-size: 36px;
  margin-bottom: 30px;
  line-height: 35px;
}
.wiz_modal .modal-box p {
  font-size: 26px;
  margin-bottom: 20px;
  line-height: 20px;
}
.wiz_modal .modal-box .paragaphs p {
  font-size: 26px;
  margin-bottom: 10px;
  line-height: 20px;
}
.wiz_modal .modal-box .paragaphs {
  margin-bottom: 30px;
}
.wiz_modal .modal-box .buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.wiz_modal .modal-box .buttons .wiz-btn {
  margin: 0;
}

.wiz_submission_warning .modal-box {
  background-color: #e7e7e7;
  padding: 30px;
  border: 5px solid #002664;
  max-width: 600px;
  text-align: center;
}
.wiz_submission_warning .modal-box h1 {
  font-size: 46px;
  margin-bottom: 40px;
  line-height: 45px;
}
.wiz_submission_warning .modal-box h3 {
  font-size: 36px;
  margin-bottom: 30px;
  line-height: 35px;
}
.wiz_submission_warning .modal-box p {
  font-size: 26px;
  margin-bottom: 20px;
  line-height: 20px;
}
.wiz_submission_warning .modal-box .paragaphs p {
  font-size: 26px;
  margin-bottom: 10px;
  line-height: 20px;
}
.wiz_submission_warning .modal-box .paragaphs {
  margin-bottom: 30px;
}
.wiz_submission_warning .modal-box .buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.wiz_submission_warning .modal-box .buttons .wiz-btn {
  margin: 0;
}
.wiz_submission_warning .modal-box .timer-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  gap: 5px;
  font-weight: 700;
}

/* Scheduling */

.time_container {
  min-height: 60vh;
  max-width: 800px;
  padding: 40px;
}
.time_container .timer-prebox {
  border-style: solid;
  border-width: 4px;
  border-color: #00266457;
  border-radius: 13px;
  padding: 30px;
  transition: all 0.3s;
}
.time_container .timer-prebox h1 {
  text-align: center; 
}
.time_container .timer-prebox h4 {
  text-align: center; 
  font-size: 26px;
  margin-bottom: 30px;
  color: #0d5a13;
}
.time_container .timer-box {
  display: flex;
  transition: all 0.3s;
  align-items: center;
  justify-content: center;
}
.time_container .timer-box .timer {
  width: 60%;
}
.time_container .timer-box .image {
  width: 40%;
}
.time_container .timer-box .image img {
  max-width: 100%;
  scale: 1.4;
}
.countdown-container {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.time-box {
  flex: 1 1 calc(50%);
  max-width: calc(50% - 20px);
  box-sizing: border-box;
  background-color: #002e5d;
  color: white;
  text-align: center;
  border-radius: 10px;
  padding: 20px 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.time-box span {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
}

.time-box .label {
  margin-top: 5px;
  font-size: 1rem;
  text-transform: uppercase;
  opacity: 0.8;
}
#countdown-text {
  font-size: 2rem;
  font-weight: bold;
  color: #002e5d;
  text-align: center;
  margin-top: 20px;
}

.no-result-container {
  padding: 50px 0;
}

.available {
  position: absolute;
  color: #fff;
  background: green;
  padding: 2px;
  right: -20px;
  top: 5px;
  border-radius: 50px;
  padding: 0 30px 0 10px;
}
.available.available-soon {
  position: absolute;
  color: #fff;
  background: rgba(232, 81, 39, 0.888);
  padding: 2px;
  right: -20px;
  top: 5px;
  border-radius: 50px;
  padding: 0 30px 0 10px;
}
.reamining {
  position: absolute;
  color: #141414;
  background: rgb(64, 235, 84);
  padding: 2px;
  right: -20px;
  top: 35px;
  border-radius: 50px;
  padding: 0 30px 0 10px;
}
.reamining.no-retry {
  position: absolute;
  color: #141414;
  background: rgb(235, 75, 64);
  padding: 2px;
  right: -20px;
  top: 35px;
  border-radius: 50px;
  padding: 0 30px 0 10px;
}


body .ql-editor { 
  font-size: 22px;

}

.wiz_container.dashbaord_container {
  overflow: visible;
}

/* Submission warning */
.wiz_submission_warning {
  display: none;
  height: 90%;
  background: #ffffffe6;
  position: fixed;
  width: 100%;
  z-index: 500000;
  top: 0;
  left: 0;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.wiz_submission_warning .modal-box {
  text-align: center;
}

.wiz-quiz-gap-wrap  select {
  display: inline;
  width: auto;
  margin: 10px;
  /* text-transform: capitalize; */
}
.wiz-quiz-gap-wrap.correct-answer select {
  border-color: #4caf50;
  background-color: #dff0d8;
}
.wiz-quiz-gap-wrap.incorrect-answer select {
  border-color: #f44336;
  background-color: #f2dede;
}


.wiz-quiz-gap-wrap .wiz-quiz-gap-feedback {
  border-color: #f44336;
  background-color: #f2dede;
  font-weight: 900;
  font-size: 16px;
}