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 / _src / appointment_services_page.css

appointment_services_page.css in Booking Calendar 11.5, at includes/page-appointment-services/_src/appointment_services_page.css

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