/* Bootstrap overrides */
:root,
[data-bs-theme=light] {
    --bs-primary: #fdd500;
    --bs-primary-light: var(--bs-light);
    --bs-secondary: #464E5F;
    --bs-dark: #2A2A2A;
    --bs-success: #1BC5BD;
    --bs-success-light: #C9F7F5;
    --bs-info: #8950FC;
    --bs-info-light: #EEE5FF;
    --bs-warning: #FFA800;
    --bs-warning-light: #FFF4DE;
    --bs-danger: #F64E60;
    --bs-danger-light: #FFE2E5;
    --bs-primary-rgb: 253, 213, 0;
    --bs-dark-rgb: 42, 42, 42;
    --bs-success-rgb: 27, 197, 189;
    --bs-info-rgb: 137, 80, 252;
    --bs-warning-rgb: 255, 168, 0;
    --bs-danger-rgb: 246, 78, 96;
    --bs-primary-text-emphasis: #ffe140;
    --bs-dark-text-emphasis: var(--bs-dark);
    --bs-primary-bg-subtle: var(--bs-primary);
    --bs-dark-bg-subtle: var(--bs-dark);
    --bs-primary-border-subtle: var(--bs-primary);
    --bs-dark-border-subtle: var(--bs-dark);
    --bs-font-sans-serif: "Poppins", "Helvetica", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-link-color: var(--bs-dark);
    --bs-link-color-rgb: var(--bs-dark-rgb);
    --bs-link-decoration: none;
    --bs-link-hover-color: var(--bs-primary); /*#b19500;*/
    --bs-link-hover-color-rgb: var(--bs-primary-rgb); /* 177, 149, 0;*/
    --bs-border-radius: 10px;
    --dt-row-selected: var(--bs-light-rgb);
    --brand-competence-measurement: var(--bs-warning);
    --brand-reminder: var(--bs-primary);
    --brand-absence: var(--bs-danger);
    --brand-observation: var(--bs-info);
    --brand-conversation: var(--bs-success);
    --brand-education: #3699FF;
    --brand-conversationaction: #808080;
}

.card {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 2rem;
    --bs-card-border-width: 0;
    --bs-card-cap-bg: var(--bs-white);
}
.card-header {
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--bs-gray-200);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-gray-500);
    --bs-breadcrumb-divider: '•';
}

.dropdown-menu {
    --bs-dropdown-link-color: var(--bs-gray-800);
    --bs-dropdown-link-hover-color: var(--bs-primary);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-active-color: var(--bs-primary);
    --bs-dropdown-link-active-bg: var(--bs-tertiary-bg);
}

.dropdown-menu a{
    padding: 8px 15px;
    font-size: 1.1rem;
}
    .dropdown-menu a i {
        padding-right: 8px;
    }

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

.page-link:focus {
    box-shadow: none;
}

table:not(.fc-list-table) tr th {
    text-transform: uppercase;
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--bs-primary);
    --bs-nav-pills-link-active-bg: var(--bs-tertiary-bg);
}

.nav-pills a{
    display:flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-pills i {
    font-size: 1.5rem;
}

.nav {
    --bs-nav-link-padding-y: 1rem;
    --bs-nav-link-font-weight: 600;
}

.nav-link:focus, .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-light);
    --bs-btn-hover-border-color: var(--bs-primary-light);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-light-rgb);
    --bs-btn-active-bg: var(--bs-primary-light);
    --bs-btn-active-border-color: var(--bs-primary-light);
    --bs-btn-disabled-bg: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-color: var(--bs-primary-light);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-font-weight: bold;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary-light);
}

.btn-light-primary {
    --bs-btn-bg: var(--bs-primary-light);
    --bs-btn-border-color: var(--bs-primary-light);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-light-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-light-text-emphasis);
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary-light);
    --bs-btn-font-weight: bold;
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger-light);
    --bs-btn-hover-border-color: var(--bs-danger-light);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-light-rgb);
    --bs-btn-active-bg: var(--bs-danger-light);
    --bs-btn-active-border-color: var(--bs-danger-light);
    --bs-btn-disabled-bg: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-color: var(--bs-danger-light);
    --bs-btn-hover-color: var(--bs-danger);
}

.btn-light-danger {
    --bs-btn-bg: var(--bs-danger-light);
    --bs-btn-border-color: var(--bs-danger-light);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-disabled-bg: var(--bs-light-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-light-text-emphasis);
    --bs-btn-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-danger-light);
    --bs-btn-font-weight: bold;
}

.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: var(--bs-warning-light);
    --bs-btn-hover-border-color: var(--bs-warning-light);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-light-rgb);
    --bs-btn-active-bg: var(--bs-warning-light);
    --bs-btn-active-border-color: var(--bs-warning-light);
    --bs-btn-disabled-bg: var(--bs-warning-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-color: var(--bs-warning-light);
    --bs-btn-hover-color: var(--bs-warning);
}

.btn-light-warning {
    --bs-btn-bg: var(--bs-warning-light);
    --bs-btn-border-color: var(--bs-warning-light);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-disabled-bg: var(--bs-light-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-light-text-emphasis);
    --bs-btn-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-warning-light);
    --bs-btn-font-weight: bold;
}

.btn-info {
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--bs-info-light);
    --bs-btn-hover-border-color: var(--bs-info-light);
    --bs-btn-focus-shadow-rgb: var(--bs-info-light-rgb);
    --bs-btn-active-bg: var(--bs-info-light);
    --bs-btn-active-border-color: var(--bs-info-light);
    --bs-btn-disabled-bg: var(--bs-info-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-info-text-emphasis);
    --bs-btn-color: var(--bs-info-light);
    --bs-btn-hover-color: var(--bs-info);
}

.btn-light-info {
    --bs-btn-bg: var(--bs-info-light);
    --bs-btn-border-color: var(--bs-info-light);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
    --bs-btn-disabled-bg: var(--bs-light-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-light-text-emphasis);
    --bs-btn-color: var(--bs-info);
    --bs-btn-hover-color: var(--bs-info-light);
    --bs-btn-font-weight: bold;
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success-light);
    --bs-btn-hover-border-color: var(--bs-success-light);
    --bs-btn-focus-shadow-rgb: var(--bs-success-light-rgb);
    --bs-btn-active-bg: var(--bs-success-light);
    --bs-btn-active-border-color: var(--bs-success-light);
    --bs-btn-disabled-bg: var(--bs-success-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-success-text-emphasis);
    --bs-btn-color: var(--bs-success-light);
    --bs-btn-hover-color: var(--bs-success);
}

.btn-light-success {
    --bs-btn-bg: var(--bs-success-light);
    --bs-btn-border-color: var(--bs-success-light);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-disabled-bg: var(--bs-light-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-light-text-emphasis);
    --bs-btn-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-success-light);
    --bs-btn-font-weight: bold;
}

.btn-light-primary:disabled {
    --bs-btn-disabled-bg: var(--bs-light);
    --bs-btn-disabled-border-color: var(--bs-light);
    --bs-btn-disabled-color: var(--bs-gray-500);
}

.btn-hover-success:hover {
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-color: var(--bs-success-light);
}

.btn-hover-danger:hover {
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-danger-light);
}

.text-bg-primary-light {
    color: var(--bs-primary) !important;
    background-color: var(--bs-light) !important;
}

.text-bg-warning-light {
    color: var(--bs-warning) !important;
    background-color: var(--bs-warning-light) !important;
}

.text-bg-info-light {
    color: var(--bs-info) !important;
    background-color: var(--bs-info-light) !important;
}

.text-bg-success-light {
    color: var(--bs-success) !important;
    background-color: var(--bs-success-light) !important;
}

.text-bg-danger-light {
    color: var(--bs-danger) !important;
    background-color: var(--bs-danger-light) !important;
}

.text-bg-tertiary {
    color: #464E5F !important;
    background-color: #ECF0F3 !important;
}

html{
    font-size: 0.8rem;
}

a {
    text-decoration: none;
    -webkit-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}

dt{
    margin-bottom: .5rem;
}

.popover {
    max-width: 800px;
}

.card-header a.stretched-link:hover {
    color: var(--bs-card-cap-color);
}

.form-check-input {
    border-color: var(--bs-gray-300);
    background-color: #ECF0F3;
    width: 1.5em;
    height: 1.5em;
}

    .form-check-input:checked {
        border-color: var(--bs-primary);
        background-color: var(--bs-primary);
    }

        .form-check-input:checked.check-danger {
            border-color: var(--bs-danger);
            background-color: var(--bs-danger);
        }

    .form-control:focus, .form-select:focus, .form-check-input:focus {
        border-color: var(--bs-gray-300);
        box-shadow: none;
    }

    .form-check-input[type=checkbox]:indeterminate {
        border-color: var(--bs-primary);
        background-color: var(--bs-primary);
    }

    .form-switch .form-check-input {
        width: 3em;
    }

        .form-switch .form-check-input:focus {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
        }

    .form-check-label{
    line-height:2;
    margin-left: 10px;
}

hr {
    color: var(--bs-gray-500);
}

.card-header {
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 0 30px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.fs-7{
    font-size: 0.8rem;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: none !important;
}

.form-range:focus::-moz-range-thumb {
    box-shadow: none !important;
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary) !important;
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary) !important;
}

    .form-range::-webkit-slider-thumb:active {
        background-color: var(--bs-secondary-color) !important;
    }
    .form-range::-moz-range-thumb:active {
        background-color: var(--bs-secondary-color) !important;
    }

/* Kalender kleuren */
.color-competence-measurement {
    color: var(--brand-competence-measurement);
}

.color-reminder {
    color: var(--brand-reminder);
}

.color-absence {
    color: var(--brand-absence);
}

.color-observation {
    color: var(--brand-observation);
}

.color-conversation {
    color: var(--brand-conversation);
}

.color-education {
    color: var(--brand-education);
}

.color-conversationaction {
    color: var(--brand-conversationaction);
}

.bg-color-competence-measurement {
    background-color: var(--brand-competence-measurement) !important;
    color: var(--bs-white) !important;
}

.bg-color-reminder {
    background-color: var(--brand-reminder) !important;
    color: var(--bs-white) !important;
}

.bg-color-absence {
    background-color: var(--brand-absence) !important;
    color: var(--bs-white) !important;
}

.bg-color-observation {
    background-color: var(--brand-observation) !important;
    color: var(--bs-white) !important;
}

.bg-color-conversation {
    background-color: var(--brand-conversation) !important;
    color: var(--bs-white) !important;
}

.bg-color-education {
    background-color: var(--brand-education) !important;
    color: var(--bs-white) !important;
}

.bg-color-conversationaction {
    background-color: var(--brand-conversationaction) !important;
    color: var(--bs-white) !important;
}

.c-calendar .fc-h-event {
    border: none;
    padding: .25em
}

.c-calendar .fc-col-header .fc-day {
    background: var(--bs-secondary);
    color: var(--bs-white);
    padding: .75rem .5rem;
}

.c-calendar .fc-list-day-cushion {
    background: var(--bs-secondary);
    color: var(--bs-white);
    padding: .75rem .5rem;
}

.c-calendar .bg-color-competence-measurement .fc-list-event-dot {
    border-color: var(--brand-competence-measurement) !important;
}

.c-calendar .bg-color-reminder .fc-list-event-dot {
    border-color: var(--brand-reminder) !important;
}

.c-calendar .bg-color-absence .fc-list-event-dot {
    border-color: var(--brand-absence) !important;
}

.c-calendar .bg-color-observation .fc-list-event-dot {
    border-color: var(--brand-observation) !important;
}

.c-calendar .bg-color-conversation .fc-list-event-dot {
    border-color: var(--brand-conversation) !important;
}

.c-calendar .bg-color-education .fc-list-event-dot {
    border-color: var(--brand-education) !important;
}

.c-calendar .bg-color-conversationaction .fc-list-event-dot {
    border-color: var(--brand-conversationaction) !important;
}

.c-calendar .fc-list-event {
    color: var(--bs-secondary) !important;
    background: var(--bs-white) !important;
}

.c-calendar .fc-daygrid-event {
    padding: .75rem .5rem;
}

    .c-calendar .fc-daygrid-event .fc-daygrid-event-dot {
        display: none;
    }


/* Collapse arrows */
.bi-chevron-down, .bi-chevron-double-right {
    transition: .3s transform ease-in-out;
}

.collapsed .bi-chevron-down {
    transform: rotate(90deg);
}

button:not(.collapsed) .bi-chevron-double-right {
    transform: rotate(90deg);
}

/* Login page */
.login{
    font-size:1rem;
}

    .login a {
        font-weight: 600;
        color: var(--bs-primary);
    }

        .login a:hover {
            font-weight: 600;
            color: var(--bs-dark);
        }

    .login aside {
    width: 100%;
    min-height: 200px;
    background-color: #2A2A2A;
    padding: 50px 0;
}

    .login aside h3 {
        color: whitesmoke;
        font-size: 2rem;
        font-weight: bolder;
    }

    .login aside img {
        max-height: 70px;
        margin-bottom: 30px;
    }

.login main{
    min-width: 450px;
}

.login main .content{
    max-width: 500px;
}

    .login .form-control, .login .form-select {
        border: none;
        background-color: #F3F6F9;
        padding: 20px;
    }

@media (min-width: 992px) {
    .login aside {
        max-width: 400px;
        padding-top: 200px;
    }
}

@media (min-width: 1200px) {
    .login aside {
        max-width: 650px;
        padding-top: 200px;
    }
}

.login main h3 {
    font-weight: 600;
}

/* Navigation */
#navigation {
    position: fixed;
    height: 100%;
    width: 250px;
}
#navigation #logo {
    background-color: #333333;
    display: block;
    padding: 15px 0;
    margin-bottom:60px;
}
#navigation #logo img{
    max-height:40px;
}

#navigation h4{
    text-transform: uppercase;
    color: var(--bs-gray-700);
    margin: 35px 0 5px 15px;
    font-size:0.9rem;
}

#navigation nav a {
    color: var(--bs-gray-400);
    display:flex;
    align-items:center;
}
    #navigation nav a:hover, #navigation nav a:focus, #navigation nav a.active {
        color: var(--bs-white);
        background-color: #1b1b28;
    }

#navigation nav i {
    margin-right: 15px;
    font-size: 1.2rem;
    color: var(--bs-white);
}
    #navigation nav a.active i {
        color: var(--bs-primary);
    }

/* Header, breadcrumbs, footer */
#header, #breadcrumbs {
    width: calc(100% - 250px);
    position: fixed;
    margin-left: 250px;
}
#header {
    z-index: 100;
}

#header #profile-picture{
    width: 35px;
    height: 35px;
}

#breadcrumbs {
    z-index: 99;
    min-height: 50px;
    padding: 0 25px;
    background-color: var(--bs-white);
    margin-top: 66px;
    -webkit-box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.08);
    box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.08);
}

    #breadcrumbs .active {
        font-weight: 600;
    }

    #breadcrumbs .title {
        font-size: 1.2em !important;
        color: var(--bs-dark);
    }

#header, #footer {
    min-height: 66px;
    padding: 0 25px;
}

    #header, #header #offcanvas-button, #footer, #breadcrumbs, #breadcrumbs .breadcrumb-item a:not(:hover) {
        color: var(--bs-gray-500);
        font-weight: 500;
        border: 0;
        background-color: var(--bs-white);
    }

        #header button i {
            font-size: 1.2em;
        }

            .btn-nav:hover, #header #offcanvas-button:hover {
                background-color: var(--bs-gray-200);
            }

#notifications > .btn:active, #notifications > .btn.show {
    border: 0;
    background-color: var(--bs-gray-200);
}

#notifications i .badge {
    font-size: 0.5em;
    font-style: normal;
}
#notifications .dropdown-toggle::after {
    display: none;
}

#notifications .dropdown-menu {
    width: 700px;
}

#notifications #notifications-background {
    background: url(/media/bg-1.jpg);
    background-size: cover;
    color: var(--bs-white);
    height: 100px;
    justify-content: center;
    align-items: center;
}

#offcanvas img {
    height: 100px;
    width: 100px;
}

#offcanvas .link {
    color: var(--bs-gray-500);
}

    #offcanvas i {
        font-size:1.5rem;
        margin: 0 10px
    }

/* Content */
.media-icon svg, .media-icon img {
    max-width: 35px;
    max-height: 35px;
}
.media-icon-large svg, .media-icon-large img {
    max-width: 70px;
    max-height: 70px;
}
.media-icon-xl svg, .media-icon-xl img {
    max-width: 150px;
    max-height: 150px;
}

.scroll {
    max-height: 350px;
    overflow-y: scroll;
}

#content{
    margin-left: 250px;
    margin-top: 116px;
    height: 100%;
}

.card-gap, .card-gap > .row, .card-gap > .row > *:not(.sticky-toolbar) {
    row-gap: 1.5rem !important;
}

    .card-gap > .row > * {
        display: flex !important;
        flex-direction: column !important;
    }

.link-list > *{
    display: block;
    margin: 20px;
    font-size: 1.1em;
    font-weight:500;
}
.link-list .text-muted {
    color: var(--bs-gray-500) !important;
}

.link-list i{
    margin-right:0.5em;
    padding:0.5em;
    border-radius: 5px;
    background-color: var(--bs-light);
    color: var(--bs-success);
    font-size: 1.2em;
}

.square-20 {
    width: 20px;
    height: 20px;
}

.square-35 {
    width: 35px;
    height: 35px;
}

.square-60 {
    width: 60px;
    height: 60px;
}

.square-120 {
    width: 120px;
    height: 120px;
}

.width-30{
    width: 30px;
}

.badge-worktype {
    background-color: #ECF0F3;
    color: #464E5F;
    white-space: normal;
    font-weight: normal;
}

i.large {
    font-size: 1.6em;
}

.bordered-link {
    text-align: center;
    border: 1px solid var(--bs-gray-200);
    padding: 2rem;
    margin: 1rem;
    position: relative;
    display:flex;
    flex-direction:column;
}

    .bordered-link i {
        font-size: 3rem;
        color: var(--bs-gray-500);
    }

    .bordered-link a {
        font-size: 1.2rem;
        font-weight:600;
        color: var(--bs-gray-500);
    }

    .bordered-link:hover i, .bordered-link:hover a {
        color: var(--bs-primary);
    }

.sticky-toolbar {
    display: flex;
    flex-direction: column;
    position: fixed;
    row-gap: 5px;
    top: 130px;
    right: 0px;
    width: 45px;
    z-index: 999;
    background-color: var(--bs-primary);
    border-start-start-radius: 5px;
    border-end-start-radius: 5px;
    padding: 10px;
}

.sticky-toolbar .btn{
    border:none;
}

    /* Dashboard */
    #dashboard-datepicker, #dashboard-datepicker a {
        color: var(--bs-dark) !important;
    }

#employees-working > ul, #employees-working > ul button {
    font-weight: 400;
}

    #employees-working > ul img {
        width: 40px;
        height: 40px;
    }

    #employees-working > ul span {
        font-weight: 400;
    }

[data-post]{
    cursor: pointer;
}

/* Jonathan's 100% height links in table hack */
table:not(.fc-list-table).table {
    height: 1px;
    margin: 10px 0;
}

table:not(.fc-list-table) tbody td:not(.dt-empty), 
table:not(.fc-list-table) thead th {
    vertical-align: middle;
    padding: 0;
}

    table:not(.fc-list-table) tbody td:not(.dt-empty):not(:has(*)), 
    table:not(.fc-list-table) thead th:not(.dt-empty):not(:has(*)) {
        padding: .7rem;
    }

table:not(.fc-list-table) tbody td > a:not(.btn), 
table:not(.fc-list-table) thead th > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: .7rem;
}

    table:not(.fc-list-table) thead th > a {
        color: #fff;
        justify-content: space-between !important;
    }

table:not(.fc-list-table) tbody td.text-center > a:not(.btn) {
    justify-content: center;
}

table thead > tr > th.dt-orderable-asc:hover, table thead > tr > th.dt-orderable-desc:hover, table thead > tr > td.dt-orderable-asc:hover, table thead > tr > td.dt-orderable-desc:hover {
    outline: none;
}

table th.dt-type-numeric, table th.dt-type-date, table td.dt-type-numeric, table td.dt-type-date {
    text-align: left;
}

.table tr{
    height: 30px;
}

th.actions, th.icon{
    width: 0%;
}

/* Datatable left align */
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left !important;
}

/* Summernote style changes */
.note-toolbar{
    background-color:#fff;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.note-toolbar.card-header{
    height:unset;
}

/* Tempus dominus changes */
:root {
    --td-active-bg: var(--bs-primary);
    --td-range-bg: var(--bs-warning);
}

.tempus-dominus-widget{
    padding: 20px;
}

/* Tabs in card header */
.nav-linetabs{
    height: 100%;
    font-size: 0.8em;
}

    .nav-linetabs .nav-link {
        height: 100%;
        border-bottom: 2px solid transparent;
        margin: 0 10px;
        display: flex;
        grid-column-gap: 10px;
        align-items: center;
    }

    .nav-linetabs .nav-link.active, .nav-linetabs .nav-link:hover {
        color: var(--bs-primary);
        border-bottom: 2px solid var(--bs-primary);
    }

/* Select2 styling */
.select2-container {
    width: 100% !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection, .select2-container--bootstrap-5 .select2-dropdown, .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--bs-border-color);
    box-shadow: none;
}

    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
        color: #fff;
        background-color: var(--bs-primary);
    }

.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid var(--bs-border-color);
}

.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--bs-border-radius);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    padding: 0.5rem;
    font-weight: 600;
    line-height: 2;
    color: var(--bs-black);
}

/* Apex charts styling */
.apexcharts-menu {
    background: #ffffff;
    border: 0 !important;
    padding: 0.5rem 0 !important;
    -webkit-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    border-radius: 0.42rem !important;
    overflow: hidden;
    min-width: 10rem !important;
}

    .apexcharts-menu .apexcharts-menu-item {
        padding: 0.75rem 1.25rem;
        -webkit-transition: all 0.15s ease;
        transition: all 0.15s ease;
    }

        .apexcharts-menu .apexcharts-menu-item:hover {
            background-color: #F3F6F9 !important;
        }

/* Timeline */
.timeline.timeline-4 {
    position: relative;
    width: 100%;
}

    .timeline.timeline-4:after {
        content: '';
        position: absolute;
        width: 5px;
        top: 0;
        margin-top: 0.1rem;
        margin-bottom: 3rem;
        bottom: 0;
        left: 50%;
        margin-left: -2.5px;
        background-color: #ECF0F3;
        border-radius: 0.42rem;
    }

    .timeline.timeline-4.timeline-center {
        margin: 0 auto;
    }

    .timeline.timeline-4 .timeline-bar {
        border-radius: 0.42rem;
        width: 20px;
        height: 5px;
        position: absolute;
        left: 50%;
        margin-left: -10px;
        background-color: #ECF0F3;
    }

    .timeline.timeline-4 .timeline-items {
        position: relative;
    }

        .timeline.timeline-4 .timeline-items .timeline-item {
            position: relative;
            margin-left: 0;
            width: 50%;
            min-height: 3rem;
        }

            .timeline.timeline-4 .timeline-items .timeline-item:after {
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                top: 3rem;
                left: 100%;
                margin-left: -3rem;
                border-left: solid 10px #F3F6F9;
                border-bottom: solid 17px transparent;
                border-right: solid 17px transparent;
                border-top: solid 17px transparent;
            }

            .timeline.timeline-4 .timeline-items .timeline-item .timeline-badge {
                background: white;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                z-index: 1;
                position: absolute;
                top: 3.5rem;
            }

                .timeline.timeline-4 .timeline-items .timeline-item .timeline-badge i {
                    padding: 0 .25rem;
                }

            .timeline.timeline-4 .timeline-items .timeline-item .timeline-label {
                display: block;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                margin-bottom: 0.5rem;
            }

            .timeline.timeline-4 .timeline-items .timeline-item .timeline-content {
                position: relative;
                border-radius: 0.42rem;
                padding: 1rem 1.5rem;
                background-color: #F3F6F9;
            }

            .timeline.timeline-4 .timeline-items .timeline-item:first-child {
                top: 2rem;
            }

            .timeline.timeline-4 .timeline-items .timeline-item:last-child {
                bottom: 2rem;
            }

    .timeline.timeline-4.timeline-justified .timeline-bar {
        left: 5px;
    }

    .timeline.timeline-4.timeline-justified:after {
        left: 5px;
    }

    .timeline.timeline-4.timeline-justified .timeline-items {
        padding: 1rem 0;
    }

        .timeline.timeline-4.timeline-justified .timeline-items .timeline-item {
            width: 100%;
            left: 0;
            padding-left: 2.85rem;
            position: relative;
            top: 0;
            bottom: 0;
            margin-bottom: 3rem;
        }

            .timeline.timeline-4.timeline-justified .timeline-items .timeline-item:after {
                right: 100%;
                left: auto;
                margin-left: auto;
                margin-right: -3rem;
                border-right: solid 10px #F3F6F9;
                border-left: solid 17px transparent;
            }

            .timeline.timeline-4.timeline-justified .timeline-items .timeline-item .timeline-badge {
                left: -5px;
            }

            .timeline.timeline-4.timeline-justified .timeline-items .timeline-item .timeline-label {
                text-align: left;
            }

            .timeline.timeline-4.timeline-justified .timeline-items .timeline-item:last-child {
                margin-bottom: 0;
            }

@media (max-width: 991.98px) {
    .timeline.timeline-4 .timeline-bar {
        left: 5px !important;
    }

    .timeline.timeline-4:after {
        left: 5px !important;
    }

    .timeline.timeline-4 .timeline-items {
        padding: 1rem 0;
    }

        .timeline.timeline-4 .timeline-items .timeline-item {
            width: 100% !important;
            left: 0 !important;
            padding-right: 0 !important;
            padding-left: 2.85rem !important;
            position: relative;
            top: 0 !important;
            bottom: 0 !important;
            margin-bottom: 1.5rem;
        }

            .timeline.timeline-4 .timeline-items .timeline-item:after {
                right: 100%;
                left: auto !important;
                margin-left: auto;
                margin-right: -3rem;
                border-right: solid 10px #F3F6F9;
                border-left: solid 17px transparent;
            }

            .timeline.timeline-4 .timeline-items .timeline-item .timeline-badge {
                left: -5px !important;
            }

            .timeline.timeline-4 .timeline-items .timeline-item .timeline-label {
                text-align: left !important;
            }

            .timeline.timeline-4 .timeline-items .timeline-item:last-child {
                margin-bottom: 0 !important;
            }
}

.w-10 {
    width: 10% !important;
}
.w-20 {
    width: 20% !important;
}
.w-30 {
    width: 30% !important;
}
.w-40 {
    width: 40% !important;
}
.w-60 {
    width: 60% !important;
}
.w-70 {
    width: 70% !important;
}
.w-80 {
    width: 80% !important;
}
.w-90{
    width: 90% !important;
}