/* ===== PANEL LEWEGO MENU ===== */

.sidebar-left {
    width: 180px !important;
    min-width: 180px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    padding: 0px 0px !important;
    border: 0px solid #222222 !important;
}


/* ===== MENU ===== */

.sidebar-left .mod-menu {
    width: 120% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}


/* ===== ELEMENT MENU ===== */

.sidebar-left .mod-menu li {
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    display: flex !important;
    justify-content: center !important;
}


/* ===== PRZYCISKI ===== */

.sidebar-left .mod-menu li a {
    width: 230px !important;
    box-sizing: border-box !important;

    display: block !important;

    padding: 12px 15px !important;

    background: #202B2F !important;
    color: #ffffff !important;

    border-radius: 7px !important;

    text-decoration: none !important;
    text-align: left !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* ===== NAJECHANIE ===== */

.sidebar-left .mod-menu li a:hover {
    background: #c00000 !important;
    color: #ffffff !important;

    transform: translateX(5px) !important;

    box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important;
}


/* ===== AKTYWNA POZYCJA ===== */

.sidebar-left .mod-menu li.current > a,
.sidebar-left .mod-menu li.active > a {
    background: #c00000 !important;
    color: #ffffff !important;
}

  /* ===== MENU NA GÓRZE TELEFONU ===== */

@media (max-width: 768px) {

    /* główny układ Cassiopeia */
    .site-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    .container-component {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    /* lewy panel */
    .sidebar-left {
        order: -10 !important;
        width: 100% !important;
        min-width: 0 !important;
        background: #ffffff !important;
    }

    /* główna treść */
    .container-component {
        order: 10 !important;
    }

}
  
    /* panel menu */
    .sidebar-left {
        width: 100% !important;
        min-width: 0 !important;
        background: #ffffff !important;
        padding: 10px !important;
        order: -1 !important;
    }

    /* lista */
    .sidebar-left .mod-menu {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* elementy */
    .sidebar-left .mod-menu li {
        width: 100% !important;
        display: block !important;
        margin: 1 1 6px 0 !important;
    }

    /* przyciski */
    .sidebar-left .mod-menu li a {
        width: 100% !important;
        max-width: none !important;

        background: #202B2F !important;
        color: #ffffff !important;

        border-radius: 6px !important;

        padding: 11px 15px !important;

        text-align: left !important;
    }

    /* aktywny */
    .sidebar-left .mod-menu li.current > a,
    .sidebar-left .mod-menu li.active > a {
        background: #c00000 !important;
        color: #ffffff !important;
    }

    /* po dotknięciu / najechaniu */
    .sidebar-left .mod-menu li a:hover {
        background: #c00000 !important;
        color: #ffffff !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* tło do loga na górze*/
    .logo-gora {    
        background: #202B2F !important;
        padding: 16px !important;
        text-align: center !important;
    }

    .container-component {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}