/* Ecommerce customer account drawer: responsive navigation and tab content. */
@media (max-width: 991.98px) {
    .main-nav button.ecommerce-main-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 36px;
        padding: 5px 8px;
        border: 1px solid #d8dde3 !important;
        border-radius: 5px;
        background-color: #fff !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
        opacity: 1 !important;
    }
    .main-nav button.ecommerce-main-menu-toggle .navbar-toggler-icon {
        display: block;
        width: 22px;
        height: 22px;
        opacity: 1 !important;
        filter: none !important;
    }
}

@media (max-width: 575.98px) {
    #customerDashboardModal .modal-dialog {
        width: calc(100% - 34px) !important;
        min-width: calc(100% - 34px) !important;
        max-width: calc(100% - 34px) !important;
        height: 100dvh !important;
        right: 0 !important;
        margin-right: 0 !important;
        margin-left: 34px !important;
    }
    #customerDashboardModal .modal-content {
        height: 100dvh !important;
        border: 0 !important;
        overflow-x: visible !important;
    }
    #customerDashboardModal .modal-header .close {
        position: fixed !important;
        top: 12px !important;
        right: auto !important;
        left: -34px !important;
        margin: 0 !important;
        width: 34px !important;
        height: 44px !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px 0 0 8px !important;
        background: #f1f1f1 !important;
        box-shadow: none;
        content: normal !important;
        z-index: 5;
    }
    #customerDashboardModal .modal-header .close img {
        display: block;
        width: 18px;
        height: 18px;
        margin: 0;
    }
    #customerDashboardModal .modal-body {
        padding: 14px !important;
        overflow-x: hidden;
    }
    #customerDashboardModal .modal-body > .container-fluid > .row:first-child {
        align-items: center;
        padding-right: 0;
    }
    #customerDashboardModal .pro-name {
        float: none !important;
        font-size: 21px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    #customerDashboardModal .security-style {
        min-height: 38px;
        padding: 5px 10px;
        font-size: 10px;
        line-height: 1.2;
        white-space: normal;
    }
    #customerDashboardModal .popup-style {
        display: block;
        width: 100%;
        border-radius: 9px;
        background: transparent !important;
    }
    #customerDashboardModal .customer-account-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
        padding: 9px 13px;
        color: #fff;
        border: 0;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        box-shadow: none;
    }
    #customerDashboardModal .customer-account-menu-toggle span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }
    #customerDashboardModal .customer-account-menu-toggle .customer-account-menu-chevron {
        transition: transform .2s ease;
    }
    #customerDashboardModal .customer-account-menu-toggle[aria-expanded="true"] .customer-account-menu-chevron {
        transform: rotate(180deg);
    }
    #customerDashboardModal .cust-dash-menu {
        margin-top: 7px;
        max-height: 58vh;
        overflow-y: auto;
        border: 1px solid #dce3ec;
        border-radius: 8px;
        background: #fff !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
    }
    #customerDashboardModal .cust-dash-menu .navbar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: relative;
        width: 100%;
        padding: 6px;
    }
    #customerDashboardModal .cust-dash-menu .nav-item {
        min-width: 0;
        margin: 0 !important;
        border-bottom: 0 !important;
    }
    #customerDashboardModal .cust-dash-menu .nav-item.dropdown {
        grid-column: 1 / -1;
    }
    #customerDashboardModal .cust-dash-menu .nav-link {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 8px 9px !important;
        border: 0 !important;
        border-radius: 6px;
        color: #424956;
        font-size: 12px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    #customerDashboardModal .cust-dash-menu .nav-link:hover,
    #customerDashboardModal .cust-dash-menu .nav-link.active,
    #customerDashboardModal .cust-dash-menu .nav-item.active > .nav-link {
        color: #1058d0 !important;
        border: 0 !important;
        background: #edf4ff;
    }
    #customerDashboardModal .cust-dash-menu .dropdown-menu {
        position: static !important;
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 0 5px !important;
        border: 0;
        border-radius: 6px;
        background: #f7f9fc;
        box-shadow: none !important;
    }
    #customerDashboardModal .cust-dash-menu .dropdown-menu .dropdown-item {
        padding: 9px 12px !important;
        white-space: normal;
    }
    #customerDashboardModal #customerDashboardDetailsDiv {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding-top: 12px !important;
        overflow: visible;
    }
    #customerDashboardModal #customerDashboardDetailsDiv > [class*="col-"] {
        min-width: 0;
        padding-right: 0;
        padding-left: 0;
    }
    #customerDashboardModal .customer-profile-address-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #customerDashboardModal .customer-profile-address-scroll > table {
        width: 100% !important;
        min-width: 680px;
        margin-bottom: 0 !important;
    }
    #membershipEnrollItemsViewModal .modal-body,
    #membershipEnrollItemsViewModal .tab-content,
    #membershipEnrollItemsViewModal .tab-pane,
    #membershipEnrollItemsViewModal .col-xs-12 {
        min-width: 0;
        max-width: 100%;
    }
    #membershipEnrollItemsViewModal .modal-body {
        overflow-x: hidden;
    }
    #membershipEnrollItemsViewModal .membership-details-table-scroll,
    #membershipEnrollItemsViewModal .membership-history-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #membershipEnrollItemsViewModal .membership-details-table-scroll > table {
        width: 100% !important;
        min-width: 900px;
        margin-bottom: 0 !important;
    }
    #membershipEnrollItemsViewModal .membership-history-table-scroll > table {
        width: 100% !important;
        min-width: 760px;
        margin-bottom: 0 !important;
    }
    #guestpassRedeemModal .modal-body,
    #guestpassRedeemModal .col-xs-12 {
        min-width: 0;
        max-width: 100%;
    }
    #guestpassRedeemModal .modal-body {
        overflow-x: hidden;
    }
    #guestpassRedeemModal .guestpass-details-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #guestpassRedeemModal .guestpass-details-table-scroll > table {
        width: 100% !important;
        min-width: 760px;
        margin-bottom: 0 !important;
    }
    #editcustomerDiv.edit-customer-profile-modal.modal.right .modal-dialog,
    #editcustomerDiv.edit-customer-profile-modal.modal.right.fade .modal-dialog,
    #editcustomerDiv.edit-customer-profile-modal.modal.right.fade.show .modal-dialog {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: calc(100% - 34px) !important;
        min-width: 0 !important;
        max-width: 420px !important;
        height: 100dvh !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }
    #editcustomerDiv.edit-customer-profile-modal .modal-content {
        width: 100%;
        height: 100dvh !important;
        overflow-x: visible !important;
        overflow-y: hidden !important;
        border: 0;
        border-radius: 0 !important;
    }
    #editcustomerDiv.edit-customer-profile-modal .modal-header .close {
        position: fixed !important;
        top: 12px !important;
        right: auto !important;
        left: -34px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        border-radius: 8px 0 0 8px !important;
        background: #f1f1f1 !important;
        content: normal !important;
        z-index: 5;
    }
    #editcustomerDiv.edit-customer-profile-modal .modal-header .close img {
        display: block;
        width: 18px;
        height: 18px;
    }
    #editcustomerDiv.edit-customer-profile-modal .modal-body {
        min-width: 0;
        padding: 12px !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #editcustomerDiv.edit-customer-profile-modal .edit-customer-profile-form-wrap {
        min-width: 0;
        padding: 12px !important;
    }
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm,
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm > .row,
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm > .row > .col-xs-12 {
        width: 100%;
        min-width: 0;
        margin-right: 0;
        margin-left: 0;
    }
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm .mb-3.row {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm .mb-3.row > label,
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm .mb-3.row > div {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm .mb-3.row > label {
        padding-bottom: 5px;
    }
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm input:not([type="radio"]):not([type="hidden"]),
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm select {
        width: 100% !important;
        max-width: 100%;
    }
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm .input-group {
        display: flex !important;
        flex-wrap: nowrap;
        width: 100% !important;
    }
    #editcustomerDiv.edit-customer-profile-modal #editCustomerProfileForm .radio {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .d-flex {
        flex-wrap: wrap;
    }
    #customerDashboardModal #dashboard-bar-1 > .col-12 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 0;
    }
    #customerDashboardModal #dashboard-bar-1 .dashboard-bar-elements-1 {
        width: 100%;
        margin: 0 !important;
        border-radius: 7px;
    }
    #customerDashboardModal #dashboard-bar-1 .dashboard-bar-elements-1:last-child {
        grid-column: 1 / -1;
    }
    #customerDashboardModal .customer-dashboard-main {
        width: 100% !important;
        padding: 0 !important;
    }
    #customerDashboardModal #dashboard-bar-2 {
        width: 100% !important;
        border-radius: 7px;
        overflow: hidden;
    }
    #customerDashboardModal #dashboard-bar-2 > .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 6px !important;
    }
    #customerDashboardModal #dashboard-bar-2 > .row > [class*="col-"] {
        width: 100% !important;
        min-width: 0;
        padding: 7px 8px !important;
    }
    #customerDashboardModal #dashboard-bar-2 .dash-bar-value {
        overflow-wrap: anywhere;
    }
    #customerDashboardModal .customer-dashboard-panels {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        padding-top: 12px !important;
    }
    #customerDashboardModal .customer-dashboard-panels > [class*="col-"] {
        width: 100% !important;
        min-width: 0;
        padding: 0 !important;
    }
    #customerDashboardModal .customer-dashboard-panels .bg-white {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    #customerDashboardModal .customer-dashboard-panels .img-style {
        width: min(160px, 100%);
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
    }
    #customerDashboardModal .profile-information-grid {
        width: 100%;
        margin: 0;
    }
    #customerDashboardModal .profile-info-column {
        min-width: 0;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    #customerDashboardModal .profile-section-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 !important;
        line-height: 1.2;
    }
    #customerDashboardModal .profile-edit-button {
        flex: 0 0 auto;
        float: none !important;
        margin: 1px 0 0 !important;
        line-height: 1;
    }
    #customerDashboardModal .profile-info-column .row,
    #customerDashboardModal .profile-info-column .text-inner {
        min-width: 0;
        max-width: 100%;
    }
    #customerDashboardModal .profile-email-value {
        display: block;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }
    #customerDashboardModal .customer-dashboard-balance-alert {
        position: relative;
        padding: 8px 10px !important;
        border-radius: 7px !important;
    }
    #customerDashboardModal .customer-dashboard-balance-alert .btn-close {
        top: 7px;
        right: 8px;
        width: 20px;
        height: 20px;
        padding: 0 !important;
        transform: none;
    }
    #customerDashboardModal .customer-dashboard-balance-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px);
        padding: 0 !important;
        font-size: 12px;
        line-height: 1.3;
    }
    #customerDashboardModal .customer-dashboard-balance-content > span {
        min-width: 0;
        padding-right: 2px;
        white-space: nowrap;
    }
    #customerDashboardModal .customer-dashboard-pay-button {
        float: none !important;
        display: block;
        width: 100% !important;
        min-width: 0;
        min-height: 24px;
        margin: 0 !important;
        color: #424956 !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        border-radius: 9px;
        -webkit-overflow-scrolling: touch;
    }
    #customerDashboardModal #customerDashboardDetailsDiv #sample-table-2_wrapper.dataTables_wrapper {
        overflow: visible !important;
    }
    #customerDashboardModal .customer-account-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #customerDashboardModal .customer-account-table-scroll > table {
        width: 100% !important;
        min-width: 760px !important;
        margin: 0 !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv table.dataTable {
        width: 100% !important;
        min-width: 680px;
        margin: 0 !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .table-responsive > table:not(.dataTable) {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .table-responsive {
        overflow-x: visible;
    }
    #customerDashboardModal #customerDashboardDetailsDiv table td.hidden-xs,
    #customerDashboardModal #customerDashboardDetailsDiv table th.hidden-xs {
        display: table-cell !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv table .visible-xs {
        display: none !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .table_column_header {
        padding: 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .table_column_val {
        padding: 10px !important;
        font-size: 12px !important;
        white-space: normal;
        vertical-align: middle;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .page-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
        width: 100%;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.35;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .page-header span {
        margin: 0 !important;
        font-size: 12px !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .page-header .btn {
        margin: 0 !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_length {
        float: none !important;
        width: auto !important;
        margin: 10px 12px !important;
        padding: 0 !important;
    }
    #customerDashboardModal #appointmentFrom #sample-table-2_wrapper > .row,
    #customerDashboardModal #classFrom #sample-table-2_wrapper > .row,
    #customerDashboardModal #guestpassesFrom #sample-table-2_wrapper > .row,
    #customerDashboardModal #accountSummaryForm #sample-table-2_wrapper > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
        height: auto !important;
        min-height: 0;
        margin: 0 !important;
        padding: 8px 12px !important;
    }
    #customerDashboardModal #appointmentFrom #sample-table-2_wrapper > .row > [class*="col-"],
    #customerDashboardModal #classFrom #sample-table-2_wrapper > .row > [class*="col-"],
    #customerDashboardModal #guestpassesFrom #sample-table-2_wrapper > .row > [class*="col-"],
    #customerDashboardModal #accountSummaryForm #sample-table-2_wrapper > .row > [class*="col-"] {
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
    }
    #customerDashboardModal #appointmentFrom .dataTables_length,
    #customerDashboardModal #classFrom .dataTables_length,
    #customerDashboardModal #guestpassesFrom .dataTables_length,
    #customerDashboardModal #accountSummaryForm .dataTables_length {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100% !important;
        margin: 0 !important;
    }
    #customerDashboardModal #appointmentFrom .dataTables_length label,
    #customerDashboardModal #classFrom .dataTables_length label,
    #customerDashboardModal #guestpassesFrom .dataTables_length label,
    #customerDashboardModal #accountSummaryForm .dataTables_length label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin: 0 !important;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }
    #customerDashboardModal #appointmentFrom .dataTables_length select,
    #customerDashboardModal #classFrom .dataTables_length select,
    #customerDashboardModal #guestpassesFrom .dataTables_length select,
    #customerDashboardModal #accountSummaryForm .dataTables_length select {
        width: 56px !important;
        min-width: 56px;
        height: 30px;
        margin: 0 !important;
        padding: 2px 22px 2px 8px;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_wrapper > .top.right {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        min-height: 46px;
        margin: 0 !important;
        padding: 8px 12px !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_wrapper > .top.right .dataTables_length {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_wrapper > .top.right .dataTables_length label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin: 0 !important;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_wrapper > .top.right .dataTables_length select {
        width: 56px !important;
        min-width: 56px;
        height: 30px;
        margin: 0 !important;
        padding: 2px 22px 2px 8px;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_wrapper .bottom {
        display: grid !important;
        grid-template-columns: 1fr;
        min-width: 0;
        padding: 8px 12px;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_info,
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_paginate {
        width: 100% !important;
        padding: 5px 0 !important;
        text-align: center;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .dataTables_paginate ul {
        float: none;
        justify-content: center;
        margin: 0;
    }
    #customerDashboardModal #customerDashboardDetailsDiv input,
    #customerDashboardModal #customerDashboardDetailsDiv select,
    #customerDashboardModal #customerDashboardDetailsDiv textarea {
        max-width: 100%;
    }
    #customerDashboardModal #customerDashboardDetailsDiv .card,
    #customerDashboardModal #customerDashboardDetailsDiv .bg-white {
        max-width: 100%;
    }
    #customerDashboardModal #dyn_forms_Div .dataTables_wrapper,
    #customerDashboardModal #dyn_agreements_Div .dataTables_wrapper {
        overflow-x: hidden;
    }
    #customerDashboardModal #customerDashboardDetailsDiv #dyn_forms.dataTable,
    #customerDashboardModal #customerDashboardDetailsDiv #dyn_agreements.dataTable {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }
    #customerDashboardModal #dyn_forms thead,
    #customerDashboardModal #dyn_agreements thead {
        display: table-header-group !important;
    }
    #customerDashboardModal #dyn_forms tbody,
    #customerDashboardModal #dyn_agreements tbody {
        display: table-row-group !important;
    }
    #customerDashboardModal #dyn_forms tfoot,
    #customerDashboardModal #dyn_agreements tfoot {
        display: table-header-group !important;
    }
    #customerDashboardModal #dyn_forms tr,
    #customerDashboardModal #dyn_agreements tr {
        display: table-row !important;
    }
    #customerDashboardModal #dyn_forms th,
    #customerDashboardModal #dyn_forms td,
    #customerDashboardModal #dyn_agreements th,
    #customerDashboardModal #dyn_agreements td {
        position: static;
        display: table-cell !important;
        min-height: 0;
        padding: 7px 4px !important;
        border-color: #e4e9ef !important;
        font-size: 10px !important;
        line-height: 1.25;
        text-align: left;
        white-space: normal !important;
        overflow-wrap: anywhere;
        vertical-align: middle;
    }
    #customerDashboardModal #dyn_forms th {
        font-size: 9px !important;
    }
    #customerDashboardModal #dyn_forms th:nth-child(1),
    #customerDashboardModal #dyn_forms td:nth-child(1) {
        width: 22% !important;
    }
    #customerDashboardModal #dyn_forms th:nth-child(2),
    #customerDashboardModal #dyn_forms td:nth-child(2) {
        width: 27% !important;
    }
    #customerDashboardModal #dyn_forms th:nth-child(3),
    #customerDashboardModal #dyn_forms td:nth-child(3) {
        width: 23% !important;
    }
    #customerDashboardModal #dyn_forms th:nth-child(4),
    #customerDashboardModal #dyn_forms td:nth-child(4) {
        width: 16% !important;
    }
    #customerDashboardModal #dyn_forms th:nth-child(5),
    #customerDashboardModal #dyn_forms td:nth-child(5) {
        width: 12% !important;
        text-align: center;
    }
    #customerDashboardModal #dyn_agreements th:nth-child(1),
    #customerDashboardModal #dyn_agreements td:nth-child(1) {
        width: 27% !important;
    }
    #customerDashboardModal #dyn_agreements th:nth-child(2),
    #customerDashboardModal #dyn_agreements td:nth-child(2) {
        width: 38% !important;
    }
    #customerDashboardModal #dyn_agreements th:nth-child(3),
    #customerDashboardModal #dyn_agreements td:nth-child(3) {
        width: 23% !important;
    }
    #customerDashboardModal #dyn_agreements th:nth-child(4),
    #customerDashboardModal #dyn_agreements td:nth-child(4) {
        width: 12% !important;
        text-align: center;
    }
    #customerDashboardModal #dyn_forms tfoot input,
    #customerDashboardModal #dyn_agreements tfoot input {
        width: 100% !important;
        min-width: 0;
        padding: 4px !important;
        font-size: 9px;
    }
    #customerDashboardModal #dyn_forms td:last-child .btn,
    #customerDashboardModal #dyn_forms td:last-child a,
    #customerDashboardModal #dyn_agreements td:last-child .btn,
    #customerDashboardModal #dyn_agreements td:last-child a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
    }
    #showAppointmentDiv {
        z-index: 1080;
        padding: 0 !important;
    }
    #showAppointmentDiv.modal.right .modal-dialog,
    #showAppointmentDiv.modal.right.fade .modal-dialog,
    #showAppointmentDiv.modal.right.fade.show .modal-dialog {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: calc(100% - 34px) !important;
        min-width: 0 !important;
        max-width: 420px !important;
        height: auto !important;
        max-height: 100dvh;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }
    #showAppointmentDiv.modal.right.fade:not(.show) .modal-dialog {
        right: -100% !important;
    }
    #showAppointmentDiv.modal.right.fade.show .modal-dialog {
        right: 0 !important;
        transition: right .3s ease-out !important;
    }
    #showAppointmentDiv .modal-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto !important;
        max-height: 100dvh;
        overflow-x: visible !important;
        overflow-y: hidden !important;
        border: 0;
        border-radius: 10px !important;
    }
    #showAppointmentDiv .modal-header .close {
        position: absolute !important;
        top: 12px !important;
        right: auto !important;
        left: -34px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 8px 0 0 8px !important;
        background: #f1f1f1 !important;
        box-shadow: none;
        content: normal !important;
        z-index: 5;
    }
    #showAppointmentDiv .modal-header .close img {
        display: block;
        width: 18px;
        height: 18px;
    }
    #showAppointmentDiv .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 12px !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    #showAppointmentDiv .modal-name {
        float: none !important;
        padding: 4px 0 10px !important;
        font-size: 19px;
    }
    #showAppointmentDiv .appointment-provider-summary {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 !important;
    }
    #showAppointmentDiv .appointment-provider-summary > [class*="col-"] {
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }
    #showAppointmentDiv .appointment-provider-summary .contact_photo img {
        width: auto;
        max-width: 100px;
        height: auto;
        max-height: 100px;
        object-fit: contain;
    }
    #showAppointmentDiv .contact_details,
    #showAppointmentDiv .appointment-policy {
        overflow-wrap: anywhere;
    }
    #showAppointmentDiv .modal-footer {
        flex: 0 0 auto;
        padding: 8px 12px 12px !important;
        border-top: 1px solid #dce3e8;
        background: #f1f1f1;
    }
    #showAppointmentDiv .modal-footer > .col-12 {
        width: 100%;
        padding: 0 !important;
    }
    #showAppointmentDiv .modal-footer .btn {
        display: block;
        width: 100% !important;
        margin: 4px 0 !important;
    }
}