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