:root {
    --cs-input-bg: #111827; /* feltbakgrunn */
    --cs-input-fg: #e6edf3; /* felttekst */
    --cs-input-muted: #9fb0c8; /* placeholder */
    --cs-input-border: #263143; /* kant */
    --cs-input-focus: #2f81f7; /* fokusfarge */
    --cs-menu-bg: #0b0f14; /* dropdown-bakgrunn */
    --cs-menu-hover: #162032; /* dropdown-hover */
}

/* tekstfelt, textarea, tall, passord osv. */
.form-control, .form-control:disabled, .form-control[readonly] {
    background-color: var(--cs-input-bg) !important;
    color: var(--cs-input-fg) !important;
    border-color: var(--cs-input-border) !important;
}

    .form-control::placeholder {
        color: var(--cs-input-muted);
        opacity: .8;
    }

    .form-control:focus {
        background-color: var(--cs-input-bg) !important;
        color: var(--cs-input-fg) !important;
        border-color: var(--cs-input-focus) !important;
        box-shadow: 0 0 0 .2rem rgba(47,129,247,.15) !important;
    }

/* select */
.form-select {
    background-color: var(--cs-input-bg) !important;
    color: var(--cs-input-fg) !important;
    border-color: var(--cs-input-border) !important;
}

    .form-select:focus {
        border-color: var(--cs-input-focus) !important;
        box-shadow: 0 0 0 .2rem rgba(47,129,247,.15) !important;
    }

/* input-grupper / labels */
.input-group-text {
    background-color: #0e1626 !important;
    color: var(--cs-input-fg) !important;
    border-color: var(--cs-input-border) !important;
}

/* checkbox/radio */
.form-check-input {
    background-color: var(--cs-input-bg) !important;
    border-color: var(--cs-input-border) !important;
}

    .form-check-input:checked {
        background-color: var(--cs-input-focus) !important;
        border-color: var(--cs-input-focus) !important;
    }

.form-check-label {
    color: var(--cs-input-fg);
}

/* dropdowns/menyer */
.dropdown-menu {
    background-color: var(--cs-menu-bg) !important;
    color: var(--cs-input-fg) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
}

.dropdown-item {
    color: var(--cs-input-fg) !important;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--cs-menu-hover) !important;
        color: #fff !important;
    }

/* vali­dasjonstekst lysere på mørk */
.text-muted, .form-text {
    color: var(--cs-input-muted) !important;
}
@media (min-width: 992px) {
    .offcanvas-end {
        width: 420px;
    }
}