/*For Developer Use*/

.rippleBtn {
  position: relative;
  overflow: hidden;
}

.rippleBtn span.ripple {
  position: absolute;
  border-radius: 50%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-animation: ripple 600ms linear;
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.7);
}

span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: #F5CBA7;
}




.checkmark:before {
  content: "";
  position: absolute;
  top: calc(var(--y) - var(--width) / 2);
  left: calc(var(--x) - var(--width) / 2);
  transform-origin: 50% 50%;
  background-color: #fff;

  height: var(--width);
  width: var(--width);
  border-radius: 50%;
  z-index: -1;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.checkmark[aria-selected="true"]:before {
  transform: none;
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.1s ease;
}