:root {
    /* --cce-klant-logo:url('https://assets.compucase.nl/themes/dugardijn/logo.png'); */
    --cce-klant-logo:url('https://dugardijn.compucase.nl/ords/20501/huisstijl/asset/main');

    /* ========== DEFAULT KLEUREN ========== */

    /* Zet primaire kleuren */
    --primary-color: #162b45;
    --primary-color-light: #2a3f5a;
    --primary-color-dark: #0f1f33;
    --primary-contrast: #ffffff;

    /* Zet primare RGB kleuren voor RGBA gebruik */
    --primary-color-rgb: 22, 43, 69;
    --primary-contrast-rgb: 255, 255, 255;

    /* Zet accent kleuren */
    --accent-color: #ff8200;
    --accent-color-light: #ff9a33;
    --accent-color-dark: #e67300;
    --accent-contrast: #ffffff;

    /* Zet primare RGB kleuren voor RGBA gebruik */
    --accent-color-rgb: 255, 130, 0;
    --accent-contrast-rgb: 255, 255, 255;

    /* ========== DEFAULT VARIABELEN ========== */

    /*  Navigatie bovenste balk kleuren */
    --cce-nav-top-bg-color: var(--primary-contrast);
    --cce-nav-top-text-color: var(--primary-color);

    /*  Navigatie onderste balk achtergrondkleur */
    --cce-nav-bottom-bg-color: var(--primary-color);
    --cce-nav-bottom-text-color: var(--primary-contrast);

    /* Navigatie actief item kleuren  */
    --cce-active-menu-bg-color: var(--primary-color);
    --cce-active-menu-text-color: var(--primary-contrast);

    /* Navigatie submenu hover kleuren */
    --cce-active-submenu-bg-color: var(--accent-color);
    --cce-active-submenu-text-color: var(--accent-contrast);

    /* Link caret icoon kleuren */
    /* Caret default */
    --cce-menu-icon-color: rgba(var(--primary-contrast-rgb), 0.8);
    --cce-menu-icon-border-color: rgba(var(--primary-contrast-rgb), 0.2);
    --cce-menu-icon-bg-color: transparent;

    /* Caret actief menu item */
    --cce-active-menu-icon-color: rgba(var(--accent-contrast-rgb), 0.8);
    --cce-active-menu-icon-border-color: rgba(var(--accent-contrast-rgb), 0.2);
    --cce-active-menu-icon-bg-color: var(--accent-color);
    
    /* Caret open menu item */
    --cce-open-menu-icon-color: rgba(var(--accent-contrast-rgb), 0.8);
    --cce-open-menu-icon-border-color: rgba(var(--accent-contrast-rgb), 0.2);
    --cce-open-menu-icon-bg-color: var(--accent-color);

    /* Dropdown navigatie link seperator */
	/* Bug: wordt niet gebruikt maar is eigenlijk ook niet nodig */
    --cce-menu-seperator-color: var(--accent-color);

    /* Navigatiebalk bedrijfsnaam kleuren en display (om te verbergen) */
    --cce-logo-bedrijfsnaam-bg-color: var(--primary-color-light);
    --cce-logo-bedrijfsnaam-text-color: var(--primary-contrast);
    --cce-bedrijfsnaam-display: none;

    /* Hero icoon achtergrond en tekstkleur */
    --ut-hero-region-icon-background-color: var(--accent-color);
    --ut-hero-region-icon-text-color: var(--accent-contrast);

    /* Links kleur */
    --ut-link-text-color: var(--primary-color);

    /* Logo hoogte en breedte */
    --ut-header-logo-height: 48px;
    --cce-max-logo-width: 400px;
    --image-width: auto;
	--cce-logo-height: var(--ut-header-logo-height);
    --cce-logo-height-login: 80px;

    /* Login scherm */
    /* --cce-login-header-bg-color: #fbf9f8; */
    --cce-login-header-bg-color: rgba(var(--primary-color-rgb), 0.15);
    --cce-login-header-text-color: #000;
    --cce-login-header-text-display: none;
    --ut-login-region-background-color: var(--primary-contrast);
    --cce-tabs-bg-color: rgba(var(--primary-colo-rgb), 0.1);
    --cce-tabs-hover-bg-color: rgba(var(--primary-color), 0.2);
    --cce-tabs-text-color: black;
}


/* Button */
.t-Button--hot {
    --a-button-background-color: var(--primary-color);
    --a-button-text-color: var(--primary-contrast);
    --a-button-hover-background-color: var(--accent-color);
    --a-button-hover-text-color: var(--accent-contrast);
    --a-button-active-background-color: var(--accent-color);
	--ut-focus-outline-color: var(--accent-color-light);
}

/* Logo applicatie */
.t-Header-logo img {
    width: var(--image-width);
    height: var(--cce-logo-height);
    content: var(--cce-klant-logo);
}

/* Logo inlogscherm */
#cce_login_logo {
    width: var(--image-width);
    height: var(--cce-logo-height-login);
    content: var(--cce-klant-logo);
}

.t-Login-region {
    border-color: rgba(var(--primary-color-rgb), 0.3);
}