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