/**
 *  SNR is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
 *
 *  luci-theme-snr
 *      Copyright 2020 Siuzev Evegniy <esuzev@gmail.com>
 *
 *  luci-theme-snr:
 *      Copyright 2015 Lutty Yang <lutty@wcan.in>
 *  luci-theme-bootstrap:
 *      Copyright 2008 Steven Barth <steven@midlink.org>
 *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
 *      Copyright 2012 David Menting <david@nut-bolt.nl>
 *
 *  MUI:
 *      https://github.com/muicss/mui
 *
 *  Licensed to the public under the Apache License 2.0
 */

/*
 *  Font generate by Icomoon<icomoon.io>
 */
 @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');
    font-weight: normal;
    font-style: normal;
}

.cbi-button-up,
.cbi-button-down,
.cbi-value-helpicon,
.showSide,
.main > .loading > span {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 400;
    line-height: 1.1;
    color: inherit;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-size: 0.8rem;
    background-color: #EEE;
}

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
}

select {
    padding: 0.36rem 0.8rem;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}

select,
input {
    background-color: transparent;
    color: rgba(0, 0, 0, .87);
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, .26);
    outline: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    background-image: none;
    height: 3rem;
    font-size: 1.4rem;
}

select:disabled,
input:disabled {
    opacity: 0.7;
    background-color: #FFFFFF;
    filter: brightness(95%);
}

select:not([multiple="multiple"]):focus,
input:focus {
    border-color: #0099CC;
}

select[multiple="multiple"] {
    height: auto;
}

code {
    color: #0099CC;
}

abbr {
    color: #005470;
    text-decoration: underline;
    cursor: help;
}

hr {
    margin: 1rem 0;
    border-color: #EEE;
    opacity: 0.1;
}

header, .main {
    width: 100%;
    position: absolute;
}

header {
    height: 4rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
    transition: box-shadow .2s;
    float: left;
    position: fixed;
    z-index: 101;
}

footer {
    text-align: right;
    padding: 1rem;
    color: #aaa;
    font-size: 1.2rem;
    text-shadow: 0px 0px 2px #BBB;
	display: none;
}

footer > a {
    color: #aaa;
    text-decoration: none;
}

.main {
    top: 4rem;
    bottom: 0rem;
    position: relative;
    height: 100%;
    height: calc(100% - 4rem);
}

.main > .loading {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: block;
    background-color: rgb(240, 240, 240);
    top: 0;
}

.main > .loading > span {
    display: block;
    text-align: center;
    margin-top: 2rem;
    color: #6D28AA;
    font-size: 2rem;
}

.main > .loading > span > .loading-img:before {
    content: "\e603";
}

.main > .loading > span > .loading-img {
    animation: anim-rotate 2s infinite linear;
    margin-right: 0.2rem;
    display: inline-block;
}

@keyframes anim-rotate {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.main-left {
    float: left;
    top: 4rem;
    width: 15%;
    width: calc(0% + 15rem);
    height: 100%;
    height: calc(100% - 4rem);
    background-color: white;
    overflow-x: auto;
    position: fixed;
}

.main-right {
    width: 85%;
    width: calc(100% - 15rem);
    float: right;
    height: 100%;
    background-color: #EEE;
}

.main-right > #maincontent {
    background-color: #EEE;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

header {
    background: #0099CC;
    color: white;
}

header > .container {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem 0 1rem;
}

header > .container > .brand {
    font-size: 1.4rem;
    color: white;
    text-decoration: none;
    cursor: default;
    vertical-align: text-bottom;
}

.warning {
    background-color: #FF7D60 !important;
    color: #FFF;
}

.errorbox,
.alert-message {
    margin: 0 0 2rem 0;
    padding: 1rem;
    border: 0;
    font-weight: normal;
    font-style: normal;
    line-height: 2;
    font-family: inherit;
    min-width: inherit;
    overflow: auto;
    border-radius: 0;
    background-color: #FFF;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}

.errorbox {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.error {
    color: red;
}

.cbi-section-error {
    margin: 0 0 0 0;
    padding: 2rem;
    border: 0;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    font-family: inherit;
    min-width: inherit;
    overflow: auto;
    border-radius: 0;
    background-color: #FFF;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

#maincontent > .container > div.alert-message.warning > a {
    font: inherit;
    overflow: visible;
    text-transform: none;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    min-width: 6rem;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    line-height: 1.42857143;
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    margin-top: 0.5rem;
    text-decoration: inherit;
}

.main > .main-left > .nav {
    margin-top: 0.5rem;
}

.main > .main-left > .nav > li a {
    color: #404040;
    display: block;
}

.main > .main-left > .nav > li:nth-last-child(1) {
    margin-top: 2rem;
    font-size: 1.2rem;
}

.main > .main-left > .nav > li {
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.main > .main-left > .nav > .slide {
    padding: 0;
}

.main > .main-left > .nav > .slide > ul {
    display: none;
}

.main > .main-left > .nav > .slide > .menu {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    cursor: default;
    font-size: 1.15rem;
}

.main > .main-left > .nav > li:hover,
.main > .main-left > .nav > .slide > .menu:hover {
    background: #D4D4D4;
}

.main > .main-left > .nav > .slide:hover {
    background: none;
}

.main > .main-left > .nav > .slide > .slide-menu > li {
    padding: 0.4rem 2rem;
}

.main > .main-left > .nav > .slide > .slide-menu > .active {
    background-color: #0099CC;
}

.main > .main-left > .nav > .slide > .slide-menu > li > a {
    text-decoration: none;
    white-space: nowrap;
}

.main > .main-left > .nav > .slide > .slide-menu > .active > a {
    color: white;
}

.main > .main-left > .nav > .slide > .slide-menu > li:hover {
    background: #D4D4D4;
}

.main > .main-left > .nav > .slide > .slide-menu > .active:hover {
    background-color: #0099CC;
    cursor: hand;
}

li {
    list-style-type: none;
}

#maincontent > .container {
    margin: 0 2rem 1rem 2rem;
    padding-bottom: 2rem;
}

h1 {
    font-size: 2rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

h2 {
    /*margin: 2rem 0 0 0;*/
    font-size: 1.8rem;
    padding-bottom: 10px;
}

body:not(.node-main-login) h2 {
    /*border-bottom: 1px solid #eee;*/
}

h3 {
    margin: 2rem 0 0 0;
    font-size: 1.4rem;
    padding-bottom: 10px;
}

h4 {

}

fieldset {
    margin: 2rem 0 0 0;
    padding: 2rem;
    border: 0;
    font-weight: normal;
    font-style: normal;
    line-height: 1.6rem;
    font-family: inherit;

    min-width: inherit;
    overflow-x: auto;
    overflow-y: hidden;

    border-radius: 0;
    background-color: #FFF;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);

    -webkit-overflow-scrolling: touch;
}

.cbi-map-descr + fieldset {
    /*margin-top: 1rem;*/
}

fieldset > legend {
    display: none !important;
}

fieldset > fieldset {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

.panel-title {
    width: 100%;
    display: block;
    line-height: 1;
    color: #404040;
    font-size: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    /*border: 1px solid #eee;*/
}

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: 1rem 0 1rem 2rem;
    /*border-top: 1px solid #ddd;*/
    white-space: nowrap;
}


table > tbody > tr > td:last-child{
	padding-right: 2rem;
}

td,
.cbi-section-table-cell {
    text-align: left;
	padding: 1rem 0 1rem 2rem;
}

.cbi-section-table-row {
    text-align: left;
}
.cbi-section-table-row td{
    padding: 1rem 2rem;
	line-height: 2rem;
}

fieldset > table > tbody > tr:nth-of-type(2n) {
    /*background-color: #f9f9f9;*/
}

td:nth-of-type(1) {
    background-color: #f9f9f9;
	height: 6rem;
}

/* fix multiple table */

table table {
    border: none;
}

.cbi-value-field table {
    border: none;
}

td > table > tbody > tr > td {
    border: none;
}

.cbi-value-field > table > tbody > tr > td {
    border: none;
}

/* button style */

.cbi-button {
    -webkit-appearance: none;
    /*text-transform: uppercase;*/
    color: rgba(0, 0, 0, 0.87);
    background-color: #F0F0F0;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    padding: 0 2rem;

    border: none;
    border-radius: 0.2rem;
    cursor: pointer;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background-image: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 1.4rem;
    width: auto !important;
    margin: 1rem 2rem;
}

.cbi-button:hover,
.cbi-button:focus,
.cbi-button:active {
    color: rgba(0, 0, 0, 0.87);
    outline: 0;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.87);
}

.cbi-button:hover,
.cbi-button:focus {
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
}

.cbi-button:active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.cbi-button:disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.60;
    box-shadow: none;
}

form.inline + form.inline,
.cbi-button + .cbi-button {
    margin-left: 1rem;
}

.cbi-button-reset,
.cbi-input-remove {
    color: #fff !important;
    background-color: #f0ad4e !important;
    border-color: #eea236 !important;
}

.cbi-input-find,
.cbi-input-save,
.cbi-button-add,
.cbi-button-save,
.cbi-button-find,
.cbi-input-reload,
.cbi-button-reload {
    color: #fff !important;
    background-color: #337ab7 !important;
    border-color: #2e6da4 !important;
    float: right;
}

.cbi-input-apply,
.cbi-button-apply {
    color: #fff !important;
    background-color: #00b27a !important;
    border-color: #00b27a !important;
}

.cbi-button-edit {
    color: #fff !important;
    background-color: #00b27a !important;
    border-color: #00b27a !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.49967V12H2.50034L9.87802 4.62233L7.37767 2.122L0 9.49967Z' fill='%23FFF'/%3E%3Cpath d='M11.805 1.75189L10.2481 0.195026C9.98804 -0.0650086 9.56464 -0.0650086 9.3046 0.195026L8.08443 1.41519L10.5848 3.91552L11.8049 2.69536C12.065 2.43532 12.065 2.01192 11.805 1.75189Z' fill='%23FFF'/%3E%3C/svg%3E%0A");
    background-position: calc(100% - 1.3rem) 50%;
    background-repeat: no-repeat;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

.cbi-input-reset,
.cbi-section-remove > .cbi-button {
    color: #fff !important;
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
}

.cbi-button-remove {
    color: #fff !important;
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23DF4661'/%3E%3Crect x='5' y='9' width='10' height='2' rx='1' fill='white'/%3E%3C/svg%3E%0A");
    background-position: calc(100% - 1rem) 50%;
    background-repeat: no-repeat;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.a-to-btn {
    text-decoration: none;
}

/* table */

.tabs {
    margin: 0 -2rem;
    padding-left: 0.5rem;
    background-color: #FFFFFF;
}

.cbi-tabmenu > li,
.tabs > li {
    display: inline-block;
    padding: 0.6rem 0rem;
}

.cbi-tabmenu > li > a,
.tabs > li > a {
    text-decoration: none;
    color: #404040;
    padding: 0.5rem 0.8rem;
}

.tabs > li[class~="active"],
.tabs > li:hover {
    cursor: pointer;
    border-bottom: 0.2rem solid #0099CC;
    color: #0099CC;
    margin-bottom: -0.18751rem;
}

.tabs > li[class~="active"] > a {
    color: #0099cc;
}

.tabs > li:hover {
    border-bottom: 0.18751rem solid #C9C9C9;
}

.cbi-tabmenu {
/*
	border-top: 1px solid #D4D4D4;
    border-left: 1px solid #D4D4D4;
    border-right: 1px solid #D4D4D4;
	*/
}

.cbi-tabmenu > li:hover {
    background-color: #F1F1F1;
}

.cbi-tabmenu > li[class~="cbi-tab"] {
    background-color: white;
}

.cbi-tabmenu {
    background-color: #D4D4D4;
}

.cbi-section-remove:nth-of-type(2n),
.cbi-section-node:nth-of-type(2n){
    /*background-color: #f9f9f9;*/
}

.cbi-section-node-tabbed {
/*
	padding: 0;
    margin-top: 0;
    border-bottom: 1px solid #D4D4D4;
    border-left: 1px solid #D4D4D4;
    border-right: 1px solid #D4D4D4;
	*/
}

.cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
    background-color: #f9f9f9;
}

.cbi-value-field,
.cbi-value-description {
    display: table-cell;
    line-height: 1.25;
}

.cbi-value-helpicon > img {
    display: none;
}

.cbi-value-helpicon:before {
    content: "\f059";
}

.cbi-value-description {
    font-size: small;
    opacity: 0.5;
    padding: 0.5rem 0 0 0;
}

.cbi-value-title {
    word-wrap: break-word;
    padding-top: 0.6rem;
    width: 23rem;
    float: left;
    text-align: right;
    padding-right: 2rem;
    display: table-cell;
}

.cbi-value {
    padding: 0.3rem 1rem;
    display: inline-block;
    width: 100%;
}

.cbi-section-table-descr > .cbi-section-table-cell,
.cbi-section-table-titles > .cbi-section-table-cell {
    border: none;
}

.cbi-rowstyle-2 {
    background-color: #eee;
}

.cbi-rowstyle-2 .cbi-button-up,
.cbi-rowstyle-2 .cbi-button-down {
/*    background-color: #FFF !important; */
}

.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
    width: auto !important;
}

/* desc */
.cbi-section-descr,
.cbi-map-descr {
    padding: 0.5rem;
    color: #999;
    font-size: small;
}

/* luci */

.hidden {
    display: none
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.inline {
    display: inline;
}

.cbi-page-actions {
    /*border-top: 1px solid #eee;*/
    /*padding-top: 1rem;*/
    text-align: right;
}

/* input */
.cbi-value input[type="password"],
.cbi-value input[type="text"] {
    min-width: 15rem;
}

/* select */
.cbi-value-field .cbi-input-select {
    min-width: 15rem;
}

.ifacebadge {
    display: inline-flex;
    /*border-bottom: 1px solid #CCCCCC;*/
    padding: 0.5rem 1rem;
    /*-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);*/
}

td > .ifacebadge {
    background-color: #F0F0F0;
    font-size: 0.9rem;
}

.ifacebadge > img {
    float: right;
    margin: 0 0.3rem;
}

/*textarea*/

.cbi-input-textarea {
    width: 100%;
    min-height: 14rem;
    padding: 0.8rem;
    font-size: 1.4rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: black;
}

.syslog {
    width: 100%;
    min-height: 15rem;
    padding: 1rem;
    font-size: small;
    color: #5F5F5F;
    border-radius: 0;
    background-color: #FFF;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
    border: none;
}

/* change */

.uci-change-list {
    font-family: monospace;
}

.uci-change-list ins,
.uci-change-legend-label ins {
    text-decoration: none;
    border: 1px solid #00FF00;
    background-color: #CCFFCC;
    display: block;
    padding: 2px;
}

.uci-change-list del,
.uci-change-legend-label del {
    text-decoration: none;
    border: 1px solid #FF0000;
    background-color: #FFCCCC;
    display: block;
    font-style: normal;
    padding: 2px;
}

.uci-change-list var,
.uci-change-legend-label var {
    text-decoration: none;
    border: 1px solid #CCCCCC;
    background-color: #EEEEEE;
    display: block;
    font-style: normal;
    padding: 2px;
}

.uci-change-list var ins,
.uci-change-list var del {
    border: none;
    white-space: pre;
    font-style: normal;
    padding: 0px;
}

.uci-change-legend {
    padding: 5px;
}

.uci-change-legend-label {
    width: 150px;
    float: left;
}

.uci-change-legend-label > ins,
.uci-change-legend-label > del,
.uci-change-legend-label > var {
    float: left;
    margin-right: 4px;
    width: 10px;
    height: 10px;
    display: block;
}

.uci-change-legend-label var ins,
.uci-change-legend-label var del {
    line-height: 6px;
    border: none;
}

.uci-change-list var,
.uci-change-list del,
.uci-change-list ins {
    padding: 0.5rem;
}

/* other fix */
#iwsvg,
#iwsvg2,
#bwsvg {
    border: 1px solid #D4D4D4 !important;
    border-top: none !important;
}

.ifacebox {
    border: 1px solid #999;
    background-color: #f9f9f9;
}

.cbi-image-button {
    margin-left: 0.5rem;
}

.zonebadge {
    padding: 0.2rem 0.5rem;
    display: inline-block;
    cursor: pointer;
}

.zonebadge > .ifacebadge {
    padding: 0.2rem 1rem;
    margin: 0.3rem;
    border: 1px solid #6C6C6C;
}

.zonebadge > input[type="text"] {
    padding: 0.16rem 1rem;
    min-width: 10rem;
    margin-top: 0.3rem;
}

.cbi-value-field .cbi-input-checkbox,
.cbi-value-field .cbi-input-radio {
    margin-top: 0.5rem;
    height: 1rem;
}

.cbi-value-field > input + .cbi-value-description {
    padding: 0;
}

.cbi-value-field > ul > li {
    display: flex;
	min-height: 4rem;
	align-items: center;
}

.cbi-value-field > ul > li > label {
    /*margin-top: 0.5rem;*/
}

.cbi-value-field > ul > li .ifacebadge {
/* DISABLE
    background-color: #eee;
    margin-left: 0.4rem;
    margin-top: -0.5rem;*/
}

.cbi-section-table-row > .cbi-value-field .cbi-input-select {
    min-width: 7rem;
}

.node-system-admin .cbi-section-create,
.node-network-vlan .cbi-section-create{
	display: flex;
	flex-direction: row-reverse;
}
.node-system-admin .cbi-section-create{
	background: linear-gradient(90deg, #FAFAFA 23rem, #EDEDF3 23rem, #FFFFFF 23.2rem);

}

.node-network-vlan .cbi-value-field:last-child{
	text-align: right;
}

.cbi-section-node .cbi-section-table{
	/*background-color: #f9f9f9;*/
}

.cbi-section-node{
	overflow-x: auto;
}

.cbi-section-create > .cbi-button-add {
    margin: 1rem 2rem;
	
}

.cbi-section-remove {
    padding: 0.5rem;
}

div.cbi-value var, td.cbi-value-field var {
    font-style: italic;
    color: #0069D6;
}

small {
    font-size: 90%;
    white-space: normal;
    line-height: 1.42857143;
}

.cbi-button-up,
.cbi-button-down {
    display: flex;
    padding: 0 1rem !important;
    font-size: 1.5rem !important;
    margin: 0 !important;
    margin-bottom: 3px !important;
    height: 1.5rem;
}

.cbi-optionals {
    padding: 1rem 1rem 0 1rem;
    border-top: 1px solid #CCC;
}

#diag-rc-output > pre {
    background-color: #f5f5f5;
    display: block;
    padding: 8.5px;
    margin: 0 0 18px;
    line-height: 1.5rem;
    -moz-border-radius: 3px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 1.4rem;
    color: #404040;
}

input[name="ping"],
input[name="traceroute"],
input[name="nslookup"] {
    width: 80%;
}

header > .container > .pull-right > * {
    position: relative;
    top: 0.45rem;
    cursor: pointer;
}

#xhr_poll_status > .label.success {
    background-color: #14CE14;
}

.label {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffffff !important;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: #bfbfbf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: none;
    text-decoration: none;
}

.notice {
    background-color: #5BC0DE;
}

.showSide {
    display: none;
}

.darkMask {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.56);
    content: "";
    z-index: 99;
    display: none;
}

/* fix Main Login*/
.node-main-login > .main > .main-left {
    display: none;
}

.node-main-login > .main > .main-right {
    width: 100%;
}

.node-main-login > .main fieldset {
    padding: 0.5rem;
    margin-bottom: 1rem;
    display: inline;
    background: none;
    border: none;
    box-shadow: none;
    overflow: hidden;
}

.node-main-login > .main .cbi-value-title {
    width: 7rem;
}

.node-main-login > .main #maincontent {

    text-align: center;
}

.node-main-login > .main .container {
    display: inline-block;
    padding: 2rem 4rem;
    margin-top: 2rem !important;
    background-color: #FFF;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
    text-align: left;
}

.node-main-login > .main form > div:nth-last-child(1) {
    float: right;
}

.node-main-login > .main .cbi-value {
    display: block;
}

.node-main-login > .main .cbi-value > * {
    display: inline-block !important;
}

.node-main-login > .main .cbi-input-user,
.node-main-login > .main .cbi-input-password {
    min-width: 15rem;
}

.node-main-login footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}

/* fix status overview */

.node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) {
    white-space: normal;
}

/* fix status processes */

.node-status-processes > .main table tr td:nth-child(3) {
    white-space: normal;
}

.node-status-iptables > .main div > .cbi-map > form {
    margin: 2rem 2rem 0 0;
}

/* fix system reboot */

.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 {
    margin-bottom: 1rem;
    width: auto;
}

.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 {
    padding-top: 1rem;
}

/* fix System Software*/
.node-system-packages > .main table tr td:nth-child(1) {
    width: auto !important;
}

.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 {
    padding: 0.5rem 0.8rem;
}

.node-system-packages > .main .cbi-value > pre {
    background-color: #eee;
    padding: 0.5rem;
    overflow: auto;
}

.cbi-tabmenu + .cbi-section {
    margin-top: 0;
}

/* fix network firewall*/
.node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select {
    min-width: 4rem;
}

.node-status-iptables fieldset,
.node-system-packages fieldset,
.node-system-flashops fieldset {
    margin-top: 0;
}

.node-status-iptables .cbi-tabmenu,
.node-system-packages .cbi-tabmenu,
.node-system-flashops .cbi-tabmenu {
    border: none;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}

.node-system-flashops form.inline + form.inline {
    margin-left: 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;
}

/* language fix */
body.lang_pl.node-main-login .cbi-value-title {
    width: 12rem;
}

@media screen and (max-width: 1600px) {
    .main-left {
        width: calc(0% + 13rem);
    }

    .main-right {
        width: calc(100% - 13rem);
    }

    .cbi-button {
        padding: 0.7rem 2rem;
		margin-left: 2rem;
		margin-right: 2rem;
        font-size: 1.4rem;
    }

    header > .container > .pull-right > * {
        top: 0.35rem;
    }

    .label {
        padding: 0.2rem 0.6rem;
    }

    .cbi-value-title {
        width: 15rem;
        padding-right: 0.6rem;
    }

    fieldset {
        padding: 1rem;
    }

    .cbi-input-textarea {
        font-size: small;
    }

    .node-status-iptables > .main fieldset li > a {
        padding: 0.3rem 0.6rem;
    }
}


@media screen and (max-width: 992px) {
    .main-left {
        width: 0;
        position: fixed;
        z-index: 100;
    }

    .main-right {
        width: 100%;
    }

    .showSide {
        padding: 0.1rem;
        margin-right: 0.5rem;
        display: inline-block;
    }

    .showSide:before {
        content: "\e20e";
        font-size: 1.7rem;
    }

    .node-main-login .showSide {
        display: none !important;
    }

    .cbi-value-title {
        width: 9rem;
        padding-right: 1rem;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div * {
        width: 100% !important;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] {
        margin: 3rem 0 0 0 !important;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] {
        margin: 0 !important;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div select,
    .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] {
        margin: 1rem 0 0 0;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div {
        width: 100% !important;
    }

    #diag-rc-output > pre {
        font-size: 1rem;
    }

    .node-main-login > .main .cbi-value-title {
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
    body {
        font-size: 1rem;
    }

    fieldset {
        padding: 1rem;
        margin: 1rem 0 0 0;
    }

    .tabs {
        margin: 0 -1rem;
    }

    #maincontent > .container {
        margin: 0 1rem 1.5rem 1rem;
    }

    .main > .main-left > .nav > .slide > .menu {
        font-size: 1.3rem;
    }

    .main > .main-left > .nav > .slide > .slide-menu > li > a {
        font-size: 1.1rem;
    }

    .cbi-value-title {
        width: 100%;
        min-width: 0rem !important;
        display: block;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        text-align: left;
    }

    .cbi-value-field, .cbi-value-description {
        width: 100%;
    }

    .cbi-value > .cbi-value-field {
        display: inline-block;
    }

    .cbi-tabmenu > li, .tabs > li {
        padding: 0.6rem 0rem;
    }

    .cbi-tabmenu > li > a, .tabs > li > a {
        padding: 0.2rem 0.3rem;
        font-size: 0.9rem;
    }

    .cbi-page-actions > div > input {
        display: none;
    }

    .node-main-login > .main .container {
        padding: 0.5rem 1rem 2rem 1rem;
    }

    .node-main-login > .main .cbi-value {
        padding: 0;
    }

    .node-main-login > .main form > div:nth-last-child(1) {
        margin-top: 2rem;
    }

    .node-main-login > .main .cbi-value-title {
        width: 100% !important;
        font-size: 1.2rem;
    }

    .node-main-login > .main fieldset {
        margin: 0;
        padding: 0.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .tabs > li > a {
        font-size: 0.9rem;
    }

    select,
    input {
        font-size: 0.9rem;
    }

    .mobile-hide {
        display: none;
    }

    .panel-title {
        font-size: 1.4rem;
        padding-bottom: 1rem;
    }

    .node-system-packages > .main .cbi-value.cbi-value-last > div {
        width: 100% !important;
    }

    .node-system-packages > .main .cbi-value .cbi-value-field input {
        width: 100%;
    }

    .node-status-iptables > .main div > .cbi-map > form {
        position: static !important;
        margin: 0 0 2rem 0;
        padding: 2rem;
        border: 0;
        font-weight: normal;
        font-style: normal;
        line-height: 1;
        font-family: inherit;
        min-width: inherit;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 0;
        background-color: #FFF;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
        -webkit-overflow-scrolling: touch;
    }

    .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"] {
        margin-top: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .main > .main-left > .nav > .slide > .slide-menu > li > a {
        font-size: 1.4rem;
    }
}
	
@media screen and (min-width: 992px) {
    .cbi-value input[type="password"],
    .cbi-value input[type="text"] {
        min-width: 20rem;
    }

    .cbi-value-field .cbi-input-select {
        min-width: 20rem;
    }
}

@media screen and (min-width: 1280px) {
    .cbi-value input[type="password"],
    .cbi-value input[type="text"] {
        min-width: 22rem;
    }

    .cbi-value-field .cbi-input-select {
        min-width: 22rem;
    }
}

@media screen and (min-width: 1600px) {
    .cbi-value input[type="password"],
    .cbi-value input[type="text"] {
        min-width: 25rem;
    }

    .cbi-value-field .cbi-input-select {
        min-width: 25rem;
    }
}


@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

html, body {
    margin: 0px;
    padding: 0px;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6rem;
	letter-spacing: 0em;
	text-align: left;
}

.main-left {
    background-color: #E5E5E5;
}

.main-right {
    background-color: #E5E5E5;
}

.main-right > #maincontent {
    background-color: #E5E5E5;
}

.error, .error input{
    color: #DF4661;
}

.node-main-login select,
.node-main-login input {
    background-color: #FFF;
    color: #333333;
    border: none;
    outline: 0;
    padding: 1rem;
    box-shadow: none;
    border-radius: 2px;
    background-image: none;
    height: 3em;
    font-size: 1.4rem;
    border: solid 1px #e5e5e5;
}

.node-main-login .cbi-input-invalid {
    box-shadow: 0 0 5px rgb(223 70 97);
    border: 1px solid rgb(223 70 97);
}

::placeholder{
    color: #333333;
}

h2 {
    font-size: 2.4rem;
    padding: 0.7rem 0;
}

/* desc */
.node-main-login .cbi-section-descr,
.node-main-login .cbi-map-descr {
    padding: 1.4rem 0;
    color: #999;
    font-size: 1.4rem;
}


.form fieldset{
	margin: 0;
}

.form .cbi-value{
    margin: 2rem 0;
	padding: 0;
}

.node-main-login > .main .cbi-input-user,
.node-main-login > .main .cbi-input-password {
    min-width: 35rem;
}

.node-main-login > .main fieldset {
    padding: 0;
    margin-bottom: 0;
}

.node-main-login > .main fieldset {
    padding: 0;
}

.node-main-login > .main .container {
    padding: 2rem;
    background-color: #F3F4F5;
}

.node-main-login .cbi-button,
header .cbi-button{
	text-transform: none;
}

.node-main-login .cbi-button-back,
.node-main-login .cbi-button-apply{
	float: right;
	padding: 0.5rem;
	margin: 0;
	font-size: 1.2rem;
	line-height: 1rem;
	min-width: 10rem;
}

.cbi-button-back:hover,
.cbi-button-back:focus,
.cbi-button-back{
	color: #fff;
	background-color: #6D28AA;
}

.node-main-login > .main fieldset {
	display: block;
}

.js-forgot {
	color: #999;
	text-decoration: underline;
	font-size: 1rem;
}
.js-forgot:hover {
	cursor: pointer;
	color: #6D28AA;
	text-decoration: none;
}


.forgot .text{
	padding-top: 2rem;
	font-size: 1.4rem;
	color: #999999;
	line-height: 1.2;
}

html{
	font-size: 10px;
}

body{
	background-color: #E5E5E5;
	font-size:1.6rem;
}
.forgot .text p{
		min-height: 4rem;
}
.logo{
	text-align: center;
	padding: 40px 0;
}
.logo img {
	width: 200px;
	height: 65px;
	margin: 60px 0;
}

.node-main-login .cbi-button-apply{
	background-color: #00B27A !important;
}

.node-main-login > .main .form .cbi-value label{
	display: none !important;
}

.node-main-login .cbi-button-reset{
	display: none;
}
.node-main-login .cbi-map-descr .text.error{
	display: none;
}
.node-main-login header{
	display: none;
}

@media screen and (max-width: 600px) {
	
	.node-main-login .actions{
		width:100%;
	}
	.node-main-login input[type="submit"],
	.node-main-login input[type="button"]{
		min-width: 50%;
	}
	
	.cbi-value-field{
		min-width: 100%;
	}

	.form input[type="text"],
	.form input[type="password"]{
		width: 100%;
	}
	.cbi-button-back,
	.form input{
		padding: 0 2rem;
		height: 4rem;
		font-size: 1.4rem;
		min-width: 50%;
	}
	.node-main-login > .main .container {
		background-color: #F3F4F5;
		box-shadow: none;
		width: 100%;
	}
	
	.main-right > #maincontent,
	.main-right,
	body{
		background-color: #F3F4F5;
	}
	
	.node-main-login #maincontent > .container {
		margin: 0;
	}
	
	
	header{
		/*display:none;*/
	}
	.js-forgot{
		line-height: 4rem;
	}

	.node-main-login input.cbi-button-back{
		color: #fff;
		background-color: #6D28AA;
	}
	
}

@media screen and (min-width: 600px) {
	.forgot{
		max-width: 385px;
		border-left: solid 1px #EFEFEF;
		padding-left: 1.1rem;
		margin-left: 1rem;
	}
	.form{
		max-width: 375px;
		border-left: solid 1px #EFEFEF;
		padding-left: 2rem;
		margin-left: 2rem;
	}

	.form input[type="text"],
	.form input[type="password"]{
		padding: 0 2rem;
		height: 4rem;
		min-width: 400px;
	}
	.flex{
		display: flex;
	}
	.logo{
		width: 200px;
		display: inline-flex;
	}
	.forgot h2{
		max-width: 320px;
	}
	.node-main-login input.cbi-button-back, 
	.cbi-button-back{
		color: #fff;
		background-color: #6D28AA;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.forgot{
		position: relative;
	}

}

/* fix progress bar */
.progressbar > div{
	display: inline-block;
}
.progressbar{
    display: flex;
    align-items: center;
}

.progressbar > div.value{
	width: 60% !important;
	overflow: hidden;
	font-size: 1.2rem;
    padding-left: 1em;
}

/* fix progress bar */
.progressbar > div.percent {
    width: 15% !important;
	color: #00B27A;
}

.progressbar > div.progress {
    width: 25% !important;
    height: 10px !important;
	border-radius: 2px;
}

div.progress > div{
	background-color: #00B27A !important;
	height: 8px !important;
}


#flashused > div small,
#ramused > div small,
#cpuload > div small,
#swaptotal > div small,
#swapfree > div small,
#memfree > div small,
#membuff > div small,
#conns > div small,
#memtotal > div small{
	display: none !important;
}


header > .container {
    margin-top: 0;
    padding: 0;
}

body{
	background-color: #F3F4F5;
	font-size:1.4rem;
}
header{
	height: 6rem;
	background-color: #F3F4F5;
	box-shadow: none;
}

a.brand img{
	width: 92px;
	height: 30px;
	margin: 15px;
}
a.brand{
    width: 24%;
    width: calc(0% + 24rem);
	display: inline-block;
    text-align: center;
}
.main {
    top: 6rem;
    bottom: 0rem;
    position: relative;
    height: 100%;
    height: calc(100% - 6rem);
}

.main-left{
    float: left;
    top: 6rem;
    width: 20%;
    width: calc(0% + 23rem);
    height: 100%;
    height: calc(100% - 6rem);
    background-color: #F3F4F5;
    overflow-x: auto;
    position: fixed;
}

.main-right {
    width: 78%;
    width: calc(100% - 22rem);
    float: right;
    height: 100%;
    background-color: #F3F4F5;
}
.main-right > #maincontent {
    background-color: #F3F4F5;
}
.label {
    padding: 0.35rem 2rem;
    font-size: 1.4rem;
    font-weight: normal;
    font-style: regular;
    color: #ffffff !important;
    text-transform: none;
    white-space: nowrap;
    background-color: #bfbfbf;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
    text-shadow: none;
    text-decoration: none;
	cursor: pointer;
}

#xhr_poll_status .label{
	border-radius: 2px;
}

.label.logout{
	background-color: #DF4661;
	border-radius: 2px;
}

.label.apply{
	background-color: #00B27A;
}

#xhr_poll_status > .label#xhr_poll_status_on{
	background-color: #6D28AA;
}

.pull{
	float: right;
	font-size: 1.2rem;
	line-height: 1rem;
	top: 2rem;
	position: relative;
}

.pull .item{
	padding: 0.5rem 0;
	background: #fff;
	border-radius: 2px;
	margin: 0 2rem 0 0;
	display: inline-block;
}

.pull .info{
	color: #333;
	width: 133px;
}

.pull .info {
	margin-left: 1rem;
}

.pull .label{
	cursor: pointer;
}

.main > .main-left > .nav {
    margin: 0 1rem 0 2rem;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%), 0 0 1px 0 rgb(0 0 0 / 10%)
}

.main > .main-left > .nav > .slide > .slide-menu > .active {
    background-color: #6D28AA;
}
.main > .main-left > .nav > .slide > .slide-menu > .active:hover {
    background: #6D28AA;
}

.main > .main-left > .nav > .slide > .menu {
    display: block;
    padding: 1.4rem 2rem;
    text-decoration: none;
    cursor: default;
    font-size: 1.4rem;
	background-color: #fff;
	border-bottom: solid 1px #EFEFEF;
}
.main > .main-left > .nav li a{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.main > .main-left > .nav > .slide > .slide-menu > li {
	background-color: #FAFAFA;
	border-bottom: solid 1px #EFEFEF;
    padding: 1.4rem 2rem;
}

.main > .main-left > .nav > li:nth-last-child(1) {
	background-color: #fff;
	border-bottom: solid 1px #EFEFEF;
    padding: 1.4rem 2rem;
}

.main > .main-left > .nav > li:nth-last-child(1) {
    margin-top: 0;
    font-size: 1.4rem;
	
}
.main > .main-left > .nav > li a{
	text-decoration: none;
}

.triangle{
	width: 0;
	height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #999;
    float: right;
}
.active .triangle{
	border-top: none;
    border-bottom: 8px solid #6D28AA;
}
.container > h2 {
	/*display:none;*/
}
fieldset {
    margin: 0;
	box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%), 0 0 1px 0 rgb(0 0 0 / 10%);
}
@media screen and (min-width: 992px) {
	.pull .item .info{
		display: inline-block;
		min-width: 14rem;
	}
	.logout2
	{
		float: right;
		font-size: 1rem;
		line-height: 1rem;
		top: 2rem;
		position: relative;
	}
}
@media screen and (max-width: 700px) {
	.pull.changes{
		float: none;
		position: fixed;
		top: 6rem;
		background: #F3F4F5;
		width: 100%;
		padding-left: 2rem;
		padding-bottom: 2rem;	
		padding-top: 2rem;	
	}
	

	.pull.changes .item{
		padding: 0;
	}
	
	
	.pull.changes .label{
		font-size: 1.4rem;
		padding: 1.5rem 2rem;
		display: inline-block;
		min-width: 160px;
		text-align: center;
	}
	.main.changes{
		top: 14rem;
	}
	.pull.changes{
		z-index: 98;
	}
	.pull.changes .item{
		width: 44%;
		width: calc(50% - 2rem);
		background: none;
		float: right;
	}
	.pull.changes .label{
		width: 100%;
		border-radius: 2px;
	}
	
}

@media screen and (max-width: 600px) {
}

@media screen and (max-width: 992px) {
	a.brand {
		display:none;
	}
	.mobile-hide {		
        display: none;
    }

    .main-left {
        width: 0;
        position: fixed;
        z-index: 101;
		margin: 0;
    }

    .main-right {
        width: 100%;
    }

    .showSide {
        padding: 2rem;
        margin-right: 0.5rem;
        display: inline-block;
		color: #000;
    }

    .showSide:before {
        content: "\e20e";
        font-size: 2rem;
    }

    .node-main-login .showSide {
        display: none !important;
    }

    .cbi-value-title {
        width: 9rem;
        padding-right: 1rem;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div * {
        width: 100% !important;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] {
        margin: 3rem 0 0 0 !important;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] {
        margin: 0 !important;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div select,
    .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] {
        margin: 1rem 0 0 0;
    }

    .node-network-diagnostics > .main .cbi-map fieldset > div {
        width: 100% !important;
    }

    #diag-rc-output > pre {
        font-size: 1rem;
    }

    .node-main-login > .main .cbi-value-title {
        text-align: left;
    }
}

	
.cbi-input-radio,
.cbi-input-checkbox{
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  margin-left: 19px;

}
.cbi-value-field .cbi-input-checkbox{
    margin: 0 0 1rem 2rem;
  
}

/*input[name="cbid.system.ntp.server"]+img */
.cbi-image-button.remove
{
	content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23DF4661'/%3E%3Crect x='5' y='9' width='10' height='2' rx='1' fill='white'/%3E%3C/svg%3E%0A");
}

.cbi-image-button.add
{
	content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%236D28AA'/%3E%3Crect x='5' y='9' width='10' height='2' rx='1' fill='white'/%3E%3Crect x='11' y='5' width='10' height='2' rx='1' transform='rotate(90 11 5)' fill='white'/%3E%3C/svg%3E%0A");
}

.cbi-value .cbi-value-field .cbi-input-text.dynlist{
	width: calc(100% - 30px);
	margin: 0.2em 0;
}

/*input[name="cbid.system.ntp.server"]+img,*/
.cbi-image-button.remove{
  display: inline-block;  
  width: 20px;
  height: 20px;
}
.cbi-input-radio::before,
.cbi-input-checkbox::before{
  display: inline-block;  
  background: white;
  width: 20px;
  height: 20px;
  left: -19px;
  position: relative;
}
.cbi-input-radio::before{
	top: -10px;
}
.cbi-input-checkbox::before {
  content: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cmask id="path-1-inside-1" fill="white"%3E%3Cpath d="M0 2C0 0.895431 0.895431 0 2 0H18C19.1046 0 20 0.895431 20 2V18C20 19.1046 19.1046 20 18 20H2C0.895431 20 0 19.1046 0 18V2Z"/%3E%3C/mask%3E%3Cpath d="M2 1.5H18V-1.5H2V1.5ZM18.5 2V18H21.5V2H18.5ZM18 18.5H2V21.5H18V18.5ZM1.5 18V2H-1.5V18H1.5ZM2 18.5C1.72386 18.5 1.5 18.2761 1.5 18H-1.5C-1.5 19.933 0.0670043 21.5 2 21.5V18.5ZM18.5 18C18.5 18.2761 18.2761 18.5 18 18.5V21.5C19.933 21.5 21.5 19.933 21.5 18H18.5ZM18 1.5C18.2761 1.5 18.5 1.72386 18.5 2H21.5C21.5 0.067003 19.933 -1.5 18 -1.5V1.5ZM2 -1.5C0.067003 -1.5 -1.5 0.0670043 -1.5 2H1.5C1.5 1.72386 1.72386 1.5 2 1.5V-1.5Z" fill="%23EDEDF3" /%3E%3C/svg%3E%0A');
}

.cbi-input-checkbox:checked::before {
  content: url('data:image/svg+xml;utf8, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.895431 0 2V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V2C20 0.895431 19.1046 0 18 0H2ZM9.6319 14.5735C9.44785 14.8657 9.20245 15 8.91871 15C8.63497 15 8.40491 14.8815 8.16718 14.5814L5.20706 10.8847C5.07669 10.7188 5 10.5055 5 10.3081C5 9.88942 5.31442 9.58136 5.69018 9.58136C5.93558 9.58136 6.14264 9.67615 6.34202 9.93681L8.88037 13.2148L13.6503 5.40284C13.819 5.13428 14.0414 5 14.2638 5C14.6396 5 15 5.26066 15 5.67931C15 5.86888 14.9003 6.08215 14.7853 6.25592L9.6319 14.5735Z" fill="%236D28AA"/></svg>');
}

.cbi-input-radio:checked::before{
	content: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="20" height="20" rx="10" fill="%236D28AA"/%3E%3Crect x="5" y="5" width="10" height="10" rx="5" fill="white"/%3E %3C/svg%3E%0A');
}
.cbi-input-radio::before{
	content: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="0.75" y="0.75" width="18.5" height="18.5" rx="9.25" stroke="%23EDEDF3" stroke-width="1.5"/%3E%3C/svg%3E%0A');
}



.cbi-value-field > div{
	width: 100%;
}

.cbi-value-description {
	display: inline-block;
}
.cbi-input-checkbox+.cbi-value-description{
	width: calc(100% - 2.1rem ); /* 2rem checkbox + 0.1rem hidden checkbox */
}

.main{
	/*max-width: 1600px;*/
}

.cbi-value{
	display: flex;
	padding: 0;
}

.cbi-value-title{
	flex: 0 0 23rem;
	padding: 1rem;
	line-height: 2rem;
	margin: 1rem 0;
}

div.cbi-value-field{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 1rem 2rem;
	align-items: center;
}

.cbi-value-field > * {

}

.cbi-value-field + input[type=text]{
	flex-wrap: wrap;
}

.cbi-value-helpicon{
	display: none;
}
.cbi-value-field > input + .cbi-value-description {
	padding: 1rem 2rem;
    line-height: 2rem;
}
	
	
.cbi-value{
	background: linear-gradient(90deg, #FAFAFA 23rem, #EDEDF3 23rem, #FFFFFF 23.2rem);
}

.cbi-value .cbi-value-field select,
.cbi-value .cbi-value-field .cbi-input-text{
	width: 100%;
}

.cbi-input-text{
	border: solid 1px #EDEDF3;
	border-radius: 2px;
	padding: 2rem;
	height: 4rem;
    font-size: 1.4rem;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.49967V12H2.50034L9.87802 4.62233L7.37767 2.122L0 9.49967Z' fill='%23D7D7D7'/%3E%3Cpath d='M11.805 1.75189L10.2481 0.195026C9.98804 -0.0650086 9.56464 -0.0650086 9.3046 0.195026L8.08443 1.41519L10.5848 3.91552L11.8049 2.69536C12.065 2.43532 12.065 2.01192 11.805 1.75189Z' fill='%23D7D7D7'/%3E%3C/svg%3E%0A");
	background-position: calc(100% - 1rem) 50%;
    background-repeat: no-repeat;
}

.cbi-input-file{
	border: solid 1px #EDEDF3;
	border-radius: 2px;
	padding: 1rem;
	height: 4rem;
    font-size: 1.4rem;
    text-align: center;
    margin-right: 2rem;
}

select{
	border: solid 1px #EDEDF3;
	border-radius: 2px;
	padding: 0 3rem 0 2rem;
	height: 4rem;
    font-size: 1.4rem;
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.29286 8.70743C7.68339 9.09796 8.31655 9.09796 8.70708 8.70743L15.071 2.34347C15.4616 1.95295 15.4616 1.31978 15.071 0.929258C14.6805 0.538733 14.0473 0.538733 13.6568 0.929258L7.99997 6.58611L2.34312 0.929258C1.95259 0.538734 1.31943 0.538734 0.928901 0.929258C0.538377 1.31978 0.538377 1.95295 0.928901 2.34347L7.29286 8.70743ZM6.99997 7.66699L6.99997 8.00033L8.99997 8.00033L8.99997 7.66699L6.99997 7.66699Z' fill='%236D28AA'/%3E%3C/svg%3E%0A");
	background-position: calc(100% - 1rem) 50%;
    background-repeat: no-repeat;
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}



.cbi-input-password{
	border: solid 1px #EDEDF3;
	border-radius: 2px;
	padding: 2rem 4rem 2rem 2rem;
	height: 4rem;
    font-size: 1.4rem;
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.8729 19.6338C29.6942 19.4037 25.4371 14 19.9999 14C14.5627 14 10.3054 19.4037 10.1269 19.6336C9.9577 19.8519 9.9577 20.1479 10.1269 20.3662C10.3054 20.5963 14.5627 26 19.9999 26C25.4371 26 29.6942 20.5963 29.8729 20.3664C30.0424 20.1481 30.0424 19.8519 29.8729 19.6338ZM19.9999 24.7586C15.9949 24.7586 12.5261 21.1721 11.4992 19.9996C12.5247 18.826 15.9863 15.2414 19.9999 15.2414C24.0048 15.2414 27.4733 18.8273 28.5006 20.0004C27.4751 21.1739 24.0136 24.7586 19.9999 24.7586Z' fill='%23D7D7D7'/%3E%3Cpath d='M19.9999 16.2759C17.8186 16.2759 16.0438 17.9466 16.0438 20C16.0438 22.0535 17.8186 23.7242 19.9999 23.7242C22.1812 23.7242 23.956 22.0535 23.956 20C23.956 17.9466 22.1812 16.2759 19.9999 16.2759ZM19.9999 22.4828C18.5456 22.4828 17.3626 21.369 17.3626 20C17.3626 18.631 18.5457 17.5173 19.9999 17.5173C21.4542 17.5173 22.6373 18.631 22.6373 20C22.6373 21.369 21.4542 22.4828 19.9999 22.4828Z' fill='%23D7D7D7'/%3E%3C/svg%3E%0A");;
	background-position: 100% 50%;
    background-repeat: no-repeat;
}
.cbi-input-password + img{
	position: relative;
	opacity: 0;
	left: -3rem;
	width: 3rem;
	height: 4rem;
}

.cbi-input-invalid{
	box-shadow: 0 0 5px rgb(223 70 97);
	border: 1px solid rgb(223 70 97);
}

.cbi-value-field div{
	align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.cbi-tabmenu{
	padding: 0 2rem;
	display: flex;
	font-size: 1.5rem;
	text-transform: uppercase;
    font-weight: 700;
	font-family: Roboto;
background-color: #FFFFFF;
border-bottom: solid 1px #EDEDF3;

font-family: Roboto;
font-style: medium;

font-size: 12px;
line-height: 18px;
flex-wrap: wrap;

}

.cbi-tab{

	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg width='160' height='3' viewBox='0 0 160 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.5C0 1.11929 1.11929 0 2.5 0H157.5C158.881 0 160 1.11929 160 2.5V3H0V2.5Z' fill='%236D28AA'/%3E%3C/svg%3E");
	background-position: 50% 100%;
}
.cbi-tab::after{
  display: inline-block;  
  background: white;
  width: 20px;
  height: 20px;
  left: -19px;
  position: relative;
	
}

.cbi-tabmenu > li{
  display: flex;
  justify-content: center;
  align-items: center;
	text-align: center;
	padding: 0;
	min-width: 160px;
	height: 6rem;
} 

.cbi-tabmenu > li > a{
	color: #6D28AA;
	display: flex;
    align-items: center;
}

.cbi-map{
/*	border-left: solid 1px #EDEDF3;
	border-right: solid 1px #EDEDF3;*/

	/*background: #FFFFFF;*/
	margin: 0rem 0rem 2rem 0rem;
	position: relative;
}

body:not(.node-main-login) .cbi-map h2{
	border-top: solid 1px #EDEDF3;
	border-left: solid 1px #EDEDF3;
	border-right: solid 1px #EDEDF3;
	border-bottom: none;
	padding: 20px 20px 10px;
    /*margin: 10px 0;*/
	position: relative;
	color: #6D28AA;
	background: #FFFFFF;
}

.cbi-map h2.no::after{
	content: '?';
    background: #6D28AA;
    position: absolute;
    right: 0;
	top: 10px;
    /* padding: 10px; */
    margin: 20px;
    width: 20px;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
	line-height:20px;
	font-weight: bold;
    color: #FFFFFF;	
}

body:not(.node-main-login) .cbi-map h2+.cbi-map-descr{
	padding: 0 20px 20px;
	background: #FFFFFF;
	border-top: none;
	border-left: solid 1px #EDEDF3;
	border-right: solid 1px #EDEDF3;
	border-bottom: solid 1px #EDEDF3;
}
body:not(.node-main-login) .cbi-map h2+.cbi-map-descr:empty {
	padding: 0 20px 10px;
}

.cbi-map h2:hover+.cbi-map-descr{
/*	display: block;
	position: absolute;
	right: 40px;
	top: 20px;*/
}

.panel-title{
	/*border-top: solid 1px #EDEDF3;*/
	background: #FFFFFF;
	padding: 20px;
}
fieldset{
	padding: 0;
	border: solid 1px #EDEDF3;
}

.cbi-section{
	margin: 20px 0 0;
}

.col .cbi-section:last-child{	
	/*margin-bottom: 0;*/
}

.status_overview {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 20px;
}

.status_overview fieldset{
	
}

.status_overview fieldset{
	
}

.status_overview .col.w6{
	width: calc(50% - 10px);
	margin: 0 10px 0 0;
}

.status_overview .col.w6_2{
	width: calc(50% - 10px);
	margin: 0 0 0 10px;
}

.status_overview .col.w6_2 fieldset:first-of-type {
    margin: 0 0 20px 0;
}

.status_overview .col.w12{
	clear: both;
	width: 100%;
}

@media screen and (max-width: 700px) {
	.status_overview .col.w6{
		width: 100%;
		margin: 0 0 0 0;
	}

	.status_overview .col.w6_2{
		width: 100%;
		margin: 0 0 0 0;
	}

	.status_overview .col.w6_2 fieldset:first-of-type {
	}
}

.node-wifi-main .vif_enable{
	
}


.node-wifi-main .cbi-button.cbi-button-reset::before{
	content: "[";
    display: block;
    width: 10px;
    height: 10px;
}
.node-wifi-main .cbi-button.cbi-button-reset::after{
	content: "]";
    display: block;
    width: 10px;
    height: 10px;
}

.switch {
  position: relative;
  display: inline-block;
}


.switch-label {
  display: block;
  width: 40px;
  height: 20px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  user-select: none;
}
.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}
.switch-label::before {
  top: 5px;
  width: 100%;
  height: 100%;
  background-color: #6B6C75;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
.switch-label::after {
  top: 7px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.switch-label.on::before {
  background-color: #6D28AA;
}
.switch-label.on::after {
  right: 2px;
  left: unset;
}

.node-main-login .cbi-value-field{
	padding: 0;
}

.node-main-login .cbi-map h2::after{
	content: "";
}

#content_syslog,
#content_dmesg{
	/* fix*/
	width: 100%;
}
#content_syslog textarea,
#content_dmesg textarea{
	
	width: 100%;
	padding: 2rem;
}

textarea#dmesg{
	border:none;
}	

a.cbi-button{
	margin: 1rem 0;
}

p{
	padding: 1rem 0;
}

.cbi-rowstyle-2{
	background-color: transparent;
}

.node-wifi-main select,
.node-wifi-main .cbi-input-text{
	width: 50%;
	/*margin-right: 2rem;*/
}


.port{
	margin: auto;
	position: relative;
	width: 22px;
	height:19px;
	text-align: center;
	font-size: 0.9rem;
	background: url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.2 1H19.8C20.4478 1 21 1.538 21 2.23529V12.2941C21 12.9914 20.4478 13.5294 19.8 13.5294H17.5C16.3954 13.5294 15.5 14.4248 15.5 15.5294V16.7647C15.5 17.462 14.9478 18 14.3 18H7.7C7.0522 18 6.5 17.462 6.5 16.7647V15.5294C6.5 14.4248 5.60457 13.5294 4.5 13.5294H2.2C1.5522 13.5294 1 12.9914 1 12.2941V2.23529C1 1.538 1.5522 1 2.2 1Z' stroke='%236B6C75' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.port.on{
	background: url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.2 1H19.8C20.4478 1 21 1.538 21 2.23529V12.2941C21 12.9914 20.4478 13.5294 19.8 13.5294H17.5C16.3954 13.5294 15.5 14.4248 15.5 15.5294V16.7647C15.5 17.462 14.9478 18 14.3 18H7.7C7.0522 18 6.5 17.462 6.5 16.7647V15.5294C6.5 14.4248 5.60457 13.5294 4.5 13.5294H2.2C1.5522 13.5294 1 12.9914 1 12.2941V2.23529C1 1.538 1.5522 1 2.2 1Z' stroke='%236D28AA' stroke-width='2'/%3E%3C/svg%3E%0A");
}

#port_status_table td,
#port_status_table th{
	text-align: center;
	padding: 1.2rem 2rem;
	background: transparent;
}

#port_status_table tr:not(:last-child) td{
	border-top: solid 1px #D7D7D7;
	border-bottom: solid 1px #D7D7D7;
}

#port_status_table .panel-title{
	border-bottom: solid 1px #D7D7D7;
}


.network_status_table .s div strong{
	display: inline-block;
	width: 33%;
	font-size: 1.4rem;
	padding: 1rem 0;
}

/* hide other data */
.network_status_table .i,
.network_status_table .connections
{
	display: none;
}

.network_status_table .s{
	padding: 0 !important;
}

.network_status_table > tbody > tr > td {
	
/*	display: block;*/
}

.network_status_table_up > tbody > tr{
    height: 4rem;
}
.network_status_table_up tr:first-child {
	border-top: solid 1px #D7D7D7;
}
* .network_status_table_up:first-child tr:first-child {
	border-top: none;
}

.status_overview .panel-title {
	border-bottom: 1px solid #D7D7D7;
}

.status_overview td:nth-of-type(1) {
	/*background-color: transparent;*/
	height: 4rem;
}

.inbound td:first-child{
	color: #6D28AA;
}

.outbound td:first-child{
	color: #00B27A;
}

.network_activity {
	font-size: 1rem;
}
.network_activity b{
	font-size: 1.4rem;
}

.network_activity .inbound{
	background: #FBF6FF;
}
.network_activity .outbound{
	background: #F0FFFA;
}


.network_activity td{
	border-top: solid 1px #D7D7D7;
	height: 6rem;
    font-size: 1.2rem;
}
.network_activity td:nth-of-type(1) {
    background-color: transparent;
}

.network_activity .img{
	width: 340px;
	height: 141px;
  margin: 2rem auto;
}

.hw-info{
	font-size: 1.2rem;
	color: #333333;
}

.status_overview .hw-info table td{ 
	padding: 0.5rem 2rem;
	height: 3rem;
}
.hw-info a{
	text-decoration: none;
	color: #6D28AA;
}

.hw-info td:first-child {
	font-weight: bold;
	background-color: #FAFAFA;
	text-align: right;
	width: 25%;
	color: #6B6C75;
}

.cbi-section.memory  tr:last-child{
	border-top: solid 1px #D7D7D7;
}

fieldset + br,
fieldset > br{
	display: none;
}

.actions{
	position: relative;
	line-height: 4rem;
}
.action.enable{
	position: absolute;
    right: 2rem;
    top: 1rem;
}

.cbi-value-field .cbi-button{
	margin: 0;	
}


.load_info{
	display: flex;
    flex-wrap: wrap;
}

.load_info h2{
	border: solid 1px  #D7D7D7;
	padding: 20px;
	width: 100%;
	text-transform: uppercase;
}

.load_info ul{
	width: 100%;
	display: block;
	border: solid 1px  #D7D7D7;
	border-top: none;
}

.load_info li span{
	margin: 0.5rem;
}
.load_info > ul > li{
	display: inline-block;
	line-height: 4rem;
	padding: 0 2rem;
}

.col3 li{
	width: 33%;
}

.cbi-section-table tr th,
.cbi-section-table tr th.cbi-section-table-cell,
.cbi-section-table tr td{
	background: transparent;
}	

.node-status-overview .cbi-section-table tr th{
	background: #FAFAFA;
}

.cbi-section-table tr:not(:last-child) th,
.cbi-section-table tr:not(:last-child) th.cbi-section-table-cell,
.cbi-section-table tr:not(:last-child) td{
	border-bottom: solid 1px  #EDEDF3;
}



.node-status-routes .panel-title{
	font-size: 1.5rem;
    font-weight: 600;
}

.node-system-reboot #maincontent{
	height: 100%;
	position: relative;
}

.node-system-reboot2 #maincontent .container{
	text-align: center;
	height: 80%;
    display: flex;
    flex-direction: column;
	justify-content: center;
}
.node-system-reboot h2{
	margin: 2rem 0 0 0;
	padding-left: 2rem;
	position: absolute;
	left: 0;
	top: 0;
}

.node-system-reboot .cbi-button{
	line-height: 3rem;
}

.hint{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.hint .hintdata{
	display: none;
}

.hint:hover .hintdata{
	display: block;
	position: absolute;
	background: white;
	width:auto;
	top: 5rem;
	left: 0;
	border: solid 1px #EDEDF3;
	padding: 1rem;
	margin: 1rem;
	z-index: 99;
}

.hint::after{
	content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%236D28AA'/%3E%3Cpath d='M8.56738 12.0713C8.56738 11.251 8.66699 10.5977 8.86621 10.1113C9.06543 9.625 9.42871 9.14746 9.95605 8.67871C10.4893 8.2041 10.8438 7.82031 11.0195 7.52734C11.1953 7.22852 11.2832 6.91504 11.2832 6.58691C11.2832 5.59668 10.8262 5.10156 9.91211 5.10156C9.47852 5.10156 9.12988 5.23633 8.86621 5.50586C8.6084 5.76953 8.47363 6.13574 8.46191 6.60449H5.91309C5.9248 5.48535 6.28516 4.60938 6.99414 3.97656C7.70898 3.34375 8.68164 3.02734 9.91211 3.02734C11.1543 3.02734 12.1182 3.3291 12.8037 3.93262C13.4893 4.53027 13.832 5.37695 13.832 6.47266C13.832 6.9707 13.7207 7.44238 13.498 7.8877C13.2754 8.32715 12.8857 8.81641 12.3291 9.35547L11.6172 10.0322C11.1719 10.46 10.917 10.9609 10.8525 11.5352L10.8174 12.0713H8.56738ZM8.3125 14.7695C8.3125 14.377 8.44434 14.0547 8.70801 13.8027C8.97754 13.5449 9.32031 13.416 9.73633 13.416C10.1523 13.416 10.4922 13.5449 10.7559 13.8027C11.0254 14.0547 11.1602 14.377 11.1602 14.7695C11.1602 15.1562 11.0283 15.4756 10.7646 15.7275C10.5068 15.9795 10.1641 16.1055 9.73633 16.1055C9.30859 16.1055 8.96289 15.9795 8.69922 15.7275C8.44141 15.4756 8.3125 15.1562 8.3125 14.7695Z' fill='white'/%3E%3C/svg%3E%0A");
}

.cbi-value.title{
	font-weight: bold;
}

.cbi-input-text::placeholder{
	color: #EDEDF3;
}

input[type=checkbox] {
	-moz-appearance: initial;
}

.eth-off, .eth-10, .eth-100, .eth-1000 {
	background-repeat: no-repeat;
	background-position: center;
	width: 32px;
	height: 27px;
	display: inline-block;
}

.eth-off {
	background-image: url("data:image/svg+xml,%3Csvg width='30' height='25' viewBox='0 0 30 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 19V24H21V19H29V1H1V19H9ZM2 18H10V23H20V18H28V2H2V18Z' fill='%23DADADA'/%3E%3Cpath opacity='0.8' d='M4 4H26V16H4V4Z' fill='%23E7E7E7'/%3E%3C/svg%3E");
}

.eth-10 {
	background-image: url("data:image/svg+xml,%3Csvg width='30' height='25' viewBox='0 0 30 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 19V24H21V19H29V1H1V19H9ZM2 18H10V23H20V18H28V2H2V18Z' fill='%23424242'/%3E%3Cpath opacity='0.8' d='M4 4H26V16H4V4Z' fill='%23E9975D'/%3E%3C/svg%3E");
}

.eth-100 {
	background-image: url("data:image/svg+xml,%3Csvg width='30' height='25' viewBox='0 0 30 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 19V24H21V19H29V1H1V19H9ZM2 18H10V23H20V18H28V2H2V18Z' fill='%23424242'/%3E%3Cpath opacity='0.8' d='M4 4H26V16H4V4Z' fill='%2334C292'/%3E%3C/svg%3E");
}

.eth-1000 {
	background-image: url("data:image/svg+xml,%3Csvg width='30' height='25' viewBox='0 0 30 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 19V24H21V19H29V1H1V19H9ZM2 18H10V23H20V18H28V2H2V18Z' fill='%23424242'/%3E%3Crect opacity='0.8' x='4' y='4' width='22' height='12' fill='%23589FD2'/%3E%3C/svg%3E");
}