body {
font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto Condensed', sans-serif;
}

.main_container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
:root {
    --bs-btn-hover-bg: #27747A; /* Example: Blue background */
}

body, html {
    height: 100%;
    margin: 0;
}
.btn-back{
    height: 4em; 
    width: 4em;
  }
.bg-orange{
    background-color: #E18A54;
}

.btn-green, .btn-green:hover{
    color:#FFFFFF;
    background-color: #27747A;   
}

.btn-white, .btn-white:hover{
    color:#000000;
    background-color: #FFFFFF;   
}
.bg-green{
    background-color: #27747A;
}

.bg-lightgreen{
    background-color: #f4f8f8;
}

/* Define a new color for a specific class */
.custom-link {
    color: #27747a;
    /* Replace with your desired color code */
    }
    
    .lnc-if, .lnc-if tspan, .lnc-then, .lnc-then tspan{
        fill:#303030!important;
    }
    .lnc-qd0, .lnc-qd0 tspan, .lnc-qd1, .lnc-qd1 tspan {
        fill:#E18A54!important;
    }
    .lnc-qd2, .lnc-qd2 tspan, .lnc-qd3, .lnc-qd3 tspan{
        fill:#27747A!important;
    }
    .lnc-equals, .lnc-equals tspan{
        fill: #303030!important;
    }
    tspan.math_puzzle {
        fill: #303030!important;
    }
    tspan.math_puzzle_question_mark{
        fill:#E18A54!important;
    }

    .s2030{
        font-size:1.7rem;

    }
/* Custom CSS for input fields */
.custom-input {
border: none;
/* Remove the border */
width: 100%;
/* Set the desired width */
border-radius: 5px;
/* Add rounded corners */
padding: 10px;
/* Add some padding for better appearance */
}


.answer-option:hover {
    -webkit-box-shadow: 0px 3px 5px 0px #e8e8e8;
    box-shadow: 0px 3px 5px 0px #e8e8e8;
  }

  
input[type="radio"]:checked + .text-alphabet + .answer-option {
    border: 2px solid #27747A!important;
  }

input[type="radio"]:checked + .text-alphabet {
    color: #27747A;
    opacity:1;
}

#timer, #test_right_upper{
 color:#27747A;
 font-size: 24px;
}



.bg-option{
    background-color: #fCfEfE;
}
.bg-empty{
    background-color: #fCfEfE;
    border: 0.2px solid #ddd;
}

@media (max-height:630px){
    .question-text{
        height:160px!important;
    }
    .question-container > svg{
        max-height:calc(25.4vh)!important;
    }
    .question-container{
        margin-top:0px!important;
        
    }
    .general-question-text{
        margin-top: 0.2rem!important;
    }
    .answer-letters{
        display:none!important;
    }
    .my-input{
        display: block!important;
        height:5px!important;
    }

    #submit_button.btn{
        margin-top:10px!important;
    }

}


@media (min-height:630px) and (max-height:680px){
    .question-text{
        height:160px!important;
    }
    .question-container{
        margin-top:0px!important;
    }
    .general-question-text{
        margin-top: 0.2rem!important;
    }
    .answer-letters{
        display:none!important;
    }
    .answer-option{
        aspect-ratio: 1 / 1;
    }
    .my-input{
        display: block!important;
        height:5px!important;
    }

    #submit_button.btn{
        margin-top:10px!important;
    }
}


@media (max-width: 991px) and (max-height:680px){
    .answer-option {
        max-height: 108px;
        aspect-ratio: 1 / 1;
    }
    .question-text{
        height:160px!important;
    }
        .btn-back{
            height: 3em; 
            width: 3em;
        }
}

@media (min-height:681px) and (max-height:750px){
    .question-container{
        margin-top:5px!important;
    }
    .general-question-text{
        margin-top: 0.5rem!important;
    }
    .answer-letters{
        display:none!important;
    }
    .my-input{
        display: block!important;
        height:10px!important;
    }
    .answer-option {
        max-height: 108px;
        aspect-ratio: 1 / 1;
    }
    #submit_button.btn{
        margin-top:15px!important;
    }
}


@media (max-width:991px){


    .or_line{
        height: 12px; 
        margin-top: 20px;
    }
    .or_line > span{
        font-size:16px;
        padding-left: 30px;
        padding-right:30px;
    }
    #timer.small{
        margin-left:10px;
        font-size:14px;
        margin-top:9px;
        float:left;
        color:#27747A;
    }
    #test_right_upper_small{
        position:relative;
        margin-right:10px;
        font-size:14px;
        margin-top:9px;
        float:right;
        color:#27747A;
    }
    .test_right_upper_small_container{
        height:35px;
        width:100%;
    }
    .progress-bar{
        border-radius:25px!important;
    }
    .qp-unit, .qp-unit-30{
        height: 4px;
        width: 3%!important;
        margin-left:0.1667%;
        margin-right:0.1667%;
        border-radius: 5px;
    }
    .qp-unit-20{
        height: 4px;
        width: 4.5%!important;
        margin-left:0.1667%;
        margin-right:0.1667%;
        border-radius: 5px;
    }
    .qp-unit-60 {
        height: 4px;
        width: 1.5% !important;
        margin-left: 0.1667%;
        margin-right: 0.1667%;
        border-radius: 5px;
    }
    .qp-unit-40 {
        height: 4px;
        width: 2.25% !important;
        margin-left: 0.1667%;
        margin-right: 0.1667%;
        border-radius: 5px;
    }
    #timer.small{
        font-size:14px!important;
    }
    .general-question-text{
        font-size:14px;
    }
    .question-container > svg, .mw-600 > svg{
        height:270px!important;
        max-width:100%!important;
    }
    .question-text{
        height:270px!important;
        max-width:100%!important;
    }
    
    .question-container{
        margin-top:16px;
    }

    #timer{
        margin-left:16px;
        margin-top: 10px;
        float:left;
    }

    #progress-bar-container{
        margin-bottom:6px;
    }

    #question-progress{
        margin-top: 5px;
    }
    #test_right_upper{
        margin-top: 10px;
        margin-right:16px;
        float:right;
    }
    .progress{
        height:6px;
    }

}


@media (min-width: 992px) {
    
    .answer-option{
        height:12.4vw!important;
        aspect-ratio: 1 / 1;
    }
    .or_line{
        height: 20px; 
        margin-top: 50px;
    }
    .or_line > span{
        font-size:24px;
        padding-left: 60px;
        padding-right:60px;
    }
    .move-up{
        margin-top:13px;
        margin-left:50px;
        margin-right:50px;
    }
    #timer.small{
        margin-left:56px;
        font-size:20px;
        margin-top: 24px;
        float:left;
        color:#27747A;
    }
    #test_right_upper_small{
        margin-top: 24px;
        margin-right:56px;
        margin-left:10px;
        float:right;
        font-size: 20px;
        color:#27747A;
    }
    .test_right_upper_small_container{
        height:24px;
        width:100%;
    }
    .progress-bar{
        border-radius:25px!important;
    }
    .qp-unit, .qp-unit-30{
        height: 10px;
        width: 3%!important;
        margin-left:0.1667%;
        margin-right:0.1667%;
        border-radius: 25px;
    }
    .qp-unit-20{
        height: 10px;
        width: 4.5%!important;
        margin-left:0.1667%;
        margin-right:0.1667%;
        border-radius: 25px;
    }
    .qp-unit-60 {
        height: 10px;
        width: 1.5% !important;
        margin-left: 0.1667%;
        margin-right: 0.1667%;
        border-radius: 25px;
      }
      .qp-unit-40 {
        height: 10px;
        width: 2.25% !important;
        margin-left: 0.1667%;
        margin-right: 0.1667%;
        border-radius: 25px;
      }
    .general-question-text{
        font-size:24px;
    }
    .question-text{
        height:350px;
        max-height:30vh;
    }

    .question-container > svg, .mw-600 > svg{
        height:350px;
        max-width:600px;
        max-height:30vh;


    }
  



    .answer-option{
        min-height:140px!important;
        max-height:195px!important;
    }
    .text-option{
        font-size:36px;
    }
    .text-alphabet{
        color: #E18A54;
        opacity: 0.15;
        font-size: 27.55px;
    }    
    .text-correct{
        color: #00B81D;
        font-size: 27.55px;
    }
    .text-incorrect{
        color: #FF0000;
        font-size: 27.55px;
    }

    .question-container{
        margin-top:21px;
    }
    #timer{
        margin-left:56px;
        margin-top: 48px;
        float:left;
    }
    #progress-bar-container{
        margin-top:14px;
    }
    #question-progress{
        margin-top: 11px;
    }
    #test_right_upper{
        margin-top: 48px;
        margin-right:56px;
        float:right;
    }
    .progress{
        height:10px;
    }
}