:root {
  --font-sans: 'Helvetica Neue', Helvetica, Arial, ui-sans-serif, system-ui,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

html,
body {
  font-family: var(--font-sans);
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


.bg-primary {
  background-color: #f99215 !important;
}

.bg-primary-disabled {
  background-color: #F9921580 !important;
}

.bg-secondary {
  background-color: #D3D3D3 !important
}

.text-primary {
  color: #f99215;
}

.text-gray {
  color: #808082;
}

.text-black-title {
  color: #1B1C1E
}

.border-primary {
  border-color: #6D6E711A;
}

.border-gray {
  border-color: #6D6E714D;
}

.border-primary:focus {
  border-color: #f99215;
  outline: none;
}

.border-orange {
  border-color: #F99215;
}

.border-gray-lighter {
  border-color: #D3D3D3;
}

.text-subtitle {
  color: #2B2B2B
}

.text-body {
  color: #0C0C0F
}

.gray-section {
  background-color: #F4F4F8;
  border-color: #D3D3D3;
  border-radius: 1.5rem;
}

.button-shape {
  font-size: 1.125rem;
  padding: 14px;
  display: flex;
  font-weight: medium;
  height: 3rem;
  border-radius: 30px;
  align-items: center;
}

@media (max-width: 767px) {
  .button-shape {
    height: 45px;
    font-size: 15px;

  }
}

.accent-primary {
  accent-color: #f99215;
  color: white;
  background-color: #E8E9EB;
}
:root{
  --track-size: 6px;
  --thumb-size: 20px;
}

input[type="range"].accent-primary{
  -webkit-appearance: none;
  appearance: none;
  height: var(--thumb-size);
  background: transparent;
  accent-color: #f99215;
}

.accent-primary::-webkit-slider-runnable-track{
  height: var(--track-size);
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    #f99215 var(--range-percent),
    #E8E9EB var(--range-percent)
  );
}

.accent-primary::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width:  var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #f99215;
  cursor: pointer;
  margin-top: calc((var(--track-size) - var(--thumb-size)) / 2); /* centers */
}

.accent-primary::-moz-range-track{
  height: var(--track-size);
  border-radius: 9999px;
  background: #E8E9EB;
}

.accent-primary::-moz-range-progress{
  height: var(--track-size);
  border-radius: 9999px;
  background: #f99215;
}

.accent-primary::-moz-range-thumb{
  width:  var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #f99215;
  cursor: pointer;
}



.form-input.filled {
  border-color: #515153;
  background-color: #F5F5FA !important;
}

.text-red {
  color: #FF5656;
}