/* Note: If need Disable Decimal-value functionilty open function.scss file */
/* mini laptop resolution 1349 X 662 and 1246 X 681 and 1218 X 672 */
/* Mozila Firefox */
.quiz-component {
  background-color: #081d4d;
  background-image: url("../../../assets/images/quiz_star_left.png"), url("../../../assets/images/quiz_star_right.png");
  background-position: left 15%, right 98%;
  background-repeat: no-repeat;
}
.quiz-component .heading {
  font-size: 44px;
  font-style: normal;
  font-weight: 500;
}
@media (min-width: 768px) {
  .quiz-component .heading.mb {
    margin-bottom: 3.38rem;
  }
}
.quiz-component .description {
  margin-bottom: 2rem;
}
.quiz-component input[type=radio]:hover {
  cursor: pointer;
}
.quiz-component .page-indicators {
  display: flex;
  justify-content: center;
  gap: 2px;
  flex-wrap: nowrap;
  flex: 1 0 auto;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .quiz-component .page-indicators {
    margin-bottom: 3rem;
  }
}
.quiz-component .page-indicators .indicator {
  height: 3px;
  width: 100%;
  border-radius: 8px;
  background: rgba(95, 214, 255, 0.5);
}
.quiz-component .page-indicators .indicator.active {
  background: rgb(95, 214, 255);
}
@media (min-width: 768px) {
  .quiz-component .page-indicators .indicator {
    height: 5px;
  }
}
@media (min-width: 992px) {
  .quiz-component .page-indicators .indicator {
    height: 8px;
  }
}
.quiz-component .page-index {
  color: #5fd6ff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.quiz-item {
  display: none;
}
.quiz-item.active {
  display: block;
}
.quiz-item.active.size-small .quiz-item-answers {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: wrap;
  gap: 1rem;
}
.quiz-item.active.size-small .quiz-item-answers .quiz-item__qa-wrapper {
  width: calc(50% - 8px);
  padding: 0 1rem;
  margin: 0;
  height: 70px;
  vertical-align: middle;
  grid-template-columns: auto;
  justify-content: center;
  text-align: center;
}
@media (min-width: 768px) {
  .quiz-item.active.size-small .quiz-item-answers .quiz-item__qa-wrapper {
    grid-template-columns: 3rem auto;
    justify-content: start;
    text-align: left;
  }
}
@media (min-width: 992px) {
  .quiz-item.active.size-small .quiz-item-answers .quiz-item__qa-wrapper {
    width: calc(25% - 12px);
  }
}
.quiz-item.active.size-small .quiz-item-answers input[type=radio] {
  position: absolute;
  z-index: -1;
}
@media (min-width: 768px) {
  .quiz-item.active.size-small .quiz-item-answers input[type=radio] {
    position: relative;
    z-index: 1;
  }
}
.quiz-item.active.size-small .quiz-item-answers label {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
@media (min-width: 768px) {
  .quiz-item.active.size-small .quiz-item-answers label {
    font-size: 16px;
    line-height: 20px;
  }
}
.quiz-item.active.size-default label {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}
.quiz-item.active.size-large label {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
}
.quiz-item-question {
  color: #fff;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  padding-bottom: 0.88rem;
  text-align: center;
}
@media (min-width: 992px) {
  .quiz-item-question {
    font-size: 2rem;
    line-height: 40px;
  }
}
.quiz-item-question__wrapper {
  margin-bottom: 2rem;
}
.quiz-item-question-info {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
}
.quiz-item__qa-wrapper {
  margin-bottom: 0.75rem;
  display: grid;
  grid-template-columns: 3rem auto;
  gap: 0.5rem;
  align-items: center;
  border-radius: 1rem;
  padding: 1rem;
  background-color: rgba(95, 214, 255, 0.2);
  transition: 0.4s background-color;
}
@media (min-width: 768px) {
  .quiz-item__qa-wrapper {
    padding: 1rem 1rem 1rem 2rem;
  }
}
.quiz-item__qa-wrapper.checked {
  background-color: #081d4d;
}
.quiz-item__qa-wrapper label {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
}
.quiz-item__qa-wrapper label:hover {
  cursor: pointer;
}
.quiz-item__qa-wrapper input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  font: inherit;
  color: rgba(255, 255, 255, 0.3607843137);
  width: 2.38rem;
  height: 2.38rem;
  background-color: rgba(21, 101, 192, 0.5);
  border-color: #5fd6ff;
  border-radius: 50%;
  border-width: 2px;
  display: grid;
  place-content: center;
  position: relative;
}
.quiz-item__qa-wrapper input[type=radio]::before {
  content: "";
  width: 2.38rem;
  height: 2.38rem;
  transform: scale(1);
  transition: 300ms transform ease-in-out, 400ms background-color ease-in-out;
  background-color: rgba(21, 101, 192, 0.5);
  border: solid 2px #5fd6ff;
  border-radius: 50%;
}
.quiz-item__qa-wrapper input[type=radio]::after {
  content: "";
  width: 0px;
  height: 0px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 400ms all ease-in-out;
  background-color: #5fd6ff;
  position: absolute;
  top: 50%;
  left: 50%;
}
.quiz-item__qa-wrapper input[type=radio]:checked::after {
  background-color: rgb(255, 255, 255);
  width: 17px;
  height: 17px;
}
.quiz-item-result {
  color: #fff;
  font-style: italic;
}
.quiz-item-end {
  color: #fff;
}
.quiz-item-end-image {
  text-align: center;
}
.quiz-item-footer {
  position: relative;
  text-align: center;
  margin-top: 2rem;
}
.quiz-items {
  position: relative;
  background: linear-gradient(142deg, #0e67d3 12.62%, rgba(0, 76, 178, 0.4) 112.91%);
  border-radius: 10px;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
}
.quiz-items .quiz-progress {
  margin-bottom: 2rem;
}
.quiz-items .progress-bar-bg {
  background: rgba(255, 255, 255, 0.3);
  height: 10px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.quiz-items .progress-bar-fill {
  background: #fff;
  height: 100%;
  width: 0;
  transition: width 0.3s ease;
}
.quiz-next-button, .quiz-result-button, .quiz-last-button {
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border-radius: 100px;
  padding: 0.5rem 1rem;
  border: 1px solid #fff;
  margin-top: 0.5rem;
  transition: 400ms background-color ease-in-out, 400ms color ease-in-out;
}
.quiz-next-button:hover, .quiz-result-button:hover, .quiz-last-button:hover {
  background-color: #fff;
  color: #1565c0;
}
.quiz-next-button.disabled, .quiz-result-button.disabled, .quiz-last-button.disabled {
  pointer-events: none;
  opacity: 0.8;
  filter: grayscale(50%);
}
.quiz-component .quiz-item-answers {
  /* @include respond-above(sm) {
        display: grid;
        grid-template-columns: 1fr 1fr;
      } */
}
.quiz-form {
  border: none;
  box-shadow: none;
  max-width: 360px;
  width: 100%;
  margin: auto;
}
.quiz-form .mktoForm.d-none {
  display: none;
}
.quiz-form .mktoForm .mktoCheckboxList {
  padding-left: 0;
  width: 35px !important;
}
.quiz-form .mktoForm .mktoFormCol,
.quiz-form .mktoForm .mktoFieldWrap {
  float: none;
}
.quiz-form .mktoForm .inputFirstName,
.quiz-form .mktoForm .inputLastName {
  grid-column: span 2;
}
.quiz-form .mktoForm .mktoHtmlText span {
  color: white !important;
  font-size: 14px !important;
}
.quiz-form .mktoForm input.mktoField,
.quiz-form .mktoForm select.mktoField {
  color: white !important;
}
.quiz-form .mktoForm input.mktoField:-webkit-autofill, .quiz-form .mktoForm select.mktoField:-webkit-autofill {
  color: white !important;
}
.quiz-form .mktoForm input.mktoField:autofill, .quiz-form .mktoForm input.mktoField:-webkit-autofill,
.quiz-form .mktoForm select.mktoField:autofill,
.quiz-form .mktoForm select.mktoField:-webkit-autofill {
  color: white !important;
}
.quiz-form .mktoForm input.mktoField:-webkit-autofill:hover, .quiz-form .mktoForm input.mktoField:-webkit-autofill:focus, .quiz-form .mktoForm input.mktoField:-webkit-autofill:active, .quiz-form .mktoForm select.mktoField:-webkit-autofill:hover, .quiz-form .mktoForm select.mktoField:-webkit-autofill:focus, .quiz-form .mktoForm select.mktoField:-webkit-autofill:active {
  color: white !important;
}
.quiz-form .mktoForm input.mktoField:autofill:hover, .quiz-form .mktoForm input.mktoField:autofill:focus, .quiz-form .mktoForm input.mktoField:autofill:active, .quiz-form .mktoForm input.mktoField:-webkit-autofill:hover, .quiz-form .mktoForm input.mktoField:-webkit-autofill:focus, .quiz-form .mktoForm input.mktoField:-webkit-autofill:active,
.quiz-form .mktoForm select.mktoField:autofill:hover,
.quiz-form .mktoForm select.mktoField:autofill:focus,
.quiz-form .mktoForm select.mktoField:autofill:active,
.quiz-form .mktoForm select.mktoField:-webkit-autofill:hover,
.quiz-form .mktoForm select.mktoField:-webkit-autofill:focus,
.quiz-form .mktoForm select.mktoField:-webkit-autofill:active {
  color: white !important;
}
.quiz-form .mktoForm select.mktoField option {
  color: #1c1f2a !important;
}
.quiz-form .mktoForm .mktoFormRow:not(.customTextarea,
.customSelect,
.customCheckboxClass,
.no-label-text) .mktoFieldWrap .mktoLabel {
  color: white !important;
}
.quiz-form .mktoForm label {
  color: white !important;
  font-weight: 400 !important;
  width: auto !important;
}
.quiz-form .mktoForm .mktoFieldWrap.focused input[type=text],
.quiz-form .mktoForm .mktoFieldWrap.focused input[type=email],
.quiz-form .mktoForm .mktoFieldWrap.focused input[type=tel],
.quiz-form .mktoForm .mktoFieldWrap.focused select.mktoField,
.quiz-form .mktoForm .mktoFieldWrap.focused textarea.mktoField, .quiz-form .mktoForm .mktoFieldWrap.blurred input[type=text],
.quiz-form .mktoForm .mktoFieldWrap.blurred input[type=email],
.quiz-form .mktoForm .mktoFieldWrap.blurred input[type=tel],
.quiz-form .mktoForm .mktoFieldWrap.blurred select.mktoField,
.quiz-form .mktoForm .mktoFieldWrap.blurred textarea.mktoField {
  border: 1px solid #5fd6ff !important;
  background-color: #3498e0 !important;
}
.quiz-form .mktoForm input[type=text],
.quiz-form .mktoForm input[type=email],
.quiz-form .mktoForm input[type=tel],
.quiz-form .mktoForm select.mktoField,
.quiz-form .mktoForm textarea.mktoField {
  border: 1px solid #5fd6ff !important;
  background-color: #3498e0 !important;
}
.quiz-form .mktoForm .mktoButton {
  color: white !important;
  background-color: transparent !important;
  border: 1px solid white;
}
.quiz-form .mktoForm .mktoButton:hover {
  color: #081d4d !important;
  background-color: white !important;
}
.quiz-aa-cards.d-none {
  display: none;
}
.quiz-aa-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
  max-width: 960px;
  margin: 1rem auto 0;
}
@media (min-width: 768px) {
  .quiz-aa-cards {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
.quiz-aa-cards .card {
  opacity: 0;
  transform: translateX(20px);
  height: 100%;
}
.quiz-aa-cards .card.aos-animate {
  opacity: 1;
  transform: translateX(0);
}
.quiz-aa-cards .card-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0.63rem;
  border: 2px solid white;
  border-color: #fff;
  background-color: #fefefe;
  background-position-x: 0;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1), 0 -3px 6px rgba(180, 180, 180, 0.1);
  overflow: hidden;
  transition: background-color 400ms ease-in-out, border-color 400ms ease-in-out;
}
.quiz-aa-cards .card-wrap .eyebrow-text {
  flex: 1;
  transition: all 0.5s ease 0s;
  overflow: hidden;
}
.quiz-aa-cards .card-wrap .eyebrow-text span,
.quiz-aa-cards .card-wrap .eyebrow-text .h6 {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease 0s;
}
.quiz-aa-cards .card-wrap:hover {
  text-decoration: none;
  box-shadow: 0px 4px 12px rgba(8, 29, 77, 0.6);
  background-color: #081d4d;
  border-color: #303f6f;
}
.quiz-aa-cards .card-wrap:hover .eyebrow-text::after {
  opacity: 1;
}
.quiz-aa-cards .card-wrap:hover .eyebrow-text span {
  color: #96eaaa;
}
.quiz-aa-cards .card-wrap:hover .eyebrow-text .h6 {
  color: #fff;
}
.quiz-aa-cards .card .eyebrow-text {
  position: relative;
  padding: 1rem;
}
.quiz-aa-cards .card .eyebrow-text::after {
  content: "";
  position: absolute;
  right: -1.87rem;
  bottom: 0;
  width: 6rem;
  height: 4.5rem;
  background-image: url("../../../assets/images/latest-updates-shape.svg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.4s;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.quiz-aa-cards .card .eyebrow-text span {
  display: block;
  color: #1565c0;
  font-size: 0.69rem;
  font-weight: 400;
  margin-bottom: 0.38rem;
}
.quiz-aa-cards .card .eyebrow-text .h6 {
  margin-bottom: 0;
  color: #081d4d;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 18px;
}

.quiz-component button:hover {
  background: #fff;
  border-color: #fff;
  color: #1565c0;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  padding-left: 4px;
  top: -4px;
  font-style: normal;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip .tooltiptext {
  visibility: hidden;
  color: #fff;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  background-color: #081d4d;
  height: auto;
  width: -moz-max-content;
  width: max-content;
  max-width: 320px;
  left: 20px;
  padding: 8px;
  text-align: center;
  font-size: 14px;
}