* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto, "Sans-Serif";
}

html {
  overflow-x: hidden;
  font-size: 10px;
  color: #262626;
  scroll-behavior: smooth;
}

body {
  position: relative;
  height: fit-content;
  min-height: 100vh;
  background-color: #2F68CD;
}

a {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: #262626;
}

.display {
  opacity: 0;
  display: inline-block;
  -webkit-animation: fadeIn 0.4s 1s ease-in-out;
  -moz-animation: fadeIn 0.4s 1s ease-in-out;
  -o-animation: fadeIn 0.4s 1s ease-in-out;
  animation: fadeIn 0.4s 1s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.rubber_band {
  display: inline-block;
  margin-right: 5px;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

.rubber_band:hover {
  color: #FFD700;
  -webkit-animation: rubberBand 1s ease-in-out;
  -moz-animation: rubberBand 1s ease-in-out;
  -o-animation: rubberBand 1s ease-in-out;
  animation: rubberBand 1s ease-in-out;
}

.display._1 {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.display._2 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.display._3 {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.display._4 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.display._5 {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.display._6 {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.display._7 {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  -o-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.display._8 {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.display._9 {
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.display._10 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.display._11 {
  -webkit-animation-delay: 1.1s;
  -moz-animation-delay: 1.1s;
  -o-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.display._12 {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.display._13 {
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
  -o-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

.display._14 {
  -webkit-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
  -o-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.display._15 {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.display._16 {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.display._17 {
  -webkit-animation-delay: 1.7s;
  -moz-animation-delay: 1.7s;
  -o-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

.display._18 {
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  -o-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

#loading {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgb(89, 134, 215);
  transition: 1s ease-in-out;
}

#loading p {
  font-size: 20px;
  color: white;
  font-weight: bold;
  margin-bottom: 5px;
}

.bar-container {
  width: 120px;
  height: 5px;
  border-radius: 3px;
  overflow-x: hidden;
}

.slide {
  position: relative;
  width: 240px;
  height: 5px;
  background-color: transparent;
  left: -50%;
}

.bar {
  position: absolute;
  width: 60px;
  height: 5px;
  border-radius: 3px;
  background-color: white;
  animation: move-right;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.83, 0.2, 0.2, 0.83);
}

@keyframes move-right {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
@keyframes hide {
  0% {
    opacity: 100%;
    visibility: visible;
  }
  100% {
    opacity: 0%;
    visibility: hidden;
  }
}
.hide-loading {
  -webkit-animation: hide;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: hide;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -moz-animation-fill-mode: forwards;
  -o-animation: hide;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 1;
  -o-animation-fill-mode: forwards;
  animation: hide;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#root .btn {
  cursor: pointer;
  border: none;
  outline: none;
  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0px 0px 1px;
  background-color: white;
  padding: 8px;
  font-size: 1.2rem;
  text-align: center;
}
#root .btn-primary {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  box-shadow: none;
  font-weight: 400;
}
#root .btn-primary-blue {
  background-color: rgba(100, 149, 237, 0.2);
  color: #2F68CD;
  box-shadow: none;
  font-weight: 700;
}
#root .btn-primary-yellow {
  background-color: rgba(255, 215, 0, 0.5);
  color: #907B00;
  box-shadow: none;
  font-weight: 700;
}
#root .btn-primary-red {
  background-color: rgba(255, 61, 61, 0.2);
  color: #a31e1e;
  box-shadow: none;
  font-weight: 500;
}
#root .btn-no-background {
  color: white;
  border: 1px solid white;
  background-color: transparent;
}
#root .btn-no-background:hover {
  color: rgba(89, 134, 215, 0.9);
  background-color: white;
}
#root .btn-no-background--active {
  color: rgba(89, 134, 215, 0.9);
  background-color: white;
}
#root .btn-primary-black {
  color: white;
  border: 1px solid #262626;
  background-color: #262626;
}
#root .btn-primary-black:hover {
  color: #262626;
  background-color: white;
}
#root .btn-rounded-5px {
  border-radius: 5px;
}
#root .btn-question-index {
  height: 7px;
  margin: 0 1%;
  border-radius: 3px;
  background-color: transparent;
  padding: 0;
  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0px 0px 1px;
}
#root .btn-question-index:first-child {
  margin-left: 0;
}
#root .btn-question-index:last-child {
  margin-right: 0;
}
#root .btn-dot {
  width: 8px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  padding: 0;
}
#root .btn-choice {
  width: 100%;
  max-width: 335px;
  height: 54px;
  margin: 7.5px 0;
}
#root .btn-choice:first-child {
  margin-top: 0;
}
#root .btn-choice:last-child {
  margin-bottom: 0;
}
#root .btn-transparent {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
  font-weight: 500;
}
#root .btn-disabled {
  pointer-events: none !important;
  cursor: not-allowed !important;
}
#root .ft-sz-10 {
  font-size: 1rem;
}
#root .ft-sz-11 {
  font-size: 1rem;
}
#root .ft-sz-12 {
  font-size: 1.2rem;
}
#root .ft-sz-13 {
  font-size: 1.3rem;
}
#root .ft-sz-14 {
  font-size: 1.4rem;
}
#root .ft-sz-15 {
  font-size: 1.5rem;
}
#root .ft-sz-16 {
  font-size: 1.6rem;
}
#root .ft-sz-17 {
  font-size: 1.7rem;
}
#root .ft-sz-18 {
  font-size: 1.8rem;
}
#root .ft-sz-20 {
  font-size: 2rem;
}
#root .fw-thin {
  font-weight: 100;
}
#root .fw-light {
  font-weight: 300;
}
#root .fw-regular {
  font-weight: 400;
}
#root .fw-semi-bold {
  font-weight: 500;
}
#root .fw-bold {
  font-weight: 700;
}
#root .fw-black {
  font-weight: 900;
}
#root .tc-quiz-blue {
  color: #6495ED;
}
#root .tc-quiz-darker-blue {
  color: #2F68CD;
}
#root .tc-quiz-green {
  color: #2db438;
}
#root .tc-quiz-red {
  color: #e13d3d;
}
#root .tc-quiz-darker-red {
  color: #a31e1e;
}
#root .tc-quiz-yellow {
  color: #FFD700;
}
#root .tc-white {
  color: white;
}
#root .tc-quiz-darker-yellow {
  color: #907B00;
}
#root .tc-gray {
  color: #808080;
}
#root .tc-darker-white {
  color: #E1E1E1;
}
#root .dot {
  display: inline-block;
  border-radius: 50%;
}
#root .dot-gray {
  background-color: #808080;
}
#root .dot-5px {
  width: 5px;
  height: 5px;
}
#root hr {
  height: 0.1px;
  margin: 20px auto;
  background-color: rgb(255, 255, 255);
  border: none;
}
#root .pd-4-6 {
  padding: 4px 6px;
}
#root .pd-8-12 {
  padding: 8px 12px;
}
#root .mg-lt-7 {
  margin-left: 7px;
}
#root .mg-rt-7 {
  margin-right: 7px;
}
#root .mg-lt-rt-7 {
  margin: 0 7px;
}
#root .mg-tp-3 {
  margin-top: 3px;
}
#root .mg-bt-3 {
  margin-bottom: 3px;
}
#root .mg-tp-6 {
  margin-top: 6px;
}
#root .mg-bt-6 {
  margin-bottom: 6px;
}
#root .mg-tp-10 {
  margin-top: 10px;
}
#root .mg-bt-10 {
  margin-bottom: 10px;
}
#root .correct-answer {
  background-color: #e6f4ea;
  border-radius: 5px;
}
#root .incorrect-answer {
  background-color: #f4e6e6;
  border-radius: 5px;
}

/*# sourceMappingURL=setting.css.map */