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