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