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