:root {
    --light-dark-color: #36393e;
    --dark-color: #1e2124;
    --darker-color: #54545a;
}

[data-bs-theme=light] .logo-theme-sensitive {
    -webkit-filter: invert(1);
    filter: invert(1);
}

.btn-darker {
    color: #fff !important;
    background-color: var(--darker-color) !important;
    border-color: var(--darker-color) !important;
}

.btn-darker:hover,
.btn-darker:active,
.btn-darker:focus,
.btn-darker.active {
    background: #003D4F !important;
    color: #ffffff !important;
    border-color: #003D4F !important;
}

.dark-bg {
    background-color: var(--dark-color) !important;
}

.light-dark-bg {
    background-color: var(--light-dark-color) !important;
}


body {
    font-family: 'Nunito', sans-serif;
}

.text-grey {
    color: grey !important;
}

.bs-divider {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.min-height-w-navbar {
    min-height: calc(100vh - 74px);
}

@font-face {
    font-family: 'Commercial Script Regular';
    src: url('/fonts/Commercial Script Regular.ttf');
}

.anayansi-font {
    font-family: 'Commercial Script Regular', 'Helvetica', Helvetica, Arial, sans-serif;
    font-size: 2em !important;
}


.notifications-dropdown {
    width: 360px;
    overflow-y: auto;
    max-height: 90vh
}

@media (max-width: 500px) {
    .notifications-dropdown {
        width: 300px;
        left: -300% !important;
        overflow-y: auto;
        max-height: 90vh
    }
}

/* POWERGRID CUSTOM CSS */
.pg-actions { /* Los botones de las acciones no se ven inline (bug)*/
    display: flex;
    gap: .5rem;
    width: 100%;
    justify-content: center;
}

div.dt--top-section > div > div.col-12.col-sm-6.d-flex.justify-content-sm-start.justify-content-center > div:nth-child(3) > div > button
{
    margin-right:1rem; /* Separación entre botón trashed y toggleColumns*/
}

div.dt--top-section > div > div.col-12.col-sm-6.d-flex.justify-content-sm-start.justify-content-center > div:nth-child(3) > div > button
{
    background-color: transparent !important; /* Cambio la apariencia del botón de toggleColumns*/
    color: var(--bs-secondary-color) !important;
    border-color: var(--bs-border-color) !important;
}
div.dt--top-section > div > div.col-12.col-sm-6.d-flex.justify-content-sm-start.justify-content-center > div.btn-group > button
{
    background: transparent !important; /* Cambio la apariencia del botón de trashed*/
    color: var(--bs-secondary-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* Borders */
.border-start-primary {
    border-left: 0.25rem solid var(--bs-primary) !important;
}

.border-start-danger {
    border-left: 0.25rem solid var(--bs-danger) !important;
}

.border-start-success {
    border-left: 0.25rem solid var(--bs-success) !important;
}

.border-start-warning {
    border-left: 0.25rem solid var(--bs-warning) !important;
}