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