.component {
  fill: var(--brandGrey500);
  opacity: 0.4;
  cursor: default;
}

.background {
  fill: #ffffff;
  fill-opacity: 0.01;
}

/* #div1,
#div2,
#div3,
#div4 {
    width: 33%;
    height: 200px;
    box-sizing: border-box;
    float: left;
} */

.selectedRadial {
  border-radius: 3px;
  background: #f4f4f4;
  color: #000;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(200, 200, 200, 0.85);
}

.radial {
  border-radius: 7px;
  background: #ffffff;
  color: #000;
}

.arc {
  stroke-weight: 0.1;
  fill: #36bedd;
  stroke: #187a90;
}

.arc2 {
  stroke-weight: 0.1;
  fill: #3660b0;
}

.label {
  text-anchor: middle;
  display: none;
}

.radial-svg {
  display: block;
  margin: 0 auto;
  width: 102%;
  height: 102%;
}

/* #div1 .arc {
    stroke-weight: 0.1;
    fill: #1d871b;
} */

/* #div2 .arc {
    stroke-weight: 0.1;
    fill: #f0a417;
}

#div2 .arc2 {
    stroke-weight: 0.1;
    fill: #b00d08;
}

#div3 .arc {
    stroke-weight: 0.1;
    fill: #1d871b;
}

#outer {
    background: #FFFFFF;
    border-radius: 5px;
    color: #000;
}

#test .arc2 {
    stroke-weight: 0.1;
    fill: #3660b0;
} */