@font-face {
    font-family: "Sixtyfour";
    src: url("fonts/Sixtyfour[BLED,SCAN].woff2") format("woff2");
}

:root {
    --navbar-height: 56px;
    --sidemenu-width: 230px;
    --sidemenu-width-collapsed: 65px;

    --is-body-bg: #f2f5f7;

    --is-ascii-frame-bg: #ffffff;

    --is-navbar-bg: #0d47a1;
    --is-navbar-divider: #ffffff;

    --btn-navbar-bg: #2c55ad;
    --btn-navbar-bg-hover: #3a61b3;
    --btn-navbar-color: #ffffff;
    --btn-navbar-color-hover: #ffffff;

    --is-nav-link-color-hover: #000;
    --is-nav-link-bg-hover: #e0ebf7;
    --is-nav-link-color-active: #fff;
    --is-nav-link-bg-active: #1863d1;
    --is-nav-link-icon: #dadada;

    --is-card-link-color: var(--bs-link-color);

    --container-max-xxxl: 1600px;
    --container-max-xxxl-wide: 1520px;
}

.navbar {
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
}

.navbar .btn-light {
    --bs-btn-bg: #d8e3ff;
    --bs-btn-color: #212529;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #c1d2ff;
    --bs-btn-active-bg: #c1d2ff;
}

.top-navbar {
    --is-top-navbar-bg: #ffffff;
    --is-top-navbar-link: #575757;
    --is-top-navbar-hover-bg: #3498db;
    --is-top-navbar-hover-color: #ffffff;
    --is-top-navbar-active-bg: #3498db;
    --is-top-navbar-active-color: #ffffff;
}

.ascii-art-label, .breadcrumb-container {
    --is-ascii-art-label-bg: #ffffff;
    --is-ascii-art-label-color: #000000;
    --is-ascii-art-label-btn-color: #575757;
    --is-ascii-art-label-border-color: #dee2e6;
}

.sidebar .nav-link {
    --bs-nav-link-color: #191818;
}

#mainContent .card {
    --bs-card-bg: #fff;
    --bs-card-color: rgb(33, 37, 41);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
}

#mainContent .card-href:hover {
    --is-card-href-hover-bg: #f1f4f6;
}

#mainContent .card.invert-colors {
    --bs-card-bg: #000;
    --bs-card-color: rgb(239, 241, 244);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.175);
}

.card-header {
    --is-card-cap-icon: #7e7e7e;
    --is-card-cap-icon-hover: #000;
}

.alert-desktop {
    --is-primary-color:#052c65;
    --is-primary-bg: #eff6ff;
    --is-primary-border: #7db1ff;
    --is-primary-link:#fff;
}

.btn-main-content {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2469cd;
    --bs-btn-border-color: #2469cd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2469cd;
    --bs-btn-disabled-border-color: #2469cd;
}

.btn-main-content-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #e8e8e8;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.timeline {
    --is-timeline-color: #4C84C2FF;
    --is-timeline-dot-color: #ffffff;
    --is-timeline-header-bg: #f2f2f6;
}

@media (max-width: 991.98px) {
    :root {
        --is-navbar-divider: #000;
    }

    .sidemenu .nav-link {
        --bs-nav-link-color: #191818;
    }
}

@media (min-width: 992px) {
    .sidemenu .nav-link {
        --bs-nav-link-color: #fff;
    }
}

/* ================ */
/* ===== Dark ===== */
/* ================ */
:root[data-bs-theme="dark"] {
    --is-body-bg: #212529;

    --is-ascii-frame-bg: #16171b;
}

:root[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: #1a1d21!important;
}

:root[data-bs-theme="dark"] .top-navbar {
    --is-top-navbar-bg: #1a1d21;
    --is-top-navbar-link: #d0d0d0;
    --is-top-navbar-hover-bg: #2c3e50;
    --is-top-navbar-hover-color: #ffffff;
    --is-top-navbar-active-bg: #4c8cff;
    --is-top-navbar-active-color: #ffffff;
}

:root[data-bs-theme="dark"] .ascii-art-label,
:root[data-bs-theme="dark"] .breadcrumb-container {
    --is-ascii-art-label-bg: #16171b;
    --is-ascii-art-label-color: #e0e0e0;
    --is-ascii-art-label-btn-color: #bdbdbd;
    --is-ascii-art-label-border-color: #333333;
}

:root[data-bs-theme="dark"] .sidebar .nav-link {
    --bs-nav-link-color: #e0e0e0;
}

:root[data-bs-theme="dark"] .ascii-frame {
    border-image: url("/images/ascii-frame.dark.png") 15 / 15px / 0 round;
}

:root[data-bs-theme="dark"] #mainContent .card {
    --bs-card-bg: #16171b;
    --bs-card-color: #d8d9d;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.20);
}

:root[data-bs-theme="dark"] .alert-desktop {
    --is-primary-color: #dbe8ff;
    --is-primary-bg: #102030;
    --is-primary-border: #3d6fb5;
    --is-primary-link: #ffffff;
}

:root[data-bs-theme="dark"] #mainContent .card-href:hover {
    --is-card-href-hover-bg: #2a2d31;
}

:root[data-bs-theme="dark"] .timeline {
    --is-timeline-color: #58a6ff;
    --is-timeline-dot-color: #16171b;
    --is-timeline-header-bg: #1e2127;
}

@media (max-width: 991.98px) {
    :root[data-bs-theme="dark"] .sidemenu .nav-link {
        --bs-nav-link-color: #ece5e5;
    }
}