themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css

   1 /*!
   2  * LuCI Bootstrap Theme
   3  * Copyright 2012 Nut & Bolt
   4  * By David Menting <david@nut-bolt.nl>
   5  * Based on Bootstrap v1.4.0
   6  *
   7  * Copyright 2011 Twitter, Inc
   8  * Licensed under the Apache License v2.0
   9  * http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  12  */
  13 /* Reset.less
  14  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here       that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
  15  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  16
  17 * {
  18         margin: 0;
  19         padding: 0;
  20         border: 0;
  21         box-sizing: border-box;
  22 }
  23
  24 abbr[title], acronym[title] {
  25         border-bottom: 1px dotted;
  26         font-weight: inherit;
  27         cursor: help;
  28 }
  29
  30 table {
  31         border-collapse: collapse;
  32         border-spacing: 0;
  33 }
  34
  35 ol, ul {
  36         list-style: none;
  37 }
  38
  39 html {
  40         font-size: 100%;
  41         -webkit-text-size-adjust: 100%;
  42         -ms-text-size-adjust: 100%;
  43 }
  44
  45 a:focus {
  46         outline: thin dotted;
  47 }
  48
  49 a:hover, a:active {
  50         outline: 0;
  51 }
  52
  53 footer,
  54 header,
  55 nav,
  56 section {
  57         display: block;
  58 }
  59
  60 sub, sup {
  61         font-size: 75%;
  62         line-height: 0;
  63         position: relative;
  64         vertical-align: baseline;
  65 }
  66
  67 sup {
  68         top: -0.5em;
  69 }
  70
  71 sub {
  72         bottom: -0.25em;
  73 }
  74
  75 img {
  76         -ms-interpolation-mode: bicubic;
  77 }
  78
  79 button,
  80 input,
  81 select,
  82 option,
  83 textarea {
  84         font-size: 100%;
  85         margin: 0;
  86         box-sizing: border-box;
  87         vertical-align: baseline;
  88         line-height: normal;
  89 }
  90
  91 button::-moz-focus-inner, input::-moz-focus-inner {
  92         border: 0;
  93         padding: 0;
  94 }
  95
  96 button,
  97 input[type="button"],
  98 input[type="reset"],
  99 input[type="submit"] {
 100         cursor: pointer;
 101         -webkit-appearance: button;
 102         word-break: break-all;
 103 }
 104
 105 button[disabled],
 106 input[type="button"][disabled],
 107 input[type="reset"][disabled],
 108 input[type="submit"][disabled] {
 109         opacity: 0.7;
 110 }
 111
 112 input[type="search"] {
 113         -webkit-appearance: textfield;
 114         box-sizing: content-box;
 115 }
 116
 117 input[type="search"]::-webkit-search-decoration {
 118         -webkit-appearance: none;
 119 }
 120
 121 textarea {
 122         overflow: auto;
 123         vertical-align: top;
 124 }
 125
 126 /*
 127  * Scaffolding
 128  * Basic and global styles for generating a grid system, structural layout, and page templates
 129  * ------------------------------------------------------------------------------------------- */
 130 body {
 131         background-color: #fff;
 132         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 133         font-size: 13px;
 134         font-weight: normal;
 135         line-height: 18px;
 136         color: #404040;
 137         padding: 58px 5px 5px 5px;
 138 }
 139
 140 .container {
 141         width: 100%;
 142         max-width: 940px;
 143         margin-left: auto;
 144         margin-right: auto;
 145         zoom: 1;
 146 }
 147
 148 .container:before, .container:after {
 149         display: table;
 150         content: "";
 151         zoom: 1;
 152 }
 153
 154 .container:after {
 155         clear: both;
 156 }
 157
 158 a {
 159         color: #0069d6;
 160         text-decoration: none;
 161         line-height: inherit;
 162         font-weight: inherit;
 163 }
 164
 165 a:hover {
 166         color: #00438a;
 167         text-decoration: underline;
 168 }
 169
 170 .pull-right {
 171         float: right;
 172 }
 173
 174 .pull-left {
 175         float: left;
 176 }
 177
 178 .nowrap {
 179         white-space: nowrap;
 180 }
 181
 182 /* Typography.less
 183  * Headings, body text, lists, code, and more for a versatile and durable typography system
 184  * ---------------------------------------------------------------------------------------- */
 185 p,
 186 .cbi-map-descr,
 187 .cbi-section-descr,
 188 .table .tr.cbi-section-table-descr .th {
 189         font-size: 13px;
 190         font-weight: normal;
 191         line-height: 18px;
 192         margin-bottom: 9px;
 193 }
 194
 195 p small {
 196         font-size: 11px;
 197         color: #bfbfbf;
 198 }
 199
 200 h1,
 201 h2,
 202 h3, legend,
 203 h4,
 204 h5,
 205 h6 {
 206         font-weight: bold;
 207         color: #404040;
 208 }
 209
 210 h1 small,
 211 h2 small,
 212 h3 small,
 213 h4 small,
 214 h5 small,
 215 h6 small {
 216         color: #bfbfbf;
 217 }
 218
 219 h1 {
 220         margin-bottom: 18px;
 221         font-size: 30px;
 222         line-height: 36px;
 223 }
 224
 225 h1 small {
 226         font-size: 18px;
 227 }
 228
 229 h2 {
 230         font-size: 24px;
 231         line-height: 36px;
 232 }
 233
 234 h2 small {
 235         font-size: 14px;
 236 }
 237
 238 h3, legend,
 239 h4,
 240 h5,
 241 h6 {
 242         line-height: 36px;
 243 }
 244
 245 h3, legend {
 246         font-size: 18px;
 247 }
 248
 249 h3 small {
 250         font-size: 14px;
 251 }
 252
 253 h4 {
 254         font-size: 16px;
 255 }
 256
 257 h4 small {
 258         font-size: 12px;
 259 }
 260
 261 h5 {
 262         font-size: 14px;
 263 }
 264
 265 h6 {
 266         font-size: 13px;
 267         color: #bfbfbf;
 268         text-transform: uppercase;
 269 }
 270
 271 ul, ol {
 272         margin: 0 0 18px 25px;
 273 }
 274
 275 ul ul,
 276 ul ol,
 277 ol ol,
 278 ol ul {
 279         margin-bottom: 0;
 280 }
 281
 282 ul {
 283         list-style: disc;
 284 }
 285
 286 ol {
 287         list-style: decimal;
 288 }
 289
 290 li {
 291         line-height: 18px;
 292         color: #808080;
 293 }
 294
 295 ul.unstyled {
 296         list-style: none;
 297         margin-left: 0;
 298 }
 299
 300 dl {
 301         margin-bottom: 18px;
 302 }
 303
 304 dl dt, dl dd {
 305         line-height: 18px;
 306 }
 307
 308 dl dt {
 309         font-weight: bold;
 310 }
 311
 312 dl dd {
 313         margin-left: 9px;
 314 }
 315
 316 hr {
 317         margin: 20px 0 19px;
 318         border: 0;
 319         border-bottom: 1px solid #eee;
 320 }
 321
 322 strong {
 323         font-style: inherit;
 324         font-weight: bold;
 325 }
 326
 327 em {
 328         font-style: italic;
 329         font-weight: inherit;
 330         line-height: inherit;
 331 }
 332
 333 small { font-size: 0.9em }
 334
 335 address {
 336         display: block;
 337         line-height: 18px;
 338         margin-bottom: 18px;
 339 }
 340
 341 code, pre {
 342         padding: 0 3px 2px;
 343         font-family: Monaco, Andale Mono, Courier New, monospace;
 344         font-size: 12px;
 345         border-radius: 3px;
 346 }
 347
 348 code {
 349         background-color: #fee9cc;
 350         color: rgba(0, 0, 0, 0.75);
 351         padding: 1px 3px;
 352 }
 353
 354 pre {
 355         background-color: #f5f5f5;
 356         display: block;
 357         padding: 8.5px;
 358         margin: 0 0 18px;
 359         line-height: 18px;
 360         font-size: 12px;
 361         border: 1px solid #ccc;
 362         border: 1px solid rgba(0, 0, 0, 0.15);
 363         border-radius: 3px;
 364         white-space: pre;
 365         white-space: pre-wrap;
 366         word-wrap: break-word;
 367 }
 368
 369 /* Forms.less
 370  * Base styles for various input types, form layouts, and states
 371  * ------------------------------------------------------------- */
 372 form {
 373         margin-bottom: 18px;
 374 }
 375
 376 fieldset {
 377         margin-bottom: 9px;
 378         padding-top: 9px;
 379 }
 380
 381 fieldset legend {
 382         display: block;
 383         font-size: 19.5px;
 384         line-height: 1;
 385         color: #404040;
 386         padding-top: 20px;
 387
 388 }
 389 form .cbi-tab-descr {
 390         line-height: 18px;
 391         margin-bottom: 18px;
 392 }
 393
 394 form .clearfix,
 395 .cbi-value {
 396         margin-bottom: 18px;
 397         zoom: 1;
 398 }
 399
 400 form .clearfix:before, form .clearfix:after,
 401 .cbi-value:before, .cbi-value:after  {
 402         display: table;
 403         content: "";
 404         zoom: 1;
 405 }
 406
 407 form .clearfix:after,
 408 .cbi-value:after {
 409         clear: both;
 410 }
 411
 412 label,
 413 input,
 414 button,
 415 select,
 416 textarea {
 417         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 418         font-size: 13px;
 419         font-weight: normal;
 420         line-height: normal;
 421 }
 422
 423 form .input,
 424 .cbi-value-field {
 425         margin-left: 200px;
 426 }
 427
 428 .cbi-value label.cbi-value-title {
 429         padding-top: 6px;
 430         font-size: 13px;
 431         line-height: 18px;
 432         float: left;
 433         width: 180px;
 434         text-align: right;
 435         color: #404040;
 436 }
 437
 438 input[type=checkbox], input[type=radio] {
 439         cursor: pointer;
 440 }
 441
 442 label > input[type="checkbox"],
 443 label > input[type="radio"] {
 444         vertical-align: bottom;
 445         margin: 0;
 446 }
 447
 448 input,
 449 textarea,
 450 select,
 451 .cbi-dropdown:not(.btn):not(.cbi-button),
 452 .uneditable-input {
 453         display: inline-block;
 454         width: 210px;
 455         height: 30px;
 456         padding: 4px;
 457         font-size: 13px;
 458         line-height: 18px;
 459         border: 1px solid #ccc;
 460         border-radius: 3px;
 461 }
 462
 463 .uneditable-input {
 464         color: #808080;
 465 }
 466
 467 .cbi-dropdown:not(.btn):not(.cbi-button),
 468 .cbi-dynlist {
 469         min-width: 210px;
 470         max-width: 400px;
 471         width: auto;
 472 }
 473
 474 .cbi-dynlist {
 475         height: auto;
 476         min-height: 30px;
 477         display: inline-flex;
 478         flex-direction: column;
 479 }
 480
 481 .cbi-dynlist > .item {
 482         margin-bottom: 4px;
 483         box-shadow: 0 0 2px #ccc;
 484         background: #fff;
 485         padding: 2px 2em 2px 4px;
 486         border: 1px solid #ccc;
 487         border-radius: 3px;
 488         position: relative;
 489         pointer-events: none;
 490 }
 491
 492 .cbi-dynlist > .item::after {
 493         content: "×";
 494         position: absolute;
 495         display: inline-flex;
 496         align-items: center;
 497         top: -1px;
 498         right: -1px;
 499         bottom: -1px;
 500         padding: 0 6px;
 501         border: 1px solid #ccc;
 502         border-radius: 0 3px 3px 0;
 503         font-weight: bold;
 504         color: #c44;
 505         pointer-events: auto;
 506 }
 507
 508 .cbi-dynlist > .add-item {
 509         display: flex;
 510 }
 511
 512 .cbi-dynlist > .add-item > input,
 513 .cbi-dynlist > .add-item > button {
 514         flex: 1 1 auto;
 515         overflow: hidden;
 516         text-overflow: ellipsis;
 517         white-space: nowrap;
 518 }
 519
 520 select {
 521         padding: initial;
 522         background: #fff;
 523         box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
 524 }
 525
 526 input[type=checkbox], input[type=radio] {
 527         width: auto;
 528         height: auto;
 529         padding: 0;
 530         margin: 3px 0;
 531         *margin-top: 0;
 532         /* IE6-7 */
 533
 534         line-height: normal;
 535         border: none;
 536 }
 537
 538 input[type=file] {
 539         background-color: #fff;
 540         padding: initial;
 541         border: initial;
 542         line-height: initial;
 543         box-shadow: none;
 544         width: auto !important;
 545 }
 546
 547 input[type=button], input[type=reset], input[type=submit] {
 548         width: auto;
 549         height: auto;
 550 }
 551
 552 select[multiple] {
 553         height: inherit;
 554         background-color: #fff;
 555 }
 556
 557 textarea {
 558         height: auto !important;
 559 }
 560
 561 .td > input[type=text],
 562 .td > input[type=password],
 563 .td > select,
 564 .td > .cbi-dropdown:not(.btn):not(.cbi-button),
 565 .cbi-dynlist > .add-item > .cbi-dropdown {
 566         width: 100%;
 567 }
 568
 569 .uneditable-input {
 570         background-color: #fff;
 571         display: block;
 572         border-color: #eee;
 573         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
 574         cursor: not-allowed;
 575 }
 576
 577 ::-moz-placeholder {
 578         color: #bfbfbf;
 579 }
 580
 581 ::-webkit-input-placeholder {
 582         color: #bfbfbf;
 583 }
 584
 585 .item::after, .btn, .cbi-button, input, button, textarea {
 586         transition: border linear 0.2s, box-shadow linear 0.2s;
 587         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 588 }
 589
 590 .item:hover::after,
 591 .btn:hover, .cbi-button:hover, button:hover,
 592 input:focus, textarea:focus {
 593         outline: 0;
 594         border-color: rgba(82, 168, 236, 0.8) !important;
 595         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
 596         text-decoration: none;
 597 }
 598
 599 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
 600         box-shadow: none;
 601         outline: 1px dotted #666;
 602 }
 603
 604 input[disabled],
 605 button[disabled],
 606 select[disabled],
 607 textarea[disabled],
 608 input[readonly],
 609 button[readonly],
 610 select[readonly],
 611 textarea[readonly] {
 612         background-color: #f5f5f5;
 613         border-color: #ddd;
 614         pointer-events: none;
 615         cursor: default;
 616 }
 617
 618 select[readonly],
 619 textarea[readonly] {
 620         pointer-events: auto;
 621         cursor: auto;
 622 }
 623
 624 .cbi-optionals,
 625 .cbi-section-create {
 626         padding: 0 0 10px 10px;
 627 }
 628
 629 .cbi-section-create {
 630         margin: -3px;
 631         display: inline-flex;
 632         align-items: center;
 633 }
 634
 635 .cbi-section-create > * {
 636         margin: 3px;
 637         flex: 1 1 auto;
 638 }
 639
 640 .cbi-section-create > * > input {
 641         width: 100%;
 642 }
 643
 644 .actions,
 645 .cbi-page-actions {
 646         background: #f5f5f5;
 647         margin-bottom: 18px;
 648         padding: 17px 20px 18px 17px;
 649         border-top: 1px solid #ddd;
 650         border-radius: 0 0 3px 3px;
 651         text-align: right;
 652 }
 653
 654 .actions .secondary-action,
 655 .cbi-page-actions .secondary-action{
 656         float: right;
 657 }
 658
 659 .actions .secondary-action a,
 660 .cbi-page-actions .secondary-action a {
 661         line-height: 30px;
 662 }
 663
 664 .actions .secondary-action a:hover,
 665 .cbi-page-actions .secondary-action a:hover {
 666         text-decoration: underline;
 667 }
 668
 669 .cbi-page-actions > form {
 670         display: inline;
 671         margin: 0;
 672 }
 673
 674 .help-inline, .help-block {
 675         font-size: 13px;
 676         line-height: 18px;
 677         color: #bfbfbf;
 678 }
 679
 680 .help-inline {
 681         padding-left: 5px;
 682         *position: relative;
 683         /* IE6-7 */
 684
 685         *top: -5px;
 686         /* IE6-7 */
 687
 688 }
 689
 690 .help-block {
 691         display: block;
 692         max-width: 600px;
 693 }
 694
 695 /*
 696  * Tables.less
 697  * Tables for, you guessed it, tabular data
 698  * ---------------------------------------- */
 699 .tr { display: table-row; }
 700 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
 701 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
 702
 703 .table {
 704         display: table;
 705         width: 100%;
 706         margin-bottom: 18px;
 707         padding: 0;
 708         font-size: 13px;
 709         border-collapse: collapse;
 710         position: relative;
 711 }
 712
 713 .table .th, .table .td {
 714         display: table-cell;
 715         vertical-align: middle; /* Fixme */
 716         padding: 10px 10px 9px;
 717         line-height: 18px;
 718         text-align: left;
 719 }
 720
 721 .table .tr:first-child .th {
 722         padding-top: 9px;
 723         font-weight: bold;
 724         vertical-align: top;
 725 }
 726
 727 .table .td, .table .th {
 728         border-top: 1px solid #ddd;
 729 }
 730
 731 .tr.placeholder {
 732         height: calc(3em + 20px);
 733 }
 734
 735 .tr.placeholder > .td {
 736         position: absolute;
 737         left: 0;
 738         right: 0;
 739         bottom: 0;
 740         text-align: center;
 741         line-height: 3em;
 742 }
 743
 744 .tr.drag-over-above,
 745 .tr.drag-over-below {
 746         border: 2px solid #0069d6;
 747         border-width: 2px 0 0 0;
 748 }
 749
 750 .tr.drag-over-below {
 751         border-width: 0 0 2px 0;
 752 }
 753
 754 /* Patterns.less
 755  * Repeatable UI elements outside the base styles provided from the scaffolding
 756  * ---------------------------------------------------------------------------- */
 757 header {
 758         height: 40px;
 759         position: fixed;
 760         top: 0;
 761         left: 0;
 762         right: 0;
 763         z-index: 800;
 764         overflow: visible;
 765         color: #BFBFBF;
 766 }
 767
 768 header a {
 769         color: #bfbfbf;
 770         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 771 }
 772
 773 header h3 a:hover, header .brand:hover, header ul .active > a {
 774         background-color: #333;
 775         background-color: rgba(255, 255, 255, 0.05);
 776         color: #fff;
 777         text-decoration: none;
 778 }
 779
 780 header h3 {
 781         position: relative;
 782 }
 783
 784 header h3 a, header .brand {
 785         float: left;
 786         display: block;
 787         padding: 8px 20px 12px;
 788         margin-left: -20px;
 789         color: #fff;
 790         font-size: 20px;
 791         font-weight: 200;
 792         line-height: 1;
 793 }
 794
 795 header p {
 796         margin: 0;
 797         line-height: 40px;
 798 }
 799
 800 header .fill {
 801         background-color: #222;
 802         background-repeat: repeat-x;
 803         background-image: linear-gradient(to bottom, #333333, #222222);
 804         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 805         padding: 0 5px;
 806 }
 807
 808 header div > ul, .nav {
 809         display: block;
 810         float: left;
 811         margin: 0 10px 0 0;
 812         position: relative;
 813         left: 0;
 814 }
 815
 816 header div > ul > li, .nav > li {
 817         display: block;
 818         float: left;
 819 }
 820
 821 header div > ul a, .nav a {
 822         display: block;
 823         float: none;
 824         padding: 10px 10px 11px;
 825         line-height: 19px;
 826         text-decoration: none;
 827 }
 828
 829 header div > ul a:hover, .nav a:hover {
 830         color: #fff;
 831         text-decoration: none;
 832 }
 833
 834 header div > ul .active > a, .nav .active > a {
 835         background-color: #222;
 836         background-color: rgba(0, 0, 0, 0.5);
 837 }
 838
 839 header div > ul.secondary-nav, .nav.secondary-nav {
 840         float: right;
 841         margin-left: 10px;
 842         margin-right: 0;
 843 }
 844
 845 header div > ul.secondary-nav .menu-dropdown,
 846 .nav.secondary-nav .menu-dropdown,
 847 header div > ul.secondary-nav .dropdown-menu,
 848 .nav.secondary-nav .dropdown-menu {
 849         right: 0;
 850         border: 0;
 851 }
 852
 853 header div > ul a.menu:hover,
 854 .nav a.menu:hover,
 855 header div > ul li.open .menu,
 856 .nav li.open .menu,
 857 header div > ul .dropdown-toggle:hover,
 858 .nav .dropdown-toggle:hover,
 859 header div > ul .dropdown.open .dropdown-toggle,
 860 .nav .dropdown.open .dropdown-toggle {
 861         background: #444;
 862         background: rgba(255, 255, 255, 0.05);
 863 }
 864
 865 header div > ul .menu-dropdown,
 866 .nav .menu-dropdown,
 867 header div > ul .dropdown-menu,
 868 .nav .dropdown-menu {
 869         background-color: #333;
 870 }
 871
 872 header div > ul .menu-dropdown a.menu,
 873 .nav .menu-dropdown a.menu,
 874 header div > ul .dropdown-menu a.menu,
 875 .nav .dropdown-menu a.menu,
 876 header div > ul .menu-dropdown .dropdown-toggle,
 877 .nav .menu-dropdown .dropdown-toggle,
 878 header div > ul .dropdown-menu .dropdown-toggle,
 879 .nav .dropdown-menu .dropdown-toggle {
 880         color: #fff;
 881 }
 882
 883 header div > ul .menu-dropdown a.menu.open,
 884 .nav .menu-dropdown a.menu.open,
 885 header div > ul .dropdown-menu a.menu.open,
 886 .nav .dropdown-menu a.menu.open,
 887 header div > ul .menu-dropdown .dropdown-toggle.open,
 888 .nav .menu-dropdown .dropdown-toggle.open,
 889 header div > ul .dropdown-menu .dropdown-toggle.open,
 890 .nav .dropdown-menu .dropdown-toggle.open {
 891         background: #444;
 892         background: rgba(255, 255, 255, 0.05);
 893 }
 894
 895 header div > ul .menu-dropdown li a,
 896 .nav .menu-dropdown li a,
 897 header div > ul .dropdown-menu li a,
 898 .nav .dropdown-menu li a {
 899         color: #999;
 900         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
 901 }
 902
 903 header div > ul .menu-dropdown li a:hover,
 904 .nav .menu-dropdown li a:hover,
 905 header div > ul .dropdown-menu li a:hover,
 906 .nav .dropdown-menu li a:hover {
 907         background-color: #191919;
 908         background-repeat: repeat-x;
 909         background-image: linear-gradient(to bottom, #292929, #191919);
 910         color: #fff;
 911 }
 912
 913 header div > ul .menu-dropdown .active a,
 914 .nav .menu-dropdown .active a,
 915 header div > ul .dropdown-menu .active a,
 916 .nav .dropdown-menu .active a {
 917         color: #fff;
 918 }
 919
 920 header div > ul .menu-dropdown .divider,
 921 .nav .menu-dropdown .divider,
 922 header div > ul .dropdown-menu .divider,
 923 .nav .dropdown-menu .divider {
 924         background-color: #222;
 925         border-color: #444;
 926 }
 927
 928 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
 929         padding: 4px 15px;
 930 }
 931
 932 li.menu, .dropdown {
 933         position: relative;
 934 }
 935
 936 a.menu:after, .dropdown-toggle:after {
 937         width: 0;
 938         height: 0;
 939         display: inline-block;
 940         content: "&darr;";
 941         text-indent: -99999px;
 942         vertical-align: top;
 943         margin-top: 8px;
 944         margin-left: 4px;
 945         border-left: 4px solid transparent;
 946         border-right: 4px solid transparent;
 947         border-top: 4px solid #fff;
 948         opacity: 0.5;
 949 }
 950
 951 .menu-dropdown, .dropdown-menu {
 952         background-color: #fff;
 953         float: left;
 954         position: absolute;
 955         top: 40px;
 956         left: -9999px;
 957         z-index: 900;
 958         min-width: 160px;
 959         max-width: 220px;
 960         _width: 160px;
 961         margin-left: 0;
 962         margin-right: 0;
 963         padding: 6px 0;
 964         zoom: 1;
 965         border-color: #999;
 966         border-color: rgba(0, 0, 0, 0.2);
 967         border-style: solid;
 968         border-width: 0 1px 1px;
 969         border-radius: 0 0 6px 6px;
 970         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 971         background-clip: padding-box;
 972 }
 973
 974 .menu-dropdown li, .dropdown-menu li {
 975         float: none;
 976         display: block;
 977         background-color: transparent;
 978 }
 979
 980 .menu-dropdown .divider, .dropdown-menu .divider {
 981         height: 1px;
 982         margin: 5px 0;
 983         overflow: hidden;
 984         background-color: #eee;
 985         border-bottom: 1px solid #fff;
 986 }
 987
 988 header .dropdown-menu a, .dropdown-menu a {
 989         display: block;
 990         padding: 4px 15px;
 991         clear: both;
 992         font-weight: normal;
 993         line-height: 18px;
 994         color: #808080;
 995         text-shadow: 0 1px 0 #fff;
 996 }
 997
 998 header .dropdown-menu a:hover,
 999 .dropdown-menu a:hover,
1000 header .dropdown-menu a.hover,
1001 .dropdown-menu a.hover {
1002         background-color: #ddd;
1003         background-repeat: repeat-x;
1004         background-image: linear-gradient(to bottom, #eee, #ddd);
1005         color: #404040;
1006         text-decoration: none;
1007         box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1008 }
1009
1010 .open .menu,
1011 .dropdown.open .menu,
1012 .open .dropdown-toggle,
1013 .dropdown.open .dropdown-toggle {
1014         color: #fff;
1015         background: #ccc;
1016         background: rgba(0, 0, 0, 0.3);
1017 }
1018
1019 .open .menu-dropdown,
1020 .dropdown.open .menu-dropdown,
1021 .open .dropdown-menu,
1022 .dropdown.open .dropdown-menu {
1023         left: 0;
1024 }
1025
1026 .dropdown:hover ul.dropdown-menu {
1027         left: 0;
1028 }
1029
1030 .dropdown-menu .dropdown-menu {
1031           position: absolute;
1032           left: 159px;
1033 }
1034
1035 .dropdown-menu li {
1036           position: relative;
1037 }
1038
1039 .tabs, .cbi-tabmenu {
1040         margin: 0 -5px 18px;
1041         padding: 0 2px;
1042         list-style: none;
1043         display: flex;
1044         flex-wrap: wrap;
1045         background: linear-gradient(#fff 28px, #ddd 28px);
1046         background-size: 1px 29px;
1047         background-position: left bottom;
1048 }
1049
1050 .tabs > li, .cbi-tabmenu > li {
1051         flex: 0 1 auto;
1052         display: flex;
1053         align-items: center;
1054         height: 25px;
1055         max-width: 48%;
1056         margin: 4px 2px 0 2px;
1057         background: #fff;
1058         border: 1px solid #ddd;
1059         border-bottom: none;
1060         border-radius: 4px 4px 0 0;
1061         color: #0069d6;
1062 }
1063
1064 .tabs > li > a, .cbi-tabmenu > li > a {
1065         padding: 4px 6px;
1066         white-space: nowrap;
1067         overflow: hidden;
1068         text-overflow: ellipsis;
1069         color: inherit;
1070         text-decoration: none;
1071         border-radius: 4px 4px 0 0;
1072         line-height: 25px;
1073         outline: none;
1074 }
1075
1076 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1077         background: linear-gradient(#fff 90%, #ddd 100%);
1078 }
1079
1080 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1081         color: #999;
1082         background: linear-gradient(#eee 90%, #ddd 100%);
1083 }
1084
1085 .cbi-tab-disabled[data-errors]::after {
1086         content: attr(data-errors);
1087         background: #c43c35;
1088         color: #fff;
1089         min-width: 12px;
1090         line-height: 14px;
1091         border-radius: 7px;
1092         text-align: center;
1093         margin: 0 5px 0 0;
1094         padding: 1px 2px;
1095 }
1096
1097 .cbi-tabmenu.map {
1098         margin: 0;
1099 }
1100
1101 .cbi-tabmenu.map > li {
1102         font-size: 16.5px;
1103         font-weight: bold;
1104 }
1105
1106 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1107         display: none;
1108 }
1109
1110 .tabs .menu-dropdown, .tabs .dropdown-menu {
1111         top: 35px;
1112         border-width: 1px;
1113         border-radius: 0 6px 6px 6px;
1114 }
1115
1116 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1117         border-top-color: #999;
1118         margin-top: 15px;
1119         margin-left: 5px;
1120 }
1121
1122 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1123         border-color: #999;
1124 }
1125
1126 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1127         border-top-color: #555;
1128 }
1129
1130 .tab-content > .tab-pane,
1131 .tab-content > div {
1132         display: none;
1133 }
1134
1135 .tab-content > .active {
1136         display: block;
1137 }
1138
1139 .breadcrumb {
1140         padding: 7px 14px;
1141         margin: 0 0 18px;
1142         background-color: #f5f5f5;
1143         background-repeat: repeat-x;
1144         background-image: linear-gradient(to bottom, #fff, #f5f5f5);
1145         border: 1px solid #ddd;
1146         border-radius: 3px;
1147         box-shadow: inset 0 1px 0 #fff;
1148 }
1149
1150 .breadcrumb li {
1151         display: inline;
1152         text-shadow: 0 1px 0 #fff;
1153 }
1154
1155 .breadcrumb .divider {
1156         padding: 0 5px;
1157         color: #bfbfbf;
1158 }
1159
1160 .breadcrumb .active a {
1161         color: #404040;
1162 }
1163
1164 footer {
1165         margin-top: 17px;
1166         padding-top: 17px;
1167         border-top: 1px solid #eee;
1168 }
1169
1170 #modal_overlay {
1171         position: fixed;
1172         top: 0;
1173         bottom: 0;
1174         left: -10000px;
1175         right: 10000px;
1176         background: rgba(0, 0, 0, 0.7);
1177         z-index: 900;
1178         overflow-y: scroll;
1179         -webkit-overflow-scrolling: touch;
1180         transition: opacity .125s ease-in;
1181         opacity: 0;
1182         visibility: hidden;
1183 }
1184
1185 .modal {
1186         width: 90%;
1187         margin: 5em auto;
1188         display: flex;
1189         flex-wrap: wrap;
1190         min-height: 32px;
1191         max-width: 600px;
1192         align-items: center;
1193         border-radius: 3px;
1194         background: #fff;
1195         box-shadow: 0 0 3px #444;
1196         padding: 1em 1em .5em 1em;
1197         max-height: 2400px;
1198         min-width: 270px;
1199 }
1200
1201 .modal > * {
1202         flex-basis: 100%;
1203         line-height: normal;
1204         margin-bottom: .5em;
1205         max-width: 100%;
1206 }
1207
1208 .modal > pre,
1209 .modal > textarea {
1210         white-space: pre-wrap;
1211         overflow: auto;
1212 }
1213
1214 body.modal-overlay-active {
1215         overflow: hidden;
1216         height: 100vh;
1217 }
1218
1219 body.modal-overlay-active #modal_overlay {
1220         left: 0;
1221         right: 0;
1222         opacity: 1;
1223         visibility: visible;
1224 }
1225
1226 .btn.danger,
1227 .alert-message.danger,
1228 .btn.danger:hover,
1229 .alert-message.danger:hover,
1230 .btn.error,
1231 .alert-message.error,
1232 .btn.error:hover,
1233 .alert-message.error:hover,
1234 .btn.success,
1235 .alert-message.success,
1236 .btn.success:hover,
1237 .alert-message.success:hover,
1238 .btn.info,
1239 .alert-message.info,
1240 .btn.info:hover,
1241 .alert-message.info:hover,
1242 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1243         color: #fff;
1244 }
1245
1246 .btn .close, .alert-message .close {
1247         font-family: Arial, sans-serif;
1248         line-height: 18px;
1249 }
1250
1251 .btn.danger,
1252 .alert-message.danger,
1253 .btn.error,
1254 .alert-message.error,
1255 .cbi-tooltip.error {
1256         background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1257         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1258         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1259 }
1260
1261 .btn.success, .alert-message.success, .cbi-tooltip.success {
1262         background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1263         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1264         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1265 }
1266
1267 .btn.info, .alert-message.info, .cbi-tooltip.info {
1268         background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1269         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1270         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1271 }
1272
1273 .alert-message.notice, .cbi-tooltip.notice {
1274         background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1275         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1276         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1277 }
1278
1279 .item::after,
1280 .btn,
1281 .cbi-button {
1282         cursor: pointer;
1283         display: inline-block;
1284         background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1285         padding: 5px 14px 6px;
1286         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1287         color: #333;
1288         font-size: 13px;
1289         line-height: normal;
1290         border: 1px solid #ccc;
1291         border-bottom-color: #bbb;
1292         border-radius: 4px;
1293         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1294 }
1295
1296 .btn:focus,
1297 .cbi-button:focus {
1298         outline: 1px dotted #666;
1299 }
1300
1301 .cbi-input-invalid,
1302 .cbi-input-invalid.cbi-dropdown,
1303 .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
1304 .cbi-value-error input {
1305         color: #f00;
1306         border-color: #f00;
1307 }
1308
1309 .cbi-button-positive,
1310 .cbi-button-fieldadd,
1311 .cbi-button-add,
1312 .cbi-button-save {
1313         border-color: #4a4;
1314         color: #4a4;
1315 }
1316
1317 .cbi-button-neutral,
1318 .cbi-button-download,
1319 .cbi-button-find,
1320 .cbi-button-link,
1321 .cbi-button-up,
1322 .cbi-button-down {
1323         color: #444;
1324 }
1325
1326 .btn.primary,
1327 .cbi-button-action,
1328 .cbi-button-apply,
1329 .cbi-button-reload,
1330 .cbi-button-edit {
1331         border-color: #0069d6;
1332         color: #0069d6;
1333 }
1334
1335 .cbi-button-negative,
1336 .cbi-section-remove .cbi-button,
1337 .cbi-button-reset,
1338 .cbi-button-remove {
1339         border-color: #c44;
1340         color: #c44;
1341 }
1342
1343 .cbi-page-actions::after {
1344         display: table;
1345         content: "";
1346         clear: both;
1347 }
1348
1349 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1350         float: left;
1351         margin-right: .4em;
1352 }
1353
1354 .btn.primary,
1355 .cbi-button-action.important,
1356 .cbi-page-actions .cbi-button-apply,
1357 .cbi-section-actions .cbi-button-edit {
1358         color: #fff;
1359         background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1360         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1361 }
1362
1363 .cbi-button-positive.important,
1364 .cbi-page-actions .cbi-button-save {
1365         color: #fff;
1366         background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1367         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1368 }
1369
1370 .cbi-button-negative.important {
1371         color: #fff;
1372         background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1373         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1374 }
1375
1376 .cbi-page-actions .cbi-button-apply + .cbi-button-save,
1377 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1378         background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1379         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1380         color: #4a4;
1381 }
1382
1383 .cbi-dropdown {
1384         display: inline-flex !important;
1385         cursor: pointer;
1386         height: auto;
1387         position: relative;
1388         padding: 0 !important;
1389 }
1390
1391 .cbi-dropdown:not(.btn):not(.cbi-button) {
1392         background: linear-gradient(#fff 0%, #e9e8e6 100%);
1393         border: 1px solid #ccc;
1394         border-radius: 3px;
1395         color: #404040;
1396 }
1397
1398 .cbi-dynlist > .item:focus,
1399 .cbi-dropdown:focus {
1400         outline: 2px solid #4b6e9b;
1401 }
1402
1403 .cbi-dropdown > ul {
1404         margin: 0 !important;
1405         padding: 0;
1406         list-style: none;
1407         overflow-x: hidden;
1408         overflow-y: auto;
1409         display: flex;
1410         width: 100%;
1411 }
1412
1413 .cbi-dropdown.btn > ul:not(.dropdown),
1414 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1415         margin: 0 0 0 13px !important;
1416 }
1417
1418 .cbi-dropdown.btn.spinning > ul:not(.dropdown),
1419 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1420         margin: 0 !important;
1421 }
1422
1423 .cbi-dropdown > ul.preview {
1424         display: none;
1425 }
1426
1427 .cbi-dropdown > .open,
1428 .cbi-dropdown > .more {
1429         flex-grow: 0;
1430         flex-shrink: 0;
1431         display: flex;
1432         flex-direction: column;
1433         justify-content: center;
1434         text-align: center;
1435         line-height: 2em;
1436         padding: 0 .25em;
1437 }
1438
1439 .cbi-dropdown.btn > .open,
1440 .cbi-dropdown.cbi-button > .open {
1441         padding: 0 .5em;
1442         margin-left: .5em;
1443         border-left: 1px solid;
1444 }
1445
1446 .cbi-dropdown > .more,
1447 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1448         color: #777;
1449         font-weight: bold;
1450         text-shadow: 1px 1px 0px #fff;
1451         display: none;
1452         justify-content: center;
1453 }
1454
1455 .cbi-dropdown > ul > li {
1456         display: none;
1457         white-space: nowrap;
1458         overflow: hidden;
1459         text-overflow: ellipsis;
1460         flex-shrink: 1;
1461         flex-grow: 1;
1462         align-items: center;
1463         align-self: center;
1464         color: inherit;
1465 }
1466
1467 .cbi-dropdown > ul.dropdown > li,
1468 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1469         min-height: 20px;
1470         padding: .25em;
1471         color: #404040;
1472 }
1473
1474 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1475 .cbi-dropdown > ul > li .hide-close { display: none; }
1476
1477 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1478         border-left: 1px solid #ccc;
1479 }
1480
1481 .cbi-dropdown[empty] > ul {
1482         max-width: 1px;
1483 }
1484
1485 .cbi-dropdown > ul > li > form {
1486         display: none;
1487         margin: 0;
1488         padding: 0;
1489         pointer-events: none;
1490 }
1491
1492 .cbi-dropdown > ul > li img {
1493         vertical-align: middle;
1494         margin-right: .25em;
1495 }
1496
1497 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1498         margin: 0;
1499 }
1500
1501 .cbi-dropdown > ul > li input[type="text"] {
1502         height: 20px;
1503 }
1504
1505 .cbi-dropdown[open] {
1506         position: relative;
1507 }
1508
1509 .cbi-dropdown[open] > ul.dropdown {
1510         display: block;
1511         background: #f6f6f5;
1512         border: 1px solid #918e8c;
1513         box-shadow: 0 0 4px #918e8c;
1514         position: absolute;
1515         z-index: 1100;
1516         max-width: none;
1517         min-width: 100%;
1518         width: auto;
1519         transition: max-height .125s ease-in;
1520 }
1521
1522 .cbi-dropdown > ul > li[display],
1523 .cbi-dropdown[open] > ul.preview,
1524 .cbi-dropdown[open] > ul.dropdown > li,
1525 .cbi-dropdown[multiple] > ul > li > label,
1526 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1527 .cbi-dropdown[multiple][more] > .more,
1528 .cbi-dropdown[multiple][empty] > .more {
1529         flex-grow: 1;
1530         display: flex !important;
1531 }
1532
1533 .cbi-dropdown[empty] > ul > li,
1534 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1535 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1536         display: block !important;
1537 }
1538
1539 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1540 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1541
1542 .cbi-dropdown[open] > ul.dropdown > li {
1543         border-bottom: 1px solid #ccc;
1544 }
1545
1546 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1547         background: #b0d0f0;
1548 }
1549
1550 .cbi-dropdown[open] > ul.dropdown > li.focus {
1551         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1552 }
1553
1554 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1555         margin-bottom: 0;
1556         border-bottom: none;
1557 }
1558
1559 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1560         opacity: 0.7;
1561 }
1562
1563 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1564         width: 100%;
1565 }
1566
1567 .cbi-dropdown[disabled] {
1568         pointer-events: none;
1569         opacity: .6;
1570 }
1571
1572 input[type="text"] + .cbi-button,
1573 input[type="password"] + .cbi-button,
1574 select + .cbi-button {
1575         border-radius: 0 3px 3px 0;
1576         border-color: #ccc;
1577         margin-left: -2px;
1578         padding: 0 6px;
1579         vertical-align: top;
1580         height: 30px;
1581         font-size: 14px;
1582         line-height: 28px;
1583 }
1584
1585 select + .cbi-button {
1586         border-left-color: transparent;
1587 }
1588
1589 .cbi-title-ref {
1590         color: #37c;
1591 }
1592
1593 .cbi-title-ref::after {
1594         content: "➙";
1595 }
1596
1597 .cbi-tooltip-container {
1598         cursor: help;
1599 }
1600
1601 .cbi-tooltip {
1602         position: absolute;
1603         z-index: 1000;
1604         left: -10000px;
1605         box-shadow: 0 0 2px #ccc;
1606         border-radius: 3px;
1607         background: #fff;
1608         white-space: pre;
1609         padding: 2px 5px;
1610         opacity: 0;
1611         transition: opacity .25s ease-in;
1612 }
1613
1614 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1615         left: auto;
1616         opacity: 1;
1617         transition: opacity .25s ease-in;
1618 }
1619
1620 .cbi-progressbar {
1621         border: 1px solid #ccc;
1622         border-radius: 3px;
1623         position: relative;
1624         min-width: 170px;
1625         height: 20px;
1626         margin: 4px 0;
1627         background: #f9f9f9;
1628 }
1629
1630 .cbi-progressbar > div {
1631         background: #90c0e0;
1632         height: 100%;
1633         transition: width .25s ease-in;
1634         width: 0%;
1635 }
1636
1637 .cbi-progressbar::after {
1638         position: absolute;
1639         bottom: 0;
1640         top: 0;
1641         right: 0;
1642         left: 0;
1643         text-align: center;
1644         text-shadow: 0 0 2px #fff;
1645         content: attr(title);
1646         white-space: pre;
1647         overflow: hidden;
1648         text-overflow: ellipsis;
1649 }
1650
1651 .zonebadge .cbi-tooltip {
1652         padding: 1px;
1653         background: inherit;
1654         margin: -1.6em 0 0 -5px;
1655         border-radius: 3px;
1656         pointer-events: none;
1657         box-shadow: 0 0 3px #444;
1658 }
1659
1660 .zonebadge .cbi-tooltip > * {
1661         margin: 1px;
1662 }
1663
1664 .zone-forwards {
1665         display: flex;
1666         flex-wrap: wrap;
1667 }
1668
1669 .zone-forwards > * {
1670         flex: 1 1 40%;
1671         padding: 1px;
1672 }
1673
1674 .zone-forwards > span {
1675         flex-basis: 10%;
1676         text-align: center;
1677 }
1678
1679 .zone-forwards .zone-src,
1680 .zone-forwards .zone-dest {
1681         display: flex;
1682         flex-direction: column;
1683 }
1684
1685 .btn.active, .btn:active {
1686         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1687 }
1688
1689 .btn.disabled {
1690         cursor: default;
1691         opacity: 0.65;
1692         box-shadow: none;
1693 }
1694
1695 .btn[disabled] {
1696         cursor: default;
1697         opacity: 0.65;
1698         box-shadow: none;
1699 }
1700
1701 .btn.large {
1702         font-size: 15px;
1703         line-height: normal;
1704         padding: 9px 14px 9px;
1705         border-radius: 6px;
1706 }
1707
1708 .btn.small {
1709         padding: 7px 9px 7px;
1710         font-size: 11px;
1711 }
1712
1713 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1714         padding: 0;
1715         border: 0;
1716 }
1717
1718 .close {
1719         float: right;
1720         color: #000;
1721         font-size: 20px;
1722         font-weight: bold;
1723         line-height: 13.5px;
1724         text-shadow: 0 1px 0 #fff;
1725         opacity: 0.25;
1726 }
1727
1728 .close:hover {
1729         color: #000;
1730         text-decoration: none;
1731         opacity: 0.4;
1732 }
1733
1734 .alert-message {
1735         position: relative;
1736         padding: .5em .5em .25em .5em;
1737         margin-bottom: .5em;
1738         color: #404040;
1739         background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1740         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1741         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1742         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1743         border-width: 1px;
1744         border-style: solid;
1745         border-radius: 4px;
1746         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1747 }
1748
1749 .alert-message .close {
1750         margin-top: 1px;
1751         *margin-top: 0;
1752 }
1753
1754 .alert-message h4,
1755 .alert-message h5,
1756 .alert-message pre,
1757 .alert-message ul,
1758 .alert-message li,
1759 .alert-message p {
1760         color: inherit;
1761         border: none;
1762         line-height: inherit;
1763         background: transparent;
1764         padding: 0;
1765         margin: .25em 0;
1766 }
1767
1768 .alert-message button {
1769         margin: .25em 0;
1770 }
1771
1772 .label {
1773         padding: 1px 3px 2px;
1774         font-size: 9.75px;
1775         font-weight: bold;
1776         color: #fff !important;
1777         text-transform: uppercase;
1778         white-space: nowrap;
1779         background-color: #bfbfbf;
1780         border-radius: 3px;
1781         text-shadow: none;
1782 }
1783
1784 a.label:link,
1785 a.label:visited {
1786         color: #fff;
1787 }
1788
1789 a.label:hover {
1790         text-decoration: none;
1791 }
1792
1793 .label.important {
1794         background-color: #c43c35;
1795 }
1796
1797 .label.warning {
1798         background-color: #f89406;
1799 }
1800
1801 .label.success {
1802         background-color: #46a546;
1803 }
1804
1805 .label.notice {
1806         background-color: #62cffc;
1807 }
1808
1809 /* LuCI specific items */
1810 .hidden { display: none }
1811
1812 #xhr_poll_status {
1813           cursor: pointer;
1814 }
1815
1816 form.inline { display: inline; margin-bottom: 0; }
1817
1818 header .pull-right { padding-top: 8px; }
1819
1820 #modemenu li:last-child span.divider { display: none }
1821
1822 #syslog {  width: 100%; }
1823
1824 .cbi-section-table .tr:hover .td,
1825 .cbi-section-table .tr:hover .th,
1826 .cbi-section-table .tr:hover::before {
1827         background-color: #f5f5f5;
1828 }
1829
1830 .cbi-section-table .tr.cbi-section-table-descr .th {
1831         font-weight: normal;
1832 }
1833
1834 .cbi-section-table-titles.named::before,
1835 .cbi-section-table-descr.named::before,
1836 .cbi-section-table-row[data-title]::before {
1837         content: attr(data-title) " ";
1838         display: table-cell;
1839         padding: 10px 10px 9px;
1840         line-height: 18px;
1841         font-weight: bold;
1842         vertical-align: middle;
1843 }
1844
1845 .cbi-section-table-titles.named::before,
1846 .cbi-section-table-descr.named::before,
1847 .cbi-section-table-row[data-title]::before {
1848         border-top: 1px solid #ddd;
1849 }
1850
1851 .left { text-align: left !important; }
1852 .right { text-align: right !important; }
1853 .center { text-align: center !important; }
1854 .top { vertical-align: top !important; }
1855 .middle { vertical-align: middle !important; }
1856 .bottom { vertical-align: bottom !important; }
1857
1858 .cbi-value-field { line-height: 1.5em; }
1859
1860 .cbi-value-field input[type=checkbox],
1861 .cbi-value-field input[type=radio] {
1862         margin-top: 8px;
1863         margin-right: 6px;
1864 }
1865
1866 table table td,
1867 .cbi-value-field table td {
1868         border: none;
1869 }
1870
1871 .table.cbi-section-table input[type="password"],
1872 .table.cbi-section-table input[type="text"],
1873 .table.cbi-section-table textarea,
1874 .table.cbi-section-table select {
1875         width: 100%;
1876 }
1877
1878 .table.cbi-section-table .td.cbi-section-table-cell {
1879         white-space: nowrap;
1880         text-align: right;
1881 }
1882
1883 .table.cbi-section-table .td.cbi-section-table-cell select {
1884         width: inherit;
1885 }
1886
1887 .td.cbi-section-actions {
1888         text-align: right;
1889         vertical-align: middle;
1890 }
1891
1892 .td.cbi-section-actions > * {
1893         display: flex;
1894 }
1895
1896 .td.cbi-section-actions > * > *,
1897 .td.cbi-section-actions > * > form > * {
1898         flex: 1 1 4em;
1899         margin: 0 1px;
1900 }
1901
1902 .td.cbi-section-actions > * > form {
1903         display: inline-flex;
1904         margin: 0;
1905 }
1906
1907 .table.valign-middle .td {
1908         vertical-align: middle;
1909 }
1910
1911 .cbi-rowstyle-2,
1912 .tr.table-titles,
1913 .tr.cbi-section-table-titles {
1914         background: #f9f9f9;
1915 }
1916
1917 .cbi-value-description {
1918         background-image: url(/luci-static/resources/cbi/help.gif);
1919         background-position: .25em .2em;
1920         background-repeat: no-repeat;
1921         margin: .25em 0 0 0;
1922         padding: 0 0 0 1.7em;
1923 }
1924
1925 .cbi-section-error {
1926         border: 1px solid #f00;
1927         border-radius: 3px;
1928         background-color: #fce6e6;
1929         padding: 5px;
1930         margin-bottom: 18px;
1931 }
1932
1933 .cbi-section-error ul { margin: 0 0 0 20px; }
1934
1935 .cbi-section-error ul li {
1936         color: #f00;
1937         font-weight: bold;
1938 }
1939
1940 .ifacebox {
1941         background-color: #fff;
1942         border: 1px solid #ccc;
1943         margin: 0 10px;
1944         text-align: center;
1945         white-space: nowrap;
1946         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1947         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1948         border-radius: 4px;
1949         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1950         display: inline-flex;
1951         flex-direction: column;
1952         line-height: 1.2em;
1953         min-width: 100px;
1954 }
1955
1956 .ifacebox .ifacebox-head {
1957         border-bottom: 1px solid #ccc;
1958         padding: 2px;
1959         background: #eee;
1960 }
1961
1962 .ifacebox .ifacebox-head.active {
1963         background: #90c0e0;
1964 }
1965
1966 .ifacebox .ifacebox-body {
1967         padding: .25em;
1968 }
1969
1970 .ifacebadge {
1971         display: inline-block;
1972         flex-direction: row;
1973         white-space: nowrap;
1974         background-color: #fff;
1975         border: 1px solid #ccc;
1976         padding: 2px;
1977         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1978         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1979         border-radius: 4px;
1980         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1981         cursor: default;
1982         line-height: 1.2em;
1983 }
1984
1985 .ifacebadge img {
1986         width: 16px;
1987         height: 16px;
1988         vertical-align: middle;
1989 }
1990
1991 .ifacebadge-active {
1992         border-color: #000;
1993         font-weight: bold;
1994 }
1995
1996 .network-status-table {
1997         display: flex;
1998         flex-wrap: wrap;
1999 }
2000
2001 .network-status-table .ifacebox {
2002         margin: .5em;
2003         flex-grow: 1;
2004 }
2005
2006 .network-status-table .ifacebox-body {
2007         display: flex;
2008         flex-direction: column;
2009         height: 100%;
2010         text-align: left;
2011 }
2012
2013 .network-status-table .ifacebox-body > * {
2014         margin: .25em;
2015 }
2016
2017 .network-status-table .ifacebox-body > span {
2018         flex: 10 10 auto;
2019         height: 100%;
2020 }
2021
2022 .network-status-table .ifacebox-body > div {
2023         margin: -.125em;
2024 }
2025
2026 #dsl_status_table .ifacebox-body span > strong {
2027         display: inline-block;
2028         min-width: 35%;
2029 }
2030
2031 .ifacebadge.large,
2032 .network-status-table .ifacebox-body .ifacebadge {
2033         display: flex;
2034         flex: 1;
2035         padding: .25em;
2036         min-width: 220px;
2037         margin: .125em;
2038 }
2039
2040 .ifacebadge.large {
2041         display: inline-flex;
2042 }
2043
2044 .network-status-table .ifacebox-body .ifacebadge > span {
2045         overflow: hidden;
2046         text-overflow: ellipsis;
2047 }
2048
2049 .ifacebadge > *,
2050 .ifacebadge.large > * {
2051         margin: 0 .125em;
2052 }
2053
2054 .zonebadge {
2055         padding: 2px;
2056         border-radius: 4px;
2057         display: inline-block;
2058         white-space: nowrap;
2059         color: #666;
2060         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2061 }
2062
2063 .zonebadge > em,
2064 .zonebadge > strong {
2065         margin: 0 2px;
2066         display: inline-block;
2067 }
2068
2069 .zonebadge input {
2070         width: 6em;
2071 }
2072
2073 .zonebadge > .ifacebadge {
2074         margin-left: 2px;
2075 }
2076
2077 .zonebadge-empty {
2078         border: 1px dashed #aaa;
2079         color: #aaa;
2080         font-style: italic;
2081         font-size: smaller;
2082 }
2083
2084 div.cbi-value var,
2085 .td.cbi-value-field var {
2086         font-style: italic;
2087         color: #0069d6;
2088 }
2089
2090 #modal_overlay > .modal.uci-dialog,
2091 #modal_overlay > .modal.cbi-modal {
2092         max-width: 900px;
2093 }
2094
2095 .uci-change-list {
2096         line-height: 170%;
2097         white-space: pre;
2098 }
2099
2100 .uci-change-list del,
2101 .uci-change-list ins,
2102 .uci-change-list var,
2103 .uci-change-legend-label del,
2104 .uci-change-legend-label ins,
2105 .uci-change-legend-label var {
2106         text-decoration: none;
2107         font-family: monospace;
2108         font-style: normal;
2109         border: 1px solid #ccc;
2110         background: #eee;
2111         padding: 2px;
2112         display: block;
2113         line-height: 15px;
2114         margin-bottom: 1px;
2115 }
2116
2117 .uci-change-list ins,
2118 .uci-change-legend-label ins {
2119         border-color: #0f0;
2120         background: #cfc;
2121 }
2122
2123 .uci-change-list del,
2124 .uci-change-legend-label del {
2125         border-color: #f00;
2126         background: #fcc;
2127 }
2128
2129 .uci-change-list var,
2130 .uci-change-legend-label var {
2131         border-color: #ccc;
2132         background: #eee;
2133 }
2134
2135 .uci-change-list var ins,
2136 .uci-change-list var del {
2137         display: inline-block;
2138         border: none;
2139         width: 100%;
2140         padding: 0;
2141 }
2142
2143 .uci-change-legend {
2144         padding: 5px;
2145 }
2146
2147 .uci-change-legend-label {
2148         width: 150px;
2149         float: left;
2150 }
2151
2152 .uci-change-legend-label > ins,
2153 .uci-change-legend-label > del,
2154 .uci-change-legend-label > var {
2155         float: left;
2156         margin-right: 4px;
2157         width: 16px;
2158         height: 16px;
2159         display: block;
2160         position: relative;
2161 }
2162
2163 .uci-change-legend-label var ins,
2164 .uci-change-legend-label var del {
2165         border: none;
2166         position: absolute;
2167         top: 2px;
2168         left: 2px;
2169         right: 2px;
2170         bottom: 2px;
2171 }
2172
2173 #modal_overlay {
2174         position: fixed;
2175         top: 0;
2176         bottom: 0;
2177         left: -10000px;
2178         right: 10000px;
2179         background: rgba(0, 0, 0, 0.7);
2180         z-index: 900;
2181         overflow-y: scroll;
2182         -webkit-overflow-scrolling: touch;
2183         transition: opacity .125s ease-in;
2184         opacity: 0;
2185 }
2186
2187 #modal_overlay > .modal {
2188         width: 90%;
2189         margin: 5em auto;
2190         display: flex;
2191         flex-wrap: wrap;
2192         min-height: 32px;
2193         max-width: 600px;
2194         align-items: center;
2195         border-radius: 3px;
2196         background: #fff;
2197         box-shadow: 0 0 3px #444;
2198         padding: 1em 1em .5em 1em;
2199         max-height: 2400px;
2200         min-width: 270px;
2201 }
2202
2203 #modal_overlay .modal > * {
2204         flex-basis: 100%;
2205         line-height: normal;
2206         margin-bottom: .5em;
2207 }
2208
2209 #modal_overlay .modal > pre,
2210 #modal_overlay .modal > textarea {
2211         white-space: pre-wrap;
2212         overflow: auto;
2213 }
2214
2215 body.modal-overlay-active {
2216         overflow: hidden;
2217         height: 100vh;
2218 }
2219
2220 body.modal-overlay-active #modal_overlay {
2221         left: 0;
2222         right: 0;
2223         opacity: 1;
2224 }
2225
2226 html body.apply-overlay-active {
2227         height: calc(100vh - 63px);
2228 }
2229
2230 #applyreboot-section {
2231         line-height: 300%;
2232 }
2233
2234 [data-page="admin-network-dhcp"] [data-name="ip"] {
2235         width: 15%;
2236 }
2237
2238 @keyframes flash {
2239         0% { opacity: 1; }
2240         50% { opacity: .5; }
2241         100% { opacity: 1; }
2242 }
2243
2244 .flash {
2245         animation: flash .35s;
2246 }
2247
2248 .spinning {
2249         position: relative;
2250         padding-left: 32px !important;
2251 }
2252
2253 .spinning::before {
2254         position: absolute;
2255         top: 0;
2256         left: 0;
2257         bottom: 0;
2258         width: 32px;
2259         content: " ";
2260         background: url(../resources/icons/loading.gif) no-repeat center;
2261         background-size: 16px;
2262 }
2263
2264 [data-tab-title] {
2265         height: 0;
2266         opacity: 0;
2267         overflow: hidden;
2268 }
2269
2270 [data-tab-active="true"] {
2271         opacity: 1;
2272         height: auto;
2273         overflow: visible;
2274         transition: opacity .25s ease-in;
2275 }
2276
2277 .cbi-filebrowser {
2278         min-width: 210px;
2279         max-width: 100%;
2280         border: 1px solid #ccc;
2281         border-radius: 3px;
2282         display: flex;
2283         flex-direction: column;
2284         opacity: 0;
2285         height: 0;
2286         overflow: hidden;
2287 }
2288
2289 .cbi-filebrowser.open {
2290         opacity: 1;
2291         height: auto;
2292         overflow: visible;
2293         transition: opacity .25s ease-in;
2294 }
2295
2296 .cbi-filebrowser > * {
2297         max-width: 100%;
2298         overflow: hidden;
2299         text-overflow: ellipsis;
2300         padding: 0 0 .25em 0;
2301         margin: .25em .25em 0px .25em;
2302         white-space: nowrap;
2303         border-bottom: 1px solid #ccc;
2304 }
2305
2306 .cbi-filebrowser .cbi-button-positive {
2307         margin-right: .25em;
2308 }
2309
2310 .cbi-filebrowser > div {
2311         border-bottom: none;
2312 }
2313
2314 .cbi-filebrowser > ul > li {
2315         display: flex;
2316         flex-direction: row;
2317 }
2318
2319 .cbi-filebrowser > ul > li:hover {
2320         background: #f5f5f5;
2321 }
2322
2323 .cbi-filebrowser > ul > li > div:first-child {
2324         flex: 10;
2325         overflow: hidden;
2326         text-overflow: ellipsis;
2327 }
2328
2329 .cbi-filebrowser > ul > li > div:last-child {
2330         flex: 3;
2331         text-align: right;
2332 }
2333
2334 .cbi-filebrowser > ul > li > div:last-child > button {
2335         padding: .125em .25em;
2336         margin: 1px 0 1px .25em;
2337 }
2338
2339 .cbi-filebrowser .upload {
2340         display: flex;
2341         flex-direction: row;
2342         flex-wrap: wrap;
2343         margin: 0 -.125em .25em -.125em;
2344         padding: 0 0 .125em 0px;
2345         border-bottom: 1px solid #ccc;
2346 }
2347
2348 .cbi-filebrowser .upload > * {
2349         margin: .125em;
2350         flex: 1;
2351 }
2352
2353 .cbi-filebrowser .upload > .btn {
2354         flex-basis: 60px;
2355 }
2356
2357 .cbi-filebrowser .upload > div {
2358         flex: 10;
2359         min-width: 150px;
2360 }
2361
2362 .cbi-filebrowser .upload > div > input {
2363         width: 100%;
2364 }
2365
2366 @keyframes fade-in {
2367         0% { opacity: 0; }
2368         100% { opacity: 1; }
2369 }
2370
2371 @keyframes fade-out {
2372         0% { opacity: 1; }
2373         100% { opacity: 0; }
2374 }
2375
2376 .fade-in {
2377         animation: fade-in .4s ease;
2378 }
2379
2380 .fade-out {
2381         animation: fade-out .4s ease;
2382 }