input.circle-range-select {
  display: none; }

.circle-range-select-wrapper {
  position: relative;
  max-width: 100%;
  width: 10em;
  height: 10em;
  margin: 0.65em;
  padding: 0.65em !important;
  border-radius: 50%;
  border: 0.4em solid #ccc;
  cursor: default; }
  .circle-range-select-wrapper .handle {
    position: absolute;
    z-index: 2;
    width: 0;
    height: 0;
    border: 0;
    padding: 0;
    cursor: pointer; }
    .circle-range-select-wrapper .handle:before {
      content: '';
      position: absolute;
      z-index: 3;
      top: -0.65em;
      left: -0.65em;
      height: 1.3em;
      width: 1.3em;
      border-radius: 50%;
      background: #000; }
  .circle-range-select-wrapper .selected-range {
    position: absolute;
    z-index: 1;
    color: #00ffff; }
  .circle-range-select-wrapper .values {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -0.5em;
    font-size: 0.85rem;
    text-align: center; }
