@media (min-width: 0px) and (max-width: 1270px) {

    .mainSideinnerNav {

        width: 100% !important;

        position: fixed;

        bottom: 28px;

        height: fit-content;

        z-index: 9;

        box-shadow: 0 0 15px 1px #4444;

        left: 0;

    }
    .accordion-body {
        padding: 0;
    }
    .gridWrap {
        display: block !important;
    }

    .listViewWrap {
        display: none !important;
    }
    .innerTop {flex-direction: column;align-items: baseline;gap: 20px;}
    .g-label {
        font-size: 14px;
    }

    .g-row {
        gap: 0px !important;
        white-space: normal !important;
    }
    .responsiveHeader {
        display: block;
    }

    .mainResMenuBtnd {
        display: block;
    }

    .crssBBtn {
        font-size: 40px;
        color: #fff;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 48px;
    }

    .mainResMenuBtnd {
        position: relative;
    }

    .resMenBtn.active {
        opacity: 0;
        visibility: hidden;
    }

    .crssBBtn.active {
        opacity: 1;
        visibility: visible;
    }
    .g-mini-val {
        white-space: normal;
    }
    .user {
        display: none;
    }

    .user--ress {
        display: flex !important;
    }

    .responsiveHeader {
        position: fixed;
        z-index: 9;
        background: #000;
        padding: 80px 20px 20px;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: 300ms all;
    }
    .responsiveHeader.active {
        opacity: 1;
        visibility: visible;

    }
    .resNav li a {
        font-size: 14px;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        margin: 5px 0;
        background: #ffffff24;
        border-radius: 9px;
    }

    .resNav li {
    }

    .user--ress .userDropDown {position: relative;opacity: 1 !important;left: 40px;bottom: 0px;background: transparent;visibility: visible !important;}

    .resNav li a .missionBtn {
        height: 18px;
    }

    .resNav {
        margin: 0 0 20px !important;
    }

    ul.mainNavside {
        display: none;
    }

    .resMenBtn {
        font-size: 30px;
        color: #fff;
        height: 35px;
        opacity: 1;
        visibility: visible;
    }

    .g-mini-row {
        gap: 10px !important;
        white-space: normal !important;
    }
    .table_overFlowMain.grid-view .dataTables_scrollBody {
        max-height: 100% !important;
    }
    a.td-link {
        width: fit-content;
    }

    .confBtn {
        font-size: 13px;
    }

    .BusBtn {
        font-size: 13px;
    }

    .driverBtn {
        font-size: 13px;
    }

    .table_overFlowMain.grid-view .pdf {
        width: 40px !important;
        height: 40px;
    }

    .viewBtn {
        width: 34px;
        height: 34px;
        position: relative;
    }

    .viewBtn span {
        left: -86px;
        top: 50%;
        transform: translatey(-50%);
    }

    .userDropDown {

        left: -20px;

    }

    .userDropDown a {

        font-size: 12px;

    }

    .userDropDown a i {

        height: 14px;

    }

    .innerTop {

        margin: 0 0 20px;

    }

    .rightMain {

        width: 100%;

    }

    .mainMenuBtn {

        display: none;

    }

    .mainNavside {

        display: flex;

        align-items: center;

        justify-content: space-evenly;

        padding: 10px 10px 25px !important;

    }

    .mainNavside.active li {

        width: 55px;

        height: 55px;

        overflow: visible;

    }

    .mainNavside li a i {

        font-size: 21px;

        height: 25px;

    }

    .mainSideinnerNav.active .mainNavside li a {

        padding: 11px;

    }

    .topMAin {

        padding: 5px 10px;

    }

    .sideNavLogo {

        width: 100px;

    }

    .userImg {

        width: 30px;

        height: 30px;

    }

    .userEmail {

        font-size: 12px;

    }

    .table_box {

        padding: 100px 10px 130px;

    }

    .tableInnerHead {

        font-size: 20px;

    }

    /*.toggle-btn {*/

    /*    display: none;*/

    /*}*/

    .filterBtn {

        font-size: 12px;

    }

    div#example_filter {

        margin: 0;

        float: left;

    }

    div#example_filter label {

        font-size: 12px;

        margin: 0 0 10px;

    }

    .table_overFlowMain.grid-view tbody td {

        padding: 8px 6px;

        font-size: 11px !important;

        gap: 14px;

        overflow: clip;

    }

    div#example_filter label input {

        font-size: 10px;

        padding: 5px 10px;

        border-radius: 5px;

    }

    #example_length label {

        font-size: 12px;

    }

    .table_overFlowMain.grid-view tbody {

        flex-wrap: wrap;

    }


    .table_overFlowMain.grid-view tbody tr {

        width: 100%;

        height: 300px;

        border-radius: 10px;

        border: 1px solid #4444;

    }

    .table_overFlowMain.grid-view .action_bx {

        width: 123px;

        height: 38px !important;

        transform: translate(16px, -5px) !important;

        right: 0px !important;

        padding: 3px 0 0;

    }

    div#example_paginate {

        margin: 10px 0;

    }

    div#example_info {

        font-size: 10px;

    }

    .table_overFlowMain {

        padding: 10px 15px;

    }

    .copyMain {

        width: 100%;

        bottom: 0;

        background: #fff;

        padding: 7px 0;

        position: fixed;

    }

    .copyMain p {

        font-size: 10px;

        text-align: center;

        margin: 0;

    }

    .actionBtnInner li form {
        width: 30px;
        height: 30px;
    }

    .actionBtnInner li a i {

        height: 19px;

    }

    /* responsive new  */

    .driverData {

        width: 95%;

    }

    .mainSideinnerNav.active .mainNavside li a>span {
        position: absolute;
        width: max-content;
        font-size: 10px;
        bottom: -20px;
    }

    .mainSideinnerNav.active .mainNavside li a {

        justify-content: center;

        position: relative;

        border-radius: 10px;

        background: #000;

    }

    .mainNavside {

        gap: 10px;

        width: 670px !important;

        overflow: scroll;

        background: #494949;

    }

    .mainSideinnerNav {

        overflow: scroll;

    }

    .mainNavside.active .missionBtn span {

        left: -11px;

        height: fit-content;

        top: 33px;

        font-size: 10px;

        color: red;

        background: transparent;

    }

    .driverDataHead {

        font-size: 18px;

    }

    .innerhead {

        font-size: 14px;

    }

    .input_feilds {

        display: block;

    }

    .inputInnerFeild {

        width: 100%;

        margin: 10px 0;

    }

    .checkLists {

        display: block;

    }

    .checkFeild {

        width: 100%;

    }

    .checkFeildMain {

        width: 100%;

    }

    .feedBackFeilds {

        display: block;

    }

    .feedBackFeild {

        width: 100%;

    }

    .bussFormMain {

        width: 95%;

    }

    .bussFormMain h5 {

        font-size: 16px;

    }

    .innerBox p {

        font-size: 12px;

    }

    .filterMain {

        width: 95%;

    }

    .innerCheckfeilds {

        flex-wrap: wrap;

    }

    .step-indicator {

        font-size: 11px;

        padding: 5px 9px;

    }

    .steps-line {

        gap: 10px;

    }

    .customPopMain.stepform {

        width: 95%;

        padding: 0 10px;

    }

    .innerFormBtn {

        font-size: 12px;

    }

    .assignmentFormBox {

        width: 95%;

    }

    .logBg {

        z-index: -1;

        width: 100%;

    }

    .mainLogo {

        filter: invert(1);

    }

    .nodata {

        font-size: 15px;

    }

}

@media (min-width: 1240px) and (max-width: 1499px) {

    .table_box {

        height: 100%;

        width: 100%;

        margin-left: auto !important;

        margin-right: 0;

        transform: translate(0);

        overflow: auto;

    }

    .mainNavside.active {

        width: 100%;

    }

    .driverData {

        width: 50%;

    }

    .mainNavside.active li {

        width: 100%;

    }

    .mainNavside li a {

        width: 100%;

    }

    .rightMain {

        width: 80%;

        margin-left: auto;

        margin-right: 0;

        height: 100vh;

    }

    ul.mainNavside {

        width: 100%;

        margin: 0 !important;

        height: 100%;

    }

    .mainSideinnerNav.active {

        width: 6%;

    }

    .rightMain.active .table_box {

        width: 100%;

        transform: translate(0);

    }

    .rightMain.active {

        width: 94% !important;

    }

    div#example_paginate {

        margin-top: -40px !important;

    }

    div#example_info {

        margin: 30px 0 0;

    }

    #example_length label {

        margin: 0 0 20px;

    }

    div#example_filter {

        margin: -50px 0 20px;

    }

    .main {

        width: 100%;

    }

    .main_sideNav {

        width: 100%;

        height: 100%;

    }

    .mainSideinnerNav {

        width: 19%;

        height: 100vh;

    }

    .topMAin {

        width: 100%;

        margin: 0 auto;

        padding: 0 20px 0 20px;

    }

}
@media (max-width: 768px) {
.g-left {
gap:78px!important;
}
}
@media (min-width: 1024px) and (max-width: 1239px) {

    .table_box {

        width: 100%;

        margin-left: auto !important;

        margin-right: 0;

        transform: translate(0);

    }

    .mainNavside.active {

        width: 100%;

    }

    .driverData {

        width: 50%;

    }

    .mainNavside.active li {

        width: 100%;

    }

    .mainNavside li a {

        width: 100%;

    }

    .rightMain {

        width: 73%;

        margin-left: auto;

        margin-right: 0;

    }

    ul.mainNavside {

        width: 100%;

        margin: 0 !important;

    }

    .mainSideinnerNav.active {

        width: 6%;

    }

    .rightMain.active .table_box {

        width: 100%;

        transform: translate(0);

    }

    .rightMain.active {

        width: 94% !important;

    }

    div#example_paginate {

        margin-top: -40px !important;

    }

    div#example_info {

        margin: 30px 0 0;

    }

    #example_length label {

        margin: 0 0 20px;

    }

    div#example_filter {

        margin: -50px 0 20px;

    }

    .main {

        width: 100%;

        padding: 0px 20px;

        gap: 20px;

    }

    .main_sideNav {

        width: 100%;

    }

    .mainSideinnerNav {

        width: 25%;

    }

    .topMAin {

        width: 100%;

        margin: 0 auto;

        padding: 0 20px 0 20px;

    }

    .steps-line {

        gap: 10px;

    }

    .step-indicator {

        padding: 5px 20px;

    }

    .filterScroll {

        padding: 0;

    }

    .mainNavside.active .missionBtn span {

        right: -180px;

    }

}


@media (min-width: 0px) and (max-width: 520px) {

    .mainSideinnerNav {
        width: 100% !important;
        position: fixed;
        bottom: 28px;
        max-height: 100px;
        z-index: 9;
        box-shadow: 0 0 15px 1px #4444;
        left: 0;
        padding-bottom: env(safe-area-inset-bottom);
        display: block !important;
        height: 100px;
    }

    .userDropDown {

        left: -20px;

    }

    .userDropDown a {font-size: 12px;padding: 10px 20px;background: #ff000024;border: 1px solid red;color: red;}

    .userDropDown a i {

        height: 14px;

    }

    .innerTop {

        margin: 0 0 20px;

    }

    .rightMain {

        width: 100%;

    }

    .mainMenuBtn {

        display: none;

    }

    .mainNavside {

        display: flex;

        align-items: center;

        justify-content: space-evenly;

        padding: 10px 10px 25px !important;

    }

    .mainNavside.active li {

        width: 55px;

        height: 55px;

        overflow: visible;

    }

    .mainNavside li a i {

        font-size: 21px;

        height: 25px;

    }

    .mainSideinnerNav.active .mainNavside li a {

        padding: 11px;

    }

    .topMAin {

        padding: 5px 10px;

    }

    .sideNavLogo {

        width: 100px;

    }

    .userImg {

        width: 30px;

        height: 30px;

    }

    .userEmail {

        font-size: 12px;

    }

    .table_box {padding: 100px 10px 40px;width: 100%;}

    .tableInnerHead {

        font-size: 20px;

    }

    /*.toggle-btn {*/

    /*    display: none;*/

    /*}*/

    .filterBtn {

        font-size: 12px;

    }

    div#example_filter {

        margin: 0;

        float: left;

    }

    div#example_filter label {

        font-size: 12px;

        margin: 0 0 10px;

    }

    .table_overFlowMain.grid-view tbody td {padding: 8px 6px;font-size: 14px !important;gap: 14px;overflow: clip;}

    div#example_filter label input {

        font-size: 10px;

        padding: 5px 10px;

        border-radius: 5px;

    }

    #example_length label {

        font-size: 12px;

    }

    .table_overFlowMain.grid-view tbody {

        flex-wrap: wrap;

    }


    .table_overFlowMain.grid-view tbody tr {width: 100%;height: 100%;border-radius: 10px;border: 1px solid #4444;}

    .table_overFlowMain.grid-view .action_bx {width: 163px;height: 38px !important;transform: translate(-24px, -5px) !important;right: 0px !important;padding: 3px 0 0;}

    div#example_paginate {

        margin: 10px 0;

    }

    div#example_info {

        font-size: 10px;

    }

    .table_overFlowMain {

        padding: 10px 15px;

    }

    .copyMain {

        width: 100%;

        bottom: 0;

        background: #fff;

        padding: 7px 0;

        position: fixed;

    }

    .copyMain p {

        font-size: 10px;

        text-align: center;

        margin: 0;

    }

    .table_overFlowMain.grid-view .action_bx {}

    .actionBtnInner li form {
        width: 30px;
        height: 30px;
    }

    .actionBtnInner li a i {

        height: 19px;

    }

    /* responsive new  */

    .driverData {

        width: 95%;

    }

    .mainSideinnerNav.active .mainNavside li a>span {
        position: absolute;
        width: max-content;
        font-size: 10px;
        bottom: -20px;
    }

    .mainSideinnerNav.active .mainNavside li a {

        justify-content: center;

        position: relative;

        border-radius: 10px;

        background: #000;

    }

    .mainNavside {
        gap: 10px;
    }

    .mainSideinnerNav {

        overflow: scroll;

    }

    .mainNavside.active .missionBtn span {

        left: -11px;

        height: fit-content;

        top: 33px;

        font-size: 10px;

        color: red;

        background: transparent;

    }

    .driverDataHead {

        font-size: 18px;

    }

    .innerhead {

        font-size: 14px;

    }

    .input_feilds {

        display: block;

    }

    .inputInnerFeild {

        width: 100%;

        margin: 10px 0;

    }

    .checkLists {

        display: block;

    }

    .checkFeild {

        width: 100%;

    }

    .checkFeildMain {

        width: 100%;

    }

    .feedBackFeilds {

        display: block;

    }

    .feedBackFeild {

        width: 100%;

    }

    .bussFormMain {

        width: 95%;

    }

    .bussFormMain h5 {

        font-size: 16px;

    }

    .innerBox p {

        font-size: 12px;

    }

    .filterMain {

        width: 95%;

    }

    .innerCheckfeilds {

        flex-wrap: wrap;

    }

    .step-indicator {

        font-size: 11px;

        padding: 5px 9px;

    }

    .steps-line {

        gap: 10px;

    }

    .customPopMain.stepform {

        width: 95%;

        padding: 0 10px;

    }

    .innerFormBtn {

        font-size: 12px;

    }

    .assignmentFormBox {

        width: 95%;

    }

    .logBg {

        z-index: -1;

        width: 100%;

    }

    .mainLogo {

        filter: invert(1);

    }

    .nodata {

        font-size: 15px;

    }

}

@media (min-width: 1240px) and (max-width: 1499px) {

    .table_box {

        height: 100%;

        width: 100%;

        margin-left: auto !important;

        margin-right: 0;

        transform: translate(0);

        overflow: auto;

    }

    .mainNavside.active {

        width: 100%;

    }

    .driverData {

        width: 50%;

    }

    .mainNavside.active li {

        width: 100%;

    }

    .mainNavside li a {width: 100%;font-size: 12px;}

    .rightMain {width: 100%;height: 100vh;}

    ul.mainNavside {width: 70% !important;margin: 0 !important;height: 100%;gap: 20px;}

    .mainSideinnerNav.active {

        width: 6%;

    }

    .rightMain.active .table_box {

        width: 100%;

        transform: translate(0);

    }

    .rightMain.active {

        width: 94% !important;

    }

    div#example_paginate {

        margin-top: -40px !important;

    }

    div#example_info {

        margin: 30px 0 0;

    }

    #example_length label {

        margin: 0 0 20px;

    }

    div#example_filter {

        margin: -50px 0 20px;

    }

    .main {

        width: 100%;

    }

    .main_sideNav {

        width: 100%;

        height: 100%;

    }

    .mainSideinnerNav {

        width: 19%;

        height: 100vh;

    }

    .topMAin {

        width: 100%;

        margin: 0 auto;

        padding: 0 20px 0 20px;

    }

}

@media (min-width: 1024px) and (max-width: 1239px) {

    .table_box {

        width: 100%;

        margin-left: auto !important;

        margin-right: 0;

        transform: translate(0);

    }

    .mainNavside.active {

        width: 100%;

    }

    .driverData {

        width: 50%;

    }

    .mainNavside.active li {

        width: 100%;

    }

    .mainNavside li a {

        width: 100%;

    }



    .rightMain {

        width: 100%;

        margin-left: auto;

        margin-right: 0;

    }

    ul.mainNavside {

        width: 100%;

        margin: 0 !important;

    }

    .mainSideinnerNav.active {

        width: 6%;

    }

    .rightMain.active .table_box {

        width: 100%;

        transform: translate(0);

    }

    .rightMain.active {

        width: 94% !important;

    }

    div#example_paginate {

        margin-top: -40px !important;

    }

    div#example_info {

        margin: 30px 0 0;

    }

    #example_length label {

        margin: 0 0 20px;

    }

    div#example_filter {

        margin: -50px 0 20px;

    }

    .main {

        width: 100%;

        padding: 0px 20px;

        gap: 20px;

    }

    .main_sideNav {

        width: 100%;

    }

    .mainSideinnerNav {

        width: 25%;

    }

    .topMAin {

        width: 100%;

        margin: 0 auto;

        padding: 0 20px 0 20px;

    }

    .steps-line {

        gap: 10px;

    }

    .step-indicator {

        padding: 5px 20px;

    }

    .filterScroll {

        padding: 0;

    }

    .mainNavside.active .missionBtn span {

        right: -180px;

    }

}
@media(max-width:768px){
ul.mainNavside {
    display: none;
}}