luci-theme-rosy: Fixed table color matching problem
[project/luci.git] / themes / luci-theme-rosy / htdocs / luci-static / rosy / cascade.css
index 3df110195908937231288ec4c94eec309d7aa795..3132a4849c66a8d193a158c6cd658758c115fae3 100644 (file)
 @font-face {
     font-family: 'icomoon';
     src: url('fonts/font.eot');
-    src: url('fonts/font.eot') format('embedded-opentype'),
-    url('fonts/font.ttf') format('truetype'),
-    url('fonts/font.woff') format('woff'),
-    url('fonts/font.svg') format('svg');
+    src: url('fonts/font.eot') format('embedded-opentype'), url('fonts/font.ttf') format('truetype'), url('fonts/font.woff') format('woff'), url('fonts/font.svg') format('svg');
     font-weight: normal;
     font-style: normal;
 }
@@ -31,12 +28,29 @@ strong {
     font-weight: normal;
 }
 
-.table { display: table; position: relative; }
-.tr    { display: table-row; }
-.thead { display: table-header-group; }
-.tbody { display: table-row-group; }
-.tfoot { display: table-footer-group; }
-.td, .th {
+.table {
+    display: table;
+    position: relative;
+}
+
+.tr {
+    display: table-row;
+}
+
+.thead {
+    display: table-header-group;
+}
+
+.tbody {
+    display: table-row-group;
+}
+
+.tfoot {
+    display: table-footer-group;
+}
+
+.td,
+.th {
     vertical-align: middle;
     text-align: center;
     display: table-cell;
@@ -44,7 +58,7 @@ strong {
 }
 
 .th {
-    font-weight: bold;
+    font-weight: normal;
 }
 
 .tr.placeholder {
@@ -52,7 +66,7 @@ strong {
     background-color: #f9f9f9;
 }
 
-.tr.placeholder > .td {
+.tr.placeholder>.td {
     position: absolute;
     left: 0;
     right: 0;
@@ -62,24 +76,72 @@ strong {
     background: #f9f9f9;
 }
 
-.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
-.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
+.table[width="33%"],
+.th[width="33%"],
+.td[width="33%"] {
+    width: 33%;
+}
 
-.col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
-.col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
-.col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
-.col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
-.col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
-.col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
-.col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
-.col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
-.col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
-.col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
+.table[width="100%"],
+.th[width="100%"],
+.td[width="100%"] {
+    width: 100%;
+}
+
+.col-1 {
+    flex: 1 1 30px !important;
+    -webkit-flex: 1 1 30px !important;
+}
+
+.col-2 {
+    flex: 2 2 60px !important;
+    -webkit-flex: 2 2 60px !important;
+}
+
+.col-3 {
+    flex: 3 3 90px !important;
+    -webkit-flex: 3 3 90px !important;
+}
+
+.col-4 {
+    flex: 4 4 120px !important;
+    -webkit-flex: 4 4 120px !important;
+}
+
+.col-5 {
+    flex: 5 5 150px !important;
+    -webkit-flex: 5 5 150px !important;
+}
+
+.col-6 {
+    flex: 6 6 180px !important;
+    -webkit-flex: 6 6 180px !important;
+}
+
+.col-7 {
+    flex: 7 7 210px !important;
+    -webkit-flex: 7 7 210px !important;
+}
+
+.col-8 {
+    flex: 8 8 240px !important;
+    -webkit-flex: 8 8 240px !important;
+}
+
+.col-9 {
+    flex: 9 9 270px !important;
+    -webkit-flex: 9 9 270px !important;
+}
+
+.col-10 {
+    flex: 10 10 300px !important;
+    -webkit-flex: 10 10 300px !important;
+}
 
 .cbi-button-up,
 .cbi-button-down,
 .cbi-value-helpicon,
-.main > .loading > span {
+.main>.loading>span {
     font-family: 'icomoon' !important;
     speak: none;
     font-style: normal !important;
@@ -87,7 +149,6 @@ strong {
     font-variant: normal !important;
     text-transform: none !important;
     line-height: 1;
-
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -98,9 +159,20 @@ strong {
     box-sizing: border-box;
 }
 
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-family: inherit;
-    font-weight: 400;
+    font-weight: normal;
     line-height: 1.1;
     color: inherit;
 }
@@ -116,7 +188,8 @@ body {
     background-color: #EEE;
 }
 
-html, body {
+html,
+body {
     margin: 0px;
     padding: 0px;
     height: auto;
@@ -173,12 +246,12 @@ hr {
     opacity: 0.1;
 }
 
-footer > a {
+footer>a {
     color: #aaa;
     text-decoration: none;
 }
 
-.main > .loading {
+.main>.loading {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -188,7 +261,7 @@ footer > a {
     top: 0;
 }
 
-.main > .loading > span {
+.main>.loading>span {
     display: block;
     text-align: center;
     margin-top: 2rem;
@@ -197,12 +270,12 @@ footer > a {
     line-height: 45px;
 }
 
-.main > .loading > span > .loading-img {
+.main>.loading>span>.loading-img {
     margin-right: 0.2rem;
     display: inline-block;
 }
 
-.main > .loading > span > .loading-img img {
+.main>.loading>span>.loading-img img {
     vertical-align: middle;
 }
 
@@ -213,6 +286,7 @@ footer > a {
 .pull-left {
     float: left;
 }
+
 li {
     list-style-type: none;
 }
@@ -263,15 +337,14 @@ h4 {
     min-width: inherit;
     border-radius: 20px;
     background-color: #FFF;
-
     -webkit-overflow-scrolling: touch;
 }
 
-.cbi-section > legend {
+.cbi-section>legend {
     display: none !important;
 }
 
-.cbi-section > h3:first-child,
+.cbi-section>h3:first-child,
 .panel-title {
     width: 100%;
     display: block;
@@ -287,12 +360,12 @@ h4 {
     border-radius: 20px;
 }
 
-.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 {
     padding: .5rem;
     border-top: 1px solid #ddd;
     white-space: nowrap;
@@ -318,95 +391,69 @@ h4 {
     margin-bottom: 0;
 }
 
-.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-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-section-table-row>.cbi-value-field .cbi-dropdown {
     width: 100%;
 }
 
-.cbi-section-table-row > .cbi-value-field [data-dynlist] > input,
-.cbi-section-table-row > .cbi-value-field input.cbi-input-password {
+.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);
 }
 
-div > table > tbody > tr:nth-of-type(2n),
-div > .table > .tbody > .tr:nth-of-type(2n) {
-    background-color: #f9f9f9;
-}
-
-div > table > tbody > tr:nth-of-type(2n),
-div > .table > .tbody > .tr:nth-of-type(2n) {
-    background-color: #f9f9f9;
-}
-
-.cbi-section .table #memtotal > div,
-.cbi-section .table #memfree > div,
-.cbi-section .table #membuff > div,
-.cbi-section .table #conns > div {
-    border-radius: 20px;
-    overflow: hidden;
-    border: none !important;
-    background-color: #9bc1cc;
-}
-
-.cbi-section .table #memtotal > div > div > div,
-.cbi-section .table #memfree > div > div > div,
-.cbi-section .table #membuff > div > div > div,
-.cbi-section .table #conns > div > div > div {
-    color: #fff !important;
-}
-
-.cbi-section .table .tr.table-titles {
-    background-color: #eee;
-}
 .table .tr:first-child .td:first-child,
 .table .tr:first-child::before,
 .table .tr:first-child .th:first-child {
     border-top-left-radius: 10px;
 }
+
 .table .tr:first-child .td:last-child,
 .table .tr:first-child .th:last-child {
     border-top-right-radius: 10px;
 }
-.table .tr:last-child .td:first-child, 
+
+.table .tr:last-child .td:first-child,
 .table .tr:last-child::before {
     border-bottom-left-radius: 10px;
 }
+
 .table .tr:last-child .td:last-child {
     border-bottom-right-radius: 10px;
 }
+
 .table .tr.placeholder:last-child {
     background-color: transparent;
 }
 
-.cbi-section .table .cbi-section-table-titles {
-    background-color: #e0e0e0;
+/* fix progress bar */
+.cbi-progressbar {
+    background-color: #9bc1cc;
+    border-radius: 20px;
+    overflow: hidden;
+    position: relative;
 }
 
-/* fix progress bar */
-#swaptotal > div,
-#swapfree > div,
-#memfree > div,
-#membuff > div,
-#conns > div,
-#memtotal > div {
-    width: 100% !important;
-    height: 1.2rem !important;
-}
-
-#swaptotal > div > div,
-#swapfree > div > div,
-#memfree > div > div,
-#membuff > div > div,
-#conns > div > div,
-#memtotal > div > div {
-    height: 100% !important;
-    background-color: #468ea4 !important;
+.cbi-progressbar div {
+    background-color: #468ea4;
+    height: 20px;
+    border-radius: 20px;
 }
 
-/* fix multiple table */
+.cbi-progressbar::after {
+    content: attr(title);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    line-height: 1.2rem;
+    color: #fff;
+}
 
+/* fix multiple table */
 table table,
 .table .table {
     border: none;
@@ -417,19 +464,19 @@ table table,
     border: none;
 }
 
-td > table > tbody > tr > td,
-.td > .table > .tbody > .tr > .td {
+td>table>tbody>tr>td,
+.td>.table>.tbody>.tr>.td {
     border: none;
 }
 
-.cbi-value-field > table > tbody > tr > td,
-.cbi-value-field > .table > .tbody > .tr > .td {
+.cbi-value-field>table>tbody>tr>td,
+.cbi-value-field>.table>.tbody>.tr>.td {
     border: none;
 }
 
 /* button style */
-
-.btn, .cbi-button {
+.btn,
+.cbi-button {
     margin: 0 .8rem .5rem 0;
     -webkit-appearance: none;
     color: rgba(0, 0, 0, 0.87);
@@ -469,17 +516,21 @@ td > table > tbody > tr > td,
 .cbi-button-edit.important,
 .cbi-button-apply.important,
 .cbi-button-reload.important,
-.cbi-button-action.important {
+.cbi-button-apply,
+.cbi-page-actions .cbi-button-save {
     color: #fff;
     background-color: #337ab7;
+    border: none;
 }
 
-.cbi-page-actions .cbi-button-save,
 .cbi-button-add.important,
 .cbi-button-save.important,
-.cbi-button-positive.important {
-    color: #fff;
-    background-color: #5bc0de;
+.cbi-button-positive.important,
+.cbi-button-action.important,
+.cbi-section-actions .cbi-button-edit {
+    color: #337ab7;
+    background-color: transparent;
+    border: 1px solid #337ab7;
 }
 
 .cbi-button-remove.important,
@@ -487,6 +538,7 @@ td > table > tbody > tr > td,
 .cbi-button-negative.important {
     color: #fff;
     background-color: #d9534f;
+    border: none;
 }
 
 .cbi-button-find,
@@ -494,32 +546,35 @@ td > table > tbody > tr > td,
 .cbi-button-up,
 .cbi-button-down,
 .cbi-button-neutral {
-    background-color: #468ea4;
-    color: #fff;
+    color: #468ea4;
+    background-color: transparent;
+    border: 1px solid #468ea4;
 }
 
 .cbi-button-edit,
-.cbi-button-apply,
 .cbi-button-reload,
 .cbi-button-action {
-    color: #fff;
-    background-color: #468ea4;
+    color: #468ea4;
+    background-color: transparent;
+    border: 1px solid #468ea4;
 }
 
-.cbi-page-actions .cbi-button-apply + .cbi-button-save,
+.cbi-page-actions .cbi-button-apply+.cbi-button-save,
 .cbi-button-add,
 .cbi-button-save,
 .cbi-button-positive {
-    color: #fff;
-    background-color: #354057;
+    color: #354057;
+    background-color: transparent;
+    border: 1px solid #354057;
 }
 
-.cbi-section-remove > .cbi-button,
+.cbi-section-remove>.cbi-button,
 .cbi-button-remove,
 .cbi-button-reset,
 .cbi-button-negative {
-    color: #fff;
-    background-color: #F24C7C;
+    color: #F24C7C;
+    background-color: transparent;
+    border: 1px solid #F24C7C;
 }
 
 .cbi-page-actions .cbi-button-link:first-child {
@@ -531,34 +586,32 @@ td > table > tbody > tr > td,
 }
 
 /* table */
-
-.container > .tabs,
-.container > .tabs > li[class~="active"],
-.container > .tabs > li:hover,
-.container > .cbi-tabmenu,
-.container > .cbi-tabmenu > li[class~="cbi-tab"],
-.container > .cbi-tabmenu > li:hover {
+.container>.tabs,
+.container>.tabs>li[class~="active"],
+.container>.tabs>li:hover,
+.container>.cbi-tabmenu,
+.container>.cbi-tabmenu>li[class~="cbi-tab"],
+.container>.cbi-tabmenu>li:hover {
     border-radius: 20px;
 }
 
 .container .cbi-map .cbi-tabmenu,
-.container .cbi-map .cbi-tabmenu > li[class~="cbi-tab"],
-.container .cbi-map .cbi-tabmenu > li:hover {
+.container .cbi-map .cbi-tabmenu>li[class~="cbi-tab"],
+.container .cbi-map .cbi-tabmenu>li:hover {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 }
 
 .container .cbi-map .cbi-tabmenu,
-.container > .tabs,
-.container > .cbi-tabmenu {
+.container>.tabs,
+.container>.cbi-tabmenu {
     overflow: hidden;
 }
 
-.container .cbi-map .cbi-tabmenu + div {
+.container .cbi-map .cbi-tabmenu+div {
     border-radius: 0;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
-    overflow: hidden;
 }
 
 .tabs {
@@ -566,28 +619,28 @@ td > table > tbody > tr > td,
     margin-top: 1rem;
 }
 
-.cbi-tabmenu > li,
-.tabs > li {
+.cbi-tabmenu>li,
+.tabs>li {
     margin-right: .4rem;
     display: inline-block;
     padding: 0.6rem 0rem;
 }
 
-.cbi-tabmenu > li > a,
-.tabs > li > a {
+.cbi-tabmenu>li>a,
+.tabs>li>a {
     text-decoration: none;
     color: #404040;
     padding: 0.5rem 0.8rem;
 }
 
-.tabs > li[class~="active"],
-.tabs > li:hover {
+.tabs>li[class~="active"],
+.tabs>li:hover {
     cursor: pointer;
     background-color: #337ab7;
 }
 
-.tabs > li[class~="active"] > a,
-.tabs > li:hover > a {
+.tabs>li[class~="active"]>a,
+.tabs>li:hover>a {
     color: #fff;
 }
 
@@ -597,11 +650,11 @@ td > table > tbody > tr > td,
     border-right: 1px solid #D4D4D4;
 }
 
-.cbi-tabmenu > li:hover {
+.cbi-tabmenu>li:hover {
     background-color: #F1F1F1;
 }
 
-.cbi-tabmenu > li[class~="cbi-tab"] {
+.cbi-tabmenu>li[class~="cbi-tab"] {
     background-color: #fff;
 }
 
@@ -609,7 +662,20 @@ td > table > tbody > tr > td,
     background-color: #D4D4D4;
 }
 
-.cbi-section-remove:nth-of-type(2n){
+[data-tab-title] {
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+}
+
+[data-tab-active="true"] {
+    opacity: 1;
+    height: auto;
+    overflow: visible;
+    transition: opacity .25s ease-in;
+}
+
+.cbi-section-remove:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
 
@@ -621,7 +687,7 @@ td > table > tbody > tr > td,
     border-right: 1px solid #D4D4D4;
 }
 
-.cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
+.cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
 
@@ -631,7 +697,7 @@ td > table > tbody > tr > td,
     line-height: 1.25;
 }
 
-.cbi-value-helpicon > img {
+.cbi-value-helpicon>img {
     display: none;
 }
 
@@ -660,8 +726,8 @@ td > table > tbody > tr > td,
     width: 100%;
 }
 
-.cbi-section-table-descr > .cbi-section-table-cell,
-.cbi-section-table-titles > .cbi-section-table-cell {
+.cbi-section-table-descr>.cbi-section-table-cell,
+.cbi-section-table-titles>.cbi-section-table-cell {
     border: none;
 }
 
@@ -692,17 +758,19 @@ td > table > tbody > tr > td,
     vertical-align: middle;
 }
 
-.cbi-rowstyle-1 {
-    background-color: #f9f9f9;
+.table .tr.cbi-rowstyle-2,
+.table .tr:nth-child(n) {
+    background-color: #eee;
 }
 
-.cbi-rowstyle-2 {
-    background-color: #eee;
+.table .tr.cbi-rowstyle-1,
+.table .tr:nth-child(2n) {
+    background-color: #f9f9f9;
 }
 
-.cbi-rowstyle-2 .cbi-button-up,
-.cbi-rowstyle-2 .cbi-button-down {
-    background-color: #FFF !important;
+.table .tr.table-titles,
+.table .tr.cbi-section-table-titles {
+    background-color: #ddd;
 }
 
 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
@@ -714,22 +782,23 @@ td > table > tbody > tr > td,
     vertical-align: middle;
 }
 
-.td.cbi-section-actions > * {
+.td.cbi-section-actions>* {
     display: flex;
 }
 
-.td.cbi-section-actions > * > *,
-.td.cbi-section-actions > * > form > * {
+.td.cbi-section-actions>*>*,
+.td.cbi-section-actions>*>form>* {
     flex: 1 1 4em;
     margin: 0 1px;
 }
 
-.td.cbi-section-actions > * > form {
+.td.cbi-section-actions>*>form {
     display: inline-flex;
     margin: 0;
 }
 
 /* desc */
+
 .cbi-section-descr,
 .cbi-map-descr {
     padding: 0.5rem;
@@ -737,7 +806,6 @@ td > table > tbody > tr > td,
     font-size: small;
 }
 
-
 .cbi-dropdown {
     display: inline-flex;
     cursor: pointer;
@@ -750,7 +818,7 @@ td > table > tbody > tr > td,
     outline: 2px solid #4b6e9b;
 }
 
-.cbi-dropdown > ul {
+.cbi-dropdown>ul {
     margin: 0 !important;
     padding: 0;
     list-style: none;
@@ -760,18 +828,18 @@ td > table > tbody > tr > td,
     width: 100%;
 }
 
-.cbi-dropdown > ul.preview {
+.cbi-dropdown>ul.preview {
     display: none;
 }
 
-.cbi-dropdown > .open {
+.cbi-dropdown>.open {
     border: 2px outset #eee;
     flex-basis: 15px;
     background: #eee;
 }
 
-.cbi-dropdown > .open,
-.cbi-dropdown > .more {
+.cbi-dropdown>.open,
+.cbi-dropdown>.more {
     flex-grow: 0;
     flex-shrink: 0;
     display: flex;
@@ -782,15 +850,15 @@ td > table > tbody > tr > td,
     padding: 0 .25em;
 }
 
-.cbi-dropdown > .more,
-.cbi-dropdown > ul > li[placeholder] {
+.cbi-dropdown>.more,
+.cbi-dropdown>ul>li[placeholder] {
     color: #777;
     font-weight: bold;
     text-shadow: 1px 1px 0px #fff;
     display: none;
 }
 
-.cbi-dropdown > ul > li {
+.cbi-dropdown>ul>li {
     display: none;
     padding: .25em;
     white-space: nowrap;
@@ -803,35 +871,40 @@ td > table > tbody > tr > td,
     min-height: 20px;
 }
 
-.cbi-dropdown > ul > li .hide-open { display: initial; }
-.cbi-dropdown > ul > li .hide-close { display: none; }
+.cbi-dropdown>ul>li .hide-open {
+    display: initial;
+}
 
-.cbi-dropdown > ul > li[display]:not([display="0"]) {
+.cbi-dropdown>ul>li .hide-close {
+    display: none;
+}
+
+.cbi-dropdown>ul>li[display]:not([display="0"]) {
     border-left: 1px solid #ccc;
 }
 
-.cbi-dropdown[empty] > ul {
+.cbi-dropdown[empty]>ul {
     max-width: 1px;
 }
 
-.cbi-dropdown > ul > li > form {
+.cbi-dropdown>ul>li>form {
     display: none;
     margin: 0;
     padding: 0;
     pointer-events: none;
 }
 
-.cbi-dropdown > ul > li img {
+.cbi-dropdown>ul>li img {
     vertical-align: middle;
     margin-right: .25em;
 }
 
-.cbi-dropdown > ul > li > form > input[type="checkbox"] {
+.cbi-dropdown>ul>li>form>input[type="checkbox"] {
     margin: 0;
     height: auto;
 }
 
-.cbi-dropdown > ul > li input[type="text"] {
+.cbi-dropdown>ul>li input[type="text"] {
     height: 20px;
 }
 
@@ -839,7 +912,7 @@ td > table > tbody > tr > td,
     position: relative;
 }
 
-.cbi-dropdown[open] > ul.dropdown {
+.cbi-dropdown[open]>ul.dropdown {
     display: block;
     background: #f6f6f5;
     border: 1px solid #918e8c;
@@ -850,40 +923,45 @@ td > table > tbody > tr > td,
     width: auto;
 }
 
-.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 {
+.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 {
     flex-grow: 1;
     display: flex;
     align-items: center;
 }
 
-.cbi-dropdown[empty] > ul > li,
-.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
-.cbi-dropdown[multiple][open] > ul.dropdown > li > form {
+.cbi-dropdown[empty]>ul>li,
+.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
+.cbi-dropdown[multiple][open]>ul.dropdown>li>form {
     display: block;
 }
 
-.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
-.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
+.cbi-dropdown[open]>ul.dropdown>li .hide-open {
+    display: none;
+}
+
+.cbi-dropdown[open]>ul.dropdown>li .hide-close {
+    display: initial;
+}
 
-.cbi-dropdown[open] > ul.dropdown > li {
+.cbi-dropdown[open]>ul.dropdown>li {
     border-bottom: 1px solid #ccc;
 }
 
-.cbi-dropdown[open] > ul.dropdown > li[selected] {
+.cbi-dropdown[open]>ul.dropdown>li[selected] {
     background: #b0d0f0;
 }
 
-.cbi-dropdown[open] > ul.dropdown > li.focus {
+.cbi-dropdown[open]>ul.dropdown>li.focus {
     background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
 }
 
-.cbi-dropdown[open] > ul.dropdown > li:last-child {
+.cbi-dropdown[open]>ul.dropdown>li:last-child {
     margin-bottom: 0;
     border-bottom: none;
 }
@@ -903,22 +981,24 @@ td > table > tbody > tr > td,
     width: auto;
 }
 
-
 /* luci */
 
 .hidden {
     display: none
 }
 
-.left, .left::before {
+.left,
+.left::before {
     text-align: left !important;
 }
 
-.right, .right::before {
+.right,
+.right::before {
     text-align: right !important;
 }
 
-.center, .center::before {
+.center,
+.center::before {
     text-align: center !important;
 }
 
@@ -943,6 +1023,7 @@ td > table > tbody > tr > td,
 }
 
 /* select */
+
 .cbi-value-field .cbi-dropdown {
     min-width: 15rem;
 }
@@ -951,8 +1032,10 @@ td > table > tbody > tr > td,
     width: 15rem;
 }
 
-.th[data-type="button"], .td[data-type="button"],
-.th[data-type="fvalue"], .td[data-type="fvalue"] {
+.th[data-type="button"],
+.td[data-type="button"],
+.th[data-type="fvalue"],
+.td[data-type="fvalue"] {
     flex: 1 1 2em;
     text-align: center;
 }
@@ -965,20 +1048,20 @@ td > table > tbody > tr > td,
     border-radius: 20px;
 }
 
-td > .ifacebadge,
-.td > .ifacebadge {
+td>.ifacebadge,
+.td>.ifacebadge {
     background-color: #F0F0F0;
     font-size: 0.9rem;
 }
 
-.ifacebadge > em,
-.ifacebadge > img {
+.ifacebadge>em,
+.ifacebadge>img {
     display: inline-block;
     margin: 0 .2rem;
     align-self: flex-start;
 }
 
-.ifacebadge > img + img {
+.ifacebadge>img+img {
     margin: 0 .2rem 0 0;
 }
 
@@ -998,11 +1081,11 @@ td > .ifacebadge,
     height: 100%;
 }
 
-.network-status-table .ifacebox-body > span {
+.network-status-table .ifacebox-body>span {
     flex: 10 10 auto;
 }
 
-.network-status-table .ifacebox-body > div {
+.network-status-table .ifacebox-body>div {
     display: flex;
     flex-wrap: wrap;
 }
@@ -1094,9 +1177,9 @@ td > .ifacebadge,
     float: left;
 }
 
-.uci-change-legend-label > ins,
-.uci-change-legend-label > del,
-.uci-change-legend-label > var {
+.uci-change-legend-label>ins,
+.uci-change-legend-label>del,
+.uci-change-legend-label>var {
     float: left;
     margin-right: 4px;
     width: 10px;
@@ -1117,6 +1200,7 @@ td > .ifacebadge,
 }
 
 /* other fix */
+
 #iwsvg,
 #iwsvg2,
 #bwsvg {
@@ -1124,7 +1208,9 @@ td > .ifacebadge,
     overflow: hidden;
     border-radius: 20px;
 }
-#iwsvg, #bwsvg {
+
+#iwsvg,
+#bwsvg {
     margin-top: 1rem;
 }
 
@@ -1167,14 +1253,14 @@ td > .ifacebadge,
     border: none;
 }
 
-.zonebadge > input[type="text"] {
+.zonebadge>input[type="text"] {
     padding: 0.16rem 1rem;
     min-width: 10rem;
     margin-top: 0.3rem;
 }
 
-.zonebadge > em,
-.zonebadge > strong {
+.zonebadge>em,
+.zonebadge>strong {
     margin: 0 0.2rem;
     display: inline-block;
 }
@@ -1190,25 +1276,25 @@ td > .ifacebadge,
     margin-top: 0;
 }
 
-.cbi-value-field > input + .cbi-value-description {
+.cbi-value-field>input+.cbi-value-description {
     padding: 0;
 }
 
-.cbi-value-field > ul > li {
+.cbi-value-field>ul>li {
     display: flex;
 }
 
-.cbi-value-field > ul > li > label {
+.cbi-value-field>ul>li>label {
     margin-top: 0.5rem;
 }
 
-.cbi-value-field > ul > li .ifacebadge {
+.cbi-value-field>ul>li .ifacebadge {
     background-color: #eee;
     margin-left: 0.4rem;
     margin-top: -0.5rem;
 }
 
-.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
+.cbi-section-table-row>.cbi-value-field .cbi-dropdown {
     min-width: 7rem;
 }
 
@@ -1218,7 +1304,7 @@ td > .ifacebadge,
     align-items: center;
 }
 
-.cbi-section-create > * {
+.cbi-section-create>* {
     margin: 0.5rem;
 }
 
@@ -1226,7 +1312,9 @@ td > .ifacebadge,
     padding: 0.5rem;
 }
 
-div.cbi-value var, td.cbi-value-field var, .td.cbi-value-field var {
+div.cbi-value var,
+td.cbi-value-field var,
+.td.cbi-value-field var {
     font-style: italic;
     color: #0069D6;
 }
@@ -1281,7 +1369,7 @@ small {
 }
 
 .zonebadge-empty {
-    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);
+    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);
     color: #404040;
 }
 
@@ -1290,11 +1378,11 @@ small {
     min-width: 10rem;
 }
 
-.zone-forwards > * {
+.zone-forwards>* {
     flex: 1 1 45%;
 }
 
-.zone-forwards > span {
+.zone-forwards>span {
     flex-basis: 10%;
     text-align: center;
     padding: 0 .25rem;
@@ -1306,7 +1394,7 @@ small {
     flex-direction: column;
 }
 
-#diag-rc-output > pre {
+#diag-rc-output>pre {
     background-color: #f5f5f5;
     display: block;
     padding: 8.5px;
@@ -1325,13 +1413,13 @@ input[name="nslookup"] {
     width: 80%;
 }
 
-header > .container > .pull-right > * {
+header>.container>.pull-right>* {
     position: relative;
     top: 0.45rem;
     cursor: pointer;
 }
 
-#xhr_poll_status > .label.success {
+#xhr_poll_status>.label.success {
     background-color: #F24C7C;
 }
 
@@ -1340,7 +1428,6 @@ header > .container > .pull-right > * {
     font-size: 0.8rem;
     font-weight: bold;
     color: #ffffff !important;
-    text-transform: uppercase;
     white-space: nowrap;
     background-color: #bfbfbf;
     -webkit-border-radius: 3px;
@@ -1372,15 +1459,16 @@ header > .container > .pull-right > * {
 }
 
 /* fix status processes */
-.node-status-processes > .main .table .tr .td:nth-child(3) {
+
+.node-status-processes>.main .table .tr .td:nth-child(3) {
     white-space: normal;
 }
 
-.node-status-iptables > .main div > .cbi-map > form {
+.node-status-iptables>.main div>.cbi-map>form {
     margin: 2rem 2rem 0 0;
 }
 
-.node-status-iptables > .main div > .cbi-map > form input {
+.node-status-iptables>.main div>.cbi-map>form input {
     padding: .8em;
     border-radius: 20px;
 }
@@ -1390,79 +1478,92 @@ header > .container > .pull-right > * {
 }
 
 /* fix status realtime traffic and wireless */
+
 .node-status-realtime.lang_enTraffic .cbi-tabmenu,
 .node-status-realtime.lang_enWireless .cbi-tabmenu {
     background-color: #d4d4d4;
 }
-.node-status-realtime.lang_enTraffic .cbi-tabmenu > li[class~="cbi-tab"],
-.node-status-realtime.lang_enTraffic .cbi-tabmenu > li:hover,
-.node-status-realtime.lang_enWireless .cbi-tabmenu > li[class~="cbi-tab"],
-.node-status-realtime.lang_enWireless .cbi-tabmenu > li:hover {
+
+.node-status-realtime.lang_enTraffic .cbi-tabmenu>li[class~="cbi-tab"],
+.node-status-realtime.lang_enTraffic .cbi-tabmenu>li:hover,
+.node-status-realtime.lang_enWireless .cbi-tabmenu>li[class~="cbi-tab"],
+.node-status-realtime.lang_enWireless .cbi-tabmenu>li:hover {
     background-color: #F1F1F1;
 }
-.node-status-realtime.lang_enTraffic  #bwsvg,
-.node-status-realtime.lang_enWireless  #iwsvg,
-.node-system-packages .cbi-map > .cbi-section,
-.node-system-packages form .cbi-section{
+
+.node-status-realtime.lang_enTraffic #bwsvg,
+.node-status-realtime.lang_enWireless #iwsvg,
+.node-system-packages .cbi-map>.cbi-section,
+.node-system-packages form .cbi-section {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
 }
 
 /* fix system system */
+
 .node-system-system .cbi-tabmenu {
     background-color: #d4d4d4;
 }
-.node-system-system .cbi-tabmenu > li[class~="cbi-tab"]{
+
+.node-system-system .cbi-tabmenu>li[class~="cbi-tab"] {
     background-color: #fff;
 }
 
 /* fix system reboot */
 
-.node-system-reboot > .main > .main-right p,
-.node-system-reboot > .main > .main-right h3 {
+.node-system-reboot>.main>.main-right p,
+.node-system-reboot>.main>.main-right h3 {
     padding-left: 2rem;
 }
 
 /* fix Services  Network Shares*/
-.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
+.node-services-samba.lang_enNetwork #cbi-samba-sambashare .table-container {
+    overflow-x: scroll;
+}
+
+.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
     margin-bottom: 1rem;
     width: auto;
 }
 
-.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
+.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
     display: list-item;
 }
 
-.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
+.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
     padding-top: 1rem;
 }
 
 /* fix System Software*/
+
 .node-system-packages #swfreespace {
     background-color: #468ea4 !important;
     border: none !important;
     border-radius: 20px
 }
-.node-system-packages #swfreespace > div {
+
+.node-system-packages #swfreespace>div {
     background-color: #f24c7c !important;
     border: none !important;
     border-radius: 20px
 }
-.node-system-packages > .main table tr td:nth-child(1) {
+
+.node-system-packages>.main table tr td:nth-child(1) {
     width: auto !important;
 }
 
-.node-system-packages > .main table tr td:nth-last-child(1) {
+.node-system-packages>.main table tr td:nth-last-child(1) {
     white-space: normal;
     font-size: small;
     color: #404040;
 }
 
-.node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a {
+.node-system-packages>.main .cbi-tabmenu>li>a,
+.tabs>li>a {
     padding: 0.5rem 0.8rem;
 }
 
-.node-system-packages > .main .cbi-value > pre {
+.node-system-packages>.main .cbi-value>pre {
     background-color: #eee;
     padding: 0.5rem;
     overflow: auto;
@@ -1476,7 +1577,7 @@ header > .container > .pull-right > * {
     margin: 0;
 }
 
-.cbi-tabmenu + .cbi-section {
+.cbi-tabmenu+.cbi-section {
     margin-top: 0;
 }
 
@@ -1485,7 +1586,7 @@ header > .container > .pull-right > * {
     border: none;
 }
 
-.node-system-flashops form.inline + form.inline {
+.node-system-flashops form.inline+form.inline {
     margin-left: 0;
 }
 
@@ -1517,22 +1618,28 @@ header > .container > .pull-right > * {
 }
 
 /* fix Network Network*/
+
 .node-network-network .cbi-rowstyle-2 .ifacebox-body {
     background-color: #fff;
 }
-.lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu + div {
+
+.lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu+div {
     overflow: inherit;
 }
+
 /* fix Network Wireless*/
+
 .node-network-wireless .cbi-section-node {
     margin-bottom: 1rem;
 }
 
 /* applyreboot fix */
+
 #maincontainer {
     text-align: center;
 }
-#maincontainer > #maincontent {
+
+#maincontainer>#maincontent {
     padding: 1rem;
     margin: 0 auto;
     border-radius: 10px;
@@ -1540,29 +1647,34 @@ header > .container > .pull-right > * {
     max-width: 800px;
     width: 40%;
 }
+
 #applyreboot-container {
     margin-bottom: 1rem;
 }
+
 #applyreboot-section {
     text-align: left;
     background: #fff;
     padding: 1rem;
     border-radius: 10px;
 }
-#applyreboot-section > div {
+
+#applyreboot-section>div {
     margin: 1rem 0;
     line-height: 1.5rem;
 }
+
 #applyreboot-container {
-       margin: 90px 2rem 2rem 2rem;
+    margin: 90px 2rem 2rem 2rem;
 }
 
 #applyreboot-section {
-       margin: 2rem;
-       line-height: 300%;
+    margin: 2rem;
+    line-height: 300%;
 }
 
 /* Shared style */
+
 header {
     height: 0;
     position: fixed;
@@ -1572,16 +1684,19 @@ header {
     z-index: 100;
     overflow: hidden;
 }
+
 header {
     padding-right: 1rem;
     background: #fff;
     color: white;
     border-bottom: 1px solid #dadada;
 }
+
 header .fill,
 header .container {
     height: 100%;
 }
+
 header .brand {
     padding-left: .8rem;
     color: #354057;
@@ -1593,23 +1708,29 @@ header .brand {
     width: 10%;
     text-align: center;
 }
+
 header .btn-con {
     line-height: 70px;
 }
+
 header .logout {
     background-color: #354057;
 }
+
 header .logout a {
     text-decoration: none;
     color: #fff;
 }
+
 .main {
     height: auto;
     min-height: 100%;
 }
+
 .main-right {
     height: auto;
 }
+
 .main-left {
     top: 10px;
     bottom: 10px;
@@ -1621,36 +1742,42 @@ header .logout a {
     border-radius: 20px;
     min-width: 170px;
 }
-.main > .main-left .navbar-container {
+
+.main>.main-left .navbar-container {
     margin-top: 0.5rem;
     float: right;
     width: calc(100% + 10px);
     height: calc(100% - 110px);
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow: hidden;
 }
-.main > .main-left .nav {
+
+.main>.main-left .nav {
     height: auto;
 }
-.main > .main-left .nav > li a {
+
+.main>.main-left .nav>li a {
     color: #fff;
     display: block;
 }
-.main > .main-left .nav > li {
+
+.main>.main-left .nav>li {
     padding: 0.5rem 1.7rem;
     cursor: pointer;
 }
-.main > .main-left .nav > .slide {
+
+.main>.main-left .nav>.slide {
     padding: 0 15px 0 0;
     margin-bottom: 8px;
     overflow: hidden;
 }
-.main > .main-left .nav > .slide > ul {
+
+.main>.main-left .nav>.slide>ul {
     display: none;
     float: right;
     width: calc(100% - 10px);
 }
-.main > .main-left .nav > .slide > .menu {
+
+.main>.main-left .nav>.slide>.menu {
     display: block;
     padding: 0.5rem 1.7rem;
     text-decoration: none;
@@ -1659,66 +1786,81 @@ header .logout a {
     width: 100%;
     float: right;
 }
-.main > .main-left .nav > li > a.active,
-.main > .main-left .nav > .slide > .menu:hover,
-.main > .main-left .nav > .slide > .menu.active {
+
+.main>.main-left .nav>li>a.active,
+.main>.main-left .nav>.slide>.menu:hover,
+.main>.main-left .nav>.slide>.menu.active {
     background: #485267;
     float: right;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
 }
-.main > .main-left .nav > .slide:hover {
+
+.main>.main-left .nav>.slide:hover {
     background: none;
 }
-.main > .main-left .nav > .slide > .slide-menu > li {
+
+.main>.main-left .nav>.slide>.slide-menu>li {
     padding: 0.6rem 2rem;
     margin: 8px 0;
 }
-.main > .main-left .nav > .slide > .slide-menu > .active {
+
+.main>.main-left .nav>.slide>.slide-menu>.active {
     background-color: #F24C7C;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
 }
-.main > .main-left .nav > .slide > .slide-menu > li > a {
+
+.main>.main-left .nav>.slide>.slide-menu>li>a {
     text-decoration: none;
     white-space: nowrap;
 }
-.main > .main-left .nav > .slide > .slide-menu > .active > a {
+
+.main>.main-left .nav>.slide>.slide-menu>.active>a {
     color: white;
 }
-.main > .main-left .nav > .slide > .slide-menu > li:hover {
+
+.main>.main-left .nav>.slide>.slide-menu>li:hover {
     background: #F24C7C;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
 }
-.main > .main-left .nav > .slide > .slide-menu > .active:hover {
+
+.main>.main-left .nav>.slide>.slide-menu>.active:hover {
     background-color: #F24C7C;
     cursor: hand;
 }
 
 /* The scroll bar of the navigation bar is compatible with each browser. */
+
 /* Google */
-.main > .main-left .navbar-container::-webkit-scrollbar {
+
+.main>.main-left .navbar-container::-webkit-scrollbar {
     width: 6px;
     background: transparent;
 }
-.main > .main-left .navbar-container::-webkit-scrollbar-button {
+
+.main>.main-left .navbar-container::-webkit-scrollbar-button {
     display: none;
 }
-.main > .main-left .navbar-container::-webkit-scrollbar-thumb {
+
+.main>.main-left .navbar-container::-webkit-scrollbar-thumb {
     background-color: #ffffff61;
     border-radius: 10px;
 }
-.main > .main-left .navbar-container::-webkit-scrollbar-thumb {
+
+.main>.main-left .navbar-container::-webkit-scrollbar-thumb {
     background-color: #839dd67a;
     border-radius: 10px;
 }
-.main > .main-left .navbar-container:hover::-webkit-scrollbar-thumb {
+
+.main>.main-left .navbar-container:hover::-webkit-scrollbar-thumb {
     background-color: #839dd67a;
 }
 
 /* IE */
-.main > .main-left .navbar-container {
+
+.main>.main-left .navbar-container {
     scrollbar-track-color: transparent;
     scrollbar-face-color: #839dd67a;
     scrollbar-arrow-color: transparent;
@@ -1726,9 +1868,10 @@ header .logout a {
     scrollbar-highlight-color: transparent;
     scrollbar-shadow-color: transparent;
     scrollbar-darkshadow-color: transparent;
-    scrollbar-base-color:transparent;
+    scrollbar-base-color: transparent;
 }
-.main > .main-left .navbar-container:hover {
+
+.main>.main-left .navbar-container:hover {
     scrollbar-face-color: #839dd67a;
 }
 
@@ -1743,9 +1886,8 @@ footer {
     right: 0;
 }
 
-
-
 /* The style of the prompt message */
+
 .alert-message {
     padding: 13px 11%;
     border-radius: 10px;
@@ -1766,7 +1908,7 @@ footer {
     color: red;
 }
 
-.alert-message > h4 {
+.alert-message>h4 {
     padding: 7px 0 7px 36px;
     margin: 0;
     font-weight: normal;
@@ -1775,7 +1917,7 @@ footer {
     display: inline-block;
 }
 
-.alert-message > p {
+.alert-message>p {
     font-size: 14px;
     line-height: 1.5rem;
 }
@@ -1791,30 +1933,32 @@ footer {
     border-radius: 50px;
 }
 
-
 /* All styles of the login interface */
 .node-main-login {
     height: auto;
     min-height: 100%;
     background: #fff url(./loginBG.png) no-repeat center center / cover;
 }
+
 .node-main-login header {
     display: none;
 }
+
 .node-main-login .main {
     height: auto;
 }
-.node-main-login > .main > .main-left {
+
+.node-main-login>.main>.main-left {
     display: none;
 }
 
-.node-main-login > .main > .main-right {
+.node-main-login>.main>.main-right {
     width: 100%;
     height: auto;
     min-height: 100%;
 }
 
-.node-main-login > .main #maincontent {
+.node-main-login>.main #maincontent {
     position: absolute;
     min-width: 492px;
     width: 100%;
@@ -1825,21 +1969,22 @@ footer {
     text-align: center;
 }
 
-.node-main-login > .main .container {
+.node-main-login>.main .container {
     padding: 0;
     width: 30%;
     max-width: 492px;
     display: inline-block;
 }
 
-.node-main-login > .main .logoImg a {
+.node-main-login>.main .logoImg a {
     margin: 0 0 18px 0;
     display: block;
     font-size: 30px;
     color: #fff;
     text-decoration: none;
 }
-.node-main-login > .main .logoImg img:first-child {
+
+.node-main-login>.main .logoImg img:first-child {
     width: 72px;
 }
 
@@ -1848,7 +1993,7 @@ footer {
     color: #fff;
 }
 
-.node-main-login > .main form h2 {
+.node-main-login>.main form h2 {
     margin: 17px 0;
     padding: 0;
     font-size: 24px;
@@ -1857,38 +2002,38 @@ footer {
     border: 0;
 }
 
-.node-main-login > .main form .cbi-map-descr {
+.node-main-login>.main form .cbi-map-descr {
     margin: 0 0 12px;
     padding: 0;
     font-size: 12px;
     color: #B1B6BB;
 }
 
-.node-main-login > .main form .cbi-section {
+.node-main-login>.main form .cbi-section {
     margin: 0;
     padding: 0;
     background-color: transparent;
     box-shadow: none;
 }
 
-.node-main-login > .main form .cbi-value {
+.node-main-login>.main form .cbi-value {
     display: block;
 }
 
-.node-main-login > .main form .cbi-value-title {
+.node-main-login>.main form .cbi-value-title {
     margin: 0;
     padding: 0;
     display: none;
 }
 
-.node-main-login > .main form .cbi-value-field {
+.node-main-login>.main form .cbi-value .cbi-value-field {
     margin-bottom: 16px;
     display: block;
     width: 100%;
     position: relative;
 }
 
-.node-main-login > .main form .cbi-value-field input {
+.node-main-login>.main form .cbi-value-field input {
     padding-left: 48px;
     width: 100%;
     border: 1px solid #556270;
@@ -1908,20 +2053,25 @@ footer {
     left: 16px;
     transform: translateY(-50%);
 }
+
 .node-main-login form .cbi-value-field .iconpwd {
     background: transparent url(./pwd.png) no-repeat center center / 100%;
 }
+
 .node-main-login form .cbi-value-field .iconuser {
     background: transparent url(./user.png) no-repeat center center / 100%;
 }
+
 .node-main-login form .cbi-value-field .iconeye {
     left: auto;
     right: 16px;
     background: transparent url(./op-eye.png) no-repeat center center / 100%;
 }
+
 .node-main-login form .cbi-value-field .cleye {
     background-image: url(./cl-eye.png);
 }
+
 .node-main-login form .cbi-value-field .opeye {
     background-image: url(./op-eye.png);
 }
@@ -1959,25 +2109,29 @@ footer {
     box-shadow: 0 0 0 1000px white inset;
 }
 
-
 /* Interface after login */
 .logged-in {
     background-color: #EBF1F6;
 }
+
 .logged-in header {
     height: 70px;
 }
+
 .logged-in .main {
     overflow: hidden;
 }
+
 .logged-in .main-right {
     padding: 0 1rem 3rem 0;
     margin-top: 90px;
     float: right;
 }
+
 .logged-in .main .logoImg {
     display: none;
 }
+
 .logged-in .main .main-left .nav-container {
     background-color: #354057;
     border-radius: 20px;
@@ -1987,6 +2141,7 @@ footer {
     right: -10px;
     bottom: 10px;
 }
+
 .logged-in .main .main-left .brand {
     margin: 0 auto;
     padding: 44px 0 23px;
@@ -1997,7 +2152,6 @@ footer {
     text-align: center;
     text-decoration: none;
     border-bottom: 2px solid #ffffff42;
-
     /* Single line text omitted */
     white-space: nowrap;
     overflow: hidden;
@@ -2031,7 +2185,7 @@ footer {
         font-size: 0.8rem;
     }
 
-    header > .container > .pull-right > * {
+    header>.container>.pull-right>* {
         top: 0.35rem;
     }
 
@@ -2050,12 +2204,12 @@ footer {
 }
 
 @media screen and (max-width: 1280px) {
-
-    .node-main-login > .main .container {
+    .node-main-login>.main .container {
         width: 50%;
     }
 
-    .cbi-tabmenu > li > a, .tabs > li > a {
+    .cbi-tabmenu>li>a,
+    .tabs>li>a {
         padding: 0.2rem 0.5rem;
     }
 
@@ -2069,28 +2223,31 @@ footer {
         width: 100% !important;
     }
 
-    .main > .main-left .nav > li,
-    .main > .main-left .nav > li a,
-    .main > .main-left .nav > .slide > .menu {
+    .main>.main-left .nav>li,
+    .main>.main-left .nav>li a,
+    .main>.main-left .nav>.slide>.menu {
         font-size: 0.9rem;
     }
 
-    .main > .main-left .nav > .slide > .slide-menu > li > a {
+    .main>.main-left .nav>.slide>.slide-menu>li>a {
         font-size: 0.7rem;
     }
 }
 
 @media screen and (max-width: 992px) {
-    header {
+    .logged-in header {
         padding: 0 .8rem;
         height: 45px;
     }
+
     header .brand {
         display: none;
     }
+
     header .btn-con {
         line-height: 45px;
     }
+
     .main-left {
         width: auto;
         height: auto;
@@ -2105,17 +2262,25 @@ footer {
         min-width: 0;
         overflow: hidden;
     }
-    .main > .main-left .nav > .slide > .slide-menu > li {
+
+    .main>.main-left .navbar-container {
+       overflow-y: scroll;
+       overflow-x: hidden;
+    }
+
+    .main>.main-left .nav>.slide>.slide-menu>li {
         width: 90%;
     }
+
     header .container {
         line-height: 43px;
     }
+
     .main-right {
         width: 100%;
     }
 
-    .node-main-login > .main .container {
+    .node-main-login>.main .container {
         width: 60%;
     }
 
@@ -2130,7 +2295,7 @@ footer {
         padding-right: 1rem;
     }
 
-    #diag-rc-output > pre {
+    #diag-rc-output>pre {
         font-size: 1rem;
     }
 
@@ -2140,7 +2305,8 @@ footer {
         flex-wrap: wrap;
     }
 
-    .th, .td {
+    .th,
+    .td {
         flex: 2 2 25%;
         align-self: flex-start;
         text-overflow: ellipsis;
@@ -2154,7 +2320,7 @@ footer {
         width: 100%;
     }
 
-    .td [data-dynlist] > input,
+    .td [data-dynlist]>input,
     .td input.cbi-input-password {
         width: calc(100% - 1.5rem);
     }
@@ -2225,9 +2391,11 @@ footer {
     .node-main-login .showSide {
         display: none !important;
     }
+
     .logged-in .main {
         padding-bottom: .8rem;
     }
+
     .logged-in .main .main-left .nav-container {
         background-color: #354057;
         border-radius: 0;
@@ -2237,6 +2405,7 @@ footer {
         right: 20%;
         bottom: 0;
     }
+
     .logged-in .main-right {
         padding: 0 .8rem;
         margin-top: calc(45px + .8rem);
@@ -2244,6 +2413,7 @@ footer {
         max-width: unset;
         float: unset;
     }
+
     .logged-in .alert-message {
         padding: 8px .8rem;
     }
@@ -2252,43 +2422,56 @@ footer {
         margin: .8rem 0 0 0;
         padding: .8rem;
     }
+
     small {
         font-size: 10px;
         line-height: 0;
     }
-    .cbi-section > h3:first-child, .panel-title {
+
+    .cbi-section>h3:first-child,
+    .panel-title {
         font-size: 1rem;
     }
-    .network-status-table .ifacebox-body > span {
+
+    .network-status-table .ifacebox-body>span {
         font-size: 12px;
     }
-    .cbi-section .ifacebox-body .ifacebadge > span {
+
+    .cbi-section .ifacebox-body .ifacebadge>span {
         font-size: 12px;
     }
-    .table .tr.cbi-rowstyle-1:nth-child(n), .table .tr:nth-child(n) {
+
+    .table .tr.cbi-rowstyle-1:nth-child(n),
+    .table .tr:nth-child(n) {
         font-size: 12px;
     }
+
     .node-network-firewall .table .tr.cbi-rowstyle-1:nth-child(n),
     .node-network-firewall .table .tr:nth-child(n) {
         border-radius: 20px;
         overflow: hidden;
     }
+
     h2 {
         margin: 1rem 0 0 0;
         font-size: 1.4rem;
         padding-bottom: 0;
         border-bottom: none;
     }
+
     h4 {
         font-size: 1rem;
     }
+
     .cbi-section-node-tabbed {
         padding: 0 .5rem;
     }
+
     .cbi-button,
     .cbi-button-action.important {
         margin-right: .3rem;
     }
+
     select {
         border-bottom: 1px solid rgba(0, 0, 0, .26);
     }
@@ -2299,19 +2482,18 @@ footer {
     }
 }
 
-
 @media screen and (max-width: 768px) {
     .node-main-login {
         background: none;
     }
 
-    .node-main-login > .main .logoImg a {
+    .node-main-login>.main .logoImg a {
         font-size: 30px;
         margin: 12px 0 22px 0;
         color: #354057;
     }
 
-    .node-main-login > .main #maincontent {
+    .node-main-login>.main #maincontent {
         padding-top: 0;
         padding-bottom: 1rem;
         min-width: 100%;
@@ -2323,15 +2505,16 @@ footer {
         padding: 8px 15%;
     }
 
-    .alert-message > h4{
+    .alert-message>h4 {
         font-size: 14px;
     }
-    .alert-message > p,
+
+    .alert-message>p,
     .alert-message a {
         font-size: 12px;
     }
-    .a
-    lert-message > h4 {
+
+    .a lert-message>h4 {
         padding: 8px 0 8px 36px;
     }
 
@@ -2350,20 +2533,20 @@ footer {
         background: #fff;
     }
 
-    .node-main-login > .main form h2 {
+    .node-main-login>.main form h2 {
         font-size: 16px;
         margin: 20px 0 16px;
         color: #354057;
     }
 
-    .node-main-login > .main form .cbi-value-field input {
+    .node-main-login>.main form .cbi-value-field input {
         padding-left: 34px;
         height: 36px;
         background-size: 16px;
         font-size: 16px;
     }
 
-    .node-main-login > .main form .cbi-value-field {
+    .node-main-login>.main form .cbi-value-field {
         margin-bottom: 20px;
     }
 
@@ -2379,6 +2562,7 @@ footer {
         width: 16px;
         left: 12px;
     }
+
     .node-main-login form .cbi-value-field .iconeye {
         left: auto;
         right: 12px;
@@ -2407,28 +2591,31 @@ footer {
         text-align: left;
     }
 
-    .cbi-value-field, .cbi-value-description {
+    .cbi-value-field,
+    .cbi-value-description {
         width: 100%;
     }
 
-    .cbi-value > .cbi-value-field {
+    .cbi-value>.cbi-value-field {
         display: inline-block;
     }
 
-    .cbi-tabmenu > li, .tabs > li {
+    .cbi-tabmenu>li,
+    .tabs>li {
         padding: 0.6rem 0rem;
     }
 
-    .cbi-tabmenu > li > a, .tabs > li > a {
+    .cbi-tabmenu>li>a,
+    .tabs>li>a {
         padding: 0.2rem 0.3rem;
         font-size: 0.9rem;
     }
 
-    .cbi-page-actions > div > input {
+    .cbi-page-actions>div>input {
         display: none;
     }
 
-    .tabs > li > a {
+    .tabs>li>a {
         font-size: 0.9rem;
     }
 
@@ -2442,15 +2629,15 @@ footer {
         padding-bottom: 1rem;
     }
 
-    .node-system-packages > .main .cbi-value.cbi-value-last > div {
+    .node-system-packages>.main .cbi-value.cbi-value-last>div {
         width: 100% !important;
     }
 
-    .node-system-packages > .main .cbi-value .cbi-value-field input {
+    .node-system-packages>.main .cbi-value .cbi-value-field input {
         width: 100%;
     }
 
-    .node-status-iptables > .main div > .cbi-map > form {
+    .node-status-iptables>.main div>.cbi-map>form {
         position: static !important;
         margin: 0 0 2rem 0;
         padding: 2rem;
@@ -2465,20 +2652,21 @@ footer {
         -webkit-overflow-scrolling: touch;
     }
 
-    .node-status-iptables > .main div > .cbi-map > form input[type="submit"] {
+    .node-status-iptables>.main div>.cbi-map>form input[type="submit"] {
         width: 100% !important;
         margin: 0;
     }
 
-    .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"] {
+    .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] {
         margin-top: 1rem;
     }
 
-    .node-main-login > .main .container {
+    .node-main-login>.main .container {
         min-width: 90%;
     }
 
-    .th, .td {
+    .th,
+    .td {
         flex-basis: 50%;
     }
 
@@ -2506,7 +2694,7 @@ footer {
     }
 
     /* All styles of the login interface */
-    .node-main-login > .main .cbi-value {
+    .node-main-login>.main .cbi-value {
         padding: 0;
     }