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