/*  COMPONENT COMMON  ============================================================================= */
.component {
  position: relative;
  font-size: 1.6em;
  background-color: #fff;
  width: 28.5em;
  height: 23.1em;
  overflow: hidden;
  display: inline-block;
  text-align: left;
  margin: 0;
  padding: 0;
  vertical-align: top; }

.component .title {
  position: absolute;
  color: #354052;
  text-align: left;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-top: 1.25em;
  max-width: 100%;
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 1em;
  line-height: 150%;
  letter-spacing: 0.002em; }

.component .subtitle {
  line-height: 1.2em;
  font-size: .7em;
  opacity: .8; }

.icon-holder {
  display: none; }

/*  PERIOD COMPONENT  ============================================================================= */
.period-holder {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.25em;
  color: #687179;
  font-weight: 300;
  font-style: normal;
  text-align: left;
  line-height: 1.4em;
  letter-spacing: 0.01em;
  margin-top: 2.4em;
  padding-left: 0.9em;
  padding-right: 0.6em; }

.period-holder div {
  display: inline-block;
  margin-right: 0.4em;
  margin-bottom: .3em; }

.period-holder span {
  font-weight: 300;
  color: #377BE5 !important; }

/*  HORIZONTAL BARS  ============================================================================= */
.horizontal-bars .content {
  text-align: center;
  position: relative; }

.horizontal-bars svg {
  width: 26em;
  height: 16em;
  /*background: #eeeeee;*/
  margin-top: 6em; }

.horizontal-bars .bar-background {
  opacity: .3; }

.horizontal-bars .label {
  text-align: left;
  letter-spacing: 0em;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.5em;
  fill: #354052; }

.horizontal-bars .xAxis line {
  display: none; }

.horizontal-bars .xAxis text {
  font-style: normal;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.5em;
  fill: #354052; }

.horizontal-bars .xAxis path {
  stroke-width: 0;
  fill: none; }

.horizontal-bars .lines {
  position: absolute;
  left: 1.2em;
  top: 5.5em; }

.horizontal-bars .lines .line {
  position: absolute;
  height: 14em;
  width: 1px;
  background-color: #687179;
  opacity: 0.1; }

.line-graph .bubble {
  position: absolute;
  z-index: 2;
  display: none;
  pointer-events: none; }

.line-graph .hot-spot {
  opacity: 0; }

.line-graph .tooltip-holder {
  position: absolute; }

.line-graph .bubble .value {
  display: inline-block;
  position: relative;
  margin-left: -50%;
  padding: .5em 1em;
  border-radius: .4em;
  background-color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7em;
  color: #414141;
  font-style: normal;
  text-align: center;
  letter-spacing: 0.03em;
  border: 1px solid #E0E3E6;
  /*box-shadow: 0 0 .5px .5px rgba(0, 0, 0, .15);*/ }

/*
.line-graph .bubble:after{
    content:"";
    display: block;
    position: relative;
    width: 0em;
    height: 0;
    margin-left: -.5em;
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    border-top: .5em solid #ebebeb;
}*/
/*  LINE GRAPH  ============================================================================= */
.line-graph svg {
  margin-top: 3em;
  margin-left: 0.5em;
  padding-bottom: 0.5em; }

.line-graph .line {
  fill: none;
  stroke: #FB7504;
  stroke-width: 2; }

.line-graph .startColor {
  stop-color: #ffffff; }

.line-graph .endColor {
  stop-color: #FB7504; }

.line-graph circle {
  fill: #FB7504; }

.line-graph circle {
  r: 3.5; }

.line-graph .area {
  opacity: .2; }

.line-graph .xAxis text, .line-graph .yAxis text {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.5em;
  color: #354052;
  text-align: left;
  letter-spacing: 0em; }

.line-graph .xAxis path, .line-graph .yAxis path {
  fill: none;
  stroke: none;
  display: none; }

/*.line-graph .xAxis .tick:first-child text{
    opacity: .0;
    stroke-width: 0;
}*/
/*  PIE  ============================================================================= */
.pie .category-list {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9em;
  color: #354052;
  font-style: normal;
  line-height: 3em; }

.pie .category-list .label {
  font-size: .8em; }

.pie .category-list.layout-1 {
  margin-top: 22em;
  text-align: center; }

.pie .category-list.layout-1 .category-item {
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em; }

.pie .category-list.layout-2 {
  margin-left: 1.5em;
  margin-top: 9em; }

.pie .rect {
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  top: .2em;
  margin-right: 0.6em;
  border-radius: .5em;
  border: .15em solid; }

/*
.pie .layout-1 svg{
    position: absolute;
    width: 15em;
    height: 15em;
    left: 6em;
    top: 4.5em;
}

.pie .layout-2 svg{
    position: absolute;
    width: 15em;
    height: 15em;
    left: 10em;
    top: 7em;
} */
.pie circle {
  fill: #fff;
  opacity: .04; }

.pie .tooltip {
  stroke: #000;
  stroke-width: 2; }

.pie .bubble {
  position: absolute;
  z-index: 2; }

.pie .bubble .value {
  display: inline-block;
  position: relative;
  margin-left: -50%;
  padding: 0.2em .5em;
  border-radius: .3em;
  background-color: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  color: #414141;
  font-style: normal;
  text-align: center;
  letter-spacing: 0.03em;
  border: 1px solid #E0E3E6; }