[Summary view] [Print] [Text view]

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