From 7ca7774364b699116a79e7c73e04069ac28e263e Mon Sep 17 00:00:00 2001
From: doushang <wsdosh@gmail.com>
Date: Mon, 9 Mar 2020 12:50:48 +0000
Subject: [PATCH] enable the new icon of docker

---
 htdocs/luci-static/argon/cascade.css  | 6179 +++++++++++++------------
 htdocs/luci-static/argon/cascade.less |    9 +
 2 files changed, 3102 insertions(+), 3086 deletions(-)

diff --git a/htdocs/luci-static/argon/cascade.css b/htdocs/luci-static/argon/cascade.css
index 8b9f9c4..b5975d2 100644
--- a/htdocs/luci-static/argon/cascade.css
+++ b/htdocs/luci-static/argon/cascade.css
@@ -1,3087 +1,3094 @@
-/**
- *  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";
-}
-.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: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;
-  }
-}
+/**
+ *  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
diff --git a/htdocs/luci-static/argon/cascade.less b/htdocs/luci-static/argon/cascade.less
index 3e77071..3ca7cac 100644
--- a/htdocs/luci-static/argon/cascade.less
+++ b/htdocs/luci-static/argon/cascade.less
@@ -160,6 +160,10 @@
     content: "\f059";
 }
 
+.icon-docker:before {
+    content: "\e911";
+}
+
 
 .sk-folding-cube {
     position: absolute;
@@ -890,6 +894,11 @@ header {
                         color: #8965e0;
                     }
 
+                    .menu[data-title=docker]:before {
+                        content: "\e911";
+                        color: #6699ff;
+                    }
+
                     .menu[data-title=Bandwidth_Monitor]:before {
                         content: "\e90d";
                         color: #2dce89;