/* ============================= */
/*          ROOT VAR             */
/* ============================= */
[data-bs-theme=light] {
    /* --bs-app-content-shadow: 0px 0px 100px rgba(255, 255, 255, 0.25); */
    --bs-app-toolbar-bg: linear-gradient(180deg, #4bb89b 0%, #45ac91 100%);
    --bs-text-primary: #4bb89b;
    --bs-primary: #37b191;
    --bs-primary-active: #1f1f1f;
    --bs-primary-inverse: white;
    --bs-app-skeleton-color: #ffffff;
    --bs-app-skeleton-gradient: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(247,247,249,1) 34%, rgba(241,241,241,1) 80%, rgba(254,254,254,1) 100%);
    --bs-app-card-bg: linear-gradient(112.14deg, #5d43a4 0%, #523b91 100%);
}
[data-bs-theme=dark] {
    /* --bs-app-toolbar-bg: linear-gradient(180deg, #13141a 0%, rgba(17, 18, 18, 0.43) 100%) */
    --bs-text-primary: #4bb89b;
    --bs-app-skeleton-color: #15171c;
    --bs-app-skeleton-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
}

/* ============================= */
/*          Menú Activo          */
/* ============================= */
.menu-active-bg .menu-item .menu-link.active {
    background-color: transparent;
}

/* ============================= */
/*      Botón Activo - Iconos    */
/* ============================= */
.btn-check:active + .btn.btn-active-color-primary .svg-icon,
.btn-check:active + .btn.btn-active-color-primary i,
.btn-check:checked + .btn.btn-active-color-primary .svg-icon,
.btn-check:checked + .btn.btn-active-color-primary i,
.btn.btn-active-color-primary.active .svg-icon,
.btn.btn-active-color-primary.active i,
.btn.btn-active-color-primary.show .svg-icon,
.btn.btn-active-color-primary.show i,
.btn.btn-active-color-primary:active:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:active:not(.btn-active) i,
.btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:focus:not(.btn-active) i,
.btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:hover:not(.btn-active) i,
.show > .btn.btn-active-color-primary .svg-icon,
.show > .btn.btn-active-color-primary i {
    /* color: #ffffff; */
}

/* ============================= */
/*    Botón Activo - Colores     */
/* ============================= */
.btn-check:active + .btn.btn-active-light,
.btn-check:checked + .btn.btn-active-light,
.btn.btn-active-light.active,
.btn.btn-active-light.show,
.btn.btn-active-light:active:not(.btn-active),
.btn.btn-active-light:focus:not(.btn-active),
.btn.btn-active-light:hover:not(.btn-active),
.show > .btn.btn-active-light {
    /* background-color: var(--bs-primary) !important; */
}
.btn-mercadolibre {
    background: #fde500;
}

/* ============================= */
/*          Estilos Variados     */
/* ============================= */
.timeline .timeline-item {
    margin-top: 1px;
}
.menu-sub-dropdown-custom {
    border-radius: 0.65rem;
    background-color: var(--bs-menu-dropdown-bg-color);
    box-shadow: var(--bs-menu-dropdown-box-shadow);
    z-index: 107;
}
.menu-sub-custom {
    padding: 0;
    margin-top: 120px;
    list-style: none;
    flex-direction: column;
    margin-left: -210px;
    position: absolute;
}
.card .card-header .card-toolbar {
    display: flex;
    align-items: center;
    margin: 0.5rem -20px;
    flex-wrap: wrap;
}
.overflow-auto {
    margin-top: 1px;
}
.overflow {
    height: 400px;
    overflow: scroll;
    margin-top: 30px;
}
.overflow-campaings {
    height: 2000px;
    /* mask-image: linear-gradient(to bottom, black 86%, transparent); */
}

/* ============================= */
/*    Grupo de Notificaciones    */
/* ============================= */
.notification-group {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-flow: row nowrap;
}

/* ============================= */
/*           CONTAINERS         */
/* ============================= */
div#kt_app_content_container {
    margin-top: 40px;
}

/* ============================= */
/*            Card               */
/* ============================= */
.overlay.overlay-block {
    cursor: wait;
    background-color: rgba(245, 245, 245, 1);
    opacity: .5;
}

/* ============================= */
/*            BACKGROUNDS        */
/* ============================= */
.bg-soft-red {
    background-color: #f59ca3;
}
.bg-soft-yellow {
    background-color: #fae49c;
}
.bg-soft-lightyellow {
    background-color: #f5ec97;
}
.bg-soft-lightgreen {
    background-color: #9ef4b2;
}

/* ============================= */
/*            SCROLL             */
/* ============================= */
.scroll-top .top-scrollbar-container {
    overflow-x: auto;
    overflow-y: hidden;
    height: 20px; /* Altura de la barra de scroll */
}
.scroll-top .top-scrollbar-content {
    height: 1px;
}
.scroll-top .table-responsive {
    margin-top: 0;
}

/* ============================= */
/*            RESPONSIVE         */
/* ============================= */
@media (min-width: 992px) {
    :root {
        --bs-app-header-height: 60px;
        --bs-app-header-height-actual: 60px;
    }
}
@media (max-width: 991.98px) {
    .overflow-campaings {
        height: 455px;
    }
    .app-content {
        padding-left: 0px;
        padding-right: 0px;
    }
}