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 > * {
1350         vertical-align: middle;
1351 }
1352
1353 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1354         float: left;
1355         margin-right: .4em;
1356 }
1357
1358 .btn.primary,
1359 .cbi-button-action.important,
1360 .cbi-page-actions .cbi-button-apply,
1361 .cbi-section-actions .cbi-button-edit {
1362         color: #fff;
1363         background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1364         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1365 }
1366
1367 .cbi-button-positive.important,
1368 .cbi-page-actions .cbi-button-save {
1369         color: #fff;
1370         background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1371         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1372 }
1373
1374 .cbi-button-negative.important {
1375         color: #fff;
1376         background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1377         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1378 }
1379
1380 .cbi-page-actions .cbi-button-apply + .cbi-button-save,
1381 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1382         background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1383         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1384         color: #4a4;
1385 }
1386
1387 .cbi-dropdown {
1388         display: inline-flex !important;
1389         cursor: pointer;
1390         height: auto;
1391         position: relative;
1392         padding: 0 !important;
1393 }
1394
1395 .cbi-dropdown:not(.btn):not(.cbi-button) {
1396         background: linear-gradient(#fff 0%, #e9e8e6 100%);
1397         border: 1px solid #ccc;
1398         border-radius: 3px;
1399         color: #404040;
1400 }
1401
1402 .cbi-dynlist > .item:focus,
1403 .cbi-dropdown:focus {
1404         outline: 2px solid #4b6e9b;
1405 }
1406
1407 .cbi-dropdown > ul {
1408         margin: 0 !important;
1409         padding: 0;
1410         list-style: none;
1411         overflow-x: hidden;
1412         overflow-y: auto;
1413         display: flex;
1414         width: 100%;
1415 }
1416
1417 .cbi-dropdown.btn > ul:not(.dropdown),
1418 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1419         margin: 0 0 0 13px !important;
1420 }
1421
1422 .cbi-dropdown.btn.spinning > ul:not(.dropdown),
1423 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1424         margin: 0 !important;
1425 }
1426
1427 .cbi-dropdown > ul.preview {
1428         display: none;
1429 }
1430
1431 .cbi-dropdown > .open,
1432 .cbi-dropdown > .more {
1433         flex-grow: 0;
1434         flex-shrink: 0;
1435         display: flex;
1436         flex-direction: column;
1437         justify-content: center;
1438         text-align: center;
1439         line-height: 2em;
1440         padding: 0 .25em;
1441 }
1442
1443 .cbi-dropdown.btn > .open,
1444 .cbi-dropdown.cbi-button > .open {
1445         padding: 0 .5em;
1446         margin-left: .5em;
1447         border-left: 1px solid;
1448 }
1449
1450 .cbi-dropdown > .more,
1451 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1452         color: #777;
1453         font-weight: bold;
1454         text-shadow: 1px 1px 0px #fff;
1455         display: none;
1456         justify-content: center;
1457 }
1458
1459 .cbi-dropdown > ul > li {
1460         display: none;
1461         white-space: nowrap;
1462         overflow: hidden;
1463         text-overflow: ellipsis;
1464         flex-shrink: 1;
1465         flex-grow: 1;
1466         align-items: center;
1467         align-self: center;
1468         color: inherit;
1469 }
1470
1471 .cbi-dropdown > ul.dropdown > li,
1472 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1473         min-height: 20px;
1474         padding: .25em;
1475         color: #404040;
1476 }
1477
1478 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1479 .cbi-dropdown > ul > li .hide-close { display: none; }
1480
1481 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1482         border-left: 1px solid #ccc;
1483 }
1484
1485 .cbi-dropdown[empty] > ul {
1486         max-width: 1px;
1487 }
1488
1489 .cbi-dropdown > ul > li > form {
1490         display: none;
1491         margin: 0;
1492         padding: 0;
1493         pointer-events: none;
1494 }
1495
1496 .cbi-dropdown > ul > li img {
1497         vertical-align: middle;
1498         margin-right: .25em;
1499 }
1500
1501 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1502         margin: 0;
1503 }
1504
1505 .cbi-dropdown > ul > li input[type="text"] {
1506         height: 20px;
1507 }
1508
1509 .cbi-dropdown[open] {
1510         position: relative;
1511 }
1512
1513 .cbi-dropdown[open] > ul.dropdown {
1514         display: block;
1515         background: #f6f6f5;
1516         border: 1px solid #918e8c;
1517         box-shadow: 0 0 4px #918e8c;
1518         position: absolute;
1519         z-index: 1100;
1520         max-width: none;
1521         min-width: 100%;
1522         width: auto;
1523         transition: max-height .125s ease-in;
1524 }
1525
1526 .cbi-dropdown > ul > li[display],
1527 .cbi-dropdown[open] > ul.preview,
1528 .cbi-dropdown[open] > ul.dropdown > li,
1529 .cbi-dropdown[multiple] > ul > li > label,
1530 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1531 .cbi-dropdown[multiple][more] > .more,
1532 .cbi-dropdown[multiple][empty] > .more {
1533         flex-grow: 1;
1534         display: flex !important;
1535 }
1536
1537 .cbi-dropdown[empty] > ul > li,
1538 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1539 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1540         display: block !important;
1541 }
1542
1543 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1544 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1545
1546 .cbi-dropdown[open] > ul.dropdown > li {
1547         border-bottom: 1px solid #ccc;
1548 }
1549
1550 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1551         background: #b0d0f0;
1552 }
1553
1554 .cbi-dropdown[open] > ul.dropdown > li.focus {
1555         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1556 }
1557
1558 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1559         margin-bottom: 0;
1560         border-bottom: none;
1561 }
1562
1563 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1564         opacity: 0.7;
1565 }
1566
1567 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1568         width: 100%;
1569 }
1570
1571 .cbi-dropdown[disabled] {
1572         pointer-events: none;
1573         opacity: .6;
1574 }
1575
1576 input[type="text"] + .cbi-button,
1577 input[type="password"] + .cbi-button,
1578 select + .cbi-button {
1579         border-radius: 0 3px 3px 0;
1580         border-color: #ccc;
1581         margin-left: -2px;
1582         padding: 0 6px;
1583         vertical-align: top;
1584         height: 30px;
1585         font-size: 14px;
1586         line-height: 28px;
1587 }
1588
1589 select + .cbi-button {
1590         border-left-color: transparent;
1591 }
1592
1593 .cbi-title-ref {
1594         color: #37c;
1595 }
1596
1597 .cbi-title-ref::after {
1598         content: "➙";
1599 }
1600
1601 .cbi-tooltip-container {
1602         cursor: help;
1603 }
1604
1605 .cbi-tooltip {
1606         position: absolute;
1607         z-index: 1000;
1608         left: -10000px;
1609         box-shadow: 0 0 2px #ccc;
1610         border-radius: 3px;
1611         background: #fff;
1612         white-space: pre;
1613         padding: 2px 5px;
1614         opacity: 0;
1615         transition: opacity .25s ease-in;
1616 }
1617
1618 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1619         left: auto;
1620         opacity: 1;
1621         transition: opacity .25s ease-in;
1622 }
1623
1624 .cbi-progressbar {
1625         border: 1px solid #ccc;
1626         border-radius: 3px;
1627         position: relative;
1628         min-width: 170px;
1629         height: 20px;
1630         margin: 4px 0;
1631         background: #f9f9f9;
1632 }
1633
1634 .cbi-progressbar > div {
1635         background: #90c0e0;
1636         height: 100%;
1637         transition: width .25s ease-in;
1638         width: 0%;
1639 }
1640
1641 .cbi-progressbar::after {
1642         position: absolute;
1643         bottom: 0;
1644         top: 0;
1645         right: 0;
1646         left: 0;
1647         text-align: center;
1648         text-shadow: 0 0 2px #fff;
1649         content: attr(title);
1650         white-space: pre;
1651         overflow: hidden;
1652         text-overflow: ellipsis;
1653 }
1654
1655 .zonebadge .cbi-tooltip {
1656         padding: 1px;
1657         background: inherit;
1658         margin: -1.6em 0 0 -5px;
1659         border-radius: 3px;
1660         pointer-events: none;
1661         box-shadow: 0 0 3px #444;
1662 }
1663
1664 .zonebadge .cbi-tooltip > * {
1665         margin: 1px;
1666 }
1667
1668 .zone-forwards {
1669         display: flex;
1670         flex-wrap: wrap;
1671 }
1672
1673 .zone-forwards > * {
1674         flex: 1 1 40%;
1675         padding: 1px;
1676 }
1677
1678 .zone-forwards > span {
1679         flex-basis: 10%;
1680         text-align: center;
1681 }
1682
1683 .zone-forwards .zone-src,
1684 .zone-forwards .zone-dest {
1685         display: flex;
1686         flex-direction: column;
1687 }
1688
1689 .btn.active, .btn:active {
1690         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1691 }
1692
1693 .btn.disabled {
1694         cursor: default;
1695         opacity: 0.65;
1696         box-shadow: none;
1697 }
1698
1699 .btn[disabled] {
1700         cursor: default;
1701         opacity: 0.65;
1702         box-shadow: none;
1703 }
1704
1705 .btn.large {
1706         font-size: 15px;
1707         line-height: normal;
1708         padding: 9px 14px 9px;
1709         border-radius: 6px;
1710 }
1711
1712 .btn.small {
1713         padding: 7px 9px 7px;
1714         font-size: 11px;
1715 }
1716
1717 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1718         padding: 0;
1719         border: 0;
1720 }
1721
1722 .close {
1723         float: right;
1724         color: #000;
1725         font-size: 20px;
1726         font-weight: bold;
1727         line-height: 13.5px;
1728         text-shadow: 0 1px 0 #fff;
1729         opacity: 0.25;
1730 }
1731
1732 .close:hover {
1733         color: #000;
1734         text-decoration: none;
1735         opacity: 0.4;
1736 }
1737
1738 .alert-message {
1739         position: relative;
1740         padding: .5em .5em .25em .5em;
1741         margin-bottom: .5em;
1742         color: #404040;
1743         background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1744         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1745         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1746         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1747         border-width: 1px;
1748         border-style: solid;
1749         border-radius: 4px;
1750         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1751 }
1752
1753 .alert-message .close {
1754         margin-top: 1px;
1755         *margin-top: 0;
1756 }
1757
1758 .alert-message h4,
1759 .alert-message h5,
1760 .alert-message pre,
1761 .alert-message ul,
1762 .alert-message li,
1763 .alert-message p {
1764         color: inherit;
1765         border: none;
1766         line-height: inherit;
1767         background: transparent;
1768         padding: 0;
1769         margin: .25em 0;
1770 }
1771
1772 .alert-message button {
1773         margin: .25em 0;
1774 }
1775
1776 .label {
1777         padding: 1px 3px 2px;
1778         font-size: 9.75px;
1779         font-weight: bold;
1780         color: #fff !important;
1781         text-transform: uppercase;
1782         white-space: nowrap;
1783         background-color: #bfbfbf;
1784         border-radius: 3px;
1785         text-shadow: none;
1786 }
1787
1788 a.label:link,
1789 a.label:visited {
1790         color: #fff;
1791 }
1792
1793 a.label:hover {
1794         text-decoration: none;
1795 }
1796
1797 .label.important {
1798         background-color: #c43c35;
1799 }
1800
1801 .label.warning {
1802         background-color: #f89406;
1803 }
1804
1805 .label.success {
1806         background-color: #46a546;
1807 }
1808
1809 .label.notice {
1810         background-color: #62cffc;
1811 }
1812
1813 /* LuCI specific items */
1814 .hidden { display: none }
1815
1816 #xhr_poll_status {
1817           cursor: pointer;
1818 }
1819
1820 form.inline { display: inline; margin-bottom: 0; }
1821
1822 header .pull-right { padding-top: 8px; }
1823
1824 #modemenu li:last-child span.divider { display: none }
1825
1826 #syslog {  width: 100%; }
1827
1828 .cbi-section-table .tr:hover .td,
1829 .cbi-section-table .tr:hover .th,
1830 .cbi-section-table .tr:hover::before {
1831         background-color: #f5f5f5;
1832 }
1833
1834 .cbi-section-table .tr.cbi-section-table-descr .th {
1835         font-weight: normal;
1836 }
1837
1838 .cbi-section-table-titles.named::before,
1839 .cbi-section-table-descr.named::before,
1840 .cbi-section-table-row[data-title]::before {
1841         content: attr(data-title) " ";
1842         display: table-cell;
1843         padding: 10px 10px 9px;
1844         line-height: 18px;
1845         font-weight: bold;
1846         vertical-align: middle;
1847 }
1848
1849 .cbi-section-table-titles.named::before,
1850 .cbi-section-table-descr.named::before,
1851 .cbi-section-table-row[data-title]::before {
1852         border-top: 1px solid #ddd;
1853 }
1854
1855 .left { text-align: left !important; }
1856 .right { text-align: right !important; }
1857 .center { text-align: center !important; }
1858 .top { vertical-align: top !important; }
1859 .middle { vertical-align: middle !important; }
1860 .bottom { vertical-align: bottom !important; }
1861
1862 .cbi-value-field { line-height: 1.5em; }
1863
1864 .cbi-value-field input[type=checkbox],
1865 .cbi-value-field input[type=radio] {
1866         margin-top: 8px;
1867         margin-right: 6px;
1868 }
1869
1870 table table td,
1871 .cbi-value-field table td {
1872         border: none;
1873 }
1874
1875 .table.cbi-section-table input[type="password"],
1876 .table.cbi-section-table input[type="text"],
1877 .table.cbi-section-table textarea,
1878 .table.cbi-section-table select {
1879         width: 100%;
1880 }
1881
1882 .table.cbi-section-table .td.cbi-section-table-cell {
1883         white-space: nowrap;
1884         text-align: right;
1885 }
1886
1887 .table.cbi-section-table .td.cbi-section-table-cell select {
1888         width: inherit;
1889 }
1890
1891 .td.cbi-section-actions {
1892         text-align: right;
1893         vertical-align: middle;
1894 }
1895
1896 .td.cbi-section-actions > * {
1897         display: flex;
1898 }
1899
1900 .td.cbi-section-actions > * > *,
1901 .td.cbi-section-actions > * > form > * {
1902         flex: 1 1 4em;
1903         margin: 0 1px;
1904 }
1905
1906 .td.cbi-section-actions > * > form {
1907         display: inline-flex;
1908         margin: 0;
1909 }
1910
1911 .table.valign-middle .td {
1912         vertical-align: middle;
1913 }
1914
1915 .cbi-rowstyle-2,
1916 .tr.table-titles,
1917 .tr.cbi-section-table-titles {
1918         background: #f9f9f9;
1919 }
1920
1921 .cbi-value-description {
1922         background-image: url(/luci-static/resources/cbi/help.gif);
1923         background-position: .25em .2em;
1924         background-repeat: no-repeat;
1925         margin: .25em 0 0 0;
1926         padding: 0 0 0 1.7em;
1927 }
1928
1929 .cbi-section-error {
1930         border: 1px solid #f00;
1931         border-radius: 3px;
1932         background-color: #fce6e6;
1933         padding: 5px;
1934         margin-bottom: 18px;
1935 }
1936
1937 .cbi-section-error ul { margin: 0 0 0 20px; }
1938
1939 .cbi-section-error ul li {
1940         color: #f00;
1941         font-weight: bold;
1942 }
1943
1944 .ifacebox {
1945         background-color: #fff;
1946         border: 1px solid #ccc;
1947         margin: 0 10px;
1948         text-align: center;
1949         white-space: nowrap;
1950         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1951         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1952         border-radius: 4px;
1953         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1954         display: inline-flex;
1955         flex-direction: column;
1956         line-height: 1.2em;
1957         min-width: 100px;
1958 }
1959
1960 .ifacebox .ifacebox-head {
1961         border-bottom: 1px solid #ccc;
1962         padding: 2px;
1963         background: #eee;
1964 }
1965
1966 .ifacebox .ifacebox-head.active {
1967         background: #90c0e0;
1968 }
1969
1970 .ifacebox .ifacebox-body {
1971         padding: .25em;
1972 }
1973
1974 .ifacebadge {
1975         display: inline-block;
1976         flex-direction: row;
1977         white-space: nowrap;
1978         background-color: #fff;
1979         border: 1px solid #ccc;
1980         padding: 2px;
1981         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1982         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1983         border-radius: 4px;
1984         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1985         cursor: default;
1986         line-height: 1.2em;
1987 }
1988
1989 .ifacebadge img {
1990         width: 16px;
1991         height: 16px;
1992         vertical-align: middle;
1993 }
1994
1995 .ifacebadge-active {
1996         border-color: #000;
1997         font-weight: bold;
1998 }
1999
2000 .network-status-table {
2001         display: flex;
2002         flex-wrap: wrap;
2003 }
2004
2005 .network-status-table .ifacebox {
2006         margin: .5em;
2007         flex-grow: 1;
2008 }
2009
2010 .network-status-table .ifacebox-body {
2011         display: flex;
2012         flex-direction: column;
2013         height: 100%;
2014         text-align: left;
2015 }
2016
2017 .network-status-table .ifacebox-body > * {
2018         margin: .25em;
2019 }
2020
2021 .network-status-table .ifacebox-body > span {
2022         flex: 10 10 auto;
2023         height: 100%;
2024 }
2025
2026 .network-status-table .ifacebox-body > div {
2027         margin: -.125em;
2028 }
2029
2030 #dsl_status_table .ifacebox-body span > strong {
2031         display: inline-block;
2032         min-width: 35%;
2033 }
2034
2035 .ifacebadge.large,
2036 .network-status-table .ifacebox-body .ifacebadge {
2037         display: flex;
2038         flex: 1;
2039         padding: .25em;
2040         min-width: 220px;
2041         margin: .125em;
2042 }
2043
2044 .ifacebadge.large {
2045         display: inline-flex;
2046 }
2047
2048 .network-status-table .ifacebox-body .ifacebadge > span {
2049         overflow: hidden;
2050         text-overflow: ellipsis;
2051 }
2052
2053 .ifacebadge > *,
2054 .ifacebadge.large > * {
2055         margin: 0 .125em;
2056 }
2057
2058 .zonebadge {
2059         padding: 2px;
2060         border-radius: 4px;
2061         display: inline-block;
2062         white-space: nowrap;
2063         color: #666;
2064         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2065 }
2066
2067 .zonebadge > em,
2068 .zonebadge > strong {
2069         margin: 0 2px;
2070         display: inline-block;
2071 }
2072
2073 .zonebadge input {
2074         width: 6em;
2075 }
2076
2077 .zonebadge > .ifacebadge {
2078         margin-left: 2px;
2079 }
2080
2081 .zonebadge-empty {
2082         border: 1px dashed #aaa;
2083         color: #aaa;
2084         font-style: italic;
2085         font-size: smaller;
2086 }
2087
2088 div.cbi-value var,
2089 .td.cbi-value-field var {
2090         font-style: italic;
2091         color: #0069d6;
2092 }
2093
2094 #modal_overlay > .modal.uci-dialog,
2095 #modal_overlay > .modal.cbi-modal {
2096         max-width: 900px;
2097 }
2098
2099 .uci-change-list {
2100         line-height: 170%;
2101         white-space: pre;
2102 }
2103
2104 .uci-change-list del,
2105 .uci-change-list ins,
2106 .uci-change-list var,
2107 .uci-change-legend-label del,
2108 .uci-change-legend-label ins,
2109 .uci-change-legend-label var {
2110         text-decoration: none;
2111         font-family: monospace;
2112         font-style: normal;
2113         border: 1px solid #ccc;
2114         background: #eee;
2115         padding: 2px;
2116         display: block;
2117         line-height: 15px;
2118         margin-bottom: 1px;
2119 }
2120
2121 .uci-change-list ins,
2122 .uci-change-legend-label ins {
2123         border-color: #0f0;
2124         background: #cfc;
2125 }
2126
2127 .uci-change-list del,
2128 .uci-change-legend-label del {
2129         border-color: #f00;
2130         background: #fcc;
2131 }
2132
2133 .uci-change-list var,
2134 .uci-change-legend-label var {
2135         border-color: #ccc;
2136         background: #eee;
2137 }
2138
2139 .uci-change-list var ins,
2140 .uci-change-list var del {
2141         display: inline-block;
2142         border: none;
2143         width: 100%;
2144         padding: 0;
2145 }
2146
2147 .uci-change-legend {
2148         padding: 5px;
2149 }
2150
2151 .uci-change-legend-label {
2152         width: 150px;
2153         float: left;
2154 }
2155
2156 .uci-change-legend-label > ins,
2157 .uci-change-legend-label > del,
2158 .uci-change-legend-label > var {
2159         float: left;
2160         margin-right: 4px;
2161         width: 16px;
2162         height: 16px;
2163         display: block;
2164         position: relative;
2165 }
2166
2167 .uci-change-legend-label var ins,
2168 .uci-change-legend-label var del {
2169         border: none;
2170         position: absolute;
2171         top: 2px;
2172         left: 2px;
2173         right: 2px;
2174         bottom: 2px;
2175 }
2176
2177 #modal_overlay {
2178         position: fixed;
2179         top: 0;
2180         bottom: 0;
2181         left: -10000px;
2182         right: 10000px;
2183         background: rgba(0, 0, 0, 0.7);
2184         z-index: 900;
2185         overflow-y: scroll;
2186         -webkit-overflow-scrolling: touch;
2187         transition: opacity .125s ease-in;
2188         opacity: 0;
2189 }
2190
2191 #modal_overlay > .modal {
2192         width: 90%;
2193         margin: 5em auto;
2194         display: flex;
2195         flex-wrap: wrap;
2196         min-height: 32px;
2197         max-width: 600px;
2198         align-items: center;
2199         border-radius: 3px;
2200         background: #fff;
2201         box-shadow: 0 0 3px #444;
2202         padding: 1em 1em .5em 1em;
2203         max-height: 2400px;
2204         min-width: 270px;
2205 }
2206
2207 #modal_overlay .modal > * {
2208         flex-basis: 100%;
2209         line-height: normal;
2210         margin-bottom: .5em;
2211 }
2212
2213 #modal_overlay .modal > pre,
2214 #modal_overlay .modal > textarea {
2215         white-space: pre-wrap;
2216         overflow: auto;
2217 }
2218
2219 body.modal-overlay-active {
2220         overflow: hidden;
2221         height: 100vh;
2222 }
2223
2224 body.modal-overlay-active #modal_overlay {
2225         left: 0;
2226         right: 0;
2227         opacity: 1;
2228 }
2229
2230 html body.apply-overlay-active {
2231         height: calc(100vh - 63px);
2232 }
2233
2234 #applyreboot-section {
2235         line-height: 300%;
2236 }
2237
2238 [data-page="admin-network-dhcp"] [data-name="ip"] {
2239         width: 15%;
2240 }
2241
2242 @keyframes flash {
2243         0% { opacity: 1; }
2244         50% { opacity: .5; }
2245         100% { opacity: 1; }
2246 }
2247
2248 .flash {
2249         animation: flash .35s;
2250 }
2251
2252 .spinning {
2253         position: relative;
2254         padding-left: 32px !important;
2255 }
2256
2257 .spinning::before {
2258         position: absolute;
2259         top: 0;
2260         left: 0;
2261         bottom: 0;
2262         width: 32px;
2263         content: " ";
2264         background: url(../resources/icons/loading.gif) no-repeat center;
2265         background-size: 16px;
2266 }
2267
2268 [data-tab-title] {
2269         height: 0;
2270         opacity: 0;
2271         overflow: hidden;
2272 }
2273
2274 [data-tab-active="true"] {
2275         opacity: 1;
2276         height: auto;
2277         overflow: visible;
2278         transition: opacity .25s ease-in;
2279 }
2280
2281 .cbi-filebrowser {
2282         min-width: 210px;
2283         max-width: 100%;
2284         border: 1px solid #ccc;
2285         border-radius: 3px;
2286         display: flex;
2287         flex-direction: column;
2288         opacity: 0;
2289         height: 0;
2290         overflow: hidden;
2291 }
2292
2293 .cbi-filebrowser.open {
2294         opacity: 1;
2295         height: auto;
2296         overflow: visible;
2297         transition: opacity .25s ease-in;
2298 }
2299
2300 .cbi-filebrowser > * {
2301         max-width: 100%;
2302         overflow: hidden;
2303         text-overflow: ellipsis;
2304         padding: 0 0 .25em 0;
2305         margin: .25em .25em 0px .25em;
2306         white-space: nowrap;
2307         border-bottom: 1px solid #ccc;
2308 }
2309
2310 .cbi-filebrowser .cbi-button-positive {
2311         margin-right: .25em;
2312 }
2313
2314 .cbi-filebrowser > div {
2315         border-bottom: none;
2316 }
2317
2318 .cbi-filebrowser > ul > li {
2319         display: flex;
2320         flex-direction: row;
2321 }
2322
2323 .cbi-filebrowser > ul > li:hover {
2324         background: #f5f5f5;
2325 }
2326
2327 .cbi-filebrowser > ul > li > div:first-child {
2328         flex: 10;
2329         overflow: hidden;
2330         text-overflow: ellipsis;
2331 }
2332
2333 .cbi-filebrowser > ul > li > div:last-child {
2334         flex: 3;
2335         text-align: right;
2336 }
2337
2338 .cbi-filebrowser > ul > li > div:last-child > button {
2339         padding: .125em .25em;
2340         margin: 1px 0 1px .25em;
2341 }
2342
2343 .cbi-filebrowser .upload {
2344         display: flex;
2345         flex-direction: row;
2346         flex-wrap: wrap;
2347         margin: 0 -.125em .25em -.125em;
2348         padding: 0 0 .125em 0px;
2349         border-bottom: 1px solid #ccc;
2350 }
2351
2352 .cbi-filebrowser .upload > * {
2353         margin: .125em;
2354         flex: 1;
2355 }
2356
2357 .cbi-filebrowser .upload > .btn {
2358         flex-basis: 60px;
2359 }
2360
2361 .cbi-filebrowser .upload > div {
2362         flex: 10;
2363         min-width: 150px;
2364 }
2365
2366 .cbi-filebrowser .upload > div > input {
2367         width: 100%;
2368 }
2369
2370 @keyframes fade-in {
2371         0% { opacity: 0; }
2372         100% { opacity: 1; }
2373 }
2374
2375 @keyframes fade-out {
2376         0% { opacity: 1; }
2377         100% { opacity: 0; }
2378 }
2379
2380 .fade-in {
2381         animation: fade-in .4s ease;
2382 }
2383
2384 .fade-out {
2385         animation: fade-out .4s ease;
2386 }