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