.sl-rank-circle {
  display: flex;
  flex-direction: row;
  gap: 4px;
  justify-content: stretch;
  align-items: center;
  position: relative;
  margin: 0px;
  border-radius: 300px;
  border: 2px solid #147391;
  padding: 2px 2px;
  font-size: 0.9rem;
  height: 30px;
}
.sl-rank-circle.value-zero {
  border: 2px solid #ccc;
}
.sl-rank-circle.value-zero .sl-rank-circle-title {
  color: #ccc !important;
}
.sl-rank-circle.value-zero .sl-rank-circle-value {
  background-color: #ccc !important;
  color: gray !important;
}
.sl-rank-circle-title {
  position: relative;
  left: 0%;
  color: black;
  padding: 0px 4px 0px 0px;
}
.sl-rank-circle-value {
  border-radius: 50%;
  text-align: center;
  aspect-ratio: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
}
.sl-rank-circle-value.value-low {
  background-color: #CFE4D3;
  color: black;
}
.sl-rank-circle-value.value-medium {
  background-color: #8ECDA1;
  color: black;
}
.sl-rank-circle-value.value-high {
  background-color: #008A42;
  color: white;
}
.sl-rank-circle-value.value-gray {
  background-color: #ccc;
  color: black;
}
.sl-ranking-selector {
  gap: 15px;
  width: 100%;
}
.sl-ranking-selector .sl-rank-circle-value {
  font-size: 22px;
  display: grid;
  justify-items: center;
  align-items: center;
  height: 40px;
}
.sl-ranking-selector-card {
  width: 100%;
  border: 2px solid #ccc;
  padding: 8px;
  gap: 8px;
  border-radius: 4px;
}
.sl-ranking-selector-card--selected {
  border: 2px solid #147391;
}