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

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