:root {
    --OcapGroen: #78b928;
    --OcapGroen2: #5cb85c;
    --GreenBackLight: #b6e7b6; /*#EDF6E2*/
    --GreenForest: #2d862d;
    --GreenLight: #8ccf8c;
    --GreenBackDark: #0c4b0c;
    --DonkerGrijs: #6e7878;
    --MintGroen: #28b9aa;
    --VistaBlue: #8bd0af;
    --Tusk: #f2f4cd;
    --Olivine: #9cc87e;
    --Roze: #b92878;
    --Rood: #b94728;
    --ash-gray: #9fa89aff;
    --silver: #bebab7ff;
    --cal-poly-green: #27401eff;
    --fern-green: #547125ff;
    --battleship-gray: #898f95ff;
}

/* ===== Navbar ===== */
.navbar-main {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.navbar-main .navbar-brand {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cal-poly-green);
}

/* Uniform link metrics; overrides Bootstrap's responsive nav-link padding
   so the spacing between items is identical in every state. nowrap keeps
   labels like "Dosering overzicht" on one line — the navbar collapses to
   the hamburger menu (expand-xl) before items would run out of room. */
.navbar-main .navbar-nav .nav-link {
    padding: .45rem .65rem;
    border-radius: .4rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--DonkerGrijs);
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

    .navbar-main .navbar-nav .nav-link:hover,
    .navbar-main .navbar-nav .nav-link:focus {
        color: var(--cal-poly-green);
        background-color: rgba(120, 185, 40, .12);
    }

@media (min-width: 1200px) {
    .navbar-main .navbar-nav {
        align-items: center;
        gap: .15rem;
    }
}

.navbar-main .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: .4rem;
}

.navbar-main .dropdown-item {
    border-radius: .35rem;
    padding: .4rem .75rem;
}

    .navbar-main .dropdown-item:hover,
    .navbar-main .dropdown-item:focus {
        color: var(--cal-poly-green);
        background-color: rgba(120, 185, 40, .12);
    }

.pageTitle {
    color: #222;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: -.01em;
}

html {
    height: 100%;
}

.partner-logo {
    width: 100%;
    max-width: 400px; /* or any consistent size you like */
    height: 200px; /* same height for all */
    object-fit: contain; /* keeps aspect ratio without cropping */
    margin: 0 auto;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color: var(--DonkerGrijs); /*Donkergrijs ocap*/
    background-color: #78B92833; /*OCAP achtergrond licht groen*/
    min-height: 100%;
}

/* ===== Dashboard cards =====
   Shared sharp chrome for the dashboard cards; the background colors keep
   their meaning (ash-gray = settings, silver = charts, fern-green = results). */
.cardSetting, .cardChart, .cardResult, .widgetIndex {
    border: none;
    border-radius: .65rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.cardSetting {
    background-color: var(--ash-gray);
}

.cardChart {
    background-color: var(--silver);
    padding: .6rem;
}

.cardResult {
    background-color: var(--fern-green);
}

    .cardResult .card-body .row + .row {
        border-top: 1px solid rgba(255, 255, 255, .18);
        padding-top: .4rem;
    }

.card-bodyIndex{
    color: white !important;
}

.widgetNumbers {
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.unit {
    font-size: .85em;
    opacity: .8;
}

.cardHeadIndex {
    background-color: rgba(0, 0, 0, .14);
    border-bottom: none;
    color: white;
    font-size: .85em;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.widgetIndex {
    background: linear-gradient(160deg, var(--fern-green), #3f5a1c);
    color: white;
}

    .widgetIndex p {
        margin-bottom: 0;
    }

.ddlLang {
    background-color: transparent !important;
    border: solid 0px;
    outline: 0px;
}

.container {
    height: 100%;
}

.body-content {
    /*background-color: #FFFFFF;*/ /*OCAP achtergrond wit**/
    min-height: 100%;
}

.footer {
    background-color: var(--cal-poly-green);
    color: white;
}

h1, h2, h5 {
    color: var(--OcapGroen); /*OCAP donker groen*/
}

h6::first-letter {
    text-transform: uppercase;
}

fieldset {
    padding-left: 4px;
    padding-right: 4px;
}

legend {
    background-color: var(--DonkerGrijs);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

a.anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

.nav-tabs .nav-link {
    color: var(--OcapGroen);
}

.resultTbx {
    color: white;
    border: none;
    border-radius: .45rem;
    font-weight: 600;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.btn-default {
    color: white;
    background-color: var(--OcapGroen); /*OCAP donker groen*/
}

.btn-secondary {
    background-color: #6e7878; /*ocap donker grijs*/
    outline: none;
}

.btn-info {
    background-color: var(--cal-poly-green);
    border-color: var(--cal-poly-green);
    color: white;
}

    .btn-info:hover, .btn-info:focus, .btn-info:active {
        background-color: #1d3017;
        border-color: #1d3017;
        color: white;
    }

.btn {
    outline: none !important;
}

/* Dashboard progress bar in brand green instead of Bootstrap blue */
#voortgangBalk {
    background-color: var(--OcapGroen);
}

.dl-horizontal dt {
    white-space: normal;
}

/*input[type=checkbox] {*/ /*remove border selected*/
/*box-shadow: none !important;
    filter: grayscale(0.8);   
}*/

.form-control:focus {
    border-color: var(--OcapGroen2);
    box-shadow: none;
    -webkit-box-shadow: none;
}

.input-icon {
    position: relative;
}

    .input-icon > i {
        position: absolute;
        display: block;
        transform: translate(0, -50%);
        top: 50%;
        pointer-events: none;
        width: 25px;
        text-align: right;
        font-style: normal;
    }

    .input-icon > input {
        padding-left: 25px;
        padding-right: 0;
    }

.input-icon-right > i {
    text-align: right;
    padding-left: 60%;
    padding-left: 70px;
}

.input-icon-right > input {
    padding-left: 0;
    padding-right: 45px;
    text-align: right;
}

.card-header a {
    color: #6e7878;
}

.vertCenterLogo {
    max-height: 75%;
    max-width: 85%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}


div.form-inline label {
    justify-content: flex-start !important;
}

div.form-inline {
    margin-bottom: 10px;
}

.form-group {
    margin-bottom: 10px !important;
}