From f3ae2a4c3b768e77183987d4f089ee4556e5c454 Mon Sep 17 00:00:00 2001
From: Hilman Maulana <hilman0.0maulana@gmail.com>
Date: Fri, 9 Feb 2024 00:52:24 +0700
Subject: [PATCH] Penyesuaian untuk luci-app-alpha-config

Ada beberapa penyesuaian dan fix bugs pada update 3.9.2-beta antara lain:

1. Memindahkan lokasi background login dan dasboard LuCI
2. Migrasi dari CSS ke HTML
---
 Makefile                                  |    2 +-
 luasrc/{gaya => background}/dashboard.png |  Bin
 luasrc/{style => background}/login.png    |  Bin
 luasrc/gaya/gaya.css                      | 6619 +++++++++++----------
 luasrc/style/style.css                    |  404 +-
 template/header.htm                       |    5 +-
 template/sysauth.htm                      |  122 +-
 7 files changed, 3809 insertions(+), 3343 deletions(-)
 rename luasrc/{gaya => background}/dashboard.png (100%)
 rename luasrc/{style => background}/login.png (100%)

diff --git a/Makefile b/Makefile
index 6870d1b..921e68a 100644
--- a/Makefile
+++ b/Makefile
@@ -10,7 +10,7 @@ THEME_NAME:=alpha
 THEME_TITLE:=Alpha
 
 PKG_NAME:=luci-theme-$(THEME_NAME)
-PKG_VERSION:=3.9.1-beta
+PKG_VERSION:=3.9.2-beta
 PKG_RELEASE:=9
 
 include $(INCLUDE_DIR)/package.mk
diff --git a/luasrc/gaya/dashboard.png b/luasrc/background/dashboard.png
similarity index 100%
rename from luasrc/gaya/dashboard.png
rename to luasrc/background/dashboard.png
diff --git a/luasrc/style/login.png b/luasrc/background/login.png
similarity index 100%
rename from luasrc/style/login.png
rename to luasrc/background/login.png
diff --git a/luasrc/gaya/gaya.css b/luasrc/gaya/gaya.css
index 00a44dd..35aa735 100755
--- a/luasrc/gaya/gaya.css
+++ b/luasrc/gaya/gaya.css
@@ -1,3132 +1,3593 @@
- 
-/* Base */
-@font-face {
-    font-family: "Inter-Regular";
-    src: url('/luci-static/alpha/fonts/Inter-Regular.woff2');
-  }
-  
-  @font-face {
-    font-family: "Inter-Medium";
-    src: url('/luci-static/alpha/fonts/Inter-Medium.woff2');
-  }
-  
-  @font-face {
-    font-family: "Inter-Black";
-    src: url('/luci-static/alpha/fonts/Inter-Black.woff2');
-  }
-  
-  @font-face {
-    font-family: "Inter-Bold";
-    src: url('/luci-static/alpha/fonts/Inter-Bold.woff2');
-  }
-  
-  @font-face {
-    font-family: "Quicksand-Bold";
-    src: url('/luci-static/alpha/fonts/Quicksand-Bold.ttf');
-  }
-  
-  @font-face {
-  font-family: argon;
-  src: url('/luci-static/alpha/fonts/argon.woff');
+ /* Base */
+ @font-face {
+ 	font-family: "Inter-Regular";
+ 	src: url('/luci-static/alpha/fonts/Inter-Regular.woff2');
+ }
 
-}
-[class^="icon-"],
-[class*=" icon-"] {
-  font-family: argon !important;
-  font-style: normal;
-  font-weight: 400;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-a {
-  color: #5a8dee;
-  text-decoration: none;
-  background-color: transparent;
-}
+ @font-face {
+ 	font-family: "Inter-Medium";
+ 	src: url('/luci-static/alpha/fonts/Inter-Medium.woff2');
+ }
 
-b {
-  color: #5a8dee;
-  text-decoration: none;
-  background-color: transparent;
-  font-family: "Quicksand-Bold";
-  
-}
-::-webkit-scrollbar:hover {
-  background-color: rgba(100, 100, 100, 0.09);
-}
-::-webkit-scrollbar-thumb:vertical {
-  background: rgba(100, 100, 100, 0.5);
-  -webkit-border-radius: 100px;
-}
-::-webkit-scrollbar-thumb:vertical:active {
-  background: rgba(100, 100, 100, 0.61);
-  -webkit-border-radius: 100px;
-}
-::-webkit-scrollbar {
-  width: 0.2em !important;
-  overflow: visible;
-  border-radius: 4px;
-  -webkit-border-radius: 4px;
-}
-::-webkit-scrollbar-track {
-  opacity: 0;
-  -webkit-transition: all 0.5s;
-}
-::-webkit-scrollbar-thumb {
-  overflow: visible;
-  border-radius: 4px;
-  background: rgba(100, 100, 100, 0.2);
-}
-.icon-hello-world:before {
-  content: "\e90e";
-}
-.icon-expand_more:before {
-  content: "\e20b";
-}
-.icon-menu:before {
-  content: "\e20e";
-}
-.icon-favorite:before {
-  content: "\e291";
-}
-.icon-spinner:before {
-  content: "\e603";
-}
-.icon-delete:before {
-  content: "\e900";
-}
-.icon-edit:before {
-  content: "\e901";
-}
-.icon-use:before {
-  content: "\e902";
-}
-.icon-loading:before {
-  content: "\e903";
-}
-.icon-switch:before {
-  content: "\e904";
-}
-.icon-error:before {
-  content: "\e905";
-}
-.icon-dashboard:before {
-  content: "\e906";
-}
-.icon-logout:before {
-  content: "\e907";
-}
-.icon-Network:before {
-  content: "\e908";
-}
-.icon-services:before {
-  content: "\e909";
-}
-.icon-system:before {
-  content: "\e90a";
-}
-.icon-vpn:before {
-  content: "\e90b";
-}
-.icon-storage:before {
-  content: "\e90c";
-}
-.icon-statistics:before {
-  content: "\e90d";
-}
-.icon-angle-right:before {
-  content: "\e90f";
-}
-.icon-user:before {
-  content: "\e971";
-}
-.icon-question:before {
-  content: "\f059";
-}
-  
-  :root {
-    --main-color: #09c;
-    --header-bg: #161624;
-    --header-color: rgb(10, 10, 10);
-    --bar-bg: #3f3f3f69;
-    --menu-bg-color: #fff;
-    --menu-color: #5f6368;
-    --menu-color-hover: #202124;
-    --main-menu-color: #202124;
-    --submenu-bg-hover: #4d5ca5;
-    --submenu-bg-hover-active: #09c;
-    --font-body: 'Inter-Regular';
-  }
+ @font-face {
+ 	font-family: "Inter-Black";
+ 	src: url('/luci-static/alpha/fonts/Inter-Black.woff2');
+ }
 
-  tt {
-    font-family: "Quicksand-Bold";
-    color: #09c;
-}
-  em {
-    font-style: italic;
-    color: #fff
-  }
+ @font-face {
+ 	font-family: "Inter-Bold";
+ 	src: url('/luci-static/alpha/fonts/Inter-Bold.woff2');
+ }
 
-  p {
-    display: block;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    color: #ffffff;
-}
+ @font-face {
+ 	font-family: "Quicksand-Bold";
+ 	src: url('/luci-static/alpha/fonts/Quicksand-Bold.ttf');
+ }
 
-li {
-  display: block;
-  list-style-type: disc;
-  margin-block-start: 5px;
-  margin-block-end: 5px;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-  color: #ffffff;
-}
+ @font-face {
+ 	font-family: argon;
+ 	src: url('/luci-static/alpha/fonts/argon.woff');
 
-small {
-    font-size: smaller;
-    color: #ffff;
-}
-label {
-    cursor: default;
-    color: #ffffff;
-}
-  .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;
-    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;
-    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: #fff;
-  }
-  html {
-    overflow-y: hidden;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-  }
-  body {
-    font-size: 0.8rem;
-    background: url('dashboard.png');
-    height: 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-attachment: fixed;
-    background-color: rgb(10, 10, 10);
-  }
+ }
+
+ [class^="icon-"],
+ [class*=" icon-"] {
+ 	font-family: argon !important;
+ 	font-style: normal;
+ 	font-weight: 400;
+ 	font-variant: normal;
+ 	text-transform: none;
+ 	line-height: 1;
+ 	-webkit-font-smoothing: antialiased;
+ 	-moz-osx-font-smoothing: grayscale;
+ }
+
+ a {
+ 	color: #5a8dee;
+ 	text-decoration: none;
+ 	background-color: transparent;
+ }
+
+ b {
+ 	color: #5a8dee;
+ 	text-decoration: none;
+ 	background-color: transparent;
+ 	font-family: "Quicksand-Bold";
+
+ }
+
+ ::-webkit-scrollbar:hover {
+ 	background-color: rgba(100, 100, 100, 0.09);
+ }
+
+ ::-webkit-scrollbar-thumb:vertical {
+ 	background: rgba(100, 100, 100, 0.5);
+ 	-webkit-border-radius: 100px;
+ }
+
+ ::-webkit-scrollbar-thumb:vertical:active {
+ 	background: rgba(100, 100, 100, 0.61);
+ 	-webkit-border-radius: 100px;
+ }
+
+ ::-webkit-scrollbar {
+ 	width: 0.2em !important;
+ 	overflow: visible;
+ 	border-radius: 4px;
+ 	-webkit-border-radius: 4px;
+ }
+
+ ::-webkit-scrollbar-track {
+ 	opacity: 0;
+ 	-webkit-transition: all 0.5s;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ 	overflow: visible;
+ 	border-radius: 4px;
+ 	background: rgba(100, 100, 100, 0.2);
+ }
+
+ .icon-hello-world:before {
+ 	content: "\e90e";
+ }
+
+ .icon-expand_more:before {
+ 	content: "\e20b";
+ }
+
+ .icon-menu:before {
+ 	content: "\e20e";
+ }
+
+ .icon-favorite:before {
+ 	content: "\e291";
+ }
+
+ .icon-spinner:before {
+ 	content: "\e603";
+ }
+
+ .icon-delete:before {
+ 	content: "\e900";
+ }
+
+ .icon-edit:before {
+ 	content: "\e901";
+ }
+
+ .icon-use:before {
+ 	content: "\e902";
+ }
+
+ .icon-loading:before {
+ 	content: "\e903";
+ }
+
+ .icon-switch:before {
+ 	content: "\e904";
+ }
+
+ .icon-error:before {
+ 	content: "\e905";
+ }
+
+ .icon-dashboard:before {
+ 	content: "\e906";
+ }
+
+ .icon-logout:before {
+ 	content: "\e907";
+ }
+
+ .icon-Network:before {
+ 	content: "\e908";
+ }
+
+ .icon-services:before {
+ 	content: "\e909";
+ }
+
+ .icon-system:before {
+ 	content: "\e90a";
+ }
+
+ .icon-vpn:before {
+ 	content: "\e90b";
+ }
+
+ .icon-storage:before {
+ 	content: "\e90c";
+ }
+
+ .icon-statistics:before {
+ 	content: "\e90d";
+ }
+
+ .icon-angle-right:before {
+ 	content: "\e90f";
+ }
+
+ .icon-user:before {
+ 	content: "\e971";
+ }
+
+ .icon-question:before {
+ 	content: "\f059";
+ }
+
+ :root {
+ 	--main-color: #09c;
+ 	--header-bg: #161624;
+ 	--header-color: rgb(10, 10, 10);
+ 	--bar-bg: #3f3f3f69;
+ 	--menu-bg-color: #fff;
+ 	--menu-color: #5f6368;
+ 	--menu-color-hover: #202124;
+ 	--main-menu-color: #202124;
+ 	--submenu-bg-hover: #4d5ca5;
+ 	--submenu-bg-hover-active: #09c;
+ 	--font-body: 'Inter-Regular';
+ }
+
+ tt {
+ 	font-family: "Quicksand-Bold";
+ 	color: #09c;
+ }
+
+ em {
+ 	font-style: italic;
+ 	color: #fff
+ }
+
+ p {
+ 	display: block;
+ 	margin-block-start: 1em;
+ 	margin-block-end: 1em;
+ 	margin-inline-start: 0px;
+ 	margin-inline-end: 0px;
+ 	color: #ffffff;
+ }
+
+ li {
+ 	display: block;
+ 	list-style-type: disc;
+ 	margin-block-start: 5px;
+ 	margin-block-end: 5px;
+ 	margin-inline-start: 0px;
+ 	margin-inline-end: 0px;
+ 	color: #ffffff;
+ }
+
+ small {
+ 	font-size: smaller;
+ 	color: #ffff;
+ }
+
+ label {
+ 	cursor: default;
+ 	color: #ffffff;
+ }
+
+ .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;
+ 	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;
+ 	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: #fff;
+ }
+
+ html {
+ 	overflow-y: hidden;
+ 	-webkit-text-size-adjust: 100%;
+ 	-ms-text-size-adjust: 100%;
+ }
+
+ body {
+ 	font-size: 0.8rem;
+ 	height: 100%;
+ 	background-position: center;
+ 	background-repeat: no-repeat;
+ 	background-size: cover;
+ 	background-attachment: fixed;
+ 	background-color: rgb(10, 10, 10);
+ }
+
+ .text {
+ 	font-style: italic;
+ 	color: #fff;
+ }
+
+ 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: 2.3rem;
+ 	color: rgba(255, 255, 255, 0.87);
+ 	border: 0;
+ 	border-bottom: 2px solid #30304b;
+ 	border-radius: 10px;
+ 	border-radius: 20px;
+ 	outline: 0;
+ 	background-color: #222235;
+ 	background-image: none;
+ 	box-shadow: none;
+ 	padding: 0.5rem;
+ }
+
+ 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;
+ 	color: #fff;
+ }
+
+ 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: #84d0ea;
+ }
+
+ 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;
+ 	color: var(--header-color);
+ 	background: #2222359a;
+ 	backdrop-filter: blur(10px);
+ 	-webkit-backdrop-filter: blur(10px);
+ }
+
+ 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: fixed;
+ 	top: 9px;
+ 	right: 1em;
+ 	float: right;
+ }
+
+ header>.fill>.container>.status>* {
+ 	position: relative;
+ 	top: 0.2rem;
+ 	float: left;
+ 	left: -2.5rem;
+ 	margin-left: 0.3rem;
+ 	cursor: pointer;
+ }
+
+ header>.fill>.container>.logout {
+ 	position: fixed;
+ 	top: 9px;
+ 	right: 1em;
+ 	float: right;
+ }
+
+ header>.fill>.container>.logout>* {
+ 	position: relative;
+ 	top: 0.2rem;
+ 	float: left;
+ 	right: 0rem;
+ 	margin-left: 0.3rem;
+ 	cursor: pointer;
+ 	content: "";
+ }
 
-  .text {
-    font-style: italic;
-    color: #fff;
-  }
-  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: 2.3rem;
-    color: rgba(255, 255, 255, 0.87);
-    border: 0;
-    border-bottom: 2px solid #30304b;
-    border-radius: 10px;
-    border-radius: 20px;
-    outline: 0;
-    background-color: #222235;
-    background-image: none;
-    box-shadow: none;
-    padding: 0.5rem;
-  }
-  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;
-    color: #fff;
-  }
-  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: #84d0ea;
-  }
-  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;
-    color: var(--header-color);
-    background: #2222359a;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-  }
-  
-  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: fixed;
-    top: 9px;
-    right: 1em;
-    float: right;
-  }
-  header > .fill > .container > .status > * {
-    position: relative;
-    top: 0.2rem;
-    float: left;
-    left: -2.5rem;
-    margin-left: 0.3rem;
-    cursor: pointer;
-  }
-    header > .fill > .container > .logout {
-    position: fixed;
-    top: 9px;
-    right: 1em;
-    float: right;
-  }
-  header > .fill > .container > .logout > * {
-  position: relative;
-  top: 0.2rem;
-  float: left;
-  right: 0rem;
-  margin-left: 0.3rem;
-  cursor: pointer;
-  content: "";
-  }
  .logout a {
-    position: absolute;
-    right: 14px;
-    width: 32px;
-    height: 32px;
-    content: "";
-    background: url(./icon/logout.svg) no-repeat;
-    text-indent: -9999px;
-    background-size: 32px;
-  }
-  /* End Header */
-  
-  /* Footer */
-  footer {
-    font-size: 0.8rem;
-    overflow: hidden;
-    text-align: center;
-    white-space: nowrap;
-    color: #000000;
-    padding: 1rem;
-  }
-  footer > a {
-    text-decoration: none;
-    align-items: center;
-    color: #e6e6e696;
-    border-bottom: 0;
-    background-color: #2222359a;
-    border-radius: 10px;
-    padding: 9px;
-    padding-bottom: 3px;
-    padding-top: 3px;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-  }
-  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: #000000da;
-      box-shadow: 0 0 10px 0px #0000002d;
-      box-sizing: content-box;
-      border-radius: 10px;
-    }
-    .navbar--hidden {
-      transform: translateY(60px);
-      box-shadow: none;
-    }
-  
-    .navbar .toggler {
-      transition-duration: 100ms;
-      position: absolute;
-      background: #ffffffb0;
-      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: 5px;
-      top: auto;
-      left: 10px;
-      right: auto;
-      width: 95%;
-      align: center;
-      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: #00000079;
-      border-radius: 20px;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      
-    }
-    .navbar--hidden {
-      transform: translateY(60px);
-      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: rgba(0, 0, 0, 0.781);
-    transition: .4s ease-in-out;
-    border-radius: 10px;
-  }
-  .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 {
-    display: inline-flex;
-    gap: 10px;
-  }
-  
-  .main > .loading > span > .loading-img:before,.loading-img:after {
-    content: "";
-    height: 20px;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    background:
-      linear-gradient(#222 0 0) top/100% 0% no-repeat,
-      radial-gradient(farthest-side,#000 95%,#0000) 50%/8px 8px no-repeat
-      #ffffff;
-    animation: l9 4s infinite ease-in;
-  }
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 32px;
+ 	height: 32px;
+ 	content: "";
+ 	background: url(./icon/logout.svg) no-repeat;
+ 	text-indent: -9999px;
+ 	background-size: 32px;
+ }
 
-  @keyframes l9 {
-    0%  {background-size:100% 0%,8px 8px;background-position:top, 50% 50%}
-    80% {background-size:100% 70%,8px 8px;background-position:top, 50% 70%}
-    84%,
-    100%{background-size:100% 0%,8px 8px;background-position:top, 50% 50%}
-  }
+ /* End Header */
 
-  .cbi-map {
-    margin-top: 10px;
-  }
-  
-  #cbi-shadowsocksr .cbi-map-descr {
-    display: none;
-  }
-  
-strong {
-    font-weight: bold;
-    color: rgb(255, 255, 255);
-  }
+ /* Footer */
+ footer {
+ 	font-size: 0.8rem;
+ 	overflow: hidden;
+ 	text-align: center;
+ 	white-space: nowrap;
+ 	color: #000000;
+ 	padding: 1rem;
+ }
 
-  .main-right {
-    float: right;
-    width: calc(100% - 16rem);
-    height: 100%;
-  }
-  .nowrap:not(.td) {
-    white-space: nowrap;
-    color: #ffffff;
-  }
-  [disabled="disabled"] {
-    pointer-events: none;
-  }
-  
-  /* Sidebar */
-  .main > .main-left {
-    position: fixed;
-    top: 4.8rem;
-    width: calc(0% + 16rem);
-    float: left;
-    overflow-x: auto;
-    background-color: #2222359a;
-    transition: visibility 400ms, width 400ms;
-    border-top-left-radius: 0px;
-    border-top-right-radius: 20px;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 20px;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    height: calc(100% - 3.5rem);
+ footer>a {
+ 	text-decoration: none;
+ 	align-items: center;
+ 	color: #e6e6e696;
+ 	border-bottom: 0;
+ 	background-color: #2222359a;
+ 	border-radius: 10px;
+ 	padding: 9px;
+ 	padding-bottom: 3px;
+ 	padding-top: 3px;
+ 	backdrop-filter: blur(10px);
+ 	-webkit-backdrop-filter: blur(10px);
+ }
 
-  }
-  .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;
-    padding: 0.5rem 1rem;
-  }
-  .main > .main-left > .nav > li a {
-    display: block;
-    color: #cbcbcb;
-  }
+ small {
+ 	font-size: 90%;
+ 	line-height: 1.42857143;
+ 	white-space: normal;
+ }
 
-  .main > .main-left > .nav > li > [data-title="Logout"] {
-    font-size: 1rem;
-    color: #fff;
-  }
+ /* End Footer */
 
-  .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: #fff;
-    padding: 0.5rem 1rem;
-    transition-duration: 200ms;
-    margin-bottom: 5px;
-  }
-  .main > .main-left > .nav > .slide > .menu::before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/app.svg) no-repeat;
-    background-size: 25px;
-  }
-  .main > .main-left > .nav > .slide > .menu.active::before {
-  }
+ /* 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: #000000da;
+ 		box-shadow: 0 0 10px 0px #0000002d;
+ 		box-sizing: content-box;
+ 		border-radius: 10px;
+ 	}
 
-    .main > .main-left > .nav > .slide > [data-title="Status"]:before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/status.svg) no-repeat;
-    background-size: 25px;
-}
+ 	.navbar--hidden {
+ 		transform: translateY(60px);
+ 		box-shadow: none;
+ 	}
 
-    .main > .main-left > .nav > .slide > [data-title="System"]:before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/system.svg) no-repeat;
-    background-size: 25px;
-}
+ 	.navbar .toggler {
+ 		transition-duration: 100ms;
+ 		position: absolute;
+ 		background: #ffffffb0;
+ 		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;
+ 	}
 
-    .main > .main-left > .nav > .slide > [data-title="Services"]:before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/services.svg) no-repeat;
-    background-size: 25px;
-}
+ 	.navbar .toggler img {
+ 		transform: rotate(270deg);
+ 	}
 
-    .main > .main-left > .nav > .slide > [data-title="NAS"]:before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/nas.svg) no-repeat;
-    background-size: 25px;
-}
+ 	.navbar .dropdown {
+ 		display: flex;
+ 		flex-direction: column;
+ 		overflow: hidden;
+ 		width: 64px;
+ 		padding: 0.25rem;
+ 	}
 
-    .main > .main-left > .nav > .slide > [data-title="Modem"]:before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/modem.svg) no-repeat;
-    background-size: 25px;
-}
+ 	.navbar .dropdown a {
+ 		display: block;
+ 		text-align: center;
+ 		padding: 8px;
+ 		text-decoration: none;
+ 		max-width: 100px;
+ 		width: 100%;
+ 	}
 
-    .main > .main-left > .nav > .slide > [data-title="Network"]:before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/network.svg) no-repeat;
-    background-size: 25px;
-}
+ 	.navbar .dropdown a img {
+ 		width: 100%;
+ 	}
 
-    .main > .main-left > .nav > .slide > [data-title="VPN"]:before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/vpn.svg) no-repeat;
-    background-size: 25px;
-}
+ 	.navbar.active {
+ 		right: -64px;
+ 	}
 
-    .main > .main-left > .nav > .slide > [data-title="Docker"]:before {
-    position: absolute;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/sidebar-icon/docker.svg) no-repeat;
-    background-size: 25px;
-}
+ 	.navbar.active .toggler {
+ 		right: calc(100% + 10px);
+ 	}
 
-  /* 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: #bebebe87 !important;
-    border-radius: 10px;
-    color: #fff;
-  }
-  .success {
-    background-color: #5cb85c !important;
-  }
-  .error {
-    color: red;
-  }
-  .alert,
-  .alert-message {
-    font-weight: 700;
-    margin-bottom: 1em;
-    border: 0;
-    border-radius: 20px;
-    background-color: #2222359a;
-    padding: 1rem;
-    margin: 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;
-    right: 14px;
-    width: 25px;
-    height: 25px;
-    content: "";
-    background: url(./icon/logout.svg) no-repeat;
-    background-size: 25px;
-  }
-  .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: #fff;
-  }
-  .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;
-    font-family: "Quicksand-Bold";
-    letter-spacing: 5px;
-    text-align: center;
-    padding-bottom: 10px;
-    margin: 2rem 0 0;
-    color: #ffffff;
-    animation-duration: 1s;
-    animation-name: down;
-  }
-  h3 {
-    font-size: 1.2rem;
-    font-family: 'Inter-Bold';
-    letter-spacing: 2px;
-    padding-bottom: 10px;
-    margin: 2rem 0 0;
-    color: #ffffff;
-  }
-  h4 {
-    font-size: 1.2rem;
-    color: #fff;
-    padding-bottom: 10px;
-    margin: 2rem 0 0;
-  }
-  h5 {
-    font-size: 1rem;
-    padding-bottom: 10px;
-    margin: 2rem 0 0;
-  }
+ 	.navbar.active .toggler img {
+ 		transform: rotate(90deg);
+ 	}
+ }
 
-  .cbi-tab-descr {
-    color: #09c;
-    margin: 1em;
-    padding: 1rem;
-  }
+ @media screen and (max-width: 720px) {
+ 	.navbar {
 
-#tabmenu {
-    padding: 0;
-}
+ 		overflow: hidden;
+ 		position: fixed;
+ 		bottom: 5px;
+ 		top: auto;
+ 		left: 10px;
+ 		right: auto;
+ 		width: 95%;
+ 		align: center;
+ 		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: #00000079;
+ 		border-radius: 20px;
+ 		backdrop-filter: blur(10px);
+ 		-webkit-backdrop-filter: blur(10px);
 
-  .cbi-section,
-  .cbi-section-error,
-  #iptables,
-  .Firewall form,
-  #cbi-network > .cbi-section-node,
-  #cbi-wireless > .cbi-section-node,
-  #cbi-wireless > #wifi_assoclist_table,
-  [data-tab-title],
-  [data-page^="admin-system-admin"]:not(.node-main-login)
-    .cbi-map:not(#cbi-dropbear),
-  [data-page="admin-system-opkg"] #maincontent > .container {
-    font-family: inherit;
-    font-weight: 400;
-    font-style: normal;
-    line-height: normal;
-    min-width: inherit;
-    border: 0;
-    border-radius: 0;
-    background-color: #2222359a;
-    margin: 1rem 0 0;
-    padding: 2rem;
-    border-radius: 20px;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-  }
-  .cbi-modal .cbi-section,
-  .cbi-section .cbi-section {
+ 	}
 
-  }
-  .cbi-modal .cbi-tabmenu {
-    margin-left: 0;
-  }
-  .cbi-map-descr,
-  .cbi-section-descr {
-    font-size: small;
-    text-align: center;
-    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: #e4e4e4;
-    border-bottom: thin solid #eeeeee00;
-    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%;
-    border-radius: 10px;
-  }
-  .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) {
-    color: #ffffff;
-    border-top: thin solid rgba(255, 255, 255, 0);
-  }
-  .table[width="100%"] > .tr:first-child > .td {
-    margin: auto 0;
-  }
-  .cbi-section-table-row {
-    margin-bottom: 1rem;
-    text-align: center !important;
-  }
-  .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;
-    background-color: #f0f0f0;
-    background-image: none;
-    -webkit-appearance: none;
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-    padding: 0 0.8rem;
-  }
-  .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;
-    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;
-    background-color: rgba(0, 229, 255, 0.47);
-    border-radius: 20px;
-  }
-  .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: rgba(0, 229, 255, 0.47);
-    border-radius: 20px;
-  }
-  .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;
-    background-color: rgba(255, 0, 0, 0.47);
-    border-radius: 20px;
-  }
-  .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 {
-    border-bottom: 0;
-    background-color: #2222359a;
-    border-radius: 20px;
-    padding: 9px;
-    padding-bottom: 3px;
-    padding-top: 3px;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-  }
-  .tabs > li,
-  .cbi-tabmenu > li {
-    display: inline-block;
-    cursor: pointer;
-    padding: 0.4rem;
-    margin: 0.3rem;
-    align-items: center;
+ 	.navbar--hidden {
+ 		transform: translateY(60px);
+ 		box-shadow: none;
+ 	}
 
-  }
+ 	.navbar a {
+ 		float: left;
+ 		text-align: center;
+ 		padding: 8px 0;
+ 		width: calc(100% / 6);
+ 		text-decoration: none;
+ 		max-width: 100px;
+ 	}
 
-  .tool_label_span {
-    color: aqua;
-}
+ 	.navbar a img {
+ 		width: 28px;
+ 	}
+ }
 
-  .tabs > li {
-    padding-bottom: 0.4rem;
-  }
-  .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: #ffffff;
-    padding: 0.6rem 0.9rem;
+ /* End Navbar */
 
-  }
-  .tabs > li[class~="active"] > a {
-    color: var(--main-color);
-  }
-  .cbi-tabmenu {
-    border-bottom: 0;
-    background-color: #2222359a;
-    border-radius: 20px;
-    padding: 9px;
-    padding-bottom: 3px;
-    padding-top: 3px;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-  }
-  .cbi-tabmenu > li:hover {
-    background-color: #474747;
-    border-radius: 20px;
+ .main {
+ 	position: relative;
+ 	top: 4rem;
+ 	bottom: 0;
+ 	overflow-y: auto;
+ 	height: calc(100% - 4rem);
+ }
 
-    
-  }
-  .cbi-tabmenu > li[class~="cbi-tab"] {
-    background-color: #ff94946a;
-    border-radius: 20px;
-  }
+ .main>.loading {
+ 	position: fixed;
+ 	z-index: 1000;
+ 	top: 0;
+ 	opacity: 1;
+ 	visibility: visible;
+ 	width: 100%;
+ 	height: 100%;
+ 	pointer-events: none;
+ 	background-color: rgba(0, 0, 0, 0.781);
+ 	transition: .4s ease-in-out;
+ 	border-radius: 10px;
+ }
 
-  .cbi-tabmenu > li[class~= data-tab=] {
-    color: #ffffff;
-  }
-  [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-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;
-    color: #fff;
-  }
-  .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 {
-  }
-  .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;
-    border-radius: 5px;
-  }
-  .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;
-  }
-  .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.3rem;
-  }
-  .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: #787878a8;
-    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;
-    justify-content: space-around;
-  }
-  .cbi-dropdown[open] > ul.dropdown > li {
-  }
-  .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;
-  }
-  .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;
-    background: #11111d61;
-    margin: 6px 0;
-  }
-    .cbi-progressbar title {
-    font-family: "Quicksand-Bold";
-    letter-spacing: 5px;
-    text-align: center;
-    padding-bottom: 10px;
-    margin: 2rem 0 0;
-    color: #ffffff;
-    }
-  .cbi-progressbar > div {
-    width: 0;
-    height: 100%;
-    transition: width 2s ease-in;
-    background: #0099cc;
-    padding: 0.5rem;
-  }
-  .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: 20px !important;
-    background: #8f8f8f75;
-    margin: 5em auto;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    padding: 1em;
+ .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;
+ }
 
-  }
-  .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: rgb(216, 216, 216);
-  }
-  .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;
-    color: #fff;
-  }
-  .spinning::before {
-    position: absolute;
-    font-size: medium;
-    font-style: "Quicksand-Bold";
-    left: 8px;
-    width: 20px;
-    height: 20px;
-    content: "";
-    animation: anim-rotate 2s infinite cubic-bezier(0.18, 0.89, 0.32, 1.28);
-    background: url(./icon/loading.svg) no-repeat center;
-    background-size: 20px;
-  }
-  }
-  .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: center;
-  }
-  .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;
-    background: #ffffff33;
-    padding: 0.5rem 0.8rem;
-    border-radius: 10px;
-  }
-  td > .ifacebadge,
-  .td > .ifacebadge {
-    font-size: 0.8rem;
-    background-color: #000000;
-    border-radius: 10px;
-  }
-  .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%;
-  }
+ .main>.loading>span>.loading-img {
+ 	display: inline-flex;
+ 	gap: 10px;
+ }
 
-  .network-status-table .ifacebox-body .ifacebadge {
-    align-items: center;
-    flex: 1 1 auto;
-    min-width: 220px;
-    background-color: #11111d;
-    margin: 0.5em 0.25em 0;
-    padding: 0.5em;
-    border-radius: 10px;
-  }
-  .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: 20px;
-    background-color: #10101057;
-    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;
-    color: #fff;
-  }
-  .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;
-    background-color: #54545450;
-    border-radius: 20px;
-    flex-wrap: nowrap;
-    align-content: center;
-    justify-content: flex-start;
-    align-items: center;
-  }
+ .main>.loading>span>.loading-img:before,
+ .loading-img:after {
+ 	content: "";
+ 	height: 20px;
+ 	aspect-ratio: 1;
+ 	border-radius: 50%;
+ 	background:
+ 		linear-gradient(#222 0 0) top/100% 0% no-repeat,
+ 		radial-gradient(farthest-side, #000 95%, #0000) 50%/8px 8px no-repeat #ffffff;
+ 	animation: l9 4s infinite ease-in;
+ }
 
-  div.ifacebox-head {
-    --zone-color-rgb: 144, 240, 144;
-    background-color: rgb(43, 79, 43);
-  }
+ @keyframes l9 {
+ 	0% {
+ 		background-size: 100% 0%, 8px 8px;
+ 		background-position: top, 50% 50%
+ 	}
 
-  style attribute {
-    --zone-color-rgb: 144, 240, 144;
-    background-color: rgb(43, 79, 43);
-  }
+ 	80% {
+ 		background-size: 100% 70%, 8px 8px;
+ 		background-position: top, 50% 70%
+ 	}
 
-  .ifacebox-head {
-    background: #939393;
-    padding: 0.25em;
-    color: #fff;
-  }
-  .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;
-    text-align: left !important;
-    font-size: 80% !important;
-    color: #fff !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: 20px;
-    background: #54545450;
-    box-shadow: 0 0 2px #444;
-    padding: 2px 5px;
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
+ 	84%,
+ 	100% {
+ 		background-size: 100% 0%, 8px 8px;
+ 		background-position: top, 50% 50%
+ 	}
+ }
 
-  }
-  .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: "";
-    transition: opacity 400ms, visibility 400ms;
-    visibility: hidden;
-    opacity: 0;
-    background-color: #2222359a;
-  }
-  #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: #2e2b2b00;
-    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 {
-    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: ;
-  }
-  .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 {
-    background-color: rgb(104, 104, 104);
-    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;
-    border-radius: 10px;
-  }
+ .cbi-map {
+ 	margin-top: 10px;
+ }
 
-  [data-indicator="poll-status"][data-style="active"] {
-    position: absolute;
-    right: 14px;
-    width: 32px;
-    height: 32px;
-    content: "";
-    background: url(./icon/loading.svg) no-repeat;
-    text-indent: -9999px;
-        animation: anim-rotate 5s infinite ease-in-out;
-    background-size: 32px;
-  }
+ #cbi-shadowsocksr .cbi-map-descr {
+ 	display: none;
+ }
 
-  [data-indicator="poll-status"][data-style="inactive"] {
-    position: absolute;
-    right: 14px;
-    width: 32px;
-    height: 32px;
-    content: "";
-    background: url(./icon/pause.svg) no-repeat;
-    text-indent: -9999px;
-    background-size: 32px;
-  }
+ strong {
+ 	font-weight: bold;
+ 	color: rgb(255, 255, 255);
+ }
+
+ .main-right {
+ 	float: right;
+ 	width: calc(100% - 16rem);
+ 	height: 100%;
+ }
+
+ .nowrap:not(.td) {
+ 	white-space: nowrap;
+ 	color: #ffffff;
+ }
+
+ [disabled="disabled"] {
+ 	pointer-events: none;
+ }
+
+ /* Sidebar */
+ .main>.main-left {
+ 	position: fixed;
+ 	top: 4.8rem;
+ 	width: calc(0% + 16rem);
+ 	float: left;
+ 	overflow-x: auto;
+ 	background-color: #2222359a;
+ 	transition: visibility 400ms, width 400ms;
+ 	border-top-left-radius: 0px;
+ 	border-top-right-radius: 20px;
+ 	border-bottom-left-radius: 0px;
+ 	border-bottom-right-radius: 20px;
+ 	backdrop-filter: blur(20px);
+ 	-webkit-backdrop-filter: blur(20px);
+ 	height: calc(100% - 3.5rem);
+
+ }
+
+ .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;
+ 	padding: 0.5rem 1rem;
+ }
+
+ .main>.main-left>.nav>li a {
+ 	display: block;
+ 	color: #cbcbcb;
+ }
+
+ .main>.main-left>.nav>li>[data-title="Logout"] {
+ 	font-size: 1rem;
+ 	color: #fff;
+ }
+
+ .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: #fff;
+ 	padding: 0.5rem 1rem;
+ 	transition-duration: 200ms;
+ 	margin-bottom: 5px;
+ }
+
+ .main>.main-left>.nav>.slide>.menu::before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/app.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .main>.main-left>.nav>.slide>.menu.active::before {}
+
+ .main>.main-left>.nav>.slide>[data-title="Status"]:before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/status.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .main>.main-left>.nav>.slide>[data-title="System"]:before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/system.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .main>.main-left>.nav>.slide>[data-title="Services"]:before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/services.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .main>.main-left>.nav>.slide>[data-title="NAS"]:before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/nas.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .main>.main-left>.nav>.slide>[data-title="Modem"]:before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/modem.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .main>.main-left>.nav>.slide>[data-title="Network"]:before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/network.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .main>.main-left>.nav>.slide>[data-title="VPN"]:before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/vpn.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .main>.main-left>.nav>.slide>[data-title="Docker"]:before {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/sidebar-icon/docker.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ /* 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: #bebebe87 !important;
+ 	border-radius: 10px;
+ 	color: #fff;
+ }
+
+ .success {
+ 	background-color: #5cb85c !important;
+ }
+
+ .error {
+ 	color: red;
+ }
+
+ .alert,
+ .alert-message {
+ 	font-weight: 700;
+ 	margin-bottom: 1em;
+ 	border: 0;
+ 	border-radius: 20px;
+ 	background-color: #2222359a;
+ 	padding: 1rem;
+ 	margin: 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;
+ 	right: 14px;
+ 	width: 25px;
+ 	height: 25px;
+ 	content: "";
+ 	background: url(./icon/logout.svg) no-repeat;
+ 	background-size: 25px;
+ }
+
+ .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: #fff;
+ }
+
+ .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;
+ 	font-family: "Quicksand-Bold";
+ 	letter-spacing: 5px;
+ 	text-align: center;
+ 	padding-bottom: 10px;
+ 	margin: 2rem 0 0;
+ 	color: #ffffff;
+ 	animation-duration: 1s;
+ 	animation-name: down;
+ }
+
+ h3 {
+ 	font-size: 1.2rem;
+ 	font-family: 'Inter-Bold';
+ 	letter-spacing: 2px;
+ 	padding-bottom: 10px;
+ 	margin: 2rem 0 0;
+ 	color: #ffffff;
+ }
+
+ h4 {
+ 	font-size: 1.2rem;
+ 	color: #fff;
+ 	padding-bottom: 10px;
+ 	margin: 2rem 0 0;
+ }
+
+ h5 {
+ 	font-size: 1rem;
+ 	padding-bottom: 10px;
+ 	margin: 2rem 0 0;
+ }
+
+ .cbi-tab-descr {
+ 	color: #09c;
+ 	margin: 1em;
+ 	padding: 1rem;
+ }
+
+ #tabmenu {
+ 	padding: 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: #2222359a;
+ 	margin: 1rem 0 0;
+ 	padding: 2rem;
+ 	border-radius: 20px;
+ 	backdrop-filter: blur(20px);
+ 	-webkit-backdrop-filter: blur(20px);
+ }
+
+ .cbi-modal .cbi-section,
+ .cbi-section .cbi-section {}
+
+ .cbi-modal .cbi-tabmenu {
+ 	margin-left: 0;
+ }
+
+ .cbi-map-descr,
+ .cbi-section-descr {
+ 	font-size: small;
+ 	text-align: center;
+ 	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: #e4e4e4;
+ 	border-bottom: thin solid #eeeeee00;
+ 	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%;
+ 	border-radius: 10px;
+ }
+
+ .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) {
+ 	color: #ffffff;
+ 	border-top: thin solid rgba(255, 255, 255, 0);
+ }
+
+ .table[width="100%"]>.tr:first-child>.td {
+ 	margin: auto 0;
+ }
+
+ .cbi-section-table-row {
+ 	margin-bottom: 1rem;
+ 	text-align: center !important;
+ }
+
+ .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;
+ 	background-color: #f0f0f0;
+ 	background-image: none;
+ 	-webkit-appearance: none;
+ 	-ms-touch-action: manipulation;
+ 	touch-action: manipulation;
+ 	padding: 0 0.8rem;
+ }
+
+ .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;
+ 	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;
+ 	background-color: rgba(0, 229, 255, 0.47);
+ 	border-radius: 20px;
+ }
+
+ .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: rgba(0, 229, 255, 0.47);
+ 	border-radius: 20px;
+ }
+
+ .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;
+ 	background-color: rgba(255, 0, 0, 0.47);
+ 	border-radius: 20px;
+ }
+
+ .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 {
+ 	border-bottom: 0;
+ 	background-color: #2222359a;
+ 	border-radius: 20px;
+ 	padding: 9px;
+ 	padding-bottom: 3px;
+ 	padding-top: 3px;
+ 	backdrop-filter: blur(20px);
+ 	-webkit-backdrop-filter: blur(20px);
+ }
+
+ .tabs>li,
+ .cbi-tabmenu>li {
+ 	display: inline-block;
+ 	cursor: pointer;
+ 	padding: 0.4rem;
+ 	margin: 0.3rem;
+ 	align-items: center;
+
+ }
+
+ .tool_label_span {
+ 	color: aqua;
+ }
+
+ .tabs>li {
+ 	padding-bottom: 0.4rem;
+ }
+
+ .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: #ffffff;
+ 	padding: 0.6rem 0.9rem;
+
+ }
+
+ .tabs>li[class~="active"]>a {
+ 	color: var(--main-color);
+ }
+
+ .cbi-tabmenu {
+ 	border-bottom: 0;
+ 	background-color: #2222359a;
+ 	border-radius: 20px;
+ 	padding: 9px;
+ 	padding-bottom: 3px;
+ 	padding-top: 3px;
+ 	backdrop-filter: blur(20px);
+ 	-webkit-backdrop-filter: blur(20px);
+ }
+
+ .cbi-tabmenu>li:hover {
+ 	background-color: #474747;
+ 	border-radius: 20px;
 
 
-  [data-indicator="uci-changes"][data-style="active"] {
-    position: absolute;
-    width: 32px;
-    height: 32px;
-    content: "";
-    background: url(./icon/save.svg) no-repeat;
-    text-indent: -9999px;
-    background-size: 32px;
-  }
+ }
 
-  #modemenu > li > a.active,
-  .notice {
-    background-color: rgb(66, 66, 66) !important;
-  }
+ .cbi-tabmenu>li[class~="cbi-tab"] {
+ 	background-color: #ff94946a;
+ 	border-radius: 20px;
+ }
 
-  #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);
-    border-radius: 10px;
-  }
-  .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);
-    border-radius: 10px;
-  }
-  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 {
-  
-  }
-  .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 down {
-  from {
-    margin-left: 50%;
-    opacity: 0;
-  }
-  to {
-    margin-left: 0%;
-    opacity: 1;
-  }
-}
-  @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;
-      position: relative;
-      /*bottom: -0.5rem;*/
-    }
-    .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: 2000000000px) {
-    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: 4.3rem;
-      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: 1rem;
-      color: #fff;
-    }
-    .main > .main-left > .nav > .slide > .slide-menu > li > a {
-      font-size: 0.7rem;
-      color: #fff;
-    }
-    #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: -webkit-sticky;
-      position: sticky;
-      top: 0rem;
-      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;
-      color: rgb(255, 255, 255);
-    }
-    .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;
-      color: #fff;
-    }
-    #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;
-    }
-    .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;
-      color: #ffffff;
-    }
-    .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;
-    }
+ .cbi-tabmenu>li[class~=data-tab=] {
+ 	color: #ffffff;
+ }
 
-    }
-    #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;
-    }
+ [data-tab-title] {
+ 	overflow: hidden;
+ 	height: 0;
+ 	opacity: 0;
+ 	margin: 0;
+ 	padding: 0rem 1rem !important;
+ }
 
-    .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 {
-      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 {
-      
-    }
-    .cbi-section > h3:first-child,
-    .panel-title {
-      font-size: 1.2rem;
-      padding-bottom: 1rem;
-    }
-    .node-system-packages > .main .cbi-value.cbi-value-last > div {
-      width: 100% !important;
-    }
-    .th,
-    .td {
-      flex-basis: 50%;
-      color: #fff;
-    }
+ [data-tab-active="true"] {
+ 	overflow: visible;
+ 	height: auto;
+ 	opacity: 1;
+ 	transition: opacity 0.25s ease-in;
+ 	margin: inherit !important;
+ }
 
-    .tr > .td[data-title="Sensor"] {
-      text-align: center;
-    }
+ .cbi-section-node-tabbed {
+ 	margin-top: 0;
+ 	border-top: 0;
+ 	padding: 0;
+ }
 
-    .tr > .td[data-title="Temperature"] {
-      text-align: center;
-    }
+ .cbi-value-field,
+ .cbi-value-description {
+ 	line-height: 1.25;
+ 	display: table-cell;
+ }
 
-    .tr > .td[data-title="Hostname"] {
-      text-align: center;
-    }
+ .cbi-value-description {
+ 	font-size: small;
+ 	padding-top: 0.4rem;
+ 	opacity: 0.5;
+ 	color: #fff;
+ }
 
-    .tr > .td[data-title="IPv4 address"] {
-      text-align: center;
-    }
-    
-    .tr > .td[data-title="MAC address"] {
-      text-align: center;
-    }
-    
-    .tr > .td[data-title="Lease time remaining"] {
-      text-align: center;
-    }
+ .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 {}
+
+ .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;
+ 	border-radius: 5px;
+ }
+
+ .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;
+ }
+
+ .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.3rem;
+ }
+
+ .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: #787878a8;
+ 	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;
+ 	justify-content: space-around;
+ }
+
+ .cbi-dropdown[open]>ul.dropdown>li {}
+
+ .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;
+ }
+
+ .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;
+ 	background: #11111d61;
+ 	margin: 6px 0;
+ }
+
+ .cbi-progressbar title {
+ 	font-family: "Quicksand-Bold";
+ 	letter-spacing: 5px;
+ 	text-align: center;
+ 	padding-bottom: 10px;
+ 	margin: 2rem 0 0;
+ 	color: #ffffff;
+ }
+
+ .cbi-progressbar>div {
+ 	width: 0;
+ 	height: 100%;
+ 	transition: width 2s ease-in;
+ 	background: #0099cc;
+ 	padding: 0.5rem;
+ }
+
+ .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: 20px !important;
+ 	background: #8f8f8f75;
+ 	margin: 5em auto;
+ 	backdrop-filter: blur(10px);
+ 	-webkit-backdrop-filter: blur(10px);
+ 	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: rgb(216, 216, 216);
+ }
+
+ .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;
+ 	color: #fff;
+ }
+
+ .spinning::before {
+ 	position: absolute;
+ 	font-size: medium;
+ 	font-style: "Quicksand-Bold";
+ 	left: 8px;
+ 	width: 20px;
+ 	height: 20px;
+ 	content: "";
+ 	animation: anim-rotate 2s infinite cubic-bezier(0.18, 0.89, 0.32, 1.28);
+ 	background: url(./icon/loading.svg) no-repeat center;
+ 	background-size: 20px;
+ }
+ }
+
+ .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: center;
+ }
+
+ .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;
+ 	background: #ffffff33;
+ 	padding: 0.5rem 0.8rem;
+ 	border-radius: 10px;
+ }
+
+ td>.ifacebadge,
+ .td>.ifacebadge {
+ 	font-size: 0.8rem;
+ 	background-color: #000000;
+ 	border-radius: 10px;
+ }
+
+ .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: #11111d;
+ 	margin: 0.5em 0.25em 0;
+ 	padding: 0.5em;
+ 	border-radius: 10px;
+ }
+
+ .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: 20px;
+ 	background-color: #10101057;
+ 	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;
+ 	color: #fff;
+ }
+
+ .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;
+ 	background-color: #54545450;
+ 	border-radius: 20px;
+ 	flex-wrap: nowrap;
+ 	align-content: center;
+ 	justify-content: flex-start;
+ 	align-items: center;
+ }
+
+ div.ifacebox-head {
+ 	--zone-color-rgb: 144, 240, 144;
+ 	background-color: rgb(43, 79, 43);
+ }
+
+ style attribute {
+ 	--zone-color-rgb: 144, 240, 144;
+ 	background-color: rgb(43, 79, 43);
+ }
+
+ .ifacebox-head {
+ 	background: #939393;
+ 	padding: 0.25em;
+ 	color: #fff;
+ }
+
+ .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;
+ 	text-align: left !important;
+ 	font-size: 80% !important;
+ 	color: #fff !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: 20px;
+ 	background: #54545450;
+ 	box-shadow: 0 0 2px #444;
+ 	padding: 2px 5px;
+ 	-webkit-backdrop-filter: blur(20px);
+ 	backdrop-filter: blur(20px);
+
+ }
+
+ .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: "";
+ 	transition: opacity 400ms, visibility 400ms;
+ 	visibility: hidden;
+ 	opacity: 0;
+ 	background-color: #2222359a;
+ }
+
+ #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: #2e2b2b00;
+ 	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 {
+ 	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: ;
+ }
+
+ .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 {
+ 	background-color: rgb(104, 104, 104);
+ 	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;
+ 	border-radius: 10px;
+ }
+
+ [data-indicator="poll-status"][data-style="active"] {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 32px;
+ 	height: 32px;
+ 	content: "";
+ 	background: url(./icon/loading.svg) no-repeat;
+ 	text-indent: -9999px;
+ 	animation: anim-rotate 5s infinite ease-in-out;
+ 	background-size: 32px;
+ }
+
+ [data-indicator="poll-status"][data-style="inactive"] {
+ 	position: absolute;
+ 	right: 14px;
+ 	width: 32px;
+ 	height: 32px;
+ 	content: "";
+ 	background: url(./icon/pause.svg) no-repeat;
+ 	text-indent: -9999px;
+ 	background-size: 32px;
+ }
 
 
-    .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: 
-    }
-    .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: 30%;
-      color: #fff;
-    }
-    .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;
-    }
-  }
-  
+ [data-indicator="uci-changes"][data-style="active"] {
+ 	position: absolute;
+ 	width: 32px;
+ 	height: 32px;
+ 	content: "";
+ 	background: url(./icon/save.svg) no-repeat;
+ 	text-indent: -9999px;
+ 	background-size: 32px;
+ }
+
+ #modemenu>li>a.active,
+ .notice {
+ 	background-color: rgb(66, 66, 66) !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);
+ 	border-radius: 10px;
+ }
+
+ .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);
+ 	border-radius: 10px;
+ }
+
+ 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 {}
+
+ .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 down {
+ 	from {
+ 		margin-left: 50%;
+ 		opacity: 0;
+ 	}
+
+ 	to {
+ 		margin-left: 0%;
+ 		opacity: 1;
+ 	}
+ }
+
+ @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;
+ 		position: relative;
+ 		/*bottom: -0.5rem;*/
+ 	}
+
+ 	.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: 2000000000px) {
+ 	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: 4.3rem;
+ 		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: 1rem;
+ 		color: #fff;
+ 	}
+
+ 	.main>.main-left>.nav>.slide>.slide-menu>li>a {
+ 		font-size: 0.7rem;
+ 		color: #fff;
+ 	}
+
+ 	#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: -webkit-sticky;
+ 		position: sticky;
+ 		top: 0rem;
+ 		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;
+ 		color: rgb(255, 255, 255);
+ 	}
+
+ 	.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;
+ 		color: #fff;
+ 	}
+
+ 	#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;
+ 	}
+
+ 	.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;
+ 		color: #ffffff;
+ 	}
+
+ 	.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;
+ 	}
+
+ }
+
+ #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 {
+ 	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 {}
+
+ .cbi-section>h3:first-child,
+ .panel-title {
+ 	font-size: 1.2rem;
+ 	padding-bottom: 1rem;
+ }
+
+ .node-system-packages>.main .cbi-value.cbi-value-last>div {
+ 	width: 100% !important;
+ }
+
+ .th,
+ .td {
+ 	flex-basis: 50%;
+ 	color: #fff;
+ }
+
+ .tr>.td[data-title="Sensor"] {
+ 	text-align: center;
+ }
+
+ .tr>.td[data-title="Temperature"] {
+ 	text-align: center;
+ }
+
+ .tr>.td[data-title="Hostname"] {
+ 	text-align: center;
+ }
+
+ .tr>.td[data-title="IPv4 address"] {
+ 	text-align: center;
+ }
+
+ .tr>.td[data-title="MAC address"] {
+ 	text-align: center;
+ }
+
+ .tr>.td[data-title="Lease time remaining"] {
+ 	text-align: center;
+ }
+
+
+ .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:
+ }
+
+ .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: 30%;
+ 	color: #fff;
+ }
+
+ .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;
+ 	}
+ }
\ No newline at end of file
diff --git a/luasrc/style/style.css b/luasrc/style/style.css
index 0221bed..a162c10 100644
--- a/luasrc/style/style.css
+++ b/luasrc/style/style.css
@@ -1,28 +1,26 @@
-
 /*--------------------
 catatan usahakan untuk mengganti bg pakai format png, kalo jpg ganti aja di bagian body, sesuaikan aja nama formatnya
 ---------------------*/
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 body,
 html {
-  height: 100%;
-  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	height: 100%;
+	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 body {
-background: url('login.png');
-height: 100%;
-background-position: center;
-background-repeat: no-repeat;
-background-size: cover;
-background-attachment: fixed;
+	height: 100%;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-attachment: fixed;
 }
 
 
@@ -30,10 +28,11 @@ background-attachment: fixed;
 Text
 ---------------------*/
 
-h2, h3 {
-  font-size: 16px;
+h2,
+h3 {
+	font-size: 16px;
 	letter-spacing: -1px;
-  line-height: 20px;
+	line-height: 20px;
 }
 
 h2 {
@@ -50,53 +49,53 @@ h3 {
 Icons
 ---------------------*/
 .i {
-  width: 20px;
-  height: 20px;
+	width: 20px;
+	height: 20px;
 }
 
 .i-login {
-  margin: 13px 0px 0px 15px;
-  position: relative;
-  float: left;
-  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNi4yMjkgNDE2LjIyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE2LjIyOSA0MTYuMjI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQwMy43MjksMjkuNjVINzEuODAyYy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41djg2LjM2M2MwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41czEyLjUtNS41OTcsMTIuNS0xMi41VjU0LjY1ICAgIGgzMDYuOTI3djMwNi45MjhIODQuMzAydi03My44NjFjMC02LjkwMy01LjU5Ny0xMi41LTEyLjUtMTIuNXMtMTIuNSw1LjU5Ny0xMi41LDEyLjV2ODYuMzYxYzAsNi45MDMsNS41OTcsMTIuNSwxMi41LDEyLjUgICAgaDMzMS45MjdjNi45MDIsMCwxMi41LTUuNTk3LDEyLjUtMTIuNVY0Mi4xNUM0MTYuMjI5LDM1LjI0Nyw0MTAuNjMxLDI5LjY1LDQwMy43MjksMjkuNjV6IiBmaWxsPSIjODczMTRlIi8+CgkJPHBhdGggZD0iTTE4NS40MTcsMjg3LjgxMWMwLDUuMDU3LDMuMDQ1LDkuNjEzLDcuNzE2LDExLjU1YzEuNTQ3LDAuNjQyLDMuMTcsMC45NSw0Ljc4MSwwLjk1YzMuMjUzLDAsNi40NTEtMS4yNyw4Ljg0Mi0zLjY2ICAgIGw3OS42OTctNzkuNjk3YzIuMzQ0LTIuMzQ0LDMuNjYtNS41MjMsMy42Ni04LjgzOWMwLTMuMzE2LTEuMzE2LTYuNDk1LTMuNjYtOC44MzlsLTc5LjY5Ny03OS42OTcgICAgYy0zLjU3NS0zLjU3NS04Ljk1MS00LjY0Ni0xMy42MjMtMi43MWMtNC42NzEsMS45MzYtNy43MTYsNi40OTMtNy43MTYsMTEuNTQ5djY3LjE5N0gxMi41Yy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41ICAgIGMwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41aDE3Mi45MTdWMjg3LjgxMUwxODUuNDE3LDI4Ny44MTF6IE0yMTAuNDE3LDE1OC41OTRsNDkuNTIxLDQ5LjUybC00OS41MjEsNDkuNTIxVjE1OC41OTR6IiBmaWxsPSIjODczMTRlIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
-  background-size: 18px 18px;
-  background-repeat: no-repeat;
-  background-position: center;
+	margin: 13px 0px 0px 15px;
+	position: relative;
+	float: left;
+	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNi4yMjkgNDE2LjIyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE2LjIyOSA0MTYuMjI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQwMy43MjksMjkuNjVINzEuODAyYy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41djg2LjM2M2MwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41czEyLjUtNS41OTcsMTIuNS0xMi41VjU0LjY1ICAgIGgzMDYuOTI3djMwNi45MjhIODQuMzAydi03My44NjFjMC02LjkwMy01LjU5Ny0xMi41LTEyLjUtMTIuNXMtMTIuNSw1LjU5Ny0xMi41LDEyLjV2ODYuMzYxYzAsNi45MDMsNS41OTcsMTIuNSwxMi41LDEyLjUgICAgaDMzMS45MjdjNi45MDIsMCwxMi41LTUuNTk3LDEyLjUtMTIuNVY0Mi4xNUM0MTYuMjI5LDM1LjI0Nyw0MTAuNjMxLDI5LjY1LDQwMy43MjksMjkuNjV6IiBmaWxsPSIjODczMTRlIi8+CgkJPHBhdGggZD0iTTE4NS40MTcsMjg3LjgxMWMwLDUuMDU3LDMuMDQ1LDkuNjEzLDcuNzE2LDExLjU1YzEuNTQ3LDAuNjQyLDMuMTcsMC45NSw0Ljc4MSwwLjk1YzMuMjUzLDAsNi40NTEtMS4yNyw4Ljg0Mi0zLjY2ICAgIGw3OS42OTctNzkuNjk3YzIuMzQ0LTIuMzQ0LDMuNjYtNS41MjMsMy42Ni04LjgzOWMwLTMuMzE2LTEuMzE2LTYuNDk1LTMuNjYtOC44MzlsLTc5LjY5Ny03OS42OTcgICAgYy0zLjU3NS0zLjU3NS04Ljk1MS00LjY0Ni0xMy42MjMtMi43MWMtNC42NzEsMS45MzYtNy43MTYsNi40OTMtNy43MTYsMTEuNTQ5djY3LjE5N0gxMi41Yy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41ICAgIGMwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41aDE3Mi45MTdWMjg3LjgxMUwxODUuNDE3LDI4Ny44MTF6IE0yMTAuNDE3LDE1OC41OTRsNDkuNTIxLDQ5LjUybC00OS41MjEsNDkuNTIxVjE1OC41OTR6IiBmaWxsPSIjODczMTRlIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
+	background-size: 18px 18px;
+	background-repeat: no-repeat;
+	background-position: center;
 }
 
 .i-more {
-  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibW9yZSI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik03Ni41LDIyOS41QzM0LjMsMjI5LjUsMCwyNjMuOCwwLDMwNnMzNC4zLDc2LjUsNzYuNSw3Ni41UzE1MywzNDguMiwxNTMsMzA2UzExOC43LDIyOS41LDc2LjUsMjI5LjV6IE03Ni41LDM0NC4yICAgICBjLTIxLjEsMC0zOC4yLTE3LjEwMS0zOC4yLTM4LjJjMC0yMS4xLDE3LjEtMzguMiwzOC4yLTM4LjJzMzguMiwxNy4xLDM4LjIsMzguMkMxMTQuNywzMjcuMSw5Ny42LDM0NC4yLDc2LjUsMzQ0LjJ6ICAgICAgTTUzNS41LDIyOS41Yy00Mi4yLDAtNzYuNSwzNC4zLTc2LjUsNzYuNXMzNC4zLDc2LjUsNzYuNSw3Ni41UzYxMiwzNDguMiw2MTIsMzA2UzU3Ny43LDIyOS41LDUzNS41LDIyOS41eiBNNTM1LjUsMzQ0LjIgICAgIGMtMjEuMSwwLTM4LjItMTcuMTAxLTM4LjItMzguMmMwLTIxLjEsMTcuMTAxLTM4LjIsMzguMi0zOC4yczM4LjIsMTcuMSwzOC4yLDM4LjJDNTczLjcsMzI3LjEsNTU2LjYsMzQ0LjIsNTM1LjUsMzQ0LjJ6ICAgICAgTTMwNiwyMjkuNWMtNDIuMiwwLTc2LjUsMzQuMy03Ni41LDc2LjVzMzQuMyw3Ni41LDc2LjUsNzYuNXM3Ni41LTM0LjMsNzYuNS03Ni41UzM0OC4yLDIyOS41LDMwNiwyMjkuNXogTTMwNiwzNDQuMiAgICAgYy0yMS4xLDAtMzguMi0xNy4xMDEtMzguMi0zOC4yYzAtMjEuMSwxNy4xLTM4LjIsMzguMi0zOC4yYzIxLjEsMCwzOC4yLDE3LjEsMzguMiwzOC4yQzM0NC4yLDMyNy4xLDMyNy4xLDM0NC4yLDMwNiwzNDQuMnoiIGZpbGw9IiNkZjQwNWEiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
-  background-size: 20px 20px;
-  background-repeat: no-repeat;
-  background-position: center;
+	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibW9yZSI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik03Ni41LDIyOS41QzM0LjMsMjI5LjUsMCwyNjMuOCwwLDMwNnMzNC4zLDc2LjUsNzYuNSw3Ni41UzE1MywzNDguMiwxNTMsMzA2UzExOC43LDIyOS41LDc2LjUsMjI5LjV6IE03Ni41LDM0NC4yICAgICBjLTIxLjEsMC0zOC4yLTE3LjEwMS0zOC4yLTM4LjJjMC0yMS4xLDE3LjEtMzguMiwzOC4yLTM4LjJzMzguMiwxNy4xLDM4LjIsMzguMkMxMTQuNywzMjcuMSw5Ny42LDM0NC4yLDc2LjUsMzQ0LjJ6ICAgICAgTTUzNS41LDIyOS41Yy00Mi4yLDAtNzYuNSwzNC4zLTc2LjUsNzYuNXMzNC4zLDc2LjUsNzYuNSw3Ni41UzYxMiwzNDguMiw2MTIsMzA2UzU3Ny43LDIyOS41LDUzNS41LDIyOS41eiBNNTM1LjUsMzQ0LjIgICAgIGMtMjEuMSwwLTM4LjItMTcuMTAxLTM4LjItMzguMmMwLTIxLjEsMTcuMTAxLTM4LjIsMzguMi0zOC4yczM4LjIsMTcuMSwzOC4yLDM4LjJDNTczLjcsMzI3LjEsNTU2LjYsMzQ0LjIsNTM1LjUsMzQ0LjJ6ICAgICAgTTMwNiwyMjkuNWMtNDIuMiwwLTc2LjUsMzQuMy03Ni41LDc2LjVzMzQuMyw3Ni41LDc2LjUsNzYuNXM3Ni41LTM0LjMsNzYuNS03Ni41UzM0OC4yLDIyOS41LDMwNiwyMjkuNXogTTMwNiwzNDQuMiAgICAgYy0yMS4xLDAtMzguMi0xNy4xMDEtMzguMi0zOC4yYzAtMjEuMSwxNy4xLTM4LjIsMzguMi0zOC4yYzIxLjEsMCwzOC4yLDE3LjEsMzguMiwzOC4yQzM0NC4yLDMyNy4xLDMyNy4xLDM0NC4yLDMwNiwzNDQuMnoiIGZpbGw9IiNkZjQwNWEiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
+	background-size: 20px 20px;
+	background-repeat: no-repeat;
+	background-position: center;
 }
 
 .i-save {
-  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0idGljayI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MzYuNywxOTYuNzAxTDI1OC4xODgsMzc1LjIxM2wtODIuODY5LTgyLjg4N2MtNy4yODctNy4yODctMTkuMTI1LTcuMjg3LTI2LjQxMiwwcy03LjI4NywxOS4xMjUsMCwyNi40MTIgICAgIGw5My44MDgsOTMuODA4YzAuNjMxLDAuODk5LDEuMDE0LDEuOTMyLDEuODE3LDIuNzM1YzMuNzY4LDMuNzY4LDguNzIxLDUuNTA4LDEzLjY1NSw1LjM3NGM0LjkzNCwwLjExNSw5LjkwNy0xLjYwNiwxMy42NzQtNS4zNzQgICAgIGMwLjgwMy0wLjgwNCwxLjE4Ni0xLjgzNiwxLjgxNy0yLjczNWwxODkuNDM0LTE4OS40MzNjNy4yODYtNy4yODcsNy4yODYtMTkuMTI1LDAtMjYuNDEyICAgICBDNDU1LjgwNiwxODkuNDE0LDQ0My45ODcsMTg5LjQxNCw0MzYuNywxOTYuNzAxeiBNMzA2LDBDMTM2Ljk5MiwwLDAsMTM2Ljk5MiwwLDMwNnMxMzYuOTkyLDMwNiwzMDYsMzA2ICAgICBjMTY4Ljk4OCwwLDMwNi0xMzYuOTkyLDMwNi0zMDZTNDc1LjAwOCwwLDMwNiwweiBNMzA2LDU3My43NUMxNTguMTI1LDU3My43NSwzOC4yNSw0NTMuODc1LDM4LjI1LDMwNiAgICAgQzM4LjI1LDE1OC4xMjUsMTU4LjEyNSwzOC4yNSwzMDYsMzguMjVjMTQ3Ljg3NSwwLDI2Ny43NSwxMTkuODc1LDI2Ny43NSwyNjcuNzVDNTczLjc1LDQ1My44NzUsNDUzLjg3NSw1NzMuNzUsMzA2LDU3My43NXoiIGZpbGw9IiMyMGMxOTgiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
-  background-size: 20px 20px;
-  background-repeat: no-repeat;
-  background-position: center;
+	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0idGljayI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MzYuNywxOTYuNzAxTDI1OC4xODgsMzc1LjIxM2wtODIuODY5LTgyLjg4N2MtNy4yODctNy4yODctMTkuMTI1LTcuMjg3LTI2LjQxMiwwcy03LjI4NywxOS4xMjUsMCwyNi40MTIgICAgIGw5My44MDgsOTMuODA4YzAuNjMxLDAuODk5LDEuMDE0LDEuOTMyLDEuODE3LDIuNzM1YzMuNzY4LDMuNzY4LDguNzIxLDUuNTA4LDEzLjY1NSw1LjM3NGM0LjkzNCwwLjExNSw5LjkwNy0xLjYwNiwxMy42NzQtNS4zNzQgICAgIGMwLjgwMy0wLjgwNCwxLjE4Ni0xLjgzNiwxLjgxNy0yLjczNWwxODkuNDM0LTE4OS40MzNjNy4yODYtNy4yODcsNy4yODYtMTkuMTI1LDAtMjYuNDEyICAgICBDNDU1LjgwNiwxODkuNDE0LDQ0My45ODcsMTg5LjQxNCw0MzYuNywxOTYuNzAxeiBNMzA2LDBDMTM2Ljk5MiwwLDAsMTM2Ljk5MiwwLDMwNnMxMzYuOTkyLDMwNiwzMDYsMzA2ICAgICBjMTY4Ljk4OCwwLDMwNi0xMzYuOTkyLDMwNi0zMDZTNDc1LjAwOCwwLDMwNiwweiBNMzA2LDU3My43NUMxNTguMTI1LDU3My43NSwzOC4yNSw0NTMuODc1LDM4LjI1LDMwNiAgICAgQzM4LjI1LDE1OC4xMjUsMTU4LjEyNSwzOC4yNSwzMDYsMzguMjVjMTQ3Ljg3NSwwLDI2Ny43NSwxMTkuODc1LDI2Ny43NSwyNjcuNzVDNTczLjc1LDQ1My44NzUsNDUzLjg3NSw1NzMuNzUsMzA2LDU3My43NXoiIGZpbGw9IiMyMGMxOTgiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
+	background-size: 20px 20px;
+	background-repeat: no-repeat;
+	background-position: center;
 }
 
 .i-warning {
-  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi44MTYgNjEyLjgxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjgxNiA2MTIuODE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTMwNi40MDgsMEMxMzcuMzY4LDAsMC4zNzEsMTM2Ljk5NywwLjM3MSwzMDYuMDM3czEzNi45OTcsMzA2Ljc3OSwzMDYuMDM3LDMwNi43NzlzMzA2LjAzNy0xMzcuODEzLDMwNi4wMzctMzA2LjAzNyAgIEM2MTIuNDQ1LDEzNy43MzksNDc1LjQ0OCwwLDMwNi40MDgsMHogTTMwNi40MDgsNTgzLjE0N2MtMTUyLjIwMywwLTI3Ni4zNjgtMTI0LjE2NS0yNzYuMzY4LTI3Ni4zNjggICBTMTU0LjIwNSwyOS41OTUsMzA2LjQwOCwyOS41OTVTNTgyLjc3NiwxNTMuNzYsNTgyLjc3NiwzMDYuNzc5UzQ1OC42MTEsNTgzLjE0NywzMDYuNDA4LDU4My4xNDd6IE0zMjEuNjEzLDQzMS43NiAgIGMwLDguODI3LTcuMTk1LDE2LjAyMS0xNi4wMjEsMTYuMDIxYy04LjgyNywwLTE2LjAyMS03LjE5NS0xNi4wMjEtMTYuMDIxYzAtOC44MjcsNy4xOTUtMTYuMDIxLDE2LjAyMS0xNi4wMjEgICBTMzIxLjYxMyw0MjIuOTM0LDMyMS42MTMsNDMxLjc2eiBNMjkwLjM4NywzNTMuMjExdi0xODAuMjRjMC04LjAxMSw2LjM3OS0xNC4zOSwxNC4zOS0xNC4zOWM4LjAxMSwwLDE0LjM5LDYuMzc5LDE0LjM5LDE0LjM5ICAgdjE4MC4yNGMwLDguMDExLTYuMzc5LDE0LjM5LTE0LjM5LDE0LjM5QzI5Ni43NjYsMzY4LjQ5MSwyOTAuMzg3LDM2MS4yMjIsMjkwLjM4NywzNTMuMjExeiIgZmlsbD0iI2Y1ZDg3OCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
-  background-size: 20px 20px;
-  background-repeat: no-repeat;
-  background-position: center;
+	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi44MTYgNjEyLjgxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjgxNiA2MTIuODE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTMwNi40MDgsMEMxMzcuMzY4LDAsMC4zNzEsMTM2Ljk5NywwLjM3MSwzMDYuMDM3czEzNi45OTcsMzA2Ljc3OSwzMDYuMDM3LDMwNi43NzlzMzA2LjAzNy0xMzcuODEzLDMwNi4wMzctMzA2LjAzNyAgIEM2MTIuNDQ1LDEzNy43MzksNDc1LjQ0OCwwLDMwNi40MDgsMHogTTMwNi40MDgsNTgzLjE0N2MtMTUyLjIwMywwLTI3Ni4zNjgtMTI0LjE2NS0yNzYuMzY4LTI3Ni4zNjggICBTMTU0LjIwNSwyOS41OTUsMzA2LjQwOCwyOS41OTVTNTgyLjc3NiwxNTMuNzYsNTgyLjc3NiwzMDYuNzc5UzQ1OC42MTEsNTgzLjE0NywzMDYuNDA4LDU4My4xNDd6IE0zMjEuNjEzLDQzMS43NiAgIGMwLDguODI3LTcuMTk1LDE2LjAyMS0xNi4wMjEsMTYuMDIxYy04LjgyNywwLTE2LjAyMS03LjE5NS0xNi4wMjEtMTYuMDIxYzAtOC44MjcsNy4xOTUtMTYuMDIxLDE2LjAyMS0xNi4wMjEgICBTMzIxLjYxMyw0MjIuOTM0LDMyMS42MTMsNDMxLjc2eiBNMjkwLjM4NywzNTMuMjExdi0xODAuMjRjMC04LjAxMSw2LjM3OS0xNC4zOSwxNC4zOS0xNC4zOWM4LjAxMSwwLDE0LjM5LDYuMzc5LDE0LjM5LDE0LjM5ICAgdjE4MC4yNGMwLDguMDExLTYuMzc5LDE0LjM5LTE0LjM5LDE0LjM5QzI5Ni43NjYsMzY4LjQ5MSwyOTAuMzg3LDM2MS4yMjIsMjkwLjM4NywzNTMuMjExeiIgZmlsbD0iI2Y1ZDg3OCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
+	background-size: 20px 20px;
+	background-repeat: no-repeat;
+	background-position: center;
 }
 
 .i-close {
-  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi40NDUgNjEyLjQ0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjQ0NSA2MTIuNDQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTUyMi42NDIsODkuODA0QzQ2NC45LDMyLjA2MiwzODguMDExLDAsMzA2LjIyMywwUzE0Ny41NDUsMzIuMDYyLDg5LjgwNCw4OS44MDQgICBjLTExOS40MTYsMTE5LjQxNi0xMTkuNDE2LDMxMy40MjIsMCw0MzIuODM4YzU3Ljc0MSw1Ny43NDEsMTM0LjYzMSw4OS44MDQsMjE2LjQxOSw4OS44MDRzMTU4LjY3OC0zMi4wNjIsMjE2LjQxOS04OS44MDQgICBDNjQyLjA1OCw0MDMuMjI1LDY0Mi4wNTgsMjA5LjIyLDUyMi42NDIsODkuODA0eiBNNTAxLjc4Nyw1MDEuNzg3Yy01Mi4xMDEsNTIuMTAxLTEyMS43OTEsODAuOTcyLTE5NS41NjQsODAuOTcyICAgcy0xNDMuNDYzLTI4Ljg3MS0xOTUuNTY0LTgwLjk3MlMyOS42ODcsMzc5Ljk5NSwyOS42ODcsMzA2LjIyM3MyOC44NzEtMTQzLjQ2Myw4MC45NzItMTk1LjU2NHMxMjEuODY2LTgwLjk3MiwxOTUuNTY0LTgwLjk3MiAgIHMxNDMuNDYzLDI4Ljg3MSwxOTUuNTY0LDgwLjk3MnM4MC45NzIsMTIxLjg2Niw4MC45NzIsMTk1LjU2NFM1NTMuODg3LDQ0OS42ODYsNTAxLjc4Nyw1MDEuNzg3eiBNMzk5LjIxOCwyMzQuODk5bC03NC41MTUsNzQuNTE1ICAgbDc0LjUxNSw3NC41MTVjNS42NDEsNS42NDEsNS42NDEsMTUuMjE1LDAsMjAuODU1Yy0zLjE5MSwzLjE5MS02LjM4Myw0LjAwOC0xMC4zOTEsNC4wMDhjLTQuMDA4LDAtNy4xOTktMS42MzMtMTAuMzktNC4wMDggICBsLTc0LjU4OS03NC41MTVsLTc0LjU4OSw3NC41MTVjLTMuMTkxLDMuMTkxLTYuMzgzLDQuMDA4LTEwLjM5LDQuMDA4cy03LjE5OS0xLjYzMy0xMC4zOS00LjAwOCAgIGMtNS42NDEtNS42NDEtNS42NDEtMTUuMjE1LDAtMjAuODU1bDc0LjUxNS03NC41MTVsLTc0LjUxNS03NC41MTVjLTUuNjQxLTUuNjQxLTUuNjQxLTE1LjIxNSwwLTIwLjg1NSAgIGM1LjY0MS01LjY0MSwxNS4yMTUtNS42NDEsMjAuODU1LDBsNzQuNTE1LDc0LjUxNWw3NC41MTUtNzQuNTE1YzUuNjQxLTUuNjQxLDE1LjIxNS01LjY0MSwyMC44NTUsMCAgIEM0MDQuODU4LDIxOS42ODUsNDA0Ljg1OCwyMjguNDQyLDM5OS4yMTgsMjM0Ljg5OXoiIGZpbGw9IiNmNTVhNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
-  background-size: 20px 20px;
-  background-repeat: no-repeat;
-  background-position: center;
+	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMi40NDUgNjEyLjQ0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyLjQ0NSA2MTIuNDQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTUyMi42NDIsODkuODA0QzQ2NC45LDMyLjA2MiwzODguMDExLDAsMzA2LjIyMywwUzE0Ny41NDUsMzIuMDYyLDg5LjgwNCw4OS44MDQgICBjLTExOS40MTYsMTE5LjQxNi0xMTkuNDE2LDMxMy40MjIsMCw0MzIuODM4YzU3Ljc0MSw1Ny43NDEsMTM0LjYzMSw4OS44MDQsMjE2LjQxOSw4OS44MDRzMTU4LjY3OC0zMi4wNjIsMjE2LjQxOS04OS44MDQgICBDNjQyLjA1OCw0MDMuMjI1LDY0Mi4wNTgsMjA5LjIyLDUyMi42NDIsODkuODA0eiBNNTAxLjc4Nyw1MDEuNzg3Yy01Mi4xMDEsNTIuMTAxLTEyMS43OTEsODAuOTcyLTE5NS41NjQsODAuOTcyICAgcy0xNDMuNDYzLTI4Ljg3MS0xOTUuNTY0LTgwLjk3MlMyOS42ODcsMzc5Ljk5NSwyOS42ODcsMzA2LjIyM3MyOC44NzEtMTQzLjQ2Myw4MC45NzItMTk1LjU2NHMxMjEuODY2LTgwLjk3MiwxOTUuNTY0LTgwLjk3MiAgIHMxNDMuNDYzLDI4Ljg3MSwxOTUuNTY0LDgwLjk3MnM4MC45NzIsMTIxLjg2Niw4MC45NzIsMTk1LjU2NFM1NTMuODg3LDQ0OS42ODYsNTAxLjc4Nyw1MDEuNzg3eiBNMzk5LjIxOCwyMzQuODk5bC03NC41MTUsNzQuNTE1ICAgbDc0LjUxNSw3NC41MTVjNS42NDEsNS42NDEsNS42NDEsMTUuMjE1LDAsMjAuODU1Yy0zLjE5MSwzLjE5MS02LjM4Myw0LjAwOC0xMC4zOTEsNC4wMDhjLTQuMDA4LDAtNy4xOTktMS42MzMtMTAuMzktNC4wMDggICBsLTc0LjU4OS03NC41MTVsLTc0LjU4OSw3NC41MTVjLTMuMTkxLDMuMTkxLTYuMzgzLDQuMDA4LTEwLjM5LDQuMDA4cy03LjE5OS0xLjYzMy0xMC4zOS00LjAwOCAgIGMtNS42NDEtNS42NDEtNS42NDEtMTUuMjE1LDAtMjAuODU1bDc0LjUxNS03NC41MTVsLTc0LjUxNS03NC41MTVjLTUuNjQxLTUuNjQxLTUuNjQxLTE1LjIxNSwwLTIwLjg1NSAgIGM1LjY0MS01LjY0MSwxNS4yMTUtNS42NDEsMjAuODU1LDBsNzQuNTE1LDc0LjUxNWw3NC41MTUtNzQuNTE1YzUuNjQxLTUuNjQxLDE1LjIxNS01LjY0MSwyMC44NTUsMCAgIEM0MDQuODU4LDIxOS42ODUsNDA0Ljg1OCwyMjguNDQyLDM5OS4yMTgsMjM0Ljg5OXoiIGZpbGw9IiNmNTVhNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
+	background-size: 20px 20px;
+	background-repeat: no-repeat;
+	background-position: center;
 }
 
 .i-left {
-  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNC4yOTggNDE0LjI5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjI5OCA0MTQuMjk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMuNjYzLDQxMC42MzdjMi40NDEsMi40NCw1LjY0LDMuNjYxLDguODM5LDMuNjYxYzMuMTk5LDAsNi4zOTgtMS4yMjEsOC44MzktMy42NjFsMTg1LjgwOS0xODUuODFsMTg1LjgxLDE4NS44MTEgICBjMi40NCwyLjQ0LDUuNjQxLDMuNjYxLDguODQsMy42NjFjMy4xOTgsMCw2LjM5Ny0xLjIyMSw4LjgzOS0zLjY2MWM0Ljg4MS00Ljg4MSw0Ljg4MS0xMi43OTYsMC0xNy42NzlsLTE4NS44MTEtMTg1LjgxICAgbDE4NS44MTEtMTg1LjgxYzQuODgxLTQuODgyLDQuODgxLTEyLjc5NiwwLTE3LjY3OGMtNC44ODItNC44ODItMTIuNzk2LTQuODgyLTE3LjY3OSwwbC0xODUuODEsMTg1LjgxTDIxLjM0LDMuNjYzICAgYy00Ljg4Mi00Ljg4Mi0xMi43OTYtNC44ODItMTcuNjc4LDBjLTQuODgyLDQuODgxLTQuODgyLDEyLjc5NiwwLDE3LjY3OGwxODUuODEsMTg1LjgwOUwzLjY2MywzOTIuOTU5ICAgQy0xLjIxOSwzOTcuODQxLTEuMjE5LDQwNS43NTYsMy42NjMsNDEwLjYzN3oiIGZpbGw9IiM4NzMxNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
-  background-size: 16px 16px;
-  background-repeat: no-repeat;
-  background-position: center;
+	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNC4yOTggNDE0LjI5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE0LjI5OCA0MTQuMjk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMuNjYzLDQxMC42MzdjMi40NDEsMi40NCw1LjY0LDMuNjYxLDguODM5LDMuNjYxYzMuMTk5LDAsNi4zOTgtMS4yMjEsOC44MzktMy42NjFsMTg1LjgwOS0xODUuODFsMTg1LjgxLDE4NS44MTEgICBjMi40NCwyLjQ0LDUuNjQxLDMuNjYxLDguODQsMy42NjFjMy4xOTgsMCw2LjM5Ny0xLjIyMSw4LjgzOS0zLjY2MWM0Ljg4MS00Ljg4MSw0Ljg4MS0xMi43OTYsMC0xNy42NzlsLTE4NS44MTEtMTg1LjgxICAgbDE4NS44MTEtMTg1LjgxYzQuODgxLTQuODgyLDQuODgxLTEyLjc5NiwwLTE3LjY3OGMtNC44ODItNC44ODItMTIuNzk2LTQuODgyLTE3LjY3OSwwbC0xODUuODEsMTg1LjgxTDIxLjM0LDMuNjYzICAgYy00Ljg4Mi00Ljg4Mi0xMi43OTYtNC44ODItMTcuNjc4LDBjLTQuODgyLDQuODgxLTQuODgyLDEyLjc5NiwwLDE3LjY3OGwxODUuODEsMTg1LjgwOUwzLjY2MywzOTIuOTU5ICAgQy0xLjIxOSwzOTcuODQxLTEuMjE5LDQwNS43NTYsMy42NjMsNDEwLjYzN3oiIGZpbGw9IiM4NzMxNGUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
+	background-size: 16px 16px;
+	background-repeat: no-repeat;
+	background-position: center;
 }
 
 /*--------------------
@@ -104,19 +103,19 @@ Login Box
 ---------------------*/
 
 .box {
-  width: 330px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+	width: 330px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
 }
 
 .box-form {
-  width: 320px;
-  position: relative;
-  z-index: 1;
+	width: 320px;
+	position: relative;
+	z-index: 1;
 }
 
 .box-login-tab {
@@ -126,22 +125,22 @@ Login Box
 	position: relative;
 	float: left;
 	z-index: 1;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-  -webkit-border-radius: 6px 6px 0 0;
-     -moz-border-radius: 6px 6px 0 0;
-          border-radius: 6px 6px 0 0;
-  
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+	-webkit-border-radius: 6px 6px 0 0;
+	-moz-border-radius: 6px 6px 0 0;
+	border-radius: 6px 6px 0 0;
+
 	-webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
-	        transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
+	transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
 	-webkit-transform-origin: 0 0;
-	        transform-origin: 0 0;
+	transform-origin: 0 0;
 	-webkit-backface-visibility: hidden;
-	        backface-visibility: hidden;
-	
-	-webkit-box-shadow: 15px -15px 30px rgba(0,0,0,0.32);
-     -moz-box-shadow: 15px -15px 30px rgba(0,0,0,0.32);
-          box-shadow: 15px -15px 30px rgba(0,0,0,0.32);
+	backface-visibility: hidden;
+
+	-webkit-box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32);
+	-moz-box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32);
+	box-shadow: 15px -15px 30px rgba(0, 0, 0, 0.32);
 }
 
 .box-login-title {
@@ -153,129 +152,135 @@ Login Box
 }
 
 .box-login {
-  position: relative;
-  top: -4px;
-  width: 320px;
-  background: #00000044;
-  text-align: center;
-  overflow: hidden;
-  z-index: 2;
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  -webkit-border-radius: 20px:
-  -moz-border-radius= 20px;
-  border-radius: 20px;
-  -moz-box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
-  box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
+	position: relative;
+	top: -4px;
+	width: 320px;
+	background: #00000044;
+	text-align: center;
+	overflow: hidden;
+	z-index: 2;
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+	-webkit-border-radius: 20px: -moz-border-radius=20px;
+	border-radius: 20px;
+	-moz-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
+	box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
 }
+
 .box-info {
 	width: 260px;
 	top: 60px;
-  position: absolute;
+	position: absolute;
 	right: -5px;
 	padding: 15px 15px 15px 30px;
-	background-color: rgba(255,255,255,0.6);
-	border: 1px solid rgba(255,255,255,0.2);
+	background-color: rgba(255, 255, 255, 0.6);
+	border: 1px solid rgba(255, 255, 255, 0.2);
 	z-index: 0;
-	
+
 	-webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-    
-    -webkit-box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
-    -moz-box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
-    box-shadow: 15px 30px 30px rgba(0,0,0,0.32);
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+
+	-webkit-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
+	-moz-box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
+	box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
 }
 
 .line-wh {
- 	width: 100%;
-  height: 1px;
-  top: 0px;
-  margin: 12px auto;
+	width: 100%;
+	height: 1px;
+	top: 0px;
+	margin: 12px auto;
 	position: relative;
-	border-top: 1px solid rgba(255,255,255,0.3);
+	border-top: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 /*--------------------
 Form
 ---------------------*/
 
-a { text-decoration: none; }
+a {
+	text-decoration: none;
+}
 
-button:focus { outline:0; }
+button:focus {
+	outline: 0;
+}
 
 .b {
 	height: 24px;
 	line-height: 24px;
 	background-color: transparent;
-  border: none;
-  cursor: pointer;
+	border: none;
+	cursor: pointer;
 }
 
 .b-form {
 	opacity: 0.5;
 	margin: 10px 20px;
-  float: right;
+	float: right;
 }
 
 .b-info {
-  opacity: 0.5;
-  float: left;
+	opacity: 0.5;
+	float: left;
 }
 
-.b-form:hover, 
+.b-form:hover,
 .b-info:hover {
-  opacity: 1;
+	opacity: 1;
 }
 
-.b-support, .b-cta {
+.b-support,
+.b-cta {
 	width: 100%;
 	padding: 0px 15px;
-  font-family: 'Quicksand', sans-serif;
-  font-weight: 700;
-  letter-spacing: -1px;
-  font-size: 16px;
-  line-height: 32px;
-  cursor: pointer;
-    
-  -webkit-border-radius: 16px;
-     -moz-border-radius: 16px;
-          border-radius: 16px;
+	font-family: 'Quicksand', sans-serif;
+	font-weight: 700;
+	letter-spacing: -1px;
+	font-size: 16px;
+	line-height: 32px;
+	cursor: pointer;
+
+	-webkit-border-radius: 16px;
+	-moz-border-radius: 16px;
+	border-radius: 16px;
 }
 
 .b-support {
-  border: #87314e 1px solid;
-  background-color: transparent;
-  color: #87314e;
-  margin: 6px 0;
+	border: #87314e 1px solid;
+	background-color: transparent;
+	color: #87314e;
+	margin: 6px 0;
 }
 
 .b-cta {
-  border: #df405a 1px solid;
-  background-color: #df405a;
-  color: #fff;
+	border: #df405a 1px solid;
+	background-color: #df405a;
+	color: #fff;
 }
 
-.b-support:hover, .b-cta:hover {
-  color: #fff;
+.b-support:hover,
+.b-cta:hover {
+	color: #fff;
 	background-color: #87314e;
 	border: #87314e 1px solid;
 }
 
 .fieldset-body {
-    display: table;
+	display: table;
 }
 
 .fieldset-body p {
-    width: 100%;
-    display: inline-table;
-    padding: 5px 20px;
-    margin-bottom:2px;
+	width: 100%;
+	display: inline-table;
+	padding: 5px 20px;
+	margin-bottom: 2px;
 }
 
 label {
 	float: left;
-  width: 100%;
+	width: 100%;
 	top: 0px;
 	color: #fff;
 	font-size: 13px;
@@ -286,43 +291,43 @@ label {
 
 label.checkbox {
 	float: left;
-  padding: 5px 20px;
+	padding: 5px 20px;
 	line-height: 1.7;
 }
 
 input[type=text],
 input[type=password] {
-    width: auto;
-    height: 32px;
-    padding: 0px 10px;
-    background-color:rgb(0 0 0 / 28%);
-    border: none;
-    display: inline;
-    color: #bdbdbd;
-    font-size: 16px;
-    font-weight: 400;
-    float: none;
-    border-radius: 10px;
+	width: auto;
+	height: 32px;
+	padding: 0px 10px;
+	background-color: rgb(0 0 0 / 28%);
+	border: none;
+	display: inline;
+	color: #bdbdbd;
+	font-size: 16px;
+	font-weight: 400;
+	float: none;
+	border-radius: 10px;
 }
 
 input[type=text]:focus,
 input[type=password]:focus {
-    background-color: #f8f8c6;
-    outline: none;
+	background-color: #f8f8c6;
+	outline: none;
 }
 
-input[type=submit]  {
-  width: 100%;
-  height: 48px;
-  margin-top: 24px;
-  padding: 0px 20px;
-  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
+input[type=submit] {
+	width: 100%;
+	height: 48px;
+	margin-top: 24px;
+	padding: 0px 20px;
+	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
 	font-weight: 700;
 	font-size: 18px;
 	color: #fff;
-  line-height: 40px;
-  text-align: center;
-  background-color: #0c5091;
+	line-height: 40px;
+	text-align: center;
+	background-color: #0c5091;
 	border: 1px #075fa7 solid;
 	opacity: 1;
 	cursor: pointer;
@@ -330,7 +335,7 @@ input[type=submit]  {
 
 input[type=submit]:hover {
 	background-color: #df405a;
-  border: 1px #df405a solid;
+	border: 1px #df405a solid;
 }
 
 input[type=submit]:focus {
@@ -339,32 +344,37 @@ input[type=submit]:focus {
 
 p.field span.i {
 	width: 24px;
-  height: 24px;
-  float: right;
-  position: relative;
-  margin-top: -26px;
-  right: 2px;
-  z-index: 2;
-  display: none;
-            
-  -webkit-animation: bounceIn 0.6s linear;
-     -moz-animation: bounceIn 0.6s linear;
-  	   -o-animation: bounceIn 0.6s linear;
-          animation: bounceIn 0.6s linear;
+	height: 24px;
+	float: right;
+	position: relative;
+	margin-top: -26px;
+	right: 2px;
+	z-index: 2;
+	display: none;
+
+	-webkit-animation: bounceIn 0.6s linear;
+	-moz-animation: bounceIn 0.6s linear;
+	-o-animation: bounceIn 0.6s linear;
+	animation: bounceIn 0.6s linear;
 }
 
 /*--------------------
 Transitions
 ---------------------*/
 
-.box-form, .box-info, .b, .b-support, .b-cta,
-input[type=submit], p.field span.i {
-    
+.box-form,
+.box-info,
+.b,
+.b-support,
+.b-cta,
+input[type=submit],
+p.field span.i {
+
 	-webkit-transition: all 0.3s;
-     -moz-transition: all 0.3s;
-      -ms-transition: all 0.3s;
-       -o-transition: all 0.3s;
-          transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	-ms-transition: all 0.3s;
+	-o-transition: all 0.3s;
+	transition: all 0.3s;
 }
 
 /*--------------------
@@ -372,35 +382,35 @@ Credits
 ---------------------*/
 
 .icon-credits {
-  width: 100%;
-  position: absolute;
-  bottom: 4px;
-  font-family:'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
-  font-size: 12px;
-  color: rgba(255,255,255,0.1);
-  text-align: center;
-  z-index: -1;
+	width: 100%;
+	position: absolute;
+	bottom: 4px;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
+	font-size: 12px;
+	color: rgba(255, 255, 255, 0.1);
+	text-align: center;
+	z-index: -1;
 }
 
 img.tengah {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  padding: 20px;
-  text-decoration: none;
-  width: 200px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+	padding: 20px;
+	text-decoration: none;
+	width: 200px;
 }
 
 img.bawah {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 2rem;
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	padding: 2rem;
 }
 
 .icon-credits a {
-  text-decoration: none;
-  color: rgba(255,255,255,0.2);
-}
+	text-decoration: none;
+	color: rgba(255, 255, 255, 0.2);
+}
\ No newline at end of file
diff --git a/template/header.htm b/template/header.htm
index 5579535..9894ea9 100644
--- a/template/header.htm
+++ b/template/header.htm
@@ -57,12 +57,10 @@
 </style>
 <% end -%>
 </head>
-<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>">
+<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>" style="background-image:url('/luci-static/alpha/background/dashboard.png')">
 <header>
-	
 	<div class="fill">
 		<div class="container">
-          
 		<a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>">
 			<img src="<%=media%>/brand.png" alt="OpenWrt">
 		</a>
@@ -95,5 +93,4 @@
 						<p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
 					</div>
 				</noscript>
-
 				<div id="tabmenu" style="display:none"></div>
diff --git a/template/sysauth.htm b/template/sysauth.htm
index fe738a5..44bda47 100644
--- a/template/sysauth.htm
+++ b/template/sysauth.htm
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!-- saved from url=(0014)about:internet -->
 <html lang="en">
-    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 <meta name="apple-mobile-web-app-capable" content="yes">
@@ -19,70 +19,68 @@
 
 <title>Alpha - Login Dulu</title>
 </head>
-    
-<body class="lang_en  node-main-login" data-page="">
-  <header>
-          
+		
+<body class="lang_en  node-main-login" data-page="" style="background-image:url('/luci-static/alpha/background/dashboard.png')">
+	<header>
+		<div class="fill">
+			<div class="container">
+				<span class="showSide"></span>
+				<img class="tengah" src="/luci-static/alpha/style/brand.png" />
+				<img class="bawah" src="/luci-static/alpha/style/indo-wrt.png" />
+				<span class="status" id="indicators"></span>
+			</div>
+		</div>
+	</header>
 
-    <div class="fill">
-      <div class="container">
-        <span class="showSide"></span>
-        <img class="tengah" src="/luci-static/alpha/style/brand.png" />
-        <img class="bawah" src="/luci-static/alpha/style/indo-wrt.png" />
-        <span class="status" id="indicators"></span>
-      </div>
-    </div>
-  </header>
-
-    <script type="text/javascript" src="/luci-static/resources/promis.min.js?v=git-22.361.69894-438c598"></script>
-    <script type="text/javascript" src="/luci-static/resources/luci.js?v=git-22.361.69894-438c598"></script>
-    <script type="text/javascript">
-        L = new LuCI({"apply_rollback":90,"resource":"\/luci-static\/resources","media":"\/luci-static\/material","documentroot":"\/www","pollinterval":5,"apply_display":1.5,"requestpath":[],"ubuspath":"\/ubus\/","scriptname":"\/cgi-bin\/luci","dispatchpath":[],"apply_timeout":5,"apply_holdoff":4,"nodespec":{"satisfied":true,"action":{"type":"template","path":"admin_status\/index"},"order":1,"depends":{"acl":["luci-mod-status-index"]},"title":"Overview"}});
-    </script>
+		<script type="text/javascript" src="/luci-static/resources/promis.min.js?v=git-22.361.69894-438c598"></script>
+		<script type="text/javascript" src="/luci-static/resources/luci.js?v=git-22.361.69894-438c598"></script>
+		<script type="text/javascript">
+				L = new LuCI({"apply_rollback":90,"resource":"\/luci-static\/resources","media":"\/luci-static\/material","documentroot":"\/www","pollinterval":5,"apply_display":1.5,"requestpath":[],"ubuspath":"\/ubus\/","scriptname":"\/cgi-bin\/luci","dispatchpath":[],"apply_timeout":5,"apply_holdoff":4,"nodespec":{"satisfied":true,"action":{"type":"template","path":"admin_status\/index"},"order":1,"depends":{"acl":["luci-mod-status-index"]},"title":"Overview"}});
+		</script>
 <form method="post" action="/cgi-bin/luci"><div class="cbi-map"></div>
 <div class='box'>
-    <div class='box-form'>
-      <!-- <div class='box-login-tab'></div>
-      <div class='box-login-title'>
-        <div class='i i-login'></div><h2><div class="cbi-map-descr"></div>LOGIN</h2>
-      </div> -->
-      
-      <div class='box-login'>
-        <label class='checkbox'>
-        <form method="post" action="<%=pcdata(FULL_REQUEST_URI)%>">
-          <%- if fuser then %>
-            <div class="alert-message warning">
-              <p><%:Sandi gagal,silahkan ulangi.%></p>
-            </div>
-          <% end -%>
-        </label>
-        <div class='fieldset-body' id='login_form'>
-              <p class='field'>
-            <label for='user'>
-              <label class="cbi-value-title" for="luci_username">Username</label>
-                <input type="text" name="luci_username" id="luci_username" autocomplete="username" value="root" />
-              </div></label>
-            <span id='valida' class='i i-warning'></span>
-          </p>
-              <p class='field'>
-            <label for='pass'>
-              <label class="cbi-value-title" for="luci_password">Password</label>
-              <div class="cbi-value-field">
-                <input type="password" name="luci_password" id="luci_password" autocomplete="current-password"/>
-              </div></label>
-            <span id='valida' class='i i-close'></span>
-          </p>
-  
-            <label class='checkbox'>
-                Please Enter Username & Password.
-            </label>
-  
-              <input type='submit' id='do_login' value='LOGIN' title='Login' />
-        </div>
-      </div>
-    </div>
-    
+		<div class='box-form'>
+			<!-- <div class='box-login-tab'></div>
+			<div class='box-login-title'>
+				<div class='i i-login'></div><h2><div class="cbi-map-descr"></div>LOGIN</h2>
+			</div> -->
+			
+			<div class='box-login'>
+				<label class='checkbox'>
+				<form method="post" action="<%=pcdata(FULL_REQUEST_URI)%>">
+					<%- if fuser then %>
+						<div class="alert-message warning">
+							<p><%:Sandi gagal,silahkan ulangi.%></p>
+						</div>
+					<% end -%>
+				</label>
+				<div class='fieldset-body' id='login_form'>
+							<p class='field'>
+						<label for='user'>
+							<label class="cbi-value-title" for="luci_username">Username</label>
+								<input type="text" name="luci_username" id="luci_username" autocomplete="username" value="root" />
+							</div></label>
+						<span id='valida' class='i i-warning'></span>
+					</p>
+							<p class='field'>
+						<label for='pass'>
+							<label class="cbi-value-title" for="luci_password">Password</label>
+							<div class="cbi-value-field">
+								<input type="password" name="luci_password" id="luci_password" autocomplete="current-password"/>
+							</div></label>
+						<span id='valida' class='i i-close'></span>
+					</p>
+	
+						<label class='checkbox'>
+								Please Enter Username & Password.
+						</label>
+	
+							<input type='submit' id='do_login' value='LOGIN' title='Login' />
+				</div>
+			</div>
+		</div>
+		
 
-    
+		
 </body>
 </html>
\ No newline at end of file