@media only screen and (max-width: 1600px) {
    .dashboard-left-bar {
        padding: 25px 12px;
        gap: 40px;
        margin: 16px 0px 16px 14px;
    }

    .dashboard-leftbar-pages {
        padding: 6px 10px;
    }

    ul.dashboard-left-bar-list-pages {
        gap: 8px;
    }

    .dashboard-main-content {
        padding: 0 15px;
    }
}

@media only screen and (max-width: 1439px) {
    .update-status-pagination-search {
        flex-wrap: wrap;
    }

    .row-pagination-section {
        order: 2;
        justify-content: flex-end;
        width: -webkit-fill-available;
    }

    .reconditioning-summary {
        flex: 1 1 calc(100% / 3 - 0px);
        max-width: calc(100% / 3 - 32px);
    }

    .all-notes {
        padding-right: 30px;
    }

    .add-note-popup, .note-list-popup {
        width: 450px !important;
    }

    .add-note-popup, .note-list-popup {
        right: -15% !important;
    }

    .dashboard-main-content {
        padding: 0 0px;
    }

    .average-section-all-points .heading-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .critical-alerts-points {
        padding-right: 0px;
    }
    .table-section {
        overflow-x: auto;
        padding-bottom: 15px;
        position: relative;
    }

        .table-section::-webkit-scrollbar {
            height: 8px;
            background: var(--ghost-white);
            border-radius: 10px;
        }

        .table-section::-webkit-scrollbar-track {
            background: var(--ghost-white);
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .table-section::-webkit-scrollbar-thumb {
            background: var(--fluorescent-red);
            border-radius: 10px;
            border: 2px solid var(--white-color);
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        }

            .table-section::-webkit-scrollbar-thumb:hover {
                background: var(--fluorescent-red);
            }

        .table-section::-webkit-scrollbar-thumb {
            visibility: visible !important;
            opacity: 1;
        }
    .progress-box-d .circle{
        width: 140px;
        height: 140px;
    }
    .progress-box-d .circle::before {
        width: 140px;
        height: 140px;
        top: 0;
        left: 0;
    }
    .progress-title {
        font-size: 18px;
        padding: 0 2px;
        text-align: center;
    }
}

@media only screen and (max-width: 1280px) {
    .phone-column {
        min-width: 128px;
    }
}

@media only screen and (max-width: 1200px) {
    .update-statuts-and-pdf-excel-download {
        justify-content: space-between;
    }

    .update-status, .vehicle-searchbox {
        width: -webkit-fill-available;
    }

    .average-section, .reconditioning-summary-progress-chart-section-and-critical-alerts {
        flex-direction: column;
        gap: 30px;
    }

    .progress-container {
        gap: 20px 30px;
    }

    .circle {
        width: 150px;
        height: 150px;
    }

        .circle::before {
            width: 135px;
            height: 135px;
        }

    .progress-text {
        font-size: 30px;
    }

    .progress-title {
        font-size: 18px;
    }

        .progress-title span {
            font-size: 16px;
        }

    .email-column {
        min-width: 170px;
        word-break: break-word;
    }

    .name-column {
        min-width: 120px;
    }
    .all-notes {
        padding-right: 0;
    }
    form.vehicle-search, form.vehicle-search .vehicle-searchbox {
        width: -webkit-fill-available;
    }
    .progress-box-d {
        flex: 1 1 calc(100% / 4 - 0px);
        max-width: calc(100% / 4 - 24px);
    }
    .progress-title {
        font-size: 16px;
    }
}

@media only screen and (max-width: 1100px) {
    .right-dashboard-header {
        flex-wrap: wrap;
        gap: 20px;
    }

    .vehicle-table th {
        text-align: center;
    }


    .vehicle-table th, .vehicle-table td {
        padding-right: 30px !important;
    }

    .vehicle-details .vehicle-details-list {
        gap: 10px;
    }

    .vehicle-details {
        flex-direction: column;
        gap: 10px;
    }

    .reconditioning-summary {
        flex: 1 1 calc(100% / 2 - 0px);
        max-width: calc(100% / 2 - 30px);
    }

    p.note-text, .notes-date-and-time p, textarea {
        font-size: 14px !important;
    }

    th.name-column, th.phone-column, th.email-column {
        text-align: left;
    }
}

@media only screen and (max-width: 999px) {
    .dashboard-left-bar-section {
        min-width: 218px;
        max-width: 218px;
    }

    .dashboard-right-section {
        padding: 20px 10px;
    }

    .login-section {
        width: 400px;
        gap: 20px;
        padding: 35px;
    }

    .welcome-user {
        order: 3;
        width: -webkit-fill-available;
        text-align: left !important;
    }

    .right-dashboard-header {
        gap: 10px !important;
    }

    a.small-btn {
        padding: 8px 6px;
    }

    .dashboard-leftbar-pages p {
        font-size: 14px;
    }

    .vehicle-info-and-notes, .reconditioning-summary-and-recent-activity {
        flex-direction: column;
    }

    .flex-row-32 {
        gap: 25px;
    }

    .add-note-popup, .note-list-popup {
        right: -25% !important;
        width: 350px !important;
    }

    .admin-main-container .dashboard-left-bar-section {
        min-width: 246px;
        max-width: 246px;
    }

    .vehicle-table th, .vehicle-table td, a.small-btn, .update-status-dropdown .selected-month, .update-status-dropdown ul.dropdown-content li {
        font-size: 12px !important;
    }

    .name-column {
        min-width: 100px;
    }

    .phone-column {
        min-width: 110px;
    }

    .email-column {
        min-width: 130px;
    }

    .font-28 {
        font-size: 24px;
    }

    .login-page a.primary-btn {
        padding: 14px;
        font-size: 18px;
    }

    .login-header {
        padding-bottom: 10px;
    }

    .hamberger-menu svg {
        width: 40px;
        height: 40px;
    }

    .hamburger-close-icon svg {
        width: 30px;
        height: 30px;
    }

    .hamberger-menu {
        display: block !important;
        padding-top: 6px;
    }

    .dashboard-left-bar-section {
        position: absolute !important;
    }

    .dashboard-left-bar-section-block {
        position: absolute;
    }

        .dashboard-left-bar-section-block .hamburger-close-icon {
            display: block;
            padding: 10px;
            background: var(--gray97);
            border: 1px solid var(--pale-grey);
            box-shadow: 0px 0px 10.6px 1px rgba(0, 0, 0, 0.08);
            border-radius: 0 16px 16px 0;
            position: absolute;
            left: 188px;
            top: 16px;
            padding-left: 20px;
        }

    .dashboard-left-bar-section .hamburger-close-icon {
        transform: translate(-427%, 0);
        position: fixed;
        transition: linear .2s;
        display: block;
    }

    .dashboard-left-bar-section .dashboard-left-bar {
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(-109%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        transition: linear .2s;
    }

    .dashboard-left-bar-section-block .hamburger-close-icon, .dashboard-left-bar-section-block .dashboard-left-bar {
        transform: none;
        transition: linear .2s;
        opacity: 1;
    }

    .hamberger-menu svg rect, .hamburger-close-icon svg rect {
        fill: transparent;
    }

    .dashboard-right-section {
        padding: 20px;
    }


    .welcome-user {
        order: 0;
        width: 50%;
    }

    .right-dashboard-header {
        gap: 0px 0 !important;
    }

    .hamberger-menu-with-title {
        display: flex;
        align-items: center;
        gap: 10px;
        width: -webkit-fill-available;
    }
}

@media only screen and (max-width: 767px) {
    .font-28 {
        font-size: 22px;
    }

    .login-header {
        padding-bottom: 5px;
    }

    .r2-logo-image {
        padding-bottom: 15px;
    }

        .r2-logo-image img {
            width: 100px;
        }

    label {
        font-size: 14px;
    }

    .login-form input {
        padding: 8px !important;
        font-size: 12px !important;
    }

    .font-16 {
        font-size: 14px;
    }

    .primary-btn {
        padding: 12px !important;
        font-size: 16px !important;
    }

    .login-form form {
        gap: 10px;
    }

    .login-header {
        gap: 4px;
    }

    .right-dashboard-header, .dealership-main-content .heading-and-button, .update-status-pagination-search, .vehicle-information, .reconditioning-summary-section {
        padding: 0 0px !important;
    }


    .font-20 {
        font-size: 18px;
    }
    .space_bottom {
        margin: 0px 0px 10px;
    }
    img.dashboard-r2r-logo {
        width: 120px;
    }
    .add-note-popup, .note-list-popup {
        right: 0% !important;
    }
    .font-32 {
        font-size: 28px;
    }
    .vehicle-main-content .table-section th, .vehicle-main-content .table-section td {
        display: block;
    }
    td.stock-column::before, td.model-column::before, td.current-status-td::before, td.next-status::before, td.update-column::before, td.note-column::before, td.days-column::before, td.age-column::before, td.photos-column::before {
        content: "Stock";
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        min-width: 150px;
        margin-right: 6px;
    }
    td.model-column::before {
        content: "Year/Make/Model";
    }
    td.current-status-td::before {
        content: "Current Status";
    }
    td.next-status::before {
        content: "Next Status";
    }
    td.update-column::before {
        content: "Update Status";
    }
    td.note-column::before {
        content: "Note";
    }
    td.days-column::before {
        content: "Days in Status";
    }
    td.age-column::before {
        content: "Age";
    }
    td.photos-column::before {
        content: "Photos";
    }
    .vehicle-table td:first-child {
        padding-left: 0 !important;
        padding-top: 0 !important;
    }
        .vehicle-table td:last-child{
            border:0;
        }
        .vehicle-table tr {
            border: 1px solid #eded;
            padding: 20px;
            display: block;
            margin-bottom: 20px;
            border-radius: 12px;
        }
    .vehicle-table td {
        padding: 12px 0 !important;
    }
    .vehicle-table thead{
        display: none;
    }
    .update-list-status-dropdown {
        position: relative;
    }
    .update-list-status-dropdown .dropdown-content {
        right: 0;
    }
   }
@media only screen and (max-width: 567px) {
    .login-section {
        width: 300px;
        gap: 15px;
        padding: 20px;
    }

    .font-20 {
        font-size: 16px;
    }

    .hamberger-menu-with-title {
        justify-content: space-between;
    }

    .user-profile-and-logout {
        gap: 5px;
    }

    .logout-icon img {
        width: 22px;
    }

    .user-profile {
        gap: 5px;
        padding: 4px 6px;
    }

    .user-profile img {
        width: 25px;
        height: 25px;
    }

    .font-14 {
        font-size: 12px;
    }

    .right-dashboard-header {
        gap: 10px 0 !important;
    }

    .average-inner-section, .reconditioning-summary-progress-chart-section, .critical-alerts-section {
        padding: 0;
    }

    .reconditioning-summary .days-text {
        font-size: 20px;
    }
    .average-section-all-points .point {
        flex: 1 1 calc(100% / 2 - 0px);
        max-width: calc(100% / 2 - 35px);
    }
    .average-section-all-points {
        gap: 12px !important;
    }
    .welcome-user {
        width: 144px;
        word-break: break-word;
    }
    .progress-container {
        gap: 20px;
        justify-content: space-around;
    }
    .progress-box-d {
        max-width: calc(100% / 2 - 50px) !important;
    }
    .update-statuts-and-pdf-excel-download {
        flex-direction: column;
    }

    .add-note-popup, .note-list-popup {
        width: -webkit-fill-available !important;
        margin: auto 20px !important;
    }

    .font-32 {
        font-size: 26px;
    }
    .update-filter-section {
        flex-wrap: wrap;
    }
    .update-filter-section p {
        width: -webkit-fill-available;
    }
    td.stock-column::before, td.model-column::before, td.current-status-td::before, td.next-status::before, td.update-column::before, td.note-column::before, td.days-column::before, td.age-column::before, td.photos-column::before {
        float: none;
        display: block;
        margin-right: 0;
        margin-bottom: 0;
        padding-bottom: 8px;
    }
    .vehicle-table tr {
        padding: 15px;
    }
    }