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 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 .cbi-dropdown[open] > ul.dropdown > li:hover {
1370         background: var(--main-bright-color);
1371 }
1372
1373 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1374         margin-bottom: 0;
1375         border-bottom: none;
1376 }
1377
1378 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1379         opacity: 0.7;
1380 }
1381
1382 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1383         width: 100%;
1384 }
1385
1386 .cbi-dropdown[disabled] {
1387         pointer-events: none;
1388         opacity: .6;
1389 }
1390
1391 .cbi-filebrowser {
1392         max-width: 100%;
1393         width: 1px;
1394         box-shadow: 0 0 2px var(--main-dark-color);
1395         border-radius: .25rem;
1396         display: flex;
1397         flex-direction: column;
1398         opacity: 0;
1399         height: 0;
1400         overflow: hidden;
1401 }
1402
1403 .cbi-filebrowser.open {
1404         min-width: 20rem;
1405         width: auto;
1406         opacity: 1;
1407         height: auto;
1408         overflow: visible;
1409         transition: opacity .25s ease-in;
1410 }
1411
1412 .cbi-filebrowser > * {
1413         max-width: 100%;
1414         overflow: hidden;
1415         text-overflow: ellipsis;
1416         padding: 0 0 .25em 0;
1417         margin: .25em .25em 0px .25em;
1418         white-space: nowrap;
1419         border-bottom: 1px solid var(--main-dark-color);
1420 }
1421
1422 .cbi-filebrowser .cbi-button-positive {
1423         margin-right: .25em;
1424 }
1425
1426 .cbi-filebrowser > div {
1427         border-bottom: none;
1428 }
1429
1430 .cbi-filebrowser > ul > li {
1431         display: flex;
1432         flex-direction: row;
1433         align-items: center;
1434 }
1435
1436 .cbi-filebrowser > ul > li a:hover {
1437         font-weight: bold;
1438         text-decoration: underline;
1439 }
1440
1441 .cbi-filebrowser > ul > li > div:first-child {
1442         flex: 10;
1443         overflow: hidden;
1444         text-overflow: ellipsis;
1445 }
1446
1447 .cbi-filebrowser > ul > li > div:last-child {
1448         flex: 3 3 10em;
1449         text-align: right;
1450 }
1451
1452 .cbi-filebrowser > ul > li > div:last-child > button {
1453         padding: .125em .25em;
1454         margin: 1px 0 1px .25em;
1455 }
1456
1457 .cbi-filebrowser .upload {
1458         display: flex;
1459         flex-direction: row;
1460         flex-wrap: wrap;
1461         margin: 0 -.125em .25em -.125em;
1462         padding: 0 0 .125em 0px;
1463         border-bottom: 1px solid var(--main-dark-color);
1464 }
1465
1466 .cbi-filebrowser .upload > * {
1467         margin: .125em;
1468         flex: 1;
1469 }
1470
1471 .cbi-filebrowser .upload > div > input {
1472         width: 100%;
1473 }
1474
1475 .cbi-section-actions {
1476         text-align: right;
1477 }
1478
1479 .cbi-page-actions {
1480         flex-wrap: wrap;
1481         width: 100%;
1482         justify-content: flex-end;
1483         margin-bottom: 1em;
1484         margin-top: 1em;
1485         border-top: 1px solid var(--main-dark-color);
1486         padding-top: 1em;
1487         text-align: right;
1488 }
1489
1490 div[id$=".ipaddr"] > input,
1491 .cbi-value-field > div > input[type="password"] {
1492         min-width: 18.5rem;
1493         border-radius: .25rem 0 0 .25rem;
1494 }
1495
1496 div[id$=".txpower"] {
1497         flex-wrap: wrap;
1498         align-items: center;
1499 }
1500
1501 div[id$=".txpower"] > span {
1502         white-space: nowrap;
1503         margin-left: .25em;
1504 }
1505
1506 div[id$=".editlist"] {
1507         flex: 1;
1508 }
1509
1510 [data-errors]::after {
1511         content: attr(data-errors);
1512         background: var(--danger-color);
1513         color: var(--secondary-bright-color);
1514         border-radius: .6rem;
1515         height: 1.1rem;
1516         padding: 0 .25rem;
1517         font-size: .9rem;
1518         display: inline-block;
1519         font-weight: bold;
1520         min-width: .6rem;
1521         line-height: 1rem;
1522         margin: -.1rem 0 0 -.2rem;
1523         text-align: center;
1524 }
1525
1526 @keyframes spin {
1527         100% { transform: rotate(360deg); }
1528 }
1529
1530 .spinning {
1531         position: relative;
1532         padding-left: 2.1em !important;
1533 }
1534
1535 .spinning::before {
1536         position: absolute;
1537         display: block;
1538         align-items: center;
1539         top: 0;
1540         bottom: 0;
1541         left: .4em;
1542         width: 1.4em;
1543         height: 1.4em;
1544         animation: spin 1s linear infinite;
1545         content: url("spinner.svg");
1546         margin: auto;
1547         line-height: 0;
1548 }
1549
1550 button.spinning, .btn.spinning {
1551         padding-left: 1.6em !important;
1552 }
1553
1554 button.spinning::before, .btn.spinning::before {
1555         filter: invert(1);
1556         left: .2em;
1557         width: 1.2em;
1558         height: 1.2em;
1559 }
1560
1561 #view > div.spinning:first-child {
1562         padding: .5em 0;
1563 }
1564
1565 #view > *:last-child {
1566         margin: 0 0 1em 0;
1567 }
1568
1569 .label {
1570         background: var(--main-bright-color);
1571         color: var(--secondary-bright-color);
1572         font-size: .8rem;
1573         padding: 0 .4rem;
1574         border-radius: .5rem;
1575 }
1576
1577 .label.warning {
1578         background: var(--danger-color);
1579 }
1580
1581 .label.success {
1582         background: var(--success-color);
1583 }
1584
1585 ul.deps {
1586         margin: 0;
1587         padding: 0;
1588         font-size: .9rem;
1589 }
1590
1591 ul.errors {
1592         margin: 0 0 1em 0;
1593         padding: 0;
1594 }
1595
1596 @media only screen and (max-width: 800px) {
1597         body {
1598                 padding-top: 70px;
1599         }
1600
1601         #maincontent {
1602                 padding: .25em;
1603                 max-width: 100vw;
1604         }
1605
1606         #menubar {
1607                 background: var(--main-bright-color);
1608                 padding: 0 .5em;
1609                 position: fixed;
1610                 top: 0;
1611                 z-index: 1000;
1612         }
1613
1614         #menubar > h2 {
1615                 flex: 0 0 2em;
1616                 display: block;
1617                 border: 2px solid var(--secondary-bright-color);
1618                 color: var(--secondary-bright-color);
1619                 border-radius: .5em;
1620                 cursor: pointer;
1621                 font-size: 100%;
1622                 margin: 0 1em 0 0;
1623         }
1624
1625         #menubar > h2:hover {
1626                 border-color: var(--secondary-bright-color);
1627                 color: var(--secondary-bright-color);
1628         }
1629
1630         #menubar > h2 > * {
1631                 display: none;
1632         }
1633
1634         #menubar > h2::before {
1635                 content: "☰";
1636                 width: 35px;
1637                 line-height: 35px;
1638                 text-align: center;
1639                 display: inline-block;
1640                 color: inherit;
1641                 font-weight: bold;
1642         }
1643
1644         #menubar > h2.active::before {
1645                 content: "×";
1646                 font-size: 200%;
1647         }
1648
1649         #menubar .hostname {
1650                 font-size: 1.6em;
1651         }
1652
1653         .distversion {
1654                 display: none;
1655         }
1656
1657         #modemenu {
1658                 padding: .125em .25em;
1659         }
1660
1661         #mainmenu {
1662                 overflow-x: hidden;
1663                 overflow-y: auto;
1664                 max-width: 0;
1665                 padding: 1em 0;
1666                 transition: max-width .25s ease-in-out, padding .25s ease-in-out;
1667                 position: fixed;
1668                 z-index: 900;
1669                 height: 100%;
1670         }
1671
1672         #mainmenu.active {
1673                 max-width: 200px;
1674                 padding: 1em 1em calc(1em + 70px) 1em;
1675                 overflow-x: visible;
1676         }
1677
1678         #mainmenu > div {
1679                 position: static;
1680         }
1681
1682         #mainmenu ul > li {
1683                 padding: .25em 0;
1684         }
1685
1686         .hide-xs {
1687                 display: none !important;
1688         }
1689
1690         table {
1691                 display: flex;
1692                 flex-direction: column;
1693         }
1694
1695         tr {
1696                 display: block;
1697                 border-bottom: 1px solid var(--main-dark-color);
1698                 margin-bottom: .5em;
1699                 padding-bottom: .5em;
1700         }
1701
1702         tr.cbi-section-table-titles[data-title]::before,
1703         tr.cbi-section-table-titles,
1704         tr.cbi-section-table-descr {
1705                 display: none;
1706         }
1707
1708         tr[data-title]::before {
1709                 display: block;
1710                 font-weight: bold;
1711                 border-top: none;
1712                 padding: .4em 0;
1713                 font-size: 110%;
1714         }
1715
1716         td {
1717                 display: block;
1718                 border-top: none;
1719                 text-align: left !important;
1720                 padding: .2em 0;
1721         }
1722
1723         th, table-titles {
1724                 display: none;
1725         }
1726
1727         td[data-title] {
1728                 position: relative;
1729                 padding: .2em 0 .2em 40%;
1730         }
1731
1732         td[data-title]::before {
1733                 content: attr(data-title) ": ";
1734                 white-space: nowrap;
1735                 font-weight: bold;
1736                 width: 40%;
1737                 overflow: hidden;
1738                 text-overflow: ellipsis;
1739                 position: absolute;
1740                 left: 0;
1741                 top: 0;
1742                 bottom: 0;
1743                 padding: .2em 0;
1744                 text-align: left;
1745                 display: inline-flex;
1746                 align-items: center;
1747         }
1748
1749         td[data-title]::after {
1750                 content: "";
1751                 width: 2em;
1752                 position: absolute;
1753                 left: calc(40% - 2em);
1754                 top: 0;
1755                 bottom: 0;
1756                 display: block;
1757                 background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--secondary-bright-color) 90%);
1758         }
1759
1760         [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) td:first-of-type,
1761         [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) td:first-of-type {
1762                 font-weight: bold;
1763                 max-width: none;
1764                 width: 100%;
1765         }
1766
1767         [data-page="admin-status-overview"] td > span > span { font-size: .9rem; }
1768
1769         [data-page="admin-status-routes"] table:nth-of-type(3) td:nth-of-type(1) { word-break: break-all; }
1770
1771         [data-page="admin-network-firewall-zones"] td[data-name="_info"] {
1772                 padding: .2em 0;
1773                 line-height: 2.2rem;
1774         }
1775
1776         [data-page="admin-network-firewall-zones"] td[data-name="_info"]::before,
1777         [data-page="admin-network-firewall-zones"] td[data-name="_info"]::after {
1778                 display: none;
1779         }
1780
1781         [data-page="admin-network-firewall-zones"] td[data-name="_info"] label {
1782                 font-size: 1rem;
1783         }
1784
1785         #cbi-wireless-wifi-device tr { display: flex; flex-wrap: wrap; }
1786         #cbi-wireless-wifi-device tr > *:nth-child(1) { flex: 1 1 20%; align-self: center; }
1787         #cbi-wireless-wifi-device tr > *:nth-child(2) { flex: 2 2 75%; }
1788         #cbi-wireless-wifi-device tr > *:nth-child(3) { flex: 3 3 100%; }
1789
1790         #cbi-network-interface tr { display: flex; flex-wrap: wrap; }
1791         #cbi-network-interface tr > *:nth-child(1) { flex: 1 1 33%; align-self: center; }
1792         #cbi-network-interface tr > *:nth-child(2) { flex: 2 2 60%; align-self: center; font-size: .9rem; overflow: hidden; }
1793         #cbi-network-interface tr > *:nth-child(3) { flex: 3 3 100%; }
1794         #cbi-network-interface tr > *:nth-child(2) > div { overflow: hidden; text-overflow: ellipsis; }
1795
1796         .assoclist tr {
1797                 display: flex;
1798                 flex-wrap: wrap;
1799         }
1800
1801         .assoclist td > .ifacebadge {
1802                 max-width: 90px;
1803         }
1804
1805         .assoclist td > .ifacebadge > img {
1806                 margin: 0 35px;
1807         }
1808
1809         .assoclist td > .ifacebadge > span {
1810                 display: none;
1811         }
1812
1813         .assoclist td > .ifacebadge[data-ifname]::after {
1814                 content: attr(data-ifname);
1815         }
1816
1817         .assoclist td > .ifacebadge[data-signal]::after {
1818                 content: attr(data-signal) " dBm";
1819         }
1820
1821         .assoclist td:nth-of-type(3) {
1822                 font-weight: bold;
1823                 font-size: 1rem;
1824         }
1825
1826         .assoclist td:nth-of-type(1), .assoclist td:nth-of-type(4) {
1827                 flex: 1 1 100px;
1828                 margin-right: .5em;
1829         }
1830
1831         .assoclist td:nth-of-type(3), .assoclist td:nth-of-type(5) {
1832                 flex: 2 2 calc(100% - 110px);
1833                 overflow: hidden;
1834                 text-overflow: ellipsis;
1835                 align-self: center;
1836         }
1837
1838         .assoclist td:nth-of-type(6) { flex: 1; text-align: right !important; }
1839         .assoclist td[data-title] { padding: .2em 0; }
1840         .assoclist td[data-title]::before,
1841         .assoclist td[data-title]::after { display: none; }
1842
1843         .leases6 td:nth-of-type(3) { word-wrap: break-word; }
1844
1845         td.cbi-section-actions > div { display: flex; }
1846         td.cbi-section-actions > div > * { flex: 1; }
1847
1848         body.modal-overlay-active #modal_overlay > .modal {
1849                 width: 95%;
1850                 margin: 5% auto;
1851         }
1852
1853         input:not([type]),
1854         input[type="text"],
1855         input[type="password"],
1856         select,
1857         .cbi-dropdown:not(.btn):not(.cbi-button),
1858         .cbi-dynlist {
1859                 min-height: calc(2.2rem + 2px);
1860                 line-height: 2.2rem;
1861                 font-size: 1.2rem;
1862                 min-width: 10rem;
1863         }
1864
1865         button, .btn {
1866                 line-height: 1.8rem;
1867                 font-size: 1.2rem;
1868         }
1869
1870         select {
1871                 padding: .4em 0;
1872         }
1873
1874         .cbi-value > .cbi-value-field {
1875                 flex: 1 0 100%;
1876                 display: flex;
1877                 flex-direction: column;
1878                 max-width: 100%;
1879         }
1880
1881         .cbi-value > .cbi-value-field > div[id] {
1882                 display: flex;
1883                 flex-direction: row;
1884         }
1885
1886         .cbi-value > .cbi-value-field > div[id] > input,
1887         .cbi-value > .cbi-value-field > div[id] > select,
1888         .cbi-value > .cbi-value-field > div[id] > .cbi-filebrowser.open {
1889                 flex: 1;
1890                 width: 100%;
1891         }
1892
1893         .cbi-dynlist .item::after,
1894         .cbi-dynlist .add-item > .btn {
1895                 line-height: 2em;
1896                 flex-basis: 2rem;
1897                 width: 2rem;
1898         }
1899
1900         .ifacebadge.large {
1901                 font-size: .9rem;
1902         }
1903
1904         .control-group > *,
1905         .control-group > .cbi-dropdown > ul > li {
1906                 flex: 1;
1907                 white-space: normal;
1908                 word-wrap: break-word;
1909         }
1910
1911         .cbi-page-actions .cbi-dropdown,
1912         .cbi-page-actions .cbi-button-apply:first-child {
1913                 flex-basis: 100%;
1914         }
1915
1916         .cbi-checkbox {
1917                 margin: .25rem;
1918         }
1919
1920         .cbi-tabmenu {
1921                 margin: 0 -.25em 1em -.25em;
1922         }
1923
1924         .cbi-tooltip {
1925                 font-size: 1rem;
1926                 box-shadow: 0 0 4px rgba(0, 0, 0, .7);
1927         }
1928
1929         .cbi-value > label:first-child {
1930                 padding: 0 0 .5em 0;
1931         }
1932
1933         [data-page="admin-system-admin-sshkeys"] .cbi-dynlist > .item {
1934                 font-size: .9rem;
1935                 line-height: 1rem;
1936         }
1937
1938         [data-page="admin-system-opkg"] .control-group {
1939                 flex-wrap: wrap;
1940         }
1941
1942         [data-page="admin-status-iptables"] h2 + div.right {
1943                 margin: 0 0 1em 0 !important;
1944                 display: flex;
1945         }
1946 }
1947
1948 @media only screen and (min-width: 800px) and (max-width: 1200px) {
1949         .assoclist tr > *:nth-of-type(2) {
1950                 display: none;
1951         }
1952 }