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