/* Colors */
  :root {
	/* reds */
	--color-red-50: #fcebeb;
	--color-red-100: #ffcfcf;
	--color-red-200: #ffa6a6;
	--color-red-300: #fa8484;
	--color-red-400: #f26666;
	--color-red-500: #e45454;
	--color-red-600: #d63a3a;
	--color-red-700: #c32d2d;
	--color-red-800: #ae1f1f;
	--color-red-900: #991111;
	--color-red-950: #7a0a0e;
	--color-red-1000: #59050b;
	--color-red-1100: #360207;
	/* blue */
	--color-blue-50: #e6f5ff;
	--color-blue-100: #b8e2ff;
	--color-blue-200: #94d4ff;
	--color-blue-300: #70c6ff;
	--color-blue-400: #4db8ff;
	--color-blue-500: #30acff;
	--color-blue-600: #1397f0;
	--color-blue-700: #0984d6;
	--color-blue-800: #0072bc;
	--color-blue-900: #0263ad;
	--color-blue-950: #03519a;
	--color-blue-1000: #05417d;
	--color-blue-1050: #023469;
	--color-blue-1100: #002754;
	--color-blue-800-rgb: 0, 114, 188;
	--color-bluegray-50: #f7f9f9;
	--color-bluegray-100: #eff3f4;
	--color-bluegray-200: #dfe3e5;
	--color-bluegray-250: #cbd1d4;
	--color-bluegray-300: #b3babc;
	--color-bluegray-400: #869093;
	--color-bluegray-500: #727e82;
	--color-bluegray-600: #5f6e73;
	--color-bluegray-700: #4f5e63;
	--color-bluegray-800: #2e4349;
	--color-bluegray-900: #17323a;
	--color-bluegray-950: #0c2b37;
	--color-bluegray-1000: #01212d;
	--color-bluegray-1100: #0c1b21;
	--color-bluegray-50-rgb: 247, 249, 249;
	--color-bluegray-200-rgb: 223, 227, 229;
	--color-bluegray-1000-rgb: 1, 33, 45;
	--color-bluegray-1100-rgb: 12, 27, 33;
  }

  @font-face {
	font-family: FuturaPTW01;
	src:
	  url(../fonts/www-aafdd021-88d4-41d8-8e15-fe91f83e4b17.woff2)
		format("woff2"),
	  url(../fonts/www-81d44d4b-ac07-4ad4-8cdd-4df771a3c1c3.woff)
		format("woff");
	font-weight: 400;
	font-style: normal;
  }

  @font-face {
	font-family: FuturaPTW01;
	src:
	  url(../fonts/www-28351402-8fc5-4d21-a3df-e99d2d814bd4.woff2)
		format("woff2"),
	  url(../fonts/www-10cee8c3-6e4c-4f57-8121-cf5e361423a7.woff)
		format("woff");
	font-weight: 400;
	font-style: italic;
  }

  @font-face {
	font-family: FuturaPTW01;
	src:
	  url(../fonts/www-9ad55860-bbe2-4e51-be58-08b45bdda354.woff2)
		format("woff2"),
	  url(../fonts/www-eceb6e13-403b-4d2b-af74-c05bc9c2535e.woff)
		format("woff");
	font-weight: 300;
	font-style: normal;
  }

  @font-face {
	font-family: FuturaPTW01;
	src:
	  url(../fonts/www-adde7586-049c-4682-b4ea-763ca90ccf9f.woff2)
		format("woff2"),
	  url(../fonts/www-8cb58a58-1da7-4cda-8284-52cf5bf67bf5.woff)
		format("woff");
	font-weight: 300;
	font-style: italic;
  }

  @font-face {
	font-family: FuturaPTW01;
	src:
	  url(../fonts/www-f7552419-a773-41ab-ae4a-b12b1d853f02.woff2)
		format("woff2"),
	  url(../fonts/www-83e72918-97c3-41cd-8a7d-4056788a00f0.woff)
		format("woff");
	font-weight: 500;
	font-style: normal;
  }

  @font-face {
	font-family: FuturaPTW01;
	src:
	  url(../fonts/www-e28dd043-42c3-47cb-815e-32648d6a8a2a.woff2)
		format("woff2"),
	  url(../fonts/www-97eeb983-cbcb-40c4-b724-919d44b8d4af.woff)
		format("woff");
	font-weight: 500;
	font-style: italic;
  }

  @font-face {
	font-family: FuturaPTW01;
	src:
	  url(../fonts/www-6650716f-e079-48f1-861d-00f498c16e8e.woff2)
		format("woff2"),
	  url(../fonts/www-21fe5b07-01c8-4b82-8e0b-2bf22f6481fa.woff)
		format("woff");
	font-weight: 700;
	font-style: normal;
  }

  @font-face {
	font-family: FuturaPTW01;
	src:
	  url(../fonts/www-cf12a4d6-3bc0-4ae9-85b5-26fc0fa6b321.woff2)
		format("woff2"),
	  url(../fonts/www-38909ddd-1d42-49a0-987a-dcf1aa3ab39e.woff)
		format("woff");
	font-weight: 700;
	font-style: italic;
  }

  .noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
  }

  html,
  body,
  #map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	font-family: FuturaPTW01, arial, helvetica, sans-serif;
	overflow: hidden;
  }

  .error-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
  }

  .error {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 1rem 1.25rem;
	padding-left: 60px;
	border: 1px solid var(--color-red-200);
	border-radius: 0.25rem;
	background: var(--color-red-50)
	  url("../img/ico-warning-red-900.svg") no-repeat 5px -2px;
	color: var(--color-red-900);
  }

  #map-canvas {
	height: 100%;
	border-radius: 5px;
	transition: opacity 0.5s ease;
  }

  body.loading #map-canvas {
	/*opacity: 1;*/
  }

  #map-canvas > div {
	background: var(--color-bluegray-100)
	  url("../img/spinner_white@3x.gif") no-repeat center
	  center !important;
	background-size: 45px !important;
  }

  body.loaded #map-canvas > div {
	background-image: none !important;
  }

  .gm-style {
	opacity: 0;
	transition: opacity 0.5s ease;
  }

  body.loaded .gm-style {
	opacity: 1;
  }

  .overlay {
	display: none;
  }

  .loading-small .overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(256, 256, 256, 0.15)
	  url("../img/spinner_white@3x.gif") no-repeat center
	  center !important;
	background-size: 45px !important;
	z-index: 9999;
  }

  p {
	margin: 0;
  }

  #time {
	height: 32px;
	width: 100%;
	margin-top: 48px;
	font-family: FuturaPTW01, arial, helvetica, sans-serif;
	display: none;
  }

  #map-info-div {
	background: var(--color-bluegray-50);
	border-left: 1px solid var(--color-bluegray-200);
	border-right: 1px solid var(--color-bluegray-200);
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding: 9px 0 7px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
	min-height: 14px;
  }

  #map-info-div p {
	display: inline-block;
  }

  body.loaded #time {
	display: block;
  }

  #selMapContainer {
	width: 100%;
	border: 1px solid var(--color-bluegray-200);
	background: #fff;
	font-family: FuturaPTW01, arial, helvetica, sans-serif;
	box-sizing: border-box;
  }

  #selMap {
	display: block;
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
	height: 48px;
  }

  #selMap li {
	display: inline-block;
	list-style: none;
	padding: 0px;
  }

  #selMap li button {
	font-family: FuturaPTW01, arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight: 500;
	padding: 14px 20px 13px;
	border: none;
	background: transparent;
	border-bottom: 3px solid transparent;
	color: #000;
	cursor: pointer;
  }

  #selMap li button:hover,
  #selMap li button:focus {
	border-bottom: 3px solid var(--color-bluegray-200);
	/*color: var(--color-blue-800);*/
  }
  #selMap li button:focus-visible {
	outline: solid 1px var(--color-blue-800);
	outline-offset: 0px;
  }
  #selMap li.selected button,
  #selMap li.selected button:hover {
	border-bottom: 3px solid var(--color-blue-800);
	color: var(--color-blue-800);
	background-color: var(--color-blue-50);
  }

  #select_box {
	font-family: FuturaPTW01, Arial, Helvetica, sans-serif;
	background: #fff;
	border-radius: 2px;
	border: 1px solid var(--color-bluegray-400);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  }

  select#selRegion {
	font-family: FuturaPTW01, Arial, Helvetica, sans-serif;
	/* for Older Firefox */
	-moz-appearance: none;
	/* for Older Chrome */
	-webkit-appearance: none;
	appearance: none;
	background: #fff
	  url("../img/ico-dropdown-bluegray-400.svg") no-repeat
	  right center;
	padding: 6px 25px 6px 10px;
	border: none;
	border-radius: 0 2px 2px 0;
	font-size: 14px;
	color: var(--color-blue-800);
	border-left: 1px solid var(--color-bluegray-200);
  }
  /* For IE10 */
  select#selRegion::-ms-expand {
	display: none;
  }

  select#selRegion:focus {
	outline: solid 1px var(--color-blue-800);
	outline-offset: 0px;
	background: var(--color-blue-50)
	  url("../img/ico-dropdown-bluegray-400.svg") no-repeat
	  right center;
  }
  select#selRegion:focus option {
	background-color: #fff;
	color: #000;
  }
  select#selRegion:focus option:hover {
	background-color: var(--color-blue-50);
	color: var(--color-blue-50);
  }

  #select_box:before {
	content: "Region";
	font-size: 14px;
	font-weight: 400;
	position: relative;
	top: 0;
	left: 0;
	padding-left: 27px;
	padding-right: 10px;
	background: transparent
	  url("../img/ico-region-bluegray-400.svg") no-repeat 5px
	  center;
	background-size: 20px 20px;
	display: inline-block;
	height: 27px;
	line-height: 27px;
	color: #000;
  }

  #toolbar {
	position: absolute;
	right: 0px;
	top: 100px;
	height: 420px;
	width: 138px;
	background: var(--color-bluegray-50);
	border-radius: 6px 0 0 6px;
	font-family: FuturaPTW01, arial, helvetica, sans-serif;
	border-right: 1px solid var(--color-bluegray-200);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
	opacity: 0;
  }

  body.loaded #toolbar {
	opacity: 1;
  }

  #marginal-cost {
	background: #fff;
	border-bottom: 1px solid var(--color-bluegray-200);
	border-radius: 6px 0 0 0;
	padding: 16px 20px;
	text-align: center;
  }

  #marginal-cost .cost {
	font-size: 18px;
	font-weight: 700;
	color: #000;
  }

  #marginal-cost .cost-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-bluegray-700);
  }

  #rangeSlider {
	position: absolute;
	left: 66px;
	height: 240px;
	margin-top: 50px;
	background-image: url("../img/range-vertical@2x.png");
	border-radius: 0;
  }

  #rangeSlider:before {
	position: absolute;
	content: "LMP\2191";
	top: -30px;
	text-align: center;
	width: 50px;
	left: -23px;
	color: var(--color-bluegray-700);
	font-size: 12px;
  }

  #rangeSlider:after {
	position: absolute;
	content: "LMP\2193";
	bottom: -30px;
	text-align: center;
	width: 50px;
	left: -23px;
	color: var(--color-bluegray-700);
	font-size: 12px;
  }

  #rangeSlider .noUi-base:before {
	display: block;
	top: -4px;
	content: "";
	width: 6px;
	height: 4px;
	border-radius: 4px 4px 0 0;
	background-color: var(--color-bluegray-400);
	position: absolute;
  }

  #rangeSlider .noUi-base:after {
	display: block;
	bottom: -4px;
	content: "";
	width: 6px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background-color: var(--color-bluegray-400);
	position: absolute;
  }

  #rangeSlider.noUi-vertical {
	width: 6px;
  }

  #rangeSlider.noUi-target {
	box-shadow: none;
	border: none;
  }

  #rangeSlider .noUi-handle {
	border: 1px solid var(--color-bluegray-400);
	border-radius: 4px;
	background-color: none;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  }

  #rangeSlider .noUi-handle:after,
  #rangeSlider .noUi-handle:before {
	content: "";
	display: none;
  }

  #rangeSlider.noUi-vertical .noUi-handle {
	width: 28px;
	height: 16px;
	left: -11px;
	top: -8px;
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	transition: all 150ms cubic-bezier(0.27, 0.01, 0.38, 1.06);
  }

  #rangeSlider.noUi-vertical .noUi-handle.noUi-active,
  #rangeSlider.noUi-vertical .noUi-handle:focus {
	border-color: var(--color-blue-800);
	box-shadow: 1px 1px 8px rgba(var(--color-blue-800-rgb), 0.35);
	-ms-transform: scale(1.05, 1.05); /* IE 9 */
	-webkit-transform: scale(1.05, 1.05); /* Safari */
	transform: scale(1.05, 1.05);
  }

  #rangeSlider .fake-fill {
	width: 6px;
	position: absolute;
	background: var(--color-bluegray-400);
	border-radius: 0;
  }

  #rangeSlider .noUi-pips {
	color: var(--color-bluegray-700);
  }

  #rangeSlider .noUi-marker-large {
	background: var(--color-bluegray-400);
  }

  #rangeSlider .noUi-handle:focus,
  #rangeSlider .noUi-tooltip:focus {
	outline: none;
  }

  #rangeSlider .noUi-tooltip {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
  }

  #rangeSlider .noUi-pips-vertical {
	font-size: 10px;
	padding: 0;
  }

  #rangeSlider .noUi-value-vertical {
	padding-left: 20px;
  }

  #rangeSlider .noUi-marker-vertical.noUi-marker {
	height: 1px;
  }

  .infoTitle {
	display: block;
	padding: 2px 0;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 500;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
  }

  .infoLMP {
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	margin-top: 10px;
  }

  .infoPrice {
	display: inline-block;
	margin-top: -2px;
	border-radius: 3px;
	padding: 2px 3px;
  }

  .infoBreakdownTitle {
	margin-top: 10px;
	color: var(--color-bluegray-700);
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1.2;
  }

  .infoNodeType,
  .infoRegion {
	color: var(--color-bluegray-700);
	text-transform: uppercase;
	margin-bottom: 5px;
	font-size: 12px;
	line-height: 1.2;
  }

  .infoNodeType {
	margin-right: 10px;
  }

  .infoLeft {
	font-size: 14px;
	line-height: 1.2;
	float: left;
	width: 50%;
  }

  .infoRight {
	font-size: 14px;
	line-height: 1.2;
	float: left;
	width: 50%;
	text-align: right;
  }

  .infoPriceBreakdown .infoLeft,
  .infoPriceBreakdown .infoRight,
  .infoBreakdownTitle {
	border-bottom: 1px solid var(--color-bluegray-200);
	padding: 2px 0;
  }

  div#infoRollover {
	position: absolute;
	width: 200px;
	height: 48px;
  }

  div#infoRollover div.info {
	position: absolute;
	z-index: 999;
	width: 200px;
	height: 0;
	background-color: #fff;
	border-radius: 3px;
	padding: 0 8px;
	font-size: 0.875rem;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition:
	  opacity 0.25s ease,
	  height 0.25s ease,
	  padding 0.25s ease;
	-moz-transition:
	  opacity 0.25s ease,
	  height 0.25s ease,
	  padding 0.25s ease;
	-webkit-transition:
	  opacity 0.25s ease,
	  height 0.25s ease,
	  padding 0.25s ease;
	overflow: hidden;
	bottom: 30px;
  }

  div#infoRollover.show div.info {
	opacity: 1;
	height: 48px;
	padding: 5px 8px 3px;
  }

  #infoRollover .infoLMP {
	margin-top: 2px;
	font-size: 14px;
  }

  /* The location pointed to by the popup tip. */
  .popup-tip-anchor {
	height: 0;
	position: absolute;
	width: 300px;
  }

  .popup-bubble-anchor {
	position: absolute;
	width: 100%;
	bottom: 10px;
	left: 0;
  }

  .popup-bubble-anchor:after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid white;
  }
  /* The popup bubble itself. */
  .popup-bubble-content {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -100%);
	font-family: FuturaPTW01, arial, helvetica, sans-serif;
	background-color: white;
	padding: 20px 16px 16px;
	border-radius: 5px;
	overflow-y: auto;
	max-height: 200px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
	width: 278px;
	transition:
	  opacity 0.25s ease,
	  height 0.25s ease,
	  padding 0.25s ease;
	-moz-transition:
	  opacity 0.25s ease,
	  height 0.25s ease,
	  padding 0.25s ease;
	-webkit-transition:
	  opacity 0.25s ease,
	  height 0.25s ease,
	  padding 0.25s ease;
  }

  .popup-bubble-close {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 30px;
	height: 30px;
	border-radius: 0 5px 0 5px;
	background: transparent url("../img/ico-close-black.svg")
	  no-repeat left top;
	cursor: pointer;
  }
  .popup-bubble-close:hover,
  .popup-bubble-close:focus {
	background-image: url("../img/ico-close-blue-800.svg");
	background-color: var(--color-blue-50);
  }
  
  /* Search */
  #text-input-card {
	/*margin-top: 91px;
	margin-left: 8px;*/
	position: absolute;
	right: 8px !important;
	top: 12px !important;
	font-family: FuturaPTW01, arial, helvetica, sans-serif;
	display: none;
	z-index: 99;
  }
	#text-input {
	  font-family: FuturaPTW01, arial, helvetica, sans-serif;
	  font-size: 14px;
	  /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);*/
	  border: 1px solid var(--color-bluegray-400);
	  border-radius: 50px;
	  background: var(--color-bluegray-50) url("../img/ico-search-bluegray-400.svg") no-repeat 8px 4px;
	  background-size: 16px;
	  padding: 4px 6px 4px 28px;
	  width: 160px;
	}
	#text-input:focus {
	  outline: solid 1px var(--color-blue-800);
	  outline-offset: 0px;
	}
	#text-input::placeholder {
		color: var(--color-bluegray-400)
	}
  #text-suggestions {
	font-family: FuturaPTW01, arial, helvetica, sans-serif;
	background-color: #fff;
	border: 1px solid var(--color-bluegray-200);
	border-radius: 5px;
	margin: 0px;
	padding: 0px;
	margin-top: 4px;
	display: block;
	overflow: hidden;
	position: absolute;
	right: 0px;
	min-width: 200px;
	box-shadow: 0 10px 20px rgba(var(--color-blue-800-rgb), .1);
  }
	#text-suggestions li {
	  display: block;
	}
	#text-suggestions:empty {
	  border: none;
	}
	#text-suggestions a {
	  display: block;
	  cursor: pointer;
	  padding: 8px 12px;
	  border-bottom: 1px solid var(--color-bluegray-100);
	}
	#text-suggestions li:last-child a {
	  border-bottom: none;
	}
	#text-suggestions a:hover {
	   background-color: var(--color-blue-50);
	}
	#text-suggestions .infoTitle {
	   font-size: 14px;
	   padding: 0px;
	   margin-bottom: 2px;
	}
	#text-suggestions .infoLMP {
	   font-size: 12px;
	   margin-top: 0px;
	}
  #search-no-results {
	font-size: 14px;
	display: block;
	padding: 8px 12px;
	color: var(--color-red-900);
  }
  
  @media (max-width: 720px) {
	#time {
	  margin-top: 33px;
	}

	#map-info-div {
	  font-size: 12px;
	}

	#selMap {
	  text-align: left;
	  height: 33px;
	}

	#selMap li {
	  padding: 0px;
	}
	#selMap li button {
	  font-size: 14px;
	  padding: 8px 16px 6px;
	  border: none;
	  background: transparent;
	}
	
	#text-input-card {
	  right: 8px !important;
	  top: 5px !important;
	  font-family: FuturaPTW01, arial, helvetica, sans-serif;
	}
	  #text-input {
		font-size: 12px;
		background-position: 8px 3px;
		padding: 4px 0px 4px 28px;
		width: 120px;
	  }
	
	#select_box:before {
	  display: block;
	}
	select#selRegion {
	  border-left: none;
	  border-top: 1px solid var(--color-bluegray-200);
	}

	#toolbar {
	  height: 276px;
	}

	#marginal-cost {
	  padding: 12px 24px;
	}

	#marginal-cost .cost {
	  font-size: 16px;
	}

	#marginal-cost .cost-label {
	  font-size: 12px;
	}

	#rangeSlider {
	  height: 120px;
	  margin-top: 42px;
	  background-size: 6px 120px;
	}
  }
  @media (max-width: 440px) {
	#selMap li button {
	  font-size: 14px;
	  padding: 8px 8px 6px;
	}
	#text-input {
	  width: 100px;
	}
  }
  @media (max-height: 655px) {
	#time {
	  margin-top: 32px;
	}

	#map-info-div {
	  font-size: 12px;
	}

	#selMap {
	  height: 32px;
	}

	#selMap li {
	  padding: 0px;
	}
	#selMap li button {
	  font-size: 14px;
	  padding: 8px 20px 6px;
	  border: none;
	  background: transparent;
	}

	#toolbar {
	  height: 276px;
	}

	#marginal-cost {
	  padding: 12px 24px;
	}

	#marginal-cost .cost {
	  font-size: 16px;
	}

	#marginal-cost .cost-label {
	  font-size: 12px;
	}

	#rangeSlider {
	  height: 120px;
	  margin-top: 42px;
	  background-size: 6px 120px;
	}
  }

  @media only screen and (max-device-width: 480px) {
	#legend {
	  overflow-y: scroll;
	  height: 72%;
	}
  }