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