PluginProbe ʕ •ᴥ•ʔ
Secure Custom Fields / trunk
Secure Custom Fields vtrunk
6.9.1 6.9.0 6.8.9 6.8.7 6.8.8 6.8.6 6.8.4 6.8.5 trunk 6.4.0-beta1 6.4.0-beta2 6.4.1 6.4.1-beta3 6.4.1-beta4 6.4.1-beta5 6.4.1-beta6 6.4.1-beta7 6.4.2 6.5.0 6.5.1 6.5.2 6.5.3 6.5.4 6.5.5 6.5.6 6.5.7 6.6.0 6.7.0 6.7.1 6.8.0 6.8.1 6.8.2 6.8.3
secure-custom-fields / assets / src / sass / acf-input.scss
secure-custom-fields / assets / src / sass Last commit date
pro 1 week ago _acf-headerbar.scss 1 year ago _acf-icon-picker.scss 1 year ago _admin-inputs.scss 1 year ago _admin-toolbar.scss 1 year ago _btn.scss 1 year ago _dark.scss 1 year ago _edit-field-group.scss 1 year ago _field-group.scss 1 year ago _field-picker.scss 1 year ago _field-type-icons.scss 1 year ago _fields.scss 1 month ago _forms.scss 11 months ago _global.scss 1 year ago _icons.scss 1 year ago _input.scss 1 year ago _list-table.scss 1 year ago _media.scss 1 year ago _mixins.scss 1 year ago _post-types-taxonomies.scss 1 year ago _postbox.scss 1 year ago _pro-upgrade.scss 1 year ago _sub-field-groups.scss 1 year ago _tools.scss 1 year ago _typography.scss 1 year ago _updates.scss 1 year ago _variables.scss 1 year ago acf-dark.scss 1 year ago acf-field-group.scss 7 months ago acf-global.scss 2 months ago acf-input.scss 1 month ago
acf-input.scss
3387 lines
1 @charset "UTF-8";
2 /*--------------------------------------------------------------------------------------------
3 *
4 * Vars
5 *
6 *--------------------------------------------------------------------------------------------*/
7 /* colors */
8 /* acf-field */
9 /* responsive */
10 /*--------------------------------------------------------------------------------------------
11 *
12 * ACF 6 ↓
13 *
14 *--------------------------------------------------------------------------------------------*/
15 /*--------------------------------------------------------------------------------------------
16 *
17 * Mixins
18 *
19 *--------------------------------------------------------------------------------------------*/
20 /*---------------------------------------------------------------------------------------------
21 *
22 * Global
23 *
24 *---------------------------------------------------------------------------------------------*/
25 .acf-admin-page #wpcontent {
26 line-height: 140%;
27 }
28
29 /*---------------------------------------------------------------------------------------------
30 *
31 * Links
32 *
33 *---------------------------------------------------------------------------------------------*/
34 .acf-admin-page a {
35 color: #0783BE;
36 }
37
38 /*---------------------------------------------------------------------------------------------
39 *
40 * Headings
41 *
42 *---------------------------------------------------------------------------------------------*/
43 .acf-h1, .acf-admin-page h1,
44 .acf-headerbar h1 {
45 font-size: 21px;
46 font-weight: 400;
47 }
48
49 .acf-h2, .acf-page-title, .acf-admin-page h2,
50 .acf-headerbar h2 {
51 font-size: 18px;
52 font-weight: 400;
53 }
54
55 .acf-h3, .acf-admin-page h3,
56 .acf-headerbar h3 {
57 font-size: 16px;
58 font-weight: 400;
59 }
60
61 /*---------------------------------------------------------------------------------------------
62 *
63 * Paragraphs
64 *
65 *---------------------------------------------------------------------------------------------*/
66 .acf-admin-page .p1 {
67 font-size: 15px;
68 }
69 .acf-admin-page .p2 {
70 font-size: 14px;
71 }
72 .acf-admin-page .p3 {
73 font-size: 13.5px;
74 }
75 .acf-admin-page .p4 {
76 font-size: 13px;
77 }
78 .acf-admin-page .p5 {
79 font-size: 12.5px;
80 }
81 .acf-admin-page .p6, .acf-admin-page .acf-field p.description, .acf-field .acf-admin-page p.description, .acf-admin-page .acf-small {
82 font-size: 12px;
83 }
84 .acf-admin-page .p7, .acf-admin-page .acf-field-setting-prefix_label p.description code, .acf-field-setting-prefix_label p.description .acf-admin-page code,
85 .acf-admin-page .acf-field-setting-prefix_name p.description code,
86 .acf-field-setting-prefix_name p.description .acf-admin-page code {
87 font-size: 11.5px;
88 }
89 .acf-admin-page .p8 {
90 font-size: 11px;
91 }
92
93 /*---------------------------------------------------------------------------------------------
94 *
95 * Page titles
96 *
97 *---------------------------------------------------------------------------------------------*/
98 .acf-page-title {
99 color: #344054;
100 }
101
102 /*---------------------------------------------------------------------------------------------
103 *
104 * Hide old / native WP titles from pages
105 *
106 *---------------------------------------------------------------------------------------------*/
107 .acf-admin-page .acf-settings-wrap h1 {
108 display: none !important;
109 }
110 .acf-admin-page #acf-admin-tools h1 {
111 display: none !important;
112 }
113
114 /*---------------------------------------------------------------------------------------------
115 *
116 * Small
117 *
118 *---------------------------------------------------------------------------------------------*/
119 /*---------------------------------------------------------------------------------------------
120 *
121 * Link focus style
122 *
123 *---------------------------------------------------------------------------------------------*/
124 .acf-admin-page a:focus {
125 box-shadow: none;
126 outline: none;
127 }
128 .acf-admin-page a:focus-visible {
129 box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8);
130 outline: 1px solid transparent;
131 }
132
133 /*--------------------------------------------------------------------------------------------
134 *
135 * acf-field
136 *
137 *--------------------------------------------------------------------------------------------*/
138 .acf-field,
139 .acf-field .acf-label,
140 .acf-field .acf-input {
141 -webkit-box-sizing: border-box;
142 -moz-box-sizing: border-box;
143 box-sizing: border-box;
144 position: relative;
145 }
146
147 .acf-field {
148 margin: 15px 0;
149 clear: both;
150 }
151 .acf-field p.description {
152 display: block;
153 margin: 0;
154 padding: 0;
155 }
156 .acf-field .acf-label {
157 vertical-align: top;
158 margin: 0 0 10px;
159 }
160 .acf-field .acf-label label {
161 display: block;
162 font-weight: 500;
163 margin: 0 0 3px;
164 padding: 0;
165 }
166 .acf-field .acf-label:empty {
167 margin-bottom: 0;
168 }
169 .acf-field .acf-input {
170 vertical-align: top;
171 }
172 .acf-field p.description {
173 display: block;
174 margin-top: 6px;
175 color: #667085;
176 }
177 .acf-field .acf-notice {
178 margin: 0 0 15px;
179 background: #edf2ff;
180 color: #0c6ca0;
181 border-color: #2183b9;
182 }
183 .acf-field .acf-notice.-error {
184 background: #ffe6e6;
185 color: #cc2727;
186 border-color: #d12626;
187 }
188 .acf-field .acf-notice.-success {
189 background: #eefbe8;
190 color: #0e7b17;
191 border-color: #32a23b;
192 }
193 .acf-field .acf-notice.-warning {
194 background: #fff3e6;
195 color: #bd4b0e;
196 border-color: #d16226;
197 }
198 td.acf-field,
199 tr.acf-field {
200 margin: 0;
201 }
202
203 .acf-field[data-width]] {
204 float: left;
205 clear: none;
206 /*
207 @media screen and (max-width: $sm) {
208 float: none;
209 width: auto;
210 border-left-width: 0;
211 border-right-width: 0;
212 }
213 */
214 }
215 .acf-field[data-width]] + .acf-field[data-width]] {
216 border-left: 1px solid #eeeeee;
217 }
218 html[dir=rtl]=rtl] .acf-field[data-width]] {
219 float: right;
220 }
221 html[dir=rtl]=rtl] .acf-field[data-width]] + .acf-field[data-width]] {
222 border-left: none;
223 border-right: 1px solid #eeeeee;
224 }
225 td.acf-field[data-width]],
226 tr.acf-field[data-width]] {
227 float: none;
228 }
229
230 .acf-field.-c0 {
231 clear: both;
232 border-left-width: 0 !important;
233 }
234 html[dir=rtl]=rtl] .acf-field.-c0 {
235 border-left-width: 1px !important;
236 border-right-width: 0 !important;
237 }
238
239 .acf-field.-r0 {
240 border-top-width: 0 !important;
241 }
242
243 /*--------------------------------------------------------------------------------------------
244 *
245 * acf-fields
246 *
247 *--------------------------------------------------------------------------------------------*/
248 .acf-fields {
249 position: relative;
250 }
251 .acf-fields:after {
252 display: block;
253 clear: both;
254 content: "";
255 }
256 .acf-fields.-border {
257 border: #ccd0d4 solid 1px;
258 background: #fff;
259 }
260 .acf-fields > .acf-field {
261 position: relative;
262 margin: 0;
263 padding: 16px;
264 border-top-width: 1px;
265 border-top-style: solid;
266 border-top-color: #EAECF0;
267 }
268 .acf-fields > .acf-field:first-child {
269 border-top: none;
270 margin-top: 0;
271 }
272 td.acf-fields {
273 padding: 0 !important;
274 }
275
276 /*--------------------------------------------------------------------------------------------
277 *
278 * acf-fields (clear)
279 *
280 *--------------------------------------------------------------------------------------------*/
281 .acf-fields.-clear > .acf-field {
282 border: none;
283 padding: 0;
284 margin: 15px 0;
285 }
286 .acf-fields.-clear > .acf-field[data-width]] {
287 border: none !important;
288 }
289 .acf-fields.-clear > .acf-field > .acf-label {
290 padding: 0;
291 }
292 .acf-fields.-clear > .acf-field > .acf-input {
293 padding: 0;
294 }
295
296 /*--------------------------------------------------------------------------------------------
297 *
298 * acf-fields (left)
299 *
300 *--------------------------------------------------------------------------------------------*/
301 .acf-fields.-left > .acf-field {
302 padding: 15px 0;
303 }
304 .acf-fields.-left > .acf-field:after {
305 display: block;
306 clear: both;
307 content: "";
308 }
309 .acf-fields.-left > .acf-field:before {
310 content: "";
311 display: block;
312 position: absolute;
313 z-index: 0;
314 background: #f9f9f9;
315 border-color: #e1e1e1;
316 border-style: solid;
317 border-width: 0 1px 0 0;
318 top: 0;
319 bottom: 0;
320 left: 0;
321 width: 20%;
322 }
323 .acf-fields.-left > .acf-field[data-width]] {
324 float: none;
325 width: auto !important;
326 border-left-width: 0 !important;
327 border-right-width: 0 !important;
328 }
329 .acf-fields.-left > .acf-field > .acf-label {
330 float: left;
331 width: 20%;
332 margin: 0;
333 padding: 0 12px;
334 }
335 .acf-fields.-left > .acf-field > .acf-input {
336 float: left;
337 width: 80%;
338 margin: 0;
339 padding: 0 12px;
340 }
341 html[dir=rtl]=rtl] .acf-fields.-left > .acf-field:before {
342 border-width: 0 0 0 1px;
343 left: auto;
344 right: 0;
345 }
346 html[dir=rtl]=rtl] .acf-fields.-left > .acf-field > .acf-label {
347 float: right;
348 }
349 html[dir=rtl]=rtl] .acf-fields.-left > .acf-field > .acf-input {
350 float: right;
351 }
352 #side-sortables .acf-fields.-left > .acf-field:before {
353 display: none;
354 }
355 #side-sortables .acf-fields.-left > .acf-field > .acf-label {
356 width: 100%;
357 margin-bottom: 10px;
358 }
359 #side-sortables .acf-fields.-left > .acf-field > .acf-input {
360 width: 100%;
361 }
362 @media screen and (max-width: 640px) {
363 .acf-fields.-left > .acf-field:before {
364 display: none;
365 }
366 .acf-fields.-left > .acf-field > .acf-label {
367 width: 100%;
368 margin-bottom: 10px;
369 }
370 .acf-fields.-left > .acf-field > .acf-input {
371 width: 100%;
372 }
373 }
374
375 /* clear + left */
376 .acf-fields.-clear.-left > .acf-field {
377 padding: 0;
378 border: none;
379 }
380 .acf-fields.-clear.-left > .acf-field:before {
381 display: none;
382 }
383 .acf-fields.-clear.-left > .acf-field > .acf-label {
384 padding: 0;
385 }
386 .acf-fields.-clear.-left > .acf-field > .acf-input {
387 padding: 0;
388 }
389
390 /*--------------------------------------------------------------------------------------------
391 *
392 * acf-table
393 *
394 *--------------------------------------------------------------------------------------------*/
395 .acf-table tr.acf-field > td.acf-label {
396 padding: 15px 12px;
397 margin: 0;
398 background: #f9f9f9;
399 width: 20%;
400 }
401 .acf-table tr.acf-field > td.acf-input {
402 padding: 15px 12px;
403 margin: 0;
404 border-left-color: #e1e1e1;
405 }
406
407 .acf-sortable-tr-helper {
408 position: relative !important;
409 display: table-row !important;
410 }
411
412 /*--------------------------------------------------------------------------------------------
413 *
414 * acf-postbox
415 *
416 *--------------------------------------------------------------------------------------------*/
417 .acf-postbox {
418 position: relative;
419 }
420 .acf-postbox > .inside {
421 margin: 0 !important; /* override WP style - do not delete - you have tried this before */
422 padding: 0 !important; /* override WP style - do not delete - you have tried this before */
423 }
424 .acf-postbox .acf-hndle-cog {
425 color: #72777c;
426 font-size: 16px;
427 line-height: 36px;
428 height: 36px;
429 width: 1.62rem;
430 position: relative;
431 display: none;
432 vertical-align: middle;
433 }
434 .acf-postbox .acf-hndle-cog:hover {
435 color: #191e23;
436 }
437 .acf-postbox > .hndle:hover .acf-hndle-cog,
438 .acf-postbox > .postbox-header:hover .acf-hndle-cog {
439 display: inline-block;
440 }
441
442
443 .acf-postbox>.hndle:hover .handle-actions .handle-order-higher,
444 .acf-postbox>.hndle:hover .handle-actions .handle-order-lower,
445 .acf-postbox>.hndle:hover .handle-actions .toggle-indicator,
446 .acf-postbox>.hndle:hover .handle-actions .acf-hndle-cog,
447 .acf-postbox>.postbox-header:hover .handle-actions .handle-order-higher,
448 .acf-postbox>.postbox-header:hover .handle-actions .handle-order-lower,
449 .acf-postbox>.postbox-header:hover .handle-actions .toggle-indicator,
450 .acf-postbox>.postbox-header:hover .handle-actions .acf-hndle-cog {
451 vertical-align: middle;
452 }
453
454 .acf-postbox > .hndle .acf-hndle-cog {
455 height: 20px;
456 line-height: 20px;
457 float: right;
458 width: auto;
459 }
460 .acf-postbox > .hndle .acf-hndle-cog:hover {
461 color: #777777;
462 }
463 .acf-postbox .acf-replace-with-fields {
464 padding: 15px;
465 text-align: center;
466 }
467
468 #post-body-content #acf_after_title-sortables {
469 margin: 20px 0 -20px;
470 }
471
472 /* seamless */
473 .acf-postbox.seamless {
474 border: 0 none;
475 background: transparent;
476 box-shadow: none;
477 /* hide hndle */
478 /* inside */
479 }
480 .acf-postbox.seamless > .postbox-header,
481 .acf-postbox.seamless > .hndle,
482 .acf-postbox.seamless > .handlediv {
483 display: none !important;
484 }
485 .acf-postbox.seamless > .inside {
486 display: block !important; /* stop metabox from hiding when closed */
487 margin-left: -12px !important;
488 margin-right: -12px !important;
489 }
490 .acf-postbox.seamless > .inside > .acf-field {
491 border-color: transparent;
492 }
493
494 /* seamless (left) */
495 .acf-postbox.seamless > .acf-fields.-left {
496 /* hide sidebar bg */
497 /* mobile */
498 }
499 .acf-postbox.seamless > .acf-fields.-left > .acf-field:before {
500 display: none;
501 }
502 @media screen and (max-width: 782px) {
503 .acf-postbox.seamless > .acf-fields.-left {
504 /* remove padding */
505 }
506 .acf-postbox.seamless > .acf-fields.-left > .acf-field > .acf-label, .acf-postbox.seamless > .acf-fields.-left > .acf-field > .acf-input {
507 padding: 0;
508 }
509 }
510
511 /*-----------------------------------------------------------------------------
512 *
513 * Inputs
514 *
515 *-----------------------------------------------------------------------------*/
516 .acf-field input[type=text]=text],
517 .acf-field input[type=password]=password],
518 .acf-field input[type=date]=date],
519 .acf-field input[type=datetime]=datetime],
520 .acf-field input[type=datetime-local]=datetime-local],
521 .acf-field input[type=email]=email],
522 .acf-field input[type=month]=month],
523 .acf-field input[type=number]=number],
524 .acf-field input[type=search]=search],
525 .acf-field input[type=tel]=tel],
526 .acf-field input[type=time]=time],
527 .acf-field input[type=url]=url],
528 .acf-field input[type=week]=week],
529 .acf-field textarea,
530 .acf-field select {
531 width: 100%;
532 padding: 4px 8px;
533 margin: 0;
534 box-sizing: border-box;
535 font-size: 14px;
536 line-height: 1.4;
537 }
538 .acf-admin-3-8 .acf-field input[type=text]=text],
539 .acf-admin-3-8 .acf-field input[type=password]=password],
540 .acf-admin-3-8 .acf-field input[type=date]=date],
541 .acf-admin-3-8 .acf-field input[type=datetime]=datetime],
542 .acf-admin-3-8 .acf-field input[type=datetime-local]=datetime-local],
543 .acf-admin-3-8 .acf-field input[type=email]=email],
544 .acf-admin-3-8 .acf-field input[type=month]=month],
545 .acf-admin-3-8 .acf-field input[type=number]=number],
546 .acf-admin-3-8 .acf-field input[type=search]=search],
547 .acf-admin-3-8 .acf-field input[type=tel]=tel],
548 .acf-admin-3-8 .acf-field input[type=time]=time],
549 .acf-admin-3-8 .acf-field input[type=url]=url],
550 .acf-admin-3-8 .acf-field input[type=week]=week],
551 .acf-admin-3-8 .acf-field textarea,
552 .acf-admin-3-8 .acf-field select {
553 padding: 3px 5px;
554 }
555 .acf-field textarea {
556 resize: vertical;
557 }
558
559 body.acf-browser-firefox .acf-field select {
560 padding: 4px 5px;
561 }
562
563 /*-----------------------------------------------------------------------------
564 *
565 * Text
566 *
567 *-----------------------------------------------------------------------------*/
568 .acf-input-prepend,
569 .acf-input-append,
570 .acf-input-wrap {
571 box-sizing: border-box;
572 }
573
574 .acf-input-prepend,
575 .acf-input-append {
576 font-size: 13px;
577 line-height: 1.4;
578 padding: 4px 8px;
579 background: #f5f5f5;
580 border: #7e8993 solid 1px;
581 min-height: 30px;
582 }
583 .acf-admin-3-8 .acf-input-prepend,
584 .acf-admin-3-8 .acf-input-append {
585 padding: 3px 5px;
586 border-color: #dddddd;
587 min-height: 28px;
588 }
589
590 .acf-input-prepend {
591 float: left;
592 border-right-width: 0;
593 border-radius: 3px 0 0 3px;
594 }
595
596 .acf-input-append {
597 float: right;
598 border-left-width: 0;
599 border-radius: 0 3px 3px 0;
600 }
601
602 .acf-input-wrap {
603 position: relative;
604 overflow: hidden;
605 }
606 .acf-input-wrap .acf-is-prepended {
607 border-radius: 0 6px 6px 0 !important;
608 }
609 .acf-input-wrap .acf-is-appended {
610 border-radius: 6px 0 0 6px !important;
611 }
612 .acf-input-wrap .acf-is-prepended.acf-is-appended {
613 border-radius: 0 !important;
614 }
615
616 /* rtl */
617 html[dir=rtl]=rtl] .acf-input-prepend {
618 border-left-width: 0;
619 border-right-width: 1px;
620 border-radius: 0 3px 3px 0;
621 float: right;
622 }
623
624 html[dir=rtl]=rtl] .acf-input-append {
625 border-left-width: 1px;
626 border-right-width: 0;
627 border-radius: 3px 0 0 3px;
628 float: left;
629 }
630
631 html[dir=rtl]=rtl] input.acf-is-prepended {
632 border-radius: 3px 0 0 3px !important;
633 }
634
635 html[dir=rtl]=rtl] input.acf-is-appended {
636 border-radius: 0 3px 3px 0 !important;
637 }
638
639 html[dir=rtl]=rtl] input.acf-is-prepended.acf-is-appended {
640 border-radius: 0 !important;
641 }
642
643 /*-----------------------------------------------------------------------------
644 *
645 * Color Picker
646 *
647 *-----------------------------------------------------------------------------*/
648 .acf-color-picker .wp-color-result {
649 border-color: #7e8993;
650 }
651 .acf-admin-3-8 .acf-color-picker .wp-color-result {
652 border-color: #ccd0d4;
653 }
654 .acf-color-picker .wp-picker-active {
655 position: relative;
656 z-index: 1;
657 }
658 .acf-color-picker.acf-color-picker-large-custom-palette .iris-picker {
659 display: flex;
660 flex-direction: column;
661 height: inherit !important;
662 }
663
664 .acf-color-picker.acf-color-picker-large-custom-palette .iris-picker .iris-picker-inner {
665 position: initial;
666 margin: 10px;
667 }
668
669 .acf-color-picker.acf-color-picker-large-custom-palette .iris-picker .iris-palette-container {
670 display: flex;
671 flex-direction: row;
672 flex-wrap: wrap;
673 gap: 4px;
674 position: relative;
675 padding-top: 10px;
676 }
677
678 .acf-color-picker.acf-color-picker-large-custom-palette .iris-picker .iris-palette-container .iris-palette {
679 width: 20px !important;
680 height: 20px !important;
681 margin: 0 !important;
682 }
683
684 .acf-color-picker.acf-hide-color-picker-color-wheel:not(.acf-color-picker-large-custom-palette) .iris-picker {
685 width: inherit !important;
686 margin-right: 25px !important;
687 }
688
689 .acf-color-picker.acf-hide-color-picker-color-wheel .iris-picker {
690 height: inherit !important;
691 padding: 10px 0 !important;
692 }
693
694 .acf-color-picker.acf-hide-color-picker-color-wheel .iris-picker .iris-picker-inner {
695 display: none;
696 }
697
698 .acf-color-picker.acf-hide-color-picker-color-wheel .iris-picker .iris-palette-container {
699 display: flex;
700 position: relative;
701 bottom: inherit;
702 padding-top: 0 !important;
703 }
704
705 /*-----------------------------------------------------------------------------
706 *
707 * Url
708 *
709 *-----------------------------------------------------------------------------*/
710 .acf-url i {
711 position: absolute;
712 top: 5px;
713 left: 5px;
714 opacity: 0.5;
715 color: #7e8993;
716 }
717 .acf-url input[type=url]=url] {
718 padding-left: 27px !important;
719 }
720 .acf-url.-valid i {
721 opacity: 1;
722 }
723
724 /*-----------------------------------------------------------------------------
725 *
726 * Select2 (v3)
727 *
728 *-----------------------------------------------------------------------------*/
729 .select2-container.-acf {
730 z-index: 1001;
731 /* open */
732 /* single open */
733 }
734 .select2-container.-acf .select2-choices {
735 background: #fff;
736 border-color: #ddd;
737 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
738 min-height: 31px;
739 }
740 .select2-container.-acf .select2-choices .select2-search-choice {
741 margin: 5px 0 5px 5px;
742 padding: 3px 5px 3px 18px;
743 border-color: #bbb;
744 background: #f9f9f9;
745 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
746 /* sortable item*/
747 /* sortable shadow */
748 }
749 .select2-container.-acf .select2-choices .select2-search-choice.ui-sortable-helper {
750 background: #5897fb;
751 border-color: #3f87fa;
752 color: #fff !important;
753 box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
754 }
755 .select2-container.-acf .select2-choices .select2-search-choice.ui-sortable-helper a {
756 visibility: hidden;
757 }
758 .select2-container.-acf .select2-choices .select2-search-choice.ui-sortable-placeholder {
759 background-color: #f7f7f7;
760 border-color: #f7f7f7;
761 visibility: visible !important;
762 }
763 .select2-container.-acf .select2-choices .select2-search-choice-focus {
764 border-color: #999;
765 }
766 .select2-container.-acf .select2-choices .select2-search-field input {
767 height: 31px;
768 line-height: 22px;
769 margin: 0;
770 padding: 5px 5px 5px 7px;
771 }
772 .select2-container.-acf .select2-choice {
773 border-color: #bbbbbb;
774 }
775 .select2-container.-acf .select2-choice .select2-arrow {
776 background: transparent;
777 border-left-color: #dfdfdf;
778 padding-left: 1px;
779 }
780 .select2-container.-acf .select2-choice .select2-result-description {
781 display: none;
782 }
783 .select2-container.-acf.select2-container-active .select2-choices, .select2-container.-acf.select2-dropdown-open .select2-choices {
784 border-color: #5b9dd9;
785 border-radius: 3px 3px 0 0;
786 }
787 .select2-container.-acf.select2-dropdown-open .select2-choice {
788 background: #fff;
789 border-color: #5b9dd9;
790 }
791
792 /* rtl */
793 html[dir=rtl]=rtl] .select2-container.-acf .select2-search-choice-close {
794 left: 24px;
795 }
796 html[dir=rtl]=rtl] .select2-container.-acf .select2-choice > .select2-chosen {
797 margin-left: 42px;
798 }
799 html[dir=rtl]=rtl] .select2-container.-acf .select2-choice .select2-arrow {
800 padding-left: 0;
801 padding-right: 1px;
802 }
803
804 /* description */
805 .select2-drop {
806 /* search*/
807 /* result */
808 }
809 .select2-drop .select2-search {
810 padding: 4px 4px 0;
811 }
812 .select2-drop .select2-result {
813 /* hover*/
814 }
815 .select2-drop .select2-result .select2-result-description {
816 color: #999;
817 font-size: 12px;
818 margin-left: 5px;
819 }
820 .select2-drop .select2-result.select2-highlighted .select2-result-description {
821 color: #fff;
822 opacity: 0.75;
823 }
824
825 /*-----------------------------------------------------------------------------
826 *
827 * Select2 (v4)
828 *
829 *-----------------------------------------------------------------------------*/
830 .select2-container.-acf li {
831 margin-bottom: 0;
832 }
833 .select2-container.-acf[data-select2-id^=select2-data]^=select2-data] .select2-selection--multiple {
834 overflow: hidden;
835 }
836 .select2-container.-acf .select2-selection {
837 border-color: #7e8993;
838 }
839 .acf-admin-3-8 .select2-container.-acf .select2-selection {
840 border-color: #aaa;
841 }
842 .select2-container.-acf .select2-selection--multiple .select2-search--inline:first-child {
843 float: none;
844 }
845 .select2-container.-acf .select2-selection--multiple .select2-search--inline:first-child input {
846 width: 100% !important;
847 }
848 .select2-container.-acf .select2-selection--multiple .select2-selection__rendered {
849 padding-right: 0;
850 }
851 .select2-container.-acf .select2-selection--multiple .select2-selection__rendered[id^=select2-acf-field]^=select2-acf-field] {
852 display: inline;
853 padding: 0;
854 margin: 0;
855 }
856 .select2-container.-acf .select2-selection--multiple .select2-selection__rendered[id^=select2-acf-field]^=select2-acf-field] .select2-selection__choice {
857 margin-right: 0;
858 }
859 .select2-container.-acf .select2-selection--multiple .select2-selection__choice {
860 background-color: #f7f7f7;
861 border-color: #cccccc;
862 max-width: 100%;
863 overflow: hidden;
864 word-wrap: normal !important;
865 white-space: normal;
866 }
867 .select2-container.-acf .select2-selection--multiple .select2-selection__choice.ui-sortable-helper {
868 background: #0783BE;
869 border-color: #066998;
870 color: #fff !important;
871 box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
872 }
873 .select2-container.-acf .select2-selection--multiple .select2-selection__choice.ui-sortable-helper span {
874 visibility: hidden;
875 }
876 .select2-container.-acf .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
877 position: static;
878 border-right: none;
879 padding: 0;
880 }
881 .select2-container.-acf .select2-selection--multiple .select2-selection__choice.ui-sortable-placeholder {
882 background-color: #F2F4F7;
883 border-color: #F2F4F7;
884 visibility: visible !important;
885 }
886 .select2-container.-acf .select2-selection--multiple .select2-search__field {
887 box-shadow: none !important;
888 min-height: 0;
889 }
890 .acf-row .select2-container.-acf .select2-selection--single {
891 overflow: hidden;
892 }
893 .acf-row .select2-container.-acf .select2-selection--single .select2-selection__rendered {
894 white-space: normal;
895 }
896
897 .acf-admin-single-field-group .select2-dropdown {
898 border-color: #6BB5D8 !important;
899 margin-top: -5px;
900 overflow: hidden;
901 box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.1);
902 }
903
904 .select2-dropdown.select2-dropdown--above {
905 margin-top: 0;
906 }
907
908 .acf-admin-single-field-group .select2-container--default .select2-results__option[aria-selected=true]=true] {
909 background-color: #F9FAFB !important;
910 color: #667085;
911 }
912 .acf-admin-single-field-group .select2-container--default .select2-results__option[aria-selected=true]=true]:hover {
913 color: #399CCB;
914 }
915
916 .acf-admin-single-field-group .select2-container--default .select2-results__option--highlighted[aria-selected]] {
917 color: #fff !important;
918 background-color: #0783BE !important;
919 }
920
921 .select2-dropdown .select2-results__option {
922 margin-bottom: 0;
923 }
924
925 .select2-container .select2-dropdown {
926 z-index: 900000;
927 }
928 .select2-container .select2-dropdown .select2-search__field {
929 line-height: 1.4;
930 min-height: 0;
931 }
932
933 /*-----------------------------------------------------------------------------
934 *
935 * Link
936 *
937 *-----------------------------------------------------------------------------*/
938 .acf-link .link-wrap {
939 display: none;
940 border: #ccd0d4 solid 1px;
941 border-radius: 3px;
942 padding: 5px;
943 line-height: 26px;
944 background: #fff;
945 word-wrap: break-word;
946 word-break: break-all;
947 }
948 .acf-link .link-wrap .link-title {
949 padding: 0 5px;
950 }
951 .acf-link.-value .button {
952 display: none;
953 }
954 .acf-link.-value .acf-icon.-link-ext {
955 display: none;
956 }
957 .acf-link.-value .link-wrap {
958 display: inline-block;
959 }
960 .acf-link.-external .acf-icon.-link-ext {
961 display: inline-block;
962 }
963
964 #wp-link-backdrop {
965 z-index: 900000 !important;
966 }
967
968 #wp-link-wrap {
969 z-index: 900001 !important;
970 }
971
972 /*-----------------------------------------------------------------------------
973 *
974 * Radio
975 *
976 *-----------------------------------------------------------------------------*/
977 ul.acf-radio-list,
978 ul.acf-checkbox-list {
979 background: transparent;
980 border: 1px solid transparent;
981 position: relative;
982 padding: 1px;
983 margin: 0;
984 /* hl */
985 /* rtl */
986 }
987 ul.acf-radio-list:focus-visible,
988 ul.acf-checkbox-list:focus-visible {
989 border: 1px solid #A5D2E7;
990 border-radius: 6px;
991 }
992 ul.acf-radio-list li,
993 ul.acf-checkbox-list li {
994 font-size: 13px;
995 line-height: 22px;
996 margin: 0;
997 position: relative;
998 word-wrap: break-word;
999 /* attachment sidebar fix*/
1000 }
1001 ul.acf-radio-list li label,
1002 ul.acf-checkbox-list li label {
1003 display: inline;
1004 }
1005 ul.acf-radio-list li input[type=checkbox]=checkbox],
1006 ul.acf-radio-list li input[type=radio]=radio],
1007 ul.acf-checkbox-list li input[type=checkbox]=checkbox],
1008 ul.acf-checkbox-list li input[type=radio]=radio] {
1009 margin: -1px 4px 0 0;
1010 vertical-align: middle;
1011 }
1012 ul.acf-radio-list li input[type=text]=text],
1013 ul.acf-checkbox-list li input[type=text]=text] {
1014 width: auto;
1015 vertical-align: middle;
1016 margin: 2px 0;
1017 }
1018 ul.acf-radio-list li span,
1019 ul.acf-checkbox-list li span {
1020 float: none;
1021 }
1022 ul.acf-radio-list li i,
1023 ul.acf-checkbox-list li i {
1024 vertical-align: middle;
1025 }
1026 ul.acf-radio-list.acf-hl li,
1027 ul.acf-checkbox-list.acf-hl li {
1028 margin-right: 20px;
1029 clear: none;
1030 }
1031 html[dir=rtl]=rtl] ul.acf-radio-list input[type=checkbox]=checkbox],
1032 html[dir=rtl]=rtl] ul.acf-radio-list input[type=radio]=radio],
1033 html[dir=rtl]=rtl] ul.acf-checkbox-list input[type=checkbox]=checkbox],
1034 html[dir=rtl]=rtl] ul.acf-checkbox-list input[type=radio]=radio] {
1035 margin-left: 4px;
1036 margin-right: 0;
1037 }
1038
1039 /*-----------------------------------------------------------------------------
1040 *
1041 * Button Group
1042 *
1043 *-----------------------------------------------------------------------------*/
1044 .acf-button-group {
1045 display: inline-block;
1046 /* default (horizontal) */
1047 /* vertical */
1048 }
1049 .acf-button-group label {
1050 display: inline-block;
1051 border: #7e8993 solid 1px;
1052 position: relative;
1053 z-index: 1;
1054 padding: 5px 10px;
1055 background: #fff;
1056 cursor: pointer;
1057 }
1058 .acf-button-group label:hover {
1059 color: #016087;
1060 background: #f3f5f6;
1061 border-color: #0071a1;
1062 z-index: 2;
1063 }
1064
1065 .acf-button-group label:focus-visible {
1066 color: #016087;
1067 background: #f3f5f6;
1068 border-color: #0071a1;
1069 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba;
1070 z-index: 2;
1071 outline: none;
1072 }
1073 .acf-button-group label.selected {
1074 border-color: #007cba;
1075 background: #008dd4;
1076 color: #fff;
1077 z-index: 2;
1078 }
1079 .acf-button-group input {
1080 display: none !important;
1081 }
1082 .acf-button-group {
1083 padding-left: 1px;
1084 display: inline-flex;
1085 flex-direction: row;
1086 flex-wrap: nowrap;
1087 }
1088 .acf-button-group label {
1089 margin: 0 0 0 -1px;
1090 flex: 1;
1091 text-align: center;
1092 white-space: nowrap;
1093 }
1094 .acf-button-group label:first-child {
1095 border-radius: 3px 0 0 3px;
1096 }
1097 html[dir=rtl]=rtl] .acf-button-group label:first-child {
1098 border-radius: 0 3px 3px 0;
1099 }
1100 .acf-button-group label:last-child {
1101 border-radius: 0 3px 3px 0;
1102 }
1103 html[dir=rtl]=rtl] .acf-button-group label:last-child {
1104 border-radius: 3px 0 0 3px;
1105 }
1106 .acf-button-group label:only-child {
1107 border-radius: 3px;
1108 }
1109 .acf-button-group.-vertical {
1110 padding-left: 0;
1111 padding-top: 1px;
1112 flex-direction: column;
1113 }
1114 .acf-button-group.-vertical label {
1115 margin: -1px 0 0 0;
1116 }
1117 .acf-button-group.-vertical label:first-child {
1118 border-radius: 3px 3px 0 0;
1119 }
1120 .acf-button-group.-vertical label:last-child {
1121 border-radius: 0 0 3px 3px;
1122 }
1123 .acf-button-group.-vertical label:only-child {
1124 border-radius: 3px;
1125 }
1126 .acf-admin-3-8 .acf-button-group label {
1127 border-color: #ccd0d4;
1128 }
1129 .acf-admin-3-8 .acf-button-group label:hover {
1130 border-color: #0071a1;
1131 }
1132 .acf-admin-3-8 .acf-button-group label.selected {
1133 border-color: #007cba;
1134 }
1135
1136 .acf-admin-page .acf-button-group {
1137 display: flex;
1138 align-items: stretch;
1139 align-content: center;
1140 height: 40px;
1141 border-radius: 6px;
1142 box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.1);
1143 }
1144 .acf-admin-page .acf-button-group label {
1145 display: inline-flex;
1146 align-items: center;
1147 align-content: center;
1148 border: #D0D5DD solid 1px;
1149 padding: 6px 16px;
1150 color: #475467;
1151 font-weight: 500;
1152 }
1153 .acf-admin-page .acf-button-group label:hover {
1154 color: #0783BE;
1155 }
1156 .acf-admin-page .acf-button-group label:focus-visible {
1157 color: #0783be;
1158 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0783be;
1159 outline: none;
1160 }
1161 .acf-admin-page .acf-button-group label.selected {
1162 background: #F9FAFB;
1163 color: #0783BE;
1164 }
1165 .acf-admin-page .select2-container.-acf .select2-selection--multiple .select2-selection__choice {
1166 display: inline-flex;
1167 align-items: center;
1168 margin-top: 8px;
1169 margin-left: 2px;
1170 position: relative;
1171 padding-top: 4px;
1172 padding-right: auto;
1173 padding-bottom: 4px;
1174 padding-left: 8px;
1175 background-color: #EBF5FA;
1176 border-color: #A5D2E7;
1177 color: #0783BE;
1178 }
1179 .acf-admin-page .select2-container.-acf .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
1180 order: 2;
1181 width: 14px;
1182 height: 14px;
1183 margin-right: 0;
1184 margin-left: 4px;
1185 color: #6BB5D8;
1186 text-indent: 100%;
1187 white-space: nowrap;
1188 overflow: hidden;
1189 }
1190 .acf-admin-page .select2-container.-acf .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
1191 color: #0783BE;
1192 }
1193 .acf-admin-page .select2-container.-acf .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:before {
1194 content: "";
1195 display: block;
1196 width: 14px;
1197 height: 14px;
1198 top: 0;
1199 left: 0;
1200 background-color: currentColor;
1201 border: none;
1202 border-radius: 0;
1203 -webkit-mask-size: contain;
1204 mask-size: contain;
1205 -webkit-mask-repeat: no-repeat;
1206 mask-repeat: no-repeat;
1207 -webkit-mask-position: center;
1208 mask-position: center;
1209 -webkit-mask-image: url("../../images/icons/icon-close.svg");
1210 mask-image: url("../../images/icons/icon-close.svg");
1211 }
1212
1213 /*-----------------------------------------------------------------------------
1214 *
1215 * Checkbox
1216 *
1217 *-----------------------------------------------------------------------------*/
1218 .acf-checkbox-list .button {
1219 margin: 10px 0 0;
1220 }
1221
1222 /*-----------------------------------------------------------------------------
1223 *
1224 * True / False
1225 *
1226 *-----------------------------------------------------------------------------*/
1227 .acf-switch {
1228 display: grid;
1229 grid-template-columns: 1fr 1fr;
1230 width: fit-content;
1231 max-width: 100%;
1232 border-radius: 5px;
1233 cursor: pointer;
1234 position: relative;
1235 background: #f5f5f5;
1236 height: 30px;
1237 vertical-align: middle;
1238 border: #7e8993 solid 1px;
1239 -webkit-transition: background 0.25s ease;
1240 -moz-transition: background 0.25s ease;
1241 -o-transition: background 0.25s ease;
1242 transition: background 0.25s ease;
1243 /* hover */
1244 /* active */
1245 /* message */
1246 }
1247 .acf-switch span {
1248 display: inline-block;
1249 float: left;
1250 text-align: center;
1251 font-size: 13px;
1252 line-height: 22px;
1253 padding: 4px 10px;
1254 min-width: 15px;
1255 }
1256 .acf-switch span i {
1257 vertical-align: middle;
1258 }
1259 .acf-switch .acf-switch-on {
1260 color: #fff;
1261 text-shadow: #007cba 0 1px 0;
1262 overflow: hidden;
1263 }
1264 .acf-switch .acf-switch-off {
1265 overflow: hidden;
1266 }
1267 .acf-switch .acf-switch-slider {
1268 position: absolute;
1269 top: 2px;
1270 left: 2px;
1271 bottom: 2px;
1272 right: 50%;
1273 z-index: 1;
1274 background: #fff;
1275 border-radius: 3px;
1276 border: #7e8993 solid 1px;
1277 -webkit-transition: all 0.25s ease;
1278 -moz-transition: all 0.25s ease;
1279 -o-transition: all 0.25s ease;
1280 transition: all 0.25s ease;
1281 transition-property: left, right;
1282 }
1283 .acf-switch:hover, .acf-switch.-focus {
1284 border-color: #0071a1;
1285 background: #f3f5f6;
1286 color: #016087;
1287 }
1288 .acf-switch:hover .acf-switch-slider, .acf-switch.-focus .acf-switch-slider {
1289 border-color: #0071a1;
1290 }
1291 .acf-switch.-on {
1292 background: #0d99d5;
1293 border-color: #007cba;
1294 /* hover */
1295 }
1296 .acf-switch.-on .acf-switch-slider {
1297 left: 50%;
1298 right: 2px;
1299 border-color: #007cba;
1300 }
1301 .acf-switch.-on:hover {
1302 border-color: #007cba;
1303 }
1304 .acf-switch + span {
1305 margin-left: 6px;
1306 }
1307 .acf-admin-3-8 .acf-switch {
1308 border-color: #ccd0d4;
1309 }
1310 .acf-admin-3-8 .acf-switch .acf-switch-slider {
1311 border-color: #ccd0d4;
1312 }
1313 .acf-admin-3-8 .acf-switch:hover, .acf-admin-3-8 .acf-switch.-focus {
1314 border-color: #0071a1;
1315 }
1316 .acf-admin-3-8 .acf-switch:hover .acf-switch-slider, .acf-admin-3-8 .acf-switch.-focus .acf-switch-slider {
1317 border-color: #0071a1;
1318 }
1319 .acf-admin-3-8 .acf-switch.-on {
1320 border-color: #007cba;
1321 }
1322 .acf-admin-3-8 .acf-switch.-on .acf-switch-slider {
1323 border-color: #007cba;
1324 }
1325 .acf-admin-3-8 .acf-switch.-on:hover {
1326 border-color: #007cba;
1327 }
1328
1329 /* checkbox */
1330 .acf-switch-input {
1331 opacity: 0;
1332 position: absolute;
1333 margin: 0;
1334 }
1335
1336 .acf-admin-single-field-group .acf-true-false {
1337 border: 1px solid transparent;
1338 }
1339 .acf-admin-single-field-group .acf-true-false:focus-within {
1340 border: 1px solid #399CCB;
1341 border-radius: 120px;
1342 }
1343
1344 .acf-true-false:has(.acf-switch) label {
1345 display: flex;
1346 align-items: center;
1347 justify-items: center;
1348 }
1349
1350 /* in media modal */
1351 .compat-item .acf-true-false .message {
1352 float: none;
1353 padding: 0;
1354 vertical-align: middle;
1355 }
1356
1357 /*--------------------------------------------------------------------------
1358 *
1359 * Google Map
1360 *
1361 *-------------------------------------------------------------------------*/
1362 .acf-google-map {
1363 position: relative;
1364 border: #ccd0d4 solid 1px;
1365 background: #fff;
1366 }
1367 .acf-google-map .title {
1368 position: relative;
1369 border-bottom: #ccd0d4 solid 1px;
1370 }
1371 .acf-google-map .title .search {
1372 margin: 0;
1373 font-size: 14px;
1374 line-height: 30px;
1375 height: 40px;
1376 padding: 5px 10px;
1377 border: 0 none;
1378 box-shadow: none;
1379 border-radius: 0;
1380 font-family: inherit;
1381 cursor: text;
1382 }
1383 .acf-google-map .title .acf-loading {
1384 position: absolute;
1385 top: 10px;
1386 right: 11px;
1387 display: none;
1388 }
1389 .acf-google-map .title .acf-icon:active {
1390 display: inline-block !important;
1391 }
1392 .acf-google-map .canvas {
1393 height: 400px;
1394 }
1395 .acf-google-map:hover .title .acf-actions {
1396 display: block;
1397 }
1398 .acf-google-map .title .acf-icon.-location {
1399 display: inline-block;
1400 }
1401 .acf-google-map .title .acf-icon.-cancel,
1402 .acf-google-map .title .acf-icon.-search {
1403 display: none;
1404 }
1405 .acf-google-map.-value .title .search {
1406 font-weight: bold;
1407 }
1408 .acf-google-map.-value .title .acf-icon.-location {
1409 display: none;
1410 }
1411 .acf-google-map.-value .title .acf-icon.-cancel {
1412 display: inline-block;
1413 }
1414 .acf-google-map.-searching .title .acf-icon.-location {
1415 display: none;
1416 }
1417 .acf-google-map.-searching .title .acf-icon.-cancel,
1418 .acf-google-map.-searching .title .acf-icon.-search {
1419 display: inline-block;
1420 }
1421 .acf-google-map.-searching .title .acf-actions {
1422 display: block;
1423 }
1424 .acf-google-map.-searching .title .search {
1425 font-weight: normal !important;
1426 }
1427 .acf-google-map.-loading .title a {
1428 display: none !important;
1429 }
1430 .acf-google-map.-loading .title i {
1431 display: inline-block;
1432 }
1433
1434 /* autocomplete */
1435 .pac-container {
1436 border-width: 1px 0;
1437 box-shadow: none;
1438 }
1439
1440 .pac-container:after {
1441 display: none;
1442 }
1443
1444 .pac-container .pac-item:first-child {
1445 border-top: 0 none;
1446 }
1447
1448 .pac-container .pac-item {
1449 padding: 5px 10px;
1450 cursor: pointer;
1451 }
1452
1453 html[dir=rtl]=rtl] .pac-container .pac-item {
1454 text-align: right;
1455 }
1456
1457 /*--------------------------------------------------------------------------
1458 *
1459 * Relationship
1460 *
1461 *-------------------------------------------------------------------------*/
1462 .acf-relationship {
1463 background: #fff;
1464 border: #ccd0d4 solid 1px;
1465 /* list */
1466 /* selection (bottom) */
1467 }
1468 .acf-relationship .filters {
1469 border-bottom: #ccd0d4 solid 1px;
1470 background: #fff;
1471 /* widths */
1472 }
1473 .acf-relationship .filters:after {
1474 display: block;
1475 clear: both;
1476 content: "";
1477 }
1478 .acf-relationship .filters .filter {
1479 margin: 0;
1480 padding: 0;
1481 float: left;
1482 width: 100%;
1483 box-sizing: border-box;
1484 padding: 7px 7px 7px 0;
1485 }
1486 .acf-relationship .filters .filter:first-child {
1487 padding-left: 7px;
1488 }
1489 .acf-relationship .filters .filter input,
1490 .acf-relationship .filters .filter select {
1491 margin: 0;
1492 float: none; /* potential fix for media popup? */
1493 }
1494 .acf-relationship .filters .filter input:focus, .acf-relationship .filters .filter input:active,
1495 .acf-relationship .filters .filter select:focus,
1496 .acf-relationship .filters .filter select:active {
1497 outline: none;
1498 box-shadow: none;
1499 }
1500 .acf-relationship .filters .filter input {
1501 border-color: transparent;
1502 box-shadow: none;
1503 padding-left: 3px;
1504 padding-right: 3px;
1505 }
1506 .acf-relationship .filters.-f2 .filter {
1507 width: 50%;
1508 }
1509 .acf-relationship .filters.-f3 .filter {
1510 width: 25%;
1511 }
1512 .acf-relationship .filters.-f3 .filter.-search {
1513 width: 50%;
1514 }
1515 .acf-relationship .list {
1516 margin: 0;
1517 padding: 5px;
1518 height: 160px;
1519 overflow: auto;
1520 }
1521 .acf-relationship .list .acf-rel-label,
1522 .acf-relationship .list .acf-rel-item,
1523 .acf-relationship .list p {
1524 padding: 5px;
1525 margin: 0;
1526 display: block;
1527 position: relative;
1528 min-height: 18px;
1529 }
1530 .acf-relationship .list .acf-rel-label {
1531 font-weight: bold;
1532 }
1533 .acf-relationship .list .acf-rel-item {
1534 cursor: pointer;
1535 /* hover */
1536 /* disabled */
1537 }
1538 .acf-relationship .list .acf-rel-item b {
1539 text-decoration: underline;
1540 font-weight: normal;
1541 }
1542 .acf-relationship .list .acf-rel-item .thumbnail {
1543 background: #e0e0e0;
1544 width: 22px;
1545 height: 22px;
1546 float: left;
1547 margin: -2px 5px 0 0;
1548 }
1549 .acf-relationship .list .acf-rel-item .thumbnail img {
1550 max-width: 22px;
1551 max-height: 22px;
1552 margin: 0 auto;
1553 display: block;
1554 }
1555 .acf-relationship .list .acf-rel-item .thumbnail.-icon {
1556 background: #fff;
1557 }
1558 .acf-relationship .list .acf-rel-item .thumbnail.-icon img {
1559 max-height: 20px;
1560 margin-top: 1px;
1561 }
1562 .acf-relationship .list .acf-rel-item:hover, .acf-relationship .list .acf-rel-item.relationship-hover {
1563 background: #3875d7;
1564 color: #fff;
1565 }
1566 .acf-relationship .list .acf-rel-item:hover .thumbnail, .acf-relationship .list .acf-rel-item.relationship-hover .thumbnail {
1567 background: #a2bfec;
1568 }
1569 .acf-relationship .list .acf-rel-item:hover .thumbnail.-icon, .acf-relationship .list .acf-rel-item.relationship-hover .thumbnail.-icon {
1570 background: #fff;
1571 }
1572 .acf-relationship .list .acf-rel-item.disabled {
1573 opacity: 0.5;
1574 }
1575 .acf-relationship .list .acf-rel-item.disabled:hover {
1576 background: transparent;
1577 color: #333;
1578 cursor: default;
1579 }
1580 .acf-relationship .list .acf-rel-item.disabled:hover .thumbnail {
1581 background: #e0e0e0;
1582 }
1583 .acf-relationship .list .acf-rel-item.disabled:hover .thumbnail.-icon {
1584 background: #fff;
1585 }
1586 .acf-relationship .list ul {
1587 padding-bottom: 5px;
1588 }
1589 .acf-relationship .list ul .acf-rel-label,
1590 .acf-relationship .list ul .acf-rel-item,
1591 .acf-relationship .list ul p {
1592 padding-left: 20px;
1593 }
1594 .acf-relationship .selection {
1595 position: relative;
1596 /* choices */
1597 /* values */
1598 }
1599 .acf-relationship .selection:after {
1600 display: block;
1601 clear: both;
1602 content: "";
1603 }
1604 .acf-relationship .selection .values,
1605 .acf-relationship .selection .choices {
1606 width: 50%;
1607 background: #fff;
1608 float: left;
1609 }
1610 .acf-relationship .selection .choices {
1611 background: #f9f9f9;
1612 }
1613 .acf-relationship .selection .choices .list {
1614 border-right: #dfdfdf solid 1px;
1615 }
1616 .acf-relationship .selection .values .acf-icon {
1617 position: absolute;
1618 top: 4px;
1619 right: 7px;
1620 display: none;
1621 /* rtl */
1622 }
1623 html[dir=rtl]=rtl] .acf-relationship .selection .values .acf-icon {
1624 right: auto;
1625 left: 7px;
1626 }
1627 .acf-relationship .selection .values .acf-rel-item:hover .acf-icon, .acf-relationship .selection .values .acf-rel-item.relationship-hover .acf-icon {
1628 display: block;
1629 }
1630 .acf-relationship .selection .values .acf-rel-item {
1631 cursor: move;
1632 }
1633 .acf-relationship .selection .values .acf-rel-item b {
1634 text-decoration: none;
1635 }
1636
1637 /* menu item fix */
1638 .menu-item .acf-relationship ul {
1639 width: auto;
1640 }
1641 .menu-item .acf-relationship li {
1642 display: block;
1643 }
1644
1645 /*--------------------------------------------------------------------------
1646 *
1647 * WYSIWYG
1648 *
1649 *-------------------------------------------------------------------------*/
1650 .acf-editor-wrap.delay .acf-editor-toolbar {
1651 content: "";
1652 display: block;
1653 background: #f5f5f5;
1654 border-bottom: #dddddd solid 1px;
1655 color: #555d66;
1656 padding: 10px;
1657 }
1658 .acf-editor-wrap.delay .wp-editor-area {
1659 padding: 10px;
1660 border: none;
1661 color: inherit !important;
1662 }
1663 .acf-editor-wrap iframe {
1664 min-height: 200px;
1665 }
1666 .acf-editor-wrap .wp-editor-container {
1667 border: 1px solid #ccd0d4;
1668 box-shadow: none !important;
1669 }
1670 .acf-editor-wrap .wp-editor-tabs {
1671 box-sizing: content-box;
1672 }
1673 .acf-editor-wrap .wp-switch-editor {
1674 border-color: #ccd0d4;
1675 border-bottom-color: transparent;
1676 }
1677
1678 #mce_fullscreen_container {
1679 z-index: 900000 !important;
1680 }
1681
1682 /*-----------------------------------------------------------------------------
1683 *
1684 * Tab
1685 *
1686 *-----------------------------------------------------------------------------*/
1687 .acf-field-tab {
1688 display: none !important;
1689 }
1690
1691 .hidden-by-tab {
1692 display: none !important;
1693 }
1694
1695 .acf-tab-wrap {
1696 clear: both;
1697 z-index: 1;
1698 overflow: auto;
1699 scrollbar-width: none;
1700 -ms-overflow-style: none;
1701 }
1702 .acf-tab-wrap::-webkit-scrollbar {
1703 display: none;
1704 }
1705
1706 .acf-tab-group {
1707 border-bottom: #ccc solid 1px;
1708 padding: 10px 10px 0;
1709 }
1710 .acf-tab-group li {
1711 margin: 0 0.5em 0 0;
1712 }
1713 .acf-tab-group li a {
1714 padding: 5px 10px;
1715 display: block;
1716 color: #555;
1717 font-size: 14px;
1718 font-weight: 600;
1719 line-height: 24px;
1720 border: #ccc solid 1px;
1721 border-bottom: 0 none;
1722 text-decoration: none;
1723 background: #e5e5e5;
1724 transition: none;
1725 }
1726 .acf-tab-group li a:hover {
1727 background: #fff;
1728 }
1729 .acf-tab-group li a:focus {
1730 outline: none;
1731 box-shadow: none;
1732 }
1733 .acf-tab-group li a:empty {
1734 display: none;
1735 }
1736 html[dir=rtl]=rtl] .acf-tab-group li {
1737 margin: 0 0 0 0.5em;
1738 }
1739 .acf-tab-group li.active a {
1740 background: #f1f1f1;
1741 color: #000;
1742 padding-bottom: 6px;
1743 margin-bottom: -1px;
1744 position: relative;
1745 z-index: 1;
1746 }
1747
1748 .acf-fields > .acf-tab-wrap {
1749 background: #f9f9f9;
1750 }
1751 .acf-fields > .acf-tab-wrap .acf-tab-group {
1752 position: relative;
1753 border-top: #ccd0d4 solid 1px;
1754 border-bottom: #ccd0d4 solid 1px;
1755 z-index: 2;
1756 margin-bottom: -1px;
1757 }
1758 .acf-admin-3-8 .acf-fields > .acf-tab-wrap .acf-tab-group {
1759 border-color: #dfdfdf;
1760 }
1761
1762 .acf-fields.-left > .acf-tab-wrap .acf-tab-group {
1763 padding-left: 20%;
1764 /* mobile */
1765 /* rtl */
1766 }
1767 @media screen and (max-width: 640px) {
1768 .acf-fields.-left > .acf-tab-wrap .acf-tab-group {
1769 padding-left: 10px;
1770 }
1771 }
1772 html[dir=rtl]=rtl] .acf-fields.-left > .acf-tab-wrap .acf-tab-group {
1773 padding-left: 0;
1774 padding-right: 20%;
1775 /* mobile */
1776 }
1777 @media screen and (max-width: 850px) {
1778 html[dir=rtl]=rtl] .acf-fields.-left > .acf-tab-wrap .acf-tab-group {
1779 padding-right: 10px;
1780 }
1781 }
1782
1783 .acf-tab-wrap.-left .acf-tab-group {
1784 position: absolute;
1785 left: 0;
1786 width: 20%;
1787 border: 0 none;
1788 padding: 0 !important; /* important overrides 'left aligned labels' */
1789 margin: 1px 0 0;
1790 }
1791 .acf-tab-wrap.-left .acf-tab-group li {
1792 float: none;
1793 margin: -1px 0 0;
1794 }
1795 .acf-tab-wrap.-left .acf-tab-group li a {
1796 border: 1px solid #ededed;
1797 font-size: 13px;
1798 line-height: 18px;
1799 color: #0073aa;
1800 padding: 10px;
1801 margin: 0;
1802 font-weight: normal;
1803 border-width: 1px 0;
1804 border-radius: 0;
1805 background: transparent;
1806 }
1807 .acf-tab-wrap.-left .acf-tab-group li a:hover {
1808 color: #00a0d2;
1809 }
1810 .acf-tab-wrap.-left .acf-tab-group li.active a {
1811 border-color: #dfdfdf;
1812 color: #000;
1813 margin-right: -1px;
1814 background: #fff;
1815 }
1816 html[dir=rtl]=rtl] .acf-tab-wrap.-left .acf-tab-group {
1817 left: auto;
1818 right: 0;
1819 }
1820 html[dir=rtl]=rtl] .acf-tab-wrap.-left .acf-tab-group li.active a {
1821 margin-right: 0;
1822 margin-left: -1px;
1823 }
1824 .acf-field + .acf-tab-wrap.-left:before {
1825 content: "";
1826 display: block;
1827 position: relative;
1828 z-index: 1;
1829 height: 10px;
1830 border-top: #dfdfdf solid 1px;
1831 border-bottom: #dfdfdf solid 1px;
1832 margin-bottom: -1px;
1833 }
1834 .acf-tab-wrap.-left:first-child .acf-tab-group li:first-child a {
1835 border-top: none;
1836 }
1837
1838 /* sidebar */
1839 .acf-fields.-sidebar {
1840 padding: 0 0 0 20% !important;
1841 position: relative;
1842 /* before */
1843 /* rtl */
1844 }
1845 .acf-fields.-sidebar:before {
1846 content: "";
1847 display: block;
1848 position: absolute;
1849 top: 0;
1850 left: 0;
1851 width: 20%;
1852 bottom: 0;
1853 border-right: #dfdfdf solid 1px;
1854 background: #f9f9f9;
1855 z-index: 1;
1856 }
1857 html[dir=rtl]=rtl] .acf-fields.-sidebar {
1858 padding: 0 20% 0 0 !important;
1859 }
1860 html[dir=rtl]=rtl] .acf-fields.-sidebar:before {
1861 border-left: #dfdfdf solid 1px;
1862 border-right-width: 0;
1863 left: auto;
1864 right: 0;
1865 }
1866 .acf-fields.-sidebar.-left {
1867 padding: 0 0 0 180px !important;
1868 /* rtl */
1869 }
1870 html[dir=rtl]=rtl] .acf-fields.-sidebar.-left {
1871 padding: 0 180px 0 0 !important;
1872 }
1873 .acf-fields.-sidebar.-left:before {
1874 background: #f1f1f1;
1875 border-color: #dfdfdf;
1876 width: 180px;
1877 }
1878 .acf-fields.-sidebar.-left > .acf-tab-wrap.-left .acf-tab-group {
1879 width: 180px;
1880 }
1881 .acf-fields.-sidebar.-left > .acf-tab-wrap.-left .acf-tab-group li a {
1882 border-color: #e4e4e4;
1883 }
1884 .acf-fields.-sidebar.-left > .acf-tab-wrap.-left .acf-tab-group li.active a {
1885 background: #f9f9f9;
1886 }
1887 .acf-fields.-sidebar > .acf-field-tab + .acf-field {
1888 border-top: none;
1889 }
1890
1891 .acf-fields.-clear > .acf-tab-wrap {
1892 background: transparent;
1893 }
1894 .acf-fields.-clear > .acf-tab-wrap .acf-tab-group {
1895 margin-top: 0;
1896 border-top: none;
1897 padding-left: 0;
1898 padding-right: 0;
1899 }
1900 .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li a {
1901 background: #e5e5e5;
1902 }
1903 .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li a:hover {
1904 background: #fff;
1905 }
1906 .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li.active a {
1907 background: #f1f1f1;
1908 }
1909
1910 /* seamless */
1911 .acf-postbox.seamless > .acf-fields.-sidebar {
1912 margin-left: 0 !important;
1913 }
1914 .acf-postbox.seamless > .acf-fields.-sidebar:before {
1915 background: transparent;
1916 }
1917 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap {
1918 background: transparent;
1919 margin-bottom: 10px;
1920 padding-left: 12px;
1921 padding-right: 12px;
1922 }
1923 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap .acf-tab-group {
1924 border-top: 0 none;
1925 border-color: #ccd0d4;
1926 }
1927 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap .acf-tab-group li a {
1928 background: #e5e5e5;
1929 border-color: #ccd0d4;
1930 }
1931 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap .acf-tab-group li a:hover {
1932 background: #fff;
1933 }
1934 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap .acf-tab-group li.active a {
1935 background: #f1f1f1;
1936 }
1937 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap.-left:before {
1938 border-top: none;
1939 height: auto;
1940 }
1941 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap.-left .acf-tab-group {
1942 margin-bottom: 0;
1943 }
1944 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap.-left .acf-tab-group li a {
1945 border-width: 1px 0 1px 1px !important;
1946 border-color: #cccccc;
1947 background: #e5e5e5;
1948 }
1949 .acf-postbox.seamless > .acf-fields > .acf-tab-wrap.-left .acf-tab-group li.active a {
1950 background: #f1f1f1;
1951 }
1952
1953 .menu-edit .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li a,
1954 .widget .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li a {
1955 background: #f1f1f1;
1956 }
1957 .menu-edit .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li a:hover, .menu-edit .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li.active a,
1958 .widget .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li a:hover,
1959 .widget .acf-fields.-clear > .acf-tab-wrap .acf-tab-group li.active a {
1960 background: #fff;
1961 }
1962
1963 .compat-item .acf-tab-wrap td {
1964 display: block;
1965 }
1966
1967 /* within gallery sidebar */
1968 .acf-gallery-side .acf-tab-wrap {
1969 border-top: 0 none !important;
1970 }
1971
1972 .acf-gallery-side .acf-tab-wrap .acf-tab-group {
1973 margin: 10px 0 !important;
1974 padding: 0 !important;
1975 }
1976
1977 .acf-gallery-side .acf-tab-group li.active a {
1978 background: #f9f9f9 !important;
1979 }
1980
1981 /* withing widget */
1982 .widget .acf-tab-group {
1983 border-bottom-color: #e8e8e8;
1984 }
1985
1986 .widget .acf-tab-group li a {
1987 background: #f1f1f1;
1988 }
1989
1990 .widget .acf-tab-group li.active a {
1991 background: #fff;
1992 }
1993
1994 /* media popup (edit image) */
1995 .media-modal.acf-expanded .compat-attachment-fields > tbody > tr.acf-tab-wrap .acf-tab-group {
1996 padding-left: 23%;
1997 border-bottom-color: #dddddd;
1998 }
1999
2000 /* table */
2001 .form-table > tbody > tr.acf-tab-wrap .acf-tab-group {
2002 padding: 0 5px 0 210px;
2003 }
2004
2005 /* rtl */
2006 html[dir=rtl]=rtl] .form-table > tbody > tr.acf-tab-wrap .acf-tab-group {
2007 padding: 0 210px 0 5px;
2008 }
2009
2010 /*--------------------------------------------------------------------------------------------
2011 *
2012 * oembed
2013 *
2014 *--------------------------------------------------------------------------------------------*/
2015 .acf-oembed {
2016 position: relative;
2017 border: #ccd0d4 solid 1px;
2018 background: #fff;
2019 }
2020 .acf-oembed .title {
2021 position: relative;
2022 border-bottom: #ccd0d4 solid 1px;
2023 padding: 5px 10px;
2024 }
2025 .acf-oembed .title .input-search {
2026 margin: 0;
2027 font-size: 14px;
2028 line-height: 30px;
2029 height: 30px;
2030 padding: 0;
2031 border: 0 none;
2032 box-shadow: none;
2033 border-radius: 0;
2034 font-family: inherit;
2035 cursor: text;
2036 }
2037 .acf-oembed .title .acf-actions {
2038 padding: 6px;
2039 }
2040 .acf-oembed .canvas {
2041 position: relative;
2042 min-height: 250px;
2043 background: #f9f9f9;
2044 }
2045 .acf-oembed .canvas .canvas-media {
2046 position: relative;
2047 z-index: 1;
2048 }
2049 .acf-oembed .canvas iframe {
2050 display: block;
2051 margin: 0;
2052 padding: 0;
2053 width: 100%;
2054 }
2055 .acf-oembed .canvas .acf-icon.-picture {
2056 position: absolute;
2057 top: 50%;
2058 left: 50%;
2059 transform: translate(-50%, -50%);
2060 z-index: 0;
2061 height: 42px;
2062 width: 42px;
2063 font-size: 42px;
2064 color: #999;
2065 }
2066 .acf-oembed .canvas .acf-loading-overlay {
2067 background: rgba(255, 255, 255, 0.9);
2068 }
2069 .acf-oembed .canvas .canvas-error {
2070 position: absolute;
2071 top: 50%;
2072 left: 0%;
2073 right: 0%;
2074 margin: -9px 0 0 0;
2075 text-align: center;
2076 display: none;
2077 }
2078 .acf-oembed .canvas .canvas-error p {
2079 padding: 8px;
2080 margin: 0;
2081 display: inline;
2082 }
2083 .acf-oembed.has-value .canvas {
2084 min-height: 50px;
2085 }
2086 .acf-oembed.has-value .input-search {
2087 font-weight: bold;
2088 }
2089 .acf-oembed.has-value .title:hover .acf-actions {
2090 display: block;
2091 }
2092
2093 /*--------------------------------------------------------------------------------------------
2094 *
2095 * Image
2096 *
2097 *--------------------------------------------------------------------------------------------*/
2098 .acf-image-uploader {
2099 position: relative;
2100 /* image wrap*/
2101 /* input */
2102 /* rtl */
2103 }
2104 .acf-image-uploader:after {
2105 display: block;
2106 clear: both;
2107 content: "";
2108 }
2109 .acf-image-uploader p {
2110 margin: 0;
2111 }
2112 .acf-image-uploader .image-wrap {
2113 position: relative;
2114 float: left;
2115 /* hover */
2116 }
2117
2118 .acf-image-uploader .image-wrap.show-if-value .acf-actions {
2119 display: block;
2120 opacity: 0;
2121 text-align: right;
2122 z-index: 1;
2123 }
2124
2125 .acf-image-uploader .image-wrap.show-if-value .acf-actions.-hover a:focus {
2126 outline: 2px solid #0073aa;
2127 outline-offset: 2px;
2128 border-radius: 2px;
2129 }
2130
2131 .acf-image-uploader .image-wrap.show-if-value:hover .acf-actions,
2132 .acf-image-uploader .image-wrap.show-if-value:focus-within .acf-actions {
2133 opacity: 1;
2134 }
2135
2136 .acf-image-uploader .image-wrap:focus {
2137 outline: 2px solid #0073aa;
2138 outline-offset: 2px;
2139 }
2140 .acf-image-uploader .image-wrap img {
2141 max-width: 100%;
2142 max-height: 100%;
2143 width: auto;
2144 height: auto;
2145 display: block;
2146 min-width: 30px;
2147 min-height: 30px;
2148 background: #f1f1f1;
2149 margin: 0;
2150 padding: 0;
2151 /* svg */
2152 }
2153 .acf-image-uploader .image-wrap img[src$=".svg"]$=".svg""] {
2154 min-height: 100px;
2155 min-width: 100px;
2156 }
2157 .acf-image-uploader input.button {
2158 width: auto;
2159 }
2160 html[dir=rtl]=rtl] .acf-image-uploader .image-wrap {
2161 float: right;
2162 }
2163
2164 /*--------------------------------------------------------------------------------------------
2165 *
2166 * File
2167 *
2168 *--------------------------------------------------------------------------------------------*/
2169 .acf-file-uploader {
2170 position: relative;
2171 /* hover */
2172 /* rtl */
2173 }
2174 .acf-file-uploader p {
2175 margin: 0;
2176 }
2177 .acf-file-uploader .file-wrap {
2178 border: #ccd0d4 solid 1px;
2179 min-height: 84px;
2180 position: relative;
2181 background: #fff;
2182 }
2183 .acf-file-uploader .file-wrap:focus {
2184 outline: 2px solid #0073aa;
2185 outline-offset: 2px;
2186 }
2187 .acf-file-uploader .file-icon {
2188 position: absolute;
2189 top: 0;
2190 left: 0;
2191 bottom: 0;
2192 padding: 10px;
2193 background: #f1f1f1;
2194 border-right: #d5d9dd solid 1px;
2195 }
2196 .acf-file-uploader .file-icon img {
2197 display: block;
2198 padding: 0;
2199 margin: 0;
2200 max-width: 48px;
2201 }
2202 .acf-file-uploader .file-info {
2203 padding: 10px;
2204 margin-left: 69px;
2205 }
2206 .acf-file-uploader .file-info p {
2207 margin: 0 0 2px;
2208 font-size: 13px;
2209 line-height: 1.4em;
2210 word-break: break-all;
2211 }
2212 .acf-file-uploader .file-info a {
2213 text-decoration: none;
2214 }
2215
2216 .acf-file-uploader.has-value .acf-actions {
2217 display: block;
2218 opacity: 0;
2219 text-align: right;
2220 z-index: 1;
2221 }
2222
2223 .acf-file-uploader.has-value .acf-actions.-hover a:focus {
2224 outline: 2px solid #0073aa;
2225 outline-offset: 2px;
2226 border-radius: 2px;
2227 }
2228
2229 .acf-file-uploader.has-value:hover .acf-actions,
2230 .acf-file-uploader.has-value:focus-within .acf-actions {
2231 opacity: 1;
2232 }
2233 .acf-file-uploader:hover .acf-actions {
2234 display: block;
2235 }
2236 html[dir=rtl]=rtl] .acf-file-uploader .file-icon {
2237 left: auto;
2238 right: 0;
2239 border-left: #e5e5e5 solid 1px;
2240 border-right: none;
2241 }
2242 html[dir=rtl]=rtl] .acf-file-uploader .file-info {
2243 margin-right: 69px;
2244 margin-left: 0;
2245 }
2246
2247 /*-----------------------------------------------------------------------------
2248 *
2249 * Date Picker
2250 *
2251 *-----------------------------------------------------------------------------*/
2252 .acf-ui-datepicker .ui-datepicker {
2253 z-index: 900000 !important;
2254 }
2255 .acf-ui-datepicker .ui-datepicker .ui-widget-header a {
2256 cursor: pointer;
2257 transition: none;
2258 }
2259
2260 /* fix highlight state overriding hover / active */
2261 .acf-ui-datepicker .ui-state-highlight.ui-state-hover {
2262 border: 1px solid #98b7e8 !important;
2263 background: #98b7e8 !important;
2264 font-weight: normal !important;
2265 color: #ffffff !important;
2266 }
2267
2268 .acf-ui-datepicker .ui-state-highlight.ui-state-active {
2269 border: 1px solid #3875d7 !important;
2270 background: #3875d7 !important;
2271 font-weight: normal !important;
2272 color: #ffffff !important;
2273 }
2274
2275 /*-----------------------------------------------------------------------------
2276 *
2277 * Separator field
2278 *
2279 *-----------------------------------------------------------------------------*/
2280 .acf-field-separator {
2281 /* fields */
2282 }
2283 .acf-field-separator .acf-label {
2284 margin-bottom: 0;
2285 }
2286 .acf-field-separator .acf-label label {
2287 font-weight: normal;
2288 }
2289 .acf-field-separator .acf-input {
2290 display: none;
2291 }
2292 .acf-fields > .acf-field-separator {
2293 background: #f9f9f9;
2294 border-bottom: 1px solid #dfdfdf;
2295 border-top: 1px solid #dfdfdf;
2296 margin-bottom: -1px;
2297 z-index: 2;
2298 }
2299
2300 /*-----------------------------------------------------------------------------
2301 *
2302 * Taxonomy
2303 *
2304 *-----------------------------------------------------------------------------*/
2305 .acf-taxonomy-field {
2306 position: relative;
2307 /* hover */
2308 /* select */
2309 }
2310 .acf-taxonomy-field .categorychecklist-holder {
2311 border: #ccd0d4 solid 1px;
2312 border-radius: 3px;
2313 max-height: 200px;
2314 overflow: auto;
2315 }
2316 .acf-taxonomy-field .acf-checkbox-list {
2317 margin: 0;
2318 padding: 10px;
2319 }
2320 .acf-taxonomy-field .acf-checkbox-list ul.children {
2321 padding-left: 18px;
2322 }
2323 .acf-taxonomy-field:hover .acf-actions {
2324 display: block;
2325 }
2326 .acf-taxonomy-field[data-ftype=select]=select] .acf-actions {
2327 padding: 0;
2328 margin: -9px;
2329 }
2330
2331 /*-----------------------------------------------------------------------------
2332 *
2333 * Range
2334 *
2335 *-----------------------------------------------------------------------------*/
2336 .acf-range-wrap {
2337 /* rtl */
2338 }
2339 .acf-range-wrap .acf-append,
2340 .acf-range-wrap .acf-prepend {
2341 display: inline-block;
2342 vertical-align: middle;
2343 line-height: 28px;
2344 margin: 0 7px 0 0;
2345 }
2346 .acf-range-wrap .acf-append {
2347 margin: 0 0 0 7px;
2348 }
2349 .acf-range-wrap input[type=range]=range] {
2350 display: inline-block;
2351 padding: 0;
2352 margin: 0;
2353 vertical-align: middle;
2354 height: 28px;
2355 }
2356 .acf-range-wrap input[type=range]=range]:focus {
2357 outline: none;
2358 }
2359 .acf-range-wrap input[type=number]=number] {
2360 display: inline-block;
2361 min-width: 5em;
2362 padding-right: 4px;
2363 margin-left: 10px;
2364 vertical-align: middle;
2365 }
2366 html[dir=rtl]=rtl] .acf-range-wrap input[type=number]=number] {
2367 margin-right: 10px;
2368 margin-left: 0;
2369 }
2370 html[dir=rtl]=rtl] .acf-range-wrap .acf-append {
2371 margin: 0 7px 0 0;
2372 }
2373 html[dir=rtl]=rtl] .acf-range-wrap .acf-prepend {
2374 margin: 0 0 0 7px;
2375 }
2376
2377 /*-----------------------------------------------------------------------------
2378 *
2379 * acf-accordion
2380 *
2381 *-----------------------------------------------------------------------------*/
2382 .acf-accordion {
2383 margin: -1px 0;
2384 padding: 0;
2385 background: #fff;
2386 border-top: 1px solid #d5d9dd;
2387 border-bottom: 1px solid #d5d9dd;
2388 z-index: 1;
2389 }
2390 .acf-accordion .acf-accordion-title {
2391 margin: 0;
2392 padding: 12px;
2393 font-weight: bold;
2394 cursor: pointer;
2395 font-size: inherit;
2396 font-size: 13px;
2397 line-height: 1.4em;
2398 }
2399 .acf-accordion .acf-accordion-title:hover {
2400 background: #f3f4f5;
2401 }
2402 .acf-accordion .acf-accordion-title:focus-visible {
2403 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2404 outline-offset: -2px;
2405 }
2406 .acf-accordion .acf-accordion-title label {
2407 margin: 0;
2408 padding: 0;
2409 font-size: 13px;
2410 line-height: 1.4em;
2411 }
2412 .acf-accordion .acf-accordion-title p {
2413 font-weight: normal;
2414 }
2415 .acf-accordion .acf-accordion-title .acf-accordion-icon {
2416 float: right;
2417 }
2418 .acf-accordion .acf-accordion-title svg.acf-accordion-icon {
2419 position: absolute;
2420 right: 10px;
2421 top: 50%;
2422 transform: translateY(-50%);
2423 color: #191e23;
2424 fill: currentColor;
2425 }
2426 .acf-accordion .acf-accordion-content {
2427 margin: 0;
2428 padding: 0 12px 12px;
2429 display: none;
2430 }
2431 .acf-accordion.-open > .acf-accordion-content {
2432 display: block;
2433 }
2434
2435 .acf-field.acf-accordion {
2436 margin: -1px 0;
2437 padding: 0 !important;
2438 border-color: #d5d9dd;
2439 }
2440 .acf-field.acf-accordion .acf-label.acf-accordion-title {
2441 padding: 12px;
2442 width: auto;
2443 float: none;
2444 width: auto;
2445 }
2446 .acf-field.acf-accordion .acf-input.acf-accordion-content {
2447 padding: 0;
2448 float: none;
2449 width: auto;
2450 }
2451 .acf-field.acf-accordion .acf-input.acf-accordion-content > .acf-fields {
2452 border-top: #eeeeee solid 1px;
2453 }
2454 .acf-field.acf-accordion .acf-input.acf-accordion-content > .acf-fields.-clear {
2455 padding: 0 12px 15px;
2456 }
2457
2458 /* field specific (left) */
2459 .acf-fields.-left > .acf-field.acf-accordion:before {
2460 display: none;
2461 }
2462 .acf-fields.-left > .acf-field.acf-accordion .acf-accordion-title {
2463 width: auto;
2464 margin: 0 !important;
2465 padding: 12px;
2466 float: none !important;
2467 }
2468 .acf-fields.-left > .acf-field.acf-accordion .acf-accordion-content {
2469 padding: 0 !important;
2470 }
2471
2472 /* field specific (clear) */
2473 .acf-fields.-clear > .acf-field.acf-accordion {
2474 border: #cccccc solid 1px;
2475 background: transparent;
2476 }
2477 .acf-fields.-clear > .acf-field.acf-accordion + .acf-field.acf-accordion {
2478 margin-top: -16px;
2479 }
2480
2481 /* table */
2482 tr.acf-field.acf-accordion {
2483 background: transparent;
2484 }
2485 tr.acf-field.acf-accordion > .acf-input {
2486 padding: 0 !important;
2487 border: #cccccc solid 1px;
2488 }
2489 tr.acf-field.acf-accordion .acf-accordion-content {
2490 padding: 0 12px 12px;
2491 }
2492
2493 /* #addtag */
2494 #addtag div.acf-field.error {
2495 border: 0 none;
2496 padding: 8px 0;
2497 }
2498
2499 #addtag > .acf-field.acf-accordion {
2500 padding-right: 0;
2501 margin-right: 5%;
2502 }
2503 #addtag > .acf-field.acf-accordion + p.submit {
2504 margin-top: 0;
2505 }
2506
2507 /* border */
2508 tr.acf-accordion {
2509 margin: 15px 0 !important;
2510 }
2511 tr.acf-accordion + tr.acf-accordion {
2512 margin-top: -16px !important;
2513 }
2514
2515 /* seamless */
2516 .acf-postbox.seamless > .acf-fields > .acf-accordion {
2517 margin-left: 12px;
2518 margin-right: 12px;
2519 border: #ccd0d4 solid 1px;
2520 }
2521
2522 /* rtl */
2523 /* menu item */
2524 /*
2525 .menu-item-settings > .field-acf > .acf-field.acf-accordion {
2526 border: #dfdfdf solid 1px;
2527 margin: 10px -13px 10px -11px;
2528
2529 + .acf-field.acf-accordion {
2530 margin-top: -11px;
2531 }
2532 }
2533 */
2534 /* widget */
2535 .widget .widget-content > .acf-field.acf-accordion {
2536 border: #dfdfdf solid 1px;
2537 margin-bottom: 10px;
2538 }
2539 .widget .widget-content > .acf-field.acf-accordion .acf-accordion-title {
2540 margin-bottom: 0;
2541 }
2542 .widget .widget-content > .acf-field.acf-accordion + .acf-field.acf-accordion {
2543 margin-top: -11px;
2544 }
2545
2546 .media-modal .compat-attachment-fields .acf-field.acf-accordion + .acf-field.acf-accordion {
2547 margin-top: -1px;
2548 }
2549 .media-modal .compat-attachment-fields .acf-field.acf-accordion > .acf-input {
2550 width: 100%;
2551 }
2552 .media-modal .compat-attachment-fields .acf-field.acf-accordion .compat-attachment-fields > tbody > tr > td {
2553 padding-bottom: 5px;
2554 }
2555
2556 /*-----------------------------------------------------------------------------
2557 *
2558 * Block Editor
2559 *
2560 *-----------------------------------------------------------------------------*/
2561 .block-editor .edit-post-sidebar .acf-postbox > .postbox-header,
2562 .block-editor .edit-post-sidebar .acf-postbox > .hndle {
2563 border-bottom-width: 0 !important;
2564 }
2565 .block-editor .edit-post-sidebar .acf-postbox.closed > .postbox-header,
2566 .block-editor .edit-post-sidebar .acf-postbox.closed > .hndle {
2567 border-bottom-width: 1px !important;
2568 }
2569 .block-editor .edit-post-sidebar .acf-fields {
2570 min-height: 1px;
2571 overflow: auto;
2572 }
2573 .block-editor .edit-post-sidebar .acf-fields > .acf-field {
2574 border-width: 0;
2575 border-color: #e2e4e7;
2576 margin: 0px;
2577 padding: 10px 16px;
2578 width: auto !important;
2579 min-height: 0 !important;
2580 float: none !important;
2581 }
2582 .block-editor .edit-post-sidebar .acf-fields > .acf-field > .acf-label {
2583 margin-bottom: 5px;
2584 }
2585 .block-editor .edit-post-sidebar .acf-fields > .acf-field > .acf-label label {
2586 font-weight: normal;
2587 }
2588 .block-editor .edit-post-sidebar .acf-fields > .acf-field.acf-accordion {
2589 padding: 0;
2590 margin: 0;
2591 border-top-width: 1px;
2592 }
2593 .block-editor .edit-post-sidebar .acf-fields > .acf-field.acf-accordion:first-child {
2594 border-top-width: 0;
2595 }
2596 .block-editor .edit-post-sidebar .acf-fields > .acf-field.acf-accordion .acf-accordion-title {
2597 margin: 0;
2598 padding: 15px;
2599 }
2600 .block-editor .edit-post-sidebar .acf-fields > .acf-field.acf-accordion .acf-accordion-title label {
2601 font-weight: 500;
2602 color: rgb(30, 30, 30);
2603 }
2604 .block-editor .edit-post-sidebar .acf-fields > .acf-field.acf-accordion .acf-accordion-title svg.acf-accordion-icon {
2605 right: 16px;
2606 }
2607 .block-editor .edit-post-sidebar .acf-fields > .acf-field.acf-accordion .acf-accordion-content > .acf-fields {
2608 border-top-width: 0;
2609 }
2610 .block-editor .edit-post-sidebar .block-editor-block-inspector .acf-fields > .acf-notice {
2611 display: grid;
2612 grid-template-columns: 1fr 25px;
2613 padding: 10px;
2614 margin: 0;
2615 }
2616 .block-editor .edit-post-sidebar .block-editor-block-inspector .acf-fields > .acf-notice p:last-of-type {
2617 margin: 0;
2618 }
2619 .block-editor .edit-post-sidebar .block-editor-block-inspector .acf-fields > .acf-notice > .acf-notice-dismiss {
2620 position: relative;
2621 top: unset;
2622 right: unset;
2623 }
2624 .block-editor .edit-post-sidebar .block-editor-block-inspector .acf-fields .acf-field .acf-notice {
2625 margin: 0;
2626 padding: 0;
2627 }
2628 .block-editor .edit-post-sidebar .block-editor-block-inspector .acf-fields .acf-error {
2629 margin-bottom: 10px;
2630 }
2631
2632 /*-----------------------------------------------------------------------------
2633 *
2634 * Prefix field label & prefix field names
2635 *
2636 *-----------------------------------------------------------------------------*/
2637 .acf-field-setting-prefix_label p.description,
2638 .acf-field-setting-prefix_name p.description {
2639 order: 3;
2640 margin-top: 0;
2641 margin-left: 16px;
2642 }
2643 .acf-field-setting-prefix_label p.description code,
2644 .acf-field-setting-prefix_name p.description code {
2645 padding-top: 4px;
2646 padding-right: 6px;
2647 padding-bottom: 4px;
2648 padding-left: 6px;
2649 background-color: #F2F4F7;
2650 border-radius: 4px;
2651 color: #667085;
2652 }
2653
2654 /*-----------------------------------------------------------------------------
2655 *
2656 * Editor tab styles
2657 *
2658 *-----------------------------------------------------------------------------*/
2659 .acf-fields > .acf-tab-wrap:first-child .acf-tab-group {
2660 border-top: none;
2661 }
2662
2663 .acf-fields > .acf-tab-wrap .acf-tab-group li.active a {
2664 background: #ffffff;
2665 }
2666
2667 .acf-fields > .acf-tab-wrap .acf-tab-group li a {
2668 background: #f1f1f1;
2669 border-color: #ccd0d4;
2670 }
2671
2672 .acf-fields > .acf-tab-wrap .acf-tab-group li a:hover {
2673 background: #fff;
2674 }
2675
2676 /*--------------------------------------------------------------------------------------------
2677 *
2678 * User
2679 *
2680 *--------------------------------------------------------------------------------------------*/
2681 .form-table > tbody {
2682 /* field */
2683 /* tab wrap */
2684 /* misc */
2685 }
2686 .form-table > tbody > .acf-field {
2687 /* label */
2688 /* input */
2689 }
2690 .form-table > tbody > .acf-field > .acf-label {
2691 padding: 20px 10px 20px 0;
2692 width: 210px;
2693 /* rtl */
2694 }
2695 html[dir=rtl]=rtl] .form-table > tbody > .acf-field > .acf-label {
2696 padding: 20px 0 20px 10px;
2697 }
2698 .form-table > tbody > .acf-field > .acf-label label {
2699 font-size: 14px;
2700 color: #23282d;
2701 }
2702 .form-table > tbody > .acf-field > .acf-input {
2703 padding: 15px 10px;
2704 /* rtl */
2705 }
2706 html[dir=rtl]=rtl] .form-table > tbody > .acf-field > .acf-input {
2707 padding: 15px 10px 15px 5%;
2708 }
2709 .form-table > tbody > .acf-tab-wrap td {
2710 padding: 15px 5% 15px 0;
2711 /* rtl */
2712 }
2713 html[dir=rtl]=rtl] .form-table > tbody > .acf-tab-wrap td {
2714 padding: 15px 0 15px 5%;
2715 }
2716 .form-table > tbody .form-table th.acf-th {
2717 width: auto;
2718 }
2719
2720 #your-profile,
2721 #createuser {
2722 /* override for user css */
2723 /* allow sub fields to display correctly */
2724 }
2725 #your-profile .acf-field input[type=text]=text],
2726 #your-profile .acf-field input[type=password]=password],
2727 #your-profile .acf-field input[type=number]=number],
2728 #your-profile .acf-field input[type=search]=search],
2729 #your-profile .acf-field input[type=email]=email],
2730 #your-profile .acf-field input[type=url]=url],
2731 #your-profile .acf-field select,
2732 #createuser .acf-field input[type=text]=text],
2733 #createuser .acf-field input[type=password]=password],
2734 #createuser .acf-field input[type=number]=number],
2735 #createuser .acf-field input[type=search]=search],
2736 #createuser .acf-field input[type=email]=email],
2737 #createuser .acf-field input[type=url]=url],
2738 #createuser .acf-field select {
2739 max-width: 25em;
2740 }
2741 #your-profile .acf-field textarea,
2742 #createuser .acf-field textarea {
2743 max-width: 500px;
2744 }
2745 #your-profile .acf-field .acf-field input[type=text]=text],
2746 #your-profile .acf-field .acf-field input[type=password]=password],
2747 #your-profile .acf-field .acf-field input[type=number]=number],
2748 #your-profile .acf-field .acf-field input[type=search]=search],
2749 #your-profile .acf-field .acf-field input[type=email]=email],
2750 #your-profile .acf-field .acf-field input[type=url]=url],
2751 #your-profile .acf-field .acf-field textarea,
2752 #your-profile .acf-field .acf-field select,
2753 #createuser .acf-field .acf-field input[type=text]=text],
2754 #createuser .acf-field .acf-field input[type=password]=password],
2755 #createuser .acf-field .acf-field input[type=number]=number],
2756 #createuser .acf-field .acf-field input[type=search]=search],
2757 #createuser .acf-field .acf-field input[type=email]=email],
2758 #createuser .acf-field .acf-field input[type=url]=url],
2759 #createuser .acf-field .acf-field textarea,
2760 #createuser .acf-field .acf-field select {
2761 max-width: none;
2762 }
2763
2764 #registerform h2 {
2765 margin: 1em 0;
2766 }
2767 #registerform .acf-field {
2768 margin-top: 0;
2769 /*
2770 .acf-input {
2771 input {
2772 font-size: 24px;
2773 padding: 5px;
2774 height: auto;
2775 }
2776 }
2777 */
2778 }
2779 #registerform .acf-field .acf-label {
2780 margin-bottom: 0;
2781 }
2782 #registerform .acf-field .acf-label label {
2783 font-weight: normal;
2784 line-height: 1.5;
2785 }
2786 #registerform p.submit {
2787 text-align: right;
2788 }
2789
2790 /*--------------------------------------------------------------------------------------------
2791 *
2792 * Term
2793 *
2794 *--------------------------------------------------------------------------------------------*/
2795 #acf-term-fields {
2796 padding-right: 5%;
2797 }
2798 #acf-term-fields > .acf-field > .acf-label {
2799 margin: 0;
2800 }
2801 #acf-term-fields > .acf-field > .acf-label label {
2802 font-size: 12px;
2803 font-weight: normal;
2804 }
2805
2806 p.submit .spinner,
2807 p.submit .acf-spinner {
2808 vertical-align: top;
2809 float: none;
2810 margin: 4px 4px 0;
2811 }
2812
2813 #edittag .acf-fields.-left > .acf-field {
2814 padding-left: 220px;
2815 }
2816 #edittag .acf-fields.-left > .acf-field:before {
2817 width: 209px;
2818 }
2819 #edittag .acf-fields.-left > .acf-field > .acf-label {
2820 width: 220px;
2821 margin-left: -220px;
2822 padding: 0 10px;
2823 }
2824 #edittag .acf-fields.-left > .acf-field > .acf-input {
2825 padding: 0;
2826 }
2827
2828 #edittag > .acf-fields.-left {
2829 width: 96%;
2830 }
2831 #edittag > .acf-fields.-left > .acf-field > .acf-label {
2832 padding-left: 0;
2833 }
2834
2835 /*--------------------------------------------------------------------------------------------
2836 *
2837 * Comment
2838 *
2839 *--------------------------------------------------------------------------------------------*/
2840 .editcomment td:first-child {
2841 white-space: nowrap;
2842 width: 131px;
2843 }
2844
2845 /*--------------------------------------------------------------------------------------------
2846 *
2847 * Widget
2848 *
2849 *--------------------------------------------------------------------------------------------*/
2850 #widgets-right .widget .acf-field .description {
2851 padding-left: 0;
2852 padding-right: 0;
2853 }
2854
2855 .acf-widget-fields > .acf-field .acf-label {
2856 margin-bottom: 5px;
2857 }
2858 .acf-widget-fields > .acf-field .acf-label label {
2859 font-weight: normal;
2860 margin: 0;
2861 }
2862
2863 /*--------------------------------------------------------------------------------------------
2864 *
2865 * Nav Menu
2866 *
2867 *--------------------------------------------------------------------------------------------*/
2868 .acf-menu-settings {
2869 border-top: 1px solid #eee;
2870 margin-top: 2em;
2871 }
2872 .acf-menu-settings.-seamless {
2873 border-top: none;
2874 margin-top: 15px;
2875 }
2876 .acf-menu-settings.-seamless > h2 {
2877 display: none;
2878 }
2879 .acf-menu-settings .list li {
2880 display: block;
2881 margin-bottom: 0;
2882 }
2883
2884 .acf-fields.acf-menu-item-fields {
2885 clear: both;
2886 padding-top: 1px;
2887 }
2888 .acf-fields.acf-menu-item-fields > .acf-field {
2889 margin: 5px 0;
2890 padding-right: 10px;
2891 }
2892 .acf-fields.acf-menu-item-fields > .acf-field .acf-label {
2893 margin-bottom: 0;
2894 }
2895 .acf-fields.acf-menu-item-fields > .acf-field .acf-label label {
2896 font-style: italic;
2897 font-weight: normal;
2898 }
2899
2900 /*---------------------------------------------------------------------------------------------
2901 *
2902 * Attachment Form (single)
2903 *
2904 *---------------------------------------------------------------------------------------------*/
2905 #post .compat-attachment-fields .compat-field-acf-form-data {
2906 display: none;
2907 }
2908 #post .compat-attachment-fields,
2909 #post .compat-attachment-fields > tbody,
2910 #post .compat-attachment-fields > tbody > tr,
2911 #post .compat-attachment-fields > tbody > tr > th,
2912 #post .compat-attachment-fields > tbody > tr > td {
2913 display: block;
2914 }
2915 #post .compat-attachment-fields > tbody > .acf-field {
2916 margin: 15px 0;
2917 }
2918 #post .compat-attachment-fields > tbody > .acf-field > .acf-label {
2919 margin: 0;
2920 }
2921 #post .compat-attachment-fields > tbody > .acf-field > .acf-label label {
2922 margin: 0;
2923 padding: 0;
2924 }
2925 #post .compat-attachment-fields > tbody > .acf-field > .acf-label label p {
2926 margin: 0 0 3px !important;
2927 }
2928 #post .compat-attachment-fields > tbody > .acf-field > .acf-input {
2929 margin: 0;
2930 }
2931
2932 /*---------------------------------------------------------------------------------------------
2933 *
2934 * Media Model
2935 *
2936 *---------------------------------------------------------------------------------------------*/
2937 /* WP sets tables to act as divs. SCF uses tables, so these muct be reset */
2938 .media-modal .compat-attachment-fields td.acf-input table {
2939 display: table;
2940 table-layout: auto;
2941 }
2942 .media-modal .compat-attachment-fields td.acf-input table tbody {
2943 display: table-row-group;
2944 }
2945 .media-modal .compat-attachment-fields td.acf-input table tr {
2946 display: table-row;
2947 }
2948 .media-modal .compat-attachment-fields td.acf-input table td, .media-modal .compat-attachment-fields td.acf-input table th {
2949 display: table-cell;
2950 }
2951
2952 /* field widths floats */
2953 .media-modal .compat-attachment-fields > tbody > .acf-field {
2954 margin: 5px 0;
2955 }
2956 .media-modal .compat-attachment-fields > tbody > .acf-field > .acf-label {
2957 min-width: 30%;
2958 margin: 0;
2959 padding: 0;
2960 float: left;
2961 text-align: right;
2962 display: block;
2963 float: left;
2964 }
2965 .media-modal .compat-attachment-fields > tbody > .acf-field > .acf-label > label {
2966 padding-top: 6px;
2967 margin: 0;
2968 color: #666666;
2969 font-weight: 400;
2970 line-height: 16px;
2971 }
2972 .media-modal .compat-attachment-fields > tbody > .acf-field > .acf-input {
2973 width: 65%;
2974 margin: 0;
2975 padding: 0;
2976 float: right;
2977 display: block;
2978 }
2979 .media-modal .compat-attachment-fields > tbody > .acf-field p.description {
2980 margin: 0;
2981 }
2982
2983 /* restricted selection (copy of WP .upload-errors)*/
2984 .acf-selection-error {
2985 background: #ffebe8;
2986 border: 1px solid #c00;
2987 border-radius: 3px;
2988 padding: 8px;
2989 margin: 20px 0 0;
2990 }
2991 .acf-selection-error .selection-error-label {
2992 background: #CC0000;
2993 border-radius: 3px;
2994 color: #fff;
2995 font-weight: bold;
2996 margin-right: 8px;
2997 padding: 2px 4px;
2998 }
2999 .acf-selection-error .selection-error-message {
3000 color: #b44;
3001 display: block;
3002 padding-top: 8px;
3003 word-wrap: break-word;
3004 white-space: pre-wrap;
3005 }
3006
3007 /* disabled attachment */
3008 .media-modal .attachment.acf-disabled .thumbnail {
3009 opacity: 0.25 !important;
3010 }
3011 .media-modal .attachment.acf-disabled .attachment-preview:before {
3012 background: rgba(0, 0, 0, 0.15);
3013 z-index: 1;
3014 position: relative;
3015 }
3016
3017 /* misc */
3018 .media-modal {
3019 /* compat-item */
3020 /* allow line breaks in upload error */
3021 /* fix required span */
3022 /* sidebar */
3023 /* mobile md */
3024 }
3025 .media-modal .compat-field-acf-form-data,
3026 .media-modal .compat-field-acf-blank {
3027 display: none !important;
3028 }
3029 .media-modal .upload-error-message {
3030 white-space: pre-wrap;
3031 }
3032 .media-modal .acf-required {
3033 padding: 0 !important;
3034 margin: 0 !important;
3035 float: none !important;
3036 color: #f00 !important;
3037 }
3038 .media-modal .media-sidebar .compat-item {
3039 padding-bottom: 20px;
3040 }
3041 @media (max-width: 900px) {
3042 .media-modal {
3043 /* label */
3044 /* field */
3045 }
3046 .media-modal .setting span,
3047 .media-modal .compat-attachment-fields > tbody > .acf-field > .acf-label {
3048 width: 98%;
3049 float: none;
3050 text-align: left;
3051 min-height: 0;
3052 padding: 0;
3053 }
3054 .media-modal .setting input,
3055 .media-modal .setting textarea,
3056 .media-modal .compat-attachment-fields > tbody > .acf-field > .acf-input {
3057 float: none;
3058 height: auto;
3059 max-width: none;
3060 width: 98%;
3061 }
3062 }
3063
3064 /*---------------------------------------------------------------------------------------------
3065 *
3066 * Media Model (expand details)
3067 *
3068 *---------------------------------------------------------------------------------------------*/
3069 .media-modal .acf-expand-details {
3070 float: right;
3071 padding: 8px 10px;
3072 margin-right: 6px;
3073 font-size: 13px;
3074 height: 18px;
3075 line-height: 18px;
3076 color: #666;
3077 text-decoration: none;
3078 }
3079 .media-modal .acf-expand-details:focus, .media-modal .acf-expand-details:active {
3080 outline: 0 none;
3081 box-shadow: none;
3082 color: #666;
3083 }
3084 .media-modal .acf-expand-details:hover {
3085 color: #000;
3086 }
3087 .media-modal .acf-expand-details .is-open {
3088 display: none;
3089 }
3090 .media-modal .acf-expand-details .is-closed {
3091 display: block;
3092 }
3093 @media (max-width: 640px) {
3094 .media-modal .acf-expand-details {
3095 display: none;
3096 }
3097 }
3098
3099 /* expanded */
3100 .media-modal.acf-expanded {
3101 /* toggle */
3102 }
3103 .media-modal.acf-expanded .acf-expand-details .is-open {
3104 display: block;
3105 }
3106 .media-modal.acf-expanded .acf-expand-details .is-closed {
3107 display: none;
3108 }
3109 .media-modal.acf-expanded .attachments-browser .media-toolbar,
3110 .media-modal.acf-expanded .attachments-browser .attachments {
3111 right: 740px;
3112 }
3113 .media-modal.acf-expanded .media-sidebar {
3114 width: 708px;
3115 }
3116 .media-modal.acf-expanded .media-sidebar .attachment-info .thumbnail {
3117 float: left;
3118 max-height: none;
3119 }
3120 .media-modal.acf-expanded .media-sidebar .attachment-info .thumbnail img {
3121 max-width: 100%;
3122 max-height: 200px;
3123 }
3124 .media-modal.acf-expanded .media-sidebar .attachment-info .details {
3125 float: right;
3126 }
3127 .media-modal.acf-expanded .media-sidebar .attachment-info .thumbnail,
3128 .media-modal.acf-expanded .media-sidebar .attachment-details .setting .name,
3129 .media-modal.acf-expanded .media-sidebar .compat-attachment-fields > tbody > .acf-field > .acf-label {
3130 min-width: 20%;
3131 margin-right: 0;
3132 }
3133 .media-modal.acf-expanded .media-sidebar .attachment-info .details,
3134 .media-modal.acf-expanded .media-sidebar .attachment-details .setting input,
3135 .media-modal.acf-expanded .media-sidebar .attachment-details .setting textarea,
3136 .media-modal.acf-expanded .media-sidebar .attachment-details .setting + .description,
3137 .media-modal.acf-expanded .media-sidebar .compat-attachment-fields > tbody > .acf-field > .acf-input {
3138 min-width: 77%;
3139 }
3140 @media (max-width: 900px) {
3141 .media-modal.acf-expanded .attachments-browser .media-toolbar {
3142 display: none;
3143 }
3144 .media-modal.acf-expanded .attachments {
3145 display: none;
3146 }
3147 .media-modal.acf-expanded .media-sidebar {
3148 width: auto;
3149 max-width: none !important;
3150 bottom: 0 !important;
3151 }
3152 .media-modal.acf-expanded .media-sidebar .attachment-info .thumbnail {
3153 min-width: 0;
3154 max-width: none;
3155 width: 30%;
3156 }
3157 .media-modal.acf-expanded .media-sidebar .attachment-info .details {
3158 min-width: 0;
3159 max-width: none;
3160 width: 67%;
3161 }
3162 }
3163 @media (max-width: 640px) {
3164 .media-modal.acf-expanded .media-sidebar .attachment-info .thumbnail, .media-modal.acf-expanded .media-sidebar .attachment-info .details {
3165 width: 100%;
3166 }
3167 }
3168
3169 /*---------------------------------------------------------------------------------------------
3170 *
3171 * ACF Media Model
3172 *
3173 *---------------------------------------------------------------------------------------------*/
3174 .acf-media-modal {
3175 /* hide embed settings */
3176 }
3177 .acf-media-modal .media-embed .setting.align,
3178 .acf-media-modal .media-embed .setting.link-to {
3179 display: none;
3180 }
3181
3182 /*---------------------------------------------------------------------------------------------
3183 *
3184 * ACF Media Model (Select Mode)
3185 *
3186 *---------------------------------------------------------------------------------------------*/
3187 /*---------------------------------------------------------------------------------------------
3188 *
3189 * ACF Media Model (Edit Mode)
3190 *
3191 *---------------------------------------------------------------------------------------------*/
3192 .acf-media-modal.-edit {
3193 /* resize modal */
3194 left: 15%;
3195 right: 15%;
3196 top: 100px;
3197 bottom: 100px;
3198 /* hide elements */
3199 /* full width */
3200 /* tidy up incorrect distance */
3201 /* title box shadow (to match media grid) */
3202 /* sidebar */
3203 /* mobile md */
3204 /* mobile sm */
3205 }
3206 .acf-media-modal.-edit .media-frame-menu,
3207 .acf-media-modal.-edit .media-frame-router,
3208 .acf-media-modal.-edit .media-frame-content .attachments,
3209 .acf-media-modal.-edit .media-frame-content .media-toolbar {
3210 display: none;
3211 }
3212 .acf-media-modal.-edit .media-frame-title,
3213 .acf-media-modal.-edit .media-frame-content,
3214 .acf-media-modal.-edit .media-frame-toolbar,
3215 .acf-media-modal.-edit .media-sidebar {
3216 width: auto;
3217 left: 0;
3218 right: 0;
3219 }
3220 .acf-media-modal.-edit .media-frame-content {
3221 top: 50px;
3222 }
3223 .acf-media-modal.-edit .media-frame-title {
3224 border-bottom: 1px solid #DFDFDF;
3225 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
3226 }
3227 .acf-media-modal.-edit .media-sidebar {
3228 padding: 0 16px;
3229 /* WP details */
3230 /* ACF fields */
3231 /* WP required message */
3232 }
3233 .acf-media-modal.-edit .media-sidebar .attachment-details {
3234 overflow: visible;
3235 /* hide 'Attachment Details' heading */
3236 /* remove overflow */
3237 /* move thumbnail */
3238 }
3239 .acf-media-modal.-edit .media-sidebar .attachment-details > h3, .acf-media-modal.-edit .media-sidebar .attachment-details > h2 {
3240 display: none;
3241 }
3242 .acf-media-modal.-edit .media-sidebar .attachment-details .attachment-info {
3243 background: #fff;
3244 border-bottom: #dddddd solid 1px;
3245 padding: 16px;
3246 margin: 0 -16px 16px;
3247 }
3248 .acf-media-modal.-edit .media-sidebar .attachment-details .thumbnail {
3249 margin: 0 16px 0 0;
3250 }
3251 .acf-media-modal.-edit .media-sidebar .attachment-details .setting {
3252 margin: 0 0 5px;
3253 }
3254 .acf-media-modal.-edit .media-sidebar .attachment-details .setting span {
3255 margin: 0;
3256 }
3257 .acf-media-modal.-edit .media-sidebar .compat-attachment-fields > tbody > .acf-field {
3258 margin: 0 0 5px;
3259 }
3260 .acf-media-modal.-edit .media-sidebar .compat-attachment-fields > tbody > .acf-field p.description {
3261 margin-top: 3px;
3262 }
3263 .acf-media-modal.-edit .media-sidebar .media-types-required-info {
3264 display: none;
3265 }
3266 @media (max-width: 900px) {
3267 .acf-media-modal.-edit {
3268 top: 30px;
3269 right: 30px;
3270 bottom: 30px;
3271 left: 30px;
3272 }
3273 }
3274 @media (max-width: 640px) {
3275 .acf-media-modal.-edit {
3276 top: 0;
3277 right: 0;
3278 bottom: 0;
3279 left: 0;
3280 }
3281 }
3282 @media (max-width: 480px) {
3283 .acf-media-modal.-edit .media-frame-content {
3284 top: 40px;
3285 }
3286 }
3287
3288 .acf-temp-remove {
3289 position: relative;
3290 opacity: 1;
3291 -webkit-transition: all 0.25s ease;
3292 -moz-transition: all 0.25s ease;
3293 -o-transition: all 0.25s ease;
3294 transition: all 0.25s ease;
3295 overflow: hidden;
3296 /* overlay prevents hover */
3297 }
3298 .acf-temp-remove:after {
3299 display: block;
3300 content: "";
3301 position: absolute;
3302 top: 0;
3303 left: 0;
3304 right: 0;
3305 bottom: 0;
3306 z-index: 99;
3307 }
3308
3309 .hidden-by-conditional-logic {
3310 display: none !important;
3311 }
3312 .hidden-by-conditional-logic.appear-empty {
3313 display: table-cell !important;
3314 }
3315 .hidden-by-conditional-logic.appear-empty .acf-input {
3316 display: none !important;
3317 }
3318
3319 .acf-postbox.acf-hidden {
3320 display: none !important;
3321 }
3322
3323 .acf-attention {
3324 transition: border 0.25s ease-out;
3325 }
3326 .acf-attention.-focused {
3327 border: #23282d solid 1px !important;
3328 transition: none;
3329 }
3330
3331 tr.acf-attention {
3332 transition: box-shadow 0.25s ease-out;
3333 position: relative;
3334 }
3335 tr.acf-attention.-focused {
3336 box-shadow: #23282d 0 0 0px 1px !important;
3337 }
3338
3339 #editor .edit-post-layout__metaboxes {
3340 padding: 0;
3341 }
3342 #editor .edit-post-layout__metaboxes .edit-post-meta-boxes-area {
3343 margin: 0;
3344 }
3345 #editor .metabox-location-side .postbox-container {
3346 float: none;
3347 }
3348 #editor .postbox {
3349 color: #444;
3350 }
3351 #editor .postbox > .postbox-header .hndle {
3352 border-bottom: none;
3353 }
3354 #editor .postbox > .postbox-header .hndle:hover {
3355 background: transparent;
3356 }
3357 #editor .postbox > .postbox-header .handle-actions .handle-order-higher,
3358 #editor .postbox > .postbox-header .handle-actions .handle-order-lower {
3359 width: 1.62rem;
3360 }
3361 #editor .postbox > .postbox-header .handle-actions .acf-hndle-cog {
3362 height: 44px;
3363 line-height: 44px;
3364 }
3365 #editor .postbox > .postbox-header:hover {
3366 background: #f0f0f0;
3367 }
3368 #editor .postbox:last-child.closed > .postbox-header {
3369 border-bottom: none;
3370 }
3371 #editor .postbox:last-child > .inside {
3372 border-bottom: none;
3373 }
3374 #editor .block-editor-writing-flow__click-redirect {
3375 min-height: 50px;
3376 }
3377
3378 body.is-dragging-metaboxes #acf_after_title-sortables {
3379 outline: 3px dashed #646970;
3380 display: flow-root;
3381 min-height: 60px;
3382 margin-bottom: 3px !important;
3383 }
3384
3385 .editor-sidebar__panel .is-side #poststuff .acf-postbox .postbox-header {
3386 margin-top: -1px
3387 }