/*
CORE:
  1. Font imports
  2. CSS Mini reset
  3. CSS variables for Color Themes
  4. Base styles
  5. Typography
  6. Scrollbars
  7. Main


INTRO:
  1. Economic briefing room logo and text
   a. Introduction 
   b. Logo container
   c. Left side pointer
   d. Spacers
   e. Logo text
   f. Right side border
  2. Controls grid
  3. View switcher
   a. Container
   b. Tab styling
   c. Active tab
  4. Catergories legend
   a. legend box & title
   b. Css grid and legends coloring
   c. Inner child grid
  5. Margins + padding
  6. Category colors for cards & tables


GRAPH VIEW:
  1. SideScroller
  2. CSS grid
  3. Card container
  4. Layout
  5. Strip area
  6. Title area
  7. Information area
    a. Whole flexbox container
    b. arrows
    c. Released section
    d. Current section
    e. Value section
    f. Font & value sizing for graph view
  8. Chart area
    a. Chart background
    b. Lines for charts
    c. Interaction for charts
  9. Action area
    a. CSS grid
    b. Inner buttons: Sizing
    c. Inner buttons: Underline color animation
    d. Inner buttons: Scale size animation
    e. Inner buttons: Icon and button sizes
    f. Inner buttons: SVG icons styling


TABLE VIEW:
  1. Table overall container
  2. Table header area
    a. row
    b. cells
    c. cell adjustments
  3. Table content area
    a. content columns
    b. content rows
    c. content cells
    d. width of content cells row
  4. Inner content formatting
    a. inner color id's
    b. inner indicator titles
    c. inner release date
    d. inner current & comparison period
     Level 1: Padding for current & comparison period
     Level 2: Period grid for left & right patterns
     Level 3: Left section of period grid
     Level 4: Right section of period grid
     Level 5: Subgrid of the right section
     Level 6: Arrows for table view
     Level 7: Font & value sizing for table view
    e. inner table accordion button
    f. inner action area
     Region A: CSS grid container
     Region B: Underline color animation
     Region C: Scale size animation

  ((Table/Accordion Dropdown Content))
  5. Table accordion ~ dropdown content background
  6. Table accordion ~ responsive cells for tablet and mobile
   a. media query 1600 pixels
   b. media query 1280 pixels
   c. media query 1000 pixels
   d. media query  600 pixels
  7. Table accordion ~ dropdown content hiding and showing content items
  8. Table accordion ~ dropdown content dividing line 

  ((Inner Table/Accordion Content))
  9. Inner Table/Accordion Content ~ Comparison section
   a. Comparison inner grid
   b. Comparison box container
   c. Comparison box top
   d. Comparison box bottom
 10. Inner Table/Accordion Content ~ Actions section
   a. Actions SVG styles
   b. Actions CSS grid
   c. Actions Inner Flexbox Row
 11. Table charts ~ responsive styling

 
GLOBAL OBJECTS:
  1. Dialog 
   a. Root level
   b. Header background
   c. Header title
   d. Header close button
   e. Gradient background
   f. Body content area
   g. Gradient collection
  2. Tooltip popups
  3. Index Indicator iFrame
*/

/* ========================================
   (1) Font Imports
======================================== */
/* roboto latin-400-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/roboto/roboto-regular-webfont.woff2) format('woff2'), url(../fonts/roboto/roboto-regular-webfont.woff) format('woff');
}

/* roboto latin-700-normal */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/roboto/roboto-bold-webfont.woff2) format('woff2'), url(../fonts/roboto/roboto-bold-webfont.woff) format('woff');
}

/* roboto-condensed-latin-300-normal */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(../fonts/roboto-condensed/roboto-condensed-latin-300-normal.woff2) format('woff2'), url(../fonts/roboto-condensed/roboto-condensed-latin-300-normal.woff) format('woff');
}

/* roboto-condensed-latin-400-normal */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/roboto-condensed/roboto-condensed-latin-400-normal.woff2) format('woff2'), url(../fonts/roboto-condensed/roboto-condensed-latin-400-normal.woff) format('woff');
}

/* roboto-condensed-latin-500-normal */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/roboto-condensed/roboto-condensed-latin-500-normal.woff2) format('woff2'), url(../fonts/roboto-condensed/roboto-condensed-latin-500-normal.woff) format('woff');
}

/* roboto-condensed-latin-700-normal */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/roboto-condensed/roboto-condensed-latin-700-normal.woff2) format('woff2'), url(../fonts/roboto-condensed/roboto-condensed-latin-700-normal.woff) format('woff');
}

/* ========================================
   (2) CSS Mini Reset
======================================== */
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,
hr,h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal }
ul { list-style: none }
button,input,select { margin: 0 }
html { box-sizing: border-box }
*, *::before, *::after { box-sizing: inherit }
img, video { height: auto; max-width: 100% }
iframe { border: 0 }
table { border-collapse: collapse; border-spacing: 0 }
td, th { padding: 0 }


/* ========================================
   (3) CSS Variables For Color Themes
======================================== */
:root,
:root.light {
  /* text colors */
  --text-color-100: #090d0e;
  --text-color-200: #131b1e;
  --text-color-300: #1d292e;
  --text-color-400: #27373d;
  --text-color-500: #31454d;
  --text-color-600: #3b525d;
  --text-color-700: #45606c;
  --text-color-800: #4f6e7c;

  --text-color-dark: #000000;
  --text-color-light: #ffffff;

  /* background colors */
  --bg-color-100: #ffffff;
  --bg-color-200: #fcfdfd;
  --bg-color-250: #f5f7f9;
  --bg-color-300: #eff3f5;
  --bg-color-400: #e0e8eb;
  --bg-color-500: #d0dce1;
  --bg-color-600: #d6e0e5;
  --bg-color-700: #c0d0d7;

  /* link colors */
  --link-color: #215a8e;
  --active-color: #2340aa;

  /* EBR logo */
  --ebr-logo-blue-color: #112e51;
  --ebr-logo-cyan-color: #076c79;
  --ebr-border-lines: #b3c4cc;

  /* View Switcher */
  --tab-color: #78909c;
  --tab-active-color: #215a8e;

 /*
 ** legends 
 */
  /* text and lines */
  --legend-title: #293438;
  --legend-inner-title: #3E4F56;
  --legend-line: rgba(120, 144, 156, 0.5);

  /* shapes */
  --bus-legend-dark: #183f65;
  --bus-legend-light: #438ed3;
  --spe-legend-dark: #15697c;
  --spe-legend-light: #24b3d3;
  --inv-legend-dark: #1919b4;
  --inv-legend-light: #6c85e0;
  --man-legend-dark: #546973;
  --man-legend-light: #82a2af;
  --con-legend-dark: #f17505;
  --con-legend-light: #ffbd2e;
  --tra-legend-dark: #4f2c82;
  --tra-legend-light: #a84699;

  /* scroll bar */
  --sb-track: #546973;
  --sb-handle: #c1ccd2;
  --sb-handle-hover: #dfe4e7;

  /* padding & margin */
  --padding-layout: 1.5rem;

  /* arrows */
  --arrow-pos-top: #546973;
  --arrow-pos-bottom: #090d0e;
  --arrow-neg-top: #546973;
  --arrow-neg-bottom: #090d0e;


 /*************************** 
 ////////////////////////////
       Category Colors 
 ///////////////////////////
 ***************************/

 /*
 ** Business section 
 */
  --bus-cat-color-one: #215a8e;
  --bus-cat-color-two: #428ed3;
  --bus-cat-color-three: #95b9e7;
  --bus-stripe-one-top: #6ba6dd;
  --bus-stripe-one-bottom: #569ad8;
  --bus-stripe-two-top: #95bfe7;
  --bus-stripe-two-bottom: #80b2e2;
  --bus-stripe-three-top: #bfd4f1;
  --bus-stripe-three-bottom: #aac6ec;

 /*
 ** Consumer Spending section 
 */
  --spend-cat-color-one: #076c79;
  --spend-cat-color-two: #31b0d5;
  --spend-stripe-one-top: #0ed8f2;
  --spend-stripe-one-bottom: #0cc3da;
  --spend-stripe-two-top: #86d0e6;
  --spend-stripe-two-bottom: #71c8e2;

 /*
 ** Inventories section 
 */
  --invent-cat-color-one: #1919b4;
  --invent-cat-color-two: #4d4de6;
  --invent-cat-color-three: #aca6f2;
  --invent-cat-color-four: #6c7be1;
  --invent-stripe-one-top: #9090ef;
  --invent-stripe-one-bottom: #7a7aec;
  --invent-stripe-two-top: #bdbdf5;
  --invent-stripe-two-bottom: #a6a6f2;
  --invent-stripe-three-top: #ebe9fc;
  --invent-stripe-three-bottom: #d6d3f8;
  --invent-stripe-four-top: #c0c7f2;
  --invent-stripe-four-bottom: #abb4ee;

 /*
 ** Manufacturing section 
 */
  --manu-cat-color-one: #546973;
  --manu-cat-color-two: #82a2af;
  --manu-stripe-one-top: #698490;
  --manu-stripe-one-bottom: #5e7682;
  --manu-stripe-two-top: #92acba;
  --manu-stripe-two-bottom: #82a0b0;

 /*
 ** Construction section 
 */
  --cons-cat-color-one: #f17505;
  --cons-cat-color-two: #ff8800;
  --cons-cat-color-three: #fca528;
  --cons-cat-color-four: #ffbd2e;
  --cons-cat-color-five: #ffdd01;
  --cons-stripe-one-top: #fb9d47;
  --cons-stripe-one-bottom: #fa902e;
  --cons-stripe-two-top: #f9984e;
  --cons-stripe-two-bottom: #ffac4d;
  --cons-stripe-three-top: #fdd9a5;
  --cons-stripe-three-bottom: #fdcf8c;
  --cons-stripe-four-top: #ffe5af;
  --cons-stripe-four-bottom: #ffdd95;
  --cons-stripe-five-top: #fff19b;
  --cons-stripe-five-bottom: #ffee81;

 /*
 ** International Trade section 
 */
  --trade-cat-color-one: #4f2c82;
  --trade-cat-color-two: #a84699;
  --trade-stripe-one-top: #9b76d1;
  --trade-stripe-one-bottom: #8d63cb;
  --trade-stripe-two-top: #e489e4;
  --trade-stripe-two-bottom: #e074e0;

  /* Graph view Cards */
  --gvc-card-border: #91adb9;

  /* Table Accordion Button */
  --ta-btn-text: #fcfdfd;
  --ta-btn-top: #2340aa;
  --ta-btn-bottom: #4d4de6;

  /* Table Accordion Action Buttons */
  --ta-btn-action-bg: #b3c4cc;
  --ta-btn-action-fill-one: #ecf1f4;
  --ta-btn-action-fill-two: #5a7785;
  --ta-btn-action-fill-three: #4b636e;
  --ta-btn-action-fill-four: #2c3a41;
}


/* ========================================
   (4) Base Styles
======================================== */
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-color-300);
  background-color: var(--bg-color-200);
  min-width: 360px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* ========================================
   (5) Typography
======================================== */
h1,h2,h3,h4,h5,h6 {
  color: var(--text-color-100);
  font-weight: 700;
  line-height: 1;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.25rem; }

strong { font-size: 1.063rem; color: var(--text-color-100); }
p { font-size: 1rem; color: var(--text-color-300); }
a { color: var(--link-color); }
a:hover { color: var(--active-color); }


/* ========================================
   (6) Scrollbars
======================================== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-corner { background: var(--sb-track); }
::-webkit-scrollbar-thumb {
  background: var(--sb-handle);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sb-handle-hover);
  border: 2px solid transparent;
  background-clip: content-box;
}

.usa-banner__header {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: normal;
  min-height: 3rem;
  position: relative;
}

/*=================================
  (7) Main
=================================*/
main { flex: 1; padding: 0; }
.envelope { max-width: 1920px; margin: 0 auto; padding: 20px 24px; }
@media screen and (max-width: 600px) { main { padding: 1rem; }}


/*~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-
    OBJECTS SECTION
~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-*/

/*==============================================
  (1) Economic Briefing Room logo and text
==============================================*/

/***** Level 1 *****
  Introduction to economic briefing room
**********/
.ebr__intro-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.ebr__logo-area { width: 45%; }
.ebr__text-area { width: 55%; margin-left: 1.4rem; }
.ebr__intro-text { column-count: 2; font-size: 0.938rem; }

@media screen and (max-width: 960px) {
 .ebr__intro-container { flex-flow: column wrap; }
 .ebr__logo-area { width: 100%; }
 .ebr__text-area { width: 100%; margin-top: 1rem; margin-left: 0rem; }
 .ebr__intro-text { column-count: 2; }
}

@media screen and (max-width: 700px) {
 .ebr__logo-area { width: 100%; }
 .ebr__intro-text { column-count: 1; }
}

/********* Level 2 *********
  Economic Briefing Room
  Logo Container
****************/
.ebrLogo__flexbox {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 108px;
  max-width: 600px;
}

@media screen and (max-width: 960px) {
 .ebrLogo__flexbox { max-width: 100%; }
}

/********* Level 3 *********
  Left Side Pointer
****************/
.ebrLogo__point {
  display: flex;
  align-items: center;
  width: 29px;
  height: 110px;
}

.eiiLogo__outer-color        { fill:#215a8e; }
.eiiLogo__inner-top-color    { stop-color:#215a8e; }
.eiiLogo__inner-bottom-color { stop-color:#112e51; }

.ebrLogo__outer-color        { fill:#076c79; }
.ebrLogo__inner-top-color    { stop-color:#076c79; }
.ebrLogo__inner-bottom-color { stop-color:#112e51; }


/********* Level 4 *********
  Spacers
****************/
.ebrLogo__space { width: 2%; }

/********* Level 5 *********
  Logo Text
****************/
.ebrLogo__text {
  width: 94%;
  border-top: 1.5px solid #b3c4cc;
  border-bottom: 1.5px solid #b3c4cc;
}

.ebrLogo__wordBox {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding-left: 15px;
  height: 108px;
}

h1.dark-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #112e51;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02rem;
}

h2.light-title { font-size: 1.75rem; font-weight: 300; margin-top: 4px; }

.eii-title-color { color: #215a8e; }
.ebr-title-color { color: #076c79; }
.eii-icon-color  { fill: #131b1e; }

@media screen and (max-width: 635px) {
 h1.dark-title { font-size: 1.875rem; }
 h2.light-title { font-size: 1.625rem; }
}

@media screen and (max-width: 450px) {
 h1.dark-title { font-size: 1.625rem; }
 h2.light-title { font-size: 1.5rem; }
}

@media screen and (max-width: 375px) {
  h1.dark-title { font-size: 1.375rem; }
  h2.light-title { font-size: 1.5rem; }
 }

/********* Level 6 *********
  Right Side Border
****************/
.ebrLogo__rightBorder {
  width: 2%;
  height: 100px;
  border-right: 1.5px solid #b3c4cc;
}

/*=================================
  (2) Controls grid
=================================*/
.ebr__controls__grid {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.ebr__controls__item-left, 
.ebr__controls__item-right {
  flex: 0 1 auto;
  align-items: center;
}

@media screen and (max-width: 772px) {
 .ebr__controls__grid { flex-flow: column wrap; }
 .ebr__controls__item-left { align-self: center; }
 .ebr__controls__item-right { align-self: auto; }
}
@media screen and (max-width: 570px) {
 .ebr__controls__grid { flex-flow: column wrap; }
 .ebr__controls__item-left { align-self: center; }
 .ebr__controls__item-right { align-self: center; }
}


/*=================================
  (3) View switcher
=================================*/

/***** Level 1 *****
  Views Container
**********/
.views-container { 
  display: flex; 
  flex-flow: row nowrap; 
}
.tab-content { display: none; }

/***** Level 2 *****
  Tab styling
**********/
.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--tab-color);
  font-size: 1.25rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--bg-color-200);
}
.tab:nth-child(1) { margin-right: 1rem; }
.tab:hover { cursor: pointer; }

@media screen and (max-width: 772px) {
 .tab { margin-bottom: 2rem; }
}

@media screen and (max-width: 385px) {
 .tab { font-size: 1.063rem; }
}

.icon {
  fill: none;
  stroke: var(--tab-color);
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.pad-l10 { padding-left: 10px; }

/***** Level 3 *****
  Active Tab
**********/
.active {
  color: var(--tab-active-color);
  border-bottom: 3px solid var(--tab-active-color);
}

.active .icon {
  stroke: var(--tab-active-color);
}


/*=================================
  (4) Catergories legend
=================================*/

/* 
  Region A 
*/
.ebr__legend-box {
  position: relative;
  border: 1.5px solid var(--legend-line);
  border-radius: 4px;
  max-width: 500px;
  padding-top: 14px;
  padding-bottom: 8px;
  padding-left: 24px;
  padding-right: 12px;
}

h4.ebr__legend-title {
  color: var(--legend-title);
  background-color: var(--bg-color-200);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.05rem;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -50%);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0;
  padding-bottom: 0;
}

/* 
  Region B
*/
.ebr__legend-cssGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 6px 16px;
  grid-auto-flow: column;
  grid-template-areas:
    "business-legend inventory-legend construction-legend"
    "consumer-legend manufacture-legend trade-legend";
}

.business-legend { grid-area: business-legend; }
.consumer-legend { grid-area: consumer-legend; }
.inventory-legend { grid-area: inventory-legend; }
.manufacture-legend { grid-area: manufacture-legend; }
.construction-legend { grid-area: construction-legend; }
.trade-legend { grid-area: trade-legend; }

/*****************************************
  Legends Coloring 
*****************************************/
.bus__legend-dark { fill: var(--bus-legend-dark) }
.bus__legend-light { fill: var(--bus-legend-light) }
.spe__legend-dark { fill: var(--spe-legend-dark) }
.spe__legend-light { fill: var(--spe-legend-light) }
.inv__legend-dark { fill: var(--inv-legend-dark) }
.inv__legend-light { fill: var(--inv-legend-light) }
.man__legend-dark { fill: var(--man-legend-dark) }
.man__legend-light { fill: var(--man-legend-light) }
.con__legend-dark { fill: var(--con-legend-dark) }
.con__legend-light { fill: var(--con-legend-light) }
.tra__legend-dark { fill: var(--tra-legend-dark) }
.tra__legend-light { fill: var(--tra-legend-light) }

/* 
  Region C 
*/
.ebr__legend__inner-child-grid {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.ebr__legend__inner-child-left { width: 30%; }

h5.ebr__legend__inner-child-right {
  color: var(--legend-inner-title);
  width: 70%;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 400;
  padding-left: 3px;
  padding-bottom: 8px;
}

.ebr__legend__symbol { width: 40px; }

@media screen and (max-width: 960px) {
  .ebr__legend-box {
    max-width: 400px;
    padding-left: 24px;
    padding-right: 12px;
  }

  .ebr__legend-cssGrid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px 20px;
    grid-template-areas:
      "business-legend inventory-legend"
      "construction-legend consumer-legend"
      "manufacture-legend trade-legend";
  }

  h5.ebr__legend__inner-child-right {
    font-size: 0.813rem;
  }
}

@media screen and (max-width: 772px) {
  .ebr__legend-box {
    max-width: 800px;
    position: relative;
    padding-top: 16px;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-right: 12px;
  }

  .ebr__legend-cssGrid {
    grid-template-areas:
      "business-legend inventory-legend construction-legend"
      "consumer-legend manufacture-legend trade-legend";
  }

  .ebr__legend__inner-child-left {
    width: 25%;
  }

  h5.ebr__legend__inner-child-right {
    width: 75%;
    font-size: 0.938rem;
  }
}

@media screen and (max-width: 650px) {
  .ebr__legend-box {
    max-width: 770px;
    padding-left: 24px;
    padding-right: 12px;
  }

  .ebr__legend-cssGrid {
    gap: 6px 20px;
    grid-template-areas:
      "business-legend inventory-legend construction-legend"
      "consumer-legend manufacture-legend trade-legend";
  }
  .ebr__legend__inner-child-left { width: 30%; }
  h5.ebr__legend__inner-child-right { width: 70%; }
}

@media screen and (max-width: 550px) {
  .ebr__legend-box {
    max-width: 400px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .ebr__legend-cssGrid {
    gap: 6px 8px;
    grid-template-areas:
      "business-legend inventory-legend"
      "construction-legend consumer-legend"
      "manufacture-legend trade-legend";
  }

  h5.ebr__legend__inner-child-right {
    font-size: 0.813rem;
  }
}


/*=================================
  (12) Margins + padding
=================================*/
.marTop-16 { margin-top: 1rem; }
.marTop-32 { margin-top: 2rem; }
.marBot-32 { margin-bottom: 2rem; }


/*==========================================
  (13) Category colors for cards & tables
==========================================*/

/*****************************************
  Business Category Coloring 
*****************************************/
/* BFS */
.business__cat-color__BFS {
  background-color: var(--bus-cat-color-one);
}

.business__stripe-BFS__top {
  stop-color: var(--bus-stripe-one-top);
  stop-opacity: .3
}

.business__stripe-BFS__bottom {
  stop-color: var(--bus-stripe-one-bottom);
  stop-opacity: .1
}

/* QFRRETAIL */
.business__cat-color__QFRRETAIL {
  background-color: var(--bus-cat-color-two);
}

.business__stripe-QFRRETAIL__top {
  stop-color: var(--bus-stripe-two-top);
  stop-opacity: .3
}

.business__stripe-QFRRETAIL__bottom {
  stop-color: var(--bus-stripe-two-bottom);
  stop-opacity: .1
}

/* QFR */
.business__cat-color__QFR {
  background-color: var(--bus-cat-color-three);
}

.business__stripe-QFR__top {
  stop-color: var(--bus-stripe-three-top);
  stop-opacity: .3
}

.business__stripe-QFR__bottom {
  stop-color: var(--bus-stripe-three-bottom);
  stop-opacity: .1
}


/*****************************************
  Consumer Spending Category Coloring 
*****************************************/

/* QSS */
.spend__cat-color__QSS {
  background-color: var(--spend-cat-color-one);
}

.spend__stripe-QSS__top {
  stop-color: var(--spend-stripe-one-top);
  stop-opacity: .3
}

.spend__stripe-QSS__bottom {
  stop-color: var(--spend-stripe-one-bottom);
  stop-opacity: .1
}

/* MARTS */
.spend__cat-color__MARTS {
  background-color: var(--spend-cat-color-two);
}

.spend__stripe-MARTS__top {
  stop-color: var(--spend-stripe-two-top);
  stop-opacity: .3
}

.spend__stripe-MARTS__bottom {
  stop-color: var(--spend-stripe-two-bottom);
  stop-opacity: .1
}

/*****************************************
  Inventories Category Coloring 
*****************************************/

/* MRTSADV */
.inventory__cat-color__MRTSADV {
  background-color: var(--invent-cat-color-one);
}

.inventory__stripe-MRTSADV__top {
  stop-color: var(--invent-stripe-one-top);
  stop-opacity: .3
}

.inventory__stripe-MRTSADV__bottom {
  stop-color: var(--invent-stripe-one-bottom);
  stop-opacity: .1
}

/* MTIS */
.inventory__cat-color__MTIS {
  background-color: var(--invent-cat-color-two);
}

.inventory__stripe-MTIS__top {
  stop-color: var(--invent-stripe-two-top);
  stop-opacity: .3
}

.inventory__stripe-MTIS__bottom {
  stop-color: var(--invent-stripe-two-bottom);
  stop-opacity: .1
}

/* MWTS */
.inventory__cat-color__MWTS {
  background-color: var(--invent-cat-color-three);
}

.inventory__stripe-MWTS__top {
  stop-color: var(--invent-stripe-three-top);
  stop-opacity: .3
}

.inventory__stripe-MWTS__bottom {
  stop-color: var(--invent-stripe-three-bottom);
  stop-opacity: .1
}

/* MWTSADV */
.inventory__cat-color__MWTSADV {
  background-color: var(--invent-cat-color-four);
}

.inventory__stripe-MWTSADV__top {
  stop-color: var(--invent-stripe-four-top);
  stop-opacity: .3
}

.inventory__stripe-MWTSADV__bottom {
  stop-color: var(--invent-stripe-four-bottom);
  stop-opacity: .1
}

/*****************************************
  Manufacturing Category Coloring 
*****************************************/

/* M3ADV */
.manufacture__cat-color__M3ADV {
  background-color: var(--manu-cat-color-one);
}

.manufacture__stripe-M3ADV__top {
  stop-color: var(--manu-stripe-one-top);
  stop-opacity: .3
}

.manufacture__stripe-M3ADV__bottom {
  stop-color: var(--manu-stripe-one-bottom);
  stop-opacity: .1
}

/* M3 */
.manufacture__cat-color__M3 {
  background-color: var(--manu-cat-color-two);
}

.manufacture__stripe-M3__top {
  stop-color: var(--manu-stripe-two-top);
  stop-opacity: .3
}

.manufacture__stripe-M3__bottom {
  stop-color: var(--manu-stripe-two-bottom);
  stop-opacity: .1
}

/*****************************************
  Construction Category Coloring 
*****************************************/

/* RESCONST */
.construction__cat-color__RESCONST {
  background-color: var(--cons-cat-color-one);
}

.construction__stripe-RESCONST__top {
  stop-color: var(--cons-stripe-one-top);
  stop-opacity: .3
}

.construction__stripe-RESCONST__bottom {
  stop-color: var(--cons-stripe-one-bottom);
  stop-opacity: .1
}


/* RV */
.construction__cat-color__RV {
  background-color: var(--cons-cat-color-two);
}

.construction__stripe-RV__top {
  stop-color: var(--cons-stripe-two-top);
  stop-opacity: .3
}

.construction__stripe-RV__bottom {
  stop-color: var(--cons-stripe-two-bottom);
  stop-opacity: .1
}

/* HV */
.construction__cat-color__HV {
  background-color: var(--cons-cat-color-three);
}

.construction__stripe-HV__top {
  stop-color: var(--cons-stripe-three-top);
  stop-opacity: .3
}

.construction__stripe-HV__bottom {
  stop-color: var(--cons-stripe-three-bottom);
  stop-opacity: .1
}

/* RESSALES */
.construction__cat-color__RESSALES {
  background-color: var(--cons-cat-color-four);
}

.construction__stripe-RESSALES__top {
  stop-color: var(--cons-stripe-four-top);
  stop-opacity: .3
}

.construction__stripe-RESSALES__bottom {
  stop-color: var(--cons-stripe-four-bottom);
  stop-opacity: .1
}

/* VIP */
.construction__cat-color__VIP {
  background-color: var(--cons-cat-color-five);
}

.construction__stripe-VIP__top {
  stop-color: var(--cons-stripe-five-top);
  stop-opacity: .3
}

.construction__stripe-VIP__bottom {
  stop-color: var(--cons-stripe-five-bottom);
  stop-opacity: .1
}


/*****************************************
  International Trade Category Coloring 
*****************************************/

/* FTDADV */
.trade__cat-color__FTDADV {
  background-color: var(--trade-cat-color-one);
}

.trade__stripe-FTDADV__top {
  stop-color: var(--trade-stripe-one-top);
  stop-opacity: .3
}

.trade__stripe-FTDADV__bottom {
  stop-color: var(--trade-stripe-one-bottom);
  stop-opacity: .1
}

/* FTD */
.trade__cat-color__FTD {
  background-color: var(--trade-cat-color-two);
}

.trade__stripe-FTD__top {
  stop-color: var(--trade-stripe-two-top);
  stop-opacity: .3
}

.trade__stripe-FTD__bottom {
  stop-color: var(--trade-stripe-two-bottom);
  stop-opacity: .1
}


/*==================================
   Graph View
====================================*/

/***** Level 1 *****
  SideScroller:
  Newest Releases &
  Pin it
**********/
.pinned-sidescroller-container, .sideScroller-container { position: relative; }

.pinned-sideScrolling-wrapper, .sideScrolling-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Enable horizontal snapping */
  -webkit-overflow-scrolling: touch; /* For smooth scrolling on touch devices */
}

/* Style for the scrollbar */
.pinned-sideScrolling-wrapper::-webkit-scrollbar, .sideScrolling-wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar for webkit browsers */
}

/* Ensure cards layout properly on older browsers */
@supports not (scroll-snap-type: x mandatory) {
  .pinned-sideScrolling-wrapper, .sideScrolling-wrapper {
   display: block;
   overflow-x: scroll;
 }
}

#pin-side-scroller-btn-left, #side-scroller-btn-left {
  position: absolute;
  top: 50%;
  left: 10px;
  height: 3rem; /* Scalable size */
  width: 3rem; /* Scalable size */
  cursor: pointer;
  z-index: 40;
  background-color: hsla(208.7, 61.9%, 44.3%, 0.7);
  border: none;
  border-radius: 50%; /* Makes it a circle */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: none;
  justify-content: center; /* Centers arrow horizontally */
  align-items: center; /* Centers arrow vertically */
  font-size: 1.25rem; /* Adjust font size for arrow */
  color: #fff;
  overflow: hidden; /* Ensures content stays inside */
  transform: translateY(-50%);
}

#pin-side-scroller-btn-right, #side-scroller-btn-right {
  position: absolute;
  top: 50%;
  right: 10px;
  height: 3rem; /* Scalable size */
  width: 3rem; /* Scalable size */
  cursor: pointer;
  z-index: 40;
  background-color: hsla(208.7, 61.9%, 44.3%, 0.7);
  border: none;
  border-radius: 50%; /* Makes it a circle */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center; /* Centers arrow horizontally */
  align-items: center; /* Centers arrow vertically */
  font-size: 1.25rem; /* Adjust font size for arrow */
  color: #fff;
  overflow: hidden; /* Ensures content stays inside */
  transform: translateY(-50%);
}

@media screen and (max-width: 600px) { 
 #pin-side-scroller-btn-left,#side-scroller-btn-left { left: 3px; }
 #pin-side-scroller-btn-right,#side-scroller-btn-right { right: 3px; }
}

.pinned-sideScrolling-wrapper article.gv_card, .sideScrolling-wrapper article.gv_card {
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  border: 1px solid var(--gvc-card-border);
  border-radius: 2px;
  overflow: hidden;
  /* new card stuff */
  width: 480px;
  margin: 0 16px;
  flex-shrink: 0;
}

@media screen and (max-width: 600px) { 
  .pinned-sideScrolling-wrapper article.gv_card, .sideScrolling-wrapper article.gv_card {
  width: 340px;
  scroll-snap-align: center; /* Snap align at the start of the container */
 }
}

/***** Level 2 *****
  CSS grid
**********/
.wrapper:not(:first-of-type) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 480px));
  grid-gap: 30px;
  max-width: 2560px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
  margin-left: -0.4%;
}

h2.category-title, h2.new-releases-title {
  font-weight: 300;
  color: var(--text-color-300);
  max-width: 2560px;
  margin: 0 auto 12px auto;
  padding-left: 28px;
}

h2.category-title, h2.new-releases-title { margin-top: 30px; }
.hide { display: none; }
.show { display: flex; }
.show-container { display: block; }

/***** Level 3 *****
  Card container
**********/
.gv_card {
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  border: 1px solid var(--gvc-card-border);
  border-radius: 2px;
  overflow: hidden;
}

/***** Level 4 *****
  Graph View layout
**********/
.gv_color-id {
  width: 5%;
  z-index: 2;
}

.gv_content {
  width: 95%;
  background: linear-gradient(-60deg, var(--bg-color-300) 0%, var(--bg-color-100) 100%);
  padding: 0 16px 16px 16px;
  overflow: hidden;
}

/***** Level 5 *****
  Color strip area
**********/
.gv_strip-area {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin-right: -50px;
}

/***** Level 6 *****
  Title area
**********/
section.gv_card-title-area {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  height: 160px;
  z-index: 12;
  position: relative;
  max-width: 550px;
}

h3.gv_card-title > a {
  font-size: 2.5rem;
  line-height: 1;
}

/***** Level 7 *****
  Information area
**********/

/*
  Region A: 
  Whole flexbox container
*/
section.gv_info_parent-flexbox {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  position: relative;
  z-index: 6;
  margin-bottom: 2rem;
}

.gv_info_child-item:nth-child(1) { width: 100%; }
.gv_info_child-item:nth-child(2) { width: 50%; }
.gv_info_child-item:nth-child(3) { width: 50%; }

/*
  Region B: 
  Arrows section
*/
.up-arrow_gv, .down-arrow_gv, 
.up-arrow-star_gv, .down-arrow-star_gv,
.no-change-star_gv, .no-change-circle_gv
.up-arrow-circle_gv .down-arrow-circle_gv,
.na_gv {
  background-size: 100% 100%;
  content: "";
  display: inline-flex;
  position: absolute;
  left: 0;
  bottom: 0;
}

.up-arrow_gv { 
  background: url("../svg/up-arrow-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin-bottom: 3px;
}
.up-arrow-circle_gv { 
  background: url("../svg/up-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin-bottom: 3px;
}
.up-arrow-star_gv { 
  background: url("../svg/up-arrow-with-star-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin-bottom: 3px;
}
.down-arrow_gv { 
  background: url("../svg/down-arrow-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin-bottom: 3px;
}
.down-arrow-circle_gv { 
  background: url("../svg/down-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin-bottom: 3px;
}
.down-arrow-star_gv { 
  background: url("../svg/down-arrow-with-star-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin-bottom: 3px;
}
.na_gv { 
  background: url("../svg/na-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
}
.no-change-circle_gv { 
  background: url("../svg/no-change-circle-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
}
.no-change-star_gv { 
  background: url("../svg/no-change-star-ebr.svg") no-repeat left center transparent; 
  width: 36px;
  height: 36px;
  line-height: 36px;
}

/*
  Region C: 
  Released section
*/
.gv_release_parent-flexbox {
  display: flex;
  flex-flow: row wrap;
  width: 320px;
  padding-bottom: 30px;
}

.gv_release_child-item { height: 30px; }

.gv_release_child-item:nth-child(1) {
  width: 40%;
  color: var(--text-color-500);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 0.9;
  letter-spacing: 0.04rem;
}

.gv_release_child-item:nth-child(2) {
  width: 60%;
  color: var(--text-color-300);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 0.9;
  padding-left: 0;
}

.gv_release_child-item:nth-child(3) {
  margin-top: 0;
  width: 40%;
  color: var(--text-color-500);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 0.9;
  letter-spacing: 0.04rem;
}

.gv_release_child-item:nth-child(4) {
  width: 60%;
  color: var(--text-color-300);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 0.9;
  padding-left: 0;
}

/*
  Region D:
  Current section
*/
.gv_current_parent-flexbox {
  display: flex;
  justify-content: flex-start;
}

.gv_current_subParent-flexbox {
  display: flex;
  flex-flow: column nowrap;
  width: 160px;
}

.gv_current_child-item:nth-child(1) {
  flex: 0 1 auto;
  align-self: flex-start;
  color: var(--text-color-500);
  font-weight: 500;
  font-size: 1.563rem;
  line-height: 1;
}

.gv_current_child-item:nth-child(2) {
  flex: 0 1 auto;
  align-self: flex-start;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-color-300);
  line-height: 1;
  padding-left: 5px;
}

.gv_current_child-item:nth-child(3) {
  flex: 0 1 auto;
  align-self: flex-start;
  padding-top: 10px;
}

/*
  Region E: 
  Value section
*/
.gv_diff_parent-flexbox {
  display: flex;
  flex-flow: column nowrap;
  width: 160px;
  margin-left: auto;
}

.gv_diff_child-item:nth-child(1) {
  flex: 0 1 auto;
  align-self: flex-start;
  color: var(--text-color-500);
  font-weight: 500;
  font-size: 1.563rem;
  line-height: 1;
}

.gv_diff_child-item:nth-child(2) {
  flex: 0 1 auto;
  align-self: auto;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-color-300);
  line-height: 1;
  padding-left: 5px;
}

.gv_diff_child-item:nth-child(3) {
  flex: 0 1 auto;
  align-self: auto;
  padding-top: 8px;
}

.gv_diff_subParent-flexbox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  position: relative;
}

.gv_diff_subChild-item { flex: 0 1 auto; }
.gv_diff_subChild-item:nth-child(1) { align-self: flex-start; }
.gv_diff_subChild-item:nth-child(2) { align-self: flex-end; }

/*
  Region F: 
  Font & value sizing for graph view
*/
.plus-minus {
  color: var(--text-color-400);
  font-size: 1.5rem;
  font-weight: 400;
}

h4.change-display { font-size: 2.375rem; }

sup {
  color: var(--text-color-300);
  position: relative;
  line-height: 0;
  top: 0.2em;
  font-weight: 400;
  font-size: 1.5rem;
  padding-right: 1px;
  padding-left: 1px;
}

sup.r {
  font-size: 0.75rem;
  color: var(--text-color-700);
  letter-spacing: 0.07rem;
  position: relative;
  line-height: 0;
  top: 0.4rem;
  padding-right: 4px;
  padding-left: 4px;
}

sup.symbol {
  font-size: 1.5rem;
  color: var(--text-color-800);
  position: relative;
  line-height: 0;
  top: -0.7em;
  vertical-align: baseline;
}

sub {
  vertical-align: sub;
  font-size: smaller;
  color: var(--text-color-300);
  line-height: 0;
  font-weight: 400;
  font-size: 1.188rem;
  position: relative;
  top: -0.55rem;
  padding-left: 4px;
}


/***** Level 8 *****
  Chart area
**********/

/*
  Region A:
  Inner charts background
*/
.chartBg {
  fill: var(--bg-color-100);
  filter: drop-shadow(0 3px 6px rgb(39 55 61 / 0.3));
}

/*
  Region B:
  Lines for the charts
*/
.line {
  fill: none;
  stroke: #428ed3;
  stroke-width: 3;
}

/*
  Region C:
  Interaction for the charts
*/
.tooltip, .table-tooltip {
  position: absolute;
  text-align: center;
  width: 100px;
  padding: 4px;
  font-family: 'Roboto Condensed', sans-serif;
  background-color: #eff3f5;
  border-right: 3px solid #27373d;
  pointer-events: none;
  z-index: 10;
  display: none;
  box-shadow: 0px 3px 6px 0px rgba(39, 55, 61, 0.3);
}

.tooltip:before, .table-tooltip:before {
  content: "";
  position: absolute;
  border-bottom: 15px solid #27373d;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  transform: rotate(90deg);
  top: 38%;
  right: 0;
  margin-right: -23px;
}

.upper-v {
  color: #333333;
  font-size: 1rem;
  font-weight: 400;
}

.lower-v {
  color: #131313;
  font-size: 1.125rem;
  font-weight: 700;
}

sup.middle-v { font-size: 1rem; }

sup.tooltip-symbol {
  font-size: 14px;
}

sub.tooltip-symbol, sub.ss-k {
  vertical-align: sub;
  font-size: smaller;
  color: var(--text-color-300);
  line-height: 0;
  font-weight: 400;
  font-size: 12px;
  position: relative;
  top: -0.30rem;
  padding-left: 2px;
}


/***** Level 9 *****
  Action area
**********/

/*
  Region A:
  CSS grid
*/
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 7px 7px;
  grid-auto-flow: row;
  width: 84%;
  z-index: 4;
  position: relative;
  margin-left: auto;
  grid-template-areas:
    "gv_pin gv_excel gv_press-release"
    "gv_time-status gv_rss gv_info";
}

.action-grid > a { text-decoration: none; }

.gv_pin { grid-area: gv_pin; }
.gv_time-status { grid-area: gv_time-status; }
.gv_excel { grid-area: gv_excel; }
.gv_rss { grid-area: gv_rss; }
.gv_press-release { grid-area: gv_press-release; }
.gv_info { grid-area: gv_info; }

/*
  Region B: Inner buttons
  Sizing 
*/
.gv_pin, .gv_time-status, .gv_excel,
.gv_rss, .gv_press-release, .gv_info {
  display: flex;
  align-items: center;
  padding-left: 6px;
  padding-right: 6px;
  margin: 0;
  background-color: transparent;
  border: 0;
  transition-duration: 0.3s;
  font-weight: 500;
  color: #31454d;
  text-align: left;
  line-height: 1;
  font-size: 1.063rem;
  font-family: 'Roboto Condensed', sans-serif;
  overflow: hidden;
  position: relative;
}

/*
  Region C: Inner buttons 
  Underline color animation
*/
.gv_pin:before, .gv_time-status:before, .gv_excel:before,
.gv_rss:before, .gv_press-release:before, .gv_info:before {
  position: absolute;
  border-bottom: 3px solid #638a9b;
  left: calc(-100% + 0px);
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: .2s ease all;
  z-index: -1;
}

.gv_pin:hover:before, .gv_time-status:hover:before,
.gv_excel:hover:before, .gv_rss:hover:before,
.gv_press-release:hover:before, .gv_info:hover:before {
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
}

/*
  Region D: Inner buttons 
  Scale size animation
*/
.gv_pin:hover, .gv_time-status:hover, .gv_excel:hover, .gv_rss:hover,
.gv_press-release:hover, .gv_info:hover, .gv_pin:focus, .gv_time-status:focus,
.gv_excel:focus, .gv_rss:focus, .gv_press-release:focus, .gv_info:focus {
  transition-duration: 0.3s;
  transform: scale(1.15);
  cursor: pointer;
  color: #131b1e;
}

/*
  Region E: Inner buttons
  Icon and button sizes
*/
.action-icon-size { width: 100%; height: auto; }
.gv_inner-icon-area { width: 45%; }
.gv_inner-text-area { width: 50%; padding-left: 5%; }

/*
  Region F: Inner buttons
  SVG icons styling
*/
.pin-fill-part { fill: #ecf1f4 }

.ts-fill-part {
  opacity: .2;
  fill: none;
  stroke: #b3c4cc;
  stroke-width: .5;
  stroke-miterlimit: 10
}

.x-fill-one { fill: #5a7785 }
.x-fill-two { fill: #4b636e }

.pr-fill-part {
  fill: none;
  stroke: #2c3a41;
  stroke-width: .75;
  stroke-miterlimit: 10;
}

/*==================================
  Graph view media queries
====================================*/
/*~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-
  Three Cards 
~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-*/

/* Version A: Large styling */
@media screen and (max-width: 1608px) {
  main { flex: 1; padding: 15px; }
  .wrapper:not(:first-of-type) {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    grid-gap: 15px;
  }
  .action-grid { width: 80%; gap: 4px 4px; }
  .gv_pin, .gv_time-status, .gv_excel,
  .gv_rss, .gv_press-release, .gv_info { font-size: 1rem; }
 } 
 
 
 /* Version B: Medium styling */
 @media screen and (max-width: 1536px) {
 
 /*==================================
    Graph View
 ====================================*/
 
 /***** Level 3 *****
   Graph View layout
 **********/
  .gv_content { padding: 0 12px 12px 12px;  }
 
 /***** Level 4 *****
   Color strip area
 **********/
  .gv_strip-area { margin-right: -35px; }
 
 /***** Level 5 *****
   Title area
 **********/
  section.gv_card-title-area { height: 120px; }
  h3.gv_card-title > a { font-size: 2rem; }
 
 /***** Level 6 *****
   Information area
 **********/
 
 /*
   Region A: 
   Whole flexbox container
 */
  section.gv_info_parent-flexbox { margin-bottom: 1rem; }
 
 /*
   Region B: 
   Arrows section
 */
 .up-arrow_gv { 
   background: url("../svg/up-arrow-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
   margin-bottom: 3px;
 }
 .up-arrow-circle_gv { 
   background: url("../svg/up-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
   margin-bottom: 3px;
 }
 .up-arrow-star_gv { 
   background: url("../svg/up-arrow-with-star-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
   margin-bottom: 3px;
 }
 .down-arrow_gv { 
   background: url("../svg/down-arrow-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
   margin-bottom: 3px;
 }
 .down-arrow-circle_gv { 
   background: url("../svg/down-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
   margin-bottom: 3px;
 }
 .down-arrow-star_gv { 
   background: url("../svg/down-arrow-with-star-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
   margin-bottom: 3px;
 }
 .na_gv { 
   background: url("../svg/na-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
 }
 .no-change-circle_gv { 
   background: url("../svg/no-change-circle-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
 }
 .no-change-star_gv { 
   background: url("../svg/no-change-star-ebr.svg") no-repeat left center transparent; 
   width: 27px;
   height: 27px;
   line-height: 27px;
 }
 
 /*
   Region C:
   Released section
 */
  .gv_release_parent-flexbox { padding-bottom: 20px; }
  .gv_release_child-item { height: 22px; }
  .gv_release_child-item:nth-child(1),
  .gv_release_child-item:nth-child(2),
  .gv_release_child-item:nth-child(3),
  .gv_release_child-item:nth-child(4) { font-size: 0.938rem; }
 
 /*
   Region D:
   Current section
 */
  .gv_current_child-item:nth-child(1) { font-size: 1.375rem; }
  .gv_current_child-item:nth-child(2) { font-size: 0.938rem; }
  .gv_current_child-item:nth-child(3) { padding-top: 10px; }
 
 /*
   Region E:
   Value section
 */
  .gv_diff_child-item:nth-child(1) { font-size: 1.375rem; }
  .gv_diff_child-item:nth-child(2) { font-size: 0.938rem; }
  .gv_diff_child-item:nth-child(3) { padding-top: 8px; }
 
 /*
   Region F: 
   Font & value sizing for graph view
 */
  .plus-minus { font-size: 1.313rem; }
  h4.change-display { font-size: 1.875rem; }
  sup { top: 0.1em; font-size: 1.188rem; }
  sup.r { font-size: 0.688rem; }
  sup.symbol { font-size: 1.1rem; line-height: 1; top: -0.8em; }
  sub { top: -0.45rem; font-size: 1.125rem; }
 
 
 /***** Level 8 *****
   Action area
 **********/
 
 /*
   Region A:
   CSS grid
 */
  .action-grid { gap: 6px 6px; width: 75%; }
 
 /*
   Region B: Inner buttons
   Sizing
 */
  .gv_pin, .gv_time-status, .gv_excel,
  .gv_rss, .gv_press-release, .gv_info {
    font-size: 0.813rem;
  }
 }
 
 @media screen and (max-width: 1342px) {
  .wrapper:not(:first-of-type) { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
 }
 
 @media screen and (max-width: 1220px) {
  .wrapper:not(:first-of-type) { grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); }
 }
 
 
 
 /*~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
 -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-
   Two Cards - smaller fonts
 ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
 -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-*/
 @media screen and (max-width: 1190px) { .action-grid { width: 80%; }}
 
 /* Version C: Small styling */
 @media screen and (max-width: 840px) {
  .wrapper:not(:first-of-type) {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }
 
 /*==================================
    Graph Card View
 ====================================*/
 
  /***** Level 5 *****
    Title area
  **********/
   h3.gv_card-title > a { font-size: 1.813rem; }
  
  /***** Level 6 *****
    Information area
  **********/
 
  /*
   Region B: 
   Arrows section 
  */
 .up-arrow_gv { 
   background: url("../svg/up-arrow-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .up-arrow-circle_gv { 
   background: url("../svg/up-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .up-arrow-star_gv { 
   background: url("../svg/up-arrow-with-star-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .down-arrow_gv { 
   background: url("../svg/down-arrow-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .down-arrow-circle_gv { 
   background: url("../svg/down-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .down-arrow-star_gv { 
   background: url("../svg/down-arrow-with-star-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .na_gv { 
   background: url("../svg/na-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
 }
 .no-change-circle_gv { 
   background: url("../svg/no-change-circle-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
 }
 .no-change-star_gv { 
   background: url("../svg/no-change-star-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
 }
 
  /*
    Region C:
    Released section
  */
   .gv_release_parent-flexbox { width: 300px;}
   .gv_release_child-item:nth-child(1),
   .gv_release_child-item:nth-child(2),
   .gv_release_child-item:nth-child(3),
   .gv_release_child-item:nth-child(4) { font-size: 0.875rem; }
  
  /*
    Region D:
    Current section
  */
   .gv_current_child-item:nth-child(1) { font-size: 1.25rem; }
   .gv_current_child-item:nth-child(2) { font-size: 0.875rem; }
  
  /*
    Region E: 
    Value section
  */
   .gv_diff_parent-flexbox { width: 140px; }
   .gv_diff_child-item:nth-child(1) { font-size: 1.25rem; }
   .gv_diff_child-item:nth-child(2) { font-size: 0.875rem; }
  
  /*
    Region F:
    Font & value sizing for graph view
  */
   .plus-minus { font-size: 1.125rem; }
   h4.change-display { font-size: 1.688rem; }
   sup { top: 0.1em; font-size: 1.125rem; }
   sup.r { font-size: 0.688rem; }
   sup.symbol { font-size: 1rem; line-height: 1; top: -0.8em; }
   sub { top: -0.45rem; font-size: 1.063rem; }
  
  /***** Level 8 *****
    Action area
  **********/
  
  /*
    Region A:
    CSS Grid
  */
   .action-grid { width: 85%; }
  
  /*
    Region B:
    Inner buttons
  */
   .gv_pin, .gv_time-status, .gv_excel,
   .gv_rss, .gv_press-release, .gv_info {
     font-size: 0.75rem;
   }
 }
 
 
 
 /*~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
 -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-
   One card 
 ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
 -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-*/
 
 /* Version A: Large styling */
 @media screen and (max-width: 723px) {
 
 /*==================================
    Graph View
 ====================================*/
 
 /***** Level 1 *****
   CSS grid
 **********/
 .wrapper:not(:first-of-type) {
   grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
   grid-gap: 30px;
 }
 
 /***** Level 3 *****
   Graph View layout
 **********/
 .gv_content { padding: 0 16px 16px 16px; }
 
 /***** Level 4 *****
   Color strip area
 **********/
 .gv_strip-area { margin-right: -50px; }
 
 /***** Level 5 *****
   Title area
 **********/
 section.gv_card-title-area { height: 160px; }
 h3.gv_card-title > a { font-size: 2.5rem; }
 
 /***** Level 6 *****
   Information area
 **********/
 
 /*
   Region A: 
   Whole flexbox container
 */
 section.gv_info_parent-flexbox { margin-bottom: 2rem; }
 
 /*
   Region B: 
   Arrows section
 */
 .up-arrow_gv { 
   background: url("../svg/up-arrow-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
   margin-bottom: 3px;
 }
 .up-arrow-circle_gv { 
   background: url("../svg/up-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
   margin-bottom: 3px;
 }
 .up-arrow-star_gv { 
   background: url("../svg/up-arrow-with-star-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
   margin-bottom: 3px;
 }
 .down-arrow_gv { 
   background: url("../svg/down-arrow-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
   margin-bottom: 3px;
 }
 .down-arrow-circle_gv { 
   background: url("../svg/down-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
   margin-bottom: 3px;
 }
 .down-arrow-star_gv { 
   background: url("../svg/down-arrow-with-star-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
   margin-bottom: 3px;
 }
 .na_gv { 
   background: url("../svg/na-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
 }
 .no-change-circle_gv { 
   background: url("../svg/no-change-circle-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
 }
 .no-change-star_gv { 
   background: url("../svg/no-change-star-ebr.svg") no-repeat left center transparent; 
   width: 36px;
   height: 36px;
   line-height: 36px;
 }
 
 /*
   Region C: 
   Released section
 */
 .gv_release_parent-flexbox { width: 320px; padding-bottom: 30px; }
 .gv_release_child-item { height: 30px; }
 
 .gv_release_child-item:nth-child(1) { font-size: 1.063rem; }
 .gv_release_child-item:nth-child(2) { font-size: 1.125rem; }
 .gv_release_child-item:nth-child(3) { font-size: 1.063rem; }
 .gv_release_child-item:nth-child(4) { font-size: 1.125rem; }
 
 /*
   Region D:
   Current section
 */
 .gv_current_child-item:nth-child(1) { font-size: 1.563rem; }
 .gv_current_child-item:nth-child(2) { font-size: 1rem; }
 .gv_current_child-item:nth-child(3) { padding-top: 10px; }
 
 /*
   Region E: 
   Value section
 */
 .gv_diff_parent-flexbox { width: 160px; }
 .gv_diff_child-item:nth-child(1) { font-size: 1.563rem; }
 .gv_diff_child-item:nth-child(2) { font-size: 1rem; }
 
 /*
   Region F: 
   Font & value sizing for graph view
 */
 .plus-minus { font-size: 1.5rem; }
 h4.change-display { font-size: 2.375rem; }
 sup { top: 0.2em; font-size: 1.5rem; }
 sup.r { font-size: 0.75rem; }
 sup.symbol { font-size: 1.5rem; line-height: 0; top: -0.7em; }
 sub { top: -0.55rem; font-size: 1.188rem; }
 
 
 /***** Level 8 *****
   Action area
 **********/
 
  /*
   Region A:
   CSS grid
  */
  .action-grid { gap: 8px 8px; width: 85%; }
 
  /*
   Region B: Inner buttons
   Sizing 
  */
  .gv_pin, .gv_time-status, .gv_excel,
  .gv_rss, .gv_press-release, .gv_info {
   padding-left: 6px;
   padding-right: 6px;
   font-size: 1.125rem;
  }
 }
 

 /* Version B & C: Medium & Small styling */
 @media screen and (max-width: 600px) {
   .wrapper:not(:first-of-type) {
     grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
     grid-gap: 15px;
   }
 
 /*==================================
    Graph Card View
 ====================================*/
 
 /***** Level 3 *****
   Graph View layout
 **********/
  .gv_content { padding: 0 12px 12px 12px;  }
 
  /***** Level 4 *****
    Color strip area
  **********/
   .gv_strip-area { margin-right: -35px; }
  
  /***** Level 5 *****
    Title area
  **********/
   section.gv_card-title-area { height: 120px; }
   h3.gv_card-title > a { font-size: 1.813rem; }
  
  /***** Level 6 *****
    Information area
  **********/
  
  /*
    Region A:
    Whole flexbox container
  */
   section.gv_info_parent-flexbox { margin-bottom: 1rem; }
  
  /*
    Region B: 
    Arrows section
  */
  .up-arrow_gv { 
   background: url("../svg/up-arrow-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .up-arrow-circle_gv { 
   background: url("../svg/up-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .up-arrow-star_gv { 
   background: url("../svg/up-arrow-with-star-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .down-arrow_gv { 
   background: url("../svg/down-arrow-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .down-arrow-circle_gv { 
   background: url("../svg/down-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .down-arrow-star_gv { 
   background: url("../svg/down-arrow-with-star-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-bottom: 3px;
 }
 .na_gv { 
   background: url("../svg/na-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
 }
 .no-change-circle_gv { 
   background: url("../svg/no-change-circle-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
 }
 .no-change-star_gv { 
   background: url("../svg/no-change-star-ebr.svg") no-repeat left center transparent; 
   width: 25px;
   height: 25px;
   line-height: 25px;
 }
 
  /*
    Region C:
    Released section
  */
   .gv_release_parent-flexbox { width: 300px; padding-bottom: 20px; }
   .gv_release_child-item { height: 22px; }
   .gv_release_child-item:nth-child(1),
   .gv_release_child-item:nth-child(2),
   .gv_release_child-item:nth-child(3),
   .gv_release_child-item:nth-child(4) { font-size: 0.875rem; }
  
  /*
    Region D:
    Current section
  */
   .gv_current_child-item:nth-child(1) { font-size: 1.25rem; }
   .gv_current_child-item:nth-child(2) { font-size: 0.875rem; }
   .gv_current_child-item:nth-child(3) { padding-top: 10px; }
  
  /*
    Region E:
    Value section
  */
   .gv_diff_parent-flexbox { width: 140px; }
   .gv_diff_child-item:nth-child(1) { font-size: 1.25rem; }
   .gv_diff_child-item:nth-child(2) { font-size: 0.875rem; }
   .gv_diff_child-item:nth-child(3) { padding-top: 8px; }
  
  /*
    Region E: Info Right
    Font formatting
  */
   .plus-minus { font-size: 1.125rem; }
   h4.change-display { font-size: 1.688rem; }
   sup { top: 0.1em; font-size: 1.125rem; }
   sup.r { font-size: 0.688rem; }
   sup.symbol { font-size: 1rem; line-height: 1; top: -0.8em; }
   sub { top: -0.45rem; font-size: 1.063rem; }


  /***** Level 8 *****
    Action area
  **********/
  
  /*
    Region A:
    CSS Grid
  */
   .action-grid { gap: 6px 6px; width: 95%; }
  
  /*
    Region B:
    Inner buttons
  */
   .gv_pin, .gv_time-status, .gv_excel,
   .gv_rss, .gv_press-release, .gv_info {
     font-size: 0.875rem;
   }
 }

 @media screen and (max-width: 450px) {
  sup.symbol { 
    font-size: 0.625rem; 
    line-height: 1; 
    top: -1.1rem; 
  } 
 }  


/*==================================
   Table / Accordion View
====================================*/

/* LEVEL 1:
   Table overall container
*******************************/
[role="table"] { width: 100%; }


/* LEVEL 2:
   Table header area
*******************************/
/** A: row **/
.th__header-row {
  /* positioning */
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 12;
  /* font */
  color: var(--text-color-100);
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  /* aesthetics */
  background: linear-gradient(0deg, var(--bg-color-500) 0%, var(--bg-color-600) 53.03%, var(--bg-color-400) 100%);
  border-radius: 2px 2px 0px 0px;
  box-shadow: 0px 2px 4px rgba(39, 55, 61, 0.3);
  height: 70px;
}

/** B: cells **/
.th__color-id-blank { flex-basis: 2%; }
.th__indicator-name { flex-basis: 20%; padding-left: 12px; padding-right: 12px; }
.th__release-date { flex-basis: 10%; padding-left: 6px; padding-right: 6px; }
.th__current-period { flex-basis: 20%; }
.th__comparison-period { flex-basis: 20%; }
.th__more-view { flex-basis: 8%; }
.th__action-area { flex-basis: 20%; }

/** C: cell adjustments **/
.th__more-view::after { content: "Chart"; }


/* LEVEL 3:
   Table content area
*******************************/

/** A: content columns **/
.tr__group-row {
  display: grid;
  grid-auto-columns: auto;
  background-color: var(--bg-color-300);
  z-index: 3;
}

/** B: content rows **/
.inner-tr__group-row__MTIS,
.inner-tr__group-row__MARTS,
.inner-tr__group-row__QSS,
.inner-tr__group-row__BFS,
.inner-tr__group-row__FTD,
.inner-tr__group-row__MWTS,
.inner-tr__group-row__M3,
.inner-tr__group-row__VIP,
.inner-tr__group-row__MWTSADV,
.inner-tr__group-row__FTDADV,
.inner-tr__group-row__MRTSADV,
.inner-tr__group-row__M3ADV,
.inner-tr__group-row__RESSALES,
.inner-tr__group-row__RESCONST,
.inner-tr__group-row__HV,
.inner-tr__group-row__RV,
.inner-tr__group-row__QFR,
.inner-tr__group-row__QFRRETAIL {
  display: flex;
  flex-flow: row nowrap;
  height: 110px;
}

/** C: content cells **/
.td__color-id,
.td__indicator-name,
.td__release-date,
.td__current-period,
.td__comparison-period,
.td__more-view,
.td__action-area {
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(114, 150, 165, 0.4);
  border-bottom: 1px solid rgba(114, 150, 165, 0.4);
  height: 100%;
}

/** D: width of content cells row **/
.td__color-id { flex-basis: 2%; }
.td__indicator-name { flex-basis: 20%; }
.td__release-date { flex-basis: 10%; }
.td__current-period { flex-basis: 20%; }
.td__comparison-period { flex-basis: 20% }
.td__more-view { flex-basis: 8%; }
.td__action-area { flex-basis: 20%; }
.td__cen { margin: 0 auto; }


/* LEVEL 4:
   Inner content formatting
*******************************/

/*** 
  Section A: inner color id's
***/
.td__color-id {
  border-right: transparent;
  border-bottom: transparent;
}

.pinned-table-active {
  padding: 3px;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.3));
}

@media screen and (max-width: 1000px) { 
  .pinned-table-active { padding: 1px; }
}

/*** 
  Section B: inner indicator titles
***/
.td__indicator-name > a {
  color: var(--text-color-200);
  font-weight: 400;
  font-size: 1.25rem;
  padding-left: 12px;
  padding-right: 12px;
}

/*** 
  Section C: inner release date
***/
.td__release-date {
  padding-left: 12px;
  padding-right: 12px;
}

.td__releases-container {
  display: flex;
  flex-flow: column nowrap;
}

.td_release_child-item:nth-child(1) {
  width: 100%;
  color: var(--text-color-500);
  font-weight: 400;
  font-size: 0.938rem;
  line-height: 1.3;
  letter-spacing: 0.04rem;
}

.td_release_child-item:nth-child(2) {
  width: 100%;
  color: var(--text-color-300);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 0.9;
  padding-left: 5px;
}

.td_release_child-item:nth-child(3) {
  margin-top: 0.6rem;
  width: 100%;
  color: var(--text-color-500);
  font-weight: 400;
  font-size: 0.938rem;
  line-height: 1.3;
  letter-spacing: 0.04rem;
}

.td_release_child-item:nth-child(4) {
  width: 100%;
  color: var(--text-color-300);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 0.9;
  padding-left: 5px;
}

@media screen and (max-height: 1920px) {
  .td_release_child-item:nth-child(1) {
    font-size: 0.875rem;
  }
  
  .td_release_child-item:nth-child(2) {
    font-size: 0.938rem;
    padding-left: 0px;
  }
  
  .td_release_child-item:nth-child(3) {
    font-size: 0.875rem;
  }
  
  .td_release_child-item:nth-child(4) {
    font-size: 0.938rem;
    padding-left: 0px;
  }
}

/*** 
  Section D: inner current & comparison period
***/

/***** Level 1 *****
  Padding for current 
  & comparison period
**********/
.td__current-period,
.td__comparison-period {
  padding: 0;
}

/***** Level 2 *****
  Period grid for left 
  & right patterns
**********/
.period__grid {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 110px;
  padding-left: 32px;
  padding-right: 32px;
}

@media screen and (max-width: 1920px) {
  .period__grid {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 110px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/***** Level 3 *****
  Left section of
  period grid
**********/
.period__left {
  display: flex;
  flex-flow: column nowrap;
  width: 180px;
  padding-right: 7px;
  position: relative;
  height: 75px;
}

.period__left-item:nth-child(1) {
  flex: 0 1 auto;
  align-self: flex-start;
  color: var(--text-color-500);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1;
}

.period__left-item:nth-child(2) {
  flex: 0 1 auto;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-color-300);
  line-height: 1.2;
  padding-left: 6px;
}

.period__left-item:nth-child(3) {
  flex: 0 1 auto;
  align-self: flex-start;
  height: 33px;
  margin-top: 10px;
  padding-right: 3px;
}






/***** Level 4 *****
  Right section of
  period grid
**********/
.period__right {
  display: flex;
  flex-flow: column nowrap;
  width: 150px;
  margin-left: auto;
  padding-left: 7px;
  position: relative;
  height: 75px;
}

.period__right-item:nth-child(1) {
  flex: 0 1 auto;
  align-self: flex-start;
  color: var(--text-color-500);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1;
}

.period__right-item:nth-child(2) {
  flex: 0 1 auto;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-color-300);
  line-height: 1.2;
  padding-left: 6px;
}

/***** Level 5 *****
  Subgrid of the 
  right section
**********/
.period__right-subGrid {
  display: flex;
  flex-flow: row nowrap;
  height: 33px;
  margin-top: 10px;
}

.period__right-subBox-left {
  flex: 0 1 auto;
  align-self: flex-start;
}

.period__right-subBox-right {
  flex: 0 1 auto;
  align-self: flex-end;
  margin-left: auto;
}

/***** Level 6 *****
  Arrows for 
  table view
**********/
.up-arrow, .down-arrow,
.up-arrow-star, .down-arrow-star,
.no-change-star, .no-change-circle
.up-arrow-circle, .down-arrow-circle, 
.na {
  background-size: 100% 100%;
  content: "";
  display: inline-flex;
  position: absolute;
  margin-top: 0;
}

.up-arrow { 
  background: url("../svg/up-arrow-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin-bottom: 3px;
}
.up-arrow-circle { 
  background: url("../svg/up-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.up-arrow-star { 
  background: url("../svg/up-arrow-with-star-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.down-arrow { 
  background: url("../svg/down-arrow-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.down-arrow-circle { 
  background: url("../svg/down-arrow-with-circle-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.down-arrow-star { 
  background: url("../svg/down-arrow-with-star-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin-bottom: 3px;
}
.na { 
  background: url("../svg/na-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.no-change-circle { 
  background: url("../svg/no-change-circle-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.no-change-star { 
  background: url("../svg/no-change-star-ebr.svg") no-repeat left center transparent; 
  width: 28px;
  height: 28px;
  line-height: 28px;
}

/***** Level 7 *****
  Font & value sizing 
  for table view
**********/
.tv_plus-minus {
  color: var(--text-color-400);
  font-size: 1.313rem;
  font-weight: 400;
}

sup.tv {
  color: var(--text-color-300);
  position: relative;
  line-height: 0;
  top: 0.2em;
  font-weight: 400;
  font-size: 1.375rem;
  padding-right: 1px;
  padding-left: 1px;
}

sup.tv-revised {
  font-size: 0.75rem;
  color: var(--text-color-700);
  letter-spacing: 0.05rem;
  position: relative;
  line-height: 0;
  top: -0.01rem;
  padding-right: 1px;
  padding-left: 1px;
}

h4.tv_change-display { font-size: 1.875rem; }

sup.tv-symbol {
  font-size: 1.5rem;
  color: var(--text-color-800);
  position: relative;
  line-height: 0;
  top: -0.6em;
  vertical-align: baseline;
}

sub.tv,
sub.tv-diff {
  vertical-align: sub;
  font-size: smaller;
  color: var(--text-color-300);
  line-height: 0;
  font-weight: 400;
  font-size: 1rem;
  position: relative;
}

sub.tv {
  padding-left: 4px;
  top: -0.43rem;
}
sub.tv-diff {
  padding-left: 0px;
  top: 0.1rem;
 }
.sup-symbol {
  top: -4px !important;
}

/*** 
  Section E: inner table accordion button
***/
.table-accordion__btn {
  font-size: 1.25rem;
  color: var(--link-color);
  font-weight: 400;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.5em;
}

.table-accordion__btn:hover,
.table-accordion__btn:focus {
  color: var(--ta-btn-text);
  background: linear-gradient(0deg, var(--ta-btn-top) 0%, var(--ta-btn-bottom) 100%);
  padding: 15px;
  border-radius: 4px;
}

@media screen and (max-width: 600px) {
  .table-accordion__btn { font-size: 1.25rem; }
  .table-accordion__btn:hover,
  .table-accordion__btn:focus { padding: 15px 8px 15px 8px; }
}

/*** 
  Section F: Inner action area 
***/

/*
Region A: Inner buttons 
CSS grid container
*/
.table-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 6px 6px;
  grid-auto-flow: row;
  max-width: 300px;
  margin: 0 auto;
  align-self: center;
  grid-template-areas:
    "tv_pin tv_excel tv_press-release"
    "tv_time-series tv_rss tv_info";
}

.table-action-grid > a { text-decoration: none; }

.tv_pin { grid-area: tv_pin; }
.tv_time-series { grid-area: tv_time-series; }
.tv_excel { grid-area: tv_excel; }
.tv_rss { grid-area: tv_rss; }
.tv_press-release { grid-area: tv_press-release; }
.tv_info { grid-area: tv_info; }

.tv_pin, .tv_time-series, .tv_excel,
.tv_rss, .tv_press-release, .tv_info {
  display: flex;
  align-items: center;
  margin: 0;
  background-color: transparent;
  border: 0;
  transition-duration: 0.3s;
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 500;
  color: #31454d;
  text-align: left;
  line-height: 1;
  font-size: 0.75rem;
  font-family: 'Roboto Condensed', sans-serif;
  overflow: hidden;
  position: relative;
}

/*
Region B: Inner buttons 
Underline color animation
*/
.tv_pin:before, .tv_time-series:before,
.tv_excel:before, .tv_rss:before,
.tv_press-release:before, .tv_info:before {
  position: absolute;
  border-bottom: 3px solid #638a9b;
  left: calc(-100% + 0px);
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: .2s ease all;
  z-index: -1;
}

.tv_pin:hover:before, .tv_time-series:hover:before,
.tv_excel:hover:before, .tv_rss:hover:before,
.tv_press-release:hover:before, .tv_info:hover:before {
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
}

/*
Region C: Inner buttons 
Scale size animation
*/
.tv_pin:hover, .tv_time-series:hover,
.tv_excel:hover, .tv_rss:hover,
.tv_press-release:hover, .tv_info:hover,
.tv_pin:focus, .tv_time-status:focus,
.tv_excel:focus, .tv_rss:focus,
.tv_press-release:focus, .tv_info:focus {
  transition-duration: 0.3s;
  transform: scale(1.15);
  cursor: pointer;
  color: #131b1e;
}

@media screen and (max-width: 530px) {
  .inner-tr__group-row {
    height: 100px;
  }

  .td__indicator-name > a {
    font-weight: 500;
    font-size: 1.063rem;
    padding-left: 8px;
    padding-right: 8px;
  }

  .td__release-date {
    padding-left: 10px;
    padding-right: 0px;
  }

  .td_release_child-item:nth-child(1) {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .td_release_child-item:nth-child(2) {
    font-size: 0.813rem;
    line-height: 0.9;
    padding-left: 0px;
  }

  .td_release_child-item:nth-child(3) {
    font-size: 0.75rem;
    line-height: 1.2;
    margin-top: 0.6rem;
  }

  .td_release_child-item:nth-child(4) {
    font-size: 0.813rem;
    line-height: 0.9;
    padding-left: 0px;
  }

  .table-accordion__btn {
    font-size: 1rem;
  }

  .table-accordion__btn:hover,
  .table-accordion__btn:focus {
    padding: 15px 8px 15px 8px;
  }
}

@media screen and (max-width: 430px) {
  .td__release-date {
    padding-left: 5px;
    padding-right: 0px;
  }

  .td_release_child-item:nth-child(1) {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .td_release_child-item:nth-child(2) {
    font-size: 0.75rem;
    line-height: 0.9;
    padding-left: 0px;
  }

  .td_release_child-item:nth-child(3) {
    font-size: 0.75rem;
    line-height: 1.2;
    margin-top: 0.6rem;
  }

  .td_release_child-item:nth-child(4) {
    font-size: 0.75rem;
    line-height: 0.9;
    padding-left: 0px;
  }
}

/************************************
***********************************
  Table/Accordion Dropdown Content
***********************************
************************************/

/* LEVEL 5: 
   Table Accordion ~ Dropdown Content
   Background 
********************************************/
.table-accordion__content {
  display: none;
  padding: 38px 38px 18px 38px;
  min-height: 200px;
  background-color: var(--bg-color-400);
  box-shadow: inset 0px 0px 5px rgba(114, 150, 165, 0.5);
}

@media screen and (max-width: 1600px) { .table-accordion__content { padding: 32px; }}
@media screen and (max-width: 1280px) { .table-accordion__content { padding: 26px; }}
@media screen and (max-width: 1000px) { .table-accordion__content { padding: 20px; }}
@media screen and (max-width: 600px)  { .table-accordion__content { padding: 14px; }}

h5.chart-tv-title { margin-bottom: 1rem; }

/* LEVEL 6: 
   Table Accordion ~ table cells
   Responsive cells for tablet and mobile
********************************************/
@media screen and (max-width: 1600px) {
  /** width of table header cells **/
  .th__color-id-blank { flex-basis: 3%; }
  .th__indicator-name { flex-basis: 20%; }
  .th__release-date   { flex-basis: 18%; }
  .th__current-period { flex-basis: 25%; }
  .th__comparison-period { flex-basis: 25%; }
  .th__more-view { flex-basis: 9%; }
  .th__action-area { flex-basis: 0%; display: none; }

  /** Table cell adjustments **/
  .th__more-view::after { content: "More"; }

  /** width of content cells row **/
  .td__color-id { flex-basis: 3%; }
  .td__indicator-name { flex-basis: 20%; }
  .td__release-date { flex-basis: 18%; }
  .td__current-period { flex-basis: 25%; }
  .td__comparison-period { flex-basis: 25% }
  .td__more-view { flex-basis: 9%; }
  .td__action-area { flex-basis: 0%; display: none; }
}

@media screen and (max-width: 1280px) {
  /** width of table header cells **/
  .th__color-id-blank { flex-basis: 3%; }
  .th__indicator-name { flex-basis: 25%; }
  .th__release-date   { flex-basis: 23%; }
  .th__current-period { flex-basis: 35%; }
  .th__comparison-period { flex-basis: 0%; display: none; }
  .th__more-view { flex-basis: 14%; }
  .th__action-area { flex-basis: 0%; display: none; }

  /** width of content cells row **/
  .td__color-id { flex-basis: 3%; }
  .td__indicator-name { flex-basis: 25%; }
  .td__release-date { flex-basis: 23%; }
  .td__current-period { flex-basis: 35%; }
  .td__comparison-period { flex-basis: 0%; display: none; }
  .td__more-view { flex-basis: 14%; }
  .td__action-area { flex-basis: 0%; display: none; }
}

@media screen and (max-width: 1000px) {
  /** width of table header cells **/
  .th__color-id-blank { flex-basis: 4%; }
  .th__indicator-name { flex-basis: 34%; }
  .th__release-date { flex-basis: 32%; }
  .th__current-period { flex-basis: 0%; display: none; }
  .th__comparison-period { flex-basis: 0%; display: none; }
  .th__more-view { flex-basis: 30%; }
  .th__action-area { flex-basis: 0%; display: none; }

  /** width of content cells row **/
  .td__color-id { flex-basis: 4%; }
  .td__indicator-name { flex-basis: 34%; }
  .td__release-date { flex-basis: 32%; }
  .td__current-period { flex-basis: 0%; display: none; }
  .td__comparison-period { flex-basis: 0%; display: none; }
  .td__more-view { flex-basis: 30%; }
  .td__action-area { flex-basis: 0%; display: none; }
}

@media screen and (max-width: 600px) {
  /** width of table header cells **/
  .th__color-id-blank { flex-basis: 7%; }
  .th__indicator-name { flex-basis: 38%; }
  .th__release-date { flex-basis: 34%; }
  .th__current-period { flex-basis: 0%; display: none; }
  .th__comparison-period { flex-basis: 0%; display: none; }
  .th__more-view { flex-basis: 21%; }
  .th__action-area { flex-basis: 0%; display: none; }

  /** width of content rows **/
  .td__color-id { flex-basis: 7%; }
  .td__indicator-name { flex-basis: 38%; }
  .td__release-date { flex-basis: 34%; }
  .td__current-period { flex-basis: 0%; display: none; }
  .td__comparison-period { flex-basis: 0%; display: none; }
  .td__more-view { flex-basis: 21%; }
  .td__action-area { flex-basis: 0%; display: none; }
}


/* LEVEL 7: 
   Table Accordion ~ Dropdown Content
   Hiding and showing content items
********************************************/
.table-inner__comparison-period { display: none; }
.table-inner__actions-grid { display: none; }
.current-period { display: none; }
.prior-period { display: none; }

@media screen and (max-width: 1600px) {
  .table-inner__actions-grid { display: block; }
}

@media screen and (max-width: 1280px) {
  .table-inner__comparison-period { display: block; }
  .prior-period { display: block; }
}

@media screen and (max-width: 1000px) {
  .current-period { display: block; }
}


/* LEVEL 8: 
   Table Accordion ~ Dropdown Content
   Dividing line 
********************************************/
hr.ebr-line {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}


/************************************
***********************************
  Inner Table/Accordion Content
***********************************
************************************/

/* LEVEL 9: 
   Inner Table/Accordion Content
   Comparison section
********************************************/

/*/
// Section A:  
\\ Comparison Inner Grid 
/*/

.comparison-inner-grid {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

@media screen and (max-width: 1000px) {
  .comparison-inner-grid {
    justify-content: space-around;
  }
}

@media screen and (max-width: 815px) {
  .comparison-inner-grid {
    flex-flow: column wrap;
    justify-content: space-around;
  }
}

/*/
// Section B:  
\\ Comparison Box Container 
/*/

.comparison-boxes {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  margin: 8px 0px 8px 0px;
  min-width: 450px;
}

@media screen and (max-width: 1000px) {
  .comparison-boxes { min-width: 0; max-width: 500px; }
  .period__left { padding-right: 12px; }
  .period__right { padding-left: 8px; }
}

@media screen and (max-width: 815px) {
  .comparison-boxes { margin: 12px auto 12px auto; }
}

@media screen and (max-width: 450px) {
  .comparison-boxes { max-width: 100%; margin: 12px 0 12px 0; min-width: 350px; }
  .period__left { padding-right: 10px; }
  .period__right { padding-left: 8px; }
}


/*/
// Section C:  
\\ Comparison Box Top 
/*/

.comparison-box-top {
  flex: 0 1 auto;
  align-self: auto;
  background-color: transparent;
  height: 45px;
}

.comparison-top-svg {
  filter: drop-shadow(3px 5px 2px rgb(44 58 65 / 0.4));
  height: 45px;
  z-index: 1;
}

.business__color-one { fill: var(--bus-cat-color-one); }
.business__color-two { fill: var(--bus-cat-color-two); }
.business__color-three { fill: var(--bus-cat-color-three); }
.spend__color-one { fill: var(--spend-cat-color-one); }
.spend__color-two { fill: var(--spend-cat-color-two); }
.inventory__color-one { fill: var(--invent-cat-color-one); }
.inventory__color-two { fill: var(--invent-cat-color-two); }
.inventory__color-three { fill: var(--invent-cat-color-three); }
.inventory__color-four { fill: var(--invent-cat-color-four); }
.manufacture__color-one { fill: var(--manu-cat-color-one); }
.manufacture__color-two { fill: var(--manu-cat-color-two); }
.construction__color-one { fill: var(--cons-cat-color-one); }
.construction__color-two { fill: var(--cons-cat-color-two); }
.construction__color-three { fill: var(--cons-cat-color-three); }
.construction__color-four { fill: var(--cons-cat-color-four); }
.construction__color-five { fill: var(--cons-cat-color-five); }
.trade__color-one { fill: var(--trade-cat-color-one); }
.trade__color-two { fill: var(--trade-cat-color-two); }

/*/
// Section D:  
\\ Comparison Box Bottom 
/*/

.comparison-box-bottom {
  flex: 0 1 auto;
  align-self: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  z-index: 3;
  background: linear-gradient(0deg, var(--bg-color-300) 0%, var(--bg-color-250) 53.03%, var(--bg-color-100) 100%);
  box-shadow: 0px 2px 4px 0px rgba(44, 58, 65, 0.4);
}

.top-bg-angle {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 11px;
  padding-left: 10px;
  letter-spacing: 0.03rem;
}

.font-light { color: #fff; }
.font-dark { color: #000; }


/* LEVEL 10: 
   Inner Table/Accordion Content
   Actions section
********************************************/

/*/
// Section A:  
\\ Actions SVG styles
/*/
.tac__icon { width: 50px; height: 50px; }
.pin-fill-part { fill: var(--ta-btn-action-fill-one); }

.ts-fill-part {
  opacity: .2;
  fill: none;
  stroke: var(--ta-btn-action-bg);
  stroke-width: .5;
  stroke-miterlimit: 10;
}

.x-fill-one { fill: var(--ta-btn-action-fill-two); }
.x-fill-two { fill: var(--ta-btn-action-fill-three); }

.pr-fill-part {
  fill: none;
  stroke: var(--ta-btn-action-fill-four);
  stroke-width: .75;
  stroke-miterlimit: 10;
}

/*/
// Section B:  
\\ Actions CSS Grid
/*/
@media screen and (max-width: 1600px) {
  .tac-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 15px 15px;
    grid-auto-flow: row;
    align-items: center;
    grid-template-areas:
      "tac-title tac-pin tac-time tac-excel tac-rss tac-pdf tac-info";
  }

  .tac-title { grid-area: tac-title; }
  .tac-pin { grid-area: tac-pin; }
  .tac-time { grid-area: tac-time; }
  .tac-excel { grid-area: tac-excel; }
  .tac-rss { grid-area: tac-rss; }
  .tac-pdf { grid-area: tac-pdf; }
  .tac-info { grid-area: tac-info; }

  .tac-pin, .tac-time, .tac-rss,
  .tac-excel, .tac-pdf, .tac-info {
    background-color: transparent;
    max-width: 225px;
    min-width: 80px;
    font-family: 'Roboto Condensed', sans-serif;
    transition-duration: 0.3s;
    padding-left: 8px;
    padding-right: 8px;
    font-weight: 500;
    overflow: hidden;
    position: relative;
    border: 0;
    color: #31454d;
    line-height: 1;
    margin: 0;
  }

  .tac-pin:before, .tac-time:before,
  .tac-rss:before, .tac-excel:before,
  .tac-pdf:before, .tac-info:before {
    position: absolute;
    border-bottom: 3px solid #638a9b;
    left: calc(-100% + 0px);
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    transition: .2s ease all;
    z-index: -1;
  }

  .tac-pin:hover:before, .tac-time:hover:before,
  .tac-rss:hover:before, .tac-excel:hover:before,
  .tac-pdf:hover:before, .tac-info:hover:before {
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
  }

  .tac-pin:hover, .tac-time:hover,
  .tac-rss:hover, .tac-excel:hover,
  .tac-pdf:hover, .tac-info:hover {
    transition-duration: 0.3s;
    transform: scale(1.15);
    cursor: pointer;
    color: #131b1e;
  }

  .tac-pin, .tac-time, .tac-rss,
  .tac-excel, .tac-pdf, .tac-info > a { text-decoration: none; }

  @media screen and (max-width: 1200px) {
    .tac-action-grid {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
        "tac-title tac-pin tac-excel tac-pdf"
        "tac-title tac-time tac-rss tac-info";
    }
  }

  @media screen and (max-width: 700px) {
    .tac-action-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 0.7fr 1.1fr 1.1fr 1.1fr;
      grid-template-areas:
        "tac-title tac-title"
        "tac-pin tac-time"
        "tac-excel tac-rss"
        "tac-pdf tac-info";
    }

    .tac-pin, .tac-time, .tac-rss,
    .tac-excel, .tac-pdf, .tac-info {
      max-width: 100%;
      min-width: 80px;
    }
  }

/*/
// Section C:  
\\ Actions Inner Flexbox Row 
/*/
  .tac__flexBox {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    text-align: left;
    margin-left: 0px;
    font-weight: 500;
    font-size: 1.063rem;
    line-height: 0.9;
  }

  .tac__flexItem {
    flex: 0 1 auto;
    align-self: auto;
  }

  .tac__flexItem:nth-child(1) {
    padding-top: 5px;
  }

  .tac__flexItem:nth-child(2) {
    padding-left: 8px;
    max-width: 80px;
  }
}

/* LEVEL 11: 
   Table charts
   responsive styling
********************************************/
/* table graph view */
#table-MTIS svg, #table-MARTS svg, #table-QSS svg, #table-BFS svg,
#table-FTD svg, #table-MWTS svg, #table-M3 svg, #table-VIP svg,
#table-MWTSADV svg, #table-FTDADV svg, #table-MRTSADV svg,
#table-M3ADV svg, #table-RESSALES svg, #table-RESCONST svg,
#table-HV svg, #table-RV svg, #table-QFR svg, #table-QFRRETAIL svg {
  width: 100%;
  height: 100%; /* These settings allow the SVG to scale within the div */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#table-MTIS, #table-MARTS, #table-QSS, #table-BFS,
#table-FTD, #table-MWTS, #table-M3, #table-VIP,
#table-MWTSADV, #table-FTDADV, #table-MRTSADV,
#table-M3ADV, #table-RESSALES, #table-RESCONST,
#table-HV, #table-RV, #table-QFR, #table-QFRRETAIL {
  /* Default square dimensions for mobile */
  width: 100%;
  height: 100vw;
  max-height: 500px; /* Restrict size to be reasonable on desktop */
}

.chartBgTC {
  fill: #ffffff;
  filter: drop-shadow(0 3px 6px rgb(39 55 61 / 0.3));
  height: 89.5%; /* Square on Mobile */
  width: 87%;
  margin-right: 1rem;
}

@media (min-width: 768px) {
  #table-MTIS, #table-MARTS, #table-QSS, #table-BFS,
  #table-FTD, #table-MWTS, #table-M3, #table-VIP,
  #table-MWTSADV, #table-FTDADV, #table-MRTSADV,
  #table-M3ADV, #table-RESSALES, #table-RESCONST,
  #table-HV, #table-RV, #table-QFR, #table-QFRRETAIL {
    height: 50vw; /* Adjust based on desired aspect ratio */
    max-height: 400px; /* Maximum height on desktop */
  }

  /* Wide dimensions for desktop */
  .chartBgTC {
    fill: #ffffff;
    filter: drop-shadow(0 3px 6px rgb(39 55 61 / 0.3));
    height: 85%; /* Square on Mobile */
    width: 87.7%;
    margin-right: 1rem;
  }
}

/* QHD Desktop */
@media screen and (max-width: 2560px) { 
    /* Wide dimensions for desktop */
    .chartBgTC {
      fill: #ffffff;
      filter: drop-shadow(0 3px 6px rgb(39 55 61 / 0.3));
      height: 86%; /* Square on Mobile */
      width: 96.5%;
      margin-right: 1rem;
    }
}

/* HD Desktop */
@media screen and (max-width: 1920px) { 
    /* Wide dimensions for desktop */
    .chartBgTC {
      fill: #ffffff;
      filter: drop-shadow(0 3px 6px rgb(39 55 61 / 0.3));
      height: 86%; /* Square on Mobile */
      width: 95.3%;
      margin-right: 1rem;
    }
}

@media screen and (max-width: 1800px) { 
 .chartBgTC { height: 86%; width: 95%; }
}

@media screen and (max-width: 1680px) { 
 .chartBgTC { height: 86%; width: 94.7%; }
}

/* iPad Pro horizontal */
@media screen and (max-width: 1536px) { 
 .chartBgTC { height: 86%; width: 94.1%; }
}

@media screen and (max-width: 1440px) { 
 .chartBgTC { height: 86%; width: 93.7%; }
}

/* iPad Pro horizontal */
@media screen and (max-width: 1368px) { 
 .chartBgTC { height: 86%; width: 93.3%; }
}

/* iPad Pro horizontal */
@media screen and (max-width: 1280px) { 
 .chartBgTC { height: 86%; width: 92.9%; }
}

/* iPad Pro vertical */
@media screen and (max-width: 1024px) { 
 .chartBgTC { height: 86%; width: 90.8%; }
}

/* Surface Pro vertical */
@media screen and (max-width: 912px) { 
 .chartBgTC { height: 86%; width: 89.7%; }
}
  
/* iPad Air */
@media screen and (max-width: 820px) { 
 .chartBgTC { height: 86%; width: 88%; }
}

/* iPad Mini */
@media screen and (max-width: 768px) { 
 .chartBgTC { height: 85.4%; width: 87.7%; }
}

@media screen and (max-width: 767px) { 
 .chartBgTC { height: 88.8%; width: 87.6%; }
}

@media screen and (max-width: 700px) { 
 .chartBgTC { height: 88.8%; width: 86.2%; }
}

@media screen and (max-width: 650px) { 
 .chartBgTC { height: 88.8%; width: 85.2%; }
}
       

@media screen and (max-width: 600px) { 
 .chartBgTC { height: 88.8%; width: 84.2%; }
}
      

/*
  The big deal mobile media query
*/

@media screen and (max-width: 450px) { 
 .table-accordion__content { padding: 8px; }
 .comparison-boxes         { min-width: 300px; }
 .comparison-box-top       { height: 35px; }
 .comparison-top-svg       { height: 35px; }
 .comparison-box-bottom    { padding-top: 2px; padding-bottom: 2px; }
 .top-bg-angle             { padding-top: 8px; font-size: 1.25rem; }

 /***** Level 2 *****
  Period grid for left 
  & right patterns
 **********/
 .period__grid { height: 100px; }

 /***** Level 3 *****
  Left section of
  period grid
 **********/
 .period__left { width: 160px; }
 .period__left-item:nth-child(1) { font-size: 1.125rem; }
 .period__left-item:nth-child(2) { font-size: 0.813rem; }

 /***** Level 4 *****
  Right section of
  period grid
 **********/
 .period__right { width: 140px; }
 .period__right-item:nth-child(1) { font-size: 1.125rem; }
 .period__right-item:nth-child(2) { font-size: 0.813rem; }
 .tv_plus-minus { font-size: 1.375rem; }
 sup.tv { font-size: 1.375rem; }
 sup.tv-revised { font-size: 0.75rem; }
 h4.tv_change-display { font-size: 1.875rem; }
 sup.tv-symbol { 
  font-size: 0.625rem; 
  top: -1.1rem;
} 
 sub.tv, sub.tv-diff { font-size: 1rem; }

 #table-MTIS svg, #table-MARTS svg, #table-QSS svg, #table-BFS svg,
 #table-FTD svg, #table-MWTS svg, #table-M3 svg, #table-VIP svg,
 #table-MWTSADV svg, #table-FTDADV svg, #table-MRTSADV svg,
 #table-M3ADV svg, #table-RESSALES svg, #table-RESCONST svg,
 #table-HV svg, #table-RV svg, #table-QFR svg, #table-QFRRETAIL svg {
  padding-left: 1rem;
  padding-right: 1rem;
 }

 .chartBgTC { width: 78.2%; height: 86.5%; margin-right: 0rem; }
}

/* iPhone 12 Pro Max */
@media screen and (max-width: 430px) { 
  .chartBgTC { width: 78.5%; height: 86.8%; }
}

/* iPhone XR */
@media screen and (max-width: 414px) { 
  .chartBgTC { width: 77.5%; height: 86.4%; }
}

/* iPhone 12 Pro */
@media screen and (max-width: 390px) { 
 .chartBgTC { width: 75.9%; height: 85.6%; }
}

/* iPhone SE */
@media screen and (max-width: 375px) { 
 .chartBgTC { width: 75.7%; height: 85%; }
}

/* Samsung Galaxy S8 */
@media screen and (max-width: 360px) { 
 .chartBgTC { width: 77.7%; height: 86.3%; }
}

/*~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-
    OBJECTS SECTION
~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-*/


/* ========================================
   (1) Dialog
======================================== */

/******* Level 1 *******
  Dialog root level
**********/
dialog {
  padding: 0;
  border: 0;
  width: 650px;
  box-shadow: 0px 5px 10px 0px hsla(197.6,22.7%,14.7%, 0.5);
  overflow: hidden;
}

dialog::backdrop {
  background-color: hsla(192,21.7%,4.5%, 0.6);
}

/******* Level 2 *******
  Dialog header
**********/
.dialog__header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  box-shadow: 0px 3px 6px 0px rgba(9, 13, 14, 0.35);
  z-index: 10;
  position: relative;
  padding: 0 16px;
}

/******* Level 3 *******
   Dialog header title
 **********/
h5.dialog__title {
  font-size: 1.5rem;
  max-width: 350px;
  letter-spacing: 0.031rem;
  line-height: 0.95;
  position: relative;
}

@media screen and (max-width: 500px) {
  h5.dialog__title {
    font-size: 1.25rem;
    max-width: 250px;
    letter-spacing: 0.031rem;
    line-height: 0.95;
    position: relative;
  }
}

@media screen and (max-width: 430px) {
  h5.dialog__title {
    font-size: 1.25rem;
    max-width: 220px;
    letter-spacing: 0.031rem;
    line-height: 0.95;
    position: relative;
  }
}


/******* Level 4 *******
   Dialog header close btn
 **********/
.dialog__close-bg-container {
  position: absolute;
  right: 0;
  z-index: 11;
  width: 92px;
  height: 72px;
}

.dialog__close-symbol {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.3;
}

.dialog__close-btn {
  z-index: 12;
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  color: #ffffff;
  font-size: 0.813rem;
  letter-spacing: 0.031rem;
  font-weight: 500;
  margin-right: 4px;
}

.dialog__close-btn:hover {
  cursor: pointer;
  opacity: 0.7;
}

.dialog__close-box {
  width: 35px;
  height: 35px;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/********* Level 5 *********
   Dialog gradient background
 **********/
.dialog__grad-bg {
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
}

/******* Level 6 *******
   Dialog body
 **********/
.dialog__body {
  background-color: #fff;
  padding: 8px;
  box-shadow: 0px 3px 6px 0px rgba(9, 13, 14, 0.35);
}

@media screen and (max-width: 500px) {
  .dialog__body {
    max-height: 300px;
    overflow-y: scroll;
  }
}

p.dialog__text { font-size: 0.938rem; }

/********* Level 7 *********
   Dialog gradient collection
 **********/
/* 1: Business Applications */
.dialog__header-grad__BFS {
  background-image: linear-gradient(0deg,
      hsl(209deg 62% 34%) 0%,
      hsl(207deg 62% 34%) 29%,
      hsl(205deg 62% 34%) 43%,
      hsl(203deg 62% 34%) 57%,
      hsl(201deg 62% 34%) 71%,
      hsl(199deg 62% 34%) 100%);
}

.dialog__body-grad__BFS {
  background-image: linear-gradient(90deg,
      hsl(208deg 62% 29%) 0%,
      hsl(209deg 54% 27%) 20%,
      hsl(209deg 46% 24%) 40%,
      hsl(208deg 39% 21%) 60%,
      hsl(205deg 31% 18%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 2: Retailers Quarterly Profits */
.dialog__header-grad__QFRRETAIL {
  background-image: linear-gradient(0deg,
      hsl(209deg 62% 54%) 0%,
      hsl(207deg 62% 54%) 29%,
      hsl(205deg 62% 54%) 43%,
      hsl(203deg 62% 54%) 57%,
      hsl(201deg 62% 54%) 71%,
      hsl(199deg 62% 54%) 100%);
}

.dialog__body-grad__QFRRETAIL {
  background-image: linear-gradient(90deg,
      hsl(208deg 63% 49%) 0%,
      hsl(209deg 56% 43%) 20%,
      hsl(209deg 49% 36%) 40%,
      hsl(209deg 42% 29%) 60%,
      hsl(207deg 33% 22%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 3: Manufacturing Quarterly Profits */
.dialog__header-grad__QFR {
  background-image: linear-gradient(0deg,
      hsl(214deg 63% 69%) 0%,
      hsl(212deg 63% 69%) 29%,
      hsl(210deg 63% 69%) 43%,
      hsl(208deg 63% 69%) 57%,
      hsl(206deg 63% 69%) 71%,
      hsl(204deg 63% 69%) 100%);
}

.dialog__body-grad__QFR {
  background-image: linear-gradient(90deg,
      hsl(214deg 63% 69%) 0%,
      hsl(213deg 37% 57%) 20%,
      hsl(212deg 26% 46%) 40%,
      hsl(209deg 25% 35%) 60%,
      hsl(205deg 24% 24%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 4: Quarterly Services Revenue */
.dialog__header-grad__QSS {
  background-image: linear-gradient(0deg,
      hsl(187deg 89% 25%) 0%,
      hsl(185deg 88% 25%) 29%,
      hsl(183deg 87% 25%) 43%,
      hsl(181deg 87% 25%) 57%,
      hsl(179deg 87% 25%) 71%,
      hsl(177deg 89% 25%) 100%);
}

.dialog__body-grad__QSS {
  background-image: linear-gradient(90deg,
      hsl(187deg 88% 20%) 0%,
      hsl(188deg 65% 20%) 20%,
      hsl(189deg 51% 20%) 40%,
      hsl(191deg 41% 18%) 60%,
      hsl(192deg 31% 16%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 5: Advance Retail & Food Service Sales */
.dialog__header-grad__MARTS {
  background-image: linear-gradient(0deg,
      hsl(194deg 66% 51%) 0%,
      hsl(192deg 66% 52%) 29%,
      hsl(190deg 66% 52%) 43%,
      hsl(188deg 66% 52%) 57%,
      hsl(186deg 66% 52%) 71%,
      hsl(184deg 66% 51%) 100%);
}

.dialog__body-grad__MARTS {
  background-image: linear-gradient(90deg,
      hsl(193deg 66% 46%) 0%,
      hsl(194deg 58% 41%) 20%,
      hsl(195deg 50% 34%) 40%,
      hsl(195deg 42% 28%) 60%,
      hsl(196deg 33% 21%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 6: Advance Retail Inventories */
.dialog__header-grad__MRTSADV {
  background-image: linear-gradient(0deg,
      hsl(240deg 76% 40%) 0%,
      hsl(244deg 76% 40%) 29%,
      hsl(248deg 76% 40%) 43%,
      hsl(250deg 76% 40%) 57%,
      hsl(253deg 76% 40%) 71%,
      hsl(255deg 76% 40%) 100%);
}

.dialog__body-grad__MRTSADV {
  background-image: linear-gradient(90deg,
      hsl(240deg 76% 35%) 0%,
      hsl(243deg 64% 32%) 20%,
      hsl(244deg 53% 28%) 40%,
      hsl(242deg 41% 25%) 60%,
      hsl(233deg 30% 20%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 7: Business Inventories */
.dialog__header-grad__MTIS {
  background-image: linear-gradient(0deg,
      hsl(240deg 75% 60%) 0%,
      hsl(242deg 75% 60%) 29%,
      hsl(244deg 75% 60%) 43%,
      hsl(246deg 75% 60%) 57%,
      hsl(248deg 75% 60%) 71%,
      hsl(250deg 75% 60%) 100%);
}

.dialog__body-grad__MTIS {
  background-image: linear-gradient(90deg,
      hsl(240deg 75% 55%) 0%,
      hsl(242deg 55% 47%) 20%,
      hsl(242deg 48% 39%) 40%,
      hsl(241deg 39% 32%) 60%,
      hsl(233deg 31% 23%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 8: Wholesale Inventories */
.dialog__header-grad__MWTS {
  background-image: linear-gradient(0deg,
      hsl(245deg 75% 80%) 0%,
      hsl(247deg 75% 80%) 29%,
      hsl(249deg 75% 80%) 43%,
      hsl(251deg 75% 80%) 57%,
      hsl(253deg 75% 80%) 71%,
      hsl(255deg 75% 80%) 100%);
}

.dialog__body-grad__MWTS {
  background-image: linear-gradient(90deg,
      hsl(244deg 75% 75%) 0%,
      hsl(242deg 39% 62%) 20%,
      hsl(239deg 22% 50%) 40%,
      hsl(233deg 22% 37%) 60%,
      hsl(221deg 21% 26%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 9: Advance Wholesale Inventories */
.dialog__header-grad__MWTSADV {
  background-image: linear-gradient(0deg,
      hsl(232deg 66% 65%) 0%,
      hsl(234deg 66% 66%) 29%,
      hsl(236deg 66% 66%) 43%,
      hsl(238deg 65% 66%) 57%,
      hsl(241deg 66% 66%) 71%,
      hsl(243deg 66% 65%) 100%);
}

.dialog__body-grad__MWTSADV {
  background-image: linear-gradient(90deg,
      hsl(232deg 66% 60%) 0%,
      hsl(232deg 42% 51%) 20%,
      hsl(231deg 38% 41%) 40%,
      hsl(228deg 34% 32%) 60%,
      hsl(221deg 29% 23%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 10: Advance New Orders for
 Manufactured Durable Goods */
.dialog__header-grad__M3ADV {
  background-image: linear-gradient(0deg,
      hsl(199deg 16% 39%) 0%,
      hsl(197deg 16% 39%) 29%,
      hsl(195deg 16% 39%) 43%,
      hsl(194deg 16% 39%) 57%,
      hsl(192deg 16% 39%) 71%,
      hsl(190deg 16% 39%) 100%);
}

.dialog__body-grad__M3ADV {
  background-image: linear-gradient(90deg,
      hsl(198deg 16% 34%) 0%,
      hsl(197deg 16% 30%) 20%,
      hsl(197deg 17% 26%) 40%,
      hsl(196deg 18% 22%) 60%,
      hsl(196deg 20% 18%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 11: New Orders for Manufactured Goods */
.dialog__header-grad__M3 {
  background-image: linear-gradient(0deg,
      hsl(197deg 22% 60%) 0%,
      hsl(195deg 22% 60%) 29%,
      hsl(193deg 22% 60%) 43%,
      hsl(191deg 22% 60%) 57%,
      hsl(189deg 22% 60%) 71%,
      hsl(187deg 22% 60%) 100%);
}

.dialog__body-grad__M3 {
  background-image: linear-gradient(90deg,
      hsl(198deg 22% 55%) 0%,
      hsl(197deg 18% 46%) 20%,
      hsl(197deg 19% 38%) 40%,
      hsl(197deg 19% 30%) 60%,
      hsl(196deg 20% 22%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 12: Housing Starts */
.dialog__header-grad__RESCONST {
  background-image: linear-gradient(0deg,
      hsl(28deg 96% 48%) 0%,
      hsl(30deg 96% 48%) 29%,
      hsl(31deg 96% 48%) 43%,
      hsl(32deg 96% 48%) 57%,
      hsl(33deg 96% 48%) 71%,
      hsl(34deg 96% 48%) 100%);
}

.dialog__body-grad__RESCONST {
  background-image: linear-gradient(90deg,
      hsl(29deg 96% 43%) 0%,
      hsl(26deg 76% 40%) 20%,
      hsl(26deg 61% 34%) 40%,
      hsl(25deg 45% 28%) 60%,
      hsl(26deg 23% 22%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 13: Rental Vacancy Rate */
.dialog__header-grad__RV {
  background-image: linear-gradient(0deg,
      hsl(32deg 100% 50%) 0%,
      hsl(33deg 100% 50%) 29%,
      hsl(34deg 100% 50%) 43%,
      hsl(35deg 100% 50%) 57%,
      hsl(36deg 100% 50%) 71%,
      hsl(37deg 100% 50%) 100%);
}

.dialog__body-grad__RV {
  background-image: linear-gradient(90deg,
      hsl(32deg 100% 45%) 0%,
      hsl(29deg 76% 42%) 20%,
      hsl(28deg 61% 36%) 40%,
      hsl(28deg 46% 29%) 60%,
      hsl(29deg 24% 22%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 14: Homeownership Rate */
.dialog__header-grad__HV {
  background-image: linear-gradient(0deg,
      hsl(35deg 97% 57%) 0%,
      hsl(36deg 97% 57%) 29%,
      hsl(37deg 97% 57%) 43%,
      hsl(38deg 97% 57%) 57%,
      hsl(39deg 97% 57%) 71%,
      hsl(40deg 97% 57%) 100%);
}

.dialog__body-grad__HV {
  background-image: linear-gradient(90deg,
      hsl(35deg 98% 52%) 0%,
      hsl(34deg 72% 47%) 20%,
      hsl(33deg 58% 40%) 40%,
      hsl(32deg 44% 32%) 60%,
      hsl(34deg 23% 24%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 15: New Single Family Houses Sold */
.dialog__header-grad__RESSALES {
  background-image: linear-gradient(0deg,
      hsl(41deg 100% 59%) 0%,
      hsl(42deg 100% 59%) 29%,
      hsl(43deg 100% 59%) 43%,
      hsl(44deg 100% 59%) 57%,
      hsl(45deg 100% 59%) 71%,
      hsl(46deg 100% 59%) 100%);
}

.dialog__body-grad__RESSALES {
  background-image: linear-gradient(90deg,
      hsl(41deg 100% 54%) 0%,
      hsl(40deg 69% 48%) 20%,
      hsl(39deg 56% 41%) 40%,
      hsl(39deg 42% 32%) 60%,
      hsl(42deg 21% 24%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 16: Construction Spending */
.dialog__header-grad__VIP {
  background-image: linear-gradient(0deg,
      hsl(52deg 100% 50%) 0%,
      hsl(53deg 100% 50%) 29%,
      hsl(54deg 100% 50%) 43%,
      hsl(55deg 100% 50%) 57%,
      hsl(56deg 100% 50%) 71%,
      hsl(57deg 100% 50%) 100%);
}

.dialog__body-grad__VIP {
  background-image: linear-gradient(90deg,
      hsl(52deg 100% 45%) 0%,
      hsl(51deg 70% 44%) 20%,
      hsl(51deg 54% 38%) 40%,
      hsl(52deg 39% 30%) 60%,
      hsl(60deg 18% 23%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 17: Advance International Trade Deficit in Goods */
.dialog__header-grad__FTDADV {
  background-image: linear-gradient(0deg,
      hsl(264deg 49% 34%) 0%,
      hsl(266deg 49% 34%) 29%,
      hsl(268deg 49% 34%) 43%,
      hsl(270deg 49% 34%) 57%,
      hsl(272deg 49% 34%) 71%,
      hsl(274deg 49% 34%) 100%);
}

.dialog__body-grad__FTDADV {
  background-image: linear-gradient(90deg,
      hsl(264deg 49% 29%) 0%,
      hsl(261deg 42% 27%) 20%,
      hsl(257deg 34% 24%) 40%,
      hsl(249deg 26% 22%) 60%,
      hsl(229deg 21% 19%) 80%,
      hsl(195deg 22% 15%) 100%);
}

/* 18: International Trade Deficit in Goods & Services */
.dialog__header-grad__FTD {
  background-image: linear-gradient(0deg,
      hsl(309deg 41% 47%) 0%,
      hsl(311deg 41% 47%) 29%,
      hsl(313deg 41% 47%) 43%,
      hsl(315deg 41% 47%) 57%,
      hsl(317deg 41% 47%) 71%,
      hsl(319deg 41% 47%) 100%);
}

.dialog__body-grad__FTD {
  background-image: linear-gradient(90deg,
      hsl(309deg 41% 42%) 0%,
      hsl(307deg 35% 36%) 20%,
      hsl(303deg 27% 31%) 40%,
      hsl(293deg 20% 26%) 60%,
      hsl(264deg 13% 21%) 80%,
      hsl(195deg 22% 15%) 100%);
}


/* ========================================
   (2) Tooltip popup
======================================== */
.gv_card-title_SS > a {
  text-decoration: none;
  color: var(--text-color-100);
}

.gv_card-title_SS > a:hover {
  text-decoration: underline;
  color: var(--active-color);
}

/* Styling for the popup */
.popup[data-title]:hover:after {
  content: attr(data-title);
  position: absolute;
  white-space: wrap;
  top: 130%;
  left: 25%;
  background-color: #e6ebf0;
  color: #000;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  z-index: 20;
  box-shadow: 0px 3px 6px 0px rgba(19, 27, 30, 0.2);
  width: 200px;
}

/* Styling for the arrow pointing upwards */
.popup[data-title]:hover:before {
  content: '';
  position: absolute;
  bottom: -11px; /* Position the arrow just below the link */
  left: 50%;
  rotate: 180deg;
  border-width: 8px;
  border-style: solid;
  border-color: #c0ccdb transparent transparent transparent;
}

/* Ensures the link does not affect the popup placement */
.popup {
  position: relative;
  display: inline-block;
}

@media screen and (max-width: 400px) {
/* Styling for the popup */
.popup[data-title]:hover:after { top: 120%; }
}


/* ========================================
   (3) Index Indicator iFrame
======================================== */
.indicator-frame {
    overflow: auto; 
    border: 0px none; 
    width: 100%; 
    height: 700px;
}

@media screen and (max-width: 1060px) { .indicator-frame { height: 810px; }}
@media screen and (max-width: 988px)  { .indicator-frame { height: 1210px; }}
@media screen and (max-width: 720px)  { .indicator-frame { height: 1290px; }}
@media screen and (max-width: 580px)  { .indicator-frame { height: 1350px; }}
@media screen and (max-width: 390px)  { .indicator-frame { height: 1410px; }}