:root {
    --white-color: #ffffff;
    --white-smoke: #F5F5F5;
    --light-gray: #747474;
    --black-color: #000000;
    --secondary-green-color: #14AA3C;
    --secondary-green-color-20: rgba(20, 170, 60, 0.2);
    --secondary-green-color-30: rgba(20, 170, 60, 0.3);
    --gray-color: #545454;
    --dark-gray: #2F2F2F;
    --business-border: #D9D9D9;
    --pending-color: #F68D2B;
    --tetimonial-title: #C93C4A;
    --reject-color: #E53E3E;
    --primary-brick-red: #C04657;
    --primary-brick-red-30: rgba(192, 70, 87, 0.3);
    --primary-brick-red-20: rgba(192, 70, 87, 0.2);
    --primary-brick-red-10: rgba(192, 70, 87, 0.1);
    --border-color: #DFDFDF;
    --blue-color: #0067F1;
    --shadow-color: #0000001A;
    --box-shadow: 0 0.25rem 0.5rem 0 var(--shadow-color);
    /*? shadow */
    --shadow-03: 0 0.21875rem 0.34375rem 0 rgba(0, 0, 0, 0.02);
    --shadow-02: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.01);
    /*? border radius */
    --border-radius-15: 0.9375rem;
    --border-radius-10: 0.625rem;
    /*? z-index */
    --z-index: 1;
    --z-index-header: 100;
    --z-index-popup: 1000;
    /*? line-height */
    --line-140: 1.4;
    --line-120: 1.2;
    --line-110: 1.1;
    /*? font-weight */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-smedium: 600;
    --font-weight-bold: 700;
    /* ?font-size */
    --root-font-size: 16px;
    --base-text: 1rem;
    --font-style-italic: italic;
    --text-xxl: 0.95rem;
    --text-xl: 0.9rem;
    --text-md: .9rem;
    --text: .9375rem;
    --text-14: 0.875rem;
    --h1: 1.9rem;
    --h2: 1.875rem;
    --h3: 1.5rem;
    --h4: 1.25rem;
    --h5: 1.125rem;
    --h6: .9375rem;
    /* ?font-family */
    --font-inter: "Inter", sans-serif;
    --font-Montserrat: "Montserrat", sans-serif;
    --font-NunitoSans: "Nunito Sans", sans-serif;
    --font-LibreBaskerville: "Libre Baskerville", serif;
    /* height & spacing */
    --header-height: 5.625rem;
    --section-padding: 5rem;
    --heading-bottom: 3.75rem;
}
.step-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.875rem;
    /* 30px */
    position: relative;
}

.step-progress::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    /* 20px */
    left: 0;
    right: 0;
    height: 0.125rem;
    /* 2px */
    background: #dee2e6;
    z-index: 1;
}

.step {
    text-align: center;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    background: #fff;
    border: 0.125rem solid #dee2e6;
    /* 2px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.625rem;
    /* 10px */
    font-weight: bold;
    transition: all 0.3s ease;
}

.step.active .step-circle {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.step.completed .step-circle {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.step-label {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    color: #6c757d;
}

.step.active .step-label {
    color: #007bff;
}

.step.completed .step-label {
    color: #28a745;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.quote-box {
    background: #f8f9fa;
    border-radius: 0.625rem;
    /* 10px */
    padding: 1.25rem;
    /* 20px */
    height: 100%;
}

.api-response {
    background: white;
    border-radius: 0.5rem;
    /* 8px */
    padding: 0.9375rem;
    /* 15px */
    margin-top: 1.25rem;
    /* 20px */
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1);
    /* 0 2px 4px */
}

/*
.form-section {
    background: white;
    border-radius: 0.625rem;
    padding: 1.875rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    margin-bottom: 1.25rem;
}

.btn-action {
    min-width: 7.5rem;
}
.selection .select2-selection--multiple {
    border: 0;
    border-radius: 0;
    border-bottom: solid #444 0.0625rem;
}
/* table design start */
.table-head-wp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-search {
    position: relative;
    max-width: 25rem;
    flex: 1 1 18.75rem;
    /* 300px */
    width: 100%;
}

.table-search span {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-gray);
    font-size: 1.35rem;
    pointer-events: none;
}

.table-search span svg {
    width: 1.438rem;
    height: auto;
}

.table-search input {
    width: 100%;
    color: var(--light-gray);
    padding-left: 3rem;
    border-radius: 0.5rem;
    background: var(--white-smoke);
    border: 0.0625rem solid var(--border-color);
    height: 3.125rem;
    font-size: 1.15rem;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    outline: 0;
}

.table-search input::placeholder {
    color: var(--light-gray);
}

.table-btns {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.table-btns button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    height: 2.5rem;
    border-radius: 5.625rem;
    padding: 0 1.5rem;
    font-size: 1rem;
}

/* Button Styles */
.table-btns button.all-btn {
    background: transparent;
    border: 0.0625rem solid #504949;
    color: #504949;
}

.table-btns button.all-btn.active-btn {
    background: #504949;
    color: #fff;
}

.table-btns button.pending-btn {
    color: #ff9800;
    border: 0.0625rem solid #ff9800;
    background: transparent;
}

.table-btns button.pending-btn.active-btn {
    background: #ff9800;
    color: #fff;
}

.table-btns button.cancel-btn {
    color: var(--reject-color);
    border: 0.0625rem solid var(--reject-color);
    background: transparent;
}

.table-btns button.cancel-btn.active-btn {
    background: var(--reject-color);
    color: #fff;
}

.table-btns button.approve-btn {
    color: var(--blue-color);
    border: 0.0625rem solid var(--blue-color);
    background: transparent;
}

.table-btns button.approve-btn.active-btn {
    background: var(--blue-color);
    color: #fff;
}

.table-btns button.confirm-btn {
    color: var(--secondary-green-color);
    border: 0.0625rem solid var(--secondary-green-color);
    background: transparent;
}
.table-btns button.ark__table--active-btn {
    color: var(--blue-color);
    border: 0.0625rem solid var(--blue-color);
    background: transparent;
}
.table-btns button.ark__table--active-btn.active-btn {
    color: var(--white-color);
    border: 0.0625rem solid var(--blue-color);
    background: var(--blue-color);
}

.table-btns button.confirm-btn.active-btn {
    background: var(--secondary-green-color);
    color: #fff;
}

.common-table .small,
.common-table small {
    font-size: 1rem;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .table-head-wp {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .table-search {
        margin-inline: auto;
        margin-bottom: 0.7rem;
        flex: auto;
    }

    .table-btns {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .table-head-wp {
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }

    .table-search input {
        font-size: 1rem;
        height: 2.5rem;
    }

    .table-btns button {
        font-size: 0.95rem;
        min-width: 5rem;
        height: 2rem;
        padding: 0 0.5rem;
    }

    .table-btns {
        gap: 0.3rem;
    }
}

.blue-btn {
    border-radius: 3.438rem;
    padding-block: 0.48rem;
    white-space: nowrap;
    background-color: var(--blue-color);
    color: #fff;
}

.green,
.red,
.blue {
    padding: 0;
    color: var(--secondary-green-color);
    font-size: 1rem;
}

.red {
    color: var(--reject-color);
}

.blue {
    color: var(--blue-color);
}

.blue-btn:hover,
.blue-btn.btn:active {
    background-color: #0c64d8;
    color: #fff;
}

#bookingsTable .blue-btn {
    width: 100%;
}

.blue-btn.red-btn {
    background-color: var(--primary-brick-red);
    margin-top: 0.3rem;
}

.blue-btn.red-btn:hover,
.blue-btn.red-btn:active {
    background-color: #d34e60;
}

.common-table div.dt-container .dt-input {
    background-color: #f5f5f5 !important;
    border: 0.0625rem solid #dfdfdf !important;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    outline: 0;
}

.common-table .dt-search label,
.common-table .dt-length label {
    color: #747474;
}

.common-table .dt-length label {
    margin-left: 0.6rem;
}

.order-track {
    color: var(--blue-color);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    font-size: 1rem;
    border: 0;
    background: none;
    font-weight: 500;
}

.page-number-show {
    font-size: 1rem;
    color: #545454;
}

.custom-page-wp {
    max-width: max-content;
    width: 100%;
}

.custom-pagination {
    background: #fff;
    border: 0.0625rem solid #c04657;
    border-radius: 2rem;
    padding: 0.4rem 1.1rem;
    gap: 2.5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 0.0625rem 0.5rem 0 #c0465722;
    width: 100%;
}

.previous-page-link {
    border-radius: 1.25rem;
    height: 2.5rem;
    min-width: 7.813rem;
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid #c0465733;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    border-radius: 2.5rem !important;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.custom-page-link {
    background: transparent;
    color: #000;
    border: none;
    border-radius: 0.7rem;
    min-width: 2rem;
}

.custom-page-link.active-link {
    background: #c04657;
    color: #fff;
    border-radius: 0.7rem;
    min-width: 2rem;
    border: 0.0625rem solid #c04657;
    box-shadow: 0 0.125rem 0.4375rem 0 #c0465722;
    font-weight: 500;
    margin: 0 0.2rem;
    border-radius: 0.625rem !important;
}

.page-item .page-link span svg {
    width: 1.063rem;
    height: auto;
}

.page-item.disabled .page-link {
    background: none;
    border: 0;
}

.next-page-link {
    border-radius: 1.25rem;
    height: 2.5rem;
    min-width: 7.813rem;
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid #c0465733;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    border-radius: 2.5rem !important;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.page-num-wp {
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Responsive adjustments */
@media screen and (max-width: 1199px) {
    .common-table {
        padding: 1rem;
    }

    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.85rem;
    }

    .common-table table > thead > tr > th,
    .common-table table > thead > tr > td,
    .common-table table > tbody > tr > th,
    .common-table table > tbody > tr > td {
        padding-block: 0.875rem;
        padding-inline: 0.5rem;
    }

    .common-table span.badge {
        --bs-badge-padding-y: 0.65em;
        font-size: 0.75rem;
    }

    .blue-btn {
        font-size: 0.75rem;
        padding-inline: 1rem;
        gap: 0.2rem;
    }
}

@media screen and (max-width: 991px) {
    .common-table .table {
        min-width: 43.75rem;
        /* 700px */
    }

    .custom-pagination {
        gap: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .common-table {
        padding: 0.75rem;
    }

    .common-table .dt-length {
        margin: 0 0 1.25rem !important;
    }

    .common-table div.dt-layout-row {
        flex-direction: column;
        gap: 1rem;
    }

    .common-table .dt-search,
    .common-table .dt-length {
        width: 100%;
    }

    .common-table .table {
        min-width: 37.5rem;
        /* 600px */
    }

    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.8rem;
    }

    .blue-btn {
        font-size: 0.7rem;
        padding-inline: 0.75rem;
        padding-block: 0.4rem;
    }

    .blue-btn i {
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 575px) {
    .common-table {
        padding: 0.5rem;
        margin-inline: -0.5rem;
    }

    .common-table .table {
        min-width: 34.375rem;
        /* 550px */
    }

    .common-table table.dataTable > thead > tr > th,
    .common-table table.dataTable > thead > tr > td,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        padding-block: 0.75rem;
        padding-inline: 0.4rem;
    }

    .common-table span.dt-column-title {
        font-size: 0.75rem;
    }

    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.75rem;
    }

    .blue-btn {
        font-size: 0.65rem;
        padding-inline: 0.6rem;
        padding-block: 0.35rem;
    }
}

/* Responsive pagination for 475px to 320px */
@media screen and (max-width: 475px) {
    .custom-pagination {
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .previous-page-link,
    .next-page-link {
        min-width: 5.5rem;
        height: 2.3rem;
        font-size: 0.75rem;
        padding: 0 0.4rem;
        gap: 0.3rem;
    }

    .previous-page-link span svg,
    .next-page-link span svg {
        width: 0.8rem;
    }

    .custom-page-link {
        min-width: 1.7rem;
        font-size: 0.75rem;
        padding: 0.2rem;
    }

    .custom-page-link.active-link {
        min-width: 2rem;
        font-size: 0.75rem;
    }

    .page-item.disabled .page-link {
        font-size: 0.8rem;
    }

    /* Ensure sections align properly */
    .custom-pagination > span {
        display: flex;
        gap: 0.3rem;
        align-items: center;
    }
}

/* Extra small devices >=320px and <375px */
@media screen and (max-width: 360px) {
    .previous-page-link,
    .next-page-link {
        min-width: 4.5rem;
        font-size: 0.7rem;
    }

    .custom-page-link {
        min-width: 1.5rem;
        font-size: 0.7rem;
    }
}

/* table design End */

/* View Rates Popup Start */

.modal-dialog.modal-lg.modal-dialog-scrollable {
    --bs-modal-width: 100%;
    max-width: 100% !important;
}

.carrier-card {
    text-align: center;
    border: 0.0625rem solid #dfdfdf !important;
    border-radius: 0.375rem;
    padding: 1.25rem;
}

.carrier-card.active-card {
    border-color: #c04657 !important;
}

.carrier-card .form-check .form-check-input {
    float: none;
    margin-top: 0.12rem;
}

.modal-header .btn-close {
    border: 0.0625rem solid #545454;
    filter: unset;
    padding: 0.32rem;
}

.modal-title {
    font-size: 1.125rem;
}

.form-check-input {
    border-color: #c04657;
}

.form-check-input:checked {
    background-color: #c04657;
    border-color: #c04657;
}

.form-check .form-check-label {
    color: #333333;
}

.carrier-details small,
.price-breakdown small {
    color: #545454 !important;
}

.carrier-details small strong,
.main-total strong {
    color: #000 !important;
}

.carrier-badges span.badge {
    white-space: inherit;
}

.carrier-badges span.badge.bg-info {
    background-color: #c04657 !important;
}

.carrier-badges span.badge.bg-warning {
    background-color: var(--blue-color) !important;
}

@media screen and (max-width: 1199px) {
    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.85rem;
    }

    .common-table span.badge {
        --bs-badge-padding-y: 0.65em;
    }

    .blue-btn {
        font-size: 0.75rem;
        padding-inline: 1rem;
        gap: 0.2rem;
    }
}

@media screen and (max-width: 767px) {
    .common-table .dt-length {
        margin: 0 0 1.25rem !important;
    }
}

.profile-card .modal-content {
    background-color: var(--white-smoke);
}

.personal-info,
.password-wp {
    padding: 1.25rem 1.25rem 0.5rem;
    background-color: var(--white-color);
    border: 1px solid var(--Border-color, #dfdfdf);
    box-shadow: 0px 3.5px 5.5px 0px #00000005;
    border-radius: 0.5rem;
}

.personal-info {
    margin-bottom: 2.5rem;
}

.cover-photo {
    height: auto;
    background: unset;
    position: relative;
    border-radius: 1rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    border: 0.3rem solid var(--white-color);
    position: unset;
    bottom: -3.375rem;
    left: 50%;
    transform: unset;
    object-fit: cover;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.2);
}

.profile-page {
    text-align: left;
    margin-top: 2.5rem;
}

.pass-change {
    color: var(--primary-brick-red);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.name {
    color: var(--primary-brick-red);
}

.notification .options-container {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.notification .option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.notification.form-group input {
    -webkit-appearance: auto !important;
}

.notification.form-group input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-brick-red);
}

@media (max-width: 575px) {
    .form-gp-wp {
        flex-direction: column;
        gap: 0;
    }

    .personal-info,
    .password-wp {
        padding: 1.25rem;
    }

    .personal-info .form-gp-wp:not(:first-child) {
        margin-top: 1.25rem;
    }
}

#map {
    height: 520px;
    width: 100%;
    margin-top: 10px;
}

.controls {
    max-width: 900px;
    margin: 10px 0;
}

.label-box {
    background: white;
    padding: 6px 10px;
    border: 2px solid rgb(143, 143, 143);
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}
.step-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.875rem;
    /* 30px */
    position: relative;
}

.step-progress::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    /* 20px */
    left: 0;
    right: 0;
    height: 0.125rem;
    /* 2px */
    background: #dee2e6;
    z-index: 1;
}

.step {
    text-align: center;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    background: #fff;
    border: 0.125rem solid #dee2e6;
    /* 2px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.625rem;
    /* 10px */
    font-weight: bold;
    transition: all 0.3s ease;
}

.step.active .step-circle {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.step.completed .step-circle {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.step-label {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    color: #6c757d;
}

.step.active .step-label {
    color: #007bff;
}

.step.completed .step-label {
    color: #28a745;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.quote-box {
    background: #f8f9fa;
    border-radius: 0.625rem;
    /* 10px */
    padding: 1.25rem;
    /* 20px */
    height: 100%;
}

.api-response {
    background: white;
    border-radius: 0.5rem;
    /* 8px */
    padding: 0.9375rem;
    /* 15px */
    margin-top: 1.25rem;
    /* 20px */
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1);
    /* 0 2px 4px */
}

/*
.form-section {
    background: white;
    border-radius: 0.625rem;
    padding: 1.875rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    margin-bottom: 1.25rem;
}

.btn-action {
    min-width: 7.5rem;
}
.selection .select2-selection--multiple {
    border: 0;
    border-radius: 0;
    border-bottom: solid #444 0.0625rem;
}
/* table design start */
.table-head-wp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-search {
    position: relative;
    max-width: 25rem;
    flex: 1 1 18.75rem;
    /* 300px */
    width: 100%;
}

.table-search span {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-gray);
    font-size: 1.35rem;
    pointer-events: none;
}

.table-search span svg {
    width: 1.438rem;
    height: auto;
}

.table-search input {
    width: 100%;
    color: var(--light-gray);
    padding-left: 3rem;
    border-radius: 0.5rem;
    background: var(--white-smoke);
    border: 0.0625rem solid var(--border-color);
    height: 3.125rem;
    font-size: 1.15rem;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    outline: 0;
}

.table-search input::placeholder {
    color: var(--light-gray);
}

.table-btns {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.table-btns button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    height: 2.5rem;
    border-radius: 5.625rem;
    padding: 0 1.5rem;
    font-size: 1rem;
}

/* Button Styles */
.table-btns button.all-btn {
    background: transparent;
    border: 0.0625rem solid #504949;
    color: #504949;
}

.table-btns button.all-btn.active-btn {
    background: #504949;
    color: #fff;
}

.table-btns button.pending-btn {
    color: #ff9800;
    border: 0.0625rem solid #ff9800;
    background: transparent;
}

.table-btns button.pending-btn.active-btn {
    background: #ff9800;
    color: #fff;
}

.table-btns button.cancel-btn {
    color: var(--reject-color);
    border: 0.0625rem solid var(--reject-color);
    background: transparent;
}

.table-btns button.cancel-btn.active-btn {
    background: var(--reject-color);
    color: #fff;
}

.table-btns button.approve-btn {
    color: var(--blue-color);
    border: 0.0625rem solid var(--blue-color);
    background: transparent;
}

.table-btns button.approve-btn.active-btn {
    background: var(--blue-color);
    color: #fff;
}

.table-btns button.confirm-btn {
    color: var(--secondary-green-color);
    border: 0.0625rem solid var(--secondary-green-color);
    background: transparent;
}
.table-btns button.ark__table--active-btn {
    color: var(--blue-color);
    border: 0.0625rem solid var(--blue-color);
    background: transparent;
}
.table-btns button.ark__table--active-btn.active-btn {
    color: var(--white-color);
    border: 0.0625rem solid var(--blue-color);
    background: var(--blue-color);
}

.table-btns button.confirm-btn.active-btn {
    background: var(--secondary-green-color);
    color: #fff;
}

.common-table .small,
.common-table small {
    font-size: 1rem;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .table-head-wp {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .table-search {
        margin-inline: auto;
        margin-bottom: 0.7rem;
        flex: auto;
    }

    .table-btns {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .table-head-wp {
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }

    .table-search input {
        font-size: 1rem;
        height: 2.5rem;
    }

    .table-btns button {
        font-size: 0.95rem;
        min-width: 5rem;
        height: 2rem;
        padding: 0 0.5rem;
    }

    .table-btns {
        gap: 0.3rem;
    }
}

.common-table div.dt-container div.dt-layout-row:not(:last-child) {
    margin: 0 0 1.25rem !important;
}

.common-table .table {
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    /* 2px 5px */
    border-radius: 0.375rem;
    min-width: 50rem;
    /* 800px */
}

.common-table .table > thead th:first-child {
    border-top-left-radius: 0.375rem;
}

.common-table .table > thead th:last-child {
    border-top-right-radius: 0.375rem;
}

.dt-container table.dataTable,
table.dataTable {
    border-collapse: collapse !important;
}

.common-table table.dataTable > tbody > tr:not(:last-child) {
    border-bottom: 0.0625rem solid #c0465733;
}

.common-table table > thead > tr > th,
.common-table table > thead > tr > td,
.common-table div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border: 0;
}

.common-table span.dt-column-title {
    font-weight: 600;
    font-size: 1rem;
}

.common-table table > thead > tr > th,
.common-table table > thead > tr > td,
.common-table table > tbody > tr > th,
.common-table table > tbody > tr > td {
    font-size: 1rem;
    padding-block: 1.188rem;
    padding-inline: 0.75rem;
}

.common-table table > tbody,
.common-table table > tbody {
    border: 0.0625rem solid #c0465733;
}

.common-table table > tbody > tr > th,
.common-table table > tbody > tr > td {
    font-weight: 500;
    color: #000;
}

.blue-btn {
    border-radius: 3.438rem;
    padding-block: 0.48rem;
    white-space: nowrap;
    background-color: var(--blue-color);
    color: #fff;
}

.green,
.red,
.blue {
    padding: 0;
    color: var(--secondary-green-color);
    font-size: 1rem;
}

.red {
    color: var(--reject-color);
}

.blue {
    color: var(--blue-color);
}

.blue-btn:hover,
.blue-btn.btn:active {
    background-color: #0c64d8;
    color: #fff;
}

#bookingsTable .blue-btn {
    width: 100%;
}

.blue-btn.red-btn {
    background-color: var(--primary-brick-red);
    margin-top: 0.3rem;
}

.blue-btn.red-btn:hover,
.blue-btn.red-btn:active {
    background-color: #d34e60;
}

.common-table div.dt-container .dt-input {
    background-color: #f5f5f5 !important;
    border: 0.0625rem solid #dfdfdf !important;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    outline: 0;
}

.common-table .dt-search label,
.common-table .dt-length label {
    color: #747474;
}

.common-table .dt-length label {
    margin-left: 0.6rem;
}

.order-track {
    color: var(--blue-color);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    font-size: 1rem;
    border: 0;
    background: none;
    font-weight: 500;
}

.page-number-show {
    font-size: 1rem;
    color: #545454;
}

.custom-page-wp {
    max-width: max-content;
    width: 100%;
}

.custom-pagination {
    background: #fff;
    border: 0.0625rem solid #c04657;
    border-radius: 2rem;
    padding: 0.4rem 1.1rem;
    gap: 2.5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 0.0625rem 0.5rem 0 #c0465722;
    width: 100%;
}

.previous-page-link {
    border-radius: 1.25rem;
    height: 2.5rem;
    min-width: 7.813rem;
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid #c0465733;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    border-radius: 2.5rem !important;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.custom-page-link {
    background: transparent;
    color: #000;
    border: none;
    border-radius: 0.7rem;
    min-width: 2rem;
}

.custom-page-link.active-link {
    background: #c04657;
    color: #fff;
    border-radius: 0.7rem;
    min-width: 2rem;
    border: 0.0625rem solid #c04657;
    box-shadow: 0 0.125rem 0.4375rem 0 #c0465722;
    font-weight: 500;
    margin: 0 0.2rem;
    border-radius: 0.625rem !important;
}

.page-item .page-link span svg {
    width: 1.063rem;
    height: auto;
}

.page-item.disabled .page-link {
    background: none;
    border: 0;
}

.next-page-link {
    border-radius: 1.25rem;
    height: 2.5rem;
    min-width: 7.813rem;
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid #c0465733;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    border-radius: 2.5rem !important;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.page-num-wp {
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Responsive adjustments */
@media screen and (max-width: 1199px) {
    .common-table {
        padding: 1rem;
    }

    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.85rem;
    }

    .common-table table > thead > tr > th,
    .common-table table > thead > tr > td,
    .common-table table > tbody > tr > th,
    .common-table table > tbody > tr > td {
        padding-block: 0.875rem;
        padding-inline: 0.5rem;
    }

    .common-table span.badge {
        --bs-badge-padding-y: 0.65em;
        font-size: 0.75rem;
    }

    .blue-btn {
        font-size: 0.75rem;
        padding-inline: 1rem;
        gap: 0.2rem;
    }
}

@media screen and (max-width: 991px) {
    .common-table .table {
        min-width: 43.75rem;
        /* 700px */
    }

    .custom-pagination {
        gap: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .common-table {
        padding: 0.75rem;
    }

    .common-table .dt-length {
        margin: 0 0 1.25rem !important;
    }

    .common-table div.dt-layout-row {
        flex-direction: column;
        gap: 1rem;
    }

    .common-table .dt-search,
    .common-table .dt-length {
        width: 100%;
    }

    .common-table .table {
        min-width: 37.5rem;
        /* 600px */
    }

    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.8rem;
    }

    .blue-btn {
        font-size: 0.7rem;
        padding-inline: 0.75rem;
        padding-block: 0.4rem;
    }

    .blue-btn i {
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 575px) {
    .common-table {
        padding: 0.5rem;
        margin-inline: -0.5rem;
    }

    .common-table .table {
        min-width: 34.375rem;
        /* 550px */
    }

    .common-table table.dataTable > thead > tr > th,
    .common-table table.dataTable > thead > tr > td,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        padding-block: 0.75rem;
        padding-inline: 0.4rem;
    }

    .common-table span.dt-column-title {
        font-size: 0.75rem;
    }

    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.75rem;
    }

    .blue-btn {
        font-size: 0.65rem;
        padding-inline: 0.6rem;
        padding-block: 0.35rem;
    }
}

/* Responsive pagination for 475px to 320px */
@media screen and (max-width: 475px) {
    .custom-pagination {
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .previous-page-link,
    .next-page-link {
        min-width: 5.5rem;
        height: 2.3rem;
        font-size: 0.75rem;
        padding: 0 0.4rem;
        gap: 0.3rem;
    }

    .previous-page-link span svg,
    .next-page-link span svg {
        width: 0.8rem;
    }

    .custom-page-link {
        min-width: 1.7rem;
        font-size: 0.75rem;
        padding: 0.2rem;
    }

    .custom-page-link.active-link {
        min-width: 2rem;
        font-size: 0.75rem;
    }

    .page-item.disabled .page-link {
        font-size: 0.8rem;
    }

    /* Ensure sections align properly */
    .custom-pagination > span {
        display: flex;
        gap: 0.3rem;
        align-items: center;
    }
}

/* Extra small devices >=320px and <375px */
@media screen and (max-width: 360px) {
    .previous-page-link,
    .next-page-link {
        min-width: 4.5rem;
        font-size: 0.7rem;
    }

    .custom-page-link {
        min-width: 1.5rem;
        font-size: 0.7rem;
    }
}

/* table design End */

/* View Rates Popup Start */

.modal-dialog.modal-lg.modal-dialog-scrollable {
    --bs-modal-width: 100%;
    max-width: 100% !important;
}

.carrier-card {
    text-align: center;
    border: 0.0625rem solid #dfdfdf !important;
    border-radius: 0.375rem;
    padding: 1.25rem;
}

.carrier-card.active-card {
    border-color: #c04657 !important;
}

.carrier-card .form-check .form-check-input {
    float: none;
    margin-top: 0.12rem;
}

.modal-header .btn-close {
    border: 0.0625rem solid #545454;
    filter: unset;
    padding: 0.32rem;
}

.modal-title {
    font-size: 1.125rem;
}

.form-check-input {
    border-color: #c04657;
}

.form-check-input:checked {
    background-color: #c04657;
    border-color: #c04657;
}

.form-check .form-check-label {
    color: #333333;
}

.carrier-details small,
.price-breakdown small {
    color: #545454 !important;
}

.carrier-details small strong,
.main-total strong {
    color: #000 !important;
}

.carrier-badges span.badge {
    white-space: inherit;
}

.carrier-badges span.badge.bg-info {
    background-color: #c04657 !important;
}

.carrier-badges span.badge.bg-warning {
    background-color: var(--blue-color) !important;
}

@media screen and (max-width: 1199px) {
    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.85rem;
    }

    .common-table span.badge {
        --bs-badge-padding-y: 0.65em;
    }

    .blue-btn {
        font-size: 0.75rem;
        padding-inline: 1rem;
        gap: 0.2rem;
    }
}

@media screen and (max-width: 767px) {
    .common-table .dt-length {
        margin: 0 0 1.25rem !important;
    }
}

.profile-card .modal-content {
    background-color: var(--white-smoke);
}

.personal-info,
.password-wp {
    padding: 1.25rem 1.25rem 0.5rem;
    background-color: var(--white-color);
    border: 1px solid var(--Border-color, #dfdfdf);
    box-shadow: 0px 3.5px 5.5px 0px #00000005;
    border-radius: 0.5rem;
}

.personal-info {
    margin-bottom: 2.5rem;
}

.cover-photo {
    height: auto;
    background: unset;
    position: relative;
    border-radius: 1rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    border: 0.3rem solid var(--white-color);
    position: unset;
    bottom: -3.375rem;
    left: 50%;
    transform: unset;
    object-fit: cover;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.2);
}

.profile-page {
    text-align: left;
    margin-top: 2.5rem;
}

.pass-change {
    color: var(--primary-brick-red);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.name {
    color: var(--primary-brick-red);
}

.notification .options-container {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.notification .option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.notification.form-group input {
    -webkit-appearance: auto !important;
}

.notification.form-group input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-brick-red);
}

@media (max-width: 575px) {
    .form-gp-wp {
        flex-direction: column;
        gap: 0;
    }

    .personal-info,
    .password-wp {
        padding: 1.25rem;
    }

    .personal-info .form-gp-wp:not(:first-child) {
        margin-top: 1.25rem;
    }
}

#map {
    height: 520px;
    width: 100%;
    margin-top: 10px;
}

.controls {
    max-width: 900px;
    margin: 10px 0;
}

.label-box {
    background: white;
    padding: 6px 10px;
    border: 2px solid rgb(143, 143, 143);
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}
.step-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.875rem;
    /* 30px */
    position: relative;
}

.step-progress::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    /* 20px */
    left: 0;
    right: 0;
    height: 0.125rem;
    /* 2px */
    background: #dee2e6;
    z-index: 1;
}

.step {
    text-align: center;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    background: #fff;
    border: 0.125rem solid #dee2e6;
    /* 2px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.625rem;
    /* 10px */
    font-weight: bold;
    transition: all 0.3s ease;
}

.step.active .step-circle {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.step.completed .step-circle {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.step-label {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    color: #6c757d;
}

.step.active .step-label {
    color: #007bff;
}

.step.completed .step-label {
    color: #28a745;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.quote-box {
    background: #f8f9fa;
    border-radius: 0.625rem;
    /* 10px */
    padding: 1.25rem;
    /* 20px */
    height: 100%;
}

.api-response {
    background: white;
    border-radius: 0.5rem;
    /* 8px */
    padding: 0.9375rem;
    /* 15px */
    margin-top: 1.25rem;
    /* 20px */
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.1);
    /* 0 2px 4px */
}

/*
.form-section {
    background: white;
    border-radius: 0.625rem;
    padding: 1.875rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    margin-bottom: 1.25rem;
}

.btn-action {
    min-width: 7.5rem;
}
.selection .select2-selection--multiple {
    border: 0;
    border-radius: 0;
    border-bottom: solid #444 0.0625rem;
}
/* table design start */
.table-head-wp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-search {
    position: relative;
    max-width: 25rem;
    flex: 1 1 18.75rem;
    /* 300px */
    width: 100%;
}

.table-search span {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-gray);
    font-size: 1.35rem;
    pointer-events: none;
}

.table-search span svg {
    width: 1.438rem;
    height: auto;
}

.table-search input {
    width: 100%;
    color: var(--light-gray);
    padding-left: 3rem;
    border-radius: 0.5rem;
    background: var(--white-smoke);
    border: 0.0625rem solid var(--border-color);
    height: 3.125rem;
    font-size: 1.15rem;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    outline: 0;
}

.table-search input::placeholder {
    color: var(--light-gray);
}

.table-btns {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.table-btns button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    height: 2.5rem;
    border-radius: 5.625rem;
    padding: 0 1.5rem;
    font-size: 1rem;
}

/* Button Styles */
.table-btns button.all-btn {
    background: transparent;
    border: 0.0625rem solid #504949;
    color: #504949;
}

.table-btns button.all-btn.active-btn {
    background: #504949;
    color: #fff;
}

.table-btns button.pending-btn {
    color: #ff9800;
    border: 0.0625rem solid #ff9800;
    background: transparent;
}

.table-btns button.pending-btn.active-btn {
    background: #ff9800;
    color: #fff;
}

.table-btns button.cancel-btn {
    color: var(--reject-color);
    border: 0.0625rem solid var(--reject-color);
    background: transparent;
}

.table-btns button.cancel-btn.active-btn {
    background: var(--reject-color);
    color: #fff;
}

.table-btns button.approve-btn {
    color: var(--blue-color);
    border: 0.0625rem solid var(--blue-color);
    background: transparent;
}

.table-btns button.approve-btn.active-btn {
    background: var(--blue-color);
    color: #fff;
}

.table-btns button.confirm-btn {
    color: var(--secondary-green-color);
    border: 0.0625rem solid var(--secondary-green-color);
    background: transparent;
}
.table-btns button.ark__table--active-btn {
    color: var(--blue-color);
    border: 0.0625rem solid var(--blue-color);
    background: transparent;
}
.table-btns button.ark__table--active-btn.active-btn {
    color: var(--white-color);
    border: 0.0625rem solid var(--blue-color);
    background: var(--blue-color);
}
.badge-bg-pending {
    padding: 0;
    color: var(--pending-color);
    font-size: 1rem;
}

.badge-bg-active {
    padding: 0;
    font-size: 1rem;
    color: #0067f1;
}

.badge-bg-confirmed {
    padding: 0;
    font-size: 1rem;
    color: #14AA3C;
}

.badge-bg-completed {
    padding: 0;
    font-size: 1rem;
    color: #E53E3E;
}
.table-btns button.confirm-btn.active-btn {
    background: var(--secondary-green-color);
    color: #fff;
}

.common-table .small,
.common-table small {
    font-size: 1rem;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .table-head-wp {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .table-search {
        margin-inline: auto;
        margin-bottom: 0.7rem;
        flex: auto;
    }

    .table-btns {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .table-head-wp {
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }

    .table-search input {
        font-size: 1rem;
        height: 2.5rem;
    }

    .table-btns button {
        font-size: 0.95rem;
        min-width: 5rem;
        height: 2rem;
        padding: 0 0.5rem;
    }

    .table-btns {
        gap: 0.3rem;
    }
}

.common-table {
    box-shadow: 0px 0.21875rem 0.34375rem 0px #00000005;
    /* 3.5px 5.5px */
    padding: 1.25rem;
    border: 0;
    border-radius: 0.938rem;
    overflow-x: auto;
}

.common-table div.dt-container div.dt-layout-row:not(:last-child) {
    margin: 0 0 1.25rem !important;
}

.common-table .table {
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    /* 2px 5px */
    border-radius: 0.375rem;
    min-width: 50rem;
    /* 800px */
}

.common-table .table > thead th:first-child {
    border-top-left-radius: 0.375rem;
}

.common-table .table > thead th:last-child {
    border-top-right-radius: 0.375rem;
}

.common-table .table th {
    font-size: 1rem;
    background-color: #c04657;
    color: #fff;
    white-space: nowrap;
    font-weight: 600;
}

.dt-container table.dataTable,
table.dataTable {
    border-collapse: collapse !important;
}

.common-table table.dataTable > tbody > tr:not(:last-child) {
    border-bottom: 0.0625rem solid #c0465733;
}

.common-table table > thead > tr > th,
.common-table table > thead > tr > td,
.common-table div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border: 0;
}

.common-table span.dt-column-title {
    font-weight: 600;
    font-size: 1rem;
}

.common-table table > thead > tr > th,
.common-table table > thead > tr > td,
.common-table table > tbody > tr > th,
.common-table table > tbody > tr > td {
    font-size: 1rem;
    padding-block: 1.188rem;
    padding-inline: 0.75rem;
}

.common-table table > tbody,
.common-table table > tbody {
    border: 0.0625rem solid #c0465733;
}

.common-table table > tbody > tr > th,
.common-table table > tbody > tr > td {
    font-weight: 500;
    color: #000;
}

.blue-btn {
    border-radius: 3.438rem;
    padding-block: 0.48rem;
    white-space: nowrap;
    background-color: var(--blue-color);
    color: #fff;
}

.green,
.red,
.blue {
    padding: 0;
    color: var(--secondary-green-color);
    font-size: 1rem;
}

.red {
    color: var(--reject-color);
}

.blue {
    color: var(--blue-color);
}

.blue-btn:hover,
.blue-btn.btn:active {
    background-color: #0c64d8;
    color: #fff;
}

#bookingsTable .blue-btn {
    width: 100%;
}

.blue-btn.red-btn {
    background-color: var(--primary-brick-red);
    margin-top: 0.3rem;
}

.blue-btn.red-btn:hover,
.blue-btn.red-btn:active {
    background-color: #d34e60;
}

.common-table div.dt-container .dt-input {
    background-color: #f5f5f5 !important;
    border: 0.0625rem solid #dfdfdf !important;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    outline: 0;
}

.common-table .dt-search label,
.common-table .dt-length label {
    color: #747474;
}

.common-table .dt-length label {
    margin-left: 0.6rem;
}

.order-track {
    color: var(--blue-color);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    font-size: 1rem;
    border: 0;
    background: none;
    font-weight: 500;
}

.page-number-show {
    font-size: 1rem;
    color: #545454;
}

.custom-page-wp {
    max-width: max-content;
    width: 100%;
}

.custom-pagination {
    background: #fff;
    border: 0.0625rem solid #c04657;
    border-radius: 2rem;
    padding: 0.4rem 1.1rem;
    gap: 2.5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 0.0625rem 0.5rem 0 #c0465722;
    width: 100%;
}

.previous-page-link {
    border-radius: 1.25rem;
    height: 2.5rem;
    min-width: 7.813rem;
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid #c0465733;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    border-radius: 2.5rem !important;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.custom-page-link {
    background: transparent;
    color: #000;
    border: none;
    border-radius: 0.7rem;
    min-width: 2rem;
}

.custom-page-link.active-link {
    background: #c04657;
    color: #fff;
    border-radius: 0.7rem;
    min-width: 2rem;
    border: 0.0625rem solid #c04657;
    box-shadow: 0 0.125rem 0.4375rem 0 #c0465722;
    font-weight: 500;
    margin: 0 0.2rem;
    border-radius: 0.625rem !important;
}

.page-item .page-link span svg {
    width: 1.063rem;
    height: auto;
}

.page-item.disabled .page-link {
    background: none;
    border: 0;
}

.next-page-link {
    border-radius: 1.25rem;
    height: 2.5rem;
    min-width: 7.813rem;
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid #c0465733;
    box-shadow: 0px 0.125rem 0.3125rem 0px #0000001a;
    border-radius: 2.5rem !important;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.page-num-wp {
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Responsive adjustments */
@media screen and (max-width: 1199px) {
    .common-table {
        padding: 1rem;
    }

    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.85rem;
    }

    .common-table table > thead > tr > th,
    .common-table table > thead > tr > td,
    .common-table table > tbody > tr > th,
    .common-table table > tbody > tr > td {
        padding-block: 0.875rem;
        padding-inline: 0.5rem;
    }

    .common-table span.badge {
        --bs-badge-padding-y: 0.65em;
        font-size: 0.75rem;
    }

    .blue-btn {
        font-size: 0.75rem;
        padding-inline: 1rem;
        gap: 0.2rem;
    }
}

@media screen and (max-width: 991px) {
    .common-table .table {
        min-width: 43.75rem;
        /* 700px */
    }

    .custom-pagination {
        gap: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .common-table {
        padding: 0.75rem;
    }

    .common-table .dt-length {
        margin: 0 0 1.25rem !important;
    }

    .common-table div.dt-layout-row {
        flex-direction: column;
        gap: 1rem;
    }

    .common-table .dt-search,
    .common-table .dt-length {
        width: 100%;
    }

    .common-table .table {
        min-width: 37.5rem;
        /* 600px */
    }

    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.8rem;
    }

    .blue-btn {
        font-size: 0.7rem;
        padding-inline: 0.75rem;
        padding-block: 0.4rem;
    }

    .blue-btn i {
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 575px) {
    .common-table {
        padding: 0.5rem;
        margin-inline: -0.5rem;
    }

    .common-table .table {
        min-width: 34.375rem;
        /* 550px */
    }

    .common-table table.dataTable > thead > tr > th,
    .common-table table.dataTable > thead > tr > td,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        padding-block: 0.75rem;
        padding-inline: 0.4rem;
    }

    .common-table span.dt-column-title {
        font-size: 0.75rem;
    }

    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.75rem;
    }

    .blue-btn {
        font-size: 0.65rem;
        padding-inline: 0.6rem;
        padding-block: 0.35rem;
    }
}

/* Responsive pagination for 475px to 320px */
@media screen and (max-width: 475px) {
    .custom-pagination {
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .previous-page-link,
    .next-page-link {
        min-width: 5.5rem;
        height: 2.3rem;
        font-size: 0.75rem;
        padding: 0 0.4rem;
        gap: 0.3rem;
    }

    .previous-page-link span svg,
    .next-page-link span svg {
        width: 0.8rem;
    }

    .custom-page-link {
        min-width: 1.7rem;
        font-size: 0.75rem;
        padding: 0.2rem;
    }

    .custom-page-link.active-link {
        min-width: 2rem;
        font-size: 0.75rem;
    }

    .page-item.disabled .page-link {
        font-size: 0.8rem;
    }

    /* Ensure sections align properly */
    .custom-pagination > span {
        display: flex;
        gap: 0.3rem;
        align-items: center;
    }
}

/* Extra small devices >=320px and <375px */
@media screen and (max-width: 360px) {
    .previous-page-link,
    .next-page-link {
        min-width: 4.5rem;
        font-size: 0.7rem;
    }

    .custom-page-link {
        min-width: 1.5rem;
        font-size: 0.7rem;
    }
}

/* table design End */

/* View Rates Popup Start */

.modal-dialog.modal-lg.modal-dialog-scrollable {
    --bs-modal-width: 100%;
    max-width: 100% !important;
}

.carrier-card {
    text-align: center;
    border: 0.0625rem solid #dfdfdf !important;
    border-radius: 0.375rem;
    padding: 1.25rem;
}

.carrier-card.active-card {
    border-color: #c04657 !important;
}

.carrier-card .form-check .form-check-input {
    float: none;
    margin-top: 0.12rem;
}

.modal-header .btn-close {
    border: 0.0625rem solid #545454;
    filter: unset;
    padding: 0.32rem;
}

.modal-title {
    font-size: 1.125rem;
}

.form-check-input {
    border-color: #c04657;
}

.form-check-input:checked {
    background-color: #c04657;
    border-color: #c04657;
}

.form-check .form-check-label {
    color: #333333;
}

.carrier-details small,
.price-breakdown small {
    color: #545454 !important;
}

.carrier-details small strong,
.main-total strong {
    color: #000 !important;
}

.carrier-badges span.badge {
    white-space: inherit;
}

.carrier-badges span.badge.bg-info {
    background-color: #c04657 !important;
}

.carrier-badges span.badge.bg-warning {
    background-color: var(--blue-color) !important;
}

@media screen and (max-width: 1199px) {
    .common-table span.dt-column-title,
    .common-table table.dataTable > tbody > tr > th,
    .common-table table.dataTable > tbody > tr > td {
        font-size: 0.85rem;
    }

    .common-table span.badge {
        --bs-badge-padding-y: 0.65em;
    }

    .blue-btn {
        font-size: 0.75rem;
        padding-inline: 1rem;
        gap: 0.2rem;
    }
}

@media screen and (max-width: 767px) {
    .common-table .dt-length {
        margin: 0 0 1.25rem !important;
    }
}

.profile-card .modal-content {
    background-color: var(--white-smoke);
}

.personal-info,
.password-wp {
    padding: 1.25rem 1.25rem 0.5rem;
    background-color: var(--white-color);
    border: 1px solid var(--Border-color, #dfdfdf);
    box-shadow: 0px 3.5px 5.5px 0px #00000005;
    border-radius: 0.5rem;
}

.personal-info {
    margin-bottom: 2.5rem;
}

.cover-photo {
    height: auto;
    background: unset;
    position: relative;
    border-radius: 1rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    border: 0.3rem solid var(--white-color);
    position: unset;
    bottom: -3.375rem;
    left: 50%;
    transform: unset;
    object-fit: cover;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.2);
}

.profile-page {
    text-align: left;
    margin-top: 2.5rem;
}

.pass-change {
    color: var(--primary-brick-red);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.name {
    color: var(--primary-brick-red);
}

.notification .options-container {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.notification .option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.notification.form-group input {
    -webkit-appearance: auto !important;
}

.notification.form-group input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-brick-red);
}

@media (max-width: 575px) {
    .form-gp-wp {
        flex-direction: column;
        gap: 0;
    }

    .personal-info,
    .password-wp {
        padding: 1.25rem;
    }

    .personal-info .form-gp-wp:not(:first-child) {
        margin-top: 1.25rem;
    }
}

#map {
    height: 520px;
    width: 100%;
    margin-top: 10px;
}

.controls {
    max-width: 900px;
    margin: 10px 0;
}

.label-box {
    background: white;
    padding: 6px 10px;
    border: 2px solid rgb(143, 143, 143);
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}
.route-card{
    border-radius:8px;
    padding:20px;
    text-align:center;
}

.pickup-card{
    border:2px solid #28a745;
}

.delivery-card{
    border:2px solid #dc3545;
}

.carrier-card{
    background:#f5f5f5;
    padding:15px;
    border-radius:6px;
    font-weight:600;
}