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

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