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         color: #fff;
1173 }
1174
1175 .btn .close, .alert-message .close {
1176         font-family: Arial, sans-serif;
1177         line-height: 18px;
1178 }
1179
1180 .btn.danger,
1181 .alert-message.danger,
1182 .btn.error,
1183 .alert-message.error {
1184         background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1185         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1186         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1187 }
1188
1189 .btn.success, .alert-message.success {
1190         background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1191         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1192         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1193 }
1194
1195 .btn.info, .alert-message.info {
1196         background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1197         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1198         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1199 }
1200
1201 .alert-message.notice {
1202         background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1203         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1204         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1205 }
1206
1207 .btn,
1208 .cbi-button {
1209         cursor: pointer;
1210         display: inline-block;
1211         background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1212         padding: 5px 14px 6px;
1213         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1214         color: #333;
1215         font-size: 13px;
1216         line-height: normal;
1217         border: 1px solid #ccc;
1218         border-bottom-color: #bbb;
1219         border-radius: 4px;
1220         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1221 }
1222
1223 .btn:focus,
1224 .cbi-button:focus {
1225         outline: 1px dotted #666;
1226 }
1227
1228 .cbi-input-invalid,
1229 .cbi-value-error input {
1230         color: #f00;
1231         border-color: #f00;
1232 }
1233
1234 .cbi-button-positive,
1235 .cbi-button-fieldadd,
1236 .cbi-button-add,
1237 .cbi-button-save {
1238         border-color: #4a4;
1239         color: #4a4;
1240 }
1241
1242 .cbi-button-neutral,
1243 .cbi-button-download,
1244 .cbi-button-find,
1245 .cbi-button-link,
1246 .cbi-button-up,
1247 .cbi-button-down {
1248         color: #444;
1249 }
1250
1251 .btn.primary,
1252 .cbi-button-action,
1253 .cbi-button-apply,
1254 .cbi-button-reload,
1255 .cbi-button-edit {
1256         border-color: #0069d6;
1257         color: #0069d6;
1258 }
1259
1260 .cbi-button-negative,
1261 .cbi-section-remove .cbi-button,
1262 .cbi-button-reset,
1263 .cbi-button-remove {
1264         border-color: #c44;
1265         color: #c44;
1266 }
1267
1268 .cbi-page-actions::after {
1269         display: table;
1270         content: "";
1271         clear: both;
1272 }
1273
1274 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1275         float: left;
1276         margin-right: .4em;
1277 }
1278
1279 .btn.primary,
1280 .cbi-button-action.important,
1281 .cbi-page-actions .cbi-button-apply,
1282 .cbi-section-actions .cbi-button-edit {
1283         color: #fff;
1284         background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1285         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1286 }
1287
1288 .cbi-button-positive.important,
1289 .cbi-page-actions .cbi-button-save {
1290         color: #fff;
1291         background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1292         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1293 }
1294
1295 .cbi-button-negative.important {
1296         color: #fff;
1297         background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1298         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1299 }
1300
1301 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1302         background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1303         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1304         color: #4a4;
1305 }
1306
1307 .cbi-dropdown {
1308         border: 1px solid #ccc;
1309         border-radius: 3px;
1310         display: inline-flex;
1311         padding: 0;
1312         cursor: pointer;
1313         height: auto;
1314         background: linear-gradient(#fff 0%, #e9e8e6 100%);
1315         position: relative;
1316         color: #404040;
1317 }
1318
1319 .cbi-dropdown:focus {
1320         outline: 2px solid #4b6e9b;
1321 }
1322
1323 .cbi-dropdown > ul {
1324         margin: 0 !important;
1325         padding: 0;
1326         list-style: none;
1327         overflow-x: hidden;
1328         overflow-y: auto;
1329         display: flex;
1330         width: 100%;
1331 }
1332
1333 .cbi-dropdown > ul.preview {
1334         display: none;
1335 }
1336
1337 .cbi-dropdown > .open,
1338 .cbi-dropdown > .more {
1339         flex-grow: 0;
1340         flex-shrink: 0;
1341         display: flex;
1342         flex-direction: column;
1343         justify-content: center;
1344         text-align: center;
1345         line-height: 2em;
1346         padding: 0 .25em;
1347 }
1348
1349 .cbi-dropdown > .more,
1350 .cbi-dropdown > ul > li[placeholder] {
1351         color: #777;
1352         font-weight: bold;
1353         text-shadow: 1px 1px 0px #fff;
1354         display: none;
1355 }
1356
1357 .cbi-dropdown > ul > li {
1358         display: none;
1359         padding: .25em;
1360         white-space: nowrap;
1361         overflow: hidden;
1362         text-overflow: ellipsis;
1363         flex-shrink: 1;
1364         flex-grow: 1;
1365         align-items: center;
1366         align-self: center;
1367         color: #404040;
1368         min-height: 20px;
1369 }
1370
1371 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1372 .cbi-dropdown > ul > li .hide-close { display: none; }
1373
1374 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1375         border-left: 1px solid #ccc;
1376 }
1377
1378 .cbi-dropdown[empty] > ul {
1379         max-width: 1px;
1380 }
1381
1382 .cbi-dropdown > ul > li > form {
1383         display: none;
1384         margin: 0;
1385         padding: 0;
1386         pointer-events: none;
1387 }
1388
1389 .cbi-dropdown > ul > li img {
1390         vertical-align: middle;
1391         margin-right: .25em;
1392 }
1393
1394 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1395         margin: 0;
1396 }
1397
1398 .cbi-dropdown > ul > li input[type="text"] {
1399         height: 20px;
1400 }
1401
1402 .cbi-dropdown[open] {
1403         position: relative;
1404 }
1405
1406 .cbi-dropdown[open] > ul.dropdown {
1407         display: block;
1408         background: #f6f6f5;
1409         border: 1px solid #918e8c;
1410         box-shadow: 0 0 4px #918e8c;
1411         position: absolute;
1412         z-index: 1000;
1413         max-width: none;
1414         min-width: 100%;
1415         width: auto;
1416 }
1417
1418 .cbi-dropdown > ul > li[display],
1419 .cbi-dropdown[open] > ul.preview,
1420 .cbi-dropdown[open] > ul.dropdown > li,
1421 .cbi-dropdown[multiple] > ul > li > label,
1422 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1423 .cbi-dropdown[multiple][more] > .more,
1424 .cbi-dropdown[multiple][empty] > .more {
1425         flex-grow: 1;
1426         display: flex;
1427 }
1428
1429 .cbi-dropdown[empty] > ul > li,
1430 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1431 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1432         display: block;
1433 }
1434
1435 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1436 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1437
1438 .cbi-dropdown[open] > ul.dropdown > li {
1439         border-bottom: 1px solid #ccc;
1440 }
1441
1442 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1443         background: #b0d0f0;
1444 }
1445
1446 .cbi-dropdown[open] > ul.dropdown > li.focus {
1447         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1448 }
1449
1450 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1451         margin-bottom: 0;
1452         border-bottom: none;
1453 }
1454
1455 .cbi-dropdown[disabled] {
1456         pointer-events: none;
1457         opacity: .6;
1458 }
1459
1460 input[type="text"] + .cbi-button,
1461 input[type="password"] + .cbi-button,
1462 select + .cbi-button {
1463         border-radius: 0 3px 3px 0;
1464         border-color: #ccc;
1465         margin: 0 0 1px -2px;
1466         padding: 0 6px;
1467         vertical-align: top;
1468         height: 28px;
1469         font-size: 14px;
1470         font-weight: bold;
1471         line-height: 28px;
1472 }
1473
1474 select + .cbi-button {
1475         border-left-color: transparent;
1476 }
1477
1478 .cbi-title-ref {
1479         color: #37c;
1480 }
1481
1482 .cbi-title-ref::after {
1483         content: "➙";
1484 }
1485
1486 .cbi-tooltip-container {
1487         cursor: help;
1488 }
1489
1490 .cbi-tooltip {
1491         position: absolute;
1492         z-index: 1000;
1493         left: -1000px;
1494         opacity: 0;
1495         transition: opacity .25s ease-out;
1496 }
1497
1498 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1499         left: auto;
1500         opacity: 1;
1501         transition: opacity .25s ease-in;
1502 }
1503
1504 .zonebadge .cbi-tooltip {
1505         padding: 1px;
1506         background: inherit;
1507         margin: -1.6em 0 0 -5px;
1508         border-radius: 3px;
1509         pointer-events: none;
1510         box-shadow: 0 0 3px #444;
1511 }
1512
1513 .zonebadge .cbi-tooltip > * {
1514         margin: 1px;
1515 }
1516
1517 .zone-forwards {
1518         display: flex;
1519         flex-wrap: wrap;
1520 }
1521
1522 .zone-forwards > * {
1523         flex: 1 1 40%;
1524         padding: 1px;
1525 }
1526
1527 .zone-forwards > span {
1528         flex-basis: 10%;
1529         text-align: center;
1530 }
1531
1532 .zone-forwards .zone-src,
1533 .zone-forwards .zone-dest {
1534         display: flex;
1535         flex-direction: column;
1536 }
1537
1538 .btn.active, .btn:active {
1539         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1540 }
1541
1542 .btn.disabled {
1543         cursor: default;
1544         background-image: none;
1545         opacity: 0.65;
1546         box-shadow: none;
1547 }
1548
1549 .btn[disabled] {
1550         cursor: default;
1551         background-image: none;
1552         opacity: 0.65;
1553         box-shadow: none;
1554 }
1555
1556 .btn.large {
1557         font-size: 15px;
1558         line-height: normal;
1559         padding: 9px 14px 9px;
1560         border-radius: 6px;
1561 }
1562
1563 .btn.small {
1564         padding: 7px 9px 7px;
1565         font-size: 11px;
1566 }
1567
1568 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1569         padding: 0;
1570         border: 0;
1571 }
1572
1573 .close {
1574         float: right;
1575         color: #000;
1576         font-size: 20px;
1577         font-weight: bold;
1578         line-height: 13.5px;
1579         text-shadow: 0 1px 0 #fff;
1580         opacity: 0.25;
1581 }
1582
1583 .close:hover {
1584         color: #000;
1585         text-decoration: none;
1586         opacity: 0.4;
1587 }
1588
1589 .alert-message {
1590         position: relative;
1591         padding: 7px 15px;
1592         margin-bottom: 18px;
1593         color: #404040;
1594         background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1595         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1596         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1597         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1598         border-width: 1px;
1599         border-style: solid;
1600         border-radius: 4px;
1601         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1602 }
1603
1604 .alert-message .close {
1605         margin-top: 1px;
1606         *margin-top: 0;
1607 }
1608
1609 .alert-message a {
1610         font-weight: bold;
1611         color: #404040;
1612 }
1613
1614 .alert-message.danger p a,
1615 .alert-message.error p a,
1616 .alert-message.success p a,
1617 .alert-message.info p a {
1618         color: #fff;
1619 }
1620
1621 .alert-message h5 {
1622         line-height: 18px;
1623 }
1624
1625 .alert-message p {
1626         margin-bottom: 0;
1627 }
1628
1629 .alert-message div {
1630         margin-top: 5px;
1631         margin-bottom: 2px;
1632         line-height: 28px;
1633 }
1634
1635 .label {
1636         padding: 1px 3px 2px;
1637         font-size: 9.75px;
1638         font-weight: bold;
1639         color: #fff !important;
1640         text-transform: uppercase;
1641         white-space: nowrap;
1642         background-color: #bfbfbf;
1643         border-radius: 3px;
1644         text-shadow: none;
1645 }
1646
1647 a.label:link,
1648 a.label:visited {
1649         color: #fff;
1650 }
1651
1652 a.label:hover {
1653         text-decoration: none;
1654 }
1655
1656 .label.important {
1657         background-color: #c43c35;
1658 }
1659
1660 .label.warning {
1661         background-color: #f89406;
1662 }
1663
1664 .label.success {
1665         background-color: #46a546;
1666 }
1667
1668 .label.notice {
1669         background-color: #62cffc;
1670 }
1671
1672 /* LuCI specific items */
1673 .hidden { display: none }
1674
1675 #memtotal > div,
1676 #memfree > div,
1677 #memcache > div,
1678 #membuff > div,
1679 #conns > div  {
1680           border: 1px solid #ccc;
1681           border-radius: 3px 3px 3px 3px;
1682           color: #808080;
1683           display: inline-block;
1684           font-size: 13px;
1685           line-height: 18px;
1686 }
1687
1688 #xhr_poll_status {
1689           cursor: pointer;
1690 }
1691
1692 form.inline { display: inline; margin-bottom: 0; }
1693
1694 header .pull-right { padding-top: 8px; }
1695
1696 #modemenu li:last-child span.divider { display: none }
1697
1698 #syslog {  width: 100%; }
1699
1700 .cbi-section-table .tr:hover .td,
1701 .cbi-section-table .tr:hover .th,
1702 .cbi-section-table .tr:hover::before {
1703         background-color: #f5f5f5;
1704 }
1705
1706 .cbi-section-table .tr.cbi-section-table-descr .th {
1707         font-weight: normal;
1708 }
1709
1710 .cbi-section-table-titles.named::before,
1711 .cbi-section-table-descr.named::before,
1712 .cbi-section-table-row[data-title]::before {
1713         content: attr(data-title) " ";
1714         display: table-cell;
1715         padding: 10px 10px 9px;
1716         line-height: 18px;
1717         font-weight: bold;
1718         vertical-align: middle;
1719 }
1720
1721 .cbi-section-table-titles.named::before,
1722 .cbi-section-table-descr.named::before,
1723 .cbi-section-table-row[data-title]::before {
1724         border-top: 1px solid #ddd;
1725 }
1726
1727 .left { text-align: left !important; }
1728 .right { text-align: right !important; }
1729 .center { text-align: center !important; }
1730 .top { vertical-align: top !important; }
1731 .middle { vertical-align: middle !important; }
1732 .bottom { vertical-align: bottom !important; }
1733
1734 .cbi-value-field { line-height: 1.5em; }
1735
1736 .cbi-value-field input[type=checkbox],
1737 .cbi-value-field input[type=radio] {
1738         margin-top: 8px;
1739         margin-right: 6px;
1740 }
1741
1742 table table td,
1743 .cbi-value-field table td {
1744         border: none;
1745 }
1746
1747 .table.cbi-section-table input[type="password"],
1748 .table.cbi-section-table input[type="text"],
1749 .table.cbi-section-table textarea,
1750 .table.cbi-section-table select {
1751         width: 100%;
1752 }
1753
1754 .table.cbi-section-table .td.cbi-section-table-cell {
1755         white-space: nowrap;
1756         text-align: right;
1757 }
1758
1759 .table.cbi-section-table .td.cbi-section-table-cell select {
1760         width: inherit;
1761 }
1762
1763 .td.cbi-section-actions {
1764         text-align: right;
1765         vertical-align: middle;
1766 }
1767
1768 .td.cbi-section-actions > * {
1769         display: flex;
1770 }
1771
1772 .td.cbi-section-actions > * > *,
1773 .td.cbi-section-actions > * > form > * {
1774         flex: 1 1 4em;
1775         margin: 0 1px;
1776 }
1777
1778 .td.cbi-section-actions > * > form {
1779         display: inline-flex;
1780         margin: 0;
1781 }
1782
1783 .table.valign-middle .td {
1784         vertical-align: middle;
1785 }
1786
1787 .cbi-rowstyle-2,
1788 .tr.table-titles,
1789 .tr.cbi-section-table-titles {
1790         background: #f9f9f9;
1791 }
1792
1793 .cbi-value-description {
1794         background-image: url(/luci-static/resources/cbi/help.gif);
1795         background-position: .25em .2em;
1796         background-repeat: no-repeat;
1797         margin: .25em 0 0 0;
1798         padding: 0 0 0 1.7em;
1799 }
1800
1801 .cbi-section-error {
1802         border: 1px solid #f00;
1803         border-radius: 3px;
1804         background-color: #fce6e6;
1805         padding: 5px;
1806         margin-bottom: 18px;
1807 }
1808
1809 .cbi-section-error ul { margin: 0 0 0 20px; }
1810
1811 .cbi-section-error ul li {
1812         color: #f00;
1813         font-weight: bold;
1814 }
1815
1816 .ifacebox {
1817         background-color: #fff;
1818         border: 1px solid #ccc;
1819         margin: 0 10px;
1820         text-align: center;
1821         white-space: nowrap;
1822         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1823         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1824         border-radius: 4px;
1825         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1826         display: inline-flex;
1827         flex-direction: column;
1828         line-height: 1.2em;
1829         min-width: 100px;
1830 }
1831
1832 .ifacebox .ifacebox-head {
1833         border-bottom: 1px solid #ccc;
1834         padding: 2px;
1835         background: #eee;
1836 }
1837
1838 .ifacebox .ifacebox-head.active {
1839         background: #90c0e0;
1840 }
1841
1842 .ifacebox .ifacebox-body {
1843         padding: .25em;
1844 }
1845
1846 .ifacebadge {
1847         display: inline-block;
1848         flex-direction: row;
1849         white-space: nowrap;
1850         background-color: #fff;
1851         border: 1px solid #ccc;
1852         padding: 2px;
1853         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1854         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1855         border-radius: 4px;
1856         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1857         cursor: default;
1858         line-height: 1.2em;
1859 }
1860
1861 .ifacebadge img {
1862         width: 16px;
1863         height: 16px;
1864         vertical-align: middle;
1865 }
1866
1867 .ifacebadge-active {
1868         border-color: #000;
1869         font-weight: bold;
1870 }
1871
1872 .network-status-table {
1873         display: flex;
1874         flex-wrap: wrap;
1875 }
1876
1877 .network-status-table .ifacebox {
1878         margin: .5em;
1879         flex-grow: 1;
1880 }
1881
1882 .network-status-table .ifacebox-body {
1883         display: flex;
1884         flex-direction: column;
1885         height: 100%;
1886         text-align: left;
1887 }
1888
1889 .network-status-table .ifacebox-body > * {
1890         margin: .25em;
1891 }
1892
1893 .network-status-table .ifacebox-body > span {
1894         flex: 10 10 auto;
1895 }
1896
1897 .network-status-table .ifacebox-body > div {
1898         display: flex;
1899         flex-wrap: wrap;
1900         margin: -.125em;
1901 }
1902
1903 #dsl_status_table .ifacebox-body > span > strong {
1904         display: inline-block;
1905         min-width: 35%;
1906 }
1907
1908 .ifacebadge.large,
1909 .network-status-table .ifacebox-body .ifacebadge {
1910         display: inline-flex;
1911         flex: 1;
1912         padding: .25em;
1913         min-width: 220px;
1914         margin: .125em;
1915 }
1916
1917 .ifacebadge > *,
1918 .ifacebadge.large > * {
1919         margin: 0 .125em;
1920 }
1921
1922 .zonebadge {
1923         padding: 2px;
1924         border-radius: 4px;
1925         display: inline-block;
1926         white-space: nowrap;
1927         color: #666;
1928         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1929 }
1930
1931 .zonebadge > em,
1932 .zonebadge > strong {
1933         margin: 0 2px;
1934         display: inline-block;
1935 }
1936
1937 .zonebadge input {
1938         width: 6em;
1939 }
1940
1941 .zonebadge > .ifacebadge {
1942         margin-left: 2px;
1943 }
1944
1945 .zonebadge-empty {
1946         border: 1px dashed #aaa;
1947         color: #aaa;
1948         font-style: italic;
1949         font-size: smaller;
1950 }
1951
1952 div.cbi-value var,
1953 .td.cbi-value-field var {
1954         font-style: italic;
1955         color: #0069d6;
1956 }
1957
1958 .uci-change-list {
1959         line-height: 170%;
1960         white-space: pre;
1961 }
1962
1963 .uci-change-list del,
1964 .uci-change-list ins,
1965 .uci-change-list var,
1966 .uci-change-legend-label del,
1967 .uci-change-legend-label ins,
1968 .uci-change-legend-label var {
1969         text-decoration: none;
1970         font-family: monospace;
1971         font-style: normal;
1972         border: 1px solid #ccc;
1973         background: #eee;
1974         padding: 2px;
1975         display: block;
1976         line-height: 15px;
1977         margin-bottom: 1px;
1978 }
1979
1980 .uci-change-list ins,
1981 .uci-change-legend-label ins {
1982         border-color: #0f0;
1983         background: #cfc;
1984 }
1985
1986 .uci-change-list del,
1987 .uci-change-legend-label del {
1988         border-color: #f00;
1989         background: #fcc;
1990 }
1991
1992 .uci-change-list var,
1993 .uci-change-legend-label var {
1994         border-color: #ccc;
1995         background: #eee;
1996 }
1997
1998 .uci-change-list var ins,
1999 .uci-change-list var del {
2000         display: inline-block;
2001         border: none;
2002         width: 100%;
2003         padding: 0;
2004 }
2005
2006 .uci-change-legend {
2007         padding: 5px;
2008 }
2009
2010 .uci-change-legend-label {
2011         width: 150px;
2012         float: left;
2013 }
2014
2015 .uci-change-legend-label > ins,
2016 .uci-change-legend-label > del,
2017 .uci-change-legend-label > var {
2018         float: left;
2019         margin-right: 4px;
2020         width: 10px;
2021         height: 10px;
2022         display: block;
2023         position: relative;
2024 }
2025
2026 .uci-change-legend-label var ins,
2027 .uci-change-legend-label var del {
2028         border: none;
2029         position: absolute;
2030         top: 2px;
2031         left: 2px;
2032         right: 2px;
2033         bottom: 2px;
2034 }
2035
2036 html body.apply-overlay-active {
2037         height: calc(100vh - 63px);
2038 }
2039
2040 #applyreboot-section {
2041         line-height: 300%;
2042 }