[Summary view] [Print] [Text view]

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