body {
    background: var(--bs-gray-200);
}

.wrapper {
    align-items: stretch;
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;

    &:before {
        background: var(--bs-primary);
        content: " ";
        height: 264px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    &.dev:before {
        background-color: var(--bs-warning);
    }
}

.container-fluid {
    width: 95%;
}

.navbar {
    .toggle-sidebar {
        display: none;
    }
}

/*
 * Sidebar
 */

.sidebar {
    background: transparent;
    border-right: 0;
    box-shadow: 0 0 2rem 0 rgb(0 0 0 / 5%);
    max-width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    z-index: 1;
    min-height: 100vh;
    transition: margin-left .3s ease-in-out,left .3s ease-in-out,margin-right .3s ease-in-out,right .3s ease-in-out;

    &.collapse:not(.show){ display: block;}

    .sidebar-header {
        background: var(--bs-primary);
        color: var(--bs-white);
        font-size: 1.175rem;
        padding: 1rem;
    }

    .sidebar-content {
        background: var(--bs-body-bg);
        height: 100%;
    }

    &.toggled {
        margin-left: var(--sidebar-width);
    }

    .sidebar-heading {
        font-size: .75rem;
    }

    .nav-link {
        font-weight: 500;
        color: var(--bs-body-color);

        .feather {
            margin-right: 4px;
            color: #727272;
        }

        &.active {
            color: #2470dc;
        }

        &:hover .feather,
        &.active .feather {
            color: inherit;
        }

        &[data-bs-toggle].collapsed:after {
            content: " ▾";
        }

        &[data-bs-toggle]:not(.collapsed):after {
            content: " ▴";
        }
    }

    .company-menu {
        background: var(--bs-gray-400);
    }
}

/*
* Main
 */
.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left .3s ease-in-out,left .3s ease-in-out,margin-right .3s ease-in-out,right .3s ease-in-out;
    width: 100%;
}

.header {
    h1 {
        color: var(--bs-white);
        font-size: 1.640625rem;
    }

    p {
        color: var(--bs-white);
        font-size: 0.9375rem;
    }
}

.user-menu {
    .nav-link {
        color: var(--bs-white);
    }
}

.card-header {
    .buttons {
        //display: flex;
        //justify-content: flex-end;
    }
}

/*
* Bootstrap overrides for theming purposes
 */
.card {
    margin-bottom: 1.5rem;
}

/*
* Other stuff
 */
.modal-body button {
    display: none;
}

.w-95 {
    width: 95%;
}

.dev-notice {
    position: absolute;
    top: -30px;
    left: 40%;
    animation: blinker 1s linear infinite;
}

.project-lead-status-interviewing {
    background-color: var(--bs-primary-bg-subtle);
}
.project-lead-status-won {
    background-color: var(--bs-success-bg-subtle);
}
.project-lead-status-declined {
    background-color: var(--bs-dark-bg-subtle);
}
.project-lead-status-lost {
    background-color: var(--bs-danger-bg-subtle);
}

.fa-sm {
    height: 16px;
}

.fa-mb-m2 {
    margin-bottom: -4px;
}


@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* ------- Dark mode --------*/
[data-bs-theme="dark"] {
    body {
        background: var(--bs-dark-bg-subtle);
    }

    .wrapper {
        &.dev:before {
            background-color: var(--bs-warning-border-subtle);
        }
    }

    .sidebar {
        .company-menu {
            background: var(--bs-dark-bg-subtle);
        }
    }

    /* Tom select dark mode styling */
    .ts-control input {
        color: var(--bs-body-color);
    }
    .ts-control .item {
        color: var(--bs-body-color);
    }
    .ts-dropdown .option {
        color: var(--bs-body-color);
    }
}

/* ----- Media queries ----- */
@media (min-width: 1px) and (max-width: 992px) {
    .navbar {
        .toggle-sidebar {
            display: block;
        }
    }

    .sidebar {
        &.collapse:not(.show){ display: none;}

        &.toggled {
            margin-left: 0;
        }
    }

    .card {
        margin-bottom: 1rem;
    }
}