/* Tooltip stuff taken from Vega */

.mlp-tooltip {
  display: flex;
  width: calc(min(376px, 100vw - 40px));
  flex-direction: column;
  align-items: flex-start;

  border-radius: var(--Non-Pill-Radius, 8px);
  border: 1px solid var(--Epoch-Website-Gray-200, #E2EEEE);
  background: #FFF;

  /* Menu Drop Shadow */
  box-shadow: 0px 5px 15px -3px rgba(0, 0, 0, 0.15);

  position: fixed;
  visibility: hidden;
  left: 0;
  top: 0;
  z-index: 99999;

  max-height: calc(100vh - 40px);
  overflow: auto;

  pointer-events: none;
}

#options-modal .modal-header .modal-close:before {
  content: '';
}

.mlp-tooltip.pinned {
  pointer-events: auto;
  border-color: rgba(0, 0, 0, 0.12);
}

.mlp-tooltip .mlp-tooltip-content {
  width: 100%
}

.mlp-tooltip .mlp-tooltip-table {
  display: block;
  width: 100%;
}

.mlp-tooltip .mlp-tooltip-table .row {
  display: flex;
  padding: 8px 16px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

.mlp-tooltip .mlp-tooltip-table .row:nth-child(odd) {
  background: #f2faf9;
}

.mlp-tooltip .mlp-tooltip-table .row:first-child {
  background: #e2eeee;
}

.mlp-tooltip .mlp-tooltip-table.start-with-white .row {
  background: #fff;
}

.mlp-tooltip .mlp-tooltip-table.start-with-white .row:nth-child(even) {
  background: #f2faf9;
}

/*
.mlp-tooltip .mlp-tooltip-table.bottom-row-has-border .row,
.mlp-tooltip .mlp-tooltip-table .row:not(:last-child) {
  border-bottom: 1px solid var(--epoch-gray-200, #E2EEEE);
}
*/

.mlp-tooltip .mlp-tooltip-table .key {
  flex: 0 0 112px;
  text-align: right;

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;
}

@media (max-width: 400px) {
  .mlp-tooltip .mlp-tooltip-table .key {
    flex: 0 0 100px;
  }
}

.mlp-tooltip .mlp-tooltip-table .key input {
  margin: 0;
}

.mlp-tooltip .mlp-tooltip-table .value {
  word-break: break-word;

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;
}

.mlp-tooltip .mlp-tooltip-table .checkbox-option .key {
  display: flex;
  justify-content: flex-end;
}

.mlp-tooltip .mlp-tooltip-table .checkbox-option .value {
}

/************************** Custom checkbox style ****************************/
/* Taken from https://moderncss.dev/pure-css-custom-checkbox-style/ */
.viz-container input[type='checkbox'],
.mlp-tooltip-table input[type='checkbox'] {
  appearance: none;

  margin: 0;
  color: white;
  background-color: white;
  font: inherit;
  width: 16px;
  height: 16px;

  border-radius: 3px !important;
  border: 1px solid var(--Epoch-Website-Gray-600, #3E555E);

  display: grid;
  place-content: center;
}

.viz-container input[type='checkbox']:hover,
.mlp-tooltip-table input[type='checkbox']:hover {
  border-color: var(--Epoch-Website-Green-500, #00A5A6) !important;
}

.viz-container input[type='checkbox']:disabled,
.mlp-tooltip-table input[type='checkbox']:disabled {
  border: 1px solid var(--Disabled, #CFD4D6) !important;
  cursor: not-allowed !important;
}

.viz-container input[type='checkbox']:disabled + label,
.mlp-tooltip-table input[type='checkbox']:disabled  + label{
  color: var(--Disabled, #CFD4D6) !important;
  cursor: not-allowed !important;
}

.viz-container .toggle-checkbox .inner-label {
  padding: 0 3px;
  cursor: pointer;
  display: flex;
  align-items: center;

  height: 18px;
  width: 32px;

  border-radius: 10px;
  border: 1px solid var(--Epoch-Website-Gray-400, #90A5AB);
}

.viz-container .toggle-checkbox .inner-label .handle {
  width: 12px;
  height: 12px;
  background: var(--Epoch-Website-Gray-400, #90A5AB);
  border: 1px solid var(--Epoch-Website-Gray-400, #90A5AB);
  display: flex;
  border-radius: 100%;
}

.viz-container .toggle-checkbox input {
  display: none;
}

.viz-container .toggle-checkbox input:checked + label {
  justify-content: flex-end;
}

.viz-container .toggle-checkbox:hover {
  border-color: var(--Epoch-Website-Gray-500, #5C737B);
}

.viz-container .toggle-checkbox:hover label .handle {
  background: var(--Epoch-Website-Gray-500, #5C737B);
  border-color: var(--Epoch-Website-Gray-500, #5C737B);
}

.viz-container .toggle-checkbox input:checked + label {
  background: var(--Epoch-Website-Green-500, #00A5A6);
  border-color: var(--Epoch-Website-Green-500, #00A5A6);
}

.viz-container .toggle-checkbox input:checked + label .handle {
  background: #ffffff;
  border-color: #ffffff;
}

.viz-container .toggle-checkbox input:checked:hover + label {
  background: var(--Epoch-Website-Green-600, #02767C);
  border-color: var(--Epoch-Website-Green-600, #02767C);
}

.viz-container .toggle-checkbox input:checked:hover + label .handle {
  background: #FFFFFF;
  border-color: #FFFFFF;
}


.viz-container .toggle-checkbox input:disabled + label {
  cursor: not-allowed;
  border-color: #CFD4D6;
}

.viz-container .toggle-checkbox input:disabled + label .handle {
  background: #CFD4D6;
  border-color: #CFD4D6;
}

.viz-container .toggle-checkbox input:checked:disabled + label {
  border-color: #CFD4D6;
  background: #CFD4D6;
}

.viz-container .toggle-checkbox input:checked:disabled + label .handle {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.viz-container .checkbox-container:has(input:disabled) + label {
  cursor: not-allowed;
  color: #CFD4D6;
}


.viz-container .toggle-checkbox-option {
  display: flex;
}

.viz-container .categorization-top {
  height: 40px;
}

.viz-container .categorization-bottom {
  padding-top: 0 !important;
}


.viz-container input[type='checkbox']::before,
.mlp-tooltip-table input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 11px;
}

.viz-container input[type='checkbox']:checked,
.mlp-tooltip-table input[type="checkbox"]:checked {
  background: var(--Epoch-Website-Green-500, #00A5A6);
  border-color: var(--Epoch-Website-Green-500, #00A5A6) !important;
}

.viz-container input[type='checkbox']:checked:hover,
.mlp-tooltip-table input[type="checkbox"]:checked:hover {
  background: var(--Epoch-Website-Green-600, #02767C);
  border-color: var(--Epoch-Website-Green-600, #02767C) !important;
}

.viz-container input[type='checkbox']:checked:disabled,
.mlp-tooltip-table input[type="checkbox"]:checked:disabled {
  background: var(--Disabled, #CFD4D6);
  border-color: var(--Disabled, #CFD4D6) !important;
}

.viz-container input[type='checkbox']:checked::before,
.mlp-tooltip-table input[type="checkbox"]:checked::before {
  background-color: white;

  /* tick symbol */
  clip-path: path('M 10,2.1660156 A 0.83329999,0.83329999 0 0 0 9.4101563,2.4101563 L 4.5,7.3203125 2.5898438,5.4101562 a 0.83329999,0.83329999 0 0 0 -1.1796876,0 0.83329999,0.83329999 0 0 0 0,1.1796875 l 2.5000001,2.5000001 a 0.83338332,0.83338332 0 0 0 1.1796874,0 l 5.5000003,-5.5 a 0.83329999,0.83329999 0 0 0 0,-1.1796875 A 0.83329999,0.83329999 0 0 0 10,2.1660156 Z');
}
/*****************************************************************************/

.mlp-tooltip-table .value .pills {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.mlp-tooltip-table .value a:not(:hover) {
  color: var(--Epoch-Website-Gray-900, #07171A);
}

.mlp-tooltip-table .value .pill {
  display: flex;
  padding: 6px 7px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-wrap: nowrap;

  border-radius: 64px;
  border: 2px solid var(--pill-color);
  background: #FFF;

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  letter-spacing: -0.28px;
}

.mlp-modal {
  z-index: 20;
}

.button-item {
  width: 100%;
  min-height: 2em;
  font-size: 1.2em;
  border: none;
  border-radius: 8px;
}

.button-item:hover {
  cursor: pointer;
}

.button-item.selected {
  background-color: #0072DB;
  color: #fff;
}

body.disabled { 
  pointer-events: none; 
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; 
  user-select: none;
}

body.disabled *:focus {
  outline: 0;
}

.plotter-container {
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.plotter-container .over-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.plotter-container .over-header .graph-table {
  display: inline-flex;
  padding: 4px;
  align-items: flex-start;
  gap: 4px;

  border-radius: 96px;
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
}

.plotter-container .over-header .graph-table button {
  border: none;
  cursor: pointer;

  display: flex;
  padding: var(--Spacing, 6px) var(--H-Padding, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--Spacing, 6px);

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 16px */

  border-radius: var(--Pill-Radius, 100px);
  background: #fff;
}

.plotter-container .over-header .graph-table button:hover {
  background: var(--Epoch-Website-Gray-100, #EBF5F4);
}

.plotter-container .over-header .graph-table button.active {
  background: var(--Epoch-Website-Green-100, #E6FEF3);
}

.plotter-container .over-header .toggle-options {
  display: flex;
  padding: var(--Full-Padding, 10px) var(--H-Padding, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--Spacing, 6px);

  border-radius: var(--Pill-Radius, 100px);
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
  background: #FFF;

  color: var(--Epoch-Website-Gray-600, #3E555E);
  font-family: "Messina Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 16px */

  cursor: pointer;
}

.plotter-container .over-header .toggle-options:hover {
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
  background: var(--Epoch-Website-Gray-100, #EBF5F4);
}

/*
.plotter-container .over-header .toggle-options:hover path {
  fill: var(--Epoch-Website-Gray-600, #3E555E);
}
*/

.plotter-container .over-header .toggle-options:active {
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
  background: var(--Epoch-Website-Green-100, #E6FEF3);
}

/*
.plotter-container .over-header .toggle-options:active {
  color: var(--Epoch-Website-Gray-900, #07171A);
  background: var(--Epoch-Website-Green-200, #ABFAE3);
}
*/

/*
.plotter-container .over-header .toggle-options:active path {
  fill: var(--Epoch-Website-Gray-900, #07171A);
}
*/

.plotter-container .header {
  margin-bottom: 24px;
}

.plotter-container .title {
  color: var(--epoch-green-800, #09323A);
  font-family: Messina Serif Trial;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 24px */
  letter-spacing: -0.4px;
  margin-bottom: 6px;
}

.plotter-container .title .info {
  opacity: 0.6;
  transition: 0.2s ease-in-out;
  cursor: pointer;
  opacity: 1;
}

.plotter-container .title .info:hover {
  opacity: 1;
}

.plotter-container .subtitle {
  color: var(--epoch-gray-500, #5C737B);
  font-family: Messina Sans;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 15.6px */
  letter-spacing: -0.13px;
}

.plotter-container .subheader {
  justify-content: space-between;
}

.plotter-container .subheader,
.plotter-container .subfooter {
  display: flex;
  margin-bottom: 8px;

  color: var(--epoch-gray-700, #2B424B);
  font-family: Messina Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;

  align-items: center;
}

.plotter-container .x-axis,
.plotter-container .y-axis {
  display: flex;
  gap: 6px;
  align-items: center;
  /*cursor: pointer;*/
}

.plotter-container .y-axis {
  margin-right: 16px;
}

.plotter-container .x-axis .info-icon,
.plotter-container .y-axis .info-icon {
  margin-left: 0;
}

.plotter-container .axis-title {
  text-wrap: nowrap;
}

.plotter-container .x-axis svg,
.plotter-container .y-axis svg {
  flex-shrink: 0;
}

.plotter-container .subfooter {
  justify-content: center;
  padding-left: 45px;
  margin-top: 10px;
}

.plotter-container .subheader-right {
  display: flex;
  justify-content: end;

  display: flex;
  align-items: center;
  gap: 24px;
}

.plotter-container .options-header {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
}

.plotter-container .options-header h3 {
  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  text-transform: uppercase;
}

.plotter-container .options-buttons {
  display: flex;
}

.plotter-container .options-buttons button {
  display: flex;
  padding: var(--Non-Pill-Radius, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--Spacing, 6px);

  background: #fff;
  border: none;
  cursor: pointer;
}

.plotter-container .subheader.options-shown .subheader-right {
  gap: 16px;
}

.plotter-container .subheader:not(.options-shown) .reset-options {
  display: none;
}

.plotter-container .subheader:not(.options-shown) .hide-button {
  display: none;
}

.plotter-container .new-options {
  cursor: pointer;
}

.plotter-container .options-buttons button {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;

  border-radius: var(--Pill-Radius, 100px);
  padding: var(--Non-Pill-Radius, 8px);
  justify-content: center;
  gap: var(--Spacing, 6px);
}

.plotter-container .options-buttons button:hover {
  background: var(--Epoch-Website-Gray-100, #EBF5F4);
}

.plotter-container .options-buttons button:hover path {
  fill: #07171A;
}

.plotter-container .options-buttons button:active {
  background: var(--Epoch-Website-Green-100, #E6FEF3);
}

.plotter-container .options-buttons button:active path {
  fill: #07171A;
}


/*
.plotter-container .reset-options:not(.active) {
  cursor: auto;
  pointer-events: none;
}

.plotter-container .reset-options:not(.active) path {
}
*/

.plotter-container .new-options .show-button,
.plotter-container .new-options .hide-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px 0px 12px;
  gap: 8px;
  min-height: 26px;
}

.plotter-container .new-options .hide-button {
  padding: 0px 9px 0px 11px;
}

.plotter-container .new-options .show-button:hover {
  border: 1px solid var(--epoch-gray-400, #90A5AB);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.plotter-container .new-options .hide-button:hover {
  border: 2px solid var(--epoch-gray-400, #90A5AB);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.plotter-container .new-options .show-button {
  border-radius: 100px;
  border: 1px solid rgba(3, 71, 82, 0.20);
  background: #FFF;
}

.plotter-container .new-options .hide-button {
  border-radius: 100px;
  border: 2px solid #034752;
  background: #FFF;
}

.plotter-container .results-counter {
  color: var(--epoch-gray-400, #90A5AB);

  /* Set min width to avoid having the side legend move with it */
  min-width: 5em;
  text-align: right;
}

.plotter-container .navigation-ui {
  display: inline-flex;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: absolute;

  width: calc(102px + 2*16px);

  top: 0px;
  left: 45px;

  z-index: 10;
}

@media (max-width: 680px) {
  .plotter-container .navigation-ui {
    display: none;
  }
}

.plotter-container .navigation-ui .orientation-map {
  position: relative;

  width: 100%;
  height: 64px;
  background: rgba(3, 71, 82, 0.2);
  border: 1px solid rgba(3, 71, 82, 0.5);

  overflow: hidden;
  cursor: pointer;
}

.plotter-container .navigation-ui .camera-position {
  width: 48px;
  height: 30px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid white;
  position: absolute;

  cursor: grab;
}

.plotter-container .navigation-ui .zoomer {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 28px;

  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.02);
  background: var(--epoch-white, #FFF);

  /* Shadow/sm */
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
}

.plotter-container .navigation-ui .zoom-separator {
  height: 100%;
  width: 1px;
  background: var(--epoch-gray-100, #EBF5F4);
}

.plotter-container .navigation-ui .zoom-buttons {
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.plotter-container .navigation-ui .zoom-button {
  display: flex;
  width: 28px;
  height: 28px;
  padding: 0px 6px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.plotter-container .navigation-ui .zoom-scale-level {
  flex: 1;
  text-align: right;

  color: var(--epoch-gray-400, #90A5AB);
  text-align: center;
  font-family: Messina Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 14.4px */
  letter-spacing: -0.24px;
}

.plotter-container .graph {
  display: flex;
  flex-direction: column;
}

.plotter-container .graph .canvas-container {
  flex: 1 0 0;
  min-height: 0;
}

.plotter-container .graph .subfooter {
  width: 100%;
}

.plotter-container .graph-legend {
  display: flex;
  flex-direction: row;
  gap: 12px;

  min-height: 0;
  flex: 1 1 0;
}

.graph-container {
  position: relative;
  display: flex;
  height: 100%;
  flex: 1;
  min-height: 0;
}

.plotter-container .graph {
  width: 100%;
  height: 100% !important;

  display: flex;
  align-items: center;
  position: relative;

  flex: 1 1 0;
  min-width: 0;
}

.plotter-container canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

.plotter-container .interactive-top-n-definition .html-option-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;
}

.plotter-container .interactive-top-n-definition .html-option-content >* {
  display: inline-block !important;
  width: auto !important;
}

.plotter-container .interactive-top-n-definition #enableTopN {
  flex: 0 0 16px;
  min-width: 0;
  margin-right: 6px;
  display: inline-grid !important;
  cursor: pointer;
}

.plotter-container .interactive-top-n-definition #topN {
  flex: 0 0 52px;
  min-width: 0;
  text-align: center;

  margin-left: 4px;

  padding-left: 12px;
  padding-right: 12px;

  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--Epoch-Website-Green-500, #00A5A6);
  background: #FFF;
}

.plotter-container .interactive-top-n-definition #topN:hover {
  border-bottom: 1px solid var(--Epoch-Website-Gray-900, #07171A);
}

.plotter-container .interactive-top-n-definition #topN:focus {
  border-radius: var(--Non-Pill-Radius, 8px);
  border: 1px solid var(--Epoch-Website-Green-500, #00A5A6);
}

.plotter-container .interactive-top-n-definition #topN:disabled {
  border: none;
  border-bottom: 1px solid var(--Disabled, #CFD4D6);
  color: var(--Epoch-Website-Gray-400, #90A5AB);
  cursor: not-allowed;
}

.plotter-container .table-container {
  flex: 1;
  min-height: 0;
}

.plotter-container .table-container .airtable-table {
  height: 100%;
}

.plotter-container .left-panel {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.plotter-container .canvas-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.plotter-container .regressionTableWrapper {
  display: none;
  position: absolute;
  top: 15px;
  left: 189px;
  width: 52%;
  height: 100px;
  border-radius: 3px;
  border: 1px solid grey;
  padding: 5px;
  background-color: #fafafa;
  overflow-x: scroll;
  z-index: 1;
}

.plotter-container .legend {
  position: absolute;
  top: 15px;
  left: 83px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 3px;
  border: 1px solid grey;
  padding: 5px;
  background-color: #fafafa;
  z-index: 1;

  display: none;
}

.plotter-container .new-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4px;

  max-width: 144px;
  flex: 0 1 content;
}

.plotter-container .new-legend .legend-header {
  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;
  margin-bottom: 6px;
}

.plotter-container .new-legend .legend-item {
  display: flex;
  align-items: baseline;
  gap: 16px;

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;

  cursor: pointer;
}
.plotter-container .new-legend .legend-item-range {
  display: flex;
  align-items: end;
  gap: 0px;

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;

  cursor: pointer;
}
.plotter-container .new-legend .legend-item.disabled {
  color: var(--epoch-gray-300, #CCD8D9);
}

.plotter-container .new-legend .legend-item.disabled .icon * {
  stroke: #CCD8D9 !important;
}

.plotter-container .new-legend .legend-item.disabled .icon:not([fill="none"]) {
  fill: #CCD8D9 !important;
}

.plotter-container .new-legend .legend-item .icon {
  transform: translateY(1.5px);
}

.plotter-container .new-legend .legend-item .info-icon {
  margin-left: -3px;
  margin-top: -5px;
  transform: translateY(5px);
  /*transform: translateY(25%);*/
}

.plotter-container .graph-container {
  --current-options-width: 0;
}

.plotter-container .options-container {
  position: relative;
  width: 0;
  flex: 0 0 0;
  height: calc(100% + 10px);
  overflow-x: hidden;
  overflow-y: hidden;
}

.plotter-container .options {
  width: 327px;
  height: 100%;

  margin-left: auto;

  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: auto;

  color: var(--epoch-gray-400, #90A5AB);
  font-family: Messina Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 114.286% */
  letter-spacing: -0.28px;

  padding-top: 16px;
  padding-bottom: 16px;

  border-radius: var(--Non-Pill-Radius, 8px);
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
  background: #FFF;
}

.plotter-container .options-divider,
.plotter-container .options-section-header,
.plotter-container .options-section-content,
.plotter-container .options-header {
  padding-left: 16px;
  padding-right: 16px;
}

.plotter-container .options::-webkit-scrollbar {
  display: none;
}

.plotter-container .options-container.closed .options {
  border: none;
}

.plotter-container .options .options-section-header {
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;

  display: flex;
  height: 40px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

}

.plotter-container .options .options-section-header:hover {
  background: var(--Epoch-Website-Gray-100, #EBF5F4);
}

.plotter-container .options .options-section-header h4 {
  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
}

.plotter-container .options-section .options-section-header svg {
  transform: rotate(-90deg);
}

.plotter-container .options-section .options-section-content {
  display: none;
}

.plotter-container .options-section.open .options-section-header svg {
  transform: none;
}

.plotter-container .options-section.open .options-section-content {
  display: block;
}

.plotter-container .option {
  /*height: 72px;*/
  display: flex;
  padding: 8px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

.plotter-container .options .optionsHeader {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 200px;
}

.plotter-container .options .optionLabel {
  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
  display: flex;
}

.plotter-container .options label {
  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  letter-spacing: -0.28px;
}

.plotter-container .options .options-divider {
  display: flex;
  margin: 8px 16px;
  height: 1px;
  background: var(--liminal-gray-200, #DFE3EB);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.plotter-container .checkbox-option {
  height: 48px;
  /*padding: 10px 24px;*/
  padding: 0;
  flex-direction: row;
  align-items: center;
  align-self: stretch;

  gap: 6px;
}

.plotter-container .checkbox-option input.optionValue {
  width: auto;
  flex: 0 0 0;
  cursor: pointer;
  width: 16px !important;
}

.plotter-container .checkbox-option .optionLabel {
  cursor: pointer;

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;
}

.plotter-container .options .interactive-frontier-definition {
  display: block;
  color: #2B424B;
  height: auto;

  color: var(--epoch-gray-400, #90A5AB);
}

.plotter-container .options .interactive-frontier-definition input.optionValue {
  width: 60px;
  color: #2B424B;
  display: inline-block !important;
  text-align: center;

  width: 58px;
  height: 32px;
  padding: 8px 14px;
}

.plotter-container .options .interactive-outlier-definition {
  display: block;
  color: #2B424B;
  height: auto;

  color: var(--epoch-gray-400, #90A5AB);
}

.plotter-container .options .interactive-outlier-definition input.optionValue {
  width: 60px;
  color: #2B424B;
  display: inline-block !important;
  text-align: center;

  width: 58px;
  height: 32px;
  padding: 8px 14px;
}

.plotter-container .options .optionValue {
  width: 70px;
  flex: 1 1 0;
  color: #2b424b;
}

.plotter-container .options input.optionValue {
  //width: 150px;
  width: 100%;

  color: #2b424b;
  border-radius: 6px;
  padding: 2px 2px;
  border: 1px solid rgba(0, 0, 0, 0.30);
}

.plotter-container .options input.optionValue:focus {
  border: 1px solid rgba(0, 0, 0, 0.50);
  outline: 0;
}

.plotter-container .options input.optionValue::-webkit-outer-spin-button,
.plotter-container .options input.optionValue::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.plotter-container .options input.optionValue[type="number"] {
  -moz-appearance: textfield;
}

.plotter-container .options input.optionValue[type="number"],
.plotter-container .options input.optionValue[type="text"] {
  display: flex;
  height: 32px;
  padding: 6px 14px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

  border-radius: 100px;
  border: 1px solid var(--epoch-gray-300, #CCD8D9);
  background: var(--base-white, #FFF);
}

.plotter-container .option .checkboxWrapper .optionValue {
  width: auto;
}

.plotter-container .option .checkboxWrapper {
  width: 60px;
  padding-right: 40px;
}

.plotter-container .option .checkbox-hit-area {
  display: inline-block;
  width: 99999px;
  margin-left: -100px;
  padding-left: 100px;
}

.plotter-container .option select.optionValue {
  width: 100%;
}

.plotter-container .option .radio-container {
  display: flex;
  flex-direction: column;
  column-gap: 6px;
}

.plotter-container .option .radio-label {
  height: 40px;
  display: flex;
  align-items: center;
  color: var(--Epoch-Website-Gray-900, #07171A);
}

.plotter-container .option .radio-label input,
.plotter-container .option .radio-label label {
  cursor: pointer;
}

.plotter-container .option .radio-container.horizontal {
  flex-direction: row;
}

.plotter-container select.optionValue {
  /* From https://moderncss.dev/custom-select-styles-with-pure-css/ */

  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;

  display: flex;
  height: 32px;
  padding: 8px 14px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

  border-radius: var(--Non-Pill-Radius, 8px);
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
  background: #FFF;

  /* Shadow/xs */
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

  color: var(--epoch-gray-500, #5C737B);
  letter-spacing: -0.28px;

  height: auto !important;

  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 6L8 10L12 6' stroke='%2309323A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");

  background-repeat: no-repeat;
  background-position: top 50% right 14px;

  cursor: pointer;
}

.options-container .option input.optionValue[type="text"] {
  padding: 8px var(--H-Padding, 12px);
  border-radius: var(--Non-Pill-Radius, 8px);
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
  background: #FFF;
  cursor: auto !important;
}

.options-container .option input.optionValue[type="text"]:hover {
  border: 1px solid var(--Epoch-Website-Gray-400, #90A5AB);
}

.options-container .option input.optionValue[type="text"]:focus {
  border: 1px solid var(--Epoch-Website-Green-500, #00A5A6);
}

.options-container .option input.optionValue[type="text"]:invalid {
  border: 1px solid #DB371F;
}

.options-container .option input.optionValue[type="text"]:disabled {
  border-radius: var(--Non-Pill-Radius, 8px);
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
  background: var(--Disabled, #CFD4D6);
}

.options-container .option input[type="number"],
.options-container .option select.optionValue {
  color: var(--Epoch-Website-Gray-700, #2B424B);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  letter-spacing: -0.28px;
}

.options-container .option input.optionValue[type="number"],
.options-container .option input.optionValue[type="text"],
.options-container .option select.optionValue {
  cursor: pointer;
}

.options-container .option input.optionValue[type="number"]:focus,
.options-container .option input.optionValue[type="text"]:focus {
  cursor: auto;
}

.options-container .option input.optionValue[type="number"],
.options-container .option select.optionValue:hover {
  border: 1px solid var(--epoch-gray-400, #90A5AB);
}

.options-container .option input.optionValue[type="number"]:focus,
.options-container .option select.optionValue:focus {
  outline: none;

  border: 2px solid #034752;
  padding: 7px 13px;
  background-position: top 50% right 13px;
}

.plotter-container .optionsHeader {
  font-weight: bold;
}

.plotter-container .options .closeOptions {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 16px;
  height: 16px;
}

.over-button {
  opacity: 0.2;
  transition: 0.2s ease;
}

.over-button:hover {
  opacity: 1;
}

.plotter-container .plotter-buttons {
  position: absolute;
  right: 32px;
  top: 2px;
  width: 500px;
  display: flex;
  place-content: flex-end;
  gap: 3px;
}

.plotter-container .plotter-button button {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.toggleOptions {
  position: absolute;
  top: 2px;
  right: 0px;
}

.plotter-button, .toggleOptions {
  width: 28px;
  height: 21px;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 3px;
  border: 1px solid black;
  cursor: pointer;
}

.plotter-button, .toggleOptions > span {
  vertical-align: middle;
}

.plotter-button, .toggleOptions {
  line-height: 1.5em;
}

.hidden {
  display: none;
}

.plotter-container .legend .icon {
  margin-right: 3px;
}

.plotter-container .legend .legendItem {
  cursor: pointer;

  color: var(--epoch-gray-700, #2B424B);
  font-family: Messina Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;
}

.plotter-container .legend .legendItem.disabled {
  color: var(--epoch-gray-700, #CCD8D9) !important;
  stroke: #E2EEEE !important;
}

.plotter-container .legend .legendItem.disabled svg {
  stroke: rgb(226, 226, 226) !important;
}

.icon {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
}

.plotter-container .license {
  position: absolute;
  bottom: 2px;
  right: 10px;
  height: 27px;
}

.plotter-container .license {
  opacity: 0.4;
  transition: 0.2s ease;
  text-decoration: none !important;
  border: none !important;
}

.plotter-container .license:hover {
  opacity: 1;
}

.plotter-container .license img {
  height: 100%;
}

.plotter-container .license,
.plotter-container .license:visited,
.plotter-container .license:hover,
.plotter-container .license:active
{
  color: inherit;
}

/* Tooltip themes */

.tippy-box[data-theme~='viz-dark'] {
  border-radius: 4px;
  background: var(--Epoch-Website-Gray-900, #07171A);

  color: var(--Epoch-Website-Gray-25, #F7FCFB);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;
}

.tippy-box[data-theme~='viz-clear'] {
  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;

  width: 288px;
  padding: 16px;

  border-radius: var(--Non-Pill-Radius, 8px);
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9);
  background: #FFF;
}

.tippy-box[data-theme~='viz-clear'] .tippy-content {
  margin: 0;
  padding: 0;
}

.tippy-box[data-theme~='viz-clear'] .tippy-content >:last-child {
  margin-bottom: 0;
}

.tippy-box[data-theme~='viz-clear'] .tippy-content p,
.tippy-box[data-theme~='viz-clear'] .tippy-content h4 {
  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 22.4px */
  letter-spacing: 0.07px;
}

.tippy-box[data-theme~='viz-clear'] h4.info-tooltip-header {
  font-weight: 700;
  margin-bottom: 8px;

  color: var(--Epoch-Website-Gray-900, #07171A);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 14px */
  letter-spacing: 0.07px;
}

/* Custom radio button style */
/* Taken from https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */

/* Hacky custom style, to avoid the inner circle being uncentered */
.plotter-container input[type="radio"] {
  --scale: 5;

  appearance: none;

  background: none;

  color: var(--Epoch-Website-Gray-500, #5C737B);
  border: calc(var(--scale) * 1px) solid currentcolor;
  margin: calc(var(--scale) * 2px);
  margin-right: calc(var(--scale) * -6px);
  margin-left: calc(var(--scale) * -6.5px);
  padding: 0;
  width: calc(var(--scale) * 16px);
  height: calc(var(--scale) * 16px);
  border-radius: 50%;

  display: grid;
  place-content: center;

  transform: scale(calc(1/var(--scale)));
}

.plotter-container input[type="radio"] + label {
  margin-left: 6px;
}

.plotter-container input[type="radio"]:checked::before {
  content: "";
  width: calc(var(--scale) * 10px);
  height: calc(var(--scale) * 10px);
  border-radius: 50%;
  background: currentcolor;
}

/* Regular custom style

.plotter-container input[type="radio"] {
  appearance: none;

  background: none;

  color: var(--Epoch-Website-Gray-500, #5C737B);
  border: 1px solid currentcolor;
  margin: 2px;
  margin-right: 6px;
  margin-left: 0px;
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;

  display: grid;
  place-content: center;
}

.plotter-container input[type="radio"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentcolor;
}

*/

.plotter-container input[type="radio"]:hover {
  color: #00A5A6;
}

.plotter-container input[type="radio"]:invalid {
  color: #DB371F;
}

.plotter-container input[type="radio"]:disabled,
.plotter-container input[type="radio"]:disabled + label {
  color: var(--Disabled, #CFD4D6) !important;
  cursor: not-allowed !important;
}

.plotter-container input[type="radio"]:checked {
  color: #00A5A6;
}

.plotter-container input[type="radio"]:checked:hover {
  color: #02767C;
}

/* Override the custom select style */

.plotter-container .choices {
  width: 100%;

  color: var(--Epoch-Website-Gray-700, #2B424B);
  font-family: "Messina Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  letter-spacing: -0.28px;
}

.plotter-container .choices__inner {
  background: #fff;

  display: flex;
  padding: 8px var(--H-Padding, 12px) !important;
  align-items: center;
  gap: 8px;

  border-radius: var(--Non-Pill-Radius, 8px) !important;
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9) !important;
  background: #FFF;

  min-height: 0;
}

.plotter-container .choices:hover .choices__inner {
  border-color: var(--Epoch-Website-Gray-400, #90A5AB) !important;
}

.plotter-container .choices.is-open .choices__inner {
  border-color: var(--Epoch-Website-Green-500, #00A5A6) !important;
}

.plotter-container .choices__list--dropdown {
  margin-top: 2px;

  display: flex;
  width: 324px;
  padding: 8px 0px !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  border-radius: var(--Non-Pill-Radius, 8px) !important;
  border: 1px solid var(--Epoch-Website-Gray-300, #CCD8D9) !important;
  background: #FFF;

  /* Menu Drop Shadow */
  box-shadow: 0px 5px 15px -3px rgba(0, 0, 0, 0.15);

  width: 100%;
}

.plotter-container .choices__list {
  padding: 0;
}

.plotter-container .choices__item--choice {
  padding-right: 0 !important;
  padding: 8px 12px !important;
}

.plotter-container .choices__list--dropdown {
  z-index: 10;
}

.plotter-container .choices__list--dropdown .choices__list {
  width: 100% !important;
}

.plotter-container .choices::after {
  background-color: #3e555e;

  clip-path: path('m 6.1894531,7.5957031 a 0.5,0.5 0 0 0 -0.3535156,0.1464844 0.5,0.5 0 0 0 0,0.7070313 l 3.8105469,3.8085942 a 0.50005,0.50005 0 0 0 0.7070316,0 l 3.808593,-3.8085942 a 0.5,0.5 0 0 0 0,-0.7070313 0.5,0.5 0 0 0 -0.707031,0 L 10,11.197266 6.5449219,7.7421875 A 0.5,0.5 0 0 0 6.1894531,7.5957031 Z');

  position: absolute;
  height: 20px !important;
  width: 20px !important;
  right: 12px !important;
  top: 6px !important;
  margin-top: 0 !important;
}

.choices__list--dropdown .choices__item--selectable.is-selected::after {
  background-color: #00a5a6;

  clip-path: path('M 15.742188,5.6914062 A 0.5,0.5 0 0 0 15.388672,5.8359375 L 8.0957031,13.103516 5.5917969,10.599609 a 0.5,0.5 0 0 0 -0.7070313,0 0.5,0.5 0 0 0 0,0.707032 l 2.8574219,2.855468 a 0.50005,0.50005 0 0 0 0.7070313,0.002 L 16.09375,6.5449219 a 0.5,0.5 0 0 0 0.002,-0.7070313 0.5,0.5 0 0 0 -0.353515,-0.1464844 z');

  opacity: 1;

  position: absolute;
  height: 20px !important;
  width: 20px !important;
  right: 12px !important;
  top: 14px !important;
  margin-top: 0 !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--Epoch-Website-Gray-100, #EBF5F4) !important;
}

.plotter-container .info-icon {
  margin-left: 6px;
}

.plotter-container .info-icon[aria-expanded="true"] {
  /* Hackily set the color
   * See https://stackoverflow.com/a/50942954 and https://codepen.io/sosuke/pen/Pjoqqp
   */
  filter: brightness(0%) grayscale(100%) invert(40%) sepia(57%) saturate(1677%) hue-rotate(149deg) brightness(94%) contrast(104%);
}

.plotter-container .left-panel-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.plotter-container .dateSliderContainer {
  margin-top: 16px;
}

.plotter-container .epoch-slider {
  width: 100%;
  padding: 0;
}


.plotter-container .legend-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: auto;
  height: 100%;
}

.plotter-container .legend-content::-webkit-scrollbar {
  display: none;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
  opacity: 1 !important;
}

@media (max-width: 767px) {
  .over-header .text {
    display: none;
  }

  .plotter-container .options-container {
      position: absolute;
      height: 100%;
      top: 0;
      right: 0;
      z-index: 10;
      width: 343px;
  }

  .plotter-container .options-container.closed {
    display: none;
  }

  .plotter-container .graph-legend {
    flex-direction: column;
    gap: 8px;
  }

  .plotter-container .new-legend {
    max-width: none;
  }

  .plotter-container .legend-content {
    display: flex;
    gap: 8px 12px;
    flex-flow: wrap;
  }
}

@media (max-width: 416px) {
  .plotter-container .options-container {
    width: 100%;
  }

  .plotter-container .options-container .options {
    width: 100%;
  }
}