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