@media screen and (min-width:576px) {
    .quickbooks-container{
        width: 60%;
    }
    .steps-connect-canvas{
        width:70%;
        max-width: unset;
    }
}

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

}

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

}
@media screen and (min-width:992px) {

}
@media screen and (min-width:1200px) {

}



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





}



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

}
@media screen and (max-width:1440px) {
    .dashboard-link-list ul li a {
        font-size: 14px;
        gap: 10px;
        padding: 6px 10px;
        min-height: 44px;
    }
    .tb-table table tr td {
        padding: 8px 10px;
    }
    .db-table-box {
        padding: 20px 20px;
        overflow: hidden;
    }
    .dashboard-sidebar {
        max-width: 270px;
        padding: 35px 20px 30px;
        flex: 0 0 270px;
    }
    .dashboard-content-wrapper {
        width: calc(100% - 270px);
    }
    .db-content-main {
        padding: 30px 30px 26px 30px;
    }
    .db-nav {
        padding-right: 30px;
    }
    .db-nav .navbar .container {
        padding-right: 0;
    }
    .single-order-detail-wrapper {
        padding: 25px 20px 25px 20px;
    }
    .single-order-detail-bx ul {
        grid-template-columns: auto;
    }

    .driver-checkbox-bx input[type="checkbox"] {
        right: 15px;
        top: 14px;
    }
}
/* 20-03-2024 start custom */
@media screen and (min-width:1200px){
    .dashboard-content-wrapper {
        width: calc(100% - 270px);
    }
}
/* 20-03-2024 end custom */

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

    .db-content-main {
        padding: 30px 20px 26px 20px;
    }
    .dashboard-sidebar {
        max-width: 250px;
        padding: 35px 20px 30px;
        flex: 0 0 250px;
    }
    .dashboard-content-wrapper {
        width: calc(100% - 250px);
    }
    .db-all-order-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }
    .single-order-detail-wrapper {
        padding: 25px 20px 25px 20px;
        height: auto;
    }
    .all-order-box {
        height: auto;
        padding: 25px 20px;
    }
    .driver-checkbox-list li {
        font-size: 14px;
    }
    .driver-checkbox-bx {
        padding: 23px 20px 20px;
    }
    .nav-link {
        font-size: 14px;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}
@media screen and (max-width:992px) {
    .calender-view-content {
        grid-template-columns: auto;
        gap: 20px;
    }
    .dashboard-content-wrapper {
        width: 100%;
    }
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: all 0.3s ease;
    }
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: all 0.3s ease;
    }
    .dashboard-sidebar.clicked {
        transform: translateX(0%);
    }
    .db-edit-content-box {
        flex-direction: column;
    }
    .lisence-img {
        width: 100%;
    }
    .button.edit-proile-btn {
        min-width: 95px;
        min-height: 36px;
        font-size: 12px;
        padding: 0;
    }
    .track-om-list ul {
        grid-template-columns: 1fr 1fr;
    }
    .track-om-btn-bx {
        margin-top: -15px;
    }
    .header-login-btn {
        padding-left: 0;
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .complete-order-item-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .complete-order-selected-equipmentname {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .all-order-detail-wrapper .single-order-detail-bx ul {
        grid-template-columns: unset;
    }
    .equi-name-container {
        max-width: unset;
    }

    .map-view-info {
        flex-direction: column;
        gap: 0px;
        align-items: center;
    }
    .map-view-header{
        flex-direction: column;
        gap: 0px;
        align-items: center;
        padding-bottom: 10px;
    }
}
@media (min-width: 576px){
    .order-modal .modal-dialog {
        max-width: 671px;
    }
}


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

    .button {
        min-height: 46px;
        font-size: 14px;
        padding: 7px 18px;
        white-space: nowrap;
    }
    .search-btn {
        min-height: 34px;
        padding: 6px 10px;
    }
    .all-order-heading h2 {
        font-size: 24px;
    }
    .page-login-section .container {
        min-height: unset;
    }
    .login-wrapper {
        height: 100%;
    }
    .sub-main-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .account-setting-header {
        padding: 17px 20px;
    }

    .account-setting-content, .account-setting-footer {
        padding: 25px 20px;
    }
    .as-sslist li a {
        margin-bottom: 18px;
        gap: 6px;
        font-size: 14px;
    }
    .as-edit-wrapper {
        flex-direction: column;
    }
    .as-edit-box, .as-passedit-box {
        padding: 20px 20px 30px;
    }
    .all-order-heading {
        flex-direction: column;
    }
    .right-db-head {
        gap: 9px;
        max-width: 73%;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
    }
    .db-heading-bx {
        gap: 15px;
        flex-direction: column;
        align-items: center;
    }

    .pay-met-btn-bx .button {
        min-width: auto;
        min-height: 39px;
        padding: 5px 23px;
    }
    .payment-type {
        gap: 10px;
    }
    .payment-method-box {
        padding: 24px 20px;
    }
    .payment-type-tab {
        padding: 16px 14px;
        font-size: 14px;
    }
    .navbar-brand {
        max-width: 160px;
    }
    .navbar-nav .nav-link {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .subscription-plan-section {
        padding-bottom: 45px;
    }
    .subscription-plan-wrapper .Page-heading-box {
        margin-bottom: 40px;
    }
    .calender-view-content, .cv-list-main, .cv-list-header, .live-track-box {
        padding: 18px 15px;
    }
    .cv-list-main table td p, .cv-list-main table td  {
        font-size: 14px;
    }
    .cv-tab-head {
        padding: 6px 12px;
        font-size: 12px;
    }
    .live-track-box h5 {
        font-size: 20px;
    }
    .live-track-list li p, .live-track-list li {
        font-size: 14px;
    }
    .calender-view-header {
        padding: 15px 15px;
    }
    .order-table-view {
        flex-direction: column-reverse;
    }
    .as-edit-box, .as-passedit-box, .notify-setting-box-edit, .acc-reset-box {
        max-width: 100%;
    }
    .single-order-detail-bx ul {
        grid-template-columns: auto;
    }
    .single-order-detail-wrapper h5 {
        font-size: 20px;
    }
    .track-order-detail-box {
        padding: 20px 20px;
    }
    .track-order-location {
        padding: 18px 20px;
        font-size: 14px;
    }
    .single-order-detail-bx {
        padding: 25px 20px;
    }
    .single-order-detail-bx ul li {
        grid-template-columns: 0.8fr 1fr;
        font-size: 14px;
    }
    .track-om-list ul {
        grid-template-columns:1fr;
    }
    .fleet-upload {
        grid-template-columns: auto;
        row-gap: 15px;
    }
    .popup-btn-close {
        right: 20px;
        top: 15px;
    }
    .payment-method-section {
        padding-bottom: 45px;
    }
    .track-om-btn-bx {
        margin-top: 0px;
    }
    .DataImportExport {
        position: relative;
        padding-bottom: 20px;
    }
    .exportExampleFile {
        bottom: -5px;
    }
    .customer-button-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .customer-button-container a.button.primary-btn {
        /* width: 250px; */
        width: 320px;

    }
    .supplier-heading h4{
        text-align: unset;
    }

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

    .login-icon-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .login-icon-box.login-middle {
        border-left: 0;
        border-right: 0;
    }
    .login-checkbox-form-group {
        flex-wrap: wrap;
    }
    .login-box h4 {
        margin-bottom: 15px;
    }
    .form-control {
        padding: 10px 16px;
    }
    .login-header.text-center {
        margin-bottom: 20px;
    }
    .login-box .primary-btn {
        margin-top: 10px;
    }
    .two-form-bx {
        flex-direction: column;
    }
    .tab-cal-bx {
        margin-bottom: 15px;
        flex-direction: column-reverse;
        align-items: center;
    }
    .notification-left-content {
        align-items: flex-start;
        gap: 4px;
        flex-direction: column;
    }
    .notifiaction-btn {
        margin-left: 0;
        margin-top: 8px;
    }
    .notification-time {
        font-size: 12px;
    }
    .payment-method-form {
        grid-template-columns: auto;
    }
    .driver-edit-profile-wrapper {
        padding: 25px 15px 30px;
    }
    .profile-edit-name {
        align-items: flex-start;
        gap: 10px;
        flex-direction: column;
    }
    .edit-heading-bx h6 {
        font-size: 18px;
    }
    .order-detail-tab .tab-content, .order-detail-box {
        padding: 10px 10px;
    }
    .order-detail-tab .nav-tabs {
        padding: 10px;
    }
    .order-detail-tab .nav-tabs .nav-link {
        font-size: 18px;
        padding: 8px 9px !important;
        gap: 6px;
    }
    .driver-checkbox-bx {
        padding: 23px 20px 20px;
    }

    .driver-checkbox-bx input[type="checkbox"] {
        right: 14px;
        top: 14px;
    }
    .right-db-head {
        max-width: 100%;
    }
    .cstm-modal .modal-body {
        padding: 38px 20px;
    }
    .upload-with-exp .expire-btn {
        position: relative;
        top: unset;
        transform: unset;
        right: 0;
        margin-bottom: 13px;
    }
    .three-form-bx, .two-form-bx {
        grid-template-columns: auto;
    }
    .poppup-checkbox-parent .formfield{
        flex-direction: column;
    }
    .notification-description{
        margin-left: unset;
    }
}
@media screen and (max-width:480px) {
    .offcanvas {
        /* background: linear-gradient(to right, #122C91, #D4D9F6); */
        background-color: #122C91;
        max-width: 370px;
    }
}

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

}