:root {
    --primary-color: #00e3af;
    --secondary-color: #f1ff00;
    --accent-color: #ff6100;
    --groen: #00e3af;
    --oranje: #ff6100;
    --roze: #ffa1ff;
    --blauw: #00a6ff;
    --geel: #fff200;
    --wit: #ffffff;
    --zwart: #000000;
}
.hover-color-geel:hover {
    color: #fff200 !important;
}
body {
    font-family: 'Roboto', sans-serif; /* Vervang 'Roboto' door het gewenste lettertype */
}


/*Login*/
#loginpage {
    min-height: 100vh; /* Zorgt ervoor dat de wrapper minimaal de hoogte van de viewport heeft */
    width: 100%;       /* Zorgt ervoor dat de wrapper de volledige breedte van de viewport vult */
    display: flex;     /* Zorgt ervoor dat de inhoud zich goed aanpast */
    flex-direction: column; /* Zorgt ervoor dat de flex items verticaal worden gestapeld */
    padding-top: 40px;
}



/*Sidebar*/
#kt_aside {
    background-color: var(--blauw);
}
#kt_aside_logo {
    background-color: var(--blauw);
}
.aside-menu .menu > .menu-item.here > .menu-link {
    background-color: var(--wit);
}
.aside-menu .menu > .menu-item.show > .menu-link .menu-title {
    color: var(--blauw);
}
.aside {
    width: 100px;
}
.aside-menu .menu > .menu-item.here > .menu-link,
.aside-menu .menu > .menu-item > .menu-link.active {
    border: none;
}

.aside-menu
    .menu
    > .menu-item.hover:not(.here)
    > .menu-link:not(.disabled):not(.active):not(.here),
.aside-menu
    .menu
    > .menu-item:not(.here)
    > .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color 0.2s ease;
    color: var(--zwart);
    background-color: var(--wit);
}
.aside-menu
    .menu
    > .menu-item.hover:not(.here)
    > .menu-link:not(.disabled):not(.active):not(.here)
    .menu-title,
.aside-menu
    .menu
    > .menu-item:not(.here)
    > .menu-link:hover:not(.disabled):not(.active):not(.here)
    .menu-title {
    color: var(--blauw);
}
.aside-menu .menu > .menu-item > .menu-link .menu-icon,
.aside-menu .menu > .menu-item > .menu-link .menu-icon .svg-icon,
.aside-menu .menu > .menu-item > .menu-link .menu-icon i {
    color: var(--wit);
}
.icon-logout {
    color: var(--geel) !important;
}

/*Header*/
.aside-enabled.aside-fixed.header-fixed .header {
    left: 100px;
}

/*Content*/
.aside-enabled.aside-fixed .wrapper {
    padding-left: 100px;
}
.container {
    max-width: 100%; /* Of stel een specifieke breedte in zoals 90% */
    padding-left: 15px; /* Pas deze aan voor minder padding links */
    padding-right: 15px; /* Pas deze aan voor minder padding rechts */
    margin-top: 25px;
}
.header-fixed.toolbar-fixed .wrapper {
    padding-top: 15px;
}