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