1/*! This file is auto-generated */
  2body {
  3	overflow: hidden;
  4	-webkit-text-size-adjust: 100%;
  5}
  6
  7.customize-controls-close,
  8.widget-control-actions a {
  9	text-decoration: none;
 10}
 11
 12#customize-controls h3 {
 13	font-size: 14px;
 14}
 15
 16#customize-controls img {
 17	max-width: 100%;
 18}
 19
 20#customize-controls .submit {
 21	text-align: center;
 22}
 23
 24#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked {
 25	background-color: rgba(0, 0, 0, 0.7);
 26	padding: 25px;
 27}
 28
 29#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message {
 30	margin-right: auto;
 31	margin-left: auto;
 32	max-width: 366px;
 33	min-height: 64px;
 34	width: auto;
 35	padding: 25px;
 36	position: relative;
 37	background: #fff;
 38	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 39	line-height: 1.5;
 40	overflow-y: auto;
 41	text-align: right;
 42	top: calc( 50% - 100px );
 43}
 44
 45#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .customize-changeset-locked-message.has-avatar {
 46	padding-right: 109px;
 47}
 48
 49#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .currently-editing {
 50	margin-top: 0;
 51}
 52#customize-controls #customize-notifications-area .notice.notification-overlay.notification-changeset-locked .action-buttons {
 53	margin-bottom: 0;
 54}
 55
 56.customize-changeset-locked-avatar {
 57	width: 64px;
 58	position: absolute;
 59	right: 25px;
 60	top: 25px;
 61}
 62
 63.wp-core-ui.wp-customizer .customize-changeset-locked-message a.button {
 64	margin-left: 10px;
 65	margin-top: 0;
 66}
 67
 68#customize-controls .description {
 69	color: #50575e;
 70}
 71
 72#customize-save-button-wrapper {
 73	float: left;
 74	margin-top: 9px;
 75}
 76
 77body:not(.ready) #customize-save-button-wrapper .save {
 78	visibility: hidden;
 79}
 80#customize-save-button-wrapper .save {
 81	float: right;
 82	border-radius: 3px;
 83	box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
 84	margin-top: 0;
 85}
 86
 87#customize-save-button-wrapper .save:focus, #publish-settings:focus {
 88	box-shadow: 0 1px 0 #2271b1, 0 0 2px 1px #72aee6; /* This is default box shadow for focus */
 89}
 90
 91#customize-save-button-wrapper .save.has-next-sibling {
 92	border-radius: 0 3px 3px 0;
 93}
 94
 95#customize-sidebar-outer-content {
 96	position: absolute;
 97	top: 0;
 98	bottom: 0;
 99	right: 0;
100	visibility: hidden;
101	overflow-x: hidden;
102	overflow-y: auto;
103	width: 100%;
104	margin: 0;
105	z-index: -1;
106	background: #f0f0f1;
107	transition: right .18s;
108	border-left: 1px solid #dcdcde;
109	border-right: 1px solid #dcdcde;
110	height: 100%;
111}
112
113@media (prefers-reduced-motion: reduce) {
114	#customize-sidebar-outer-content {
115		transition: none;
116	}
117}
118
119#customize-theme-controls .control-section-outer {
120	display: none !important;
121}
122
123#customize-outer-theme-controls .accordion-section-content {
124	padding: 12px;
125}
126
127#customize-outer-theme-controls .accordion-section-content.open {
128	display: block;
129}
130
131.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
132	visibility: visible;
133	right: 100%;
134	transition: right .18s;
135}
136
137@media (prefers-reduced-motion: reduce) {
138	.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
139		transition: none;
140	}
141}
142
143.customize-outer-pane-parent {
144	margin: 0;
145}
146
147.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
148	right: 300px;
149	opacity: 0.4;
150}
151
152.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
153.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
154.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
155.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
156.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
157.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
158	right: 64%;
159}
160
161#customize-outer-theme-controls li.notice {
162	padding-top: 8px;
163	padding-bottom: 8px;
164	margin-right: 0;
165	margin-bottom: 10px;
166}
167
168#publish-settings {
169	text-indent: 0;
170	border-radius: 3px 0 0 3px;
171	padding-right: 0;
172	padding-left: 0;
173	box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
174	font-size: 14px;
175	width: 30px;
176	float: right;
177	transform: none;
178	margin-top: 0;
179	line-height: 2;
180}
181
182body:not(.ready) #publish-settings,
183body.trashing #customize-save-button-wrapper .save,
184body.trashing #publish-settings {
185	display: none;
186}
187
188#customize-header-actions .spinner {
189	margin-top: 13px;
190	margin-left: 4px;
191}
192
193.saving #customize-header-actions .spinner,
194.trashing #customize-header-actions .spinner {
195	visibility: visible;
196}
197
198#customize-header-actions {
199	border-bottom: 1px solid #dcdcde;
200}
201
202#customize-controls .wp-full-overlay-sidebar-content {
203	overflow-y: auto;
204	overflow-x: hidden;
205}
206
207.outer-section-open #customize-controls .wp-full-overlay-sidebar-content {
208	background: #f0f0f1;
209}
210
211#customize-controls .customize-info {
212	border: none;
213	border-bottom: 1px solid #dcdcde;
214	margin-bottom: 15px;
215}
216
217#customize-control-changeset_status .customize-inside-control-row,
218#customize-control-changeset_preview_link input {
219	background-color: #fff;
220	border-bottom: 1px solid #dcdcde;
221	box-sizing: content-box;
222	width: 100%;
223	margin-right: -12px;
224	padding-right: 12px;
225	padding-left: 12px;
226}
227
228#customize-control-trash_changeset {
229	margin-top: 20px;
230}
231#customize-control-trash_changeset .button-link {
232	position: relative;
233	padding-right: 24px;
234	display: inline-block;
235}
236#customize-control-trash_changeset .button-link:before {
237	content: "\f182";
238	content: "\f182" / '';
239	font: normal 22px dashicons;
240	text-decoration: none;
241	position: absolute;
242	right: 0;
243	top: -2px;
244}
245
246#customize-controls .date-input:invalid {
247	border-color: #d63638;
248}
249
250#customize-control-changeset_status .customize-inside-control-row {
251	padding-top: 10px;
252	padding-bottom: 10px;
253	font-weight: 500;
254}
255
256#customize-control-changeset_status .customize-inside-control-row:first-of-type {
257	border-top: 1px solid #dcdcde;
258}
259
260#customize-control-changeset_status .customize-control-title {
261	margin-bottom: 6px;
262}
263
264#customize-control-changeset_status input {
265	margin-right: 0;
266}
267
268#customize-control-changeset_preview_link {
269	position: relative;
270	display: block;
271}
272
273.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
274	margin: 0;
275	position: absolute;
276	bottom: 9px;
277	left: 0;
278}
279
280.preview-link-wrapper {
281	position: relative;
282}
283
284.customize-copy-preview-link:before,
285.customize-copy-preview-link:after {
286	content: "";
287	height: 28px;
288	position: absolute;
289	background: #fff;
290	top: -1px;
291}
292
293.customize-copy-preview-link:before {
294	right: -10px;
295	width: 9px;
296	opacity: 0.75;
297}
298
299.customize-copy-preview-link:after {
300	right: -5px;
301	width: 4px;
302	opacity: 0.8;
303}
304
305#customize-control-changeset_preview_link input {
306	line-height: 2.85714286; /* 40px */
307	border-top: 1px solid #dcdcde;
308	border-right: none;
309	border-left: none;
310	text-indent: -999px;
311	color: #fff;
312	/* Only necessary for IE11 */
313	min-height: 40px;
314}
315
316#customize-control-changeset_preview_link label {
317	position: relative;
318	display: block;
319}
320
321#customize-control-changeset_preview_link a {
322	display: inline-block;
323	position: absolute;
324	white-space: nowrap;
325	overflow: hidden;
326	width: 90%;
327	bottom: 14px;
328	font-size: 14px;
329	text-decoration: none;
330}
331
332#customize-control-changeset_preview_link a.disabled,
333#customize-control-changeset_preview_link a.disabled:active,
334#customize-control-changeset_preview_link a.disabled:focus,
335#customize-control-changeset_preview_link a.disabled:visited {
336	color: #000;
337	opacity: 0.4;
338	cursor: default;
339	outline: none;
340	box-shadow: none;
341}
342
343#sub-accordion-section-publish_settings .customize-section-description-container {
344	display: none;
345}
346
347#customize-controls .customize-info.section-meta {
348	margin-bottom: 15px;
349}
350
351.customize-control-date_time .customize-control-description + .date-time-fields.includes-time {
352	margin-top: 10px;
353}
354
355.customize-control.customize-control-date_time .date-time-fields .date-input.day {
356	margin-left: 0;
357}
358
359.date-time-fields .date-input.month {
360	width: auto;
361	margin: 0;
362}
363
364.date-time-fields .date-input.day,
365.date-time-fields .date-input.hour,
366.date-time-fields .date-input.minute {
367	width: 46px;
368}
369
370.customize-control-date_time select {
371	vertical-align: top;
372}
373
374.date-time-fields .date-input.year {
375	width: 65px;
376}
377
378.date-time-fields .date-input.meridian {
379	width: auto;
380	margin: 0;
381}
382
383.date-time-fields .time-row {
384	margin-top: 12px;
385}
386
387#customize-control-changeset_preview_link {
388	margin-top: 6px;
389}
390
391#customize-control-changeset_status {
392	margin-bottom: 0;
393	padding-bottom: 0;
394}
395
396#customize-control-changeset_scheduled_date {
397	box-sizing: content-box;
398	width: 100%;
399	margin-right: -12px;
400	padding: 12px;
401	background: #fff;
402	border-bottom: 1px solid #dcdcde;
403	margin-bottom: 0;
404}
405
406#customize-control-site_icon .customize-control-description,
407#customize-control-changeset_scheduled_date .customize-control-description {
408	font-style: normal;
409}
410
411#customize-controls .customize-info.is-in-view,
412#customize-controls .customize-section-title.is-in-view {
413	position: absolute;
414	z-index: 9;
415	width: 100%;
416	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
417}
418
419#customize-controls .customize-section-title.is-in-view {
420	margin-top: 0;
421}
422
423#customize-controls .customize-info.is-in-view + .accordion-section {
424	margin-top: 15px;
425}
426
427#customize-controls .customize-info.is-sticky,
428#customize-controls .customize-section-title.is-sticky {
429	position: fixed;
430	top: 46px;
431}
432
433#customize-controls .customize-info .accordion-section-title {
434	background: #fff;
435	color: #50575e;
436	border-right: none;
437	border-left: none;
438	border-bottom: none;
439	cursor: default;
440	padding: 10px 14px 11px 10px;
441}
442
443#customize-controls .customize-info.open .accordion-section-title:after,
444#customize-controls .customize-info .accordion-section-title:hover:after,
445#customize-controls .customize-info .accordion-section-title:focus:after {
446	color: #2c3338;
447}
448
449#customize-controls .customize-info .accordion-section-title:after {
450	display: none;
451}
452
453#customize-controls .customize-info .preview-notice {
454	font-size: 13px;
455	line-height: 1.9;
456	margin: 0;
457	font-weight: 400;
458	color: #50575e;
459}
460
461#customize-controls .customize-pane-child .customize-section-title h3,
462#customize-controls .customize-pane-child h3.customize-section-title,
463#customize-outer-theme-controls .customize-pane-child .customize-section-title h3,
464#customize-outer-theme-controls .customize-pane-child h3.customize-section-title,
465#customize-controls .customize-info .panel-title {
466	font-size: 20px;
467	font-weight: 200;
468	line-height: 26px;
469	display: block;
470	overflow: hidden;
471	white-space: nowrap;
472	text-overflow: ellipsis;
473}
474
475#customize-controls .customize-section-title span.customize-action {
476	overflow: hidden;
477	white-space: nowrap;
478	text-overflow: ellipsis;
479}
480
481#customize-controls .customize-info .customize-help-toggle {
482	position: absolute;
483	top: 4px;
484	left: 1px;
485	padding: 20px 10px 10px 20px;
486	width: 20px;
487	height: 20px;
488	cursor: pointer;
489	box-shadow: none;
490	background: transparent;
491	color: #50575e;
492	border: none;
493}
494
495#customize-controls .customize-info .customize-help-toggle:before {
496	position: absolute;
497	top: 5px;
498	right: 6px;
499}
500
501#customize-controls .customize-info.open .customize-help-toggle,
502#customize-controls .customize-info .customize-help-toggle:focus,
503#customize-controls .customize-info .customize-help-toggle:hover {
504	color: #2271b1;
505}
506
507#customize-controls .customize-info .customize-panel-description,
508#customize-controls .customize-info .customize-section-description,
509#customize-outer-theme-controls .customize-info .customize-section-description,
510#customize-controls .no-widget-areas-rendered-notice {
511	color: #50575e;
512	display: none;
513	background: #fff;
514	padding: 12px 15px;
515	border-top: 1px solid #dcdcde;
516}
517
518#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
519	border-top: none;
520}
521.no-widget-areas-rendered-notice {
522	font-style: italic;
523}
524.no-widget-areas-rendered-notice p:first-child {
525	margin-top: 0;
526}
527.no-widget-areas-rendered-notice p:last-child {
528	margin-bottom: 0;
529}
530
531#customize-controls .customize-info .customize-section-description {
532	margin-bottom: 15px;
533}
534
535#customize-controls .customize-info .customize-panel-description p:first-child,
536#customize-controls .customize-info .customize-section-description p:first-child {
537	margin-top: 0;
538}
539
540#customize-controls .customize-info .customize-panel-description p:last-child,
541#customize-controls .customize-info .customize-section-description p:last-child {
542	margin-bottom: 0;
543}
544
545#customize-controls .current-panel .control-section > h3.accordion-section-title {
546	padding-left: 30px;
547}
548
549#customize-theme-controls .control-section,
550#customize-outer-theme-controls .control-section {
551	border: none;
552}
553
554#customize-theme-controls .accordion-section-title,
555#customize-outer-theme-controls .accordion-section-title {
556	color: #50575e;
557	background-color: #fff;
558	border-bottom: 1px solid #dcdcde;
559	border-right: 4px solid #fff;
560	transition:
561		.15s color ease-in-out,
562		.15s background-color ease-in-out,
563		.15s border-color ease-in-out;
564}
565
566.accordion-section-title:has(button.accordion-trigger),
567#customize-controls .current-panel .control-section > h3.accordion-section-title:has(button.accordion-trigger) {
568	padding: 0;
569}
570
571.accordion-section-title button.accordion-trigger {
572	all: unset;
573	width: 100%;
574	padding: 10px 14px 11px 30px;
575	display: flex;
576	align-items: center;
577	box-sizing: border-box;
578}
579
580.accordion-section-title button.accordion-trigger:has(.menu-in-location) {
581	display: block;
582}
583
584@media (prefers-reduced-motion: reduce) {
585	#customize-theme-controls .accordion-section-title,
586	#customize-outer-theme-controls .accordion-section-title {
587		transition: none;
588	}
589}
590
591#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
592	color: #50575e;
593	background-color: #fff;
594	border-right: 4px solid #fff;
595}
596
597#customize-theme-controls .accordion-section-title:after,
598#customize-outer-theme-controls .accordion-section-title:after {
599	content: "\f341";
600	content: "\f345" / '';
601	color: #a7aaad;
602	pointer-events: none;
603}
604
605#customize-theme-controls .accordion-section-content,
606#customize-outer-theme-controls .accordion-section-content {
607	color: #50575e;
608	background: transparent;
609}
610
611#customize-controls .control-section:hover > .accordion-section-title,
612#customize-controls .control-section .accordion-section-title button:hover,
613#customize-controls .control-section.open .accordion-section-title,
614#customize-controls .control-section .accordion-section-title button:focus {
615	color: #2271b1;
616	background: #f6f7f7;
617	border-right-color: #2271b1;
618}
619
620#accordion-section-themes + .control-section {
621	border-top: 1px solid #dcdcde;
622}
623
624.js .control-section:hover .accordion-section-title,
625.js .control-section .accordion-section-title:hover,
626.js .control-section.open .accordion-section-title,
627.js .control-section .accordion-section-title:focus {
628	background: #f6f7f7;
629}
630
631#customize-theme-controls .control-section:hover > .accordion-section-title:after,
632#customize-theme-controls .control-section .accordion-section-title:hover:after,
633#customize-theme-controls .control-section.open .accordion-section-title:after,
634#customize-theme-controls .control-section .accordion-section-title:focus:after,
635#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
636#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
637#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
638#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
639	color: #2271b1;
640}
641
642#customize-theme-controls .control-section.open {
643	border-bottom: 1px solid #f0f0f1;
644}
645
646#customize-theme-controls .control-section.open .accordion-section-title,
647#customize-outer-theme-controls .control-section.open .accordion-section-title {
648	border-bottom-color: #f0f0f1 !important;
649}
650
651#customize-theme-controls .control-section:last-of-type.open,
652#customize-theme-controls .control-section:last-of-type > .accordion-section-title {
653	border-bottom-color: #dcdcde;
654}
655
656#customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
657#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu,
658#customize-theme-controls .control-section-nav_menu_locations .accordion-section-title {
659	border-top: 1px solid #dcdcde;
660}
661
662#customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu {
663	border-top: none;
664}
665
666#customize-theme-controls > ul {
667	margin: 0;
668}
669
670#customize-theme-controls .accordion-section-content {
671	position: absolute;
672	top: 0;
673	right: 100%;
674	width: 100%;
675	margin: 0;
676	padding: 12px;
677	box-sizing: border-box;
678}
679
680#customize-info,
681#customize-theme-controls .customize-pane-parent,
682#customize-theme-controls .customize-pane-child {
683	overflow: visible;
684	width: 100%;
685	margin: 0;
686	padding: 0;
687	box-sizing: border-box;
688	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
689}
690
691@media (prefers-reduced-motion: reduce) {
692	#customize-info,
693	#customize-theme-controls .customize-pane-parent,
694	#customize-theme-controls .customize-pane-child {
695		transition: none;
696	}
697}
698
699#customize-theme-controls .customize-pane-child.skip-transition {
700	transition: none;
701}
702
703#customize-info,
704#customize-theme-controls .customize-pane-parent {
705	position: relative;
706	visibility: visible;
707	height: auto;
708	max-height: none;
709	overflow: auto;
710	transform: none;
711}
712
713#customize-theme-controls .customize-pane-child {
714	position: absolute;
715	top: 0;
716	right: 0;
717	visibility: hidden;
718	height: 0;
719	max-height: none;
720	overflow: hidden;
721	transform: translateX(-100%);
722}
723
724#customize-theme-controls .customize-pane-child.open,
725#customize-theme-controls .customize-pane-child.current-panel {
726	transform: none;
727}
728
729.section-open #customize-theme-controls .customize-pane-parent,
730.in-sub-panel #customize-theme-controls .customize-pane-parent,
731.section-open #customize-info,
732.in-sub-panel #customize-info,
733.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
734	visibility: hidden;
735	height: 0;
736	overflow: hidden;
737	transform: translateX(100%);
738}
739
740.section-open #customize-theme-controls .customize-pane-parent.busy,
741.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
742.section-open #customize-info.busy,
743.in-sub-panel #customize-info.busy,
744.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
745#customize-theme-controls .customize-pane-child.open,
746#customize-theme-controls .customize-pane-child.current-panel,
747#customize-theme-controls .customize-pane-child.busy {
748	visibility: visible;
749	height: auto;
750	overflow: auto;
751}
752
753#customize-theme-controls .customize-pane-child.accordion-section-content,
754#customize-theme-controls .customize-pane-child.accordion-sub-container {
755	display: block;
756	overflow-x: hidden;
757}
758
759#customize-theme-controls .customize-pane-child.accordion-section-content {
760	padding: 12px;
761}
762
763#customize-theme-controls .customize-pane-child.menu li {
764	position: static;
765}
766
767.customize-section-description-container,
768.control-section-nav_menu .customize-section-description-container,
769.control-section-new_menu .customize-section-description-container {
770	margin-bottom: 15px;
771}
772
773.control-section-nav_menu .customize-control,
774.control-section-new_menu .customize-control {
775	/* Override default `margin-bottom` for `.customize-control` */
776	margin-bottom: 0;
777}
778
779.customize-section-title {
780	margin: -12px -12px 0;
781	border-bottom: 1px solid #dcdcde;
782	background: #fff;
783}
784
785div.customize-section-description {
786	margin-top: 22px;
787}
788
789.customize-info div.customize-section-description {
790	margin-top: 0;
791}
792
793div.customize-section-description p:first-child {
794	margin-top: 0;
795}
796
797div.customize-section-description p:last-child {
798	margin-bottom: 0;
799}
800
801#customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
802	border-bottom: 1px solid #dcdcde;
803	padding: 12px;
804}
805
806.ios #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child {
807	padding: 12px 12px 13px;
808}
809
810.customize-section-title h3,
811h3.customize-section-title {
812	padding: 10px 14px 12px 10px;
813	margin: 0;
814	line-height: 21px;
815	color: #50575e;
816}
817
818.accordion-sub-container.control-panel-content {
819	display: none;
820	position: absolute;
821	top: 0;
822	width: 100%;
823}
824
825.accordion-sub-container.control-panel-content.busy {
826	display: block;
827}
828
829.current-panel .accordion-sub-container.control-panel-content {
830	width: 100%;
831}
832
833.customize-controls-close {
834	display: block;
835	position: absolute;
836	top: 0;
837	right: 0;
838	width: 45px;
839	height: 41px;
840	padding: 0 0 0 2px;
841	background: #f0f0f1;
842	border: none;
843	border-top: 4px solid #f0f0f1;
844	border-left: 1px solid #dcdcde;
845	color: #3c434a;
846	text-align: right;
847	cursor: pointer;
848	box-sizing: content-box;
849}
850
851@media (prefers-reduced-motion: no-preference) {
852	.customize-controls-close {
853		transition:
854			color .15s ease-in-out,
855			border-color .15s ease-in-out,
856			background .15s ease-in-out;
857	}
858}
859
860.customize-panel-back,
861.customize-section-back {
862	display: block;
863	float: right;
864	width: 48px;
865	height: 71px;
866	padding: 0 0 0 24px;
867	margin: 0;
868	background: #fff;
869	border: none;
870	border-left: 1px solid #dcdcde;
871	border-right: 4px solid #fff;
872	box-shadow: none;
873	cursor: pointer;
874	transition:
875		color .15s ease-in-out,
876		border-color .15s ease-in-out,
877		background .15s ease-in-out;
878}
879
880.customize-section-back {
881	height: 74px;
882}
883
884.ios .customize-panel-back {
885	display: none;
886}
887
888.ios .expanded.in-sub-panel .customize-panel-back {
889	display: block;
890}
891
892#customize-controls .panel-meta.customize-info .accordion-section-title {
893	margin-right: 48px;
894	border-right: none;
895}
896
897#customize-controls .panel-meta.customize-info .accordion-section-title:hover,
898#customize-controls .cannot-expand:hover .accordion-section-title {
899	background: #fff;
900	color: #50575e;
901	border-right-color: #fff;
902}
903
904.customize-controls-close:focus,
905.customize-controls-close:hover,
906.customize-controls-preview-toggle:focus,
907.customize-controls-preview-toggle:hover {
908	background: #fff;
909	color: #2271b1;
910	border-top-color: #2271b1;
911	box-shadow: none;
912	/* Only visible in Windows High Contrast mode */
913	outline: 1px solid transparent;
914}
915
916#customize-theme-controls .accordion-section-title:focus .customize-action {
917	/* Only visible in Windows High Contrast mode */
918	outline: 1px solid transparent;
919	outline-offset: 1px;
920}
921
922.customize-panel-back:hover,
923.customize-panel-back:focus,
924.customize-section-back:hover,
925.customize-section-back:focus {
926	color: #2271b1;
927	background: #f6f7f7;
928	border-right-color: #2271b1;
929	box-shadow: none;
930	/* Only visible in Windows High Contrast mode */
931	outline: 2px solid transparent;
932	outline-offset: -2px;
933}
934
935.customize-controls-close:before {
936	font: normal 22px/45px dashicons;
937	content: "\f335";
938	content: "\f335" / '';
939	position: relative;
940	top: -3px;
941	right: 13px;
942}
943
944.customize-panel-back:before,
945.customize-section-back:before {
946	font: normal 20px/72px dashicons;
947	content: "\f345";
948	content: "\f341" / '';
949	position: relative;
950	right: 9px;
951}
952
953.wp-full-overlay-sidebar .wp-full-overlay-header {
954	background-color: #f0f0f1;
955	transition: padding ease-in-out .18s;
956}
957
958.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
959	padding-right: 62px;
960}
961
962p.customize-section-description {
963	font-style: normal;
964	margin-top: 22px;
965	margin-bottom: 0;
966}
967
968.customize-section-description ul {
969	margin-right: 1em;
970}
971
972.customize-section-description ul > li {
973	list-style: disc;
974}
975
976.section-description-buttons {
977	text-align: left;
978}
979
980.customize-control {
981	width: 100%;
982	float: right;
983	clear: both;
984	margin-bottom: 12px;
985}
986
987.customize-control input[type="text"],
988.customize-control input[type="password"],
989.customize-control input[type="email"],
990.customize-control input[type="number"],
991.customize-control input[type="search"],
992.customize-control input[type="tel"],
993.customize-control input[type="url"],
994.customize-control input[type="range"] {
995	width: 100%;
996	margin: 0;
997}
998
999.customize-control-hidden {
1000	margin: 0;
1001}
1002
1003.customize-control-textarea textarea {
1004	width: 100%;
1005	resize: vertical;
1006}
1007
1008.customize-control select {
1009	width: 100%;
1010}
1011
1012.customize-control select[multiple] {
1013	height: auto;
1014}
1015
1016.customize-control-title {
1017	display: block;
1018	font-size: 14px;
1019	line-height: 1.75;
1020	font-weight: 600;
1021	margin-bottom: 4px;
1022}
1023
1024.customize-control-description {
1025	display: block;
1026	font-style: italic;
1027	line-height: 1.4;
1028	margin-top: 0;
1029	margin-bottom: 5px;
1030}
1031
1032.customize-section-description a.external-link:after {
1033	font: 16px/11px dashicons;
1034	content: "\f504";
1035	content: "\f504" / '';
1036	top: 3px;
1037	position: relative;
1038	padding-right: 3px;
1039	display: inline-block;
1040	text-decoration: none;
1041}
1042
1043.customize-control-color .color-picker,
1044.customize-control-upload div {
1045	line-height: 28px;
1046}
1047
1048.customize-control .customize-inside-control-row {
1049	line-height: 1.6;
1050	display: block;
1051	margin-right: 24px;
1052	padding-top: 6px;
1053	padding-bottom: 6px;
1054}
1055
1056.customize-control-radio input,
1057.customize-control-checkbox input,
1058.customize-control-nav_menu_auto_add input {
1059	margin-left: 4px;
1060	margin-right: -24px;
1061}
1062
1063.customize-control-radio {
1064	padding: 5px 0 10px;
1065}
1066
1067.customize-control-radio .customize-control-title {
1068	margin-bottom: 0;
1069	line-height: 1.6;
1070}
1071
1072.customize-control-radio .customize-control-title + .customize-control-description {
1073	margin-top: 7px;
1074}
1075
1076.customize-control-radio label,
1077.customize-control-checkbox label {
1078	vertical-align: top;
1079}
1080
1081.customize-control .attachment-thumb.type-icon {
1082	float: right;
1083	margin: 10px;
1084	width: auto;
1085}
1086
1087.customize-control .attachment-title {
1088	font-weight: 600;
1089	margin: 0;
1090	padding: 5px 10px;
1091}
1092
1093.customize-control .attachment-meta {
1094	white-space: nowrap;
1095	overflow: hidden;
1096	text-overflow: ellipsis;
1097	margin: 0;
1098	padding: 0 10px;
1099}
1100
1101.customize-control .attachment-meta-title {
1102	padding-top: 7px;
1103}
1104
1105/* Remove descender space. */
1106.customize-control .thumbnail-image,
1107.customize-control-header .current,
1108.customize-control .wp-media-wrapper.wp-video {
1109	line-height: 0;
1110}
1111
1112
1113.customize-control .thumbnail-image img {
1114	cursor: pointer;
1115}
1116
1117#customize-controls .thumbnail-audio .thumbnail {
1118	max-width: 64px;
1119	max-height: 64px;
1120	margin: 10px;
1121	float: right;
1122}
1123
1124#available-menu-items .accordion-section-content .new-content-item-wrapper,
1125.customize-control-dropdown-pages .new-content-item-wrapper {
1126	width: calc(100% - 30px);
1127	padding: 8px 15px;
1128	position: absolute;
1129	bottom: 0;
1130	z-index: 10;
1131	background: #f0f0f1;
1132}
1133
1134.customize-control-dropdown-pages .new-content-item-wrapper {
1135	width: 100%;
1136	padding: 0;
1137	position: static;
1138}
1139
1140#available-menu-items .accordion-section-content .new-content-item,
1141.customize-control-dropdown-pages .new-content-item {
1142	display: flex;
1143}
1144
1145.customize-control-dropdown-pages .new-content-item {
1146	width: 100%;
1147	padding: 5px 1px 5px 0;
1148	position: relative;
1149}
1150
1151.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
1152	padding: 0;
1153}
1154
1155.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item label {
1156	line-height: 1.6;
1157}
1158
1159#available-menu-items .new-content-item .create-item-input,
1160.customize-control-dropdown-pages .new-content-item .create-item-input {
1161	flex-grow: 10;
1162}
1163
1164#available-menu-items .new-content-item .add-content,
1165.customize-control-dropdown-pages .new-content-item .add-content {
1166	margin: 2px 6px 2px 0;
1167	flex-grow: 1;
1168}
1169
1170.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
1171	border: 1px solid #d63638;
1172}
1173
1174.customize-control-dropdown-pages .add-new-toggle {
1175	margin-right: 1px;
1176	font-weight: 600;
1177	line-height: 2.2;
1178}
1179
1180#customize-preview iframe {
1181	width: 100%;
1182	height: 100%;
1183	position: absolute;
1184}
1185#customize-preview iframe + iframe {
1186	visibility: hidden;
1187}
1188
1189.wp-full-overlay-sidebar {
1190	background: #f0f0f1;
1191	border-left: 1px solid #dcdcde;
1192}
1193
1194
1195/**
1196 * Notifications
1197 */
1198
1199#customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
1200	margin: 4px 0 8px;
1201	padding: 0;
1202	cursor: default;
1203}
1204
1205#customize-controls .customize-control-widget_form.has-error .widget .widget-top,
1206.customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle {
1207	box-shadow: inset 0 0 0 2px #d63638;
1208	transition: .15s box-shadow linear;
1209}
1210
1211#customize-controls .customize-control-notifications-container li.notice {
1212	list-style: none;
1213	margin: 0 0 6px;
1214	padding: 9px 14px;
1215	overflow: hidden;
1216}
1217#customize-controls .customize-control-notifications-container .notice.is-dismissible {
1218	padding-left: 38px;
1219}
1220
1221.customize-control-notifications-container li.notice:last-child {
1222	margin-bottom: 0;
1223}
1224
1225#customize-controls .customize-control-nav_menu_item .customize-control-notifications-container {
1226	margin-top: 0;
1227}
1228
1229#customize-controls .customize-control-widget_form .customize-control-notifications-container {
1230	margin-top: 8px;
1231}
1232
1233.customize-control-text.has-error input {
1234	outline: 2px solid #d63638;
1235}
1236
1237#customize-controls #customize-notifications-area {
1238	position: absolute;
1239	top: 46px;
1240	width: 100%;
1241	border-bottom: 1px solid #dcdcde;
1242	display: block;
1243	padding: 0;
1244	margin: 0;
1245}
1246
1247.wp-full-overlay.collapsed #customize-controls #customize-notifications-area {
1248	display: none !important;
1249}
1250
1251#customize-controls #customize-notifications-area:not(.has-overlay-notifications),
1252#customize-controls .customize-section-title > .customize-control-notifications-container:not(.has-overlay-notifications),
1253#customize-controls .panel-meta > .customize-control-notifications-container:not(.has-overlay-notifications) {
1254	max-height: 210px;
1255	overflow-x: hidden;
1256	overflow-y: auto;
1257}
1258
1259#customize-controls #customize-notifications-area > ul,
1260#customize-controls #customize-notifications-area .notice,
1261#customize-controls .panel-meta > .customize-control-notifications-container,
1262#customize-controls .panel-meta > .customize-control-notifications-container .notice,
1263#customize-controls .customize-section-title > .customize-control-notifications-container,
1264#customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1265	margin: 0;
1266}
1267#customize-controls .panel-meta > .customize-control-notifications-container,
1268#customize-controls .customize-section-title > .customize-control-notifications-container {
1269	border-top: 1px solid #dcdcde;
1270}
1271#customize-controls #customize-notifications-area .notice,
1272#customize-controls .panel-meta > .customize-control-notifications-container .notice,
1273#customize-controls .customize-section-title > .customize-control-notifications-container .notice {
1274	padding: 9px 14px;
1275}
1276#customize-controls #customize-notifications-area .notice.is-dismissible,
1277#customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible,
1278#customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible {
1279	padding-left: 38px;
1280}
1281#customize-controls #customize-notifications-area .notice + .notice,
1282#customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice,
1283#customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice {
1284	margin-top: 1px;
1285}
1286
1287@keyframes customize-fade-in {
1288	0%   { opacity: 0; }
1289	100% { opacity: 1; }
1290}
1291
1292#customize-controls .notice.notification-overlay,
1293#customize-controls #customize-notifications-area .notice.notification-overlay {
1294	margin: 0;
1295	border-right: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */
1296}
1297
1298#customize-controls .customize-control-notifications-container.has-overlay-notifications {
1299	animation: customize-fade-in 0.5s;
1300	z-index: 30;
1301}
1302
1303/* Note: Styles for this are also defined in themes.css */
1304#customize-controls #customize-notifications-area .notice.notification-overlay .notification-message {
1305	clear: both;
1306	color: #1d2327;
1307	font-size: 18px;
1308	font-style: normal;
1309	margin: 0;
1310	padding: 2em 0;
1311	text-align: center;
1312	width: 100%;
1313	display: block;
1314	top: 50%;
1315	position: relative;
1316}
1317
1318/* Style for custom settings */
1319
1320/**
1321 * Static front page
1322 */
1323
1324#customize-control-show_on_front.has-error {
1325	margin-bottom: 0;
1326}
1327#customize-control-show_on_front.has-error .customize-control-notifications-container {
1328	margin-top: 12px;
1329}
1330
1331/**
1332 * Dropdowns
1333 */
1334
1335.accordion-section .dropdown {
1336	float: right;
1337	display: block;
1338	position: relative;
1339	cursor: pointer;
1340}
1341
1342.accordion-section .dropdown-content {
1343	overflow: hidden;
1344	float: right;
1345	min-width: 30px;
1346	height: 16px;
1347	line-height: 16px;
1348	margin-left: 16px;
1349	padding: 4px 5px;
1350	border: 2px solid #f0f0f1;
1351	-webkit-user-select: none;
1352	user-select: none;
1353}
1354
1355/* @todo maybe no more used? */
1356.customize-control .dropdown-arrow {
1357	position: absolute;
1358	top: 0;
1359	bottom: 0;
1360	left: 0;
1361	width: 20px;
1362	background: #f0f0f1;
1363}
1364
1365.customize-control .dropdown-arrow:after {
1366	content: "\f140";
1367	content: "\f140" / '';
1368	font: normal 20px/1 dashicons;
1369	display: block;
1370	padding: 0;
1371	text-indent: 0;
1372	text-align: center;
1373	position: relative;
1374	-webkit-font-smoothing: antialiased;
1375	-moz-osx-font-smoothing: grayscale;
1376	text-decoration: none !important;
1377	color: #2c3338;
1378}
1379
1380.customize-control .dropdown-status {
1381	color: #2c3338;
1382	background: #f0f0f1;
1383	display: none;
1384	max-width: 112px;
1385}
1386
1387.customize-control-color .dropdown {
1388	margin-left: 5px;
1389	margin-bottom: 5px;
1390}
1391
1392.customize-control-color .dropdown .dropdown-content {
1393	background-color: #50575e;
1394	border: 1px solid rgba(0, 0, 0, 0.15);
1395}
1396
1397.customize-control-color .dropdown:hover .dropdown-content {
1398	border-color: rgba(0, 0, 0, 0.25);
1399}
1400
1401/**
1402 * iOS can't scroll iframes,
1403 * instead it expands the iframe size to match the size of the content
1404 */
1405
1406.ios .wp-full-overlay {
1407	position: relative;
1408}
1409
1410.ios #customize-controls .wp-full-overlay-sidebar-content {
1411	-webkit-overflow-scrolling: touch;
1412}
1413
1414/* Media controls */
1415
1416.customize-control .actions .button {
1417	margin-top: 12px;
1418}
1419
1420.customize-control-header .actions,
1421.customize-control-header .uploaded {
1422	margin-bottom: 18px;
1423}
1424
1425.customize-control-header .uploaded button:not(.random),
1426.customize-control-header .default button:not(.random) {
1427	width: 100%;
1428	padding: 0;
1429	margin: 0;
1430	background: none;
1431	border: none;
1432	color: inherit;
1433	cursor: pointer;
1434}
1435
1436.customize-control-header button img {
1437	display: block;
1438}
1439
1440.customize-control .attachment-media-view .remove-button,
1441.customize-control .attachment-media-view .default-button,
1442.customize-control .attachment-media-view .upload-button,
1443.customize-control-header button.new,
1444.customize-control-header button.remove {
1445	width: auto;
1446	height: auto;
1447	white-space: normal;
1448}
1449
1450.customize-control .attachment-media-view .upload-button {
1451	width: 100%;
1452	padding: 9px 0;
1453}
1454
1455.customize-control .attachment-media-view .upload-button.control-focus {
1456	width: auto;
1457	padding: 0 10px;
1458}
1459
1460.customize-control.customize-control-header .actions .upload-button.button.new {
1461	width: 100%;
1462	padding: 9px 0;
1463}
1464
1465.customize-control .attachment-media-view .thumbnail,
1466.customize-control-header .current .container {
1467	overflow: hidden;
1468}
1469
1470.customize-control .attachment-media-view .placeholder,
1471.customize-control .attachment-media-view .button-add-media,
1472.customize-control-header .placeholder {
1473	width: 100%;
1474	position: relative;
1475	text-align: center;
1476	cursor: default;
1477	border: 1px dashed #c3c4c7;
1478	box-sizing: border-box;
1479	padding: 9px 0;
1480	line-height: 1.6;
1481}
1482
1483.customize-control .attachment-media-view .button-add-media {
1484	cursor: pointer;
1485	background-color: #f0f0f1;
1486	color: #2c3338;
1487}
1488
1489.customize-control .attachment-media-view .button-add-media:hover {
1490	background-color: #fff;
1491}
1492
1493.customize-control .attachment-media-view .button-add-media:focus {
1494	background-color: #fff;
1495	border-color: #3582c4;
1496	border-style: solid;
1497	box-shadow: 0 0 0 1px #3582c4;
1498	/* Only visible in Windows High Contrast mode */
1499	outline: 2px solid transparent;
1500}
1501
1502.customize-control-header .inner {
1503	display: none;
1504	position: absolute;
1505	width: 100%;
1506	color: #50575e;
1507	white-space: nowrap;
1508	text-overflow: ellipsis;
1509	overflow: hidden;
1510}
1511
1512.customize-control-header .inner,
1513.customize-control-header .inner .dashicons {
1514	line-height: 20px;
1515	top: 8px;
1516}
1517
1518.customize-control-header .list .inner,
1519.customize-control-header .list .inner .dashicons {
1520	top: 9px;
1521}
1522
1523.customize-control-header .header-view {
1524	position: relative;
1525	width: 100%;
1526	margin-bottom: 12px;
1527}
1528
1529.customize-control-header .header-view:last-child {
1530	margin-bottom: 0;
1531}
1532
1533/* Convoluted, but 'outline' support isn't good enough yet */
1534.customize-control-header .header-view:after {
1535	border: 0;
1536}
1537
1538.customize-control-header .header-view.selected .choice:focus {
1539	outline: none;
1540}
1541
1542.customize-control-header .header-view.selected:after {
1543	content: "";
1544	position: absolute;
1545	height: auto;
1546	top: 0;
1547	right: 0;
1548	bottom: 0;
1549	left: 0;
1550	border: 4px solid #72aee6;
1551	border-radius: 2px;
1552}
1553
1554.customize-control-header .header-view.button.selected {
1555	border: 0;
1556}
1557
1558/* Header control: overlay "close" button */
1559
1560.customize-control-header .uploaded .header-view .close {
1561	font-size: 20px;
1562	color: #fff;
1563	background: #50575e;
1564	background: rgba(0, 0, 0, 0.5);
1565	position: absolute;
1566	top: 10px;
1567	right: -999px;
1568	z-index: 1;
1569	width: 26px;
1570	height: 26px;
1571	cursor: pointer;
1572}
1573
1574.customize-control-header .header-view:hover .close,
1575.customize-control-header .header-view .close:focus {
1576	right: auto;
1577	left: 10px;
1578}
1579
1580.customize-control-header .header-view .close:focus {
1581	outline: 1px solid #4f94d4;
1582}
1583
1584/* Header control: randomiz(s)er */
1585
1586.customize-control-header .random.placeholder {
1587	cursor: pointer;
1588	border-radius: 2px;
1589	height: 40px;
1590}
1591
1592.customize-control-header button.random {
1593	width: 100%;
1594	height: auto;
1595	min-height: 40px;
1596	white-space: normal;
1597}
1598
1599.customize-control-header button.random .dice {
1600	margin-top: 4px;
1601}
1602
1603.customize-control-header .placeholder:hover .dice,
1604.customize-control-header .header-view:hover > button.random .dice {
1605	animation: dice-color-change 3s infinite;
1606}
1607
1608.button-see-me {
1609	animation: bounce .7s 1;
1610	transform-origin: center bottom;
1611}
1612
1613@keyframes bounce {
1614	from, 20%, 53%, 80%, to {
1615		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
1616		transform: translate3d(0,0,0);
1617	}
1618
1619	40%, 43% {
1620		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1621		transform: translate3d(0, -12px, 0);
1622	}
1623
1624	70% {
1625		animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1626		transform: translate3d(0, -6px, 0);
1627	}
1628
1629	90% {
1630		transform: translate3d(0,-1px,0);
1631	}
1632}
1633
1634.customize-control-header .choice {
1635	position: relative;
1636	display: block;
1637	margin-bottom: 9px;
1638}
1639
1640.customize-control-header .choice:focus {
1641	box-shadow: 0 0 0 2px #2271b1;
1642	/* Only visible in Windows High Contrast mode */
1643	outline: 2px solid transparent;
1644}
1645
1646.customize-control-header .uploaded div:last-child > .choice {
1647	margin-bottom: 0;
1648}
1649
1650.customize-control .attachment-media-view .thumbnail-image img,
1651.customize-control-header img {
1652	max-width: 100%;
1653}
1654
1655.customize-control .attachment-media-view .remove-button,
1656.customize-control .attachment-media-view .default-button,
1657.customize-control-header .remove {
1658	margin-left: 8px;
1659}
1660
1661/* Background position control */
1662.customize-control-background_position .background-position-control .button-group {
1663	display: block;
1664}
1665
1666/**
1667 * Code Editor Control and Custom CSS Section
1668 *
1669 * Modifications to the Section Container to make the textarea full-width and
1670 * full-height, if the control is the only control in the section.
1671 */
1672
1673.customize-control-code_editor textarea {
1674	width: 100%;
1675	font-family: Consolas, Monaco, monospace;
1676	font-size: 12px;
1677	padding: 6px 8px;
1678	tab-size: 2;
1679}
1680.customize-control-code_editor textarea,
1681.customize-control-code_editor .CodeMirror {
1682	height: 14em;
1683}
1684
1685#customize-controls .customize-section-description-container.section-meta.customize-info {
1686	border-bottom: none;
1687}
1688
1689#sub-accordion-section-custom_css .customize-control-notifications-container {
1690	margin-bottom: 15px;
1691}
1692
1693#customize-control-custom_css textarea {
1694	display: block;
1695	height: 500px;
1696}
1697
1698.customize-section-description-container + #customize-control-custom_css .customize-control-title {
1699	margin-right: 12px;
1700}
1701
1702.customize-section-description-container + #customize-control-custom_css:last-child textarea {
1703	border-left: 0;
1704	border-right: 0;
1705	height: calc( 100vh - 185px );
1706	resize: none;
1707}
1708
1709.customize-section-description-container + #customize-control-custom_css:last-child {
1710	margin-right: -12px;
1711	width: 299px;
1712	width: calc( 100% + 24px );
1713	margin-bottom: -12px;
1714}
1715
1716.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
1717	height: calc( 100vh - 185px );
1718}
1719
1720.CodeMirror-lint-tooltip,
1721.CodeMirror-hints {
1722	z-index: 500000 !important;
1723}
1724
1725.customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
1726	margin-right: 12px;
1727	margin-left: 12px;
1728}
1729
1730.theme-browser .theme.active .theme-actions,
1731.wp-customizer .theme-browser .theme .theme-actions {
1732	padding: 9px 15px;
1733	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1734}
1735
1736@media screen and (max-width: 640px) {
1737	.customize-section-description-container + #customize-control-custom_css:last-child {
1738		margin-left: 0;
1739	}
1740
1741	.customize-section-description-container + #customize-control-custom_css:last-child textarea {
1742		height: calc( 100vh - 140px );
1743	}
1744}
1745
1746/**
1747 * Themes
1748 */
1749
1750#customize-theme-controls .control-panel-themes {
1751	border-bottom: none;
1752}
1753
1754#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
1755#customize-theme-controls .control-panel-themes > .accordion-section-title {
1756	cursor: default;
1757	background: #fff;
1758	color: #50575e;
1759	border-top: 1px solid #dcdcde;
1760	border-bottom: 1px solid #dcdcde;
1761	border-right: none;
1762	border-left: none;
1763	margin: 0 0 15px;
1764	padding: 12px 15px 15px 100px; /* Space for the button */
1765}
1766
1767#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
1768#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
1769	border-top: 0;
1770}
1771
1772#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
1773#customize-theme-controls .control-section-themes > .accordion-section-title {
1774	margin: 0 0 15px;
1775}
1776
1777#customize-controls .customize-themes-panel .accordion-section-title:hover,
1778#customize-controls .customize-themes-panel .accordion-section-title {
1779	margin: 15px -8px;
1780}
1781
1782#customize-controls .control-section-themes .accordion-section-title,
1783#customize-controls .customize-themes-panel .accordion-section-title {
1784	padding-left: 100px; /* Space for the button */
1785}
1786
1787.control-panel-themes .accordion-section-title span.customize-action,
1788#customize-controls .customize-section-title span.customize-action,
1789#customize-controls .control-section-themes .accordion-section-title span.customize-action,
1790#customize-controls .customize-section-title span.customize-action {
1791	font-size: 13px;
1792	display: block;
1793	font-weight: 400;
1794}
1795
1796#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
1797	position: absolute;
1798	left: 10px;
1799	top: 50%;
1800	margin-top: -14px;
1801	font-weight: 400;
1802}
1803
1804#customize-notifications-area .notification-message button.switch-to-editor {
1805	display: block;
1806	margin-top: 6px;
1807	font-weight: 400;
1808}
1809
1810#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
1811	display: none;
1812}
1813
1814.control-panel-themes .customize-themes-full-container {
1815	position: fixed;
1816	top: 0;
1817	right: 0;
1818	transition: .18s right ease-in-out;
1819	margin: 0 300px 0 0;
1820	padding: 71px 0 25px;
1821	overflow-y: scroll;
1822	width: calc(100% - 300px);
1823	height: calc(100% - 96px);
1824	background: #f0f0f1;
1825	z-index: 20;
1826}
1827
1828@media (prefers-reduced-motion: reduce) {
1829	.control-panel-themes .customize-themes-full-container {
1830		transition: none;
1831	}
1832}
1833
1834@media screen and (min-width: 1670px) {
1835	.control-panel-themes .customize-themes-full-container {
1836		width: 82%;
1837		left: 0;
1838		right: initial;
1839	}
1840}
1841
1842.modal-open .control-panel-themes .customize-themes-full-container {
1843	overflow-y: visible;
1844}
1845
1846/* Animations for opening the themes panel */
1847#customize-save-button-wrapper,
1848#customize-header-actions .spinner,
1849#customize-header-actions .customize-controls-preview-toggle {
1850	transition: .18s margin ease-in-out;
1851}
1852
1853#customize-footer-actions,
1854#customize-footer-actions .collapse-sidebar {
1855	bottom: 0;
1856	transition: .18s bottom ease-in-out;
1857}
1858
1859.in-themes-panel:not(.animating) #customize-header-actions .spinner,
1860.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
1861.in-themes-panel:not(.animating) #customize-preview,
1862.in-themes-panel:not(.animating) #customize-footer-actions {
1863	visibility: hidden;
1864}
1865
1866.wp-full-overlay.in-themes-panel {
1867	background: #f0f0f1; /* Prevents a black flash when fading in the panel */
1868}
1869
1870.in-themes-panel #customize-save-button-wrapper,
1871.in-themes-panel #customize-header-actions .spinner,
1872.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
1873	margin-top: -46px; /* Height of header actions bar */
1874}
1875
1876.in-themes-panel #customize-footer-actions,
1877.in-themes-panel #customize-footer-actions .collapse-sidebar {
1878	bottom: -45px;
1879}
1880
1881/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
1882.in-themes-panel.animating .control-panel-themes .filter-themes-count {
1883	display: none;
1884}
1885
1886.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
1887	bottom: 0;
1888}
1889
1890.themes-filter-bar .feature-filter-toggle:before {
1891	content: "\f111";
1892	content: "\f111" / '';
1893	margin: 0 0 0 5px;
1894	font: normal 16px/1 dashicons;
1895	vertical-align: text-bottom;
1896	-webkit-font-smoothing: antialiased;
1897	-moz-osx-font-smoothing: grayscale;
1898}
1899
1900.themes-filter-bar .feature-filter-toggle.open {
1901	background: #f0f0f1;
1902	border-color: #8c8f94;
1903	box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1904}
1905
1906.themes-filter-bar .feature-filter-toggle .filter-count-filters {
1907	display: none;
1908}
1909
1910.filter-drawer {
1911	box-sizing: border-box;
1912	width: 100%;
1913	position: absolute;
1914	top: 46px;
1915	right: 0;
1916	padding: 25px 25px 25px 0;
1917	border-top: 0;
1918	margin: 0;
1919	background: #f0f0f1;
1920	border-bottom: 1px solid #dcdcde;
1921}
1922
1923.filter-drawer .filter-group {
1924	margin: 0 0 0 25px;
1925	width: calc( (100% - 75px) / 3);
1926	min-width: 200px;
1927	max-width: 320px;
1928}
1929
1930/* Adds a delay before fading in to avoid it "jumping" */
1931@keyframes themes-fade-in {
1932	0% {
1933		opacity: 0;
1934	}
1935	50% {
1936		opacity: 0;
1937	}
1938	100% {
1939		opacity: 1;
1940	}
1941}
1942
1943.control-panel-themes .customize-themes-full-container.animate {
1944	animation: .6s themes-fade-in 1;
1945}
1946
1947.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
1948	animation: .6s themes-fade-in 1;
1949}
1950
1951.control-panel-themes .filter-themes-count .themes-displayed {
1952	font-weight: 600;
1953	color: #50575e;
1954}
1955
1956.customize-themes-notifications {
1957	margin: 0;
1958}
1959
1960.control-panel-themes .customize-themes-notifications .notice {
1961	margin: 0 0 25px;
1962}
1963
1964.customize-themes-full-container .customize-themes-section {
1965	display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1966	overflow: hidden;
1967}
1968
1969.customize-themes-full-container .customize-themes-section.current-section {
1970	display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1971}
1972
1973.control-section .customize-section-text-before {
1974	padding: 0 15px 8px 0;
1975	margin: 15px 0 0;
1976	line-height: 16px;
1977	border-bottom: 1px solid #dcdcde;
1978	color: #50575e;
1979}
1980
1981.control-panel-themes .customize-themes-section-title {
1982	width: 100%;
1983	background: #fff;
1984	box-shadow: none;
1985	outline: none;
1986	border-top: none;
1987	border-bottom: 1px solid #dcdcde;
1988	border-right: 4px solid #fff;
1989	border-left: none;
1990	cursor: pointer;
1991	padding: 10px 15px;
1992	position: relative;
1993	text-align: right;
1994	font-size: 14px;
1995	font-weight: 600;
1996	color: #50575e;
1997	text-shadow: none;
1998}
1999
2000.control-panel-themes #accordion-section-installed_themes {
2001	border-top: 1px solid #dcdcde;
2002}
2003
2004.control-panel-themes .theme-section {
2005	margin: 0;
2006	position: relative;
2007}
2008
2009.control-panel-themes .customize-themes-section-title:focus,
2010.control-panel-themes .customize-themes-section-title:hover {
2011	border-right-color: #2271b1;
2012	color: #2271b1;
2013	background: #f6f7f7;
2014}
2015
2016.customize-themes-section-title:not(.selected):after {
2017	content: "";
2018	display: block;
2019	position: absolute;
2020	top: 9px;
2021	left: 15px;
2022	width: 18px;
2023	height: 18px;
2024	border-radius: 100%;
2025	border: 1px solid #c3c4c7;
2026	background: #fff;
2027}
2028
2029.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
2030	content: "\f147";
2031	content: "\f147" / '';
2032	font: 16px/1 dashicons;
2033	box-sizing: border-box;
2034	width: 20px;
2035	height: 20px;
2036	padding: 3px 1px 1px 3px; /* Re-align the icon to the smaller grid */
2037	border-radius: 100%;
2038	position: absolute;
2039	top: 9px;
2040	left: 15px;
2041	background: #2271b1;
2042	color: #fff;
2043}
2044
2045.control-panel-themes .customize-themes-section-title.selected {
2046	color: #2271b1;
2047}
2048
2049#customize-theme-controls .themes.accordion-section-content {
2050	position: relative;
2051	right: 0;
2052	padding: 0;
2053	width: 100%;
2054}
2055
2056.loading .customize-themes-section .spinner {
2057	display: block;
2058	visibility: visible;
2059	position: relative;
2060	clear: both;
2061	width: 20px;
2062	height: 20px;
2063	right: calc(50% - 10px);
2064	float: none;
2065	margin-top: 50px;
2066}
2067
2068.customize-themes-section .no-themes,
2069.customize-themes-section .no-themes-local {
2070	display: none;
2071}
2072
2073.themes-section-installed_themes .theme .notice-success:not(.updated-message) {
2074	display: none; /* Hide "installed" notice on installed themes tab. */
2075}
2076
2077.customize-control-theme .theme {
2078	width: 100%;
2079	margin: 0;
2080	border: 1px solid #dcdcde;
2081	background: #fff;
2082}
2083
2084.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
2085	background: #fff;
2086	border: none;
2087}
2088
2089.customize-control.customize-control-theme { /* override most properties on .customize-control */
2090	box-sizing: border-box;
2091	width: 25%;
2092	max-width: 600px; /* Max. screenshot size / 2 */
2093	margin: 0 0 25px 25px;
2094	padding: 0;
2095	clear: none;
2096}
2097
2098/* 5 columns above 2100px */
2099@media screen and (min-width: 2101px) {
2100	.customize-control.customize-control-theme {
2101		width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
2102	}
2103}
2104
2105/* 4 columns up to 2100px */
2106@media screen and (min-width: 1601px) and (max-width: 2100px) {
2107	.customize-control.customize-control-theme {
2108		width: calc( ( 100% - 100px ) / 4 - 1px );
2109	}
2110}
2111
2112/* 3 columns up to 1600px */
2113@media screen and (min-width: 1201px) and (max-width: 1600px) {
2114	.customize-control.customize-control-theme {
2115		width: calc( ( 100% - 75px ) / 3 - 1px );
2116	}
2117}
2118
2119/* 2 columns up to 1200px */
2120@media screen and (min-width: 851px) and (max-width: 1200px) {
2121	.customize-control.customize-control-theme {
2122		width: calc( ( 100% - 50px ) / 2 - 1px );
2123
2124	}
2125}
2126
2127/* 1 column up to 850 px */
2128@media screen and (max-width: 850px) {
2129	.customize-control.customize-control-theme {
2130		width: 100%;
2131	}
2132}
2133
2134.wp-customizer .theme-browser .themes {
2135	padding: 0 25px 25px 0;
2136	transition: .18s margin-top linear;
2137}
2138
2139.wp-customizer .theme-browser .theme .theme-actions {
2140	opacity: 1;
2141}
2142
2143#customize-controls h3.theme-name {
2144	font-size: 15px;
2145}
2146
2147#customize-controls .theme-overlay .theme-name {
2148	font-size: 32px;
2149}
2150
2151.customize-preview-header.themes-filter-bar {
2152	position: fixed;
2153	top: 0;
2154	right: 300px;
2155	width: calc(100% - 300px);
2156	height: 46px;
2157	background: #f0f0f1;
2158	z-index: 10;
2159	padding: 6px 25px;
2160	box-sizing: border-box;
2161	border-bottom: 1px solid #dcdcde;
2162}
2163.customize-preview-header.themes-filter-bar,
2164.customize-preview-header.themes-filter-bar .search-form {
2165	display: flex;
2166	align-items: center;
2167	gap: 10px;
2168	flex-wrap: wrap;
2169}
2170
2171.customize-preview-header.themes-filter-bar .search-form-input {
2172	position: relative;
2173}
2174
2175.customize-preview-header .filter-themes-wrapper {
2176	display: grid;
2177	align-items: center;
2178	gap: 10px;
2179	grid-template-columns: auto 1fr;
2180}
2181
2182.customize-preview-header .filter-themes-wrapper .filter-themes-count {
2183	justify-self: end;
2184}
2185
2186@media screen and (min-width: 1670px) {
2187	.customize-preview-header.themes-filter-bar {
2188		width: 82%;
2189		left: 0;
2190		right: initial;
2191	}
2192}
2193
2194.themes-filter-bar .themes-filter-container {
2195	margin: 0;
2196	padding: 0;
2197	display: flex;
2198	align-items: center;
2199	gap: 10px;
2200}
2201
2202.themes-filter-bar .wp-filter-search {
2203	line-height: 1.8;
2204	padding: 6px 30px 6px 10px;
2205	max-width: 100%;
2206	width: 40%;
2207	min-width: 300px;
2208	height: 32px;
2209	margin: 1px 0;
2210	top: 0;
2211	right: 0;
2212}
2213
2214/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
2215   current length of .org feature filters assuming translations do not wrap lines. */
2216@media screen and (max-height: 540px), screen and (max-width: 1018px) {
2217	.customize-preview-header.themes-filter-bar {
2218		position: relative;
2219		right: 0;
2220		width: 100%;
2221		margin: 0 0 25px;
2222	}
2223	.filter-drawer {
2224		top: 46px;
2225	}
2226	.wp-customizer .theme-browser .themes {
2227		padding: 0 25px 25px 0;
2228		overflow: hidden;
2229	}
2230
2231	.control-panel-themes .customize-themes-full-container {
2232		margin-top: 0;
2233		padding: 0;
2234		height: 100%;
2235		width: calc(100% - 300px);
2236	}
2237}
2238
2239@media screen and (max-width: 1018px) {
2240	.filter-drawer .filter-group {
2241		width: calc( (100% - 50px) / 2);
2242	}
2243}
2244
2245@media screen and (max-width: 960px) {
2246	.customize-preview-header.themes-filter-bar {
2247		height: 96px;
2248	}
2249}
2250
2251@media screen and (max-width: 900px) {
2252	.themes-filter-bar .wp-filter-search {
2253		width: 100%;
2254		margin: 0;
2255		min-width: 200px;
2256	}
2257
2258	.customize-preview-header.themes-filter-bar,
2259	.customize-preview-header.themes-filter-bar .search-form
2260	.themes-filter-bar .themes-filter-container {
2261		display: grid;
2262		gap: 4px;
2263	}
2264
2265	.customize-preview-header.themes-filter-bar .search-form-input {
2266		display: flex;
2267		flex-grow: 1;
2268	}
2269
2270	.filter-drawer {
2271		top: 86px;
2272	}
2273
2274	.control-panel-themes .filter-themes-count {
2275		float: right;
2276	}
2277}
2278
2279@media screen and (max-width: 792px) {
2280	.filter-drawer .filter-group {
2281		width: calc( 100% - 25px);
2282	}
2283}
2284
2285.control-panel-themes .customize-themes-mobile-back {
2286	display: none;
2287}
2288
2289/* Mobile - toggle between themes and filters */
2290@media screen and (max-width: 600px) {
2291
2292	.filter-drawer {
2293		top: 132px;
2294	}
2295
2296	.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
2297		display: block;
2298		float: left;
2299	}
2300
2301	.control-panel-themes .customize-themes-full-container {
2302		width: 100%;
2303		margin: 0;
2304		padding-top: 46px;
2305		height: calc(100% - 46px);
2306		z-index: 1;
2307		display: none;
2308	}
2309
2310	.showing-themes .control-panel-themes .customize-themes-full-container {
2311		display: block;
2312	}
2313
2314	.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
2315		display: block;
2316		position: fixed;
2317		top: 0;
2318		right: 0;
2319		background: #f0f0f1;
2320		color: #3c434a;
2321		border-radius: 0;
2322		box-shadow: none;
2323		border: none;
2324		height: 46px;
2325		width: 100%;
2326		z-index: 10;
2327		text-align: right;
2328		text-shadow: none;
2329		border-bottom: 1px solid #dcdcde;
2330		border-right: 4px solid transparent;
2331		margin: 0;
2332		padding: 0;
2333		font-size: 0;
2334		overflow: hidden;
2335	}
2336
2337	.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
2338		right: 0;
2339		top: 0;
2340		height: 46px;
2341		width: 26px;
2342		display: block;
2343		line-height: 2.3;
2344		padding: 0 8px;
2345		border-left: 1px solid #dcdcde;
2346	}
2347
2348	.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
2349	.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
2350		color: #2271b1;
2351		background: #f6f7f7;
2352		border-right-color: #2271b1;
2353		box-shadow: none;
2354		/* Only visible in Windows High Contrast mode */
2355		outline: 2px solid transparent;
2356		outline-offset: -2px;
2357	}
2358
2359	.showing-themes #customize-header-actions {
2360		display: none;
2361	}
2362
2363	#customize-controls {
2364		width: 100%;
2365	}
2366}
2367
2368/* Details View */
2369.wp-customizer .theme-overlay {
2370	display: none;
2371}
2372
2373.wp-customizer.modal-open .theme-overlay {
2374	position: fixed;
2375	right: 0;
2376	top: 0;
2377	left: 0;
2378	bottom: 0;
2379	z-index: 109;
2380}
2381
2382/* Avoid a z-index war by resetting elements that should be under the overlay.
2383   This is likely required because of the way that sections and panels are positioned. */
2384.wp-customizer.modal-open #customize-header-actions,
2385.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
2386.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
2387	z-index: -1;
2388}
2389
2390.wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content {
2391	overflow: visible;
2392}
2393
2394.wp-customizer .theme-overlay .theme-backdrop {
2395	background: rgba(240, 240, 241, 0.75);
2396	position: fixed;
2397	z-index: 110;
2398}
2399
2400.wp-customizer .theme-overlay .star-rating {
2401	float: right;
2402	margin-left: 8px;
2403}
2404
2405.wp-customizer .theme-rating .num-ratings {
2406	line-height: 20px;
2407}
2408
2409.wp-customizer .theme-overlay .theme-wrap {
2410	right: 90px;
2411	left: 90px;
2412	top: 45px;
2413	bottom: 45px;
2414	z-index: 120;
2415}
2416
2417.wp-customizer .theme-overlay .theme-actions {
2418	text-align: left; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
2419	padding: 10px 25px 5px;
2420	background: #f0f0f1;
2421	border-top: 1px solid #dcdcde;
2422}
2423
2424.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
2425	margin-right: 8px;
2426}
2427
2428.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
2429	overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
2430}
2431
2432.wp-customizer .theme-header {
2433	background: #f0f0f1;
2434}
2435
2436.wp-customizer .theme-overlay .theme-header button,
2437.wp-customizer .theme-overlay .theme-header .close:before {
2438	color: #3c434a;
2439}
2440
2441.wp-customizer .theme-overlay .theme-header .close:focus,
2442.wp-customizer .theme-overlay .theme-header .close:hover,
2443.wp-customizer .theme-overlay .theme-header .right:focus,
2444.wp-customizer .theme-overlay .theme-header .right:hover,
2445.wp-customizer .theme-overlay .theme-header .left:focus,
2446.wp-customizer .theme-overlay .theme-header .left:hover {
2447	background: #fff;
2448	border-bottom: 4px solid #2271b1;
2449	color: #2271b1;
2450}
2451
2452.wp-customizer .theme-overlay .theme-header .close:focus:before,
2453.wp-customizer .theme-overlay .theme-header .close:hover:before {
2454	color: #2271b1;
2455}
2456
2457.wp-customizer .theme-overlay .theme-header button.disabled,
2458.wp-customizer .theme-overlay .theme-header button.disabled:hover,
2459.wp-customizer .theme-overlay .theme-header button.disabled:focus {
2460	border-bottom: none;
2461	background: transparent;
2462	color: #c3c4c7;
2463}
2464
2465/* Small Screens */
2466@media (max-width: 850px), (max-height: 472px) {
2467	.wp-customizer .theme-overlay .theme-wrap {
2468		right: 0;
2469		left: 0;
2470		top: 0;
2471		bottom: 0;
2472	}
2473
2474	.wp-customizer .theme-browser .themes {
2475		padding-left: 25px;
2476	}
2477}
2478
2479/* Handle cheaters. */
2480body.cheatin {
2481	font-size: medium;
2482	height: auto;
2483	background: #fff;
2484	border: 1px solid #c3c4c7;
2485	margin: 50px auto 2em;
2486	padding: 1em 2em;
2487	max-width: 700px;
2488	min-width: 0;
2489	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2490}
2491
2492body.cheatin h1 {
2493	border-bottom: 1px solid #dcdcde;
2494	clear: both;
2495	color: #50575e;
2496	font-size: 24px;
2497	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2498	margin: 30px 0 0;
2499	padding: 0 0 7px;
2500}
2501
2502body.cheatin p {
2503	font-size: 14px;
2504	line-height: 1.5;
2505	margin: 25px 0 20px;
2506}
2507
2508/**
2509 * Widgets and Menus common styles
2510 */
2511
2512/* higher specificity than .wp-core-ui .button */
2513#customize-theme-controls .add-new-widget,
2514#customize-theme-controls .add-new-menu-item {
2515	cursor: pointer;
2516	float: left;
2517	margin: 0 10px 0 0;
2518	transition: all 0.2s;
2519	-webkit-user-select: none;
2520	user-select: none;
2521	outline: none;
2522}
2523
2524.reordering .add-new-widget,
2525.reordering .add-new-menu-item {
2526	opacity: 0.2;
2527	pointer-events: none;
2528	cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
2529}
2530
2531.add-new-widget:before,
2532.add-new-menu-item:before,
2533#available-menu-items .new-content-item .add-content:before {
2534	content: "\f132";
2535	content: "\f132" / '';
2536	display: inline-block;
2537	position: relative;
2538	right: -2px;
2539	top: 0;
2540	font: normal 20px/1 dashicons;
2541	vertical-align: middle;
2542	transition: all 0.2s;
2543	-webkit-font-smoothing: antialiased;
2544	-moz-osx-font-smoothing: grayscale;
2545}
2546
2547/* Reordering */
2548.reorder-toggle {
2549	float: left;
2550	padding: 5px 8px;
2551	text-decoration: none;
2552	cursor: pointer;
2553	outline: none;
2554}
2555
2556.reorder,
2557.reordering .reorder-done {
2558	display: block;
2559	padding: 5px 8px;
2560}
2561
2562.reorder-done,
2563.reordering .reorder {
2564	display: none;
2565}
2566
2567.widget-reorder-nav span,
2568.menu-item-reorder-nav button {
2569	position: relative;
2570	overflow: hidden;
2571	float: right;
2572	display: block;
2573	width: 33px; /* was 42px for mobile */
2574	height: 43px;
2575	color: #8c8f94;
2576	text-indent: -9999px;
2577	cursor: pointer;
2578	outline: none;
2579}
2580
2581.menu-item-reorder-nav button {
2582	width: 30px;
2583	height: 40px;
2584	background: transparent;
2585	border: none;
2586	box-shadow: none;
2587}
2588
2589.widget-reorder-nav span:before,
2590.menu-item-reorder-nav button:before {
2591	display: inline-block;
2592	position: absolute;
2593	top: 0;
2594	left: 0;
2595	width: 100%;
2596	height: 100%;
2597	font: normal 20px/43px dashicons;
2598	text-align: center;
2599	text-indent: 0;
2600	-webkit-font-smoothing: antialiased;
2601	-moz-osx-font-smoothing: grayscale;
2602}
2603
2604.widget-reorder-nav span:hover,
2605.widget-reorder-nav span:focus,
2606.menu-item-reorder-nav button:hover,
2607.menu-item-reorder-nav button:focus {
2608	color: #1d2327;
2609	background: #f0f0f1;
2610}
2611
2612.move-widget-down:before,
2613.menus-move-down:before {
2614	content: "\f347";
2615	content: "\f347" / '';
2616}
2617
2618.move-widget-up:before,
2619.menus-move-up:before {
2620	content: "\f343";
2621	content: "\f343" / '';
2622}
2623
2624#customize-theme-controls .first-widget .move-widget-up,
2625#customize-theme-controls .last-widget .move-widget-down,
2626.move-up-disabled .menus-move-up,
2627.move-down-disabled .menus-move-down,
2628.move-right-disabled .menus-move-right,
2629.move-left-disabled .menus-move-left {
2630	color: #dcdcde;
2631	background-color: #fff;
2632	cursor: default;
2633	pointer-events: none;
2634}
2635
2636/**
2637 * New widget and Add-menu-items modes and panels
2638 */
2639
2640.wp-full-overlay-main {
2641	left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
2642	width: 100%;
2643}
2644
2645body.adding-widget .add-new-widget,
2646body.adding-widget .add-new-widget:hover,
2647.adding-menu-items .add-new-menu-item,
2648.adding-menu-items .add-new-menu-item:hover,
2649.add-menu-toggle.open,
2650.add-menu-toggle.open:hover {
2651	background: #f0f0f1;
2652	border-color: #8c8f94;
2653	color: #2c3338;
2654	box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
2655}
2656
2657body.adding-widget .add-new-widget:before,
2658.adding-menu-items .add-new-menu-item:before,
2659#accordion-section-add_menu .add-new-menu-item.open:before {
2660	transform: rotate(-45deg);
2661}
2662
2663#available-widgets,
2664#available-menu-items {
2665	position: absolute;
2666	top: 0;
2667	bottom: 0;
2668	right: -301px;
2669	visibility: hidden;
2670	overflow-x: hidden;
2671	overflow-y: auto;
2672	width: 300px;
2673	margin: 0;
2674	z-index: 4;
2675	background: #f0f0f1;
2676	transition: right .18s;
2677	border-left: 1px solid #dcdcde;
2678}
2679
2680#available-widgets .customize-section-title,
2681#available-menu-items .customize-section-title {
2682	border: 0;
2683	clip-path: inset(50%);
2684	height: 1px;
2685	margin: -1px;
2686	overflow: hidden;
2687	padding: 0;
2688	position: absolute;
2689	width: 1px;
2690	word-wrap: normal !important;
2691}
2692
2693#available-widgets .customize-section-title button,
2694#available-menu-items .customize-section-title button {
2695	display: none;
2696}
2697
2698#available-widgets-list {
2699	top: 82px;
2700	position: absolute;
2701	overflow: auto;
2702	bottom: 0;
2703	width: 100%;
2704	border-top: 1px solid #dcdcde;
2705}
2706
2707.no-widgets-found #available-widgets-list {
2708	border-top: none;
2709}
2710
2711#available-widgets-filter {
2712	position: fixed;
2713	top: 0;
2714	z-index: 1;
2715	width: 300px;
2716	background: #f0f0f1;
2717}
2718
2719/* search field container */
2720#available-widgets-filter,
2721#available-menu-items-search .accordion-section-title {
2722	padding: 13px 15px;
2723	box-sizing: border-box;
2724}
2725
2726#available-widgets-filter input,
2727#available-menu-items-search input {
2728	width: 100%;
2729	min-height: 32px;
2730	margin: 1px 0;
2731	padding: 0 30px;
2732}
2733
2734#available-widgets-filter input::-ms-clear,
2735#available-menu-items-search input::-ms-clear {
2736	display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
2737}
2738
2739#available-menu-items-search .search-icon,
2740#available-widgets-filter .search-icon {
2741	display: block;
2742	position: absolute;
2743	bottom: 15px; /* 13 container padding +1 input margin +1 input border */
2744	right: 16px;
2745	width: 30px;
2746	height: 30px;
2747	line-height: 2.1;
2748	text-align: center;
2749	color: #646970;
2750}
2751
2752#available-widgets-filter .clear-results,
2753#available-menu-items-search .accordion-section-title .clear-results {
2754	position: absolute;
2755	top: 36px; /* 13 container padding +1 input margin +1 input border */
2756	left: 16px;
2757	width: 30px;
2758	height: 30px;
2759	padding: 0;
2760	border: 0;
2761	cursor: pointer;
2762	background: none;
2763	color: #d63638;
2764	text-decoration: none;
2765	outline: 0;
2766}
2767
2768#available-widgets-filter .clear-results,
2769#available-menu-items-search .clear-results,
2770#available-menu-items-search.loading .clear-results.is-visible {
2771	display: none;
2772}
2773
2774#available-widgets-filter .clear-results.is-visible,
2775#available-menu-items-search .clear-results.is-visible {
2776	display: block;
2777}
2778
2779#available-widgets-filter .clear-results:before,
2780#available-menu-items-search .clear-results:before {
2781	content: "\f335";
2782	content: "\f335" / '';
2783	font: normal 20px/1 dashicons;
2784	vertical-align: middle;
2785	-webkit-font-smoothing: antialiased;
2786	-moz-osx-font-smoothing: grayscale;
2787}
2788
2789#available-widgets-filter .clear-results:hover,
2790#available-widgets-filter .clear-results:focus,
2791#available-menu-items-search .clear-results:hover,
2792#available-menu-items-search .clear-results:focus {
2793	color: #d63638;
2794}
2795
2796#available-widgets-filter .clear-results:focus,
2797#available-menu-items-search .clear-results:focus {
2798	box-shadow: 0 0 0 2px #2271b1;
2799	/* Only visible in Windows High Contrast mode */
2800	outline: 2px solid transparent;
2801}
2802
2803#available-menu-items-search .search-icon:after,
2804#available-widgets-filter .search-icon:after,
2805.themes-filter-bar .search-icon:after {
2806	content: "\f179";
2807	font: normal 20px/1 dashicons;
2808	vertical-align: middle;
2809	-webkit-font-smoothing: antialiased;
2810	-moz-osx-font-smoothing: grayscale;
2811}
2812
2813.themes-filter-bar .search-icon {
2814	position: absolute;
2815	top: 2px;
2816	right: 2px;
2817	z-index: 1;
2818	color: #646970;
2819	height: 30px;
2820	width: 30px;
2821	line-height: 2;
2822	text-align: center;
2823}
2824
2825.no-widgets-found-message {
2826	display: none;
2827	margin: 0;
2828	padding: 0 15px;
2829	line-height: inherit;
2830}
2831
2832.no-widgets-found .no-widgets-found-message {
2833	display: block;
2834}
2835
2836#available-widgets .widget-top,
2837#available-widgets .widget-top:hover,
2838#available-menu-items .item-top,
2839#available-menu-items .item-top:hover {
2840	border: none;
2841	background: transparent;
2842	box-shadow: none;
2843}
2844
2845#available-widgets .widget-tpl,
2846#available-menu-items .item-tpl {
2847	position: relative;
2848	padding: 15px 60px 15px 15px;
2849	background: #fff;
2850	border-bottom: 1px solid #dcdcde;
2851	border-right: 4px solid #fff;
2852	transition:
2853		.15s color ease-in-out,
2854		.15s background-color ease-in-out,
2855		.15s border-color ease-in-out;
2856	cursor: pointer;
2857	display: none;
2858}
2859
2860#available-widgets .widget,
2861#available-menu-items .item {
2862	position: static;
2863}
2864
2865
2866/* Responsive */
2867.customize-controls-preview-toggle {
2868	display: none;
2869}
2870
2871@media only screen and (max-width: 782px) {
2872	.wp-customizer .theme:not(.active):hover .theme-actions,
2873	.wp-customizer .theme:not(.active):focus .theme-actions {
2874		display: block;
2875	}
2876
2877	.wp-customizer .theme-browser .theme.active .theme-name span {
2878		display: inline;
2879	}
2880
2881	.customize-control-header button.random .dice {
2882		margin-top: 0;
2883	}
2884
2885	.customize-control-radio .customize-inside-control-row,
2886	.customize-control-checkbox .customize-inside-control-row,
2887	.customize-control-nav_menu_auto_add .customize-inside-control-row {
2888		margin-right: 32px;
2889	}
2890
2891	.customize-control-radio input,
2892	.customize-control-checkbox input,
2893	.customize-control-nav_menu_auto_add input {
2894		margin-right: -32px;
2895	}
2896
2897	.customize-control input[type="radio"] + label + br,
2898	.customize-control input[type="checkbox"] + label + br {
2899		line-height: 2.5; /* For widgets checkboxes */
2900	}
2901
2902	.customize-control .date-time-fields select {
2903		height: 39px;
2904	}
2905
2906	.date-time-fields .date-input.month {
2907		width: 79px;
2908	}
2909
2910	.date-time-fields .date-input.day,
2911	.date-time-fields .date-input.hour,
2912	.date-time-fields .date-input.minute {
2913		width: 55px;
2914	}
2915
2916	.date-time-fields .date-input.year {
2917		width: 80px;
2918	}
2919
2920	#customize-control-changeset_preview_link a {
2921		bottom: 16px;
2922	}
2923
2924	.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
2925		bottom: 10px;
2926	}
2927
2928	.media-widget-control .media-widget-buttons .button.edit-media,
2929	.media-widget-control .media-widget-buttons .button.change-media,
2930	.media-widget-control .media-widget-buttons .button.select-media {
2931		margin-top: 12px;
2932	}
2933
2934	.customize-preview-header.themes-filter-bar .search-icon {
2935		top: 6px;
2936	}
2937}
2938
2939@media screen and (max-width: 1200px) {
2940	.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2941	.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2942	.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
2943		right: 67%;
2944	}
2945}
2946
2947@media screen and (max-width: 640px) {
2948
2949	/* when the sidebar is collapsed and switching to responsive view,
2950	   bring it back see ticket #35220 */
2951	.wp-full-overlay.collapsed #customize-controls {
2952		margin-right: 0;
2953	}
2954
2955	.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
2956		bottom: 0;
2957	}
2958
2959	.customize-controls-preview-toggle {
2960		display: block;
2961		position: absolute;
2962		top: 0;
2963		right: 48px;
2964		line-height: 2.6;
2965		font-size: 14px;
2966		padding: 0 12px 4px;
2967		margin: 0;
2968		height: 45px;
2969		background: #f0f0f1;
2970		border: 0;
2971		border-left: 1px solid #dcdcde;
2972		border-top: 4px solid #f0f0f1;
2973		color: #50575e;
2974		cursor: pointer;
2975		transition: color .1s ease-in-out, background .1s ease-in-out;
2976	}
2977
2978	#customize-footer-actions,
2979	/*#customize-preview,*/
2980	.customize-controls-preview-toggle .controls,
2981	.preview-only .wp-full-overlay-sidebar-content,
2982	.preview-only .customize-controls-preview-toggle .preview {
2983		display: none;
2984	}
2985
2986	.preview-only #customize-save-button-wrapper {
2987		margin-top: -46px;
2988	}
2989
2990	.customize-controls-preview-toggle .preview:before,
2991	.customize-controls-preview-toggle .controls:before {
2992		font: normal 20px/1 dashicons;
2993		content: "\f177";
2994		content: "\f177" / '';
2995		position: relative;
2996		top: 4px;
2997		margin-left: 6px;
2998	}
2999
3000	.customize-controls-preview-toggle .controls:before {
3001		content: "\f540";
3002		content: "\f540" / '';
3003	}
3004
3005	.preview-only #customize-controls {
3006		height: 45px;
3007	}
3008
3009	.preview-only #customize-preview,
3010	.preview-only .customize-controls-preview-toggle .controls {
3011		display: block;
3012	}
3013
3014	.wp-core-ui.wp-customizer .button {
3015		min-height: 30px;
3016		padding: 0 14px;
3017		line-height: 2;
3018		font-size: 14px;
3019		vertical-align: middle;
3020	}
3021
3022	.customize-control .attachment-media-view .upload-button {
3023		padding: 5px 0;
3024	}
3025
3026	#customize-control-changeset_status .customize-inside-control-row {
3027		padding-top: 15px;
3028	}
3029
3030	body.adding-widget div#available-widgets,
3031	body.adding-menu-items div#available-menu-items,
3032	body.outer-section-open div#customize-sidebar-outer-content {
3033		width: 100%;
3034	}
3035
3036	#available-widgets .customize-section-title,
3037	#available-menu-items .customize-section-title {
3038		border: 0;
3039		clip-path: none;
3040		height: inherit;
3041		margin: 0;
3042		overflow: hidden;
3043		padding: 0;
3044		width: auto;
3045		position: static;
3046	}
3047
3048	#available-widgets .customize-section-title button,
3049	#available-menu-items .customize-section-title button {
3050		display: block;
3051	}
3052
3053	#available-widgets .customize-section-back,
3054	#available-menu-items .customize-section-back {
3055		height: 69px;
3056	}
3057
3058	#available-widgets .customize-section-title h3,
3059	#available-menu-items .customize-section-title h3 {
3060		font-size: 20px;
3061		font-weight: 200;
3062		padding: 9px 14px 12px 10px;
3063		margin: 0;
3064		line-height: 24px;
3065		color: #50575e;
3066		display: block;
3067		overflow: hidden;
3068		white-space: nowrap;
3069		text-overflow: ellipsis;
3070	}
3071
3072	#available-widgets .customize-section-title .customize-action,
3073	#available-menu-items .customize-section-title .customize-action {
3074		font-size: 13px;
3075		display: block;
3076		font-weight: 400;
3077		overflow: hidden;
3078		white-space: nowrap;
3079		text-overflow: ellipsis;
3080	}
3081
3082	#available-widgets-filter {
3083		position: relative;
3084		width: 100%;
3085		height: auto;
3086	}
3087
3088	#available-widgets-list {
3089		top: 152px;
3090	}
3091
3092	#available-menu-items-search .clear-results {
3093		top: 36px;
3094		left: 16px;
3095	}
3096
3097	.reorder,
3098	.reordering .reorder-done {
3099		padding: 8px;
3100	}
3101}
3102
3103@media screen and (max-width: 600px) {
3104	.wp-full-overlay.expanded {
3105		margin-right: 0;
3106	}
3107
3108	body.adding-widget div#available-widgets,
3109	body.adding-menu-items div#available-menu-items,
3110	body.outer-section-open div#customize-sidebar-outer-content {
3111		top: 46px;
3112		z-index: 10;
3113	}
3114
3115	body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content {
3116		right: -100%;
3117	}
3118
3119	body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
3120		right: 0;
3121	}
3122}
3123