@charset "utf-8";
@charset "utf-8";
/* CSS Document */

/* Hyperlink colouring */
a:link    {text-decoration: none; color: blue;}
a:visited {text-decoration: none; color: blue;}
a:hover   {text-decoration: none; color: #ff00ff;}
a:active  {text-decoration: none; color: blue;}

/* Text highlighting */
.textHoverAqua:hover      {text-decoration: none; color: #00ffff;}
.textHoverFuchsia:hover   {text-decoration: none; color: #ff00ff;}
.textHoverLime:hover      {text-decoration: none; color: #00ff00;}
.textHoverOrange:hover    {text-decoration: none; color: #ff9900;}
.textHoverPaleBlue:hover  {text-decoration: none; color: #ccffff;}
.textHoverPaleGreen:hover {text-decoration: none; color: #ccffcc;}
.textHoverPalePink:hover  {text-decoration: none; color: #ffccff;}
.textHoverPink:hover      {text-decoration: none; color: #ff66ff;}
.textHoverRed:hover       {text-decoration: none; color: #ff0000;}
.textHoverSalmon:hover    {text-decoration: none; color: #ffcccc;}
.textHoverWhite:hover     {text-decoration: none; color: #ffffff;}
.textHoverYellow:hover    {text-decoration: none; color: #ffff00;}

img {  border-style: none;
}

#homelogo {
	float: left;
	position:relative;
	top: 9px;
	left: 560px;
}

#logoutlogo {
	float: left;
	position:relative;
	top: 14px;
	left: 570px;
}

#gpluslogo {
	float: left;
	position:relative;
	top: 14px;
	left: 550px;
}


#helplogo {
	float: left;
	position:relative;
	top: 14px;
	left: 530px;
}

#firecologo {
	float: left;
	position:relative;
	top:0px;
	left:0px
}

#dash
{
	float: left;
	position:relative;
	top:0px;
	left:100px;
	width: 100px;
}

div.extranetheader {
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
	color: #999999;
	alignment-adjust: middle;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 0px;
}

div.extranetwarning {
	font-family: verdana, geneva, sans-serif;
	font-size: 18px;
	color: #ff0000;
	alignment-adjust: left;
	padding-bottom: 20px;
	padding-top: 20px;
	padding-left: 0px;
}

 .thumbnail {
	width: 50px;
	height: 50px;
 }	
 
div.wrapper {
	background: transparent;
    margin: auto;
    width: 600px;
}

div.largeIcon {
	background: transparent;
	float: left;
	height: 100px;
	width: 100px;
	padding-top: 0px;
	padding-left: 20px;
	clear: both;
	background-color: #ffffff
}
div.largeIconNext {
	background: transparent;
	float: left;
	height: 100px;
	width: 100px;
	padding-top: 0px;
	padding-left: 90px;
	background-color: #ffffff
}

div.menuDescription {
	font-family: Verdana,Arial,Helvetica,Lucida Sans,Lucida Sans Unicode,Lucida Grande,sans-serif;
	font-size: 14px;
	color:#777777;
	float: left;
	height: 100px;
	width: 300px;
	padding-left: 40px;
	padding-top: 10px;
	background-color: #ffffff;
}

div.pageInfo {
	color: #000000;
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
}

div.iconImage {
	padding-top: 10px;
	height: 80px;
	width: 80px;
}

div.addItem {
	font-family: verdana, geneva, sans-serif;
	font-size: 15px;
	color: #000099;
	alignment-adjust: middle;
	padding-bottom: 10px;
	padding-top: 0px;
	padding-left: 0px;
}

label.legendLabel {
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
	color: #000099;
	alignment-adjust: middle;
}

#filesgrid {
	font-family: verdana, geneva, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

#filesgrid caption {
    background-color: #000090;
    color: #ffff00;
    font-size: 1em;
	font-weight: bold;
	padding: 0.25em;
}

#filesgrid td, #filesgrid th {
    font-size: 0.8em;
    border: 1px solid #4285f4;
    padding: 4px 10px 4px 10px;
}

#filesgrid th {
    font-size: 0.8em;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #4285f4;
    color: #ffffff;
}

#filesgrid th a:link {color: #ffffff;}
#filesgrid th a:visited {color: #ffffff;}

#filesgrid tr.alt td {
    color: #000000;
    background-color: #CCE6FF;
}
#noteselector {
	font-family: verdana, geneva, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

#noteselector caption {
    background-color: #000090;
    color: #ffff00;
    font-size: 1em;
	font-weight: bold;
	padding: 0.25em;
}

#noteselector td, #noteselector th {
    font-size: 0.8em;
    border: 1px solid #4285f4;
    padding: 4px 10px 4px 10px;
}

#noteselector th {
    font-size: 0.8em;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #4285f4;
    color: #ffffff;
}

#noteselector th a:link {color: #ffffff;}
#noteselector th a:visited {color: #ffffff;}

#noteselector tr.alt td {
    color: #000000;
    background-color: #CCE6FF;
}

/* Login fields */
.loginLabel {
    color: #444444;
	display: block;
	font-family: verdana, geneva, sans-serif;
	font-size: 18px;
}
.loginInputText {
	background-color: #f9f9f9;
	border: 1px solid #999999;
	border-radius: 1px;
	font-family: verdana, geneva, sans-serif;
	font-size: 16px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px 5px;
}

/* General purpose 'Add' button */
.addButton {
	background-color: #f9f9f9;
	border: 1px solid #333333;
	border-radius: 5px;
    color: #444444;
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	height: 34px;
}

/* General purpose 'Submit' button */
.submitButton {
	background-color: #f9f9f9;
	border: 1px solid #333333;
	border-radius: 5px;
    color: #444444;
	font-family: verdana, geneva, sans-serif;
	font-size: 16px;
	height: 34px;

}
.submitButton:disabled,
.submitButton[disabled] {
    background-color: #cccccc;
}

/* Borderless table style */
.borderlessTable {
	border-collapse: collapse;
	font-family: verdana, geneva, sans-serif;
	font-size: 1em;
	width: 100%;
}

.borderlessTable td, .borderlessTable th {
    padding: 15px 15px;
}
/* END OF: Borderless table style */


/* Report table style */
.reportTable {
	border-collapse: collapse;
	font-family: verdana, geneva, sans-serif;
	font-size: 1em;
	width: 100%;
}

.reportTable caption {
    background-color: #000099;
    color: #ffff00;
    font-size: 1em;
	font-weight: bold;
	padding: 0.25em;
}

.reportTable td, .reportTable th {
    border: 1px solid #000099;
    padding: 5px 10px 5px 10px;
}

.reportTable td {
    font-size: 0.8em;
}

.reportTable thead th, tbody th {
    background-color: #cce6ff;
    color: black;
    font-size: 0.8em;
}

.reportTable tfoot th, .reportTable tfoot tr {
    background-color: #cce6ff;
    color: #6600cc;
    font-size: 0.8em;
	font-weight: normal;
}

.selectionCombo {
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
}

.infoItem {
	font-family: verdana, geneva, sans-serif;
	font-size: 1em;
}

.footNote {
	color: #004400;
	font-family: verdana, geneva, sans-serif;
	font-size: 0.8em;
}
/* END OF: Report table styling */


/* Filter group panel */
.filterGroupPanel {
	background: #ddeeff;
    border: 1px solid #4285f4;
	border-radius: 5px;
	color: #000099;
	font-family: verdana; 
	font-size: 14px;
    padding: 9px 6px 9px 6px;
	width: 1200px;
}

.filterCheckBox {
	border: 0;
	border-radius: 0.4em;
	padding: 0.2em 0.2em;
	transform: scale(1.4);
}

.filterCombo {
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
}

.filterTextBox {
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
}

.filterButton {
	background: transparent;
	background-color: #e6e6ff;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
    color: #000099;
	width: 80px;
	height: 25px;
	border-radius: 5px;
	border-color: #000099;
	border-style: solid;
	border-width: thin;
}


/* Popup dialog styling */
.ui-widget-content.ui-dialog {
   border: 0.2em solid #ffffff;
}
.ui-dialog-titlebar {
	background: #ff9900 !important;
}
.ui-dialog, .ui-dialog-content, .ui-dialog-buttonpane {
	background: #000090;
	font-family: verdana, geneva, sans-serif;
	padding: 0.5em;
}

.popupDialog {
	color: #00ffff;
	background: #000099 !important;
	font-family: calibra, geneva, sans-serif;
	font-size: 14px;
}

.dialogFieldLabel, .dialogFieldValue {
	font-family: verdana, geneva, sans-serif;
	font-size: 16px;
}

.dialogFieldLabel {
	clear: both;
	color: #ffff00;
	float: left;
	margin: 5px;
	padding-top: 10px;
	width: 25%;
}

.dialogFieldValue {
	float: left;
	left: 5px;
	margin: 5px;
	width: 70%;
}

.dialogInputCheckbox {
	border: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	transform: scale(1.4);
}

.dialogInputText {
	border: 0;
	border-radius: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px 5px;
}

.dialogSubmitButton {
	clear: both;
	position: relative;
	left: 10px;
	top: 20px;
	background: transparent;
	background-color: #e6e6ff;
	border-color: #000099;
	border-radius: 5px;
	border-style: solid;
	border-width: thin;
    color: #000099;
	font-family: verdana, geneva, sans-serif;
	font-weight: bold;
	height: 30px;
	margin-bottom: 30px;
	padding: 0px 20px 0px 20px;
  }
.dialogSubmitButton:disabled,
.dialogSubmitButton[disabled] {
    background-color: #999999;
}

/* END OF: Popup dialog styling */


/* Rectangular Radio Buttons */
.rectangularRadioButtons {
     list-style-type: none;
     margin: 0 0 0 0;
     padding: 0;
}

.rectangularRadioButtons li {
	color: #000099;
    float: left;
    margin: 0 25px 0 0;
    width: 150px;
    height: 26px;
    position: relative;
	text-align: center;
}

.rectangularRadioButtons label, .rectangularRadioButtons input {
	background-color: #e6e6ff;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	border-radius: 20px;
	border-color: #000099;
	border-style: solid;
	border-width: thin;
}

.rectangularRadioButtons input[type="radio"] {
    opacity: 0.0;
    z-index: 100;
}

.rectangularRadioButtons input[type="radio"]:checked + label, .Checked + label {
    background: yellow;
}

.rectangularRadioButtons label {
     padding: 5px;
}
/* END OF: Rectangular Radio Buttons */


/* =========================================================================
 * Signed-in address and logout, in extranet_header.html.j2
 *
 * The InSite pages get these from insite.css. This header is included by 46
 * pages that load extranet.css and seriallink.css and never see insite.css,
 * so the same two class names are defined again here. Same names on purpose:
 * the shared macro in templates/_partials/logout.html.j2 emits one piece of
 * markup and does not know which header it landed in.
 *
 * The font declarations are not new styling. They were an inline
 * `font-family: verdana, geneva, sans-serif; font-size: 12px` on the div that
 * used to hold the address; moving them here is what let the address and the
 * button share a rule.
 *
 * The address itself was `color: white` on a transparent wrapper over a white
 * page -- invisible since it was written. It is --slate's #4d5561 here, the
 * value insite.css uses for the same text, which measures 7.5:1 on white.
 * ========================================================================= */
.insite__account--legacy {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;
}

.insite__account--legacy .insite__user {
	color: #4d5561;
	overflow-wrap: anywhere;
}

.insite__account--legacy .logout {
	margin: 0;
}

/* A real submit, not a link: /extranetlogoff refuses GET so that nothing
   which merely follows links can end a session. Stripped back to text
   because logging out is not the page's primary action. min-height clears
   the 24px WCAG 2.5.8 target floor. */
.insite__account--legacy .logout__button {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	min-height: 24px;
	font: inherit;
	color: #14459c;
	text-decoration: underline;
	cursor: pointer;
}

.insite__account--legacy .logout__button:hover {
	color: #101010;
}

.insite__account--legacy .logout__button:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}


/* ===========================================================================
 * Busy indicator -- the CLASSIC ProHub view (/prohubnodes)
 * ===========================================================================
 * A near-copy of the "Busy indicator" block in insite.css, and deliberately a
 * copy rather than a shared rule. Those are scoped `.insite .busy`, and the
 * classic view restored on 2026-09-09 includes extranet_header.html.j2, so it
 * gets extranet.css and no .insite ancestor. Widening the insite.css selectors
 * to reach here would put the rebuilt pages' design system on a legacy page
 * and couple the two views' styling -- the one thing keeping both affordable.
 *
 * The MARKUP and the BEHAVIOUR are genuinely shared: both views emit
 * _partials/busy.html.j2, which is vanilla and drives everything through the
 * isBusy class. Only the paint is duplicated.
 *
 * EVERYTHING HERE IS SCOPED UNDER .wrapper, and must stay that way.
 * prohub_devices.html.j2 loads BOTH stylesheets -- extranet.css for the jQuery
 * dialogs -- and emits an overlay with this very id. It has no .wrapper (it is
 * built on .insite), so this scope is what keeps these rules off it. Unscoped,
 * `.busy` here would land on the rebuilt page's spinner alongside
 * `.insite .busy` and the two would have to be kept in step forever.
 *
 * Colours are literals, not var(--navy)/var(--paper): those custom properties
 * are declared in insite.css, which this page does not load.
 * =========================================================================== */
.wrapper .busy {
	display: none;
	position: fixed;
	top: 14px;
	right: 18px;
	z-index: 2000;
	align-items: center;
	gap: 9px;
	background-color: #001e46;
	border-radius: 20px;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 7px 15px 7px 11px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.wrapper .busy.isBusy {
	display: flex;
}

.wrapper .busy__spin {
	animation: firecoBusySpin 0.8s linear infinite;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	height: 15px;
	width: 15px;
}

/* A @keyframes name is GLOBAL whatever declares it, so this one CANNOT be
   scoped the way the rules above are. Same name and same body as the one in
   insite.css on purpose: the rebuilt device page loads both stylesheets, and a
   duplicate identical declaration is harmless where two different ones sharing
   a name would silently make one page's spinner spin to the other's timing. */
@keyframes firecoBusySpin {
	to { transform: rotate(360deg); }
}

/* The lock, applied by the partial to whatever selector the page passes it.
   Opacity and pointer-events, NEVER `disabled` -- a disabled control is not
   submitted, and these are the buttons that fire the callin commands. */
.wrapper .submitButton.isBusy,
.wrapper [id^="device_door_release_"].isBusy {
	opacity: 0.5;
	pointer-events: none;
}


/* ===========================================================================
 * The link across to the rebuilt device view
 * ===========================================================================
 * Sits above #pagecontent so the five-second repaint cannot take it away.
 * Understated on purpose: this page is the default because the field
 * engineers asked for it back, and the toggle is an offer, not a nudge.
 *
 * Scoped under .wrapper for the same reason as the block above -- the rebuilt
 * page carries a .viewSwap of its own, styled in insite.css, and the two are
 * different shapes: a bare link here, a .ctrl button there.
 * =========================================================================== */
.wrapper .viewSwap {
	margin: 0 0 10px 0;
	font-size: 13px;
}

.wrapper .viewSwap a {
	color: #1a73e8;
	text-decoration: none;
}

.wrapper .viewSwap a:hover,
.wrapper .viewSwap a:focus-visible {
	text-decoration: underline;
}


/* ===========================================================================
 * Top-of-page spacing -- the CLASSIC ProHub view (/prohubnodes)
 * ===========================================================================
 * The page opened with roughly 110px of empty space stacked above and below
 * the CONNECTED badge. It came from four places, none of them a margin anyone
 * had chosen for this page:
 *
 *   1. div.extranetheader pads 10px top and bottom, and the <h1> inside it
 *      carries the browser default 0.67em margin -- about 19px each side.
 *   2. .borderlessTable pads EVERY cell 15px top and bottom.
 *   3. The lockdown graphic beside the badge was 312x223 with most of that
 *      empty, drawn at height="130px". Centring the 40px CONNECTED badge
 *      against it left 61px above and 63px below, inside the row alone.
 *      Fixed at source on 2026-09-09: Dave cropped the four lockdown PNGs
 *      and dropped the draw height to 100px, so the row is now about the
 *      height of its content and the cells stay middle-aligned. See the
 *      vertical-align note below.
 *   4. Five `position: relative; top: -Npx` nudges in the template, each one
 *      clawing part of (2) back. They were removed with this change; leaving
 *      them made the Refresh button overlap the row above.
 *
 * SCOPED TO .unitPage, AND IT MUST STAY THAT WAY. Both .extranetheader and
 * .borderlessTable are shared with the unconverted extranet -- roughly fifty
 * pages whose layouts are built on exactly these paddings. This trims one
 * page, by name.
 *
 * (3) was the one that mattered most and the one a padding change alone
 * could not have touched. It was briefly fixed here with vertical-align: top,
 * which moved the empty space below the badge rather than removing it -- the
 * row is as tall as the lockdown graphic either way, because that is content.
 * Cropping the graphic removed the space instead of relocating it, so the
 * alignment went back to middle.
 * =========================================================================== */
.wrapper.unitPage .extranetheader {
	padding-top: 0;
	padding-bottom: 0;
}

.wrapper.unitPage .extranetheader h1 {
	margin-top: 0;
	margin-bottom: 10px;
}

/* TWO tables, because the lockdown controls are a nested .borderlessTable
   inside one of the header cells and it was picking up the same 15px. With
   the outer cells alone trimmed the row still measured 134px against a 100px
   graphic -- 30px of it the nested table's own padding, which is not spacing
   anybody chose either.

   The nested table is named by class, NOT reached with a descendant selector
   from the cells above. The other thing that can sit in one of these cells is
   the ProHub Survey Kit's .reportTable, and its 5px is real: that one is a
   bordered data table with a caption and a header row, where the padding is
   what keeps the readings legible. This is a layout table holding a picture
   beside a button.

   Horizontal padding is untouched on both. It is what separates the lockdown
   graphic from its button, and the button carries an inline `left: -20px`
   that was placed against it.

   vertical-align is `middle` and is stated rather than left to the default,
   because it was `top` here for part of 2026-09-09 and the reason it is not
   any more is worth keeping: with the lockdown graphic cropped, the row is
   close to the height of its tallest content, and middle is what lines the
   CONNECTED badge, the timestamps, the graphic, the lockdown button and the
   door-timer icon up along one axis. Top alignment only pays when something
   in the row is much taller than everything else. */
.wrapper.unitPage table.unitHeaderTable > tbody > tr > td,
.wrapper.unitPage table.unitHeaderTable table.borderlessTable > tbody > tr > td {
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: middle;
}

/* Middle on the CELLS lines the cells up with each other; it says nothing
   about what happens INSIDE one. The first cell holds the 40px CONNECTED
   badge and the two-line timestamp block side by side, both inline-level, so
   they sat on a shared baseline -- which put the text 5px below the badge's
   centre.
 *
 * The template used to carry `position: relative; top: -6px` on that span to
 * pull it back. This does the same job by declaring the relationship instead
 * of measuring it, so it survives a font or line-height change that would
 * leave a hard-coded -6px slightly wrong and no longer obviously so. */
.wrapper.unitPage table.unitHeaderTable > tbody > tr > td > img,
.wrapper.unitPage table.unitHeaderTable span.pageInfo {
	vertical-align: middle;
}