ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

customize-controls.css (69232B)


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