/* Global */

.arrow {
	border: solid black;
	border-width: 0 0.4em 0.4em 0;
	display: inline-block;
	padding: 0.4em;
}
.arrow-down {
	position: relative;
	top: -0.1em;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.arrow-up {
	position: relative;
	top: 0.3em;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
.bad-source {
	outline: 1px solid red;
}
body {
	background: #fafafa;
	display: flex;
	flex-direction: column;
    font-family: Helvetica, sans-serif;
	height: 100vh;
	overflow-x: hidden;
}
.bottom-wrapper {
    flex: 0 1 auto;
	margin-bottom: 10px;
}
.box {
    background-color: white;
    border: 1px solid #ddd;
	border-radius: 4px;	
	padding: 16px 16px 10px 16px;
	position: relative;
}
.box-bottom {
	border-radius: 0 0 4px 4px;
	padding-bottom: 10px;
}
.box-stack {
	border-bottom: none;
	border-radius: 0px;
}
.box-top {
    border-bottom: none !important;
	border-radius: 4px 4px 0 0 !important;
	margin-top: 10px;
}
.button {
    border-radius: .5em;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
    cursor: pointer;
    display: inline-block;
    font-size: 14px/100%;
    margin: 0 2px;
    outline: none;
    padding: .5em 2em .55em;
	text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
	vertical-align: middle;	
}
.button:hover {
	text-decoration: none;
}
.button-box {
	margin: 0.8em 0;
}
.button-box-stack {
	margin: 0;
}
.button-box .box {
	display: flex;
	justify-content: center;
}
.button-medium {
	font-size: 12px;
    flex-basis: 60px;
    padding: .4em 1em .36em;
}
.button-small {
	font-size: 11px;
    flex-basis: 28px;
    padding: .2em 1em .275em;
}
.button-very-small {
	font-size: 8px;
    flex-basis: 20px;
    padding: .2em 1em .275em;
}
.button-gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.button-gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.button-gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}
.button-white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.button-white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.button-white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
.colour-picker {
    display: flex;
}
.colour-picker select {
    margin-left: 0.5em;
}
.content-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0 auto;
    max-width: 820px;
    min-width: 820px;
    overflow: hidden;
	padding: 0 10px;
	position: relative;	
	right: 100px;
}
.disabled {
	background: #eee !important;
	border-color: #aaa !important;
	color: #666 !important;
	cursor: default !important;
	text-shadow: 0 0 0 !important;
}
.field-container {
    background-color: #F2F2F2;
    border: 1px solid #ccc;
    height: 1.2em;
    min-width: 4em;
    overflow: hidden;
    padding: 0px 2px 0px 2px;
	text-align: right;
}
fieldset {
	padding-top: 0.8em;
}
.footer {
    background: #333;
    border-top: 1px solid #666;
	color: white;
	flex: 0 1 auto;
}
.footer-container {
	position: relative;
	padding: 0.5em 1em;
}
h1 {
	border-bottom: 1px solid #666;
	margin: 0;
}
h2 {
    color: inherit;
	display: inline-block;
	font-size: 1em;
	margin: 0;
}
header {
	align-items: center;
	background: #000;
	display: flex;
	flex: 0 0 auto;
	height: 70px;
	margin: 0;
	padding: 0 0.5em;
	position: relative;
	z-index: 700;
}
.hold-button {
	position: absolute;
	right: 10px;
	text-align: center;
	top: 78px;
	transform: scale(1.2);
	z-index: 801; /* Appears above modal */
}
input:disabled {
	background: #eee !important;
	border-color: #aaa !important;
	color: #666 !important;
	cursor: default !important;
	text-shadow: 0 0 0 !important;
}
input[type=checkbox] {
	transform: scale(1.3);
	margin-right: 0.8em;
}
input[type=number] {
	width: 4em;
	text-align: right;
	-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type=radio] {
	transform: scale(1.25);
}
.input-group {
	border-collapse: separate;
	display: flex;
	flex-wrap: nowrap;
	position: relative;
	width: auto;
}
.input-group input {
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	float: left;
	margin-right: 0 !important;
	min-width: 4em;

	padding: 1px 8px;
	position: relative;
}
.input-group input:not(:only-child) {
	border-right: 0 !important;
}

.input-group span {
	border: 1px solid #ccc;
	float: left;
	padding: 1px 8px;
}
.input-unit {
	border-collapse: separate;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	margin: 0.4em 0;
	position: relative;
	width: auto;
}
.input-unit input {
	background-color: #fff;
	background-image: none;
	border: 1px solid #999;
	border-right: 0 !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-sizing: border-box;
	float: left;
	height: 1.5em;
	margin-right: 0 !important;
	min-width: 4em;
	padding: 4px 8px;
	position: relative;
}
.input-unit span {
	border: 1px solid #999;
	box-sizing: border-box;
	float: left;
	height: 1.5em;
	padding: 2.3px 8px;
}
.justify-center {
	justify-content: center;
}
label {
	margin-left: 8px;
	display: inline-block;
}
legend {
	background-color: white;
	height: 1.5em;
	padding: 2px 5px 0px 5px;
	position: absolute;
	top: 5px;
}

#loadcell #dla-container .loadcell-name input
{
    text-align: right;
}
#loadcell #dla-container .dla3-grid
{
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-row-gap: 0.5em;
    padding-top: 1em;
}
#loadcell #dla-container .dla3-grid div:nth-child(2n)
{
    justify-self: right;
}
#loadcell #dla-container .redirect-container
{
    justify-content: center;
}
#loadcell #dla-container .redirect-container a
{
    flex-basis: unset;
}

.loadcell-name {
	right: 2.1875em; /* 35px */
}

.loadcell-name input {
	width: 10.9375em; /* 175 px*/ 
	font-weight: bold;
	border: 1px solid #aaa;
}

.l-half-row {
    align-items: center;
    display: flex;
    flex-basis: 50%;
}

.l-row-nowrap {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.l-row-wrap {
    flex-wrap: wrap;
}

.main-wrapper {
	display: flex;
	flex-direction: row;
	flex: 1 0 auto;
}
p {
    color: #666;
    display: inline-block;
	line-height: 1.25em;
	margin-bottom: 0;
}
.page-title {
    background-color: white;
    border: 1px solid #ddd;
	border-radius: 4px;
	margin-top: 10px;
	padding: 16px 16px 10px 16px;
	position: relative;
}
.page-title h1 {
	align-items: flex-end;
	display: inline-flex;
	justify-content: space-between;
	width: 100%;
}
.placeholder-box {
	display: flex;
}
.placeholder-box div {
	font-size: 2em;
	font-weight: bold;
	margin: auto;
	opacity: 0.4;
	text-align: center;
}
.position-input-degress {
	margin-left: 1em;
	margin-right: 0.5em;
	width: 4em;
	text-align: right;
}
.position-input-minutes {
	margin-right: 0.5em;
	width: 5.5em;
	text-align: right;
}
.position-input-direction {
	margin-right: 2em;
	width: 3em;
}
select {
	max-width: 10em;
	text-transform: capitalize;
}
select option {
	text-transform: capitalize;
}
.sidebar {
    background-color: #6e6e6e;
	flex: 0 0 200px;
	position: relative;
}
.sidebar li i {
	float: right;
}
.sidebar ul, .sidebar li{
    display: block;
    list-style: none;
    margin-top: 0;
    padding: 0;
	text-decoration: none;
}
.sidebar ul a {
	background: #333;
	border-bottom: 2px solid #444;
	color: #ccc;
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
}
.sidebar ul a:hover {
	background: #444;
	color: #fff;
	padding-bottom: 8px;
}
.sidebar .submenu {
    display: none;
    list-style: none;
    margin: 0;
	padding: 0;
	position: relative;
	z-index: 20;
}
.sidebar-bottom {
    bottom: 0;
    color: #ddd;
    font-size: 15px;
	position: absolute;
	padding: 16px 12px;
	width: 100%;
	z-index: 10;
}
.site-title {
    float: left;
	line-height: 1.25em;
	margin-right: 0.5em;
	max-width: 12em;	
    min-width: 9em;
    position: relative;
    width: 15%;
}
.site-title a {
    background-image: url('images/A+T-Instruments-logo-reverse.jpg');
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    font-size: 100%;
    max-width: 15em;
    overflow: hidden;
    text-indent: -9999em;
    width: 100%;
}
.site-title a:after {
    content: '';
    display: block;
	padding-top: 17%
}
.submenu {
    max-height: 16em;
    overflow: hidden;
    transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
}
.submenu li a {
	background: #555;
}
.switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}
  
.switch input {
    display:none;
}

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

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
}

input:checked + .slider {
    background-color: #66bb6a;
}

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

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
}
textarea {
	font-family: Ubuntu Mono,Menlo,Monaco,Consolas,Courier New,monospace;
	overflow-y: scroll;
	resize: vertical;
}
td, th {
	padding: 4px;
	text-align: left;
}
tr {
	border-bottom: 1px solid #ccc;
}
.tooltip-wrapper {
	align-items: center;
	display: flex;
	flex:0 1 auto;
	flex-direction: row;
	position: relative;
}
.tooltip {
	margin-left: 0.5em;
	background-color: #aaa;
	border-radius: 50%;
	display: inline-block;
	height: 1.2em;
	width: 1.2em;
	text-align: center;
	font-size: 14px;
	line-height: 1.2em;
	min-width: 1.2em;
    white-space: initial;
}
.tooltip:before {
	content:'?';
	font-weight: bold;
	color: #fff;
}
.tooltip:hover p {
	display: block;
	transform-origin: 100% 0%;
	
	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;
	z-index: 10000;
}
.tooltip p {
	background: #444;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: white;
	display: none;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.4;
	padding: 20px;
	position: absolute;
	text-align: left;
	text-transform: none;
	top: 1.5em;
	width: 300px;
	z-index: 10000;
}
.tooltip[tooltip-position='left'] p {
	right: -0.5em;
}
.tooltip[tooltip-position='left'] p:before {
	right: 0.7em;
	left: unset;
}
.tooltip p:before {
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color: #444;
    left: 0.2em;
    top:-10px;
}
.tooltip p em {
	color: red;
	font-size: 1.2em;
	font-style: normal;
}
.top-wrapper {
	margin-top: 10px;
}

/* Flexbox */

.flex-field {
    align-items: center;
	display: flex;
	flex: 0 0 100px;
	margin: 0;
}
.flex-half {
    align-items: center;
    display: flex;
    flex: 0 0 50%;
	flex-direction: row;
	height:100%;
}
.flex-heading {
    align-items: center;
    align-self: center;
    display: flex;
    flex: 0 0 150px;
    justify-content: space-between;
	margin-right: 10px;
	position: relative;
}
.flex-row {
    align-items: center;
	display: flex;
	flex-direction: row;
	margin-top: 8px;
}
.flex-field-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	border-top: 0;
	border-bottom: 0;
}
.flex-row:first-child {
	margin-top: 0;
}
.flex-third {
	flex: 0 0 33%;
	display: flex;
	flex-direction: row;
	min-width: 0; /*wierd MS Edge issue*/
}
.flex-spaced {
	justify-content: space-between;
}
.flex-center {
	justify-content: center;
}
.flex-fourth {
	flex: 0 0 25%;
	display: flex;
	flex-direction: row;
	min-width: 0;
}

/* Navigation Bar */

.nav {
	position: relative;
	background: #000;
	height: 100%;
}
.nav a {
    background: #000;
    color: #fff;
    display: block;
    font-size: 1.1em;
    min-width: 80px;
	padding: 20px 20px;
	text-align: center;
    text-decoration: none;
	white-space: nowrap;
}
.nav a:hover, .nav a:active, .nav-item--selected {
	border-bottom: 0.2em solid white;
}
.nav button {
    background-color: #666;
    border: 0;
    color: #fff;
    cursor: pointer;
    height: 100%;
    outline: none;
    padding: 0 15px;
	position: absolute;
	right: -45px;
}
.nav button:after {
    background-color: #666;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    content: attr(count);
    font-size: 1em;
    font-weight: bold;
    height: 28px;
    left: -16px;
    line-height: 1.2em;
	position: absolute;
	text-align: center;
	top: 12px;
    width: 28px;
}
.nav button:hover {
	background-color: #aaa;
}
.nav button:hover:after {
    transform: scale(1.075);
}
.nav .hamburger {
    background: #fff;
    height: 4px;
    margin: auto;
    position: relative;
    width: 32px;
}
.nav .hamburger:before,
.nav .hamburger:after {
    background: #fff;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    width: 32px;
}
.nav .hamburger:before {
    top: -8px;
}
.nav .hamburger:after {
    bottom: -8px;
}
.nav .hidden {
    display: none;
}
.nav .hidden-links {
    position: absolute;
    right: -46px;
    top: 100%;
    margin-top: 0em;
}
.nav .hidden-links li {
    border: 1px solid #666;
    display: block;
}
.nav li {
	margin-top: 0;
}
.nav .visible-links {
    display: inline-table;
    margin-bottom: 0.2em;
	margin-top: 0.2em;
	padding-left: 0;
}
.nav .visible-links li {
    border-left: 1px solid #666;
    display: table-cell;
}
.nav .visible-links li:last-child {
	border-right: 1px solid #666;
}
.nav-container {
    float: left;
    height: 100%;
	margin-right: 5%;
}
.sub-bar {
	background: #aaa;
    border-bottom: 1px solid black;
    border-top: 1px solid white;
    flex: 0 0 auto;
    height: 1vh;
    left: 0;
	position: relative;
	width: 100%;
	z-index: 600;
}
.colour-group {
	display: flex;
	align-content: center;
}
.colour-group > .colour-input {
	border: none;
	background: none;
	padding: 0;
	width: 30px;
}

/**
 * -- Alarm Page --
 */
#alarms #alarm-reset {
	margin-top: 0.5em;
	position: absolute;
	right: 1em;
}
#alarms .alarm-active {
	color: red;
}
#alarms .alarm-grid {
	display: grid;
	grid-row-gap: 1em;
	grid-template-columns: 22% 13% 13% 13% 13% 13% 13%;
	grid-template-rows: auto;
}
#alarms .alarm-grid a {
	justify-self: flex-end;
	width: 4em;
}
#alarms .alarm-grid > div:not(:nth-child(7n+1)) {
	align-items: center;
	display: flex;
	justify-content: center;
}
#alarms .alarm-grid > *:nth-last-child(-n+7) { /* Border over Anchor Alarm row on the 'Alarms' page" */
	border-top: 1px solid #ddd;
	padding-top: 0.5em;
}
#alarms .alarm-grid > #anchor-pos-set-button { /* Position of the 'Set' button on the 'Alarms' page */
	justify-content: flex-end;
}
#alarms .input-unit {
	margin: unset;
}
#anchor-pos-set-button a { /* Size of the 'Set' button on the 'Alarms' page */
	flex-basis: 4em;
}
#anchor-pos-setup .dropdown-container { /* Dropdown arrow container on the 'Alarms' page */
	background-color: white;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	display: flex;
	justify-content: center;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
#anchor-pos-input { /* Padding for the anchor position input fields on the 'Alarms' page */
	padding-top: 0.5em;
	padding-bottom: 1em;
}

/**
 * -- Analogue Page --
 */
#analogue .analogue-close {
	background-color: #fff;
	color: #ccc;
	cursor: pointer;
	font-size: 28px;
	font-weight: bold;
	height: 1em;
	position: absolute;
	right: 0.4em;
	top: 0.08em;
}
#analogue .analogue-close:hover,
#analogue .analogue-close:focus {
	color: black;
}

#analogue .analogue-channel {
	display: grid;
	grid-column-gap: 1em;
	grid-template-columns: 15% 20% 25% 15% 15%;
	margin-top: 0.5em;
}
#analogue .analogue-channel:first-of-type {
	margin-top: 1em;
}
#analogue .analogue-channel > div {
	align-items: center;
	display: flex;
}
#analogue .analogue-channel > div label {
	padding-top: 0.1em;
}
#analogue #analogue-container input[type="text"] {
	max-width: 8em;
}
#analogue #analogue-container legend {
	padding: 0 0.5em;
	top: 0.2em;
}
#analogue #analogue-container legend h2 {
	text-transform: capitalize;
}
#analogue #analogue-container legend input {
	margin-left: 0.5em;
}
#analogue-modal #config-box {
	display: flex;
}
#analogue-modal #config-box > fieldset {
	flex-grow: 1;
}
#analogue-modal .modal-title {
	text-transform: capitalize;
}
#analogue-modal #reference-container {
	flex-basis: 25%;
	flex-grow: unset !important;
}
#analogue-modal .reference-grid {
	display: grid;
	grid-auto-rows: 1.3em;
	grid-row-gap: 1em;
	grid-template-columns: 40% 60%;
	margin-top: 0.5em;
}
#analogue-modal .reference-grid .tooltip-wrapper {
	justify-content: space-evenly;
}
#analogue-modal #temperature-description {
	display: block;
	grid-row: 1 / span 2;
	grid-column: 3;
	margin-top: 0;
	padding: 0 1em;
}
#analogue-modal .temperature-grid {
	display: grid;
	grid-template-columns: 30% 30% 40%;
	grid-template-rows: auto;
	margin-top: 0.5em;
}
#analogue-modal .temperature-grid > * {
	align-items: center;
	display: flex;
	justify-content: center;
}
#analogue-modal .voltage-grid {
	display: grid;
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	margin-top: 0.5em;
}
#analogue-modal .voltage-grid > * {
	align-items: center;
	display: flex;
	justify-self: center;
}
#analogue-modal .voltage-grid > *:nth-child(2) {
	grid-column-start: 3;
}
#analogue-modal .voltage-grid > *:nth-child(3) {
	grid-column-start: 5;
}

/* Barometer */
#barometer #baro-data-grid {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	row-gap: 0.2em;
}

#barometer #baro-data-grid > * {
	display: flex;
	justify-content: center;
}

#barometer #baro-chart {
    width: 100%;
}

#barometer #trend-container {
	justify-content: right;
}

#barometer #trend-container .flex-heading {
	flex-basis: 100px;
}

/**
 * -- B&G Proprietary Functions --
 */
#bg-prop #compass-swing-container .flex-row {
	justify-content: space-between;
}
#bg-prop #compass-swing-container .flex-row > div {
	display: flex
}
#bg-prop select {
	max-width: none;
}
#compass-swing-modal .button-medium {
	flex-basis: unset;
}
#compass-swing-modal .flex-row {
	justify-content: space-between;
}
#compass-swing-modal #swing-status-row > div {
	display: flex;
}
#compass-swing-modal #swing-status-row .field-container {
	margin-left: 0.5em;
}
#compass-swing-modal #progress-complete {
	display: none;
	position: absolute;
	color: white;
	font-weight: bold;
	left: 50%;
	text-align: center;
	-webkit-transform: translateX(-50%);
	transform: translate(-50%, 50%);
	width: 100%;
}

#can-devices
{
	min-width: 8em;
}
/* -- CANbus Page -- */
#canbus .canbus-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-row-gap: 0.5em;
	grid-column-gap: 0;
}
#canbus .canbus-grid .can-invalid {
	background-color: #eaa;
}
#canbus .canbus-grid .grid-item {
	border-top: 1px solid #666;
	height: 1.5em;
	padding-top: 0.5em;
	text-align: center;
}
#canbus .canbus-grid .grid-item:nth-child(-n + 2) {
	border-top: none;
}
#canbus .canbus-grid .grid-item:not(:nth-child(2n + 1)) {
	/*justify-content: center;
	text-align: center;*/
}
#canbus .canbus-grid select {
	max-width: 15em;
}
#canbus .canbus-grid select option {
	background-color: white;
}

/**
 * Compass Corrections
 */
#compass-correction #compass-correction-container {
	display: grid;
	grid-template-columns: 6em repeat(19, 4em);
	overflow-x: scroll;
	border-top: 0.5px solid black;
	border-right: 0.5px solid black;
}
#compass-correction #compass-correction-container > *:not(:nth-child(-n+20)) {
	border-left: 0.5px solid black;
	border-top: 0.5px solid black;
}
#compass-correction #compass-correction-container > *:nth-child(-n+20) {
	display: flex;
	padding-right:-0.2em;
	text-indent: 0.2em;
	width: 100%;
	border-left: 0.5px solid black;
}
#compass-correction #compass-correction-container > *:nth-last-child(-n+20) {
	border-bottom: 0.5px solid black;
}
#compass-correction #compass-correction-container > *:nth-child(20n + 1) {
	padding-top: 0.1em;
	text-indent: 0.2em;
}
#compass-correction #compass-correction-container > *:nth-child(-n+20):not(:nth-child(1)) {
	direction: rtl
}
#compass-correction #compass-correction-container > input {
	width: unset;
}
#compass-correction .heel-grid {
	align-items: center;
	display: grid;
	grid-template-columns: 10% 40% 35% 15%;
}
#compass-correction .heel-grid > * {
	justify-self: center;
}
#compass-correction .heel-grid > div:nth-child(2) {
	margin-right: 15%;
}
#compass-correction #live-data-grid {
	align-items: center;
	display: grid;
	grid-row-gap: 0.5em;
	grid-template-columns: 20% 14% 20% 13% 20% 14%;
}
#compass-correction #live-data-grid > * {
	justify-self: center;
}

/* Current Page */
#current .input-unit {
	align-items: center;
	display: flex;
	margin-right: 1em;
	position: relative;
}
#current #sog-warning {
	flex: 0 1 auto;
	color: red;
	align-self: flex-end;
	margin-left: 1em;
}
#current .flex-field {
	align-self: flex-end;
}

#current #current-calc-title {
	flex-basis: 10em;
}
#current #current-error {
	color: red;
	flex-grow: 1;
}
#current #current-error > div {
	display: none;
}

/*
* -- Damping Page --
*/
#damping .damping-table .flex-row:nth-child(2) {
	margin-bottom: 1em;
}
#damping .damping-table .flex-row .flex-fourth:not(:first-child) {
	justify-content: center;
}
#damping .input-unit span {
	top: 0;
}
#damping .fixed-damping-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	grid-row-gap: 0.5em;
}
#damping .fixed-damping-grid > * {
	align-self: center;
}
#damping .fixed-damping-grid > :nth-child(-n + 4) {
	padding: .5em 0;
}
#damping .fixed-damping-grid > :nth-child(2) {
	padding-left: 1em;
}
#damping .fixed-damping-grid > :nth-child(3) {
	padding-left: 2.2em;
}
#damping .fixed-damping-grid > :nth-child(4) {
	padding-left: 1.4em;
}
#damping .fixed-damping-grid .field-container {
	justify-self: center;
	min-width: 4em;
}

/*
* -- Debug Page --
*/
#debug {
	max-width: none;
	right: 0px;
}
#debug .debug-top-row {
	margin-top: 16px;
}
.log-controls {
	justify-content: space-between;
	margin-top: 20px;
}
iframe {
	width: 100%;
	height: 70vh;
	margin: 20px 0;
}
#iframe-clear {
	flex: 0 1 auto;
}
.reload {
	display: inline-block;
	position: relative;
	height: 2em;
	padding: .25em;
	width: 2em;
	vertical-align: middle;
}
.reload:before, .reload:after {
	content: '';
	display: block;
}
.reload:before {
	border-color: transparent white white white;
	border-radius: 50%;
	border-style: solid;
	border-width: .125em;
	height: 1.5em;
	width: 1.5em;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.reload:after {
	border-color: transparent transparent transparent white;
	border-style: solid;
	border-width: .3125em 0 .3125em .5em;
	height: 0;
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
}
@-webkit-keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

/**
 * -- Environment Page -- 
 */
#environment .barometer {
	padding: 0 10px;
	justify-content: space-between;
}
#environment .no-source-row {
	color: #666;
	display: flex;
	opacity: 0.4;
	margin: 5px 0;
}
#environment .no-source-row h2 {
	margin: auto;
}
#environment #pressure {
	margin-left: 16px;
}
#environment .input-group input
{
    min-width: 3em;
    width: 3em;
}
.sensor-grid {
	align-items: center;
	display: grid;
	grid-row-gap: 10px;
	grid-template-columns: [sensor-name] 200px auto auto auto auto;
	grid-template-rows: auto;
	margin-bottom: 10px;
}
.sensor-grid .sensor-heading {
	display: flex;
	grid-row: 1;
	justify-content: center;
}
.sensor-grid .sensor-name {
	align-items: center;
	color: #666;
	display: flex;
	grid-column: 1;
	position: relative;
}
.sensor-grid .sensor-name.nmea-sensor {
	margin-left: 1.8em;
}
.sensor-grid .sensor-name .tooltip {
	margin-right: 10px;
}
.sensor-grid .sensor-offset {
	display: flex;
	grid-column: 3;
	justify-content: center;
}
.sensor-grid .sensor-value-offset {
	display: flex;
	grid-column: 4;
	justify-content: center;
}
.sensor-grid .sensor-value-raw {
	display: flex;
	grid-column: 2;
	justify-content: center;
}
.sensor-grid .sensor-select {
	grid-column: 5;
	justify-self: center;
}

/**
 * -- Expedition Export Page --
 */
#expedition-export .slider-container
{
    position: absolute;
    right: 0.3em;
    scale: 0.8;
    top: 0.5em;
}
#expedition-export #export-grid {
	display: grid;
	grid-row-gap: 0.5em;
	grid-template-columns: 30% 50% 20%;
}
#expedition-export #export-grid input[type="number"]
{
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: right;
    width: 3em;
}
#expedition-export #export-grid > :not(:nth-child(5n + 1))
{
    justify-self: center;
}
#expedition-export #export-grid > *:nth-child(5n + 3),
#expedition-export #export-grid > *:nth-child(5n + 4) {
	display: none;
}
#expedition-export #export-grid.advanced {
    grid-template-columns: 15% 45% 15% 15% 10%;
}
#expedition-export #export-grid.advanced > *:nth-child(5n + 3)
{
    width: min(12vw, 8em);
}
#expedition-export #export-grid.advanced > *:nth-child(5n + 3),
#expedition-export #export-grid.advanced > *:nth-child(5n + 4) {
	display: initial;
}
#expedition-export #export-grid > *:nth-child(-n + 5) {
	margin-bottom: 0.5em;
}
#expedition-export #export-grid > *:nth-child(5n + 2),
#expedition-export #export-grid > *:nth-child(5n + 5) {
	justify-self: center;
	text-align: center;
}
#expedition-export #export-grid select {
	max-width: 15em;
}

/*
* -- Expedition Format Page --
*/
#expedition-format .format-grid {
	display: grid;
	grid-row-gap: 8px;
	grid-template-columns: 34% 33% 33%;
	grid-template-rows: auto;
}

#expedition-format .format-grid div {
	font-weight: bold;
}

#expedition-format .format-grid h2 {
	font-size: 1.5em;
	margin-bottom: 10px;
}

#expedition-format .format-grid h2:not(:first-child) {
	justify-self: center;
}

#expedition-format .format-grid input {
	justify-self: center;
	width: auto;
}

#expedition-format .format-grid select {
	justify-self: center;
}

#expedition-format #warning-container p {
	margin-top: 0;
}
#expedition-format #warning-container input {
	margin-left: 0.5em;
}

/**
 * -- Fastnet Page --
 */
#fastnet #bearing-container fieldset {
	display: flex;
}
#fastnet #bearing-container fieldset > div {
	display: flex;
	flex: 1 0 auto;
	margin-top: 0.5em;
	padding-left: 25%;
}
#fastnet #bearing-container fieldset > div > div {
	display: flex;
	flex-basis: 25%;
	justify-content: center;
}
#fastnet #bearing-container fieldset > div input {
	margin-left: 5%;
}
#fastnet .dropdown {
	display: none;
	margin-top: 1em;
}
#fastnet .dropdown-container {
	border-bottom: 1px solid #ccc;
	display: flex;
	padding-bottom: 0.3em;
	margin-top: 1.5em;
}
#fastnet .dropdown-container > *:first-child {
	align-self: flex-end;
	flex: 1 0 auto;
}
#fastnet .dropdown-container > a {
	flex: 0 1 auto;
}
#fastnet #fastnet-resistance-container .flex-row {
	justify-content: space-between;
}
#fastnet #fastnet-resistance-container .flex-row a {
	margin-left: 1em;
}
#fastnet .io-grid {
	display: grid;
	grid-row-gap: 0.5em;
	grid-template-columns: 20% 20% 20% 30% 10%;
}
#fastnet .io-grid > * {
	align-self: center;
	justify-self: center;
}
#fastnet .io-grid > *:nth-child(5n) {
	justify-self: unset;
}
#fastnet .io-grid #position-output-enable {
	grid-column-start: 5;
}
#fastnet .io-grid > *:first-child {
	grid-column-start: 2;
}
#fastnet input[type="text"] {
	max-width: 8em;
}
#fastnet #loadcell-output .output-row > h2 {
	text-transform: uppercase;
} 
#fastnet .output-grid {
	grid-template-columns: 20%;
}
#fastnet .output-row {
	align-items: center;
	display: grid;
	grid-column-gap: 0.5em;
	grid-template-columns: 22% 15% 26% 17% 15%;
	margin-bottom: 0.5em;
}
#fastnet .output-row > *:not(:nth-child(5n + 1)):not(:nth-child(5n + 2)) {
	align-self: center;
	justify-self: center;
}
#fastnet .output-row > h2 {
	text-transform: capitalize;
}
#fastnet .output-row .tooltip > p {
	text-transform: capitalize;
}
#fastnet .page-title > div {
	align-items: center;
	display: flex;
	justify-content: space-between;
}
#fastnet .page-title > div > p {
	flex-basis: 85%;
}
#fastnet #rudder-tooltip .tooltip {
	position: absolute;
	right: -2em;
}
#fastnet .primary-source {
	padding-bottom: 0.5em;
	border-bottom: 1px solid #ccc;
}

#heading #compass-calibration
{
	margin-left: 1em;
}

/**
 * Heel page
 */
#heel .flex-third {
	justify-content: space-around;
}
#heel .flex-third h2 {
	align-self: center;
}
#heel #sensor-select-row {
	display: flex;
	justify-content: space-around;
}
#heel #instance-select .flex-half > div {
	flex: 1;
}
#heel .label-wide {
	margin-right: 0.5em;
	width: 4.5em;
}
#heel .label-narrow {
	width: 2em;
}
#heel li:not(:first-child) {
	margin-top: 16px;
}
#heel #external-heel-container > .box > .flex-row
{
    margin-left: 1em;
}
#heel #external-heel-container > .box > .flex-row:not(:first-child)
{
    margin-top: 1em;
}
.heel-mounting {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
#sensor-fields .flex-field {
	flex: 1 1 auto;
	justify-content:center;
}
#sensor-fields .flex-row {
	margin: 16px 16px 8px;
}

/*
* -- Heel Corrections --
*/
#heelCorrections td:first-child, 
#heelCorrections th:first-child {
	border-right: 1px solid #ccc;
}
#heelCorrections #base-field {
	border: 1px solid #ccc;
	text-align: right;
	background-color: #F2F2F2;
	min-width: 4em;
	padding: 0px 2px 0px 2px;
	height: 1.2em;
	overflow: hidden;
}
#heelCorrections td, #heelCorrections th {
	text-align: center;
}
#heelCorrections #source-select {
	position: absolute;
	right: 30px;
	top: 16px;
	z-index: 5;
}
#heel-table {
	margin: 0.5em 0;
}
#heel-table span {
	margin-left: 0.2em;
}
.correction-base {
	width: 4em;
	text-align: right;
	-moz-appearance:textfield;
}

/* Home page */
#home #contact-row .flex-half:not(:first-child), 
#home #version-row .flex-half:not(:first-child) {
	justify-content: flex-end;
}
#home p:first-child {
	margin-top: 0;
}
#home #serial-number {
    float: right;
    font-size: 0.6em;
}
#home #hardware .flex-half {
	justify-content: center;
}

/*
* --Leeway Page --
*/
#leeway .flex-heading {
	flex: 0 1 12em;
}

#leeway .course-calculation-grid {
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-row-gap: 0.5em;
}
#leeway .course-calculation-grid > * {
	display: flex;
	justify-content: center;
}
#leeway .leeway-calculation-grid {
	display: grid;
	grid-template-columns: 14% 19% 14% 19% 22% 12%;
	grid-row-gap: 0.5em;
}
#leeway .leeway-calculation-grid > div {
	display: flex;
	justify-content: space-around;
}

/* Loadcell Page */
#loadcell .loadcell-container legend > h2 {
	text-transform: uppercase;
}
#loadcell .loadcell-container .flex-row > *:first-child {
	flex-basis: 75%;
}
#loadcell .loadcell-container .flex-field {
	flex: unset;
	flex-grow: 1;
}
#loadcell .loadcell-container .loadcell-advanced .flex-row > *:first-child {
	flex-basis: 88%;
}
#loadcell .loadcell-advanced {
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	margin-top: 1em;
	padding: 0;
	position: relative;
}
#loadcell .loadcell-advanced > .advanced-toggle {
	background-color: white;
	font-size: 0.5em;
	padding: 0 0.5em;
	position: absolute;
	right: 0.5em;
	top: -0.9em;
}
#loadcell .loadcell-advanced:hover {
	border-top-color: black;
}
#loadcell .loadcell-advanced:hover legend, #loadcell .loadcell-advanced:hover i {
	border-color: black !important;
	font-weight: bold;
}
#loadcell .loadcell-advanced:hover * {
	opacity: 1 !important;
}
#loadcell .loadcell-advanced:after {
	content: '';
	cursor: pointer;
	height: 1.4em;
	position: absolute;
	top: -0.8em;
	width: 100%;
}
#loadcell .loadcell-advanced .arrow-down {
	border-color: #666;
}
#loadcell .loadcell-advanced legend {
	font-size: 0.8em;
	left: 0.5em;
	top: -0.9em;
}
#loadcell .loadcell-advanced .loadcell-hidden {
	margin-top: 0.8em;
	opacity: 0.6;
}
#loadcell .loadcell-close {
	background-color: #fff;
	color: #ccc;
	cursor: pointer;
	font-size: 28px;
	font-weight: bold;
	height: 1em;
	position: absolute;
	right: 0.4em;
	top: 0.08em;
}
#loadcell .loadcell-close:hover,
#laodcell .loadcell-close:focus {
	color: black;
}
#loadcell #loadcell-row {
	border-bottom: 1px solid #ccc;
	padding-bottom: 0.5em;
}
#loadcell #loadcell-row > div {
	flex: 1 0 auto;
}
#loadcell #loadcell-grid {
	display: grid;
	grid-row-gap: 8px;
	grid-template-columns: 15% 20% 22% 25% 18%;
	grid-template-rows: auto;
	margin-top: 0.5em;
}
#loadcell #loadcell-grid > *:first-child {
	grid-column: -5;
}
#loadcell #loadcell-grid > *:not(:nth-child(5n)) {
	justify-self: center;
}

/* -- Navigation Page -- */
#nav #source-select-container a {
	margin-left: 2em;
}
#nav .flex-heading {
	flex-basis: 10em;
}
#nav .nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 0.5em;
	grid-row-gap: 0.5em;
}
#nav .nav-grid > * {
	justify-self: center;
}

/*
* -- NMEA Page --
*/
#NMEA .overflow {
	overflow-x: auto;
	overflow-y: hidden;
	grid-column: 2/2;
	grid-row: 1/calc(var(--gridRows) + 3);
	margin-bottom: auto;
}
#NMEA .grid {
	display: grid;
	grid-template-columns: repeat(var(--gridCols), minmax(8em, auto));
	grid-auto-rows: 1.5em;
}
#NMEA .grid .label-disabled {
    color: rgba(0, 0, 0, 0.4);
}
#NMEA .prop-txrx-grid {
	grid-template-rows: 3em;
}
#NMEA .txrx-grid {
	grid-template-rows: 3em 2em;
}
#NMEA .outer-grid {
	grid-template-rows: 3em 2em;
	grid-template-columns: 1fr 9fr;
}
#NMEA .prop-outer-grid {
	grid-template-rows: 3em;
	grid-template-columns: 1fr 9fr;
}
#NMEA .cell {
	border-bottom: 1px solid gray;
	display: flex;
	align-items: center;
}
#NMEA .outer-cell {
	background: #fff;
	border-right: 1px solid #666;
	box-shadow: 4px 2px 4px 1px #888;
	padding-right: 1em;
	justify-content: space-between;
	position: relative;
}
#NMEA .inner-cell {
	text-align: center;
	justify-content: center;
	word-break: break-word;
}
#NMEA #filter-container {
	padding-bottom: 1.5em;
}
#NMEA #proprietary-container {
	padding-bottom: 0;
}

/**
* -- Mast Motion Page -- 
*/
#mast-motion em {
    text-decoration: underline;
}
#mast-motion .page-title #wind-source {
    flex-grow: 1;
}
#mast-motion .page-title a {
    flex-basis: 2em;
}
#mast-motion #estimated-description p {
    margin: 0;
}
#mast-motion #estimated-description #mast-height-container {
    flex-basis: 38em;
    justify-content: flex-end;
    margin-left: 1em;
}
#mast-motion #estimated-description #mast-height-container .input-group {
    margin: 0 0.5em;
}
#mast-motion .input-group input {
    height: 1.5em;
    min-width: 3em;
    width: 3em;
}
#mast-motion .input-group span {
    padding: 4px 8px;
}
#mast-motion #estimated-description #mast-height-container a {
    flex-basis: 2em;
}

#mast-motion.content-wrapper {
    max-width: unset;
    right: unset;
}
#mast-motion.content-wrapper .page-title,
#mast-motion.content-wrapper #estimated-description,
#mast-motion.content-wrapper #threshold-container,
#mast-motion.content-wrapper #button-container {
    left: 50%;
    max-width: 820px;
    position: relative;
    transform: translateX(-50%);
}
#mast-motion.content-wrapper .canvas-container {
    height: 45vh;
    position: unset;
}

#mast-motion .modal .modal-title-container > div {
    flex: 1 0 auto;
}
#mast-motion .modal .modal-title {
    border-bottom: 1px solid #fff;
    margin-bottom: 8px;
}
#mast-motion .modal .modal-close {
    font-size: 2.5em;
}
#mast-motion .modal .box {
    margin: .2em;
}
#mast-motion .modal .modal-content .row-nowrap {
    flex-basis: 50%;
    flex-wrap: nowrap;
    justify-content: space-around;
    white-space: nowrap;
}
#mast-motion .modal .modal-content .row-nowrap h2 {
    display: flex;
    flex-basis: 6em;
}
#mast-motion .modal .modal-content .row-nowrap .tooltip {
    position: relative;
}
#mast-motion .modal .modal-content .row-nowrap .field-container {
    flex-basis: 5em;
    padding: .2em;
}
#mast-motion .modal .button-container {
    display: flex;
    justify-content: center;
}

#mast-motion .flex-heading {
	flex-basis: 200px;
}
#mast-motion #reload-button {
	float: right;
	margin-bottom: 0.5em;
}
#mast-motion .flex-row {
	justify-content: center;
}
#mast-motion #input-select {
	max-width: 800px;
}
#mast-motion #input-select-container .flex-heading {
	flex-basis: 10em;
}
#mast-motion .flex-half {
	justify-content: space-around;
}
#mast-motion #threshold-container .flex-row
{
    justify-content: space-between;
}
#mast-motion #threshold-container .flex-heading
{
    flex-basis: 12.5em;
}
#mast-motion #threshold-container div:nth-child(2)
{
    display: flex;
}
#mast-motion #threshold-container div:nth-child(2) .input-unit
{
    margin: 0;
}
#mast-motion #threshold-container #threshold-enable
{
    margin-left: 1em;
}

/* MOB */
#mob .field-container{
	margin: auto;
}

#mob .flex-heading {
	align-self: start;
}
#mob p:first-child {
	margin-top: 0px;
}
#mob label {
	align-items: center;
	display: flex;
	margin-left: 0.5em;
}
#mob input[type="radio"] {
	margin-right: 0.5em;
}
#mob .input-unit {
	margin-left: 0.5em;
}
#mob #mob-history td, #mob #mob-history th {
	text-align: center;
}
#mob #mob-range-bearing-grid {
	display: grid;
	grid-row-gap: 8px;
	grid-template-columns: 34% 33% 33%;
	grid-template-rows: auto;
	margin-top: 0.5em;
}
#mob #mob-range-bearing-grid div:nth-child(3n+2),
#mob #mob-range-bearing-grid div:nth-child(3n+3) {
	justify-content: space-evenly;
	text-align: center;
}
#mob #mob-trigger-list {
	color: #666;
	padding-left: 1em;
}
#mob #mob-trigger-list li:not(:first-child) {
	margin-top: 0.5em;
}
#mob #mob-warning-container {
	margin-left: 0.5em;
}
#mob #mob-warning-small {
	color:red;
	font-size: 0.85em;
	font-weight: normal;
	margin: 0;
}
#mob #mob-warning-large {
	color: red;
	display: inline-block;
	font-size: 0.8em;
	font-weight: bold;
	margin: 0;
}
.MOB-warning {
	color: red;
	text-align: center;
}

/* Pages page */

#firmware .file-check {
	margin-left: 16px;
	color: green;
}
#firmware #file-to-upload {
	flex: 1;
}
#firmware .firmware-grid {
	display: grid;
	grid-row-gap: 8px;
	grid-template-columns: 32% 17% 17% 17% 17%;
	grid-template-rows: auto;
	margin-top: 0.5em;
}
#firmware .firmware-grid a {
	justify-self: flex-end;
}
#firmware .firmware-grid .device-name {
	font-weight: bold;
	text-transform: capitalize;
}
#firmware .firmware-grid .hidden {
	display: none;
}
#firmware .firmware-progress {
	grid-column: 2 / span 3;
	height: auto;
}
#firmware .flex-heading {
	flex-basis: 10em;
}
#firmware #ip-input {
	grid-column: 3 / span 2;
}
#firmware [name="upgrade-button"], #firmware [name="bfd-upgrade-button"] {
	visibility: hidden;
}
#firmware #fixed-ip-upgrade {
	visibility: visible !important;
}
#firmware .warning {
	color: red;
	font-style: normal;
}

/* --- Garmin User Data --- */
#garmin .slider-container
{
    position: absolute;
    right: 0.3em;
    scale: 0.8;
    top: 0.5em;
}
#garmin #user-data-container 
{
	display: grid;
	grid-row-gap: 0.5em;
	grid-template-columns: 10% 30% 30% 20% 10%;
    padding-right: 0;
}
#garmin #user-data-container input[name="instance"]
{
    width: 3em;
}
#garmin #user-data-container > :not(:nth-child(7n + 1))
{
    justify-self: center;
    max-width: 100%;
}
#garmin #user-data-container > :nth-child(7n + 3),
#garmin #user-data-container > :nth-child(7n + 4)
{
    display: none;
}
#garmin #user-data-container.advanced > :nth-child(7n + 3),
#garmin #user-data-container.advanced > :nth-child(7n + 4)
{
    display: initial;
}
#garmin #user-data-container input[name="channel-name"]
{
    max-width: 10em;
}
#garmin #user-data-container.advanced input[name="channel-name"]
{
    max-width: 8em;
}
#garmin #user-data-container.advanced select[name="channel-format"],
#garmin #user-data-container.advanced select[name="sender"]
{
    max-width: 6em;
}
#garmin #user-data-container input[type="checkbox"]
{
    margin-right: 0;
}
#garmin #user-data-container.advanced
{
    grid-template-columns: 10% 20% 15% 10% 20% 15% 10%;
}
#garmin #user-data-container > *:nth-child(-n + 7)
{
	margin-bottom: 0.5em;
	text-align: center;
}

/* Pages Page */
#data-page 
{
	max-width: 1200px;
    position: static;
}
#data-page *
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#data-page.content-wrapper {
    min-width: 380px;
}
#data-page #display-select-row h2 {
    flex-grow: 1;
  }
  #data-page #display-select-row select {
    flex-basis: 15em;
  }
  #data-page #fullscreen {
    position: absolute;
    right: 5em;
  }
  #data-page #grid-container {
    background-color: black;
    margin-top: 0.5em;
    max-width: 1200px;
    overflow: hidden;
    padding: 0;
  }
  #data-page #grid-container .grid {
    align-self: center;
    border: 1px solid black;
    border-radius: 5px;
    height: min(840px, 100vh);
    max-width: inherit;
  }
  #data-page #grid-container .grid.grid-landscape {
    height: min(840px, 100vh);
  }
  #data-page #grid-container .grid.grid-portrait {
    height: 1280px;
  }
  #data-page #grid-container .grid .grid-cell {
    border: 1px solid #666;
    border-radius: 4px;
    container-type: size;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
  }
  #data-page #grid-container .grid .grid-cell:after {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    font-weight: 900;
    position: absolute;
    right: 4px;
    top: 4px;
  }
  #data-page #grid-container .grid .grid-cell:hover {
    cursor: pointer;
    opacity: 0.4;
  }
  #data-page #grid-container .grid .grid-cell.analogue-cell {
    container-type: size;
  }

    #data-page #grid-container .grid .grid-cell.analogue-cell .field-container {
        bottom: 0.1em;
        font-size: min(10cqw, 10cqh);
        height: unset;
        left: 0.2em;
        position: absolute;
        white-space: unset;
        width: unset;
        z-index: 3;
    }

    #data-page #grid-container .grid .grid-cell.analogue-cell img {
        height: 100%;
        object-fit: contain;
        position: absolute;
        width: 100%;
    }

    #data-page #grid-container .grid .grid-cell.analogue-cell img.pointer
    {
        z-index: 2;
    }

    #data-page #grid-container .grid .grid-cell.analogue-cell img.dial
    {
        z-index: 1;
    }

    #data-page #grid-container .grid .grid-cell.bar-cell {
        display: flex;
        justify-content: center;
    }

    #data-page #grid-container .grid .grid-cell.bar-cell .bar-field {
        align-self: center;
        height: 95%;
        padding: 2.25em 0.5em 0.5em 0.5em;
        width: 95%;
    }

    #data-page #grid-container .grid .grid-cell.bar-cell .field-container {
        font-size: 2rem;
        height: 1.1em;
        position: absolute;
        right: 1.2em;
        width: unset;
        white-space: nowrap;
    }

    #data-page #grid-container .grid .grid-cell.bar-cell canvas {
        height: 100%;
    }

    @container (width < 300px) {
        #data-page #grid-container .grid .grid-cell.bar-cell .bar-field {
            padding: 2.25em 0.5em 2.25em 0.5em;
        }

        #data-page #grid-container .grid .grid-cell.bar-cell .field-container {
            bottom: 0.25em;
            margin: 0 auto;
            right: unset;
        }
    }

  #data-page #grid-container .grid .grid-cell .field-container {
    align-items: center;
    border: none;
    background: none;
    display: flex;
    font-size: min(min(50cqw, 80cqh), 18em);
    height: 100%;
    justify-content: center;
    margin: 0;
    min-width: unset;
    padding: 0.1em 0 0 0;
    white-space: preserve;
    width: 100%;
  }
  #data-page #grid-container .grid .grid-cell-title {
    font-size: 1.5rem !important;
    font-weight: 600;
    left: 4px;
    position: absolute;
    top: 4px;
  }
  #data-page #grid-container:fullscreen {
    padding: 0.1em;
    pointer-events: none;
  }
  #data-page #grid-container:fullscreen #data-grid {
    height: 100vh;
    max-height: 100vh !important;
  }
  #data-page #grid-container:fullscreen .grid-cell:after {
    display: none;
  }
  #data-page #json-area {
    font-family: Ubuntu, Mono, Menlo, Monaco, Consolas, Courier New, monospace;
    min-height: 75vh;
    overflow-y: scroll;
    resize: vertical;
    width: 100%;
  }
  #data-page #page-config-container {
    position: relative;
  }
  #data-page #page-config-container:hover {
    cursor: pointer;
  }
  #data-page #page-config-container:hover > div *:not(#fullscreen) {
    opacity: 0.6;
  }
  #data-page #page-config-container i {
    padding-left: 0.7em;
    border-left: 1px solid #AAAAAA;
  }
  #data-page #page-config-container > div {
    display: flex;
    justify-content: space-between;
  }
  #data-page #page-config-options .page-config {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 2.75em;
    padding-bottom: 0.5em;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 0.75em;
  }
  #data-page #page-config-options input[type=color] {
    max-height: 27px;
  }

#data-page .responsive-top-margin {
    margin-top: -0.5em;
}
#data-page .responsive-top-margin > * {
    margin-top: 0.5em;
}
#data-page #save-row > h2 {
    flex-grow: 1;
}
#data-page #save-row #save-button {
    margin-left: 1em;
}
@media (max-width: 40em) {
    #data-page #save-row {
        justify-content: center;
    }
    #data-page #save-row > h2 {
        text-align: center;
    }
}
#data-page #load-row {
    flex-wrap: wrap;
    margin-top: -1em;
}
#data-page #load-row > * {
    margin-top: 1em;
}
#data-page #load-row > div:first-child {
    flex: auto;
    flex-wrap: wrap;
    flex-basis: 24.5em;
}
#data-page #load-row > div:nth-child(2) {
    flex: auto;
    flex-basis: 13.4em;
    justify-content: right;
}
@media (max-width: 52em) {
    #data-page #load-row div {
        justify-content: center !important;
    }
}
#data-page #load-row #load-wrapper {
    border-right: 1px solid #aaa;
    margin-right: 1em;
    padding-right: 1em;
}
#data-page #load-row #saved-configs {
    margin-left: 1em;
}
#data-page .save-config-row {
	align-items: center;
	display: flex;
}
#data-page .save-config-row #load-button, #data-page .save-config-row #save-button {
	margin-left: auto;
}
#data-page .save-config-row #delete-button {
	margin-left: 0.5em;
}
#data-page .save-config-row > div {
	align-items: center;
	border-right: 1px solid #666;
	display: flex;
	flex-grow: 1;
	margin-right: 1em;
	padding-right: 1em;
}
#data-page .save-config-row > div > a:last-child {
	margin-left: auto;
}
#data-page .save-config-row input, #data-page .save-config-row select {
	margin-left: 1em;
	width: 10em;
}
.ui-dialog-titlebar {
    background-color: #111111;
}
#dialog {
    overflow: visible;
}
#dialog * {
    box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#dialog legend {
    height: unset;
    padding: 0 5px;
    position: unset;
}
#dialog .box {
    border: 1px solid #aaa;
    box-shadow: 3px 2px 2px rgba(0,0,0,.2);
}
  #dialog #dialog-field, #dialog #dialog-field-style, #dialog #dialog-cell-type {
    padding-bottom: 1em;
  }
  #dialog #dialog-field .l-half-row, #dialog #dialog-field-style .l-half-row, #dialog #dialog-cell-type .l-half-row {
    justify-content: space-between;
    padding: 0 1em 0 0.5em;
  }
  #dialog #dialog-field .l-half-row > *, #dialog #dialog-field-style .l-half-row > *, #dialog #dialog-cell-type .l-half-row > * {
    margin-top: 0.5em;
  }
  @media (max-width: 580px) {
    #dialog #dialog-field .l-half-row, #dialog #dialog-field-style .l-half-row, #dialog #dialog-cell-type .l-half-row {
      justify-content: center;
    }
    #dialog #dialog-field .l-half-row > div, #dialog #dialog-field-style .l-half-row > div, #dialog #dialog-cell-type .l-half-row > div {
      text-align: center;
    }
    #dialog #dialog-field .l-half-row > div:first-child, #dialog #dialog-field-style .l-half-row > div:first-child, #dialog #dialog-cell-type .l-half-row > div:first-child {
      margin-top: 0.8em;
    }
  }
  #dialog #dialog-field > .flex-row:first-of-type, #dialog #dialog-field-style > .flex-row:first-of-type, #dialog #dialog-cell-type > .flex-row:first-of-type {
    margin-top: -0.5em;
  }
  #dialog #dialog-field > .flex-row > .l-half-row, #dialog #dialog-field-style > .flex-row > .l-half-row, #dialog #dialog-cell-type > .flex-row > .l-half-row {
    flex-grow: 1;
  }
  #dialog #dialog-field > .flex-row > .l-half-row > div:first-child, #dialog #dialog-field-style > .flex-row > .l-half-row > div:first-child, #dialog #dialog-cell-type > .flex-row > .l-half-row > div:first-child {
    width: 6em;
  }
  #dialog #dialog-field select, #dialog #dialog-field-style select, #dialog #dialog-cell-type select {
    max-width: 11em;
  }
  #dialog #dialog-field-style, #dialog #dialog-cell-type {
    margin-top: 1em;
  }
  #dialog #dialog-field-style select {
    width: 5.8em;
  }
  #dialog .tab-container {
    overflow: hidden;
    border: 1px solid #AAAAAA;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background-color: #f2f2f2;
    box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.2);
  }
  #dialog .tab-container button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.8em 1em;
    transition: 0.3s;
  }
  #dialog .tab-container button:hover {
    background-color: #ddd;
  }
  #dialog .tab-container button.active {
    background-color: #AAAAAA;
  }
  #dialog .tab-content {
    display: none;
    animation: fadeEffect 1s;
    -webkit-animation: fadeEffect 1s;
  }
  #dialog .tab-content#tab-rules > .flex-row > .box {
    flex: auto;
    margin-right: 0.5em;
    margin-top: 0.5em;
  }
  #dialog .tab-content#tab-rules > .flex-row > a {
    align-items: center;
    display: flex;
    height: 3em;
    justify-content: center;
    margin-top: 0.5em;
  }
  #dialog .tab-content #rule-container {
    margin-top: 0.5em;
    max-height: 30vh;
    overflow: auto;
    overflow-x: hidden;
  }
  #dialog .tab-content .rule-wrapper {
    border-radius: 4px;
    box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    margin-right: 0.5em;
    min-height: 4em;
  }
  #dialog .tab-content .rule-wrapper:not(:first-child) {
    margin-top: 0.5em;
  }
  #dialog .tab-content .rule-wrapper .rule-close {
    align-items: center;
    background-color: #fff5f5;
    border: 1px solid #aaa;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    display: flex;
    flex: 0 0 5%;
    justify-content: center;
  }
  #dialog .tab-content .rule-wrapper .rule-close:hover {
    background-color: #ffe6e6;
    cursor: pointer;
  }
  #dialog .tab-content .rule-wrapper .rule-close:hover i {
    color: #AAAAAA;
  }
  #dialog .tab-content .rule-wrapper .rule-content {
    background-color: #ffffff;
    border: 1px solid #aaa;
    border-left: 0;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    flex-grow: 1;
    padding: 1em 0.75em 0.75em;
  }

.bfd-info-container {
	box-shadow: 5px 5px 5px -2px #bbb;
}

.bfd-info-box {
	padding-top: 1.25em;
	padding-bottom: 1em;
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.bfd-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bfd-info-name-item {
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.bfd-name-input {
	margin: 0 0.8em;
}

span.property-italic {
	font-style: italic;
}

/* -- Position Page -- */
#position #stored-position-container fieldset
{
	margin-top: 0.5em;
}
#position #stored-position-container fieldset legend
{
	top: 0.7em;
}

/* -- Rudder Page -- */
#rudder .flex-heading {
	flex: 0 1 10em;
}
#rudder .redirect-button {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 8em;
}
#rudder #source-config-container > div {
	position: relative;
}

/* -- Serial Type Page -- */
#serial-type #serial-type-container {
	display: grid;
	grid-template-columns: repeat(var(--gridCols), minmax(33.3%, auto));;
	grid-row-gap: 0.5em;
	overflow-x: auto;
}
#serial-type #serial-type-container > h2 {
	border-bottom: 1px solid grey;
	display: flex;
	justify-content: center;
}
#serial-type #serial-type-container > div {
	display: flex;
}
#serial-type #serial-type-container input[type="radio"] {
	margin-left: 27%;
	margin-right: 5%;
}
#serial-type #mwv-select-row
{
	flex-basis: 50%;
	justify-content: space-between;
	margin-left: 2em;
	margin-top: 0;
}

/* -- IP Page -- */
#ip #ip-container .flex-row:nth-child(3),
#ip #ip-container .flex-row:nth-child(6),
#ip #ip-container .flex-row:nth-child(7) {
	margin-top: 1em;
}
#ip #ip-container .flex-row > div {
	margin-left: 1.75em;
}
#ip #ip-container a {
	flex-grow: 1;
	margin-left: auto;
	max-width: 8em;
}
#ip #ip-container input[type="radio"] {
	margin-right: 0.5em;
}
#ip #mac-container .flex-heading {
    flex: 0 0 10em;
}

/* Speed Page */
#speed-page #correction-value, #speed-page #correction-value-pulse {
	margin-right: 16px;
}
#speed-page input {
	max-width: 9em;
}
#speed-page .flex-heading {
	flex: 0 1 10em;
	align-self: auto;
}
#speed-page .redirect-button {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 8em;
}
#speed-page #sog-container {
	margin-top: 10px;
}

/* 
* -- Depth Select Page --
*/

#depth-page .redirect-button {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 8em;
}

#depth-page .input-unit {
	align-items: center;
	display: flex;
	position: relative;
}

/*
* -- Saved Configurations --
*/
#saved-configurations #external-restore fieldset, #saved-configurations #factory-reset fieldset {
	align-items: center;
	display: flex;
	padding-top: 1em;
}
#saved-configurations #factory-reset fieldset {
	justify-content: space-between;
}
#saved-configurations #factory-reset #factory-reset-button {
	flex-basis: 8em;
}
#saved-configurations #external-restore input {
	margin-left: 1em;
	flex-grow: 1;
}
#saved-configurations #missing-configuration h1 {
	text-align: center;
}
#saved-configurations .flex-heading
{
    margin-right: unset;
}

/*
* -- Source Select Pages --
*/
#speed-select .flex-row, #wind-select .flex-row, #depth-select .flex-row {
	justify-content: space-between;
}
.active-sensor {
	border-radius: 4px;
	border: 1px solid #ddd;
	background-color: white;
	flex: 0 60%;
	font-size: 1.5em;
	padding: 16px 16px 10px 16px;
	position: relative;
	margin: auto;

	-webkit-box-shadow: 5px 2px 5px -2px #bbb;
	-moz-box-shadow: 5px 2px 5px -2px #bbb;
	box-shadow: 5px 2px 5px -2px #bbb;
}
.active-sensor div {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.active-sensor div div:last-child {
	text-align: right;
}
.active-sensor .flex-heading {
	flex-basis: 200px;
}
.active-sensor legend {
	top: 0;

}
.active-arrow {
	height: 100%;
	width: 20%;
}
#speed-select .hysteresis-container, #depth-select .hysteresis-container, #wind-select .hysteresis-container {
	align-items: center;
	display: flex;
}
.loading-box {
	display: flex;
}
.loading-box div {
	font-size: 2em;
	font-weight: bold;
	margin: auto;
	opacity: 0.4;
	text-align: center;
}
.placeholder-box {
	display: flex;
}
.placeholder-box div {
	font-size: 2em;
	font-weight: bold;
	margin: auto;
	opacity: 0.4;
	text-align: center;
}
.radio-container {
	flex: 1 50%;
	margin-right: 0.5em;
	margin-top: 10px;
}
.radio-container:not(:first-child) {
	margin-left: 1em;
}
.radio-container > div {
	display: flex;
	justify-content: space-between;
}
.radio-container > div > div {
	padding: 0.5em 0;
	text-align: center;
}
.radio-container > div > div:not(:first-child) {
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
}
.radio-container > div > div:nth-child(2) {
	border-bottom-left-radius: 4px;
	border-left: 1px solid #666;
	border-top-left-radius: 4px;
	padding-left: 0.2em;
}
.radio-container > div > div:nth-child(3) {
	border-bottom-right-radius: 4px;
	border-right: 1px solid #666;
	border-top-right-radius: 4px;
	padding-right: 0.2em;
}
.radio-container div {
	flex: 1;
} 
.sensor-details {
	border-radius: 4px;
	border: 1px solid #ddd;
	background-color: white;
	flex: 1 50%;
	flex-direction: column;
	padding: 16px 16px 10px 16px;
	position: relative;
}
.sensor-details:first-child {
	margin-right: 0.5em;
}
.sensor-details:last-child {
	margin-left: 0.5em;
}
#switching-container {
	margin-top: 16px;
}
#switching-container select, #switching-container input {
	margin-left: 10px;
}
#switching-container .field-container {
	margin-right: 12px;
	margin-left: 16px;
}

/*
* -- Stored Log --
*/
#stored-log #stored-log-button, #trip-log-button {
	flex-basis: 8em;
}
#stored-log .trip-log-row, #stored-log .stored-log-row {
	flex-grow: 1;
	justify-content: flex-end;
	margin-top: 0;
}
#stored-log .input-unit {
	margin-right: 1em;
}

/* Trip logs */
#trip-log #trip-log-button {
	flex-basis: 9em;
}

#trip-log #trip-log-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5em;
}
#trip-log #trip-log-row > div {
	display: flex;
	flex: 1;
}
#trip-log #trip-log-row .flex-field {
	flex: 1;
}

/*
* -- Wind Derived Page --
*/
#windDerived td:first-child {
	margin-right: 16px;
}
#windDerived .flex-field{
	align-items: flex-end;
	flex: 0 1 100px;
}
#windDerived .flex-heading {
	flex: 0 1 7.8em;
}
#windDerived legend h1 {
	background-color: white;
	border-bottom: none;
	padding: 0 4px;
	position: absolute;
	top: -8px;
}
#wind-table {
	margin-top: 8px;
}
#wind-table td:first-child, #wind-table th:first-child {
	width: 6em;
}
#wind-table td:nth-child(2), #wind-table th:nth-child(2) {
	width: 90px;
	font-weight: normal;
}
#wind-table input {
	width: 100%;
}
#wind-table th:not(:first-child) {
	padding-left: 6px;
}
#windDerived #input-select {
	max-width: 400px;
	position: absolute;
	right: 5%;
	top: 0.5em;
}

/**
 * -- Wind Measured Page --
 */
.modal[name="modal-mast"] .button-box {
    margin: 0.2em 0 0;
    padding: 0;
}
#wind-measured .flex-half {
	align-self: stretch;
	flex-direction: column;
}
#wind-measured .flex-half > div {
	width: 100%;
}
#wind-measured #pulse-calibration, #wind-measured #calibration-factor {
	margin-right: 16px;
}
#wind-measured #modal-mast, #wind-measured #mast-motion-button {
	position: absolute;
	right: 5%;
}
[name="modal-mast"] .flex-half:not(:first-child) .flex-heading {
	flex-basis: 200px;
}
#calibration-factor-container, .mast-motion-row {
	display: none;
}
#motion-correction-container #mast-motion-redirect
{
	margin-left: 1em;
}
.measured-wind-grid {
	display: grid;
	grid-row-gap: 8px;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
}
.measured-wind-grid .flex-row {
	margin-top: 0px;
}
#wind-measured .redirect-button {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 8em;
}
#sensor-height {
	min-width: 3em !important;
	width: 3em;
}
#wind-measured .input-unit, [name="modal-mast"] .input-unit {
	align-items: center;
	display: flex;
	position: relative;
}

#bfd-configuration #no-bfd
{
    margin-top: 10px;
    padding: 1em .75em;
}

/* BFD Splash Screen */
#bfd-splash #image-preview {
	color: #6e6e6e;
	margin-top: 1em;
	margin-bottom: 1em;
	object-fit: scale-down;
	width: 100%;
	text-align: center;
}

/* Modal */

.modal {
	display: none;
	position: fixed;
	z-index: 800;
	padding-top: 100px;
	left: 0%;
	top: 0%;
	overflow: auto;
	width: 100%;
	height: 100%;
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0,0.4);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.modal .button-box {
	margin-top: 0;
	padding: 0 8px;
}
.modal select {
	max-width: 8em;
}
.modal-body {
	padding: 8px;
}
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	border: 1px solid #888;
	overflow: hidden;
	max-width: 800px;
	border-radius: 4px;
}
.modal-flex-item {
	padding: 0px 0px 10px 0px;
	flex: 1;
	text-align: center;
	display: flex;
	justify-content: center;
}
.modal-title {
	flex: 1 0 auto;
	color: white;
}
.modal-title h1 {
	margin-bottom: 8px;
	border-bottom: 1px solid white;
}
.modal-title-container {
	position: relative;
	display: flex;
	padding: 16px 16px 0;
	background-color: #6e6e6e;
}
.voltage-reference {
	flex: 5 0 auto;
	display: flex;
	flex-direction: column;
}
.temp-reference {
	flex: 5 0 auto;
	display: flex;
	flex-direction: column;
}
.reference-select {
	align-self: stretch;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
.reference-select fieldset {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.modal-close {
	color: white;
	position: absolute;
	right: 16px;
	top: 8px;
	font-size: 28px;
	font-weight: bold;
	margin-left: 10px;
}
.modal-close:hover,
.modal-close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

/* Media Queries */
@media (max-width: 1250px) {
	.content-wrapper {
		position: static;
	}
}
@media (max-width: 1300px) {
	.site-title a {
		background-size: contain;
	}
}

/* Data Output Page */
#udp .analogue-close {
	background-color: #fff;
	color: #ccc;
	cursor: pointer;
	font-size: 28px;
	font-weight: bold;
	height: 1em;
	position: absolute;
	right: 0.4em;
	top: 0.08em;
}
#udp .analogue-close:hover,
#udp .analogue-close:focus {
	color: black;
}
#udp .flex-heading {
	flex-basis: 200px;
}
#udp .flex-half:not(:first-child) {
	padding-left: 80px;
}
#udp input[type="text"] {
	width: 140px;
}
#udp #output-freq-row {
	justify-content: space-between;
	padding-top: 10px;
}
#udp select {
	width: 140px;
}
#udp .tooltip-wrapper {
	justify-content: space-between;
	width: 100%;
}
#udp .connectionName {
	width: 200px !important;
	font-weight: bold;
	border: 1px solid #aaa;
	padding-left: 0.5em;
}
#udp .connectionLegend {
	padding-right: 0px;
	padding-left: 0px;
}

/* Time Page */
#time input[type="text"] {
	width: 100px;
}
#time #time-input-container {
	flex-shrink: 1;
}
#time .can-invalid {
	background-color: #eaa !important;
}
#time #nmea-configuration-redirect, #time #canbus-configuration-redirect {
	margin-left: 2em;
}

/* External Channels */
#external .exp-content-header {
	padding-bottom: 1em;
}
#external input[type="text"] {
	max-width: 6em;
}
#external select {
	max-width: 10em;
}
