diff --git a/htdocs/luci-static/argon/cascade.css b/htdocs/luci-static/argon/cascade.css
index e1e65b3..9363432 100644
--- a/htdocs/luci-static/argon/cascade.css
+++ b/htdocs/luci-static/argon/cascade.css
@@ -764,7 +764,7 @@ header .fill .status * {
   content: "\e90d";
   color: #2dce89;
 }
-.main .main-left .nav li.slide .menu[data-title=docker]:before {
+.main .main-left .nav li.slide .menu[data-title=Docker]:before {
   content: "\e911";
   color: #6699ff;
 }
diff --git a/htdocs/luci-static/argon/cascade.less b/htdocs/luci-static/argon/cascade.less
index 3ca7cac..c2d22a8 100644
--- a/htdocs/luci-static/argon/cascade.less
+++ b/htdocs/luci-static/argon/cascade.less
@@ -1,3701 +1,3094 @@
-// out: ./cascade.css, compress: false , sourceMap: true
-/**
- *  Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
- *
- *  luci-theme-argon
- *      Copyright 2019 Jerrykuku <jerrykuku@qq.com>
- *
- *  Have a bug? Please create an issue here on GitHub!
- *      https://github.com/jerrykuku/luci-theme-argon/issues
- *
- *  luci-theme-material: 
- *      Copyright 2015 Lutty Yang <lutty@wcan.in>
- *		https://github.com/LuttyYang/luci-theme-material/
- *
- *  Agron Theme
- *	    https://demos.creative-tim.com/argon-dashboard/index.html
- *
- *  Login background
- *      https://unsplash.com/
- *  Font generate by Icomoon<icomoon.io>
- *
- *  Licensed to the public under the Apache License 2.0
- */
-
-/*
- *	Include base and custom css
- */
-
-@import url("custom.css?v=1");
-
-/*
-  *	Icon Css and Fonts 
-  */
-@font-face {
-    font-family: 'argon';
-    src: url('fonts/argon.eot?vncylf');
-    src: url('fonts/argon.eot?vncylf#iefix') format('embedded-opentype'),
-        url('fonts/argon.ttf?vncylf') format('truetype'),
-        url('fonts/argon.woff?vncylf') format('woff'),
-        url('fonts/argon.svg?vncylf#argon') format('svg');
-    font-weight: normal;
-    font-style: normal;
-    font-display: block;
-}
-
-@font-face {
-    font-family: 'TypoGraphica';
-    src: url('fonts/TypoGraphica.eot?#iefix') format('embedded-opentype'),
-        url('fonts/TypoGraphica.woff') format('woff'),
-        url('fonts/TypoGraphica.ttf') format('truetype'),
-        url('fonts/TypoGraphica.svg#TypoGraphica') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-
-[class^="icon-"],
-[class*=" icon-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'argon' !important;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-hello-world:before {
-    content: "\e90e";
-}
-
-.icon-expand_more:before {
-    content: "\e20b";
-}
-
-.icon-menu:before {
-    content: "\e20e";
-}
-
-.icon-favorite:before {
-    content: "\e291";
-}
-
-.icon-spinner:before {
-    content: "\e603";
-}
-
-.icon-delete:before {
-    content: "\e900";
-}
-
-.icon-edit:before {
-    content: "\e901";
-}
-
-.icon-use:before {
-    content: "\e902";
-}
-
-.icon-loading:before {
-    content: "\e903";
-}
-
-.icon-switch:before {
-    content: "\e904";
-}
-
-.icon-error:before {
-    content: "\e905";
-}
-
-.icon-dashboard:before {
-    content: "\e906";
-}
-
-.icon-logout:before {
-    content: "\e907";
-}
-
-.icon-Network:before {
-    content: "\e908";
-}
-
-.icon-services:before {
-    content: "\e909";
-}
-
-.icon-system:before {
-    content: "\e90a";
-}
-
-.icon-vpn:before {
-    content: "\e90b";
-}
-
-.icon-storage:before {
-    content: "\e90c";
-}
-
-.icon-statistics:before {
-    content: "\e90d";
-}
-
-.icon-angle-right:before {
-    content: "\e90f";
-}
-
-.icon-password:before {
-    content: "\e910";
-}
-
-.icon-user:before {
-    content: "\e971";
-}
-
-.icon-question:before {
-    content: "\f059";
-}
-
-.icon-docker:before {
-    content: "\e911";
-}
-
-
-.sk-folding-cube {
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    left: 50%;
-    top: 50%;
-    margin: -20px 0 0 -20px;
-    -webkit-transform: rotateZ(45deg);
-    transform: rotateZ(45deg);
-}
-
-.sk-folding-cube .sk-cube {
-    float: left;
-    width: 50%;
-    height: 50%;
-    position: relative;
-    -webkit-transform: scale(1.1);
-    -ms-transform: scale(1.1);
-    transform: scale(1.1); 
-}
-.sk-folding-cube .sk-cube:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #5e72e4;
-    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
-    animation: sk-foldCubeAngle 2.4s infinite linear both;
-    -webkit-transform-origin: 100% 100%;
-    -ms-transform-origin: 100% 100%;
-    transform-origin: 100% 100%;
-}
-.sk-folding-cube .sk-cube2 {
-    -webkit-transform: scale(1.1) rotateZ(90deg);
-    transform: scale(1.1) rotateZ(90deg);
-}
-.sk-folding-cube .sk-cube3 {
-    -webkit-transform: scale(1.1) rotateZ(180deg);
-    transform: scale(1.1) rotateZ(180deg);
-}
-.sk-folding-cube .sk-cube4 {
-    -webkit-transform: scale(1.1) rotateZ(270deg);
-    transform: scale(1.1) rotateZ(270deg);
-}
-.sk-folding-cube .sk-cube2:before {
-    -webkit-animation-delay: 0.3s;
-    animation-delay: 0.3s;
-}
-.sk-folding-cube .sk-cube3:before {
-    -webkit-animation-delay: 0.6s;
-    animation-delay: 0.6s; 
-}
-.sk-folding-cube .sk-cube4:before {
-    -webkit-animation-delay: 0.9s;
-    animation-delay: 0.9s;
-}
-
-@-webkit-keyframes sk-foldCubeAngle {
-    0%, 10% {
-        -webkit-transform: perspective(140px) rotateX(-180deg);
-        transform: perspective(140px) rotateX(-180deg);
-        opacity: 0; 
-    } 25%, 75% {
-        -webkit-transform: perspective(140px) rotateX(0deg);
-        transform: perspective(140px) rotateX(0deg);
-        opacity: 1; 
-    } 90%, 100% {
-        -webkit-transform: perspective(140px) rotateY(180deg);
-        transform: perspective(140px) rotateY(180deg);
-        opacity: 0; 
-    } 
-}
-
-@keyframes sk-foldCubeAngle {
-    0%, 10% {
-        -webkit-transform: perspective(140px) rotateX(-180deg);
-        transform: perspective(140px) rotateX(-180deg);
-        opacity: 0; 
-    } 25%, 75% {
-        -webkit-transform: perspective(140px) rotateX(0deg);
-        transform: perspective(140px) rotateX(0deg);
-        opacity: 1; 
-    } 90%, 100% {
-        -webkit-transform: perspective(140px) rotateY(180deg);
-        transform: perspective(140px) rotateY(180deg);
-        opacity: 0; 
-    }
-}
-
-
-.table {
-    position: relative;
-    display: table;
-}
-
-.tr {
-    display: table-row;
-}
-
-.thead {
-    display: table-header-group;
-}
-
-.tbody {
-    display: table-row-group;
-}
-
-.tfoot {
-    display: table-footer-group;
-}
-
-.td,
-.th {
-    line-height: normal;
-    display: table-cell;
-    padding: .5em;
-    text-align: center;
-    vertical-align: middle;
-}
-
-.th {
-    font-weight: bold;
-}
-
-.tr.placeholder {
-    height: 4em;
-}
-
-.tr.placeholder>.td {
-    line-height: 3;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: 0.4rem 0 !important;
-    text-align: center !important;
-    background: inherit;
-}
-
-.td[width="33%"] {
-    padding: 1.1em 1.5rem;
-}
-
-.table[width="33%"],
-.th[width="33%"],
-.td[width="33%"] {
-    width: 33%;
-}
-
-.table[width="100%"],
-.th[width="100%"],
-.td[width="100%"] {
-    width: 100%;
-}
-
-.col-1 {
-    flex: 1 1 30px !important;
-}
-
-.col-2 {
-    flex: 2 2 60px !important;
-}
-
-.col-3 {
-    flex: 3 3 90px !important;
-}
-
-.col-4 {
-    flex: 4 4 120px !important;
-}
-
-.col-5 {
-    flex: 5 5 150px !important;
-}
-
-.col-6 {
-    flex: 6 6 180px !important;
-}
-
-.col-7 {
-    flex: 7 7 210px !important;
-}
-
-.col-8 {
-    flex: 8 8 240px !important;
-}
-
-.col-9 {
-    flex: 9 9 270px !important;
-}
-
-.col-10 {
-    flex: 10 10 300px !important;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    color: #32325d;
-    color: var(--gray-dark);
-}
-
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-family: inherit;
-    font-weight: normal;
-    line-height: 1.1 !important;
-    color: inherit;
-}
-
-html {
-    overflow-y: hidden;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-}
-
-body {
-    font-size: .8rem;
-    background-color: #f8f9fe;
-}
-
-html,
-body {
-    font-family: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
-    font-family: var(--font-body);
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-select {
-    padding: .36rem .8rem;
-    color: #555;
-    border: thin solid #ccc;
-    background-color: #fff;
-    background-image: none;
-}
-
-.btn,
-button,
-select,
-input,
-.cbi-dropdown {
-    line-height: 1.5rem;
-    height: 2.5rem;
-    padding: .625rem .75rem;
-    margin: 0.25rem 0.1rem;
-    color: #8898aa;
-    border: 1px solid #dee2e6;
-
-    border-radius: .25rem;
-    outline: 0;
-    background-image: none;
-    box-shadow: none;
-    transition: box-shadow .15s ease;
-}
-
-select,
-.cbi-dropdown {
-    width: inherit;
-    cursor: default;
-}
-
-select:not([multiple="multiple"]):focus,
-input:not(.cbi-button):focus,
-.cbi-dropdown:focus {
-    border-color: #5e72e4;
-    border-color: var(--primary);
-    box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1);
-}
-
-.cbi-dropdown,
-select[multiple="multiple"] {
-    height: auto;
-}
-
-pre {
-    overflow: auto;
-}
-
-code {
-    font-size: 1rem;
-    font-size-adjust: .35;
-    padding: 1px 3px;
-    color: #101010;
-    border-radius: 2px;
-    background: #ddd;
-}
-
-abbr {
-    cursor: help;
-    text-decoration: underline;
-    color: #fff;
-}
-
-hr {
-    margin: 1rem 0;
-    opacity: .1;
-    border-color: #eee;
-}
-
-header,
-.main {
-    width: 100%;
-}
-
-
-footer {
-    font-size: .8rem;
-    overflow: hidden;
-    padding: 1rem;
-    text-align: right;
-    white-space: nowrap;
-    color: #aaa;
-    text-shadow: 0 0 2px #bbb;
-}
-
-footer>a {
-    text-decoration: none;
-    color: #aaa;
-}
-
-small {
-    font-size: 90%;
-    line-height: 1.42857143;
-    white-space: normal;
-}
-
-.main {
-    position: relative;
-    top: 0;
-    bottom: 0;
-    overflow-y: auto;
-    height: 100%;
-}
-
-.main>.loading {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    background-color: rgb(240, 240, 240);
-}
-
-.main>.loading>span {
-    font-family: monospace;
-    font-size: 2rem;
-    font-size-adjust: .35;
-    position: relative;
-    top: 12.5%;
-    display: block;
-    text-align: center;
-    color: #888;
-}
-
-.main>.loading>span>.loading-img {
-    position: relative;
-    top: .1rem;
-    left: .05rem;
-    display: inline-block;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 1rem;
-    animation: anim-rotate 2s infinite linear;
-    background: url(./icons/spinner.svg) no-repeat center;
-}
-
-@keyframes anim-rotate {
-    0% {
-        -webkit-transform: rotate(0);
-        -ms-transform: rotate(0);
-        transform: rotate(0);
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-.main-left {
-    position: fixed;
-    top: 0;
-    float: left;
-    overflow-x: auto;
-    width: 15%;
-    width: calc(0% + 15rem);
-    height: 100%;
-    background-color: #fff;
-    background-color: var(--menu-bg-color);
-    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
-    overflow-x: auto;
-    position: fixed;
-    z-index: 100;
-
-    .sidenav-header {
-        padding: 1.5rem;
-        text-align: center;
-
-        .brand {
-            font-size: 1.8rem;
-            color: #5e72e4;
-            font-family: "TypoGraphica";
-            text-decoration: none;
-            text-align: center;
-            cursor: default;
-            vertical-align: text-bottom;
-            white-space: nowrap;
-        }
-    }
-}
-
-.main-right {
-    float: right;
-    width: 85%;
-    width: calc(100% - 15rem);
-    height: 100%;
-    background-color: #f8f9fe;
-    transition: all 0.2s;
-}
-
-.main-right>#maincontent {
-    position: relative;
-    z-index: 50;
-    margin-top: -13rem;
-}
-
-.pull-right {
-    float: right;
-}
-
-.pull-left {
-    float: left;
-}
-
-.nowrap:not(.td) {
-    white-space: nowrap;
-}
-
-[disabled="disabled"] {
-    pointer-events: none;
-}
-
-header {
-    color: #fff;
-    color: var(--header-color);
-    padding: 0 0 14rem 0;
-
-    &.bg-primary {
-        background-color: #5e72e4 !important;
-        background-color: var(--primary) !important;
-    }
-
-    .fill {
-        padding: 0.8rem 0;
-        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
-
-        .container {
-            height: 2rem;
-            padding: 0 1rem;
-
-            .showSide {
-                display: none;
-                color: #fff;
-                font-size: 1.4rem;
-            }
-
-            .brand {
-                font-size: 1.5rem;
-                color: #fff;
-                font-family: "TypoGraphica";
-                text-decoration: none;
-                padding-left: 1rem;
-                cursor: default;
-                vertical-align: text-bottom;
-                display: none;
-            }
-
-            .pull-right {
-                float: right;
-                margin-top: 0rem;
-                display: flex;
-            }
-        }
-
-        .status {
-            position: absolute;
-            top: 25%;
-            right: 1em;
-            float: right;
-
-            * {
-                position: relative;
-                top: .2rem;
-                float: left;
-                margin-left: .3rem;
-                cursor: pointer;
-            }
-        }
-    }
-}
-
-#xhr_poll_status {
-    display: flex;
-    margin-left: 0.5rem;
-    * {
-        color: #fff;
-    }
-}
-
-.danger {
-    background-color: #ff7d60 !important;
-}
-
-.warning {
-    background-color: #f0e68c !important;
-}
-
-.success {
-    background-color: #5cb85c !important;
-}
-
-.notice {
-    background-color: #11cdef !important;
-    color: #fff;
-}
-
-.error {
-    color: #f00;
-}
-
-.alert,
-.alert-message {
-    font-weight: bold;
-    margin-bottom: 1em;
-    padding: 1rem;
-    border: 0;
-    border-radius: 0.375rem !important;
-    background-color: #fff;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
-    text-shadow: 1px 1px rgba(0, 0, 0, .1);
-
-    &.error{
-        background-color: #ffd600;
-    }
-
-    h4{
-        padding: 0rem 1.5rem 0.75rem 0rem;
-    }
-
-    .btn{
-        height: auto;
-    }
-}
-
-.alert-message>h4 {
-    font-size: 110%;
-    font-weight: bold;
-}
-
-.alert-message>* {
-    margin: .5rem 0;
-}
-
-.alert-message .btn {
-    padding: .3rem .6rem;
-}
-
-.container .alert,
-.container .alert-message {
-    margin-top: 1rem;
-}
-
-
-/*
- *	Main Menu
- */
-
-.main {
-    .main-left {
-        transition: all 0.2s;
-
-        .nav {
-            margin-top: 0.5rem;
-
-            li {
-                padding: 0.5rem 1rem;
-                cursor: pointer;
-                -webkit-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
-
-                a {
-                    display: block;
-                    color: #5f6368;
-                    color: var(--menu-color);
-                }
-
-                &.slide {
-                    padding: 0;
-
-                    ul {
-                        display: none;
-                    }
-
-                    .menu {
-                        display: block;
-                        margin: 0.1rem .5rem 0.1rem .5rem;
-                        padding: .675rem 0 .675rem 2.5rem;
-                        border-radius: .375rem;
-                        text-decoration: none;
-                        cursor: default;
-                        font-size: 1rem;
-                        transition: all 0.2s;
-                        position: relative;
-
-                        &.active {
-                            color: #fff;
-                            background: #5e72e4;
-                            background: var(--primary);
-
-                            &::before {
-                                color: #fff !important;
-                            }
-
-                            &::after {
-                                transform: rotate(90deg);
-                                color: #fff !important;
-                            }
-                        }
-
-                        &:hover {
-                            cursor: pointer;
-                            color: #fff;
-                            background: #5e72e4;
-                            background: var(--primary);
-
-                            &::before {
-                                color: #fff !important;
-                            }
-                        }
-
-                        &::before {
-                            font-family: 'argon' !important;
-                            font-style: normal;
-                            font-weight: normal;
-                            font-variant: normal;
-                            text-transform: none;
-                            line-height: 1;
-                            /* Better Font Rendering =========== */
-                            -webkit-font-smoothing: antialiased;
-                            -moz-osx-font-smoothing: grayscale;
-                            position: absolute;
-                            left: 0.8rem;
-                            padding-top: 3px;
-                            transition: all 0.3s;
-                        }
-
-                        &::after {
-                            position: absolute;
-                            right: 0.5rem;
-                            top: 0.8rem;
-                            font-family: 'argon' !important;
-                            font-style: normal;
-                            font-weight: normal;
-                            font-variant: normal;
-                            text-transform: none;
-                            line-height: 1;
-
-                            /* Better Font Rendering =========== */
-                            -webkit-font-smoothing: antialiased;
-                            -moz-osx-font-smoothing: grayscale;
-                            content: '\e90f';
-                            transition: all .15s ease;
-                            color: #ced4da;
-                            text-rendering: auto;
-                            -webkit-font-smoothing: antialiased;
-                            transition: all 0.3s;
-                        }
-                    }
-
-                    .menu[data-title=Status]:before {
-                        content: "\e906";
-                        color: #5e72e4;
-                    }
-
-                    .menu[data-title=System]:before {
-                        content: "\e90a";
-                        color: #fb6340;
-                    }
-
-                    .menu[data-title=Services]:before {
-                        content: "\e909";
-                        color: #11cdef;
-                    }
-
-                    .menu[data-title=NAS]:before {
-                        content: "\e90c";
-                        color: #f3a4b5;
-                    }
-
-                    .menu[data-title=VPN]:before {
-                        content: "\e90b";
-                        color: #172b4d;
-                    }
-
-                    .menu[data-title=Network]:before {
-                        content: "\e908";
-                        color: #8965e0;
-                    }
-
-                    .menu[data-title=docker]:before {
-                        content: "\e911";
-                        color: #6699ff;
-                    }
-
-                    .menu[data-title=Bandwidth_Monitor]:before {
-                        content: "\e90d";
-                        color: #2dce89;
-                    }
-
-                    
-
-                    &:hover {
-                        background: none;
-                    }
-
-                    .slide-menu {
-                        margin: 0 0.5rem 0 2.5rem;
-                        padding: 0rem 0.5rem;
-
-                        li {
-                            position: relative;
-                            border-radius: 0.375rem;
-                            margin: 0.2rem 0;
-                            padding: 0.5rem 0rem;
-                            background: none;
-
-                            a {
-                                white-space: nowrap;
-                                text-decoration: none;
-                            }
-
-                            &::after {
-                                content: "";
-                                position: absolute;
-                                left: 0;
-                                bottom: 0;
-                                width: 0;
-                                height: 2px;
-                                background-color: #5e72e4;
-                                transition: all 0.2s;
-                            }
-
-                            &:hover {
-                                background: none;
-
-                                &::after {
-                                    width: 100%;
-                                }
-                            }
-
-                        }
-
-                        .active {
-                            background: none;
-
-                            color: var(--menu-color);
-
-                            a {
-                                color: var(--menu-color);
-                            }
-
-                            &::after {
-                                content: "";
-                                position: absolute;
-                                left: 0;
-                                bottom: 0;
-                                width: 100%;
-                                height: 2px;
-                                background-color: #5e72e4;
-                                transition: all 0.2s;
-                            }
-
-                            &:hover {
-
-                                background: none;
-
-                                &::after {
-                                    width: 100%;
-                                }
-                            }
-                        }
-                    }
-
-                }
-            }
-        }
-    }
-}
-.lg{
-    margin: 0;
-    padding: 0 !important;
-}
-.logout {
-    display: block;
-    margin: 0.8rem .5rem 0.1rem 0.5rem;
-    padding: .675rem 0 .675rem 2.5rem;
-    border-radius: .375rem;
-    text-decoration: none;
-    font-size: 1rem;
-    transition: all 0.2s;
-    position: relative;
-}
-
-.logout:before {
-    font-family: 'argon' !important;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    position: absolute;
-    left: 0.8rem;
-    padding-top: 3px;
-    transition: all 0.3s;
-    content: "\e907";
-    color: #32325d !important;
-}
-
-
-body[class*="node-"]>.main>.main-left>.nav>.slide>.menu::before {
-    transition: transform .1s ease-in-out;
-}
-
-body[class*="node-"]>.main>.main-left>.nav>.slide>.menu.active::before {
-    transition: transform .2s ease-in-out;
-}
-
-.main>.main-left[style*="overflow: hidden"]>.nav>.slide>.menu::before {
-    display: none;
-}
-
-
-
-
-#maincontent>.container {
-    margin: 0 2rem 1rem 2rem;
-}
-
-ul {
-    line-height: normal;
-}
-
-li {
-    list-style-type: none;
-}
-
-h1 {
-    font-size: 2rem;
-    padding-bottom: 10px;
-    border-bottom: thin solid #eee;
-}
-
-h2 {
-    color: #fff;
-    font-size: 1.8rem;
-    margin: 1rem 0 0 0;
-    padding-bottom: 10px;
-
-}
-
-h3 {
-    font-size: 1.4rem;
-    margin: 0rem 0 0 0;
-    padding: 2rem 1.5rem 1.25rem 1.5rem;
-}
-
-h4 {
-    font-size: 1.2rem;
-    margin: 2rem 0 0 0;
-    padding: 0rem 1.5rem 0.75rem 1.5rem;
-}
-
-h5 {
-    font-size: 1rem;
-    margin: 2rem 0 0 0;
-    padding-bottom: 10px;
-}
-
-.cbi-section,
-.cbi-section-error,
-#iptables,
-.Firewall form,
-#cbi-network>.cbi-section-node,
-#cbi-wireless>.cbi-section-node,
-#cbi-wireless>#wifi_assoclist_table,
-[data-tab-title],
-[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
-[data-page="admin-system-opkg"] #maincontent>.container {
-    font-family: inherit;
-    font-weight: normal;
-    font-style: normal;
-    line-height: normal;
-    min-width: inherit;
-    margin: 1.5rem 0;
-    padding: 0rem;
-    border: 0;
-
-    border-radius: 0.375rem;
-    background-color: #fff;
-    box-shadow: 0 0 1rem 0 rgba(136, 152, 170, .15)
-}
-
-.cbi-modal .cbi-section,
-.cbi-section .cbi-section {
-    padding: 0;
-    box-shadow: none;
-}
-
-.cbi-modal .cbi-tabmenu {
-    margin-left: 0;
-}
-
-.cbi-map-descr,
-.cbi-section-descr {
-    font-size: small;
-    line-height: 1.42857143;
-    padding: .5rem 0;
-    color: #fff;
-}
-
-.cbi-map-descr+fieldset {
-    margin-top: 1rem;
-}
-
-.cbi-section>legend {
-    display: none !important;
-}
-
-fieldset>fieldset,
-.cbi-section>.cbi-section {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    box-shadow: none;
-}
-
-.cbi-section>h3:first-child,
-.panel-title {
-    font-size: 1.4rem;
-    line-height: 1;
-    display: block;
-    width: 100%;
-    margin: 0;
-    margin-bottom: 0;
-    padding: 1.25rem 1.5rem;
-    color: #32325d;
-    color: var(--gray-dark);
-
-}
-
-.cbi-section>h3:first-child,
-.cbi-section>h4:first-child,
-.cbi-section>p:first-child,
-[data-tab-title]>h3:first-child,
-[data-tab-title]>h4:first-child,
-[data-tab-title]>p:first-child {
-    padding-top: 1rem;
-}
-
-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-}
-
-table,
-.table {
-    overflow-y: hidden;
-    width: 100%;
-
-}
-
-table>tbody>tr>td,
-table>tbody>tr>th,
-table>tfoot>tr>td,
-table>tfoot>tr>th,
-table>thead>tr>td,
-table>thead>tr>th,
-.table>.tbody>.tr>.td,
-.table>.tbody>.tr>.th,
-.table>.tfoot>.tr>.td,
-.table>.tfoot>.tr>.th,
-.table>.thead>.tr>.td,
-.table>.thead>.tr>.th,
-.table>.tr>.td.cbi-value-field,
-.table>.tr>.th.cbi-section-table-cell {
-    padding: .5rem;
-}
-
-.container>.cbi-section:first-of-type>.table[width="100%"]>.tr>.td {
-    padding: .6rem;
-}
-
-.cbi-section-table-cell {
-    line-height: 1.1;
-    align-self: flex-end;
-    flex: 1 1 auto;
-}
-
-tr>td,
-tr>th,
-.tr>.td,
-.tr>.th,
-.cbi-section-table-row::before,
-#cbi-wireless>#wifi_assoclist_table>.tr:nth-child(2) {
-    border-top: thin solid #ddd;
-    padding: 1.1em 1.5rem;
-}
-
-#cbi-wireless .td,
-#cbi-network .tr:first-child>.td,
-.table[width="100%"]>.tr:first-child>.td,
-[data-page="admin-network-diagnostics"] .tr>.td,
-.tr.table-titles>.th,
-.tr.cbi-section-table-titles>.th {
-    border-top: 0 !important;
-    background-color: #f6f9fc;
-    padding: 1.1em 1.5rem;
-    line-height: 1.3rem;
-}
-
-.table[width="100%"]>.tr:first-child>.td {
-    margin: auto 0;
-}
-
-.cbi-section-table-row {
-    margin-bottom: 1rem;
-    text-align: center !important;
-    background: #f4f4f4;
-}
-
-.cbi-section-table-row:last-child {
-    margin-bottom: 0;
-}
-
-.cbi-section-table-row>.cbi-value-field .cbi-dropdown,
-.cbi-section-table-row>.cbi-value-field .cbi-input-select,
-.cbi-section-table-row>.cbi-value-field .cbi-input-text,
-.cbi-section-table-row>.cbi-value-field .cbi-input-password {
-    width: 100%;
-}
-
-.cbi-section-table-row>.cbi-value-field [data-dynlist]>input,
-.cbi-section-table-row>.cbi-value-field input.cbi-input-password {
-    width: calc(100% - 1.5rem);
-}
-
-.cbi-section-table-row .td {
-    text-align: center !important;
-}
-
-div>table>tbody>tr:nth-of-type(2n),
-div>.table>.tr:nth-of-type(2n) {
-    background-color: #f9f9f9;
-}
-
-/* fix multiple table */
-table table,
-.table .table,
-.cbi-value-field table,
-.cbi-value-field .table,
-td>table>tbody>tr>td,
-.td>.table>.tbody>.tr>.td,
-.cbi-value-field>table>tbody>tr>td,
-.cbi-value-field>.table>.tbody>.tr>.td {
-    border: 0;
-}
-
-/* button style */
-.btn,
-.cbi-button,
-.item::after {
-    font-size: .8rem;
-    display: inline-block;
-    width: auto !important;
-    padding: 0 .8rem;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    transition: all .2s ease-in-out;
-    text-align: center;
-    vertical-align: middle;
-    white-space: nowrap;
-    text-decoration: none;
-    text-transform: uppercase;
-    color: rgba(0, 0, 0, .87);
-    border: 0;
-    border-radius: .2rem;
-    background-color: #f0f0f0;
-    background-image: none;
-    -webkit-appearance: none;
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-}
-
-.cbi-button-up,
-.cbi-button-down {
-    font-size: 1.2rem;
-    display: inline-block;
-    min-width: 0;
-    padding: .2rem .3rem;
-    color: transparent !important;
-    background: url(./icons/arrow.svg) no-repeat center;
-    background-size: 12px 20px;
-}
-
-.cbi-button-up {
-    transform: scaleY(-1);
-}
-
-.cbi-button:not(select) {
-    -webkit-appearance: none !important;
-}
-
-.cbi-button+.cbi-button {
-    margin-left: .6rem;
-}
-
-.btn:hover,
-.btn:focus,
-.btn:active,
-.cbi-button:hover,
-.cbi-button:focus,
-.cbi-button:active,
-.item:hover::after,
-.item:focus::after,
-.item:active::after,
-.cbi-page-actions .cbi-button-apply+.cbi-button-save:hover,
-.cbi-page-actions .cbi-button-apply+.cbi-button-save:focus,
-.cbi-page-actions .cbi-button-apply+.cbi-button-save:active {
-    text-decoration: none;
-    outline: 0;
-}
-
-.btn:hover,
-.btn:focus,
-.cbi-button:hover,
-.cbi-button:focus,
-.item:hover::after,
-.item:focus::after {
-    box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
-}
-
-.btn:active,
-.cbi-button:active,
-.item:active::after {
-    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
-}
-
-.cbi-button-up:hover,
-.cbi-button-up:focus {
-    box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 -2px 2px rgba(0, 0, 0, .2);
-}
-
-.cbi-button-up:active {
-    box-shadow: 0 -10px 20px rgba(0, 0, 0, .19), 0 -6px 6px rgba(0, 0, 0, .23);
-}
-
-.btn:disabled,
-.cbi-button:disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-    opacity: .5;
-    box-shadow: none;
-}
-
-/* gray */
-.alert-message [class="btn"],
-.modal div[class="btn"],
-.cbi-button-find,
-.cbi-button-link,
-.cbi-button-up,
-.cbi-button-down,
-.cbi-button-neutral,
-.cbi-button[name="zero"],
-.cbi-button[name="restart"],
-.cbi-button[onclick="hide_empty(this)"] {
-    font-weight: bold;
-    color: #fff;
-    border: thin solid #8898aa;
-    background-color: #8898aa;
-}
-
-/* dark blue */
-.btn.primary,
-.cbi-page-actions .cbi-button-save,
-.cbi-page-actions .cbi-button-apply+.cbi-button-save,
-.cbi-button-add,
-.cbi-button-save,
-.cbi-button-positive,
-.cbi-button-link,
-.cbi-button[value="Enable"],
-.cbi-button[value="Scan"],
-.cbi-button[value^="Back"],
-.cbi-button-neutral[onclick="handleConfig(event)"] {
-    font-weight: normal;
-    color: #fff;
-    border: thin solid #5e72e4;
-    border: thin solid var(--primary);
-    background-color: #5e72e4;
-    background-color: var(--primary);
-    ;
-}
-
-/* light blue */
-.cbi-page-actions .cbi-button-apply,
-.cbi-section-actions .cbi-button-edit,
-.cbi-button-edit,
-.cbi-button-apply,
-.cbi-button-reload,
-.cbi-button-action,
-.cbi-button[value="Submit"],
-.cbi-button[value="Upload"],
-.cbi-button[value$="Apply"],
-.cbi-button[onclick="addKey(event)"] {
-    font-weight: normal;
-    color: #fff;
-    border: thin solid #5e72e4;
-    border: thin solid var(--primary);
-
-    background-color: #5e72e4;
-    background-color: var(--primary);
-}
-
-/* red */
-.btn.danger,
-.cbi-section-remove>.cbi-button,
-.cbi-button-remove,
-.cbi-button-reset,
-.cbi-button-negative,
-.cbi-button[value="Stop"],
-.cbi-button[value="Kill"],
-.cbi-button[onclick="reboot(this)"],
-.cbi-button-neutral[value="Restart"] {
-    font-weight: normal;
-    color: #fff;
-    border: thin solid #f5365c;
-    border: thin solid var(--red);
-    background-color: #f5365c;
-    background-color: var(--red);
-}
-
-/* yellow */
-.btn[value="Dismiss"],
-.cbi-button[value="Terminate"],
-.cbi-button[value="Reset"],
-.cbi-button[value="Disabled"],
-.cbi-button[onclick^="iface_reconnect"],
-.cbi-button[onclick="handleReset(event)"],
-.cbi-button-neutral[value="Disable"] {
-    font-weight: normal;
-    color: #fff;
-    border: thin solid #eea236;
-    background-color: #f0ad4e;
-}
-
-/* green */
-.cbi-button-success,
-.cbi-button-download,
-.cbi-button[name="backup"],
-.cbi-button[value="Download"],
-.cbi-button[value="Save mtdblock"] {
-    font-weight: normal;
-    color: #fff;
-    border: thin solid #4cae4c;
-    background-color: #5cb85c;
-}
-
-.cbi-page-actions .cbi-button-link:first-child {
-    float: left;
-}
-
-.a-to-btn {
-    text-decoration: none;
-}
-
-.cbi-value-field .cbi-button-add {
-    font-weight: bold;
-    margin: 9px 0 4px 3px;
-    padding: 1px 6px;
-}
-
-.tabs {
-    margin: 0 0rem;
-    padding-left: .5rem;
-    border-radius: 0.375rem;
-    background-color: #fff;
-}
-
-.tabs>li,
-.cbi-tabmenu>li {
-    display: inline-block;
-    padding: .55rem 0;
-    margin: 0.5rem 0.1rem 0 0.1rem;
-    border-top-left-radius: 0.375rem;
-    border-top-right-radius: 0.375rem;
-    background-color: #d4d4d4;
-    cursor: pointer;
-}
-
-.tabs>li {
-    padding-bottom: .4rem;
-    border-bottom: .2rem solid transparent;
-    background-color: #fff;
-}
-
-.tabs>li[class~="active"],
-.tabs>li:hover {
-    border-bottom-color: #5e72e4;
-    border-bottom-color: var(--primary);
-}
-
-.tabs>li:hover {
-    cursor: pointer;
-    border-bottom-color: #c9c9c9;
-}
-
-.tabs>li>a,
-.cbi-tabmenu>li>a {
-    padding: .6rem .9rem;
-    text-decoration: none;
-    color: #404040;
-}
-
-.tabs>li[class~="active"]>a {
-    color: #5e72e4;
-    color: var(--primary);
-}
-
-.cbi-tabmenu {
-    border: 0 solid #d4d4d4;
-    border-bottom: 0;
-}
-
-.cbi-tabmenu>li:hover {
-    background-color: #f1f1f1;
-}
-
-.cbi-tabmenu>li[class~="cbi-tab"] {
-    background-color: #fb6340;
-    background-color: var(--orange);
-
-    a {
-        color: #fff;
-    }
-}
-
-.cbi-tabmenu {
-    padding-left: 1rem;
-    background-color: none;
-}
-
-.cbi-section .cbi-section-remove:nth-of-type(2n),
-.container>.cbi-section .cbi-section-node:nth-of-type(2n) {
-    background-color: #f9f9f9;
-}
-
-[data-tab-title] {
-    overflow: hidden;
-    height: 0;
-    opacity: 0;
-    margin: 0;
-    padding: 0rem 0rem !important;
-
-    p {
-        margin-left: 1rem;
-        margin-bottom: 1rem;
-    }
-}
-
-[data-tab-active="true"] {
-    overflow: visible;
-    height: auto;
-    opacity: 1;
-    transition: opacity .25s ease-in;
-    margin: inherit !important;
-}
-
-.cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),
-.cbi-section[id] .cbi-section-node:nth-of-type(4n+4) {
-    background-color: #f9f9f9;
-}
-
-.cbi-section-node-tabbed {
-    margin-top: 0;
-    padding: 0;
-    border: thin solid #d4d4d4;
-    border-radius: 0.375rem;
-}
-
-.cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
-    background-color: #f9f9f9;
-}
-
-.cbi-value-field,
-.cbi-value-description {
-    line-height: 1.25;
-    display: table-cell;
-
-    abbr {
-        color: #32325d;
-        color: var(--gray-dark);
-    }
-}
-
-.cbi-value-description {
-    font-size: small;
-    padding-top: .4rem;
-    opacity: .5;
-}
-
-.cbi-value-title {
-    display: table-cell;
-    float: left;
-    width: 23rem;
-    padding-top: .25rem;
-    padding-right: 2rem;
-    text-align: right;
-    word-wrap: break-word;
-}
-
-.cbi-value {
-    display: inline-block;
-    width: 100%;
-    padding: .35rem 1rem .2rem 1rem;
-    line-height: 2.4rem;
-}
-
-.cbi-value ul {
-    line-height: 1.25;
-}
-
-.cbi-value-field .cbi-dropdown,
-.cbi-value-field .cbi-input-select,
-.cbi-value input[type="text"],
-.cbi-value input[type="password"] {
-    min-width: 18rem;
-}
-
-#cbi-firewall-zone .cbi-input-select,
-#cbi-network-switch_vlan .cbi-input-select {
-    min-width: 11rem;
-}
-
-#cbi-network-switch_vlan .cbi-input-text {
-    max-width: 3rem;
-}
-
-.cbi-input-invalid {
-    color: #f5365c;
-    border-bottom-color: #f5365c;
-}
-
-.cbi-section-error {
-    font-weight: bold;
-    line-height: 1.42857143;
-    margin: 18px;
-    padding: 6px;
-    border: thin solid #f5365c;
-    border-radius: 3px;
-    background-color: #fce6e6;
-}
-
-.cbi-section-error ul {
-    margin: 0 0 0 20px;
-}
-
-.cbi-section-error ul li {
-    font-weight: bold;
-    color: #f5365c;
-}
-
-.td[data-title]::before {
-    font-weight: bold;
-    display: none;
-    padding: .25rem 0;
-    content: attr(data-title) ":\20";
-    text-align: left;
-    white-space: nowrap;
-}
-
-.tr.placeholder .td[data-title]::before {
-    display: none;
-}
-
-.tr[data-title]::before,
-.tr.cbi-section-table-titles.named::before {
-    font-weight: bold;
-    display: table-cell;
-    align-self: center;
-    flex: 1 1 5%;
-    padding: .25rem;
-    content: attr(data-title) "\20";
-    text-align: center;
-    vertical-align: middle;
-    white-space: normal;
-    word-wrap: break-word;
-}
-
-.cbi-rowstyle-1 {
-    background-color: #f9f9f9;
-}
-
-.cbi-rowstyle-2 {
-    background-color: #eee;
-}
-
-.cbi-rowstyle-2 .cbi-button-up,
-.cbi-rowstyle-2 .cbi-button-down,
-body:not(.Interfaces) .cbi-rowstyle-2:first-child {
-    background-color: #fff !important;
-}
-
-.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
-    width: auto !important;
-}
-
-.td.cbi-section-actions {
-    text-align: right !important;
-    vertical-align: middle;
-}
-
-.td.cbi-section-actions>* {
-    display: inline-flex;
-}
-
-.td.cbi-section-actions>*>*,
-.td.cbi-section-actions>*>form>* {
-    margin: 0 5px;
-    display: flex;
-    align-items: center;
-}
-
-.td.cbi-section-actions>*>form {
-    display: inline-flex;
-    margin: 0;
-}
-
-/* lists */
-.cbi-dynlist {
-    line-height: 1.3;
-    flex-direction: column;
-    min-height: 30px;
-    cursor: text;
-}
-
-.cbi-dynlist>.item {
-    position: relative;
-    max-width: 25rem;
-    margin-right: 2em;
-    margin-bottom: 0.3rem;
-    padding: 1em .25em .25em 0;
-    pointer-events: none;
-    color: #8898aa;
-    border-bottom: 2px solid #5e72e4;
-    border-bottom: 2px solid var(--primary);
-    outline: 0;
-}
-
-.cbi-dynlist[name="sshkeys"]>.item {
-    max-width: none;
-}
-
-.cbi-dynlist>.item::after {
-    font-weight: bold;
-    position: absolute;
-    right: -2em;
-    bottom: 0;
-    display: inline-flex;
-    min-height: 17px;
-    padding: 0 6px;
-    content: "\00D7";
-    pointer-events: auto;
-    color: #fff;
-    border: thin solid #f5365c;
-    border: thin solid var(--red);
-    background-color: #f5365c;
-    background-color: var(--red);
-    ;
-}
-
-.cbi-dynlist>.item>span {
-    white-space: normal;
-    word-break: break-word;
-}
-
-.cbi-dynlist>.add-item {
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    min-width: 16rem;
-}
-
-.cbi-dynlist>.add-item:not([ondrop])>input {
-    overflow: hidden;
-    width: 100%;
-    min-width: 15rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.cbi-dynlist>.add-item[ondrop]>input {
-    min-width: 13rem;
-}
-
-.cbi-dynlist,
-.cbi-dropdown {
-    position: relative;
-    display: inline-flex;
-    padding: 0.2rem;
-}
-
-.cbi-dropdown[placeholder*="select"] {
-    max-width: 25rem;
-    height: auto;
-    margin-top: -3px;
-}
-
-.cbi-dropdown>ul {
-    display: flex;
-    overflow-x: hidden;
-    overflow-y: auto;
-    width: 100%;
-    margin: 0 !important;
-    padding: 0;
-    list-style: none;
-    outline: 0;
-}
-
-.cbi-dropdown>ul.preview {
-    display: none;
-
-}
-.cbi-button-apply>ul.preview {
-    display: none;
-
-    li {
-        color: #fff;
-    }
-
-}
-
-.cbi-button-apply>ul:first-child {
-    li {
-        color: #fff;
-    }
-
-}
-
-.cbi-dropdown>.open {
-    flex-basis: 15px;
-}
-
-.cbi-dropdown>.open,
-.cbi-dropdown>.more {
-    font-size: 1rem;
-    font-weight: 900;
-    line-height: 2;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 0;
-    flex-shrink: 0;
-    justify-content: center;
-    padding: 0 .25em;
-    cursor: default;
-    text-align: center;
-    outline: 0;
-}
-
-.cbi-dropdown>.more,
-.cbi-dropdown>ul>li[placeholder] {
-    font-weight: bold;
-    display: none;
-    color: #777;
-    text-shadow: 1px 1px 0 #fff;
-}
-
-.cbi-dropdown>ul>li {
-    display: none;
-    overflow: hidden;
-    align-items: center;
-    align-self: center;
-    flex-grow: 1;
-    flex-shrink: 1;
-    min-height: 20px;
-    padding: .25em;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-}
-
-.cbi-dropdown>ul>li .hide-open {
-    display: initial;
-}
-
-.cbi-dropdown>ul>li .hide-close {
-    display: none;
-}
-
-.cbi-dropdown>ul>li[display]:not([display="0"]) {
-    border-left: thin solid #ccc;
-}
-
-.cbi-dropdown[empty]>ul {
-    max-width: 1px;
-}
-
-.cbi-dropdown>ul>li>form {
-    display: none;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-}
-
-.cbi-dropdown>ul>li img {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.cbi-dropdown>ul>li>form>input[type="checkbox"] {
-    height: auto;
-    margin: 0;
-}
-
-.cbi-dropdown>ul>li input[type="text"] {
-    height: 20px;
-}
-
-.cbi-dropdown[open]>ul.dropdown {
-    position: absolute;
-    z-index: 1100;
-    display: block;
-    width: auto;
-    min-width: 100%;
-    max-width: none;
-    max-height: 200px !important;
-    border: thin solid #918e8c;
-    background: #f6f6f6;
-
-    box-shadow: 0 0 4px #918e8c;
-    color: var(--main-menu-color);
-
-    li {
-        color: #000;
-    }
-}
-
-.cbi-dropdown>ul>li[display],
-.cbi-dropdown[open]>ul.preview,
-.cbi-dropdown[open]>ul.dropdown>li,
-.cbi-dropdown[multiple]>ul>li>label,
-.cbi-dropdown[multiple][open]>ul.dropdown>li,
-.cbi-dropdown[multiple][more]>.more,
-.cbi-dropdown[multiple][empty]>.more {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-
-}
-
-.cbi-dropdown[empty]>ul>li,
-.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
-.cbi-dropdown[multiple][open]>ul.dropdown>li>form {
-    display: block;
-}
-
-.cbi-dropdown[open]>ul.dropdown>li .hide-open {
-    display: none;
-}
-
-.cbi-dropdown[open]>ul.dropdown>li .hide-close {
-    display: initial;
-}
-
-.cbi-dropdown[open]>ul.dropdown>li {
-    border-bottom: thin solid #ccc;
-    padding: 0.5rem 0.8rem;
-}
-
-.cbi-dropdown[open]>ul.dropdown>li[selected] {
-    background: #b0d0f0;
-}
-
-.cbi-dropdown[open]>ul.dropdown>li.focus {
-    background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
-}
-
-.cbi-dropdown[open]>ul.dropdown>li:last-child {
-    margin-bottom: 0;
-    border-bottom: 0;
-}
-
-.cbi-dropdown[open]>ul.dropdown>li[unselectable] {
-    opacity: .7;
-}
-
-.cbi-dropdown[open]>ul.dropdown>li>input.create-item-input:first-child:last-child {
-    width: 100%;
-}
-
-.cbi-dropdown[disabled] {
-    pointer-events: none;
-    opacity: .6;
-}
-
-.cbi-dropdown .zonebadge {
-    width: 100%;
-}
-
-.cbi-dropdown[open] .zonebadge {
-    width: auto;
-}
-
-/* progressbar */
-.cbi-progressbar {
-    position: relative;
-    min-width: 170px;
-    height: 20px;
-    margin: 6px 0;
-    border: thin solid #999;
-    background: #eee;
-    border-radius: 0.2rem;
-    overflow: hidden;
-}
-
-.cbi-progressbar>div {
-    width: 0;
-    height: 100%;
-    transition: width .25s ease-in;
-    background: #5bc0de;
-    background: var(--bar-bg);
-}
-
-.cbi-progressbar::after {
-    font-family: monospace;
-    font-size: 1em;
-    font-weight: bold;
-    font-size-adjust: .38;
-    line-height: normal;
-    position: absolute;
-    top: 2px;
-    right: 0;
-    bottom: 2px;
-    left: 0;
-    overflow: hidden;
-    content: attr(title);
-    text-align: center;
-    white-space: pre;
-    text-overflow: ellipsis;
-}
-
-#modal_overlay {
-    position: fixed;
-    z-index: 900;
-    top: 0;
-    right: 10000px;
-    bottom: 0;
-    left: -10000px;
-    overflow-y: scroll;
-    transition: opacity .125s ease-in;
-    opacity: 0;
-    background: rgba(0, 0, 0, .7);
-    -webkit-overflow-scrolling: touch;
-}
-
-.modal {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 90%;
-    min-width: 270px;
-    max-width: 600px;
-    min-height: 32px;
-    margin: 5em auto;
-    padding: 1em;
-    border-radius: 3px !important;
-    background: #fff;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
-}
-
-.modal>* {
-    line-height: normal;
-    flex-basis: 100%;
-    margin-bottom: .5em;
-    max-width: 100%;
-}
-
-.modal>pre,
-.modal>textarea {
-    font-size: 1rem;
-    font-size-adjust: .35;
-    overflow: auto;
-    margin-bottom: .5em;
-    padding: 8.5px;
-    cursor: auto;
-    white-space: pre-wrap;
-    color: #eee;
-    outline: 0;
-    background-color: #101010;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
-}
-
-.modal>h4 {
-    margin: .5em 0;
-}
-
-.modal ul {
-    margin-left: 2.2em;
-}
-
-.modal li {
-    list-style-type: square;
-    color: #808080;
-}
-
-.modal p {
-    padding-left: .25rem;
-    word-break: break-word;
-}
-
-.modal .label {
-    font-size: .6rem;
-    font-weight: normal;
-    padding: .1rem .3rem;
-    padding-bottom: 0;
-    cursor: default;
-    border-radius: 0;
-}
-
-.modal .label.warning {
-    background-color: #f0ad4e !important;
-}
-
-.modal .btn {
-    padding: .3rem .6rem;
-}
-
-.modal.cbi-modal {
-    max-width: 90%;
-    max-height: none;
-}
-
-body.modal-overlay-active {
-    overflow: hidden;
-    height: 100vh;
-}
-
-body.modal-overlay-active #modal_overlay {
-    right: 0;
-    left: 0;
-    opacity: 1;
-}
-
-.spinning {
-    position: relative;
-    padding-left: 32px !important;
-}
-
-.spinning::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: .2em;
-    width: 32px;
-    content: "";
-    background: url(../resources/icons/loading.gif) no-repeat center;
-    background-size: 16px;
-}
-
-/* luci */
-.hidden {
-    display: none;
-}
-
-.left,
-.left::before {
-    text-align: left !important;
-}
-
-.right,
-.right::before {
-    text-align: right !important;
-}
-
-.center,
-.center::before {
-    text-align: center !important;
-}
-
-.top {
-    align-self: flex-start !important;
-    vertical-align: top !important;
-}
-
-.bottom {
-    align-self: flex-end !important;
-    vertical-align: bottom !important;
-}
-
-.inline {
-    display: inline;
-}
-
-.cbi-page-actions {
-    padding-top: 1rem;
-    text-align: right;
-}
-
-.cbi-page-actions>form[method="post"] {
-    display: inline-block;
-}
-
-.th[data-type="button"],
-.td[data-type="button"],
-.th[data-type="fvalue"],
-.td[data-type="fvalue"] {
-    flex: 1 1 2em;
-    text-align: center;
-}
-
-.ifacebadge {
-    display: inline-flex;
-    padding: .5rem .8rem;
-    border-bottom: thin solid #ccc;
-    background: #eee;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-}
-
-td>.ifacebadge,
-.td>.ifacebadge {
-    font-size: .8rem;
-    background-color: #f0f0f0;
-}
-
-.ifacebadge>em,
-.ifacebadge>img {
-    display: inline-block;
-    align-self: flex-start;
-    margin: 0 .2rem;
-}
-
-.ifacebadge>img+img {
-    margin: 0 .2rem 0 0;
-}
-
-.network-status-table {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.network-status-table .ifacebox {
-    flex-grow: 1;
-    margin: .5em;
-}
-
-.network-status-table .ifacebox-body {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.network-status-table .ifacebox-body>span {
-    flex: 10 10 auto;
-    height: 100%;
-}
-
-.network-status-table .ifacebox-body>div {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.network-status-table .ifacebox-body .ifacebadge {
-    align-items: center;
-    flex: 1 1 auto;
-    min-width: 220px;
-    margin: .5em 0em 0 0em;
-    padding: .5em;
-    background-color: #fff;
-}
-
-/* textarea */
-.cbi-input-textarea {
-    font-family: monospace;
-    width: 100%;
-    min-height: 14rem;
-    padding: .8rem;
-    color: #000;
-}
-
-#syslog {
-    font-size: small;
-    line-height: 1.25;
-    overflow-y: hidden;
-    width: 100%;
-    min-height: 15rem;
-    padding: 1rem;
-    resize: none;
-    color: #eee;
-    border: 0;
-    border-radius: 0.375rem;
-    background-color: #242424;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
-}
-
-#syslog:focus {
-    outline: 0;
-}
-
-/* config changes */
-.uci-change-list {
-    font-family: monospace;
-}
-
-.uci-change-list ins,
-.uci-change-legend-label ins {
-    display: block;
-    padding: 2px;
-    text-decoration: none;
-    border: thin solid #0f0;
-    background-color: #cfc;
-}
-
-.uci-change-list del,
-.uci-change-legend-label del {
-    font-style: normal;
-    display: block;
-    padding: 2px;
-    text-decoration: none;
-    border: thin solid #f00;
-    background-color: #fcc;
-}
-
-.uci-change-list var,
-.uci-change-legend-label var {
-    font-style: normal;
-    display: block;
-    padding: 2px;
-    text-decoration: none;
-    border: thin solid #ccc;
-    background-color: #eee;
-}
-
-.uci-change-list var ins,
-.uci-change-list var del {
-    font-style: normal;
-    padding: 0;
-    white-space: pre;
-    border: 0;
-}
-
-.uci-change-legend {
-    padding: 5px;
-}
-
-.uci-change-legend-label {
-    float: left;
-    width: 150px;
-}
-
-.uci-change-legend-label>ins,
-.uci-change-legend-label>del,
-.uci-change-legend-label>var {
-    display: block;
-    float: left;
-    width: 10px;
-    height: 10px;
-    margin-right: 4px;
-}
-
-.uci-change-legend-label var ins,
-.uci-change-legend-label var del {
-    line-height: .4;
-    border: 0;
-}
-
-.uci-change-list var,
-.uci-change-list del,
-.uci-change-list ins {
-    padding: .5rem;
-}
-
-/* other fix */
-#iwsvg,
-#iwsvg2,
-#bwsvg {
-    border: thin solid #d4d4d4 !important;
-}
-
-#iwsvg,
-[data-page="admin-status-realtime-bandwidth"] #bwsvg {
-    border-top: 0 !important;
-}
-
-.ifacebox {
-    line-height: 1.25;
-    display: inline-flex;
-    flex-direction: column;
-    min-width: 100px;
-    border-bottom: thin solid #ccc;
-    background-color: #f9f9f9;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2);
-}
-
-.ifacebox-head {
-    padding: .25em;
-    background: #eee;
-}
-
-.ifacebox-head.active {
-    background: #5e72e4;
-    background: var(--bar-bg);
-
-    * {
-        color: #fff;
-        color: var(--white);
-    }
-
-}
-
-.ifacebox-body {
-    padding: .5em 1rem;
-    line-height: 1.6em;
-}
-
-.cbi-image-button {
-    margin-left: .5rem;
-}
-
-.zonebadge {
-    display: inline-block;
-    padding: .2rem .5rem;
-}
-
-.zonebadge .ifacebadge {
-    margin: .1rem .2rem;
-    padding: .2rem .3rem;
-    border: thin solid #6c6c6c;
-}
-
-.zonebadge>input[type="text"] {
-    min-width: 10rem;
-    margin-top: .3rem;
-    padding: .16rem 1rem;
-}
-
-.zonebadge>em,
-.zonebadge>strong {
-    display: inline-block;
-    margin: 0 .2rem;
-}
-
-.cbi-value-field .cbi-input-checkbox,
-.cbi-value-field .cbi-input-radio {
-    margin-top: .1rem;
-}
-
-.cbi-value-field>ul>li {
-    display: flex;
-}
-
-.cbi-value-field>ul>li>label {
-    margin-top: .5rem;
-}
-
-.cbi-value-field>ul>li .ifacebadge {
-    margin-top: -.5rem;
-    margin-left: .4rem;
-    background-color: #eee;
-}
-
-.cbi-section-table-row>.cbi-value-field .cbi-dropdown {
-    min-width: 7rem;
-}
-
-.cbi-section-create {
-    display: inline-flex;
-    align-items: center;
-    margin: 0.25rem 0 0.25rem 1rem;
-}
-
-.cbi-section-create>* {
-    margin: .5rem;
-}
-
-.cbi-section-remove {
-    padding: .5rem;
-}
-
-div.cbi-value var,
-td.cbi-value-field var,
-.td.cbi-value-field var {
-    font-style: italic;
-    color: #0069d6;
-}
-
-.cbi-optionals {
-    padding: 1rem 1rem 0 1rem;
-    border-top: thin solid #ccc;
-}
-
-.cbi-dropdown-container {
-    position: relative;
-}
-
-.cbi-tooltip-container,
-span[data-tooltip],
-span[data-tooltip] .label {
-    cursor: help !important;
-}
-
-.cbi-tooltip {
-    position: absolute;
-    z-index: 1000;
-    left: -1000px;
-    padding: 2px 5px;
-    transition: opacity .25s ease-out;
-    white-space: pre;
-    pointer-events: none;
-    opacity: 0;
-    border-radius: 3px;
-    background: #fff;
-    box-shadow: 0 0 2px #444;
-}
-
-.cbi-tooltip-container:hover .cbi-tooltip {
-    left: auto;
-    transition: opacity .25s ease-in;
-    opacity: 1;
-}
-
-.zonebadge .cbi-tooltip {
-    margin: -1.5rem 0 0 -.5rem;
-    padding: .25rem;
-    background: inherit;
-}
-
-.zonebadge-empty {
-    color: #404040;
-    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);
-}
-
-.zone-forwards {
-    display: flex;
-    min-width: 10rem;
-}
-
-.zone-forwards>* {
-    flex: 1 1 45%;
-}
-
-.zone-forwards>span {
-    flex-basis: 10%;
-    padding: 0 .25rem;
-    text-align: center;
-}
-
-.zone-forwards .zone-src,
-.zone-forwards .zone-dest {
-    display: flex;
-    flex-direction: column;
-}
-
-.label {
-    font-size: .8rem;
-    font-weight: bold;
-    padding: .3rem .8rem;
-    white-space: nowrap;
-    text-decoration: none;
-    text-transform: uppercase;
-    color: #fff !important;
-    border-radius: 3px;
-    background-color: #bfbfbf;
-    text-shadow: none;
-}
-
-label>input[type="checkbox"],
-label>input[type="radio"] {
-    position: relative;
-    top: .4rem;
-    right: .2rem;
-    margin: 0;
-    vertical-align: bottom;
-}
-
-label[data-index][data-depends] {
-    padding-right: 2em;
-}
-
-.showSide {
-    display: none;
-}
-
-.darkMask {
-    position: fixed;
-    z-index: 99;
-    display: none;
-    width: 100%;
-    height: 100%;
-    content: "";
-    top: 0;
-    background-color: rgba(0, 0, 0, .56);
-}
-
-/* diagnostics */
-#diag-rc-output>pre,
-#command-rc-output>pre,
-[data-page="admin-services-wol"] .notice code {
-    font-size: 1.2rem;
-    font-size-adjust: .35;
-    line-height: normal;
-    display: block;
-    overflow-y: hidden;
-    width: 100%;
-    padding: 8.5px;
-    white-space: pre;
-    color: #eee;
-    background-color: #101010;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
-}
-
-[data-page="admin-network-diagnostics"] .table {
-    box-shadow: none;
-}
-
-input[name="ping"],
-input[name="traceroute"],
-input[name="nslookup"] {
-    width: 80%;
-}
-
-/* fix Main Login */
-.node-main-login {
-    .main {
-        top: 0;
-        height: 100% !important;
-
-        .main-left {
-            display: none;
-        }
-
-        .main-right {
-            width: 100%;
-
-            header {
-                background: none !important;
-                box-shadow: none !important;
-                display: none !important;
-            }
-
-            .login-bg {
-                display: block;
-                position: fixed;
-                width: 100%;
-                height: 100%;
-                left: 0px;
-                top: 0px;
-                background-size: cover;
-                background-color: #000;
-                background-position: top center;
-                transition: all 0.5s;
-
-                &.blur {
-                    transform: scale(1.05);
-                    -webkit-filter: blur(5px);
-                    /* Chrome, Safari, Opera */
-                    filter: blur(5px);
-                }
-            }
-
-            #maincontent {
-                height: 100%;
-                padding-top: 23vh;
-                margin-top: 0rem;
-                background-color: transparent !important;
-                text-align: center;
-
-                .container {
-                    display: inline-block;
-                    padding: 1rem;
-                    position: relative;
-                    margin-top: 2rem !important;
-                    background-color: var(--secondary) !important;
-                    border-radius: .375rem;
-                    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
-                    text-align: left;
-                    
-
-                    .alert-message {
-                        &.warning {
-                            position: absolute;
-                            color: #fff;
-                            width: calc(100% - 2rem);
-                            box-sizing: border-box;
-                            margin-top: 8rem;
-                            border-radius: 5px !important;
-                            padding: 0.5rem 2rem;
-                            text-align: center;
-                            background-color: var(--purple) !important;
-                            p{
-                                color: #fff;
-                            }
-                        }
-
-                        &.error {
-                            position: absolute;
-                            color: #fff;
-                            width: calc(100% - 2rem);
-                            background-color: #f0ad4e;
-                            border-color: #eea236;
-                            box-sizing: border-box;
-                            margin-top: -7rem;
-                            border-radius: 5px !important;
-                            padding: 1rem 2rem 0.5rem 2rem;
-                            text-align: center;
-                            p{
-                                color: #fff;
-                            }
-                            h4{
-                                font-size: 1rem;
-                            }
-                            .btn{
-                                height: auto;
-                            }
-                        }
-                    }
-
-                    .cbi-map {
-                        h2 {
-                            width: 120px;
-                            height: 120px;
-                            color: #fff;
-                            text-align: center;
-                            letter-spacing: 4px;
-                            display: block;
-                            margin: -80px auto 15px auto;
-                            padding: 0;
-                            text-indent: -500px;
-                            overflow: hidden;
-                            border-radius: 60px;
-                            border: #fff 3px solid;
-                            background-image: url(head-icon.jpg);
-                            background-size: cover;
-                            box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
-                        }
-
-                        .cbi-map-descr {
-                            text-align: center;
-                            padding: 1rem;
-                            color: #8898aa;
-                        }
-
-                        .cbi-section {
-                            padding: 0.5rem;
-                            margin: 0 ;
-                            background: none !important;
-                            box-shadow: none !important;
-
-                            .cbi-section-node {
-                                padding: 0;
-
-                                .cbi-value {
-                                    display: block;
-                                    padding: 0;
-
-                                    * {
-                                        display: inline-block !important;
-                                    }
-
-                                    .cbi-value-title {
-                                        display: none !important;
-                                    }
-
-                                    .cbi-value-field {
-                                        position: relative;
-                                        width: 20rem;
-                                        margin-bottom: 1em;
-
-                                        input {
-                                            font-size: 1rem;
-                                            line-height: 1.5;
-                                            display: block;
-                                            width: 100%;
-                                            height: calc(2.75rem + 2px);
-                                            padding: .625rem .75rem;
-                                            transition: all .15s cubic-bezier(.68, -.55, .265, 1.55);
-                                            color: #8898aa;
-                                            border: 0px solid #dee2e6;
-                                            border-radius: .25rem;
-                                            background-color: #fff;
-                                            background-clip: padding-box;
-                                            box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);
-                                            box-sizing: border-box;
-                                            padding-left: 3em !important;
-                                            margin: 0;
-
-                                            &:focus {
-                                                color: #8898aa;
-
-                                                outline: 0;
-                                                background-color: #fff;
-                                                box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, .1)
-                                            }
-                                        }
-
-                                        &:before {
-                                            font-family: 'argon' !important;
-                                            font-style: normal;
-                                            font-weight: normal;
-                                            font-variant: normal;
-                                            text-transform: none;
-                                            line-height: 1;
-                                            -webkit-font-smoothing: antialiased;
-                                            -moz-osx-font-smoothing: grayscale;
-                                            content: "\e971";
-                                            color: #adb5bd;
-                                            font-size: 1.5rem;
-                                            position: absolute;
-                                            z-index: 100;
-                                            left: 10px;
-                                            top: 10px;
-                                        }
-                                    }
-
-                                    &.cbi-value-last .cbi-value-field:before {
-                                        content: "\e910";
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    .cbi-page-actions {
-                        text-align: center;
-                        padding-top: 0.5rem;
-
-                        .cbi-button {
-                            font-size: 1rem;
-                            height: auto;
-                            position: relative;
-                            transition: all .15s ease;
-                            letter-spacing: .2em;
-                            text-transform: none;
-                            padding: .375rem 1.25rem;
-                            will-change: transform;
-                            line-height: 1.5em;
-                            border: thin solid var(--purple);
-                            background-color: var(--purple);
-
-                            &.cbi-button-reset {
-                                display: none !important;
-                            }
-                        }
-                    }
-
-                }
-
-                footer {
-                    bottom: 0;
-                    position: absolute;
-                    width: 100%;
-                    color: #fff;
-
-                    a {
-                        color: #fff;
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-
-@media screen and (min-height: 585px) {
-    .node-main-login footer {
-        display: none;
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-    }
-}
-
-/* fix status */
-.node-status-overview>.main fieldset:nth-child(4) .td:nth-child(2),
-.node-status-processes>.main .table .tr .td:nth-child(3) {
-    white-space: normal;
-}
-
-/* fix system reboot */
-[data-page="admin-system-reboot"] p {
-    padding-left: 0rem;
-    color: #fff;
-}
-
-[data-page="admin-system-reboot"] .cbi-button {
-    background: #fb6340 !important;
-}
-
-[data-page="admin-system-reboot"] p>span {
-    position: relative;
-    top: .1rem;
-    left: 1rem;
-}
-
-/* samba */
-#cbi-samba [data-tab="template"] .cbi-value-field {
-    display: block;
-}
-
-#cbi-samba [data-tab="template"] .cbi-value-title {
-    width: auto;
-    padding-bottom: .6rem;
-}
-
-/* admin-system-admin-password */
-[data-page="admin-system-admin"] .cbi-map h2,
-[data-page="admin-system-admin-password"] .cbi-map h2,
-[data-page="admin-system-admin"] .cbi-map .cbi-map-descr,
-[data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr {
-    margin-left: 1.5rem;
-    color: #32325d;
-    color: var(--gray-dark);
-}
-
-
-/* software */
-[data-page="admin-system-opkg"] h2 {
-    margin-left: 1.5rem;
-    color: #32325d;
-    color: var(--gray-dark);
-}
-
-.controls {
-    margin: .5em 1rem 1em 1rem !important;
-}
-
-.controls>*>.btn:not([aria-label$="page"]) {
-    flex-grow: initial !important;
-    margin-top: .25rem;
-}
-
-.controls>#pager>.btn[aria-label$="page"] {
-    font-size: 1.4rem;
-    font-weight: bold;
-}
-
-.controls>*>label {
-    margin-bottom: .2rem;
-}
-
-[data-page="admin-system-opkg"] div.btn {
-    line-height: 3;
-    display: inline;
-    padding: .3rem .6rem;
-}
-
-[data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
-[data-page="admin-system-opkg"] #maincontent>.container {
-    margin-top: 2rem;
-    padding-top: .1rem;
-}
-
-[data-page="admin-system-opkg"] #maincontent>.container {
-    margin: 2rem;
-    margin-bottom: 1rem;
-}
-
-.td.version,
-.td.size {
-    white-space: normal !important;
-    word-break: break-word;
-}
-
-.cbi-tabmenu+.cbi-section {
-    margin-top: 0;
-}
-
-/* admin-system-crontab*/
-[data-page="admin-system-crontab"] #view p {
-    color: #fff;
-    margin-bottom: 1rem;
-}
-
-/*admin-system-flash*/
-[data-page="admin-system-flash"] .cbi-value {
-    padding: 0;
-}
-
-[data-page="admin-system-flash"] .cbi-section .cbi-section {
-    margin-top: 0;
-}
-
-[data-page="admin-system-flash"] .cbi-map-tabbed {
-    border-radius: 0.375rem;
-}
-
-[data-page="admin-system-flash"] legend {
-    display: block !important;
-    font-size: 1.2rem;
-    width: 100%;
-    display: block;
-    margin-bottom: 0;
-    padding: 1rem 0 1rem 1.5rem;
-    border-bottom: 1px solid rgba(0, 0, 0, .05);
-    line-height: 1.5;
-    margin-bottom: 0rem;
-    letter-spacing: 0.1rem;
-    color: #32325d;
-    font-weight: bold;
-}
-
-[data-page="admin-system-flash"] .cbi-section-descr {
-    font-weight: 600;
-    padding: 1rem 0 1rem 1.5rem;
-    color: #525f7f;
-}
-
-/* wireless overview */
-#cbi-wireless>#wifi_assoclist_table>.tr {
-    box-shadow: inset 1px -1px 0 #ddd, inset -1px -1px 0 #ddd;
-}
-
-#cbi-wireless>#wifi_assoclist_table>.tr.placeholder>.td {
-    right: 33px;
-    bottom: 33px;
-    left: 33px;
-    border-top: thin solid #ddd !important;
-}
-
-#cbi-wireless>#wifi_assoclist_table>.tr.table-titles {
-    box-shadow: inset 1px 0 0 #ddd, inset -1px 0 0 #ddd;
-}
-
-#cbi-wireless>#wifi_assoclist_table>.tr.table-titles>.th {
-    border-bottom: thin solid #ddd;
-    box-shadow: 0 -1px 0 0 #ddd;
-}
-
-#wifi_assoclist_table>.tr>.td[data-title="RX Rate / TX Rate"] {
-    width: 23rem;
-}
-
-[data-page="admin-network-dhcp"] .cbi-value {
-    padding: 0;
-
-}
-
-[data-page="admin-network-dhcp"] [data-tab-active="true"] {
-    padding: 1rem 0 !important;
-}
-
-/* firewall */
-#iptables {
-    margin: 0;
-}
-
-.Firewall form {
-    margin: 2rem 2rem 0 0;
-    padding: 0;
-    box-shadow: none;
-}
-
-#cbi-firewall-redirect table *,
-#cbi-network-switch_vlan table *,
-#cbi-firewall-zone table * {
-    font-size: small;
-}
-
-#cbi-firewall-redirect table input[type="text"],
-#cbi-network-switch_vlan table input[type="text"],
-#cbi-firewall-zone table input[type="text"] {
-    width: 5rem;
-}
-
-#cbi-firewall-redirect table select,
-#cbi-network-switch_vlan table select,
-#cbi-firewall-zone table select {
-    min-width: 3.5rem;
-}
-
-#cbi-network-switch_vlan .th,
-#cbi-network-switch_vlan .td {
-    flex-basis: 12%;
-}
-
-#cbi-firewall-zone .table,
-#cbi-network-switch_vlan .table {
-    display: block;
-}
-
-#cbi-firewall-zone .td,
-#cbi-network-switch_vlan .td {
-    width: 100%;
-}
-
-[data-page="admin-network-firewall-custom"] #view p {
-    color: #fff;
-    margin-bottom: 1rem;
-
-    textarea {
-        padding: 1rem;
-        border-radius: 0.375rem;
-    }
-}
-
-/* applyreboot fix */
-#applyreboot-container {
-    margin: 2rem;
-}
-
-#applyreboot-section {
-    line-height: 300%;
-    margin: 2rem;
-}
-
-/* openvpn bug fix */
-.OpenVPN a {
-    line-height: initial !important;
-}
-
-/* custom commands */
-.commandbox {
-    width: 24% !important;
-    margin: 10px 0 0 10px !important;
-    padding: .5rem 1rem;
-    border-bottom: thin solid #ccc;
-    background: #eee;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
-}
-
-.commandbox h3 {
-    line-height: normal !important;
-    overflow: hidden;
-    margin: 6px 0 !important;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.commandbox div {
-    left: auto !important;
-}
-
-.commandbox code {
-    position: absolute;
-    overflow: hidden;
-    max-width: 60%;
-    margin-left: 4px;
-    padding: 2px 3px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.commandbox code:hover {
-    overflow-y: auto;
-    max-height: 50px;
-    white-space: normal;
-}
-
-.commandbox p:first-of-type {
-    margin-top: -6px;
-}
-
-.commandbox p:nth-of-type(2) {
-    margin-top: 2px;
-}
-
-[data-page^="admin-system-commands"] .panel-title,
-[data-page^="command-cfg"] .mobile-hide,
-[data-page^="command-cfg"] .showSide {
-    display: none;
-}
-
-#command-rc-output .alert-message {
-    line-height: 1.42857143;
-    position: absolute;
-    top: 40px;
-    right: 32px;
-    max-width: 40%;
-    margin: 0;
-    animation: anim-fade-in 1.5s forwards;
-    word-break: break-word;
-    opacity: 0;
-}
-
-@keyframes anim-fade-in {
-    100% {
-        opacity: 1;
-    }
-}
-
-/* other fix */
-input[type="checkbox"] {
-    appearance: none !important;
-    -webkit-appearance: none !important;
-    border: 1px solid #dee2e6;
-
-    width: 16px !important;
-    height: 16px !important;
-    padding: 0;
-    cursor: pointer;
-    transition: all 0.2s;
-    margin: 1rem 0 0 0;
-}
-
-input[type="checkbox"]:checked {
-    border: 1px solid #5e72e4;
-    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important;
-    background-color: #5e72e4;
-    background-size: 70%;
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-/* IE hacks */
-@media all and (-ms-high-contrast: none) {
-    .main>.main-left>.nav>.slide>.menu::before {
-        top: 30.25%;
-    }
-
-    .main>.main-left>.nav>li:last-child::before {
-        top: 20%;
-    }
-
-    .showSide::before {
-        top: -12px;
-    }
-}
-
-@media screen and (max-width: 1600px) {
-    header>.fill>.container>#logo {
-        margin: 0 2.5rem 0 .5rem;
-    }
-
-    .main-left {
-        width: calc(0% + 13rem);
-    }
-
-    .main-right {
-        width: calc(100% - 13rem);
-    }
-
-    .btn:not(button),
-    .cbi-button {
-        font-size: .8rem;
-        padding: .2rem .6rem;
-    }
-
-    .label {
-        padding: .2rem .6rem;
-    }
-
-
-    .cbi-value-title {
-        width: 15rem;
-        padding-right: .6rem;
-    }
-
-    .cbi-value-field .cbi-dropdown,
-    .cbi-value-field .cbi-input-select,
-    .cbi-value input[type="text"],
-    .cbi-value input[type="password"] {
-        min-width: 18rem;
-    }
-
-    #cbi-firewall-zone .cbi-input-select {
-        min-width: 9rem;
-    }
-
-    .cbi-input-textarea {
-        font-size: small;
-    }
-
-    .node-admin-status>.main fieldset li>a {
-        padding: .3rem .6rem;
-    }
-}
-
-@media screen and (max-width: 1366px) {
-
-
-    header>.fill>.container {
-
-        cursor: default;
-    }
-
-
-
-    .main-left {
-        width: calc(0% + 13rem);
-    }
-
-    .main-right {
-        width: calc(100% - 13rem);
-    }
-
-
-    .tabs>li>a,
-    .cbi-tabmenu>li>a {
-        padding: .2rem .5rem;
-    }
-
-    .panel-title {
-        font-size: 1.1rem;
-        padding-bottom: 1rem;
-    }
-
-    table {
-        font-size: .7rem !important;
-        width: 100% !important;
-    }
-
-    .table .cbi-input-text {
-        width: 100%;
-    }
-
-    .cbi-value-field .cbi-dropdown,
-    .cbi-value-field .cbi-input-select,
-    .cbi-value input[type="text"],
-    .cbi-value input[type="password"] {
-        min-width: 16rem;
-    }
-
-    #cbi-firewall-zone .cbi-input-select {
-        min-width: 4rem;
-    }
-
-    .main>.main-left>.nav>li,
-    .main>.main-left>.nav>li a,
-    .main>.main-left>.nav>.slide>.menu,
-    .main>.main-left>.nav>li>[data-title="Logout"] {
-        font-size: .9rem;
-    }
-
-    .main>.main-left>.nav>.slide>.slide-menu>li>a {
-        font-size: .7rem;
-    }
-
-    #modal_overlay {
-        top: 0rem;
-    }
-
-    [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) {
-        display: block;
-    }
-
-    [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),
-    [data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),
-    [data-page="admin-network-hosts"] .table,
-    [data-page="admin-network-routes"] .table {
-        overflow-y: visible;
-    }
-
-    .commandbox {
-        width: 32% !important;
-    }
-
-    .btn:not(button), .cbi-button {
-        font-size: 0.8rem;
-        padding: 0.2rem 0.6rem;
-    }
-}
-
-@media screen and (max-width: 1152px) {
-    header>.fill>.container>#logo {
-        display: none;
-    }
-
-    header>.fill>.container>.brand {
-        position: relative;
-    }
-
-    html,
-    .main {
-        overflow-y: visible;
-    }
-
-    .main>.loading>span {
-        top: 25%;
-    }
-
-    .main-left {
-        width: calc(0% + 13rem);
-    }
-
-    .main-right {
-        width: calc(100% - 13rem);
-    }
-
-    
-
-    body:not(.logged-in) .showSide {
-        visibility: hidden;
-        width: 0;
-        margin: 0;
-    }
-
-    .node-main-login>.main .cbi-value-title {
-        text-align: left;
-    }
-
-    .cbi-value-title {
-        width: 12rem;
-        padding-right: 1rem;
-    }
-
-    .cbi-value-field .cbi-dropdown,
-    .cbi-value-field .cbi-input-select,
-    .cbi-value input[type="text"] {
-        width: 16rem;
-        min-width: 16rem;
-    }
-
-    /*.cbi-value input[type="password"],*/
-    .cbi-value input[name^="pw"],
-    .cbi-value input[data-update="change"]:nth-child(2) {
-        width: 13rem !important;
-        min-width: 13rem;
-    }
-
-    #diag-rc-output>pre,
-    #command-rc-output>pre,
-    [data-page="admin-services-wol"] .notice code {
-        font-size: 1rem;
-    }
-
-    .table {
-        display: block;
-    }
-
-    .Interfaces .table {
-        overflow-x: hidden;
-    }
-
-    #packages.table {
-        display: grid;
-    }
-
-    .tr {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-
-    .Overview .table[width="100%"]>.tr {
-        flex-wrap: nowrap;
-    }
-
-    .tr.placeholder {
-        border-bottom: thin solid #ddd;
-    }
-
-    .tr.placeholder>.td,
-    #cbi-firewall .tr>.td,
-    #cbi-network .tr:nth-child(2)>.td,
-    .cbi-section #wifi_assoclist_table .tr>.td {
-        border-top: 0;
-    }
-
-    .th,
-    .td {
-        display: inline-block;
-        align-self: flex-start;
-        flex: 2 2 25%;
-        text-overflow: ellipsis;
-        word-wrap: break-word;
-    }
-
-    .td select,
-    .td input[type="text"] {
-        width: 100%;
-        word-wrap: normal;
-    }
-
-    .td [data-dynlist]>input,
-    .td input.cbi-input-password {
-        width: calc(100% - 1.5rem);
-    }
-
-    .td[data-type="button"],
-    .td[data-type="fvalue"] {
-        flex: 1 1 12.5%;
-        text-align: left;
-    }
-
-    .th.cbi-value-field,
-    .td.cbi-value-field,
-    .th.cbi-section-table-cell,
-    .td.cbi-section-table-cell {
-        flex-basis: auto;
-        padding-top: 1rem;
-    }
-
-    .cbi-section-table-row {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
-    }
-
-    .td.cbi-value-field,
-    .cbi-section-table-cell {
-        display: inline-block;
-        flex: 10 10 auto;
-        flex-basis: 50%;
-        text-align: center;
-    }
-
-    .td.cbi-section-actions {
-        vertical-align: bottom;
-    }
-
-    .tr.table-titles,
-    .tr.cbi-section-table-titles,
-    .tr.cbi-section-table-descr {
-        display: none;
-    }
-
-    .tr[data-title]::before,
-    .tr.cbi-section-table-titles.named::before {
-        font-size: .9rem;
-        display: block;
-        flex: 1 1 100%;
-        border-bottom: thin solid rgba(0, 0, 0, .26);
-        background: #e9ecef;
-    }
-
-    .td[data-title],
-    [data-page^="admin-status-realtime"] .td[id] {
-        text-align: left;
-    }
-
-    .td[data-title]::before {
-        display: block;
-    }
-
-    .cbi-button+.cbi-button {
-        margin-left: 0;
-    }
-
-    .td.cbi-section-actions>*>*,
-    .td.cbi-section-actions>*>form>* {
-        margin: 2.1px 3px;
-    }
-
-    .Firewall form {
-        position: static !important;
-        margin: 0 0 2rem 0;
-        padding: 2rem;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
-    }
-
-    .Firewall form input {
-        width: 100% !important;
-        margin: 0;
-        margin-top: 1rem;
-    }
-
-    .Firewall .center,
-    .Firewall .center::before {
-        text-align: left !important;
-    }
-
-    .commandbox {
-        width: 100% !important;
-        margin-left: 0 !important;
-    }
-
-    .btn:not(button), .cbi-button {
-        font-size: 0.8rem;
-        padding: 0.2rem 0.6rem;
-    }
-}
-
-
-
-
-@media screen and (max-width: 768px) {
-    body {
-        font-size: .8rem;
-    }
-
-    .cbi-progressbar::after {
-        font-size: .95em;
-        line-height: 1.5;
-    }
-
-
-
-    .main-left {
-        position: fixed;
-        z-index: 100;
-        width: 0;
-    }
-
-    .main-right {
-        width: 100%;
-    }
-
-    .showSide {
-        padding: 0.1rem;
-        position: relative;
-        z-index: 99;
-        display: inline-block !important;
-
-        &::before {
-            font-family: 'argon' !important;
-            font-style: normal !important;
-            font-weight: normal !important;
-            font-variant: normal !important;
-            text-transform: none !important;
-            line-height: 1;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            content: "\e20e";
-            font-size: 1.7rem;
-        }
-    }
-
-
-    header>.fill>.container>.brand {
-        display: inline-block;
-    }
-
-    .main>.main-left>.nav>.slide>.menu,
-    .main>.main-left>.nav>li>[data-title="Logout"] {
-        font-size: 1.2rem;
-    }
-
-    .main>.main-left>.nav>.slide>.slide-menu>li>a {
-        font-size: 0.8rem;
-    }
-    .cbi-section > div{
-        overflow-x: auto;
-    }
-
-}
-@media screen and (max-width: 600px) {
-    .mobile-hide{
-        display: none;
-    }
-    #maincontent > .container {
-        margin: 0 1rem 1rem 1rem;
-    }
-    .cbi-value-title {
-        text-align: left;
-    }
-
-    [data-page="admin-system-flash"] legend {
-        padding: 1rem 0 1rem 1rem;
-
-    }
-    [data-page="admin-system-flash"] .cbi-section-descr {
-        padding: 1rem 0 1rem 1rem;
-
-    }
-
-    [data-page="admin-system-flash"] .cbi-value {
-        padding: 0 1rem;
-    }
-
-    [data-page="admin-network-dhcp"] [data-tab-active="true"] {
-        padding: 1rem 1rem !important;
-    }
-    body{
-        overflow-x: hidden;
-    }
-    .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field {
-        width: 16rem;
-    }
-
-    .node-main-login footer {
-        display: none;
-    }
-}
-@media screen and (min-width: 600px) {
-    ::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-    }
-
-    ::-webkit-scrollbar,
-    ::-webkit-scrollbar-corner {
-        background: transparent;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background: #9e9e9e;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-        background: #757575;
-    }
-
-    ::-webkit-scrollbar-thumb:active {
-        background: #424242;
-    }
-
-    
-}
\ No newline at end of file
+/**
+ *  Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
+ *
+ *  luci-theme-argon
+ *      Copyright 2019 Jerrykuku <jerrykuku@qq.com>
+ *
+ *  Have a bug? Please create an issue here on GitHub!
+ *      https://github.com/jerrykuku/luci-theme-argon/issues
+ *
+ *  luci-theme-material: 
+ *      Copyright 2015 Lutty Yang <lutty@wcan.in>
+ *		https://github.com/LuttyYang/luci-theme-material/
+ *
+ *  Agron Theme
+ *	    https://demos.creative-tim.com/argon-dashboard/index.html
+ *
+ *  Login background
+ *      https://unsplash.com/
+ *  Font generate by Icomoon<icomoon.io>
+ *
+ *  Licensed to the public under the Apache License 2.0
+ */
+/*
+ *	Include base and custom css
+ */
+ @import url("custom.css?v=1");
+ /*
+   *	Icon Css and Fonts 
+   */
+ @font-face {
+   font-family: 'argon';
+   src: url('fonts/argon.eot?vncylf');
+   src: url('fonts/argon.eot?vncylf#iefix') format('embedded-opentype'), url('fonts/argon.ttf?vncylf') format('truetype'), url('fonts/argon.woff?vncylf') format('woff'), url('fonts/argon.svg?vncylf#argon') format('svg');
+   font-weight: normal;
+   font-style: normal;
+   font-display: block;
+ }
+ @font-face {
+   font-family: 'TypoGraphica';
+   src: url('fonts/TypoGraphica.eot?#iefix') format('embedded-opentype'), url('fonts/TypoGraphica.woff') format('woff'), url('fonts/TypoGraphica.ttf') format('truetype'), url('fonts/TypoGraphica.svg#TypoGraphica') format('svg');
+   font-weight: normal;
+   font-style: normal;
+ }
+ [class^="icon-"],
+ [class*=" icon-"] {
+   /* use !important to prevent issues with browser extensions that change fonts */
+   font-family: 'argon' !important;
+   font-style: normal;
+   font-weight: normal;
+   font-variant: normal;
+   text-transform: none;
+   line-height: 1;
+   /* Better Font Rendering =========== */
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+ }
+ .icon-hello-world:before {
+   content: "\e90e";
+ }
+ .icon-expand_more:before {
+   content: "\e20b";
+ }
+ .icon-menu:before {
+   content: "\e20e";
+ }
+ .icon-favorite:before {
+   content: "\e291";
+ }
+ .icon-spinner:before {
+   content: "\e603";
+ }
+ .icon-delete:before {
+   content: "\e900";
+ }
+ .icon-edit:before {
+   content: "\e901";
+ }
+ .icon-use:before {
+   content: "\e902";
+ }
+ .icon-loading:before {
+   content: "\e903";
+ }
+ .icon-switch:before {
+   content: "\e904";
+ }
+ .icon-error:before {
+   content: "\e905";
+ }
+ .icon-dashboard:before {
+   content: "\e906";
+ }
+ .icon-logout:before {
+   content: "\e907";
+ }
+ .icon-Network:before {
+   content: "\e908";
+ }
+ .icon-services:before {
+   content: "\e909";
+ }
+ .icon-system:before {
+   content: "\e90a";
+ }
+ .icon-vpn:before {
+   content: "\e90b";
+ }
+ .icon-storage:before {
+   content: "\e90c";
+ }
+ .icon-statistics:before {
+   content: "\e90d";
+ }
+ .icon-angle-right:before {
+   content: "\e90f";
+ }
+ .icon-password:before {
+   content: "\e910";
+ }
+ .icon-user:before {
+   content: "\e971";
+ }
+ .icon-question:before {
+   content: "\f059";
+ }
+ .icon-docker:before {
+   content: "\e911";
+ }
+ .sk-folding-cube {
+   position: absolute;
+   width: 40px;
+   height: 40px;
+   left: 50%;
+   top: 50%;
+   margin: -20px 0 0 -20px;
+   -webkit-transform: rotateZ(45deg);
+   transform: rotateZ(45deg);
+ }
+ .sk-folding-cube .sk-cube {
+   float: left;
+   width: 50%;
+   height: 50%;
+   position: relative;
+   -webkit-transform: scale(1.1);
+   -ms-transform: scale(1.1);
+   transform: scale(1.1);
+ }
+ .sk-folding-cube .sk-cube:before {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background-color: #5e72e4;
+   -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
+   animation: sk-foldCubeAngle 2.4s infinite linear both;
+   -webkit-transform-origin: 100% 100%;
+   -ms-transform-origin: 100% 100%;
+   transform-origin: 100% 100%;
+ }
+ .sk-folding-cube .sk-cube2 {
+   -webkit-transform: scale(1.1) rotateZ(90deg);
+   transform: scale(1.1) rotateZ(90deg);
+ }
+ .sk-folding-cube .sk-cube3 {
+   -webkit-transform: scale(1.1) rotateZ(180deg);
+   transform: scale(1.1) rotateZ(180deg);
+ }
+ .sk-folding-cube .sk-cube4 {
+   -webkit-transform: scale(1.1) rotateZ(270deg);
+   transform: scale(1.1) rotateZ(270deg);
+ }
+ .sk-folding-cube .sk-cube2:before {
+   -webkit-animation-delay: 0.3s;
+   animation-delay: 0.3s;
+ }
+ .sk-folding-cube .sk-cube3:before {
+   -webkit-animation-delay: 0.6s;
+   animation-delay: 0.6s;
+ }
+ .sk-folding-cube .sk-cube4:before {
+   -webkit-animation-delay: 0.9s;
+   animation-delay: 0.9s;
+ }
+ @-webkit-keyframes sk-foldCubeAngle {
+   0%,
+   10% {
+     -webkit-transform: perspective(140px) rotateX(-180deg);
+     transform: perspective(140px) rotateX(-180deg);
+     opacity: 0;
+   }
+   25%,
+   75% {
+     -webkit-transform: perspective(140px) rotateX(0deg);
+     transform: perspective(140px) rotateX(0deg);
+     opacity: 1;
+   }
+   90%,
+   100% {
+     -webkit-transform: perspective(140px) rotateY(180deg);
+     transform: perspective(140px) rotateY(180deg);
+     opacity: 0;
+   }
+ }
+ @keyframes sk-foldCubeAngle {
+   0%,
+   10% {
+     -webkit-transform: perspective(140px) rotateX(-180deg);
+     transform: perspective(140px) rotateX(-180deg);
+     opacity: 0;
+   }
+   25%,
+   75% {
+     -webkit-transform: perspective(140px) rotateX(0deg);
+     transform: perspective(140px) rotateX(0deg);
+     opacity: 1;
+   }
+   90%,
+   100% {
+     -webkit-transform: perspective(140px) rotateY(180deg);
+     transform: perspective(140px) rotateY(180deg);
+     opacity: 0;
+   }
+ }
+ .table {
+   position: relative;
+   display: table;
+ }
+ .tr {
+   display: table-row;
+ }
+ .thead {
+   display: table-header-group;
+ }
+ .tbody {
+   display: table-row-group;
+ }
+ .tfoot {
+   display: table-footer-group;
+ }
+ .td,
+ .th {
+   line-height: normal;
+   display: table-cell;
+   padding: 0.5em;
+   text-align: center;
+   vertical-align: middle;
+ }
+ .th {
+   font-weight: bold;
+ }
+ .tr.placeholder {
+   height: 4em;
+ }
+ .tr.placeholder > .td {
+   line-height: 3;
+   position: absolute;
+   right: 0;
+   bottom: 0;
+   left: 0;
+   padding: 0.4rem 0 !important;
+   text-align: center !important;
+   background: inherit;
+ }
+ .td[width="33%"] {
+   padding: 1.1em 1.5rem;
+ }
+ .table[width="33%"],
+ .th[width="33%"],
+ .td[width="33%"] {
+   width: 33%;
+ }
+ .table[width="100%"],
+ .th[width="100%"],
+ .td[width="100%"] {
+   width: 100%;
+ }
+ .col-1 {
+   flex: 1 1 30px !important;
+ }
+ .col-2 {
+   flex: 2 2 60px !important;
+ }
+ .col-3 {
+   flex: 3 3 90px !important;
+ }
+ .col-4 {
+   flex: 4 4 120px !important;
+ }
+ .col-5 {
+   flex: 5 5 150px !important;
+ }
+ .col-6 {
+   flex: 6 6 180px !important;
+ }
+ .col-7 {
+   flex: 7 7 210px !important;
+ }
+ .col-8 {
+   flex: 8 8 240px !important;
+ }
+ .col-9 {
+   flex: 9 9 270px !important;
+ }
+ .col-10 {
+   flex: 10 10 300px !important;
+ }
+ * {
+   box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+   color: #32325d;
+   color: var(--gray-dark);
+ }
+ .h1,
+ .h2,
+ .h3,
+ .h4,
+ .h5,
+ .h6,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+   font-family: inherit;
+   font-weight: normal;
+   line-height: 1.1 !important;
+   color: inherit;
+ }
+ html {
+   overflow-y: hidden;
+   -webkit-text-size-adjust: 100%;
+   -ms-text-size-adjust: 100%;
+ }
+ body {
+   font-size: 0.8rem;
+   background-color: #f8f9fe;
+ }
+ html,
+ body {
+   font-family: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
+   font-family: var(--font-body);
+   height: 100%;
+   margin: 0;
+   padding: 0;
+ }
+ select {
+   padding: 0.36rem 0.8rem;
+   color: #555;
+   border: thin solid #ccc;
+   background-color: #fff;
+   background-image: none;
+ }
+ .btn,
+ button,
+ select,
+ input,
+ .cbi-dropdown {
+   line-height: 1.5rem;
+   height: 2.5rem;
+   padding: 0.625rem 0.75rem;
+   margin: 0.25rem 0.1rem;
+   color: #8898aa;
+   border: 1px solid #dee2e6;
+   border-radius: 0.25rem;
+   outline: 0;
+   background-image: none;
+   box-shadow: none;
+   transition: box-shadow 0.15s ease;
+ }
+ select,
+ .cbi-dropdown {
+   width: inherit;
+   cursor: default;
+ }
+ select:not([multiple="multiple"]):focus,
+ input:not(.cbi-button):focus,
+ .cbi-dropdown:focus {
+   border-color: #5e72e4;
+   border-color: var(--primary);
+   box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, 0.1);
+ }
+ .cbi-dropdown,
+ select[multiple="multiple"] {
+   height: auto;
+ }
+ pre {
+   overflow: auto;
+ }
+ code {
+   font-size: 1rem;
+   font-size-adjust: 0.35;
+   padding: 1px 3px;
+   color: #101010;
+   border-radius: 2px;
+   background: #ddd;
+ }
+ abbr {
+   cursor: help;
+   text-decoration: underline;
+   color: #fff;
+ }
+ hr {
+   margin: 1rem 0;
+   opacity: 0.1;
+   border-color: #eee;
+ }
+ header,
+ .main {
+   width: 100%;
+ }
+ footer {
+   font-size: 0.8rem;
+   overflow: hidden;
+   padding: 1rem;
+   text-align: right;
+   white-space: nowrap;
+   color: #aaa;
+   text-shadow: 0 0 2px #bbb;
+ }
+ footer > a {
+   text-decoration: none;
+   color: #aaa;
+ }
+ small {
+   font-size: 90%;
+   line-height: 1.42857143;
+   white-space: normal;
+ }
+ .main {
+   position: relative;
+   top: 0;
+   bottom: 0;
+   overflow-y: auto;
+   height: 100%;
+ }
+ .main > .loading {
+   position: fixed;
+   z-index: 1000;
+   top: 0;
+   display: block;
+   width: 100%;
+   height: 100%;
+   pointer-events: none;
+   background-color: #f0f0f0;
+ }
+ .main > .loading > span {
+   font-family: monospace;
+   font-size: 2rem;
+   font-size-adjust: 0.35;
+   position: relative;
+   top: 12.5%;
+   display: block;
+   text-align: center;
+   color: #888;
+ }
+ .main > .loading > span > .loading-img {
+   position: relative;
+   top: 0.1rem;
+   left: 0.05rem;
+   display: inline-block;
+   width: 1.25rem;
+   height: 1.25rem;
+   margin-right: 1rem;
+   animation: anim-rotate 2s infinite linear;
+   background: url(icons/spinner.svg) no-repeat center;
+ }
+ @keyframes anim-rotate {
+   0% {
+     -webkit-transform: rotate(0);
+     -ms-transform: rotate(0);
+     transform: rotate(0);
+   }
+   100% {
+     -webkit-transform: rotate(360deg);
+     -ms-transform: rotate(360deg);
+     transform: rotate(360deg);
+   }
+ }
+ .main-left {
+   top: 0;
+   float: left;
+   width: 15%;
+   width: calc(0% + 15rem);
+   height: 100%;
+   background-color: #fff;
+   background-color: var(--menu-bg-color);
+   box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
+   overflow-x: auto;
+   position: fixed;
+   z-index: 100;
+ }
+ .main-left .sidenav-header {
+   padding: 1.5rem;
+   text-align: center;
+ }
+ .main-left .sidenav-header .brand {
+   font-size: 1.8rem;
+   color: #5e72e4;
+   font-family: "TypoGraphica";
+   text-decoration: none;
+   text-align: center;
+   cursor: default;
+   vertical-align: text-bottom;
+   white-space: nowrap;
+ }
+ .main-right {
+   float: right;
+   width: 85%;
+   width: calc(100% - 15rem);
+   height: 100%;
+   background-color: #f8f9fe;
+   transition: all 0.2s;
+ }
+ .main-right > #maincontent {
+   position: relative;
+   z-index: 50;
+   margin-top: -13rem;
+ }
+ .pull-right {
+   float: right;
+ }
+ .pull-left {
+   float: left;
+ }
+ .nowrap:not(.td) {
+   white-space: nowrap;
+ }
+ [disabled="disabled"] {
+   pointer-events: none;
+ }
+ header {
+   color: #fff;
+   color: var(--header-color);
+   padding: 0 0 14rem 0;
+ }
+ header.bg-primary {
+   background-color: #5e72e4 !important;
+   background-color: var(--primary) !important;
+ }
+ header .fill {
+   padding: 0.8rem 0;
+   border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+ }
+ header .fill .container {
+   height: 2rem;
+   padding: 0 1rem;
+ }
+ header .fill .container .showSide {
+   display: none;
+   color: #fff;
+   font-size: 1.4rem;
+ }
+ header .fill .container .brand {
+   font-size: 1.5rem;
+   color: #fff;
+   font-family: "TypoGraphica";
+   text-decoration: none;
+   padding-left: 1rem;
+   cursor: default;
+   vertical-align: text-bottom;
+   display: none;
+ }
+ header .fill .container .pull-right {
+   float: right;
+   margin-top: 0rem;
+   display: flex;
+ }
+ header .fill .status {
+   position: absolute;
+   top: 25%;
+   right: 1em;
+   float: right;
+ }
+ header .fill .status * {
+   position: relative;
+   top: 0.2rem;
+   float: left;
+   margin-left: 0.3rem;
+   cursor: pointer;
+ }
+ #xhr_poll_status {
+   display: flex;
+   margin-left: 0.5rem;
+ }
+ #xhr_poll_status * {
+   color: #fff;
+ }
+ .danger {
+   background-color: #ff7d60 !important;
+ }
+ .warning {
+   background-color: #f0e68c !important;
+ }
+ .success {
+   background-color: #5cb85c !important;
+ }
+ .notice {
+   background-color: #11cdef !important;
+   color: #fff;
+ }
+ .error {
+   color: #f00;
+ }
+ .alert,
+ .alert-message {
+   font-weight: bold;
+   margin-bottom: 1em;
+   padding: 1rem;
+   border: 0;
+   border-radius: 0.375rem !important;
+   background-color: #fff;
+   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+   text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
+ }
+ .alert.error,
+ .alert-message.error {
+   background-color: #ffd600;
+ }
+ .alert h4,
+ .alert-message h4 {
+   padding: 0rem 1.5rem 0.75rem 0rem;
+ }
+ .alert .btn,
+ .alert-message .btn {
+   height: auto;
+ }
+ .alert-message > h4 {
+   font-size: 110%;
+   font-weight: bold;
+ }
+ .alert-message > * {
+   margin: 0.5rem 0;
+ }
+ .alert-message .btn {
+   padding: 0.3rem 0.6rem;
+ }
+ .container .alert,
+ .container .alert-message {
+   margin-top: 1rem;
+ }
+ /*
+  *	Main Menu
+  */
+ .main .main-left {
+   transition: all 0.2s;
+ }
+ .main .main-left .nav {
+   margin-top: 0.5rem;
+ }
+ .main .main-left .nav li {
+   padding: 0.5rem 1rem;
+   cursor: pointer;
+   -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+ }
+ .main .main-left .nav li a {
+   display: block;
+   color: #5f6368;
+   color: var(--menu-color);
+ }
+ .main .main-left .nav li.slide {
+   padding: 0;
+ }
+ .main .main-left .nav li.slide ul {
+   display: none;
+ }
+ .main .main-left .nav li.slide .menu {
+   display: block;
+   margin: 0.1rem 0.5rem 0.1rem 0.5rem;
+   padding: 0.675rem 0 0.675rem 2.5rem;
+   border-radius: 0.375rem;
+   text-decoration: none;
+   cursor: default;
+   font-size: 1rem;
+   transition: all 0.2s;
+   position: relative;
+ }
+ .main .main-left .nav li.slide .menu.active {
+   color: #fff;
+   background: #5e72e4;
+   background: var(--primary);
+ }
+ .main .main-left .nav li.slide .menu.active::before {
+   color: #fff !important;
+ }
+ .main .main-left .nav li.slide .menu.active::after {
+   transform: rotate(90deg);
+   color: #fff !important;
+ }
+ .main .main-left .nav li.slide .menu:hover {
+   cursor: pointer;
+   color: #fff;
+   background: #5e72e4;
+   background: var(--primary);
+ }
+ .main .main-left .nav li.slide .menu:hover::before {
+   color: #fff !important;
+ }
+ .main .main-left .nav li.slide .menu::before {
+   font-family: 'argon' !important;
+   font-style: normal;
+   font-weight: normal;
+   font-variant: normal;
+   text-transform: none;
+   line-height: 1;
+   /* Better Font Rendering =========== */
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+   position: absolute;
+   left: 0.8rem;
+   padding-top: 3px;
+   transition: all 0.3s;
+ }
+ .main .main-left .nav li.slide .menu::after {
+   position: absolute;
+   right: 0.5rem;
+   top: 0.8rem;
+   font-family: 'argon' !important;
+   font-style: normal;
+   font-weight: normal;
+   font-variant: normal;
+   text-transform: none;
+   line-height: 1;
+   /* Better Font Rendering =========== */
+   -moz-osx-font-smoothing: grayscale;
+   content: '\e90f';
+   transition: all 0.15s ease;
+   color: #ced4da;
+   text-rendering: auto;
+   -webkit-font-smoothing: antialiased;
+   transition: all 0.3s;
+ }
+ .main .main-left .nav li.slide .menu[data-title=Status]:before {
+   content: "\e906";
+   color: #5e72e4;
+ }
+ .main .main-left .nav li.slide .menu[data-title=System]:before {
+   content: "\e90a";
+   color: #fb6340;
+ }
+ .main .main-left .nav li.slide .menu[data-title=Services]:before {
+   content: "\e909";
+   color: #11cdef;
+ }
+ .main .main-left .nav li.slide .menu[data-title=NAS]:before {
+   content: "\e90c";
+   color: #f3a4b5;
+ }
+ .main .main-left .nav li.slide .menu[data-title=VPN]:before {
+   content: "\e90b";
+   color: #172b4d;
+ }
+ .main .main-left .nav li.slide .menu[data-title=Network]:before {
+   content: "\e908";
+   color: #8965e0;
+ }
+ .main .main-left .nav li.slide .menu[data-title=Bandwidth_Monitor]:before {
+   content: "\e90d";
+   color: #2dce89;
+ }
+ .main .main-left .nav li.slide .menu[data-title=Docker]:before {
+   content: "\e911";
+   color: #6699ff;
+ }
+ .main .main-left .nav li.slide:hover {
+   background: none;
+ }
+ .main .main-left .nav li.slide .slide-menu {
+   margin: 0 0.5rem 0 2.5rem;
+   padding: 0rem 0.5rem;
+ }
+ .main .main-left .nav li.slide .slide-menu li {
+   position: relative;
+   border-radius: 0.375rem;
+   margin: 0.2rem 0;
+   padding: 0.5rem 0rem;
+   background: none;
+ }
+ .main .main-left .nav li.slide .slide-menu li a {
+   white-space: nowrap;
+   text-decoration: none;
+ }
+ .main .main-left .nav li.slide .slide-menu li::after {
+   content: "";
+   position: absolute;
+   left: 0;
+   bottom: 0;
+   width: 0;
+   height: 2px;
+   background-color: #5e72e4;
+   transition: all 0.2s;
+ }
+ .main .main-left .nav li.slide .slide-menu li:hover {
+   background: none;
+ }
+ .main .main-left .nav li.slide .slide-menu li:hover::after {
+   width: 100%;
+ }
+ .main .main-left .nav li.slide .slide-menu .active {
+   background: none;
+   color: var(--menu-color);
+ }
+ .main .main-left .nav li.slide .slide-menu .active a {
+   color: var(--menu-color);
+ }
+ .main .main-left .nav li.slide .slide-menu .active::after {
+   content: "";
+   position: absolute;
+   left: 0;
+   bottom: 0;
+   width: 100%;
+   height: 2px;
+   background-color: #5e72e4;
+   transition: all 0.2s;
+ }
+ .main .main-left .nav li.slide .slide-menu .active:hover {
+   background: none;
+ }
+ .main .main-left .nav li.slide .slide-menu .active:hover::after {
+   width: 100%;
+ }
+ .lg {
+   margin: 0;
+   padding: 0 !important;
+ }
+ .logout {
+   display: block;
+   margin: 0.8rem 0.5rem 0.1rem 0.5rem;
+   padding: 0.675rem 0 0.675rem 2.5rem;
+   border-radius: 0.375rem;
+   text-decoration: none;
+   font-size: 1rem;
+   transition: all 0.2s;
+   position: relative;
+ }
+ .logout:before {
+   font-family: 'argon' !important;
+   font-style: normal;
+   font-weight: normal;
+   font-variant: normal;
+   text-transform: none;
+   line-height: 1;
+   /* Better Font Rendering =========== */
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+   position: absolute;
+   left: 0.8rem;
+   padding-top: 3px;
+   transition: all 0.3s;
+   content: "\e907";
+   color: #32325d !important;
+ }
+ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu::before {
+   transition: transform 0.1s ease-in-out;
+ }
+ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before {
+   transition: transform 0.2s ease-in-out;
+ }
+ .main > .main-left[style*="overflow: hidden"] > .nav > .slide > .menu::before {
+   display: none;
+ }
+ #maincontent > .container {
+   margin: 0 2rem 1rem 2rem;
+ }
+ ul {
+   line-height: normal;
+ }
+ li {
+   list-style-type: none;
+ }
+ h1 {
+   font-size: 2rem;
+   padding-bottom: 10px;
+   border-bottom: thin solid #eee;
+ }
+ h2 {
+   color: #fff;
+   font-size: 1.8rem;
+   margin: 1rem 0 0 0;
+   padding-bottom: 10px;
+ }
+ h3 {
+   font-size: 1.4rem;
+   margin: 0rem 0 0 0;
+   padding: 2rem 1.5rem 1.25rem 1.5rem;
+ }
+ h4 {
+   font-size: 1.2rem;
+   margin: 2rem 0 0 0;
+   padding: 0rem 1.5rem 0.75rem 1.5rem;
+ }
+ h5 {
+   font-size: 1rem;
+   margin: 2rem 0 0 0;
+   padding-bottom: 10px;
+ }
+ .cbi-section,
+ .cbi-section-error,
+ #iptables,
+ .Firewall form,
+ #cbi-network > .cbi-section-node,
+ #cbi-wireless > .cbi-section-node,
+ #cbi-wireless > #wifi_assoclist_table,
+ [data-tab-title],
+ [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
+ [data-page="admin-system-opkg"] #maincontent > .container {
+   font-family: inherit;
+   font-weight: normal;
+   font-style: normal;
+   line-height: normal;
+   min-width: inherit;
+   margin: 1.5rem 0;
+   padding: 0rem;
+   border: 0;
+   border-radius: 0.375rem;
+   background-color: #fff;
+   box-shadow: 0 0 1rem 0 rgba(136, 152, 170, 0.15);
+ }
+ .cbi-modal .cbi-section,
+ .cbi-section .cbi-section {
+   padding: 0;
+   box-shadow: none;
+ }
+ .cbi-modal .cbi-tabmenu {
+   margin-left: 0;
+ }
+ .cbi-map-descr,
+ .cbi-section-descr {
+   font-size: small;
+   line-height: 1.42857143;
+   padding: 0.5rem 0;
+   color: #fff;
+ }
+ .cbi-map-descr + fieldset {
+   margin-top: 1rem;
+ }
+ .cbi-section > legend {
+   display: none !important;
+ }
+ fieldset > fieldset,
+ .cbi-section > .cbi-section {
+   margin: 0;
+   padding: 0;
+   border: 0;
+   box-shadow: none;
+ }
+ .cbi-section > h3:first-child,
+ .panel-title {
+   font-size: 1.4rem;
+   line-height: 1;
+   display: block;
+   width: 100%;
+   margin: 0;
+   margin-bottom: 0;
+   padding: 1.25rem 1.5rem;
+   color: #32325d;
+   color: var(--gray-dark);
+ }
+ .cbi-section > h3:first-child,
+ .cbi-section > h4:first-child,
+ .cbi-section > p:first-child,
+ [data-tab-title] > h3:first-child,
+ [data-tab-title] > h4:first-child,
+ [data-tab-title] > p:first-child {
+   padding-top: 1rem;
+ }
+ table {
+   border-spacing: 0;
+   border-collapse: collapse;
+ }
+ table,
+ .table {
+   overflow-y: hidden;
+   width: 100%;
+ }
+ table > tbody > tr > td,
+ table > tbody > tr > th,
+ table > tfoot > tr > td,
+ table > tfoot > tr > th,
+ table > thead > tr > td,
+ table > thead > tr > th,
+ .table > .tbody > .tr > .td,
+ .table > .tbody > .tr > .th,
+ .table > .tfoot > .tr > .td,
+ .table > .tfoot > .tr > .th,
+ .table > .thead > .tr > .td,
+ .table > .thead > .tr > .th,
+ .table > .tr > .td.cbi-value-field,
+ .table > .tr > .th.cbi-section-table-cell {
+   padding: 0.5rem;
+ }
+ .container > .cbi-section:first-of-type > .table[width="100%"] > .tr > .td {
+   padding: 0.6rem;
+ }
+ .cbi-section-table-cell {
+   line-height: 1.1;
+   align-self: flex-end;
+   flex: 1 1 auto;
+ }
+ tr > td,
+ tr > th,
+ .tr > .td,
+ .tr > .th,
+ .cbi-section-table-row::before,
+ #cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) {
+   border-top: thin solid #ddd;
+   padding: 1.1em 1.5rem;
+ }
+ #cbi-wireless .td,
+ #cbi-network .tr:first-child > .td,
+ .table[width="100%"] > .tr:first-child > .td,
+ [data-page="admin-network-diagnostics"] .tr > .td,
+ .tr.table-titles > .th,
+ .tr.cbi-section-table-titles > .th {
+   border-top: 0 !important;
+   background-color: #f6f9fc;
+   padding: 1.1em 1.5rem;
+   line-height: 1.3rem;
+ }
+ .table[width="100%"] > .tr:first-child > .td {
+   margin: auto 0;
+ }
+ .cbi-section-table-row {
+   margin-bottom: 1rem;
+   text-align: center !important;
+   background: #f4f4f4;
+ }
+ .cbi-section-table-row:last-child {
+   margin-bottom: 0;
+ }
+ .cbi-section-table-row > .cbi-value-field .cbi-dropdown,
+ .cbi-section-table-row > .cbi-value-field .cbi-input-select,
+ .cbi-section-table-row > .cbi-value-field .cbi-input-text,
+ .cbi-section-table-row > .cbi-value-field .cbi-input-password {
+   width: 100%;
+ }
+ .cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
+ .cbi-section-table-row > .cbi-value-field input.cbi-input-password {
+   width: calc(100% - 1.5rem);
+ }
+ .cbi-section-table-row .td {
+   text-align: center !important;
+ }
+ div > table > tbody > tr:nth-of-type(2n),
+ div > .table > .tr:nth-of-type(2n) {
+   background-color: #f9f9f9;
+ }
+ /* fix multiple table */
+ table table,
+ .table .table,
+ .cbi-value-field table,
+ .cbi-value-field .table,
+ td > table > tbody > tr > td,
+ .td > .table > .tbody > .tr > .td,
+ .cbi-value-field > table > tbody > tr > td,
+ .cbi-value-field > .table > .tbody > .tr > .td {
+   border: 0;
+ }
+ /* button style */
+ .btn,
+ .cbi-button,
+ .item::after {
+   font-size: 0.8rem;
+   display: inline-block;
+   width: auto !important;
+   padding: 0 0.8rem;
+   cursor: pointer;
+   -webkit-user-select: none;
+   -moz-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+   transition: all 0.2s ease-in-out;
+   text-align: center;
+   vertical-align: middle;
+   white-space: nowrap;
+   text-decoration: none;
+   text-transform: uppercase;
+   color: rgba(0, 0, 0, 0.87);
+   border: 0;
+   border-radius: 0.2rem;
+   background-color: #f0f0f0;
+   background-image: none;
+   -webkit-appearance: none;
+   -ms-touch-action: manipulation;
+   touch-action: manipulation;
+ }
+ .cbi-button-up,
+ .cbi-button-down {
+   font-size: 1.2rem;
+   display: inline-block;
+   min-width: 0;
+   padding: 0.2rem 0.3rem;
+   color: transparent !important;
+   background: url(icons/arrow.svg) no-repeat center;
+   background-size: 12px 20px;
+ }
+ .cbi-button-up {
+   transform: scaleY(-1);
+ }
+ .cbi-button:not(select) {
+   -webkit-appearance: none !important;
+ }
+ .cbi-button + .cbi-button {
+   margin-left: 0.6rem;
+ }
+ .btn:hover,
+ .btn:focus,
+ .btn:active,
+ .cbi-button:hover,
+ .cbi-button:focus,
+ .cbi-button:active,
+ .item:hover::after,
+ .item:focus::after,
+ .item:active::after,
+ .cbi-page-actions .cbi-button-apply + .cbi-button-save:hover,
+ .cbi-page-actions .cbi-button-apply + .cbi-button-save:focus,
+ .cbi-page-actions .cbi-button-apply + .cbi-button-save:active {
+   text-decoration: none;
+   outline: 0;
+ }
+ .btn:hover,
+ .btn:focus,
+ .cbi-button:hover,
+ .cbi-button:focus,
+ .item:hover::after,
+ .item:focus::after {
+   box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
+ }
+ .btn:active,
+ .cbi-button:active,
+ .item:active::after {
+   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+ }
+ .cbi-button-up:hover,
+ .cbi-button-up:focus {
+   box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.2);
+ }
+ .cbi-button-up:active {
+   box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.19), 0 -6px 6px rgba(0, 0, 0, 0.23);
+ }
+ .btn:disabled,
+ .cbi-button:disabled {
+   cursor: not-allowed;
+   pointer-events: none;
+   opacity: 0.5;
+   box-shadow: none;
+ }
+ /* gray */
+ .alert-message [class="btn"],
+ .modal div[class="btn"],
+ .cbi-button-find,
+ .cbi-button-link,
+ .cbi-button-up,
+ .cbi-button-down,
+ .cbi-button-neutral,
+ .cbi-button[name="zero"],
+ .cbi-button[name="restart"],
+ .cbi-button[onclick="hide_empty(this)"] {
+   font-weight: bold;
+   color: #fff;
+   border: thin solid #8898aa;
+   background-color: #8898aa;
+ }
+ /* dark blue */
+ .btn.primary,
+ .cbi-page-actions .cbi-button-save,
+ .cbi-page-actions .cbi-button-apply + .cbi-button-save,
+ .cbi-button-add,
+ .cbi-button-save,
+ .cbi-button-positive,
+ .cbi-button-link,
+ .cbi-button[value="Enable"],
+ .cbi-button[value="Scan"],
+ .cbi-button[value^="Back"],
+ .cbi-button-neutral[onclick="handleConfig(event)"] {
+   font-weight: normal;
+   color: #fff;
+   border: thin solid #5e72e4;
+   border: thin solid var(--primary);
+   background-color: #5e72e4;
+   background-color: var(--primary);
+ }
+ /* light blue */
+ .cbi-page-actions .cbi-button-apply,
+ .cbi-section-actions .cbi-button-edit,
+ .cbi-button-edit,
+ .cbi-button-apply,
+ .cbi-button-reload,
+ .cbi-button-action,
+ .cbi-button[value="Submit"],
+ .cbi-button[value="Upload"],
+ .cbi-button[value$="Apply"],
+ .cbi-button[onclick="addKey(event)"] {
+   font-weight: normal;
+   color: #fff;
+   border: thin solid #5e72e4;
+   border: thin solid var(--primary);
+   background-color: #5e72e4;
+   background-color: var(--primary);
+ }
+ /* red */
+ .btn.danger,
+ .cbi-section-remove > .cbi-button,
+ .cbi-button-remove,
+ .cbi-button-reset,
+ .cbi-button-negative,
+ .cbi-button[value="Stop"],
+ .cbi-button[value="Kill"],
+ .cbi-button[onclick="reboot(this)"],
+ .cbi-button-neutral[value="Restart"] {
+   font-weight: normal;
+   color: #fff;
+   border: thin solid #f5365c;
+   border: thin solid var(--red);
+   background-color: #f5365c;
+   background-color: var(--red);
+ }
+ /* yellow */
+ .btn[value="Dismiss"],
+ .cbi-button[value="Terminate"],
+ .cbi-button[value="Reset"],
+ .cbi-button[value="Disabled"],
+ .cbi-button[onclick^="iface_reconnect"],
+ .cbi-button[onclick="handleReset(event)"],
+ .cbi-button-neutral[value="Disable"] {
+   font-weight: normal;
+   color: #fff;
+   border: thin solid #eea236;
+   background-color: #f0ad4e;
+ }
+ /* green */
+ .cbi-button-success,
+ .cbi-button-download,
+ .cbi-button[name="backup"],
+ .cbi-button[value="Download"],
+ .cbi-button[value="Save mtdblock"] {
+   font-weight: normal;
+   color: #fff;
+   border: thin solid #4cae4c;
+   background-color: #5cb85c;
+ }
+ .cbi-page-actions .cbi-button-link:first-child {
+   float: left;
+ }
+ .a-to-btn {
+   text-decoration: none;
+ }
+ .cbi-value-field .cbi-button-add {
+   font-weight: bold;
+   margin: 9px 0 4px 3px;
+   padding: 1px 6px;
+ }
+ .tabs {
+   margin: 0 0rem;
+   padding-left: 0.5rem;
+   border-radius: 0.375rem;
+   background-color: #fff;
+ }
+ .tabs > li,
+ .cbi-tabmenu > li {
+   display: inline-block;
+   padding: 0.55rem 0;
+   margin: 0.5rem 0.1rem 0 0.1rem;
+   border-top-left-radius: 0.375rem;
+   border-top-right-radius: 0.375rem;
+   background-color: #d4d4d4;
+   cursor: pointer;
+ }
+ .tabs > li {
+   padding-bottom: 0.4rem;
+   border-bottom: 0.2rem solid transparent;
+   background-color: #fff;
+ }
+ .tabs > li[class~="active"],
+ .tabs > li:hover {
+   border-bottom-color: #5e72e4;
+   border-bottom-color: var(--primary);
+ }
+ .tabs > li:hover {
+   cursor: pointer;
+   border-bottom-color: #c9c9c9;
+ }
+ .tabs > li > a,
+ .cbi-tabmenu > li > a {
+   padding: 0.6rem 0.9rem;
+   text-decoration: none;
+   color: #404040;
+ }
+ .tabs > li[class~="active"] > a {
+   color: #5e72e4;
+   color: var(--primary);
+ }
+ .cbi-tabmenu {
+   border: 0 solid #d4d4d4;
+   border-bottom: 0;
+ }
+ .cbi-tabmenu > li:hover {
+   background-color: #f1f1f1;
+ }
+ .cbi-tabmenu > li[class~="cbi-tab"] {
+   background-color: #fb6340;
+   background-color: var(--orange);
+ }
+ .cbi-tabmenu > li[class~="cbi-tab"] a {
+   color: #fff;
+ }
+ .cbi-tabmenu {
+   padding-left: 1rem;
+   background-color: none;
+ }
+ .cbi-section .cbi-section-remove:nth-of-type(2n),
+ .container > .cbi-section .cbi-section-node:nth-of-type(2n) {
+   background-color: #f9f9f9;
+ }
+ [data-tab-title] {
+   overflow: hidden;
+   height: 0;
+   opacity: 0;
+   margin: 0;
+   padding: 0rem 0rem !important;
+ }
+ [data-tab-title] p {
+   margin-left: 1rem;
+   margin-bottom: 1rem;
+ }
+ [data-tab-active="true"] {
+   overflow: visible;
+   height: auto;
+   opacity: 1;
+   transition: opacity 0.25s ease-in;
+   margin: inherit !important;
+ }
+ .cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),
+ .cbi-section[id] .cbi-section-node:nth-of-type(4n+4) {
+   background-color: #f9f9f9;
+ }
+ .cbi-section-node-tabbed {
+   margin-top: 0;
+   padding: 0;
+   border: thin solid #d4d4d4;
+   border-radius: 0.375rem;
+ }
+ .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
+   background-color: #f9f9f9;
+ }
+ .cbi-value-field,
+ .cbi-value-description {
+   line-height: 1.25;
+   display: table-cell;
+ }
+ .cbi-value-field abbr,
+ .cbi-value-description abbr {
+   color: #32325d;
+   color: var(--gray-dark);
+ }
+ .cbi-value-description {
+   font-size: small;
+   padding-top: 0.4rem;
+   opacity: 0.5;
+ }
+ .cbi-value-title {
+   display: table-cell;
+   float: left;
+   width: 23rem;
+   padding-top: 0.25rem;
+   padding-right: 2rem;
+   text-align: right;
+   word-wrap: break-word;
+ }
+ .cbi-value {
+   display: inline-block;
+   width: 100%;
+   padding: 0.35rem 1rem 0.2rem 1rem;
+   line-height: 2.4rem;
+ }
+ .cbi-value ul {
+   line-height: 1.25;
+ }
+ .cbi-value-field .cbi-dropdown,
+ .cbi-value-field .cbi-input-select,
+ .cbi-value input[type="text"],
+ .cbi-value input[type="password"] {
+   min-width: 18rem;
+ }
+ #cbi-firewall-zone .cbi-input-select,
+ #cbi-network-switch_vlan .cbi-input-select {
+   min-width: 11rem;
+ }
+ #cbi-network-switch_vlan .cbi-input-text {
+   max-width: 3rem;
+ }
+ .cbi-input-invalid {
+   color: #f5365c;
+   border-bottom-color: #f5365c;
+ }
+ .cbi-section-error {
+   font-weight: bold;
+   line-height: 1.42857143;
+   margin: 18px;
+   padding: 6px;
+   border: thin solid #f5365c;
+   border-radius: 3px;
+   background-color: #fce6e6;
+ }
+ .cbi-section-error ul {
+   margin: 0 0 0 20px;
+ }
+ .cbi-section-error ul li {
+   font-weight: bold;
+   color: #f5365c;
+ }
+ .td[data-title]::before {
+   font-weight: bold;
+   display: none;
+   padding: 0.25rem 0;
+   content: attr(data-title) ":\20";
+   text-align: left;
+   white-space: nowrap;
+ }
+ .tr.placeholder .td[data-title]::before {
+   display: none;
+ }
+ .tr[data-title]::before,
+ .tr.cbi-section-table-titles.named::before {
+   font-weight: bold;
+   display: table-cell;
+   align-self: center;
+   flex: 1 1 5%;
+   padding: 0.25rem;
+   content: attr(data-title) "\20";
+   text-align: center;
+   vertical-align: middle;
+   white-space: normal;
+   word-wrap: break-word;
+ }
+ .cbi-rowstyle-1 {
+   background-color: #f9f9f9;
+ }
+ .cbi-rowstyle-2 {
+   background-color: #eee;
+ }
+ .cbi-rowstyle-2 .cbi-button-up,
+ .cbi-rowstyle-2 .cbi-button-down,
+ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
+   background-color: #fff !important;
+ }
+ .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
+   width: auto !important;
+ }
+ .td.cbi-section-actions {
+   text-align: right !important;
+   vertical-align: middle;
+ }
+ .td.cbi-section-actions > * {
+   display: inline-flex;
+ }
+ .td.cbi-section-actions > * > *,
+ .td.cbi-section-actions > * > form > * {
+   margin: 0 5px;
+   display: flex;
+   align-items: center;
+ }
+ .td.cbi-section-actions > * > form {
+   display: inline-flex;
+   margin: 0;
+ }
+ /* lists */
+ .cbi-dynlist {
+   line-height: 1.3;
+   flex-direction: column;
+   min-height: 30px;
+   cursor: text;
+ }
+ .cbi-dynlist > .item {
+   position: relative;
+   max-width: 25rem;
+   margin-right: 2em;
+   margin-bottom: 0.3rem;
+   padding: 1em 0.25em 0.25em 0;
+   pointer-events: none;
+   color: #8898aa;
+   border-bottom: 2px solid #5e72e4;
+   border-bottom: 2px solid var(--primary);
+   outline: 0;
+ }
+ .cbi-dynlist[name="sshkeys"] > .item {
+   max-width: none;
+ }
+ .cbi-dynlist > .item::after {
+   font-weight: bold;
+   position: absolute;
+   right: -2em;
+   bottom: 0;
+   display: inline-flex;
+   min-height: 17px;
+   padding: 0 6px;
+   content: "\00D7";
+   pointer-events: auto;
+   color: #fff;
+   border: thin solid #f5365c;
+   border: thin solid var(--red);
+   background-color: #f5365c;
+   background-color: var(--red);
+ }
+ .cbi-dynlist > .item > span {
+   white-space: normal;
+   word-break: break-word;
+ }
+ .cbi-dynlist > .add-item {
+   display: inline-flex;
+   align-items: center;
+   width: 100%;
+   min-width: 16rem;
+ }
+ .cbi-dynlist > .add-item:not([ondrop]) > input {
+   overflow: hidden;
+   width: 100%;
+   min-width: 15rem;
+   white-space: nowrap;
+   text-overflow: ellipsis;
+ }
+ .cbi-dynlist > .add-item[ondrop] > input {
+   min-width: 13rem;
+ }
+ .cbi-dynlist,
+ .cbi-dropdown {
+   position: relative;
+   display: inline-flex;
+   padding: 0.2rem;
+ }
+ .cbi-dropdown[placeholder*="select"] {
+   max-width: 25rem;
+   height: auto;
+   margin-top: -3px;
+ }
+ .cbi-dropdown > ul {
+   display: flex;
+   overflow-x: hidden;
+   overflow-y: auto;
+   width: 100%;
+   margin: 0 !important;
+   padding: 0;
+   list-style: none;
+   outline: 0;
+ }
+ .cbi-dropdown > ul.preview {
+   display: none;
+ }
+ .cbi-button-apply > ul.preview {
+   display: none;
+ }
+ .cbi-button-apply > ul.preview li {
+   color: #fff;
+ }
+ .cbi-button-apply > ul:first-child li {
+   color: #fff;
+ }
+ .cbi-dropdown > .open {
+   flex-basis: 15px;
+ }
+ .cbi-dropdown > .open,
+ .cbi-dropdown > .more {
+   font-size: 1rem;
+   font-weight: 900;
+   line-height: 2;
+   display: flex;
+   flex-direction: column;
+   flex-grow: 0;
+   flex-shrink: 0;
+   justify-content: center;
+   padding: 0 0.25em;
+   cursor: default;
+   text-align: center;
+   outline: 0;
+ }
+ .cbi-dropdown > .more,
+ .cbi-dropdown > ul > li[placeholder] {
+   font-weight: bold;
+   display: none;
+   color: #777;
+   text-shadow: 1px 1px 0 #fff;
+ }
+ .cbi-dropdown > ul > li {
+   display: none;
+   overflow: hidden;
+   align-items: center;
+   align-self: center;
+   flex-grow: 1;
+   flex-shrink: 1;
+   min-height: 20px;
+   padding: 0.25em;
+   white-space: nowrap;
+   text-overflow: ellipsis;
+ }
+ .cbi-dropdown > ul > li .hide-open {
+   display: initial;
+ }
+ .cbi-dropdown > ul > li .hide-close {
+   display: none;
+ }
+ .cbi-dropdown > ul > li[display]:not([display="0"]) {
+   border-left: thin solid #ccc;
+ }
+ .cbi-dropdown[empty] > ul {
+   max-width: 1px;
+ }
+ .cbi-dropdown > ul > li > form {
+   display: none;
+   margin: 0;
+   padding: 0;
+   pointer-events: none;
+ }
+ .cbi-dropdown > ul > li img {
+   margin-right: 0.25em;
+   vertical-align: middle;
+ }
+ .cbi-dropdown > ul > li > form > input[type="checkbox"] {
+   height: auto;
+   margin: 0;
+ }
+ .cbi-dropdown > ul > li input[type="text"] {
+   height: 20px;
+ }
+ .cbi-dropdown[open] > ul.dropdown {
+   position: absolute;
+   z-index: 1100;
+   display: block;
+   width: auto;
+   min-width: 100%;
+   max-width: none;
+   max-height: 200px !important;
+   border: thin solid #918e8c;
+   background: #f6f6f6;
+   box-shadow: 0 0 4px #918e8c;
+   color: var(--main-menu-color);
+ }
+ .cbi-dropdown[open] > ul.dropdown li {
+   color: #000;
+ }
+ .cbi-dropdown > ul > li[display],
+ .cbi-dropdown[open] > ul.preview,
+ .cbi-dropdown[open] > ul.dropdown > li,
+ .cbi-dropdown[multiple] > ul > li > label,
+ .cbi-dropdown[multiple][open] > ul.dropdown > li,
+ .cbi-dropdown[multiple][more] > .more,
+ .cbi-dropdown[multiple][empty] > .more {
+   display: flex;
+   align-items: center;
+   flex-grow: 1;
+ }
+ .cbi-dropdown[empty] > ul > li,
+ .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
+ .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
+   display: block;
+ }
+ .cbi-dropdown[open] > ul.dropdown > li .hide-open {
+   display: none;
+ }
+ .cbi-dropdown[open] > ul.dropdown > li .hide-close {
+   display: initial;
+ }
+ .cbi-dropdown[open] > ul.dropdown > li {
+   border-bottom: thin solid #ccc;
+   padding: 0.5rem 0.8rem;
+ }
+ .cbi-dropdown[open] > ul.dropdown > li[selected] {
+   background: #b0d0f0;
+ }
+ .cbi-dropdown[open] > ul.dropdown > li.focus {
+   background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
+ }
+ .cbi-dropdown[open] > ul.dropdown > li:last-child {
+   margin-bottom: 0;
+   border-bottom: 0;
+ }
+ .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
+   opacity: 0.7;
+ }
+ .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
+   width: 100%;
+ }
+ .cbi-dropdown[disabled] {
+   pointer-events: none;
+   opacity: 0.6;
+ }
+ .cbi-dropdown .zonebadge {
+   width: 100%;
+ }
+ .cbi-dropdown[open] .zonebadge {
+   width: auto;
+ }
+ /* progressbar */
+ .cbi-progressbar {
+   position: relative;
+   min-width: 170px;
+   height: 20px;
+   margin: 6px 0;
+   border: thin solid #999;
+   background: #eee;
+   border-radius: 0.2rem;
+   overflow: hidden;
+ }
+ .cbi-progressbar > div {
+   width: 0;
+   height: 100%;
+   transition: width 0.25s ease-in;
+   background: #5bc0de;
+   background: var(--bar-bg);
+ }
+ .cbi-progressbar::after {
+   font-family: monospace;
+   font-size: 1em;
+   font-weight: bold;
+   font-size-adjust: 0.38;
+   line-height: normal;
+   position: absolute;
+   top: 2px;
+   right: 0;
+   bottom: 2px;
+   left: 0;
+   overflow: hidden;
+   content: attr(title);
+   text-align: center;
+   white-space: pre;
+   text-overflow: ellipsis;
+ }
+ #modal_overlay {
+   position: fixed;
+   z-index: 900;
+   top: 0;
+   right: 10000px;
+   bottom: 0;
+   left: -10000px;
+   overflow-y: scroll;
+   transition: opacity 0.125s ease-in;
+   opacity: 0;
+   background: rgba(0, 0, 0, 0.7);
+   -webkit-overflow-scrolling: touch;
+ }
+ .modal {
+   display: flex;
+   align-items: center;
+   flex-wrap: wrap;
+   width: 90%;
+   min-width: 270px;
+   max-width: 600px;
+   min-height: 32px;
+   margin: 5em auto;
+   padding: 1em;
+   border-radius: 3px !important;
+   background: #fff;
+   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+ }
+ .modal > * {
+   line-height: normal;
+   flex-basis: 100%;
+   margin-bottom: 0.5em;
+   max-width: 100%;
+ }
+ .modal > pre,
+ .modal > textarea {
+   font-size: 1rem;
+   font-size-adjust: 0.35;
+   overflow: auto;
+   margin-bottom: 0.5em;
+   padding: 8.5px;
+   cursor: auto;
+   white-space: pre-wrap;
+   color: #eee;
+   outline: 0;
+   background-color: #101010;
+   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+ }
+ .modal > h4 {
+   margin: 0.5em 0;
+ }
+ .modal ul {
+   margin-left: 2.2em;
+ }
+ .modal li {
+   list-style-type: square;
+   color: #808080;
+ }
+ .modal p {
+   padding-left: 0.25rem;
+   word-break: break-word;
+ }
+ .modal .label {
+   font-size: 0.6rem;
+   font-weight: normal;
+   padding: 0.1rem 0.3rem;
+   padding-bottom: 0;
+   cursor: default;
+   border-radius: 0;
+ }
+ .modal .label.warning {
+   background-color: #f0ad4e !important;
+ }
+ .modal .btn {
+   padding: 0.3rem 0.6rem;
+ }
+ .modal.cbi-modal {
+   max-width: 90%;
+   max-height: none;
+ }
+ body.modal-overlay-active {
+   overflow: hidden;
+   height: 100vh;
+ }
+ body.modal-overlay-active #modal_overlay {
+   right: 0;
+   left: 0;
+   opacity: 1;
+ }
+ .spinning {
+   position: relative;
+   padding-left: 32px !important;
+ }
+ .spinning::before {
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   left: 0.2em;
+   width: 32px;
+   content: "";
+   background: url(../resources/icons/loading.gif) no-repeat center;
+   background-size: 16px;
+ }
+ /* luci */
+ .hidden {
+   display: none;
+ }
+ .left,
+ .left::before {
+   text-align: left !important;
+ }
+ .right,
+ .right::before {
+   text-align: right !important;
+ }
+ .center,
+ .center::before {
+   text-align: center !important;
+ }
+ .top {
+   align-self: flex-start !important;
+   vertical-align: top !important;
+ }
+ .bottom {
+   align-self: flex-end !important;
+   vertical-align: bottom !important;
+ }
+ .inline {
+   display: inline;
+ }
+ .cbi-page-actions {
+   padding-top: 1rem;
+   text-align: right;
+ }
+ .cbi-page-actions > form[method="post"] {
+   display: inline-block;
+ }
+ .th[data-type="button"],
+ .td[data-type="button"],
+ .th[data-type="fvalue"],
+ .td[data-type="fvalue"] {
+   flex: 1 1 2em;
+   text-align: center;
+ }
+ .ifacebadge {
+   display: inline-flex;
+   padding: 0.5rem 0.8rem;
+   border-bottom: thin solid #ccc;
+   background: #eee;
+   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ }
+ td > .ifacebadge,
+ .td > .ifacebadge {
+   font-size: 0.8rem;
+   background-color: #f0f0f0;
+ }
+ .ifacebadge > em,
+ .ifacebadge > img {
+   display: inline-block;
+   align-self: flex-start;
+   margin: 0 0.2rem;
+ }
+ .ifacebadge > img + img {
+   margin: 0 0.2rem 0 0;
+ }
+ .network-status-table {
+   display: flex;
+   flex-wrap: wrap;
+ }
+ .network-status-table .ifacebox {
+   flex-grow: 1;
+   margin: 0.5em;
+ }
+ .network-status-table .ifacebox-body {
+   display: flex;
+   flex-direction: column;
+   height: 100%;
+ }
+ .network-status-table .ifacebox-body > span {
+   flex: 10 10 auto;
+   height: 100%;
+ }
+ .network-status-table .ifacebox-body > div {
+   display: flex;
+   flex-wrap: wrap;
+ }
+ .network-status-table .ifacebox-body .ifacebadge {
+   align-items: center;
+   flex: 1 1 auto;
+   min-width: 220px;
+   margin: 0.5em 0em 0 0em;
+   padding: 0.5em;
+   background-color: #fff;
+ }
+ /* textarea */
+ .cbi-input-textarea {
+   font-family: monospace;
+   width: 100%;
+   min-height: 14rem;
+   padding: 0.8rem;
+   color: #000;
+ }
+ #syslog {
+   font-size: small;
+   line-height: 1.25;
+   overflow-y: hidden;
+   width: 100%;
+   min-height: 15rem;
+   padding: 1rem;
+   resize: none;
+   color: #eee;
+   border: 0;
+   border-radius: 0.375rem;
+   background-color: #242424;
+   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+ }
+ #syslog:focus {
+   outline: 0;
+ }
+ /* config changes */
+ .uci-change-list {
+   font-family: monospace;
+ }
+ .uci-change-list ins,
+ .uci-change-legend-label ins {
+   display: block;
+   padding: 2px;
+   text-decoration: none;
+   border: thin solid #0f0;
+   background-color: #cfc;
+ }
+ .uci-change-list del,
+ .uci-change-legend-label del {
+   font-style: normal;
+   display: block;
+   padding: 2px;
+   text-decoration: none;
+   border: thin solid #f00;
+   background-color: #fcc;
+ }
+ .uci-change-list var,
+ .uci-change-legend-label var {
+   font-style: normal;
+   display: block;
+   padding: 2px;
+   text-decoration: none;
+   border: thin solid #ccc;
+   background-color: #eee;
+ }
+ .uci-change-list var ins,
+ .uci-change-list var del {
+   font-style: normal;
+   padding: 0;
+   white-space: pre;
+   border: 0;
+ }
+ .uci-change-legend {
+   padding: 5px;
+ }
+ .uci-change-legend-label {
+   float: left;
+   width: 150px;
+ }
+ .uci-change-legend-label > ins,
+ .uci-change-legend-label > del,
+ .uci-change-legend-label > var {
+   display: block;
+   float: left;
+   width: 10px;
+   height: 10px;
+   margin-right: 4px;
+ }
+ .uci-change-legend-label var ins,
+ .uci-change-legend-label var del {
+   line-height: 0.4;
+   border: 0;
+ }
+ .uci-change-list var,
+ .uci-change-list del,
+ .uci-change-list ins {
+   padding: 0.5rem;
+ }
+ /* other fix */
+ #iwsvg,
+ #iwsvg2,
+ #bwsvg {
+   border: thin solid #d4d4d4 !important;
+ }
+ #iwsvg,
+ [data-page="admin-status-realtime-bandwidth"] #bwsvg {
+   border-top: 0 !important;
+ }
+ .ifacebox {
+   line-height: 1.25;
+   display: inline-flex;
+   flex-direction: column;
+   min-width: 100px;
+   border-bottom: thin solid #ccc;
+   background-color: #f9f9f9;
+   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
+ }
+ .ifacebox-head {
+   padding: 0.25em;
+   background: #eee;
+ }
+ .ifacebox-head.active {
+   background: #5e72e4;
+   background: var(--bar-bg);
+ }
+ .ifacebox-head.active * {
+   color: #fff;
+   color: var(--white);
+ }
+ .ifacebox-body {
+   padding: 0.5em 1rem;
+   line-height: 1.6em;
+ }
+ .cbi-image-button {
+   margin-left: 0.5rem;
+ }
+ .zonebadge {
+   display: inline-block;
+   padding: 0.2rem 0.5rem;
+ }
+ .zonebadge .ifacebadge {
+   margin: 0.1rem 0.2rem;
+   padding: 0.2rem 0.3rem;
+   border: thin solid #6c6c6c;
+ }
+ .zonebadge > input[type="text"] {
+   min-width: 10rem;
+   margin-top: 0.3rem;
+   padding: 0.16rem 1rem;
+ }
+ .zonebadge > em,
+ .zonebadge > strong {
+   display: inline-block;
+   margin: 0 0.2rem;
+ }
+ .cbi-value-field .cbi-input-checkbox,
+ .cbi-value-field .cbi-input-radio {
+   margin-top: 0.1rem;
+ }
+ .cbi-value-field > ul > li {
+   display: flex;
+ }
+ .cbi-value-field > ul > li > label {
+   margin-top: 0.5rem;
+ }
+ .cbi-value-field > ul > li .ifacebadge {
+   margin-top: -0.5rem;
+   margin-left: 0.4rem;
+   background-color: #eee;
+ }
+ .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
+   min-width: 7rem;
+ }
+ .cbi-section-create {
+   display: inline-flex;
+   align-items: center;
+   margin: 0.25rem 0 0.25rem 1rem;
+ }
+ .cbi-section-create > * {
+   margin: 0.5rem;
+ }
+ .cbi-section-remove {
+   padding: 0.5rem;
+ }
+ div.cbi-value var,
+ td.cbi-value-field var,
+ .td.cbi-value-field var {
+   font-style: italic;
+   color: #0069d6;
+ }
+ .cbi-optionals {
+   padding: 1rem 1rem 0 1rem;
+   border-top: thin solid #ccc;
+ }
+ .cbi-dropdown-container {
+   position: relative;
+ }
+ .cbi-tooltip-container,
+ span[data-tooltip],
+ span[data-tooltip] .label {
+   cursor: help !important;
+ }
+ .cbi-tooltip {
+   position: absolute;
+   z-index: 1000;
+   left: -1000px;
+   padding: 2px 5px;
+   transition: opacity 0.25s ease-out;
+   white-space: pre;
+   pointer-events: none;
+   opacity: 0;
+   border-radius: 3px;
+   background: #fff;
+   box-shadow: 0 0 2px #444;
+ }
+ .cbi-tooltip-container:hover .cbi-tooltip {
+   left: auto;
+   transition: opacity 0.25s ease-in;
+   opacity: 1;
+ }
+ .zonebadge .cbi-tooltip {
+   margin: -1.5rem 0 0 -0.5rem;
+   padding: 0.25rem;
+   background: inherit;
+ }
+ .zonebadge-empty {
+   color: #404040;
+   background: repeating-linear-gradient(45deg, rgba(204, 204, 204, 0.5), rgba(204, 204, 204, 0.5) 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
+ }
+ .zone-forwards {
+   display: flex;
+   min-width: 10rem;
+ }
+ .zone-forwards > * {
+   flex: 1 1 45%;
+ }
+ .zone-forwards > span {
+   flex-basis: 10%;
+   padding: 0 0.25rem;
+   text-align: center;
+ }
+ .zone-forwards .zone-src,
+ .zone-forwards .zone-dest {
+   display: flex;
+   flex-direction: column;
+ }
+ .label {
+   font-size: 0.8rem;
+   font-weight: bold;
+   padding: 0.3rem 0.8rem;
+   white-space: nowrap;
+   text-decoration: none;
+   text-transform: uppercase;
+   color: #fff !important;
+   border-radius: 3px;
+   background-color: #bfbfbf;
+   text-shadow: none;
+ }
+ label > input[type="checkbox"],
+ label > input[type="radio"] {
+   position: relative;
+   top: 0.4rem;
+   right: 0.2rem;
+   margin: 0;
+   vertical-align: bottom;
+ }
+ label[data-index][data-depends] {
+   padding-right: 2em;
+ }
+ .showSide {
+   display: none;
+ }
+ .darkMask {
+   position: fixed;
+   z-index: 99;
+   display: none;
+   width: 100%;
+   height: 100%;
+   content: "";
+   top: 0;
+   background-color: rgba(0, 0, 0, 0.56);
+ }
+ /* diagnostics */
+ #diag-rc-output > pre,
+ #command-rc-output > pre,
+ [data-page="admin-services-wol"] .notice code {
+   font-size: 1.2rem;
+   font-size-adjust: 0.35;
+   line-height: normal;
+   display: block;
+   overflow-y: hidden;
+   width: 100%;
+   padding: 8.5px;
+   white-space: pre;
+   color: #eee;
+   background-color: #101010;
+   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+ }
+ [data-page="admin-network-diagnostics"] .table {
+   box-shadow: none;
+ }
+ input[name="ping"],
+ input[name="traceroute"],
+ input[name="nslookup"] {
+   width: 80%;
+ }
+ /* fix Main Login */
+ .node-main-login .main {
+   top: 0;
+   height: 100% !important;
+ }
+ .node-main-login .main .main-left {
+   display: none;
+ }
+ .node-main-login .main .main-right {
+   width: 100%;
+ }
+ .node-main-login .main .main-right header {
+   background: none !important;
+   box-shadow: none !important;
+   display: none !important;
+ }
+ .node-main-login .main .main-right .login-bg {
+   display: block;
+   position: fixed;
+   width: 100%;
+   height: 100%;
+   left: 0px;
+   top: 0px;
+   background-size: cover;
+   background-color: #000;
+   background-position: top center;
+   transition: all 0.5s;
+ }
+ .node-main-login .main .main-right .login-bg.blur {
+   transform: scale(1.05);
+   -webkit-filter: blur(5px);
+   /* Chrome, Safari, Opera */
+   filter: blur(5px);
+ }
+ .node-main-login .main .main-right #maincontent {
+   height: 100%;
+   padding-top: 23vh;
+   margin-top: 0rem;
+   background-color: transparent !important;
+   text-align: center;
+ }
+ .node-main-login .main .main-right #maincontent .container {
+   display: inline-block;
+   padding: 1rem;
+   position: relative;
+   margin-top: 2rem !important;
+   background-color: var(--secondary) !important;
+   border-radius: 0.375rem;
+   box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
+   text-align: left;
+ }
+ .node-main-login .main .main-right #maincontent .container .alert-message.warning {
+   position: absolute;
+   color: #fff;
+   width: calc(100% - 2rem);
+   box-sizing: border-box;
+   margin-top: 8rem;
+   border-radius: 5px !important;
+   padding: 0.5rem 2rem;
+   text-align: center;
+   background-color: var(--purple) !important;
+ }
+ .node-main-login .main .main-right #maincontent .container .alert-message.warning p {
+   color: #fff;
+ }
+ .node-main-login .main .main-right #maincontent .container .alert-message.error {
+   position: absolute;
+   color: #fff;
+   width: calc(100% - 2rem);
+   background-color: #f0ad4e;
+   border-color: #eea236;
+   box-sizing: border-box;
+   margin-top: -7rem;
+   border-radius: 5px !important;
+   padding: 1rem 2rem 0.5rem 2rem;
+   text-align: center;
+ }
+ .node-main-login .main .main-right #maincontent .container .alert-message.error p {
+   color: #fff;
+ }
+ .node-main-login .main .main-right #maincontent .container .alert-message.error h4 {
+   font-size: 1rem;
+ }
+ .node-main-login .main .main-right #maincontent .container .alert-message.error .btn {
+   height: auto;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map h2 {
+   width: 120px;
+   height: 120px;
+   color: #fff;
+   text-align: center;
+   letter-spacing: 4px;
+   display: block;
+   margin: -80px auto 15px auto;
+   padding: 0;
+   text-indent: -500px;
+   overflow: hidden;
+   border-radius: 60px;
+   border: #fff 3px solid;
+   background-image: url(head-icon.jpg);
+   background-size: cover;
+   box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-map-descr {
+   text-align: center;
+   padding: 1rem;
+   color: #8898aa;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section {
+   padding: 0.5rem;
+   margin: 0 ;
+   background: none !important;
+   box-shadow: none !important;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node {
+   padding: 0;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value {
+   display: block;
+   padding: 0;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value * {
+   display: inline-block !important;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-title {
+   display: none !important;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field {
+   position: relative;
+   width: 20rem;
+   margin-bottom: 1em;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field input {
+   font-size: 1rem;
+   line-height: 1.5;
+   display: block;
+   width: 100%;
+   height: calc(2.75rem + 2px);
+   padding: 0.625rem 0.75rem;
+   transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+   color: #8898aa;
+   border: 0px solid #dee2e6;
+   border-radius: 0.25rem;
+   background-color: #fff;
+   background-clip: padding-box;
+   box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02);
+   box-sizing: border-box;
+   padding-left: 3em !important;
+   margin: 0;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field input:focus {
+   color: #8898aa;
+   outline: 0;
+   background-color: #fff;
+   box-shadow: 0 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(94, 114, 228, 0.1);
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field:before {
+   font-family: 'argon' !important;
+   font-style: normal;
+   font-weight: normal;
+   font-variant: normal;
+   text-transform: none;
+   line-height: 1;
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+   content: "\e971";
+   color: #adb5bd;
+   font-size: 1.5rem;
+   position: absolute;
+   z-index: 100;
+   left: 10px;
+   top: 10px;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value.cbi-value-last .cbi-value-field:before {
+   content: "\e910";
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-page-actions {
+   text-align: center;
+   padding-top: 0.5rem;
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-page-actions .cbi-button {
+   font-size: 1rem;
+   height: auto;
+   position: relative;
+   transition: all 0.15s ease;
+   letter-spacing: 0.2em;
+   text-transform: none;
+   padding: 0.375rem 1.25rem;
+   will-change: transform;
+   line-height: 1.5em;
+   border: thin solid var(--purple);
+   background-color: var(--purple);
+ }
+ .node-main-login .main .main-right #maincontent .container .cbi-page-actions .cbi-button.cbi-button-reset {
+   display: none !important;
+ }
+ .node-main-login .main .main-right #maincontent footer {
+   bottom: 0;
+   position: absolute;
+   width: 100%;
+   color: #fff;
+ }
+ .node-main-login .main .main-right #maincontent footer a {
+   color: #fff;
+ }
+ @media screen and (min-height: 585px) {
+   .node-main-login footer {
+     display: none;
+     position: absolute;
+     bottom: 0;
+     width: 100%;
+   }
+ }
+ /* fix status */
+ .node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2),
+ .node-status-processes > .main .table .tr .td:nth-child(3) {
+   white-space: normal;
+ }
+ /* fix system reboot */
+ [data-page="admin-system-reboot"] p {
+   padding-left: 0rem;
+   color: #fff;
+ }
+ [data-page="admin-system-reboot"] .cbi-button {
+   background: #fb6340 !important;
+ }
+ [data-page="admin-system-reboot"] p > span {
+   position: relative;
+   top: 0.1rem;
+   left: 1rem;
+ }
+ /* samba */
+ #cbi-samba [data-tab="template"] .cbi-value-field {
+   display: block;
+ }
+ #cbi-samba [data-tab="template"] .cbi-value-title {
+   width: auto;
+   padding-bottom: 0.6rem;
+ }
+ /* admin-system-admin-password */
+ [data-page="admin-system-admin"] .cbi-map h2,
+ [data-page="admin-system-admin-password"] .cbi-map h2,
+ [data-page="admin-system-admin"] .cbi-map .cbi-map-descr,
+ [data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr {
+   margin-left: 1.5rem;
+   color: #32325d;
+   color: var(--gray-dark);
+ }
+ /* software */
+ [data-page="admin-system-opkg"] h2 {
+   margin-left: 1.5rem;
+   color: #32325d;
+   color: var(--gray-dark);
+ }
+ .controls {
+   margin: 0.5em 1rem 1em 1rem !important;
+ }
+ .controls > * > .btn:not([aria-label$="page"]) {
+   flex-grow: initial !important;
+   margin-top: 0.25rem;
+ }
+ .controls > #pager > .btn[aria-label$="page"] {
+   font-size: 1.4rem;
+   font-weight: bold;
+ }
+ .controls > * > label {
+   margin-bottom: 0.2rem;
+ }
+ [data-page="admin-system-opkg"] div.btn {
+   line-height: 3;
+   display: inline;
+   padding: 0.3rem 0.6rem;
+ }
+ [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
+ [data-page="admin-system-opkg"] #maincontent > .container {
+   margin-top: 2rem;
+   padding-top: 0.1rem;
+ }
+ [data-page="admin-system-opkg"] #maincontent > .container {
+   margin: 2rem;
+   margin-bottom: 1rem;
+ }
+ .td.version,
+ .td.size {
+   white-space: normal !important;
+   word-break: break-word;
+ }
+ .cbi-tabmenu + .cbi-section {
+   margin-top: 0;
+ }
+ /* admin-system-crontab*/
+ [data-page="admin-system-crontab"] #view p {
+   color: #fff;
+   margin-bottom: 1rem;
+ }
+ /*admin-system-flash*/
+ [data-page="admin-system-flash"] .cbi-value {
+   padding: 0;
+ }
+ [data-page="admin-system-flash"] .cbi-section .cbi-section {
+   margin-top: 0;
+ }
+ [data-page="admin-system-flash"] .cbi-map-tabbed {
+   border-radius: 0.375rem;
+ }
+ [data-page="admin-system-flash"] legend {
+   display: block !important;
+   font-size: 1.2rem;
+   width: 100%;
+   display: block;
+   margin-bottom: 0;
+   padding: 1rem 0 1rem 1.5rem;
+   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+   line-height: 1.5;
+   margin-bottom: 0rem;
+   letter-spacing: 0.1rem;
+   color: #32325d;
+   font-weight: bold;
+ }
+ [data-page="admin-system-flash"] .cbi-section-descr {
+   font-weight: 600;
+   padding: 1rem 0 1rem 1.5rem;
+   color: #525f7f;
+ }
+ /* wireless overview */
+ #cbi-wireless > #wifi_assoclist_table > .tr {
+   box-shadow: inset 1px -1px 0 #ddd, inset -1px -1px 0 #ddd;
+ }
+ #cbi-wireless > #wifi_assoclist_table > .tr.placeholder > .td {
+   right: 33px;
+   bottom: 33px;
+   left: 33px;
+   border-top: thin solid #ddd !important;
+ }
+ #cbi-wireless > #wifi_assoclist_table > .tr.table-titles {
+   box-shadow: inset 1px 0 0 #ddd, inset -1px 0 0 #ddd;
+ }
+ #cbi-wireless > #wifi_assoclist_table > .tr.table-titles > .th {
+   border-bottom: thin solid #ddd;
+   box-shadow: 0 -1px 0 0 #ddd;
+ }
+ #wifi_assoclist_table > .tr > .td[data-title="RX Rate / TX Rate"] {
+   width: 23rem;
+ }
+ [data-page="admin-network-dhcp"] .cbi-value {
+   padding: 0;
+ }
+ [data-page="admin-network-dhcp"] [data-tab-active="true"] {
+   padding: 1rem 0 !important;
+ }
+ /* firewall */
+ #iptables {
+   margin: 0;
+ }
+ .Firewall form {
+   margin: 2rem 2rem 0 0;
+   padding: 0;
+   box-shadow: none;
+ }
+ #cbi-firewall-redirect table *,
+ #cbi-network-switch_vlan table *,
+ #cbi-firewall-zone table * {
+   font-size: small;
+ }
+ #cbi-firewall-redirect table input[type="text"],
+ #cbi-network-switch_vlan table input[type="text"],
+ #cbi-firewall-zone table input[type="text"] {
+   width: 5rem;
+ }
+ #cbi-firewall-redirect table select,
+ #cbi-network-switch_vlan table select,
+ #cbi-firewall-zone table select {
+   min-width: 3.5rem;
+ }
+ #cbi-network-switch_vlan .th,
+ #cbi-network-switch_vlan .td {
+   flex-basis: 12%;
+ }
+ #cbi-firewall-zone .table,
+ #cbi-network-switch_vlan .table {
+   display: block;
+ }
+ #cbi-firewall-zone .td,
+ #cbi-network-switch_vlan .td {
+   width: 100%;
+ }
+ [data-page="admin-network-firewall-custom"] #view p {
+   color: #fff;
+   margin-bottom: 1rem;
+ }
+ [data-page="admin-network-firewall-custom"] #view p textarea {
+   padding: 1rem;
+   border-radius: 0.375rem;
+ }
+ /* applyreboot fix */
+ #applyreboot-container {
+   margin: 2rem;
+ }
+ #applyreboot-section {
+   line-height: 300%;
+   margin: 2rem;
+ }
+ /* openvpn bug fix */
+ .OpenVPN a {
+   line-height: initial !important;
+ }
+ /* custom commands */
+ .commandbox {
+   width: 24% !important;
+   margin: 10px 0 0 10px !important;
+   padding: 0.5rem 1rem;
+   border-bottom: thin solid #ccc;
+   background: #eee;
+   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ }
+ .commandbox h3 {
+   line-height: normal !important;
+   overflow: hidden;
+   margin: 6px 0 !important;
+   white-space: nowrap;
+   text-overflow: ellipsis;
+ }
+ .commandbox div {
+   left: auto !important;
+ }
+ .commandbox code {
+   position: absolute;
+   overflow: hidden;
+   max-width: 60%;
+   margin-left: 4px;
+   padding: 2px 3px;
+   white-space: nowrap;
+   text-overflow: ellipsis;
+ }
+ .commandbox code:hover {
+   overflow-y: auto;
+   max-height: 50px;
+   white-space: normal;
+ }
+ .commandbox p:first-of-type {
+   margin-top: -6px;
+ }
+ .commandbox p:nth-of-type(2) {
+   margin-top: 2px;
+ }
+ [data-page^="admin-system-commands"] .panel-title,
+ [data-page^="command-cfg"] .mobile-hide,
+ [data-page^="command-cfg"] .showSide {
+   display: none;
+ }
+ #command-rc-output .alert-message {
+   line-height: 1.42857143;
+   position: absolute;
+   top: 40px;
+   right: 32px;
+   max-width: 40%;
+   margin: 0;
+   animation: anim-fade-in 1.5s forwards;
+   word-break: break-word;
+   opacity: 0;
+ }
+ @keyframes anim-fade-in {
+   100% {
+     opacity: 1;
+   }
+ }
+ /* other fix */
+ input[type="checkbox"] {
+   appearance: none !important;
+   -webkit-appearance: none !important;
+   border: 1px solid #dee2e6;
+   width: 16px !important;
+   height: 16px !important;
+   padding: 0;
+   cursor: pointer;
+   transition: all 0.2s;
+   margin: 1rem 0 0 0;
+ }
+ input[type="checkbox"]:checked {
+   border: 1px solid #5e72e4;
+   background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important;
+   background-color: #5e72e4;
+   background-size: 70%;
+   background-repeat: no-repeat;
+   background-position: center;
+ }
+ /* IE hacks */
+ @media all and (-ms-high-contrast: none) {
+   .main > .main-left > .nav > .slide > .menu::before {
+     top: 30.25%;
+   }
+   .main > .main-left > .nav > li:last-child::before {
+     top: 20%;
+   }
+   .showSide::before {
+     top: -12px;
+   }
+ }
+ @media screen and (max-width: 1600px) {
+   header > .fill > .container > #logo {
+     margin: 0 2.5rem 0 0.5rem;
+   }
+   .main-left {
+     width: calc(0% + 13rem);
+   }
+   .main-right {
+     width: calc(100% - 13rem);
+   }
+   .btn:not(button),
+   .cbi-button {
+     font-size: 0.8rem;
+     padding: 0.2rem 0.6rem;
+   }
+   .label {
+     padding: 0.2rem 0.6rem;
+   }
+   .cbi-value-title {
+     width: 15rem;
+     padding-right: 0.6rem;
+   }
+   .cbi-value-field .cbi-dropdown,
+   .cbi-value-field .cbi-input-select,
+   .cbi-value input[type="text"],
+   .cbi-value input[type="password"] {
+     min-width: 18rem;
+   }
+   #cbi-firewall-zone .cbi-input-select {
+     min-width: 9rem;
+   }
+   .cbi-input-textarea {
+     font-size: small;
+   }
+   .node-admin-status > .main fieldset li > a {
+     padding: 0.3rem 0.6rem;
+   }
+ }
+ @media screen and (max-width: 1366px) {
+   header > .fill > .container {
+     cursor: default;
+   }
+   .main-left {
+     width: calc(0% + 13rem);
+   }
+   .main-right {
+     width: calc(100% - 13rem);
+   }
+   .tabs > li > a,
+   .cbi-tabmenu > li > a {
+     padding: 0.2rem 0.5rem;
+   }
+   .panel-title {
+     font-size: 1.1rem;
+     padding-bottom: 1rem;
+   }
+   table {
+     font-size: 0.7rem !important;
+     width: 100% !important;
+   }
+   .table .cbi-input-text {
+     width: 100%;
+   }
+   .cbi-value-field .cbi-dropdown,
+   .cbi-value-field .cbi-input-select,
+   .cbi-value input[type="text"],
+   .cbi-value input[type="password"] {
+     min-width: 16rem;
+   }
+   #cbi-firewall-zone .cbi-input-select {
+     min-width: 4rem;
+   }
+   .main > .main-left > .nav > li,
+   .main > .main-left > .nav > li a,
+   .main > .main-left > .nav > .slide > .menu,
+   .main > .main-left > .nav > li > [data-title="Logout"] {
+     font-size: 0.9rem;
+   }
+   .main > .main-left > .nav > .slide > .slide-menu > li > a {
+     font-size: 0.7rem;
+   }
+   #modal_overlay {
+     top: 0rem;
+   }
+   [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table) {
+     display: block;
+   }
+   [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),
+   [data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),
+   [data-page="admin-network-hosts"] .table,
+   [data-page="admin-network-routes"] .table {
+     overflow-y: visible;
+   }
+   .commandbox {
+     width: 32% !important;
+   }
+   .btn:not(button),
+   .cbi-button {
+     font-size: 0.8rem;
+     padding: 0.2rem 0.6rem;
+   }
+ }
+ @media screen and (max-width: 1152px) {
+   header > .fill > .container > #logo {
+     display: none;
+   }
+   header > .fill > .container > .brand {
+     position: relative;
+   }
+   html,
+   .main {
+     overflow-y: visible;
+   }
+   .main > .loading > span {
+     top: 25%;
+   }
+   .main-left {
+     width: calc(0% + 13rem);
+   }
+   .main-right {
+     width: calc(100% - 13rem);
+   }
+   body:not(.logged-in) .showSide {
+     visibility: hidden;
+     width: 0;
+     margin: 0;
+   }
+   .node-main-login > .main .cbi-value-title {
+     text-align: left;
+   }
+   .cbi-value-title {
+     width: 12rem;
+     padding-right: 1rem;
+   }
+   .cbi-value-field .cbi-dropdown,
+   .cbi-value-field .cbi-input-select,
+   .cbi-value input[type="text"] {
+     width: 16rem;
+     min-width: 16rem;
+   }
+   /*.cbi-value input[type="password"],*/
+   .cbi-value input[name^="pw"],
+   .cbi-value input[data-update="change"]:nth-child(2) {
+     width: 13rem !important;
+     min-width: 13rem;
+   }
+   #diag-rc-output > pre,
+   #command-rc-output > pre,
+   [data-page="admin-services-wol"] .notice code {
+     font-size: 1rem;
+   }
+   .table {
+     display: block;
+   }
+   .Interfaces .table {
+     overflow-x: hidden;
+   }
+   #packages.table {
+     display: grid;
+   }
+   .tr {
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+   }
+   .Overview .table[width="100%"] > .tr {
+     flex-wrap: nowrap;
+   }
+   .tr.placeholder {
+     border-bottom: thin solid #ddd;
+   }
+   .tr.placeholder > .td,
+   #cbi-firewall .tr > .td,
+   #cbi-network .tr:nth-child(2) > .td,
+   .cbi-section #wifi_assoclist_table .tr > .td {
+     border-top: 0;
+   }
+   .th,
+   .td {
+     display: inline-block;
+     align-self: flex-start;
+     flex: 2 2 25%;
+     text-overflow: ellipsis;
+     word-wrap: break-word;
+   }
+   .td select,
+   .td input[type="text"] {
+     width: 100%;
+     word-wrap: normal;
+   }
+   .td [data-dynlist] > input,
+   .td input.cbi-input-password {
+     width: calc(100% - 1.5rem);
+   }
+   .td[data-type="button"],
+   .td[data-type="fvalue"] {
+     flex: 1 1 12.5%;
+     text-align: left;
+   }
+   .th.cbi-value-field,
+   .td.cbi-value-field,
+   .th.cbi-section-table-cell,
+   .td.cbi-section-table-cell {
+     flex-basis: auto;
+     padding-top: 1rem;
+   }
+   .cbi-section-table-row {
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+     justify-content: space-between;
+     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+   }
+   .td.cbi-value-field,
+   .cbi-section-table-cell {
+     display: inline-block;
+     flex: 10 10 auto;
+     flex-basis: 50%;
+     text-align: center;
+   }
+   .td.cbi-section-actions {
+     vertical-align: bottom;
+   }
+   .tr.table-titles,
+   .tr.cbi-section-table-titles,
+   .tr.cbi-section-table-descr {
+     display: none;
+   }
+   .tr[data-title]::before,
+   .tr.cbi-section-table-titles.named::before {
+     font-size: 0.9rem;
+     display: block;
+     flex: 1 1 100%;
+     border-bottom: thin solid rgba(0, 0, 0, 0.26);
+     background: #e9ecef;
+   }
+   .td[data-title],
+   [data-page^="admin-status-realtime"] .td[id] {
+     text-align: left;
+   }
+   .td[data-title]::before {
+     display: block;
+   }
+   .cbi-button + .cbi-button {
+     margin-left: 0;
+   }
+   .td.cbi-section-actions > * > *,
+   .td.cbi-section-actions > * > form > * {
+     margin: 2.1px 3px;
+   }
+   .Firewall form {
+     position: static !important;
+     margin: 0 0 2rem 0;
+     padding: 2rem;
+     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+   }
+   .Firewall form input {
+     width: 100% !important;
+     margin: 0;
+     margin-top: 1rem;
+   }
+   .Firewall .center,
+   .Firewall .center::before {
+     text-align: left !important;
+   }
+   .commandbox {
+     width: 100% !important;
+     margin-left: 0 !important;
+   }
+   .btn:not(button),
+   .cbi-button {
+     font-size: 0.8rem;
+     padding: 0.2rem 0.6rem;
+   }
+ }
+ @media screen and (max-width: 768px) {
+   body {
+     font-size: 0.8rem;
+   }
+   .cbi-progressbar::after {
+     font-size: 0.95em;
+     line-height: 1.5;
+   }
+   .main-left {
+     position: fixed;
+     z-index: 100;
+     width: 0;
+   }
+   .main-right {
+     width: 100%;
+   }
+   .showSide {
+     padding: 0.1rem;
+     position: relative;
+     z-index: 99;
+     display: inline-block !important;
+   }
+   .showSide::before {
+     font-family: 'argon' !important;
+     font-style: normal !important;
+     font-weight: normal !important;
+     font-variant: normal !important;
+     text-transform: none !important;
+     line-height: 1;
+     -webkit-font-smoothing: antialiased;
+     -moz-osx-font-smoothing: grayscale;
+     content: "\e20e";
+     font-size: 1.7rem;
+   }
+   header > .fill > .container > .brand {
+     display: inline-block;
+   }
+   .main > .main-left > .nav > .slide > .menu,
+   .main > .main-left > .nav > li > [data-title="Logout"] {
+     font-size: 1.2rem;
+   }
+   .main > .main-left > .nav > .slide > .slide-menu > li > a {
+     font-size: 0.8rem;
+   }
+   .cbi-section > div {
+     overflow-x: auto;
+   }
+ }
+ @media screen and (max-width: 600px) {
+   .mobile-hide {
+     display: none;
+   }
+   #maincontent > .container {
+     margin: 0 1rem 1rem 1rem;
+   }
+   .cbi-value-title {
+     text-align: left;
+   }
+   [data-page="admin-system-flash"] legend {
+     padding: 1rem 0 1rem 1rem;
+   }
+   [data-page="admin-system-flash"] .cbi-section-descr {
+     padding: 1rem 0 1rem 1rem;
+   }
+   [data-page="admin-system-flash"] .cbi-value {
+     padding: 0 1rem;
+   }
+   [data-page="admin-network-dhcp"] [data-tab-active="true"] {
+     padding: 1rem 1rem !important;
+   }
+   body {
+     overflow-x: hidden;
+   }
+   .node-main-login .main .main-right #maincontent .container .cbi-map .cbi-section .cbi-section-node .cbi-value .cbi-value-field {
+     width: 16rem;
+   }
+   .node-main-login footer {
+     display: none;
+   }
+ }
+ @media screen and (min-width: 600px) {
+   ::-webkit-scrollbar {
+     width: 10px;
+     height: 10px;
+   }
+   ::-webkit-scrollbar,
+   ::-webkit-scrollbar-corner {
+     background: transparent;
+   }
+   ::-webkit-scrollbar-thumb {
+     background: #9e9e9e;
+   }
+   ::-webkit-scrollbar-thumb:hover {
+     background: #757575;
+   }
+   ::-webkit-scrollbar-thumb:active {
+     background: #424242;
+   }
+ }
+ /*# sourceMappingURL=./cascade.css.map */
\ No newline at end of file