/* Theme start */

:root {
    /*
    THEMA KLEUREN

    - Vervang de onderstaande HEX codes met de gewenste thema kleuren
    - Om variabelen te gebruiken plaats deze dan binnen de functie var()
    - Pas de naam van variabelen niet aan om fouten te voorkomen
    */
    --color-gray-light: #ebedf0;
    --color-gray: #adb8c3;
    --color-gray-dark: #334E68;

    --color-primary-light: #ff8873;
    --color-primary: #e96757;
    --color-primary-dark: #a7483b;

    --color-secondary-light: #b5d633;
    --color-secondary: #f3671d;
    --color-secondary-dark: #82a300;

    /*
    GEAVANCEERDE KLEUROPTIES

    - Pas de waardes aan van de onderstaande variabelen met uw HEX of RGB(A) code of een van de bovenstaande variabelen
    */

    /* Pagina achtergrond */
    --body-bg: url(background-image.jpg) no-repeat center var(--color-gray-light); /* 8 */

    /* Header */
    --header-bg: var(--color-primary); /* 1 */
    --header-border: var(--color-primary-dark); /* 1 */
    --header-brand: #FFF; /* 2 */
    --header-text: rgba(255,255,255,.6); /* 2 */
    --header-link: #FFF; /* 2 */

    /* Footer */
    --footer-bg: var(--color-gray-dark); /* 9 */
    --footer-border: var(--color-gray-dark);
    --footer-text: rgba(255,255,255,.6); /* 10 */
    --footer-link: #fff; /* 10 */

    /* Teksten */
    --title-primary: var(--color-primary);
    --title-secondary: var(--color-secondary);
    --text-primary: var(--color-primary);
    --text-secondary: var(--color-secondary);
    --text-body: var(--color-gray-dark);

    /* Cards */
    --card-header-bg: var(--color-primary); /* 4 */
    --card-header-text: #FFF; /* 5 */
    --card-content-bg: #FFF; /* 6 */
    --card-content-text: var(--text-body); /* 7 */

    /* Buttons */
    --button-primary: var(--color-secondary);
    --button-primary-text: #FFF;
    --button-secondary: var(--color-secondary);
    --button-secondary-text: #FFF;
    --button-default: var(--color-gray-dark);
    --button-default-text: #FFF;

    /* Borders */
    --border-color: var(--color-gray);

    /*
    LOGO OPTIES
    */

    --logo: block;
    --no-logo: none;

    /* Logo position - start, center, flex-end */
    --logo-position: center;
}

/*
THEMA STIJL

Onderstaande regels niet aanpassen.
*/

/*
PAGINA ACHTERGROND
*/
.body {
    background: var(--body-bg);
    color: var(--text-body);
}

/*
HEADER
*/
.header {
    background-color: var(--header-bg);
    border-bottom: solid 1px var(--header-border);
    color: var(--header-text);
}
.header a {
    color: var(--header-link);
}
.header a:hover {
    color: var(--header-link);
}
.header .navbar-brand {
    color: var(--header-brand);
}

/* Footer */
.footer {
    background-color: var(--footer-bg);
    border-top: solid 1px var(--footer-border);
    color: var(--footer-text);
}
.footer a {
    color: var(--footer-link);
}
.footer a:hover {
    color: var(--footer-link);
}

/* Cards */
.card-header {
    background-color: var(--card-header-bg);
    color: var(--card-header-text);
}
.card-content {
    background-color: var(--card-content-bg);
    color: var(--card-content-text);
}

/* Teksten */
.title-primary {
    color: var(--title-primary);
}
.title-secondary {
    color: var(--title-secondary);
}
.text-body {
    background-color: var(--text-body);
}
.text-primary {
    background-color: var(--text-primary);
}
.text-secondary {
    background-color: var(--text-secondary);
}
.text-white {
    background-color: #fff;
}
.text-white-60 {
    background-color: rgba(255,255,255,.6);
}
.text-black {
    background-color: #000;
}
.text-black-60 {
    background-color: rgba(0,0,0,.6);
}

/* Buttons */
.button-solid-white,
.button-solid-white:hover{
    background-color: #fff;
    color: var(--text-body);
}
.button-solid-black,
.button-solid-black:hover {
    background-color: #000;
    color: #fff;
}
.button-solid-primary,
.button-solid-primary:hover,
.button-solid-primary:focus {
    background-color: var(--button-primary);
    color: #fff;
}
.button-solid-secondary,
.button-solid-secondary:hover,
.button-solid-secondary:focus {
    background-color: var(--button-secondary);
    color: #fff;
}
.button-solid-default,
.button-solid-default:hover,
.button-solid-default:focus {
    background-color: var(--button-default);
}
.button-outline-white,
.button-outline-white:hover,
.button-outline-white:focus {
    border: solid 1px #fff;
    color: #fff;
}
.button-outline-primary,
.button-outline-primary:hover,
.button-outline-primary:focus {
    border: solid 1px var(--button-primary);
    color: var(--button-primary);
}
.button-outline-secondary,
.button-outline-secondary:hover,
.button-outline-secondary:focus {
    border: solid 1px var(--button-secondary);
    color: var(--button-secondary);
}
.button-outline-default,
.button-outline-default:hover,
.button-outline-default:focus {
    border: solid 1px var(--button-default);
    color: var(--button-default);
}

/* Borders */
.border {
    border-top: solid 1px var(--border-color);
    border-right: solid 1px var(--border-color);
    border-bottom: solid 1px var(--border-color);
    border-left: solid 1px var(--border-color);
}

/*
ICONS
*/
.spinner-icon {
    color: var(--color-primary-light);
}

/* Theme end */

.card-action img  {
    height: 16px;
    width: 16px;
    margin-right: 8px;
    margin-top: -0.25rem;
}
.card-content:first {
    height: 75px;
}

/* Tour fix*/
.popover.right>.arrow {
    left: -16px;
}