PluginProbe
Booking Calendar / 11.9
Booking Calendar v11.9
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.9, at includes/page-appointment-services/_out/appointment_services_page.css

1,291 lines 32.9 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.is-inline-editing .wpbc_appointment_services__selection_summary:not(.wpbc_appointment_services__inline_bar) {
883 display: none!important
884 }
885 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__item {
886 cursor: default
887 }
888 .wpbc_appointment_services__inline_bar_status {
889 -ms-flex-align: baseline;
890 align-items: baseline;
891 display: -ms-flexbox;
892 display: flex;
893 -ms-flex: 1 1 420px;
894 flex: 1 1 420px;
895 -ms-flex-flow: row wrap;
896 flex-flow: row wrap;
897 gap: 5px 12px;
898 min-width: 0
899 }
900 .wpbc_appointment_services__inline_bar_status strong {
901 color: #1d2327
902 }
903 .wpbc_appointment_services__inline_bar_status .description {
904 -ms-flex: 1 1 100%;
905 flex: 1 1 100%;
906 margin: 0
907 }
908 .wpbc_appointment_services__inline_bar_actions {
909 -ms-flex: 0 0 auto;
910 flex: 0 0 auto
911 }
912 .wpbc_appointment_services__operation {
913 box-sizing: border-box;
914 padding: 16px 18px 28px
915 }
916 .wpbc_appointment_services__operation > h2 {
917 font-size: 18px;
918 margin: 0 0 8px
919 }
920 .wpbc_appointment_services__bulk_field {
921 background: #fff;
922 border: 1px solid #dcdcde;
923 border-radius: 5px;
924 box-sizing: border-box;
925 display: -ms-flexbox;
926 display: flex;
927 -ms-flex-direction: column;
928 flex-direction: column;
929 gap: 10px;
930 margin: 12px 0;
931 padding: 14px
932 }
933 .wpbc_appointment_services__bulk_field > span {
934 -ms-flex-align: center;
935 align-items: center;
936 display: -ms-flexbox;
937 display: flex;
938 gap: 8px
939 }
940 .wpbc_appointment_services__bulk_field input:not([type=checkbox]),
941 .wpbc_appointment_services__bulk_field select {
942 box-sizing: border-box;
943 width: 100%
944 }
945 .wpbc_appointment_services__bulk_field input[type=range] {
946 margin: 0
947 }
948 .wpbc_appointment_services__media {
949 -ms-flex-align: start;
950 align-items: flex-start;
951 display: -ms-flexbox;
952 display: flex;
953 -ms-flex-flow: row wrap;
954 flex-flow: row wrap;
955 gap: 10px;
956 -ms-flex-pack: justify;
957 justify-content: space-between;
958 margin-bottom: 8px
959 }
960 .wpbc_appointment_services__media_preview {
961 -ms-flex-align: center;
962 align-items: center;
963 appearance: none;
964 background: #fcfcfc;
965 border: 1px solid #c3c4c7;
966 border-radius: 4px;
967 box-sizing: border-box;
968 color: #507593;
969 cursor: pointer;
970 display: -ms-flexbox;
971 display: flex;
972 -ms-flex: 1 1 100%;
973 flex: 1 1 100%;
974 height: 140px;
975 -ms-flex-pack: center;
976 justify-content: center;
977 margin: 0 0 12px;
978 max-height: 140px;
979 min-height: 140px;
980 overflow: hidden;
981 padding: 4px;
982 width: 100%
983 }
984 .wpbc_appointment_services__media_preview:focus-visible {
985 border-color: var(--wpbc_admin-theme-color,#2271b1);
986 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color,#2271b1);
987 outline: transparent solid 2px
988 }
989 .wpbc_appointment_services__media_preview:disabled {
990 cursor: default;
991 opacity: .65
992 }
993 .wpbc_appointment_services__media_image {
994 display: block;
995 height: 100%;
996 max-width: none;
997 object-fit: cover;
998 width: 100%
999 }
1000 .wpbc_appointment_services__media_image[hidden],
1001 .wpbc_appointment_services__media_placeholder[hidden] {
1002 display: none
1003 }
1004 .wpbc_appointment_services__media_placeholder::before {
1005 font-size: 50px
1006 }
1007 .wpbc_appointment_services__media_actions {
1008 -ms-flex-align: stretch;
1009 align-items: stretch;
1010 display: -ms-flexbox;
1011 display: flex;
1012 -ms-flex: 1 1 auto;
1013 flex: 1 1 auto;
1014 -ms-flex-flow: row wrap;
1015 flex-flow: row wrap;
1016 gap: 8px;
1017 -ms-flex-pack: start;
1018 justify-content: flex-start;
1019 width: 100%
1020 }
1021 .wpbc_appointment_services__picture_row .wpbc_bfb__help {
1022 margin-bottom: 0
1023 }
1024 .wpbc_appointment_services__rightbar .inspector__control,
1025 .wpbc_appointment_services__rightbar .inspector__input {
1026 box-sizing: border-box;
1027 max-width: none;
1028 width: 100%
1029 }
1030 .wpbc_appointment_services__footer_actions {
1031 box-sizing: border-box;
1032 display: -ms-flexbox;
1033 display: flex;
1034 -ms-flex-pack: end;
1035 justify-content: flex-end;
1036 -ms-flex-align: stretch;
1037 align-items: stretch;
1038 -ms-flex-flow: row wrap;
1039 flex-flow: row wrap;
1040 gap: 8px;
1041 padding: 8px 18px;
1042 width: 100%
1043 }
1044 .wpbc_appointment_services__footer_actions .button {
1045 -ms-flex-align: center;
1046 align-items: center;
1047 box-sizing: border-box;
1048 display: -ms-flexbox;
1049 display: flex;
1050 -ms-flex: 0 1 auto;
1051 flex: 0 1 auto;
1052 gap: 6px;
1053 -ms-flex-pack: center;
1054 justify-content: center;
1055 margin: 0;
1056 min-width: 0
1057 }
1058 .wpbc_appointment_services__footer_actions .button[hidden],
1059 .wpbc_appointment_services__footer_actions[hidden],
1060 .wpbc_appointment_services__right_sidebar_footer[hidden] {
1061 display: none
1062 }
1063 @keyframes wpbc_appointment_services__focus_pulse {
1064 0% {
1065 box-shadow: 0 0 0 4px rgba(34,113,177,.3)
1066 }
1067 100% {
1068 box-shadow: 0 0 0 0 transparent
1069 }
1070 }
1071 .wpbc_appointment_services__focus_pulse {
1072 animation: .8s ease-out wpbc_appointment_services__focus_pulse;
1073 position: relative
1074 }
1075 @media (prefers-reduced-motion:reduce) {
1076 .wpbc_appointment_services__focus_pulse {
1077 animation: none;
1078 outline: 2px solid var(--wpbc_admin-theme-color,#2271b1);
1079 outline-offset: -2px
1080 }
1081 }
1082 .wpbc_appointment_services__status_options {
1083 display: -ms-flexbox;
1084 display: flex;
1085 -ms-flex-direction: column;
1086 flex-direction: column;
1087 gap: 8px
1088 }
1089 .wpbc_appointment_services__status_options label {
1090 -ms-flex-align: center;
1091 align-items: center;
1092 cursor: pointer;
1093 display: -ms-flexbox;
1094 display: flex;
1095 gap: 7px;
1096 line-height: 1.35;
1097 margin: 0
1098 }
1099 .wpbc_appointment_services__status_options input[type=radio] {
1100 margin: 0
1101 }
1102 .wpbc_appointment_services__number_control {
1103 display: -ms-flexbox;
1104 display: flex;
1105 -ms-flex-direction: column;
1106 flex-direction: column;
1107 gap: 8px;
1108 width: 100%
1109 }
1110 .wpbc_appointment_services__number_slider {
1111 box-sizing: border-box;
1112 cursor: pointer;
1113 margin: 0;
1114 min-height: 20px;
1115 padding: 0;
1116 width: 100%
1117 }
1118 .wpbc_appointment_services__number_slider:disabled {
1119 cursor: default;
1120 opacity: .55
1121 }
1122 .wpbc_appointment_services__placeholder {
1123 background: #f6f7f7;
1124 border: 1px dashed #c3c4c7;
1125 color: #646970;
1126 padding: 12px
1127 }
1128 .wpbc_appointment_services__help {
1129 padding: 0 16px 16px
1130 }
1131 .wpbc_appointment_services__help h4 {
1132 margin: 18px 0 6px
1133 }
1134 .wpbc_appointment_services__help ol,
1135 .wpbc_appointment_services__help ul {
1136 margin: 8px 0 0 20px
1137 }
1138 .wpbc_appointment_services__help li {
1139 line-height: 1.6;
1140 margin-bottom: 5px
1141 }
1142 .wpbc_appointment_services_page.is-busy {
1143 opacity: .72;
1144 pointer-events: none
1145 }
1146 .wpbc_appointment_services__provider_notice {
1147 -ms-flex-align: center;
1148 align-items: center;
1149 background: #fff8e5;
1150 border: 1px solid #dba617;
1151 border-radius: 4px;
1152 box-sizing: border-box;
1153 display: -ms-flexbox;
1154 display: flex;
1155 gap: 12px;
1156 margin-bottom: 14px;
1157 padding: 12px 14px
1158 }
1159 .wpbc_appointment_services__provider_notice[hidden] {
1160 display: none
1161 }
1162 .wpbc_appointment_services__provider_notice > span {
1163 color: #996800;
1164 font-size: 20px
1165 }
1166 .wpbc_appointment_services__provider_notice > div {
1167 display: -ms-flexbox;
1168 display: flex;
1169 -ms-flex: 1 1 auto;
1170 flex: 1 1 auto;
1171 -ms-flex-direction: column;
1172 flex-direction: column;
1173 gap: 2px
1174 }
1175 .wpbc_appointment_services__provider_notice > div > span {
1176 color: #646970
1177 }
1178 .wpbc_appointment_services__provider_notice .button {
1179 -ms-flex: 0 0 auto;
1180 flex: 0 0 auto
1181 }
1182 @media (max-width:782px) {
1183 .wpbc_appointment_services__cards_header_controls,
1184 .wpbc_appointment_services__cards_sort {
1185 -ms-flex-align: start;
1186 align-items: flex-start;
1187 -ms-flex-direction: column;
1188 flex-direction: column
1189 }
1190 .wpbc_appointment_services__filter_controls {
1191 grid-template-columns: 1fr
1192 }
1193 .wpbc_appointment_services__filter_divider {
1194 display: none
1195 }
1196 .wpbc_appointment_services__provider_total {
1197 margin-left: 10px
1198 }
1199 .wpbc_appointment_services__provider_notice {
1200 -ms-flex-align: start;
1201 align-items: flex-start;
1202 -ms-flex-wrap: wrap;
1203 flex-wrap: wrap
1204 }
1205 .wpbc_appointment_services__provider_notice .button {
1206 margin-left: 32px
1207 }
1208 .wpbc_appointment_services__table tbody .column-service {
1209 -ms-flex-preferred-size: 100%;
1210 flex-basis: 100%;
1211 padding-right: 76px;
1212 width: 100%
1213 }
1214 .wpbc_appointment_services__table tbody .column-actions::before,
1215 .wpbc_appointment_services__table tbody .column-service::before {
1216 display: none
1217 }
1218 .wpbc_appointment_services__table tbody .column-providers,
1219 .wpbc_appointment_services__table tbody .column-status,
1220 .wpbc_appointment_services__table tbody .column-weekdays {
1221 -ms-flex-preferred-size: 100%;
1222 flex-basis: 100%;
1223 width: 100%
1224 }
1225 .wpbc_appointment_services__table tbody .column-weekdays {
1226 -ms-flex-align: start;
1227 align-items: flex-start;
1228 -ms-flex-wrap: wrap;
1229 flex-wrap: wrap;
1230 text-align: left
1231 }
1232 .wpbc_appointment_services__availability_week,
1233 .wpbc_appointment_services__provider_stack {
1234 -ms-flex: 1 1 auto;
1235 flex: 1 1 auto
1236 }
1237 .wpbc_appointment_services__availability_week {
1238 min-width: 140px
1239 }
1240 .wpbc_appointment_services__availability_empty,
1241 .wpbc_appointment_services__availability_links {
1242 box-sizing: border-box;
1243 -ms-flex: 0 0 calc(100% - 104px);
1244 flex: 0 0 calc(100% - 104px);
1245 margin-left: 104px
1246 }
1247 .wpbc_appointment_services__table tbody .column-actions {
1248 border: 0;
1249 padding: 0;
1250 position: absolute;
1251 right: 12px;
1252 top: 20px;
1253 width: auto
1254 }
1255 body.rtl .wpbc_appointment_services__provider_total {
1256 margin-left: 0;
1257 margin-right: 10px
1258 }
1259 body.rtl .wpbc_appointment_services__provider_notice .button {
1260 margin-left: 0;
1261 margin-right: 32px
1262 }
1263 body.rtl .wpbc_appointment_services__table tbody .column-service {
1264 padding-left: 76px;
1265 padding-right: 12px
1266 }
1267 body.rtl .wpbc_appointment_services__availability_empty,
1268 body.rtl .wpbc_appointment_services__availability_links {
1269 margin-left: 0;
1270 margin-right: 104px
1271 }
1272 body.rtl .wpbc_appointment_services__table tbody .column-actions {
1273 left: 12px;
1274 right: auto
1275 }
1276 }
1277 @media (max-width:480px) {
1278 .wpbc_appointment_services__cards {
1279 grid-template-columns: 1fr;
1280 padding: 10px
1281 }
1282 .wpbc_appointment_services__card_fields {
1283 grid-template-columns: 1fr
1284 }
1285 .wpbc_appointment_services__table tbody .column-duration,
1286 .wpbc_appointment_services__table tbody .column-price {
1287 -ms-flex-preferred-size: 100%;
1288 flex-basis: 100%;
1289 width: 100%
1290 }
1291 }