[Summary view] [Print] [Text view]

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