body {
    padding-top: 0px;
    padding-bottom: 0px;
}

.bodyLogin {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    /* Clears the fixed footer (below) so scrolled-to-bottom content isn't hidden under it.
       Larger on mobile: the footer's privacy/terms sentence wraps to more lines on
       narrow screens than the single line it holds at md+.

       #126: 130px -> 95px on mobile. This is not decoration -- it is in-flow space, so on the
       document screen (where the viewer is sized from what the chrome leaves over) every px
       here is a px the client does not get to read their form in. The footer at its mobile
       size below is ~73px tall at three lines, so 95px still clears it with room to spare;
       130px was slack. Measure the footer before cutting this further. */
    padding-bottom: 95px;
}

@media (min-width: 768px) {
    .body-content {
        padding-bottom: 70px;
    }
}

.completeCheck {
    margin-top: 10px
}

.bg-color {
    background-color: #3b3a39
}

.textProgress {
   font-weight:bold
}

.navfont1 {
    color: white;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,

textarea {
    max-width: 280px;
}


/* Custom styling for positioning and color */
.header .row:first-child {
    text-align-last: right; /*Align first row to the right */
}

.header {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Light border at the bottom */
}

.main-header {
    background-color: #e9ecef; /* Lighter background for the main header */
    color: #343a40; /* Darker text for contrast */
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

    /* Logo sits beside the firm name/address instead of stacked above a
       centered block -- keeps the header's height close to the logo's own
       size rather than four centered lines of text. */
    .main-header .header-logo {
        max-height: 48px;
        width: auto;
        flex-shrink: 0;
    }

    /* header-logo-zone and header-user-block both grow equally to absorb the row's
       leftover space -- since neither side's actual content determines how much space
       it's given, header-firm-info (which doesn't grow) always ends up centered on the
       true midpoint, not just wherever space happens to be left over. */
    .main-header .header-logo-zone {
        flex: 1 1 0;
        justify-content: flex-start;
    }

    .main-header .header-user-block {
        flex: 1 1 0;
        justify-content: flex-end;
    }

    .main-header .header-firm-info {
        flex: 0 1 auto;
        text-align: center;
    }

    .main-header h1 {
        font-size: 1.5rem; /* Compact company name -- was 2.8rem when centered/stacked */
        font-weight: 700;
        margin-bottom: 0.1rem;
    }

    .main-header .header-firm-meta {
        font-size: 0.9rem;
        opacity: 0.85;
        column-gap: 0.5rem;
    }

    .main-header .header-sep {
        opacity: 0.5;
    }

/* Mobile: force logo / firm name+address / logout into one row instead of each
   wrapping onto its own full-width line (the desktop layout has room for all
   three side by side; mobile doesn't, so this trims and truncates instead of
   letting flex-wrap stack them). Contact (phone/email) is dropped here -- name
   + address are what needs to stay visible in this little horizontal space. */
@media (max-width: 575.98px) {
    /* !important: markup uses Bootstrap's flex-wrap utility (flex-wrap: wrap !important)
       on both of these, which would otherwise win over a plain override here. */
    .main-header .container-fluid {
        flex-wrap: nowrap !important;
    }

    /* Desktop centers header-firm-info by giving header-logo-zone and header-user-block
       equal flex:1 growth; mobile has no room for that, so both are reset to hug their own
       content instead of stretching, and header-firm-info takes the leftover space
       (truncated) rather than sitting centered in the middle of it. */
    .main-header .header-logo-zone {
        flex: 0 0 auto !important;
        margin-right: 0.5rem;
    }

    .main-header .header-logo {
        max-height: 32px;
    }

    .main-header .header-firm-info {
        flex: 1 1 auto !important;
        min-width: 0; /* required for the ellipsis truncation below to actually kick in */
        overflow: hidden;
        text-align: left !important;
        margin-right: 0.5rem;
    }

    .main-header h1 {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main-header .header-firm-meta {
        font-size: 0.75rem;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        min-width: 0;
    }

    .main-header .header-address {
        display: block; /* flex items default to min-width:auto (won't shrink below content
                            size) unless min-width is reset -- required for ellipsis below */
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main-header .header-contact {
        display: none;
    }

    .main-header .header-user-block {
        flex: 0 0 auto !important;
    }
}

.logout-link {
    color: #343a40;
    transition: color 0.3s ease;
}

    .logout-link:hover {
        color: #0056b3 !important; /* Darker blue on hover, readable on the light header */
    }


.linkmenufont {
    font-size: 120%;
    font-weight1: bold
}

footer {
    /* Pinned to the viewport bottom at all times (not just pushed down on short pages).
       .body-content's padding-bottom (above) reserves room so scrolled content never
       ends up hidden underneath this. */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    padding: 8px 15px;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
    z-index: 1020; /* above page content, below Bootstrap modals (1055) */
    text-align:center
}

    footer p {
        margin-bottom: 0; /* Remove default paragraph margin */
    }

/* #126: smaller print on phones. The footer is fixed, so its height is charged to every
   screen twice over -- once as the strip itself and once as the .body-content reservation
   that keeps content out from under it -- and on the document screen that comes straight
   off the height of the PDF the client is filling in. The links stay full size to tap:
   only the type shrinks, so nothing here reduces what is disclosed or how reachable it is. */
@media (max-width: 767.98px) {
    footer {
        padding: 6px 12px;
    }

    footer p {
        font-size: 0.8rem;
        line-height: 1.35;
    }
}

footer1 {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center
}

    footer1 p {
        margin-bottom: 0px; /* Remove default paragraph margin */
    }

/* Cases and Documents Section Styling */
.cases-section .bg-primary {
    background-color: #34495e !important; /* Ensure it matches the main header color */
    border-radius: 0.5rem 0.5rem 0 0; /* Rounded top corners */
    padding: 0.75rem 0;
    margin-bottom: 0; /* Remove default margin */
}

/* Cases list: no fixed height -- grows to fit however many cases there are.
   overflow-auto (Bootstrap utility, in markup) is harmless with no height
   constraint; it's what clips the list items' own corners to this container's
   rounded-bottom shape. */
.case-select {
    border-radius: 0 0 0.5rem 0.5rem; /* Rounded bottom corners */
    border-top: none; /* Connects flush with the blue "Cases" header above */
}

    /* Plain-text list feel rather than Bootstrap's default filled-button look:
       transparent background, normal weight/color, no blue "active" block. */
    .case-select .list-group-item {
        cursor: pointer;
        border-left: none;
        border-right: none;
        background-color: transparent;
        color: #343a40;
        font-weight: 400;
        text-align: left;
    }

    .case-select .list-group-item:first-child {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .case-select .list-group-item:hover {
        background-color: #f1f3f5; /* subtle hover tint, not a bold button hover */
        color: #343a40;
    }

    .case-select .list-group-item.active {
        background-color: #e9ecef; /* light tint marks the selection, not Bootstrap's blue */
        border-color: rgba(0, 0, 0, 0.125);
        color: #212529;
        font-weight: 600; /* bold reads as "selected" without needing a color change */
    }

@media (min-width: 768px) {
    .case-select {
        height: 60vh;
    }
}

.cases-section table thead th {
    background-color: #495e72; /* Slightly lighter shade for table header */
    color: #ffffff;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6; /* Add a subtle border */
}

.cases-section table {
    border-radius: 0.5rem;
    overflow: hidden; /* Ensures rounded corners apply to table content */
    border: 1px solid #e9ecef; /* Overall table border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for table */
}

/* Documents table isn't a DataTables instance (no responsive column-hiding is wired
   up), so this is done by hand: hide the lower-priority columns (Last Update, Note --
   3rd/4th of Name/Status/Last Update/Note, verified against the row markup
   casesDocs_lib.cs builds server-side) below the sm breakpoint, keeping Name + Status
   visible instead of relying on .table-responsive's horizontal scroll alone. */
@media (max-width: 575.98px) {
    .caseDocstbl th:nth-child(3),
    .caseDocstbl td:nth-child(3),
    .caseDocstbl th:nth-child(4),
    .caseDocstbl td:nth-child(4) {
        display: none;
    }
}

/* Chevron (row-toggle) reveals the columns hidden above, per row, via the sibling
   .row-details row casesDocs_lib.cs renders after each document row. Only relevant
   on mobile -- at sm+ the columns are already visible in the row itself. */
.row-toggle {
    display: none;
    margin-right: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.row-toggle.rotated {
    transform: rotate(90deg);
}

.row-details {
    display: none;
}

    .row-details.show {
        display: table-row;
    }

    .row-details td {
        background-color: #f8f9fa;
        font-size: 0.9rem;
    }

    .row-details div + div {
        margin-top: 0.25rem;
    }

@media (max-width: 575.98px) {
    .row-toggle {
        display: inline-block;
    }
}

/* DOCUMENT    */
.toolbar-container {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 1rem;
}

.toolbar-btn-group {
    display: inline-flex; /* Use inline-flex for horizontal alignment */
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center;
    justify-content: center;
    gap: 0.15rem; /* Even smaller space between icon and text */
    padding: 0.4rem 0.6rem; /* Smaller padding for smaller buttons */
    border-radius: 0.5rem; /* Slightly less rounded for smaller buttons */
    transition: all 0.3s ease-in-out; /* Smoother transitions */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Even lighter initial shadow */
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    min-width: 65px; /* Even smaller minimum width */
    border: 1px solid #e5e7eb; /* Light border for all buttons */
    background-color: #f9fafb; /* Consistent light grey background for most buttons */
    color: #4b5563; /* All text dark gray */
    position: relative;
    overflow: hidden;
}

    .toolbar-btn-group i {
        font-size: 18px; /* Even smaller icon size */
        color: #4b5563; /* All icons dark gray */
    }

    .toolbar-btn-group span {
        font-size: 0.75rem; /* Even smaller text size */
        white-space: nowrap;
    }

    .toolbar-btn-group:hover {
        background-color: #e0e7ff; /* Lighter blue on hover for most buttons */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Slightly larger shadow on hover */
        transform: translateY(-1px); /* Slight lift effect */
        border-color: #a1a1aa; /* Darker border on hover */
    }
    /* Remove specific hover effects for primary/save as all are same background */
    .toolbar-btn-group::before {
        display: none; /* Remove gradient effect */
    }

    /* Ensure no specific background/color overrides for btn-primary-custom, btn-secondary-custom */
    .toolbar-btn-group.btn-primary-custom,
    .toolbar-btn-group.btn-secondary-custom {
        background-color: #f9fafb; /* Override to light grey */
        color: #4b5563; /* Override to dark grey */
        border-color: #e5e7eb; /* Override to light border */
    }

        .toolbar-btn-group.btn-primary-custom i,
        .toolbar-btn-group.btn-secondary-custom i {
            color: #4b5563; /* Override to dark grey */
        }

    /* Specific style for the Save Document button - now distinct again */
    .toolbar-btn-group.btn-save-custom {
        background-color: #10b981; /* Green */
        color: #ffffff; /* White text */
        border-color: #059669; /* Darker green border */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Stronger shadow for save */
    }

        .toolbar-btn-group.btn-save-custom i {
            color: #ffffff; /* White icon for save button */
        }

        .toolbar-btn-group.btn-save-custom:hover {
            background-color: #059669; /* Darker green on hover */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Even larger shadow on hover */
            transform: translateY(-2px); /* More pronounced lift */
            border-color: #047857;
        }


.toolbar-separator {
    width: 1px;
    height: 25px; /* Even smaller height of the separator */
    background-color: #e5e7eb; /* Light gray separator */
    margin: 0 0.6rem; /* Even smaller spacing around separator */
}

/* #114: Review & Sign, the primary action on this page.

   Every other toolbar button is deliberately the same grey -- including
   btn-primary-custom, which is overridden back to it above -- so a button styled like
   them disappears among them, which is exactly what happened on first look. Orange
   rather than the Save button's green because it is the same orange as the "Sign Here"
   markers and the walkthrough pill: button, marker and pill are one affordance and
   should read as one. */
.toolbar-btn-group.btn-sign-custom {
    background-color: #F8A130;
    color: #000000;
    border-color: #d98614;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

    .toolbar-btn-group.btn-sign-custom i {
        color: #000000;
    }

    .toolbar-btn-group.btn-sign-custom:hover {
        background-color: #e8912a;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
        transform: translateY(-2px);
        border-color: #c67a12;
    }

/* #114: the Review & Sign walkthrough pill.

   Floating rather than in the toolbar because the toolbar is a static row above a 1600px
   viewer, so it has scrolled out of the window by the time the client is looking at a
   signature on page 3 -- and a control that walks them from one signature to the next has
   to stay reachable while they are down there.

   Orange to match the "Sign Here" markers it is steering the client towards (see
   Scripts/js/sd.signRibbons.js makeMarker); the two are one affordance and should read as
   one. The done state goes green, matching the Save button's #10b981 above. */
.sd-review-sign-pill {
    /* #142: absolute INSIDE .pdf-viewer-container, not fixed to the window.
       Fixed at right/bottom 1.5rem put it down in the footer, below the document it is
       steering the client through. The container is already the positioned ancestor the
       zoom pill pins to (#127), so this now floats over the bottom of the PDF itself.
       `right: 36px` is that pill's figure and for the same reason: it clears the viewer's
       own vertical scrollbar, which runs down the right edge of a full-width frame. */
    position: absolute;
    right: 36px;
    bottom: 12px;
    z-index: 100; /* same layer as the zoom pill; both sit over the viewer frame */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid #d98614;
    border-radius: 2rem;
    background-color: #F8A130;
    color: #000000;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

    .sd-review-sign-pill i {
        font-size: 1rem;
    }

    .sd-review-sign-pill:hover {
        background-color: #e8912a;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
        transform: translateY(-1px);
    }

    /* #142: #10b981 -> #15543B, the product owner's dark green. White text on it, and the
       same pairing is used by the toolbar's "All Signed" state below -- the two are one
       control in two places and must read as one. */
    .sd-review-sign-pill.sd-review-sign-pill-done {
        background-color: #15543B;
        border-color: #0f3c2a;
        color: #ffffff;
        cursor: default;
    }

        /* Disabled in the done state, so neutralise the hover lift rather than leaving a
           button that reacts to the pointer but does nothing. */
        .sd-review-sign-pill.sd-review-sign-pill-done:hover {
            background-color: #15543B;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
            transform: none;
        }

/* #142: the toolbar's Review & Sign button once every area is signed. Same dark green and
   white text as the pill's done state above -- the toolbar button and the pill are one
   control shown in two places, so they must not drift. Disabled, hence the neutralised
   hover: there is nowhere left to go. */
.toolbar-btn-group.btn-sign-custom.btn-all-signed,
.toolbar-btn-group.btn-sign-custom.btn-all-signed:hover {
    background-color: #15543B;
    border-color: #0f3c2a;
    color: #ffffff;
    cursor: default;
    transform: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    opacity: 1; /* it is disabled, and Bootstrap would otherwise fade the one green thing on the page */
}

    .toolbar-btn-group.btn-sign-custom.btn-all-signed i {
        color: #ffffff;
    }

/* On a narrow screen the pill would otherwise sit over the page-navigation area of the
   viewer. Centre it instead, where it covers margin rather than content. */
@media (max-width: 576px) {
    .sd-review-sign-pill {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

        .sd-review-sign-pill:hover {
            transform: translateX(-50%) translateY(-1px);
        }
}

/* Switch Styling (remains unchanged as it was already working) */
.form-switch .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 3em;
    height: 1.5em;
    background-color: #e5e7eb;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    outline: none;
    flex-shrink: 0;
}

    .form-switch .form-check-input:checked {
        background-color: #2563eb;
    }

    .form-switch .form-check-input::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 1.25em;
        height: 1.25em;
        background-color: #ffffff;
        border-radius: 9999px;
        transition: transform 0.2s ease-in-out;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .form-switch .form-check-input:checked::after {
        transform: translateX(1.5em);
    }
/* Responsive adjustments for button text */
@media (max-width: 767px) {
    .toolbar-btn-group span {
        display: none; /* Hide text on small screens for toolbar buttons */
    }

    .toolbar-btn-group {
        padding: 0.3rem; /* Even smaller padding for icon-only buttons */
        min-width: unset; /* Remove min-width for icon-only buttons */
    }

        .toolbar-btn-group i {
            margin-bottom: 0; /* No margin if text is hidden */
        }

    .form-check-label {
        font-size: 0.875rem; /* Smaller text for checkbox label on small screens */
    }

    .toolbar-separator {
        display: none !important; /* Hide separators on small screens */
    }
}

/* Message Box Styling */
#messageBox {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-size: 0.9rem;
}

    #messageBox.show {
        opacity: 1;
    }

/* #123: the viewer fills the window instead of being a fixed 1600px frame in a
   scrolling host page. The old height was the cause of the double scrollbar --
   the host page scrolled the tall frame while the viewer scrolled its own
   contents, so on a long document the client worked two scrollbars and which one
   a gesture drove depended on where the pointer was.

   The height comes from --sd-viewer-h, which sizeViewerToWindow() in
   Views/Documents/document.cshtml sets from the viewport minus everything else the
   page occupies, and keeps current on resize. The 78vh fallback covers the moment
   before the first measurement, and the case where the script doesn't run at all --
   a viewer slightly the wrong height still works, whereas one with no height at all
   collapses to nothing.

   min-height is the floor for when the measurement can't be satisfied. #126 dropped
   it from 420px to 240px, because 420px was defeating its own purpose: on a phone the
   measurement landed below it, so the floor won and the host page scrolled -- the
   double scrollbar #123 set out to remove. With the chrome trimmed (the rules below,
   the smaller footer above, and the document-name row gone) the measurement now lands
   around 400px on a 664px-tall phone, so the floor stops binding there and covers only
   the pathological case of chrome taller than the window -- where a scrollbar IS the
   right answer, since the alternative is a viewer too short to show anything. */
.pdf-viewer-container {
    height: var(--sd-viewer-h, 78vh);
    min-height: 240px;
    /* #127: the positioned ancestor the floating zoom pill pins to. */
    position: relative;
    background-color: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden; /* Ensure content stays within rounded corners */
    border: 1px solid #e5e7eb; /* Border for the viewer */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Subtle shadow for the viewer */
}

/* #123: fill the container above. RAD PDF renders the viewer frame with the legacy
   presentation attribute width="100%" (and the height from pdfWebControl1.Height)
   rather than a style. A presentation attribute sits in the presentational-hints
   origin -- the weakest there is -- so any author rule anywhere that sets a width or
   height on this element wins silently. Restating both as author !important
   declarations makes them unloseable.

   Necessary but NOT sufficient for the width: it is still a percentage resolved
   against a Bootstrap flex item, which is the combination WebKit gets wrong (the
   reported failures are all Safari -- PDF against the left edge, blank space to its
   right). Scripts/js/sd.radpdfFit.js measures the outcome and pins the frame in
   pixels when it falls short. Don't remove either half.
   See SuperDocs-End-User-Portal#459. */
#PdfWebControl1 {
    height: 100% !important;
    width: 100% !important;
    display: block;
}

/* #127: the floating zoom pill over the PDF, and its icon buttons.
   PORTED from the attorney portal's Content/sd-site.css (SuperDocs-End-User-Portal#566), where
   the same pill sits on both document screens. Same class names on purpose -- the two files
   should stay diffable, so if the look is changed there, change it here too.

   The pin is the only part that is ours. `right: 36px` is not arbitrary: it clears the viewer's
   own vertical scrollbar, which on this screen runs down the right edge of a full-width frame
   (#123 made it full-width). A pill at right:8px would sit on top of the scrollbar thumb. */
.sd-pdf-hover-toolbar {
    position: absolute;
    top: 12px;
    right: 36px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.92);
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 8px 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.sd-pdf-btn {
    background: transparent;
    border: none;
    padding: 5px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    transition: background 0.12s;
}

.sd-pdf-btn:hover {
    background: rgba(0,0,0,0.07);
}

/* #166: the pill's icons are Bootstrap Icons now, not 22x22 PNGs. An <img> was sized by its
   height/width attributes; a glyph has to be sized here or it inherits the body's font-size and
   comes out visibly smaller than the buttons it sits in.

   20px, not 22: the PNGs carried transparent padding inside their 22px box, so a 22px glyph reads
   noticeably heavier than the icons it replaced. line-height:1 stops the glyph's own leading
   pushing it off-centre inside the flex box.

   Deliberately NOT repeated in the 767.98px block below, which grows the button to 44px for touch:
   its comment is explicit that only the hit area grows and the icon stays put, so one rule here is
   the whole story. */
.sd-pdf-btn i {
    font-size: 20px;
    line-height: 1;
}

/* #127: two departures from the attorney portal's copy, both about this app's users being on
   phones far more than its firm users are.

   44px buttons, not 34px: 34 is below the ~44px touch-target guidance, and a mis-tap here zooms
   a form the client is part-way through filling in. The icon stays 22px -- only the hit area
   grows.

   And the pin comes in to 10px, because the 36px above buys clearance from a scrollbar that
   doesn't exist on a touch device: an overlay scrollbar takes no layout width, so out there the
   inset just reads as the pill floating oddly far from the corner. */
@media (max-width: 767.98px) {
    .sd-pdf-hover-toolbar {
        right: 10px;
    }

    .sd-pdf-btn {
        width: 44px;
        height: 44px;
    }
}

/* #129: kill the horizontal scrollbar on the document screen.
   (Found by the product owner in the DOM: the .row two levels above .pdf-viewer-container has
   left and right margins, and removing them removes the scrollbar.)

   WHY BOOTSTRAP'S USUAL ARITHMETIC DOESN'T APPLY HERE. A .row carries NEGATIVE side margins
   (margin-left/right: calc(-.5 * var(--bs-gutter-x)) = -12px) on the assumption that it sits in
   a .container/.container-fluid whose equal-and-opposite 12px padding cancels them -- the row
   deliberately hangs into the container's padding so a column's own padding lines its content up
   with the container's edge. That is why a .row inside a container normally overflows nothing.

   But Content/jd-site.css -- which loads AFTER this file and uses !important -- zeroes the
   padding on BOTH sides of that cancellation:

       body > div.container1.body-content            { padding-left/right: 0 !important }
       body > div.container1.body-content > div      { padding-left/right: 0 !important }

   The second selector matches this page's own .container-fluid (it is a direct child of
   .body-content). So the container has no padding to absorb the row's -12px, and .body-content
   has none either: the row ends up 12px past the viewport on each side, i.e. 24px of horizontal
   overflow and a small scrollbar.

   Zeroing the margins is the right end to fix: the columns' own 12px padding then provides the
   inset, which is what the container's padding would have done. Restoring padding to the
   container instead would mean fighting jd-site.css's !important, and would shift this page's
   content relative to every other page that rule was written for.

   Scoped to `> .row` -- the DIRECT rows, whose container has had its padding stripped. A row
   nested deeper sits inside a column that DOES have padding, so its negative margins are
   correct and must be left alone. No !important needed: this outranks plain `.row` on
   specificity. */
.sd-doc-page > .row {
    margin-left: 0;
    margin-right: 0;
}

/* #126: tighten the document screen's own vertical gaps where vertical space is scarce, so
   what's left over for the viewer clears its min-height and the page needs no scrollbar of
   its own.

   Keyed on max-HEIGHT as well as max-width, because height is the thing actually running out.
   A phone held landscape is ~390px tall but ~844px wide, so a width-only query would leave it
   with the full desktop chrome in a third of the height -- the worst case of the lot.

   Scoped to .sd-doc-page (document.cshtml) rather than applied to .row/.mb-3 generally: the
   documents list uses the same markup and is a page that is *supposed* to scroll, so tightening
   it there would cost readability for nothing.

   !important because Bootstrap 5 generates its spacing utilities (mb-3) with !important. */
@media (max-width: 575.98px), (max-height: 600px) {
    .sd-doc-page > .row {
        margin-bottom: 0.5rem !important;
    }

    /* 1rem -> 0.5rem, i.e. 16px back from a row that is icon-only at this size anyway
       (the .toolbar-btn-group span labels are hidden below 768px). */
    .sd-doc-page .toolbar-container {
        padding: 0.5rem;
    }
}

/* Placeholder for PDF Viewer content */
.pdf-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e7ff; /* Light blue placeholder */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #3b82f6;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
}

/*  LOADIND SPINNER */

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

.spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 10px solid #f3f3f3;
    border-top: 10px solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}
/*-----------------------------------------------*/


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}