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