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