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 @media screen and (min-width: 360px) {
 632   .text-xxs-center {
 633     text-align: center; }
 634   .text-xxs-left {
 635     text-align: left; }
 636   .text-xxs-right {
 637     text-align: right; } }
 638
 639 @media screen and (min-width: 400px) {
 640   .text-xs-center {
 641     text-align: center; }
 642   .text-xs-left {
 643     text-align: left; }
 644   .text-xs-right {
 645     text-align: right; } }
 646
 647 @media screen and (min-width: 600px) {
 648   .text-s-center {
 649     text-align: center; }
 650   .text-s-left {
 651     text-align: left; }
 652   .text-s-right {
 653     text-align: right; } }
 654
 655 @media screen and (min-width: 880px) {
 656   .text-m-center {
 657     text-align: center; }
 658   .text-m-left {
 659     text-align: left; }
 660   .text-m-right {
 661     text-align: right; } }
 662
 663 @media screen and (min-width: 1000px) {
 664   .text-l-center {
 665     text-align: center; }
 666   .text-l-left {
 667     text-align: left; }
 668   .text-l-right {
 669     text-align: right; } }
 670
 671 @media screen and (min-width: 1100px) {
 672   .text-xl-center {
 673     text-align: center; }
 674   .text-xl-left {
 675     text-align: left; }
 676   .text-xl-right {
 677     text-align: right; } }
 678
 679 .text-bigger {
 680   font-size: 1.1em; }
 681
 682 .text-large {
 683   font-size: 1.6666em; }
 684
 685 .no-color {
 686   color: inherit; }
 687
 688 .break-text {
 689   word-wrap: break-word;
 690   overflow-wrap: break-word; }
 691
 692 /**
 693  * Grouping
 694  */
 695 .header-group {
 696   margin: 16px 0; }
 697   .header-group h1, .header-group h2, .header-group h3, .header-group h4, .header-group h5, .header-group h6 {
 698     margin: 0; }
 699
 700 span.sep {
 701   color: #BBB;
 702   padding: 0 6px; }
 703
 704 .list > * {
 705   display: block; }
 706
 707 /**
 708   * Icons
 709   */
 710 .svg-icon {
 711   width: 1em;
 712   height: 1em;
 713   display: inline-block;
 714   position: relative;
 715   bottom: -0.105em;
 716   margin-right: 6px;
 717   pointer-events: none; }
 718
 719 /**
 720  * Generic content container
 721  */
 722 .container {
 723   max-width: 1400px;
 724   margin-left: auto;
 725   margin-right: auto;
 726   padding-left: 16px;
 727   padding-right: 16px; }
 728   .container.small {
 729     max-width: 840px; }
 730   .container.very-small {
 731     max-width: 480px; }
 732
 733 /**
 734  * Core grid layout system
 735  */
 736 .grid {
 737   display: grid;
 738   grid-column-gap: 24px;
 739   grid-row-gap: 24px; }
 740   .grid.half {
 741     grid-template-columns: 1fr 1fr; }
 742   .grid.third {
 743     grid-template-columns: 1fr 1fr 1fr; }
 744   .grid.left-focus {
 745     grid-template-columns: 2fr 1fr; }
 746   .grid.right-focus {
 747     grid-template-columns: 1fr 3fr; }
 748   .grid.gap-y-xs {
 749     grid-row-gap: 6px; }
 750   .grid.gap-xl {
 751     grid-column-gap: 32px;
 752     grid-row-gap: 32px; }
 753   .grid.gap-xxl {
 754     grid-column-gap: 48px;
 755     grid-row-gap: 48px; }
 756   .grid.v-center {
 757     align-items: center; }
 758   .grid.no-gap {
 759     grid-row-gap: 0;
 760     grid-column-gap: 0; }
 761   .grid.no-row-gap {
 762     grid-row-gap: 0; }
 763
 764 @media screen and (max-width: 880px) {
 765   .grid.third:not(.no-break) {
 766     grid-template-columns: 1fr 1fr; }
 767   .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
 768     grid-template-columns: 1fr; }
 769   .grid.half.collapse-xs {
 770     grid-template-columns: 1fr 1fr; }
 771   .grid.gap-xl {
 772     grid-column-gap: 16px;
 773     grid-row-gap: 16px; }
 774   .grid.right-focus.reverse-collapse > *:nth-child(2) {
 775     order: 0; }
 776   .grid.right-focus.reverse-collapse > *:nth-child(1) {
 777     order: 1; } }
 778
 779 @media screen and (max-width: 600px) {
 780   .grid.third:not(.no-break) {
 781     grid-template-columns: 1fr; } }
 782
 783 @media screen and (max-width: 400px) {
 784   .grid.half.collapse-xs {
 785     grid-template-columns: 1fr; } }
 786
 787 /**
 788  * Flexbox layout system
 789  */
 790 body.flexbox {
 791   display: flex;
 792   flex-direction: column;
 793   align-items: stretch;
 794   height: 100%;
 795   min-height: 100%;
 796   max-height: 100%;
 797   overflow: hidden; }
 798   body.flexbox #content {
 799     flex: 1;
 800     display: flex;
 801     min-height: 0; }
 802
 803 .flex-fill {
 804   display: flex;
 805   align-items: stretch;
 806   min-height: 0;
 807   max-width: 100%;
 808   position: relative; }
 809
 810 .flex {
 811   min-height: 0;
 812   flex: 1; }
 813
 814 /**
 815  * Display and float utilities
 816  */
 817 .block {
 818   display: block;
 819   position: relative; }
 820
 821 .inline {
 822   display: inline; }
 823
 824 .block.inline {
 825   display: inline-block; }
 826
 827 .hidden {
 828   display: none; }
 829
 830 .float {
 831   float: left; }
 832   .float.right {
 833     float: right; }
 834
 835 /**
 836  * Visibility
 837  */
 838 @media screen and (max-width: 360px) {
 839   .hide-under-xxs {
 840     display: none !important; } }
 841
 842 @media screen and (min-width: 360px) {
 843   .hide-over-xxs {
 844     display: none !important; } }
 845
 846 @media screen and (max-width: 400px) {
 847   .hide-under-xs {
 848     display: none !important; } }
 849
 850 @media screen and (min-width: 400px) {
 851   .hide-over-xs {
 852     display: none !important; } }
 853
 854 @media screen and (max-width: 600px) {
 855   .hide-under-s {
 856     display: none !important; } }
 857
 858 @media screen and (min-width: 600px) {
 859   .hide-over-s {
 860     display: none !important; } }
 861
 862 @media screen and (max-width: 880px) {
 863   .hide-under-m {
 864     display: none !important; } }
 865
 866 @media screen and (min-width: 880px) {
 867   .hide-over-m {
 868     display: none !important; } }
 869
 870 @media screen and (max-width: 1000px) {
 871   .hide-under-l {
 872     display: none !important; } }
 873
 874 @media screen and (min-width: 1000px) {
 875   .hide-over-l {
 876     display: none !important; } }
 877
 878 @media screen and (max-width: 1100px) {
 879   .hide-under-xl {
 880     display: none !important; } }
 881
 882 @media screen and (min-width: 1100px) {
 883   .hide-over-xl {
 884     display: none !important; } }
 885
 886 /**
 887  * Inline content columns
 888  */
 889 .dual-column-content {
 890   -webkit-columns: 2;
 891           columns: 2; }
 892
 893 @media screen and (max-width: 880px) {
 894   .dual-column-content {
 895     -webkit-columns: 1;
 896             columns: 1; } }
 897
 898 /**
 899  * Fixes
 900  */
 901 .clearfix:before,
 902 .clearfix:after {
 903   content: " ";
 904   display: table; }
 905
 906 .clearfix:after {
 907   clear: both; }
 908
 909 /**
 910  * View Layouts
 911  */
 912 .tri-layout-container {
 913   display: grid;
 914   margin-left: 32px;
 915   margin-right: 32px;
 916   grid-template-columns: 1fr 4fr 1fr;
 917   grid-template-areas: "a b c";
 918   grid-column-gap: 48px; }
 919   .tri-layout-container .tri-layout-right {
 920     grid-area: c;
 921     min-width: 0; }
 922   .tri-layout-container .tri-layout-left {
 923     grid-area: a;
 924     min-width: 0; }
 925   .tri-layout-container .tri-layout-middle {
 926     grid-area: b;
 927     padding-top: 16px; }
 928
 929 @media screen and (max-width: 1400px) {
 930   .tri-layout-container {
 931     grid-template-areas: "c b b" "a b b";
 932     grid-template-columns: 1fr 3fr;
 933     grid-template-rows: -webkit-max-content -webkit-min-content;
 934     grid-template-rows: max-content min-content;
 935     padding-right: 24px; } }
 936
 937 @media screen and (min-width: 1400px) {
 938   .tri-layout-left-contents, .tri-layout-right-contents {
 939     padding: 16px;
 940     position: -webkit-sticky;
 941     position: sticky;
 942     top: 16px;
 943     max-height: 100vh;
 944     min-height: 50vh;
 945     overflow-y: scroll;
 946     overflow-x: hidden;
 947     scrollbar-width: none;
 948     -ms-overflow-style: none; }
 949     .tri-layout-left-contents::-webkit-scrollbar, .tri-layout-right-contents::-webkit-scrollbar {
 950       display: none; }
 951   .tri-layout-middle-contents {
 952     max-width: 940px;
 953     margin: 0 auto; } }
 954
 955 @media screen and (max-width: 1000px) {
 956   .tri-layout-container {
 957     grid-template-areas: none;
 958     grid-template-columns: 1fr;
 959     grid-column-gap: 0;
 960     padding-right: 6px;
 961     padding-left: 6px; }
 962     .tri-layout-container .tri-layout-left-contents, .tri-layout-container .tri-layout-right-contents {
 963       padding-left: 16px;
 964       padding-right: 16px; }
 965     .tri-layout-container .tri-layout-left > *, .tri-layout-container .tri-layout-right > * {
 966       display: none;
 967       pointer-events: none; }
 968     .tri-layout-container .tri-layout-left, .tri-layout-container .tri-layout-right {
 969       grid-area: none;
 970       grid-column: 1/1;
 971       grid-row: 1;
 972       padding-top: 0 !important; }
 973     .tri-layout-container .tri-layout-middle {
 974       grid-area: none;
 975       grid-row: 3;
 976       grid-column: 1/1;
 977       z-index: 1;
 978       overflow: hidden;
 979       transition: -webkit-transform ease-in-out 240ms;
 980       transition: transform ease-in-out 240ms;
 981       transition: transform ease-in-out 240ms, -webkit-transform ease-in-out 240ms; }
 982     .tri-layout-container .tri-layout-left {
 983       grid-row: 2; }
 984     .tri-layout-container.show-info {
 985       overflow: hidden; }
 986       .tri-layout-container.show-info .tri-layout-middle {
 987         display: none; }
 988       .tri-layout-container.show-info .tri-layout-right > *, .tri-layout-container.show-info .tri-layout-left > * {
 989         display: block;
 990         pointer-events: auto; } }
 991
 992 @media screen and (min-width: 1000px) {
 993   .tri-layout-mobile-tabs {
 994     display: none; }
 995   .tri-layout-left-contents > div, .tri-layout-right-contents > div {
 996     opacity: 0.6;
 997     transition: opacity ease-in-out 120ms; }
 998     .tri-layout-left-contents > div:hover, .tri-layout-right-contents > div:hover {
 999       opacity: 1; } }
1000
1001 @media screen and (max-width: 880px) {
1002   .tri-layout-container {
1003     margin-left: 0;
1004     margin-right: 0; } }
1005
1006 /**
1007  * Callouts
1008  */
1009 .callout {
1010   border-left: 3px solid #BBB;
1011   background-color: #EEE;
1012   padding: 12px 12px 12px 32px;
1013   display: block;
1014   position: relative; }
1015   .callout:before {
1016     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+");
1017     background-repeat: no-repeat;
1018     content: '';
1019     width: 1.2em;
1020     height: 1.2em;
1021     left: 8px;
1022     top: 50%;
1023     margin-top: -9px;
1024     display: inline-block;
1025     position: absolute;
1026     line-height: 1;
1027     opacity: 0.8; }
1028   .callout.success {
1029     border-left-color: #0f7d15;
1030     background-color: #eafdeb;
1031     color: #063409; }
1032   .callout.success:before {
1033     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+"); }
1034   .callout.danger {
1035     border-left-color: #ab0f0e;
1036     background-color: #fcdbdb;
1037     color: #4d0706; }
1038   .callout.danger:before {
1039     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="); }
1040   .callout.info {
1041     border-left-color: #0288D1;
1042     background-color: #d3efff;
1043     color: #01466c; }
1044   .callout.warning {
1045     border-left-color: #cf4d03;
1046     background-color: #fee3d3;
1047     color: #6a2802; }
1048   .callout.warning:before {
1049     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4="); }
1050
1051 /**
1052  * Card-style blocks
1053  */
1054 .card {
1055   background-color: #FFF;
1056   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
1057   border-radius: 3px;
1058   border: 1px solid transparent; }
1059   .card .body, .card p.empty-text {
1060     padding: 16px; }
1061   .card a, .card p {
1062     word-wrap: break-word;
1063     word-break: break-word; }
1064
1065 .card-title {
1066   padding: 16px 16px 6px;
1067   margin: 0;
1068   font-size: 14px;
1069   color: #222;
1070   fill: #222;
1071   font-weight: 400; }
1072
1073 .card-title a {
1074   line-height: 1; }
1075
1076 .card.drag-card {
1077   border: 1px solid #DDD;
1078   border-radius: 4px;
1079   display: flex;
1080   padding: 0 0 0 40px;
1081   margin: 12px 0;
1082   position: relative; }
1083   .card.drag-card .drag-card-action {
1084     cursor: pointer; }
1085   .card.drag-card .handle, .card.drag-card .drag-card-action {
1086     display: flex;
1087     align-items: center;
1088     text-align: center;
1089     justify-content: center;
1090     width: 28px;
1091     flex-grow: 0;
1092     padding: 0 6px; }
1093     .card.drag-card .handle:hover, .card.drag-card .drag-card-action:hover {
1094       background-color: #EEE; }
1095     .card.drag-card .handle .svg-icon, .card.drag-card .drag-card-action .svg-icon {
1096       margin-right: 0px; }
1097   .card.drag-card > div .outline input {
1098     margin: 12px 0;
1099     width: 100%; }
1100   .card.drag-card .handle {
1101     background-color: #EEE;
1102     left: 0;
1103     position: absolute;
1104     top: 0;
1105     bottom: 0; }
1106   .card.drag-card > div {
1107     padding: 0 12px;
1108     max-width: 80%;
1109     flex: 1; }
1110
1111 .grid-card {
1112   display: flex;
1113   flex-direction: column;
1114   border: 1px solid #ddd;
1115   margin-bottom: 24px;
1116   border-radius: 4px;
1117   overflow: hidden;
1118   min-width: 100px;
1119   color: #444;
1120   transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms; }
1121   .grid-card:hover {
1122     color: #444;
1123     text-decoration: none;
1124     box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1); }
1125   .grid-card h2 {
1126     width: 100%;
1127     font-size: 1.5em;
1128     margin: 0 0 10px; }
1129   .grid-card p {
1130     font-size: .7rem;
1131     margin: 0;
1132     line-height: 1.6em; }
1133   .grid-card .grid-card-content {
1134     flex: 1;
1135     border-top: 0;
1136     border-bottom-width: 2px; }
1137   .grid-card .grid-card-content, .grid-card .grid-card-footer {
1138     padding: 24px; }
1139   .grid-card .grid-card-content + .grid-card-footer {
1140     padding-top: 0; }
1141
1142 .bookshelf-grid-item .grid-card-content h2 a {
1143   color: #af5a5a;
1144   fill: #af5a5a; }
1145
1146 .book-grid-item .grid-card-footer p.small {
1147   font-size: .8em;
1148   margin: 0; }
1149
1150 .content-wrap.card {
1151   padding: 16px 48px;
1152   margin-left: auto;
1153   margin-right: auto;
1154   margin-bottom: 32px;
1155   overflow: initial;
1156   min-height: 60vh; }
1157   .content-wrap.card.auto-height {
1158     min-height: 0; }
1159   .content-wrap.card.fill-width {
1160     width: 100%; }
1161
1162 @media screen and (max-width: 1400px) {
1163   .content-wrap.card {
1164     padding: 16px 32px; } }
1165
1166 @media screen and (max-width: 880px) {
1167   .content-wrap.card {
1168     padding: 16px 24px; } }
1169
1170 @media screen and (max-width: 600px) {
1171   .content-wrap.card {
1172     padding: 16px 16px; } }
1173
1174 /**
1175  * Tags
1176  */
1177 .tag-item {
1178   display: inline-flex;
1179   margin-bottom: 6px;
1180   margin-right: 6px;
1181   border-radius: 4px;
1182   border: 1px solid #CCC;
1183   overflow: hidden;
1184   font-size: 0.85em; }
1185   .tag-item a, .tag-item a:hover, .tag-item a:active {
1186     padding: 4px 8px;
1187     color: #777;
1188     transition: background-color ease-in-out 80ms;
1189     text-decoration: none; }
1190   .tag-item a:hover {
1191     background-color: rgba(255, 255, 255, 0.7); }
1192   .tag-item svg {
1193     fill: #888; }
1194   .tag-item .tag-value {
1195     border-left: 1px solid #DDD;
1196     background-color: rgba(255, 255, 255, 0.5); }
1197
1198 .tag-list div:last-child .tag-item {
1199   margin-bottom: 0; }
1200
1201 .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 {
1202   background-color: #FFF;
1203   border-radius: 3px;
1204   border: 1px solid #D4D4D4;
1205   display: inline-block;
1206   font-size: 12px;
1207   padding: 9px;
1208   color: #666;
1209   width: 250px;
1210   max-width: 100%; }
1211   .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 {
1212     border: 1px solid #ab0f0e; }
1213   .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 {
1214     border: 1px solid #0f7d15; }
1215   .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] {
1216     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==); }
1217   .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 {
1218     outline: 0; }
1219
1220 .fake-input {
1221   overflow: auto; }
1222
1223 #html-editor {
1224   display: none; }
1225
1226 #markdown-editor {
1227   position: relative;
1228   z-index: 5; }
1229   #markdown-editor #markdown-editor-input {
1230     font-style: normal;
1231     font-weight: 400;
1232     padding: 6px 16px;
1233     color: #444;
1234     border-radius: 0;
1235     max-height: 100%;
1236     flex: 1;
1237     border: 0;
1238     width: 100%; }
1239     #markdown-editor #markdown-editor-input:focus {
1240       outline: 0; }
1241   #markdown-editor .markdown-display, #markdown-editor .markdown-editor-wrap {
1242     flex: 1;
1243     position: relative; }
1244   #markdown-editor .markdown-editor-wrap {
1245     display: flex;
1246     flex-direction: column;
1247     border: 1px solid #DDD;
1248     width: 50%;
1249     max-width: 50%; }
1250
1251 @media screen and (max-width: 880px) {
1252   #markdown-editor {
1253     flex-direction: column; }
1254   #markdown-editor .markdown-editor-wrap {
1255     width: 100%;
1256     max-width: 100%; }
1257   #markdown-editor .editor-toolbar {
1258     padding: 0; }
1259   #markdown-editor .editor-toolbar > * {
1260     padding: 6px 12px; }
1261   .editor-toolbar-label {
1262     float: none !important;
1263     border-bottom: 1px solid #DDD;
1264     display: block; }
1265   .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
1266     display: none; }
1267   #markdown-editor .markdown-editor-wrap:not(.active) {
1268     flex-grow: 0;
1269     flex: none; } }
1270
1271 .markdown-display {
1272   padding: 0 16px 0;
1273   margin-left: -1px;
1274   overflow-y: scroll; }
1275   .markdown-display.page-content {
1276     margin: 0 auto;
1277     width: 100%;
1278     max-width: 100%; }
1279   .markdown-display [drawio-diagram]:hover {
1280     outline: 2px solid #0288D1; }
1281
1282 .editor-toolbar {
1283   width: 100%;
1284   padding: 6px 16px;
1285   font-size: 11px;
1286   line-height: 1.6;
1287   border-bottom: 1px solid #DDD;
1288   background-color: #EEE;
1289   flex: none; }
1290   .editor-toolbar:after {
1291     content: '';
1292     display: block;
1293     clear: both; }
1294
1295 label {
1296   display: block;
1297   line-height: 1.4em;
1298   font-size: 0.94em;
1299   font-weight: 400;
1300   color: #666;
1301   padding-bottom: 2px;
1302   margin-bottom: 0.2em; }
1303   label.inline {
1304     display: inline-block; }
1305
1306 label.radio, label.checkbox {
1307   font-weight: 400;
1308   -webkit-user-select: none;
1309      -moz-user-select: none;
1310       -ms-user-select: none;
1311           user-select: none; }
1312   label.radio input[type="radio"], label.radio input[type="checkbox"], label.checkbox input[type="radio"], label.checkbox input[type="checkbox"] {
1313     margin-right: 6px; }
1314
1315 label.inline.checkbox {
1316   margin-right: 16px; }
1317
1318 label + p.small {
1319   margin-bottom: 0.8em; }
1320
1321 table.form-table {
1322   max-width: 100%; }
1323   table.form-table td {
1324     overflow: hidden;
1325     padding: 1.5px 0; }
1326
1327 input[type=date] {
1328   width: 190px; }
1329
1330 .toggle-switch {
1331   -webkit-user-select: none;
1332      -moz-user-select: none;
1333       -ms-user-select: none;
1334           user-select: none;
1335   display: inline-grid;
1336   grid-template-columns: 28px 1fr;
1337   align-items: center;
1338   margin: 16px 0; }
1339   .toggle-switch .custom-checkbox {
1340     width: 16px;
1341     height: 16px;
1342     border-radius: 2px;
1343     display: inline-block;
1344     border: 2px solid currentColor;
1345     opacity: 0.6;
1346     overflow: hidden;
1347     fill: currentColor; }
1348     .toggle-switch .custom-checkbox .svg-icon {
1349       width: 100%;
1350       height: 100%;
1351       margin: 0;
1352       bottom: auto;
1353       top: -1.5px;
1354       left: 0;
1355       transition: -webkit-transform ease-in-out 120ms;
1356       transition: transform ease-in-out 120ms;
1357       transition: transform ease-in-out 120ms, -webkit-transform ease-in-out 120ms;
1358       -webkit-transform: scale(0);
1359               transform: scale(0);
1360       -webkit-transform-origin: center center;
1361               transform-origin: center center; }
1362   .toggle-switch input[type=checkbox] {
1363     display: none; }
1364   .toggle-switch input[type=checkbox]:checked + .custom-checkbox .svg-icon {
1365     -webkit-transform: scale(1);
1366             transform: scale(1); }
1367   .toggle-switch .custom-checkbox:hover {
1368     background-color: rgba(0, 0, 0, 0.05);
1369     opacity: 0.8; }
1370
1371 .toggle-switch-list .toggle-switch {
1372   margin: 6px 0; }
1373
1374 .toggle-switch-list.compact .toggle-switch {
1375   margin: 1px 0; }
1376
1377 .form-group {
1378   margin-bottom: 12px; }
1379
1380 .setting-list > div {
1381   border-bottom: 1px solid #DDD;
1382   padding: 32px 0; }
1383   .setting-list > div:last-child {
1384     border-bottom: none; }
1385
1386 .setting-list-label {
1387   color: #222;
1388   font-size: 1rem; }
1389
1390 .setting-list-label + p.small {
1391   margin-bottom: 0; }
1392
1393 .setting-list-label + .grid {
1394   margin-top: 16px; }
1395
1396 .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 {
1397   width: 100%; }
1398
1399 .simple-code-input {
1400   background-color: #F8F8F8;
1401   font-family: monospace;
1402   font-size: 12px;
1403   min-height: 100px;
1404   display: block;
1405   width: 100%; }
1406
1407 .form-group div.text-pos, .form-group div.text-neg, .form-group p.text-post, .form-group p.text-neg {
1408   padding: 6px 0; }
1409
1410 .form-group[collapsible] {
1411   padding: 0 16px;
1412   border: 1px solid #DDD;
1413   border-radius: 4px; }
1414   .form-group[collapsible] .collapse-title {
1415     margin-left: -16px;
1416     margin-right: -16px;
1417     padding: 12px 16px; }
1418   .form-group[collapsible] .collapse-title, .form-group[collapsible] .collapse-title label {
1419     cursor: pointer; }
1420   .form-group[collapsible] .collapse-title label {
1421     padding-bottom: 0;
1422     margin-bottom: 0;
1423     color: inherit; }
1424   .form-group[collapsible] .collapse-title label:before {
1425     display: inline-block;
1426     content: '▸';
1427     margin-right: 16px;
1428     transition: all ease-in-out 400ms;
1429     -webkit-transform: rotate(0);
1430             transform: rotate(0); }
1431   .form-group[collapsible] .collapse-content {
1432     display: none;
1433     padding-bottom: 16px; }
1434   .form-group[collapsible].open .collapse-title label:before {
1435     -webkit-transform: rotate(90deg);
1436             transform: rotate(90deg); }
1437
1438 .inline-input-style, .title-input input[type="text"], .description-input textarea {
1439   display: block;
1440   width: 100%;
1441   padding: 12px; }
1442
1443 .title-input input[type="text"] {
1444   margin-top: 0;
1445   font-size: 2em; }
1446
1447 .title-input.page-title {
1448   font-size: 0.8em; }
1449   .title-input.page-title .input {
1450     border: 0;
1451     margin-bottom: -1px; }
1452   .title-input.page-title input[type="text"] {
1453     max-width: 840px;
1454     margin: 0 auto;
1455     border: none; }
1456
1457 .page-title input {
1458   display: block;
1459   width: 100%;
1460   font-size: 1.4em; }
1461
1462 .description-input textarea {
1463   font-size: 14px;
1464   color: #666;
1465   width: 100%; }
1466
1467 div[editor-type="markdown"] .title-input.page-title input[type="text"] {
1468   max-width: 100%; }
1469
1470 .search-box {
1471   max-width: 100%;
1472   position: relative; }
1473   .search-box button {
1474     background-color: transparent;
1475     border: none;
1476     color: #0288D1;
1477     padding: 0;
1478     cursor: pointer;
1479     position: absolute;
1480     left: 8px;
1481     top: 9.5px; }
1482   .search-box input {
1483     display: block;
1484     padding-left: 24px;
1485     width: 300px;
1486     max-width: 100%; }
1487   .search-box.flexible input {
1488     width: 100%; }
1489   .search-box .search-box-cancel {
1490     left: auto;
1491     right: 0; }
1492
1493 .outline > input {
1494   border: 0;
1495   border-bottom: 2px solid #DDD;
1496   border-radius: 0; }
1497   .outline > input:focus, .outline > input:active {
1498     border: 0;
1499     border-bottom: 2px solid #AAA;
1500     outline: 0; }
1501
1502 .image-picker img {
1503   background-color: #BBB;
1504   max-width: 100%; }
1505
1506 table {
1507   min-width: 100px;
1508   max-width: 100%; }
1509   table thead {
1510     background-color: #F8F8F8;
1511     font-weight: 500; }
1512   table td, table th {
1513     min-width: 10px;
1514     padding: 6px 8px;
1515     border: 1px solid #DDD;
1516     overflow: auto;
1517     line-height: 1.2; }
1518   table td p, table th p {
1519     margin: 0; }
1520
1521 table.table {
1522   width: 100%; }
1523   table.table tr td, table.table tr th {
1524     border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
1525   table.table th, table.table td {
1526     text-align: left;
1527     border: none;
1528     padding: 12px 12px;
1529     vertical-align: middle;
1530     margin: 0; }
1531   table.table th {
1532     font-weight: bold; }
1533   table.table tr:hover {
1534     background-color: #EEE; }
1535   table.table .text-right {
1536     text-align: right; }
1537   table.table .text-center {
1538     text-align: center; }
1539   table.table td.actions {
1540     overflow: visible; }
1541   table.table a {
1542     display: inline-block; }
1543
1544 table.no-style td {
1545   border: 0;
1546   padding: 0; }
1547
1548 table.list-table {
1549   margin: -6px; }
1550   table.list-table td {
1551     border: 0;
1552     vertical-align: middle;
1553     padding: 6px; }
1554
1555 /**
1556  * Includes the main navigation header and the faded toolbar.
1557  */
1558 header .grid {
1559   grid-template-columns: auto -webkit-min-content auto;
1560   grid-template-columns: auto min-content auto; }
1561
1562 @media screen and (max-width: 1000px) {
1563   header .grid {
1564     grid-template-columns: 1fr;
1565     grid-row-gap: 0; } }
1566
1567 header {
1568   position: relative;
1569   display: block;
1570   z-index: 6;
1571   top: 0;
1572   background-color: #0288D1;
1573   color: #fff;
1574   fill: #fff;
1575   border-bottom: 1px solid #DDD;
1576   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
1577   padding: 3px 0; }
1578   header .links {
1579     display: inline-block;
1580     vertical-align: top; }
1581   header .links a {
1582     display: inline-block;
1583     padding: 16px;
1584     color: #FFF;
1585     fill: #FFF; }
1586   header .dropdown-container {
1587     padding-left: 16px;
1588     padding-right: 0; }
1589   header .avatar, header .user-name {
1590     display: inline-block; }
1591   header .avatar {
1592     width: 30px;
1593     height: 30px; }
1594   header .user-name {
1595     vertical-align: top;
1596     padding-top: 16px;
1597     position: relative;
1598     top: -3px;
1599     display: inline-block;
1600     cursor: pointer; }
1601     header .user-name > * {
1602       vertical-align: top; }
1603     header .user-name > span {
1604       padding-left: 6px;
1605       display: inline-block;
1606       padding-top: 3px; }
1607     header .user-name > svg {
1608       padding-top: 4px;
1609       font-size: 18px; }
1610     @media screen and (min-width: 1000px) and (max-width: 1100px) {
1611       header .user-name {
1612         padding-left: 6px; }
1613         header .user-name .name {
1614           display: none; } }
1615
1616 .header-search {
1617   display: inline-block; }
1618
1619 header .search-box {
1620   display: inline-block;
1621   margin-top: 10px; }
1622   header .search-box input {
1623     background-color: rgba(0, 0, 0, 0.2);
1624     border: 1px solid rgba(255, 255, 255, 0.2);
1625     border-radius: 40px;
1626     color: #EEE;
1627     z-index: 2;
1628     padding-left: 40px; }
1629   header .search-box button {
1630     fill: #EEE;
1631     z-index: 1;
1632     left: 16px; }
1633     header .search-box button svg {
1634       margin-right: 0; }
1635   header .search-box ::-webkit-input-placeholder {
1636     /* Chrome/Opera/Safari */
1637     color: #DDD; }
1638   header .search-box ::-moz-placeholder {
1639     /* Firefox 19+ */
1640     color: #DDD; }
1641   header .search-box :-ms-input-placeholder {
1642     /* IE 10+ */
1643     color: #DDD; }
1644   header .search-box :-moz-placeholder {
1645     /* Firefox 18- */
1646     color: #DDD; }
1647   @media screen and (min-width: 1000px) and (max-width: 1100px) {
1648     header .search-box {
1649       max-width: 200px; } }
1650
1651 .logo {
1652   display: inline-block; }
1653   .logo:hover {
1654     color: #FFF;
1655     text-decoration: none; }
1656
1657 .logo-text {
1658   display: inline-block;
1659   font-size: 1.8em;
1660   color: #fff;
1661   font-weight: 400;
1662   padding: 14px 24px 14px 0;
1663   vertical-align: top;
1664   line-height: 1; }
1665
1666 .logo-image {
1667   margin: 6px 12px 6px 0;
1668   vertical-align: top;
1669   height: 43px; }
1670
1671 .mobile-menu-toggle {
1672   color: #FFF;
1673   fill: #FFF;
1674   font-size: 2em;
1675   border: 2px solid rgba(255, 255, 255, 0.8);
1676   border-radius: 4px;
1677   padding: 0 6px;
1678   position: absolute;
1679   right: 16px;
1680   top: 13px;
1681   line-height: 1;
1682   cursor: pointer;
1683   -webkit-user-select: none;
1684      -moz-user-select: none;
1685       -ms-user-select: none;
1686           user-select: none; }
1687   .mobile-menu-toggle svg {
1688     margin: 0;
1689     bottom: -2px; }
1690
1691 @media screen and (max-width: 1000px) {
1692   header .header-links {
1693     display: none;
1694     background-color: #FFF;
1695     z-index: 10;
1696     right: 16px;
1697     border-radius: 4px;
1698     overflow: hidden;
1699     position: absolute;
1700     box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.13);
1701     margin-top: -6px; }
1702     header .header-links.show {
1703       display: block; }
1704   header .links a, header .dropdown-container ul li a {
1705     text-align: left;
1706     display: block;
1707     padding: 12px 16px;
1708     color: #444;
1709     fill: #444; }
1710     header .links a svg, header .dropdown-container ul li a svg {
1711       margin-right: 12px; }
1712     header .links a:hover, header .dropdown-container ul li a:hover {
1713       background-color: #EEE;
1714       color: #444;
1715       fill: #444;
1716       text-decoration: none; }
1717   header .dropdown-container {
1718     display: block;
1719     padding-left: 0; }
1720   header .links {
1721     display: block; }
1722   header .dropdown-container ul {
1723     display: block !important;
1724     position: relative;
1725     background-color: transparent;
1726     border: 0;
1727     padding: 0;
1728     margin: 0;
1729     box-shadow: none; } }
1730
1731 .tri-layout-mobile-tabs {
1732   position: -webkit-sticky;
1733   position: sticky;
1734   top: 0;
1735   z-index: 5;
1736   background-color: #FFF;
1737   border-bottom: 1px solid #DDD;
1738   box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1); }
1739
1740 .tri-layout-mobile-tab {
1741   text-align: center;
1742   border-bottom: 3px solid #BBB;
1743   cursor: pointer; }
1744   .tri-layout-mobile-tab:first-child {
1745     border-right: 1px solid #DDD; }
1746   .tri-layout-mobile-tab.active {
1747     border-bottom-color: currentColor; }
1748
1749 .breadcrumbs {
1750   display: flex;
1751   flex-direction: row;
1752   align-items: center;
1753   justify-content: flex-start;
1754   flex-wrap: wrap;
1755   opacity: 0.7; }
1756   .breadcrumbs .icon-list-item {
1757     width: auto;
1758     padding-top: 6px;
1759     padding-bottom: 6px; }
1760   .breadcrumbs .separator {
1761     display: inline-block;
1762     fill: #aaa;
1763     font-size: 1.6em;
1764     line-height: 0.8;
1765     margin: -2px 0 0; }
1766   .breadcrumbs:hover {
1767     opacity: 1; }
1768
1769 @media screen and (max-width: 1000px) {
1770   .breadcrumbs .icon-list-item {
1771     padding: 6px; }
1772     .breadcrumbs .icon-list-item > span + span {
1773       display: none; }
1774     .breadcrumbs .icon-list-item > span:first-child {
1775       margin-right: 0; } }
1776
1777 .breadcrumb-listing {
1778   position: relative; }
1779   .breadcrumb-listing .breadcrumb-listing-toggle {
1780     padding: 6px;
1781     border: 1px solid transparent;
1782     border-radius: 4px; }
1783     .breadcrumb-listing .breadcrumb-listing-toggle:hover {
1784       border-color: #DDD; }
1785   .breadcrumb-listing .svg-icon {
1786     margin-right: 0; }
1787
1788 .breadcrumb-listing-dropdown {
1789   box-shadow: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
1790   overflow: hidden;
1791   min-height: 100px;
1792   width: 240px;
1793   display: none;
1794   position: absolute;
1795   z-index: 80;
1796   right: -16px; }
1797   .breadcrumb-listing-dropdown .breadcrumb-listing-search .svg-icon {
1798     position: absolute;
1799     left: 12px;
1800     top: 11px;
1801     fill: #888;
1802     pointer-events: none; }
1803   .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
1804     max-height: 400px;
1805     overflow-y: scroll;
1806     text-align: left; }
1807   .breadcrumb-listing-dropdown input {
1808     padding-left: 32px;
1809     border-radius: 0;
1810     border: 0;
1811     border-bottom: 1px solid #DDD; }
1812
1813 @media screen and (max-width: 880px) {
1814   .breadcrumb-listing-dropdown {
1815     position: fixed;
1816     right: auto;
1817     left: 16px; }
1818   .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
1819     max-height: 240px; } }
1820
1821 .faded a, .faded button, .faded span, .faded span > div {
1822   color: #666;
1823   fill: #666; }
1824
1825 .faded .text-button {
1826   opacity: 0.5;
1827   transition: all ease-in-out 120ms; }
1828   .faded .text-button:hover {
1829     opacity: 1;
1830     text-decoration: none; }
1831
1832 .faded span.faded-text {
1833   display: inline-block;
1834   padding: 12px; }
1835
1836 .action-buttons .text-button {
1837   display: inline-block;
1838   padding: 6px 12px; }
1839   .action-buttons .text-button:last-child {
1840     padding-right: 0; }
1841   .action-buttons .text-button:first-child {
1842     padding-left: 0; }
1843
1844 .action-buttons .dropdown-container:last-child a {
1845   padding-right: 0;
1846   padding-left: 12px; }
1847
1848 .action-buttons {
1849   text-align: right; }
1850   .action-buttons.text-left {
1851     text-align: left; }
1852     .action-buttons.text-left .text-button {
1853       padding-right: 16px;
1854       padding-left: 0; }
1855   .action-buttons.text-center {
1856     text-align: center; }
1857
1858 @media screen and (max-width: 880px) {
1859   .action-buttons .text-button {
1860     padding: 6px 6px; }
1861   .action-buttons .dropdown-container:last-child a {
1862     padding-left: 6px; } }
1863
1864 .nav-tabs {
1865   text-align: center; }
1866   .nav-tabs a, .nav-tabs .tab-item {
1867     padding: 16px;
1868     display: inline-block;
1869     color: #666;
1870     fill: #666;
1871     cursor: pointer; }
1872     .nav-tabs a.selected, .nav-tabs .tab-item.selected {
1873       border-bottom: 2px solid #0288D1; }
1874
1875 .book-contents .entity-list-item .icon {
1876   width: 4px;
1877   border-radius: 1px;
1878   justify-self: stretch;
1879   align-self: stretch;
1880   height: auto;
1881   margin-right: 24px; }
1882
1883 .book-contents .entity-list-item .icon:after {
1884   opacity: 0.5; }
1885
1886 .book-contents .entity-list-item .icon svg {
1887   display: none; }
1888
1889 .book-contents .entity-list-item p {
1890   margin-bottom: 0; }
1891
1892 .book-contents .entity-list-item .inner-page {
1893   padding-top: 0;
1894   padding-bottom: 0; }
1895
1896 .entity-list-item + .chapter-expansion {
1897   display: flex;
1898   padding: 0 16px 16px 16px;
1899   align-items: center;
1900   border: 0;
1901   width: 100%;
1902   position: relative; }
1903   .entity-list-item + .chapter-expansion > .icon {
1904     width: 4px;
1905     height: auto;
1906     border-radius: 0 0 1px 1px;
1907     align-self: stretch;
1908     flex-shrink: 0; }
1909     .entity-list-item + .chapter-expansion > .icon:before {
1910       position: absolute;
1911       top: 0;
1912       left: 0;
1913       width: 100%;
1914       height: 1px;
1915       background-color: currentColor;
1916       content: '';
1917       opacity: 0.5; }
1918     .entity-list-item + .chapter-expansion > .icon:after {
1919       opacity: 0.5; }
1920   .entity-list-item + .chapter-expansion .icon svg {
1921     display: none; }
1922   .entity-list-item + .chapter-expansion > .content {
1923     flex: 1; }
1924   .entity-list-item + .chapter-expansion .chapter-expansion-toggle {
1925     border-radius: 0 4px 4px 0;
1926     padding: 6px 16px; }
1927   .entity-list-item + .chapter-expansion .chapter-expansion-toggle:hover {
1928     background-color: rgba(0, 0, 0, 0.06); }
1929
1930 .entity-list-item.has-children {
1931   padding-bottom: 0; }
1932   .entity-list-item.has-children > .icon {
1933     border-radius: 4px 4px 0 0; }
1934
1935 .inset-list {
1936   display: none; }
1937   .inset-list .entity-list-item-name {
1938     font-size: 1rem; }
1939   .inset-list .entity-list-item-children {
1940     padding-top: 0;
1941     padding-bottom: 0; }
1942
1943 .sidebar-page-nav {
1944   list-style: none;
1945   margin: 12px 0 16px 6px;
1946   position: relative; }
1947   .sidebar-page-nav:after {
1948     content: '';
1949     display: block;
1950     position: absolute;
1951     left: 0;
1952     background-color: rgba(0, 0, 0, 0.2);
1953     width: 2px;
1954     top: 5px;
1955     bottom: 5px;
1956     z-index: 0; }
1957   .sidebar-page-nav li {
1958     margin-bottom: 4px;
1959     font-size: 0.95em;
1960     position: relative; }
1961   .sidebar-page-nav .h1 {
1962     padding-left: 16px; }
1963   .sidebar-page-nav .h2 {
1964     padding-left: 16px; }
1965   .sidebar-page-nav .h3 {
1966     padding-left: 32px; }
1967   .sidebar-page-nav .h4 {
1968     padding-left: 40px; }
1969   .sidebar-page-nav .h5 {
1970     padding-left: 48px; }
1971   .sidebar-page-nav .h6 {
1972     padding-left: 56px; }
1973   .sidebar-page-nav .current-heading {
1974     font-weight: bold; }
1975   .sidebar-page-nav li:not(.current-heading) .sidebar-page-nav-bullet {
1976     background-color: #BBB !important; }
1977   .sidebar-page-nav .sidebar-page-nav-bullet {
1978     width: 6px;
1979     height: 6px;
1980     position: absolute;
1981     left: -2px;
1982     top: 30%;
1983     border-radius: 50%;
1984     box-shadow: 0 0 0 6px #F2F2F2;
1985     z-index: 1; }
1986
1987 .book-tree .sidebar-page-list {
1988   list-style: none;
1989   margin: -6px -12px;
1990   padding-left: 0;
1991   padding-right: 0;
1992   position: relative; }
1993   .book-tree .sidebar-page-list:after, .book-tree .sidebar-page-list .sub-menu:after {
1994     content: '';
1995     display: block;
1996     position: absolute;
1997     left: 16px;
1998     top: 1rem;
1999     bottom: 1rem;
2000     border-left: 4px solid rgba(0, 0, 0, 0.1);
2001     z-index: 0; }
2002   .book-tree .sidebar-page-list ul {
2003     list-style: none;
2004     padding-left: 1rem;
2005     padding-right: 0; }
2006   .book-tree .sidebar-page-list .entity-list-item {
2007     padding-top: 3px;
2008     padding-bottom: 3px;
2009     background-clip: content-box;
2010     border-radius: 0 3px 3px 0; }
2011     .book-tree .sidebar-page-list .entity-list-item .content {
2012       padding-top: 6px;
2013       padding-bottom: 6px;
2014       max-width: calc(100% - 20px); }
2015   .book-tree .sidebar-page-list .entity-list-item.selected {
2016     background-color: rgba(0, 0, 0, 0.08); }
2017   .book-tree .sidebar-page-list .entity-list-item.no-hover {
2018     margin-top: -6px;
2019     padding-right: 0; }
2020   .book-tree .sidebar-page-list .entity-list-item-name {
2021     font-size: 1em;
2022     margin: 0; }
2023   .book-tree .sidebar-page-list .chapter-child-menu {
2024     font-size: .8rem;
2025     margin-top: -.2rem;
2026     margin-left: -1rem; }
2027   .book-tree .sidebar-page-list [chapter-toggle] {
2028     padding-left: .7rem;
2029     padding-bottom: .2rem; }
2030   .book-tree .sidebar-page-list .entity-list-item .icon {
2031     z-index: 2;
2032     width: 4px;
2033     height: auto;
2034     align-self: stretch;
2035     flex-shrink: 0;
2036     border-radius: 1px;
2037     opacity: 0.6; }
2038   .book-tree .sidebar-page-list .entity-list-item .icon:after {
2039     opacity: 1; }
2040   .book-tree .sidebar-page-list .entity-list-item .icon svg {
2041     display: none; }
2042
2043 .chapter-child-menu ul.sub-menu {
2044   display: none;
2045   padding-left: 0;
2046   position: relative; }
2047
2048 .chapter-child-menu [chapter-toggle].open + .sub-menu {
2049   display: block; }
2050
2051 .sortable-page-list, .sortable-page-list ul {
2052   list-style: none; }
2053
2054 .sort-box {
2055   margin-bottom: 16px;
2056   border: 2px solid rgba(0, 150, 136, 0.6);
2057   padding: 16px 32px;
2058   border-radius: 4px; }
2059
2060 .sort-box-options {
2061   display: flex;
2062   flex-wrap: wrap;
2063   justify-content: space-between; }
2064
2065 .sort-box-options .button {
2066   margin-left: 0; }
2067
2068 .sortable-page-list {
2069   margin-left: 0;
2070   padding: 0; }
2071   .sortable-page-list .entity-list-item > span:first-child {
2072     align-self: flex-start; }
2073   .sortable-page-list .entity-list-item > div {
2074     display: block;
2075     flex: 1; }
2076   .sortable-page-list > ul {
2077     margin-left: 0; }
2078   .sortable-page-list ul {
2079     margin-bottom: 16px;
2080     margin-top: 0;
2081     padding-left: 16px; }
2082   .sortable-page-list li {
2083     border: 1px solid #DDD;
2084     margin-top: -1px;
2085     min-height: 38px; }
2086     .sortable-page-list li.text-chapter {
2087       border-left: 2px solid #d7804a; }
2088     .sortable-page-list li.text-page {
2089       border-left: 2px solid #0288D1; }
2090   .sortable-page-list li:first-child {
2091     margin-top: 6px; }
2092
2093 .sortable-page-list li.placeholder {
2094   position: relative; }
2095
2096 .sortable-page-list li.placeholder:before {
2097   position: absolute; }
2098
2099 .activity-list-item {
2100   padding: 12px 0;
2101   display: grid;
2102   grid-template-columns: -webkit-min-content 1fr;
2103   grid-template-columns: min-content 1fr;
2104   grid-column-gap: 16px;
2105   color: #888;
2106   fill: #888;
2107   font-size: 0.9em; }
2108
2109 .card .activity-list-item {
2110   padding: 12px 16px; }
2111
2112 .user-list-item {
2113   display: inline-grid;
2114   padding: 12px;
2115   grid-template-columns: -webkit-min-content 1fr;
2116   grid-template-columns: min-content 1fr;
2117   grid-column-gap: 16px;
2118   font-size: 0.9em;
2119   align-items: center; }
2120   .user-list-item > div:first-child {
2121     line-height: 0; }
2122
2123 ul.pagination {
2124   display: inline-block;
2125   list-style: none;
2126   margin: 16px 0;
2127   padding-left: 1px; }
2128   ul.pagination li {
2129     float: left; }
2130   ul.pagination li:first-child a, ul.pagination li:first-child span {
2131     border-radius: 3px 0 0 3px; }
2132   ul.pagination li:last-child a, ul.pagination li:last-child span {
2133     border-radius: 0 3px 3px 0; }
2134   ul.pagination a, ul.pagination span {
2135     display: block;
2136     padding: 3px 12px;
2137     border: 1px solid #CCC;
2138     margin-left: -1px;
2139     -webkit-user-select: none;
2140        -moz-user-select: none;
2141         -ms-user-select: none;
2142             user-select: none; }
2143     ul.pagination a.disabled, ul.pagination span.disabled {
2144       cursor: not-allowed; }
2145   ul.pagination li.active span {
2146     color: #FFF; }
2147
2148 .compact ul.pagination {
2149   margin: 0; }
2150
2151 .entity-list, .icon-list {
2152   margin: 0 -16px; }
2153   .entity-list h4, .icon-list h4 {
2154     margin: 0; }
2155   .entity-list hr, .icon-list hr {
2156     margin: 0; }
2157   .entity-list .text-small.text-muted, .icon-list .text-small.text-muted {
2158     color: #AAA;
2159     font-size: 0.75em;
2160     margin-top: 6px; }
2161   .entity-list .text-muted p.text-muted, .icon-list .text-muted p.text-muted {
2162     margin-top: 0; }
2163   .entity-list .page.draft .text-page, .icon-list .page.draft .text-page {
2164     color: #9A60DA;
2165     fill: #9A60DA; }
2166   .entity-list > .dropdown-container, .icon-list > .dropdown-container {
2167     display: block; }
2168
2169 .icon-list hr {
2170   margin: 12px 16px;
2171   max-width: 140px;
2172   opacity: 0.25;
2173   height: 1.1px; }
2174
2175 .icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {
2176   display: none; }
2177
2178 .entity-list-item, .icon-list-item {
2179   padding: 12px 16px;
2180   display: flex;
2181   align-items: center;
2182   background-color: transparent;
2183   border: 0;
2184   width: 100%;
2185   position: relative;
2186   word-break: break-word; }
2187   .entity-list-item h4 a, .icon-list-item h4 a {
2188     color: #666; }
2189   .entity-list-item > span:first-child, .icon-list-item > span:first-child {
2190     margin-right: 16px;
2191     flex-basis: 1.88em;
2192     flex: none; }
2193   .entity-list-item > span:last-child, .icon-list-item > span:last-child {
2194     flex: 1;
2195     text-align: left; }
2196   .entity-list-item:not(.no-hover), .icon-list-item:not(.no-hover) {
2197     cursor: pointer; }
2198   .entity-list-item:not(.no-hover):hover, .icon-list-item:not(.no-hover):hover {
2199     text-decoration: none;
2200     background-color: rgba(0, 0, 0, 0.1);
2201     border-radius: 4px; }
2202   .entity-list-item.outline-hover, .icon-list-item.outline-hover {
2203     border: 1px solid transparent; }
2204   .entity-list-item.outline-hover:hover, .icon-list-item.outline-hover:hover {
2205     background-color: transparent;
2206     border-color: rgba(0, 0, 0, 0.1); }
2207
2208 .entity-list-item-path-sep {
2209   display: inline-block;
2210   vertical-align: top;
2211   position: relative;
2212   top: 1px; }
2213   .entity-list-item-path-sep svg {
2214     margin-right: 0; }
2215
2216 .card .entity-list-item:not(.no-hover):hover {
2217   background-color: #F2F2F2; }
2218
2219 .card .entity-list-item .entity-list-item:hover {
2220   background-color: #EEEEEE; }
2221
2222 .entity-list-item-children {
2223   padding: 16px; }
2224   .entity-list-item-children > div {
2225     overflow: hidden;
2226     padding: 6px 0;
2227     margin-top: -6px; }
2228   .entity-list-item-children .entity-chip {
2229     text-overflow: ellipsis;
2230     height: 2.5em;
2231     overflow: hidden;
2232     text-align: left;
2233     display: block;
2234     white-space: nowrap; }
2235
2236 .entity-list-item-image {
2237   align-self: stretch;
2238   width: 140px;
2239   flex: none;
2240   background-size: cover;
2241   background-position: 50% 50%;
2242   border-radius: 3px;
2243   position: relative;
2244   margin-right: 24px; }
2245   .entity-list-item-image.entity-list-item-image-wide {
2246     width: 220px; }
2247   .entity-list-item-image .svg-icon {
2248     color: #FFF;
2249     fill: #FFF;
2250     font-size: 1.66rem;
2251     margin-right: 0;
2252     position: absolute;
2253     bottom: 6px;
2254     left: 6px; }
2255   @media screen and (max-width: 880px) {
2256     .entity-list-item-image {
2257       width: 80px; } }
2258
2259 .chapter > .entity-list-item-image {
2260   width: 60px; }
2261
2262 .entity-list.compact {
2263   font-size: 8.4px; }
2264   .entity-list.compact h4, .entity-list.compact a {
2265     line-height: 1.2; }
2266   .entity-list.compact .entity-item-snippet {
2267     display: none; }
2268   .entity-list.compact .entity-list-item p {
2269     font-size: 11.2px;
2270     padding-top: 6px; }
2271   .entity-list.compact p {
2272     margin: 0; }
2273   .entity-list.compact > p.empty-text {
2274     display: block;
2275     font-size: 14px; }
2276   .entity-list.compact hr {
2277     margin: 0; }
2278   @media screen and (max-width: 880px) {
2279     .entity-list.compact h4 {
2280       font-size: 1.666em; } }
2281
2282 .dropdown-container {
2283   display: inline-block;
2284   vertical-align: top;
2285   position: relative; }
2286
2287 .dropdown-menu {
2288   display: none;
2289   position: absolute;
2290   z-index: 999;
2291   top: 0;
2292   list-style: none;
2293   right: 0;
2294   margin: 16px 0;
2295   background-color: #FFFFFF;
2296   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
2297   border-radius: 1px;
2298   border: 1px solid #EEE;
2299   min-width: 180px;
2300   padding: 6px 0;
2301   color: #555;
2302   fill: #555;
2303   text-align: left !important; }
2304   .dropdown-menu.wide {
2305     min-width: 220px; }
2306   .dropdown-menu .text-muted {
2307     color: #999;
2308     fill: #999; }
2309   .dropdown-menu li.active a {
2310     font-weight: 600; }
2311   .dropdown-menu a, .dropdown-menu button {
2312     display: block;
2313     padding: 6px 16px;
2314     color: #555;
2315     fill: #555;
2316     white-space: nowrap; }
2317     .dropdown-menu a:hover, .dropdown-menu button:hover {
2318       text-decoration: none;
2319       background-color: #EEE; }
2320     .dropdown-menu a svg, .dropdown-menu button svg {
2321       margin-right: 12px;
2322       display: inline-block;
2323       width: 16px; }
2324   .dropdown-menu button {
2325     width: 100%;
2326     text-align: left; }
2327   .dropdown-menu li.border-bottom {
2328     border-bottom: 1px solid #DDD; }
2329
2330 .featured-image-container {
2331   position: relative;
2332   overflow: hidden;
2333   min-height: 140px;
2334   background-size: cover;
2335   background-position: 50% 50%;
2336   transition: opacity ease-in-out 240ms; }
2337   .featured-image-container a {
2338     display: block; }
2339   .featured-image-container img {
2340     display: block;
2341     width: 100%;
2342     max-width: 100%;
2343     height: auto; }
2344
2345 .featured-image-container-wrap {
2346   position: relative; }
2347   .featured-image-container-wrap .svg-icon {
2348     color: #FFF;
2349     fill: #FFF;
2350     font-size: 2rem;
2351     margin-right: 0;
2352     position: absolute;
2353     bottom: 10px;
2354     left: 6px; }
2355
2356 .grid-card:hover .featured-image-container {
2357   opacity: .5; }
2358
2359 .action-link {
2360   background: transparent;
2361   border: none;
2362   color: currentColor;
2363   padding: 16px 0; }
2364
2365 .active-link-list a {
2366   display: inline-block;
2367   padding: 12px; }
2368
2369 .active-link-list a:not(.active) {
2370   color: #444;
2371   fill: #444; }
2372
2373 .active-link-list a:hover {
2374   background-color: rgba(0, 0, 0, 0.05);
2375   border-radius: 3px;
2376   text-decoration: none; }
2377
2378 .page-editor {
2379   display: flex;
2380   flex-direction: column;
2381   align-items: stretch;
2382   overflow: hidden;
2383   background-color: #FFF; }
2384   .page-editor .edit-area {
2385     flex: 1;
2386     flex-direction: column;
2387     z-index: 10; }
2388   .page-editor .mce-tinymce {
2389     box-shadow: none; }
2390   .page-editor .mce-top-part::before {
2391     box-shadow: none; }
2392
2393 @media screen and (max-width: 600px) {
2394   .page-edit-toolbar {
2395     overflow-x: scroll;
2396     overflow-y: visible; }
2397   .page-edit-toolbar .grid.third {
2398     display: block;
2399     white-space: nowrap; }
2400     .page-edit-toolbar .grid.third > div {
2401       display: inline-block; } }
2402
2403 .page-save-mobile-button {
2404   position: fixed;
2405   z-index: 30;
2406   border-radius: 50%;
2407   width: 56px;
2408   height: 56px;
2409   font-size: 24px;
2410   right: 16px;
2411   bottom: 12px;
2412   box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.13);
2413   background-color: currentColor;
2414   text-align: center; }
2415   .page-save-mobile-button svg {
2416     fill: #FFF;
2417     margin-right: 0; }
2418
2419 .draft-notification {
2420   pointer-events: none;
2421   -webkit-transform: scale(0);
2422           transform: scale(0);
2423   transition: -webkit-transform ease-in-out 120ms;
2424   transition: transform ease-in-out 120ms;
2425   transition: transform ease-in-out 120ms, -webkit-transform ease-in-out 120ms;
2426   -webkit-transform-origin: 50% 50%;
2427           transform-origin: 50% 50%; }
2428   .draft-notification.visible {
2429     -webkit-transform: scale(1);
2430             transform: scale(1); }
2431
2432 .page-style.editor {
2433   padding: 0 !important; }
2434
2435 .page-content {
2436   width: 100%;
2437   max-width: 840px;
2438   margin: 0 auto;
2439   overflow-wrap: break-word; }
2440   .page-content .align-left {
2441     text-align: left; }
2442   .page-content img.align-left, .page-content table.align-left {
2443     float: left !important;
2444     margin: 6px 16px 16px 0; }
2445   .page-content .align-right {
2446     text-align: right !important; }
2447   .page-content img.align-right, .page-content table.align-right {
2448     float: right !important;
2449     margin: 6px 0 6px 12px; }
2450   .page-content .align-center {
2451     text-align: center; }
2452   .page-content img.align-center {
2453     display: block; }
2454   .page-content img.align-center, .page-content table.align-center {
2455     margin-left: auto;
2456     margin-right: auto; }
2457   .page-content img {
2458     max-width: 100%;
2459     height: auto; }
2460   .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .page-content pre {
2461     clear: left; }
2462   .page-content hr {
2463     clear: both;
2464     margin: 16px 0; }
2465   .page-content table {
2466     -webkit-hyphens: auto;
2467         -ms-hyphens: auto;
2468             hyphens: auto;
2469     table-layout: fixed;
2470     max-width: 100%;
2471     height: auto !important; }
2472   .page-content ins,
2473   .page-content del {
2474     text-decoration: none; }
2475   .page-content ins {
2476     background: #dbffdb; }
2477   .page-content del {
2478     background: #FFECEC; }
2479   .page-content.page-revision pre code {
2480     white-space: pre-wrap; }
2481
2482 .pointer-container {
2483   position: relative;
2484   display: none;
2485   left: 0;
2486   z-index: 10; }
2487
2488 .pointer {
2489   border: 1px solid #CCC;
2490   display: inline-block;
2491   padding: 12px 12px;
2492   border-radius: 4px;
2493   box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);
2494   position: absolute;
2495   top: -60px;
2496   background-color: #FFF;
2497   width: 275px;
2498   z-index: 55; }
2499   .pointer.is-page-editable {
2500     width: 328px; }
2501   .pointer:before {
2502     position: absolute;
2503     left: 50%;
2504     bottom: -9px;
2505     width: 16px;
2506     height: 16px;
2507     margin-left: -8px;
2508     content: '';
2509     display: block;
2510     background-color: #FFF;
2511     -webkit-transform: rotate(45deg);
2512             transform: rotate(45deg);
2513     -webkit-transform-origin: 50% 50%;
2514             transform-origin: 50% 50%;
2515     border-bottom: 1px solid #CCC;
2516     border-right: 1px solid #CCC;
2517     z-index: 56; }
2518   .pointer input {
2519     background-color: #FFF;
2520     border: 1px solid #DDD;
2521     color: #666;
2522     width: 172px;
2523     z-index: 40; }
2524   .pointer input, .pointer button, .pointer a {
2525     position: relative;
2526     border-radius: 0;
2527     height: 28px;
2528     font-size: 12px;
2529     vertical-align: top;
2530     padding: 5px 16px; }
2531   .pointer > i {
2532     color: #888;
2533     font-size: 18px;
2534     padding-top: 4px; }
2535   .pointer span.icon {
2536     cursor: pointer;
2537     -webkit-user-select: none;
2538        -moz-user-select: none;
2539         -ms-user-select: none;
2540             user-select: none; }
2541   .pointer .input-group .button {
2542     line-height: 1;
2543     margin: 0 0 0 -4px;
2544     box-shadow: none; }
2545   .pointer a.button {
2546     margin: 0 0 0 0; }
2547     .pointer a.button:hover {
2548       fill: #fff; }
2549   .pointer .svg-icon {
2550     width: 1.2em;
2551     height: 1.2em; }
2552
2553 .floating-toolbox {
2554   background-color: #FFF;
2555   border: 1px solid #DDD;
2556   right: 64px;
2557   width: 48px;
2558   overflow: hidden;
2559   align-items: stretch;
2560   flex-direction: row;
2561   display: flex;
2562   transition: width ease-in-out 180ms;
2563   margin-top: -1px;
2564   min-height: 0; }
2565   .floating-toolbox.open {
2566     width: 480px; }
2567   .floating-toolbox [toolbox-toggle] svg {
2568     transition: -webkit-transform ease-in-out 180ms;
2569     transition: transform ease-in-out 180ms;
2570     transition: transform ease-in-out 180ms, -webkit-transform ease-in-out 180ms; }
2571   .floating-toolbox [toolbox-toggle] {
2572     transition: background-color ease-in-out 180ms; }
2573   .floating-toolbox.open [toolbox-toggle] {
2574     background-color: rgba(255, 0, 0, 0.29); }
2575   .floating-toolbox.open [toolbox-toggle] svg {
2576     -webkit-transform: rotate(180deg);
2577             transform: rotate(180deg); }
2578   .floating-toolbox > div {
2579     flex: 1;
2580     position: relative; }
2581   .floating-toolbox .tabs {
2582     display: block;
2583     border-right: 1px solid #DDD;
2584     width: 48px;
2585     flex: 0 1 auto; }
2586   .floating-toolbox .tabs svg {
2587     fill: rgba(0, 0, 0, 0.5);
2588     padding: 0;
2589     margin: 0; }
2590   .floating-toolbox .tabs > span {
2591     display: block;
2592     cursor: pointer;
2593     padding: 12px 16px;
2594     font-size: 13.5px;
2595     line-height: 1.6;
2596     border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
2597   .floating-toolbox.open .tabs > span.active {
2598     fill: #444;
2599     background-color: rgba(0, 0, 0, 0.1); }
2600   .floating-toolbox div[toolbox-tab-content] {
2601     padding-bottom: 45px;
2602     display: flex;
2603     flex: 1;
2604     flex-direction: column;
2605     min-height: 0px;
2606     overflow-y: scroll; }
2607   .floating-toolbox h4 {
2608     font-size: 24px;
2609     margin: 16px 0 0 0;
2610     padding: 0 24px 12px 24px; }
2611   .floating-toolbox .tags input {
2612     max-width: 100%;
2613     width: 100%;
2614     min-width: 50px; }
2615   .floating-toolbox .tags td, .floating-toolbox .tag-table > div > div > div {
2616     padding-right: 12px;
2617     padding-top: 12px;
2618     position: relative; }
2619   .floating-toolbox .handle {
2620     -webkit-user-select: none;
2621        -moz-user-select: none;
2622         -ms-user-select: none;
2623             user-select: none;
2624     cursor: move;
2625     fill: #999; }
2626   .floating-toolbox form {
2627     display: flex;
2628     flex: 1;
2629     flex-direction: column;
2630     overflow-y: scroll; }
2631   .floating-toolbox table td, .floating-toolbox table th {
2632     overflow: visible; }
2633
2634 [toolbox-tab-content] {
2635   display: none; }
2636
2637 .tag-display {
2638   position: relative; }
2639   .tag-display table {
2640     width: 100%;
2641     margin: 0;
2642     padding: 0; }
2643   .tag-display tr:first-child td {
2644     padding-top: 0; }
2645   .tag-display .heading th {
2646     padding: 6px 12px;
2647     color: rgba(100, 100, 100, 0.7);
2648     border: 0;
2649     font-weight: 400; }
2650   .tag-display td {
2651     border: 0;
2652     border-bottom: 1px solid #EEE;
2653     padding: 6px 12px;
2654     color: #444; }
2655   .tag-display tr td:first-child {
2656     padding-left: 0; }
2657   .tag-display .tag-value {
2658     color: #888; }
2659   .tag-display tr:last-child td {
2660     border-bottom: none; }
2661   .tag-display .tag {
2662     padding: 12px; }
2663
2664 .suggestion-box {
2665   position: absolute;
2666   background-color: #FFF;
2667   border: 1px solid #BBB;
2668   box-shadow: 0 0 4px 1px #CCC;
2669   list-style: none;
2670   z-index: 100;
2671   padding: 0;
2672   margin: 0;
2673   border-radius: 3px; }
2674   .suggestion-box li {
2675     display: block;
2676     padding: 6px 12px;
2677     border-bottom: 1px solid #DDD; }
2678     .suggestion-box li:last-child {
2679       border-bottom: 0; }
2680     .suggestion-box li.active {
2681       background-color: #EEE; }
2682
2683 .comments-container h5 {
2684   color: #888;
2685   font-weight: normal;
2686   margin-top: 0.5em; }
2687
2688 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
2689   min-height: 175px; }
2690
2691 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
2692 .mce-floatpanel[aria-label="Insert/edit media"] .mce-open {
2693   display: none; }
2694
2695 .entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {
2696   font-size: 0.8rem;
2697   width: 1.88em;
2698   height: 1.88em;
2699   display: flex;
2700   align-items: center;
2701   justify-content: center;
2702   text-align: center;
2703   border-radius: 1em;
2704   position: relative;
2705   overflow: hidden; }
2706   .entity-list-item > span:first-child svg, .icon-list-item > span:first-child svg, .chapter-expansion > .icon svg {
2707     margin: 0;
2708     bottom: 0; }
2709   .entity-list-item > span:first-child:after, .icon-list-item > span:first-child:after, .chapter-expansion > .icon:after {
2710     content: '';
2711     position: absolute;
2712     background-color: currentColor;
2713     opacity: 0.2;
2714     left: 0;
2715     top: 0;
2716     width: 100%;
2717     height: 100%; }
2718
2719 .entity-chip {
2720   display: inline-block;
2721   align-items: center;
2722   justify-content: center;
2723   text-align: center;
2724   font-size: 0.9em;
2725   border-radius: 3px;
2726   position: relative;
2727   overflow: hidden;
2728   padding: 6px 12px;
2729   fill: currentColor;
2730   opacity: 0.85;
2731   transition: opacity ease-in-out 120ms; }
2732   .entity-chip:after {
2733     content: '';
2734     position: absolute;
2735     background-color: currentColor;
2736     opacity: 0.15;
2737     left: 0;
2738     top: 0;
2739     width: 100%;
2740     height: 100%; }
2741   .entity-chip:hover {
2742     text-decoration: none;
2743     opacity: 1; }
2744
2745 body {
2746   font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
2747   background-color: #FFF;
2748   margin: 0;
2749   padding: 0; }
2750
2751 table {
2752   border-spacing: 0;
2753   border-collapse: collapse; }
2754
2755 .page-content {
2756   overflow: hidden; }
2757
2758 pre {
2759   padding-left: 12px; }
2760
2761 pre:after {
2762   display: none; }
2763
2764 pre code {
2765   white-space: pre-wrap; }
2766