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

    /*  Navigatie bovenste balk kleuren */
    --cce-nav-top-bg-color: #ECEDED;
    --cce-nav-top-text-color: #000;

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

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

    /* Navigatie submenu hover kleuren */
    --cce-active-submenu-bg-color: #BB954A;
    --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: #BB954A;

    /* 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: #BB954A;
    --cce-logo-bedrijfsnaam-text-color: white;
    --cce-bedrijfsnaam-display: none;


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

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

    /* Logo hoogte en breedte */
    --ut-header-logo-height: 100px;
    --cce-max-logo-width: 150px;
	--cce-logo-height: 50px;

    /* Login scherm */
    --cce-login-header-bg-color: #fff;
    --cce-login-header-text-color: #000;
    --cce-login-header-text-display: none;

    --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: #BB954A;
    --a-button-text-color: #ffffff;
    --a-button-hover-background-color: #a5813e;
    --a-button-hover-text-color: var(--a-button-text-color);
    --a-button-active-background-color: #a5813e;
}

/* Logo applicatie */
.t-Header-logo img {
    --image-width: 220px;
    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: 10px;
    margin-right: 15px;
    margin-left: 3px;
}

/* 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: 100px;
    background-size: contain;
    background-position: center;
    padding-left: var(--image-width);
    margin-top: 15px;
    padding-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}