.mobile {
  width: 400px;
}

/*

Colors

Colors:
$color-gptw-bg-blue: #E3F7FF - background color
$color-gptw-bg-dark-blue: #0045FF - background color
$color-gptw-bg-gray: #f7f7f7 - background color
$color-gptw-bg-green: #def2bf - background color
$color-gptw-bg-purple: #eee6fc - background color
$color-gptw-bg-yellow: #FFFAC1 - background color
$color-gptw-bg-royal-blue: #174bd6 - background color
$color-gptw-bg-dark-purple: #401A80 - background color
$color-gptw-bg-pink: #ffd3e8 - background color
$color-gptw-black: #292b30 - accent color
$color-gptw-bright-green: #7dcc00 - accent color
$color-gptw-bright-red: #ff5a5a - accent color
$color-gptw-dark-green: #007373 - accent color
$color-gptw-gold: #ffb81a - accent color
$color-gptw-logo-red: #d50000 - accent color
$color-gptw-teal: #2cd9dd - accent color
$color-gptw-text-navy-blue: #002171 - text color
$color-gptw-text-bright-blue: #0045FF - text color
$color-gptw-text-light-blue: #337DFF - text color
$color-gptw-text-light-grey: #b3b3b3 - text color
$color-gptw-text-medium-grey: #5c6066 - text color
$color-gptw-text-white: #ffffff - text color
$color-gptw-link-background: #DCE6FF - link background color

Styleguide Colors

*/
/* Background colours */
/* Accent colors */
/*

Colors

Various text colors

Markup:
<p class="{{modifier_class}}">A paragraph tag</p>

.font-grey - grey
.font-lighter-grey - light grey
.font-blue - blue


Styleguide Text - Colors

*/
/* CHART COLOURS */
/* LEGACY COLOUR DEFINITIONS */
svg text {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  fill: white;
}
svg .frame {
  fill: #002171;
}

#tooltip {
  position: absolute;
  width: 100%;
  max-width: 300px;
  opacity: 0;
  transition: opacity 200ms linear;
  background: white;
  border-radius: 10px;
  padding: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 99;
}
#tooltip[data-show] {
  opacity: 1;
}
#tooltip #arrow,
#tooltip #arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: -1;
}
#tooltip #arrow::before {
  content: "";
  transform: rotate(45deg);
  background: white;
}
#tooltip[data-show] {
  display: block;
}
#tooltip[data-popper-placement^=top] > #arrow {
  bottom: -4px;
}
#tooltip[data-popper-placement^=bottom] > #arrow {
  top: -4px;
}
#tooltip[data-popper-placement^=left] > #arrow {
  right: -4px;
}
#tooltip[data-popper-placement^=right] > #arrow {
  left: -4px;
}

.tick text {
  text-anchor: center;
}

.grid path {
  display: none;
}
.grid g.tick line {
  stroke: rgba(236, 236, 236, 0.3);
}

.axis text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}
@media (min-width: 992px) {
  .axis text {
    font-size: 12px;
  }
}
.axis path, .axis line {
  stroke: rgba(255, 255, 255, 0.7);
  display: none;
}

.chart-b-bar-text, .chart-c-dot-text {
  font-size: 12px;
}

#chart-a-container {
  width: 100%;
}
#chart-a-container #chart-a-line-a {
  stroke: #FFD800;
}
#chart-a-container #chart-a-line-b {
  stroke: #FE4869;
}
#chart-a-container #chart-a-line-c {
  stroke: #3D4A96;
}
#chart-a-container .year-box {
  fill: #F8F8F8;
  opacity: 0.1;
}
#chart-a-container #chart-a-y-axis path {
  display: none;
}
#chart-a-container #chart-a-y-axis .tick line {
  display: none;
}
#chart-a-container #hotspots circle {
  fill: white;
  cursor: pointer;
}
#chart-a-container #hotspots circle:focus {
  outline: none;
}
#chart-a-container #hotspots-text {
  /* #hotspot-text-close-x {

  	cursor: pointer;
  	fill: white;
  	font-size: 30px;
  	pointer-events: none;
  } */
}
#chart-a-container #chart-a-recession-label {
  text-anchor: start;
}

#chart-b-container .chart-b-bars-a {
  fill: #30ACEA;
}
#chart-b-container .chart-b-bars-b {
  fill: #FE4869;
}

#chart-c-container circle.no-fill {
  fill: #002171;
}
#chart-c-container .chart-c-dots-a-1 {
  fill: #30ACEA;
}
#chart-c-container .chart-c-dots-a-2 {
  stroke: #30ACEA;
  stroke-width: 3;
}
#chart-c-container .chart-c-dots-b-1 {
  fill: #FFD800;
}
#chart-c-container .chart-c-dots-b-2 {
  stroke: #FFD800;
  stroke-width: 3;
}
#chart-c-container .chart-c-line {
  stroke-width: 3;
}
#chart-c-container .chart-c-line.a {
  stroke: #30ACEA;
}
#chart-c-container .chart-c-line.b {
  stroke: #FFD800;
}

/*# sourceMappingURL=2020-recession.css.map */