/* ==========================================================================
   Report Description page — theme.
   Extracted verbatim (only reformatted, not rewritten) from two <style>
   blocks that were previously inline in reports_description.php, one of
   them floating between </head> and <body> (invalid placement — browsers
   silently relocated it into <head>, but it's cleaner as a real stylesheet).
   All business logic on this page is untouched; this is styling only.
   ========================================================================== */

/* This page's own content has ~12px of horizontal overflow (several
   Bootstrap .rows used without a .container wrapping them to counteract
   their built-in negative left/right margin — a pre-existing layout
   detail across many sections, not something worth chasing down and
   fixing individually everywhere it occurs). newdesign/assets/css/
   customstyles.css already sets body{overflow-x:hidden} site-wide, which
   normally clips that fine — but overflow-x:hidden on body does not
   reliably stop the native rubber-band/bounce overscroll many mobile
   browsers do at the horizontal edges (that bounce happens at the
   document/viewport level, past what body's own overflow can constrain).
   A bounce like that can reveal a sliver of whatever sits past the
   visible edge for an instant, and .fixedWrap (position:fixed, tied to
   the viewport, unaffected by the document shifting under it) then
   visibly does not move with that shift — showing as a gap/notch at its
   corner right where the shift is largest.

   overflow-x:hidden on html itself (not just body) was tried alongside
   overscroll-behavior-x here at first, on the assumption that whichever
   of the two actually governs the bounce varies by browser — but html is
   the page's real scrolling element (document.scrollingElement, not
   body), and giving the actual scroll root a non-visible overflow is
   exactly the long-documented way to break position:sticky for anything
   inside it: .vertical_nav ("Jump Directly To") lost its sticky-while-
   scrolling behaviour the moment this shipped, scrolling away and not
   coming back like a plain static element instead. This is the same
   overflow-vs-sticky conflict already hit (and never resolved) trying
   position:sticky on .fixedWrap itself, earlier in this file's history —
   confirmation that this page's sticky elements are especially sensitive
   to it. overscroll-behavior-x is a different property (it governs
   scroll *chaining*/bounce, not the box's own overflow/clipping
   semantics) and does not carry this risk, so it stays on both html and
   body; overflow-x:hidden here stays only on body, where it was already
   sitting harmlessly via customstyles.css before any of this. */
html {
    overscroll-behavior-x: none;
}
body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
/* Dropping overflow-x:hidden from html (above) to stop breaking sticky
   left the underlying ~12px document-level overflow itself unclipped
   again — visible on a real device as the report body text shifting
   sideways far enough to read as words cut off mid-way ("increasing"
   reading as "asing", etc.), not just the earlier cosmetic corner-gap.
   Rather than put overflow-x:hidden back somewhere between .vertical_nav
   and the true viewport (the exact thing that broke it), this clips it
   locally on .viewport instead — the div wrapping just the report body
   text/tables (where the visible symptom actually was) — which sits in
   a completely separate sibling column from #vertical_nav (see the
   markup: .row > .col-lg-2 > #vertical_nav, .row > .col-lg-10 > ... >
   .viewport), so this can't affect .vertical_nav's sticky containing-
   block chain at all regardless of what breaks sticky elsewhere.
   .viewport .overview table already has its own overflow-x:auto for
   wide tables — that's a separate, nested scroll container on the table
   itself, unaffected by clipping the outer .viewport's overflow. */
.viewport {
    overflow-x: hidden;
}
/* Same fix, same reasoning, different section: the hero/breadcrumb/
   title/analyst-info/tabs area (everything above the FAQ/report body)
   lives in its own <section class="top-card-section">, which closes
   before <section class="content-box rep_content"> (#vertical_nav's
   section) even opens — a sibling, not an ancestor, so clipping this
   one's overflow is exactly as safe for #vertical_nav's sticky as
   .viewport above. This is where the *next* round of the same
   underlying ~12px document overflow showed up (hamburger icon, title
   bar, analyst info box, tabs — all cut off/shifted, with a visible gray
   gap where the page fell short of the actual screen width) once
   .viewport's own fix took care of the report body text specifically.
   .fixedWrap lives inside this section too, but being position:fixed its
   containing block is the viewport regardless of DOM ancestry — nothing
   here has a transform/filter/will-change to change that — so this
   doesn't affect the sticky header bar or its price-panel dropdowns
   (also fixed/absolute, same reasoning) either.

   Scoped to <=767px: an `overflow-x:hidden` box with `overflow-y:visible`
   has its used `overflow-y` promoted to `auto` (CSS spec), turning this
   section into a scroll container that CLIPS position:absolute descendants
   spilling past its bottom edge. The desktop "See Pricing" dropdown
   (#purchase_report) is exactly that — position:absolute, anchored to its
   in-flow .col-lg-3 (unlike the .fixedWrap panels, which are position:fixed
   and escape this), and taller than the space below the button — so an
   unscoped clip here cut off its Enterprise row and Proceed button. That
   dropdown only exists at >=768px (its column is d-md-block), and the
   rubber-band/shift symptom this clip was added for is mobile-only, so
   limiting it to <=767px fixes the dropdown without losing the fix. The
   document-level overscroll-behavior-x/overflow-x on html+body still apply
   at every width. */
@media screen and (max-width: 767px) {
    .top-card-section {
        overflow-x: hidden;
    }
}
/* Third and (per an actual scrollWidth-vs-clientWidth measurement, not
   just eyeballing another screenshot) final spot the same underlying
   document overflow was still showing through: #exTab3 wraps both the
   "Report Summary"/"Table of contents" tab-selector row and .viewport
   (the tab content) — the tab-selector row itself is outside .viewport,
   so .viewport's own overflow-x:hidden didn't reach it. #exTab3 sits in
   .col-lg-10, the sibling column to #vertical_nav's .col-lg-2 (same .row
   as .viewport and .top-card-section's fix above), so this is exactly as
   safe for sticky as those two. */
#exTab3 {
    overflow-x: hidden;
}

.report_heading {
    padding: 30px 0 24px 0 !important;
}

.footer {
    z-index: 9999999999;
    position: relative;
}

.comments {
    background-color: #fffbdb;
    padding: 19px;
}

.submit-button {
    border: solid 2px #189ccf;
    background-image: linear-gradient(#26b3d0, #3489a8, #0f5a7a);
    font-size: 16px;
    color: #fff;
    border-radius: 32px;
    width: 83%;
    padding: 7px;
    float: right;
}

.comments-sub input {
    width: 100%;
    border: 2px solid #848383;
    border-radius: 5px;
    padding: 7px;
    margin: auto;
}

.bot-li {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    column-gap: 9px;
    padding-top: 10px;
}

.bot-li li {
    height: 3px;
    width: 33.33%;
    background-color: #E77156;
}

.bot-li li:nth-child(2) {
    background-color: #14525F !important;
}

#form_sample tr:nth-child(even) {
    background-color: transparent !important;
}

/* .footer z-index was set twice at different values in the original inline
   blocks (9999999999, then 9 !important) — kept both, in the same order,
   so the effective result (9, since !important wins) is unchanged. */
.footer {
    z-index: 9 !important;
}

.market_news_parent {
    background: #1f6c72;
    color: #fff;
    font-weight: 500;
    margin-bottom: 10px;
}
.market-sub {
    margin-bottom: 10px;
}
.market-sub p {
    padding: 10px;
    margin: 0;
}
.market_news h2 {
    font-size: 22px;
    text-decoration: underline;
}
.market_news_parent h3 {
    background: #1f6c72;
    color: #fff;
    font-weight: 500;
}
.market_news_1 {
    background: #e1e1e1;
    color: #000;
}
.market_news_2 {
    background: #f5f5f5;
    color: #000;
}
.market_news {
    padding: 17px;
}
/* Generic embedded content tables (e.g. the "Report Scope" table — Market
   Study Period / Base Year / Forecast Period / etc. — and the "Segment
   Analysis" table) come straight from report_description.content with no
   class or id of their own: <table border="1"><td style="width:465px">
   <p><strong>...</strong></p></td>. <p> keeps its default browser margin
   inside a table cell, so every row got extra empty space above and below
   its text — that's reset below regardless of theme. Sized to its own
   content (like the rich-text editor preview shows it) rather than forced
   to the full column width — the inline per-cell widths from the CMS
   still apply, so a narrow 2-column table stays narrow. display:block +
   overflow-x:auto is the standard responsive-table trick: on a screen
   narrower than the table's natural content width it scrolls horizontally
   in place instead of forcing the whole page wider. #deliverables-table
   (a different, DB-driven table with its own id) keeps its own distinct
   teal styling below and isn't affected by this — id beats this class
   selector regardless of order. */
.viewport .overview table {
    max-width: 100%;
    /* inline-block (not block) so the box shrinks to the table's own
       content width instead of stretching to fill its container — block
       left a big empty gap on the right whenever the table was narrower
       than its column. overflow-y:hidden because setting overflow-x to
       anything but visible makes browsers auto-compute a visible
       overflow-y as auto too, which was drawing an unwanted vertical
       scrollbar/track on a box that never needed one. Desktop turns this
       back off below — a wide viewport rarely needs the scroll trick, and
       it wasn't wanted there even when a table happened to be wide enough
       to trigger it. */
    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 20px 0;
    background: #fff;
    color: #222;
}
@media only screen and (min-width: 768px) {
    .viewport .overview table {
        overflow-x: visible;
        overflow-y: visible;
    }
}
/* The CMS's rich-text editor centers/right-aligns a table using the old
   HTML align="center"/align="right" attribute — the browser would honor
   that on its own via its presentational-hint stylesheet (align="center"
   maps to margin:auto), but only while display stays `table`; forcing
   display:inline-block above (for the shrink-to-fit + horizontal-scroll
   behavior) silently breaks that, so every table rendered left regardless
   of what the CMS actually set. Re-applied explicitly here — width:
   fit-content instead of inline-block keeps the same shrink-to-fit sizing,
   just centered via margin instead. Tables with no align attribute (or
   align="left") are untouched; inline-block's natural left position
   already matches what the CMS meant for those. */
.viewport .overview table[align="center"] {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.viewport .overview table[align="right"] {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}
.viewport .overview table td {
    border: 1px solid #333;
    padding: 10px 16px;
    vertical-align: middle;
    color: #222;
}
.viewport .overview table td p {
    margin: 0;
    color: inherit;
}
.viewport .overview table tr:nth-child(even) {
    background: #d4eae8;
}

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    .mar_top_30 {
        margin-top: 21% !important;
    }

    .submit-button {
        margin-top: 10px !important;
        margin-right: 33px !important;
    }

    /* This used to also force width:100% + display:flex !important, and a
       separate overflow:scroll !important, on every content table here.
       display:flex on a <table> doesn't understand <tr>/<td> row/column
       semantics at all — it mangled every table's layout — and, worse,
       the (min-device-width:768px) and (max-device-width:1024px) half of
       this query's condition tests the physical screen, not the browser
       viewport, so it could silently apply on a desktop-sized window too.
       That's what was overriding table[align="center"] above (an
       !important rule always wins over a non-important one regardless of
       specificity) and forcing every table — centered or not — to full
       width with a scrollbar, no visible alignment difference. Removed;
       the base .viewport .overview table rule's overflow-x:auto already
       handles narrow-screen scrolling unconditionally, and desktop
       explicitly turns scrolling back off (see that rule's own
       min-width:768px override), no media query needed here. */
}

@media only screen and (max-width:850px) {
    .rep_content p {
        font-family: Arial;
        font-size: 16px !important;
        line-height: 24px !important;
        color: #153043 !important;
    }
}

@media only screen and (min-width:600px) and (max-width:768px) {
    .mar_top_30 {
        margin-top: 16% !important;
    }
    .new_rep_desc table {
        overflow: scroll !important;
    }
}

@media only screen and (min-width:768px) and (max-width:1099px) {
    .mar_top_30 {
        margin-top: 14% !important;
    }
}

@media only screen and (min-width:1025px) and (max-width:1099px) {
    .mar_top_30 {
        margin-top: 12% !important;
    }
}

@media only screen and (min-width:1100px) and (max-width:1315px) {
    .mar_top_30 {
        margin-top: 15% !important;
    }

    .report_heading {
        padding: 16px 0 24px 0 !important;
        margin-top: -37px !important;
    }
}

.checkbox, .radio {
    margin-bottom: 1px;
}

.checkbox label, .radio label {
    padding-left: 10px;
}

.vertical_nav {
    /* Needs to sit above normal-flow content while sticky-scrolling past
       it (z-index: 0 let page content scroll over the top of it). */
    z-index: 2;
}

.panel-body {
    position: relative;
    z-index: 1;
    margin: 10px;
}

.addon-content-div {
    display: none !important;
}

.fixedWrapaaa {
    display: flex !important;
}

.top-purchase_report {
    padding-right: 10px;
}

.testt {
    padding: 0px !important;
}

input[type="image"] {
    width: 55% !important;
}

#deliverables-table {
    font-weight: bold !important;
    color: #30928e !important;
    font-size: 14px !important;
    width: 100% !important;
}

#deliverables-table thead td {
    background-image: linear-gradient(to bottom right, #158885, #1aa09d);
    padding: 25px 0;
}

#deliverables-table td {
    vertical-align: middle !important;
    border-color: #fff !important;
    background: #a6d7d4 !important;
    border-right: 1px solid #fff !important;
}
#deliverables-table tbody td:last-child {
    background: #d4eae8 !important;
}

#deliverables-table img {
    height: 25px !important;
    width: 25px !important;
    margin: 0 20px !important;
}

/* ---------- "Jump directly to" sidebar nav + misc ---------- */
.vertical_nav_head b p {
    text-align: center;
    border-bottom: 2px solid #ebebeb;
    font-weight: 600;
    font-size: 16px;
    padding-left: 5px;
}

.vertical_nav ul li a {
    color: #000;
    padding: 5% 0% 5% 0%;
    line-height: 3;
    padding-left: 5px;
}

.more-para ul li {
    list-style: revert !important;
}

/* CMS content images come in every natural size/aspect ratio — this forces
   them all into the same box (default width + height), but width:55% +
   height:350px alone stretches/squishes each one to fit that exact box
   regardless of its own ratio, which is what was reading as blurry
   (distorted, not actually low-resolution). object-fit:contain scales
   each image to fit within the fixed box while keeping its own aspect
   ratio intact — same consistent box size for every image, no stretching,
   no cropping. */
.viewport .overview h1 img, .viewport .overview h2 img, .viewport .overview h3 img, .viewport .overview p img {
    width: 55% !important;
    height: 350px !important;
    object-fit: contain !important;
    background: #fff;
}

@media screen and (max-width: 768px) {
    .viewport .overview h1 img, .viewport .overview h2 img, .viewport .overview h3 img, .viewport .overview p img {
        width: 100% !important;
        height: auto !important;
    }
}
.viewport ul {
    font-size: 14.5px !important;
}

/* ---------- Bootstrap 5 conversion touch-ups ----------
   This page's grid, data-bs-* attributes, and close-button markup were already converted to
   Bootstrap 5 conventions, and its old bundled-Bootstrap-3 stylesheet
   (css/report_decription_view.css) has since been retired outright — this
   file now carries every custom rule the page needs on top of real
   Bootstrap 5 (loaded in reports_description.php), nothing is layered
   over a BS3 base anymore. .btn-close is the one real collision left: BS5's
   own circular btn-close styling (from newdesign/assets/css/customstyles.css)
   needs to be neutralised on this page's plain modal headers.

   display: inline-block below undoes newdesign/styles.css's unscoped
   `button { display: flex; flex: 1; ... }` (a site-wide rule with no class
   of its own). That rule turns every <button> into a flex item *and* a
   flex container of its own — inside .modal-header (itself a flex row),
   an empty flex-container button with flex:1 stretched to fill the
   header's full width instead of sitting as a small button in the corner.
   .modal-header .btn-close (0-2-0 specificity) with !important still lost
   to it in testing, so this is written against each modal's own #id (1-1-0,
   confirmed to win) instead of guessing at what else in the cascade sits
   between the two. Scoped here rather than edited in the shared
   stylesheet, since that rule is unscoped and other pages may be relying
   on it elsewhere. Covers every modal this page has. */
#questionModal .btn-close,
#covidImpactModal .btn-close,
#commentModal .btn-close,
#myModal .btn-close,
#exitModal .btn-close {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: .7;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    flex: 0 0 1em !important;
    position: relative !important;
}

/* ---------- .panel family ----------
   BS3 component with no Bootstrap 5 equivalent (BS4+ replaced it with
   .card) — the enquiry-form panel and the top pricing widget's panel-body
   both still use this markup, so it needs its own definition now that
   report_decription_view.css no longer supplies one. Ported as-is from
   that retired stylesheet. */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
    padding: 10px;
}
.panel-heading {
    padding: 3px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-default {
    border-color: #ddd;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

/* ==========================================================================
   Ported: page layout previously provided by css/report_decription_view.css
   (the retired Bootstrap-3-era bundle). That file was a single shared
   stylesheet used by several legacy pages — these are exactly the rules
   this page's own markup actually depends on, carried over verbatim except
   where noted below, so removing the old <link> doesn't change layout.
   Placed *before* the "Modern re-skin" section below on purpose: where a
   selector is restyled there too (buttons, vertical_nav, faq/rep_desc
   headings, related_reports), the re-skin still wins on colour/typography —
   this section only supplies the structural pieces the re-skin assumed
   were already present. A few legacy accent colours (old teal #24939d,
   old red #e31837) are swapped for this page's current brand tokens
   (#17484a / #ec4b3b) instead of ported literally, so newly-exposed
   elements (hero band, breadcrumb hover, help-tip) match the rest of the
   already-re-skinned page rather than reintroducing a second, older teal.
   Two rules were intentionally dropped rather than ported:
   .related_reports/.display_reports's old solid backgrounds (the re-skin
   already turned that sidebar into a white card with coloured text, so
   restoring the old teal ribbon + grey box would fight that), and
   .triangle-topleft/.triangle-topright (the re-skin already sets
   display:none on both).
   ========================================================================== */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.hide {
    display: none !important;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.content-box {
    padding: 40px 0;
}
.rep_content {
    padding: 1%;
    margin-bottom: 40px;
    font-weight: 100;
}
/* .rep_content's own top-level .row (wrapping #vertical_nav's .col-lg-2
   and the tabs/report-body's .col-lg-10) is a genuine ancestor of
   #vertical_nav — unlike .top-card-section/.viewport/#exTab3 above (all
   siblings of #vertical_nav's subtree), overflow-x:hidden here would be
   exactly the html/body mistake that broke its sticky positioning
   earlier, just one level closer. This was the actual remaining source
   of the ~8px document-level overflow after those three fixes (measured
   via scrollWidth, not just eyeballing a screenshot): not extra-wide
   content, just this .row's own default Bootstrap negative left/right
   margin (built to be canceled by a .container's matching padding, which
   nothing here provides). margin:0 cancels that directly — the same
   fix, and the same reasoning, already proven out on #mob-top-
   purchase_report's own row overflow earlier in this file — without
   touching overflow at all, so it can't affect sticky the way clipping
   would. */
.rep_content > .row {
    margin-left: 0;
    margin-right: 0;
}
.rep_content p {
    font-size: 15px;
}
.rep_content h2 {
    font-size: 16px;
    font-weight: 700;
    /* No !important — an !important class rule would win over a plain
       (non-!important) inline style regardless of specificity, forcing
       this color even onto an <h2> the CMS content already gave its own
       style="color:...". Dropping !important lets a plain color rule lose
       to any inline color like normal, while still applying to every h2
       that doesn't have one of its own. */
    color: #1f6a7f;
    margin: .5em 0;
}
.rep_content h3 {
    color: #000;
    margin: .5em 0;
    font-size: 17px;
    font-weight: 700;
}
.overview li {
    list-style: disc;
    color: #000 !important;
    font-weight: 400;
}
.report-para {
    border: 1px solid #e2e2e2;
    padding: 5px;
    border-radius: 15px;
}
/* Same hero treatment as Press-Releases.php/Press-Details.php's
   .report_heading — solid #17484a here read noticeably darker/flatter
   next to those pages' gradient + soft drop-shadow. */
.report_heading {
    text-align: center;
    background-image: linear-gradient(135deg, #17484a 0%, #1f6b6d 100%);
    box-shadow: 0 10px 24px 0 rgba(23, 72, 74, .22);
    margin-top: -2.5%;
    padding: 35px 0 30px 0;
}
.report_heading h1 {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    line-height: 0;
    padding-top: 1%;
    padding-left: 0;
}
.mob_rpt_h1 {
    display: none;
}
.mob_report_heading {
    text-align: center;
    background-image: linear-gradient(135deg, #17484a 0%, #1f6b6d 100%);
    box-shadow: 0 10px 24px 0 rgba(23, 72, 74, .22);
    margin-top: -4.5%;
    padding: 35px 0 5px 0;
}
.mob_report_heading p {
    /* This uses a <p> tag, not <h1> — <p> has no default bold like a
       heading does, which is why this title rendered normal-weight while
       the desktop <h1> version (same text) looked bold by default. No
       horizontal padding here (or on .mob_report_heading itself) meant
       the text ran flush to the screen edges too — same fix + size bump
       as css/report-description.css / css/toc.css's copies of this. */
    font-size: 18px;
    font-weight: 700;
    padding: 0 16px;
    text-align: center;
    color: #fff;
}

/* White strip + plain "/" text separators (baked into each <li>'s own
   text, e.g. "Home /"), matching Press-Releases.php/Press-Details.php's
   breadcrumb exactly — this used to be transparent with a separate
   .breadc.arrow-right icon element per <li> for the ">" separator; the
   icon markup is gone now, so its rules (.breadc, .page-breadcrumb i,
   .breadc.arrow-right:before) go with it. */
.breadcrumb_section {
    width: 100%;
    padding: 15px 0;
    background-color: #fff;
    text-align: left;
}
ol.breadcrumb.page-breadcrumb {
    margin: -2px;
    padding: 0;
    background-color: transparent;
}
ol.breadcrumb.page-breadcrumb li a {
    /* Matches Press-Details.php's breadcrumb exactly (checked via
       computed style) — was #222/400 here, a flatter, heavier-looking
       dark gray next to that page's muted blue-gray/500. */
    color: #566573;
    font-weight: 500;
    transition: color .2s ease;
}
ol.breadcrumb.page-breadcrumb li a:focus,
ol.breadcrumb.page-breadcrumb li a:hover {
    color: #ec4b3b;
    font-weight: 500;
}

.rep_pic img {
    width: 85%;
    margin: auto;
}
.rep_title span {
    font-weight: 600;
    padding: 5px;
    margin-right: 20px;
    margin-left: 20px;
    background-color: #fffdee;
    font-size: 13px;
}

.top-head-content {
    padding: 1% 2%;
    margin-bottom: 2%;
    box-shadow: 0 8px 6px -6px #0000007a;
}
.top-head-content-p {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: .5em 0;
}
.top-head-content h2 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: .5em 0;
}
/* Request-Sample hero: the download-icon + full report title line
   (.report_more > h2), sitting right under the .rep_title meta chips. */
.top-head-content .report_more {
    margin-top: 14px;
}
.top-head-content .report_more h2 {
    font-size: 18px;
    line-height: 1.4;
    color: #17484a;
}
.top-head-content .report_more h2 .fa-download {
    font-size: 22px;
    color: #ec4b3b;
}

/* Mobile hero: the green bar + .mob_report_heading already carry the title,
   so keep this block tight — small wrapping chips, a small plain-weight
   title line, less padding — instead of a tall stack of full-width yellow
   boxes and an oversized teal heading. */
@media screen and (max-width: 767px) {
    .top-head-content {
        padding: 14px 14px 4px;
    }
    .top-head-content .rep_title span {
        display: inline-block;
        margin: 0 6px 6px 0;
        padding: 3px 8px;
        font-size: 11.5px;
        border-radius: 6px;
    }
    .top-head-content .report_more {
        margin-top: 8px;
    }
    .top-head-content .report_more h2 {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
    }
    .top-head-content .report_more h2 .fa-download {
        font-size: 16px;
    }
}

.top-buynow-btn,
.top-buynow-btn:active {
    width: 100%;
    font-size: 18px;
    margin-top: 3.5%;
}
.top-buynow-btn:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    z-index: 9;
    width: 100%;
    font-size: 18px;
    /* Matches the base rule's margin-top:3.5% — this was still the old
       5% left over from before that change, so hovering shifted the
       button down (margin growing 3.5%→5%) and back up on mouse-out. */
    margin-top: 3.5%;
}
.mob-top-buynow-btn,
.mob-top-buynow-btn:active {
    width: 100%;
    font-size: 14px;
    margin: 5% 0;
}
.mob-top-buynow-btn:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    z-index: 9;
    width: 100%;
    font-size: 14px;
    margin: 5% 0;
}
.top-question-btn,
.top-question-btn:active {
    font-size: 16px;
    margin-top: 5%;
    width: 100%;
}
.top-question-btn:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    z-index: 9;
    font-size: 16px;
    margin-top: 5%;
    width: 100%;
}
.top-getfreesample-btn,
.top-getfreesample-btn:active {
    font-size: 16px;
    margin-top: 1%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
}
.top-getfreesample-btn:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    z-index: 9;
    font-size: 16px;
    margin-top: 1%;
}
/* Lives in .fixedWrap's narrow .col-lg-2/.col-xl-2 column — at the
   original font-size:16px + margin:5% (no width, relying on the shared
   button rule's padding:12px 20px), "Get Free Sample |" and its icon
   don't fit that column on one line and wrap to two. margin:5% is also
   dropped here rather than combined with width:100% — the two together
   overflow the column by 10% (5% each side on top of the full width),
   which is what read as the text being cramped/pushed to one edge in an
   earlier version of this fix. */
.top-getfreesample-top-btn,
.top-getfreesample-top-btn:active {
    /* margin-top:5% matches .top-buynow-btn's own base rule below (its
       "See Pricing" neighbor) — without it "See Pricing" sat pushed down
       by that margin while this one stayed flush at the top of the bar,
       misaligning the two vertically. .testt (this button's column) zeroes
       out that column's own padding, which is normally what creates the
       Bootstrap gutter between adjacent columns — with this button at
       width:100% filling that zero-padding column, its right edge landed
       flush against "See Pricing" with no gap at all. width:calc(100% -
       16px) + margin-right:16px carves out that gap directly on the
       button instead of touching .testt (which may be relied on
       elsewhere) or the column markup. */
    font-size: 16px;
    width: calc(100% - 16px);
    margin-top: 5%;
    margin-right: 16px;
    padding: 12px 6px !important;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
}
.top-getfreesample-top-btn:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    z-index: 9;
    font-size: 16px;
    margin-top: 5%;
}
/* .top-buynow-btn ("See Pricing") is shared between this sticky bar and
   the full-size hero section's own copy — .top-buynow-btn's own rule
   (width:100%, font-size:18px, margin-top:5%) is sized for the hero's
   wider stacked column, which made this one visibly bigger than "Get Free
   Sample" next to it in the bar. Scoped to just .fixedWrap's instance so
   the hero copy is untouched; margin-top:5% is left to inherit from the
   base rule (not overridden here) so both buttons share the same value. */
.fixedWrap .top-buynow-btn,
.fixedWrap .top-buynow-btn:active,
.fixedWrap .top-buynow-btn:hover {
    width: 80%;
    font-size: 16px;
    padding: 12px 8px !important;
    white-space: nowrap;
}
.mob-top-getfreesample-top-btn,
.mob-top-getfreesample-top-btn:hover,
.mob-top-getfreesample-top-btn:active {
    font-size: 14px;
    margin: 5% 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
}

/* Several approaches tried for this bar — worth reading if it ever needs
   touching again:
   1. position:fixed, only shown past scrollY 300px, no compensation (the
      original). Content scrolled underneath and sat hidden behind it.
   2. Always-visible (no scroll toggle) position:fixed + a constant body
      padding-top. This fixed the overlap cleanly — but showing the bar
      immediately at page load, right above the real site header (from
      headernew.php), read as two stacked/duplicate headers. Confirmed
      explicitly not wanted — this page needs the bar hidden until
      scrolled, full stop.
   3. position:sticky, toggled with show/hide past scrollY 300px (tried
      both jQuery's animated slideDown()/slideUp() and a plain instant
      .show()/.hide()). Worked in an isolated test page but kept losing
      stickiness partway down this actual page even after fixing
      customstyles.css's body{overflow-x:hidden} (a confirmed sticky-
      breaker, overridden below to overflow-x:clip) — never got sticky
      holding reliably here for reasons that didn't trace back to
      anything fixable found so far.
   Landed on: position:fixed, scroll-driven (hidden until well past
   scrollY 250, satisfying the "not visible on page load" requirement),
   with body padding-top driven by the same scroll handler, sized to just
   past the bar's own height. Both the bar's own slide-in position and
   this padding are set by JS as a continuous function of live scrollTop
   (see applyFixedWrapScroll() in the page's own <script> — a fixed 0/1
   show/hide toggle at one scrollTop, even with a hysteresis gap and a
   timed CSS transition on top of it, still visibly snapped/jumped on a
   real device; a plain per-tick function of scrollTop with nothing timed
   of its own does not), applied/removed in lockstep with the bar's own
   slide rather than being a separate always-on value.

   That fade was opacity-based at first (0 to 1, alongside display:none/
   block) — animating this element's own opacity also fades its solid
   #fff background, so partway through the fade this bar (which has real
   page content scrolling directly behind it, being position:fixed) went
   translucent and showed that scrolled-past content bleeding through it,
   a double-exposure/ghosting mess for as long as the fade was in
   progress. transform:translateY() instead keeps this bar always fully
   opaque — hidden by sliding it off-screen above the viewport rather
   than by making it see-through, so there is nothing behind it to bleed
   through no matter how far into the slide it is. translateY(-100%) is
   the default/base state (rather than an inline display:none in the
   HTML, as before) so it's already correctly off-screen for the very
   first paint too, before JS has run a single frame. */
.fixedWrap {
    background: #fff;
    padding: 0 0;
    position: fixed;
    top: 0;
    width: 100%;
    color: #333;
    z-index: 999;
    box-shadow: 0 8px 6px -6px #0000007a;
    transform: translateY(-100%);
}
/* Toggled on <body> by the scroll handler in the same moment .fixedWrap
   is shown/hidden — reserves space so content clears the bar instead of
   scrolling in behind it. 140px/100px match the bar's own measured height
   (82-132px mobile, 89-93px desktop) plus a small margin, not a large
   buffer past it — a bigger gap here would just reproduce the dead-space-
   before-the-real-header look from approach #2 above, except before
   whatever content comes right after the bar instead of before the header
   (this page has no such header to worry about, since it's toggled off
   at scroll 0, but the same principle applies to any content).

   These two values are the *ceiling* JS's applyFixedWrapScroll() scales
   toward as scrollTop moves through its fade range — not applied
   directly by this class any more. JS always sets body's padding-top as
   an inline style (which wins over this rule regardless of source order
   or specificity) sized to the current scroll fraction of whichever of
   these applies, so these numbers stay the single source of truth for
   the fully-scrolled-in target without this rule ever visibly fighting
   the inline value. No transition here on purpose — the inline value is
   already recomputed on every scroll tick directly from live scrollTop,
   so a timed transition would just chase a constantly-moving target and
   fall behind it instead of tracking cleanly (this was tried; see the
   comment on applyFixedWrapScroll() in the page's own script for what it
   did and why it was replaced). */
body.has-fixed-wrap {
    padding-top: 170px;
}
@media only screen and (min-width: 768px) {
    body.has-fixed-wrap {
        padding-top: 130px;
    }
}
.fixedWrapLogo img {
    width: 50%;
    margin: 3%;
}
.fixedWrapContext {
    padding-top: 3%;
}
.fixedWrapTitle {
    font-size: 20px;
    font-family: Arial;
    font-weight: 700;
    line-height: 27px;
    margin-top: 0;
}
.fixedWrapSubTitle {
    font-size: 12.5px;
    color: #a9a9a9;
}
.top-purchase_report {
    background-color: #fff;
    margin: 2% 0 4% 0;
}
/* Desktop instance (id, not the shared .top-purchase_report class). Was
   plain block flow with no anchoring, so on this row's own tall sibling
   columns it landed with a big empty gap between the "See Pricing" button
   and the dropdown instead of sitting right under it. Its column got
   position:relative to anchor this.
   left:-36px nudges just THIS panel (the sticky top-bar's "See Pricing"
   dropdown) left so it clears the viewport's right edge. Scoped to this id
   only — the hero section's own dropdown is #purchase_report (untouched),
   the phone one is #mob-top-purchase_report (untouched), and this id's
   column is d-none below 768px so mobile is unaffected regardless. */
#top-purchase_report {
    position: absolute;
    top: 100%;
    left: -36px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    z-index: 10;
}
/* Mobile instance — was plain block flow too (unlike the desktop one
   above), meaning opening it made .fixedWrap's own box genuinely taller;
   since .fixedWrap is position:fixed, that meant the whole bar (now
   including this entire panel) covered most or all of a phone-sized
   viewport instead of just the button row + a contained dropdown below
   it. position:absolute here, anchored to .fixedWrap itself (its nearest
   positioned ancestor), makes this an overlay the same way the desktop
   version already works — .fixedWrap stays pinned at its normal compact
   height (just the logo/button row) regardless of whether this is open.
   max-height + overflow-y:auto caps it at a sane fraction of the
   viewport and scrolls its own content instead of the panel just running
   off the bottom of a short phone screen. (There were two elements
   sharing id="mob-top-purchase_report" — the actual price-list content
   further inside was renamed to id="mob-top-purchase_report-panel" so it
   doesn't also pick up this rule; toggle_visibility() only ever targeted
   this outer one anyway, being the first match for getElementById.)
   This element is also a Bootstrap .row, which carries its own built-in
   negative left/right margin (~-12px, for its child columns' gutter
   padding to line up with the container edge) — with left:0 added on top
   of that unremoved margin, the whole panel rendered ~12px further left
   than intended, spilling off the left edge of the viewport and landing
   misaligned against the button row above it (the SSL/PayPal badge
   column, flush against the row's own top with no padding of its own,
   is what made this most visible). margin:0 here (this ID beats .row's
   class-level margin on specificity, no !important needed) cancels it so
   the panel's left/right edges actually line up with 0/100% as set.

   display:flex below is a separate, pre-existing bug from the two above
   (not something this session's own edits caused): the generic
   toggle_visibility(e) — shared by every "See Pricing"/expandable panel
   on this page, not just this one — opened its target with a plain
   `i.style.display = "block"` inline style. That's correct for the plain
   divs it usually targets, but this target is a Bootstrap .row, which
   needs display:flex (not block) for its .col-4/.col-8 children (the
   SSL/PayPal badge and the pricing list) to sit side by side — with an
   inline display:block instead, both columns still computed their
   correct 33%/67% widths but, being plain block boxes now instead of
   flex items, each took its own full line and stacked vertically instead
   of sitting next to each other. toggle_visibility() itself now special-
   cases this one id to open it with "flex" instead of "block" (see its
   own comment) rather than changing what it does for every other
   element it opens; display:flex here is just a same-value CSS fallback
   for the (currently unused) case of this row ever becoming visible with
   no inline display of its own. Deliberately not !important — that would
   also override the inline display:none toggle_visibility() sets to
   *close* this panel, leaving it permanently visible. */
#mob-top-purchase_report {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    display: flex;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    z-index: 10;
    max-height: 70vh;
    overflow-y: auto;
}
/* .panel-body and .slct_price are shared, generic class names — .panel-body
   alone is reused by the FAQ accordion too (7 separate instances further
   down this file), where its own base rule's margin:10px/padding:10px is
   still exactly what's wanted. Changing those base rules directly (as
   given) would have also flattened the FAQ's spacing. Scoped to
   #mob-top-purchase_report-panel (specificity beats the unscoped base
   rules, no !important needed) instead, so only this mobile price panel
   tightens up — the FAQ accordion, and the desktop/sidebar "See Pricing"
   panels that also use these same class names, are untouched. */
#mob-top-purchase_report-panel .panel-body {
    position: relative;
    z-index: 1;
    margin: 0;
}
#mob-top-purchase_report-panel .slct_price {
    background: #fff;
    border-radius: 10px;
    padding: 0;
}
.addon-content {
    font-size: 20px;
    font-family: Arial;
    font-weight: 700;
    line-height: 27px;
    margin-top: 0;
}
.addon-content-div {
    padding: 2%;
    display: none;
}
.ad-con-mid {
    text-align: left;
    padding: 5%;
}
.ad-con-img {
    padding: 3%;
}

/* Anchored on its column (.col-lg-3, inline style) rather than .top-btns
   right above it — .top-btns is a plain block with auto height (sized to
   its own 3 stacked button rows), and a percentage `top` on an absolutely
   positioned descendant needs its containing block to have a *definite*
   height to resolve against; against an auto-height one it computes as if
   top:0, which is why this used to land right on top of the "See Pricing"
   button instead of below all three buttons — overlapping "Speak to
   Analyst" rather than sitting under it. The column also got
   align-self:flex-start (inline, alongside position:relative) — as a flex
   item it gets a definite height, but Bootstrap's row defaults to
   align-items:stretch, so it was stretching to match its much taller
   sibling column (the report description text) and top:100% then landed
   *below that*, way past the buttons. align-self:flex-start lets it size
   to just its own 3 buttons instead, so top:100% lands right after them.
   margin-left/width here swapped for a plain top-anchored dropdown the
   same width as its own container, plus the shadow/radius the rest of the
   page's cards and dropdowns use. */
.purchase_report {
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    z-index: 10;
}
.report_side .slct_price {
    text-align: center;
}
.re-c-price, .re-s-price, .re-t-price {
    padding-left: 35px;
}
.re-c-price, .re-s-price {
    padding-left: 5px;
    padding-bottom: 10px;
}
span#cmprice, span#smprice, span#tmprice {
    margin-left: 50px;
}
.rep_corp, .rep_sin, .rep_team {
    font-size: 16px;
    font-weight: 700;
}
.rep-c-type, .rep-s-type, .rep-t-type {
    color: #858585;
    text-transform: uppercase;
    font-size: 12px;
}

.help-tip {
    position: absolute;
    text-align: center;
    color: #ec4b3b;
    background-color: #f5f5f5;
    border: 1px solid #999;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 22px;
    cursor: default;
}
.help-tip:before {
    content: '?';
    font-weight: 700;
    color: #ec4b3b;
}
.help-tip:hover p {
    display: block;
    transform-origin: 100% 0;
    animation: fadeIn .3s ease-in-out;
}
.help-tip p {
    display: none;
    text-align: center;
    background-color: #fefefe;
    border: 1px solid #e39343;
    padding: 10px;
    width: 200px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    right: -75px;
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    z-index: 9999;
}
.help-tip p:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #e39343;
    right: 80px;
    top: -12px;
}
.help-tip p:after {
    width: 100%;
    height: 40px;
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
}

.mr_12 {
    margin: 12px;
}
/* Full-cover overlay hosts for common/form_loader/loader.php — the loader
   itself is position:absolute; inset:0, so these just need to be a
   positioned box over the modal/panel and sit above its content. */
.form_loader,
.buynow_form_loader {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.border_content {
    padding: 10px;
    border: 1px solid #efefef;
    margin-left: 0;
    font-size: 14px !important;
    font-weight: 700;
}
.border_content p {
    margin-left: 0;
    font-size: 14px;
    font-weight: 700;
}

.see_more_less_button, .see_more_less_button:hover {
    cursor: pointer;
}
/* Was position:absolute/sticky with a fixed top:71%/72% — a percentage of
   the box's own height, which only happens to land on the chevron's actual
   spot (right after the text) when the box is exactly as tall as whatever
   height that percentage was tuned against. The collapsed (.less-para) box
   is much shorter than the expanded (.more-para) one, so the same
   percentage pushed the chevron below the box entirely on collapse — the
   "expand" state looked fine by coincidence, "collapse" didn't. Normal
   flow + centering keeps it right after the text either way. */
.report-para .see_more_less_button {
    display: block;
    text-align: center;
    margin-top: 8px;
}
.less-para i, .more-para i {
    font-size: 18px;
}

.vertical_nav_head b p {
    border-bottom: 2px solid #ebebeb;
    font-weight: 600;
    font-size: 16px;
    padding-left: 17px;
}
.vertical_nav ul li a {
    color: #000;
    padding: 5% 0;
    line-height: 3;
    padding-left: 5px;
}

#exTab3 .nav-pills > li > a {
    border-radius: 4px 4px 0 0;
    color: #000;
    font-size: 20px;
}
#exTab3 .tab-content {
    /* This #exTab3-scoped rule (specificity 1-1-0) beats the later, more
       generously-padded .tab-content { padding: 24px; } rule (0-1-0) —
       padding:5px 15px left the content sitting close against the left
       edge, and closer on the right too since text-align:justify
       (elsewhere in the report body) stretches lines flush to whatever
       edge is available. Matching the 24px here, evenly on both sides,
       instead of just deleting this rule and hoping the other one wins. */
    padding: 24px;
    border: 2px solid #cccccc54;
}

/* ---------- "Download Free Sample PDF" form (Request-Sample page) ---------- */
.vertical_nav .goto {
    margin-bottom: 16px;
}
.vertical_nav .gotoHead {
    font-size: 16px;
    font-weight: 700;
    color: #17484a;
    margin: 0 0 10px;
}
.vertical_nav .gotoLink {
    margin: 0 0 10px;
}
.vertical_nav .gotoLink a {
    color: #46545c;
    font-size: 15px;
    text-decoration: none;
}
.vertical_nav .gotoLink a:hover {
    color: #ec4b3b;
}
.rs_form_card {
    max-width: 760px;
    margin: 6px auto 0;
}
.rs_form_lead {
    font-size: 18px;
    font-weight: 700;
    color: #17484a;
    text-align: center;
    margin: 0 0 4px;
}
.rs_form_sub {
    text-align: center;
    color: #8e8e8e;
    font-size: 14px;
    margin: 0 0 20px;
}
.request_sample_form .form-group {
    margin-bottom: 14px;
}
.request_sample_form label {
    font-weight: 600;
    font-size: 13px;
    color: #46545c;
    margin-bottom: 4px;
}
.request_sample_form .form-control {
    width: 100%;
    height: auto;
    padding: 10px 12px;
    border-radius: 8px;
}
.request_sample_form .form-control.is-invalid {
    border-color: #d33d2e;
}
.request_sample_form .field-error {
    font-size: 12px;
    margin: 3px 0 0;
}
.rs_form_terms {
    font-size: 11px;
    color: #8e8e8e;
    margin: 6px 0 16px;
}
.request_sample_form .enquire_submit_btn {
    display: inline-block;
    min-width: 180px;
    padding: 11px 34px !important;
    font-weight: 600;
    border: none !important;
    border-radius: 24px !important;
    background: #ec4b3b !important;
    background-image: none !important;
    color: #fff !important;
}
.request_sample_form .enquire_submit_btn:hover {
    background: #d33f30 !important;
}
.request_sample_form .enquire_submit_btn:disabled {
    opacity: .6;
}

.rep_desc_title {
    font-size: 18px;
}
.faq_schema h2 {
    font-size: 18px;
}
.new_rep_desc {
    margin: 30px 0 0;
}
.faq_question {
    color: #797979 !important;
}
.usp_name {
    font-size: 14px;
    margin-bottom: 15px;
    white-space: nowrap;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#desk_right_layout {
    padding-left: 0;
}
#notfound {
    position: relative;
    height: 100vh;
}
#notfound .notfound {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.notfound {
    max-width: 920px;
    width: 100%;
    line-height: 1.4;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}
.notfound .notfound-404 {
    position: absolute;
    height: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.notfound .notfound-404 h1 {
    font-family: 'Maven Pro', sans-serif;
    color: #ececec;
    font-weight: 900;
    font-size: 276px;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.notfound h2 {
    font-family: 'Maven Pro', sans-serif;
    font-size: 46px;
    color: #000;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}
.notfound p {
    font-family: 'Maven Pro', sans-serif;
    font-size: 16px;
    color: #000;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 15px;
}
.notfound a {
    font-family: 'Maven Pro', sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    background: #17484a;
    display: inline-block;
    padding: 16px 38px;
    border: 2px solid transparent;
    border-radius: 40px;
    color: #fff;
    font-weight: 400;
    transition: .2s all;
}
.notfound a:hover {
    background-color: #fff;
    border-color: #17484a;
    color: #17484a;
}

@media screen and (max-width: 768px) {
    .top-purchase_report {
        margin: 0;
    }
    .desk_rpt_h1 {
        display: none;
    }
    .mob_rpt_h1 {
        display: block;
    }
    .rep_title span {
        display: block;
        font-size: 12px;
    }
    /* On mobile, .top-head-info-col's only visible child is .rep_title
       (the title paragraph and quote box are d-none here — see the PHP
       comments near them) — three short lines next to a much taller
       image. The row's default align-items:stretch already matches this
       column's height to the image, so the empty space was really just
       .rep_title sitting at the top of that stretched box instead of
       using it. Turning the column into its own flex column and centering
       fills that space instead of leaving it blank below the text. */
    .top-head-info-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .top-head-content-p {
        border: 1px solid #e2e2e2;
        border-radius: 15px;
        padding: 10px 14px;
        margin-top: 8px;
    }
    .rep_pic img {
        /* Was width:100% + margin-left:10% — 110% of the column combined,
           so the image's right edge always overflowed past its own
           container instead of actually filling it (making it look
           smaller/cropped, not bigger). */
        width: 100%;
        margin: 0;
    }
    #desk_right_layout {
        display: none;
    }
}
@media only screen and (max-width: 780px) {
    .fixedWrap {
        padding: 16px 16px !important;
    }
    .fixedWrapLogo img {
        width: 80%;
        margin: 0 20%;
    }
}
@media only screen and (max-width: 480px) {
    .top-getfreesample-btn,
    .top-getfreesample-btn:hover .top-getfreesample-btn:active {
        margin-left: 8%;
        font-size: 13px !important;
        margin-top: 3% !important;
    }
    .fixedWrap {
        padding: 16px 16px !important;
    }
    .fixedWrapLogo img {
        width: 80% !important;
        margin: 0 20% !important;
    }
    .mob-top-btn {
        display: block !important;
    }
    /* This page's mobile bar has only one button ("See Pricing", now in
       a col-8 beside the logo's col-4 — see Request-Sample.php) instead
       of the two col-4 buttons the whitepaper/report/toc pages have, but
       it's the same underlying button rule (further down this file)
       setting white-space:nowrap + padding:12px 20px + margin:5% 0 with
       no width, which is oversized for sitting beside a logo instead of
       spanning its own row. Same sizing as those other pages' fix. */
    .mob-top-buynow-btn {
        display: block !important;
        width: 92%;
        box-sizing: border-box;
        padding: 14px 4px !important;
        margin: 8px 6px !important;
        font-size: 12.5px !important;
        white-space: normal;
        text-align: center;
    }
    #exTab3 .nav-pills > li > a {
        font-size: 15px !important;
    }
    .notfound .notfound-404 h1 {
        font-size: 162px;
    }
    .notfound h2 {
        font-size: 26px;
    }
}

/* .mar_top_30 (on the hero's <section>) carries a big margin-top — 10%
   unconditionally, plus even bigger overrides (12-24%) at various
   breakpoints, set above in the media queries pulled from the original
   inline styles — and .report_heading (the teal band itself, immediately
   inside that section) carries its own margin-top: -2.5%, which used to
   partially cancel it back out. Both were calibrated together against
   the OLD legacy header.php's taller, multi-row navbar. headernew.php's
   nav is a single slim row, so the same pair now nets out to a big empty
   gap (.mar_top_30's 10%+ far outweighing report_heading's -2.5%) — or,
   once .mar_top_30 alone is turned down, the negative margin instead wins
   and pulls the band back up into the nav. Neutralising both and setting
   the gap in one place instead of two cancelling ones. */
.mar_top_30 {
    margin-top: 20px !important;
}
.top-card-section .report_heading {
    margin-top: 0 !important;
}

/* ==========================================================================
   Modern re-skin — brings this page's look in line with the "newdesign"
   system already used on market_material.php / About-Us.php / etc.
   (teal #17484a + orange #ec4b3b, Poppins headings, card-based panels,
   pill buttons). The underlying markup/classes are untouched (still the
   original Bootstrap-3-era class names — vertical_nav, nav-pills, panel,
   report_side, etc.) — everything below just restyles those classes in
   place, the same approach already used for css/market-material.css.
   ========================================================================== */

/* ---------- Typography ---------- */
.rep_content, .top-head-content, .indDesc, .rep_desc_title, .viewport {
    font-family: 'Poppins', sans-serif;
}
.rep_desc_title {
    color: #17484a;
    font-weight: 700;
    border-bottom: 2px solid #f0f2f3;
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.top-head-content-p {
    color: #46545c;
    line-height: 1.7;
}

/* ---------- Buttons ---------- */
.top-buynow-btn, .top-getfreesample-btn, .top-question-btn,
.customButton, .mob-top-buynow-btn, .top-getfreesample-top-btn,
.mob-top-getfreesample-top-btn, #rep_req_price {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: 10px !important;
    border: none;
    padding: 12px 20px;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    /* newdesign/styles.css's unscoped `button { display: flex; }` made
       every one of these a flex box, which ignores a parent's
       text-align: center (e.g. the "Proceed" button's .text-center
       wrapper) — inline-block responds to it like a normal button again.
       .top-question-btn's own display: block below still wins for that
       one, same as always. */
    display: inline-block;
}
.top-buynow-btn, .mob-top-buynow-btn {
    background: #17484a !important;
    color: #fff !important;
}
.top-buynow-btn:hover, .mob-top-buynow-btn:hover {
    background: #123638 !important;
}
.top-getfreesample-btn, .top-getfreesample-top-btn, .mob-top-getfreesample-top-btn {
    background: #ec4b3b !important;
    color: #fff !important;
}
.top-getfreesample-btn:hover, .top-getfreesample-top-btn:hover, .mob-top-getfreesample-top-btn:hover {
    background: #d33d2e !important;
}
.mob-top-buynow-btn, .mob-top-getfreesample-top-btn {
    white-space: nowrap;
}
.top-question-btn {
    background: #fff !important;
    color: #17484a !important;
    border: 1.5px solid #17484a !important;
    padding: 12px 7px;
    text-align: center;
    display: block;
}
.top-question-btn:hover {
    background: #17484a !important;
    color: #fff !important;
}
.customButton, #rep_req_price {
    background: #17484a !important;
    color: #fff !important;
}
.customButton:hover, #rep_req_price:hover {
    background: #123638 !important;
    transform: translateY(-1px);
}
.enquire_reset_btn, .submit-button,
.btn.theme-btn, #order_submit, #comment, #guest {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: 10px !important;
    border: none !important;
    background: #17484a !important;
    color: #fff !important;
    padding: 10px 22px !important;
    background-image: none !important;
}
.btn.theme-btn:hover, #order_submit:hover, #comment:hover {
    background: #123638 !important;
}
.enquire_reset_btn, #guest {
    background: #fff !important;
    color: #17484a !important;
    border: 1.5px solid #cfe3e3 !important;
}

/* ---------- "Jump Directly To" sidebar nav ---------- */
/* position: sticky (scoped to its own column via the sticky containing-
   block rules) replaces the old scroll-driven .vertical_nav_fixed class
   toggle — that used position: fixed with no width/left of its own, so
   past a certain scroll depth the whole card detached from its column and
   floated over the report content instead of just following it down the
   page. Sticky naturally stays within its column's width and lets go once
   the column's content ends, so it can't drift over the neighboring
   column. */
.vertical_nav {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 22px 9px;
    position: sticky;
    top: 20px;
}
.vertical_nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.vertical_nav_head b p {
    text-align: left;
    border-bottom: none;
    color: #17484a;
    font-size: 15px;
    letter-spacing: .3px;
    padding-left: 0;
}
.vertical_nav ul li a {
    color: #46545c;
    padding: 8px 10px;
    line-height: 1.4;
    display: block;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13.5px;
    border-left: 3px solid transparent;
    /* Was wrapping to 2-3 lines for longer titles (the PHP-side 23-char
       substr() truncation didn't track actual pixel width — see the
       comment by where it's echoed). Ellipsis truncates by the real
       rendered width instead, so it works regardless of title length; the
       full title is still available as a title="" tooltip on hover. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vertical_nav ul li a:hover {
    color: #ec4b3b;
    background: #f8fafc;
}
/* The currently-scrolled-to section, kept highlighted by the scroll-spy
   JS below (adds/removes this class on the <li> as the user scrolls) —
   was previously forced to background:none!important here because every
   <li> used to render with this class hardcoded from PHP; now that the
   class is only ever added by JS for the one active item, the highlight
   can actually show. */
.vertical_nav_active > a {
    color: #17484a !important;
    font-weight: 600;
    background: #eef6f5;
    border-left: 3px solid #17484a;
}
.vertical_nav .top-question-btn {
    margin-top: 12px;
    width: 100%;
    /* Same one-line-or-ellipsis treatment as the nav links above it,
       instead of wrapping to two lines in a narrow sidebar. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Tabs (Report Summary / Table of contents) ---------- */
.nav.nav-pills > li > a {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #46545c;
    border-radius: 8px 8px 0 0 !important;
    padding: 10px 20px;
    background: #f0f2f3;
    margin-right: 6px;
    display: inline-block;
    text-decoration: none;
}
.nav.nav-pills > li.active > a {
    background: #17484a !important;
    color: #fff !important;
}
.tab-content {
    background: #fff;
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 24px;
}

/* ---------- Report card / pricing widget ---------- */
.rep_pic img {
    border-radius: 12px;
}
/* Floats over the image near the bottom, like a caption pill — inset
   from all three edges (left/right/bottom) rather than flush, so it reads
   as a badge sitting on the image instead of a stuck-on label. The
   previous version had the wrapper as display:inline with no text-align,
   so it defaulted to the left edge and wrapped "Report code - X" onto two
   lines; this is centered, and 12px of left/right breathing room plus the
   card's own width (col-lg-2 upward) keeps a normal-length code on one
   line.
   report_common_img_new.jpg itself has "Market Research Report" baked in,
   ending at roughly the bottom 22% of the image — at a typical mobile
   column width (image ~175px tall) that's only ~39px of clear margin
   below the text. The badge needs to fit inside that with room to spare,
   so it's sized compact (smaller padding/font than a typical badge) and
   pulled closer to the image's own bottom edge, instead of the more
   generously-padded version that was tall enough to encroach on the text
   above it. */
.rep_code_badge {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    box-sizing: border-box;
    padding: 5px 8px;
    background: rgba(30, 60, 80, .85);
    color: #ddd;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    /* Safety net for narrow columns/long codes: truncates with an
       ellipsis instead of wrapping to a second line and looking cramped. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slct_price {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
}
.slct_price .radio {
    padding: 10px 0;
}
.slct_price .radio + .radio {
    border-top: 1px solid #e5e5e5;
}
.slct_price label {
    font-weight: 500;
    color: #46545c;
}
.slct_price label input[type="radio"] {
    margin-right: 10px;
}
.rep_sin, .rep_team, .rep_corp {
    color: #17484a;
    font-weight: 700;
}
/* Line up every plan row into the SAME 4 columns — radio | plan name | "?"
   tip | price — so the tips sit in one vertical line and the prices in
   another, regardless of how wide each plan name is ("Single User" vs
   "Enterprise"). A plain flex row can't do this: the "?" lands right after
   each name, so its x drifts with the name width. CSS grid with the name
   column set to 1fr makes that column a fixed share of the row width in
   every row, so the tip and price columns start at the same x each time.
   The price <span>'s inline margin-left (37–50px, a hand-tuned gap for the
   old wide hero panel) is zeroed here — the grid columns handle spacing,
   and that fixed margin is exactly what pushed "$4,990" onto a 2nd line in
   the narrow .fixedWrap "See Pricing" dropdown.
   Desktop-only (min-width:768px): the phone panel
   (#mob-top-purchase_report-panel) already lays these out fine and the
   user confirmed mobile is correct. */
@media screen and (min-width: 768px) {
    /* `.radio > div > label`, not the .re-s/-t/-c-price class: the "Multi
       User" row sits in a .re-s-price div (its price span is .rep_team),
       so pairing row-class to span-class missed it before. */
    .slct_price .radio > div > label {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        column-gap: 8px;
        white-space: nowrap;
    }
    .slct_price .radio > div > label > input[type="radio"] {
        margin-right: 0;
    }
    /* Base rule makes the "?" position:absolute so it takes no inline space;
       as a grid item that collapses it onto the radio. position:relative
       puts it back in its own column (and the hover tooltip then anchors to
       it correctly). */
    .slct_price .radio > div > label > .help-tip {
        position: relative;
        margin: 0 !important;
    }
    .slct_price .radio > div > label > .rep_sin,
    .slct_price .radio > div > label > .rep_team,
    .slct_price .radio > div > label > .rep_corp {
        margin: 0 !important;
        justify-self: end;
        min-width: 62px;
        text-align: right;
    }
}

/* ---------- FAQ accordion ---------- */
.faq_schema .panel {
    border: 1px solid #e3e9ea;
    border-radius: 10px !important;
    box-shadow: none;
    overflow: hidden;
}
.faq_schema .panel-heading {
    background: #fff;
    padding: 0;
}
.faq_schema .panel-title.faq_question a {
    display: block;
    padding: 14px 18px;
    color: #17484a;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
}
.faq_schema .panel-title.faq_question a:hover {
    color: #ec4b3b;
}
.faq_schema .panel-body {
    color: #46545c;
    font-size: 14px;
    line-height: 1.7;
}
.faq_schema h2 {
    color: #17484a;
    font-weight: 700;
    margin-bottom: 20px;
}
/* .faq_schema sits in a .col-lg-7 (with an empty .col-lg-2 spacer before
   it), which only actually insets it — giving it left/right breathing
   room — at Bootstrap's lg breakpoint (992px) and up; below that both
   columns go full-width with no gutter of their own, so the FAQ cards
   ran edge-to-edge on tablet/mobile. Scoped to max-width:991px (exactly
   where that column gutter stops applying) so this doesn't add anything
   redundant, or change the look at all, at the sizes where the column
   gutter already provides it. */
@media screen and (max-width: 991px) {
    .faq_schema {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------- Related reports / right sidebar ---------- */
/* .related_reports_layout is nested inside .report_side.rightsc in the
   markup — giving both the same card styling (white bg + shadow + radius
   + padding) drew two visibly nested rounded boxes, the outer one's own
   padding showing as a border/gap around a smaller inner card. Only the
   outer wrapper keeps the card look now; the inner one is just a plain
   content box that fills it. */
.report_side.rightsc {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 20px;
}
.related_reports_layout {
    padding: 0;
}
.related_reports p {
    color: #17484a;
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    /* Accent underline, matching the site's orange/red used for CTAs and
       hover states elsewhere on this page (.top-getfreesample-btn,
       .see_more_less_button:hover, etc.) — gives the card a clear header
       instead of the title just floating above the list with no divider. */
    border-bottom: 2px solid #ec4b3b;
}
.triangle-topleft, .triangle-topright {
    display: none;
}
.display_reports .usp_name a {
    color: #46545c;
    font-size: 13.5px;
    line-height: 1.6;
}
.display_reports .usp_name a:hover, .display_reports .usp_name a i {
    color: #ec4b3b !important;
}

/* ---------- Modals (Speak to Analyst / Buy Now / Comment / Exit) ---------- */
.modal-header {
    background: #fff;
    border-bottom: 1px solid #e3e9ea;
    padding: 16px 20px;
}
.modal-header p, .modal-header h3 {
    color: #17484a !important;
}
/* Billing (#myModal) + Enquiry Form (#questionModal) + Comment box
   (#commentModal) headers — teal gradient header, circular white
   btn-close, pill-shaped red submit button — ported verbatim from
   css/press-details-theme.css's #buyNowModal (the reference design
   already live on Press-Details.php), just re-scoped to this page's
   modal ids. */
#myModal .modal-content,
#questionModal .modal-content,
#commentModal .modal-content {
    position: relative;
    border-radius: 14px;
    border: none;
    overflow: hidden;
}
#myModal .modal-header,
#questionModal .modal-header,
#commentModal .modal-header {
    background: linear-gradient(135deg, #17484a 0%, #1f6b6d 100%);
    color: #fff;
    border-radius: 14px 14px 0 0;
    padding: 18px 24px;
    align-items: center;
}
#myModal .modal-title,
#questionModal .modal-title,
#commentModal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}
#myModal .modal-title i,
#questionModal .modal-title i,
#commentModal .modal-title i {
    color: #fff;
    font-size: 15px;
    opacity: .9;
    margin-right: 0;
}
#myModal .modal-title small,
#questionModal .modal-title small,
#commentModal .modal-title small {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
    margin-top: 2px;
}
/* Same button{flex:1} + global .btn-close story as press-details-theme.css:
   flex:none + a fixed size pins the close button back to a small circle
   instead of a stretched ellipse; the brightness/invert filter turns the
   dark icon white for this dark header. */
#myModal .modal-header .btn-close,
#questionModal .modal-header .btn-close,
#commentModal .modal-header .btn-close {
    flex: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    background-color: rgba(255, 255, 255, .18);
    border-radius: 50%;
    filter: brightness(0) invert(1);
    opacity: 1;
    transition: background-color .15s ease;
}
#myModal .modal-header .btn-close:hover,
#questionModal .modal-header .btn-close:hover,
#commentModal .modal-header .btn-close:hover {
    background-color: rgba(255, 255, 255, .3);
}
#myModal .modal-body,
#questionModal .modal-body,
#commentModal .modal-body {
    padding: 24px;
}
/* Missing from the initial port: Bootstrap 5 dropped .form-group entirely
   (it was a BS3/4 class), so with no rule of its own it did nothing here —
   every field row sat flush against the next with zero vertical gap. */
#myModal .form-group,
#questionModal .form-group,
#commentModal .form-group {
    margin-bottom: 18px;
}
#myModal label,
#questionModal label,
#commentModal label {
    /* label is inline by default (no UA stylesheet makes it block), so its
       margin-bottom was a no-op too — block makes the gap to its own
       input actually render. */
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #17484a;
    margin-bottom: 5px;
}
#commentModal #comment, #commentModal #guest {
    /* Same button{display:flex} counter as everywhere else on this page —
       without it these two sat flush left instead of respecting the
       .text-end wrapper around them. */
    display: inline-block;
}
#buy, #questionModal .enquire_submit_btn {
    /* display:inline-block, same reason as the .top-question-btn family
       above — newdesign/styles.css's global button{display:flex} makes
       the .text-center wrapper around this button a no-op otherwise. */
    display: inline-block;
    background: #ec4b3b !important;
    color: #fff !important;
    border-radius: 24px !important;
    border: none !important;
    font-weight: 600;
    padding: 10px 34px !important;
    letter-spacing: .2px;
    background-image: none !important;
}
#buy:hover, #questionModal .enquire_submit_btn:hover {
    background: #d33f30 !important;
}
.enquiry_form_div {
    background: #fff !important;
}
.enquiry_form_div .related_reports p {
    color: #17484a;
}
#manage_pref_form {
    background: #f5f9f9;
    border: 1px solid #e3e9ea;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 4px 0 14px;
}
#manage_pref_form .pref-heading {
    font-weight: 600;
    color: #17484a;
    margin: 0 0 8px;
}
#manage_pref_form .pref-heading:not(:first-child) {
    margin-top: 12px;
}
#manage_pref_form .form-check {
    margin-bottom: 6px;
}
.form-control, input.form-control, select.form-control, textarea.form-control {
    border-radius: 8px;
    border: 1px solid #dfe6e6;
}
.form-control:focus {
    border-color: #17484a;
    box-shadow: 0 0 0 .15rem rgba(23, 72, 74, .15);
}

/* ---------- Market news + comments ---------- */
.market_news h2 {
    color: #17484a;
    text-decoration: none;
    border-bottom: 2px solid #f0f2f3;
    padding-bottom: 10px;
}
.market_news_parent {
    background: #17484a !important;
    border-radius: 10px 10px 0 0;
}
.market_news_1, .market_news_2 {
    background: #f8fafc !important;
}
.comments {
    background: #fff;
    border: 1px solid #e3e9ea;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}
.comments-sub input {
    border: 1px solid #dfe6e6;
    border-radius: 8px;
}
.submit-button {
    background-image: none !important;
    background: #17484a !important;
    border: none !important;
    border-radius: 8px !important;
}

/* ---------- see more/less links ---------- */
.see_more_less_button {
    color: #17484a;
    font-weight: 600;
    cursor: pointer;
}
.see_more_less_button:hover {
    color: #ec4b3b;
}

/* ---------- Form validation + toast notifications ----------
   Same rules as css/articledetail.css / css/blogdetail.css / css/press-
   details.css (matches index.php's form-submit toast) — ported here now
   that the enquiry and Buy Now forms use the same CSRF/honeypot/JSON/toast
   pattern those pages use, instead of alert(). */
.field-error {
    display: none;
    color: #dc3545;
    font-size: .82rem;
    text-align: left;
    margin: 0 0 10px;
}
.form-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    z-index: 99999;
    max-width: 380px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease;
}
.form-toast--show {
    opacity: 1;
    transform: translateY(0);
}
.form-toast--success {
    background: #1a7f4b;
}
.form-toast--error {
    background: #c0392b;
}
.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}