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