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