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