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