@media only screen and (max-width: 400px) {
    .login .content{
        width: 75% !important;
    }
    #m_header .m-brand__logo-wrapper img{
        width: 72px !important;
    }

    .reponsive-callcenter-header{
        display: none !important;
    }

    #m_header .flaticon-more{
        display: none;
    }

    .m-stack__item.m-brand.m-brand--skin-light {
        zoom: 1.2;
    }

    #datatable_att_wrapper {
        width: 100% !important;
        overflow-x: auto;
    }

    .m-footer--push.m-aside-left--enabled:not(.m-footer--fixed) .m-footer{
        margin: auto;
    }
    .m-aside-left--on{
        width: 100% !important;
    }
    .m-aside-left--on .m-aside-left-close{
        left: 90% !important;
    }

    #table-content{
        width: 100% !important;
        overflow-x: auto;
    }
    #list_data{
        width: 100% !important;
        overflow-x: auto;
    }

    #contract_table_wrapper{
        width: 100% !important;
        min-height: 351px !important;
        overflow-x: auto;
    }

    #list_bill_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #student_table_wrapper{
        min-height: 300px !important;
        width: 100% !important;
        overflow-x: auto;
    }

    .show-info-staff{
        display: none!important;
    }

    #m_aside_header_menu_mobile_toggle span{
        display: none;
    }
    #m_aside_header_menu_mobile_toggle{
        position: fixed;
        top: 1px;
        right: 5px;
    }

    #m_aside_left_offcanvas_toggle span{
        display: none;
    }
    #m_aside_left_offcanvas_toggle{
        position: fixed;
        top: 1px;
        left: 5px;
    }


    #announcement_wrapper{
        width: 90% !important;
    }

    .m-dropdown.m-dropdown--medium .m-dropdown__wrapper{
        width: 325px;
    }

    #m_widget4_tab_contract_content_search{
        width: 100% !important;
        overflow-x: auto;
    }

    #modal-multi-attendance .modal-content{
        width: 120%;
    }

    #table_announcement_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #training_post_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #form_contract .form-group{
        width: 100% !important;
        overflow-x: auto;
    }
}

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

    .m-footer--push.m-aside-left--enabled:not(.m-footer--fixed) .m-footer{
        margin: auto!important;
    }

    .reponsive-callcenter-header{
        display: none !important;
    }

    .m-aside-left--on{
        width: 100% !important;
    }

    #datatable_att_wrapper {
        width: 100% !important;
        overflow-x: auto;
    }

    .m-aside-left--on .m-aside-left-close{
        left: 90% !important;
    }


    #table-content{
        width: 100% !important;
        overflow-x: auto;
    }

    #list_data{
        width: 100% !important;
        overflow-x: auto;
    }


    #contract_table_wrapper{
        width: 100% !important;
        min-height: 351px !important;
        overflow-x: auto;
    }


    #list_bill_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #student_table_wrapper{
        min-height: 300px !important;
        width: 100% !important;
        overflow-x: auto;
    }


    #m_aside_header_menu_mobile_toggle span{
        display: none;
    }
    #m_aside_header_menu_mobile_toggle{
        position: fixed;
        top: 1px;
        right: 5px;
    }

    #m_aside_left_offcanvas_toggle span{
        display: none;
    }
    #m_aside_left_offcanvas_toggle{
        position: fixed;
        top: 1px;
        left: -20px;
    }

    #announcement_wrapper{
        width: 90% !important;
    }

    #m_widget4_tab_contract_content_search{
        width: 100% !important;
        overflow-x: auto;
    }

    #modal-multi-attendance .modal-content{
        width: 120%;
    }

    #table_announcement_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #training_post_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #form_contract .form-group{
        width: 100% !important;
        overflow-x: auto;
    }
}

@media only screen and (min-width: 1000px){

    .m-footer--push.m-aside-left--enabled:not(.m-footer--fixed) .m-footer{
        margin: auto!important;
    }

    .m-aside-left--on{
        width: 100% !important;
    }

    .m-aside-left--on .m-aside-left-close{
        left: 90% !important;
    }

    .reponsive-callcenter-header{
        /*display: none !important;*/
    }

    #table-content{
        width: 100% !important;
        overflow-x: auto;
    }

    #list_data{
        width: 100% !important;
        overflow-x: auto;
    }


    #contract_table_wrapper{
        min-height: 351px !important;
        width: 100% !important;
        overflow-x: auto;
    }


    #list_bill_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #student_table_wrapper{
        width: 100% !important;
        min-height: 300px !important;
        overflow-x: auto;
    }


    #m_aside_header_menu_mobile_toggle span{
        display: none;
    }
    #m_aside_header_menu_mobile_toggle{
        position: fixed;
        top: 1px;
        right: 5px;
    }

    #m_aside_left_offcanvas_toggle span{
        display: none;
    }
    #m_aside_left_offcanvas_toggle{
        position: fixed;
        top: 6px;
        left: -15px;
    }

    #announcement_wrapper{
        width: 90% !important;
    }

    .m-stack.m-stack--general.m-stack--ver>.m-stack__item.m-stack__item--middle{
        position: relative;
        left: 20px;
    }


    #m_widget4_tab_contract_content_search{
        width: 100% !important;
        overflow-x: auto;
    }

    #modal-multi-attendance .modal-content{
        width: 120%;
    }

    #table_announcement_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #training_post_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    /*#form_contract .form-group{*/
        /*width: 100% !important;*/
        /*overflow-x: auto;*/
    /*}*/
}

@media only screen and (min-width: 900px) {
    #announcement_wrapper{
        width: 600px !important;
    }
}

@media only screen and (min-width: 800px) and (max-width: 1024px){
    #data_create_customer #create_customer_modal .modal-content{
        position: fixed !important;
        left: -18% !important;
    }
}

@media only screen and (min-width: 1024px){

    #m_widget4_tab_contract_content_search{
        width: 100% !important;
        overflow-x: auto;
    }

    #announcement_wrapper{
        width: 600px !important;
    }

    .div_parent_center_id{
        max-with: 16% !important;
    }

    .div_parent_status{
        max-with: 16% !important;
    }

    .div_parent_status_contract{
        max-with: 16% !important;
    }

    .div_parent_is_confirm_status{
        max-with: 18% !important;
    }

    .div_parent_end_date{
        max-with: 18% !important;
    }

    .div_parent_general_search{
        max-with: 16% !important;
        flex: 0 0 18%;
    }

    .div_parent_sale_id{
        max-width: 16% !important;
        flex: 0 0 18%;
    }

    .div_parent_created_by{
        max-width: 16% !important;
        flex: 0 0 18%;
    }

    .div_parent_expired_date_status{
        max-width: 16% !important;
        flex: 0 0 20%;
    }

    .div_parent_status_contract{
        max-width: 16% !important;
    }

    .dev_parent_center_id{
        max-width: 18% !important;
    }

    .div_parent_start_date{
        max-width: 18% !important;
    }



    .absent_reponsive_reason{
        margin-bottom: 20px
    }

    .absent_reponsive_create{
        position:absolute;
        bottom:0;
    }

    .div_reponsive_parent_absent{
        padding-bottom: 5px
    }

    .div_parent_start_date_create{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 16% !important;
        flex: 0 0 16%;
    }

    .div_parent_end_date_create{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 16% !important;
        flex: 0 0 16%;
    }
}


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

    .finance_create_contract{
        display: none;
    }

    #m_widget4_tab_contract_content_search .m-widget11{
        width: 100% !important;
        overflow-x: auto;
    }

    #m_aside_header_menu_mobile_toggle span{
        display: none;
    }
    #m_aside_header_menu_mobile_toggle{
        position: fixed;
        top: 1px;
        right: 5px;
    }

    #m_aside_left_offcanvas_toggle span{
        display: none;
    }
    #m_aside_left_offcanvas_toggle{
        position: fixed;
        top: 1px;
        left: -15px;
    }

    .m-brand__logo-wrapper{
        position: relative;
        left: 20px;
    }

    #list_data_item{
        width: 100% !important;
        overflow-x: auto;
    }
    #m_table_1_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #data_create_customer #create_customer_modal .modal-content{
        width: 138%;
    }

    #data_create_customer #customer_detail_modal .modal-content{
        width: 121%;
    }

    #data_create_customer #customer_detail_modal .modal-body {
        width: 100% !important;
        overflow-x: auto;
    }

    #list_data_follow_up #m_table_2_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #data_form_create_opportunity .modal-content{
        width: 137% !important;
    }

    #data_form_add_follow_up #follow_up_modal .modal-content{
        width: 138% !important;
    }

    #detail_bill_modal .modal-content{
        width: 107% !important;
    }

    #detail_bill_modal .modal-content #d_form_create_bill .col-md-12{
        width: 100% !important;
        overflow-x: auto;
    }

    #teacher_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #staff_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }


    .m-aside-left--on{
        width: 100% !important;
    }
    .m-aside-left--on .m-aside-left-close{
        left: 90% !important;
    }

    #data_table_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    .div_parent_start_date_create{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }

    .div_parent_end_date_create{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }

    .div_parent_start_date_expired{
        display: none;
    }

    .div_parent_end_date_expired{
        display: none;
    }

    .div_parent_expired_date_status{
        max-width: 100% !important;
        flex: 0 0 100%;
    }

    .div_parent_center_id{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-with: 100% !important;
        margin-bottom: 10px;
    }

    .div_parent_status{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-with: 100% !important;
        margin-bottom: 10px;
    }

    .div_parent_status_contract{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-with: 100% !important;
        margin-bottom: 10px;
    }

    .div_parent_general_search{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-with: 100% !important;
        margin-bottom: 10px;
        flex: 0 0 100% !important;
    }

    .div_parent_sale_id{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }

    .div_parent_status_contract{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 100% !important;
    }

    .align-items-center .align-items-center div{
        max-width: 100% !important;
        margin-bottom: 10px;
    }

    .div_parent_created_by{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }

    .dev_parent_center_id{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 100% !important;
    }

    .div_parent_start_date{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 100% !important;
    }

    .div_parent_is_confirm_status{
        padding-right: 3px !important;
        padding-left: 3px !important;
        max-width: 100% !important;
    }

    .div_export_excel{
        display: none;
    }

    .div_multi_customer{
        display: none;
    }

    .div_upload_student{
        display: none;
    }

    .div_upload_excel{
        display: none;
    }

    .div_parent_select_week{
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .div_parent_select_date{
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .div_parent_teacher_id{
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .div_parent_select_course{
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .div_parent_select_classes{
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .div_parent_timetable_session_index{
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .div_parent_timetable_start_time{
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .div_parent_timetable_end_time{
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    #datatable_att_wrapper {
        width: 100% !important;
        overflow-x: auto;
    }


    #announcement_wrapper{
        width: 600px;
    }

    .div_parent_end_date{
        max-with: 100% !important;
    }
    .div_parent_end_date{
        max-with: 100% !important;
    }

    #list_data{
        width: 100% !important;
        overflow-x: auto;
    }

    #confirm_register_wrapper{
        width: 100% !important;
        overflow-x: auto;
    }

    #timetable-data{
        width: 100%;
        overflow-x: auto;
    }

    #list_data th{
        width: 100% !important;
    }
}