/*
blue: 2682B7
blue-dark: 0D699E
blue-light: E6F0FA
black: 010609
red: DC3644
*/

html {
    font-size: 16px;
}

body {
    color: #010609;
    overflow-y: scroll;
    padding-top: 56px;
}

.text-blue {color: #2682B7;}
.text-blue-dark {color: #0D699E;}

.bg-blue {background-color: #2682B7;}
.bg-blue-dark {background-color: #0D699E;}

.border-blue {border-color: #2682B7!important;}
.border-blue-dark {border-color: #0D699E;}

h1, h2 {font-size: 22px;}
h3, h4 {font-size: 20px;}
h5, h6 {font-size: 18px;}

.fw-bolder {font-weight: 500!important;}

p {margin-bottom: 0.5rem;}

a {color: #0D699E;}
a:hover, a:active, a:focus {color: #2682B7; text-decoration: none;}

.btn-primary {
    background: #2682B7;
    border-color: #2682B7;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    background: #0D699E !important;
    border-color: #0D699E !important;
    outline: none !important;
}

button, input, select, textarea {
    touch-action: manipulation;
}

.cursor-pointer {
    cursor: pointer;
}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background-color: #f2f2f2;}
::-webkit-scrollbar-thumb {background-color: #ccc;}
::-webkit-scrollbar-thumb:hover {background-color: #bfbfbf; }

/* -------------------- NAVBAR -------------------- */

.navbar-brand {
    font-size: 18px;
}

.navbar .navbar-toggler, .dropdown-toggle {
    border-color: transparent;
    outline: none;
    box-shadow: none;
}

.navbar .dropdown-item:active {
    color: #010609;
    background-color: #dee2e6;
}

/* -------------------- HOME -------------------- */

.home .nav-pills .nav-link {
    color: #0D699E;
}

.home .nav-pills .nav-link.active,
.home .nav-pills .show>.nav-link {
    color: #fff;
    background: #2682B7;
    border: 0!important;
}

.home .btn-light {
    color: #010609;
    background-color: #fff;
    border: 1px solid #dee2e6!important;
}

.home .btn-light:hover,
.home .btn-light:active,
.home .btn-light:focus,
.home .btn-light:not(:disabled):not(.disabled):active {
    color: #010609;
    background-color: #fff;
    border: 1px solid #dee2e6!important;
}

/* -------------------- TEST -------------------- */

#confirmSubmitModal .modal-dialog {
    max-width: 320px;
    margin-right: auto;
    margin-left: auto;
}

.test .image {
    font-size: 20px;
    height: 25vh;
}

.test .image img {
    max-height: 100%;
    object-fit: contain;
}

.test .text-black-25 {
    color: rgba(0,0,0,.25)!important 
}

/* Radio / Checkbox */

.test .btn-check:disabled+.btn,
.test .btn-check[disabled]+.btn {
    opacity: 1;
}

.btn-check:disabled + .custom-radio-label::before,
.btn-check[disabled] + .custom-radio-label::before,
.btn-check:disabled + .custom-checkbox-label::before,
.btn-check[disabled] + .custom-checkbox-label::before {
    border-color: #2682B7 !important;
}

.custom-radio-label,
.custom-checkbox-label {
    position: relative;
    padding-left: 2rem;
    border: 1px solid #dee2e6;
}

/* Radio */
  
.custom-radio-label::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    background-color: transparent;
}

.custom-radio-label::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #2682B7;
    opacity: 0;
}

.btn-check:checked + .custom-radio-label::before {
    border-color: #2682B7;
}

.btn-check:checked + .custom-radio-label::after {
    opacity: 1;
}

.btn-check:hover + .custom-radio-label,
.btn-check:focus + .custom-radio-label {
    border: 1px solid #dee2e6;
}

.btn-check:checked + .custom-radio-label {
    border: 1px solid #dee2e6;
}

.btn-check:checked:not([disabled]) + .custom-radio-label {
    background-color: #E6F0FA;
    border: 1px solid #2682B7;
}

/* Checkbox */

.custom-checkbox-label::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background-color: transparent;
}

.custom-checkbox-label::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232682B7' stroke-width='2' d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.3 7.3-7.3a1 1 0 0 1 1.4 0z'/%3e%3c/svg%3e");
    background-size: 0.90rem 0.90rem;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
    opacity: 0;
}

.btn-check:checked + .custom-checkbox-label::before {
    border-color: #2682B7;
}

.btn-check:checked + .custom-checkbox-label::after {
    opacity: 1;
}

.btn-check:hover + .custom-checkbox-label,
.btn-check:focus + .custom-checkbox-label {
    border: 1px solid #dee2e6;
}

.btn-check:checked + .custom-checkbox-label {
    border: 1px solid #dee2e6;
}

.btn-check:checked:not([disabled]) + .custom-checkbox-label {
    background-color: #E6F0FA;
    border: 1px solid #2682B7;
}

/* -------------------- TEST NAVIGATION -------------------- */

.test-nav #pills-tab {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    white-space: nowrap;
    /* scroll-behavior: smooth; */
}

.test-nav #pills-tab::-webkit-scrollbar {
    display: none;
}

.test-nav .nav-link {
    font-size: 14px;
    color: #010609;
    min-width: 36px;
    padding: 5px 8px;
    border: 1px solid #dee2e6;
}

.test-nav .nav-pills .nav-link.active,
.test-nav .nav-pills .show>.nav-link {
    background: #2682B7;
    border-color: #2682B7;
}

.test-nav button {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.test-nav .btn-primary {
    background: #2682B7;
    border-color: #2682B7;
}

.test-nav .btn-primary:hover,
.test-nav .btn-primary:focus,
.test-nav .btn-primary:active,
.test-nav .btn-primary:focus-visible {
    background: #1E6D99;
    border-color: #1E6D99;
    outline: none;
}

.test-nav .nav-pills .nav-link.active.bg-success,
.test-nav .nav-pills .nav-link.active.bg-danger {
    opacity: 0.8;
}

.test-nav #pills-result-tab {
    opacity: 1;
}

.test-nav #pills-result-tab.active {
    opacity: 0.8;
}

/* -------------------- MAX-WIDTH: 359.98 -------------------- */

@media (max-width: 359.98px) {
    html {
        font-size: 14px;
    }
    h1, h2 {font-size: 20px;}
    h3, h4 {font-size: 18px;}
    h5, h6 {font-size: 16px;}
    .atd {
        display: none;
    }
    .navbar-brand {
        font-size: 16px;
    }
}

/* -------------------- MAX-WIDTH: 575.98 -------------------- */

@media (max-width: 575.98px) {
    
}

/* -------------------- MIN-WIDTH: 576 SM -------------------- */

@media (min-width: 576px) {

}

/* -------------------- MIN-WIDTH: 768 MD -------------------- */

@media (min-width: 768px) {
    .test .question {
        min-height: 400px;
    }
    .test-nav .nav-pills {
        flex-wrap: wrap !important;
    }
}

/* -------------------- MIN-WIDTH: 992 LG -------------------- */

@media (min-width: 992px) {

}