@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: 100%;
  }
}

.has-unsupported {
	color:var(--bg-color-error);
}

@supports(selector(:has(+ *))) {
  .has-unsupported {
    display: none;
  }
}

:root {
	color-scheme: light dark;
	--portax: rgb(145, 189, 84);
	--red: #EA644A;
	--dark-red: #CC3118;
	--orange: #EC9D48;
	--dark-orange: #CC7016;
	--yellow: #ECD748;
	--dark-yellow: #C9B215;
	--green: #54EC48;
	--dark-green: #24BC14;
	--blue: #48C4EC;
	--dark-blue: #1598C3;
	--pink: #DE48EC;
	--dark-pink: #B415C7;
	--purple: #7648EC;
	--dark-purple: #4D18E4;
	--a-color: #0066cc;
	--a-color-active: #b91440;
	--bg-color: #fff;
	--secondary-bg-color: #C3D9FF;
	--bg-color-error: #CC3118;
	--bg-color-info: #FAD163;
	--primary-color: #000;
	--secondary-color: #0066cc;
	--blur-color: #6c6c6c;
	--table-bg-color: #f0f5ff;
	--elem-bg: #dedede;
	--elem-bg-disabled: #dedede;
	--elem-border: #bbb;
	--hover-bg: #ccc;
	--bg-color-2: #c0c0c0;
	--border-2: #aaa;
	--hilite-color: #eeeeee;
	--menu-border: #C9D7F1;
	--tt-color: #000;
	--input-background-text: #fff;
	--input-background: #e8e8e8;
	--input-active: #0066cc;
	--border-3d: #e8e8e8 #cecece #cecece #e8e8e8;
	--dt-bg-color-1: #E5EFFF;
	--dt-bg-color-2: #FFFFFF;
	--dt-bg-color-1-h: #D6E6FF;
	--dt-bg-color-2-h: #F5F9FF;
	--dt-bg-color-1-h-s: #ADCBFF;
	--dt-bg-color-h: #99BEFF;
	--map-button-symbol: #404040;
	--map-menu-color: #0066cc;
	--map-submenu-bg: #eeeeee;
	--cidr-split: #FFFFEE;
	--cidr-used: #FFEEEE;
	--cidr-free: #EEFFEE;
	--cidr-hover: #99BEFF;
	--tr-triggered-bg: #ffe0e0;
	--td-critical: #ffdddd;
	--td-warning: #ffffdd;
	--disabled-text: #888;
	--log-info: #DDFFDD;
	--log-warn: #FFEEDD;
	--log-log: var(--td-warning);
	--log-error: var(--td-critical);
	--log-debug: teal;
	--inverse: #000;
}

.dark {
	color-scheme: dark;
	--a-color: #73b9ff;
	--primary-color: #e8e8e8;
	--bg-color: #222;
	--secondary-bg-color: #273959;
	--bg-color-error: #CC3118;
	--bg-color-info: #FAD163;
	/*--secondary-color: #222;*/
	--secondary-color: #0066cc;
	--blur-color: #8c8c8c;
	--table-bg-color: #192d4b;
	--hover-bg: #333;
	--bg-color-2: #101010;
	--bg-color-3: #21252e;
	--border-2: #666;
	--disabled-text: #888;
	--hilite-color: #111;
	--elem-bg-disabled: #333;
	--menu-border: #2d394e;
	--elem-border: #505050;
	--tt-color: #222;
	--input-background-text: #303030;
	--input-background: #5e6b83;
	--input-active: #0066cc;
	--border-3d: #707c91 #41506b #41506b #707c91;
	--dt-bg-color-1: #3a5483;
	--dt-bg-color-2: #6281b9;
	--dt-bg-color-1-h: #7792c2;
	--dt-bg-color-2-h: #7792c2;
	--dt-bg-color-1-h-s: #6e8bbe;
	--dt-bg-color-h: #4c6fad;
	--map-button-symbol: #999;
	--map-menu-color: #44aaff;
	--map-submenu-bg: #444444;
	--cidr-split: #444400;
	--cidr-used: #550000;
	--cidr-free: #004400;
	--cidr-hover: #202952;
	--tr-triggered-bg: #4e0018;
	--td-critical: rgb(132,0,0);
	--td-warning: rgb(132,132,0);
	--log-info: #004400;
	--log-warn: #884400;
	--log-log: var(--td-warning);
	--log-error: var(--td-critical);
	--log-debug: turquoise;
	--inverse: #fff;
}

/* default styles */
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	background-color: var(--bg-color);
	color: var(--primary-color);
}

div.footer-banner {
	text-align: right;
	line-height: 2em;
	height: 2em;
	vertical-align: middle;
	font-size: 65%;
	white-space: nowrap;
}

div.submenu.static {
	margin: 0;
	background-color: var(--bg-color);
	width: 100%;
	z-index: 100;
}

div.submenu > div > div.submenu-list {
	float: left;
}

div.submenu > div {
	padding: 0.5em;
}

div.subcontent.static.xsession {
	padding: 20px;
}

div.subcontent {
	min-height: calc(100vh);
}

div.subcontent.static > div.epoch {
	position: fixed;
	width: 100%;
	background-color: var(--bg-color);
}

div.subcontent.static > div.graphs {
	padding-top: 1.7em;
}

div.subcontent.scrollable > div.graphs {
	overflow: auto;
	height: 90%;
}

div.body-wrapper-static {
	padding-bottom: 3em;
}

div.body-wrapper {
	min-height: 100%; 
	height: auto ! important; 
	margin: 0px auto -2.6em; 
	padding: 0px;
}

div.body-margin {
	padding: 5px 5px 2.4em;
}

div.menu {
	padding: 0px 3px;
}

label.portax-box {
	background-color: var(--secondary-bg-color);
	border: 4px solid var(--secondary-bg-color);
	border-radius: 2px;
	margin-right: 4px;
}

label.portax-box.checkbox {
	margin-right: 0;
}

td.portax-box {
	background-color: var(--secondary-bg-color);
	border-radius: 4px;
}

td.portax-box.np {
	padding: 1px 3px 1px 3px;
	border-radius: 2px;
}

ul.portax-box.eventq:has(> li.running) {
	display: inline-block;
}

ul.portax-box.eventq {
	display: none;
	padding: 3px 7px 3px 7px;
}

ul.portax-box,
div.portax-box {
	display: table;
	color: var(--primary-color);
	background-color: var(--secondary-bg-color);
	margin-bottom: 5px;
	padding: 3px 7px 3px 7px;
	border-radius: 4px;
}

div.portax-box-outline {
	border: 1px solid var(--elem-border);
	background: none;
}

div.portax-box > form > label {
	line-height: 18px;
}

div.np {
	padding: 1px 3px 1px 3px;
	border-radius: 2px;
}

div.portax-box-square {
	display: table;
	color: var(--primary-color);
	margin-bottom: 5px;
	padding: 8px 8px 2px 8px;
	background-clip: content-box;
	background: var(--bg-color-3);
	box-shadow: inset 0 0 0 3px var(--bg-color-2);
	border: 1px solid var(--secondary-bg-color);
}

.box-shadow {
	-webkit-box-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
}

span.full-width,
div.portax-box.full-width {
	margin-top: 10px;
	width: 100%;
	box-sizing: border-box;
}

div.portax-box.full-width.mail,
div.portax-box.full-width.sms {
	padding: 0.8em;
	margin: 0 0 0.8em 0;
}

div.subtitle.rg-alerts,
div.subtitle.device-alerts,
div.subtitle:has(div.portax-box-error.CRIT) {
	position: sticky;
	top: 1em;
	z-index: 99;
}

div.portax-box-error {
	background-color: var(--bg-color-error);
	color: var(--primary-color);
	font-weight: bold;
	margin-left: 1em;
	margin-top: 0.4em;
	text-align: left;
}

div.portax-box-info-no-margin {
	margin-left: 0px !important;
}

div.portax-box-centered {
	margin-left: auto !important;
	margin-right: auto !important;
}

div.portax-box-info > ul {
	margin: 0;
	padding: 0 0 0 2em;
}

ul.legacyq:empty::before {
	content: attr(placeholder);
}

ul.legacyq,
ul.eventq {
	font-size: 12px;
	padding-left: 0;
	list-style-type: none;
	text-align: left;
	margin: 0 0 0.8em 0;
}

ul.legacyq:has(+ ul.legacyq) {
	margin: 0 0 0.2em 0;
}

ul.phonebook,
div.portax-box-info-list > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}

ul.eventq > li.event > span.id {
	display: none;
}

ul.eventq.debug > li.event > span.id {
	display: inline-block;
}

ul.legacyq > li.item > button.btn-bst-preview {
	display: none;
}

ul.legacyq > li.item.fail > span.progress {
	display: inline-block;
	padding: 0.1em 0.2em;
	margin-left: 0.2em;
	border-radius: 2px;
	color: var(--primary-color);
	background-color: var(--bg-color-error);
}

ul.legacyq > li.item.has-preview > button.btn-bst-preview {
	display: inline;
}

ul.legacyq > li.item,
ul.eventq > li.event {
	font-size: 12px;
}

ul.legacyq > li.item:before,
ul.eventq > li.event:before {
	font-family: "FontAwesome";
	font-style: normal;
	font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	display: inline-block;
	margin-right: 0.2em;
}

ul.legacyq > li.item.flash.stopped:before {
	transform: rotate(360deg);
	transition: transform 1s ease-out;
	-webkit-animation-fill-mode: forwards;
}

ul.legacyq > li.item.running:before,
ul.eventq > li.event.running:before {
	animation: spinme 1.5s infinite ease-in-out both;
	content: "\f1ce";
}

ul.legacyq > li.item.paused:before,
ul.eventq > li.event.paused:before {
	content: "\f017";
}

ul.legacyq > li.item.stopped:before,
ul.eventq > li.event.stopped:before {
	content: "\f058";
}

ul.legacyq > li.item > span.progress,
ul.eventq > li.event > span.id,
ul.eventq > li.event > span.progress {
	padding-left: 0.2em;
}

ul.legacyq > li.item > span.progress:empty,
ul.eventq > li > span.message:empty,
ul.eventq > li > span.progress:empty,
ul.eventq > li > span.id:empty,
ul.eventq > li > pre.output:empty {
	display: none;
}

ul.phonebook > li > span.click-to-copy {
	padding-left: 0.2em;
}

ul.portax-box-info,
div.portax-box-error.WARN,
div.portax-box-info {
	background-color: var(--bg-color-info);
	color: var(--tt-color);
	margin-left: 1em;
	margin-top: 4px;
	text-align: left;
}

div.portax-box-warning {
	margin-left: 1em;
	text-align: left;
}

div.portax-box-error.WARN,
div.portax-box-wide {
	margin-left: 0em;
}

div.subtitle > div.portax-box.portax-box-info {
	font-weight: normal;
}

div.portax-footer > div.portax-box {
	display: block;
	margin: 0.5em;
}

div.portax-footer.static {
	position: fixed;
	bottom: 0px;
	width: 100%;
	background-color: var(--bg-color);
	z-index: 90;
}

div.portax-header {
	display: block;
	height: 24px;
	line-height: 24px;
}

div.portax-header > div > a > span.header-tool-red {
	color: #DD2222;
}

div.portax-header > div > a > span.header-tool {
	padding: 0 0.5em;
}

.ajaxStatusContainer {
	float: left;
	padding: 0px;
	color: #CC0000;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5em;
	display: none;
}

.ajaxStatusContainer img {
	vertical-align: middle;
}

body, td, th {
	font-family: arial, sans-serif;
	font-size: 13px;
	white-space: nowrap;
}

form {
	margin-bottom: 0px;
}

form.inline {
	display: inline;
}

form.inline > input, form.inline > select {
	margin-right: 2px;
}

hr {
	width: 95%;
	border: 0;
	padding-bottom: 4px; border-bottom: 1px solid var(--secondary-bg-color);
}

hr.form-div {
	width: 100%;
	margin-top: 4px;
	margin-bottom: 2px;
	padding: 0px;
	border-bottom: 1px solid var(--border-2);
}

hr.table-footer {
	width: 100%;
	margin-top: 4px;
	margin-bottom: 2px;
	padding: 0px;
	border-bottom: 1px solid var(--elem-border);
}

span.link {
	cursor: pointer;
	color: var(--secondary-color);
	margin-right: 6px;
	font-weight: bold;
	text-decoration: none;
}

span.link-active {
	color: var(--primary-color);
}

span.closelink:hover {
	color:var(--bg-color-error);
}

select, input {
	margin-right: 5px;
}

input[type="submit"] {
	cursor: pointer;
	font-size: 90%;
}

input[type="button"] {
	cursor: pointer;
	font-size: 90%;
}

input[type="reset"] {
	font-size: 90%;
}

input[type="file"] {
	cursor: pointer;
	font-size: 90%;
}

img.graph {
	border:1px solid var(--secondary-bg-color);
}

a {
	color: var(--a-color);
	/* margin-right: 10px; */
	font-weight: normal;
	text-decoration: none;
}

a[portax-role="syslog-viewer"]:not(.syslog) {
	color: var(--primary-color);
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: var(--a-color);
}

a.link {
	font-weight: bold;
}

a.link:hover {
	text-decoration: none;
}

a.link-active {
	color: var(--primary-color);
}

a.white {
	color: white;
}

a.white:hover {
	color: white;
	text-decoration: underline;
}

h3 {
	clear:both;
	margin-bottom: 0.2em;
}

h4 {
	margin-bottom: 0.2em;
}

big {
	font-size: 1.5em;
}

small {
	font-size: 7pt;
}

/* classes */
.scroll {
overflow-y: auto;
overflow: -moz-scrollbars-vertical;
width: 130px;
height: 150px;
background: var(--bg-color);
border: 1px solid var(--secondary-bg-color);
text-align:left
}

.scroll label {
	cursor:pointer;
}

.scroll label:hover {
	cursor:pointer;
	font-weight:bold;
}

.ch {
	font-weight:bold;
	text-align: right;
}

td.property-element {
	min-width: 6em;
}

span.property {
	font-family: monospace;
	border-radius: 2px;
	color: var(--bg-color);
	min-width: 20em;
	vertical-align: middle;
	display: inline-block;
	background: var(--primary-color);
}

.ma {
	font-family: monospace;
	text-transform: uppercase;
}

#form {
	text-align: left;
}

div.columns > div {
	margin-right: 5px;
	float: left;
}

.title {
	float: none;
	text-align: left;
	margin-bottom: 5px;
	font-weight: bold;
	text-decoration: underline;
}

/* tables */

.rrplain > tbody > tr.portax-table-row.maintenance-pending,
.rrplain > tbody > tr.portax-table-row.maintenance-pending:hover {
	color: var(--bg-color-error);
}

tr.alert.disabled {
	color: var(--disabled-text);
}

tr.portax-table-row.WARN > td.message,
tr.warn.alert-pending > td.class,
tr.warn.alert-pending > td.level {
	color: #C9B215;
}

tr.portax-table-row.CRIT > td.message,
tr.crit.alert-pending > td.class,
tr.crit.alert-pending > td.level {
	color: var(--bg-color-error);
}

tr.flap.alert-pending > td.class,
tr.flap.alert-pending > td.level {
	color: #9D76F3;
}

tr.info.alert-pending > td.class,
tr.info.alert-pending > td.level {
	color: #24BC14;
}

tr.portax-table-row.DEBUG > td.message {
	color: var(--log-debug);
}

a.portax-element.alert.jstree-anchor:not(.WARN) ~ ul.jstree-children > li > a.portax-interface.jstree-anchor ~ ul.jstree-children > li > a.jstree-anchor.portax-subscriber:not(.disabled),
a.portax-element.alert.jstree-anchor:not(.WARN) ~ ul.jstree-children > li > a.portax-interface.jstree-anchor,
a.portax-element.alert.jstree-anchor:not(.WARN) {
	color: var(--bg-color-error);
}

a.portax-element.disabled.jstree-anchor + ul.jstree-children > li > a.jstree-anchor.portax-interface,
a.device-disabled.jstree-anchor + ul.jstree-children > li > a {
	color: #a0a0a0;
}

a.alert:after {
	content: "\f071";
	margin-left: 0.25em;
	font: normal normal normal 0.9em/1 FontAwesome !important;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

a.device-disabled.jstree-anchor {
	color: gray;
}

a.device-disabled:after {
	content: "\f54c";
	margin-left: 0.25em;
	font: normal normal normal 0.9em/1 FontAwesome !important;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

a.portax-subscriber.ott:after {
	color: var(--primary-color);
	margin-left: 4px;
	content: "\f26c";
	display: inline-block;
	font: normal normal normal 1em/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rr {
	border-spacing: 0px;
	border-collapse: collapse;
}

.rr tr {
background:#E8EEF7;
}

tr.triggered {
	/* border-left: 4px solid red; */
	background: var(--tr-triggered-bg);
}

tr.portax-table-row.portax-pullable.portax-pullable-pulled.primary + tr.pulled,
tr.portax-table-row.portax-pullable.portax-pullable-pulled.primary,
tr.primary {
	background: var(--secondary-bg-color);
}

tr.disabled,
tr.disabled > td a {
	background: initial;
	color: var(--disabled-text);
}

.disabled a {
	color: gray;
}

span.gray {
	color: gray;
}

.disabled td {
	color: #999;
}

.disabled:hover td {
	color: var(--blur-color);
}

.rr tr td {
text-align: left;
border-bottom: 1px solid var(--elem-border);
}

.rr tr:hover {
background:var(--bg-color);
}

.rr tr td:hover {
background:var(--bg-color);
}

.rr th {
text-align: left;
background: #E0ECFF;
height: 1.1em;
padding: 4px;
border-bottom: 1px solid var(--elem-border);
}

.rr td {
	padding: 4px;
	font-size:80%;
}

.rrplain {
	width: 100%;
	color: var(--primary-color);
	border-spacing: 0px;
	border-collapse: collapse;
}

table > tbody > tr > td.selectable,
table > thead > tr > th.selectable {
	display: none;
}

table.select-multiple-enabled > tbody > tr > td.selectable,
table.select-multiple-enabled > thead > tr > th.selectable {
	display: table-cell;
}

table {
	color: var(--primary-color);
}

.dark .leaflet-popup table {
	color: #000000;
}

.dark .leaflet-popup {
	color: #000000;
}

table.light-blue {
	border-radius: 4px;
	background-color: var(--table-bg-color);
}

.rrplain-fixed {
	table-layout: fixed;
}

.rrplain-fixed > tbody > tr > td {
	overflow: hidden;
}

.rrplain-tooltip {
	font-size: 10pt;
	color: var(--tt-color);
}

.rrplain > caption {
	color: var(--primary-color);
	background: var(--secondary-bg-color);
	font-weight: bold;
	font-size: 10pt;
	padding: 3px 1em;
	border-radius: 3px;
	white-space: nowrap;
	margin-bottom: 0.4em;
}

div#cables .rrplain > caption {
	text-align: left;
}

.rrplain-tooltip > caption {
	font-weight: bold;
	padding: 3px 1em;
	white-space: nowrap;
}

.rrplain.rrplain-center {
	margin-left: auto;
	margin-right: auto;
}

table.full-width {
	width: 100%;
	table-layout: fixed;
	margin-bottom: 1em;
}

table.full-width > tbody > tr {
	border-bottom: none;
}

.rrplain-simple-caption > caption {
	color: var(--primary-color);
	background-color: var(--bg-color);
	text-align: left;
	font-weight: bold;
}

.rrplain > tbody > tr > td > div.portax-uplink > input {
	margin: 0;
	padding: 0.2em;
}

.rrplain-clean > tbody > tr {
	border-bottom: none !important;
}

.rrplain-nest {
	table-layout: fixed;
}

.rrplain > tbody > tr {
	border-bottom: 1px solid var(--elem-border);
}

.rrplain > tbody > tr.empty-table-footer {
	font-weight: normal;
	border-bottom: hidden;
}

table.light-blue > tbody > tr {
	border-bottom: 1px solid var(--secondary-bg-color);
}

table.light-blue > tbody > tr.portax-table-row:hover {
	background: var(--secondary-bg-color);
}

table.light-blue > thead > tr > th {
	border-bottom: 1px solid var(--secondary-bg-color);
}

.rrplain > tbody > tr.portax-table-row:hover {
	background:var(--hover-bg);
	color:var(--primary-color);
}

.rrplain > tbody > tr.portax-table-row:hover ::selection {
	background: var(--bg-color);
}

.rrplain > thead > tr > th {
	text-align: left;
	height: 1.1em;
	padding: 4px;
	border-bottom: 1px solid var(--elem-border);
}

.rrplain > tfoot > tr > td {
	padding: 4px;
}

.rrplain > tfoot > tr.empty-table-footer {
	border-top: 1px solid var(--elem-border);
}

.rrplain > thead > tr.search,
.rrplain > tfoot > tr.search {
	display: none;
}

.rrplain > tfoot > tr > td > div > input.search.error,
.rrplain > thead > tr.search > th > input.search.error,
.rrplain > tfoot > tr.search > td > input.search.error {
	color: var(--bg-color-error);
}

.rrplain > tfoot > tr > td > div > input.search,
.rrplain > thead > tr.search > th > input.search,
.rrplain > tfoot > tr.search > td > input.search {
	padding: 2px;
	margin: 2px;
}

.rrplain > thead > tr.search.search-active,
.rrplain > tfoot > tr.search.search-active,
.rrplain > thead:hover > tr.search,
.rrplain > tfoot:hover > tr.search {
	display: table-row;
}

.rrplain > thead > tr > th > a:hover,
.rrplain > thead > tr > th > span > a:hover {
	text-decoration: none;
}

.rrplain > thead > tr > th > a,
.rrplain > thead > tr > th > span > a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
}

.rrplain-clean > tbody > tr > td {
	padding: 2px;
/*	font-size: 80%; */
/*	line-height: 18px; */
}

.rrplain > tbody > tr > td {
/*	padding: 4px; */
	padding: 0.3em;
	text-align: left;
	vertical-align: middle;
}

.rrplain > tbody > tr > td.grouped {
	vertical-align: top;
}

a.ma,
.rrplain > tbody > tr > td > a > span.ma,
.rrplain > tbody > tr > td span.ma {
	font-family: monospace;
	text-transform: uppercase;
}

.narrow {
	margin-left: 0.4em;
	margin-right: 0.4em;
}

.rrplain-top > tbody > tr > td {
	vertical-align: top;
}

.rrplain-wrap > tbody > tr > td {
	white-space: normal;
}

.rrplain-nowrap > tbody > tr > td {
	white-space: nowrap;
}

.rrplain > tbody > tr.portax-table-row > td > span.subscriber-name {
	white-space: normal;
}

.rrplain > tbody > tr > td.action-buttons {
	vertical-align: middle;
}

.rrplain > tbody > tr > td.action-buttons > span > button {
	max-width: 8em;
}

.rrplain > tbody > tr > td > ul {
	float: left;
	margin: 0;
	padding: 0;
}

.rrplain > tbody > tr > td > ul.tags > li {
	border-bottom: initial;
}

.rrplain > tbody > tr > td > ul.tags > li:hover {
	background: var(--primary-color);
}

.rrplain > tbody > tr > td > ul.array > li {
	list-style: none;
	border-bottom: 1px solid #bbb;
}

.c {
height:4px;
width:4px;
}
.bubble {
background-color:var(--secondary-bg-color);
}
.tl {
padding:0pt;
text-align:left;
vertical-align:top;
width:4px;
}
.tr {
padding:0pt;
text-align:right;
vertical-align:top;
width:4px;
}
.bl {
padding:0pt;
text-align:left;
vertical-align:bottom;
width:4px;
}
.br {
padding:0pt;
text-align:right;
vertical-align:bottom;
width:4px;
}
.form-noindent {
background-color:var(--bg-color);
border:1px solid var(--secondary-bg-color);
margin-bottom: 0.4em;
}
b.rnd {
background:var(--bg-color) none repeat scroll 0% 0%;
display:block;
font-size:1px;
}
b.rnd b {
display:block;
height:1px;
overflow:hidden;
}
.pr {
background:var(--bg-color-info) none repeat scroll 0% 0%;
}
b.rnd1 {
margin:0pt 1px;
}
b.rnd2 {
margin:0pt 1px;
}
.rno, .rno .rnd1, .rno .rnd2 {
background:var(--bg-color-info) none repeat scroll 0% 0%;
/* background:#74DD82 none repeat scroll 0% 0%; */
color:var(--primary-color);
}
.nm {
font-size:70%;
font-weight:bold;
padding:0pt 15px 1px;
}

.grno, .grno .rnd1, .grno .rnd2 {
background: #24BC14 none repeat scroll 0% 0%;
color: var(--primary-color);
}

.yrno, .yrno .rnd1, .yrno .rnd2 {
background:#C9B215 none repeat scroll 0% 0%;
color:var(--primary-color);
}

.rrno, .rrno .rnd1, .rrno .rnd2 {
background:var(--bg-color-error) none repeat scroll 0% 0%;
color:var(--primary-color);
}

/* color boxes */

.snr {
	width: 100px;
	color: var(--tt-color);
}

.snr div {
	padding: 1px;
	text-align: center;
	font-family: monospace;
}

.red {
	background: #EA644A;
	border: 1px solid var(--bg-color-error);
}

.round {
	border-radius: 5px;
}

.green {
	background: #54EC48;
	border: 1px solid #24BC14;
}

.yellow {
	background: #ECD748;
	border: 1px solid #C9B215;
}

.orange {
	background: #EC9D48;
	border: 1px solid #CC7016;
}

/* docsis */

.rg-status {
	min-width: 8rem;
	display: inline-block;
}

.rg-status > div.current-status.refreshed {
  background-image: radial-gradient(black 15%, transparent 20%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat;
}

.rg-status > div.current-status > time {
	display: none;
}

.rg-status > div.current-status > span.label {
	display: inline-block;
}

.rg-status > div.current-status {
	text-align: center;
	padding: 1px;
	margin: 1px;
	font-weight: normal;
	font-family: monospace;
	border-radius: 2px;
	box-sizing: border-box;
	position: relative;
}

.rg-status > div.current-status > span.flags {
	visibility: hidden;
	position: absolute;
	font: normal normal normal 1em/1 FontAwesome !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	z-index: 10;
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	text-align: right;
	color: orange;
	text-shadow: 0.5px 0.5px #000;
}

.rg-status > div.current-status.alertPending > span.flags::after {
	content: "\f071" !important;
}

.rg-status > div.current-status.alertPending > span.flags,
.rg-status > div.current-status.cam.status-value6.fallback > span.flags,
.rg-status > div.current-status.cam.status-value6.fallbackClearing > span.flags,
.rg-status > div.current-status.cam.status-value6.partialBonding > span.flags {
	visibility: visible;
}

.rg-status > div.current-status.cam.status-value6.fallbackClearing > span.flags,
.rg-status > div.current-status.cam.status-value6.fallback > span.flags {
	color: orange;
}

.rg-status > div.current-status.cam.status-value6.fallback.partialBonding > span.flags {
	color: var(--red);
}

.rg-status > div.current-status.cam.status-value6.fallbackPending > span.flags,
.rg-status > div.current-status.cam.status-value6.partialBonding > span.flags {
	color: silver;
}

.rg-status > div.current-status.cam.fallback > span.flags::after,
.rg-status > div.current-status.cam.fallbackClearing > span.flags::after,
.rg-status > div.current-status.cam.partialBonding > span.flags::after {
	content: "\e55d";
}

.rrplain > tbody > tr > td > div.status > div.if_status > span.label,
.rrplain > tbody > tr > td > .rg-status > div.current-status > span.label {
	padding: 1px;
}

.current-status.isk.status-value2 > span.label:after,
.current-status.lxt.status-value2 > span.label:after,
.current-status.z0g.status-value2 > span.label:after,
.current-status.z6g.status-value2 > span.label:after,
.current-status.z60.status-value2 > span.label:after,
.current-status.z70.status-value2 > span.label:after,
.current-status.z80.status-value2 > span.label:after,
.current-status.z01.status-value2 > span.label:after {
	content: 'offline';
}

.current-status.status-value1 > span.label:after {
	content: 'other';
}

.current-status.z0g.status-value2,
.current-status.z6g.status-value2,
.current-status.z60.status-value2,
.current-status.z70.status-value2,
.current-status.z80.status-value2,
.current-status.lxt.status-value2,
.current-status.isk.status-value2,
.current-status.z01.status-value2,
.current-status.eg8.status-value4,
.current-status.eg0.status-value4,
.current-status.ubl.status-value4,
.current-status.h4h.status-value4,
.current-status.h45.status-value4,
.current-status.h46.status-value4,
.current-status.z0g.status-value4,
.current-status.z6g.status-value4,
.current-status.z60.status-value4,
.current-status.z70.status-value4,
.current-status.z80.status-value4,
.current-status.lxt.status-value4,
.current-status.isk.status-value4,
.current-status.z01.status-value4,
.current-status.status-value1,
table.device-interfaces.element-down > tbody > tr.portax-table-row > td.oper_status > div.status > div.oper_status,
table.device-interfaces.element-down > tbody > tr.portax-table-row > td.admin_status > div.status > div.admin_status,
.current-status.other {
	background:var(--hover-bg);
	border: 1px solid #aaa;
	color: var(--primary-color);
}

.current-status.status-value2 > span.label:after {
	content: 'rng';
}

.current-status.status-value2,
.ranging {
	background:#48C4EC;
	border: 1px solid #1598C3;
	color: black;
}

.current-status.status-value3 > span.label:after {
	content: 'rngAborted';
}

.current-status.status-value3,
.rangingAborted {
	background:#EC9D48;
	border: 1px solid #CC7016;
	color: black;
}

.current-status.status-value4 > span.label:after {
	content: 'rngComplete';
}

.current-status.status-value4,
.rangingComplete {
	background:#ECD748;
	border: 1px solid #C9B215;
	color: black;
}

.current-status.status-value5 > span.label:after {
	content: 'ipComplete';
}

.current-status.status-value5,
.ipComplete {
	background:#ECD748;
	color:#000;
	border: 1px solid #C9B215;
}

.current-status.cam.status-value6 > span.label:after {
	content: "regComplete";
}

.current-status.cam.status-value8 > span.label:after {
	content: "operational";
}

.current-status.cam.status-value6.downstreamImpaired > span.label:after {
	content: "regComplete";
}

.current-status.z0g.status-value6,
.current-status.z6g.status-value6,
.current-status.z60.status-value6,
.current-status.z70.status-value6,
.current-status.z80.status-value6,
.current-status.isk.status-value6,
.current-status.z01.status-value6,
.current-status.lxt.status-value6,
.current-status.status-value6,
.current-status.status-value8,
.registrationComplete {
	background: #54EC48;
	border: 1px solid #24BC14;
	color: black;
}

.dark .current-status.status-value6,
.dark .current-status.status-value8,
.dark .registrationComplete {
	background: #039d30;
	border: 1px solid #04BC14;
}

.current-status.ead.status-value6 > span.label:after,
.current-status.fos.status-value6 > span.label:after,
.current-status.img.status-value6 > span.label:after,
.current-status.nic.status-value6 > span.label:after,
.current-status.spa.status-value6 > span.label:after,
.current-status.b2b.status-value6 > span.label:after,
.current-status.ppp.status-value6 > span.label:after,
.current-status.cpe.status-value6 > span.label:after,
.current-status.cpy.status-value6 > span.label:after,
.current-status.cmb.status-value6 > span.label:after,
.current-status.fwa.status-value6 > span.label:after,
.current-status.w6a.status-value6 > span.label:after,
.current-status.w6b.status-value6 > span.label:after,
.current-status.gke.status-value6 > span.label:after,
.current-status.hrg.status-value6 > span.label:after,
.current-status.mtg.status-value6 > span.label:after,
.current-status.mtc.status-value6 > span.label:after,
.current-status.ino.status-value6 > span.label:after,
.current-status.eg8.status-value6 > span.label:after,
.current-status.eg0.status-value6 > span.label:after,
.current-status.ubl.status-value6 > span.label:after,
.current-status.h4h.status-value6 > span.label:after,
.current-status.h45.status-value6 > span.label:after,
.current-status.h46.status-value6 > span.label:after,
.current-status.z0g.status-value6 > span.label:after,
.current-status.z6g.status-value6 > span.label:after,
.current-status.z60.status-value6 > span.label:after,
.current-status.z70.status-value6 > span.label:after,
.current-status.z80.status-value6 > span.label:after,
.current-status.z01.status-value6 > span.label:after,
.current-status.isk.status-value6 > span.label:after,
.current-status.lxt.status-value6 > span.label:after {
	content: 'online';
}

.current-status.eg8.status-value4 > span.label:after,
.current-status.eg0.status-value4 > span.label:after,
.current-status.ubl.status-value4 > span.label:after,
.current-status.h4h.status-value4 > span.label:after,
.current-status.h45.status-value4 > span.label:after,
.current-status.h46.status-value4 > span.label:after,
.current-status.z0g.status-value4 > span.label:after,
.current-status.z6g.status-value4 > span.label:after,
.current-status.z60.status-value4 > span.label:after,
.current-status.z70.status-value4 > span.label:after,
.current-status.z80.status-value4 > span.label:after,
.current-status.z01.status-value4 > span.label:after,
.current-status.isk.status-value4 > span.label:after,
.current-status.lxt.status-value4 > span.label:after {
	content: 'dyinggasp';
}

.current-status.z0g.status-value5 > span.label:after,
.current-status.z6g.status-value5 > span.label:after,
.current-status.z60.status-value5 > span.label:after,
.current-status.z70.status-value5 > span.label:after,
.current-status.z80.status-value5 > span.label:after,
.current-status.lxt.status-value5 > span.label:after,
.current-status.isk.status-value5 > span.label:after,
.current-status.z01.status-value5 > span.label:after {
	content: 'syncMib';
}

.current-status.eg8.status-value3 > span.label:after,
.current-status.eg0.status-value3 > span.label:after,
.current-status.ubl.status-value3 > span.label:after,
.current-status.h4h.status-value3 > span.label:after,
.current-status.h45.status-value3 > span.label:after,
.current-status.h46.status-value3 > span.label:after,
.current-status.z0g.status-value3 > span.label:after,
.current-status.z6g.status-value3 > span.label:after,
.current-status.z60.status-value3 > span.label:after,
.current-status.z70.status-value3 > span.label:after,
.current-status.z80.status-value3 > span.label:after,
.current-status.lxt.status-value3 > span.label:after,
.current-status.isk.status-value3 > span.label:after,
.current-status.z01.status-value3 > span.label:after {
	content: 'losi';
}

.current-status.z0g.status-value7 > span.label:after,
.current-status.z6g.status-value7 > span.label:after,
.current-status.z60.status-value7 > span.label:after,
.current-status.z70.status-value7 > span.label:after,
.current-status.z80.status-value7 > span.label:after,
.current-status.lxt.status-value7 > span.label:after,
.current-status.isk.status-value7 > span.label:after,
.current-status.z01.status-value7 > span.label:after {
	content: 'authFailed';
}

.current-status.ppp.status-value7 > span.label:after,
.current-status.cam.status-value7 > span.label:after {
	content: 'denied';
}

.current-status.eg8.status-value3,
.current-status.eg0.status-value3,
.current-status.ubl.status-value3,
.current-status.h4h.status-value3,
.current-status.h45.status-value3,
.current-status.h46.status-value3,
.current-status.z0g.status-value3,
.current-status.z6g.status-value3,
.current-status.z60.status-value3,
.current-status.z70.status-value3,
.current-status.z80.status-value3,
.current-status.lxt.status-value3,
.current-status.isk.status-value3,
.current-status.z01.status-value3 {
	background: #EA644A;
	border: 1px solid var(--bg-color-error);
}

.current-status.cam.status-value6.downstreamImpaired.upstreamImpaired {
}

.current-status.cam.status-value6.downstreamImpaired {
}

.current-status.cam.status-value6.upstreamImpaired {
}

/* modem access denied */
.current-status.z0g.status-value7,
.current-status.z6g.status-value7,
.current-status.z60.status-value7,
.current-status.z70.status-value7,
.current-status.z80.status-value7,
.current-status.lxt.status-value7,
.current-status.isk.status-value7,
.current-status.z01.status-value7,
.current-status.ppp.status-value7,
.current-status.cam.status-value7,
.accessDenied {
	background:#EA644A;
	border: 1px solid var(--bg-color-error);
	color: black;
}

/* port suspended */
.current-status.spa.status-value7 > span.label:after,
.current-status.nic.status-value7 > span.label:after {
	content: 'shutdown';
}

.current-status.spa.status-value7,
.current-status.nic.status-value7 {
	background: violet;
	border: 1px solid mediumorchid;
	color: black;
}

/* disabled */
.current-status.status-value0 > span.label:after {
	content: 'disabled';
}

.current-status.status-value0 {
	background: #EA644A;
	color: var(--tt-color);
	border: 1px solid var(--bg-color-error);
}

.current-status.status-value19 > span.label:after {
	content: 'regBPIWait';
}

.current-status.status-value19,
.registeredBPIWait {
	background: orange;
	border: 1px solid darkorange;
	color: black;
}

/* device statuses */
div.status {
	min-width: 8rem;
	display: inline-block;
}

div.status > div {
	display: block;
	text-align: center;
	padding: 1px;
	margin: 1px;
	border-radius: 2px;
	font-weight: normal;
	font-family: monospace;
	overflow: hidden;
}

.if_status {
	color: var(--tt-color);
}

div.status > div.if_status > span.label {
	display: inline-block;
}

div.status > .if_status.refreshing > span.label:after {
	font-family: "FontAwesome";
	font-style: normal;
	font-variant: normal;
  text-rendering: auto;
	font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	display: block;
	animation: spinme 1.5s infinite ease-in-out both;
	content: "\f1ce" !important;
	font-size: 13px;
	line-height: 1;
}

td.oper_status > div.status,
td.admin_status > div.status {
	display: block;
	max-width: 8rem;
}

/* ethernet */
.admin_status.admin_status1 > span.label:after {
	content: "up";
}

.oper_status.admin_status1.oper_status1 > span.label:after {
	content: attr(data-speed);
}

.admin_status.admin_status1,
.oper_status.oper_status1 {
	background:#54EC48;
	border: 1px solid #24BC14;
}

.oper_status.admin_status1.oper_status1.speed10mbps.halfDuplex > span.label:after {
	content: "10Mbps/half";
}

.oper_status.admin_status1.oper_status1.speed100mbps.halfDuplex > span.label:after {
	content: "100Mbps/half";
}

.oper_status.admin_status1.oper_status1.speed1Gbps.halfDuplex > span.label:after {
	content: "1Gbps/half";
}

.oper_status.admin_status1.oper_status1.halfDuplex {
	background: orange;
	border: 1px solid darkorange;
}

.oper_status.admin_status1.oper_status1.speed100mbps {
	background: mediumseagreen;
	border: 1px solid seagreen;
}

.oper_status.admin_status1.oper_status1.speed10mbps {
	background: #FFEA00;
	border: 1px solid #FDDA0D;
}

.oper_status.admin_status1.oper_status1.halfDuplex.speed10mbps,
.oper_status.admin_status1.oper_status1.halfDuplex.speed100mbps {
	background: orange;
	border: 1px solid darkorange;
}

.admin_status.admin_status2 > span.label:after,
.oper_status.admin_status2 > span.label:after,
.oper_status.oper_status2 > span.label:after {
	content: "down";
}

.admin_status.admin_status2,
.oper_status.oper_status2 {
	background:#EA644A;
	border: 1px solid var(--bg-color-error);
}

.admin_status.admin_status0 > span.label:after,
.oper_status.oper_status0 > span.label:after,
.oper_status.oper_status4 > span.label:after {
	content: "unknown";
}

.admin_status.admin_status0,
.oper_status.admin_status2,
.oper_status.oper_status0,
.oper_status.oper_status4 {
	background:var(--hover-bg);
	border: 1px solid #aaa;
	color: var(--primary-color);
}

.oper_status.oper_status7 > span.label:after {
	content: "lowerLayerDown";
}

.oper_status.oper_status7 {
	background: var(--hover-bg);
	border: 1px solid #aaa;
	color: var(--primary-color);
}

.oper_status.admin_status1.oper_status1.stp_status6 > span.label:after {
	content: "broken";
}

.oper_status.admin_status1.oper_status1.stp_status6 {
	background: var(--hover-bg);
	border: 1px solid #aaa;
	color: var(--primary-color);
}

.oper_status.admin_status1.oper_status2.stp_status0.sec_status1 > span.label:after,
.oper_status.admin_status1.oper_status7.stp_status6.sec_status1 > span.label:after {
	content: "shutdown";
}

.oper_status.admin_status1.oper_status2.stp_status0.sec_status1,
.oper_status.admin_status1.oper_status7.stp_status6.sec_status1 {
	background: violet;
	border: 1px solid mediumorchid;
	color: black;
}

/* subscriber */
.tdr {
	white-space: nowrap;
	width: 50%;
	vertical-align: middle;
	text-align: right;
	overflow: hidden;
}

.tdl {
	white-space: nowrap;
	width: 50%;
	text-align: left;
	font-weight: bold;
}

.tdl > span.profile-id {
	font-weight: normal;
}

.none {
	display:none;
}

.alphacube_title {
	font-weight: bold;
	text-align: left;
	border-bottom: 1px solid #C9D7F1;
	padding-bottom: 2px;
}

.boxInLoginBox {
	display: none;
	padding: 3px;
	position: absolute;
	border: 1px solid #C9D7F1;
	background-color: var(--bg-color);
}

.p-absolute {
	position: absolute;
}

.boxInLoginBox table {
	border: 0;
	margin: 0;
}

.boxInLoginBox th {
	font-size: 80%;
}

/* portax tree */

.ptli {
	list-style:square outside none;
	white-space:nowrap;
}

.ptlifp {
	cursor:pointer;
	padding-right:15px;
}

.ptlifp:after {
	padding-left: 0.4em;
	content: '\0f30b';
	color: var(--a-color);
	cursor: pointer;
	font: normal normal normal 1em/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ptlifp:hover:after,
.ptlifp:hover {
	color: var(--secondary-color);
}

.ptliep {
	cursor: pointer;
}

.ptlim {
	font-weight: thin;
	display: inline;
	color: silver;
}

.ptlid {
	font-weight: thin;
	font-size: 60%;
	color: silver;
}

a.ptlimi {
	cursor: pointer;
	margin-right: 2px;
}

a.ptlimi:link,a.ptlimi:visited {
	color: silver;
	text-decoration: none;
}

a.ptlimi:hover {
	text-decoration: none;
	color: var(--secondary-color);
}

.ptliq {
	background-color: var(--secondary-bg-color);
	border: 1px solid #1598C3;
	-moz-border-radius: 5px;
	padding: 2px;
	font-size: 90%;
}

.ptliq div {
	padding: 3px;
}

.ptliq h4 {
	margin: 2px 5px;
	padding: 0;
	text-align: center;
}

.ptliq div.uirselect_ak > label {
	margin-right: 1em;
}

.ptliq div.uirselect_ak {
	border-bottom: 1px solid #1598C3;
	margin-bottom: 2px;
}

.ptliq div.buttons {
	border-top: 1px solid #1598C3;
	margin-top: 2px;
	text-align: right;
}

.ptliq div.center {
	text-align: center;
}

.portax-region-edit input:invalid {
	border: 1px solid #FF0000;
}

.portax-region-edit div.message {
	color: #00D000;
	border: 1px solid #00D000;
	background-color: #DDFFDD;
	text-align: center;
	padding: 0.3em 1em;
	margin-bottom: 0.5em;
}

.portax-region-edit div.errorek {
	color: #FF0000;
	border: 1px solid #FF0000;
	background-color: #FFDDDD;
	text-align: center;
	padding: 0.3em 1em;
	margin-bottom: 0.5em;
}

.portax-region-edit div.devices_count {
	text-align: center;
	margin-bottom: 0.5em;
}

.ptliq a.menu {
	display: block;
	margin: 0px;
	padding: 2px 5px;
}

.ptliq a.menu:hover {
	color: var(--secondary-bg-color);
	background-color: #0066CC;
}

div.ptselect {
	z-index: 1000;
	position: absolute;
	display: none;
}

div.ptselect ul {
	padding-left: 20px;
	margin: 0px 0px 5px 0px;
}

div.ptselect > div > input[type=button] {
	vertical-align: initial;
}

/* end portax tree*/

div.dbBoxes {
	float: left;
	width: 120px;
	height: 60px;
	margin: 0px 5px 5px 0px;
	padding: 3px 10px;
	cursor: pointer;
	overflow: hidden;
	font-size: 80%;
}

div.dbBoxName {
	font-weight: bold;
	white-space: nowrap;
}

.roundbox {
	background-color: var(--secondary-bg-color);
	-moz-border-radius: 5px;
	padding: 2px;
}

.dbList tbody tr.dbAHeader {
	background-color: #CCCCCC;
	color: var(--primary-color);
}

.dbList tbody tr.dbADetail {
	background-color: #CCCCCC;
	cursor: default;
}

.dbAInfo tr, .dbAInfo tr:hover {
	vertical-align: top;
	background-color: transparent;
	cursor: default;
}

.greyMessage {
	color: #888888;
	font-size: 75%;
	font-weight: bolder;
}

div.dbAActions {
	margin-right: 5px;
	vertical-align: top;
	float: left;
}

div.dbAActions input, div.dbANote input {
	font-size: 0.9em;
	width: 100%;
}

div.dbANote  {
	float: left;
	font-size: 1em;
	min-height: 80px;
	min-width: 300px;
	border-left: 1px solid #1598C3;
}

div.dbANote:hover  {
	background-color: #abcdef;
}

div.dbANote textarea {
	font-size: 120%;
	color: var(--primary-color);
}

table.dbList {
	border-spacing: 0px;
	border-collapse: collapse;
}

table.dbList > tbody > tr {
	background:var(--bg-color);
	cursor:pointer;
	border-bottom: 1px solid var(--elem-border);
}

table.dbList > tbody > tr:hover {
	background:var(--hover-bg);
	color:var(--primary-color);
	cursor:pointer;
}

table.dbList > thead > tr.dbListingHeader > td {
	text-align: left;
	height: 1.1em;
	padding: 4px;
	border-bottom: double var(--elem-border);
	border-top: double var(--elem-border);
	font-weight: bolder;
}

table.dbList > tbody {
	border-bottom: double var(--elem-border);
}

table.dbList > thead > tr.dbListingHeader > td.dbLSort {
	cursor: pointer; 
}

/*table.dbList > thead > tr.dbListingHeader > td.filter {
	padding-left: +12px;
	background-image: url("/img/filter.png");
	background-position: left center;
	background-repeat: no-repeat;
}*/

table.dbList > tbody > tr > td {
	padding: 4px;
	font-size: 80%;
	text-align: left;
}

table.dbList > tbody > tr.marked {
	background-color: Wheat;
}

.dbLogArea > div {
	padding: 1px 3px;
	cursor: pointer;
	border-bottom: 1px solid var(--bg-color);
}

.log_info {
	background-color: var(--log-info);
}

.log_warn {
	background-color: var(--log-warn);
}

.log_log {
	background-color: var(--log-log);
}

.log_error {
	background-color: var(--log-error);
}

.log_debug {
	background-color: var(--log-debug);
}

.dbFH {
	text-align: center;
	border-bottom: 1px solid var(--primary-color);
}

div.dbListingFilter	{
	border-top: 1px solid #1598C3;
	margin-top: 4px;
	padding: 2px;
}

table.dbFilterCont > tbody > tr > td {
	vertical-align: top;
}

img.dbThrobber {
	display: none;
	margin-left: 0.2em;
	vertical-align: middle;
}

.dbDimmer {
	background-color: var(--primary-color);
	opacity: 0.3;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.dbHeader {
	margin-top: 5px;
	margin-bottom: 5px;
}

.dbHeader > input,select {
	margin: 0px 5px;
}

div.dbMap {
	width: 100%;
	height: 450px;
}

div.dbCont {
	position: relative;
}

svg.dbSvg {
	background-color: var(--bg-color);
	width: 100%;
	height: 100%;
}

text.dbDevIconAlert {
	font-size: 15px;
	font-weight: bold;
	text-anchor: end;
	stroke-width: 0;
}

text.dbDevTextBG {
	stroke: var(--bg-color);
	stroke-width: 5;
}

g.dbDevIcon:hover > rect.dbDevIconOL {
	stroke: #FF0000;
	stroke-width: 2;
}

g.dbDevIcon.dbSelected:hover > rect.dbDevIconOL {
	stroke: #FFFF00;
	stroke-width: 2;
}

g.dbDevIcon.dbSelected > rect.dbDevIconOL {
	stroke: #0000FF;
	stroke-width: 2;
}

g.dbDevIconWARN > text,
g.dbDevIconWARN > g.dbSvgDevAC > text,
g.dbDevIconWARN > g.dbSvgDevGoto > path {
	fill: #C9B215;
}

g.dbDevIconCRIT > text,
g.dbDevIconCRIT > g.dbSvgDevAC > text,
g.dbDevIconCRIT > g.dbSvgDevGoto > path {
	fill: var(--bg-color-error);
}

g.dbDevIconWARN > g.dbSvgDevAC:hover > text,
g.dbDevIconCRIT > g.dbSvgDevAC:hover > text,
g.dbDevIcon > g.dbSvgDevGoto:hover > path {
	stroke: #AAAAFF;
	fill: #0000FF;
}

path.dbDevPathBG {
	stroke: var(--bg-color);
	stroke-width: 3;
}

rect.dbSvgIconBg {
}

rect.dbDevIconOL {
	fill: transparent;
	fill-opacity: 0;
}

line.dbSvgLink {
	stroke: #444444;
}

line.dbSvgLink:hover {
	stroke: #FF0000;
	stroke-width: 3;
}

line.dbSvgLink.dbSelected:hover {
	stroke: #FFFF00;
	stroke-width: 3;
}

line.dbSvgLink.dbSelected {
	stroke: #0000FF;
	stroke-width: 3;
}

g.dbSvgTbBg {
	opacity: 0;
}

rect.dbSvgTbTg {
	stroke: none;
	fill: transparent;
	fill-opacity: 0;
}

rect.dbSvgTbBgBg {
	stroke: #1598C3;
	stroke-width: 1px;
	fill: #F0F0F0;
	shape-rendering: crispEdges;
}

g.dbSvgTbb {
	stroke: none;
	fill: transparent;
	fill-opacity: 0;
	cursor: pointer;
}

g.dbSvgTbb .dbSvgTbb {
	stroke: #1598C3;
	stroke-width: 1px;
	/*
	shape-rendering: crispEdges;
	*/
}

g.dbSvgTbb:hover .dbSvgTbb {
	stroke: #1598C3;
	fill: #888888;
	fill-opacity: 1;
}

g.dbSvgTbb.dbSelected .dbSvgTbb {
	fill: #1598C3;
	fill-opacity: 1;
	stroke: #1598C3;
}

g.dbSvgTbSp {
	fill: #1598C3;
	stroke: #1598C3;
	shape-rendering: crispEdges;
}

rect.dbSvgDim {
	opacity: 0.5;
}

rect.dbSvgVoid {
	fill: transparent;
	fill-opacity: 0;
	stroke: #1598C3;
	stroke-width: 1px; 
}

.dbSvgHide {
	display: none;
}

path.dbSvgMbg {
	stroke-width: 1px;
	fill: #F0F0F0;
	stroke: #1598C3;
}

g.dbSvgMb {
	cursor: pointer;
}

g.dbSvgMb rect.dbSvgMb {
	stroke-width: 1px;
	fill: #C0C0C0;
	stroke: #1598C3;
}

g.dbSvgMb:hover rect.dbSvgMb {
	fill: #A0A0A0;
	stroke: #FF0000;
}

text.dbSvgMt {
	font-size: 15px;
	text-anchor: middle;
}

div.dbSvgHtml {
	position: absolute;
	top: 7px;
	left: 6px;
	border: 1px solid #1598C3;
	background-color: #F0F0F0;
	padding: 3px;
}

.dbHide {
	display: none;
}

div.dbSvgHtml > span.dbDevSearchTitle {
	margin: 3px;
	vertical-align: middle;
	font-size: 15px;
	font-weight: bold;
}

div.dbSvgHtml > div.dbDevResult {
	margin: 2px;
	padding: 0;
	border-top: 1px solid #1598C3;
}

div.dbDevResult > div {
	margin: 1px 0px 0px 0px;
	padding: 2px;
	font-size: 10px;
	font-weight: normal;
	font-family: monospace;
	color: var(--primary-color);
	background-color: var(--bg-color);
	cursor: pointer;
}

div.dbDevResult > div.dbDevHint {
	color: #606060;
	background-color: #C0C0C0;
	cursor: default;
}

div.dbDevResult > div.dbDevSelected {
	font-weight: bolder;
	background-color: #C0C0C0;
}

div.dbDevResult > div:hover {
	background-color: #C0C0C0;
}

div.dbDevResult > div > div.dbDevSerchCol {
	float: right;
	margin-left: 1.5em;
}

div.dbSvgHelp {
	text-align: center;
}

div.dbSvgHelp > h4 {
	padding: 0;
	margin: 0;
}


div.dbSvgEDev {
	text-align: center;
}

div.dbSvgEDev > h4 {
	padding: 5px;
	margin: 0;
}

div.dbSvgEDev span.dbSvgTNav {
	cursor: pointer;
	font-weight: bold;
}

div.dbSvgEDev span.dbSvgTNav:hover {
	color: #FF0000;
}

.pointer {
	cursor: pointer;
}

.filter {
	line-height: 24px;
	display: inline-block;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	font-size: 80%;
	padding-left: 4px;
	padding-right: 4px;
	margin-right: 5px;
	margin-bottom: 2px;
	color: var(--tt-color);
	background: var(--bg-color-info);
}

.filter > a {
	color: var(--tt-color);
}

span.portax-remove-filter {
	color: var(--tt-color);
	position: relative;
	top: -1px;
	vertical-align: middle;
	cursor: pointer;
	display: inline-block;
}

.realtime-mrtg {
	cursor: pointer;
	border: 2px solid white;
	margin: 4px;
}

.realtime-mrtg.running-border {
	border: 2px solid lightgreen;
}

.no-titlebar .ui-dialog-titlebar {
	display:none
}

.ui-menu {
	position: absolute;
}

.ui-widget.ui-widget-content, .ui-widget-content {
	color: var(--primary-color);
	background: var(--bg-color);
	border: 1px solid var(--border-2);
}

.ui-widget-content .ui-menu-item a {
	color: var(--primary-color);
}

.ui-widget-content .ui-menu-item a:hover {
	text-decoration: none;
}

.ui-widget {
	font-size: 13px;
	font-family: arial, sans-serif;
}

.ui-widget input, input[type=text], input[type=password], input[type=search] {
	font-size: 1em;
	padding: 2px;
	font-family: arial, sans-serif;
	border: 1px solid var(--elem-border);
	border-radius: 3px;
	color: var(--primary-color);
	background-color: var(--input-background-text);
}

.ui-widget textarea {
	font-size: 1em;
	font-family: arial, sans-serif;
	resize: none;
}

.ui-widget select, select.portax-ui, select {
	font-family: arial, sans-serif;
	margin: 2 0 2 0;
	font-size: 1em;
	border: 1px solid;
	border-color: var(--border-3d);
	border-radius: 3px;
	-webkit-appearance: none;
	background-color: var(--input-background);
	color: var(--primary-color);
	background-image: none;
	padding: 2 8 2 8;
	-moz-appearance: none;
	appearance: none;
}

button:disabled, select:disabled {
	opacity: 0.5;
}

.ui-dialog {
	-webkit-box-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
}

.ui-dialog .ui-dialog-buttonpane {
	border: 0;
}

.portax-dialog .ui-button:focus, .ui-dialog .ui-dialog-buttonpane button:focus, .ui-widget button:focus, button.ui-button:focus, input[type=button]:focus, input[type=submit]:focus, input[type="reset"]:focus, button:focus {
	outline: none;
}

.portax-dialog .ui-button:active, .ui-dialog .ui-dialog-buttonpane button:active, .ui-widget button:active, button.ui-button:active, input[type=button]:active, input[type=submit]:active, input[type="reset"]:active, button:active, a.button:active {
	background-color: var(--input-active);
	border: 1px solid var(--input-active);
	color: var(--bg-color);
}

a.button {
	display: inline-block;
}

.ui-widget-content .ui-button, .portax-dialog .ui-button, .ui-dialog .ui-dialog-buttonpane button, .ui-widget button, button.ui-button, input[type=button], input[type=submit], input[type="reset"], button, a.button {
	cursor: pointer;
	font-size: 1em;
	padding: 2 4 2 4;
	margin-left: 2px;
	font-family: arial, sans-serif;
	border: 1px solid;
	border-radius: 3px;
	color: var(--primary-color);
	background-image: none;
	border-color: var(--border-3d);
	background-color: var(--input-background);
	text-decoration: none;
	-webkit-appearance: none;
}

input[type="button"].groupedLeft {
	margin-right: 0;
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

input[type="button"].groupedRight {
	margin-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.portax-metadata-store > p > label {
	display: inline-block;
}

.portax-metadata-store > p > label > select.add-meta-preset {
	width: initial;
	padding: 2px !important;
}

.portax-dialog.ui-dialog-buttons > div.ui-dialog-buttonpane > div > button {
	padding: 0.4em;
	vertical-align: top;
}

.ui-widget-content a {
	color: var(--a-color);
}

.ui-widget-content a:hover {
	text-decoration: underline;
}

.alignRight { text-align: right !important; }
.alignLeft { text-align: left !important; }
.alignCenter { text-align: center !important; }

td.alignRight.selectable {
	vertical-align: middle;
}

.portax-dialog {
  padding: 0.4em;
}

.portax-dialog input.text {
  padding: .4em;
	margin: 0;
	width: 100%;
/*	max-width: 20em; */
/*	margin-left: 2px; */
}

.portax-if-template > input.portax-template-selector {
	padding: 0.2em;
}

.portax-if-template > a.portax-clear-template:hover {
	text-decoration: none;
}

.portax-if-template > a.portax-clear-template > span.fas,
.portax-if-template > a.portax-clear-template,
.portax-if-template > a.portax-template-link {
	display: none;
}

.portax-if-template.has-template > a.portax-clear-template > span.fas,
.portax-if-template.has-template > a.portax-clear-template,
.portax-if-template.has-template > a.portax-template-link {
	display: inline;
}

.portax-uplink > input.portax-interface-selector {
	display: inline;
}

.portax-uplink.has-downlinks > input.portax-interface-selector,
.portax-uplink.has-uplink > input.portax-interface-selector {
	display: none;
}

.portax-if-template > input.portax-template-selector {
	display: inline;
}

.portax-if-template.has-template > input.portax-template-selector {
	display: none;
}

.portax-dialog input.text-lg {
	font-size: 0.8rem;
}

.portax-dialog input.text.datepicker {
	max-width: 10em;
}

.portax-dialog input.text.long {
	max-width: 40em;
}

.portax-dialog input.text.medium {
	max-width: 30em;
}

.portax-dialog input.longtext {
  margin-bottom: 12px; padding: .4em;
	width: 100%;
}

.portax-dialog input.checkbox {
  padding: .4em;
	vertical-align: bottom;
}

.portax-dialog fieldset {
  padding: 0; border: 0;
	margin-left: 0;
}

.portax-dialog textarea.description {
	margin-bottom: 12px;
	height: 5em;
}

.portax-dialog textarea.template {
	font-family: monospace;
	resize: none;
/*	font-size: 1.1em; */
	margin-left: 0; margin-bottom: 12px;
/*	width: 95%; */
}

textarea.template.template-default, textarea.template ~ div.hidden {
	color: red;
}

textarea.template.readonly {
	color: gray;
}

.dark textarea.template-default, .dark textarea.template ~ div.hidden {
	color: lightcoral;
}

textarea.template.default ~ div.hidden {
	display: block;
}

.portax-dialog label {
	font-weight: bold;
}

.portax-dialog label.block {
  display: block;
}

.portax-dialog label.block > button {
  display: block;
}

.portax-dialog label.pager.lite {
	margin-top: 0;
	margin-bottom: 0;
}

.portax-dialog label.checkbox {
	font-weight: normal;
	white-space: normal;
	margin-bottom: 0.4em;
}

.portax-dialog label.lite {
	font-weight: normal;
	vertical-align: middle;
}

.portax-dialog select {
  display: block;
/*  margin-top: 2px; */
  margin-left: 0px;
  margin-right: 0px;
/*  padding: .4em; */
	width: 100%;
/*	max-width: 20em; */
/*	vertical-align: middle; */
}

.portax-dialog input {
  vertical-align: middle;
	font-size: 1em;
/*  padding: .4em; */
}

.error {
	background:#EA644A;
	border: 1px solid var(--bg-color-error);
}

span.alert {
  background-image: url(/img/tree/exc.png);
  width: 16px;
  height: 16px;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: top;
  content: "alert";
}

.loading {
	background: url('/img/throbber.gif') no-repeat !important;
	background-position: center !important; 
}

span.ajax-loading {
	background: url('/img/loader.gif') no-repeat !important;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	display: inline-block;
}

div.refreshable {
	position: relative;
}

div.refreshable.loader > div.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  background: var(--bg-color);
	opacity: 0.7;
	z-index: 1000;
}

div.refreshable > div.loader {
	position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
	z-index: 999999;
	display: none;
	text-shadow: 0px 0px 4px var(--bg-color);
}

div.refreshable > div > button.refresh-device {
	visibility: visible;
}

div.refreshable.loader > div > .refresh-device {
	visibility: hidden;
}

div.refreshable.loader > div.loader {
	display: block;
}

div.refreshable.loader > div.loader > span.prepSpinner {
  font-size: 4em;
}

div.prepSpinner.event-pending > span {
	padding: 0.2em;
}

.no-close .ui-dialog-titlebar-close { display: none }

.no-title .ui-dialog-titlebar { display: none }

.confirm .ui-dialog-titlebar {
	border: none;
	background-color: initial;
}

.portax-hide { visibility: hidden }
.portax-hide.ui-widget { visibility: visible; }

.subcontent {
	padding-left: 2em;
	padding-right: 2em;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.scrollable {
	overflow-y: auto; overflow: -moz-scrollbars-vertical; height: 90% !important;
}

#filters { margin-top: 6px; margin-bottom: 4px; }

table.datatable {
	border-spacing: 0px;
	border-collapse: collapse;
}

table.datatable thead th {
	border-bottom: 1px solid var( --elem-border);
}

table.datatable tfoot th {
	border-top: 1px solid var( --elem-border);
}

table.dataTable td {
	padding: 2px 5px;
}

table.datatable tbody tr.odd, table.datatable tbody tr.even {
	border-bottom: 1px solid var(--elem-border);
}

table.datatable tr.odd,
table.datatable tr.even td.sorting_1 {
	background-color: var(--bg-color);
}

table.datatable tr.even,
table.datatable tr.odd td.sorting_1 {
	background-color: var( --bg-color);
}

table.datatable tr.odd:hover,
table.datatable tr.even:hover td.sorting_1 {
	background-color:var(--hover-bg);
}

table.datatable tr.even:hover {
	background-color:var(--hover-bg);
}

table.datatable tr.odd:hover td.sorting_1 {
	background-color:var(--hover-bg);
}

table.datatable tr:hover td:hover,
table.datatable tr:hover td.sorting_1:hover {
	background-color:var(--hover-bg);
}

.portax-hide {
	visibility: hidden;
}

.portax-hide.ui-widget,
.portax-hide.ui-widget-content {
	visibility: visible;
}

[portax-provide] {
	cursor: pointer;
}

table.portax-ip-detail {
	width: 100%;
	border-collapse: collapse;
}

table.portax-ip-detail > tbody > tr:not(.portax-ip-subnets) > td {
	cursor: pointer;
}

table.portax-ip-detail,
table.portax-ip-detail > thead > tr > th {
	border-bottom: 1px solid var(--primary-color);
}

table.portax-ip-detail > tbody > tr {
	border-bottom: 1px solid var(--elem-border);
}

table.portax-ip-detail > thead > tr > th,
table.portax-ip-detail > tbody > tr > td {
	padding-right: 2em;
}

table > thead > tr > th > button.toggle-select-multiple {
	display: none;
}

table.selectable > thead > tr > th:nth-of-type(2) > button.toggle-select-multiple {
	display: initial;
}

table.portax-ip-detail > thead > tr > th:last-child,
table.portax-ip-detail > tbody > tr > td:last-child {
	padding-right: 0;
}

table.portax-ip-detail > tbody > tr.portax-ip-notfound > td {
	color: #FF0000;
	font-weight: bold;
}

table.portax-ip-detail > tbody > tr:hover > td {
	background-color: var(--secondary-bg-color) !important;
}

table.portax-ip-detail > tbody > tr > td.portax-ip-cidr.child-loading {
	background-image: url('/img/throbber-bb.gif');
	background-repeat: no-repeat;
	background-position-x: 95%;
}

table.portax-ip-detail > tbody > tr > td.portax-ip-cidr:hover {
	background-color: var(--cidr-hover) !important;
}

table.portax-ip-detail > tbody > tr.portax-ip-subnets:hover > td {
	background-color: var(--bg-color) !important;
}

table.portax-ip-detail > tbody > tr.portax-ip-selected > td {
	font-weight: bold;
}

table.portax-ip-detail > tbody > tr > td.portax-ip-inherited {
	color: #AAAAAA;
	font-style: italic;
}

table.portax-ip-detail > tbody > tr.portax-ip-splited:not(.portax-ip-alive):not(.portax-ip-reserved) > td {
	background-color: var(--cidr-free);
}

table.portax-ip-detail > tbody > tr.portax-ip-splited.portax-ip-alive:not(.portax-ip-virtual):not(.portax-ip-has-class) > td,
table.portax-ip-detail > tbody > tr.portax-ip-splited.portax-ip-reserved:not(.portax-ip-virtual):not(.portax-ip-has-class) > td {
	background-color: var( --cidr-used);
}

table.portax-ip-detail > tbody > tr.portax-ip-splited.portax-ip-stale:not(.portax-ip-reserved) > td {
	color: #CC3333;
}

table.portax-ip-detail > tbody > tr.portax-ip-virtual.portax-ip-splited.portax-ip-alive > td,
table.portax-ip-detail > tbody > tr.portax-ip-virtual.portax-ip.splited.portax-ip-reserved > td {
	background-color: var(--bg-color);
}

table.portax-ip-detail > tbody > tr.portax-ip-virtual.portax-ip-splited:not(.portax-ip-alive):not(.portax-ip-reserved) > td {
	background-color: var( --cidr-split);
}

table.portax-ip-detail div.portax-ip-box {
	border: 1px solid var(--primary-color);
	margin: 3px;
	padding: 3px;
	border-radius: 4px;
}

table#as-dt > tbody > tr {
	cursor: pointer;
}

form#portax-ip-as-edit textarea {
	width: 100%;
}

form#portax-ip-cidr-edit textarea {
	width: 100%;
}

form#portax-ip-cidr-edit div.portax-cidr-wrap {
	float: left;
}

form#portax-ip-cidr-edit div.portax-as-wrap {
	float: right;
}

form#portax-ip-cidr-edit div.portax-as-wrap select {
	height: 10em;
}

form#portax-ip-cidr-edit div.portax-note-wrap {
	clear: both;
}

tr[portax-ip-cidr] {
	cursor: pointer;
}

div#portax-ip-tabs div.dataTables_wrapper > div.clear {
	clear: both;
}

div#portax-ip-tabs div.dataTables_paginate,
div#portax-ip-tabs div.dataTables_info {
	float: left;
	clear: none;
	margin-right: 2em;
	line-height: 1.8em;
}

div#portax-ip-tabs div.dataTables_length {
	float: right;
	clear: none;
	margin-left: 2em;
	line-height: 1.8em;
}

.ui-button-text-only .ui-button-text {
	padding: 2;
}

.ui-dialog-titlebar > .ui-button {
	outline: none;
}

.ui-tabs-nav .ui-state-focus a {
	outline: none;
}

.ui-tabs-nav li.ui-state-default {
	border-color: var(--border-2);
	background: var(--bg-color);
}

.ui-tabs .ui-tabs-panel {
	overflow: hidden;
}

.portax-ui-tabs .ui-tabs-nav .ui-tabs-anchor, .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	font-weight: bold;
	padding: 0.4em 0.8em;
	font-size: 0.9em;
}

.ui-widget-header {
	background: var(--bg-color-2);
	color: var(--primary-color);
	border: 1px solid var(--border-2);
}

.portax-ui-tabs-simple .ui-widget-header {
	background: var(--bg-color-2);
}

.ui-state-active .ui-button-text {
	color: var(--hilite-color);
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: var(--primary-color);
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
	color: var(--blur-color);
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: var(--primary-color);
}

.ui-datepicker-calendar a.ui-state-default {
	border: 1px solid var(--elem-border);
	background: var(--bg-color);
	color: var(--primary-color);
}

.ui-menu-item-wrapper.ui-state-active,
.ui-datepicker-calendar a.ui-state-default.ui-state-active {
	border: 1px solid var(--border-2);
	background: var(--secondary-bg-color);
	color: var(--primary-color);
}

.portax-port {
	position: relative;
	font-size: 1.2em;
	background-color: var(--bg-color-2);
	border: 1px solid var(--border-2);
	margin: 4px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently not supported */
}

.portax-port.link-up > div.port-speed {
	font-size: 0.8em;
}

.portax-port.link-up.speed10M > div.port-speed:after {
	content: '10Mbps';
}

.portax-port.link-up.speed100M > div.port-speed:after {
	content: '100Mbps';
}

.portax-port.link-up.speed1G > div.port-speed:after {
	content: '1Gbps';
}

.portax-port.link-up.speedAuto > div.port-speed:after {
	content: 'auto';
}

.portax-port.link-up {
	background:#54EC48;
	border: 1px solid #24BC14;
}

.dark .portax-port.rf,
.portax-port.rf {
	border-color: grey;
	background: darkgrey;
}

.portax-port.link-up.speed10M {
	background: DarkSeaGreen;
	border: 1px solid #729c84;
}

.portax-port.link-up.speed100M {
	background: mediumseagreen;
}

.dark .portax-port.link-down {
	border-color: grey;
	background: darkgrey;
}

.portax-port.enabled {
	background: lightskyblue;
	border-color: deepskyblue;
}

.dark .portax-port.enabled.invalid,
.portax-port.enabled.invalid {
	background:#EA644A;
	border: 1px solid var(--bg-color-error);
}

ul.portax-rg-ports > li > span.portax-port.wifi:before {
	content: "\f1eb";
	font: normal normal normal 1em/1 FontAwesome !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	bottom: 3;
	right: 3;
	z-index: 5;
}

ul.portax-rg-ports > li > span.portax-port.voip:before {
	content: "\f095";
	font: normal normal normal 1em/1 FontAwesome !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	bottom: 3;
	right: 3;
	z-index: 5;
}

.dark .portax-port.enabled {
	background: dodgerblue;
	border-color: darkblue;
}

.portax-port.full-duplex {
	background: lightgreen;
}

.dark .portax-port.full-duplex {
	background: green;
}

.portax-port.link-up.Half\/Auto,
.portax-port.link-up.Half {
	background: darkorange;
	border-color: tomato;
}

.portax-port.unknown {
	color: grey;
}

.dark .portax-port.link-up.Half {
	background: darkorange;
	border-color: tomato;
}

.portax-port > div.port-speed {
}

.portax-port {
	font-family: monospace;
}

.portax-port > div.port-descr::empty {
	display: none;
}

.portax-port > div.port-label::empty {
	display: none;
}

.portax-port > div.port-label {
	font-size: 0.6em;
}

.portax-port > div.port-mode {
	visibility: hidden;
	font-size: x-small;
}

.portax-port.port-mode1.link-up > div.port-mode,
.portax-port.port-mode5.link-up > div.port-mode {
	visibility: visible;
	border: 1px solid var(--bg-color);
	color: var(--primary-color);
	background: var(--bg-color);
	border-radius: 2px;
}

.portax-port.port-mode5 > div.port-mode::after {
	content: 'router';
}

.portax-port.port-mode1 > div.port-mode::after {
	content: 'bridge';
}

table.tooltiptable {
	font-size: 100%;
	padding: 0;
	margin: 0;
	color: var(--tt-color);
}

table.tooltiptable td.header {
	text-align: right;
	padding-right: 0.5em;
}

a.portax-popup {
	cursor: pointer;
}

a.disabled {
	color: gray;
}

tr.portax-popup {
	cursor: pointer;
}

tr.portax-pullable {
	cursor: pointer;
}

.rrplain > tbody > tr.portax-pullable-pulled {
	border-bottom-color: var(--bg-color);
}

tr.portax-clickable {
	cursor: pointer;
}

tr.portax-trigger-manager {
	cursor: pointer;
}

input.editor {
	font-family: arial, sans-serif;
	padding: 2;
	margin: 2;
}

.grouped > input.editor {
	margin: initial;
	padding: 0.2em;
}

select.editor {
	font-family: arial, sans-serif;
	padding: 2 !important;
	margin: 2 !important;
}

a.portax-pager-ctl-active {
	color: var(--a-color-active) !important;
}

.editor-active {
	background: var(--secondary-bg-color);
	border: 1px solid var(--secondary-color);
}

button.btn-modify-template {
	margin-bottom: 4px;
	width: 480px;
}

.portax-box > span.portax-input-button,
#selreg > span.portax-input-button {
	margin: 0 0.4em 0 0.4em;
}

span.portax-input-button {
	display: inline-flex;
	flex-direction: row;
	border: none;
}

span.portax-input-button > input.text {
	border: 1px solid var(--elem-border);
	margin: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

span.portax-input-button.portax-input-button-right > input.text {
	border: 1px solid var(--elem-border);
	margin: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

span.portax-input-button > input.text:focus {
	outline: none;
}

span.portax-input-button > button {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin: 0;
	width: 26px;
	text-align: center;
}

span.portax-input-button.portax-input-button-right > button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	margin: 0;
	width: 26px;
	text-align: center;
}

div#portax-if-action-error {
	color: #FF0000;
	font-style: italic;
	font-weight: bolder;
}

select.portax-ui {
/*	height: 25px; */
/*	line-height: 25px; */
	display: inline-block;
	padding: 5px !important;
/*	margin-right: 5px !important; */
	margin: 0;
/*	margin-left: 2px; */
}

select.portax-ui.short {
	max-width: 8em;
}

select.portax-ui-tall {
	height: initial;
	border-radius: 4px;
	max-width: initial;
}

.ui-menu { position: absolute }

.jstree-node > .jstree-anchor > .jstree-icon {
	margin: 0.1em;
	vertical-align: baseline;
}

.fas-play:before {
	content: "\f04b";
}

.fas-info:before {
	content: "\f05a";
}

.fas-alert:before {
	content: "\f071";
}

.fas-user:before {
	content: "\f007";
}

.fas-wifi:before {
	content: "\f1eb";
}

.fas-unlink:before {
	content: "\f127";
	color: var(--bg-color-error);
}

.jstree-default-portax-properties .jstree-node > .jstree-anchor.jstree-search {
	font-weight:normal;
}

.jstree-default-small .jstree-node {
	color: var(--primary-color);
}

.jstree-node > .jstree-anchor > span.value {
	display: none;
}

.jstree-node > .jstree-anchor.jstree-search {
	font-style: normal;
	margin: 1px;
	min-width: 32em;
	background: var(--a-color);
	padding: 0 0.4em 0 0.4em;
	color: var(--bg-color);
	border-radius: 2px;
}

.jstree-node > .jstree-anchor.jstree-search > span.value {
	display: inline;
	margin-left: 1em;
	float: right;
}

.fas-ethernet:before {
	content: "\f796";
}

.fas-pon:before {
	content: "\f6ff";
}

.fas-switch:before {
	content: "\f6ff";
}

.fas-router:before {
	content: "\f1c0";
}

.fas-hub:before {
	content: "\f6ff";
}

.fas-nas:before {
	content: "\f233";
}

.fas-wave:before {
	content: "\f83e";
}

.jstree-default .jstree-anchor {
	transition: none;
	text-decoration: none;
	color: var(--a-color);
	background: none;
}

a.jstree-anchor.portax-popup.disabled:not(.alert) {
	color: #a0a0a0;
}

a.jstree-anchor.portax-popup-disabled {
	color: var(--primary-color);
	cursor: default;
	text-decoration: none;
}

a.jstree-anchor.portax-popup-disabled:hover {
	text-decoration: none;
}

.jstree-default .jstree-clicked {
	box-shadow: none;
}

.jstree-default .jstree-hovered {
	box-shadow: none;
}

.jstree-default .jstree-anchor:hover {
	text-decoration: underline;
}

.wrap {
	white-space: normal;
}

.pre-wrap {
	white-space: pre-wrap;
	word-wrap: anywhere;
}

span.nowrap {
	white-space: nowrap;
}

tr.portax-table-row > td > a.portax-trigger-manager {
	visibility: hidden;
}

tr.portax-table-row > td > span > a.portax-trigger-manager {
	visibility: hidden;
}

tr.portax-table-row > td > a.trigger-enabled {
	visibility: visible;
}

tr.portax-table-row > td > span > a.trigger-enabled {
	visibility: visible;
}

tr.portax-table-row > td:hover > a.portax-trigger-manager {
	visibility: visible;
}

tr.portax-table-row > td > span:hover > a.portax-trigger-manager {
	visibility: visible;
}

table.snmp-data {
	width: 100%;
	margin-bottom: 10px;
}

table.snmp-data > caption {
	font-size: 90%;
	text-align: left;
}

table.snmp-data > thead > tr > th.hidden,
table.snmp-data > tbody > tr > td.hidden,
table.snmp-data > thead > tr > th > span.removed,
table.snmp-data > tbody > tr > td > span.removed {
	display: none;
}

div.subtitle {
	width: 100%;
	text-align: center;
	font-weight: bold;
	margin-bottom: 0.4em;
}

div.subtitle-narrow {
	margin: 0 auto;
	width: 50%;
}

div.subtitle > div.portax-box {
	display: block;
	margin-bottom: 0px;
	border-radius: 4px;
}

div#display > div.subtitle > div.portax-box {
	display: none;
}

div#display > div.subtitle > div.portax-box:has(span:not(:empty)) {
	display: block;
}

div#display > div.results > div.portax-box {
	display: none;
}

div#display > div.results:has(> div.portax-box > ul > li) {
	padding: 0.8em;
}

div#display > div.results > div.portax-box:has(> ul > li) {
	display: block;
}

div#display > div.subtitle > div.portax-box {
	border-radius: 4px 4px 0px 0px;
}

div#display > pre.portax-ldif:empty {
	display: none;
}

div#display > pre.portax-ldif-round {
	border-radius: 0px 0px 4px 4px;
}

div#display > .results {
	background: var(--bg-color-2);
}

div#display > .subtitle {
	margin: 0;
}

div#display > .results > .portax-box {
	margin: 0;
}

div#display > div.results > div.portax-box > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

div.map-wrapper {
	position: relative;
	margin: 10px;
	padding: 4px;
	border: 1px solid #646dff;
	text-align: initial;
}

div.map-wrapper.fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
}

div.map-wrapper > div.leftColumn {
	position: absolute;
	z-index: 5;
	min-width: 10%;
	max-width: 50%;
	height: 0px;
	top: 12px;
	left: 12px;
}

div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > select {
	float: left;
	display: inline-block;
}

div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > form {
	float: left;
	display: inline-block;
}

div.map-wrapper > div.leftColumn > div.toolbar {
	padding: 5px;
	border: 1px solid #999;
	background-color: var(--bg-color);
	margin-bottom: 5px;
}

div.map-wrapper > div.leftColumn > div.clusterOptions {
	border: 1px solid #999;
	background-color: var(--bg-color);
	padding: 1em;
	text-align: center;
}

div.map-wrapper > div.leftColumn > div.clusterOptions div.hole {
	margin: 1em 1em 0.5em 1em;
}

div.map-wrapper > div.leftColumn > div.clusterOptions div.hole span.ui-slider-handle {
	border-color: var(--border-3d);
	background-color: var(--input-background);
}

div.map-wrapper > div.leftColumn > div.heatMap {
	float: left;
	position: relative;
	border: 1px solid #999;
	background-color: var(--bg-color);
	padding: 1px;
	width: 18px;
	cursor: pointer;
	margin-right: 5px;
}

div.map-wrapper > div.leftColumn > div.wmToolBar {
	float: left;
	position: relative;
	border: 1px solid #999;
	background-color: var(--bg-color);
	padding: 0.1em;
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.topMenu {
	margin: 0.2em;
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane > div.menu > span.button,
div.map-wrapper > div.leftColumn > div.wmToolBar > div.topMenu > span.button {
	display: inline-block;
	cursor: pointer;
	margin: 0;
	border: 0;
	border-radius: 0.1em;
	padding: 0.4em;
	color: var(--map-button-symbol);
  font: normal normal normal 1em/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.button:hover,
div.map-wrapper > div.leftColumn > div.wmToolBar > div.topMenu > span.button:hover {
	color: var(--bg-color);
	background-color: #5599EE;
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.topMenu > span.heatMap:before {
  content: "\f2c7";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.topMenu > span.timeShift:before {
  content: "\f017";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane.hidden {
	display: none;
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane > div.timestamp {
	text-align: center;
	padding: 0.2em;
	margin: 0 0.2em 1px 0.2em;
	background-color: var(--hilite-color);
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.calendar:before {
  content: "\f073";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.stepBackFast:before {
  content: "\f100";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.stepBack:before {
  content: "\f104";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.playRev {
  transform: rotate(180deg);
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.playRev:before {
  content: "\f04b";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.pause:before {
  content: "\f04c";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.play:before {
  content: "\f04b";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.stepFwd:before {
  content: "\f105";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.stepFwdFast:before {
  content: "\f101";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane span.refreshNow:before {
  content: "\f050";
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane > div.menu {
	text-align: center;
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane > div.datePicker {
	display: none;
}

div.map-wrapper > div.leftColumn > div.wmToolBar > div.timePane > div.datePicker > div.timePicker {
	text-align: center;
	border-top: 1px solid #aaa;
	padding: 0.2em;
	margin-top: 0.1em;
}


div.map-wrapper > div.leftColumn > div.heatMap > div.start {
	position: absolute;
	left: 0;
	top: 5px;
	width: 100%;
	font-size: 9px;
	text-align: center;
}

div.map-wrapper > div.leftColumn > div.heatMap > div.end {
	position: absolute;
	left: 0;
	bottom: 5px;
	width: 100%;
	font-size: 9px;
	text-align: center;
}

div.map-wrapper > div.leftColumn > div.heatMap > div.heatMapElement {
	height: 1px;
}

div.map-wrapper > div.leftColumn > div.heatMap > div.heatMapElement > div.heatMapMarker {
	width: 50%;
	height: 1px;
	background-color: #999;
	margin-left: auto;
	margin-right: auto;
}

div.map-wrapper > div.infobar > div.close:before {
  content: "\f057";
}

div.map-wrapper > div.infobar > div.close {
	width: 13px;
	height: 13px;
	overflow: hidden;
	position: absolute;
	opacity: 0.7;
	right: 5px;
	top: 5px;
	z-index: 10000;
	cursor: pointer;
	color: #808080;
  font: normal normal normal 1em/1 FontAwesome;
  font-size: 100%;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;	
}

div.map-wrapper > div.infobar {
	position: absolute;
	min-width: 10%;
	max-width: 33%;
	max-height: 90%;
	z-index: 5;
	top: 12px;
	right: 12px;
	border: 1px solid #999;
	background-color: var(--bg-color);
	overflow: scroll;
	display: none;
}

div.map-wrapper > div.infobar > div.content {
	margin: 5px;
}

div.map-wrapper > div.infobar > div.content > div.header {
	border-bottom: 1px solid #999;
	text-align: center;
	font-weight: 600;
	margin-bottom: 5px;
	padding: 0 1em 0.2em 1em;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu {
	padding-left: 0.5em;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap {
	margin-bottom: 0.5em;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if.open {
	background: var(--map-submenu-bg);
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if.open + div.if.open {
	border-top: 0;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if > div.short {
	color: #888888;
	cursor: pointer;
	margin-left: 0.7em;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if.open > div.short {
	display: none;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if > div.details {
	display: none;
	margin: 0.2em 0.7em;
	padding: 0.3em 0;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if.open > div.details {
	display: block;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if > div.details > div.actions {
	text-align: center;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if > div.details > div.actions > a {
	cursor: pointer;
}

div.map-wrapper > div.infobar > div.content div.wlcmenu > div.ap > div.interfaces > div.if > div.details > table > tbody > tr > td.c {
	text-align: right;
	color: #888888;
	font-style: italic;
	margin-left: 1em;
}

div.map-wrapper > div.infobar > div.content > div.overlay.newtype {
	border-top: 1px solid #888888;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.header {
	cursor: pointer;
	color: var(--map-menu-color);
	margin-bottom: 1px;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.header:hover {
	background-color: #efefef;
}

div.map-wrapper > div.infobar > div.content > div.overlay.active > div.header {
	background-color: #0088ff;
	color: white;
}

div.map-wrapper > div.infobar > div.content > div.overlay.active > div.header:hover {
	background-color: var(--secondary-color);
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.header > div.header-text {
	display: inline-block;
	padding: 0.2em 0.2em 0.2em 0.5em;
	margin-right: 0.2em;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.header > div.header-toggler {
	padding: 0.2em 0.2em 0.2em 0.2em;
	display: inline-block;
	width: 1em;
	text-align: center;
	float: right;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.header > div.header-toggler:hover {
	font-weight: bold;
	text-shadow: 0px 0px 3px var(--secondary-color);
}

div.map-wrapper > div.infobar > div.content > div.overlay.active > div.header > div.header-toggler:hover {
	font-weight: bold;
	text-shadow: 0px 0px 3px var(--bg-color);
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content {
	display: none;
	max-height: 300;
	overflow: scroll;
	clear: both;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content.active {
	display: block;
	margin-bottom: 2px;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.pdwnstrmdpth {
	background-color: var(--map-submenu-bg);
	padding: 0.2em 0.5em;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device {
	background-color: var(--map-submenu-bg);
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-header {
	cursor: pointer;
	color: var(--map-menu-color);
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-header:hover {
	background-color: var(--hilite-color);
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-header > div.wm-device-header-text {
	display: inline-block;
	padding: 0.2em 0.2em 0.2em 0.2em;
	margin-right: 0.2em;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-header > div.wm-device-header-toggler {
	padding: 0.2em 0.2em 0.2em 0.2em;
	display: inline-block;
	width: 1em;
	text-align: center;
	float: right;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-header > div.wm-device-header-toggler:hover {
	font-weight: bold;
	text-shadow: 0px 0px 3px var(--secondary-color);
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-ifs {
	display: none;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-ifs.active {
	display: block;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-ifs > div.wm-device-if {
	padding: 0.1em 0.1em 0.1em 1em;
	cursor: pointer;
}

div.map-wrapper > div.infobar > div.content > div.overlay > div.content > div.wm-device > div.wm-device-ifs > div.wm-device-if:hover {
	background-color: var(--hilite-color);
}

div.map-wrapper > div.map-refreshable {
	 position: relative;
	 top: 0px;
	 width: 100%;
	 height: 100%;
}

div.map-wrapper > div.leftColumn > div.toolbar > input.search {
	width: 100%;
	margin-bottom: 5px;
}

div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > input {
	float: left;
}

div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > div.logger {
	float: right;
	white-space: normal;
	margin-top: 3px;
	font-weight: bold;
	font-size: 80%;
	text-align: right;
}

div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > div.logger > .info {
	color: #ff0000;
}

div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > div.clear {
	clear: both;
}

div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > input.groupedRight {
	font-family: "fontAwesome";
	font-size: larger;
	font-size-adjust: 0.75;
}

div.map-wrapper div.infowindow-header {
	margin-top: 0.3em;
	font-weight: bold;
	text-align: center;
}

div.map-wrapper div.infowindow-menu {
	text-align: center;
}

div.map-wrapper div.infowindow-menu > a {
	cursor: pointer;
}

div.map-wrapper div.infowindow-menu > div.options {
	display: none;
	margin: 0.5em 0em;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

div.map-wrapper div.infowindow-latlng {
	text-align: center;
	padding: 0.3em; 
}

div.map-wrapper div.infowindow-status {
	text-align: right;
	font-weight: bold; 
}

div.map-wrapper div.infowindow-status > .info {
	color: #FF0000;
}

.ui-autocomplete {
	max-height: 240px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 201;
}

tr.portax-table-row > td > div.portax-uplink > input,
tr.portax-table-row > td > div.portax-uplink > ul.ui-autocomplete,
tr.portax-table-row > td > div.portax-if-template > input,
tr.portax-table-row > td > div.portax-if-template > ul.ui-autocomplete
{
	font-size: 0.9em;
	visibility: hidden;
	margin: 0;
}

tr.portax-table-row > td > div.portax-interface-selector-active > input,
tr.portax-table-row > td > div.portax-template-selector-active > input
{
	visibility: visible;
}

tr.portax-table-row > td.portax-admin-uplink > div.portax-uplink,
tr.portax-table-row > td.portax-admin-if-uplink > div.portax-if-template
{
	display: table-cell;
}

tr.portax-table-row > td.portax-admin-uplink > div.portax-uplink:hover > ul.ui-autocomplete,
tr.portax-table-row > td.portax-admin-if-template > div.portax-if-template:hover > ul.ui-autocomplete
{
	visibility: visible;
	transition-delay: 100;
}

tr.portax-table-row > td.portax-admin-uplink > div.portax-uplink:hover > input.portax-interface-selector,
tr.portax-table-row > td.portax-admin-if-template > div.portax-if-template:hover > input.portax-template-selector
{
	color: var(--hover-bg);
	visibility: visible;
	transition-delay: 100;
}

tr.portax-table-row > td.portax-admin-uplink > div.portax-uplink:hover > input.portax-interface-selector:focus,
tr.portax-table-row > td.portax-admin-if-template > div.portax-if-template:hover > input.portax-template-selector:focus {
	color: var(--primary-color);
}

tr.portax-table-row > td > div.portax-uplink > a.portax-clear-uplink,
tr.portax-table-row > td > div.portax-if-template > a.portax-clear-template
{
	display: inline-block;
	vertical-align: text-top;
	cursor: pointer;
}

tr.portax-table-row > td.portax-admin-uplink > div.portax-uplink:hover > a.portax-clear-uplink,
tr.portax-table-row > td.portax-admin-if-template > div.portax-if-template:hover > a.portax-clear-template {
}

span.gray-italic {
	font-style: italic;
	color: #808080;
}

fieldset > input.text.required,
.checkbox + textarea.required,
.new-object span.portax-input-button > input.text.required,
.new-object select.required,
.new-object input.required,
.new-object textarea.required {
	border: 1px solid var(--bg-color-error);
}

.new-object label.required {
	color: var(--bg-color-error);
}

div.vtop {
	vertical-align: top;
}

div.vcenter {
	text-align: center;
}

span.ip-test.reachable {
	background: #24BC14;
}

span.ip-test.unreachable {
	background: var(--bg-color-error);
}

span.ip-edit,
span.ip-test,
span.ip-take {
	cursor: pointer;
	padding: 0.2em;
	display: inline-block;
	background: var(--a-color);
	color: var(--bg-color);
	border-radius: 2px;
	min-width: 3em;
	text-align: center;
}

span.ip-test:hover,
span.ip-edit:hover,
span.ip-take:hover {
	background: var(--primary-color);
}

span.tooltip-mark {
	color: var(--secondary-color);
	text-decoration: none;
}

span.tooltip-mark:hover {
	text-decoration: underline;
}

table.centered {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

figure.portslogd {
	background: #f0f0f0;
	padding: 3px 7px 3px 7px;
	border-radius: 4px;
	display: inline-block;
}

figure.portslogd > figcaption {
	background: var(--secondary-bg-color);
	font-weight: bold;
	padding: 3px 7px 3px 7px;
	border-radius: 4px;
}

div.map-wrapper div#weathermaps hr {
	width: initial;
}

div.map-wrapper div.trafficOverlayLinkInfo td.header {
	font-style: italic;
	text-align: right;
}

div.map-wrapper div.trafficOverlayLinkInfo td.data.warn {
	color: #F00F0F;
}

div.map-wrapper div.trafficOverlayLinkInfo > div.actionsToggler {
	text-align: center;
}

div.map-wrapper div.trafficOverlayLinkInfo > div.actionsToggler > span.icon {
	display: inline-block;
	cursor: pointer;
	margin: 0;
	border: 0;
	padding-left: 1em;
	color: #808080;
  font: normal normal normal 1em/1 FontAwesome;
  font-size: 120%;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;	
}

div.map-wrapper div.trafficOverlayLinkInfo > div.actionsToggler > span.icon:hover {
	color: #0066CC;
}

div.map-wrapper div.trafficOverlayLinkInfo > div.actionsToggler > span.icon:before {
	content: "\f085";
}
div.map-wrapper div.trafficOverlayLinkInfo > div.actions {
	text-align: center;
	display: none;
}

div.map-wrapper div.trafficOverlayLinkInfo > div.actions > a  {
	cursor: pointer;
}

div.map-wrapper div.trafficOverlayLinkInfo > div.stats {
	text-align: center;
	cursor: pointer;
}

div.map-wrapper div.trafficOverlayLinkInfo > div.stats > div.traffic-graph {
	min-width: 331px;
	min-height: 90px;
}

div.map-wrapper table.trafficOverlayRxTxStats td {
	text-align: right;
	font-weight: bold;
	padding: 0 0.25em;
}

div.map-wrapper table.trafficOverlayRxTxStats th {
	text-align: right;
	font-style: italic;
	font-weight: initial;
	padding: 0 0.25em;
}

div.map-wrapper table.wm-device-iw td.header {
	padding: 0.2em;
	padding-right: 0.4em;
	text-align: right;
	font-style: italic;
}

div.map-wrapper table.wm-device-iw td.data {
	padding: 0.2em;
	text-align: left;
	font-weight: bold;
}

div.map-wrapper table.wm-device-iw td.actions {
	padding: 0.2em;
	padding-top: 0.4em;
	border-top: 1px solid #999;
	text-align: center;
}

div.map-wrapper table.wm-device-iw td.actions a {
	cursor: pointer;
}

div.map-wrapper div.trafficOverlayPathPointActions {
	text-align: center;
}

div.map-wrapper div.trafficOverlayPathPointActions > a {
	cursor: pointer;
}

div.portax-graph-wrapper {
	position: relative;
	display: inline-block;
	border: 1px dashed transparent;
	border-radius: 0.4em; 
	margin: 4px;
}

div.portax-graph-wrapper.active,
div.portax-graph-wrapper:hover,
div.portax-graph-wrapper.pinned {
	border-color: rgba( 192, 192, 192, 1);
}

div.portax-graph-wrapper > div.range {
	display: none;
	position: absolute;
	top: 0;
	text-align: center;
	display: none;
	width: 100%;
	padding: 0.3em 0;
}

div.portax-graph-wrapper > div.range > span {
	white-space: pre;
	padding: 0.2em 1em;
	background-color: var(--bg-color);
}

div.portax-graph-wrapper > div.range > span > span.space {
	padding: 0 0.5em;
}

div.portax-graph-wrapper > div.menu:hover > div.border {
	display: inline-block;
}

div.portax-graph-wrapper > img {
	position: relative;
}

@font-face{
	font-family: "FontAwesome";
	font-style: normal;
	font-weight: 900;
  font-display: block;
  src: url("./fonts/fa-solid-900.woff2") format("woff2"), url("./fonts/fa-solid-900.ttf") format("truetype");
}

div.portax-graph-wrapper > div.toggler {
	position: absolute;
	top: 0;
	right: 0;
	width: 18px;
	height: 140px;
	cursor: pointer;
}

div.portax-graph-wrapper > div.menu {
	min-height: 2em;
	margin: 0;
	padding: 0;
	border: 0;
	bottom: 1px;
	width: 100%;
	position: absolute;
	text-align: center;
	z-index: 0;
}

div.portax-graph-wrapper > div.vmenu {
	min-width: 3em;
	margin: 0;
	padding: 0;
	border: 0;
	left: 1px;
	top: 0;
	height: 100%;
	position: absolute;
	text-align: center;
	z-index: 0;
}

div.portax-graph-wrapper.init > div.toggler,
div.portax-graph-wrapper.init > div.vmenu,
div.portax-graph-wrapper.init > div.menu {
	display: none;
}

div.portax-graph-wrapper > div.vmenu > div.border,
div.portax-graph-wrapper > div.menu > div.border {
	display: none;
	padding: 0.2em;
	background-color: var(--secondary-bg-color);
	border-radius: 0.4em;
}

div.portax-graph-wrapper.pinned > div.vmenu,
div.portax-graph-wrapper > div.vmenu:hover,
div.portax-graph-wrapper > div.vmenu:focus,
div.portax-graph-wrapper.pinned > div.menu,
div.portax-graph-wrapper > div.menu:hover,
div.portax-graph-wrapper > div.menu:focus {
	z-index: 1;
}

div.portax-graph-wrapper.pinned > div.vmenu > div.border,
div.portax-graph-wrapper > div.vmenu:hover > div.border,
div.portax-graph-wrapper.pinned > div.menu > div.border,
div.portax-graph-wrapper > div.menu:hover > div.border {
	display: inline-block;
}

div.portax-graph-wrapper.pinned.range > div.vmenu ~ div.range,
div.portax-graph-wrapper.range > div.vmenu:hover ~ div.range,
div.portax-graph-wrapper.pinned.range > div.menu ~ div.range,
div.portax-graph-wrapper.range > div.menu:hover ~ div.range {
	display: block;
}

div.portax-graph-wrapper > div.vmenu > div.border > span.datepicker {
	display: none;
	position: absolute;
	left: 100%;
	top: 0%;
}

div.portax-graph-wrapper > div.menu > div.border > div.items {
	margin: 0;
	border: 0;
	padding: 0;
	background-color: var(--secondary-bg-color);
	border-radius: 0.3em;
	overflow: hidden;
	height: 2em;
}

div.portax-graph-wrapper > div.vmenu > div.border > div.items {
	margin: 0;
	border: 0;
	padding: 0;
	background-color: var(--secondary-bg-color);
	border-radius: 0.3em;
	overflow: hidden;
}

div.portax-graph-wrapper > div.vmenu > div.border > div.items > span {
	display: block;
	cursor: pointer;
	margin: 0;
	border: 0;
	padding: 0.2em 0.3em;
	color: var(--primary-color);
	font-weight: bold;
	font-size: 0.9em;
  text-rendering: auto;
	white-space: pre;
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span {
	display: inline-block;
	cursor: pointer;
	margin: 0;
	border: 0;
	padding: 0.5em;
	color: var(--primary-color);
  font: normal normal normal 1em/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div.portax-graph-wrapper > div.vmenu > div.border > div.items > span:hover {
	color: var(--bg-color);
	background-color: #5599EE;
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span:hover {
	color: var(--bg-color);
	background-color: #5599EE;
}

div.portax-graph-wrapper > div.vmenu > div.border > div.items > span.mute,
div.portax-graph-wrapper > div.menu > div.border > div.items > span.mute {
	display: none;
}

div.portax-graph-wrapper > div.vmenu > div.border > div.items > span.disabled,
div.portax-graph-wrapper > div.menu > div.border > div.items > span.disabled {
	display: none;
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.space {
	border-right: 1px solid var(--bg-color);
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.rightEnd:before {
  content: "\f051";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.right:before {
  content: "\f061";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.left:before {
  content: "\f060";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.unchain:before {
  content: "\f127";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.chain:before {
  content: "\f0c1";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.range:before {
  content: "\f274";
}

div.portax-graph-wrapper.range > div.menu > div.border > div.items > span.range:before {
  content: "\f273";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.pin:before {
  content: "\f08d";
	display: inline-block;
	transform: rotate(20deg);
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.expand:before {
  content: "\f424";
	display: inline-block;
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.compress:before {
  content: "\f422";
	display: inline-block;
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.download:before {
  content: "\f381";
	display: inline-block;
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.accounting {
	display: none;
}

div.portax-graph-wrapper > div.menu.accountable > div.border > div.items > span.accounting {
	display: inline-block;
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.accounting {
	color: var(--blur-color);
}

div.portax-graph-wrapper > div.menu.accounting > div.border > div.items > span.accounting {
	color: var(--primary-color);
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.accounting:before {
  content: "\24";
}

div.portax-graph-wrapper.pinned > div.menu > div.border > div.items > span.pin:before {
	transform: initial;
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.reset:before {
  content: "\f00d";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.minus:before {
  content: "\f010";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.plus:before {
  content: "\f00e";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.refresh:before {
  content: "\f021";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.play:before {
  content: "\f04b";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.playFast:before {
  content: "\f04e";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.stop:before {
  content: "\f04d";
}

div.portax-graph-wrapper > div.menu > div.border > div.items > span.pause:before {
  content: "\f04c";
}

div.portax-graph-wrapper > div.overlay {
	position: absolute;
	cursor: crosshair;
}

div.portax-graph-wrapper > div.overlay > div {
	height: 100%;
	position: absolute;
	top: 0;
}

div.portax-graph-wrapper > div.overlay > div.cover {
	width: 100%;
	left: 0;
}

.dark div.portax-graph-wrapper > div.overlay:hover > div.cursor,
.dark div.portax-graph-wrapper > div.overlay > div.cursor.forced {
	border-left: 1px dotted #ffffffa0;
}

div.portax-graph-wrapper > div.overlay:hover > div.cursor,
div.portax-graph-wrapper > div.overlay > div.cursor.forced {
	width: 1px;
	border-left: 1px dotted #000000a0;
}

.dark div.portax-graph-wrapper > div.overlay:hover > div.level {
	border-top: 1px dotted #ffffffa0;
}

div.portax-graph-wrapper > div.overlay:hover > div.level {
	height: 1px;
	width: 100%;
	border-top: 1px dotted #000000a0;
}

.dark div.portax-graph-wrapper > div.overlay > div.level > div.value {
	color: #fff;
}

div.portax-graph-wrapper > div.overlay > div.level > div.value {
	display: none;
	position: absolute;
  left: 0;
	bottom: 0;
	padding: 0.5em;
	color: #000;
	font-size: 0.7em;
	white-space: pre;
}

div.portax-graph-wrapper > div.overlay:hover > div.level > div.value {
	display: block;
}

.dark div.portax-graph-wrapper > div.overlay > div.cursor > div.date {
	color: #fff;
}

div.portax-graph-wrapper > div.overlay > div.cursor > div.date {
	display: none;
	position: absolute;
  left: 0;
	padding-left: 0.5em;
	color: #000;
	font-size: 0.7em;
	white-space: pre;
}

div.portax-graph-wrapper > div.overlay:hover > div.cursor > div.date {
	display: block;
}

div.portax-graph-wrapper > div.overlay.active > div.left-shadow {
	left: 0;
	background-color: rgba(0,0,0,0.2);
	border-right: 1px dotted rgba(0,0,0,0.5);
}

div.portax-graph-wrapper > div.overlay.active > div.right-shadow {
	right: 0;
	background-color: rgba(0,0,0,0.2);
	border-left: 1px dotted rgba(0,0,0,0.5);
}

div.portax-graph-wrapper > div.badges {
	/*background-color: rgba(255,255,255,0.75);*/
}

div.portax-graph-wrapper > div.badges > span {
	font: normal normal normal 1em/1 FontAwesome;
	display: inline-block;
	margin-left: 0.2em;
}

div.portax-graph-wrapper > div.badges > span:before {
	font-size: 1.2em;
	text-shadow: 0px 0px 3px var(--bg-color);
}

@keyframes portax-graph-spin-throbber {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes portax-blinker {
	50% {
		opacity: 0;
	}
}

div.portax-graph-wrapper > div.badges > span.xhr {
	animation: portax-graph-spin-throbber  2s infinite linear;
}

div.portax-graph-wrapper > div.badges > span.xhr:before {
	content: "\f021";
	color: #4488EE;
}

div.portax-graph-wrapper > div.badges > span.xhr-error {
	color: #FF0000;
}


div.portax-graph-wrapper > div.badges > span.xhr-error:after {
	content: "\f021";
	color: #FF0000;
	margin-left: 0.5em;
}

div.portax-graph-wrapper > div.badges > span.warning {
	cursor: pointer;
}

div.portax-graph-wrapper > div.badges > span.warning:before {
	content: "\f071";
	color: #FF0000;
}

div.portax-graph-wrapper > div.badges > span.mute {
	display: none;
}

li.portax-port-tab-active {
	background-color: var(--secondary-bg-color);
	border-radius: 4px 4px 0 0;
}

ul.portax-rg-ports ~ div.portax-port-graphs {
	display: none;
}

ul.portax-rg-ports:has(li.portax-port-tab-active) ~ div.portax-port-graphs {
	display: block;
}

div.portax-port-tab-content {
	padding: 8px;
	display: inline-block;
	min-width: 480px;
	background-color: var(--secondary-bg-color);
	border-radius: 4px;
}

div.vlan-members {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

div.vlan-members > a {
	padding: 2px;
	margin: 2px;
	display: inline-block;
	border-radius: 2px;
	color: var(--tt-color);
	background: var(--bg-color-info) !important;
	border: none !important;
}

ul.portax-rg-ports {
	margin: 4 0 0 0;
	padding: 0;
	list-style-type: none;
	font-size: 0;
}

ul.portax-rg-ports > li {
	padding: 0;
	margin: 0;
	display: inline-block;
	position: relative;
	font-size: initial;
}

ul.portax-rg-ports > li > a {
	text-decoration: none;
}

span.portax-port.enabled,
span.portax-port.link-up,
span.portax-port.link-down {
	color: black;
}

span.portax-port {
	font-size: 10pt;
	display: inline-block;
	border-radius: 4px;
	color: var(--disabled-text);
	padding: 4px;
	width: 48px;
	height: 48px;
	vertical-align: middle;
}

ul.portax-rg-ports > li > a > span.portax-port-mrtg:before {
	content: "\f1fe";
	font: normal normal normal 1em/1 FontAwesome !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	bottom: 0;
	right: 3;
	z-index: 5;
}

pre.output,
pre.portax-ldif {
	font-family: monospace;
	text-align: left;
	display: block;
	background: var(--bg-color-2);
	color: var(--primary-color);
	font-size: 0.9em;
	overflow: scroll;
	padding: 4px;
}

pre.output,
pre.portax-ldif-round {
	margin-top: 0px;
	border-radius: 4px;
}

pre.ros-mangle {
	white-space: pre-line;
}

tr.portax-table-row.disabled > td > div.status {
	color: var(--primary-color);
}

ul.portax-hooks {
	list-style-type: none;
	padding-left: 0px;
}

ul.portax-hooks > li > label {
	font-weight: normal;
}

ul.filter-list {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

ul.filter-list > li {
	display: inline-block;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	line-height: 24px;
	font-size: 90%;
	padding-left: 4px;
	padding-right: 4px;
	margin-right: 5px;
	margin-bottom: 2px;
	background: var(--bg-color-info);
	border: 1px solid var(--elem-border);
	color: var(--tt-color);
	cursor: default;
}

ul.filter-list > li > a > span.ui-icon {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -2;
}

.d-inline-block {
	display: inline-block;
}

span.display-block {
	display: block;
	/* line-height: 18px; */
	vertical-align: middle;
}

span.display-block > span.flap-count {
	color: var(--primary-color);
	vertical-align: top;
}

.text-gray {
	color: gray;
}

span.warn {
	color: #C9B215;
}

span.crit {
	color: var(--bg-color-error);
}

textarea.portax-scrip {
	width: 100%;
	min-height: 64px;
	font-family: monospace;
	border-radius: 3px;
	border: 1px solid var(--elem-border);
	color: var(--primary-color);
}

div.infobar > div.content > div.searchResult {
	padding: 0.2em 0.5em;
	cursor: pointer;
	color: var(--secondary-color);
	overflow: hidden;
}

div.infobar > div.content > div.searchResult.selected {
	background-color: #0088ff;
	color: white;
}

div.infobar > div.content > div.searchResult:hover {
	background-color: #efefef;
}

div.infobar > div.content > div.searchResult.selected:hover {
	background-color: var(--secondary-color);
}

div.log tr td span.logError {
	color: red;
}

div#dhcp_div {
	margin: 10px;
}

div.alert-detail {
	margin-top: 4px;
	box-sizing: border-box;
	vertical-align: top;
	width: 100%;
}

div.alert-detail.portax-dialog {
	padding: initial;
}

div.alert-detail > div {
	padding: 8px;
}

div.alert-detail label.textarea {
	display: block;
}

div.alert-detail > div > label.label-select {
	vertical-align: bottom;
}

button.portax-button {
	padding: .4em;
}

button.portax-button:hover {
	border: 1px solid #999;
	background: #dadada;
	color: #212121;
}

div.alert-detail textarea.alert-note, .ui-widget textarea, textarea {
	resize: none;
	border-radius: 4px;
	border-color: var(--elem-border);
	background: var(--input-background-text);
	color: var(--primary-color);
	width: 100%;
	min-height: 60px;
	font-size: 9pt;
	font-family: monospace;
}

div.alert-detail textarea.alert-note.e-mail {
	min-height: 240px;
}

input.alert-subject {
	font-size: 9pt;
	font-family: monospace;
}

div.alert-detail > div.alert-control > div.align-left {
	text-align: left;
}

div.alert-detail > div.alert-control > div.hidden {
	display: none;
}

div.alert-detail > div.alert-control > div > div.hidden {
	display: none;
}

td.alert-note {
	max-width: 240px;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}

td.alert-note > span.pre.multiline {
	font-family: monospace;
	font-size: 0.9em;
}

tr.disabled > td.alert-note {
	color: var(--disabled-text);
}

tr.disabled > td > span {
	color: #999;
}

div.alert-detail label:not(.inline) {
	display: block;
	margin-bottom: 0.4em;
}

div.alert-detail input[type=button], div.alert-detail input[type=submit], div.alert-detail select {
	margin-left: 0px !important;
}

div.alarm-description {
	width: 100%;
	font-weight: normal;
	white-space: normal;
	overflow: wrap;
}

div.alert-path {
	padding: 4px;
	border-radius: 4px;
	background: var(--table-bg-color);
}

div#alert-filters > form#search-form {
	display: inline-block;
}

div.copycat {
	position: relative;
}

div.copycat > span.click-to-copy {
	position: absolute;
	right: 0.2em;
	top: 0.2em;
	display: inline;
}

span.click-to-copy.fas {
	border: 0;
}

span.click-to-copy {
	display: inline-block;
	cursor: pointer;
	margin: 0px;
	padding: 2px;
	background-color: var(--secondary-bg-color);
	border-radius: 2px;
	border: 1px solid var(--elem-border);
}

span.click-to-copy:hover {
	background-color: var(--a-color);
	color: var(--bg-color);
}

tr.portax-table-row > td > a.portax-popup {
	vertical-align: bottom;
}

span.snmp-object {
	white-space: nowrap;
}

span.snmp-object > span {
	display: inline-block;
	vertical-align: bottom;
}

tbody > tr > td.no-wrap {
	white-space: nowrap;
}

tbody > tr > td.wrap {
	white-space: normal;
}

tbody > tr > td.top {
	vertical-align: top;
}

.tooltipster-sidetip.tooltipster-portax .tooltipster-box {
	border-radius: 3px; 
	border: 1px solid #f1d031;
	background: #ffffa3;
}

.tooltipster-sidetip.tooltipster-portax .tooltipster-content {
	color: var(--tt-color);
	font-size: 8pt;
	line-height: 10pt;
	padding: 4px;
}

.tooltipster-sidetip.tooltipster-portax .tooltipster-arrow {
	height: 9px;
	margin-left: -4px;
	width: 8px;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-left .tooltipster-arrow,
.tooltipster-sidetip.tooltipster-portax.tooltipster-right .tooltipster-arrow {
	height: 8px;
	margin-left: 0;
	margin-top: -4px;
	width: 4px;
}

.tooltipster-sidetip.tooltipster-portax .tooltipster-arrow-background {
	border: 4px solid transparent;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-bottom .tooltipster-arrow-background {
	border-bottom-color: #ffffa3;
	top: 1px;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-left .tooltipster-arrow-background {
	border-left-color: #ffffa3;
	left: -1px;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-right .tooltipster-arrow-background {
	border-right-color: #ffffa3;
	left: 1px;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-top .tooltipster-arrow-background {
	border-top-color: #ffffa3;
	top: -1px;
}

.tooltipster-sidetip.tooltipster-portax .tooltipster-arrow-border {
	border: 4px solid transparent;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-bottom .tooltipster-arrow-border {
	border-bottom-color: #f1d031;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-left .tooltipster-arrow-border {
	border-left-color: #f1d031;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-right .tooltipster-arrow-border {
	border-right-color: #f1d031;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-top .tooltipster-arrow-border {
	border-top-color: #f1d031;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-bottom .tooltipster-arrow-uncropped {
	top: -4px;
}

.tooltipster-sidetip.tooltipster-portax.tooltipster-right .tooltipster-arrow-uncropped {
	left: -4px;
}

.rrplain > tbody > tr > td > ul.array {
	border: 1px solid var(--border-2);
	min-width: 240px;
	background: var(--bg-color);
	border-radius: 2px;
	padding: 2px;
	margin: 5px;
	display: block;
}

.rrplain > tbody > tr > td > ul.array > li {
	font-family: monospace;
	border-bottom: none;
}

.rrplain > tbody > tr > td > ul.array > li:hover {
	background: var(--bg-color);
}

span.th-units {
	display: block;
	font-size: 7pt;
	font-weight: normal;
	font-style: italic;
	color: #a0a0a0;
}

ul.checklist {
	padding: 0;
}

ul.checklist > li {
	list-style: none;
}

ul.checklist > li > label.checkbox {
	font-weight: normal;
	margin-top: 0.4em;
}

div.vlanmap {
	padding: 4px;
}

div.vlanmap > ul.tags {
	display: block;
}

ul.tags {
	padding: 0;
	font-family: monospace;
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}

ul.tags > li {
	list-style: none;
	display: inline-block;
	border-radius: 2px;
	padding: 2px;
	font-weight: normal;
	background: var(--primary-color);
	color: var(--bg-color);
	margin: 0 0.2em 0.2em 0;
}

ul.tags.leech > li {
	text-align: center;
	min-width: 22em;
}

span.sm.ma {
	color: var(--bg-color);
	background: var(--primary-color);
	padding: 2px;
	border-radius: 2px;
}

span.sm,
ul.tags > li.sm {
	font-size: small;
}

ul.tags > li.uc {
	text-transform: uppercase;
}

div.iptv-status > span {
	border: 1px solid #666;
	margin: 2px;
	padding: 1px;
	border-radius: 2px;
	display: inline-block;
}

div.iptv-status > span.ma {
	background: #eee;
}

div.iptv-status > span.preview {
	background: var(--secondary-bg-color);
}

div.iptv-status > span.active {
	background: var(--bg-color-2);
}

div.iptv-status > span.dvr {
	background: lightgreen;
}

div.iptv-status > span.package {
	font-style: italic;
	font-size: 8pt;
}

.dark div.iptv-status > span.dvr {
	background: green;
}

td.warning {
	background: var(--td-warning);
}

td.critical {
	background: var(--td-critical);
}

div.hilite {
	background: var(--hilite-color);
	border-radius: 4px;
}

table.iw_path_details td {
	padding: 0.1em;
}

table.iw_path_details td.iw_path_header {
	font-weight: bolder;
	text-align: center;
	color: var(--primary-color);
	background: var(--secondary-bg-color);
	padding: 3px 7px 3px 7px;
	border-radius: 4px;
}

table.iw_path_details td.iw_path_label {
	text-align: right;
	font-style: italic;
	color: #888888;
}

span.timestamp {
	font-style: italic;
	color: #aaa;
}

span.counter {
	color: #aaa;
	font-style: italic;
	display: block;
}

span.counter.hidden {
	display: none;
}

span.ui-icon-inline {
	display: inline-block;
	vertical-align: top;
}

div.alert-note {
	padding: 2px 4px 2px 4px;
	font-family: monospace;
	font-size: 9pt;
	background-color: var(--bg-color-2);
	border-color: #d6d8db;
	border-radius: 2px;
	white-space: normal;
	overflow-wrap: break-word;
	position: relative;
}

div.alert-note > span.message-status.delivered {
	background-color: #d4edda;
	border-color: #c3e6cb;
	color: #388549;
}

div.alert-note > span.message-status.other {
	background-color: #fefefe;
	border-color: #fdfdfe;
}

div.alert-note > span.message-status.failed {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #c12233;
}

div.alert-note > span.message-status {
	color: #888;
	font-size: 7pt;
	padding: 1px;
	float: right;
	border-radius: 2px;
}

div.alert-detail label.radio {
	display: inline;
	vertical-align: top;
}

.fas {
	cursor: pointer;
	margin: 0;
	border: 0;
	display: inline-block;
	font: normal normal normal 1em/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fas-edit:before {
	content: "\0f044";
}

.fas-globe:before {
	content: "\0f0ac";
}

.fas-q:before {
	content: "\0f059";
}

.fas-link:before {
	content: "\0f0c1";
}

.fas-check:before {
	content: "\0f14a";
}

.fas-list-check:before {
	content: "\f0ae";
}

.fas-left:before {
	content: "\0f30a";
}

.fas-right:before {
	content: "\0f30b";
}

.fas-up:before {
	content: "\f30c";
}

.fas-down:before {
	content: "\f309";
}

.fas-filter:before {
	content: "\f0b0";
}

.fas-message:before {
	content: "\f075";
}

.fas-envelope:before {
	content: "\f0e0";
}

.fas-copy:before {
	content: "\f0c5";
}

.fas-look {
	cursor: initial;
}

.fas-look:before {
	content: "\f002";
}

.fas-plus:before {
	content: "\f0fe";
	font-size: 8px;
	vertical-align: middle;
	padding: 4px;
}

.fas-circle-plus:before {
	content: "\f055";
	padding: 0 4 0 0;
}

.fas-search {
	display: inline-block;
	cursor: pointer;
	margin: 0px;
	padding: 2px;
	background-color: var(--bg-color);
	border-radius: 2px;
}

.fas-search:hover {
	background-color: var(--a-color);
	color: var(--bg-color);
}

.fas-search:before {
	content: "\f002";
}

.fas-find:before {
	content: "\f002";
}

.fas-alert:before {
	content: "\f071";
}

.fas-close:before {
	content: "\f057";
}

.fas-minus:before {
	content: "\f068";
}

.fas-plus:before {
	content: "\f067";
}

.fas-times:before {
	content: "\f00d";
}

.fas-note:before {
	content: "\f15c";
}

.fas-circle-times:before {
	content: "\f057";
}

span.fa-sign-out-alt:before {
	content: "\f2f5";
}

span.fa-cog:before {
	content: "\f013";
}

span.fa-diag:before {
	content: "\f542";
}

span.fa-user-alt:before {
	content: "\f406";
}

span.fa-user-alt-slash:before {
	content: "\f4fa";
}

.remove-filter.fas {
	margin-right: 0.2em;
}

a.portax-trigger-manager > .fas {
	color: var(--primary-color);
}

div.left-content {
	text-align: left;
}

div.columns {
	display: flex;
}

div.columns > div.column {
	flex: 50%;
}

div.short-text-message {
	position: relative;
}

div.short-text-message > textarea {
	border-radius: 4px;
	border-color: var(--elem-border);
	width: 100%;
	min-height: 60px;
	font-size: 9pt;
	font-family: monospace;
}

div.short-text-message > span.counter {
	position: absolute;
	right: 8px;
	bottom: 8px;
}

form#modify-link-form div#parent,
form#modify-link-form div#ports {
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

form#modify-link-form div#parentsearch,
form#modify-link-form div#portsearch {
	margin-left: 0.25em;
	padding-bottom: 0.25em;
}

form#modify-link-form div.chckbxs {
	padding-top: 1.5em;
}

form#modify-link-form div#parent  > div.parent > span.removeParent:hover,
form#modify-link-form div#ports  > div.port > span.removePort:hover {
	color: var(--secondary-color);
}

form#modify-link-form div#parent > div.parent > span.removeParent:active,
form#modify-link-form div#ports > div.port > span.removePort:active {
	background-color: var(--secondary-color);
	color: var(--bg-color);
}

form#modify-link-form div#parent > div.parent > span.removeParent,
form#modify-link-form div#ports > div.port > span.removePort {
	margin-right: 0.25em;
	margin-left: 0.25em;
}

form#modify-link-form div.link-form-column {
	float: left;
	min-width: 20em;
	margin-right: 2em;
}

div#link > div#changelog {
	display: inline-block;
	min-width: 80%;
}

div.pager-badges > a > span.alarm.active {
	color: #DD0000;
}

td.alert-note.ma {
	vertical-align: top;
}

div#links_pager table td.grouped span.link_id,
div#links_pager table td.grouped span.link_desc,
div#links_pager table td.grouped span.link_type,
div#links_pager table td.grouped span.email {
	color: #888888;
}

div#links_pager table td.grouped span.description {
	font-weight: 800;
}

div#devices table td.grouped span.hostname {
	font-weight: 800;
}

li.autocomplete-multiline span.gray-italic-in-group,
div table td.grouped span.gray-italic-in-group {
	font-style: italic;
	color: #808080;
	display: block;
}

td.grouped span.text-gray-in-group {
	color: gray;
}

td.grouped > span.pager_phone,
td.grouped > span.pager_email,
td.grouped > span.pager_class,
td.grouped > span.pager_raised,
td.grouped > span.pager_source,
td.grouped > span.pager_impact,
td.grouped > span.wrap-group {
	display: block;
}

table.api-audit span.pager_response,
table.api-audit span.pager_request {
	font-family: monospace;
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

span.pager_sub_name {
	max-width: 320px;
	text-overflow: ellipsis;
	white-space: nowrap;
  overflow: hidden;
	display: block;
}

tr.trigger > td.val > span.pager_val {
	max-width: 8em;
	text-overflow: ellipsis;
	white-space: nowrap;
  overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
}

div.portax-pager-wrapper table tr td div.portax-pager-nav {
	float: left;
	text-align: left;
	line-height: 2em;
	vertical-align: baseline;
}

div.portax-pager-wrapper table tr td div.portax-pager-nav-tools {
	float: right;
	text-align: right;
	vertical-align: baseline;
	line-height: 2em;
}

div.portax-pager-wrapper table tr td div.portax-pager-nav-tools span,
div.portax-pager-wrapper table tr td div.portax-pager-nav-tools a {
	vertical-align: baseline;
}

div#portax-link-tabs ul li .fas-circle-times:before {
	line-height: 1.3;
}

div.radius-value > span {
	font-family: monospace;
	font-size: 100%;
}

div.radius-value-access-reject > span {
	color: #f00 !important;
	font-weight: bold;
}

div.interface-stack {
	text-align: initial;
	margin-bottom: 1em;
}

div.cable-channel-detail {
	width: 100%;
	text-align: center;
}

div.portax-path {
	align: left; text-align: left; margin: 4px; padding: 4px; border: 0px solid #f2f2f2;
}

div.messenger {
	display: none;
}

div.bulk-impact {
	padding: 4;
	color: #bbb;
}

div.device-group {
	white-space: normal;
	margin-top: 4px;
	margin-bottom: 0;
	padding: 2px;
	list-style-type: none;
	font-size: 6pt;
}

div.device-group.link {
	font-size: initial;
}

div.device-group > span.device {
	display: inline-block;
	background: var(--bg-color-info);
	border: 2px solid var(--bg-color-info);
	padding: 2px;
	border-radius: 2px;
	margin-right: 4px;
	margin-bottom: 4px;
	color: var(--tt-color);
}

div.device-group > span.device > span.hostname {
	margin-right: 4px;
}

textarea.e-mail {
  border-radius: 4px;
  border-color: var(--elem-border);
	background-color: var(--input-background-text);
  width: 100%;
  min-height: 240px;
  font-size: 9pt;
  font-family: monospace;
}

div.bulk-message.disabled {
	background: var(--elem-bg-disabled);
}

div.bulk-message.disabled > label.block {
	color: #999;
}

span.message-type {
	line-height: 16px;
	display: block;
}

div.portax-dialog.disabled > form.validate textarea[name=decomission],
form.hidden,
div.hidden {
	display: none;
}

div.message {
	position: relative;
}

div.message > hr {
	border-color: var(--elem-border);
}

div.message.disabled > label.toggleable {
	color: var(--hover-bg);
	display: none;
}

div.message.sms > span.counter {
	display: inline;
	position: absolute;
	right: 8px;
	bottom: 8px;
}

div.message.sms.disabled > span.counter {
	display: none;
}

div.message.disabled .user-input {
	background: #eee;
	display: none;
}

div.template-action {
	margin: 10px;
}

fieldset > div > label.radio {
	margin-bottom: 0.8em;
}

div.template-action > label.radio {
	vertical-align: initial;
}

div.template-action > label.radio > input[type=radio] {
	font-size: initial;
}

pre.message {
	margin: 0px;
	white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
	white-space: -pre-wrap; /* Opera */
	white-space: -o-pre-wrap; /* Opera */
	white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
	word-wrap: break-word; /* IE 5.5+ */
}

div#portax-link-tabs > div#portax-link-b2b div.sub-form-column {
	float: left;
	min-width: 20em;
	margin-right: 2em;
}

div#portax-link-tabs > div#portax-link-b2b > div#sub-actions {
	margin-bottom: 1em;
}

div#portax-link-tabs > div#portax-link-b2b > div#sub-edit div#sub-form-buttons {
	clear: both;
	padding-top: 1em;
}

div#portax-link-tabs > div#portax-link-b2b table td.grouped span.grey {
	color: #888888;
}

div#portax-link-tabs > div#portax-link-b2b table td.grouped span.name {
	font-weight: 800;
}

div#portax-link-tabs > div#portax-link-changelog table td.grouped span.field {
	font-weight: 800;
}

div#portax-link-tabs > div#portax-link-changelog table td.grouped span.grey {
	color: #888888;
}

div#portax-link-tabs > div#portax-link-tools div#sub-actions div.tools-action {
	margin: 0.5em 0;
}

div#portax-link-tabs > div#portax-link-tools div#sub-actions div.tools-action span.ui-selectmenu-text{
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

div.svn-info {
	color: var(--primary-color);
}

div.if-bond {
	white-space: normal;
	overflow: auto;
	min-width: 480px;
	max-width: 640px;
}

div.if-bond > span.if-bond-member > label.checkbox {
	margin: 0;
}

div.if-bond > span.if-bond-member {
	min-width: 8em;
	max-width: 12em;
	display: inline-block;
	padding: 2px;
	background: var(--bg-color-info);
	border-radius: 2px;
	margin: 2px;
}

div.if-bond > span.if-bond-member.list {
	min-width: initial;
	max-width: initial;
	background: var(--bg-color-2);
}

div.if-bond > span.if-bond-member > label {
	font-weight: initial;
	color: var(--hilite-color);
}

span.diff {
	font-family: monospace;
	white-space: pre;
	word-wrap: break-word;
	overflow: scroll;
	display: block;
	border-radius: 4px;
	color: lightgreen;
	margin: 0.4em;
	background-color: black;
	padding: 0.4em;
}

td.template-body {
	max-width: 32em;
	overflow: hidden;
}

td.template-description {
	width: 20em;
	word-wrap: break-word;
	white-space: normal;
}

.rrplain td.member-name {
	text-align: right;
	color: #aaa;
	font-family: italic;
}

div.full {
	display: table;
	width: 100%;
}

div.left, div.right {
	display: table-cell;
	width: 50%;
}

div.block {
	clear: both;
}

input.btn.floating {
	position: fixed;
	z-index: 99999;
	right: 20px;
	bottom: 20px;
}

.prepSpinner:before {
	content: "\f110";
	display: inline-block;
	font: normal normal normal 1em/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	animation: spinme 1.5s infinite ease-in-out both;
}

.jstree-default>.jstree-container-ul .jstree-loading>.jstree-ocl {
	background: none;
}

.jstree-default-small>.jstree-container-ul .jstree-loading> i:before {
	color: var(--primary-color);
	content: "\f110";
	display: inline-block;
	font: normal normal normal 1em/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	animation: spinme 1.5s infinite ease-in-out both;
}

@keyframes spinme {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}

div.checklist {
	white-space: normal;
	overflow: auto;
	width: 100%;
	margin-bottom: 0.8em;
}

div.checklist > label.checkbox {
	display: inline-block;
	font-weight: normal;
	margin-bottom: 0.2em;
	margin-right: 0.4em;
}

ul.main-menu {
	list-style-type: none;
	margin: 0px 0px 2px 0px;
	padding-left: 0;
	padding-top: 2px;
	padding-bottom: 2px;
}

div.menu-wrap > ul.main-menu {
	border-bottom: 1px solid var(--menu-border);
}

div.menu-wrap > ul.main-menu:last-child {
	border-bottom: 0px;
}

ul.main-menu > li {
	display: inline-block;
	margin-right: 4px;
}

ul.main-menu > li > a {
	font-weight: bold;
}

li#topStatus {
	float: right;
	margin-right: 5px;
	color: var(--primary-color);
}

.leaflet-popup table > thead > tr > th > a.portax-pager-ctl {
	color: #000;
}

.dark .leaflet-popup .rrplain {
	color: #222 !important;
}

.dark .leaflet-popup .rrplain .rg-status {
	color: #fff !important;
}

.checkbox, .radio {
  display: inline-block;
  position: relative;
  padding-left: 22px;
  cursor: pointer;
	line-height: 18px;
/*	margin-right: 0.4em; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox input, .radio input {
  position: absolute;
	visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
	border: 1px solid;
	border-color: var(--border-3d);
	border-radius: 3px;
	background-color: var(--input-background);
}

.radio > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
	border: 1px solid;
	border-color: var(--border-3d);
	border-radius: 50%;
	background-color: var(--input-background);
}

.checkbox > span:active, .radio > span:active {
  background-color: var(--input-active);
  border: 1px solid var(--input-active);
  color: var(--bg-color);
}

.checkbox > span:after, .radio > span:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox input:checked ~ span, .radio input:checked ~ span {
}

.checkbox input:checked ~ span:after, .radio input:checked ~ span:after {
  display: block;
}

.checkbox > textarea {
	margin-top: 0.4em;
	margin-bottom: 0.8em;
	display: block;
	visibility: visible;
	margin-left: -22px;
	width: calc(100% + 22px);
}

.checkbox > textarea::placeholder {
	color: var(--bg-color-error);
}

.checkbox > textarea.hidden,
.checkbox:has(> input:checked) + textarea {
	visibility: hidden;
}

.checkbox > input[type=checkbox] ~ div.help {
	display: none;
	font-size: 0.9em;
}

.checkbox > input[type=checkbox]:checked ~ div.help {
	display: block;
}

.checkbox > input[type=checkbox] ~ div.options {
	margin-left: -22px;
	width: calc(100% + 22px);
	display: none;
}

.checkbox > input[type=checkbox]:checked ~ div.options {
	display: block;
}

.checkbox > span:after {
  left: 6px;
  top: 2px;
  width: 3px;
  height: 8px;
  border: solid var(--primary-color);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.radio > span:after {
  left: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
	border-radius: 50%;
	background: var(--primary-color);
}

*:focus {
	outline: none;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  background-image: none !important;
}

.ui-button-icon-only span.ui-button-icon:before,
.ui-dialog-titlebar-close:before,
.ui-datepicker-prev:before,
.ui-datepicker-next:before {
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  font-weight: normal;
  align-items: center;
  justify-content: center;
	text-indent: 0;
}

.ui-datepicker-prev:before {
  content: "\f100";
}

.ui-datepicker-next:before {
  content: "\f101";
}

span.ui-icon-circle-plus:before {
	content: "\f055";
}

span.ui-icon-circle-minus:before {
	content: "\f056";
}

span.ui-icon-circle-plus, span.ui-icon-circle-minus {
  background-image: none !important;
}

.ui-dialog-titlebar-close span {
  background-image: none !important;
}

.ui-dialog-titlebar-close:before {
	content: "\f057";
}

div.tools.command-output {
	margin-left: auto;
	margin-right: auto;
	width: 800px;
}

pre.command-output {
	font-size: 8pt;
	font-weight: bold;
	text-align: left;
}

.dark pre.command-output {
	color: lightgreen;
}

div.network-family {
	display: none;
}

label:has(> select > optgroup > option[value=aut]:checked) ~ div.network-family,
label:has(> select > optgroup > option[value=una]:checked) ~ div.network-family {
	display: block;
}

div.network-fixed-pool {
	display: none;
}

div.keep-reserved {
	display: none;
}

label:has(> select[name="fixed_range"] > option[value="0"]:checked) ~ div.keep-reserved {
	display: block;
}

label:has(> select > optgroup > option[value=cpe]:checked) ~ div.network-fixed-pool,
label:has(> select > optgroup > option[value=ati]:checked) ~ div.network-fixed-pool,
label:has(> select > optgroup > option[value=fwb]:checked) ~ div.network-fixed-pool,
label:has(> select > optgroup > option[value=sfp]:checked) ~ div.network-fixed-pool,
label:has(> select > optgroup > option[value=aut]:checked) ~ div.network-fixed-pool {
	display: block;
}

label:has(> select > optgroup > option:not([value=""]):checked) ~ div.network-tags {
	display: none;
}

div.network-family ~ div.network-tags {
	display: block;
}

div.network-tags > ul.tags {
	margin-top: 0.2em;
}

div.network-tags > ul.tags > li > label {
	color: var(--bg-color);
	margin: 0;
}

div.portax-version {
	float: left;
	font-size: 8px;
	position: relative;
	min-width: 101px;
	min-height: 23px;
	height: 23px;
}

div.portax-version > div.portax-logo > a > span.portax-version-text {
	position: absolute;
	bottom: -3;
	right: 0;
	font-weight: bold;
	line-height: initial;
	color: var(--primary-color);
	opacity: 0.5;
}

div.charts-tooltip > div { color: #000 !important }

div.disabled-device-overlay {
	pointer-events: none;
  opacity: 0.5;
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
}

span.es-highlight {
	margin: 2px;
	padding: 1px;
	border-radius: 2px;
	display: inline-block;
	background-color: var(--primary-color);
	color: var(--bg-color);
	white-space: nowrap;
}

span.es-highlight.es-highlight-sm {
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: bold;
}

.portax-table-row.dhcp-message > td {
	font-family: monospace;
	font-size: 8pt;
}

span > button, a > button, button[data-toggle] {
	cursor: pointer;
}

button.danger, button.ui-button.danger {
	background: red;
	border-color: lightcoral darkred darkred lightcoral;
}

button.danger[disabled] {
	cursor: initial;
	border-color: var(--border-3d);
	background-color: var(--input-background);
}

table.device-status {
	border-spacing: 2px;
	border-collapse: separate;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.1em;
}

table.device-status > tbody > tr > td.tdr, table.device-status > tbody > tr > td.tdl {
	vertical-align: middle;
}

table.device-status > tbody > tr.uptime {
	display: none;
}

table.device-status.inventory > tbody > tr.uptime,
table.device-status.isk > tbody > tr.uptime,
table.device-status.lxt > tbody > tr.uptime,
table.device-status.z01 > tbody > tr.uptime,
table.device-status.z60 > tbody > tr.uptime,
table.device-status.z70 > tbody > tr.uptime,
table.device-status.z80 > tbody > tr.uptime,
table.device-status.nic > tbody > tr.uptime,
table.device-status.b2b > tbody > tr.uptime,
table.device-status.cam > tbody > tr.uptime {
	display: table-row;
}

table.device-status > tbody > tr.uptime > td > span.uptime::empty {
	cursor: pointer;
	margin: 0;
	border: 0;
	display: inline-block;
	font: normal normal normal 1em/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	animation: portax-graph-spin-throbber  2s infinite linear;
}

table.device-status > tbody > tr.uptime > td > span.uptime::empty:after {
	content: "\f110";
}

td.gps {
	font-weight: normal;
}

#seldiv div.form-reset {
	float:right;
}

#seldiv div.select-interfaces {
	margin-top: 6px;
}

span.pager_description, span.pager_name {
	white-space: normal;
	overflow-wrap: break-word;
}

span.pager_if_descr {
	white-space: normal;
	display: inline-block;
	/* border-bottom: 1px dotted var(--elem-border); */
	width: 100%;
}

td.inet_service.other_services > ul.tags:empty::before,
span.pager_started:empty::before,
span.pager_finished:empty::before,
span.pager_event:empty::before,
span.pager_alt_pn:empty::before,
span.pager_args:empty::before,
span.pager_params:empty::before,
span.pager_ip:empty::before,
span.pager_loid:empty::before {
  content: "\2014";
}

span.pager_loid {
	font-size: 100%;
	font-family: monospace;
	text-transform: uppercase;
}

span.pager_note {
	white-space: pre-wrap;
}

span.pager_note.block {
	display: block;
}

div.div {
	display: block;
}

div.p5 {
	padding: 5px;
}

span.inline-block {
	border-radius: 2px;
	padding: 2px;
	display: inline-block;
	color: var(--tt-color);
}

span.whalebone-crit {
	background-color: var(--bg-color-error);
	color: var(--primary-color);
}

span.whalebone-warn {
	background-color: #C9B215;
}

span.whalebone-log {
	background-color: #48C4EC;
}

span.inline-block > span.count {
	background-color: var(--bg-color);
	font-size: 0.8em;
	padding: 2px;
	border-radius: 2px;
	color: var(--primary-color);
}

span.pager_old_value, span.pager_new_value {
	font-family: monospace;
	word-break: break-word;
	white-space: pre-wrap;
}

table.system-properties {
	border: 0;
	margin: 0;
	border-collapse: collapse;
	line-height: 24px;
}

.ff-mono {
	font-family: monospace !important;
}

form.portax-property > input.text, form.portax-property > select {
	width: 100%;
	max-width: initial;
}

form.portax-property > div.note {
	margin-top: 4px;
}

.portax-dialog .note {
	margin-top: 0;
	white-space: normal;
	overflow-wrap: normal;
}

.portax-dialog .note.note-danger {
	color: red;
}

div.input-fas {
	margin-bottom: 5px;
}

div.input-fas > .fas {
/*	position: absolute; */
/*  padding: 5px; */
  padding: 2px;
}

label > .fas {
	margin-left: 0.4em;
}

div.input-fas > input.input {
	text-align: center;
}

table > tbody > tr > td.action-buttons > span > button.btn-subscription-manager {
/*	visibility: hidden; */
}

table > tbody > tr:hover > td.action-buttons > span > button.btn-subscription-manager {
/*	visibility: visible; */
}

div.portax-row {
	display: flex;
}

div.portax-col {
	width: 12em;
	display: flex;
}

div.portax-col.portax-col-l {
	width: 24em;
}

div.portax-col.portax-col-ml {
	width: 16em;
}

div.portax-col.portax-col-xl {
	width: 36em;
}

div.portax-col.portax-col-xxl {
	width: 100%;
}

div.portax-col.portax-col-m {
	width: 6em;
}

div.portax-col > label.block {
	display: inline-block;
	flex-grow: 1;
	flex-basis: 0;
}

div.portax-col > label {
	padding: 0.2em;
}

.ta-center {
	text-align: center;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--primary-color) !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	color: var(--bg-color) !important;
}

.dataTables_wrapper .dataTables_info {
	color: var(--blur-color);
}

ul.documents > li + li::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.5ch;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: currentColor;
}

ul.documents {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}

.f-l {
	float: left;
}

.f-r {
	float: right;
}

.lh-24 {
	line-height: 24px;
}

tr.root-user {
	font-weight: bold;
	background: var(--table-bg-color);
}

.ui-widget-content.nb {
	border: none;
}

.ui-widget-content.p-10 {
	padding: 10px;
}

pre.snmp-trap-data {
	max-width: 24em;
	max-height: 10em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rrplain > tbody > tr > td.element.grouped {
	max-width: 16em;
	overflow: hidden;
	text-overflow: ellipsis;
}

pre.portax-ldif > b {
	color: var(--inverse);
}

span.timer {
	height: 0px;
	width: 100%;
	display: inline-block;
	margin-top: 2px;
	border-top: 2px solid var(--blur-color);
}

span.timer.timer-init {
	border-top: 2px solid var(--a-color);
}

span.hsrp-state5,
span.hsrp-state6 {
	background: var(--bg-color-info);
	padding: 0 1 0 1;
}

span.hsrp-state5,
span.hsrp-state6,
.ip-address.is-fixed,
.ip-address.is-static {
	color: var(--tt-color);
	padding: 0.1em 0.2em 0.1em 0.2em;
	border-radius: 2px;
}

.pager_gateway.wrap-group > .ip-address {
	margin-top: 0.1em;
	display: inline-block;
}

.ip.grouped > .ip-address.is-fixed {
	display: inline-block;
}

.ip-address.is-fixed {
	background: var(--bg-color-info);
}

.ip-address.is-static {
	background: var(--blue);
}

.whalebone-action {
	float: left;
	margin: 2px;
}

dl.docsis-attribute-sel {
	text-align: left;
	font-size: 8pt;
	margin-bottom: 1em;
	white-space: normal;
}

dl.docsis-attribute-sel > dt {
	font-weight: bold;
	margin-bottom: 0.2em;
}

span.import-result {
	border-radius: 3px;
	display: inline-block;
	padding: 0.1em;
	margin: 0.1em;
	min-width: 4em;
	text-align: center;
	color: #000;
}

span.import-result.OK {
	background-color: var(--green);
	border-color: var(--dark-green);
}

span.import-result.FAIL {
	background-color: var(--red);
	border-color: var(--dark-red);
}


span.import-result {
	border-radius: 3px;
	display: inline-block;
	padding: 0.1em;
	margin: 0.1em;
	min-width: 4em;
	text-align: center;
	color: #000;
}

span.import-result.OK {
	background-color: var(--green);
	border-color: var(--dark-green);
}

span.import-result.FAIL {
	background-color: var(--red);
	border-color: var(--dark-red);
}


dl.docsis-attribute-sel > dd {
	display: inline-block;
	margin-inline-start: 0px;
	margin-bottom: 2px;
}

.ml-10 {
	margin-left: 10px;
}

.mb-10 {
	margin-bottom: 10px;
}

.mt-10 {
	margin-top: 10px;
}

div.simple-tabs.ui-tabs {
	border: none;
	padding-left: 0;
	padding-right: 0;
}

div.simple-tabs.ui-tabs > ul.ui-tabs-nav {
	background: initial;
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0;
	border-color: var(--elem-border);
	padding: 0;
}

div.simple-tabs.ui-tabs > ul.ui-tabs-nav > li.ui-tab {
	border-color: var(--elem-border);
}

div.simple-tabs.ui-tabs > ul.ui-tabs-nav > li.ui-tab.ui-tabs-active {
	background: var(--bg-color);
}

div.templates.simple-tabs.ui-tabs > div.ui-tabs-panel {
	padding: 0;
}

div.simple-tabs.ui-tabs > div.ui-tabs-panel {
	margin: 0;
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-color: var(--elem-border);
}

div.simple-tabs.templates > div.ui-tabs-panel {
	background: var(--input-background-text);
}

div.simple-tabs.templates > div.ui-tabs-panel > textarea.template ~ div.hidden {
	padding: 0.4em;
	background: var(--bg-color);
	border-top: 1px solid var(--elem-border);
}

div.simple-tabs.templates > div.ui-tabs-panel > textarea.template {
	margin: 0.4em;
	border: none;
}

div.simple-tabs.templates.ui-tabs > ul.ui-tabs-nav > li.ui-tab.ui-tabs-active {
	background: var(--input-background-text);
}

div.simple-tabs.templates.ui-tabs > ul.ui-tabs-nav > li.ui-tab {
	background: initial;
}

.portax-box > span {
	vertical-align: initial;
}

.portax-box.portax-box-center {
	text-align: center;
}

span.portax-pager-filterable {
	vertical-align: initial;
}

span.portax-pager-filterable > a.portax-pager-filter {
	padding: 0.2em;
	display: none;
	font-size: 0.8em;
	vertical-align: top;
	color: var(--a-color-active);
}

span.portax-pager-filterable > a.portax-pager-filter:hover {
	background: var(--a-color-active);
	color: var(--bg-color);
	border-radius: 2px;
}

span.portax-pager-filterable.filter-active > a.portax-pager-filter,
span.portax-pager-filterable:hover > a.portax-pager-filter {
	display: inline-block;
}

td.if-graph {
	text-align: center;
}

span.pager_from_time, span.pager_to_time wrap {
	white-space: nowrap;
}

tfoot > tr:not(.empty-table-footer) > td > div.portax-pager-filter {
	padding-left: 0.4em;
}

div.portax-pager-filter input.text {
	width: initial;
}

div.portax-pager-filter {
	display: inline-block;
	float: left;
}

a[role=button] {
	cursor: pointer;
}

.flex {
	display: flex;
}

span.flex {
	align-items: baseline;
}

.flex > div {
	flex-grow: 1;
	flex-basis: 0;
	padding: 0 0.8em 0 0.8em;
}

span.flex > span {
	flex-grow: 1;
}

.flex ~ div.portax-dialog {
	padding: 0 0.8em 0 0.8em;
}

div.block.checklist.portax-box {
	padding: 0.4em;
	box-sizing: border-box;
}

div.block.checklist > label.block > select {
	margin-bottom: 0.4em;
}

div.block.checklist > label.checkbox {
/*	margin-bottom: 0; */
}

.flex input.text,
.flex select.portax-ui {
/*	width: 20em; */
}

.flex.portax-dialog textarea {
	width: 100%;
}

.inline-block {
	display: inline-block;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

span.bootstrap-db-error {
	color: red;
}

span.bootstrap-not-queued {
	color: var(--blur-color);
}

span.bootstrap-finished {
	color: var(--blur-color);
}

span.bootstrap-in-progress {
	color: #24BC14;
}

span.bootstrap-queued {
	color: var(--log-warning);
}

.fixed-dialog {
	position: fixed;
}

.inventory-templates-management {
	line-height: 24px;
}

.inventory-templates-management button {
	display: inline-block;
	margin-left: 0;
	float: left;
	margin-right: 0.4em;
	max-width: 30em;
}

.inventory-templates-management span {
	float: left;
	display: inline-block;
	margin-right: 0.4em;
}

.ui-widget-overlay {
    opacity: .50;
    filter: Alpha(Opacity=50);
    background-color: rgb(50, 50, 50);
}

div.portax-box.select-region {
	padding: 0.4em;
	margin-top: 0.4em;
	width: 100%;
	box-sizing: border-box;
}

div.portax-box.select-region > label.block {
	margin-top: 0;
}

div.portax-box.select-region > span.portax-input-button {
	margin: 0.4em 0 0 0;
	width: 100%;
}

div.portax-dialog > h3,
div.portax-dialog > div.portax-metadata-store > p {
	margin-top: 0;
}

.ui-dialog-buttonpane button.hidden {
	display: none;
}

.ui-dialog-buttonpane.general button.hidden {
	display: inline-block;
}

.validate input.text.with-help,
.validate select.with-help {
	margin-bottom: 0.2em;
}

.validate input.text.with-help ~ span.help,
.validate select.with-help ~ span.help {
	font-size: small;
	font-weight: normal;
}

.validate input.text:invalid,
.validate select:invalid {
	border-color:var(--bg-color-error);
}

.crm label.block > select,
.crm label.block:not(.checkbox) > textarea,
.crm label.block > input[type=text],
.crm label.block > input.text {
	margin-bottom: 0.2em;
}

label.block > select,
label.block:not(.checkbox) > textarea,
label.block > input[type=text],
label.block > p,
label.block > a.selected-template,
label.block > input.text {
	margin-left: 0;
	margin-top: 0.2em;
	display: block;
	margin-bottom: 0.8em;
}

a.selected-template > span.template-name { margin-right: 0.2em; }

div.portax-box > label.block > input.text {
	margin-bottom: auto;
}

label.block > span.portax-input-button {
	display: flex;
	margin-bottom: 0.8em;
	margin-top: 0.2em;
}

.ui-dialog .ui-dialog-content {
	padding: 1em 1em;
}

.bootstrap-status {
	margin-bottom: 0.8em;
}

ul.eventq:empty {
	display: none;
}

.bootstrap-status.poller {
	font-size: 12px;
	text-align: left;
	margin-bottom: 0.2em;
}

label.block ~ label.radio,
label.block:not(.select) ~ label.checkbox {
	margin-top: 0.2em;
	display: table;
}

th.weight {
	width: 4em;
}

.subscriber-tools > div {
	display: flex;
}

.subscriber-tools > div > a > button {
	margin: 0;
}

.subscriber-tools > div > a,
.subscriber-tools > div > form > input,
.subscriber-tools > div > button {
	margin: 0px 4px 4px 0px;
}

.datepicker > label {
	vertical-align: initial;
}

div.alert-note-edit {
	width: 100%;
}

div.alert-note-edit > p {
	margin: 0;
}

div.alert-note-edit > p.note-text {
	float: left;
}

p.note-text.netcool > span.pre-line {
	font-family: monospace;
}

div.alert-note-edit > p.note-edit {
	float: right;
}

div.alert-note-edit > p.note-edit > span.edited{
	color: var(--disabled-text);
	font-size: 80%;
}

div.alert-note-edit > p > .fas.fas-edit {
	color: var(--a-color);
}

div.alert-note-edit > p > .fas.fas-edit:hover {
	color: var(--primary-color);
}

.fas.fas-link:hover {
	color: var(--primary-color);
}

table.dim > tbody > tr.portax-pullable.portax-pullable-pulled {
	border-bottom: var(--hover-bg);
}

table.dim > tbody > tr.portax-pullable.portax-pullable-pulled + tr.pulled,
table.dim > tbody > tr.portax-pullable.portax-pullable-pulled {
	background: var(--hover-bg);
	opacity: initial;
}

table.dim > tbody > tr.pulled,
table.dim > tbody > tr.portax-pullable {
	opacity: 0.2;
}

table > tbody > tr.portax-pullable:not(.portax-pullable-pulled) + tr.pulled {
	display: none;
}

.grouped > a.fixed-range-toggle {
	display: block;
}

a.fixed-range-toggle {
	cursor: pointer;
}

.pre {
	white-space: pre;
	overflow: hidden;
	overflow-wrap: normal;
}

.pre-line {
	white-space: pre-line;
}

.tooltipster-content > pre {
	margin: 0;
	font-size: 0.8em;
	line-height: 1.2em;
}

.rrplain > tbody > tr > td > label.checkbox {
	margin: 0;
}

.rrplain > tbody > tr > td.monitor {
	vertical-align: middle;
}

img.preview-image {
	max-width: 640px;
}

span.http-code {
	font-weight: bold;
}

span.http-code,
span.dhcp-restart-result {
	border-radius: 3px;
	display: inline-block;
	padding: 0.1em;
	min-width: 4em;
	text-align: center;
	color: var(--bg-color);
	font-family: monospace;
	font-size: 11px;
}

span.hsrp-state6,
span.http-code.http-code-200,
span.dhcp-restart-result.OK {
	background-color: var(--green);
	border-color: var(--dark-green);
}

span.http-code.http-code-400,
span.http-code.http-code-403,
span.http-code.http-code-404,
span.http-code.http-code-405,
span.dhcp-restart-result.FAIL {
	background-color: var(--red);
	border-color: var(--dark-red);
}

span.hsrp-state5,
span.http-code.http-code-500,
span.dhcp-restart-result.PENDING {
	background-color: var(--orange);
	border-color: var(--dark-orange);
}

span.dhcp-restart-result.HOLD {
	background-color: gray;
	border-color: darkgray;
}

pre.output {
	background-color: black;
	color: white;
}

pre.output.OK {
	color: var(--green);
}

pre.output.FAIL {
	color: var(--red);
}

div.portax-box.portax-box-info > div.event-pending.prepSpinner:before {
	display: none;
}

ul.addresses {
	display: flex;
	flex-wrap: wrap;
	padding-inline-start: 0;
}

ul.addresses li {
	font-size: 110%;
	margin-bottom: 5px;
}

ul.addresses li span.fas-close:before {
	font-size: initial;
}

div#tab-splitter div.action-results div.footer,
div#tab-splitter div.action-buttons button{
	margin-bottom: 1em;
}

div.action-buttons div.action-results div.error,
div#aggregator-riser-result div.error,
div.address-action-status div.error {
	border-radius: 4px;
	padding: 5px;
}

div.action-buttons div.action-results div.info,
div#aggregator-riser-result div.info,
div.address-action-status div.info {
	background: #5A5;
	border: 1px solid #363;
	border-radius: 4px;
	padding: 5px;
}

.portax-confirm-dialog {
	min-width: 480px;
}

div.dhcp-status {
	min-width: 480px;
}

div.dhcp-status > ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

span.import-result {
	border-radius: 3px;
	display: inline-block;
	padding: 0.1em;
	margin: 0.1em;
	min-width: 4em;
	text-align: center;
	color: #000;
}

span.import-result.OK {
	background-color: var(--green);
	border-color: var(--dark-green);
}

span.import-result.FAIL {
	background-color: var(--red);
	border-color: var(--dark-red);
}

span.if_speed {
	font-weight: bold;
}

@-webkit-keyframes visualbell {
    from { background: var(--hover-bg); opacity: 0.2 }
    to   { background: default; }
}

@keyframes visualbell {
    from { background: var(--hover-bg); opacity: 0.2 }
    to   { background: default; }
}

.visualbell {
	-webkit-animation-name: visualbell;
	-webkit-animation-duration: 0.3s;

	animation-name: visualbell;
	animation-duration: 0.3s;
}

.grouped > span.ma {
	display: block;
}

div.file.create > label.name,
div.file.create > label.link {
	display: none;
}

div.file.link.create > label.name,
div.file.link.create > label.link {
	display: inline;
}

div.property-description {
	white-space: normal;
}

.message > pre {
	margin: 0;
}

div.tooltipster-content > table.cable_attributes td.caption {
	text-align: center;
}

div.tooltipster-content > table.cable_attributes td.header {
	text-align: center;
	border-bottom: 1px solid silver;
	padding-top: 0.5em;
}

div.tooltipster-content > table.cable_attributes td.attr {
	vertical-align: top;
	text-align: right;
	font-style: italic;
	color: grey;
}

div.tooltipster-content > table.cable_attributes td.value {
	white-space: normal;
	vertical-align: top;
}

div.tooltipster-content > table.cable_attributes {
	color: black;
}

table.cable-info td.name {
	width: 50%;
	text-align: right;
}

.sysdescr {
	font-size: 9pt;
	font-weight: normal;
	font-family: monospace;
	overflow-wrap: break-word;
	white-space: normal;
	border-radius: 4px;
	border: 1px solid var(--elem-border);
	padding: 0.2em;
	background: var(--input-background-text);
	color: var(--primary-color);
}

tr.rxPowerFail > td.rx,
tr.txPowerFail > td.tx,
tr.dsSnrCrit > td.ds_snr,
tr.usSnrCrit > td.us_snr {
	background: red;
	color: black;
}

tr.dsSnrWarn > td.ds_snr,
tr.usSnrWarn > td.us_snr {
	background: orange;
	color: black;
}

td.note > pre {
	white-space: normal;
}

input.manual.fixed-host-mac,
select.fixed-host-mac {
	font-family: monospace;
	font-size: 0.9em;
}

table.portal-audit > tbody > tr > td.args {
	padding: 0.2em;
}

table.portal-audit > tbody > tr > td.mac > a {
	font-family: monospace;
	font-size: initial;
	display: block;
}

table.portal-audit > tbody > tr > td.args > span.pager_args {
	white-space: pre-wrap;
	height: 100%;
	width: 100%;
	display: block;
	margin: 0.2em;
}

table.portal-audit > tbody > tr > td.uri.grouped > span.pager_uri {
	display: block;
}

ul.results {
	margin-left: none;
}

ul.results > li {
	list-style: none;
}

.tooltipster-box > .tooltipster-content > time {
	width: 100%;
	display: inline-block;
	text-align: center;
}

span.tooltip > time {
	display: none;
}

div.telemetry {
	min-height: 320px;
	position: relative;
}

div.telemetry.loader > button.refresh {
	display: none;
}

div.telemetry > div.values {
	display: flex;
	flex-wrap: wrap;
}

div.telemetry > time {
	visibility: hidden;
	position: absolute;
	font-size: large !important;
	font-weight: bold;
	color: var(--blur-color);
	right: 48;
	top: 0;
}

div.telemetry.update-pending > time {
	visibility: visible;
}

div.telemetry > div.refresh-response {
	text-align: right;
	font-size: large;
	color: var(--blur-color);
}

div.telemetry > div.refresh-response > a {
	cursor: pointer;
	text-decoration: none;
}

div.telemetry.status_value1 {
	filter: saturate(0);
}

div.telemetry > div.values > div.value {
	min-width: 16em;
	padding: 0.2em;
	margin: 0.2em;
}

div.telemetry > div.telemetry-container {
	height: 240px;
}

div.telemetry.offline > div.values,
div.telemetry.offline > div.telemetry-container {
	filter: saturate(0);
}

div.telemetry > div.values > div.value > span,
div.telemetry > div.values > div.value > label {
	display: block;
}

div.telemetry > div.values > div.value > label::after {
}

div.telemetry > div.values > div.value > label {
	color: var(--blur-color);
	text-align: right;
	min-width: 16em;
}

div.telemetry > div.values > div.value > span {
	text-align: right;
	font-size: large;
	min-width: 8em;
}

td.relay_tags > ul.tags > li,
td.other_services > ul.tags > li,
td.role > ul.tags > li,
td.groups > ul.tags > li,
td.tags > ul.tags > li {
	font-size: small;
}

.fas-recycle:before {
	content: "\f1b8";
}

span.last-ping > span.status,
time.last-ping ~ span.status {
	height: 0.6em;
	width: 0.6em;
	display: inline-block;
	border-radius: 50%;
}

span.last-ping > span.status {
	margin-right: 0.2em;
}

time.last-ping ~ span.status {
	margin-left: 0.2em;
}

span.last-ping > span.status,
time.last-ping ~ span.status {
	background-color: gray;
}

span.last-ping.up > span.status,
time.last-ping.up ~ span.status {
	background-color: var(--dark-green);
}

span.last-ping.down > span.status,
time.last-ping.down ~ span.status {
	background-color: var(--dark-red);
}

div.simple-tabs.templates > div.template-tab.audit-tab.ui-tabs-panel {
	background: initial;
}

div.simple-tabs.templates > div.template-tab.audit-tab.ui-tabs-panel table.rrplain > tfoot > tr.empty-table-footer {
	border-top: none;
}

div.fullscreen {
	position: relative;
}

div.fullscreen > span {
	position: absolute;
	right: 20;
	top: 20;
	cursor: pointer;
	padding: 0.5em;
	color: var(--primary-color);
  font: normal normal normal 1em/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div.fullscreen > span.toggle:hover {
	background-color: var(--a-color);
	color: var(--bg-color);
	border-radius: 2px;
}

div.fullscreen > span.toggle:after {
	content: "\f424";
}

div.fullscreen.enabled > span.toggle:after {
	content: "\f422";
}

div.fullscreen > div.info {
	text-align: right;
}

button[portax-role="_downstreamSpectrum"]:after {
	content: "\f83e";
}

button[portax-role="_downstreamSpectrum"] {
	padding: 0.5em;
  font: normal normal normal 1em/1 FontAwesome;
	font-size: 0.6em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div.spectrum-tools {
	position: absolute;
	right: 10;
	top: 10;
}

button.spectrum-envelope {
	min-width: 12em;
}

.ui-widget-content .leaflet-control a:hover {
	text-decoration: none;
}
svg.leaflet-attribution-flag {
	display: none !important;
}

div.leaflet-container div.leaflet-control-attribution {
	font-size: 75%;
	opacity: 50%;
}

div.leaflet-container div.leaflet-control-attribution:hover {
	opacity: 100%;
}

div.pickermap div.leaflet-container {
	cursor: crosshair;
}

div.map-wrapper div.leaflet-container div.leaflet-tile-pane div.leaflet-layer.grayscale {
	filter: grayscale();
}

div.map-wrapper div.leaflet-container div.leaflet-popup-content {
	overflow: auto;
	padding-right: 14px;
	box-sizing: content-box;
}

div.map-wrapper div.leaflet-container div.leaflet-popup-content div.infowindow-header {
	white-space: initial;
	min-width: 30em;
}

div.map-wrapper .leaflet-aim-mode {
	cursor: crosshair;
}

div.map-wrapper .portax-marker-clusterer-coverage {
	fill-color: rgba( 128, 128, 128, 0.2);
	stroke-dasharray: 1 1;
	stroke: black;
	stroke-width: 1;
	stroke-linecap: butt;
}

div.map-wrapper .portax-marker-cluster  {
	transition: 0.15s ease-in-out;
}
div.map-wrapper .portax-marker-cluster:hover  {
	z-index: 1000000 !important;
	transition: 0.15s ease-in-out;
}

div.map-wrapper .portax-marker-cluster svg {
	position: absolute;
	z-index: auto;
	fill-opacity: 0.8;
	transition: 0.15s ease-out;
}
div.map-wrapper .portax-marker-cluster:has( ~ .portax-marker-cluster:hover),
div.map-wrapper .portax-marker-cluster:hover ~ .portax-marker-cluster:not(:hover) {
	filter: grayscale();
	transition: 0.15s ease-in-out;
}
div.map-wrapper .portax-marker-cluster:hover svg {
	fill-opacity: 1;
	transform: scale( 1.5, 1.5);
	transition: 0.15s ease-out;
}
/*
div.map-wrapper .portax-marker-cluster svg path {
	transition: 0.2s ease-out;
}
div.map-wrapper .portax-marker-cluster:hover svg path {
	transform: rotate(0.5turn);
	transition: 0.2s ease-out;
}
*/
div.map-wrapper .portax-marker-cluster svg text {
	font-size: 90px;
	font-weight: bold;
	fill: black;
}
div.map-wrapper .portax-marker-cluster svg text[class] {
	stroke: #606060;
	stroke-width: 2px;
	stroke-linecap: butt;
}
div.map-wrapper .portax-marker-cluster svg .other {
	fill: rgb( 0, 136, 255);
}
div.map-wrapper .portax-marker-cluster svg .online {
	fill: limegreen;
}
div.map-wrapper .portax-marker-cluster svg .warn {
	fill: orange;
}
div.map-wrapper .portax-marker-cluster svg .offline {
	fill: grey;
}
div.map-wrapper .portax-marker-cluster svg .crit {
	fill: red;
}
div.map-wrapper .portax-marker-cluster-large svg {
	width: 60;
	top: -10px;
	left: -10px;
}
div.map-wrapper .portax-marker-cluster-large svg text {
	font-size: 70px;
}
div.map-wrapper .portax-marker-cluster-medium svg {
	width: 50;
	top: -5px;
	left: -5px;
}
div.map-wrapper .portax-marker-cluster-medium svg text {
	font-size: 80px;
}

div.map-wrapper .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

div.map-wrapper .leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

div.map-wrapper div.mapDivMarker.home > svg > path.entrance {
	sroke-width: 0;
	fill: white;
	fill-opacity: 0.5;
	opacity: 0.8;
}
div.map-wrapper div.mapDivMarker.home > svg > path.house {
	sroke-width: 0;
	fill: gray;
	opacity: 0.8;
}

div.map-wrapper div.mapDivMarker.home.online > svg > path.house {
	fill: limegreen;
}

div.map-wrapper div.mapDivMarker.home.crit > svg > path.house {
	fill: red;
}

div.map-wrapper div.mapDivMarker.home.warn > svg > path.house {
	fill: orange;
}
div.map-wrapper div.mapDivMarker.home > div.count {
	position: absolute;
	top: -1;
	left: 6;
	font-size: 12px;
	font-family: sans-serif;
	text-shadow: 0px 0px 0.5px #000;
}

div.map-wrapper div.mapDivMarker.home:has(svg:hover, div:hover) > * {
	opacity: 0.3;
}

div.map-wrapper div.mapDivMarker.editPath svg > g > path.mercedes {
	fill: #0088ff;
	fill-opacity: 0.2;
	stroke: #0088ff;
	stroke-width: 20;
}

div.map-wrapper div.leaflet-portaxTrafficPoly-pane svg path.leaflet-interactive.edited {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' style='fill:red;fill-opacity:0.2;stroke:red;stroke-width:20;' overflow='visible'><g transform='translate(2 2) scale(0.1) rotate(-10 100 100)'><path d='M 0,100 a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0 z M100,100 l-47,-92 M100,100 l-47,92 M100,100 l92,0' /></g></svg>") 12 12,auto;
}

.portax-dialog .tagsinput {
	font-size: 1em;
	padding: 2px;
	font-family: arial, sans-serif;
	font-weight: normal;
	border: 1px solid var(--elem-border);
	border-radius: 3px;
	color: var(--primary-color);
	background-color: var(--input-background-text);
	line-height: 20px;
	margin-top: 2px;
	flex-flow: row;
	margin-bottom: 0.8em;
}

.portax-dialog .tagsinput.focus {
	border-color: var(--elem-border);
}

.portax-dialog .tagsinput .tag {
	margin: 0 5px 0 0;
	padding: 0px 16px 0px 4px;
	border-color: var(--border-3d);
	background-color: var(--input-background);
	color: var(--primary-color);
}

.portax-dialog .tagsinput .tag .tag-remove {
	width: 20px;
	height: 20px;
	margin: 0;
}

.portax-dialog .tagsinput div input {
	margin: 0;
	padding: 0;
	font-size: 1em;
}

.portax-dialog .tagsinput .tag .tag-remove:after, .portax-dialog .tagsinput .tag .tag-remove:before {
	top: 9px;
	left: 8px;
	width: 8px;
	background: var(--red);
}

label.auth-type ~ div.ignore-redirects {
	display: block;
}

label.auth-type:has(option[value=""]:checked) ~ div.ignore-redirects,
label.auth-type:has(option[value="none"]:checked) ~ div.ignore-redirects {
	display: none;
}

label.auth-type ~ div.redirect-template {
	display: none;
}

label.auth-type:has(option[value="none"]:checked) ~ div.redirect-template {
	display: block;
}

td.errors > ul.results > li {
	white-space: pre-wrap;
	word-wrap: anywhere;
}

table.docsis-upstream > tbody > tr.disabled {
	background-color: #ff000020;
}

label.trigger-operator:has(select.portax-trigger-operator > option[value="rawnz"]:checked) ~ label.trigger-threshold,
label.trigger-operator:has(select.portax-trigger-operator > option[portax-trigger-cf="raw"]:checked) + label.trigger-period {
	display: none;
}

select.portax-trigger-period + input.portax-trigger-period {
	display: none;
}

select.portax-trigger-period:has(> option[value="raw"]:checked) + input.portax-trigger-period {
	display: block;
}

tr > td > span > div.rlan-status.warn {
	color: ##c8c103;
}

tr > td > span > div.rlan-status.critical {
	color: #c99615;
}

tr > td > span > div.rlan-status.protected {
	color: var(--bg-color-error);
}

tr > td > span > div.rlan-status.expired {
	color: #9D76F3;
}

div.rlan-details {
	padding: 0.5em;
	border: 1px solid grey;
	margin: 0 0.5em 0.5em 0.5em;
}

div.rlan-details > div.rlan-actions {
	border-bottom: 1px solid grey;
	padding-bottom: 0.5em;
}

div.rlan-details > div.rlan-data-table td.middle {
	padding-right: 0.5em;
}

div.rlan-details > div.rlan-data-table > table tr:hover {
	text-decoration: underline;
}

div.rlan-devices > div.device:before {
	content: "\f1eb";
	font: normal normal normal 1em/1 FontAwesome !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

div.rlan-devices > div.subscriber:before {
	content: "\f406";
	font: normal normal normal 1em/1 FontAwesome !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

div.rlan-details > div.rlan-dates {
	border-bottom: 1px solid grey;
	padding: 0 0.3em 0.5em 0.3em;
	margin-bottom: 0.5em;
}

div.subtitle:empty {
	display: none;
}

span.display-block.duration:empty::after {
	content: '\2014';
}

div.portax-box.fixed {
	position: fixed;
	bottom: 1.2em;
	left: 1.2em;
	z-index: 999;
}

p#preview-image-plugin-overlay {
	background-color: #aaaaaa !important;
}

td.message {
	white-space: normal;
}


pre.output:empty {
	min-height: 1.2em;
}

table.dataTable.syslog > tbody > tr > td {
	max-width: 32em;
	white-space: normal;
	vertical-align: top;
}

pre.bootstrap-preview {
	white-space: pre-wrap;
}

div[portax-role="dhcp-status"] > div[portax-role="results"]:empty {
	display: none;
}

div.migrate-dialog {
	padding: 8px;
}

.rrplain.dhcplog {
	background: var(--bg-color-2);
	border-radius: 0px 0px 4px 4px;
}

.rrplain.dhcplog > tbody > tr:last-child {
	border-bottom: none;
}

.rrplain.dhcplog > caption {
	margin: 0; border: 0;
	font-family: monospace;
	background: var(--bg-color-2);
	color: var(--primary-color);
	font-size: 0.9em;
	border-radius: 4px 4px 0px 0px;
	text-align: left;
}

.rrplain.dhcplog > tfoot {
	display: none;
}

.expandable {
	max-height: 8rem;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}

.expandable::after {
	content: "";
	position: absolute;
	top: 6.5rem;
	left: 0;
	width: 100%;
	height: 1.5rem;
	background: linear-gradient(to bottom, rgba(249, 249, 249, 0) 0%, var(--bg-color) 100%);
	pointer-events: none;
	display: block;
}

.expanded {
	max-height: none;
	-webkit-line-clamp: unset;
}

.expanded::after {
	display: none;
}