div.esf { position: relative;}
div.esf input.esf { position: absolute; width: 100%; height: 100%; top:0; left:0;opacity: 0;}
div.esf div.esf-button { cursor: pointer; user-select: none; position: absolute; width: 100%; height: 100%; top:0; left: 0; display: flex; align-items: center; justify-content: center;}
div.esf div.esf-button span.signed { display: none; }
div.esf div.esf-button span.un-signed { display: inline; }
div.esf div.esf-button.signed span.signed { display: inline; }
div.esf div.esf-button.signed span.un-signed { display: none; }

.esf-modal { display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 1000; top:0; left:0;align-items:center;justify-content: center; padding: 20px;}
.esf-modal.shown { display: flex;}
.esf-modal-window { width: 100%; height: 80vh; background: white; border-radius: 15px; display: flex; flex-direction: column;}
.esf-modal-header {
    text-align: center;
    padding: 10px 20px 0;
}
.esf-modal-content { padding: 20px; width: 100%;flex: 1;position: relative;display: flex; justify-content: center;align-items: center;}
.esf-modal-content canvas { top: 0; left: 0; border: 1px solid gray; }
.esf-content-inner { position: relative; width: fit-content; height: fit-content}
.esf-modal-content canvas.text-input-editor {cursor:crosshair}
.esf-modal-tools { position: absolute; right: 20px; bottom: 20px;display: flex; flex-direction: row; justify-content: center; padding: 5px;gap: 5px;}
.esf-modal-tools .esf-tool { cursor: pointer;display: flex; align-items: center;justify-content: center;padding: 10px;border-radius: 50%;width: 45px;height:45px;}
.esf-modal-tools .esf-tool.active { background: gray; color: white;}
.esf-modal-tools .esf-tool.esf-tool-text { font-size: 25px;line-height: 25px; font-weight: bold; position: relative;}
.esf-modal-tools .esf-tool.esf-tool-text input {
    position: absolute; bottom: 50px; display: none;
    -webkit-appearance: none;
    border-radius: 5px;
    outline: none;
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
}
.esf-modal-tools .esf-tool.esf-tool-text.active input { display: block;}
.esf-modal-tools .esf-tool.esf-tool-paint {}
.esf-modal-tools .esf-tool svg {width: 25px; height: 25px;}
.esf-modal-buttons { border-top: 1px solid gray; display: flex; flex-direction: row;}
.esf-modal-buttons button { width: 50%; background: transparent; border: none; cursor: pointer; padding: 10px; font-size: 1.2rem;line-height: 30px;border-radius: 0;}
.esf-modal-buttons button.save { border-right: 1px solid gray; color: dodgerblue}
.esf-modal-buttons button.cancel { color: gray; }
.esf-text-input { border:1px solid black; !important; border-radius: 3px !important;}