/* DEFAULTS
----------------------------------------------------------*/

body {
    background: #ffffff;
    font-size: 10pt;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #01435b;
}

a:link,
a:visited {
    color: #0a728f;
    cursor: pointer;
}

a:hover {
    color: #f49600;
    text-decoration: none;
    cursor: pointer;
}

a:active {
    color: #f49600;
    cursor: pointer;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1.5em;
    color: #f49600;
    text-transform: uppercase;
    margin-bottom: 0px;
    font-weight: normal;
}

h1 {
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5,
h6 {
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn>h1,
.rightColumn>h2,
.leftColumn>h1,
.leftColumn>h2 {
    margin-top: 0px;
}

hr {
    border: none;
    border-bottom: solid 1px silver;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

div.page {
    width: 1200px;
    margin: 0px auto 0px auto;
}

/* Grid tier fallback. div.page wraps both the header and the content shell, and the
   header's copy is a flex container, so it cannot inherit its width from .container_12
   - it has to be sized independently. This breakpoint is hand-synced with the media
   attributes on the 960.css / 1200.css links in assets/template/Site.Master,
   Default.aspx, Registration.aspx and DataSources.htm. Change all of them together,
   or the page shell will sit 1200px wide above a 960px content column. */
@media (max-width: 1239.98px) {
    div.page {
        width: 960px;
    }
}

div.header {
    float: left;
    margin: 0px;
    background-color: #01435b;
    padding: 0px;
    width: 100%;
    min-height: 170px;
    border-bottom: solid 1px #fff;
    background-image: url('/assets/images/Cog.jpg');
    background-position: bottom right;
    background-repeat: no-repeat;
}

div.header .page {
    display: flex;
    flex-wrap: wrap;
    min-height: 170px;
}

div.header h1 {
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

div.Content {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #d3d6da;
    padding: 10px;
    min-height: 800px;
}

div.main {
    float: left;
    min-height: 420px;
}

div.leftCol {
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

div.footer {
    float: left;
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.menu {
    /*float: left;*/
    /*padding: 35px 0px 4px 8px;*/
    /*    height: 28px;
    height: 40px;*/
    clear: both;
    margin-top: auto;
    width: 100%;
}

div.menu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}

div.menu ul li {
    /*float: left !important;*/
    margin: 0px;
    /*margin-right: 4px;*/
    display: flex;
}

div.menu ul li a,
div.menu ul li a:visited {
    background-color: #01526d;
    color: #ffffff;
    /*width: 95px;*/
    padding: 12px 16px;
    line-height: 1.35em;
    text-decoration: none;
    cursor: pointer;
    margin-right: 4px;
}

div.menu ul li a:hover {
    background-color: #f49600;
}

/* Failed-DWT indicator on the DWT nav item (added by Main.js SetDwtFailedDot).
   Scoped to a class rather than putting position:relative on `div.menu ul li a` - one element needs a
   containing block and that rule styles all 15 items.
   The dot sits INSIDE the anchor's existing 12px/16px padding, so it never widens the anchor: no reflow
   of the other items, no interaction with flex-wrap or the gap on `div.menu ul`, and no ancestor needs
   overflow:visible. */
div.menu ul li a.HasMenuAlert {
    position: relative;
}

div.menu ul li a.HasMenuAlert>span.MenuAlertDot {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f49600;
    /* White ring for the same reason the count chip on .UploadLineImage span has one: #f49600 on the
       #01526d nav measures about 2.4:1, below the 3:1 non-text minimum. box-shadow not border, so the
       dot stays 8px regardless of box-sizing. */
    box-shadow: 0 0 0 1px #fff;
}

/* Not cosmetic: div.menu ul li a:hover is ALSO #f49600, so without this the dot vanishes exactly when
   the pointer is on the item it marks. */
div.menu ul li a.HasMenuAlert:hover>span.MenuAlertDot {
    background-color: #fff;
    box-shadow: none;
}

/* Transaction line DWT validation — see CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code Rework".
   Applied/removed live by Transactions.js's ApplyDwtFieldErrors on the specific per-line DWT controls
   that are currently failing validation. Deliberately not scoped to an element type - this class lands
   on <select>/<input> (dwt-container-type, dwt-pops-source, dwt-haz-source, dwt-num-containers) as well
   as <div> group/rows containers (dwt-ewc-group, dwt-pop-rows, dwt-haz-rows). !important is safe here —
   none of the targeted controls set an inline border, so there's nothing for it to fight. */
.dwt-field-error {
    border: 2px solid #c00 !important;
}

/* FORM ELEMENTS
----------------------------------------------------------*/

fieldset {
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p {
    margin: 2px 12px 10px 10px;
}

fieldset.login label,
fieldset.register label,
fieldset.changePassword label {
    display: block;
}

fieldset label.inline {
    display: inline;
}

legend {
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry {
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry {
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo {
    width: 42%;
}

input.labelHighlight {
    color: #999999;
}

/* MISC  
----------------------------------------------------------*/

.clear1 {
    clear: both;
}

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay {
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
    margin-left: auto;
    margin-top: 10px;
}

.loginDisplay a:link {
    color: white;
}

.loginDisplay a:visited {
    color: white;
}

.loginDisplay a:hover {
    color: white;
}

.failureNotification {
    font-size: 1.2em;
    color: Red;
}

.bold {
    font-weight: bold;
}

.submitButton {
    text-align: right;
    padding-right: 10px;
}

input[type="button"] {
    color: #ffffff;
    padding: 7px 20px 7px 20px !important;
    background-image: url('/assets/images/Button.jpg');
    background-repeat: repeat-x;
    background-color: #dfe2f1;
    border: solid 1px #4a7693;
    color: #01415a;
    font-size: 11pt;
    font-weight: bold;
    font-family: Arial, Sans-Serif;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

input[type="button"].small {
    padding: 5px 10px 5px 10px !important;
    font-size: 10pt !important;
}


input[type="button"]:hover {
    cursor: pointer;
}

input[type="text"] {
    padding: 5px;
    border: solid 1px #adb0ba;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

input[type="password"] {
    padding: 5px;
    border: solid 1px #adb0ba;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

[readonly="readonly"] {
    color: #808080;
    background-color: #EBEBE4;
}

textarea,
select {
    padding: 4px;
    border: solid 1px #adb0ba;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

textarea {
    width: 100% !important;
}

input.Form {
    padding: 3px;
    border: solid 1px Silver;
}

input.Form:hover {
    padding: 3px;
    border: solid 1px #adb0ba;
}

/* Register verdict tones for the inline "check against the register" button - see .wc-verify below.
   The class suffix IS the server's FieldVerifyTone token (MetalTrack.Data/Models), so
   System.VerifyWasteCarrierNumber writes 'wc-tone-' + verdict.tone with no lookup table that could drift
   out of step with the enum. Colours are the four message-box colours already defined further down this
   file (.info/.success/.warning/.error) - no new palette.
   Orange means "could not be confirmed either way", NOT a lesser red.

   Three properties of these rules are load-bearing:

   1. NO !important. input.Error below DOES carry it, so a save-blocking format failure can never be
      overpainted green. That precedence is deliberate: .Error means "this will be rejected on save", a
      register verdict is advisory and does not block Save.
   2. `input.<class>`, not `.<class>`. At (0,1,1) this exactly ties `input[type="text"]` above, so source
      order is the entire tiebreak and these MUST stay below it - a bare .wc-tone-Green at (0,1,0) would
      lose to it at any position and the feature would be silently invisible.
   3. Placed BEFORE input.Error so that equal-specificity source order still hands .Error the win if that
      !important is ever removed in a tidy-up.

   Do not raise the specificity (.wc-verify input.wc-tone-*, or an inline border-color from JS): that wins
   over input[type="text"] by specificity rather than order, which quietly deletes point 1. */
.wc-tone-Green {
    --wc-tone: #4F8A10;
}

.wc-tone-Red {
    --wc-tone: #D8000C;
}

.wc-tone-Orange {
    --wc-tone: #9F6000;
}

.wc-tone-Blue {
    --wc-tone: #00529B;
}

/* One rule serves both the input border and .wc-verify-msg's text colour, because the same tone class goes
   on both elements. The #adb0ba fallback is not decoration: an unresolved var() is invalid at computed-value
   time, which makes `border` compute to initial - i.e. no border at all rather than the default grey. */
input.wc-tone-Green,
input.wc-tone-Red,
input.wc-tone-Orange,
input.wc-tone-Blue {
    border: solid 1px var(--wc-tone, #adb0ba);
}

input.Error,
select.Error {
    border: solid 1px Red !important;
}

input.Error:hover {
    border: solid 1px Orange !important;
}

.info-tip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    cursor: help;
}

.info-tip>svg {
    width: 14px;
    height: 14px;
    fill: #9ca3af;
}

.info-tip>.info-tip-text {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    width: 224px;
    z-index: 20;
    background: #111827;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    border-radius: 4px;
    padding: 4px 8px;
    text-align: left;
    white-space: normal;
    font-weight: normal;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

/* Wider bubble for one tooltip only - the transaction screen's consignment note code tip, whose
       wording lists all three UK consignment code formats and runs to roughly double the length the
       224px default was sized for. Every other .info-tip in the app is unaffected.

       The selector must keep the child combinator AND both classes: the base rule above is
       ".info-tip > .info-tip-text" at specificity (0,2,0), so a bare ".info-tip-text--wide" (0,1,0)
       would silently lose whatever its source order. This is (0,3,0) and wins wherever it sits. */
.info-tip>.info-tip-text.info-tip-text--wide {
    width: 320px;
}

.info-tip:hover>.info-tip-text {
    display: block;
}

.wc-carrier-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
    white-space: nowrap;
}

.wc-carrier-option .info-tip {
    margin-left: 0;
}

.wc-carrier-option input {
    margin: 0;
}

/* Waste Carrier Licence "check the register" button - an inline control INSIDE the input.
   Mirrors the Control Panel's Views/Shared/_VerifyReferenceField.cshtml so the same field looks the same in
   both front ends. There is no other precedent for this in either project: every other case
   (.search-with-select, #Account-FindAddress, the address lookups) puts the control in a sibling cell.
   Driven by System.VerifyWasteCarrierNumber in System/Scripts/System.js. Tone colours are above. */
.wc-verify {
    position: relative;
    /* flex, not the default block: an inline-block input in a block wrapper leaves a baseline descender gap
       beneath it, and because the button is stretched top/bottom to the WRAPPER it would end up ~4px taller
       than the field. */
    display: flex;
}

/* flex:1 with min-width:0 normalises all four host screens to "input fills the wrapper, button sits at the
   wrapper's right edge". Without it a field with a fixed width (Skip/CreateAccount.htm's WCL input carries
   .Medium, i.e. 120px) would leave the button stranded at the far right of the cell instead of against the
   input. Accepted consequence: that one field now fills its cell like the other three.
   62px reserves room for BOTH in-input buttons - the 28px verify shield and the 28px Find magnifier beside
   it, plus the 1px inset and a gap - so a long licence number cannot run underneath either. Was 32px when
   the shield was the only one. */
.wc-verify>input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 62px;
}

.wc-verify-btn {
    position: absolute;
    /* 1px inset on three sides so the button sits inside the input's own border and stretches to whatever
       height the font metrics give it. Deliberately not measured in JS - every one of these fields starts
       inside a display:none row, where offsetHeight is 0. */
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A bare <button>, never input[type="button"] - that global rule near the top of this file sets
       `padding: 7px 20px !important`, so a 28px icon button would have to fight an !important to exist.
       Nothing in reset.css or the jQuery UI theme styles a bare button. */
    padding: 0;
    border: 0;
    background: #01415a;
    color: #fff;
    /* The icon is stroke="currentColor", so it follows the colour above. */
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}

/* :focus as well as :hover - reset.css sets `:focus { outline: 0 }` globally, so this is the only focus
   indicator a keyboard user gets on this button. */
.wc-verify-btn:hover,
.wc-verify-btn:focus {
    background: #01526d;
}

.wc-verify-btn[disabled] {
    cursor: default;
    opacity: .6;
}

/* "Find this number on the register" - a SECOND in-input control, immediately left of the verify shield.
   Searches the register by the account's company name and ranks the results against its address; see
   System.FindWasteCarrierNumber in System.js.

   The geometry is duplicated from .wc-verify-btn rather than grouped into one shared selector DELIBERATELY:
   the delegated verify handler binds on `.wc-verify-btn`, so a shared class would make it capture this button
   too and a Find click would run a verify.

   Absolutely positioned rather than a flex sibling after the input, because .wc-verify is the positioning
   context and the shield is pinned to the WRAPPER's right edge - that works only while the input fills the
   wrapper. A flex sibling would shrink the input and land the shield on top of this button.

   right:30px = the shield's 28px width + its 1px inset + a 1px gap, which shows the input's own background
   through and so needs no divider colour. border-radius:0 because only the rightmost button meets the input's
   rounded corner. */
.wc-find-btn {
    position: absolute;
    top: 1px;
    right: 30px;
    bottom: 1px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: #01415a;
    color: #fff;
    border-radius: 0;
    cursor: pointer;
}

/* :focus as well as :hover, for the same reason as .wc-verify-btn:focus - reset.css sets
   `:focus { outline: 0 }` globally, so this is the only focus indicator a keyboard user gets. */
.wc-find-btn:hover,
.wc-find-btn:focus {
    background: #01526d;
}

.wc-find-btn[disabled] {
    cursor: default;
    opacity: .6;
}

/* Reuses @keyframes btnspin, like .wc-verify-spin. */
.wc-find-spin {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnspin .8s linear infinite;
}

/* Inline results, for the three hosts that render inside #Popout-Message (the create-account dialog, the DWT
   waste-carrier prompt, and Skip/CreateAccount.htm - which Skip.js injects with $('#Popout-Message').html()).
   Colours and border come from .results-box, which this is used alongside - ⚠️ that class is display:none by
   default, so the handler must .show() it.

   🔴 max-width is what stops the create-account dialog stretching to the width of the viewport, and it has to
   be a PX value. That dialog sizes itself from measureNaturalInnerSize() (Account.js), which clones #Prompt
   with width:'auto' and measures outerWidth - an absolutely-positioned auto-width element is shrink-to-fit,
   and its preferred width is MAX-CONTENT, so one long unwrapped sentence in here reported as a single line and
   dragged the popup out to ~1740px. EXPANDED_MIN_W is a minimum; nothing else caps width but the viewport.
   A percentage cannot fix it - in a shrink-to-fit clone a percentage resolves against an auto-width parent,
   which is circular and resolves back to auto. 420px is under COMPACT_MIN_W (480), so this box can never be
   what drives the dialog's width, and it also fits the Skip host (680) and the DWT prompt (560).

   🔴 The bounded height is load-bearing too. Skip/CreateAccount.htm sits in a #Popout-Message that is
   overflow:hidden with no internal scroller of its own, so without max-height a long result set is CLIPPED
   rather than scrolled and the rows below the fold are unreachable.

   overflow (not overflow-y): a long Address cell must scroll horizontally rather than widen the box. */
.wc-find-results {
    max-width: 500px;
    max-height: 260px;
    overflow: auto;
    margin-top: 8px;
}

/* The fourth host, Account/Main.htm, is a real page form and gets a System.MessageBox(760, 480) instead.
   Fixed size, no measurement, so it cannot stretch - but 15 rows overflow 480px and #Popout-Message is
   overflow:hidden, which would clip them unreachably. No max-width here: the modal is 760 wide and the table
   should use it. */
/* 🔴 Keep this in step with the cap in System.js's wcFindShow: that cap is this value plus 82px of
   non-scrolling chrome (12px .modal-shell top padding + ~70px .footer-bar). Set the cap higher than the sum and
   the box grows past its own scroller, leaving dead space BELOW a scrollbar - which is exactly what a 460 cap
   against a 340 max-height did. */
.wc-find-modal-scroll {
    max-height: 440px;
    overflow: auto;
}

/* The Environment Agency register covers England only, so the "find this licence" button is hidden for any
   site whose SiteDetails.Country is not England. Set once at startup by Main.js from GetSiteCountry; see the
   comment there for why this is a body class rather than four per-host edits.
   The verify shield is deliberately NOT hidden - it handles non-England formats correctly, returning blue with
   the right regulator's own register link. */
body.SiteNotEngland .wc-find-btn {
    display: none;
}

/* Reclaim the 30px the hidden Find button was reserving, so the field has no dead space at its right edge. */
body.SiteNotEngland .wc-verify>input[type="text"] {
    padding-right: 32px;
}

/* One opt-out from the two rules above: Site Admin -> Administer External Carriers.
   The other hosts search for the account standing in front of you, so on a Welsh or Scottish site the button
   could only ever produce empty results. There the operator is building a library of hauliers, an English one
   is perfectly plausible whatever nation the site is in, and the results already carry their own England-only
   caveat - so a fruitless search is explained rather than confusing.

   🔴 display:flex, not inline-block - that is .wc-find-btn's own base above, and it centres its SVG with
   align-items/justify-content.
   Specificity (0,3,1) and (0,3,2) beat the hide rules' (0,2,1) and (0,2,2), so these win wherever they sit in
   the file rather than depending on source order. The second restores the 62px both buttons need. */
body.SiteNotEngland .wc-verify--always-find .wc-find-btn {
    display: flex;
}

body.SiteNotEngland .wc-verify--always-find>input[type="text"] {
    padding-right: 62px;
}

/* Waste Carrier reason radios + WCL field (with register verify/find) only apply on DWT-Ready sites.
   The body.dwt-ready class is set once at load in Main.js. !important beats the inline display that
   .supplieronly show/hide sets, so a .supplieronly.wc-dwt-only element shows only when Supplier AND DWT-Ready. */
body:not(.dwt-ready) .wc-dwt-only {
    display: none !important;
}

/* Reuses the existing @keyframes btnspin added for .btn-loading further down this file. @keyframes are
   document-global, so the order of the two does not matter. */
.wc-verify-spin {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnspin .8s linear infinite;
}

/* --wc-tone comes from the wc-tone-* class the handler adds alongside this one. Deliberately a SIBLING of
   .wc-verify rather than inside it - inside, it would sit underneath the absolutely-positioned button. */
.wc-verify-msg {
    margin-top: 5px;
    font-size: 11px;
    color: var(--wc-tone, #333);
}


table {
    border: none;
}

table tr td {
    border: none;
    margin: 0px;
    padding: 3px 5px 3px 5px;
}

ul.HomepageLinks li a {
    cursor: pointer;
}

table.Grid,
table#Grid {
    width: 100%;
}

table.Grid tr td,
table#Grid tr td {
    border-bottom: solid 1px Silver !important;
    padding: 7px;
    vertical-align: middle;
}

table.Grid tr th,
table#Grid tr th {
    background-color: #01435b;
    border-left: 0;
    border-top: 0;
    font-weight: bold;
    padding: 10px 5px 10px 5px !important;
    text-align: left;
    color: #ffffff;
}

table.Grid tr:hover td {
    background-color: #eee;
    color: #000;
}

table.Grid tbody tr.Selected,
table#Grid tbody tr.Selected {
    background-color: silver;
    color: #fff;
}

table.Grid tr.Selected a,
table#Grid tr.Selected a {
    color: #fff;
}

/* Visually links a transaction/sale line row with its DWT container/EWC detail row directly
   beneath it (see CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code Rework"). */
table.Grid tr.mt-line-with-dwt td {
    border-bottom: none !important;
}

table.Grid tr.mt-line-dwt-row td {
    background-color: #ffffff;
    padding: 8px;
}


.transaction-line-btns a {
    text-decoration: none;
}

.transaction-line-btns a:not(:last-child) {
    margin-right: 4px;
}


/* Transaction line DWT extra details — see CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code
   Rework". Styling for the per-line Container/EWC/Hazardous/POP block built in Transactions.js;
   .hidden and .accent-text (Utilities section, below) are reused rather than duplicated. */
.dwt-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dwt-container-group {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

input.dwt-num-containers {
    width: 60px;
}

/* select.dwt-container-type's fixed width was removed - it now carries input-md (width:100%), which
   a tag+class rule like "select.dwt-container-type { width: ... }" would otherwise always outrank
   regardless of source order. See CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code Rework". */

.dwt-section-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dwt-section {
    margin-top: 8px;
}

.dwt-mt-4 {
    margin-top: 4px;
}

.dwt-mb-4 {
    margin-bottom: 4px;
}

.dwt-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Defensive — a block-level flex column already takes the full available width by default, but
       this guarantees the rows list can never sit beside a sibling flex item regardless of context. */
    width: 100%;
}

/* Compliance card — see CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code Rework". Now a <div>, not a
   <span> — it wraps the Pops Source dropdown/Add button row AND the POP Components table beneath it
   (a <span> cannot validly contain a <table>). Plain block: the dropdown/button/error line keeps its
   own flex treatment via .dwt-section-row, this is just their shared show/hide wrapper. */
.dwt-pop-section {
    display: block;
}

.dwt-component-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dwt-nowrap-label {
    white-space: nowrap;
}

.dwt-required-marker {
    color: #c00;
}

.dwt-concentration-input {
    width: 80px;
}

.dwt-name-input {
    width: 160px;
}



.dwt-line-btn {
    padding: 5px 10px 5px 10px !important;
    background-image: url('/assets/images/Button.jpg');
    background-repeat: repeat-x;
    background-color: #dfe2f1;
    border: solid 1px #4a7693;
    color: #01415a;
    font-size: 9.5pt;
    font-weight: bold;
    font-family: Arial, Sans-Serif;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

/* Grouped Metal List table (DWTReady "Manage Purchase Metals") — styling for the markup built in
   SiteAdmin.js's RenderMetalsDwtGroupedTable. Column widths stay inline in the JS (per-column
   values driving table-layout:fixed); everything else lives here — see CLAUDE.md "Digital Waste
   Tracking (DWT) — EWC Code Rework". */
.dwt-metal-group {
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.dwt-metal-group-header {
    background: #f5f5f5;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dwt-metal-group-empty {
    padding: 8px 10px;
    color: #666;
    font-size: 9pt;
}

.dwt-metals-empty-state {
    color: #666;
}

table.dwt-metal-table {
    width: 100%;
    table-layout: fixed;
}

table.dwt-metal-table th,
table.dwt-metal-table td {
    padding: 6px;
    text-align: left;
    vertical-align: middle;
}

table.dwt-metal-table .dwt-col-center {
    text-align: center;
}

table.dwt-metal-table .dwt-col-actions {
    text-align: right;
    white-space: nowrap;
}

.dwt-icon-yes {
    color: #4F8A10;
    font-weight: bold;
}

.dwt-icon-no {
    color: #D8000C;
    font-weight: bold;
}

.dwt-haz-badge {
    color: #c00;
}

.dwt-metal-list-container {
    position: relative;
    min-height: 80px;
}

.dwt-metal-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* Reuses the existing @keyframes btnspin (see .wc-verify-spin/.wc-find-spin/.btn-loading). */
.dwt-metal-loading-spinner {
    width: 32px;
    height: 32px;
    border: 4px solid #ccd0d8;
    border-top-color: #01435b;
    border-radius: 50%;
    animation: btnspin .8s linear infinite;
}

.dwt-metal-group-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dwt-ewc-hazardous-code {
    color: #D8000C;
    font-weight: bold;
}

/* Transaction screen - vehicle registration gate. Not a DWT concept; the "container + absolute inset:0
   overlay" shape is reused from .dwt-metal-list-container/.dwt-metal-loading-overlay above purely because
   it's the established precedent for this exact pattern in this file. Shown/hidden by Checklegislation()
   in Transactions.js, which already disables the Add-form fields/buttons on the same blank-registration
   check - this is a visual affordance on top of that existing rule, not a new one. */
.vehicle-reg-overlay-container {
    position: relative;
    min-height: 60px;
}

.vehicle-reg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.vehicle-reg-overlay-message {
    font-weight: bold;
    color: #01435b;
    text-align: center;
    padding: 20px;
}

/* Per-transaction-line DWT compliance card — see CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code
   Rework". Replaces the previous flat .dwt-row/.dwt-section flow with a collapsible card: a header
   showing Hazardous/EWC/outstanding-field badges plus a status+chevron toggle, and a body holding the
   existing Container(s)/EWC Code(s)/Disposal-Recovery/Hazardous/POPs controls, now grouped into
   labelled .dwt-card-section blocks. Every control INSIDE the body keeps its pre-existing class names
   (dwt-num-containers, dwt-ewc-group, dwt-haz-section, etc.) unchanged — those are also literal
   FieldNames values and jQuery selectors read/written elsewhere in Transactions.js — this block styles
   the new wrapping/grouping elements only. Colours reuse the palette already established elsewhere in
   this file rather than introducing a new one: #9F6000/orange for hazardous (matches #HazardousKey),
   #D8000C for outstanding (matches .dwt-icon-no/.dwt-required-marker), #4F8A10 for complete (matches
   .dwt-icon-yes). */
.dwt-card {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
}

/* Chevron, title and status now read left-to-right as one line ("⌄ COMPLIANCE DETAIL — 1 FIELD
   OUTSTANDING") — no justify-content:space-between, since badges moved out to .dwt-narrative-badges
   and there is only one group of content left. */
.dwt-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px;
    background: #f5f5f5;
    cursor: pointer;
}

.dwt-card-title {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 8.5pt;
    color: #555;
}

/* Sits directly under the metal narrative in the MAIN row's <td> (not inside .dwt-card-header, a
   different <tr>) — see CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code Rework". */
.dwt-narrative-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.dwt-badge {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 8.5pt;
    font-weight: bold;
    white-space: nowrap;
}

.dwt-badge--hazardous {
    background-color: rgba(243, 137, 0, 0.15);
    color: #9F6000;
}

.dwt-badge--outstanding {
    background-color: rgba(216, 0, 12, 0.1);
    color: #D8000C;
}

.dwt-badge--complete {
    background-color: rgba(79, 138, 16, 0.12);
    color: #4F8A10;
}

.dwt-badge--ewc {
    background-color: #e9edf5;
    color: #01435b;
}

/* Theme orange, matching .dwt-badge--hazardous/#HazardousKey — "hazardous" is orange everywhere on
   this card; red stays reserved for .dwt-badge--outstanding (a compliance-outstanding pill is a
   different concept from a hazardous marker). See CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code
   Rework". */
.dwt-badge--ewc-hazardous {
    background-color: rgba(243, 137, 0, 0.15);
    color: #9F6000;
}

.dwt-card-status {
    font-size: 9pt;
    font-weight: bold;
}

.dwt-card-status--complete {
    color: #4F8A10;
}

.dwt-card-status--outstanding {
    color: #D8000C;
}

.dwt-card-chevron {
    display: inline-block;
    color: #666;
    transition: transform 120ms ease-in-out;
}

.dwt-card-open .dwt-card-chevron {
    transform: rotate(180deg);
}

.dwt-card-body {
    padding: 10px;
    background-color: #ffffff;
}

/* Two-column layout: title on the left, fields on the right, on the same row — see CLAUDE.md
   "Digital Waste Tracking (DWT) — EWC Code Rework". */
.dwt-card-section {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.dwt-card-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.dwt-card-section-title {
    flex: 0 0 160px;
    padding-top: 6px;
    font-size: 8.5pt;
    font-weight: bold;
    text-transform: uppercase;
    color: #888;
    letter-spacing: .03em;
}

.dwt-card-section-fields {
    flex: 1;
    min-width: 0;
}

/* EWC Code(s) as toggle chips, same underlying <label><input type="checkbox">…</label> markup as
   before — :has() is already used elsewhere in this file (see the --wc-tone custom-property block),
   so this is a precedented technique here, not a new dependency. The checkbox is a genuine visible
   control (not hidden) sitting to the left of the code text inside the pill — accent-color just keeps
   its native tick in step with the chip's own selected-state colour below. */
label.dwt-ewc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    margin: 0 6px 4px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 9pt;
}

label.dwt-ewc-chip input.dwt-ewc-checkbox {
    accent-color: #01435b;
}

label.dwt-ewc-chip--hazardous input.dwt-ewc-checkbox {
    accent-color: #9F6000;
}

label.dwt-ewc-chip:has(input.dwt-ewc-checkbox:checked) {
    background: #e9edf5;
    border-color: #01435b;
    color: #01435b;
    font-weight: bold;
}

/* Theme orange, matching .dwt-badge--hazardous/.dwt-badge--ewc-hazardous - see CLAUDE.md "Digital
   Waste Tracking (DWT) — EWC Code Rework". */
label.dwt-ewc-chip--hazardous:has(input.dwt-ewc-checkbox:checked) {
    background: rgba(243, 137, 0, 0.15);
    border-color: #9F6000;
    color: #9F6000;
}

/* POP/Hazardous Components as tables — see CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code
   Rework". dwt-pop-table-wrap/dwt-haz-table-wrap (the show/hide targets) carry this class alongside
   their own — no separate rule needed for those two, they're purely functional/JS-target classes. */
.dwt-component-table {
    width: 600px;
    border-collapse: collapse;
    margin-top: 6px;
}

.dwt-component-table th {
    text-align: left;
    font-size: 8pt;
    font-weight: bold;
    text-transform: uppercase;
    color: #888;
    letter-spacing: .03em;
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
}

.dwt-component-table td {
    padding: 4px 6px;
    vertical-align: middle;
}

/* Unit shown as a field suffix rather than in the table header ("Concentration"/"Weight", not
   "Concentration (mg/kg)"/"Weight (kg)") — see CLAUDE.md "Digital Waste Tracking (DWT) — EWC Code
   Rework". Reads as one fused control: the input's right corners and the suffix's left corners are
   both squared off where they meet, with the suffix keeping the shared border going and NOT
   repeating it on the touching edge (the input already draws that edge). */
.dwt-input-suffix-group {
    display: inline-flex;
    align-items: stretch;
}

.dwt-input-suffix-group .dwt-concentration-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.dwt-input-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid #adb0ba;
    border-left: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #f0f0f0;
    color: #666;
    font-size: 8pt;
    white-space: nowrap;
}

/* Edit Metal modal — puts Default Container Type / Physical Form side by side. Scoped to
   ".dwt-two-col > .field" rather than a bare ".field" rule so every other single-column field in
   this modal (and every other modal reusing .field) is unaffected. flex-basis (part of the "flex: 1"
   shorthand) takes precedence over any competing width on a flex item regardless of specificity, so
   no !important is needed against .field's own rule (margin-bottom only). */
.dwt-two-col {
    display: flex;
    gap: 16px;
}

.dwt-two-col>.field {
    flex: 1;
    min-width: 0;
}

/* Edit Metal modal — EWC search results dropdown, restyled to read like the Control Panel's picker
   (Metaltrack.Admin/wwwroot/js/ewc-code-picker.js renderResults). See CLAUDE.md "Digital Waste
   Tracking (DWT) — EWC Code Rework". Two columns: monospace code (with HAZ stacked beneath it) on the
   left, grey chapter/sub-chapter lines then the description on the right.

   SCOPED UNDER .dwt-ewc-widget FOR TWO REASONS, both load-bearing:
   1. It is the only scope that cannot reach the app-wide customer-search autocompletes
      (Account.js's #Account-Search-Name / #Account-Search-Company). Those pass no appendTo, so their
      menus land on document.body and can never match these selectors. The EWC menu is a child of the
      widget only because InitEwcCodeWidgets passes appendTo:$widget. Do NOT "tidy" these rules into
      the "Customer Search Style" block below — that block is shared with those two screens.
   2. Layout.css is linked BEFORE the jQuery UI theme (Site.Master lines 20 and 21), so an
      equal-specificity tie goes to the THEME. The extra class supplies the +1 specificity needed to
      beat .ui-menu / .ui-menu-item for everything that is not fighting an !important.

   🔴 THE !important DECLARATIONS ARE FORCED, NOT STYLISTIC — the one deliberate departure from the
   .dwt-card* block above, which has none. The "Customer Search Style" block (search this file for it)
   sets padding/background/color on .ui-autocomplete .ui-menu-item with !important, and an !important
   declaration can only be beaten by another !important, whatever the specificity. Everything here not
   competing with one (borders, layout, fonts) is deliberately left plain.
   That block is also why this dropdown looked like a customer-search list rather than unstyled: it,
   not the theme, supplied the 10px padding, the navy text, the #bbb row separators and the #ddd hover.
   The theme's own item rules are all dead — it is jQuery UI 1.8.8 CSS (expecting <li><a>) against
   1.11.2 JS, which renders no <a>.

   Colours are this file's existing palette, NOT the Control Panel's Tailwind hexes — the CSS
   Frameworks — Project Split rule keeps those out of here: #01435b navy for the code (already this
   dropdown's colour), #D8000C for HAZ (matches .dwt-icon-no/.dwt-badge--outstanding), #888 for the
   grouping lines (matches .dwt-card-section-title), #333 body text, #f5f5f5 hover (matches
   .dwt-card-header), #ccc border (matches .dwt-card). No font-size on the container, so the
   description inherits body's 10pt — closest to the Control Panel's 14px; the grouping lines and HAZ
   drop to 8pt to mirror its 14/12 hierarchy at this app's scale. */
.dwt-ewc-widget .ui-autocomplete {
    box-sizing: border-box;
    /* padding and float neutralise the theme's own .ui-menu rules (padding:2px, float:left). */
    padding: 0;
    float: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 224px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    /* 🔴 CSS owns the width, not the _resizeMenu override — min/max-width outrank ANY inline width
       per spec, so this holds whatever jQuery UI stamps and survives a future version bump. It has
       to: jQuery 1.7.2 has no outerWidth SETTER, so the one jQuery UI uses is
       jquery.ui.core.js 1.8.9's monkey-patch, which writes (size - padding - border) into `width`
       assuming content-box — against the border-box below that lands 2px narrower than the search
       input. 100% of .dwt-ewc-widget also keeps the left/right edges flush with that input, and
       prevents a phantom horizontal scrollbar on .modal-scroll. */
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    /* 🔴 Mandatory: reset.css sets "body { line-height: 1 }", and the theme's only leading lives on
       the dead .ui-menu .ui-menu-item a rule. Without this a wrapped description renders with its
       lines touching — which is most of what made this dropdown look cramped in the first place. */
    line-height: 1.45;
}

.dwt-ewc-widget .ui-autocomplete .ui-menu-item {
    /* align-items is load-bearing: a row is 1-3 text lines tall and the code must stay top-aligned
       against a tall description, exactly as the Control Panel's items-start does.
       margin:0 undoes reset.css's bare "li { margin-left: 30px }".
       float/clear undo the theme's .ui-menu .ui-menu-item { float: left; clear: left }.
       border:none removes the customer-search block's #bbb per-row separators — the Control Panel
       has none, and the hover fill is the only row affordance there. */
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    float: none;
    clear: none;
    border: none;
    cursor: pointer;
    /* These three are the ones that MUST carry !important — they are each overriding an !important
       of the same name in the customer-search block, which specificity alone cannot beat. */
    padding: 8px 12px !important;
    background: #fff !important;
    color: #333 !important;
}

.dwt-ewc-widget .ui-autocomplete .ui-menu-item:first-child {
    border-top: none;
}

/* Mouse hover and keyboard arrow-key focus share one fill. Styling ui-state-focus is a deliberate
   divergence from the Control Panel, which has no keyboard state because it is a plain div list:
   jQuery UI genuinely supports arrow-key navigation here, and the customer-search block's
   background/color !important currently beat the theme's .ui-state-focus, so it is invisible today. */
/* .ui-state-focus is not just the keyboard state — jQuery UI 1.11.2's menu binds
   "mouseenter .ui-menu-item" to focus(), which addClass()es it, so :hover is really the belt to that
   braces (it covers the frame before mouseenter fires). .ui-state-active is defensive: 1.11.2 only
   applies it to parents of open submenus, which cannot occur here, but the theme paints it
   #f49600/white at (0,2,0) and a future version bump would otherwise put brand orange in the list. */
.dwt-ewc-widget .ui-autocomplete .ui-menu-item:hover,
.dwt-ewc-widget .ui-autocomplete .ui-menu-item.ui-state-focus,
.dwt-ewc-widget .ui-autocomplete .ui-menu-item.ui-state-active {
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* The five child rules are scoped too, so the block header's claim holds literally. Note these style
   the row's CHILDREN — the row itself must keep being styled through .ui-menu-item above, because a
   class on the row would be (0,2,0) and would TIE the customer-search block, then lose on source
   order to it. */
.dwt-ewc-widget .dwt-ewc-result-code {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* First monospace stack in this file. FormatEwcDisplayCode always returns a fixed-width NN.NN.NN, so
   column alignment is already guaranteed by the format — this is for glyph texture, matching the
   Control Panel's font-mono, not to make the codes line up. Windows-appropriate subset of its stack. */
.dwt-ewc-widget .dwt-ewc-result-code-value {
    font-family: Consolas, "Courier New", monospace;
    font-weight: bold;
    color: #01435b;
    white-space: nowrap;
}

.dwt-ewc-widget .dwt-ewc-result-haz {
    margin-top: 2px;
    font-size: 8pt;
    font-weight: bold;
    color: #D8000C;
}

/* min-width:0 lets the flex item shrink below its content's intrinsic width, which is what makes a
   long DEFRA chapter title WRAP rather than stretch the row. */
.dwt-ewc-widget .dwt-ewc-result-text {
    flex: 1;
    min-width: 0;
}

.dwt-ewc-widget .dwt-ewc-result-grouping {
    font-size: 8pt;
    line-height: 1.25;
    color: #888;
}

/* A direct declaration always beats an inherited one, !important or not, so this needs no !important
   against the item's inherited color. */
.dwt-ewc-widget .dwt-ewc-result-desc {
    color: #333;
}

/* Metal Prices tab — keeps each depot's Rate + Price fields on one line regardless of column
   width. .dwt-metal-table uses table-layout:fixed (shared with the Metal Details table), so a <td>
   with only an explicit <th> width has no natural way to grow for its content — without this, the
   two inline-level controls wrap onto separate lines the moment the column is narrower than their
   combined width. */
.dwtp-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}


.dwtp-unittype {
    padding: 5px !important;
}

/* Site Admin left-hand nav (SiteAdmin.htm's #Site-Menu, wrapping ul.SubMenu) — stays in view while
   the right-hand content scrolls, rather than scrolling away with the page (the "Metal Prices" tab
   in particular can run to many screens' worth of rows). Scoped to the specific #Site-Menu id
   rather than the shared 960.gs .grid_3 column class, which is used site-wide for unrelated layout
   and must not become sticky everywhere it appears. */
#Site-Menu {
    position: sticky;
    top: 10px;
    z-index: 2;
}





ul.SubMenu {
    border-top: solid 1px Silver;
    border-left: solid 1px Silver;
    border-right: solid 1px Silver;
}

ul.SubMenu li {
    list-style: none;
    border-bottom: solid 1px Silver;
    margin: 0px;
    background-color: #01435b;
    color: #fff;
    padding: 15px;
}

ul.SubMenu li.selected,
ul.SubMenu li.selected:hover {
    list-style: none;
    border-bottom: solid 1px Silver;
    background-color: #f49600;
    margin: 0px;
    color: #fff;
}

ul.SubMenu li:hover {
    list-style: none;
    border-bottom: solid 1px Silver;
    background-color: Silver;
    margin: 0px;
    color: #fff;
}

ul.SubMenu li:hover a:hover {
    color: #fff;
}

div.Title {
    border-bottom: solid 1px Silver;
    padding-bottom: 10px;
}

/*
 Popout
*/


div#Popout {
    background-color: #ffffff;
    position: fixed;
    z-index: 1001;
    display: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-width: 90vw;
}

div#Popout-Message {
    background-color: #ffffff;
    margin: 10px !important;
    overflow: auto;
    width: 100%;
    max-width: 100%;
}

div#PopoutBg {
    background-color: #000000;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 90;
    display: none;
    zoom: 1;
    opacity: 0.8 !important;
    filter: alpha(opacity=80) !important;
    -moz-opacity: 0.8 !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80) !important;
    -khtml-opacity: 0.8 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
}


div#PopoutDialog {
    background-color: #ffffff;
    position: fixed;
    z-index: 1001;
    display: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

div#PopoutDialog-Message {
    background-color: #ffffff;
    margin: 10px !important;
    overflow: auto;
    width: 100%;
}

div#PopoutDialogBg {
    background-color: #000;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 1001;
    display: none;
    zoom: 1;
    opacity: 0.2 !important;
    filter: alpha(opacity=80) !important;
    -moz-opacity: 0.2 !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80) !important;
    -khtml-opacity: 0.2 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
}


/*
 Popout
*/


div#MessageConfirm {
    background-color: #ffffff;
    position: fixed;
    z-index: 1001;
    display: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

div#MessageConfirm-Message {
    background-color: #ffffff;
    margin: 10px !important;
    overflow: auto;
    width: 100%;
}

div#MessageConfirmBg {
    background-color: #000000;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 90;
    display: none;
    zoom: 1;
    opacity: 0.8 !important;
    filter: alpha(opacity=80) !important;
    -moz-opacity: 0.8 !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80) !important;
    -khtml-opacity: 0.8 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
}

div#MessageConfirm-Buttons {
    padding: 3px;
    margin: 10px !important;
    overflow: auto;
    width: 100%;
}

div#MessageConfirm-Buttons input:first-child {
    float: left;
}

div#MessageConfirm-Buttons input {
    float: right;
    margin: 2px 3px;
}

/*********************/

span#Account-Search-Alphabet {
    letter-spacing: 10px;
    align-items: center;
    display: flex;
}

span#Account-Search-Alphabet a {
    text-decoration: none;
    width: 19px;
}


.search-with-select {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.search-with-select select {
    position: relative;
    z-index: 2;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 10px;
    background-color: #eee;
}

.search-with-select input {
    position: relative;
    z-index: 1;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.Message {
    float: left;
    width: 100%;
}

.info,
.success,
.warning,
.error,
.validation {
    display: block;
    border: 1px solid;
    margin: 10px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('/assets/images/icons/Knob Info.png');
}

.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url('/assets/images/icons/Knob Valid Green.png');
}

.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('/assets/images/icons/Knob Attention.png');
}

.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('/assets/images/icons/Knob Cancel.png');
}

/*
Form objects
*/
input[type="text"].Small,
select.Small {
    width: 30px;
}

input[type="text"].SmallMedium,
input[type="text"].MediumSmall,
input[type="number"].SmallMedium,
input[type="number"].MediumSmall,
select.MediumSmall,
select.SmallMedium {
    width: 60px;
}

input[type="text"].Medium,
input[type="number"].Medium,
select.Medium {
    width: 120px;
}

input[type="text"].MediumLarge,
input[type="text"].LargeMedium,
input[type="number"].MediumLarge,
input[type="number"].LargeMedium,
select.LargeMedium,
select.MediumLarge {
    width: 200px;
}

input[type="text"].Large,
input[type="number"].Large,
select.Large {
    width: 300px;
}


input.Money {
    text-align: right;
}

/*
Tables
*/

.tablescroll td,
.tablescroll_wrapper,
.tablescroll_head,
.tablescroll_foot {
    border: 1px solid #ccc;
    cursor: pointer;
}

.tablescroll td {
    padding: 3px 5px;
    border-bottom: 0;
    border-right: 0;
    font-size: 8pt;
}

.tablescroll_wrapper {
    background-color: #fff;
    border-left: 0;
}

.tablescroll_head,
.tablescroll_foot {
    background-color: #eee;
    background-image: url('/assets/images/TableBar.jpg');
    border-left: 0;
    border-top: 0;
    font-weight: bold;
    font-size: 8pt;
}

table.tablescroll_head thead tr th {
    padding-top: 8px;
    padding-bottom: 8px;
}

.tablescroll tbody tr.first td {
    border-top: 0;
}

div.StartBoxOuter {
    width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    display: block;
}

div.StartBox {
    float: left;
    width: 260px;
    text-align: center;
    font-size: 16pt;
}

div#System {
    clear: both;
}


input.SearchIcon {
    background-image: url('/assets/images/SearchIcon.jpg');
    width: 124px;
    height: 51px;
    border: none;
    background-repeat: no-repeat;
    background-color: #01415a;
    background-position: center;
}


div.TopBar {
    margin-top: 15px;
    clear: both;
    width: 100%;
    display: block;
    text-align: right;
}

div.TopBarLine {
    position: relative;
    /* Reserves 160px at the right for the 143x38px GoBack.jpg button that sits beside
       this underline (Site.Master:148-150), so it stops short of the button instead of
       running under it. Being relative to the container, it follows the 960/1200 grid
       tier automatically - the old fixed 1025px overflowed the 960 tier. */
    width: 100%;
    max-width: calc(100% - 160px);
    top: 20px;
    border-bottom: solid 1px Silver;
}

div#displayBox {
    display: none;
    width: 100%;
    background-color: White;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

div#wait-message {
    display: block;
    /* 1000px is LOAD-BEARING, not a stale hardcode - do not make this a percentage.
       blockUI is handed #displayBox as its message with an explicit width:0px wrapper
       (System/Scripts/Application.js:77-87, and the same block again in Account.js and
       twice in SiteAdmin.js), and blockUI applies that css to the wrapper rather than to
       #displayBox. So a percentage resolves against 0 and this caption collapses to one
       word per line at the overlay's left edge. 1000px matches the intrinsic width of
       assets/images/metal-track-loading.png, which is also where the -1000 in the
       wrapper's `left` and the -400 in its `top` come from - change all of those
       together or none of them. Note #displayBox is never inside .container_12 or
       div.page, so the 960/1200 grid tiers do not reach it. */
    width: 1000px;
    text-align: center;
    color: #f49600;
    font-size: 20px;
    position: relative;
}

.divTransaction-Payment-AuthCode {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url('/assets/images/icons/Knob Valid Green.png');
}

.SiteInfoColumn {
    min-width: 250px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Credit Card Auth */

div.divCardImageContainer {}

div.divVisa-Selected {}

div.divVisa-NonSelected {}

div.divMaestro-Selected {}

div.divMaestro-NonSelected {}

div.divMasterCard-Selected {}

div.divMasterCard-NonSelected {}

#divAdmin-Create-BankAccount .error {
    padding: 5px;
    margin: 5px 0;
    border: 1px solid #f00;
}

.RegistrationCurrent {
    background-image: url('../images/Registration/Header-Selected.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    min-height: 56px;
    min-width: 151px;
    margin-right: 2px;
    color: #003750;
}

.RegistrationCompleted {
    background-image: url('../images/Registration/Header-Completed.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    min-height: 56px;
    min-width: 151px;
    margin-right: 2px;
    color: #003750;
}

.RegistrationDefault {
    background-image: url('../images/Registration/Header-Default.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    min-height: 56px;
    min-width: 151px;
    margin-right: 2px;
    color: #ef8a05;
}

.RegistrationHeaderInner {
    padding: 10px;
    padding-top: 13px;
    float: left;
}

#BackToHome:hover {
    cursor: pointer;
}

select option.highlight {
    color: red;
}

#MessageAlert {
    border: 1px solid silver;
}

#MessageAlert p {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#MessageAlert h3 {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

input.err {
    border-color: red;
}

/* Customer Search Style */
.ui-autocomplete .ui-menu-item {
    padding: 10px !important;
    background: #fff !important;
    color: #01435b !important;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}

.ui-autocomplete .ui-menu-item:first-child {
    border-top: 1px solid #bbb;
}

.ui-autocomplete .ui-menu-item:hover {
    cursor: pointer;
    background: #ddd !important;
}

.keyCode {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: solid 1px #adb0ba;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.keyCode2026 {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: solid 1px #adb0ba;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
}

.ReportTypeContainer {
    float: left;
    height: 96px;
}

.ReportTypeContainer input[type=radio] {
    margin-top: 34px;
    margin-left: 40px;
}

.ReportTypeContainer input[type=radio]+label {
    border: 1px solid #01526d;
    padding: 30px 40px;
    border-radius: 4%;
    margin-left: -36px;
    cursor: pointer;
    font-size: 10pt;
    font-weight: bold;
    font-family: Arial, Sans-Serif;
}

/*Bank Screen Stuff*/

.PaymentSelected {
    background-color: #f49600;
}

/*End Bank Screen Stuff*/


#GridUsers tr:hover td {
    background-color: #eee;
}

#GridUsers th {
    background-color: #eee;
    background-image: url(/assets/images/TableBar.jpg);
    border: 1px solid #ccc;
    font-size: 8pt;
    padding: 6px 5px;
}

#GridUsers td {
    padding: 6px 5px;
    border: 1px solid #ccc;
    font-size: 8pt;
}

#GridUsers td a {
    margin: 3px;
    display: inline-block;
}

.mapInfo h3 {
    margin-top: 5px;
    margin-bottom: 8px;
}

.mapInfo table td {
    padding: 0;
}





#lightbox-container-image img {
    width: 100%;
}

.lightbox img,
.lb-image {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}


#divMetals-List li {
    list-style: none;
    margin: 0;
}

#divMetals-List.group li {
    list-style: none;
    margin: 0px;
    background-color: #eee;
    padding: 10px;
    margin-bottom: 6px;
}


#divMetals-List.group li ul {
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}


#divMetals-List.group li table {
    margin-top: 7px;
    margin-bottom: 7px;
}

#Admin-CreateUser-DepotReports .Checkbox {
    width: 100%;
    float: left;
}



.ul-col-3 {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ul-col-3 li {
    margin-left: 0;
}


.select2-container {
    text-align: left;
}

.select2-dropdown ul li {
    margin-left: 0px;
}


.modal {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 32%;
}

.modal-content h3 {
    margin-bottom: 1rem;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


input[type="number"] {
    padding: 5px;
    border: solid 1px #adb0ba;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

table#hazardous-metals-table th,
table#hazardous-metals-table td {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}

#hazardous-metals-table tr:hover td {
    background-color: #eee;
}

#hazardous-metals-table th {
    background-color: #eee;
    background-image: url(/assets/images/TableBar.jpg);
    border: 1px solid #ccc;
    font-size: 8pt;
    padding: 6px 5px;
}

#hazardous-metals-table td {
    padding: 6px 5px;
    border: 1px solid #ccc;
    font-size: 8pt;
}

#hazardous-metals-table td a {
    margin: 3px;
    display: inline-block;
}



/*ACCOUNT CREATION DIALOG*/

#Popout-Message {
    overflow: hidden;
    box-sizing: border-box;
}

/* ---- Layout ---- */
.modal-shell {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 0 16px;
}

.columns {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
}

.col {
    flex: 1 1 0%;
    min-width: 340px;
}

.col-left {
    padding-right: 6px;
}

.col-right {
    padding-left: 6px;
}

.divider {
    width: 1px;
    background: #e5e5e5;
    margin: 0 10px;
}

.footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    border-top: 1px solid #e5e5e5;
    margin-top: 16px;
}

/* ---- Typography ---- */
.section-title {
    margin: 0 0 10px 0;
    color: #01415a;
    font-weight: 700;
}

/* ---- Form ---- */
.field {
    margin-bottom: 15px;
}

.label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: #01415a;
}

.input,
.select,
.date-input,
.input-md {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: solid 1px #adb0ba;
    border-radius: 4px;
    background: #fff;
}

.input-md {
    padding: 5px;
}

.input.readonly {
    background: #fafafa;
}

/* ---- Advanced panel ---- */
.panel-adv {
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-sizing: border-box;
}

.panel-adv .section-title {
    margin-left: 5px;
}

.panel-adv table {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.panel-adv input:not([type="checkbox"], [type="button"], [type="radio"], .input-dob),
.panel-adv select:not(.input-dob) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.template-line td {
    padding: 0;
}

/* ---- Buttons ---- */
.btn-solid-orange {
    padding: 8px 16px;
    background: #f49600;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

.btn-solid-grey {
    padding: 10px 20px;
    background: #ccc;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


.btn-solid-navy {
    padding: 10px 20px;
    background: #01435b;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-sm {
    padding: 5px 10px;
}


/* Modal footer buttons must be the same height. The two base classes above have mismatched padding
   (orange 8px/16px, grey 10px/20px) so grey renders 4px taller wherever they sit side by side, which
   is every .footer-bar in the app. Normalised here to the grey value because that is what already
   drives footer height — so only the orange button grows and no footer's height shifts. Scoped to
   .footer-bar deliberately: it is used exclusively by modal/dialog footers, so buttons elsewhere on a
   page keep their existing sizes. */
.footer-bar .btn-solid-orange,
.footer-bar .btn-solid-grey {
    padding: 10px 20px;
}

.btn-link-orange {
    background: none;
    border: none;
    color: #f49600;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

#Use-ID-Button {
    margin: 5px 0 15px 0;
}

.btn-ghost-light {
    padding: 6px 12px;
    background: #eee;
    color: #01415a;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

.btn-solid-green {
    padding: 12px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

button:disabled.btn-solid-orange {
    background: #ccc;
    cursor: not-allowed;
}

/* Hide from printed output. Put this on anything that is chrome rather than content — buttons, filter bars.
   Reusable on purpose: this file had no print rules at all before, so this is the seed of them.

   It works inside jqprint too, which is how the DWT Submission Detail popup prints. jqprint copies every
   <link> into its iframe with no media attribute, so an @media print block in this file activates there. */
@media print {
    .no-print {
        display: none !important;
    }

    /* Unwrap a MessageBox popup for paper. jqprint clones #Popout-Message *including* the inline
       width/height that System.js's ResizeMessageBox stamps on it, and copies our stylesheets with the media
       attribute stripped — so on paper the clone is still a fixed-height overflow box. Paged media has no
       scrollbars, so it simply CLIPS: without these rules the DWT Submission Details printout stopped after
       the first screenful and lost the whole Waste Items table.

       Every declaration needs !important. The heights and overflow are inline styles, and an author
       !important declaration is the only thing that outranks a normal inline one.

       width matters as much as height: 880px is about 9.2in at 96dpi, wider than A4 portrait's printable
       area, so a fixed width leaves the browser to scale or clip the page. */
    div#Popout-Message {
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* display:block rather than keeping the flex column: with an auto-height parent, flex:1 has no free space
       to distribute, and jqprint writes no doctype so the print document is quirks-mode. Taking flex out of
       the equation entirely is the safer choice on paper. */
    .modal-shell {
        height: auto !important;
        display: block !important;
    }

    /* The scroll container inside .modal-shell. On screen this is what holds the scrollbar (see the layout
       comment in DWT.js's RenderTransactionPreview); on paper it must not constrain anything. */
    .modal-scroll {
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    /* A payload with several waste items now runs to more than one sheet. Repeat the column headers and keep
       rows whole. Deliberately NOT page-break-inside:avoid on .results-box — the Waste Items box holds the
       entire table, so keeping it whole would push it to a fresh page and leave a large gap. */
    table.Grid thead {
        display: table-header-group;
    }

    table.Grid tr {
        page-break-inside: avoid;
    }

    /* ---- Submission Details popup: the Waste Items table on paper ----
       Everything below is scoped to #Popout-Message, which is the element jqprint clones. That keeps these
       rules out of a browser-native Ctrl+P on the list screens, which also use table.Grid — the two rules
       above are deliberately left unscoped because repeating a header and not splitting a row are wanted
       everywhere, whereas the colours below are specific to this document.

       ⚠️ Specificity trap: the screen rule is `table.Grid tr th` (0,1,3), so a print rule written as
       `table.Grid th` (0,1,2) would silently LOSE and the header would keep its screen styling. @media adds
       no specificity and the later source position only breaks ties. The id here makes these (1,1,3). */
    #Popout-Message table.Grid tr th {
        color: #01415a;
        /* The screen header is white-on-navy. Browsers suppress background colours in print by default, so
           the fill is dropped and the text has to carry the header on its own — and clearing the fill
           explicitly means the header cannot become blue-on-navy for anyone who ticks "print backgrounds". */
        background-color: transparent;
    }

    /* Pins the table to the document's normal text — the whole table, headers included.
       This is needed because the table is the ONLY text in this document with no font-size of its own, so on
       paper it depends entirely on inheritance, and the print path breaks that: jqprint writes no doctype, so
       its iframe is quirks mode, where the UA resets font-size AND font-family on <table>. Nothing in the
       author CSS opposes it — reset.css has had table/thead/tr/th/td deleted from its Meyer selector list
       (only caption, tbody, tfoot survive), so there is not one font declaration on a table anywhere in
       reset.css, 960.css or Layout.css. The cells therefore land on the UA default: 16px in a serif face
       rather than 10pt Arial. Note the size goes UP — what reads as "smaller" is the narrower, thinner serif
       at the same x-height, which is why font-family is not optional here.

       `inherit` rather than a hardcoded 10pt, so "the same as the normal text" stays true by construction if
       body's size ever changes. Applied to the cells as well as the table so it holds wherever the UA rule
       actually sits. No !important: it is not needed, and it would start overriding inline styles — which is
       what keeps the Hazardous/POPs sub-row at its deliberate inline 11px.

       Screen is unaffected and needs none of this: Site.Master carries an XHTML doctype, so the app renders in
       standards mode and the table inherits normally there. */
    #Popout-Message table.Grid,
    #Popout-Message table.Grid th,
    #Popout-Message table.Grid td {
        font-size: inherit;
        font-family: inherit;
    }

    /* Values black; the field labels elsewhere in the popup stay blue. Two things protect them: fld() renders
       its label inside a div.preview-grid, never a <td>, and its colour is an inline style. Do NOT add
       !important here — that would start overriding those inline colours. */
    #Popout-Message table.Grid tr td {
        color: #000000;
    }

    /* Keeps a waste item's row together with its Hazardous/POPs sub-row: DWT.js emits one <tbody> per item
       precisely so this rule has a row group to hold. Chosen over avoiding a break inside the whole section —
       a 7-item table cannot fit on one page, so that would only push the table to the next sheet and leave a
       large gap before breaking it anyway. */
    #Popout-Message table.Grid tbody {
        page-break-inside: avoid;
    }

    /* Closes the box border on both sides of a page break, so a split table reads as two closed boxes rather
       than one with an open bottom and an open top. `slice` is the default, which draws the border once around
       the whole fragmented box.
       ⚠️ Browser support for this in PAGED fragmentation is patchy — worth checking on the target browser
       rather than assuming. The repeated thead already closes the top of the continuation. */
    #Popout-Message .results-box {
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
}

/* ---- Compact action buttons for table.Grid rows ----
   The .btn-solid-* classes above are all modal-footer scale (8-12px padding) and are used only in footers
   and toolbars — nothing existed that fits a Grid cell, whose padding is 7px. Shape is separated from
   colour so another grid can pick either variant.

   Apply to an <a>, not a <button>: an anchor is the convention for a row action everywhere in this app,
   and a default-type <button> inside Site.Master's <form runat="server"> posts the page back.

   Every colour rule below is written as a.btn-grid-*:link / :visited / :hover rather than as a bare class,
   and it has to be. `a:link, a:visited { color: #0a728f }` at the top of this file has specificity (0,1,1)
   and beats a single class (0,1,0) — so a plain `.btn-grid-navy { color: #fff }` would silently lose and
   render teal text on navy. Likewise `a:hover { color: #f49600 }` beats a bare class but loses to
   a.btn-grid-navy:hover. */
.btn-grid {
    display: inline-block;
    padding: 4px 10px;
    font-size: 9pt;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn-grid+.btn-grid {
    margin-left: 6px;
}

/* Primary. #01435b is the Grid header navy, so the buttons agree with the table they sit in — note this
   file carries a second, near-identical navy (#01415a) on input[type=button]. */
.btn-grid-navy {
    background: #01435b;
    border: 1px solid #01435b;
}

a.btn-grid-navy:link,
a.btn-grid-navy:visited {
    color: #fff;
}

a.btn-grid-navy:hover {
    background: #f49600;
    border-color: #f49600;
    color: #fff;
}

/* Secondary/attention. #B20000 is this app's existing destructive red. */
.btn-grid-danger {
    background: #fff;
    border: 1px solid #B20000;
}

a.btn-grid-danger:link,
a.btn-grid-danger:visited {
    color: #B20000;
}

a.btn-grid-danger:hover {
    background: #f49600;
    border-color: #f49600;
    color: #fff;
}

/* ---- Upload area ---- */
.upload-area {
    border: 2px dashed #e5e5e5;
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    margin-bottom: 16px;
    cursor: pointer;
    transition: border-color .3s;
}

.upload-area:hover {
    border-color: #f49600;
}

/* ---- Create Account OCR: mobile capture control ----
   The mobile tap-zone is hidden by default; on touch devices (detected once at
   page load in Application.js, which stamps .touch-device on the document root)
   it replaces the desktop scan button + drag-and-drop upload area. */
.ocr-mobile-capture {
    display: none;
}

.touch-device .ocr-desktop-scan {
    display: none;
}

.touch-device .ocr-mobile-capture {
    display: block;
}




/* Transaction/Sale line image popup: hide the desktop Scan/Capture (TWAIN)
   button and its "OR" separator on touch devices — the iframe upload area
   already offers native Camera/Library capture there. */
.touch-device .scan-capture-desktop {
    display: none;
}

/* ---- Info / results / error boxes ---- */
.info-box {
    display: none;
    text-align: center;
    padding: 16px;
    background: #f0f8ff;
    border-radius: 4px;
    margin-bottom: 16px;
    border: 1px solid #01415a;
}

.results-box {
    display: none;
    background: #f0f8ff;
    padding: 16px;
    border: 1px solid #01415a;
    border-radius: 4px;
    margin-bottom: 16px;
    margin-top: 16px;
}

.error-box {
    display: none;
    background: #ffe6e6;
    padding: 12px;
    border: 1px solid #ff6666;
    border-radius: 4px;
    margin-bottom: 16px;
}

/* ---- Results grid ---- */
.preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ---- Utilities ---- */
.hidden {
    display: none !important;
}

.w-100 {
    width: 100%;
}

.accent-text {
    color: #f49600;
    font-weight: 700;
}

/* Loading state for buttons (works on .btn-solid-orange / .btn-solid-grey etc.) */
.btn-loading {
    position: relative;
    padding-left: 36px !important;
    /* room for spinner on the left */
    pointer-events: none;
    opacity: 0.95;
    cursor: wait;
}

.btn-loading::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnspin .8s linear infinite;
}

/* keep orange look while disabled during loading */
.btn-solid-orange.btn-loading[disabled] {
    background: #f49600 !important;
}

.btn-solid-grey.btn-loading::after {
    border-color: rgba(0, 0, 0, 0.25);
    border-top-color: rgba(0, 0, 0, 0.65);
}

@keyframes btnspin {
    to {
        transform: rotate(360deg);
    }
}




.calendar-table table th,
.calendar-table table td {
    min-width: 26px !important;
    width: 28px !important;
}



.table-arrow {
    height: 24px;
    width: 24px;
}


table.content-vertical-middle td {
    vertical-align: middle;
}


/*Stock Module*/

#Stock-List input[type="button"] {
    padding: 7px 10px 7px 10px !important;
}


/* 2026 Photo Upload Modal*/


.UploadLineImage {
    position: relative;
    height: 100%;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.UploadLineImage:has(span) {
    margin-top: 3px;
}

.UploadLineImage span {
    position: absolute;
    background-color: #f49600;
    color: #fff;
    top: -5px;
    right: -5px;
    border-radius: 50%;
    border: 1px solid #fff;
    overflow: hidden;
    padding: 2px;
    font-size: 10px;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    /*width: 2rem;
        height: 2rem;*/
    font-weight: 600;
    display: inline-flex;
    min-width: 1em;
    line-height: 1;
}

.image-upload-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.image-upload-modal h2 {
    margin: 0 0 12px 0;
    flex-shrink: 0;
}

.image-upload-modal .upload-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex: 1;
    min-height: 0;
    padding-left: 10px;
}

.image-upload-modal .upload-max-uploaded {
    width: 20%;
    margin: auto 0;
    text-align: center;
    display: none;
}

.image-upload-modal:has(.image-card:nth-of-type(8)) .upload-row-scan {
    display: none;
}

.image-upload-modal:has(.image-card:nth-of-type(8)) .upload-max-uploaded {
    display: block;
}

.image-upload-modal .upload-row-scan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    margin: auto 0;
    width: 30%;
    text-align: center;
}

.image-upload-modal .upload-row-scan p {
    margin: 0;
    font-size: 20px;
}

.image-upload-modal .image-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    border-left: 1px solid silver;
    padding-left: 16px;
}

.image-upload-modal #image-display {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    width: 100%;
}

.image-upload-modal #image-display:has(.no-images-placeholder) {
    grid-template-columns: 1fr;
    height: 100%;
}

.image-upload-modal #image-display .no-images-placeholder {
    text-align: center;
    font-size: 18px;
    align-content: center;
}

.image-upload-modal #image-display .image-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.image-upload-modal #image-display .image-card a.LightBox {
    height: 100%;
    display: flex;
}

.image-upload-modal #image-display .image-card a.LightBox img {
    width: 100%;
    display: block;
    margin: auto;
}

.image-upload-modal #image-display .image-card button {
    position: absolute;
    top: 5px;
    right: 5px;
}

/* .image-upload-modal #image-display .image-card .image-details {
                padding: 6px 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                margin-top: auto;
            }

                .image-upload-modal #image-display .image-card .image-details h3 {
                    margin: 0;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }*/



/*
    Home Banner - Ignore when merge to DWT Branch Blazor Project as already existing
*/

.home-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #01435b 0%, #01526d 100%);
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    color: #fff;
    animation: bannerFadeIn 0.4s ease;
    border: 4px solid #fff;
    box-shadow: 2px 2px 4px 6px rgba(0, 0, 0, 0.3);
    margin-top: 15px;
    min-height: 140px;
}

.home-banner__icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
}

.home-banner__content {
    flex: 1;
}

.home-banner__content h3 {
    color: #fff;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 8px;
}

    .home-banner__content p,
    .home-banner__content div {
        color: rgba(255, 255, 255, 0.92);
        margin-bottom: 10px;
    }

.home-banner__content a {
    color: #f49600;
}

.home-banner__details {
    display: none;
    margin-top: 8px;
}

#banner-expand,
#banner-minimize {
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.8;
    font-size: 0.9em;
    display: inline-block;
    color: #f49600;
    font-weight: bold;
}

#banner-expand:hover,
#banner-minimize:hover {
    opacity: 1;
}

/*
    Home Banner Carousel — multi-message rotation, mirrors MetalTrack.Blazor's
    _components.scss .home-carousel / .home-banner__expand-toggle
*/

.home-carousel {
    margin-bottom: 15px;
}

.home-carousel .home-banner {
    margin-top: 0;
    margin-bottom: 0;
}

.home-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 18px;
}

.home-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(1, 67, 91, 0.3);
    cursor: pointer;
    padding: 0;
}

.home-carousel__dot.active {
    background: #01435b;
}

.home-banner__expand-toggle {
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.8;
    font-size: 0.9em;
    display: inline-block;
    color: #f49600;
    font-weight: bold;
}

.home-banner__expand-toggle:hover {
    opacity: 1;
}