* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #333;
}

.slider-container{
    position: absolute;
    bottom: 2.5vw;
    left: 5vw;
    display: flex;
    flex-direction: column;
}

input {
    width: calc(90vw - 14rem);
    border: #fdfdfd 2px solid;
    border-radius: .5rem;
}

.slider-group {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
}

.slider-identifier {
    height: 1rem;
    margin-right: 1rem;
}

.extremity-value {
    width: 3rem;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    /* text-align: center; */
}

.tick-number-container{
    width: calc(80vw + 3rem);
    margin-left: calc(10vw - 1.5rem);
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.tick-number {
    width: 3rem;
    font-size: 1rem;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: .75rem;
}

/* #position-tick-numbers {
    top: calc(50vh - 110px);
}
#momentum-tick-numbers {
    top: calc(50vh + 140px);
} */

  /*Chrome*/
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      /* width: 1rem; */
      -webkit-appearance: none;
      background-color: #e9e9e9;
      box-shadow: inset -4px 4px 8px #e2e2e2;
      transition: .15s linear;
      border-radius: .5rem;
    }

    input[type='range']:hover {
      box-shadow: inset 0px 4px 8px #dbdbdb;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 1rem;
      -webkit-appearance: none;
      color: rgb(12,55,232);
      /* margin-top: -1px; */
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 1rem;
      -webkit-appearance: none;
      height: 1rem;
      border-radius: 1rem;
      
      background-color: #fefefe;
      /* box-shadow: 0px 1000px 0px 1000px rgb(105,160,255); */
    }

}

#position::-webkit-slider-thumb {
    background-color: rgb(32,115,232);
}

#momentum::-webkit-slider-thumb {
    background-color: rgb(252,65,32);
}


/* #sigmax::-webkit-slider-thumb {
    background-color: rgb(150,101,167);
}

#sigmax::-webkit-slider-thumb {
    background-color: rgb(116,225,87);
} */

#sigmax::-webkit-slider-thumb {
    background-color: var(--thumb-color, rgb(252,65,32));
}