/* ======================================================= */
/* SIDEBAR PRO ADAPTADO PARA GENERATEPRESS - VERSIÓN FINAL */
/* (Requiere las variables de color y layout de style.css) */
/* ======================================================= */


/* ==================================== */
/* 2. RESET Y ESTRUCTURA BASE */
/* ==================================== */


/* ==================================== */
/* 3. SIDEBAR PRO - ESTRUCTURA BASE Y TRANSICIÓN */
/* ==================================== */

.layout .layout-sidebarpro {
    color: var(--color-text-main);
    /* ADAPTADO */
    overflow-x: hidden;

    width: var(--sidebar-width);
    /* ADAPTADO */
    min-width: var(--sidebar-width);
    /* ADAPTADO */
    transition: all var(--transition-duration) ease-in-out;
    /* ADAPTADO */
    z-index: 1000;
}

#menu-footer-z .menu-item a {
    font-weight: 500;
}

#menu-sidebar-z .menu-item,
#menu-footer-z .menu-item a {
    margin: 5px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

#menu-sidebar-z .menu-item:hover,
#menu-footer-z .menu-item a:hover {
    background-color: var(--color-bg-header);
    /* ADAPTADO (antes fondo-base-header) */
}

.layout .layout-sidebarpro.collapsed {
    width: var(--sidebar-collapsed-width);
    /* ADAPTADO */
    min-width: var(--sidebar-collapsed-width);
    /* ADAPTADO */
}

/* Scrollbar personalizado */
.layout-sidebarpro::-webkit-scrollbar {
    width: 6px;
    background-color: var(--color-bg-sidebar);
    /* ADAPTADO */
}

.layout-sidebarpro::-webkit-scrollbar-thumb {
    border-radius: 4px;
}

.layout-sidebarpro:hover::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar-thumb);
    /* ADAPTADO */
}

/* Scrollbar controlado - oculto por defecto, visible al hover */
.layout-sidebarpro .sidebar-content {
    overflow-y: hidden;
    overflow-x: hidden;
    transition: overflow-y var(--transition-duration);
}

.layout-sidebarpro:hover .sidebar-content {
    overflow-y: auto;
}

/* Estados de scrollbar inactivo */
.scrollbar-inactivo::-webkit-scrollbar-thumb,
.scrollbar-inactivo {
    pointer-events: none;
}

/* ==================================== */
/* 4. LAYOUT INTERNO DEL SIDEBAR */
/* ==================================== */

.layout-sidebarpro .sidebar-layout {
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--color-bg-sidebar);
    /* ADAPTADO */
    z-index: 2;
}

/* Header del sidebar */
.layout-sidebarpro .sidebar-layout .sidebar-header {
    height: 100px;
    min-height: 100px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* Contenido del sidebar */
.layout-sidebarpro .sidebar-layout .sidebar-content {
    flex-grow: 1;
    padding: 10px 0;
}

/* Footer del sidebar */
.layout-sidebarpro .sidebar-layout .sidebar-footer {
    height: 230px;
    min-height: 230px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* Elementos de texto con ellipsis */
.layout-sidebarpro .sidebar-layout .sidebar-header>span,
.layout-sidebarpro .sidebar-layout .sidebar-footer>span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ==================================== */
/* 5. IMAGEN DE FONDO DEL SIDEBAR */
/* ==================================== */

.layout-sidebarpro .image-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: none;
}

.layout-sidebarpro .image-wrapper>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.layout-sidebarpro.has-bg-image .image-wrapper {
    display: block;
}

/* ==================================== */
/* 6. ELEMENTOS ESPECÍFICOS DEL SIDEBAR */
/* ==================================== */

/* Logo del sidebar */
.layout .layout-sidebarpro .pro-sidebar-logo {
    display: flex;
    align-items: center;
}

.layout .layout-sidebarpro .pro-sidebar-logo>div {
    width: 35px;
    min-width: 35px;
    height: 35px;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
    font-size: 24px;
    font-weight: 700;
    background-color: var(--color-logo-bg);
    /* ADAPTADO */
    margin-right: 10px;
}

.layout .layout-sidebarpro .pro-sidebar-logo>h5 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
    line-height: 30px;
    transition: opacity var(--transition-duration);
    opacity: 1;
    margin: 0;
}

/* Footer box */
.layout .layout-sidebarpro .footer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.8em;
    padding: 20px 0;
    border-radius: 8px;
    width: 180px;
    min-width: 190px;
    margin: 0 auto;
    background-color: var(--color-bg-sidebar-alt);
    /* ADAPTADO (antes footer-bg-color) */
}

.layout .layout-sidebarpro .footer-box img.react-logo {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.layout .layout-sidebarpro .footer-box a {
    /*color: #fff;*/
    font-weight: 600;
    margin-bottom: 10px;
}

/* ==================================== */
/* 7. MENÚ DEL SIDEBAR */
/* ==================================== */

/* Estructura base del menú */
.layout .layout-sidebarpro .menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.layout .layout-sidebarpro .menu .menu-header {
    font-weight: 600;
    padding: 10px 25px;
    font-size: 0.8em;
    letter-spacing: 2px;
    transition: opacity var(--transition-duration);
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden
}

/* Items del menú */
.layout .layout-sidebarpro .menu .menu-item a,
#menu-footer-z li a {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    color: var(--color-text-main);
    /* ADAPTADO */
}

.layout .layout-sidebarpro .menu .menu-item a .menu-icon {
    font-size: 1.2rem;
    width: 35px;
    min-width: 35px;
    height: 35px;
    line-height: 42px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 2px;
    transition: color var(--transition-duration);
    background-color: var(--color-bg-sidebar-alt);
    /* ADAPTADO (antes fondo-base-sidebar-iconos) */
}

.layout .layout-sidebarpro .menu .menu-item a .menu-icon i {
    display: inline-block;
}

.layout .layout-sidebarpro .menu .menu-item a .menu-title {
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
    transition: color var(--transition-duration);
    font-weight: 500;
}

.layout .layout-sidebarpro .menu .menu-item a .menu-prefix,
.layout .layout-sidebarpro .menu .menu-item a .menu-suffix {
    display: inline-block;
    padding: 5px;
    opacity: 1;
    transition: opacity var(--transition-duration);
}

/* Estados hover del menú */
.layout .layout-sidebarpro .menu .menu-item a:hover .menu-title,
.layout .layout-sidebarpro .menu .menu-item a:hover .menu-icon {
    color: var(--color-text-main);
    /* ADAPTADO */
}

/* Evitar subrayado en enlaces del sidebar */
#gpct-sidebarpro a:hover,
#menu-footer-z a:hover {
    text-decoration: none;
}


#menu-sidebar-z .current-menu-item a,
#menu-header-z .current-menu-item a {
    color: var(--color-current-menu-item);
}

#menu-header-z .menu-item a:hover {
    color: var(--color-text-main);
}

/* ==================================== */
/* 8. ANIMACIONES Y EFECTOS */
/* ==================================== */

/* Animación de iconos */
@keyframes swing {

    0%,
    30%,
    50%,
    70%,
    100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }
}

.layout .layout-sidebarpro .menu .menu-item a:hover .menu-icon i {
    animation: swing ease-in-out 0.5s 1 alternate;
}

/* ==================================== */
/* 9. SUB-MENÚS */
/* ==================================== */

.layout .layout-sidebarpro .menu .menu-item.sub-menu {
    position: relative;
}

.layout .layout-sidebarpro .menu .menu-item.sub-menu>a::after {
    content: "";
    transition: transform var(--transition-duration);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg);
    visibility: visible;
    opacity: inherit;
}

.layout .layout-sidebarpro .menu .menu-item.sub-menu>.sub-menu-list {
    padding-left: 20px;
    display: none;
    overflow: hidden;
    z-index: 999;
    background-color: var(--color-bg-sidebar-alt);
    /* ADAPTADO (antes fondo-base-sidebar-iconos) */
}

.layout .layout-sidebarpro .menu .menu-item.sub-menu.open>a {
    color: var(--color-text-main);
    /* ADAPTADO */
}

.layout .layout-sidebarpro .menu .menu-item.sub-menu.open>a::after {
    transform: rotate(45deg);
}

/* Estados activos del menú */
.layout .layout-sidebarpro .menu .menu-item.active>a .menu-title,
.layout .layout-sidebarpro .menu .menu-item.active>a .menu-icon {
    color: var(--color-text-main);
    /* ADAPTADO */
}


/* ==================================== */
/* 10. FORMAS DE ICONOS */
/* ==================================== */

.layout .layout-sidebarpro .menu.icon-shape-circle .menu-item a .menu-icon {
    border-radius: 50%;
}

.layout .layout-sidebarpro .menu.icon-shape-rounded .menu-item a .menu-icon {
    border-radius: 4px;
}

.layout .layout-sidebarpro .menu.icon-shape-square .menu-item a .menu-icon {
    border-radius: 0;
}

/* ==================================== */
/* 11. SIDEBAR COLAPSADO */
/* ==================================== */

/* Elementos ocultos en modo colapsado */
.layout .layout-sidebarpro.collapsed .menu>ul>.menu-item>a .menu-prefix,
.layout .layout-sidebarpro.collapsed .menu>ul>.menu-item>a .menu-suffix,
.layout .layout-sidebarpro.collapsed .pro-sidebar-logo>h5,
.layout .layout-sidebarpro.collapsed .footer-box {
    opacity: 0;
    display: none;
}

.layout .layout-sidebarpro.collapsed .menu>ul>.menu-header {
    opacity: 0;
    white-space: nowrap;
}

/* Sub-menús en modo colapsado (Poppers) */
.layout .layout-sidebarpro.collapsed .menu>ul>.menu-item.sub-menu>a::after {
    content: "";
    width: 5px;
    height: 5px;
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 50%;
    border: none;
    transform: translateY(-50%);
}

.layout .layout-sidebarpro.collapsed .menu>ul>.menu-item.sub-menu>a:hover::after,
.layout .layout-sidebarpro.collapsed .menu>ul>.menu-item.active>a::after {
    color: var(--color-text-main);
    /* ADAPTADO */
}

.layout .layout-sidebarpro.collapsed .menu>ul>.menu-item.sub-menu>.sub-menu-list {
    transition: none;
    width: 200px;
    margin-left: 3px;
    border-radius: 4px;
    display: none;
    visibility: hidden;
}

/* ==================================== */
/* 12. COLAPSADOR DEL SIDEBAR */
/* ==================================== */

.layout .layout-sidebarpro .sidebar-collapser {
    transition: left var(--transition-duration) ease-in-out;
    position: fixed;
    left: 230px;
    top: 130px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-collapser-bg);
    /* ADAPTADO */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    transform: translateX(50%);
    z-index: 111;
    cursor: pointer;
    color: white;
    box-shadow: 1px 1px 4px var(--color-bg-sidebar);
    /* ADAPTADO */
    pointer-events: auto;
    padding: 0;
}

/* Colapsador en estado colapsado */
.layout .layout-sidebarpro.collapsed .sidebar-collapser {
    left: 60px;
}

.layout .layout-sidebarpro.collapsed .sidebar-collapser i svg {
    transform: rotate(180deg);
}

/* ==================================== */
/* 13. EFECTOS CON IMAGEN DE FONDO */
/* ==================================== */

.layout .layout-sidebarpro.has-bg-image .menu.icon-shape-circle .menu-item a .menu-icon,
.layout .layout-sidebarpro.has-bg-image .menu.icon-shape-rounded .menu-item a .menu-icon,
.layout .layout-sidebarpro.has-bg-image .menu.icon-shape-square .menu-item a .menu-icon {
    background-color: rgba(11, 26, 44, 0.6);
}

.layout .layout-sidebarpro.has-bg-image:not(.collapsed) .menu>ul>.sub-menu>.sub-menu-list {
    background-color: var(--color-bg-sidebar);
    /* ADAPTADO */
}

/* ==================================== */
/* 15. BADGES Y ELEMENTOS UTILITARIOS */
/* ==================================== */

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    color: #fff;
    background-color: #6c757d;
}

.badge.primary {
    background-color: #ab2dff;
}

.badge.secondary {
    background-color: #079b0b;
}

.sidebar-toggler {
    position: fixed;
    right: 20px;
    top: 20px;
}

.social-links a {
    margin: 0 10px;
    color: #3f4750;
}

/* ==================================== */
/* 15. OVERLAY Y TOGGLER (Unificado) */
/* ==================================== */

.layout .overlay,
#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;
    display: none;
}

.layout .sidebar-toggler {
    display: none;
}



/* 1. Ocultar Colapsador en Móvil */
#btn-collapse {
    display: none;
}


/* 2. Sidebar como Overlay (Cargando OCULTO por defecto) */
.layout .layout-sidebarpro {
    position: fixed;
    left: calc(-1 * var(--sidebar-width));
    /* OCULTO POR DEFECTO */
    height: 100%;
    top: var(--header-height);
    /* ADAPTADO */
    /* Debajo del Header */
    z-index: var(--z-index-sidebar);
    /* ADAPTADO */
}





/* Mostrar sidebar al hacer Toggle */
.layout .layout-sidebarpro.toggled {
    left: 0;
}

/* Mostrar Overlay cuando está toggled */
.layout .layout-sidebarpro.toggled~#overlay {
    display: block;
}

/* 3. El contenido NO debe moverse */
.layout.has-sidebar>.layout {
    margin-left: 0;
}

/* 4. Mostrar el botón Toggler (hamburguesa) */
.layout .sidebar-toggler {
    display: initial;
}






/* ==================================== */
/* BREAKPOINT PHABLET/TABLET PEQUEÑA (481px+) */
/* ==================================== */
@media (min-width: 481px) {}

/* ==================================== */
/* BREAKPOINT TABLET/DESKTOP (769px+) */
/* ==================================== */
@media (min-width: 769px) {

    #btn-collapse {
        display: block;
    }






    /* 1. Sidebar Fijo, inicia Colapsado (modo icono) */
    .layout .layout-sidebarpro {

        left: 0;
        top: var(--header-height);
        /* ADAPTADO */
        height: calc(100vh - var(--header-height));
        /* ADAPTADO */
        z-index: var(--z-index-sidebar);
        /* ADAPTADO */
        overflow-y: scroll;
        overflow-x: hidden;
    }

    /* 2. El Contenido se desplaza el ancho del modo Icono */
    .layout.has-sidebar>.layout {
        margin-left: var(--sidebar-collapsed-width);
        /* ADAPTADO */
        transition: margin-left var(--transition-duration);
    }

    /* Contenido sin margen cuando sidebar está completamente oculto por toggle */
    .layout.has-sidebar>.layout-sidebarpro.toggled~#overlay~.layout {
        margin-left: 0;
    }

    /* 3. Comportamiento Overlay al EXPANDIR (sin mover el contenido) */
    .layout .layout-sidebarpro:not(.collapsed) {
        width: var(--sidebar-width);
        /* ADAPTADO */
        min-width: var(--sidebar-width);
        /* ADAPTADO */
    }

    /* 4. Sidebar Oculto Totalmente (por botón Toggled) */
    .layout .layout-sidebarpro.toggled {
        transform: translateX(calc(-1 * var(--sidebar-width)));
        /* ADAPTADO */
    }

    /* 5. Lógica del Overlay: SOLO visible cuando está EXPANDIDO (not .collapsed) */
    .layout .layout-sidebarpro:not(.collapsed):not(.toggled)~#overlay {
        display: block;
    }

    /* Aseguramos que el overlay no se muestre cuando se oculta totalmente */
    .layout .layout-sidebarpro.toggled~#overlay {
        display: none;
    }

    /* 6. Colapsador visible */
    .layout .layout-sidebarpro .sidebar-collapser {
        display: flex;
    }

    /* Colapsador en estado expandido (overlay) */
    .layout .layout-sidebarpro:not(.collapsed) .sidebar-collapser {
        left: calc(var(--sidebar-width) - 20px);
        /* ADAPTADO */
    }

    /* Colapsador en estado icono */
    .layout .layout-sidebarpro.collapsed .sidebar-collapser {
        left: 60px;
    }



    /* ESTILOS MENU ICONOS - Solo enlaces de primer nivel */
    .layout .layout-sidebarpro.collapsed #menu-sidebar-z>.menu-item>a,
    #menu-footer-z>li>a {
        display: flex;
        flex-direction: column;
    }

    /* Margen solo para los items de primer nivel */
    .collapsed #menu-sidebar-z>.menu-item {
        margin-bottom: 15px;
    }

    /* Padding solo para items de primer nivel */
    .layout .layout-sidebarpro.collapsed #menu-sidebar-z>.menu-item {
        padding: 5px 2px 5px 0px;
    }

    /* Icono solo en primer nivel */
    .layout .layout-sidebarpro.collapsed #menu-sidebar-z>.menu-item>a .menu-icon {
        margin-right: 0;
    }

    /* Título solo en primer nivel */
    .layout .layout-sidebarpro.collapsed #menu-sidebar-z>.menu-item>a .menu-title {
        font-size: 0.65em;
    }

    /*END*/


    /* Estilos para Mobile Vertical (Base: 0px) */
    /* Por lo general, en móvil el sidebar se mueve debajo del contenido principal. 
   Podríamos aplicar el sticky solo si el sidebar se mantiene visible. 
   Si se apila, no es recomendable usar sticky. */
    /* Si el sidebar *no* aparece en móvil vertical, omite este bloque. 
   Asumiremos que NO aparece o queremos el sticky solo en pantallas más grandes. */

    /* Para 481px y más (Phablet / Tablet pequeña) - Donde el sidebar probablemente es visible */

    /* Aseguramos que el contenedor del sidebar permita el flujo sticky */


    .zsticky .inside-right-sidebar {
        /* Hacemos el contenedor (el widget) fijo dentro de su padre (el sidebar) */
        position: -webkit-sticky;
        /* Prefijo para compatibilidad con navegadores antiguos */
        position: sticky;

        /* Define dónde se 'pegará' el elemento. 
           Queremos que se pegue justo debajo de tu header fijo de 60px. */
        top: 80px;

        /* Es crucial para GeneratePress y otros temas basados en Flexbox/Grid 
           para asegurar que el elemento sticky funcione correctamente. */
        align-self: flex-start;

        /* Asegura que no se desborde fuera del contenedor del sidebar. */
        width: 100%;

    }
}

/* ==================================== */
/* BREAKPOINT DESKTOP LARGE (1025px+) */
/* ==================================== */
@media (min-width: 1025px) {

    .layout .layout-sidebarpro:not(.collapsed):not(.toggled)~#overlay {
        display: none;
    }

    /* 1. Header fijo superior */
    header.premium-header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--z-index-header);
        /* ADAPTADO */
        margin-left: 0;
        width: 100%;
    }

    /* 2. Sidebar Pro fijo */
    .layout .layout-sidebarpro {
        /* Es importante incluir .collapsed aquí */
        position: fixed;
        left: 0;
        top: var(--header-height);
        /* ADAPTADO */
        height: calc(100vh - var(--header-height));
        /* ADAPTADO */
        z-index: var(--z-index-sidebar);
        /* ADAPTADO */
        overflow-y: scroll;
        overflow-x: hidden;
    }

    /* [NUEVA REGLA] Sobrescribir el estado COLAPSED durante la carga inicial en PC */
    .layout .layout-sidebarpro.pc-collapsed {
        /* Fuerza el ancho completo (anulando el ancho de .collapsed) */
        width: var(--sidebar-width) !important;
        /* ADAPTADO */
        min-width: var(--sidebar-width) !important;
        /* ADAPTADO */
    }

    /* [NUEVA REGLA] Sobrescribir el margen del contenido durante la carga inicial en PC */
    .layout.has-sidebar>.layout-sidebarpro.pc-collapsed~#overlay~.layout {
        /* Fuerza el margen de modo completo (anulando el margen de .collapsed) */
        margin-left: var(--sidebar-width) !important;
        /* ADAPTADO */
    }

    /* [NUEVA REGLA] Forzar visibilidad y posición del botón en carga inicial */
    .layout .layout-sidebarpro.pc-collapsed .sidebar-collapser {
        left: calc(var(--sidebar-width) - 1.5rem) !important;
        /* ADAPTADO */
    }

    /* [NUEVA REGLA] Forzar visibilidad de textos/logos */
    .layout .layout-sidebarpro.pc-collapsed .menu .menu-header,
    .layout .layout-sidebarpro.pc-collapsed .pro-sidebar-logo>h5 {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
    }

    /* 3. Layout con sidebar activo - EMPUJA EL CONTENIDO (Modo Completo por defecto) */
    .layout.has-sidebar>.layout {
        margin-left: var(--sidebar-width);
        /* ADAPTADO */
        transition: margin-left var(--transition-duration);
    }


    /* Sidebar colapsado - EMPUJA EL CONTENIDO menos */
    .layout.has-sidebar>.layout-sidebarpro.collapsed~#overlay~.layout {
        margin-left: var(--sidebar-collapsed-width);
        /* ADAPTADO */
    }

    /* 4. Sidebar completamente oculto (toggled) */
    .layout .layout-sidebarpro.toggled {
        transform: translateX(calc(-1 * var(--sidebar-width)));
        /* ADAPTADO */
    }

    /* 5. Contenido sin margen cuando sidebar está toggled (Empuja a 0) */
    .layout.has-sidebar>.layout-sidebarpro.toggled~#overlay~.layout,
    .layout.has-sidebar>.layout-sidebarpro.toggled~#overlay~.site-footer {
        margin-left: 0;
    }

    /* 6. Overlay y Toggler ocultos */
    #overlay {
        display: none;
    }

    .layout .sidebar-toggler {
        display: none;
    }

    /* 7. Colapsador visible y ajustado */
    .layout .layout-sidebarpro .sidebar-collapser {
        display: flex;
    }


    /*ESTILOS HACK PARA .COLLLAPSED SE VEA BIEN EN TABLET Y PC TENGA ESTE*/

    .layout .layout-sidebarpro.pc-collapsed #menu-sidebar-z>.menu-item>a,
    #menu-footer-z>li>a {
        display: flex;
        flex-direction: inherit;
    }

    .pc-collapsed #menu-sidebar-z>.menu-item {
        margin: 5px;
    }

    .layout .layout-sidebarpro.pc-collapsed #menu-sidebar-z>.menu-item {
        padding: 0;
    }

    .layout .layout-sidebarpro.pc-collapsed #menu-sidebar-z>.menu-item>a .menu-icon {
        margin-right: 10px;
    }

    .layout .layout-sidebarpro.pc-collapsed #menu-sidebar-z>.menu-item>a .menu-title {
        font-size: 0.9em;
    }

    /**/

}