Source: /textpattern/admin-themes/hiveneutral/assets/css/textpattern.css - 6272 lines - 143501 bytes - Text - Print

Description: Add the correct display in various browsers.

   1  /* ==========================================================================
   2     Styling and layout for all media
   3     ========================================================================== */
   4  /* HTML5 display definitions
   5     ========================================================================== */
   6  /**
   7   * Add the correct display in various browsers.
   8   */
   9  article,
  10  aside,
  11  details,
  12  figcaption,
  13  figure,
  14  footer,
  15  header,
  16  main,
  17  menu,
  18  nav,
  19  section {
  20    display: block;
  21  }
  22  
  23  summary {
  24    display: list-item;
  25  }
  26  
  27  /**
  28   * Add the correct display in IE 11.
  29   */
  30  canvas {
  31    display: inline-block;
  32  }
  33  
  34  template {
  35    display: none;
  36  }
  37  
  38  /**
  39   * Remove tap delay in modern browsers.
  40   */
  41  a,
  42  input,
  43  button {
  44    -ms-touch-action: none;
  45        touch-action: none;
  46  }
  47  
  48  /* Float clearing
  49     ========================================================================== */
  50  /**
  51   * Clearfix using the 'A new micro clearfix hack' method.
  52   *
  53   * More info: http://nicolasgallagher.com/micro-clearfix-hack/
  54   */
  55  .clearfix::after {
  56    display: table;
  57    clear: both;
  58    content: "";
  59  }
  60  
  61  /**
  62   * Basic float clearer.
  63   */
  64  .clear {
  65    clear: both;
  66  }
  67  
  68  /* ==========================================================================
  69     Styling and layout for screen media
  70     ========================================================================== */
  71  @media screen {
  72    /* Links
  73     ========================================================================== */
  74    /**
  75   * 1. Specify link colour.
  76   * 2. Remove default underline style from non-hover state links.
  77   * 3. Interrupt the decoration line to let the shape of the text show through
  78   *    in supported browsers.
  79   * 4. Expanded CSS level 3 `text-decoration` property in supported browsers,
  80   *    older browsers will fallback to legacy `text-decoration` property.
  81   * 5. Hide `.busy` class links when processing AJAX.
  82   */
  83    a {
  84      /* 1 */
  85      color: #004cbf;
  86      /* 2 */
  87      text-decoration: none;
  88      /* 3 */
  89      -webkit-text-decoration-skip: ink edges;
  90              text-decoration-skip: ink edges;
  91    }
  92    a:hover, a:active {
  93      outline: 0;
  94      color: #0066ff;
  95      text-decoration: underline;
  96      /* 4 */
  97      text-decoration: #004cbf solid underline;
  98    }
  99    a:focus {
 100      outline: thin solid #0066ff;
 101    }
 102    a.busy {
 103      /* 5 */
 104      visibility: hidden;
 105    }
 106    /**
 107   * Additional styling for popup help links.
 108   *
 109   * Example HTML:
 110   *
 111   * <a class="pophelp">i</a>
 112   */
 113    .pophelp,
 114    .pophelpsubtle {
 115      padding: 0 0.4em;
 116      border: 1px solid #e0e0e0;
 117      border-radius: 50%;
 118      font-weight: normal;
 119    }
 120    .pophelp:focus,
 121    .pophelpsubtle:focus {
 122      border-color: #0066ff;
 123      outline: 0;
 124    }
 125    /**
 126   * Additional styling for popup help links in table headers.
 127   */
 128    .txp-list thead th a.pophelp {
 129      display: inline;
 130      margin: 0;
 131      padding: 0 0.4em;
 132      border-color: #cccccc;
 133      color: #004cbf;
 134    }
 135    .txp-list thead th a.pophelp:hover {
 136      color: #0066ff;
 137      text-decoration: underline;
 138    }
 139    .txp-list thead th a.pophelp:focus {
 140      border-color: #0066ff;
 141    }
 142    /**
 143   * Reduce risk of render glitches in links on RTL languages.
 144   */
 145    [dir="rtl"] a {
 146      unicode-bidi: embed;
 147    }
 148    /* Typography
 149     ========================================================================== */
 150    /**
 151   * Establish baseline.
 152   */
 153    html {
 154      font-size: 13px;
 155      line-height: 20px;
 156    }
 157    /**
 158   * Global font and colour.
 159   */
 160    body {
 161      font-family: Helvetica, Arial, sans-serif;
 162    }
 163    /**
 164   * `h1` headings.
 165   *
 166   * Example HTML:
 167   *
 168   * <h1>Heading</h1>
 169   * <h1>
 170   *     Heading
 171   *     <a class="pophelp">i</a>
 172   * </h1>
 173   */
 174    h1 {
 175      margin: 0.26923076923077em 0 0.5em;
 176      font-size: 26px;
 177      line-height: 1.23076923076923;
 178    }
 179    h1 .pophelp {
 180      font-size: 13px;
 181    }
 182    /**
 183   * Omit margin below heading on image edit, pages, forms, styles, prefs panels.
 184   */
 185    #page-image .txp-heading,
 186    #page-form .txp-heading,
 187    #page-page .txp-heading,
 188    #page-css .txp-heading,
 189    #page-prefs .txp-heading {
 190      margin-bottom: 0;
 191    }
 192    /**
 193   * `h2` headings.
 194   *
 195   * Example HTML:
 196   *
 197   * <h2>Heading</h2>
 198   * <h2>
 199   *     Heading
 200   *     <a class="pophelp">i</a>
 201   * </h2>
 202   */
 203    h2 {
 204      margin: 0.5em 0 0.72222222222222em;
 205      font-size: 18px;
 206      line-height: 1.33333333333333;
 207    }
 208    h2 .pophelp {
 209      font-size: 13px;
 210    }
 211    /**
 212   * `h3` headings.
 213   */
 214    h3 {
 215      margin: 0.86666666666667em 0;
 216      font-size: 15px;
 217      line-height: 1.4;
 218    }
 219    /**
 220   * Normalize `h4`, `h5` and `h6` headings (these are effectively unused).
 221   */
 222    h4,
 223    h5,
 224    h6 {
 225      margin: 1em 0;
 226      font-size: 13px;
 227    }
 228    /**
 229   * Add the correct font weight in Chrome, Edge, and Safari.
 230   */
 231    b,
 232    strong {
 233      font-weight: bolder;
 234    }
 235    /**
 236   * Add vertical margin to addresses.
 237   */
 238    address {
 239      margin: 1em 0;
 240    }
 241    /**
 242   * Additional styling for blockquotes.
 243   */
 244    blockquote {
 245      margin: 1em 0;
 246      padding: 0 0 0 1em;
 247      border-left: 3px solid #cccccc;
 248    }
 249    /**
 250   * 1. Remove the bottom border in Firefox.
 251   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 252   */
 253    abbr[title] {
 254      /* 1 */
 255      border-bottom: 0;
 256      /* 2 */
 257      text-decoration: underline;
 258      /* 2 */
 259      text-decoration: underline dotted;
 260    }
 261    /**
 262   * Add the correct font style.
 263   */
 264    dfn {
 265      font-style: italic;
 266    }
 267    /**
 268   * Consistent styling for `mark` and `var` tags.
 269   */
 270    mark,
 271    var {
 272      padding: 1px 0.23076923076923em;
 273      border-radius: 0.15em;
 274      background: #eaf3fc;
 275      color: #333333;
 276    }
 277    /**
 278   * Harmonize size and style of computer text.
 279   */
 280    pre,
 281    code,
 282    kbd,
 283    samp,
 284    .code {
 285      font-family: Menlo, Consolas, Monaco, monospace;
 286    }
 287    code,
 288    kbd,
 289    samp {
 290      padding: 1px 0.23076923076923em;
 291      border: 1px solid #e3e3e3;
 292      border-radius: 0.15em;
 293      background: #f7f7f7;
 294    }
 295    /**
 296   * Additional stylng for preformatted text/code.
 297   *
 298   * 1. Don't wrap long words.
 299   * 2. Contain overflow in all browsers.
 300   * 3. Set tab size to 4 spaces.
 301   */
 302    pre {
 303      margin: 1em 0;
 304      padding: 1em;
 305      border: 1px solid #e3e3e3;
 306      border-radius: 0.15em;
 307      background: #f7f7f7;
 308      /* 1 */
 309      word-wrap: normal;
 310      /* 2 */
 311      overflow-x: auto;
 312      /* 3 */
 313      -moz-tab-size: 4;
 314           tab-size: 4;
 315    }
 316    /**
 317   * Override `code` styling for code display within preformatted text areas and
 318   * form text areas.
 319   */
 320    pre code,
 321    .code code,
 322    code.body,
 323    code.excerpt {
 324      padding: 0;
 325      border: 0;
 326      border-radius: 0;
 327      background: none;
 328      text-align: left;
 329      white-space: pre;
 330      word-spacing: normal;
 331      word-break: normal;
 332      word-wrap: normal;
 333      direction: ltr;
 334      -webkit-hyphens: none;
 335          -ms-hyphens: none;
 336              hyphens: none;
 337    }
 338    /**
 339   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 340   */
 341    sub,
 342    sup.footnote,
 343    sup {
 344      position: relative;
 345      font-size: 0.69230769230769em;
 346      line-height: 0;
 347      vertical-align: baseline;
 348    }
 349    sup {
 350      top: -0.5em;
 351    }
 352    sub {
 353      bottom: -0.33333333333333em;
 354    }
 355    /**
 356   * Harmonize size and style of small text.
 357   */
 358    small,
 359    figcaption,
 360    tfoot,
 361    .footnote,
 362    .txp-form-field-instructions,
 363    .txp-footer {
 364      font-size: 11px;
 365      line-height: 16px;
 366    }
 367    figcaption,
 368    tfoot,
 369    .footnote,
 370    .txp-form-field-instructions {
 371      color: #777777;
 372    }
 373    figcaption {
 374      margin-top: 0.5em;
 375      font-style: italic;
 376    }
 377    /* Support for non-latin languages
 378     ========================================================================== */
 379    /**
 380   * Preferred font for Japanese language.
 381   */
 382    html[lang="ja-jp"] {
 383      font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
 384    }
 385    /**
 386   * Preferred font for Korean language.
 387   */
 388    html[lang="ko-kr"] {
 389      font-family: GulimChe, Gulim, sans-serif;
 390    }
 391    /**
 392   * Preferred font for Chinese (PRC) language.
 393   */
 394    html[lang="zh-cn"] {
 395      font-family: SimHei, sans-serif;
 396    }
 397    /**
 398   * Preferred font for Chinese (Taiwan) language.
 399   */
 400    html[lang="zh-tw"] {
 401      font-family: PMingLiU, sans-serif;
 402    }
 403    /* Embedded content
 404     ========================================================================== */
 405    /**
 406   * Add the correct display in IE 11.
 407   */
 408    audio,
 409    video {
 410      display: inline-block;
 411    }
 412    /**
 413   * Make embedded elements responsive.
 414   */
 415    img,
 416    video {
 417      max-width: 100%;
 418      height: auto;
 419    }
 420    /**
 421   * Images.
 422   *
 423   * 1. Remove the gap between images and the bottom of their containers.
 424   *
 425   * Image alignment (compatible with Textile markup syntax).
 426   *
 427   * Example HTML:
 428   *
 429   * <img class="align-left">
 430   * <img class="align-right">
 431   * <img class="align-center">
 432   */
 433    img {
 434      /* 1 */
 435      vertical-align: middle;
 436    }
 437    img.align-left {
 438      margin: 1em 1em 1em 0;
 439      float: left;
 440    }
 441    img.align-right {
 442      margin: 1em 0 1em 1em;
 443      float: right;
 444    }
 445    img.align-center {
 446      display: block;
 447      margin: 1em auto;
 448    }
 449    /**
 450   * Swap image alignment right/left positions in RTL languages.
 451   */
 452    [dir="rtl"] img.align-left {
 453      margin: 1em 0 1em 1em;
 454      float: right;
 455    }
 456    [dir="rtl"] img.align-right {
 457      margin: 1em 1em 1em 0;
 458      float: left;
 459    }
 460    /**
 461   * Address margin not present in Safari.
 462   */
 463    figure {
 464      margin: 0;
 465    }
 466    /**
 467   * Hide the overflow in IE 11.
 468   */
 469    svg:not(:root) {
 470      overflow: hidden;
 471    }
 472    /**
 473   * Content images and content images with links.
 474   *
 475   * Example HTML:
 476   *
 477   * <a>
 478   *     <img class="content-image">
 479   * </a>
 480   */
 481    .content-image {
 482      border: solid 1px #cccccc;
 483      background: #f7f7f7;
 484    }
 485    a:hover .content-image {
 486      border-color: #0066ff;
 487    }
 488    a:focus .content-image {
 489      border-color: #0066ff;
 490    }
 491    /* Messages
 492     ========================================================================== */
 493    /**
 494   * Alert labels.
 495   *
 496   * Example HTML:
 497   *
 498   * <span class="success">
 499   * <span class="error">
 500   * <strong class="success">
 501   * <strong class="error">
 502   */
 503    .success,
 504    .warning,
 505    .error,
 506    .information {
 507      padding: 1px 0.23076923076923em;
 508      border-radius: 0.15em;
 509    }
 510    .success {
 511      background: #dff0d8;
 512      color: #238c23;
 513    }
 514    .warning {
 515      background: #f7eedb;
 516      color: #cc8c00;
 517    }
 518    .error {
 519      background: #f2dede;
 520      color: #9d261d;
 521    }
 522    .information {
 523      background: #e7f6fc;
 524      color: #3a87ad;
 525    }
 526    /**
 527   * Highlight background.
 528   *
 529   * Example HTML:
 530   *
 531   * <table>
 532   *     <tr>
 533   *         <td class="highlight></td>
 534   *         <td></td>
 535   *     </tr>
 536   * </table>
 537   */
 538    .highlight {
 539      background: #fff9e1;
 540    }
 541    /**
 542   * Alert boxes.
 543   *
 544   * Example HTML:
 545   *
 546   * <p class="alert-block success">
 547   * <p class="alert-block error">
 548   */
 549    .alert-block {
 550      padding: 0.53846153846154em 1em;
 551      clear: both;
 552      border: 1px solid;
 553    }
 554    .alert-block.success {
 555      border-color: #a3d48e;
 556    }
 557    .alert-block.warning {
 558      border-color: #e4c788;
 559    }
 560    .alert-block.error {
 561      border-color: #e1b2b2;
 562    }
 563    .alert-block.information {
 564      border-color: #b1e2f5;
 565    }
 566    /**
 567   * System messages.
 568   *
 569   * Example HTML:
 570   *
 571   * <div id="messagepane">
 572   *     <span role="alert" class="error">
 573   *         Content
 574   *     </span>
 575   * </div>
 576   */
 577    #messagepane {
 578      position: fixed;
 579      bottom: 0;
 580      left: 50%;
 581      transform: translateX(-50%);
 582      text-align: center;
 583      z-index: 1000;
 584    }
 585    #messagepane span.success, #messagepane span.warning, #messagepane span.error {
 586      display: inline-block;
 587      max-width: 53.1538461538em;
 588      margin: 0 auto;
 589      padding: 0.53846153846154em 2.84615384615385em 0.53846153846154em 1em;
 590      border-radius: 0.3em 0.3em 0 0;
 591      color: #ffffff;
 592    }
 593    #messagepane span.success {
 594      background: #238c23;
 595    }
 596    #messagepane span.warning {
 597      background: #cc8c00;
 598    }
 599    #messagepane span.error {
 600      background: #9d261d;
 601    }
 602    /*
 603   * Message close icon.
 604   *
 605   * Example HTML:
 606   *
 607   * <a role="button" class="close" aria-label="Close">&times;</a>
 608   */
 609    .close {
 610      position: absolute;
 611      top: 0.27777777777778em;
 612      right: 0.72222222222222em;
 613      color: rgba(255, 255, 255, 0.6);
 614      font-size: 18px;
 615      font-weight: bold;
 616      text-decoration: none;
 617    }
 618    .close:hover {
 619      color: rgba(255, 255, 255, 0.8);
 620      text-decoration: none;
 621      cursor: pointer;
 622    }
 623    /*
 624   * Flash the alert message using CSS animation.
 625   */
 626    .messageflash {
 627      animation: messageflash 1s;
 628    }
 629    /* Twisties
 630     ========================================================================== */
 631    /**
 632   * Collapsible and non-collapsible summary/details boxes.
 633   *
 634   * Example HTML:
 635   *
 636   * <section class="txp-details">
 637   *     <h3 class="txp-summary expanded">
 638   *         <a>Heading (lever)</a>
 639   *     </h3>
 640   *     <div class="toggle">
 641   *         Content
 642   *     </div>
 643   * </section>
 644   *
 645   * <section class="txp-details">
 646   *     <h3>Heading</h3>
 647   *     <div>
 648   *         Content
 649   *     </div>
 650   * </section>
 651   */
 652    .txp-details {
 653      margin: 1em 0;
 654      border-right: 1px solid #cccccc;
 655      border-left: 1px solid #cccccc;
 656      background: #f7f7f7;
 657    }
 658    .txp-details > div {
 659      border-bottom: 1px solid #cccccc;
 660    }
 661    /**
 662   * Styling for summary headings.
 663   */
 664    h3.txp-summary,
 665    .txp-details > h3 {
 666      background-color: #eeeeee;
 667      position: relative;
 668      height: 2em;
 669      margin: 0;
 670      border-top: 1px solid #cccccc;
 671      border-bottom: 1px solid #cccccc;
 672      font-size: 13px;
 673      font-weight: bold;
 674      line-height: 2em;
 675    }
 676    /**
 677   * Padding for non-collapsible summary headings.
 678   *
 679   * For collapsible summary headings the padding is done via the `a` tag.
 680   */
 681    .txp-details > h3:not(.txp-summary) {
 682      padding: 0 1em;
 683    }
 684    /**
 685   * Additonal styling for lever summary headings.
 686   */
 687    h3.txp-summary a {
 688      display: block;
 689      padding: 0 2em 0 1em;
 690      color: #333333;
 691    }
 692    h3.txp-summary a:hover {
 693      color: #333333;
 694      text-decoration: none;
 695    }
 696    h3.txp-summary a::after {
 697      text-indent: 110%;
 698      text-transform: capitalize;
 699      white-space: nowrap;
 700      overflow: hidden;
 701      display: block;
 702      position: absolute;
 703      top: 0.5625em;
 704      right: 0.625em;
 705      width: 0;
 706      height: 0;
 707      border: 0 solid transparent;
 708      border-width: 0.25em 0 0.25em 0.25em;
 709      border-left-color: #333333;
 710      font-size: 16px;
 711      content: "\2193";
 712      opacity: 0.5;
 713      z-index: 10;
 714    }
 715    h3.txp-summary a:hover::after {
 716      opacity: 1;
 717    }
 718    /**
 719   * Additonal styling for lever summary headings - expanded state.
 720   */
 721    h3.txp-summary.expanded a::after {
 722      top: 0.6875em;
 723      right: 0.5625em;
 724      border: 0 solid transparent;
 725      border-width: 0.25em 0.25em 0;
 726      border-top-color: #333333;
 727      content: "\2191";
 728    }
 729    /**
 730   * Pad left and right of inner details content container.
 731   */
 732    .toggle,
 733    .txp-details > div {
 734      padding: 0 1em;
 735    }
 736    /* Progress meter (only used in core for setup panels)
 737     ========================================================================== */
 738    /**
 739   * Progress meter lists.
 740   *
 741   * Utilizes CSS counters to increment the progress steps, more info -
 742   * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
 743   *
 744   * Example HTML:
 745   *
 746   * <aside class="progress-meter">
 747   *     <ol>
 748   *         <li class="active"><strong>Item 1</strong></li>
 749   *         <li>Item 2</li>
 750   *         <li>Item 3</li>
 751   *     </ol>
 752   * </aside>
 753   */
 754    .progress-meter ol {
 755      margin-bottom: 0;
 756      padding: 0;
 757      list-style: none;
 758      text-align: center;
 759      counter-reset: step;
 760    }
 761    .progress-meter li {
 762      background-color: #eeeeee;
 763      display: inline-block;
 764      position: relative;
 765      margin: 0 1em 1em 0;
 766      padding: 1em 1em 1em 4em;
 767      border-top: 1px solid #eeeeee;
 768      border-right: 1px solid #e3e3e3;
 769      border-bottom: 1px solid gainsboro;
 770      border-left: 1px solid #e3e3e3;
 771    }
 772    .progress-meter li.active {
 773      background-color: #c7e0f6;
 774      border: 1px solid #c7e0f6;
 775      border-bottom-color: #add1f2;
 776    }
 777    .progress-meter li::before {
 778      position: absolute;
 779      top: 0.4375em;
 780      left: 0.6875em;
 781      width: 1.375em;
 782      padding: 0.25em;
 783      border: 1px solid #f7f7f7;
 784      border-radius: 50%;
 785      background: #cccccc;
 786      font-size: 16px;
 787      font-weight: bold;
 788      text-align: center;
 789      content: counter(step);
 790      z-index: 2;
 791      counter-increment: step;
 792    }
 793    .progress-meter li::after {
 794      text-indent: 110%;
 795      text-transform: capitalize;
 796      white-space: nowrap;
 797      overflow: hidden;
 798      display: block;
 799      position: absolute;
 800      top: -1px;
 801      left: 100%;
 802      width: 0;
 803      height: 0;
 804      border: 0 solid transparent;
 805      border-width: 1.5em 0 1.5em 0.75em;
 806      border-left-color: #cccccc;
 807      font-size: 16px;
 808      content: "\2192";
 809      z-index: 2;
 810    }
 811    .progress-meter strong {
 812      font-weight: normal;
 813    }
 814    /**
 815   * Swap margin/padding/numerical/arrow positions in RTL languages.
 816   */
 817    [dir="rtl"] .progress-meter ol {
 818      padding: 0;
 819    }
 820    [dir="rtl"] .progress-meter li {
 821      margin: 0 0 1em 1em;
 822      padding: 1em 4em 1em 1em;
 823    }
 824    [dir="rtl"] .progress-meter li::before {
 825      right: 0.6875em;
 826      left: auto;
 827    }
 828    [dir="rtl"] .progress-meter li::after {
 829      right: 100%;
 830      left: auto;
 831      border: 0 solid transparent;
 832      border-width: 1.5em 0.75em 1.5em 0;
 833      border-right-color: #cccccc;
 834      content: "\2190";
 835    }
 836    /* Password strength meter (via zxcvbn.js)
 837     ========================================================================== */
 838    /**
 839   * Strength meter bar area and text area.
 840   *
 841   * Example HTML:
 842   *
 843   * <div class="txp-form-field-value">
 844   *     <input class="txp-maskable" type="password">
 845   *     <div class="strength-meter">
 846   *         <div class="bar password-strength-1" style="width:28%;"></div>
 847   *         <div class="indicator">Strength: poor</div>
 848   *     </div>
 849   *     <div class="edit-admin-show-password">
 850   *         <input class="checkbox" type="checkbox">
 851   *         <label>Show password</label>
 852   *     </div>
 853   * </div>
 854   */
 855    .strength-meter {
 856      position: relative;
 857      width: 100%;
 858      max-width: 28em;
 859      height: 1.38461538461538em;
 860      background-color: #a3a3a3;
 861      box-sizing: border-box;
 862    }
 863    .strength-meter:empty {
 864      background-color: transparent;
 865    }
 866    .strength-meter .bar {
 867      position: absolute;
 868      left: 0;
 869      height: 1.38461538461538em;
 870      z-index: 2;
 871    }
 872    .strength-meter .indicator {
 873      position: absolute;
 874      padding: 0.15384615384615em 0.38461538461538em;
 875      color: #ffffff;
 876      line-height: 1;
 877      z-index: 3;
 878    }
 879    /**
 880   * Strength level colours.
 881   */
 882    .password-strength-0 {
 883      background-color: #9d261d;
 884    }
 885    .password-strength-1 {
 886      background-color: #b5590f;
 887    }
 888    .password-strength-2 {
 889      background-color: #cc8c00;
 890    }
 891    .password-strength-3 {
 892      background-color: #788c12;
 893    }
 894    .password-strength-4 {
 895      background-color: #238c23;
 896    }
 897    /* Code highlighting (via Prism.js)
 898     ========================================================================== */
 899    code[class*="language-"],
 900    pre[class*="language-"] {
 901      text-align: left;
 902      white-space: pre;
 903      word-spacing: normal;
 904      word-break: normal;
 905      word-wrap: normal;
 906      direction: ltr;
 907      -webkit-hyphens: none;
 908          -ms-hyphens: none;
 909              hyphens: none;
 910    }
 911    /**
 912   * Inline code.
 913   */
 914    :not(pre) > code[class*="language-"] {
 915      white-space: normal;
 916    }
 917    /**
 918   * Syntax colours/styles.
 919   */
 920    .token.comment,
 921    .token.prolog,
 922    .token.doctype,
 923    .token.cdata {
 924      color: #708090;
 925    }
 926    .token.punctuation {
 927      color: #999999;
 928    }
 929    .namespace {
 930      opacity: 0.7;
 931    }
 932    .token.property,
 933    .token.tag,
 934    .token.boolean,
 935    .token.number,
 936    .token.constant,
 937    .token.symbol,
 938    .token.deleted {
 939      color: #990055;
 940    }
 941    .token.selector,
 942    .token.attr-name,
 943    .token.string,
 944    .token.char,
 945    .token.builtin,
 946    .token.inserted {
 947      color: #669900;
 948    }
 949    .token.operator,
 950    .token.entity,
 951    .token.url,
 952    .language-css .token.string,
 953    .style .token.string {
 954      background: rgba(255, 255, 255, 0.5);
 955      color: #a67f59;
 956    }
 957    .token.atrule,
 958    .token.attr-value,
 959    .token.keyword {
 960      color: #0077aa;
 961    }
 962    .token.function {
 963      color: #dd4a68;
 964    }
 965    .token.regex,
 966    .token.important,
 967    .token.variable {
 968      color: #ee9900;
 969    }
 970    .token.important,
 971    .token.bold {
 972      font-weight: bold;
 973    }
 974    .token.italic {
 975      font-style: italic;
 976    }
 977    .token.entity {
 978      cursor: help;
 979    }
 980    /* Forms
 981     ========================================================================== */
 982    /**
 983   * 1. Address width being affected by wide descendants in Chrome, Firefox.
 984   * 2. Define consistent fieldset border, margin, and padding.
 985   */
 986    fieldset {
 987      /* 1 */
 988      min-width: 0;
 989      /* 2 */
 990      margin: 1em 0;
 991      padding: 1px 1em;
 992      border: 1px solid #cccccc;
 993    }
 994    /**
 995   * Normalize styling of `legend`.
 996   *
 997   * 1. Correct wrapping not present in IE 11 and Edge 12/13.
 998   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 999   * 3. Correct `color` not being inherited from fieldset in IE 11.
1000   */
1001    legend {
1002      /* 1 */
1003      display: table;
1004      /* 1 */
1005      max-width: 100%;
1006      /* 2 */
1007      padding: 0;
1008      /* 3 */
1009      color: inherit;
1010      /* 1 */
1011      white-space: normal;
1012      /* 1 */
1013      box-sizing: border-box;
1014    }
1015    /**
1016   * 1. Prevent elements from spilling out of their parent.
1017   * 2. Address margins set differently in Firefox 4+, Safari, and Chrome.
1018   * 3. Correct font properties not being inherited.
1019   */
1020    button,
1021    input,
1022    optgroup,
1023    select,
1024    textarea,
1025    .txp-button,
1026    .txp-logout a,
1027    .navlink,
1028    .navlink-active,
1029    .navlink-disabled {
1030      /* 1 */
1031      max-width: 100%;
1032      /* 2 */
1033      margin: 0;
1034      color: #000000;
1035      font-family: Helvetica, Arial, sans-serif;
1036      /* 3 */
1037      font-size: 13px;
1038      line-height: 1.38461538461538em;
1039      vertical-align: baseline;
1040      box-sizing: border-box;
1041    }
1042    /**
1043   * Remove the inner border and padding in Firefox.
1044   */
1045    button::-moz-focus-inner,
1046    [type="button"]::-moz-focus-inner,
1047    [type="reset"]::-moz-focus-inner,
1048    [type="submit"]::-moz-focus-inner {
1049      padding: 0;
1050      border-style: none;
1051    }
1052    /**
1053   * Remove inner padding in Safari and Chrome on OS X. Safari (but not Chrome)
1054   * clips the cancel button when the search input has padding (and `textfield`
1055   * appearance).
1056   */
1057    [type="search"]::-webkit-search-decoration {
1058      -webkit-appearance: none;
1059    }
1060    /**
1061   * Styling of form input fields.
1062   *
1063   * 1. Remove browser-specific default styling.
1064   */
1065    [type="color"],
1066    [type="date"],
1067    [type="datetime"],
1068    [type="datetime-local"],
1069    [type="email"],
1070    [type="month"],
1071    [type="number"],
1072    [type="password"],
1073    [type="search"],
1074    [type="tel"],
1075    [type="text"],
1076    [type="time"],
1077    [type="url"],
1078    [type="week"],
1079    select,
1080    textarea {
1081      height: 2.15384615384615em;
1082      padding: 0.30769230769231em;
1083      border: 1px solid #cccccc;
1084      border-radius: 0;
1085      background: #ffffff;
1086      /* 1 */
1087      -webkit-appearance: none;
1088         -moz-appearance: none;
1089              appearance: none;
1090    }
1091    [type="color"]:focus,
1092    [type="date"]:focus,
1093    [type="datetime"]:focus,
1094    [type="datetime-local"]:focus,
1095    [type="email"]:focus,
1096    [type="month"]:focus,
1097    [type="number"]:focus,
1098    [type="password"]:focus,
1099    [type="search"]:focus,
1100    [type="tel"]:focus,
1101    [type="text"]:focus,
1102    [type="time"]:focus,
1103    [type="url"]:focus,
1104    [type="week"]:focus,
1105    select:focus,
1106    textarea:focus {
1107      border-color: #0066ff;
1108      outline: 0;
1109    }
1110    /**
1111   * Fix vertical alignment of `color` fields with their label.
1112   */
1113    [type="color"] {
1114      vertical-align: middle;
1115    }
1116    /**
1117   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
1118   * `font-size` values of the `input`, it causes the cursor style of the
1119   * decrement button to change from `default` to `text`.
1120   */
1121    [type="number"]::-webkit-inner-spin-button,
1122    [type="number"]::-webkit-outer-spin-button {
1123      height: auto;
1124    }
1125    /**
1126   * 1. Remove any excess padding.
1127   * 2. Correct margins for inline checkbox/radio labels.
1128   */
1129    [type="checkbox"],
1130    [type="radio"] {
1131      /* 1 */
1132      padding: 0;
1133    }
1134    [type="checkbox"] + label:not(.ui-controlgroup-item),
1135    [type="radio"] + label:not(.ui-controlgroup-item) {
1136      /* 2 */
1137      margin: 0 0.5em 0 0;
1138    }
1139    [type="checkbox"] + label:not(.ui-controlgroup-item):last-of-type,
1140    [type="radio"] + label:not(.ui-controlgroup-item):last-of-type {
1141      /* 2 */
1142      margin: 0;
1143    }
1144    /**
1145   * Swap margin positions in RTL languages.
1146   */
1147    [dir="rtl"] [type="checkbox"] + label:not(.ui-controlgroup-item),
1148    [dir="rtl"] [type="radio"] + label:not(.ui-controlgroup-item) {
1149      margin: 0 0 0 0.5em;
1150    }
1151    [dir="rtl"] [type="checkbox"] + label:not(.ui-controlgroup-item):last-of-type,
1152    [dir="rtl"] [type="radio"] + label:not(.ui-controlgroup-item):last-of-type {
1153      margin: 0;
1154    }
1155    /**
1156   * Use indicator icon to signify the drop-down ability of `select`.
1157   */
1158    select {
1159      padding-right: 1.30769230769231em;
1160      background: #ffffff url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxM3B4JyBoZWlnaHQ9JzRweCcgdmlld0JveD0nMCAwIDEzIDQnPjxwb2x5Z29uIGZpbGw9JyMzMzMnIHBvaW50cz0nMy41LDQgMCwwIDcsMCcvPjwvc3ZnPg==") right center no-repeat;
1161      background-size: 1em 0.30769230769231em;
1162      text-transform: none;
1163    }
1164    /**
1165   * Swap `select` icon position in RTL languages.
1166   */
1167    [dir="rtl"] select {
1168      padding-right: 0.30769230769231em;
1169      padding-left: 1.30769230769231em;
1170      background-position: 0.46153846153846em center;
1171    }
1172    /**
1173   * Remove browser-specific `select` UI in IE 11.
1174   */
1175    select::-ms-expand {
1176      opacity: 0;
1177    }
1178    /**
1179   * Remove browser-specific `select` UI in Firefox 4+.
1180   */
1181    select:-moz-focusring {
1182      color: transparent;
1183      text-shadow: 0 0 0 #000000;
1184    }
1185    /**
1186   * Override height and background set in a previous rule and allow auto height.
1187   */
1188    select[size],
1189    select[multiple] {
1190      height: auto;
1191      padding-right: 0.30769230769231em;
1192      background-image: none;
1193      vertical-align: top;
1194    }
1195    /**
1196   * Override height set in rule above and restrict to one line field.
1197   */
1198    select[size="0"],
1199    select[size="1"] {
1200      height: 2.15384615384615em;
1201      vertical-align: baseline;
1202    }
1203    /**
1204   * Normalize styling of `optgroup`.
1205   */
1206    optgroup {
1207      color: #000000;
1208      font-style: normal;
1209      font-weight: bold;
1210    }
1211    /**
1212   * 1. Remove default vertical scrollbar in IE 11.
1213   * 2. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
1214   * 3. Restrict to vertical resizing to prevent layout breakage.
1215   */
1216    textarea {
1217      width: 100%;
1218      height: auto;
1219      min-height: 3em;
1220      /* 1 */
1221      overflow: auto;
1222      /* 2 */
1223      vertical-align: top;
1224      /* 3 */
1225      resize: vertical;
1226    }
1227    /**
1228   * Ensure code text areas are always rendered left-to-right.
1229   */
1230    textarea.code {
1231      direction: ltr;
1232    }
1233    /**
1234   * Make sure disabled elements really are disabled and styled appropriately.
1235   *
1236   * 1. Re-set default cursor for disabled elements.
1237   * 2. Override default iOS opacity setting.
1238   */
1239    [disabled],
1240    [disabled] option,
1241    [disabled] optgroup,
1242    .navlink-disabled {
1243      border-color: #d4d4d4 !important;
1244      background: #eeeeee !important;
1245      color: #aaaaaa !important;
1246      /* 1 */
1247      cursor: default !important;
1248      /* 2 */
1249      opacity: 1;
1250    }
1251    /**
1252   * Width display options for `input` fields.
1253   *
1254   * Example HTML:
1255   *
1256   * <input size="32">
1257   * <input class="large">
1258   * <input class="medium">
1259   * <input class="small">
1260   * <input class="xsmall">
1261   */
1262    input[size="32"] {
1263      width: 100%;
1264      max-width: 28em;
1265    }
1266    input.input-large {
1267      width: 100%;
1268    }
1269    input.input-medium {
1270      width: 50%;
1271      max-width: 14.46153846153846em;
1272    }
1273    input.input-small {
1274      width: 25%;
1275      max-width: 7.61538461538462em;
1276    }
1277    input.input-xsmall {
1278      width: 16%;
1279      max-width: 4.23076923076923em;
1280    }
1281    /**
1282   * Width display options for date and time `input` fields.
1283   *
1284   * Note: These are intentionally *not* using the HTML5 input type contexts.
1285   *
1286   * Example HTML:
1287   *
1288   * <div class="txp-form-field date posted">
1289   *     <div class="txp-form-field-label">
1290   *         <label>Publish date</label>
1291   *     </div>
1292   *     <div class="txp-form-field-value">
1293   *         <input class="input-year">
1294   *         <span role="separator">/</span>
1295   *         <input class="input-month">
1296   *         <span role="separator">/</span>
1297   *         <input class="input-day">
1298   *     </div>
1299   * </div>
1300   *
1301   * <div class="txp-form-field time posted">
1302   *     <div class="txp-form-field-label">
1303   *         <label>Publish time</label>
1304   *     </div>
1305   *     <div class="txp-form-field-value">
1306   *         <input class="input-hour">
1307   *         <span role="separator">:</span>
1308   *         <input class="input-minute">
1309   *         <span role="separator">:</span>
1310   *         <input class="input-second">
1311   *     </div>
1312   * </div>
1313   */
1314    input.input-year {
1315      width: 4.07692307692308em;
1316      text-align: center;
1317    }
1318    input.input-month, input.input-day, input.input-hour, input.input-minute, input.input-second {
1319      width: 2.46153846153846em;
1320      text-align: center;
1321    }
1322    /**
1323   * 1. Add the correct display in IE 11.
1324   * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
1325   */
1326    progress {
1327      /* 1 */
1328      display: inline-block;
1329      /* 2 */
1330      vertical-align: baseline;
1331    }
1332    /* Buttons
1333     ========================================================================== */
1334    /**
1335   * 1. Correct `button` style inheritance in Firefox, IE 11, and Opera.
1336   * 2. Address `overflow` set to `hidden` in IE 11.
1337   */
1338    button {
1339      /* 1 */
1340      text-transform: none;
1341      /* 2 */
1342      overflow: visible;
1343    }
1344    /**
1345   * 1. Improve usability and consistency of cursor style between image-type
1346   *    `input` and others.
1347   * 2. Remove iOS Safari default styling.
1348   */
1349    button,
1350    [type="reset"],
1351    [type="submit"],
1352    input[type="button"],
1353    .txp-button,
1354    .txp-logout a,
1355    .navlink,
1356    .navlink-active {
1357      background-color: #5ba4e5;
1358      display: inline-block;
1359      width: auto;
1360      height: 2.15384615384615em;
1361      padding: 0.30769230769231em 0.61538461538462em;
1362      border: 1px solid #3c93e0;
1363      border-radius: 0.3em;
1364      background-clip: padding-box;
1365      color: #ffffff;
1366      font-weight: normal;
1367      text-align: center;
1368      /* 1 */
1369      cursor: pointer;
1370      /* 2 */
1371      -webkit-appearance: none;
1372         -moz-appearance: none;
1373              appearance: none;
1374      -webkit-user-select: none;
1375         -moz-user-select: none;
1376          -ms-user-select: none;
1377              user-select: none;
1378    }
1379    button:hover,
1380    [type="reset"]:hover,
1381    [type="submit"]:hover,
1382    input[type="button"]:hover,
1383    .txp-button:hover,
1384    .txp-logout a:hover,
1385    .navlink:hover,
1386    .navlink-active:hover {
1387      background-color: #6daee8;
1388      border-color: #1e72bc;
1389      color: #ffffff;
1390      text-decoration: none;
1391    }
1392    button:active,
1393    [type="reset"]:active,
1394    [type="submit"]:active,
1395    input[type="button"]:active,
1396    .txp-button:active,
1397    .txp-logout a:active,
1398    .navlink:active,
1399    .navlink-active:active {
1400      background-color: #4e9de3;
1401      border-color: #1e72bc;
1402      color: #e6e6e6;
1403      text-decoration: none;
1404    }
1405    button:focus,
1406    [type="reset"]:focus,
1407    [type="submit"]:focus,
1408    input[type="button"]:focus,
1409    .txp-button:focus,
1410    .txp-logout a:focus,
1411    .navlink:focus,
1412    .navlink-active:focus {
1413      border-color: #0066ff;
1414      outline: 0;
1415    }
1416    /**
1417   * Additional styling for primary buttons.
1418   *
1419   * Example HTML:
1420   *
1421   * <input type="submit" class="publish">
1422   */
1423    [type="submit"].publish,
1424    button.publish,
1425    a.publish {
1426      background-color: #9fc158;
1427      height: 2.76923076923077em;
1428      padding: 0.61538461538462em 1em;
1429      border: 1px solid #8eb342;
1430      font-weight: bold;
1431    }
1432    [type="submit"].publish:hover,
1433    button.publish:hover,
1434    a.publish:hover {
1435      background-color: #aecb72;
1436      border: 1px solid #718e35;
1437    }
1438    [type="submit"].publish:active,
1439    button.publish:active,
1440    a.publish:active {
1441      background-color: #94ba45;
1442      border: 1px solid #718e35;
1443    }
1444    [type="submit"].publish:focus,
1445    button.publish:focus,
1446    a.publish:focus {
1447      border-color: #0066ff;
1448    }
1449    /**
1450   * Additional styling for delete (destroy) buttons.
1451   *
1452   * Example HTML:
1453   *
1454   * <button class="destroy" type="submit">
1455   *     <span class="ui-icon ui-icon-close">Destroy</span>
1456   * </button>
1457   */
1458    button.destroy {
1459      height: auto;
1460      padding: 0.07692307692308em 0 0;
1461      border: 0;
1462      border-radius: 0;
1463      background: none;
1464    }
1465    button.destroy:hover, button.destroy:active {
1466      background: none;
1467    }
1468    button.destroy:focus {
1469      outline: thin solid #0066ff;
1470    }
1471    button.destroy:hover .ui-icon,
1472    button.destroy:active .ui-icon,
1473    button.destroy:focus .ui-icon {
1474      -webkit-filter: brightness(0.66);
1475              filter: brightness(0.66);
1476    }
1477    /**
1478   * Grey-out disabled navlinks (but keep them in button style).
1479   *
1480   * Example HTML:
1481   *
1482   * <p class="prev-next">
1483   *     <span class="navlink-disabled">Previous</span>
1484   *     <a class="navlink">Next</a>
1485   * </p>
1486   */
1487    .navlink-disabled {
1488      display: inline-block;
1489      height: 2.15384615384615em;
1490      padding: 0.30769230769231em 0.61538461538462em;
1491      border: 1px solid;
1492      border-radius: 0.3em;
1493      background-clip: padding-box;
1494      box-sizing: border-box;
1495    }
1496    /**
1497   * Tertiary button sets.
1498   *
1499   * Anchor elements kept to one line to prevent space between buttons.
1500   *
1501   * TODO: check if this would be better via flexbox instead?
1502   *
1503   * Example HTML:
1504   *
1505   * <p class="nav-tertiary">
1506   *     <a class="navlink-active">Page 1</a><a class="navlink">Page 2</a>
1507   * </p>
1508   */
1509    ul.nav-tertiary {
1510      padding: 0;
1511      list-style: none;
1512    }
1513    ul.nav-tertiary li {
1514      display: inline;
1515    }
1516    [dir="rtl"] ul.nav-tertiary {
1517      padding: 0;
1518    }
1519    .nav-tertiary a,
1520    .nav-tertiary .navlink-disabled {
1521      border-radius: 0;
1522    }
1523    .nav-tertiary > :first-child,
1524    .nav-tertiary > :first-child > a,
1525    .nav-tertiary > :first-child > span {
1526      border-radius: 0.3em 0 0 0.3em;
1527    }
1528    .nav-tertiary > :last-child,
1529    .nav-tertiary > :last-child > a,
1530    .nav-tertiary > :last-child > span {
1531      border-radius: 0 0.3em 0.3em 0;
1532    }
1533    [dir="rtl"] .nav-tertiary > :first-child,
1534    [dir="rtl"] .nav-tertiary > :first-child > a,
1535    [dir="rtl"] .nav-tertiary > :first-child > span {
1536      border-radius: 0 0.3em 0.3em 0;
1537    }
1538    [dir="rtl"] .nav-tertiary > :last-child,
1539    [dir="rtl"] .nav-tertiary > :last-child > a,
1540    [dir="rtl"] .nav-tertiary > :last-child > span {
1541      border-radius: 0.3em 0 0 0.3em;
1542    }
1543    /**
1544   * Indication of the currently active `.nav-tertiary` button.
1545   *
1546   * Example HTML:
1547   *
1548   * <p class="nav-tertiary">
1549   *     <a class="navlink-active">Page 1</a><a class="navlink">Page 2</a>
1550   * </p>
1551   */
1552    .nav-tertiary .navlink-active {
1553      background-color: #9dc8ef;
1554      border-color: #6faee7;
1555    }
1556    .nav-tertiary .navlink-active:hover {
1557      background-color: #a6cdf0;
1558      border-color: #2d89dd;
1559    }
1560    .nav-tertiary .navlink-active:active {
1561      background-color: #87bceb;
1562      border-color: #2d89dd;
1563    }
1564    .nav-tertiary .navlink-active:focus {
1565      border-color: #0066ff;
1566    }
1567    /**
1568   * Search widget 'search' button.
1569   *
1570   * 1. Correct specificity for RTL languages.
1571   *
1572   * Example HTML:
1573   *
1574   * <form class="txp-search">
1575   *     <input class="txp-search-input" type="search" size="24">
1576   *     <span class="txp-search-buttons">
1577   *         <button class="txp-search-button">Search</button>
1578   *         <button class="txp-search-options">Search criteria</button>
1579   *     </span>
1580   * </form>
1581   */
1582    .txp-search button.txp-search-button {
1583      padding-right: 1.5em;
1584      padding-left: 1.5em;
1585      border-radius: 0;
1586    }
1587    [dir="rtl"] .txp-search button.txp-search-button {
1588      /* 1 */
1589      border-radius: 0;
1590    }
1591    /* Lists
1592     ========================================================================== */
1593    /**
1594   * Address paddings set differently.
1595   */
1596    menu,
1597    ol,
1598    ul {
1599      padding: 0 0 0 2em;
1600    }
1601    /**
1602   * Swap padding positions in RTL languages.
1603   */
1604    [dir="rtl"] menu,
1605    [dir="rtl"] ol,
1606    [dir="rtl"] ul {
1607      padding: 0 2em 0 0;
1608    }
1609    /**
1610   * Remove margins from nested lists.
1611   */
1612    li > ul,
1613    li > ol {
1614      margin: 0;
1615    }
1616    /**
1617   * Address margins set differently.
1618   */
1619    dd {
1620      margin: 0 0 0 2em;
1621    }
1622    /**
1623   * Swap margin positions in RTL languages.
1624   */
1625    [dir="rtl"] dd {
1626      margin: 0 2em 0 0;
1627    }
1628    /**
1629   * Have a list with no bullets/numerals.
1630   *
1631   * Example HTML:
1632   *
1633   * <ul class="plain-list">
1634   * <ol class="plain-list">
1635   */
1636    .plain-list {
1637      padding: 0;
1638      list-style: none;
1639    }
1640    /**
1641   * Ensure padding stays removed in RTL languages.
1642   *
1643   * Required for specificity.
1644   */
1645    [dir="rtl"] .plain-list {
1646      padding: 0;
1647    }
1648    /**
1649   * Switcher lists, to swap between different page templates/form templates/etc.
1650   *
1651   * Example HTML:
1652   *
1653   * <ul class="switcher-list">
1654   *     <li class="active"></li>
1655   *     <li><a></a></li>
1656   *     <li><a></a></li>
1657   * </ul>
1658   */
1659    .switcher-list {
1660      margin: 0 -1em;
1661      padding: 0;
1662      list-style: none;
1663    }
1664    .switcher-list li {
1665      position: relative;
1666      border-top: 1px solid #eeeeee;
1667      border-bottom: 1px solid transparent;
1668    }
1669    .switcher-list li:nth-child(odd) {
1670      background: #f7f7f7;
1671    }
1672    .switcher-list li:first-child {
1673      border-top: 0;
1674    }
1675    .switcher-list li.active {
1676      background: #fff9e1;
1677    }
1678    .switcher-list li.selected {
1679      background: #eaf3fc;
1680    }
1681    .switcher-list a {
1682      display: block;
1683      padding: 0.38461538461538em 2.5em 0.38461538461538em 1em;
1684      text-overflow: ellipsis;
1685      white-space: nowrap;
1686      overflow: hidden;
1687    }
1688    [dir="rtl"] .switcher-list {
1689      padding: 0;
1690    }
1691    [dir="rtl"] .switcher-list a {
1692      padding: 0.38461538461538em 1em 0.38461538461538em 2.5em;
1693    }
1694    /**
1695   * Multi-edit checkboxes within switcher lists.
1696   */
1697    .switcher-action {
1698      position: absolute;
1699      top: 0.38461538461538em;
1700      left: 1em;
1701      z-index: 2;
1702    }
1703    .switcher-action + a {
1704      padding-right: 1em;
1705      padding-left: 2.5em;
1706    }
1707    [dir="rtl"] .switcher-action {
1708      right: 1em;
1709      left: auto;
1710    }
1711    [dir="rtl"] .switcher-action + a {
1712      padding-right: 2.5em;
1713      padding-left: 1em;
1714    }
1715    /**
1716   * 'Destroy' buttons within switcher lists.
1717   */
1718    .switcher-list .destroy {
1719      position: absolute;
1720      top: 0.46153846153846em;
1721      right: 1em;
1722      z-index: 2;
1723    }
1724    [dir="rtl"] .switcher-list .destroy {
1725      right: auto;
1726      left: 1em;
1727    }
1728    /* Tables
1729     ========================================================================== */
1730    /**
1731   * 1. Make sure list tables clear any preceeding grid cell floats.
1732   * 2. Allow overflow scroll on tables.
1733   *
1734   * Example HTML:
1735   *
1736   * <div class="txp-listtables">
1737   *     <table></table>
1738   * </div>
1739   */
1740    .txp-listtables {
1741      /* 1 */
1742      clear: both;
1743      /* 2 */
1744      overflow-x: auto;
1745    }
1746    /**
1747   * Consistent tables.
1748   */
1749    table {
1750      border-collapse: collapse;
1751      border-spacing: 0;
1752    }
1753    /**
1754   * Styling of table captions.
1755   */
1756    caption {
1757      margin-bottom: 0.5em;
1758      text-align: left;
1759    }
1760    /**
1761   * Swap caption alignment in RTL languages.
1762   */
1763    [dir="rtl"] caption {
1764      text-align: right;
1765    }
1766    /**
1767   * Table row borders.
1768   */
1769    tr {
1770      border: 1px solid #eeeeee;
1771    }
1772    thead th {
1773      background-color: #eeeeee;
1774    }
1775    /**
1776   * Make table cells align top and left by default.
1777   */
1778    th,
1779    td {
1780      padding: 0.38461538461538em 1em;
1781      text-align: left;
1782      vertical-align: top;
1783    }
1784    /**
1785   * Swap table cell text alignments in RTL languages.
1786   */
1787    [dir="rtl"] th,
1788    [dir="rtl"] td {
1789      text-align: right;
1790    }
1791    /**
1792   * Listing tables.
1793   *
1794   * Example HTML:
1795   *
1796   * <table class="txp-list">
1797   *     <thead>
1798   *         <tr>
1799   *             <th class="multi-edit" scope="col"></th>
1800   *             <th class="asc scope="col"><a></a></th>
1801   *             <th scope="col"><a></a></th>
1802   *         </tr>
1803   *     </thead>
1804   *     <tfoot>
1805   *         <tr>
1806   *             <td colspan="3"></td>
1807   *         </tr>
1808   *     </tfoot>
1809   *     <tbody>
1810   *         <tr>
1811   *             <th class="multi-edit" scope="row"></th>
1812   *             <td></td>
1813   *             <td></td>
1814   *         </tr>
1815   *         <tr class="selected">
1816   *             <th class="multi-edit" scope="row"></th>
1817   *             <td></td>
1818   *             <td></td>
1819   *         </tr>
1820   *     </tbody>
1821   * </table>
1822   */
1823    .txp-list {
1824      width: 100%;
1825    }
1826    .txp-list tbody tr {
1827      border: 1px solid #eeeeee;
1828    }
1829    .txp-list tbody tr:nth-child(even) {
1830      background: #f7f7f7;
1831    }
1832    .txp-list tbody tr.selected {
1833      background: #eaf3fc;
1834    }
1835    .txp-list tbody th {
1836      font-weight: normal;
1837    }
1838    .txp-list thead th {
1839      background-color: #eeeeee;
1840      border-top: 1px solid #eeeeee;
1841      border-right: 1px solid #e1e1e1;
1842      border-bottom: 1px solid gainsboro;
1843      border-left: 0;
1844    }
1845    .txp-list thead th:first-child {
1846      border-left: 1px solid #eeeeee;
1847    }
1848    .txp-list thead th a {
1849      display: block;
1850      position: relative;
1851      margin: -0.38461538461538em -1em;
1852      padding: 0.38461538461538em 1em;
1853      color: #333333;
1854    }
1855    .txp-list thead th a:hover {
1856      color: #333333;
1857      text-decoration: none;
1858    }
1859    /**
1860   * Backgrounds and indicator icons on currently active sortable `thead th`.
1861   *
1862   * Example HTML:
1863   *
1864   * <th class="asc scope="col"><a></a></th>
1865   * <th class="desc scope="col"><a></a></th>
1866   */
1867    .txp-list thead th.asc, .txp-list thead th.desc {
1868      background-color: #e4e4e4;
1869    }
1870    .txp-list thead th.asc a::after, .txp-list thead th.desc a::after {
1871      text-indent: 110%;
1872      text-transform: capitalize;
1873      white-space: nowrap;
1874      overflow: hidden;
1875      display: block;
1876      position: absolute;
1877      top: 45%;
1878      right: 0.3125em;
1879      width: 0;
1880      height: 0;
1881      font-size: 16px;
1882      opacity: 0.5;
1883      z-index: 10;
1884    }
1885    [dir="rtl"] .txp-list thead th.asc a::after, [dir="rtl"] .txp-list thead th.desc a::after {
1886      right: auto;
1887      left: 0.3125em;
1888    }
1889    .txp-list thead th.asc a:hover::after, .txp-list thead th.desc a:hover::after {
1890      opacity: 1;
1891    }
1892    .txp-list thead th.desc a::after {
1893      border: 0 solid transparent;
1894      border-width: 0.25em 0.25em 0;
1895      border-top-color: #333333;
1896      content: "\2193";
1897    }
1898    .txp-list thead th.asc a::after {
1899      border: 0 solid transparent;
1900      border-width: 0 0.25em 0.25em;
1901      border-bottom-color: #333333;
1902      content: "\2191";
1903    }
1904    /**
1905   * Consistent width for table multi-edit checkbox columns.
1906   */
1907    .txp-list-col-multi-edit {
1908      width: 13px;
1909    }
1910    /**
1911   * Avoid wrapping of content in table '#ID' columns.
1912   */
1913    .txp-list-col-id {
1914      white-space: nowrap;
1915    }
1916    /* Container
1917     ========================================================================== */
1918    /**
1919   * 1. Make body position relative so subsequent items can be positioned
1920   *    absolutely if desired.
1921   * 2. Remove default margin.
1922   */
1923    body {
1924      display: -ms-flexbox;
1925      display: flex;
1926      /* 1 */
1927      position: relative;
1928      -ms-flex-direction: column;
1929          flex-direction: column;
1930      min-height: 100vh;
1931      /* 2 */
1932      margin: 0;
1933      padding: 4em 2.75% 0;
1934      background: #f7f7f7;
1935      color: #333333;
1936      box-sizing: border-box;
1937    }
1938    /**
1939   * Main content area.
1940   *
1941   * Example HTML:
1942   *
1943   * <body>
1944   *     <header class="txp-header"></header>
1945   *     <main class="txp-body">
1946   *         Content
1947   *     </main>
1948   *     <footer class="txp-footer"></footer>
1949   * </body>
1950   */
1951    .txp-body {
1952      -ms-flex-positive: 1;
1953          flex-grow: 1;
1954      width: 100%;
1955      max-width: 116em;
1956      margin: 0 auto;
1957    }
1958    /* Layout grid
1959     ========================================================================== */
1960    /**
1961   * Flex container.
1962   */
1963    .txp-layout {
1964      display: -ms-flexbox;
1965      display: flex;
1966      -ms-flex-wrap: wrap;
1967          flex-wrap: wrap;
1968      margin: 0 -1em;
1969    }
1970    .txp-layout > * {
1971      min-width: 0;
1972      padding: 0 1em;
1973      box-sizing: border-box;
1974    }
1975    /**
1976   * Generate sizes all for grid column cells.
1977   *
1978   * Because this is desktop first, all cells span variations are defined
1979   * initially (1 column full width, 2 column, 4 column). We will then
1980   * adjust them at various breakpoints.
1981   *
1982   * Example HTML:
1983   *
1984   * <div class="txp-layout-1col"></div>
1985   *
1986   * <div class="txp-layout-2col">
1987   * <div class="txp-layout-2col">
1988   *
1989   * <div class="txp-layout-4col-3span"></div>
1990   * <div class="txp-layout-4col"></div>
1991   */
1992    .txp-layout-1col {
1993      width: 100%;
1994    }
1995    .txp-layout-4col-3span {
1996      width: 75%;
1997    }
1998    .txp-layout-2col,
1999    .txp-layout-4col-2span {
2000      width: 50%;
2001    }
2002    .txp-layout-4col,
2003    .txp-layout-4col-alt {
2004      width: 25%;
2005    }
2006    /**
2007   * Text columns (fixed proportion cell)
2008   *
2009   * Example HTML:
2010   *
2011   * <div class="txp-layout-textbox">
2012   */
2013    .txp-layout-textbox {
2014      max-width: 57em;
2015      margin: 0 auto;
2016    }
2017    /* Inline grids
2018     ========================================================================== */
2019    /**
2020   * Inline grid type layouts.
2021   *
2022   * You should define a specific width for each .txp-grid-cell, either as a class
2023   * attribute or style attribute, otherwise the cell width stretches to the
2024   * content within it.
2025   *
2026   * Example HTML:
2027   *
2028   * <div class="txp-grid">
2029   *     <div class="txp-grid-cell" style="width:30em;">
2030   *         Content
2031   *     </div>
2032   *     <div class="txp-grid-cell" style="width:15em;">
2033   *         Content
2034   *     </div>
2035   *     <div class="txp-grid-cell" style="width:15em;">
2036   *         Content
2037   *     </div>
2038   * </div>
2039   */
2040    .txp-grid {
2041      display: -ms-inline-flexbox;
2042      display: inline-flex;
2043      -ms-flex-wrap: wrap;
2044          flex-wrap: wrap;
2045      -ms-flex-pack: center;
2046          justify-content: center;
2047      margin: -2px;
2048    }
2049    .txp-grid-cell {
2050      margin: 2px;
2051      padding: 0 1em;
2052      border: 1px solid #cccccc;
2053      box-sizing: border-box;
2054    }
2055    /* Header
2056     ========================================================================== */
2057    /**
2058   * Header content area.
2059   *
2060   * Example HTML:
2061   *
2062   * <body>
2063   *     <header class="txp-header">
2064   *         Content
2065   *     </header>
2066   *     <main class="txp-body"></main>
2067   *     <footer class="txp-footer"></footer>
2068   * </body>
2069   */
2070    .txp-header {
2071      background-color: #c7e0f6;
2072      display: -ms-flexbox;
2073      display: flex;
2074      position: fixed;
2075      top: 0;
2076      right: 0;
2077      left: 0;
2078      height: 2.69230769230769em;
2079      padding: 0 2.75%;
2080      border-top: 1px solid #c7e0f6;
2081      border-bottom: 1px solid #add1f2;
2082      z-index: 1000;
2083    }
2084    /**
2085   * Hide header content area on login panels.
2086   *
2087   * Move offscreen - don't `display:none` as we need to show #messagepane content.
2088   */
2089    .login .txp-header {
2090      position: absolute;
2091      right: auto;
2092      left: -1000em;
2093      width: 1px;
2094      height: 1px;
2095    }
2096    /**
2097   * Textpattern logo.
2098   *
2099   * Example HTML:
2100   *
2101   * <header class="txp-header">
2102   *     <h1>
2103   *         <a><span>My site</span></a>
2104   *     </h1>
2105   */
2106    .txp-header h1 {
2107      -ms-flex: none;
2108          flex: none;
2109      width: 8.125em;
2110      height: 2em;
2111      margin: 0.0625em 0.5em 0 0;
2112      background: url("../img/sprite.svg") no-repeat;
2113      background-size: 13em 2em;
2114      font-size: 16px;
2115    }
2116    .txp-header h1 a {
2117      display: block;
2118      width: 8.125em;
2119      height: 2em;
2120    }
2121    .txp-header h1 span {
2122      text-indent: 110%;
2123      text-transform: capitalize;
2124      white-space: nowrap;
2125      overflow: hidden;
2126      display: block;
2127    }
2128    /**
2129   * Reverse Textpattern logo margin in RTL languages.
2130   */
2131    [dir="rtl"] .txp-header h1 {
2132      margin: 0.0625em 0 0 0.5em;
2133    }
2134    /**
2135   * 'View site' link.
2136   *
2137   * Example HTML:
2138   *
2139   * <p class="txp-view-site">
2140   *     <a>
2141   *         <span class="txp-view-site-name">My site</span>
2142   *     </a>
2143   * </p>
2144   */
2145    .txp-view-site {
2146      -ms-flex: 1;
2147          flex: 1;
2148      margin: 0 1em;
2149      padding: 0 1px;
2150      line-height: 2.69230769230769em;
2151      text-overflow: ellipsis;
2152      white-space: nowrap;
2153      overflow: hidden;
2154    }
2155    .txp-view-site a {
2156      color: #333333;
2157      font-weight: bold;
2158    }
2159    /**
2160   * Positioning of logout button.
2161   *
2162   * Example HTML:
2163   *
2164   * <p class="txp-logout">
2165   */
2166    .txp-logout {
2167      position: relative;
2168      top: -0.76923076923077em;
2169      -ms-flex: none;
2170          flex: none;
2171    }
2172    /* Footer
2173     ========================================================================== */
2174    /**
2175   * Footer content area.
2176   *
2177   * Example HTML:
2178   *
2179   * <body>
2180   *     <header class="txp-header"></header>
2181   *     <main class="txp-body"></main>
2182   *     <footer class="txp-footer">
2183   *         Content
2184   *     </footer>
2185   * </body>
2186   */
2187    .txp-footer {
2188      display: -ms-flexbox;
2189      display: flex;
2190      -ms-flex-pack: justify;
2191          justify-content: space-between;
2192    }
2193    /* Navigation
2194     ========================================================================== */
2195    /**
2196   * Hide the navigation menu toggle button on desktop layout.
2197   *
2198   * Example HTML:
2199   *
2200   * <button class="txp-nav-toggle">
2201   */
2202    button.txp-nav-toggle {
2203      display: none;
2204    }
2205    /**
2206   * Base styling for the navigation menu.
2207   *
2208   * Example HTML:
2209   *
2210   * <nav class="txp-nav">
2211   */
2212    .txp-nav {
2213      -ms-flex: none;
2214          flex: none;
2215      margin: 0;
2216      list-style: none;
2217    }
2218    .txp-nav ul {
2219      margin: 0;
2220      padding: 0;
2221      list-style: none;
2222    }
2223    .txp-nav > ul {
2224      display: -ms-flexbox;
2225      display: flex;
2226    }
2227    .txp-nav a {
2228      color: #333333;
2229    }
2230    .txp-nav a:hover {
2231      text-decoration: none;
2232    }
2233    /**
2234   * Primary-level navigation menu items (dropdown toggles).
2235   *
2236   * Example HTML:
2237   *
2238   * <nav class="txp-nav">
2239   *     <ul class="data-dropdown">
2240   *         <li class="dropdown selected">
2241   *             <a class="dropdown-toggle">
2242   *                 Content
2243   *             </a>
2244   *             <ul class="dropdown-menu">
2245   *                 <li><a></a></li>
2246   *                 <li class="selected"><a></a></li>
2247   *                 <li><a></a></li>
2248   *             </ul>
2249   *         </li>
2250   *         <li class="dropdown">
2251   *             <a class="dropdown-toggle">
2252   *                 Presentation
2253   *             </a>
2254   *             <ul class="dropdown-menu">
2255   *                 <li><a></a></li>
2256   *                 <li><a></a></li>
2257   *                 <li><a></a></li>
2258   *             </ul>
2259   *         </li>
2260   *         <li class="dropdown open">
2261   *             <a class="dropdown-toggle">
2262   *                 Admin
2263   *             </a>
2264   *             <ul class="dropdown-menu">
2265   *                 <li><a></a></li>
2266   *                 <li><a></a></li>
2267   *                 <li><a></a></li>
2268   *             </ul>
2269   *         </li>
2270   *         <li>
2271   *             <a>
2272   *                 Non-dropdown link
2273   *             </a>
2274   *         </li>
2275   *     </ul>
2276   * </nav>
2277   */
2278    .txp-nav > ul > li {
2279      display: block;
2280      position: relative;
2281      border-right: 1px solid #c7e0f6;
2282      background: rgba(255, 255, 255, 0.25);
2283    }
2284    .txp-nav > ul > li:first-child {
2285      border-left: 1px solid #c7e0f6;
2286    }
2287    .txp-nav > ul > li > a {
2288      display: block;
2289      padding: 0 1em;
2290      color: black;
2291      line-height: 2.69230769230769em;
2292      text-decoration: none;
2293    }
2294    .txp-nav > ul > li > a:hover {
2295      background: rgba(255, 255, 255, 0.25);
2296    }
2297    .txp-nav > ul > li.selected > a {
2298      background: rgba(255, 255, 255, 0.25);
2299    }
2300    .txp-nav > ul > li.selected > a:hover {
2301      background: rgba(255, 255, 255, 0.4);
2302    }
2303    /**
2304   * Reverse border in RTL languages.
2305   */
2306    [dir="rtl"] .txp-nav > ul > li {
2307      border-right: 0;
2308      border-left: 1px solid #c7e0f6;
2309    }
2310    [dir="rtl"] .txp-nav > ul > li:first-child {
2311      border-right: 1px solid #c7e0f6;
2312    }
2313    /**
2314   * Indicator symbols on closed dropdown toggle links.
2315   */
2316    .txp-nav > ul > li > a.dropdown-toggle {
2317      position: relative;
2318      padding: 0 1.61538461538462em 0 1em;
2319    }
2320    .txp-nav > ul > li > a.dropdown-toggle::after {
2321      text-indent: 110%;
2322      text-transform: capitalize;
2323      white-space: nowrap;
2324      overflow: hidden;
2325      display: block;
2326      position: absolute;
2327      top: 1em;
2328      right: 0.5625em;
2329      width: 0;
2330      height: 0;
2331      border: 0 solid transparent;
2332      border-width: 0.25em 0.25em 0;
2333      border-top-color: #333333;
2334      font-size: 16px;
2335      content: "\2193";
2336      opacity: 0.5;
2337      z-index: 10;
2338    }
2339    .txp-nav > ul > li > a.dropdown-toggle:hover::after, .txp-nav > ul > li > a.dropdown-toggle:active::after {
2340      opacity: 1;
2341    }
2342    /**
2343   * Indicator symbols in RTL languages.
2344   */
2345    [dir="rtl"] .txp-nav > ul > li > a.dropdown-toggle {
2346      padding: 0 1em 0 1.61538461538462em;
2347    }
2348    [dir="rtl"] .txp-nav > ul > li > a.dropdown-toggle::after {
2349      right: auto;
2350      left: 0.5625em;
2351    }
2352    /**
2353   * Indicator symbols on open dropdown toggle links.
2354   */
2355    .txp-nav > ul > li.open > a.dropdown-toggle::after {
2356      border: 0 solid transparent;
2357      border-width: 0 0.25em 0.25em;
2358      border-bottom-color: #333333;
2359      content: "\2191";
2360    }
2361    /**
2362   * Secondary-level navigation menu items (dropdown menus).
2363   *
2364   * Example HTML:
2365   *
2366   * <nav class="txp-nav">
2367   *     <ul class="data-dropdown">
2368   *         <li class="dropdown selected">
2369   *             <a class="dropdown-toggle">
2370   *                 Content
2371   *             </a>
2372   *             <ul class="dropdown-menu">
2373   *                 <li><a></a></li>
2374   *                 <li><a></a></li>
2375   *                 <li class="selected"><a></a></li>
2376   *             </ul>
2377   *         </li>
2378   *         <li class="dropdown">
2379   *             <a class="dropdown-toggle">
2380   *                 Presentation
2381   *             </a>
2382   *             <ul class="dropdown-menu">
2383   *                 <li><a></a></li>
2384   *                 <li><a></a></li>
2385   *                 <li><a></a></li>
2386   *             </ul>
2387   *         </li>
2388   *         <li class="dropdown open">
2389   *             <a class="dropdown-toggle">
2390   *                 Admin
2391   *             </a>
2392   *             <ul class="dropdown-menu">
2393   *                 <li><a></a></li>
2394   *                 <li><a></a></li>
2395   *                 <li><a></a></li>
2396   *             </ul>
2397   *         </li>
2398   *         <li>
2399   *             <a>
2400   *                 Non-dropdown link
2401   *             </a>
2402   *         </li>
2403   *     </ul>
2404   * </nav>
2405   */
2406    .dropdown-menu {
2407      display: none;
2408      position: absolute;
2409      top: 3em;
2410      left: 0;
2411      -ms-flex: none;
2412          flex: none;
2413      min-width: 12em;
2414      border: 1px solid;
2415      border-radius: 0 0.3em 0.3em;
2416      background: #fff9e1;
2417      border-color: #cccccc;
2418      z-index: 20000;
2419    }
2420    .dropdown-menu li:first-child {
2421      border-radius: 0 0.3em 0 0;
2422    }
2423    .dropdown-menu li:last-child {
2424      border-radius: 0 0 0.3em 0.3em;
2425    }
2426    .dropdown-menu li:hover {
2427      background: white;
2428    }
2429    .dropdown-menu li.selected {
2430      background: white;
2431    }
2432    .dropdown-menu a {
2433      display: block;
2434      padding: 0.5em 1em;
2435    }
2436    .dropdown-menu::before {
2437      position: absolute;
2438      top: -0.5em;
2439      left: 0.75em;
2440      width: 1em;
2441      height: 0.5em;
2442      background: url("../img/sprite.svg") no-repeat -12em 0;
2443      background-size: 13em 2em;
2444      font-size: 16px;
2445      content: "";
2446      z-index: 2;
2447    }
2448    /**
2449   * Secondary-level navigation menu in RTL languages.
2450   */
2451    [dir="rtl"] .dropdown-menu {
2452      right: 0;
2453      left: auto;
2454      border-radius: 0.3em 0;
2455    }
2456    [dir="rtl"] .dropdown-menu li:first-child {
2457      border-radius: 0.3em 0 0;
2458    }
2459    [dir="rtl"] .dropdown-menu::before {
2460      right: 0.75em;
2461      left: auto;
2462    }
2463    /**
2464   * Show drop-down menu when toggle clicked.
2465   *
2466   * Example HTML:
2467   *
2468   * <li class="dropdown open">
2469   *     <a class="dropdown-toggle">
2470   *         Admin
2471   *     </a>
2472   *     <ul class="dropdown-menu">
2473   *         <li><a></a></li>
2474   *         <li><a></a></li>
2475   *         <li><a></a></li>
2476   *     </ul>
2477   * </li>
2478   */
2479    .open > .dropdown-menu {
2480      display: block;
2481    }
2482    /* Globally shared layout
2483     ========================================================================== */
2484    /**
2485   * 1. Prevent text size adjust after mobile device orientation change.
2486   */
2487    html {
2488      /* 1 */
2489      -webkit-text-size-adjust: 100%;
2490          -ms-text-size-adjust: 100%;
2491              text-size-adjust: 100%;
2492    }
2493    /**
2494   * 1. Add the correct box sizing in Firefox.
2495   * 2. Show the overflow in Edge and IE.
2496   */
2497    hr {
2498      /* 1 */
2499      height: 0;
2500      margin: 1.5em 0;
2501      clear: both;
2502      border: 0;
2503      border-bottom: 1px solid #cccccc;
2504      /* 2 */
2505      overflow: visible;
2506      /* 1 */
2507      box-sizing: content-box;
2508    }
2509    /**
2510   * Hide text but still allow screen reader access.
2511   *
2512   * Example HTML:
2513   *
2514   * <h1 class="txp-accessibility">
2515   */
2516    .txp-accessibility {
2517      position: absolute;
2518      left: -1000em;
2519      width: 1px;
2520      height: 1px;
2521      overflow: hidden;
2522    }
2523    /**
2524   * Swap absolute positions in RTL languages.
2525   *
2526   * This avoids browser scrollbar displaying incorrectly.
2527   */
2528    [dir="rtl"] .txp-accessibility {
2529      right: -1000em;
2530      left: auto;
2531    }
2532    /**
2533   * Ensure dropdowns are hidden at page load (prevents content 'jumping').
2534   */
2535    .txp-dropdown {
2536      display: none;
2537    }
2538    /**
2539   * Search widget at top of lists.
2540   *
2541   * Appears on:
2542   *
2543   * List panels.
2544   *
2545   * Example HTML:
2546   *
2547   * <form class="txp-search">
2548   *     <span class="txp-search-clear"><a>Clear search</a></span>
2549   *     <input class="txp-search-input" type="search" size="24">
2550   *     <span class="txp-search-buttons">
2551   *         <button class="txp-search-button">Search</button>
2552   *         <button class="txp-search-options">Search criteria</button>
2553   *     </span>
2554   * </form>
2555   */
2556    .txp-search {
2557      display: -ms-flexbox;
2558      display: flex;
2559      -ms-flex-pack: end;
2560          justify-content: flex-end;
2561      margin: 1em 0;
2562    }
2563    .txp-search .ui-menu {
2564      position: absolute;
2565      width: 18em;
2566      z-index: 100;
2567    }
2568    .txp-search .ui-controlgroup {
2569      -ms-flex-wrap: nowrap;
2570          flex-wrap: nowrap;
2571    }
2572    .txp-search .txp-dropdown input {
2573      vertical-align: -0.23076923076923em;
2574    }
2575    .txp-search .txp-dropdown label {
2576      display: inline-block;
2577      width: 85%;
2578      padding: 0.23076923076923em 0.30769230769231em;
2579      cursor: pointer;
2580      vertical-align: text-top;
2581    }
2582    .txp-search-clear {
2583      -ms-flex: 1;
2584          flex: 1;
2585      margin: auto 0.5em;
2586      text-align: right;
2587    }
2588    [dir="rtl"] .txp-search-clear {
2589      text-align: left;
2590    }
2591    /**
2592   * Actions and upload forms at top of listings.
2593   *
2594   * Appears on:
2595   *
2596   * List panels.
2597   *
2598   * Example HTML:
2599   *
2600   * <div class="txp-control-panel">
2601   *     Content
2602   * </div>
2603   */
2604    .txp-control-panel {
2605      margin-bottom: 1em;
2606      float: left;
2607    }
2608    .txp-control-panel > * {
2609      margin: 0 1em 0 0;
2610    }
2611    .txp-control-panel > *:last-child {
2612      margin-right: 0;
2613    }
2614    .txp-control-panel form {
2615      display: inline-block;
2616    }
2617    .txp-control-panel textarea {
2618      margin-bottom: 1em;
2619    }
2620    /**
2621   * Swap float/margin positions in RTL languages.
2622   */
2623    [dir="rtl"] .txp-control-panel {
2624      float: right;
2625    }
2626    [dir="rtl"] .txp-control-panel > * {
2627      margin: 0 0 0 1em;
2628    }
2629    /**
2630   * List display options at top of listings.
2631   *
2632   * Appears on:
2633   *
2634   * List panels.
2635   *
2636   * Example HTML:
2637   *
2638   * <div class="txp-list-options">
2639   *     <a>List view</a>
2640   *     <a>Grid view</a>
2641   *     <a>List options</a>
2642   * </div>
2643   */
2644    .txp-list-options {
2645      margin: 0.46153846153846em 0 1em;
2646      float: right;
2647    }
2648    .txp-list-options > * {
2649      margin: 0 0 0 1em;
2650    }
2651    .txp-list-options form {
2652      display: inline-block;
2653    }
2654    /**
2655   * Swap float/margin positions in RTL languages.
2656   */
2657    [dir="rtl"] .txp-list-options {
2658      float: left;
2659    }
2660    [dir="rtl"] .txp-list-options > * {
2661      margin: 0 1em 0 0;
2662    }
2663    /**
2664   * Additonal action links ('Duplicate', 'View', etc.) on some panels.
2665   *
2666   * Appears on:
2667   *
2668   * Article write/edit panel, pages panel, forms panel, styles panel.
2669   *
2670   * Example HTML:
2671   *
2672   * <p class="txp-actions">
2673   *     <a class="txp-article-view">View</a>
2674   *     <a class="txp-clone">Duplicate</a>
2675   *     <a class="txp-new">Create new</a>
2676   * </p>
2677   */
2678    .txp-actions a {
2679      display: inline-block;
2680      margin: 0.5em 1em 0 0;
2681    }
2682    .txp-actions a:last-child {
2683      margin: 0.5em 0 0;
2684    }
2685    /**
2686   * Swap margin positions in RTL languages.
2687   */
2688    [dir="rtl"] .txp-actions a {
2689      margin: 0.5em 0 0 1em;
2690    }
2691    [dir="rtl"] .txp-actions a:last-child {
2692      margin: 0.5em 0 0;
2693    }
2694    /**
2695   * Remove top margin when inside a dialog box.
2696   */
2697    .ui-dialog .txp-actions {
2698      margin-top: 0;
2699    }
2700    /**
2701   * Inline the action links.
2702   *
2703   * Appears on:
2704   *
2705   * Article pages panel, forms panel, styles panel.
2706   */
2707    .txp-actions-inline {
2708      margin-top: 1.30769230769231em;
2709      float: right;
2710    }
2711    /**
2712   * Swap position in RTL languages.
2713   */
2714    [dir="rtl"] .txp-actions-inline {
2715      float: left;
2716    }
2717    /**
2718   * AJAX spinners.
2719   *
2720   * Example HTML:
2721   *
2722   * <span class="spinner"></span>
2723   */
2724    span.spinner {
2725      background-image: url("../img/spinner.gif");
2726      background-size: 13px 13px;
2727      display: inline-block;
2728      width: 13px;
2729      height: 13px;
2730    }
2731  }
2732  
2733  @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) {
2734    span.spinner {
2735      background-image: url("../img/spinner@2x.gif");
2736    }
2737  }
2738  
2739  @media screen {
2740    /**
2741   * Parent container for multi-edit `select` widget at bottom of listings.
2742   *
2743   * Appears on:
2744   *
2745   * List panels.
2746   *
2747   * Example HTML:
2748   *
2749   * <div class="multi-edit">
2750   *     <select>
2751   *         <option selected="selected">With selected...</option>
2752   *         <option>Change author</option>
2753   *         <option>Duplicate</option>
2754   *         <option>Delete</option>
2755   *     </select>
2756   * </div>
2757   */
2758    .multi-edit {
2759      margin: 1em 0 0;
2760    }
2761    /**
2762   * Hide secondary `select` element on multi-edit `select` widget.
2763   *
2764   * Display is controlled via JavaScript (hidden by default until an action is
2765   * selected by user, then overrode by `.multi-step`).
2766   *
2767   * Appears on:
2768   *
2769   * List panels.
2770   *
2771   * Example HTML:
2772   *
2773   * <div class="multi-edit">
2774   *     <select>
2775   *         <option selected="selected">With selected...</option>
2776   *         <option>Change author</option>
2777   *         <option>Duplicate</option>
2778   *         <option>Delete</option>
2779   *     </select>
2780   *     <div class="multi-option">
2781   *         <select name="order">
2782   *             <option value="1">1</option>
2783   *             <option value="2">1</option>
2784   *             <option value="3" selected="selected">5</option>
2785   *         </select>
2786   *     </div>
2787   *     <input type="submit" value="Go">
2788   * </div>
2789   */
2790    .multi-option {
2791      display: none;
2792    }
2793    /**
2794   * Show secondary `select` element on multi-edit `select` widget.
2795   *
2796   * Display is controlled via JavaScript (class not present until an action is
2797   * selected by user, then overrides `.multi-edit`).
2798   *
2799   * Appears on:
2800   *
2801   * List panels.
2802   *
2803   * Example HTML:
2804   *
2805   * <div class="multi-edit">
2806   *     <select>
2807   *         <option selected="selected">With selected...</option>
2808   *         <option>Change author</option>
2809   *         <option>Duplicate</option>
2810   *         <option>Delete</option>
2811   *     </select>
2812   *     <div class="multi-option multi-step">
2813   *         <select name="order">
2814   *             <option value="1">1</option>
2815   *             <option value="2">1</option>
2816   *             <option value="3" selected="selected">5</option>
2817   *         </select>
2818   *     </div>
2819   *     <input type="submit" value="Go">
2820   * </div>
2821   */
2822    .multi-option.multi-step {
2823      display: inline-block;
2824      margin-left: 0.30769230769231em;
2825    }
2826    /**
2827   * Ensure links display as inline blocks (prevents linebreak problems).
2828   *
2829   * Example HTML:
2830   *
2831   * <a class="txp-option-link">Edit</a>
2832   */
2833    .txp-option-link {
2834      display: inline-block;
2835      white-space: nowrap;
2836    }
2837    /**
2838   * When text sections are linked with anchors, make sure there is ample padding
2839   * above so they don't become obscured by sticky `header` area.
2840   *
2841   * Appears on:
2842   *
2843   * Plugin help pages, miscellaneous text pages.
2844   *
2845   * Example HTML:
2846   *
2847   * <section class="text-section" id="help-section02">
2848   */
2849    .text-section {
2850      margin-top: 3em;
2851      padding-top: 3em;
2852      border-top: 2px solid #cccccc;
2853    }
2854    /**
2855   * System permissions 'keep out' messages.
2856   */
2857    .restricted-area {
2858      font-size: 2em;
2859      text-align: center;
2860    }
2861    /**
2862   * Visually disabled text and anchors.
2863   */
2864    .disabled {
2865      background-image: none;
2866      cursor: default !important;
2867      opacity: 0.33;
2868    }
2869    .disabled a {
2870      text-decoration: none;
2871      cursor: default;
2872    }
2873    /**
2874   * List navigators on list panels.
2875   *
2876   * Anchor elements kept to one line to prevent space between buttons.
2877   *
2878   * Example HTML:
2879   *
2880   * <div class="txp-navigation" id="image_navigation">
2881   *     <p class="nav-tertiary pageby">
2882   *         <a class="navlink-active">15</a><a class="navlink">25</a><a class="navlink">50</a>
2883   *     </p>
2884   *     <nav class="prev-next">
2885   *         <span class="disabled"><span class="ui-icon ui-icon-arrowthick-1-w">Previous</span></span>
2886   *         <form>
2887   *             <label>Page</label>
2888   *             <input class="current-page">
2889   *             of <span class="total-pages">2</span>
2890   *         </form>
2891   *         <a><span class="ui-icon ui-icon-arrowthick-1-e">Next</span></a>
2892   *     </nav>
2893   * </div>
2894   */
2895    .txp-navigation::after {
2896      display: table;
2897      clear: both;
2898      content: "";
2899    }
2900    .pageby {
2901      margin: 1em 0;
2902      float: left;
2903    }
2904    .prev-next {
2905      margin: 1em 0;
2906      float: right;
2907    }
2908    .prev-next form {
2909      display: inline-block;
2910    }
2911    /**
2912   * Swap margin positions and arrow icons in RTL languages.
2913   */
2914    [dir="rtl"] .pageby {
2915      float: right;
2916    }
2917    [dir="rtl"] .prev-next {
2918      float: left;
2919    }
2920    [dir="rtl"] .prev-next .ui-icon-arrowthick-1-w {
2921      background-position: -32px -48px;
2922    }
2923    [dir="rtl"] .prev-next .ui-icon-arrowthick-1-e {
2924      background-position: -96px -48px;
2925    }
2926    /* Panes
2927     ========================================================================== */
2928    /**
2929   * Styling of edit panels.
2930   *
2931   * 1. Maximum width of edit panels.
2932   * 2. Remove margin above `h2` within panels.
2933   */
2934    .txp-edit {
2935      max-width: 55em;
2936      margin: 0 auto 1em;
2937      padding: 1em 1em 1px;
2938      /* 1 */
2939      background: #f7f7f7;
2940    }
2941    .txp-edit h2 {
2942      /* 2 */
2943      margin-top: 0;
2944    }
2945    /**
2946   * Styling of edit panel cancel/submit button combinations.
2947   */
2948    .txp-edit-actions {
2949      margin: 1em -1em;
2950      padding: 1em 1em 0;
2951      border-top: 2px solid #f7f7f7;
2952      text-align: right;
2953    }
2954    .txp-edit-actions > * {
2955      margin: 0 0 0 1em;
2956    }
2957    /**
2958   * Swap alignment and margin positions in RTL languages.
2959   */
2960    [dir="rtl"] .txp-edit-actions {
2961      text-align: left;
2962    }
2963    [dir="rtl"] .txp-edit-actions > * {
2964      margin: 0 1em 0 0;
2965    }
2966    /* Form fields.
2967     ========================================================================== */
2968    /**
2969   * Form field containers.
2970   *
2971   * Textpattern form fields can have optional inline help texts applied to them.
2972   *
2973   * Example HTML:
2974   *
2975   * <div class="txp-form-field">
2976   *     <div class="txp-form-field-label">
2977   *         <label> <a class="pophelp">i</a></label>
2978   *     </div>
2979   *     <div class="txp-form-field-value">
2980   *         <input>
2981   *     </div>
2982   * </div>
2983   *
2984   * <div class="txp-form-field">
2985   *     <div class="txp-form-field-label">
2986   *         <label> <a class="pophelp">i</a></label>
2987   *     </div>
2988   *     <div class="txp-form-field-instructions">
2989   *         <p>(Optional) intructions on how to fill out this form field.</p>
2990   *     </div>
2991   *     <div class="txp-form-field-value">
2992   *         <input>
2993   *     </div>
2994   * </div>
2995   */
2996    .txp-form-field {
2997      margin: 1em 0;
2998    }
2999    /**
3000   * Label/value form field pairings.
3001   *
3002   * Note: this is always collapsed to a one-column format on mobile layout.
3003   *
3004   * Example HTML:
3005   *
3006   * <div class="txp-form-field">
3007   *     <div class="txp-form-field-label">
3008   *         <label>Label <a class="pophelp">i</a></label>
3009   *     </div>
3010   *     <div class="txp-form-field-value">
3011   *         <input type="text" size="32">
3012   *     </div>
3013   * </div>
3014   */
3015    .txp-form-field-label,
3016    .txp-form-field-value {
3017      max-width: 29em;
3018    }
3019    /**
3020   * Inline form field pairings on edit panels, preferences group panels and
3021   * setup panels.
3022   *
3023   * Example HTML:
3024   *
3025   * <form class="txp-edit">
3026   *     <div class="txp-form-field">
3027   *         <div class="txp-form-field-label"></div>
3028   *         <div class="txp-form-field-value"></div>
3029   *     </div>
3030   * </form>
3031   */
3032    .txp-edit .txp-form-field:not(.txp-form-field-textarea),
3033    .txp-prefs-group .txp-form-field:not(.txp-form-field-textarea),
3034    .setup:not(.welcome) .txp-form-field:not(.txp-form-field-textarea) {
3035      display: -ms-flexbox;
3036      display: flex;
3037      -ms-flex-align: baseline;
3038          align-items: baseline;
3039    }
3040    .txp-edit .txp-form-field-label,
3041    .txp-edit .txp-form-field-value,
3042    .txp-prefs-group .txp-form-field-label,
3043    .txp-prefs-group .txp-form-field-value,
3044    .setup:not(.welcome) .txp-form-field-label,
3045    .setup:not(.welcome) .txp-form-field-value {
3046      -ms-flex: 1 1 0%;
3047          flex: 1 1 0%;
3048      min-height: 2.15384615384615em;
3049    }
3050    /**
3051   * Don't inline or constrain form fields for textareas.
3052   *
3053   * Example HTML:
3054   *
3055   * <div class="txp-form-field txp-form-field-textarea">
3056   *     <div class="txp-form-field-label">
3057   *         <label>Label <a class="pophelp">i</a></label>
3058   *     </div>
3059   *     <div class="txp-form-field-value">
3060   *         <textarea></textarea>
3061   *     </div>
3062   * </div>
3063   */
3064    .txp-form-field-textarea .txp-form-field-label,
3065    .txp-form-field-textarea .txp-form-field-value {
3066      -ms-flex: none;
3067          flex: none;
3068      max-width: inherit;
3069      min-height: inherit;
3070    }
3071    /**
3072   * Don't constrain form fields when in 3 column layout spans.
3073   */
3074    .txp-layout-4col-3span .txp-form-field-label,
3075    .txp-layout-4col-3span .txp-form-field-value {
3076      max-width: inherit;
3077    }
3078    /**
3079   * Form field inline help texts.
3080   *
3081   * 1. Limit maximum width of instructions, for legibility.
3082   *
3083   * Example HTML:
3084   *
3085   * <div class="txp-form-field>
3086   *     <div class="txp-form-field-label"></div>
3087   *     <div class="txp-form-field-instructions">
3088   *         <p>(Optional) intructions on how to fill out this form field.</p>
3089   *     </div>
3090   *     <div class="txp-form-field-value"></div>
3091   * </div>
3092   */
3093    .txp-form-field-instructions {
3094      /* 1 */
3095      max-width: 56em;
3096    }
3097    /**
3098   * Tag builder link on Forms panel and Pages panel.
3099   */
3100    .txp-tagbuilder-dialog {
3101      position: relative;
3102      margin: 0 1px;
3103      float: right;
3104      z-index: 2;
3105    }
3106    /**
3107   * Swap alignment of tag builder link in RTL languages.
3108   */
3109    [dir="rtl"] .txp-tagbuilder-dialog {
3110      float: left;
3111    }
3112    /**
3113   * Ensure Tag builder vertical footprint doesn't spill out of screen area.
3114   */
3115    .txp-tagbuilder-container {
3116      display: -ms-flexbox;
3117      display: flex;
3118      -ms-flex-flow: column;
3119          flex-flow: column;
3120      max-height: 90vh;
3121      overflow: hidden;
3122    }
3123    .txp-tagbuilder-container .ui-dialog-titlebar {
3124      -ms-flex: none;
3125          flex: none;
3126    }
3127    .txp-tagbuilder-content {
3128      -ms-flex: 1 1 auto;
3129          flex: 1 1 auto;
3130      overflow: scroll;
3131    }
3132    /* Setup and login panels - additional layout
3133     ========================================================================== */
3134    /**
3135   * Reduced `body` top padding of setup/login panels.
3136   *
3137   * Example HTML:
3138   *
3139   * <body class="setup">
3140   * <body class="login">
3141   */
3142    .setup,
3143    .login {
3144      padding: 1em 2.75% 0;
3145    }
3146    /**
3147   * Column width and margins of setup panels.
3148   */
3149    .txp-setup {
3150      max-width: 42em;
3151      margin: 1em auto;
3152    }
3153    .welcome .txp-setup {
3154      max-width: 20.30769230769231em;
3155    }
3156    /**
3157   * Column width and margins of login panels.
3158   */
3159    .txp-login {
3160      max-width: 20.30769230769231em;
3161      margin: 1em auto;
3162    }
3163    /**
3164   * Large Textpattern logo replaces `h1`.
3165   */
3166    .welcome h1,
3167    .login h1 {
3168      /* 2 */
3169      text-indent: 110%;
3170      text-transform: capitalize;
3171      white-space: nowrap;
3172      overflow: hidden;
3173      width: 16.5em;
3174      height: 3.375em;
3175      background: url("../img/textpattern.svg") no-repeat;
3176      background-size: 16.5em 3.375em;
3177      font-size: 16px;
3178    }
3179    /**
3180   * Welcome page `select` spans entire column width.
3181   */
3182    .welcome select {
3183      width: 100%;
3184    }
3185    /* Content -> Categories panel - additional layout
3186     ========================================================================== */
3187    /**
3188   * Extra margin below multi-edit widgets on categories page.
3189   */
3190    #page-category .multi-edit {
3191      margin-bottom: 1em;
3192    }
3193    /* Content -> Write panel - additional layout
3194     ========================================================================== */
3195    /**
3196   * View mode tabs on write area.
3197   *
3198   * Example HTML:
3199   *
3200   * <div id="view_modes">
3201   *     <ul>
3202   *         <li id="tab-text" class="active"><a>Text</a></li>
3203   *         <li id="tab-html"><a>HTML</a></li>
3204   *         <li id="tab-preview"><a>Preview</a></li>
3205   *     </ul>
3206   * </div>
3207   */
3208    #view_modes ul {
3209      margin: 0;
3210      padding: 0;
3211      border-bottom: 1px solid #cccccc;
3212      font-size: 11px;
3213      line-height: 16px;
3214    }
3215    #view_modes ul li {
3216      display: inline-block;
3217    }
3218    #view_modes ul a {
3219      display: block;
3220      position: relative;
3221      bottom: -1px;
3222      padding: 0.5em 1em;
3223      border: 1px solid #cccccc;
3224      background-color: #f2f2f2;
3225      color: #333333;
3226      text-decoration: none;
3227    }
3228    #view_modes ul a:hover {
3229      border-color: #aaaaaa;
3230      background-color: #f7f7f7;
3231    }
3232    #view_modes ul a:focus {
3233      border-color: #0066ff;
3234      outline: none;
3235    }
3236    #view_modes ul .active a {
3237      border-bottom-color: #f7f7f7;
3238      background-color: white;
3239    }
3240    #view_modes ul .active a:focus {
3241      border-color: #0066ff;
3242    }
3243    /**
3244   * Write page excerpt field when in HTML preview.
3245   */
3246    .html .excerpt {
3247      margin-bottom: 1em;
3248    }
3249    /**
3250   * Custom font size/weight/colour for elements in write -> main content area.
3251   */
3252    #main_content .text input {
3253      font-size: 16px;
3254    }
3255    #main_content .text textarea {
3256      font-size: 16px;
3257      line-height: 1.5em;
3258    }
3259    #main_content .text .title input {
3260      font-size: 20px;
3261      font-weight: bold;
3262    }
3263    #main_content .author {
3264      color: #777777;
3265    }
3266    /* Content -> Articles panel - additional layout
3267     ========================================================================== */
3268    /**
3269   * Grey-out text for unpublished articles/non-modified dates in the list.
3270   */
3271    .unpublished,
3272    .not-modified {
3273      color: #777777;
3274    }
3275    /* Content -> Images panel - additional layout
3276     ========================================================================== */
3277    .has-thumbnail a:focus {
3278      outline: 0;
3279    }
3280    .thumbnail-alter input {
3281      margin: 0 0.30769230769231em 0 0;
3282    }
3283    .thumbnail-alter input:last-child {
3284      margin: 0;
3285    }
3286    [dir="rtl"] .thumbnail-alter input {
3287      margin: 0 0 0 0.30769230769231em;
3288    }
3289    [dir="rtl"] .thumbnail-alter input:last-child {
3290      margin: 0;
3291    }
3292    .thumbnail-image form {
3293      display: inline-block;
3294      margin-top: 5px;
3295      vertical-align: top;
3296    }
3297    /* Content -> Files panel - additional layout
3298     ========================================================================== */
3299    /**
3300   * Make sure form for selecting existing files is on a new line.
3301   */
3302    .txp-control-panel .assign-existing-form {
3303      display: block;
3304      margin-top: 1em;
3305    }
3306    /* Content -> Comments panel - additional layout
3307     ========================================================================== */
3308    /**
3309   * Red background highlight for spam comment rows in the list.
3310   */
3311    #page-discuss .txp-list tr.spam {
3312      background: #f5e5e5;
3313    }
3314    /**
3315   * Yellow background highlight for unmoderated comment rows in the list.
3316   */
3317    #page-discuss .txp-list tr.moderate {
3318      background: #f9f2e3;
3319    }
3320    /* Presentation -> all panels - additional layout
3321     ========================================================================== */
3322    .presentation textarea.code {
3323      height: 64vh;
3324    }
3325    /* Presentation -> Forms panel - additional layout
3326     ========================================================================== */
3327    #page-form .name {
3328      display: inline-block;
3329      margin: 1em 1em 0 0;
3330    }
3331    #page-form .name input {
3332      width: 14.46153846153846em;
3333    }
3334    [dir="rtl"] #page-form .name {
3335      margin: 1em 0 0 1em;
3336    }
3337    #page-form .type {
3338      display: inline-block;
3339      margin: 1em 0 0;
3340    }
3341    #page-form .txp-layout-4col-3span .txp-actions a {
3342      margin-top: 1.5em;
3343    }
3344    /* Admin -> Preferences panel - additional layout
3345     ========================================================================== */
3346    .txp-prefs-group {
3347      max-width: 60em;
3348    }
3349    /* Admin -> Languages panel - additional layout
3350     ========================================================================== */
3351    #page-lang .txp-list .modified {
3352      margin-left: 0.6em;
3353    }
3354    /* Admin -> Plugins panel - additional layout
3355     ========================================================================== */
3356    tr .manage span,
3357    tr .plugin-prefs {
3358      visibility: hidden;
3359    }
3360    tr.active .manage span,
3361    tr.active .plugin-prefs {
3362      visibility: visible;
3363    }
3364    div.code {
3365      height: 21em;
3366      margin-bottom: 1em;
3367      padding: 0.15384615384615em 0.38461538461538em;
3368      border: 1px solid #cccccc;
3369      overflow: auto;
3370      box-sizing: border-box;
3371    }
3372    /* Layout helpers
3373     ========================================================================== */
3374    /**
3375   * Hide jQuery UI elements.
3376   */
3377    .ui-helper-hidden {
3378      display: none;
3379    }
3380    /**
3381   * Hide jQuery UI  text but still allow screen reader access.
3382   */
3383    .ui-helper-hidden-accessible {
3384      position: absolute;
3385      width: 1px;
3386      height: 1px;
3387      margin: -1px;
3388      padding: 0;
3389      border: 0;
3390      overflow: hidden;
3391      clip: rect(0 0 0 0);
3392    }
3393    /**
3394   * Normalize various rules to avoid style inheritance.
3395   */
3396    .ui-helper-reset {
3397      margin: 0;
3398      padding: 0;
3399      border: 0;
3400      outline: 0;
3401      font-size: 13px;
3402      line-height: 20px;
3403      list-style: none;
3404      text-decoration: none;
3405    }
3406    /**
3407   * Clearfix jQuery UI elements.
3408   */
3409    .ui-helper-clearfix::after {
3410      display: table;
3411      clear: both;
3412      border-collapse: collapse;
3413      content: "";
3414    }
3415    /**
3416   * Normalize absolute positioning of jQuery UI elements to avoid misplacement.
3417   */
3418    .ui-helper-zfix {
3419      position: absolute;
3420      top: 0;
3421      left: 0;
3422      width: 100%;
3423      height: 100%;
3424      opacity: 0;
3425    }
3426    /**
3427   * Make jQuery UI elements show above other elements.
3428   */
3429    .ui-front {
3430      z-index: 100;
3431    }
3432    /* Component containers
3433     ========================================================================== */
3434    /**
3435   * Normalize font size of nested jQuery UI widgets to avoid style inheritance.
3436   */
3437    .ui-widget .ui-widget {
3438      font-size: 13px;
3439    }
3440    /**
3441   * General style for jQuery widget content.
3442   */
3443    .ui-widget-content {
3444      border: 1px solid #cccccc;
3445      background-color: #f7f7f7;
3446    }
3447    /**
3448   * General style for jQuery widget headers.
3449   */
3450    .ui-widget-header {
3451      background-color: #eeeeee;
3452      font-weight: bold;
3453    }
3454    /* Interaction states
3455     ========================================================================== */
3456    /**
3457   * Default jQuery UI widget interaction state.
3458   */
3459    .ui-state-default {
3460      border: 1px solid #cccccc;
3461      background-color: #f2f2f2;
3462      color: #333333;
3463    }
3464    /**
3465   * Override hover/focus states for anchors in certain situations.
3466   */
3467    a.ui-state-default:hover,
3468    a.ui-state-default:focus {
3469      color: #333333;
3470      text-decoration: none;
3471    }
3472    /**
3473   * Hover jQuery UI widget interaction states.
3474   */
3475    .ui-state-hover {
3476      border-color: #aaaaaa;
3477      background-color: #f7f7f7;
3478    }
3479    /**
3480   * Focus jQuery UI widget interaction states.
3481   */
3482    .ui-state-focus {
3483      border-color: #0066ff;
3484      outline: 0;
3485    }
3486    .ui-state-focus a {
3487      outline: 0;
3488    }
3489    /**
3490   * Active jQuery UI widget interaction state.
3491   */
3492    .ui-state-active {
3493      background-color: white;
3494    }
3495    /**
3496   * Highlight colour for jQuery UI widgets currently in 'selecting' state.
3497   */
3498    .ui-selecting {
3499      background-color: #d4e7f8;
3500    }
3501    /**
3502   * Highlight colour for jQuery UI widgets currently in 'selected' state.
3503   */
3504    .ui-selected {
3505      background-color: #eaf3fc;
3506    }
3507    /* Interaction cues
3508     ========================================================================== */
3509    /**
3510   * jQuery UI highlight cue colouring.
3511   */
3512    .ui-state-highlight {
3513      border: 1px solid #e4c788;
3514      background-color: #f7eedb;
3515    }
3516    /**
3517   * jQuery UI error cue colouring.
3518   */
3519    .ui-state-error {
3520      border: 1px solid #e1b2b2;
3521      background-color: #f2dede;
3522      color: #9d261d;
3523    }
3524    /**
3525   * Visually prioritized jQuery UI text.
3526   */
3527    .ui-priority-primary {
3528      font-weight: bold;
3529    }
3530    /**
3531   * Visually non-prioritized jQuery UI text.
3532   */
3533    .ui-priority-secondary {
3534      font-weight: normal;
3535      opacity: 0.66;
3536    }
3537    /**
3538   * Visually disabled jQuery UI text and anchors.
3539   */
3540    .ui-state-disabled {
3541      background-image: none;
3542      cursor: default !important;
3543      opacity: 0.33;
3544      pointer-events: none;
3545    }
3546    .ui-state-disabled a {
3547      text-decoration: none;
3548      cursor: default;
3549    }
3550    /* Overlays
3551     ========================================================================== */
3552    /**
3553   * Dark, semi-transparent container overlays.
3554   *
3555   * Example HTML:
3556   *
3557   * <div class="ui-widget-overlay"></div>
3558   */
3559    .ui-widget-overlay {
3560      position: fixed;
3561      top: 0;
3562      left: 0;
3563      width: 100%;
3564      height: 100%;
3565      background: rgba(0, 0, 0, 0.75);
3566    }
3567    /* Shadows
3568     ========================================================================== */
3569    /**
3570   * Faux shadows via `background-color`.
3571   *
3572   * Example HTML:
3573   *
3574   * <div class="ui-widget-shadow"></div>
3575   */
3576    .ui-widget-shadow {
3577      box-shadow: 0 0 5px #666666;
3578    }
3579    /* Icons
3580     ========================================================================== */
3581    /**
3582   * jQuery UI icon sprites, various colourschemes depending of usage state.
3583   *
3584   * Also used for 'Destroy' button.
3585   *
3586   * Example HTML:
3587   *
3588   * <span class="ui-icon ui-icon-caret-1-n"></span>
3589   * <span class="ui-icon ui-icon-folder-collapsed"></span>
3590   * <span class="ui-icon ui-icon-play"></span>
3591   *
3592   * TODO: Use `mask` in future (http://caniuse.com/#search=mask), instead of
3593   * `filter` or dedicated image.
3594   */
3595    .ui-icon {
3596      display: inline-block;
3597      position: relative;
3598      width: 16px;
3599      height: 16px;
3600      background-image: url("../img/ui-icon-sprite-333333.svg");
3601      background-repeat: no-repeat;
3602      background-size: 256px 272px;
3603      text-indent: -9999px;
3604      overflow: hidden;
3605      vertical-align: text-bottom;
3606    }
3607    .ui-widget-icon-block {
3608      display: block;
3609      left: 50%;
3610      margin-left: -8px;
3611    }
3612    /**
3613   * Default state icons.
3614   *
3615   * TODO: Use `mask` in future.
3616   */
3617    .ui-state-default .ui-icon {
3618      -webkit-filter: brightness(1.6666667);
3619              filter: brightness(1.6666667);
3620    }
3621    /**
3622   * Weighted content icons and interaction state icons.
3623   *
3624   * TODO: Use `mask` in future.
3625   */
3626    .ui-widget-content .ui-icon,
3627    .ui-widget-header .ui-icon,
3628    .ui-state-hover .ui-icon,
3629    .ui-state-focus .ui-icon,
3630    .ui-state-active .ui-icon {
3631      -webkit-filter: none;
3632              filter: none;
3633    }
3634    /**
3635   * 'Succes' state icons.
3636   *
3637   * Example HTML:
3638   *
3639   * <p class="success">
3640   *     <span class="ui-icon ui-icon-check"></span>
3641   *     Success!
3642   * </p>
3643   *
3644   * TODO: Use `mask` in future.
3645   */
3646    .success .ui-icon {
3647      background-image: url("../img/ui-icon-sprite-success.svg");
3648    }
3649    /**
3650   * 'Warning' state icons.
3651   *
3652   * Example HTML:
3653   *
3654   * <p class="warning">
3655   *     <span class="ui-icon ui-icon-alert"></span>
3656   *     Warning!
3657   * </p>
3658   *
3659   * TODO: Use `mask` in future.
3660   */
3661    .ui-state-highlight .ui-icon,
3662    .warning .ui-icon {
3663      background-image: url("../img/ui-icon-sprite-warning.svg");
3664    }
3665    /**
3666   * 'Error' state icons.
3667   *
3668   * Example HTML:
3669   *
3670   * <p class="error">
3671   *     <span class="ui-icon ui-icon-alert"></span>
3672   *     Error!
3673   * </p>
3674   *
3675   * TODO: Use `mask` in future.
3676   */
3677    .ui-state-error .ui-icon,
3678    .ui-state-error-text .ui-icon,
3679    .error .ui-icon,
3680    .destroy .ui-icon {
3681      background-image: url("../img/ui-icon-sprite-error.svg");
3682    }
3683    /**
3684   * 'Information' state icons.
3685   *
3686   * Example HTML:
3687   *
3688   * <p class="information">
3689   *     <span class="ui-icon ui-icon-info"></span>
3690   *     Content
3691   * </p>
3692   *
3693   * TODO: Use `mask` in future.
3694   */
3695    .information .ui-icon {
3696      background-image: url("../img/ui-icon-sprite-info.svg");
3697    }
3698    /**
3699   * Icons within Textpattern system message panes.
3700   *
3701   * TODO: Use `mask` in future.
3702   */
3703    #messagepane .ui-icon {
3704      background-image: url("../img/ui-icon-sprite-ffffff.svg");
3705    }
3706    /**
3707   * Icon sprite positionings.
3708   *
3709   * TODO: Use `mask` in future.
3710   */
3711    .ui-icon-blank {
3712      background-position: 16px 16px;
3713    }
3714    .ui-icon-caret-1-n {
3715      background-position: 0 0;
3716    }
3717    .ui-icon-caret-1-ne {
3718      background-position: -16px 0;
3719    }
3720    .ui-icon-caret-1-e {
3721      background-position: -32px 0;
3722    }
3723    .ui-icon-caret-1-se {
3724      background-position: -48px 0;
3725    }
3726    .ui-icon-caret-1-s {
3727      background-position: -64px 0;
3728    }
3729    .ui-icon-caret-1-sw {
3730      background-position: -80px 0;
3731    }
3732    .ui-icon-caret-1-w {
3733      background-position: -96px 0;
3734    }
3735    .ui-icon-caret-1-nw {
3736      background-position: -112px 0;
3737    }
3738    .ui-icon-caret-2-n-s {
3739      background-position: -128px 0;
3740    }
3741    .ui-icon-caret-2-e-w {
3742      background-position: -144px 0;
3743    }
3744    .ui-icon-triangle-1-n {
3745      background-position: 0 -16px;
3746    }
3747    .ui-icon-triangle-1-ne {
3748      background-position: -16px -16px;
3749    }
3750    .ui-icon-triangle-1-e {
3751      background-position: -32px -16px;
3752    }
3753    .ui-icon-triangle-1-se {
3754      background-position: -48px -16px;
3755    }
3756    .ui-icon-triangle-1-s {
3757      background-position: -64px -16px;
3758    }
3759    .ui-icon-triangle-1-sw {
3760      background-position: -80px -16px;
3761    }
3762    .ui-icon-triangle-1-w {
3763      background-position: -96px -16px;
3764    }
3765    .ui-icon-triangle-1-nw {
3766      background-position: -112px -16px;
3767    }
3768    .ui-icon-triangle-2-n-s {
3769      background-position: -128px -16px;
3770    }
3771    .ui-icon-triangle-2-e-w {
3772      background-position: -144px -16px;
3773    }
3774    .ui-icon-arrow-1-n {
3775      background-position: 0 -32px;
3776    }
3777    .ui-icon-arrow-1-ne {
3778      background-position: -16px -32px;
3779    }
3780    .ui-icon-arrow-1-e {
3781      background-position: -32px -32px;
3782    }
3783    .ui-icon-arrow-1-se {
3784      background-position: -48px -32px;
3785    }
3786    .ui-icon-arrow-1-s {
3787      background-position: -64px -32px;
3788    }
3789    .ui-icon-arrow-1-sw {
3790      background-position: -80px -32px;
3791    }
3792    .ui-icon-arrow-1-w {
3793      background-position: -96px -32px;
3794    }
3795    .ui-icon-arrow-1-nw {
3796      background-position: -112px -32px;
3797    }
3798    .ui-icon-arrow-2-n-s {
3799      background-position: -128px -32px;
3800    }
3801    .ui-icon-arrow-2-ne-sw {
3802      background-position: -144px -32px;
3803    }
3804    .ui-icon-arrow-2-e-w {
3805      background-position: -160px -32px;
3806    }
3807    .ui-icon-arrow-2-se-nw {
3808      background-position: -176px -32px;
3809    }
3810    .ui-icon-arrowstop-1-n {
3811      background-position: -192px -32px;
3812    }
3813    .ui-icon-arrowstop-1-e {
3814      background-position: -208px -32px;
3815    }
3816    .ui-icon-arrowstop-1-s {
3817      background-position: -224px -32px;
3818    }
3819    .ui-icon-arrowstop-1-w {
3820      background-position: -240px -32px;
3821    }
3822    .ui-icon-arrowthick-1-n {
3823      background-position: 0 -48px;
3824    }
3825    .ui-icon-arrowthick-1-ne {
3826      background-position: -16px -48px;
3827    }
3828    .ui-icon-arrowthick-1-e {
3829      background-position: -32px -48px;
3830    }
3831    .ui-icon-arrowthick-1-se {
3832      background-position: -48px -48px;
3833    }
3834    .ui-icon-arrowthick-1-s {
3835      background-position: -64px -48px;
3836    }
3837    .ui-icon-arrowthick-1-sw {
3838      background-position: -80px -48px;
3839    }
3840    .ui-icon-arrowthick-1-w {
3841      background-position: -96px -48px;
3842    }
3843    .ui-icon-arrowthick-1-nw {
3844      background-position: -112px -48px;
3845    }
3846    .ui-icon-arrowthick-2-n-s {
3847      background-position: -128px -48px;
3848    }
3849    .ui-icon-arrowthick-2-ne-sw {
3850      background-position: -144px -48px;
3851    }
3852    .ui-icon-arrowthick-2-e-w {
3853      background-position: -160px -48px;
3854    }
3855    .ui-icon-arrowthick-2-se-nw {
3856      background-position: -176px -48px;
3857    }
3858    .ui-icon-arrowthickstop-1-n {
3859      background-position: -192px -48px;
3860    }
3861    .ui-icon-arrowthickstop-1-e {
3862      background-position: -208px -48px;
3863    }
3864    .ui-icon-arrowthickstop-1-s {
3865      background-position: -224px -48px;
3866    }
3867    .ui-icon-arrowthickstop-1-w {
3868      background-position: -240px -48px;
3869    }
3870    .ui-icon-arrowreturnthick-1-w {
3871      background-position: 0 -64px;
3872    }
3873    .ui-icon-arrowreturnthick-1-n {
3874      background-position: -16px -64px;
3875    }
3876    .ui-icon-arrowreturnthick-1-e {
3877      background-position: -32px -64px;
3878    }
3879    .ui-icon-arrowreturnthick-1-s {
3880      background-position: -48px -64px;
3881    }
3882    .ui-icon-arrowreturn-1-w {
3883      background-position: -64px -64px;
3884    }
3885    .ui-icon-arrowreturn-1-n {
3886      background-position: -80px -64px;
3887    }
3888    .ui-icon-arrowreturn-1-e {
3889      background-position: -96px -64px;
3890    }
3891    .ui-icon-arrowreturn-1-s {
3892      background-position: -112px -64px;
3893    }
3894    .ui-icon-arrowrefresh-1-w {
3895      background-position: -128px -64px;
3896    }
3897    .ui-icon-arrowrefresh-1-n {
3898      background-position: -144px -64px;
3899    }
3900    .ui-icon-arrowrefresh-1-e {
3901      background-position: -160px -64px;
3902    }
3903    .ui-icon-arrowrefresh-1-s {
3904      background-position: -176px -64px;
3905    }
3906    .ui-icon-arrow-4 {
3907      background-position: 0 -80px;
3908    }
3909    .ui-icon-arrow-4-diag {
3910      background-position: -16px -80px;
3911    }
3912    .ui-icon-extlink {
3913      background-position: -32px -80px;
3914    }
3915    .ui-icon-newwin {
3916      background-position: -48px -80px;
3917    }
3918    .ui-icon-refresh {
3919      background-position: -64px -80px;
3920    }
3921    .ui-icon-shuffle {
3922      background-position: -80px -80px;
3923    }
3924    .ui-icon-transfer-e-w {
3925      background-position: -96px -80px;
3926    }
3927    .ui-icon-transferthick-e-w {
3928      background-position: -112px -80px;
3929    }
3930    .ui-icon-folder-collapsed {
3931      background-position: 0 -96px;
3932    }
3933    .ui-icon-folder-open {
3934      background-position: -16px -96px;
3935    }
3936    .ui-icon-document {
3937      background-position: -32px -96px;
3938    }
3939    .ui-icon-document-b {
3940      background-position: -48px -96px;
3941    }
3942    .ui-icon-note {
3943      background-position: -64px -96px;
3944    }
3945    .ui-icon-mail-closed {
3946      background-position: -80px -96px;
3947    }
3948    .ui-icon-mail-open {
3949      background-position: -96px -96px;
3950    }
3951    .ui-icon-suitcase {
3952      background-position: -112px -96px;
3953    }
3954    .ui-icon-comment {
3955      background-position: -128px -96px;
3956    }
3957    .ui-icon-person {
3958      background-position: -144px -96px;
3959    }
3960    .ui-icon-print {
3961      background-position: -160px -96px;
3962    }
3963    .ui-icon-trash {
3964      background-position: -176px -96px;
3965    }
3966    .ui-icon-locked {
3967      background-position: -192px -96px;
3968    }
3969    .ui-icon-unlocked {
3970      background-position: -208px -96px;
3971    }
3972    .ui-icon-bookmark {
3973      background-position: -224px -96px;
3974    }
3975    .ui-icon-tag {
3976      background-position: -240px -96px;
3977    }
3978    .ui-icon-home {
3979      background-position: 0 -112px;
3980    }
3981    .ui-icon-flag {
3982      background-position: -16px -112px;
3983    }
3984    .ui-icon-calendar {
3985      background-position: -32px -112px;
3986    }
3987    .ui-icon-cart {
3988      background-position: -48px -112px;
3989    }
3990    .ui-icon-pencil {
3991      background-position: -64px -112px;
3992    }
3993    .ui-icon-clock {
3994      background-position: -80px -112px;
3995    }
3996    .ui-icon-disk {
3997      background-position: -96px -112px;
3998    }
3999    .ui-icon-calculator {
4000      background-position: -112px -112px;
4001    }
4002    .ui-icon-zoomin {
4003      background-position: -128px -112px;
4004    }
4005    .ui-icon-zoomout {
4006      background-position: -144px -112px;
4007    }
4008    .ui-icon-search {
4009      background-position: -160px -112px;
4010    }
4011    .ui-icon-wrench {
4012      background-position: -176px -112px;
4013    }
4014    .ui-icon-gear {
4015      background-position: -192px -112px;
4016    }
4017    .ui-icon-heart {
4018      background-position: -208px -112px;
4019    }
4020    .ui-icon-star {
4021      background-position: -224px -112px;
4022    }
4023    .ui-icon-link {
4024      background-position: -240px -112px;
4025    }
4026    .ui-icon-cancel {
4027      background-position: 0 -128px;
4028    }
4029    .ui-icon-plus {
4030      background-position: -16px -128px;
4031    }
4032    .ui-icon-plusthick {
4033      background-position: -32px -128px;
4034    }
4035    .ui-icon-minus {
4036      background-position: -48px -128px;
4037    }
4038    .ui-icon-minusthick {
4039      background-position: -64px -128px;
4040    }
4041    .ui-icon-close {
4042      background-position: -80px -128px;
4043    }
4044    .ui-icon-closethick {
4045      background-position: -96px -128px;
4046    }
4047    .ui-icon-key {
4048      background-position: -112px -128px;
4049    }
4050    .ui-icon-lightbulb {
4051      background-position: -128px -128px;
4052    }
4053    .ui-icon-scissors {
4054      background-position: -144px -128px;
4055    }
4056    .ui-icon-clipboard {
4057      background-position: -160px -128px;
4058    }
4059    .ui-icon-copy {
4060      background-position: -176px -128px;
4061    }
4062    .ui-icon-contact {
4063      background-position: -192px -128px;
4064    }
4065    .ui-icon-image {
4066      background-position: -208px -128px;
4067    }
4068    .ui-icon-video {
4069      background-position: -224px -128px;
4070    }
4071    .ui-icon-script {
4072      background-position: -240px -128px;
4073    }
4074    .ui-icon-alert {
4075      background-position: 0 -144px;
4076    }
4077    .ui-icon-info {
4078      background-position: -16px -144px;
4079    }
4080    .ui-icon-notice {
4081      background-position: -32px -144px;
4082    }
4083    .ui-icon-help {
4084      background-position: -48px -144px;
4085    }
4086    .ui-icon-check {
4087      background-position: -64px -144px;
4088    }
4089    .ui-icon-bullet {
4090      background-position: -80px -144px;
4091    }
4092    .ui-icon-radio-on {
4093      background-position: -96px -144px;
4094    }
4095    .ui-icon-radio-off {
4096      background-position: -112px -144px;
4097    }
4098    .ui-icon-pin-w {
4099      background-position: -128px -144px;
4100    }
4101    .ui-icon-pin-s {
4102      background-position: -144px -144px;
4103    }
4104    .ui-icon-play {
4105      background-position: 0 -160px;
4106    }
4107    .ui-icon-pause {
4108      background-position: -16px -160px;
4109    }
4110    .ui-icon-seek-next {
4111      background-position: -32px -160px;
4112    }
4113    .ui-icon-seek-prev {
4114      background-position: -48px -160px;
4115    }
4116    .ui-icon-seek-end {
4117      background-position: -64px -160px;
4118    }
4119    .ui-icon-seek-start {
4120      background-position: -80px -160px;
4121    }
4122    .ui-icon-stop {
4123      background-position: -96px -160px;
4124    }
4125    .ui-icon-eject {
4126      background-position: -112px -160px;
4127    }
4128    .ui-icon-volume-off {
4129      background-position: -128px -160px;
4130    }
4131    .ui-icon-volume-on {
4132      background-position: -144px -160px;
4133    }
4134    .ui-icon-power {
4135      background-position: 0 -176px;
4136    }
4137    .ui-icon-signal-diag {
4138      background-position: -16px -176px;
4139    }
4140    .ui-icon-signal {
4141      background-position: -32px -176px;
4142    }
4143    .ui-icon-battery-0 {
4144      background-position: -48px -176px;
4145    }
4146    .ui-icon-battery-1 {
4147      background-position: -64px -176px;
4148    }
4149    .ui-icon-battery-2 {
4150      background-position: -80px -176px;
4151    }
4152    .ui-icon-battery-3 {
4153      background-position: -96px -176px;
4154    }
4155    .ui-icon-circle-plus {
4156      background-position: 0 -192px;
4157    }
4158    .ui-icon-circle-minus {
4159      background-position: -16px -192px;
4160    }
4161    .ui-icon-circle-close {
4162      background-position: -32px -192px;
4163    }
4164    .ui-icon-circle-triangle-e {
4165      background-position: -48px -192px;
4166    }
4167    .ui-icon-circle-triangle-s {
4168      background-position: -64px -192px;
4169    }
4170    .ui-icon-circle-triangle-w {
4171      background-position: -80px -192px;
4172    }
4173    .ui-icon-circle-triangle-n {
4174      background-position: -96px -192px;
4175    }
4176    .ui-icon-circle-arrow-e {
4177      background-position: -112px -192px;
4178    }
4179    .ui-icon-circle-arrow-s {
4180      background-position: -128px -192px;
4181    }
4182    .ui-icon-circle-arrow-w {
4183      background-position: -144px -192px;
4184    }
4185    .ui-icon-circle-arrow-n {
4186      background-position: -160px -192px;
4187    }
4188    .ui-icon-circle-zoomin {
4189      background-position: -176px -192px;
4190    }
4191    .ui-icon-circle-zoomout {
4192      background-position: -192px -192px;
4193    }
4194    .ui-icon-circle-check {
4195      background-position: -208px -192px;
4196    }
4197    .ui-icon-circlesmall-plus {
4198      background-position: 0 -208px;
4199    }
4200    .ui-icon-circlesmall-minus {
4201      background-position: -16px -208px;
4202    }
4203    .ui-icon-circlesmall-close {
4204      background-position: -32px -208px;
4205    }
4206    .ui-icon-squaresmall-plus {
4207      background-position: -48px -208px;
4208    }
4209    .ui-icon-squaresmall-minus {
4210      background-position: -64px -208px;
4211    }
4212    .ui-icon-squaresmall-close {
4213      background-position: -80px -208px;
4214    }
4215    .ui-icon-grip-dotted-vertical {
4216      background-position: 0 -224px;
4217    }
4218    .ui-icon-grip-dotted-horizontal {
4219      background-position: -16px -224px;
4220    }
4221    .ui-icon-grip-solid-vertical {
4222      background-position: -32px -224px;
4223    }
4224    .ui-icon-grip-solid-horizontal {
4225      background-position: -48px -224px;
4226    }
4227    .ui-icon-gripsmall-diagonal-se {
4228      background-position: -64px -224px;
4229    }
4230    .ui-icon-grip-diagonal-se {
4231      background-position: -80px -224px;
4232    }
4233    /* Hive extra icons
4234     ========================================================================== */
4235    /**
4236   * Additional handy icons we've added to the standard jQuery UI icon sprite.
4237   *
4238   * Example HTML:
4239   *
4240   * <span class="ui-icon ui-extra-icon-code"></span>
4241   * <span class="ui-icon ui-extra-icon-download"></span>
4242   *
4243   * TODO: Use `mask` in future.
4244   */
4245    .ui-extra-icon-code {
4246      background-position: 0 -256px;
4247    }
4248    .ui-extra-icon-list {
4249      background-position: -16px -256px;
4250    }
4251    .ui-extra-icon-grid {
4252      background-position: -32px -256px;
4253    }
4254    .ui-extra-icon-download {
4255      background-position: -48px -256px;
4256    }
4257    .ui-extra-icon-upload {
4258      background-position: -64px -256px;
4259    }
4260    .ui-extra-icon-attach {
4261      background-position: -80px -256px;
4262    }
4263    .ui-extra-icon-new-document {
4264      background-position: -96px -256px;
4265    }
4266    .ui-extra-icon-facebook {
4267      background-position: -112px -256px;
4268    }
4269    .ui-extra-icon-googleplus {
4270      background-position: -128px -256px;
4271    }
4272    .ui-extra-icon-linkedin {
4273      background-position: -144px -256px;
4274    }
4275    .ui-extra-icon-twitter {
4276      background-position: -160px -256px;
4277    }
4278    .ui-extra-icon-github {
4279      background-position: -176px -256px;
4280    }
4281    /* Draggable
4282   ========================================================================== */
4283    /**
4284   * jQuery UI Draggable.
4285   *
4286   * Some classes and HTML elements generally added via JavaScript, more info -
4287   * https://jqueryui.com/draggable/
4288   *
4289   * Example HTML:
4290   *
4291   * <div class="ui-draggable">
4292   *     Content
4293   * </div>
4294   */
4295    .ui-draggable {
4296      transition: box-shadow 0.1s linear;
4297    }
4298    .ui-draggable-handle {
4299      -ms-touch-action: none;
4300          touch-action: none;
4301    }
4302    /**
4303   * Class added when element is actively being dragged.
4304   */
4305    .ui-draggable-dragging {
4306      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
4307      z-index: 1000;
4308    }
4309    /* Resizable
4310     ========================================================================== */
4311    /**
4312   * jQuery UI Selectable.
4313   *
4314   * Some classes and HTML elements generally added via JavaScript, more info -
4315   * https://jqueryui.com/resizable/
4316   *
4317   * Example HTML:
4318   *
4319   * <div class="ui-resizable">
4320   *     <strong>Resize me!</strong>
4321   *     <div class="ui-resizable-handle ui-resizable-e"></div>
4322   *     <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
4323   * </div>
4324   */
4325    .ui-resizable {
4326      position: relative;
4327    }
4328    .ui-resizable-handle {
4329      display: block;
4330      position: absolute;
4331      font-size: 0.1px;
4332      -ms-touch-action: none;
4333          touch-action: none;
4334    }
4335    /**
4336   * Disabled or auto-hidden resizables.
4337   */
4338    .ui-resizable-disabled .ui-resizable-handle,
4339    .ui-resizable-autohide .ui-resizable-handle {
4340      display: none;
4341    }
4342    /**
4343   * Resize handle positioning options.
4344   */
4345    .ui-resizable-n {
4346      top: -5px;
4347      left: 0;
4348      width: 100%;
4349      height: 7px;
4350      cursor: n-resize;
4351    }
4352    .ui-resizable-s {
4353      bottom: -5px;
4354      left: 0;
4355      width: 100%;
4356      height: 7px;
4357      cursor: s-resize;
4358    }
4359    .ui-resizable-e {
4360      top: 0;
4361      right: -5px;
4362      width: 7px;
4363      height: 100%;
4364      cursor: e-resize;
4365    }
4366    .ui-resizable-w {
4367      top: 0;
4368      left: -5px;
4369      width: 7px;
4370      height: 100%;
4371      cursor: w-resize;
4372    }
4373    .ui-resizable-se {
4374      right: 1px;
4375      bottom: 1px;
4376      width: 12px;
4377      height: 12px;
4378      cursor: se-resize;
4379    }
4380    .ui-resizable-sw {
4381      bottom: -5px;
4382      left: -5px;
4383      width: 9px;
4384      height: 9px;
4385      cursor: sw-resize;
4386    }
4387    .ui-resizable-nw {
4388      top: -5px;
4389      left: -5px;
4390      width: 9px;
4391      height: 9px;
4392      cursor: nw-resize;
4393    }
4394    .ui-resizable-ne {
4395      top: -5px;
4396      right: -5px;
4397      width: 9px;
4398      height: 9px;
4399      cursor: ne-resize;
4400    }
4401    /* Selectable
4402     ========================================================================== */
4403    /**
4404   * jQuery UI Selectable.
4405   *
4406   * Some classes and HTML elements generally added via JavaScript, more info -
4407   * https://jqueryui.com/selectable/
4408   *
4409   * Example HTML:
4410   *
4411   * <ol class="ui-selectable">
4412   *     <li class="ui-selectee">Item 1</li>
4413   *     <li class="ui-selectee ui-selected">Item 2 (selected)</li>
4414   *     <li class="ui-selectee">Item 3</li>
4415   *     <li class="ui-selectee">Item 4</li>
4416   * </ol>
4417   */
4418    .ui-selectable {
4419      -ms-touch-action: none;
4420          touch-action: none;
4421    }
4422    /**
4423   * Drag to select.
4424   */
4425    .ui-selectable-helper {
4426      position: absolute;
4427      border: 1px dotted #004cbf;
4428      z-index: 100;
4429    }
4430    /* Sortable
4431   ========================================================================== */
4432    /**
4433   * jQuery UI Sortable.
4434   *
4435   * Some classes and HTML elements generally added via JavaScript, more info -
4436   * https://jqueryui.com/sortable/
4437   *
4438   * Example HTML:
4439   *
4440   * <ul class="ui-sortable">
4441   *     <li>
4442   *         Item 1
4443   *     </li>
4444   *     <li class="ui-sortable-helper">
4445   *         Item 2 (this item is currently being actively sorted)
4446   *     </li>
4447   *     <li class="ui-sortable-placeholder"></li>
4448   *     <li>
4449   *         Item 3
4450   *     </li>
4451   * </ul>
4452   */
4453    .ui-sortable-helper {
4454      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
4455    }
4456    .ui-sortable-handle {
4457      -ms-touch-action: none;
4458          touch-action: none;
4459    }
4460    .ui-sortable-placeholder {
4461      border: 1px dotted #004cbf;
4462    }
4463    /* Accordion
4464     ========================================================================== */
4465    /**
4466   * jQuery UI Accordion.
4467   *
4468   * Some classes and HTML elements generally added via JavaScript, more info -
4469   * https://jqueryui.com/accordion/
4470   *
4471   * Example HTML:
4472   *
4473   * <div class="ui-accordion">
4474   *     <h3 class="ui-accordion-header">
4475   *         <span class="ui-accordion-header-icon"></span>
4476   *         <a>Section 1 lever</a>
4477   *     </h3>
4478   *     <div class="ui-accordion-content">
4479   *         Section 1 content
4480   *     </div>
4481   *     <h3 class="ui-accordion-header">
4482   *         <span class="ui-accordion-header-icon"></span>
4483   *         <a>Section 2 lever</a>
4484   *     </h3>
4485   *     <div class="ui-accordion-content">
4486   *         Section 2 content
4487   *     </div>
4488   * </div>
4489   */
4490    .ui-accordion .ui-accordion-header {
4491      display: block;
4492      position: relative;
4493      margin: 2px 0 0;
4494      padding: 0.5em 1em;
4495      font-size: 13px;
4496      cursor: pointer;
4497    }
4498    .ui-accordion .ui-accordion-header a {
4499      color: #333333;
4500      text-decoration: none;
4501    }
4502    .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
4503      position: absolute;
4504      top: 50%;
4505      left: 0.5em;
4506      margin-top: -8px;
4507    }
4508    .ui-accordion .ui-accordion-content {
4509      padding: 1px 1em;
4510      border-top: 0;
4511      overflow: auto;
4512    }
4513    .ui-accordion .ui-accordion-icons,
4514    .ui-accordion .ui-accordion-icons .ui-accordion-icons {
4515      padding-left: 2em;
4516    }
4517    /**
4518   * Accordion RTL support.
4519   */
4520    [dir="rtl"] .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
4521      right: 0.5em;
4522      left: auto;
4523    }
4524    [dir="rtl"] .ui-accordion .ui-accordion-icons,
4525    [dir="rtl"] .ui-accordion .ui-accordion-icons .ui-accordion-icons {
4526      padding-right: 2em;
4527      padding-left: 0;
4528    }
4529    /* Autocomplete
4530     ========================================================================== */
4531    /**
4532   * jQuery UI Autocomplete.
4533   *
4534   * Some classes and HTML elements generally added via JavaScript, more info -
4535   * https://jqueryui.com/autocomplete/
4536   *
4537   * Example HTML:
4538   *
4539   * <input type="text" class="ui-autocomplete-input">
4540   * <ul class="ui-autocomplete">
4541   *     <li><a></a></li>
4542   *     <li><a></a></li>
4543   *     <li><a></a></li>
4544   * </ul>
4545   */
4546    .ui-autocomplete {
4547      position: absolute;
4548      top: 0;
4549      left: 0;
4550      cursor: default;
4551    }
4552    /* Button
4553     ========================================================================== */
4554    /**
4555   * jQuery UI Button.
4556   *
4557   * Some classes and HTML elements generally added via JavaScript, more info -
4558   * https://jqueryui.com/button/
4559   *
4560   * 1. Correct font size not being inherited in all browsers.
4561   * 2. Improve usability and consistency of cursor style between image-type
4562   *    `input` and others.
4563   * 3. The `overflow` property removes extra width in IE.
4564   * 4. Remove iOS Safari default styling.
4565   *
4566   * Example HTML:
4567   *
4568   * <a class="ui-button ui-corner-all ui-widget">Button</a>
4569   */
4570    .ui-button {
4571      background-color: #5ba4e5;
4572      display: inline-block;
4573      position: relative;
4574      height: 2.1538462em;
4575      margin: 0 0.1em 0 0;
4576      padding: 0.30769230769231em 0.61538461538462em;
4577      border: 1px solid #3c93e0;
4578      background-clip: padding-box;
4579      color: #ffffff;
4580      font-family: Helvetica, Arial, sans-serif;
4581      /* 1 */
4582      font-size: 13px;
4583      line-height: 1.3846154em;
4584      text-align: center;
4585      /* 2 */
4586      cursor: pointer;
4587      /* 3 */
4588      overflow: visible;
4589      vertical-align: baseline;
4590      box-sizing: border-box;
4591      /* 4 */
4592      -webkit-appearance: none;
4593         -moz-appearance: none;
4594              appearance: none;
4595      -webkit-user-select: none;
4596         -moz-user-select: none;
4597          -ms-user-select: none;
4598              user-select: none;
4599    }
4600    .ui-button:hover {
4601      background-color: #6daee8;
4602      border-color: #1e72bc;
4603      color: #ffffff;
4604      text-decoration: none;
4605    }
4606    .ui-button:active {
4607      background-color: #4e9de3;
4608      border-color: #1e72bc;
4609      color: #e6e6e6;
4610      text-decoration: none;
4611    }
4612    .ui-button:focus {
4613      border-color: #0066ff;
4614      outline: 0;
4615    }
4616    /**
4617   * Focus styling for buttons.
4618   *
4619   * 1. `!important` required to override specificity.
4620   */
4621    .ui-button.ui-state-focus {
4622      /* 1 */
4623      border-color: #0066ff !important;
4624    }
4625    /**
4626   * Single-icon-only button.
4627   *
4628   * To make room for the icon, a width needs to be set here.
4629   *
4630   * Example HTML:
4631   *
4632   * <a class="ui-button ui-corner-all ui-widget ui-button-icon-only">
4633   *     <span class="ui-button-icon ui-icon ui-icon-gear"></span>
4634   *     <span class="ui-button-icon-space"> </span>
4635   *     Button one icon, no text
4636   * </a>
4637   */
4638    .ui-button-icon-only {
4639      width: 2.1538462em;
4640      text-indent: -9999px;
4641      white-space: nowrap;
4642      box-sizing: border-box;
4643    }
4644    /**
4645   * No icon support for input elements.
4646   */
4647    input.ui-button.ui-button-icon-only {
4648      text-indent: 0;
4649    }
4650    .ui-button.ui-corner-all {
4651      border-radius: 0.3em;
4652    }
4653    .ui-button.ui-corner-right {
4654      border-radius: 0 0.3em 0.3em 0;
4655    }
4656    [dir="rtl"] .ui-button.ui-corner-right {
4657      border-radius: 0.3em 0 0 0.3em;
4658    }
4659    .ui-button.ui-corner-left {
4660      border-radius: 0.3em 0 0 0.3em;
4661    }
4662    [dir="rtl"] .ui-button.ui-corner-left {
4663      border-radius: 0 0.3em 0.3em 0;
4664    }
4665    /**
4666   * Button icon element(s).
4667   */
4668    .ui-button-icon-only .ui-icon {
4669      position: absolute;
4670      top: 50%;
4671      left: 50%;
4672      margin-top: -8px;
4673      margin-left: -8px;
4674    }
4675    .ui-button.ui-icon-notext .ui-icon {
4676      padding: 0;
4677      text-indent: -9999px;
4678      white-space: nowrap;
4679    }
4680    input.ui-button.ui-icon-notext .ui-icon {
4681      padding: 0.4em 1em;
4682      text-indent: 0;
4683      white-space: normal;
4684    }
4685    /* Checkboxradio
4686     ========================================================================== */
4687    /**
4688   * jQuery UI Checkboxradio.
4689   *
4690   * Some classes and HTML elements generally added via JavaScript, more info -
4691   * https://jqueryui.com/checkboxradio/
4692   *
4693   * Example HTML:
4694   *
4695   * <fieldset>
4696   *     <legend>Select a Location:</legend>
4697   *     <label for="radio-1">New York</label>
4698   *     <input id="radio-1" name="radio-1" type="radio">
4699   *     <label for="radio-2">Paris</label>
4700   *     <input id="radio-2" name="radio-1" type="radio">
4701   *     <label for="radio-3">London</label>
4702   *     <input id="radio-3" name="radio-1" type="radio">
4703   * </fieldset>
4704   */
4705    .ui-checkboxradio-label .ui-icon-background {
4706      border: 0;
4707      border-radius: 0.12em;
4708      box-shadow: inset 1px 1px 1px #cccccc;
4709    }
4710    .ui-checkboxradio-radio-label .ui-icon-background {
4711      width: 16px;
4712      height: 16px;
4713      border: 0;
4714      border-radius: 1em;
4715      overflow: visible;
4716    }
4717    .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
4718      width: 8px;
4719      height: 8px;
4720      border-width: 4px;
4721      border-style: solid;
4722      background-image: none;
4723    }
4724    .ui-checkboxradio-disabled {
4725      pointer-events: none;
4726    }
4727    /**
4728   * Checkboxes as buttons - pressed state.
4729   *
4730   * Example HTML:
4731   *
4732   * <input class="ui-checkboxradio ui-helper-hidden-accessible" id="check" type="checkbox">
4733   * <label for="check" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">Dogs</label>
4734   */
4735    .ui-checkboxradio-checked.ui-button {
4736      background-color: #9dc8ef;
4737      border-color: #6faee7;
4738    }
4739    .ui-checkboxradio-checked.ui-button:hover {
4740      background-color: #a6cdf0;
4741      background-image: linear-gradient(#aacff1, #a6cdf0);
4742      border-color: #2d89dd;
4743    }
4744    .ui-checkboxradio-checked.ui-button:active {
4745      background-color: #87bceb;
4746      border-color: #2d89dd;
4747    }
4748    /* Controlgroup
4749     ========================================================================== */
4750    /**
4751   * jQuery UI Controlgroup.
4752   *
4753   * Some classes and HTML elements generally added via JavaScript, more info -
4754   * https://jqueryui.com/controlgroup/
4755   *
4756   * Example HTML:
4757   *
4758   * <fieldset>
4759   *     <legend>Favourite drink</legend>
4760   *     <div id="radio">
4761   *         <input id="tea" name="drink" type="radio">
4762   *         <label for="tea">Tea</label>
4763   *         <input id="coffee" name="drink" type="radio" checked="checked">
4764   *         <label for="coffee">Coffee</label>
4765   *         <input id="tequila" name="drink" type="radio">
4766   *         <label for="tequila">Tequila</label>
4767   *     </div>
4768   * </fieldset>
4769   */
4770    .ui-controlgroup {
4771      display: -ms-inline-flexbox;
4772      display: inline-flex;
4773      -ms-flex-flow: row wrap;
4774          flex-flow: row wrap;
4775    }
4776    .ui-controlgroup .ui-controlgroup-item {
4777      margin-right: 0;
4778      margin-left: 0;
4779    }
4780    .ui-controlgroup .ui-controlgroup-item:focus, .ui-controlgroup .ui-controlgroup-item.ui-visual-focus {
4781      z-index: 9999;
4782    }
4783    .ui-controlgroup .ui-controlgroup-label {
4784      padding: 0.4em 1em;
4785    }
4786    .ui-controlgroup .ui-controlgroup-label span {
4787      font-size: 80%;
4788    }
4789    .ui-controlgroup .ui-state-highlight {
4790      border-color: #9dc8ef;
4791      background-color: #9dc8ef;
4792    }
4793    .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
4794      border-left: 0;
4795    }
4796    .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
4797      border-right: 0;
4798    }
4799    .ui-controlgroup-vertical {
4800      -ms-flex-flow: column;
4801          flex-flow: column;
4802    }
4803    .ui-controlgroup-vertical .ui-controlgroup-item {
4804      display: block;
4805      width: 100%;
4806      margin-top: 0;
4807      margin-bottom: 0;
4808      text-align: left;
4809      box-sizing: border-box;
4810    }
4811    [dir="rtl"] .ui-controlgroup-vertical .ui-controlgroup-item {
4812      text-align: right;
4813    }
4814    .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
4815      border-top: 0;
4816    }
4817    .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
4818      border-bottom: 0;
4819    }
4820    /**
4821   * Spinner specific style fixes.
4822   */
4823    .ui-controlgroup-vertical .ui-spinner-input {
4824      width: calc(100% - 2.4em);
4825    }
4826    .ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
4827      border-top-style: solid;
4828    }
4829    /* Datepicker
4830     ========================================================================== */
4831    /**
4832   * jQuery UI Datepicker.
4833   *
4834   * Some classes and HTML elements generally added via JavaScript, more info -
4835   * https://jqueryui.com/datepicker/
4836   *
4837   * Example HTML:
4838   *
4839   * <div class="ui-datepicker">
4840   *     <div class="ui-datepicker-header">
4841   *         <a class="ui-datepicker-prev">
4842   *             <span>Prev</span>
4843   *         </a>
4844   *         <a class="ui-datepicker-next">
4845   *             <span>Next</span>
4846   *         </a>
4847   *         <div class="ui-datepicker-title">
4848   *             <span class="ui-datepicker-month">April</span>
4849   *             <span class="ui-datepicker-year">2014</span>
4850   *         </div>
4851   *     </div>
4852   *     <table class="ui-datepicker-calendar">
4853   *         <thead>
4854   *             <tr>
4855   *                 <th class="ui-datepicker-week-end">
4856   *                     <span>Su</span>
4857   *                 </th>
4858   *                 <th>
4859   *                     <span>Mo</span>
4860   *                 </th>
4861   *                 <th>
4862   *                     <span>Tu</span>
4863   *                 </th>
4864   *                 <th>
4865   *                     <span>We</span>
4866   *                 </th>
4867   *                 <th>
4868   *                     <span>Th</span>
4869   *                 </th>
4870   *                 <th>
4871   *                     <span>Fr</span>
4872   *                 </th>
4873   *                 <th class="ui-datepicker-week-end">
4874   *                     <span>Sa</span>
4875   *                 </th>
4876   *             </tr>
4877   *         </thead>
4878   *         <tbody>
4879   *             <tr>
4880   *                 <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable">
4881   *                     &nbsp;
4882   *                 </td>
4883   *                 <td class="ui-datepicker-other-month ui-datepicker-unselectable">
4884   *                     &nbsp;
4885   *                 </td>
4886   *                 <td>
4887   *                     <a>1</a>
4888   *                 </td>
4889   *                 <td>
4890   *                     <a>2</a>
4891   *                 </td>
4892   *                 <td>
4893   *                     <a>3</a>
4894   *                 </td>
4895   *                 <td class="ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today">
4896   *                     <a class="ui-state-highlight ui-state-active">4</a>
4897   *                 </td>
4898   *                 <td>
4899   *                     <a>5</a>
4900   *                 </td>
4901   *             </tr>
4902   *             ...etc...
4903   *         </tbody>
4904   *     </table>
4905   * </div>
4906   */
4907    .ui-datepicker {
4908      display: none;
4909      width: 17em;
4910      padding: 0.2em 0.2em 0;
4911    }
4912    .ui-datepicker .ui-datepicker-header {
4913      position: relative;
4914      padding: 0.2em 0;
4915    }
4916    .ui-datepicker .ui-datepicker-prev,
4917    .ui-datepicker .ui-datepicker-next {
4918      position: absolute;
4919      top: 0.2em;
4920      width: 1.8em;
4921      height: 1.8em;
4922      border-radius: 0.3em;
4923      background-color: transparent;
4924    }
4925    .ui-datepicker .ui-datepicker-prev {
4926      left: 0.2em;
4927    }
4928    .ui-datepicker .ui-datepicker-next {
4929      right: 0.2em;
4930    }
4931    .ui-datepicker .ui-datepicker-prev span,
4932    .ui-datepicker .ui-datepicker-next span {
4933      display: block;
4934      position: absolute;
4935      top: 50%;
4936      left: 50%;
4937      margin-top: -8px;
4938      margin-left: -8px;
4939    }
4940    .ui-datepicker .ui-datepicker-prev-hover,
4941    .ui-datepicker .ui-datepicker-next-hover {
4942      background-color: #f7f7f7;
4943    }
4944    .ui-datepicker .ui-datepicker-title {
4945      margin: 0 2.2em;
4946      line-height: 1.8em;
4947      text-align: center;
4948    }
4949    .ui-datepicker .ui-datepicker-title select {
4950      margin: 0;
4951    }
4952    .ui-datepicker select.ui-datepicker-month,
4953    .ui-datepicker select.ui-datepicker-year {
4954      width: 45%;
4955    }
4956    .ui-datepicker table {
4957      width: 100%;
4958      margin: 0 0 0.2em;
4959    }
4960    .ui-datepicker th {
4961      padding: 0.5em 0.2em;
4962      border: 0;
4963      text-align: center;
4964    }
4965    .ui-datepicker td {
4966      padding: 1px;
4967      border: 0;
4968    }
4969    .ui-datepicker td a,
4970    .ui-datepicker td span {
4971      display: block;
4972      padding: 0.2em;
4973      text-align: center;
4974    }
4975    .ui-datepicker td a.ui-state-active {
4976      border-color: #96c0ff;
4977      background-color: #eaf3fc;
4978    }
4979    .ui-datepicker td a.ui-state-highlight:hover {
4980      border-color: #f5a800;
4981    }
4982    .ui-datepicker td a.ui-state-active:hover {
4983      border-color: #4a92ff;
4984    }
4985    .ui-datepicker td.ui-datepicker-week-col {
4986      padding: 0.32em 0;
4987      text-align: center;
4988    }
4989    .ui-datepicker .ui-datepicker-buttonpane {
4990      margin: 0.7em 0 0;
4991      padding: 0 0.2em;
4992      border-right: 0;
4993      border-bottom: 0;
4994      border-left: 0;
4995      background-image: none;
4996    }
4997    .ui-datepicker .ui-datepicker-buttonpane button {
4998      width: auto;
4999      margin: 0.5em 0.2em 0.4em;
5000      padding: 0.2em 0.6em 0.3em;
5001      float: right;
5002      cursor: pointer;
5003      overflow: visible;
5004    }
5005    .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
5006      float: left;
5007    }
5008    .ui-datepicker .ui-icon {
5009      display: block;
5010      top: 0.3em;
5011      left: 0.5em;
5012      background-repeat: no-repeat;
5013      text-indent: -9999px;
5014      overflow: hidden;
5015    }
5016    /**
5017   * Multiple calendars.
5018   */
5019    .ui-datepicker.ui-datepicker-multi {
5020      width: auto;
5021    }
5022    .ui-datepicker-multi .ui-datepicker-group {
5023      float: left;
5024    }
5025    .ui-datepicker-multi .ui-datepicker-group table {
5026      width: 95%;
5027      margin: 0 auto 0.4em;
5028    }
5029    .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
5030    .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
5031      border-left-width: 0;
5032    }
5033    .ui-datepicker-multi .ui-datepicker-buttonpane {
5034      clear: left;
5035    }
5036    .ui-datepicker-multi-2 .ui-datepicker-group {
5037      width: 50%;
5038    }
5039    .ui-datepicker-multi-3 .ui-datepicker-group {
5040      width: 33.3%;
5041    }
5042    .ui-datepicker-multi-4 .ui-datepicker-group {
5043      width: 25%;
5044    }
5045    .ui-datepicker-row-break {
5046      width: 100%;
5047      clear: both;
5048      font-size: 0;
5049    }
5050    /**
5051   * Datepicker RTL support.
5052   */
5053    [dir="rtl"] .ui-datepicker-prev {
5054      right: 0.2em;
5055      left: auto;
5056    }
5057    [dir="rtl"] .ui-datepicker-prev span {
5058      background-position: -48px -192px;
5059    }
5060    [dir="rtl"] .ui-datepicker-next {
5061      right: auto;
5062      left: 0.2em;
5063    }
5064    [dir="rtl"] .ui-datepicker-next span {
5065      background-position: -80px -192px;
5066    }
5067    [dir="rtl"] .ui-datepicker-buttonpane {
5068      clear: right;
5069    }
5070    [dir="rtl"] .ui-datepicker-buttonpane button {
5071      float: left;
5072    }
5073    [dir="rtl"] .ui-datepicker-buttonpane button.ui-datepicker-current,
5074    [dir="rtl"] .ui-datepicker-group {
5075      float: right;
5076    }
5077    [dir="rtl"] .ui-datepicker-group-last .ui-datepicker-header,
5078    [dir="rtl"] .ui-datepicker-group-middle .ui-datepicker-header {
5079      border-right-width: 0;
5080      border-left-width: 1px;
5081    }
5082    /* Dialog
5083     ========================================================================== */
5084    /**
5085   * jQuery UI Dialog.
5086   *
5087   * Some classes and HTML elements generally added via JavaScript, more info -
5088   * https://jqueryui.com/dialog/
5089   *
5090   * Example HTML:
5091   *
5092   * <div class="ui-dialog ui-front ui-dialog-buttons ui-draggable">
5093   *     <div class="ui-dialog-titlebar">
5094   *         <span class="ui-dialog-title">Modal dialog example</span>
5095   *         <button class="ui-button ui-button-icon-only ui-dialog-titlebar-close">
5096   *             <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
5097   *             <span class="ui-button-text">close</span>
5098   *         </button>
5099   *     </div>
5100   *     <div class="ui-dialog-content">
5101   *         Content
5102   *     </div>
5103   *     <div class="ui-dialog-buttonpane">
5104   *         <div class="ui-dialog-buttonset">
5105   *             <button class="ui-button ui-button-text-only">
5106   *                 <span class="ui-button-text">Cancel</span>
5107   *             </button>
5108   *             <button class="ui-button ui-button-text-only">
5109   *                 <span class="ui-button-text">Ok</span>
5110   *             </button>
5111   *         </div>
5112   *     </div>
5113   * </div>
5114   */
5115    .ui-dialog {
5116      position: absolute;
5117      top: 0;
5118      left: 0;
5119      padding: 0.2em;
5120      outline: 0;
5121      z-index: 1002;
5122    }
5123    .ui-dialog .ui-dialog-titlebar {
5124      position: relative;
5125      padding: 0.4em 1em;
5126    }
5127    .ui-dialog .ui-dialog-title {
5128      width: 90%;
5129      margin: 0.1em 0;
5130      float: left;
5131      text-overflow: ellipsis;
5132      white-space: nowrap;
5133      overflow: hidden;
5134    }
5135    [dir="rtl"] .ui-dialog .ui-dialog-title {
5136      float: right;
5137    }
5138    .ui-dialog .ui-dialog-titlebar-close {
5139      position: absolute;
5140      top: 50%;
5141      right: 0.3em;
5142      width: 20px;
5143      height: 20px;
5144      margin: -10px 0 0;
5145    }
5146    [dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
5147      right: auto;
5148      left: 0.3em;
5149    }
5150    .ui-dialog .ui-dialog-content {
5151      position: relative;
5152      padding: 0.5em 1em;
5153      border: 0;
5154      background: none;
5155      overflow: auto;
5156    }
5157    .ui-dialog .ui-dialog-buttonpane {
5158      margin-top: 0.5em;
5159      padding: 0.5em;
5160      border-width: 1px 0 0;
5161      background-image: none;
5162      text-align: left;
5163    }
5164    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
5165      float: right;
5166    }
5167    [dir="rtl"] .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
5168      float: left;
5169    }
5170    .ui-dialog .ui-dialog-buttonpane button {
5171      margin: 0.5em 0.4em 0.5em 0;
5172      cursor: pointer;
5173    }
5174    [dir="rtl"] .ui-dialog .ui-dialog-buttonpane button {
5175      margin: 0.5em 0 0.5em 0.4em;
5176    }
5177    /**
5178   * Change cursor when window is being dragged.
5179   */
5180    .ui-draggable .ui-dialog-titlebar {
5181      cursor: move;
5182    }
5183    /* Menu
5184     ========================================================================== */
5185    /**
5186   * jQuery UI Menu.
5187   *
5188   * Menus are vertical format only. Horizontal format menus are not provided by
5189   * jQuery UI.
5190   *
5191   * Some classes and HTML elements generally added via JavaScript, more info -
5192   * https://jqueryui.com/menu/
5193   *
5194   * 1. Correct font size not being inherited in all browsers.
5195   * 2. Workaround for IE 11 and Edge incorrectly displaying a list marker.
5196   *
5197   * Example HTML:
5198   *
5199   * <ul class="ui-menu">
5200   *     <li class="ui-state-disabled ui-menu-item">
5201   *         <a>Item 1 (disabled)</a>
5202   *     </li>
5203   *     <li class="ui-menu-item">
5204   *         <a>Item 2</a>
5205   *     </li>
5206   *     <li class="ui-menu-item">
5207   *         <a>
5208   *             <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span>
5209   *             Item 3
5210   *         </a>
5211   *         <ul class="ui-menu">
5212   *             <li class="ui-menu-item">
5213   *                 <a>Item 3 subitem 1</a>
5214   *             </li>
5215   *             <li class="ui-menu-item">
5216   *                 <a>Item 3 subitem 2</a>
5217   *             </li>
5218   *         </ul>
5219   *     </li>
5220   *     <li class="ui-menu-item">
5221   *         <a>
5222   *             <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span>
5223   *             Item 4
5224   *         </a>
5225   *         <ul class="ui-menu">
5226   *             <li class="ui-menu-item">
5227   *                 <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span>
5228   *                 <a>Item 4 subitem 1</a>
5229   *                 <ul class="ui-menu">
5230   *                     <li class="ui-menu-item">
5231   *                         <a>Item 4 subitem 1 subsubitem 1</a>
5232   *                     </li>
5233   *                     <li class="ui-menu-item">
5234   *                         <a>Item 4 subitem 1 subsubitem 2</a>
5235   *                     </li>
5236   *                 </ul>
5237   *             </li>
5238   *             <li class="ui-menu-item">
5239   *                 <a>Item 3 subitem 2</a>
5240   *             </li>
5241   *         </ul>
5242   *     </li>
5243   * </ul>
5244   */
5245    .ui-menu {
5246      display: block;
5247      margin: 0;
5248      padding: 0;
5249      outline: 0;
5250      /* 1 */
5251      font-size: 13px;
5252      line-height: 1.38461538461538em;
5253      list-style: none;
5254    }
5255    .ui-menu .ui-menu {
5256      position: absolute;
5257    }
5258    .ui-menu .ui-menu-item {
5259      margin: 0;
5260      cursor: pointer;
5261      /* 2 */
5262      list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
5263    }
5264    .ui-menu .ui-menu-item a {
5265      color: #333333;
5266      text-decoration: none;
5267    }
5268    .ui-menu .ui-menu-item-wrapper {
5269      position: relative;
5270      padding: 0.30769230769231em 1em 0.30769230769231em 0.61538461538462em;
5271    }
5272    .ui-menu .ui-menu-divider {
5273      height: 0;
5274      margin: 0.30769230769231em 0;
5275      border-width: 1px 0 0;
5276      font-size: 0;
5277      line-height: 0;
5278    }
5279    .ui-menu .ui-state-focus,
5280    .ui-menu .ui-state-active {
5281      background-color: #eaf3fc;
5282    }
5283    .ui-menu .ui-icon {
5284      position: absolute;
5285      top: 0;
5286      bottom: 0;
5287      left: 0.25em;
5288      margin: auto 0;
5289    }
5290    .ui-menu .ui-menu-icon {
5291      right: 0;
5292      left: auto;
5293    }
5294    /**
5295   * Allow additional icons in menu items.
5296   */
5297    .ui-menu-icons {
5298      position: relative;
5299    }
5300    .ui-menu-icons .ui-menu-item-wrapper {
5301      padding-left: 2em;
5302    }
5303    /**
5304   * Menu RTL support.
5305   */
5306    [dir="rtl"] .ui-menu {
5307      padding: 0;
5308    }
5309    [dir="rtl"] .ui-menu .ui-menu-item-wrapper {
5310      padding: 0.30769230769231em 0.61538461538462em 0.30769230769231em 1em;
5311    }
5312    [dir="rtl"] .ui-menu .ui-icon {
5313      right: 0.25em;
5314      left: auto;
5315    }
5316    [dir="rtl"] .ui-menu .ui-menu-icon {
5317      right: auto;
5318      left: 0;
5319    }
5320    /* Progressbar
5321     ========================================================================== */
5322    /**
5323   * jQuery UI Progressbar.
5324   *
5325   * Some classes and HTML elements generally added via JavaScript, more info -
5326   * https://jqueryui.com/progressbar/
5327   *
5328   * Example HTML:
5329   *
5330   * <div class="ui-progressbar">
5331   *     <div class="ui-progressbar-value" style="width: 37%;"></div>
5332   * </div>
5333   */
5334    .ui-progressbar {
5335      margin-bottom: 1em;
5336      text-align: left;
5337      overflow: hidden;
5338    }
5339    .ui-progressbar-value {
5340      background-image: url("../img/ui-progressbar.gif");
5341      background-size: 16px 16px;
5342      height: 16px;
5343      background-color: #d4e7f8;
5344    }
5345  }
5346  
5347  @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) {
5348    .ui-progressbar-value {
5349      background-image: url("../img/ui-progressbar@2x.gif");
5350    }
5351  }
5352  
5353  @media screen {
5354    /**
5355   * Progressbar with indeterminate value.
5356   *
5357   * Example HTML:
5358   *
5359   * <div class="ui-progressbar ui-progressbar-indeterminate">
5360   *     <div class="ui-progressbar-value" style="width:100%;">
5361   *         <div class="ui-progressbar-overlay"></div>
5362   *     </div>
5363   * </div>
5364   */
5365    .ui-progressbar-indeterminate .ui-progressbar-value {
5366      background-image: url("../img/ui-progressbar-indeterminate.gif");
5367      background-size: 16px 16px;
5368      background-color: #cccccc;
5369    }
5370  }
5371  
5372  @media screen and (-webkit-min-device-pixel-ratio: 1.25), screen and (min-resolution: 1.25dppx), screen and (min-resolution: 120dpi) {
5373    .ui-progressbar-indeterminate .ui-progressbar-value {
5374      background-image: url("../img/ui-progressbar-indeterminate@2x.gif");
5375    }
5376  }
5377  
5378  @media screen {
5379    /* Selectmenu
5380     ========================================================================== */
5381    /**
5382   * jQuery UI Selectmenu.
5383   *
5384   * Some classes and HTML elements generally added via JavaScript, more info -
5385   * https://jqueryui.com/selectmenu/
5386   *
5387   * 1. Correct font size not being inherited in all browsers.
5388   *
5389   * Example HTML:
5390   *
5391   * <p>
5392   *     <label>Select a speed</label><br>
5393   *     <select class="jquery-ui-selectmenu" style="display:none;">
5394   *         <option>Slower</option>
5395   *         <option>Slow</option>
5396   *         <option selected="selected">Medium</option>
5397   *         <option>Fast</option>
5398   *         <option>Faster</option>
5399   *     </select>
5400   *     <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all">
5401   *         <span class="ui-icon ui-icon-triangle-1-s"></span>
5402   *         <span class="ui-selectmenu-text">Medium</span>
5403   *     </span>
5404   * </p>
5405   * <div class="ui-selectmenu-menu ui-front ui-selectmenu-open">
5406   *     <ul class="ui-menu ui-widget ui-widget-content ui-corner-bottom">
5407   *         <li class="ui-menu-item ui-state-focus">Slower</li>
5408   *         <li class="ui-menu-item">Slow</li>
5409   *         <li class="ui-menu-item">Medium</li>
5410   *         <li class="ui-menu-item">Fast</li>
5411   *         <li class="ui-menu-item">Faster</li>
5412   *     </ul>
5413   * </div>
5414   */
5415    .ui-selectmenu-button {
5416      display: -ms-inline-flexbox;
5417      display: inline-flex;
5418    }
5419    .ui-selectmenu-button:not(.ui-controlgroup-item) {
5420      border-radius: 0.3em;
5421    }
5422    .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tr {
5423      border-radius: 0 0.3em 0.3em 0;
5424    }
5425    .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tl {
5426      border-radius: 0.3em 0 0 0.3em;
5427    }
5428    .ui-selectmenu-icon {
5429      -ms-flex: none;
5430          flex: none;
5431      -ms-flex-order: 2;
5432          order: 2;
5433      margin: 0 -0.25em 0 0.25em;
5434    }
5435    .ui-selectmenu-text {
5436      display: block;
5437      text-overflow: ellipsis;
5438      white-space: nowrap;
5439      overflow: hidden;
5440    }
5441    .ui-selectmenu-menu {
5442      display: none;
5443      position: absolute;
5444      top: 0;
5445      left: 0;
5446      margin: 0;
5447      padding: 0;
5448    }
5449    .ui-selectmenu-menu .ui-menu {
5450      overflow: auto;
5451      overflow-x: hidden;
5452    }
5453    .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
5454      height: auto;
5455      margin: 0.5em 0 0;
5456      padding: 2px 0.61538461538462em;
5457      border-top: 1px solid #cccccc;
5458      font-size: 13px;
5459      font-weight: bold;
5460      line-height: 1.5;
5461    }
5462    .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup:first-child {
5463      margin: 0;
5464      border: 0;
5465    }
5466    .ui-selectmenu-open {
5467      display: block;
5468    }
5469    /**
5470   * Selectmenu RTL support.
5471   */
5472    [dir="rtl"] .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tr {
5473      border-radius: 0.3em 0 0 0.3em;
5474    }
5475    [dir="rtl"] .ui-selectmenu-button.ui-controlgroup-item.ui-corner-tl {
5476      border-radius: 0 0.3em 0.3em 0;
5477    }
5478    [dir="rtl"] .ui-selectmenu-icon {
5479      margin: 0 0.25em 0 -0.25em;
5480    }
5481    /* Slider
5482     ========================================================================== */
5483    /**
5484   * jQuery UI Slider.
5485   *
5486   * Some classes and HTML elements generally added via JavaScript, more info -
5487   * https://jqueryui.com/slider/
5488   *
5489   * Example HTML:
5490   *
5491   * <div class="ui-slider ui-slider-horizontal">
5492   *     <div class="ui-slider-range" style="left: 17%; width: 50%;"></div>
5493   *     <a class="ui-slider-handle" style="left: 17%;"></a>
5494   *     <a class="ui-slider-handle" style="left: 67%;"></a>
5495   * </div>
5496   */
5497    .ui-slider {
5498      position: relative;
5499      text-align: left;
5500    }
5501    .ui-slider .ui-slider-handle {
5502      position: absolute;
5503      width: 20px;
5504      height: 20px;
5505      border-radius: 50%;
5506      background-color: #f7f7f7;
5507      cursor: default;
5508      z-index: 2;
5509      -ms-touch-action: none;
5510          touch-action: none;
5511    }
5512    .ui-slider .ui-slider-range {
5513      display: block;
5514      position: absolute;
5515      border: 0;
5516      background-position: 0 0;
5517      font-size: 0.7em;
5518      z-index: 1;
5519    }
5520    /**
5521   * Slider - horizontal format.
5522   *
5523   * Example HTML:
5524   *
5525   * <div class="ui-slider ui-slider-horizontal">
5526   */
5527    .ui-slider-horizontal {
5528      height: 12px;
5529      margin-bottom: 1em;
5530    }
5531    .ui-slider-horizontal .ui-slider-handle {
5532      top: -5px;
5533      margin-left: -10px;
5534    }
5535    .ui-slider-horizontal .ui-slider-range {
5536      top: 0;
5537      height: 100%;
5538    }
5539    .ui-slider-horizontal .ui-slider-range-min {
5540      left: 0;
5541    }
5542    .ui-slider-horizontal .ui-slider-range-max {
5543      right: 0;
5544    }
5545    /**
5546   * Slider - vertical format.
5547   *
5548   * Example HTML:
5549   *
5550   * <div class="ui-slider ui-slider-vertical">
5551   */
5552    .ui-slider-vertical {
5553      width: 12px;
5554      height: 100px;
5555    }
5556    .ui-slider-vertical .ui-slider-handle {
5557      left: -20px;
5558      margin-bottom: -10px;
5559    }
5560    .ui-slider-vertical .ui-slider-range {
5561      left: 0;
5562      width: 100%;
5563    }
5564    .ui-slider-vertical .ui-slider-range-min {
5565      bottom: 0;
5566    }
5567    .ui-slider-vertical .ui-slider-range-max {
5568      top: 0;
5569    }
5570    /* Spinner
5571     ========================================================================== */
5572    /**
5573   * jQuery UI Spinner.
5574   *
5575   * Some classes and HTML elements generally added via JavaScript, more info -
5576   * https://jqueryui.com/spinner/
5577   *
5578   * Example HTML:
5579   *
5580   * <span class="ui-spinner">
5581   *     <input type="text" class="ui-spinner-input">
5582   *     <a class="ui-spinner-button ui-spinner-up ui-button ui-button-text-only">
5583   *         <span class="ui-button-text">
5584   *             <span class="ui-icon ui-icon-triangle-1-n">+</span>
5585   *         </span>
5586   *     </a>
5587   *     <a class="ui-spinner-button ui-spinner-down ui-button ui-button-text-only">
5588   *         <span class="ui-button-text">
5589   *             <span class="ui-icon ui-icon-triangle-1-s">-</span>
5590   *         </span>
5591   *     </a>
5592   * </span>
5593   */
5594    .ui-spinner {
5595      display: inline-block;
5596      position: relative;
5597      padding: 0;
5598      border: 0;
5599      vertical-align: baseline;
5600    }
5601    .ui-spinner .ui-spinner-input {
5602      padding-right: 24px;
5603    }
5604    .ui-spinner-button {
5605      display: block;
5606      position: absolute;
5607      right: 0;
5608      width: 18px;
5609      height: 42%;
5610      margin: 0;
5611      padding: 0;
5612      font-size: 0.53846153846154em;
5613      line-height: 1.57142857142857em;
5614      cursor: default;
5615      overflow: hidden;
5616    }
5617    .ui-spinner-up {
5618      top: 0;
5619    }
5620    .ui-spinner-down {
5621      bottom: 0;
5622    }
5623    /**
5624   * Spinner RTL support.
5625   */
5626    [dir="rtl"] .ui-spinner .ui-spinner-input {
5627      padding-right: 4px;
5628      padding-left: 24px;
5629    }
5630    [dir="rtl"] .ui-spinner-button {
5631      right: auto;
5632      left: 0;
5633    }
5634    /* Tabs
5635     ========================================================================== */
5636    /**
5637   * jQuery UI Tabs.
5638   *
5639   * Some classes and HTML elements generally added via JavaScript, more info -
5640   * https://jqueryui.com/tabs/
5641   *
5642   * 1. `position: relative` prevents IE scroll bug (elements with
5643   *    `position: relative` inside a parent container with `overflow: auto`
5644   *    appear as "fixed")
5645   *
5646   * Example HTML:
5647   *
5648   * <div class="ui-tabs>
5649   *     <ul class="ui-tabs-nav">
5650   *         <li class="ui-tabs-active">
5651   *             <a class="ui-tabs-anchor">Tab 1</a>
5652   *         </li>
5653   *         <li>
5654   *             <a class="ui-tabs-anchor">Tab 2</a>
5655   *         </li>
5656   *         <li>
5657   *             <a class="ui-tabs-anchor">Tab 3</a>
5658   *         </li>
5659   *     </ul>
5660   *     <div class="ui-tabs-panel" aria-expanded="true">
5661   *         Tab 1 content
5662   *     </div>
5663   *     <div class="ui-tabs-panel aria-expanded="false" aria-hidden="true">
5664   *         Tab 2 content
5665   *     </div>
5666   *     <div class="ui-tabs-panel aria-expanded="false" aria-hidden="true">
5667   *         Tab 3 content
5668   *     </div>
5669   * </div>
5670   */
5671    .ui-tabs:not(.ui-tabs-vertical) {
5672      /* 1 */
5673      position: relative;
5674      border: 0;
5675    }
5676    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav {
5677      margin: 0;
5678      padding: 0;
5679      background: none;
5680    }
5681    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li {
5682      position: relative;
5683      top: 0;
5684      margin-right: 2px;
5685      float: left;
5686      border-bottom-width: 0;
5687      list-style: none;
5688      white-space: nowrap;
5689    }
5690    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active {
5691      margin-bottom: -1px;
5692      padding-bottom: 1px;
5693    }
5694    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
5695    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
5696    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
5697      cursor: text;
5698    }
5699    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav .ui-tabs-anchor {
5700      padding: 0.5em 1em;
5701      float: left;
5702      color: #333333;
5703      text-decoration: none;
5704    }
5705    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-panel {
5706      display: block;
5707      margin: 0 0 1em;
5708      padding: 1px 0;
5709      border-width: 1px 0;
5710      background: none;
5711    }
5712    /**
5713   * Maintain cursor style when collapsing a collapsible tab.
5714   */
5715    .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
5716      cursor: pointer;
5717    }
5718    /**
5719   * Tabs RTL support.
5720   */
5721    [dir="rtl"] .ui-tabs .ui-tabs-nav li {
5722      margin-right: 0;
5723      margin-left: 2px;
5724      float: right;
5725    }
5726    [dir="rtl"] .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
5727      float: right;
5728    }
5729    /**
5730   * Additonal styling for tabs vertical.
5731   */
5732    .ui-tabs-vertical .ui-tabs-nav .ui-tabs-active {
5733      background: #fff9e1;
5734    }
5735    .ui-tabs-vertical .ui-tabs-nav .ui-state-focus a {
5736      outline: thin solid #0066ff;
5737    }
5738    /* Tooltip
5739     ========================================================================== */
5740    /**
5741   * jQuery UI Tooltip.
5742   *
5743   * Some classes and HTML elements generally added via JavaScript, more info -
5744   * https://jqueryui.com/tooltip/
5745   *
5746   * Example HTML:
5747   *
5748   * <a>Link with a tooltip</a>
5749   * <div class="ui-tooltip">
5750   *     <div class="ui-tooltip-content">
5751   *         Content
5752   *     </div>
5753   * </div>
5754   */
5755    .ui-tooltip {
5756      position: absolute;
5757      max-width: 22em;
5758      padding: 0.5em 1em;
5759      z-index: 9999;
5760    }
5761  }
5762  
5763  /* ==========================================================================
5764     Responsive layout for screen media
5765     ========================================================================== */
5766  /* ==========================================================================
5767     Additional layout for devices < 768px
5768     ========================================================================== */
5769  @media (max-width: 60em) {
5770    /**
5771       * Adjust right/left padding of body.
5772       */
5773    body {
5774      padding: 4em 2em 0;
5775    }
5776    .setup,
5777    .login {
5778      padding: 1em 2em 0;
5779    }
5780    /**
5781       * Grid column cell changes at 1st breakpoint downwards.
5782       *
5783       * Cells for 4 column layout become 2 column layout.
5784       * Cells for 4 column span variations become 1 column layout.
5785       */
5786    .txp-layout-4col {
5787      width: 50%;
5788    }
5789    .txp-layout-4col-alt,
5790    .txp-layout-4col-2span,
5791    .txp-layout-4col-3span {
5792      width: 100%;
5793    }
5794    /**
5795       * Adjust right/left padding of header area.
5796       */
5797    .txp-header {
5798      padding: 0 2em;
5799    }
5800    /**
5801       * Smaller version of Textpattern logo.
5802       */
5803    .txp-header h1 {
5804      width: 1.75em;
5805    }
5806    .txp-header h1 a {
5807      width: 1.75em;
5808    }
5809    /**
5810       * 'View site' link.
5811       *
5812       * Example HTML:
5813       *
5814       * <p class="txp-view-site">
5815       *     <a>
5816       *         <span class="txp-view-site-name">My site</span>
5817       *     </a>
5818       * </p>
5819       */
5820    .txp-view-site {
5821      margin: 0.0625em 0.375em 0;
5822      padding: 0;
5823      font-size: 16px;
5824      overflow: inherit;
5825    }
5826    .txp-view-site a {
5827      text-indent: 110%;
5828      text-transform: capitalize;
5829      white-space: nowrap;
5830      overflow: hidden;
5831      display: block;
5832      width: 2em;
5833      height: 2em;
5834      background: url("../img/sprite.svg") no-repeat -8em 0;
5835      background-size: 13em 2em;
5836    }
5837    /**
5838       * Search widget at top of lists.
5839       */
5840    .txp-search,
5841    [dir="rtl"] .txp-search {
5842      -ms-flex-wrap: wrap;
5843          flex-wrap: wrap;
5844      -ms-flex-pack: start;
5845          justify-content: flex-start;
5846      margin-top: 0;
5847    }
5848    /**
5849       * Reposition search clearer.
5850       */
5851    .txp-search-clear {
5852      -ms-flex: 1 0 auto;
5853          flex: 1 0 auto;
5854      width: 100%;
5855      margin: 0 0 0.5em;
5856      text-align: left;
5857    }
5858    [dir="rtl"] .txp-search-clear {
5859      text-align: right;
5860    }
5861    /**
5862       * Reset Form panel 'name' and 'type' fields to blocks.
5863       */
5864    #page-form .name,
5865    #page-form .type {
5866      display: block;
5867      margin: 1em 0;
5868    }
5869    #page-form .txp-actions a {
5870      margin-top: 0.5em;
5871    }
5872  }
5873  
5874  /* ==========================================================================
5875     Additional layout for devices < 547px
5876     ========================================================================== */
5877  @media (max-width: 47em) {
5878    /**
5879       * Grid column cell changes at 2nd breakpoint downwards.
5880       *
5881       * Cells for 2 column layout become 1 column layout.
5882       * Cells for 4 column layout become 1 column layout.
5883       */
5884    .txp-layout-2col,
5885    .txp-layout-4col {
5886      width: 100%;
5887    }
5888    /**
5889       * Non-fixed header on mobile layout (because mobile nav menu couldn't scroll otherwise).
5890       */
5891    .txp-header {
5892      position: absolute;
5893    }
5894    /**
5895       * Show the navigation menu toggle button on mobile layout.
5896       *
5897       * Example HTML:
5898       *
5899       * <button class="txp-nav-toggle">
5900       */
5901    button.txp-nav-toggle {
5902      text-indent: 110%;
5903      text-transform: capitalize;
5904      white-space: nowrap;
5905      overflow: hidden;
5906      display: block;
5907      width: 2em;
5908      height: 2em;
5909      margin: 0.0625em 0 0;
5910      padding: 0;
5911      float: left;
5912      border: 0;
5913      border-radius: 0;
5914      background: transparent url("../img/sprite.svg") -10em 0;
5915      background-size: 13em 2em;
5916      font-size: 16px;
5917    }
5918    button.txp-nav-toggle:focus {
5919      outline: thin solid #0066ff;
5920    }
5921    button.txp-nav-toggle:not(.collapsed) {
5922      background-color: rgba(255, 255, 255, 0.33);
5923    }
5924    /**
5925       * Hide the navigation menu by default on mobile layout.
5926       */
5927    .txp-nav .data-dropdown {
5928      display: none;
5929    }
5930    /**
5931       * Show the navigation menu when toggled on mobile layout.
5932       */
5933    .txp-nav.in .data-dropdown {
5934      display: block;
5935      position: absolute;
5936      top: 3em;
5937      right: 0;
5938      left: 0;
5939      background: #fff9e1;
5940    }
5941    .txp-nav.in .data-dropdown::before {
5942      position: absolute;
5943      top: -0.5em;
5944      left: 4.375em;
5945      width: 1em;
5946      height: 0.5em;
5947      background: url("../img/sprite.svg") no-repeat -12em 0;
5948      background-size: 13em 2em;
5949      font-size: 16px;
5950      content: "";
5951      z-index: 2;
5952    }
5953    [dir="rtl"] .txp-nav.in .data-dropdown::before {
5954      right: 4.375em;
5955      left: auto;
5956    }
5957    .txp-nav > ul > li {
5958      float: none;
5959      border: 0;
5960      border-bottom: 1px solid #d4d4d4;
5961    }
5962    .txp-nav > ul > li:first-child {
5963      border-left: 0;
5964    }
5965    .txp-nav > ul > li > a,
5966    .txp-nav > ul > li > a.dropdown-toggle {
5967      padding: 0 2em;
5968    }
5969    [dir="rtl"] .txp-nav > ul > li > a, [dir="rtl"]
5970    .txp-nav > ul > li > a.dropdown-toggle {
5971      padding: 0 2em;
5972    }
5973    .txp-nav > ul > li a.dropdown-toggle::after {
5974      right: 1em;
5975    }
5976    [dir="rtl"] .txp-nav > ul > li a.dropdown-toggle::after {
5977      right: auto;
5978      left: 1em;
5979    }
5980    /**
5981       * Secondary-level navigation menu items (submenus).
5982       */
5983    .dropdown-menu {
5984      position: static;
5985      min-width: 0;
5986      border: 0;
5987      border-radius: 0;
5988    }
5989    .dropdown-menu a {
5990      padding: 0.5em 2em 0.5em 3em;
5991    }
5992    [dir="rtl"] .dropdown-menu a {
5993      padding: 0.5em 3em 0.5em 2em;
5994    }
5995    .dropdown-menu::before {
5996      display: none;
5997    }
5998    /**
5999       * Collapse 2 column form fields to 1 column (remove flexbox).
6000       */
6001    .txp-edit .txp-form-field:not(.txp-form-field-textarea),
6002    .txp-prefs-group .txp-form-field:not(.txp-form-field-textarea) {
6003      display: block;
6004    }
6005    /**
6006       * Label/value one-column layouts within panes.
6007       *
6008       * Collapsed from two-column format on desktop layout (remove flexbox).
6009       */
6010    .txp-edit .txp-form-field-label,
6011    .txp-edit .txp-form-field-value,
6012    .txp-prefs-group .txp-form-field-label,
6013    .txp-prefs-group .txp-form-field-value {
6014      -ms-flex: none;
6015          flex: none;
6016      min-height: inherit;
6017    }
6018    /**
6019       * Remove inline alignment margin values when collapsed.
6020       */
6021    .txp-form-field-value input,
6022    .txp-form-field-value select,
6023    .txp-form-field-value .jquery-ui-controlgroup {
6024      margin: 0;
6025    }
6026    /**
6027       * Remove float from list navigators on list panels.
6028       */
6029    .pageby,
6030    .prev-next {
6031      float: none;
6032    }
6033    /**
6034       * Collapse progress meters responsively.
6035       */
6036    .progress-meter ol {
6037      display: block;
6038      margin-bottom: 1em;
6039      text-align: left;
6040    }
6041    .progress-meter li {
6042      display: block;
6043      margin: 0;
6044      float: none;
6045    }
6046    .progress-meter li::after {
6047      display: none;
6048    }
6049    /**
6050       * Override specifity on collapsed progress meters in RTL languages.
6051       */
6052    [dir="rtl"] .progress-meter ol {
6053      text-align: right;
6054    }
6055    [dir="rtl"] .progress-meter li {
6056      margin: 0;
6057    }
6058    [dir="rtl"] .progress-meter li::after {
6059      display: none;
6060    }
6061    /**
6062       * Collapse jQuery UI tabs responsively.
6063       */
6064    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li {
6065      margin: 0;
6066      float: none;
6067      border-bottom-width: 1px;
6068    }
6069    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active {
6070      margin-bottom: 0;
6071      padding-bottom: 0;
6072    }
6073    [dir="rtl"] .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li {
6074      float: none;
6075    }
6076    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav .ui-tabs-anchor {
6077      display: block;
6078      float: none;
6079    }
6080    [dir="rtl"] .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav .ui-tabs-anchor {
6081      float: none;
6082    }
6083    /**
6084       * Remove top border from jQuery UI tabs panel.
6085       */
6086    .ui-tabs .ui-tabs-panel {
6087      border-top-width: 0;
6088    }
6089    /**
6090       * Remove float from inline the action links.
6091       */
6092    .txp-actions-inline,
6093    [dir="rtl"] .txp-actions-inline {
6094      margin-top: 0;
6095      float: none;
6096    }
6097  }
6098  
6099  /* ==========================================================================
6100     Animation `keyframes` need to appear outside of `screen` rules
6101     ========================================================================== */
6102  @keyframes messageflash {
6103    0% {
6104      opacity: 0;
6105    }
6106    75% {
6107      opacity: 0.5;
6108    }
6109    50%,
6110    100% {
6111      opacity: 1;
6112    }
6113  }
6114  
6115  /* ==========================================================================
6116     Styling and layout for print media
6117     ========================================================================== */
6118  @media print {
6119    /**
6120   * Remove unnecessary global styling from printed media.
6121   */
6122    *,
6123    *::before,
6124    *::after,
6125    *::first-letter,
6126    p::first-line,
6127    div::first-line,
6128    blockquote::first-line,
6129    li::first-line {
6130      background: transparent !important;
6131      color: #000000 !important;
6132      text-shadow: none !important;
6133      box-shadow: none !important;
6134    }
6135    /**
6136   * Use a print-friendly font and size.
6137   */
6138    body {
6139      font-family: sans-serif;
6140      font-size: 8pt;
6141      line-height: 1.5;
6142    }
6143    /**
6144   * Hide unnecessary content from print.
6145   */
6146    nav,
6147    audio,
6148    video,
6149    .txp-header,
6150    .txp-footer,
6151    .txp-search,
6152    .txp-navigation,
6153    .txp-actions,
6154    .txp-control-panel,
6155    .txp-list-options,
6156    .txp-list-col-multi-edit,
6157    .multi-edit,
6158    .pophelp,
6159    .pophelpsubtle,
6160    #messagepane,
6161    #content_switcher,
6162    #view_modes {
6163      display: none;
6164    }
6165    /**
6166   * Make sure links are not underlined.
6167   */
6168    a {
6169      text-decoration: none;
6170    }
6171    /**
6172   * Ensure monospaced font is used.
6173   */
6174    pre,
6175    code,
6176    kbd,
6177    samp,
6178    var,
6179    .code {
6180      font-family: monospace;
6181    }
6182    /**
6183   * Ensure pre blocks are wrapped when printed.
6184   */
6185    pre {
6186      white-space: pre-wrap;
6187    }
6188    /**
6189   * Basic preformatted/blockquote styling.
6190   */
6191    pre,
6192    blockquote {
6193      border: 1px solid #000000;
6194      page-break-inside: avoid;
6195    }
6196    /**
6197   * Avoid images breaking across multiple pages.
6198   */
6199    img {
6200      page-break-inside: avoid;
6201    }
6202    /**
6203   * Borders on various elements.
6204   */
6205    table,
6206    input,
6207    textarea {
6208      border: 1px solid #000000;
6209    }
6210    /**
6211   * Display table head across multi-page tables.
6212   */
6213    thead {
6214      display: table-header-group;
6215    }
6216    /**
6217   * Avoid table rows breaking across multiple pages.
6218   */
6219    tr {
6220      page-break-inside: avoid;
6221    }
6222    /**
6223   * Avoid paragraph orphans and widows.
6224   */
6225    p,
6226    h1,
6227    h2,
6228    h3,
6229    h4,
6230    h5,
6231    h6 {
6232      orphans: 2;
6233      widows: 2;
6234    }
6235    /**
6236   * Avoid headings breaking across multiple pages.
6237   */
6238    h1,
6239    h2,
6240    h3,
6241    h4,
6242    h5,
6243    h6 {
6244      page-break-after: avoid;
6245    }
6246  }
6247  
6248  @media screen {
6249    .txp-list tbody tr,
6250    .txp-list thead th,
6251    .txp-list thead th:first-child {
6252      border-color: #cccccc;
6253    }
6254    .ui-button .ui-icon {
6255      background-image: url("../img/ui-icon-sprite-ffffff.svg");
6256    }
6257    .dropdown-menu {
6258      border-radius: 0;
6259      background: #ffffff;
6260    }
6261    .dropdown-menu li:hover {
6262      background: #eaf3fc;
6263    }
6264    .dropdown-menu li.selected {
6265      background: #d4e7f8;
6266    }
6267    table,
6268    .switcher-list,
6269    .ui-menu {
6270      background: #ffffff;
6271    }
6272  }