:root {
  --primary-color: hsl(196, 78%, 61%);
  --secondary-color: hsl(217, 15%, 83%);
  --success-color: hsl(165, 58%, 55%);
  --info-color: hsl(214, 79%, 65%);
  --warning-color: hsl(43, 100%, 66%);
  --danger-color: hsl(354, 81%, 63%);
  --primary-color-darker: hsl(196, 68%, 54%);
  --secondary-color-darker: hsl(215, 13%, 70%);
  --success-color-darker: hsl(165, 55%, 48%);
  --info-color-darker: hsl(214, 68%, 58%);
  --warning-color-darker: hsl(39, 97%, 62%);
  --danger-color-darker: hsl(354, 67%, 56%);
  --primary-color-lighter: hsl(196, 78%, 81%);
  --secondary-color-lighter: hsl(214, 16%, 92%);
  --success-color-lighter: hsl(165, 58%, 75%);
  --info-color-lighter: hsl(214, 79%, 85%);
  --warning-color-lighter: hsl(43, 100%, 86%);
  --danger-color-lighter: hsl(354, 81%, 83%);
  --secondary-color-darkest: hsl(215, 11%, 30%);
  --secondary-color-lightest: hsl(220, 1%, 98%);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86)
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}
@-webkit-keyframes scale-in {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
@keyframes scale-in {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
@-webkit-keyframes scale-in-smaller {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(.5)
  }
}
@keyframes scale-in-smaller {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(.5)
  }
}
.qmn_quiz_radio[type=checkbox],
.form-check-input[type=checkbox] {
  --checkbox-width: 1.125rem;
  --checkbox-bg: white;
  --checkbox-radius: 4px;
  --checkbox-border-color: var(--secondary-color);
  --checkbox-hover-border-color: var(--secondary-color-darker);
  --checkbox-checked-bg: var(--primary-color);
  --checkbox-disabled-bg: var(--secondary-color-lighter);
  --checkbox-disabled-checked-bg: var(--secondary-color-darker);
  width: var(--checkbox-width);
  height: var(--checkbox-width);
  position: relative;
  background: var(--checkbox-checked-bg);
  border: none;
  border-radius: var(--checkbox-radius);
  transition: .3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  cursor: pointer
}

.qmn_quiz_radio[type=checkbox] ~ .qsm-input-label,
.form-check-input[type=checkbox] ~ .form-check-label {
  margin-left: .625rem;
  cursor: pointer;
  transition: .3s
}

.qmn_quiz_radio[type=checkbox]::before ,
.form-check-input[type=checkbox]::before {
  position: absolute;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' fill='none' stroke-width='2px' stroke='white' stroke-linecap='round' viewBox='0 0 21 21'%3E%3Cpolyline points='5 10.75 8.5 14.25 16 6'%3E%3C/polyline%3E%3C/svg%3E");
  transform: scale(0)
}

.qmn_quiz_radio[type=checkbox]::after,
.form-check-input[type=checkbox]::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--checkbox-bg);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--checkbox-border-color);
  transition: .2s
}
.qmn_quiz_radio[type=checkbox]:hover,
.form-check-input[type=checkbox]:hover {
  --checkbox-border-color: var(--checkbox-hover-border-color)
}


.qmn_quiz_radio[type=checkbox]:checked::before ,
.form-check-input[type=checkbox]:checked::before {
  -webkit-animation: scale-in .1s .2s linear forwards;
  animation: scale-in .1s .2s linear forwards
}


.qmn_quiz_radio[type=checkbox]:checked::after,
.form-check-input[type=checkbox]:checked::after {
  transform: scale(0)
}

.qmn_quiz_radio[type=checkbox]:disabled,
.form-check-input[type=checkbox]:disabled {
  --checkbox-bg: var(--checkbox-disabled-bg);
  --checkbox-checked-bg: var(--checkbox-disabled-checked-bg);
  cursor: not-allowed
}



.qmn_quiz_radio[type=checkbox]:disabled ~ .qsm-input-label,
.form-check-input[type=checkbox]:disabled ~ .form-check-label {
  cursor: not-allowed
}

.qmn_quiz_radio[type=checkbox]:indeterminate::after,
.form-check-input[type=checkbox]:indeterminate::after {
  transform: scale(.5)
}

.qmn_quiz_radio[type=radio],
.form-check-input[type=radio] {
  --radio-width: 1.125rem;
  --radio-bg: white;
  --radio-radius: 50%;
  --radio-border-color: var(--secondary-color);
  --radio-hover-border-color: var(--secondary-color-darker);
  --radio-checked-bg: var(--primary-color);
  --radio-disabled-bg: var(--secondary-color-lighter);
  --radio-disabled-checked-bg: var(--secondary-color-darker);
  width: var(--radio-width);
  height: var(--radio-width);
  position: relative;
  background: var(--radio-checked-bg);
  border: none;
  border-radius: var(--radio-radius);
  transition: .3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  cursor: pointer
}


.qmn_quiz_radio[type=radio] ~ .qsm-input-label,
.form-check-input[type=radio] ~ .form-check-label {
  margin-left: .625rem;
  cursor: pointer;
  transition: .3s
}



.qmn_quiz_radio[type=radio]::after, .qmn_quiz_radio[type=radio]::before,
.form-check-input[type=radio]::after, .form-check-input[type=radio]::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--radio-bg);
  border-radius: inherit
}
.qmn_quiz_radio[type=radio]::before,
.form-check-input[type=radio]::before {
  transform: scale(0)
}
.qmn_quiz_radio[type=radio]::after,
.form-check-input[type=radio]::after {
  box-shadow: inset 0 0 0 1px var(--radio-border-color);
  transition: .2s
}
.qmn_quiz_radio[type=radio]::hover,
.form-check-input[type=radio]:hover {
  --radio-border-color: var(--radio-hover-border-color)
}

.qmn_quiz_radio[type=radio]:checked::before,
.form-check-input[type=radio]:checked::before {
  -webkit-animation: scale-in-smaller .1s .2s linear forwards;
  animation: scale-in-smaller .1s .2s linear forwards
}
.qmn_quiz_radio[type=radio]:checked::after,
.form-check-input[type=radio]:checked::after {
  transform: scale(0)
}
.qmn_quiz_radio[type=radio]:disabled,
.form-check-input[type=radio]:disabled {
  --radio-bg: var(--radio-disabled-bg);
  --radio-checked-bg: var(--radio-disabled-checked-bg);
  cursor: not-allowed
}

.qmn_quiz_radio[type=radio]:disabled ~ .qsm-input-label,
.form-check-input[type=radio]:disabled ~ .form-check-label {
  cursor: not-allowed
}
.form-switch {
  --switch-width: 2.5625rem;
  --switch-height: 1.3125rem;
  --switch-bg: white;
  --switch-radius: 12px;
  --switch-ball-width: 0.9375rem;
  --switch-ball-bg: var(--secondary-color);
  --switch-checked-ball-bg: white;
  --switch-border-color: var(--secondary-color);
  --switch-hover-border-color: var(--secondary-color-darker);
  --switch-checked-bg: var(--primary-color);
  --switch-disabled-bg: var(--secondary-color-lighter);
  --switch-disabled-checked-bg: var(--secondary-color-darker);
  position: relative;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border: 1px solid var(--switch-border-color);
  border-radius: var(--switch-radius);
  transition: .3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  cursor: pointer
}
.form-switch::before {
  width: var(--switch-ball-width);
  height: var(--switch-ball-width);
  border-radius: 50%;
  position: absolute;
  top: .125rem;
  left: .125rem;
  content: "";
  background: var(--switch-ball-bg);
  transition: .3s
}
.form-switch ~ .form-check-label {
  margin-left: .625rem;
  cursor: pointer;
  transition: .3s
}
.form-switch:hover {
  --switch-border-color: var(--switch-hover-border-color)
}
.form-switch:checked {
  --switch-bg: var(--switch-checked-bg);
  --switch-border-color: var(--switch-checked-bg)
}
.form-switch:checked::before {
  --switch-ball-bg: var(--switch-checked-ball-bg);
  transform: translateX(1.25rem)
}
.form-switch:disabled {
  --switch-bg: var(--switch-disabled-bg);
  --switch-checked-bg: var(--switch-disabled-checked-bg);
  cursor: not-allowed
}
.form-switch:disabled ~ .form-check-label {
  cursor: not-allowed
}
.progress-bar {
  --progress-height: 0.375rem;
  --progress-radius: 1.875rem;
  --progress-bar-color: var(--secondary-color-lighter);
  --progress-color: var(--primary-color);
  height: var(--progress-height);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}