.signature-pad-wrapper {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 height: 60vh;
 width: 100%;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 margin: 0;
 padding: 15px 0;
}

.signature-pad {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 font-size: 10px;
 width: 100%;
 height: 100%;
 max-width: 700px;
 max-height: 400px;
 border: 1px solid #e8e8e8;
 background-color: #fff;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
 border-radius: 4px;
 padding: 15px;
}

.signature-pad::before,
.signature-pad::after {
 position: absolute;
 z-index: -1;
 content: '';
 width: 40%;
 height: 10px;
 bottom: 10px;
 background: transparent;
 box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
 left: 20px;
 -webkit-transform: skew(-3deg) rotate(-3deg);
 transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
 right: 20px;
 -webkit-transform: skew(3deg) rotate(3deg);
 transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
 position: relative;
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 border: 1px solid #f4f4f4;
 border-radius: 4px;
}

.signature-pad--body.empty {
 background-color: #333;
}

.signature-pad--body canvas {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 border-radius: 4px;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
 color: #c3c3c3;
 text-align: center;
 font-size: 1.2em;
 margin-top: 8px;
}

.signature-pad--actions {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 margin-top: 8px;
}

.signature-pad--actions .column {
 padding: 0.1em;
}

.signature-pad--actions .button {
 margin: 0.2em;
}

@media (max-width: 480px) {
 .signature-pad--actions {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
 }

 .signature-pad--actions .button {
  display: block;
  width: 100%;
  min-height: 2em;
 }
}