@media screen and (max-width: 768px){

    body{
        overflow-x: hidden;
    }

    .container{
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    td, th{
        word-break: break-word !important;
        white-space: normal !important;
    }

    .login-container{
        width: 94% !important;
        max-width: 420px !important;
        margin: 20px auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .header-text{
        font-size: 34px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        word-break: normal !important;
    }

    .sub-text{
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    .label-td{
        width: 100% !important;
    }

    .input-text,
    input[type="text"],
    input[type="email"],
    input[type="password"]{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .login-btn{
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .form-body,
    .box{
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    .heading-text{
        font-size: 42px !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    .sub-text2,
    .sub-text3{
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .menu{
        position: fixed !important;
        left: -260px !important;
        top: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 999 !important;
        transition: 0.3s !important;
        overflow-y: auto !important;
        border-right: 1px solid #e5e7eb !important;
        border-bottom: none !important;
    }

    .menu.active{
        left: 0 !important;
    }

    .menu-container,
    .profile-container{
        width: 100% !important;
    }

    .menu-row,
    .menu-btn{
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .menu-btn{
        background-position: 20px center !important;
    }

    .menu-text{
        padding-left: 55px !important;
        font-size: 16px !important;
    }

    .dash-body{
        width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    .nav-bar{
        width: 100% !important;
        overflow-x: auto !important;
    }

    .mobile-menu-btn{
        display: block !important;
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 1000 !important;
        background: #0A76D8 !important;
        color: #fff !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    }

    .dashboard-items{
        width: 100% !important;
        display: block !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    .h1-dashboard,
    .h3-dashboard{
        text-align: left !important;
    }

    .dashboard-icons,
    .dashboard-icons-setting{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .filter-container,
    .filter-container-items,
    .items-container,
    .search-items{
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .popup{
        width: 92% !important;
        margin: 40px auto !important;
    }

    .box{
        width: 100% !important;
    }

    /* EXCEPCIONES PARA TECNO-MEDIC / DOCTOR DASHBOARD */
    .doctor-header{
        width: 95% !important;
        display: table !important;
        table-layout: fixed !important;
    }

    .doctor-header td{
        display: table-cell !important;
        width: 100% !important;
    }

    .doctor-table-scroll{
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .doctor-table-scroll table,
    .doctor-table-scroll .sub-table{
        width: 720px !important;
        min-width: 720px !important;
        max-width: none !important;
    }
}