+ position: absolute;
+ top: 1px;
+ left: 1px;
+ right: 1px;
+ bottom: 1px;
+}
+
+
+}
+
+@media screen and (max-width: 992px) {
+ body {
+ -webkit-text-size-adjust: 100%;
+ }
+
+ #maincontainer {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ #maincontent {
+ width: 96%;
+ margin: auto;
+ flex-basis: auto;
+ }
+
+ #mainmenu {
+ border: none;
+ border-radius: 0;
+ max-width: none;
+ background: #000;
+ box-shadow: 0 0 2px #444;
+ padding: 0;
+ border-top: 1px solid #444;
+ position: relative;
+ }
+
+ #mainmenu ul > li.selected > a {
+ background: #444;
+ color: #fff;
+ border-top: none;
+ }
+
+ #mainmenu ul > li.selected:not(.active) > ul {
+ max-height: 0;
+ visibility: hidden;
+ }
+
+ #mainmenu ul > li > a {
+ flex: 1 1 auto;
+ color: #fff;
+ border: 1px solid #444;
+ border-width: 0 0 1px 1px;
+ }
+
+ #mainmenu ul.l1 {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ position: relative;
+ margin-left: -1px;
+ width: 100%;
+ }
+
+ #mainmenu ul.l1 > li {
+ display: inline-flex;
+ flex: 1 1 auto;
+ position: relative;
+ height: 2em;
+ }
+
+ #mainmenu ul.l1 ul.l2 {
+ position: absolute;
+ top: 2em;
+ right: 0;
+ z-index: 1000;
+ background: #000;
+ box-shadow: 0 0 2px #444;
+ min-width: 120px;
+ display: block;
+ }
+
+ #mainmenu ul.l1 ul.l2.align-left {
+ right: auto;
+ left: 0;
+ }
+
+ #mainmenu ul.l2 > li {
+ display: block;
+ }
+
+ #mainmenu ul.l2 > li > a {
+ padding: .5em;
+ }
+
+ #mainmenu ul li.mainmenu-item-logout {
+ margin-top: 0;
+ margin-left: auto;
+ }
+
+ #mainmenu ul li.mainmenu-item-logout::before {
+ content: "\0a";
+ flex: 10;
+ border: 1px solid #444;
+ border-width: 0 0 1px 1px;
+ }
+
+ .table {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .tr {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ }
+
+ .th, .td {
+ flex: 2 2 25%;
+ align-self: flex-start;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-wrap: break-word;
+ display: inline-block;
+ }
+
+ .td select {
+ word-wrap: normal;
+ }
+
+ .td[data-type="button"],
+ .td[data-type="fvalue"] {
+ flex: 1 1 12.5%;
+ text-align: left;
+ }
+
+ .td.cbi-value-field {
+ align-self: flex-start;
+ }
+
+ .td.cbi-value-field .cbi-button {
+ width: 100%;
+ }
+
+ .table.cbi-section-table {
+ border: none;
+ background: none;
+ margin: 0;
+ }
+
+ .tr.table-titles,
+ .cbi-section-table-titles,
+ .cbi-section-table-descr {
+ display: none;
+ }
+
+ .cbi-section-table-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ border: 1px dotted #444;
+ margin: 0 0 .5em 0;
+ background: #fff;
+ }
+
+ .cbi-section-table-row:hover {
+ border: 1px solid #4a6b7c;
+ }
+
+ .cbi-section-table + .cbi-section-create {
+ padding-top: 0;
+ }
+
+ .tr[data-title]::before {
+ display: block;
+ flex: 1 1 100%;
+ background: #eef;
+ }
+
+ .td[data-title]::before,
+ .td[data-description]::after {
+ display: block;
+ }
+
+ .td[data-title] ~ .td.cbi-section-actions {
+ align-self: flex-start;
+ }
+
+ .td[data-title] ~ .td.cbi-section-actions::before {
+ display: block;
+ content: "\a0";
+ }
+
+ .hide-sm,
+ .hide-xs {
+ display: none;
+ }
+
+ #dsl_status_table .ifacebox-body > span > strong {
+ min-width: 50%;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ body {
+ font-size: 12pt;
+ }
+
+ input, textarea, select {
+ font-size: 12pt !important;
+ line-height: 1.4em;
+ }
+
+ select, input[type="text"], input[type="password"] {
+ width: 100%;
+ height: 1.4em;
+ }
+
+ [data-dynlist] > input,
+ input.cbi-input-password {
+ width: calc(100% - 20px);
+ }
+
+ .cbi-dropdown {
+ min-width: 100%;
+ }
+
+ .btn, .cbi-button {
+ font-size: 9pt !important;
+ line-height: 13pt;
+ }
+
+ #maincontent {
+ padding: .25em;
+ }
+
+ #tabmenu {
+ margin: -.25em -.25em 1em -.25em;
+ }
+
+ .th, .td {
+ flex: 2 2 50%;
+ }
+
+ .td.cbi-value-field {
+ flex-basis: 100%;
+ }
+
+ .td.cbi-value-field[data-type="dvalue"] {
+ flex-basis: 50%;
+ }
+
+ .td.cbi-value-field[data-type="button"],
+ .td.cbi-value-field[data-type="fvalue"] {
+ flex-basis: 25%;
+ text-align: left;
+ }
+
+ .cbi-value-title {
+ float: none;
+ font-weight: bold;
+ }
+
+ .cbi-value-field {
+ width: 100%;
+ margin: 0;
+ }
+
+ .cbi-value-description {
+ margin-top: 5px;
+ display: block;
+ }
+
+ .cbi-section-create {
+ margin-bottom: 1em;
+ }
+
+ .cbi-page-actions {
+ flex-wrap: wrap;
+ margin: -2px;
+ }
+
+ .cbi-page-actions > .cbi-button-link {
+ flex-basis: 100%;
+ margin-right: 2px;
+ }
+
+ .cbi-page-actions > * {
+ flex: 1 1 auto;
+ margin: 2px;
+ }
+
+ ul.cbi-tabmenu {
+ padding: 0 3px;
+ }
+
+ ul.cbi-tabmenu li {
+ font-size: 90%;
+ margin: 0 1px -1px 0;
+ }
+
+ .hide-xs {
+ display: none;
+ }
+
+ #cbi-network .td[id] > strong {
+ display: block;
+ }
+
+ #cbi-network-switch_vlan .td.cbi-section-actions {
+ flex-basis: 100%;
+ }
+
+ #dsl_status_table .ifacebox-body > span > strong {
+ display: block;
+ width: 100%;
+ margin-top: .5em;
+ }