/* Custom Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Inter:wght@400;500;600;700&display=swap');

/* Webkit Range Sliders Customization mimicking Wealthsimple aesthetic */

input[type=range] {
  -webkit-appearance: none; 
  width: 100%; 
  background: transparent; 
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #000000;
  cursor: pointer;
  margin-top: -10px; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:active {
  transform: scale(1.1);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #e5e5d8;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,0.05);
}

input[type=range]:focus {
  outline: none;
}