@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');
}
@font-face {
    font-family: a101;
    src: url('../fonts/101.ttf');
}
@font-face {
    font-family: a102;
    src: url('../fonts/102.ttf');
}
:root {
    --base-color: #760289;
    --base-color-hover: #530162;
    --base-color-shadow: #530162;
    --light-color: #ffd833;
    --light-color-hover: #b68c06;
}

body {
    font-family: a102;
    background: rgb(252,178,208);
background: linear-gradient(90deg, rgba(252,178,208,1) 0%, rgba(255,249,231,1) 100%);
}

h4 {
    font-family: cairo-bold;
}

.btn-primary {
    background-color: var(--base-color);
    border-color: var(--base-color);
}

.correct {
    background-color: #48fd0a !important;
}

.answered {
    background-color: #760289  !important;
    color: #fff;
}

.wrong {
    background-color: #fa530b !important;
}

.btn-primary:hover ,
.btn-primary:focus ,
.btn-primary:active,
.btn-primary:visited,
.btn.focus, .btn:focus,
.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;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff7e1;
    background-clip: padding-box;
    border: 1px solid #251249;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.theformDT {
    padding: 30px;
    border-radius: 50px;
}
input[type="radio"] {
    position: absolute;
    opacity: 0;
}

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

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

.form-check {
    margin-left: 5px;
}
.form-check:last-child {
    margin-left: 0;
    margin-right: 5px;
}

.form-check label {
    font-family: cairo-bold;
    font-size: 20px;
    font-weight: bolder;
}

.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;
    margin-top: 17px;
    padding:10px;
}
.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;
    border-radius: 50px;
    background-color: var(--light-color);
    color: #fff;
    padding: .5rem 1rem;
    transition: all .3s ease-in;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 2px;
}

.answers {
    display: flex;
}

.progress::-webkit-scrollbar {
    width: 3px;
    margin-top: 5px;
}

.progress::-webkit-scrollbar-track {
    border-radius: 10px;
    border: none;
}

.progress::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px var(--base-color);
    background-color: var(--base-color);

}

.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;
    font-family: 'a102';
}
.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: 80% !important;
    margin: 8px 0;

    padding: 10px;
}

.wizard-btn.btn.finish {
background-color: #e61230 !important;
}
.reportdetails {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 25px;
    font-family: a102;
}
.flip-clock-wrapper {
    position: relative;
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #ff8ab3;
    border-radius: 0.25rem !important;
    padding: 3px;
}