[Summary view] [Print] [Text view]

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