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