.tools {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tools li {
  /*width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  border: black solid 1px;*/
    width: 3vw;
  height: 6.8vh;
  text-align: center;
  /*line-height: 3.28vw;*/
  font-size: 1.84vw;
  border: black solid 1px;


  background:  rgba(190,190,190,0.9);
  cursor: pointer;
  position: relative;
}

.tools li:hover {
 background: #455a64;
}
.tools li  ::-webkit-input-placeholder{color:white;font-size:14px;}
.tools li.active {
  background: #e34f51;
}
.tools .add.active {
  background: white;
}
.hide {
  display: none;
}

.canvasDiv {
  position: relative;
  width: 100%;
  height: 100%;

}

.icon-tools {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("../image/tools-28.png");
  background-repeat: no-repeat;
  margin-top: 10px;
}

.icon-color-gray {
  background-position: -0px -0px;
}

.icon-color-red {
  background-position: -28px -0px;
}

.icon-color-black {
  background-position: -56px -0px;
}

.icon-color-blue {
  background-position: -84px -0px;
}

.icon-color-select {
  background-position: -112px -0px;
}

.icon-eye-black {
  background-position: -140px -0px;
}

.icon-eye-select {
  background-position: -168px -0px;
}

.icon-noeye-black {
  background-position: -196px -0px;
}

.icon-noeye-select {
  background-position: -0px -28px;
}

.icon-grids-black {
  background-position: -28px -28px;
}

.icon-grids-select {
  background-position: -56px -28px;
}

.icon-nogrids-black {
  background-position: -84px -28px;
}

.icon-nogrids-select {
  background-position: -112px -28px;
}

.icon-pen-black {
  background-position: -140px -28px;
}

.icon-pen-select {
  background-position: -168px -28px;
}

.icon-move-black {
  background-position: -196px -28px;
}

.icon-move-select {
  background-position: -0px -56px;
}

.icon-text-black {
  background-position: -28px -56px;
}

.icon-text-select {
  background-position: -56px -56px;
}

.icon-dottedline-arrow-black {
  background-position: -84px -56px;
}

.icon-dottedline-arrow-select {
  background-position: -112px -56px;
}

.icon-line-black {
  background-position: -140px -56px;
}

.icon-line-select {
  background-position: -168px -56px;
}

.icon-dottedline-black {
  background-position: -196px -56px;
}

.icon-dottedline-select {
  background-position: -0px -84px;
}

.icon-arrow-black {
  background-position: -28px -84px;
}

.icon-arrow-select {
  background-position: -56px -84px;
}

.icon-circle-black {
  background-position: -84px -84px;
}

.icon-circle-select {
  background-position: -112px -84px;
}

.icon-ellipse-black {
  background-position: -140px -84px;
}

.icon-ellipse-select {
  background-position: -168px -84px;
}

.icon-square-black {
  background-position: -196px -84px;
}

.icon-square-select {
  background-position: -0px -112px;
}

.icon-rectangle-black {
  background-position: -28px -112px;
}

.icon-rectangle-select {
  background-position: -56px -112px;
}

.icon-rightangle-black {
  background-position: -84px -112px;
}

.icon-rightangle-select {
  background-position: -112px -112px;
}

.icon-equilateral-black {
  background-position: -140px -112px;
}

.icon-equilateral-select {
  background-position: -168px -112px;
}

.icon-isosceles-black {
  background-position: -196px -112px;
}

.icon-isosceles-select {
  background-position: -0px -140px;
}

.icon-isoscelesrighttriangle-black {
  background-position: -28px -140px;
}

.icon-isoscelesrighttriangle-select {
  background-position: -56px -140px;
}

.icon-remove-black {
  background-position: -84px -140px;
}

.icon-remove-select {
  background-position: -112px -140px;
}

.icon-clear-black {
  background-position: -140px -140px;
}

.icon-clear-select {
  background-position: -168px -140px;
}