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