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