From bc37b9437315b041080536d1f1dc988275732b22 Mon Sep 17 00:00:00 2001
From: Chandika Nurdiansyah <chandika7d@gmail.com>
Date: Wed, 1 Feb 2023 18:40:53 +0700
Subject: [PATCH] update

---
 luasrc/app.js        |   42 +-
 luasrc/gaya/gaya.css | 5243 +++++++++++++++++++++---------------------
 template/header.htm  |    2 +
 3 files changed, 2666 insertions(+), 2621 deletions(-)

diff --git a/luasrc/app.js b/luasrc/app.js
index f79fe42..6d4a69c 100644
--- a/luasrc/app.js
+++ b/luasrc/app.js
@@ -1,13 +1,35 @@
-
-(function() {
+(function () {
     // your page initialization code here
     // the DOM will be available here
-
-    const toggler = document.querySelector(".toggler")
-    console.log(toggler)
-    toggler.addEventListener("click", function(e){
-        var element = document.querySelector(".navbar");
+  
+    const toggler = document.querySelector(".toggler");
+    console.log(toggler);
+    toggler.addEventListener(
+      "click",
+      function (e) {
+        const element = document.querySelector(".navbar");
         element.classList.toggle("active");
-    }, false)
-    
- })();
\ No newline at end of file
+      },
+      false
+    );
+  
+    const isDark = localStorage.getItem("isDark");
+    if (isDark == 1) {
+      const element = document.querySelector("body");
+      element.classList.add("dark");
+    }
+    const themetoggler = document.querySelector(".themetoggler");
+    themetoggler.addEventListener(
+      "click",
+      function (e) {
+        e.preventDefault();
+        const element = document.querySelector("body");
+        element.classList.toggle("dark");
+  
+        const isDark = localStorage.getItem("isDark");
+        localStorage.setItem("isDark", isDark == 1 ? 0 : 1);
+      },
+      false
+    );
+  })();
+  
\ No newline at end of file
diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css
index fd6a4f2..5f6cab1 100644
--- a/luasrc/gaya/gaya.css
+++ b/luasrc/gaya/gaya.css
@@ -1,2611 +1,2632 @@
-/* Base */
-:root {
-  --main-color: #09c;
-  --header-bg: rgb(255, 255, 255);
-  --header-color: rgb(10, 10, 10);
-  --bar-bg: #5bc0de;
-  --menu-bg-color: #fff;
-  --menu-color: #5f6368;
-  --menu-color-hover: #202124;
-  --main-menu-color: #202124;
-  --submenu-bg-hover: #d4d4d4;
-  --submenu-bg-hover-active: #09c;
-  --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif,
-    "Helvetica Neue", Helvetica, "Hiragino Sans GB";
-}
-.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;
-  text-align: center;
-  vertical-align: middle;
-  padding: 0.5em;
-}
-.th {
-  font-weight: 700;
-}
-.tr.placeholder {
-  height: 4em;
-}
-.tr.placeholder > .td {
-  line-height: 3;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  text-align: center !important;
-  background: inherit;
-}
-.td[width="33%"] {
-  padding: 1.1em;
-}
-.table[width="33%"],
-.th[width="33%"],
-.td[width="33%"] {
-  width: 33%;
-}
-.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;
-}
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: inherit;
-  font-weight: 400;
-  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: rgb(54 70 67 / 0.05);
-}
-html,
-body {
-  font-family: var(--font-body);
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-select {
-  color: #555;
-  border: thin solid #ccc;
-  background-color: #fff;
-  background-image: none;
-  padding: 0.36rem 0.8rem;
-}
-.btn,
-button,
-select,
-input,
-.cbi-dropdown {
-  height: 1.8rem;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.26);
-  border-radius: 0;
-  outline: 0;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: none;
-  padding: 0;
-}
-select,
-.cbi-dropdown {
-  width: inherit;
-  cursor: default;
-}
-select:not([multiple="multiple"]):focus,
-input:not(.cbi-button):focus,
-.cbi-dropdown:focus {
-  border-color: var(--main-color);
-}
-.cbi-dropdown,
-select[multiple="multiple"] {
-  height: auto;
-}
-pre {
-  overflow: auto;
-}
-code {
-  font-size: 1rem;
-  font-size-adjust: 0.35;
-  color: #101010;
-  border-radius: 0px;
-  background: #ddd;
-  padding: 1px 3px;
-}
-abbr {
-  cursor: help;
-  text-decoration: underline;
-  color: #005470;
-}
-hr {
-  opacity: 0.1;
-  border-color: #eee;
-  margin: 1rem 0;
-}
-/* End Base */
-
-/* Header */
-header,
-.main {
-  position: absolute;
-  width: 100%;
-}
-header {
-  position: fixed;
-  z-index: 2000;
-  float: left;
-  height: 4rem;
-  transition: box-shadow 0.2s;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
-  color: var(--header-color);
-  background: var(--header-bg);
-}
-
-header > .fill > .container {
-  margin-top: 0.5rem;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding: 0.5rem 1rem 0;
-}
-header > .fill > .container > #logo {
-  margin: 0 3.5rem 0 1.5rem;
-}
-header > .fill > .container > #logo > img {
-  width: calc(0% + 10rem);
-  margin-top: -0.1rem;
-}
-header > .fill > .container > .brand {
-  font-size: 1.4rem;
-  position: absolute;
-  cursor: default;
-  vertical-align: text-bottom;
-  text-decoration: none;
-  color: var(--header-color);
-}
-header > .fill > .container > .status {
-  position: absolute;
-  top: 25%;
-  right: 1em;
-  float: right;
-}
-header > .fill > .container > .status > * {
-  position: relative;
-  top: 0.2rem;
-  float: left;
-  margin-left: 0.3rem;
-  cursor: pointer;
-}
-/* End Header */
-
-/* Footer */
-footer {
-  font-size: 0.8rem;
-  overflow: hidden;
-  text-align: right;
-  white-space: nowrap;
-  color: #aaa;
-  text-shadow: 0 0 2px #bbb;
-  padding: 1rem;
-}
-footer > a {
-  text-decoration: none;
-  color: #aaa;
-}
-small {
-  font-size: 90%;
-  line-height: 1.42857143;
-  white-space: normal;
-}
-/* End Footer */
-
-/* Navbar */
-@media screen and (min-width: 720px) {
-  .navbar {
-    position: fixed;
-    bottom: 50%;
-    transform: translateY(50%);
-    transition-duration: 200ms;
-    right: 30px;
-    border-top: var(--navBorder);
-    text-align: center;
-    background-color: #ffff;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    box-shadow: 0 0 10px 0px #0000002d;
-    box-sizing: content-box;
-  }
-  .navbar--hidden {
-    transform: translateY(50px);
-    box-shadow: none;
-  }
-
-  .navbar .toggler {
-    transition-duration: 100ms;
-    position: absolute;
-    background: white;
-    box-shadow: 0 0 10px 0 #0000000f;
-    transform: translateY(50%);
-    bottom: 50%;
-    right: calc(100% + 10px);
-    width: 32px;
-    height: 32px;
-    padding: 8px;
-    border-radius: 100%;
-    content: "";
-    box-sizing: border-box;
-    cursor: pointer;
-  }
-  .navbar .toggler img {
-    transform: rotate(270deg);
-  }
-
-  .navbar .dropdown {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    width: 64px;
-    padding: 0.25rem;
-  }
-
-  .navbar .dropdown a {
-    display: block;
-    text-align: center;
-    padding: 8px;
-    text-decoration: none;
-    max-width: 100px;
-    width: 100%;
-  }
-
-  .navbar .dropdown a img {
-    width: 100%;
-  }
-
-  .navbar.active {
-    right: -64px;
-  }
-
-  .navbar.active .toggler {
-    right: calc(100% + 10px);
-  }
-  .navbar.active .toggler img {
-    transform: rotate(90deg);
-  }
-}
-
-@media screen and (max-width: 720px) {
-  .navbar {
-    overflow: hidden;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    transition: transform 0.5s;
-    border-top: var(--navBorder);
-    text-align: center;
-    height: calc(50px + constant(safe-area-inset-bottom));
-    height: calc(50px + env(safe-area-inset-bottom));
-    background-color: #ffff;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-  }
-  .navbar--hidden {
-    transform: translateY(50px);
-    box-shadow: none;
-  }
-  .navbar a {
-    float: left;
-    text-align: center;
-    padding: 8px 0;
-    width: 20%;
-    text-decoration: none;
-    max-width: 100px;
-  }
-
-  .navbar a img {
-    width: 28px;
-  }
-}
-/* End Navbar */
-
-.main {
-  position: relative;
-  top: 4rem;
-  bottom: 0;
-  overflow-y: auto;
-  height: calc(100% - 4rem);
-}
-.main > .loading {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  opacity: 1;
-  visibility: visible;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  background-color: rgb(240, 240, 240);
-  transition: visibility 400ms, opacity 400ms;
-}
-.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;
-}
-
-.cbi-map {
-  margin-top: 10px;
-}
-
-#cbi-shadowsocksr .cbi-map-descr {
-  display: none;
-}
-
-.main-right {
-  float: right;
-  width: calc(100% - 16rem);
-  height: 100%;
-}
-.nowrap:not(.td) {
-  white-space: nowrap;
-}
-[disabled="disabled"] {
-  pointer-events: none;
-}
-
-/* Sidebar */
-.main > .main-left {
-  position: fixed;
-  top: 3.5rem;
-  float: left;
-  overflow-x: auto;
-  width: calc(0% + 16rem);
-  height: calc(100% - 4rem);
-  background-color: var(--menu-bg-color);
-  transition: visibility 400ms, width 400ms;
-}
-.main > .main-left > .nav {
-  padding: 0.5rem 0.5rem 2rem;
-}
-
-.main > .main-left > .nav > li {
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.main > .main-left > .nav > li:last-child {
-  display: flex;
-  margin: 2rem 0 1rem;
-  padding: 0 0 0 2rem;
-}
-.main > .main-left > .nav > li a {
-  display: block;
-  color: var(--menu-color);
-}
-.main > .main-left > .nav > li.slide.active {
-  background-color: unset;
-}
-.main > .main-left > .nav > .slide {
-  padding: 0;
-}
-.main > .main-left > .nav > .slide > .menu,
-.main > .main-left > .nav > li > [data-title="Logout"],
-.main > .main-left > .nav > li > [data-title="Dashboard"] {
-  font-size: 1rem;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  text-decoration: none;
-  color: var(--main-menu-color);
-  padding: 0.5rem 1rem;
-  transition-duration: 200ms;
-  margin-bottom: 5px;
-}
-.main > .main-left > .nav > .slide > .menu::before {
-  position: absolute;
-  right: 17px;
-  width: 16px;
-  height: 16px;
-  content: "";
-  background: url(./icons/arrow.svg) no-repeat;
-}
-.main > .main-left > .nav > .slide > .menu.active::before {
-  transform: rotate(-180deg);
-}
-/* End Sidebar */
-
-.modemenu-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  color: var(--header-color);
-  background: var(--header-bg);
-  transition: box-shadow 0.2s;
-  box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
-  padding: 0.5rem;
-}
-#modemenu {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin: 0.25rem;
-}
-#modemenu > li.divider {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  border: 0.5rem solid var(--submenu-bg-hover);
-  border-left: 1px solid var(--submenu-bg-hover);
-  border-right: 1px solid var(--submenu-bg-hover);
-  border-radius: 1rem;
-}
-.danger {
-  background-color: #ff7d60 !important;
-}
-.warning {
-  background-color: #f0e68c !important;
-}
-.success {
-  background-color: #5cb85c !important;
-}
-.error {
-  color: red;
-}
-.alert,
-.alert-message {
-  font-weight: 700;
-  margin-bottom: 1em;
-  border: 0;
-  border-radius: 0 !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(173, 31, 31, 0.1);
-  padding: 1rem;
-}
-.alert-message > h4 {
-  font-size: 110%;
-  font-weight: 700;
-}
-.alert-message > * {
-  margin: 0.5rem 0;
-}
-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 > .nav > li:last-child::before {
-  position: absolute;
-  top:50%;
-  transform: translateY(-50%);
-  left: 14px;
-  width: 24px;
-  height: 24px;
-  content: url(./icons/logout.svg);
-}
-.main > .main-left > .nav > .slide:hover {
-  background: none;
-}
-.main > .main-left > .nav > .slide > .slide-menu > li > a {
-  white-space: nowrap;
-  text-decoration: none;
-  padding: 0.4rem 2rem;
-}
-.main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a {
-  color: var(--menu-color-hover);
-}
-.main > .main-left > .nav > .slide > .slide-menu > .active:hover {
-  background-color: var(--main-color);
-}
-.main > .main-left > .nav > .slide > .menu,
-.main > .main-left > .nav > .slide > .slide-menu > li,
-.main > .main-left > .nav > li:last-child {
-  position: relative;
-  overflow: hidden;
-  transform: translate3d(0, 0, 0);
-}
-.main > .main-left > .nav > .slide > .menu::after,
-.main > .main-left > .nav > .slide > .slide-menu > li::after,
-.main > .main-left > .nav > li:last-child::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  content: "";
-  transition: transform 0.5s, opacity 1s;
-  transform: scale(10, 10);
-  pointer-events: none;
-  opacity: 0;
-  background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
-  background-repeat: no-repeat;
-  background-position: 50%;
-}
-.main > .main-left > .nav > .slide > .menu:active::after,
-.main > .main-left > .nav > .slide > .slide-menu > li:active::after,
-.main > .main-left > .nav > li:last-child:active::after {
-  transition: 0s;
-  transform: scale(0, 0);
-  opacity: 0.2;
-}
-#maincontent > .container {
-  margin: 0 2rem 1rem;
-}
-ul {
-  line-height: normal;
-}
-li {
-  list-style-type: none;
-}
-h1 {
-  font-size: 2rem;
-  padding-bottom: 10px;
-  border-bottom: thin solid #eee;
-}
-h2 {
-  font-size: 1.8rem;
-  padding-bottom: 10px;
-  border-bottom: thin solid #eee;
-  margin: 2rem 0 0;
-}
-h3 {
-  font-size: 1.4rem;
-  padding-bottom: 10px;
-  margin: 2rem 0 0;
-}
-h4 {
-  font-size: 1.2rem;
-  padding-bottom: 10px;
-  margin: 2rem 0 0;
-}
-h5 {
-  font-size: 1rem;
-  padding-bottom: 10px;
-  margin: 2rem 0 0;
-}
-.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: 400;
-  font-style: normal;
-  line-height: normal;
-  min-width: inherit;
-  border: 0;
-  border-radius: 0;
-  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);
-  margin: 1rem 0 0;
-  padding: 2rem;
-}
-.cbi-modal .cbi-section,
-.cbi-section .cbi-section {
-  box-shadow: none;
-  padding: 0;
-}
-.cbi-modal .cbi-tabmenu {
-  margin-left: 0;
-}
-.cbi-map-descr,
-.cbi-section-descr {
-  font-size: small;
-  line-height: 1.42857143;
-  color: #999;
-  padding: 0.5rem;
-}
-.cbi-section > legend {
-  display: none !important;
-}
-fieldset > fieldset,
-.cbi-section > .cbi-section {
-  border: 0;
-  box-shadow: none;
-  margin: 0;
-  padding: 0;
-}
-.cbi-section > h3:first-child,
-.panel-title {
-  font-size: 1.4rem;
-  line-height: 1;
-  display: block;
-  width: 100%;
-  padding-bottom: 1rem;
-  color: #404040;
-  border-bottom: thin solid #eee;
-  margin: 0 0 0.5rem;
-}
-.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%;
-  box-shadow: 0 0 0 1px rgb(255, 255, 255);
-}
-.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 rgb(255, 255, 255);
-}
-.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 [data-dynlist] > input,
-.cbi-section-table-row > .cbi-value-field input.cbi-input-password {
-  width: calc(100% - 1.5rem);
-}
-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;
-}
-.btn,
-.cbi-button,
-.item::after {
-  font-size: 0.8rem;
-  display: inline-block;
-  width: auto !important;
-  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;
-  padding: 0 0.8rem;
-}
-.cbi-button-up,
-.cbi-button-down {
-  font-size: 1.2rem;
-  display: inline-block;
-  min-width: 0;
-  color: transparent !important;
-  background: url(./icons/arrow.svg) no-repeat center;
-  background-size: 12px 20px;
-  padding: 0.2rem 0.3rem;
-}
-.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;
-}
-.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: 700;
-  border: thin solid #bfbfbf;
-  background-color: #d4d4d4;
-}
-.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: 400;
-  color: #fff;
-  border: thin solid #2e6da4;
-  background-color: #337ab7;
-}
-.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: 400;
-  color: #fff;
-  background-color: #5bdede;
-}
-.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: 400;
-  color: #fff;
-  border: thin solid #d43f3a;
-  background-color: #d9534f;
-}
-.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: 400;
-  color: #fff;
-  border: thin solid #eea236;
-  background-color: #f0ad4e;
-}
-.cbi-button-success,
-.cbi-button-download,
-.cbi-button[name="backup"],
-.cbi-button[value="Download"],
-.cbi-button[value="Save mtdblock"] {
-  font-weight: 400;
-  color: #fff;
-  border: thin solid #4cae4c;
-  background-color: #5cb85c;
-}
-.a-to-btn {
-  text-decoration: none;
-}
-.cbi-value-field .cbi-button-add {
-  font-weight: 700;
-  margin: 9px 0 4px 3px;
-  padding: 1px 6px;
-}
-.tabs {
-  padding-left: 0.5rem;
-  background-color: #fff;
-  margin: 0 -2rem;
-}
-.tabs > li,
-.cbi-tabmenu > li {
-  display: inline-block;
-  cursor: pointer;
-  padding: 0.55rem 0;
-}
-.tabs > li {
-  padding-bottom: 0.4rem;
-  border-bottom: 0.2rem solid transparent;
-}
-.tabs > li[class~="active"],
-.tabs > li:hover {
-  border-bottom-color: var(--main-color);
-}
-.tabs > li:hover {
-  cursor: pointer;
-  border-bottom-color: #c9c9c9;
-}
-.tabs > li > a,
-.cbi-tabmenu > li > a {
-  text-decoration: none;
-  color: #404040;
-  padding: 0.6rem 0.9rem;
-}
-.tabs > li[class~="active"] > a {
-  color: var(--main-color);
-}
-.cbi-tabmenu {
-  border: thin solid #d4d4d4;
-  border-bottom: 0;
-  background-color: #d4d4d4;
-}
-.cbi-tabmenu > li:hover {
-  background-color: #f1f1f1;
-}
-.cbi-tabmenu > li[class~="cbi-tab"] {
-  background-color: #fff;
-}
-[data-tab-title] {
-  overflow: hidden;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-  padding: 0rem 1rem !important;
-}
-[data-tab-active="true"] {
-  overflow: visible;
-  height: auto;
-  opacity: 1;
-  transition: opacity 0.25s ease-in;
-  margin: inherit !important;
-}
-.cbi-section-node-tabbed {
-  margin-top: 0;
-  border: thin solid #d4d4d4;
-  border-top: 0;
-  padding: 0;
-}
-.cbi-value-field,
-.cbi-value-description {
-  line-height: 1.25;
-  display: table-cell;
-}
-.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.35rem;
-  padding-right: 2rem;
-  text-align: right;
-  word-wrap: break-word;
-}
-.cbi-value {
-  display: inline-block;
-  width: 100%;
-  padding: 0.35rem 1rem 0.2rem;
-}
-.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: 25rem;
-}
-#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: red;
-  border-bottom-color: red;
-}
-.cbi-section-error {
-  font-weight: 700;
-  line-height: 1.42857143;
-  border: thin solid red;
-  border-radius: 3px;
-  background-color: #fce6e6;
-  margin: 18px;
-  padding: 6px;
-}
-.cbi-section-error ul {
-  margin: 0 0 0 20px;
-}
-.cbi-section-error ul li {
-  font-weight: 700;
-  color: red;
-}
-.td[data-title]::before {
-  font-weight: 700;
-  display: none;
-  content: attr(data-title) ":\20";
-  text-align: left;
-  white-space: nowrap;
-  padding: 0.25rem 0;
-}
-.tr[data-title]::before,
-.tr.cbi-section-table-titles.named::before {
-  font-weight: 700;
-  display: table-cell;
-  align-self: center;
-  flex: 1 1 5%;
-  content: attr(data-title) "\20";
-  text-align: center;
-  vertical-align: middle;
-  white-space: normal;
-  word-wrap: break-word;
-  padding: 0.25rem;
-}
-.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;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-.td.cbi-section-actions > * {
-  display: inline-flex;
-}
-.td.cbi-section-actions > button {
-  display: block;
-}
-.td.cbi-section-actions > * > *,
-.td.cbi-section-actions > * > form > * {
-  margin: 0 5px;
-}
-.td.cbi-section-actions > * > form {
-  display: inline-flex;
-  margin: 0;
-}
-.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;
-  pointer-events: none;
-  color: #666;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.26);
-  outline: 0;
-  padding: 0.5em 0.25em 0.25em 0;
-}
-.cbi-dynlist[name="sshkeys"] > .item {
-  max-width: none;
-}
-.cbi-dynlist > .item::after {
-  font-weight: 700;
-  position: absolute;
-  right: -2em;
-  bottom: 0;
-  display: inline-flex;
-  min-height: 17px;
-  content: "\00D7";
-  pointer-events: auto;
-  color: #fff;
-  border: thin solid #d43f3a;
-  background-color: #d9534f;
-  padding: 0 6px;
-}
-.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;
-}
-.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%;
-  list-style: none;
-  outline: 0;
-  margin: 0 !important;
-  padding: 0;
-}
-.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;
-  cursor: default;
-  text-align: center;
-  outline: 0;
-  padding: 0 0.25em;
-}
-.cbi-dropdown.btn {
-  min-height: 1.8rem;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-right: 0px;
-}
-.cbi-dropdown.btn > .open {
-  font-size: 0.8rem;
-  margin: 0 5px;
-  padding: 0px;
-}
-.cbi-dropdown.btn > div {
-  margin: 0px;
-}
-.cbi-dropdown > .more,
-.cbi-dropdown > ul > li[placeholder] {
-  font-weight: 700;
-  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;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 0.25em;
-}
-.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;
-  pointer-events: none;
-  margin: 0;
-  padding: 0;
-}
-.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 > 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[open] > ul.dropdown > li {
-  border-bottom: thin solid #ccc;
-}
-.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[disabled] {
-  pointer-events: none;
-  opacity: 0.6;
-}
-.cbi-dropdown[open] .zonebadge {
-  width: auto;
-}
-.cbi-progressbar {
-  border-radius: 15px;
-  overflow: hidden;
-  position: relative;
-  min-width: 170px;
-  height: 30px;
-  border: thin solid #999;
-  background: #eee;
-  margin: 6px 0;
-}
-.cbi-progressbar > div {
-  width: 0;
-  height: 100%;
-  transition: width 0.25s ease-in;
-  background: var(--bar-bg);
-}
-.cbi-progressbar::after {
-  font-family: monospace;
-  font-size: 1.2em;
-  font-weight: 700;
-  font-size-adjust: 0.38;
-  line-height: normal;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 0;
-  left: 0;
-  overflow: hidden;
-  content: attr(title);
-  text-align: center;
-  white-space: pre;
-  text-overflow: ellipsis;
-  text-shadow: 0 0 2px #eee;
-}
-#modal_overlay {
-  position: fixed;
-  z-index: 900;
-  top: 4rem;
-  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;
-  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);
-  margin: 5em auto;
-  padding: 1em;
-}
-.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;
-  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);
-  padding: 8.5px;
-}
-.modal > h4 {
-  margin: 0.5em 0;
-}
-.modal ul {
-  margin-left: 2.2em;
-}
-.modal li {
-  list-style-type: square;
-  color: gray;
-}
-.modal p {
-  padding-left: 0.25rem;
-  word-break: break-word;
-}
-.modal .label {
-  font-size: 0.6rem;
-  font-weight: 400;
-  cursor: default;
-  border-radius: 0;
-  padding: 0.1rem 0.3rem 0;
-}
-.modal .label.warning {
-  background-color: #f0ad4e !important;
-}
-.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;
-}
-.left,
-.left::before {
-  text-align: left !important;
-}
-.right,
-.right::before {
-  text-align: right !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;
-  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);
-  padding: 0.5rem 0.8rem;
-}
-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 .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 .ifacebadge {
-  align-items: center;
-  flex: 1 1 auto;
-  min-width: 220px;
-  background-color: #fff;
-  margin: 0.5em 0.25em 0;
-  padding: 0.5em;
-}
-.cbi-input-textarea {
-  font-family: monospace;
-  width: 100%;
-  min-height: 14rem;
-  color: #000;
-  padding: 0.8rem;
-}
-#syslog {
-  font-size: small;
-  overflow-y: hidden;
-  width: 100%;
-  min-height: 15rem;
-  resize: none;
-  color: #eee;
-  border: 0;
-  border-radius: 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);
-  padding: 1rem;
-}
-#syslog:focus {
-  outline: 0;
-}
-.uci-change-list {
-  font-family: monospace;
-}
-.uci-change-list ins,
-.uci-change-legend-label ins {
-  display: block;
-  text-decoration: none;
-  border: thin solid #0f0;
-  background-color: #cfc;
-  padding: 2px;
-}
-.uci-change-list del,
-.uci-change-legend-label del {
-  font-style: normal;
-  display: block;
-  text-decoration: none;
-  border: thin solid red;
-  background-color: #fcc;
-  padding: 2px;
-}
-.uci-change-list var,
-.uci-change-legend-label var {
-  font-style: normal;
-  display: block;
-  text-decoration: none;
-  border: thin solid #ccc;
-  background-color: #eee;
-  padding: 2px;
-}
-.uci-change-list var ins,
-.uci-change-list var del {
-  font-style: normal;
-  white-space: pre;
-  border: 0;
-  padding: 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;
-}
-#iwsvg,
-#iwsvg2,
-#bwsvg {
-  border: thin solid #d4d4d4 !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 {
-  background: #eee;
-  padding: 0.25em;
-}
-.ifacebox-head.active {
-  background: var(--bar-bg);
-}
-.ifacebox-body {
-  padding: 0.25em;
-}
-.cbi-image-button {
-  margin-left: 0.5rem;
-}
-.zonebadge {
-  display: inline-block;
-  padding: 0.2rem 0.5rem;
-}
-.zonebadge .ifacebadge {
-  border: thin solid #6c6c6c;
-  margin: 0.1rem 0.2rem;
-  padding: 0.2rem 0.3rem;
-}
-.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 .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.5rem -3px;
-}
-.cbi-section-create > * {
-  margin: 0.5rem;
-}
-div.cbi-value var,
-td.cbi-value-field var,
-.td.cbi-value-field var {
-  font-style: italic;
-  color: #0069d6;
-}
-.cbi-optionals {
-  border-top: thin solid #ccc;
-  padding: 1rem 1rem 0;
-}
-.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;
-  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;
-  padding: 2px 5px;
-}
-.cbi-tooltip-container:hover .cbi-tooltip {
-  left: auto;
-  transition: opacity 0.25s ease-in;
-  opacity: 1;
-}
-.zonebadge .cbi-tooltip {
-  background: inherit;
-  margin: -1.5rem 0 0 -0.5rem;
-  padding: 0.25rem;
-}
-.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%;
-  text-align: center;
-  padding: 0 0.25rem;
-}
-.zone-forwards .zone-src,
-.zone-forwards .zone-dest {
-  display: flex;
-  flex-direction: column;
-}
-label > input[type="checkbox"],
-label > input[type="radio"] {
-  position: relative;
-  top: 0.4rem;
-  right: 0.2rem;
-  vertical-align: bottom;
-  margin: 0;
-}
-label[data-index][data-depends] {
-  padding-right: 2em;
-}
-.darkMask {
-  position: fixed;
-  z-index: 99;
-  width: 100%;
-  height: 100%;
-  content: "";
-  background-color: rgba(151, 151, 151, 0.56);
-  transition: opacity 400ms, visibility 400ms;
-  visibility: hidden;
-  opacity: 0;
-}
-#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%;
-  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);
-  padding: 8.5px;
-}
-input[name="ping"],
-input[name="traceroute"],
-input[name="nslookup"] {
-  width: 80%;
-}
-.node-main-login > .main fieldset {
-  display: inline;
-  overflow: hidden;
-  margin-bottom: 1rem;
-  border: 0;
-  background: none;
-  box-shadow: none;
-  padding: 0.5rem;
-}
-.node-main-login > .main .cbi-value-title {
-  width: 9.5rem;
-}
-.node-main-login > .main #maincontent {
-  text-align: center;
-}
-.node-main-login > .main .container {
-  display: inline-block;
-  margin-top: 2rem !important;
-  text-align: left;
-  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);
-  padding: 1rem 3.5rem 2rem;
-}
-.node-main-login > .main .cbi-value > * {
-  display: inline-block !important;
-}
-.node-main-login > .main .cbi-input-text {
-  width: 100% !important;
-  min-width: 15rem;
-}
-.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;
-}
-[data-page="admin-system-reboot"] p {
-  padding-left: 2rem;
-}
-[data-page="admin-system-reboot"] p > span {
-  position: relative;
-  top: 0.1rem;
-  left: 1rem;
-}
-#cbi-samba [data-tab="template"] .cbi-value-title {
-  width: auto;
-  padding-bottom: 0.6rem;
-}
-.controls > * > .btn:not([aria-label$="page"]) {
-  flex-grow: initial !important;
-  margin-top: 0.1rem;
-}
-.controls > #pager > .btn[aria-label$="page"] {
-  font-size: 1.4rem;
-  font-weight: 700;
-}
-.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 2rem 1rem;
-}
-.td.version,
-.td.size {
-  white-space: normal !important;
-  word-break: break-word;
-}
-.cbi-tabmenu + .cbi-section {
-  margin-top: 0;
-}
-#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;
-}
-#iptables {
-  margin: 0;
-}
-.Firewall form {
-  box-shadow: none;
-  margin: 2rem 2rem 0 0;
-  padding: 0;
-}
-#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%;
-}
-#applyreboot-container {
-  margin: 2rem;
-}
-#applyreboot-section {
-  line-height: 300%;
-  margin: 2rem;
-}
-.OpenVPN a {
-  line-height: initial !important;
-}
-.commandbox {
-  width: 24% !important;
-  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);
-  margin: 10px 0 0 10px !important;
-  padding: 0.5rem 1rem;
-}
-.commandbox h3 {
-  line-height: normal !important;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin: 6px 0 !important;
-}
-.commandbox div {
-  left: auto !important;
-}
-.commandbox code {
-  position: absolute;
-  overflow: hidden;
-  max-width: 60%;
-  margin-left: 4px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 2px 3px;
-}
-.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;
-}
-#command-rc-output .alert-message {
-  line-height: 1.42857143;
-  position: absolute;
-  top: 40px;
-  right: 32px;
-  max-width: 40%;
-  animation: anim-fade-in 1.5s forwards;
-  word-break: break-word;
-  opacity: 0;
-  margin: 0;
-}
-.table[width="100%"],
-.th[width="100%"],
-.td[width="100%"],
-.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,
-.cbi-dropdown[open]
-  > ul.dropdown
-  > li
-  > input.create-item-input:first-child:last-child,
-.cbi-dropdown .zonebadge,
-.node-main-login > .main > .main-right,
-#cbi-firewall-zone .td,
-#cbi-network-switch_vlan .td {
-  width: 100%;
-}
-.cbi-rowstyle-2 {
-  background-color: rgb(255, 255, 255);
-}
-.pull-right,
-.node-main-login > .main form > div:last-child {
-  float: right;
-}
-.pull-left,
-.cbi-page-actions .cbi-button-link:first-child {
-  float: left;
-}
-#modemenu > li > a,
-.label,
-[data-indicator] {
-  background-color: #bfbfbf;
-  border-radius: 3px;
-  color: #fff !important;
-  font-size: 0.8rem;
-  font-weight: 700;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: uppercase;
-  white-space: nowrap;
-  padding: 0.3rem 0.8rem;
-}
-#modemenu > li > a.active,
-.notice,
-[data-indicator]:not([data-style="inactive"]) {
-  background-color: #5bc0de !important;
-}
-#xhr_poll_status,
-.cbi-value-field > ul > li {
-  display: flex;
-}
-.alert-message .btn,
-.modal .btn {
-  padding: 0.3rem 0.6rem;
-}
-.container .alert,
-.container .alert-message,
-.cbi-map-descr + fieldset {
-  margin-top: 1rem;
-}
-.main > .main-left > .nav,
-.cbi-value-field > ul > li > label {
-  margin-top: 0.5rem;
-}
-.main > .main-left > .nav > li.active > a,
-.main > .main-left > .nav > .slide > .slide-menu > .active > a {
-  color: #fff;
-}
-.main > .main-left > .nav > li.active,
-.main > .main-left > .nav > .slide > .slide-menu > .active {
-  background-color: var(--submenu-bg-hover-active);
-}
-.main > .main-left > .nav > .slide > ul,
-.main > .main-left[style*="overflow: hidden"] > .nav > .slide > .menu::before,
-.tr.placeholder .td[data-title]::before,
-.cbi-dropdown > ul.preview,
-.cbi-dropdown > ul > li .hide-close,
-.cbi-dropdown[open] > ul.dropdown > li .hide-open,
-.hidden,
-.showSide,
-.node-main-login > .main > .main-left,
-[data-page^="admin-system-commands"] .panel-title,
-[data-page^="command-cfg"] .mobile-hide,
-[data-page^="command-cfg"] .showSide {
-  display: none;
-}
-.main > .main-left > .nav > .slide.active > ul,
-.cbi-dropdown[empty] > ul > li,
-.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
-.cbi-dropdown[multiple][open] > ul.dropdown > li > form,
-.node-main-login > .main .cbi-value,
-#cbi-samba [data-tab="template"] .cbi-value-field,
-#cbi-firewall-zone .table,
-#cbi-network-switch_vlan .table {
-  display: block;
-}
-.main > .main-left > .nav > li:hover,
-.main > .main-left > .nav > .slide > .menu:hover,
-.main > .main-left > .nav > .slide > .slide-menu > li:hover {
-  background: var(--submenu-bg-hover);
-}
-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,
-.uci-change-list var,
-.uci-change-list del,
-.uci-change-list ins,
-.cbi-section-remove {
-  padding: 0.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,
-#iwsvg,
-[data-page="admin-status-realtime-bandwidth"] #bwsvg {
-  border-top: 0 !important;
-}
-.cbi-section-table-row .td,
-.center,
-.center::before {
-  text-align: center !important;
-}
-div > table > tbody > tr:nth-of-type(2n),
-div > .table > .tr:nth-of-type(2n),
-.cbi-section .cbi-section-remove:nth-of-type(2n),
-.container > .cbi-section .cbi-section-node:nth-of-type(2n),
-.cbi-section[id] .cbi-section-remove:nth-of-type(4n + 3),
-.cbi-section[id] .cbi-section-node:nth-of-type(4n + 4),
-.cbi-tabcontainer > .cbi-value:nth-of-type(2n),
-.cbi-rowstyle-1 {
-  background-color: #ffffff;
-}
-.cbi-dropdown > ul > li .hide-open,
-.cbi-dropdown[open] > ul.dropdown > li .hide-close {
-  display: initial;
-}
-.network-status-table,
-.network-status-table .ifacebox-body > div {
-  display: flex;
-  flex-wrap: wrap;
-}
-[data-page="admin-network-diagnostics"] .table,
-.node-main-login .cbi-section {
-  box-shadow: none;
-}
-@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);
-  }
-}
-@media screen and (min-height: 585px) {
-  .node-main-login footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-  }
-}
-@keyframes anim-fade-in {
-  100% {
-    opacity: 1;
-  }
-}
-@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  {
-    display: flex;
-    align-items: center;
-    margin-top: 0;
-  }
-  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.3rem 0.6rem;
-  }
-  .label,
-  [data-indicator] {
-    padding: 0.2rem 0.6rem;
-  }
-  fieldset,
-  .cbi-section {
-    padding: 1rem;
-  }
-  .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: 22rem;
-  }
-  #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 {
-    height: 3.5rem;
-  }
-  header > .fill > .container {
-    margin-top: 0.25rem;
-    cursor: default;
-    padding: 0.5rem 1rem;
-  }
-  .main {
-    top: 3.5rem;
-    height: calc(100% - 3.5rem);
-  }
-  .main-left {
-    top: 3.5rem;
-    width: calc(0% + 13rem);
-    height: calc(100% - 3.5rem);
-  }
-  .main-right {
-    width: calc(100% - 13rem);
-  }
-  .tabs > li > a,
-  .cbi-tabmenu > li > a {
-    padding: 0.2rem 0.5rem;
-  }
-  .cbi-section > h3:first-child,
-  .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: 19rem;
-  }
-  #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: 3.5rem;
-  }
-  [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;
-  }
-}
-@media screen and (max-width: 1152px) {
-  header > .fill > .container > .brand {
-    position: relative;
-  }
-  html,
-  .main {
-    overflow-y: visible;
-  }
-  .main > .loading > span {
-    top: 25%;
-  }
-  .main-left {
-    position: fixed;
-    z-index: 100;
-    visibility: hidden;
-  }
-  .main-right {
-    width: 100%;
-  }
-  .showSide {
-    position: relative;
-    top: 0.18rem;
-    display: inline-flex;
-    align-items: center;
-    height: 100%;
-    margin-right: 0.7rem;
-    cursor: pointer;
-  }
-  body:not(.logged-in) .showSide {
-    visibility: hidden;
-    width: 0;
-    margin: 0;
-  }
-  .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;
-  }
-  .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[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: #90c0e0;
-  }
-  .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;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
-    margin: 0 0 2rem;
-    padding: 2rem;
-  }
-  .Firewall form input {
-    width: 100% !important;
-    margin: 1rem 0 0;
-  }
-  .Firewall .center,
-  .Firewall .center::before {
-    text-align: left !important;
-  }
-  .commandbox {
-    width: 100% !important;
-    margin-left: 0 !important;
-  }
-  .tr.table-titles,
-  .tr.cbi-section-table-titles,
-  .tr.cbi-section-table-descr {
-    display: none;
-  }
-  .node-main-login > .main .cbi-value-title,
-  .td[data-title],
-  [data-page^="admin-status-realtime"] .td[id] {
-    text-align: left;
-  }
-  .table,
-  .td[data-title]::before {
-    display: block;
-  }
-}
-@media screen and (max-width: 600px) {
-  .cbi-progressbar::after {
-    font-size: 0.95em;
-    line-height: 1.5;
-  }
-  fieldset,
-  .cbi-section {
-    margin: 1rem 0 0;
-  }
-  .tabs {
-    margin: 0 -1rem;
-  }
-  #maincontent > .container {
-    margin: 0 0.5rem 1.5rem;
-  }
-  .main > .main-left > .nav > .slide > .menu,
-  .main > .main-left > .nav > li > [data-title="Logout"] {
-    font-size: 1.1rem;
-  }
-  .cbi-value-title {
-    display: block;
-    min-width: 0 !important;
-    text-align: left;
-    margin: 0.5rem 0;
-  }
-  .cbi-value > .cbi-value-field {
-    display: inline-block;
-  }
-  .tabs > li > a,
-  .cbi-tabmenu > li > a {
-    font-size: 0.9rem;
-    padding: 0.2rem 0.3rem;
-  }
-  .cbi-page-actions > .cbi-button {
-    margin-top: 0.2rem;
-  }
-  .node-main-login > .main .container {
-    margin: 2rem 1.2rem 1.5rem !important;
-    padding: 0.3rem 1.7rem 2rem 1.6rem;
-  }
-  .node-main-login > .main .cbi-value {
-    padding: 0;
-  }
-  .node-main-login > .main form > div:last-child {
-    margin-top: 2rem;
-  }
-  .node-main-login > .main .cbi-value-title {
-    font-size: 1.2rem;
-    width: 100% !important;
-  }
-  .node-main-login > .main fieldset {
-    margin: 0;
-    padding: 0.5rem;
-  }
-  .commandbox p:first-of-type {
-    margin-top: -8px;
-  }
-  #syslog,
-  #diag-rc-output > pre,
-  #command-rc-output > pre,
-  [data-page="admin-services-wol"] .notice code {
-    font-size: 0.8rem !important;
-  }
-  h2 {
-    font-size: 2rem;
-  }
-  .cbi-section > h3:first-child,
-  .panel-title {
-    font-size: 1.4rem;
-    padding-bottom: 1rem;
-  }
-  .node-system-packages > .main .cbi-value.cbi-value-last > div {
-    width: 100% !important;
-  }
-  .th,
-  .td {
-    flex-basis: 50%;
-  }
-  .td.cbi-value-field {
-    flex-basis: 100%;
-  }
-  .td.cbi-value-field[data-type="button"],
-  .td.cbi-value-field[data-type="fvalue"] {
-    flex-basis: 25%;
-    text-align: left;
-  }
-  td > .ifacebadge,
-  .td > .ifacebadge {
-    font-size: 0.62rem;
-  }
-  #cbi-wireless > #wifi_assoclist_table .td {
-    overflow: hidden;
-  }
-  #cbi-wireless > .cbi-section-node .td,
-  .Interfaces .td.cbi-section-actions {
-    text-align: center !important;
-  }
-  .cbi-modal {
-    padding: 0.5rem;
-  }
-  .cbi-modal .cbi-value {
-    padding: 0 0 0.25rem;
-  }
-  .cbi-modal [data-tab-title] {
-    padding: 0 0.25rem !important;
-  }
-  [data-tab-title] {
-    padding: 0 0.5rem !important;
-  }
-  body,
-  code {
-    font-size: 0.8rem;
-  }
-  .main > .main-left > .nav > .slide > .slide-menu > li > a,
-  .tr[data-title]::before,
-  .tr.cbi-section-table-titles.named::before {
-    font-size: 1rem;
-  }
-  .cbi-value-title,
-  .cbi-value-description,
-  .cbi-value-field,
-  .cbi-value-field .cbi-dropdown,
-  .cbi-value-field .cbi-input-select,
-  .cbi-value input[type="text"],
-  .node-system-packages > .main .cbi-value .cbi-value-field input {
-    width: 100%;
-  }
-  .cbi-page-actions > div > input,
-  .mobile-hide,
-  [data-page="admin-status-processes"] .td[data-title="Hang Up"]::before,
-  [data-page="admin-status-processes"] .td[data-title="Terminate"]::before,
-  [data-page="admin-status-processes"] .td[data-title="Kill"]::before,
-  .hide-sm,
-  .hide-xs:not([data-title="MAC-Address"]) {
-    display: none;
-  }
-  .tabs > li > a,
-  select,
-  input {
-    font-size: 0.9rem;
-  }
-}
-@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;
-  }
-}
+/* Base */
+:root {
+  --main-color: #09c;
+  --header-bg: rgb(255, 255, 255);
+  --header-color: rgb(10, 10, 10);
+  --bar-bg: #5bc0de;
+  --menu-bg-color: #fff;
+  --menu-color: #5f6368;
+  --menu-color-hover: #202124;
+  --main-menu-color: #202124;
+  --submenu-bg-hover: #d4d4d4;
+  --submenu-bg-hover-active: #09c;
+  --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif,
+    "Helvetica Neue", Helvetica, "Hiragino Sans GB";
+}
+.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;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.5em;
+}
+.th {
+  font-weight: 700;
+}
+.tr.placeholder {
+  height: 4em;
+}
+.tr.placeholder > .td {
+  line-height: 3;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  text-align: center !important;
+  background: inherit;
+}
+.table[width="33%"],
+.th[width="33%"],
+.td[width="33%"] {
+  width: 33%;
+}
+.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;
+}
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: inherit;
+  font-weight: 400;
+  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: rgb(54 70 67 / 0.05);
+}
+html,
+body {
+  font-family: var(--font-body);
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+select {
+  color: #555;
+  border: thin solid #ccc;
+  background-color: #fff;
+  background-image: none;
+  padding: 0.36rem 0.8rem;
+}
+.btn,
+button,
+select,
+input,
+.cbi-dropdown {
+  height: 1.8rem;
+  color: rgba(0, 0, 0, 0.87);
+  border: 0;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.26);
+  border-radius: 0;
+  outline: 0;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  padding: 0;
+}
+select,
+.cbi-dropdown {
+  width: inherit;
+  cursor: default;
+}
+select:not([multiple="multiple"]):focus,
+input:not(.cbi-button):focus,
+.cbi-dropdown:focus {
+  border-color: var(--main-color);
+}
+.cbi-dropdown,
+select[multiple="multiple"] {
+  height: auto;
+}
+pre {
+  overflow: auto;
+}
+code {
+  font-size: 1rem;
+  font-size-adjust: 0.35;
+  color: #101010;
+  border-radius: 0px;
+  background: #ddd;
+  padding: 1px 3px;
+}
+abbr {
+  cursor: help;
+  text-decoration: underline;
+  color: #005470;
+}
+hr {
+  opacity: 0.1;
+  border-color: #eee;
+  margin: 1rem 0;
+}
+/* End Base */
+
+/* Header */
+header,
+.main {
+  position: absolute;
+  width: 100%;
+}
+header {
+  position: fixed;
+  z-index: 2000;
+  float: left;
+  height: 4rem;
+  transition: box-shadow 0.2s;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+  color: var(--header-color);
+  background: var(--header-bg);
+}
+
+header > .fill > .container {
+  margin-top: 0.5rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding: 0.5rem 1rem 0;
+}
+header > .fill > .container > #logo {
+  padding: 0;
+  margin: 0 !important;
+  position: absolute; 
+  left: 0;
+  top: 50%;
+  height: 100%;
+  transform: translateY(-50%);
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  width: calc(16rem);
+}
+header > .fill > .container > #logo > img {
+  width: auto;
+  height: 100%;
+  margin-top: -0.1rem;
+}
+header > .fill > .container > .brand {
+  font-size: 1.4rem;
+  position: absolute;
+  cursor: default;
+  vertical-align: text-bottom;
+  text-decoration: none;
+  color: var(--header-color);
+}
+header > .fill > .container > .status {
+  position: absolute;
+  top: 25%;
+  right: 1em;
+  float: right;
+}
+header > .fill > .container > .status > * {
+  position: relative;
+  top: 0.2rem;
+  float: left;
+  margin-left: 0.3rem;
+  cursor: pointer;
+}
+/* End Header */
+
+/* Footer */
+footer {
+  font-size: 0.8rem;
+  overflow: hidden;
+  text-align: right;
+  white-space: nowrap;
+  color: #aaa;
+  text-shadow: 0 0 2px #bbb;
+  padding: 1rem;
+}
+footer > a {
+  text-decoration: none;
+  color: #aaa;
+}
+small {
+  font-size: 90%;
+  line-height: 1.42857143;
+  white-space: normal;
+}
+/* End Footer */
+
+/* Navbar */
+@media screen and (min-width: 720px) {
+  .navbar {
+    position: fixed;
+    bottom: 50%;
+    transform: translateY(50%);
+    transition-duration: 200ms;
+    right: 30px;
+    border-top: var(--navBorder);
+    text-align: center;
+    background-color: #ffff;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 0 10px 0px #0000002d;
+    box-sizing: content-box;
+  }
+  .navbar--hidden {
+    transform: translateY(50px);
+    box-shadow: none;
+  }
+
+  .navbar .toggler {
+    transition-duration: 100ms;
+    position: absolute;
+    background: white;
+    box-shadow: 0 0 10px 0 #0000000f;
+    transform: translateY(50%);
+    bottom: 50%;
+    right: calc(100% + 10px);
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    border-radius: 100%;
+    content: "";
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+  .navbar .toggler img {
+    transform: rotate(270deg);
+  }
+
+  .navbar .dropdown {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 64px;
+    padding: 0.25rem;
+  }
+
+  .navbar .dropdown a {
+    display: block;
+    text-align: center;
+    padding: 8px;
+    text-decoration: none;
+    max-width: 100px;
+    width: 100%;
+  }
+
+  .navbar .dropdown a img {
+    width: 100%;
+  }
+
+  .navbar.active {
+    right: -64px;
+  }
+
+  .navbar.active .toggler {
+    right: calc(100% + 10px);
+  }
+  .navbar.active .toggler img {
+    transform: rotate(90deg);
+  }
+}
+
+@media screen and (max-width: 720px) {
+  .navbar {
+    overflow: hidden;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    transition: transform 0.5s;
+    border-top: var(--navBorder);
+    text-align: center;
+    height: calc(50px + constant(safe-area-inset-bottom));
+    height: calc(50px + env(safe-area-inset-bottom));
+    background-color: #ffff;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+  }
+  .navbar--hidden {
+    transform: translateY(50px);
+    box-shadow: none;
+  }
+  .navbar a {
+    float: left;
+    text-align: center;
+    padding: 8px 0;
+		width: calc(100% / 6);
+    text-decoration: none;
+    max-width: 100px;
+  }
+
+  .navbar a img {
+    width: 28px;
+  }
+}
+/* End Navbar */
+
+.main {
+  position: relative;
+  top: 4rem;
+  bottom: 0;
+  overflow-y: auto;
+  height: calc(100% - 4rem);
+}
+.main > .loading {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  opacity: 1;
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-color: rgb(240, 240, 240);
+  transition: visibility 400ms, opacity 400ms;
+}
+.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;
+}
+
+.cbi-map {
+  margin-top: 10px;
+}
+
+#cbi-shadowsocksr .cbi-map-descr {
+  display: none;
+}
+
+.main-right {
+  float: right;
+  width: calc(100% - 16rem);
+  height: 100%;
+}
+.nowrap:not(.td) {
+  white-space: nowrap;
+}
+[disabled="disabled"] {
+  pointer-events: none;
+}
+
+/* Sidebar */
+.main > .main-left {
+  position: fixed;
+  top: 3.5rem;
+  width: calc(0% + 16rem);
+  float: left;
+  overflow-x: auto;
+  height: calc(100% - 4rem);
+  background-color: var(--menu-bg-color);
+  transition: visibility 400ms, width 400ms;
+}
+.main > .main-left > .nav {
+  padding: 0.5rem 0.5rem 2rem;
+}
+
+.main > .main-left > .nav > li {
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.main > .main-left > .nav > li:last-child {
+  display: flex;
+  margin: 2rem 0 1rem;
+  padding: 0 0 0 2rem;
+}
+.main > .main-left > .nav > li a {
+  display: block;
+  color: var(--menu-color);
+}
+.main > .main-left > .nav > li.slide.active {
+  background-color: unset;
+}
+.main > .main-left > .nav > .slide {
+  padding: 0;
+}
+.main > .main-left > .nav > .slide > .menu,
+.main > .main-left > .nav > li > [data-title="Logout"],
+.main > .main-left > .nav > li > [data-title="Dashboard"] {
+  font-size: 1rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-decoration: none;
+  color: var(--main-menu-color);
+  padding: 0.5rem 1rem;
+  transition-duration: 200ms;
+  margin-bottom: 5px;
+}
+.main > .main-left > .nav > .slide > .menu::before {
+  position: absolute;
+  right: 17px;
+  width: 16px;
+  height: 16px;
+  content: "";
+  background: url(./icons/arrow.svg) no-repeat;
+}
+.main > .main-left > .nav > .slide > .menu.active::before {
+  transform: rotate(-180deg);
+}
+/* End Sidebar */
+
+.modemenu-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  color: var(--header-color);
+  background: var(--header-bg);
+  transition: box-shadow 0.2s;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
+  padding: 0.5rem;
+}
+#modemenu {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0.25rem;
+}
+#modemenu > li.divider {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  border: 0.5rem solid var(--submenu-bg-hover);
+  border-left: 1px solid var(--submenu-bg-hover);
+  border-right: 1px solid var(--submenu-bg-hover);
+  border-radius: 1rem;
+}
+.danger {
+  background-color: #ff7d60 !important;
+}
+.warning {
+  background-color: #f0e68c !important;
+}
+.success {
+  background-color: #5cb85c !important;
+}
+.error {
+  color: red;
+}
+.alert,
+.alert-message {
+  font-weight: 700;
+  margin-bottom: 1em;
+  border: 0;
+  border-radius: 0 !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(173, 31, 31, 0.1);
+  padding: 1rem;
+}
+.alert-message > h4 {
+  font-size: 110%;
+  font-weight: 700;
+}
+.alert-message > * {
+  margin: 0.5rem 0;
+}
+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 > .nav > li:last-child::before {
+  position: absolute;
+  top:50%;
+  transform: translateY(-50%);
+  left: 14px;
+  width: 24px;
+  height: 24px;
+  content: url(./icons/logout.svg);
+}
+.main > .main-left > .nav > .slide:hover {
+  background: none;
+}
+.main > .main-left > .nav > .slide > .slide-menu > li > a {
+  white-space: nowrap;
+  text-decoration: none;
+  padding: 0.4rem 2rem;
+}
+.main > .main-left > .nav > .slide > .slide-menu > li:not(.active):hover > a {
+  color: var(--menu-color-hover);
+}
+.main > .main-left > .nav > .slide > .slide-menu > .active:hover {
+  background-color: var(--main-color);
+}
+.main > .main-left > .nav > .slide > .menu,
+.main > .main-left > .nav > .slide > .slide-menu > li,
+.main > .main-left > .nav > li:last-child {
+  position: relative;
+  overflow: hidden;
+  transform: translate3d(0, 0, 0);
+}
+.main > .main-left > .nav > .slide > .menu::after,
+.main > .main-left > .nav > .slide > .slide-menu > li::after,
+.main > .main-left > .nav > li:last-child::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  content: "";
+  transition: transform 0.5s, opacity 1s;
+  transform: scale(10, 10);
+  pointer-events: none;
+  opacity: 0;
+  background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
+  background-repeat: no-repeat;
+  background-position: 50%;
+}
+.main > .main-left > .nav > .slide > .menu:active::after,
+.main > .main-left > .nav > .slide > .slide-menu > li:active::after,
+.main > .main-left > .nav > li:last-child:active::after {
+  transition: 0s;
+  transform: scale(0, 0);
+  opacity: 0.2;
+}
+#maincontent > .container {
+  margin: 0 2rem 1rem;
+}
+ul {
+  line-height: normal;
+}
+li {
+  list-style-type: none;
+}
+h1 {
+  font-size: 2rem;
+  padding-bottom: 10px;
+  border-bottom: thin solid #eee;
+}
+h2 {
+  font-size: 1.8rem;
+  padding-bottom: 10px;
+  border-bottom: thin solid #eee;
+  margin: 2rem 0 0;
+}
+h3 {
+  font-size: 1.4rem;
+  padding-bottom: 10px;
+  margin: 2rem 0 0;
+}
+h4 {
+  font-size: 1.2rem;
+  padding-bottom: 10px;
+  margin: 2rem 0 0;
+}
+h5 {
+  font-size: 1rem;
+  padding-bottom: 10px;
+  margin: 2rem 0 0;
+}
+.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: 400;
+  font-style: normal;
+  line-height: normal;
+  min-width: inherit;
+  border: 0;
+  border-radius: 0;
+  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);
+  margin: 1rem 0 0;
+  padding: 2rem;
+}
+.cbi-modal .cbi-section,
+.cbi-section .cbi-section {
+  box-shadow: none;
+  padding: 0;
+}
+.cbi-modal .cbi-tabmenu {
+  margin-left: 0;
+}
+.cbi-map-descr,
+.cbi-section-descr {
+  font-size: small;
+  line-height: 1.42857143;
+  color: #999;
+  padding: 0.5rem;
+}
+.cbi-section > legend {
+  display: none !important;
+}
+fieldset > fieldset,
+.cbi-section > .cbi-section {
+  border: 0;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+}
+.cbi-section > h3:first-child,
+.panel-title {
+  font-size: 1.4rem;
+  line-height: 1;
+  display: block;
+  width: 100%;
+  padding-bottom: 1rem;
+  color: #404040;
+  border-bottom: thin solid #eee;
+  margin: 0 0 0.5rem;
+}
+.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%;
+  box-shadow: 0 0 0 1px rgb(255, 255, 255);
+}
+.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 rgb(255, 255, 255);
+}
+.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 [data-dynlist] > input,
+.cbi-section-table-row > .cbi-value-field input.cbi-input-password {
+  width: calc(100% - 1.5rem);
+}
+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;
+}
+.btn,
+.cbi-button,
+.item::after {
+  font-size: 0.8rem;
+  display: inline-block;
+  width: auto !important;
+  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;
+  padding: 0 0.8rem;
+}
+.cbi-button-up,
+.cbi-button-down {
+  font-size: 1.2rem;
+  display: inline-block;
+  min-width: 0;
+  color: transparent !important;
+  background: url(./icons/arrow.svg) no-repeat center;
+  background-size: 12px 20px;
+  padding: 0.2rem 0.3rem;
+}
+.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;
+}
+.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: 700;
+  border: thin solid #bfbfbf;
+  background-color: #d4d4d4;
+}
+.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: 400;
+  color: #fff;
+  border: thin solid #2e6da4;
+  background-color: #337ab7;
+}
+.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: 400;
+  color: #fff;
+  background-color: #5bdede;
+}
+.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: 400;
+  color: #fff;
+  border: thin solid #d43f3a;
+  background-color: #d9534f;
+}
+.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: 400;
+  color: #fff;
+  border: thin solid #eea236;
+  background-color: #f0ad4e;
+}
+.cbi-button-success,
+.cbi-button-download,
+.cbi-button[name="backup"],
+.cbi-button[value="Download"],
+.cbi-button[value="Save mtdblock"] {
+  font-weight: 400;
+  color: #fff;
+  border: thin solid #4cae4c;
+  background-color: #5cb85c;
+}
+.a-to-btn {
+  text-decoration: none;
+}
+.cbi-value-field .cbi-button-add {
+  font-weight: 700;
+  margin: 9px 0 4px 3px;
+  padding: 1px 6px;
+}
+.tabs {
+  padding-left: 0.5rem;
+  background-color: #fff;
+  margin: 0 -2rem;
+}
+.tabs > li,
+.cbi-tabmenu > li {
+  display: inline-block;
+  cursor: pointer;
+  padding: 0.55rem 0;
+}
+.tabs > li {
+  padding-bottom: 0.4rem;
+  border-bottom: 0.2rem solid transparent;
+}
+.tabs > li[class~="active"],
+.tabs > li:hover {
+  border-bottom-color: var(--main-color);
+}
+.tabs > li:hover {
+  cursor: pointer;
+  border-bottom-color: #c9c9c9;
+}
+.tabs > li > a,
+.cbi-tabmenu > li > a {
+  text-decoration: none;
+  color: #404040;
+  padding: 0.6rem 0.9rem;
+}
+.tabs > li[class~="active"] > a {
+  color: var(--main-color);
+}
+.cbi-tabmenu {
+  border: thin solid #d4d4d4;
+  border-bottom: 0;
+  background-color: #d4d4d4;
+}
+.cbi-tabmenu > li:hover {
+  background-color: #f1f1f1;
+}
+.cbi-tabmenu > li[class~="cbi-tab"] {
+  background-color: #fff;
+}
+[data-tab-title] {
+  overflow: hidden;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  padding: 0rem 1rem !important;
+}
+[data-tab-active="true"] {
+  overflow: visible;
+  height: auto;
+  opacity: 1;
+  transition: opacity 0.25s ease-in;
+  margin: inherit !important;
+}
+.cbi-section-node-tabbed {
+  margin-top: 0;
+  border: thin solid #d4d4d4;
+  border-top: 0;
+  padding: 0;
+}
+.cbi-value-field,
+.cbi-value-description {
+  line-height: 1.25;
+  display: table-cell;
+}
+.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.35rem;
+  padding-right: 2rem;
+  text-align: right;
+  word-wrap: break-word;
+}
+.cbi-value {
+  display: inline-block;
+  width: 100%;
+  padding: 0.35rem 1rem 0.2rem;
+}
+.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: 25rem;
+}
+#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: red;
+  border-bottom-color: red;
+}
+.cbi-section-error {
+  font-weight: 700;
+  line-height: 1.42857143;
+  border: thin solid red;
+  border-radius: 3px;
+  background-color: #fce6e6;
+  margin: 18px;
+  padding: 6px;
+}
+.cbi-section-error ul {
+  margin: 0 0 0 20px;
+}
+.cbi-section-error ul li {
+  font-weight: 700;
+  color: red;
+}
+.td[data-title]::before {
+  font-weight: 700;
+  display: none;
+  content: attr(data-title) ":\20";
+  text-align: left;
+  white-space: nowrap;
+  padding: 0.25rem 0;
+}
+.tr[data-title]::before,
+.tr.cbi-section-table-titles.named::before {
+  font-weight: 700;
+  display: table-cell;
+  align-self: center;
+  flex: 1 1 5%;
+  content: attr(data-title) "\20";
+  text-align: center;
+  vertical-align: middle;
+  white-space: normal;
+  word-wrap: break-word;
+  padding: 0.25rem;
+}
+.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;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.td.cbi-section-actions > * {
+  display: inline-flex;
+}
+.td.cbi-section-actions > button {
+  display: block;
+}
+.td.cbi-section-actions > * > *,
+.td.cbi-section-actions > * > form > * {
+  margin: 0 5px;
+}
+.td.cbi-section-actions > * > form {
+  display: inline-flex;
+  margin: 0;
+}
+.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;
+  pointer-events: none;
+  color: #666;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.26);
+  outline: 0;
+  padding: 0.5em 0.25em 0.25em 0;
+}
+.cbi-dynlist[name="sshkeys"] > .item {
+  max-width: none;
+}
+.cbi-dynlist > .item::after {
+  font-weight: 700;
+  position: absolute;
+  right: -2em;
+  bottom: 0;
+  display: inline-flex;
+  min-height: 17px;
+  content: "\00D7";
+  pointer-events: auto;
+  color: #fff;
+  border: thin solid #d43f3a;
+  background-color: #d9534f;
+  padding: 0 6px;
+}
+.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;
+}
+.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%;
+  list-style: none;
+  outline: 0;
+  margin: 0 !important;
+  padding: 0;
+}
+.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;
+  cursor: default;
+  text-align: center;
+  outline: 0;
+  padding: 0 0.25em;
+}
+.cbi-dropdown.btn {
+  min-height: 1.8rem;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-right: 0px;
+}
+.cbi-dropdown.btn > .open {
+  font-size: 0.8rem;
+  margin: 0 5px;
+  padding: 0px;
+}
+.cbi-dropdown.btn > div {
+  margin: 0px;
+}
+.cbi-dropdown > .more,
+.cbi-dropdown > ul > li[placeholder] {
+  font-weight: 700;
+  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;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0.25em;
+}
+.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;
+  pointer-events: none;
+  margin: 0;
+  padding: 0;
+}
+.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 > 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[open] > ul.dropdown > li {
+  border-bottom: thin solid #ccc;
+}
+.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[disabled] {
+  pointer-events: none;
+  opacity: 0.6;
+}
+.cbi-dropdown[open] .zonebadge {
+  width: auto;
+}
+.cbi-progressbar {
+  border-radius: 15px;
+  overflow: hidden;
+  position: relative;
+  min-width: 170px;
+  height: 30px;
+  border: thin solid #999;
+  background: #eee;
+  margin: 6px 0;
+}
+.cbi-progressbar > div {
+  width: 0;
+  height: 100%;
+  transition: width 0.25s ease-in;
+  background: var(--bar-bg);
+}
+.cbi-progressbar::after {
+  font-family: monospace;
+  font-size: 1.2em;
+  font-weight: 700;
+  font-size-adjust: 0.38;
+  line-height: normal;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
+  left: 0;
+  overflow: hidden;
+  content: attr(title);
+  text-align: center;
+  white-space: pre;
+  text-overflow: ellipsis;
+  text-shadow: 0 0 2px #eee;
+}
+#modal_overlay {
+  position: fixed;
+  z-index: 900;
+  top: 4rem;
+  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;
+  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);
+  margin: 5em auto;
+  padding: 1em;
+}
+.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;
+  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);
+  padding: 8.5px;
+}
+.modal > h4 {
+  margin: 0.5em 0;
+}
+.modal ul {
+  margin-left: 2.2em;
+}
+.modal li {
+  list-style-type: square;
+  color: gray;
+}
+.modal p {
+  padding-left: 0.25rem;
+  word-break: break-word;
+}
+.modal .label {
+  font-size: 0.6rem;
+  font-weight: 400;
+  cursor: default;
+  border-radius: 0;
+  padding: 0.1rem 0.3rem 0;
+}
+.modal .label.warning {
+  background-color: #f0ad4e !important;
+}
+.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;
+}
+.left,
+.left::before {
+  text-align: left !important;
+}
+.right,
+.right::before {
+  text-align: right !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;
+  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);
+  padding: 0.5rem 0.8rem;
+}
+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 .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 .ifacebadge {
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 220px;
+  background-color: #fff;
+  margin: 0.5em 0.25em 0;
+  padding: 0.5em;
+}
+.cbi-input-textarea {
+  font-family: monospace;
+  width: 100%;
+  min-height: 14rem;
+  color: #000;
+  padding: 0.8rem;
+}
+#syslog {
+  font-size: small;
+  overflow-y: hidden;
+  width: 100%;
+  min-height: 15rem;
+  resize: none;
+  color: #eee;
+  border: 0;
+  border-radius: 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);
+  padding: 1rem;
+}
+#syslog:focus {
+  outline: 0;
+}
+.uci-change-list {
+  font-family: monospace;
+}
+.uci-change-list ins,
+.uci-change-legend-label ins {
+  display: block;
+  text-decoration: none;
+  border: thin solid #0f0;
+  background-color: #cfc;
+  padding: 2px;
+}
+.uci-change-list del,
+.uci-change-legend-label del {
+  font-style: normal;
+  display: block;
+  text-decoration: none;
+  border: thin solid red;
+  background-color: #fcc;
+  padding: 2px;
+}
+.uci-change-list var,
+.uci-change-legend-label var {
+  font-style: normal;
+  display: block;
+  text-decoration: none;
+  border: thin solid #ccc;
+  background-color: #eee;
+  padding: 2px;
+}
+.uci-change-list var ins,
+.uci-change-list var del {
+  font-style: normal;
+  white-space: pre;
+  border: 0;
+  padding: 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;
+}
+#iwsvg,
+#iwsvg2,
+#bwsvg {
+  border: thin solid #d4d4d4 !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 {
+  background: #eee;
+  padding: 0.25em;
+}
+.ifacebox-head.active {
+  background: var(--bar-bg);
+}
+.ifacebox-body {
+  padding: 0.25em;
+}
+.cbi-image-button {
+  margin-left: 0.5rem;
+}
+.zonebadge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+}
+.zonebadge .ifacebadge {
+  border: thin solid #6c6c6c;
+  margin: 0.1rem 0.2rem;
+  padding: 0.2rem 0.3rem;
+}
+.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 .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.5rem -3px;
+}
+.cbi-section-create > * {
+  margin: 0.5rem;
+}
+div.cbi-value var,
+td.cbi-value-field var,
+.td.cbi-value-field var {
+  font-style: italic;
+  color: #0069d6;
+}
+.cbi-optionals {
+  border-top: thin solid #ccc;
+  padding: 1rem 1rem 0;
+}
+.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;
+  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;
+  padding: 2px 5px;
+}
+.cbi-tooltip-container:hover .cbi-tooltip {
+  left: auto;
+  transition: opacity 0.25s ease-in;
+  opacity: 1;
+}
+.zonebadge .cbi-tooltip {
+  background: inherit;
+  margin: -1.5rem 0 0 -0.5rem;
+  padding: 0.25rem;
+}
+.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%;
+  text-align: center;
+  padding: 0 0.25rem;
+}
+.zone-forwards .zone-src,
+.zone-forwards .zone-dest {
+  display: flex;
+  flex-direction: column;
+}
+label > input[type="checkbox"],
+label > input[type="radio"] {
+  position: relative;
+  top: 0.4rem;
+  right: 0.2rem;
+  vertical-align: bottom;
+  margin: 0;
+}
+label[data-index][data-depends] {
+  padding-right: 2em;
+}
+.darkMask {
+  position: fixed;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-color: rgba(151, 151, 151, 0.56);
+  transition: opacity 400ms, visibility 400ms;
+  visibility: hidden;
+  opacity: 0;
+}
+#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%;
+  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);
+  padding: 8.5px;
+}
+input[name="ping"],
+input[name="traceroute"],
+input[name="nslookup"] {
+  width: 80%;
+}
+.node-main-login > .main fieldset {
+  display: inline;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  padding: 0.5rem;
+}
+.node-main-login > .main .cbi-value-title {
+  width: 9.5rem;
+}
+.node-main-login > .main #maincontent {
+  text-align: center;
+}
+.node-main-login > .main .container {
+  display: inline-block;
+  margin-top: 2rem !important;
+  text-align: left;
+  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);
+  padding: 1rem 3.5rem 2rem;
+}
+.node-main-login > .main .cbi-value > * {
+  display: inline-block !important;
+}
+.node-main-login > .main .cbi-input-text {
+  width: 100% !important;
+  min-width: 15rem;
+}
+.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;
+}
+[data-page="admin-system-reboot"] p {
+  padding-left: 2rem;
+}
+[data-page="admin-system-reboot"] p > span {
+  position: relative;
+  top: 0.1rem;
+  left: 1rem;
+}
+#cbi-samba [data-tab="template"] .cbi-value-title {
+  width: auto;
+  padding-bottom: 0.6rem;
+}
+.controls > * > .btn:not([aria-label$="page"]) {
+  flex-grow: initial !important;
+  margin-top: 0.1rem;
+}
+.controls > #pager > .btn[aria-label$="page"] {
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+.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 2rem 1rem;
+}
+.td.version,
+.td.size {
+  white-space: normal !important;
+  word-break: break-word;
+}
+.cbi-tabmenu + .cbi-section {
+  margin-top: 0;
+}
+#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;
+}
+#iptables {
+  margin: 0;
+}
+.Firewall form {
+  box-shadow: none;
+  margin: 2rem 2rem 0 0;
+  padding: 0;
+}
+#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%;
+}
+#applyreboot-container {
+  margin: 2rem;
+}
+#applyreboot-section {
+  line-height: 300%;
+  margin: 2rem;
+}
+.OpenVPN a {
+  line-height: initial !important;
+}
+.commandbox {
+  width: 24% !important;
+  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);
+  margin: 10px 0 0 10px !important;
+  padding: 0.5rem 1rem;
+}
+.commandbox h3 {
+  line-height: normal !important;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin: 6px 0 !important;
+}
+.commandbox div {
+  left: auto !important;
+}
+.commandbox code {
+  position: absolute;
+  overflow: hidden;
+  max-width: 60%;
+  margin-left: 4px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 2px 3px;
+}
+.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;
+}
+#command-rc-output .alert-message {
+  line-height: 1.42857143;
+  position: absolute;
+  top: 40px;
+  right: 32px;
+  max-width: 40%;
+  animation: anim-fade-in 1.5s forwards;
+  word-break: break-word;
+  opacity: 0;
+  margin: 0;
+}
+.table[width="100%"],
+.th[width="100%"],
+.td[width="100%"],
+.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,
+.cbi-dropdown[open]
+  > ul.dropdown
+  > li
+  > input.create-item-input:first-child:last-child,
+.cbi-dropdown .zonebadge,
+.node-main-login > .main > .main-right,
+#cbi-firewall-zone .td,
+#cbi-network-switch_vlan .td {
+  width: 100%;
+}
+.cbi-rowstyle-2 {
+  background-color: rgb(255, 255, 255);
+}
+.pull-right,
+.node-main-login > .main form > div:last-child {
+  float: right;
+}
+.pull-left,
+.cbi-page-actions .cbi-button-link:first-child {
+  float: left;
+}
+#modemenu > li > a,
+.label,
+[data-indicator] {
+  background-color: #bfbfbf;
+  border-radius: 3px;
+  color: #fff !important;
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+  padding: 0.3rem 0.8rem;
+}
+#modemenu > li > a.active,
+.notice,
+[data-indicator]:not([data-style="inactive"]) {
+  background-color: #5bc0de !important;
+}
+#xhr_poll_status,
+.cbi-value-field > ul > li {
+  display: flex;
+}
+.alert-message .btn,
+.modal .btn {
+  padding: 0.3rem 0.6rem;
+}
+.container .alert,
+.container .alert-message,
+.cbi-map-descr + fieldset {
+  margin-top: 1rem;
+}
+.main > .main-left > .nav,
+.cbi-value-field > ul > li > label {
+  margin-top: 0.5rem;
+}
+.main > .main-left > .nav > li.active > a,
+.main > .main-left > .nav > .slide > .slide-menu > .active > a {
+  color: #fff;
+}
+.main > .main-left > .nav > li.active,
+.main > .main-left > .nav > .slide > .slide-menu > .active {
+  background-color: var(--submenu-bg-hover-active);
+}
+.main > .main-left > .nav > .slide > ul,
+.main > .main-left[style*="overflow: hidden"] > .nav > .slide > .menu::before,
+.tr.placeholder .td[data-title]::before,
+.cbi-dropdown > ul.preview,
+.cbi-dropdown > ul > li .hide-close,
+.cbi-dropdown[open] > ul.dropdown > li .hide-open,
+.hidden,
+.showSide,
+.node-main-login > .main > .main-left,
+[data-page^="admin-system-commands"] .panel-title,
+[data-page^="command-cfg"] .mobile-hide,
+[data-page^="command-cfg"] .showSide {
+  display: none;
+}
+.main > .main-left > .nav > .slide.active > ul,
+.cbi-dropdown[empty] > ul > li,
+.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
+.cbi-dropdown[multiple][open] > ul.dropdown > li > form,
+.node-main-login > .main .cbi-value,
+#cbi-samba [data-tab="template"] .cbi-value-field,
+#cbi-firewall-zone .table,
+#cbi-network-switch_vlan .table {
+  display: block;
+}
+.main > .main-left > .nav > li:hover,
+.main > .main-left > .nav > .slide > .menu:hover,
+.main > .main-left > .nav > .slide > .slide-menu > li:hover {
+  background: var(--submenu-bg-hover);
+}
+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,
+.uci-change-list var,
+.uci-change-list del,
+.uci-change-list ins,
+.cbi-section-remove {
+  padding: 0.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,
+#iwsvg,
+[data-page="admin-status-realtime-bandwidth"] #bwsvg {
+  border-top: 0 !important;
+}
+.cbi-section-table-row .td,
+.center,
+.center::before {
+  text-align: center !important;
+}
+div > table > tbody > tr:nth-of-type(2n),
+div > .table > .tr:nth-of-type(2n),
+.cbi-section .cbi-section-remove:nth-of-type(2n),
+.container > .cbi-section .cbi-section-node:nth-of-type(2n),
+.cbi-section[id] .cbi-section-remove:nth-of-type(4n + 3),
+.cbi-section[id] .cbi-section-node:nth-of-type(4n + 4),
+.cbi-tabcontainer > .cbi-value:nth-of-type(2n),
+.cbi-rowstyle-1 {
+  background-color: #ffffff;
+}
+.cbi-dropdown > ul > li .hide-open,
+.cbi-dropdown[open] > ul.dropdown > li .hide-close {
+  display: initial;
+}
+.network-status-table,
+.network-status-table .ifacebox-body > div {
+  display: flex;
+  flex-wrap: wrap;
+}
+[data-page="admin-network-diagnostics"] .table,
+.node-main-login .cbi-section {
+  box-shadow: none;
+}
+@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);
+  }
+}
+@media screen and (min-height: 585px) {
+  .node-main-login footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+@keyframes anim-fade-in {
+  100% {
+    opacity: 1;
+  }
+}
+@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  {
+    display: flex;
+    align-items: center;
+    margin-top: 0;
+  }
+  header > .fill > .container > #logo {
+    width: calc(13rem);
+  }
+  .main > .main-left{
+    width: calc(0% + 13rem);
+  }
+  .main > .main-right {
+    width: calc(100% - 13rem);
+  }
+  .btn:not(button),
+  .cbi-button {
+    font-size: 0.8rem;
+    padding: 0.3rem 0.6rem;
+  }
+  .label,
+  [data-indicator] {
+    padding: 0.2rem 0.6rem;
+  }
+  fieldset,
+  .cbi-section {
+    padding: 1rem;
+  }
+  .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: 22rem;
+  }
+  #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 {
+    height: 3.5rem;
+  }
+  header > .fill > .container {
+    margin-top: 0.25rem;
+    cursor: default;
+    padding: 0.5rem 1rem;
+  }
+  .main {
+    top: 3.5rem;
+    height: calc(100% - 3.5rem);
+  }
+  .main > .main-left {
+    top: 3.5rem;
+    width: calc(0% + 13rem);
+    height: calc(100% - 3.5rem);
+  }
+  .main > .main-right {
+    width: calc(100% - 13rem);
+  }
+  .tabs > li > a,
+  .cbi-tabmenu > li > a {
+    padding: 0.2rem 0.5rem;
+  }
+  .cbi-section > h3:first-child,
+  .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: 19rem;
+  }
+  #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: 3.5rem;
+  }
+  [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;
+  }
+}
+@media screen and (max-width: 1152px) {
+  header > .fill > .container > .brand {
+    position: relative;
+  }
+  html,
+  .main {
+    overflow-y: visible;
+  }
+  .main > .loading > span {
+    top: 25%;
+  }
+  .main > .main-left {
+    position: fixed;
+    z-index: 100;
+    visibility: hidden;
+  }
+  .main > .main-right {
+    width: 100%;
+  }
+  .showSide {
+    position: relative;
+    top: 0.18rem;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    margin-right: 0.7rem;
+    cursor: pointer;
+  }
+  body:not(.logged-in) .showSide {
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+  }
+  .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;
+  }
+  .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[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: #90c0e0;
+  }
+  .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;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+    margin: 0 0 2rem;
+    padding: 2rem;
+  }
+  .Firewall form input {
+    width: 100% !important;
+    margin: 1rem 0 0;
+  }
+  .Firewall .center,
+  .Firewall .center::before {
+    text-align: left !important;
+  }
+  .commandbox {
+    width: 100% !important;
+    margin-left: 0 !important;
+  }
+  .tr.table-titles,
+  .tr.cbi-section-table-titles,
+  .tr.cbi-section-table-descr {
+    display: none;
+  }
+  .node-main-login > .main .cbi-value-title,
+  .td[data-title],
+  [data-page^="admin-status-realtime"] .td[id] {
+    text-align: left;
+  }
+  .table,
+  .td[data-title]::before {
+    display: block;
+  }
+}
+@media screen and (max-width: 600px) {
+  header > .fill > .container > #logo {
+    padding: 1rem;
+    margin: 0;
+    position: absolute; 
+    left: 50%;
+    top:0;
+    width: 100px;
+    transform: translateX(-50%);
+  }
+  header > .fill > .container > #logo > img{
+    width: 100%;
+    margin-top:0;
+  }
+  .cbi-progressbar::after {
+    font-size: 0.95em;
+    line-height: 1.5;
+  }
+  fieldset,
+  .cbi-section {
+    margin: 1rem 0 0;
+  }
+  .tabs {
+    margin: 0 -1rem;
+  }
+  #maincontent > .container {
+    margin: 0 0.5rem 1.5rem;
+  }
+  .main > .main-left > .nav > .slide > .menu,
+  .main > .main-left > .nav > li > [data-title="Logout"] {
+    font-size: 1.1rem;
+  }
+  .cbi-value-title {
+    display: block;
+    min-width: 0 !important;
+    text-align: left;
+    margin: 0.5rem 0;
+  }
+  .cbi-value > .cbi-value-field {
+    display: inline-block;
+  }
+  .tabs > li > a,
+  .cbi-tabmenu > li > a {
+    font-size: 0.9rem;
+    padding: 0.2rem 0.3rem;
+  }
+  .cbi-page-actions > .cbi-button {
+    margin-top: 0.2rem;
+  }
+  .node-main-login > .main .container {
+    margin: 2rem 1.2rem 1.5rem !important;
+    padding: 0.3rem 1.7rem 2rem 1.6rem;
+  }
+  .node-main-login > .main .cbi-value {
+    padding: 0;
+  }
+  .node-main-login > .main form > div:last-child {
+    margin-top: 2rem;
+  }
+  .node-main-login > .main .cbi-value-title {
+    font-size: 1.2rem;
+    width: 100% !important;
+  }
+  .node-main-login > .main fieldset {
+    margin: 0;
+    padding: 0.5rem;
+  }
+  .commandbox p:first-of-type {
+    margin-top: -8px;
+  }
+  #syslog,
+  #diag-rc-output > pre,
+  #command-rc-output > pre,
+  [data-page="admin-services-wol"] .notice code {
+    font-size: 0.8rem !important;
+  }
+  h2 {
+    font-size: 2rem;
+  }
+  .cbi-section > h3:first-child,
+  .panel-title {
+    font-size: 1.4rem;
+    padding-bottom: 1rem;
+  }
+  .node-system-packages > .main .cbi-value.cbi-value-last > div {
+    width: 100% !important;
+  }
+  .th,
+  .td {
+    flex-basis: 50%;
+  }
+  .td.cbi-value-field {
+    flex-basis: 100%;
+  }
+  .td.cbi-value-field[data-type="button"],
+  .td.cbi-value-field[data-type="fvalue"] {
+    flex-basis: 25%;
+    text-align: left;
+  }
+  td > .ifacebadge,
+  .td > .ifacebadge {
+    font-size: 0.62rem;
+  }
+  #cbi-wireless > #wifi_assoclist_table .td {
+    overflow: hidden;
+  }
+  #cbi-wireless > .cbi-section-node .td,
+  .Interfaces .td.cbi-section-actions {
+    text-align: center !important;
+  }
+  .cbi-modal {
+    padding: 0.5rem;
+  }
+  .cbi-modal .cbi-value {
+    padding: 0 0 0.25rem;
+  }
+  .cbi-modal [data-tab-title] {
+    padding: 0 0.25rem !important;
+  }
+  [data-tab-title] {
+    padding: 0 0.5rem !important;
+  }
+  body,
+  code {
+    font-size: 0.8rem;
+  }
+  .main > .main-left > .nav > .slide > .slide-menu > li > a,
+  .tr[data-title]::before,
+  .tr.cbi-section-table-titles.named::before {
+    font-size: 1rem;
+  }
+  .cbi-value-title,
+  .cbi-value-description,
+  .cbi-value-field,
+  .cbi-value-field .cbi-dropdown,
+  .cbi-value-field .cbi-input-select,
+  .cbi-value input[type="text"],
+  .node-system-packages > .main .cbi-value .cbi-value-field input {
+    width: 100%;
+  }
+  .cbi-page-actions > div > input,
+  .mobile-hide,
+  [data-page="admin-status-processes"] .td[data-title="Hang Up"]::before,
+  [data-page="admin-status-processes"] .td[data-title="Terminate"]::before,
+  [data-page="admin-status-processes"] .td[data-title="Kill"]::before,
+  .hide-sm,
+  .hide-xs:not([data-title="MAC-Address"]) {
+    display: none;
+  }
+  .tabs > li > a,
+  select,
+  input {
+    font-size: 0.9rem;
+  }
+}
+@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;
+  }
+}
diff --git a/template/header.htm b/template/header.htm
index 4bc214f..bd8c59e 100644
--- a/template/header.htm
+++ b/template/header.htm
@@ -45,6 +45,7 @@
 <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
 <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
 <link rel="stylesheet" href="<%=media%>/gaya/gaya.css">
+<link rel="stylesheet" href="<%=media%>/gaya/gaya.dark.css">
 <link rel="shortcut icon" href="<%=media%>/favicon.ico">
 <% if node and node.css then %>
 <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
@@ -67,6 +68,7 @@
   <a href="/cgi-bin/luci/admin/nas/tinyfm"><img src="<%=media%>/images/file.png" /></a>
   <a href="/cgi-bin/luci/admin/status/vnstat2"><img src="<%=media%>/images/vnstat.png" /></a>
   <a href="/cgi-bin/luci/admin/status/about"><img src="<%=media%>/images/about.png" /></a>
+  <a href="javascript:void(0)" class="themetoggler"><img src="<%=media%>/images/reload.png" /></a>
 			</div>
         <label class="toggler">
 			<img src="<%=media%>/gaya/icons/arrow.svg" alt="">