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

   1 :root {
   2         --main-bright-color: #00B5E2;
   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 a,
1127 .cbi-value-description a {
1128         color: var(--main-bright-color);
1129         text-decoration: none;
1130         outline: 0;
1131 }
1132 .cbi-map-descr a:hover,
1133 .cbi-value-description a:hover {
1134         color: var(--main-bright-color);
1135         text-decoration: underline;
1136         outline: 0;
1137 }
1138
1139 .cbi-map-descr,
1140 .cbi-tab-descr,
1141 .cbi-section-descr,
1142 .cbi-section-table,
1143 .cbi-section-create {
1144         margin: 0 0 1em 0;
1145 }
1146
1147 .cbi-dynlist {
1148         display: inline-block;
1149         font-size: 90%;
1150         min-height: calc(1.5em + 2px);
1151         line-height: 1.5em;
1152         min-width: 20rem;
1153         flex-wrap: wrap;
1154 }
1155
1156 .cbi-dynlist > .item {
1157         box-shadow: 0 0 2px var(--main-dark-color);
1158         margin: .3em 0;
1159         padding: .15em 2em .15em .2em;
1160         border-radius: .25em;
1161         position: relative;
1162         overflow: hidden;
1163         transition: box-shadow .25s ease-in-out;
1164         pointer-events: none;
1165         flex: 1 1 100%;
1166         word-break: break-all;
1167 }
1168
1169 .cbi-dynlist > .item::after {
1170         content: "-";
1171         top: 0;
1172         right: 0;
1173         bottom: 0;
1174         width: 1.6rem;
1175         background: var(--main-bright-color);
1176         display: flex;
1177         align-items: center;
1178         justify-content: space-around;
1179         position: absolute;
1180         box-shadow: 0 0 2px var(--main-dark-color);
1181         text-align: center;
1182         color: var(--secondary-bright-color);
1183         cursor: pointer;
1184         pointer-events: all;
1185 }
1186
1187 .cbi-dynlist[disabled] > .item::after {
1188         pointer-events: none;
1189 }
1190
1191 .cbi-dynlist > .item:hover {
1192         box-shadow: 0 0 2px var(--main-bright-color);
1193 }
1194
1195 .cbi-dynlist > .add-item {
1196         flex: 1;
1197         display: flex;
1198 }
1199
1200 .cbi-dynlist > .add-item > input {
1201         flex: 1;
1202         min-width: 18.5rem;
1203         border-radius: .25rem 0 0 .25rem;
1204 }
1205
1206 .cbi-dynlist > .add-item > .btn {
1207         flex: 0 0 1.6rem;
1208         margin: 0 0 2px -1px;
1209         width: 1.6rem;
1210         text-align: center;
1211 }
1212
1213 .cbi-dropdown {
1214         display: inline-flex !important;
1215         cursor: pointer;
1216         height: auto;
1217         position: relative;
1218         padding: 0 !important;
1219 }
1220
1221 .cbi-dropdown:not(.btn):not(.cbi-button) {
1222         box-shadow: inset 0 0 1px var(--main-dark-color);
1223 }
1224
1225 .cbi-dropdown > ul {
1226         margin: 0 !important;
1227         padding: 0;
1228         list-style: none;
1229         overflow-x: hidden;
1230         overflow-y: auto;
1231         display: flex;
1232         width: 100%;
1233 }
1234
1235 .cbi-dropdown.btn > ul:not(.dropdown) {
1236         padding-left: .5em;
1237 }
1238
1239 .cbi-dropdown.btn.spinning > ul:not(.dropdown) {
1240         padding-left: 0;
1241 }
1242
1243 .cbi-dropdown.btn > ul.dropdown > li {
1244         color: var(--main-dark-color);
1245 }
1246
1247 .cbi-dropdown > ul.preview {
1248         display: none;
1249 }
1250
1251 .cbi-dropdown > .open,
1252 .cbi-dropdown > .more {
1253         flex-grow: 0;
1254         flex-shrink: 0;
1255         display: flex;
1256         flex-direction: column;
1257         justify-content: center;
1258         text-align: center;
1259         padding: 0 .25em;
1260 }
1261
1262 .cbi-dropdown.btn > .open,
1263 .cbi-dropdown.cbi-button > .open {
1264         padding: 0 .5em;
1265         margin-left: .5em;
1266         border-left: 1px solid;
1267 }
1268
1269 .cbi-dropdown > .more,
1270 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1271         display: none;
1272         justify-content: center;
1273         color: rgba(0, 0, 0, .5);
1274 }
1275
1276 .cbi-dropdown > ul > li {
1277         display: none;
1278         white-space: nowrap;
1279         overflow: hidden;
1280         text-overflow: ellipsis;
1281         flex-shrink: 1;
1282         flex-grow: 1;
1283         align-items: center;
1284         align-self: center;
1285         color: inherit;
1286 }
1287
1288 .cbi-dropdown > ul.dropdown > li,
1289 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1290         padding: 0 .25em;
1291 }
1292
1293 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1294 .cbi-dropdown > ul > li .hide-close { display: none; }
1295
1296 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1297         border-left: 1px solid #ccc;
1298 }
1299
1300 .cbi-dropdown[empty] > ul {
1301         max-width: 1px;
1302         max-height: 1.5em;
1303 }
1304
1305 .cbi-dropdown > ul > li > form {
1306         display: none;
1307         margin: 0;
1308         padding: 0;
1309         pointer-events: none;
1310 }
1311
1312 .cbi-dropdown > ul > li img {
1313         align-self: center;
1314         margin-right: .25em;
1315 }
1316
1317 .cbi-dropdown > ul > li input[type="text"] {
1318         margin: .25em 0;
1319         border: none;
1320         background: var(--secondary-bright-color);
1321 }
1322
1323 .cbi-dropdown[open] {
1324         position: relative;
1325 }
1326
1327 .cbi-dropdown[open] > ul.dropdown {
1328         display: block;
1329         background: var(--secondary-bright-color);
1330         box-shadow: 0 0 1px var(--main-dark-color), 0 0 4px rgba(0, 0, 0, .7);
1331         position: absolute;
1332         z-index: 1100;
1333         max-width: none;
1334         min-width: 100%;
1335         width: auto;
1336         transition: max-height .125s ease-in;
1337 }
1338
1339 .cbi-dropdown > ul > li[display],
1340 .cbi-dropdown[open] > ul.preview,
1341 .cbi-dropdown[open] > ul.dropdown > li,
1342 .cbi-dropdown[multiple] > ul > li > label,
1343 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1344 .cbi-dropdown[multiple][more] > .more,
1345 .cbi-dropdown[multiple][empty] > .more {
1346         flex-grow: 1;
1347         display: flex !important;
1348 }
1349
1350 .cbi-dropdown[empty] > ul > li,
1351 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1352 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1353         display: block !important;
1354 }
1355
1356 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1357 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1358
1359 .cbi-dropdown[open] > ul.dropdown > li {
1360         border-bottom: 1px solid #ccc;
1361 }
1362
1363 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1364         background: var(--main-dark-color);
1365         color: var(--secondary-bright-color);
1366 }
1367
1368 .cbi-dropdown[open] > ul.dropdown > li.focus {
1369         background: var(--main-bright-color);
1370 }
1371
1372 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1373         margin-bottom: 0;
1374         border-bottom: none;
1375 }
1376
1377 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1378         opacity: 0.7;
1379 }
1380
1381 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1382         width: 100%;
1383 }
1384
1385 .cbi-dropdown[disabled] {
1386         pointer-events: none;
1387         opacity: .6;
1388 }
1389
1390 .cbi-filebrowser {
1391         max-width: 100%;
1392         width: 1px;
1393         box-shadow: 0 0 2px var(--main-dark-color);
1394         border-radius: .25rem;
1395         display: flex;
1396         flex-direction: column;
1397         opacity: 0;
1398         height: 0;
1399         overflow: hidden;
1400 }
1401
1402 .cbi-filebrowser.open {
1403         min-width: 20rem;
1404         width: auto;
1405         opacity: 1;
1406         height: auto;
1407         overflow: visible;
1408         transition: opacity .25s ease-in;
1409 }
1410
1411 .cbi-filebrowser > * {
1412         max-width: 100%;
1413         overflow: hidden;
1414         text-overflow: ellipsis;
1415         padding: 0 0 .25em 0;
1416         margin: .25em .25em 0px .25em;
1417         white-space: nowrap;
1418         border-bottom: 1px solid var(--main-dark-color);
1419 }
1420
1421 .cbi-filebrowser .cbi-button-positive {
1422         margin-right: .25em;
1423 }
1424
1425 .cbi-filebrowser > div {
1426         border-bottom: none;
1427 }
1428
1429 .cbi-filebrowser > ul > li {
1430         display: flex;
1431         flex-direction: row;
1432         align-items: center;
1433 }
1434
1435 .cbi-filebrowser > ul > li a:hover {
1436         font-weight: bold;
1437         text-decoration: underline;
1438 }
1439
1440 .cbi-filebrowser > ul > li > div:first-child {
1441         flex: 10;
1442         overflow: hidden;
1443         text-overflow: ellipsis;
1444 }
1445
1446 .cbi-filebrowser > ul > li > div:last-child {
1447         flex: 3 3 10em;
1448         text-align: right;
1449 }
1450
1451 .cbi-filebrowser > ul > li > div:last-child > button {
1452         padding: .125em .25em;
1453         margin: 1px 0 1px .25em;
1454 }
1455
1456 .cbi-filebrowser .upload {
1457         display: flex;
1458         flex-direction: row;
1459         flex-wrap: wrap;
1460         margin: 0 -.125em .25em -.125em;
1461         padding: 0 0 .125em 0px;
1462         border-bottom: 1px solid var(--main-dark-color);
1463 }
1464
1465 .cbi-filebrowser .upload > * {
1466         margin: .125em;
1467         flex: 1;
1468 }
1469
1470 .cbi-filebrowser .upload > div > input {
1471         width: 100%;
1472 }
1473
1474 .cbi-section-actions {
1475         text-align: right;
1476 }
1477
1478 .cbi-page-actions {
1479         flex-wrap: wrap;
1480         width: 100%;
1481         justify-content: flex-end;
1482         margin-bottom: 1em;
1483         margin-top: 1em;
1484         border-top: 1px solid var(--main-dark-color);
1485         padding-top: 1em;
1486         text-align: right;
1487 }
1488
1489 div[id$=".ipaddr"] > input,
1490 .cbi-value-field > div > input[type="password"] {
1491         min-width: 18.5rem;
1492         border-radius: .25rem 0 0 .25rem;
1493 }
1494
1495 div[id$=".txpower"] {
1496         flex-wrap: wrap;
1497         align-items: center;
1498 }
1499
1500 div[id$=".txpower"] > span {
1501         white-space: nowrap;
1502         margin-left: .25em;
1503 }
1504
1505 div[id$=".editlist"] {
1506         flex: 1;
1507 }
1508
1509 [data-errors]::after {
1510         content: attr(data-errors);
1511         background: var(--danger-color);
1512         color: var(--secondary-bright-color);
1513         border-radius: .6rem;
1514         height: 1.1rem;
1515         padding: 0 .25rem;
1516         font-size: .9rem;
1517         display: inline-block;
1518         font-weight: bold;
1519         min-width: .6rem;
1520         line-height: 1rem;
1521         margin: -.1rem 0 0 -.2rem;
1522         text-align: center;
1523 }
1524
1525 @keyframes spin {
1526         100% { transform: rotate(360deg); }
1527 }
1528
1529 .spinning {
1530         position: relative;
1531         padding-left: 2.1em !important;
1532 }
1533
1534 .spinning::before {
1535         position: absolute;
1536         display: block;
1537         align-items: center;
1538         top: 0;
1539         bottom: 0;
1540         left: .4em;
1541         width: 1.4em;
1542         height: 1.4em;
1543         animation: spin 1s linear infinite;
1544         content: url("spinner.svg");
1545         margin: auto;
1546         line-height: 0;
1547 }
1548
1549 button.spinning, .btn.spinning {
1550         padding-left: 1.6em !important;
1551 }
1552
1553 button.spinning::before, .btn.spinning::before {
1554         filter: invert(1);
1555         left: .2em;
1556         width: 1.2em;
1557         height: 1.2em;
1558 }
1559
1560 #view > div.spinning:first-child {
1561         padding: .5em 0;
1562 }
1563
1564 #view > *:last-child {
1565         margin: 0 0 1em 0;
1566 }
1567
1568 .label {
1569         background: var(--main-bright-color);
1570         color: var(--secondary-bright-color);
1571         font-size: .8rem;
1572         padding: 0 .4rem;
1573         border-radius: .5rem;
1574 }
1575
1576 .label.warning {
1577         background: var(--danger-color);
1578 }
1579
1580 .label.success {
1581         background: var(--success-color);
1582 }
1583
1584 ul.deps {
1585         margin: 0;
1586         padding: 0;
1587         font-size: .9rem;
1588 }
1589
1590 ul.errors {
1591         margin: 0 0 1em 0;
1592         padding: 0;
1593 }
1594
1595 @media only screen and (max-width: 800px) {
1596         body {
1597                 padding-top: 70px;
1598         }
1599
1600         #maincontent {
1601                 padding: .25em;
1602                 max-width: 100vw;
1603         }
1604
1605         #menubar {
1606                 background: var(--main-bright-color);
1607                 padding: 0 .5em;
1608                 position: fixed;
1609                 top: 0;
1610                 z-index: 1000;
1611         }
1612
1613         #menubar > h2 {
1614                 flex: 0 0 2em;
1615                 display: block;
1616                 border: 2px solid var(--secondary-bright-color);
1617                 color: var(--secondary-bright-color);
1618                 border-radius: .5em;
1619                 cursor: pointer;
1620                 font-size: 100%;
1621                 margin: 0 1em 0 0;
1622         }
1623
1624         #menubar > h2:hover {
1625                 border-color: var(--secondary-bright-color);
1626                 color: var(--secondary-bright-color);
1627         }
1628
1629         #menubar > h2 > * {
1630                 display: none;
1631         }
1632
1633         #menubar > h2::before {
1634                 content: "☰";
1635                 width: 35px;
1636                 line-height: 35px;
1637                 text-align: center;
1638                 display: inline-block;
1639                 color: inherit;
1640                 font-weight: bold;
1641         }
1642
1643         #menubar > h2.active::before {
1644                 content: "×";
1645                 font-size: 200%;
1646         }
1647
1648         #menubar .hostname {
1649                 font-size: 1.6em;
1650         }
1651
1652         .distversion {
1653                 display: none;
1654         }
1655
1656         #modemenu {
1657                 padding: .125em .25em;
1658         }
1659
1660         #mainmenu {
1661                 overflow-x: hidden;
1662                 overflow-y: auto;
1663                 max-width: 0;
1664                 padding: 1em 0;
1665                 transition: max-width .25s ease-in-out, padding .25s ease-in-out;
1666                 position: fixed;
1667                 z-index: 900;
1668                 height: 100%;
1669         }
1670
1671         #mainmenu.active {
1672                 max-width: 200px;
1673                 padding: 1em 1em calc(1em + 70px) 1em;
1674                 overflow-x: visible;
1675         }
1676
1677         #mainmenu > div {
1678                 position: static;
1679         }
1680
1681         #mainmenu ul > li {
1682                 padding: .25em 0;
1683         }
1684
1685         .hide-xs {
1686                 display: none !important;
1687         }
1688
1689         table {
1690                 display: flex;
1691                 flex-direction: column;
1692         }
1693
1694         tr {
1695                 display: block;
1696                 border-bottom: 1px solid var(--main-dark-color);
1697                 margin-bottom: .5em;
1698                 padding-bottom: .5em;
1699         }
1700
1701         tr.cbi-section-table-titles[data-title]::before,
1702         tr.cbi-section-table-titles,
1703         tr.cbi-section-table-descr {
1704                 display: none;
1705         }
1706
1707         tr[data-title]::before {
1708                 display: block;
1709                 font-weight: bold;
1710                 border-top: none;
1711                 padding: .4em 0;
1712                 font-size: 110%;
1713         }
1714
1715         td {
1716                 display: block;
1717                 border-top: none;
1718                 text-align: left !important;
1719                 padding: .2em 0;
1720         }
1721
1722         th, table-titles {
1723                 display: none;
1724         }
1725
1726         td[data-title] {
1727                 position: relative;
1728                 padding: .2em 0 .2em 40%;
1729         }
1730
1731         td[data-title]::before {
1732                 content: attr(data-title) ": ";
1733                 white-space: nowrap;
1734                 font-weight: bold;
1735                 width: 40%;
1736                 overflow: hidden;
1737                 text-overflow: ellipsis;
1738                 position: absolute;
1739                 left: 0;
1740                 top: 0;
1741                 bottom: 0;
1742                 padding: .2em 0;
1743                 text-align: left;
1744                 display: inline-flex;
1745                 align-items: center;
1746         }
1747
1748         td[data-title]::after {
1749                 content: "";
1750                 width: 2em;
1751                 position: absolute;
1752                 left: calc(40% - 2em);
1753                 top: 0;
1754                 bottom: 0;
1755                 display: block;
1756                 background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--secondary-bright-color) 90%);
1757         }
1758
1759         [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) td:first-of-type,
1760         [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) td:first-of-type {
1761                 font-weight: bold;
1762                 max-width: none;
1763                 width: 100%;
1764         }
1765
1766         [data-page="admin-status-overview"] td > span > span { font-size: .9rem; }
1767
1768         [data-page="admin-status-routes"] table:nth-of-type(3) td:nth-of-type(1) { word-break: break-all; }
1769
1770         [data-page="admin-network-firewall-zones"] td[data-name="_info"] {
1771                 padding: .2em 0;
1772                 line-height: 2.2rem;
1773         }
1774
1775         [data-page="admin-network-firewall-zones"] td[data-name="_info"]::before,
1776         [data-page="admin-network-firewall-zones"] td[data-name="_info"]::after {
1777                 display: none;
1778         }
1779
1780         [data-page="admin-network-firewall-zones"] td[data-name="_info"] label {
1781                 font-size: 1rem;
1782         }
1783
1784         #cbi-wireless-wifi-device tr { display: flex; flex-wrap: wrap; }
1785         #cbi-wireless-wifi-device tr > *:nth-child(1) { flex: 1 1 20%; align-self: center; }
1786         #cbi-wireless-wifi-device tr > *:nth-child(2) { flex: 2 2 75%; }
1787         #cbi-wireless-wifi-device tr > *:nth-child(3) { flex: 3 3 100%; }
1788
1789         #cbi-network-interface tr { display: flex; flex-wrap: wrap; }
1790         #cbi-network-interface tr > *:nth-child(1) { flex: 1 1 33%; align-self: center; }
1791         #cbi-network-interface tr > *:nth-child(2) { flex: 2 2 60%; align-self: center; font-size: .9rem; overflow: hidden; }
1792         #cbi-network-interface tr > *:nth-child(3) { flex: 3 3 100%; }
1793         #cbi-network-interface tr > *:nth-child(2) > div { overflow: hidden; text-overflow: ellipsis; }
1794
1795         .assoclist tr {
1796                 display: flex;
1797                 flex-wrap: wrap;
1798         }
1799
1800         .assoclist td > .ifacebadge {
1801                 max-width: 90px;
1802         }
1803
1804         .assoclist td > .ifacebadge > img {
1805                 margin: 0 35px;
1806         }
1807
1808         .assoclist td > .ifacebadge > span {
1809                 display: none;
1810         }
1811
1812         .assoclist td > .ifacebadge[data-ifname]::after {
1813                 content: attr(data-ifname);
1814         }
1815
1816         .assoclist td > .ifacebadge[data-signal]::after {
1817                 content: attr(data-signal) " dBm";
1818         }
1819
1820         .assoclist td:nth-of-type(3) {
1821                 font-weight: bold;
1822                 font-size: 1rem;
1823         }
1824
1825         .assoclist td:nth-of-type(1), .assoclist td:nth-of-type(4) {
1826                 flex: 1 1 100px;
1827                 margin-right: .5em;
1828         }
1829
1830         .assoclist td:nth-of-type(3), .assoclist td:nth-of-type(5) {
1831                 flex: 2 2 calc(100% - 110px);
1832                 overflow: hidden;
1833                 text-overflow: ellipsis;
1834                 align-self: center;
1835         }
1836
1837         .assoclist td:nth-of-type(6) { flex: 1; text-align: right !important; }
1838         .assoclist td[data-title] { padding: .2em 0; }
1839         .assoclist td[data-title]::before,
1840         .assoclist td[data-title]::after { display: none; }
1841
1842         .leases6 td:nth-of-type(3) { word-wrap: break-word; }
1843
1844         td.cbi-section-actions > div { display: flex; }
1845         td.cbi-section-actions > div > * { flex: 1; }
1846
1847         body.modal-overlay-active #modal_overlay > .modal {
1848                 width: 95%;
1849                 margin: 5% auto;
1850         }
1851
1852         input:not([type]),
1853         input[type="text"],
1854         input[type="password"],
1855         select,
1856         .cbi-dropdown:not(.btn):not(.cbi-button),
1857         .cbi-dynlist {
1858                 min-height: calc(2.2rem + 2px);
1859                 line-height: 2.2rem;
1860                 font-size: 1.2rem;
1861                 min-width: 10rem;
1862         }
1863
1864         button, .btn {
1865                 line-height: 1.8rem;
1866                 font-size: 1.2rem;
1867         }
1868
1869         select {
1870                 padding: .4em 0;
1871         }
1872
1873         .cbi-value > .cbi-value-field {
1874                 flex: 1 0 100%;
1875                 display: flex;
1876                 flex-direction: column;
1877                 max-width: 100%;
1878         }
1879
1880         .cbi-value > .cbi-value-field > div[id] {
1881                 display: flex;
1882                 flex-direction: row;
1883         }
1884
1885         .cbi-value > .cbi-value-field > div[id] > input,
1886         .cbi-value > .cbi-value-field > div[id] > select,
1887         .cbi-value > .cbi-value-field > div[id] > .cbi-filebrowser.open {
1888                 flex: 1;
1889                 width: 100%;
1890         }
1891
1892         .cbi-dynlist .item::after,
1893         .cbi-dynlist .add-item > .btn {
1894                 line-height: 2em;
1895                 flex-basis: 2rem;
1896                 width: 2rem;
1897         }
1898
1899         .ifacebadge.large {
1900                 font-size: .9rem;
1901         }
1902
1903         .control-group > *,
1904         .control-group > .cbi-dropdown > ul > li {
1905                 flex: 1;
1906                 white-space: normal;
1907                 word-wrap: break-word;
1908         }
1909
1910         .cbi-page-actions .cbi-dropdown,
1911         .cbi-page-actions .cbi-button-apply:first-child {
1912                 flex-basis: 100%;
1913         }
1914
1915         .cbi-checkbox {
1916                 margin: .25rem;
1917         }
1918
1919         .cbi-tabmenu {
1920                 margin: 0 -.25em 1em -.25em;
1921         }
1922
1923         .cbi-tooltip {
1924                 font-size: 1rem;
1925                 box-shadow: 0 0 4px rgba(0, 0, 0, .7);
1926         }
1927
1928         .cbi-value > label:first-child {
1929                 padding: 0 0 .5em 0;
1930         }
1931
1932         [data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item {
1933                 font-size: .9rem;
1934                 line-height: 1rem;
1935         }
1936
1937         [data-page="admin-system-opkg"] .control-group {
1938                 flex-wrap: wrap;
1939         }
1940
1941         [data-page="admin-status-iptables"] h2 + div.right {
1942                 margin: 0 0 1em 0 !important;
1943                 display: flex;
1944         }
1945 }
1946
1947 @media only screen and (min-width: 800px) and (max-width: 1200px) {
1948         .assoclist tr > *:nth-of-type(2) {
1949                 display: none;
1950         }
1951 }