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

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