/*Responsive Break points*/
@media (max-width: 1200px) {
    .callender_main_area_updated .calender_top_right_btnz {
        margin-left: unset;
        margin-top: 8px;
    }
}
@media (max-width: 992px) {
    .top_inner_btns {
        justify-content: flex-start;
        margin-bottom: 20px;
    }
    .time_between {
     display:none;
    }
    .dashboard_area .inner_top_content_wrapper h2 {
        margin-top: 0;
    }
    .dashboard_area .inner_top_content_wrapper p {
        margin-bottom:5px;
    }
    .checkout_modal_popups .nav.pill-tabs.mb-3 {
        row-gap: 10px;
    }
    .callender_main_area_updated .step-bullet .cal_stel_line {
     display:none;
    }
    .callender_main_area_updated .step-bullets {
        gap: 5px;
    }
    .callender_main_area_updated .step-bullet p {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
    .callender_main_area_updated .step-bullet h3 {
        font-size: 13px;
        margin-left:0;
    }
    .seacrh_wrapper {
        width: 100%;
        flex-direction: column;
        row-gap: 10px;
    }
        .seacrh_wrapper .seacrh_client {
            margin-right: unset;
            width: 100%;
        }
    #openAddClientBtn {
      width:100%;
    }
    .team_member_area_schedule .day-card .form-check + div {
        margin-left:unset !important;
    }
    }
@media (max-width: 768px) {
    #addPackageModal .modal-dialog {
        width: unset;
    }
    .service_menu_top_lft {
     text-align:left;
    }
    #addmemberBtn {
        margin-top: 15px;
    }
    .setting_top_lft_btn {
        text-align: right;
    }
    .payment_area .appointment_top h2 {
        margin-bottom: 0px !important;
    }
    .payment_area .appoint_top_wrapper {
        margin-bottom: 15px;
    }
    .settings_navigation {
      max-width:280px;
     }
}
@media (max-width: 576px) {
    .row-responsive-with-btnz {
        row-gap: 0;
    }
    .checkout_modal_popups .pill-tabs .nav-link {
        margin-bottom: 0;
    }
    .callender_main_title {
        font-size: 18px;
    }
    .callender_main_description {
        font-size: 15px;
        line-height: 18px;
        margin-top: 5px;
    }
    .recent_sales_des {
     flex-direction:column;
    }
        .recent_sales_des div:nth-child(1), .recent_sales_des div:nth-child(2) {
            width:100%;
            max-width:unset !important;
        }
        .recent_sales_des .recent_sales_record {
            margin-bottom:10px;
        }
    .top_area_main h1, .login_top_area h2 {
        font-size: 26px;
        line-height: 18px;
    }
    .top_area_main p, .login_top_area p {
        font-size: 16px;
        line-height: 20px;
    }
       
    }
@media (max-width: 480px) {
    .checkout_modal_popups .package-card {
        flex-wrap: wrap;
        row-gap: 20px;
    }
    .package-card button {
     width:100%;
    }
    .team_member_dashboard .status-badge {
     margin-top:15px;
    }
    .checkout_modal_popups .btn-outline-dashed {
        padding: 5px 0;
        font-size: 14px;
    }
    #statusFilter {
        max-width: 100% !important;
    }
    .clientFiltersFormFilterController .input-group {
     max-width:100% !important;
    }
    .topbar-controls {
        display: block;
    }
    .client_members .wrap {
        padding: 20px 15px;
    }
    .client_filters {
        margin-bottom: 15px !important;
    }
    .clientFiltersFormFilterController {
     flex-direction:column;
    }
    .callender_main_area_updated .calender_top_right_btnz {
        width: unset;
        display: block;
        margin-top: 15px;
        text-align: center;
    }
    .today_wrap {
        margin-top: 10px;
        display: block;
        margin-bottom: 20px;
    }
    #todayBtn {
        padding: 4px 10px;
    }
    .callender_main_area_updated .service-item {
     width:100%;
    }
    .staff-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .callender_main_area_updated .modal-footer .btn {
        width: 100%;
    }
    .team_member_area_schedule .day-card .form-check + div {
        flex-wrap: wrap;
        gap: 5px !important;
    }
    .timmer_footer, .timmer_footer_nxt {
        flex-direction: column;
    }
        .timmer_footer_prev, .timmer_footer_prev button, .timmer_footer_nxt, .timmer_footer_nxt button {
            width: 100%;
        }
    }