/* Last Modified: 2025-05-27
   Git Commit (for UI Project): "Modal + Debugs"
   Original File Name: components.css */

/*
    ====================================
    ====    Default Button-Like Link
    ====================================
    example:

        <a href="#" class="default_button text-label-large w-100 mt-3 ">
            دریافت نوبت
        </a>

        or

        <button type="submit" class="default_button border-0 text-label-large w-100 mt-3 ">
            ادامه
        </button>
*/
.default_button {
    display: flex;
    height: 2.5rem;
    padding: 0.625rem 1rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: var(--bs-primary);
    text-decoration: none;
    color: var(--bs-light);
}

.default_button:active {
    background: var(--bs-primary-light);
}


/*
    =======================================
    ====    Yes/Cancel Button-Like Link
    =======================================

    example:

        <div class="d-flex align-items-center justify-content-center gap-2 mt-4 mb-2">
            <a href="#" class="flex-grow-1 default_submit_button text-label-large text-nowrap">اعمال / بلی</a>
            <a href="#" class="flex-grow-1 default_cancel_button text-label-large text-nowrap">لغو / خیر</a>
        </div>
*/

.default_submit_button {
    height: 2.5rem;
    padding: 0.625rem 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    background: var(--bs-primary);
    text-decoration: none;
    color: var(--bs-light);
    text-align: center;
    flex-basis: 0;
}

.default_submit_button:active {
    background: var(--bs-primary-light);
}

.default_cancel_button {
    border-radius: 0.5rem;
    border: 1px solid var(--Primary-Primary2, #8BC53E);
    background: var(--Gray-Gray100, #FDFDFD);
    height: 2.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--bs-primary);
    text-align: center;
    flex-basis: 0;
}

.default_cancel_button:active {
    border: 1px solid var(--bs-primary-light, #8BC53E);
    color: var(--bs-primary-light);
}


/*
    ====================================
    ====    Input Box With Label
    ====================================
    example:

    <div class="input-with-label   [mb-4] (NO ERROR TIMES)   mt-2 position-relative [input-group-with-error (ERROR TIME)]">
        <label for="inputFirstName" class="text-title-medium bg-light">
            نام
        </label>
        <input type="text" class="form-control shadow-0" id="inputFirstName" placeholder="">
    </div>

    SHOW ERRORS:
    <div class="d-flex justify-content-start align-items-center mt-1">
        <span class="ms-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M9.99868 13.941C10.1894 13.941 10.3492 13.8765 10.4782 13.7475C10.6072 13.6185 10.6717 13.4586 10.6717 13.2679C10.6717 13.0772 10.6072 12.9173 10.4782 12.7883C10.3492 12.6593 10.1894 12.5948 9.99868 12.5948C9.80797 12.5948 9.64812 12.6593 9.51911 12.7883C9.39012 12.9173 9.32561 13.0772 9.32561 13.2679C9.32561 13.4586 9.39012 13.6185 9.51911 13.7475C9.64812 13.8765 9.80797 13.941 9.99868 13.941ZM9.3737 10.8961H10.6237V5.89612H9.3737V10.8961ZM10.0001 17.9153C8.90513 17.9153 7.87593 17.7075 6.91249 17.292C5.94903 16.8764 5.11096 16.3125 4.39828 15.6001C3.68559 14.8877 3.12137 14.05 2.70564 13.087C2.2899 12.124 2.08203 11.095 2.08203 10.0001C2.08203 8.90513 2.28981 7.87593 2.70536 6.91249C3.12092 5.94903 3.68488 5.11096 4.39724 4.39828C5.10961 3.68559 5.94732 3.12137 6.91034 2.70564C7.87336 2.2899 8.90234 2.08203 9.99728 2.08203C11.0922 2.08203 12.1214 2.28981 13.0849 2.70537C14.0483 3.12092 14.8864 3.68488 15.5991 4.39724C16.3118 5.10962 16.876 5.94732 17.2917 6.91035C17.7075 7.87336 17.9153 8.90234 17.9153 9.99728C17.9153 11.0922 17.7075 12.1214 17.292 13.0849C16.8764 14.0483 16.3125 14.8864 15.6001 15.5991C14.8877 16.3118 14.05 16.876 13.087 17.2917C12.124 17.7075 11.095 17.9153 10.0001 17.9153ZM9.99868 16.6653C11.8598 16.6653 13.4362 16.0195 14.7278 14.7278C16.0195 13.4362 16.6653 11.8598 16.6653 9.99868C16.6653 8.13757 16.0195 6.56118 14.7278 5.26951C13.4362 3.97784 11.8598 3.33201 9.99868 3.33201C8.13757 3.33201 6.56118 3.97784 5.26951 5.26951C3.97784 6.56118 3.33201 8.13757 3.33201 9.99868C3.33201 11.8598 3.97784 13.4362 5.26951 14.7278C6.56118 16.0195 8.13757 16.6653 9.99868 16.6653Z"
                    fill="#B2001A"/>
            </svg>
        </span>
        <text class="text-body-small text-danger">
            {{ error }}
        </text>
    </div>
*/
.input-with-label input {
    border-radius: 0.5rem;
    border: 1px solid #D7D8D8;
    height: 3rem;
}

.input-with-label label {
    transform: translateY(-50%);
    position: absolute;
    right: 0.75rem;
    padding: 0rem 0.25rem;
    background-color: var(--bs-light);
}

.input-group-with-error input,
.input-group-with-error span {
    border-color: var(--bs-danger) !important;
}


/*
    ====================================
    ====    Input Drop Down With Label
    ====================================
    example:

        <div class="material-input-dropdown-with-label column my-4">
            <div class="fixed-input gray-500">
                <i class="fa fa-chevron-down"></i>
            </div>
            <input class="input-control" id="provinceInput" type="text" readonly>
            <label class="input-label text-title-medium-2 bg-light" for="provinceInput">
                استان
            </label>
            <ul>
                <li data-value="تهران">تهران</li>
                <hr class="my-0">
                <li data-value="مشهد">مشهد</li>
                <hr class="my-0">
                <li data-value="شیراز">شیراز</li>
            </ul>

        </div>

    * Don't forget to have <script src="assets/js/dropdown.js"></script>
    * If Manually loading dropdowns were needed (like using dropdown in BOTTOMSHEET), just use loadDropDownScript()
*/

.material-input-dropdown-with-label {
    position: relative;
    background-color: var(--bs-light);
    direction: rtl;
    height: 3rem;
}

.material-input-dropdown-with-label .input-label {
    transform: translateY(-50%);
    position: absolute;
    right: 0.75rem;
    transition: all 0.3s ease;
    background-color: var(--bs-light);
    padding: 0 0.25rem;
}

.material-input-dropdown-with-label .input-control {
    background-color: transparent;
    width: 100%;
    height: 100%;
    outline: 0;
    border-radius: 0.5rem;
    border: 1px solid #d8d8d8;
    position: relative;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    padding-right: 1rem;
}

.material-input-dropdown-with-label .input-control::placeholder {
    color: #000000;
}

.material-input-dropdown-with-label .fixed-input {
    position: absolute;
    top: 14px;
    left: 18px;
    text-align: right;
    font-size: small;
}

.material-input-dropdown-with-label .fixed-input i {
    transition: all 0.3s ease;
    font-size: small;
}


.material-input-dropdown-with-label ul {
    position: absolute;
    top: 100%;
    width: 100%;
    list-style: none;
    background: var(--bs-light);
    padding: 2px 0;
    max-height: 18rem;
    overflow: auto;
    box-shadow: 0px 5px 13px #8c8c8c;
    display: none;
    border-radius: 8px;
    box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    z-index: 10;
    direction: ltr;
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;

}

.material-input-dropdown-with-label ul li {
    padding: 12px 20px;
    height: 3rem;
    cursor: pointer;
    text-align: right;
}

.material-input-dropdown-with-label ul li:hover {
    background-color: #D7D8D8;
}

.material-input-dropdown-with-label .input-control.active + label + ul {
    display: block;
}


/*
    ===========================================
    ====    Mobile Input Box with +98 label
    ===========================================
    example:

    <div class="input-group mobile-input    [mb-4] (NO ERROR TIMES)    mt-2  [input-group-with-error (ERROR TIME)]">
        <input type="tel" class="form-control persian-numeral"
        aria-label="mobile" aria-describedby="basic-addon1">
        <span class="input-group-text">۹۸+</span>
    </div>

    SHOW ERRORS:
    <div class="d-flex justify-content-start align-items-center mt-1">
        <span class="ms-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M9.99868 13.941C10.1894 13.941 10.3492 13.8765 10.4782 13.7475C10.6072 13.6185 10.6717 13.4586 10.6717 13.2679C10.6717 13.0772 10.6072 12.9173 10.4782 12.7883C10.3492 12.6593 10.1894 12.5948 9.99868 12.5948C9.80797 12.5948 9.64812 12.6593 9.51911 12.7883C9.39012 12.9173 9.32561 13.0772 9.32561 13.2679C9.32561 13.4586 9.39012 13.6185 9.51911 13.7475C9.64812 13.8765 9.80797 13.941 9.99868 13.941ZM9.3737 10.8961H10.6237V5.89612H9.3737V10.8961ZM10.0001 17.9153C8.90513 17.9153 7.87593 17.7075 6.91249 17.292C5.94903 16.8764 5.11096 16.3125 4.39828 15.6001C3.68559 14.8877 3.12137 14.05 2.70564 13.087C2.2899 12.124 2.08203 11.095 2.08203 10.0001C2.08203 8.90513 2.28981 7.87593 2.70536 6.91249C3.12092 5.94903 3.68488 5.11096 4.39724 4.39828C5.10961 3.68559 5.94732 3.12137 6.91034 2.70564C7.87336 2.2899 8.90234 2.08203 9.99728 2.08203C11.0922 2.08203 12.1214 2.28981 13.0849 2.70537C14.0483 3.12092 14.8864 3.68488 15.5991 4.39724C16.3118 5.10962 16.876 5.94732 17.2917 6.91035C17.7075 7.87336 17.9153 8.90234 17.9153 9.99728C17.9153 11.0922 17.7075 12.1214 17.292 13.0849C16.8764 14.0483 16.3125 14.8864 15.6001 15.5991C14.8877 16.3118 14.05 16.876 13.087 17.2917C12.124 17.7075 11.095 17.9153 10.0001 17.9153ZM9.99868 16.6653C11.8598 16.6653 13.4362 16.0195 14.7278 14.7278C16.0195 13.4362 16.6653 11.8598 16.6653 9.99868C16.6653 8.13757 16.0195 6.56118 14.7278 5.26951C13.4362 3.97784 11.8598 3.33201 9.99868 3.33201C8.13757 3.33201 6.56118 3.97784 5.26951 5.26951C3.97784 6.56118 3.33201 8.13757 3.33201 9.99868C3.33201 11.8598 3.97784 13.4362 5.26951 14.7278C6.56118 16.0195 8.13757 16.6653 9.99868 16.6653Z"
                    fill="#B2001A"/>
            </svg>
        </span>
        <text class="text-body-small text-danger">
            {{ error }}
        </text>
    </div>
*/
.mobile-input input {
    border-radius: 0.5rem;
    border: 1px solid #D7D8D8;
    height: 3rem;
    border-radius: 0rem 0.5rem 0.5rem 0rem !important;
}

.mobile-input span {
    border-radius: 0.5rem 0rem 0rem 0.5rem !important;
    background-color: var(--bs-light);
    border-right: 0;
}

.persian-numeral {
    text-align: left;
    direction: ltr;
}


/*
    ============================
    ====    Simple Input Box
    ============================
*/
input.simple-input {
    border-radius: 0.5rem;
    border: 1px solid #D7D8D8;
    height: 3rem;
    border-radius: 0.5rem !important;
}


/*
    ===========================================
    ====    Simple Check Box
    ===========================================
    example:
        <div class="form-check input-form-check mb-3">
            <input class="form-check-input" type="checkbox" value="" id="kardarmani_form_check">
            <label class="form-check-label mx-4 text-body-medium" for="kardarmani_form_check">کاردرمانی</label>
        </div>
*/
.input-form-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input-form-check input {
    margin-left: -0.9em !important;
    /* فاصله‌ای از متن ایجاد می‌کند */
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.125rem;
    border: 2px solid var(--Gray-Gray500, #7D8384) !important;
    display: flex;
    align-items: center !important;
    margin-top: 0 !important;
}

.input-form-check input:focus {
    box-shadow: none !important;
}

.input-form-check input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}


/*
    ===========================================
    ====    Simple Radio Button
    ===========================================
    example:
        <div class="form-check mb-3 position-relative">
            <input class="form-check-input input-radio_button" type="radio" name="filter" value="oldest" id="oldest">
            <label class="form-check-label" for="oldest">قدیمی‌ترین</label>
        </div>

        CHECKED
        <div class="form-check mb-3 position-relative">
            <input class="form-check-input input-radio_button" type="radio" name="filter" value="most-rated" id="most-rated" checked>
            <label class="form-check-label" for="most-rated">بیشترین امتیاز</label>
        </div>
*/

.input-radio_button[type="radio"] {
    margin-left: 0.5rem !important;
    /* فاصله متن از چک باکس رادیویی */
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--Gray-Gray500, #7D8384);
    border-radius: 50%;
    outline: none !important;
    position: relative;
    /* موقعیت‌ دهی برای افزودن دایره داخلی */
    float: right !important;
    display: flex;
    align-items: center !important;
    margin-top: 0 !important;
}

.input-radio_button[type="radio"]:checked {
    background-color: var(--bs-light) !important;
    border: 2.7px solid var(--bs-primary);
}

.input-radio_button[type="radio"]:checked::after {
    content: '';
    /* دایره کوچک داخلی */
    width: 0.75rem;
    /* عرض دایره کوچک */
    height: 0.75rem;
    /* ارتفاع دایره کوچک */
    background-color: var(--bs-primary);
    /* رنگ سبز داخلی */
    border-radius: 50%;
    /* دایره شدن */
    position: absolute;
    /* موقعیت‌دهی نسبی به دایره اصلی */
    top: 50%;
    /* مرکز کردن */
    left: 50%;
    /* مرکز کردن */
    transform: translate(-50%, -50%);
    /* تنظیم موقعیت دقیق در مرکز */
    border: 3px solid var(--bs-primary);
}

.input-radio_button[type="radio"]:focus {
    box-shadow: none !important;
    border: 2.7px solid var(--bs-primary) !important;
}

/*
    ====================================
    ====    Group of Check Buttons
    ====================================
    example:
        <div class=" d-flex flex-wrap text-nowrap mt-3 mb-3 gap-2 row-gap-3">

            <input type="checkbox" class="btn-check " id="btn-check-1" autocomplete="off">
            <label class="btn input-check-button text-body-medium gray-600" for="btn-check-1">
                مورد اول
            </label>

            <input type="checkbox" class="btn-check " id="btn-check-2" autocomplete="off">
            <label class="btn input-check-button  text-body-medium gray-600" for="btn-check-2"> مورد
                دوم
            </label>

            <input type="checkbox" class="btn-check " id="btn-check-3" autocomplete="off">
            <label class="btn input-check-button  text-body-medium gray-600" for="btn-check-3">
                مورد سوم
            </label>

            <input type="checkbox" class="btn-check " id="btn-check-4" autocomplete="off">
            <label class="btn input-check-button  text-body-medium gray-600" for="btn-check-4">
                مورد چهارم
            </label>

            <input type="checkbox" class="btn-check " id="btn-check-5" autocomplete="off">
            <label class="btn input-check-button  text-body-medium gray-600" for="btn-check-5">
                مورد یکی مانده به آخر
            </label>

            <input type="checkbox" class="btn-check " id="btn-check-14" autocomplete="off">
            <label class="btn input-check-button  text-body-medium gray-600" for="btn-check-14">
                سایر موارد
            </label>
        </div>
*/

.input-check-button {
    border: 1px solid #D7D8D8 !important;
    background: #FDFDFD !important;
    border-radius: 0.5rem !important;
}

.btn-check:checked + .input-check-button {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/*
    ===========================================
    ====    Tabs
    ===========================================
    example:

    1- Tab Bar:
        <div class="d-flex justify-content-center mt-4 mx-3" role="tablist">

            <!-- Each Tab Title (First has "active" class) -->
            <button class="tab [active] text-title-medium text-nowrap" role="tab" data-tab="[id tab 1]"
                aria-selected="true" onclick="selectTab(event)">
                در انتظار ویزیت
            </button>

            <button class="tab text-title-medium text-nowrap" role="tab" data-tab="[id tab 2]" aria-selected="false"
                onclick="selectTab(event)">
                ویزیت شده
            </button>

            <button class="tab text-title-medium text-nowrap" role="tab" data-tab="[id tab 3]" aria-selected="false"
                onclick="selectTab(event)">
                لغو شده
            </button>

        </div>


    2- Each Tab Content => Connect tab title to content with [id] & [data-tab]:
        <!-- محتوای تب -->
            <div id="[id tab 1]" class="tab-content [active]">
                <div class="">
                    CONTENT
                </div>
            </div>

            OTHER TABS
            <div id="[id tab 2]" class="tab-content">
                <div class="">
                    CONTENT
                </div>
            </div>


    3- Insert JS:
        <script src="assets/js/tabs.js"></script>
*/

.tab {
    padding: 0.88rem;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    flex: 1;
    text-decoration: none !important;
    color: var(--bs-dark);
}

.tab.active {
    color: var(--bs-primary);
}

.tab:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.2rem;
    border-top-right-radius: 8px;
    /* انحنای دو طرف خط */
    border-top-left-radius: 8px;
    /* انحنای دو طرف خط */
    background-color: var(--bs-primary);
    transition: width 0.2s ease;

}

.tab.active::after {
    width: 100%;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/*
    ===========================================
    ====    Chips
    ===========================================
    example:

    1- html code:
        <div class="chips-container horizontal-scrollable-container d-flex mt-4 "
                id="horizontal-scrollable-container">

            <a class="chips border text-label-large me-3 active" href="#" draggable="false">
                همه پیام ها
            </a>

            <a class="chips border text-label-large" href="#" draggable="false">
                پیام تراپیست
            </a>

            <a class="chips border text-label-large text-nowrap" href="#" draggable="false">
                موجود شدن نوبت
            </a>
            <!-- چیپس های بیشتری می‌توانید اضافه کنید -->
        </div>

    2- Insert JS:
        <script src="assets/js/horizontal-hidden-scrolling.js"></script>
*/
.chips {
    background: none;
    position: relative;
    text-align: center;
    /* متن داخل تب‌ها در مرکز قرار گیرد */
    white-space: nowrap;
    /* جلوگیری از شکست متن */
    border-radius: 0.5rem !important;
    padding: 0.375rem 0.5rem;
    /*height: 2rem;*/
    text-decoration: none;
    color: var(--bs-dark);
}

.chips.active {
    color: var(--bs-light);
    background-color: var(--bs-primary);
}

/* ADDED DURING DEVELOPMENT */
.chips.active:target {
    outline: none;
}

.chips.active:active {
    color: var(--bs-light) !important;
}

.chips:active {
    border-color: var(--bs-primary-light) !important;
    color: var(--bs-primary-light);
}

.chips-container {
    overflow-x: auto;
    /* اسکرول افقی */
    scroll-snap-type: x mandatory;
    /* پیمایش منظم */
    -webkit-overflow-scrolling: touch;
    /* اسکرول نرم در موبایل */
    scrollbar-width: none;
    /* برای مرورگرهای فایرفاکس نوار اسکرول را مخفی می‌کند */
    gap: 0.5rem;
    margin-left: 1rem;
}

/* مخفی کردن نوار اسکرول در مرورگرهای Webkit (مثل کروم و سفاری) */
.chips-container::-webkit-scrollbar {
    display: none;
}


/*
    ===========================================
    ====    Profile Card Item (With Icon)
    ===========================================
    example:

    1. With Icon:

        <div class="border gray-200 profile-card-item-border mx-4 mt-4 mb-3">
            <a href="" class="text-decoration-none">
                <div class="d-flex justify-content-between align-items-center profile-card-item">

                    <div class="d-flex align-items-center">

                        Replace Card Icon
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                            <path>.....</path>
                        </svg>

                        <span class="text-dark text-title-medium-2 mx-1">
                            [CARD TITLE]
                        </span>
                    </div>

                    <div class=" mx-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none">
                            <path
                                d="M11.0563 12.0024L15.6562 16.6024L14.6024 17.6562L8.9486 12.0024L14.6024 6.3486L15.6563 7.40242L11.0563 12.0024Z"
                                fill="#7D8384" />
                        </svg>
                    </div>

                </div>
            </a>
        </div>

    2. Without Icon:
        <div class="border gray-200 profile-card-item-border mx-4 mb-3 mt-4">
            <a href="" class="text-decoration-none">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-dark text-title-medium-2">
                        تشکیل پرونده
                    </div>

                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none">
                            <path
                                d="M11.0563 12.0024L15.6562 16.6024L14.6024 17.6562L8.9486 12.0024L14.6024 6.3486L15.6563 7.40242L11.0563 12.0024Z"
                                fill="#7D8384" />
                        </svg>
                    </div>

                </div>
            </a>
        </div>
*/

/*بوردر دور باتن های نوبت و پیام و ...*/
.profile-card-item-border {
    border: 1px solid;
    border-radius: 0.5rem;
    padding: 1rem;
}

.profile-card-item div svg {
    width: 1.5rem;
    height: 1.5rem;
}


/*
    ===========================================
    ====    THERAPIST CARDS STYLES
    ===========================================
*/

.therapist-card {
    border-radius: 1rem;
    border: 1px solid var(--Gray-Gray200, #D7D8D8);
    background: var(--Gray-Gray200, #FDFDFD);
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.5rem;
}

.therapist-inner-card {
    border-radius: 0.5rem;
    border: 1px solid var(--Gray-Gray200, #D7D8D8);
    background: var(--Gray-Gray200, #FDFDFD);
    width: 100%;
    flex-shrink: 0;
    padding: 0.25rem 1rem;
    height: 2.5rem;
}


.therapist-card-image {
    width: 4.875rem;
    height: 4.875rem;
    border-radius: 4.875rem;
}

.therapist-card-image-small {
    width: 3.875rem;
    height: 3.875rem;
    border-radius: 3.875rem;
}

@media (max-width: 350px) {
    .therapist-card-text {
        font-size: 0.65rem !important;
    }

    .therapist-card-title {
        font-size: 0.85rem !important;
    }
}

.card-badge .badge {
    translate: -1rem;
    padding: 0.0625rem 0.625rem;
    font-weight: 500 !important;
}

.card-link {
    text-underline-offset: 0.3em !important;
}

.vertical-line {
    width: 0.0625rem;
    /* 1px */
    height: 1.5rem;
    /* 24px */
    background-color: #B9BCBC;
}


.therapist-card-image-today {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12.5rem;
}

.therapist-card-program-today {
    width: 85%;
    border-radius: 1rem;
    border: 1px solid var(--Gray-Gray200, #D7D8D8);
    background: var(--Gray-Gray200, #FDFDFD);
    flex-shrink: 0;
    margin-bottom: 1.5rem;
}

.card-badge-program .badge {
    translate: 0rem;
    background-color: #9BA0A0 !important;
    margin-top: 0.75rem;
}


.disable-card div {
    color: #9BA0A0 !important;

}

.disable-card .card-badge-program .badge-therapists {
    color: #F4F4F4 !important;
}

.disable-card img,
.disable-card svg {
    opacity: 0.6;
}

.text-width {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 350px) {
    .time-therapists {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-top: 1.5rem !important;
    }

    .therapist-card-program-today {
        width: 100% !important;
        margin-top: 0 !important;
    }

}