1/*------------------------------------------------------------------------------
  2  14.0 - Media Screen
  3------------------------------------------------------------------------------*/
  4
  5.media-item .describe {
  6	border-collapse: collapse;
  7	width: 100%;
  8	border-top: 1px solid #dcdcde;
  9	clear: both;
 10	cursor: default;
 11}
 12
 13.media-item.media-blank .describe {
 14	border: 0;
 15}
 16
 17.media-item .describe th {
 18	vertical-align: top;
 19	text-align: left;
 20	padding: 5px 10px 10px;
 21	width: 140px;
 22}
 23
 24.media-item .describe .align th {
 25	padding-top: 0;
 26}
 27
 28.media-item .media-item-info tr {
 29	background-color: transparent;
 30}
 31
 32.media-item .describe td {
 33	padding: 0 8px 8px 0;
 34	vertical-align: top;
 35}
 36
 37.media-item thead.media-item-info td {
 38	padding: 4px 10px 0;
 39}
 40
 41.media-item .media-item-info .A1B1 {
 42	padding: 0 0 0 10px;
 43}
 44
 45.media-item td.savesend {
 46	padding-bottom: 15px;
 47}
 48
 49.media-item .thumbnail {
 50	max-height: 128px;
 51	max-width: 128px;
 52}
 53
 54.media-list-subtitle {
 55	display: block;
 56}
 57
 58.media-list-title {
 59	display: block;
 60}
 61
 62#wpbody-content #async-upload-wrap a {
 63	display: none;
 64}
 65
 66.media-upload-form {
 67	margin-top: 20px;
 68}
 69
 70.media-upload-form td label {
 71	margin-right: 6px;
 72	margin-left: 2px;
 73}
 74
 75.media-upload-form .align .field label {
 76	display: inline;
 77	padding: 0 0 0 23px;
 78	margin: 0 1em 0 3px;
 79	font-weight: 600;
 80}
 81
 82.media-upload-form tr.image-size label {
 83	margin: 0 0 0 5px;
 84	font-weight: 600;
 85}
 86
 87.media-upload-form th.label label {
 88	font-weight: 600;
 89	margin: 0.5em;
 90	font-size: 13px;
 91}
 92
 93.media-upload-form th.label label span {
 94	padding: 0 5px;
 95}
 96
 97.media-item .describe input[type="text"],
 98.media-item .describe textarea {
 99	width: 460px;
100}
101
102.media-item .describe p.help {
103	margin: 0;
104	padding: 0 0 0 5px;
105}
106
107.describe-toggle-on,
108.describe-toggle-off {
109	display: block;
110	line-height: 2.76923076;
111	float: right;
112	margin-right: 10px;
113}
114
115.media-item .attachment-tools {
116	display: flex;
117	align-items: center;
118}
119
120.media-item .edit-attachment {
121	padding: 14px 0;
122	display: block;
123	margin-right: 10px;
124}
125
126.media-item .edit-attachment.copy-to-clipboard-container {
127	display: flex;
128	margin-top: 0;
129}
130
131.media-item-copy-container .success {
132	line-height: 0;
133}
134
135.media-item button .copy-attachment-url {
136	margin-top: 14px;
137}
138
139.media-item .copy-to-clipboard-container {
140	margin-top: 7px;
141}
142
143.media-item .describe-toggle-off,
144.media-item.open .describe-toggle-on {
145	display: none;
146}
147
148.media-item.open .describe-toggle-off {
149	display: block;
150}
151
152.media-upload-form .media-item {
153	min-height: 70px;
154	margin-bottom: 1px;
155	position: relative;
156	width: 100%;
157	background: #fff;
158}
159
160.media-upload-form .media-item,
161.media-upload-form .media-item .error {
162	box-shadow: 0 1px 0 #dcdcde;
163}
164
165#media-items:empty {
166	border: 0 none;
167}
168
169.media-item .filename {
170	padding: 14px 2px;
171	overflow: hidden;
172	margin-left: 4px;
173}
174
175.media-item .pinkynail {
176	float: left;
177	margin: 14px;
178	max-height: 70px;
179	max-width: 70px;
180}
181
182.media-item .startopen,
183.media-item .startclosed {
184	display: none;
185}
186
187.media-item .progress {
188	display: inline-block;
189	height: 22px;
190	margin: 0 6px 7px;
191	width: 200px;
192	line-height: 2em;
193	padding: 0;
194	overflow: hidden;
195	border-radius: 22px;
196	background: #dcdcde;
197	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
198}
199
200.media-item .bar {
201	z-index: 9;
202	width: 0;
203	height: 100%;
204	margin-top: -22px;
205	border-radius: 22px;
206	background-color: #2271b1;
207	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
208}
209
210.media-item .progress .percent {
211	z-index: 10;
212	position: relative;
213	width: 200px;
214	padding: 0;
215	color: #fff;
216	text-align: center;
217	line-height: 22px;
218	font-weight: 400;
219	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
220}
221
222.upload-php .fixed .column-parent {
223	width: 15%;
224}
225
226.js .html-uploader #plupload-upload-ui {
227	display: none;
228}
229
230.js .html-uploader #html-upload-ui {
231	display: block;
232}
233
234#html-upload-ui #async-upload {
235	font-size: 1em;
236}
237
238.media-upload-form .media-item.error,
239.media-upload-form .media-item .error {
240	width: auto;
241	margin: 0 0 1px;
242}
243
244.media-upload-form .media-item .error {
245	padding: 10px 0 10px 14px;
246	min-height: 50px;
247}
248
249.media-item .error-div button.dismiss {
250	float: right;
251	margin: 0 10px 0 15px;
252}
253
254/*------------------------------------------------------------------------------
255  14.1 - Media Library
256------------------------------------------------------------------------------*/
257
258.find-box {
259	background-color: #fff;
260	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
261	width: 600px;
262	overflow: hidden;
263	margin-left: -300px;
264	position: fixed;
265	top: 30px;
266	bottom: 30px;
267	left: 50%;
268	z-index: 100105;
269}
270
271.find-box-head {
272	background: #fff;
273	border-bottom: 1px solid #dcdcde;
274	height: 36px;
275	font-size: 18px;
276	font-weight: 600;
277	line-height: 2;
278	padding: 0 36px 0 16px;
279	position: absolute;
280	top: 0;
281	left: 0;
282	right: 0;
283}
284
285.find-box-inside {
286	overflow: auto;
287	padding: 16px;
288	background-color: #fff;
289	position: absolute;
290	top: 37px;
291	bottom: 45px;
292	overflow-y: scroll;
293	width: 100%;
294	box-sizing: border-box;
295}
296
297.find-box-search {
298	padding-bottom: 16px;
299}
300
301.find-box-search .spinner {
302	float: none;
303	left: 105px;
304	position: absolute;
305}
306
307.find-box-search,
308#find-posts-response {
309	position: relative; /* RTL fix, #WP28010 */
310}
311
312#find-posts-input,
313#find-posts-search {
314	float: left;
315}
316
317#find-posts-input {
318	width: 140px;
319	height: 28px;
320	margin: 0 4px 0 0;
321}
322
323.widefat .found-radio {
324	padding-right: 0;
325	width: 16px;
326}
327
328#find-posts-close {
329	width: 36px;
330	height: 36px;
331	border: none;
332	padding: 0;
333	position: absolute;
334	top: 0;
335	right: 0;
336	cursor: pointer;
337	text-align: center;
338	background: none;
339	color: #646970;
340}
341
342#find-posts-close:hover,
343#find-posts-close:focus {
344	color: #135e96;
345}
346
347#find-posts-close:focus {
348	box-shadow: 0 0 0 2px #2271b1;
349	/* Only visible in Windows High Contrast mode */
350	outline: 2px solid transparent;
351	outline-offset: -2px;
352}
353
354#find-posts-close:before {
355	font: normal 20px/36px dashicons;
356	vertical-align: top;
357	-webkit-font-smoothing: antialiased;
358	-moz-osx-font-smoothing: grayscale;
359	content: "\f158";
360	content: "\f158" / '';
361}
362
363.find-box-buttons {
364	padding: 8px 16px;
365	background: #fff;
366	border-top: 1px solid #dcdcde;
367	position: absolute;
368	bottom: 0;
369	left: 0;
370	right: 0;
371}
372
373@media screen and (max-width: 782px) {
374	.find-box-inside {
375		bottom: 57px;
376	}
377}
378
379@media screen and (max-width: 660px) {
380
381	.find-box {
382		top: 0;
383		bottom: 0;
384		left: 0;
385		right: 0;
386		margin: 0;
387		width: 100%;
388	}
389
390}
391
392.ui-find-overlay {
393	position: fixed;
394	top: 0;
395	left: 0;
396	right: 0;
397	bottom: 0;
398	background: #000;
399	opacity: 0.7;
400	filter: alpha(opacity=70);
401	z-index: 100100;
402}
403
404.drag-drop #drag-drop-area {
405	border: 4px dashed #c3c4c7;
406	height: 200px;
407}
408
409.drag-drop .drag-drop-inside {
410	margin: 60px auto 0;
411	width: 250px;
412}
413
414.drag-drop-inside p {
415	font-size: 14px;
416	margin: 5px 0;
417	display: none;
418}
419
420.drag-drop .drag-drop-inside p {
421	text-align: center;
422}
423
424.drag-drop-inside p.drag-drop-info {
425	font-size: 20px;
426}
427
428.drag-drop .drag-drop-inside p,
429.drag-drop-inside p.drag-drop-buttons {
430	display: block;
431}
432
433/*
434#drag-drop-area:-moz-drag-over {
435	border-color: #83b4d8;
436}
437border color while dragging a file over the uploader drop area */
438.drag-drop.drag-over #drag-drop-area {
439	border-color: #9ec2e6;
440}
441
442#plupload-upload-ui {
443	position: relative;
444}
445
446.post-type-attachment .wp-filter select {
447	margin: 0 6px 0 0;
448}
449
450/**
451 * Media Library grid view
452 */
453
454.media-frame.mode-grid,
455.media-frame.mode-grid .media-frame-content,
456.media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,
457.media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,
458.media-frame.mode-grid .uploader-inline-content {
459	position: static;
460}
461
462/* Regions we don't use at all */
463.media-frame.mode-grid .media-frame-title,
464.media-frame.mode-grid .media-frame-router,
465.media-frame.mode-grid .media-frame-menu {
466	display: none;
467}
468
469.media-frame.mode-grid .media-frame-content {
470	background-color: transparent;
471	border: none;
472}
473
474.upload-php .mode-grid .media-sidebar {
475	position: relative;
476	width: auto;
477	margin-top: 12px;
478	padding: 0 16px;
479	border-left: 4px solid #d63638;
480	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
481	background-color: #fff;
482}
483
484.upload-php .mode-grid .hide-sidebar .media-sidebar {
485	display: none;
486}
487
488.upload-php .mode-grid .media-sidebar .media-uploader-status {
489	border-bottom: none;
490	padding-bottom: 0;
491	max-width: 100%;
492}
493
494.upload-php .mode-grid .media-sidebar .upload-error {
495	margin: 12px 0;
496	padding: 4px 0 0;
497	border: none;
498	box-shadow: none;
499	background: none;
500}
501
502.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
503	display: none;
504}
505
506.media-frame.mode-grid .uploader-inline {
507	position: relative;
508	top: auto;
509	right: auto;
510	left: auto;
511	bottom: auto;
512	padding-top: 0;
513	margin-top: 20px;
514	border: 4px dashed #c3c4c7;
515}
516
517.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
518.media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper {
519	position: relative;
520	top: 94px; /* prevent jumping up when the toolbar becomes fixed */
521	padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
522}
523
524.media-frame.mode-grid .attachment:focus,
525.media-frame.mode-grid .selected.attachment:focus,
526.media-frame.mode-grid .attachment.details:focus {
527	box-shadow: inset 0 0 0 2px #2271b1;
528	/* Only visible in Windows High Contrast mode */
529	outline: 2px solid transparent;
530	outline-offset: -6px;
531}
532
533.media-frame.mode-grid .selected.attachment {
534	box-shadow:
535		inset 0 0 0 5px #f0f0f1,
536		inset 0 0 0 7px #c3c4c7;
537}
538
539.media-frame.mode-grid .attachment.details {
540	box-shadow:
541		inset 0 0 0 3px #f0f0f1,
542		inset 0 0 0 7px #4f94d4;
543}
544
545.media-frame.mode-grid.mode-select .attachment .thumbnail {
546	opacity: 0.65;
547}
548
549.media-frame.mode-select .attachment.selected .thumbnail {
550	opacity: 1;
551}
552
553.media-frame.mode-grid .media-toolbar {
554	margin-bottom: 15px;
555	height: auto;
556}
557
558.media-frame.mode-grid .media-toolbar select {
559	margin: 0 10px 0 0;
560}
561
562.media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
563	margin: 0 8px 0 0;
564	vertical-align: middle;
565}
566
567.media-frame.mode-grid .attachments-browser .bulk-select {
568	display: inline-block;
569	margin: 0 10px 0 0;
570}
571
572.media-frame.mode-grid .search {
573	margin-top: 0;
574}
575
576.media-frame-content .media-search-input-label {
577	vertical-align: baseline;
578}
579
580.attachments-browser .media-toolbar-secondary > .media-button {
581	margin-right: 10px;
582}
583
584.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
585	position: fixed;
586	top: 32px;
587	left: auto;
588	right: 20px;
589	margin-top: 0;
590}
591
592.media-frame.mode-grid .attachments-browser {
593	padding: 0;
594}
595
596.media-frame.mode-grid .attachments-browser .attachments {
597	padding: 2px;
598}
599
600.media-frame.mode-grid .attachments-browser .no-media {
601	color: #646970; /* same as no plugins and no themes */
602	font-size: 18px;
603	font-style: normal;
604	margin: 0;
605	padding: 100px 0 0;
606	text-align: center;
607}
608
609/**
610 * Attachment details modal
611 */
612
613.edit-attachment-frame {
614	display: block;
615	height: 100%;
616	width: 100%;
617}
618
619.edit-attachment-frame .edit-media-header {
620	overflow: hidden;
621}
622
623.upload-php .media-modal-close .media-modal-icon:before {
624	content: "\f335";
625	content: "\f335" / '';
626	font-size: 22px;
627}
628
629.upload-php .media-modal-close,
630.edit-attachment-frame .edit-media-header .left,
631.edit-attachment-frame .edit-media-header .right {
632	cursor: pointer;
633	color: #787c82;
634	background-color: transparent;
635	height: 50px;
636	width: 50px;
637	padding: 0;
638	position: absolute;
639	text-align: center;
640	border: 0;
641	border-left: 1px solid #dcdcde;
642	transition: color .1s ease-in-out, background .1s ease-in-out;
643}
644
645.upload-php .media-modal-close {
646	top: 0;
647	right: 0;
648}
649
650.edit-attachment-frame .edit-media-header .left {
651	right: 102px;
652}
653
654.edit-attachment-frame .edit-media-header .right {
655	right: 51px;
656}
657
658.edit-attachment-frame .media-frame-title {
659	left: 0;
660	right: 150px; /* leave space for prev/next/close */
661}
662
663.edit-attachment-frame .edit-media-header .right:before,
664.edit-attachment-frame .edit-media-header .left:before {
665	font: normal 20px/50px dashicons !important;
666	display: inline;
667	font-weight: 300;
668}
669
670.upload-php .media-modal-close:hover,
671.upload-php .media-modal-close:focus,
672.edit-attachment-frame .edit-media-header .left:hover,
673.edit-attachment-frame .edit-media-header .right:hover,
674.edit-attachment-frame .edit-media-header .left:focus,
675.edit-attachment-frame .edit-media-header .right:focus {
676	background: #dcdcde;
677	border-color: #c3c4c7;
678	color: #000;
679	outline: none;
680	box-shadow: none;
681}
682
683.upload-php .media-modal-close:focus,
684.edit-attachment-frame .edit-media-header .left:focus,
685.edit-attachment-frame .edit-media-header .right:focus {
686	/* Only visible in Windows High Contrast mode */
687	outline: 2px solid transparent;
688	outline-offset: -2px;
689}
690
691.upload-php .media-modal-close:focus .media-modal-icon:before,
692.upload-php .media-modal-close:hover .media-modal-icon:before {
693	color: #000;
694}
695
696.edit-attachment-frame .edit-media-header .left:before {
697	content: "\f341";
698	content: "\f341" / '';
699}
700
701.edit-attachment-frame .edit-media-header .right:before {
702	content: "\f345";
703	content: "\f345" / '';
704}
705
706.edit-attachment-frame .edit-media-header [disabled],
707.edit-attachment-frame .edit-media-header [disabled]:hover {
708	color: #c3c4c7;
709	background: inherit;
710	cursor: default;
711}
712
713.edit-attachment-frame .media-frame-content,
714.edit-attachment-frame .media-frame-router {
715	left: 0;
716}
717
718.edit-attachment-frame .media-frame-content {
719	border-bottom: none;
720	bottom: 0;
721	top: 50px;
722}
723
724.edit-attachment-frame .attachment-details {
725	position: absolute;
726	overflow: auto;
727	top: 0;
728	bottom: 0;
729	right: 0;
730	left: 0;
731	box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
732}
733
734.edit-attachment-frame .attachment-media-view {
735	float: left;
736	width: 65%;
737	height: 100%;
738}
739
740.edit-attachment-frame .attachment-media-view .thumbnail {
741	box-sizing: border-box;
742	padding: 16px;
743	height: 100%;
744}
745
746.edit-attachment-frame .attachment-media-view .details-image {
747	display: block;
748	margin: 0 auto 16px;
749	max-width: 100%;
750	max-height: 90%;
751	max-height: calc( 100% - 42px ); /* leave space for actions underneath */
752	background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
753	background-position: 0 0, 10px 10px;
754	background-size: 20px 20px;
755}
756
757.edit-attachment-frame .attachment-media-view .details-image.icon {
758	background: none;
759}
760
761.edit-attachment-frame .attachment-media-view .attachment-actions {
762	text-align: center;
763}
764
765.edit-attachment-frame .wp-media-wrapper {
766	margin-bottom: 12px;
767}
768
769.edit-attachment-frame input,
770.edit-attachment-frame textarea {
771	padding: 4px 8px;
772	line-height: 1.42857143;
773}
774
775.edit-attachment-frame .attachment-info {
776	overflow: auto;
777	box-sizing: border-box;
778	margin-bottom: 0;
779	padding: 12px 16px 0;
780	width: 35%;
781	height: 100%;
782	box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
783	border-bottom: 0;
784	border-left: 1px solid #dcdcde;
785	background: #f6f7f7;
786}
787
788.edit-attachment-frame .attachment-info .details,
789.edit-attachment-frame .attachment-info .settings {
790	position: relative; /* RTL fix, #WP29352 */
791	overflow: hidden;
792	float: none;
793	margin-bottom: 15px;
794	padding-bottom: 15px;
795	border-bottom: 1px solid #dcdcde;
796}
797
798.edit-attachment-frame .attachment-info .filename {
799	font-weight: 400;
800	color: #646970;
801}
802
803.edit-attachment-frame .attachment-info .thumbnail {
804	margin-bottom: 12px;
805}
806
807.attachment-info .actions {
808	margin-bottom: 16px;
809}
810
811.attachment-info .actions a {
812	display: inline;
813	text-decoration: none;
814}
815
816.copy-to-clipboard-container {
817	display: flex;
818	align-items: center;
819	margin-top: 8px;
820	clear: both;
821}
822
823.copy-to-clipboard-container .copy-attachment-url {
824	white-space: normal;
825}
826
827.copy-to-clipboard-container .success {
828	color: #007017;
829	margin-left: 8px;
830}
831
832/*------------------------------------------------------------------------------
833  14.2 - Image Editor
834------------------------------------------------------------------------------*/
835.wp_attachment_details .attachment-alt-text {
836	margin-bottom: 5px;
837}
838
839.wp_attachment_details #attachment_alt {
840	max-width: 500px;
841	height: 3.28571428em;
842}
843
844.wp_attachment_details .attachment-alt-text-description {
845	margin-top: 5px;
846}
847
848.wp_attachment_details label[for="content"] {
849	font-size: 13px;
850	line-height: 1.5;
851	margin: 1em 0;
852}
853
854.wp_attachment_details #attachment_caption {
855	height: 4em;
856}
857
858.describe .image-editor {
859	vertical-align: top;
860}
861
862.imgedit-wrap {
863	position: relative;
864	padding-top: 10px;
865}
866
867.image-editor p,
868.image-editor fieldset {
869	margin: 8px 0;
870}
871
872.image-editor legend {
873	margin-bottom: 5px;
874}
875
876.describe .imgedit-wrap .image-editor {
877	padding: 0 5px;
878}
879
880.wp_attachment_holder div.updated {
881	margin-top: 0;
882}
883
884.wp_attachment_holder .imgedit-wrap > div {
885	height: auto;
886}
887
888.imgedit-panel-content {
889	display: flex;
890	flex-wrap: wrap;
891	gap: 20px;
892	margin-bottom: 20px;
893}
894
895.imgedit-settings {
896	max-width: 240px; /* Prevent reflow when help info is expanded. */
897}
898
899.imgedit-group-controls > * {
900	display: none;
901}
902
903.imgedit-panel-active .imgedit-group-controls > * {
904	display: block;
905}
906
907.imgedit-panel-active .imgedit-group-controls > .imgedit-crop-apply {
908	display: flex;
909}
910
911.imgedit-crop-apply {
912	gap: 4px;
913	flex-wrap: wrap;
914}
915
916.wp_attachment_holder .imgedit-wrap .image-editor {
917	float: right;
918	width: 250px;
919}
920
921.image-editor input {
922	margin-top: 0;
923	vertical-align: middle;
924}
925
926.imgedit-wait {
927	position: absolute;
928	top: 0;
929	bottom: 0;
930	width: 100%;
931	background: #fff;
932	opacity: 0.7;
933	filter: alpha(opacity=70);
934	display: none;
935}
936
937.imgedit-wait:before {
938	content: "";
939	display: block;
940	width: 20px;
941	height: 20px;
942	position: absolute;
943	left: 50%;
944	top: 50%;
945	margin: -10px 0 0 -10px;
946	background: transparent url(../images/spinner.gif) no-repeat center;
947	background-size: 20px 20px;
948	transform: translateZ(0);
949}
950
951.no-float {
952	float: none;
953}
954
955.media-disabled,
956.image-editor .disabled {
957	/* WCAG 1.4.3 Text or images of text that are part of an inactive user
958	   interface component ... have no contrast requirement. */
959	color: #a7aaad;
960}
961
962.A1B1 {
963	overflow: hidden;
964}
965
966.wp_attachment_image .button,
967.A1B1 .button {
968	float: left;
969}
970
971.no-js .wp_attachment_image .button {
972	display: none;
973}
974
975.wp_attachment_image .spinner,
976.A1B1 .spinner {
977	float: left;
978}
979
980.imgedit-menu .note-no-rotate {
981	clear: both;
982	margin: 0;
983	padding: 1em 0 0;
984}
985
986.imgedit-menu .button:after,
987.imgedit-menu .button:before {
988	font: normal 16px/1 dashicons;
989	margin-right: 8px;
990	vertical-align: middle;
991	position: relative;
992	top: -2px;
993	-webkit-font-smoothing: antialiased;
994	-moz-osx-font-smoothing: grayscale;
995}
996
997.imgedit-menu .imgedit-rotate.button:after {
998	content: '\f140';
999	margin-left: 2px;
1000	margin-right: 0;
1001}
1002
1003.imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
1004	content: '\f142';
1005}
1006
1007.imgedit-menu .button.disabled {
1008	color: #a7aaad;
1009	border-color: #dcdcde;
1010	background: #f6f7f7;
1011	box-shadow: none;
1012	text-shadow: 0 1px 0 #fff;
1013	cursor: default;
1014	transform: none;
1015}
1016
1017.imgedit-crop:before {
1018	content: "\f165";
1019	content: "\f165" / '';
1020}
1021
1022.imgedit-scale:before {
1023	content: "\f211";
1024	content: "\f211" / '';
1025}
1026
1027.imgedit-rotate:before {
1028	content: "\f167";
1029	content: "\f167" / '';
1030}
1031
1032.imgedit-undo:before {
1033	content: "\f171";
1034	content: "\f171" / '';
1035}
1036
1037.imgedit-redo:before {
1038	content: "\f172";
1039	content: "\f172" / '';
1040}
1041
1042.imgedit-crop-wrap {
1043	position: relative;
1044}
1045
1046.imgedit-crop-wrap img {
1047	background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1048	background-position: 0 0, 10px 10px;
1049	background-size: 20px 20px;
1050}
1051
1052.imgedit-crop-wrap {
1053	padding: 20px;
1054	background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1055	background-position: 0 0, 10px 10px;
1056	background-size: 20px 20px;
1057}
1058
1059
1060.imgedit-crop {
1061	margin: 0 8px 0 0;
1062}
1063
1064.imgedit-rotate {
1065	margin: 0 8px 0 3px;
1066}
1067
1068.imgedit-undo {
1069	margin: 0 3px;
1070}
1071
1072.imgedit-redo {
1073	margin: 0 8px 0 3px;
1074}
1075
1076.imgedit-thumbnail-preview-group {
1077	display: flex;
1078	flex-wrap: wrap;
1079	column-gap: 10px;
1080}
1081
1082.imgedit-thumbnail-preview {
1083	margin: 10px 8px 0 0;
1084}
1085
1086.imgedit-thumbnail-preview-caption {
1087	display: block;
1088}
1089
1090#poststuff .imgedit-group-top h2 {
1091	display: inline-block;
1092	margin: 0;
1093	padding: 0;
1094	font-size: 14px;
1095	line-height: 1.4;
1096}
1097
1098#poststuff .imgedit-group-top .button-link {
1099	text-decoration: none;
1100	color: #1d2327;
1101}
1102
1103.imgedit-applyto .imgedit-label {
1104	display: block;
1105	padding: .5em 0 0;
1106}
1107
1108.imgedit-popup-menu,
1109.imgedit-help {
1110	display: none;
1111	padding-bottom: 8px;
1112}
1113
1114.imgedit-panel-tools > .imgedit-menu {
1115	display: flex;
1116	column-gap: 4px;
1117	align-items: flex-start;
1118	flex-wrap: wrap;
1119}
1120
1121.imgedit-popup-menu {
1122	width: calc( 100% - 20px );
1123	position: absolute;
1124	background: #fff;
1125	padding: 10px;
1126	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
1127}
1128
1129.image-editor .imgedit-menu .imgedit-popup-menu button {
1130	display: block;
1131	margin: 2px 0;
1132	width: 100%;
1133	white-space: break-spaces;
1134	line-height: 1.5;
1135	padding-top: 3px;
1136	padding-bottom: 2px;
1137}
1138
1139.imgedit-rotate-menu-container {
1140	position: relative;
1141}
1142
1143.imgedit-help.imgedit-restore {
1144	padding-bottom: 0;
1145}
1146
1147/* higher specificity than buttons */
1148.image-editor .imgedit-settings .imgedit-help-toggle,
1149.image-editor .imgedit-settings .imgedit-help-toggle:hover,
1150.image-editor .imgedit-settings .imgedit-help-toggle:active {
1151	border: 1px solid transparent;
1152	margin: -1px 0 0 -1px;
1153	padding: 0;
1154	background: transparent;
1155	color: #2271b1;
1156	font-size: 20px;
1157	line-height: 1;
1158	cursor: pointer;
1159	box-sizing: content-box;
1160	box-shadow: none;
1161}
1162
1163.image-editor .imgedit-settings .imgedit-help-toggle:focus {
1164	color: #2271b1;
1165	border-color: #2271b1;
1166	box-shadow: 0 0 0 1px #2271b1;
1167	/* Only visible in Windows High Contrast mode */
1168	outline: 2px solid transparent;
1169}
1170
1171.form-table td.imgedit-response {
1172	padding: 0;
1173}
1174
1175.imgedit-submit-btn {
1176	margin-left: 20px;
1177}
1178
1179.imgedit-wrap .nowrap {
1180	white-space: nowrap;
1181	font-size: 12px;
1182	line-height: inherit;
1183}
1184
1185span.imgedit-scale-warn {
1186	display: flex;
1187	align-items: center;
1188	margin: 4px;
1189	gap: 4px;
1190	color: #b32d2e;
1191	font-style: normal;
1192	visibility: hidden;
1193	vertical-align: middle;
1194}
1195
1196.imgedit-save-target {
1197	margin: 8px 0;
1198}
1199
1200.imgedit-save-target legend {
1201	font-weight: 600;
1202}
1203
1204.imgedit-group {
1205	margin-bottom: 20px;
1206}
1207
1208.image-editor .imgedit-original-dimensions {
1209	display: inline-block;
1210}
1211
1212.image-editor .imgedit-scale-controls input[type="text"],
1213.image-editor .imgedit-crop-ratio input[type="text"],
1214.image-editor .imgedit-crop-sel input[type="text"],
1215.image-editor .imgedit-scale-controls input[type="number"],
1216.image-editor .imgedit-crop-ratio input[type="number"],
1217.image-editor .imgedit-crop-sel input[type="number"] {
1218	width: 80px;
1219	font-size: 14px;
1220	padding: 0 8px;
1221}
1222
1223.imgedit-separator {
1224	display: inline-block;
1225	width: 7px;
1226	text-align: center;
1227	font-size: 13px;
1228	color: #3c434a;
1229}
1230
1231.image-editor .imgedit-scale-button-wrapper {
1232	margin-top: 0.3077em;
1233	display: block;
1234}
1235
1236.image-editor .imgedit-scale-controls .button {
1237	margin-bottom: 0;
1238}
1239
1240audio, video {
1241	display: inline-block;
1242	max-width: 100%;
1243}
1244
1245.wp-core-ui .mejs-container {
1246	width: 100%;
1247	max-width: 100%;
1248}
1249
1250.wp-core-ui .mejs-container * {
1251	box-sizing: border-box;
1252}
1253
1254.wp-core-ui .mejs-time {
1255	box-sizing: content-box;
1256}
1257
1258/* =Media Queries
1259-------------------------------------------------------------- */
1260
1261/**
1262 * HiDPI Displays
1263 */
1264@media print,
1265  (min-resolution: 120dpi) {
1266	.imgedit-wait:before {
1267		background-image: url(../images/spinner-2x.gif);
1268	}
1269}
1270
1271@media screen and (max-width: 782px) {
1272	.edit-attachment-frame input,
1273	.edit-attachment-frame textarea {
1274		line-height: 1.5;
1275	}
1276
1277	.wp_attachment_details label[for="content"] {
1278		font-size: 14px;
1279		line-height: 1.5;
1280	}
1281
1282	.wp_attachment_details textarea {
1283		line-height: 1.5;
1284	}
1285
1286	.wp_attachment_details #attachment_alt {
1287		height: 3.375em;
1288	}
1289
1290	.media-upload-form .media-item.error,
1291	.media-upload-form .media-item .error {
1292		font-size: 13px;
1293		line-height: 1.5;
1294	}
1295
1296	.media-upload-form .media-item.error {
1297		padding: 1px 10px;
1298	}
1299
1300	.media-upload-form .media-item .error {
1301		padding: 10px 0 10px 12px;
1302	}
1303
1304	.image-editor .imgedit-scale input[type="text"],
1305	.image-editor .imgedit-crop-ratio input[type="text"],
1306	.image-editor .imgedit-crop-sel input[type="text"] {
1307		font-size: 16px;
1308		padding: 6px 10px;
1309	}
1310
1311	.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
1312	.wp_attachment_holder .imgedit-wrap .image-editor {
1313		float: none;
1314		width: auto;
1315		max-width: none;
1316		padding-bottom: 16px;
1317	}
1318
1319	.copy-to-clipboard-container .success {
1320		font-size: 14px;
1321	}
1322
1323	/* Restructure image editor on narrow viewports. */
1324	.imgedit-crop-wrap img{
1325		width: 100%;
1326	}
1327
1328	.media-modal .imgedit-wrap .imgedit-panel-content,
1329	.media-modal .imgedit-wrap .image-editor {
1330		position: initial !important;
1331	}
1332
1333	.media-modal .imgedit-wrap .image-editor {
1334		box-sizing: border-box;
1335		width: 100% !important;
1336	}
1337
1338	.image-editor .imgedit-scale-button-wrapper {
1339		display: inline-block;
1340	}
1341}
1342
1343@media only screen and (max-width: 600px) {
1344	.media-item-wrapper {
1345		grid-template-columns: 1fr;
1346	}
1347}
1348
1349/**
1350 * Media queries for media grid.
1351 */
1352@media only screen and (max-width: 1120px) {
1353	/* override for media-views.css */
1354	#wp-media-grid .wp-filter .attachment-filters {
1355		max-width: 100%;
1356	}
1357}
1358
1359@media only screen and (max-width: 1000px) {
1360	/* override for forms.css */
1361	.wp-filter p.search-box {
1362		float: none;
1363		width: 100%;
1364		margin-bottom: 20px;
1365		display: flex;
1366		flex-wrap: nowrap;
1367		column-gap: 0;
1368	}
1369
1370	.wp-filter p.search-box #media-search-input {
1371		width: 100%;
1372	}
1373
1374}
1375
1376@media only screen and (max-width: 782px) {
1377	.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1378		top: 46px;
1379		right: 10px;
1380	}
1381}
1382
1383@media only screen and (max-width: 600px) {
1384	.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1385		top: 0;
1386	}
1387}
1388
1389@media only screen and (max-width: 480px) {
1390	.edit-attachment-frame .media-frame-title {
1391		right: 110px;
1392	}
1393
1394	.upload-php .media-modal-close,
1395	.edit-attachment-frame .edit-media-header .left,
1396	.edit-attachment-frame .edit-media-header .right {
1397		width: 40px;
1398		height: 40px;
1399	}
1400
1401	.edit-attachment-frame .edit-media-header .right:before,
1402	.edit-attachment-frame .edit-media-header .left:before {
1403		line-height: 40px !important;
1404	}
1405
1406	.edit-attachment-frame .edit-media-header .left {
1407		right: 82px;
1408	}
1409
1410	.edit-attachment-frame .edit-media-header .right {
1411		right: 41px;
1412	}
1413
1414	.edit-attachment-frame .media-frame-content {
1415		top: 40px;
1416	}
1417
1418	.edit-attachment-frame .attachment-media-view {
1419		float: none;
1420		height: auto;
1421		width: 100%;
1422	}
1423
1424	.edit-attachment-frame .attachment-info {
1425		height: auto;
1426		width: 100%;
1427	}
1428}
1429
1430@media only screen and (max-width: 640px), screen and (max-height: 400px) {
1431	.upload-php .mode-grid .media-sidebar{
1432		max-width: 100%;
1433	}
1434}
1435
1436@media only screen and (max-width: 375px) {
1437	.media-item .attachment-tools {
1438		align-items: baseline;
1439	}
1440	.media-item .edit-attachment.copy-to-clipboard-container {
1441		flex-direction: column;
1442	}
1443
1444	.copy-to-clipboard-container .success {
1445		line-height: normal;
1446		margin-top: 10px;
1447	}
1448}
1449