div.main {
	font-size: small;
	line-height: 1.5em;
}

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

h1 {
	font-family:"Lucida Sans",Verdana,Arial,Helvetica,sans-serif;
}

@font-face {
	font-family: OCR-B;
	src: url(/OCRB.ttf);
}

body {
	padding: 0;
	margin: 0;
	background-color: #666;
	min-width: 20em;
}

select {
  max-width: 19em;
}

.page {
	background-color: #ccc;
	box-shadow: 0 0 15px #000;
	margin: 0.5em;
	border-radius: 12px;
    display: grid;
    grid-template-columns: min-content calc(100% - 11em);
}

pre {
  white-space: pre-wrap;
  word-break: keep-all;
  tab-size: 4;
}

div.header {
    grid-column-start: 1;
    grid-column-end: 3;
	color: white;
	font-size: x-large;
	padding: 5px;
	padding-top: 8px;
	background-color: #8a0d17;
	background: linear-gradient(to bottom, #bd1220 0%, #8a0d17 100%);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	flex-wrap: wrap;
}

div.header img {
	padding-right: 4.5em;
	padding-left: 0.2em;
	vertical-align: baseline;
}

@media screen and (max-width: 769px) {
    div.header img {
        padding-right: 20px;
    }
}

div.header span.intro {
    font-size: medium;
    margin-left: auto;
    padding: 0px 0.5em;
}

div.header div.right {
	margin-left: auto;
	text-overflow: ellipsis;
	max-width: calc(100vw - 65px);
	overflow: hidden;
}

div.flex {
	display: flex;
	align-items: baseline;
}

div.flexpad {
	flex-grow: 2;
}

.buttongroup {
	display: inline-grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 5px;
}

.buttongroup input {
  width: 100%;
}

div.right {
	float: right;
	white-space: nowrap;
	padding-left: 1em;
	padding-right: 0.5em;
}

.branding {
	font-family: "Lucida Sans", sans-serif;
	white-space: nowrap;
}

.shadow {
	filter: progid:DXImageTransform.Microsoft.DropShadow(color='#333333', offx=3, offy=3);
}

.spaceabove {
  margin-top: 3em;
}

div.menuslide {
    grid-column: 1;
}

div.menuscroll {
    overflow-y: auto;
    overflow-x: hidden;
	position: sticky;
	top: 0;
}

div.menu {
	width: 11em;
	background-color: #ddd;
}

div.menu ul {
	padding-left: 0;
	margin: 0;
}

div.menu li {
	list-style: none;
}

div.menu a {
	display: block;
	margin-top: 1px;
	padding: 5px 0px 5px 1em;
	font-size: small;
	font-weight: bold;
	background-color: #ccc;
	background: linear-gradient(to right, #ccc 0%, #ddd 100%);
}

div.menu li#profilesmenu ul li {
	margin-top: 1px;
	padding-left: 1em;
	font-size: small;
	background-color: #ccc;
	background: linear-gradient(to right, #ccc 0%, #ddd 100%);
}

div.menu li#profilesmenu ul li.profilegrouplabel {
    background: #bfbfbf;
}

div.menu ul ul a {
	font-weight: normal;
	text-indent: 1.5em;
}

div.menu ul ul ul a {
	font-weight: normal;
	text-indent: 2.5em;
}

div.menu li.current >span >a {
	color: white;
	text-decoration: none;
	background-color: #8a0d17;
	background: linear-gradient(to right, #8a0d17 0%, #bd1220 100%);
}

div.menu span:hover >a {
	color: white;
	text-decoration: none;
	background-color: #8a0d1780;
	background: linear-gradient(to right, #8a0d1780 0%,#bd122080 100%);
}

div.menu li.menuonly >span:hover >a {
	cursor: default;
}

div.menu input {
  margin-left: 2em;
  margin-right: 0.5em;
}

span.profilelock {
  position: absolute;
  right: 8px;
  cursor: pointer;
}

div.main {
	background-color: #fff;
	padding: 0.1px 1em 1em 1em;
	word-wrap: break-word;
    grid-column: 2;
}

div.footer {
	color: #ddd;
	padding: 10px;
	font-size: x-small;
	background-color: #8a0d17;
	background: linear-gradient(to bottom, #bd1220 0%, #8a0d17 100%);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

div.footer a {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

div.footer a:hover {
	text-decoration: underline;
}

span.preferences {
	font-size: larger;
}

a {
	text-decoration: none;
	color: #bd060a;
}

a:hover {
	color: #fe182b;
	text-decoration: underline;
}

div.menu input {
  display: none;
}

div.menu label {
  padding: 0.5ex;
  display: inline-block;
}

span.menuslider {
  display: inline-block;
  background-color: #999;
  width: 1.6em;
  height: 1.5ex;
  border-radius: 1ex;
  transition: .3s;
}

input:checked + span.menuslider {
  background-color: green;
}

input:disabled + span.menuslider {
  background-color: #aaa;
}

input:disabled + span.menuslider:before {
  background-color: #ccc;
}

input:disabled:checked + span.menuslider {
  background-color: #486;
}

span.menuslider:before {
  position: absolute;
  content: "";
  height: 1ex;
  width: 1ex;
  background-color: white;
  transform: translate(0.25ex, 0.25ex);
  border-radius: 1ex;
  transition: .4s;
}

input:checked + span.menuslider:before {
  transform: translate(1em, 0.25ex);
}

.strikethrough {
  text-decoration: line-through;
}

td:not(:first-child), th:not(:first-child) {
	padding-left: 3px;
}

td, th {
	padding-right: 3px;
	vertical-align:top;
}

h1 {
	color: #bd1220;
	font-weight: normal;
}

div.config-icon-bar {
	white-space: nowrap;
}

li.hide {
	font-style: italic;
}

tt {
	font-family: OCR-B,monospace,sans-serif;
}

div.viewconfig {
	font-family: OCR-B,monospace,sans-serif;
	background-color: #ffc;
	padding: 1ex;
	border: 1px solid black;
}

div.viewconfig pre {
	font-family: OCR-B,monospace,sans-serif;
	margin: 0;
}

textarea, pre.mirror, div.suggestion, span.tab-default {
	font-family: OCR-B,monospace,sans-serif;
	font-size: small;
	line-height: normal;
	resize: none;
}

div#editconfig {
	height: calc(100vh - 20ex);
	width: 100%;
	position: relative;
	border: 2px inset;
}

#editconfig:focus-within {
	outline-color: #808000;
	outline-width: 2px;
	outline-style: solid;
}

textarea.editconfig {
  width: calc(100% - 1ex);
  background-color: #ffc;
  z-index: 2;
}

pre.mirror {
  z-index: 0;
}

#editconfig textarea, pre.mirror {
  height: calc(100% - 1ex);
  float: left;
  position: absolute;
  top: 0;
  margin: 0;
  border: 0;
  padding: 0.5ex;
  word-break: normal;
  white-space: pre;
}

textarea.linecounted, pre.mirror {
  width: calc(100% - 6.5ex);
  left: 5.5ex;
  overflow: auto;
  border-left-color: transparent;
}

textarea.linecounter:focus, textarea.linecounted:focus {
  outline: none;
}

textarea.linecounter {
	width: 5.1ex;
	padding: 0.5ex 0.4ex 0.5ex 0px;
	text-align: right;
	direction: rtl;
	border-right-color: transparent;
	overflow-y: hidden;
	color: #885;
	background-color: #eeb;
	z-index: 1;
}

.suggestions {
  border: 1px solid #444;
  background: #f0f0f0;
  display: block;
  visibility: hidden;
  position: absolute;
  width: 12rem;
  z-index: 2;
  max-height: 14rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.suggestion, .tab-msg {
  padding: 0 0.2rem;
  border: none;
}

.suggestion {
  align-items: center;
  height: 1.4rem;
  display: flex;
  white-space: nowrap;
}

.clickable, .suggestion {
  cursor: pointer;
}

.tab-msg, .tab-error {
  font-size: small;
  padding: 0 0.2rem;
  line-height: 1.3;
  display: inline-block;
}

.tab-error {
  font-style: italic;
}

.sugg_focus {
  background: #aaa;
}
.compulsory, .sugg_def {
  font-weight: bold;
}

fieldset.warning {
	font-size: medium;
	border: 3px solid #bd1220;
	padding: 1ex;
	margin: 1ex;
}

fieldset.warning legend {
 	font-weight: bold;
}



table
{
	margin-top: 0.5em;
}

table.usbp tr, table.usbd tr, table.usbtest tr
{
	background-color: #eee;
}

tr.active,
tr.good
{
	background-color: #cfc;
}

tr.inactive,
tr.bad,
td.bad,
td.fault,
td.problem
{
	background-color: #fcc;
}

tr.idle
{
	background-color: #eee;
}

tr.warn,
tr.try
{
	background-color: #ffc;
}

tr.current td.name
{
	font-weight: bold;
}

table.pp-single, div.eth-stats, div.eye {
	display: inline-block;
	vertical-align: top;
	margin-right: 5em;
}

div.eye img {
	width: 256px;
	height: auto;
}

table.pp-sort th {
	cursor: pointer;
}

caption, p.title {
	text-align: left;
	font-weight: bold;
	color: #bd1220;
	padding-left: 0.2em;
	white-space: nowrap;
}

td.mac,
td.our-mac,
td.ra-mac,
td.esn,
td.ra-slla,
td.hex,
td.teid,
td.teid-c,
td.teid-d,
td.dump,
table.lacp td.state,
td.serial
{
	font-family: OCR-B,monospace,sans-serif;
}

td.same {
	color: gray;
}

div.sticky form {
    display: inline;
}

div.sticky a {
    padding-left: 1em;
}

table.system td:not(:first-child) {
	padding-left: 1em;
}

table.dns tr.cache td {
	background-color: #cfc;
}



table.sessions tr.forward {
	background-color: #cfc;
}

table.sessions tr.forward td {
	border-top: 1px solid #bd1220;
}

table.sessions tr.forward td:last-child {
	vertical-align: middle;
}

table.sessions tr.drop {
	background-color: #fcc;
}

table.sessions tr.drop td {
	border-top: 1px solid #bd1220;
}
table.sessions tr.reject {
	background-color: #fcf;
}

table.sessions tr.reject td {
	border-top: 1px solid #bd1220;
}

table.sessions tr.reverse {
	background-color: #ffc;
}


table.lacp tr.us {
	background-color: #cfc;
}

table.lacp tr.them {
	background-color: #ffc;
}

table.lacp tr.down td, table.aggregators td {
	background-color: #eee;
}

table.aggregators tr.off td {
	color: #888;
}

table.lacp tr.solitary {
	background-color: #cff;
}

table.lacp td {
	border-top: 1px solid #888;
}

table.lacp tr.them td {
	border-top: none;
}



table.cert_table tr.activess
{
	background-color: #cdc;
	color: #888;
}

table.cert_table tr.activeca
{
	background-color: #8f8;
}

table.cert_table tr.insecure
{
	background-color: #ffc;
}



table.bgp tr.limit {
	background-color: #f8c;
}

table.bgp tr.partial {
	background-color: #cff;
}



table.subnets tr.interface
{
	background-color: #ffc;
}



table.voip tr
{
	white-space: nowrap;
}

table.voip tr.Try
{
	background-color: #ccc;
}

table.voip tr.Fail
{
	background-color: #fcc;
}

table.voip tr.Held
{
	background-color: #ccf;
}

table.voip tr.Hold
{
	background-color: #ccf;
}

table.voip tr.Inactive
{
	background-color: #ccf;
}

table.voip tr.Incoming
{
	background-color: #8f8;
}

table.voip tr.Outgoing
{
	background-color: #cfc;
}

table.voip tr.Done
{
	background-color: #eee;
}

table.voip tr.Wait
{
	background-color: #cff;
}

table.voip tr.Clear
{
	background-color: #ccc;
}

table.voip tr.Ring
{
	background-color: #ffc;
}

table.voip tr.Call
{
	background-color: #cfc;
}

table.etun td,
table.voip tr.Idle,
table.tcp tr.timewait
{
	background-color: #eee;
}

table.dongle tr.Disabled,
table.tunnel tr.Off
{
	background-color: #ccc;
}

table.dongle tr.Down,
table.tunnel tr.Down,
table.tcp tr.finished,
table.vrrp tr.Duplicate
{
	background-color: #fcc;
}

table.dongle tr.Starting,
table.dongle tr.Dialling,
table.dongle tr.Negotiating,
table.vrrp tr.Backup,
table.tunnel tr.HalfUp,
table.tcp tr.starting,
table.tcp tr.closing
{
	background-color: #ffc;
}

table.dongle tr.Up,
table.vrrp tr.Master,
table.tunnel tr.Up,
table.tcp tr.established
{
	background-color: #cfc;
}

table.sessions {
	border-bottom: 1px solid #bd1220;
}

table.ping tr.ping:nth-child(odd),
table.traceroute tr.hop:nth-child(odd)
{
        background: #ccf;
}

pre.config-edit, div.viewconfig pre {
	white-space: pre-wrap;
}

.config-edit textarea {
  width: 100%;
  box-sizing: border-box;
  resize: horizontal;
}

td.STRING >input,
td.COMMUNITY >input,
td.IP >input,
td.CIP >input {
  width: 100%;
  box-sizing: border-box;
}

.config-icon-bar {
	margin-top: 1em;
}

img.config-icon {
	padding-right: 1em;
}

table.config-edit {
	border: 0;
}

table.config-edit tr {
	color: white;
}

table.config-edit tr.heading th {
	text-align: left;
	background-color: #fff;
	color: green;
	border: 0;
	padding: 0;
	margin: 0;
	padding-top: 0.5em;
}

td.list {
	border-radius: 5px;
	padding: 2px;
}

table.config-edit td.input {
	min-width: 130px;
	width: 25%;
	border-radius: 5px;
	padding: 5px;
	border: 0px;
	margin: 5px;
	box-shadow: 0px 0px 10px #333;
	background-color: #8a0d17;
	background: linear-gradient(to bottom, #bd1220 0%, #8a0d17 100%);
}

table.config-edit tr.olist {
	background-color: white;
	color: black;
}

table.config-edit td.olist {
	border: 0;
	border-bottom: 1px dotted black;
}

table.config-edit td.olist {
	border: 0;
	border-bottom: 1px dotted black;
}

table.config-edit p {
	padding: 0;
	border: 0;
	margin: 0;
}
table.config-olist {
	background-color: #fff;
	color: black;
}

table.config-olist tr {
	background-color: #fff;
	color: black;
}

table.config-olist th {
	padding-right: 2px;
}

table.config-olist th.title {
	text-align: left;
	color: green;
	margin-top: 1em;
}

table.config-olist td {
	background-color: #fc8;
}

table.config-olist td.AddEdit {
	background-color: #fff;
}

table.config-olist td.EditArrow {
	background-color: #fff;
	padding: 0;
	width: 0.8em;
}

table.config-olist td.EditArrow img.up {
	width: 100%;
	margin-right: -0.1em;
}

table.config-olist td.EditArrow img.down {
	width: 100%;
	margin-left: -0.1em;
}

table.config-olist td.no-match-action, table.config-olist td.action {
	border: 0;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

table.config-olist img {
	vertical-align: middle;
}

table.config-edit td {
	vertical-align: top;
}

table.config-edit td.prohibited div.label {
	text-decoration: line-through;
}

table.config-edit td div.label {
	font-weight: bold;
	white-space: nowrap;
}

table.config-edit td div.annotation {
	font-style: italic;
	font-size: smaller;
	white-space: normal;
}

table.config-edit td div {
	padding: 0;
	margin: 0;
	border: 0;
}

div.config-save {
	border: 1px solid #888;
	padding: 1em;
	margin-bottom: 1px;
	font-weight: bold;
	display: inline-block;
}

div.config-warn {
	border: 3px solid #bd1220;
	padding: 1em;
	margin-bottom: 1px;
	font-weight: bold;
	display: inline-block;
}

div.config-controls {
	padding: 1em;
	margin-bottom: 1px;
}

div.log {
	font-family: OCR-B,monospace;
	white-space: pre-wrap;
}

div.log-multi-line {
	border-top: 1px solid;
}

div.log-cpu {
	color: blue;
}

div.log-panic {
	color: #bd1220;
}

div.log-other {
	color: gray;
}
div.log-int {
	font-weight: bold;
}
div.log-locked {
	font-style: italic;
}

p.object-heading {
	font-weight: bold;
	color: #bd1220;
	font-size: larger;
}

table.port-status {
	margin-bottom: 2em;
}

table.port-status td.name {
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
}

table.port-status td.number {
	text-align: center;
	vertical-align: middle;
}

table.port-status td.lldp {
	text-align: center;
	vertical-align: middle;
	font-size: 90%;
	line-height: 1.3em;
}

table.port-status td.lacp {
	text-align: center;
	vertical-align: middle;
}

table.port-status td.status {
	text-align: center;
	vertical-align: middle;
	color: white;
	padding: 0.25em;
	width: 5em;
	height: 3em;
	border: 0.5em solid gray;
}

table.port-status td.fault {
	border: 0.5em solid purple;
}

table.port-status td.up {
	background-color: green;
}

table.port-status td.down {
	background-color: black;
}

table.lldp td.Description {
	max-width: 16em;
}

div.fascia {margin-bottom:3mm;position:relative;opacity:0;}
div.fascia .speed {fill:white;font-size:3;}
div.fascia .down {fill:none;}
div.fascia .neg {fill:orange;}
div.fascia .up { fill:green;}
div.fascia .fault {fill:purple;}
div.fascia .sfpfault {fill:red;}
div.fascia .rate {fill:#ccc;}
div.fascia .porttag {text-align:center;position:relative;display:inline-block;vertical-align:top;font-size:75%;line-height:110%;}
div.fascia .porttag span:first-child {font-weight:bold;}
div.fascia .psutag {text-align:center;position:relative;display:inline-block;vertical-align:top;font-size:75%;line-height:110%;font-weight:bold;}
div.fascia a {color: inherit;}

.red, p.warning, p.error {
	color: #bd1220;
	font-weight: bold;
}

table.pre-shutdown {
	border: solid #bd1220 2px;
}

tr.first-line td {
	vertical-align: bottom;
}

td.action {
	white-space: nowrap;
}

img.cqm {
	background-color: #fff;
	max-width: 100%;
}

fieldset.switches,fieldset.bad-profiles {
	margin-bottom: 1em;
}

fieldset.switches div {
	display: inline-block;
        padding: 1em;
	margin: 2px;
	vertical-align: top;
	text-align: center;
}

td form,fieldset form {
	display: inline-block;
}

tr.wslog:nth-child(odd){
	background: #ffc;
}
tr.wslog:nth-child(even){
	background: #fff;
}

tr.wslog td.wswhen {
	font-family: OCR-B,monospace,sans-serif;
	white-space: nowrap;
        vertical-align: top;
}
tr.wslog td.wstask {
	white-space: nowrap;
        vertical-align: top;
}
tr.wslog td.wstext {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
tr.wslivestart td {
	border-top: 3px solid grey;
}
tr.wsint td.wstext {
	font-style: italic;
}
tr.wslocked td.wstask {
	font-weight: bold;
}
tr.wsjtag td.wstext {
}
tr.wsflash td.wstext {
}
tr.wsconsole td.wstext {
}
tr.wsstore td.wstext {
}
tr.wspanic td.wstext {
	font-family: OCR-B,monospace,sans-serif;
	font-weight: bold;
}
tr.wstrunc td.wstext::after{
	content: "...";
}
tr.wscpu1 td.wstext {
	color: #444;
}

@viewport {
   width: device-width;
   zoom:1;
}

div.fascia > br {
  display: block;
  margin-top: 0.8em;
}

div.fascia svg, div#load-graph svg {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
}

div#load-graph {
  display: grid;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.2em;
  margin-bottom: 3mm;
  grid-template-columns: min-content min-content auto;
}

div.loadlabel {
  padding-right: 0.5em;
}

div.ingraph, div.load {
  padding-left: 0.2em;
  grid-column: 3;
}

div.loadgap {
  padding-bottom: 0.5em;
  grid-column: 1 / span 3;
}

div.TxRx {
  font-size: 60%;
  line-height: 1.2em;
}

rect#idle {
 fill: #e7e7e7;
}

rect.rateT {
  fill: #7c7;
}

rect.rateR {
  fill: #8e8;
}

rect#cpu-total {
  fill: #595;
}

rect#cpu-poll {
  fill: #7c7;
}

rect#cpu-irq {
  fill: #8e8;
}

svg text {
  font-size: 3px;
}

table.load {
  display: table;
  width: 100%;
  margin-top: 0;
  table-layout: fixed;
  border-spacing: 0;
}

table.load td {
  padding: 0;
  font-size: smaller;
  text-align: center;
  width: 20%
}

table.load td:first-child {
  text-align: left;
  width: 10%;
}

table.load td:last-child {
  text-align: right;
  width: 10%;
}

table[class^='pp-single thread'] {
	display: block;
}

html {
	font-family: "Lucida Sans",Verdana,Arial,Helvetica,sans-serif;
	font-size: 14px;
}

@media screen and (max-width: 769px) {
	html {
		font-size: 12px;
	}
}

div.header img {
  width: 35px;
}

@media screen and (max-width: 769px) {
	.branding {
		font-size: 16px;
	}
	div.header div.right {
		font-size: 16px;
	}
}

@media screen and (max-width: 769px) {
  .page {
    margin: 0;
    border-radius: 0;
  }

  div.header, div.footer {
    border-radius: 0;
  }

  div.header div.right {
    padding: 0;
  }
}

.mobilemenu {
    display: inline;
}

@media screen and (max-width: 769px) {
  .mobilemenu {
    display: inline;
    position: relative;
    float: right;
    width: 35px;
    height: 25px;
    margin-left: 20px;
  }

  .mobilemenu:after, .mobilemenu:before, .mobilemenu span {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    background: #fff;
    top: 0;
    left: 0;
    transition: all 500ms cubic-bezier(0.285, 0.105, 0.465, 1.015);
    transform-origin: left;
  }

  .mobilemenu:after {
    top: auto;
    bottom: 0;
  }

  .mobilemenu span {
    top: 11px;
  }

  .mobilemenu.active span {
  	opacity: 0;
  }

	.mobilemenu.active:after {
		transform: rotate(-45deg);
	}

	.mobilemenu.active:before {
		transform: rotate(45deg);
		top: -1px;
	}

}

@media screen and (max-width: 769px) {
  .page {
    grid-template-columns: 100%;
  }

  div.menu {
    display: none;
    top: 0;
    left: 0;
    width: 100%;
  }

  div.main {
    grid-column: 1;
  }

  div.footer {
    grid-column: 1;
  }

  div.menu.active {
    display: block;
  }

  div.menu a {
    padding: 10px;
  }
}

div.menu li ul {
	display: none;
}

div.menu li {
	display: block;
	position: relative;
}

span.arrow {
	position: absolute;
	right: 0;
	top: 0;
	height: 1.8em;
	width: 28px;
}

span.arrow:after, span.arrow:before {
	content: "";
	position: absolute;
	top: 15px;
	left: 14px;
	width: 7px;
	height: 2px;
	background: #b6b6b6;
	transform: rotate(225deg);
	transform-origin: left;
	transition: all 180ms;
}

span.arrow:before {
	transform: rotate(-45deg);
}

span.arrow:hover::before, span.arrow:hover::after,
li.menuonly >span:hover >span.arrow::before, li.menuonly >span:hover >span.arrow::after, span.showfilter:hover >span.arrow::before, span.showfilter:hover >span.arrow::after {
	background: #383838 !important;
}

div.menu li ul {
	display: none;
}

div.menu li ul.active {
	display: block;
}

span.active::after, span.active::before {
	top: 8px;
	transform: rotate(135deg);
}

table {
  display: block;
  overflow: auto;
  max-width: 100%;
}

span.active::before {
    transform: rotate(45deg);
}


@media screen and (max-width: 769px) {
  div.menu li span.arrow::after, div.menu li span.arrow::before {
    top: 20px;
    left: 30px;
  }

  div.menu li span.active::after, div.menu li span.active::before {
    top: 15px;
  }

  div.menu li span.arrow {
    height: 3em;
    width: 60px;
  }
}

@media screen and (max-width: 769px) {
	table.pp-single {
		display: block;
		margin-right: 0;
	}

	table + table, table + .eth-stats {
		margin-top: 40px;
	}
}

@media screen and (max-width: 769px) {
	.diagnostics {
		overflow: visible;
	}

	.diagnostics tbody {
		display: block;
		width: 100%;
	}

	.diagnostics tbody > * {
		box-sizing: border-box;
	}

	.diagnostics input {
		width: 100%;
		box-sizing: border-box;
	}

	.diagnostics input[type="checkbox"] {
		width: auto;
	}

	.diagnostics td, tr {
		display: table-row;
		width: 100%;
	}

	.diagnostics td.tdrule {
		display: table-cell;
	}

	.diagnostics tr {
		padding: 10px 0;
	}

}

@media screen and (max-width: 769px) {
	div.footer {
		padding: 15px 10px;
		line-height: 1.8;
	}

	div.footer .branding {
		font-size: 12px;
	}
}

.preferences {
	display: block;
}

@media screen and (max-width: 769px) {
	.preferences {
		display: none;
	}

	.footer div.right {
		display: block;
		float: none;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 769px) {
	.config-icon-bar {
		overflow: hidden;
	}

	img.config-icon {
		width: auto;;
		float: left;
		margin-bottom: 30px;
	}
}

@media screen and (max-width: 769px) {
	.config-icon-bar img {
		width: auto;
		float: left;
		margin-bottom: 30px;
	}
}

@media screen and (max-width: 769px) {
	.pp-list.subnets {
		border-spacing: 2px;
		border-collapse: separate;
		border-color: white;
	}

	.pp-list.subnets tr {
		border-bottom: 2px solid white;
	}

	.pp-list.subnets th {
		min-width: 75px;
		border-right: 2px solid white;
		padding: 5px 30px 5px 0px;
		text-align: left;
	}

	.pp-list.subnets td {
		min-width: 75px;
		border-right: 2px solid white;
		padding: 5px 15px;
	}
}

.login td {
	width: 80px;
}

div.footer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 4;
	position: relative;
}

div.menu ul {
	max-height: 100%;
	max-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
}

@media screen and (max-width: 769px) {
  div.menu ul {
    max-height: none;
    overflow-y: hidden;
  }
}

div.menu ul::-webkit-scrollbar {
    display: none;
}

div.menu ul ul.submenu {
	height: auto;
	max-height: unset;
	overflow: auto;
}

input[type=checkbox] {
    margin-left: 0;
}

input[type=file] {
	background-color:#ececec;
	border-radius: 5px;
	border: 2px solid #9E9E9E;
	margin-right: 5px; 
}

input[type=file].iupload {
    margin-bottom: 5px;
    width: calc(15em + 4px);
}

input[type=submit],input[type=button],button {
	background-color:#ececec;
	color: black;
	padding:3px;
	padding-left:1em;
	padding-right:1em;
	min-width:6em;
	border: 2px solid #9E9E9E;
	border-radius: 5px;
	margin-right: 5px; 
}
table input[type=submit] {
    padding:0px 4px;
    margin-right:0px;
    min-width:4em;
}
input.testtime {
	width:5ch;
	text-align:right;
}
input.ired {
	border:  2px solid #bd1220;  
}

input:hover[type=submit], input:hover[type=button], button:hover {
    background-color: #9e9e9e;
    color: white;
}

input.ired:hover {
    background-color: #bd1220; 
    color: white;
}

input.ihelp {
        border:  2px solid #2196F3; 
}
input.ihelp:hover {
    background-color: #2196f3;
    color: white;
}

input.ierase {
        border:  2px solid #bd1220; 
}
input.ierase:hover {
    background-color: #bd1220;
    color: white;
}

input.icancel {
        border:  2px solid #bd1220; 
}
input.icancel:hover {
    background-color: #bd1220;
    color: white;
}

input.icommit {
        border:  2px solid #4caf50; 
}
input.icommit:hover {
    background-color: #4caf50;
    color: white;
}

input.itest {
        border:  2px solid #ff9800; 
}
input.itest:hover {
    background-color: #ff9800;
    color: white;
}

input.isave {
        border:  2px solid #bd1220; 
}
input.isave:hover {
    background-color: #bd1220;
    color: white;
}

input.irevert {
        border:  2px solid #bd1220; 
}
input.irevert:hover {
    background-color: #bd1220;
    color: white;
}

input.ireboot {
        border:  2px solid #bd1220; 
}
input.ireboot:hover {
    background-color: #bd1220;
    color: white;
}

input.irebootnow {
        border:  2px solid #bd1220; 
}
input.irebootnow:hover {
    background-color: #bd1220;
    color: white;
}

input.irebootsafe {
        border:  2px solid #ff9800; 
}

input.irebootsafe:hover {
    background-color: #ff9800;
    color: white;
}

input.iupgradereboot {
        border:  2px solid #bd1220; 
}
input.iupgradereboot:hover {
    background-color: #bd1220;
    color: white;
}

input.isendconfig {
        border:  2px solid #bd1220; 
}
input.isendconfig:hover {
    background-color: #bd1220;
    color: white;
}

input.ikill {
        border:  2px solid #bd1220; 
}
input.ikill:hover {
    background-color: #bd1220;
    color: white;
}

input:disabled[type=submit], input:disabled[type=button], button:disabled {
    background-color: #eee;
    color: #aaa;
    border: 2px solid #aaa;
}

fieldset.switches div label:first-child {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

fieldset.switches div label input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input.expected:checked + .slider {
  background-color: #12bd20;
}

input.unexpected:checked + .slider {
  background-color: #bd1220;
}

input.expected:disabled + .slider, input.unexpected:disabled + .slider {
  background-color: #aaa;
}

input.expected:disabled:checked + .slider {
  background-color: #486;
}

input.unexpected:disabled:checked + .slider {
  background-color: #866;
}

input.expected:disabled + .slider:before {
  background-color: #ddd;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

textarea.console {
	font-family: OCR-B,monospace,sans-serif;
	background-color:black;
	color:lightgreen;
	white-space: pre;
	width: 100%;
	height: calc(100vh - 30ex);
}

input.console {
	background-color:#444;
	color:lightgreen;
	width:100%;
}

.sticky {
    position: sticky;
    top: 0;
    background: white;
}

option:checked {
    background: #CCC;
}

table.pp-sort th {
    white-space: nowrap;
}

th.sortA:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
    margin-left: 2px;
}

th.sortD:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #666;
    margin-left: 2px;
}

.stack_trace {
    font-family: monospace;
    white-space: pre;
}

.hide {
    display: none;
}

form.filter input#filter {
    width: 20em;
    margin-right: 1ex;
}

form.filter input#limit {
    width: 4em;
    -moz-appearance:textfield;
}

form.filter input#limit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

div#filtform {
	grid-template-columns: auto 1fr 8ex;
	align-items: center;
	gap: 0.6em;
	background-color: #f8f8f8;
	padding: 4px;
	overflow-x:auto;
}

div#filtadd {
	align-self: start;
	margin-right: 0.5em;
}

div#filtitms table {
	margin: 0 0 0.5em 0;
}

div#filtitms td {
	vertical-align: middle;
	padding-bottom: 0.4em;
}

div#filtitms select {
  text-align: center;
  text-align-last: center;
  font-size: 90%;
}

div#filtitms input[type='button'] {
	padding: 0 0.5em;
	min-width: 1em;
	border-width: 1.5px;
}

div#filtitms td:nth-child(4) {
	padding-left: 0;
}

div#filt {
	position: relative;
	max-width: fit-content;
}

pre.filterr {
	background-color: #fdd;
}

div#filtbtn {
	grid-column: 2/-1;
}

div.showfilter {
	background-color: #f8f8f8;
	border: solid 1px;
	border-radius: 3px;
	padding: 2px;
	min-width: auto;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	cursor: default;
}

div.showfilter:hover {
	background-color: #ccc;
}

div.showfilter span.arrow {
	top: -1px;
}

div.showfilter span.arrow::after,
div.showfilter span.arrow::before {
	background: #383838;
}

span.showfilterlabel {
	padding-right: 1.7em;
	padding-left: .5em;
}

.noscript {
	display: none;
}

table.pp-list {
	padding-top: 0.2em;
}

div#filtitms label {
  margin-right: .5em;
  display: inline-block;
}