@import url("https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
}

.wrapper {
  display: inline-flex;
  height: 5rem;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 15px;
}
.wrapper .option {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 8px;
  border-radius: 5px;
  cursor: pointer;

  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot {
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before {
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #0069d9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"] {
  display: none;
}

#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2,
#option-3:checked:checked ~ .option-3,
#option-4:checked:checked ~ .option-4,
#option-5:checked:checked ~ .option-5,
#option-6:checked:checked ~ .option-6,
#option-7:checked:checked ~ .option-7,
#option-8:checked:checked ~ .option-8,
#option-9:checked:checked ~ .option-9,
#option-10:checked:checked ~ .option-10,
#option-11:checked:checked ~ .option-11,
#option-12:checked:checked ~ .option-12,
#option-13:checked:checked ~ .option-13,
#option-14:checked:checked ~ .option-14,
#option-15:checked:checked ~ .option-15,
#option-16:checked:checked ~ .option-16,
#option-17:checked:checked ~ .option-17,
#option-18:checked:checked ~ .option-18,
#option-19:checked:checked ~ .option-19,
#option-20:checked:checked ~ .option-20,
#option-21:checked:checked ~ .option-21,
#option-22:checked:checked ~ .option-22,
#option-23:checked:checked ~ .option-23,
#option-24:checked:checked ~ .option-24,
#option-25:checked:checked ~ .option-25,
#option-26:checked:checked ~ .option-26,
#option-27:checked:checked ~ .option-27,
#option-28:checked:checked ~ .option-28,
#option-29:checked:checked ~ .option-29,
#option-30:checked:checked ~ .option-30,
#option-31:checked:checked ~ .option-31,
#option-32:checked:checked ~ .option-32,
#option-33:checked:checked ~ .option-33,
#option-34:checked:checked ~ .option-34,
#option-35:checked:checked ~ .option-35,
#option-36:checked:checked ~ .option-36,
#option-37:checked:checked ~ .option-37,
#option-38:checked:checked ~ .option-38,
#option-39:checked:checked ~ .option-39,
#option-40:checked:checked ~ .option-40,
#option-41:checked:checked ~ .option-41,
#option-42:checked:checked ~ .option-42,
#option-43:checked:checked ~ .option-43,
#option-44:checked:checked ~ .option-44,
#option-45:checked:checked ~ .option-45,
#option-46:checked:checked ~ .option-46,
#option-47:checked:checked ~ .option-47,
#option-48:checked:checked ~ .option-48,
#option-49:checked:checked ~ .option-49,
#option-50:checked:checked ~ .option-50,
#option-51:checked:checked ~ .option-51,
#option-52:checked:checked ~ .option-52,
#option-53:checked:checked ~ .option-53,
#option-54:checked:checked ~ .option-54,
#option-55:checked:checked ~ .option-55 {
  border-color: #0069d9;
  background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot,
#option-3:checked:checked ~ .option-3 .dot,
#option-4:checked:checked ~ .option-4 .dot,
#option-5:checked:checked ~ .option-5 .dot,
#option-6:checked:checked ~ .option-6 .dot,
#option-7:checked:checked ~ .option-7 .dot,
#option-8:checked:checked ~ .option-8 .dot,
#option-9:checked:checked ~ .option-9 .dot,
#option-10:checked:checked ~ .option-10 .dot,
#option-11:checked:checked ~ .option-11 .dot,
#option-12:checked:checked ~ .option-12 .dot,
#option-13:checked:checked ~ .option-13 .dot,
#option-14:checked:checked ~ .option-14 .dot,
#option-15:checked:checked ~ .option-15 .dot,
#option-16:checked:checked ~ .option-16 .dot,
#option-17:checked:checked ~ .option-17 .dot,
#option-18:checked:checked ~ .option-18 .dot,
#option-19:checked:checked ~ .option-19 .dot,
#option-20:checked:checked ~ .option-20 .dot,
#option-21:checked:checked ~ .option-21 .dot,
#option-22:checked:checked ~ .option-22 .dot,
#option-23:checked:checked ~ .option-23 .dot,
#option-24:checked:checked ~ .option-24 .dot,
#option-25:checked:checked ~ .option-25 .dot,
#option-26:checked:checked ~ .option-26 .dot,
#option-27:checked:checked ~ .option-27 .dot,
#option-28:checked:checked ~ .option-28 .dot,
#option-29:checked:checked ~ .option-29 .dot,
#option-30:checked:checked ~ .option-30 .dot,
#option-31:checked:checked ~ .option-31 .dot,
#option-32:checked:checked ~ .option-32 .dot,
#option-33:checked:checked ~ .option-33 .dot,
#option-34:checked:checked ~ .option-34 .dot,
#option-35:checked:checked ~ .option-35 .dot,
#option-36:checked:checked ~ .option-36 .dot,
#option-37:checked:checked ~ .option-37 .dot,
#option-38:checked:checked ~ .option-38 .dot,
#option-39:checked:checked ~ .option-39 .dot,
#option-40:checked:checked ~ .option-40 .dot,
#option-41:checked:checked ~ .option-41 .dot,
#option-42:checked:checked ~ .option-42 .dot,
#option-43:checked:checked ~ .option-43 .dot,
#option-44:checked:checked ~ .option-44 .dot,
#option-45:checked:checked ~ .option-45 .dot,
#option-46:checked:checked ~ .option-46 .dot,
#option-47:checked:checked ~ .option-47 .dot,
#option-48:checked:checked ~ .option-48 .dot,
#option-49:checked:checked ~ .option-49 .dot,
#option-50:checked:checked ~ .option-50 .dot,
#option-51:checked:checked ~ .option-51 .dot,
#option-52:checked:checked ~ .option-52 .dot,
#option-53:checked:checked ~ .option-53 .dot,
#option-54:checked:checked ~ .option-54 .dot,
#option-55:checked:checked ~ .option-55 .dot {
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before,
#option-4:checked:checked ~ .option-4 .dot::before,
#option-5:checked:checked ~ .option-5 .dot::before,
#option-6:checked:checked ~ .option-6 .dot::before,
#option-7:checked:checked ~ .option-7 .dot::before,
#option-8:checked:checked ~ .option-8 .dot::before,
#option-9:checked:checked ~ .option-9 .dot::before,
#option-10:checked:checked ~ .option-10 .dot::before,
#option-11:checked:checked ~ .option-11 .dot::before,
#option-12:checked:checked ~ .option-12 .dot::before,
#option-13:checked:checked ~ .option-13 .dot::before,
#option-14:checked:checked ~ .option-14 .dot::before,
#option-15:checked:checked ~ .option-15 .dot::before,
#option-16:checked:checked ~ .option-16 .dot::before,
#option-17:checked:checked ~ .option-17 .dot::before,
#option-18:checked:checked ~ .option-18 .dot::before,
#option-19:checked:checked ~ .option-19 .dot::before,
#option-20:checked:checked ~ .option-20 .dot::before,
#option-21:checked:checked ~ .option-21 .dot::before,
#option-22:checked:checked ~ .option-22 .dot::before,
#option-23:checked:checked ~ .option-23 .dot::before,
#option-24:checked:checked ~ .option-24 .dot::before,
#option-25:checked:checked ~ .option-25 .dot::before,
#option-26:checked:checked ~ .option-26 .dot::before,
#option-27:checked:checked ~ .option-27 .dot::before,
#option-28:checked:checked ~ .option-28 .dot::before,
#option-29:checked:checked ~ .option-29 .dot::before,
#option-30:checked:checked ~ .option-30 .dot::before,
#option-31:checked:checked ~ .option-31 .dot::before,
#option-32:checked:checked ~ .option-32 .dot::before,
#option-33:checked:checked ~ .option-33 .dot::before,
#option-34:checked:checked ~ .option-34 .dot::before,
#option-35:checked:checked ~ .option-35 .dot::before,
#option-36:checked:checked ~ .option-36 .dot::before,
#option-37:checked:checked ~ .option-37 .dot::before,
#option-38:checked:checked ~ .option-38 .dot::before,
#option-39:checked:checked ~ .option-39 .dot::before,
#option-40:checked:checked ~ .option-40 .dot::before,
#option-41:checked:checked ~ .option-41 .dot::before,
#option-42:checked:checked ~ .option-42 .dot::before,
#option-43:checked:checked ~ .option-43 .dot::before,
#option-44:checked:checked ~ .option-44 .dot::before,
#option-45:checked:checked ~ .option-45 .dot::before,
#option-46:checked:checked ~ .option-46 .dot::before,
#option-47:checked:checked ~ .option-47 .dot::before,
#option-48:checked:checked ~ .option-48 .dot::before,
#option-49:checked:checked ~ .option-49 .dot::before,
#option-50:checked:checked ~ .option-50 .dot::before,
#option-51:checked:checked ~ .option-51 .dot::before,
#option-52:checked:checked ~ .option-52 .dot::before,
#option-53:checked:checked ~ .option-53 .dot::before,
#option-54:checked:checked ~ .option-54 .dot::before,
#option-55:checked:checked ~ .option-55 .dot::before {
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span {
  font-size: 0.75rem;
  color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span,
#option-3:checked:checked ~ .option-3 span,
#option-4:checked:checked ~ .option-4 span,
#option-5:checked:checked ~ .option-5 span,
#option-6:checked:checked ~ .option-6 span,
#option-7:checked:checked ~ .option-7 span,
#option-8:checked:checked ~ .option-8 span,
#option-9:checked:checked ~ .option-9 span,
#option-10:checked:checked ~ .option-10 span,
#option-11:checked:checked ~ .option-11 span,
#option-12:checked:checked ~ .option-12 span,
#option-13:checked:checked ~ .option-13 span,
#option-14:checked:checked ~ .option-14 span,
#option-15:checked:checked ~ .option-15 span,
#option-16:checked:checked ~ .option-16 span,
#option-17:checked:checked ~ .option-17 span,
#option-18:checked:checked ~ .option-18 span,
#option-19:checked:checked ~ .option-19 span,
#option-20:checked:checked ~ .option-20 span,
#option-21:checked:checked ~ .option-21 span,
#option-22:checked:checked ~ .option-22 span,
#option-23:checked:checked ~ .option-23 span,
#option-24:checked:checked ~ .option-24 span,
#option-25:checked:checked ~ .option-25 span,
#option-26:checked:checked ~ .option-26 span,
#option-27:checked:checked ~ .option-27 span,
#option-28:checked:checked ~ .option-28 span,
#option-29:checked:checked ~ .option-29 span,
#option-30:checked:checked ~ .option-30 span,
#option-31:checked:checked ~ .option-31 span,
#option-32:checked:checked ~ .option-32 span,
#option-33:checked:checked ~ .option-33 span,
#option-34:checked:checked ~ .option-34 span,
#option-35:checked:checked ~ .option-35 span,
#option-36:checked:checked ~ .option-36 span,
#option-37:checked:checked ~ .option-37 span,
#option-38:checked:checked ~ .option-38 span,
#option-39:checked:checked ~ .option-39 span,
#option-40:checked:checked ~ .option-40 span,
#option-41:checked:checked ~ .option-41 span,
#option-42:checked:checked ~ .option-42 span,
#option-43:checked:checked ~ .option-43 span,
#option-44:checked:checked ~ .option-44 span,
#option-45:checked:checked ~ .option-45 span,
#option-46:checked:checked ~ .option-46 span,
#option-47:checked:checked ~ .option-47 span,
#option-48:checked:checked ~ .option-48 span,
#option-49:checked:checked ~ .option-49 span,
#option-50:checked:checked ~ .option-50 span,
#option-51:checked:checked ~ .option-51 span,
#option-52:checked:checked ~ .option-52 span,
#option-53:checked:checked ~ .option-53 span,
#option-54:checked:checked ~ .option-54 span,
#option-55:checked:checked ~ .option-55 span{
  color: #fff;
}
.labelspan {
  font-size: 10px;
}