@import "custom-variables/variables";
@import "../../bootstrap-4.0.0/scss/functions";
@import "../../bootstrap-4.0.0/scss/variables";
@import "../../bootstrap-4.0.0/scss/mixins";

.quiz-landing-blk{
    h2{
        @include media-breakpoint-up(lg){
            font-size: rem(96);
            line-height: rem(89);
             html[dir="rtl"] &{
            font-size: rem(50);
            line-height: rem(56);
        }
        }
        font-size: rem(48);
        line-height: rem(54);
    }
    p{
        @include media-breakpoint-down(md){
            font-size: rem(24);
        }
    }
}
.quiz-timer {
    width: rem(145);
    height: rem(50);
    line-height: rem(50);
    text-align: center;
}
.quiz-question-count-blk{
    overflow-x: auto;
    &:before{
        content: "";
        height: 3px;
        background-color: #a6cacb;
        position: absolute;
        width: 96%;
        top: 50%;
        transform: translateY(-50%);
        left: 2%;
        z-index: 0;
        @include media-breakpoint-down(sm){
            width: 370%;
        }
    }
    .quiz-count{
        width: 47px;
        min-width: 47px;
        height: 47px;
        background-color: #c1e2e3;
        z-index: 1;
        position: relative;
        font-size: rem(22);
        line-height: rem(20);
        color: rgba(#373b36, 0.2);
        transition: all 0.3s ease-in-out;
        &.active{
            color: #373b36;
            background-color: #a6cacb;
        }
        &::before{
            content: "";
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: $white;
            display: inline-block;
            position: absolute;
            z-index: -1;
            box-shadow: 3px 3px 5px rgba($black, 0.16);
        }
        @include media-breakpoint-down(sm){
            margin-right: 80px !important;
        }
    }
}

.answer-blk{
    .customradio-label{
        @include media-breakpoint-down(sm){
            font-size: rem(20);
        }
        html[dir="ltr"] &{
            padding-left: 42px;
        }
        html[dir="rtl"] &{
            padding-right: 42px;
        }
        &:before{
            content: "";
            width: 22px;
            height: 22px;
            background-color: $white;
            border: 4px solid #a6cacb;
            display: inline-block;
            border-radius: 50%;
            box-sizing: content-box;
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.3s ease-in-out;
            html[dir="rtl"] &{
             left: inherit;
             right: 0;
             top: 5px;
            }
        }
        &:after{
            content: "";
            width: 7px;
            height: 14px;
            border-right: 2.4px solid #49c54e;
            border-bottom: 2.4px solid #49c54e;
            transform: rotate(45deg);
            position: absolute;
            left: 11px;
            top: 6px;
            display: inline-block;
            opacity: 0;
            transition: all 0.3s ease-in-out;
            html[dir="rtl"] &{
             left: inherit;
             right: 11px;
             top: 11px;
            }
        }
    }
    .customradio{
        visibility: hidden;
        opacity: 0;
        width: 0;
    }
    .customradio:checked + .customradio-label{
        &:before{
            border: 4px solid #49c54e
        }
        &:after{
            opacity: 1;
        }
    }
}

.quiz-question{
    @include media-breakpoint-down(sm){
        font-size: rem(24);
    }
}

.next-prev-btn{
    @include media-breakpoint-down(sm){
        padding: .4rem 1.6rem;
    }
}

.quiz-content-wrapper{
    min-height: 705px;
    &.quiz-completed{
        position: relative;
        background-color: $white;
        &:before{
            content: "";
            width: 100%;
            height: 1274px;
            position: absolute;
            left: 0;
            top: 0;
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5e1a4+0,ffffff+100 */
            background: rgb(245,225,164); /* Old browsers */
            background: -moz-linear-gradient(top,  rgba(245,225,164,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top,  rgba(245,225,164,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom,  rgba(245,225,164,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5e1a4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
        }
    }
}

.percentage-box{
    font-size: rem(80);
    @include media-breakpoint-down(sm){
        font-size: rem(64);
    }
    &.correct-percent{
        color: #419a24;
    }
    &.incorrect-percent{
        color: #c84949;
    }
}

.view-answer-btn{
    background-color: #c84949;
    border-radius: 14px !important;
    padding-top: rem(12) !important;
    padding-bottom: rem(12) !important;
}

.answer-list{
    h5, .h5{
        font-size: rem(24) !important;
    }
}

.time-out{
    color: #ce4c4c;
}
.next-prev-btn{
    .icon-right-arw,.icon-left-arw{
 html[dir="rtl"] &{
  transform: rotate(
180deg
);
 }   
}
}