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