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: #ffffff;
 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: #ffffff;
 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: #ffffff;
 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: #ffffff;
 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 .help-inline, .help-block {
 702         font-size: 13px;
 703         line-height: 18px;
 704         color: #bfbfbf;
 705 }
 706
 707 .help-inline {
 708         padding-left: 5px;
 709         *position: relative;
 710         /* IE6-7 */
 711
 712         *top: -5px;
 713         /* IE6-7 */
 714
 715 }
 716
 717 .help-block {
 718         display: block;
 719         max-width: 600px;
 720 }
 721
 722 /*
 723  * Tables.less
 724  * Tables for, you guessed it, tabular data
 725  * ---------------------------------------- */
 726 .tr { display: table-row; }
 727 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
 728 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
 729
 730 .table {
 731         display: table;
 732         width: 100%;
 733         margin-bottom: 18px;
 734         padding: 0;
 735         font-size: 13px;
 736         border-collapse: collapse;
 737         position: relative;
 738 }
 739
 740 .table .th, .table .td {
 741         display: table-cell;
 742         vertical-align: middle; /* Fixme */
 743         padding: 10px 10px 9px;
 744         line-height: 18px;
 745         text-align: left;
 746 }
 747
 748 .table .th {
 749         padding-top: 9px;
 750         font-weight: bold;
 751         vertical-align: middle;
 752 }
 753
 754 .table .td {
 755         vertical-align: top;
 756         border-top: 1px solid #ddd;
 757 }
 758
 759 .table .tbody .th {
 760         border-top: 1px solid #ddd;
 761         vertical-align: top;
 762 }
 763
 764 .tr.placeholder {
 765         height: calc(3em + 20px);
 766 }
 767
 768 .tr.placeholder > .td {
 769         position: absolute;
 770         left: 0;
 771         right: 0;
 772         bottom: 0;
 773         text-align: center;
 774         line-height: 3em;
 775 }
 776
 777 /* Patterns.less
 778  * Repeatable UI elements outside the base styles provided from the scaffolding
 779  * ---------------------------------------------------------------------------- */
 780 header {
 781         height: 40px;
 782         position: fixed;
 783         top: 0;
 784         left: 0;
 785         right: 0;
 786         z-index: 10000;
 787         overflow: visible;
 788         color: #BFBFBF;
 789 }
 790
 791 header a {
 792         color: #bfbfbf;
 793         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 794 }
 795
 796 header h3 a:hover, header .brand:hover, header ul .active > a {
 797         background-color: #333;
 798         background-color: rgba(255, 255, 255, 0.05);
 799         color: #ffffff;
 800         text-decoration: none;
 801 }
 802
 803 header h3 {
 804         position: relative;
 805 }
 806
 807 header h3 a, header .brand {
 808         float: left;
 809         display: block;
 810         padding: 8px 20px 12px;
 811         margin-left: -20px;
 812         color: #ffffff;
 813         font-size: 20px;
 814         font-weight: 200;
 815         line-height: 1;
 816 }
 817
 818 header p {
 819         margin: 0;
 820         line-height: 40px;
 821 }
 822
 823 header .fill {
 824         background-color: #222;
 825         background-repeat: repeat-x;
 826         background-image: linear-gradient(to bottom, #333333, #222222);
 827         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 828         padding: 0 5px;
 829 }
 830
 831 header div > ul, .nav {
 832         display: block;
 833         float: left;
 834         margin: 0 10px 0 0;
 835         position: relative;
 836         left: 0;
 837 }
 838
 839 header div > ul > li, .nav > li {
 840         display: block;
 841         float: left;
 842 }
 843
 844 header div > ul a, .nav a {
 845         display: block;
 846         float: none;
 847         padding: 10px 10px 11px;
 848         line-height: 19px;
 849         text-decoration: none;
 850 }
 851
 852 header div > ul a:hover, .nav a:hover {
 853         color: #ffffff;
 854         text-decoration: none;
 855 }
 856
 857 header div > ul .active > a, .nav .active > a {
 858         background-color: #222;
 859         background-color: rgba(0, 0, 0, 0.5);
 860 }
 861
 862 header div > ul.secondary-nav, .nav.secondary-nav {
 863         float: right;
 864         margin-left: 10px;
 865         margin-right: 0;
 866 }
 867
 868 header div > ul.secondary-nav .menu-dropdown,
 869 .nav.secondary-nav .menu-dropdown,
 870 header div > ul.secondary-nav .dropdown-menu,
 871 .nav.secondary-nav .dropdown-menu {
 872         right: 0;
 873         border: 0;
 874 }
 875
 876 header div > ul a.menu:hover,
 877 .nav a.menu:hover,
 878 header div > ul li.open .menu,
 879 .nav li.open .menu,
 880 header div > ul .dropdown-toggle:hover,
 881 .nav .dropdown-toggle:hover,
 882 header div > ul .dropdown.open .dropdown-toggle,
 883 .nav .dropdown.open .dropdown-toggle {
 884         background: #444;
 885         background: rgba(255, 255, 255, 0.05);
 886 }
 887
 888 header div > ul .menu-dropdown,
 889 .nav .menu-dropdown,
 890 header div > ul .dropdown-menu,
 891 .nav .dropdown-menu {
 892         background-color: #333;
 893 }
 894
 895 header div > ul .menu-dropdown a.menu,
 896 .nav .menu-dropdown a.menu,
 897 header div > ul .dropdown-menu a.menu,
 898 .nav .dropdown-menu a.menu,
 899 header div > ul .menu-dropdown .dropdown-toggle,
 900 .nav .menu-dropdown .dropdown-toggle,
 901 header div > ul .dropdown-menu .dropdown-toggle,
 902 .nav .dropdown-menu .dropdown-toggle {
 903         color: #ffffff;
 904 }
 905
 906 header div > ul .menu-dropdown a.menu.open,
 907 .nav .menu-dropdown a.menu.open,
 908 header div > ul .dropdown-menu a.menu.open,
 909 .nav .dropdown-menu a.menu.open,
 910 header div > ul .menu-dropdown .dropdown-toggle.open,
 911 .nav .menu-dropdown .dropdown-toggle.open,
 912 header div > ul .dropdown-menu .dropdown-toggle.open,
 913 .nav .dropdown-menu .dropdown-toggle.open {
 914         background: #444;
 915         background: rgba(255, 255, 255, 0.05);
 916 }
 917
 918 header div > ul .menu-dropdown li a,
 919 .nav .menu-dropdown li a,
 920 header div > ul .dropdown-menu li a,
 921 .nav .dropdown-menu li a {
 922         color: #999;
 923         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
 924 }
 925
 926 header div > ul .menu-dropdown li a:hover,
 927 .nav .menu-dropdown li a:hover,
 928 header div > ul .dropdown-menu li a:hover,
 929 .nav .dropdown-menu li a:hover {
 930         background-color: #191919;
 931         background-repeat: repeat-x;
 932         background-image: linear-gradient(to bottom, #292929, #191919);
 933         color: #ffffff;
 934 }
 935
 936 header div > ul .menu-dropdown .active a,
 937 .nav .menu-dropdown .active a,
 938 header div > ul .dropdown-menu .active a,
 939 .nav .dropdown-menu .active a {
 940         color: #ffffff;
 941 }
 942
 943 header div > ul .menu-dropdown .divider,
 944 .nav .menu-dropdown .divider,
 945 header div > ul .dropdown-menu .divider,
 946 .nav .dropdown-menu .divider {
 947         background-color: #222;
 948         border-color: #444;
 949 }
 950
 951 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
 952         padding: 4px 15px;
 953 }
 954
 955 li.menu, .dropdown {
 956         position: relative;
 957 }
 958
 959 a.menu:after, .dropdown-toggle:after {
 960         width: 0;
 961         height: 0;
 962         display: inline-block;
 963         content: "&darr;";
 964         text-indent: -99999px;
 965         vertical-align: top;
 966         margin-top: 8px;
 967         margin-left: 4px;
 968         border-left: 4px solid transparent;
 969         border-right: 4px solid transparent;
 970         border-top: 4px solid #ffffff;
 971         opacity: 0.5;
 972 }
 973
 974 .menu-dropdown, .dropdown-menu {
 975         background-color: #ffffff;
 976         float: left;
 977         position: absolute;
 978         top: 40px;
 979         left: -9999px;
 980         z-index: 900;
 981         min-width: 160px;
 982         max-width: 220px;
 983         _width: 160px;
 984         margin-left: 0;
 985         margin-right: 0;
 986         padding: 6px 0;
 987         zoom: 1;
 988         border-color: #999;
 989         border-color: rgba(0, 0, 0, 0.2);
 990         border-style: solid;
 991         border-width: 0 1px 1px;
 992         border-radius: 0 0 6px 6px;
 993         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 994         background-clip: padding-box;
 995 }
 996
 997 .menu-dropdown li, .dropdown-menu li {
 998         float: none;
 999         display: block;
1000         background-color: transparent;
1001 }
1002
1003 .menu-dropdown .divider, .dropdown-menu .divider {
1004         height: 1px;
1005         margin: 5px 0;
1006         overflow: hidden;
1007         background-color: #eee;
1008         border-bottom: 1px solid #ffffff;
1009 }
1010
1011 header .dropdown-menu a, .dropdown-menu a {
1012         display: block;
1013         padding: 4px 15px;
1014         clear: both;
1015         font-weight: normal;
1016         line-height: 18px;
1017         color: #808080;
1018         text-shadow: 0 1px 0 #ffffff;
1019 }
1020
1021 header .dropdown-menu a:hover,
1022 .dropdown-menu a:hover,
1023 header .dropdown-menu a.hover,
1024 .dropdown-menu a.hover {
1025         background-color: #dddddd;
1026         background-repeat: repeat-x;
1027         background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
1028         color: #404040;
1029         text-decoration: none;
1030         box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1031 }
1032
1033 .open .menu,
1034 .dropdown.open .menu,
1035 .open .dropdown-toggle,
1036 .dropdown.open .dropdown-toggle {
1037         color: #ffffff;
1038         background: #ccc;
1039         background: rgba(0, 0, 0, 0.3);
1040 }
1041
1042 .open .menu-dropdown,
1043 .dropdown.open .menu-dropdown,
1044 .open .dropdown-menu,
1045 .dropdown.open .dropdown-menu {
1046         left: 0;
1047 }
1048
1049 .dropdown:hover ul.dropdown-menu {
1050         left: 0;
1051 }
1052
1053 .dropdown-menu .dropdown-menu {
1054           position: absolute;
1055           left: 159px;
1056 }
1057
1058 .dropdown-menu li {
1059           position: relative;
1060 }
1061
1062 .tabs, .cbi-tabmenu {
1063         margin: 0 0 18px;
1064         padding: 0;
1065         list-style: none;
1066         zoom: 1;
1067 }
1068
1069 .tabs:before,
1070 .cbi-tabmenu:before,
1071 .tabs:after,
1072 .cbi-tabmenu:after {
1073         display: table;
1074         content: "";
1075         zoom: 1;
1076 }
1077
1078 .tabs:after, .cbi-tabmenu:after {
1079         clear: both;
1080 }
1081
1082 .tabs > li, .cbi-tabmenu > li {
1083         float: left;
1084 }
1085
1086 .tabs > li > a, .cbi-tabmenu > li > a {
1087         display: block;
1088 }
1089
1090 .tabs,
1091 .cbi-tabmenu {
1092         border-color: #ddd;
1093         border-style: solid;
1094         border-width: 0 0 1px;
1095 }
1096
1097 .tabs > li,
1098 .cbi-tabmenu > li {
1099         position: relative;
1100         margin-bottom: -1px;
1101 }
1102
1103 .cbi-tabmenu.map {
1104         margin: 0;
1105 }
1106
1107 .cbi-tabmenu.map > li {
1108         font-size: 16.5px;
1109         font-weight: bold;
1110 }
1111
1112 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1113         display: none;
1114 }
1115
1116 .tabs > li > a,
1117 .cbi-tabmenu > li > a {
1118         padding: 0 15px;
1119         margin-right: 2px;
1120         line-height: 34px;
1121         border: 1px solid transparent;
1122         border-radius: 4px 4px 0 0;
1123 }
1124
1125 .tabs > li > a:hover,
1126 .cbi-tabmenu > li > a:hover {
1127         text-decoration: none;
1128         background-color: #eee;
1129         border-color: #eee #eee #ddd;
1130 }
1131
1132 .tabs .active > a, .tabs .active > a:hover,
1133 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
1134 .cbi-tab > a:link, .cbi-tab > a:hover {
1135         color: #808080;
1136         background-color: #ffffff;
1137         border: 1px solid #ddd;
1138         border-bottom-color: transparent;
1139         cursor: default;
1140 }
1141
1142 .tabs .menu-dropdown, .tabs .dropdown-menu,
1143 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1144         top: 35px;
1145         border-width: 1px;
1146         border-radius: 0 6px 6px 6px;
1147 }
1148
1149 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1150 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1151         border-top-color: #999;
1152         margin-top: 15px;
1153         margin-left: 5px;
1154 }
1155
1156 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1157 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1158         border-color: #999;
1159 }
1160
1161 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1162 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1163         border-top-color: #555;
1164 }
1165
1166 .tab-content > .tab-pane,
1167 .tab-content > div {
1168         display: none;
1169 }
1170
1171 .tab-content > .active {
1172         display: block;
1173 }
1174
1175 .breadcrumb {
1176         padding: 7px 14px;
1177         margin: 0 0 18px;
1178         background-color: #f5f5f5;
1179         background-repeat: repeat-x;
1180         background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
1181         border: 1px solid #ddd;
1182         border-radius: 3px;
1183         box-shadow: inset 0 1px 0 #ffffff;
1184 }
1185
1186 .breadcrumb li {
1187         display: inline;
1188         text-shadow: 0 1px 0 #ffffff;
1189 }
1190
1191 .breadcrumb .divider {
1192         padding: 0 5px;
1193         color: #bfbfbf;
1194 }
1195
1196 .breadcrumb .active a {
1197         color: #404040;
1198 }
1199
1200 footer {
1201         margin-top: 17px;
1202         padding-top: 17px;
1203         border-top: 1px solid #eee;
1204 }
1205
1206 .btn.danger,
1207 .alert-message.danger,
1208 .btn.danger:hover,
1209 .alert-message.danger:hover,
1210 .btn.error,
1211 .alert-message.error,
1212 .btn.error:hover,
1213 .alert-message.error:hover,
1214 .btn.success,
1215 .alert-message.success,
1216 .btn.success:hover,
1217 .alert-message.success:hover,
1218 .btn.info,
1219 .alert-message.info,
1220 .btn.info:hover,
1221 .alert-message.info:hover {
1222         color: #ffffff;
1223 }
1224
1225 .btn .close, .alert-message .close {
1226         font-family: Arial, sans-serif;
1227         line-height: 18px;
1228 }
1229
1230 .btn.danger,
1231 .alert-message.danger,
1232 .btn.error,
1233 .alert-message.error {
1234         background-color: #c43c35;
1235         background-repeat: repeat-x;
1236         background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
1237         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1238         border-color: #c43c35 #c43c35 #882a25;
1239         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1240 }
1241
1242 .btn.success, .alert-message.success {
1243         background-color: #57a957;
1244         background-repeat: repeat-x;
1245         background-image: linear-gradient(to bottom, #62c462, #57a957);
1246         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1247         border-color: #57a957 #57a957 #3d773d;
1248         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1249 }
1250
1251 .btn.info, .alert-message.info {
1252         background-color: #339bb9;
1253         background-repeat: repeat-x;
1254         background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
1255         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1256         border-color: #339bb9 #339bb9 #22697d;
1257         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1258 }
1259
1260 .btn,
1261 .cbi-button {
1262         cursor: pointer;
1263         display: inline-block;
1264         background-color: #e6e6e6;
1265         background-repeat: no-repeat;
1266         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1267         padding: 5px 14px 6px;
1268         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1269         color: #333;
1270         font-size: 13px;
1271         line-height: normal;
1272         border: 1px solid #ccc;
1273         border-bottom-color: #bbb;
1274         border-radius: 4px;
1275         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1276 }
1277
1278 .btn:hover,
1279 .cbi-button:hover {
1280         color: #333;
1281         text-decoration: none;
1282 }
1283
1284 .btn:focus,
1285 .cbi-button:focus {
1286         outline: 1px dotted #666;
1287 }
1288
1289 .cbi-input-invalid,
1290 .cbi-value-error input {
1291         color: #FF0000;
1292         border-color: #FF0000;
1293 }
1294
1295 .cbi-button-positive,
1296 .cbi-button-fieldadd,
1297 .cbi-button-add,
1298 .cbi-button-save {
1299         border-color: #4a4;
1300         color: #4a4;
1301 }
1302
1303 .cbi-button-neutral,
1304 .cbi-button-download,
1305 .cbi-button-find,
1306 .cbi-button-link,
1307 .cbi-button-up,
1308 .cbi-button-down {
1309         border-color: #444;
1310         color: #444;
1311 }
1312
1313 .btn.primary,
1314 .cbi-button-action,
1315 .cbi-button-apply,
1316 .cbi-button-reload,
1317 .cbi-button-edit {
1318         border-color: #0069d6;
1319         color: #0069d6;
1320 }
1321
1322 .cbi-button-negative,
1323 .cbi-section-remove .cbi-button,
1324 .cbi-button-reset,
1325 .cbi-button-remove {
1326         border-color: #c44;
1327         color: #c44;
1328 }
1329
1330 .btn.primary,
1331 .cbi-button-action.important,
1332 .cbi-page-actions .cbi-button-apply,
1333 .cbi-section-actions .cbi-button-edit {
1334         color: #fff;
1335         background: #0069d6;
1336         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1337 }
1338
1339 .cbi-button-positive.important,
1340 .cbi-page-actions .cbi-button-save {
1341         color: #fff;
1342         background: #4a4;
1343         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1344 }
1345
1346 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1347         background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1348         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1349         color: #4a4;
1350 }
1351
1352 .cbi-dropdown {
1353         border: 1px solid #ccc;
1354         border-radius: 3px;
1355         display: inline-flex;
1356         padding: 0;
1357         cursor: pointer;
1358         height: auto;
1359         background: linear-gradient(#fff 0%, #e9e8e6 100%);
1360         position: relative;
1361         color: #404040;
1362 }
1363
1364 .cbi-dropdown:focus {
1365         outline: 2px solid #4b6e9b;
1366 }
1367
1368 .cbi-dropdown > ul {
1369         margin: 0 !important;
1370         padding: 0;
1371         list-style: none;
1372         overflow-x: hidden;
1373         overflow-y: auto;
1374         display: flex;
1375         width: 100%;
1376 }
1377
1378 .cbi-dropdown > ul.preview {
1379         display: none;
1380 }
1381
1382 .cbi-dropdown > .open,
1383 .cbi-dropdown > .more {
1384         flex-grow: 0;
1385         flex-shrink: 0;
1386         display: flex;
1387         flex-direction: column;
1388         justify-content: center;
1389         text-align: center;
1390         line-height: 2em;
1391         padding: 0 .25em;
1392 }
1393
1394 .cbi-dropdown > .more,
1395 .cbi-dropdown > ul > li[placeholder] {
1396         color: #777;
1397         font-weight: bold;
1398         text-shadow: 1px 1px 0px #fff;
1399         display: none;
1400 }
1401
1402 .cbi-dropdown > ul > li {
1403         display: none;
1404         padding: .25em;
1405         white-space: nowrap;
1406         overflow: hidden;
1407         text-overflow: ellipsis;
1408         flex-shrink: 1;
1409         flex-grow: 1;
1410         align-items: center;
1411         align-self: center;
1412         color: #404040;
1413         min-height: 20px;
1414 }
1415
1416 .cbi-dropdown > ul > li .hide-open { display: initial; }
1417 .cbi-dropdown > ul > li .hide-close { display: none; }
1418
1419 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1420         border-left: 1px solid #ccc;
1421 }
1422
1423 .cbi-dropdown[empty] > ul {
1424         max-width: 1px;
1425 }
1426
1427 .cbi-dropdown > ul > li > form {
1428         display: none;
1429         margin: 0;
1430         padding: 0;
1431         pointer-events: none;
1432 }
1433
1434 .cbi-dropdown > ul > li img {
1435         vertical-align: middle;
1436         margin-right: .25em;
1437 }
1438
1439 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1440         margin: 0;
1441 }
1442
1443 .cbi-dropdown > ul > li input[type="text"] {
1444         height: 20px;
1445 }
1446
1447 .cbi-dropdown[open] {
1448         position: relative;
1449 }
1450
1451 .cbi-dropdown[open] > ul.dropdown {
1452         display: block;
1453         background: #f6f6f5;
1454         border: 1px solid #918e8c;
1455         box-shadow: 0 0 4px #918e8c;
1456         position: absolute;
1457         z-index: 1000;
1458         max-width: none;
1459         min-width: 100%;
1460         width: auto;
1461 }
1462
1463 .cbi-dropdown > ul > li[display],
1464 .cbi-dropdown[open] > ul.preview,
1465 .cbi-dropdown[open] > ul.dropdown > li,
1466 .cbi-dropdown[multiple] > ul > li > label,
1467 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1468 .cbi-dropdown[multiple][more] > .more,
1469 .cbi-dropdown[multiple][empty] > .more {
1470         flex-grow: 1;
1471         display: flex;
1472 }
1473
1474 .cbi-dropdown[empty] > ul > li,
1475 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1476 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1477         display: block;
1478 }
1479
1480 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1481 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
1482
1483 .cbi-dropdown[open] > ul.dropdown > li {
1484         border-bottom: 1px solid #ccc;
1485 }
1486
1487 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1488         background: #b0d0f0;
1489 }
1490
1491 .cbi-dropdown[open] > ul.dropdown > li.focus {
1492         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1493 }
1494
1495 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1496         margin-bottom: 0;
1497         border-bottom: none;
1498 }
1499
1500 .cbi-dropdown[disabled] {
1501         pointer-events: none;
1502         opacity: .6;
1503 }
1504
1505 .cbi-tooltip-container {
1506         cursor: help;
1507 }
1508
1509 .cbi-tooltip {
1510         position: absolute;
1511         z-index: 1000;
1512         left: -1000px;
1513         opacity: 0;
1514         transition: opacity .25s ease-out;
1515 }
1516
1517 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1518         left: auto;
1519         opacity: 1;
1520         transition: opacity .25s ease-in;
1521 }
1522
1523 .zonebadge .cbi-tooltip {
1524         padding: 1px;
1525         background: inherit;
1526         margin: -1.6em 0 0 -5px;
1527         border-radius: 3px;
1528         pointer-events: none;
1529         box-shadow: 0 0 3px #444;
1530 }
1531
1532 .zonebadge .cbi-tooltip > * {
1533         margin: 1px;
1534 }
1535
1536 .zone-forwards {
1537         display: flex;
1538         flex-wrap: wrap;
1539 }
1540
1541 .zone-forwards > * {
1542         flex: 1 1 40%;
1543         padding: 1px;
1544 }
1545
1546 .zone-forwards > span {
1547         flex-basis: 10%;
1548         text-align: center;
1549 }
1550
1551 .zone-forwards .zone-src,
1552 .zone-forwards .zone-dest {
1553         display: flex;
1554         flex-direction: column;
1555 }
1556
1557 .btn.active, .btn:active {
1558         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1559 }
1560
1561 .btn.disabled {
1562         cursor: default;
1563         background-image: none;
1564         opacity: 0.65;
1565         box-shadow: none;
1566 }
1567
1568 .btn[disabled] {
1569         cursor: default;
1570         background-image: none;
1571         opacity: 0.65;
1572         box-shadow: none;
1573 }
1574
1575 .btn.large {
1576         font-size: 15px;
1577         line-height: normal;
1578         padding: 9px 14px 9px;
1579         border-radius: 6px;
1580 }
1581
1582 .btn.small {
1583         padding: 7px 9px 7px;
1584         font-size: 11px;
1585 }
1586
1587 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1588         padding: 0;
1589         border: 0;
1590 }
1591
1592 .close {
1593         float: right;
1594         color: #000000;
1595         font-size: 20px;
1596         font-weight: bold;
1597         line-height: 13.5px;
1598         text-shadow: 0 1px 0 #ffffff;
1599         opacity: 0.25;
1600 }
1601
1602 .close:hover {
1603         color: #000000;
1604         text-decoration: none;
1605         opacity: 0.4;
1606 }
1607
1608 .alert-message {
1609         position: relative;
1610         padding: 7px 15px;
1611         margin-bottom: 18px;
1612         color: #404040;
1613         background-color: #eedc94;
1614         background-repeat: repeat-x;
1615         background-image: linear-gradient(to bottom, #fceec1, #eedc94);
1616         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1617         border-color: #eedc94 #eedc94 #e4c652;
1618         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1619         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1620         border-width: 1px;
1621         border-style: solid;
1622         border-radius: 4px;
1623         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1624 }
1625
1626 .alert-message .close {
1627         margin-top: 1px;
1628         *margin-top: 0;
1629 }
1630
1631 .alert-message a {
1632         font-weight: bold;
1633         color: #404040;
1634 }
1635
1636 .alert-message.danger p a,
1637 .alert-message.error p a,
1638 .alert-message.success p a,
1639 .alert-message.info p a {
1640         color: #ffffff;
1641 }
1642
1643 .alert-message h5 {
1644         line-height: 18px;
1645 }
1646
1647 .alert-message p {
1648         margin-bottom: 0;
1649 }
1650
1651 .alert-message div {
1652         margin-top: 5px;
1653         margin-bottom: 2px;
1654         line-height: 28px;
1655 }
1656
1657 .alert-message .btn {
1658         box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1659 }
1660
1661 .label {
1662         padding: 1px 3px 2px;
1663         font-size: 9.75px;
1664         font-weight: bold;
1665         color: #ffffff !important;
1666         text-transform: uppercase;
1667         white-space: nowrap;
1668         background-color: #bfbfbf;
1669         border-radius: 3px;
1670         text-shadow: none;
1671 }
1672
1673 a.label:link,
1674 a.label:visited {
1675         color: #ffffff;
1676 }
1677
1678 a.label:hover {
1679         text-decoration: none;
1680 }
1681
1682 .label.important {
1683         background-color: #c43c35;
1684 }
1685
1686 .label.warning {
1687         background-color: #f89406;
1688 }
1689
1690 .label.success {
1691         background-color: #46a546;
1692 }
1693
1694 .label.notice {
1695         background-color: #62cffc;
1696 }
1697
1698 /* LuCI specific items */
1699 .hidden { display: none }
1700
1701 #memtotal > div,
1702 #memfree > div,
1703 #memcache > div,
1704 #membuff > div,
1705 #conns > div  {
1706           border: 1px solid #CCCCCC;
1707           border-radius: 3px 3px 3px 3px;
1708           color: #808080;
1709           display: inline-block;
1710           font-size: 13px;
1711           line-height: 18px;
1712 }
1713
1714 #xhr_poll_status {
1715           cursor: pointer;
1716 }
1717
1718 form.inline { display: inline }
1719
1720 header .pull-right { padding-top: 8px; }
1721
1722 #modemenu li:last-child span.divider { display: none }
1723
1724 #syslog {  width: 100%; }
1725
1726 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1727         background-color: #f9f9f9;
1728 }
1729
1730 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th  {
1731         background-color: #f5f5f5;
1732 }
1733
1734 .cbi-section-table tr.cbi-section-table-descr th {
1735         font-weight: normal;
1736 }
1737
1738 .cbi-section-table-titles.named::before,
1739 .cbi-section-table-descr.named::before,
1740 .cbi-section-table-row[data-title]::before {
1741         content: attr(data-title) " ";
1742         display: table-cell;
1743         padding: 10px 10px 9px;
1744         line-height: 18px;
1745         font-weight: bold;
1746 }
1747
1748 .cbi-section-table-row[data-title]::before {
1749         border-top: 1px solid #ddd;
1750 }
1751
1752 .left { text-align: left !important; }
1753
1754 .right { text-align: right !important; }
1755
1756 .center { text-align: center !important; }
1757
1758 .cbi-value-field { line-height: 1.5em; }
1759
1760 .cbi-value-field input[type=checkbox],
1761 .cbi-value-field input[type=radio] {
1762         margin-top: 8px;
1763         margin-right: 6px;
1764 }
1765
1766 table table td,
1767 .cbi-value-field table td {
1768         border: none;
1769 }
1770
1771 .table.cbi-section-table input,
1772 .table.cbi-section-table textarea,
1773 .table.cbi-section-table select {
1774         width: auto;
1775 }
1776
1777 .table.cbi-section-table .td.cbi-section-table-cell {
1778         white-space: nowrap;
1779         text-align: right;
1780 }
1781
1782 .table.cbi-section-table .td.cbi-section-table-cell select {
1783         width: inherit;
1784 }
1785
1786 .table.valign-middle .td {
1787         vertical-align: middle;
1788 }
1789
1790 .cbi-value-description {
1791         background-image: url(/luci-static/resources/cbi/help.gif);
1792         background-position: .25em .2em;
1793         background-repeat: no-repeat;
1794         margin: .25em 0 0 0;
1795         padding: 0 0 0 1.7em;
1796 }
1797
1798 .cbi-section-error {
1799         border: 1px solid #FF0000;
1800         border-radius: 3px;
1801         background-color: #FCE6E6;
1802         padding: 5px;
1803 }
1804
1805 .cbi-section-error ul { margin: 0 0 0 20px; }
1806
1807 .cbi-section-error ul li {
1808         color: #FF0000;
1809         font-weight: bold;
1810 }
1811
1812 .ifacebox {
1813         background-color: #FFFFFF;
1814         border: 1px solid #CCCCCC;
1815         margin: 0 10px;
1816         text-align: center;
1817         white-space: nowrap;
1818         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1819         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1820         border-radius: 4px;
1821         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1822         display: inline-flex;
1823         flex-direction: column;
1824         line-height: 1.2em;
1825         min-width: 100px;
1826 }
1827
1828 .ifacebox .ifacebox-head {
1829         border-bottom: 1px solid #CCCCCC;
1830         padding: 2px;
1831         background: #eee;
1832 }
1833
1834 .ifacebox .ifacebox-head.active {
1835         background: #90c0e0;
1836 }
1837
1838 .ifacebox .ifacebox-body {
1839         padding: 6px;
1840 }
1841
1842 .ifacebadge {
1843         display: inline-flex;
1844         flex-direction: row;
1845         white-space: nowrap;
1846         background-color: #FFFFFF;
1847         border: 1px solid #CCCCCC;
1848         padding: 2px;
1849         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1850         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1851         border-radius: 4px;
1852         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1853         cursor: default;
1854         line-height: 1.2em;
1855 }
1856
1857 .ifacebadge img {
1858         width: 16px;
1859         height: 16px;
1860         vertical-align: middle;
1861         margin-right: .25em;
1862 }
1863
1864 .ifacebadge-active {
1865         border-color: #000000;
1866         font-weight: bold;
1867 }
1868
1869 .network-status-table {
1870         display: flex;
1871         flex-wrap: wrap;
1872 }
1873
1874 .network-status-table .ifacebox {
1875         margin: .5em;
1876         flex-grow: 1;
1877 }
1878
1879 .network-status-table .ifacebox-body {
1880         display: flex;
1881         flex-direction: column;
1882         height: 100%;
1883         text-align: left;
1884 }
1885
1886 .network-status-table .ifacebox-body > span {
1887         flex: 10;
1888 }
1889
1890 .network-status-table .ifacebox-body > div {
1891         display: flex;
1892         flex-wrap: wrap;
1893 }
1894
1895 .ifacebadge.large,
1896 .network-status-table .ifacebox-body .ifacebadge {
1897         flex: 1;
1898         margin: .5em .25em 0 .25em;
1899         padding: .5em;
1900         min-width: 220px;
1901 }
1902
1903 .zonebadge {
1904         padding: 2px;
1905         border-radius: 4px;
1906         display: inline-block;
1907         white-space: nowrap;
1908         color: #666666;
1909         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1910 }
1911
1912 .zonebadge > em,
1913 .zonebadge > strong {
1914         margin: 0 2px;
1915         display: inline-block;
1916 }
1917
1918 .zonebadge input {
1919         width: 6em;
1920 }
1921
1922 .zonebadge > .ifacebadge {
1923         margin-left: 2px;
1924 }
1925
1926 .zonebadge-empty {
1927         border: 1px dashed #AAAAAA;
1928         color: #AAAAAA;
1929         font-style: italic;
1930         font-size: smaller;
1931 }
1932
1933 div.cbi-value var,
1934 .td.cbi-value-field var {
1935         font-style: italic;
1936         color: #0069D6;
1937 }
1938
1939 .uci-change-list {
1940         font-family: monospace;
1941 }
1942
1943 .uci-change-list ins,
1944 .uci-change-legend-label ins {
1945         text-decoration: none;
1946         border: 1px solid #00FF00;
1947         background-color: #CCFFCC;
1948         display: block;
1949         padding: 2px;
1950 }
1951
1952 .uci-change-list del,
1953 .uci-change-legend-label del {
1954         text-decoration: none;
1955         border: 1px solid #FF0000;
1956         background-color: #FFCCCC;
1957         display: block;
1958         font-style: normal;
1959         padding: 2px;
1960 }
1961
1962 .uci-change-list var,
1963 .uci-change-legend-label var {
1964         text-decoration: none;
1965         border: 1px solid #CCCCCC;
1966         background-color: #EEEEEE;
1967         display: block;
1968         font-style: normal;
1969         padding: 2px;
1970         line-height: 19px;
1971         white-space: pre;
1972 }
1973
1974 .uci-change-list var ins,
1975 .uci-change-list var del {
1976         display: inline;
1977         /*border: none;*/
1978         white-space: pre;
1979         font-style: normal;
1980         padding: 0px;
1981 }
1982
1983 .uci-change-legend {
1984         padding: 5px;
1985 }
1986
1987 .uci-change-legend-label {
1988         width: 150px;
1989         float: left;
1990 }
1991
1992 .uci-change-legend-label > ins,
1993 .uci-change-legend-label > del,
1994 .uci-change-legend-label > var {
1995         float: left;
1996         margin-right: 4px;
1997         width: 10px;
1998         height: 10px;
1999         display: block;
2000 }
2001
2002 .uci-change-legend-label var ins,
2003 .uci-change-legend-label var del {
2004         line-height: 6px;
2005         border: none;
2006 }
2007
2008 html body.apply-overlay-active {
2009         height: calc(100vh - 63px);
2010 }