.instruction_page {
    justify-content: center;
    gap: 1em;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}


.timer_container {
    background: #fbbcbc9e;
    padding: 5px;
    border-radius: 4px;
}

div.exam_paper {
    padding: 2em;
}

div.section-card {
    border-radius: 4px;
    padding: 10px;
    /* border: 1px solid #00000026; */
}

div.question-card, .section-question-card {
    background-color: #3379b71f;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-question-card-box {
    background-color: unset;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question_attempted {
    background: #c3dfc3d6 !important;
}

div.question-card:hover {/*  */
    background-color: #f1f1f1ef;
    transition: 0.5s all;
}

div.question-box:hover {
    background-color: #f1f1f1ef;
    transition: 0.5s all;
}
.matching-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.matching-column {
    flex: 1;
    min-width: 200px;
}

img.term-image
{
    width: auto;
    height: 15rem;
    border-radius: 4px;
}

img.matching-term-image{
    height: 100%;
    width: 100%;
}
.term, .description {
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    margin: 5px 0;
    cursor: pointer;
    user-select: none;
    width: 20vw;
    align-self: center;
    align-content: center;
}

.term.matching-active {
    background-color: #7bb97e87;
    color: #ffffff;
}

.term:hover, .description:hover {
    background-color: #e0e0e0;
}

.drop-target {
    min-height: 40px;
    background-color: #f3f3f3;
    border: 1px dashed #aaa;
    margin: 5px 0;
    padding: 10px;
}

.drop-target.over {
    border-color: #4caf50;
}

.matched {
    background-color: #d4edda;
}

.nav.navbar-nav.navbar-right {
    width: auto !important;
}

div.sections-container {
    gap: 50px;
}

.section-box, .card-light {
    background-color: #f8f8f8;
}

.question-box {
    background-color: #3379b71f;
}

.gap-50px {
    gap: 50px;
}

.p-native {
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.mcq_options input[type="radio"]:checked {
    accent-color: darkgreen;
}

.mcq_options input[type="radio"]:checked ~ input[type="text"] {
    background-color: #5cb85c78;
}

.question-type-div {
    width: 100%;
}
.question-type-div select {
    font-weight: normal;
}
.add_option_button, .matching_options button {
    width: fit-content
    /* align-self: center; */
}

.question_type_options {
    padding-inline: 10px;
}

.matching-pair-box {
    padding-right: 20px;
    border-right: 1px solid #0000001a;
}

.error_box {
    background: #9700002e;
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*  ---  */
h2.main-heading
{
    color: #535353;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
}

.section-box{
    padding: 2em;
    margin-bottom: 2em;
    width: 100%;
    background: #fff;
    border: 1px solid #e4e4e4;
    box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.question-box{
    padding: 2em;
}
.matching-pairs-container  .pair{
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 2rem;
    /* gap: 20%; */
    background: #f9f9f9;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 10px;
    justify-content: space-around;
    align-items: center;
    justify-items: stretch;
}

.que-marks{
    display: flex;
    width: 100%;
    justify-content: end;
}

.que-marks .form-group{
    display: flex;
    width: 25%;
    align-items: center;
    gap: 5px;
    justify-content: end;
}

.que-marks .form-control{
    width: 25%;
}

.que-marks .form-group label{
    margin:0;
}


.que-question-marks{
    display: flex;
    width: 50%;
    margin: auto;
}

.navigation-buttons {
    margin-top: 20px;
}
.navigation-buttons button {
    padding: 10px 20px;
    /* background-color: #007bff; */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.navigation-buttons button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.body-blur {
    filter: blur(5px);
    pointer-events: none;
}

 .preview-box{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    align-self: center;
}

 .preview-box video,
 .preview-box img {
    width: auto;
    height: 15rem;
    border-radius: 4px;
}
 .preview-box a {
    border: 1px solid #00000038;
    padding: 10px;
    width: fit-content;
    border-radius: 4px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.19);
}

/* Student Side Css */
.tutorial_start_btn_group {
    width: 50%;
    align-items: center;
    margin: auto;
    margin-top: 10px;
}

/* Animation for changing the text */
.changing-text {
    display: inline-block;
    animation: changeText 1s ease;
}

/* Animation for changing the text */
@keyframes changeText {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    50% {
        opacity: 0.5;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

.arrow {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
    margin-right: 6px;
    transition: transform 0.3s ease;
}

.arrow.down {
    transform: rotate(45deg);
}

.arrow.up {
    transform: rotate(225deg); /* Rotate to point up */
}

.available_exam_btn {
    background: #3F51B5;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 260px;
    display: inline-block;
}

.question_border {
    border: 1px solid #00871138;
}

.mcq_label {
    padding: 10px;
    background: #cdcdcd91;
    border: 1px solid #00871138;
}

.option_index_div {
    padding: 2px 5px;
    border: 1px solid #37753f87;
    border-radius: 3px;
}

.e-bg-light-green {
    background: #c3dfc3d6 !important;
}

.e-bg-light-red {
    background: #dfc3c3d6 !important;
}
@media (max-width: 550px) {
    .question-head, .paper_head {
        flex-direction: column;
    }
    .question-head .marks {
        text-align: end;
    }
    .paper_head .timer_container {
        align-self: flex-end;
    }
}

@media (max-width: 885px) {
    .matching-pairs-container .pair{
        display:block;
    }
        
    .matching-pairs-container  .pair{
        display: block
    
    }
    .preview-box{
        margin-bottom:20px;
    }
}