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