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