html.dark {
    --bs-body-bg: #121212;
    --bs-body-color: #e5e5e5;
    --card-bg: #1e1e1e;
    --border-color: #333;
    --bs-dark-rgb: #fff;
}

html.dark .navbar {
    --bs-navbar-bg: #1e1e1e;
    --bs-navbar-color: #ffffff;
    --bs-navbar-hover-color: #ff9800;
    --bs-navbar-brand-color: #ffffff;

    background-color: var(--bs-navbar-bg) !important;
}
html.dark .navbar {
    --bs-navbar-active-color: #6b5c5c !important;
}

html.dark .navbar-toggler{
    --bs-border-width: 0px;
}

.form-control-main {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

html.dark .form-control-main {
    background-color: #1e1e1e !important;
    color: #fff !important;
    border: 1px solid #1e1e1e;
}

.navbar {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

.card, .container, .alert {
    background: var(--card-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--border-color) !important;
}

a {
    color: #9ecbff;
}