/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*>>>>>>>>>   Diseño responsive de los bloques Tailwind >>>>>>>>>>>>>>>>*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>/*
/*Diseño Flex del Menu */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.sidebar_main_body {
    width: 273px;
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
}
.component_main_body {
    width: calc(100% - 273px);
    display: flex;
    position: relative;
    left: 273px;
}



/*1. Menu Lateral*/
/* Este debe colapsar por debajo de 992px */
@media (max-width: 991px) {
    .sidebar_main_body {
        width: 0px;
        display: none;
        opacity: 0;
    }

    .component_main_body {
        flex: 0 0 100%;        
        width: 100%; 
        left: 0px;

    }
    
}

/*2. Tabla Grid */
/* Los <td> con clase w50p deben colapsar a 100% debajo de 768px */
@media (max-width: 767px) {
    .grid td.w50p, .grid td.w30p, .grid td.w40p, .grid td.w60p, .grid td.w70p {
        width: 100%;
        display: inline-block !important;
     
    }
}