themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css

   1 :root {
   2         --main-bright-color: #00A3E1;
   3         --main-dark-color: #002B49;
   4         --secondary-bright-color: #FFFFFF;
   5         --secondary-dark-color: #212322;
   6         --danger-color: #CC1111;
   7         --warning-color: #CC8800;
   8         --success-color: #5CB85C;
   9         --regular-font: "GalanoGrotesqueW00-Regular";
  10         --base-font-size: 16px;
  11 }
  12
  13 @font-face {
  14         font-family: "GalanoGrotesqueW00-Regular";
  15         src: url("GalanoGrotesqueW00-Regular.woff2") format("woff2");
  16 }
  17
  18 /*
  19  * resets and base style
  20  */
  21
  22 * {
  23         margin: 0;
  24         padding: 0;
  25         box-sizing: border-box;
  26         text-decoration: none;
  27         list-style: none;
  28         color: inherit;
  29         font-family: var(--regular-font), "sans-serif";
  30         border: none;
  31         font-size: 100%;
  32         background: none;
  33         outline: none;
  34         -webkit-appearance: none;
  35         -webkit-text-size-adjust: none;
  36 }
  37
  38 html {
  39         height: 100%;
  40         width: 100%;
  41         max-width: 1366px;
  42         margin: 0 auto;
  43         background: #fff linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0 ,.5), rgba(0, 0, 0, .8));
  44 }
  45
  46 body {
  47         background: var(--secondary-bright-color);
  48         color: var(--secondary-dark-color);
  49         font-size: var(--base-font-size);
  50         cursor: default;
  51         display: inline-flex;
  52         flex-direction: column;
  53         min-height: 100%;
  54         min-width: 100%;
  55 }
  56
  57 /*
  58  * scaffholding
  59  */
  60
  61 #menubar {
  62         background-color: var(--main-bright-color);
  63         background-image: url("logo.svg");
  64         background-position: 10px center;
  65         background-size: 50px 50px;
  66         background-repeat: no-repeat;
  67         padding: 0 1em 0 70px;
  68         min-height: 70px;
  69         display: flex;
  70         align-items: center;
  71         color: var(--secondary-bright-color);
  72         flex: 0;
  73         width: 100%;
  74         box-shadow: inset 0 0 1px var(--main-dark-color);
  75 }
  76
  77 #menubar > * {
  78         flex: 1 1 auto;
  79 }
  80
  81 #menubar .hostname {
  82         font-weight: bold;
  83         font-size: 2em;
  84         white-space: nowrap;
  85         overflow: hidden;
  86         text-overflow: ellipsis;
  87 }
  88
  89 #menubar .distversion {
  90         flex: 3;
  91 }
  92
  93 #indicators {
  94         flex: 1 1 25%;
  95         text-align: right;
  96 }
  97
  98 #indicators > * {
  99         background: var(--secondary-bright-color);
 100         color: var(--main-bright-color);
 101         display: inline-block;
 102         font-size: .85em;
 103         line-height: 1.5em;
 104         padding: 0 .5em;
 105         margin: .125em;
 106         border-radius: 1em;
 107         cursor: pointer;
 108         white-space: nowrap;
 109 }
 110
 111 #indicators > [data-style="inactive"] {
 112         background: var(--main-bright-color);
 113         color: var(--secondary-bright-color);
 114         border: 2px solid var(--secondary-bright-color);
 115         line-height: calc(1.5em - 4px);
 116         padding: 0 calc(.5em - 2px);
 117 }
 118
 119 #menubar h2,
 120 .skiplink {
 121         display: none;
 122 }
 123
 124 #modemenu {
 125         background: var(--main-bright-color);
 126         padding: .5rem 1rem;
 127         display: flex;
 128         align-items: center;
 129         color: var(--secondary-bright-color);
 130         box-shadow: inset 0 0 1px var(--main-dark-color);
 131         font-size: 1rem;
 132         flex-wrap: wrap;
 133 }
 134
 135 #modemenu > * {
 136         margin: .125rem;
 137 }
 138
 139 #modemenu > .active {
 140         font-weight: bold;
 141         border-bottom: 2px solid var(--secondary-bright-color);
 142 }
 143
 144 #maincontainer {
 145         flex-direction: row;
 146         display: inline-flex;
 147         flex: 1 0 auto;
 148 }
 149
 150 #mainmenu {
 151         flex: 1 1 200px;
 152         background: var(--main-dark-color);
 153         color: var(--main-bright-color);
 154         padding: 1em;
 155 }
 156
 157 #mainmenu:empty {
 158         max-width: 0;
 159         padding: 1em 0;
 160         transition: all .2s ease-in-out;
 161 }
 162
 163 #mainmenu > div {
 164         position: sticky;
 165         top: 1em;
 166 }
 167
 168 #mainmenu ul {
 169         padding: 0;
 170         margin: 0 0 0 .5em;
 171         line-height: 1.5em;
 172 }
 173
 174 #mainmenu ul > li {
 175         list-style: none;
 176 }
 177
 178 #mainmenu li > ul {
 179         max-height: 0;
 180         overflow: hidden;
 181         transition: max-height .1s ease-in-out;
 182 }
 183
 184 #mainmenu li.selected > a {
 185         color: var(--secondary-bright-color);
 186 }
 187
 188 #mainmenu ul:not(.active) > li.selected > ul,
 189 #mainmenu li.active > ul {
 190         max-height: 3000px;
 191         transition: max-height 1s ease-in-out;
 192         margin: 0 0 .5em .5em;
 193 }
 194
 195 #mainmenu .l1 > li > a {
 196         font-weight: bold;
 197         font-size: 1.05em;
 198 }
 199
 200 #maincontent {
 201         flex: 10;
 202         padding: 1em 1em 0 1em;
 203 }
 204
 205 body > .luci {
 206         flex: 0;
 207         font-size: .7em;
 208         padding: .25em;
 209         text-align: right;
 210         background: var(--main-bright-color);
 211         color: var(--secondary-bright-color);
 212         margin: 0;
 213 }
 214
 215 /*
 216  * modal
 217  */
 218
 219 body.modal-overlay-active {
 220         overflow: hidden;
 221 }
 222
 223 body.modal-overlay-active #modal_overlay {
 224         left: 0;
 225         right: 0;
 226         opacity: 1;
 227 }
 228
 229 #modal_overlay {
 230         position: fixed;
 231         top: 0;
 232         bottom: 0;
 233         left: -10000px;
 234         right: 10000px;
 235         background: rgba(0, 0, 0, 0.7);
 236         z-index: 10000;
 237         overflow-y: scroll;
 238         -webkit-overflow-scrolling: touch;
 239         transition: opacity .125s ease-in;
 240         opacity: 0;
 241 }
 242
 243 #modal_overlay > .modal {
 244         max-width: 1300px;
 245         width: 80%;
 246         margin: 10% auto 5rem auto;
 247         background: var(--secondary-bright-color);
 248         box-shadow: 0 0 3px 1px var(--main-bright-color);
 249         padding: .5em;
 250         border-radius: .25em;
 251         display: flex;
 252         flex-direction: column;
 253 }
 254
 255 .modal > h4:first-child {
 256         padding: .5rem;
 257         margin: -.5rem -.5rem .5rem -.5rem;
 258         background: var(--main-bright-color);
 259         color: var(--secondary-bright-color);
 260         border-radius: .25rem .25rem 0 0;
 261 }
 262
 263 .modal > *:first-child:last-child {
 264         margin: .5em 0 !important;
 265 }
 266
 267 .modal .cbi-section > legend:first-child { font-size: 120%; }
 268
 269
 270 /*
 271  * table layout
 272  */
 273
 274 table {
 275         width: 100%;
 276         margin: 0 0 1rem 0;
 277         position: relative;
 278         border-collapse: collapse;
 279 }
 280
 281 tr.cbi-section-table-titles[data-title]::before {
 282         font-weight: bold;
 283         border-top: none;
 284 }
 285
 286 tr[data-title]::before {
 287         content: attr(data-title);
 288         display: table-cell;
 289         border-top: 1px solid var(--main-dark-color);
 290         padding: .5em;
 291 }
 292
 293 th {
 294         text-align: left;
 295         font-weight: bold;
 296         padding: .5em;
 297         /* word-break: break-word; */
 298 }
 299
 300 .cbi-section-table-descr th {
 301         opacity: .8;
 302         font-size: 90%;
 303         font-weight: normal;
 304 }
 305
 306 td {
 307         border-top: 1px solid var(--main-dark-color);
 308         padding: .5em;
 309         vertical-align: middle;
 310 }
 311
 312 td input:not([type]),
 313 td input[type="text"],
 314 td input[type="password"],
 315 td select,
 316 td .cbi-dropdown:not(.btn):not(.cbi-button),
 317 td .cbi-dynlist,
 318 td .control-group {
 319         min-width: auto;
 320         width: 100%;
 321 }
 322
 323 tr.drag-over-above {
 324         box-shadow: 0 -6px 6px var(--main-bright-color);
 325 }
 326
 327 tr.drag-over-below {
 328         box-shadow: 0 6px 6px var(--main-bright-color);
 329 }
 330
 331 tr.placeholder {
 332         height: 4em;
 333         position: relative;
 334 }
 335
 336 tr.placeholder > td {
 337         position: absolute;
 338         left: 0;
 339         right: 0;
 340         bottom: 0;
 341         text-align: center;
 342         line-height: 3em;
 343         font-size: 90%;
 344         opacity: .8;
 345 }
 346
 347 /*
 348  * view specific table invariants
 349  */
 350
 351  #cbi-wireless-wifi-device .ifacebadge {
 352         flex-direction: column;
 353         justify-content: space-around;
 354  }
 355
 356 .assoclist td,
 357 [data-page="admin-status-overview"] td {
 358         font-size: .9rem;
 359         vertical-align: middle;
 360 }
 361
 362 .assoclist td:nth-of-type(3) > span {
 363         display: block;
 364         max-width: 270px;
 365         font-size: .8rem;
 366 }
 367
 368 .assoclist td:nth-of-type(5) > span {
 369         font-size: .8rem;
 370 }
 371
 372 .assoclist td > .ifacebadge {
 373         flex-wrap: wrap;
 374         justify-content: space-around;
 375         max-width: 120px;
 376         padding: .2em;
 377 }
 378
 379 .assoclist td > .ifacebadge::after {
 380         overflow: hidden;
 381         text-overflow: ellipsis;
 382 }
 383
 384 .assoclist td > .ifacebadge > img {
 385         margin: 0 25px;
 386 }
 387
 388 .assoclist td > .ifacebadge[data-ssid][data-ifname] > span {
 389         display: none;
 390 }
 391
 392 .assoclist td > .ifacebadge[data-ssid][data-ifname]::after {
 393         content: attr(data-ssid) " (" attr(data-ifname) ")";
 394 }
 395
 396 [data-page="admin-status-overview"] td:nth-of-type(3) {
 397         min-width: 100px;
 398 }
 399
 400 [data-page="admin-network-firewall"] table > tr > *:nth-child(1) {
 401         flex: 1 1 30%;
 402 }
 403
 404 [data-page="admin-network-wireless"] .cbi-section-actions > div {
 405         display: flex;
 406 }
 407
 408 [data-page="admin-network-wireless"] .cbi-section-actions > div > * {
 409         flex: 1;
 410 }
 411
 412 [data-page="admin-status-processes"] table td:nth-of-type(3),
 413 [data-tab="leases"] table td[data-name="duid"] {
 414         word-break: break-word;
 415 }
 416
 417 /*
 418  * uci changelog
 419  */
 420
 421 .uci-change-list {
 422         font-size: 90%;
 423         white-space: pre;
 424         overflow: hidden;
 425 }
 426
 427 .uci-change-list del,
 428 .uci-change-list ins,
 429 .uci-change-list var,
 430 .uci-change-legend-label del,
 431 .uci-change-legend-label ins,
 432 .uci-change-legend-label var {
 433         text-decoration: none;
 434         font-family: monospace;
 435         font-style: normal;
 436         border: 1px solid #ccc;
 437         background: #eee;
 438         padding: 2px;
 439         display: block;
 440         line-height: 15px;
 441         margin-bottom: 1px;
 442 }
 443
 444 .uci-change-list h5 {
 445         margin: .5em 0 .25em 0;
 446 }
 447
 448 .uci-change-list ins,
 449 .uci-change-legend-label ins {
 450         border-color: #0f0;
 451         background: #cfc;
 452 }
 453
 454 .uci-change-list del,
 455 .uci-change-legend-label del {
 456         border-color: #f00;
 457         background: #fcc;
 458 }
 459
 460 .uci-change-list var,
 461 .uci-change-legend-label var {
 462         border-color: #ccc;
 463         background: #eee;
 464 }
 465
 466 .uci-change-list var ins,
 467 .uci-change-list var del {
 468         display: inline-block;
 469         border: none;
 470         width: 100%;
 471         padding: 0;
 472 }
 473
 474 .uci-change-legend {
 475         margin: .5em 0 0 0;
 476         display: flex;
 477         flex-wrap: wrap;
 478 }
 479
 480 .uci-change-legend-label {
 481         flex: 1 1 10em;
 482         white-space: nowrap;
 483 }
 484
 485 .uci-change-legend-label > ins,
 486 .uci-change-legend-label > del,
 487 .uci-change-legend-label > var {
 488         float: left;
 489         margin-right: 4px;
 490         width: 16px;
 491         height: 16px;
 492         display: block;
 493         position: relative;
 494 }
 495
 496 .uci-change-legend-label var ins,
 497 .uci-change-legend-label var del {
 498         border: none;
 499         position: absolute;
 500         top: 2px;
 501         left: 2px;
 502         right: 2px;
 503         bottom: 2px;
 504 }
 505
 506 /*
 507  * alignment helpers
 508  */
 509
 510 .left {
 511         text-align: left !important;
 512 }
 513
 514 .right {
 515         text-align: right !important;
 516 }
 517
 518 .center {
 519         text-align: center !important;
 520 }
 521
 522 .top {
 523         vertical-align: top !important;
 524 }
 525
 526 .bottom {
 527         vertical-align: bottom !important;
 528 }
 529
 530 .middle {
 531         vertical-align: middle !important;
 532 }
 533
 534 .nowrap {
 535         white-space: nowrap !important;
 536 }
 537
 538 .hidden {
 539         display: none !important;
 540 }
 541
 542 /*
 543  * legacy hacks
 544  */
 545
 546 [width="33%"] {
 547         width: 33%;
 548         max-width: 33%;
 549 }
 550
 551 [width="50%"] {
 552         width: 50%;
 553         max-width: 50%;
 554 }
 555
 556 [data-name="_freq"] select {
 557         min-width: auto;
 558 }
 559
 560 .cbi-value-field > div:first-child + br {
 561         display: none;
 562 }
 563
 564 /*
 565  * typography
 566  */
 567
 568 h1, h2, h3, h4, h5, h6,
 569 .cbi-section > legend:first-child {
 570         font-weight: bold;
 571         margin: 0 0 1rem 0;
 572 }
 573
 574 strong, b {
 575         font-weight: bold;
 576 }
 577
 578 h1 { font-size: 160%; }
 579 h2 { font-size: 150%; }
 580 h3 { font-size: 140%; }
 581 h4 { font-size: 130%; }
 582 h5 { font-size: 120%; }
 583 h6 { font-size: 110%; }
 584
 585 .cbi-section > legend:first-child { font-size: 140%; }
 586
 587 p, ul, textarea {
 588         margin: 0 0 1em 0;
 589 }
 590
 591 p > textarea:last-child {
 592         margin: 0;
 593 }
 594
 595 var {
 596         color: var(--main-dark-color);
 597         font-weight: bold;
 598 }
 599
 600 code {
 601         font-family: monospace;
 602         color: var(--main-dark-color);
 603 }
 604
 605 pre {
 606         font-family: monospace;
 607         margin: 0 0 1em 0;
 608         font-size: .9rem;
 609         box-shadow: inset 0 0 2px var(--main-dark-color);
 610         padding: .25rem;
 611         overflow: auto;
 612 }
 613
 614 big {
 615         font-size: 110%;
 616 }
 617
 618 small {
 619         font-size: 95%;
 620 }
 621
 622 ul {
 623         padding: 0 0 0 1.5em;
 624 }
 625
 626 ul > li {
 627         list-style: disc;
 628 }
 629
 630 /*
 631  * widgets
 632  */
 633
 634 .ifacebox, .ifacebadge, .zonebadge {
 635         display: inline-flex;
 636         line-height: 1.8em;
 637         padding: 0 .25em;
 638         margin: .25em;
 639         box-shadow: 0px 0px 2px var(--main-dark-color);
 640         font-size: .9em;
 641         border-radius: .5em;
 642         overflow: hidden;
 643         font-size: .8rem;
 644         vertical-align: text-top;
 645         background: var(--secondary-bright-color);
 646         align-items: center;
 647         color: var(--secondary-dark-color);
 648         vertical-align: middle;
 649 }
 650
 651 .zonebadge > .ifacebadge {
 652         margin: .125em -.125em .125em .35em;
 653 }
 654
 655 .zonebadge > .ifacebadge > img
 656 {
 657         margin: .125em 0 .125em .25em;
 658 }
 659
 660 .ifacebox {
 661         display: inline-flex;
 662         flex-direction: column;
 663         padding: 0;
 664         text-align: center;
 665         width: 100%;
 666         max-width: 100px;
 667 }
 668
 669 .ifacebox-head {
 670         background: var(--main-bright-color);
 671         width: 100%;
 672 }
 673
 674 .ifacebox-body {
 675         text-align: center;
 676         padding: .3em .25em .25em .25em;
 677         white-space: nowrap;
 678 }
 679
 680 .ifacebadge {
 681         display: inline-flex;
 682         align-items: center;
 683 }
 684
 685 .ifacebadge.large {
 686         line-height: 1.3em;
 687 }
 688
 689 .ifacebadge > img {
 690         vertical-align: text-bottom;
 691         margin: .25em;
 692         height: 16px;
 693 }
 694
 695 .ifacebadge > * {
 696         margin-left: .25em;
 697 }
 698
 699 .network-status-table {
 700         display: inline-flex;
 701         flex-wrap: wrap;
 702         width: 100%;
 703         margin: 0 -.2em 1em -.2em;
 704 }
 705
 706 .network-status-table > .ifacebox {
 707         max-width: none;
 708         flex: 1 1 45%;
 709         margin: .25em;
 710         min-width: 250px;
 711 }
 712
 713 .network-status-table > .ifacebox .ifacebadge {
 714         font-size: 100%;
 715         max-width: none;
 716         flex: 1 1 45%;
 717         margin: .2em;
 718 }
 719
 720 .network-status-table .ifacebox-body > div {
 721         display: flex;
 722         flex-wrap: wrap;
 723         margin: .3em -.1em -.1em -.1em;
 724 }
 725
 726 .cbi-tooltip-container {
 727         cursor: help;
 728 }
 729
 730 .cbi-tooltip {
 731         position: absolute;
 732         z-index: 10000;
 733         left: -10000px;
 734         box-shadow: 0 0 2px rgba(0, 0, 0, .7);
 735         border-radius: 3px;
 736         background: var(--secondary-bright-color);
 737         white-space: pre;
 738         padding: 2px 5px;
 739         opacity: 0;
 740         transition: opacity .25s ease-in;
 741         font-size: .8rem;
 742 }
 743
 744 .cbi-tooltip.error {
 745         color: var(--danger-color);
 746 }
 747
 748 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
 749         left: auto;
 750         opacity: 1;
 751         transition: opacity .25s ease-in;
 752 }
 753
 754 .zone-forwards {
 755         display: flex;
 756         align-items: center;
 757 }
 758
 759 .cbi-progressbar {
 760         border-radius: .25em;
 761         position: relative;
 762         min-width: 20rem;
 763         height: 1.5em;
 764         box-shadow: 0 0 2px var(--main-dark-color);
 765         overflow: hidden;
 766         margin: .125rem 0;
 767 }
 768
 769 .cbi-progressbar > div {
 770         background: var(--main-bright-color);
 771         height: 100%;
 772         transition: width .25s ease-in;
 773         width: 0%;
 774 }
 775
 776 .cbi-progressbar::after {
 777         position: absolute;
 778         bottom: 0;
 779         top: 0;
 780         right: 0;
 781         left: 0;
 782         text-align: center;
 783         text-shadow: 0 0 2px var(--secondary-bright-color);
 784         content: attr(title);
 785         white-space: nowrap;
 786         line-height: 1.5em;
 787 }
 788
 789 .cbi-tabmenu {
 790         padding: 0;
 791         margin: 0 -.5em 1em -.5em;
 792         font-weight: bold;
 793         color: var(--main-dark-color);
 794 }
 795
 796 .cbi-tabmenu > li {
 797         display: inline-flex;
 798         white-space: nowrap;
 799         opacity: 1;
 800         height: 1.8em;
 801         max-height: none;
 802         overflow: visible;
 803 }
 804
 805 .cbi-tabmenu > li > a {
 806         flex: 1;
 807         margin: .1em .5em;
 808 }
 809
 810 .cbi-tabmenu > .cbi-tab > a {
 811         border-bottom: 2px solid var(--main-dark-color);
 812 }
 813
 814 [data-tab] {
 815         opacity: 0;
 816         max-height: 0;
 817         transition: opacity .25s ease-in-out;
 818         overflow: hidden;
 819 }
 820
 821 [data-tab-active="true"] {
 822         opacity: 1;
 823         height: auto;
 824         max-height: none;
 825         overflow: visible;
 826 }
 827
 828 .alert-message:not(.modal) {
 829         box-shadow: 0 0 3px var(--secondary-dark-color);
 830         padding: .5em;
 831         margin: 0 0 1em 0;
 832         background: var(--warning-color);
 833         color: var(--secondary-bright-color);
 834         transition: opacity .4s ease;
 835 }
 836
 837 .alert-message + .alert-message {
 838         margin: -.5em 0 1em 0;
 839 }
 840
 841 .alert-message.info {
 842         background: var(--main-bright-color);
 843 }
 844
 845 .alert-message.warning {
 846         background: var(--warning-color);
 847 }
 848
 849 .alert-message.danger {
 850         background: var(--danger-color);
 851 }
 852
 853 .alert-message.success {
 854         background: var(--success-color);
 855 }
 856
 857 .alert-message .btn {
 858         background: inherit;
 859         box-shadow: 0 0 2px var(--secondary-bright-color);
 860 }
 861
 862 .alert-message .btn:hover {
 863         box-shadow: 0 0 4px 1px var(--secondary-bright-color);
 864 }
 865
 866 @keyframes fade-in {
 867         0% { opacity: 0; }
 868         100% { opacity: 1; }
 869 }
 870
 871 @keyframes fade-out {
 872         0% { opacity: 1; }
 873         100% { opacity: 0; }
 874 }
 875
 876 .fade-in {
 877         animation: fade-in .4s ease;
 878 }
 879
 880 .fade-out {
 881         animation: fade-out .4s ease;
 882         opacity: 0;
 883 }
 884
 885 /*
 886  * forms
 887  */
 888
 889 button, .btn {
 890         background: var(--main-bright-color);
 891         color: var(--secondary-bright-color);
 892         line-height: 1.5em;
 893         border-radius: .25em;
 894         cursor: pointer;
 895         box-shadow: 0 0 2px var(--main-dark-color);
 896         padding: 0 .5em;
 897         display: inline-block;
 898 }
 899
 900 button:hover, .btn:hover {
 901         box-shadow: 0 0 6px var(--main-bright-color);
 902 }
 903
 904 button + button, .btn + .btn, button + .btn, .btn + button, select + button {
 905         margin-left: .25em;
 906 }
 907
 908 button.important {
 909         background: var(--main-dark-color);
 910 }
 911
 912 button[disabled], button.disabled, .btn[disabled], .btn.disabled {
 913         pointer-events: none;
 914         opacity: .6;
 915 }
 916
 917 .cbi-button-apply, .cbi-button-positive {
 918         background: var(--main-dark-color);
 919 }
 920
 921 .cbi-button-negative, .cbi-button-remove {
 922         background: var(--danger-color);
 923 }
 924
 925 .cbi-checkbox {
 926         position: relative;
 927 }
 928
 929 .cbi-checkbox input[type="checkbox"] {
 930         position: absolute;
 931         z-index: 10;
 932         -webkit-appearence: button;
 933         height: 1.3em;
 934         width: 1.3em;
 935         opacity: 0;
 936         cursor: pointer;
 937 }
 938
 939 .cbi-checkbox input[type="checkbox"] + label {
 940         position: relative;
 941         display: inline-block;
 942         width: 1.3em;
 943         height: 1.3em;
 944         vertical-align: text-top;
 945 }
 946
 947 .cbi-checkbox input[type="checkbox"] + label::before {
 948         content: "\0a";
 949         height: 1em;
 950         width: 1em;
 951         box-shadow: 0 0 2px var(--main-dark-color);
 952         display: inline-block;
 953         border-radius: .25em;
 954         margin: .15em 0;
 955         position: absolute;
 956         left: 0;
 957         top: 0;
 958 }
 959
 960 .cbi-checkbox input[type="checkbox"]:checked + label::after {
 961         content: "\0a";
 962         position: absolute;
 963         display: inline-block;
 964         background: var(--main-dark-color);
 965         top: .35em;
 966         left: .2em;
 967         width: .6em;
 968         height: .6em;
 969         border-radius: .15em;
 970         cursor: pointer;
 971 }
 972
 973 .cbi-checkbox input.cbi-input-invalid[type="checkbox"] + label::before {
 974         box-shadow: 0 0 2px var(--danger-color);
 975 }
 976
 977 .cbi-checkbox input.cbi-input-invalid[type="checkbox"]:checked + label::after {
 978         background: var(--danger-color);
 979 }
 980
 981 .cbi-checkbox input[type="checkbox"][disabled] + label::before,
 982 .cbi-checkbox input[type="checkbox"][disabled] + label::after {
 983         pointer-events: none;
 984         opacity: .6;
 985 }
 986
 987 .cbi-checkbox input[type="checkbox"][disabled] {
 988         pointer-events: none;
 989 }
 990
 991 input:not([type]),
 992 input[type="text"],
 993 input[type="password"],
 994 select,
 995 .cbi-dropdown:not(.btn):not(.cbi-button) {
 996         border-bottom: 2px solid transparent;
 997         box-shadow: inset 0 0 1px var(--main-dark-color);
 998         padding: 0 .2rem;
 999         line-height: 1.5rem;
1000         min-height: calc(1.5rem + 2px);
1001         min-width: 20rem;
1002         border-radius: .25em;
1003 }
1004
1005 input:not([type]):focus,
1006 input[type="text"]:focus,
1007 input[type="password"]:focus,
1008 select:focus,
1009 .cbi-dropdown:not(.btn):not(.cbi-button):focus,
1010 .cbi-dropdown[open]:not(.btn):not(.cbi-button) {
1011         border-color: var(--main-dark-color);
1012 }
1013
1014 input[disabled]:not([type]),
1015 input[disabled][type="text"],
1016 input[disabled][type="password"],
1017 select[disabled],
1018 .cbi-dynlist[disabled] {
1019         opacity: .6;
1020         pointer-events: none;
1021 }
1022
1023 input:not([type]) + .btn, input:not([type]) + button,
1024 input[type="text"] + .btn, input[type="text"] + button,
1025 input[type="password"] + .btn, input[type="password"] + button {
1026         margin: 0 0 2px -1px;
1027         background: var(--main-dark-color);
1028         border-radius: 0 .25em .25em 0;
1029 }
1030
1031 .control-group > select + .btn, .control-group > select + button {
1032         margin-left: .25em;
1033 }
1034
1035 .control-group > input:not([type]) + .btn, .control-group > input:not([type]) + button,
1036 .control-group > input[type="text"] + .btn, .control-group > input[type="text"] + button,
1037 .control-group > input[type="password"] + .btn, .control-group > input[type="password"] + button {
1038         margin: .125em .125em calc(.125em + 2px) calc(-.125em - .25em) !important;
1039 }
1040
1041 input[type="checkbox"] {
1042         height: 1em;
1043         vertical-align: middle;
1044         -webkit-appearance: checkbox;
1045 }
1046
1047 select {
1048         padding: .1rem 0;
1049         -webkit-appearance: menulist;
1050 }
1051
1052 textarea {
1053         width: 100%;
1054         box-shadow: inset 0 0 2px var(--main-dark-color);
1055         font-family: monospace;
1056         font-size: .9rem;
1057         padding: .2rem;
1058 }
1059
1060 .cbi-input-invalid,
1061 .cbi-input-invalid:focus {
1062         color: var(--danger-color);
1063         border-color: var(--danger-color) !important;
1064         box-shadow: inset 0 0 2px var(--danger-color);
1065 }
1066
1067 .control-group {
1068         display: inline-flex;
1069         margin: 0 -.125rem;
1070         min-width: 20.25em;
1071 }
1072
1073 .control-group > *,
1074 .control-group > .cbi-dropdown > ul > li {
1075         justify-content: space-around;
1076 }
1077
1078 .control-group > * {
1079         margin: .125rem !important;
1080         min-width: auto !important;
1081 }
1082
1083 .control-group > select,
1084 .control-group > input:not([type]),
1085 .control-group > input[type="text"],
1086 .control-group > input[type="password"] {
1087         flex: 10;
1088 }
1089
1090 .cbi-value {
1091         display: flex;
1092         flex-wrap: wrap;
1093         margin: 0 0 1em 0;
1094 }
1095
1096 .cbi-value > label:first-child {
1097         flex: 1 1 40%;
1098         padding: 0 .5em 0 0;
1099 }
1100
1101 .cbi-value > .cbi-value-field {
1102         flex: 2 2 55%;
1103 }
1104
1105 .cbi-value > .cbi-section {
1106         flex: 1 1 100%;
1107 }
1108
1109 .cbi-map-descr,
1110 .cbi-tab-descr,
1111 .cbi-section-descr,
1112 .cbi-value-description,
1113 .cbi-value[data-widget="CBI.DummyValue"] > div:first-child {
1114         opacity: .8;
1115         font-size: .9rem;
1116         padding: .2em 0;
1117 }
1118
1119 .cbi-map-descr,
1120 .cbi-tab-descr,
1121 .cbi-section-descr,
1122 .cbi-section-table,
1123 .cbi-section-create {
1124         margin: 0 0 1em 0;
1125 }
1126
1127 .cbi-dynlist {
1128         display: inline-block;
1129         font-size: 90%;
1130         min-height: calc(1.5em + 2px);
1131         line-height: 1.5em;
1132         min-width: 20rem;
1133         flex-wrap: wrap;
1134 }
1135
1136 .cbi-dynlist > .item {
1137         box-shadow: 0 0 2px var(--main-dark-color);
1138         margin: .3em 0;
1139         padding: .15em 2em .15em .2em;
1140         border-radius: .25em;
1141         position: relative;
1142         overflow: hidden;
1143         transition: box-shadow .25s ease-in-out;
1144         pointer-events: none;
1145         flex: 1 1 100%;
1146         word-break: break-all;
1147 }
1148
1149 .cbi-dynlist > .item::after {
1150         content: "-";
1151         top: 0;
1152         right: 0;
1153         bottom: 0;
1154         width: 1.6rem;
1155         background: var(--main-bright-color);
1156         display: flex;
1157         align-items: center;
1158         justify-content: space-around;
1159         position: absolute;
1160         box-shadow: 0 0 2px var(--main-dark-color);
1161         text-align: center;
1162         color: var(--secondary-bright-color);
1163         cursor: pointer;
1164         pointer-events: all;
1165 }
1166
1167 .cbi-dynlist[disabled] > .item::after {
1168         pointer-events: none;
1169 }
1170
1171 .cbi-dynlist > .item:hover {
1172         box-shadow: 0 0 2px var(--main-bright-color);
1173 }
1174
1175 .cbi-dynlist > .add-item {
1176         flex: 1;
1177         display: flex;
1178 }
1179
1180 .cbi-dynlist > .add-item > input {
1181         flex: 1;
1182         min-width: 18.5rem;
1183         border-radius: .25rem 0 0 .25rem;
1184 }
1185
1186 .cbi-dynlist > .add-item > .btn {
1187         flex: 0 0 1.6rem;
1188         margin: 0 0 2px -1px;
1189         width: 1.6rem;
1190         text-align: center;
1191 }
1192
1193 .cbi-dropdown {
1194         display: inline-flex !important;
1195         cursor: pointer;
1196         height: auto;
1197         position: relative;
1198         padding: 0 !important;
1199 }
1200
1201 .cbi-dropdown:not(.btn):not(.cbi-button) {
1202         box-shadow: inset 0 0 1px var(--main-dark-color);
1203 }
1204
1205 .cbi-dropdown > ul {
1206         margin: 0 !important;
1207         padding: 0;
1208         list-style: none;
1209         overflow-x: hidden;
1210         overflow-y: auto;
1211         display: flex;
1212         width: 100%;
1213 }
1214
1215 .cbi-dropdown.btn > ul:not(.dropdown) {
1216         padding-left: .5em;
1217 }
1218
1219 .cbi-dropdown.btn.spinning > ul:not(.dropdown) {
1220         padding-left: 0;
1221 }
1222
1223 .cbi-dropdown.btn > ul.dropdown > li {
1224         color: var(--main-dark-color);
1225 }
1226
1227 .cbi-dropdown > ul.preview {
1228         display: none;
1229 }
1230
1231 .cbi-dropdown > .open,
1232 .cbi-dropdown > .more {
1233         flex-grow: 0;
1234         flex-shrink: 0;
1235         display: flex;
1236         flex-direction: column;
1237         justify-content: center;
1238         text-align: center;
1239         padding: 0 .25em;
1240 }
1241
1242 .cbi-dropdown.btn > .open,
1243 .cbi-dropdown.cbi-button > .open {
1244         padding: 0 .5em;
1245         margin-left: .5em;
1246         border-left: 1px solid;
1247 }
1248
1249 .cbi-dropdown > .more,
1250 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1251         display: none;
1252         justify-content: center;
1253         color: rgba(0, 0, 0, .5);
1254 }
1255
1256 .cbi-dropdown > ul > li {
1257         display: none;
1258         white-space: nowrap;
1259         overflow: hidden;
1260         text-overflow: ellipsis;
1261         flex-shrink: 1;
1262         flex-grow: 1;
1263         align-items: center;
1264         align-self: center;
1265         color: inherit;
1266 }
1267
1268 .cbi-dropdown > ul.dropdown > li,
1269 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1270         padding: 0 .25em;
1271 }
1272
1273 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1274 .cbi-dropdown > ul > li .hide-close { display: none; }
1275
1276 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1277         border-left: 1px solid #ccc;
1278 }
1279
1280 .cbi-dropdown[empty] > ul {
1281         max-width: 1px;
1282         max-height: 1.5em;
1283 }
1284
1285 .cbi-dropdown > ul > li > form {
1286         display: none;
1287         margin: 0;
1288         padding: 0;
1289         pointer-events: none;
1290 }
1291
1292 .cbi-dropdown > ul > li img {
1293         align-self: center;
1294         margin-right: .25em;
1295 }
1296
1297 .cbi-dropdown > ul > li input[type="text"] {
1298         margin: .25em 0;
1299         border: none;
1300         background: var(--secondary-bright-color);
1301 }
1302
1303 .cbi-dropdown[open] {
1304         position: relative;
1305 }
1306
1307 .cbi-dropdown[open] > ul.dropdown {
1308         display: block;
1309         background: var(--secondary-bright-color);
1310         box-shadow: 0 0 1px var(--main-dark-color), 0 0 4px rgba(0, 0, 0, .7);
1311         position: absolute;
1312         z-index: 1100;
1313         max-width: none;
1314         min-width: 100%;
1315         width: auto;
1316         transition: max-height .125s ease-in;
1317 }
1318
1319 .cbi-dropdown > ul > li[display],
1320 .cbi-dropdown[open] > ul.preview,
1321 .cbi-dropdown[open] > ul.dropdown > li,
1322 .cbi-dropdown[multiple] > ul > li > label,
1323 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1324 .cbi-dropdown[multiple][more] > .more,
1325 .cbi-dropdown[multiple][empty] > .more {
1326         flex-grow: 1;
1327         display: flex !important;
1328 }
1329
1330 .cbi-dropdown[empty] > ul > li,
1331 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1332 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1333         display: block !important;
1334 }
1335
1336 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1337 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1338
1339 .cbi-dropdown[open] > ul.dropdown > li {
1340         border-bottom: 1px solid #ccc;
1341 }
1342
1343 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1344         background: var(--main-dark-color);
1345         color: var(--secondary-bright-color);
1346 }
1347
1348 .cbi-dropdown[open] > ul.dropdown > li.focus {
1349         background: var(--main-bright-color);
1350 }
1351
1352 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1353         margin-bottom: 0;
1354         border-bottom: none;
1355 }
1356
1357 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1358         opacity: 0.7;
1359 }
1360
1361 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1362         width: 100%;
1363 }
1364
1365 .cbi-dropdown[disabled] {
1366         pointer-events: none;
1367         opacity: .6;
1368 }
1369
1370 .cbi-filebrowser {
1371         max-width: 100%;
1372         width: 1px;
1373         box-shadow: 0 0 2px var(--main-dark-color);
1374         border-radius: .25rem;
1375         display: flex;
1376         flex-direction: column;
1377         opacity: 0;
1378         height: 0;
1379         overflow: hidden;
1380 }
1381
1382 .cbi-filebrowser.open {
1383         min-width: 20rem;
1384         width: auto;
1385         opacity: 1;
1386         height: auto;
1387         overflow: visible;
1388         transition: opacity .25s ease-in;
1389 }
1390
1391 .cbi-filebrowser > * {
1392         max-width: 100%;
1393         overflow: hidden;
1394         text-overflow: ellipsis;
1395         padding: 0 0 .25em 0;
1396         margin: .25em .25em 0px .25em;
1397         white-space: nowrap;
1398         border-bottom: 1px solid var(--main-dark-color);
1399 }
1400
1401 .cbi-filebrowser .cbi-button-positive {
1402         margin-right: .25em;
1403 }
1404
1405 .cbi-filebrowser > div {
1406         border-bottom: none;
1407 }
1408
1409 .cbi-filebrowser > ul > li {
1410         display: flex;
1411         flex-direction: row;
1412         align-items: center;
1413 }
1414
1415 .cbi-filebrowser > ul > li a:hover {
1416         font-weight: bold;
1417         text-decoration: underline;
1418 }
1419
1420 .cbi-filebrowser > ul > li > div:first-child {
1421         flex: 10;
1422         overflow: hidden;
1423         text-overflow: ellipsis;
1424 }
1425
1426 .cbi-filebrowser > ul > li > div:last-child {
1427         flex: 3 3 10em;
1428         text-align: right;
1429 }
1430
1431 .cbi-filebrowser > ul > li > div:last-child > button {
1432         padding: .125em .25em;
1433         margin: 1px 0 1px .25em;
1434 }
1435
1436 .cbi-filebrowser .upload {
1437         display: flex;
1438         flex-direction: row;
1439         flex-wrap: wrap;
1440         margin: 0 -.125em .25em -.125em;
1441         padding: 0 0 .125em 0px;
1442         border-bottom: 1px solid var(--main-dark-color);
1443 }
1444
1445 .cbi-filebrowser .upload > * {
1446         margin: .125em;
1447         flex: 1;
1448 }
1449
1450 .cbi-filebrowser .upload > div > input {
1451         width: 100%;
1452 }
1453
1454 .cbi-section-actions {
1455         text-align: right;
1456 }
1457
1458 .cbi-page-actions {
1459         flex-wrap: wrap;
1460         width: 100%;
1461         justify-content: flex-end;
1462         margin-bottom: 1em;
1463         margin-top: 1em;
1464         border-top: 1px solid var(--main-dark-color);
1465         padding-top: 1em;
1466         text-align: right;
1467 }
1468
1469 div[id$=".ipaddr"] > input,
1470 .cbi-value-field > div > input[type="password"] {
1471         min-width: 18.5rem;
1472         border-radius: .25rem 0 0 .25rem;
1473 }
1474
1475 div[id$=".txpower"] {
1476         flex-wrap: wrap;
1477         align-items: center;
1478 }
1479
1480 div[id$=".txpower"] > span {
1481         white-space: nowrap;
1482         margin-left: .25em;
1483 }
1484
1485 div[id$=".editlist"] {
1486         flex: 1;
1487 }
1488
1489 [data-errors]::after {
1490         content: attr(data-errors);
1491         background: var(--danger-color);
1492         color: var(--secondary-bright-color);
1493         border-radius: .6rem;
1494         height: 1.1rem;
1495         padding: 0 .25rem;
1496         font-size: .9rem;
1497         display: inline-block;
1498         font-weight: bold;
1499         min-width: .6rem;
1500         line-height: 1rem;
1501         margin: -.1rem 0 0 -.2rem;
1502         text-align: center;
1503 }
1504
1505 @keyframes spin {
1506         100% { transform: rotate(360deg); }
1507 }
1508
1509 .spinning {
1510         position: relative;
1511         padding-left: 2.1em !important;
1512 }
1513
1514 .spinning::before {
1515         position: absolute;
1516         display: block;
1517         align-items: center;
1518         top: 0;
1519         bottom: 0;
1520         left: .4em;
1521         width: 1.4em;
1522         height: 1.4em;
1523         animation: spin 1s linear infinite;
1524         content: url("spinner.svg");
1525         margin: auto;
1526         line-height: 0;
1527 }
1528
1529 button.spinning, .btn.spinning {
1530         padding-left: 1.6em !important;
1531 }
1532
1533 button.spinning::before, .btn.spinning::before {
1534         filter: invert(1);
1535         left: .2em;
1536         width: 1.2em;
1537         height: 1.2em;
1538 }
1539
1540 #view > div.spinning:first-child {
1541         padding: .5em 0;
1542 }
1543
1544 #view > *:last-child {
1545         margin: 0 0 1em 0;
1546 }
1547
1548 .label {
1549         background: var(--main-bright-color);
1550         color: var(--secondary-bright-color);
1551         font-size: .8rem;
1552         padding: 0 .4rem;
1553         border-radius: .5rem;
1554 }
1555
1556 .label.warning {
1557         background: var(--danger-color);
1558 }
1559
1560 ul.deps {
1561         margin: 0;
1562         padding: 0;
1563         font-size: .9rem;
1564 }
1565
1566 ul.errors {
1567         margin: 0 0 1em 0;
1568         padding: 0;
1569 }
1570
1571 @media only screen and (max-width: 800px) {
1572         body {
1573                 padding-top: 70px;
1574         }
1575
1576         #maincontent {
1577                 padding: .25em;
1578                 max-width: 100vw;
1579         }
1580
1581         #menubar {
1582                 background: var(--main-bright-color);
1583                 padding: 0 .5em;
1584                 position: fixed;
1585                 top: 0;
1586                 z-index: 1000;
1587         }
1588
1589         #menubar > h2 {
1590                 flex: 0 0 2em;
1591                 display: block;
1592                 border: 2px solid var(--secondary-bright-color);
1593                 color: var(--secondary-bright-color);
1594                 border-radius: .5em;
1595                 cursor: pointer;
1596                 font-size: 100%;
1597                 margin: 0 1em 0 0;
1598         }
1599
1600         #menubar > h2:hover {
1601                 border-color: var(--secondary-bright-color);
1602                 color: var(--secondary-bright-color);
1603         }
1604
1605         #menubar > h2 > * {
1606                 display: none;
1607         }
1608
1609         #menubar > h2::before {
1610                 content: "☰";
1611                 width: 35px;
1612                 line-height: 35px;
1613                 text-align: center;
1614                 display: inline-block;
1615                 color: inherit;
1616                 font-weight: bold;
1617         }
1618
1619         #menubar > h2.active::before {
1620                 content: "×";
1621                 font-size: 200%;
1622         }
1623
1624         #menubar .hostname {
1625                 font-size: 1.6em;
1626         }
1627
1628         .distversion {
1629                 display: none;
1630         }
1631
1632         #modemenu {
1633                 padding: .125em .25em;
1634         }
1635
1636         #mainmenu {
1637                 overflow-x: hidden;
1638                 overflow-y: auto;
1639                 max-width: 0;
1640                 padding: 1em 0;
1641                 transition: max-width .25s ease-in-out, padding .25s ease-in-out;
1642                 position: fixed;
1643                 z-index: 900;
1644                 height: 100%;
1645         }
1646
1647         #mainmenu.active {
1648                 max-width: 200px;
1649                 padding: 1em 1em calc(1em + 70px) 1em;
1650                 overflow-x: visible;
1651         }
1652
1653         #mainmenu > div {
1654                 position: static;
1655         }
1656
1657         #mainmenu ul > li {
1658                 padding: .25em 0;
1659         }
1660
1661         .hide-xs {
1662                 display: none !important;
1663         }
1664
1665         table {
1666                 display: flex;
1667                 flex-direction: column;
1668         }
1669
1670         tr {
1671                 display: block;
1672                 border-bottom: 1px solid var(--main-dark-color);
1673                 margin-bottom: .5em;
1674                 padding-bottom: .5em;
1675         }
1676
1677         tr.cbi-section-table-titles[data-title]::before,
1678         tr.cbi-section-table-titles,
1679         tr.cbi-section-table-descr {
1680                 display: none;
1681         }
1682
1683         tr[data-title]::before {
1684                 display: block;
1685                 font-weight: bold;
1686                 border-top: none;
1687                 padding: .4em 0;
1688                 font-size: 110%;
1689         }
1690
1691         td {
1692                 display: block;
1693                 border-top: none;
1694                 text-align: left !important;
1695                 padding: .2em 0;
1696         }
1697
1698         th, table-titles {
1699                 display: none;
1700         }
1701
1702         td[data-title] {
1703                 position: relative;
1704                 padding: .2em 0 .2em 40%;
1705         }
1706
1707         td[data-title]::before {
1708                 content: attr(data-title) ": ";
1709                 white-space: nowrap;
1710                 font-weight: bold;
1711                 width: 40%;
1712                 overflow: hidden;
1713                 text-overflow: ellipsis;
1714                 position: absolute;
1715                 left: 0;
1716                 top: 0;
1717                 bottom: 0;
1718                 padding: .2em 0;
1719                 text-align: left;
1720                 display: inline-flex;
1721                 align-items: center;
1722         }
1723
1724         td[data-title]::after {
1725                 content: "";
1726                 width: 2em;
1727                 position: absolute;
1728                 left: calc(40% - 2em);
1729                 top: 0;
1730                 bottom: 0;
1731                 display: block;
1732                 background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--secondary-bright-color) 90%);
1733         }
1734
1735         [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) td:first-of-type,
1736         [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) td:first-of-type {
1737                 font-weight: bold;
1738                 max-width: none;
1739                 width: 100%;
1740         }
1741
1742         [data-page="admin-status-overview"] td > span > span { font-size: .9rem; }
1743
1744         [data-page="admin-status-routes"] table:nth-of-type(3) td:nth-of-type(1) { word-break: break-all; }
1745
1746         [data-page="admin-network-firewall-zones"] td[data-name="_info"] {
1747                 padding: .2em 0;
1748                 line-height: 2.2rem;
1749         }
1750
1751         [data-page="admin-network-firewall-zones"] td[data-name="_info"]::before,
1752         [data-page="admin-network-firewall-zones"] td[data-name="_info"]::after {
1753                 display: none;
1754         }
1755
1756         [data-page="admin-network-firewall-zones"] td[data-name="_info"] label {
1757                 font-size: 1rem;
1758         }
1759
1760         #cbi-wireless-wifi-device tr { display: flex; flex-wrap: wrap; }
1761         #cbi-wireless-wifi-device tr > *:nth-child(1) { flex: 1 1 20%; align-self: center; }
1762         #cbi-wireless-wifi-device tr > *:nth-child(2) { flex: 2 2 75%; }
1763         #cbi-wireless-wifi-device tr > *:nth-child(3) { flex: 3 3 100%; }
1764
1765         #cbi-network-interface tr { display: flex; flex-wrap: wrap; }
1766         #cbi-network-interface tr > *:nth-child(1) { flex: 1 1 33%; align-self: center; }
1767         #cbi-network-interface tr > *:nth-child(2) { flex: 2 2 60%; align-self: center; font-size: .9rem; overflow: hidden; }
1768         #cbi-network-interface tr > *:nth-child(3) { flex: 3 3 100%; }
1769         #cbi-network-interface tr > *:nth-child(2) > div { overflow: hidden; text-overflow: ellipsis; }
1770
1771         .assoclist tr {
1772                 display: flex;
1773                 flex-wrap: wrap;
1774         }
1775
1776         .assoclist td > .ifacebadge {
1777                 max-width: 90px;
1778         }
1779
1780         .assoclist td > .ifacebadge > img {
1781                 margin: 0 35px;
1782         }
1783
1784         .assoclist td > .ifacebadge > span {
1785                 display: none;
1786         }
1787
1788         .assoclist td > .ifacebadge[data-ifname]::after {
1789                 content: attr(data-ifname);
1790         }
1791
1792         .assoclist td > .ifacebadge[data-signal]::after {
1793                 content: attr(data-signal) " dBm";
1794         }
1795
1796         .assoclist td:nth-of-type(3) {
1797                 font-weight: bold;
1798                 font-size: 1rem;
1799         }
1800
1801         .assoclist td:nth-of-type(1), .assoclist td:nth-of-type(4) {
1802                 flex: 1 1 100px;
1803                 margin-right: .5em;
1804         }
1805
1806         .assoclist td:nth-of-type(3), .assoclist td:nth-of-type(5) {
1807                 flex: 2 2 calc(100% - 110px);
1808                 overflow: hidden;
1809                 text-overflow: ellipsis;
1810                 align-self: center;
1811         }
1812
1813         .assoclist td:nth-of-type(6) { flex: 1; text-align: right !important; }
1814         .assoclist td[data-title] { padding: .2em 0; }
1815         .assoclist td[data-title]::before,
1816         .assoclist td[data-title]::after { display: none; }
1817
1818         .leases6 td:nth-of-type(3) { word-wrap: break-word; }
1819
1820         td.cbi-section-actions > div { display: flex; }
1821         td.cbi-section-actions > div > * { flex: 1; }
1822
1823         body.modal-overlay-active #modal_overlay > .modal {
1824                 width: 95%;
1825                 margin: 5% auto;
1826         }
1827
1828         input:not([type]),
1829         input[type="text"],
1830         input[type="password"],
1831         select,
1832         .cbi-dropdown:not(.btn):not(.cbi-button),
1833         .cbi-dynlist {
1834                 min-height: calc(2.2rem + 2px);
1835                 line-height: 2.2rem;
1836                 font-size: 1.2rem;
1837                 min-width: 10rem;
1838         }
1839
1840         button, .btn {
1841                 line-height: 1.8rem;
1842                 font-size: 1.2rem;
1843         }
1844
1845         select {
1846                 padding: .4em 0;
1847         }
1848
1849         .cbi-value > .cbi-value-field {
1850                 flex: 1 0 100%;
1851                 display: flex;
1852                 flex-direction: column;
1853                 max-width: 100%;
1854         }
1855
1856         .cbi-value > .cbi-value-field > div[id] {
1857                 display: flex;
1858                 flex-direction: row;
1859         }
1860
1861         .cbi-value > .cbi-value-field > div[id] > input,
1862         .cbi-value > .cbi-value-field > div[id] > select,
1863         .cbi-value > .cbi-value-field > div[id] > .cbi-filebrowser.open {
1864                 flex: 1;
1865                 width: 100%;
1866         }
1867
1868         .cbi-dynlist .item::after,
1869         .cbi-dynlist .add-item > .btn {
1870                 line-height: 2em;
1871                 flex-basis: 2rem;
1872                 width: 2rem;
1873         }
1874
1875         .ifacebadge.large {
1876                 font-size: .9rem;
1877         }
1878
1879         .control-group > *,
1880         .control-group > .cbi-dropdown > ul > li {
1881                 flex: 1;
1882                 white-space: normal;
1883                 word-wrap: break-word;
1884         }
1885
1886         .cbi-page-actions .cbi-dropdown,
1887         .cbi-page-actions .cbi-button-apply:first-child {
1888                 flex-basis: 100%;
1889         }
1890
1891         .cbi-checkbox {
1892                 margin: .25rem;
1893         }
1894
1895         .cbi-tabmenu {
1896                 margin: 0 -.25em 1em -.25em;
1897         }
1898
1899         .cbi-tooltip {
1900                 font-size: 1rem;
1901                 box-shadow: 0 0 4px rgba(0, 0, 0, .7);
1902         }
1903
1904         .cbi-value > label:first-child {
1905                 padding: 0 0 .5em 0;
1906         }
1907
1908         [data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item {
1909                 font-size: .9rem;
1910                 line-height: 1rem;
1911         }
1912
1913         [data-page="admin-system-opkg"] .control-group {
1914                 flex-wrap: wrap;
1915         }
1916
1917         [data-page="admin-status-iptables"] h2 + div.right {
1918                 margin: 0 0 1em 0 !important;
1919                 display: flex;
1920         }
1921 }
1922
1923 @media only screen and (min-width: 800px) and (max-width: 1200px) {
1924         .assoclist tr > *:nth-of-type(2) {
1925                 display: none;
1926         }
1927 }