themes/luci-theme-material/htdocs/luci-static/material/cascade.css

   1 /**
   2  *      Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
   3  *
   4  *      luci-theme-material
   5  *              Copyright 2015 Lutty Yang <lutty@wcan.in>
   6  *
   7  *      Have a bug? Please create an issue here on GitHub!
   8  *              https://github.com/LuttyYang/luci-theme-material/issues
   9  *
  10  *      luci-theme-bootstrap:
  11  *              Copyright 2008 Steven Barth <steven@midlink.org>
  12  *              Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
  13  *              Copyright 2012 David Menting <david@nut-bolt.nl>
  14  *
  15  *      MUI:
  16  *              https://github.com/muicss/mui
  17  *
  18  *      Menu and loading spinner icons from IcoMoon:
  19  *              https://icomoon.io
  20  *
  21  *      Pure CSS ripple effect:
  22  *              https://github.com/mladenplavsic/css-ripple-effect
  23  *
  24  *      Licensed to the public under the Apache License 2.0
  25  */
  26
  27 /*
  28  *      Include custom css
  29  */
  30 @import url("custom.css");
  31
  32 .table {
  33         position: relative;
  34         display: table;
  35 }
  36
  37 .tr {
  38         display: table-row;
  39 }
  40 .thead {
  41         display: table-header-group;
  42 }
  43
  44 .tbody {
  45         display: table-row-group;
  46 }
  47
  48 .tfoot {
  49         display: table-footer-group;
  50 }
  51
  52 .td,
  53 .th {
  54         line-height: normal;
  55         display: table-cell;
  56         padding: .5em;
  57         text-align: center;
  58         vertical-align: middle;
  59 }
  60
  61 .th {
  62         font-weight: bold;
  63 }
  64
  65 .tr.placeholder {
  66         height: 4em;
  67 }
  68
  69 .tr.placeholder > .td {
  70         line-height: 3;
  71         position: absolute;
  72         right: 0;
  73         bottom: 0;
  74         left: 0;
  75         text-align: center !important;
  76         background: inherit;
  77 }
  78
  79 .td[width="33%"],
  80 .td[width="33%"]~.td {
  81         padding: 1.1em;
  82 }
  83
  84 .table[width="33%"],
  85 .th[width="33%"],
  86 .td[width="33%"] {
  87         width: 33%;
  88 }
  89
  90 .table[width="100%"],
  91 .th[width="100%"],
  92 .td[width="100%"] {
  93         width: 100%;
  94 }
  95
  96 .col-1 {
  97         flex: 1 1 30px !important;
  98 }
  99
 100 .col-2 {
 101         flex: 2 2 60px !important;
 102 }
 103
 104 .col-3 {
 105         flex: 3 3 90px !important;
 106 }
 107
 108 .col-4 {
 109         flex: 4 4 120px !important;
 110 }
 111
 112 .col-5 {
 113         flex: 5 5 150px !important;
 114 }
 115
 116 .col-6 {
 117         flex: 6 6 180px !important;
 118 }
 119
 120 .col-7 {
 121         flex: 7 7 210px !important;
 122 }
 123
 124 .col-8 {
 125         flex: 8 8 240px !important;
 126 }
 127
 128 .col-9 {
 129         flex: 9 9 270px !important;
 130 }
 131
 132 .col-10 {
 133         flex: 10 10 300px !important;
 134 }
 135
 136 * {
 137         box-sizing: border-box;
 138         margin: 0;
 139         padding: 0;
 140 }
 141
 142 .h1,
 143 .h2,
 144 .h3,
 145 .h4,
 146 .h5,
 147 .h6,
 148 h1,
 149 h2,
 150 h3,
 151 h4,
 152 h5,
 153 h6 {
 154         font-family: inherit;
 155         font-weight: normal;
 156         line-height: 1.1 !important;
 157         color: inherit;
 158 }
 159
 160 html {
 161         overflow-y: hidden;
 162         -webkit-text-size-adjust: 100%;
 163         -ms-text-size-adjust: 100%;
 164 }
 165
 166 body {
 167         font-size: .8rem;
 168         background-color: #eee;
 169 }
 170
 171 html,
 172 body {
 173         font-family: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
 174         font-family: var(--font-body);
 175         height: 100%;
 176         margin: 0;
 177         padding: 0;
 178 }
 179
 180 select {
 181         padding: .36rem .8rem;
 182         color: #555;
 183         border: thin solid #ccc;
 184         background-color: var(--white-color);
 185         background-image: none;
 186 }
 187
 188 .btn,
 189 button,
 190 select,
 191 input,
 192 .cbi-dropdown {
 193         min-height: 1.8rem;
 194         padding: 0;
 195         color: rgba(0, 0, 0, .87);
 196         border: 0;
 197         border-bottom: 2px solid rgba(0, 0, 0, .26);
 198         border-radius: 0;
 199         outline: 0;
 200         background-color: transparent;
 201         background-image: none;
 202         box-shadow: none;
 203         align-items: center;
 204 }
 205
 206 select,
 207 .cbi-dropdown {
 208         width: inherit;
 209         cursor: default;
 210 }
 211
 212 select:not([multiple="multiple"]):focus,
 213 input:not(.cbi-button):focus,
 214 .cbi-dropdown:focus {
 215         border-color: var(--main-color);
 216 }
 217
 218 .cbi-dropdown,
 219 select[multiple="multiple"] {
 220         height: auto;
 221 }
 222
 223 pre {
 224         overflow: auto;
 225 }
 226
 227 code {
 228         font-size: 1rem;
 229         font-size-adjust: .35;
 230         padding: 1px 3px;
 231         color: #101010;
 232         border-radius: 2px;
 233         background: #ddd;
 234 }
 235
 236 abbr {
 237         cursor: help;
 238         text-decoration: underline;
 239         color: #005470;
 240 }
 241
 242 hr {
 243         margin: 1rem 0;
 244         opacity: .1;
 245         border-color: #eee;
 246 }
 247
 248 header,
 249 .main {
 250         position: absolute;
 251         width: 100%;
 252 }
 253
 254 header {
 255         position: fixed;
 256         z-index: 2000;
 257         float: left;
 258         height: 4rem;
 259         transition: box-shadow .2s;
 260         box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
 261 }
 262
 263 footer {
 264         font-size: .8rem;
 265         overflow: hidden;
 266         padding: 1rem;
 267         text-align: right;
 268         white-space: nowrap;
 269         color: #aaa;
 270         text-shadow: 0 0 2px #bbb;
 271 }
 272
 273 footer > a {
 274         text-decoration: none;
 275         color: #aaa;
 276 }
 277
 278 small {
 279         font-size: 90%;
 280         line-height: 1.42857143;
 281         white-space: normal;
 282 }
 283
 284 .main {
 285         position: relative;
 286         top: 4rem;
 287         bottom: 0;
 288         overflow-y: auto;
 289         height: 100%;
 290         height: calc(100% - 4rem);
 291 }
 292
 293 .main > .loading {
 294         position: fixed;
 295         z-index: 1000;
 296         top: 0;
 297         opacity: 1;
 298         visibility: visible;
 299         width: 100%;
 300         height: 100%;
 301         pointer-events: none;
 302         background-color: rgb(240, 240, 240);
 303         transition: visibility 400ms, opacity 400ms;
 304 }
 305
 306 .main > .loading > span {
 307         font-family: monospace;
 308         font-size: 2rem;
 309         font-size-adjust: .35;
 310         position: relative;
 311         top: 12.5%;
 312         display: block;
 313         text-align: center;
 314         color: #888;
 315 }
 316
 317 .main > .loading > span > .loading-img {
 318         position: relative;
 319         top: .1rem;
 320         left: .05rem;
 321         display: inline-block;
 322         width: 1.25rem;
 323         height: 1.25rem;
 324         margin-right: 1rem;
 325         animation: anim-rotate 2s infinite linear;
 326         background: url(./icons/spinner.svg) no-repeat center;
 327 }
 328
 329 @keyframes anim-rotate {
 330         0% {
 331                 -webkit-transform: rotate(0);
 332                 -ms-transform: rotate(0);
 333                 transform: rotate(0);
 334         }
 335         100% {
 336                 -webkit-transform: rotate(360deg);
 337                 -ms-transform: rotate(360deg);
 338                 transform: rotate(360deg);
 339         }
 340 }
 341
 342 .main-left {
 343         position: fixed;
 344         top: 4rem;
 345         float: left;
 346         overflow-x: auto;
 347         width: calc(0% + 15rem);
 348         height: calc(100% - 4rem);
 349         background-color: var(--menu-bg-color);
 350         transition: visibility 400ms, width 400ms;
 351 }
 352
 353 .main-right {
 354         float: right;
 355         width: 85%;
 356         width: calc(100% - 15rem);
 357         height: 100%;
 358         background-color: #eee;
 359 }
 360
 361 .main-right > #maincontent {
 362         background-color: #eee;
 363 }
 364
 365 .pull-right {
 366         float: right;
 367 }
 368
 369 .pull-left {
 370         float: left;
 371 }
 372
 373 .nowrap:not(.td) {
 374         white-space: nowrap;
 375 }
 376
 377 [disabled="disabled"] {
 378         pointer-events: none;
 379 }
 380
 381 header {
 382         color: var(--header-color);
 383         background: var(--header-bg);
 384 }
 385
 386 header > .fill > .container {
 387         margin-top: .5rem;
 388         padding: .5rem 1rem 0 1rem;
 389         -webkit-user-select: none;
 390         -moz-user-select: none;
 391         -ms-user-select: none;
 392         user-select: none;
 393 }
 394
 395 header > .fill > .container > #logo {
 396         margin: 0 3.5rem 0 1.5rem;
 397 }
 398
 399 header > .fill > .container > #logo > img {
 400         width: calc(0% + 10rem);
 401         margin-top: -.5rem;
 402 }
 403
 404 header > .fill > .container > .brand {
 405         font-size: 1.4rem;
 406         position: absolute;
 407         cursor: default;
 408         vertical-align: text-bottom;
 409         text-decoration: none;
 410         color: var(--header-color);
 411 }
 412
 413 header > .fill > .container > .status {
 414         position: absolute;
 415         top: 25%;
 416         right: 1em;
 417         float: right;
 418 }
 419
 420 header > .fill > .container > .status > * {
 421         position: relative;
 422         top: .2rem;
 423         float: left;
 424         margin-left: .3rem;
 425         cursor: pointer;
 426 }
 427
 428 .modemenu-buttons {
 429         display: flex;
 430         flex-wrap: wrap;
 431         align-items: center;
 432         color: var(--header-color);
 433         background: var(--header-bg);
 434         padding: .5rem;
 435         transition: box-shadow .2s;
 436         box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
 437 }
 438
 439 #modemenu {
 440         margin: 0.25rem;
 441         display: flex;
 442         align-items: center;
 443         flex-wrap: wrap;
 444 }
 445
 446 #modemenu > li > a {
 447         font-size: .8rem;
 448         font-weight: bold;
 449         padding: .3rem .8rem;
 450         white-space: nowrap;
 451         text-decoration: none;
 452         text-transform: uppercase;
 453         color: var(--white-color) !important;
 454         border-radius: 3px;
 455         background-color: #bfbfbf;
 456         text-shadow: none;
 457 }
 458
 459 #modemenu > li > a.active {
 460         background-color: var(--dark-blue-color) !important;
 461 }
 462
 463 #modemenu > li.divider {
 464         margin-left: .25rem;
 465         margin-right: .25rem;
 466         border: .5rem solid var(--submenu-bg-hover);
 467         border-left: 1px solid var(--submenu-bg-hover);
 468         border-right: 1px solid var(--submenu-bg-hover);
 469         border-radius: 1rem;
 470 }
 471
 472 #xhr_poll_status {
 473         display: flex;
 474 }
 475
 476 .alert,
 477 .alert-message {
 478         font-weight: bold;
 479         margin-bottom: 1em;
 480         padding: 1rem;
 481         border: 0;
 482         border-radius: 0 !important;
 483         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 484         text-shadow: 1px 1px rgba(0, 0, 0, .1);
 485 }
 486
 487 .alert-message > h4 {
 488         font-size: 110%;
 489         font-weight: bold;
 490 }
 491
 492 .alert-message > * {
 493         margin: .5rem 0;
 494 }
 495
 496 .alert-message .btn {
 497         padding: .3rem .6rem;
 498 }
 499
 500 .alert-message.notice,
 501 .label.notice {
 502         background-color: var(--notice-color);
 503         color: var(--on-notice-color);
 504 }
 505
 506 .alert-message.danger,
 507 .btn.danger,
 508 .label.danger {
 509         background-color: var(--danger-color);
 510         color: var(--on-danger-color);
 511 }
 512
 513 .alert-message.warning,
 514 .btn.warning,
 515 .label.warning {
 516         background-color: var(--warning-color);
 517         color: var(--on-warning-color);
 518 }
 519
 520 .alert-message.success,
 521 .btn.success,
 522 .label.success {
 523         background-color: var(--success-color);
 524         color: var(--on-success-color);
 525 }
 526
 527 .alert-message.error,
 528 .btn.error,
 529 .label.error {
 530         background-color: var(--on-error-color);
 531         color: var(--error-color);
 532 }
 533
 534 [data-indicator]:not([data-style="inactive"]) {
 535         background-color: var(--notice-color) !important;
 536 }
 537
 538 .container .alert,
 539 .container .alert-message {
 540         margin-top: 1rem;
 541 }
 542
 543 .main > .main-left > .nav {
 544         margin-top: .5rem;
 545 }
 546
 547 .main > .main-left > .nav > li {
 548         cursor: pointer;
 549         -webkit-user-select: none;
 550         -moz-user-select: none;
 551         -ms-user-select: none;
 552         user-select: none;
 553 }
 554
 555 .main > .main-left > .nav > li:last-child {
 556         display: flex;
 557         align-items: center;
 558         margin: 2rem 0 1rem 0;
 559         padding: 0 0 0 2rem;
 560 }
 561
 562 .main > .main-left > .nav > li a {
 563         display: block;
 564         color: var(--menu-color);
 565 }
 566
 567 .main > .main-left > .nav > li.active > a {
 568         color: var(--white-color);
 569 }
 570
 571 .main > .main-left > .nav > li.active {
 572         background-color: var(--submenu-bg-hover-active);
 573 }
 574
 575 .main > .main-left > .nav > li.slide.active {
 576         background-color: unset;
 577 }
 578
 579 .main > .main-left > .nav > .slide {
 580         padding: 0;
 581 }
 582
 583 .main > .main-left > .nav > .slide > ul {
 584         display: none;
 585 }
 586
 587 .main > .main-left > .nav > .slide.active > ul {
 588         display: block;
 589 }
 590
 591 .main > .main-left > .nav > .slide > .menu,
 592 .main > .main-left > .nav > li > [data-title] {
 593         font-size: 1.15rem;
 594         font-weight: 500;
 595         display: flex;
 596         align-items: center;
 597         width: 100%;
 598         padding: .5rem 1rem;
 599         text-decoration: none;
 600         color: var(--main-menu-color);
 601 }
 602
 603 .main > .main-left > .nav > .slide > .menu::before {
 604         position: absolute;
 605         right: 17px;
 606         width: 16px;
 607         height: 16px;
 608         content: "";
 609         background: url(./icons/arrow.svg) no-repeat;
 610 }
 611
 612 .main > .main-left > .nav > .slide > .menu.active::before {
 613         transform: rotate(-180deg);
 614 }
 615
 616 body[class*="node-"] > .main > .main-left > .nav > .slide > .menu::before {
 617         transition: transform .1s ease-in-out;
 618 }
 619
 620 body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before {
 621         transition: transform .2s ease-in-out;
 622 }
 623
 624 .main > .main-left[style*="overflow: hidden"] > .nav > .slide > .menu::before {
 625         display: none;
 626 }
 627
 628 .main > .main-left > .nav > li:last-child::before {
 629         position: absolute;
 630         left: 14px;
 631         width: 24px;
 632         height: 24px;
 633         content: url(./icons/logout.svg);
 634 }
 635
 636 .main > .main-left > .nav > li:hover,
 637 .main > .main-left > .nav > .slide > .menu:hover {
 638         background: var(--submenu-bg-hover);
 639 }
 640
 641 .main > .main-left > .nav > .slide:hover {
 642         background: none;
 643 }
 644
 645 .main > .main-left > .nav > .slide > .slide-menu > .active {
 646         background-color: var(--submenu-bg-hover-active);
 647 }
 648
 649 .main > .main-left > .nav > .slide > .slide-menu > li > a {
 650         white-space: nowrap;
 651         text-decoration: none;
 652         padding: .4rem 2rem;
 653 }
 654
 655 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
 656         color: var(--white-color);
 657 }
 658
 659 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
 660         background: var(--submenu-bg-hover);
 661 }
 662
 663 .main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a {
 664         color: var(--menu-color-hover);
 665 }
 666
 667 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
 668         background-color: var(--main-color);
 669 }
 670
 671 /* ripple effect */
 672 .main > .main-left > .nav > .slide > .menu,
 673 .main > .main-left > .nav > .slide > .slide-menu > li,
 674 .main > .main-left > .nav > li:last-child {
 675         position: relative;
 676         overflow: hidden;
 677         transform: translate3d(0, 0, 0);
 678 }
 679
 680 .main > .main-left > .nav > .slide > .menu::after,
 681 .main > .main-left > .nav > .slide > .slide-menu > li::after,
 682 .main > .main-left > .nav > li:last-child::after {
 683         position: absolute;
 684         top: 0;
 685         left: 0;
 686         display: block;
 687         width: 100%;
 688         height: 100%;
 689         content: "";
 690         transition: transform .5s, opacity 1s;
 691         transform: scale(10, 10);
 692         pointer-events: none;
 693         opacity: 0;
 694         background-image: radial-gradient(circle, var(--black-color) 10%, transparent 10.01%);
 695         background-repeat: no-repeat;
 696         background-position: 50%;
 697 }
 698
 699 .main > .main-left > .nav > .slide > .menu:active::after,
 700 .main > .main-left > .nav > .slide > .slide-menu > li:active::after,
 701 .main > .main-left > .nav > li:last-child:active::after {
 702         transition: 0s;
 703         transform: scale(0, 0);
 704         opacity: .2;
 705 }
 706
 707 #maincontent > .container {
 708         margin: 0 2rem 1rem 2rem;
 709 }
 710
 711 ul {
 712         line-height: normal;
 713 }
 714
 715 li {
 716         list-style-type: none;
 717 }
 718
 719 h1 {
 720         font-size: 2rem;
 721         padding-bottom: 10px;
 722         border-bottom: thin solid #eee;
 723 }
 724
 725 h2 {
 726         font-size: 1.8rem;
 727         margin: 2rem 0 0 0;
 728         padding-bottom: 10px;
 729         border-bottom: thin solid #eee;
 730 }
 731
 732 h3 {
 733         font-size: 1.4rem;
 734         margin: 2rem 0 0 0;
 735         padding-bottom: 10px;
 736 }
 737
 738 h4 {
 739         font-size: 1.2rem;
 740         margin: 2rem 0 0 0;
 741         padding-bottom: 10px;
 742 }
 743
 744 h5 {
 745         font-size: 1rem;
 746         margin: 2rem 0 0 0;
 747         padding-bottom: 10px;
 748 }
 749
 750 .cbi-section,
 751 .cbi-section-error,
 752 #iptables,
 753 .Firewall form,
 754 #cbi-network > .cbi-section-node,
 755 #cbi-wireless > .cbi-section-node,
 756 #cbi-wireless > #wifi_assoclist_table,
 757 [data-tab-title],
 758 [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
 759 [data-page="admin-system-opkg"] #maincontent > .container {
 760         font-family: inherit;
 761         font-weight: normal;
 762         font-style: normal;
 763         line-height: normal;
 764         min-width: inherit;
 765         margin: 1rem 0 0 0;
 766         padding: 2rem;
 767         border: 0;
 768         border-radius: 0;
 769         background-color: var(--white-color);
 770         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 771 }
 772
 773 .cbi-modal .cbi-section,
 774 .cbi-section .cbi-section {
 775         padding: 0;
 776         box-shadow: none;
 777 }
 778
 779 .cbi-modal .cbi-tabmenu {
 780         margin-left: 0;
 781 }
 782
 783 .cbi-map-descr,
 784 .cbi-section-descr {
 785         font-size: small;
 786         line-height: 1.42857143;
 787         padding: .5rem;
 788         color: #999;
 789 }
 790
 791 .cbi-map-descr + fieldset {
 792         margin-top: 1rem;
 793 }
 794
 795 .cbi-section > legend {
 796         display: none !important;
 797 }
 798
 799 fieldset > fieldset,
 800 .cbi-section > .cbi-section {
 801         margin: 0;
 802         padding: 0;
 803         border: 0;
 804         box-shadow: none;
 805 }
 806
 807 .cbi-section > h3:first-child,
 808 .panel-title {
 809         font-size: 1.4rem;
 810         line-height: 1;
 811         display: block;
 812         width: 100%;
 813         margin: 0;
 814         margin-bottom: .5rem;
 815         padding-bottom: 1rem;
 816         color: #404040;
 817         border-bottom: thin solid #eee;
 818 }
 819
 820 .cbi-section > h4:first-child,
 821 .cbi-section > p:first-child,
 822 [data-tab-title] > h3:first-child,
 823 [data-tab-title] > h4:first-child,
 824 [data-tab-title] > p:first-child {
 825         padding-top: 1rem;
 826 }
 827
 828 table {
 829         border-spacing: 0;
 830         border-collapse: collapse;
 831 }
 832
 833 table,
 834 .table {
 835         overflow-y: hidden;
 836         width: 100%;
 837         box-shadow: 0 0 0 1px #ddd;
 838 }
 839
 840 table > tbody > tr > td,
 841 table > tbody > tr > th,
 842 table > tfoot > tr > td,
 843 table > tfoot > tr > th,
 844 table > thead > tr > td,
 845 table > thead > tr > th,
 846 .table > .tbody > .tr > .td,
 847 .table > .tbody > .tr > .th,
 848 .table > .tfoot > .tr > .td,
 849 .table > .tfoot > .tr > .th,
 850 .table > .thead > .tr > .td,
 851 .table > .thead > .tr > .th,
 852 .table > .tr > .td.cbi-value-field,
 853 .table > .tr > .th.cbi-section-table-cell {
 854         padding: .5rem;
 855 }
 856
 857 .container > .cbi-section:first-of-type > .table[width="100%"] > .tr > .td {
 858         padding: .6rem;
 859 }
 860
 861 .cbi-section-table-cell {
 862         line-height: 1.1;
 863         align-self: flex-end;
 864         flex: 1 1 auto;
 865 }
 866
 867 tr > td,
 868 tr > th,
 869 .tr > .td,
 870 .tr > .th,
 871 .cbi-section-table-row::before,
 872 #cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) {
 873         border-top: thin solid #ddd;
 874 }
 875
 876 #cbi-wireless .td,
 877 #cbi-network .tr:first-child > .td,
 878 .table[width="100%"] > .tr:first-child > .td,
 879 [data-page="admin-network-diagnostics"] .tr > .td,
 880 .tr.table-titles > .th,
 881 .tr.cbi-section-table-titles > .th {
 882         border-top: 0 !important;
 883 }
 884
 885 .table[width="100%"] > .tr:first-child > .td {
 886         margin: auto 0;
 887 }
 888
 889 .cbi-section-table-row {
 890         margin-bottom: 1rem;
 891         text-align: center !important;
 892         background: var(--white-color-low);
 893 }
 894
 895 .cbi-section-table-row:last-child {
 896         margin-bottom: 0;
 897 }
 898
 899 .cbi-section-table-row > .cbi-value-field .cbi-dropdown,
 900 .cbi-section-table-row > .cbi-value-field .cbi-input-select,
 901 .cbi-section-table-row > .cbi-value-field .cbi-input-text,
 902 .cbi-section-table-row > .cbi-value-field .cbi-input-password {
 903         width: 100%;
 904 }
 905
 906 .cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
 907 .cbi-section-table-row > .cbi-value-field input.cbi-input-password {
 908         width: calc(100% - 1.5rem);
 909 }
 910
 911 .cbi-section-table-row .td {
 912         text-align: center !important;
 913 }
 914
 915 div > table > tbody > tr:nth-of-type(2n),
 916 div > .table > .tr:nth-of-type(2n) {
 917         background-color: var(--white-color-low);
 918 }
 919
 920 /* fix multiple table */
 921 table table,
 922 .table .table,
 923 .cbi-value-field table,
 924 .cbi-value-field .table,
 925 td > table > tbody > tr > td,
 926 .td > .table > .tbody > .tr > .td,
 927 .cbi-value-field > table > tbody > tr > td,
 928 .cbi-value-field > .table > .tbody > .tr > .td {
 929         border: 0;
 930 }
 931
 932 /* button style */
 933 .btn,
 934 .cbi-button,
 935 .item::after {
 936         font-size: .8rem;
 937         display: inline-block;
 938         width: auto !important;
 939         padding: 0 .8rem;
 940         cursor: pointer;
 941         -webkit-user-select: none;
 942         -moz-user-select: none;
 943         -ms-user-select: none;
 944         user-select: none;
 945         transition: all .2s ease-in-out;
 946         text-align: center;
 947         vertical-align: middle;
 948         white-space: nowrap;
 949         text-decoration: none;
 950         text-transform: uppercase;
 951         color: rgba(0, 0, 0, .87);
 952         border: 0;
 953         border-radius: .2rem;
 954         background-color: #f0f0f0;
 955         background-image: none;
 956         -webkit-appearance: none;
 957         -ms-touch-action: manipulation;
 958         touch-action: manipulation;
 959 }
 960
 961 .cbi-button-up,
 962 .cbi-button-down {
 963         font-size: 1.2rem;
 964         display: inline-block;
 965         min-width: 0;
 966         padding: .2rem .3rem;
 967         color: transparent !important;
 968         background: url(./icons/arrow.svg) no-repeat center;
 969         background-size: 12px 20px;
 970 }
 971
 972 .cbi-button-up {
 973         transform: scaleY(-1);
 974 }
 975
 976 .cbi-button:not(select) {
 977         -webkit-appearance: none !important;
 978 }
 979
 980 .cbi-button + .cbi-button {
 981         margin-left: .6rem;
 982 }
 983
 984 .btn:hover,
 985 .btn:focus,
 986 .btn:active,
 987 .cbi-button:hover,
 988 .cbi-button:focus,
 989 .cbi-button:active,
 990 .item:hover::after,
 991 .item:focus::after,
 992 .item:active::after,
 993 .cbi-page-actions .cbi-button-apply + .cbi-button-save:hover,
 994 .cbi-page-actions .cbi-button-apply + .cbi-button-save:focus,
 995 .cbi-page-actions .cbi-button-apply + .cbi-button-save:active {
 996         text-decoration: none;
 997         outline: 0;
 998 }
 999
1000 .btn:hover,
1001 .btn:focus,
1002 .cbi-button:hover,
1003 .cbi-button:focus,
1004 .item:hover::after,
1005 .item:focus::after {
1006         box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
1007 }
1008
1009 .btn:active,
1010 .cbi-button:active,
1011 .item:active::after {
1012         box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
1013 }
1014
1015 .cbi-button-up:hover,
1016 .cbi-button-up:focus {
1017         box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 -2px 2px rgba(0, 0, 0, .2);
1018 }
1019
1020 .cbi-button-up:active {
1021         box-shadow: 0 -10px 20px rgba(0, 0, 0, .19), 0 -6px 6px rgba(0, 0, 0, .23);
1022 }
1023
1024 .btn:disabled,
1025 .cbi-button:disabled {
1026         cursor: not-allowed;
1027         pointer-events: none;
1028         opacity: .5;
1029         box-shadow: none;
1030 }
1031
1032 /* gray */
1033 .alert-message [class="btn"],
1034 .modal div[class="btn"],
1035 .cbi-button-find,
1036 .cbi-button-link,
1037 .cbi-button-up,
1038 .cbi-button-down,
1039 .cbi-button-neutral,
1040 .cbi-button[name="zero"],
1041 .cbi-button[name="restart"],
1042 .cbi-button[onclick="hide_empty(this)"] {
1043         font-weight: bold;
1044         border: thin solid var(--gray-color-high);
1045         background-color: var(--gray-color);
1046 }
1047
1048 /* dark blue */
1049 .btn.primary,
1050 .cbi-page-actions .cbi-button-save,
1051 .cbi-page-actions .cbi-button-apply + .cbi-button-save,
1052 .cbi-button-add,
1053 .cbi-button-save,
1054 .cbi-button-positive,
1055 .cbi-button-link,
1056 .cbi-button[value="Enable"],
1057 .cbi-button[value="Scan"],
1058 .cbi-button[value^="Back"],
1059 .cbi-button-neutral[onclick="handleConfig(event)"] {
1060         font-weight: normal;
1061         color: var(--on-dark-blue-color);
1062         border: thin solid var(--dark-blue-color-high);
1063         background-color: var(--dark-blue-color);
1064 }
1065
1066 /* light blue */
1067 .cbi-page-actions .cbi-button-apply,
1068 .cbi-section-actions .cbi-button-edit,
1069 .cbi-button-edit,
1070 .cbi-button-apply,
1071 .cbi-button-reload,
1072 .cbi-button-action,
1073 .cbi-button[value="Submit"],
1074 .cbi-button[value="Upload"],
1075 .cbi-button[value$="Apply"],
1076 .cbi-button[onclick="addKey(event)"] {
1077         font-weight: normal;
1078         color: var(--on-light-blue-color);
1079         border: thin solid var(--light-blue-color-high);
1080         background-color: var(--light-blue-color);
1081 }
1082
1083 /* red */
1084 .btn.danger,
1085 .cbi-section-remove > .cbi-button,
1086 .cbi-button-remove,
1087 .cbi-button-reset,
1088 .cbi-button-negative,
1089 .cbi-button[value="Stop"],
1090 .cbi-button[value="Kill"],
1091 .cbi-button[onclick="reboot(this)"],
1092 .cbi-button-neutral[value="Restart"] {
1093         font-weight: normal;
1094         color: var(--on-red-color);
1095         border: thin solid var(--red-color-high);
1096         background-color: var(--red-color);
1097 }
1098
1099 /* yellow */
1100 .btn[value="Dismiss"],
1101 .cbi-button[value="Terminate"],
1102 .cbi-button[value="Reset"],
1103 .cbi-button[value="Disabled"],
1104 .cbi-button[onclick^="iface_reconnect"],
1105 .cbi-button[onclick="handleReset(event)"],
1106 .cbi-button-neutral[value="Disable"] {
1107         font-weight: normal;
1108         color: var(--on-yellow-color);
1109         border: thin solid var(--yellow-color-high);
1110         background-color: var(--yellow-color);
1111 }
1112
1113 /* green */
1114 .cbi-button-success,
1115 .cbi-button-download,
1116 .cbi-button[name="backup"],
1117 .cbi-button[value="Download"],
1118 .cbi-button[value="Save mtdblock"] {
1119         font-weight: normal;
1120         color: var(--on-green-color);
1121         border: thin solid var(--green-color-high);
1122         background-color: var(--green-color);
1123 }
1124
1125 .cbi-page-actions .cbi-button-link:first-child {
1126         float: left;
1127 }
1128
1129 .a-to-btn {
1130         text-decoration: none;
1131 }
1132
1133 .cbi-value-field .cbi-button-add {
1134         font-weight: bold;
1135         margin: 9px 0 4px 3px;
1136         padding: 1px 6px;
1137 }
1138
1139 .tabs {
1140         margin: 0 -2rem;
1141         padding-left: .5rem;
1142         background-color: var(--white-color);
1143 }
1144
1145 .tabs > li,
1146 .cbi-tabmenu > li {
1147         display: inline-block;
1148         padding: .55rem 0;
1149         cursor: pointer;
1150 }
1151
1152 .tabs > li {
1153         padding-bottom: .4rem;
1154         border-bottom: .2rem solid transparent;
1155 }
1156
1157 .tabs > li[class~="active"],
1158 .tabs > li:hover {
1159         border-bottom-color: var(--main-color);
1160 }
1161
1162 .tabs > li:hover {
1163         cursor: pointer;
1164         border-bottom-color: #c9c9c9;
1165 }
1166
1167 .tabs > li > a,
1168 .cbi-tabmenu > li > a {
1169         padding: .6rem .9rem;
1170         text-decoration: none;
1171         color: #404040;
1172 }
1173
1174 .tabs > li[class~="active"] > a {
1175         color: var(--main-color);
1176 }
1177
1178 .cbi-tabmenu {
1179         border: thin solid var(--gray-color);
1180         border-bottom: 0;
1181 }
1182
1183 .cbi-tabmenu > li:hover {
1184         background-color: #f1f1f1;
1185 }
1186
1187 .cbi-tabmenu > li[class~="cbi-tab"] {
1188         background-color: var(--white-color);
1189 }
1190
1191 .cbi-tabmenu {
1192         background-color: var(--gray-color);
1193 }
1194
1195 .cbi-section .cbi-section-remove:nth-of-type(2n),
1196 .container > .cbi-section .cbi-section-node:nth-of-type(2n) {
1197         background-color: var(--white-color-low);
1198 }
1199
1200 [data-tab-title] {
1201         overflow: hidden;
1202         height: 0;
1203         opacity: 0;
1204         margin: 0;
1205         padding: 0rem 1rem !important;
1206 }
1207
1208 [data-tab-active="true"] {
1209         overflow: visible;
1210         height: auto;
1211         opacity: 1;
1212         transition: opacity .25s ease-in;
1213         margin: inherit !important;
1214 }
1215
1216 .cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),
1217 .cbi-section[id] .cbi-section-node:nth-of-type(4n+4) {
1218         background-color: var(--white-color-low);
1219 }
1220
1221 .cbi-section-node-tabbed {
1222         margin-top: 0;
1223         padding: 0;
1224         border: thin solid var(--gray-color);
1225         border-top: 0;
1226 }
1227
1228 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
1229         background-color: var(--white-color-low);
1230 }
1231
1232 .cbi-value-field,
1233 .cbi-value-description {
1234         line-height: 1.25;
1235         display: table-cell;
1236 }
1237
1238 .cbi-value-description {
1239         font-size: small;
1240         padding-top: .4rem;
1241         opacity: .5;
1242 }
1243
1244 .cbi-value-title {
1245         display: table-cell;
1246         float: left;
1247         width: 23rem;
1248         padding-top: .35rem;
1249         padding-right: 2rem;
1250         text-align: right;
1251         word-wrap: break-word;
1252 }
1253
1254 .cbi-value {
1255         display: inline-block;
1256         width: 100%;
1257         padding: .35rem 1rem .2rem 1rem;
1258 }
1259
1260 .cbi-value ul {
1261         line-height: 1.25;
1262 }
1263
1264 .cbi-value-field .cbi-dropdown,
1265 .cbi-value-field .cbi-input-select,
1266 .cbi-value input[type="text"],
1267 .cbi-value input[type="password"] {
1268         min-width: 25rem;
1269 }
1270
1271 #cbi-firewall-zone .cbi-input-select,
1272 #cbi-network-switch_vlan .cbi-input-select {
1273         min-width: 11rem;
1274 }
1275
1276 #cbi-network-switch_vlan .cbi-input-text {
1277         max-width: 3rem;
1278 }
1279
1280 .cbi-input-invalid {
1281         color: var(--error-color);
1282         border-bottom-color: var(--error-color);
1283 }
1284
1285 .cbi-section-error {
1286         font-weight: bold;
1287         line-height: 1.42857143;
1288         margin: 18px;
1289         padding: 6px;
1290         border: thin solid var(--error-color);
1291         border-radius: 3px;
1292         background-color: #fce6e6;
1293 }
1294
1295 .cbi-section-error ul {
1296         margin: 0 0 0 20px;
1297 }
1298
1299 .cbi-section-error ul li {
1300         font-weight: bold;
1301         color: var(--error-color);
1302 }
1303
1304 .td[data-title]::before {
1305         font-weight: bold;
1306         display: none;
1307         padding: .25rem 0;
1308         content: attr(data-title) ":\20";
1309         text-align: left;
1310         white-space: nowrap;
1311 }
1312
1313 .tr.placeholder .td[data-title]::before {
1314         display: none;
1315 }
1316
1317 .tr[data-title]::before,
1318 .tr.cbi-section-table-titles.named::before {
1319         font-weight: bold;
1320         display: table-cell;
1321         align-self: center;
1322         flex: 1 1 5%;
1323         padding: .25rem;
1324         content: attr(data-title) "\20";
1325         text-align: center;
1326         vertical-align: middle;
1327         white-space: normal;
1328         word-wrap: break-word;
1329 }
1330
1331 .cbi-rowstyle-1 {
1332         background-color: var(--white-color-low);
1333 }
1334
1335 .cbi-rowstyle-2 {
1336         background-color: #eee;
1337 }
1338
1339 .cbi-rowstyle-2 .cbi-button-up,
1340 .cbi-rowstyle-2 .cbi-button-down,
1341 body:not(.Interfaces) .cbi-rowstyle-2:first-child {
1342         background-color: var(--white-color) !important;
1343 }
1344
1345 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
1346         width: auto !important;
1347 }
1348
1349 .td.cbi-section-actions {
1350         text-align: right !important;
1351         vertical-align: middle;
1352 }
1353
1354 .td.cbi-section-actions > * {
1355         display: inline-flex;
1356 }
1357
1358 .td.cbi-section-actions > * > *,
1359 .td.cbi-section-actions > * > form > * {
1360         margin: 0 5px;
1361 }
1362
1363 .td.cbi-section-actions > * > form {
1364         display: inline-flex;
1365         margin: 0;
1366 }
1367
1368 /* lists */
1369 .cbi-dynlist {
1370         line-height: 1.3;
1371         flex-direction: column;
1372         min-height: 30px;
1373         cursor: text;
1374 }
1375
1376 .cbi-dynlist > .item {
1377         position: relative;
1378         max-width: 25rem;
1379         margin-right: 2em;
1380         padding: .5em .25em .25em 0;
1381         pointer-events: none;
1382         color: #666;
1383         border-bottom: 2px solid rgba(0, 0, 0, .26);
1384         outline: 0;
1385 }
1386
1387 .cbi-dynlist[name="sshkeys"] > .item {
1388         max-width: none;
1389 }
1390
1391 .cbi-dynlist > .item::after {
1392         font-weight: bold;
1393         position: absolute;
1394         right: -2em;
1395         bottom: 0;
1396         display: inline-flex;
1397         min-height: 17px;
1398         padding: 0 6px;
1399         content: "\00D7";
1400         pointer-events: auto;
1401         color: var(--white-color);
1402         border: thin solid var(--red-color);
1403         background-color: var(--red-color-high);
1404 }
1405
1406 .cbi-dynlist > .item > span {
1407         white-space: normal;
1408         word-break: break-word;
1409 }
1410
1411 .cbi-dynlist > .add-item {
1412         display: inline-flex;
1413         align-items: center;
1414         width: 100%;
1415         min-width: 16rem;
1416 }
1417
1418 .cbi-dynlist > .add-item:not([ondrop]) > input {
1419         overflow: hidden;
1420         width: 100%;
1421         min-width: 15rem;
1422         white-space: nowrap;
1423         text-overflow: ellipsis;
1424 }
1425
1426 .cbi-dynlist > .add-item[ondrop] > input {
1427         min-width: 13rem;
1428 }
1429
1430 .cbi-dynlist,
1431 .cbi-dropdown {
1432         position: relative;
1433         display: inline-flex;
1434         padding: 0;
1435 }
1436
1437 .cbi-dropdown[placeholder*="select"] {
1438         max-width: 25rem;
1439         height: auto;
1440         margin-top: -3px;
1441 }
1442
1443 .cbi-dropdown > ul {
1444         display: flex;
1445         overflow-x: hidden;
1446         overflow-y: auto;
1447         width: 100%;
1448         margin: 0 !important;
1449         padding: 0;
1450         list-style: none;
1451         outline: 0;
1452 }
1453
1454 .cbi-dropdown > ul.preview {
1455         display: none;
1456 }
1457
1458 .cbi-dropdown > .open {
1459         flex-basis: 15px;
1460 }
1461
1462 .cbi-dropdown > .open,
1463 .cbi-dropdown > .more {
1464         font-size: 1rem;
1465         font-weight: 900;
1466         line-height: 2;
1467         display: flex;
1468         flex-direction: column;
1469         flex-grow: 0;
1470         flex-shrink: 0;
1471         justify-content: center;
1472         padding: 0 .25em;
1473         cursor: default;
1474         text-align: center;
1475         outline: 0;
1476 }
1477
1478 .cbi-dropdown.btn {
1479         min-height: 1.8rem;
1480         padding-top: 0px;
1481         padding-bottom: 0px;
1482         padding-right: 0px;
1483 }
1484
1485 .cbi-dropdown.btn > .open {
1486         font-size: 0.8rem;
1487         padding: 0px;
1488         margin: 0 5px;
1489 }
1490
1491 .cbi-dropdown.btn > div {
1492         margin: 0px;
1493 }
1494
1495 .cbi-dropdown > .more,
1496 .cbi-dropdown > ul > li[placeholder] {
1497         font-weight: bold;
1498         display: none;
1499         color: #777;
1500         text-shadow: 1px 1px 0 var(--white-color);
1501 }
1502
1503 .cbi-dropdown > ul > li {
1504         display: none;
1505         overflow: hidden;
1506         align-items: center;
1507         align-self: center;
1508         flex-grow: 1;
1509         flex-shrink: 1;
1510         min-height: 20px;
1511         padding: .25em;
1512         white-space: nowrap;
1513         text-overflow: ellipsis;
1514 }
1515
1516 .cbi-dropdown > ul > li .hide-open {
1517         display: initial;
1518 }
1519
1520 .cbi-dropdown > ul > li .hide-close {
1521         display: none;
1522 }
1523
1524 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1525         border-left: thin solid #ccc;
1526 }
1527
1528 .cbi-dropdown[empty] > ul {
1529         max-width: 1px;
1530 }
1531
1532 .cbi-dropdown > ul > li > form {
1533         display: none;
1534         margin: 0;
1535         padding: 0;
1536         pointer-events: none;
1537 }
1538
1539 .cbi-dropdown > ul > li img {
1540         margin-right: .25em;
1541         vertical-align: middle;
1542 }
1543
1544 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1545         height: auto;
1546         margin: 0;
1547 }
1548
1549 .cbi-dropdown > ul > li input[type="text"] {
1550         height: 20px;
1551 }
1552
1553 .cbi-dropdown[open] > ul.dropdown {
1554         position: absolute;
1555         z-index: 1100;
1556         display: block;
1557         width: auto;
1558         min-width: 100%;
1559         max-width: none;
1560         max-height: 200px !important;
1561         border: thin solid #918e8c;
1562         background: #f6f6f6;
1563         box-shadow: 0 0 4px #918e8c;
1564         color: var(--main-menu-color);
1565 }
1566
1567 .cbi-dropdown > ul > li[display],
1568 .cbi-dropdown[open] > ul.preview,
1569 .cbi-dropdown[open] > ul.dropdown > li,
1570 .cbi-dropdown[multiple] > ul > li > label,
1571 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1572 .cbi-dropdown[multiple][more] > .more,
1573 .cbi-dropdown[multiple][empty] > .more {
1574         display: flex;
1575         align-items: center;
1576         flex-grow: 1;
1577 }
1578
1579 .cbi-dropdown[empty] > ul > li,
1580 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1581 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1582         display: block;
1583 }
1584
1585 .cbi-dropdown[open] > ul.dropdown > li .hide-open {
1586         display: none;
1587 }
1588
1589 .cbi-dropdown[open] > ul.dropdown > li .hide-close {
1590         display: initial;
1591 }
1592
1593 .cbi-dropdown[open] > ul.dropdown > li {
1594         border-bottom: thin solid #ccc;
1595 }
1596
1597 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1598         background: #b0d0f0;
1599 }
1600
1601 .cbi-dropdown[open] > ul.dropdown > li.focus,
1602 .cbi-dropdown[open] > ul.dropdown > li:hover {
1603         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1604 }
1605
1606 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1607         margin-bottom: 0;
1608         border-bottom: 0;
1609 }
1610
1611 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1612         opacity: .7;
1613 }
1614
1615 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1616         width: 100%;
1617 }
1618
1619 .cbi-dropdown[disabled] {
1620         pointer-events: none;
1621         opacity: .6;
1622 }
1623
1624 .cbi-dropdown .zonebadge {
1625         width: 100%;
1626 }
1627
1628 .cbi-dropdown[open] .zonebadge {
1629         width: auto;
1630 }
1631
1632 /* progressbar */
1633 .cbi-progressbar {
1634         position: relative;
1635         min-width: 170px;
1636         height: 20px;
1637         margin: 6px 0;
1638         border: thin solid #999;
1639         background: #eee;
1640 }
1641
1642 .cbi-progressbar > div {
1643         width: 0;
1644         height: 100%;
1645         transition: width .25s ease-in;
1646         background: var(--bar-bg);
1647 }
1648
1649 .cbi-progressbar::after {
1650         font-family: monospace;
1651         font-weight: bold;
1652         font-size-adjust: .38;
1653         line-height: normal;
1654         position: absolute;
1655         top: 2px;
1656         right: 0;
1657         bottom: 2px;
1658         left: 0;
1659         overflow: hidden;
1660         content: attr(title);
1661         text-align: center;
1662         white-space: pre;
1663         text-overflow: ellipsis;
1664         text-shadow: 0 0 2px #eee;
1665 }
1666
1667 #modal_overlay {
1668         position: fixed;
1669         z-index: 900;
1670         top: 4rem;
1671         right: 10000px;
1672         bottom: 0;
1673         left: -10000px;
1674         overflow-y: scroll;
1675         transition: opacity .125s ease-in;
1676         opacity: 0;
1677         background: rgba(0, 0, 0, .7);
1678         -webkit-overflow-scrolling: touch;
1679 }
1680
1681 .modal {
1682         display: flex;
1683         align-items: center;
1684         flex-wrap: wrap;
1685         width: 90%;
1686         min-width: 270px;
1687         max-width: 600px;
1688         min-height: 32px;
1689         margin: 5em auto;
1690         padding: 1em;
1691         border-radius: 3px !important;
1692         background: var(--white-color);
1693         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1694 }
1695
1696 .modal > * {
1697         line-height: normal;
1698         flex-basis: 100%;
1699         margin-bottom: .5em;
1700         max-width: 100%;
1701 }
1702
1703 .modal > pre,
1704 .modal > textarea {
1705         font-size: 1rem;
1706         font-size-adjust: .35;
1707         overflow: auto;
1708         margin-bottom: .5em;
1709         padding: 8.5px;
1710         cursor: auto;
1711         white-space: pre-wrap;
1712         color: #eee;
1713         outline: 0;
1714         background-color: #101010;
1715         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1716 }
1717
1718 .modal > h4 {
1719         margin: .5em 0;
1720 }
1721
1722 .modal ul {
1723         margin-left: 2.2em;
1724         word-break: break-word;
1725 }
1726
1727 .modal li {
1728         list-style-type: square;
1729         color: #808080;
1730 }
1731
1732 .modal p {
1733         padding-left: .25rem;
1734         word-break: break-word;
1735 }
1736
1737 .modal label.btn {
1738         display: flex;
1739         align-items: center;
1740         white-space: normal;
1741         text-align: left;
1742         text-transform: none;
1743         padding-bottom: 0.2rem;
1744         padding-top: 0.2rem;
1745 }
1746
1747 .modal.cbi-modal {
1748         max-width: 90%;
1749         max-height: none;
1750 }
1751
1752 body.modal-overlay-active {
1753         overflow: hidden;
1754         height: 100vh;
1755 }
1756
1757 body.modal-overlay-active #modal_overlay {
1758         right: 0;
1759         left: 0;
1760         opacity: 1;
1761 }
1762
1763 .spinning {
1764         position: relative;
1765         padding-left: 32px !important;
1766 }
1767
1768 .spinning::before {
1769         position: absolute;
1770         top: 0;
1771         bottom: 0;
1772         left: .2em;
1773         width: 32px;
1774         content: "";
1775         background: url(../resources/icons/loading.gif) no-repeat center;
1776         background-size: 16px;
1777 }
1778
1779 /* luci */
1780 .hidden {
1781         display: none;
1782 }
1783
1784 .left,
1785 .left::before {
1786         text-align: left !important;
1787 }
1788
1789 .right,
1790 .right::before {
1791         text-align: right !important;
1792 }
1793
1794 .center,
1795 .center::before {
1796         text-align: center !important;
1797 }
1798
1799 .top {
1800         align-self: flex-start !important;
1801         vertical-align: top !important;
1802 }
1803
1804 .bottom {
1805         align-self: flex-end !important;
1806         vertical-align: bottom !important;
1807 }
1808
1809 .inline {
1810         display: inline;
1811 }
1812
1813 .cbi-page-actions {
1814         padding-top: 1rem;
1815         text-align: right;
1816 }
1817
1818 .cbi-page-actions > form[method="post"] {
1819         display: inline-block;
1820 }
1821
1822 .th[data-type="button"],
1823 .td[data-type="button"],
1824 .th[data-type="fvalue"],
1825 .td[data-type="fvalue"] {
1826         flex: 1 1 2em;
1827         text-align: center;
1828 }
1829
1830 .ifacebadge {
1831         display: inline-flex;
1832         gap: .2rem;
1833         padding: .5rem .8rem;
1834         border-bottom: thin solid #ccc;
1835         background: #eee;
1836         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
1837 }
1838
1839 td > .ifacebadge,
1840 .td > .ifacebadge {
1841         font-size: .8rem;
1842         background-color: #f0f0f0;
1843 }
1844
1845 .ifacebadge > em,
1846 .ifacebadge > img {
1847         display: inline-block;
1848         align-self: flex-start;
1849 }
1850
1851 .network-status-table {
1852         display: flex;
1853         flex-wrap: wrap;
1854 }
1855
1856 .network-status-table .ifacebox {
1857         flex-grow: 1;
1858         margin: .5em;
1859 }
1860
1861 .network-status-table .ifacebox-body {
1862         display: flex;
1863         flex-direction: column;
1864         height: 100%;
1865 }
1866
1867 .network-status-table .ifacebox-body > span {
1868         flex: 10 10 auto;
1869         height: 100%;
1870 }
1871
1872 .network-status-table .ifacebox-body > div {
1873         display: flex;
1874         flex-wrap: wrap;
1875 }
1876
1877 .network-status-table .ifacebox-body .ifacebadge {
1878         align-items: center;
1879         flex: 1 1 auto;
1880         min-width: 220px;
1881         margin: .5em .25em 0 .25em;
1882         padding: .5em;
1883         background-color: var(--white-color);
1884 }
1885
1886 #dsl_status_table .ifacebox-body span > strong {
1887         display: inline-block;
1888         min-width: 50%;
1889 }
1890
1891 /* textarea */
1892 .cbi-input-textarea {
1893         font-family: monospace;
1894         width: 100%;
1895         min-height: 14rem;
1896         padding: .8rem;
1897         color: var(--black-color);
1898 }
1899
1900 #syslog {
1901         font-size: small;
1902         overflow-y: hidden;
1903         width: 100%;
1904         min-height: 15rem;
1905         padding: 1rem;
1906         resize: none;
1907         color: #eee;
1908         border: 0;
1909         border-radius: 0;
1910         background-color: #101010;
1911         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1912 }
1913
1914 #syslog:focus {
1915         outline: 0;
1916 }
1917
1918 /* config changes */
1919 .uci-change-list {
1920         font-family: monospace;
1921 }
1922
1923 .uci-change-list ins,
1924 .uci-change-legend-label ins {
1925         display: block;
1926         padding: 2px;
1927         text-decoration: none;
1928         border: thin solid #0f0;
1929         background-color: #cfc;
1930 }
1931
1932 .uci-change-list del,
1933 .uci-change-legend-label del {
1934         font-style: normal;
1935         display: block;
1936         padding: 2px;
1937         text-decoration: none;
1938         border: thin solid #f00;
1939         background-color: #fcc;
1940 }
1941
1942 .uci-change-list var,
1943 .uci-change-legend-label var {
1944         font-style: normal;
1945         display: block;
1946         padding: 2px;
1947         text-decoration: none;
1948         border: thin solid #ccc;
1949         background-color: #eee;
1950 }
1951
1952 .uci-change-list var ins,
1953 .uci-change-list var del {
1954         font-style: normal;
1955         padding: 0;
1956         white-space: pre;
1957         border: 0;
1958 }
1959
1960 .uci-change-legend {
1961         padding: 5px;
1962 }
1963
1964 .uci-change-legend-label {
1965         float: left;
1966         width: 150px;
1967 }
1968
1969 .uci-change-legend-label > ins,
1970 .uci-change-legend-label > del,
1971 .uci-change-legend-label > var {
1972         display: block;
1973         float: left;
1974         width: 10px;
1975         height: 10px;
1976         margin-right: 4px;
1977 }
1978
1979 .uci-change-legend-label var ins,
1980 .uci-change-legend-label var del {
1981         line-height: .4;
1982         border: 0;
1983 }
1984
1985 .uci-change-list var,
1986 .uci-change-list del,
1987 .uci-change-list ins {
1988         padding: .5rem;
1989 }
1990
1991 /* other fix */
1992 #iwsvg,
1993 #iwsvg2,
1994 #bwsvg {
1995         border: thin solid var(--gray-color) !important;
1996 }
1997
1998 #iwsvg,
1999 [data-page="admin-status-realtime-bandwidth"] #bwsvg {
2000         border-top: 0 !important;
2001 }
2002
2003 .ifacebox {
2004         line-height: 1.25;
2005         display: inline-flex;
2006         flex-direction: column;
2007         min-width: 100px;
2008         border-bottom: thin solid #ccc;
2009         background-color: var(--white-color-low);
2010         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2);
2011 }
2012
2013 .ifacebox-head {
2014         padding: .25em;
2015         background: #eee;
2016 }
2017
2018 .ifacebox-head.active {
2019         background: var(--bar-bg);
2020 }
2021
2022 .ifacebox-body {
2023         padding: .25em;
2024 }
2025
2026 .cbi-image-button {
2027         margin-left: .5rem;
2028 }
2029
2030 .zonebadge {
2031         display: inline-block;
2032         padding: .2rem .5rem;
2033 }
2034
2035 .zonebadge .ifacebadge {
2036         margin: .1rem .2rem;
2037         padding: .2rem .3rem;
2038         border: thin solid #6c6c6c;
2039 }
2040
2041 .zonebadge > input[type="text"] {
2042         min-width: 10rem;
2043         margin-top: .3rem;
2044         padding: .16rem 1rem;
2045 }
2046
2047 .zonebadge > em,
2048 .zonebadge > strong {
2049         display: inline-block;
2050         margin: 0 .2rem;
2051 }
2052
2053 .cbi-value-field .cbi-input-checkbox,
2054 .cbi-value-field .cbi-input-radio {
2055         margin-top: .1rem;
2056 }
2057
2058 .cbi-value-field > ul > li {
2059         display: flex;
2060 }
2061
2062 .cbi-value-field > ul > li > label {
2063         margin-top: .5rem;
2064 }
2065
2066 .cbi-value-field > ul > li .ifacebadge {
2067         margin-top: -.5rem;
2068         margin-left: .4rem;
2069         background-color: #eee;
2070 }
2071
2072 .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
2073         min-width: 7rem;
2074 }
2075
2076 .cbi-section-create {
2077         display: inline-flex;
2078         align-items: center;
2079         margin: .5rem -3px;
2080 }
2081
2082 .cbi-section-create > * {
2083         margin: .5rem;
2084 }
2085
2086 .cbi-section-remove {
2087         padding: .5rem;
2088 }
2089
2090 div.cbi-value var,
2091 td.cbi-value-field var,
2092 .td.cbi-value-field var {
2093         font-style: italic;
2094         color: #0069d6;
2095 }
2096
2097 .cbi-optionals {
2098         padding: 1rem 1rem 0 1rem;
2099         border-top: thin solid #ccc;
2100 }
2101
2102 .cbi-dropdown-container {
2103         position: relative;
2104 }
2105
2106 .cbi-tooltip-container,
2107 span[data-tooltip],
2108 span[data-tooltip] .label {
2109         cursor: help !important;
2110 }
2111
2112 .cbi-tooltip {
2113         position: absolute;
2114         z-index: 1000;
2115         left: -1000px;
2116         padding: 2px 5px;
2117         transition: opacity .25s ease-out;
2118         white-space: pre;
2119         pointer-events: none;
2120         opacity: 0;
2121         border-radius: 3px;
2122         background: var(--white-color);
2123         box-shadow: 0 0 2px #444;
2124 }
2125
2126 .cbi-tooltip-container:hover .cbi-tooltip {
2127         left: auto;
2128         transition: opacity .25s ease-in;
2129         opacity: 1;
2130 }
2131
2132 .zonebadge .cbi-tooltip {
2133         margin: -1.5rem 0 0 -.5rem;
2134         padding: .25rem;
2135         background: inherit;
2136 }
2137
2138 .zonebadge-empty {
2139         color: #404040;
2140         background: repeating-linear-gradient(45deg, rgba(204, 204, 204, .5), rgba(204, 204, 204, .5) 5px, rgba(255, 255, 255, .5) 5px, rgba(255, 255, 255, .5) 10px);
2141 }
2142
2143 .zone-forwards {
2144         display: flex;
2145         min-width: 10rem;
2146 }
2147
2148 .zone-forwards > * {
2149         flex: 1 1 45%;
2150 }
2151
2152 .zone-forwards > span {
2153         flex-basis: 10%;
2154         padding: 0 .25rem;
2155         text-align: center;
2156 }
2157
2158 .zone-forwards .zone-src,
2159 .zone-forwards .zone-dest {
2160         display: flex;
2161         flex-direction: column;
2162 }
2163
2164 .label,
2165 [data-indicator] {
2166         font-size: .8rem;
2167         font-weight: bold;
2168         padding: .3rem .8rem;
2169         white-space: nowrap;
2170         text-decoration: none;
2171         text-transform: uppercase;
2172         color: var(--white-color) !important;
2173         border-radius: 3px;
2174         background-color: #bfbfbf;
2175         text-shadow: none;
2176 }
2177
2178 label > input[type="checkbox"],
2179 label > input[type="radio"] {
2180         margin-right: 0.8rem;
2181 }
2182
2183 label[data-index][data-depends] {
2184         padding-right: 2em;
2185 }
2186
2187 .showSide {
2188         display: none;
2189 }
2190
2191 .darkMask {
2192         position: fixed;
2193         z-index: 99;
2194         width: 100%;
2195         height: 100%;
2196         content: "";
2197         background-color: rgba(0, 0, 0, .56);
2198         transition: opacity 400ms, visibility 400ms;
2199         visibility: hidden;
2200         opacity: 0;
2201 }
2202
2203 /* diagnostics */
2204 #diag-rc-output > pre,
2205 #command-rc-output > pre,
2206 [data-page="admin-services-wol"] .notice code {
2207         font-size: 1.2rem;
2208         font-size-adjust: .35;
2209         line-height: normal;
2210         display: block;
2211         overflow-y: hidden;
2212         width: 100%;
2213         padding: 8.5px;
2214         white-space: pre;
2215         color: #eee;
2216         background-color: #101010;
2217         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
2218 }
2219
2220 [data-page="admin-network-diagnostics"] .table {
2221         box-shadow: none;
2222 }
2223
2224 input[name="ping"],
2225 input[name="traceroute"],
2226 input[name="nslookup"] {
2227         width: 80%;
2228 }
2229
2230 /* fix Main Login */
2231 .node-main-login > .main > .main-left {
2232         display: none;
2233 }
2234
2235 .node-main-login > .main > .main-right {
2236         width: 100%;
2237 }
2238
2239 .node-main-login > .main fieldset {
2240         display: inline;
2241         overflow: hidden;
2242         margin-bottom: 1rem;
2243         padding: .5rem;
2244         border: 0;
2245         background: none;
2246         box-shadow: none;
2247 }
2248
2249 .node-main-login > .main .cbi-value-title {
2250         width: 9.5rem;
2251 }
2252
2253 .node-main-login > .main #maincontent {
2254         text-align: center;
2255 }
2256
2257 .node-main-login > .main .container {
2258         display: inline-block;
2259         margin-top: 2rem !important;
2260         padding: 1rem 3.5rem 2rem;
2261         text-align: left;
2262         background-color: var(--white-color);
2263         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
2264 }
2265
2266 .node-main-login > .main form > div:last-child {
2267         float: right;
2268 }
2269
2270 .node-main-login > .main .cbi-value {
2271         display: block;
2272 }
2273
2274 .node-main-login > .main .cbi-value > * {
2275         display: inline-block !important;
2276 }
2277
2278 .node-main-login > .main .cbi-input-text {
2279         width: 100% !important;
2280         min-width: 15rem;
2281 }
2282
2283 .node-main-login .cbi-section {
2284         box-shadow: none;
2285 }
2286
2287 @media screen and (min-height: 585px) {
2288         .node-main-login footer {
2289                 position: absolute;
2290                 bottom: 0;
2291                 width: 100%;
2292         }
2293 }
2294
2295 /* fix status */
2296 .node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2),
2297 .node-status-processes > .main .table .tr .td:nth-child(3) {
2298         white-space: normal;
2299 }
2300
2301 /* fix system reboot */
2302 [data-page="admin-system-reboot"] p {
2303         padding-left: 2rem;
2304 }
2305
2306 [data-page="admin-system-reboot"] p > span {
2307         position: relative;
2308         top: .1rem;
2309         left: 1rem;
2310 }
2311
2312 /* samba */
2313 #cbi-samba [data-tab="template"] .cbi-value-field {
2314         display: block;
2315 }
2316
2317 #cbi-samba [data-tab="template"] .cbi-value-title {
2318         width: auto;
2319         padding-bottom: .6rem;
2320 }
2321
2322 /* software */
2323 .controls > * > .btn:not([aria-label$="page"]) {
2324         flex-grow: initial !important;
2325         margin-top: .1rem;
2326 }
2327
2328 .controls > #pager > .btn[aria-label$="page"] {
2329         font-size: 1.4rem;
2330         font-weight: bold;
2331 }
2332
2333 .controls > * > label {
2334         margin-bottom: .2rem;
2335 }
2336
2337 .control-group {
2338         display: flex;
2339         flex-wrap: wrap;
2340         gap: 2px;
2341 }
2342
2343 [data-page="admin-system-opkg"] div.btn {
2344         line-height: 3;
2345         display: inline;
2346         padding: .3rem .6rem;
2347 }
2348
2349 [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
2350 [data-page="admin-system-opkg"] #maincontent > .container {
2351         margin-top: 2rem;
2352         padding-top: .1rem;
2353 }
2354
2355 [data-page="admin-system-opkg"] #maincontent > .container {
2356         margin: 2rem;
2357         margin-bottom: 1rem;
2358 }
2359
2360 .td.version,
2361 .td.size {
2362         white-space: normal !important;
2363         word-break: break-word;
2364 }
2365
2366 .cbi-tabmenu + .cbi-section {
2367         margin-top: 0;
2368 }
2369
2370 /* wireless overview */
2371 #cbi-wireless > #wifi_assoclist_table > .tr {
2372         box-shadow: inset 1px -1px 0 #ddd, inset -1px -1px 0 #ddd;
2373 }
2374
2375 #cbi-wireless > #wifi_assoclist_table > .tr.placeholder > .td {
2376         right: 33px;
2377         bottom: 33px;
2378         left: 33px;
2379         border-top: thin solid #ddd !important;
2380 }
2381
2382 #cbi-wireless > #wifi_assoclist_table > .tr.table-titles {
2383         box-shadow: inset 1px 0 0 #ddd, inset -1px 0 0 #ddd;
2384 }
2385
2386 #cbi-wireless > #wifi_assoclist_table > .tr.table-titles > .th {
2387         border-bottom: thin solid #ddd;
2388         box-shadow: 0 -1px 0 0 #ddd;
2389 }
2390
2391 #wifi_assoclist_table > .tr > .td[data-title="RX Rate / TX Rate"] {
2392         width: 23rem;
2393 }
2394
2395 /* firewall */
2396 #iptables {
2397         margin: 0;
2398 }
2399
2400 .Firewall form {
2401         margin: 2rem 2rem 0 0;
2402         padding: 0;
2403         box-shadow: none;
2404 }
2405
2406 #cbi-firewall-redirect table *,
2407 #cbi-network-switch_vlan table *,
2408 #cbi-firewall-zone table * {
2409         font-size: small;
2410 }
2411
2412 #cbi-firewall-redirect table input[type="text"],
2413 #cbi-network-switch_vlan table input[type="text"],
2414 #cbi-firewall-zone table input[type="text"] {
2415         width: 5rem;
2416 }
2417
2418 #cbi-firewall-redirect table select,
2419 #cbi-network-switch_vlan table select,
2420 #cbi-firewall-zone table select {
2421         min-width: 3.5rem;
2422 }
2423
2424 #cbi-network-switch_vlan .th,
2425 #cbi-network-switch_vlan .td {
2426         flex-basis: 12%;
2427 }
2428
2429 #cbi-firewall-zone .table,
2430 #cbi-network-switch_vlan .table {
2431         display: block;
2432 }
2433
2434 #cbi-firewall-zone .td,
2435 #cbi-network-switch_vlan .td {
2436         width: 100%;
2437 }
2438
2439 /* applyreboot fix */
2440 #applyreboot-container {
2441         margin: 2rem;
2442 }
2443
2444 #applyreboot-section {
2445         line-height: 300%;
2446         margin: 2rem;
2447 }
2448
2449 /* openvpn bug fix */
2450 .OpenVPN a {
2451         line-height: initial !important;
2452 }
2453
2454 /* custom commands */
2455 .commandbox {
2456         width: 24% !important;
2457         margin: 10px 0 0 10px !important;
2458         padding: .5rem 1rem;
2459         border-bottom: thin solid #ccc;
2460         background: #eee;
2461         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
2462 }
2463
2464 .commandbox h3 {
2465         line-height: normal !important;
2466         overflow: hidden;
2467         margin: 6px 0 !important;
2468         white-space: nowrap;
2469         text-overflow: ellipsis;
2470 }
2471
2472 .commandbox div {
2473         left: auto !important;
2474 }
2475
2476 .commandbox code {
2477         margin-left: 4px;
2478         padding: 2px 3px;
2479 }
2480
2481 .commandbox p:first-of-type {
2482         margin-top: -6px;
2483 }
2484
2485 .commandbox p:nth-of-type(2) {
2486         margin-top: 2px;
2487 }
2488
2489 [data-page^="admin-system-commands"] .panel-title,
2490 [data-page^="command-cfg"] .mobile-hide,
2491 [data-page^="command-cfg"] .showSide {
2492         display: none;
2493 }
2494
2495 #command-rc-output .alert-message {
2496         line-height: 1.42857143;
2497         position: absolute;
2498         top: 40px;
2499         right: 32px;
2500         max-width: 40%;
2501         margin: 0;
2502         animation: anim-fade-in 1.5s forwards;
2503         word-break: break-word;
2504         opacity: 0;
2505 }
2506
2507 @keyframes anim-fade-in {
2508         100% {
2509                 opacity: 1;
2510         }
2511 }
2512
2513 /* IE hacks */
2514 @media all and (-ms-high-contrast: none) {
2515         .main > .main-left > .nav > .slide > .menu::before {
2516                 top: 30.25%;
2517         }
2518
2519         .main > .main-left > .nav > li:last-child::before {
2520                 top: 20%;
2521         }
2522
2523         .showSide::before {
2524                 top: -12px;
2525         }
2526 }
2527
2528 @media screen and (max-width: 1600px) {
2529         header > .fill > .container > #logo {
2530                 margin: 0 2.5rem 0 .5rem;
2531         }
2532
2533         .main-left {
2534                 width: calc(0% + 13rem);
2535         }
2536
2537         .main-right {
2538                 width: calc(100% - 13rem);
2539         }
2540
2541         .btn:not(button),
2542         .cbi-button {
2543                 font-size: .8rem;
2544                 padding: .3rem .6rem;
2545         }
2546
2547         .label,
2548         [data-indicator] {
2549                 padding: .2rem .6rem;
2550         }
2551
2552         fieldset,
2553         .cbi-section {
2554                 padding: 1rem;
2555         }
2556
2557         .cbi-value-title {
2558                 width: 15rem;
2559                 padding-right: .6rem;
2560         }
2561
2562         .cbi-value-field .cbi-dropdown,
2563         .cbi-value-field .cbi-input-select,
2564         .cbi-value input[type="text"],
2565         .cbi-value input[type="password"] {
2566                 min-width: 22rem;
2567         }
2568
2569         #cbi-firewall-zone .cbi-input-select {
2570                 min-width: 9rem;
2571         }
2572
2573         .cbi-input-textarea {
2574                 font-size: small;
2575         }
2576
2577         .node-admin-status > .main fieldset li > a {
2578                 padding: .3rem .6rem;
2579         }
2580 }
2581
2582 @media screen and (max-width: 1366px) {
2583         header {
2584                 height: 3.5rem;
2585         }
2586
2587         header > .fill > .container {
2588                 margin-top: .25rem;
2589                 cursor: default;
2590         }
2591
2592         .main {
2593                 top: 3.5rem;
2594                 height: calc(100% - 3.5rem);
2595         }
2596
2597         .main-left {
2598                 top: 3.5rem;
2599                 width: calc(0% + 13rem);
2600                 height: calc(100% - 3.5rem);
2601         }
2602
2603         .main-right {
2604                 width: calc(100% - 13rem);
2605         }
2606
2607         .tabs > li > a,
2608         .cbi-tabmenu > li > a {
2609                 padding: .2rem .5rem;
2610         }
2611
2612         .cbi-section > h3:first-child,
2613         .panel-title {
2614                 font-size: 1.1rem;
2615                 padding-bottom: 1rem;
2616         }
2617
2618         table {
2619                 font-size: .7rem !important;
2620                 width: 100% !important;
2621         }
2622
2623         .table .cbi-input-text {
2624                 width: 100%;
2625         }
2626
2627         .cbi-value-field .cbi-dropdown,
2628         .cbi-value-field .cbi-input-select,
2629         .cbi-value input[type="text"],
2630         .cbi-value input[type="password"] {
2631                 min-width: 19rem;
2632         }
2633
2634         #cbi-firewall-zone .cbi-input-select {
2635                 min-width: 4rem;
2636         }
2637
2638         .main > .main-left > .nav > li,
2639         .main > .main-left > .nav > li a,
2640         .main > .main-left > .nav > .slide > .menu,
2641         .main > .main-left > .nav > li > [data-title] {
2642                 font-size: .9rem;
2643         }
2644
2645         .main > .main-left > .nav > .slide > .slide-menu > li > a {
2646                 font-size: .7rem;
2647         }
2648
2649         #modal_overlay {
2650                 top: 3.5rem;
2651         }
2652
2653         [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) {
2654                 display: block;
2655         }
2656
2657         [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),
2658         [data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),
2659         [data-page="admin-network-hosts"] .table,
2660         [data-page="admin-network-routes"] .table {
2661                 overflow-y: visible;
2662         }
2663
2664         .commandbox {
2665                 width: 32% !important;
2666         }
2667 }
2668
2669 @media screen and (max-width: 1152px) {
2670         header > .fill > .container > #logo {
2671                 display: none;
2672         }
2673
2674         header > .fill > .container > .brand {
2675                 position: relative;
2676         }
2677
2678         html,
2679         .main {
2680                 overflow-y: visible;
2681         }
2682
2683         .main > .loading > span {
2684                 top: 25%;
2685         }
2686
2687         .main-left {
2688                 position: fixed;
2689                 z-index: 100;
2690                 visibility: hidden;
2691         }
2692
2693         .main-right {
2694                 width: 100%;
2695         }
2696
2697         .showSide {
2698                 position: relative;
2699                 top: .18rem;
2700                 display: inline-flex;
2701                 align-items: center;
2702                 width: 1.6rem;
2703                 height: 1.6rem;
2704                 margin-right: .7rem;
2705                 cursor: pointer;
2706         }
2707
2708         .showSide::before {
2709                 position: absolute;
2710                 left: 1px;
2711                 width: 24px;
2712                 height: 24px;
2713                 content: "";
2714                 background: url(./icons/menu.svg) no-repeat center;
2715         }
2716
2717         body:not(.logged-in) .showSide {
2718                 visibility: hidden;
2719                 width: 0;
2720                 margin: 0;
2721         }
2722
2723         .node-main-login > .main .cbi-value-title {
2724                 text-align: left;
2725         }
2726
2727         .cbi-value-title {
2728                 width: 12rem;
2729                 padding-right: 1rem;
2730         }
2731
2732         .cbi-value-field .cbi-dropdown,
2733         .cbi-value-field .cbi-input-select,
2734         .cbi-value input[type="text"] {
2735                 width: 16rem;
2736                 min-width: 16rem;
2737         }
2738
2739         .cbi-value input[type="password"],
2740         .cbi-value input[name^="pw"],
2741         .cbi-value input[data-update="change"]:nth-child(2) {
2742                 width: 13rem !important;
2743                 min-width: 13rem;
2744         }
2745
2746         #diag-rc-output > pre,
2747         #command-rc-output > pre,
2748         [data-page="admin-services-wol"] .notice code {
2749                 font-size: 1rem;
2750         }
2751
2752         .table {
2753                 display: block;
2754         }
2755
2756         .Interfaces .table {
2757                 overflow-x: hidden;
2758         }
2759
2760         #packages.table {
2761                 display: grid;
2762         }
2763
2764         .tr {
2765                 display: flex;
2766                 flex-direction: row;
2767                 flex-wrap: wrap;
2768         }
2769
2770         .Overview .table[width="100%"] > .tr {
2771                 flex-wrap: nowrap;
2772         }
2773
2774         .tr.placeholder {
2775                 border-bottom: thin solid #ddd;
2776         }
2777
2778         .tr.placeholder > .td,
2779         #cbi-firewall .tr > .td,
2780         #cbi-network .tr:nth-child(2) > .td,
2781         .cbi-section #wifi_assoclist_table .tr > .td {
2782                 border-top: 0;
2783         }
2784
2785         .th,
2786         .td {
2787                 display: inline-block;
2788                 align-self: flex-start;
2789                 flex: 2 2 25%;
2790                 text-overflow: ellipsis;
2791                 word-wrap: break-word;
2792         }
2793
2794         .td select,
2795         .td input[type="text"] {
2796                 width: 100%;
2797                 word-wrap: normal;
2798         }
2799
2800         .td [data-dynlist] > input,
2801         .td input.cbi-input-password {
2802                 width: calc(100% - 1.5rem);
2803         }
2804
2805         .td[data-type="button"],
2806         .td[data-type="fvalue"] {
2807                 flex: 1 1 12.5%;
2808                 text-align: left;
2809         }
2810
2811         .th.cbi-value-field,
2812         .td.cbi-value-field,
2813         .th.cbi-section-table-cell,
2814         .td.cbi-section-table-cell {
2815                 flex-basis: auto;
2816                 padding-top: 1rem;
2817         }
2818
2819         .cbi-section-table-row {
2820                 display: flex;
2821                 flex-direction: row;
2822                 flex-wrap: wrap;
2823                 justify-content: space-between;
2824                 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
2825         }
2826
2827         .td.cbi-value-field,
2828         .cbi-section-table-cell {
2829                 display: inline-block;
2830                 flex: 10 10 auto;
2831                 flex-basis: 50%;
2832                 text-align: center;
2833         }
2834
2835         .td.cbi-section-actions {
2836                 vertical-align: bottom;
2837         }
2838
2839         .tr.table-titles,
2840         .tr.cbi-section-table-titles,
2841         .tr.cbi-section-table-descr {
2842                 display: none;
2843         }
2844
2845         .tr[data-title]::before,
2846         .tr.cbi-section-table-titles.named::before {
2847                 font-size: .9rem;
2848                 display: block;
2849                 flex: 1 1 100%;
2850                 border-bottom: thin solid rgba(0, 0, 0, .26);
2851                 background: #90c0e0;
2852         }
2853
2854         .td[data-title],
2855         [data-page^="admin-status-realtime"] .td[id] {
2856                 text-align: left;
2857         }
2858
2859         .td[data-title]::before {
2860                 display: block;
2861         }
2862
2863         .cbi-button + .cbi-button {
2864                 margin-left: 0;
2865         }
2866
2867         .td.cbi-section-actions > * > *,
2868         .td.cbi-section-actions > * > form > * {
2869                 margin: 2.1px 3px;
2870         }
2871
2872         .Firewall form {
2873                 position: static !important;
2874                 margin: 0 0 2rem 0;
2875                 padding: 2rem;
2876                 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
2877         }
2878
2879         .Firewall form input {
2880                 width: 100% !important;
2881                 margin: 0;
2882                 margin-top: 1rem;
2883         }
2884
2885         .Firewall .center,
2886         .Firewall .center::before {
2887                 text-align: left !important;
2888         }
2889
2890         .commandbox {
2891                 width: 100% !important;
2892                 margin-left: 0 !important;
2893         }
2894 }
2895
2896 @media screen and (max-width: 600px) {
2897         body {
2898                 font-size: .8rem;
2899         }
2900
2901         .cbi-progressbar::after {
2902                 font-size: .95em;
2903                 line-height: 1.5;
2904         }
2905
2906         fieldset,
2907         .cbi-section {
2908                 margin: 1rem 0 0 0;
2909         }
2910
2911         .tabs {
2912                 margin: 0 -1rem;
2913         }
2914
2915         #maincontent > .container {
2916                 margin: 0 .5rem 1.5rem .5rem;
2917         }
2918
2919         .main > .main-left > .nav > .slide > .menu,
2920         .main > .main-left > .nav > li > [data-title] {
2921                 font-size: 1.2rem;
2922         }
2923
2924         .main > .main-left > .nav > .slide > .slide-menu > li > a {
2925                 font-size: 1rem;
2926         }
2927
2928         .cbi-value-title {
2929                 display: block;
2930                 min-width: 0 !important;
2931                 margin: .5rem 0;
2932                 text-align: left;
2933         }
2934
2935         .cbi-value-title,
2936         .cbi-value-description,
2937         .cbi-value-field,
2938         .cbi-value-field .cbi-dropdown,
2939         .cbi-value-field .cbi-input-select,
2940         .cbi-value input[type="text"] {
2941                 width: 100%;
2942         }
2943
2944         .cbi-value > .cbi-value-field {
2945                 display: inline-block;
2946         }
2947
2948         .tabs > li > a,
2949         .cbi-tabmenu > li > a {
2950                 font-size: .9rem;
2951                 padding: .2rem .3rem;
2952         }
2953
2954         .cbi-page-actions > div > input {
2955                 display: none;
2956         }
2957
2958         .cbi-page-actions > .cbi-button {
2959                 margin-top: .2rem;
2960         }
2961
2962         .node-main-login > .main .container {
2963                 margin: 2rem 1.2rem 1.5rem 1.2rem !important;
2964                 padding: .3rem 1.7rem 2rem 1.6rem;
2965         }
2966
2967         .node-main-login > .main .cbi-value {
2968                 padding: 0;
2969         }
2970
2971         .node-main-login > .main form > div:last-child {
2972                 margin-top: 2rem;
2973         }
2974
2975         .node-main-login > .main .cbi-value-title {
2976                 font-size: 1.2rem;
2977                 width: 100% !important;
2978         }
2979
2980         .node-main-login > .main fieldset {
2981                 margin: 0;
2982                 padding: .5rem;
2983         }
2984
2985         .commandbox p:first-of-type {
2986                 margin-top: -8px;
2987         }
2988
2989         #syslog,
2990         #diag-rc-output > pre,
2991         #command-rc-output > pre,
2992         [data-page="admin-services-wol"] .notice code {
2993                 font-size: .8rem !important;
2994         }
2995
2996         h2 {
2997                 font-size: 2rem;
2998         }
2999
3000         .tabs > li > a {
3001                 font-size: .9rem;
3002         }
3003
3004         select,
3005         input {
3006                 font-size: .9rem;
3007         }
3008
3009         code {
3010                 font-size: .8rem;
3011         }
3012
3013         .mobile-hide {
3014                 display: none;
3015         }
3016
3017         .cbi-section > h3:first-child,
3018         .panel-title {
3019                 font-size: 1.4rem;
3020                 padding-bottom: 1rem;
3021         }
3022
3023         .node-system-packages > .main .cbi-value.cbi-value-last > div {
3024                 width: 100% !important;
3025         }
3026
3027         .node-system-packages > .main .cbi-value .cbi-value-field input {
3028                 width: 100%;
3029         }
3030
3031         .th,
3032         .td {
3033                 flex-basis: 50%;
3034         }
3035
3036         .td.cbi-value-field {
3037                 flex-basis: 100%;
3038         }
3039
3040         .td.cbi-value-field[data-type="button"],
3041         .td.cbi-value-field[data-type="fvalue"] {
3042                 flex-basis: 25%;
3043                 text-align: left;
3044         }
3045
3046         .tr[data-title]::before,
3047         .tr.cbi-section-table-titles.named::before {
3048                 font-size: 1rem;
3049         }
3050
3051         td > .ifacebadge,
3052         .td > .ifacebadge {
3053                 font-size: .62rem;
3054         }
3055
3056         #cbi-wireless > #wifi_assoclist_table .td {
3057                 overflow: hidden;
3058         }
3059
3060         #cbi-wireless > .cbi-section-node .td,
3061         .Interfaces .td.cbi-section-actions {
3062                 text-align: center !important;
3063         }
3064
3065         [data-page="admin-status-processes"] .td[data-title="Hang Up"]::before,
3066         [data-page="admin-status-processes"] .td[data-title="Terminate"]::before,
3067         [data-page="admin-status-processes"] .td[data-title="Kill"]::before {
3068                 display: none;
3069         }
3070
3071         .hide-sm,
3072         .hide-xs:not([data-title="MAC-Address"]) {
3073                 display: none;
3074         }
3075
3076         .cbi-modal {
3077                 padding: .5rem;
3078         }
3079
3080         .cbi-modal .cbi-value {
3081                 padding: 0 0 .25rem 0;
3082         }
3083
3084         .cbi-modal [data-tab-title] {
3085                 padding: 0 .25rem !important;
3086         }
3087
3088         [data-tab-title] {
3089                 padding: 0 .5rem !important;
3090         }
3091 }
3092
3093 @media screen and (min-width: 600px) {
3094         ::-webkit-scrollbar {
3095                 width: 10px;
3096                 height: 10px;
3097         }
3098
3099         ::-webkit-scrollbar,
3100         ::-webkit-scrollbar-corner {
3101                 background: transparent;
3102         }
3103
3104         ::-webkit-scrollbar-thumb {
3105                 background: #9e9e9e;
3106         }
3107
3108         ::-webkit-scrollbar-thumb:hover {
3109                 background: #757575;
3110         }
3111
3112         ::-webkit-scrollbar-thumb:active {
3113                 background: #424242;
3114         }
3115 }