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

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