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