@font-face {
    font-family: cairo;
    src: url('../fonts/Cairo-Regular.ttf');
}

@font-face {
    font-family: cairo-bold;
    src: url('../fonts/Cairo-Bold.ttf');
}

@font-face {
    font-family: cairo-light;
    src: url('../fonts/Cairo-Light.ttf');
}

:root {
    --base-color: #10284a;
    --base-color-hover: #143867;
    --base-color-shadow: #0d2e5a4f;
    --light-color: #eeb91d;
    --light-color-hover: #b68c06;
}

body {
    font-family: cairo;
}

h4 {
    font-family: cairo-bold;
}

.btn-primary {
    background-color: var(--base-color);
}
.form-control {
    height: calc(1.5em + 0.75rem + 4px) !important;
}
.btn-primary:hover ,
.btn-primary:focus ,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:target{
    background-color: var(--base-color-hover) !important;
    border-color: var(--base-color-hover) !important;
    box-shadow: 0 0 0 0.1rem var(--base-color-shadow) !important;
}

.dots .wizard-step .dot:focus,
.dots .wizard-step .dot:active,
.dots .wizard-step .dot:visited,
.dots .wizard-step .dot:target {
    background-color: var(--base-color-hover) !important;
    border-color: var(--base-color-hover) !important;
    box-shadow: 0 0 0 0.1rem var(--base-color-shadow) !important;
}

input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.btn {
    border-radius: 6px !important;
}

.form-check {
    width: 100%;
    padding: 10px;
    background-color: #EBEBED;
    margin: 10px 0;
    border-radius: 10px;
    color: var(--base-color);
}

.form-check label {
    font-family: cairo-bold;
    font-size: 15px;
}

.form-check.active {
    background-color: var(--base-color);
    color: var(--light-color);
}

option:hover {
    background-color: var(--base-color-hover);
}

.flip-clock-wrapper {
    font-family: cairo-bold;
}

.flip-clock-wrapper ul li a div div.inn {
    background-color: var(--light-color);
}

.flip-clock-wrapper .flip-clock-label {
    font-family: cairo-bold;
    font-size: 19px;
    color: var(--base-color);
    top: -2em;
}

.wizard {
    transition: all .3s ease-in;
    display: none;
}
.wizard .wizard-nav {
    display: flex;
    /*flex-wrap: wrap;*/
    transition: all .3s ease-in;
    overflow: auto !important;
}
.wizard .wizard-nav .wizard-step {
    cursor: pointer;
}
.wizard .wizard-nav.tabs .wizard-step {
    position: relative;
    font-size: 14px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
    padding: .5rem 1rem;
}
.wizard .wizard-nav.tabs .wizard-step.active {
    border: 1px solid #dee2e6;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    border-bottom: 0px;
}
.wizard .wizard-nav.progress {
    height: auto;
    overflow: auto;
    line-height: 1.5;
    font-size: 1rem;
    border-radius: .25rem;
}
.wizard .wizard-nav.progress .wizard-step {
    position: relative;
    font-size: 14px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    text-align: center;
    border: 1px solid #dee2e6;
    background-color: var(--light-color);
    color: #fff;
    padding: .5rem 1rem;
    transition: all .3s ease-in;
}
.wizard .wizard-nav.progress .wizard-step.active~.wizard-step {
    background-color: #fff;
    color: #000;
}
.wizard .wizard-nav.dots .wizard-step {
    position: relative;
    font-size: 14px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    text-align: center;
    transition: all .3s ease-in;
}
.wizard .wizard-nav.dots .wizard-step:last-child:before {
    display: none;
}
.wizard .wizard-nav.dots .wizard-step:last-child:after {
    display: none;
}
.wizard .wizard-nav.dots .wizard-step span {
    cursor: pointer;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(1).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .1s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(2).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .2s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(3).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .3s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(4).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .4s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(5).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .5s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(6).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .6s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(7).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .7s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(8).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .8s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(9).dot {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .9s;
}
.wizard .wizard-nav.dots .wizard-step .dot {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    z-index: 3;
    height: 8px;
    width: 8px;
    background: var(--base-color);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    transition: all .5s ease-in-out;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(1):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .1s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(2):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .2s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(3):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .3s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(4):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .4s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(5):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .5s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(6):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .6s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(7):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .7s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(8):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .8s;
}
.wizard .wizard-nav.dots .wizard-step:nth-of-type(9):before {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay: .9s;
}
.wizard .wizard-nav.dots .wizard-step:before {
    content: "";
    position: absolute;
    top: -17px;
    right: 50%;
    width: 100%;
    height: 2px;
    z-index: 2;
    background: var(--light-color);
}
.wizard .wizard-nav.dots .wizard-step:after {
    content: "";
    position: absolute;
    top: -17px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #dee2e6;
    z-index: 1;
}
.wizard .wizard-nav.dots .wizard-step.active~.wizard-step .dot {
    background: #dee2e6;
}
.wizard .wizard-nav.dots .wizard-step.active~.wizard-step:before {
    background: #dee2e6;
    width: 0%}
.wizard .wizard-nav.dots .wizard-step.active~.wizard-step:after {
    background: #dee2e6;
}
.wizard .wizard-nav.dots .wizard-step.active .dot {
    background-color: var(--base-color);
    box-shadow: 0 0 0 3px var(--base-color-shadow);
}
.wizard .wizard-nav.dots .wizard-step.active:before {
    background: #dee2e6;
}
.wizard .wizard-nav.dots .wizard-step.active:after {
    background: #dee2e6;
}
.wizard .wizard-content {
    transition: all .3s ease-in;
    padding: 1rem 0;
}
.wizard .wizard-content .wizard-step {
    transition: all .3s ease-in;
    display: none;
}
.wizard .wizard-content .wizard-step.active {
    display: block;
}
.wizard .wizard-buttons {
    transition: all .3s ease-in;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.wizard .wizard-buttons .wizard-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    border-radius: .15rem;
    transition: all .3s ease-in;
    margin: 0 10px;
    background-color: var(--base-color);
    color: #fff;
}
.wizard .wizard-buttons .wizard-btn:hover {
    background-color: var(--base-color-hover);
}
.wizard .wizard-buttons .wizard-btn:disabled {
    cursor: not-allowed !important;
    pointer-events: visible;
    opacity: .65;
}
.wizard.vertical {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
transition: all .3s ease-in;
}
.wizard.vertical .wizard-nav {
flex-direction: column;
flex: 1;
padding: 0 3rem;
transition: all .3s linear;
}
@media screen and (min-width: 1024px) {
.wizard.vertical .wizard-nav {
    max-width: 250px;
}
}@media screen and (max-width: 767px) {
.wizard.vertical .wizard-nav .wizard-step {
    text-align: left;
    padding-left: 1rem;
}

}
.wizard.vertical .wizard-nav .wizard-step:before {
 top: 7px;
 left: -12px;
 width: 2px;
 height: 100%}
.wizard.vertical .wizard-nav .wizard-step:after {
top: 7px;
left: -12px;
width: 2px;
height: 100%}
.wizard.vertical .wizard-nav .wizard-step .dot {
top: 7px;
left: -15px;
}
.wizard.vertical .wizard-nav .wizard-step.active~.wizard-step:before {
height: 0%}
.wizard.vertical .wizard-content {
width: 75%;
transition: all .3s ease-in;
padding: 0 0 3rem 0;
}
@media screen and (max-width: 767px) {
.wizard.vertical .wizard-content {
    padding: 2rem 0;
}
}.wizard.vertical .wizard-buttons {
 flex-basis: 100%;
 transition: all .3s ease-in;
}
.highlight-error {
outline: 1px solid tomato;
}

.container, .container-fluid {
text-align: right;
}

.ques_image {
    width: 100%;
    margin: 12px 0;
}

.wizard-btn.btn.finish {
background-color: #e61230 !important;
}

.flip-clock-wrapper {
    position: relative;
}

@media screen and (max-width: 767px) {

    .clock {
        position: relative !important;
        padding-top: 0px;
        height: 100px;
        zoom: .6;
        transform: scale(.8);
        -ms-transform: scale(.8);
        /* IE 9 /
           -webkit-transform: scale(.8); / Safari and Chrome /
           -o-transform: scale(.8); / Opera /
           -moz-transform: scale(.8); / Firefox */
    }
}
@media screen and (max-width: 400px) {

    .clock {
        position: relative !important;
        padding-top: 0px;
        height: 100px;
        zoom: .6;
        transform: scale(.6);
        -ms-transform: scale(0.6);
        /* IE 9 /
           -webkit-transform: scale(.6); / Safari and Chrome /
           -o-transform: scale(.6); / Opera /
           -moz-transform: scale(.6); / Firefox */
    }
}