:root {
    --cce-klant-logo:url('https://assets.compucase.nl/themes/vnvt/logo.png');

    /*  Navigatie bovenste balk kleuren */
    --cce-nav-top-bg-color: #fff;
    --cce-nav-top-text-color: #47371e;

    /*  Navigatie onderste balk achtergrondkleur */
    --cce-nav-bottom-bg-color: #F3912D;
    --cce-nav-bottom-text-color: white;

    /* Navigatie actief item kleuren  */
    --cce-active-menu-bg-color: #E0780D;
    --cce-active-menu-text-color: white;

    /* Navigatie submenu hover kleuren */
    --cce-active-submenu-bg-color: #F3912D;
    --cce-active-submenu-text-color: #fff;

    /* Link caret icoon kleuren */
    /* Caret default */
    --cce-menu-icon-color: rgba(255, 255, 255, 0.8);
    --cce-menu-icon-border-color: rgba(255, 255, 255, 0.2);
    --cce-menu-icon-bg-color: transparent;
    /* Caret actief menu item */
    --cce-active-menu-icon-color: #fff;
    --cce-active-menu-icon-border-color: #fff;
    --cce-active-menu-icon-bg-color: transparent;
    /* Caret open menu item */
    --cce-open-menu-icon-color: #fff;
    --cce-open-menu-icon-border-color: #fff;
    --cce-open-menu-icon-bg-color: #F3912D;

    /* Dropdown navigatie link seperator */
    --cce-menu-seperator-color: rgba(255, 255, 255, 0.5);

    /* Navigatiebalk bedrijfsnaam kleuren en display (om te verbergen) */
    --cce-logo-bedrijfsnaam-bg-color: #4E2B82;
    --cce-logo-bedrijfsnaam-text-color: white;
    --cce-bedrijfsnaam-display: none;

    /* Hero icoon achtergrond en tekstkleur */
    --ut-hero-region-icon-background-color: #E0780D;
    --ut-hero-region-icon-text-color: #fff;

    /* Links kleur */
    --ut-link-text-color: #a0550b;

    /* Logo hoogte en breedte */
    --ut-header-logo-height: 98px;
    --cce-max-logo-width: 200px;
	--cce-logo-height: 39px;

    /* Login scherm */
    --cce-login-header-bg-color: #fbf9f8;
    --cce-login-header-text-color: #000;
    --cce-login-header-text-display: none;
    --ut-login-region-background-color: #f1ede9;
    --cce-tabs-bg-color: rgba(78, 43, 130, 0.1);
    --cce-tabs-hover-bg-color: rgba(78, 43, 130, 0.2);
    --cce-tabs-text-color: black;
}


/* Button */
.t-Button--hot {
    --a-button-background-color: #f3912d;
    --a-button-text-color: #ffffff;
    --a-button-hover-background-color: #e0780d;
    --a-button-hover-text-color: var(--a-button-text-color);
    --a-button-active-background-color: #e0780d;
	--ut-focus-outline-color: #c6690b;
}

/* Logo applicatie */
.t-Header-logo img {
    --image-width: 200px;
    display: block;
    box-sizing: border-box;
    background-repeat: no-repeat;
    width: var(--image-width);
    background-image: var(--cce-klant-logo);
    height: var(--cce-logo-height);
    background-size: contain;
    background-position: center;
    padding-left: var(--image-width);
    margin-top: 5px;
    margin-bottom: 5px;
    padding-bottom: 0px;
    margin-right: 2px;
    margin-left: 2px;
}

/* Logo inlogscherm */
#cce_login_logo {
    --image-width: 300px;
    background-image: var(--cce-klant-logo);
    display: block;
    box-sizing: border-box;
    background-repeat: no-repeat;
    width: var(--image-width);
    height: 60px;
    background-size: contain;
    background-position: center;
    padding-left: var(--image-width);
    margin-top: 15px;
    padding-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}