.signature {
   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;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   margin: 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: 200px;
   max-width: 300px;
   border: 2px solid #996;
   border-radius: 4px;
 }

 .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;
   background-color: #ffd;
 }

 .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--actions {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   background-color: #eee;

 }