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

945 lines 23.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wpbc_appointment_services_page {
2 padding: 20px
3 }
4 .wpbc_appointment_services__filters {
5 display: -ms-flexbox;
6 display: flex;
7 -ms-flex-direction: column;
8 flex-direction: column;
9 gap: 14px;
10 margin-bottom: 16px
11 }
12 .wpbc_appointment_services__status_filters {
13 -ms-flex-align: center;
14 align-items: center;
15 display: -ms-flexbox;
16 display: flex;
17 -ms-flex-wrap: wrap;
18 flex-wrap: wrap;
19 gap: 0
20 }
21 .wpbc_appointment_services__status_filter {
22 -ms-flex-align: center;
23 align-items: center;
24 background: #fff;
25 border: 1px solid #dcdcde;
26 border-left-width: 0;
27 color: #50575e;
28 cursor: pointer;
29 display: -ms-inline-flexbox;
30 display: inline-flex;
31 font: inherit;
32 gap: 7px;
33 min-height: 36px;
34 padding: 6px 12px
35 }
36 .wpbc_appointment_services__status_filter:first-child {
37 border-left-width: 1px;
38 border-radius: 4px 0 0 4px
39 }
40 .wpbc_appointment_services__status_filter:nth-of-type(4) {
41 border-radius: 0 4px 4px 0
42 }
43 .wpbc_appointment_services__provider_total strong,
44 .wpbc_appointment_services__status_filter strong {
45 background: #f0f0f1;
46 border-radius: 10px;
47 color: #50575e;
48 font-size: 11px;
49 line-height: 18px;
50 min-width: 18px;
51 padding: 0 5px;
52 text-align: center
53 }
54 .wpbc_appointment_services__status_filter:focus,
55 .wpbc_appointment_services__status_filter:hover {
56 border-color: #8c8f94;
57 box-shadow: none;
58 color: #1d2327;
59 outline: 0;
60 position: relative;
61 z-index: 1
62 }
63 .wpbc_appointment_services__status_filter.is-active {
64 background: #f0f6fc;
65 border-color: var(--wpbc_admin-theme-color,#2271b1);
66 color: var(--wpbc_admin-theme-color,#2271b1);
67 font-weight: 600;
68 position: relative;
69 z-index: 2;
70 border-left-width: 1px
71 }
72 .wpbc_appointment_services__status_filter.is-active strong {
73 background: var(--wpbc_admin-theme-color,#2271b1);
74 color: #fff
75 }
76 .wpbc_appointment_services__filter_divider {
77 background: #dcdcde;
78 height: 28px;
79 margin: 0 14px;
80 width: 1px
81 }
82 .wpbc_appointment_services__provider_total {
83 -ms-flex-align: center;
84 align-items: center;
85 color: #50575e;
86 display: -ms-inline-flexbox;
87 display: inline-flex;
88 gap: 7px;
89 min-height: 36px
90 }
91 .wpbc_appointment_services__filter_controls {
92 display: grid;
93 grid-template-columns: minmax(240px,480px) minmax(170px,230px);
94 gap: 10px
95 }
96 .wpbc_appointment_services__filter_controls input,
97 .wpbc_appointment_services__filter_controls select {
98 box-sizing: border-box;
99 min-height: 38px;
100 max-width: none;
101 width: 100%
102 }
103 .wpbc_appointment_services__search {
104 position: relative
105 }
106 .wpbc_appointment_services__search > span {
107 color: #8c8f94;
108 font-size: 16px;
109 left: 10px;
110 position: absolute;
111 top: 5px
112 }
113 .wpbc_appointment_services__search input {
114 padding-left: 38px
115 }
116 .wpbc_appointment_services__content {
117 min-height: 360px;
118 position: relative
119 }
120 .wpbc_appointment_services__loading {
121 -ms-flex-align: center;
122 align-items: center;
123 background: rgba(255,255,255,.8);
124 border-radius: 4px;
125 display: -ms-flexbox;
126 display: flex;
127 inset: 0;
128 -ms-flex-pack: center;
129 justify-content: center;
130 opacity: 0;
131 pointer-events: none;
132 position: absolute;
133 transition: opacity .2s ease-in-out;
134 z-index: 10
135 }
136 .wpbc_appointment_services__loading.is-visible {
137 opacity: 1;
138 pointer-events: auto
139 }
140 .wpbc_appointment_services__list {
141 background: #fff;
142 border: 1px solid #dcdcde;
143 border-radius: 4px;
144 overflow: hidden
145 }
146 .wpbc_appointment_services__table_wrap {
147 overflow-x: auto;
148 overflow-y: hidden;
149 overscroll-behavior-inline: contain;
150 scrollbar-width: thin;
151 -webkit-overflow-scrolling: touch
152 }
153 .wpbc_appointment_services__table {
154 border-collapse: collapse;
155 color: #2c3338;
156 min-width: 920px;
157 table-layout: fixed;
158 width: 100%
159 }
160 .wpbc_appointment_services__table td,
161 .wpbc_appointment_services__table th {
162 border-bottom: 1px solid #e5e5e5;
163 box-sizing: border-box;
164 padding: 13px 12px;
165 text-align: left;
166 vertical-align: middle
167 }
168 .wpbc_appointment_services__table th {
169 background: #fafafb;
170 color: #50575e;
171 font-size: 14px;
172 font-weight: 600;
173 height: 58px
174 }
175 .wpbc_appointment_services__table .column-service {
176 width: 29%
177 }
178 .wpbc_appointment_services__table .column-duration {
179 width: 120px
180 }
181 .wpbc_appointment_services__table .column-price {
182 width: 80px
183 }
184 .wpbc_appointment_services__table .column-providers,
185 .wpbc_appointment_services__table .column-status {
186 width: 125px
187 }
188 .wpbc_appointment_services__table .column-actions {
189 width: 70px
190 }
191 .wpbc_appointment_services__table thead .column-weekdays {
192 padding: 8px 4px 6px;
193 text-align: center;
194 width: 155px
195 }
196 .wpbc_appointment_services__weekday_labels {
197 display: -ms-flexbox;
198 display: flex;
199 font-size: 9px;
200 font-weight: 400;
201 gap: 6px;
202 margin: 4px auto 0;
203 padding: 0;
204 -ms-flex-flow: row nowrap;
205 flex-flow: row nowrap;
206 -ms-flex-align: center;
207 align-items: center;
208 -ms-flex-pack: distribute;
209 justify-content: space-around
210 }
211 .wpbc_appointment_services__weekday_labels i {
212 font-style: normal
213 }
214 .wpbc_appointment_services__status_header,
215 .wpbc_appointment_services__status_identity {
216 -ms-flex-align: center;
217 align-items: center;
218 display: -ms-flexbox;
219 display: flex;
220 -ms-flex-flow: row wrap;
221 flex-flow: row wrap;
222 gap: 2px;
223 -ms-flex-pack: center;
224 justify-content: center;
225 width: 100%
226 }
227 .wpbc_appointment_services__status_header .wpbc_ui_listing__sort_link {
228 padding-left: 0;
229 padding-right: 0
230 }
231 .wpbc_appointment_services__id_sort {
232 font-size: 12px
233 }
234 .wpbc_appointment_services__table tbody .column-weekdays {
235 padding-left: 4px;
236 padding-right: 4px;
237 text-align: center
238 }
239 .wpbc_appointment_services__item {
240 background: #fff;
241 cursor: pointer;
242 transition: background-color .12s ease-in-out
243 }
244 .wpbc_appointment_services__item:focus,
245 .wpbc_appointment_services__item:hover {
246 background: #f0f6fc;
247 outline: 0
248 }
249 .wpbc_appointment_services__item.is-selected {
250 background: #f0f6fc;
251 box-shadow: inset 3px 0 var(--wpbc_admin-theme-color,#2271b1)
252 }
253 .wpbc_appointment_services__item:last-child td {
254 border-bottom: 0
255 }
256 .wpbc_appointment_services__service_identity {
257 -ms-flex-align: center;
258 align-items: center;
259 display: -ms-flexbox;
260 display: flex;
261 gap: 10px;
262 min-width: 0
263 }
264 .wpbc_appointment_services__service_thumbnail {
265 -ms-flex-align: center;
266 align-items: center;
267 background: #f0f0f1;
268 box-sizing: border-box;
269 color: #8c8f94;
270 display: -ms-inline-flexbox;
271 display: inline-flex;
272 -ms-flex: 0 0 40px;
273 flex: 0 0 40px;
274 height: 40px;
275 -ms-flex-pack: center;
276 justify-content: center;
277 overflow: hidden;
278 width: 40px;
279 border: 2px solid #fff;
280 border-radius: 50%;
281 outline: #d4d4d7 solid 1px
282 }
283 .wpbc_appointment_services__service_thumbnail img {
284 height: 100%;
285 object-fit: cover;
286 width: 100%
287 }
288 .wpbc_appointment_services__service_thumbnail:focus-visible {
289 outline: 2px solid var(--wpbc_admin-theme-color,#2271b1);
290 outline-offset: 2px
291 }
292 .wpbc_appointment_services__service_copy {
293 display: block;
294 min-width: 0
295 }
296 .wpbc_appointment_services__item .wpbc_appointment_services__service_copy > span,
297 .wpbc_appointment_services__item .wpbc_appointment_services__service_copy strong {
298 display: block;
299 overflow: hidden;
300 text-overflow: ellipsis;
301 white-space: nowrap
302 }
303 .wpbc_appointment_services__item .wpbc_appointment_services__service_copy strong {
304 color: #1d2327;
305 font-size: 14px;
306 margin-bottom: 4px
307 }
308 .wpbc_appointment_services__item .wpbc_appointment_services__service_copy > span {
309 color: #646970;
310 font-size: 11px
311 }
312 .wpbc_appointment_services__item .column-duration,
313 .wpbc_appointment_services__item .column-price {
314 font-size: 13px;
315 font-weight: 600;
316 white-space: nowrap
317 }
318 .wpbc_appointment_services__duration_details {
319 display: -ms-flexbox;
320 display: flex;
321 -ms-flex-direction: column;
322 flex-direction: column;
323 gap: 3px;
324 min-width: 0
325 }
326 .wpbc_appointment_services__duration_value {
327 font-size: 13px;
328 font-weight: 600;
329 line-height: 1.3
330 }
331 .wpbc_appointment_services__buffers_summary {
332 color: #646970;
333 font-size: 10px;
334 font-weight: 400;
335 line-height: 1.3;
336 overflow: hidden;
337 text-overflow: ellipsis;
338 white-space: nowrap
339 }
340 .wpbc_appointment_services__provider_stack {
341 -ms-flex-align: center;
342 align-items: center;
343 display: -ms-flexbox;
344 display: flex;
345 min-width: 90px
346 }
347 .wpbc_appointment_services__provider_avatar,
348 .wpbc_appointment_services__provider_more {
349 -ms-flex-align: center;
350 align-items: center;
351 background: #e7ecfb;
352 border: 2px solid #fff;
353 border-radius: 50%;
354 box-sizing: border-box;
355 color: #2943a8;
356 display: -ms-inline-flexbox;
357 display: inline-flex;
358 font-size: 9px;
359 font-weight: 700;
360 height: 30px;
361 -ms-flex-pack: center;
362 justify-content: center;
363 margin-left: -7px;
364 overflow: hidden;
365 width: 30px
366 }
367 .wpbc_appointment_services__provider_avatar:first-child {
368 margin-left: 0
369 }
370 a.wpbc_appointment_services__provider_avatar {
371 text-decoration: none
372 }
373 a.wpbc_appointment_services__provider_avatar:focus-visible,
374 a.wpbc_appointment_services__provider_avatar:hover {
375 border-color: var(--wpbc_admin-theme-color,#2271b1);
376 color: var(--wpbc_admin-theme-color,#2271b1);
377 outline: transparent solid 2px;
378 position: relative;
379 z-index: 1
380 }
381 .wpbc_appointment_services__provider_avatar img {
382 height: 100%;
383 object-fit: cover;
384 width: 100%
385 }
386 .wpbc_appointment_services__provider_avatar.has-no-availability {
387 background: #f0f0f1;
388 border-color: #dcdcde;
389 color: #8c8f94;
390 filter: grayscale(1);
391 opacity: .75
392 }
393 .wpbc_appointment_services__provider_more {
394 background: #f0f0f1;
395 color: #50575e
396 }
397 .wpbc_appointment_services__no_provider {
398 color: #8c8f94;
399 font-size: 11px
400 }
401 .wpbc_appointment_services__availability {
402 background: #dcdcde;
403 border-radius: 50%;
404 display: inline-block;
405 -ms-flex: 0 0 10px;
406 flex: 0 0 10px;
407 height: 10px;
408 width: 10px
409 }
410 .wpbc_appointment_services__availability.is-available {
411 background: #00a32a
412 }
413 .wpbc_appointment_services__availability_week {
414 -ms-flex-align: center;
415 align-items: center;
416 display: -ms-flexbox;
417 display: flex;
418 gap: 0;
419 -ms-flex-pack: distribute;
420 justify-content: space-around
421 }
422 .wpbc_appointment_services__availability_links {
423 display: -ms-flexbox;
424 display: flex;
425 -ms-flex-wrap: wrap;
426 flex-wrap: wrap;
427 gap: 3px;
428 -ms-flex-pack: center;
429 justify-content: center;
430 margin-top: 6px
431 }
432 .wpbc_appointment_services__availability_link {
433 background: #f6f7f7;
434 border: 1px solid #dcdcde;
435 border-radius: 3px;
436 color: var(--wpbc_admin-theme-color,#2271b1);
437 font-size: 9px;
438 font-weight: 600;
439 line-height: 16px;
440 min-width: 18px;
441 padding: 0 3px;
442 text-align: center;
443 text-decoration: none;
444 display: none
445 }
446 .wpbc_appointment_services__availability_link:focus-visible,
447 .wpbc_appointment_services__availability_link:hover {
448 background: #f0f6fc;
449 border-color: var(--wpbc_admin-theme-color,#2271b1);
450 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color,#2271b1);
451 color: var(--wpbc_admin-theme-color,#2271b1);
452 outline: transparent solid 2px
453 }
454 .wpbc_appointment_services__availability_empty {
455 color: #b32d2e;
456 display: block;
457 font-size: 10px;
458 line-height: 1.25;
459 margin-top: 5px
460 }
461 .wpbc_appointment_services__status {
462 background: #f0f0f1;
463 border-radius: 12px;
464 color: #50575e;
465 display: inline-block;
466 font-size: 11px;
467 font-weight: 600;
468 line-height: 22px;
469 padding: 1px 14px;
470 white-space: nowrap
471 }
472 .wpbc_appointment_services__id {
473 font-size: 9px;
474 font-weight: 600;
475 padding: 0 10px;
476 white-space: nowrap
477 }
478 .wpbc_appointment_services__status.status-active {
479 background: #f7f7f6;
480 color: #218534
481 }
482 .wpbc_appointment_services__status.status-inactive {
483 background: #fff7e6;
484 color: #8a5700
485 }
486 .wpbc_appointment_services__status.status-archived {
487 background: #f0f0f1;
488 color: #646970
489 }
490 .wpbc_appointment_services__item .column-actions {
491 white-space: nowrap
492 }
493 .wpbc_appointment_services__item .column-actions button {
494 color: #646970;
495 font-size: 15px;
496 margin-right: 12px;
497 text-decoration: none
498 }
499 .wpbc_appointment_services__item .column-actions button:focus,
500 .wpbc_appointment_services__item .column-actions button:hover {
501 color: var(--wpbc_admin-theme-color,#2271b1);
502 outline: 0
503 }
504 .wpbc_appointment_services__list_footer {
505 -ms-flex-align: center;
506 align-items: center;
507 background: #fafafb;
508 border-top: 1px solid #dcdcde;
509 color: #646970;
510 display: -ms-flexbox;
511 display: flex;
512 font-size: 12px;
513 -ms-flex-pack: justify;
514 justify-content: space-between;
515 min-height: 48px;
516 padding: 6px 12px
517 }
518 .wpbc_appointment_services__list_footer[hidden] {
519 display: none
520 }
521 .wpbc_appointment_services__pagination {
522 -ms-flex-align: center;
523 align-items: center;
524 display: -ms-flexbox;
525 display: flex;
526 gap: 8px
527 }
528 .wpbc_appointment_services__pagination .button {
529 -ms-flex-align: center;
530 align-items: center;
531 display: -ms-inline-flexbox;
532 display: inline-flex;
533 height: 30px;
534 -ms-flex-pack: center;
535 justify-content: center;
536 min-height: 30px;
537 padding: 0;
538 width: 32px
539 }
540 .wpbc_appointment_services__page_label {
541 min-width: 82px;
542 text-align: center
543 }
544 .wpbc_appointment_services__empty {
545 color: #646970;
546 display: -ms-flexbox;
547 display: flex;
548 -ms-flex-flow: row wrap;
549 flex-flow: row wrap;
550 gap: 8px;
551 -ms-flex-pack: center;
552 justify-content: center;
553 -ms-flex-line-pack: center;
554 align-content: center;
555 -ms-flex-align: center;
556 align-items: center;
557 min-height: 150px;
558 text-align: center
559 }
560 .wpbc_appointment_services__empty[hidden],
561 .wpbc_appointment_services__list[hidden] {
562 display: none
563 }
564 .wpbc_appointment_services__empty > span {
565 color: #8c8f94;
566 font-size: 38px
567 }
568 .wpbc_appointment_services__empty h2,
569 .wpbc_appointment_services__empty p {
570 margin: 0
571 }
572 .wpbc_appointment_services__empty.is-storage-notice {
573 background: #fff;
574 border: 1px dashed #c3c4c7;
575 border-radius: 4px;
576 box-sizing: border-box;
577 min-height: 240px;
578 padding: 30px
579 }
580 .wpbc_appointment_services__rightbar .inspector__control,
581 .wpbc_appointment_services__rightbar .inspector__input {
582 box-sizing: border-box;
583 max-width: none;
584 width: 100%
585 }
586 .wpbc_appointment_services__footer_actions {
587 -ms-flex-align: stretch;
588 align-items: stretch;
589 box-sizing: border-box;
590 display: -ms-flexbox;
591 display: flex;
592 -ms-flex-wrap: wrap;
593 flex-wrap: wrap;
594 gap: 8px;
595 padding: 8px 18px;
596 width: 100%
597 }
598 .wpbc_appointment_services__footer_actions .button {
599 -ms-flex-align: center;
600 align-items: center;
601 box-sizing: border-box;
602 display: -ms-flexbox;
603 display: flex;
604 -ms-flex: 1 1 auto;
605 flex: 1 1 auto;
606 gap: 6px;
607 -ms-flex-pack: center;
608 justify-content: center;
609 margin: 0;
610 min-width: 0
611 }
612 .wpbc_appointment_services__footer_actions .button[hidden],
613 .wpbc_appointment_services__footer_actions[hidden],
614 .wpbc_appointment_services__right_sidebar_footer[hidden] {
615 display: none
616 }
617 @keyframes wpbc_appointment_services__focus_pulse {
618 0% {
619 box-shadow: 0 0 0 4px rgba(34,113,177,.3)
620 }
621 100% {
622 box-shadow: 0 0 0 0 transparent
623 }
624 }
625 .wpbc_appointment_services__focus_pulse {
626 animation: .8s ease-out wpbc_appointment_services__focus_pulse;
627 position: relative
628 }
629 @media (prefers-reduced-motion:reduce) {
630 .wpbc_appointment_services__focus_pulse {
631 animation: none;
632 outline: 2px solid var(--wpbc_admin-theme-color,#2271b1);
633 outline-offset: -2px
634 }
635 }
636 .wpbc_appointment_services__status_options {
637 display: -ms-flexbox;
638 display: flex;
639 -ms-flex-direction: column;
640 flex-direction: column;
641 gap: 8px
642 }
643 .wpbc_appointment_services__status_options label {
644 -ms-flex-align: center;
645 align-items: center;
646 cursor: pointer;
647 display: -ms-flexbox;
648 display: flex;
649 gap: 7px;
650 line-height: 1.35;
651 margin: 0
652 }
653 .wpbc_appointment_services__status_options input[type=radio] {
654 margin: 0
655 }
656 .wpbc_appointment_services__number_control {
657 display: -ms-flexbox;
658 display: flex;
659 -ms-flex-direction: column;
660 flex-direction: column;
661 gap: 8px;
662 width: 100%
663 }
664 .wpbc_appointment_services__number_slider {
665 box-sizing: border-box;
666 cursor: pointer;
667 margin: 0;
668 min-height: 20px;
669 padding: 0;
670 width: 100%
671 }
672 .wpbc_appointment_services__number_slider:disabled {
673 cursor: default;
674 opacity: .55
675 }
676 .wpbc_appointment_services__media {
677 margin-bottom: 8px;
678 display: -ms-flexbox;
679 display: flex;
680 -ms-flex-align: start;
681 align-items: flex-start;
682 -ms-flex-flow: row wrap;
683 flex-flow: row wrap;
684 -ms-flex-pack: justify;
685 justify-content: space-between;
686 gap: 10px
687 }
688 .wpbc_appointment_services__media_preview {
689 -ms-flex-align: center;
690 align-items: center;
691 appearance: none;
692 background: #fcfcfc;
693 border: 1px solid #c3c4c7;
694 border-radius: 4px;
695 box-sizing: border-box;
696 color: #507593;
697 cursor: pointer;
698 display: -ms-flexbox;
699 display: flex;
700 -ms-flex-pack: center;
701 justify-content: center;
702 margin: 0 0 12px;
703 overflow: hidden;
704 padding: 4px;
705 width: 100%;
706 -ms-flex: 1 1 100%;
707 flex: 1 1 100%;
708 height: 140px
709 }
710 .wpbc_appointment_services__media_preview:focus-visible {
711 border-color: #2271b1;
712 box-shadow: 0 0 0 1px #2271b1;
713 outline: transparent solid 2px
714 }
715 .wpbc_appointment_services__media_preview:disabled {
716 cursor: default;
717 opacity: .65
718 }
719 .wpbc_appointment_services__media_image {
720 height: 100%;
721 object-fit: cover;
722 width: 100%
723 }
724 .wpbc_appointment_services__media_image[hidden],
725 .wpbc_appointment_services__media_placeholder[hidden] {
726 display: none
727 }
728 .wpbc_appointment_services__media_placeholder::before {
729 font-size: 50px
730 }
731 .wpbc_appointment_services__media_actions {
732 -ms-flex-pack: center;
733 justify-content: center;
734 width: 100%;
735 -ms-flex: 1 1 auto;
736 flex: 1 1 auto;
737 display: -ms-flexbox;
738 display: flex;
739 -ms-flex-flow: row wrap;
740 flex-flow: row wrap;
741 -ms-flex-align: stretch;
742 align-items: stretch;
743 -ms-flex-pack: start;
744 justify-content: flex-start;
745 gap: 8px
746 }
747 .wpbc_appointment_services__picture_row .wpbc_bfb__help {
748 margin-bottom: 0
749 }
750 .wpbc_appointment_services__placeholder {
751 background: #f6f7f7;
752 border: 1px dashed #c3c4c7;
753 color: #646970;
754 padding: 12px
755 }
756 .wpbc_appointment_services__help {
757 padding: 0 16px 16px
758 }
759 .wpbc_appointment_services__help h4 {
760 margin: 18px 0 6px
761 }
762 .wpbc_appointment_services__help ol,
763 .wpbc_appointment_services__help ul {
764 margin: 8px 0 0 20px
765 }
766 .wpbc_appointment_services__help li {
767 line-height: 1.6;
768 margin-bottom: 5px
769 }
770 .wpbc_appointment_services_page.is-busy {
771 opacity: .72;
772 pointer-events: none
773 }
774 .wpbc_appointment_services__provider_notice {
775 -ms-flex-align: center;
776 align-items: center;
777 background: #fff8e5;
778 border: 1px solid #dba617;
779 border-radius: 4px;
780 box-sizing: border-box;
781 display: -ms-flexbox;
782 display: flex;
783 gap: 12px;
784 margin-bottom: 14px;
785 padding: 12px 14px
786 }
787 .wpbc_appointment_services__provider_notice[hidden] {
788 display: none
789 }
790 .wpbc_appointment_services__provider_notice > span {
791 color: #996800;
792 font-size: 20px
793 }
794 .wpbc_appointment_services__provider_notice > div {
795 display: -ms-flexbox;
796 display: flex;
797 -ms-flex: 1 1 auto;
798 flex: 1 1 auto;
799 -ms-flex-direction: column;
800 flex-direction: column;
801 gap: 2px
802 }
803 .wpbc_appointment_services__provider_notice > div > span {
804 color: #646970
805 }
806 .wpbc_appointment_services__provider_notice .button {
807 -ms-flex: 0 0 auto;
808 flex: 0 0 auto
809 }
810 @media (max-width:782px) {
811 .wpbc_appointment_services__filter_controls {
812 grid-template-columns: 1fr
813 }
814 .wpbc_appointment_services__filter_divider {
815 display: none
816 }
817 .wpbc_appointment_services__provider_total {
818 margin-left: 10px
819 }
820 .wpbc_appointment_services__list_footer {
821 -ms-flex-align: start;
822 align-items: flex-start;
823 -ms-flex-direction: column;
824 flex-direction: column;
825 gap: 8px
826 }
827 .wpbc_appointment_services__provider_notice {
828 -ms-flex-align: start;
829 align-items: flex-start;
830 -ms-flex-wrap: wrap;
831 flex-wrap: wrap
832 }
833 .wpbc_appointment_services__provider_notice .button {
834 margin-left: 32px
835 }
836 .wpbc_appointment_services__table,
837 .wpbc_appointment_services__table tbody,
838 .wpbc_appointment_services__table_wrap {
839 display: block;
840 overflow: visible;
841 width: 100%
842 }
843 .wpbc_appointment_services__table {
844 min-width: 0
845 }
846 .wpbc_appointment_services__table thead {
847 clip: rect(0 0 0 0);
848 clip-path: inset(50%);
849 height: 1px;
850 overflow: hidden;
851 position: absolute;
852 white-space: nowrap;
853 width: 1px
854 }
855 .wpbc_appointment_services__item {
856 box-sizing: border-box;
857 display: -ms-flexbox;
858 display: flex;
859 -ms-flex-wrap: wrap;
860 flex-wrap: wrap;
861 padding: 10px 8px;
862 position: relative;
863 width: 100%
864 }
865 .wpbc_appointment_services__item:not(:last-child) {
866 border-bottom: 1px solid #dcdcde
867 }
868 .wpbc_appointment_services__table tbody td {
869 -ms-flex-align: center;
870 align-items: center;
871 border-bottom: 0;
872 display: -ms-flexbox;
873 display: flex;
874 -ms-flex: 1 1 50%;
875 flex: 1 1 50%;
876 padding: 7px 8px;
877 width: 50%
878 }
879 .wpbc_appointment_services__table tbody td::before {
880 color: #646970;
881 content: attr(data-label);
882 -ms-flex: 0 0 104px;
883 flex: 0 0 104px;
884 font-size: 11px;
885 font-weight: 600;
886 line-height: 1.3;
887 padding-right: 8px;
888 text-align: left
889 }
890 .wpbc_appointment_services__table tbody .column-service {
891 -ms-flex-preferred-size: 100%;
892 flex-basis: 100%;
893 padding-right: 76px;
894 width: 100%
895 }
896 .wpbc_appointment_services__table tbody .column-actions::before,
897 .wpbc_appointment_services__table tbody .column-service::before {
898 display: none
899 }
900 .wpbc_appointment_services__table tbody .column-providers,
901 .wpbc_appointment_services__table tbody .column-status,
902 .wpbc_appointment_services__table tbody .column-weekdays {
903 -ms-flex-preferred-size: 100%;
904 flex-basis: 100%;
905 width: 100%
906 }
907 .wpbc_appointment_services__table tbody .column-weekdays {
908 -ms-flex-align: start;
909 align-items: flex-start;
910 -ms-flex-wrap: wrap;
911 flex-wrap: wrap;
912 text-align: left
913 }
914 .wpbc_appointment_services__availability_week,
915 .wpbc_appointment_services__provider_stack {
916 -ms-flex: 1 1 auto;
917 flex: 1 1 auto
918 }
919 .wpbc_appointment_services__availability_week {
920 min-width: 140px
921 }
922 .wpbc_appointment_services__availability_empty,
923 .wpbc_appointment_services__availability_links {
924 box-sizing: border-box;
925 -ms-flex: 0 0 calc(100% - 104px);
926 flex: 0 0 calc(100% - 104px);
927 margin-left: 104px
928 }
929 .wpbc_appointment_services__table tbody .column-actions {
930 border: 0;
931 padding: 0;
932 position: absolute;
933 right: 12px;
934 top: 20px;
935 width: auto
936 }
937 }
938 @media (max-width:480px) {
939 .wpbc_appointment_services__table tbody .column-duration,
940 .wpbc_appointment_services__table tbody .column-price {
941 -ms-flex-preferred-size: 100%;
942 flex-basis: 100%;
943 width: 100%
944 }
945 }