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

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