@charset "UTF-8";
.ripple {
  overflow: hidden;
  transition: 235ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  will-change: transform, opacity;
}
.ripple::after {
  transition: opacity 15ms linear, background-color 15ms linear;
  transform: scale(0);
}
.ripple::after, .ripple::before, .ripple-activation::after, .ripple-deactivation::after {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background-color: #616161;
  content: "";
}
.ripple::after, .ripple-activation::after, .ripple-deactivation::after {
  width: var(--ripple-size, 100%);
  height: var(--ripple-size, 100%);
  top: 0;
  left: 0;
  transform-origin: center center;
}
.ripple::before {
  transition: opacity 15ms linear, background-color 15ms linear;
  transform: scale(var(--mdc-ripple-fg-scale, 1));
  top: calc(50% - 100%);
  left: calc(50% - 100%);
  width: 200%;
  height: 200%;
  pointer-events: none;
}
.ripple:hover::before {
  opacity: var(--ripple-opacity, 0.1);
}
.ripple-activation::after {
  animation: ripple-radius-in 225ms forwards, ripple-opacity-in 75ms forwards;
  --ripple-opacity: 0.2;
}
.ripple-focused::before {
  transition-duration: 75ms;
  opacity: 0.2;
}
.ripple-deactivation::after {
  animation: ripple-opacity-out 150ms forwards;
  transform: translate(var(--ripple-end, 0)) scale(var(--ripple-scale, 1));
  --ripple-opacity: 0.2;
}
@keyframes ripple-radius-in {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(var(--ripple-start, 0)) scale(1);
  }
  to {
    transform: translate(var(--ripple-end, 0)) scale(var(--ripple-scale, 1));
  }
}
@keyframes ripple-opacity-in {
  from {
    animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: var(--ripple-opacity, 0);
  }
}
@keyframes ripple-opacity-out {
  from {
    animation-timing-function: linear;
    opacity: var(--ripple-opacity, 0);
  }
  to {
    opacity: 0;
  }
}
.ripple-white.ripple-activation::after, .ripple-white.ripple-deactivation::after {
  --ripple-opacity: 0.24;
}
.ripple-white.ripple::after, .ripple-white.ripple::before {
  background-color: #fff;
}
.ripple-white.ripple:hover::before {
  opacity: var(--ripple-opacity, 0.1);
}
.ripple-white.ripple-focused::before {
  opacity: 0.24;
}
.ripple-color::after, .ripple-color::before {
  background-color: var(--main-color, #000);
}
.ripple-color.ripple-focused::before {
  opacity: 0.2;
}