.slider-container{
    position: relative;
    width: 10rem;
    height: 1rem;
}
.slider{
    position: absolute;
    width: 9.5rem;
    height: 1rem;
    background-color: rgb(177, 177, 177);
    border-radius: 1rem;
}
.handle{
   position: absolute;
   left: 40%;
   bottom: -22.5%;
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 1rem;
   background-color: rgb(219, 219, 219);
 
}

.small-slider-container{
   position: relative;
   width: 5rem;
   height: .75rem;
}
.small-slider{
   position: absolute;
   width: 5rem;
   height: .75rem;
   background-color: rgb(177, 177, 177);
   border-radius: 1rem;
}
.small-handle{
   position: absolute;
   left: 41%;
   bottom: -20%;
   height: 1rem;
   width: 1rem;
   border-radius: 1rem;
   background-color: rgb(219, 219, 219);
}

.small-delete-button{
   width:40.25px;
   height:50px;
}

.tools{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.delete-button{
    width:50.25px;
    height:60px;
}
.inverted{
   filter: invert(100%);
}
.inputComponent{
    position: absolute;
    left: 35%;
    top: 35%;
    display: flex;
    flex-direction: column;
    width: 40rem;
}
.colormix{
   height: 5rem;
   width: 5.6rem;
}

.box-shadow{
  -webkit-box-shadow: 22px 11px 32px 1px rgba(217,213,217,1);
  -moz-box-shadow: 22px 11px 32px 1px rgba(217,213,217,1);
  box-shadow:  22px 11px 32px 1px rgba(217,213,217,1);
}

.text-shadow{
  text-shadow: 0px 5px 6px rgba(150, 150, 150, 1);
}

.cursor-auto{
  cursor: url('./images/autocursor.png') 6 6, pointer;
}

.cursor-drag{
  cursor: url("./images/hovercursor.png") , grab;
}
.cursor-dragging{
  cursor: url("./images/draggingcursor.png"), grab;
}
.cursor-text{
  cursor: url("./images/textcursor.png") 6 6, pointer;
}