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