input[type=range]{
    pointer-events: all;
    width: 100%;
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
    display:block;
    margin-top:10px;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  }
  input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
  
    /* Hides the slider so custom styles can be added */
    background: transparent; 
    border-color: transparent;
    color: transparent;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: gray;
    cursor: pointer;
    margin-top: -7px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  }
  /* All the same stuff for Firefox */
  input[type=range]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: gray;
    cursor: pointer;
  }
  /* All the same stuff for IE */
  input[type=range]::-ms-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: gray;
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    background: gray;
    opacity: 0.8;
  }
  
  input[type=range]:focus::-webkit-slider-runnable-track {
    opacity: .5;
  }
  
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
    background: gray;
    opacity: 0.8;
  }
  
  input[type=range]::-ms-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
  }
  input[type=range]::-ms-fill-lower {
    background: gray;
    opacity: 1;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: gray;
  }
  input[type=range]::-ms-fill-upper {
    background: gray;
      opacity: 1;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: gray;
    opacity: 1;
  }
  
  
  
  
  
  
  
  
  .select-css {
    color:var(--white);
    border: 1px solid transparent;
    /* border: 1px solid var(--black); */
    outline:none;
      display: block;
      font-size: 18px;
    font-variation-settings: 'wght' 200;
    letter-spacing: 0.9;
      line-height: 1.3;
      /* padding: .6em 1.4em .5em 0.8em; */
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin: 0;
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      background-color: transparent;
      background-image: url('../assets/select-arrow-gray.svg');
      background-repeat: no-repeat, repeat;
      background-position: right .7em top 50%, 0 0;
      background-size: .65em auto, 100%;
  }
  .select-css.color-toggle-on{
    color:var(--black);
  }
  .select-css::-ms-expand {
      display: none;
  }
  .select-css:focus {
      outline: none;
  }
  .select-css option {
      font-weight:normal;
  }
  select.body-select{
    margin-bottom:15px;
  }
  
  
  .tester-select{
    color:var(--gray);
    border-color:var(--gray);
    background-image: url('../assets/arrow-black.svg');
  }