#quiz {
 
    display: -webkit-box;
 
    display: -ms-flexbox;
 
    display: flex; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap; 
    -webkit-box-align: center; 
        -ms-flex-align: center; 
            align-items: center;
  padding-bottom: 22px;
}
#quiz_form input::-webkit-input-placeholder {
    font-size: 16px;
    color: #31456a;
}
#quiz_form input::-moz-placeholder {
    font-size: 16px;
    color: #31456a;
}
#quiz_form input:-ms-input-placeholder {
    font-size: 16px;
    color: #31456a;
}
#quiz_form input::-ms-input-placeholder {
    font-size: 16px;
    color: #31456a;
}
#quiz_form input::placeholder {
    font-size: 16px;
    color: #31456a;
}
#quiz_form input {
    font-size: 16px;
    color: #31456a;
}
 .step-quest > * label:hover {
     cursor: pointer;
     background: #f0f4f9;
 }
.quiz-top-text p {
    font-size: 14px;
    position: relative;
    padding-left: 35px;
    color: black;
    max-width: 719px;
}
#to_step1:hover  {
    cursor: pointer;
}
.quiz-top-line img {
	margin-right: 10px;
}
.quiz-top-line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
    color: black;
    width: 100%;
}
#zakaz {
      padding: 0px!important;
 
           border-radius: 8px;
}
#quiz h2 {
    font-size: 25px;
    margin-bottom: 26px;
    margin-top: 20px;
}
#quiz h2 span {
    color: #fd0027;}
#quiz_form {width: 100%;padding: 20px;}

#step0, #step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #other_steps, #last_step {display: none;}
#step0 {display: block; text-align: center;}

#step1 h2, #step3 h2, #last_step h2 {margin-bottom: 50px !important;}

#other_steps {text-align: center;}

.step > small {text-align: center; margin-bottom: 30px; display: block;}

.quiz_buttons {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}

#quiz .btn {
        background: #71B221;
    -webkit-box-shadow: rgb(0 0 0 / 30%) 6px 6px 28px, rgb(195 200 205 / 4%) -5px -6px 16px;
            box-shadow: rgb(0 0 0 / 30%) 6px 6px 28px, rgb(195 200 205 / 4%) -5px -6px 16px;
    border-radius: 16px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.88);
    padding: 10px 20px;
    white-space: nowrap;
}
#quiz .btn:hover {
    color: rgba(255, 255, 255, 0.88);
    -webkit-box-shadow: rgb(0 0 0 / 60%) 4px 2px 18px inset, rgb(195 200 205 / 5%) -4px 0px 8px;
            box-shadow: rgb(0 0 0 / 60%) 4px 2px 18px inset, rgb(195 200 205 / 5%) -4px 0px 8px;
}

#quiz .btn.back_btn {background: #ccc;}
#quiz .btn.back_btn:hover {background: #aaa;}
.quiz-top-text p::after {
    content: "";
    width: 26px;
    height: 41px;
    position: absolute;
    left: 0px;
    top: 5px;
    background-image: url(../images/quest.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.step-quest {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}

.step-quest > * {width: 33%; padding: 0 9px; margin-bottom: 15px;min-height: 120px;}

.step-quest > * label {
   border: 2px solid #eee;
    border-radius: 5px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.step-quest > * label.checked {border: 2px solid #71B221; -webkit-box-shadow: 1px 1px 12px #ccc; box-shadow: 1px 1px 12px #ccc;}

.step-quest > * label input {margin-right: 15px; display: none;}

.step-quest > * label input#price_input {display: block; width: 100%; border-radius: 3px; pointer-events: none; font-size: 1.2rem; text-align: center;}

.step-quest > * img {margin-bottom: 2px;width: 100%;}


.step-quest > div > input {padding: 15px 30px; width: 100%; border: 1px solid #eee; border-radius: 5px; font-size: 1.3rem; text-align: center;}

#type-home > *, #type-repair > * {width: 25%; text-align: center;}

#last_step {text-align: center;}

#contact_fields {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; margin-bottom: 15px;}
#contact_fields > * {width: 51%; margin-bottom: 15px; min-height: 66px;}

#acceptance-line {margin-bottom: 30px;}


#progress_bar {
		height: 10px;
    width: 100%;
    background: #94adc533;
    border-radius: 25px;
    margin-bottom: 10px;
}
#progress_in {width: 0%; height: 100%; background: #71B221; border-radius: 25px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -o-transition: all 0.3s; -webkit-transition: all 0.3s ease 0s;}

#curr_step {margin-left: 5px;}