#mattingHead-container{
  text-align: center;
}
#pictureFrame{
  position: relative;
  border: 2px solid #2B2D31;
  margin: auto;
  box-sizing: border-box;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  bottom: 10px;
}
#dashFrame{
  border:2px dashed #2B2D31;
  margin: 20px;
  padding:65px 0px;
}
#imgCanvas{
  position: absolute;
  display: none;
}
#imgCanvas:hover{
  cursor: grab;
}
#picInputButton{
  color:white;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #0080FF;
}
#picInputButton:hover{
  cursor: pointer;
  background-color: #80EAFF
}
#toolKit{
  display: none;
  max-width: 700px;
  margin: auto;
  text-align: left;
}
#scaleRange{
  position: relative;
  display: inline-block;
  background-color: #CCF7FF;
  border:1px solid #4DC3FF;
  width:150px;
  height:5px;
  border-radius: 5px;
  top:-1px;

}
#scalePointer{
  cursor: pointer;
  position: absolute;
  display: inline-block;
  background-color: #0080FF;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top:-3px;
  left:50px;
}
#scalePrecentage{
  text-decoration: underline;
}
#cropPackage,#eraserPackage,#scaleRangePackage{
  position: relative;
  display: inline-block;
}
#mouseButton,#eraser,#undoButton,#resetButton{
  position: relative;
  margin-left: 5px;
  background-color:#000;
  z-index: 2;
  border-radius: 5px;
  background: #4E5058;
  text-align: center;
  margin: 5px;
  padding: 10px 25px;
}
a{
  color:white;
}
#toolKit a:hover{
  cursor: pointer;
  color:#fff;
  background-color: #333;
}
.stateActiveForBtn{
  border:2px dashed #fff;
  color:#FF66FF;
  background:#000;
}
#cropFrame{
  display: none;
  position: absolute;
  border:2px solid #1E1F22;
  width:0px;
  height:0px;
}
#cropFrame:hover{
  cursor: grab;
  border: 0px dashed red;
}
#cropTools{
  position: absolute;
  height:0;
  overflow-y: hidden;
  left:8px;
  top:25px;
  margin-top:-4px;
  transition: 0.2s;
  z-index: 1;
}

#eraserTools{


  overflow-y: hidden;
  left:8px;
  top:25px;
  margin-top:-4px;
  transition: 0.2s;
  z-index: 1;
}

.cropButton,.eraserControls{
  text-align: center;
  border-top: none;
  opacity: 0.3;
  line-height: 1;
}
.eraserControls{
  color: #D9EB9F;
  padding: 0 10px;
}
.eraserActive{
  opacity: 1;
}
.cropButton:hover,.eraserControls:hover{
  cursor: pointer;
  opacity: 1;
}

#eraserPointer{
  display: none;
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: #000;
  top:50%;
  left:50%
}

#scaleRangePackage{
  margin-top: 50px;
}

#nav a:hover{
  cursor: pointer;
  color:#fff;
}

#nav{ margin-top: -30px; margin-bottom: 30px}


#box{
  position: relative;
  margin-left: 5px;
  background-color:#000;
  z-index: 2;
  border-radius: 5px;
  text-align: center;
}

.idtem span{
  color: #F0B132;
  display: block;
}

#crop{ border:2px dashed #4E5058; margin:0 10px;}
#crop a{ display: inline-block; padding:10px; text-decoration:none}


#uploadImgButton em{
  width: 150px; height: 150px; border: 2px dashed #fff; background: #2B2D31;border-radius: 10px;display: inline-block;text-align: center;vertical-align: center;font-style: normal;margin: 15px 10px;color: #B3B8BF;cursor: pointer; padding-top: 10px;
}
#uploadImgButton em .upfile{
  margin-left: -20px; border: 1px solid red;
}