/** Shopify CDN: Minification failed

Line 235:23 Unexpected "{"

**/
mat-quiz {
  display: block;
  margin: 30px 0;
}

@media screen and (min-width: 750px) {
  mat-quiz {
    margin: 50px 0;
  }
}

.mq-card {
  opacity: 0;
  visibility: hidden;
  height: 0;
  position: absolute;
  transition: opacity 0.25s;
}

.mq-card__fieldset {
  border: none;
  margin: 0 0 1rem 0;
  padding: 0;
}

.mq-card--active {
  opacity: 1;
  visibility: visible;
  height: initial;
  position: initial;
}

.mq-card__answer {  
  width: 100%;
  max-width: 100%;
}

@media screen and (min-width: 750px) {
  .mq-card__answer {  
    width: calc(50% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }  
}

.mq-card__answer-label {
  width: 100%;
  height: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;  
  font-size: 16px;
}

@media screen and (max-width: 749px) {
  .mq-card__answer-label {
    font-size: 14px;
  }
}

.mq-card__answer-input {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;  
}

.mq-card__answer-input:checked + .mq-card__answer-label {  
  color: var(--buttons-tertiary-background);
  background-color: var(--buttons-tertiary-text);
  border-color: var(--buttons-tertiary-border);
}

.mq-card__navigation {
  margin-top: 15px;
}

@media screen and (min-width: 750px) {
  .mq-card__navigation {
    margin-top: 30px;
  }
}

.mq-card__navigation--first .grid__item {
  width: 100%;
  max-width: 100%;
}

.mq-user-answers-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
  padding: 0;
  list-style-position: inside;
}

.mq-user-answers-list li {
  margin-bottom: 10px;
  padding: 1rem 3rem;
  box-shadow: 0px 5px 10px 1px rgb(0 0 0 / 20%);
  border-radius: 5px;
}

@media screen and (min-width: 750px) {
  .mq-user-answers-list {
    grid-template-columns: 1fr 1fr;
  }
}

.mq-results-loading__spinner {
  position: relative;
  display: inline-block;
}

@media screen and (max-width: 749px) {
  .mq-results-list .grid__item {
    width: 100%;
    max-width: 100%;
  }  
}

/* Mat Quiz Progress Bar */
.mq-progress-bar {
  display: flex;
  font-size: initial;
  list-style: none;
  justify-content: space-between;
  line-height: initial;
}

.mq-progress-bar__step:before,
.mq-progress-bar__step:after,
.mq-progress-bar__circle {
  transition: all 0.35s linear;
}

@media (prefers-reduced-motion: reduce) {
  .mq-progress-bar__step:before,
  .mq-progress-bar__step:after,
  .mq-progress-bar__circle {
    transition: none;
  }
}

.mq-progress-bar__step {
  position: relative;
  width: 100%;
  text-align: center;
}

.mq-progress-bar__step:before,
.mq-progress-bar__step:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0.125rem;
  width: 100%;
  background-color: #ddd;
  transform: translateY(-50%);
}

.mq-progress-bar__step:after {
  width: 0%;
  background-color: #000;
}

.mq-progress-bar__step:last-child:before,
.mq-progress-bar__step:last-child:after {
  display: none;
}

.mq-progress-bar__step.is-complete:not(.is-current):after {
  width: 100%;
}

.mq-progress-bar__step.is-current ~ .mq-progress-bar__step.is-complete:after {
  width: 0;
}

.mq-progress-bar__step.is-1-3:after {
  width: 33.33333%;
}

.mq-progress-bar__step.is-2-3:after {
  width: 66.66667%;
}

.mq-progress-bar__step.is-1-4:after {
  width: 25%;
}

.mq-progress-bar__step.is-2-4:after,
.mq-progress-bar__step.is-1-2:after {
  width: 50%;
}

.mq-progress-bar__step.is-3-4:after {
  width: 75%;
}

.mq-progress-bar__circle {
  display: inline-block;
  position: relative;
  height: 0.75rem;
  width: 0.75rem;
  border: 0.125rem solid transparent;
  border-radius: 50%;
  z-index: 1;
  background-color: #ddd;
}

.is-current .mq-progress-bar__circle {
  height: 1.125rem;
  width: 1.125rem;
  border-color: #000;
}

.is-complete .mq-progress-bar__circle {
  background-color: #000;
}

/* Mat Quiz Email Form */
.mq-email-form-wrapper {
  max-width: 47.8rem;
  padding: 30px 0;
  margin: 0 auto;
}

.mq-email-form input[type="checkbox"],
.mq-email-form button, {
  margin-top: 15px;
}