PluginProbe
Booking Calendar / 10.1.3
Booking Calendar v10.1.3
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 10.11 10.11.2 All 203 releases
booking / css / client.css

client.css in Booking Calendar 10.1.3, at css/client.css

1,788 lines 59.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * @version 1.0
3 * @package: Booking Calendar
4 * @category: Front-End
5 * @author wpdevelop
6 *
7 * @web-site https://wpbookingcalendar.com/
8 * @email info@wpbookingcalendar.com
9 *
10 * @modified 2023-11-11
11 */
12 .booking_form * ,
13 .bk_calendar_frame *{
14 /*! -webkit-box-sizing: border-box; */
15 /*! -moz-box-sizing: border-box; */
16 /*! box-sizing: border-box; */
17 }
18 /* Booking form structure //FixIn: 8.0.1.5 */
19 .wpbc_booking_form_structure {
20
21 }
22 .wpbc_booking_form_structure .wpbc_structure_calendar {
23
24 }
25 .wpbc_booking_form_structure .wpbc_structure_form {
26
27 }
28 /* form_center - in Free version */
29 .wpbc_booking_form_structure.wpbc_form_center { /* FixIn: 8.8.3.10 */
30 display:flex;
31 flex-flow: column wrap;
32 justify-content: space-between;
33 align-items: center;
34 }
35 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_calendar,
36 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_form {
37 flex: 1 1 auto;
38 margin-bottom: 1em;
39 }
40 /* FixIn: 9.8.12.1 - fix sizing in "booking form center" template" */
41 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_calendar,
42 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_form {
43 width: auto;
44 width: Min(350px, 100%);
45 }
46 .wpbc_booking_form_structure.wpbc_form_center .wpdev-form-control-wrap {
47 display:flex;
48 }
49 .wpbc_booking_form_structure.wpbc_form_center .wpbc_times_selector ,
50 .wpbc_booking_form_structure.wpbc_form_center .wpbc-form-element-checkbox {
51 max-width: 24em;
52 justify-content: flex-start;
53 }
54 @media (max-width: 782px) {
55 /*.wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_form,
56 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_calendar {
57 margin:0;
58 width: 100%;
59 }*/
60 .wpbc_booking_form_structure.wpbc_form_center .wpbc_structure_calendar .wpbc_change_over_triangle {
61 width:100%;
62 }
63 .wpbc_booking_form_structure.wpbc_form_center .wpbc_times_selector ,
64 .wpbc_booking_form_structure.wpbc_form_center .wpbc-form-element-checkbox {
65 max-width: 100%;
66 }
67 }
68 /* form_dark */
69 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form label{
70 color:#ddd;
71 }
72 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form input[type="text"],
73 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form textarea,
74 .wpbc_booking_form_structure.wpbc_form_dark .wpbc_structure_form select{
75 color:#000;
76 }
77 /* form_right //FixIn: 9.6.1.3 */
78 .wpbc_booking_form_structure.wpbc_form_right {
79 width:100%;
80 display: flex;
81 flex-flow: row wrap;
82 align-items: flex-start;
83 justify-content: flex-start;
84 }
85 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_calendar {
86 margin-right:20px;
87 flex: 1 1 auto;
88 }
89 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form {
90 /*float:left;*/
91 margin-top:-20px;
92 flex: 1 1 300px;
93 }
94 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form {
95 display: flex;
96 flex-flow: row wrap;
97 justify-content: flex-start;
98 align-items: flex-start;
99 }
100 /* FixIn: 9.6.2.6 */
101 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form > * {
102 margin: 15px 0;
103 flex: 0 1 100%;
104 }
105 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form .form-group.wpbc-form-element-rangetime,
106 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form .form-group.wpbc-form-element-textarea,
107 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form .form-group:last-child{
108 flex: 1 1 auto;
109 width:100%;
110 }
111 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form .form-group.wpbc-form-element-textarea textarea{
112 width:90%;
113 }
114 /* form footer */
115 .wpbc_booking_form_footer {
116 clear:both;
117 width:100%;
118 }
119 /*
120 .wpbc_booking_form_structure.wpbc_wizard .wpbc-form-header-section{
121 padding: 0.8em 1em;
122 font-weight: 400;
123 font-size: 0.9em;
124 font-style: italic;
125 background: #f9f9f9;
126 box-shadow: none;
127 }
128 .wpbc_booking_form_structure.wpbc_wizard .wpbc-form-btn-section {
129 padding:20px 0;
130 }
131 .wpbc_booking_form_structure.wpbc_wizard .wpbc-form-btn-section .wpbc_wizard_btn{
132
133 }
134 .wpbc_booking_form_structure.wpbc_wizard .wpbc_structure_calendar,
135 .wpbc_booking_form_structure.wpbc_wizard .wpbc_structure_form,
136 .wpbc_booking_form_structure.wpbc_wizard .wpbc_structure_submit {
137 display: block;
138 }
139 */
140 /* Booking form General structure */
141 form.booking_form {
142 text-align: left;
143 }
144 .booking_form .booking_form_div {
145 margin-left: auto;
146 margin-right: auto;
147 }
148 .booking_form .form-group {
149 margin:15px 0px;
150 }
151 /* -- Booking resource selection ------------------------------------------------------------------------------------ */
152 .resource_selection_div{
153 margin:40px 0;
154 }
155 .resource_selection_div select{
156 margin:0 1em;
157 }
158 /* TEXT, SELECT, TEXTAREA *****************************************************/
159 .booking_form_div textarea,
160 .booking_form_div input[type="text"],
161 .booking_form_div select {
162 border-color: #DFDFDF;
163 -moz-border-radius: 4px;
164 -webkit-border-radius: 4px;
165 border-radius: 4px;
166 border-style: solid;
167 border-width: 1px;
168 vertical-align: baseline;
169 }
170 /*.resource_selection_div select, !* FixIn: 7.2.0.2 *!*/
171 /*.booking_form_div select, !* FixIn: 7.2.0.2 *!*/
172 /*.booking_form_div textarea,*/
173 /*.booking_form_div input[type="text"] {*/
174 /* box-sizing: content-box;*/
175 /* -mox-box-sizing: content-box;*/
176 /* -webkit-box-sizing: content-box;*/
177 /* height:28px;*/
178 /* padding:2px 8px; */
179 /*}*/
180 /* Height */
181 /*.booking_form_div textarea, */
182 /*.booking_form_div select[multiple], */
183 /*.booking_form_div select[size]{*/
184 /* height:auto;*/
185 /*}*/
186
187 /* Width */
188
189 /*
190 .booking_form .form-group .controls select,
191 .booking_form select,
192 .booking_form textarea,
193 .booking_form input[type="text"]{
194 width:250px;
195 }
196 */
197
198 /* Time inputs at the form */
199 .booking_form input.wpdev-validates-as-time {
200 width: 50px;
201 }
202 .booking_form input[type="button"],
203 .booking_form input[type="submit"] {
204 width:auto;
205 vertical-align: middle;
206 }
207 /* Checkbox, Radio */
208 .booking_form .wpdev-checkbox .wpdev-list-item,
209 .booking_form .wpdev-radio .wpdev-list-item{
210 padding: 0 0.5em 0 0;
211 vertical-align: bottom;
212 }
213 .booking_form .wpdev-checkbox .wpdev-list-item input[type="checkbox"],
214 .booking_form .wpdev-radio .wpdev-list-item input[type="checkbox"] {
215 margin: 0;
216 padding: 0;
217 vertical-align: baseline;
218 }
219 .booking_form .wpdev-checkbox .wpdev-list-item input[type="radio"],
220 .booking_form .wpdev-radio .wpdev-list-item input[type="radio"] {
221 margin: 1px 0 0;
222 padding: 0;
223 vertical-align: middle;
224 }
225 /* Inline element in a row 2023-11-17 //FixIn: 9.8.8.1 */
226 .wpbc_container_booking_form .wpbc__field .wpbc_row_inline .wpdev-list-item input[type="radio"]{
227 vertical-align: baseline;
228 }
229
230 /* FixIn: 9.6.2.5 */
231 .booking_form input[type="text"]:focus,
232 .booking_form input[type="password"]:focus,
233 .booking_form input[type="color"]:focus,
234 .booking_form input[type="date"]:focus,
235 .booking_form input[type="datetime"]:focus,
236 .booking_form input[type="datetime-local"]:focus,
237 .booking_form input[type="email"]:focus,
238 .booking_form input[type="month"]:focus,
239 .booking_form input[type="number"]:focus,
240 .booking_form input[type="search"]:focus,
241 .booking_form input[type="tel"]:focus,
242 .booking_form input[type="time"]:focus,
243 .booking_form input[type="url"]:focus,
244 .booking_form input[type="week"]:focus,
245 .booking_form input[type="checkbox"]:focus,
246 .booking_form input[type="radio"]:focus,
247 .booking_form select:focus,
248 .booking_form textarea:focus{
249 box-shadow: 0 0 2px #2d7eff;
250 /*! border: 2px solid #567cb8; */
251 outline: none;
252 border-color: #567cb8;
253 }
254 .booking_form label.wpdev-list-item-label,
255 .booking_form label.wpdev-list-item-label:hover {
256 display: inline;
257 cursor: pointer;
258 vertical-align: middle;
259 font-weight: 400;
260 }
261 /* Disabled option in selectbox */
262 .booking_form_div select option.booked,
263 .booking_form_div select option:disabled{
264 color:#ddd;
265 }
266 /* Visitors selection - small selectboxes */
267 .booking_form_div select.col-md-1 {
268 float: none;
269 padding: 2px 8px;
270 min-width: 4em;
271 }
272
273 /* Booking Form Buttons *******************************************************/
274 .wpbc-payment-form .btn,
275 .wpbc-payment-form .button,
276 .booking_form_div .btn,
277 .booking_form_div .button,
278 .booking_form_div .submit,
279 .booking_form_div .button-secondary {
280 -moz-background-clip: border;
281 -moz-background-inline-policy: continuous;
282 -moz-background-origin: padding;
283 background: #f7f7f7 none repeat scroll 0 0;
284 border-color: #ccc;
285 box-shadow: 0 1px 0 #eee;
286 color: #555;
287 vertical-align: top;
288 white-space: normal;
289 }
290 .booking_form_div .submit,
291 .booking_form_div .button,
292 .booking_form_div .button-primary,
293 .booking_form_div .button-secondary,
294 .booking_form_div .button-highlighted,
295 .booking_form_div #postcustomstuff .submit input {
296 -moz-border-radius: 11px;
297 -webkit-border-radius: 11px;
298 -moz-box-sizing: content-box;
299 border-style: solid;
300 border-width: 1px;
301 cursor: pointer;
302 font-size: 11px !important;
303 line-height: 16px;
304 padding: 2px 8px;
305 text-decoration: none;
306 font-weight: 600;
307 margin: 10px 0px;
308 float: right;
309 }
310 /* Fix Overwrite issue by theme */
311 .booking_form_div input.btn-primary:hover {
312 background: #0044CC !important;
313 }
314 /* Pointer */
315 .booking_form_div input[type="button"]:hover,
316 .wpbc-payment-form input[type="button"]:hover {
317 cursor: pointer !important;
318 }
319 /* not allowed if disabled */
320 .booking_form_div input[type="button"]:disabled:hover,
321 .wpbc-payment-form input[type="button"]:disabled:hover {
322 cursor: not-allowed !important;
323 }
324
325 /* CAPTCHA ********************************************************************/
326 .wpbc_text_captcha_container{
327 display: flex;
328 flex-flow: row wrap;
329 justify-content: flex-start;
330 align-items: flex-start;
331 }
332 .wpbc_container_booking_form .booking_form_div img.captcha_img {
333 vertical-align: middle;
334 box-shadow: none;
335 margin-left: 1em;
336 align-self: center;
337 }
338 .wpbc_container_booking_form .booking_form_div .captachinput {
339 width: 120px;
340 flex: 0 1 10em;
341 margin: 0;
342 }
343
344 /* Widget container */
345 .widget_wpdev_booking {
346 width:100%;
347 float:left;
348 margin:5px 0px;
349 }
350 .widget_wpdev_booking .booking_form input[type="radio"],
351 .widget_wpdev_booking .booking_form input[type="checkbox"] {
352 width:auto;
353 }
354
355 /* Each field in the booking form has this wrap */
356 .wpdev-form-control-wrap{
357 display: inline-flex;
358 flex-flow: row wrap;
359 justify-content: flex-start;
360 align-items: center;
361 width: auto;
362 margin: 0.25em 0;
363 }
364 @media (max-width: 782px) {
365 .wpdev-form-control-wrap {
366 display: flex;
367 width: 100%;
368 }
369 .wpdev-form-control-wrap.wpbc_wrap_checkbox {
370 display: inline-flex;
371 width: auto; /* Otherwise incorrectly showing checkboxes on new line: "Fee: [checkbox fee '']" */
372 }
373 }
374 /* Wrap of options in checkboxes / radio buttons*/
375 .wpdev-form-control-wrap .wpdev-list-item {
376 display: inline-flex;
377 flex-flow: row wrap;
378 justify-content: flex-start;
379 align-items: center;
380 height: auto;
381 }
382 /* For checkboxes Aligning correctly. */
383 .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item {
384 flex-flow: row nowrap;
385 }
386 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label, /* //FixIn: 9.8.8.1 */
387 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label:hover, /* //FixIn: 9.8.8.1 */
388 .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label,
389 .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label:hover{
390 display: inline-block;
391 }
392 .wpbc_wrap_checkbox.wpdev-form-control-wrap .wpdev-list-item label *{
393 vertical-align: baseline;
394 }
395 .wpdev-form-control-wrap .wpdev-list-item > * {
396 margin: auto;
397 }
398 .wpdev-form-control-wrap.wpbc_wrap_checkbox .wpdev-list-item > *,
399 .wpdev-form-control-wrap.wpbc_wrap_checkbox .wpdev-list-item > *:hover {
400 margin: auto;
401 display: inline-block;
402 }
403 /* = Old Messages =================================================================================================== */
404 /* Under calendar */
405 .widget_wpdev_booking .booking_form .wpdev-help-message.wpdev-element-message {
406 font-size: 0.85em;
407 margin: 10px 4px 4px !important;
408 }
409 /* Under fields */
410 .widget_wpdev_booking .booking_form .wpdev-form-control-wrap .wpdev-help-message {
411 font-size: 0.85em;
412 margin: 2px 8px 2px 0 !important;
413 }
414 /* Messages in Ajax request after making booking *****************************/
415 .submiting_content {
416 border: 1px solid #5C5;
417 font-size: 15px;
418 font-weight: 600;
419 height: 45px;
420 margin: 15px auto;
421 padding: 15px 10px;
422 text-align: center;
423
424 width: 80%;
425 line-height: 1.5em;
426 padding: 10px 10% 14px !important;
427 }
428 /* Error Message FixIn: 8.7.11.10 */
429 .wpdevelop .alert-danger{
430 background-image: none;
431 background-color: #fff;
432 border-radius: 0 2px 2px 0;
433 border-width:1px;
434 border-left:4px solid #c23b3b;
435 }
436 /* Warning Messages //FixIn: 9.6.2.4 */
437 .wpdev-help-message.alert.alert-warning,
438 .wpdev-help-message .alert.alert-warning {
439 color: #916c34;
440
441 background: #fff;
442 box-shadow: 0 0px 3px #e0e0e0;
443 border: 1px solid #ded1bc;
444 border-left: 3px solid #e09118;
445 border-radius: 2px;
446
447 margin: 2px 2px 2px 0px;
448 padding: 0.5em 1em;
449
450 vertical-align: top;
451 font-size: 0.9rem;
452 /*line-height: 2.55em;*/
453 /*font-size:12px;*/
454 line-height: 1.4rem;
455 opacity: 1;
456 }
457
458 .booking_form .wpdev-checkbox .wpdev-help-message.alert.alert-warning {
459 line-height: inherit !important;
460 }
461 .wpdev-help-message.wpdev-element-message {
462 padding :5px 5px 4px;
463 margin: 10px 2px;
464 vertical-align: middle;
465 display:inline-block;
466 }
467 /* Thank you Messages //FixIn: 9.6.2.3 */
468 .submiting_content.wpdev-help-message.alert.alert-warning.alert-success {
469 border: 1px solid #d5d5d5;
470 border-left: 5px solid #88b706;
471 background: #fff;
472 box-shadow: 0 1px 10px #ddd;
473 color: #707070;
474 padding: 11px 10px !important;
475 margin: auto;
476 height: auto;
477 font-size: 1.1em;
478 font-weight: 600;
479 line-height: 2em !important;
480 width: 94%;
481 }
482 .form_bk_messages {
483 display: none;
484 float: left;
485 font-size: 14px;
486 font-weight: 600;
487 border: 1px solid #9DA;
488 padding: 3px 10px;
489 margin: 2px 5px;
490 background: #FEF9ED;
491 color: #555;
492 margin: 15px auto;
493 padding: 5px 10px;
494 text-align: center;
495 width: 100%;
496 clear: both;
497 }
498
499 /* ================================================================================================================== */
500 /* New Messages Style --------------------------------------------------------------------------------------------- */
501 /* ================================================================================================================== */
502 /* Messages near form fields - left / right side ------------------------------------------------------------------- */
503 .wpbc_front_end__message_container_right,
504 .wpbc_front_end__message_container_left {
505 display: inline-flex;
506 flex-flow: row wrap;
507 justify-content: flex-start;
508 align-items: center;
509 margin: 10px 1em;
510 }
511 .wpbc__field .wpbc_front_end__message_container_right,
512 .wpbc__field .wpbc_front_end__message_container_left{
513 margin: 10px 1em 10px 0;
514 }
515 .wpbc_front_end__message_container_right .wpbc_front_end__message,
516 .wpbc_front_end__message_container_left .wpbc_front_end__message{
517 flex: 0 1 auto;
518 margin: 0;
519 line-height: 1.8em;
520 border-radius: 2px;
521 }
522 /* Do not display icons in messages near fields */
523 .wpbc_front_end__message_container_right .wpbc_front_end__message .menu_icon,
524 .wpbc_front_end__message_container_left .wpbc_front_end__message .menu_icon{
525 display:none;
526 }
527 .wpbc_front_end__message_container_right .wpbc_front_end__message.wpbc_fe_message_warning,
528 .wpbc_front_end__message_container_left .wpbc_front_end__message.wpbc_fe_message_warning {
529 border-color: #ded1bc;
530 border-left-color: #e09118;
531 color: #916c34;
532 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
533 }
534 .wpbc_front_end__message_container_right .wpbc_front_end__message.wpbc_fe_message_error,
535 .wpbc_front_end__message_container_left .wpbc_front_end__message.wpbc_fe_message_error {
536 border-color: #dca7a7;
537 border-left-color: #c23b3b;
538 color: #a94442;
539 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
540 }
541 /* Full row messages ------------------------------------------------------------------------------------------------ */
542 .wpbc_front_end__message {
543 background: #ffffff;
544 border-left: 4px solid #fff;
545 /*box-shadow: 0 1px 1px 0 rgba(192, 192, 192, 0.55);*/
546 margin: 10px 0;
547 padding: 1px 20px 1px 10px;
548 line-height: 2.5em;
549 text-align:left;
550 border-top: 1px solid #d7d7d7;
551 border-right: 1px solid #d7d7d7;
552 border-bottom: 1px solid #d7d7d7;
553 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
554 display: inline-block;
555 }
556 /* Icon */
557 .wpbc_front_end__message i.menu_icon {
558 margin: 0 0.5em 0 0;
559 }
560 /* Standard messages - where LEFT border has different color */
561 .wpbc_front_end__message.wpbc_fe_message_info {
562 border-left-color: #00a0d2;
563 }
564 .wpbc_front_end__message.wpbc_fe_message_success {
565 border-left-color: #46b450;
566 }
567 .wpbc_front_end__message.wpbc_fe_message_warning {
568 border-left-color: #e09118;
569 }
570 .wpbc_front_end__message.wpbc_fe_message_error {
571 border-left-color: #c23b3b;
572 }
573 /* Alt messages - where border also has different color */
574 .wpbc_front_end__message.wpbc_fe_message_info i.menu_icon { color: #0084ad; }
575 .wpbc_fe_message_alt.wpbc_front_end__message.wpbc_fe_message_info {
576 border: 2px solid #00a0d2;
577 background: #fff;
578 border-left: 4px solid #00a0d2;
579 box-shadow: 0 0 4px #cfcfcf;
580 }
581 .wpbc_front_end__message.wpbc_fe_message_success i.menu_icon { color: #00810b; }
582 .wpbc_fe_message_alt.wpbc_front_end__message.wpbc_fe_message_success {
583 border: 2px solid #00950d;
584 background: #fff;
585 border-left: 4px solid #00950d;
586 box-shadow: 0 0 4px #cfcfcf;
587 }
588 .wpbc_front_end__message.wpbc_fe_message_warning i.menu_icon { color: #c17400; }
589 .wpbc_fe_message_alt.wpbc_front_end__message.wpbc_fe_message_warning {
590 border: 2px solid #c17400;
591 background: #fff;
592 border-left: 4px solid #e09118;
593 box-shadow: 0 0 4px #cfcfcf;
594 }
595 .wpbc_front_end__message.wpbc_fe_message_error i.menu_icon { color: #af5050; }
596 .wpbc_fe_message_alt.wpbc_front_end__message.wpbc_fe_message_error {
597 border: 2px solid #af5050;
598 background: #fff;
599 border-left: 4px solid #af5050;
600 box-shadow: 0 0 4px #cfcfcf;
601 }
602 /* ================================================================================================================== */
603
604 /* Booked Times Title in tooltip */
605 .wpbc_booked_times_word {
606 font-weight: 600;
607 }
608 /* Garbage */
609 .booking_form_garbage {
610 display:none;
611 }
612 /* Help block */
613 .wpdevelop .booking_form .help-block {
614 margin-bottom: 0;
615 margin-top: 0;
616 }
617 /* Admin bar count */
618 #wp-admin-bar-booking_options a span#booking-count {
619 background: none repeat scroll 0 0 #EEE;
620 border-radius: 10px 10px 10px 10px;
621 color: #333;
622 display: inline;
623 font-size: 10px;
624 font-weight: 600;
625 padding: 2px 5px;
626 text-shadow: none;
627 }
628 #wp-admin-bar-booking_options a:hover span#booking-count {
629 background: none repeat scroll 0 0 #FFF;
630 color: #000;
631 }
632
633 /* Pop Over Styles ************************************************************/
634 .wpdevelop.popover {
635 background: none repeat scroll 0 0 transparent;
636 border: medium none;
637 box-shadow: none;
638 width: auto !important;
639 z-index: 2147483647 !important;
640
641 }
642 .wpdevelop.popover.top .arrow {
643 border-top: 5px solid rgba(140, 140, 140, 0.8) !important;
644 }
645 .wpdevelop.popover.bottom .arrow {
646 border-bottom: 5px solid rgba(140, 140, 140, 0.8) !important;
647 }
648 .wpdevelop.popover.left .arrow {
649 border-left: 5px solid rgba(140, 140, 140, 0.8) !important;
650 }
651 .wpdevelop.popover.right .arrow {
652 border-right: 5px solid rgba(140, 140, 140, 0.8) !important;
653 }
654 .wpdevelop .popover-inner {
655 background: none repeat scroll 0 0 rgba(140, 140, 140, 0.8);
656 border-radius: 6px 6px 6px 6px;
657 box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
658 overflow: hidden;
659 padding: 3px;
660 width: 150px;
661 color: #111;
662 }
663 .wpdevelop .popover-inner .popover-title {
664 background-color: #FFF;
665 border-bottom: 0px solid #EEE;
666 border-radius: 3px 3px 0 0;
667 line-height: 1;
668 padding: 0px; /*9px 15px;*/
669 font-size: 13px;
670 }
671 .wpdevelop .popover-inner .popover-content {
672 background-clip: padding-box;
673 background-color: #FFF;
674 border-radius: 0 0 3px 3px;
675 padding: 14px;
676 }
677 .wpdevelop .popover-content,
678 .wpdevelop .popover-content p,
679 .wpdevelop .popover-content ul,
680 .wpdevelop .popover-content ol {
681 color: #111;
682 }
683
684 /* In Calendar Tooltip ***********************************************/
685 .wpbc_calendar_tooltip_booking_details {
686 font-weight:normal !important;
687 font-size:11px !important;
688 }
689 /* Rotate Icons for Loading ***********************************************/
690 .wpbc_animation_pause {
691 animation-play-state: paused !important;
692 }
693 .wpbc_icn_autorenew::before,
694 .wpbc_spin {
695 -webkit-animation: spin 2s infinite linear;
696 -moz-animation: spin 2s infinite linear;
697 -o-animation: spin 2s infinite linear;
698 animation: spin 2s infinite linear;
699 }
700 @-moz-keyframes spin {
701 0% {
702 -moz-transform: rotate(0deg);
703 }
704 100% {
705 -moz-transform: rotate(359deg);
706 }
707 }
708 @-webkit-keyframes spin {
709 0% {
710 -webkit-transform: rotate(0deg);
711 }
712 100% {
713 -webkit-transform: rotate(359deg);
714 }
715 }
716 @-o-keyframes spin {
717 0% {
718 -o-transform: rotate(0deg);
719 }
720 100% {
721 -o-transform: rotate(359deg);
722 }
723 }
724 @keyframes spin {
725 0% {
726 -webkit-transform: rotate(0deg);
727 transform: rotate(0deg);
728 }
729 100% {
730 -webkit-transform: rotate(359deg);
731 transform: rotate(359deg);
732 }
733 }
734 .wpbc_rotate-90 {
735 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
736 -webkit-transform: rotate(90deg);
737 -moz-transform: rotate(90deg);
738 -ms-transform: rotate(90deg);
739 -o-transform: rotate(90deg);
740 transform: rotate(90deg);
741 }
742 .wpbc_rotate-180 {
743 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
744 -webkit-transform: rotate(180deg);
745 -moz-transform: rotate(180deg);
746 -ms-transform: rotate(180deg);
747 -o-transform: rotate(180deg);
748 transform: rotate(180deg);
749 }
750 .wpbc_rotate-270 {
751 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
752 -webkit-transform: rotate(270deg);
753 -moz-transform: rotate(270deg);
754 -ms-transform: rotate(270deg);
755 -o-transform: rotate(270deg);
756 transform: rotate(270deg);
757 }
758 .wpbc_flip-horizontal {
759 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
760 -webkit-transform: scale(-1, 1);
761 -moz-transform: scale(-1, 1);
762 -ms-transform: scale(-1, 1);
763 -o-transform: scale(-1, 1);
764 transform: scale(-1, 1);
765 }
766 .wpbc_flip-vertical {
767 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
768 -webkit-transform: scale(1, -1);
769 -moz-transform: scale(1, -1);
770 -ms-transform: scale(1, -1);
771 -o-transform: scale(1, -1);
772 transform: scale(1, -1);
773 }
774
775 /* Mobile *********************************************************************/
776 @media (max-width: 782px) {
777 .wpdevelop input[type="text"],
778 .wpdevelop select{
779 font-size: 1.1em;
780 height: 36px; /* FixIn: 7.2.0.2 */
781 padding: 4px 8px;
782 }
783 /* //FixIn: 8.0.1.5 */
784 .wpbc_booking_form_structure.wpbc_form_right,
785 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_calendar,
786 .wpbc_booking_form_structure.wpbc_form_right .wpbc_structure_form {
787 width: 100%;
788 float: none;
789 margin-right: 0px;
790 }
791 }
792
793 /* Booking form CSS for more clear showing hints //FixIn: 8.7.3.5 */
794 .booking_form .form-hints-dev {
795 margin:1em 0;
796 border-bottom: 1px solid #eee;
797 }
798 .booking_form .form-hints-dev .dates-hints-dev {
799 padding: 2px 4px;
800 font-size: 85%;
801 color:#c7254e;
802 background-color:#f9f2f4;
803 border-radius: 2px;
804 }
805
806 /* ================================================================================================================== */
807 /* == DEPRECATED SECTION == */
808 /* ================================================================================================================== */
809 /* Different Forms S T R U C T U R E *******************************************************************************/
810 /* Booking Form - 2 columns width times //FixIn: 9.5.5.3 */
811 .wpbc_row {
812 display: flex;
813 flex-flow: row wrap;
814 justify-content: flex-start;
815 align-items: flex-start;
816 margin-top: 1em;
817 }
818 .wpbc_col {
819 flex: 0 1 1px;
820 margin-right: 4.1em;
821 }
822 .wpbc_col.wpbc_cal {
823 flex: 1 1 50%;
824 margin:1em 0;
825 }
826 @media (max-width: 782px) {
827 .wpbc_col {
828 flex: 0 1 auto;
829 margin-right: 0;
830 min-width: 100%;
831 }
832 }
833 .wpbc_col.wpbc_times {
834 flex: 1 1 50%;
835 margin: 1em 0;
836 }
837 .wpbc_col.wpbc_cal > *,
838 .wpbc_col.wpbc_times > * {
839 width:93%;
840 }
841 /* Booking Form - 2 columns //FixIn: 8.7.7.15 */
842 .wpbc_form_columns {
843 width: 99%;
844 margin-top:1em;
845 }
846 .wpbc_form_columns .wpbc_form_row {
847 display: flex;
848 flex-flow: row wrap;
849 justify-content: space-between;
850 }
851 .wpbc_form_columns .wpbc_form_field {
852 flex: 1 1 14em;
853
854 display: flex;
855 flex-flow: row wrap;
856 justify-content: flex-start;
857 align-items: flex-start;
858 align-content: flex-start;
859 padding: 0 3% 0 0;
860 margin: 0.7em 0;
861 }
862 .wpbc_form_field.wpbc_cal_field {
863 display: block;
864 }
865 .wpbc_form_field.wpbc_cal_field > * {
866 max-width:95%;
867 }
868 .wpbc_form_field.wpbc_cal_field .bk_calendar_frame {
869 margin:-0.75em 0 0;
870 }
871 @media (max-width: 782px) {
872 .wpbc_form_columns .wpbc_form_field {
873 flex: 1 1 100%
874 }
875 }
876 .wpbc_form_columns .wpbc_form_field label,
877 .wpbc_form_columns .wpbc_form_field label:hover {
878 flex: 0 1 auto;
879 margin-right: 2em;
880 display: flex;
881 flex-flow: column nowrap;
882 justify-content: center;
883 font-weight: 600;
884 /*width: 200px;*/
885 /*margin-top: 1em;*/
886 }
887 .wpbc_form_columns .wpbc_form_field .wpdev-form-control-wrap {
888 width: 100%;
889 }
890 .booking_form .wpbc_form_columns .form-group .controls select,
891 .booking_form .wpbc_form_columns select,
892 .booking_form .wpbc_form_columns input[type="text"] {
893 width: 95%;
894 }
895 .booking_form .wpbc_form_columns textarea {
896 width: 98%;
897 }
898 /* Different Forms */
899 /* Booking Form - 3 columns //FixIn: 8.8.2.6 */
900 .wpbc_form_columns_general .wpbc_form_row_general {
901 display: flex;
902 flex-flow: row wrap;
903 justify-content: space-between;
904 }
905 .wpbc_form_columns_general .wpbc_form_field_general{
906 flex: 0 1 0;
907 display: flex;
908 flex-flow: row wrap;
909 justify-content: flex-start;
910 align-items: baseline;
911 padding: 0 2% 0 0;
912 }
913 .wpbc_form_columns_general .wpbc_form_field_general:nth-child(1){
914 min-width: 341px;
915 flex: 0 1 auto;
916 }
917 @media (max-width: 782px) {
918 .wpbc_change_over_triangle {
919 width:100%;
920 }
921 .wpbc_form_columns_general .wpbc_form_field_general:nth-child(1),
922 .wpbc_form_columns_general .wpbc_form_field_general:nth-child(2){
923 min-width: 100%;
924 flex: 1 1 auto;
925 margin-bottom: 2em;
926 }
927 }
928 .wpbc_form_columns_general .wpbc_form_field_general:nth-child(2){
929 flex: 1 1 0;
930 padding: 0;
931 /*margin-top: -2.5em;*/
932 }
933 .wpbc_debug {
934 /*float: left;*/
935 margin-right: 2em;
936 }
937 .wpbc_debug:last-of-type{
938 float:none;
939 }
940
941
942 /* ================================================================================================================== */
943 /* == Version: 9.8 == */
944 /* ================================================================================================================== */
945
946 /**
947 * .wpbc_form_columns -> erased
948 * .wpbc_form_row -> .wpbc__row
949 * .wpbc_form_field -> .wpbc__field
950 * .wpbc_cal_field -> .wpbc__cal
951 * ?
952 * .wpbc_times -> .wpbc__times
953 * .wpbc_col -> .wpbc__field
954 * ?? wpbc_form_row_general
955 */
956 /* ------------------------------------------------------------------------------------------------------------------ */
957 /* == Templates of Booking Forms - R O W S == */
958 /* ------------------------------------------------------------------------------------------------------------------ */
959 .wpbc_container_booking_form .bk_calendar_frame,
960 .wpbc_container_booking_form .block_hints {
961 margin-bottom: 5px;
962 }
963 .wpbc_container_booking_form .wpbc_calendar_wraper {
964 margin-bottom: 10px;
965 }
966 /*@media (max-width: 782px) {*/
967 /*@media (max-width: 400px) {*/
968 /* .wpbc_container_booking_form .bk_calendar_frame {*/
969 /* width: 100% !important;*/
970 /* max-width: 100% !important;*/
971 /* }*/
972 /*}*/
973 .wpbc_container_booking_form {
974 width: 99%;
975 margin-top:1em;
976 }
977 .wpbc_container_booking_form .wpbc__row {
978 display: flex;
979 flex-flow: row wrap;
980 justify-content: space-between;
981 width:100%;
982 }
983 .wpbc_container_booking_form .wpbc__field:not(.wpbc__cal) {
984 flex: 1 1 14em;
985 display: flex;
986 flex-flow: row wrap;
987 justify-content: flex-start;
988 align-items: flex-start;
989 align-content: flex-start;
990 padding: 0 3% 0 0;
991 margin: 0.7em 0;
992 }
993 .wpbc_container_booking_form .wpbc__field:first-child{
994 padding-left:0;
995 }
996 .wpbc_container_booking_form .wpbc__field:last-child{
997 padding-right:0;
998 }
999 .wpbc_container_booking_form .wpbc__field .wpbc_calendar_wraper {
1000 width:100%;
1001 }
1002 @media (max-width: 782px) {
1003 .wpbc_container_booking_form .wpbc__field:not(.wpbc__cal) {
1004 flex: 1 1 100%;
1005 padding: 0;
1006 }
1007 }
1008 .wpbc_container_booking_form .wpbc__spacer{
1009 flex:0 1 auto;
1010 padding:0;
1011 margin: 0;
1012 }
1013 .wpbc__field.wpbc__cal {
1014 /*! display: block; */
1015 }
1016 .wpbc__field.wpbc__cal > * {
1017 max-width:100%;
1018 }
1019 .wpbc__field .bk_calendar_frame {
1020 margin-top: calc(0.25em + 8px);
1021 }
1022 .wpbc__field.wpbc__cal .bk_calendar_frame {
1023 margin:-0.75em 0 0;
1024 }
1025 .wpbc_container_booking_form .wpbc__field label,
1026 .wpbc_container_booking_form .wpbc__field label:hover {
1027 flex: 0 1 auto;
1028 margin-right: 2em;
1029 display: flex;
1030 flex-flow: column nowrap;
1031 justify-content: center;
1032 font-weight: 600;
1033 }
1034 .wpbc_container_booking_form .wpbc__field .wpdev-form-control-wrap {
1035 width: 100%;
1036 }
1037 .wpbc_container_booking_form .wpbc__field .form-group .controls select,
1038 .wpbc_container_booking_form .wpbc__field select,
1039 .wpbc_container_booking_form .wpbc__field input[type="text"] {
1040 width: 100%;
1041 }
1042 .wpbc_container_booking_form .wpbc__field textarea,
1043 .wpbc_container_booking_form textarea {
1044 width: 100%;
1045 }
1046 /* Inline element in a row 2023-11-17 //FixIn: 9.8.8.1 */
1047 .wpbc_row_inline {
1048 display: flex;
1049 flex-flow: row wrap;
1050 justify-content: flex-start;
1051 align-items: flex-start;
1052 flex: 1 1 auto;
1053 }
1054 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline label {
1055 flex-flow: row wrap;
1056 justify-content: flex-start;
1057 align-items: center;
1058 }
1059 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline .wpdev-form-control-wrap,
1060 .wpbc_container_booking_form .wpbc__row .wpbc_row_inline label .wpdev-form-control-wrap {
1061 width: auto;
1062 margin: 0 5px;
1063 }
1064 /* ------------------------------------------------------------------------------------------------------------------ */
1065 /* == Calendar Next to Form == */
1066 /* ------------------------------------------------------------------------------------------------------------------ */
1067 .wpbc_sections {
1068 display: flex;
1069 flex-flow: row wrap;
1070 justify-content: flex-start;
1071 align-items: flex-start;
1072 align-content: flex-start;
1073 }
1074 .wpbc_section_50 {
1075 flex: 1 1 48%;
1076 margin-bottom: 2em;
1077 }
1078 .wpbc_section_spacer {
1079 flex: 1 1 2%;
1080 }
1081 .wpbc_section_100 {
1082 flex: 0 1 96%;
1083 display: flex;
1084 flex-flow: row wrap;
1085 justify-content: flex-start;
1086 align-items: flex-start;
1087 margin-bottom: 1em;
1088 }
1089 .wpbc_section_100 span,
1090 .wpbc_section_100 p,
1091 .wpbc_section_100 .wpdev-form-control-wrap {
1092 flex: 1 1 100%;
1093 }
1094 .wpbc_section_100 .wpdev-form-control-wrap {
1095 display:flex;
1096 }
1097 .wpbc_container_booking_form .wpbc_section_100 textarea {
1098 flex: 1 1 100%;
1099 }
1100 /* ------------------------------------------------------------------------------------------------------------------ */
1101 /* == Booking Form Fields Size == */
1102 /* ------------------------------------------------------------------------------------------------------------------ */
1103 .wpbc_container_booking_form p{
1104 padding: 0.25em 0;
1105 }
1106 /* == W i d t h == */
1107 .wpbc_container_booking_form select,
1108 .wpbc_container_booking_form input[type="text"],
1109 .wpbc_container_booking_form textarea{
1110 max-width: 100%;
1111 max-width: Min(30em, 100%);
1112 width: 340px;
1113 }
1114
1115 /* ------------------------------------------------------------------------------------------------------------------ */
1116 /* == Booking Form Simple == New Layout */
1117 /* ------------------------------------------------------------------------------------------------------------------ */
1118 /* Admin panel at WP Booking Calendar > Settings > Booking Form page */
1119 .wpbc_center_preview ,
1120 .wpbc_center_preview .wpbc__form__div *{
1121 font-size:16px;
1122 }
1123 /* WP Booking Calendar > Add Booking page */
1124 #wpbc-new-admin-page .booking_form_div div:not(.bk_calendar_frame ) {
1125 font-size:15px;
1126 }
1127 .wpbc_booking_form_simple .wpbc__form__div{
1128 width:100%;
1129 }
1130 .wpbc_container_booking_form .wpbc_booking_form_simple .wpbc__field label{
1131 flex: 1 1 100%;
1132 }
1133 /* Warning message for required field */
1134 .wpbc_booking_form_simple .wpbc_front_end__message_container_right {
1135 margin: 10px 0;
1136 }
1137 /* //FixIn: 10.0.0.27 */
1138 @media (max-width: 670px) {
1139 div .wpbc_ideal_payment_table tr td{
1140 display:block
1141 }
1142 div .wpbc_container_booking_form select,
1143 div .wpbc_container_booking_form input[type="text"],
1144 div .wpbc_container_booking_form textarea{
1145 max-width: 98%;
1146 width: 98%;
1147 border:1px solid;
1148 }
1149 }
1150 /* In case we use columns, then max width 100% */
1151 .wpbc_container_booking_form .wpbc__field select,
1152 .wpbc_container_booking_form .wpbc__field input[type="text"],
1153 .wpbc_container_booking_form .wpbc__field textarea {
1154 max-width: 100%;
1155 }
1156 /* Exception for Booking Calendar Free (CENTER and Next to Calendar forms)*/
1157 /* FixIn: 9.8.13.3
1158 .wpbc_container_booking_form :is(.wpbc_form_center, .wpbc_form_right) textarea,
1159 .wpbc_container_booking_form :is(.wpbc_form_center, .wpbc_form_right) select,
1160 */
1161 .wpbc_container_booking_form :is(.wpbc_form_center, .wpbc_form_right) input[type="text"]{
1162 /*width: Min(340px, 100%);*/
1163 }
1164 .wpbc_container_booking_form :is(.wpbc_form_center, .wpbc_form_right) textarea,
1165 .wpbc_container_booking_form :is(.wpbc_form_center, .wpbc_form_right) select {
1166 /*min-width: Min(340px, 100%);*/
1167 /*width: 340px;*/
1168 }
1169 .wpbc_container.wpbc_container_booking_form textarea[cols*="0"],
1170 .wpbc_container.wpbc_container_booking_form textarea[cols*="1"],
1171 .wpbc_container.wpbc_container_booking_form textarea[cols*="2"],
1172 .wpbc_container.wpbc_container_booking_form textarea[cols*="3"],
1173 .wpbc_container.wpbc_container_booking_form textarea[cols*="4"],
1174 .wpbc_container.wpbc_container_booking_form textarea[cols*="5"],
1175 .wpbc_container.wpbc_container_booking_form textarea[cols*="6"],
1176 .wpbc_container.wpbc_container_booking_form textarea[cols*="7"],
1177 .wpbc_container.wpbc_container_booking_form textarea[cols*="8"],
1178 .wpbc_container.wpbc_container_booking_form textarea[cols*="9"]{
1179 width:auto;
1180 }
1181 /* == H e i g h t == */
1182 .resource_selection_div select,
1183 .wpbc_container.wpbc_container_booking_form select,
1184 .wpbc_container.wpbc_container_booking_form input[type="text"],
1185 .wpbc_container.wpbc_container_booking_form textarea {
1186 height:auto;
1187 font-size: 1rem;
1188 line-height: 2.4em;
1189 padding: 0 0.5em;
1190 }
1191 .resource_selection_div select,
1192 .wpbc_container.wpbc_container_booking_form select{
1193 height: 2.4em;
1194 }
1195 .wpbc_container.wpbc_container_booking_form select[multiple],
1196 .wpbc_container.wpbc_container_booking_form select[size]{
1197 min-height: 2.4em;
1198 height: auto;
1199 }
1200 .resource_selection_div select option,
1201 .wpbc_container.wpbc_container_booking_form select option{
1202 line-height: 2.4em;
1203 padding: 0.5em 0.5em;
1204 outline: none;
1205 }
1206 .wpbc_container.wpbc_container_booking_form textarea{
1207 height:9.7em;
1208 }
1209 .wpbc_container.wpbc_container_booking_form textarea[rows*="0"],
1210 .wpbc_container.wpbc_container_booking_form textarea[rows*="1"],
1211 .wpbc_container.wpbc_container_booking_form textarea[rows*="2"],
1212 .wpbc_container.wpbc_container_booking_form textarea[rows*="3"],
1213 .wpbc_container.wpbc_container_booking_form textarea[rows*="4"],
1214 .wpbc_container.wpbc_container_booking_form textarea[rows*="5"],
1215 .wpbc_container.wpbc_container_booking_form textarea[rows*="6"],
1216 .wpbc_container.wpbc_container_booking_form textarea[rows*="7"],
1217 .wpbc_container.wpbc_container_booking_form textarea[rows*="8"],
1218 .wpbc_container.wpbc_container_booking_form textarea[rows*="9"]{
1219 height: auto;
1220 }
1221 /* //FixIn: 10.0.0.25 */
1222 /* ================================================================================================================== */
1223 /* == THANK_YOU - SECTION == */
1224 /* ================================================================================================================== */
1225 .wpbc_ty_hide{
1226 display: none !important;
1227 }
1228 .wpbc_after_booking_thank_you_section{
1229 display: flex;
1230 flex-flow:column wrap;
1231 justify-content: flex-start;
1232 align-items: flex-start;
1233 max-width: 65rem;
1234 margin: auto;
1235 }
1236 .wpbc_after_booking_thank_you_section * {
1237 text-shadow: none;
1238 }
1239 /* Thank you - message */
1240 .wpbc_after_booking_thank_you_section .wpbc_ty__message {
1241 flex: 1 1 auto;
1242 padding: 0;
1243 margin: 30px 0 10px;
1244 font-size: 20px;
1245 font-weight: 400;
1246 }
1247 /* Thank you - Container with shadow */
1248 .wpbc_after_booking_thank_you_section .wpbc_ty__container,
1249 .wpbc_after_booking_thank_you_section .wpbc_ty__container * {
1250 color: #444;
1251 }
1252 /* Fix color issue for iFrame of PayPal */
1253 .wpbc_after_booking_thank_you_section .wpbc_ty__container iframe {
1254 color: transparent;
1255 }
1256 .wpbc_after_booking_thank_you_section .wpbc_ty__container {
1257 flex: 1 1 100%;
1258
1259 display: flex;
1260 flex-flow:column wrap;
1261 justify-content: flex-start;
1262 align-items: flex-start;
1263
1264 /*! box-shadow: 0 1px 10px #ddd; */
1265 /*! box-shadow: 0 0px 3px #e0e0e0; */
1266 box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 6px 0px;
1267 /*! border: 1px solid #d5d5d5; */
1268 border: 1px solid rgb(204, 204, 204);
1269 /*! border-left: 5px solid #88b706; */
1270
1271 border-radius: 2px;
1272 background: #FFF;
1273 color: #707070;
1274
1275 padding: 10px 15px;
1276 box-sizing: border-box;
1277 margin: auto;
1278
1279 font-size: 1rem;
1280 font-weight: 400;
1281 line-height: 2.2em;
1282 text-align: left;
1283
1284 max-width: 100%;
1285 width: 100%;
1286 }
1287 /* Header with booking ID */
1288 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__header{
1289 flex: 1 1 100%;
1290
1291 border-left: 5px solid #88b706;
1292 padding: 5px 20px;
1293 font-size: 18px;
1294 width: 100%;
1295 margin-left: -10px;
1296 line-height: 36px;
1297 font-weight: 400;
1298 }
1299 /* Confirmation content, like booking details and resource description */
1300 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content{
1301 flex: 1 1 100%;
1302 margin-top: 10px;
1303 width: 100%;
1304 display: flex;
1305 flex-flow:row wrap;
1306 justify-content: space-between;
1307 align-items: flex-start;
1308 word-break: normal;
1309 hyphens: none;
1310 }
1311 /* Content section with 100% column */
1312 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text{
1313 flex: 1 1 100%;
1314 word-break: break-word;
1315 padding:10px 0px;
1316 border-top: 1px solid #efefef;
1317 }
1318 /* 2 columns */
1319 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text.wpbc_cols_2{
1320 /*flex: 0 1 48%;*/
1321 flex: 1 1 22em;
1322 width: 48%;
1323 margin-right: 1%;
1324 }
1325 @media (max-width: 670px) {
1326 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text.wpbc_cols_2{
1327 flex: 1 1 100%;
1328 }
1329 }
1330 /* Header of the section, like "Personal information" | 'Booking details' */
1331 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .wpbc_ty__section_header{
1332 font-size: 18px;
1333 line-height: 2em;
1334 }
1335 /* H4 header in section */
1336 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text h4{
1337 font-size: 18px;
1338 line-height: 1.8em;
1339 }
1340 /* Dates section */
1341 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .wpbc_ty__section_text_dates{
1342
1343 }
1344 /* Times section */
1345 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .wpbc_ty__section_text_times{
1346
1347 }
1348 /* Costs section */
1349 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .wpbc_ty__section_text_costs{
1350 text-align: right;
1351 padding: 0 2em;
1352 }
1353
1354 /* Discount coupon code in cost hint - align vertically with smaller font */
1355 span[class^='booking_hint'], span[class*=' booking_hint']{
1356 display: inline-flex;
1357 flex-flow: row wrap;
1358 justify-content: flex-start;
1359 align-items: center;
1360 vertical-align: baseline;
1361 }
1362 .coupon_description_wrapper{
1363 font-size: 0.7em;
1364 font-weight: 400;
1365 margin-left: 0.8em;
1366 }
1367 .wpbc_after_booking_thank_you_section .coupon_description_wrapper {
1368 font-size: 1em;
1369 }
1370
1371 /* Gateways Section ***************************************************************************************************/
1372 .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text.wpbc_ty__content_gateways{
1373 flex: 1 1 100%;
1374 display: flex;
1375 flex-flow:row wrap;
1376 justify-content: center;
1377 justify-content: space-around;
1378 align-items: flex-start;
1379 border-top: 0 solid #efefef;
1380 }
1381
1382
1383 /* ================================================================================================================== */
1384 /* == Payment Gateway == */
1385 /* ================================================================================================================== */
1386 .wpbc_ty__content_gateways .wpbc_ty__gateway {
1387 flex: 1 1 100%;
1388 flex: 1 1 100%;
1389 margin-bottom: 1em;
1390 margin: 0 5px 1em;
1391 display: flex;
1392 flex-flow: row wrap;
1393 justify-content: flex-start;
1394 align-items: flex-start;
1395 }
1396 .wpbc_ty__content_gateways .wpbc_ty__gateway.wpbc_col_auto_width{
1397 /*max-width: 286px;*/
1398 flex: 1 1 auto;
1399 flex: 0 1 auto;
1400 }
1401 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form {
1402 /*flex:1 1 100%;*/
1403 /*max-width: 95%;*/
1404 flex:0 1 auto;
1405 min-width: 260px;
1406
1407 display:flex;
1408 flex-flow:row wrap;
1409 justify-content: flex-start;
1410 align-items: flex-start;
1411 }
1412 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form form{
1413 flex:1 1 100%;
1414 display:flex;
1415 flex-flow:column wrap;
1416 justify-content: flex-start;
1417 align-items: center;
1418 }
1419 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form .wpbc_button_gw{
1420 flex:1 1 100%;
1421 display:flex;
1422 flex-flow:column wrap;
1423 justify-content: flex-start;
1424 align-items: center;
1425 width: 100%;
1426 }
1427 .wpbc_paypal_fee{
1428 font-size: 0.68em;
1429 vertical-align: text-top;
1430 line-height: 1em;
1431 margin: 7px 0px;
1432 }
1433 /* ================================================================================================================== */
1434 /* == Buttons == */
1435 /* ================================================================================================================== */
1436 .wpbc_container .wpbc_button_light,
1437 .wpbc_container.wpbc_container_booking_form .wpbc_button_light {
1438 border: 2px solid #eee;
1439 box-shadow: 0 5px 10px #eee;
1440 background: #f9f9f9;
1441 color: #777;
1442
1443 border-radius: 0.375rem;
1444 padding: 0.575rem 2.25rem;
1445 font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.208), 1.125rem);
1446 line-height: 1.2;
1447
1448 text-decoration: none;
1449 cursor: pointer;
1450 outline: none;
1451
1452 display: flex;
1453 flex-flow: row wrap;
1454 justify-content: center;
1455 align-items: center;
1456 margin: 0;
1457 }
1458 .wpbc_container .wpbc_button_light:focus,
1459 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus,
1460 .wpbc_container .wpbc_button_light:hover,
1461 .wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover
1462 {
1463 border-radius: 0.375rem;
1464 padding: 0.575rem 2.25rem;
1465 font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.208), 1.125rem);
1466 line-height: 1.2;
1467
1468 text-decoration: none;
1469 cursor: pointer;
1470
1471 border: 2px solid rgb(77, 145, 205);
1472 box-shadow: 0 5px 10px #f0f0f8;
1473 background: rgb(255 255 255);
1474 color: #5f5f5f;
1475 }
1476 /* ================================================================================================================== */
1477 /* Stripe */
1478 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe {
1479 background: 90% 50% / 80px auto no-repeat url("../inc/assets/stripe.svg"), #fff;
1480 background-color: rgb(77, 77, 77);
1481 padding-right: 130px;
1482 border: 2px solid rgb(77, 77, 77);
1483 color: #fff;
1484 /*text-indent:-9999px;*/
1485 /*background: 50% 50% / 80px auto no-repeat url("../inc/assets/stripe.svg"), #000;*/
1486 /*min-width: 175px;*/
1487 }
1488 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus,
1489 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover
1490 {
1491 border: 2px solid #5f5f5f;
1492 background-color: #5f5f5f;
1493 }
1494 /* ================================================================================================================== */
1495 /* PayPal Yellow */
1496 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow,
1497 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver,
1498 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white
1499 {
1500 background: 90% 50% / 30% 50% no-repeat url("../inc/assets/paypal_commerce.svg"), transparent;
1501 padding-right: 115px;
1502 background-color: #ffc439 !important;
1503 border: 2px solid #ffc439 !important;
1504 color: #2C2E2F;
1505 box-shadow: none;
1506
1507 text-indent:-9999px;
1508 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_commerce.svg"), #ffc439 !important;
1509 min-width: 175px;
1510 }
1511 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:focus,
1512 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:hover,
1513 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:focus,
1514 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:hover,
1515 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:focus,
1516 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:hover
1517 {
1518 background-color: #f2ba36;
1519 border-color: #f2ba36;
1520 box-shadow: 0 5px 10px #f0f0f8;
1521 color: #5f5f5f;
1522 }
1523 /* PayPal Blue */
1524 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue,
1525 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black {
1526 background: 90% 50% / 30% 50% no-repeat url("../inc/assets/paypal_white_full.svg"), transparent;
1527 padding-right: 115px;
1528 background-color: #009cde !important;
1529 border: 2px solid #009cde !important;
1530 color: #fff;
1531 box-shadow: none;
1532
1533 text-indent:-9999px;
1534 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_white_full.svg"), #009cde !important;
1535 min-width: 175px;
1536 }
1537 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue:focus,
1538 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue:hover,
1539 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:focus,
1540 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:hover {
1541 background-color: #33b0e5;
1542 border-color: #33b0e5;
1543 box-shadow: 0 5px 10px #f0f0f8;
1544 color: #fff;
1545 }
1546 /* PayPal Silver (based on Yellow) */
1547 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver {
1548 background-color: #eee !important;
1549 border: 2px solid #eee !important;
1550 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_commerce.svg"), #eee !important;
1551 }
1552 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:focus,
1553 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:hover {
1554 background-color: #e2e2e2 !important;
1555 border-color: #e2e2e2 !important;
1556 }
1557 /* PayPal White (based on Yellow) */
1558 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white {
1559 background-color: #fff !important;
1560 border: 1px solid #2C2E2F !important;
1561 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_commerce.svg"), #fff !important;
1562 }
1563 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:focus,
1564 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:hover {
1565 background-color: #fff !important;
1566 border-color: #2C2E2F !important;
1567 }
1568 /* PayPal Block (based on Blue) */
1569 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black {
1570 background-color: #2c2e2f !important;
1571 border: 2px solid #2c2e2f !important;
1572 background: 50% 50% / 80px auto no-repeat url("../inc/assets/paypal_white_full.svg"), #2c2e2f !important;
1573 }
1574 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:focus,
1575 .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:hover {
1576 background-color: #565859 !important;
1577 border-color: #565859 !important;
1578 }
1579 /* ================================================================================================================== */
1580 /* == PayPal Standard Checkout Container == */
1581 /* ================================================================================================================== */
1582 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form.paypal_std_co_div{
1583 text-align:left;
1584 clear:both;
1585 }
1586 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form.paypal_std_co_div .wpbc_paypal_fee{
1587 text-align:center;
1588 }
1589 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form.paypal_std_co_div .wpbc_paypal_std_co{
1590 padding:0 2px;
1591 flex: 1 1 auto;
1592 }
1593 .wpbc_ty__content_gateways .wpbc_ty__gateway .wpbc-payment-form.paypal_std_co_div .wpbc_paypal_std_co #wpbc_paypal_std_co_button_container{
1594
1595 }
1596 /* ================================================================================================================== */
1597 /* == Dark Theme 1 == */
1598 /* ================================================================================================================== */
1599
1600 .wpbc_theme_dark_1 .wpbc_front_end__message{
1601 border-top: 1px solid rgb(0, 0, 0) !important;
1602 border-right: 1px solid rgb(0, 0, 0) !important;
1603 border-bottom: 1px solid rgb(0, 0, 0) !important;
1604 background: #626262;
1605 color: #5f5f5f;
1606 box-shadow: 0 0px 3px #3b3b3b;
1607 color:#fff !important;
1608 }
1609 /* ================================================================================================================== */
1610 /* == THANK_YOU - SECTION - Dark Theme 1 == */
1611 /* ================================================================================================================== */
1612 .wpbc_theme_dark_1 .wpbc_after_booking_thank_you_section .wpbc_ty__message{
1613 color: #cdcdcd;
1614 }
1615 .wpbc_theme_dark_1 .wpbc_after_booking_thank_you_section .wpbc_ty__container * {
1616 color: #fff;
1617 }
1618 .wpbc_theme_dark_1 .wpbc_after_booking_thank_you_section .wpbc_ty__container{
1619 border: 1px solid rgb(0, 0, 0);
1620 background: #626262;
1621 color: #5f5f5f;
1622 box-shadow: 0 0px 3px #3b3b3b;
1623 }
1624 /* Payment Buttons ----------------------------------------------------------- */
1625 .wpbc_theme_dark_1.wpbc_container .wpbc_button_light {
1626 box-shadow: 0 1px 5px #424242;
1627 border: 2px solid #525252;
1628 background: #4d4d4d;
1629 color: #fff;
1630 }
1631 .wpbc_theme_dark_1.wpbc_container .wpbc_button_light:focus,
1632 .wpbc_theme_dark_1.wpbc_container .wpbc_button_light:hover
1633 {
1634 box-shadow: 0 1px 5px #424242;
1635 border: 2px solid #5f5f5f;
1636 background: #5c5c5c;
1637 color: #fff;
1638 }
1639 .wpbc_theme_dark_1.wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:focus,
1640 .wpbc_theme_dark_1.wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:hover
1641 {
1642 box-shadow: 0 5px 10px #424242;
1643 }
1644 .wpbc_theme_dark_1.wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus,
1645 .wpbc_theme_dark_1.wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover
1646 {
1647 background-color:#4d4d4d;
1648 border-color:#4d4d4d;
1649 }
1650 /* Booking form elements ----------------------------------------------------------- */
1651 .wpbc_theme_dark_1 p,
1652 .wpbc_theme_dark_1 label{
1653 color: #989898;
1654 }
1655 .wpbc_theme_dark_1.wpbc_container select,
1656 .wpbc_theme_dark_1.wpbc_container textarea,
1657 .wpbc_theme_dark_1.wpbc_container input{
1658 color:#444;
1659 }
1660 /* ================================================================================================================== */
1661 /* == Capacity Hints tooltips == */
1662 /* ================================================================================================================== */
1663 .capacity_hint {
1664 align-self: baseline;
1665 margin: 0;
1666 }
1667 .capacity_hint .wpbc_chint__full_day_bookings,
1668 .capacity_hint.wpbc_chin_newline {
1669 flex: 1 1 100%;
1670 /*margin: 0.5em 0;*/
1671 }
1672 .wpbc_capacity_hint_container {
1673 display: flex;
1674 flex-flow:column nowrap;
1675 justify-content: flex-start;
1676 align-items: flex-start;
1677 width:100%;
1678 font-size:0.8em;
1679 line-height: 2em;
1680 }
1681 .wpbc_capacity_hint_container .wpbc_chint__datetime_container{
1682 flex: 1 1 auto;
1683 display: flex;
1684 flex-flow:row wrap;
1685 justify-content: flex-start;
1686 align-items: flex-start;
1687 width:100%;
1688 }
1689 .wpbc_chin_newline .wpbc_capacity_hint_container .wpbc_chint__datetime_container{
1690 /*margin:0.25em 0;*/
1691 }
1692 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container{
1693 flex:1 1 100%;
1694 display: flex;
1695 flex-flow: row wrap;
1696 justify-content: flex-start;
1697 align-items: flex-start;
1698 }
1699 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container .wpbc_chint__date{
1700 font-weight: 600;
1701 flex: 0 1 auto;
1702 }
1703 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container .wpbc_chint__date_divider{
1704 flex: 1 1 auto;
1705 display: none;
1706 }
1707 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container{
1708 flex:0 1 auto;
1709 display: flex;
1710 flex-flow: row wrap;
1711 justify-content: flex-start;
1712 align-items: flex-start;
1713 margin-right: 1em;
1714 }
1715 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container .wpbc_chint__timeslot{
1716
1717 }
1718 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container .wpbc_chint__timeslot_divider{
1719
1720 }
1721 .wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container .wpbc_chint__availability{
1722 font-weight: 600;
1723 padding-left:0.5em;
1724 }
1725 .wpbc_chint__availability{
1726 color:#890;
1727 }
1728 .availability_num_0{
1729 color: #dc3400;
1730 }
1731 .availability_num_1,
1732 .availability_num_2 {
1733 color: #dc7100;
1734 }
1735 .availability_num_3,
1736 .availability_num_4,
1737 .availability_num_5{
1738 color: currentColor;
1739 }
1740 .wpbc_selected_timeslot {
1741 font-weight: 600;
1742 text-decoration: underline;
1743 text-decoration-style: dashed;
1744 }
1745 /* Full day CSS for [capacity_hint] */
1746 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container{
1747 margin: 0;
1748 line-height: unset;
1749 font-size: 0.85em;
1750
1751 flex-flow: row wrap;
1752 }
1753 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container {
1754 flex: 0 1 auto;
1755 flex-flow: row nowrap;
1756 width: auto;
1757 }
1758 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container {
1759 flex: 0 1 auto;
1760 flex-flow: row nowrap;
1761 }
1762 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__date_container .wpbc_chint__date_divider {
1763 flex: 0 1 auto;
1764 display: block;
1765 }
1766 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container .wpbc_chint__timeslot {
1767 display: none;
1768 }
1769 .wpbc_chint__full_day_bookings.wpbc_capacity_hint_container .wpbc_chint__datetime_container .wpbc_chint__time_container .wpbc_chint__timeslot_divider {
1770 display: none;
1771 }
1772
1773 .wpbc_message_in_live_demo {
1774 background: #ffffff;
1775 box-shadow: 0 2px 8px #ddd;
1776 text-align: left;
1777 border-left: 4px solid #9580aa;
1778 border-top: 1px solid #f0f0f0;
1779 border-right: 1px solid #f0f0f0;
1780 margin: 10px 0;
1781 line-height: 2;
1782 padding: 5px 20px;
1783 font-size: 17px;
1784 color:#444;
1785 }
1786 .wpbc_wizard_step_hidden {
1787 display:none;
1788 }