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