.hljs{display:block;overflow-x:auto;padding:0.5em;color:#333;background:#f8f8f8;-webkit-text-size-adjust:none}.hljs-comment,.diff .hljs-header{color:#998;font-style:italic}.hljs-keyword,.css .rule .hljs-keyword,.hljs-winutils,.nginx .hljs-title,.hljs-subst,.hljs-request,.hljs-status{color:#333;font-weight:bold}.hljs-number,.hljs-hexcolor,.ruby .hljs-constant{color:#008080}.hljs-string,.hljs-tag .hljs-value,.hljs-doctag,.tex .hljs-formula{color:#d14}.hljs-title,.hljs-id,.scss .hljs-preprocessor{color:#900;font-weight:bold}.hljs-list .hljs-keyword,.hljs-subst{font-weight:normal}.hljs-class .hljs-title,.hljs-type,.vhdl .hljs-literal,.tex .hljs-command{color:#458;font-weight:bold}.hljs-tag,.hljs-tag .hljs-title,.hljs-rule .hljs-property,.django .hljs-tag .hljs-keyword{color:#000080;font-weight:normal}.hljs-attribute,.hljs-variable,.lisp .hljs-body,.hljs-name{color:#008080}.hljs-regexp{color:#009926}.hljs-symbol,.ruby .hljs-symbol .hljs-string,.lisp .hljs-keyword,.clojure .hljs-keyword,.scheme .hljs-keyword,.tex .hljs-special,.hljs-prompt{color:#990073}.hljs-built_in{color:#0086b3}.hljs-preprocessor,.hljs-pragma,.hljs-pi,.hljs-doctype,.hljs-shebang,.hljs-cdata{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.diff .hljs-change{background:#0086b3}.hljs-chunk{color:#aaa}

#quiz{
    margin-top: 50px;
}

.quiz {
    margin-top: 2rem;
    margin-bottom: 8rem;
}

.quiz .question {}

.quiz .question.card {
    padding: 0rem;
}

.questionText {
    text-align: center;
    font-size: 1.6rem;
    color: #1a1a1a;
    font-family: "ROAD", Arial, sans-serif;
}

.options{
    margin-top: 15px;
}

.quiz .question .options {}

.quiz .question .options button.quiz-opt {
    display: block;
    padding: 15px;
    height: auto;
    margin: 1rem 0;
    border: 1px solid rgb(0 0 0 / 18%);
    font-size: 16px;
    color: #000;
    border-radius: 10px;
    text-align: left;
    background: none;
    outline: none;
}

.quiz .question .options button.quiz-opt.range {
    display: inline-block;
    margin-right: 2rem;
    position: relative;
}

.quiz .question .options button.quiz-opt.range:last-of-type {
    margin-right: 0;
}

.quiz .question .options button.quiz-opt:hover {
    background: rgb(99 199 104 / 30%);
    cursor: pointer;
    transition: all .30s ease;
}

.quiz .question .options button.quiz-opt:focus {
    background: rgb(99 199 104 / 30%);
    color: #fff;
    transition-delay: 1s;
    transition-property: background-color;
    transition: all .30s ease;
}

.form_quiz form {
    background: #fff;
    margin: 20px auto;
    padding: 50px;
    box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.15);
}

.form_quiz h1 {
    font-weight: 300;
    text-align: center;
}

.form_quiz input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-size: 18px;
    border: none;
    border-bottom: 1px solid #757575;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 0px;
}

.form_quiz input:focus {
    outline: none;
}

.form_quiz .label-box {
    position: relative;
}

.form_quiz label {
    position: absolute;
    top: -66px;
    font-size: 16px;
    transition: 0.2s ease all;
    pointer-events: none;
}

.form_quiz input:focus~.label-box label,
.form_quiz input:valid~.label-box label {
    font-size: 14px;
    transform: translateY(-35px);
    color: rgba(52, 152, 219, 0.7);
}

.form_quiz input[class="btn"] {
    border: none;
    font-size: 17px !important;
    color: #fff;
    border-radius: 999px;
    background: #63C768;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.form_quiz input[class="btn"]:hover {
    cursor: pointer;
}

.label-box::before,
.label-box::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 0;
    bottom: 40px;
    background-color: rgba(52, 152, 219, 0.7);
    transition: all 0.3s;
}

.label-box::before {
    left: 50%;
}

.label-box::after {
    right: 50%;
}

.form_quiz input:focus~.label-box::before,
.form_quiz input:focus~.label-box::after {
    width: 50%;
}

.privacy {
    display: block;
    margin-top: 10px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.privacy a {
    text-decoration: none;
    color: #63C768;
}

@media (max-width: 700px) {
    .quiz .question .options button.quiz-opt.range {
        margin-right: 1rem;
        padding: 1.5rem;
    }
    .questionText {
        font-size: 20px;
        color: #1a1a1a;
    }
}