.show-quiz--button{
    display:inline-block;
    font-size:.875rem;
    line-height:1;
    position:fixed; bottom:1rem;
    left:0;background:var(--color-base);
    color:var(--color-bg-accent);
    border-radius:0 0 .5rem .5rem;
    padding:.5rem 1rem; z-index:30;
    transform-origin: 0 0;
    transform: rotate(-90deg);
    overflow:hidden;
}
.show-quiz--button:after{
    content:'';
    display:block;
    animation: shine .5s ease-in-out infinite;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: .4;
    background:linear-gradient( 45deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
    animation: shineQuizButton 2s ease-in-out infinite;
}

@keyframes shineQuizButton {
    0% {
      left: -100%;
      transition-property: left;
    }
    100% {
      left: 100%;
      transition-property: left;
    }
  }
  
.quizzes{padding-top:2rem; max-width: 60rem; margin:auto; display: flex; min-height: calc(100vh - 2rem); justify-content: center; align-items: center;}
.quizzes__row{margin:0 -.5rem;}
.quizzes__row>*{padding:0 .5rem;}
.quizzes-item{max-width:20rem; margin:auto; display:block; position:relative;}
.quizzes-item__title{text-align: center; font-size:1.25rem; line-height:1.2; font-weight: bold;}
.quizzes-item__image{height: 10rem; object-fit: cover;}

.quiz{max-width: 40rem;margin:auto;}
.quiz-top{ color:var(--color-bg-accent-light); margin-bottom:1rem; }
.quiz-top h1{margin:0; font-size:1rem!important;}

.quiz-item__header{padding-bottom:1rem; }
.quiz-item__title{margin:0; margin-bottom:1rem; font-size:1.5rem; line-height:1; }
.quiz-item__steps{display:block;  font-size:.75rem; line-height:1.2;}
.quiz-item__tag{font-size:.75rem; border-radius: 2px; border:1px solid var(--color-border); padding:.25rem .5rem .25rem; z-index: 2; background:var(--color-bg-gray)}
.quiz-item__tag:before{content:''; display:inline-block; width:.25rem; height:.5rem; border-right:1px solid currentColor; position:relative; top:-1px; border-bottom:1px solid currentColor; margin-right:.5rem; transform: rotate(45deg); }
.quiz-item__header, .quiz-item__inner,  .quiz-list li{transition: opacity .5s ease,  transform .5s ease; opacity: 1;}
.quiz-item__inner{transition-delay: .1s; overflow:hidden; overflow-y:auto; position: relative;}
.quiz-item--hide .quiz-item__header, .quiz-item--hide .quiz-item__inner{transform: translateX(5rem); opacity: 0;}
.quiz-item--hide .quiz-list li{transform: translateX(3rem); opacity: 0;}

.quiz-list{padding:0; list-style: none; margin:1rem 0;}
.quiz-item__desc{margin-bottom:1rem;}

.quiz-list{ display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; grid-gap: 1rem;}
.quiz-list--multiple {display:grid; grid-auto-flow:column;  grid-gap:1rem; padding-bottom:1rem; overflow:auto;}
.quiz-list--media li{width:13rem;}

.quiz-progress{background:var(--color-gray-opacity); height:.5rem; width:100%; margin:.5rem 0 1rem; border-radius:1rem;}
.quiz-progress__bar{display:block; width:0; height:100%; background:linear-gradient(to left, #a6b553 0%, var(--color-brand) 100%); transition: width 1s ease; position:relative; border-radius:1rem;}
.quiz-progress__bar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(-45deg, rgba(255,255,255,.15) 25%, transparent 0, transparent 50%, rgba(255,255,255,.15) 0, rgba(255,255,255,.15) 75%, transparent 0, transparent);
    z-index: 1;
    background-size: 1.5rem 1.5rem;
    animation: move 1.25s linear infinite;
    border-radius: 1rem;
    overflow: hidden
}

.quiz-field{display:flex; align-items:center; position:relative; padding:.75rem; border-radius:.375rem; margin:0; border:1px solid var(--color-gray); cursor:pointer;}
.quiz-field__value{font-size:1rem; line-height:1.2;}
.quiz-field--toggle input{opacity: 0; position:absolute;}
.quiz-field:hover, .quiz-field:focus-within, .quiz-field--checked{border-color:var(--color-bg-accent); }
.quiz-field--checked{box-shadow: 0 .25rem 1.5rem -.25rem rgb(255,195,106, .5);}

.quiz-field__switcher{display:inline-block; border-radius:1rem; flex: 0 0 auto; width:1.25rem; height:1.25rem; margin-right:.5rem; background:var(--color-gray); position:relative; }
.quiz-field__switcher:after{content:''; display:block; width:30%; height:60%; border-bottom:2px solid var(--color-white); border-right:2px solid var(--color-white); position:absolute; top:-15%; left:0; right:0; bottom:0; margin:auto; transform:rotate(45deg) scale(2); opacity: 0; transition: opacity .25s ease, transform .25s ease;}
.quiz-field__input[type=checkbox] + .quiz-field__switcher{border-radius:4px;}
.quiz-field--toggle input:checked + .quiz-field__switcher{background:var(--color-brand);}
.quiz-field--toggle input:checked + .quiz-field__switcher:after{transform:rotate(45deg) scale(1); opacity: 1;}

.quiz-field--media{flex-wrap:wrap; padding:0; }
.quiz-field--media .quiz-field__switcher{position:relative; top:-1.25rem; margin:auto; margin-bottom:-2rem; z-index: 1; box-sizing:content-box; border-radius:8px!important; border:4px solid var(--color-white)}
.quiz-field--media .quiz-field__value {padding:1rem; min-height: 2rem; width:100%; text-align: center;}

.quiz-field__media{width:100%; flex-basis:100%; padding-top:100%; display:block; margin-bottom:0; border-radius:6px 6px 0 0; overflow:hidden; position:relative; background:var(--color-bg-gray); }
.quiz-field__media img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform 1s ease;}
.quiz-field__media:hover img{transform:scale(1.1)}

.quiz-input{display:block; padding:1rem; width:100%; background:var(--color-gray-opacity); border:1px solid var(--color-bg-gray)}

.quiz-number{padding-bottom:1rem;}
.quiz-number-slider{display:block; margin:-.25rem .75rem 0; height:.5rem; background-color: var(--color-bg-grayer); border-radius: 1rem;}
.quiz-number__number{font-weight: bold; font-size:2rem;}
.quiz-number__info{display:flex; justify-content: space-between;}

.modal-quiz .modal-body{min-height:100vh;}

.quiz-footer{background:var(--color-bg); width:100%; position:absolute; bottom:0; left:0; display:flex; align-items:center; padding:1rem .5rem;}
.quiz-footer>div{padding:0 .5rem;}
.quiz-footer__buttons{ width:55%; padding:0 1rem; text-align:right; display:flex; justify-content:space-between;}
.quiz-footer__progress{ width:45%; padding:0 1rem;}


.quiz__btn:disabled, .quiz__btn:disabled:hover {cursor:not-allowed; opacity:.7; }
.quiz__btn{border-radius:4px; padding:.75rem; line-height:1.2; display:inline-flex; align-items: center; justify-content: center;}
.quiz__btn:not(:disabled):hover{background:var(--color-brand-hover);  color:var(--color-white);}
.quiz-prev{ border:1px solid var(--color-brand); background:transparent; color:var(--color-brand); padding:.75rem 1rem;  }
.quiz-next, .quiz-next:disabled, .quiz-next:disabled:hover{min-width:60%; background:var(--color-brand);  color:var(--color-white);}
.quiz-next:hover{color:var(--color-white)}

.quiz{overflow:hidden;}
.quiz>div{ transition:all .5s ease;}
.quiz--loading>div{opacity:0;  transform: scale(.8) translateX(2%);}

.modal-quiz form fieldset{border:0; padding:0; margin:0;}
.modal-quiz form{display:block; max-width:22rem; margin:1rem auto;}
.modal-quiz form .btn[type="submit"]{background:var(--color-brand); width:100%; margin-top:0; padding:1rem; border-radius:6px; border:none; font-weight:bold;}

.modal-quiz .field-connection>div {display:flex; justify-content: center; position:relative;}
.modal-quiz .field-connection label {display:block; min-width:0; text-align: center; padding:.5rem;  cursor:pointer; border-radius: 4px; border:1px solid transparent; }
.modal-quiz .field-connection input {position:absolute; opacity: 0; z-index:-1;}
.modal-quiz .field-connection label:before, .quiz .field-connection label:after {display:none;}
.modal-quiz .field-connection svg {display:block; width:2rem; height:2rem; margin:auto; filter:grayscale(100%); opacity: .5; transition:opacity .25s ease, grayscale .25s ease}
.modal-quiz .field-connection label .icon-label{font-size:.75rem; display:block; margin:.25rem 0 0; transition:font-weight .25s ease;}
.modal-quiz .field-connection label .icon-label::after {display: block; content: attr(title); font-weight: bold; height: 1px; color: transparent; overflow: hidden; visibility: hidden;}
.modal-quiz .field-connection input:checked + label svg{filter:grayscale(0); opacity: 1;}
.modal-quiz .field-connection input:checked + label .icon-label{font-weight:bold;}
.modal-quiz .field-connection input:focus-within + label {border-color:var(--color-brand);}
.field-connection .hint{font-size:.75rem;}

.quiz-form__header{text-align: center;}
.quiz-form__title {font-size: 2rem; line-height: 1;  margin: 0.5rem 0;}
.quiz-form__label {display: inline-block; background: var(--color-bg-accent); padding: 0.5rem 1rem; border-radius: 0.25rem; font-size: 1rem; line-height: 1;}

@keyframes move {
    from { background-position: 0 0 }
    to {background-position: 1.5rem 1.5rem}
}

@media screen and (min-width:47em) {
    .quiz-item__inner{height:22rem;}
    .quiz-item__header{margin:0;}
    .quiz-item__title{font-size:2rem;}
    .quiz-list{ display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; grid-gap: 1rem;}
    .quizzes-item__image{height: auto; object-fit: cover;}

    .quiz-footer{padding-top:2rem;  margin:0 -.5rem; position:relative;}
    .quiz-footer__buttons{ width:40%; padding:0 1rem; text-align:right;}
    .quiz-footer__progress{ width:60%; padding:0 1rem;}
    
    .quiz-field:not(.quiz-field--media){padding:1rem;}

    .modal-quiz .modal-body, .quizzes{min-height:80vh;}
}