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

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