.drawingBuffer {
  position: absolute;
  left: 0;
}
#canvas{
  position: relative;
}
.detect-area {
  position: absolute;
  top: 14%;
  bottom: 55%;
  left: 10%;
  right: 10%;
  border: 2px solid #ffffff;
}

.square {
  position: absolute;
  top: 55%;
  bottom:26%;
  left: 10%;
  right: 10%;
  border: 2px solid #000;
  padding:0.5rem!important;
  color:#fff!important;
  font-size:1rem;
  background-color: #000;
  opacity: 0.9;
  height: 70px;
}

.square p {
  font-size: 13px;
  font-family: 'Noto Sans';
}

.triangle {
  top: 55%;
  margin-top: -30px;
  margin-left: 45%;
  position: absolute;
  width: 0px;
  height: 0px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid #000;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  opacity: 0.9;
}

#modal_item4.modal_content {
  background-color:#666 !important;
  height: 100%;
  position: relative;
  padding: 40px 20px 30px;
}

#camera_container {
  display: none;
}

.absolute_transform{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

.absolute_transform img{
  vertical-align: middle;
}