#survey-form { min-height: calc(100vh - 225px); padding: 50px 0; }
#survey-form p { font-size: 14px; }
#survey-form-footer { padding: 30px 0; }
#survey-form-footer .survey-form__container { text-align: center; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
#survey-form-footer .survey-form__container p { margin: 0; font-size: 12px; color: #afafaf; }
#survey-form-footer .survey-form__container a { color: #afafaf; display: inline-block; padding: 0 10px; }
#survey-form-footer .survey-form__container a:hover { color: #003e7b; }

#survey-form .survey-form-two-cols { margin-right: -20px; display: flex; flex-wrap: wrap; }

#progressbar { width: 120px; height: 120px; position: relative; margin: 0 auto 40px; }
#progressbar .progressbar__text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
#progressbar .progressbar__text .progress-text { font-weight: bold; text-align: center; line-height: 1; }
#progressbar .progressbar__text .progress-text svg { display: block; margin: 5px auto 0; }
#progressbar .progressbar__text .progress-text .percentage { font-size: 30px; font-weight: 400; display: block; }
#progressbar .progressbar__text .progress-text .completed { font-size: 12px; }

#survey-form-multi-step .survey-step:not(.active) { display: none; }

#survey-form .survey-form-title { text-align: center; font-size: 30px; margin-bottom: 40px; }
#survey-form .survey-form-call a { text-align: center; font-size: 21px; font-weight: bold; margin-top: 40px; display: flex; align-items: center; justify-content: center; color: #003e7b; }
#survey-form .survey-form-call a img { margin: 0 5px; }
#survey-form .survey-form-call a:hover { text-decoration: underline; }
.small-container { max-width: 495px; }
.medium-container { max-width: 695px; }

input, select { height: 50px; }
input, textarea, select { width: 100%; padding: 0; border: 0; border-bottom: 1px solid #000; font-size: 16px; }
input::placeholder, textarea::placeholder { color: #000; }
input.datepicker { background: url('../images/icon-calendar.svg') center right 10px no-repeat; padding-right: 40px; }
label.error { font-size: 13px; color: rgb(190, 0, 0); }

.survey-field { margin-bottom: 25px; }
.survey-field p.field-info { color: #696969; font-size: 14px; margin-top: 5px; }

.survey-radio { position: relative; }
.survey-radio > label { display: block; cursor: pointer; }
.survey-radio input { display: none; }
.survey-radio .radio-label { width: 100%; height: 50px; border-radius: 30px; background-color: #eaeaea; display: flex; align-items: center; justify-content: center; }
.survey-radio input:checked ~ .radio-label, .survey-radio .radio-label:hover { background-color: #003e7b; color: #fff; }
#survey-form .survey-form-two-cols .survey-radio { width: 50%; padding-right: 20px; }

.survey-select { position: relative; }
.survey-select select { -webkit-appearance: none; border-radius: 30px; border: 0; background: #eaeaea url('../images/survey-select-arrow.svg') center right 30px no-repeat; padding: 10px 30px; }



.survey-checkbox label { display: flex; font-size: 14px; }
.survey-checkbox input { width: auto; height: auto; margin-right: 5px; margin-top: 5px; }

.survey-confirm { display: flex; font-size: 14px; }
.survey-confirm input { width: auto; height: auto; margin-right: 10px; margin-top: 5px; }

.survey-date-picker-validation { margin-top: 10px; color:rgb(190, 0, 0); display: none; }

#survey-form .survey-generated-list p.survey-generated-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 18px; font-weight: bold; }
#survey-form .survey-generated-list p.survey-generated-item input[type="checkbox"] { display: none; }
#survey-form .survey-generated-list p.survey-generated-item a { font-size: 14px; color: #eb3e2f; }
#survey-form .survey-generated-list p.survey-generated-item a:hover { color: #f35a4c; }

button { width: 100%; border: none; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 10px 30px; font-weight: bold; font-family: 'Source Sans Pro'; font-size: 20px; color: #fff; background-image: -moz-linear-gradient( 90deg, rgb(232,52,41) 1%, rgb(248,106,78) 99%); background-image: -webkit-linear-gradient( 90deg, rgb(232,52,41) 1%, rgb(248,106,78) 99%); background-image: -ms-linear-gradient( 90deg, rgb(232,52,41) 1%, rgb(248,106,78) 99%); outline: none; font-family: 'Source Sans Pro'; transition: ease all .3s; border-radius: 30px; margin-top: 25px; margin-bottom: 25px; cursor: pointer; }  
button:focus { outline: none; }
button:hover { opacity: .9; }

button.shake {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
  
@keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
}

@media (max-width: 768px) {

    #survey-form { min-height: auto; }
    #survey-form-footer .survey-form__container { flex-direction: column; }
    #survey-form-footer .survey-form__container p { margin-bottom: 20px; }

}