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