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 calc((100% - 940px) / 2 + 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         background: rgba(0, 0, 0, 0.7);
1165         z-index: 900;
1166         overflow: scroll;
1167         transition: opacity .125s ease-in;
1168         opacity: 0;
1169         visibility: hidden;
1170 }
1171
1172 .modal {
1173         width: 90%;
1174         margin: 5em auto;
1175         display: table;
1176         min-height: 32px;
1177         max-width: 600px;
1178         border-radius: 3px;
1179         background: var(--background-color-high);
1180         box-shadow: 0 0 3px #444;
1181         padding: 1em 1em .5em 1em;
1182         min-width: 270px;
1183 }
1184
1185 .modal > * {
1186         line-height: normal;
1187         margin-bottom: .5em;
1188         max-width: 100%;
1189 }
1190
1191 .modal > pre,
1192 .modal > textarea {
1193         white-space: pre-wrap;
1194         overflow: auto;
1195 }
1196
1197 body.modal-overlay-active {
1198         overflow: hidden;
1199         height: 100vh;
1200 }
1201
1202 body.modal-overlay-active #modal_overlay {
1203         left: 0;
1204         right: 0;
1205         opacity: 1;
1206         visibility: visible;
1207 }
1208
1209 .btn.danger,
1210 .alert-message.danger,
1211 .btn.danger:hover,
1212 .alert-message.danger:hover,
1213 .btn.error,
1214 .alert-message.error,
1215 .btn.error:hover,
1216 .alert-message.error:hover,
1217 .btn.success,
1218 .alert-message.success,
1219 .btn.success:hover,
1220 .alert-message.success:hover,
1221 .btn.info,
1222 .alert-message.info,
1223 .btn.info:hover,
1224 .alert-message.info:hover,
1225 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1226         color: #fff;
1227 }
1228
1229 .btn .close, .alert-message .close {
1230         font-family: Arial, sans-serif;
1231         line-height: 18px;
1232 }
1233
1234 .btn.danger,
1235 .alert-message.danger,
1236 .btn.error,
1237 .alert-message.error,
1238 .cbi-tooltip.error {
1239         background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1240         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1241         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1242 }
1243
1244 .btn.success, .alert-message.success, .cbi-tooltip.success {
1245         background: linear-gradient(to bottom, #62c462, #57a957) 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.info, .alert-message.info, .cbi-tooltip.info {
1251         background: linear-gradient(to bottom, #5bc0de, #339bb9) 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 .alert-message.notice, .cbi-tooltip.notice {
1257         background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1258         text-shadow: 0 -1px 0 rgba(255, 255, 255, 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 .modal.alert-message {
1263         color: var(--text-color-high);
1264 }
1265
1266 .item::after,
1267 .btn,
1268 .cbi-button {
1269         cursor: pointer;
1270         display: inline-block;
1271         background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--border-color-low)) no-repeat;
1272         padding: 0 14px;
1273         text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75);
1274         color: var(--text-color-high);
1275         font-size: 13px;
1276         line-height: 2em;
1277         border: 1px solid var(--border-color-high);
1278         border-radius: 4px;
1279         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);
1280         white-space: pre;
1281 }
1282
1283 .btn:focus,
1284 .cbi-button:focus {
1285         outline: 1px dotted #666;
1286 }
1287
1288 .cbi-input-invalid,
1289 .cbi-input-invalid.cbi-dropdown:not(.btn):not(.cbi-button),
1290 .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
1291 .cbi-value-error input {
1292         color: #f00;
1293         border-color: #f00;
1294 }
1295
1296 .cbi-button-positive,
1297 .cbi-button-fieldadd,
1298 .cbi-button-add,
1299 .cbi-button-save {
1300         border-color: #4a4;
1301         color: #4a4;
1302 }
1303
1304 .cbi-button-neutral,
1305 .cbi-button-download,
1306 .cbi-button-find,
1307 .cbi-button-link,
1308 .cbi-button-up,
1309 .cbi-button-down {
1310         color: var(--text-color-high);
1311 }
1312
1313 .btn.primary,
1314 .cbi-button-action,
1315 .cbi-button-apply,
1316 .cbi-button-reload,
1317 .cbi-button-edit {
1318         border-color: #0069d6;
1319         color: #0069d6;
1320 }
1321
1322 .cbi-button-negative,
1323 .cbi-section-remove .cbi-button,
1324 .cbi-button-reset,
1325 .cbi-button-remove {
1326         border-color: #c44;
1327         color: #c44;
1328 }
1329
1330 .cbi-page-actions::after {
1331         display: table;
1332         content: "";
1333         clear: both;
1334 }
1335
1336 .cbi-page-actions > * {
1337         vertical-align: middle;
1338 }
1339
1340 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1341         float: left;
1342         margin-right: .4em;
1343 }
1344
1345 .btn.primary,
1346 .cbi-button-action.important,
1347 .cbi-page-actions .cbi-button-apply,
1348 .cbi-section-actions .cbi-button-edit {
1349         color: #fff;
1350         background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1351         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1352 }
1353
1354 .cbi-button-positive.important,
1355 .cbi-page-actions .cbi-button-save {
1356         color: #fff;
1357         background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1358         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1359 }
1360
1361 .cbi-button-negative.important {
1362         color: #fff;
1363         background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1364         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1365 }
1366
1367 .cbi-page-actions .cbi-button-apply + .cbi-button-save,
1368 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1369         background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--border-color-low));
1370         text-shadow: 0 -1px 0 hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75);
1371         color: #4a4;
1372 }
1373
1374 .cbi-dropdown {
1375         display: inline-flex !important;
1376         cursor: pointer;
1377         height: auto;
1378         position: relative;
1379         padding: 0 !important;
1380 }
1381
1382 .cbi-dropdown:not(.btn):not(.cbi-button) {
1383         background: linear-gradient(var(--background-color-high) 0%, var(--border-color-low) 100%);
1384         border: 1px solid var(--border-color-high);
1385         border-radius: 3px;
1386         color: var(--text-color-high);
1387 }
1388
1389 .cbi-dynlist > .item:focus,
1390 .cbi-dropdown:focus {
1391         outline: 2px solid #4b6e9b;
1392 }
1393
1394 .cbi-dropdown > ul {
1395         margin: 0 !important;
1396         padding: 0;
1397         list-style: none;
1398         overflow-x: hidden;
1399         overflow-y: auto;
1400         display: flex;
1401         width: 100%;
1402 }
1403
1404 .cbi-dropdown.btn > ul:not(.dropdown),
1405 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1406         margin: 0 0 0 13px !important;
1407 }
1408
1409 .cbi-dropdown.btn.spinning > ul:not(.dropdown),
1410 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1411         margin: 0 !important;
1412 }
1413
1414 .cbi-dropdown > ul.preview {
1415         display: none;
1416 }
1417
1418 .cbi-dropdown > .open,
1419 .cbi-dropdown > .more {
1420         flex-grow: 0;
1421         flex-shrink: 0;
1422         display: flex;
1423         flex-direction: column;
1424         justify-content: center;
1425         text-align: center;
1426         line-height: 2em;
1427         padding: 0 .25em;
1428 }
1429
1430 .cbi-dropdown.btn > .open,
1431 .cbi-dropdown.cbi-button > .open {
1432         padding: 0 .5em;
1433         margin-left: .5em;
1434         border-left: 1px solid;
1435 }
1436
1437 .cbi-dropdown > .more,
1438 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1439         color: #777;
1440         font-weight: bold;
1441         text-shadow: 1px 1px 0px var(--background-color-high);
1442         display: none;
1443         justify-content: center;
1444 }
1445
1446 .cbi-dropdown > ul > li {
1447         display: none;
1448         white-space: nowrap;
1449         overflow: hidden;
1450         text-overflow: ellipsis;
1451         flex-shrink: 1;
1452         flex-grow: 1;
1453         align-items: center;
1454         align-self: center;
1455         color: inherit;
1456 }
1457
1458 .cbi-dropdown > ul.dropdown > li,
1459 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1460         min-height: 20px;
1461         padding: .25em;
1462         color: var(--text-color-high);
1463 }
1464
1465 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1466 .cbi-dropdown > ul > li .hide-close { display: none; }
1467
1468 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1469         border-left: 1px solid var(--border-color-high);
1470 }
1471
1472 .cbi-dropdown[empty] > ul {
1473         max-width: 1px;
1474 }
1475
1476 .cbi-dropdown > ul > li > form {
1477         display: none;
1478         margin: 0;
1479         padding: 0;
1480         pointer-events: none;
1481 }
1482
1483 .cbi-dropdown > ul > li img {
1484         vertical-align: middle;
1485         margin-right: .25em;
1486 }
1487
1488 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1489         margin: 0;
1490 }
1491
1492 .cbi-dropdown > ul > li input[type="text"] {
1493         height: 20px;
1494 }
1495
1496 .cbi-dropdown[open] {
1497         position: relative;
1498 }
1499
1500 .cbi-dropdown[open] > ul.dropdown {
1501         display: block;
1502         background: var(--background-color-low);
1503         border: 1px solid #918e8c;
1504         box-shadow: 0 0 4px #918e8c;
1505         position: absolute;
1506         z-index: 1100;
1507         max-width: none;
1508         min-width: 100%;
1509         width: auto;
1510         transition: max-height .125s ease-in;
1511 }
1512
1513 .cbi-dropdown > ul > li[display],
1514 .cbi-dropdown[open] > ul.preview,
1515 .cbi-dropdown[open] > ul.dropdown > li,
1516 .cbi-dropdown[multiple] > ul > li > label,
1517 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1518 .cbi-dropdown[multiple][more] > .more,
1519 .cbi-dropdown[multiple][empty] > .more {
1520         flex-grow: 1;
1521         display: flex !important;
1522 }
1523
1524 .cbi-dropdown[empty] > ul > li,
1525 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1526 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1527         display: block !important;
1528 }
1529
1530 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1531 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1532
1533 .cbi-dropdown[open] > ul.dropdown > li {
1534         border-bottom: 1px solid var(--border-color-high);
1535 }
1536
1537 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1538         background: #b0d0f0;
1539         color: #404040;
1540 }
1541
1542 .cbi-dropdown[open]:not(.btn):not(.cbi-button) > ul > li[selected][placeholder] {
1543         color: #777;
1544         text-shadow: 1px 1px 0px #fff;
1545 }
1546
1547 .cbi-dropdown[open] > ul.dropdown > li.focus {
1548         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1549         color: #404040;
1550 }
1551
1552 .cbi-dropdown[open]:not(.btn):not(.cbi-button) > ul > li.focus[placeholder] {
1553         color: #777;
1554         text-shadow: 1px 1px 0px #fff;
1555 }
1556
1557 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1558         margin-bottom: 0;
1559         border-bottom: none;
1560 }
1561
1562 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1563         opacity: 0.7;
1564 }
1565
1566 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1567         width: 100%;
1568 }
1569
1570 .cbi-dropdown[disabled] {
1571         pointer-events: none;
1572         opacity: .6;
1573 }
1574
1575 input[type="text"] + .cbi-button,
1576 input[type="password"] + .cbi-button,
1577 select + .cbi-button {
1578         border-radius: 0 3px 3px 0;
1579         border-color: var(--border-color-high);
1580         margin-left: -2px;
1581         padding: 0 6px;
1582         vertical-align: top;
1583         height: 30px;
1584         font-size: 14px;
1585         line-height: 28px;
1586 }
1587
1588 select + .cbi-button {
1589         border-left-color: transparent;
1590 }
1591
1592 .cbi-title-ref {
1593         color: #37c;
1594 }
1595
1596 .cbi-title-ref::after {
1597         content: "➙";
1598 }
1599
1600 .cbi-tooltip-container {
1601         cursor: help;
1602 }
1603
1604 .cbi-tooltip {
1605         position: absolute;
1606         z-index: 1000;
1607         left: -10000px;
1608         box-shadow: 0 0 2px var(--border-color-high);
1609         border-radius: 3px;
1610         background: var(--background-color-high);
1611         white-space: pre;
1612         padding: 2px 5px;
1613         opacity: 0;
1614         transition: opacity .25s ease-in;
1615 }
1616
1617 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1618         left: auto;
1619         opacity: 1;
1620         transition: opacity .25s ease-in;
1621 }
1622
1623 .cbi-progressbar {
1624         border: 1px solid var(--border-color-high);
1625         border-radius: 3px;
1626         position: relative;
1627         min-width: 170px;
1628         height: 20px;
1629         margin: 4px 0;
1630         background: var(--background-color-medium);
1631 }
1632
1633 .cbi-progressbar > div {
1634         background: #90c0e0;
1635         height: 100%;
1636         transition: width .25s ease-in;
1637         width: 0%;
1638 }
1639
1640 .cbi-progressbar::after {
1641         position: absolute;
1642         bottom: 0;
1643         top: 0;
1644         right: 0;
1645         left: 0;
1646         text-align: center;
1647         text-shadow: 0 0 2px var(--background-color-high);
1648         content: attr(title);
1649         white-space: pre;
1650         overflow: hidden;
1651         text-overflow: ellipsis;
1652 }
1653 @media (prefers-color-scheme: dark) {
1654         .cbi-progressbar::after {
1655                 mix-blend-mode: difference;
1656         }
1657 }
1658
1659 .zonebadge .cbi-tooltip {
1660         padding: 1px;
1661         background: inherit;
1662         margin: -1.6em 0 0 -5px;
1663         border-radius: 3px;
1664         pointer-events: none;
1665         box-shadow: 0 0 3px #444;
1666 }
1667
1668 .zonebadge .cbi-tooltip > * {
1669         margin: 1px;
1670 }
1671
1672 .zone-forwards {
1673         display: flex;
1674         flex-wrap: wrap;
1675 }
1676
1677 .zone-forwards > * {
1678         flex: 1 1 40%;
1679         padding: 1px;
1680 }
1681
1682 .zone-forwards > span {
1683         flex-basis: 10%;
1684         text-align: center;
1685 }
1686
1687 .zone-forwards .zone-src,
1688 .zone-forwards .zone-dest {
1689         display: flex;
1690         flex-direction: column;
1691 }
1692
1693 .btn.active, .btn:active {
1694         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1695 }
1696
1697 .btn.disabled {
1698         cursor: default;
1699         opacity: 0.65;
1700         box-shadow: none;
1701 }
1702
1703 .btn[disabled] {
1704         cursor: default;
1705         opacity: 0.65;
1706         box-shadow: none;
1707 }
1708
1709 .btn.large {
1710         font-size: 15px;
1711         line-height: normal;
1712         padding: 9px 14px 9px;
1713         border-radius: 6px;
1714 }
1715
1716 .btn.small {
1717         padding: 7px 9px 7px;
1718         font-size: 11px;
1719 }
1720
1721 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1722         padding: 0;
1723         border: 0;
1724 }
1725
1726 .close {
1727         float: right;
1728         color: #000;
1729         font-size: 20px;
1730         font-weight: bold;
1731         line-height: 13.5px;
1732         text-shadow: 0 1px 0 #fff;
1733         opacity: 0.25;
1734 }
1735
1736 .close:hover {
1737         color: #000;
1738         text-decoration: none;
1739         opacity: 0.4;
1740 }
1741
1742 .alert-message {
1743         position: relative;
1744         padding: .5em .5em .25em .5em;
1745         margin-bottom: .5em;
1746         color: #404040;
1747         background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1748         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1749         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1750         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1751         border-width: 1px;
1752         border-style: solid;
1753         border-radius: 4px;
1754         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1755         white-space: unset;
1756 }
1757
1758 .alert-message .close {
1759         margin-top: 1px;
1760         *margin-top: 0;
1761 }
1762
1763 .alert-message h4,
1764 .alert-message h5,
1765 .alert-message pre,
1766 .alert-message ul,
1767 .alert-message li,
1768 .alert-message p {
1769         color: inherit;
1770         border: none;
1771         line-height: inherit;
1772         background: transparent;
1773         padding: 0;
1774         margin: .25em 0;
1775 }
1776
1777 .alert-message button {
1778         margin: .25em 0;
1779 }
1780
1781 .label,
1782 header [data-indicator] {
1783         padding: 1px 3px 2px;
1784         font-size: 9.75px;
1785         font-weight: bold;
1786         color: #fff !important;
1787         text-transform: uppercase;
1788         white-space: nowrap;
1789         background-color: #bfbfbf;
1790         border-radius: 3px;
1791         text-shadow: none;
1792         margin-left: .4em;
1793 }
1794
1795 header [data-indicator][data-clickable] {
1796         cursor: pointer;
1797 }
1798
1799 a.label:link,
1800 a.label:visited {
1801         color: #fff;
1802 }
1803
1804 a.label:hover {
1805         text-decoration: none;
1806 }
1807
1808 .label.important {
1809         background-color: #c43c35;
1810 }
1811
1812 .label.warning {
1813         background-color: #f89406;
1814 }
1815
1816 .label.success {
1817         background-color: #46a546;
1818 }
1819
1820 .label.notice,
1821 header [data-indicator][data-style="active"] {
1822         background-color: #62cffc;
1823 }
1824
1825 /* LuCI specific items */
1826 .hidden { display: none }
1827
1828 form.inline { display: inline; margin-bottom: 0; }
1829
1830 header .pull-right { padding-top: 8px; margin-left: auto; }
1831
1832 #modemenu li:last-child span.divider { display: none }
1833
1834 #syslog {
1835         width: 100%;
1836         color: var(--text-color-highest);
1837 }
1838
1839 .cbi-section-table .tr:hover .td,
1840 .cbi-section-table .tr:hover .th,
1841 .cbi-section-table .tr:hover::before {
1842         background-color: var(--background-color-low);
1843 }
1844
1845 .cbi-section-table .tr.cbi-section-table-descr .th {
1846         font-weight: normal;
1847 }
1848
1849 .cbi-section-table-titles.named::before,
1850 .cbi-section-table-descr.named::before,
1851 .cbi-section-table-row[data-title]::before {
1852         content: attr(data-title) " ";
1853         display: table-cell;
1854         padding: 10px 10px 9px;
1855         line-height: 18px;
1856         font-weight: bold;
1857         vertical-align: middle;
1858 }
1859
1860 .cbi-section-table-titles.named::before,
1861 .cbi-section-table-descr.named::before,
1862 .cbi-section-table-row[data-title]::before {
1863         border-top: 1px solid var(--border-color-medium);
1864 }
1865
1866 .left { text-align: left !important; }
1867 .right { text-align: right !important; }
1868 .center { text-align: center !important; }
1869 .top { vertical-align: top !important; }
1870 .middle { vertical-align: middle !important; }
1871 .bottom { vertical-align: bottom !important; }
1872
1873 .cbi-value-field input[type=checkbox],
1874 .cbi-value-field input[type=radio] {
1875         margin-top: 8px;
1876         margin-right: 6px;
1877 }
1878
1879 table table td,
1880 .cbi-value-field table td {
1881         border: none;
1882 }
1883
1884 .table.cbi-section-table input[type="password"],
1885 .table.cbi-section-table input[type="text"],
1886 .table.cbi-section-table textarea,
1887 .table.cbi-section-table select {
1888         width: 100%;
1889 }
1890
1891 .table.cbi-section-table .td.cbi-section-table-cell {
1892         white-space: nowrap;
1893         text-align: right;
1894 }
1895
1896 .table.cbi-section-table .td.cbi-section-table-cell select {
1897         width: inherit;
1898 }
1899
1900 .td.cbi-section-actions {
1901         text-align: right;
1902         vertical-align: middle;
1903 }
1904
1905 .td.cbi-section-actions > * {
1906         display: flex;
1907 }
1908
1909 .td.cbi-section-actions > * > *,
1910 .td.cbi-section-actions > * > form > * {
1911         flex: 1 1 4em;
1912         margin: 0 1px;
1913 }
1914
1915 .td.cbi-section-actions > * > form {
1916         display: inline-flex;
1917         margin: 0;
1918 }
1919
1920 .table.valign-middle .td {
1921         vertical-align: middle;
1922 }
1923
1924 .cbi-rowstyle-2,
1925 .tr.table-titles,
1926 .tr.cbi-section-table-titles {
1927         background: var(--background-color-medium);
1928 }
1929
1930 .cbi-value-description {
1931         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;
1932         margin: .25em 0 0;
1933         padding: .1em 0 0 1.3em;
1934 }
1935
1936 .cbi-section-error {
1937         border: 1px solid #f00;
1938         border-radius: 3px;
1939         background-color: #fce6e6;
1940         padding: 5px;
1941         margin-bottom: 18px;
1942 }
1943
1944 .cbi-section-error ul { margin: 0 0 0 20px; }
1945
1946 .cbi-section-error ul li {
1947         color: #f00;
1948         font-weight: bold;
1949 }
1950
1951 .ifacebox {
1952         border: 1px solid var(--border-color-high);
1953         margin: 0 10px;
1954         text-align: center;
1955         white-space: nowrap;
1956         background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-medium));
1957         text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75);
1958         border-radius: 4px;
1959         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);
1960         display: inline-flex;
1961         flex-direction: column;
1962         line-height: 1.2em;
1963         min-width: 100px;
1964 }
1965
1966 .ifacebox .ifacebox-head {
1967         border-bottom: 1px solid var(--border-color-high);
1968         border-radius: 4px 4px 0 0;
1969         padding: 2px;
1970         background: #eee;
1971         color: #404040;
1972         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1973 }
1974
1975 .ifacebox .ifacebox-head.active {
1976         background: #90c0e0;
1977 }
1978
1979 .ifacebox .ifacebox-body {
1980         padding: .25em;
1981 }
1982
1983 .ifacebadge {
1984         display: inline-block;
1985         flex-direction: row;
1986         white-space: nowrap;
1987         border: 1px solid var(--border-color-high);
1988         padding: 2px;
1989         background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-medium));
1990         color: var(--text-color-high);
1991         text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75);
1992         border-radius: 4px;
1993         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);
1994         cursor: default;
1995         line-height: 1.2em;
1996 }
1997
1998 .ifacebadge img {
1999         width: 16px;
2000         height: 16px;
2001         vertical-align: middle;
2002 }
2003
2004 .ifacebadge-active {
2005         border-color: #000;
2006         font-weight: bold;
2007 }
2008
2009 .network-status-table {
2010         display: flex;
2011         flex-wrap: wrap;
2012 }
2013
2014 .network-status-table .ifacebox {
2015         margin: .5em;
2016         flex-grow: 1;
2017 }
2018
2019 .network-status-table .ifacebox-body {
2020         display: flex;
2021         flex-direction: column;
2022         height: 100%;
2023         text-align: left;
2024 }
2025
2026 .network-status-table .ifacebox-body > * {
2027         margin: .25em;
2028 }
2029
2030 .network-status-table .ifacebox-body > span {
2031         flex: 10 10 auto;
2032         height: 100%;
2033 }
2034
2035 .network-status-table .ifacebox-body > div {
2036         margin: -.125em;
2037         display: flex;
2038         flex-wrap: wrap;
2039 }
2040
2041 #dsl_status_table .ifacebox-body span > strong {
2042         display: inline-block;
2043         min-width: 35%;
2044 }
2045
2046 .ifacebadge.large,
2047 .network-status-table .ifacebox-body .ifacebadge {
2048         display: flex;
2049         flex: 1;
2050         padding: .25em;
2051         min-width: 220px;
2052         margin: .125em;
2053 }
2054
2055 .ifacebadge.large {
2056         display: inline-flex;
2057 }
2058
2059 .network-status-table .ifacebox-body .ifacebadge > span {
2060         overflow: hidden;
2061         text-overflow: ellipsis;
2062 }
2063
2064 .ifacebadge > *,
2065 .ifacebadge.large > * {
2066         margin: 0 .125em;
2067 }
2068
2069 .zonebadge {
2070         padding: 2px;
2071         border-radius: 4px;
2072         display: inline-block;
2073         white-space: nowrap;
2074         color: #666;
2075         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2076 }
2077
2078 .zonebadge > em,
2079 .zonebadge > strong {
2080         margin: 0 2px;
2081         display: inline-block;
2082 }
2083
2084 .zonebadge input {
2085         width: 6em;
2086 }
2087
2088 .zonebadge > .ifacebadge {
2089         margin-left: 2px;
2090 }
2091
2092 .zonebadge-empty {
2093         border: 1px dashed #aaa;
2094         color: #aaa;
2095         font-style: italic;
2096         font-size: smaller;
2097 }
2098
2099 div.cbi-value var,
2100 .td.cbi-value-field var {
2101         font-style: italic;
2102         color: #0069d6;
2103 }
2104
2105 div.cbi-value var[data-tooltip],
2106 .td.cbi-value-field var[data-tooltip],
2107 div.cbi-value var.cbi-tooltip-container,
2108 .td.cbi-value-field var.cbi-tooltip-container {
2109         cursor: help;
2110         border-bottom: 1px dotted #0069d6;
2111 }
2112
2113 div.cbi-value var.cbi-tooltip-container,
2114 .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip {
2115         font-style: normal;
2116         white-space: normal;
2117         color: var(--text-color-high);
2118 }
2119
2120 #modal_overlay > .modal.uci-dialog,
2121 #modal_overlay > .modal.cbi-modal {
2122         max-width: 900px;
2123 }
2124
2125 .uci-change-list {
2126         line-height: 170%;
2127         white-space: pre;
2128 }
2129
2130 .uci-change-list > del,
2131 .uci-change-list > ins,
2132 .uci-change-list > var,
2133 .uci-change-legend-label > del,
2134 .uci-change-legend-label > ins,
2135 .uci-change-legend-label > var {
2136         margin-bottom: 2px;
2137         border: 1px solid #ccc;
2138         background: #eee;
2139         line-height: 15px;
2140         overflow: hidden;
2141         text-overflow: ellipsis;
2142         padding: 2px;
2143 }
2144
2145 .uci-change-list > * > del,
2146 .uci-change-list > * > ins,
2147 .uci-change-list > * > var {
2148         overflow: hidden;
2149         text-overflow: ellipsis;
2150 }
2151
2152 .uci-change-list del,
2153 .uci-change-list ins,
2154 .uci-change-list var,
2155 .uci-change-legend-label del,
2156 .uci-change-legend-label ins,
2157 .uci-change-legend-label var {
2158         text-decoration: none;
2159         font-family: monospace;
2160         font-style: normal;
2161         color: #404040;
2162         display: block;
2163 }
2164
2165 .uci-change-list ins,
2166 .uci-change-legend-label ins {
2167         border-color: #0f0;
2168         background: #cfc;
2169 }
2170
2171 .uci-change-list del,
2172 .uci-change-legend-label del {
2173         border-color: #f00;
2174         background: #fcc;
2175 }
2176
2177 .uci-change-list var,
2178 .uci-change-legend-label var {
2179         border-color: #ccc;
2180         background: #eee;
2181 }
2182
2183 .uci-change-legend {
2184         display: flex;
2185         flex-wrap: wrap;
2186 }
2187
2188 .uci-change-legend-label {
2189         flex-basis: 150px;
2190         margin: 2px;
2191         display: flex;
2192         align-items: center;
2193 }
2194
2195 .uci-change-legend-label > ins,
2196 .uci-change-legend-label > del,
2197 .uci-change-legend-label > var {
2198         margin-right: 4px;
2199         width: 16px;
2200         height: 16px;
2201         display: flex;
2202 }
2203
2204 .uci-change-legend-label > var > * {
2205         flex-basis: 100%;
2206 }
2207
2208 html body.apply-overlay-active {
2209         height: calc(100vh - 63px);
2210 }
2211
2212 #applyreboot-section {
2213         line-height: 300%;
2214 }
2215
2216 [data-page="admin-network-dhcp"] [data-name="ip"] {
2217         width: 15%;
2218 }
2219
2220 @keyframes flash {
2221         0% { opacity: 1; }
2222         50% { opacity: .5; }
2223         100% { opacity: 1; }
2224 }
2225
2226 .flash {
2227         animation: flash .35s;
2228 }
2229
2230 .spinning {
2231         position: relative;
2232         padding-left: 32px !important;
2233 }
2234
2235 .spinning::before {
2236         position: absolute;
2237         top: 0;
2238         left: 0;
2239         bottom: 0;
2240         width: 32px;
2241         content: " ";
2242         background: url(../resources/icons/loading.gif) no-repeat center;
2243         background-size: 16px;
2244 }
2245
2246 [data-tab-title] {
2247         height: 0;
2248         opacity: 0;
2249         overflow: hidden;
2250 }
2251
2252 [data-tab-active="true"] {
2253         opacity: 1;
2254         height: auto;
2255         overflow: visible;
2256         transition: opacity .25s ease-in;
2257 }
2258
2259 .cbi-filebrowser {
2260         min-width: 210px;
2261         max-width: 100%;
2262         border: 1px solid #ccc;
2263         border-radius: 3px;
2264         display: flex;
2265         flex-direction: column;
2266         opacity: 0;
2267         height: 0;
2268         overflow: hidden;
2269 }
2270
2271 .cbi-filebrowser.open {
2272         opacity: 1;
2273         height: auto;
2274         overflow: visible;
2275         transition: opacity .25s ease-in;
2276 }
2277
2278 .cbi-filebrowser > * {
2279         max-width: 100%;
2280         overflow: hidden;
2281         text-overflow: ellipsis;
2282         padding: 0 0 .25em 0;
2283         margin: .25em .25em 0px .25em;
2284         white-space: nowrap;
2285         border-bottom: 1px solid #ccc;
2286 }
2287
2288 .cbi-filebrowser .cbi-button-positive {
2289         margin-right: .25em;
2290 }
2291
2292 .cbi-filebrowser > div {
2293         border-bottom: none;
2294 }
2295
2296 .cbi-filebrowser > ul > li {
2297         display: flex;
2298         flex-direction: row;
2299 }
2300
2301 .cbi-filebrowser > ul > li:hover {
2302         background: #f5f5f5;
2303 }
2304
2305 .cbi-filebrowser > ul > li > div:first-child {
2306         flex: 10;
2307         overflow: hidden;
2308         text-overflow: ellipsis;
2309 }
2310
2311 .cbi-filebrowser > ul > li > div:last-child {
2312         flex: 3;
2313         text-align: right;
2314 }
2315
2316 .cbi-filebrowser > ul > li > div:last-child > button {
2317         padding: .125em .25em;
2318         margin: 1px 0 1px .25em;
2319 }
2320
2321 .cbi-filebrowser .upload {
2322         display: flex;
2323         flex-direction: row;
2324         flex-wrap: wrap;
2325         margin: 0 -.125em .25em -.125em;
2326         padding: 0 0 .125em 0px;
2327         border-bottom: 1px solid #ccc;
2328 }
2329
2330 .cbi-filebrowser .upload > * {
2331         margin: .125em;
2332         flex: 1;
2333 }
2334
2335 .cbi-filebrowser .upload > .btn {
2336         flex-basis: 60px;
2337 }
2338
2339 .cbi-filebrowser .upload > div {
2340         flex: 10;
2341         min-width: 150px;
2342 }
2343
2344 .cbi-filebrowser .upload > div > input {
2345         width: 100%;
2346 }
2347
2348 @keyframes fade-in {
2349         0% { opacity: 0; }
2350         100% { opacity: 1; }
2351 }
2352
2353 @keyframes fade-out {
2354         0% { opacity: 1; }
2355         100% { opacity: 0; }
2356 }
2357
2358 .fade-in {
2359         animation: fade-in .4s ease;
2360 }
2361
2362 .fade-out {
2363         animation: fade-out .4s ease;
2364 }
2365
2366 .assoclist .ifacebadge {
2367         display: flex;
2368         flex-direction: column;
2369         align-items: center;
2370         white-space: normal;
2371         text-align: center;
2372 }
2373
2374 .assoclist .ifacebadge > img {
2375         margin: .2em;
2376 }
2377
2378 .assoclist .td:nth-of-type(3),
2379 .assoclist .td:nth-of-type(5) {
2380         width: 25%;
2381 }
2382
2383 .assoclist .td:nth-of-type(6) button {
2384         word-break: normal;
2385 }