*,
body,
html {
    margin: 0;
    padding: 0
}

abbr,
footer>a,
header>.container>.brand {
    text-decoration: none
}

.main,
.panel-title,
header,
table {
    width: 100%
}

@font-face {
    font-family: icomoon;
    src: url(../fonts/icon.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: DIN;
    src: url(../fonts/DIN.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-F000
}

.cbi-button-down,
.cbi-button-up,
.cbi-value-helpicon,
.main>.loading>span,
.showSide {
    speak: none;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

* {
    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;
    color: inherit
}

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

body,
html {
    height: 100%;
    font-family: DIN, Helvetica, Arial, sans-serif
}

a,
a:active,
a:hover,
a:link,
a:visited {
    color: rgba(117, 137, 12, .75);
    text-decoration: none
}

input,
select {
    background-color: #1f1e1a;
    color: #fff;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0 3px #000;
    border: 1px solid #4f4e4a;
    outline: 0;
    padding: 0;
    box-shadow: inset 0 0 12px #000;
    border-radius: 0;
    background-image: none;
    height: 1.9rem;
    font-size: 1rem
}

input {
    padding-left: 4px
}

input[type=checkbox],
input[type=radio] {
    background: 0 0;
    box-shadow: none
}

input[type=file] {
    padding: 0 !important;
    height: inherit
}

input:focus,
select:not([multiple=multiple]):focus {
    border-color: rgba(117, 136, 12, .94)
}

select[multiple=multiple] {
    height: auto
}

code {
    color: #0f0e0a;
    text-shadow: none
}

abbr {
    color: rgba(117, 137, 12, .85);
    text-shadow: 0 0 2px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 1);
    cursor: help
}

hr {
    margin: 1rem 0;
    border-color: #1f1e1a;
    opacity: .1
}

header {
    height: 56px;
    background: url(../img/stripes.svg) #1f1e1a;
    color: #d8d3c5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .26), inset 0 0 42px 0 #000;
    transition: box-shadow .2s;
    float: left;
    position: fixed;
    z-index: 101
}

header>.container {
    padding: 0 1rem;
    height: 56px;
    line-height: 56px
}

header>.container>.brand {
    font-size: 1.5rem;
    color: #d8d3c5;
    cursor: default;
    vertical-align: text-bottom
}

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

.cbi-button,
.cbi-section-table-cell,
.cbi-section-table-row,
.main>.loading>span {
    text-align: center
}

.main-right,
.main>.main-left>.nav>li a {
    text-shadow: -1px 0 #1f1e1a, 0 1px #1f1e1a, 1px 0 #1f1e1a, 0 -1px #1f1e1a, 0 0 3px #1f1e1a
}

footer>a {
    color: #aaa
}

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

.main-left,
.main>.loading {
    height: 100%;
    position: fixed
}

.main>.loading {
    width: 100%;
    z-index: 1000;
    display: block;
    background-color: #4f4e4a;
    top: 0
}

.main>.loading>span {
    display: block;
    margin-top: 20%;
    color: #d8d3c5;
    font-size: 2rem
}

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

.main>.loading>span>.loading-img {
    animation: anim-rotate 2s infinite linear;
    margin-right: 1rem;
    display: inline-block;
    color: rgba(117, 137, 12, 1)
}

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

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.main-left {
    float: left;
    top: 56px;
    width: 15%;
    width: calc(0% + 15rem);
    height: calc(100% - 56px);
    color: #d8d3c5;
    background: #2f2e2a;
    background: linear-gradient(to bottom, #2f2e2a 0, #1f1e1a 100%);
    background: -webkit-linear-gradient(top, #2f2e2a 0, #1f1e1a 100%);
    overflow-x: auto
}

.main-right,
.pull-right {
    float: right
}

.main-right {
    width: 85%;
    width: calc(100% - 15rem);
    height: 100%;
    font-size: .85rem;
    background-color: #4f4e4a
}

.main-right>#maincontent {
    background-color: #4f4e4a;
    color: #fafafa
}

.pull-left {
    float: left
}

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

.alert-message,
.errorbox {
    margin: 2rem 0 0;
    padding: 2rem;
    border: 0;
    font-weight: 400;
    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)
}

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

.error {
    color: red
}

#maincontent>.container>div:nth-child(1).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: .5rem 1rem;
    font-size: .9rem;
    line-height: 1.42857143;
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    margin-top: 2rem;
    text-decoration: inherit
}

.main>.main-left>.nav>.slide>a.menu.active,
.main>.main-left>.nav>li {
    border-bottom: 1px solid #0f0e0a
}

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

.main>.main-left>.nav>.slide>.menu.active,
.main>.main-left>.nav>.slide>.slide-menu>.active>a,
h2>a,
h2>a:hover {
    color: #fafafa
}

.main>.main-left>.nav>li:nth-last-child(1) {
    background: rgba(175, 46, 17, .3);
    margin: 0
}

.main>.main-left>.nav>li:nth-last-child(1) a {
    text-decoration: none
}

.main>.main-left>.nav>li {
    background: url(../img/noise.png) #2f2e2a;
    padding: .5rem 1rem;
    cursor: pointer
}

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

h1,
h3 {
    padding-bottom: 10px
}

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

.main>.main-left>.nav>.slide>.menu {
    display: block;
    padding-left: 1rem;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 42px;
    height: 42px
}

.main>.main-left>.nav>.slide>.menu:hover {
    background: url(../img/noise.png) #4f4e4a
}

.main>.main-left>.nav>.slide>.menu.active:hover {
    background: 0 0
}

.main>.main-left>.nav>.slide>.slide-menu>.active {
    background: #4f4e4a !important;
    border-top: 1px solid #63615e !important
}

.main>.main-left>.nav>.slide>.slide-menu.active>li {
    padding-left: 2rem;
    border-top: 1px solid #4c4b48;
    border-bottom: 1px solid #0f0e0a;
    background: url(../img/noise.png) #3f3e3a
}

.main>.main-left>.nav>.slide>.slide-menu.active>li:nth-last-child(1) {
    border-bottom: none
}

.main>.main-left>.nav>.slide>.slide-menu.active>li:hover {
    background: rgba(117, 137, 12, .45) !important;
    border-top: 1px solid rgba(129, 140, 72, .45)
}

.main>.main-left>.nav>.slide>.slide-menu>li>a {
    text-decoration: none;
    white-space: nowrap;
    font-size: .95rem;
    line-height: 41px
}

.main>.main-left>.nav>.slide>.slide-menu>li:hover {
    background: url(../img/noise.png) #3f3e3a
}

.main>.main-left>.nav>.slide>.slide-menu>.active:hover {
    cursor: hand
}

li {
    list-style-type: none
}

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

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

h2 {
    margin: 12px 0 0;
    font-size: 1.6rem;
    line-height: 2.5rem;
    padding-bottom: 12px
}

.panel-title,
h3 {
    font-size: 1.4rem
}

h3 {
    margin: 2rem 0 0
}

fieldset {
    margin-bottom: 1rem;
    border: 1px solid rgba(37, 35, 35, .25);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    font-family: inherit;
    min-width: inherit;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
    background: #2f2e2a
}

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

legend {
    display: none !important
}

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

fieldset>button {
    margin: 8px
}

.panel-title {
    display: block;
    line-height: 2.2rem;
    padding-bottom: 0;
    background: #2f2e2a;
    padding-left: 8px;
    border-bottom: 1px solid #1f1e1a;
    border-top: 1px solid #1f1e1a
}

fieldset>.panel-title:nth-of-type(1) {
    border-top: none
}

/*
 * Tables.less
 * Tables for, you guessed it, tabular data
 * ---------------------------------------- */

.tr { display: table-row; }
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }

.table {
    display: table;
    width: 100%;
    margin-bottom: 18px;
    padding: 0;
    font-size: 13px;
    border-collapse: collapse;
    position: relative;
}

.table .th, .table .td {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 10px 9px;
    line-height: 18px;
    text-align: left;
}

.table .tr:first-child .th {
    padding-top: 9px;
    font-weight: bold;
    vertical-align: top;
}

.tr.placeholder {
    height: calc(3em + 20px);
}

.tr.placeholder > .td {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 3em;
}

.table {
    border-spacing: 0;
    border-collapse: collapse;
    border: none;
    margin: 0 !important
}

.cbi-rowstyle-1,
.cbi-rowstyle-2 {
    border-bottom: 1px solid #1f1e1a
}

.table .tr .td,
.table .tr .th {
    padding: .5rem;
    white-space: nowrap
}

.table .tr {
    border-top: 1px solid #3f3e3a
}

.cbi-rowstyle-1 {
    background-color: #3f3e3a;
    border-top: 1px solid #4f4e4a
}

.cbi-rowstyle-2 {
    background-color: #2f2e2a;
    border-top: 1px solid #3f3e3a
}

.table .tr:nth-last-child(1) {
    border-bottom: none
}

#conns>div,
#membuff>div,
#memfree>div,
#memtotal>div,
#swapfree>div,
#swaptotal>div {
    width: 100% !important;
    height: 1.2rem !important;
    background: #1f1e1a;
    border: 1px solid #000 !important
}

#conns>div>div,
#membuff>div>div,
#memfree>div>div,
#memtotal>div>div,
#swapfree>div>div,
#swaptotal>div>div {
    height: 100% !important;
    background-color: rgba(117, 137, 12, .75) !important
}

#conns>div>div>div,
#membuff>div>div>div,
#memfree>div>div>div,
#memtotal>div>div>div,
#swapfree>div>div>div,
#swaptotal>div>div>div {
    color: #fafafa !important;
    line-height: 17px
}

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

.cbi-button {
    height: 1.65rem;
    margin-top: -0.35rem;
    -webkit-appearance: none;
    display: inline-block;
    cursor: pointer;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: auto !important;
    color: #d8d3c5;
    font-size: .8rem;
    font-family: DIN;
    font-weight: 700;
    text-shadow: 0 1px 1px #000;
    text-decoration: none;
    border-width: 1px;
    border-radius: 0;
    border-style: solid;
    border-color: #44433f #44433f #3a3935;
    box-shadow: inset 0 0 24px 0 #2f2e2c, 0 0 3px 0 #000;
    background: -webkit-linear-gradient(top, #494744 0, #2f2e2c 100%);
    background: linear-gradient(to bottom, #494744 0, #2f2e2c 100%);
    padding: 5px
}

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

.cbi-button-apply,
.cbi-button-edit,
.cbi-button-remove,
.cbi-button-reset,
.cbi-input-apply,
.cbi-input-remove,
.cbi-input-reset,
.cbi-section-remove>.cbi-button {
    color: #2f2e2a !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .62);
    text-transform: uppercase
}

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

.cbi-button:active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23)
}

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

.zonebadge,
header>.container>.pull-right>* {
    cursor: pointer
}

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

.cbi-button-reset,
.cbi-input-remove {
    box-shadow: inset 0 0 14px 0 #db4213, 0 0 3px 0 #db6113 !important;
    border: 1px solid rgba(255, 129, 92, .65) !important;
    background: #dbb013 !important;
    background: -moz-radial-gradient(center, ellipse cover, #dbb013 0, #c69611 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, #dbb013 0, #c69611 100%) !important;
    background: radial-gradient(ellipse at center, #dbb013 0, #c69611 100%) !important
}

.cbi-button-add,
.cbi-button-find,
.cbi-button-reload,
.cbi-button-save,
.cbi-input-find,
.cbi-input-reload,
.cbi-input-save {
    color: #2f2e2a !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .62);
    text-transform: uppercase;
    box-shadow: inset 0 0 24px 0 #606f11, 0 0 3px 0 #9db134 !important;
    border: 1px solid #799037 !important;
    background: #7eaa0f !important;
    background: -webkit-radial-gradient(center ellipse, #7eaa0f 0, #6d8006 100%) !important;
    background: radial-gradient(ellipse at center, #7eaa0f 0, #6d8006 100%) !important
}

.cbi-button-apply,
.cbi-button-edit,
.cbi-input-apply {
    box-shadow: inset 0 0 24px 0 rgba(62, 62, 62, .77), 0 0 4px 0 rgba(236, 232, 219, .75);
    border: 1px solid #969696 !important;
    background: #dbb013 !important;
    background: -webkit-radial-gradient(center ellipse, #e0dbcf 0, rgba(224, 219, 204, .7) 100%) !important;
    background: radial-gradient(ellipse at center, #e0dbcf 0, rgba(224, 219, 204, .7) 100%) !important
}

.cbi-button-remove,
.cbi-input-reset,
.cbi-section-remove>.cbi-button {
    box-shadow: inset 0 0 14px 0 #82290e, 0 0 3px 0 #db4213 !important;
    border: 1px solid #b73813 !important;
    background: #db4213 !important;
    background: -moz-radial-gradient(center, ellipse cover, #db4213 0, #c93612 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, #db4213 0, #c93612 100%) !important;
    background: radial-gradient(ellipse at center, #db4213 0, #c93612 100%) !important
}

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

.tabs {
    margin: 0 -2rem;
    padding-left: .5rem;
    background-color: #3f3e3a;
    border-bottom: 1px solid #2f2e2a
}

.cbi-tabmenu>li,
.tabs>li {
    display: inline-block;
    height: 42px;
    line-height: 42px
}

.cbi-tabmenu>li>a,
.tabs>li>a {
    text-decoration: none;
    color: #d8d3c5;
    padding: .5rem .8rem
}

.tabs>li:hover,
.tabs>li[class~=active] {
    cursor: pointer;
    border-bottom: .2rem solid rgba(117, 137, 12, .75);
    color: rgba(117, 137, 12, .9)
}

.cbi-tabmenu>li[class~=cbi-tab]>a,
.tabs>li[class~=active]>a {
    color: #fafafa
}

.tabs>li:hover {
    border-bottom: .18751rem solid rgba(117, 137, 12, .5)
}

.cbi-tabmenu>li:hover {
    border-bottom: 2px solid #d8d3c5
}

.cbi-tabmenu>li[class~=cbi-tab] {
    border-bottom: 2px solid rgba(117, 137, 12, .85)
}

.cbi-tabmenu {
    background: url(../img/noise.png) #171612
}

.cbi-section-node:nth-of-type(2n),
.cbi-section-remove:nth-of-type(2n) {
    background-color: #3f3e3a
}

.cbi-section-node-tabbed {
    padding: 0;
    margin-top: 0;
    background: #3f3e3a
}

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

.cbi-value-description,
.cbi-value-field {
    display: table-cell;
    line-height: 1.25;
}
.table .td.cbi-value-field {
    padding-left: 1px;
    padding-right: 1px;
}

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

.cbi-value-helpicon:before {
    font-family: icomoon;
    color: rgba(117, 137, 12, .5);
    content: "\f059"
}

.cbi-value-description {
    color: #d8d3c5 font-size: small;
    padding: .5rem 0 0
}

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

.cbi-value {
    padding: .3rem 0;
    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 .cbi-button-down,
.cbi-rowstyle-2 .cbi-button-up {
    background-color: #FFF !important
}

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

.cbi-section-table-titles {
    background: url(../img/noise.png) #292823
}

.cbi-map-descr,
.cbi-section-descr {
    padding: .5rem;
    color: #1f1e1a;
    font-size: small;
    background: #6f6e6a;
    text-shadow: none
}

.hidden {
    display: none
}

.left {
    text-align: left !important
}

.right {
    text-align: right !important
}

.inline {
    display: inline
}

.cbi-page-actions {
    padding: 10px;
    border: 1px solid #3f3e3a;
    text-align: right;
    background: url(../img/stripes.svg) #2f2e2a;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, .6)
}

.cbi-value input[type=password],
.cbi-value input[type=text],
.cbi-value-field .cbi-input-select {
    min-width: 15rem
}

.ifacebadge {
    display: inline-flex;
    padding: .5rem 1rem;
    background: rgba(15, 14, 10, .8);
    box-shadow: inset 0 0 42px 0 #000
}

td>.ifacebadge {
    font-size: .9rem
}

.ifacebadge>img {
    float: right;
    margin: 0 .3rem;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.cbi-input-textarea {
    width: 100%;
    min-height: 16rem;
    min-width: 54rem;
    padding: .8rem;
    font-size: .8rem;
    margin-top: 10px
}

#syslog {
    width: 100%;
    min-height: 15rem;
    padding: 1rem;
    font-size: small;
    color: #d8d3c5;
    margin-bottom: 20px;
    border-radius: 0
}

#cbi-apply-uci-apply img {
    display: none
}

#cbi-apply-uci-apply #cbi-apply-uci-apply-status {
    display: block;
    color: #d8d3c5;
    padding: 10px
}

#cbi-apply-uci-apply #cbi-apply-uci-apply-status:before {
    font-family: icomoon;
    content: "\e603";
    animation: anim-rotate 2s infinite linear;
    margin-right: 1rem;
    display: inline-block;
    color: rgba(117, 137, 12, 1)
}

.uci-change-list {
    font-family: monospace;
    padding: 10px;
    color: #fafafa;
    font-size: 14px
}

.uci-change-legend-label ins,
.uci-change-list ins {
    text-decoration: none;
    border: 1px solid rgba(117, 137, 12, .75);
    background-color: #505a18;
    display: block;
    padding: 2px
}

.uci-change-legend-label del,
.uci-change-list del {
    text-decoration: none;
    border: 1px solid #c93612;
    background-color: rgba(175, 46, 17, .53);
    display: block;
    font-style: normal;
    padding: 2px
}

.uci-change-legend-label var,
.uci-change-list var {
    text-decoration: none;
    border: 1px solid #3f3e3a;
    display: block;
    font-style: normal;
    padding: 2px;
    box-shadow: inset 0 0 24px 0 #000;
    background: #1f1e1a
}

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

.uci-change-legend {
    padding: 10px
}

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

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

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

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

#bwsvg,
#iwsvg,
#iwsvg2 {
    border: 1px solid #1f1e1a !important;
    border-top: none !important;
    box-shadow: inset 0 0 42px 0 #000;
    background: url(../img/stripes.svg) #1f1e1a !important
}

svg {
    background: rgba(15, 14, 10, .8) !important
}

.ifacebox {
    border: 1px solid #0f0e0a;
    margin: 5px;
    background-color: #fff;
    text-align: center;
    white-space: nowrap;
    background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2em;
    min-width: 100px;
}

.ifacebox-head {
    line-height: 20px;
    color: #1f1e1a;
    text-shadow: none
}

.ifacebox-body {
    box-shadow: inset 0 0 15px 0 #000;
    background: #1f1e1a;
    min-height: 40px;
    line-height: 18px;
}

/* --- network-status --- */
.network-status-table {
}

.network-status-table .ifacebox {
}

.network-status-table .ifacebox-body {
    height: 100%;
    text-align: left;
}

.network-status-table .ifacebox-body > span {
    display: block;
        margin: .5em 1.5em
}

#dsl_status_table .ifacebox-body > span > strong {
    display: inline-block;
    min-width: 35%;
}

.ifacebadge.large,
.network-status-table .ifacebox-body .ifacebadge {
    display: inline-flex;
    flex: 1;
    padding: .25em;
    min-width: 220px;
    width: 100%;
}

.cbi-tooltip-container {
    cursor: help;
    display: inline-block;
    vertical-align: text-top;
}

.cbi-tooltip {
    display: block;
    position: absolute;
    z-index: 1000;
    left: -1000px;
    opacity: 0;
    transition: opacity .25s ease-out;
    width: auto !important;
    padding: .75em;
    text-align: left;
    margin-left: 1.25em;
}

.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
    left: auto;
    opacity: 1;
    transition: opacity .25s ease-in;
}

.zonebadge .cbi-tooltip {
    padding: 1px;
    background: inherit;
    margin: -1.6em 0 0 -5px;
    border-radius: 3px;
    pointer-events: none;
    box-shadow: 0 0 3px #444;
}

.cbi-image-button {
    margin-left: .5rem
}

.zonebadge {
    padding: .2rem .5rem;
    display: inline-block
}

.zonebadge>.ifacebadge {
    padding: .2rem 1rem;
    margin: .3rem
}

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

.zone-forwards {
    display: flex;
    flex-wrap: wrap;
}

.zone-forwards > * {
    flex: 1 1 40%;
    padding: 1px;
}

.zone-forwards > span {
    flex-basis: 10%;
    text-align: center;
}

.zone-forwards .zone-src,
.zone-forwards .zone-dest {
    display: flex;
}


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

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

.cbi-value-field>ul>li {
    display: flex
}

.cbi-value-field>ul>li>label {
    margin-top: .5rem
}

.cbi-value-field>ul>li .ifacebadge {
    margin-left: .4rem;
    margin-top: -.5rem
}

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

.cbi-section-create>.cbi-button-add {
    margin: .5rem
}

.cbi-section-remove {
    padding: .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-down,
.cbi-button-up {
    display: inline-block;
    min-width: 0;
    padding: .2rem .3rem;
    font-size: 1.2rem
}

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

#diag-rc-output>pre {
    display: block;
    padding: 8.5px;
    margin: 0 0 18px;
    line-height: 1.5rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 1.4rem
}

.darkMask,
.node-main-login>.main>.main-left,
.showSide {
    display: none
}

.node-main-login>.main fieldset:nth-child(4) td:nth-child(2),
.node-status-overview>.main fieldset:nth-child(4) td:nth-child(2),
.node-status-processes>.main table tr td:nth-child(3) {
    white-space: normal
}

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

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

#xhr_poll_status>.label.success {
    color: #fafafa !important;
    text-shadow: 0 1px 1px rgba(65, 65, 65, .4) !important;
    box-shadow: inset 0 0 24px 0 #606f11, 0 0 3px 0 #9db134 !important;
    border: 1px solid #799037 !important;
    background: #7eaa0f !important;
    background: -webkit-radial-gradient(center ellipse, #7eaa0f 0, #6d8006 100%) !important;
    background: radial-gradient(ellipse at center, #7eaa0f 0, #6d8006 100%) !important;
    margin-right: 4px;
    padding: 5px
}

.label {
    color: #d8d3c5 !important;
    font-size: .8rem;
    text-shadow: 0 1px 1px #000;
    text-decoration: none;
    border-width: 1px;
    border-radius: 0;
    border-style: solid;
    border-color: #44433f #44433f #3a3935;
    box-shadow: inset 0 0 24px 0 #2f2e2c, 0 0 3px 0 #000;
    background: -webkit-linear-gradient(top, #494744 0, #2f2e2c 100%);
    background: linear-gradient(to bottom, #494744 0, #2f2e2c 100%);
    padding: 5px
}

#modemenu>li .active>.label {
    box-shadow: inset 0 0 24px 0 rgba(62, 62, 62, .77), 0 0 4px 0 rgba(236, 232, 219, .75);
    border: 1px solid #969696 !important;
    background: #dbb013 !important;
    background: -webkit-radial-gradient(center ellipse, #e0dbcf 0, rgba(224, 219, 204, .7) 100%) !important;
    background: radial-gradient(ellipse at center, #e0dbcf 0, rgba(224, 219, 204, .7) 100%) !important
}

#modemenu>li .active>.label>a {
    color: #d8d3c5 !important;
    text-shadow: 0 1px 1px rgba(10, 9, 4, .4) !important
}

.notice {
    background-color: #5BC0DE
}

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

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

.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: 3rem !important;
    background-color: #1f1e1a;
    text-align: left;
    border: 1px solid #3f3e3a;
    box-shadow: 0 0 42px 0 rgba(0, 0, 0, .66)
}

.node-main-login fieldset:nth-child(3n) table table tr td,
.node-status-overview fieldset:nth-child(3n) table table tr td {
    padding: 7px !important
}

.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-password,
.node-main-login>.main .cbi-input-user {
    min-width: 15rem
}

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

.node-main-login table>tbody>tr {
    background-color: #2f2e2a;
    border-top: 1px solid #3f3e3a;
    border-bottom: 1px solid #1f1e1a
}

.node-main-login table>tbody>tr:nth-of-type(2n) {
    background-color: #3f3e3a;
    border-top: 1px solid #4f4e4a;
    border-bottom: 1px solid #1f1e1a
}

.node-main-login fieldset:nth-child(3n) table table {
    box-shadow: inset 0 0 15px 0 #000;
    background: #1f1e1a;
    border: 1px solid #000
}

.node-main-login fieldset:nth-child(3n) table table tr {
    background: 0 0;
    border: none
}

.node-status-overview table>tbody>tr {
    background-color: #2f2e2a;
    border-top: 1px solid #3f3e3a;
    border-bottom: 1px solid #1f1e1a
}

.node-status-overview table>tbody>tr:nth-of-type(2n) {
    background-color: #3f3e3a;
    border-top: 1px solid #4f4e4a;
    border-bottom: 1px solid #1f1e1a
}

.node-status-overview table>tbody>tr:last-child {
    border: none
}

.node-status-overview fieldset:nth-child(3n) table table {
    box-shadow: inset 0 0 15px 0 #000;
    background: #1f1e1a;
    border: 1px solid #000
}

.node-status-overview fieldset:nth-child(3n) table table tr {
    background: 0 0;
    border: none
}

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

.cbi-tabmenu+.cbi-section,
.node-status-iptables fieldset,
.node-system-flashops fieldset,
.node-system-packages fieldset {
    margin-top: 0
}

.node-system-reboot>.main>.main-right h3,
.node-system-reboot>.main>.main-right p {
    padding-left: 2rem;
    margin-bottom: 8px
}

.node-system-reboot>.main>.main-right p.warning {
    padding: 2rem
}

.node-system-reboot>.main>.main-right p:nth-last-child(1) {
    background: url(../img/stripes.svg) #1f1e1a;
    padding: 2rem
}

.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
}

#cbi-processes .cbi-section-descr,
#cbi-processes .cbi-section-table-descr,
#cbi-system-led .cbi-section-descr,
#cbi-system-led br,
.node-status-processes .cbi-page-actions,
.node-system-flashops br {
    display: none
}

.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
    padding-top: 1rem
}

.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
}

.node-system-packages>.main .cbi-tabmenu>li>a,
.tabs>li>a {
    padding: .5rem .8rem
}

.node-system-packages>.main .cbi-value>pre {
    overflow: auto
}

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

.node-status-iptables .cbi-tabmenu,
.node-system-flashops .cbi-tabmenu,
.node-system-packages .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
}

.node-system-flashops .cbi-section-node {
    padding-top: 10px;
    padding-bottom: 10px
}

.node-system-flashops .cbi-input-apply {
    height: 25px;
    margin-top: -5px;
    font-size: .8rem
}

#cbi-firewall-redirect table *,
#cbi-firewall-zone table *,
#cbi-network-switch_vlan table * {
    font-size: small
}

#cbi-firewall-redirect table input[type=text],
#cbi-firewall-zone table input[type=text],
#cbi-network-switch_vlan table input[type=text] {
    width: 5rem
}

#cbi-firewall-redirect table select,
#cbi-firewall-zone table select,
#cbi-network-switch_vlan table select {
    min-width: 3.5rem
}

#cbi-system-led .cbi-section-create,
#cbi-system-led .cbi-section-remove {
    background: #1f1e1a;
    border-bottom: 1px solid #0f0e0a;
    border-top: 1px solid #0f0e0a
}

#cbi-processes .cbi-section-table-titles {
    background-color: #1f1e1a;
    border-top: none
}

.node-status-realtime table {
    border: 1px solid #1f1e1a
}

.node-status-realtime table>tbody>tr {
    background-color: #2f2e2a;
    border-top: 1px solid #3f3e3a;
    border-bottom: 1px solid #1f1e1a
}

.node-status-realtime table>tbody>tr:nth-of-type(2n) {
    background-color: #3f3e3a;
    border-top: 1px solid #4f4e4a;
    border-bottom: 1px solid #1f1e1a
}

.node-status-realtime fieldset table {
    border: none
}

.node-status-realtime small {
    display: inline-block;
    width: 100%;
    line-height: 25px;
    background: #1f1e1a;
    border: 1px solid #1f1e1a;
    padding-right: 5px
}

.node-status-realtime #cbi-table-table small {
    border: none
}

.node-status-realtime br,
.node-system-admin .cbi-section-table-descr,
.node-system-admin .cbi-section-table-titles,
.node-system-admin br,
.node-system-admin fieldset:nth-of-type(1) .cbi-section-descr,
.node-system-startup .cbi-map br,
.node-system-startup .cbi-section-descr,
.node-system-startup .cbi-section-table-descr,
.node-system-startup form:nth-of-type(1) .cbi-page-actions,
.node-system-system .cbi-section-descr,
.node-system-system fieldset br {
    display: none
}

.node-system-startup .cbi-map-descr br {
    display: block
}

.node-network-bmx7 .cbi-map-descr,
.node-network-bmx7 center img,
.node-network-dhcp #cbi-dhcp-dnsmasq br,
.node-network-dhcp .cbi-section-descr,
.node-network-dhcp .cbi-section-table-descr,
.node-network-network .cbi-section-descr,
.node-network-network fieldset br,
.node-system-fstab .cbi-section-descr:nth-of-type(1),
.node-system-fstab .cbi-section-table-descr {
    display: none
}

.node-system-flashops fieldset {
    margin-top: 10px;
    padding: 10px
}

.node-network-bmx7 div#extra-info {
    margin-bottom: 15px
}

.node-network-network fieldset .cbi-section-node table {
    box-shadow: inset 0 0 15px 0 #000;
    background: #1f1e1a;
    border: 1px solid #000
}

.node-network-network fieldset .cbi-section-node table tr {
    background: 0 0
}

.node-network-network fieldset .cbi-section-node table td:nth-of-type(1) {
    padding: 5px !important
}

.node-network-network fieldset .cbi-section-node table td,
.node-network-wireless fieldset .cbi-section-node table td {
    padding: 10px !important
}

.node-network-network fieldset .cbi-section-table br {
    display: initial
}

.node-network-wireless fieldset br {
    display: none
}

.node-network-wireless fieldset .cbi-section-node table br,
.node-network-wireless fieldset .cbi-section-table:nth-of-type(1) br {
    display: initial
}

.node-network-wireless fieldset .cbi-section-node table {
    box-shadow: inset 0 0 15px 0 #000;
    background: #1f1e1a;
    border: 1px solid #000
}

.node-network-wireless fieldset .cbi-section-table tr:nth-of-type(1) {
    background: url(../img/noise.png) #292823
}

.node-network-hosts .cbi-section-descr,
.node-network-hosts .cbi-section-table-descr,
.node-network-routes .cbi-section-descr {
    display: none
}

.node-network-routes .cbi-input-select {
    width: 100px;
    min-width: 100px
}

.node-network-routes input {
    width: 130px;
    max-width: 150px
}

.node-network-routes td:nth-of-type(5) input,
.node-network-routes td:nth-of-type(6) input {
    width: 50px !important;
    max-width: 50px !important
}

body.lang_pl.node-main-login .cbi-value-title {
    width: 12rem
}

.breadcrumb li {
    display: inline-block
}

.info {
    background: 0 0 !important
}

pre,
textarea {
    border: 1px solid #0f0e0a;
    padding: 15px;
    color: #d8d3c5;
    background: rgba(15, 14, 10, 1);
    box-shadow: inset 0 0 36px 0 rgba(0, 0, 0, .8);
    margin-top: 10px
}

#content_syslog textarea {
    margin-top: 0
}

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

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

    .cbi-button {
        padding: .3rem .6rem
    }

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

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

    .node-status-iptables>.main fieldset li>a {
        padding: .3rem .6rem
    }
}

@media screen and (max-width:1280px) {
    .main-left {
        width: calc(0% + 13rem);
        top: 3.5rem;
        height: calc(100% - 3.5rem)
    }

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

    .cbi-tabmenu>li>a,
    .tabs>li>a {
        padding: .2rem .5rem
    }

    .panel-title {
        font-size: 1.1rem
    }

    table {
        font-size: .7rem !important;
        width: 100% !important
    }
}

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

    .main-right {
        width: 100%
    }

    .showSide {
        padding: .1rem;
        margin-right: .5rem;
        display: inline-block;
        line-height: 51px;
        vertical-align: top
    }

    .showSide:before {
        font-family: icomoon;
        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,
    .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 !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 input[type=button],
    .node-network-diagnostics>.main .cbi-map fieldset>div select {
        margin: 1rem 0 0
    }

    #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
    }

    .tabs {
        margin: 0 -1rem
    }

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

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

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

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

    .cbi-page-actions>div>input,
    .mobile-hide {
        display: none
    }

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

    .cbi-tabmenu>li>a,
    .tabs>li>a {
        padding: .2rem .3rem;
        font-size: .9rem
    }

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

    .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: .5rem
    }

    h2 {
        font-size: 2rem
    }

    .tabs>li>a,
    input,
    select {
        font-size: .9rem
    }

    .panel-title {
        font-size: 1.4rem
    }

    .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;
        padding: 2rem;
        border: 0;
        font-weight: 400;
        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 (min-width:992px) {

    .cbi-value input[type=password],
    .cbi-value input[type=text],
    .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],
    .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],
    .cbi-value-field .cbi-input-select {
        min-width: 25rem
    }
}