@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type='range']:focus {
    outline: none;
  }

  input[type='range'] {
    height: 2px;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 15px;
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    cursor: ew-resize;
    background: #fff;
    border-radius: 50%;

    background-color: #fff;
    border: 1px solid #d4d4d4;
  }
}

.roll-btn {
  width: 3.5rem;
  height: 3.5rem;
}

.custom-shadow {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  border: 0;
}

button:focus,
img:focus,
.reroll:focus,
.reroll {
  outline: none !important;
}

.reroll {
  animation: rotate-center 0.3s ease-in-out both;
}

@keyframes rotate-center {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(180deg) scale(0.7);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.flipdown {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  transition: all 300ms;
}
.flipup {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  transition: all 300ms;
}

.scale-in-center {
  animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
