.xbl-fr-handwritten-signature {
  box-sizing: border-box;
}
.xbl-fr-handwritten-signature .fr-handwritten-signature-canvas-container,
.xbl-fr-handwritten-signature.xforms-readonly .xforms-output {
  position: relative;
  padding-bottom: 56.25%;
}
.xbl-fr-handwritten-signature .fr-handwritten-signature-canvas-container {
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  border-color: var(--fr-min-gray-decoration);
  border-radius: 4px;
  box-shadow: none;
}
.xbl-fr-handwritten-signature canvas,
.xbl-fr-handwritten-signature.xforms-readonly .xforms-output img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.xbl-fr-handwritten-signature .fr-handwritten-signature-canvas-container.xforms-readonly,
.xbl-fr-handwritten-signature .xforms-output.xforms-mediatype-image img {
  background-color: #eee;
}
.xbl-fr-handwritten-signature canvas {
  display: block;
  box-sizing: border-box;
  cursor: crosshair;
}
.xbl-fr-handwritten-signature .fr-handwritten-signature-clear {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
}
.xbl-fr-handwritten-signature .fr-handwritten-signature-clear a {
  padding: 3px 3px;
  display: block;
  text-decoration: none;
  color: black;
  opacity: .8;
}
.xbl-fr-handwritten-signature > .xforms-output.xforms-readonly.xforms-static {
  width: 100%;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  border-color: var(--fr-min-gray-decoration);
  border-radius: 4px;
  box-shadow: none;
  padding-bottom: 56.25%;
  position: relative;
  background-color: #f2f2f2;
}
.xbl-fr-handwritten-signature > .xforms-output.xforms-readonly.xforms-static.xforms-empty img {
  display: none;
}