@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/***** GLOBAL *****/
.text-uppercase {
    text-transform: uppercase;
}

.bg-beige {
    background-color: var(--sk-beige);
}
.bg-red {
    background-color: var(--sk-red);
}

.bg-blue {
    --bs-bg-opacity: 1;
    background-color: var(--bs-blue);
}

/***** TOASTER *****/
.toast {
    --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 1) !important;
}

.toast-success {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}

.toast-info {
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle);
}

.toast-warning {
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}

.toast-danger, .toast-error {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
}

/***** ALERT *****/
.alert-error, .alert-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

/***** MENU *****/
header {
    position: fixed;
    width: 100%;
    height: 90px;
    z-index: 55;

    & nav {
        z-index: 1;
    }
    & .nav-link {
        color: var(--white);
    }
    & .nav-link:hover {
        color: var(--white);
    }
    & li.nav-item {
        list-style-type: none;
    }
    & ul.nav.collapsing {
        -webkit-transition: none;
        transition: none;
    }
    & div.navbar-collapse.collapse.show {
        & div.logout {
            position: inherit !important;
        }
    }
}

#sub-header {
    position: sticky;
    top: 90px;
    z-index: 50;
    border-bottom: 1px solid var(--sk-border);
    background-color: var(--sk-beige-light);
}

#main {
    position: relative;
    top: 90px;
    padding-bottom: 90px;
}

/***** BODY *****/
a {
    color: var(--bs-black);
    text-decoration: underline;
}

/***** PAGINATOR *****/
li.dt-paging-button > button {
    color: var(--bs-black);
}

/***** DATATABLE *****/
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date{
    text-align: left !important;
}
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-header{
    flex-direction: row !important;
}

.images {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    & article {
        display: grid;
    }
    & img {
        width: 200px;
    }
    & button {
        margin-top: 5px;
    }
}

/***** TOOLTIP *****/
.tooltip-indicator {
    cursor: pointer;
}

.tooltip-content {
    display: none;
}

.tooltip-indicator:hover + .tooltip-content {
    display: block;
    position: absolute;
    padding: 5px;
    color: black;
    background-color: var(--bs-info-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    z-index: 2;
}