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

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