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

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