* {
  animation-duration: 0.3s !important;
  animation-delay: 0s !important;
  user-select: none;
  transition: all 0.2s ease-in-out;
  scrollbar-width: thin;
}

header {
  display: flex;
}

:root{
  --light-shade: rgb(238, 224, 221);
  --lighter-shade: rgb(221, 192, 187);
  --mid-shade: rgb(204, 161, 153);
  --midder-shade: rgb(187, 129, 119);
  --half-shade: rgb(170, 98, 85);
  --max-shade: rgb(136, 78, 68);
  --maxxer-shade: rgb(102, 59, 51);
  --dark-shade: rgb(68, 39, 34);
  --darker-shade: rgb(34, 20, 17);
}

body {
  background: hsl(9, 33%, 95%) !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.headerContainer {
  display: flex;
  background: white;
  margin: 8px;
  width: 100%;
  border-radius: 40px;
  position: relative;
  border: 1px solid var(--lighter-shade);
}



.headerLogoHolder {
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  color: #d2a04d;
  margin: 8px;
}

img {
  width: 100%;
}

.headerTextHolder {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.headerText {
  font-family: var(--Jost);
  font-weight: 650;
  font-size: 36px;
  color: #be887e;
}

main {
  flex: 1;
  display: flex;
}

.mainContainer {
  flex: 1;
  margin: 8px;
  border: 1px solid var(--lighter-shade);
  border-radius: 40px;
  background: white;
  overflow: hidden;
}

.mainContent {
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

#introDisplay {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.introDisplayLogoHolder {
  width: 100px;
  border-radius: 50%;
  background: hsl(from #be887e h calc(0) calc(80));
  display: flex;
}

.introTextHolder {
  font-family: var(--Figtree);
  font-size: 20px;
  text-align: center;
}

.introButtons {
  display: flex;
  padding: 4px;
  gap: 8px;
}

.introButtonTextHolder{
  padding: 8px 16px;
}

.introButton {
  font-family: var(--Jost);
  background: var(--dark-shade);
  color: white;
  font-weight: 500;
  border-radius: 4pc;
  cursor: pointer;
}

#createExamForm {
  flex: 1;
  padding: 20px;
  display: flex;
}

.formTitleText {
  font-size: 24px;
  font-family: var(--Jost);
  font-weight: 600;
  color: var(--dark-shade);
}

.formHolder {
  display: flex;
  justify-content: center;
  flex: 1;
  margin: auto;
}

.form {
  width: 400px;
}


.examTestHolder .form {
  width: 100%;
}

.formContentHolder {
  margin: 4px;
  padding: 4px;
}

.formContent {
  padding: 16px 4px;
}

.fcTitle {
  font-family: var(--Figtree);
  font-size: 18px;
  color: var(--darker-color);
  opacity: 0.6;
}

.inputHolder {
  display: flex;
}

.formInput {
  background: hsl(9, 33%, 95%);
  border: 1px solid var(--mid-shade);
  padding: 12px 8px;
  border-radius: 8px;
  outline: none;
  font-family: var(--Figtree);
  color: var(--maxxer-shade);
  font-size: 18px;
  font-weight: 500;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.signification{
  animation-duration: 1s!important;
  animation: errorInput 1s linear;
}

@keyframes errorInput{
  0%{
    border: 1px solid var(--mid-shade);
    background: hsl(9, 33%, 95%);
  }
  50%{
    border: 1px solid #B20113;
    background: hsl(from #B20113 h s calc(80))
  }
}

.nonIntroButton {
  width: 100%;
  border-radius: 8px;
  margin: 4px;
  font-size: 20px;
  text-align: center;
}

#examHolder {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.examsHolder {
  width: 800px;
  position: relative;
  overflow-y: scroll;
  height: 100%;
}

.exams {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: absolute;
  width: 100%;
}

.exam {
  margin: 4px;
  border-radius: 12px;
  overflow: hidden;
}

.examDetails {
  padding: 8px;
  font-family: var(--Figtree);
  font-weight: 600;
  box-shadow: 0 2px 11px rgba(221, 192, 187, 0.4);
  border-radius: 20px;
  border: 1px solid var(--light-shade);
}



.examTime {
  font-size: 12px;
  opacity: 0.7;
}

.testLogo {
  width: 36px;
  background: white;
  display: flex;
  border-radius: 50%;
}

.examDetailsHolder {
  padding: 8px;
  background: white;
  border-radius: 8px;
}

.examName {
  font-size: 20px;
  font-weight: 600;
  text-wrap-mode: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchIconHolder {
  display: flex;
  padding: 8px;
}

.searchInputHolder {
  display: flex;
  padding: 4px;
  align-items: center;
}

#searchInput {
  border: 1px solid var(--half-shade);
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--light-shade);
  font-size: 100%;
  font-family: var(--Figtree);
  outline: none;
}

.examHeaderHolder {
  padding: 8px;
}

.examHeader {
  display: flex;
  align-items: center;
  gap: 30px;
}

.examOptionHolder {
  margin: 4px;
}

.examOptionHolder,
.examOptionIcon {
  display: flex;
}

.examOptionIcon {
  background: hsl(0 0 90);
  border-radius: 50%;
  padding: 4px;
}

.examOptionIconHolder {
  margin-left: auto;
  display: flex;
  margin-left: auto;
  padding: 4px;
  border-radius: 20px;
  gap: 4px;
}

.alertShip {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 999;
  background: transparent;
  backdrop-filter: blur(4px) brightness(0.8);
  display: flex;
  align-items: end;
  justify-content: center;
}

.alertContainer {
  width: 50%;
  background: white;
  animation-delay: 0.3s !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.alertIcon {
  display: flex;
  padding: 8px;
  border-radius: 50%;
  background: var(--light-shade);
  border: 1px solid var(--darker-color);

}

.alertIconHolder,
.alertMessage,
.alertButtonHolder {
  display: flex;
  justify-content: center;
  padding: 16px;
  margin: 4px;
  gap: 12px
}

.alertButtonHolder {
  animation-delay: 0.6s !important;
}

.alertButton {
  flex: 1;
  text-align: center;
  font-family: var(--Jost);
  font-size: 18px;
  font-weight: 450;
  padding: 12px;
  cursor: pointer;
}

.alertMessage{
  flex-direction: column;
  align-items: center;
}

.keyword_holder{
  max-width: 50%;
}

.positive_text {
  color: #0C642B;
  border: 1px solid hsl(from #0C642B h s calc(25));
  border-radius: 12px;
  background: hsl(from #0C642B h s calc(30));
  color: white;

}

.positive_text:active {
  background: hsl(from #0C642B h s calc(93));
  color: black;


}

.negative_text {
  color: #B20113;
  border: 1px solid hsl(from #B20113 h s calc(25));
  border-radius: 12px;
  background: hsl(from #B20113 h s calc(95));
}

.negative_text:active {
  background: hsl(from #B20113 h s calc(93));

}

.alertMessageHolder {
  font-family: var(--Figtree);
  font-size: 18px;
}

.examExtraDetails {
  overflow: hidden;
  text-wrap-mode: nowrap;
  text-overflow: ellipsis;
}

.examTestHolder,
.examTest {
  height: 100%
}

.examTest {
  position: relative;
  margin: 12px;
}

textarea {
  field-sizing: vertical;
  white-space: pre-wrap;

}

.question_text{
  white-space: pre-wrap;

}

#breadCrumbContainer {
  position: sticky;
  padding: 4px;
  color: var(--dark-shade);
  font-family: var(--Figtree);
  z-index: 999;
  top: 0;
  background: white;
}

.arrowPointer {
  text-decoration: none !important;
  color: black !important;
}

.breadCrumbHolder {
  display: flex;
  gap: 12px;
}

.breadCrumb {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--dark-shade);
}

#testDisplay {
  padding: 20px 0 px;
  position: absolute;
  width: 100%;
}

.testHolder {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test {
  background: var(--light-shade);
  border: 1px solid #be887e;
  border-radius: 8px;
}

.testChildren,
.questionHolder{
  padding: 8px;
}


.testName {
  font-family: var(--Figtree);
  font-weight: 500;
  color: var(--dark-shade);
}

.testHeader {
  padding-top: 8px;
}

.notificationContainer {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  z-index: 999;
  pointer-events: none;
}

.notificationHolder {
  display: flex;
  justify-content: center;
  margin: 8px;
}

.notification {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 8px;
  border-radius: 4px;
  color: white;
}

.error_notification {
  background: hsl(from #B20113 h calc(50) calc(50));
}

.success_notification {
  background: hsl(from #0C642B h calc(50) calc(50));
}


.notificationIconHolder {
  display: flex;
  border-radius: 50%;
  margin: 4px;
}

.notificationTitleHolder {
  font-family: var(--Jost);
  padding: 4px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
}

.notificationTextHolder {
  font-family: var(--Figtree);
  padding: 4px;
}

textarea {
  resize: vertical;
}

.fcAnswerHolder {
  padding: 4px;
}

.createAnswer {
  display: flex;
  gap: 12px;
}

.cAHolder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: white;
  border-radius: 4px;
  border: 1px solid var(--mid-shade);
  padding: 8px;
  cursor: pointer
}


.cAIconHolder,
.configContent,
.answerInput {
  display: flex;
}

.cAContent {
  font-family: var(--Jost);
  font-weight: 500;
}

#essayAnswerContainer {
  width: 100%;
}

.essayAnswerConfig {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.configName {
  font-family: var(--Figtree);
}

.essayAnswerConfigHolder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.question:nth-child(1){
  display: flex
}

.question {
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 8px;
  margin: 4px;
  background: white;
  border-radius: 8px;
}

.question_content {

  font-family: var(--Figtree);
  font-size: 18px;
  padding: 8px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question_marks{
  font-family: var(--Inconsolata);
  font-weight: 800;
  font-size: 14px;
  opacity: 0.6;
  text-wrap-mode: nowrap;
}

.submissionButton{
  padding: 8px;
  font-family: var(--Jost);
  font-weight: 600;
  background: var(--dark-shade);
  border-radius: 4px;
  text-align: center;
  color: white;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
}

.examMarkingContainer{
  position: absolute;
  width: 100%;
}

.testeeAnswers{
  padding: 8px;
  margin: 4px;
  background: var(--maxxer-shade);
  border-radius: 8px;
}

.testeeDetailsHolder{
  color: var(--light-shade);
  position:sticky;
  background: var(--maxxer-shade);
  top: 0px;
  display: flex;
}

.testeeTotalMarks{
  display: flex;
  align-items: center;
  font-family: var(--Inconsolata);
  gap: 4px;
  margin-left: auto;
}

.passed_questions{
  display: flex;
  gap: 12px;
  align-items: center;
}

.statStat{
  padding: 0px 4px;
  font-weight: 800;
  font-size: 18px;
  background: var(--lighter-shade);
  border-radius: 4px;
  color: var(--dark-shade);
}

.testeeUsername{
  font-family: var(--Jost);
  font-size: 24px;
  font-weight: 500;
  padding: 8px;
}

.answerDetails{
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: white;
  border-radius: 4px;
}

.answered_question{
  font-family: var(--Figtree);
  font-size: 20px;
  font-weight: 500;
  color: var(--dark-shade);
}

.provided_answer{
  padding: 8px;
  background: hsl(9, 33%, 95%);
  border: 1px solid var(--lighter-shade);
  border-radius: 4px;
  font-family: var(--Jost);
  margin: 4px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question_time{
  width: max-content;
  padding: 4px 8px;
  background: var(--light-shade);
  color: var(--dark-shade);
  font-family: var(--Inconsolata);
  border-radius: 4px;
  font-weight: 700;
}

.minimal_time{
  color: #B20113
}

.answerInput{
  position: relative;
  display: flex;
  flex-direction : column;
}

.answerInput .formInput{
  width: unset
}

.answerFormat,
.choices_holder{
  display: flex;
  gap: 12px;
}

.highlightBlocker{
  position: absolute;
  height: 100%;
  width: 100%;
}

.empty{
  padding: 4px;
  font-family: var(--Figtree);
  text-align: center;
}

.a_f{
  display: flex;
  font-family: var(--Inconsolata);
  font-weight: 500;
  font-size: 14px;
  background: var(--dark-shade);
  width: max-content;
  padding: 4px 12px;
  border-radius: 12px;
  color: white;
  margin: 4px;
  gap: 12px;
}

.disable{
  opacity: 0.7;
  pointer-events: none;
}

.vertical{
  flex-direction: column;
  align-items: baseline;
}

.vertical .configContent,
.marking_scheme,
#choices_answer_config_holder{
  width: 100%;
}

.marking_scheme_holder{
  padding: 12px;
}

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

.marksInputHolder{
  display: flex;
  width: 50px;
  text-align: center;
}

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

.m_c_award{
  display: flex;
  gap: 12px;
  width: 100%;
}

.award_condition_holder{
  padding: 0px 8px;
  font-family: var(--Inconsolata);
  font-weight: 1000;
  border-radius: 4px;
  color: white;
  display: flex;
  gap: 4px;
  align-items: center;
}

.award_value_holder,
.choices_value{
  display: flex;
  width: 100%;
}

.award_condition{
  background: var(--midder-shade);
  padding: 8px;
}

.condition_selected{
  background: var(--dark-shade);
}
.q_m_c_holder{
  padding: 8px;
}

.qmc_title{
  font-family: var(--Jost);
  font-weight: 500;
  font-size: 18px;
}

.qmc_content_holder{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--Figtree);
}

.qmc{
  display: flex;
  padding: 8px;
  gap: 12px;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--mid-shade);
  border-radius: 4px
}
.question_marking_scheme{
  background: hsl(9, 33%, 95%);
}

.qmc_awards{
  text-align: right;
  font-family: var(--Figtree);
  padding: 4px 8px;
  width: max-content;
  background: var(--dark-shade);
  margin: 4px;
  border-radius: 4px;
  color: white;
}

.qmc_award_total{
  font-family: var(--Inconsolata);
  font-size: 20px;
  font-weight: 700;
}

.point_choices{
  font-family: var(--Inconsolata);
  font-weight: 700;
  color: var(--dark-shade);
}

.choices_config{
  margin: 12px;
}

.choices{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choices_config{
  margin: 8px 0px;
}

.add_choices_holder{
  padding: 8px;
  background: var(--dark-shade);
  border-radius: 4px;
  text-align: center;
  font-family: var(--Figtree);
  font-weight: 600;
  color: white;
}

#choices_answer_config_holder{
  background: white;
  border-radius: 8px;
  border: 1px solid var(--lighter-shade);
}

.choices_config{
  margin: 12px;
}

.qmc_button_holder,
.qmc_awards_holder,
.print_button_icon{
    display: flex;
}

.qmc_button_holder{
  display: flex;
  align-items: center;
  padding: 4px 12px;
  margin: 4px;
  background: var(--dark-shade);
  border-radius: 4px;
  color: white;
  font-family: var(--Figtree);
}

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

.keywords{
  display: flex;
  padding: 4px;
  flex-wrap: wrap;
}

.keyword{
  padding: 4px;
  font-family: var(--Figtree);
  background: var(--light-shade);
  border: 2px solid var(--maxxer-shade);
  border-radius: 4px;
  margin: 4px;
  color: var(--dark-shade);
  font-weight: 600;
}

.keyword_select{
  background: var(--dark-shade);
  border: 2px solid var(--lighter-shade);
  color: var(--light-shade);

}

.answersHolder{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alertFormInput{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}

.alertInput{
  display: flex;
  width: 60px;
}

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

.alertFormInputHolder{
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alertText{
  font-family: var(--Figtree)
}

.pdf-mode *{
  color: black;
  background-color: white;
  font-size: 14px;
  border: none;
  padding: 4px!important;
  margin: 0px 4px!important;
  line-height: 1!important;
  gap:8px!important;
}

.pdf-mode .statStat{
  font-weight: 800;
  font-size: 18px!important;
}

.print_button_holder{
  font-family: var(--Jost);
  display: flex;
  align-items: center;
}

.print_button{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--light-shade);
  color: var(--darker-shade);
  border-radius: 4px;
  margin: 0px 4px;
}

.testerCommentHolder{
  padding: 4px;
  margin: 4px 0px;
  background: white;
  border-radius: 4px;
}

.commentHolder{
  display: flex;
  padding: 4px;
}

.cButton{
  padding: 8px;
  text-align: center;
  font-weight: 500;
  font-family: var(--Figtree);
  margin: 4px;
  background: var(--dark-shade);
  color: var(--light-shade);
  font-size: 18px;
  border-radius: 4px;
}

/* From Uiverse.io by andrew-demchenk0 */ 
.container {
  --input-focus: var(--maxxer-shade);
  --input-out-of-focus: var(--lighter-shade);
  --bg-color: #fff;
  --bg-color-alt: ;
  --main-color: var(--midder-shade);
  position: relative;
  cursor: pointer;
}

.container input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  width: 15px;
  height: 15px;
  position: relative;
  top: 0;
  left: 0;
  border: 2px solid var(--main-color);
  box-shadow: 2px 2px var(--main-color);
  background-color: var(--input-out-of-focus);
  transition: all 0.3s;
  padding: 2px;
}

.container input:checked ~ .checkmark {
  background-color: var(--input-focus);
}

.checkmark:after {
  content: "";
  width: 5px;
  height: 10px;
  position: absolute;
  top: 1px;
  left: 7px;
  display: none;
  border: solid var(--bg-color);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.container input:checked ~ .checkmark:after {
  display: block;
}


.multiChoiceAnswer{
  display: flex;
  padding: 4px;
  gap: 12px;
  font-family: var(--Jost);
}

.mc_content{
  opacity: 0.8;
}

.multiChoiceHolder{
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.prov_answer{
  padding: 4px;
  background: var(--mid-shade);
  border-radius: 4px;
  margin: 4px;
}

.prov_testee{
  font-family: var(--Jost);
  padding: 4px;
}

.prov_content{
  font-family: var(--Inconsolata);
  background: white;
  padding: 4px;
  border-radius: 4px;
}

.formExtra{
  text-align: center;
  padding: 4px;
  font-family: var(--Figtree);
}

.extraLink{
  opacity: 0.7;
  text-decoration: underline;
  cursor: pointer;
}




@media (max-width: 768px) {
  .introTextHolder {
    font-size: 14px;
  }

  .headerText {
    font-size: 24px;
  }

  .form {
    width: 100%;
  }

  .exams {
    grid-template-columns: 1fr 1fr;
  }

  .actionButtonHolder .introButton,
  #testDisplay .introButton {
    padding: 4px 8px;
    font-size: 12px;
  }

  .examsHolder {
    width: 100%;
  }

  .searchIconHolder svg {
    width: 24px !important;
    height: 24px !important
  }

  .examName {
    font-size: 16px;
  }

  .examTime {
    font-size: 10px
  }

  .testLogo {
    width: 24px
  }

  #examHolder {
    padding: 12px;
  }

  .examDetails {
    padding: 4px;
  }

  .alertContainer,
  .keyHolder {
    width: 100%;
  }

  .answered_question{
    font-size: 18px;
  }
}