BookStack Code Mirror - bookstack/blob - public/dist/styles.css

   1 @charset "UTF-8";
   2 /* http://meyerweb.com/eric/tools/css/reset/
   3    v2.0 | 20110126
   4    License: none (public domain)
   5 */
   6 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   7   margin: 0;
   8   padding: 0;
   9   border: 0;
  10   font-size: 100%;
  11   font: inherit;
  12   vertical-align: baseline; }
  13
  14 /* HTML5 display-role reset for older browsers */
  15 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  16   display: block; }
  17
  18 body {
  19   line-height: 1; }
  20
  21 ol, ul {
  22   list-style: none; }
  23
  24 blockquote, q {
  25   quotes: none; }
  26
  27 blockquote:before, blockquote:after {
  28   content: '';
  29   content: none; }
  30
  31 q:before, q:after {
  32   content: '';
  33   content: none; }
  34
  35 table {
  36   border-collapse: collapse;
  37   border-spacing: 0; }
  38
  39 :root {
  40   --color-primary: #206ea7;
  41   --color-primary-light: rgba(32,110,167,0.15);
  42   --color-page: #206ea7;
  43   --color-page-draft: #7e50b1;
  44   --color-chapter: #af4d0d;
  45   --color-book: #077b70;
  46   --color-bookshelf: #a94747; }
  47
  48 .m-none {
  49   margin: 0 !important; }
  50
  51 .mx-none {
  52   margin-left: 0 !important;
  53   margin-right: 0 !important; }
  54
  55 .my-none {
  56   margin-top: 0 !important;
  57   margin-bottom: 0 !important; }
  58
  59 .mt-none {
  60   margin-top: 0 !important; }
  61
  62 .mr-none {
  63   margin-right: 0 !important; }
  64
  65 .mb-none {
  66   margin-bottom: 0 !important; }
  67
  68 .ml-none {
  69   margin-left: 0 !important; }
  70
  71 .m-xxs {
  72   margin: 3px !important; }
  73
  74 .mx-xxs {
  75   margin-left: 3px !important;
  76   margin-right: 3px !important; }
  77
  78 .my-xxs {
  79   margin-top: 3px !important;
  80   margin-bottom: 3px !important; }
  81
  82 .mt-xxs {
  83   margin-top: 3px !important; }
  84
  85 .mr-xxs {
  86   margin-right: 3px !important; }
  87
  88 .mb-xxs {
  89   margin-bottom: 3px !important; }
  90
  91 .ml-xxs {
  92   margin-left: 3px !important; }
  93
  94 .m-xs {
  95   margin: 6px !important; }
  96
  97 .mx-xs {
  98   margin-left: 6px !important;
  99   margin-right: 6px !important; }
 100
 101 .my-xs {
 102   margin-top: 6px !important;
 103   margin-bottom: 6px !important; }
 104
 105 .mt-xs {
 106   margin-top: 6px !important; }
 107
 108 .mr-xs {
 109   margin-right: 6px !important; }
 110
 111 .mb-xs {
 112   margin-bottom: 6px !important; }
 113
 114 .ml-xs {
 115   margin-left: 6px !important; }
 116
 117 .m-s {
 118   margin: 12px !important; }
 119
 120 .mx-s {
 121   margin-left: 12px !important;
 122   margin-right: 12px !important; }
 123
 124 .my-s {
 125   margin-top: 12px !important;
 126   margin-bottom: 12px !important; }
 127
 128 .mt-s {
 129   margin-top: 12px !important; }
 130
 131 .mr-s {
 132   margin-right: 12px !important; }
 133
 134 .mb-s {
 135   margin-bottom: 12px !important; }
 136
 137 .ml-s {
 138   margin-left: 12px !important; }
 139
 140 .m-m {
 141   margin: 16px !important; }
 142
 143 .mx-m {
 144   margin-left: 16px !important;
 145   margin-right: 16px !important; }
 146
 147 .my-m {
 148   margin-top: 16px !important;
 149   margin-bottom: 16px !important; }
 150
 151 .mt-m {
 152   margin-top: 16px !important; }
 153
 154 .mr-m {
 155   margin-right: 16px !important; }
 156
 157 .mb-m {
 158   margin-bottom: 16px !important; }
 159
 160 .ml-m {
 161   margin-left: 16px !important; }
 162
 163 .m-l {
 164   margin: 24px !important; }
 165
 166 .mx-l {
 167   margin-left: 24px !important;
 168   margin-right: 24px !important; }
 169
 170 .my-l {
 171   margin-top: 24px !important;
 172   margin-bottom: 24px !important; }
 173
 174 .mt-l {
 175   margin-top: 24px !important; }
 176
 177 .mr-l {
 178   margin-right: 24px !important; }
 179
 180 .mb-l {
 181   margin-bottom: 24px !important; }
 182
 183 .ml-l {
 184   margin-left: 24px !important; }
 185
 186 .m-xl {
 187   margin: 32px !important; }
 188
 189 .mx-xl {
 190   margin-left: 32px !important;
 191   margin-right: 32px !important; }
 192
 193 .my-xl {
 194   margin-top: 32px !important;
 195   margin-bottom: 32px !important; }
 196
 197 .mt-xl {
 198   margin-top: 32px !important; }
 199
 200 .mr-xl {
 201   margin-right: 32px !important; }
 202
 203 .mb-xl {
 204   margin-bottom: 32px !important; }
 205
 206 .ml-xl {
 207   margin-left: 32px !important; }
 208
 209 .m-xxl {
 210   margin: 48px !important; }
 211
 212 .mx-xxl {
 213   margin-left: 48px !important;
 214   margin-right: 48px !important; }
 215
 216 .my-xxl {
 217   margin-top: 48px !important;
 218   margin-bottom: 48px !important; }
 219
 220 .mt-xxl {
 221   margin-top: 48px !important; }
 222
 223 .mr-xxl {
 224   margin-right: 48px !important; }
 225
 226 .mb-xxl {
 227   margin-bottom: 48px !important; }
 228
 229 .ml-xxl {
 230   margin-left: 48px !important; }
 231
 232 .p-none {
 233   padding: 0 !important; }
 234
 235 .px-none {
 236   padding-left: 0 !important;
 237   padding-right: 0 !important; }
 238
 239 .py-none {
 240   padding-top: 0 !important;
 241   padding-bottom: 0 !important; }
 242
 243 .pt-none {
 244   padding-top: 0 !important; }
 245
 246 .pr-none {
 247   padding-right: 0 !important; }
 248
 249 .pb-none {
 250   padding-bottom: 0 !important; }
 251
 252 .pl-none {
 253   padding-left: 0 !important; }
 254
 255 .p-xxs {
 256   padding: 3px !important; }
 257
 258 .px-xxs {
 259   padding-left: 3px !important;
 260   padding-right: 3px !important; }
 261
 262 .py-xxs {
 263   padding-top: 3px !important;
 264   padding-bottom: 3px !important; }
 265
 266 .pt-xxs {
 267   padding-top: 3px !important; }
 268
 269 .pr-xxs {
 270   padding-right: 3px !important; }
 271
 272 .pb-xxs {
 273   padding-bottom: 3px !important; }
 274
 275 .pl-xxs {
 276   padding-left: 3px !important; }
 277
 278 .p-xs {
 279   padding: 6px !important; }
 280
 281 .px-xs {
 282   padding-left: 6px !important;
 283   padding-right: 6px !important; }
 284
 285 .py-xs {
 286   padding-top: 6px !important;
 287   padding-bottom: 6px !important; }
 288
 289 .pt-xs {
 290   padding-top: 6px !important; }
 291
 292 .pr-xs {
 293   padding-right: 6px !important; }
 294
 295 .pb-xs {
 296   padding-bottom: 6px !important; }
 297
 298 .pl-xs {
 299   padding-left: 6px !important; }
 300
 301 .p-s {
 302   padding: 12px !important; }
 303
 304 .px-s {
 305   padding-left: 12px !important;
 306   padding-right: 12px !important; }
 307
 308 .py-s {
 309   padding-top: 12px !important;
 310   padding-bottom: 12px !important; }
 311
 312 .pt-s {
 313   padding-top: 12px !important; }
 314
 315 .pr-s {
 316   padding-right: 12px !important; }
 317
 318 .pb-s {
 319   padding-bottom: 12px !important; }
 320
 321 .pl-s {
 322   padding-left: 12px !important; }
 323
 324 .p-m {
 325   padding: 16px !important; }
 326
 327 .px-m {
 328   padding-left: 16px !important;
 329   padding-right: 16px !important; }
 330
 331 .py-m {
 332   padding-top: 16px !important;
 333   padding-bottom: 16px !important; }
 334
 335 .pt-m {
 336   padding-top: 16px !important; }
 337
 338 .pr-m {
 339   padding-right: 16px !important; }
 340
 341 .pb-m {
 342   padding-bottom: 16px !important; }
 343
 344 .pl-m {
 345   padding-left: 16px !important; }
 346
 347 .p-l {
 348   padding: 24px !important; }
 349
 350 .px-l {
 351   padding-left: 24px !important;
 352   padding-right: 24px !important; }
 353
 354 .py-l {
 355   padding-top: 24px !important;
 356   padding-bottom: 24px !important; }
 357
 358 .pt-l {
 359   padding-top: 24px !important; }
 360
 361 .pr-l {
 362   padding-right: 24px !important; }
 363
 364 .pb-l {
 365   padding-bottom: 24px !important; }
 366
 367 .pl-l {
 368   padding-left: 24px !important; }
 369
 370 .p-xl {
 371   padding: 32px !important; }
 372
 373 .px-xl {
 374   padding-left: 32px !important;
 375   padding-right: 32px !important; }
 376
 377 .py-xl {
 378   padding-top: 32px !important;
 379   padding-bottom: 32px !important; }
 380
 381 .pt-xl {
 382   padding-top: 32px !important; }
 383
 384 .pr-xl {
 385   padding-right: 32px !important; }
 386
 387 .pb-xl {
 388   padding-bottom: 32px !important; }
 389
 390 .pl-xl {
 391   padding-left: 32px !important; }
 392
 393 .p-xxl {
 394   padding: 48px !important; }
 395
 396 .px-xxl {
 397   padding-left: 48px !important;
 398   padding-right: 48px !important; }
 399
 400 .py-xxl {
 401   padding-top: 48px !important;
 402   padding-bottom: 48px !important; }
 403
 404 .pt-xxl {
 405   padding-top: 48px !important; }
 406
 407 .pr-xxl {
 408   padding-right: 48px !important; }
 409
 410 .pb-xxl {
 411   padding-bottom: 48px !important; }
 412
 413 .pl-xxl {
 414   padding-left: 48px !important; }
 415
 416 * {
 417   box-sizing: border-box;
 418   outline-color: #444444; }
 419
 420 *:focus {
 421   outline-style: dotted; }
 422
 423 html {
 424   height: 100%;
 425   overflow-y: scroll;
 426   background-color: #F2F2F2; }
 427   html.flexbox {
 428     overflow-y: hidden; }
 429
 430 body {
 431   font-size: 14px;
 432   line-height: 1.6;
 433   color: #444;
 434   -webkit-font-smoothing: antialiased;
 435   background-color: #F2F2F2; }
 436
 437 /**
 438  * Fonts
 439  */
 440 body, button, input, select, label, textarea {
 441   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
 442
 443 .Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base, code, span.code {
 444   font-family: "Lucida Console", "DejaVu Sans Mono", "Ubunto Mono", Monaco, monospace; }
 445
 446 /*
 447  * Header Styles
 448  */
 449 h1 {
 450   font-size: 3.425em;
 451   line-height: 1.22222222em;
 452   margin-top: 0.48888889em;
 453   margin-bottom: 0.48888889em; }
 454
 455 h2 {
 456   font-size: 2.8275em;
 457   line-height: 1.294117647em;
 458   margin-top: 0.8627451em;
 459   margin-bottom: 0.43137255em; }
 460
 461 h3 {
 462   font-size: 2.333em;
 463   line-height: 1.221428572em;
 464   margin-top: 0.78571429em;
 465   margin-bottom: 0.43137255em; }
 466
 467 h4 {
 468   font-size: 1.666em;
 469   line-height: 1.375em;
 470   margin-top: 0.78571429em;
 471   margin-bottom: 0.43137255em; }
 472
 473 h1, h2, h3, h4, h5, h6 {
 474   font-weight: 400;
 475   position: relative;
 476   display: block;
 477   color: #222; }
 478   h1 .subheader, h2 .subheader, h3 .subheader, h4 .subheader, h5 .subheader, h6 .subheader {
 479     font-size: 0.5em;
 480     line-height: 1em;
 481     color: #969696; }
 482
 483 h5 {
 484   font-size: 1.4em; }
 485
 486 h5, h6 {
 487   line-height: 1.2em;
 488   margin-top: 0.78571429em;
 489   margin-bottom: 0.66em; }
 490
 491 @media screen and (max-width: 600px) {
 492   h1 {
 493     font-size: 2.8275em; }
 494   h2 {
 495     font-size: 2.333em; }
 496   h3 {
 497     font-size: 1.666em; }
 498   h4 {
 499     font-size: 1.333em; }
 500   h5 {
 501     font-size: 1.161616em; } }
 502
 503 .list-heading {
 504   font-size: 2rem; }
 505
 506 h2.list-heading {
 507   font-size: 1.333rem; }
 508
 509 /*
 510  * Link styling
 511  */
 512 a {
 513   color: var(--color-primary);
 514   fill: var(--color-primary);
 515   cursor: pointer;
 516   text-decoration: none;
 517   transition: filter ease-in-out 80ms;
 518   line-height: 1.6; }
 519   a:hover {
 520     text-decoration: underline; }
 521   a.icon {
 522     display: inline-block; }
 523   a svg {
 524     position: relative;
 525     display: inline-block; }
 526   a:focus img:only-child {
 527     outline: 2px dashed var(--color-primary);
 528     outline-offset: 2px; }
 529
 530 .blended-links a {
 531   color: inherit; }
 532   .blended-links a svg {
 533     fill: currentColor; }
 534
 535 /*
 536  * Other HTML Text Elements
 537  */
 538 p, ul, ol, pre, table, blockquote {
 539   margin-top: 0.3em;
 540   margin-bottom: 1.375em; }
 541
 542 hr {
 543   border: 0;
 544   height: 1px;
 545   background: #EAEAEA;
 546   margin-bottom: 24px; }
 547   hr.faded {
 548     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF); }
 549   hr.margin-top, hr.even {
 550     margin-top: 24px; }
 551
 552 strong, b, .bold, .strong {
 553   font-weight: bold; }
 554   strong > strong, strong > b, strong > .bold, strong > .strong, b > strong, b > b, b > .bold, b > .strong, .bold > strong, .bold > b, .bold > .bold, .bold > .strong, .strong > strong, .strong > b, .strong > .bold, .strong > .strong {
 555     font-weight: bolder; }
 556
 557 em, i, .italic {
 558   font-style: italic; }
 559
 560 small, p.small, span.small, .text-small {
 561   font-size: 0.75rem;
 562   color: #5e5e5e; }
 563
 564 sup, .superscript {
 565   vertical-align: super;
 566   font-size: 0.8em; }
 567
 568 sub, .subscript {
 569   vertical-align: sub;
 570   font-size: 0.8em; }
 571
 572 pre {
 573   font-size: 12px;
 574   background-color: #f5f5f5;
 575   border: 1px solid #DDD;
 576   padding-left: 31px;
 577   position: relative;
 578   padding-top: 3px;
 579   padding-bottom: 3px; }
 580   pre:after {
 581     content: '';
 582     display: block;
 583     position: absolute;
 584     top: 0;
 585     width: 29px;
 586     left: 0;
 587     background-color: #f5f5f5;
 588     height: 100%;
 589     border-right: 1px solid #DDD; }
 590
 591 @media print {
 592   pre {
 593     padding-left: 12px; }
 594   pre:after {
 595     display: none; } }
 596
 597 blockquote {
 598   display: block;
 599   position: relative;
 600   border-left: 4px solid var(--color-primary);
 601   background-color: #F8F8F8;
 602   padding: 12px 16px 12px 32px; }
 603   blockquote:before {
 604     content: "\201C";
 605     font-size: 2em;
 606     font-weight: bold;
 607     position: absolute;
 608     top: 12px;
 609     left: 12px;
 610     color: #777777; }
 611
 612 .code-base, code, span.code {
 613   background-color: #F8F8F8;
 614   font-size: 0.80em;
 615   border: 1px solid #DDD;
 616   border-radius: 3px; }
 617
 618 code {
 619   display: inline;
 620   padding: 1px 3px;
 621   white-space: pre;
 622   line-height: 1.2em;
 623   margin-bottom: 1.2em; }
 624
 625 span.code {
 626   padding: 1px 6px; }
 627
 628 pre code {
 629   background-color: transparent;
 630   border: 0;
 631   font-size: 1em;
 632   display: block;
 633   line-height: 1.6; }
 634
 635 span.highlight {
 636   font-weight: bold;
 637   padding: 2px 4px; }
 638
 639 /*
 640  * Lists
 641  */
 642 ul, ol {
 643   overflow: hidden; }
 644   ul p, ol p {
 645     margin: 0; }
 646
 647 ul {
 648   padding-left: 20.8px;
 649   padding-right: 20.8px;
 650   list-style: disc; }
 651   ul ul {
 652     list-style: circle;
 653     margin-top: 0;
 654     margin-bottom: 0; }
 655   ul label {
 656     margin: 0; }
 657
 658 ol {
 659   list-style: decimal;
 660   padding-left: 32px;
 661   padding-right: 32px; }
 662
 663 li.checkbox-item, li.task-list-item {
 664   list-style: none;
 665   margin-left: -20.8px; }
 666   li.checkbox-item input[type="checkbox"], li.task-list-item input[type="checkbox"] {
 667     margin-right: 6px; }
 668
 669 /*
 670  * Generic text styling classes
 671  */
 672 .underlined {
 673   text-decoration: underline; }
 674
 675 .text-center {
 676   text-align: center; }
 677
 678 .text-left {
 679   text-align: left; }
 680
 681 .text-right {
 682   text-align: right; }
 683
 684 @media screen and (min-width: 360px) {
 685   .text-xxs-center {
 686     text-align: center; }
 687   .text-xxs-left {
 688     text-align: left; }
 689   .text-xxs-right {
 690     text-align: right; } }
 691
 692 @media screen and (min-width: 400px) {
 693   .text-xs-center {
 694     text-align: center; }
 695   .text-xs-left {
 696     text-align: left; }
 697   .text-xs-right {
 698     text-align: right; } }
 699
 700 @media screen and (min-width: 600px) {
 701   .text-s-center {
 702     text-align: center; }
 703   .text-s-left {
 704     text-align: left; }
 705   .text-s-right {
 706     text-align: right; } }
 707
 708 @media screen and (min-width: 880px) {
 709   .text-m-center {
 710     text-align: center; }
 711   .text-m-left {
 712     text-align: left; }
 713   .text-m-right {
 714     text-align: right; } }
 715
 716 @media screen and (min-width: 1000px) {
 717   .text-l-center {
 718     text-align: center; }
 719   .text-l-left {
 720     text-align: left; }
 721   .text-l-right {
 722     text-align: right; } }
 723
 724 @media screen and (min-width: 1100px) {
 725   .text-xl-center {
 726     text-align: center; }
 727   .text-xl-left {
 728     text-align: left; }
 729   .text-xl-right {
 730     text-align: right; } }
 731
 732 .text-bigger {
 733   font-size: 1.1em; }
 734
 735 .text-large {
 736   font-size: 1.6666em; }
 737
 738 .no-color {
 739   color: inherit; }
 740
 741 .break-text {
 742   word-wrap: break-word;
 743   overflow-wrap: break-word; }
 744
 745 .limit-text {
 746   white-space: nowrap;
 747   overflow: hidden;
 748   text-overflow: ellipsis; }
 749
 750 /**
 751  * Grouping
 752  */
 753 .header-group {
 754   margin: 16px 0; }
 755   .header-group h1, .header-group h2, .header-group h3, .header-group h4, .header-group h5, .header-group h6 {
 756     margin: 0; }
 757
 758 span.sep {
 759   color: #BBB;
 760   padding: 0 6px; }
 761
 762 .list > * {
 763   display: block; }
 764
 765 /**
 766   * Icons
 767   */
 768 .svg-icon {
 769   width: 1em;
 770   height: 1em;
 771   display: inline-block;
 772   position: relative;
 773   bottom: -0.105em;
 774   margin-right: 6px;
 775   pointer-events: none; }
 776
 777 /**
 778  * Background colors
 779  */
 780 .primary-background {
 781   background-color: var(--color-primary) !important; }
 782
 783 .primary-background-light {
 784   background-color: var(--color-primary-light); }
 785
 786 /*
 787  * Status text colors
 788  */
 789 .text-pos, .text-pos:hover, .text-pos-hover:hover {
 790   color: #0f7d15 !important;
 791   fill: #0f7d15 !important; }
 792
 793 .text-warn, .text-warn:hover, .text-warn-hover:hover {
 794   color: #cf4d03 !important;
 795   fill: #cf4d03 !important; }
 796
 797 .text-neg, .text-neg:hover, .text-neg-hover:hover {
 798   color: #ab0f0e !important;
 799   fill: #ab0f0e !important; }
 800
 801 /*
 802  * Style text colors
 803  */
 804 .text-primary, .text-primary:hover, .text-primary-hover:hover {
 805   color: var(--color-primary) !important;
 806   fill: var(--color-primary) !important; }
 807
 808 .text-muted {
 809   color: #575757 !important;
 810   fill: #575757 !important; }
 811
 812 /*
 813  * Entity text colors
 814  */
 815 .text-bookshelf, .text-bookshelf:hover {
 816   color: var(--color-bookshelf);
 817   fill: var(--color-bookshelf); }
 818
 819 .text-book, .text-book:hover {
 820   color: var(--color-book);
 821   fill: var(--color-book); }
 822
 823 .text-page, .text-page:hover {
 824   color: var(--color-page);
 825   fill: var(--color-page); }
 826
 827 .text-page.draft, .text-page.draft:hover {
 828   color: var(--color-page-draft);
 829   fill: var(--color-page-draft); }
 830
 831 .text-chapter, .text-chapter:hover {
 832   color: var(--color-chapter);
 833   fill: var(--color-chapter); }
 834
 835 /*
 836  * Standard & Entity background colors
 837  */
 838 .bg-white {
 839   background-color: #FFFFFF; }
 840
 841 .bg-book {
 842   background-color: var(--color-book); }
 843
 844 .bg-chapter {
 845   background-color: var(--color-chapter); }
 846
 847 .bg-shelf {
 848   background-color: var(--color-bookshelf); }
 849
 850 /**
 851  * Generic content container
 852  */
 853 .container {
 854   max-width: 1400px;
 855   margin-left: auto;
 856   margin-right: auto;
 857   padding-left: 16px;
 858   padding-right: 16px; }
 859   .container.small {
 860     max-width: 840px; }
 861   .container.very-small {
 862     max-width: 480px; }
 863
 864 /**
 865  * Core grid layout system
 866  */
 867 .grid {
 868   display: grid;
 869   grid-column-gap: 24px;
 870   grid-row-gap: 24px; }
 871   .grid.half {
 872     grid-template-columns: 1fr 1fr; }
 873   .grid.third {
 874     grid-template-columns: 1fr 1fr 1fr; }
 875   .grid.left-focus {
 876     grid-template-columns: 2fr 1fr; }
 877   .grid.right-focus {
 878     grid-template-columns: 1fr 3fr; }
 879   .grid.gap-y-xs {
 880     grid-row-gap: 6px; }
 881   .grid.gap-xl {
 882     grid-column-gap: 32px;
 883     grid-row-gap: 32px; }
 884   .grid.gap-xxl {
 885     grid-column-gap: 48px;
 886     grid-row-gap: 48px; }
 887   .grid.v-center {
 888     align-items: center; }
 889   .grid.no-gap {
 890     grid-row-gap: 0;
 891     grid-column-gap: 0; }
 892   .grid.no-row-gap {
 893     grid-row-gap: 0; }
 894
 895 @media screen and (max-width: 880px) {
 896   .grid.third:not(.no-break) {
 897     grid-template-columns: 1fr 1fr; }
 898   .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
 899     grid-template-columns: 1fr; }
 900   .grid.half.collapse-xs {
 901     grid-template-columns: 1fr 1fr; }
 902   .grid.gap-xl {
 903     grid-column-gap: 16px;
 904     grid-row-gap: 16px; }
 905   .grid.right-focus.reverse-collapse > *:nth-child(2) {
 906     order: 0; }
 907   .grid.right-focus.reverse-collapse > *:nth-child(1) {
 908     order: 1; } }
 909
 910 @media screen and (max-width: 600px) {
 911   .grid.third:not(.no-break) {
 912     grid-template-columns: 1fr; } }
 913
 914 @media screen and (max-width: 400px) {
 915   .grid.half.collapse-xs {
 916     grid-template-columns: 1fr; } }
 917
 918 /**
 919  * Flexbox layout system
 920  */
 921 body.flexbox {
 922   display: flex;
 923   flex-direction: column;
 924   align-items: stretch;
 925   height: 100%;
 926   min-height: 100%;
 927   max-height: 100%;
 928   overflow: hidden; }
 929   body.flexbox #content {
 930     flex: 1;
 931     display: flex;
 932     min-height: 0; }
 933
 934 .flex-fill {
 935   display: flex;
 936   align-items: stretch;
 937   min-height: 0;
 938   max-width: 100%;
 939   position: relative;
 940   overflow-y: hidden; }
 941
 942 .flex {
 943   min-height: 0;
 944   flex: 1; }
 945
 946 /**
 947  * Display and float utilities
 948  */
 949 .block {
 950   display: block;
 951   position: relative; }
 952
 953 .inline {
 954   display: inline; }
 955
 956 .block.inline {
 957   display: inline-block; }
 958
 959 .hidden {
 960   display: none; }
 961
 962 .float {
 963   float: left; }
 964   .float.right {
 965     float: right; }
 966
 967 /**
 968  * Visibility
 969  */
 970 @media screen and (max-width: 360px) {
 971   .hide-under-xxs {
 972     display: none !important; } }
 973
 974 @media screen and (min-width: 360px) {
 975   .hide-over-xxs {
 976     display: none !important; } }
 977
 978 @media screen and (max-width: 400px) {
 979   .hide-under-xs {
 980     display: none !important; } }
 981
 982 @media screen and (min-width: 400px) {
 983   .hide-over-xs {
 984     display: none !important; } }
 985
 986 @media screen and (max-width: 600px) {
 987   .hide-under-s {
 988     display: none !important; } }
 989
 990 @media screen and (min-width: 600px) {
 991   .hide-over-s {
 992     display: none !important; } }
 993
 994 @media screen and (max-width: 880px) {
 995   .hide-under-m {
 996     display: none !important; } }
 997
 998 @media screen and (min-width: 880px) {
 999   .hide-over-m {
1000     display: none !important; } }
1001
1002 @media screen and (max-width: 1000px) {
1003   .hide-under-l {
1004     display: none !important; } }
1005
1006 @media screen and (min-width: 1000px) {
1007   .hide-over-l {
1008     display: none !important; } }
1009
1010 @media screen and (max-width: 1100px) {
1011   .hide-under-xl {
1012     display: none !important; } }
1013
1014 @media screen and (min-width: 1100px) {
1015   .hide-over-xl {
1016     display: none !important; } }
1017
1018 /**
1019  * Inline content columns
1020  */
1021 .dual-column-content {
1022   columns: 2; }
1023
1024 @media screen and (max-width: 880px) {
1025   .dual-column-content {
1026     columns: 1; } }
1027
1028 /**
1029  * Fixes
1030  */
1031 .clearfix:before,
1032 .clearfix:after {
1033   content: " ";
1034   display: table; }
1035
1036 .clearfix:after {
1037   clear: both; }
1038
1039 /**
1040  * View Layouts
1041  */
1042 .tri-layout-container {
1043   display: grid;
1044   margin-left: 32px;
1045   margin-right: 32px;
1046   grid-template-columns: 1fr 4fr 1fr;
1047   grid-template-areas: "a b c";
1048   grid-column-gap: 48px; }
1049   .tri-layout-container .tri-layout-right {
1050     grid-area: c;
1051     min-width: 0; }
1052   .tri-layout-container .tri-layout-left {
1053     grid-area: a;
1054     min-width: 0; }
1055   .tri-layout-container .tri-layout-middle {
1056     grid-area: b;
1057     padding-top: 16px; }
1058
1059 @media screen and (max-width: 1400px) {
1060   .tri-layout-container {
1061     grid-template-areas: "c b b" "a b b" ". b b";
1062     grid-template-columns: 1fr 3fr;
1063     grid-template-rows: min-content min-content 1fr;
1064     padding-right: 24px; } }
1065
1066 @media screen and (min-width: 1000px) and (max-width: 1400px) {
1067   .tri-layout-left {
1068     position: sticky;
1069     top: 16px; } }
1070
1071 @media screen and (min-width: 1400px) {
1072   .tri-layout-left-contents, .tri-layout-right-contents {
1073     padding: 16px;
1074     position: sticky;
1075     top: 16px;
1076     max-height: 100vh;
1077     min-height: 50vh;
1078     overflow-y: scroll;
1079     overflow-x: hidden;
1080     scrollbar-width: none;
1081     -ms-overflow-style: none; }
1082     .tri-layout-left-contents::-webkit-scrollbar, .tri-layout-right-contents::-webkit-scrollbar {
1083       display: none; }
1084   .tri-layout-middle-contents {
1085     max-width: 940px;
1086     margin: 0 auto; } }
1087
1088 @media screen and (max-width: 1000px) {
1089   .tri-layout-container {
1090     grid-template-areas: none;
1091     grid-template-columns: 1fr;
1092     grid-column-gap: 0;
1093     padding-right: 6px;
1094     padding-left: 6px; }
1095     .tri-layout-container .tri-layout-left-contents, .tri-layout-container .tri-layout-right-contents {
1096       padding-left: 16px;
1097       padding-right: 16px; }
1098     .tri-layout-container .tri-layout-left > *, .tri-layout-container .tri-layout-right > * {
1099       display: none;
1100       pointer-events: none; }
1101     .tri-layout-container .tri-layout-left, .tri-layout-container .tri-layout-right {
1102       grid-area: none;
1103       grid-column: 1/1;
1104       grid-row: 1;
1105       padding-top: 0 !important; }
1106     .tri-layout-container .tri-layout-middle {
1107       grid-area: none;
1108       grid-row: 3;
1109       grid-column: 1/1;
1110       z-index: 1;
1111       overflow: hidden;
1112       transition: transform ease-in-out 240ms; }
1113     .tri-layout-container .tri-layout-left {
1114       grid-row: 2; }
1115     .tri-layout-container.show-info {
1116       overflow: hidden; }
1117       .tri-layout-container.show-info .tri-layout-middle {
1118         display: none; }
1119       .tri-layout-container.show-info .tri-layout-right > *, .tri-layout-container.show-info .tri-layout-left > * {
1120         display: block;
1121         pointer-events: auto; } }
1122
1123 @media screen and (min-width: 1000px) {
1124   .tri-layout-mobile-tabs {
1125     display: none; }
1126   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
1127     opacity: 0.6;
1128     transition: opacity ease-in-out 120ms; }
1129     .tri-layout-left-contents > *:hover, .tri-layout-right-contents > *:hover {
1130       opacity: 1; }
1131     .tri-layout-left-contents > *:focus-within, .tri-layout-right-contents > *:focus-within {
1132       opacity: 1; } }
1133
1134 @media screen and (max-width: 880px) {
1135   .tri-layout-container {
1136     margin-left: 0;
1137     margin-right: 0; } }
1138
1139 /**
1140  * Callouts
1141  */
1142 .callout {
1143   border-left: 3px solid #BBB;
1144   background-color: #EEE;
1145   padding: 12px 12px 12px 32px;
1146   display: block;
1147   position: relative; }
1148   .callout:before {
1149     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+");
1150     background-repeat: no-repeat;
1151     content: '';
1152     width: 1.2em;
1153     height: 1.2em;
1154     left: 8px;
1155     top: 50%;
1156     margin-top: -9px;
1157     display: inline-block;
1158     position: absolute;
1159     line-height: 1;
1160     opacity: 0.8; }
1161   .callout.success {
1162     border-left-color: #0f7d15;
1163     background-color: #eafdeb;
1164     color: #063409; }
1165   .callout.success:before {
1166     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+"); }
1167   .callout.danger {
1168     border-left-color: #ab0f0e;
1169     background-color: #fcdbdb;
1170     color: #4d0706; }
1171   .callout.danger:before {
1172     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="); }
1173   .callout.info {
1174     border-left-color: #0288D1;
1175     background-color: #d3efff;
1176     color: #01466c; }
1177   .callout.warning {
1178     border-left-color: #cf4d03;
1179     background-color: #fee3d3;
1180     color: #6a2802; }
1181   .callout.warning:before {
1182     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4="); }
1183
1184 /**
1185  * Card-style blocks
1186  */
1187 .card {
1188   background-color: #FFF;
1189   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
1190   border-radius: 3px;
1191   border: 1px solid transparent; }
1192   .card .body, .card p.empty-text {
1193     padding: 16px; }
1194   .card a, .card p {
1195     word-wrap: break-word;
1196     word-break: break-word; }
1197
1198 .card-title {
1199   padding: 16px 16px 6px;
1200   margin: 0;
1201   font-size: 14px;
1202   color: #222;
1203   fill: #222;
1204   font-weight: 400; }
1205
1206 .card-title a {
1207   line-height: 1; }
1208
1209 .card.border-card {
1210   border: 1px solid #DDD; }
1211
1212 .card.drag-card {
1213   border: 1px solid #DDD;
1214   border-radius: 4px;
1215   display: flex;
1216   padding: 0 0 0 40px;
1217   margin: 12px 0;
1218   position: relative; }
1219   .card.drag-card .drag-card-action {
1220     cursor: pointer; }
1221   .card.drag-card .handle, .card.drag-card .drag-card-action {
1222     display: flex;
1223     align-items: center;
1224     text-align: center;
1225     justify-content: center;
1226     width: 28px;
1227     flex-grow: 0;
1228     padding: 0 6px; }
1229     .card.drag-card .handle:hover, .card.drag-card .drag-card-action:hover {
1230       background-color: #EEE; }
1231     .card.drag-card .handle .svg-icon, .card.drag-card .drag-card-action .svg-icon {
1232       margin-right: 0px; }
1233   .card.drag-card > div .outline input {
1234     margin: 12px 0;
1235     width: 100%; }
1236   .card.drag-card .handle {
1237     background-color: #EEE;
1238     left: 0;
1239     position: absolute;
1240     top: 0;
1241     bottom: 0; }
1242   .card.drag-card > div {
1243     padding: 0 12px;
1244     max-width: 80%;
1245     flex: 1; }
1246
1247 .grid-card {
1248   display: flex;
1249   flex-direction: column;
1250   border: 1px solid #ddd;
1251   margin-bottom: 24px;
1252   border-radius: 4px;
1253   overflow: hidden;
1254   min-width: 100px;
1255   color: #444;
1256   transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms; }
1257   .grid-card:hover {
1258     color: #444;
1259     text-decoration: none;
1260     box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1); }
1261   .grid-card h2 {
1262     width: 100%;
1263     font-size: 1.5em;
1264     margin: 0 0 10px; }
1265   .grid-card p {
1266     font-size: .7rem;
1267     margin: 0;
1268     line-height: 1.6em; }
1269   .grid-card .grid-card-content {
1270     flex: 1;
1271     border-top: 0;
1272     border-bottom-width: 2px; }
1273   .grid-card .grid-card-content, .grid-card .grid-card-footer {
1274     padding: 24px; }
1275   .grid-card .grid-card-content + .grid-card-footer {
1276     padding-top: 0; }
1277
1278 .book-grid-item .grid-card-footer p.small {
1279   font-size: .8em;
1280   margin: 0; }
1281
1282 .content-wrap.card {
1283   padding: 16px 48px;
1284   margin-left: auto;
1285   margin-right: auto;
1286   margin-bottom: 32px;
1287   overflow: initial;
1288   min-height: 60vh; }
1289   .content-wrap.card.auto-height {
1290     min-height: 0; }
1291   .content-wrap.card.fill-width {
1292     width: 100%; }
1293
1294 @media screen and (max-width: 1400px) {
1295   .content-wrap.card {
1296     padding: 16px 32px; } }
1297
1298 @media screen and (max-width: 880px) {
1299   .content-wrap.card {
1300     padding: 16px 24px; } }
1301
1302 @media screen and (max-width: 600px) {
1303   .content-wrap.card {
1304     padding: 16px 16px; } }
1305
1306 /**
1307  * Tags
1308  */
1309 .tag-item {
1310   display: inline-flex;
1311   margin-bottom: 6px;
1312   margin-right: 6px;
1313   border-radius: 4px;
1314   border: 1px solid #CCC;
1315   overflow: hidden;
1316   font-size: 0.85em; }
1317   .tag-item a, .tag-item a:hover, .tag-item a:active {
1318     padding: 4px 8px;
1319     color: #777;
1320     transition: background-color ease-in-out 80ms;
1321     text-decoration: none; }
1322   .tag-item a:hover {
1323     background-color: rgba(255, 255, 255, 0.7); }
1324   .tag-item svg {
1325     fill: #888; }
1326   .tag-item .tag-value {
1327     border-left: 1px solid #DDD;
1328     background-color: rgba(255, 255, 255, 0.5); }
1329
1330 .tag-list div:last-child .tag-item {
1331   margin-bottom: 0; }
1332
1333 button {
1334   background-color: transparent;
1335   border: 0;
1336   font-size: 100%; }
1337
1338 .button {
1339   text-decoration: none;
1340   font-size: 0.85rem;
1341   line-height: 1.4em;
1342   padding: 7.8px 16px;
1343   margin-top: 6px;
1344   margin-bottom: 6px;
1345   display: inline-block;
1346   font-weight: 400;
1347   outline: 0;
1348   border-radius: 2px;
1349   cursor: pointer;
1350   transition: background-color ease-in-out 120ms, filter ease-in-out 120ms, box-shadow ease-in-out 120ms;
1351   box-shadow: none;
1352   background-color: var(--color-primary);
1353   color: #FFF;
1354   fill: #FFF;
1355   text-transform: uppercase;
1356   border: 1px solid var(--color-primary);
1357   vertical-align: top; }
1358   .button:hover, .button:focus, .button:active {
1359     background-color: var(--color-primary);
1360     text-decoration: none;
1361     color: #FFFFFF; }
1362   .button:hover {
1363     box-shadow: 0 0 4px 1px #CCC;
1364     filter: brightness(110%); }
1365   .button:focus {
1366     outline: 1px dotted currentColor;
1367     outline-offset: -6px;
1368     box-shadow: none;
1369     filter: brightness(90%); }
1370   .button:active {
1371     outline: 0; }
1372
1373 .button.outline {
1374   background-color: transparent;
1375   color: #666;
1376   fill: currentColor;
1377   border: 1px solid #CCC; }
1378   .button.outline:hover, .button.outline:focus, .button.outline:active {
1379     border: 1px solid #CCC;
1380     box-shadow: none;
1381     background-color: #F2F2F2;
1382     filter: none; }
1383   .button.outline:active {
1384     border-color: #BBB;
1385     background-color: #DDD;
1386     color: #666;
1387     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); }
1388
1389 .button + .button {
1390   margin-left: 12px; }
1391
1392 .button.small {
1393   font-size: 0.75rem;
1394   padding: 7.2px 12px; }
1395
1396 .text-button {
1397   cursor: pointer;
1398   background-color: transparent;
1399   padding: 0;
1400   margin: 0;
1401   border: none;
1402   user-select: none;
1403   font-size: 0.75rem;
1404   line-height: 1.4em;
1405   color: var(--color-primary);
1406   fill: var(--color-primary); }
1407   .text-button:active {
1408     outline: 0; }
1409   .text-button:hover {
1410     text-decoration: none; }
1411   .text-button:hover, .text-button:focus {
1412     color: var(--color-primary);
1413     fill: var(--color-primary); }
1414
1415 .button.block {
1416   width: 100%;
1417   text-align: left;
1418   display: block; }
1419
1420 .button.icon .svg-icon {
1421   margin-right: 0; }
1422
1423 .button.svg {
1424   padding: 12px 16px 10px 56px; }
1425   .button.svg svg {
1426     display: inline-block;
1427     position: absolute;
1428     left: 16px;
1429     top: 10px;
1430     width: 24px;
1431     height: 24px; }
1432
1433 .button[disabled] {
1434   background-color: #BBB;
1435   cursor: default;
1436   border-color: #CCC; }
1437   .button[disabled]:hover {
1438     background-color: #BBB;
1439     cursor: default;
1440     box-shadow: none; }
1441
1442 table {
1443   min-width: 100px;
1444   max-width: 100%; }
1445   table thead {
1446     background-color: #F8F8F8;
1447     font-weight: 500; }
1448   table td, table th {
1449     min-width: 10px;
1450     padding: 6px 8px;
1451     border: 1px solid #DDD;
1452     overflow: auto;
1453     line-height: 1.2; }
1454   table td p, table th p {
1455     margin: 0; }
1456
1457 table.table {
1458   width: 100%; }
1459   table.table tr td, table.table tr th {
1460     border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
1461   table.table th, table.table td {
1462     text-align: left;
1463     border: none;
1464     padding: 12px 12px;
1465     vertical-align: middle;
1466     margin: 0; }
1467   table.table th {
1468     font-weight: bold; }
1469   table.table tr:hover {
1470     background-color: #EEE; }
1471   table.table .text-right {
1472     text-align: right; }
1473   table.table .text-center {
1474     text-align: center; }
1475   table.table td.actions {
1476     overflow: visible; }
1477   table.table a {
1478     display: inline-block; }
1479
1480 table.no-style td {
1481   border: 0;
1482   padding: 0; }
1483
1484 table.list-table {
1485   margin: -6px; }
1486   table.list-table td {
1487     border: 0;
1488     vertical-align: middle;
1489     padding: 6px; }
1490
1491 .input-base, .fake-input, input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"],
1492 input[type="color"], input[type="password"], select, textarea {
1493   background-color: #FFF;
1494   border-radius: 3px;
1495   border: 1px solid #D4D4D4;
1496   display: inline-block;
1497   font-size: 12px;
1498   padding: 9px;
1499   color: #666;
1500   width: 250px;
1501   max-width: 100%; }
1502   .input-base.neg, .neg.fake-input, input.neg[type="text"], input.neg[type="number"], input.neg[type="email"], input.neg[type="date"], input.neg[type="search"], input.neg[type="url"],
1503   input.neg[type="color"], input.neg[type="password"], select.neg, textarea.neg, .input-base.invalid, .invalid.fake-input, input.invalid[type="text"], input.invalid[type="number"], input.invalid[type="email"], input.invalid[type="date"], input.invalid[type="search"], input.invalid[type="url"],
1504   input.invalid[type="color"], input.invalid[type="password"], select.invalid, textarea.invalid {
1505     border: 1px solid #ab0f0e; }
1506   .input-base.pos, .pos.fake-input, input.pos[type="text"], input.pos[type="number"], input.pos[type="email"], input.pos[type="date"], input.pos[type="search"], input.pos[type="url"],
1507   input.pos[type="color"], input.pos[type="password"], select.pos, textarea.pos, .input-base.valid, .valid.fake-input, input.valid[type="text"], input.valid[type="number"], input.valid[type="email"], input.valid[type="date"], input.valid[type="search"], input.valid[type="url"],
1508   input.valid[type="color"], input.valid[type="password"], select.valid, textarea.valid {
1509     border: 1px solid #0f7d15; }
1510   .input-base.disabled, .disabled.fake-input, input.disabled[type="text"], input.disabled[type="number"], input.disabled[type="email"], input.disabled[type="date"], input.disabled[type="search"], input.disabled[type="url"],
1511   input.disabled[type="color"], input.disabled[type="password"], select.disabled, textarea.disabled, .input-base[disabled], .fake-input[disabled], input[disabled][type="text"], input[disabled][type="number"], input[disabled][type="email"], input[disabled][type="date"], input[disabled][type="search"], input[disabled][type="url"],
1512   input[disabled][type="color"], input[disabled][type="password"], select[disabled], textarea[disabled] {
1513     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==); }
1514   .input-base:focus, .fake-input:focus, input:focus[type="text"], input:focus[type="number"], input:focus[type="email"], input:focus[type="date"], input:focus[type="search"], input:focus[type="url"],
1515   input:focus[type="color"], input:focus[type="password"], select:focus, textarea:focus {
1516     border-color: var(--color-primary);
1517     outline: 1px solid var(--color-primary); }
1518
1519 .fake-input {
1520   overflow: auto; }
1521
1522 #html-editor {
1523   display: none; }
1524
1525 #markdown-editor {
1526   position: relative;
1527   z-index: 5; }
1528   #markdown-editor #markdown-editor-input {
1529     font-style: normal;
1530     font-weight: 400;
1531     padding: 6px 16px;
1532     color: #444;
1533     border-radius: 0;
1534     max-height: 100%;
1535     flex: 1;
1536     border: 0;
1537     width: 100%; }
1538     #markdown-editor #markdown-editor-input:focus {
1539       outline: 0; }
1540   #markdown-editor .markdown-display, #markdown-editor .markdown-editor-wrap {
1541     flex: 1;
1542     position: relative; }
1543   #markdown-editor .markdown-editor-wrap {
1544     display: flex;
1545     flex-direction: column;
1546     border: 1px solid #DDD;
1547     width: 50%;
1548     max-width: 50%; }
1549
1550 @media screen and (max-width: 880px) {
1551   #markdown-editor {
1552     flex-direction: column; }
1553   #markdown-editor .markdown-editor-wrap {
1554     width: 100%;
1555     max-width: 100%; }
1556   #markdown-editor .editor-toolbar {
1557     padding: 0; }
1558   #markdown-editor .editor-toolbar > * {
1559     padding: 6px 12px; }
1560   .editor-toolbar-label {
1561     float: none !important;
1562     border-bottom: 1px solid #DDD;
1563     display: block; }
1564   .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
1565     display: none; }
1566   #markdown-editor .markdown-editor-wrap:not(.active) {
1567     flex-grow: 0;
1568     flex: none; } }
1569
1570 .markdown-display {
1571   margin-left: -1px; }
1572
1573 .markdown-editor-display {
1574   background-color: #FFFFFF; }
1575   .markdown-editor-display body {
1576     background-color: #FFFFFF;
1577     padding-left: 16px;
1578     padding-right: 16px; }
1579   .markdown-editor-display [drawio-diagram]:hover {
1580     outline: 2px solid var(--color-primary); }
1581
1582 .editor-toolbar {
1583   width: 100%;
1584   padding: 6px 16px;
1585   font-size: 11px;
1586   line-height: 1.6;
1587   border-bottom: 1px solid #DDD;
1588   background-color: #EEE;
1589   flex: none; }
1590   .editor-toolbar:after {
1591     content: '';
1592     display: block;
1593     clear: both; }
1594
1595 label {
1596   display: block;
1597   line-height: 1.4em;
1598   font-size: 0.94em;
1599   font-weight: 400;
1600   color: #666;
1601   padding-bottom: 2px;
1602   margin-bottom: 0.2em; }
1603   label.inline {
1604     display: inline-block; }
1605
1606 label.radio, label.checkbox {
1607   font-weight: 400;
1608   user-select: none; }
1609   label.radio input[type="radio"], label.radio input[type="checkbox"], label.checkbox input[type="radio"], label.checkbox input[type="checkbox"] {
1610     margin-right: 6px; }
1611
1612 label.inline.checkbox {
1613   margin-right: 16px; }
1614
1615 label + p.small {
1616   margin-bottom: 0.8em; }
1617
1618 table.form-table {
1619   max-width: 100%; }
1620   table.form-table td {
1621     overflow: hidden;
1622     padding: 1.5px 0; }
1623
1624 input[type=date] {
1625   width: 190px; }
1626
1627 input[type=color] {
1628   height: 60px; }
1629
1630 .toggle-switch {
1631   user-select: none;
1632   display: inline-grid;
1633   grid-template-columns: 28px 1fr;
1634   align-items: center;
1635   margin: 16px 0; }
1636   .toggle-switch .custom-checkbox {
1637     width: 16px;
1638     height: 16px;
1639     border-radius: 2px;
1640     display: inline-block;
1641     border: 2px solid currentColor;
1642     opacity: 0.6;
1643     overflow: hidden;
1644     fill: currentColor; }
1645     .toggle-switch .custom-checkbox .svg-icon {
1646       width: 100%;
1647       height: 100%;
1648       margin: 0;
1649       bottom: auto;
1650       top: -1.5px;
1651       left: 0;
1652       transition: transform ease-in-out 120ms;
1653       transform: scale(0);
1654       transform-origin: center center; }
1655   .toggle-switch input[type=checkbox] {
1656     display: none; }
1657   .toggle-switch input[type=checkbox]:checked + .custom-checkbox .svg-icon {
1658     transform: scale(1); }
1659   .toggle-switch .custom-checkbox:hover {
1660     background-color: rgba(0, 0, 0, 0.05);
1661     opacity: 0.8; }
1662
1663 .toggle-switch-list .toggle-switch {
1664   margin: 6px 0; }
1665
1666 .toggle-switch-list.compact .toggle-switch {
1667   margin: 1px 0; }
1668
1669 .form-group {
1670   margin-bottom: 12px; }
1671
1672 .setting-list > div {
1673   border-bottom: 1px solid #DDD;
1674   padding: 32px 0; }
1675   .setting-list > div:last-child {
1676     border-bottom: none; }
1677
1678 .setting-list-label {
1679   color: #222;
1680   font-size: 1rem; }
1681
1682 .setting-list-label + p.small {
1683   margin-bottom: 0; }
1684
1685 .setting-list-label + .grid {
1686   margin-top: 16px; }
1687
1688 .setting-list .grid input[type=text], .setting-list .grid input[type=email], .setting-list .grid input[type=password], .setting-list .grid select, .stretch-inputs input[type=text], .stretch-inputs input[type=email], .stretch-inputs input[type=password], .stretch-inputs select {
1689   width: 100%; }
1690
1691 .simple-code-input {
1692   background-color: #F8F8F8;
1693   font-family: monospace;
1694   font-size: 12px;
1695   min-height: 100px;
1696   display: block;
1697   width: 100%; }
1698
1699 .form-group div.text-pos, .form-group div.text-neg, .form-group p.text-post, .form-group p.text-neg {
1700   padding: 6px 0; }
1701
1702 .form-group[collapsible] {
1703   padding: 0 16px;
1704   border: 1px solid #DDD;
1705   border-radius: 4px; }
1706   .form-group[collapsible] .collapse-title {
1707     margin-left: -16px;
1708     margin-right: -16px;
1709     padding: 12px 16px;
1710     display: block;
1711     width: calc(100% + 32px);
1712     text-align: left; }
1713   .form-group[collapsible] .collapse-title, .form-group[collapsible] .collapse-title label {
1714     cursor: pointer; }
1715   .form-group[collapsible] .collapse-title label {
1716     padding-bottom: 0;
1717     margin-bottom: 0;
1718     color: inherit; }
1719   .form-group[collapsible] .collapse-title label:before {
1720     display: inline-block;
1721     content: '▸';
1722     margin-right: 16px;
1723     transition: all ease-in-out 400ms;
1724     transform: rotate(0); }
1725   .form-group[collapsible] .collapse-content {
1726     display: none;
1727     padding-bottom: 16px; }
1728   .form-group[collapsible].open .collapse-title label:before {
1729     transform: rotate(90deg); }
1730
1731 .inline-input-style, .title-input input[type="text"], .description-input textarea {
1732   display: block;
1733   width: 100%;
1734   padding: 12px; }
1735
1736 .title-input input[type="text"] {
1737   margin-top: 0;
1738   font-size: 2em; }
1739
1740 .title-input.page-title {
1741   font-size: 0.8em; }
1742   .title-input.page-title .input {
1743     border: 0;
1744     margin-bottom: -1px; }
1745   .title-input.page-title input[type="text"] {
1746     max-width: 840px;
1747     margin: 0 auto;
1748     border: none; }
1749
1750 .page-title input {
1751   display: block;
1752   width: 100%;
1753   font-size: 1.4em; }
1754
1755 .description-input textarea {
1756   font-size: 14px;
1757   color: #666;
1758   width: 100%; }
1759
1760 div[editor-type="markdown"] .title-input.page-title input[type="text"] {
1761   max-width: 100%; }
1762
1763 .search-box {
1764   max-width: 100%;
1765   position: relative; }
1766   .search-box button {
1767     background-color: transparent;
1768     border: none;
1769     fill: #666;
1770     padding: 0;
1771     cursor: pointer;
1772     position: absolute;
1773     left: 8px;
1774     top: 9px; }
1775   .search-box input {
1776     display: block;
1777     padding-left: 28px;
1778     width: 300px;
1779     max-width: 100%; }
1780   .search-box.flexible input {
1781     width: 100%; }
1782   .search-box .search-box-cancel {
1783     left: auto;
1784     right: 0; }
1785
1786 .outline > input {
1787   border: 0;
1788   border-bottom: 2px solid #DDD;
1789   border-radius: 0; }
1790   .outline > input:focus, .outline > input:active {
1791     border: 0;
1792     border-bottom: 2px solid #AAA;
1793     outline: 0; }
1794
1795 .image-picker img {
1796   background-color: #BBB;
1797   max-width: 100%; }
1798
1799 .custom-file-input {
1800   overflow: hidden;
1801   padding: 0;
1802   position: absolute;
1803   white-space: nowrap;
1804   width: 1px;
1805   height: 1px;
1806   border: 0;
1807   clip: rect(0, 0, 0, 0); }
1808
1809 .custom-file-input:focus + label {
1810   border-color: var(--color-primary);
1811   outline: 1px solid var(--color-primary); }
1812
1813 .anim.fadeIn {
1814   opacity: 0;
1815   animation-name: fadeIn;
1816   animation-duration: 180ms;
1817   animation-timing-function: ease-in-out;
1818   animation-fill-mode: forwards; }
1819
1820 @keyframes fadeIn {
1821   0% {
1822     opacity: 0; }
1823   100% {
1824     opacity: 1; } }
1825
1826 .anim.searchResult {
1827   opacity: 0;
1828   transform: translate3d(580px, 0, 0);
1829   animation-name: searchResult;
1830   animation-duration: 220ms;
1831   animation-fill-mode: forwards;
1832   animation-timing-function: cubic-bezier(0.62, 0.28, 0.23, 0.99); }
1833
1834 @keyframes searchResult {
1835   0% {
1836     opacity: 0;
1837     transform: translate3d(400px, 0, 0); }
1838   100% {
1839     opacity: 1;
1840     transform: translate3d(0, 0, 0); } }
1841
1842 @keyframes loadingBob {
1843   0% {
1844     transform: translate3d(0, 0, 0); }
1845   30% {
1846     transform: translate3d(0, 0, 0); }
1847   50% {
1848     transform: translate3d(0, -10px, 0); }
1849   70% {
1850     transform: translate3d(0, 0, 0); }
1851   100% {
1852     transform: translate3d(0, 0, 0); } }
1853
1854 @keyframes pointer {
1855   0% {
1856     transform: translate3d(0, 20px, 0) scale3d(0, 0, 0); }
1857   100% {
1858     transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } }
1859
1860 .anim.pointer {
1861   transform-origin: 50% 100%;
1862   animation-name: pointer;
1863   animation-duration: 180ms;
1864   animation-delay: 0s;
1865   animation-timing-function: cubic-bezier(0.62, 0.28, 0.23, 0.99); }
1866
1867 .mce-tinymce.mce-container.mce-fullscreen {
1868   position: fixed;
1869   top: 0;
1870   height: 100%;
1871   width: 100%;
1872   max-width: 100%;
1873   z-index: 100; }
1874
1875 .mce-tinymce .mce-panel {
1876   background-color: #FFF; }
1877
1878 .mce-tinymce .mce-btn {
1879   background-color: #FFF; }
1880
1881 .mce-container-body.mce-flow-layout {
1882   text-align: center; }
1883
1884 @media screen and (max-width: 1000px) {
1885   .mce-container-body.mce-flow-layout {
1886     overflow-x: scroll;
1887     white-space: nowrap; } }
1888
1889 .edit-area.flex > div > .mce-tinymce.mce-container.mce-panel {
1890   flex: 1 1 auto;
1891   display: flex !important;
1892   flex-direction: column;
1893   align-items: stretch;
1894   margin: 0 -1px; }
1895   .edit-area.flex > div > .mce-tinymce.mce-container.mce-panel > .mce-container-body {
1896     flex: 1 1 auto;
1897     display: flex !important;
1898     flex-direction: column;
1899     align-items: stretch; }
1900     .edit-area.flex > div > .mce-tinymce.mce-container.mce-panel > .mce-container-body > .mce-toolbar-grp {
1901       flex: 0 1 auto; }
1902     .edit-area.flex > div > .mce-tinymce.mce-container.mce-panel > .mce-container-body > .mce-edit-area {
1903       flex: 1 1 auto;
1904       display: flex !important;
1905       flex-direction: column;
1906       align-items: stretch;
1907       -webkit-overflow-scrolling: touch;
1908       overflow: auto; }
1909       .edit-area.flex > div > .mce-tinymce.mce-container.mce-panel > .mce-container-body > .mce-edit-area iframe {
1910         flex: 1; }
1911
1912 .page-content.mce-content-body p {
1913   line-height: 1.6; }
1914
1915 .page-content.mce-content-body {
1916   padding-top: 16px;
1917   outline: none; }
1918
1919 .mce-colorbtn-trans {
1920   overflow: hidden; }
1921
1922 .mce-content-body .CodeMirrorContainer > .CodeMirror {
1923   pointer-events: none; }
1924
1925 /* BASICS */
1926 .CodeMirror {
1927   /* Set height, width, borders, and global font properties here */
1928   height: 300px;
1929   color: black; }
1930
1931 /* PADDING */
1932 .CodeMirror-lines {
1933   padding: 4px 0;
1934   /* Vertical padding around content */ }
1935
1936 .CodeMirror pre {
1937   padding: 0 4px;
1938   /* Horizontal padding of content */ }
1939
1940 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
1941   background-color: white;
1942   /* The little square between H and V scrollbars */ }
1943
1944 /* GUTTER */
1945 .CodeMirror-gutters {
1946   border-right: 1px solid #ddd;
1947   background-color: #f7f7f7;
1948   white-space: nowrap; }
1949
1950 .CodeMirror-linenumber {
1951   padding: 0 3px 0 5px;
1952   min-width: 20px;
1953   text-align: right;
1954   color: #999;
1955   white-space: nowrap; }
1956
1957 .CodeMirror-guttermarker {
1958   color: black; }
1959
1960 .CodeMirror-guttermarker-subtle {
1961   color: #999; }
1962
1963 /* CURSOR */
1964 .CodeMirror-cursor {
1965   border-left: 1px solid black;
1966   border-right: none;
1967   width: 0; }
1968
1969 /* Shown when moving in bi-directional text */
1970 .CodeMirror div.CodeMirror-secondarycursor {
1971   border-left: 1px solid silver; }
1972
1973 .cm-fat-cursor .CodeMirror-cursor {
1974   width: auto;
1975   border: 0 !important;
1976   background: #7e7; }
1977
1978 .cm-fat-cursor div.CodeMirror-cursors {
1979   z-index: 1; }
1980
1981 .cm-animate-fat-cursor {
1982   width: auto;
1983   border: 0;
1984   -webkit-animation: blink 1.06s steps(1) infinite;
1985   -moz-animation: blink 1.06s steps(1) infinite;
1986   animation: blink 1.06s steps(1) infinite;
1987   background-color: #7e7; }
1988
1989 @-moz-keyframes blink {
1990   0% { }
1991   50% {
1992     background-color: transparent; }
1993   100% { } }
1994
1995 @-webkit-keyframes blink {
1996   0% { }
1997   50% {
1998     background-color: transparent; }
1999   100% { } }
2000
2001 @keyframes blink {
2002   0% { }
2003   50% {
2004     background-color: transparent; }
2005   100% { } }
2006
2007 /* Can style cursor different in overwrite (non-insert) mode */
2008 .cm-tab {
2009   display: inline-block;
2010   text-decoration: inherit; }
2011
2012 .CodeMirror-rulers {
2013   position: absolute;
2014   left: 0;
2015   right: 0;
2016   top: -50px;
2017   bottom: -20px;
2018   overflow: hidden; }
2019
2020 .CodeMirror-ruler {
2021   border-left: 1px solid #ccc;
2022   top: 0;
2023   bottom: 0;
2024   position: absolute; }
2025
2026 /* DEFAULT THEME */
2027 .cm-s-default .cm-header {
2028   color: blue; }
2029
2030 .cm-s-default .cm-quote {
2031   color: #090; }
2032
2033 .cm-negative {
2034   color: #d44; }
2035
2036 .cm-positive {
2037   color: #292; }
2038
2039 .cm-header, .cm-strong {
2040   font-weight: bold; }
2041
2042 .cm-em {
2043   font-style: italic; }
2044
2045 .cm-link {
2046   text-decoration: underline; }
2047
2048 .cm-strikethrough {
2049   text-decoration: line-through; }
2050
2051 .cm-s-default .cm-keyword {
2052   color: #708; }
2053
2054 .cm-s-default .cm-atom {
2055   color: #219; }
2056
2057 .cm-s-default .cm-number {
2058   color: #164; }
2059
2060 .cm-s-default .cm-def {
2061   color: #00f; }
2062
2063 .cm-s-default .cm-variable-2 {
2064   color: #05a; }
2065
2066 .cm-s-default .cm-variable-3 {
2067   color: #085; }
2068
2069 .cm-s-default .cm-comment {
2070   color: #a50; }
2071
2072 .cm-s-default .cm-string {
2073   color: #a11; }
2074
2075 .cm-s-default .cm-string-2 {
2076   color: #f50; }
2077
2078 .cm-s-default .cm-meta {
2079   color: #555; }
2080
2081 .cm-s-default .cm-qualifier {
2082   color: #555; }
2083
2084 .cm-s-default .cm-builtin {
2085   color: #30a; }
2086
2087 .cm-s-default .cm-bracket {
2088   color: #997; }
2089
2090 .cm-s-default .cm-tag {
2091   color: #170; }
2092
2093 .cm-s-default .cm-attribute {
2094   color: #00c; }
2095
2096 .cm-s-default .cm-hr {
2097   color: #999; }
2098
2099 .cm-s-default .cm-link {
2100   color: #00c; }
2101
2102 .cm-s-default .cm-error {
2103   color: #f00; }
2104
2105 .cm-invalidchar {
2106   color: #f00; }
2107
2108 .CodeMirror-composing {
2109   border-bottom: 2px solid; }
2110
2111 /* Default styles for common addons */
2112 div.CodeMirror span.CodeMirror-matchingbracket {
2113   color: #0f0; }
2114
2115 div.CodeMirror span.CodeMirror-nonmatchingbracket {
2116   color: #f22; }
2117
2118 .CodeMirror-matchingtag {
2119   background: rgba(255, 150, 0, 0.3); }
2120
2121 .CodeMirror-activeline-background {
2122   background: #e8f2ff; }
2123
2124 /* STOP */
2125 /* The rest of this file contains styles related to the mechanics of
2126    the editor. You probably shouldn't touch them. */
2127 .CodeMirror {
2128   position: relative;
2129   overflow: hidden;
2130   background: white; }
2131
2132 .CodeMirror-scroll {
2133   overflow: scroll !important;
2134   /* Things will break if this is overridden */
2135   /* 30px is the magic margin used to hide the element's real scrollbars */
2136   /* See overflow: hidden in .CodeMirror */
2137   margin-bottom: -30px;
2138   margin-right: -30px;
2139   padding-bottom: 30px;
2140   height: 100%;
2141   outline: none;
2142   /* Prevent dragging from highlighting the element */
2143   position: relative; }
2144
2145 .CodeMirror-sizer {
2146   position: relative;
2147   border-right: 30px solid transparent; }
2148
2149 /* The fake, visible scrollbars. Used to force redraw during scrolling
2150    before actual scrolling happens, thus preventing shaking and
2151    flickering artifacts. */
2152 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
2153   position: absolute;
2154   z-index: 6;
2155   display: none; }
2156
2157 .CodeMirror-vscrollbar {
2158   right: 0;
2159   top: 0;
2160   overflow-x: hidden;
2161   overflow-y: scroll; }
2162
2163 .CodeMirror-hscrollbar {
2164   bottom: 0;
2165   left: 0;
2166   overflow-y: hidden;
2167   overflow-x: scroll; }
2168
2169 .CodeMirror-scrollbar-filler {
2170   right: 0;
2171   bottom: 0; }
2172
2173 .CodeMirror-gutter-filler {
2174   left: 0;
2175   bottom: 0; }
2176
2177 .CodeMirror-gutters {
2178   position: absolute;
2179   left: 0;
2180   top: 0;
2181   min-height: 100%;
2182   z-index: 3; }
2183
2184 .CodeMirror-gutter {
2185   white-space: normal;
2186   height: 100%;
2187   display: inline-block;
2188   vertical-align: top;
2189   margin-bottom: -30px; }
2190
2191 .CodeMirror-gutter-wrapper {
2192   position: absolute;
2193   z-index: 4;
2194   background: none !important;
2195   border: none !important; }
2196
2197 .CodeMirror-gutter-background {
2198   position: absolute;
2199   top: 0;
2200   bottom: 0;
2201   z-index: 4; }
2202
2203 .CodeMirror-gutter-elt {
2204   position: absolute;
2205   cursor: default;
2206   z-index: 4; }
2207
2208 .CodeMirror-gutter-wrapper ::selection {
2209   background-color: transparent; }
2210
2211 .CodeMirror-gutter-wrapper ::-moz-selection {
2212   background-color: transparent; }
2213
2214 .CodeMirror-lines {
2215   cursor: text;
2216   min-height: 1px;
2217   /* prevents collapsing before first draw */ }
2218
2219 .CodeMirror pre {
2220   /* Reset some styles that the rest of the page might have set */
2221   -moz-border-radius: 0;
2222   -webkit-border-radius: 0;
2223   border-radius: 0;
2224   border-width: 0;
2225   background: transparent;
2226   font-size: inherit;
2227   margin: 0;
2228   white-space: pre;
2229   word-wrap: normal;
2230   line-height: inherit;
2231   color: inherit;
2232   z-index: 2;
2233   position: relative;
2234   overflow: visible;
2235   -webkit-tap-highlight-color: transparent;
2236   -webkit-font-variant-ligatures: contextual;
2237   font-variant-ligatures: contextual; }
2238   .CodeMirror pre:after {
2239     content: none;
2240     display: none; }
2241
2242 .CodeMirror-wrap pre {
2243   word-wrap: break-word;
2244   white-space: pre-wrap;
2245   word-break: normal; }
2246
2247 .CodeMirror-linebackground {
2248   position: absolute;
2249   left: 0;
2250   right: 0;
2251   top: 0;
2252   bottom: 0;
2253   z-index: 0; }
2254
2255 .CodeMirror-linewidget {
2256   position: relative;
2257   z-index: 2;
2258   overflow: auto; }
2259
2260 .CodeMirror-rtl pre {
2261   direction: rtl; }
2262
2263 .CodeMirror-code {
2264   outline: none; }
2265
2266 /* Force content-box sizing for the elements where we expect it */
2267 .CodeMirror-scroll,
2268 .CodeMirror-sizer,
2269 .CodeMirror-gutter,
2270 .CodeMirror-gutters,
2271 .CodeMirror-linenumber {
2272   -moz-box-sizing: content-box;
2273   box-sizing: content-box; }
2274
2275 .CodeMirror-measure {
2276   position: absolute;
2277   width: 100%;
2278   height: 0;
2279   overflow: hidden;
2280   visibility: hidden; }
2281
2282 .CodeMirror-cursor {
2283   position: absolute;
2284   pointer-events: none; }
2285
2286 .CodeMirror-measure pre {
2287   position: static; }
2288
2289 div.CodeMirror-cursors {
2290   visibility: hidden;
2291   position: relative;
2292   z-index: 3; }
2293
2294 div.CodeMirror-dragcursors {
2295   visibility: visible; }
2296
2297 .CodeMirror-focused div.CodeMirror-cursors {
2298   visibility: visible; }
2299
2300 .CodeMirror-selected {
2301   background: #d9d9d9; }
2302
2303 .CodeMirror-focused .CodeMirror-selected {
2304   background: #d7d4f0; }
2305
2306 .CodeMirror-crosshair {
2307   cursor: crosshair; }
2308
2309 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
2310   background: #d7d4f0; }
2311
2312 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
2313   background: #d7d4f0; }
2314
2315 .cm-searching {
2316   background: #ffa;
2317   background: rgba(255, 255, 0, 0.4); }
2318
2319 /* Used to force a border model for a node */
2320 .cm-force-border {
2321   padding-right: .1px; }
2322
2323 @media print {
2324   /* Hide the cursor when printing */
2325   .CodeMirror div.CodeMirror-cursors {
2326     visibility: hidden; } }
2327
2328 /* See issue #2901 */
2329 .cm-tab-wrap-hack:after {
2330   content: ''; }
2331
2332 /* Help users use markselection to safely style text background */
2333 span.CodeMirror-selectedtext {
2334   background: none; }
2335
2336 /*
2337
2338     Name:       Base16 Default Light
2339     Author:     Chris Kempson (http://chriskempson.com)
2340
2341     CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
2342     Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
2343
2344 */
2345 .cm-s-base16-light.CodeMirror {
2346   background: #f8f8f8;
2347   color: #444444; }
2348
2349 .cm-s-base16-light div.CodeMirror-selected {
2350   background: #e0e0e0; }
2351
2352 .cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection {
2353   background: #e0e0e0; }
2354
2355 .cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection {
2356   background: #e0e0e0; }
2357
2358 .cm-s-base16-light .CodeMirror-gutters {
2359   background: #f5f5f5;
2360   border-right: 0px; }
2361
2362 .cm-s-base16-light .CodeMirror-guttermarker {
2363   color: #ac4142; }
2364
2365 .cm-s-base16-light .CodeMirror-guttermarker-subtle {
2366   color: #b0b0b0; }
2367
2368 .cm-s-base16-light .CodeMirror-linenumber {
2369   color: #b0b0b0; }
2370
2371 .cm-s-base16-light .CodeMirror-cursor {
2372   border-left: 1px solid #505050; }
2373
2374 .cm-s-base16-light span.cm-comment {
2375   color: #8f5536; }
2376
2377 .cm-s-base16-light span.cm-atom {
2378   color: #aa759f; }
2379
2380 .cm-s-base16-light span.cm-number {
2381   color: #aa759f; }
2382
2383 .cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute {
2384   color: #678c30; }
2385
2386 .cm-s-base16-light span.cm-keyword {
2387   color: #ac4142; }
2388
2389 .cm-s-base16-light span.cm-string {
2390   color: #e09c3c; }
2391
2392 .cm-s-base16-light span.cm-builtin {
2393   color: #4c7f9e; }
2394
2395 .cm-s-base16-light span.cm-variable {
2396   color: #90a959; }
2397
2398 .cm-s-base16-light span.cm-variable-2 {
2399   color: #6a9fb5; }
2400
2401 .cm-s-base16-light span.cm-def {
2402   color: #d28445; }
2403
2404 .cm-s-base16-light span.cm-bracket {
2405   color: #202020; }
2406
2407 .cm-s-base16-light span.cm-tag {
2408   color: #ac4142; }
2409
2410 .cm-s-base16-light span.cm-link {
2411   color: #aa759f; }
2412
2413 .cm-s-base16-light span.cm-error {
2414   background: #ac4142;
2415   color: #505050; }
2416
2417 .cm-s-base16-light .CodeMirror-activeline-background {
2418   background: #DDDCDC; }
2419
2420 .cm-s-base16-light .CodeMirror-matchingbracket {
2421   text-decoration: underline;
2422   color: white !important; }
2423
2424 /**
2425  * Custom BookStack overrides
2426  */
2427 .CodeMirror, .CodeMirror pre {
2428   font-size: 12px; }
2429
2430 .CodeMirror {
2431   font-size: 12px;
2432   height: auto;
2433   margin-bottom: 24px;
2434   border: 1px solid #DDD; }
2435
2436 .cm-s-base16-light .CodeMirror-gutters {
2437   background: #f5f5f5;
2438   border-right: 1px solid #DDD; }
2439
2440 .code-fill .CodeMirror {
2441   position: absolute;
2442   top: 0;
2443   bottom: 0;
2444   left: 0;
2445   width: 100%;
2446   height: 100%; }
2447
2448 /**
2449  * Custom Copy Button
2450  */
2451 .CodeMirror-copy {
2452   position: absolute;
2453   top: -1px;
2454   right: -1px;
2455   background-color: #EEE;
2456   padding: 6px;
2457   line-height: 0;
2458   border: 1px solid #DDD;
2459   cursor: pointer;
2460   fill: #444;
2461   z-index: 5;
2462   transition: all ease-in 240ms;
2463   user-select: none;
2464   opacity: 0;
2465   pointer-events: none; }
2466   .CodeMirror-copy svg {
2467     transition: transform ease-in 240ms;
2468     transform: translateY(0); }
2469   .CodeMirror-copy.success {
2470     background-color: #14ab1d;
2471     fill: #FFF; }
2472     .CodeMirror-copy.success svg {
2473       transform: translateY(-3px); }
2474
2475 .CodeMirror:hover .CodeMirror-copy {
2476   user-select: all;
2477   opacity: 1;
2478   pointer-events: all; }
2479
2480 [notification] {
2481   position: fixed;
2482   top: 0;
2483   right: 0;
2484   margin: 32px;
2485   padding: 16px 24px;
2486   background-color: #FFF;
2487   border-radius: 4px;
2488   border-left: 6px solid currentColor;
2489   box-shadow: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
2490   z-index: 999999;
2491   cursor: pointer;
2492   max-width: 360px;
2493   transition: transform ease-in-out 280ms;
2494   transform: translateX(580px);
2495   display: grid;
2496   grid-template-columns: 42px 1fr;
2497   color: #444;
2498   font-weight: 700; }
2499   [notification] span, [notification] svg {
2500     vertical-align: middle;
2501     justify-self: center;
2502     align-self: center; }
2503   [notification] svg {
2504     width: 2.8rem;
2505     height: 2.8rem;
2506     padding-right: 12px;
2507     fill: currentColor; }
2508   [notification] span {
2509     vertical-align: middle;
2510     line-height: 1.3; }
2511   [notification].pos {
2512     color: #0f7d15; }
2513   [notification].neg {
2514     color: #ab0f0e; }
2515   [notification].warning {
2516     color: #cf4d03; }
2517   [notification].showing {
2518     transform: translateX(0); }
2519   [notification].showing:hover {
2520     transform: translate3d(0, -2px, 0); }
2521
2522 [chapter-toggle] {
2523   cursor: pointer;
2524   margin: 0;
2525   transition: all ease-in-out 180ms;
2526   user-select: none; }
2527   [chapter-toggle] svg[data-icon="caret-right"] {
2528     margin-right: 0;
2529     font-size: 1rem;
2530     transition: all ease-in-out 180ms;
2531     transform: rotate(0deg);
2532     transform-origin: 50% 50%; }
2533   [chapter-toggle].open svg[data-icon="caret-right"] {
2534     transform: rotate(90deg); }
2535   [chapter-toggle] svg[data-icon="caret-right"] + * {
2536     margin-left: 6px; }
2537
2538 [overlay] {
2539   background-color: rgba(0, 0, 0, 0.333);
2540   position: fixed;
2541   z-index: 95536;
2542   width: 100%;
2543   height: 100%;
2544   min-width: 100%;
2545   min-height: 100%;
2546   top: 0;
2547   left: 0;
2548   right: 0;
2549   bottom: 0;
2550   align-items: center;
2551   justify-content: center;
2552   display: none; }
2553
2554 .popup-body-wrap {
2555   display: flex; }
2556
2557 .popup-body {
2558   background-color: #FFF;
2559   max-height: 90%;
2560   width: 1200px;
2561   height: auto;
2562   margin: 2% 5%;
2563   border-radius: 4px;
2564   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
2565   overflow: hidden;
2566   z-index: 999;
2567   display: flex;
2568   flex-direction: column; }
2569   .popup-body.small {
2570     margin: 2% auto;
2571     width: 800px;
2572     max-width: 90%; }
2573   .popup-body:before {
2574     display: flex;
2575     align-self: flex-start; }
2576   .popup-body .popup-content {
2577     overflow-y: auto; }
2578   .popup-body:focus {
2579     outline: 0; }
2580
2581 .popup-footer button, .popup-header-close {
2582   position: absolute;
2583   top: 0;
2584   right: 0;
2585   margin: 0;
2586   height: 40px;
2587   border-radius: 0;
2588   box-shadow: none; }
2589   .popup-footer button:active, .popup-header-close:active {
2590     outline: 0; }
2591
2592 .popup-header-close {
2593   background-color: transparent;
2594   border: 0;
2595   color: #FFF;
2596   font-size: 16px;
2597   padding: 0 16px; }
2598
2599 .popup-header, .popup-footer {
2600   display: block !important;
2601   position: relative;
2602   height: 40px;
2603   flex: none !important; }
2604   .popup-header .popup-title, .popup-footer .popup-title {
2605     color: #FFF;
2606     padding: 8px 16px; }
2607
2608 body.flexbox-support #entity-selector-wrap .popup-body .form-group {
2609   height: 444px;
2610   min-height: 444px; }
2611
2612 #entity-selector-wrap .popup-body .form-group {
2613   margin: 0; }
2614
2615 .popup-body .entity-selector-container {
2616   flex: 1; }
2617
2618 .image-manager-body {
2619   min-height: 70vh; }
2620
2621 .dropzone-container {
2622   position: relative;
2623   background-color: #EEE;
2624   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); }
2625
2626 .image-manager-list .image {
2627   display: block;
2628   position: relative;
2629   border-radius: 0;
2630   float: left;
2631   margin: 0;
2632   cursor: pointer;
2633   width: 16.66667%;
2634   height: auto;
2635   border: 1px solid #DDD;
2636   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
2637   transition: all cubic-bezier(0.4, 0, 1, 1) 160ms;
2638   overflow: hidden; }
2639   .image-manager-list .image.selected {
2640     border: 4px solid #FFF;
2641     overflow: hidden;
2642     border-radius: 8px;
2643     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
2644   .image-manager-list .image img {
2645     width: 100%;
2646     max-width: 100%;
2647     display: block; }
2648   .image-manager-list .image .image-meta {
2649     position: absolute;
2650     width: 100%;
2651     bottom: 0;
2652     left: 0;
2653     color: #EEE;
2654     background-color: rgba(0, 0, 0, 0.4);
2655     font-size: 10px;
2656     padding: 3px 4px; }
2657     .image-manager-list .image .image-meta span {
2658       display: block; }
2659   @media screen and (max-width: 1100px) {
2660     .image-manager-list .image {
2661       width: 25%; } }
2662   @media screen and (max-width: 880px) {
2663     .image-manager-list .image .image-meta {
2664       display: none; } }
2665
2666 #image-manager .load-more {
2667   display: block;
2668   text-align: center;
2669   background-color: #EEE;
2670   padding: 12px 16px;
2671   color: #AAA;
2672   clear: both;
2673   font-size: 20px;
2674   cursor: pointer;
2675   font-style: italic; }
2676
2677 .image-manager-sidebar {
2678   width: 300px;
2679   overflow-y: auto;
2680   overflow-x: hidden;
2681   border-left: 1px solid #DDD; }
2682   .image-manager-sidebar .inner {
2683     padding: 16px; }
2684   .image-manager-sidebar img {
2685     max-width: 100%;
2686     max-height: 180px;
2687     display: block;
2688     margin: 0 auto 16px auto;
2689     box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3); }
2690   .image-manager-sidebar .image-manager-viewer {
2691     height: 196px;
2692     display: flex;
2693     align-items: center;
2694     justify-content: center; }
2695     .image-manager-sidebar .image-manager-viewer a {
2696       display: inline-block; }
2697   .image-manager-sidebar .dropzone-container {
2698     border-bottom: 1px solid #DDD; }
2699
2700 .image-manager-list {
2701   overflow-y: scroll;
2702   flex: 1; }
2703
2704 .image-manager-content {
2705   display: flex;
2706   flex-direction: column;
2707   flex: 1; }
2708   .image-manager-content .container {
2709     width: 100%; }
2710   .image-manager-content .full-tab {
2711     text-align: center; }
2712
2713 /*
2714  * The MIT License
2715  * Copyright (c) 2012 Matias Meno <[email protected]>
2716  */
2717 .dz-message {
2718   font-size: 1em;
2719   line-height: 2.35;
2720   font-style: italic;
2721   color: #888;
2722   text-align: center;
2723   cursor: pointer;
2724   padding: 24px 16px;
2725   transition: all ease-in-out 120ms; }
2726
2727 .dz-drag-hover .dz-message {
2728   background-color: #107ed2;
2729   color: #EEE; }
2730
2731 @keyframes passing-through {
2732   0% {
2733     opacity: 0;
2734     transform: translateY(40px); }
2735   30%, 70% {
2736     opacity: 1;
2737     transform: translateY(0px); }
2738   100% {
2739     opacity: 0;
2740     transform: translateY(-40px); } }
2741
2742 @keyframes slide-in {
2743   0% {
2744     opacity: 0;
2745     transform: translateY(40px); }
2746   30% {
2747     opacity: 1;
2748     transform: translateY(0px); } }
2749
2750 @keyframes pulse {
2751   0% {
2752     transform: scale(1); }
2753   10% {
2754     transform: scale(1.1); }
2755   20% {
2756     transform: scale(1); } }
2757
2758 .dropzone, .dropzone * {
2759   box-sizing: border-box; }
2760
2761 .dz-preview {
2762   position: relative;
2763   display: inline-block;
2764   vertical-align: top;
2765   margin: 12px;
2766   min-height: 80px; }
2767
2768 .dz-preview:hover {
2769   z-index: 1000; }
2770
2771 .dz-preview:hover .dz-details {
2772   opacity: 1; }
2773
2774 .dz-preview.dz-file-preview .dz-image {
2775   border-radius: 4px;
2776   background: #e9e9e9; }
2777
2778 .dz-preview.dz-file-preview .dz-details {
2779   opacity: 1; }
2780
2781 .dz-preview.dz-image-preview {
2782   background: white; }
2783
2784 .dz-preview.dz-image-preview .dz-details {
2785   transition: opacity 0.2s linear; }
2786
2787 .dz-preview .dz-remove {
2788   font-size: 13px;
2789   text-align: center;
2790   display: block;
2791   cursor: pointer;
2792   border: none;
2793   margin-top: 3px; }
2794
2795 .dz-preview .dz-remove:hover {
2796   text-decoration: underline; }
2797
2798 .dz-preview:hover .dz-details {
2799   opacity: 1; }
2800
2801 .dz-preview .dz-details {
2802   z-index: 20;
2803   position: absolute;
2804   top: 0;
2805   left: 0;
2806   opacity: 0;
2807   font-size: 10px;
2808   min-width: 100%;
2809   max-width: 100%;
2810   padding: 6px 3px;
2811   text-align: center;
2812   color: rgba(0, 0, 0, 0.9);
2813   line-height: 150%; }
2814
2815 .dz-preview .dz-details .dz-size {
2816   margin-bottom: 0.5em;
2817   font-size: 12px; }
2818
2819 .dz-preview .dz-details .dz-filename {
2820   white-space: nowrap; }
2821
2822 .dz-preview .dz-details .dz-filename:hover span {
2823   border: 1px solid rgba(200, 200, 200, 0.8);
2824   background-color: rgba(255, 255, 255, 0.8); }
2825
2826 .dz-preview .dz-details .dz-filename:not(:hover) {
2827   overflow: hidden;
2828   text-overflow: ellipsis; }
2829
2830 .dz-preview .dz-details .dz-filename:not(:hover) span {
2831   border: 1px solid transparent; }
2832
2833 .dz-preview .dz-details .dz-filename span {
2834   background-color: rgba(255, 255, 255, 0.4);
2835   padding: 0 0.4em;
2836   border-radius: 3px; }
2837
2838 .dz-preview:hover .dz-image img {
2839   filter: blur(8px); }
2840
2841 .dz-preview .dz-image {
2842   border-radius: 4px;
2843   overflow: hidden;
2844   width: 80px;
2845   height: 80px;
2846   position: relative;
2847   display: block;
2848   z-index: 10; }
2849
2850 .dz-preview .dz-image img {
2851   display: block; }
2852
2853 .dz-preview.dz-success .dz-success-mark {
2854   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
2855
2856 .dz-preview.dz-error .dz-error-mark {
2857   opacity: 1;
2858   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
2859
2860 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
2861   pointer-events: none;
2862   opacity: 0;
2863   z-index: 1001;
2864   position: absolute;
2865   display: block;
2866   top: 50%;
2867   left: 50%;
2868   margin-left: -27px;
2869   margin-top: -35px; }
2870
2871 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
2872   display: block;
2873   width: 54px;
2874   height: 54px; }
2875
2876 .dz-preview.dz-processing .dz-progress {
2877   opacity: 1;
2878   transition: all 0.2s linear; }
2879
2880 .dz-preview.dz-complete .dz-progress {
2881   opacity: 0;
2882   transition: opacity 0.4s ease-in; }
2883
2884 .dz-preview:not(.dz-processing) .dz-progress {
2885   animation: pulse 6s ease infinite; }
2886
2887 .dz-preview .dz-progress {
2888   opacity: 1;
2889   z-index: 1000;
2890   pointer-events: none;
2891   position: absolute;
2892   height: 16px;
2893   left: 50%;
2894   top: 50%;
2895   margin-top: -8px;
2896   width: 80px;
2897   margin-left: -40px;
2898   background: rgba(255, 255, 255, 0.9);
2899   transform: scale(1);
2900   border-radius: 8px;
2901   overflow: hidden; }
2902
2903 .dz-preview .dz-progress .dz-upload {
2904   background: #333;
2905   background: linear-gradient(to bottom, #666, #444);
2906   position: absolute;
2907   top: 0;
2908   left: 0;
2909   bottom: 0;
2910   width: 0;
2911   transition: width 300ms ease-in-out; }
2912
2913 .dz-preview.dz-error .dz-error-message {
2914   display: block; }
2915
2916 .dz-preview.dz-error .dz-image:hover ~ .dz-error-message, .dz-preview.dz-error .dz-details:hover ~ .dz-error-message {
2917   opacity: 1;
2918   pointer-events: auto; }
2919
2920 .dz-preview .dz-error-message {
2921   pointer-events: none;
2922   z-index: 1000;
2923   position: absolute;
2924   display: block;
2925   display: none;
2926   opacity: 0;
2927   transition: opacity 0.3s ease;
2928   border-radius: 4px;
2929   font-size: 12px;
2930   line-height: 1.2;
2931   top: 88px;
2932   left: -12px;
2933   width: 160px;
2934   background: #ab0f0e;
2935   padding: 6px;
2936   color: white; }
2937
2938 .dz-preview .dz-error-message:after {
2939   content: '';
2940   position: absolute;
2941   top: -6px;
2942   left: 44px;
2943   width: 0;
2944   height: 0;
2945   border-left: 6px solid transparent;
2946   border-right: 6px solid transparent;
2947   border-bottom: 6px solid #ab0f0e; }
2948
2949 .tab-container .nav-tabs {
2950   text-align: left;
2951   border-bottom: 1px solid #DDD;
2952   margin-bottom: 16px; }
2953   .tab-container .nav-tabs .tab-item {
2954     padding: 12px;
2955     color: #666; }
2956     .tab-container .nav-tabs .tab-item.selected {
2957       border-bottom-width: 3px; }
2958
2959 .nav-tabs {
2960   text-align: center; }
2961   .nav-tabs a, .nav-tabs .tab-item {
2962     padding: 16px;
2963     display: inline-block;
2964     color: #666;
2965     fill: #666;
2966     cursor: pointer; }
2967     .nav-tabs a.selected, .nav-tabs .tab-item.selected {
2968       border-bottom: 2px solid var(--color-primary); }
2969
2970 .image-picker .none {
2971   display: none; }
2972
2973 #code-editor .CodeMirror {
2974   height: 400px; }
2975
2976 #code-editor .lang-options {
2977   max-width: 400px;
2978   margin-bottom: 12px; }
2979   #code-editor .lang-options a {
2980     margin-right: 6px;
2981     text-decoration: underline; }
2982
2983 @media screen and (max-width: 880px) {
2984   #code-editor .lang-options {
2985     max-width: 100%; }
2986   #code-editor .CodeMirror {
2987     height: 200px; } }
2988
2989 .comment-box {
2990   border: 1px solid #DDD;
2991   border-radius: 4px;
2992   background-color: #FFF; }
2993   .comment-box .content {
2994     font-size: 0.666em; }
2995     .comment-box .content p, .comment-box .content ul, .comment-box .content ol {
2996       font-size: 14px;
2997       margin: .5em 0; }
2998   .comment-box .actions {
2999     opacity: 0;
3000     transition: opacity ease-in-out 120ms; }
3001   .comment-box:hover .actions, .comment-box:focus-within .actions {
3002     opacity: 1; }
3003
3004 .comment-box .header .meta img, .comment-box .header .meta a, .comment-box .header .meta span {
3005   display: inline-block;
3006   vertical-align: top; }
3007
3008 .comment-box .header .meta a, .comment-box .header .meta span {
3009   padding: 3px 0 3px 0;
3010   line-height: 1.6; }
3011
3012 .comment-box .header .meta a {
3013   color: #666; }
3014
3015 .comment-box .header .meta span {
3016   padding-left: 3px; }
3017
3018 .comment-box .header .text-muted {
3019   color: #999; }
3020
3021 #tag-manager .drag-card {
3022   max-width: 500px; }
3023
3024 .permissions-table [permissions-table-toggle-all-in-row] {
3025   display: none; }
3026
3027 .permissions-table tr:hover [permissions-table-toggle-all-in-row] {
3028   display: inline; }
3029
3030 .template-item {
3031   cursor: pointer;
3032   position: relative; }
3033   .template-item:hover, .template-item .template-item-actions button:hover {
3034     background-color: #F2F2F2; }
3035   .template-item .template-item-actions {
3036     position: absolute;
3037     top: 0;
3038     right: 0;
3039     width: 50px;
3040     height: 100%;
3041     display: flex;
3042     flex-direction: column;
3043     border-left: 1px solid #DDD; }
3044   .template-item .template-item-actions button {
3045     cursor: pointer;
3046     flex: 1;
3047     background: #FFF;
3048     border: 0;
3049     border-top: 1px solid #DDD; }
3050   .template-item .template-item-actions button:first-child {
3051     border-top: 0; }
3052
3053 /**
3054  * Includes the main navigation header and the faded toolbar.
3055  */
3056 header .grid {
3057   grid-template-columns: auto min-content auto; }
3058
3059 @media screen and (max-width: 1000px) {
3060   header .grid {
3061     grid-template-columns: 1fr;
3062     grid-row-gap: 0; } }
3063
3064 header {
3065   position: relative;
3066   display: block;
3067   z-index: 11;
3068   top: 0;
3069   color: #fff;
3070   fill: #fff;
3071   border-bottom: 1px solid #DDD;
3072   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
3073   padding: 3px 0; }
3074   header .links {
3075     display: inline-block;
3076     vertical-align: top; }
3077   header .links a {
3078     display: inline-block;
3079     padding: 16px;
3080     color: #FFF;
3081     fill: #FFF; }
3082   header .dropdown-container {
3083     padding-left: 16px;
3084     padding-right: 0; }
3085   header .avatar, header .user-name {
3086     display: inline-block; }
3087   header .avatar {
3088     width: 30px;
3089     height: 30px; }
3090   header .user-name {
3091     vertical-align: top;
3092     position: relative;
3093     display: inline-block;
3094     cursor: pointer; }
3095     header .user-name > * {
3096       vertical-align: top; }
3097     header .user-name > span {
3098       padding-left: 6px;
3099       display: inline-block;
3100       padding-top: 3px; }
3101     header .user-name > svg {
3102       padding-top: 4px;
3103       font-size: 18px; }
3104     @media screen and (min-width: 1000px) and (max-width: 1100px) {
3105       header .user-name {
3106         padding-left: 6px; }
3107         header .user-name .name {
3108           display: none; } }
3109
3110 .header *, .primary-background * {
3111   outline-color: #FFF; }
3112
3113 .header-search {
3114   display: inline-block; }
3115
3116 header .search-box {
3117   display: inline-block;
3118   margin-top: 10px; }
3119   header .search-box input {
3120     background-color: rgba(0, 0, 0, 0.2);
3121     border: 1px solid rgba(255, 255, 255, 0.2);
3122     border-radius: 40px;
3123     color: #EEE;
3124     z-index: 2;
3125     padding-left: 40px; }
3126     header .search-box input:focus {
3127       outline: none;
3128       border: 1px solid rgba(255, 255, 255, 0.6); }
3129   header .search-box button {
3130     fill: #EEE;
3131     z-index: 1;
3132     left: 16px; }
3133     header .search-box button svg {
3134       margin-right: 0; }
3135   header .search-box ::-webkit-input-placeholder {
3136     /* Chrome/Opera/Safari */
3137     color: #DDD; }
3138   header .search-box ::-moz-placeholder {
3139     /* Firefox 19+ */
3140     color: #DDD; }
3141   @media screen and (min-width: 1000px) and (max-width: 1100px) {
3142     header .search-box {
3143       max-width: 200px; } }
3144
3145 .logo {
3146   display: inline-block; }
3147   .logo:hover {
3148     color: #FFF;
3149     text-decoration: none; }
3150
3151 .logo-text {
3152   display: inline-block;
3153   font-size: 1.8em;
3154   color: #fff;
3155   font-weight: 400;
3156   padding: 14px 24px 14px 0;
3157   vertical-align: top;
3158   line-height: 1; }
3159
3160 .logo-image {
3161   margin: 6px 12px 6px 0;
3162   vertical-align: top;
3163   height: 43px; }
3164
3165 .mobile-menu-toggle {
3166   color: #FFF;
3167   fill: #FFF;
3168   font-size: 2em;
3169   border: 2px solid rgba(255, 255, 255, 0.8);
3170   border-radius: 4px;
3171   padding: 0 6px;
3172   position: absolute;
3173   right: 16px;
3174   top: 13px;
3175   line-height: 1;
3176   cursor: pointer;
3177   user-select: none; }
3178   .mobile-menu-toggle svg {
3179     margin: 0;
3180     bottom: -2px; }
3181
3182 @media screen and (max-width: 1000px) {
3183   header .header-links {
3184     display: none;
3185     background-color: #FFF;
3186     z-index: 10;
3187     right: 16px;
3188     border-radius: 4px;
3189     overflow: hidden;
3190     position: absolute;
3191     box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.13);
3192     margin-top: -6px; }
3193     header .header-links.show {
3194       display: block; }
3195   header .links a, header .dropdown-container ul li a {
3196     text-align: left;
3197     display: block;
3198     padding: 12px 16px;
3199     color: #444;
3200     fill: #444; }
3201     header .links a svg, header .dropdown-container ul li a svg {
3202       margin-right: 12px; }
3203     header .links a:hover, header .dropdown-container ul li a:hover {
3204       background-color: #EEE;
3205       color: #444;
3206       fill: #444;
3207       text-decoration: none; }
3208   header .dropdown-container {
3209     display: block;
3210     padding-left: 0; }
3211   header .links {
3212     display: block; }
3213   header .dropdown-container ul {
3214     display: block !important;
3215     position: relative;
3216     background-color: transparent;
3217     border: 0;
3218     padding: 0;
3219     margin: 0;
3220     box-shadow: none; } }
3221
3222 .tri-layout-mobile-tabs {
3223   position: sticky;
3224   top: 0;
3225   z-index: 5;
3226   background-color: #FFF;
3227   border-bottom: 1px solid #DDD;
3228   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1); }
3229
3230 .tri-layout-mobile-tab {
3231   text-align: center;
3232   border-bottom: 3px solid #BBB;
3233   cursor: pointer; }
3234   .tri-layout-mobile-tab:first-child {
3235     border-right: 1px solid #DDD; }
3236   .tri-layout-mobile-tab.active {
3237     border-bottom-color: currentColor; }
3238
3239 .breadcrumbs {
3240   display: flex;
3241   flex-direction: row;
3242   align-items: center;
3243   justify-content: flex-start;
3244   flex-wrap: wrap;
3245   opacity: 0.7; }
3246   .breadcrumbs .icon-list-item {
3247     width: auto;
3248     padding-top: 6px;
3249     padding-bottom: 6px; }
3250   .breadcrumbs .separator {
3251     display: inline-block;
3252     fill: #aaa;
3253     font-size: 1.6em;
3254     line-height: 0.8;
3255     margin: -2px 0 0; }
3256   .breadcrumbs:hover, .breadcrumbs:focus-within {
3257     opacity: 1; }
3258
3259 @media screen and (max-width: 1000px) {
3260   .breadcrumbs .icon-list-item {
3261     padding: 6px; }
3262     .breadcrumbs .icon-list-item > span + span {
3263       display: none; }
3264     .breadcrumbs .icon-list-item > span:first-child {
3265       margin-right: 0; } }
3266
3267 .breadcrumb-listing {
3268   position: relative; }
3269   .breadcrumb-listing .breadcrumb-listing-toggle {
3270     padding: 6px;
3271     border: 1px solid transparent;
3272     border-radius: 4px; }
3273     .breadcrumb-listing .breadcrumb-listing-toggle:hover {
3274       border-color: #DDD; }
3275   .breadcrumb-listing .svg-icon {
3276     margin-right: 0; }
3277
3278 .breadcrumb-listing-dropdown {
3279   box-shadow: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
3280   overflow: hidden;
3281   min-height: 100px;
3282   width: 240px;
3283   display: none;
3284   position: absolute;
3285   z-index: 80;
3286   right: -16px; }
3287   .breadcrumb-listing-dropdown .breadcrumb-listing-search .svg-icon {
3288     position: absolute;
3289     left: 12px;
3290     top: 11px;
3291     fill: #888;
3292     pointer-events: none; }
3293   .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
3294     max-height: 400px;
3295     overflow-y: scroll;
3296     text-align: left; }
3297   .breadcrumb-listing-dropdown input {
3298     padding-left: 32px;
3299     border-radius: 0;
3300     border: 0;
3301     border-bottom: 1px solid #DDD; }
3302
3303 @media screen and (max-width: 880px) {
3304   .breadcrumb-listing-dropdown {
3305     position: fixed;
3306     right: auto;
3307     left: 16px; }
3308   .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
3309     max-height: 240px; } }
3310
3311 .faded a, .faded button, .faded span, .faded span > div {
3312   color: #666;
3313   fill: #666; }
3314
3315 .faded .text-button {
3316   opacity: 0.5;
3317   transition: all ease-in-out 120ms; }
3318   .faded .text-button:hover {
3319     opacity: 1;
3320     text-decoration: none; }
3321
3322 .faded span.faded-text {
3323   display: inline-block;
3324   padding: 12px; }
3325
3326 .action-buttons .text-button {
3327   display: inline-block;
3328   padding: 6px 12px; }
3329   .action-buttons .text-button:last-child {
3330     padding-right: 0; }
3331   .action-buttons .text-button:first-child {
3332     padding-left: 0; }
3333
3334 .action-buttons .dropdown-container:last-child a {
3335   padding-right: 0;
3336   padding-left: 12px; }
3337
3338 .action-buttons {
3339   text-align: right; }
3340   .action-buttons.text-left {
3341     text-align: left; }
3342     .action-buttons.text-left .text-button {
3343       padding-right: 16px;
3344       padding-left: 0; }
3345   .action-buttons.text-center {
3346     text-align: center; }
3347
3348 @media screen and (max-width: 880px) {
3349   .action-buttons .text-button {
3350     padding: 6px 6px; }
3351   .action-buttons .dropdown-container:last-child a {
3352     padding-left: 6px; } }
3353
3354 .book-contents .entity-list-item .icon {
3355   width: 4px;
3356   border-radius: 1px;
3357   justify-self: stretch;
3358   align-self: stretch;
3359   height: auto;
3360   margin-right: 24px; }
3361
3362 .book-contents .entity-list-item .icon:after {
3363   opacity: 0.5; }
3364
3365 .book-contents .entity-list-item .icon svg {
3366   display: none; }
3367
3368 .book-contents .entity-list-item p {
3369   margin-bottom: 0; }
3370
3371 .book-contents .entity-list-item .inner-page {
3372   padding-top: 0;
3373   padding-bottom: 0; }
3374
3375 .entity-list-item + .chapter-expansion {
3376   display: flex;
3377   padding: 0 16px 16px 16px;
3378   align-items: center;
3379   border: 0;
3380   width: 100%;
3381   position: relative; }
3382   .entity-list-item + .chapter-expansion > .icon {
3383     width: 4px;
3384     height: auto;
3385     border-radius: 0 0 1px 1px;
3386     align-self: stretch;
3387     flex-shrink: 0; }
3388     .entity-list-item + .chapter-expansion > .icon:before {
3389       position: absolute;
3390       top: 0;
3391       left: 0;
3392       width: 100%;
3393       height: 1px;
3394       background-color: currentColor;
3395       content: '';
3396       opacity: 0.5; }
3397     .entity-list-item + .chapter-expansion > .icon:after {
3398       opacity: 0.5; }
3399   .entity-list-item + .chapter-expansion .icon svg {
3400     display: none; }
3401   .entity-list-item + .chapter-expansion > .content {
3402     flex: 1; }
3403   .entity-list-item + .chapter-expansion .chapter-expansion-toggle {
3404     border-radius: 0 4px 4px 0;
3405     padding: 6px 16px;
3406     width: 100%;
3407     text-align: left; }
3408   .entity-list-item + .chapter-expansion .chapter-expansion-toggle:hover {
3409     background-color: rgba(0, 0, 0, 0.06); }
3410
3411 .entity-list-item.has-children {
3412   padding-bottom: 0; }
3413   .entity-list-item.has-children > .icon {
3414     border-radius: 4px 4px 0 0; }
3415
3416 .inset-list {
3417   display: none; }
3418   .inset-list .entity-list-item-name {
3419     font-size: 1rem; }
3420   .inset-list .entity-list-item-children {
3421     padding-top: 0;
3422     padding-bottom: 0; }
3423
3424 .sidebar-page-nav {
3425   list-style: none;
3426   margin: 12px 0 16px 6px;
3427   position: relative; }
3428   .sidebar-page-nav:after {
3429     content: '';
3430     display: block;
3431     position: absolute;
3432     left: 0;
3433     background-color: rgba(0, 0, 0, 0.2);
3434     width: 2px;
3435     top: 5px;
3436     bottom: 5px;
3437     z-index: 0; }
3438   .sidebar-page-nav li {
3439     margin-bottom: 4px;
3440     font-size: 0.95em;
3441     position: relative; }
3442   .sidebar-page-nav .h1 {
3443     padding-left: 16px; }
3444   .sidebar-page-nav .h2 {
3445     padding-left: 24px; }
3446   .sidebar-page-nav .h3 {
3447     padding-left: 32px; }
3448   .sidebar-page-nav .h4 {
3449     padding-left: 40px; }
3450   .sidebar-page-nav .h5 {
3451     padding-left: 48px; }
3452   .sidebar-page-nav .h6 {
3453     padding-left: 56px; }
3454   .sidebar-page-nav .current-heading {
3455     font-weight: bold; }
3456   .sidebar-page-nav li:not(.current-heading) .sidebar-page-nav-bullet {
3457     background-color: #BBB !important; }
3458   .sidebar-page-nav .sidebar-page-nav-bullet {
3459     width: 6px;
3460     height: 6px;
3461     position: absolute;
3462     left: -2px;
3463     top: 30%;
3464     border-radius: 50%;
3465     box-shadow: 0 0 0 6px #F2F2F2;
3466     z-index: 1; }
3467
3468 .book-tree .sidebar-page-list {
3469   list-style: none;
3470   margin: -6px -12px;
3471   padding-left: 0;
3472   padding-right: 0;
3473   position: relative; }
3474   .book-tree .sidebar-page-list:after, .book-tree .sidebar-page-list .sub-menu:after {
3475     content: '';
3476     display: block;
3477     position: absolute;
3478     left: 16px;
3479     top: 1rem;
3480     bottom: 1rem;
3481     border-left: 4px solid rgba(0, 0, 0, 0.1);
3482     z-index: 0; }
3483   .book-tree .sidebar-page-list ul {
3484     list-style: none;
3485     padding-left: 1rem;
3486     padding-right: 0; }
3487   .book-tree .sidebar-page-list .entity-list-item {
3488     padding-top: 3px;
3489     padding-bottom: 3px;
3490     background-clip: content-box;
3491     border-radius: 0 3px 3px 0; }
3492     .book-tree .sidebar-page-list .entity-list-item .content {
3493       padding-top: 6px;
3494       padding-bottom: 6px;
3495       max-width: calc(100% - 20px); }
3496   .book-tree .sidebar-page-list .entity-list-item.selected {
3497     background-color: rgba(0, 0, 0, 0.08); }
3498   .book-tree .sidebar-page-list .entity-list-item.no-hover {
3499     margin-top: -6px;
3500     padding-right: 0; }
3501   .book-tree .sidebar-page-list .entity-list-item-name {
3502     font-size: 1em;
3503     margin: 0; }
3504   .book-tree .sidebar-page-list .chapter-child-menu {
3505     font-size: .8rem;
3506     margin-top: -.2rem;
3507     margin-left: -1rem; }
3508   .book-tree .sidebar-page-list [chapter-toggle] {
3509     padding-left: .7rem;
3510     padding-bottom: .2rem; }
3511   .book-tree .sidebar-page-list .entity-list-item .icon {
3512     z-index: 2;
3513     width: 4px;
3514     height: auto;
3515     align-self: stretch;
3516     flex-shrink: 0;
3517     border-radius: 1px;
3518     opacity: 0.6; }
3519   .book-tree .sidebar-page-list .entity-list-item .icon:after {
3520     opacity: 1; }
3521   .book-tree .sidebar-page-list .entity-list-item .icon svg {
3522     display: none; }
3523
3524 .chapter-child-menu ul.sub-menu {
3525   display: none;
3526   padding-left: 0;
3527   position: relative; }
3528
3529 .chapter-child-menu [chapter-toggle].open + .sub-menu {
3530   display: block; }
3531
3532 .sortable-page-list, .sortable-page-list ul {
3533   list-style: none; }
3534
3535 .sort-box {
3536   margin-bottom: 16px;
3537   padding: 16px 32px;
3538   position: relative; }
3539   .sort-box::before {
3540     content: '';
3541     border-radius: 4px;
3542     opacity: 0.5;
3543     border: 2px solid var(--color-book);
3544     display: block;
3545     top: 0;
3546     bottom: 0;
3547     left: 0;
3548     right: 0;
3549     position: absolute; }
3550
3551 .sort-box-options {
3552   display: flex;
3553   flex-wrap: wrap;
3554   justify-content: space-between; }
3555
3556 .sort-box-options .button {
3557   margin-left: 0; }
3558
3559 .sortable-page-list {
3560   margin-left: 0;
3561   padding: 0; }
3562   .sortable-page-list .entity-list-item > span:first-child {
3563     align-self: flex-start; }
3564   .sortable-page-list .entity-list-item > div {
3565     display: block;
3566     flex: 1; }
3567   .sortable-page-list > ul {
3568     margin-left: 0; }
3569   .sortable-page-list ul {
3570     margin-bottom: 16px;
3571     margin-top: 0;
3572     padding-left: 16px; }
3573   .sortable-page-list li {
3574     border: 1px solid #DDD;
3575     margin-top: -1px;
3576     min-height: 38px; }
3577   .sortable-page-list li.text-page, .sortable-page-list li.text-chapter {
3578     border-left: 2px solid currentColor; }
3579   .sortable-page-list li:first-child {
3580     margin-top: 6px; }
3581
3582 .sortable-page-list li.placeholder {
3583   position: relative; }
3584
3585 .sortable-page-list li.placeholder:before {
3586   position: absolute; }
3587
3588 .activity-list-item {
3589   padding: 12px 0;
3590   display: grid;
3591   grid-template-columns: min-content 1fr;
3592   grid-column-gap: 16px;
3593   font-size: 0.9em; }
3594
3595 .card .activity-list-item {
3596   padding: 12px 16px; }
3597
3598 .user-list-item {
3599   display: inline-grid;
3600   padding: 12px;
3601   grid-template-columns: min-content 1fr;
3602   grid-column-gap: 16px;
3603   font-size: 0.9em;
3604   align-items: center; }
3605   .user-list-item > div:first-child {
3606     line-height: 0; }
3607
3608 ul.pagination {
3609   display: inline-block;
3610   list-style: none;
3611   margin: 16px 0;
3612   padding-left: 1px; }
3613   ul.pagination li {
3614     float: left; }
3615   ul.pagination li:first-child a, ul.pagination li:first-child span {
3616     border-radius: 3px 0 0 3px; }
3617   ul.pagination li:last-child a, ul.pagination li:last-child span {
3618     border-radius: 0 3px 3px 0; }
3619   ul.pagination a, ul.pagination span {
3620     display: block;
3621     padding: 3px 12px;
3622     border: 1px solid #CCC;
3623     margin-left: -1px;
3624     user-select: none; }
3625     ul.pagination a.disabled, ul.pagination span.disabled {
3626       cursor: not-allowed; }
3627   ul.pagination li.active span {
3628     color: #FFF; }
3629
3630 .compact ul.pagination {
3631   margin: 0; }
3632
3633 .entity-list, .icon-list {
3634   margin: 0 -16px; }
3635   .entity-list h4, .icon-list h4 {
3636     margin: 0; }
3637   .entity-list hr, .icon-list hr {
3638     margin: 0; }
3639   .entity-list .text-small.text-muted, .icon-list .text-small.text-muted {
3640     color: #AAA;
3641     font-size: 0.75em;
3642     margin-top: 6px; }
3643   .entity-list .text-muted p.text-muted, .icon-list .text-muted p.text-muted {
3644     margin-top: 0; }
3645   .entity-list .page.draft .text-page, .icon-list .page.draft .text-page {
3646     color: var(--color-page-draft);
3647     fill: var(--color-page-draft); }
3648   .entity-list > .dropdown-container, .icon-list > .dropdown-container {
3649     display: block; }
3650
3651 .icon-list hr {
3652   margin: 12px 16px;
3653   max-width: 140px;
3654   opacity: 0.25;
3655   height: 1.1px; }
3656
3657 .icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {
3658   display: none; }
3659
3660 .entity-list-item, .icon-list-item {
3661   padding: 12px 16px;
3662   display: flex;
3663   align-items: center;
3664   background-color: transparent;
3665   border: 0;
3666   width: 100%;
3667   position: relative;
3668   word-break: break-word; }
3669   .entity-list-item h4 a, .icon-list-item h4 a {
3670     color: #666; }
3671   .entity-list-item > span:first-child, .icon-list-item > span:first-child {
3672     margin-right: 16px;
3673     flex-basis: 1.88em;
3674     flex: none; }
3675   .entity-list-item > span:last-child, .icon-list-item > span:last-child {
3676     flex: 1;
3677     text-align: left; }
3678   .entity-list-item:not(.no-hover), .icon-list-item:not(.no-hover) {
3679     cursor: pointer; }
3680   .entity-list-item:not(.no-hover):hover, .icon-list-item:not(.no-hover):hover {
3681     text-decoration: none;
3682     background-color: rgba(0, 0, 0, 0.1);
3683     border-radius: 4px; }
3684   .entity-list-item.outline-hover, .icon-list-item.outline-hover {
3685     border: 1px solid transparent; }
3686   .entity-list-item.outline-hover:hover, .icon-list-item.outline-hover:hover {
3687     background-color: transparent;
3688     border-color: rgba(0, 0, 0, 0.1); }
3689   .entity-list-item:focus, .icon-list-item:focus {
3690     background-color: #eee;
3691     outline: 1px dotted #666;
3692     outline-offset: -2px; }
3693
3694 .entity-list-item-path-sep {
3695   display: inline-block;
3696   vertical-align: top;
3697   position: relative;
3698   top: 1px; }
3699   .entity-list-item-path-sep svg {
3700     margin-right: 0; }
3701
3702 .card .entity-list-item:not(.no-hover):hover {
3703   background-color: #F2F2F2; }
3704
3705 .card .entity-list-item .entity-list-item:hover {
3706   background-color: #EEEEEE; }
3707
3708 .entity-list-item-children {
3709   padding: 16px; }
3710   .entity-list-item-children > div {
3711     overflow: hidden;
3712     padding: 6px 0;
3713     margin-top: -6px; }
3714   .entity-list-item-children .entity-chip {
3715     text-overflow: ellipsis;
3716     height: 2.5em;
3717     overflow: hidden;
3718     text-align: left;
3719     display: block;
3720     white-space: nowrap; }
3721
3722 .entity-list-item-image {
3723   align-self: stretch;
3724   width: 140px;
3725   flex: none;
3726   background-size: cover;
3727   background-position: 50% 50%;
3728   border-radius: 3px;
3729   position: relative;
3730   margin-right: 24px; }
3731   .entity-list-item-image.entity-list-item-image-wide {
3732     width: 220px; }
3733   .entity-list-item-image .svg-icon {
3734     color: #FFF;
3735     fill: #FFF;
3736     font-size: 1.66rem;
3737     margin-right: 0;
3738     position: absolute;
3739     bottom: 6px;
3740     left: 6px; }
3741   @media screen and (max-width: 880px) {
3742     .entity-list-item-image {
3743       width: 80px; } }
3744
3745 .chapter > .entity-list-item-image {
3746   width: 60px; }
3747
3748 .entity-list.compact {
3749   font-size: 8.4px; }
3750   .entity-list.compact h4, .entity-list.compact a {
3751     line-height: 1.2; }
3752   .entity-list.compact .entity-item-snippet {
3753     display: none; }
3754   .entity-list.compact .entity-list-item p {
3755     font-size: 11.2px;
3756     padding-top: 6px; }
3757   .entity-list.compact p {
3758     margin: 0; }
3759   .entity-list.compact > p.empty-text {
3760     display: block;
3761     font-size: 14px; }
3762   .entity-list.compact hr {
3763     margin: 0; }
3764   @media screen and (max-width: 880px) {
3765     .entity-list.compact h4 {
3766       font-size: 1.666em; } }
3767
3768 .dropdown-container {
3769   display: inline-block;
3770   vertical-align: top;
3771   position: relative; }
3772
3773 .dropdown-menu {
3774   display: none;
3775   position: absolute;
3776   z-index: 999;
3777   top: 0;
3778   list-style: none;
3779   right: 0;
3780   margin: 16px 0;
3781   background-color: #FFFFFF;
3782   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
3783   border-radius: 1px;
3784   border: 1px solid #EEE;
3785   min-width: 180px;
3786   padding: 6px 0;
3787   color: #555;
3788   fill: #555;
3789   text-align: left !important; }
3790   .dropdown-menu.wide {
3791     min-width: 220px; }
3792   .dropdown-menu .text-muted {
3793     color: #999;
3794     fill: #999; }
3795   .dropdown-menu li.active a {
3796     font-weight: 600; }
3797   .dropdown-menu a, .dropdown-menu button {
3798     display: block;
3799     padding: 6px 16px;
3800     color: #555;
3801     fill: currentColor;
3802     white-space: nowrap; }
3803     .dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu button:hover, .dropdown-menu button:focus {
3804       text-decoration: none;
3805       background-color: var(--color-primary-light);
3806       color: var(--color-primary); }
3807     .dropdown-menu a:focus, .dropdown-menu button:focus {
3808       outline: 1px solid var(--color-primary);
3809       outline-offset: -2px; }
3810     .dropdown-menu a svg, .dropdown-menu button svg {
3811       margin-right: 12px;
3812       display: inline-block;
3813       width: 16px; }
3814   .dropdown-menu button {
3815     width: 100%;
3816     text-align: left; }
3817   .dropdown-menu li.border-bottom {
3818     border-bottom: 1px solid #DDD; }
3819
3820 .featured-image-container {
3821   position: relative;
3822   overflow: hidden;
3823   min-height: 140px;
3824   background-size: cover;
3825   background-position: 50% 50%;
3826   transition: opacity ease-in-out 240ms; }
3827   .featured-image-container a {
3828     display: block; }
3829   .featured-image-container img {
3830     display: block;
3831     width: 100%;
3832     max-width: 100%;
3833     height: auto; }
3834
3835 .featured-image-container-wrap {
3836   position: relative; }
3837   .featured-image-container-wrap .svg-icon {
3838     color: #FFF;
3839     fill: #FFF;
3840     font-size: 2rem;
3841     margin-right: 0;
3842     position: absolute;
3843     bottom: 10px;
3844     left: 6px; }
3845
3846 .grid-card:hover .featured-image-container {
3847   opacity: .5; }
3848
3849 .action-link {
3850   background: transparent;
3851   border: none;
3852   color: currentColor;
3853   padding: 16px 0; }
3854
3855 .active-link-list a {
3856   display: inline-block;
3857   padding: 12px; }
3858
3859 .active-link-list a:not(.active) {
3860   color: #444;
3861   fill: #444; }
3862
3863 .active-link-list a:hover {
3864   background-color: rgba(0, 0, 0, 0.05);
3865   border-radius: 3px;
3866   text-decoration: none; }
3867
3868 .page-editor {
3869   display: flex;
3870   flex-direction: column;
3871   align-items: stretch;
3872   overflow: hidden;
3873   background-color: #FFF; }
3874   .page-editor .edit-area {
3875     flex: 1;
3876     flex-direction: column;
3877     z-index: 10; }
3878   .page-editor .mce-tinymce {
3879     box-shadow: none; }
3880   .page-editor .mce-top-part::before {
3881     box-shadow: none; }
3882
3883 body.mce-fullscreen .page-editor .edit-area {
3884   z-index: 12; }
3885
3886 @media screen and (max-width: 600px) {
3887   .page-edit-toolbar {
3888     overflow-x: scroll;
3889     overflow-y: visible; }
3890   .page-edit-toolbar .grid.third {
3891     display: block;
3892     white-space: nowrap; }
3893     .page-edit-toolbar .grid.third > div {
3894       display: inline-block; } }
3895
3896 .page-save-mobile-button {
3897   position: fixed;
3898   z-index: 30;
3899   border-radius: 50%;
3900   width: 56px;
3901   height: 56px;
3902   font-size: 24px;
3903   right: 16px;
3904   bottom: 12px;
3905   box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.13);
3906   background-color: currentColor;
3907   text-align: center; }
3908   .page-save-mobile-button svg {
3909     fill: #FFF;
3910     margin-right: 0; }
3911
3912 .draft-notification {
3913   pointer-events: none;
3914   transform: scale(0);
3915   transition: transform ease-in-out 120ms;
3916   transform-origin: 50% 50%; }
3917   .draft-notification.visible {
3918     transform: scale(1); }
3919
3920 .page-style.editor {
3921   padding: 0 !important; }
3922
3923 .page-content {
3924   width: 100%;
3925   max-width: 840px;
3926   margin: 0 auto;
3927   overflow-wrap: break-word; }
3928   .page-content .align-left {
3929     text-align: left; }
3930   .page-content img.align-left, .page-content table.align-left {
3931     float: left !important;
3932     margin: 6px 16px 16px 0; }
3933   .page-content .align-right {
3934     text-align: right !important; }
3935   .page-content img.align-right, .page-content table.align-right {
3936     float: right !important;
3937     margin: 6px 0 6px 12px; }
3938   .page-content .align-center {
3939     text-align: center; }
3940   .page-content img.align-center {
3941     display: block; }
3942   .page-content img.align-center, .page-content table.align-center {
3943     margin-left: auto;
3944     margin-right: auto; }
3945   .page-content img {
3946     max-width: 100%;
3947     height: auto; }
3948   .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .page-content pre {
3949     clear: left; }
3950   .page-content hr {
3951     clear: both;
3952     margin: 16px 0; }
3953   .page-content table {
3954     hyphens: auto;
3955     table-layout: fixed;
3956     max-width: 100%;
3957     height: auto !important; }
3958   .page-content ins,
3959   .page-content del {
3960     text-decoration: none; }
3961   .page-content ins {
3962     background: #dbffdb; }
3963   .page-content del {
3964     background: #FFECEC; }
3965   .page-content.page-revision pre code {
3966     white-space: pre-wrap; }
3967
3968 .pointer-container {
3969   position: relative;
3970   display: none;
3971   left: 0;
3972   z-index: 10; }
3973
3974 .pointer {
3975   border: 1px solid #CCC;
3976   display: flex;
3977   align-items: center;
3978   justify-items: center;
3979   padding: 12px 12px;
3980   border-radius: 4px;
3981   box-shadow: 0 0 12px 1px rgba(212, 209, 209, 0.3);
3982   position: absolute;
3983   top: -60px;
3984   background-color: #FFF;
3985   width: 275px;
3986   z-index: 55; }
3987   .pointer.is-page-editable {
3988     width: 328px; }
3989   .pointer:before {
3990     position: absolute;
3991     left: 50%;
3992     bottom: -9px;
3993     width: 16px;
3994     height: 16px;
3995     margin-left: -8px;
3996     content: '';
3997     display: block;
3998     background-color: #FFF;
3999     transform: rotate(45deg);
4000     transform-origin: 50% 50%;
4001     border-bottom: 1px solid #CCC;
4002     border-right: 1px solid #CCC;
4003     z-index: 56; }
4004   .pointer input, .pointer button, .pointer a {
4005     position: relative;
4006     border-radius: 0;
4007     height: 28px;
4008     font-size: 12px;
4009     vertical-align: top;
4010     padding: 5px 16px; }
4011   .pointer input {
4012     background-color: #FFF;
4013     border: 1px solid #DDD;
4014     color: #666;
4015     width: 172px;
4016     z-index: 40;
4017     padding: 5px 10px; }
4018   .pointer span.icon {
4019     fill: #444;
4020     cursor: pointer;
4021     user-select: none;
4022     display: inline-block;
4023     line-height: 1; }
4024   .pointer .input-group .button {
4025     line-height: 1;
4026     margin: 0 0 0 -4px;
4027     box-shadow: none; }
4028   .pointer a.button {
4029     margin: 0; }
4030   .pointer .svg-icon {
4031     width: 1.2em;
4032     height: 1.2em; }
4033
4034 .floating-toolbox {
4035   background-color: #FFF;
4036   border: 1px solid #DDD;
4037   right: 64px;
4038   width: 48px;
4039   overflow: hidden;
4040   align-items: stretch;
4041   flex-direction: row;
4042   display: flex;
4043   transition: width ease-in-out 180ms;
4044   margin-top: -1px;
4045   min-height: 0; }
4046   .floating-toolbox.open {
4047     width: 480px; }
4048   .floating-toolbox [toolbox-toggle] svg {
4049     transition: transform ease-in-out 180ms; }
4050   .floating-toolbox [toolbox-toggle] {
4051     transition: background-color ease-in-out 180ms; }
4052   .floating-toolbox.open [toolbox-toggle] {
4053     background-color: rgba(255, 0, 0, 0.29); }
4054   .floating-toolbox.open [toolbox-toggle] svg {
4055     transform: rotate(180deg); }
4056   .floating-toolbox > div {
4057     flex: 1;
4058     position: relative; }
4059   .floating-toolbox .tabs {
4060     display: block;
4061     border-right: 1px solid #DDD;
4062     width: 48px;
4063     flex: 0 1 auto; }
4064   .floating-toolbox .tabs svg {
4065     fill: rgba(0, 0, 0, 0.5);
4066     padding: 0;
4067     margin: 0; }
4068   .floating-toolbox .tabs > button {
4069     display: block;
4070     cursor: pointer;
4071     padding: 12px 16px;
4072     font-size: 16px;
4073     line-height: 1.6;
4074     border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
4075   .floating-toolbox.open .tabs > button.active {
4076     fill: #444;
4077     background-color: rgba(0, 0, 0, 0.1); }
4078   .floating-toolbox div[toolbox-tab-content] {
4079     padding-bottom: 45px;
4080     display: flex;
4081     flex: 1;
4082     flex-direction: column;
4083     min-height: 0px;
4084     overflow-y: scroll; }
4085   .floating-toolbox h4 {
4086     font-size: 24px;
4087     margin: 16px 0 0 0;
4088     padding: 0 24px 12px 24px; }
4089   .floating-toolbox .tags input {
4090     max-width: 100%;
4091     width: 100%;
4092     min-width: 50px; }
4093   .floating-toolbox .tags td, .floating-toolbox .tag-table > div > div > div {
4094     padding-right: 12px;
4095     padding-top: 12px;
4096     position: relative; }
4097   .floating-toolbox .handle {
4098     user-select: none;
4099     cursor: move;
4100     fill: #999; }
4101   .floating-toolbox form {
4102     display: flex;
4103     flex: 1;
4104     flex-direction: column;
4105     overflow-y: scroll; }
4106   .floating-toolbox table td, .floating-toolbox table th {
4107     overflow: visible; }
4108
4109 [toolbox-tab-content] {
4110   display: none; }
4111
4112 .tag-display {
4113   position: relative; }
4114   .tag-display table {
4115     width: 100%;
4116     margin: 0;
4117     padding: 0; }
4118   .tag-display tr:first-child td {
4119     padding-top: 0; }
4120   .tag-display .heading th {
4121     padding: 6px 12px;
4122     color: rgba(100, 100, 100, 0.7);
4123     border: 0;
4124     font-weight: 400; }
4125   .tag-display td {
4126     border: 0;
4127     border-bottom: 1px solid #EEE;
4128     padding: 6px 12px;
4129     color: #444; }
4130   .tag-display tr td:first-child {
4131     padding-left: 0; }
4132   .tag-display .tag-value {
4133     color: #888; }
4134   .tag-display tr:last-child td {
4135     border-bottom: none; }
4136   .tag-display .tag {
4137     padding: 12px; }
4138
4139 .suggestion-box {
4140   position: absolute;
4141   background-color: #FFF;
4142   border: 1px solid #BBB;
4143   box-shadow: 0 0 4px 1px #CCC;
4144   list-style: none;
4145   z-index: 100;
4146   padding: 0;
4147   margin: 0;
4148   border-radius: 3px; }
4149   .suggestion-box li {
4150     display: block;
4151     padding: 6px 12px;
4152     border-bottom: 1px solid #DDD; }
4153     .suggestion-box li:last-child {
4154       border-bottom: 0; }
4155     .suggestion-box li.active {
4156       background-color: #EEE; }
4157
4158 .comments-container h5 {
4159   color: #888;
4160   font-weight: normal;
4161   margin-top: 0.5em; }
4162
4163 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
4164   min-height: 175px; }
4165
4166 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
4167 .mce-floatpanel[aria-label="Insert/edit media"] .mce-open {
4168   display: none; }
4169
4170 .entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {
4171   font-size: 0.8rem;
4172   width: 1.88em;
4173   height: 1.88em;
4174   display: flex;
4175   align-items: center;
4176   justify-content: center;
4177   text-align: center;
4178   border-radius: 1em;
4179   position: relative;
4180   overflow: hidden; }
4181   .entity-list-item > span:first-child svg, .icon-list-item > span:first-child svg, .chapter-expansion > .icon svg {
4182     margin: 0;
4183     bottom: 0; }
4184   .entity-list-item > span:first-child:after, .icon-list-item > span:first-child:after, .chapter-expansion > .icon:after {
4185     content: '';
4186     position: absolute;
4187     background-color: currentColor;
4188     opacity: 0.2;
4189     left: 0;
4190     top: 0;
4191     width: 100%;
4192     height: 100%; }
4193
4194 .entity-chip {
4195   display: inline-block;
4196   align-items: center;
4197   justify-content: center;
4198   text-align: center;
4199   font-size: 0.9em;
4200   border-radius: 3px;
4201   position: relative;
4202   overflow: hidden;
4203   padding: 6px 12px;
4204   fill: currentColor;
4205   opacity: 0.85;
4206   transition: opacity ease-in-out 120ms; }
4207   .entity-chip:after {
4208     content: '';
4209     position: absolute;
4210     background-color: currentColor;
4211     opacity: 0.15;
4212     left: 0;
4213     top: 0;
4214     width: 100%;
4215     height: 100%; }
4216   .entity-chip:hover {
4217     text-decoration: none;
4218     opacity: 1; }
4219
4220 [v-cloak] {
4221   display: none;
4222   opacity: 0;
4223   animation-name: none !important; }
4224
4225 .dragged {
4226   position: absolute;
4227   opacity: 0.5;
4228   z-index: 2000; }
4229
4230 body.dragging, body.dragging * {
4231   cursor: move !important; }
4232
4233 .avatar {
4234   border-radius: 100%;
4235   background-color: #EEE;
4236   width: 30px;
4237   height: 30px; }
4238   .avatar.med {
4239     width: 40px;
4240     height: 40px; }
4241   .avatar.large {
4242     width: 80px;
4243     height: 80px; }
4244   .avatar.huge {
4245     width: 120px;
4246     height: 120px; }
4247   .avatar.square {
4248     border-radius: 3px; }
4249
4250 .loading-container {
4251   position: relative;
4252   display: block;
4253   margin: 32px auto; }
4254   .loading-container > div {
4255     width: 10px;
4256     height: 10px;
4257     border-radius: 10px;
4258     display: inline-block;
4259     vertical-align: top;
4260     transform: translate3d(-10px, 0, 0);
4261     margin-top: 6px;
4262     animation-name: loadingBob;
4263     animation-duration: 1.4s;
4264     animation-iteration-count: infinite;
4265     animation-timing-function: cubic-bezier(0.62, 0.28, 0.23, 0.99);
4266     margin-right: 4px;
4267     background-color: var(--color-page);
4268     animation-delay: 0.3s; }
4269   .loading-container > div:first-child {
4270     left: -16px;
4271     background-color: var(--color-book);
4272     animation-delay: 0s; }
4273   .loading-container > div:last-of-type {
4274     left: 16px;
4275     background-color: var(--color-chapter);
4276     animation-delay: 0.6s; }
4277   .loading-container > span {
4278     margin-left: 12px;
4279     font-style: italic;
4280     color: #888;
4281     vertical-align: top; }
4282
4283 [back-to-top] {
4284   background-color: var(--color-primary);
4285   position: fixed;
4286   bottom: 16px;
4287   right: 24px;
4288   padding: 5px 7px;
4289   cursor: pointer;
4290   color: #FFF;
4291   fill: #FFF;
4292   width: 40px;
4293   height: 40px;
4294   border-radius: 40px;
4295   transition: all ease-in-out 180ms;
4296   opacity: 0;
4297   z-index: 999;
4298   overflow: hidden; }
4299   [back-to-top] svg {
4300     width: 26.66667px;
4301     height: 26.66667px;
4302     margin-right: 4px; }
4303   [back-to-top]:hover {
4304     width: 136px;
4305     opacity: 1 !important; }
4306   [back-to-top] .inner {
4307     width: 136px; }
4308   [back-to-top] span {
4309     position: relative;
4310     vertical-align: top;
4311     line-height: 2; }
4312
4313 .contained-search-box {
4314   display: flex; }
4315   .contained-search-box input, .contained-search-box button {
4316     border-radius: 0;
4317     border: 1px solid #DDD;
4318     margin-left: -1px; }
4319   .contained-search-box input {
4320     flex: 5;
4321     padding: 6px 12px; }
4322     .contained-search-box input:focus, .contained-search-box input:active {
4323       outline: 0; }
4324   .contained-search-box button {
4325     width: 60px; }
4326   .contained-search-box button i {
4327     padding: 0; }
4328   .contained-search-box button.cancel.active {
4329     background-color: #ab0f0e;
4330     color: #EEE; }
4331
4332 .entity-selector {
4333   border: 1px solid #DDD;
4334   border-radius: 3px;
4335   overflow: hidden;
4336   font-size: 0.8em; }
4337   .entity-selector input[type="text"] {
4338     width: 100%;
4339     display: block;
4340     border-radius: 0;
4341     border: 0;
4342     border-bottom: 1px solid #DDD;
4343     font-size: 16px;
4344     padding: 12px 16px; }
4345   .entity-selector .entity-list {
4346     overflow-y: scroll;
4347     height: 400px;
4348     background-color: #EEEEEE;
4349     margin-right: 0;
4350     margin-left: 0; }
4351   .entity-selector .entity-list-item {
4352     background-color: #FFF; }
4353   .entity-selector .entity-list-item p {
4354     margin-bottom: 0; }
4355   .entity-selector .entity-list-item.selected {
4356     background-color: rgba(0, 0, 0, 0.05) !important; }
4357   .entity-selector .loading {
4358     height: 400px;
4359     padding-top: 24px; }
4360   .entity-selector .entity-selector-add button {
4361     margin: 0;
4362     display: block;
4363     width: 100%;
4364     border: 0;
4365     border-top: 1px solid #DDD; }
4366   .entity-selector.compact {
4367     font-size: 10px; }
4368     .entity-selector.compact .entity-item-snippet {
4369       display: none; }
4370
4371 .scroll-box {
4372   max-height: 250px;
4373   overflow-y: scroll;
4374   border: 1px solid #DDD;
4375   border-radius: 3px; }
4376   .scroll-box .scroll-box-item {
4377     padding: 6px 16px;
4378     border-bottom: 1px solid #DDD;
4379     border-top: 1px solid #DDD;
4380     margin-top: -1px; }
4381     .scroll-box .scroll-box-item:last-child {
4382       border-bottom: 0; }
4383
4384 .scroll-box[data-instruction]:before {
4385   content: attr(data-instruction);
4386   padding: 6px 16px;
4387   border-bottom: 1px solid #DDD;
4388   display: block;
4389   font-size: 0.75rem;
4390   color: #666; }
4391
4392 .fullscreen {
4393   border: 0;
4394   position: fixed;
4395   top: 0;
4396   left: 0;
4397   right: 0;
4398   bottom: 0;
4399   width: 100%;
4400   height: 100%;
4401   z-index: 150; }
4402
4403 .list-sort-container {
4404   display: inline-block; }
4405   .list-sort-container form {
4406     display: inline-block; }
4407   .list-sort-container .list-sort {
4408     display: inline-grid;
4409     margin-left: 12px;
4410     grid-template-columns: 120px 40px;
4411     border: 2px solid #DDD;
4412     border-radius: 4px; }
4413   .list-sort-container .list-sort-label {
4414     font-weight: bold;
4415     display: inline-block;
4416     color: #555; }
4417   .list-sort-container .list-sort-type {
4418     text-align: left; }
4419   .list-sort-container .list-sort-type, .list-sort-container .list-sort-dir {
4420     padding: 6px 12px;
4421     cursor: pointer; }
4422   .list-sort-container .list-sort-dir {
4423     border-left: 2px solid #DDD;
4424     fill: #888; }
4425     .list-sort-container .list-sort-dir .svg-icon {
4426       transition: transform ease-in-out 120ms; }
4427     .list-sort-container .list-sort-dir:hover .svg-icon {
4428       transform: rotate(180deg); }
4429