.signature-label{
    background-color:  #ffffFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin-bottom: 9px;
    font-size: 1.3em;
    display: inline-block;

    color: #0050E2;
    font-weight: bold;
}

.signature-label-comment {
    font-style: italic;
    font-size: 1em;
    float: right;
    margin-right: 50px;
    color: #0050E2;
}
.signature-label-text {
    font-style: italic;
    font-size: 1em;
    text-align: right;
    /*float: right;*/
    margin-right: 50px;
    color: #0050E2;
}

/* Clear button specific styling */
#clear-button {
    background-color: #429AFF; /* blue */
    color: black;
    margin-top: 10px;
    margin-right: 25px;
    width: 160px;
    height: 45px;
    font-size: 14px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.signature-image {
    border: 1.2px solid #0050E2;
    border-radius: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#clear-button:hover {
    background-color: #2ee009; /* Darker green */
}

/* Save button specific styling */
#save-button {
    background-color: #b81886;
    width: 160px;
    height: 45px;
    color: white;
    margin-top: 10px;
    margin-right: 25px;
    font-size: 14px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#save-button:hover {
    background-color: #2ee009; /* Darker green */
}

.signature-controls button {
    display: inline-block;
    margin: 5px; /* Space between buttons */
}

.signature-box {
    width: 100%;
    max-width: 520px;
    border: 1px solid #0050E2;
    border-radius: 6px;
    background: #fff;
}

/* Put the caption on its own line so the canvas sits immediately beneath it */
.signature-caption {
    display: block;
    margin: 6px 0 8px;
    font-weight: 600;
}

/* Remove any accidental horizontal offsets and let the group use full width */
.signature-group {
    margin: 0;
    padding: 0;
}

/* Full-width, flush-left signature canvas with a sensible height */
#signature-pad.signature-canvas {
    display: block;
    width: 100%;
    height: 220px;           /* adjust to taste */
    border: 1px solid #cfd3d7;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
}

/* If a saved signature image is shown, make it responsive and tidy */
.signature-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 150px;           /* matches your old intent; change if needed */
    object-fit: contain;     /* keeps proportions inside the box */
    border: 1px solid #cfd3d7;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

.signature-label-text {
    margin-top: 6px;
    font-size: 0.9rem;
    color: #555;
}

.signature-controls {
    margin-top: 10px;
    justify-content: right;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-right: 15px;
    text-align: right; /* Center buttons */
}


.signature-button:hover { background: #eef2f6; }

/* If your fieldset adds inner padding, the canvas aligns with that by default */

/* The shared wrapper defines the left edge for everything inside */
.signature-block {
    /* no special padding/margins here; inherits the fieldset’s left padding */
}

.signature-block .heading_label {
    display: block;
    margin-bottom: 6px;
}

.signature-block .signature-caption {
    display: block;
    margin: 6px 0 8px;
    font-weight: 600;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
}

.signature-block .signature-group {
    margin: 0;
    padding: 0;
}

.signature-block #signature-pad.signature-canvas, .signature-block .signature-image {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
    border: 2px solid rgba(184, 24, 134, 0.8);
}

.signature-block #signature-pad.signature-canvas { height: 220px; }
.signature-block .signature-image { height: 150px; object-fit: contain; }

.signature-block .signature-label-text { margin-top: 6px; font-size: 0.9rem; color: #555; }
.signature-block .signature-controls { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }


/* Caption sits on its own line and aligns with the heading */
.signature-caption { display:block; margin:6px 0 8px; font-weight:600; }

/* Make canvas/image align to the same left as the heading and fill the container width */
.signature-canvas,
.signature-image {
    display:block;
    width:100%;
    box-sizing:border-box;
    border:1px solid #cfd3d7;
    border-radius:4px;
    background:#fff;
}
.signature-canvas { height:220px; }
.signature-image  { height:150px; object-fit:contain; }

/* In case any wrapper adds indentation, neutralize it for the top-aligned elements */
.signature-block .signature-caption,
.signature-block .signature-canvas,
.signature-block .signature-image {
    margin-left:0 !important;
    padding-left:0 !important;
    text-align:left;
}

/* Alignment overrides (ensure all three left edges match the heading) */
.signature-block #lbl_comments {         /* the “Customer to sign here” label */
    display: block;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
}

.signature-block #signature-pad {        /* the canvas itself */
    margin-left: 0 !important;
    width: 100% !important;                /* fill the same content width as heading */
    box-sizing: border-box;
}

/* Optional: if .questionWrapper adds an indent, neutralize it only here */
.signature-block .questionWrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Ensure the caption behaves like a full-width block and shares the same left edge */
#lbl_signature_caption {
    display: block !important;   /* override global label { display:inline-block } */
    margin: 6px 0 8px !important;
    /*margin-left: 0 !important;*/
    padding-left: 0 !important;
    text-align: left !important;
    clear: both;                 /* sit under any floats above */
}

/* Keep canvas aligned and full-width under the caption */
#signature-pad {
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* If any wrapper adds indentation, neutralize only inside this block */
.signature-block .questionWrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
}