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

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