@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

* {
    font-family: "Inter", sans-serif;
}

hr {
    border: 1px solid rgba(209, 213, 219, 1);
}

.heading-1 {
    color: #0e2741;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
}

.heading-2 {
    color: #0e2741;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
}

.form-select:focus {
    border: 1px solid #008394;
    box-shadow: none;
}

/* Image Container Styles */
/* .image-container {
    position: relative;
    min-height: calc(100vh - 60px);
    background: linear-gradient(
            rgba(243, 251, 251, 0.9),
            rgba(243, 251, 251, 0.9)
        ),
        url("/images/bgimagelogin.jpeg") no-repeat center center;
    background-size: cover;
    border-radius: 30px;
} */
.image-container {
    position: relative;
    min-height: calc(100vh - 60px);
    background:
    /* linear-gradient(
            rgba(243, 251, 251, 0.9),
            rgba(243, 251, 251, 0.9)
        ), */
        /* url("/images/bgimagelogin.jpeg") no-repeat center center; */ url("/images/bgloginimage.png")
        no-repeat center center;

    background-size: cover;
    border-radius: 30px;
}

.img-container {
    padding: 30px 0px 30px 30px !important;
}

.image-container img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo {
    max-width: 200px;
}

.login-text {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #56687a;
    word-wrap: break-word;
}

.otp-text {
    font-family: "Lexend", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #56687a;
}

/* Form Styles */

.form-floating > .form-control {
    padding: 16px;
    height: 58px;
    line-height: 1.25;
}

.form-floating > label {
    padding: 16px;
    color: #56687a;
    /* Added this to help with positioning */
    top: 0;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(0.5rem);
    /* Changed from negative to positive value */
    color: #56687a;
    background-color: transparent;
    /* Changed from none to transparent */
    padding: 0 5px;
    height: auto;
    margin-left: 10px;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 25px;
    padding-bottom: 7px;
}

.form-floating > .form-control {
    padding: 16px;
    height: 58px;
    line-height: 1.25;
}

.form-floating > label {
    padding: 16px;
    color: #56687a;
    top: 0;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(0.5rem);
    color: #56687a;
    background-color: transparent;
    padding: 0 5px;
    height: auto;
    margin-left: 10px;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 25px;
    padding-bottom: 7px;
}

/* Adjust password container for floating label */
.password-input-container {
    position: relative;
}

.password-input-container .password-toggle-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.password-input-container .form-control {
    padding-right: 48px;
}

.login-form-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.form-control {
    padding: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    border-radius: 16px;
    border: 1px solid var(--Neutral-50, #e7e9ec);
}

.form-control:focus {
    box-shadow: none;
    border-color: #4b9b9b;
}

.btn-primary {
    background-color: var(--Primary-500, #008394);
    height: 56px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--Base-White, #ffffff);
    border: none;
}


.password-input-container {
    position: relative;
}

.password-toggle-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* Adjust the padding of password input to prevent text from going under the icon */
.password-input-container .form-control {
    padding-right: 48px;
}

.forgot-password {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: var(--Primary-500, #008394);
    text-decoration: none;
}

.forgot-password:hover {
    color: #3d8080;
}

/* Checkbox Styles */
.form-check-input:checked {
    background-color: #4b9b9b;
    border-color: #4b9b9b;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    background-image: none !important;
    border-color: #e7e9ec !important;
    /* Reset to default border color */
    padding-right: 16px !important;
}

.form-control.is-valid:focus {
    border-color: #4b9b9b !important;
    /* Your focus border color */
    box-shadow: none !important;
}

.form-control.is-invalid,
.form-control.is-valid {
    background-image: none !important;
    padding-right: 16px !important;
    /* Adjust padding if needed */
}

.password-input-container {
    position: relative;
    margin-bottom: 24px;
    /* Increase this value to add more space */
}

/* Adjust the margin for the checkbox container */
.form-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* Add some space above the Remember Me checkbox */
}

.login-remember {
    margin-top: 0px;
    width: 20px;
    height: 20px;
}

.invalid-feedback {
    color: #dc3545;
    font-size: 14px;
    margin-top: 8px;
    margin-left: 4px;
}

/* Adjust password container for error message */
.password-input-container .invalid-feedback {
    position: absolute;
    top: 100%;
    margin-top: 4px;
}

.back-link {
    color: #0e2741;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-link img {
    width: 20px;
    height: 20px;
}

.otp-input {
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    border-radius: 10px;
    border: 1px solid #cfd4d9;
}

.otp-input:focus {
    outline: none;
    border-color: #4b9b9b;
    /* Using your existing focus color */
    box-shadow: none;
}

.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.modal-dialog {
    max-width: 400px;
}

/* Update your existing btn-primary styles if needed */
.modal .btn-primary {
    width: 100%;
    max-width: 100%;
}

/* Sidebar Styles */
.sidebar {
    background-color: #ffffff;
    width: 272px;
    border-right: 1px solid #e7e9ec;
    padding: 20px 0;
    position: fixed;
    left: 0;
    top: 0;
    transition: all 0.3s ease;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f0f0f0;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
    /* Width of scrollbar */
}

.sidebar::-webkit-scrollbar-thumb {
    background: #ccc;
    /* Scrollbar thumb color */
    border-radius: 4px;
    /* Rounded corners */
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #888;
    /* Color on hover */
}

.sidebar::-webkit-scrollbar-track {
    background: #f0f0f0;
    /* Scrollbar track color */
}

.sidebar.collapsed {
    width: 0;
    overflow: hidden;
}

.sidebar .nav-item {
    margin-bottom: 12px;
}

.main-content {
    margin-left: 272px;
    transition: all 0.3s ease;
}

.main-content.expanded {
    margin-left: 0;
}

.sidebar .nav-link {
    color: #56687a;
    padding: 12px 20px 12px 30px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    border-left: 4px solid transparent;
}

.sidebar .nav-link svg {
    width: 24px;
    height: 24px;
}

.sidebar .nav-link.active {
    background-color: #e6f3f4;
    color: #008394;
    border-left: 4px solid #008394;
}

.current-nav {
    background-color: #e6f3f4;
    color: var(--Primary-500, rgba(0, 131, 148, 1)) !important;
    border-left: 4px solid #008394;
}

.sidebar .nav-link.active img {
    color: #008394;
}

/* Header Styles */

header {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #e7e9ec;
    padding: 20px 30px;
}

.menu-toggle,
.menu-toggle2 {
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
}

.menu-icon {
    width: 24px;
    height: 24px;
}

.search-container {
    position: relative;
    min-width: 200px;
    max-width: 300px;
    flex: 1;
}

.search-container .form-control {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #e7e9ec;
    padding: 13px 16px 13px 50px;
}

.search-container::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url("../icons/Union.svg") no-repeat center;
    z-index: 1;
    margin-right: 10px;
}

.down-arrow {
    cursor: pointer;
}

.notification-icon {
    width: 47.2px;
    height: 50px;
    border-radius: 10px;
    padding: 13px;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bell-icon {
    width: 24px;
    height: 24px;
    background: url("../icons/notification.svg") no-repeat center;
    display: inline-block;
}

.user-profile {
    position: relative;
    cursor: pointer;
    height: 50px;
    border: 1px solid #e7e9ec;
    border-radius: 10px;
    padding: 5px 4.72px 5px 4.72px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    word-break: break-all;
}

.user-profile .down-arrow {
    transition: transform 0.3s ease;
}

.user-profile.show .down-arrow {
    transform: rotate(180deg);
}

.user-profile .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 100%;
    height: fit-content;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0px 24px 48px -4px #1118270f;
    border: 1px solid #f9fafb;
    min-width: fit-content;
}

.user-profile .dropdown-menu.show {
    display: block;
}

.user-profile .dropdown-item {
    display: block;
    text-decoration: none;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #111827;
}

.user-profile .dropdown-item:hover {
    background-color: #f9fafb !important;
}

.user-profile .dropdown-item:focus {
    color: #111827 !important;
    background-color: #f9fafb !important;
}

.profile-image {
    width: 37.76px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    color: #0e2741;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 24px;
    margin-bottom: 0;
}

.user-role {
    color: #56687a;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 0;
}

.dashboard-content {
    background-color: #fbfbfb;
    padding: 20px 32px 20px 32px;
    min-height: calc(100vh - 91px);
    /* Adding some padding for better spacing */
}

.calendar-wrapper {
    position: relative;
}

#customDateCalendar {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    background: #ffffff !important;
    border: 1px solid #e7e9ec !important;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    width: 340px;
    height: 412px;
    padding: 20px !important;
}

/* Stat Cards */

.stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #0e2741;
}

.stat-change {
    color: #22c55e;
    font-size: 14px;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px 0;
    padding: 0 20px;
}

.logo-container img {
    max-width: 150px;
    /* Adjust this value based on your logo size */
    height: auto;
}

/* exercise-library */

.exercise-form-container {
    padding: 0px 0px 16px 0px;
    border-bottom: 1px solid var(--Neutral-100, #cfd4d9);
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
}

.form-group {
    margin-bottom: 16px;
}

.exercise-label {
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    margin-bottom: 6px;
}

.exercise-input {
    width: 269px;
    height: 40px;
    padding: 10px 14px 10px 14px;
    border-radius: 6px;
    background: var(--Base-White, #ffffff);
    border: 1px solid var(--Neutral-100, #cfd4d9);
    box-shadow: 0px 1px 2px 0px #1118270f;
}

.button-group {
    display: flex;
    gap: 12px;
}

.apply-button {
    padding: 10px 16px 10px 16px;
    border-radius: 6px;
    border: none;
    background: var(--Primary-500, #008394);
    box-shadow: 0px 1px 2px 0px #1118270f;
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Base-White, #ffffff);
}

.clear-button {
    padding: 10px 16px 10px 16px;
    border-radius: 6px;
    background-color: inherit;
    border: 1px solid var(--Neutral-300, #b7bec6);
    box-shadow: 0px 1px 2px 0px #1118270f;
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
}

.exercise-card-container {
    display: flex;
}

.card-ancor {
    text-decoration: none;
}

.exercise-card {
    margin-bottom: 24px;
    /* max-width: 350px; */
    height: 268px;
    border-radius: 20px 20px;
    background: #ffffff;
}

.exercise-card-image {
    width: 100%;
    /* max-width: 350px; */
    height: 204px;
    border-radius: 20px 20px 0px 0px;
    object-fit: cover;
    background: #d9d9d9;
}

.exercise-card-text {
    padding: 16px;
    font-family: Inter;
    /* font-size: 24px; */
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #121416;
}

/* Period Dropdown Styles */
.period-dropdown {
    min-width: 94px;
}

.period-dropdown .custom-dropdown .dropdown-toggle {
    min-height: 32px;
    height: auto;
    min-width: 94px;
    background-color: initial;
    border-radius: 8px;
    border: 1px solid var(--Neutral-50, #e7e9ec);
    padding: 6px 12px;
    padding-right: 32px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #56687a;
    white-space: nowrap;
    display: flex;
    align-items: center;
    position: relative;
}

.period-dropdown .custom-dropdown .dropdown-toggle::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.period-dropdown .custom-dropdown .dropdown-menu {
    --bs-dropdown-min-width: auto;
    padding: 8px 0px 8px 0px;
}

.period-dropdown .custom-dropdown .dropdown-item {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    padding: 4px 16px 4px 30px;
    color: #111827;
}

.period-dropdown .form-select {
    border-radius: 10px;
    border: 1px solid #e7e9ec;
    padding: 8px 16px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #56687a;
    background-color: #ffffff;
    cursor: pointer;
}

.period-dropdown .form-select:focus {
    border-color: #008394;
    box-shadow: none;
}

.custom-dropdown .dropdown-toggle {
    border: 1px solid #cfd4d9;
    background-color: #ffffff;
    border-radius: 8px;
    /* padding: 14px 16px; */
    height: 48px;
    margin-bottom: 16px;
    background-image: url(../icons/select-dropdown-icon.svg);
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
    text-align: left;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #56687a;
}

.custom-dropdown .dropdown-toggle::after {
    display: none !important;
}

.custom-dropdown .dropdown-toggle:focus {
    border: 1px solid #008394;
    box-shadow: none;
}

.custom-dropdown .dropdown-toggle:active {
    border: 1px solid #008394;
    box-shadow: none;
    background-color: #ffffff;
    color: #56687a;
}

.custom-dropdown .dropdown-menu,
.custom-search-dropdown .dropdown-menu {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0px 24px 48px -4px #1118270f;
    padding: 8px 0;
    max-height: 296px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #f9fafb;
    background-color: #ffffff;

    scrollbar-width: thin;
    /* For Firefox */
    scrollbar-color: #cfd4d9 #ffffff;
    /* For Firefox */
}

/* Webkit (Chrome, Safari) scrollbar styles */
.custom-dropdown .dropdown-menu::-webkit-scrollbar,
.custom-search-dropdown .dropdown-menu::-webkit-scrollbar {
    width: 8px;
    /* Width of the scrollbar */
}

.custom-dropdown .dropdown-menu::-webkit-scrollbar-thumb,
.custom-search-dropdown .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #cfd4d9;
    /* Scrollbar color */
    border-radius: 4px;
    /* Rounded corners for the scrollbar */
}

.custom-dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover,
.custom-search-dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: #a6b0be;
    /* Scrollbar color on hover */
}

.custom-dropdown .dropdown-menu::-webkit-scrollbar-track,
.custom-search-dropdown .dropdown-menu::-webkit-scrollbar-track {
    background-color: #ffffff;
    /* Track color */
}

.custom-dropdown .dropdown-header {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--Neutral-500, #8793a0);
    padding: 8px 16px 8px 30px;
    margin-bottom: 4px;
}

.custom-dropdown .dropdown-item {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 16px 8px 30px;
    color: #111827;
    margin-bottom: 4px;
}

.dropdown-item.selected::before {
    content: "✓";
    /* Tick mark symbol */
    color: #008394;
    /* Green tick */
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.custom-dropdown .dropdown-item:hover {
    background-color: #f9fafb;
}

/* Stats Card Styles */
.stat-card {
    height: 172px;
    background-color: #ffffff;
    border: 1px solid #e7e9ec;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stats-row {
    gap: 11px !important;
}

.stat-card h3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #56687a;
    margin: 0;
}

.stat-metrics {
    display: flex;
    align-items: center;
    gap: 31px;
    justify-content: space-between;
    /* Changed from justify-content: flex-end */
    margin-left: 0;
    /* Remove margin-left: auto */
}

.stat-value {
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
    color: #0e2741;
}

.stat-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #3cd984;
}

.stat-change img {
    width: 21px;
    height: 21px;
}

.stat-card .stat-icon img {
    width: 24px;
    height: 24px;
}

.stat-card.cancelled-appointments h3 {
    margin-top: -14px;
    max-width: 0px;
}

.stat-card.cancelled-appointments .stat-metrics {
    margin-top: -8px;
    /* Adjust this value to move metrics up */
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: #e6f3f4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

/* Add negative color for decrease values */
.stat-change.negative {
    color: #f04438;
}

.appointments-card {
    height: 917px;
    background: #ffffff;
    border: 1px solid #e7e9ec;
    border-radius: 20px;
    padding: 16px;
}

.appointments-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #0e2741;
    margin-bottom: 24px;
}

/* Calendar Styles */

.calendar-dropdown {
    width: 120px;
}

.calendar-dropdown .custom-dropdown .dropdown-toggle {
    background: #e6f3f4;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    color: #008394;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    background-image: url("../icons/calender-dropdown.svg");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 24px;
    padding-right: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.calendar-dropdown .custom-dropdown .dropdown-menu {
    --bs-dropdown-min-width: auto;
    padding: 8px 0px 8px 0px;
}

.calendar-dropdown .custom-dropdown .dropdown-item {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    padding: 4px 16px 4px 30px;
    color: #111827;
}

.calendar-dropdown .form-select {
    background: #e6f3f4;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    color: #008394;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background-image: url("../icons/calender-dropdown.svg");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 24px;
    padding-right: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Remove default arrow in IE */
.calendar-dropdown .form-select::-ms-expand {
    display: none;
}

.calendar-dropdown .form-select:focus {
    box-shadow: none;
    background-color: #e6f3f4;
}

/* Add this after your calendar styles */
#calendar {
    position: relative;
    margin-bottom: 16px;
    /* Add some space between calendar and line */
}

#calendar::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #a2a1a8;
    margin: 5px 0;
    opacity: 0.1;
}

#calendar .fc-col-header {
    width: 100% !important;
}

#calendar .fc-scrollgrid-sync-table {
    width: 100% !important;
}

#calendar .fc-daygrid-body.fc-daygrid-body-unbalanced.fc-daygrid-body-natural {
    width: 100% !important;
}

/* Appointments List Styles */
.date-header {
    color: #56687a;
    font-size: 16px;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 20px;
}

.appointment-card {
    height: 96px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(172, 172, 172, 0.1);
    border-radius: 20px;
    margin-bottom: 12px;
    padding: 12px 0 12px 20px;
    overflow: hidden;
}

.appointments-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera by default */
.appointments-list::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* Show scrollbar only when scrolling (hover) */
.appointments-list:hover {
    scrollbar-width: thin;
    /* Firefox */
    -ms-overflow-style: auto;
    /* IE and Edge */
}

.appointments-list:hover::-webkit-scrollbar {
    width: 6px;
}

.appointments-list:hover::-webkit-scrollbar-track {
    background: #e6f3f4;
    border-radius: 10px;
}

.appointments-list:hover::-webkit-scrollbar-thumb {
    background: #008394;
    border-radius: 10px;
}

.appointments-list:hover::-webkit-scrollbar-thumb:hover {
    background: #006d7a;
}

.patient-image {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.appointment-details {
    flex: 1;
}

.patient-name {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(14, 39, 65, 1);
    margin: 0;
}

.treatment-type {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: rgba(86, 104, 122, 1);
    margin: 4px 0;
}

.appointment-time {
    font-weight: 400;
    line-height: 20px;
    font-size: 12px;
    color: rgba(159, 169, 179, 1);
    margin: 0;
}

.appointment-event {
    background: #008394;
    border: none;
    border-radius: 4px;
}

.appointments-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.right-section {
    display: flex;
        align-items: center;
        gap: 0px 16px;
        flex-wrap: wrap;
        justify-content: start;
}

.badge {
    border-radius: 24px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    background-color: var(--Primary-50, #e6f3f4);
    color: #008394;
    cursor: pointer;
    margin-bottom: 20px;
}

.calendar-section {
    background-color: #ffffff;
    border: 1px solid var(--Neutral-50, #e7e9ec);
    border-radius: 20px;
    padding: 20px 16px;
}

.my-calendar-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #56687a;
}

.practitioner-list {
    margin-top: 20px;
    padding-left: inherit;
}
.service-list {
    margin-top: 20px;
    padding-left: inherit;
}

.form-check-practitioner {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.form-check-practitioner .form-check-input {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--Neutral-100, #cfd4d9);
    background-color: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}
.form-check-service {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.form-check-service .form-check-input {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--Neutral-100, #cfd4d9);
    background-color: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

#sarah:checked {
    background: #d84cf7;
    border: 1px solid #d84cf7;
}

#benedict:checked {
    background: #225dcf;
    border: 1px solid #225dcf;
}

#bronson:checked {
    background: #3cd984;
    border: 1px solid #3cd984;
}

#andrew:checked {
    background: #f99f36;
    border: 1px solid #f99f36;
}

#hannah:checked {
    background: #f93642;
    border: 1px solid #f93642;
}

#kate:checked {
    background: #af52de;
    border: 1px solid #af52de;
}

#chris:checked {
    background: #ffcc00;
    border: 1px solid #ffcc00;
}

#stephen1:checked,
#louise:checked {
    background: #8a3ffc;
    border: 1px solid #8a3ffc;
}

/* Dropdown items */
.custom-search-dropdown .search-input {
    border: 1px solid #cfd4d9;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 14px 16px;
    height: 48px;
    background-image: url(./icons/Union.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
    text-align: left;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #56687a;
}

.custom-search-dropdown .dropdown-menu li {
    list-style: none;
    padding: 10px 16px;
    cursor: pointer;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #56687a;
}

.custom-search-dropdown .dropdown-menu li:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.new-patient-text {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.2px;
    color: #0e2741;
    margin-bottom: 16px;
}

.form-check-practitioner .form-check-input:checked::after {
    content: url("../icons/checkbox-tick.svg");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
}

.form-check .form-check-label,
.form-check-practitioner .form-check-label {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #0e2741;
}

.status-checkbox .form-check-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #111827;
}

.extended-calendar {
    background: #ffffff;
    border: 1px solid var(--Neutral-50, #e7e9ec);
    width: 100%;
    border-radius: 20px;
    padding: 20px;
    overflow: hidden;
}

#extended-calendar {
    width: 100%;
    height: 95%;
}

.extended-calendar {
    height: 100%;
    width: 100%;
}

.overwrite #selected-date {
    color: #008394;
}

.overwrite #extended-calendar {
    --fc-today-bg-color: none;
}

.date-container {
    background-color: #008394;
    color: var(--Base-White, #ffffff);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    margin-top: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.date-container .day {
    margin-right: 0.5rem;
}

.date-container .date {
    font-weight: bold;
}

.day {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--Neutral-600, #56687a);
}

.calendar-head {
    margin-left: 68px;
}

.fc-timegrid-slot {
    height: 40px !important;
}

.fc-timegrid-slot-label-cushion,
.fc-timeline-slot-cushion {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--Neutral-600, #56687a);
}

.fc-timegrid-slot-label-cushion::first-letter.fc-timeline-slot-cushion::first-letter {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--Neutral-600, #56687a);
}

.fc-timegrid-slot.fc-timegrid-slot-lane {
    box-shadow: 0px -1px 0px 0px #f2f2f2 inset !important;
}

#extended-calendar {
    margin-top: 10px;
    --fc-event-bg-color: none !important;
    --fc-event-border-color: none !important;
}

.custom-event {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 6px;
    /* border: 1px solid var(--Secondary-500, #d84cf7);
    background-color: #fbedfe; */
    border-radius: 4px;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

.event-type {
    /* color: var(--Neutral-900, #0e2741); */
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.event-patient {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    /* color: var(--Neutral-700, #3e5267); */
}

.event-time {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    /* color: var(--Neutral-600, #56687a); */
}

.add-payment-btn {
    height: 24px;
    padding: 12px 16px;
    border-radius: 24px;
    background-color: #e6f3f4;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: var(--Primary-500, #008394);
    display: flex;
    align-items: center;
    border: none;
}

.add-payment-btn:hover {
    background-color: #ccf0f3;
    color: var(--Primary-500, #008394);
}

.add-payment-btn:focus {
    background-color: #ccf0f3 !important;
    color: var(--Primary-500, #008394) !important;
    border: none !important;
}

.calendar-nav-icon {
    width: 20px;
    /* Adjust size as needed */
    height: 20px;
    vertical-align: middle;
}

/* Graph Card Styles */

.graph-card {
    background: #ffffff;
    border: 1px solid #e7e9ec;
    border-radius: 20px;
    padding: 16px;
}

.graph-card canvas {
    height: 304px !important;
}

.graph-title {
    font-size: 20px;
    font-weight: 600;
    color: #0e2741;
    margin: 0;
}

.sort-by {
    color: #56687a;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

.pad3 {
    padding: 0px 16px;
}

/* Patient Data Table Styles */
.patient-details-table td {
    padding: 8px 16px;
}

.patient-details-table {
    background-color: #ffffff;
    /* border: 1px solid #e7e9ec; */
    border-radius: 20px;
}

.patient-details-table th {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    padding: 16px;
}

.patient-details-table thead tr th:first-child {
    padding-left: 24px;
    min-width: 190px;
}

.patient-details-table thead tr th:nth-child(2) {
    min-width: 120px;
}

.patient-details-table thead tr th:nth-child(3) {
    min-width: 140px;
}

.patient-details-table thead tr th:nth-child(4) {
    min-width: 208px;
}

.patient-details-table thead tr th:last-child {
    min-width: 52px;
}

.patient-data-card {
    height: 399px;
    background: #ffffff;
    border: 1px solid #e7e9ec;
    border-radius: 20px;
    padding: 16px 0;
}

.patient-table-responsive {
    height: calc(100% - 60px);
    overflow-y: auto;
}

.sticky-header th {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    z-index: 1;
    border-bottom: 1px solid var(--Neutral-50, #e7e9ec);
}

.table-title {
    font-size: 20px;
    font-weight: 600;
    color: #0e2741;
    margin: 0;
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Scrollable Body Styles */

.patient-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
}

.patient-name-table {
    max-width: 150px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #0e2741;
}

.table-date {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #56687a;
}

.status-badge {
    padding: 2px 8px 2px 8px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    height: 20px;
    letter-spacing: 1px;
}

.status-badge.current {
    color: #2b5314;
    background: #e4fbcc;
    width: 80;
    height: 20;
    opacity: 1;
    gap: 6px;
    border-radius: 16px;
    padding: 2px 8px;
    text-align: center;
}

.status-badge.without-appointment {
    color: #c72b35;
    background: #fed7d9;
    width: 80;
    height: 20;
    opacity: 1;
    gap: 6px;
    border-radius: 16px;
    padding: 2px 8px;
    text-align: center;
}

.status-badge.discharged {
    color: #2b5314;
    background: #e4fbcc;
    width: 80;
    height: 20;
    opacity: 1;
    gap: 6px;
    border-radius: 16px;
    padding: 2px 8px;
    text-align: center;
}

.status-badge.cancelled {
    color: #c72b35;
    background: #fed7d9;
    width: 80;
    height: 20;
    opacity: 1;
    gap: 6px;
    border-radius: 16px;
    padding: 2px 8px;
    text-align: center;
}

.pending-renewal {
    color: #3e1c96;
    background: #ebe9fe;
    width: 80;
    height: 20;
    opacity: 1;
    gap: 6px;
    border-radius: 16px;
    padding: 2px 8px;
    text-align: center;
}

.btn-icon-more {
    width: 29.7px;
    height: 23.02px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-icon-more:hover {
    background: #f8f8f8;
}

.btn-icon {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-icon img {
    width: 18px;
    height: 18px;
}

/* Remove hover effect if not needed */
.btn-icon:hover {
    background: transparent;
}

/* exercise library exercise view */
.back-button-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.back-button {
    width: 154px;
    padding: 12px 16px 12px 16px;
    border: none;
    border-radius: 16px;
    background: var(--Primary-500, #008394);
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #ffffff;
}

.exercise-view-card {
    width: 100%;
    min-height: 813px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e7e9ec;
}

.exercise-view-container {
    padding: 24px 16px;
}

.custom-video-player {
    position: relative;
    /* Ensures absolute children are positioned relative to this container */
    max-width: 600px;
    /* Set your desired width */
    max-height: 281px;
    /* Set your desired height */
}

.video-player {
    width: 100%;
    /* Make the video fit the parent container */
    height: 100%;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.25);
}

.player-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: #a1a4af;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.player-logo {
    width: 25px;
    height: 25px;
}

.player-logo-container:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.exercise-header {
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

.exercise-header-container {
    margin-bottom: 16px;
    padding-bottom: 9px;
}

/* tabs */

.custom-tabs .nav-link {
    border: none !important;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741) !important;
    position: relative;
    transition: color 0.3s, border-bottom 0.3s;
    padding: 0px;
    margin-right: 32px;
    cursor: pointer;
}

.custom-tabs {
    position: relative;
    border-bottom: none;
    margin-bottom: 24px;
    padding-bottom: 8px;
    gap: 20px;
    gap: 20px;
}

.custom-tabs::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(162, 161, 168, 0.2);
}

.custom-tabs .nav-link.active {
    color: var(--Primary-500, rgba(0, 131, 148, 1)) !important;
    background: none;
    border: none;
}

.custom-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--Primary-500, rgba(0, 131, 148, 1));
}

.exercise-details {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    word-break: break-all;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, rgba(14, 39, 65, 1));
    margin-bottom: 24px;
}

.image-view {
    width: 100%;
    max-width: 350px;
    height: 204px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 24px;
    cursor: pointer;
}

/* program-builder */

.program-builder-content {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    background: var(--Base-White, #ffffff);
    border: 1px solid var(--Neutral-50, #e7e9ec);
}

.program-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #d1d5db;
    margin-bottom: 20px;
}

.program-builder-title {
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
}

.patient-management-table th,
td {
    border: none;
}

.patient-management-table thead tr th:last-child {
    border-left: 1px solid #e5e7eb;
    /* min-width: 62px; */
}

.patient-management-table thead tr th:first-child {
    /* min-width: 278px; */
}

.patient-management-table thead tr th:nth-child(2) {
    /* min-width: 218px; */
}

.patient-management-table thead tr th:nth-child(3) {
    /* min-width: 218px; */
}

.patient-management-table thead tr th:nth-child(4) {
    /* min-width: 262px; */
}

.patient-management-table th {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #4b5563;
}

.patient-management-table td {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
}

.invoices-table th,
td {
    border: none;
    white-space: nowrap;
}

.invoices-table thead tr th:last-child {
    border-left: 1px solid #e5e7eb;
    /* min-width: 62px; */
}

.invoices-table thead tr th:first-child {
    /* min-width: 200px; */
}

.invoices-table thead tr th:nth-child(2) {
    /* min-width: 280px; */
}

.invoices-table thead tr th:nth-child(3) {
    /* min-width: 275px; */
}

.invoices-table thead tr th:nth-child(4) {
    /* min-width: 293px; */
}

.invoices-table th {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #4b5563;
}

.invoices-table td {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
}

.custom-table th,
td {
    border: none;
}

.custom-table thead tr th:last-child {
    border-left: 1px solid #e5e7eb;
    min-width: 64px;
}

.custom-table thead tr th:first-child {
    min-width: 287px;
}

.custom-table thead tr th:nth-child(2) {
    min-width: 161px;
}

.custom-table thead tr th:nth-child(3) {
    min-width: 299px;
}

.custom-table thead tr th:nth-child(4) {
    min-width: 182px;
}

.custom-table th {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #4b5563;
}

.custom-table td {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
}

.banner-table th,
.class-table th,
.banner-table td,
.class-table td {
    border: none;
    white-space: nowrap;
}

.banner-table thead tr th:last-child,
.class-table thead tr th:last-child {
    border-left: 1px solid #e5e7eb;
    min-width: 166px;
}

/* Shared styles for the first column */
.banner-table thead tr th:first-child,
.class-table thead tr th:first-child {
    min-width: 200px;
}

/* Shared styles for specific column indices */
.banner-table thead tr th:nth-child(2),
.class-table thead tr th:nth-child(2) {
    min-width: 150px;
}

.banner-table thead tr th:nth-child(3),
.class-table thead tr th:nth-child(3) {
    min-width: 119px;
}

.banner-table thead tr th:nth-child(4),
.class-table thead tr th:nth-child(4) {
    min-width: 149px;
}

.banner-table thead tr th:nth-child(5),
.class-table thead tr th:nth-child(5) {
    min-width: 149px;
}

.banner-table thead tr th:nth-child(6),
.class-table thead tr th:nth-child(6) {
    min-width: 163px;
}

/* Shared header styles */
.banner-table th,
.class-table th {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #4b5563;
}

/* Shared cell styles */
.banner-table td,
.class-table td {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
}

.edit-image {
    margin-left: 16px;
    cursor: pointer;
}

.view-image {
    cursor: pointer;
}

.table-pagination {
    display: flex;
    justify-content: space-between;
}

.pagination-left-text-1,
.pagination-left-text-2 {
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.pagination-left-button {
    padding: 8px 14px 8px 14px;
    border-radius: 6px;
    background: var(--Base-White, #ffffff);
    border: 1px solid var(--Neutral-100, #cfd4d9);
    box-shadow: 0px 1px 2px 0px #1118270f;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    margin-right: 16px;
}

.pagination-left-text-1 {
    margin-right: 8px;
    color: #0e2741;
}

.pagination-down-arrow {
    width: 8px;
    height: 4.38px;
    margin-right: 4px;
    margin-left: 6px;
}

.pagination-first-button {
    padding: 8px 12px 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--Neutral-100, #cfd4d9);
    box-shadow: 0px 1px 2px 0px #1118270f;
    background: #ffffff;
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    margin-left: 8px;
}

.pagination-no-button {
    padding: 8px 12px 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--Neutral-100, #cfd4d9);
    box-shadow: 0px 1px 2px 0px #1118270f;
    background: #ffffff;
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    margin-left: 8px;
}

.page-active {
    border: 1px solid var(--Primary-300, #66b5bf);
    color: var(--Primary-500, #008394);
}

.pagination-left-arrow-button,
.pagination-right-arrow-button {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--Neutral-100, #cfd4d9);
    box-shadow: 0px 1px 2px 0px #1118270f;
    background: #ffffff;
}

.pagination-left-arrow-button {
    margin-left: 14px;
    margin-right: 6px;
}

/* add new program */

.add-program-button,
.add-patient-button,
.add-exercise-button,
.edit-exercise-button {
    padding: 12px 16px 12px 16px;
    border-radius: 16px;
    border: none;
    background: var(--Primary-500, #008394);
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Base-White, #ffffff);
    text-decoration: none;
    height: 48px;
    min-width: 120px;
    text-align: center;
}

.add-program-button:hover,
.add-patient-button:hover,
.add-exercise-button:hover,
.edit-exercise-button:hover {
    background-color: var(--Primary-600, #006d7a);
    color: #ffffff;
}

.add-program-button:active,
.add-patient-button:active,
.add-exercise-button:active,
.edit-exercise-button:active {
    background-color: #006d7a !important;
    color: #ffffff !important;
}

.add-program-button-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    margin-right: 2px;
}

/* add program page*/

.back-arrow-container {
    display: flex;
    margin-bottom: 20px;
}

.back-arrow {
    padding: 10px;
}

.new-program-card {
    width: 100%;
    min-height: 800px;
    border-radius: 20px;
    background: var(--Base-White, #ffffff);
    border: 1px solid #e7e9ec;
}

.new-program-container {
    padding: 24px;
}

.form-group-1 {
    margin-bottom: 24px;
}

.add-program-input {
    width: 100%;
    max-width: 584px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--Neutral-200, #cfd4d9);
}

.add-program-input-1 {
    width: 100%;
    max-width: 584px;
    height: 101px;
    border-radius: 8px;
    border: 1px solid var(--Neutral-200, #cfd4d9);
}

.add-program-input::placeholder,
.add-program-input-1::placeholder,
.form-label {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10000000149011612px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, rgba(86, 104, 122, 1));
}

.add-program-form-button-container {
    display: flex;
    justify-content: space-between;
}

.add-program-next-button {
    width: 161px;
    height: 48px;
    border-radius: 16px;
    background: #008394;
    /* box-shadow: 0px 6px 12px 0px #336cfb29; */
    border: none;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.2px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #ffffff;
}

.add-program-edit-button {
    width: 109px;
    height: 48px;
    background-color: #ffffff;
    border: 1px solid #b7bec6;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.2px;
    text-align: center;
    color: #56687a;
}

.add-program-cancel-button {
    width: 92px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid var(--Error-500, #f93642);
    background: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.20000000298023224px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Error-500, #f93642);
    text-decoration: none;
}

.add-program-form-button-container {
    width: 100%;
    max-width: 584px;
}

.exercise-card-add-program {
    margin-bottom: 24px;
    max-width: 350px;
    height: 268px;
    border-radius: 20px 20px;
    background: #f6f6f6;
    position: relative;
    cursor: pointer;
}

.exercise-details-add-image {
    position: absolute;
    right: 12px;
    bottom: 75.5px;
    cursor: pointer;
}

/* overview */
.overview-tab {
    width: 100%;
    max-width: 802px;
}

.overview-header-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 12px 8px 12px 8px;
    border-radius: 6px;
    background: #f9fafb;
    margin-bottom: 8px;
}

.overview-title {
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
}

.overview-draft {
    margin-right: 8px;
    padding: 0px 4px 0px 4px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    cursor: pointer;
}

.overview-edit {
    padding: 0px 4px 0px 4px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Primary-500, #008394);
    cursor: pointer;
}

.overview-content-1 {
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #a2a1a81a;
    word-wrap: break-word;
}

.overview-content-header {
    margin-bottom: 5px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
}

.overview-content-header-text {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
    word-wrap: break-word;
}

.overview-content-2 {
    padding-bottom: 8px;
    word-wrap: break-word;
}

.overview-content-text {
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

.overview-exercise-header-container {
    display: flex;
    margin-bottom: 12px;
}

.overview-exercise-header-image {
    width: 63px;
    height: 64px;
    border-radius: 8px;
}

.overview-exercise-header {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
}

.overview-exercise-details-header-1 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
}

.overview-exercise-details-header-2 {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

.overview-exercise-details {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.details-overview {
    display: flex;
    flex-direction: column;
    width: 171px;
    border-bottom: 1px solid #a2a1a81a;
}

.reps-header {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    margin-bottom: 10px;
}

.reps-data {
    margin-bottom: 10px;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

.content-in-exercise-details {
    border-bottom: 1px solid rgba(162, 161, 168, 0.1);
    margin-bottom: 12px;
}

.overview-buttons-container {
    width: 100%;
    max-width: 584px;
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

/* Static Content Card Styles */
/* .card {
    max-width: 1080px;
    padding: 20px 30px;
    border-radius: 20px;
    border: none;
    background-color: #ffffff;
    box-shadow: 6px 6px 54px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-title {
    font-size: 20px;
    font-weight: 500;
    color: #0e2741;
    line-height: 24px;
    margin-bottom: 20px;
}

.second-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #0e2741;
    margin-bottom: 20px;
}

.card-text {
    font-size: 14px;
    color: #56687a;
    line-height: 20px;
    max-height: 200px;
    overflow-y: auto;
}

.edit-btn {
    width: 161px;
    height: 48px;
    border-radius: 8px;
    box-shadow: 0px 6px 12px rgba(51, 108, 251, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-top: 20px;
}

.blog-card {
    height: 350px;
    border-radius: 20px;
    border: none;
    background-color: #ffffff;
} */

/* Static Content Card Styles */
.card {
    max-width: 1080px;
    padding: 20px 30px;
    border-radius: 20px;
    border: none;
    background-color: #ffffff;
    box-shadow: 6px 6px 54px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    font-family: Inter, serif;
}

.second-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #0e2741;
    margin-bottom: 20px;
}

.card-text {
    font-size: 14px;
    color: #56687a;
    line-height: 20px;
    max-height: 200px;
    overflow-y: auto;
}

.edit-btn,
.save-publish-btn {
    width: 161px;
    height: 48px;
    border-radius: 8px;
    /* box-shadow: 0px 6px 12px rgba(51, 108, 251, 0.16); */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-top: 20px;
}

.save-btn {
    width: 96px;
    height: 48px;
    border-radius: 8px;
    /* box-shadow: 0px 6px 12px rgba(51, 108, 251, 0.16); */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-top: 20px;
    background-color: #a4d6dd;
    color: #0e2741;
}

.cancel-btn {
    width: 92px;
    height: 48px;
    border-radius: 8px;
    /* box-shadow: 0px 6px 12px rgba(51, 108, 251, 0.16); */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-top: 20px;
    background-color: #ffffff;
    color: var(--Error-500, #f93642);
    border: 1px solid var(--Error-500, #f93642);
}

.save-btn:hover {
    background-color: var(--Primary-600, #80c3cc) !important;
    color: #0e2741 !important;
}

.save-btn:active {
    background-color: var(--Primary-600, #80c3cc) !important;
    color: #0e2741 !important;
}

.cancel-btn:hover {
    background-color: #f4e5e5;
    color: var(--Error-500, #f93642);
    border: 1px solid var(--Error-500, #f93642);
}

.cancel-btn:active {
    background-color: #f4e5e5;
    color: var(--Error-500, #f93642);
    border: 1px solid var(--Error-500, #f93642);
}

.blog-card {
    height: 350px;
    border-radius: 20px;
    border: none;
    background-color: #ffffff;
}

/* Blog */

.blog-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background: #ffffff;
    height: 567px;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-title {
    font-size: 32px;
    line-height: 40px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #121416;
}

.blog-image {
    position: relative;
    height: 253px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-title-overlay {
    width: 170px;
    height: 40px;
    position: absolute;
    top: 18px;
    left: 29px;
    color: black;
    font-size: 20px;
    font-weight: 400;
    line-height: 24.2px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-content {
    padding: 16px 16px 46px 16px;
}

.author-info {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    background-color: #d9d9d9;
    border-radius: 50%;
    margin-right: 12px;
}

.author-details {
    height: 44px;
    padding-top: 3px;
}

.author-name {
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: #121416;
    margin: 0;
}

.post-date {
    color: #6c757d;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    margin-top: 4px;
}

.blog-excerpt {
    color: #6c757d;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 23.95px;
}

.view-post-link {
    color: #121416;
    text-decoration: none;
    border-bottom: 2px solid #121416;
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 2px;
}

.view-post-link:hover {
    opacity: 0.7;
}

/* Blog View */

.blog-view {
    /* height: 498px; */
    border-radius: 20px;
    background-color: #ffffff;
    padding: 24px 16px 24px 16px;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid #e7e9ec;
}

.rehab-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 24px;
    line-height: 22px;
}

.rehab-description {
    color: #0e2741;
    line-height: 24px;
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 400;
}

.rehab-image {
    width: 100%;
    height: 400px;
    max-height: 300px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 40px;
}

.rehab-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.invoice-table-data,
.payment-table-data {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.blog-title-edit {
    display: flex;
    justify-content: space-between;
}

.blog-title-edit .add-program-button {
    height: 32px !important;
    width: 103px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
}

/* view invoice */

.invoice-container {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.inner-invoice-container {
    padding: 0px;
    max-width: 584px;
}

.invoice-header .invoice-number {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
}

.billing-details h5,
.company-details h5 {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.2px;
    color: #0e2741;
    margin-bottom: 16px;
}

.billing-details p,
.company-details p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #485563;
}

.abn-text {
    font-weight: 700 !important;
}

.invoice-details {
    max-width: 800px;
}

.invoice-row {
    display: flex;
    margin-bottom: 16px;
    align-items: baseline;
}

.label {
    width: 220px;
    color: #4b5563;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.value {
    color: #4b5563;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.issue-date {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.2px;
    color: #0e2741;
}

.total-amount {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #0e2741;
    letter-spacing: 0.2px;
}

.invoice-table {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.invoice-table th {
    background-color: #cce6ea;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #4b5563;
    padding: 8px;
    height: 32px;
    white-space: nowrap;
}

.invoice-table th:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.invoice-table th:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.invoice-table td {
    padding: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #111827;
    height: 36px;
    white-space: nowrap;
}

.amount-summary {
    margin-top: 20px;
}

.amount-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.payment-section h5,
p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
}

.total-payment {
    font-weight: 500 !important;
}

.logo-medicare {
    width: 297px;
    height: 102px;
    border-radius: 12px;
    background-color: #e7e9ec;
    display: flex;
    justify-content: center;
    align-items: center;
}

.medicare-logo {
    height: 62px;
}

.abn-text {
    color: #6c757d;
    font-size: 14px;
}

/*add invoice*/

.invoice-form {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #cfd4d9;
    padding: 14px 16px;
    /* margin-bottom: 16px; */
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #56687a;
}

.form-select {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #cfd4d9;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #56687a;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../icons/select-dropdown-icon.svg");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}

textarea.form-control {
    height: 101px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 5px 0;
}

.total-row strong {
    color: #333;
}

.invoice-btn {
    height: 48px;
    background-color: #008394;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    border-radius: 8px;
}

.btn-create {
    background-color: #008394;
    color: #ffffff;
    padding: 10px 25px;
}

.btn-create:hover,
.btn-create:active {
    background-color: var(--Primary-600, #006d7a) !important;
    color: #ffffff !important;
}

.btn-draft {
    background-color: #a4d6dd;
    color: #0e2741;
    padding: 10px 25px;
}

.btn-cancel {
    background-color: #ffffff;
    color: #f93642;
    border: 1px solid #f93642;
    padding: 10px 25px;
}

.btn-cancel:hover,
.btn-cancel:active {
    background-color: #f93642 !important;
    color: #ffffff !important;
    border: 1px solid #f93642 !important;
}

.buttons-container {
    margin-top: 16px;
    display: flex;
    gap: 16px;
}

/*patient management*/
.nav-pills {
    height: 40px;
    border-radius: 8px;
    background-color: #efefef;
    padding: 4px;
}

.nav-pills .nav-link {
    padding: 6px 12px 6px 12px;
    color: #56687a;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    background: none;
    border-radius: 6px;
}

.nav-pills .nav-link.active {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 6px 12px 6px 12px;
    color: #008394;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.06);
}

.search-section {
    border-radius: 8px;
    padding-bottom: 16px;
}

.search-section label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #56687a;
    margin-bottom: 6px;
}

.patient-search-form {
    height: 40px;
    border-radius: 6px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #cfd4d9;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.06);
}

.btn-apply {
    height: 40px;
    background-color: #008394;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.06);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.btn-clear {
    height: 40px;
    background-color: #ffffff;
    color: #56687a;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.06);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border: 1px solid #b7bec6;
}

.btn-apply:hover {
    background-color: var(--Primary-600, #006d7a);
    color: #ffffff !important;
}

.btn-apply:active {
    background-color: #006d7a !important;
    color: #ffffff !important;
}

.btn-clear:hover {
    border: 1px solid #b7bec6;
}

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.search-section .form-select {
    height: 40px;
    padding: 10px 14px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #0e2741;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.06);
}

.patient-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #0e2741;
}

.patient-name-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
}

/* view patient start*/

.patient-header {
    background-color: #e6f3f4;
    background-image: url("../images/header-background.svg");
    /* Replace with your specific image filename */
    background-size: cover;
    /* This will ensure the image covers the entire header */
    background-position: center;
    /* Centers the background image */
    background-repeat: no-repeat;
    /* Prevents the image from repeating */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
    /* height: 106px; */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    /* justify-content: center !important; */
}

.patient-profile {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #2a9d8f;
    overflow: hidden;
    border: 2px solid #99cdd4;
    color: #ffe6d5;
}

.patient-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.patient-info h1 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
    letter-spacing: -2%;
    color: #111827;
    line-height: 26px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    position: relative;
}

.info-grid::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: #d1d5db;
    transform: translateX(-50%);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.patient-info .info-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #4b5563;
}

.patient-info .info-value {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #111827;
}

.btn-book {
    background-color: #008394;
    color: #ffffff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
}

.custom-btn {
    height: 40px;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.btn-book:hover {
    background-color: var(--Primary-600, #006d7a);
    color: #ffffff !important;
}

.btn-book:active {
    background-color: #006d7a !important;
    color: #ffffff !important;
}

.btn-alert,
.btn-alert:hover,
.btn-alert:active {
    border: 1px solid var(--Primary-500, #008394);
    background-color: var(--Primary-50, #e6f3f4);
    color: var(--Primary-500, #008394) !important;
}

.btn-edit,
.btn-edit:hover,
.btn-edit:active {
    border: 1px solid var(--Neutral-100, #cfd4d9);
    color: var(--Neutral-600, #56687a) !important;
}

.edit-btn-img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.sidebar2 {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    max-width: 254px;
    border: 1px solid #e7e9ec;
}

.sidebar2 h6 {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--Neutral-900, #0e2741);
    cursor: pointer;
}

.sidebar2-menu {
    list-style: none;
    padding: 0;
}

.sidebar2-menu li {
    margin-bottom: 10px;
}

.sidebar2-menu a {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--Neutral-600, #56687a);
    text-decoration: none;
    display: block;
    padding: 8px 38px;
    position: relative;
}

.sidebar2-menu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: 1px;
    background-color: #d1d5db;
}

.sidebar2-menu .active,
.sidebar2-menu h6.active,
.sidebar2-menu a.active {
    color: var(--Primary-500, rgba(0, 131, 148, 1));
}

.details-section {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 20px;
    height: 100%;
    border: 1px solid #e7e9ec;
}

.details-section h5 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 3px;
    column-gap: 20px;
    margin-top: 20px;
}

.detail-item .detail-label {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #56687a;
}

.detail-item .detail-value {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #0e2741;
}

.detail-label {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 5px;
}

.detail-value {
    color: #212529;
    font-weight: 500;
}

/*add program modal start*/
/*add program modal */

.exercise-details-modal-dialog {
    max-width: 500px;
}

.exercise-details-modal-content {
    box-shadow: 0px 12px 40px 0px rgba(37, 40, 43, 0.32);
}

.exercise-details-modal-header {
    padding: 24px;
}

.exercise-details-modal-header .modal-title {
    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.20000000298023224px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, rgba(14, 39, 65, 1));
}

.exercise-details-modal-header .btn-close {
    padding: 0px;
    width: 24px;
    height: 24px;
    color: rgba(82, 87, 92, 1);
}

.exercise-details-modal-header .btn-close:focus {
    box-shadow: none;
}

.exercise-details-modal-content .modal-body {
    padding: 24px;
    padding-bottom: 0px;
}

.add-program-modal-body-title {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.20000000298023224px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
    margin-bottom: 16px;
}

.add-program-modal-body-text {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
    margin-bottom: 16px;
}

.modal-body-seperator {
    margin-bottom: 16px;
}

.add-program-modal-image-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.add-program-modal-image {
    width: 218px;
    height: 204px;
    border-radius: 16px;
    object-fit: cover;
}

.exercise-details-modal-content .modal-body .custom-video-player {
    width: 100%;
    height: 204px;
    margin-bottom: 16px;
}

.add-program-modal-footer {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    /* padding-top: 0px !important;
    padding: 24px;
    display: flex;
    justify-content: space-between; */
}

.add-program-modal-footer-membership {
    /* display: flex;
    justify-content: space-between;
    margin-bottom: 24px; */
    padding-top: 0px !important;
    padding: 24px;
    display: flex;
    justify-content: space-between;
}

.add-program-modal-form {
    display: flex;
    flex-direction: column;
}

.add-program-modal-form-select {
    border-radius: 8px;
    height: 48px;
    border: 1px solid var(--Neutral-200, #cfd4d9);
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10000000149011612px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    padding: 12px 16px;
    box-sizing: border-box;
}

.half-select {
    max-width: 108px;
    border-radius: 8px 0px 0px 8px;
    height: 48px;
}

.modal-form-group {
    margin-bottom: 24px;
    display: flex;
    position: relative;
}

.add-program-modal-form-input-1 {
    max-width: 100%;
    border-radius: 0px 8px 8px 0px;
    height: 48px;
    border: 1px solid #cfd4d9;
}

.add-program-modal-form-input-1::placeholder {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10000000149011612px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-500, #8793a0);
}

.add-program-modal-form-input {
    border-radius: 8px;
    border: 1px solid var(--Neutral-200, #cfd4d9);
    height: 48px;
}

.add-program-modal-form-input::placeholder {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10000000149011612px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
}

.add-program-modal-form-checkbox-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modal-form-checkbox-group {
    display: flex;
    align-items: center;
    max-width: 331px;
    margin-top: 12px;
}

.modal-form-checkbox-group .form-check-input {
    min-width: 20px;
    min-height: 20px;
    border-radius: 4px;
    margin: 0px;
    border: 1px solid var(--Neutral-100, #cfd4d9);
    background: var(--Base-White, #ffffff);
    cursor: pointer;
}

.form-check-input:focus {
    box-shadow: none;
    border: 1px solid var(--Neutral-100, #cfd4d9);
}

.form-check-input:checked {
    box-shadow: none;
    background-color: var(--Primary-500, #008394);
    border-color: var(--Primary-500, #008394);
    background-image: url(/icons/Check.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.modal-form-check-label {
    margin-left: 8px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
    max-width: 80px;
    width: 100%;
    cursor: pointer;
}

.modal-form-checkbox-label {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10000000149011612px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
}

.modal-select-dropdown-image-1 {
    position: absolute;
    top: 12px;
    left: 72px;
}

.modal-select-dropdown-image {
    position: absolute;
    top: 12px;
    right: 18px;
    width: 18.58px;
    height: 24px;
    object-fit: cover;
}

.active-exercise-details-card {
    border-top: none !important;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 2px solid var(--Primary-500, #008394);
}

.button-radius-8 {
    border-radius: 8px !important;
}

/* add program modal end*/

/*Assign Program*/

.add-program-table {
    color: var(--Primary-500, #008394) !important;
    font-weight: 600 !important;
    cursor: pointer;
}

/*Assign Program End*/

.add-btn-patient,
.add-btn-file,
.add-btn-invoice,
.add-btn-payment {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #008394;
    text-decoration: none;
    cursor: pointer;
}

/* view patient end*/

/* Add Payment Start*/

.paid-at {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #56687a;
}

.calendar-icon,
.time-icon,
.datepicker-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 2;
    /* Ensure icon stays above the input */
}

.payment-source {
    height: 42px;
    background-color: #cce6ea;
    padding: 0px 8px;
    border-radius: 6px;
    color: #4b5563;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    /* Adjust text color as needed */
}

.flatpickr-wrapper {
    width: 100% !important;
    display: inline !important;
    /* Override the inline-block */
}

.custom-gap {
    --bs-gutter-x: 46px !important;
    /* Sets the gap to exactly 46px */
}

/* Clear button positioning */
.calendar-clear-button {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    display: none;
    z-index: 2;
    /* Ensure clear button stays above input */
}

/* Optional: Add these styles if you want to customize the flatpickr calendar position */
.flatpickr-calendar {
    max-width: 320px;
    /* Or your preferred max-width */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* Adjust the calendar position if needed */
.flatpickr-calendar.open {
    z-index: 1000;
    /* Ensure calendar appears above other elements */
}

.date-input-wrapper {
    position: relative;
    width: 100%;
}

.date-input-wrapper input,
.time-input-wrapper input {
    cursor: pointer;
}

.input-with-prefix {
    background-image: url("./icons/dollorsign.svg");
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 10px;
    padding-left: 32px;
}

/*Add Payment End*/

/*view Payment inner start */
.inner-div {
    max-width: 584px;
}

/*view payment inner end*/

/* File Listing Table Styles Start */

.file-listing-table {
    border-collapse: separate;
    border-spacing: 0 12px;
}

.file-listing-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    background-color: #f9f9f9;
}

.file-listing-table td {
    vertical-align: middle;
    padding: 0 16px;
    /* Add borders to all cells to create a complete row background */
    background-color: inherit;
    width: 25%;
}

.file-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.file-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-icon {
    width: 39px;
    height: 39px;
}

.file-name {
    color: #008394;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.file-size,
.file-owner,
.file-date {
    color: #111827;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.actions-cell {
    padding-left: 16px !important;
    white-space: nowrap;
    text-align: right;
    min-width: 100px;
    /* Ensure minimum width for the actions */
}

.actions-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.action-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-icon {
    width: 16px;
    height: 16px;
}

.file-listing-table td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.file-listing-table td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* File Listing Table Styles End */

/* View Appointments Detilals View Icon Start */
.view-appointment-modal-body {
    padding: 24px;
    margin-bottom: 22px;
}

.section-title {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.2px;
    font-weight: 700;
    color: var(--Neutral-900, #0e2741);
}

.info-value,
.text-muted,
.form-check-label {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #4b5563;
}

.info-value,
.form-check-label {
    color: #111827;
}

.status-checkbox .form-check-input:checked {
    background-color: #008394;
    border-color: #008394;
    background-image: url("./icons/dot.svg") !important;
    background-size: 8px;
}

.status-checkbox .form-check-input:focus {
    border-color: #008394;
    box-shadow: 0 0 0 0.25rem rgba(59, 139, 137, 0.25);
}

.text-primary {
    color: var(--Primary-500, #008394) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

/* File Listing Table Styles End */

/* Add New Appointment Styles End */
.add-new-appointment {
    padding: 24px;
}

.search-patient {
    background-image: url("./icons/Union.svg");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

.time-separator {
    text-align: center;
    padding: 0 10px;
    color: #6b7280;
    font-size: 16px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-gap {
    --bs-gutter-x: 0px !important;
    /* Sets the gap to exactly 46px */
}

.health-fund,
.choose-practitioner {
    position: relative;
}

.health-fund input.health-fund-input {
    padding: 16px 16px 4px 28px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    background-image: url("./icons/dollorsign.svg");
    background-repeat: no-repeat;
    background-position: 14px 21px;
    background-size: 10px;
    height: 48px;
}

.choose-practitioner input::placeholder {
    color: #0e2741;
}

.choose-practitioner input.choose-practitioner-input {
    padding: 16px 16px 4px 16px;
}

.health-fund label,
.choose-practitioner label {
    position: absolute;
    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.04px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    top: 4px;
    left: 16px;
}

/* Add New Appointment Styles End */

/* Add Program Assign Styles Start */

.text-secondary {
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.2px;
}

.text-repeat {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.2px;
    color: #00343b;
}

.days-selector {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.day-item {
    min-width: 48px;
    padding: 8px 12px;
    border: 1px solid var(--Neutral-200, #cfd4d9);
    border-radius: 8px;
    text-align: center;
    color: var(--Neutral-600, #56687a);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.day-item:hover {
    border-color: #9ca3af;
}

/* Smooth transition for showing/hiding repeat section */
#repeatSection {
    transition: all 0.3s ease;
    opacity: 1;
}

#repeatSection[style*="none"] {
    opacity: 0;
}

/* Style for active day selection */
.day-item.active {
    color: #ffffff;
    border-color: #9ca3af;
    background-color: var(--Primary-500, #008394);
}

/* Add Program Assign Styles End */

/* Add Patient Styles End */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo-upload-container {
    display: flex;
    align-items: center;
    justify-content: start;
    cursor: pointer;
}

.placeholder-img {
    max-width: 104px;
    max-height: 104px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.placeholder-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.placeholder-img .remove-photo {
    /* position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(220, 53, 69, 0.8);
    padding: 5px; */

    font-size: 20px;
    position: absolute;
    top: 0;
    padding: 0;
    right: 3px;
    z-index: 10;
    background: none;
    border: 0;
    color: red;
    display: none;
}

.alert {
    height: 52px;
    border: 1px solid var(--Success-200, #b1f0ce);
    background-color: var(--Success-50, #ecfbf3);
    border-radius: 20px;
    padding: 16px 0px 16px 24px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0.1px;
    color: #0e2741;
}

.btn-close {
    /* background: none; */
    border: none;
    padding: 15px !important;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.btn-close:focus {
    box-shadow: none;
}

.btn-close:hover .cross-icon {
    opacity: 0.8;
}

.alert-container {
    margin-top: 24px;
    width: 100%;
}

/* Add Patient  Styles End */

/* view details treatment note style start */

.treatment-notes-view-details-header {
    display: flex;
    justify-content: space-between;
}

.treatment-notes-view-details-link {
    cursor: pointer;
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Primary-500, #008394);
}

.treatment-notes-view-details-search-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.treatment-notes-view-details-search-container .form-control {
    height: 50px;
    padding: 13px 16px 13px 50px;
    border-radius: 10px;
    border: 1px solid var(--Neutral-50, #e7e9ec);
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    background-image: url("/icons/Union.svg");
    background-repeat: no-repeat;
    background-position: left 16px center;
}

.treatment-notes-view-details-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 0px;
}

.treatment-notes-view-details-grid .detail-item hr,
.treatment-notes-detail-item hr {
    margin-top: 10px;
    margin-bottom: 8px;
}

.overview-header-container {
    align-items: center;
}

.treatment-notes-view-details-content {
    margin-bottom: 30px;
}

.treatment-notes-view-details-content-header-1 {
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
}

.treatment-notes-view-details-content-header-2 {
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Primary-500, #008394);
    padding: 12px 0px;
    margin-top: 4px;
}

.treatment-notes-view-details-content-text {
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

/* select-option */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-header {
    display: flex;
    align-items: center;
    border: 1px solid var(--Neutral-50, #e7e9ec);
    cursor: pointer;
    height: 50px;
    padding: 13px 16px 13px 16px;
    border-radius: 10px;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
}

.select-search-icon {
    margin-right: 10px;
}

.select-down-icon {
    margin-left: auto;
}

.select-options {
    display: none;
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 256px;
    overflow: hidden;
    transition: dispaly 0.3s ease-out;
    padding: 8px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #f9fafb;
    box-shadow: 0px 6px 16px -6px #11182714;
}

.select-options li {
    height: 40px;
    padding: 10px 14px 10px 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.select-options li .form-check-input {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0px;
}

.form-check-label {
    cursor: pointer;
}

.select-options li .form-check-input:checked {
    background-size: 11.2px;
}

.select-wrapper.open .select-options {
    display: block;
    z-index: 2;
    overflow-y: scroll;
    transition: display 0.3s ease-in;
}

.select-options li .form-check-label {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #111827;
}

/* view details treatment note style end */

/* setting css start*/

.setting-container {
    width: 100%;
    padding: 20px;
    min-height: 873px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--Neutral-50, #e7e9ec);
}

.setting-container .custom-tabs {
    margin-bottom: 20px;
}

.setting-profile-content {
    max-width: 768px;
}

.setting-profile-content .detail-item hr {
    margin-top: 10px;
    margin-bottom: 20px;
}

.notification-content {
    max-width: 430px;
}

.notification-content .form-switch {
    display: flex;
    padding-left: 0px;
    justify-content: space-between;
}

.notification-content .form-check-label {
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
}

.notification-content .form-switch .form-check-input {
    width: 36px;
    height: 20px;
    border: none;
    background-color: var(--Neutral-100, #cfd4d9);
    background-image: url("/icons/dot.svg");
    background-position: left 2px center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
}

.notification-content .form-switch .form-check-input:checked {
    background-position: right 2px center;
    background-color: var(--Primary-500, #008394);
}

.edit-profile-form .form-label {
    margin-bottom: 12px;
}

.edit-profile-form hr {
    margin-top: 4px;
    margin-bottom: 20px;
}

.health-fund {
    position: relative;
}

.health-fund input {
    padding: 20px 16px 4px 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    background-image: url("./icons/dollorsign.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 10px;
    /* Increased the size of the icon */
}

.health-fund label {
    position: absolute;
    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.04px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    top: 4px;
    left: 16px;
}

.health-fund label {
    position: absolute;
    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.04px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    top: 4px;
    left: 16px;
}

.editProfile-form-group input {
    height: 48px;
    padding: 20px 16px 4px 16px;
    border-radius: 16px;
    background: var(--Neutral-25, #f8f8f8);
    border: 1px solid var(--Neutral-200, #cfd4d9);
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

.editProfile-form-group select,
.editGender-form-group .custom-dropdown .dropdown-toggle {
    height: 48px;
    padding: 20px 16px 4px 16px;
    border-radius: 16px;
    background: var(--Neutral-25, #f8f8f8);
    border: 1px solid var(--Neutral-200, #cfd4d9);
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
    background-image: url(/icons/chevron-down.svg);
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.editProfile-form-group label,
.editGender-form-group label {
    position: absolute;
    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.03999999910593033px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    top: 1px;
    left: 16px;
    padding: 2px;
    width: 93%;
    background: var(--Neutral-25, #f8f8f8);
}

.editProfile-form-group:has(input:disabled) label,
.editGender-form-group:has(input:disabled) label
 {
    background: var(--bs-form-control-disabled-bg);
}

/*.editProfile-form-group:has(input[readonly]) label,*/
/*.editGender-form-group:has(input[readonly]) label{*/
/*    background: var(--bs-form-control-disabled-bg);*/
/*}*/

/*.editProfile-form-group:has(input[readonly]):focus ,*/
/*.editGender-form-group:has(input[readonly]):focus{*/
/*    background: var(--bs-form-control-disabled-bg) !important;*/

/*}*/


/*.form-control:read-only, .form-control:read-only:focus {*/
/*    background-color: var(--bs-form-control-disabled-bg);*/
/*    opacity: 1;*/
/*}*/

.form-control:focus{
    background-color: var(--Neutral-25, #f8f8f8);
}



.editProfile-form-group,
.editGender-form-group {
    position: relative;
}

.setting-form-button {
    margin-top: 30px;
}

.setting-form-button .add-program-next-button {
    width: 101px;
}

.setting-form-button .add-program-cancel-button {
    width: 92px;
}

/* service-css */

.service-table thead tr th:first-child {
    min-width: 258px;
}

.service-table thead tr th:nth-child(2) {
    min-width: 150px;
}

.service-table thead tr th:nth-child(3) {
    min-width: 192px;
}

.service-table thead tr th:nth-child(4) {
    min-width: 186px;
}

.service-table thead tr th:nth-child(5) {
    min-width: 200px;
}

/* practitioner css */

.practitioner-table thead tr th:first-child {
    min-width: 278px;
}

.practitioner-table thead tr th:nth-child(2) {
    min-width: 414px;
}

.practitioner-table thead tr th:nth-child(3) {
    min-width: 278px;
}

.practitioner-table thead tr th:nth-child(4) {
    min-width: 64px;
}

/* view-practitioner-css */

.view-practitioner-container {
    width: 100%;
    min-height: 827px;
    padding: 20px 20px 20px 20px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--Neutral-50, #e7e9ec);
}

/* subscription details css */
.subscription-details-card {
    max-width: 640px;
    border-radius: 20px;
    border: 1px solid var(--Neutral-50, #e7e9ec);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.setting-subscription-header {
    font-family: Inter;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
    margin-bottom: 20px;
}

.selected-subscription-plan {
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Primary-500, #008394);
    margin-bottom: 8px;
}

.selected-plan-text {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
}

.subscription-plan {
    display: flex;
    flex-direction: column;
}

.card-edit-button {
    width: 103px;
    padding: 6px 12px 6px 12px;
    border-radius: 16px;
    background: var(--Primary-500, #008394);
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Base-White, #ffffff);
    border: none;
}

.card-info-container {
    max-width: 400px;
}

.card-info-row {
    display: flex;
    margin-bottom: 16px;
}

.card-info-title {
    width: 125px;
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

.card-info-text {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

.setting-invoice-table thead tr th:first-child {
    min-width: 110px;
}

.setting-invoice-table thead tr th:nth-child(2) {
    min-width: 150px;
}

.setting-invoice-table thead tr th:nth-child(3) {
    min-width: 90px;
    border: none;
}

.upgrade-modal .modal-dialog {
    max-width: 777px;
}

.upgrade-modal-card {
    max-width: 357.62px;
    padding: 32.99px;
    border-radius: 21.29px;
    border: 1.06px solid var(--Neutral-50, #e7e9ec);
    margin-bottom: 24px;
}

.modal-plan-title {
    width: 80.8px;
    padding: 6.39px 14.9px 6.39px 14.9px;
    border-radius: 28.74px;
    background: var(--Primary-500, #008394);
    font-family: Inter;
    font-size: 12.77px;
    font-weight: 600;
    line-height: 15.46px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Base-White, #ffffff);
    margin-bottom: 24px;
}

.modal-plan-text {
    font-family: Inter;
    font-size: 12.77px;
    font-weight: 500;
    line-height: 18.52px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000000;
    margin-bottom: 24px;
}

.modal-plan-price {
    font-family: Inter;
    font-size: 38.32px;
    font-weight: 700;
    line-height: 46.37px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000000;
    margin-bottom: 24px;
}

.modal-plan-price span {
    font-family: Inter;
    font-size: 17.03px;
    font-weight: 600;
    line-height: 20.61px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #aeaeae;
}

.current-plan {
    cursor: initial;
    background: var(--Neutral-100, #cfd4d9);
    font-family: Inter;
    font-size: 12.77px;
    font-weight: 600;
    line-height: 15.46px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
}

.modal-plan-button {
    border: none;
    width: 100%;
    height: 46.93px;
    padding: 15.97px 0px 15.97px 0px;
    border-radius: 85.15px;
}

.upgrade-plan {
    background: var(--Primary-500, #008394);
    font-family: Inter;
    font-size: 12.77px;
    font-weight: 600;
    line-height: 15.46px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Base-White, #ffffff);
}

/* analytics css */

.analytics-table thead tr th:nth-child(2) {
    min-width: 140px;
}

.analytics-table thead tr th:nth-child(3) {
    min-width: 185px;
}

.analytics-table thead tr th:nth-child(4) {
    min-width: 190px;
}

.chart-card {
    background: #ffffff;
    border: 1px solid #e7e9ec;
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 24px;
    height: 196px !important;
}

.new-patient-chart {
    height: calc(100% - 25px) !important;
}

.chart-title {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    margin-bottom: 0px;
}

/* setting css end*/

/* Responsive Adjustments */

@media (max-width: 1400px) {
    .appointments-card {
        width: 100%;
        height: auto;
        min-height: 917px;
    }
}

@media (max-width: 1280px) and (min-width: 1024px) {
    .stat-card-sl .col-lg-3 {
        width: 50%;
    }

    .calender-custom-dropdown .calendar-dropdown {
        margin-top: 1rem;
        width: 100%;
    }

    .appointments-card .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px !important;
    }

    .blog-excerpt {
        font-size: 14.6px;
        line-height: 19.45px;
    }
}

@media (max-width: 1200px) {
    .search-container {
        min-width: 150px;
    }

    .heading-2 {
        font-size: 22px;
        line-height: 26px;
    }

    .header-gap {
        gap: 10px;
    }

    .exercise-card-text {
        font-size: 17px;
    }

    .player-logo-container {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 1025px) {
    .main-content:not(.expanded) .table-pagination {
        gap: 16px;
    }

    .main-content:not(.expanded) .left-pagination {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .main-content:not(.expanded) .right-pagination {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 8px;
        justify-content: start;
    }

    /* Remove all margins and set fixed widths */
    .main-content:not(.expanded) .right-pagination button {
        margin: 0;
    }

    .main-content:not(.expanded) .pagination-no-button {
        width: 32px;
    }

    .main-content:not(.expanded) .pagination-left-arrow-button,
    .main-content:not(.expanded) .pagination-right-arrow-button {
        width: 32px;
    }

    .main-content:not(.expanded) .pagination-first-button {
        width: fit-content;
    }

    /* First row: First, Last */
    .main-content:not(.expanded) .pagination-first-button:nth-child(1),
    .main-content:not(.expanded) .pagination-first-button:nth-child(5) {
        grid-row: 1;
    }

    /* Second row: 1, 2, 3 */
    .main-content:not(.expanded) .pagination-no-button:nth-child(2),
    .main-content:not(.expanded) .pagination-no-button:nth-child(3),
    .main-content:not(.expanded) .pagination-no-button:nth-child(4) {
        grid-row: 2;
    }

    /* Third row: Arrow buttons */
    .main-content:not(.expanded) .pagination-left-arrow-button,
    .main-content:not(.expanded) .pagination-right-arrow-button {
        grid-row: 3;
    }

    .patient-header {
        height: auto;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .patient-header > .d-flex {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .patient-profile {
        width: 80px;
        height: 80px;
        margin-bottom: 12px;
    }

    .patient-info {
        align-items: center;
        width: 100%;
    }

    .patient-info h1 {
        margin-bottom: 8px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        text-align: center;
    }

    .info-grid::after {
        display: none;
    }

    .patient-header .d-flex.gap-2 {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    .treatment-notes-view-details-search-container {
        flex-direction: column;
        gap: 20px;
    }

    .treatment-notes-view-details-search-container.row .col-md-6 {
        flex: 0 0 100%;
        width: 100%;
    }

    .details-grid {
        display: flex;
        /* or display: grid; */
        flex-wrap: wrap;
        /* Allow items to wrap */
        gap: 10px;
        /* Optional: Add some space between items */
    }

    /* Ensure detail items can grow */
    .detail-item {
        flex: 1 1 auto;
        /* Allow items to grow and shrink */
        min-width: 150px;
        /* Optional: Set a minimum width */
    }

    .blog-view {
        height: auto;
    }
}

@media (min-width: 993px) and (max-width: 1025px) {
    .laptop-view.col-lg-8 {
        flex: 0 0 auto;
        width: 55.666667%;
    }

    .laptop-view.col-lg-4 {
        flex: 0 0 auto;
        width: 44.33333333%;
    }
}

@media (max-width: 992px) {
    /* Tablet view and below */
    .sidebar {
        width: 0;
        overflow: hidden;
    }

    .main-content {
        margin-left: 0;
    }

    /* When sidebar is expanded on mobile/tablet */
    .sidebar.expanded {
        width: 272px;
        z-index: 1000;
    }

    .header {
        padding: 15px 20px;
    }

    .user-profile {
        max-width: 160px;
    }

    .appointments-card {
        margin-top: 24px;
    }
}

@media (max-width: 766px) and (max-height: 800px) {
    .image-container {
        min-height: calc(42vh - 60px);
    }

    .logo-overlay {
        transform: translate(-26%, -41%);
    }

    .image-container img {
        width: 50%;
        height: 200px;
        object-fit: contain;
    }
}

@media (max-width: 795px) {
    .table-pagination {
        gap: 16px;
    }

    .left-pagination {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .right-pagination {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 8px;
        justify-content: start;
    }

    /* Remove all margins and set fixed widths */
    .right-pagination button {
        margin: 0;
    }

    .pagination-no-button {
        width: 32px;
    }

    .pagination-left-arrow-button,
    .pagination-right-arrow-button {
        width: 32px;
    }

    .pagination-first-button {
        width: fit-content;
    }

    /* First row: First, Last */
    .pagination-first-button:nth-child(1),
    .pagination-first-button:nth-child(5) {
        grid-row: 1;
    }

    /* Second row: 1, 2, 3 */
    .pagination-no-button:nth-child(2),
    .pagination-no-button:nth-child(3),
    .pagination-no-button:nth-child(4) {
        grid-row: 2;
    }

    /* Third row: Arrow buttons */
    .pagination-left-arrow-button,
    .pagination-right-arrow-button {
        grid-row: 3;
    }
}

@media (max-width: 768px) {
    .sidebar {
        overflow-y: auto;
    }

    .user-info .user-name {
        font-size: 13px;
    }

    .col-lg-3 {
        width: 100%;
    }

    .patient-header {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .patient-header > .d-flex {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .patient-profile {
        width: 80px;
        height: 80px;
        margin-bottom: 12px;
    }

    .patient-info {
        align-items: center;
        width: 100%;
    }

    .patient-info h1 {
        margin-bottom: 8px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        text-align: center;
    }

    .info-grid::after {
        display: none;
    }

    .patient-header .d-flex.gap-2 {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    .graph-card .graph-custom-card {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .treatment-notes-view-details-search-container {
        flex-direction: column;
        gap: 20px;
    }

    .treatment-notes-view-details-search-container .form-control {
        width: 100%;
    }

    .payments-section-invoice {
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .header {
        padding: 15px;
    }

    .heading-2 {
        font-size: 20px;
        line-height: 28px;
    }

    .search-container {
        min-width: 100%;
        order: 1;
    }

    .search-container .form-control {
        height: 40px;
    }

    .img-container {
        padding: 20px !important;
    }

    .login-form-container {
        padding: 0px 20px;
        max-width: 100%;
    }

    .notification-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .user-profile {
        width: auto;
        height: 40px;
        padding: 4px;
    }

    .profile-image {
        width: 40px;
        height: 40px;
    }

    .user-profile {
        border: none;
        padding: 0;
    }

    .image-container {
        min-height: calc(42vh - 60px);
    }

    .logo-overlay {
        transform: translate(-26%, -41%);
    }

    .image-container img {
        width: 50%;
        height: 200px;
        object-fit: contain;
    }

    .player-logo-container {
        width: 35px;
        height: 35px;
        top: 80px;
    }

    .player-logo {
        width: 20px;
        height: 20px;
    }

    .custom-table thead tr th:first-child {
        min-width: auto;
    }

    .custom-table thead tr th:nth-child(2) {
        min-width: auto;
    }

    .custom-table thead tr th:nth-child(3) {
        min-width: auto;
    }

    .custom-table thead tr th:nth-child(4) {
        min-width: auto;
    }

    .custom-table thead tr th:nth-child(5) {
        min-width: auto;
    }

    .custom-table th,
    .custom-table td,
    .patient-management-table th,
    .patient-management-table td {
        white-space: nowrap;
        /* Reduced padding for mobile */
    }

    /* Make the table container horizontally scrollable */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .invoice-container .btn-cancel,
    .invoice-container .btn-create,
    .invoice-container .btn-draft {
        padding: 3px 7px;
    }

    .buttons-container {
        justify-content: space-between;
        flex-direction: column;
    }

    .patient-mobile-gap {
        gap: 10px;
    }

    .patient-management-table thead tr th:first-child {
        min-width: auto;
    }

    .patient-management-table thead tr th:nth-child(2) {
        min-width: auto;
    }

    .patient-management-table thead tr th:nth-child(3) {
        min-width: auto;
    }

    .patient-management-table thead tr th:nth-child(4) {
        min-width: auto;
    }

    .sidebar2.expanded {
        display: block;
        /* Keep this for layout */
        opacity: 1;
        /* Fully visible */
        visibility: visible;
        /* Make it visible */
        transition: opacity 0.3s ease, visibility 0.3s ease;
        /* Transition for opacity and visibility */
    }

    .sidebar2 {
        display: block;
        /* Keep this for layout */
        opacity: 0;
        /* Fully transparent */
        visibility: hidden;
        /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background-color: #e3eff1;
        z-index: 1000;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        /* Transition for opacity and visibility */
        overflow-y: auto;
    }

    .menu-toggle2 {
        display: block;
        /* Show menu-toggle2 on small screens */
    }

    .custom-tabs {
        gap: 15px;
    }

    .add-program-modal-image-container {
        flex-direction: column;
        gap: 10px;
    }

    .add-program-modal-image-container .add-program-modal-image {
        width: 100%;
    }

    .exercise-details-modal-content .modal-body .custom-video-player {
        height: auto;
    }

    .exercise-details-modal-content
        .modal-body
        .custom-video-player
        .player-logo-container {
        width: 35px;
        height: 35px;
        top: 95px;
    }

    .details-grid {
        display: flex;
        /* or display: grid; */
        flex-wrap: wrap;
        /* Allow items to wrap */
        gap: 10px;
        /* Optional: Add some space between items */
    }

    /* Ensure detail items can grow */
    .detail-item {
        flex: 1 1 auto;
        /* Allow items to grow and shrink */
        min-width: 150px;
        /* Optional: Set a minimum width */
    }

    .treatment-notes-view-details-search-container {
        gap: 20px;
    }

    .add-program-modal-footer {
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
    }

    .add-program-cancel-button,
    .add-program-next-button,
    .add-program-edit-button {
        width: 100%;
    }

    .add-program-form-button-container,
    .overview-buttons-container {
        flex-direction: column;
        gap: 10px;
    }

    .sidebar {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .invoices-table thead tr th:first-child {
        min-width: auto;
    }

    .invoices-table thead tr th:nth-child(2) {
        min-width: auto;
    }

    .invoices-table thead tr th:nth-child(3) {
        min-width: auto;
    }

    .invoices-table thead tr th:nth-child(4) {
        min-width: auto;
    }

    .appointments-events.modal-header {
        padding: 1rem 1rem 0px 1rem;
        border-bottom: none;
    }

    #extendedCalendarModal .modal-content.exercise-details-modal-content {
        height: 100vh;
    }

    #extendedCalendarModal .modal-body.view-appointment-modal-body .section {
        height: 100%;
        overflow-y: hidden;
    }

    .appointments-container {
        flex-direction: column;
    }

    .rehab-image {
        height: auto;
    }

    .subscription-details-card {
        flex-direction: column;
        gap: 10px;
        align-items: start;
    }

    .exercise-form-container {
        flex-direction: column;
        gap: 20px;
    }

    .btn.invoice-btn.btn-create {
        width: 100% !important;
    }

    .patients-by-referrals {
        margin-top: 1.5rem !important;
    }

    .top-header.patient-management-head {
        flex-direction: column;
        gap: 15px;
        align-items: start;
    }

    .banner-table thead tr th:last-child,
    .class-table thead tr th:last-child {
        min-width: auto;
    }

    .banner-table thead tr th:first-child,
    .class-table thead tr th:first-child {
        min-width: auto;
    }

    /* Shared styles for specific column indices */
    .banner-table thead tr th:nth-child(2),
    .class-table thead tr th:nth-child(2) {
        min-width: auto;
    }

    .banner-table thead tr th:nth-child(3),
    .class-table thead tr th:nth-child(3) {
        min-width: auto;
    }

    .banner-table thead tr th:nth-child(4),
    .class-table thead tr th:nth-child(4) {
        min-width: auto;
    }

    .banner-table thead tr th:nth-child(5),
    .class-table thead tr th:nth-child(5) {
        min-width: auto;
    }

    .banner-table thead tr th:nth-child(6),
    .class-table thead tr th:nth-child(6) {
        min-width: auto;
    }

    .nav.nav-pills.patient-management-tabs {
        flex-basis: content;
        gap: 2px;
    }
}

@media (min-width: 577px) {
    .menu-toggle2 {
        display: none;
        /* Hide menu-toggle2 on larger screens */
    }
}

/* Add this CSS to your stylesheet */
@media (max-width: 413px) {
    .responsive-line {
        display: block;
        /* Show the line on small screens */
    }

    .treatment-notes-view-details-header {
        flex-direction: column;
    }
}

@media (max-width: 412px) {
    #customDateCalendar {
        width: 280px;
    }
}

@media (min-width: 414px) {
    .responsive-line {
        display: none;
        /* Hide the line on larger screens */
    }
}

@media (max-width: 376px) {
    .top-header .add-program-button {
        padding: 6px 9px 6px 9px;
        font-size: 12px;
        line-height: 30px;
    }
}

@media (max-width: 376px) {
    .player-logo-container {
        width: 35px;
        height: 35px;
        top: 67px;
    }

    .player-logo {
        width: 20px;
        height: 20px;
    }

    .exercise-details-modal-content
        .modal-body
        .custom-video-player
        .player-logo-container {
        top: 82px;
    }
}

@media (max-width: 324px) {
    .top-header .nav-pills .nav-link {
        padding: 6px 8px 6px 8px;
        font-size: 12.5px;
        font-weight: 500;
    }
}

@media (max-width: 321px) {
    .player-logo-container {
        width: 30px;
        height: 30px;
        top: 50px;
    }

    .player-logo {
        width: 15px;
        height: 15px;
    }

    .exercise-details-modal-content
        .modal-body
        .custom-video-player
        .player-logo-container {
        top: 59px;
    }
}

@media screen and (min-width: 321px) {
    html,
    body {
        overflow-x: hidden;
    }
}

.upload-text {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.file-types {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.browse-button {
    background-color: #fff;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.hidden-input {
    display: none;
}

.upload-icon {
    color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
}

.selected-file {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.remove-file {
    color: #666;
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
}

.remove-file:hover {
    color: #ff4444;
}

.file-info {
    display: none;
}

.file-info.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-msg {
    color: red;
    font-size: 12px;
}

.error {
    color: red;
    font-size: 12px;
}

/*membership start */
.membership-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 21.78px;
    color: #0d0d0d;
    max-width: 805px;
}

.membership-modal-card {
    padding: 33px;
    border-radius: 21.29px;
    border: 1.06px solid var(--Neutral-50, #e7e9ec);
    background-color: #ffffff;
}

.client-data h6 {
    font-size: 20px;
    font-weight: 700;
    line-height: 24.2px;
    color: #1f1f1f;
    margin-bottom: 20px;
}

.modal-plan-monthly-title,
.modal-plan-annual-title {
    width: 80.8px;
    padding: 6.39px 14.9px 6.39px 14.9px;
    border-radius: 28.74px;
    font-family: Inter;
    font-size: 12.77px;
    font-weight: 600;
    line-height: 15.46px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Base-White, #ffffff);
    margin-bottom: 24px;
}

.modal-plan-monthly-title {
    background: var(--Primary-500, #008394);
}

.modal-plan-annual-title {
    background: var(--Secondary-500, #d84cf7);
}

.modal-plan-text {
    font-family: Inter;
    font-size: 12.77px;
    font-weight: 500;
    line-height: 18.52px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000000;
    margin-bottom: 24px;
}

.modal-plan-price {
    font-family: Inter;
    font-size: 38.32px;
    font-weight: 700;
    line-height: 46.37px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000000;
    margin-bottom: 24px;
}

.modal-plan-price span {
    font-family: Inter;
    font-size: 17.03px;
    font-weight: 600;
    line-height: 20.61px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #aeaeae;
}

.modal-plan-monthly-button,
.modal-plan-annual-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 100%;
    height: 46.93px;
    padding: 15.97px 0px 15.97px 0px;
    border-radius: 85.15px;

    color: #ffffff;
    text-align: center;
}

.modal-plan-monthly-button {
    background-color: var(--Primary-500, #008394);
}

.modal-plan-annual-button {
    background: var(--Secondary-500, #d84cf7);
}

.upgrade-plan {
    background: var(--Primary-500, #008394);
    font-family: Inter;
    font-size: 12.77px;
    font-weight: 600;
    line-height: 15.46px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Base-White, #ffffff);
}

/*membership end */

/*Broadcast Notification Style Start*/
.broadcast-notification-card {
    height: 100%;
    padding: 20px 30px;
    border-radius: 20px;
    background-color: #ffffff;
    border: 1px solid var(--Neutral-50, #e7e9ec);
}

.notification-checkbox .form-switch .form-check-input {
    width: 36px;
    height: 20px;
    border: none;
    background-color: var(--Neutral-100, #cfd4d9);
    background-image: url("/icons/dot.svg");
    background-position: left 2px center;
    background-size: 16px 16px;
    border-radius: 16px;
}

.notification-checkbox .form-switch .form-check-input:checked {
    background-position: right 2px center;
    background-color: var(--Primary-500, #008394);
}

.broadcast-form {
    max-width: 584px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.schedule-message-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.schedule-label {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--Neutral-600, #56687a);
}

.date-time-fields {
    display: none;
}

.date-input-wrapper,
.time-input-wrapper {
    position: relative;
}

/*Broadcast Notification Style End*/
/* Responsive Adjustments */

@media (max-width: 1400px) {
    .appointments-card {
        width: 100%;
        height: auto;
        min-height: 917px;
    }
}

@media (max-width: 1280px) and (min-width: 1024px) {
    .stat-card-sl .col-lg-3 {
        width: 50%;
    }

    .calender-custom-dropdown .calendar-dropdown {
        margin-top: 1rem;
        width: 100%;
    }

    .appointments-card .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px !important;
    }

    .blog-excerpt {
        font-size: 14.6px;
        line-height: 19.45px;
    }
}

@media (max-width: 1200px) {
    .search-container {
        min-width: 150px;
    }

    .heading-2 {
        font-size: 22px;
        line-height: 26px;
    }

    .header-gap {
        gap: 10px;
    }

    .exercise-card-text {
        font-size: 17px;
    }

    .player-logo-container {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 1025px) {
    .main-content:not(.expanded) .table-pagination {
        gap: 16px;
    }

    .main-content:not(.expanded) .left-pagination {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .main-content:not(.expanded) .right-pagination {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 8px;
        justify-content: start;
    }

    /* Remove all margins and set fixed widths */
    .main-content:not(.expanded) .right-pagination button {
        margin: 0;
    }

    .main-content:not(.expanded) .pagination-no-button {
        width: 32px;
    }

    .main-content:not(.expanded) .pagination-left-arrow-button,
    .main-content:not(.expanded) .pagination-right-arrow-button {
        width: 32px;
    }

    .main-content:not(.expanded) .pagination-first-button {
        width: fit-content;
    }

    /* First row: First, Last */
    .main-content:not(.expanded) .pagination-first-button:nth-child(1),
    .main-content:not(.expanded) .pagination-first-button:nth-child(5) {
        grid-row: 1;
    }

    /* Second row: 1, 2, 3 */
    .main-content:not(.expanded) .pagination-no-button:nth-child(2),
    .main-content:not(.expanded) .pagination-no-button:nth-child(3),
    .main-content:not(.expanded) .pagination-no-button:nth-child(4) {
        grid-row: 2;
    }

    /* Third row: Arrow buttons */
    .main-content:not(.expanded) .pagination-left-arrow-button,
    .main-content:not(.expanded) .pagination-right-arrow-button {
        grid-row: 3;
    }

    .patient-header {
        height: auto;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .patient-header > .d-flex {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .patient-profile {
        width: 80px;
        height: 80px;
        margin-bottom: 12px;
    }

    .patient-info {
        align-items: center;
        width: 100%;
    }

    .patient-info h1 {
        margin-bottom: 8px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        text-align: center;
    }

    .info-grid::after {
        display: none;
    }

    .patient-header .d-flex.gap-2 {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    .treatment-notes-view-details-search-container {
        flex-direction: column;
        gap: 20px;
    }

    .treatment-notes-view-details-search-container.row .col-md-6 {
        flex: 0 0 100%;
        width: 100%;
    }

    .details-grid {
        display: flex;
        /* or display: grid; */
        flex-wrap: wrap;
        /* Allow items to wrap */
        gap: 10px;
        /* Optional: Add some space between items */
    }

    /* Ensure detail items can grow */
    .detail-item {
        flex: 1 1 auto;
        /* Allow items to grow and shrink */
        min-width: 150px;
        /* Optional: Set a minimum width */
    }

    .col-md-4.mobile-membership {
        flex: 0 0 auto;
        width: 50%;
    }

    .blog-view {
        height: auto;
    }

    .accordion-header {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .action-buttons {
        position: static;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin-top: 10px;
    }

    .accordion-button {
        width: 100%;
    }
}

@media (min-width: 993px) and (max-width: 1025px) {
    .laptop-view.col-lg-8 {
        flex: 0 0 auto;
        width: 55.666667%;
    }

    .laptop-view.col-lg-4 {
        flex: 0 0 auto;
        width: 44.33333333%;
    }
}

@media (max-width: 992px) {
    .sidebar {
        width: 0;
        overflow: hidden;
    }

    .main-content {
        margin-left: 0;
    }

    .sidebar.expanded {
        width: 272px;
        z-index: 1000;
    }

    .header {
        padding: 15px 20px;
    }

    .user-profile {
        max-width: 160px;
    }

    .appointments-card {
        margin-top: 24px;
    }
}

@media (max-width: 766px) and (max-height: 800px) {
    .image-container {
        min-height: calc(42vh - 60px);
    }

    .logo-overlay {
        transform: translate(-26%, -41%);
    }

    .image-container img {
        width: 50%;
        height: 200px;
        object-fit: contain;
    }
}

@media (max-width: 795px) {
    .table-pagination {
        gap: 16px;
    }

    .left-pagination {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .right-pagination {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 8px;
        justify-content: start;
    }

    /* Remove all margins and set fixed widths */
    .right-pagination button {
        margin: 0;
    }

    .pagination-no-button {
        width: 32px;
    }

    .pagination-left-arrow-button,
    .pagination-right-arrow-button {
        width: 32px;
    }

    .pagination-first-button {
        width: fit-content;
    }

    /* First row: First, Last */
    .pagination-first-button:nth-child(1),
    .pagination-first-button:nth-child(5) {
        grid-row: 1;
    }

    /* Second row: 1, 2, 3 */
    .pagination-no-button:nth-child(2),
    .pagination-no-button:nth-child(3),
    .pagination-no-button:nth-child(4) {
        grid-row: 2;
    }

    /* Third row: Arrow buttons */
    .pagination-left-arrow-button,
    .pagination-right-arrow-button {
        grid-row: 3;
    }
}

@media (max-width: 768px) {
    .sidebar {
        overflow-y: auto;
    }

    .user-info .user-name {
        font-size: 13px;
    }

    .col-lg-3 {
        width: 100%;
    }

    .patient-header {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .patient-header > .d-flex {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .patient-profile {
        width: 80px;
        height: 80px;
        margin-bottom: 12px;
    }

    .patient-info {
        align-items: center;
        width: 100%;
    }

    .patient-info h1 {
        margin-bottom: 8px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        text-align: center;
    }

    .info-grid::after {
        display: none;
    }

    .patient-header .d-flex.gap-2 {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    .graph-card .graph-custom-card {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .treatment-notes-view-details-search-container {
        flex-direction: column;
        gap: 20px;
    }

    .treatment-notes-view-details-search-container .form-control {
        width: 100%;
    }

    .payments-section-invoice {
        gap: 10px;
    }

    .stat-card-sl .col-md-3 {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .header {
        padding: 15px;
    }

    .heading-2 {
        font-size: 20px;
        line-height: 28px;
    }

    .search-container {
        min-width: 100%;
        order: 1;
    }

    .search-container .form-control {
        height: 40px;
    }

    .img-container {
        padding: 20px !important;
    }

    .login-form-container {
        padding: 0px 20px;
        max-width: 100%;
    }

    .notification-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .user-profile {
        width: auto;
        height: 40px;
        padding: 4px;
    }

    .profile-image {
        width: 40px;
        height: 40px;
    }

    .user-profile {
        border: none;
        padding: 0;
    }

    .image-container {
        min-height: calc(42vh - 60px);
    }

    .logo-overlay {
        transform: translate(-26%, -41%);
    }

    .image-container img {
        width: 50%;
        height: 200px;
        object-fit: contain;
    }

    .player-logo-container {
        width: 35px;
        height: 35px;
        top: 80px;
    }

    .player-logo {
        width: 20px;
        height: 20px;
    }

    .custom-table thead tr th:first-child {
        min-width: auto;
    }

    .custom-table thead tr th:nth-child(2) {
        min-width: auto;
    }

    .custom-table thead tr th:nth-child(3) {
        min-width: auto;
    }

    .custom-table thead tr th:nth-child(4) {
        min-width: auto;
    }

    .custom-table th,
    .custom-table td,
    .patient-management-table th,
    .patient-management-table td {
        white-space: nowrap;
        /* Reduced padding for mobile */
    }

    /* Make the table container horizontally scrollable */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .invoice-container .btn-cancel,
    .invoice-container .btn-create,
    .invoice-container .btn-draft {
        padding: 3px 7px;
    }

    .buttons-container {
        justify-content: space-between;
        flex-direction: column;
    }

    .patient-mobile-gap {
        gap: 10px;
    }

    .patient-management-table thead tr th:first-child {
        min-width: auto;
    }

    .patient-management-table thead tr th:nth-child(2) {
        min-width: auto;
    }

    .patient-management-table thead tr th:nth-child(3) {
        min-width: auto;
    }

    .patient-management-table thead tr th:nth-child(4) {
        min-width: auto;
    }

    .sidebar2.expanded {
        display: block;
        /* Keep this for layout */
        opacity: 1;
        /* Fully visible */
        visibility: visible;
        /* Make it visible */
        transition: opacity 0.3s ease, visibility 0.3s ease;
        /* Transition for opacity and visibility */
    }

    .sidebar2 {
        display: block;
        /* Keep this for layout */
        opacity: 0;
        /* Fully transparent */
        visibility: hidden;
        /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background-color: #e3eff1;
        z-index: 1000;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        /* Transition for opacity and visibility */
        overflow-y: auto;
    }

    .menu-toggle2 {
        display: block;
        /* Show menu-toggle2 on small screens */
    }

    .custom-tabs {
        gap: 15px;
    }

    .add-program-modal-image-container {
        flex-direction: column;
        gap: 10px;
    }

    .add-program-modal-image-container .add-program-modal-image {
        width: 100%;
    }

    .exercise-details-modal-content .modal-body .custom-video-player {
        height: auto;
    }

    .exercise-details-modal-content
        .modal-body
        .custom-video-player
        .player-logo-container {
        width: 35px;
        height: 35px;
        top: 95px;
    }

    .details-grid {
        display: flex;
        /* or display: grid; */
        flex-wrap: wrap;
        /* Allow items to wrap */
        gap: 10px;
        /* Optional: Add some space between items */
    }

    /* Ensure detail items can grow */
    .detail-item {
        flex: 1 1 auto;
        /* Allow items to grow and shrink */
        min-width: 150px;
        /* Optional: Set a minimum width */
    }

    .treatment-notes-view-details-search-container {
        gap: 20px;
    }

    .add-program-modal-footer {
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
    }

    .add-program-cancel-button,
    .add-program-next-button,
    .add-program-edit-button {
        width: 100%;
    }

    .add-program-form-button-container,
    .overview-buttons-container {
        flex-direction: column;
        gap: 10px;
    }

    .sidebar {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .invoices-table thead tr th:first-child {
        min-width: auto;
    }

    .invoices-table thead tr th:nth-child(2) {
        min-width: auto;
    }

    .invoices-table thead tr th:nth-child(3) {
        min-width: auto;
    }

    .invoices-table thead tr th:nth-child(4) {
        min-width: auto;
    }

    .exercise-form-container {
        flex-direction: column;
        gap: 13px;
    }

    .appointments-container {
        flex-direction: column;
    }

    .rehab-image {
        height: auto;
    }

    .top-header.client-management-tabs {
        flex-direction: column;
        gap: 15px;
        align-items: start;
    }

    .nav.nav-pills.inner-tabs {
        flex-basis: content;
        gap: 2px;
    }

    .patient-details-table thead tr th:first-child,
    .patient-details-table thead tr th:nth-child(2),
    .patient-details-table thead tr th:nth-child(3),
    .patient-details-table thead tr th:nth-child(4),
    .patient-details-table thead tr th:last-child {
        min-width: auto;
    }

    .membership-text {
        font-size: 15px;
    }

    .header-container.mb-4 {
        margin-bottom: 0.5rem !important;
    }

    .row.mobile-responsive-membership {
        flex-direction: column;
        gap: 20px;
    }

    .col-md-4.mobile-membership {
        flex: 0 0 auto;
        width: 100%;
    }

    .terms-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .card-title {
        margin-bottom: 10px;
    }

    .static-buttons {
        flex-direction: column;
    }

    .edit-mode-buttons {
        flex-direction: column;
        width: 100%;
    }

    .edit-mode-buttons .btn {
        width: 100%;
        margin-bottom: 1px;
    }

    .blog-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 6rem;
    }

    .btn.btn-primary.save-btn,
    .btn.btn-primary.cancel-btn {
        margin-top: 10px;
    }

    .btn.btn-primary.edit-btn {
        width: 100%;
    }
}

@media (min-width: 577px) {
    .menu-toggle2 {
        display: none;
        /* Hide menu-toggle2 on larger screens */
    }
}

/* Add this CSS to your stylesheet */
@media (max-width: 413px) {
    .responsive-line {
        display: block;
        /* Show the line on small screens */
    }

    .treatment-notes-view-details-header {
        flex-direction: column;
    }
}

@media (min-width: 414px) {
    .responsive-line {
        display: none;
        /* Hide the line on larger screens */
    }
}

@media (max-width: 376px) {
    .top-header .add-program-button {
        padding: 6px 9px 6px 9px;
        font-size: 12px;
        line-height: 30px;
    }
}

@media (max-width: 376px) {
    .player-logo-container {
        width: 35px;
        height: 35px;
        top: 67px;
    }

    .player-logo {
        width: 20px;
        height: 20px;
    }

    .exercise-details-modal-content
        .modal-body
        .custom-video-player
        .player-logo-container {
        top: 82px;
    }
}

@media (max-width: 324px) {
    .top-header .nav-pills .nav-link {
        padding: 6px 8px 6px 8px;
        font-size: 12.5px;
        font-weight: 500;
    }
}

@media (max-width: 321px) {
    .player-logo-container {
        width: 30px;
        height: 30px;
        top: 50px;
    }

    .player-logo {
        width: 15px;
        height: 15px;
    }

    .exercise-details-modal-content
        .modal-body
        .custom-video-player
        .player-logo-container {
        top: 59px;
    }
}

@media screen and (min-width: 321px) {
    html,
    body {
        overflow-x: hidden;
    }
}

/*faq start */

.accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-header {
    position: relative;
}

.action-buttons {
    position: absolute;
    right: 30px;
    z-index: 999;
}

.accordion-button-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.accordion-item {
    padding: 20px 30px 20px 30px;
    margin-bottom: 20px;
    border-radius: 20px !important;
    background-color: #ffffff;
    border: 1px solid var(--Neutral-50, #e7e9ec) !important;
}

.accordion-item:not(:first-of-type) {
    border-top: none;
}

.accordion-button:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.accordion-button {
    padding: 0px !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 20px;
    line-height: 24px;
    flex-grow: 1;
}

.accordion-button:focus {
    border-color: #ffffff;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: #212529;
    background-color: #ffffff;
}

.accordion-body {
    padding: 0px;
    margin-top: 20px;
}

.accordion-body h6 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-900, #0e2741);
    margin-bottom: 20px;
}

.accordion-body p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--Neutral-600, #56687a);
}

.faq-form {
    display: flex;
    gap: 20px;
    flex-direction: column;
    padding: 20px 30px;
    border-radius: 20px;
    border: 1px solid var(--Neutral-50, #e7e9ec);
    background-color: #ffffff;
}

.faq-form-header {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-900, #0e2741);
}

/*faq end */

.form-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-search-height {
    height: 40px !important;
}

.required::after {
    content: " *";
    color: red;
}

.clear-icon:hover {
    transform: scale(2);
    color: red;
}

a {
    text-decoration: none;
}

.table-responsive {
    max-height: 700px;
    overflow: auto;
}

.right-pagination {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination-first-button:hover,
.pagination-no-button:hover {
    text-decoration: underline;
}

@media (max-width: 1025px) {
    .main-content:not(.expanded) .right-pagination {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 4px;
        /* Reduced the gap to 4px */
        margin-top: 20px;
    }
}

@media (max-width: 550px) {
    .table-pagination {
        display: flex;
        flex-direction: column-reverse;
        /* Reverse the order of the children */
        align-items: flex-start;
    }

    .left-pagination,
    .right-pagination {
        width: 100%;
        display: flex;
        justify-content: space-between;
        /* Adjust the alignment inside */
    }

    .right-pagination {
        margin-bottom: 10px;
        /* Optional: Add some spacing between right-pagination and left-pagination */
    }

    /* Ensure all buttons inside .right-pagination are aligned correctly */
    .right-pagination button {
        flex: 1;
        /* This makes each button inside .right-pagination take equal space */
    }
}

.youtube-video-player {
    position: relative;
    /* Ensures absolute children are positioned relative to this container */
    width: 600px;
    /* Set your desired width */
    height: 281px;

    margin: 0 auto;
}

.date-picker-wrapper {
    height: inherit;
    border-radius: 8px;
    border: 1px solid #cfd4d9;
    padding: 14px 16px;
    /* margin-bottom: 16px; */
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #56687a;
}

.label-dropdown {
    position: relative;
}

.label-dropdown > label {
    position: absolute;
    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.03999999910593033px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-600, #56687a);
    top: 4px;
    left: 16px;
    margin-bottom: 10px;
}

.label-dropdown .custom-dropdown .dropdown-toggle {
    height: 48px;
    padding: 20px 16px 4px 16px;
    border-radius: 16px;
    background: var(--Neutral-25, #f8f8f8);
    border: 1px solid var(--Neutral-200, #cfd4d9);
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--Neutral-900, #0e2741);
    background-image: url(/icons/chevron-down.svg);
    background-repeat: no-repeat;
    background-position: right 16px center;
}

#map {
    padding: 10px;
    height: 400px;
    width: 100%;
}

.custom-map-control-button {
    position: absolute !important;
    bottom: 147px !important;
    border: none;
    right: 16px !important;
    background: white;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}

#place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: #00000059 0 5px 15px;
    margin: 10px;
    padding: 5px;
    font-family: Roboto, sans-serif;
    font-size: large;
    font-weight: 700;
    border-radius: 10px;
}

.event-pink {
    background-color: #fff0f5;
    /* Light pink */
    border: 1px solid #f79ac0;
    /* Bold pink */
    color: #333;
}

.event-red {
    background-color: #ffe5e5;
    border: 1px solid #f94c4c;
    color: #333;
}

.event-purple {
    background-color: #f8f0fc;
    border: 1px solid #af52de;
    color: #333;
}

.event-yellow {
    background-color: #fff9df;
    border: 1px solid #ffcc00;
    color: #333;
}

.event-green {
    background-color: #e6fff4;
    border: 1px solid #3cd984;
    color: #333;
}

.event-blue {
    background-color: #eaf6ff;
    border: 1px solid #4cb0f7;
    color: #333;
}

.event-gray {
    background-color: #f5f5f5;
    border: 1px solid #bdbdbd;
    color: #333;
}

.event-orange {
    background-color: #fff3e5;
    border: 1px solid #f99f36;
    color: #333;
}

.event-navy {
    background-color: #e8edff;
    border: 1px solid #3a5fcd;
    color: #333;
}

.event-teal {
    background-color: #e0f7f7;
    border: 1px solid #20c997;
    color: #333;
}

.event-lime {
    background-color: #f2ffe5;
    border: 1px solid #a3e635;
    color: #333;
}

.event-coral {
    background-color: #ffecec;
    border: 1px solid #ff6f61;
    color: #333;
}

.event-cyan {
    background-color: #e0fcff;
    border: 1px solid #06b6d4;
    color: #333;
}

.event-gold {
    background-color: #fff8dc;
    border: 1px solid #ffd700;
    color: #333;
}

.event-rose {
    background-color: #ffe4ec;
    border: 1px solid #e91e63;
    color: #333;
}

.event-sky {
    background-color: #e0f3ff;
    border: 1px solid #0ea5e9;
    color: #333;
}

.event-mint {
    background-color: #e6fff5;
    border: 1px solid #2ee4a1;
    color: #333;
}

.event-plum {
    background-color: #f3e8f8;
    border: 1px solid #9b59b6;
    color: #333;
}

.event-brown {
    background-color: #f4e9e2;
    border: 1px solid #a0522d;
    color: #333;
}

.event-olive {
    background-color: #f4fad2;
    border: 1px solid #808000;
    color: #333;
}

.img-fluid {
    min-height: 100px !important;
    min-width: 100px !important;
    background-color: rgb(250, 250, 250);
}

.exercise-card-add-program.selected {
    border: 1px solid #008394;
}

.gray-border {
    border: 1px solid #e7e9ec;
}

.print-btn {
    transition: all 0.6ms ease-in-out;
}

.print-btn:hover {
    transform: scale(1.1);
}
/* blog editor  */

.ck-editor__editable {
    max-height: 250px !important;
    overflow-y: auto !important;
}

#toast-container .live-notification-toast.no-icon {
    background-image: none !important;
    padding: 16px !important;
}

.live-notification-toast.no-icon::before {
    display: none !important;
}

.live-notification-toast {
    /* background-color: #f5f5f5 !important;
    color: #101b30 !important;
    box-shadow: none !important; */
}

.live-notification-toast .toast-close-button {
    /* color: #000; */
}

/* onboadring patient  */
.detail-label-patient {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 8px;
    color: #56687a;
}

.form-control-patient {
    padding: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    border-radius: 16px;
    border: 1px solid var(--Neutral-50, #e7e9ec);
    width: 475px;
    background: #fafafa;
    height: 49px;
}

input.form-control-patient:focus {
    border-color: #4b9b9b;
    box-shadow: none;
    outline: none;
}

.answer-options {
    font-size: 18px;
    color: #008394;
    font-weight: 600;
}
.status-badge {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    display: inline !important;
    font-family: Inter, serif;
    font-weight: 700 !important;
    line-height: 16px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.status-green {
    background-color: #E4FBCC !important;
    color: #2B5314 !important;

}

.status-red {
    background-color: #FED7D9 !important;
    color: #C72B35 !important;
}
.add-button {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    Width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #cae4e8;
    color: black;
    border: 0.05px solid #979292;
}
.add-button:hover, .add-button:active{
    color: black !important;
}

#what-brings .wb-panel{
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:12px;
    padding:16px;
}
#what-brings .question-list{
    padding-right:8px;
}
#what-brings .question-item{
    border-bottom:1px solid #f1f3f5;
    padding:10px 0;
}
#what-brings .question-item:last-child{ border-bottom:0; }
#what-brings .delete-question-form .btn{ opacity:.65; }
#what-brings .delete-question-form .btn:hover{ opacity:1; }

.gender::first-letter{
        text-transform: uppercase;
}