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

   1 @charset "UTF-8";
   2 :root {
   3   --color-primary: #206ea7;
   4   --color-primary-light: rgba(32,110,167,0.15);
   5   --color-page: #206ea7;
   6   --color-page-draft: #7e50b1;
   7   --color-chapter: #af4d0d;
   8   --color-book: #077b70;
   9   --color-bookshelf: #a94747; }
  10
  11 .m-none {
  12   margin: 0 !important; }
  13
  14 .mx-none {
  15   margin-left: 0 !important;
  16   margin-right: 0 !important; }
  17
  18 .my-none {
  19   margin-top: 0 !important;
  20   margin-bottom: 0 !important; }
  21
  22 .mt-none {
  23   margin-top: 0 !important; }
  24
  25 .mr-none {
  26   margin-right: 0 !important; }
  27
  28 .mb-none {
  29   margin-bottom: 0 !important; }
  30
  31 .ml-none {
  32   margin-left: 0 !important; }
  33
  34 .m-xxs {
  35   margin: 3px !important; }
  36
  37 .mx-xxs {
  38   margin-left: 3px !important;
  39   margin-right: 3px !important; }
  40
  41 .my-xxs {
  42   margin-top: 3px !important;
  43   margin-bottom: 3px !important; }
  44
  45 .mt-xxs {
  46   margin-top: 3px !important; }
  47
  48 .mr-xxs {
  49   margin-right: 3px !important; }
  50
  51 .mb-xxs {
  52   margin-bottom: 3px !important; }
  53
  54 .ml-xxs {
  55   margin-left: 3px !important; }
  56
  57 .m-xs {
  58   margin: 6px !important; }
  59
  60 .mx-xs {
  61   margin-left: 6px !important;
  62   margin-right: 6px !important; }
  63
  64 .my-xs {
  65   margin-top: 6px !important;
  66   margin-bottom: 6px !important; }
  67
  68 .mt-xs {
  69   margin-top: 6px !important; }
  70
  71 .mr-xs {
  72   margin-right: 6px !important; }
  73
  74 .mb-xs {
  75   margin-bottom: 6px !important; }
  76
  77 .ml-xs {
  78   margin-left: 6px !important; }
  79
  80 .m-s {
  81   margin: 12px !important; }
  82
  83 .mx-s {
  84   margin-left: 12px !important;
  85   margin-right: 12px !important; }
  86
  87 .my-s {
  88   margin-top: 12px !important;
  89   margin-bottom: 12px !important; }
  90
  91 .mt-s {
  92   margin-top: 12px !important; }
  93
  94 .mr-s {
  95   margin-right: 12px !important; }
  96
  97 .mb-s {
  98   margin-bottom: 12px !important; }
  99
 100 .ml-s {
 101   margin-left: 12px !important; }
 102
 103 .m-m {
 104   margin: 16px !important; }
 105
 106 .mx-m {
 107   margin-left: 16px !important;
 108   margin-right: 16px !important; }
 109
 110 .my-m {
 111   margin-top: 16px !important;
 112   margin-bottom: 16px !important; }
 113
 114 .mt-m {
 115   margin-top: 16px !important; }
 116
 117 .mr-m {
 118   margin-right: 16px !important; }
 119
 120 .mb-m {
 121   margin-bottom: 16px !important; }
 122
 123 .ml-m {
 124   margin-left: 16px !important; }
 125
 126 .m-l {
 127   margin: 24px !important; }
 128
 129 .mx-l {
 130   margin-left: 24px !important;
 131   margin-right: 24px !important; }
 132
 133 .my-l {
 134   margin-top: 24px !important;
 135   margin-bottom: 24px !important; }
 136
 137 .mt-l {
 138   margin-top: 24px !important; }
 139
 140 .mr-l {
 141   margin-right: 24px !important; }
 142
 143 .mb-l {
 144   margin-bottom: 24px !important; }
 145
 146 .ml-l {
 147   margin-left: 24px !important; }
 148
 149 .m-xl {
 150   margin: 32px !important; }
 151
 152 .mx-xl {
 153   margin-left: 32px !important;
 154   margin-right: 32px !important; }
 155
 156 .my-xl {
 157   margin-top: 32px !important;
 158   margin-bottom: 32px !important; }
 159
 160 .mt-xl {
 161   margin-top: 32px !important; }
 162
 163 .mr-xl {
 164   margin-right: 32px !important; }
 165
 166 .mb-xl {
 167   margin-bottom: 32px !important; }
 168
 169 .ml-xl {
 170   margin-left: 32px !important; }
 171
 172 .m-xxl {
 173   margin: 48px !important; }
 174
 175 .mx-xxl {
 176   margin-left: 48px !important;
 177   margin-right: 48px !important; }
 178
 179 .my-xxl {
 180   margin-top: 48px !important;
 181   margin-bottom: 48px !important; }
 182
 183 .mt-xxl {
 184   margin-top: 48px !important; }
 185
 186 .mr-xxl {
 187   margin-right: 48px !important; }
 188
 189 .mb-xxl {
 190   margin-bottom: 48px !important; }
 191
 192 .ml-xxl {
 193   margin-left: 48px !important; }
 194
 195 .p-none {
 196   padding: 0 !important; }
 197
 198 .px-none {
 199   padding-left: 0 !important;
 200   padding-right: 0 !important; }
 201
 202 .py-none {
 203   padding-top: 0 !important;
 204   padding-bottom: 0 !important; }
 205
 206 .pt-none {
 207   padding-top: 0 !important; }
 208
 209 .pr-none {
 210   padding-right: 0 !important; }
 211
 212 .pb-none {
 213   padding-bottom: 0 !important; }
 214
 215 .pl-none {
 216   padding-left: 0 !important; }
 217
 218 .p-xxs {
 219   padding: 3px !important; }
 220
 221 .px-xxs {
 222   padding-left: 3px !important;
 223   padding-right: 3px !important; }
 224
 225 .py-xxs {
 226   padding-top: 3px !important;
 227   padding-bottom: 3px !important; }
 228
 229 .pt-xxs {
 230   padding-top: 3px !important; }
 231
 232 .pr-xxs {
 233   padding-right: 3px !important; }
 234
 235 .pb-xxs {
 236   padding-bottom: 3px !important; }
 237
 238 .pl-xxs {
 239   padding-left: 3px !important; }
 240
 241 .p-xs {
 242   padding: 6px !important; }
 243
 244 .px-xs {
 245   padding-left: 6px !important;
 246   padding-right: 6px !important; }
 247
 248 .py-xs {
 249   padding-top: 6px !important;
 250   padding-bottom: 6px !important; }
 251
 252 .pt-xs {
 253   padding-top: 6px !important; }
 254
 255 .pr-xs {
 256   padding-right: 6px !important; }
 257
 258 .pb-xs {
 259   padding-bottom: 6px !important; }
 260
 261 .pl-xs {
 262   padding-left: 6px !important; }
 263
 264 .p-s {
 265   padding: 12px !important; }
 266
 267 .px-s {
 268   padding-left: 12px !important;
 269   padding-right: 12px !important; }
 270
 271 .py-s {
 272   padding-top: 12px !important;
 273   padding-bottom: 12px !important; }
 274
 275 .pt-s {
 276   padding-top: 12px !important; }
 277
 278 .pr-s {
 279   padding-right: 12px !important; }
 280
 281 .pb-s {
 282   padding-bottom: 12px !important; }
 283
 284 .pl-s {
 285   padding-left: 12px !important; }
 286
 287 .p-m {
 288   padding: 16px !important; }
 289
 290 .px-m {
 291   padding-left: 16px !important;
 292   padding-right: 16px !important; }
 293
 294 .py-m {
 295   padding-top: 16px !important;
 296   padding-bottom: 16px !important; }
 297
 298 .pt-m {
 299   padding-top: 16px !important; }
 300
 301 .pr-m {
 302   padding-right: 16px !important; }
 303
 304 .pb-m {
 305   padding-bottom: 16px !important; }
 306
 307 .pl-m {
 308   padding-left: 16px !important; }
 309
 310 .p-l {
 311   padding: 24px !important; }
 312
 313 .px-l {
 314   padding-left: 24px !important;
 315   padding-right: 24px !important; }
 316
 317 .py-l {
 318   padding-top: 24px !important;
 319   padding-bottom: 24px !important; }
 320
 321 .pt-l {
 322   padding-top: 24px !important; }
 323
 324 .pr-l {
 325   padding-right: 24px !important; }
 326
 327 .pb-l {
 328   padding-bottom: 24px !important; }
 329
 330 .pl-l {
 331   padding-left: 24px !important; }
 332
 333 .p-xl {
 334   padding: 32px !important; }
 335
 336 .px-xl {
 337   padding-left: 32px !important;
 338   padding-right: 32px !important; }
 339
 340 .py-xl {
 341   padding-top: 32px !important;
 342   padding-bottom: 32px !important; }
 343
 344 .pt-xl {
 345   padding-top: 32px !important; }
 346
 347 .pr-xl {
 348   padding-right: 32px !important; }
 349
 350 .pb-xl {
 351   padding-bottom: 32px !important; }
 352
 353 .pl-xl {
 354   padding-left: 32px !important; }
 355
 356 .p-xxl {
 357   padding: 48px !important; }
 358
 359 .px-xxl {
 360   padding-left: 48px !important;
 361   padding-right: 48px !important; }
 362
 363 .py-xxl {
 364   padding-top: 48px !important;
 365   padding-bottom: 48px !important; }
 366
 367 .pt-xxl {
 368   padding-top: 48px !important; }
 369
 370 .pr-xxl {
 371   padding-right: 48px !important; }
 372
 373 .pb-xxl {
 374   padding-bottom: 48px !important; }
 375
 376 .pl-xxl {
 377   padding-left: 48px !important; }
 378
 379 * {
 380   box-sizing: border-box;
 381   outline-color: #444444; }
 382
 383 *:focus {
 384   outline-style: dotted; }
 385
 386 html {
 387   height: 100%;
 388   overflow-y: scroll;
 389   background-color: #F2F2F2; }
 390   html.flexbox {
 391     overflow-y: hidden; }
 392
 393 body {
 394   font-size: 14px;
 395   line-height: 1.6;
 396   color: #444;
 397   -webkit-font-smoothing: antialiased;
 398   background-color: #F2F2F2; }
 399
 400 /**
 401  * Fonts
 402  */
 403 body, button, input, select, label, textarea {
 404   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
 405
 406 .Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base, code, span.code {
 407   font-family: "Lucida Console", "DejaVu Sans Mono", "Ubunto Mono", Monaco, monospace; }
 408
 409 /*
 410  * Header Styles
 411  */
 412 h1 {
 413   font-size: 3.425em;
 414   line-height: 1.22222222em;
 415   margin-top: 0.48888889em;
 416   margin-bottom: 0.48888889em; }
 417
 418 h2 {
 419   font-size: 2.8275em;
 420   line-height: 1.294117647em;
 421   margin-top: 0.8627451em;
 422   margin-bottom: 0.43137255em; }
 423
 424 h3 {
 425   font-size: 2.333em;
 426   line-height: 1.221428572em;
 427   margin-top: 0.78571429em;
 428   margin-bottom: 0.43137255em; }
 429
 430 h4 {
 431   font-size: 1.666em;
 432   line-height: 1.375em;
 433   margin-top: 0.78571429em;
 434   margin-bottom: 0.43137255em; }
 435
 436 h1, h2, h3, h4, h5, h6 {
 437   font-weight: 400;
 438   position: relative;
 439   display: block;
 440   color: #222; }
 441   h1 .subheader, h2 .subheader, h3 .subheader, h4 .subheader, h5 .subheader, h6 .subheader {
 442     font-size: 0.5em;
 443     line-height: 1em;
 444     color: #969696; }
 445
 446 h5 {
 447   font-size: 1.4em; }
 448
 449 h5, h6 {
 450   line-height: 1.2em;
 451   margin-top: 0.78571429em;
 452   margin-bottom: 0.66em; }
 453
 454 @media screen and (max-width: 600px) {
 455   h1 {
 456     font-size: 2.8275em; }
 457   h2 {
 458     font-size: 2.333em; }
 459   h3 {
 460     font-size: 1.666em; }
 461   h4 {
 462     font-size: 1.333em; }
 463   h5 {
 464     font-size: 1.161616em; } }
 465
 466 .list-heading {
 467   font-size: 2rem; }
 468
 469 h2.list-heading {
 470   font-size: 1.333rem; }
 471
 472 /*
 473  * Link styling
 474  */
 475 a {
 476   color: var(--color-primary);
 477   fill: var(--color-primary);
 478   cursor: pointer;
 479   text-decoration: none;
 480   transition: filter ease-in-out 80ms;
 481   line-height: 1.6; }
 482   a:hover {
 483     text-decoration: underline; }
 484   a.icon {
 485     display: inline-block; }
 486   a svg {
 487     position: relative;
 488     display: inline-block; }
 489   a:focus img:only-child {
 490     outline: 2px dashed var(--color-primary);
 491     outline-offset: 2px; }
 492
 493 .blended-links a {
 494   color: inherit; }
 495   .blended-links a svg {
 496     fill: currentColor; }
 497
 498 /*
 499  * Other HTML Text Elements
 500  */
 501 p, ul, ol, pre, table, blockquote {
 502   margin-top: 0.3em;
 503   margin-bottom: 1.375em; }
 504
 505 hr {
 506   border: 0;
 507   height: 1px;
 508   background: #EAEAEA;
 509   margin-bottom: 24px; }
 510   hr.faded {
 511     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF); }
 512   hr.margin-top, hr.even {
 513     margin-top: 24px; }
 514
 515 strong, b, .bold, .strong {
 516   font-weight: bold; }
 517   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 {
 518     font-weight: bolder; }
 519
 520 em, i, .italic {
 521   font-style: italic; }
 522
 523 small, p.small, span.small, .text-small {
 524   font-size: 0.75rem;
 525   color: #5e5e5e; }
 526
 527 sup, .superscript {
 528   vertical-align: super;
 529   font-size: 0.8em; }
 530
 531 sub, .subscript {
 532   vertical-align: sub;
 533   font-size: 0.8em; }
 534
 535 pre {
 536   font-size: 12px;
 537   background-color: #f5f5f5;
 538   border: 1px solid #DDD;
 539   padding-left: 31px;
 540   position: relative;
 541   padding-top: 3px;
 542   padding-bottom: 3px; }
 543   pre:after {
 544     content: '';
 545     display: block;
 546     position: absolute;
 547     top: 0;
 548     width: 29px;
 549     left: 0;
 550     background-color: #f5f5f5;
 551     height: 100%;
 552     border-right: 1px solid #DDD; }
 553
 554 @media print {
 555   pre {
 556     padding-left: 12px; }
 557   pre:after {
 558     display: none; } }
 559
 560 blockquote {
 561   display: block;
 562   position: relative;
 563   border-left: 4px solid var(--color-primary);
 564   background-color: #F8F8F8;
 565   padding: 12px 16px 12px 32px; }
 566   blockquote:before {
 567     content: "\201C";
 568     font-size: 2em;
 569     font-weight: bold;
 570     position: absolute;
 571     top: 12px;
 572     left: 12px;
 573     color: #777777; }
 574
 575 .code-base, code, span.code {
 576   background-color: #F8F8F8;
 577   font-size: 0.80em;
 578   border: 1px solid #DDD;
 579   border-radius: 3px; }
 580
 581 code {
 582   display: inline;
 583   padding: 1px 3px;
 584   white-space: pre;
 585   line-height: 1.2em;
 586   margin-bottom: 1.2em; }
 587
 588 span.code {
 589   padding: 1px 6px; }
 590
 591 pre code {
 592   background-color: transparent;
 593   border: 0;
 594   font-size: 1em;
 595   display: block;
 596   line-height: 1.6; }
 597
 598 span.highlight {
 599   font-weight: bold;
 600   padding: 2px 4px; }
 601
 602 /*
 603  * Lists
 604  */
 605 ul, ol {
 606   overflow: hidden; }
 607   ul p, ol p {
 608     margin: 0; }
 609
 610 ul {
 611   padding-left: 20.8px;
 612   padding-right: 20.8px;
 613   list-style: disc; }
 614   ul ul {
 615     list-style: circle;
 616     margin-top: 0;
 617     margin-bottom: 0; }
 618   ul label {
 619     margin: 0; }
 620
 621 ol {
 622   list-style: decimal;
 623   padding-left: 32px;
 624   padding-right: 32px; }
 625
 626 li.checkbox-item, li.task-list-item {
 627   list-style: none;
 628   margin-left: -20.8px; }
 629   li.checkbox-item input[type="checkbox"], li.task-list-item input[type="checkbox"] {
 630     margin-right: 6px; }
 631
 632 /*
 633  * Generic text styling classes
 634  */
 635 .underlined {
 636   text-decoration: underline; }
 637
 638 .text-center {
 639   text-align: center; }
 640
 641 .text-left {
 642   text-align: left; }
 643
 644 .text-right {
 645   text-align: right; }
 646
 647 @media screen and (min-width: 360px) {
 648   .text-xxs-center {
 649     text-align: center; }
 650   .text-xxs-left {
 651     text-align: left; }
 652   .text-xxs-right {
 653     text-align: right; } }
 654
 655 @media screen and (min-width: 400px) {
 656   .text-xs-center {
 657     text-align: center; }
 658   .text-xs-left {
 659     text-align: left; }
 660   .text-xs-right {
 661     text-align: right; } }
 662
 663 @media screen and (min-width: 600px) {
 664   .text-s-center {
 665     text-align: center; }
 666   .text-s-left {
 667     text-align: left; }
 668   .text-s-right {
 669     text-align: right; } }
 670
 671 @media screen and (min-width: 880px) {
 672   .text-m-center {
 673     text-align: center; }
 674   .text-m-left {
 675     text-align: left; }
 676   .text-m-right {
 677     text-align: right; } }
 678
 679 @media screen and (min-width: 1000px) {
 680   .text-l-center {
 681     text-align: center; }
 682   .text-l-left {
 683     text-align: left; }
 684   .text-l-right {
 685     text-align: right; } }
 686
 687 @media screen and (min-width: 1100px) {
 688   .text-xl-center {
 689     text-align: center; }
 690   .text-xl-left {
 691     text-align: left; }
 692   .text-xl-right {
 693     text-align: right; } }
 694
 695 .text-bigger {
 696   font-size: 1.1em; }
 697
 698 .text-large {
 699   font-size: 1.6666em; }
 700
 701 .no-color {
 702   color: inherit; }
 703
 704 .break-text {
 705   word-wrap: break-word;
 706   overflow-wrap: break-word; }
 707
 708 .limit-text {
 709   white-space: nowrap;
 710   overflow: hidden;
 711   text-overflow: ellipsis; }
 712
 713 /**
 714  * Grouping
 715  */
 716 .header-group {
 717   margin: 16px 0; }
 718   .header-group h1, .header-group h2, .header-group h3, .header-group h4, .header-group h5, .header-group h6 {
 719     margin: 0; }
 720
 721 span.sep {
 722   color: #BBB;
 723   padding: 0 6px; }
 724
 725 .list > * {
 726   display: block; }
 727
 728 /**
 729   * Icons
 730   */
 731 .svg-icon {
 732   width: 1em;
 733   height: 1em;
 734   display: inline-block;
 735   position: relative;
 736   bottom: -0.105em;
 737   margin-right: 6px;
 738   pointer-events: none; }
 739
 740 /**
 741  * Generic content container
 742  */
 743 .container {
 744   max-width: 1400px;
 745   margin-left: auto;
 746   margin-right: auto;
 747   padding-left: 16px;
 748   padding-right: 16px; }
 749   .container.small {
 750     max-width: 840px; }
 751   .container.very-small {
 752     max-width: 480px; }
 753
 754 /**
 755  * Core grid layout system
 756  */
 757 .grid {
 758   display: grid;
 759   grid-column-gap: 24px;
 760   grid-row-gap: 24px; }
 761   .grid.half {
 762     grid-template-columns: 1fr 1fr; }
 763   .grid.third {
 764     grid-template-columns: 1fr 1fr 1fr; }
 765   .grid.left-focus {
 766     grid-template-columns: 2fr 1fr; }
 767   .grid.right-focus {
 768     grid-template-columns: 1fr 3fr; }
 769   .grid.gap-y-xs {
 770     grid-row-gap: 6px; }
 771   .grid.gap-xl {
 772     grid-column-gap: 32px;
 773     grid-row-gap: 32px; }
 774   .grid.gap-xxl {
 775     grid-column-gap: 48px;
 776     grid-row-gap: 48px; }
 777   .grid.v-center {
 778     align-items: center; }
 779   .grid.no-gap {
 780     grid-row-gap: 0;
 781     grid-column-gap: 0; }
 782   .grid.no-row-gap {
 783     grid-row-gap: 0; }
 784
 785 @media screen and (max-width: 880px) {
 786   .grid.third:not(.no-break) {
 787     grid-template-columns: 1fr 1fr; }
 788   .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
 789     grid-template-columns: 1fr; }
 790   .grid.half.collapse-xs {
 791     grid-template-columns: 1fr 1fr; }
 792   .grid.gap-xl {
 793     grid-column-gap: 16px;
 794     grid-row-gap: 16px; }
 795   .grid.right-focus.reverse-collapse > *:nth-child(2) {
 796     order: 0; }
 797   .grid.right-focus.reverse-collapse > *:nth-child(1) {
 798     order: 1; } }
 799
 800 @media screen and (max-width: 600px) {
 801   .grid.third:not(.no-break) {
 802     grid-template-columns: 1fr; } }
 803
 804 @media screen and (max-width: 400px) {
 805   .grid.half.collapse-xs {
 806     grid-template-columns: 1fr; } }
 807
 808 /**
 809  * Flexbox layout system
 810  */
 811 body.flexbox {
 812   display: flex;
 813   flex-direction: column;
 814   align-items: stretch;
 815   height: 100%;
 816   min-height: 100%;
 817   max-height: 100%;
 818   overflow: hidden; }
 819   body.flexbox #content {
 820     flex: 1;
 821     display: flex;
 822     min-height: 0; }
 823
 824 .flex-fill {
 825   display: flex;
 826   align-items: stretch;
 827   min-height: 0;
 828   max-width: 100%;
 829   position: relative;
 830   overflow-y: hidden; }
 831
 832 .flex {
 833   min-height: 0;
 834   flex: 1; }
 835
 836 /**
 837  * Display and float utilities
 838  */
 839 .block {
 840   display: block;
 841   position: relative; }
 842
 843 .inline {
 844   display: inline; }
 845
 846 .block.inline {
 847   display: inline-block; }
 848
 849 .hidden {
 850   display: none; }
 851
 852 .float {
 853   float: left; }
 854   .float.right {
 855     float: right; }
 856
 857 /**
 858  * Visibility
 859  */
 860 @media screen and (max-width: 360px) {
 861   .hide-under-xxs {
 862     display: none !important; } }
 863
 864 @media screen and (min-width: 360px) {
 865   .hide-over-xxs {
 866     display: none !important; } }
 867
 868 @media screen and (max-width: 400px) {
 869   .hide-under-xs {
 870     display: none !important; } }
 871
 872 @media screen and (min-width: 400px) {
 873   .hide-over-xs {
 874     display: none !important; } }
 875
 876 @media screen and (max-width: 600px) {
 877   .hide-under-s {
 878     display: none !important; } }
 879
 880 @media screen and (min-width: 600px) {
 881   .hide-over-s {
 882     display: none !important; } }
 883
 884 @media screen and (max-width: 880px) {
 885   .hide-under-m {
 886     display: none !important; } }
 887
 888 @media screen and (min-width: 880px) {
 889   .hide-over-m {
 890     display: none !important; } }
 891
 892 @media screen and (max-width: 1000px) {
 893   .hide-under-l {
 894     display: none !important; } }
 895
 896 @media screen and (min-width: 1000px) {
 897   .hide-over-l {
 898     display: none !important; } }
 899
 900 @media screen and (max-width: 1100px) {
 901   .hide-under-xl {
 902     display: none !important; } }
 903
 904 @media screen and (min-width: 1100px) {
 905   .hide-over-xl {
 906     display: none !important; } }
 907
 908 /**
 909  * Inline content columns
 910  */
 911 .dual-column-content {
 912   columns: 2; }
 913
 914 @media screen and (max-width: 880px) {
 915   .dual-column-content {
 916     columns: 1; } }
 917
 918 /**
 919  * Fixes
 920  */
 921 .clearfix:before,
 922 .clearfix:after {
 923   content: " ";
 924   display: table; }
 925
 926 .clearfix:after {
 927   clear: both; }
 928
 929 /**
 930  * View Layouts
 931  */
 932 .tri-layout-container {
 933   display: grid;
 934   margin-left: 32px;
 935   margin-right: 32px;
 936   grid-template-columns: 1fr 4fr 1fr;
 937   grid-template-areas: "a b c";
 938   grid-column-gap: 48px; }
 939   .tri-layout-container .tri-layout-right {
 940     grid-area: c;
 941     min-width: 0; }
 942   .tri-layout-container .tri-layout-left {
 943     grid-area: a;
 944     min-width: 0; }
 945   .tri-layout-container .tri-layout-middle {
 946     grid-area: b;
 947     padding-top: 16px; }
 948
 949 @media screen and (max-width: 1400px) {
 950   .tri-layout-container {
 951     grid-template-areas: "c b b" "a b b" ". b b";
 952     grid-template-columns: 1fr 3fr;
 953     grid-template-rows: min-content min-content 1fr;
 954     padding-right: 24px; } }
 955
 956 @media screen and (min-width: 1000px) and (max-width: 1400px) {
 957   .tri-layout-left {
 958     position: sticky;
 959     top: 16px; } }
 960
 961 @media screen and (min-width: 1400px) {
 962   .tri-layout-left-contents, .tri-layout-right-contents {
 963     padding: 16px;
 964     position: sticky;
 965     top: 16px;
 966     max-height: 100vh;
 967     min-height: 50vh;
 968     overflow-y: scroll;
 969     overflow-x: hidden;
 970     scrollbar-width: none;
 971     -ms-overflow-style: none; }
 972     .tri-layout-left-contents::-webkit-scrollbar, .tri-layout-right-contents::-webkit-scrollbar {
 973       display: none; }
 974   .tri-layout-middle-contents {
 975     max-width: 940px;
 976     margin: 0 auto; } }
 977
 978 @media screen and (max-width: 1000px) {
 979   .tri-layout-container {
 980     grid-template-areas: none;
 981     grid-template-columns: 1fr;
 982     grid-column-gap: 0;
 983     padding-right: 6px;
 984     padding-left: 6px; }
 985     .tri-layout-container .tri-layout-left-contents, .tri-layout-container .tri-layout-right-contents {
 986       padding-left: 16px;
 987       padding-right: 16px; }
 988     .tri-layout-container .tri-layout-left > *, .tri-layout-container .tri-layout-right > * {
 989       display: none;
 990       pointer-events: none; }
 991     .tri-layout-container .tri-layout-left, .tri-layout-container .tri-layout-right {
 992       grid-area: none;
 993       grid-column: 1/1;
 994       grid-row: 1;
 995       padding-top: 0 !important; }
 996     .tri-layout-container .tri-layout-middle {
 997       grid-area: none;
 998       grid-row: 3;
 999       grid-column: 1/1;
1000       z-index: 1;
1001       overflow: hidden;
1002       transition: transform ease-in-out 240ms; }
1003     .tri-layout-container .tri-layout-left {
1004       grid-row: 2; }
1005     .tri-layout-container.show-info {
1006       overflow: hidden; }
1007       .tri-layout-container.show-info .tri-layout-middle {
1008         display: none; }
1009       .tri-layout-container.show-info .tri-layout-right > *, .tri-layout-container.show-info .tri-layout-left > * {
1010         display: block;
1011         pointer-events: auto; } }
1012
1013 @media screen and (min-width: 1000px) {
1014   .tri-layout-mobile-tabs {
1015     display: none; }
1016   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
1017     opacity: 0.6;
1018     transition: opacity ease-in-out 120ms; }
1019     .tri-layout-left-contents > *:hover, .tri-layout-right-contents > *:hover {
1020       opacity: 1; }
1021     .tri-layout-left-contents > *:focus-within, .tri-layout-right-contents > *:focus-within {
1022       opacity: 1; } }
1023
1024 @media screen and (max-width: 880px) {
1025   .tri-layout-container {
1026     margin-left: 0;
1027     margin-right: 0; } }
1028
1029 /**
1030  * Callouts
1031  */
1032 .callout {
1033   border-left: 3px solid #BBB;
1034   background-color: #EEE;
1035   padding: 12px 12px 12px 32px;
1036   display: block;
1037   position: relative; }
1038   .callout:before {
1039     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+");
1040     background-repeat: no-repeat;
1041     content: '';
1042     width: 1.2em;
1043     height: 1.2em;
1044     left: 8px;
1045     top: 50%;
1046     margin-top: -9px;
1047     display: inline-block;
1048     position: absolute;
1049     line-height: 1;
1050     opacity: 0.8; }
1051   .callout.success {
1052     border-left-color: #0f7d15;
1053     background-color: #eafdeb;
1054     color: #063409; }
1055   .callout.success:before {
1056     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+"); }
1057   .callout.danger {
1058     border-left-color: #ab0f0e;
1059     background-color: #fcdbdb;
1060     color: #4d0706; }
1061   .callout.danger:before {
1062     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="); }
1063   .callout.info {
1064     border-left-color: #0288D1;
1065     background-color: #d3efff;
1066     color: #01466c; }
1067   .callout.warning {
1068     border-left-color: #cf4d03;
1069     background-color: #fee3d3;
1070     color: #6a2802; }
1071   .callout.warning:before {
1072     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4="); }
1073
1074 /**
1075  * Card-style blocks
1076  */
1077 .card {
1078   background-color: #FFF;
1079   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
1080   border-radius: 3px;
1081   border: 1px solid transparent; }
1082   .card .body, .card p.empty-text {
1083     padding: 16px; }
1084   .card a, .card p {
1085     word-wrap: break-word;
1086     word-break: break-word; }
1087
1088 .card-title {
1089   padding: 16px 16px 6px;
1090   margin: 0;
1091   font-size: 14px;
1092   color: #222;
1093   fill: #222;
1094   font-weight: 400; }
1095
1096 .card-title a {
1097   line-height: 1; }
1098
1099 .card.border-card {
1100   border: 1px solid #DDD; }
1101
1102 .card.drag-card {
1103   border: 1px solid #DDD;
1104   border-radius: 4px;
1105   display: flex;
1106   padding: 0 0 0 40px;
1107   margin: 12px 0;
1108   position: relative; }
1109   .card.drag-card .drag-card-action {
1110     cursor: pointer; }
1111   .card.drag-card .handle, .card.drag-card .drag-card-action {
1112     display: flex;
1113     align-items: center;
1114     text-align: center;
1115     justify-content: center;
1116     width: 28px;
1117     flex-grow: 0;
1118     padding: 0 6px; }
1119     .card.drag-card .handle:hover, .card.drag-card .drag-card-action:hover {
1120       background-color: #EEE; }
1121     .card.drag-card .handle .svg-icon, .card.drag-card .drag-card-action .svg-icon {
1122       margin-right: 0px; }
1123   .card.drag-card > div .outline input {
1124     margin: 12px 0;
1125     width: 100%; }
1126   .card.drag-card .handle {
1127     background-color: #EEE;
1128     left: 0;
1129     position: absolute;
1130     top: 0;
1131     bottom: 0; }
1132   .card.drag-card > div {
1133     padding: 0 12px;
1134     max-width: 80%;
1135     flex: 1; }
1136
1137 .grid-card {
1138   display: flex;
1139   flex-direction: column;
1140   border: 1px solid #ddd;
1141   margin-bottom: 24px;
1142   border-radius: 4px;
1143   overflow: hidden;
1144   min-width: 100px;
1145   color: #444;
1146   transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms; }
1147   .grid-card:hover {
1148     color: #444;
1149     text-decoration: none;
1150     box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1); }
1151   .grid-card h2 {
1152     width: 100%;
1153     font-size: 1.5em;
1154     margin: 0 0 10px; }
1155   .grid-card p {
1156     font-size: .7rem;
1157     margin: 0;
1158     line-height: 1.6em; }
1159   .grid-card .grid-card-content {
1160     flex: 1;
1161     border-top: 0;
1162     border-bottom-width: 2px; }
1163   .grid-card .grid-card-content, .grid-card .grid-card-footer {
1164     padding: 24px; }
1165   .grid-card .grid-card-content + .grid-card-footer {
1166     padding-top: 0; }
1167
1168 .book-grid-item .grid-card-footer p.small {
1169   font-size: .8em;
1170   margin: 0; }
1171
1172 .content-wrap.card {
1173   padding: 16px 48px;
1174   margin-left: auto;
1175   margin-right: auto;
1176   margin-bottom: 32px;
1177   overflow: initial;
1178   min-height: 60vh; }
1179   .content-wrap.card.auto-height {
1180     min-height: 0; }
1181   .content-wrap.card.fill-width {
1182     width: 100%; }
1183
1184 @media screen and (max-width: 1400px) {
1185   .content-wrap.card {
1186     padding: 16px 32px; } }
1187
1188 @media screen and (max-width: 880px) {
1189   .content-wrap.card {
1190     padding: 16px 24px; } }
1191
1192 @media screen and (max-width: 600px) {
1193   .content-wrap.card {
1194     padding: 16px 16px; } }
1195
1196 /**
1197  * Tags
1198  */
1199 .tag-item {
1200   display: inline-flex;
1201   margin-bottom: 6px;
1202   margin-right: 6px;
1203   border-radius: 4px;
1204   border: 1px solid #CCC;
1205   overflow: hidden;
1206   font-size: 0.85em; }
1207   .tag-item a, .tag-item a:hover, .tag-item a:active {
1208     padding: 4px 8px;
1209     color: #777;
1210     transition: background-color ease-in-out 80ms;
1211     text-decoration: none; }
1212   .tag-item a:hover {
1213     background-color: rgba(255, 255, 255, 0.7); }
1214   .tag-item svg {
1215     fill: #888; }
1216   .tag-item .tag-value {
1217     border-left: 1px solid #DDD;
1218     background-color: rgba(255, 255, 255, 0.5); }
1219
1220 .tag-list div:last-child .tag-item {
1221   margin-bottom: 0; }
1222
1223 .input-base, .fake-input, input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"],
1224 input[type="color"], input[type="password"], select, textarea {
1225   background-color: #FFF;
1226   border-radius: 3px;
1227   border: 1px solid #D4D4D4;
1228   display: inline-block;
1229   font-size: 12px;
1230   padding: 9px;
1231   color: #666;
1232   width: 250px;
1233   max-width: 100%; }
1234   .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"],
1235   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"],
1236   input.invalid[type="color"], input.invalid[type="password"], select.invalid, textarea.invalid {
1237     border: 1px solid #ab0f0e; }
1238   .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"],
1239   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"],
1240   input.valid[type="color"], input.valid[type="password"], select.valid, textarea.valid {
1241     border: 1px solid #0f7d15; }
1242   .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"],
1243   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"],
1244   input[disabled][type="color"], input[disabled][type="password"], select[disabled], textarea[disabled] {
1245     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==); }
1246   .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"],
1247   input:focus[type="color"], input:focus[type="password"], select:focus, textarea:focus {
1248     border-color: var(--color-primary);
1249     outline: 1px solid var(--color-primary); }
1250
1251 .fake-input {
1252   overflow: auto; }
1253
1254 #html-editor {
1255   display: none; }
1256
1257 #markdown-editor {
1258   position: relative;
1259   z-index: 5; }
1260   #markdown-editor #markdown-editor-input {
1261     font-style: normal;
1262     font-weight: 400;
1263     padding: 6px 16px;
1264     color: #444;
1265     border-radius: 0;
1266     max-height: 100%;
1267     flex: 1;
1268     border: 0;
1269     width: 100%; }
1270     #markdown-editor #markdown-editor-input:focus {
1271       outline: 0; }
1272   #markdown-editor .markdown-display, #markdown-editor .markdown-editor-wrap {
1273     flex: 1;
1274     position: relative; }
1275   #markdown-editor .markdown-editor-wrap {
1276     display: flex;
1277     flex-direction: column;
1278     border: 1px solid #DDD;
1279     width: 50%;
1280     max-width: 50%; }
1281
1282 @media screen and (max-width: 880px) {
1283   #markdown-editor {
1284     flex-direction: column; }
1285   #markdown-editor .markdown-editor-wrap {
1286     width: 100%;
1287     max-width: 100%; }
1288   #markdown-editor .editor-toolbar {
1289     padding: 0; }
1290   #markdown-editor .editor-toolbar > * {
1291     padding: 6px 12px; }
1292   .editor-toolbar-label {
1293     float: none !important;
1294     border-bottom: 1px solid #DDD;
1295     display: block; }
1296   .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
1297     display: none; }
1298   #markdown-editor .markdown-editor-wrap:not(.active) {
1299     flex-grow: 0;
1300     flex: none; } }
1301
1302 .markdown-display {
1303   margin-left: -1px; }
1304
1305 .markdown-editor-display {
1306   background-color: #FFFFFF; }
1307   .markdown-editor-display body {
1308     background-color: #FFFFFF;
1309     padding-left: 16px;
1310     padding-right: 16px; }
1311   .markdown-editor-display [drawio-diagram]:hover {
1312     outline: 2px solid var(--color-primary); }
1313
1314 .editor-toolbar {
1315   width: 100%;
1316   padding: 6px 16px;
1317   font-size: 11px;
1318   line-height: 1.6;
1319   border-bottom: 1px solid #DDD;
1320   background-color: #EEE;
1321   flex: none; }
1322   .editor-toolbar:after {
1323     content: '';
1324     display: block;
1325     clear: both; }
1326
1327 label {
1328   display: block;
1329   line-height: 1.4em;
1330   font-size: 0.94em;
1331   font-weight: 400;
1332   color: #666;
1333   padding-bottom: 2px;
1334   margin-bottom: 0.2em; }
1335   label.inline {
1336     display: inline-block; }
1337
1338 label.radio, label.checkbox {
1339   font-weight: 400;
1340   user-select: none; }
1341   label.radio input[type="radio"], label.radio input[type="checkbox"], label.checkbox input[type="radio"], label.checkbox input[type="checkbox"] {
1342     margin-right: 6px; }
1343
1344 label.inline.checkbox {
1345   margin-right: 16px; }
1346
1347 label + p.small {
1348   margin-bottom: 0.8em; }
1349
1350 table.form-table {
1351   max-width: 100%; }
1352   table.form-table td {
1353     overflow: hidden;
1354     padding: 1.5px 0; }
1355
1356 input[type=date] {
1357   width: 190px; }
1358
1359 input[type=color] {
1360   height: 60px; }
1361
1362 .toggle-switch {
1363   user-select: none;
1364   display: inline-grid;
1365   grid-template-columns: 28px 1fr;
1366   align-items: center;
1367   margin: 16px 0; }
1368   .toggle-switch .custom-checkbox {
1369     width: 16px;
1370     height: 16px;
1371     border-radius: 2px;
1372     display: inline-block;
1373     border: 2px solid currentColor;
1374     opacity: 0.6;
1375     overflow: hidden;
1376     fill: currentColor; }
1377     .toggle-switch .custom-checkbox .svg-icon {
1378       width: 100%;
1379       height: 100%;
1380       margin: 0;
1381       bottom: auto;
1382       top: -1.5px;
1383       left: 0;
1384       transition: transform ease-in-out 120ms;
1385       transform: scale(0);
1386       transform-origin: center center; }
1387   .toggle-switch input[type=checkbox] {
1388     display: none; }
1389   .toggle-switch input[type=checkbox]:checked + .custom-checkbox .svg-icon {
1390     transform: scale(1); }
1391   .toggle-switch .custom-checkbox:hover {
1392     background-color: rgba(0, 0, 0, 0.05);
1393     opacity: 0.8; }
1394
1395 .toggle-switch-list .toggle-switch {
1396   margin: 6px 0; }
1397
1398 .toggle-switch-list.compact .toggle-switch {
1399   margin: 1px 0; }
1400
1401 .form-group {
1402   margin-bottom: 12px; }
1403
1404 .setting-list > div {
1405   border-bottom: 1px solid #DDD;
1406   padding: 32px 0; }
1407   .setting-list > div:last-child {
1408     border-bottom: none; }
1409
1410 .setting-list-label {
1411   color: #222;
1412   font-size: 1rem; }
1413
1414 .setting-list-label + p.small {
1415   margin-bottom: 0; }
1416
1417 .setting-list-label + .grid {
1418   margin-top: 16px; }
1419
1420 .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 {
1421   width: 100%; }
1422
1423 .simple-code-input {
1424   background-color: #F8F8F8;
1425   font-family: monospace;
1426   font-size: 12px;
1427   min-height: 100px;
1428   display: block;
1429   width: 100%; }
1430
1431 .form-group div.text-pos, .form-group div.text-neg, .form-group p.text-post, .form-group p.text-neg {
1432   padding: 6px 0; }
1433
1434 .form-group[collapsible] {
1435   padding: 0 16px;
1436   border: 1px solid #DDD;
1437   border-radius: 4px; }
1438   .form-group[collapsible] .collapse-title {
1439     margin-left: -16px;
1440     margin-right: -16px;
1441     padding: 12px 16px;
1442     display: block;
1443     width: calc(100% + 32px);
1444     text-align: left; }
1445   .form-group[collapsible] .collapse-title, .form-group[collapsible] .collapse-title label {
1446     cursor: pointer; }
1447   .form-group[collapsible] .collapse-title label {
1448     padding-bottom: 0;
1449     margin-bottom: 0;
1450     color: inherit; }
1451   .form-group[collapsible] .collapse-title label:before {
1452     display: inline-block;
1453     content: '▸';
1454     margin-right: 16px;
1455     transition: all ease-in-out 400ms;
1456     transform: rotate(0); }
1457   .form-group[collapsible] .collapse-content {
1458     display: none;
1459     padding-bottom: 16px; }
1460   .form-group[collapsible].open .collapse-title label:before {
1461     transform: rotate(90deg); }
1462
1463 .inline-input-style, .title-input input[type="text"], .description-input textarea {
1464   display: block;
1465   width: 100%;
1466   padding: 12px; }
1467
1468 .title-input input[type="text"] {
1469   margin-top: 0;
1470   font-size: 2em; }
1471
1472 .title-input.page-title {
1473   font-size: 0.8em; }
1474   .title-input.page-title .input {
1475     border: 0;
1476     margin-bottom: -1px; }
1477   .title-input.page-title input[type="text"] {
1478     max-width: 840px;
1479     margin: 0 auto;
1480     border: none; }
1481
1482 .page-title input {
1483   display: block;
1484   width: 100%;
1485   font-size: 1.4em; }
1486
1487 .description-input textarea {
1488   font-size: 14px;
1489   color: #666;
1490   width: 100%; }
1491
1492 div[editor-type="markdown"] .title-input.page-title input[type="text"] {
1493   max-width: 100%; }
1494
1495 .search-box {
1496   max-width: 100%;
1497   position: relative; }
1498   .search-box button {
1499     background-color: transparent;
1500     border: none;
1501     fill: #666;
1502     padding: 0;
1503     cursor: pointer;
1504     position: absolute;
1505     left: 8px;
1506     top: 9px; }
1507   .search-box input {
1508     display: block;
1509     padding-left: 28px;
1510     width: 300px;
1511     max-width: 100%; }
1512   .search-box.flexible input {
1513     width: 100%; }
1514   .search-box .search-box-cancel {
1515     left: auto;
1516     right: 0; }
1517
1518 .outline > input {
1519   border: 0;
1520   border-bottom: 2px solid #DDD;
1521   border-radius: 0; }
1522   .outline > input:focus, .outline > input:active {
1523     border: 0;
1524     border-bottom: 2px solid #AAA;
1525     outline: 0; }
1526
1527 .image-picker img {
1528   background-color: #BBB;
1529   max-width: 100%; }
1530
1531 .custom-file-input {
1532   overflow: hidden;
1533   padding: 0;
1534   position: absolute;
1535   white-space: nowrap;
1536   width: 1px;
1537   height: 1px;
1538   border: 0;
1539   clip: rect(0, 0, 0, 0); }
1540
1541 .custom-file-input:focus + label {
1542   border-color: var(--color-primary);
1543   outline: 1px solid var(--color-primary); }
1544
1545 table {
1546   min-width: 100px;
1547   max-width: 100%; }
1548   table thead {
1549     background-color: #F8F8F8;
1550     font-weight: 500; }
1551   table td, table th {
1552     min-width: 10px;
1553     padding: 6px 8px;
1554     border: 1px solid #DDD;
1555     overflow: auto;
1556     line-height: 1.2; }
1557   table td p, table th p {
1558     margin: 0; }
1559
1560 table.table {
1561   width: 100%; }
1562   table.table tr td, table.table tr th {
1563     border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
1564   table.table th, table.table td {
1565     text-align: left;
1566     border: none;
1567     padding: 12px 12px;
1568     vertical-align: middle;
1569     margin: 0; }
1570   table.table th {
1571     font-weight: bold; }
1572   table.table tr:hover {
1573     background-color: #EEE; }
1574   table.table .text-right {
1575     text-align: right; }
1576   table.table .text-center {
1577     text-align: center; }
1578   table.table td.actions {
1579     overflow: visible; }
1580   table.table a {
1581     display: inline-block; }
1582
1583 table.no-style td {
1584   border: 0;
1585   padding: 0; }
1586
1587 table.list-table {
1588   margin: -6px; }
1589   table.list-table td {
1590     border: 0;
1591     vertical-align: middle;
1592     padding: 6px; }
1593
1594 /**
1595  * Includes the main navigation header and the faded toolbar.
1596  */
1597 header .grid {
1598   grid-template-columns: auto min-content auto; }
1599
1600 @media screen and (max-width: 1000px) {
1601   header .grid {
1602     grid-template-columns: 1fr;
1603     grid-row-gap: 0; } }
1604
1605 header {
1606   position: relative;
1607   display: block;
1608   z-index: 11;
1609   top: 0;
1610   color: #fff;
1611   fill: #fff;
1612   border-bottom: 1px solid #DDD;
1613   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
1614   padding: 3px 0; }
1615   header .links {
1616     display: inline-block;
1617     vertical-align: top; }
1618   header .links a {
1619     display: inline-block;
1620     padding: 16px;
1621     color: #FFF;
1622     fill: #FFF; }
1623   header .dropdown-container {
1624     padding-left: 16px;
1625     padding-right: 0; }
1626   header .avatar, header .user-name {
1627     display: inline-block; }
1628   header .avatar {
1629     width: 30px;
1630     height: 30px; }
1631   header .user-name {
1632     vertical-align: top;
1633     position: relative;
1634     display: inline-block;
1635     cursor: pointer; }
1636     header .user-name > * {
1637       vertical-align: top; }
1638     header .user-name > span {
1639       padding-left: 6px;
1640       display: inline-block;
1641       padding-top: 3px; }
1642     header .user-name > svg {
1643       padding-top: 4px;
1644       font-size: 18px; }
1645     @media screen and (min-width: 1000px) and (max-width: 1100px) {
1646       header .user-name {
1647         padding-left: 6px; }
1648         header .user-name .name {
1649           display: none; } }
1650
1651 .header *, .primary-background * {
1652   outline-color: #FFF; }
1653
1654 .header-search {
1655   display: inline-block; }
1656
1657 header .search-box {
1658   display: inline-block;
1659   margin-top: 10px; }
1660   header .search-box input {
1661     background-color: rgba(0, 0, 0, 0.2);
1662     border: 1px solid rgba(255, 255, 255, 0.2);
1663     border-radius: 40px;
1664     color: #EEE;
1665     z-index: 2;
1666     padding-left: 40px; }
1667     header .search-box input:focus {
1668       outline: none;
1669       border: 1px solid rgba(255, 255, 255, 0.6); }
1670   header .search-box button {
1671     fill: #EEE;
1672     z-index: 1;
1673     left: 16px; }
1674     header .search-box button svg {
1675       margin-right: 0; }
1676   header .search-box ::-webkit-input-placeholder {
1677     /* Chrome/Opera/Safari */
1678     color: #DDD; }
1679   header .search-box ::-moz-placeholder {
1680     /* Firefox 19+ */
1681     color: #DDD; }
1682   @media screen and (min-width: 1000px) and (max-width: 1100px) {
1683     header .search-box {
1684       max-width: 200px; } }
1685
1686 .logo {
1687   display: inline-block; }
1688   .logo:hover {
1689     color: #FFF;
1690     text-decoration: none; }
1691
1692 .logo-text {
1693   display: inline-block;
1694   font-size: 1.8em;
1695   color: #fff;
1696   font-weight: 400;
1697   padding: 14px 24px 14px 0;
1698   vertical-align: top;
1699   line-height: 1; }
1700
1701 .logo-image {
1702   margin: 6px 12px 6px 0;
1703   vertical-align: top;
1704   height: 43px; }
1705
1706 .mobile-menu-toggle {
1707   color: #FFF;
1708   fill: #FFF;
1709   font-size: 2em;
1710   border: 2px solid rgba(255, 255, 255, 0.8);
1711   border-radius: 4px;
1712   padding: 0 6px;
1713   position: absolute;
1714   right: 16px;
1715   top: 13px;
1716   line-height: 1;
1717   cursor: pointer;
1718   user-select: none; }
1719   .mobile-menu-toggle svg {
1720     margin: 0;
1721     bottom: -2px; }
1722
1723 @media screen and (max-width: 1000px) {
1724   header .header-links {
1725     display: none;
1726     background-color: #FFF;
1727     z-index: 10;
1728     right: 16px;
1729     border-radius: 4px;
1730     overflow: hidden;
1731     position: absolute;
1732     box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.13);
1733     margin-top: -6px; }
1734     header .header-links.show {
1735       display: block; }
1736   header .links a, header .dropdown-container ul li a {
1737     text-align: left;
1738     display: block;
1739     padding: 12px 16px;
1740     color: #444;
1741     fill: #444; }
1742     header .links a svg, header .dropdown-container ul li a svg {
1743       margin-right: 12px; }
1744     header .links a:hover, header .dropdown-container ul li a:hover {
1745       background-color: #EEE;
1746       color: #444;
1747       fill: #444;
1748       text-decoration: none; }
1749   header .dropdown-container {
1750     display: block;
1751     padding-left: 0; }
1752   header .links {
1753     display: block; }
1754   header .dropdown-container ul {
1755     display: block !important;
1756     position: relative;
1757     background-color: transparent;
1758     border: 0;
1759     padding: 0;
1760     margin: 0;
1761     box-shadow: none; } }
1762
1763 .tri-layout-mobile-tabs {
1764   position: sticky;
1765   top: 0;
1766   z-index: 5;
1767   background-color: #FFF;
1768   border-bottom: 1px solid #DDD;
1769   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1); }
1770
1771 .tri-layout-mobile-tab {
1772   text-align: center;
1773   border-bottom: 3px solid #BBB;
1774   cursor: pointer; }
1775   .tri-layout-mobile-tab:first-child {
1776     border-right: 1px solid #DDD; }
1777   .tri-layout-mobile-tab.active {
1778     border-bottom-color: currentColor; }
1779
1780 .breadcrumbs {
1781   display: flex;
1782   flex-direction: row;
1783   align-items: center;
1784   justify-content: flex-start;
1785   flex-wrap: wrap;
1786   opacity: 0.7; }
1787   .breadcrumbs .icon-list-item {
1788     width: auto;
1789     padding-top: 6px;
1790     padding-bottom: 6px; }
1791   .breadcrumbs .separator {
1792     display: inline-block;
1793     fill: #aaa;
1794     font-size: 1.6em;
1795     line-height: 0.8;
1796     margin: -2px 0 0; }
1797   .breadcrumbs:hover, .breadcrumbs:focus-within {
1798     opacity: 1; }
1799
1800 @media screen and (max-width: 1000px) {
1801   .breadcrumbs .icon-list-item {
1802     padding: 6px; }
1803     .breadcrumbs .icon-list-item > span + span {
1804       display: none; }
1805     .breadcrumbs .icon-list-item > span:first-child {
1806       margin-right: 0; } }
1807
1808 .breadcrumb-listing {
1809   position: relative; }
1810   .breadcrumb-listing .breadcrumb-listing-toggle {
1811     padding: 6px;
1812     border: 1px solid transparent;
1813     border-radius: 4px; }
1814     .breadcrumb-listing .breadcrumb-listing-toggle:hover {
1815       border-color: #DDD; }
1816   .breadcrumb-listing .svg-icon {
1817     margin-right: 0; }
1818
1819 .breadcrumb-listing-dropdown {
1820   box-shadow: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
1821   overflow: hidden;
1822   min-height: 100px;
1823   width: 240px;
1824   display: none;
1825   position: absolute;
1826   z-index: 80;
1827   right: -16px; }
1828   .breadcrumb-listing-dropdown .breadcrumb-listing-search .svg-icon {
1829     position: absolute;
1830     left: 12px;
1831     top: 11px;
1832     fill: #888;
1833     pointer-events: none; }
1834   .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
1835     max-height: 400px;
1836     overflow-y: scroll;
1837     text-align: left; }
1838   .breadcrumb-listing-dropdown input {
1839     padding-left: 32px;
1840     border-radius: 0;
1841     border: 0;
1842     border-bottom: 1px solid #DDD; }
1843
1844 @media screen and (max-width: 880px) {
1845   .breadcrumb-listing-dropdown {
1846     position: fixed;
1847     right: auto;
1848     left: 16px; }
1849   .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
1850     max-height: 240px; } }
1851
1852 .faded a, .faded button, .faded span, .faded span > div {
1853   color: #666;
1854   fill: #666; }
1855
1856 .faded .text-button {
1857   opacity: 0.5;
1858   transition: all ease-in-out 120ms; }
1859   .faded .text-button:hover {
1860     opacity: 1;
1861     text-decoration: none; }
1862
1863 .faded span.faded-text {
1864   display: inline-block;
1865   padding: 12px; }
1866
1867 .action-buttons .text-button {
1868   display: inline-block;
1869   padding: 6px 12px; }
1870   .action-buttons .text-button:last-child {
1871     padding-right: 0; }
1872   .action-buttons .text-button:first-child {
1873     padding-left: 0; }
1874
1875 .action-buttons .dropdown-container:last-child a {
1876   padding-right: 0;
1877   padding-left: 12px; }
1878
1879 .action-buttons {
1880   text-align: right; }
1881   .action-buttons.text-left {
1882     text-align: left; }
1883     .action-buttons.text-left .text-button {
1884       padding-right: 16px;
1885       padding-left: 0; }
1886   .action-buttons.text-center {
1887     text-align: center; }
1888
1889 @media screen and (max-width: 880px) {
1890   .action-buttons .text-button {
1891     padding: 6px 6px; }
1892   .action-buttons .dropdown-container:last-child a {
1893     padding-left: 6px; } }
1894
1895 .book-contents .entity-list-item .icon {
1896   width: 4px;
1897   border-radius: 1px;
1898   justify-self: stretch;
1899   align-self: stretch;
1900   height: auto;
1901   margin-right: 24px; }
1902
1903 .book-contents .entity-list-item .icon:after {
1904   opacity: 0.5; }
1905
1906 .book-contents .entity-list-item .icon svg {
1907   display: none; }
1908
1909 .book-contents .entity-list-item p {
1910   margin-bottom: 0; }
1911
1912 .book-contents .entity-list-item .inner-page {
1913   padding-top: 0;
1914   padding-bottom: 0; }
1915
1916 .entity-list-item + .chapter-expansion {
1917   display: flex;
1918   padding: 0 16px 16px 16px;
1919   align-items: center;
1920   border: 0;
1921   width: 100%;
1922   position: relative; }
1923   .entity-list-item + .chapter-expansion > .icon {
1924     width: 4px;
1925     height: auto;
1926     border-radius: 0 0 1px 1px;
1927     align-self: stretch;
1928     flex-shrink: 0; }
1929     .entity-list-item + .chapter-expansion > .icon:before {
1930       position: absolute;
1931       top: 0;
1932       left: 0;
1933       width: 100%;
1934       height: 1px;
1935       background-color: currentColor;
1936       content: '';
1937       opacity: 0.5; }
1938     .entity-list-item + .chapter-expansion > .icon:after {
1939       opacity: 0.5; }
1940   .entity-list-item + .chapter-expansion .icon svg {
1941     display: none; }
1942   .entity-list-item + .chapter-expansion > .content {
1943     flex: 1; }
1944   .entity-list-item + .chapter-expansion .chapter-expansion-toggle {
1945     border-radius: 0 4px 4px 0;
1946     padding: 6px 16px;
1947     width: 100%;
1948     text-align: left; }
1949   .entity-list-item + .chapter-expansion .chapter-expansion-toggle:hover {
1950     background-color: rgba(0, 0, 0, 0.06); }
1951
1952 .entity-list-item.has-children {
1953   padding-bottom: 0; }
1954   .entity-list-item.has-children > .icon {
1955     border-radius: 4px 4px 0 0; }
1956
1957 .inset-list {
1958   display: none; }
1959   .inset-list .entity-list-item-name {
1960     font-size: 1rem; }
1961   .inset-list .entity-list-item-children {
1962     padding-top: 0;
1963     padding-bottom: 0; }
1964
1965 .sidebar-page-nav {
1966   list-style: none;
1967   margin: 12px 0 16px 6px;
1968   position: relative; }
1969   .sidebar-page-nav:after {
1970     content: '';
1971     display: block;
1972     position: absolute;
1973     left: 0;
1974     background-color: rgba(0, 0, 0, 0.2);
1975     width: 2px;
1976     top: 5px;
1977     bottom: 5px;
1978     z-index: 0; }
1979   .sidebar-page-nav li {
1980     margin-bottom: 4px;
1981     font-size: 0.95em;
1982     position: relative; }
1983   .sidebar-page-nav .h1 {
1984     padding-left: 16px; }
1985   .sidebar-page-nav .h2 {
1986     padding-left: 24px; }
1987   .sidebar-page-nav .h3 {
1988     padding-left: 32px; }
1989   .sidebar-page-nav .h4 {
1990     padding-left: 40px; }
1991   .sidebar-page-nav .h5 {
1992     padding-left: 48px; }
1993   .sidebar-page-nav .h6 {
1994     padding-left: 56px; }
1995   .sidebar-page-nav .current-heading {
1996     font-weight: bold; }
1997   .sidebar-page-nav li:not(.current-heading) .sidebar-page-nav-bullet {
1998     background-color: #BBB !important; }
1999   .sidebar-page-nav .sidebar-page-nav-bullet {
2000     width: 6px;
2001     height: 6px;
2002     position: absolute;
2003     left: -2px;
2004     top: 30%;
2005     border-radius: 50%;
2006     box-shadow: 0 0 0 6px #F2F2F2;
2007     z-index: 1; }
2008
2009 .book-tree .sidebar-page-list {
2010   list-style: none;
2011   margin: -6px -12px;
2012   padding-left: 0;
2013   padding-right: 0;
2014   position: relative; }
2015   .book-tree .sidebar-page-list:after, .book-tree .sidebar-page-list .sub-menu:after {
2016     content: '';
2017     display: block;
2018     position: absolute;
2019     left: 16px;
2020     top: 1rem;
2021     bottom: 1rem;
2022     border-left: 4px solid rgba(0, 0, 0, 0.1);
2023     z-index: 0; }
2024   .book-tree .sidebar-page-list ul {
2025     list-style: none;
2026     padding-left: 1rem;
2027     padding-right: 0; }
2028   .book-tree .sidebar-page-list .entity-list-item {
2029     padding-top: 3px;
2030     padding-bottom: 3px;
2031     background-clip: content-box;
2032     border-radius: 0 3px 3px 0; }
2033     .book-tree .sidebar-page-list .entity-list-item .content {
2034       padding-top: 6px;
2035       padding-bottom: 6px;
2036       max-width: calc(100% - 20px); }
2037   .book-tree .sidebar-page-list .entity-list-item.selected {
2038     background-color: rgba(0, 0, 0, 0.08); }
2039   .book-tree .sidebar-page-list .entity-list-item.no-hover {
2040     margin-top: -6px;
2041     padding-right: 0; }
2042   .book-tree .sidebar-page-list .entity-list-item-name {
2043     font-size: 1em;
2044     margin: 0; }
2045   .book-tree .sidebar-page-list .chapter-child-menu {
2046     font-size: .8rem;
2047     margin-top: -.2rem;
2048     margin-left: -1rem; }
2049   .book-tree .sidebar-page-list [chapter-toggle] {
2050     padding-left: .7rem;
2051     padding-bottom: .2rem; }
2052   .book-tree .sidebar-page-list .entity-list-item .icon {
2053     z-index: 2;
2054     width: 4px;
2055     height: auto;
2056     align-self: stretch;
2057     flex-shrink: 0;
2058     border-radius: 1px;
2059     opacity: 0.6; }
2060   .book-tree .sidebar-page-list .entity-list-item .icon:after {
2061     opacity: 1; }
2062   .book-tree .sidebar-page-list .entity-list-item .icon svg {
2063     display: none; }
2064
2065 .chapter-child-menu ul.sub-menu {
2066   display: none;
2067   padding-left: 0;
2068   position: relative; }
2069
2070 .chapter-child-menu [chapter-toggle].open + .sub-menu {
2071   display: block; }
2072
2073 .sortable-page-list, .sortable-page-list ul {
2074   list-style: none; }
2075
2076 .sort-box {
2077   margin-bottom: 16px;
2078   padding: 16px 32px;
2079   position: relative; }
2080   .sort-box::before {
2081     content: '';
2082     border-radius: 4px;
2083     opacity: 0.5;
2084     border: 2px solid var(--color-book);
2085     display: block;
2086     top: 0;
2087     bottom: 0;
2088     left: 0;
2089     right: 0;
2090     position: absolute; }
2091
2092 .sort-box-options {
2093   display: flex;
2094   flex-wrap: wrap;
2095   justify-content: space-between; }
2096
2097 .sort-box-options .button {
2098   margin-left: 0; }
2099
2100 .sortable-page-list {
2101   margin-left: 0;
2102   padding: 0; }
2103   .sortable-page-list .entity-list-item > span:first-child {
2104     align-self: flex-start; }
2105   .sortable-page-list .entity-list-item > div {
2106     display: block;
2107     flex: 1; }
2108   .sortable-page-list > ul {
2109     margin-left: 0; }
2110   .sortable-page-list ul {
2111     margin-bottom: 16px;
2112     margin-top: 0;
2113     padding-left: 16px; }
2114   .sortable-page-list li {
2115     border: 1px solid #DDD;
2116     margin-top: -1px;
2117     min-height: 38px; }
2118   .sortable-page-list li.text-page, .sortable-page-list li.text-chapter {
2119     border-left: 2px solid currentColor; }
2120   .sortable-page-list li:first-child {
2121     margin-top: 6px; }
2122
2123 .sortable-page-list li.placeholder {
2124   position: relative; }
2125
2126 .sortable-page-list li.placeholder:before {
2127   position: absolute; }
2128
2129 .activity-list-item {
2130   padding: 12px 0;
2131   display: grid;
2132   grid-template-columns: min-content 1fr;
2133   grid-column-gap: 16px;
2134   font-size: 0.9em; }
2135
2136 .card .activity-list-item {
2137   padding: 12px 16px; }
2138
2139 .user-list-item {
2140   display: inline-grid;
2141   padding: 12px;
2142   grid-template-columns: min-content 1fr;
2143   grid-column-gap: 16px;
2144   font-size: 0.9em;
2145   align-items: center; }
2146   .user-list-item > div:first-child {
2147     line-height: 0; }
2148
2149 ul.pagination {
2150   display: inline-block;
2151   list-style: none;
2152   margin: 16px 0;
2153   padding-left: 1px; }
2154   ul.pagination li {
2155     float: left; }
2156   ul.pagination li:first-child a, ul.pagination li:first-child span {
2157     border-radius: 3px 0 0 3px; }
2158   ul.pagination li:last-child a, ul.pagination li:last-child span {
2159     border-radius: 0 3px 3px 0; }
2160   ul.pagination a, ul.pagination span {
2161     display: block;
2162     padding: 3px 12px;
2163     border: 1px solid #CCC;
2164     margin-left: -1px;
2165     user-select: none; }
2166     ul.pagination a.disabled, ul.pagination span.disabled {
2167       cursor: not-allowed; }
2168   ul.pagination li.active span {
2169     color: #FFF; }
2170
2171 .compact ul.pagination {
2172   margin: 0; }
2173
2174 .entity-list, .icon-list {
2175   margin: 0 -16px; }
2176   .entity-list h4, .icon-list h4 {
2177     margin: 0; }
2178   .entity-list hr, .icon-list hr {
2179     margin: 0; }
2180   .entity-list .text-small.text-muted, .icon-list .text-small.text-muted {
2181     color: #AAA;
2182     font-size: 0.75em;
2183     margin-top: 6px; }
2184   .entity-list .text-muted p.text-muted, .icon-list .text-muted p.text-muted {
2185     margin-top: 0; }
2186   .entity-list .page.draft .text-page, .icon-list .page.draft .text-page {
2187     color: var(--color-page-draft);
2188     fill: var(--color-page-draft); }
2189   .entity-list > .dropdown-container, .icon-list > .dropdown-container {
2190     display: block; }
2191
2192 .icon-list hr {
2193   margin: 12px 16px;
2194   max-width: 140px;
2195   opacity: 0.25;
2196   height: 1.1px; }
2197
2198 .icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {
2199   display: none; }
2200
2201 .entity-list-item, .icon-list-item {
2202   padding: 12px 16px;
2203   display: flex;
2204   align-items: center;
2205   background-color: transparent;
2206   border: 0;
2207   width: 100%;
2208   position: relative;
2209   word-break: break-word; }
2210   .entity-list-item h4 a, .icon-list-item h4 a {
2211     color: #666; }
2212   .entity-list-item > span:first-child, .icon-list-item > span:first-child {
2213     margin-right: 16px;
2214     flex-basis: 1.88em;
2215     flex: none; }
2216   .entity-list-item > span:last-child, .icon-list-item > span:last-child {
2217     flex: 1;
2218     text-align: left; }
2219   .entity-list-item:not(.no-hover), .icon-list-item:not(.no-hover) {
2220     cursor: pointer; }
2221   .entity-list-item:not(.no-hover):hover, .icon-list-item:not(.no-hover):hover {
2222     text-decoration: none;
2223     background-color: rgba(0, 0, 0, 0.1);
2224     border-radius: 4px; }
2225   .entity-list-item.outline-hover, .icon-list-item.outline-hover {
2226     border: 1px solid transparent; }
2227   .entity-list-item.outline-hover:hover, .icon-list-item.outline-hover:hover {
2228     background-color: transparent;
2229     border-color: rgba(0, 0, 0, 0.1); }
2230   .entity-list-item:focus, .icon-list-item:focus {
2231     background-color: #eee;
2232     outline: 1px dotted #666;
2233     outline-offset: -2px; }
2234
2235 .entity-list-item-path-sep {
2236   display: inline-block;
2237   vertical-align: top;
2238   position: relative;
2239   top: 1px; }
2240   .entity-list-item-path-sep svg {
2241     margin-right: 0; }
2242
2243 .card .entity-list-item:not(.no-hover):hover {
2244   background-color: #F2F2F2; }
2245
2246 .card .entity-list-item .entity-list-item:hover {
2247   background-color: #EEEEEE; }
2248
2249 .entity-list-item-children {
2250   padding: 16px; }
2251   .entity-list-item-children > div {
2252     overflow: hidden;
2253     padding: 6px 0;
2254     margin-top: -6px; }
2255   .entity-list-item-children .entity-chip {
2256     text-overflow: ellipsis;
2257     height: 2.5em;
2258     overflow: hidden;
2259     text-align: left;
2260     display: block;
2261     white-space: nowrap; }
2262
2263 .entity-list-item-image {
2264   align-self: stretch;
2265   width: 140px;
2266   flex: none;
2267   background-size: cover;
2268   background-position: 50% 50%;
2269   border-radius: 3px;
2270   position: relative;
2271   margin-right: 24px; }
2272   .entity-list-item-image.entity-list-item-image-wide {
2273     width: 220px; }
2274   .entity-list-item-image .svg-icon {
2275     color: #FFF;
2276     fill: #FFF;
2277     font-size: 1.66rem;
2278     margin-right: 0;
2279     position: absolute;
2280     bottom: 6px;
2281     left: 6px; }
2282   @media screen and (max-width: 880px) {
2283     .entity-list-item-image {
2284       width: 80px; } }
2285
2286 .chapter > .entity-list-item-image {
2287   width: 60px; }
2288
2289 .entity-list.compact {
2290   font-size: 8.4px; }
2291   .entity-list.compact h4, .entity-list.compact a {
2292     line-height: 1.2; }
2293   .entity-list.compact .entity-item-snippet {
2294     display: none; }
2295   .entity-list.compact .entity-list-item p {
2296     font-size: 11.2px;
2297     padding-top: 6px; }
2298   .entity-list.compact p {
2299     margin: 0; }
2300   .entity-list.compact > p.empty-text {
2301     display: block;
2302     font-size: 14px; }
2303   .entity-list.compact hr {
2304     margin: 0; }
2305   @media screen and (max-width: 880px) {
2306     .entity-list.compact h4 {
2307       font-size: 1.666em; } }
2308
2309 .dropdown-container {
2310   display: inline-block;
2311   vertical-align: top;
2312   position: relative; }
2313
2314 .dropdown-menu {
2315   display: none;
2316   position: absolute;
2317   z-index: 999;
2318   top: 0;
2319   list-style: none;
2320   right: 0;
2321   margin: 16px 0;
2322   background-color: #FFFFFF;
2323   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
2324   border-radius: 1px;
2325   border: 1px solid #EEE;
2326   min-width: 180px;
2327   padding: 6px 0;
2328   color: #555;
2329   fill: #555;
2330   text-align: left !important; }
2331   .dropdown-menu.wide {
2332     min-width: 220px; }
2333   .dropdown-menu .text-muted {
2334     color: #999;
2335     fill: #999; }
2336   .dropdown-menu li.active a {
2337     font-weight: 600; }
2338   .dropdown-menu a, .dropdown-menu button {
2339     display: block;
2340     padding: 6px 16px;
2341     color: #555;
2342     fill: currentColor;
2343     white-space: nowrap; }
2344     .dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu button:hover, .dropdown-menu button:focus {
2345       text-decoration: none;
2346       background-color: var(--color-primary-light);
2347       color: var(--color-primary); }
2348     .dropdown-menu a:focus, .dropdown-menu button:focus {
2349       outline: 1px solid var(--color-primary);
2350       outline-offset: -2px; }
2351     .dropdown-menu a svg, .dropdown-menu button svg {
2352       margin-right: 12px;
2353       display: inline-block;
2354       width: 16px; }
2355   .dropdown-menu button {
2356     width: 100%;
2357     text-align: left; }
2358   .dropdown-menu li.border-bottom {
2359     border-bottom: 1px solid #DDD; }
2360
2361 .featured-image-container {
2362   position: relative;
2363   overflow: hidden;
2364   min-height: 140px;
2365   background-size: cover;
2366   background-position: 50% 50%;
2367   transition: opacity ease-in-out 240ms; }
2368   .featured-image-container a {
2369     display: block; }
2370   .featured-image-container img {
2371     display: block;
2372     width: 100%;
2373     max-width: 100%;
2374     height: auto; }
2375
2376 .featured-image-container-wrap {
2377   position: relative; }
2378   .featured-image-container-wrap .svg-icon {
2379     color: #FFF;
2380     fill: #FFF;
2381     font-size: 2rem;
2382     margin-right: 0;
2383     position: absolute;
2384     bottom: 10px;
2385     left: 6px; }
2386
2387 .grid-card:hover .featured-image-container {
2388   opacity: .5; }
2389
2390 .action-link {
2391   background: transparent;
2392   border: none;
2393   color: currentColor;
2394   padding: 16px 0; }
2395
2396 .active-link-list a {
2397   display: inline-block;
2398   padding: 12px; }
2399
2400 .active-link-list a:not(.active) {
2401   color: #444;
2402   fill: #444; }
2403
2404 .active-link-list a:hover {
2405   background-color: rgba(0, 0, 0, 0.05);
2406   border-radius: 3px;
2407   text-decoration: none; }
2408
2409 .page-editor {
2410   display: flex;
2411   flex-direction: column;
2412   align-items: stretch;
2413   overflow: hidden;
2414   background-color: #FFF; }
2415   .page-editor .edit-area {
2416     flex: 1;
2417     flex-direction: column;
2418     z-index: 10; }
2419   .page-editor .mce-tinymce {
2420     box-shadow: none; }
2421   .page-editor .mce-top-part::before {
2422     box-shadow: none; }
2423
2424 body.mce-fullscreen .page-editor .edit-area {
2425   z-index: 12; }
2426
2427 @media screen and (max-width: 600px) {
2428   .page-edit-toolbar {
2429     overflow-x: scroll;
2430     overflow-y: visible; }
2431   .page-edit-toolbar .grid.third {
2432     display: block;
2433     white-space: nowrap; }
2434     .page-edit-toolbar .grid.third > div {
2435       display: inline-block; } }
2436
2437 .page-save-mobile-button {
2438   position: fixed;
2439   z-index: 30;
2440   border-radius: 50%;
2441   width: 56px;
2442   height: 56px;
2443   font-size: 24px;
2444   right: 16px;
2445   bottom: 12px;
2446   box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.13);
2447   background-color: currentColor;
2448   text-align: center; }
2449   .page-save-mobile-button svg {
2450     fill: #FFF;
2451     margin-right: 0; }
2452
2453 .draft-notification {
2454   pointer-events: none;
2455   transform: scale(0);
2456   transition: transform ease-in-out 120ms;
2457   transform-origin: 50% 50%; }
2458   .draft-notification.visible {
2459     transform: scale(1); }
2460
2461 .page-style.editor {
2462   padding: 0 !important; }
2463
2464 .page-content {
2465   width: 100%;
2466   max-width: 840px;
2467   margin: 0 auto;
2468   overflow-wrap: break-word; }
2469   .page-content .align-left {
2470     text-align: left; }
2471   .page-content img.align-left, .page-content table.align-left {
2472     float: left !important;
2473     margin: 6px 16px 16px 0; }
2474   .page-content .align-right {
2475     text-align: right !important; }
2476   .page-content img.align-right, .page-content table.align-right {
2477     float: right !important;
2478     margin: 6px 0 6px 12px; }
2479   .page-content .align-center {
2480     text-align: center; }
2481   .page-content img.align-center {
2482     display: block; }
2483   .page-content img.align-center, .page-content table.align-center {
2484     margin-left: auto;
2485     margin-right: auto; }
2486   .page-content img {
2487     max-width: 100%;
2488     height: auto; }
2489   .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .page-content pre {
2490     clear: left; }
2491   .page-content hr {
2492     clear: both;
2493     margin: 16px 0; }
2494   .page-content table {
2495     hyphens: auto;
2496     table-layout: fixed;
2497     max-width: 100%;
2498     height: auto !important; }
2499   .page-content ins,
2500   .page-content del {
2501     text-decoration: none; }
2502   .page-content ins {
2503     background: #dbffdb; }
2504   .page-content del {
2505     background: #FFECEC; }
2506   .page-content.page-revision pre code {
2507     white-space: pre-wrap; }
2508
2509 .pointer-container {
2510   position: relative;
2511   display: none;
2512   left: 0;
2513   z-index: 10; }
2514
2515 .pointer {
2516   border: 1px solid #CCC;
2517   display: flex;
2518   align-items: center;
2519   justify-items: center;
2520   padding: 12px 12px;
2521   border-radius: 4px;
2522   box-shadow: 0 0 12px 1px rgba(212, 209, 209, 0.3);
2523   position: absolute;
2524   top: -60px;
2525   background-color: #FFF;
2526   width: 275px;
2527   z-index: 55; }
2528   .pointer.is-page-editable {
2529     width: 328px; }
2530   .pointer:before {
2531     position: absolute;
2532     left: 50%;
2533     bottom: -9px;
2534     width: 16px;
2535     height: 16px;
2536     margin-left: -8px;
2537     content: '';
2538     display: block;
2539     background-color: #FFF;
2540     transform: rotate(45deg);
2541     transform-origin: 50% 50%;
2542     border-bottom: 1px solid #CCC;
2543     border-right: 1px solid #CCC;
2544     z-index: 56; }
2545   .pointer input, .pointer button, .pointer a {
2546     position: relative;
2547     border-radius: 0;
2548     height: 28px;
2549     font-size: 12px;
2550     vertical-align: top;
2551     padding: 5px 16px; }
2552   .pointer input {
2553     background-color: #FFF;
2554     border: 1px solid #DDD;
2555     color: #666;
2556     width: 172px;
2557     z-index: 40;
2558     padding: 5px 10px; }
2559   .pointer span.icon {
2560     fill: #444;
2561     cursor: pointer;
2562     user-select: none;
2563     display: inline-block;
2564     line-height: 1; }
2565   .pointer .input-group .button {
2566     line-height: 1;
2567     margin: 0 0 0 -4px;
2568     box-shadow: none; }
2569   .pointer a.button {
2570     margin: 0; }
2571   .pointer .svg-icon {
2572     width: 1.2em;
2573     height: 1.2em; }
2574
2575 .floating-toolbox {
2576   background-color: #FFF;
2577   border: 1px solid #DDD;
2578   right: 64px;
2579   width: 48px;
2580   overflow: hidden;
2581   align-items: stretch;
2582   flex-direction: row;
2583   display: flex;
2584   transition: width ease-in-out 180ms;
2585   margin-top: -1px;
2586   min-height: 0; }
2587   .floating-toolbox.open {
2588     width: 480px; }
2589   .floating-toolbox [toolbox-toggle] svg {
2590     transition: transform ease-in-out 180ms; }
2591   .floating-toolbox [toolbox-toggle] {
2592     transition: background-color ease-in-out 180ms; }
2593   .floating-toolbox.open [toolbox-toggle] {
2594     background-color: rgba(255, 0, 0, 0.29); }
2595   .floating-toolbox.open [toolbox-toggle] svg {
2596     transform: rotate(180deg); }
2597   .floating-toolbox > div {
2598     flex: 1;
2599     position: relative; }
2600   .floating-toolbox .tabs {
2601     display: block;
2602     border-right: 1px solid #DDD;
2603     width: 48px;
2604     flex: 0 1 auto; }
2605   .floating-toolbox .tabs svg {
2606     fill: rgba(0, 0, 0, 0.5);
2607     padding: 0;
2608     margin: 0; }
2609   .floating-toolbox .tabs > button {
2610     display: block;
2611     cursor: pointer;
2612     padding: 12px 16px;
2613     font-size: 16px;
2614     line-height: 1.6;
2615     border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
2616   .floating-toolbox.open .tabs > button.active {
2617     fill: #444;
2618     background-color: rgba(0, 0, 0, 0.1); }
2619   .floating-toolbox div[toolbox-tab-content] {
2620     padding-bottom: 45px;
2621     display: flex;
2622     flex: 1;
2623     flex-direction: column;
2624     min-height: 0px;
2625     overflow-y: scroll; }
2626   .floating-toolbox h4 {
2627     font-size: 24px;
2628     margin: 16px 0 0 0;
2629     padding: 0 24px 12px 24px; }
2630   .floating-toolbox .tags input {
2631     max-width: 100%;
2632     width: 100%;
2633     min-width: 50px; }
2634   .floating-toolbox .tags td, .floating-toolbox .tag-table > div > div > div {
2635     padding-right: 12px;
2636     padding-top: 12px;
2637     position: relative; }
2638   .floating-toolbox .handle {
2639     user-select: none;
2640     cursor: move;
2641     fill: #999; }
2642   .floating-toolbox form {
2643     display: flex;
2644     flex: 1;
2645     flex-direction: column;
2646     overflow-y: scroll; }
2647   .floating-toolbox table td, .floating-toolbox table th {
2648     overflow: visible; }
2649
2650 [toolbox-tab-content] {
2651   display: none; }
2652
2653 .tag-display {
2654   position: relative; }
2655   .tag-display table {
2656     width: 100%;
2657     margin: 0;
2658     padding: 0; }
2659   .tag-display tr:first-child td {
2660     padding-top: 0; }
2661   .tag-display .heading th {
2662     padding: 6px 12px;
2663     color: rgba(100, 100, 100, 0.7);
2664     border: 0;
2665     font-weight: 400; }
2666   .tag-display td {
2667     border: 0;
2668     border-bottom: 1px solid #EEE;
2669     padding: 6px 12px;
2670     color: #444; }
2671   .tag-display tr td:first-child {
2672     padding-left: 0; }
2673   .tag-display .tag-value {
2674     color: #888; }
2675   .tag-display tr:last-child td {
2676     border-bottom: none; }
2677   .tag-display .tag {
2678     padding: 12px; }
2679
2680 .suggestion-box {
2681   position: absolute;
2682   background-color: #FFF;
2683   border: 1px solid #BBB;
2684   box-shadow: 0 0 4px 1px #CCC;
2685   list-style: none;
2686   z-index: 100;
2687   padding: 0;
2688   margin: 0;
2689   border-radius: 3px; }
2690   .suggestion-box li {
2691     display: block;
2692     padding: 6px 12px;
2693     border-bottom: 1px solid #DDD; }
2694     .suggestion-box li:last-child {
2695       border-bottom: 0; }
2696     .suggestion-box li.active {
2697       background-color: #EEE; }
2698
2699 .comments-container h5 {
2700   color: #888;
2701   font-weight: normal;
2702   margin-top: 0.5em; }
2703
2704 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
2705   min-height: 175px; }
2706
2707 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
2708 .mce-floatpanel[aria-label="Insert/edit media"] .mce-open {
2709   display: none; }
2710
2711 .entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {
2712   font-size: 0.8rem;
2713   width: 1.88em;
2714   height: 1.88em;
2715   display: flex;
2716   align-items: center;
2717   justify-content: center;
2718   text-align: center;
2719   border-radius: 1em;
2720   position: relative;
2721   overflow: hidden; }
2722   .entity-list-item > span:first-child svg, .icon-list-item > span:first-child svg, .chapter-expansion > .icon svg {
2723     margin: 0;
2724     bottom: 0; }
2725   .entity-list-item > span:first-child:after, .icon-list-item > span:first-child:after, .chapter-expansion > .icon:after {
2726     content: '';
2727     position: absolute;
2728     background-color: currentColor;
2729     opacity: 0.2;
2730     left: 0;
2731     top: 0;
2732     width: 100%;
2733     height: 100%; }
2734
2735 .entity-chip {
2736   display: inline-block;
2737   align-items: center;
2738   justify-content: center;
2739   text-align: center;
2740   font-size: 0.9em;
2741   border-radius: 3px;
2742   position: relative;
2743   overflow: hidden;
2744   padding: 6px 12px;
2745   fill: currentColor;
2746   opacity: 0.85;
2747   transition: opacity ease-in-out 120ms; }
2748   .entity-chip:after {
2749     content: '';
2750     position: absolute;
2751     background-color: currentColor;
2752     opacity: 0.15;
2753     left: 0;
2754     top: 0;
2755     width: 100%;
2756     height: 100%; }
2757   .entity-chip:hover {
2758     text-decoration: none;
2759     opacity: 1; }
2760
2761 html, body {
2762   background-color: #FFF; }
2763
2764 body {
2765   font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
2766   margin: 0;
2767   padding: 0; }
2768
2769 table {
2770   border-spacing: 0;
2771   border-collapse: collapse; }
2772
2773 .page-content {
2774   overflow: hidden; }
2775
2776 pre {
2777   padding-left: 12px; }
2778
2779 pre:after {
2780   display: none; }
2781
2782 pre code {
2783   white-space: pre-wrap; }
2784