/* Signature pad */
.nSigPadBox{ padding:2px !important; width:520px; max-width:100%; }
.signature-pad {
    position:relative;
    font-size:10px;
    width:100%; height: 100%;
    max-width:500px; max-height: 280px;
    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:12px 12px 8px 12px;
    margin-top: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; border:1px solid #8a8a8a; border-radius:4px; height:192px; } /* height 2 more than canvas */
.signature-pad--body.empty { background-color:#333; }
.signature-pad--body canvas {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 190px;
    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{ margin-top:8px; }
.signature-pad--actions .column{ padding:0.1em; }
.signature-pad--actions .button{ padding:4px 12px; background-color:#555; font-size:1.2em; }
@media (max-width: 480px) {
    .signature-pad--actions .button{ display:block; width:100%; min-height:2em; }
}