/* pivot */
/* Make this css compatible because it needs to be embedded in server side and note. */
/* Also, please do not use scss variables. */

.pivot-view {
  margin-top:0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-right: 5px solid transparent; /* margin-right somehow doesn't work with width:100% */
  font-size:14px;
  background-color: #fff;
  position:relative;
  padding-top:27px;
  line-height: 1.4;
}

.pivot-view.two-row-header-rows {
  padding-top: 48px;
}

.pivot-col-header-view {
  width: 100%;
  height: 29px;
  border-right: 5px solid transparent; /* margin-right somehow doesn't work with width:100% */
  font-size:14px;
  background-color: #fff;
  position: absolute;
  left:0;
  top:0;
  overflow-x: hidden; 
  overflow-y: hidden;
}

.pivot-view.two-row-header-rows .pivot-col-header-view{
  height: 60px;
}

.pivot-body-view {
  width: 100%;
  height: 100%; /*calc( 100% - 28px );*/
  overflow: auto;
  border-right: 5px solid transparent; /* margin-right somehow doesn't work with width:100% */
  font-size:14px;
  background-color: #fff;
  position:relative;
  /* Establish a stacking context so a body cell's local z-index (e.g. the
     in-cell Visual Formatting bar painter sets elCellText z-index:1 to keep
     the value text above its own bar background, PivotTableGenerator.js)
     cannot escape past this element. Without this, since neither .pivot-view
     nor .pivot-body-view previously created a stacking context, that z-index
     bubbled up to the nearest ancestor that does and beat .pivot-col-header-view
     (which has no explicit z-index) regardless of DOM order -- so a scrolled
     bar-formatted row's value text rendered on top of the sticky column header
     instead of being covered by it. z-index:0 keeps this element's own paint
     order versus .pivot-col-header-view unchanged (still resolved by DOM order,
     header-view is appended after and stays on top) while containing every
     positioned descendant's z-index within this box. #37676
  */
  z-index: 0;
}


.pivot-table-frame {
  display:table;
}
.pivot-table-frame .pivot-row {
  display:table-row;
}
.pivot-table-frame .pivot-row .pivot-cell {
  display:table-cell;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell {
  /* border-right: 1px solid #dfdfdf;*/
  /* border-bottom: 1px solid #dfdfdf;*/
  background-color: #fff;
  padding: 4px 10px;
  min-width: 60px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:right;
  white-space: nowrap;
  position:relative;
  font-family: 'Helvetica Neue', Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック","Hiragino Sans", "Hiragino Kaku Gothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* Should not allow multiple lines for header cells*/
.pivot-view.allow-multiple-lines .pivot-table-frame .pivot-row .pivot-cell:not(.header) {
  text-overflow: inherit;
  white-space: normal;
  /* #38056: break a single word that cannot fit the cell, instead of clipping it.
     Google Sheets behavior. NOT word-break:break-all, which would also split
     ordinary spaced text mid-word. */
  overflow-wrap: break-word;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.text-col {
  text-align:left; 
}


.pivot-view .pivot-table-frame .pivot-row.banded:nth-of-type(2n+1) .pivot-cell{
  background-color:#fafafa;
}



.pivot-view .pivot-table-frame .pivot-row .pivot-cell:first-of-type {
  /* border-left: 1px solid #dfdfdf;*/
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header {
  /* background-color: #f0f0f0;*/
  text-align:right; /* same alignment as measure numbers*/
  font-weight: bold;
  /* max-width: 150px;*/
  background-color: #fff;
  border-bottom: 1px solid var(--grid-line-color, #e0e0e0);
  /* font-family:Georgia, Palatino, serif;*/
}


.pivot-view .pivot-table-frame .pivot-row .pivot-cell.total {
  text-align:right; 
  font-weight: bold;
  background-color: #fff;
  border-top: 1px solid var(--grid-line-color, #e0e0e0);
}
.pivot-view .pivot-table-frame .pivot-row.no-top-border .pivot-cell.total {
  border-top: 0px solid var(--grid-line-color, #e0e0e0);
}
/* #22139: column totals shown at the top. Drop the redundant top border (the
   separate column-header frame above already provides the boundary) and add a
   divider below the last total row so the block is distinct from the data below. */
.pivot-view .pivot-table-frame .pivot-row.pivot-col-total-top .pivot-cell.total {
  border-top: 0px solid var(--grid-line-color, #e0e0e0);
}
.pivot-view .pivot-table-frame .pivot-row.pivot-col-total-top-last .pivot-cell.total {
  border-bottom: 1px solid var(--grid-line-color, #e0e0e0);
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.total.text-col {
  text-align:left;
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-total{
  border-top: 0px;
  font-weight: bold;
  text-align:right; 
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-total.text-col{
  text-align:left; 
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.subtotal {
  font-weight: bold;
}
/* #28152 follow-up: column-subtotal (colsubtotal) cells default to bold too, matching the
   row-subtotal default above -- an explicit Subtotal Font Style setting (inline style) still
   wins over this default. */
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.colsubtotal,
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.colsubtotal-header {
  font-weight: bold;
}
/* #35974 follow-up: measAsRow ("Value as Row") bottom-position subtotal -- the group's FIRST
   expanded measure row gets its own top divider separating it from the last data row above
   (Tableau parity). Distinct from the shared .total / .pivot-subtotal-top rules below so it
   doesn't interact with the "at top" position variant, which already has an equivalent divider. */
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.subtotal-top-divider {
  border-top: 1px solid var(--grid-line-color, #e0e0e0);
}
/* #22139: subtotal shown at the TOP of its group. Mirror the bottom-position divider --
   move the line to the TOP of the same cells that carry `bottom-border` at the bottom
   position (the group's own level rightward + the measure cells) and drop their bottom
   border, so the subtotal flows into its own detail rows below. Outer row-header cells
   have no `bottom-border`, so the divider does NOT pierce the outer (1st-level) row-header
   column. The higher class count beats the base `.pivot-cell.bottom-border` rule. */
.pivot-view .pivot-table-frame .pivot-row.pivot-subtotal-top .pivot-cell.subtotal.bottom-border {
  border-top: 1px solid var(--grid-line-color, #e0e0e0);
  border-bottom: 0px solid var(--grid-line-color, #e0e0e0);
}
/* The first subtotal row sits directly under the column header, whose own bottom border
   already separates it from the table -- suppress this row's top border so the two adjacent
   lines do not render as a doubled header line. */
.pivot-view .pivot-table-frame .pivot-row.pivot-subtotal-top.pivot-subtotal-top-first .pivot-cell.subtotal.bottom-border {
  border-top: 0px solid var(--grid-line-color, #e0e0e0);
}
/* #22139: a TOP-LEVEL top subtotal that sits directly ABOVE its first data row (the only
   subtotal in "Top Level Only", and the single subtotal level in 2-row-header "All Levels").
   Restore the bottom divider so it is separated from its detail rows -- without this the
   subtotal merges into the data below. A LOWER-level subtotal that precedes data (innermost
   level in "All Levels" with 3+ row headers) does NOT get this class, so it has no bottom
   divider. Higher class count (two row classes) beats the .pivot-subtotal-top rule above that
   zeroes the bottom border. The top border is governed independently by the rules above
   (kept for non-first rows, suppressed for the first). */
.pivot-view .pivot-table-frame .pivot-row.pivot-subtotal-top.pivot-subtotal-top-before-data .pivot-cell.subtotal.bottom-border {
  border-bottom: 1px solid var(--grid-line-color, #e0e0e0);
}
/* #22139: the before-data divider must NOT pierce the OUTERMOST group-value column (the
   1st-level row header, e.g. gender). That value cell is always the FIRST cell of a top-level
   subtotal row, and its group continues into the data rows below -- a line under it would cut
   through the group. Suppress the bottom border there; the divider still spans the "Subtotal"
   title cell rightward + the measures. (:first-child raises specificity above the rule above.) */
.pivot-view .pivot-table-frame .pivot-row.pivot-subtotal-top.pivot-subtotal-top-before-data .pivot-cell.subtotal.bottom-border:first-child {
  border-bottom: 0px solid var(--grid-line-color, #e0e0e0);
}
/* #22139 measAsRow follow-up: once a top-position subtotal block whose title sits above the
   leaf level (see 'pivot-subtotal-top-before-data' above) expands into multiple physical rows
   (measAsRow / "Value as Row"), the OPENING divider (border-top, via 'bottom-border' above) and
   the CLOSING divider (border-bottom, separating the block from its group's data below) land on
   two different physical rows -- the block's first and last expanded measure row respectively.
   This class carries the closing divider only, decoupled from 'bottom-border' so it never also
   inherits the reinterpreted border-top from the rule above. Plain / unscoped by row class: the
   JS only adds it to the correct row+cells (rightward of the fixed group-value column). */
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.subtotal-close-divider {
  border-bottom: 1px solid var(--grid-line-color, #e0e0e0);
}


.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-header {
  text-align:left; 
  padding-right:10px;
  max-width: 250px;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-header.wrap {
  white-space:initial;
  padding-right:5px;
  /* #38056: break a single word that cannot fit the cell, instead of clipping it.
     Google Sheets behavior. NOT word-break:break-all, which would also split
     ordinary spaced text mid-word. */
  overflow-wrap: break-word;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-header.wrap-responsive-width {
  white-space:initial;
  padding-right:5px;
  /* #38056: break a single word that cannot fit the cell, instead of clipping it.
     Google Sheets behavior. NOT word-break:break-all, which would also split
     ordinary spaced text mid-word. */
  overflow-wrap: break-word;
}

/* #30634: when a grouped row-header label wraps, span it across the group so
   sibling child rows stay equal height. Applied by _equalizeGroupedRowHeights. */
.pivot-view.allow-multiple-lines .pivot-table-frame .pivot-row .pivot-cell.row-header.row-header-group-span {
  position: relative;
  overflow: visible;
  vertical-align: top;
  z-index: 1;
}
.pivot-view.allow-multiple-lines .pivot-table-frame .pivot-row .pivot-cell.row-header.row-header-group-span > .row-header-group-span-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  z-index: 2;
}
/* #30634 follow-up: the anchor cell's own box is only its single (first) row, but the
   label overlay above visually spans every row in the group -- Show Detail hover must
   highlight the whole overlay, not just the anchor's own row. Hovering anywhere over the
   overlay (even the portion visually over sibling rows) still matches :hover on the
   anchor cell (its DOM ancestor), so painting the background on the overlay text itself
   (which is exactly spanHeight tall) covers the full group. */
.pivot-view.allow-multiple-lines .pivot-table-frame .pivot-row .pivot-cell.row-header.row-header-group-span.clickable:hover > .row-header-group-span-text {
  background-color: #f0f0f0;
}
/* No !important: this must lose to any inline background-color that Row Header
   Visual/Conditional Formatting (#22139) sets on a continuation cell so a colored
   group stays continuous. Its own selector specificity already beats the plain
   zebra-banding rule (.pivot-row.banded:nth-of-type(2n+1) .pivot-cell), which is
   the only thing this rule needs to override when no formatting color is set. */
.pivot-view.allow-multiple-lines .pivot-table-frame .pivot-row .pivot-cell.row-header.row-header-group-fill {
  background-color: transparent;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header.col-header {
  cursor:pointer;
  position:relative;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header.col-header.no-pointer-cursor {
  cursor:default;
}

/* Allow the resize handle to extend past the cell; default header cells use overflow:hidden. */
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header.pivot-header-with-resize-handle {
  overflow: visible;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header .pivot-resize-handle {
  position: absolute;
  right: -4px;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}

.pivot-view .pivot-resize-line {
  position: absolute;
  top: 0;
  width: 3px;
  background-color: #00ab7d;
  pointer-events: none;
  z-index: 10;
}

/* Body-area resize trigger: when the cursor is inside a column right-edge hot
   zone in the body, the trigger adds .body-resize-hover to .pivot-view. The
   second selector has higher specificity than .pivot-cell.clickable's
   cursor:pointer, so clickable body cells show col-resize too. #34919 */
.pivot-view.body-resize-hover,
.pivot-view.body-resize-hover .pivot-table-frame .pivot-row .pivot-cell.clickable {
  cursor: col-resize;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header.col-header.with-sort > .pivot-cell-text > i{
  position:absolute;
  top: 8px;
  right: 0;
}

/* allow cell text to draw beyond the cell frame. */
.pivot-view .pivot-col-header-view .pivot-table-frame .pivot-row .pivot-cell.header.col-header.col-span {
  z-index: 1;
  overflow: visible;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header.col-header.text-col,
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header.row-header.text-col {
  text-align: left; 
}

/* #23153 setting a shorter left/right padding to avoid unwanted text ellipsis */
.pivot-view .pivot-col-header-view .pivot-table-frame .pivot-row .pivot-cell.header.col-header.text-col,
.pivot-view .pivot-col-header-view .pivot-table-frame .pivot-row .pivot-cell.header.row-header {
  padding-right:8px; 
}
.pivot-view .pivot-col-header-view .pivot-table-frame .pivot-row .pivot-cell.header.col-header.num-col {
  padding-left:8px; 
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-header.no-bottom-border {
  border-bottom:0px solid white;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-header.bottom-border {
  border-bottom:1px solid var(--grid-line-color, #e0e0e0);
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.bottom-border {
  border-bottom:1px solid var(--grid-line-color, #e0e0e0);
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.header.row-header {
  text-align: left; 
  max-width: 250px;
}
.pivot-view.header-nowrap .pivot-table-frame .pivot-row .pivot-cell.header {
  max-width: unset;
}
.pivot-view.header-allow-multiple-lines .pivot-col-header-view {
  height: unset;
}
.pivot-view.header-allow-multiple-lines .pivot-table-frame .pivot-row .pivot-cell.header .pivot-cell-text {
  /* #37133: pre-line (not initial/normal) so a literal "\n" in a translated header label
     (e.g. Correspondence Analysis "調整済み\n標準化残差") forces a break at that exact
     point, while still soft-wrapping normally if a line is too long for the column. */
  white-space: pre-line;
  /* #38056: break a single word that cannot fit the cell, instead of clipping it.
     Google Sheets behavior. NOT word-break:break-all, which would also split
     ordinary spaced text mid-word. */
  overflow-wrap: break-word;
}

/* table case */
.pivot-view.type-table .pivot-table-frame .pivot-row .pivot-cell {
  /* text-align:left; */ 
  max-width: 400px;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-header.grouped {
  background-color:#fff; 
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.row-header.thick {
  font-weight:bold; 
}


.pivot-view .pivot-table-frame .pivot-row:first-of-type .pivot-cell {
  /* border-top: 1px solid #dfdfdf;*/
  text-align:right;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell a ,
.pivot-view .pivot-table-frame .pivot-row .pivot-cell a:hover,
.pivot-view .pivot-table-frame .pivot-row .pivot-cell a:active,
.pivot-view .pivot-table-frame .pivot-row .pivot-cell a:focus {
  color: inherit;
  text-decoration: underline;
}

.pivot-view .pivot-table-frame .pivot-row .pivot-cell a.no-text-deco {
  text-decoration: none;
}

/* Highilght by click */
.pivot-view .pivot-table-frame .pivot-row.selected .pivot-cell{
  background-color:#eee!important;
}

/* Show detail */
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.clickable {
  cursor:pointer;
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.clickable:hover {
  background-color: #f0f0f0!important;
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.clickable:hover > span {
  color: #333!important;
}

.pivot-view .pivot-table-frame.hide-rows .pivot-row.banded  {
  display: none;
}

.pivot-metainfo {
  height:18px;
  font-size: 12px;
  color: #999;
  font-family: 'Helvetica Neue', Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック","Hiragino Sans", "Hiragino Kaku Gothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  padding-left:11px;
  background-color: #fff;
}
.pivot-metainfo.hidden {
  display:none;
}

.pivot-toolbar {
  height:28px;
  padding-left:0px; /* Remove left padding. From Kan, 5/31/2021.*/
  font-size: 12px;
  line-height: 1em;
  font-family: 'Helvetica Neue', Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック","Hiragino Sans", "Hiragino Kaku Gothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.pivot-toolbar.hidden {
  display:none;
}

.pivot-title {
  height: 33px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  padding-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4d4d4d;
  font-family: 'Helvetica Neue', Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック","Hiragino Sans", "Hiragino Kaku Gothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #fff;
  margin-bottom:6px;

}    
.pivot-title.hidden {
  display: none;
}

.pivot-col-title {
  font-size:14px;
  line-height: 1.4;
  padding-left:10px;
  padding-bottom:4px;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4d4d4d;
  font-family: 'Helvetica Neue', Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック","Hiragino Sans", "Hiragino Kaku Gothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #fff;
}    
.pivot-col-title.hidden {
  display: none;
}
.pivot-col-title.wrap {
  /* #38147 follow-up: driven by the chart-wide "Text Wrap -> Header" toggle
     (viz.pivotHeaderTextWrap) -- same wrap treatment as
     .pivot-cell.header .pivot-cell-text (#37133, #38056). */
  white-space: pre-line;
  overflow-wrap: break-word;
  overflow: visible;
  text-overflow: unset;
}



.pivot-table-frame.pivot-data-popover {
  display: block;
  overflow-wrap: break-word;
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 26px;
}
.pivot-table-frame.pivot-data-popover .pivot-row .pivot-cell {
}
.pivot-table-frame.pivot-data-popover  .pivot-row .pivot-cell.value-cell {
  color: #111;
  font-weight:bold;
  
}

/* Hidden until repositioned at mouse cursor to prevent visible reflow jank. */
.pivot-balloon-style.reposition-pending {
  visibility: hidden;
}

.pivot-balloon-style {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 14px;
  font-size: 14px;
  font-weight: normal;
  background-color: #fff;
  color: #555;
  max-width: 600px;
  z-index: 1050; /* VizPreviewDialog uses 1040 so it should be bigger than that. */
  white-space: pre-wrap; /* Show newlines as newlines */
  line-height: 1.6em;
  -webkit-box-shadow: 0 5px 10px #00000033;
  box-shadow: 0 5px 10px #00000033;
  transform: translateY(8px); /* Adjust balloon position to be slightly lower */
}

.pivot-balloon-style .balloon-content-wrapper {
  position: relative;
  padding-right: 24px; /* Reserve room for the copy icon so it never overlaps the text. #37870 */
}

.pivot-balloon-style .balloon-content-wrapper .copy-text-icon-wrapper {
  position: absolute;
  top: -4px;
  right: -5px;
  padding: 6px;
  background-color: #fff;
}

.pivot-balloon-style .balloon-content-wrapper .copy-text-icon {
  cursor: pointer;
  /* fa-copy icon from FA6. fill="#4d4d4d" */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMC4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBmaWxsPSIjNGQ0ZDRkIiBkPSJNMjcyIDQxNkMyNjMuMiA0MTYgMjU2IDQyMy4yIDI1NiA0MzJWNDQ4YzAgMTcuNjctMTQuMzMgMzItMzIgMzJINjRjLTE3LjY3IDAtMzItMTQuMzMtMzItMzJWMTkyYzAtMTcuNjcgMTQuMzMtMzIgMzItMzJoMTEyQzE4NC44IDE2MCAxOTIgMTUyLjggMTkyIDE0NEMxOTIgMTM1LjIgMTg0LjggMTI4IDE3NiAxMjhINjMuOTljLTM1LjM1IDAtNjQgMjguNjUtNjQgNjRsLjAwOTggMjU2QzAgNDgzLjMgMjguNjUgNTEyIDY0IDUxMmgxNjBjMzUuMzUgMCA2NC0yOC42NSA2NC02NHYtMTZDMjg4IDQyMy4yIDI4MC44IDQxNiAyNzIgNDE2ek01MDIuNiA4Ni42M2wtNzcuMjUtNzcuMjVDNDE5LjQgMy4zNzEgNDExLjIgMCA0MDIuNyAwSDI4OEMyNTIuNyAwIDIyNCAyOC42NSAyMjQgNjR2MjU2YzAgMzUuMzUgMjguNjUgNjQgNjQgNjRoMTYwYzM1LjM1IDAgNjQtMjguNjUgNjQtNjRWMTA5LjNDNTEyIDEwMC44IDUwOC42IDkyLjYzIDUwMi42IDg2LjYzek00MTYgNDUuMjVMNDY2LjcgOTZINDE2VjQ1LjI1ek00ODAgMzIwYzAgMTcuNjctMTQuMzMgMzItMzIgMzJoLTE2MGMtMTcuNjcgMC0zMi0xNC4zMy0zMi0zMlY2NGMwLTE3LjY3IDE0LjMzLTMyIDMyLTMyaDk2bC4wMDI2IDY0YzAgMTcuNjcgMTQuMzMgMzIgMzIgMzJINDgwVjMyMHoiLz48L3N2Zz4=");
  width: 13px;
  height: 14px;
  display: inline-block;
  background-size: 13px;
  background-repeat: no-repeat;
}

.pivot-balloon-style .balloon-content-wrapper .copy-text-icon.copied {
  /* fa-check icon from FA6. fill="#4d4d4d" (gray, same as copy icon) */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjNGQ0ZDRkIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+");
  cursor: default;
  width: 14px;
  height: 14px;
  background-size: 14px;
}

.pivot-balloon-style ul ,
.pivot-balloon-style ol {
  margin-top: 10px;
  margin-bottom: 0px;
}

.pivot-col-header-view .pivot-cell.header .pivot-cell-text {
  text-overflow: ellipsis;
  overflow:hidden;
  width: 100%;
}

.pivot-col-header-view .icon-sort-direction-desc {
  /* Down caret from FA4 */
  display: inline-block;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNDA4IDcwNHEwIDI2LTE5IDQ1bC00NDggNDQ4cS0xOSAxOS00NSAxOXQtNDUtMTlsLTQ0OC00NDhxLTE5LTE5LTE5LTQ1dDE5LTQ1IDQ1LTE5aDg5NnEyNiAwIDQ1IDE5dDE5IDQ1eiIvPjwvc3ZnPgo=');
  background-size: 12px;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
}

.pivot-col-header-view .icon-sort-direction-asc {
  /* Up caret from FA4 */
  display: inline-block;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNDA4IDEyMTZxMCAyNi0xOSA0NXQtNDUgMTloLTg5NnEtMjYgMC00NS0xOXQtMTktNDUgMTktNDVsNDQ4LTQ0OHExOS0xOSA0NS0xOXQ0NSAxOWw0NDggNDQ4cTE5IDE5IDE5IDQ1eiIvPjwvc3ZnPgo=');
  background-size: 12px;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
}

.pivot-toolbar .search-container {
  display: inline-block;
  position: relative;
  margin-right: 14px;
  vertical-align: baseline;
}
.pivot-toolbar .search-field {
  width: 180px;
  height: 23px; 
  background-color: white;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 3px;
  outline: none;
  margin: 0px 4px 0px 0px;
  vertical-align: baseline;
  display: inline-block;
  line-height: 1em;
  padding: 0px 20px 0px;
  font-size: 12px;
}

.pivot-toolbar .icon-search {
  /* Search from FA4 */
  display: inline-block;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNTA4LjUgNDgxLjZsLTEyOS0xMjljLTIuMy0yLjMtNS4zLTMuNS04LjUtMy41aC0xMC4zQzM5NSAzMTIgNDE2IDI2Mi41IDQxNiAyMDggNDE2IDkzLjEgMzIyLjkgMCAyMDggMFMwIDkzLjEgMCAyMDhzOTMuMSAyMDggMjA4IDIwOGM1NC41IDAgMTA0LTIxIDE0MS4xLTU1LjJWMzcxYzAgMy4yIDEuMyA2LjIgMy41IDguNWwxMjkgMTI5YzQuNyA0LjcgMTIuMyA0LjcgMTcgMGw5LjktOS45YzQuNy00LjcgNC43LTEyLjMgMC0xN3pNMjA4IDM4NGMtOTcuMyAwLTE3Ni03OC43LTE3Ni0xNzZTMTEwLjcgMzIgMjA4IDMyczE3NiA3OC43IDE3NiAxNzYtNzguNyAxNzYtMTc2IDE3NnoiLz48L3N2Zz4=');
  background-size: 10px;
  width: 10px;
  height: 10px;
  position:absolute;
  left:6px;
  top:7px;
  background-repeat: no-repeat;
  filter: invert(74%) sepia(6%) saturate(111%) hue-rotate(114deg) brightness(92%) contrast(88%);
}

.pivot-toolbar .icon-close {
  /* Times from FA4 */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48cGF0aCBkPSJNMjA3LjYgMjU2bDEwNy43Mi0xMDcuNzJjNi4yMy02LjIzIDYuMjMtMTYuMzQgMC0yMi41OGwtMjUuMDMtMjUuMDNjLTYuMjMtNi4yMy0xNi4zNC02LjIzLTIyLjU4IDBMMTYwIDIwOC40IDUyLjI4IDEwMC42OGMtNi4yMy02LjIzLTE2LjM0LTYuMjMtMjIuNTggMEw0LjY4IDEyNS43Yy02LjIzIDYuMjMtNi4yMyAxNi4zNCAwIDIyLjU4TDExMi40IDI1NiA0LjY4IDM2My43MmMtNi4yMyA2LjIzLTYuMjMgMTYuMzQgMCAyMi41OGwyNS4wMyAyNS4wM2M2LjIzIDYuMjMgMTYuMzQgNi4yMyAyMi41OCAwTDE2MCAzMDMuNmwxMDcuNzIgMTA3LjcyYzYuMjMgNi4yMyAxNi4zNCA2LjIzIDIyLjU4IDBsMjUuMDMtMjUuMDNjNi4yMy02LjIzIDYuMjMtMTYuMzQgMC0yMi41OEwyMDcuNiAyNTZ6Ii8+PC9zdmc+');
  background-size: 8px;
  width: 8px;
  height: 11px;
  position:absolute;
  left:164px;
  top:6px;
  cursor:pointer;
  background-repeat: no-repeat;
  filter: invert(74%) sepia(6%) saturate(111%) hue-rotate(114deg) brightness(92%) contrast(88%);
  display:none;
}

.pivot-toolbar .search-btn {
  height: 21px; 
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 0px;
  vertical-align: top;
  outline : none;
  border : 1px solid #cccccc;
  background-color: #f9f9f9;
  border-radius : 3px;
  font-size:11px;
}
.pivot-toolbar .search-btn:hover {
  background-color: #f0f0f0;
}


/* Hide table header belongs to the table body view. */
.pivot-view .pivot-table-frame.pivot-table-body-frame {
  margin-top: -10px;
}

.pivot-view .pivot-table-frame.pivot-table-body-frame .pivot-row .pivot-cell.header.col-header {
  border-bottom-color: transparent;
}

.pivot-view .pivot-table-frame.pivot-table-body-frame .pivot-row .pivot-cell.header.row-header {
  border-bottom-color: transparent;
}

.pivot-view .pivot-table-frame.pivot-table-col-header-frame .pivot-row .pivot-cell.header.col-header i.icon-info{
  /* fa-infor-circle */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDBDMTE0LjYgMCAwIDExNC42IDAgMjU2czExNC42IDI1NiAyNTYgMjU2czI1Ni0xMTQuNiAyNTYtMjU2UzM5Ny40IDAgMjU2IDB6TTI1NiA0ODBjLTEyMy41IDAtMjI0LTEwMC41LTIyNC0yMjRzMTAwLjUtMjI0IDIyNC0yMjRzMjI0IDEwMC41IDIyNCAyMjRTMzc5LjUgNDgwIDI1NiA0ODB6TTI1NiAxODRjMTMuMjUgMCAyNC0xMC43NCAyNC0yNGMwLTEzLjI1LTEwLjc1LTI0LTI0LTI0UzIzMiAxNDYuNyAyMzIgMTYwQzIzMiAxNzMuMyAyNDIuNyAxODQgMjU2IDE4NHpNMzA0IDM1MmgtMzJWMjQwQzI3MiAyMzEuMiAyNjQuOCAyMjQgMjU2IDIyNEgyMjRDMjE1LjIgMjI0IDIwOCAyMzEuMiAyMDggMjQwUzIxNS4yIDI1NiAyMjQgMjU2aDE2djk2aC0zMkMxOTkuMiAzNTIgMTkyIDM1OS4yIDE5MiAzNjhDMTkyIDM3Ni44IDE5OS4yIDM4NCAyMDggMzg0aDk2YzguODM2IDAgMTYtNy4xNjQgMTYtMTZDMzIwIDM1OS4yIDMxMi44IDM1MiAzMDQgMzUyeiIvPjwvc3ZnPg==');
  background-size: 12px;
  width: 16px;
  height: 12px;
  padding-right: 6px;
  cursor:pointer;
  transform: translateY(1px);
  background-repeat: no-repeat;
  display:none;
  opacity: 0.5;
  margin-right: -20px;
}

.pivot-view .pivot-table-frame.pivot-table-col-header-frame .pivot-row .pivot-cell.header.col-header:hover i.icon-info{
  display:inline-flex;
}

/* Set 100% height to avoid unnecessary space between header and body. */
.pivot-view .pivot-table-frame.pivot-table-col-header-frame {
  height: 100%;
}


.pivot-body-view .pivot-cell.header.col-header, .pivot-body-view .pivot-cell.header.row-header {
  /* It is impossible to make this hidden table header area zero-height 
     if there is text in this area. We make it to 10px here, and 
     we set -10px top margin to adjust.  */
  height: 10px!important;
  overflow:hidden;
  padding-top:0px;
  padding-bottom:0px;
  line-height:0px;
}
.pivot-body-view .pivot-cell.header.col-header .pivot-cell-text, .pivot-body-view .pivot-cell.header.row-header .pivot-cell-text {
  /* It is impossible to make this hidden table header area zero-height 
     if there is text in this area. We make it to 10px here, and 
     we set -10px top margin to adjust.  */
  height: 10px!important;
  overflow:hidden;
  text-overflow: ellipsis;
  display: inline-block;
  opacity: 0;
  width: 100%;
}


.pivot-view .pivot-table-frame .pivot-row .pivot-cell.col-separator {
  border-left: 1px solid var(--grid-line-color, #e0e0e0);
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.col-separator:first-child {
  border-left: none;
}


.pivot-view .pivot-table-frame .pivot-row .pivot-cell.value-separator {
  border-left: 1px solid var(--grid-line-color, #e0e0e0);
}
.pivot-view .pivot-table-frame .pivot-row .pivot-cell.value-separator:first-child {
  border-left: none;
}
.single-value-box {
  width:100%;
  position:relative;
  display: table;
  /*This stop growing the number value and caption text width.*/
  table-layout:fixed;
}

.single-value-box .single-value-innerbox {
  border-radius:2px;
  font-family: "Helvetica Neue", Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック","Hiragino Sans", "Hiragino Kaku Gothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  display:table-cell;
  vertical-align: top;
  width: 100%;
}
.single-value-box .single-value-innerbox .single-value-text {
  font-size:42px;
  line-height:1.2em;
  font-weight:bold;
  margin-top:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  height:50px;
}

.single-value-box .single-value-innerbox .single-value-text.additional {
  color: #999;
  font-weight: normal;
}

/* #38545: every declared px below is the k=1 rendering of
   VizUtil.SINGLE_VALUE_LAYOUT (the Number's 100px vertical budget). CSS cannot compute,
   so the numbers are duplicated here -- SingleValueLayoutBudgetStyle.test.js reads this
   stylesheet back and fails if either the individual values or the four variant sums
   drift from that budget. Change the budget there, then mirror it here.

   Gaps live on the LOWER element's margin-top: adjacent vertical margins collapse to
   max(), so splitting a gap across two siblings silently loses the smaller half. */
.single-value-box .single-value-innerbox .single-value-text-with-ratio {
  font-size:38px;
  line-height:1.05em;
  font-weight:bold;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top: 4px;
  margin-bottom: 0px;
  height:40px;
}

/* If there is no sub display, we need to adjust the margin and font size. */
.single-value-box .single-value-innerbox.no-sub-display .single-value-text-with-ratio {
  font-size: 47px;
  line-height: 1.2em;
  height: 57px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.single-value-box .single-value-innerbox .single-value-text.no-margin {
  margin-top:0px;
}

.single-value-box .single-value-innerbox .single-value-caption {
  margin-top:4px;
  height:44px;
  font-size:14px;
  line-height:1.5em;
  display: block;
  white-space:nowrap;
  overflow: hidden; 
  text-overflow:ellipsis;
}

.single-value-box .single-value-innerbox .single-value-ratio {
  margin-top:4px;
  margin-bottom: 0px;
  height:21px;
  font-size:13px;
  line-height:21px;
  display: block;
  white-space:nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
/* Red Arrow Down*/
.single-value-box .single-value-innerbox .single-value-ratio .exp.fa-arrow-down-icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMC4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNMzc4LjggMzA5LjhsLTE3NiAxNjUuOUMxOTkuNyA0NzguNiAxOTUuOSA0ODAgMTkyIDQ4MHMtNy43MTktMS40MjYtMTAuNzctNC4zMWwtMTc2LTE2NS45Qy0xLjI5NyAzMDMuNi0xLjc4MSAyOTMuMSA0LjE1NiAyODYuM2M1Ljk1My02LjgzOCAxNi4wOS03LjI1OSAyMi42MS0xLjEzNEwxNzYgNDI1LjlWNDguNTljMC05LjE3MSA3LjE1Ni0xNi41OSAxNS4xLTE2LjU5UzIwOCAzOS40MiAyMDggNDguNTl2Mzc3LjNsMTQ5LjItMTQwLjdjNi41MTYtNi4xMjUgMTYuNjYtNS43MDQgMjIuNjEgMS4xMzRDMzg1LjggMjkzLjEgMzg1LjMgMzAzLjYgMzc4LjggMzA5Ljh6Ii8+PC9zdmc+");
  width: 10px;
  height: 11px;
  display: inline-block;
  background-size: 9px;
  background-repeat: no-repeat;
}
/* Green Arrow Down with Flip */
.single-value-box .single-value-innerbox .single-value-ratio .exp.fa-arrow-down-icon.flip {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBmaWxsPSIjMDBhYjZkIiBkPSJNMTgwLjcgNDc1LjNjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBsMTc2LTE3NmM2LjItNi4yIDYuMi0xNi40IDAtMjIuNnMtMTYuNC02LjItMjIuNiAwTDIwOCA0MjUuNCAyMDggNDhjMC04LjgtNy4yLTE2LTE2LTE2cy0xNiA3LjItMTYgMTZsMCAzNzcuNEwyNy4zIDI3Ni43Yy02LjItNi4yLTE2LjQtNi4yLTIyLjYgMHMtNi4yIDE2LjQgMCAyMi42bDE3NiAxNzZ6Ii8+PC9zdmc+Cg==")
}
/* Green Arrow Up */
.single-value-box .single-value-innerbox .single-value-ratio .exp.fa-arrow-up-icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMC4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBmaWxsPSIjMDBhYjZkIiBkPSJNMzc5LjggMjI1LjdDMzc2LjcgMjI5LjMgMzcyLjMgMjMxLjEgMzY4IDIzMS4xYy0zLjg0NCAwLTcuNzAzLTEuNDI2LTEwLjc3LTQuMzFMMjA4IDg2LjEydjM3Ny4zYzAgOS4xNzEtNy4xNTYgMTYuNTktMTUuMSAxNi41OVMxNzYgNDcyLjYgMTc2IDQ2My40Vjg2LjEybC0xNDkuMiAxNDAuN0MyMC4yNSAyMzIuMSAxMC4xNCAyMzIuNSA0LjE1NiAyMjUuN0MtMS43ODEgMjE4LjktMS4yOTcgMjA4LjQgNS4yMzQgMjAyLjJsMTc2LTE2NS45YzYuMDk0LTUuNzY4IDE1LjQ0LTUuNzY4IDIxLjUzIDBsMTc2IDE2NS45QzM4NS4zIDIwOC40IDM4NS44IDIxOC45IDM3OS44IDIyNS43eiIvPjwvc3ZnPg==");
  width: 10px;
  height: 11px;
  display: inline-block;
  background-size: 11px;
  background-repeat: no-repeat;
}
/* Red Arrow Up with Flip */
.single-value-box .single-value-innerbox .single-value-ratio .exp.fa-arrow-up-icon.flip {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNMjAzLjMgMzYuN2MtNi4yLTYuMi0xNi40LTYuMi0yMi42IDBsLTE3NiAxNzZjLTYuMiA2LjItNi4yIDE2LjQgMCAyMi42czE2LjQgNi4yIDIyLjYgMEwxNzYgODYuNiAxNzYgNDY0YzAgOC44IDcuMiAxNiAxNiAxNnMxNi03LjIgMTYtMTZsMC0zNzcuNEwzNTYuNyAyMzUuM2M2LjIgNi4yIDE2LjQgNi4yIDIyLjYgMHM2LjItMTYuNCAwLTIyLjZsLTE3Ni0xNzZ6Ii8+PC9zdmc+Cg==")
}

.single-value-box .single-value-innerbox .single-value-ratio .single-value-ratio-token {
  background-color: #daf2dc;
  color: #00ab6d;
  padding-top: 2px;
  border-radius: 12px;
  padding-bottom: 2px;
  padding-right: 8px;
  padding-left: 8px;
  line-height: 21px;
}

.single-value-box .single-value-innerbox .single-value-ratio .single-value-ratio-token-na {
  background-color: rgb(242, 242, 242);
  padding-top: 2px;
  border-radius: 12px;
  padding-bottom: 2px;
  padding-right: 25px;
  padding-left: 25px;
  line-height: 21px;
}

.single-value-box .single-value-innerbox .single-value-ratio .single-value-ratio-desc {
  padding-left: 10px;
}

.single-value-box .single-value-innerbox .single-value-ratio .single-value-ratio-token .single-value-ratio-label{
  padding-left: 8px;
}

.single-value-box .single-value-innerbox .single-value-ratio .single-value-ratio-token.negative {
  background-color: #f8d7da;
  color: #d9534f;
}

.single-value-box .single-value-innerbox .single-value-ratio .single-value-ratio-token.gray {
  background-color: #e0e0e0;
  color: #4d4d4d;
}
.single-value-box .single-value-innerbox .single-value-ratio .single-value-ratio-token.gray .single-value-ratio-label{
  padding-left: 4px;
  padding-right: 4px;
}


.single-value-box .single-value-innerbox .single-value-header {
  color: #777 !important;
  height:17px;
  font-size:13px;
  line-height:1.3em;
  margin-top: 0px;
  margin-bottom: 0px;
  display: block;
  white-space:nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

/* #38465 Number chart target achievement bar. */
.single-value-box .single-value-innerbox .single-value-target-bar {
  height: 6px;
  margin-top: 2px;
  margin-bottom: 0px;
  border-radius: 3px;
  background-color: #e8eaed;
  overflow: hidden;
}

.single-value-box .single-value-innerbox .single-value-target-bar .single-value-target-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 0;
}

/* #38465-followup: the bar's own height/margins (8px) are not free -- the same amount has
   to come back out of the boxes and margins around it, or the chart gets taller whenever
   the bar is shown. #38545: re-derived from VizUtil.SINGLE_VALUE_LAYOUT's 100px budget.
   Without a sub-metric the surrounding margins alone cover it and the number keeps its
   size. WITH one, the variant is too crowded to leave the number at 38px, so it drops to
   34px and the 4px that frees becomes breathing room above and below it (2px + 2px)
   rather than going back into the value. */
.single-value-box .single-value-innerbox.has-target-bar .single-value-text-with-ratio {
  font-size: 34px;
  height: 36px;
  margin-top: 2px;
}
/* Carries font-size and height only because the rule above now sets them: this selector
   and that one both match a no-sub Number with a bar, and they tie on specificity, so
   whichever comes last would otherwise win. This one has one more class, which settles
   it -- but only for properties it actually declares. */
.single-value-box .single-value-innerbox.has-target-bar.no-sub-display .single-value-text-with-ratio {
  font-size: 47px;
  height: 57px;
  margin-top: 2px;
  margin-bottom: 2px;
}
.single-value-box .single-value-innerbox.has-target-bar .single-value-ratio {
  margin-top: 2px;
}

.single-value-box .single-value-icon{
  position:absolute;
  top:25px;
  right:25px;
  font-size:80px;
  color:rgba(0, 0, 0, 0.15);
}

/* Filter setting for adding a color to the upward/downward caret SVG images in table/pivot header. */
.filter-light-red {
  filter: invert(68%) sepia(87%) saturate(5268%) hue-rotate(330deg) brightness(99%) contrast(84%);
}
.filter-light-orange {
  filter: invert(57%) sepia(98%) saturate(1192%) hue-rotate(351deg) brightness(99%) contrast(92%);
}
.filter-light-yellow {
  filter: invert(90%) sepia(28%) saturate(1517%) hue-rotate(337deg) brightness(106%) contrast(92%);
}
.filter-light-green {
filter: invert(57%) sepia(88%) saturate(324%) hue-rotate(54deg) brightness(98%) contrast(90%);
}
.filter-light-blue {
  filter: invert(56%) sepia(73%) saturate(1131%) hue-rotate(184deg) brightness(100%) contrast(96%);
}
.filter-light-purple {
  filter: invert(57%) sepia(42%) saturate(3658%) hue-rotate(233deg) brightness(91%) contrast(93%);
}
.filter-light-gray {
  filter: invert(99%) sepia(1%) saturate(951%) hue-rotate(181deg) brightness(88%) contrast(100%);
}
.filter-red {
  filter: invert(19%) sepia(83%) saturate(7182%) hue-rotate(27deg) brightness(96%) contrast(106%);
}
.filter-orange {
  filter: invert(41%) sepia(98%) saturate(654%) hue-rotate(351deg) brightness(95%) contrast(98%);
}
.filter-yellow {
  filter: invert(62%) sepia(56%) saturate(594%) hue-rotate(13deg) brightness(108%) contrast(87%);
}
.filter-green {
  filter: invert(21%) sepia(69%) saturate(4872%) hue-rotate(143deg) brightness(96%) contrast(101%);
}
.filter-blue {
  filter: invert(17%) sepia(99%) saturate(5272%) hue-rotate(199deg) brightness(98%) contrast(98%);
}
.filter-purple {
  filter: invert(31%) sepia(15%) saturate(3250%) hue-rotate(238deg) brightness(92%) contrast(91%);
}
.filter-white {
  filter: invert(100%) sepia(11%) saturate(0%) hue-rotate(312deg) brightness(112%) contrast(100%);
}
.filter-gray {
  filter: invert(74%) sepia(6%) saturate(111%) hue-rotate(114deg) brightness(92%) contrast(88%);
}
.filter-dark-gray {
  filter: invert(34%) sepia(9%) saturate(415%) hue-rotate(175deg) brightness(95%) contrast(91%);
}
.filter-black {
  filter: invert(0%) sepia(1%) saturate(35%) hue-rotate(270deg) brightness(94%) contrast(100%);
}
.filter-default {
  filter: invert(20%) sepia(0%) saturate(3917%) hue-rotate(141deg) brightness(100%) contrast(68%);
}

/* Repeat By (facet) for Pivot / Summary Table -- vertical stack of per-facet
   tables, each with a facet-value label above it. #27155 */
.pivot-facet-stack {
  display: block;
}
.pivot-facet-section {
  display: block;
}
.pivot-facet-label {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
  white-space: pre-wrap;
}
.pivot-facet-table {
  display: block;
}

/* Repeat By (facet) for the Number (single value) chart -- a GRID of Number tiles,
   not the vertical stack above. Each tile's own caption is the facet value; there is
   no chart-level caption above the grid. #32879 */
/* Deliberately NO padding: flush is the DEFAULT, so the grid sits against whatever frame
   hosts it exactly like the same Number WITHOUT Repeat By, whose own outer padding
   (renderSingleValue's `singlevaluePadding` default) is `0px 9px 0px 0px` -- a right-hand
   gutter and nothing else. A uniform 10px inset briefly lived here (#32879, 2026-09-06)
   and gave the Note editor / Note preview / published Note a four-sided gap the
   non-faceted Number does not have (reported 2026-09-08).

   A host that wants an inset opts in, and exactly two do:
   - the Dashboard (dashboard-base.css), where each tile's own .single-value-innerbox
     border is stripped and re-drawn as a .single-value-facet-cell card -- an ADDED
     border that would touch the panel's own frame. Hung off the same shim selector
     chain as that card.
   - the in-app chart canvases (viz.scss, .viz-view-canvas / .viz-preview-canvas), which
     were not part of the 2026-09-08 report and keep what they had.
   Both mirror VizUtil.SINGLE_VALUE_FACET_CONTAINER_PADDING. #32879 / #38545
   box-sizing:border-box is kept so an opting-in host's inset stays inside width:100%. */
.single-value-facet-container {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.single-value-facet-grid {
  display: grid;
  width: 100%;
  /* Tiles size to their content, so a short tile must not stretch to the tallest
     row -- align them to the top of their track. */
  align-items: start;
}
/* minmax(0,1fr) on the tracks plus min-width:0 here keeps a long unbreakable value
   (which .single-value-text-with-ratio renders with white-space:nowrap) from forcing
   the whole grid wider than its container. box-sizing:border-box keeps the Dashboard-only
   bordered-card treatment (see below) from growing the cell past its 1fr grid track (grid
   stretches a track's content-box by default, so an ambient content-box box-sizing would
   overflow the track); it is a no-op in every other host, where the cell carries no border
   or padding of its own.

   Deliberately NO border/padding here. Every tile is a renderSingleValue box, and
   .single-value-innerbox already draws its own 1px border inline (PivotTableGenerator.js,
   viz.singlevalueBorder's default) in EVERY host except the Dashboard, which strips it
   with `.chart-shim ... .single-value-innerbox { border:none!important }`
   (dashboard-base.css) because a Dashboard panel draws the frame itself. A card border
   here as well made the Chart View / Note editor / published Note paint TWO nested frames
   per tile (reported 2026-09-06). The card treatment the Dashboard genuinely needs now
   lives in dashboard-base.css, scoped to exactly the selector that removed the inner
   border. #32879 */
.single-value-facet-cell {
  min-width: 0;
  box-sizing: border-box;
}
/* In-chart facet toolbar: the "# of Columns" dropdown only. A grid of Numbers has no
   viz area to fit plots into and no axes to sync, so unlike a Plotly facet toolbar it
   carries no Fit / Sync X / Sync Y controls. #32879 */
.single-value-facet-toolbar {
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 6px;
}
.single-value-facet-toolbar .single-value-facet-toolbar-label {
  font-size: 12px;
  color: #4d4d4d;
  margin-right: 4px;
  vertical-align: middle;
}
.single-value-facet-toolbar .viz-facet-numcol-dropdown {
  height: 22px;
  width: 60px;
  padding: 0 0 0 5px;
  font-size: 12px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 3px;
  outline: none;
  vertical-align: middle;
}

/* #37691 follow-up (PR #37702): inline-code chip styling for a table cell rendered via
   PivotTableGenerator.buildInlineCodeHtml (tableCellInlineCodeFormat), e.g. CHAID's
   "Final Intervals" column ("<= 3" | "(3, 8]" | "8 <"). Mirrors the GitHub-style inline
   code chip used for note/markdown content elsewhere in the app. */
.pivot-cell code,
.pivot-data-popover code {
  font-family: Menlo, Monaco, "Courier New", Courier, monospace;
  font-size: 12px;
  padding: 1px 4px;
  color: rgba(0, 0, 0, 0.8);
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}