* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

p {
    color: grey;
}

#heading {
    text-transform: uppercase;
    color: var(--theme-color);
    font-weight: normal;
}

#registration-question-form {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

.registration {
    padding-top: 10px;
    padding-bottom: 40px;
}

fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;

    /*stacking fieldsets above each other*/
    position: relative;
}

.form-card {
    text-align: left;
}

/*Hide all except first fieldset*/
/*#registration-question-form fieldset:not(:first-of-type) {*/
/*    display: none;*/
/*}*/

/*#registration-question-form input, #registration-question-form textarea {*/
/*    padding: 8px 15px 8px 15px;*/
/*    border: 1px solid #ccc;*/
/*    border-radius: 0px;*/
/*    margin-bottom: 25px;*/
/*    margin-top: 2px;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    font-family: montserrat;*/
/*    color: #2C3E50;*/
/*    background-color: #ECEFF1;*/
/*    font-size: 16px;*/
/*    letter-spacing: 1px;*/
/*}*/

/*#registration-question-form input:focus, #registration-question-form textarea:focus {*/
/*    -moz-box-shadow: none !important;*/
/*    -webkit-box-shadow: none !important;*/
/*    box-shadow: none !important;*/
/*    border: 1px solid var(--theme-color);*/
/*    outline-width: 0;*/
/*}*/

/*Next Buttons*/


/*Previous Buttons*/
#registration-question-form .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right;
}

#registration-question-form .action-button-previous:hover, #registration-question-form .action-button-previous:focus {
    background-color: #000000;
}

/*The background card*/
.card {
    z-index: 0;
    border: none;
    position: relative;
}

/*FieldSet headings*/
.fs-title {
    font-size: 25px;
    color: var(--theme-color);
    margin-bottom: 15px;
    font-weight: normal;
    text-align: left;
}

.purple-text {
    color: var(--theme-color);
    font-weight: normal;
}

/*Step Count*/
.steps {
    font-size: 25px;
    color: gray;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: right;
}

/*Field names*/
.fieldlabels {
    color: gray;
    text-align: left;
}

/*Icon progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
}

#progressbar .active {
    color: var(--theme-color);
}

#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 4.54%;
    float: left;
    position: relative;
    font-weight: 400;
}

/*Icons in the ProgressBar*/
#progressbar #step-1:before {
    font-family: FontAwesome;
    content: "1";
}

#progressbar #step-2:before {
    font-family: FontAwesome;
    content: "2";
}

#progressbar #step-3:before {
    font-family: FontAwesome;
    content: "3";
}

#progressbar #step-4:before {
    font-family: FontAwesome;
    content: "4";
}

#progressbar #step-5:before {
    font-family: FontAwesome;
    content: "5";
}

#progressbar #step-6:before {
    font-family: FontAwesome;
    content: "6";
}

#progressbar #step-7:before {
    font-family: FontAwesome;
    content: "7";
}

#progressbar #step-8:before {
    font-family: FontAwesome;
    content: "8";
}

#progressbar #step-9:before {
    font-family: FontAwesome;
    content: "9";
}

#progressbar #step-10:before {
    font-family: FontAwesome;
    content: "10";
}

#progressbar #step-11:before {
    font-family: FontAwesome;
    content: "11";
}

#progressbar #step-12:before {
    font-family: FontAwesome;
    content: "12";
}

#progressbar #step-13:before {
    font-family: FontAwesome;
    content: "13";
}

#progressbar #step-14:before {
    font-family: FontAwesome;
    content: "14";
}

#progressbar #step-15:before {
    font-family: FontAwesome;
    content: "15";
}

#progressbar #step-16:before {
    font-family: FontAwesome;
    content: "16";
}

#progressbar #step-17:before {
    font-family: FontAwesome;
    content: "17";
}

#progressbar #step-18:before {
    font-family: FontAwesome;
    content: "18";
}

#progressbar #step-19:before {
    font-family: FontAwesome;
    content: "19";
}

#progressbar #step-20:before {
    font-family: FontAwesome;
    content: "20";
}

#progressbar #step-21:before {
    font-family: FontAwesome;
    content: "21";
}

#progressbar #step-22:before {
    font-family: FontAwesome;
    content: "22";
}

/*Icon ProgressBar before any progress*/
#progressbar li:before {
    width: 40px;
    height: 40px;
    line-height: 35px;
    display: block;
    font-size: 17px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
}

/*ProgressBar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 19px;
    z-index: -1;
}

/*Color number of the step and the connector before it*/
#progressbar li.active:before, #progressbar li.active:after {
    background: var(--theme-color);
}

/*Animated Progress Bar*/
.progress {
    height: 20px;
}

.progress-bar {
    background-color: var(--theme-color);
}

/*Fit image in bootstrap div*/
.fit-image{
    width: 100%;
    object-fit: cover;
}

.show_fieldset {
    display: block;
    opacity: 1;
}

.error-summary {
    background-color: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Style the error message text */
.error-summary p {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}

#progressbar li > a:hover {
    color: #088169
}

button.next {
    line-height: unset;
}

.test-progress {
    margin-bottom: 20px;
    position: relative;
}

.test-progress .prev-btn {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: #b2becc;
}

.test-progress .prev-btn img {
    margin-right: 10px;
    margin-top: -3px;
}

.test-progress-step {
    margin: 0 auto 20px;
    position: relative;
    height: 90px;
    width: 90px;
    border: 4px solid #dbe5ef;
    border-radius: 50%;
}

.test-progress-step .step-number {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #b4bfcd;
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}

.test-progress-step .step-number.final-step {
    color: #0da487;
}

.test-progress-step svg {
    height: 90px;
    width: 90px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    position: relative;
    top: -4px;
    left: -4px;
}

.test-progress-step svg circle {
    stroke: #0da487;
}

.test-progress-step svg circle.step-1 {
    stroke-dasharray: 4 200;
}

.test-progress-step svg circle.step-2 {
    stroke-dasharray: 8 200;
}

.test-progress-step svg circle.step-3 {
    stroke-dasharray: 16 200;
}

.test-progress-step svg circle.step-4 {
    stroke-dasharray: 24 200;
}

.test-progress-step svg circle.step-5 {
    stroke-dasharray: 32 200;
}

.test-progress-step svg circle.step-6 {
    stroke-dasharray: 39 200;
}

.test-progress-step svg circle.step-7 {
    stroke-dasharray: 47 200;
}

.test-progress-step svg circle.step-8 {
    stroke-dasharray: 55 200;
}

.test-progress-step svg circle.step-9 {
    stroke-dasharray: 63 200;
}

.test-progress-step svg circle.step-10 {
    stroke-dasharray: 71 200;
}

.test-progress-step svg circle.step-11 {
    stroke-dasharray: 79 200;
}
.test-progress-step svg circle.step-12 {
    stroke-dasharray: 87 200;
}
.test-progress-step svg circle.step-13 {
    stroke-dasharray: 95 200;
}
.test-progress-step svg circle.step-14 {
    stroke-dasharray: 103 200;
}
.test-progress-step svg circle.step-14 {
    stroke-dasharray: 111 200;
}
.test-progress-step svg circle.step-16 {
    stroke-dasharray: 119 200;
}
.test-progress-step svg circle.step-17 {
    stroke-dasharray: 127 200;
}
.test-progress-step svg circle.step-18 {
    stroke-dasharray: 135 200;
}
.test-progress-step svg circle.step-19 {
    stroke-dasharray: 143 200;
}
.test-progress-step svg circle.step-20 {
    stroke-dasharray: 151 200;
}
.test-progress-step svg circle.step-21 {
    stroke-dasharray: 159 200;
}
.test-progress-step svg circle.step-22 {
    stroke-dasharray: 167 200;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.not-found-item {
    display: none;
}

.selected-week-day {
    background-color: var(--theme-color);
    color: white;
}

.week-day {
    border: 1px solid #056d59;
}