/* Brand palette sampled from Images/myaccount_logo.gif: the navy wordmark, the
   blue of the drop, its highlight, and the neutral tint already in the artwork. */
:root {
    --paraco-navy: #002F5F;
    --paraco-blue: #0073CF;
    --paraco-sky: #63B1E5;
    --paraco-tint: #F2F4F7;
    /* Neutral rule colour for the extranet chrome: borders that need to separate
       things without announcing themselves. */
    --paraco-line: #C7CFD8;
}

/* Paraco brand button. The two standalone password pages (ExtranetAdminPassword,
   ExtranetCustomerResetPassword) keep their own copy: they use no master page and
   link no stylesheet. */
.btn-paraco {
    background-color: var(--paraco-navy, #002F5F);
    border-color: var(--paraco-navy, #002F5F);
    color: #fff;
}

.btn-paraco:hover, .btn-paraco:focus {
    background-color: var(--paraco-blue, #0073CF);
    border-color: var(--paraco-blue, #0073CF);
    color: #fff;
}

/* Coloured RadButtons for the maintenance edit forms: red for Delete, green for Save,
   in Bootstrap's danger/success palette. The Buying Groups edit page used to colour
   these through BackColor and ForeColor set to the same value, so once the Bootstrap
   skin honoured both the captions were painted red on red and green on green and
   vanished (Ian, 27545929). Telerik's skin styles .RadButton itself, hence the
   !important, as on .login-card below. The .rbDecorated rule covers the Classic
   render mode, where the caption sits on an inner input. */
.extranet-theme .RadButton.rb-danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.extranet-theme .RadButton.rb-danger:hover,
.extranet-theme .RadButton.rb-danger:focus {
    background: #bb2d3b !important;
    border-color: #b02a37 !important;
}

.extranet-theme .RadButton.rb-success {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}

.extranet-theme .RadButton.rb-success:hover,
.extranet-theme .RadButton.rb-success:focus {
    background: #157347 !important;
    border-color: #146c43 !important;
}

.extranet-theme .RadButton.rb-danger .rbDecorated,
.extranet-theme .RadButton.rb-success .rbDecorated {
    color: #fff !important;
}

/* Field borders. Telerik's Lightweight inputs and Bootstrap's .form-control both
   default to a very pale grey that is hard to aim at, especially on the dense
   maintenance forms (Ian, 27419137). Scoped to .extranet-theme so the customer
   pages keep the styling they were signed off with. */
.extranet-theme .form-control,
.extranet-theme .form-select,
.extranet-theme input.riTextBox,
.extranet-theme .RadPicker input.riTextBox,
.extranet-theme .rddlInner,
.extranet-theme .RadDropDownList .rddlInner,
.extranet-theme .riSingle,
.extranet-theme textarea {
    border: 1px solid #7A8899;
}

.extranet-theme .form-control:focus,
.extranet-theme .form-select:focus,
.extranet-theme input.riTextBox:focus,
.extranet-theme textarea:focus {
    border-color: var(--paraco-blue, #0073CF);
    box-shadow: 0 0 0 .2rem rgba(0, 115, 207, .2);
    outline: none;
}

/* Wide reports: the grid scrolls sideways on its own, the page scrolls up and down.
   This started as a bounded box (max-height plus overflow), which kept the horizontal
   scrollbar on screen but gave the report a second vertical scrollbar right next to the
   browser's - Ian objected to that, reasonably. The height cap is gone, so there is one
   vertical scrollbar again (the browser's), and paraco.js pins a horizontal scrollbar to
   the bottom of the window while a wide grid is in view, so you never have to scroll to
   the end of a long report to reach it (Ian, 27419137).
   Trade-off: with no height cap the box no longer scrolls vertically, so a sticky column
   header has nothing to stick to - the header scrolls away on a 100-row page. */
.extranet-theme .table-responsive {
    overflow-x: auto;
}

/* The paging controls and the export buttons, held in view while the report is scrolled
   sideways. The wrapper is added by paraco.js: sticky only holds a box that is narrower
   than the area it scrolls in, and the pager and command rows both span the full width of
   the table, so there is nothing for the browser to hold. inline-flex is what sizes the
   wrapper to its contents; the parts inside are floated blocks, which as flex items simply
   line up in a row. */
.extranet-theme .table-responsive .grid-row-pin {
    position: sticky;
    left: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}

/* The sticky horizontal scrollbar. A thin strip pinned to the bottom of the window,
   holding a spacer as wide as the grid; paraco.js keeps its scroll position and the
   grid's in step, in both directions. */
.extranet-theme .sticky-hscroll {
    position: sticky;
    bottom: 0;
    z-index: 4;
    overflow-x: auto;
    overflow-y: hidden;
    height: 17px;
    background-color: #fff;
    border-top: 1px solid var(--paraco-line, #C7CFD8);
    scrollbar-width: thin;
}

.extranet-theme .sticky-hscroll > div {
    height: 1px;
}

/* The grid's own horizontal scrollbar would be a second, redundant bar sitting at the
   end of a long table. Hidden only once the strip is actually in place, so if the script
   does not run for any reason the native bar is still there to scroll with. */
.extranet-theme .table-responsive.has-sticky-hscroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.extranet-theme .table-responsive.has-sticky-hscroll::-webkit-scrollbar {
    height: 0;
}

/* Grid popup edit form ("Request Details"). Telerik positions this absolutely with an
   inline pixel width, so on a narrow window it sits off to one side and overflows.
   Pin it to the centre of the viewport and let it size itself, overriding the inline
   style. Ian/Christian, 27419137. */
.rgEditPopup {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%);
    /* Anchored near the top rather than vertically centred: a popup taller than the
       window would otherwise hang off both ends, putting the last fields and the
       Close button out of reach on a short screen. Height is capped and forced to
       auto so it beats the inline height Telerik measures onto the panel. */
    top: 1.5rem !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 3rem) !important;
    width: 640px !important;
    max-width: 94vw !important;
    /* overflow-y: scroll rather than auto - the track is always drawn, so it is obvious
       there is more below the fold instead of the last row just looking clipped.
       !important is required: the Telerik skin stylesheet is registered after this file
       and its own overflow rule would otherwise win, leaving the panel clipped with no
       way to reach the last fields. */
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #8a94a0 #eef1f4;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
    z-index: 8000;
}

/* Webkit/Chromium needs its own selectors to show a visible track. */
.rgEditPopup::-webkit-scrollbar {
    width: 12px;
}

.rgEditPopup::-webkit-scrollbar-track {
    background-color: #eef1f4;
}

.rgEditPopup::-webkit-scrollbar-thumb {
    background-color: #8a94a0;
    border: 3px solid #eef1f4;
    border-radius: 6px;
}

/* Keep the title bar (with its X) and the Close button visible while the body scrolls. */
.rgEditPopup .rgHeader {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
}

.rgEditPopup .request-detail-table {
    width: 100%;
    /* clears the sticky Close bar so the final row is never stuck behind it */
    margin-bottom: 2.75rem;
}

.rgEditPopup .request-detail-table td {
    padding: .15rem .35rem;
    word-break: break-word;
}

.request-detail-actions {
    position: sticky;
    bottom: 0;
    padding: .5rem .35rem;
    text-align: right;
    border-top: 1px solid #dee2e6;
    background-color: #fff;
}

/* Grid row "view details" icon button. */
.view-details-link {
    color: var(--paraco-blue, #0073CF);
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
}

.view-details-link:hover, .view-details-link:focus {
    color: var(--paraco-navy, #002F5F);
}

/* Extranet theming. Scoped to .extranet-theme (set by Site.Master.cs) so the
   customer-facing pages keep their own look.
   Deliberately quiet: this is a back-office tool staff read data in all day, so the
   navigation is drawn with light grey rules and a single navy accent marking whatever
   is current - never a filled brand-colour block, and never bold on everything at once.
   The first pass did all three (filled navy section tab, filled navy sidebar item,
   semibold on every item) and read as "in your face" next to the data (Ian, 27419137).
   --paraco-line is that light rule; the brand colours stay for accents and text. */
.extranet-theme .nav-tabs {
    border-bottom-color: var(--paraco-line, #C7CFD8);
}

.extranet-theme .nav-tabs .nav-link {
    color: var(--paraco-navy, #002F5F);
    font-weight: 600;
    border-top: 2px solid transparent;
}

.extranet-theme .nav-tabs .nav-link:hover:not(.active) {
    background-color: var(--paraco-tint, #F2F4F7);
    border-top-color: var(--paraco-line, #C7CFD8);
}

.extranet-theme .nav-tabs .nav-link.active {
    color: var(--paraco-navy, #002F5F);
    font-weight: 600;
    border-top-color: var(--paraco-navy, #002F5F);
}

/* Sidebar section menus (Reporting, Maintenance, Website Settings, Customers). The four
   controls used to carry a copy of this rule in an inline <style> block; it lives here
   once so all four stay in step. The current page is marked by a navy edge and a tint,
   not by a filled navy block. */
.extranet-theme .extranet-side-menu .list-group-item {
    color: var(--paraco-navy, #002F5F);
    border-color: var(--paraco-line, #C7CFD8);
    border-left: 3px solid transparent;
}

.extranet-theme .extranet-side-menu .list-group-item:hover:not(.active) {
    background-color: var(--paraco-tint, #F2F4F7);
    color: var(--paraco-navy, #002F5F);
}

.extranet-theme .extranet-side-menu .list-group-item.active {
    background-color: var(--paraco-navy, #002F5F);
    border-color: var(--paraco-navy, #002F5F);
    color: #fff;
    font-weight: 600;
}

/*
 * Paraco My Account - site stylesheet.
 * Typography plus the site's own classes. Was text.css, the typography half of the fluid24
 * grid framework, which has been retired.
 */

/* 
 12px font size, with 18px line height 
 1em / 16px x 12px = 0.750em
 18 / 12 = 1.5em
*/
body {
    font: 0.75em/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

/*
 1em now = 12px
 h1 = 18px, 18px/12px = 1.5em
 line-heigh = 18px/18px = 1em 
 ...
 h1=18px, h2=16px, h3=14px
 for more help: http://pxtoem.com/ 
 */
h1 {
    font-size: 1.5em;
    line-height: 1em;
    margin-bottom: 1em;
}

h2 {
    font-size: 1.333em;
    line-height: 1.125em;
    margin-bottom: 1.125em;
}

h3 {
    font-size: 1.167em;
    line-height: 1.285em;
    margin-bottom: 1.285em;
}

h4 {
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 1.5em;
}

/* Text elements */
p, ul, blockquote, pre, code, tt, td, th, label {
    margin: 0 0 1.5em 0;
    font-size: 1em;
    line-height: 1.5em;
}

pre, code, tt {
    font-family: 'andale mono', 'lucida console', monospace;
}

/* misc */

.textpageheader {
    font-size: 1.2em;
    line-height: 1.6em;
    margin-bottom: 0em;
    border-top: solid 2px #e3e3e3;
    border-left: solid 2px #e3e3e3;
    border-right: solid 2px #e3e3e3;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 30px;
}

.textpagebody {
    border-left: solid 2px #e3e3e3;
    border-right: solid 2px #e3e3e3;
    border-bottom: solid 2px #e3e3e3;
    padding: 10px;
}

.textextranetpageheader {
    font-size: 1.4em;
    line-height: 1.9em;
    margin-bottom: 0em;
    font-weight: bold;
    background-color: var(--paraco-tint, #F2F4F7);
    border-top: solid 2px var(--paraco-navy, #002F5F);
    border-left: solid 2px var(--paraco-navy, #002F5F);
    border-right: solid 2px var(--paraco-navy, #002F5F);
    padding-left: 10px;
}

.textsectionheader {
    font-size: 1.2em;
    line-height: 1.6em;
    margin-bottom: 0em;
    font-weight: bold;
    text-decoration: underline;
}

.textlabel {
    font-size: 1.0em;
    line-height: 1.3em;
    margin-bottom: 0em;
    font-weight: bold;
}

.sidenote {
    font-size: 0.8em;
    line-height: 1.0em;
    margin-bottom: 0em;
    font-weight: lighter;
}

.center {
    text-align: center;
}

a.whitelink, a.whitelink:link, a.whitelink:hover, a.whitelink:visited {
    font-size: 1.0em;
    color: #ECECF4;
    font-weight: bold;
    text-decoration: underline;
}

hr {
    border: 0 #ccc solid;
    border-top-width: 0.06em;
    clear: both;
    height: 0;
}

#BGMain h1 {
    margin-top: 0px;
    margin-bottom: 5px;
    font-size: 15px;
    display: inline-block;
}

#BGMain h2 {
    margin-bottom: 0px;
    font-size: 15px;
    display: inline-block;
}

.container-full {
    max-width: none !important;
    width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}
/*
 * DevExpress ships its own stylesheet through DXR.axd, which sets Tahoma 9pt on every
 * control it renders (.dxeBase and friends). That is why pages holding the last DevExpress
 * controls showed a different font from the rest of the site. Keep them on the page font
 * until those controls are gone.
 */
[class^="dxe"],
[class*=" dxe"],
[class^="dxb"],
[class*=" dxb"],
[class^="dxp"],
[class*=" dxp"],
[class^="dxtc"],
[class*=" dxtc"],
[class^="dxm"],
[class*=" dxm"] {
    font-family: inherit !important;
    font-size: inherit !important;
}

/*
 * asp:CheckBox and asp:RadioButton render an <input> immediately followed by its <label>
 * with nothing between them, so the caption sits flush against the box. Bootstrap's own
 * form-check classes cannot be applied to those controls from markup (ASP.NET puts CssClass
 * on a wrapping span once Text is set), so give every such pair the gap here.
 */
/* A small negative baseline offset sits the box on the text baseline. Aligning both sides
   to "middle" does not work: the box is ~13px while the label is 16px Barlow at 1.5 line
   height, so their middles are not the same place and the box drops below the caption. */
input[type="checkbox"],
input[type="radio"] {
    vertical-align: -0.15em;
    margin: 0;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    margin-left: .4rem;
    margin-bottom: 0;
}

/* CheckBoxList / RadioButtonList render each pair inside a table cell or list item. */
table.aspNetDisabled input[type="checkbox"] + label,
td > input[type="checkbox"] + label,
td > input[type="radio"] + label {
    margin-right: .75rem;
}

/* Fields that were pink DevExpress editors purely to flag "required". */
.setting-required .riTextBox,
.setting-required input.riTextBox {
    background-color: #FFF3F3;
}

/* ============================================================================
   Page-owned sections, centralised from per-page <style> blocks (2026-08-21).
   Selectors are class-scoped to their owning page's markup, so nothing here
   leaks to other pages even though site.css is linked site-wide.
   ============================================================================ */

/* --- ExtranetCustomer.aspx --- */
.account-grid tr.rgRow,
        .account-grid tr.rgAltRow {
            cursor: pointer;
        }

/* --- ExtranetLogin.aspx --- */
.login-card {
            max-width: 460px;
        }

        /* Paraco navy on the card's buttons, matching the password gate pages. Telerik's skin
           styles .RadButton itself, hence the explicit override. */
        .login-card .RadButton {
            width: 100%;
            background: #002F5F !important;
            border-color: #002F5F !important;
            color: #fff !important;
        }

        .login-card .RadButton:hover,
        .login-card .RadButton:focus {
            background: #06335D !important;
            border-color: #06335D !important;
        }

        .login-card .RadInput,
        .login-card .riSingle {
            width: 100%;
        }

/* --- BranchEdit, EmployeeEdit + BuyingGroupsEdit button rows --- */
/* The buttons used to sit in table cells narrow enough to wrap a caption, which made
           one button taller than its neighbours. BuyingGroupsEdit joined in 27545929: its
           two Bootstrap columns stacked Delete straight on top of Cancel and Save on phones. */
        .extranet-theme .form-actions{
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            align-items: stretch;
            margin-top: 1rem;
        }

        .extranet-theme .form-actions .RadButton{
            white-space: nowrap;
        }

        .extranet-theme .form-actions .push-right{
            margin-left: auto;
        }

/* --- Extranet/PromoCodes/Default.aspx --- */
.promo-grid .rgRow a,
.promo-grid .rgAltRow a,
.promo-grid .rgEditRow a,
.promo-grid tr.rgEditRow a,
.promo-grid tr.rgHoveredRow a,
.promo-grid tr.rgActiveRow a,
.promo-grid .rgFooter a,
.promo-grid .rgEditForm a {
            color: #000;
            text-decoration: underline;
        }

/* --- Extranet/ReportPages/PrebuyVisits.aspx --- */
.funnelsummary { margin: 10px 0; }
        .funnelsummary span.stat { display: inline-block; margin-right: 20px; font-weight: bold; }
        .funnelsummary span.lbl { font-weight: normal; color: #555; }

        /* RadGrid renders a <table>, which will not shrink below its content width. A Bootstrap
           column is a flex item defaulting to min-width:auto, so the column grows to fit the table,
           overlaps the menu and pushes the page sideways -- the same defect the other report pages
           in this folder have. min-width:0 lets the column shrink; overflow-x keeps the spill inside
           the grid's own scrollbar instead of the page's. */
        .gridwrap { min-width: 0; width: 100%; overflow-x: auto; }
        .reportcol { min-width: 0; }

        /* Keep each filter label with its own input. Without this the label and the control wrap
           independently once the row runs out of room, which reads as a broken layout. */
        .filterrow { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 6px; }
        .filterrow .filteritem { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
        .filterrow label { margin: 0; }

/* ============================================================================
   Extranet density (Ian, 27419137): the old pages were 12px-era; Bootstrap
   components size in rem against the 16px browser root, which read as "browser
   zoom" next to the old build. Shrinking the root on extranet pages scales
   every rem-sized control down together - the reverse of that zoom. Legacy
   text is re-anchored so it stays at its old 12px instead of shrinking too.
   ============================================================================ */
html:has(.extranet-theme) {
    font-size: 14px;
}

html:has(.extranet-theme) body {
    /* 1rem tracks the extranet root above, so there is ONE size dial for the whole
       extranet. 12px matched prod exactly (Ian: "same as prod"); 14px is the middle
       between the old 12px build and the 16px framework default. */
    font-size: 1rem;
}

/* Numeric spin buttons. The skin renders the up/down column as bare 16px glyphs on a
   white background floating at the far end of the input, which reads as a rendering
   glitch on wide fields (Website Settings). Turn the column into an attached
   full-height button segment, like a Bootstrap input-group addon. */
.extranet-theme .riContSpinButtons .riSelect {
    top: 1px !important;
    right: 1px !important;
    height: calc(100% - 2px) !important;
    width: 26px !important;
    background-color: var(--paraco-tint, #F2F4F7);
    border-left: 1px solid #7A8899;
    border-radius: 0 .25rem .25rem 0;
    overflow: hidden;
}

.extranet-theme .riContSpinButtons .riSelect a.riUp,
.extranet-theme .riContSpinButtons .riSelect a.riDown {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 50% !important;
    border: 0;
    background-color: transparent;
}

.extranet-theme .riContSpinButtons .riSelect a.riUp {
    border-bottom: 1px solid var(--paraco-line, #C7CFD8);
}

.extranet-theme .riContSpinButtons .riSelect a.riUp:hover,
.extranet-theme .riContSpinButtons .riSelect a.riDown:hover {
    background-color: #DDE4EC;
}