PluginProbe
Booking Calendar / 11.7
Booking Calendar v11.7
11.9 11.8.4 11.8.3 11.8.2 11.8.1 11.8 11.7 11.6.1 11.6 11.5 11.4.3 11.4.2 11.4.1 11.4 11.3 11.2.1 11.2 11.1 11.0 10.15.7 10.15.6 10.1.3 10.10 10.10.1 10.10.2 All 205 releases
booking / includes / page-appointment-services / _out / appointment_services_page.css

appointment_services_page.css in Booking Calendar 11.7, at includes/page-appointment-services/_out/appointment_services_page.css

1,296 lines 33.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wpbc_ui_el__vert_right_bar__wrapper_opened .wpbc_appointment_services_page {
2 opacity: 20%
3 }
4 .wpbc_admin .wpbc_ui_el__vert_right_bar__wrapper {
5 --wpbc_ui_left_vert_nav__width_max: Min(490px, 100%)
6 }
7 .wpbc_appointment_services_page {
8 min-width: 0;
9 padding: 20px
10 }
11 .wpbc_appointment_services__filters {
12 display: -ms-flexbox;
13 display: flex;
14 -ms-flex-direction: column;
15 flex-direction: column;
16 gap: 14px;
17 margin-bottom: 16px
18 }
19 .wpbc_appointment_services__status_filters {
20 -ms-flex-align: center;
21 align-items: center;
22 display: -ms-flexbox;
23 display: flex;
24 -ms-flex-wrap: wrap;
25 flex-wrap: wrap;
26 gap: 0
27 }
28 .wpbc_appointment_services__status_filter {
29 -ms-flex-align: center;
30 align-items: center;
31 background: #fff;
32 border: 1px solid #dcdcde;
33 border-left-width: 0;
34 color: #50575e;
35 cursor: pointer;
36 display: -ms-inline-flexbox;
37 display: inline-flex;
38 font: inherit;
39 gap: 7px;
40 min-height: 36px;
41 padding: 6px 12px
42 }
43 .wpbc_appointment_services__status_filter:first-child {
44 border-left-width: 1px;
45 border-radius: 4px 0 0 4px
46 }
47 .wpbc_appointment_services__status_filter:nth-of-type(4) {
48 border-radius: 0 4px 4px 0
49 }
50 .wpbc_appointment_services__provider_total strong,
51 .wpbc_appointment_services__status_filter strong {
52 background: #f0f0f1;
53 border-radius: 10px;
54 color: #50575e;
55 font-size: 11px;
56 line-height: 18px;
57 min-width: 18px;
58 padding: 0 5px;
59 text-align: center
60 }
61 .wpbc_appointment_services__status_filter:focus,
62 .wpbc_appointment_services__status_filter:hover {
63 border-color: #8c8f94;
64 box-shadow: none;
65 color: #1d2327;
66 outline: 0;
67 position: relative;
68 z-index: 1
69 }
70 .wpbc_appointment_services__status_filter.is-active {
71 background: #f0f6fc;
72 border-color: var(--wpbc_admin-theme-color,#2271b1);
73 color: var(--wpbc_admin-theme-color,#2271b1);
74 font-weight: 600;
75 position: relative;
76 z-index: 2;
77 border-left-width: 1px
78 }
79 .wpbc_appointment_services__status_filter.is-active strong {
80 background: var(--wpbc_admin-theme-color,#2271b1);
81 color: #fff
82 }
83 .wpbc_appointment_services__filter_divider {
84 background: #dcdcde;
85 height: 28px;
86 margin: 0 14px;
87 width: 1px
88 }
89 .wpbc_appointment_services__provider_total {
90 -ms-flex-align: center;
91 align-items: center;
92 color: #50575e;
93 display: -ms-inline-flexbox;
94 display: inline-flex;
95 gap: 7px;
96 min-height: 36px
97 }
98 .wpbc_appointment_services__filter_controls {
99 display: grid;
100 grid-template-columns: minmax(240px,480px) minmax(170px,230px);
101 gap: 10px
102 }
103 .wpbc_appointment_services__filter_controls input,
104 .wpbc_appointment_services__filter_controls select {
105 box-sizing: border-box;
106 min-height: 38px;
107 max-width: none;
108 width: 100%
109 }
110 .wpbc_appointment_services__search {
111 position: relative
112 }
113 .wpbc_appointment_services__search > span {
114 color: #8c8f94;
115 font-size: 16px;
116 left: 10px;
117 position: absolute;
118 top: 5px
119 }
120 .wpbc_appointment_services__search input {
121 padding-left: 38px;
122 padding-right: 38px
123 }
124 .wpbc_appointment_services__search input[type=search]::-webkit-search-cancel-button {
125 appearance: none
126 }
127 .wpbc_appointment_services__search_clear {
128 -ms-flex-align: center;
129 align-items: center;
130 background: 0 0;
131 border: 0;
132 border-radius: 50%;
133 color: #646970;
134 cursor: pointer;
135 display: -ms-inline-flexbox;
136 display: inline-flex;
137 height: 28px;
138 -ms-flex-pack: center;
139 justify-content: center;
140 padding: 0;
141 position: absolute;
142 right: 5px;
143 top: 50%;
144 -ms-transform: translateY(-50%);
145 transform: translateY(-50%);
146 width: 28px
147 }
148 .wpbc_appointment_services__search_clear > span {
149 line-height: 1
150 }
151 .wpbc_appointment_services__search_clear[hidden] {
152 display: none
153 }
154 .wpbc_appointment_services__search_clear:focus-visible,
155 .wpbc_appointment_services__search_clear:hover {
156 background: #f0f6fc;
157 color: var(--wpbc_admin-theme-color,#2271b1);
158 outline: 2px solid var(--wpbc_admin-theme-color,#2271b1);
159 outline-offset: -2px
160 }
161 body.rtl .wpbc_appointment_services__search > span {
162 left: auto;
163 right: 10px
164 }
165 body.rtl .wpbc_appointment_services__search input {
166 padding-left: 38px;
167 padding-right: 38px
168 }
169 body.rtl .wpbc_appointment_services__search_clear {
170 left: 5px;
171 right: auto
172 }
173 body.rtl .wpbc_appointment_services__status_filter {
174 border-left-width: 1px;
175 border-right-width: 0
176 }
177 body.rtl .wpbc_appointment_services__status_filter:first-child {
178 border-radius: 0 4px 4px 0;
179 border-right-width: 1px
180 }
181 body.rtl .wpbc_appointment_services__status_filter:nth-of-type(4) {
182 border-radius: 4px 0 0 4px
183 }
184 .wpbc_appointment_services__content {
185 min-height: 360px;
186 position: relative
187 }
188 .wpbc_appointment_services__catalog_content {
189 min-height: 160px;
190 position: relative
191 }
192 .wpbc_appointment_services__loading {
193 -ms-flex-align: center;
194 align-items: center;
195 background: rgba(255,255,255,.8);
196 border-radius: 4px;
197 display: -ms-flexbox;
198 display: flex;
199 inset: 0;
200 -ms-flex-pack: center;
201 justify-content: center;
202 opacity: 0;
203 pointer-events: none;
204 position: absolute;
205 transition: opacity .2s ease-in-out;
206 z-index: 10
207 }
208 .wpbc_appointment_services__loading.is-visible {
209 opacity: 1;
210 pointer-events: auto
211 }
212 .wpbc_appointment_services__table .column-service {
213 --wpbc-listing-column-min-width: 280px;
214 --wpbc-listing-column-width: auto;
215 width: auto
216 }
217 .wpbc_appointment_services__table .column-selection {
218 --wpbc-listing-column-min-width: 45px;
219 width: var(--wpbc-listing-column-min-width)
220 }
221 .wpbc_appointment_services__table .column-duration {
222 --wpbc-listing-column-min-width: 120px;
223 width: var(--wpbc-listing-column-min-width)
224 }
225 .wpbc_appointment_services__table .column-price {
226 --wpbc-listing-column-min-width: 115px;
227 width: var(--wpbc-listing-column-min-width)
228 }
229 .wpbc_appointment_services__table .column-providers {
230 --wpbc-listing-column-min-width: 125px;
231 width: var(--wpbc-listing-column-min-width)
232 }
233 .wpbc_appointment_services__table .column-status {
234 --wpbc-listing-column-min-width: 150px;
235 width: var(--wpbc-listing-column-min-width)
236 }
237 .wpbc_appointment_services__table .column-actions {
238 --wpbc-listing-column-min-width: 70px;
239 width: var(--wpbc-listing-column-min-width)
240 }
241 .wpbc_appointment_services__table thead .column-weekdays {
242 --wpbc-listing-column-min-width: 155px;
243 padding: 8px 4px 6px;
244 text-align: center;
245 width: 155px
246 }
247 .wpbc_appointment_services__weekday_labels {
248 display: -ms-flexbox;
249 display: flex;
250 font-size: 9px;
251 font-weight: 400;
252 gap: 6px;
253 margin: 4px auto 0;
254 padding: 0;
255 -ms-flex-flow: row nowrap;
256 flex-flow: row nowrap;
257 -ms-flex-align: center;
258 align-items: center;
259 -ms-flex-pack: distribute;
260 justify-content: space-around
261 }
262 .wpbc_appointment_services__weekday_labels i {
263 font-style: normal
264 }
265 .wpbc_appointment_services__status_header {
266 -ms-flex-align: center;
267 align-items: center;
268 display: -ms-flexbox;
269 display: flex;
270 -ms-flex-flow: row wrap;
271 flex-flow: row wrap;
272 gap: 2px;
273 width: 100%
274 }
275 .wpbc_appointment_services__status_identity {
276 -ms-flex-align: center;
277 align-items: center;
278 display: -ms-flexbox;
279 display: flex;
280 -ms-flex-flow: row wrap;
281 flex-flow: row wrap;
282 gap: 2px;
283 -ms-flex-pack: center;
284 justify-content: center;
285 width: 100%
286 }
287 .wpbc_appointment_services__table tbody .column-weekdays {
288 padding-left: 4px;
289 padding-right: 4px;
290 text-align: center
291 }
292 .wpbc_appointment_services__item {
293 cursor: pointer
294 }
295 .wpbc_appointment_services__item:focus-visible,
296 .wpbc_appointment_services__item:hover {
297 background: #f6f7f7;
298 outline: transparent solid 2px
299 }
300 .wpbc_appointment_services__item.is-selected {
301 box-shadow: inset 3px 0 0 var(--wpbc_admin-theme-color,#2271b1)
302 }
303 .wpbc_appointment_services__service_identity {
304 -ms-flex-align: center;
305 align-items: center;
306 display: -ms-flexbox;
307 display: flex;
308 gap: 10px;
309 min-width: 0
310 }
311 .wpbc_appointment_services__service_thumbnail {
312 -ms-flex-align: center;
313 align-items: center;
314 background: #f0f0f1;
315 border: 2px solid #fff;
316 border-radius: 50%;
317 box-sizing: border-box;
318 color: #8c8f94;
319 display: -ms-inline-flexbox;
320 display: inline-flex;
321 -ms-flex: 0 0 40px;
322 flex: 0 0 40px;
323 height: 40px;
324 -ms-flex-pack: center;
325 justify-content: center;
326 outline: #d4d4d7 solid 1px;
327 overflow: hidden;
328 width: 40px
329 }
330 .wpbc_appointment_services__service_thumbnail img {
331 display: block;
332 height: 100%;
333 max-width: none;
334 object-fit: cover;
335 width: 100%
336 }
337 .wpbc_appointment_services__service_thumbnail:focus-visible {
338 outline: 2px solid var(--wpbc_admin-theme-color,#2271b1);
339 outline-offset: 2px
340 }
341 .wpbc_appointment_services__service_copy {
342 display: block;
343 -ms-flex: 1 1 auto;
344 flex: 1 1 auto;
345 max-width: 100%;
346 min-width: 0;
347 overflow: hidden
348 }
349 .wpbc_appointment_services__inline_identity_fields {
350 display: -ms-flexbox;
351 display: flex;
352 -ms-flex: 1 1 auto;
353 flex: 1 1 auto;
354 -ms-flex-direction: column;
355 flex-direction: column;
356 gap: 6px;
357 min-width: 0
358 }
359 .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_description,
360 .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_title {
361 display: block;
362 max-width: 100%;
363 min-width: 0;
364 overflow: hidden;
365 text-overflow: ellipsis;
366 white-space: nowrap
367 }
368 .wpbc_appointment_services__item .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_title {
369 color: #1d2327;
370 font-size: 14px;
371 margin-bottom: 4px
372 }
373 .wpbc_appointment_services__item .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_description {
374 color: #646970;
375 font-size: 11px
376 }
377 .wpbc_appointment_services__item .column-duration,
378 .wpbc_appointment_services__item .column-price {
379 font-size: 13px;
380 font-weight: 600;
381 white-space: nowrap
382 }
383 .wpbc_appointment_services__duration_details {
384 display: -ms-flexbox;
385 display: flex;
386 -ms-flex-direction: column;
387 flex-direction: column;
388 gap: 3px;
389 min-width: 0
390 }
391 .wpbc_appointment_services__duration_value {
392 font-size: 13px;
393 font-weight: 600;
394 line-height: 1.3
395 }
396 .wpbc_appointment_services__buffers_summary {
397 color: #646970;
398 font-size: 10px;
399 font-weight: 400;
400 line-height: 1.3;
401 overflow: hidden;
402 text-overflow: ellipsis;
403 white-space: nowrap
404 }
405 .wpbc_appointment_services__provider_stack {
406 -ms-flex-align: center;
407 align-items: center;
408 display: -ms-flexbox;
409 display: flex;
410 min-width: 90px
411 }
412 .wpbc_appointment_services__provider_avatar,
413 .wpbc_appointment_services__provider_more {
414 -ms-flex-align: center;
415 align-items: center;
416 background: #e7ecfb;
417 border: 2px solid #fff;
418 border-radius: 50%;
419 box-sizing: border-box;
420 color: #2943a8;
421 display: -ms-inline-flexbox;
422 display: inline-flex;
423 font-size: 9px;
424 font-weight: 700;
425 height: 30px;
426 -ms-flex-pack: center;
427 justify-content: center;
428 margin-left: -7px;
429 overflow: hidden;
430 width: 30px
431 }
432 .wpbc_appointment_services__provider_avatar:first-child {
433 margin-left: 0
434 }
435 a.wpbc_appointment_services__provider_avatar {
436 text-decoration: none
437 }
438 a.wpbc_appointment_services__provider_avatar:focus-visible,
439 a.wpbc_appointment_services__provider_avatar:hover {
440 border-color: var(--wpbc_admin-theme-color,#2271b1);
441 color: var(--wpbc_admin-theme-color,#2271b1);
442 outline: transparent solid 2px;
443 position: relative;
444 z-index: 1
445 }
446 .wpbc_appointment_services__provider_avatar img {
447 height: 100%;
448 object-fit: cover;
449 width: 100%
450 }
451 .wpbc_appointment_services__provider_avatar.has-no-availability {
452 background: #f0f0f1;
453 border-color: #dcdcde;
454 color: #8c8f94;
455 filter: grayscale(1);
456 opacity: .75
457 }
458 .wpbc_appointment_services__provider_more {
459 background: #f0f0f1;
460 color: #50575e
461 }
462 .wpbc_appointment_services__no_provider {
463 color: #8c8f94;
464 font-size: 11px
465 }
466 .wpbc_appointment_services__availability {
467 background: #dcdcde;
468 border-radius: 50%;
469 display: inline-block;
470 -ms-flex: 0 0 10px;
471 flex: 0 0 10px;
472 height: 10px;
473 width: 10px
474 }
475 .wpbc_appointment_services__availability.is-available {
476 background: #00a32a
477 }
478 .wpbc_appointment_services__availability_week {
479 -ms-flex-align: center;
480 align-items: center;
481 display: -ms-flexbox;
482 display: flex;
483 gap: 0;
484 -ms-flex-pack: distribute;
485 justify-content: space-around
486 }
487 .wpbc_appointment_services__availability_links {
488 display: -ms-flexbox;
489 display: flex;
490 -ms-flex-wrap: wrap;
491 flex-wrap: wrap;
492 gap: 3px;
493 -ms-flex-pack: center;
494 justify-content: center;
495 margin-top: 6px
496 }
497 .wpbc_appointment_services__availability_link {
498 background: #f6f7f7;
499 border: 1px solid #dcdcde;
500 border-radius: 3px;
501 color: var(--wpbc_admin-theme-color,#2271b1);
502 font-size: 9px;
503 font-weight: 600;
504 line-height: 16px;
505 min-width: 18px;
506 padding: 0 3px;
507 text-align: center;
508 text-decoration: none;
509 display: none
510 }
511 .wpbc_appointment_services__availability_link:focus-visible,
512 .wpbc_appointment_services__availability_link:hover {
513 background: #f0f6fc;
514 border-color: var(--wpbc_admin-theme-color,#2271b1);
515 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color,#2271b1);
516 color: var(--wpbc_admin-theme-color,#2271b1);
517 outline: transparent solid 2px
518 }
519 .wpbc_appointment_services__availability_empty {
520 color: #b32d2e;
521 display: block;
522 font-size: 10px;
523 line-height: 1.25;
524 margin-top: 5px
525 }
526 .wpbc_appointment_services__status {
527 background: #f0f0f1;
528 border-radius: 12px;
529 color: #50575e;
530 display: inline-block;
531 font-size: 11px;
532 font-weight: 600;
533 line-height: 22px;
534 padding: 1px 14px;
535 white-space: nowrap
536 }
537 .wpbc_appointment_services__id {
538 font-size: 9px;
539 font-weight: 600;
540 padding: 0 10px;
541 white-space: nowrap
542 }
543 .wpbc_appointment_services__status.status-active {
544 background: #f7f7f6;
545 color: #218534
546 }
547 .wpbc_appointment_services__status.status-inactive {
548 background: #fff7e6;
549 color: #8a5700
550 }
551 .wpbc_appointment_services__status.status-archived {
552 background: #f0f0f1;
553 color: #646970
554 }
555 .wpbc_appointment_services__item .column-actions {
556 white-space: nowrap
557 }
558 .wpbc_appointment_services__item .column-actions button {
559 color: #646970;
560 font-size: 15px;
561 margin-right: 12px;
562 text-decoration: none
563 }
564 .wpbc_appointment_services__item .column-actions button:focus,
565 .wpbc_appointment_services__item .column-actions button:hover {
566 color: var(--wpbc_admin-theme-color,#2271b1);
567 outline: 0
568 }
569 .wpbc_appointment_services__empty {
570 color: #646970;
571 display: -ms-flexbox;
572 display: flex;
573 -ms-flex-flow: row wrap;
574 flex-flow: row wrap;
575 gap: 8px;
576 -ms-flex-pack: center;
577 justify-content: center;
578 -ms-flex-line-pack: center;
579 align-content: center;
580 -ms-flex-align: center;
581 align-items: center;
582 min-height: 150px;
583 text-align: center
584 }
585 .wpbc_appointment_services__empty[hidden],
586 .wpbc_appointment_services__list[hidden] {
587 display: none
588 }
589 .wpbc_appointment_services__empty > span {
590 color: #8c8f94;
591 font-size: 38px
592 }
593 .wpbc_appointment_services__empty h2,
594 .wpbc_appointment_services__empty p {
595 margin: 0
596 }
597 .wpbc_appointment_services__empty.is-storage-notice {
598 background: #fff;
599 border: 1px dashed #c3c4c7;
600 border-radius: 4px;
601 box-sizing: border-box;
602 min-height: 240px;
603 padding: 30px
604 }
605 .wpbc_appointment_services__empty--error > span {
606 color: #b32d2e
607 }
608 .wpbc_appointment_services__table--compact td,
609 .wpbc_appointment_services__table--compact th {
610 padding-bottom: 8px;
611 padding-top: 8px
612 }
613 .wpbc_appointment_services__table--compact .wpbc_appointment_services__service_thumbnail {
614 -ms-flex-preferred-size: 36px;
615 flex-basis: 36px;
616 height: 36px;
617 width: 36px
618 }
619 .wpbc_appointment_services__table .column-selection,
620 .wpbc_appointment_services__table .wpbc_ui_listing__selection_column {
621 box-sizing: border-box;
622 min-width: 36px;
623 padding-left: 4px;
624 padding-right: 4px;
625 text-align: center;
626 width: 36px
627 }
628 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__table .column-selection,
629 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__table .wpbc_ui_listing__selection_column {
630 --wpbc-listing-column-min-width: 112px;
631 min-width: 112px;
632 width: 112px
633 }
634 .wpbc_appointment_services__cards {
635 display: grid;
636 gap: 16px;
637 grid-template-columns: repeat(auto-fill,minmax(310px,1fr));
638 padding: 16px
639 }
640 .wpbc_appointment_services__cards_header {
641 background: #fff;
642 border-block-end: 1px solid #dcdcde;
643 padding: 12px 16px
644 }
645 .wpbc_appointment_services__cards_header_controls {
646 -ms-flex-align: center;
647 align-items: center;
648 display: -ms-flexbox;
649 display: flex;
650 -ms-flex-flow: row wrap;
651 flex-flow: row wrap;
652 gap: 12px;
653 -ms-flex-pack: justify;
654 justify-content: space-between
655 }
656 .wpbc_appointment_services__cards_select_all {
657 -ms-flex-align: center;
658 align-items: center;
659 cursor: pointer;
660 display: -ms-inline-flexbox;
661 display: inline-flex;
662 gap: 7px;
663 margin: 0
664 }
665 .wpbc_appointment_services__cards_select_all input {
666 margin: 0
667 }
668 .wpbc_appointment_services__cards_sort {
669 -ms-flex-align: center;
670 align-items: center;
671 display: -ms-flexbox;
672 display: flex;
673 -ms-flex-flow: row wrap;
674 flex-flow: row wrap;
675 gap: 8px
676 }
677 .wpbc_appointment_services__cards_sort > span {
678 color: #646970;
679 font-size: 12px
680 }
681 .wpbc_appointment_services__cards_sort a {
682 -ms-flex-align: center;
683 align-items: center;
684 border-radius: 3px;
685 display: -ms-inline-flexbox;
686 display: inline-flex;
687 gap: 4px;
688 padding: 5px 7px;
689 text-decoration: none
690 }
691 .wpbc_appointment_services__cards_sort a.is-active {
692 background: #f0f6fc;
693 font-weight: 600
694 }
695 .wpbc_appointment_services__card {
696 background: #fff;
697 border: 1px solid #dcdcde;
698 border-radius: 5px;
699 box-shadow: 0 1px 2px rgba(0,0,0,.04);
700 box-sizing: border-box;
701 display: -ms-flexbox;
702 display: flex;
703 -ms-flex-direction: column;
704 flex-direction: column;
705 min-height: 420px;
706 overflow: hidden;
707 padding: 0;
708 position: relative
709 }
710 .wpbc_appointment_services__card:focus-visible,
711 .wpbc_appointment_services__card:hover {
712 border-color: var(--wpbc_admin-theme-color,#2271b1);
713 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color,#2271b1)
714 }
715 .wpbc_appointment_services__card.is-inspector-selected,
716 .wpbc_appointment_services__card.is-selected,
717 .wpbc_appointment_services__item.is-inspector-selected,
718 .wpbc_appointment_services__item.is-selected {
719 background: #f0f6fc;
720 border-color: var(--wpbc_admin-theme-color,#2271b1);
721 box-shadow: inset 3px 0 0 var(--wpbc_admin-theme-color,#2271b1)
722 }
723 body.rtl .wpbc_appointment_services__card.is-inspector-selected,
724 body.rtl .wpbc_appointment_services__card.is-selected,
725 body.rtl .wpbc_appointment_services__item.is-inspector-selected,
726 body.rtl .wpbc_appointment_services__item.is-selected {
727 box-shadow: inset -3px 0 0 var(--wpbc_admin-theme-color,#2271b1)
728 }
729 .wpbc_appointment_services__item.is-recently-saved {
730 animation: 2.8s ease-out wpbc-appointment-service-saved-border
731 }
732 .wpbc_appointment_services__item.is-recently-saved > td {
733 animation: 2.8s ease-out wpbc-appointment-service-saved-background
734 }
735 .wpbc_appointment_services__card.is-recently-saved {
736 animation: 2.8s ease-out wpbc-appointment-service-saved-card
737 }
738 @keyframes wpbc-appointment-service-saved-border {
739 0%,
740 45% {
741 box-shadow: inset 3px 0 #00a32a
742 }
743 100% {
744 box-shadow: inset 3px 0 transparent
745 }
746 }
747 @keyframes wpbc-appointment-service-saved-background {
748 0%,
749 45% {
750 background: #edfaef
751 }
752 100% {
753 background: 0 0
754 }
755 }
756 @keyframes wpbc-appointment-service-saved-card {
757 0%,
758 45% {
759 background: #edfaef;
760 border-color: #00a32a;
761 box-shadow: inset 3px 0 #00a32a
762 }
763 100% {
764 background: #fff;
765 border-color: #dcdcde;
766 box-shadow: inset 3px 0 transparent
767 }
768 }
769 .wpbc_appointment_services__card_media {
770 -ms-flex-align: center;
771 align-items: center;
772 background: #f0f0f1;
773 color: #8c8f94;
774 display: -ms-flexbox;
775 display: flex;
776 height: 170px;
777 -ms-flex-pack: center;
778 justify-content: center;
779 overflow: hidden;
780 position: relative
781 }
782 .wpbc_appointment_services__card_media > img {
783 display: block;
784 height: 100%;
785 max-width: none;
786 object-fit: cover;
787 width: 100%
788 }
789 .wpbc_appointment_services__card_media.has-placeholder > span {
790 font-size: 44px
791 }
792 .wpbc_appointment_services__card_select {
793 -ms-flex-align: center;
794 align-items: center;
795 background: rgba(255,255,255,.82);
796 border-radius: 50%;
797 display: -ms-flexbox;
798 display: flex;
799 height: 42px;
800 -ms-flex-pack: center;
801 justify-content: center;
802 left: 14px;
803 position: absolute;
804 top: 14px;
805 width: 42px;
806 z-index: 2
807 }
808 .wpbc_appointment_services__card_select input[type=checkbox] {
809 margin: 0
810 }
811 body.rtl .wpbc_appointment_services__card_select {
812 left: auto;
813 right: 14px
814 }
815 .wpbc_appointment_services__card_identity {
816 border-bottom: 1px solid #f0f0f1;
817 margin: 0 16px 12px;
818 padding: 12px 0
819 }
820 .wpbc_appointment_services__card_identity .wpbc_appointment_services__service_thumbnail {
821 margin-top: -34px;
822 position: relative;
823 z-index: 1
824 }
825 .wpbc_appointment_services__card_fields {
826 display: grid;
827 gap: 10px;
828 grid-template-columns: repeat(2,minmax(0,1fr));
829 padding: 0 16px 16px
830 }
831 .wpbc_appointment_services__card_field {
832 border: 1px solid #f0f0f1;
833 border-radius: 4px;
834 box-sizing: border-box;
835 min-width: 0;
836 padding: 10px
837 }
838 .wpbc_appointment_services__card_field > span {
839 color: #646970;
840 display: block;
841 font-size: 11px;
842 margin-bottom: 7px
843 }
844 .wpbc_appointment_services__card_actions {
845 border-top: 1px solid #f0f0f1;
846 margin: auto 0 0;
847 padding: 12px 16px;
848 text-align: right
849 }
850 body.rtl .wpbc_appointment_services__card_actions {
851 text-align: left
852 }
853 .wpbc_appointment_services__card .wpbc_appointment_services__availability_week {
854 min-width: min(130px,100%)
855 }
856 .wpbc_appointment_services__inline_input,
857 .wpbc_appointment_services__inline_number,
858 .wpbc_appointment_services__inline_textarea {
859 box-sizing: border-box;
860 margin: 0!important;
861 max-width: 100%;
862 width: 100%
863 }
864 .wpbc_appointment_services__inline_field {
865 display: block;
866 min-width: 0;
867 width: 100%
868 }
869 .wpbc_appointment_services__inline_identity_fields .wpbc_appointment_services__inline_field + .wpbc_appointment_services__inline_field {
870 margin-top: 6px
871 }
872 .wpbc_appointment_services__inline_input {
873 font-weight: 600
874 }
875 .wpbc_appointment_services__inline_textarea {
876 min-height: 68px;
877 resize: vertical
878 }
879 .wpbc_appointment_services__inline_number {
880 min-width: 82px
881 }
882 .wpbc_appointment_services_page .wpbc_appointment_services__inline_toggle.is-active {
883 background: var(--wpbc_admin-theme-color,#2271b1);
884 border-color: var(--wpbc_admin-theme-color,#2271b1);
885 color: #fff
886 }
887 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__selection_summary:not(.wpbc_appointment_services__inline_bar) {
888 display: none!important
889 }
890 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__item {
891 cursor: default
892 }
893 .wpbc_appointment_services__inline_bar_status {
894 -ms-flex-align: baseline;
895 align-items: baseline;
896 display: -ms-flexbox;
897 display: flex;
898 -ms-flex: 1 1 420px;
899 flex: 1 1 420px;
900 -ms-flex-flow: row wrap;
901 flex-flow: row wrap;
902 gap: 5px 12px;
903 min-width: 0
904 }
905 .wpbc_appointment_services__inline_bar_status strong {
906 color: #1d2327
907 }
908 .wpbc_appointment_services__inline_bar_status .description {
909 -ms-flex: 1 1 100%;
910 flex: 1 1 100%;
911 margin: 0
912 }
913 .wpbc_appointment_services__inline_bar_actions {
914 -ms-flex: 0 0 auto;
915 flex: 0 0 auto
916 }
917 .wpbc_appointment_services__operation {
918 box-sizing: border-box;
919 padding: 16px 18px 28px
920 }
921 .wpbc_appointment_services__operation > h2 {
922 font-size: 18px;
923 margin: 0 0 8px
924 }
925 .wpbc_appointment_services__bulk_field {
926 background: #fff;
927 border: 1px solid #dcdcde;
928 border-radius: 5px;
929 box-sizing: border-box;
930 display: -ms-flexbox;
931 display: flex;
932 -ms-flex-direction: column;
933 flex-direction: column;
934 gap: 10px;
935 margin: 12px 0;
936 padding: 14px
937 }
938 .wpbc_appointment_services__bulk_field > span {
939 -ms-flex-align: center;
940 align-items: center;
941 display: -ms-flexbox;
942 display: flex;
943 gap: 8px
944 }
945 .wpbc_appointment_services__bulk_field input:not([type=checkbox]),
946 .wpbc_appointment_services__bulk_field select {
947 box-sizing: border-box;
948 width: 100%
949 }
950 .wpbc_appointment_services__bulk_field input[type=range] {
951 margin: 0
952 }
953 .wpbc_appointment_services__media {
954 -ms-flex-align: start;
955 align-items: flex-start;
956 display: -ms-flexbox;
957 display: flex;
958 -ms-flex-flow: row wrap;
959 flex-flow: row wrap;
960 gap: 10px;
961 -ms-flex-pack: justify;
962 justify-content: space-between;
963 margin-bottom: 8px
964 }
965 .wpbc_appointment_services__media_preview {
966 -ms-flex-align: center;
967 align-items: center;
968 appearance: none;
969 background: #fcfcfc;
970 border: 1px solid #c3c4c7;
971 border-radius: 4px;
972 box-sizing: border-box;
973 color: #507593;
974 cursor: pointer;
975 display: -ms-flexbox;
976 display: flex;
977 -ms-flex: 1 1 100%;
978 flex: 1 1 100%;
979 height: 140px;
980 -ms-flex-pack: center;
981 justify-content: center;
982 margin: 0 0 12px;
983 max-height: 140px;
984 min-height: 140px;
985 overflow: hidden;
986 padding: 4px;
987 width: 100%
988 }
989 .wpbc_appointment_services__media_preview:focus-visible {
990 border-color: var(--wpbc_admin-theme-color,#2271b1);
991 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color,#2271b1);
992 outline: transparent solid 2px
993 }
994 .wpbc_appointment_services__media_preview:disabled {
995 cursor: default;
996 opacity: .65
997 }
998 .wpbc_appointment_services__media_image {
999 display: block;
1000 height: 100%;
1001 max-width: none;
1002 object-fit: cover;
1003 width: 100%
1004 }
1005 .wpbc_appointment_services__media_image[hidden],
1006 .wpbc_appointment_services__media_placeholder[hidden] {
1007 display: none
1008 }
1009 .wpbc_appointment_services__media_placeholder::before {
1010 font-size: 50px
1011 }
1012 .wpbc_appointment_services__media_actions {
1013 -ms-flex-align: stretch;
1014 align-items: stretch;
1015 display: -ms-flexbox;
1016 display: flex;
1017 -ms-flex: 1 1 auto;
1018 flex: 1 1 auto;
1019 -ms-flex-flow: row wrap;
1020 flex-flow: row wrap;
1021 gap: 8px;
1022 -ms-flex-pack: start;
1023 justify-content: flex-start;
1024 width: 100%
1025 }
1026 .wpbc_appointment_services__picture_row .wpbc_bfb__help {
1027 margin-bottom: 0
1028 }
1029 .wpbc_appointment_services__rightbar .inspector__control,
1030 .wpbc_appointment_services__rightbar .inspector__input {
1031 box-sizing: border-box;
1032 max-width: none;
1033 width: 100%
1034 }
1035 .wpbc_appointment_services__footer_actions {
1036 box-sizing: border-box;
1037 display: -ms-flexbox;
1038 display: flex;
1039 -ms-flex-pack: end;
1040 justify-content: flex-end;
1041 -ms-flex-align: stretch;
1042 align-items: stretch;
1043 -ms-flex-flow: row wrap;
1044 flex-flow: row wrap;
1045 gap: 8px;
1046 padding: 8px 18px;
1047 width: 100%
1048 }
1049 .wpbc_appointment_services__footer_actions .button {
1050 -ms-flex-align: center;
1051 align-items: center;
1052 box-sizing: border-box;
1053 display: -ms-flexbox;
1054 display: flex;
1055 -ms-flex: 0 1 auto;
1056 flex: 0 1 auto;
1057 gap: 6px;
1058 -ms-flex-pack: center;
1059 justify-content: center;
1060 margin: 0;
1061 min-width: 0
1062 }
1063 .wpbc_appointment_services__footer_actions .button[hidden],
1064 .wpbc_appointment_services__footer_actions[hidden],
1065 .wpbc_appointment_services__right_sidebar_footer[hidden] {
1066 display: none
1067 }
1068 @keyframes wpbc_appointment_services__focus_pulse {
1069 0% {
1070 box-shadow: 0 0 0 4px rgba(34,113,177,.3)
1071 }
1072 100% {
1073 box-shadow: 0 0 0 0 transparent
1074 }
1075 }
1076 .wpbc_appointment_services__focus_pulse {
1077 animation: .8s ease-out wpbc_appointment_services__focus_pulse;
1078 position: relative
1079 }
1080 @media (prefers-reduced-motion:reduce) {
1081 .wpbc_appointment_services__focus_pulse {
1082 animation: none;
1083 outline: 2px solid var(--wpbc_admin-theme-color,#2271b1);
1084 outline-offset: -2px
1085 }
1086 }
1087 .wpbc_appointment_services__status_options {
1088 display: -ms-flexbox;
1089 display: flex;
1090 -ms-flex-direction: column;
1091 flex-direction: column;
1092 gap: 8px
1093 }
1094 .wpbc_appointment_services__status_options label {
1095 -ms-flex-align: center;
1096 align-items: center;
1097 cursor: pointer;
1098 display: -ms-flexbox;
1099 display: flex;
1100 gap: 7px;
1101 line-height: 1.35;
1102 margin: 0
1103 }
1104 .wpbc_appointment_services__status_options input[type=radio] {
1105 margin: 0
1106 }
1107 .wpbc_appointment_services__number_control {
1108 display: -ms-flexbox;
1109 display: flex;
1110 -ms-flex-direction: column;
1111 flex-direction: column;
1112 gap: 8px;
1113 width: 100%
1114 }
1115 .wpbc_appointment_services__number_slider {
1116 box-sizing: border-box;
1117 cursor: pointer;
1118 margin: 0;
1119 min-height: 20px;
1120 padding: 0;
1121 width: 100%
1122 }
1123 .wpbc_appointment_services__number_slider:disabled {
1124 cursor: default;
1125 opacity: .55
1126 }
1127 .wpbc_appointment_services__placeholder {
1128 background: #f6f7f7;
1129 border: 1px dashed #c3c4c7;
1130 color: #646970;
1131 padding: 12px
1132 }
1133 .wpbc_appointment_services__help {
1134 padding: 0 16px 16px
1135 }
1136 .wpbc_appointment_services__help h4 {
1137 margin: 18px 0 6px
1138 }
1139 .wpbc_appointment_services__help ol,
1140 .wpbc_appointment_services__help ul {
1141 margin: 8px 0 0 20px
1142 }
1143 .wpbc_appointment_services__help li {
1144 line-height: 1.6;
1145 margin-bottom: 5px
1146 }
1147 .wpbc_appointment_services_page.is-busy {
1148 opacity: .72;
1149 pointer-events: none
1150 }
1151 .wpbc_appointment_services__provider_notice {
1152 -ms-flex-align: center;
1153 align-items: center;
1154 background: #fff8e5;
1155 border: 1px solid #dba617;
1156 border-radius: 4px;
1157 box-sizing: border-box;
1158 display: -ms-flexbox;
1159 display: flex;
1160 gap: 12px;
1161 margin-bottom: 14px;
1162 padding: 12px 14px
1163 }
1164 .wpbc_appointment_services__provider_notice[hidden] {
1165 display: none
1166 }
1167 .wpbc_appointment_services__provider_notice > span {
1168 color: #996800;
1169 font-size: 20px
1170 }
1171 .wpbc_appointment_services__provider_notice > div {
1172 display: -ms-flexbox;
1173 display: flex;
1174 -ms-flex: 1 1 auto;
1175 flex: 1 1 auto;
1176 -ms-flex-direction: column;
1177 flex-direction: column;
1178 gap: 2px
1179 }
1180 .wpbc_appointment_services__provider_notice > div > span {
1181 color: #646970
1182 }
1183 .wpbc_appointment_services__provider_notice .button {
1184 -ms-flex: 0 0 auto;
1185 flex: 0 0 auto
1186 }
1187 @media (max-width:782px) {
1188 .wpbc_appointment_services__cards_header_controls,
1189 .wpbc_appointment_services__cards_sort {
1190 -ms-flex-align: start;
1191 align-items: flex-start;
1192 -ms-flex-direction: column;
1193 flex-direction: column
1194 }
1195 .wpbc_appointment_services__filter_controls {
1196 grid-template-columns: 1fr
1197 }
1198 .wpbc_appointment_services__filter_divider {
1199 display: none
1200 }
1201 .wpbc_appointment_services__provider_total {
1202 margin-left: 10px
1203 }
1204 .wpbc_appointment_services__provider_notice {
1205 -ms-flex-align: start;
1206 align-items: flex-start;
1207 -ms-flex-wrap: wrap;
1208 flex-wrap: wrap
1209 }
1210 .wpbc_appointment_services__provider_notice .button {
1211 margin-left: 32px
1212 }
1213 .wpbc_appointment_services__table tbody .column-service {
1214 -ms-flex-preferred-size: 100%;
1215 flex-basis: 100%;
1216 padding-right: 76px;
1217 width: 100%
1218 }
1219 .wpbc_appointment_services__table tbody .column-actions::before,
1220 .wpbc_appointment_services__table tbody .column-service::before {
1221 display: none
1222 }
1223 .wpbc_appointment_services__table tbody .column-providers,
1224 .wpbc_appointment_services__table tbody .column-status,
1225 .wpbc_appointment_services__table tbody .column-weekdays {
1226 -ms-flex-preferred-size: 100%;
1227 flex-basis: 100%;
1228 width: 100%
1229 }
1230 .wpbc_appointment_services__table tbody .column-weekdays {
1231 -ms-flex-align: start;
1232 align-items: flex-start;
1233 -ms-flex-wrap: wrap;
1234 flex-wrap: wrap;
1235 text-align: left
1236 }
1237 .wpbc_appointment_services__availability_week,
1238 .wpbc_appointment_services__provider_stack {
1239 -ms-flex: 1 1 auto;
1240 flex: 1 1 auto
1241 }
1242 .wpbc_appointment_services__availability_week {
1243 min-width: 140px
1244 }
1245 .wpbc_appointment_services__availability_empty,
1246 .wpbc_appointment_services__availability_links {
1247 box-sizing: border-box;
1248 -ms-flex: 0 0 calc(100% - 104px);
1249 flex: 0 0 calc(100% - 104px);
1250 margin-left: 104px
1251 }
1252 .wpbc_appointment_services__table tbody .column-actions {
1253 border: 0;
1254 padding: 0;
1255 position: absolute;
1256 right: 12px;
1257 top: 20px;
1258 width: auto
1259 }
1260 body.rtl .wpbc_appointment_services__provider_total {
1261 margin-left: 0;
1262 margin-right: 10px
1263 }
1264 body.rtl .wpbc_appointment_services__provider_notice .button {
1265 margin-left: 0;
1266 margin-right: 32px
1267 }
1268 body.rtl .wpbc_appointment_services__table tbody .column-service {
1269 padding-left: 76px;
1270 padding-right: 12px
1271 }
1272 body.rtl .wpbc_appointment_services__availability_empty,
1273 body.rtl .wpbc_appointment_services__availability_links {
1274 margin-left: 0;
1275 margin-right: 104px
1276 }
1277 body.rtl .wpbc_appointment_services__table tbody .column-actions {
1278 left: 12px;
1279 right: auto
1280 }
1281 }
1282 @media (max-width:480px) {
1283 .wpbc_appointment_services__cards {
1284 grid-template-columns: 1fr;
1285 padding: 10px
1286 }
1287 .wpbc_appointment_services__card_fields {
1288 grid-template-columns: 1fr
1289 }
1290 .wpbc_appointment_services__table tbody .column-duration,
1291 .wpbc_appointment_services__table tbody .column-price {
1292 -ms-flex-preferred-size: 100%;
1293 flex-basis: 100%;
1294 width: 100%
1295 }
1296 }