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