/* ASP Replace: /<[%]=(\w+)[%]>/g With: var(--$1) */
:root {
  --special_color: rgb(12, 146, 121);
  --light_color: rgba(12, 146, 121, 0.1);
  --text_color: #3F3F3E;
  --base_color: #FFFFFF;
  --shade_color: rgba(0, 0, 0, 0.1);
  --border_color: #8F8F8F;
  --error_color: rgb(204, 51, 0);
  --font_family: Montserrat, ArialNarrow, Arial, sans-serif;
  --font_size: 10pt;
}

html, body {margin:0; padding:0; height:100%;}

body {font-family:Montserrat, ArialNarrow, Arial, sans-serif; font-size:10pt; color:#3F3F3E;}
table {border-collapse:collapse; border:none;}
img {border:none;}
h1 {font-size:1.35em; font-weight:normal; margin:10px 0 5px 0; color:rgb(12, 146, 121); text-transform:uppercase;}
h2 {font-size:1.2em; font-weight:normal; margin:10px 0 3px 0; color:rgb(12, 146, 121);}
h3 {font-size:1.1em; font-weight:normal; margin:10px 0 3px 0; color:rgb(12, 146, 121);}
a {color:rgb(12, 146, 121); text-decoration:none;}
form {margin:0;}
label {display:block; font-weight:bold; white-space: nowrap; min-width:12em; padding:0 1em 0 0;}
button, input, select, select option, textarea {font-family:Montserrat, ArialNarrow, Arial, sans-serif; border:thin solid rgb(12, 146, 121); padding:0.25em; border-radius:0.25em;}
button:has(i), input.image { background-color: transparent; border: none; }

.highlight {color:#FFFFFF;background-color:rgb(12, 146, 121);}
.warn {color:rgb(204, 51, 0); font-weight:bold;}
.hidden, .hidden0, .hidden_1 {display:none;}
.show {display:block;}
.wide table {width:99%;}
.wide textarea {width:99%; resize:none;}
.number {text-align:right;}
.connected {color: rgb(12, 146, 121);}

.heading {position:fixed; top:0; left:0; right:0; background-color:#FFFFFF; z-index:10;}
.body {padding:6em 0 3em; display:flex; height:-webkit-fill-available;}
main {flex-grow:1; padding:0.25em; xoverflow:auto;}
article {width:100%;}

aside {flex-grow:auto; font-size:smaller; padding:0.25em;}
aside:empty {display:none;}
aside.collapsed {display: none !important;}
aside {min-width:20em; background-color: rgba(12, 146, 121, 0.1);}

.header {color:#FFFFFF;}
.header table {width:100%;}
.xheader table td {padding:0.75em;}
.header input {border:none;}
.header a {color:#FFFFFF; text-decoration:underline;}

.band {background-color:rgb(12, 146, 121); border-top:1px solid #8F8F8F; border-bottom:1px solid #8F8F8F;}

.center {margin:0 5em;}

.logon {position:absolute; z-index:20; top:14px; right:22px; width:200px; font-size:smaller; text-transform:lowercase; color:#FFFFFF !important;}
.logon td {vertical-align:top; text-align:right;}
.logon a {color:#FFFFFF !important; text-transform:lowercase;}
.logon a:hover {border-bottom:1px solid rgb(12, 146, 121);}

.search input[type="text"] {margin:0; padding:3px 20px 3px 3px; width:10em; color:#FFFFFF; }
.search input[type="text"]:hover, .search input[type="text"]:focus {color:#272727;}

.fa, .fas, .far {font-size: larger; cursor:pointer;}

.legend {max-width:20em; padding:5px;}
.legend ul {list-style-type:none; margin:0; padding:0;}
.legend li {margin:0; padding:0;}
.legend dt {font-weight:bold;}
.legend dd {margin:0 0 0 1em;}

.submenu {margin-top:1em;}
.submenu table {border-collapse:collapse; min-width:13em;}
.submenu td {color:rgb(12, 146, 121);}
.submenu label, .submenu .eSiteCaption {font-weight:bold; text-transform:uppercase; color:#272727; text-align:left;}
.submenu input {background-color:transparent; color:rgb(12, 146, 121); border:none; font-size:1em; padding:0; cursor:pointer;}

.form {margin-top:454px;}
.form .eSiteCaption {position:relative; width:1280px; height:45px; left:-200px; border:none; border-top:1px solid rgb(12, 146, 121); color:#FFFFFF; margin-bottom:10px; line-height:2.5em;}
.form .eSiteCaption img {position:absolute; left:170px;}
.form .eSiteBody {text-align:justify;}

#eSitePopup { position: fixed; background-color: rgba(0,0,0,0.25); top: 0; left: 0; bottom: 0; right: 0; z-index: 10; }
#eSitePopup>article>div {position:fixed; z-index:10; top:3em; left:50%; transform:translateX(-50%); padding:0 1em 1em; border:thin solid #8F8F8F; background-color:#FFFFFF; box-shadow:1px 1px 1px 1px #3F3F3E;min-width:40em; line-height:1.75em;}
#eSitePopup table {width:100%;}
#eSitePopup h1 {margin-bottom: 0.5em; border-bottom: thin solid rgb(12, 146, 121);}
#eSitePopup h1:after {content:"\f410"; position:absolute; right:1ex; font-weight:900; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free"; font-size:larger; cursor: pointer;}
#eSitePopup input, #eSitePopup textarea {width: -webkit-fill-available; width: -moz-available; resize: none;}
#eSitePopup input[type="submit"], #eSitePopup input[type="checkbox"], #eSitePopup input[type="radio"] {width: inherit;}
#eSitePopup .eSiteTable th { top: 0 !important; }

#eSitePopupList {position:absolute; z-index: 1; max-height:15em; overflow-y:scroll; border:thin solid rgb(12, 146, 121); background-color:white; cursor:pointer; font-size:smaller; line-height:1.25em; color:rgb(12, 146, 121); font-weight:normal;}

.eSiteStatus {position:fixed; z-index:5; padding:1em 2em; left:0; bottom:0; right:0; background-color:#292929; color:#FFFFFF; margin:0;}
.eSiteStatus table {width:100%;}
.eSiteStatus a {color:#FFFFFF;}
.eSiteStatus a:hover {color:rgb(12, 146, 121);}

.eSiteErr {position:fixed; z-index:10; padding:1em 2em; left:0; bottom:0; right:0; background-color:rgb(204, 51, 0);color:#FFFFFF; margin:0;}
.eSiteNoData {color:rgb(204, 51, 0); font-size:smaller; padding:1em 0;}
.eSiteHeader, .eSiteFooter {font-size:smaller; padding:1em 0;}

.eSiteMenuBar {color:#3F3F3E !important; cursor:default; }
.eSiteMenuBar table {width:auto !important;}
.eSiteMenuBar td {vertical-align:middle; border:none; padding:0.5em !important;}
.eSiteMenuBar td.eSiteMarginLeft, .eSiteMenuBar td.eSiteMarginRight {padding:0; border:none;}
.eSiteMenuBar td a {color:#3F3F3E !important; text-decoration:none;}
.eSiteMenuBar header {float:left; padding-left: 0.5em;}
.eSiteMenuBar .eSiteBody {float:left;}
.eSiteMenuBar footer {float:right; padding: 0 0.5em;}

.eSiteMenu {position:absolute; z-index:10; display:none; padding:0.5em 0; border:1px solid #8F8F8F; background-color:#FFFFFF; box-shadow:1px 1px 1px 1px #3F3F3E;}
.eSiteMenu table {min-width:13em; width:auto !important;}
.eSiteMenu td {line-height:2.5em; padding:0 1em !important;}
.eSiteMenu td:hover {background-color:rgb(12, 146, 121);}
.eSiteMenu td:hover a {color:#FFFFFF !important;}

.eSitePathLinks * {display:inline-block;}
.eSitePathLinks .eSiteHeader {padding:0 1em 0 0; font-size:small;}
.eSitePathLinks {font-size:smaller; text-transform:lowercase; color:#FFFFFF !important;}
.eSitePathLinks a {color:#FFFFFF !important; text-transform:lowercase;}
.eSitePathLinks a:hover {border-bottom:1px solid rgb(12, 146, 121);}

.eSiteLinkSeparator {height:0 !important; border-top:1px solid #8F8F8F !important;}

.eSiteTab {padding:5px 0 5px 0;}
.eSiteTab table, .eSiteTab xtbody {width:100%;}
.eSiteTab td {padding:3px 10px 3px 10px; font-size:smaller;}
.eSiteTab td.eSiteMarginLeft {padding:3px; border-bottom:1px solid #8F8F8F;}
.eSiteTab td.eSiteMarginRight {padding:3px; border-bottom:1px solid #8F8F8F; width:100%;}
.eSiteTab td.eSiteDeselected {border:1px solid #8F8F8F; cursor:pointer;}
.eSiteTab td.eSiteSelected {border:1px solid #8F8F8F; border-top:2px solid rgb(12, 146, 121); border-bottom:none; cursor:pointer; padding-top:4px;}

.eSiteList ul {list-style-type:none; padding:0;}

.border {border:thin solid #8F8F8F;}
.eSiteTable table {width:100%;}
.eSiteTable th {padding:0.5em; position: sticky; top: 5.5em; background-color:#FFFFFF; border-bottom: thin solid #8F8F8F;}
.eSiteTable td {padding:0.3em; vertical-align:middle;}
.eSiteTable .eSiteTableNewRow td, .eSiteTableBreakRow td {background-color:rgb(12, 146, 121); color:#FFFFFF;}
.eSiteTable:not(.subrow) tbody tr:nth-child(odd) {background-color:rgba(0, 0, 0, 0.1);}
.eSiteTable.subrow tbody tr:nth-child(4n+3), .eSiteTable.subrow tbody tr:nth-child(4n+4) {background-color:rgba(0, 0, 0, 0.1);}
.eSiteTable>div>div tbody tr:not(.eSiteTableBreakRow):hover {background-color:rgba(12, 146, 121, 0.1) !important;}

.eSiteForm td {vertical-align:middle; line-height:1.5em;}

.verticalLine td {border-right:thin solid #8F8F8F;}
.verticalLine td:last-child {border-right:none;}

.eSiteIndexedLinks th {padding:1rem 0.7rem;font-size:1.5rem;}
.eSiteIndexedLinks td {padding:1rem 0.7rem;}

.eSiteMultiSelection {display: inline-block; list-style-type:none; padding:0; margin:0;}
.eSiteMultiSelection li {display: flex;}
.eSiteMultiSelection label {font-weight:normal; min-width:inherit;}

.discuss {min-width:13em; padding:0.5em; background-color:rgba(0, 0, 0, 0.1); border-radius:0.25em; margin-bottom:0.25em;}
.timestamp > span {font-size:smaller; padding:0 1em; white-space:nowrap;}
.timestamp:before {content:"\f017"; padding-right:0.5em; font-weight:400; font-family:"Font Awesome 6 Pro", "Font Awesome 5 Free";}
.info > span {padding:0 1em; white-space:nowrap; cursor:help;}
.info:before {content:"\f05a"; padding-right:0.5em; font-weight:400; font-family:"Font Awesome 6 Pro", "Font Awesome 5 Free";}

.eSiteCalendar table {width:100%; border-collapse:collapse;}
.eSiteCalendar table caption {color:#3F3F3E; text-align:left; text-transform:capitalize; font-size:1.25em;}
.eSiteCalendar th {text-align:center; vertical-align:middle; color:#3F3F3E; text-transform:capitalize; font-weight:normal;}
.eSiteCalendar td {position:relative;height:4em;padding:0.25em;}
.eSiteCalendar td.eSiteIn {vertical-align:top;border:1px solid rgb(12, 146, 121);}
.eSiteCalendar td.eSiteWeekend {border:1px solid rgb(12, 146, 121); vertical-align:top; background-color:rgba(12, 146, 121, 0.1); color:#3F3F3E;}
.eSiteCalendar td.eSiteOut {border:1px solid rgb(12, 146, 121); background-color:rgba(0, 0, 0, 0.1); color:#3F3F3E; vertical-align:top;}
.eSiteCalendar td.eSiteNow {border:1px solid rgb(12, 146, 121); vertical-align:top;}
.eSiteCalendar .eSiteCalendarDay {position:absolute; right:0.2em;font-size:1.2em; padding:0 0.2em;}
.eSiteCalendar .eSiteIn .eSiteCalendarDay {font-weight:bold;}
.eSiteCalendar .eSiteNow .eSiteCalendarDay {border-radius:0.5em; background-color:rgb(12, 146, 121); color:#FFFFFF;}

.eSiteScroll ul {list-style-type:none; padding:0; text-align:right;}
.eSiteScroll li {display:inline-block; padding:0.25em;}
.eSiteIndexedLinks ul {list-style-type:none; padding:0;}
.eSiteIndexedLinks li {display:inline-block; padding:0.25em;}
.eSiteSelected {font-weight:bold;}

.eSiteScroll .fa {color:#000;}

.bacheca {background-color:rgba(0, 0, 0, 0.1); border:1px solid rgb(12, 146, 121); padding:0 0.5em;}
.bacheca .eSiteCaption {background-color:rgb(12, 146, 121); color:#FFFFFF; padding:0 0.5em;}

.special_color {color:rgb(12, 146, 121);}
.special_box {background-color:rgb(12, 146, 121); color: #FFFFFF;}

td.DataLabel {width:12em; font-weight:bold; white-space:nowrap; vertical-align:middle;}
td.DataValue {vertical-align:top;}

@media screen and (max-width:700px) {
  .eSitePathLinks .eSiteBody {display:none;}
  .menu td {display:table-row;}
  body {min-width:240px; font-size:10pt;}
}
@media print {
  .header, a, input[type=submit] {display:none;}
  .body {padding-top:0;}
}

.popupList {position:absolute; z-index:10; border:thin solid rgb(12, 146, 121); background-color:white; cursor:pointer; font-size:smaller; color:rgb(12, 146, 121); font-weight:normal;}

.defcon0 {color:rgb(127, 127, 127);}
.defcon1 {color:rgb(204, 51, 0);}
.defcon2 {color:rgb(255, 153, 102);}
.defcon3 {color:rgb(0, 255, 255);}
.defcon5 {color:rgb(153, 204, 51);}
.defcon4 {color:rgb(0, 51, 153);}
.defcon6 {color:rgb(178, 0, 255);}
.defcon7 {color:rgb(0, 0, 0);}
.defcon {color:transparent};
.fas.fa-sticky-note {color:/*#EA86C2*/#000000; cursor:pointer;}
.far.fa-square {-webkit-text-stroke: medium;}

.Defcon0 {background-color:rgb(127, 127, 127); color:rgb(255, 255, 255);}
.Defcon1 {background-color:rgb(204, 51, 0); color:rgb(255, 255, 255);}
.Defcon2 {background-color:rgb(255, 153, 102); color:rgb(255, 255, 255);}
.Defcon3 {background-color:rgb(0, 255, 255); color:rgb(255, 255, 255);}
.Defcon5 {background-color:rgb(153, 204, 51); color:rgb(255, 255, 255);}
.Defcon4 {background-color:rgb(0, 51, 153); color:rgb(255, 255, 255);}
.Defcon6 {background-color:rgb(178, 0, 255); color:rgb(255, 255, 255);}
.Defcon7 {background-color:rgb(0, 0, 0); color:rgb(255, 255, 255);}
.Defcon {background-color:transparent; color:transparent;}
.Postit {padding:0.5em;}
.Postit:empty {display: none;}
.Postit textarea {width:99%; background-color:transparent; resize:none;}

progress {width:2rem;}

input:invalid {color: red; border:thin solid red};
input {margin-right:0.5em; border:thin solid rgb(12, 146, 121); border-radius:0.25em; padding:0.25em;}
input[name^="*a128-"] {float:right;}
.changed:before {content:"\f101 "; font-family:"Font Awesome 6 Pro", "Font Awesome 5 Free"; font-weight:900; padding-right:0.5em; color:rgb(12, 146, 121);}
.ellipsis {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.brands span {display:inline-block;padding:0.25rem 0.5rem; border:thin solid #3F3F3E; border-radius:0.25rem; margin:0.25rem;}
.stateBar {text-align:center;}

[alt="Verbose"] {position:relative;z-index:1001; padding:0.25em; left:0; top:0;}
.eSiteVerbose {position:relative;z-index:1000;background-color:#FFFF99;border:thin solid #000;padding:1em;font-family:monospace;color:#000;left:0;top:0;}
.eSiteVerbose a {color:#000;}

.link {
  background: none!important;
  border: none;
  padding: 0!important;
  color: rgb(12, 146, 121);
  text-decoration: none;
  cursor: pointer;
}

.quotations {
  margin-bottom: 5px;
  background-color:rgba(12, 146, 121, 0.4);
}
.quotations th {
  position: initial;
  background-color:rgb(158, 211, 201);
  background-color: initial;
}

.memo {position:fixed; right:0; top:155px; bottom:0; border-left:thin solid; background-color: #FFFF99; padding:1em; width: 25em;}
.Memo {display:grid; grid-template-rows: 1fr 5em 2em 0; position:absolute; top: 50px; left:1em; bottom:1em; right:1em;}
.Memo ul {list-style-type: none; margin: 0; padding: 0; overflow-y: auto;}
.Memo li {padding: 0.5em 0; overflow-y: auto;}
.Memo li>span {display:block; font-size: smaller; color:gray;}
.Memo li.writer {text-align: right;}
.Memo li>span::before {content: "\f017"; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free"; padding-right:0.5em;}
.Memo input, .Memo textarea {width:25em !important; margin:0.25em 0 0 0 !important; padding: 0;}

td[style*="text-align:right"] {font-family: monospace;}
