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