/* VOMI Academie klantstijl
   Pas de onderstaande variabelen aan zodra de definitieve huisstijl bekend is. */
:root {
    --color-primary: #049ae1;
    --color-primary-rgb: 4, 154, 225;
    --color-secondary: #1c355e;
    --color-hover: #1c355e;
    --color-active: #1c355e;
    --primary-50: #f5f8fa;
    --primary-100: #e8f0f4;
    --primary-200: #c7dbe4;
    --primary-300: #9abfce;
    --primary-400: #659bad;
    --primary-500: #049ae1;
    --primary-600: #0388c8;
    --primary-700: #0375ac;
    --primary-800: #025f8c;
    --primary-900: #01496c;
    --primary: var(--primary-500);
    --brand-secondary: #1c355e;
    --brand-secondary-600: #172c4f;
    --brand-secondary-700: #122440;
    --body-background-color: var(--primary-50);
    --navigation-bar-background-color: var(--primary-700);
    --navigation-header-text-color: rgba(255, 255, 255, .7);
    --navigation-header-border-color: rgba(255, 255, 255, .2);
    --navigation-item-text-color: #fff;
    --navigation-item-icon-color: #fff;
    --navigation-item-arrow-color: #fff;
    --navigation-item-active-text-color: #fff;
    --navigation-item-active-border-color: var(--brand-secondary);
    --navigation-item-active-background-color: #1c355e;
    --navigation-bar-footer-border-color: rgba(255, 255, 255, .2);
    --navigation-bar-footer-text-color: #fff;
    --bs-primary-rgb: 4, 154, 225;
}

/* De login gebruikt een effen VOMI-achtergrond, zonder foto, video of overlay. */
.loginwrapper {
    background: #049ae1;
}

.login-fallback-img,
.login-background-video,
.loginoverlay {
    display: none;
}

.loginlogo {
    filter: none;
}

#btnLogin,
#btnReset {
    background-color: #1c355e !important;
    border-color: #1c355e !important;
}

#btnLogin:hover,
#btnLogin:focus,
#btnReset:hover,
#btnReset:focus {
    background-color: #172c4f !important;
    border-color: #172c4f !important;
}

body h1,
body .h1 {
    color: var(--primary);
    font-weight: 600;
}

.progress-bar-wrapper {
    --progress-value-background: var(--primary);
}

.btn-primary {
    --branding-color: var(--brand-secondary);
    background-color: var(--branding-color) !important;
    border-color: var(--branding-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    --branding-color: var(--brand-secondary-600);
}

.btn-primary:active {
    --branding-color: var(--brand-secondary-700);
}