
/* ///////////////////////

Version: 2.4.1
Lastmod: 2026-09-18

/////////////////////// */

.signature-pad {
    display: inline-flex;
    flex-direction: column;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0px 2px;
    margin: 2px 0px 48px 0px;
    position: relative;
    background: gainsboro;
    min-height: 200px; 
    max-height: 100vh; 
    height: auto;
    border-radius: 8px;
}
.signature-pad--header,
.signature-pad--body,
.signature-pad--footer { 
    display: inline-flex;
    position: relative;
    min-width: 100%;
    margin: 2px 0px;
    box-sizing: border-box;
    padding: 4px 0px;
}
.signature-pad--header {
    padding: 12px 2px;
    font-size: 16px;
    color: black;
    justify-content: center;
    margin-bottom: -5px;
    padding-top: 8px;
    text-align: center;
    background: #ededed;
    border-radius: 5px 5px 0px 0px;
    pointer-events: none;
}
.signature-pad--header > b {
    font-weight: 400;
    text-transform: uppercase;
}
.signature-pad--body {
    margin-top: 0px;
    padding-top: 0px;
    background: white;
    border-radius: 0px;
    margin-bottom: 11px;
    overflow: hidden;
    min-height: 165px;
    border-top: 1px dotted gainsboro; 
    border-bottom: 1px dotted gainsboro; 
    box-sizing: border-box;
}
.signature-pad--footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-height: 102px;
    background-color: #ededed;
    border-radius: 0px 0px 5px 5px;
    padding: 11px 0px 6px;
    margin-top: -10px;
}
.signature-pad--footer > button {
    padding: 1px 1px;
    min-width: 32px;
    width: auto;
    font-size: 0px;
    min-height: 32px;
    margin: 1px 7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}
.signature-pad--body > canvas, 
.signature-pad--body img.mySignature {
    display: inline-flex;
    width: auto;
    min-width: 50%;
    min-height: 40vw;
    max-height: 40vw;
    outline: none;
    border: 0px;
    margin: 0px auto;
}
.signature-pad--body img.mySignature {
    min-width: 30%; 
    max-width: 100%; 
    margin-top: auto;
    margin-bottom: auto;
    min-height: 44px;
    max-height: 164px;
}  
@media screen and (min-width: 640px) { 
    .signature-pad--body > canvas, 
    .signature-pad--body img.mySignature {   }
}
.signature-pad--actions {  }
.signature-pad--body > canvas { 
    border-radius: 0px;
    margin: 0px 0px;
    min-width: 100% !important;
    max-width: 100% !important;
    position: absolute;
    top: 0px;
    background-color: white;
    z-index: 1;
    min-height: 164px !important;
    background-size: 128px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23f1f1f1'%3E%3Cpath d='M542.61-464.46q80.31-56.31 126.31-124.08t46-134.46q0-37-13.77-57t-36.77-20q-52.77 0-90.3 79.88-37.54 79.89-37.54 189.12 0 19.39 1.46 35.92 1.46 16.54 4.61 30.62ZM139.62-140v-69.23h69.23V-140h-69.23Zm152.69 0v-69.23h69.23V-140h-69.23ZM445-140v-69.23h69.23V-140H445Zm152.69 0v-69.23h69.23V-140h-69.23Zm152.69 0v-69.23h69.23V-140h-69.23ZM141.77-294.23 100-336l64-64-64-64 41.77-41.77 64 64 64-64L311.54-464l-64 64 64 64-41.77 41.77-64-64-64 64ZM605.31-320q-30 0-54.04-12.85-24.04-12.84-40.5-40-24.23 14-50.35 25.39-26.11 11.38-53.73 22.38l-21.07-56.15q27.23-10.38 52.73-22.27 25.5-11.88 49.11-25.27-5.77-22-8.65-48.58-2.89-26.57-2.89-57.34 0-142.08 53.35-233.69Q582.61-860 664.38-860q48.93 0 79.43 37.35 30.5 37.34 30.5 102.11 0 84.08-56.23 166.73-56.24 82.66-154.39 148.12 8.54 13.15 19.5 19.73t23.96 6.58q29.08 0 64.35-31.85 35.27-31.85 63.65-84.69l53.77 25.15q-6.23 24.31-7.54 48.31-1.3 24 7.16 41.62 11.54-5.77 24.27-16.04t28.27-29.43l47.23 37.08q-26 32.15-54.04 50.69T781.84-320q-19.46 0-34.23-16.35-14.76-16.34-22.69-44.65-26.07 28.85-57.77 44.92Q635.46-320 605.31-320Z'/%3E%3C/svg%3E");
}
.signature-pad--body img.mySignature { 
    background-color: transparent !important;
    position: relative;
    z-index: 2;
}
.signature-pad--body > img.mySignature.hidden, 
.signature-pad--body > canvas.hidden { display:none !important; }
button.button.hidden { display:none !important; } 
button.button.save   { 
    background-color: mediumseagreen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='white' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z'/%3E%3C/svg%3E");
}
button.button.clear  { 
    background-color: indianred;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M597.69-250v-60h140v60h-140Zm0-320v-60h260v60h-260Zm0 160v-60h220v60h-220ZM142.31-640h-40v-60h154.61v-47.69h130.77V-700h154.62v60h-40v347.69q0 30.31-21 51.31-21 21-51.31 21H214.62q-30.31 0-51.31-21-21-21-21-51.31V-640Zm60 0v347.69q0 4.62 3.84 8.46Q210-280 214.62-280H430q4.61 0 8.46-3.85 3.85-3.84 3.85-8.46V-640h-240Zm0 0v360-360Z'/%3E%3C/svg%3E");
} button.button.save, 
button.button.clear { 
    width: 97%; 
    max-width: 180px !important;
    min-width: 120px !important;
    margin: 8px 12px 8px auto;
    height: 64px;
    background-size: 42px;
} 