.signature-pad {
   position: relative;
   display: flex;
   font-size: 10px;
   width: 100%;
   height: 100%;
   min-height: 170px;
   max-height: 460px;
   background-color: #fff;
   border-radius: 4px;
   padding: 0px;
   margin: 10px auto;
}

.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: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 8px;
}

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

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

@media (max-width: 480px) {
   .signature-pad--actions .button {
      display: block;
      width: 100%;
      min-height: 2em;
   }
}

/* Fork me on GitHub ribbon */

#forkongithub {
   position: fixed;
   display: block;
   top: 35px;
   right: -95px;
   z-index: 9999;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
}

#forkongithub a {
   display: block;
   background: #6d6d6d;
   color: #fff;
   text-decoration: none;
   font-family: arial, sans-serif;
   text-align: center;
   font-weight: bold;
   padding: 5px 40px;
   font-size: 14px;
   line-height: 2rem;
   transition: 0.5s;
   width: 300px;
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}

#forkongithub a:hover {
   background: #11c;
}

#forkongithub a::before,
#forkongithub a::after {
   content: '';
   width: 100%;
   display: block;
   position: absolute;
   top: 1px;
   left: 0;
   height: 1px;
   background: #fff;
}

#forkongithub a::after {
   bottom: 1px;
   top: auto;
}