[Summary view] [Print] [Text view]

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