.wpbc_appointment_services_page { min-width: 0; padding: 20px; } .wpbc_appointment_services__filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; } .wpbc_appointment_services__status_filters { align-items: center; display: flex; flex-wrap: wrap; gap: 0; } .wpbc_appointment_services__status_filter { align-items: center; background: #fff; border: 1px solid #dcdcde; border-left-width: 0; color: #50575e; cursor: pointer; display: inline-flex; font: inherit; gap: 7px; min-height: 36px; padding: 6px 12px; } .wpbc_appointment_services__status_filter:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; } .wpbc_appointment_services__status_filter:nth-of-type(4) { border-radius: 0 4px 4px 0; } .wpbc_appointment_services__status_filter strong, .wpbc_appointment_services__provider_total strong { background: #f0f0f1; border-radius: 10px; color: #50575e; font-size: 11px; line-height: 18px; min-width: 18px; padding: 0 5px; text-align: center; } .wpbc_appointment_services__status_filter:hover, .wpbc_appointment_services__status_filter:focus { border-color: #8c8f94; box-shadow: none; color: #1d2327; outline: none; position: relative; z-index: 1; } .wpbc_appointment_services__status_filter.is-active { background: #f0f6fc; border-color: var(--wpbc_admin-theme-color, #2271b1); color: var(--wpbc_admin-theme-color, #2271b1); font-weight: 600; position: relative; z-index: 2; border-left-width:1px; } .wpbc_appointment_services__status_filter.is-active strong { background: var(--wpbc_admin-theme-color, #2271b1); color: #fff; } .wpbc_appointment_services__filter_divider { background: #dcdcde; height: 28px; margin: 0 14px; width: 1px; } .wpbc_appointment_services__provider_total { align-items: center; color: #50575e; display: inline-flex; gap: 7px; min-height: 36px; } .wpbc_appointment_services__filter_controls { display: grid; grid-template-columns: minmax(240px, 480px) minmax(170px, 230px); gap: 10px; } .wpbc_appointment_services__filter_controls input, .wpbc_appointment_services__filter_controls select { box-sizing: border-box; min-height: 38px; max-width: none; width: 100%; } .wpbc_appointment_services__search { position: relative; } .wpbc_appointment_services__search > span { color: #8c8f94; font-size: 16px; left: 10px; position: absolute; top: 5px; } .wpbc_appointment_services__search input { padding-left: 38px; padding-right: 38px; } .wpbc_appointment_services__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .wpbc_appointment_services__search_clear { align-items: center; background: transparent; border: 0; border-radius: 50%; color: #646970; cursor: pointer; display: inline-flex; height: 28px; justify-content: center; padding: 0; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 28px; } .wpbc_appointment_services__search_clear > span { line-height: 1; } .wpbc_appointment_services__search_clear[hidden] { display: none; } .wpbc_appointment_services__search_clear:hover, .wpbc_appointment_services__search_clear:focus-visible { background: #f0f6fc; color: var(--wpbc_admin-theme-color, #2271b1); outline: 2px solid var(--wpbc_admin-theme-color, #2271b1); outline-offset: -2px; } body.rtl .wpbc_appointment_services__search > span { left: auto; right: 10px; } body.rtl .wpbc_appointment_services__search input { padding-left: 38px; padding-right: 38px; } body.rtl .wpbc_appointment_services__search_clear { left: 5px; right: auto; } body.rtl .wpbc_appointment_services__status_filter { border-left-width: 1px; border-right-width: 0; } body.rtl .wpbc_appointment_services__status_filter:first-child { border-radius: 0 4px 4px 0; border-right-width: 1px; } body.rtl .wpbc_appointment_services__status_filter:nth-of-type(4) { border-radius: 4px 0 0 4px; } .wpbc_appointment_services__content { min-height: 360px; position: relative; } .wpbc_appointment_services__catalog_content { min-height: 160px; position: relative; } .wpbc_appointment_services__loading { align-items: center; background: rgba(255, 255, 255, .8); border-radius: 4px; display: flex; inset: 0; justify-content: center; opacity: 0; pointer-events: none; position: absolute; transition: opacity .2s ease-in-out; z-index: 10; } .wpbc_appointment_services__loading.is-visible { opacity: 1; pointer-events: auto; } .wpbc_appointment_services__table .column-service { --wpbc-listing-column-min-width: 280px; --wpbc-listing-column-width: auto; width: auto; } .wpbc_appointment_services__table .column-selection { --wpbc-listing-column-min-width: 45px; width: var(--wpbc-listing-column-min-width); } .wpbc_appointment_services__table .column-duration { --wpbc-listing-column-min-width: 120px; width: var(--wpbc-listing-column-min-width); } .wpbc_appointment_services__table .column-price { --wpbc-listing-column-min-width: 80px; width: var(--wpbc-listing-column-min-width); } .wpbc_appointment_services__table .column-providers { --wpbc-listing-column-min-width: 125px; width: var(--wpbc-listing-column-min-width); } .wpbc_appointment_services__table .column-status { --wpbc-listing-column-min-width: 150px; width: var(--wpbc-listing-column-min-width); } .wpbc_appointment_services__table .column-actions { --wpbc-listing-column-min-width: 70px; width: var(--wpbc-listing-column-min-width); } .wpbc_appointment_services__table thead .column-weekdays { --wpbc-listing-column-min-width: 155px; padding: 8px 4px 6px; text-align: center; width: 155px; } .wpbc_appointment_services__weekday_labels { display: flex; font-size: 9px; font-weight: 400; gap: 6px; margin: 4px auto 0; padding: 0; flex-flow: row nowrap; align-items: center; justify-content: space-around; } .wpbc_appointment_services__weekday_labels i { font-style: normal; } .wpbc_appointment_services__status_header { align-items: center; display: flex; flex-flow: row wrap; gap: 2px; width: 100%; } .wpbc_appointment_services__status_identity { align-items: center; display: flex; flex-flow: row wrap; gap: 2px; justify-content: center; width: 100%; } .wpbc_appointment_services__table tbody .column-weekdays { padding-left: 4px; padding-right: 4px; text-align: center; } .wpbc_appointment_services__item { cursor: pointer; } .wpbc_appointment_services__item:hover, .wpbc_appointment_services__item:focus-visible { background: #f6f7f7; outline: 2px solid transparent; } .wpbc_appointment_services__item.is-selected { background: #f0f6fc; box-shadow: inset 3px 0 0 var(--wpbc_admin-theme-color, #2271b1); } .wpbc_appointment_services__service_identity { align-items: center; display: flex; gap: 10px; min-width: 0; } .wpbc_appointment_services__service_thumbnail { align-items: center; background: #f0f0f1; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; color: #8c8f94; display: inline-flex; flex: 0 0 40px; height: 40px; justify-content: center; outline: #d4d4d7 solid 1px; overflow: hidden; width: 40px; } .wpbc_appointment_services__service_thumbnail img { display: block; height: 100%; max-width: none; object-fit: cover; width: 100%; } .wpbc_appointment_services__service_thumbnail:focus-visible { outline: 2px solid var(--wpbc_admin-theme-color, #2271b1); outline-offset: 2px; } .wpbc_appointment_services__service_copy { display: block; flex: 1 1 auto; max-width: 100%; min-width: 0; overflow: hidden; } .wpbc_appointment_services__inline_identity_fields { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; } .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_title, .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_description { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wpbc_appointment_services__item .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_title { color: #1d2327; font-size: 14px; margin-bottom: 4px; } .wpbc_appointment_services__item .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_description { color: #646970; font-size: 11px; } .wpbc_appointment_services__item .column-duration, .wpbc_appointment_services__item .column-price { font-size: 13px; font-weight: 600; white-space: nowrap; } .wpbc_appointment_services__duration_details { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .wpbc_appointment_services__duration_value { font-size: 13px; font-weight: 600; line-height: 1.3; } .wpbc_appointment_services__buffers_summary { color: #646970; font-size: 10px; font-weight: 400; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wpbc_appointment_services__provider_stack { align-items: center; display: flex; min-width: 90px; } .wpbc_appointment_services__provider_avatar, .wpbc_appointment_services__provider_more { align-items: center; background: #e7ecfb; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; color: #2943a8; display: inline-flex; font-size: 9px; font-weight: 700; height: 30px; justify-content: center; margin-left: -7px; overflow: hidden; width: 30px; } .wpbc_appointment_services__provider_avatar:first-child { margin-left: 0; } a.wpbc_appointment_services__provider_avatar { text-decoration: none; } a.wpbc_appointment_services__provider_avatar:hover, a.wpbc_appointment_services__provider_avatar:focus-visible { border-color: var(--wpbc_admin-theme-color, #2271b1); color: var(--wpbc_admin-theme-color, #2271b1); outline: 2px solid transparent; position: relative; z-index: 1; } .wpbc_appointment_services__provider_avatar img { height: 100%; object-fit: cover; width: 100%; } .wpbc_appointment_services__provider_avatar.has-no-availability { background: #f0f0f1; border-color: #dcdcde; color: #8c8f94; filter: grayscale(1); opacity: .75; } .wpbc_appointment_services__provider_more { background: #f0f0f1; color: #50575e; } .wpbc_appointment_services__no_provider { color: #8c8f94; font-size: 11px; } .wpbc_appointment_services__availability { background: #dcdcde; border-radius: 50%; display: inline-block; flex: 0 0 10px; height: 10px; width: 10px; } .wpbc_appointment_services__availability.is-available { background: #00a32a; } .wpbc_appointment_services__availability_week { align-items: center; display: flex; gap: 0px; justify-content: space-around; } .wpbc_appointment_services__availability_links { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 6px; } .wpbc_appointment_services__availability_link { background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 3px; color: var(--wpbc_admin-theme-color, #2271b1); font-size: 9px; font-weight: 600; line-height: 16px; min-width: 18px; padding: 0 3px; text-align: center; text-decoration: none; display:none; } .wpbc_appointment_services__availability_link:hover, .wpbc_appointment_services__availability_link:focus-visible { background: #f0f6fc; border-color: var(--wpbc_admin-theme-color, #2271b1); box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1); color: var(--wpbc_admin-theme-color, #2271b1); outline: 2px solid transparent; } .wpbc_appointment_services__availability_empty { color: #b32d2e; display: block; font-size: 10px; line-height: 1.25; margin-top: 5px; } .wpbc_appointment_services__status { background: #f0f0f1; border-radius: 12px; color: #50575e; display: inline-block; font-size: 11px; font-weight: 600; line-height: 22px; padding: 1px 14px; white-space: nowrap; } .wpbc_appointment_services__id { font-size: 9px; font-weight: 600; padding: 0 10px; white-space: nowrap; } .wpbc_appointment_services__status.status-active { background: #f7f7f6; color: #218534; } .wpbc_appointment_services__status.status-inactive { background: #fff7e6; color: #8a5700; } .wpbc_appointment_services__status.status-archived { background: #f0f0f1; color: #646970; } .wpbc_appointment_services__item .column-actions { white-space: nowrap; } .wpbc_appointment_services__item .column-actions button { color: #646970; font-size: 15px; margin-right: 12px; text-decoration: none; } .wpbc_appointment_services__item .column-actions button:hover, .wpbc_appointment_services__item .column-actions button:focus { color: var(--wpbc_admin-theme-color, #2271b1); outline: none; } .wpbc_appointment_services__empty { color: #646970; display: flex; flex-flow: row wrap; gap: 8px; justify-content: center; align-content: center; align-items: center; min-height: 150px; text-align: center; } .wpbc_appointment_services__empty[hidden], .wpbc_appointment_services__list[hidden] { display: none; } .wpbc_appointment_services__empty > span { color: #8c8f94; font-size: 38px; } .wpbc_appointment_services__empty h2, .wpbc_appointment_services__empty p { margin: 0; } .wpbc_appointment_services__empty.is-storage-notice { background: #fff; border: 1px dashed #c3c4c7; border-radius: 4px; box-sizing: border-box; min-height: 240px; padding: 30px; } .wpbc_appointment_services__empty--error > span { color: #b32d2e; } .wpbc_appointment_services__table--compact td, .wpbc_appointment_services__table--compact th { padding-bottom: 8px; padding-top: 8px; } .wpbc_appointment_services__table--compact .wpbc_appointment_services__service_thumbnail { flex-basis: 36px; height: 36px; width: 36px; } .wpbc_appointment_services__table .column-selection, .wpbc_appointment_services__table .wpbc_ui_listing__selection_column { box-sizing: border-box; min-width: 36px; padding-left: 4px; padding-right: 4px; text-align: center; width: 36px; } .wpbc_appointment_services__cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); padding: 16px; } .wpbc_appointment_services__cards_header { background: #fff; border-block-end: 1px solid #dcdcde; padding: 12px 16px; } .wpbc_appointment_services__cards_header_controls { align-items: center; display: flex; flex-flow: row wrap; gap: 12px; justify-content: space-between; } .wpbc_appointment_services__cards_select_all { align-items: center; cursor: pointer; display: inline-flex; gap: 7px; margin: 0; } .wpbc_appointment_services__cards_select_all input { margin: 0; } .wpbc_appointment_services__cards_sort { align-items: center; display: flex; flex-flow: row wrap; gap: 8px; } .wpbc_appointment_services__cards_sort > span { color: #646970; font-size: 12px; } .wpbc_appointment_services__cards_sort a { align-items: center; border-radius: 3px; display: inline-flex; gap: 4px; padding: 5px 7px; text-decoration: none; } .wpbc_appointment_services__cards_sort a.is-active { background: #f0f6fc; font-weight: 600; } .wpbc_appointment_services__card { background: #fff; border: 1px solid #dcdcde; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); box-sizing: border-box; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; padding: 0; position: relative; } .wpbc_appointment_services__card:hover, .wpbc_appointment_services__card:focus-visible { border-color: var(--wpbc_admin-theme-color, #2271b1); box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1); } .wpbc_appointment_services__item.is-selected, .wpbc_appointment_services__card.is-selected, .wpbc_appointment_services__card.is-inspector-selected, .wpbc_appointment_services__item.is-inspector-selected { background: #f0f6fc; border-color: var(--wpbc_admin-theme-color, #2271b1); box-shadow: inset 3px 0 0 var(--wpbc_admin-theme-color, #2271b1); } body.rtl .wpbc_appointment_services__item.is-selected, body.rtl .wpbc_appointment_services__card.is-selected, body.rtl .wpbc_appointment_services__item.is-inspector-selected, body.rtl .wpbc_appointment_services__card.is-inspector-selected { box-shadow: inset -3px 0 0 var(--wpbc_admin-theme-color, #2271b1); } .wpbc_appointment_services__item.is-recently-saved { animation: wpbc-appointment-service-saved-border 2.8s ease-out; } .wpbc_appointment_services__item.is-recently-saved > td { animation: wpbc-appointment-service-saved-background 2.8s ease-out; } .wpbc_appointment_services__card.is-recently-saved { animation: wpbc-appointment-service-saved-card 2.8s ease-out; } @keyframes wpbc-appointment-service-saved-border { 0%, 45% { box-shadow: inset 3px 0 #00a32a; } 100% { box-shadow: inset 3px 0 transparent; } } @keyframes wpbc-appointment-service-saved-background { 0%, 45% { background: #edfaef; } 100% { background: transparent; } } @keyframes wpbc-appointment-service-saved-card { 0%, 45% { background: #edfaef; border-color: #00a32a; box-shadow: inset 3px 0 #00a32a; } 100% { background: #fff; border-color: #dcdcde; box-shadow: inset 3px 0 transparent; } } .wpbc_appointment_services__card_media { align-items: center; background: #f0f0f1; color: #8c8f94; display: flex; height: 170px; justify-content: center; overflow: hidden; position: relative; } .wpbc_appointment_services__card_media > img { display: block; height: 100%; max-width: none; object-fit: cover; width: 100%; } .wpbc_appointment_services__card_media.has-placeholder > span { font-size: 44px; } .wpbc_appointment_services__card_select { align-items: center; background: rgba(255, 255, 255, .82); border-radius: 50%; display: flex; height: 42px; justify-content: center; left: 14px; position: absolute; top: 14px; width: 42px; z-index: 2; } .wpbc_appointment_services__card_select input[type="checkbox"] { margin: 0; } body.rtl .wpbc_appointment_services__card_select { left: auto; right: 14px; } .wpbc_appointment_services__card_identity { border-bottom: 1px solid #f0f0f1; margin: 0 16px 12px; padding: 12px 0; } .wpbc_appointment_services__card_identity .wpbc_appointment_services__service_thumbnail { margin-top: -34px; position: relative; z-index: 1; } .wpbc_appointment_services__card_fields { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px 16px; } .wpbc_appointment_services__card_field { border: 1px solid #f0f0f1; border-radius: 4px; box-sizing: border-box; min-width: 0; padding: 10px; } .wpbc_appointment_services__card_field > span { color: #646970; display: block; font-size: 11px; margin-bottom: 7px; } .wpbc_appointment_services__card_actions { border-top: 1px solid #f0f0f1; margin: auto 0 0; padding: 12px 16px; text-align: right; } body.rtl .wpbc_appointment_services__card_actions { text-align: left; } .wpbc_appointment_services__card .wpbc_appointment_services__availability_week { min-width: Min( 130px, 100% ); } .wpbc_appointment_services__inline_input, .wpbc_appointment_services__inline_number, .wpbc_appointment_services__inline_textarea { box-sizing: border-box; margin: 0 !important; max-width: 100%; width: 100%; } .wpbc_appointment_services__inline_field { display: block; min-width: 0; width: 100%; } .wpbc_appointment_services__inline_identity_fields .wpbc_appointment_services__inline_field + .wpbc_appointment_services__inline_field { margin-top: 6px; } .wpbc_appointment_services__inline_input { font-weight: 600; } .wpbc_appointment_services__inline_textarea { min-height: 68px; resize: vertical; } .wpbc_appointment_services__inline_number { min-width: 82px; } .wpbc_appointment_services_page .wpbc_appointment_services__inline_toggle.is-active { background: var(--wpbc_admin-theme-color, #2271b1); border-color: var(--wpbc_admin-theme-color, #2271b1); color: #fff; } .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__selection_summary:not(.wpbc_appointment_services__inline_bar) { display: none !important; } .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__item { cursor: default; } .wpbc_appointment_services__inline_bar_status { align-items: baseline; display: flex; flex: 1 1 420px; flex-flow: row wrap; gap: 5px 12px; min-width: 0; } .wpbc_appointment_services__inline_bar_status strong { color: #1d2327; } .wpbc_appointment_services__inline_bar_status .description { flex: 1 1 100%; margin: 0; } .wpbc_appointment_services__inline_bar_actions { flex: 0 0 auto; } .wpbc_appointment_services__operation { box-sizing: border-box; padding: 16px 18px 28px; } .wpbc_appointment_services__operation > h2 { font-size: 18px; margin: 0 0 8px; } .wpbc_appointment_services__bulk_field { background: #fff; border: 1px solid #dcdcde; border-radius: 5px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; margin: 12px 0; padding: 14px; } .wpbc_appointment_services__bulk_field > span { align-items: center; display: flex; gap: 8px; } .wpbc_appointment_services__bulk_field input:not([type="checkbox"]), .wpbc_appointment_services__bulk_field select { box-sizing: border-box; width: 100%; } .wpbc_appointment_services__bulk_field input[type="range"] { margin: 0; } .wpbc_appointment_services__media { align-items: flex-start; display: flex; flex-flow: row wrap; gap: 10px; justify-content: space-between; margin-bottom: 8px; } .wpbc_appointment_services__media_preview { align-items: center; appearance: none; background: #fcfcfc; border: 1px solid #c3c4c7; border-radius: 4px; box-sizing: border-box; color: #507593; cursor: pointer; display: flex; flex: 1 1 100%; height: 140px; justify-content: center; margin: 0 0 12px; max-height: 140px; min-height: 140px; overflow: hidden; padding: 4px; width: 100%; } .wpbc_appointment_services__media_preview:focus-visible { border-color: var(--wpbc_admin-theme-color, #2271b1); box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1); outline: 2px solid transparent; } .wpbc_appointment_services__media_preview:disabled { cursor: default; opacity: .65; } .wpbc_appointment_services__media_image { display: block; height: 100%; max-width: none; object-fit: cover; width: 100%; } .wpbc_appointment_services__media_image[hidden], .wpbc_appointment_services__media_placeholder[hidden] { display: none; } .wpbc_appointment_services__media_placeholder::before { font-size: 50px; } .wpbc_appointment_services__media_actions { align-items: stretch; display: flex; flex: 1 1 auto; flex-flow: row wrap; gap: 8px; justify-content: flex-start; width: 100%; } .wpbc_appointment_services__picture_row .wpbc_bfb__help { margin-bottom: 0; } .wpbc_appointment_services__rightbar .inspector__control, .wpbc_appointment_services__rightbar .inspector__input { box-sizing: border-box; max-width: none; width: 100%; } .wpbc_appointment_services__footer_actions { align-items: stretch; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 18px; width: 100%; } .wpbc_appointment_services__footer_actions .button { align-items: center; box-sizing: border-box; display: flex; flex: 1 1 auto; gap: 6px; justify-content: center; margin: 0; min-width: 0; } .wpbc_appointment_services__footer_actions .button[hidden] { display: none; } .wpbc_appointment_services__footer_actions[hidden] { display: none; } .wpbc_appointment_services__right_sidebar_footer[hidden] { display: none; } @keyframes wpbc_appointment_services__focus_pulse { 0% { box-shadow: 0 0 0 4px rgba(34, 113, 177, .3); } 100% { box-shadow: 0 0 0 0 transparent; } } .wpbc_appointment_services__focus_pulse { animation: wpbc_appointment_services__focus_pulse .8s ease-out; position: relative; } @media (prefers-reduced-motion: reduce) { .wpbc_appointment_services__focus_pulse { animation: none; outline: 2px solid var(--wpbc_admin-theme-color, #2271b1); outline-offset: -2px; } } .wpbc_appointment_services__status_options { display: flex; flex-direction: column; gap: 8px; } .wpbc_appointment_services__status_options label { align-items: center; cursor: pointer; display: flex; gap: 7px; line-height: 1.35; margin: 0; } .wpbc_appointment_services__status_options input[type="radio"] { margin: 0; } .wpbc_appointment_services__number_control { display: flex; flex-direction: column; gap: 8px; width: 100%; } .wpbc_appointment_services__number_slider { box-sizing: border-box; cursor: pointer; margin: 0; min-height: 20px; padding: 0; width: 100%; } .wpbc_appointment_services__number_slider:disabled { cursor: default; opacity: .55; } .wpbc_appointment_services__placeholder { background: #f6f7f7; border: 1px dashed #c3c4c7; color: #646970; padding: 12px; } .wpbc_appointment_services__help { padding: 0 16px 16px; } .wpbc_appointment_services__help h4 { margin: 18px 0 6px; } .wpbc_appointment_services__help ol, .wpbc_appointment_services__help ul { margin: 8px 0 0 20px; } .wpbc_appointment_services__help li { line-height: 1.6; margin-bottom: 5px; } .wpbc_appointment_services_page.is-busy { opacity: .72; pointer-events: none; } .wpbc_appointment_services__provider_notice { align-items: center; background: #fff8e5; border: 1px solid #dba617; border-radius: 4px; box-sizing: border-box; display: flex; gap: 12px; margin-bottom: 14px; padding: 12px 14px; } .wpbc_appointment_services__provider_notice[hidden] { display: none; } .wpbc_appointment_services__provider_notice > span { color: #996800; font-size: 20px; } .wpbc_appointment_services__provider_notice > div { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; } .wpbc_appointment_services__provider_notice > div > span { color: #646970; } .wpbc_appointment_services__provider_notice .button { flex: 0 0 auto; } @media (max-width: 782px) { .wpbc_appointment_services__cards_header_controls, .wpbc_appointment_services__cards_sort { align-items: flex-start; flex-direction: column; } .wpbc_appointment_services__filter_controls { grid-template-columns: 1fr; } .wpbc_appointment_services__filter_divider { display: none; } .wpbc_appointment_services__provider_total { margin-left: 10px; } .wpbc_appointment_services__provider_notice { align-items: flex-start; flex-wrap: wrap; } .wpbc_appointment_services__provider_notice .button { margin-left: 32px; } .wpbc_appointment_services__table tbody .column-service { flex-basis: 100%; padding-right: 76px; width: 100%; } .wpbc_appointment_services__table tbody .column-service::before, .wpbc_appointment_services__table tbody .column-actions::before { display: none; } .wpbc_appointment_services__table tbody .column-providers, .wpbc_appointment_services__table tbody .column-weekdays, .wpbc_appointment_services__table tbody .column-status { flex-basis: 100%; width: 100%; } .wpbc_appointment_services__table tbody .column-weekdays { align-items: flex-start; flex-wrap: wrap; text-align: left; } .wpbc_appointment_services__provider_stack, .wpbc_appointment_services__availability_week { flex: 1 1 auto; } .wpbc_appointment_services__availability_week { min-width: 140px; } .wpbc_appointment_services__availability_links, .wpbc_appointment_services__availability_empty { box-sizing: border-box; flex: 0 0 calc(100% - 104px); margin-left: 104px; } .wpbc_appointment_services__table tbody .column-actions { border: 0; padding: 0; position: absolute; right: 12px; top: 20px; width: auto; } body.rtl .wpbc_appointment_services__provider_total { margin-left: 0; margin-right: 10px; } body.rtl .wpbc_appointment_services__provider_notice .button { margin-left: 0; margin-right: 32px; } body.rtl .wpbc_appointment_services__table tbody .column-service { padding-left: 76px; padding-right: 12px; } body.rtl .wpbc_appointment_services__availability_links, body.rtl .wpbc_appointment_services__availability_empty { margin-left: 0; margin-right: 104px; } body.rtl .wpbc_appointment_services__table tbody .column-actions { left: 12px; right: auto; } } @media (max-width: 480px) { .wpbc_appointment_services__cards { grid-template-columns: 1fr; padding: 10px; } .wpbc_appointment_services__card_fields { grid-template-columns: 1fr; } .wpbc_appointment_services__table tbody .column-duration, .wpbc_appointment_services__table tbody .column-price { flex-basis: 100%; width: 100%; } }