[Summary view] [Print] [Text view]

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