@media (min-width:1025px) and (max-width 1600px) {
    header.header-box .menu_flex .head_logo {
        text-align: left;
        width: 100%;
    }

    header.header-box .menu_flex {
        text-align: left;
    }
}


@media (max-width:1600px) {
    header.header-box .menu_flex {
        text-align: left;
        align-items: unset;
    }

    header.header-box .menu_flex {
        flex-direction: column;
        padding: 10px 0 10px 0;
    }

    header.header-box .head_menu {
        margin-left: unset;
    }

    header.header-box .navbarCustm-expand .navbar-collapse {
        position: unset;
        width: 100%;
        max-width: 100%;
        background: unset;
        box-shadow: unset;
    }

    header.header-box nav.navbar.navbarCustm-expand ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    nav.navbar.navbarCustm-expand a.nav-link {
        text-align: right;
    }

    header.header-box .head_menu nav.navbar.navbarCustm-expand {
        padding: unset;
    }

        header.header-box .head_menu nav.navbar.navbarCustm-expand div#navbarSupportedContent {
            padding-left: unset;
            padding-right: unset;
        }
}

@media only screen and (max-width:1440px) {
    .custom-header-controls ul li {
        width: 50px;
        height: 50px;
    }

        .custom-header-controls ul li svg {
            width: 25px;
        }

        .custom-header-controls ul li a {
            display: flex;
            align-items: center;
        }

    .main-content-body.mt-5 {
        margin-top: 1rem !important;
    }
    /*
    .menu-bar {
        height: 70vh;
    }*/

    .custom-table tr th, .custom-table tr td {
        white-space: nowrap;
        font-size: 16px;
        padding: 10px;
    }
    /*.Data-table-responsive h2 {
    display: none;
}*/
    div.dataTables_filter input {
        font-size: 16px;
    }

    .custom-header-controls ul li.user-dropdown {
        font-size: 14px;
    }
}

@media only screen and (max-width:1190px) {
    .custom-nav-tabs ul li {
        width: calc(50% - 20px) !important;
        margin: 10px 0;
    }

    .file-upload {
        width: 100% !important;
    }
}

@media only screen and (max-width:1024px) {
    .custom-nav-tabs ul li {
        width: calc(50% - 20px);
        margin: 10px 0px;
    }
}

@media only screen and (max-width:992px) {
    .wrapperNew {
        width: 100% !important;
    }

    .custom-nav-tabs ul li {
        width: 100% !important;
        margin: 10px 0;
    }

    .Data-table-responsive {
        padding: 15px;
    }

    .signatureBoxEditButton {
        margin-left: 0;
    }

    .file-upload.mt-4 {
        padding: 0px;
    }
    /*.sidebar {
        display: none;
    }*/

    .custom-flex .content-main {
        margin: 0 !important;
        border-radius: 0;
    }

    /*.sidebar.hide-menu {
        width: 100px !important;
        min-width: 40px;
        transition: 0.5s;
        display: block;
    }*/
    table.custom-amout-table tr td {
        padding-left: 0 !important;
    }

    .custom-control-nav-tabs .ms-options-wrap button {
        white-space: break-spaces;
    }

    .custom-flex .content-main {
        padding: 0px 20px;
    }

    .f-end-position input.btn.btn-success.btnNext.control-buton {
        min-width: 90px !important
    }

    #imageView {
        border: 1px solid #000;
        width: 100%;
    }

    #afterPicVehicle {
        border: 1px solid #000;
        width: 100%;
        max-width: 100%;
    }

    .file-upload {
        background-color: #ffffff;
        width: 100% !important;
        display: block;
    }

    .note-editable {
        height: 300px !important;
    }

    .drawSignatureBox {
        flex-direction: column;
    }

    .signatureControlBox {
        margin: 5px 0px;
    }

    .drawSignatureBox .signatureCanvasBox #myCanvas {
        border: 1px solid #ddd;
        width: 100%;
    }

    .button-design-tc.mt-3 {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .drawSignatureBox .signatureCanvasBox {
        width: 100%;
    }

    .footer-grid {
        grid-column-gap: 0em;
    }
}

@media Only screen and (max-width:767px) {
    .custom-header-controls ul li.user-dropdown a {
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 120px;
        display: block;
    }

    .button-design-tc.mt-3 {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: column;
    }

    .drawSignatureBox .signatureCanvasBox {
        width: 100%;
    }

    .button-design-tc.mt-3 a.btn.cancelbtn.btn-primary {
        width: 100%;
    }

    .span-target {
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .span-target span {
            width: 42%;
        }

    .button-design-tc button {
        margin: 5px 0px;
        border-radius: 100px;
        width: 100%;
        max-width: 100%;
    }

    .bd-highlight {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }

    .custom-ui {
        width: 100% !important;
    }

    .Signin {
        text-align: center;
        margin: 15px 0px;
    }

    .dataTables_paginate.paging_simple_numbers {
        float: none;
        margin-top: 15px;
    }

    .footer-grid {
        grid-column-gap: 0em;
    }
}

@media only screen and (max-width:575px ) {
    .content-main.full-width {
        margin: 0 !important;
    }

    .sidebar.hide-menu {
        z-index: 999999;
    }



    li.serach-menu, li.setting-menu {
        display: none !important;
    }

    .breadcrumbs {
        display: none;
    }

    .bg-grey {
        padding: 20px 0px;
    }

    .custom-header-controls.custom-control ul li:last-child {
        height: auto;
        width: auto;
        order: 1;
    }

    .custom-header-controls.custom-control ul li:first-child {
        height: auto;
        width: auto;
        order: 2;
    }

    .custom-header-controls ul {
        flex-wrap: wrap;
    }

    li.user-dropdown.new-5 {
        display: none;
    }

    header.After-login-header {
        background: #fff;
        padding: 10px 00px;
    }

    #imagePainDiagram {
        width: 100% !important
    }
    /*  add new css 24th sep 2025*/
    header.header-box .menu_flex {
        flex-direction: row;
        align-items: center;
    }

    .topbar_content {
        justify-content: space-between;
        gap: unset;
        padding-right: unset;
    }

    .top_button span {
        font-size: 13px;
    }

    .dropdown .dropdown-toggle {
        font-size: 13px;
    }
}

@media (min-width: 280px) and (max-width: 320px) {
    .custom-nav-tabs ul li.visited .content-nav:before {
        margin-top: -4px;
        font-size: 20px;
    }
}

@media only screen and (min-width:1025px) {
    .topbarWeb {
        display: block;
    }

    .sidebar.mobileView {
        display: None;
    }

    .sidebar.hide-menu {
        display: none;
    }
}

.toggle-menu {
    display: none;
}

.mobileHeader {
    display: flex;
}

@media only screen and (max-width:767px) {
    .topbarWeb .topbarMenu {
        display: None;
    }

    .toggle-menu {
        display: flex;
    }

    .mobileView {
        display: none;
    }

    .sidebar.hide-menu {
        width: 100% !important;
        min-width: 40px;
        transition: 0.5s;
        display: flex;
        flex-direction: column;
        align-items: self-start;
        z-index: 999;
    }

    .responsive-show-hide {
        display: flex;
        position: absolute;
        top: 5px;
        right: 0px;
        background: red;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 100px;
    }

    .mobileHeader {
        display: flex;
        min-width: 100%;
        justify-content: space-between;
    }
}

@media only screen and (min-width:768px) and (max-width:1699px) {
    img[alt="brand-image"] {
        width: 110px;
    }



    .custom-header-controls ul li {
        width: 116px;
    }

    .custom-header-controls ul {
        flex-wrap: wrap;
    }

    .menu-bar {
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .topbarMenu .custom-header-controls.custom-control {
        flex-direction: column;
    }
}