#agregar , #eliminar{
width: 40px;
height: 30px;
background-color: rgba(128, 128, 128, 0.692);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
border: 2px solid black;
border-right: 0px ;
border-bottom: 0px ;
box-sizing: border-box;
user-select: none;
}
#agregar:active , #eliminar:active{
border: 0px solid black;
border-right: 2px solid black ;
border-bottom: 2px solid black;
}
#agregar {
  position: absolute;
  top: 40%;
  left: 5px;
}
#eliminar{
  position: absolute;
  top: 48%;
  left: 5px;
}
#eliminar.eliminando{
  background-color: rgba(255, 255, 2, 0.862);
}
#ancho , #alto , #borderRadius{
user-select: none;
width: 60px;
height: 20px;
padding: 2px;
}
#ancho {
position: absolute;
left: 5px;
top: 56%;

}
#alto {
position: absolute;
left: 5px;
top: 62%;

}
#borderRadius{
  position: absolute;
left: 5px;
top: 68%;
}

#texto{
  user-select: none;
  width: 60px;
  position: absolute;
  top: 74%;
  left: 5px;
}
#colorText{
  user-select: none;
  width: 40px;
  height: 30px;
  position: absolute;
  top: 79%;
  left: 5px;
}
#backColor{
  user-select: none;
  width: 40px;
  height: 30px;
  position: absolute;
  top: 85%;
  left: 5px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}














/* Abajo esta la Libreria */
.grab{
    position: absolute; 
    transform: translate(-50%,-50%);
    transition: box-shadow 500ms;
  }
.grabing{
      top: calc(var(--top) - 10px);
      box-shadow: 0px 10px 20px black;
    border: 2px solid #000000a7;
    z-index: 999;
  }
  :root{
 --top:100px;
 --left:100px;
  }