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         white-space: pre;
1298 }
1299
1300 .btn:focus,
1301 .cbi-button:focus {
1302         outline: 1px dotted #666;
1303 }
1304
1305 .cbi-input-invalid,
1306 .cbi-input-invalid.cbi-dropdown:not(.btn):not(.cbi-button),
1307 .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
1308 .cbi-value-error input {
1309         color: #f00;
1310         border-color: #f00;
1311 }
1312
1313 .cbi-button-positive,
1314 .cbi-button-fieldadd,
1315 .cbi-button-add,
1316 .cbi-button-save {
1317         border-color: #4a4;
1318         color: #4a4;
1319 }
1320
1321 .cbi-button-neutral,
1322 .cbi-button-download,
1323 .cbi-button-find,
1324 .cbi-button-link,
1325 .cbi-button-up,
1326 .cbi-button-down {
1327         color: #444;
1328 }
1329
1330 .btn.primary,
1331 .cbi-button-action,
1332 .cbi-button-apply,
1333 .cbi-button-reload,
1334 .cbi-button-edit {
1335         border-color: #0069d6;
1336         color: #0069d6;
1337 }
1338
1339 .cbi-button-negative,
1340 .cbi-section-remove .cbi-button,
1341 .cbi-button-reset,
1342 .cbi-button-remove {
1343         border-color: #c44;
1344         color: #c44;
1345 }
1346
1347 .cbi-page-actions::after {
1348         display: table;
1349         content: "";
1350         clear: both;
1351 }
1352
1353 .cbi-page-actions > * {
1354         vertical-align: middle;
1355 }
1356
1357 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1358         float: left;
1359         margin-right: .4em;
1360 }
1361
1362 .btn.primary,
1363 .cbi-button-action.important,
1364 .cbi-page-actions .cbi-button-apply,
1365 .cbi-section-actions .cbi-button-edit {
1366         color: #fff;
1367         background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1368         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1369 }
1370
1371 .cbi-button-positive.important,
1372 .cbi-page-actions .cbi-button-save {
1373         color: #fff;
1374         background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1375         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1376 }
1377
1378 .cbi-button-negative.important {
1379         color: #fff;
1380         background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1381         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1382 }
1383
1384 .cbi-page-actions .cbi-button-apply + .cbi-button-save,
1385 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1386         background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1387         text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1388         color: #4a4;
1389 }
1390
1391 .cbi-dropdown {
1392         display: inline-flex !important;
1393         cursor: pointer;
1394         height: auto;
1395         position: relative;
1396         padding: 0 !important;
1397 }
1398
1399 .cbi-dropdown:not(.btn):not(.cbi-button) {
1400         background: linear-gradient(#fff 0%, #e9e8e6 100%);
1401         border: 1px solid #ccc;
1402         border-radius: 3px;
1403         color: #404040;
1404 }
1405
1406 .cbi-dynlist > .item:focus,
1407 .cbi-dropdown:focus {
1408         outline: 2px solid #4b6e9b;
1409 }
1410
1411 .cbi-dropdown > ul {
1412         margin: 0 !important;
1413         padding: 0;
1414         list-style: none;
1415         overflow-x: hidden;
1416         overflow-y: auto;
1417         display: flex;
1418         width: 100%;
1419 }
1420
1421 .cbi-dropdown.btn > ul:not(.dropdown),
1422 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1423         margin: 0 0 0 13px !important;
1424 }
1425
1426 .cbi-dropdown.btn.spinning > ul:not(.dropdown),
1427 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1428         margin: 0 !important;
1429 }
1430
1431 .cbi-dropdown > ul.preview {
1432         display: none;
1433 }
1434
1435 .cbi-dropdown > .open,
1436 .cbi-dropdown > .more {
1437         flex-grow: 0;
1438         flex-shrink: 0;
1439         display: flex;
1440         flex-direction: column;
1441         justify-content: center;
1442         text-align: center;
1443         line-height: 2em;
1444         padding: 0 .25em;
1445 }
1446
1447 .cbi-dropdown.btn > .open,
1448 .cbi-dropdown.cbi-button > .open {
1449         padding: 0 .5em;
1450         margin-left: .5em;
1451         border-left: 1px solid;
1452 }
1453
1454 .cbi-dropdown > .more,
1455 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1456         color: #777;
1457         font-weight: bold;
1458         text-shadow: 1px 1px 0px #fff;
1459         display: none;
1460         justify-content: center;
1461 }
1462
1463 .cbi-dropdown > ul > li {
1464         display: none;
1465         white-space: nowrap;
1466         overflow: hidden;
1467         text-overflow: ellipsis;
1468         flex-shrink: 1;
1469         flex-grow: 1;
1470         align-items: center;
1471         align-self: center;
1472         color: inherit;
1473 }
1474
1475 .cbi-dropdown > ul.dropdown > li,
1476 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1477         min-height: 20px;
1478         padding: .25em;
1479         color: #404040;
1480 }
1481
1482 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1483 .cbi-dropdown > ul > li .hide-close { display: none; }
1484
1485 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1486         border-left: 1px solid #ccc;
1487 }
1488
1489 .cbi-dropdown[empty] > ul {
1490         max-width: 1px;
1491 }
1492
1493 .cbi-dropdown > ul > li > form {
1494         display: none;
1495         margin: 0;
1496         padding: 0;
1497         pointer-events: none;
1498 }
1499
1500 .cbi-dropdown > ul > li img {
1501         vertical-align: middle;
1502         margin-right: .25em;
1503 }
1504
1505 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1506         margin: 0;
1507 }
1508
1509 .cbi-dropdown > ul > li input[type="text"] {
1510         height: 20px;
1511 }
1512
1513 .cbi-dropdown[open] {
1514         position: relative;
1515 }
1516
1517 .cbi-dropdown[open] > ul.dropdown {
1518         display: block;
1519         background: #f6f6f5;
1520         border: 1px solid #918e8c;
1521         box-shadow: 0 0 4px #918e8c;
1522         position: absolute;
1523         z-index: 1100;
1524         max-width: none;
1525         min-width: 100%;
1526         width: auto;
1527         transition: max-height .125s ease-in;
1528 }
1529
1530 .cbi-dropdown > ul > li[display],
1531 .cbi-dropdown[open] > ul.preview,
1532 .cbi-dropdown[open] > ul.dropdown > li,
1533 .cbi-dropdown[multiple] > ul > li > label,
1534 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1535 .cbi-dropdown[multiple][more] > .more,
1536 .cbi-dropdown[multiple][empty] > .more {
1537         flex-grow: 1;
1538         display: flex !important;
1539 }
1540
1541 .cbi-dropdown[empty] > ul > li,
1542 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1543 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1544         display: block !important;
1545 }
1546
1547 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1548 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1549
1550 .cbi-dropdown[open] > ul.dropdown > li {
1551         border-bottom: 1px solid #ccc;
1552 }
1553
1554 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1555         background: #b0d0f0;
1556 }
1557
1558 .cbi-dropdown[open] > ul.dropdown > li.focus {
1559         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1560 }
1561
1562 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1563         margin-bottom: 0;
1564         border-bottom: none;
1565 }
1566
1567 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1568         opacity: 0.7;
1569 }
1570
1571 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1572         width: 100%;
1573 }
1574
1575 .cbi-dropdown[disabled] {
1576         pointer-events: none;
1577         opacity: .6;
1578 }
1579
1580 input[type="text"] + .cbi-button,
1581 input[type="password"] + .cbi-button,
1582 select + .cbi-button {
1583         border-radius: 0 3px 3px 0;
1584         border-color: #ccc;
1585         margin-left: -2px;
1586         padding: 0 6px;
1587         vertical-align: top;
1588         height: 30px;
1589         font-size: 14px;
1590         line-height: 28px;
1591 }
1592
1593 select + .cbi-button {
1594         border-left-color: transparent;
1595 }
1596
1597 .cbi-title-ref {
1598         color: #37c;
1599 }
1600
1601 .cbi-title-ref::after {
1602         content: "➙";
1603 }
1604
1605 .cbi-tooltip-container {
1606         cursor: help;
1607 }
1608
1609 .cbi-tooltip {
1610         position: absolute;
1611         z-index: 1000;
1612         left: -10000px;
1613         box-shadow: 0 0 2px #ccc;
1614         border-radius: 3px;
1615         background: #fff;
1616         white-space: pre;
1617         padding: 2px 5px;
1618         opacity: 0;
1619         transition: opacity .25s ease-in;
1620 }
1621
1622 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1623         left: auto;
1624         opacity: 1;
1625         transition: opacity .25s ease-in;
1626 }
1627
1628 .cbi-progressbar {
1629         border: 1px solid #ccc;
1630         border-radius: 3px;
1631         position: relative;
1632         min-width: 170px;
1633         height: 20px;
1634         margin: 4px 0;
1635         background: #f9f9f9;
1636 }
1637
1638 .cbi-progressbar > div {
1639         background: #90c0e0;
1640         height: 100%;
1641         transition: width .25s ease-in;
1642         width: 0%;
1643 }
1644
1645 .cbi-progressbar::after {
1646         position: absolute;
1647         bottom: 0;
1648         top: 0;
1649         right: 0;
1650         left: 0;
1651         text-align: center;
1652         text-shadow: 0 0 2px #fff;
1653         content: attr(title);
1654         white-space: pre;
1655         overflow: hidden;
1656         text-overflow: ellipsis;
1657 }
1658
1659 .zonebadge .cbi-tooltip {
1660         padding: 1px;
1661         background: inherit;
1662         margin: -1.6em 0 0 -5px;
1663         border-radius: 3px;
1664         pointer-events: none;
1665         box-shadow: 0 0 3px #444;
1666 }
1667
1668 .zonebadge .cbi-tooltip > * {
1669         margin: 1px;
1670 }
1671
1672 .zone-forwards {
1673         display: flex;
1674         flex-wrap: wrap;
1675 }
1676
1677 .zone-forwards > * {
1678         flex: 1 1 40%;
1679         padding: 1px;
1680 }
1681
1682 .zone-forwards > span {
1683         flex-basis: 10%;
1684         text-align: center;
1685 }
1686
1687 .zone-forwards .zone-src,
1688 .zone-forwards .zone-dest {
1689         display: flex;
1690         flex-direction: column;
1691 }
1692
1693 .btn.active, .btn:active {
1694         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1695 }
1696
1697 .btn.disabled {
1698         cursor: default;
1699         opacity: 0.65;
1700         box-shadow: none;
1701 }
1702
1703 .btn[disabled] {
1704         cursor: default;
1705         opacity: 0.65;
1706         box-shadow: none;
1707 }
1708
1709 .btn.large {
1710         font-size: 15px;
1711         line-height: normal;
1712         padding: 9px 14px 9px;
1713         border-radius: 6px;
1714 }
1715
1716 .btn.small {
1717         padding: 7px 9px 7px;
1718         font-size: 11px;
1719 }
1720
1721 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1722         padding: 0;
1723         border: 0;
1724 }
1725
1726 .close {
1727         float: right;
1728         color: #000;
1729         font-size: 20px;
1730         font-weight: bold;
1731         line-height: 13.5px;
1732         text-shadow: 0 1px 0 #fff;
1733         opacity: 0.25;
1734 }
1735
1736 .close:hover {
1737         color: #000;
1738         text-decoration: none;
1739         opacity: 0.4;
1740 }
1741
1742 .alert-message {
1743         position: relative;
1744         padding: .5em .5em .25em .5em;
1745         margin-bottom: .5em;
1746         color: #404040;
1747         background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1748         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1749         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1750         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1751         border-width: 1px;
1752         border-style: solid;
1753         border-radius: 4px;
1754         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1755 }
1756
1757 .alert-message .close {
1758         margin-top: 1px;
1759         *margin-top: 0;
1760 }
1761
1762 .alert-message h4,
1763 .alert-message h5,
1764 .alert-message pre,
1765 .alert-message ul,
1766 .alert-message li,
1767 .alert-message p {
1768         color: inherit;
1769         border: none;
1770         line-height: inherit;
1771         background: transparent;
1772         padding: 0;
1773         margin: .25em 0;
1774 }
1775
1776 .alert-message button {
1777         margin: .25em 0;
1778 }
1779
1780 .label,
1781 header [data-indicator] {
1782         padding: 1px 3px 2px;
1783         font-size: 9.75px;
1784         font-weight: bold;
1785         color: #fff !important;
1786         text-transform: uppercase;
1787         white-space: nowrap;
1788         background-color: #bfbfbf;
1789         border-radius: 3px;
1790         text-shadow: none;
1791         margin-left: .4em;
1792 }
1793
1794 header [data-indicator][data-clickable] {
1795         cursor: pointer;
1796 }
1797
1798 a.label:link,
1799 a.label:visited {
1800         color: #fff;
1801 }
1802
1803 a.label:hover {
1804         text-decoration: none;
1805 }
1806
1807 .label.important {
1808         background-color: #c43c35;
1809 }
1810
1811 .label.warning {
1812         background-color: #f89406;
1813 }
1814
1815 .label.success {
1816         background-color: #46a546;
1817 }
1818
1819 .label.notice,
1820 header [data-indicator][data-style="active"] {
1821         background-color: #62cffc;
1822 }
1823
1824 /* LuCI specific items */
1825 .hidden { display: none }
1826
1827 form.inline { display: inline; margin-bottom: 0; }
1828
1829 header .pull-right { padding-top: 8px; }
1830
1831 #modemenu li:last-child span.divider { display: none }
1832
1833 #syslog {  width: 100%; }
1834
1835 .cbi-section-table .tr:hover .td,
1836 .cbi-section-table .tr:hover .th,
1837 .cbi-section-table .tr:hover::before {
1838         background-color: #f5f5f5;
1839 }
1840
1841 .cbi-section-table .tr.cbi-section-table-descr .th {
1842         font-weight: normal;
1843 }
1844
1845 .cbi-section-table-titles.named::before,
1846 .cbi-section-table-descr.named::before,
1847 .cbi-section-table-row[data-title]::before {
1848         content: attr(data-title) " ";
1849         display: table-cell;
1850         padding: 10px 10px 9px;
1851         line-height: 18px;
1852         font-weight: bold;
1853         vertical-align: middle;
1854 }
1855
1856 .cbi-section-table-titles.named::before,
1857 .cbi-section-table-descr.named::before,
1858 .cbi-section-table-row[data-title]::before {
1859         border-top: 1px solid #ddd;
1860 }
1861
1862 .left { text-align: left !important; }
1863 .right { text-align: right !important; }
1864 .center { text-align: center !important; }
1865 .top { vertical-align: top !important; }
1866 .middle { vertical-align: middle !important; }
1867 .bottom { vertical-align: bottom !important; }
1868
1869 .cbi-value-field input[type=checkbox],
1870 .cbi-value-field input[type=radio] {
1871         margin-top: 8px;
1872         margin-right: 6px;
1873 }
1874
1875 table table td,
1876 .cbi-value-field table td {
1877         border: none;
1878 }
1879
1880 .table.cbi-section-table input[type="password"],
1881 .table.cbi-section-table input[type="text"],
1882 .table.cbi-section-table textarea,
1883 .table.cbi-section-table select {
1884         width: 100%;
1885 }
1886
1887 .table.cbi-section-table .td.cbi-section-table-cell {
1888         white-space: nowrap;
1889         text-align: right;
1890 }
1891
1892 .table.cbi-section-table .td.cbi-section-table-cell select {
1893         width: inherit;
1894 }
1895
1896 .td.cbi-section-actions {
1897         text-align: right;
1898         vertical-align: middle;
1899 }
1900
1901 .td.cbi-section-actions > * {
1902         display: flex;
1903 }
1904
1905 .td.cbi-section-actions > * > *,
1906 .td.cbi-section-actions > * > form > * {
1907         flex: 1 1 4em;
1908         margin: 0 1px;
1909 }
1910
1911 .td.cbi-section-actions > * > form {
1912         display: inline-flex;
1913         margin: 0;
1914 }
1915
1916 .table.valign-middle .td {
1917         vertical-align: middle;
1918 }
1919
1920 .cbi-rowstyle-2,
1921 .tr.table-titles,
1922 .tr.cbi-section-table-titles {
1923         background: #f9f9f9;
1924 }
1925
1926 .cbi-value-description {
1927         background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path fill='%230069d6' d='M10 0A10 10 0 000 10a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0010 0zm1 17H9v-2h2v2zm2.1-7.7l-.9.9c-.8.7-1.2 1.3-1.2 2.8H9v-.5c0-1.1.4-2.1 1.2-2.8l1.2-1.3c.4-.3.6-.8.6-1.4a2 2 0 00-2-2 2 2 0 00-2 2H6a4 4 0 014-4 4 4 0 014 4c0 .9-.4 1.7-.9 2.3z'/></svg>") 0 .05em/1em no-repeat;
1928         margin: .25em 0 0;
1929         padding: .1em 0 0 1.3em;
1930 }
1931
1932 .cbi-section-error {
1933         border: 1px solid #f00;
1934         border-radius: 3px;
1935         background-color: #fce6e6;
1936         padding: 5px;
1937         margin-bottom: 18px;
1938 }
1939
1940 .cbi-section-error ul { margin: 0 0 0 20px; }
1941
1942 .cbi-section-error ul li {
1943         color: #f00;
1944         font-weight: bold;
1945 }
1946
1947 .ifacebox {
1948         background-color: #fff;
1949         border: 1px solid #ccc;
1950         margin: 0 10px;
1951         text-align: center;
1952         white-space: nowrap;
1953         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1954         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1955         border-radius: 4px;
1956         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1957         display: inline-flex;
1958         flex-direction: column;
1959         line-height: 1.2em;
1960         min-width: 100px;
1961 }
1962
1963 .ifacebox .ifacebox-head {
1964         border-bottom: 1px solid #ccc;
1965         padding: 2px;
1966         background: #eee;
1967 }
1968
1969 .ifacebox .ifacebox-head.active {
1970         background: #90c0e0;
1971 }
1972
1973 .ifacebox .ifacebox-body {
1974         padding: .25em;
1975 }
1976
1977 .ifacebadge {
1978         display: inline-block;
1979         flex-direction: row;
1980         white-space: nowrap;
1981         background-color: #fff;
1982         border: 1px solid #ccc;
1983         padding: 2px;
1984         background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1985         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1986         border-radius: 4px;
1987         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1988         cursor: default;
1989         line-height: 1.2em;
1990 }
1991
1992 .ifacebadge img {
1993         width: 16px;
1994         height: 16px;
1995         vertical-align: middle;
1996 }
1997
1998 .ifacebadge-active {
1999         border-color: #000;
2000         font-weight: bold;
2001 }
2002
2003 .network-status-table {
2004         display: flex;
2005         flex-wrap: wrap;
2006 }
2007
2008 .network-status-table .ifacebox {
2009         margin: .5em;
2010         flex-grow: 1;
2011 }
2012
2013 .network-status-table .ifacebox-body {
2014         display: flex;
2015         flex-direction: column;
2016         height: 100%;
2017         text-align: left;
2018 }
2019
2020 .network-status-table .ifacebox-body > * {
2021         margin: .25em;
2022 }
2023
2024 .network-status-table .ifacebox-body > span {
2025         flex: 10 10 auto;
2026         height: 100%;
2027 }
2028
2029 .network-status-table .ifacebox-body > div {
2030         margin: -.125em;
2031         display: flex;
2032         flex-wrap: wrap;
2033 }
2034
2035 #dsl_status_table .ifacebox-body span > strong {
2036         display: inline-block;
2037         min-width: 35%;
2038 }
2039
2040 .ifacebadge.large,
2041 .network-status-table .ifacebox-body .ifacebadge {
2042         display: flex;
2043         flex: 1;
2044         padding: .25em;
2045         min-width: 220px;
2046         margin: .125em;
2047 }
2048
2049 .ifacebadge.large {
2050         display: inline-flex;
2051 }
2052
2053 .network-status-table .ifacebox-body .ifacebadge > span {
2054         overflow: hidden;
2055         text-overflow: ellipsis;
2056 }
2057
2058 .ifacebadge > *,
2059 .ifacebadge.large > * {
2060         margin: 0 .125em;
2061 }
2062
2063 .zonebadge {
2064         padding: 2px;
2065         border-radius: 4px;
2066         display: inline-block;
2067         white-space: nowrap;
2068         color: #666;
2069         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2070 }
2071
2072 .zonebadge > em,
2073 .zonebadge > strong {
2074         margin: 0 2px;
2075         display: inline-block;
2076 }
2077
2078 .zonebadge input {
2079         width: 6em;
2080 }
2081
2082 .zonebadge > .ifacebadge {
2083         margin-left: 2px;
2084 }
2085
2086 .zonebadge-empty {
2087         border: 1px dashed #aaa;
2088         color: #aaa;
2089         font-style: italic;
2090         font-size: smaller;
2091 }
2092
2093 div.cbi-value var,
2094 .td.cbi-value-field var {
2095         font-style: italic;
2096         color: #0069d6;
2097 }
2098
2099 div.cbi-value var[data-tooltip],
2100 .td.cbi-value-field var[data-tooltip],
2101 div.cbi-value var.cbi-tooltip-container,
2102 .td.cbi-value-field var.cbi-tooltip-container {
2103         cursor: help;
2104         border-bottom: 1px dotted #0069d6;
2105 }
2106
2107 div.cbi-value var.cbi-tooltip-container,
2108 .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip {
2109         font-style: normal;
2110         white-space: normal;
2111         color: #444;
2112 }
2113
2114 #modal_overlay > .modal.uci-dialog,
2115 #modal_overlay > .modal.cbi-modal {
2116         max-width: 900px;
2117 }
2118
2119 .uci-change-list {
2120         line-height: 170%;
2121         white-space: pre;
2122 }
2123
2124 .uci-change-list del,
2125 .uci-change-list ins,
2126 .uci-change-list var,
2127 .uci-change-legend-label del,
2128 .uci-change-legend-label ins,
2129 .uci-change-legend-label var {
2130         text-decoration: none;
2131         font-family: monospace;
2132         font-style: normal;
2133         border: 1px solid #ccc;
2134         background: #eee;
2135         padding: 2px;
2136         display: block;
2137         line-height: 15px;
2138         margin-bottom: 1px;
2139 }
2140
2141 .uci-change-list ins,
2142 .uci-change-legend-label ins {
2143         border-color: #0f0;
2144         background: #cfc;
2145 }
2146
2147 .uci-change-list del,
2148 .uci-change-legend-label del {
2149         border-color: #f00;
2150         background: #fcc;
2151 }
2152
2153 .uci-change-list var,
2154 .uci-change-legend-label var {
2155         border-color: #ccc;
2156         background: #eee;
2157 }
2158
2159 .uci-change-list var ins,
2160 .uci-change-list var del {
2161         display: inline-block;
2162         border: none;
2163         width: 100%;
2164         padding: 0;
2165 }
2166
2167 .uci-change-legend {
2168         padding: 5px;
2169 }
2170
2171 .uci-change-legend-label {
2172         width: 150px;
2173         float: left;
2174 }
2175
2176 .uci-change-legend-label > ins,
2177 .uci-change-legend-label > del,
2178 .uci-change-legend-label > var {
2179         float: left;
2180         margin-right: 4px;
2181         width: 16px;
2182         height: 16px;
2183         display: block;
2184         position: relative;
2185 }
2186
2187 .uci-change-legend-label var ins,
2188 .uci-change-legend-label var del {
2189         border: none;
2190         position: absolute;
2191         top: 2px;
2192         left: 2px;
2193         right: 2px;
2194         bottom: 2px;
2195 }
2196
2197 #modal_overlay {
2198         position: fixed;
2199         top: 0;
2200         bottom: 0;
2201         left: -10000px;
2202         right: 10000px;
2203         background: rgba(0, 0, 0, 0.7);
2204         z-index: 900;
2205         overflow-y: scroll;
2206         -webkit-overflow-scrolling: touch;
2207         transition: opacity .125s ease-in;
2208         opacity: 0;
2209 }
2210
2211 #modal_overlay > .modal {
2212         width: 90%;
2213         margin: 5em auto;
2214         display: flex;
2215         flex-wrap: wrap;
2216         min-height: 32px;
2217         max-width: 600px;
2218         align-items: center;
2219         border-radius: 3px;
2220         background: #fff;
2221         box-shadow: 0 0 3px #444;
2222         padding: 1em 1em .5em 1em;
2223         min-width: 270px;
2224 }
2225
2226 #modal_overlay .modal > * {
2227         flex-basis: 100%;
2228         line-height: normal;
2229         margin-bottom: .5em;
2230 }
2231
2232 #modal_overlay .modal > pre,
2233 #modal_overlay .modal > textarea {
2234         white-space: pre-wrap;
2235         overflow: auto;
2236 }
2237
2238 body.modal-overlay-active {
2239         overflow: hidden;
2240         height: 100vh;
2241 }
2242
2243 body.modal-overlay-active #modal_overlay {
2244         left: 0;
2245         right: 0;
2246         opacity: 1;
2247 }
2248
2249 html body.apply-overlay-active {
2250         height: calc(100vh - 63px);
2251 }
2252
2253 #applyreboot-section {
2254         line-height: 300%;
2255 }
2256
2257 [data-page="admin-network-dhcp"] [data-name="ip"] {
2258         width: 15%;
2259 }
2260
2261 @keyframes flash {
2262         0% { opacity: 1; }
2263         50% { opacity: .5; }
2264         100% { opacity: 1; }
2265 }
2266
2267 .flash {
2268         animation: flash .35s;
2269 }
2270
2271 .spinning {
2272         position: relative;
2273         padding-left: 32px !important;
2274 }
2275
2276 .spinning::before {
2277         position: absolute;
2278         top: 0;
2279         left: 0;
2280         bottom: 0;
2281         width: 32px;
2282         content: " ";
2283         background: url(../resources/icons/loading.gif) no-repeat center;
2284         background-size: 16px;
2285 }
2286
2287 [data-tab-title] {
2288         height: 0;
2289         opacity: 0;
2290         overflow: hidden;
2291 }
2292
2293 [data-tab-active="true"] {
2294         opacity: 1;
2295         height: auto;
2296         overflow: visible;
2297         transition: opacity .25s ease-in;
2298 }
2299
2300 .cbi-filebrowser {
2301         min-width: 210px;
2302         max-width: 100%;
2303         border: 1px solid #ccc;
2304         border-radius: 3px;
2305         display: flex;
2306         flex-direction: column;
2307         opacity: 0;
2308         height: 0;
2309         overflow: hidden;
2310 }
2311
2312 .cbi-filebrowser.open {
2313         opacity: 1;
2314         height: auto;
2315         overflow: visible;
2316         transition: opacity .25s ease-in;
2317 }
2318
2319 .cbi-filebrowser > * {
2320         max-width: 100%;
2321         overflow: hidden;
2322         text-overflow: ellipsis;
2323         padding: 0 0 .25em 0;
2324         margin: .25em .25em 0px .25em;
2325         white-space: nowrap;
2326         border-bottom: 1px solid #ccc;
2327 }
2328
2329 .cbi-filebrowser .cbi-button-positive {
2330         margin-right: .25em;
2331 }
2332
2333 .cbi-filebrowser > div {
2334         border-bottom: none;
2335 }
2336
2337 .cbi-filebrowser > ul > li {
2338         display: flex;
2339         flex-direction: row;
2340 }
2341
2342 .cbi-filebrowser > ul > li:hover {
2343         background: #f5f5f5;
2344 }
2345
2346 .cbi-filebrowser > ul > li > div:first-child {
2347         flex: 10;
2348         overflow: hidden;
2349         text-overflow: ellipsis;
2350 }
2351
2352 .cbi-filebrowser > ul > li > div:last-child {
2353         flex: 3;
2354         text-align: right;
2355 }
2356
2357 .cbi-filebrowser > ul > li > div:last-child > button {
2358         padding: .125em .25em;
2359         margin: 1px 0 1px .25em;
2360 }
2361
2362 .cbi-filebrowser .upload {
2363         display: flex;
2364         flex-direction: row;
2365         flex-wrap: wrap;
2366         margin: 0 -.125em .25em -.125em;
2367         padding: 0 0 .125em 0px;
2368         border-bottom: 1px solid #ccc;
2369 }
2370
2371 .cbi-filebrowser .upload > * {
2372         margin: .125em;
2373         flex: 1;
2374 }
2375
2376 .cbi-filebrowser .upload > .btn {
2377         flex-basis: 60px;
2378 }
2379
2380 .cbi-filebrowser .upload > div {
2381         flex: 10;
2382         min-width: 150px;
2383 }
2384
2385 .cbi-filebrowser .upload > div > input {
2386         width: 100%;
2387 }
2388
2389 @keyframes fade-in {
2390         0% { opacity: 0; }
2391         100% { opacity: 1; }
2392 }
2393
2394 @keyframes fade-out {
2395         0% { opacity: 1; }
2396         100% { opacity: 0; }
2397 }
2398
2399 .fade-in {
2400         animation: fade-in .4s ease;
2401 }
2402
2403 .fade-out {
2404         animation: fade-out .4s ease;
2405 }
2406
2407 .assoclist .ifacebadge {
2408         display: flex;
2409         flex-direction: column;
2410         align-items: center;
2411         white-space: normal;
2412         text-align: center;
2413 }
2414
2415 .assoclist .ifacebadge > img {
2416         margin: .2em;
2417 }
2418
2419 .assoclist .td:nth-of-type(3),
2420 .assoclist .td:nth-of-type(5) {
2421         width: 25%;
2422 }
2423
2424 .assoclist .td:nth-of-type(6) button {
2425         word-break: normal;
2426 }