.user-signature {
  background-color: #fff;
  text-align: center;
}
.draw-container {
  position: relative;
}
#user_sign .draw-container {
  width: 50%;
}
.draw-container .draw-clear,
.draw-container .draw-caption {
  position: absolute;
  padding: 5px;
}

.draw-container .draw-caption {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: #afafaf;
  border-top: 1px solid #afafaf;
}

.draw-container .draw-clear {
  top: 2px;
  right: 2px;
  color: #40a1e9;
}

.kbw-signature {
  height: 200px;
  border: 1px solid #e0e0e0;
}
.kbw-signature canvas {
  max-width: 100%;
}
.draw-container img {
  max-width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .draw-container img {
    height: 200px;
  }
}
@media (max-width: 768px) {
  .draw-container {
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 568px) {
  .kbw-signature {
    width: 100%;
    height: 200px;
  }
}