@media (prefers-color-scheme: dark) {
    :root {
        --iti-border-color: #495057;
        --iti-country-selector-bg: #212529;
        --iti-icon-color: #dee2e6;
        --iti-hover-color: #30363d;
    }
}

:root{
    --bs-body-font-family: Inter;
    --bs-btn-font-family: var(--bs-body-font-family);
    --accent-bt-blue: #125bee;
    --accent-yellow: #FFCF34;
    --accent-red: #f3325e;
    --accent-green: #07d582;
    --bs-danger-rgb: 243,50,94;
    --bs-secondary-rgb: 18, 31, 58;

    /* --bs-border-color: #495057; */
    --bs-border-color: #26303a;

    
    /* --bs-nav-pills-link-active-bg: var(--accent-bt-blue) !important; */



    --iti-border-color: #495057;
    --iti-country-selector-bg: #212529;
    --iti-icon-color: #dee2e6;
    --iti-hover-color: #30363d;

    --safe-top: env(safe-area-inset-top);
    --safe-right: env(safe-area-inset-right);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);

    

}

a {
    text-decoration: none !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--accent-bt-blue);
}

@keyframes iconGlow {
    0%, 100% {opacity: 0.5;}
    50% {opacity: 1;}
}
.icon-glow {
    animation: iconGlow 1.5s ease-in-out infinite;
}

.form-check-input.accent-check-input:checked {
    background-color: var(--accent-yellow);
    border-color: var(--accent-yellow);
}

.btn-warning {
    --bs-btn-bg: var(--accent-yellow) !important;
}

.bg-warning {
    /* background-color: rgba(var(--bs-warning-rgb),var(--bs-bg-opacity)) !important; */
    background-color: var(--accent-yellow) !important;
}

.bg-secondary {
    /* background-color: rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity)) !important; */
    background-color: rgb(241, 241, 241) !important;
}

.bg-blue {
    background-color: var(--accent-bt-blue) !important;
}

.text-warning {
  color: var(--accent-yellow) !important;
}

.btn-danger {
    --bs-btn-bg: var(--accent-red) !important;
}

.btn-success {
    --bs-btn-bg: var(--accent-green) !important;
}
.btn-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-bt-blue);
  --bs-btn-border-color: var(--accent-bt-blue);

  --bs-btn-hover-bg: rgb(8, 73, 203);
  --bs-btn-active-bg: #0942b3;
  --bs-btn-active-border-color: rgb(9 66 179);

  --bs-btn-disabled-bg: var(--accent-bt-blue);
  --bs-btn-disabled-border-color: var(--accent-bt-blue);
}

.__btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #000f2d;
  --bs-btn-border-color: #000f2d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(0, 12.75, 38.25);
  --bs-btn-hover-border-color: #000c24;
  --bs-btn-focus-shadow-rgb: 38,51,77;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000c24;
  --bs-btn-active-border-color: rgb(0, 11.25, 33.75);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #000f2d;
  --bs-btn-disabled-border-color: #000f2d;
}


.fs-7 {
    font-size: .850rem !important;
}
.fs-8 {
    font-size: .700rem !important;
}
.ratio-3x4 {
    aspect-ratio: 3/4;
}
.wh-48 {
    width: 48px;
    height: 48px;
}
.wh-50 {
    width: 50px;
    height: 50px;
}
.wh-64 {
    width: 64px;
    height: 64px;
}