themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css

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