/* Kleur aanpassingen */
/* Paars #31378d */
/* Groen #72af1a */

/* Background */
body, .dashboard #wrapper #content-wrapper #content {
    background-color: #eef3dd;
}

#statistics /*, .statistics_tab_header*/ {
    background-color: #FFF;
}

body:has(div#statistics) {
    background-color: #FFF !important;
}


/* Sidebar (temp) fixes */

.sidebar .nav-item .nav-link.active .icon-general-info {
    background-image: url(../css/img/request-add/algemene_gegevens_blauw.svg) !important;
}

.sidebar .nav-item .nav-link.active .icon-application {
    background-image: url(../css/img/request-add/aanvraag_blauw.svg) !important;
}

.sidebar .nav-item .nav-link.active .icon-motivation {
    background-image: url(../css/img/request-add/motivatie_blauw.svg) !important;
}

.sidebar .nav-item .nav-link.active .icon-approval {
    background-image: url(../css/img/request-add/ondertekening_blauw.svg) !important;
}

.sidebar .nav-item .nav-link.active .icon-documents {
    background-image: url(../css/img/request-add/documenten_blauw.svg) !important;
}

.sidebar .nav-item .nav-link.active .icon-note {
    background-image: url(../css/img/request-add/opmerkingen_blauw.svg) !important;
}

.sidebar .nav-item .nav-link.active .icon-registration {
    background-image: url(../css/img/request-add/thuiszitters_blauw.svg) !important;
}


.sidebar .nav-item .nav-link.active {
    font-weight: 700;
    background-color: #F4F6F9;
    border-radius: 4px;
}

.sidebar .nav-item .nav-link.active::after {
    content: " ";
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -12px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent transparent #F4F6F9;
}
        
#page-top\ sidebar-toggled .sidebar .nav-item .nav-link.active span {
    color: #31378d;
}

#page-top\ sidebar-toggled .sidebar .nav-item.active .nav-link span {
    color: #31378d;
}

/* Header */
.navbar {background-color: #31378d!important;}

/* Header Tommy home link */
.navbar-light .navbar-brand {
    color: #ffffff;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
    color: #72af1a;
}

/* Header active nav link */
.topbar.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: #72af1a;
}

/* Header nav links */
.topbar.navbar-light .navbar-nav .nav-item .nav-link {
    color: #ffffff;
}
.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
    color: #72af1a;
}

/* Header divider */
.topbar .topbar-divider {
    border-right: 1px solid #31378d;
}

/* Header e-mail inlog */
.topbar .nav-item .nav-link .img-profile + span {
    color: #ffffff;
}

/* Sub header - ingelogd */
.message-bar {
    background-color: #72af1a;
}

/* Buttons */
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #72af1a;
    border-color: #72af1a;
    font-weight: bold;
}
.btn-primary:hover {
    background-color: #558313;
    border-color: #5e9015;
}

/* Zoekveld home */
.searchfield {
    display: block;
    width: 50%;
    height: calc(1.5em + 0.75rem + 2px);
    margin-bottom: 15px;
    padding: 6px 15px;
    font-size: 12px;
    font-weight: 400;
    height: auto;
    line-height: 22px;
    color: #3E3F42;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #EBEDF2;
    border-radius: 4px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

/* Zoek button home */
.filters [type=button], .filters [type=reset], .filters [type=submit], .filters button {
    background-color: #72af1a;
    border: 2px solid #72af1a;
    color: #ffffff;
    margin-left: 5px;
    border-radius: 4px;
    padding: 6px 15px;
    font-size: 12px;
    font-weight: 600;
    height: 36px;
    line-height: 22px;
    text-transform: uppercase;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.filters [type=button]:hover, .filters [type=reset]:hover, .filters [type=submit]:hover, .filters button:hover {
    background-color: #558313;
    border-color: #5e9015;
}

/* fix zoek button html - row - form-group */
.filters .form-group div, .filters .form-group label[for=search] {
    width: calc(100% + 14px);
    margin: 0 -7px;
}
.filters .form-group label[for=search] {
    margin-bottom: 8.77px;
}
.filters .form-group {
    width: 100%;
}

.filters .searchfield:focus, .filters .searchfield:focus, .filters .searchfield:focus, .filters .searchfield:focus { color: #6e707e;
    background-color: #fff;
    border-color: #0A9BE9;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.1rem rgba(9, 139, 209, 0.3);
    box-shadow: 0 0 0 0.1rem rgba(9, 139, 209, 0.3);
}

/* Zoekveld */
.filters form[name="filter"] {
    display: flex;
}

/* datepicker */
.datepicker .dropdown {
    border: 1px solid rgba(0,0,0,.15);
}

/* Tooltip positie in lijst aanvragen */
.card-body .tooltip:after {margin: 5px 5px 0 0;}

/* Tooltip fix sub-pagina's */
.card-body .tooltip .tooltiptext {
    left: -50px;
}
.tooltip .tooltiptext {
    left: 0;
    max-width: 300px;
}

/* Zoeken mobiel */
@media screen and (max-width: 982px) {
    .filters form[name="filter"] {
        display: block;
    }
    .filters [type=button], .filters [type=reset], .filters [type=submit], .filters button {
        margin-left: 0;
    }
    .searchfield { 
        width: 100%;
        margin-bottom: 15px;
    }
    [type=submit] {
        width: 100%;
    }
    a.dropdown-item {
        color: #ffffff;
    }
    a.dropdown-item:hover {
        color: #72af1a;
    }
    .dropdown-menu .dropdown-divider {
        border-top: 1px solid #72af1a;
    }

}

/* Formulier label paar */
.form-inline label {
    color: #31378d;
    align-items: stretch;
}

/* Kalender widget kleur paars */
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {
    background: #31378d;
    padding: 1px 5px;
}
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
    background: rgba(49, 55, 141, 0.05);
}

/* Header 3 kleur paars */
h1, h3 {
    color: #31378d;
}

/* Header dropdown hover kleur */
.dropdown-item:focus, .dropdown-item:hover {
    background-color: rgba(49, 55, 141, 0.05);
}

/* Aantal aanvragen kleur groen */
.card-header-count {
    color: #72af1a;
}

/* Links en icons kleur in tables */
.table tbody a {
    color: #31378d;
    border: #72af1a;
}

/* Icons hover */
.table tbody i.fa:hover {
    color: #72af1a;
}

/* Icons grootte en padding */
.fa {
    font-size: 16px;
    padding: 3px;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; 
}

/* Table row hover */
.table tbody tr:hover {
    background-color: rgba(238, 243, 221, 0.5);
    border-color: #72af1a;
}


/* To do - Header toggle op mobiel */

/* Button-bar aanvraag 4 buttons */
@media (max-width: 1215px) { 
    .d-flex.button-bar {flex-direction: column;}
    .button-bar a, .button-bar input {width: 100%;margin: 0 0 10px 0;}
}

/*  Dropdown na inlog icon */
.topbar .nav-item .nav-link .img-profile + span:after {
    width: 8px;
    height: 11px;
    right: 0;
    top: calc(50% - 4px);
}
.topbar .nav-item .nav-link .img-profile + span:after {
    background-size: 10px 10px;
}

/* Dropdwon mobiel */
@media (max-width: 991.5px) {
    .topbar .dropdown .dropdown-menu {
        background-color: #31378d;
    }
    .navbar-light .navbar-toggler {
        background-color: #72af1a;
        -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; 
        padding: 0.25rem;
    } 
    .navbar-light:hover .navbar-toggler:hover {
        background-color: #558313;
    }
    /* Button-bar aanvraag 4 buttons */
    .d-flex.button-bar {flex-direction: column;}
    .button-bar a, .button-bar input {width: 100%;margin: 0 0 10px 0;}
}

/* Checkbox color */
input[type=checkbox], input[type=radio] {
    accent-color: #31378d;
}

/* Align navlink icons */
a.nav-link .icon {
    min-width: 34px;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; 
}
@media (max-width: 767.5px) {
    a.nav-link .icon {
        margin-bottom: 10px;
    }
}


/* Sub pagina's */
/* To do extra class toevogen */

/* Temp fix */
#page-top\ sidebar-toggled div#wrapper {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
#page-top\ sidebar-toggled ul#accordionSidebar {
    padding: 27px 27px 74px 27px;
    background-color: #31378d;
}
@media (max-width: 767.5px) {
    #page-top\ sidebar-toggled ul#accordionSidebar {
        padding: 0;
    }
    /* Navbar height */
    #page-top\ sidebar-toggled .navbar {
        min-height: auto;
    }
    #page-top\ sidebar-toggled .navbar .btn-link {
        color: #ffffff;
    }
    #page-top\ sidebar-toggled .navbar .btn-link:hover {
        color: #ffffff;
    }
    #page-top\ sidebar-toggled .navbar.topbar #sidebarToggleTop:hover {
        background-color: transparent;
    }

}
#page-top\ sidebar-toggled .navbar-nav-logo img {
    background-color: #ffffff;
    padding: 20px;
}
#page-top\ sidebar-toggled .sidebar .nav-item .nav-link span {
    color: #ffffff;
}

table.leerlingaantallen {
    width:auto; 
}