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