/*global*/
input[type=radio]:focus,
.btn:focus,
.btn:active:focus {
    outline: none;
}

.card {
    box-shadow      : 0 0 3px 2px rgb(51 51 51 / 10%);
    background-color: #fff;
}

.btn-primary,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover {
    background-color: #793D85 !important;
    border-color    : #793D85 !important;
    ;
}

/*end global*/

.quiz {
    padding: 40px 0;
}

.quiz .card {
    border-radius: 5px;
    padding      : 20px;
}

.quiz .card {
    text-align: center;
}

.quiz .card .card-header h3 {
    text-transform: uppercase;
    color         : #793D85;
    font-weight   : 700;
}

.quiz .card .card-body .form-check {
    margin-top: 15px;
}

.quiz .card .card-body input {
    border-radius: 50%;
}

.quiz .card .card-body .btn {
    margin-top: 20px;
}

.quiz .card .card-body label {
    margin        : 5px 10px;
    vertical-align: middle;
}

.quiz .card .card-body .option-input {
    -webkit-appearance: none;
    -moz-appearance   : none;
    -ms-appearance    : none;
    -o-appearance     : none;
    appearance        : none;
    position          : relative;
    top               : 13.33333px;
    right             : 0;
    bottom            : 0;
    left              : 0;
    height            : 40px;
    width             : 40px;
    transition        : all 0.15s ease-out 0s;
    background        : #cbd1d8;
    border            : none;
    color             : #fff;
    cursor            : pointer;
    display           : inline-block;
    margin-right      : 0.5rem;
    outline           : none;
    z-index           : 1000;
}

.quiz .card .card-body .option-input:checked {
    background: #00a105;
}

.quiz .card .card-body .option-input:checked::before {
    height     : 40px;
    width      : 40px;
    position   : absolute;
    content    : '✔';
    display    : inline-block;
    font-size  : 26.66667px;
    text-align : center;
    line-height: 40px;
}

#showScore {
    margin-top: 3rem;
    padding: 3rem 4rem;
    text-align: center;
    box-shadow: 0 1rem 1rem -0.7rem rgba(0, 0, 0, 0);
    background-color: #dfe6e9;
}

#showScore h5{
    font-size  : 18px;
    font-weight: 600;
    color      : #707070;
}

.scoreArea {
    display: none;
}



@media screen and (max-width: 500px) and (min-width: 300px) {
    .quiz .card .card-body label {
        margin: 5px 2px;
        vertical-align: -webkit-baseline-middle;
        font-size: 13px;
    }

    .quiz .card .card-body .option-input {
        height: 25px;
        width: 25px;
    }
}