.elementor-1001 .elementor-element.elementor-element-1925aec{--display:flex;}.elementor-1001 .elementor-element.elementor-element-4ab39a5 .elementor-icon-box-wrapper{align-items:end;text-align:right;}.elementor-1001 .elementor-element.elementor-element-4ab39a5{--icon-box-icon-margin:16px;}.elementor-1001 .elementor-element.elementor-element-4ab39a5 .elementor-icon-box-title{margin-block-end:0px;color:#FDAA47;}.elementor-1001 .elementor-element.elementor-element-4ab39a5.elementor-view-stacked .elementor-icon{background-color:#FC5555;}.elementor-1001 .elementor-element.elementor-element-4ab39a5.elementor-view-framed .elementor-icon, .elementor-1001 .elementor-element.elementor-element-4ab39a5.elementor-view-default .elementor-icon{fill:#FC5555;color:#FC5555;border-color:#FC5555;}.elementor-1001 .elementor-element.elementor-element-4ab39a5 .elementor-icon{font-size:44px;}.elementor-1001 .elementor-element.elementor-element-4ab39a5 .elementor-icon-box-title, .elementor-1001 .elementor-element.elementor-element-4ab39a5 .elementor-icon-box-title a{font-size:18px;}.elementor-1001 .elementor-element.elementor-element-4ab39a5 .elementor-icon-box-description{color:#7C7C7C;}@media(max-width:767px){.elementor-1001 .elementor-element.elementor-element-4ab39a5 > .elementor-widget-container{padding:0px 0px 35px 0px;}.elementor-1001 .elementor-element.elementor-element-4ab39a5 .elementor-icon-box-wrapper{text-align:center;}.elementor-1001 .elementor-element.elementor-element-4ab39a5{--icon-box-icon-margin:8px;}.elementor-1001 .elementor-element.elementor-element-4ab39a5 .elementor-icon-box-title{margin-block-end:6px;}}/* Start custom CSS for shortcode, class: .elementor-element-35cbd39 */#bookly-tbs table.dataTable thead th {
color:#ffffff;
 font-weight:600;
 text-align:center !important;
 background: #046bd2
}
.col-md-4 .form-group {
display:none;
}
#bookly-tbs .text-left{
text-align:right !important;
}
select.monthselect.custom-select { 
text-align: right;
}
select.yearselect.custom-select { 
text-align: right;
}
td.sorting_1.dtr-control {
width: 25%;
}
@media screen and (max-width: 600px) {

    /* 1. مخفی کردن هدر اصلی جدول */
    table thead {
        display:none;
    }

    /* 2. تبدیل جدول، ردیف و سلول‌ها به بلوک */
    .bookly-appointments-list table, tbody, tr, td {
        display: block;
        width: 100%;
    }

    /* 3. استایل‌دهی به هر ردیف به عنوان یک کارت مجزا */
    .bookly-appointments-list tbody tr {
        border: 1px solid #ccc;
        border-radius: 10px;
        margin-bottom: 15px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* 4. استایل‌دهی به سلول‌ها برای ایجاد فضای عنوان */
    .bookly-appointments-list tbody tr td {
        border: none;
        padding: 8px 0;
        position: relative;
        padding-left: 50%; /* فضا برای عنوان */
        text-align: left;
    }

    /* 5.  ایجاد عناوین با استفاده از شمارنده‌های CSS */
    .bookly-appointments-list tbody tr td::before {
        /* تعریف شمارنده برای ستون‌ها */
        counter-increment: col-counter;
        /* گرفتن متن عنوان از سلول‌های هدر با استفاده از nth-child */
        content: counter(col-counter) ". ";
        font-weight: bold;
        color: #333;
        position: absolute;
        right: 10px;
        width: calc(50% - 20px);
        text-align: right;
        white-space: nowrap;
    }

    #bookly-tbs table.table tr td:first-child{
        text-align:left;
    }
    #bookly-tbs .table td{
        margin:2px 0;
        border-radius:10px;
    }


    /*  برای هر ستون، محتوای ::before را بازنویسی می‌کنیم */
    
    /* ستون اول: تاریخ */
    #DataTables_Table_0 tbody tr td:nth-of-type(1)::before {content: "تاریخ: ";counter-increment: none;}
    
    /* ستون دوم: مدت زمان */
    #DataTables_Table_0 tbody tr td:nth-of-type(2)::before { content: "مدت زمان: "; counter-increment: none; }
    
    /* ستون سوم: قیمت */
    #DataTables_Table_0 tbody tr td:nth-of-type(3)::before { content: "قیمت: "; counter-increment: none; }
    
    /* ستون چهارم: وضعیت */
    #DataTables_Table_0 tbody tr td:nth-of-type(4)::before { content: "وضعیت: "; counter-increment: none; }
    
    /* ستون پنجم: لغو */
    #DataTables_Table_0 tbody tr td:nth-of-type(5)::before { content: "لغو: "; counter-increment: none; }

   /*برای مودال رزرو من */
    #bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(1) > table > tbody > tr > td:nth-child(1){
        text-align:center;
    }
    .modal-body table.table td{
        text-align:center;
	height:auto;
    }
    #bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(2) > table > tbody > tr > td.text-right,
    #bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(2) > table > tbody > tr > td:nth-child(2),
    #bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(2) > table > tbody > tr > td:nth-child(3){
        text-align: left !important;
    }

      /* ایجاد عناوین برای مودال */
    .modal-body tbody tr td::before {
        counter-increment: col-counter;
        font-weight: bold;
        color: #333;
        position: absolute;
        right: 30px;
        width: calc(50% - 20px);
        text-align: right;
        white-space: nowrap;
    }
    
    #bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(2) > table > tbody > tr > td:nth-child(1)::before {content: "مورد: ";counter-increment: none;}
    #bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(2) > table > tbody > tr > td:nth-child(2)::before { content: "تاریخ: "; counter-increment: none; }
    #bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(2) > table > tbody > tr > td:nth-child(3)::before { content: "ارائه دهنده: "; counter-increment: none; }
    #bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(2) > table > tbody > tr > td:nth-child(4)::before { content: "قیمت: "; counter-increment: none; }
   
}

  /*برای مودال رزرو من در دسکتاپ */
    .modal-body table.table tr th {
        color: #000;
        text-align:center !important;
}
    .modal-body .table-responsive table.table tfoot tr th {
        text-align:left !important;
}

    .modal-body .table-responsive table.table tfoot tr th:nth-child(3) {
        text-align:left !important;
        width:30%
}
#bookly-payment-details-dialog > div > div > div > div.modal-body > div:nth-child(1) > table > tbody > tr > td:nth-child(2) > div:nth-child(3){
    direction:ltr
}/* End custom CSS */