:root {
    --primary: #067c4a;
    --primaryHover: rgba(6, 124, 74, 0.75);
    --primaryBorder: #067c4a;
    --primaryFaded: rgba(6, 124, 74, 0.5);
    --primaryText: white;
    --primaryContrast: #EEF6F0;
    --primaryContrastFaded: #EEF6F0;
    --primaryContrastInvis: rgba(238, 246, 24, 0.5);
    --errorFaded: lightcoral;
    --fadedBorder: #e5e5e5;
    --secondary: gray;
    --secondaryFaded: rgb(222,222,222);
    --secondaryText: white;
    --navlink: #343a40;
    --navlinkFocus: black;
}


html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.logo {
    align-items: center;
    display: flex;
}

.btn-login {
    background-color: #f8aabd;
    color: #1d1d1d;
    border-radius: 20px;
    font-weight: 800;
}

    .btn-login:hover {
        background-color: rgba(248, 170, 189, 0.75);
    }
    .btn-login:focus, .btn-login:active {
        box-shadow: none;
    }

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primaryBorder);
}

    .btn-primary:hover {
        background-color: var(--primaryHover);
        border-color: var(--primaryHover);
    }

    .btn-primary:focus, .btn-primary:active {
        box-shadow: 0 0 0 0.25rem var(--primaryContrastInvis) !important;
    }

.bg-fadedgreen {
    background-color: var(--primaryContrast);
}

.bg-darkgreen {
    background-color: var(--primary);
}

.txt-darkgreen {
    color: var(--primary);
}

.ralewayFont {
    font-family: 'Raleway';
}

.sidebar {
    border-radius: 5px;
    background-color: #93D0D7;
    padding: 10px 10px 10px 10px;
}

.btn-sidebar {
    background-color: transparent;
    border-radius: 5px;
    border-style: dashed;
    border-color: var(--primaryBorder);
    color: black;
    font-size: 15px;
    font-weight: 700
}

    .btn-sidebar:hover {
        background-color: #EEEEEE;
    }

.btn-sidebar-active {
    background-color: var(--primary);
    border-radius: 5px;
    color: white;
    font-size: 15px;
    font-weight: 700;
}

    .btn-sidebar-active:hover {
        background-color: var(--primaryHover);
        color: white;
    }

h1.txt-darkgreen {
    font-size: 30px;
    font-weight: 700;
}

th.txt-darkgreen {
    font-size: 16px;
    font-weight: 700;
}

.btn-raadplegen {
    background-color: var(--primaryFaded);
    border-radius: 0px;
    color: black;
}

    .btn-raadplegen:hover {
        background-color: var(--primaryHover);
        color: black;
    }

    .btn-raadplegen:focus, btn-raadplegen:active {
        box-shadow: none;
    }

.border-grey {
    border-color: #d3d3d3
}


.btn-outline-primary {
    color: var(--primary);
    border: 1px solid var(--primaryBorder);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary.focus {
        color: var(--primaryText);
        background: var(--primary);
        border-color: var(--primaryBorder);
    }

    .btn-outline-primary:focus,
    .btn-outline-primary.focus {
        box-shadow: 0 0 0 0.2rem var(--primaryContrastInvis);
    }

    .btn-outline-primary.disabled,
    .btn-outline-primary:disabled {
        color: var(--primaryFaded);
        background: transparent;
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: var(--primaryText);
        background: var(--primaryHover);
        border-color: var(--primaryBorder);
    }

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
        .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem var(--primaryContrastInvis);
        }