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

   1 /*!
   2  * LuCI Bootstrap Theme
   3  * Copyright 2012 Nut & Bolt
   4  * By David Menting <david@nut-bolt.nl>
   5  * Based on Bootstrap v1.4.0
   6  *
   7  * Copyright 2011 Twitter, Inc
   8  * Licensed under the Apache License v2.0
   9  * http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  12  */
  13 /* Reset.less
  14  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here       that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
  15  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  16 html {
  17         margin: 0;
  18         padding: 0;
  19 }
  20
  21 body {
  22         margin: 0;
  23         padding: 5px;
  24 }
  25
  26 h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, ins, q, s,
  27 small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
  28 form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,
  29 .table, .tbody, .tfoot, .thead, .tr, .th, .td {
  30         margin: 0;
  31         padding: 0;
  32         border: 0;
  33         font-weight: normal;
  34         font-style: normal;
  35         font-size: 100%;
  36         line-height: 1;
  37         font-family: inherit;
  38 }
  39
  40 abbr[title], acronym[title] {
  41         border-bottom: 1px dotted;
  42         font-weight: inherit;
  43         cursor: help;
  44 }
  45
  46 table {
  47         border-collapse: collapse;
  48         border-spacing: 0;
  49 }
  50
  51 ol, ul {
  52         list-style: none;
  53 }
  54
  55 q:before,
  56 q:after,
  57 blockquote:before,
  58 blockquote:after {
  59         content: "";
  60 }
  61
  62 html {
  63         overflow-y: scroll;
  64         font-size: 100%;
  65         -webkit-text-size-adjust: 100%;
  66         -ms-text-size-adjust: 100%;
  67 }
  68
  69 a:focus {
  70         outline: thin dotted;
  71 }
  72
  73 a:hover, a:active {
  74         outline: 0;
  75 }
  76
  77 article,
  78 aside,
  79 details,
  80 figcaption,
  81 figure,
  82 footer,
  83 header,
  84 hgroup,
  85 nav,
  86 section {
  87         display: block;
  88 }
  89
  90 sub, sup {
  91         font-size: 75%;
  92         line-height: 0;
  93         position: relative;
  94         vertical-align: baseline;
  95 }
  96
  97 sup {
  98         top: -0.5em;
  99 }
 100
 101 sub {
 102         bottom: -0.25em;
 103 }
 104
 105 img {
 106         border: 0;
 107         -ms-interpolation-mode: bicubic;
 108 }
 109
 110 button,
 111 input,
 112 select,
 113 option,
 114 textarea {
 115         font-size: 100%;
 116         margin: 0;
 117         box-sizing: border-box;
 118         vertical-align: baseline;
 119         *vertical-align: middle;
 120 }
 121
 122 button, input {
 123         line-height: normal;
 124         *overflow: visible;
 125 }
 126
 127 button::-moz-focus-inner, input::-moz-focus-inner {
 128         border: 0;
 129         padding: 0;
 130 }
 131
 132 button,
 133 input[type="button"],
 134 input[type="reset"],
 135 input[type="submit"] {
 136         cursor: pointer;
 137         -webkit-appearance: button;
 138 }
 139
 140 button[disabled],
 141 input[type="button"][disabled],
 142 input[type="reset"][disabled],
 143 input[type="submit"][disabled] {
 144         opacity: 0.7;
 145 }
 146
 147 input[type="search"] {
 148         -webkit-appearance: textfield;
 149         box-sizing: content-box;
 150 }
 151
 152 input[type="search"]::-webkit-search-decoration {
 153         -webkit-appearance: none;
 154 }
 155
 156 textarea {
 157         overflow: auto;
 158         vertical-align: top;
 159 }
 160
 161 /*
 162  * Scaffolding
 163  * Basic and global styles for generating a grid system, structural layout, and page templates
 164  * ------------------------------------------------------------------------------------------- */
 165 body {
 166         background-color: #fff;
 167         margin: 0;
 168         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 169         font-size: 13px;
 170         font-weight: normal;
 171         line-height: 18px;
 172         color: #404040;
 173         padding-top: 58px;
 174 }
 175
 176 .container {
 177         width: 100%;
 178         max-width: 940px;
 179         margin-left: auto;
 180         margin-right: auto;
 181         zoom: 1;
 182 }
 183
 184 .container:before, .container:after {
 185         display: table;
 186         content: "";
 187         zoom: 1;
 188 }
 189
 190 .container:after {
 191         clear: both;
 192 }
 193
 194 a {
 195         color: #0069d6;
 196         text-decoration: none;
 197         line-height: inherit;
 198         font-weight: inherit;
 199 }
 200
 201 a:hover {
 202         color: #00438a;
 203         text-decoration: underline;
 204 }
 205
 206 .pull-right {
 207         float: right;
 208 }
 209
 210 .pull-left {
 211         float: left;
 212 }
 213
 214 /* Typography.less
 215  * Headings, body text, lists, code, and more for a versatile and durable typography system
 216  * ---------------------------------------------------------------------------------------- */
 217 p,
 218 .cbi-map-descr,
 219 .cbi-section-descr,
 220 .table .tr.cbi-section-table-descr .th {
 221         font-size: 13px;
 222         font-weight: normal;
 223         line-height: 18px;
 224         margin-bottom: 9px;
 225 }
 226
 227 p small {
 228         font-size: 11px;
 229         color: #bfbfbf;
 230 }
 231
 232 h1,
 233 h2,
 234 h3, legend,
 235 h4,
 236 h5,
 237 h6 {
 238         font-weight: bold;
 239         color: #404040;
 240 }
 241
 242 h1 small,
 243 h2 small,
 244 h3 small,
 245 h4 small,
 246 h5 small,
 247 h6 small {
 248         color: #bfbfbf;
 249 }
 250
 251 h1 {
 252         margin-bottom: 18px;
 253         font-size: 30px;
 254         line-height: 36px;
 255 }
 256
 257 h1 small {
 258         font-size: 18px;
 259 }
 260
 261 h2 {
 262         font-size: 24px;
 263         line-height: 36px;
 264 }
 265
 266 h2 small {
 267         font-size: 14px;
 268 }
 269
 270 h3, legend,
 271 h4,
 272 h5,
 273 h6 {
 274         line-height: 36px;
 275 }
 276
 277 h3, legend {
 278         font-size: 18px;
 279 }
 280
 281 h3 small {
 282         font-size: 14px;
 283 }
 284
 285 h4 {
 286         font-size: 16px;
 287 }
 288
 289 h4 small {
 290         font-size: 12px;
 291 }
 292
 293 h5 {
 294         font-size: 14px;
 295 }
 296
 297 h6 {
 298         font-size: 13px;
 299         color: #bfbfbf;
 300         text-transform: uppercase;
 301 }
 302
 303 ul, ol {
 304         margin: 0 0 18px 25px;
 305 }
 306
 307 ul ul,
 308 ul ol,
 309 ol ol,
 310 ol ul {
 311         margin-bottom: 0;
 312 }
 313
 314 ul {
 315         list-style: disc;
 316 }
 317
 318 ol {
 319         list-style: decimal;
 320 }
 321
 322 li {
 323         line-height: 18px;
 324         color: #808080;
 325 }
 326
 327 ul.unstyled {
 328         list-style: none;
 329         margin-left: 0;
 330 }
 331
 332 dl {
 333         margin-bottom: 18px;
 334 }
 335
 336 dl dt, dl dd {
 337         line-height: 18px;
 338 }
 339
 340 dl dt {
 341         font-weight: bold;
 342 }
 343
 344 dl dd {
 345         margin-left: 9px;
 346 }
 347
 348 hr {
 349         margin: 20px 0 19px;
 350         border: 0;
 351         border-bottom: 1px solid #eee;
 352 }
 353
 354 strong {
 355         font-style: inherit;
 356         font-weight: bold;
 357 }
 358
 359 em {
 360         font-style: italic;
 361         font-weight: inherit;
 362         line-height: inherit;
 363 }
 364
 365 small { font-size: 0.9em }
 366
 367 address {
 368         display: block;
 369         line-height: 18px;
 370         margin-bottom: 18px;
 371 }
 372
 373 code, pre {
 374         padding: 0 3px 2px;
 375         font-family: Monaco, Andale Mono, Courier New, monospace;
 376         font-size: 12px;
 377         border-radius: 3px;
 378 }
 379
 380 code {
 381         background-color: #fee9cc;
 382         color: rgba(0, 0, 0, 0.75);
 383         padding: 1px 3px;
 384 }
 385
 386 pre {
 387         background-color: #f5f5f5;
 388         display: block;
 389         padding: 8.5px;
 390         margin: 0 0 18px;
 391         line-height: 18px;
 392         font-size: 12px;
 393         border: 1px solid #ccc;
 394         border: 1px solid rgba(0, 0, 0, 0.15);
 395         border-radius: 3px;
 396         white-space: pre;
 397         white-space: pre-wrap;
 398         word-wrap: break-word;
 399 }
 400
 401 /* Forms.less
 402  * Base styles for various input types, form layouts, and states
 403  * ------------------------------------------------------------- */
 404 form {
 405         margin-bottom: 18px;
 406 }
 407
 408 fieldset {
 409         margin-bottom: 9px;
 410         padding-top: 9px;
 411 }
 412
 413 fieldset legend {
 414         display: block;
 415         font-size: 19.5px;
 416         line-height: 1;
 417         color: #404040;
 418         padding-top: 20px;
 419         *padding: 0 0 5px 0px;
 420         /* IE6-7 */
 421
 422         *line-height: 1.5;
 423         /* IE6-7 */
 424
 425 }
 426 form .cbi-tab-descr {
 427         line-height: 18px;
 428         margin-bottom: 18px;
 429 }
 430
 431 form .clearfix,
 432 form .cbi-value {
 433         margin-bottom: 18px;
 434         zoom: 1;
 435 }
 436
 437 form .clearfix:before, form .clearfix:after,
 438 form .cbi-value:before, form .cbi-value:after  {
 439         display: table;
 440         content: "";
 441         zoom: 1;
 442 }
 443
 444 form .clearfix:after,
 445 form .cbi-value:after {
 446         clear: both;
 447 }
 448
 449 label,
 450 input,
 451 select,
 452 textarea {
 453         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 454         font-size: 13px;
 455         font-weight: normal;
 456         line-height: normal;
 457 }
 458
 459 form .input,
 460 form .cbi-value-field {
 461         margin-left: 200px;
 462 }
 463
 464 form .cbi-value label.cbi-value-title {
 465         padding-top: 6px;
 466         font-size: 13px;
 467         line-height: 18px;
 468         float: left;
 469         width: 180px;
 470         text-align: right;
 471         color: #404040;
 472 }
 473
 474 input[type=checkbox], input[type=radio] {
 475         cursor: pointer;
 476 }
 477
 478 input,
 479 textarea,
 480 select,
 481 .cbi-dropdown,
 482 .uneditable-input {
 483         display: inline-block;
 484         width: 210px;
 485         height: 30px;
 486         padding: 4px;
 487         font-size: 13px;
 488         line-height: 18px;
 489         color: #808080;
 490         border: 1px solid #ccc;
 491         border-radius: 3px;
 492         box-sizing: border-box;
 493 }
 494
 495 .cbi-dropdown {
 496         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 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1173         color: #fff;
1174 }
1175
1176 .btn .close, .alert-message .close {
1177         font-family: Arial, sans-serif;
1178         line-height: 18px;
1179 }
1180
1181 .btn.danger,
1182 .alert-message.danger,
1183 .btn.error,
1184 .alert-message.error,
1185 .cbi-tooltip.error {
1186         background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1187         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1188         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1189 }
1190
1191 .btn.success, .alert-message.success, .cbi-tooltip.success {
1192         background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1193         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1194         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1195 }
1196
1197 .btn.info, .alert-message.info, .cbi-tooltip.info {
1198         background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1199         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1200         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1201 }
1202
1203 .alert-message.notice, .cbi-tooltip.notice {
1204         background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1205         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1206         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1207 }
1208
1209 .btn,
1210 .cbi-button {
1211         cursor: pointer;
1212         display: inline-block;
1213         background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1214         padding: 5px 14px 6px;
1215         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1216         color: #333;
1217         font-size: 13px;
1218         line-height: normal;
1219         border: 1px solid #ccc;
1220         border-bottom-color: #bbb;
1221         border-radius: 4px;
1222         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1223 }
1224
1225 .btn:focus,
1226 .cbi-button:focus {
1227         outline: 1px dotted #666;
1228 }
1229
1230 .cbi-input-invalid,
1231 .cbi-value-error input {
1232         color: #f00;
1233         border-color: #f00;
1234 }
1235
1236 .cbi-button-positive,
1237 .cbi-button-fieldadd,
1238 .cbi-button-add,
1239 .cbi-button-save {
1240         border-color: #4a4;
1241         color: #4a4;
1242 }
1243
1244 .cbi-button-neutral,
1245 .cbi-button-download,
1246 .cbi-button-find,
1247 .cbi-button-link,
1248 .cbi-button-up,
1249 .cbi-button-down {
1250         color: #444;
1251 }
1252
1253 .btn.primary,
1254 .cbi-button-action,
1255 .cbi-button-apply,
1256 .cbi-button-reload,
1257 .cbi-button-edit {
1258         border-color: #0069d6;
1259         color: #0069d6;
1260 }
1261
1262 .cbi-button-negative,
1263 .cbi-section-remove .cbi-button,
1264 .cbi-button-reset,
1265 .cbi-button-remove {
1266         border-color: #c44;
1267         color: #c44;
1268 }
1269
1270 .cbi-page-actions::after {
1271         display: table;
1272         content: "";
1273         clear: both;
1274 }
1275
1276 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1277         float: left;
1278         margin-right: .4em;
1279 }
1280
1281 .btn.primary,
1282 .cbi-button-action.important,
1283 .cbi-page-actions .cbi-button-apply,
1284 .cbi-section-actions .cbi-button-edit {
1285         color: #fff;
1286         background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1287         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1288 }
1289
1290 .cbi-button-positive.important,
1291 .cbi-page-actions .cbi-button-save {
1292         color: #fff;
1293         background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1294         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1295 }
1296
1297 .cbi-button-negative.important {
1298         color: #fff;
1299         background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1300         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1301 }
1302
1303 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1304         background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1305         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1306         color: #4a4;
1307 }
1308
1309 .cbi-dropdown {
1310         border: 1px solid #ccc;
1311         border-radius: 3px;
1312         display: inline-flex;
1313         padding: 0;
1314         cursor: pointer;
1315         height: auto;
1316         background: linear-gradient(#fff 0%, #e9e8e6 100%);
1317         position: relative;
1318         color: #404040;
1319 }
1320
1321 .cbi-dropdown:focus {
1322         outline: 2px solid #4b6e9b;
1323 }
1324
1325 .cbi-dropdown > ul {
1326         margin: 0 !important;
1327         padding: 0;
1328         list-style: none;
1329         overflow-x: hidden;
1330         overflow-y: auto;
1331         display: flex;
1332         width: 100%;
1333 }
1334
1335 .cbi-dropdown > ul.preview {
1336         display: none;
1337 }
1338
1339 .cbi-dropdown > .open,
1340 .cbi-dropdown > .more {
1341         flex-grow: 0;
1342         flex-shrink: 0;
1343         display: flex;
1344         flex-direction: column;
1345         justify-content: center;
1346         text-align: center;
1347         line-height: 2em;
1348         padding: 0 .25em;
1349 }
1350
1351 .cbi-dropdown > .more,
1352 .cbi-dropdown > ul > li[placeholder] {
1353         color: #777;
1354         font-weight: bold;
1355         text-shadow: 1px 1px 0px #fff;
1356         display: none;
1357 }
1358
1359 .cbi-dropdown > ul > li {
1360         display: none;
1361         padding: .25em;
1362         white-space: nowrap;
1363         overflow: hidden;
1364         text-overflow: ellipsis;
1365         flex-shrink: 1;
1366         flex-grow: 1;
1367         align-items: center;
1368         align-self: center;
1369         color: #404040;
1370         min-height: 20px;
1371 }
1372
1373 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1374 .cbi-dropdown > ul > li .hide-close { display: none; }
1375
1376 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1377         border-left: 1px solid #ccc;
1378 }
1379
1380 .cbi-dropdown[empty] > ul {
1381         max-width: 1px;
1382 }
1383
1384 .cbi-dropdown > ul > li > form {
1385         display: none;
1386         margin: 0;
1387         padding: 0;
1388         pointer-events: none;
1389 }
1390
1391 .cbi-dropdown > ul > li img {
1392         vertical-align: middle;
1393         margin-right: .25em;
1394 }
1395
1396 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1397         margin: 0;
1398 }
1399
1400 .cbi-dropdown > ul > li input[type="text"] {
1401         height: 20px;
1402 }
1403
1404 .cbi-dropdown[open] {
1405         position: relative;
1406 }
1407
1408 .cbi-dropdown[open] > ul.dropdown {
1409         display: block;
1410         background: #f6f6f5;
1411         border: 1px solid #918e8c;
1412         box-shadow: 0 0 4px #918e8c;
1413         position: absolute;
1414         z-index: 1000;
1415         max-width: none;
1416         min-width: 100%;
1417         width: auto;
1418 }
1419
1420 .cbi-dropdown > ul > li[display],
1421 .cbi-dropdown[open] > ul.preview,
1422 .cbi-dropdown[open] > ul.dropdown > li,
1423 .cbi-dropdown[multiple] > ul > li > label,
1424 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1425 .cbi-dropdown[multiple][more] > .more,
1426 .cbi-dropdown[multiple][empty] > .more {
1427         flex-grow: 1;
1428         display: flex;
1429 }
1430
1431 .cbi-dropdown[empty] > ul > li,
1432 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1433 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1434         display: block;
1435 }
1436
1437 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1438 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1439
1440 .cbi-dropdown[open] > ul.dropdown > li {
1441         border-bottom: 1px solid #ccc;
1442 }
1443
1444 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1445         background: #b0d0f0;
1446 }
1447
1448 .cbi-dropdown[open] > ul.dropdown > li.focus {
1449         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1450 }
1451
1452 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1453         margin-bottom: 0;
1454         border-bottom: none;
1455 }
1456
1457 .cbi-dropdown[disabled] {
1458         pointer-events: none;
1459         opacity: .6;
1460 }
1461
1462 input[type="text"] + .cbi-button,
1463 input[type="password"] + .cbi-button,
1464 select + .cbi-button {
1465         border-radius: 0 3px 3px 0;
1466         border-color: #ccc;
1467         margin: 0 0 1px -2px;
1468         padding: 0 6px;
1469         vertical-align: top;
1470         height: 28px;
1471         font-size: 14px;
1472         font-weight: bold;
1473         line-height: 28px;
1474 }
1475
1476 select + .cbi-button {
1477         border-left-color: transparent;
1478 }
1479
1480 .cbi-title-ref {
1481         color: #37c;
1482 }
1483
1484 .cbi-title-ref::after {
1485         content: "➙";
1486 }
1487
1488 .cbi-tooltip-container {
1489         cursor: help;
1490 }
1491
1492 .cbi-tooltip {
1493         position: absolute;
1494         z-index: 1000;
1495         left: -1000px;
1496         box-shadow: 0 0 2px #ccc;
1497         border-radius: 3px;
1498         background: #fff;
1499         white-space: pre;
1500         padding: 2px 5px;
1501         opacity: 0;
1502         transition: opacity .25s ease-in;
1503 }
1504
1505 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1506         left: auto;
1507         opacity: 1;
1508         transition: opacity .25s ease-in;
1509 }
1510
1511 .zonebadge .cbi-tooltip {
1512         padding: 1px;
1513         background: inherit;
1514         margin: -1.6em 0 0 -5px;
1515         border-radius: 3px;
1516         pointer-events: none;
1517         box-shadow: 0 0 3px #444;
1518 }
1519
1520 .zonebadge .cbi-tooltip > * {
1521         margin: 1px;
1522 }
1523
1524 .zone-forwards {
1525         display: flex;
1526         flex-wrap: wrap;
1527 }
1528
1529 .zone-forwards > * {
1530         flex: 1 1 40%;
1531         padding: 1px;
1532 }
1533
1534 .zone-forwards > span {
1535         flex-basis: 10%;
1536         text-align: center;
1537 }
1538
1539 .zone-forwards .zone-src,
1540 .zone-forwards .zone-dest {
1541         display: flex;
1542         flex-direction: column;
1543 }
1544
1545 .btn.active, .btn:active {
1546         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1547 }
1548
1549 .btn.disabled {
1550         cursor: default;
1551         background-image: none;
1552         opacity: 0.65;
1553         box-shadow: none;
1554 }
1555
1556 .btn[disabled] {
1557         cursor: default;
1558         background-image: none;
1559         opacity: 0.65;
1560         box-shadow: none;
1561 }
1562
1563 .btn.large {
1564         font-size: 15px;
1565         line-height: normal;
1566         padding: 9px 14px 9px;
1567         border-radius: 6px;
1568 }
1569
1570 .btn.small {
1571         padding: 7px 9px 7px;
1572         font-size: 11px;
1573 }
1574
1575 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1576         padding: 0;
1577         border: 0;
1578 }
1579
1580 .close {
1581         float: right;
1582         color: #000;
1583         font-size: 20px;
1584         font-weight: bold;
1585         line-height: 13.5px;
1586         text-shadow: 0 1px 0 #fff;
1587         opacity: 0.25;
1588 }
1589
1590 .close:hover {
1591         color: #000;
1592         text-decoration: none;
1593         opacity: 0.4;
1594 }
1595
1596 .alert-message {
1597         position: relative;
1598         padding: 7px 15px;
1599         margin-bottom: 18px;
1600         color: #404040;
1601         background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1602         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1603         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1604         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1605         border-width: 1px;
1606         border-style: solid;
1607         border-radius: 4px;
1608         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1609 }
1610
1611 .alert-message .close {
1612         margin-top: 1px;
1613         *margin-top: 0;
1614 }
1615
1616 .alert-message a {
1617         font-weight: bold;
1618         color: #404040;
1619 }
1620
1621 .alert-message.danger p a,
1622 .alert-message.error p a,
1623 .alert-message.success p a,
1624 .alert-message.info p a {
1625         color: #fff;
1626 }
1627
1628 .alert-message h5 {
1629         line-height: 18px;
1630 }
1631
1632 .alert-message p {
1633         margin-bottom: 0;
1634 }
1635
1636 .alert-message div {
1637         margin-top: 5px;
1638         margin-bottom: 2px;
1639         line-height: 28px;
1640 }
1641
1642 .label {
1643         padding: 1px 3px 2px;
1644         font-size: 9.75px;
1645         font-weight: bold;
1646         color: #fff !important;
1647         text-transform: uppercase;
1648         white-space: nowrap;
1649         background-color: #bfbfbf;
1650         border-radius: 3px;
1651         text-shadow: none;
1652 }
1653
1654 a.label:link,
1655 a.label:visited {
1656         color: #fff;
1657 }
1658
1659 a.label:hover {
1660         text-decoration: none;
1661 }
1662
1663 .label.important {
1664         background-color: #c43c35;
1665 }
1666
1667 .label.warning {
1668         background-color: #f89406;
1669 }
1670
1671 .label.success {
1672         background-color: #46a546;
1673 }
1674
1675 .label.notice {
1676         background-color: #62cffc;
1677 }
1678
1679 /* LuCI specific items */
1680 .hidden { display: none }
1681
1682 #memtotal > div,
1683 #memfree > div,
1684 #memcache > div,
1685 #membuff > div,
1686 #conns > div  {
1687           border: 1px solid #ccc;
1688           border-radius: 3px 3px 3px 3px;
1689           color: #808080;
1690           display: inline-block;
1691           font-size: 13px;
1692           line-height: 18px;
1693 }
1694
1695 #xhr_poll_status {
1696           cursor: pointer;
1697 }
1698
1699 form.inline { display: inline; margin-bottom: 0; }
1700
1701 header .pull-right { padding-top: 8px; }
1702
1703 #modemenu li:last-child span.divider { display: none }
1704
1705 #syslog {  width: 100%; }
1706
1707 .cbi-section-table .tr:hover .td,
1708 .cbi-section-table .tr:hover .th,
1709 .cbi-section-table .tr:hover::before {
1710         background-color: #f5f5f5;
1711 }
1712
1713 .cbi-section-table .tr.cbi-section-table-descr .th {
1714         font-weight: normal;
1715 }
1716
1717 .cbi-section-table-titles.named::before,
1718 .cbi-section-table-descr.named::before,
1719 .cbi-section-table-row[data-title]::before {
1720         content: attr(data-title) " ";
1721         display: table-cell;
1722         padding: 10px 10px 9px;
1723         line-height: 18px;
1724         font-weight: bold;
1725         vertical-align: middle;
1726 }
1727
1728 .cbi-section-table-titles.named::before,
1729 .cbi-section-table-descr.named::before,
1730 .cbi-section-table-row[data-title]::before {
1731         border-top: 1px solid #ddd;
1732 }
1733
1734 .left { text-align: left !important; }
1735 .right { text-align: right !important; }
1736 .center { text-align: center !important; }
1737 .top { vertical-align: top !important; }
1738 .middle { vertical-align: middle !important; }
1739 .bottom { vertical-align: bottom !important; }
1740
1741 .cbi-value-field { line-height: 1.5em; }
1742
1743 .cbi-value-field input[type=checkbox],
1744 .cbi-value-field input[type=radio] {
1745         margin-top: 8px;
1746         margin-right: 6px;
1747 }
1748
1749 table table td,
1750 .cbi-value-field table td {
1751         border: none;
1752 }
1753
1754 .table.cbi-section-table input[type="password"],
1755 .table.cbi-section-table input[type="text"],
1756 .table.cbi-section-table textarea,
1757 .table.cbi-section-table select {
1758         width: 100%;
1759 }
1760
1761 .table.cbi-section-table .td.cbi-section-table-cell {
1762         white-space: nowrap;
1763         text-align: right;
1764 }
1765
1766 .table.cbi-section-table .td.cbi-section-table-cell select {
1767         width: inherit;
1768 }
1769
1770 .td.cbi-section-actions {
1771         text-align: right;
1772         vertical-align: middle;
1773 }
1774
1775 .td.cbi-section-actions > * {
1776         display: flex;
1777 }
1778
1779 .td.cbi-section-actions > * > *,
1780 .td.cbi-section-actions > * > form > * {
1781         flex: 1 1 4em;
1782         margin: 0 1px;
1783 }
1784
1785 .td.cbi-section-actions > * > form {
1786         display: inline-flex;
1787         margin: 0;
1788 }
1789
1790 .table.valign-middle .td {
1791         vertical-align: middle;
1792 }
1793
1794 .cbi-rowstyle-2,
1795 .tr.table-titles,
1796 .tr.cbi-section-table-titles {
1797         background: #f9f9f9;
1798 }
1799
1800 .cbi-value-description {
1801         background-image: url(/luci-static/resources/cbi/help.gif);
1802         background-position: .25em .2em;
1803         background-repeat: no-repeat;
1804         margin: .25em 0 0 0;
1805         padding: 0 0 0 1.7em;
1806 }
1807
1808 .cbi-section-error {
1809         border: 1px solid #f00;
1810         border-radius: 3px;
1811         background-color: #fce6e6;
1812         padding: 5px;
1813         margin-bottom: 18px;
1814 }
1815
1816 .cbi-section-error ul { margin: 0 0 0 20px; }
1817
1818 .cbi-section-error ul li {
1819         color: #f00;
1820         font-weight: bold;
1821 }
1822
1823 .ifacebox {
1824         background-color: #fff;
1825         border: 1px solid #ccc;
1826         margin: 0 10px;
1827         text-align: center;
1828         white-space: nowrap;
1829         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1830         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1831         border-radius: 4px;
1832         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1833         display: inline-flex;
1834         flex-direction: column;
1835         line-height: 1.2em;
1836         min-width: 100px;
1837 }
1838
1839 .ifacebox .ifacebox-head {
1840         border-bottom: 1px solid #ccc;
1841         padding: 2px;
1842         background: #eee;
1843 }
1844
1845 .ifacebox .ifacebox-head.active {
1846         background: #90c0e0;
1847 }
1848
1849 .ifacebox .ifacebox-body {
1850         padding: .25em;
1851 }
1852
1853 .ifacebadge {
1854         display: inline-block;
1855         flex-direction: row;
1856         white-space: nowrap;
1857         background-color: #fff;
1858         border: 1px solid #ccc;
1859         padding: 2px;
1860         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1861         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1862         border-radius: 4px;
1863         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1864         cursor: default;
1865         line-height: 1.2em;
1866 }
1867
1868 .ifacebadge img {
1869         width: 16px;
1870         height: 16px;
1871         vertical-align: middle;
1872 }
1873
1874 .ifacebadge-active {
1875         border-color: #000;
1876         font-weight: bold;
1877 }
1878
1879 .network-status-table {
1880         display: flex;
1881         flex-wrap: wrap;
1882 }
1883
1884 .network-status-table .ifacebox {
1885         margin: .5em;
1886         flex-grow: 1;
1887 }
1888
1889 .network-status-table .ifacebox-body {
1890         display: flex;
1891         flex-direction: column;
1892         height: 100%;
1893         text-align: left;
1894 }
1895
1896 .network-status-table .ifacebox-body > * {
1897         margin: .25em;
1898 }
1899
1900 .network-status-table .ifacebox-body > span {
1901         flex: 10 10 auto;
1902 }
1903
1904 .network-status-table .ifacebox-body > div {
1905         display: flex;
1906         flex-wrap: wrap;
1907         margin: -.125em;
1908 }
1909
1910 #dsl_status_table .ifacebox-body > span > strong {
1911         display: inline-block;
1912         min-width: 35%;
1913 }
1914
1915 .ifacebadge.large,
1916 .network-status-table .ifacebox-body .ifacebadge {
1917         display: inline-flex;
1918         flex: 1;
1919         padding: .25em;
1920         min-width: 220px;
1921         margin: .125em;
1922 }
1923
1924 .ifacebadge > *,
1925 .ifacebadge.large > * {
1926         margin: 0 .125em;
1927 }
1928
1929 .zonebadge {
1930         padding: 2px;
1931         border-radius: 4px;
1932         display: inline-block;
1933         white-space: nowrap;
1934         color: #666;
1935         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1936 }
1937
1938 .zonebadge > em,
1939 .zonebadge > strong {
1940         margin: 0 2px;
1941         display: inline-block;
1942 }
1943
1944 .zonebadge input {
1945         width: 6em;
1946 }
1947
1948 .zonebadge > .ifacebadge {
1949         margin-left: 2px;
1950 }
1951
1952 .zonebadge-empty {
1953         border: 1px dashed #aaa;
1954         color: #aaa;
1955         font-style: italic;
1956         font-size: smaller;
1957 }
1958
1959 div.cbi-value var,
1960 .td.cbi-value-field var {
1961         font-style: italic;
1962         color: #0069d6;
1963 }
1964
1965 .uci-change-list {
1966         line-height: 170%;
1967         white-space: pre;
1968 }
1969
1970 .uci-change-list del,
1971 .uci-change-list ins,
1972 .uci-change-list var,
1973 .uci-change-legend-label del,
1974 .uci-change-legend-label ins,
1975 .uci-change-legend-label var {
1976         text-decoration: none;
1977         font-family: monospace;
1978         font-style: normal;
1979         border: 1px solid #ccc;
1980         background: #eee;
1981         padding: 2px;
1982         display: block;
1983         line-height: 15px;
1984         margin-bottom: 1px;
1985 }
1986
1987 .uci-change-list ins,
1988 .uci-change-legend-label ins {
1989         border-color: #0f0;
1990         background: #cfc;
1991 }
1992
1993 .uci-change-list del,
1994 .uci-change-legend-label del {
1995         border-color: #f00;
1996         background: #fcc;
1997 }
1998
1999 .uci-change-list var,
2000 .uci-change-legend-label var {
2001         border-color: #ccc;
2002         background: #eee;
2003 }
2004
2005 .uci-change-list var ins,
2006 .uci-change-list var del {
2007         display: inline-block;
2008         border: none;
2009         width: 100%;
2010         padding: 0;
2011 }
2012
2013 .uci-change-legend {
2014         padding: 5px;
2015 }
2016
2017 .uci-change-legend-label {
2018         width: 150px;
2019         float: left;
2020 }
2021
2022 .uci-change-legend-label > ins,
2023 .uci-change-legend-label > del,
2024 .uci-change-legend-label > var {
2025         float: left;
2026         margin-right: 4px;
2027         width: 10px;
2028         height: 10px;
2029         display: block;
2030         position: relative;
2031 }
2032
2033 .uci-change-legend-label var ins,
2034 .uci-change-legend-label var del {
2035         border: none;
2036         position: absolute;
2037         top: 2px;
2038         left: 2px;
2039         right: 2px;
2040         bottom: 2px;
2041 }
2042
2043 html body.apply-overlay-active {
2044         height: calc(100vh - 63px);
2045 }
2046
2047 #applyreboot-section {
2048         line-height: 300%;
2049 }
2050
2051 [data-page="admin-network-dhcp"] [data-name="ip"] {
2052         width: 15%;
2053 }
2054
2055 @keyframes flash {
2056         0% { opacity: 1; }
2057         50% { opacity: .5; }
2058         100% { opacity: 1; }
2059 }
2060
2061 .flash {
2062         animation: flash .35s;
2063 }