@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: "Segoe UI", "-apple-system", BlinkMacSystemFont, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

.b-bar-vertical-inline.b-bar-dark, .b-bar-vertical-popout.b-bar-dark, .b-bar-vertical-small.b-bar-dark {
    color: var(--b-bar-dark-color, rgba(255, 255, 255, 0.7));
}

.modal.delete-modal{
    z-index: 1075;
}

tr.active,
tr.active a {
    background-color: var(--b-button-primary-background);
    color: white;
}

.b-bar-vertical-inline {
    min-width: var(--b-vertical-bar-width, 280px);
    max-width: var(--b-vertical-bar-width, 280px);
    width: var(--b-vertical-bar-width, 280px);
}

/*Correct the navigation bar color*/
.b-bar-vertical-inline.b-bar-dark .b-bar-link.active,
.b-bar-vertical-inline.b-bar-dark .b-bar-dropdown-menu .b-bar-dropdown-item.active {
    background-color: var(--b-button-primary-active-background);
    color: var(--b-button-primary-active-color, white);
}

.table td, .table th {
    padding: .65rem;
    vertical-align: middle;
}


.dashboard-widget {
    display: inline-flex;
    padding: 0px;
    padding-right: 12px;
    padding-bottom: 12px;
    min-width: 100%;
}

.dashboard-widget img {
    padding-right: 12px;
    padding-left: 0px;
}

.dashboard-widget .dashboard-widget-body .dashboard-title {
    font-size: 1.2em;
    color: #443;
}

.dashboard-widget .dashboard-widget-body .dashboard-text {
}

@media (min-width: 1440px) {
    .dashboard-widget {
        min-width: 49%;
        max-width: 45%;
    }
}

@media (min-width: 2000px) {
    .dashboard-widget {
        min-width: 33%;
        max-width: 33%;
    }
}

.custom-control.custom-switch {
    padding-top: 7px;
}