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 }
1791
1792 header [data-indicator][data-clickable] {
1793         cursor: pointer;
1794 }
1795
1796 a.label:link,
1797 a.label:visited {
1798         color: #fff;
1799 }
1800
1801 a.label:hover {
1802         text-decoration: none;
1803 }
1804
1805 .label.important {
1806         background-color: #c43c35;
1807 }
1808
1809 .label.warning {
1810         background-color: #f89406;
1811 }
1812
1813 .label.success {
1814         background-color: #46a546;
1815 }
1816
1817 .label.notice,
1818 header [data-indicator][data-style="active"] {
1819         background-color: #62cffc;
1820 }
1821
1822 /* LuCI specific items */
1823 .hidden { display: none }
1824
1825 #xhr_poll_status {
1826           cursor: pointer;
1827 }
1828
1829 form.inline { display: inline; margin-bottom: 0; }
1830
1831 header .pull-right { padding-top: 8px; }
1832
1833 #modemenu li:last-child span.divider { display: none }
1834
1835 #syslog {  width: 100%; }
1836
1837 .cbi-section-table .tr:hover .td,
1838 .cbi-section-table .tr:hover .th,
1839 .cbi-section-table .tr:hover::before {
1840         background-color: #f5f5f5;
1841 }
1842
1843 .cbi-section-table .tr.cbi-section-table-descr .th {
1844         font-weight: normal;
1845 }
1846
1847 .cbi-section-table-titles.named::before,
1848 .cbi-section-table-descr.named::before,
1849 .cbi-section-table-row[data-title]::before {
1850         content: attr(data-title) " ";
1851         display: table-cell;
1852         padding: 10px 10px 9px;
1853         line-height: 18px;
1854         font-weight: bold;
1855         vertical-align: middle;
1856 }
1857
1858 .cbi-section-table-titles.named::before,
1859 .cbi-section-table-descr.named::before,
1860 .cbi-section-table-row[data-title]::before {
1861         border-top: 1px solid #ddd;
1862 }
1863
1864 .left { text-align: left !important; }
1865 .right { text-align: right !important; }
1866 .center { text-align: center !important; }
1867 .top { vertical-align: top !important; }
1868 .middle { vertical-align: middle !important; }
1869 .bottom { vertical-align: bottom !important; }
1870
1871 .cbi-value-field { line-height: 1.5em; }
1872
1873 .cbi-value-field input[type=checkbox],
1874 .cbi-value-field input[type=radio] {
1875         margin-top: 8px;
1876         margin-right: 6px;
1877 }
1878
1879 table table td,
1880 .cbi-value-field table td {
1881         border: none;
1882 }
1883
1884 .table.cbi-section-table input[type="password"],
1885 .table.cbi-section-table input[type="text"],
1886 .table.cbi-section-table textarea,
1887 .table.cbi-section-table select {
1888         width: 100%;
1889 }
1890
1891 .table.cbi-section-table .td.cbi-section-table-cell {
1892         white-space: nowrap;
1893         text-align: right;
1894 }
1895
1896 .table.cbi-section-table .td.cbi-section-table-cell select {
1897         width: inherit;
1898 }
1899
1900 .td.cbi-section-actions {
1901         text-align: right;
1902         vertical-align: middle;
1903 }
1904
1905 .td.cbi-section-actions > * {
1906         display: flex;
1907 }
1908
1909 .td.cbi-section-actions > * > *,
1910 .td.cbi-section-actions > * > form > * {
1911         flex: 1 1 4em;
1912         margin: 0 1px;
1913 }
1914
1915 .td.cbi-section-actions > * > form {
1916         display: inline-flex;
1917         margin: 0;
1918 }
1919
1920 .table.valign-middle .td {
1921         vertical-align: middle;
1922 }
1923
1924 .cbi-rowstyle-2,
1925 .tr.table-titles,
1926 .tr.cbi-section-table-titles {
1927         background: #f9f9f9;
1928 }
1929
1930 .cbi-value-description {
1931         background-image: url(/luci-static/resources/cbi/help.gif);
1932         background-position: .25em .2em;
1933         background-repeat: no-repeat;
1934         margin: .25em 0 0 0;
1935         padding: 0 0 0 1.7em;
1936 }
1937
1938 .cbi-section-error {
1939         border: 1px solid #f00;
1940         border-radius: 3px;
1941         background-color: #fce6e6;
1942         padding: 5px;
1943         margin-bottom: 18px;
1944 }
1945
1946 .cbi-section-error ul { margin: 0 0 0 20px; }
1947
1948 .cbi-section-error ul li {
1949         color: #f00;
1950         font-weight: bold;
1951 }
1952
1953 .ifacebox {
1954         background-color: #fff;
1955         border: 1px solid #ccc;
1956         margin: 0 10px;
1957         text-align: center;
1958         white-space: nowrap;
1959         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1960         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1961         border-radius: 4px;
1962         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1963         display: inline-flex;
1964         flex-direction: column;
1965         line-height: 1.2em;
1966         min-width: 100px;
1967 }
1968
1969 .ifacebox .ifacebox-head {
1970         border-bottom: 1px solid #ccc;
1971         padding: 2px;
1972         background: #eee;
1973 }
1974
1975 .ifacebox .ifacebox-head.active {
1976         background: #90c0e0;
1977 }
1978
1979 .ifacebox .ifacebox-body {
1980         padding: .25em;
1981 }
1982
1983 .ifacebadge {
1984         display: inline-block;
1985         flex-direction: row;
1986         white-space: nowrap;
1987         background-color: #fff;
1988         border: 1px solid #ccc;
1989         padding: 2px;
1990         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1991         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1992         border-radius: 4px;
1993         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1994         cursor: default;
1995         line-height: 1.2em;
1996 }
1997
1998 .ifacebadge img {
1999         width: 16px;
2000         height: 16px;
2001         vertical-align: middle;
2002 }
2003
2004 .ifacebadge-active {
2005         border-color: #000;
2006         font-weight: bold;
2007 }
2008
2009 .network-status-table {
2010         display: flex;
2011         flex-wrap: wrap;
2012 }
2013
2014 .network-status-table .ifacebox {
2015         margin: .5em;
2016         flex-grow: 1;
2017 }
2018
2019 .network-status-table .ifacebox-body {
2020         display: flex;
2021         flex-direction: column;
2022         height: 100%;
2023         text-align: left;
2024 }
2025
2026 .network-status-table .ifacebox-body > * {
2027         margin: .25em;
2028 }
2029
2030 .network-status-table .ifacebox-body > span {
2031         flex: 10 10 auto;
2032         height: 100%;
2033 }
2034
2035 .network-status-table .ifacebox-body > div {
2036         margin: -.125em;
2037         display: flex;
2038         flex-wrap: wrap;
2039 }
2040
2041 #dsl_status_table .ifacebox-body span > strong {
2042         display: inline-block;
2043         min-width: 35%;
2044 }
2045
2046 .ifacebadge.large,
2047 .network-status-table .ifacebox-body .ifacebadge {
2048         display: flex;
2049         flex: 1;
2050         padding: .25em;
2051         min-width: 220px;
2052         margin: .125em;
2053 }
2054
2055 .ifacebadge.large {
2056         display: inline-flex;
2057 }
2058
2059 .network-status-table .ifacebox-body .ifacebadge > span {
2060         overflow: hidden;
2061         text-overflow: ellipsis;
2062 }
2063
2064 .ifacebadge > *,
2065 .ifacebadge.large > * {
2066         margin: 0 .125em;
2067 }
2068
2069 .zonebadge {
2070         padding: 2px;
2071         border-radius: 4px;
2072         display: inline-block;
2073         white-space: nowrap;
2074         color: #666;
2075         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2076 }
2077
2078 .zonebadge > em,
2079 .zonebadge > strong {
2080         margin: 0 2px;
2081         display: inline-block;
2082 }
2083
2084 .zonebadge input {
2085         width: 6em;
2086 }
2087
2088 .zonebadge > .ifacebadge {
2089         margin-left: 2px;
2090 }
2091
2092 .zonebadge-empty {
2093         border: 1px dashed #aaa;
2094         color: #aaa;
2095         font-style: italic;
2096         font-size: smaller;
2097 }
2098
2099 div.cbi-value var,
2100 .td.cbi-value-field var {
2101         font-style: italic;
2102         color: #0069d6;
2103 }
2104
2105 div.cbi-value var[data-tooltip],
2106 .td.cbi-value-field var[data-tooltip],
2107 div.cbi-value var.cbi-tooltip-container,
2108 .td.cbi-value-field var.cbi-tooltip-container {
2109         cursor: help;
2110         border-bottom: 1px dotted #0069d6;
2111 }
2112
2113 div.cbi-value var.cbi-tooltip-container,
2114 .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip {
2115         font-style: normal;
2116         white-space: normal;
2117         color: #444;
2118 }
2119
2120 #modal_overlay > .modal.uci-dialog,
2121 #modal_overlay > .modal.cbi-modal {
2122         max-width: 900px;
2123 }
2124
2125 .uci-change-list {
2126         line-height: 170%;
2127         white-space: pre;
2128 }
2129
2130 .uci-change-list del,
2131 .uci-change-list ins,
2132 .uci-change-list var,
2133 .uci-change-legend-label del,
2134 .uci-change-legend-label ins,
2135 .uci-change-legend-label var {
2136         text-decoration: none;
2137         font-family: monospace;
2138         font-style: normal;
2139         border: 1px solid #ccc;
2140         background: #eee;
2141         padding: 2px;
2142         display: block;
2143         line-height: 15px;
2144         margin-bottom: 1px;
2145 }
2146
2147 .uci-change-list ins,
2148 .uci-change-legend-label ins {
2149         border-color: #0f0;
2150         background: #cfc;
2151 }
2152
2153 .uci-change-list del,
2154 .uci-change-legend-label del {
2155         border-color: #f00;
2156         background: #fcc;
2157 }
2158
2159 .uci-change-list var,
2160 .uci-change-legend-label var {
2161         border-color: #ccc;
2162         background: #eee;
2163 }
2164
2165 .uci-change-list var ins,
2166 .uci-change-list var del {
2167         display: inline-block;
2168         border: none;
2169         width: 100%;
2170         padding: 0;
2171 }
2172
2173 .uci-change-legend {
2174         padding: 5px;
2175 }
2176
2177 .uci-change-legend-label {
2178         width: 150px;
2179         float: left;
2180 }
2181
2182 .uci-change-legend-label > ins,
2183 .uci-change-legend-label > del,
2184 .uci-change-legend-label > var {
2185         float: left;
2186         margin-right: 4px;
2187         width: 16px;
2188         height: 16px;
2189         display: block;
2190         position: relative;
2191 }
2192
2193 .uci-change-legend-label var ins,
2194 .uci-change-legend-label var del {
2195         border: none;
2196         position: absolute;
2197         top: 2px;
2198         left: 2px;
2199         right: 2px;
2200         bottom: 2px;
2201 }
2202
2203 #modal_overlay {
2204         position: fixed;
2205         top: 0;
2206         bottom: 0;
2207         left: -10000px;
2208         right: 10000px;
2209         background: rgba(0, 0, 0, 0.7);
2210         z-index: 900;
2211         overflow-y: scroll;
2212         -webkit-overflow-scrolling: touch;
2213         transition: opacity .125s ease-in;
2214         opacity: 0;
2215 }
2216
2217 #modal_overlay > .modal {
2218         width: 90%;
2219         margin: 5em auto;
2220         display: flex;
2221         flex-wrap: wrap;
2222         min-height: 32px;
2223         max-width: 600px;
2224         align-items: center;
2225         border-radius: 3px;
2226         background: #fff;
2227         box-shadow: 0 0 3px #444;
2228         padding: 1em 1em .5em 1em;
2229         min-width: 270px;
2230 }
2231
2232 #modal_overlay .modal > * {
2233         flex-basis: 100%;
2234         line-height: normal;
2235         margin-bottom: .5em;
2236 }
2237
2238 #modal_overlay .modal > pre,
2239 #modal_overlay .modal > textarea {
2240         white-space: pre-wrap;
2241         overflow: auto;
2242 }
2243
2244 body.modal-overlay-active {
2245         overflow: hidden;
2246         height: 100vh;
2247 }
2248
2249 body.modal-overlay-active #modal_overlay {
2250         left: 0;
2251         right: 0;
2252         opacity: 1;
2253 }
2254
2255 html body.apply-overlay-active {
2256         height: calc(100vh - 63px);
2257 }
2258
2259 #applyreboot-section {
2260         line-height: 300%;
2261 }
2262
2263 [data-page="admin-network-dhcp"] [data-name="ip"] {
2264         width: 15%;
2265 }
2266
2267 @keyframes flash {
2268         0% { opacity: 1; }
2269         50% { opacity: .5; }
2270         100% { opacity: 1; }
2271 }
2272
2273 .flash {
2274         animation: flash .35s;
2275 }
2276
2277 .spinning {
2278         position: relative;
2279         padding-left: 32px !important;
2280 }
2281
2282 .spinning::before {
2283         position: absolute;
2284         top: 0;
2285         left: 0;
2286         bottom: 0;
2287         width: 32px;
2288         content: " ";
2289         background: url(../resources/icons/loading.gif) no-repeat center;
2290         background-size: 16px;
2291 }
2292
2293 [data-tab-title] {
2294         height: 0;
2295         opacity: 0;
2296         overflow: hidden;
2297 }
2298
2299 [data-tab-active="true"] {
2300         opacity: 1;
2301         height: auto;
2302         overflow: visible;
2303         transition: opacity .25s ease-in;
2304 }
2305
2306 .cbi-filebrowser {
2307         min-width: 210px;
2308         max-width: 100%;
2309         border: 1px solid #ccc;
2310         border-radius: 3px;
2311         display: flex;
2312         flex-direction: column;
2313         opacity: 0;
2314         height: 0;
2315         overflow: hidden;
2316 }
2317
2318 .cbi-filebrowser.open {
2319         opacity: 1;
2320         height: auto;
2321         overflow: visible;
2322         transition: opacity .25s ease-in;
2323 }
2324
2325 .cbi-filebrowser > * {
2326         max-width: 100%;
2327         overflow: hidden;
2328         text-overflow: ellipsis;
2329         padding: 0 0 .25em 0;
2330         margin: .25em .25em 0px .25em;
2331         white-space: nowrap;
2332         border-bottom: 1px solid #ccc;
2333 }
2334
2335 .cbi-filebrowser .cbi-button-positive {
2336         margin-right: .25em;
2337 }
2338
2339 .cbi-filebrowser > div {
2340         border-bottom: none;
2341 }
2342
2343 .cbi-filebrowser > ul > li {
2344         display: flex;
2345         flex-direction: row;
2346 }
2347
2348 .cbi-filebrowser > ul > li:hover {
2349         background: #f5f5f5;
2350 }
2351
2352 .cbi-filebrowser > ul > li > div:first-child {
2353         flex: 10;
2354         overflow: hidden;
2355         text-overflow: ellipsis;
2356 }
2357
2358 .cbi-filebrowser > ul > li > div:last-child {
2359         flex: 3;
2360         text-align: right;
2361 }
2362
2363 .cbi-filebrowser > ul > li > div:last-child > button {
2364         padding: .125em .25em;
2365         margin: 1px 0 1px .25em;
2366 }
2367
2368 .cbi-filebrowser .upload {
2369         display: flex;
2370         flex-direction: row;
2371         flex-wrap: wrap;
2372         margin: 0 -.125em .25em -.125em;
2373         padding: 0 0 .125em 0px;
2374         border-bottom: 1px solid #ccc;
2375 }
2376
2377 .cbi-filebrowser .upload > * {
2378         margin: .125em;
2379         flex: 1;
2380 }
2381
2382 .cbi-filebrowser .upload > .btn {
2383         flex-basis: 60px;
2384 }
2385
2386 .cbi-filebrowser .upload > div {
2387         flex: 10;
2388         min-width: 150px;
2389 }
2390
2391 .cbi-filebrowser .upload > div > input {
2392         width: 100%;
2393 }
2394
2395 @keyframes fade-in {
2396         0% { opacity: 0; }
2397         100% { opacity: 1; }
2398 }
2399
2400 @keyframes fade-out {
2401         0% { opacity: 1; }
2402         100% { opacity: 0; }
2403 }
2404
2405 .fade-in {
2406         animation: fade-in .4s ease;
2407 }
2408
2409 .fade-out {
2410         animation: fade-out .4s ease;
2411 }
2412
2413 .assoclist .ifacebadge {
2414         display: flex;
2415         flex-direction: column;
2416         align-items: center;
2417         white-space: normal;
2418         text-align: center;
2419 }
2420
2421 .assoclist .ifacebadge > img {
2422         margin: .2em;
2423 }
2424
2425 .assoclist .td:nth-of-type(3),
2426 .assoclist .td:nth-of-type(5) {
2427         width: 25%;
2428 }
2429
2430 .assoclist .td:nth-of-type(6) button {
2431         word-break: normal;
2432 }