html { font-size: 14px; }

@media (min-width: 768px) {
    html { font-size: 16px; }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }

html { position: relative; min-height: 100%; }

body { margin-bottom: 60px; font-family: sans-serif; }

:root { --color_1: #f5f5f5; --color_2: #000; --color_3: #fff; --white_color: #fff; --black_color: #000; --checkbox_color: #ec686c; }

p { margin-bottom: 0; }

::-webkit-scrollbar { width: 3px; }

::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }

::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }

    ::-webkit-scrollbar-thumb:hover { background: #555; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

input[type="checkbox"] { box-shadow: 0; appearance: none; width: 15px; height: 15px; border-radius: 2px; cursor: pointer; position: relative; }

    input[type="checkbox"]:checked { background: var(--checkbox_color); box-shadow: 0; }


        input[type="checkbox"]:checked::before { content: "✔"; color: var(--white_color); font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.content-inner { width: 100%; height: 100%; padding: 0; color: var(--white_color); }

.left_box { position: fixed; top: 57px; left: 0; width: 350px; height: calc(100% - 30px); background-color: var(--color_1); color: var(--black_color); padding: 30px 20px 20px; overflow: auto; overflow-x: hidden; padding-bottom: 60px; }

.select_box { margin-bottom: 20px; }
.d_none { display: none; }
.custom_select { background-color: var(--white_color); color: var(--black_color); border: 0; padding: 8px 5px; font-size: 100%; }

    .custom_select:focus { box-shadow: none; }

.student_box { margin-top: 0px; }

    .student_box p { margin-bottom: 15px; text-transform: capitalize; }

    .student_box .para_1 { font-size: 16px; border-bottom: thin solid; color: darkgrey; }

    .student_box .para_3 { margin-bottom: 0; }

    .student_box .badge { background-color: var(--black_color); }

.btn_box { margin-top: 30px; padding-top: 30px; border-top: 2px solid #938989; }

.btn { border: 1px solid #938989 !important; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important; color: var(--black_color); }

    .btn:hover { border: 1px solid #938989; color: var(--black_color); }

.pre_next { margin-bottom: 10px; }

.question_number_box { /*margin-top: 20px; padding-bottom: 30px; border-bottom: 2px solid #938989;*/ }

    .question_number_box .number_box { background-color: var(--color_1); border-radius: 5px; position: relative; overflow: hidden; }

        .question_number_box .number_box .inc_dec { position: absolute; top: 0; right: 0; }

            .question_number_box .number_box .inc_dec .btn { width: 40px; border: 0 !important; border-radius: 0; }

.custom_input { background-color: var(--white_color); color: var(--black_color); border: 0; }

    .custom_input:focus { color: var(--black_color); background-color: var(--white_color); box-shadow: none; }

    .custom_input::placeholder { color: var(--black_color); }

.marks { margin-top: 20px; }

    .marks p { margin-bottom: 10px; }

.right_box { position: fixed; top: 57px; right: 0; width: calc(100% - 350px); height: calc(100% - 30px); background-color: var(--white_color); padding: 30px; display: flex; overflow: auto; }

    .right_box .answer_box { flex-basis: 70%; height: 100%; padding-right: 15px; }

        .right_box .answer_box .main_question { background-color: var(--color_1); color: var(--black_color); padding: 30px 10px; border-radius: 5px; }

        .right_box .answer_box .main_answer { margin-top: 20px; color: var(--black_color); padding-bottom: 60px; }

            .right_box .answer_box .main_answer .main_label { font-size: 16px; margin-bottom: 10px; }

            .right_box .answer_box .main_answer .para { margin-bottom: 5px; }

    .right_box .question_box .rebu_ques { margin-top: 20px; }
.rebu_ques_box { padding-bottom: 80px; }
.right_box .question_box { flex-basis: 30%; height: 100%; background-color: var(--color_1); /*background-color: #d5d5d5;*/ color: var(--black_color); overflow-y: auto; padding-bottom: 7%; }

    .right_box .question_box .explain { margin-top: 15px; background-color: #ffc1071a; padding: 30px 10px; border-radius: 5px; color: var(--black_color); }

.green_highlight { background-color: var(--color_3); color: var(--white_color); padding: 0 5px; }
.highlight { background-color: #a8f79c }
.highlight_red { background-color: #f79e9c }
div#questionGrid button { margin: 4px; width: 45px; height: 45px; }