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