body{
    font-family: 'Nunito', sans-serif;
}
.nav-tabs {
    border-bottom: 0;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: #dee2e6;
}
.form-control {
    background-color : #EEEEEE!important;
}
.form-check-input:checked {
	background-color: green;
    border-color: green;
}
.form-control.bg-white {
    background-color : white!important;
}
::placeholder {
    color: #A0AEC0!important;
    opacity: 1; /* Firefox */
    font-size: 14px;
  }

::-ms-input-placeholder { /* Edge 12 -18 */
    color: #A0AEC0!important;
    font-size: 14px;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}
.fw-700{
    font-weight: 700;
}
.fw-800{
    font-weight: 800;
}
.fs-7{
    font-size: 7px;
}
.fs-8{
    font-size: 8px;
}
.fs-10{
    font-size: 10px;
}
.fs-12{
    font-size: 12px;
}
.fs-13{
    font-size: 13px;
}
.fs-14{
    font-size: 14px;
}
.fs-15{
    font-size: 15px!important;
}
.fs-16{
    font-size: 16px!important;
}
.fs-18{
    font-size: 18px;
}
.fs-22{
    font-size: 22px;
}
.fs-24{
    font-size: 24px;
}
.fs-25{
    font-size: 25px;
}
.fs-28{
    font-size: 28px;
}
.fs-30{
    font-size: 30px;
}
.fs-32{
    font-size: 32px;
}
.fs-40{
    font-size: 40px;
}
.fs-48{
    font-size: 48px;
}
.text-gray-3{
    color: rgba(189, 189, 189, 1);
}
.text-gray-4{
    color: rgba(117, 117, 117, 1);
}


.text-green{
    color: #4087FF;
}
.text-green-2{
    color: rgb(12, 41, 203);
}
.text-green-3{
    color: rgb(99, 115, 221);
}
.text-green-500{
    color: rgb(73, 73, 187);
}
.text-green-600{
    color: rgb(42, 37, 133);
}
.text-gray-500{
    color: rgba(113, 128, 150, 1);
}
.text-gray-600{
    color: rgba(74, 85, 104, 1);
}
.text-gray-700{
    color: rgba(45, 55, 72, 1)
}
.text-gray{
    color: #707070;
}
.text-brown{
    color: rgba(132, 94, 0, 1);
}
.text-yellow{
    color: #FFB700;
}
.bg-yellow{
    background-color: rgba(255, 237, 192, 1)
}
.bg-gray-50{
    background-color: rgba(247, 250, 252, 1);
}
.bg-gray-200{
    background-color: #E2E8F0;
}
.bg-gray-500{
    background-color: rgba(113, 128, 150, 1);
}
.bg-green{
    background-color: #4087FF;
}
.bg-green-2{
    background-color: rgb(199, 210, 232, 1);
}
.bg-green-3{
    background-color: rgb(194, 208, 243);
}
.bg-green-4{
    background-color: rgb(235, 237, 255);
}
.bg-green-5{
    background-color: rgb(240, 244, 251);
}
.bg-green-50{
    background-color: rgb(240, 242, 255);
}
.bg-green-100{
    background-color: rgb(170, 195, 251);
}
.bg-green-400{
    background-color: rgba(61, 139, 253, 1);
}
.bg-green-500{
    background-color: rgba(49, 130, 206, 1);
}

.bg-welcome,.bg-start-exam{
    background-image: url('/assets/img/welcome-bg.png');
}
.bg-orange{
    background-color: rgba(255, 227, 156, 1);
}
.bg-orange-50{
    background-color: rgba(255, 250, 240, 1);
}
.bg-orange-300{
    background-color: rgba(246, 173, 85, 1);
}
.bg-orange-400{
    background-color: rgba(237, 137, 54, 1);
}
.max-w-screen-sm{
    max-width: 480px!important;
}
.login-wrapper{
    border-top-left-radius: 1rem!important;
    border-bottom-left-radius: 1rem!important;
}
.practice-wrapper{
    border-top-right-radius: 1rem!important;
    border-bottom-right-radius: 1rem!important;
}
.login-banner{
    padding: 0 20rem!important;
}
.button-custom-1{
    background: #4087FF;
    box-shadow: 0px 3.4348926544189453px 2.7479140758514404px 0px rgba(0, 99, 22, 0.0217), 0px 8.687101364135742px 6.949680805206299px 0px rgba(0, 99, 22, 0.0311), 0px 17.720870971679688px 14.176697731018066px 0px rgba(0, 99, 22, 0.0389), 0px 36.501644134521484px 29.201316833496094px 0px rgba(0, 99, 22, 0.0483), 0px 100px 80px 0px rgba(0, 99, 22, 0.07)!important;
    color: white;
    border-radius: 0.5rem;
}
.bg-red-custom{
    background: rgba(254, 138, 138, 1);
    box-shadow: 0px 3.4348926544189453px 2.7479140758514404px 0px rgba(0, 99, 22, 0.0217),
    0px 8.687101364135742px 6.949680805206299px 0px rgba(0, 99, 22, 0.0311),
    0px 17.720870971679688px 14.176697731018066px 0px rgba(0, 99, 22, 0.0389),
    0px 36.501644134521484px 29.201316833496094px 0px rgba(0, 99, 22, 0.0483),
    0px 100px 80px 0px rgba(0, 99, 22, 0.07)!important;
}

.question-wrapper{
    min-height: 31rem;
}
.ragu-ragu-wrapper{
    bottom: 20px;
    left: 30%;
}
.text-username{
    color: rgba(113, 128, 150, 1);
}
.start-exam-wrapper{
    margin: 5% 25% 0;
}
.ragu{
    color: white!important;
}
@media only screen and (max-width: 768px) {
    .login-banner{
        padding: 0!important;
    }
    .start-exam-wrapper{
        margin: 0 5%;
    }
}
@media only screen and (max-width: 480px) {
    .login-wrapper{
        border-top-left-radius: 60px!important;
        border-top-right-radius: 60px!important;
        border-bottom-left-radius: 0!important;
    }
    .practice-wrapper{
        border-radius: 0!important;
    }
    .ragu-ragu-wrapper{
        bottom: unset;
        position: static!important;
        padding-bottom: 50px;
    }
    .question-wrapper{
        min-height: auto;
    }
    .bg-welcome{
        min-height: auto!important;
    }
    .welcome-text{
        padding: 50px 0 0;
    }
    .text-username{
        color: rgba(0, 99, 22, 1);
    }
    .number-wrapper{
        width: 100%;
        overflow-x: scroll;
        flex-wrap: nowrap!important;
        border: 0;
        padding-bottom: 10px;
    }
    #nextTab,#submitTest{
        background-color: rgb(199, 210, 232, 1);
        color: rgba(117, 148, 124, 1)!important;
    }
    #prevTab{
        background-color: rgba(240, 251, 243, 1);
        color: rgba(117, 148, 124, 1)!important;
    }
    .soal-number{
        border-radius: 50%!important;
        padding: 15px 0;
    }
    .nomor-soal-wrapper{
        background-color: transparent!important;
    }
    .button-custom-1{
        background: #4087FF;
        box-shadow: 0px 3.4348926544189453px 2.7479140758514404px 0px rgba(0, 99, 22, 0.0217), 0px 8.687101364135742px 6.949680805206299px 0px rgba(0, 99, 22, 0.0311), 0px 17.720870971679688px 14.176697731018066px 0px rgba(0, 99, 22, 0.0389), 0px 36.501644134521484px 29.201316833496094px 0px rgba(0, 99, 22, 0.0483), 0px 100px 80px 0px rgba(0, 99, 22, 0.07)!important;
        color: white;
        border-radius: 2rem!important;
    }
  }
  @media only screen and (max-width: 373) {
    .time-wrapper{
        gap: 0.25rem!important;
    }
  }
  @media only screen and (min-width: 769px) and (max-width:1200px){
    .login-banner{
        padding: 0 5rem!important;
    }
  }