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