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