/* ---------------------- */

/* Free report	
Blue	0073e9
Green	00d251
Yellow	ffc032
Red	ff004f
	
Premium report	
Red	ee3b3b
Green	02b56b
Purple	5c5796
Yellow	ed9e04 

General	
Gradingly blue	2f56a1
Light grey background	f6f6f6
Premium Report Orange	ff734a
Select green	00d251
Google signup	de5246
Facebook signup	3b5998*/

.chartPlaceholder * {
  font-family: "Open Sans";
}

.labels {
  font-size: 1em;
  fill: black;
}

.title {
  font-size: 1em;
  fill: black;
}

.chartPlaceholder {
  width: 90%;
  height: 25%;
}

.barBackround {
  fill: #f6f6f6;
}

.barBackround,
.barOuter {
  ry: 0.4em; /* rounding */
  rx: 0.4em; /* rounding */
}
.barOuterresult {
  ry: 0.6em; /* rounding */
  rx: 2em; /* rounding */
}

/* Pointring bars fill color */

.colorSingleBar {
  fill: #D3CFCF;
}

.colorGood {
  fill: #02b56b;
}

.colorModerate {
  fill: #ed9e04;
}

.colorBad {
  fill: #ee3b3b;
}
.colorNew {
  fill: #f6f6f6;
}
/* CEFR Line (bottom) */

.cefrLabels {
  fill: white;
}

.cefrLabelsSelected {
  fill: black;
  font-size: 1em ;
}

.cefrCircleSelected {
  opacity: 1;
  fill: #2f56a1;
}

.cefrCircleBlank {
  opacity: 0;
}

.chartTitle {
  text-align: left;
  font-size: 1.2em;
  fill: black;
  line-height: 2em;
  vertical-align: top;
}

/* Pointers next to title */
.positivePointText {
  color: #02b56b;
}

.negativePointText {
  color: #ee3b3b;
}

.positivePointText,
.negativePointText {
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: middle;
  border-radius: 50%;
  padding: 1px;
  border: 1px solid #f6f6f6;
  text-align: center;
}

/* Sliding Indicators */
.triangleIndicatorBottom {
  fill: #2f56a1;
  font-size: 1.2em;
}

.triangleIndicatorTop {
  fill: #ee3b3b;
  font-size: 1.2em;
}

.triangleIndicatorDescr {
  fill: black;
  font-size: 1em;
}

div.labsDiv {
  position: absolute;
  font-size: 0.6em;
  text-align: center;
  padding: 1px;
  background: rgb(231, 231, 231);
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  /* padding-bottom: 100%; */
  vertical-align: top;
  overflow: hidden;
}

.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}
.tooltip_container {
  font-size: 12px;
  text-align: left !important;
  /* background-color: rgba(0, 0, 0, 0.6) !important; */
  /* color: #fff; */
  /* padding: 10px !important; */
  border-radius: 5px;
  height: auto;
}

.tooltip_header {
  text-align: left !important;
  padding-left: 0px !important;
  /* padding-bottom: 5px; */
}

.tooltip_header > p {
}

.tooltip_footer {
  padding-top: 1px;
}

.tooltip_footer > ul {
  padding-top: 1px;
  border-top: 1px solid #fff;
  text-align: left !important;
  padding-left: 15px !important;
  margin-bottom: 0;
  /* color: red; */
}

.tooltip_footer > ul li:before {
  /* the custom styled bullets */
  /* background-color: white; */
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 5px;
  margin-left: -15px !important;
  margin-bottom: 1px;
  height: 5px;
  width: 5px;
}

@media (max-width: 575px) {
  .tooltip_container {
    /* position: absolute; */
    width: 100px;
    left: 30px;
    right: 30px;
  }
}

@media (max-width: 575px) {
  .tooltip_container {
    /* position: absolute; */
    width: 100px;
    left: 30px;
    right: 30px;
  }
}
.tooltip {
  pointer-events: none;
}

/* ------------------- */