body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    background-color: rgb(251, 251, 251);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

tiny {
    font-size: .765em;
}

/* Header styles */
header {
    padding: .75rem 0;
    background-color: #424345;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(255,255,255,0.15);
    display: block
}

    header .nav-pills .nav-link {
        color: #fbfae8;
    }

        header .nav-pills .nav-link:hover, .header-notification .bell:hover, .header-avatar:hover {
            color: #f0d3d3;
        }

        header .nav-pills .nav-link.active {
            background-color: #f24949;
            color: #fbfae8;
        }

            header .nav-pills .nav-link.active:hover {
                background-color: #e54242;
            }

.header-brand img {
    height: 60px
}

.header-avatar {
    color: #fbfae8;
    text-decoration: none;
}

    .header-avatar img {
        height: 60px
    }

.header-notification {
    width: 32px;
    margin-left: auto;
    margin-right: 0;
}

    .header-notification .bell {
        color: #fbfae8;
        font-size: 2em;
        cursor: pointer;
        position: relative;
    }

    .header-notification .quantity {
        position: absolute;
        display: inline-block;
        top: 4px;
        right: 0;
        height: 15px;
        width: 15px;
        line-height: 15px;
        text-align: center;
        background: #ff4b5a;
        color: #fff;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        font-size: 12px;
    }

.offcanvas-body a.navbar-avatar {
    text-decoration: none;
    display: block;
    height: 4em;
    width: 100%;
}

    .offcanvas-body a.navbar-avatar img {
        border-radius: 2em;
        margin-right: .5em;
        height: 4em;
    }

.dropdown-menu {
    font-size: .9em;
}

.row-hover:hover {
    background-color: #eee;
    cursor: pointer;
}

#global-notification-menu {
    padding: 1em;
}

    #global-notification-menu:before {
        position: absolute;
        top: -7px;
        left: 9px; /* Example: right:10px; */
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-left: 7px solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        content: '';
    }

    #global-notification-menu:after {
        position: absolute;
        top: -6px;
        left: 10px; /* Example: right:10px; */
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        border-left: 6px solid transparent;
        content: '';
    }

    #global-notification-menu li {
        line-height: 2em;
    }

        #global-notification-menu li a {
            text-decoration: none;
        }

.form-floating {
    margin-bottom: .5em;
}

.divider {
    margin-top: .5em;
    margin-bottom: .5em;
    font-size: .75em;
    display: flex;
    align-items: center;
}

    .divider.gap {
        --divider-gap: 1rem;
    }

    .divider::before, .divider::after {
        content: '';
        height: 1px;
        background-color: var(--bs-border-color);
        flex-grow: 1;
    }

    .divider::before {
        margin-right: var(--divider-gap);
    }

    .divider::after {
        margin-left: var(--divider-gap);
    }

/* Autocomplete */
.ac-list {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    width: 200px;
    max-height: 200px;
    overflow: auto;
    display: none;
    z-index: 1000;
    top: 100%; /* direct onder het input */
}

.ac-item {
    padding: 5px;
    cursor: pointer;
}

    .ac-item:hover {
        background: #eee;
    }

    .ac-item.active {
        background: #eee;
    }

/* Hide the leaflet flag */
.leaflet-attribution-flag {
    display: none !important
}

.leaflet-container {
    font-family: inherit;
}

.leaflet-popup {
    min-width: 350px;
}

.w-unset {
    width: unset !important;
}

@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }
}

.dot {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.dot-sm {
    width: .5em;
    height: .5em;
}

.dot-lg {
    width: 1.5em;
    height: 1.5em;
}

.dot-blue {
    background: #0d6efd;
    border: 1px solid #022e6f;
}

.dot-green {
    background: #198754;
    border: 1px solid #0c452b;
}

.dot-red {
    background: #dc3545;
    border: 1px solid #6a1820;
}

.dot-gray {
    background: #6c757d;
    border: 1px solid #343a40;
}

.dot-orange {
    background: #fd7e14;
    border: 1px solid #753b09;
}

.dot-yellow {
    background: #ffc107;
    border: 1px solid #765903;
}

.tag-display {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
    display: inline-block;
}

.modal-header, .modal-body, .modal-footer {
    background-color: rgb(251, 251, 251);
}

/* ADMIN FORMS */
fieldset {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .5em;
    padding-top: 1.5em;
    padding-left: 1em;
    margin-top: 1em;
}

    fieldset legend {
        font: inherit;
        color: var(--bs-secondary-color);
        background-color: #fff;
        margin-top: -2.25em;
        margin-left: -.5em;
        margin-bottom: -1.25em;
        width: inherit; /* Or auto */
        /*border: 1px solid var(--bs-border-color);*/
        padding-left: .5em;
        padding-right: .5em;
    }

label.form-label {
    color: var(--bs-secondary-color);
}

.tab-content {
    min-height: 100%;
    padding: .5em;
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

a.form-control-plaintext {
    text-decoration: none
}

.form-label {
    margin-bottom: unset;
}

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

/* VARIOUS */
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-append {
    border: 1px solid var(--bs-border-color);
    border-left: none
}

.btn-prepend {
    border: 1px solid var(--bs-border-color);
    border-right: none
}

/* Skeleton */ /
@keyframes skeleton-loading {
    0%

{
    background-color: hsl(200, 20%, 80%);
}

100% {
    background-color: hsl(200, 20%, 95%);
}

}

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
}

/* Spinner */
@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spin {
    animation-name: spin-animation;
    animation-duration: 1.25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Grower */
@keyframes grow-animation {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
    }
}

.grow {
    animation-name: grow-animation;
    animation-duration: .75s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}