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