[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: "\f341";
 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: "\f345";
 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      speak: never;
1364      display: block;
1365      padding: 0;
1366      text-indent: 0;
1367      text-align: center;
1368      position: relative;
1369      -webkit-font-smoothing: antialiased;
1370      -moz-osx-font-smoothing: grayscale;
1371      text-decoration: none !important;
1372      color: #2c3338;
1373  }
1374  
1375  .customize-control .dropdown-status {
1376      color: #2c3338;
1377      background: #f0f0f1;
1378      display: none;
1379      max-width: 112px;
1380  }
1381  
1382  .customize-control-color .dropdown {
1383      margin-left: 5px;
1384      margin-bottom: 5px;
1385  }
1386  
1387  .customize-control-color .dropdown .dropdown-content {
1388      background-color: #50575e;
1389      border: 1px solid rgba(0, 0, 0, 0.15);
1390  }
1391  
1392  .customize-control-color .dropdown:hover .dropdown-content {
1393      border-color: rgba(0, 0, 0, 0.25);
1394  }
1395  
1396  /**
1397   * iOS can't scroll iframes,
1398   * instead it expands the iframe size to match the size of the content
1399   */
1400  
1401  .ios .wp-full-overlay {
1402      position: relative;
1403  }
1404  
1405  .ios #customize-controls .wp-full-overlay-sidebar-content {
1406      -webkit-overflow-scrolling: touch;
1407  }
1408  
1409  /* Media controls */
1410  
1411  .customize-control .actions .button {
1412      margin-top: 12px;
1413  }
1414  
1415  .customize-control-header .actions,
1416  .customize-control-header .uploaded {
1417      margin-bottom: 18px;
1418  }
1419  
1420  .customize-control-header .uploaded button:not(.random),
1421  .customize-control-header .default button:not(.random) {
1422      width: 100%;
1423      padding: 0;
1424      margin: 0;
1425      background: none;
1426      border: none;
1427      color: inherit;
1428      cursor: pointer;
1429  }
1430  
1431  .customize-control-header button img {
1432      display: block;
1433  }
1434  
1435  .customize-control .attachment-media-view .remove-button,
1436  .customize-control .attachment-media-view .default-button,
1437  .customize-control .attachment-media-view .upload-button,
1438  .customize-control-header button.new,
1439  .customize-control-header button.remove {
1440      width: auto;
1441      height: auto;
1442      white-space: normal;
1443  }
1444  
1445  .customize-control .attachment-media-view .upload-button {
1446      width: 100%;
1447      padding: 9px 0;
1448  }
1449  
1450  .customize-control .attachment-media-view .upload-button.control-focus {
1451      width: auto;
1452      padding: 0 10px;
1453  }
1454  
1455  .customize-control.customize-control-header .actions .upload-button.button.new {
1456      width: 100%;
1457      padding: 9px 0;
1458  }
1459  
1460  .customize-control .attachment-media-view .thumbnail,
1461  .customize-control-header .current .container {
1462      overflow: hidden;
1463  }
1464  
1465  .customize-control .attachment-media-view .placeholder,
1466  .customize-control .attachment-media-view .button-add-media,
1467  .customize-control-header .placeholder {
1468      width: 100%;
1469      position: relative;
1470      text-align: center;
1471      cursor: default;
1472      border: 1px dashed #c3c4c7;
1473      box-sizing: border-box;
1474      padding: 9px 0;
1475      line-height: 1.6;
1476  }
1477  
1478  .customize-control .attachment-media-view .button-add-media {
1479      cursor: pointer;
1480      background-color: #f0f0f1;
1481      color: #2c3338;
1482  }
1483  
1484  .customize-control .attachment-media-view .button-add-media:hover {
1485      background-color: #fff;
1486  }
1487  
1488  .customize-control .attachment-media-view .button-add-media:focus {
1489      background-color: #fff;
1490      border-color: #3582c4;
1491      border-style: solid;
1492      box-shadow: 0 0 0 1px #3582c4;
1493      /* Only visible in Windows High Contrast mode */
1494      outline: 2px solid transparent;
1495  }
1496  
1497  .customize-control-header .inner {
1498      display: none;
1499      position: absolute;
1500      width: 100%;
1501      color: #50575e;
1502      white-space: nowrap;
1503      text-overflow: ellipsis;
1504      overflow: hidden;
1505  }
1506  
1507  .customize-control-header .inner,
1508  .customize-control-header .inner .dashicons {
1509      line-height: 20px;
1510      top: 8px;
1511  }
1512  
1513  .customize-control-header .list .inner,
1514  .customize-control-header .list .inner .dashicons {
1515      top: 9px;
1516  }
1517  
1518  .customize-control-header .header-view {
1519      position: relative;
1520      width: 100%;
1521      margin-bottom: 12px;
1522  }
1523  
1524  .customize-control-header .header-view:last-child {
1525      margin-bottom: 0;
1526  }
1527  
1528  /* Convoluted, but 'outline' support isn't good enough yet */
1529  .customize-control-header .header-view:after {
1530      border: 0;
1531  }
1532  
1533  .customize-control-header .header-view.selected .choice:focus {
1534      outline: none;
1535  }
1536  
1537  .customize-control-header .header-view.selected:after {
1538      content: "";
1539      position: absolute;
1540      height: auto;
1541      top: 0;
1542      right: 0;
1543      bottom: 0;
1544      left: 0;
1545      border: 4px solid #72aee6;
1546      border-radius: 2px;
1547  }
1548  
1549  .customize-control-header .header-view.button.selected {
1550      border: 0;
1551  }
1552  
1553  /* Header control: overlay "close" button */
1554  
1555  .customize-control-header .uploaded .header-view .close {
1556      font-size: 20px;
1557      color: #fff;
1558      background: #50575e;
1559      background: rgba(0, 0, 0, 0.5);
1560      position: absolute;
1561      top: 10px;
1562      right: -999px;
1563      z-index: 1;
1564      width: 26px;
1565      height: 26px;
1566      cursor: pointer;
1567  }
1568  
1569  .customize-control-header .header-view:hover .close,
1570  .customize-control-header .header-view .close:focus {
1571      right: auto;
1572      left: 10px;
1573  }
1574  
1575  .customize-control-header .header-view .close:focus {
1576      outline: 1px solid #4f94d4;
1577  }
1578  
1579  /* Header control: randomiz(s)er */
1580  
1581  .customize-control-header .random.placeholder {
1582      cursor: pointer;
1583      border-radius: 2px;
1584      height: 40px;
1585  }
1586  
1587  .customize-control-header button.random {
1588      width: 100%;
1589      height: auto;
1590      min-height: 40px;
1591      white-space: normal;
1592  }
1593  
1594  .customize-control-header button.random .dice {
1595      margin-top: 4px;
1596  }
1597  
1598  .customize-control-header .placeholder:hover .dice,
1599  .customize-control-header .header-view:hover > button.random .dice {
1600      animation: dice-color-change 3s infinite;
1601  }
1602  
1603  .button-see-me {
1604      animation: bounce .7s 1;
1605      transform-origin: center bottom;
1606  }
1607  
1608  @keyframes bounce {
1609      from, 20%, 53%, 80%, to {
1610          animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
1611          transform: translate3d(0,0,0);
1612      }
1613  
1614      40%, 43% {
1615          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1616          transform: translate3d(0, -12px, 0);
1617      }
1618  
1619      70% {
1620          animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
1621          transform: translate3d(0, -6px, 0);
1622      }
1623  
1624      90% {
1625          transform: translate3d(0,-1px,0);
1626      }
1627  }
1628  
1629  .customize-control-header .choice {
1630      position: relative;
1631      display: block;
1632      margin-bottom: 9px;
1633  }
1634  
1635  .customize-control-header .choice:focus {
1636      box-shadow: 0 0 0 2px #2271b1;
1637      /* Only visible in Windows High Contrast mode */
1638      outline: 2px solid transparent;
1639  }
1640  
1641  .customize-control-header .uploaded div:last-child > .choice {
1642      margin-bottom: 0;
1643  }
1644  
1645  .customize-control .attachment-media-view .thumbnail-image img,
1646  .customize-control-header img {
1647      max-width: 100%;
1648  }
1649  
1650  .customize-control .attachment-media-view .remove-button,
1651  .customize-control .attachment-media-view .default-button,
1652  .customize-control-header .remove {
1653      margin-left: 8px;
1654  }
1655  
1656  /* Background position control */
1657  .customize-control-background_position .background-position-control .button-group {
1658      display: block;
1659  }
1660  
1661  /**
1662   * Code Editor Control and Custom CSS Section
1663   *
1664   * Modifications to the Section Container to make the textarea full-width and
1665   * full-height, if the control is the only control in the section.
1666   */
1667  
1668  .customize-control-code_editor textarea {
1669      width: 100%;
1670      font-family: Consolas, Monaco, monospace;
1671      font-size: 12px;
1672      padding: 6px 8px;
1673      tab-size: 2;
1674  }
1675  .customize-control-code_editor textarea,
1676  .customize-control-code_editor .CodeMirror {
1677      height: 14em;
1678  }
1679  
1680  #customize-controls .customize-section-description-container.section-meta.customize-info {
1681      border-bottom: none;
1682  }
1683  
1684  #sub-accordion-section-custom_css .customize-control-notifications-container {
1685      margin-bottom: 15px;
1686  }
1687  
1688  #customize-control-custom_css textarea {
1689      display: block;
1690      height: 500px;
1691  }
1692  
1693  .customize-section-description-container + #customize-control-custom_css .customize-control-title {
1694      margin-right: 12px;
1695  }
1696  
1697  .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1698      border-left: 0;
1699      border-right: 0;
1700      height: calc( 100vh - 185px );
1701      resize: none;
1702  }
1703  
1704  .customize-section-description-container + #customize-control-custom_css:last-child {
1705      margin-right: -12px;
1706      width: 299px;
1707      width: calc( 100% + 24px );
1708      margin-bottom: -12px;
1709  }
1710  
1711  .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
1712      height: calc( 100vh - 185px );
1713  }
1714  
1715  .CodeMirror-lint-tooltip,
1716  .CodeMirror-hints {
1717      z-index: 500000 !important;
1718  }
1719  
1720  .customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
1721      margin-right: 12px;
1722      margin-left: 12px;
1723  }
1724  
1725  .theme-browser .theme.active .theme-actions,
1726  .wp-customizer .theme-browser .theme .theme-actions {
1727      padding: 9px 15px;
1728      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
1729  }
1730  
1731  @media screen and (max-width: 640px) {
1732      .customize-section-description-container + #customize-control-custom_css:last-child {
1733          margin-left: 0;
1734      }
1735  
1736      .customize-section-description-container + #customize-control-custom_css:last-child textarea {
1737          height: calc( 100vh - 140px );
1738      }
1739  }
1740  
1741  /**
1742   * Themes
1743   */
1744  
1745  #customize-theme-controls .control-panel-themes {
1746      border-bottom: none;
1747  }
1748  
1749  #customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
1750  #customize-theme-controls .control-panel-themes > .accordion-section-title {
1751      cursor: default;
1752      background: #fff;
1753      color: #50575e;
1754      border-top: 1px solid #dcdcde;
1755      border-bottom: 1px solid #dcdcde;
1756      border-right: none;
1757      border-left: none;
1758      margin: 0 0 15px;
1759      padding: 12px 15px 15px 100px; /* Space for the button */
1760  }
1761  
1762  #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
1763  #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
1764      border-top: 0;
1765  }
1766  
1767  #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
1768  #customize-theme-controls .control-section-themes > .accordion-section-title {
1769      margin: 0 0 15px;
1770  }
1771  
1772  #customize-controls .customize-themes-panel .accordion-section-title:hover,
1773  #customize-controls .customize-themes-panel .accordion-section-title {
1774      margin: 15px -8px;
1775  }
1776  
1777  #customize-controls .control-section-themes .accordion-section-title,
1778  #customize-controls .customize-themes-panel .accordion-section-title {
1779      padding-left: 100px; /* Space for the button */
1780  }
1781  
1782  .control-panel-themes .accordion-section-title span.customize-action,
1783  #customize-controls .customize-section-title span.customize-action,
1784  #customize-controls .control-section-themes .accordion-section-title span.customize-action,
1785  #customize-controls .customize-section-title span.customize-action {
1786      font-size: 13px;
1787      display: block;
1788      font-weight: 400;
1789  }
1790  
1791  #customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
1792      position: absolute;
1793      left: 10px;
1794      top: 50%;
1795      margin-top: -14px;
1796      font-weight: 400;
1797  }
1798  
1799  #customize-notifications-area .notification-message button.switch-to-editor {
1800      display: block;
1801      margin-top: 6px;
1802      font-weight: 400;
1803  }
1804  
1805  #customize-theme-controls .control-panel-themes > .accordion-section-title:after {
1806      display: none;
1807  }
1808  
1809  .control-panel-themes .customize-themes-full-container {
1810      position: fixed;
1811      top: 0;
1812      right: 0;
1813      transition: .18s right ease-in-out;
1814      margin: 0 300px 0 0;
1815      padding: 71px 0 25px;
1816      overflow-y: scroll;
1817      width: calc(100% - 300px);
1818      height: calc(100% - 96px);
1819      background: #f0f0f1;
1820      z-index: 20;
1821  }
1822  
1823  @media (prefers-reduced-motion: reduce) {
1824      .control-panel-themes .customize-themes-full-container {
1825          transition: none;
1826      }
1827  }
1828  
1829  @media screen and (min-width: 1670px) {
1830      .control-panel-themes .customize-themes-full-container {
1831          width: 82%;
1832          left: 0;
1833          right: initial;
1834      }
1835  }
1836  
1837  .modal-open .control-panel-themes .customize-themes-full-container {
1838      overflow-y: visible;
1839  }
1840  
1841  /* Animations for opening the themes panel */
1842  #customize-save-button-wrapper,
1843  #customize-header-actions .spinner,
1844  #customize-header-actions .customize-controls-preview-toggle {
1845      transition: .18s margin ease-in-out;
1846  }
1847  
1848  #customize-footer-actions,
1849  #customize-footer-actions .collapse-sidebar {
1850      bottom: 0;
1851      transition: .18s bottom ease-in-out;
1852  }
1853  
1854  .in-themes-panel:not(.animating) #customize-header-actions .spinner,
1855  .in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
1856  .in-themes-panel:not(.animating) #customize-preview,
1857  .in-themes-panel:not(.animating) #customize-footer-actions {
1858      visibility: hidden;
1859  }
1860  
1861  .wp-full-overlay.in-themes-panel {
1862      background: #f0f0f1; /* Prevents a black flash when fading in the panel */
1863  }
1864  
1865  .in-themes-panel #customize-save-button-wrapper,
1866  .in-themes-panel #customize-header-actions .spinner,
1867  .in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
1868      margin-top: -46px; /* Height of header actions bar */
1869  }
1870  
1871  .in-themes-panel #customize-footer-actions,
1872  .in-themes-panel #customize-footer-actions .collapse-sidebar {
1873      bottom: -45px;
1874  }
1875  
1876  /* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
1877  .in-themes-panel.animating .control-panel-themes .filter-themes-count {
1878      display: none;
1879  }
1880  
1881  .in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
1882      bottom: 0;
1883  }
1884  
1885  .themes-filter-bar .feature-filter-toggle:before {
1886      content: "\f111";
1887      margin: 0 0 0 5px;
1888      font: normal 16px/1 dashicons;
1889      vertical-align: text-bottom;
1890      -webkit-font-smoothing: antialiased;
1891      -moz-osx-font-smoothing: grayscale;
1892  }
1893  
1894  .themes-filter-bar .feature-filter-toggle.open {
1895      background: #f0f0f1;
1896      border-color: #8c8f94;
1897      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
1898  }
1899  
1900  .themes-filter-bar .feature-filter-toggle .filter-count-filters {
1901      display: none;
1902  }
1903  
1904  .filter-drawer {
1905      box-sizing: border-box;
1906      width: 100%;
1907      position: absolute;
1908      top: 46px;
1909      right: 0;
1910      padding: 25px 25px 25px 0;
1911      border-top: 0;
1912      margin: 0;
1913      background: #f0f0f1;
1914      border-bottom: 1px solid #dcdcde;
1915  }
1916  
1917  .filter-drawer .filter-group {
1918      margin: 0 0 0 25px;
1919      width: calc( (100% - 75px) / 3);
1920      min-width: 200px;
1921      max-width: 320px;
1922  }
1923  
1924  /* Adds a delay before fading in to avoid it "jumping" */
1925  @keyframes themes-fade-in {
1926      0% {
1927          opacity: 0;
1928      }
1929      50% {
1930          opacity: 0;
1931      }
1932      100% {
1933          opacity: 1;
1934      }
1935  }
1936  
1937  .control-panel-themes .customize-themes-full-container.animate {
1938      animation: .6s themes-fade-in 1;
1939  }
1940  
1941  .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
1942      animation: .6s themes-fade-in 1;
1943  }
1944  
1945  .control-panel-themes .filter-themes-count .themes-displayed {
1946      font-weight: 600;
1947      color: #50575e;
1948  }
1949  
1950  .customize-themes-notifications {
1951      margin: 0;
1952  }
1953  
1954  .control-panel-themes .customize-themes-notifications .notice {
1955      margin: 0 0 25px;
1956  }
1957  
1958  .customize-themes-full-container .customize-themes-section {
1959      display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1960      overflow: hidden;
1961  }
1962  
1963  .customize-themes-full-container .customize-themes-section.current-section {
1964      display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
1965  }
1966  
1967  .control-section .customize-section-text-before {
1968      padding: 0 15px 8px 0;
1969      margin: 15px 0 0;
1970      line-height: 16px;
1971      border-bottom: 1px solid #dcdcde;
1972      color: #50575e;
1973  }
1974  
1975  .control-panel-themes .customize-themes-section-title {
1976      width: 100%;
1977      background: #fff;
1978      box-shadow: none;
1979      outline: none;
1980      border-top: none;
1981      border-bottom: 1px solid #dcdcde;
1982      border-right: 4px solid #fff;
1983      border-left: none;
1984      cursor: pointer;
1985      padding: 10px 15px;
1986      position: relative;
1987      text-align: right;
1988      font-size: 14px;
1989      font-weight: 600;
1990      color: #50575e;
1991      text-shadow: none;
1992  }
1993  
1994  .control-panel-themes #accordion-section-installed_themes {
1995      border-top: 1px solid #dcdcde;
1996  }
1997  
1998  .control-panel-themes .theme-section {
1999      margin: 0;
2000      position: relative;
2001  }
2002  
2003  .control-panel-themes .customize-themes-section-title:focus,
2004  .control-panel-themes .customize-themes-section-title:hover {
2005      border-right-color: #2271b1;
2006      color: #2271b1;
2007      background: #f6f7f7;
2008  }
2009  
2010  .customize-themes-section-title:not(.selected):after {
2011      content: "";
2012      display: block;
2013      position: absolute;
2014      top: 9px;
2015      left: 15px;
2016      width: 18px;
2017      height: 18px;
2018      border-radius: 100%;
2019      border: 1px solid #c3c4c7;
2020      background: #fff;
2021  }
2022  
2023  .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
2024      content: "\f147";
2025      font: 16px/1 dashicons;
2026      box-sizing: border-box;
2027      width: 20px;
2028      height: 20px;
2029      padding: 3px 1px 1px 3px; /* Re-align the icon to the smaller grid */
2030      border-radius: 100%;
2031      position: absolute;
2032      top: 9px;
2033      left: 15px;
2034      background: #2271b1;
2035      color: #fff;
2036  }
2037  
2038  .control-panel-themes .customize-themes-section-title.selected {
2039      color: #2271b1;
2040  }
2041  
2042  #customize-theme-controls .themes.accordion-section-content {
2043      position: relative;
2044      right: 0;
2045      padding: 0;
2046      width: 100%;
2047  }
2048  
2049  .loading .customize-themes-section .spinner {
2050      display: block;
2051      visibility: visible;
2052      position: relative;
2053      clear: both;
2054      width: 20px;
2055      height: 20px;
2056      right: calc(50% - 10px);
2057      float: none;
2058      margin-top: 50px;
2059  }
2060  
2061  .customize-themes-section .no-themes,
2062  .customize-themes-section .no-themes-local {
2063      display: none;
2064  }
2065  
2066  .themes-section-installed_themes .theme .notice-success:not(.updated-message) {
2067      display: none; /* Hide "installed" notice on installed themes tab. */
2068  }
2069  
2070  .customize-control-theme .theme {
2071      width: 100%;
2072      margin: 0;
2073      border: 1px solid #dcdcde;
2074      background: #fff;
2075  }
2076  
2077  .customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
2078      background: #fff;
2079      border: none;
2080  }
2081  
2082  .customize-control.customize-control-theme { /* override most properties on .customize-control */
2083      box-sizing: border-box;
2084      width: 25%;
2085      max-width: 600px; /* Max. screenshot size / 2 */
2086      margin: 0 0 25px 25px;
2087      padding: 0;
2088      clear: none;
2089  }
2090  
2091  /* 5 columns above 2100px */
2092  @media screen and (min-width: 2101px) {
2093      .customize-control.customize-control-theme {
2094          width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
2095      }
2096  }
2097  
2098  /* 4 columns up to 2100px */
2099  @media screen and (min-width: 1601px) and (max-width: 2100px) {
2100      .customize-control.customize-control-theme {
2101          width: calc( ( 100% - 100px ) / 4 - 1px );
2102      }
2103  }
2104  
2105  /* 3 columns up to 1600px */
2106  @media screen and (min-width: 1201px) and (max-width: 1600px) {
2107      .customize-control.customize-control-theme {
2108          width: calc( ( 100% - 75px ) / 3 - 1px );
2109      }
2110  }
2111  
2112  /* 2 columns up to 1200px */
2113  @media screen and (min-width: 851px) and (max-width: 1200px) {
2114      .customize-control.customize-control-theme {
2115          width: calc( ( 100% - 50px ) / 2 - 1px );
2116  
2117      }
2118  }
2119  
2120  /* 1 column up to 850 px */
2121  @media screen and (max-width: 850px) {
2122      .customize-control.customize-control-theme {
2123          width: 100%;
2124      }
2125  }
2126  
2127  .wp-customizer .theme-browser .themes {
2128      padding: 0 25px 25px 0;
2129      transition: .18s margin-top linear;
2130  }
2131  
2132  .wp-customizer .theme-browser .theme .theme-actions {
2133      opacity: 1;
2134  }
2135  
2136  #customize-controls h3.theme-name {
2137      font-size: 15px;
2138  }
2139  
2140  #customize-controls .theme-overlay .theme-name {
2141      font-size: 32px;
2142  }
2143  
2144  .customize-preview-header.themes-filter-bar {
2145      position: fixed;
2146      top: 0;
2147      right: 300px;
2148      width: calc(100% - 300px);
2149      height: 46px;
2150      background: #f0f0f1;
2151      z-index: 10;
2152      padding: 6px 25px;
2153      box-sizing: border-box;
2154      border-bottom: 1px solid #dcdcde;
2155  }
2156  .customize-preview-header.themes-filter-bar,
2157  .customize-preview-header.themes-filter-bar .search-form {
2158      display: flex;
2159      align-items: center;
2160      gap: 10px;
2161      flex-wrap: wrap;
2162  }
2163  
2164  .customize-preview-header.themes-filter-bar .search-form-input {
2165      position: relative;
2166  }
2167  
2168  .customize-preview-header .filter-themes-wrapper {
2169      display: grid;
2170      align-items: center;
2171      gap: 10px;
2172      grid-template-columns: auto 1fr;
2173  }
2174  
2175  .customize-preview-header .filter-themes-wrapper .filter-themes-count {
2176      justify-self: end;
2177  }
2178  
2179  @media screen and (min-width: 1670px) {
2180      .customize-preview-header.themes-filter-bar {
2181          width: 82%;
2182          left: 0;
2183          right: initial;
2184      }
2185  }
2186  
2187  .themes-filter-bar .themes-filter-container {
2188      margin: 0;
2189      padding: 0;
2190      display: flex;
2191      align-items: center;
2192      gap: 10px;
2193  }
2194  
2195  .themes-filter-bar .wp-filter-search {
2196      line-height: 1.8;
2197      padding: 6px 30px 6px 10px;
2198      max-width: 100%;
2199      width: 40%;
2200      min-width: 300px;
2201      height: 32px;
2202      margin: 1px 0;
2203      top: 0;
2204      right: 0;
2205  }
2206  
2207  /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
2208     current length of .org feature filters assuming translations do not wrap lines. */
2209  @media screen and (max-height: 540px), screen and (max-width: 1018px) {
2210      .customize-preview-header.themes-filter-bar {
2211          position: relative;
2212          right: 0;
2213          width: 100%;
2214          margin: 0 0 25px;
2215      }
2216      .filter-drawer {
2217          top: 46px;
2218      }
2219      .wp-customizer .theme-browser .themes {
2220          padding: 0 25px 25px 0;
2221          overflow: hidden;
2222      }
2223  
2224      .control-panel-themes .customize-themes-full-container {
2225          margin-top: 0;
2226          padding: 0;
2227          height: 100%;
2228          width: calc(100% - 300px);
2229      }
2230  }
2231  
2232  @media screen and (max-width: 1018px) {
2233      .filter-drawer .filter-group {
2234          width: calc( (100% - 50px) / 2);
2235      }
2236  }
2237  
2238  @media screen and (max-width: 960px) {
2239      .customize-preview-header.themes-filter-bar {
2240          height: 96px;
2241      }
2242  }
2243  
2244  @media screen and (max-width: 900px) {
2245      .themes-filter-bar .wp-filter-search {
2246          width: 100%;
2247          margin: 0;
2248          min-width: 200px;
2249      }
2250  
2251      .customize-preview-header.themes-filter-bar,
2252      .customize-preview-header.themes-filter-bar .search-form
2253      .themes-filter-bar .themes-filter-container {
2254          display: grid;
2255          gap: 4px;
2256      }
2257  
2258      .customize-preview-header.themes-filter-bar .search-form-input {
2259          display: flex;
2260          flex-grow: 1;
2261      }
2262  
2263      .filter-drawer {
2264          top: 86px;
2265      }
2266  
2267      .control-panel-themes .filter-themes-count {
2268          float: right;
2269      }
2270  }
2271  
2272  @media screen and (max-width: 792px) {
2273      .filter-drawer .filter-group {
2274          width: calc( 100% - 25px);
2275      }
2276  }
2277  
2278  .control-panel-themes .customize-themes-mobile-back {
2279      display: none;
2280  }
2281  
2282  /* Mobile - toggle between themes and filters */
2283  @media screen and (max-width: 600px) {
2284  
2285      .filter-drawer {
2286          top: 132px;
2287      }
2288  
2289      .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
2290          display: block;
2291          float: left;
2292      }
2293  
2294      .control-panel-themes .customize-themes-full-container {
2295          width: 100%;
2296          margin: 0;
2297          padding-top: 46px;
2298          height: calc(100% - 46px);
2299          z-index: 1;
2300          display: none;
2301      }
2302  
2303      .showing-themes .control-panel-themes .customize-themes-full-container {
2304          display: block;
2305      }
2306  
2307      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
2308          display: block;
2309          position: fixed;
2310          top: 0;
2311          right: 0;
2312          background: #f0f0f1;
2313          color: #3c434a;
2314          border-radius: 0;
2315          box-shadow: none;
2316          border: none;
2317          height: 46px;
2318          width: 100%;
2319          z-index: 10;
2320          text-align: right;
2321          text-shadow: none;
2322          border-bottom: 1px solid #dcdcde;
2323          border-right: 4px solid transparent;
2324          margin: 0;
2325          padding: 0;
2326          font-size: 0;
2327          overflow: hidden;
2328      }
2329  
2330      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
2331          right: 0;
2332          top: 0;
2333          height: 46px;
2334          width: 26px;
2335          display: block;
2336          line-height: 2.3;
2337          padding: 0 8px;
2338          border-left: 1px solid #dcdcde;
2339      }
2340  
2341      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
2342      .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
2343          color: #2271b1;
2344          background: #f6f7f7;
2345          border-right-color: #2271b1;
2346          box-shadow: none;
2347          /* Only visible in Windows High Contrast mode */
2348          outline: 2px solid transparent;
2349          outline-offset: -2px;
2350      }
2351  
2352      .showing-themes #customize-header-actions {
2353          display: none;
2354      }
2355  
2356      #customize-controls {
2357          width: 100%;
2358      }
2359  }
2360  
2361  /* Details View */
2362  .wp-customizer .theme-overlay {
2363      display: none;
2364  }
2365  
2366  .wp-customizer.modal-open .theme-overlay {
2367      position: fixed;
2368      right: 0;
2369      top: 0;
2370      left: 0;
2371      bottom: 0;
2372      z-index: 109;
2373  }
2374  
2375  /* Avoid a z-index war by resetting elements that should be under the overlay.
2376     This is likely required because of the way that sections and panels are positioned. */
2377  .wp-customizer.modal-open #customize-header-actions,
2378  .wp-customizer.modal-open .control-panel-themes .filter-themes-count,
2379  .wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
2380      z-index: -1;
2381  }
2382  
2383  .wp-full-overlay.in-themes-panel.themes-panel-expanded #customize-controls .wp-full-overlay-sidebar-content {
2384      overflow: visible;
2385  }
2386  
2387  .wp-customizer .theme-overlay .theme-backdrop {
2388      background: rgba(240, 240, 241, 0.75);
2389      position: fixed;
2390      z-index: 110;
2391  }
2392  
2393  .wp-customizer .theme-overlay .star-rating {
2394      float: right;
2395      margin-left: 8px;
2396  }
2397  
2398  .wp-customizer .theme-rating .num-ratings {
2399      line-height: 20px;
2400  }
2401  
2402  .wp-customizer .theme-overlay .theme-wrap {
2403      right: 90px;
2404      left: 90px;
2405      top: 45px;
2406      bottom: 45px;
2407      z-index: 120;
2408  }
2409  
2410  .wp-customizer .theme-overlay .theme-actions {
2411      text-align: left; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
2412      padding: 10px 25px 5px;
2413      background: #f0f0f1;
2414      border-top: 1px solid #dcdcde;
2415  }
2416  
2417  .wp-customizer .theme-overlay .theme-actions .theme-install.preview {
2418      margin-right: 8px;
2419  }
2420  
2421  .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
2422      overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
2423  }
2424  
2425  .wp-customizer .theme-header {
2426      background: #f0f0f1;
2427  }
2428  
2429  .wp-customizer .theme-overlay .theme-header button,
2430  .wp-customizer .theme-overlay .theme-header .close:before {
2431      color: #3c434a;
2432  }
2433  
2434  .wp-customizer .theme-overlay .theme-header .close:focus,
2435  .wp-customizer .theme-overlay .theme-header .close:hover,
2436  .wp-customizer .theme-overlay .theme-header .right:focus,
2437  .wp-customizer .theme-overlay .theme-header .right:hover,
2438  .wp-customizer .theme-overlay .theme-header .left:focus,
2439  .wp-customizer .theme-overlay .theme-header .left:hover {
2440      background: #fff;
2441      border-bottom: 4px solid #2271b1;
2442      color: #2271b1;
2443  }
2444  
2445  .wp-customizer .theme-overlay .theme-header .close:focus:before,
2446  .wp-customizer .theme-overlay .theme-header .close:hover:before {
2447      color: #2271b1;
2448  }
2449  
2450  .wp-customizer .theme-overlay .theme-header button.disabled,
2451  .wp-customizer .theme-overlay .theme-header button.disabled:hover,
2452  .wp-customizer .theme-overlay .theme-header button.disabled:focus {
2453      border-bottom: none;
2454      background: transparent;
2455      color: #c3c4c7;
2456  }
2457  
2458  /* Small Screens */
2459  @media (max-width: 850px), (max-height: 472px) {
2460      .wp-customizer .theme-overlay .theme-wrap {
2461          right: 0;
2462          left: 0;
2463          top: 0;
2464          bottom: 0;
2465      }
2466  
2467      .wp-customizer .theme-browser .themes {
2468          padding-left: 25px;
2469      }
2470  }
2471  
2472  /* Handle cheaters. */
2473  body.cheatin {
2474      font-size: medium;
2475      height: auto;
2476      background: #fff;
2477      border: 1px solid #c3c4c7;
2478      margin: 50px auto 2em;
2479      padding: 1em 2em;
2480      max-width: 700px;
2481      min-width: 0;
2482      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2483  }
2484  
2485  body.cheatin h1 {
2486      border-bottom: 1px solid #dcdcde;
2487      clear: both;
2488      color: #50575e;
2489      font-size: 24px;
2490      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2491      margin: 30px 0 0;
2492      padding: 0 0 7px;
2493  }
2494  
2495  body.cheatin p {
2496      font-size: 14px;
2497      line-height: 1.5;
2498      margin: 25px 0 20px;
2499  }
2500  
2501  /**
2502   * Widgets and Menus common styles
2503   */
2504  
2505  /* higher specificity than .wp-core-ui .button */
2506  #customize-theme-controls .add-new-widget,
2507  #customize-theme-controls .add-new-menu-item {
2508      cursor: pointer;
2509      float: left;
2510      margin: 0 10px 0 0;
2511      transition: all 0.2s;
2512      -webkit-user-select: none;
2513      user-select: none;
2514      outline: none;
2515  }
2516  
2517  .reordering .add-new-widget,
2518  .reordering .add-new-menu-item {
2519      opacity: 0.2;
2520      pointer-events: none;
2521      cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
2522  }
2523  
2524  .add-new-widget:before,
2525  .add-new-menu-item:before,
2526  #available-menu-items .new-content-item .add-content:before {
2527      content: "\f132";
2528      display: inline-block;
2529      position: relative;
2530      right: -2px;
2531      top: 0;
2532      font: normal 20px/1 dashicons;
2533      vertical-align: middle;
2534      transition: all 0.2s;
2535      -webkit-font-smoothing: antialiased;
2536      -moz-osx-font-smoothing: grayscale;
2537  }
2538  
2539  /* Reordering */
2540  .reorder-toggle {
2541      float: left;
2542      padding: 5px 8px;
2543      text-decoration: none;
2544      cursor: pointer;
2545      outline: none;
2546  }
2547  
2548  .reorder,
2549  .reordering .reorder-done {
2550      display: block;
2551      padding: 5px 8px;
2552  }
2553  
2554  .reorder-done,
2555  .reordering .reorder {
2556      display: none;
2557  }
2558  
2559  .widget-reorder-nav span,
2560  .menu-item-reorder-nav button {
2561      position: relative;
2562      overflow: hidden;
2563      float: right;
2564      display: block;
2565      width: 33px; /* was 42px for mobile */
2566      height: 43px;
2567      color: #8c8f94;
2568      text-indent: -9999px;
2569      cursor: pointer;
2570      outline: none;
2571  }
2572  
2573  .menu-item-reorder-nav button {
2574      width: 30px;
2575      height: 40px;
2576      background: transparent;
2577      border: none;
2578      box-shadow: none;
2579  }
2580  
2581  .widget-reorder-nav span:before,
2582  .menu-item-reorder-nav button:before {
2583      display: inline-block;
2584      position: absolute;
2585      top: 0;
2586      left: 0;
2587      width: 100%;
2588      height: 100%;
2589      font: normal 20px/43px dashicons;
2590      text-align: center;
2591      text-indent: 0;
2592      -webkit-font-smoothing: antialiased;
2593      -moz-osx-font-smoothing: grayscale;
2594  }
2595  
2596  .widget-reorder-nav span:hover,
2597  .widget-reorder-nav span:focus,
2598  .menu-item-reorder-nav button:hover,
2599  .menu-item-reorder-nav button:focus {
2600      color: #1d2327;
2601      background: #f0f0f1;
2602  }
2603  
2604  .move-widget-down:before,
2605  .menus-move-down:before {
2606      content: "\f347";
2607  }
2608  
2609  .move-widget-up:before,
2610  .menus-move-up:before {
2611      content: "\f343";
2612  }
2613  
2614  #customize-theme-controls .first-widget .move-widget-up,
2615  #customize-theme-controls .last-widget .move-widget-down,
2616  .move-up-disabled .menus-move-up,
2617  .move-down-disabled .menus-move-down,
2618  .move-right-disabled .menus-move-right,
2619  .move-left-disabled .menus-move-left {
2620      color: #dcdcde;
2621      background-color: #fff;
2622      cursor: default;
2623      pointer-events: none;
2624  }
2625  
2626  /**
2627   * New widget and Add-menu-items modes and panels
2628   */
2629  
2630  .wp-full-overlay-main {
2631      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. */
2632      width: 100%;
2633  }
2634  
2635  body.adding-widget .add-new-widget,
2636  body.adding-widget .add-new-widget:hover,
2637  .adding-menu-items .add-new-menu-item,
2638  .adding-menu-items .add-new-menu-item:hover,
2639  .add-menu-toggle.open,
2640  .add-menu-toggle.open:hover {
2641      background: #f0f0f1;
2642      border-color: #8c8f94;
2643      color: #2c3338;
2644      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
2645  }
2646  
2647  body.adding-widget .add-new-widget:before,
2648  .adding-menu-items .add-new-menu-item:before,
2649  #accordion-section-add_menu .add-new-menu-item.open:before {
2650      transform: rotate(-45deg);
2651  }
2652  
2653  #available-widgets,
2654  #available-menu-items {
2655      position: absolute;
2656      top: 0;
2657      bottom: 0;
2658      right: -301px;
2659      visibility: hidden;
2660      overflow-x: hidden;
2661      overflow-y: auto;
2662      width: 300px;
2663      margin: 0;
2664      z-index: 4;
2665      background: #f0f0f1;
2666      transition: right .18s;
2667      border-left: 1px solid #dcdcde;
2668  }
2669  
2670  #available-widgets .customize-section-title,
2671  #available-menu-items .customize-section-title {
2672      border: 0;
2673      clip-path: inset(50%);
2674      height: 1px;
2675      margin: -1px;
2676      overflow: hidden;
2677      padding: 0;
2678      position: absolute;
2679      width: 1px;
2680      word-wrap: normal !important;
2681  }
2682  
2683  #available-widgets .customize-section-title button,
2684  #available-menu-items .customize-section-title button {
2685      display: none;
2686  }
2687  
2688  #available-widgets-list {
2689      top: 82px;
2690      position: absolute;
2691      overflow: auto;
2692      bottom: 0;
2693      width: 100%;
2694      border-top: 1px solid #dcdcde;
2695  }
2696  
2697  .no-widgets-found #available-widgets-list {
2698      border-top: none;
2699  }
2700  
2701  #available-widgets-filter {
2702      position: fixed;
2703      top: 0;
2704      z-index: 1;
2705      width: 300px;
2706      background: #f0f0f1;
2707  }
2708  
2709  /* search field container */
2710  #available-widgets-filter,
2711  #available-menu-items-search .accordion-section-title {
2712      padding: 13px 15px;
2713      box-sizing: border-box;
2714  }
2715  
2716  #available-widgets-filter input,
2717  #available-menu-items-search input {
2718      width: 100%;
2719      min-height: 32px;
2720      margin: 1px 0;
2721      padding: 0 30px;
2722  }
2723  
2724  #available-widgets-filter input::-ms-clear,
2725  #available-menu-items-search input::-ms-clear {
2726      display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
2727  }
2728  
2729  #available-menu-items-search .search-icon,
2730  #available-widgets-filter .search-icon {
2731      display: block;
2732      position: absolute;
2733      bottom: 15px; /* 13 container padding +1 input margin +1 input border */
2734      right: 16px;
2735      width: 30px;
2736      height: 30px;
2737      line-height: 2.1;
2738      text-align: center;
2739      color: #646970;
2740  }
2741  
2742  #available-widgets-filter .clear-results,
2743  #available-menu-items-search .accordion-section-title .clear-results {
2744      position: absolute;
2745      top: 36px; /* 13 container padding +1 input margin +1 input border */
2746      left: 16px;
2747      width: 30px;
2748      height: 30px;
2749      padding: 0;
2750      border: 0;
2751      cursor: pointer;
2752      background: none;
2753      color: #d63638;
2754      text-decoration: none;
2755      outline: 0;
2756  }
2757  
2758  #available-widgets-filter .clear-results,
2759  #available-menu-items-search .clear-results,
2760  #available-menu-items-search.loading .clear-results.is-visible {
2761      display: none;
2762  }
2763  
2764  #available-widgets-filter .clear-results.is-visible,
2765  #available-menu-items-search .clear-results.is-visible {
2766      display: block;
2767  }
2768  
2769  #available-widgets-filter .clear-results:before,
2770  #available-menu-items-search .clear-results:before {
2771      content: "\f335";
2772      font: normal 20px/1 dashicons;
2773      vertical-align: middle;
2774      -webkit-font-smoothing: antialiased;
2775      -moz-osx-font-smoothing: grayscale;
2776  }
2777  
2778  #available-widgets-filter .clear-results:hover,
2779  #available-widgets-filter .clear-results:focus,
2780  #available-menu-items-search .clear-results:hover,
2781  #available-menu-items-search .clear-results:focus {
2782      color: #d63638;
2783  }
2784  
2785  #available-widgets-filter .clear-results:focus,
2786  #available-menu-items-search .clear-results:focus {
2787      box-shadow: 0 0 0 2px #2271b1;
2788      /* Only visible in Windows High Contrast mode */
2789      outline: 2px solid transparent;
2790  }
2791  
2792  #available-menu-items-search .search-icon:after,
2793  #available-widgets-filter .search-icon:after,
2794  .themes-filter-bar .search-icon:after {
2795      content: "\f179";
2796      font: normal 20px/1 dashicons;
2797      vertical-align: middle;
2798      -webkit-font-smoothing: antialiased;
2799      -moz-osx-font-smoothing: grayscale;
2800  }
2801  
2802  .themes-filter-bar .search-icon {
2803      position: absolute;
2804      top: 2px;
2805      right: 2px;
2806      z-index: 1;
2807      color: #646970;
2808      height: 30px;
2809      width: 30px;
2810      line-height: 2;
2811      text-align: center;
2812  }
2813  
2814  .no-widgets-found-message {
2815      display: none;
2816      margin: 0;
2817      padding: 0 15px;
2818      line-height: inherit;
2819  }
2820  
2821  .no-widgets-found .no-widgets-found-message {
2822      display: block;
2823  }
2824  
2825  #available-widgets .widget-top,
2826  #available-widgets .widget-top:hover,
2827  #available-menu-items .item-top,
2828  #available-menu-items .item-top:hover {
2829      border: none;
2830      background: transparent;
2831      box-shadow: none;
2832  }
2833  
2834  #available-widgets .widget-tpl,
2835  #available-menu-items .item-tpl {
2836      position: relative;
2837      padding: 15px 60px 15px 15px;
2838      background: #fff;
2839      border-bottom: 1px solid #dcdcde;
2840      border-right: 4px solid #fff;
2841      transition:
2842          .15s color ease-in-out,
2843          .15s background-color ease-in-out,
2844          .15s border-color ease-in-out;
2845      cursor: pointer;
2846      display: none;
2847  }
2848  
2849  #available-widgets .widget,
2850  #available-menu-items .item {
2851      position: static;
2852  }
2853  
2854  
2855  /* Responsive */
2856  .customize-controls-preview-toggle {
2857      display: none;
2858  }
2859  
2860  @media only screen and (max-width: 782px) {
2861      .wp-customizer .theme:not(.active):hover .theme-actions,
2862      .wp-customizer .theme:not(.active):focus .theme-actions {
2863          display: block;
2864      }
2865  
2866      .wp-customizer .theme-browser .theme.active .theme-name span {
2867          display: inline;
2868      }
2869  
2870      .customize-control-header button.random .dice {
2871          margin-top: 0;
2872      }
2873  
2874      .customize-control-radio .customize-inside-control-row,
2875      .customize-control-checkbox .customize-inside-control-row,
2876      .customize-control-nav_menu_auto_add .customize-inside-control-row {
2877          margin-right: 32px;
2878      }
2879  
2880      .customize-control-radio input,
2881      .customize-control-checkbox input,
2882      .customize-control-nav_menu_auto_add input {
2883          margin-right: -32px;
2884      }
2885  
2886      .customize-control input[type="radio"] + label + br,
2887      .customize-control input[type="checkbox"] + label + br {
2888          line-height: 2.5; /* For widgets checkboxes */
2889      }
2890  
2891      .customize-control .date-time-fields select {
2892          height: 39px;
2893      }
2894  
2895      .date-time-fields .date-input.month {
2896          width: 79px;
2897      }
2898  
2899      .date-time-fields .date-input.day,
2900      .date-time-fields .date-input.hour,
2901      .date-time-fields .date-input.minute {
2902          width: 55px;
2903      }
2904  
2905      .date-time-fields .date-input.year {
2906          width: 80px;
2907      }
2908  
2909      #customize-control-changeset_preview_link a {
2910          bottom: 16px;
2911      }
2912  
2913      .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
2914          bottom: 10px;
2915      }
2916  
2917      .media-widget-control .media-widget-buttons .button.edit-media,
2918      .media-widget-control .media-widget-buttons .button.change-media,
2919      .media-widget-control .media-widget-buttons .button.select-media {
2920          margin-top: 12px;
2921      }
2922  
2923      .customize-preview-header.themes-filter-bar .search-icon {
2924          top: 6px;
2925      }
2926  }
2927  
2928  @media screen and (max-width: 1200px) {
2929      .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2930      .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
2931      .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
2932          right: 67%;
2933      }
2934  }
2935  
2936  @media screen and (max-width: 640px) {
2937  
2938      /* when the sidebar is collapsed and switching to responsive view,
2939         bring it back see ticket #35220 */
2940      .wp-full-overlay.collapsed #customize-controls {
2941          margin-right: 0;
2942      }
2943  
2944      .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
2945          bottom: 0;
2946      }
2947  
2948      .customize-controls-preview-toggle {
2949          display: block;
2950          position: absolute;
2951          top: 0;
2952          right: 48px;
2953          line-height: 2.6;
2954          font-size: 14px;
2955          padding: 0 12px 4px;
2956          margin: 0;
2957          height: 45px;
2958          background: #f0f0f1;
2959          border: 0;
2960          border-left: 1px solid #dcdcde;
2961          border-top: 4px solid #f0f0f1;
2962          color: #50575e;
2963          cursor: pointer;
2964          transition: color .1s ease-in-out, background .1s ease-in-out;
2965      }
2966  
2967      #customize-footer-actions,
2968      /*#customize-preview,*/
2969      .customize-controls-preview-toggle .controls,
2970      .preview-only .wp-full-overlay-sidebar-content,
2971      .preview-only .customize-controls-preview-toggle .preview {
2972          display: none;
2973      }
2974  
2975      .preview-only #customize-save-button-wrapper {
2976          margin-top: -46px;
2977      }
2978  
2979      .customize-controls-preview-toggle .preview:before,
2980      .customize-controls-preview-toggle .controls:before {
2981          font: normal 20px/1 dashicons;
2982          content: "\f177";
2983          position: relative;
2984          top: 4px;
2985          margin-left: 6px;
2986      }
2987  
2988      .customize-controls-preview-toggle .controls:before {
2989          content: "\f540";
2990      }
2991  
2992      .preview-only #customize-controls {
2993          height: 45px;
2994      }
2995  
2996      .preview-only #customize-preview,
2997      .preview-only .customize-controls-preview-toggle .controls {
2998          display: block;
2999      }
3000  
3001      .wp-core-ui.wp-customizer .button {
3002          min-height: 30px;
3003          padding: 0 14px;
3004          line-height: 2;
3005          font-size: 14px;
3006          vertical-align: middle;
3007      }
3008  
3009      .customize-control .attachment-media-view .upload-button {
3010          padding: 5px 0;
3011      }
3012  
3013      #customize-control-changeset_status .customize-inside-control-row {
3014          padding-top: 15px;
3015      }
3016  
3017      body.adding-widget div#available-widgets,
3018      body.adding-menu-items div#available-menu-items,
3019      body.outer-section-open div#customize-sidebar-outer-content {
3020          width: 100%;
3021      }
3022  
3023      #available-widgets .customize-section-title,
3024      #available-menu-items .customize-section-title {
3025          border: 0;
3026          clip-path: none;
3027          height: inherit;
3028          margin: 0;
3029          overflow: hidden;
3030          padding: 0;
3031          width: auto;
3032          position: static;
3033      }
3034  
3035      #available-widgets .customize-section-title button,
3036      #available-menu-items .customize-section-title button {
3037          display: block;
3038      }
3039  
3040      #available-widgets .customize-section-back,
3041      #available-menu-items .customize-section-back {
3042          height: 69px;
3043      }
3044  
3045      #available-widgets .customize-section-title h3,
3046      #available-menu-items .customize-section-title h3 {
3047          font-size: 20px;
3048          font-weight: 200;
3049          padding: 9px 14px 12px 10px;
3050          margin: 0;
3051          line-height: 24px;
3052          color: #50575e;
3053          display: block;
3054          overflow: hidden;
3055          white-space: nowrap;
3056          text-overflow: ellipsis;
3057      }
3058  
3059      #available-widgets .customize-section-title .customize-action,
3060      #available-menu-items .customize-section-title .customize-action {
3061          font-size: 13px;
3062          display: block;
3063          font-weight: 400;
3064          overflow: hidden;
3065          white-space: nowrap;
3066          text-overflow: ellipsis;
3067      }
3068  
3069      #available-widgets-filter {
3070          position: relative;
3071          width: 100%;
3072          height: auto;
3073      }
3074  
3075      #available-widgets-list {
3076          top: 152px;
3077      }
3078  
3079      #available-menu-items-search .clear-results {
3080          top: 36px;
3081          left: 16px;
3082      }
3083  
3084      .reorder,
3085      .reordering .reorder-done {
3086          padding: 8px;
3087      }
3088  }
3089  
3090  @media screen and (max-width: 600px) {
3091      .wp-full-overlay.expanded {
3092          margin-right: 0;
3093      }
3094  
3095      body.adding-widget div#available-widgets,
3096      body.adding-menu-items div#available-menu-items,
3097      body.outer-section-open div#customize-sidebar-outer-content {
3098          top: 46px;
3099          z-index: 10;
3100      }
3101  
3102      body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content {
3103          right: -100%;
3104      }
3105  
3106      body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
3107          right: 0;
3108      }
3109  }