<head>

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<!-- using Trumbowyg 2.19.1 because versions after this have a change to wrap the cursor in <p> when empty (03fb78b), which adds unwanted initial padding to the element -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.19.1/trumbowyg.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.19.1/plugins/colors/trumbowyg.colors.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.19.1/plugins/fontfamily/trumbowyg.fontfamily.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.19.1/plugins/fontsize/trumbowyg.fontsize.min.js"></script>

<script src="https://simonrob.github.io/ocsa/functions.min.js"></script>

<style>

body {

font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;

-webkit-font-smoothing: antialiased;

padding: 0 24px 16px 24px;

color: #252423;

}

#saveSignature, #addSignature {

align-items: flex-start;

background-color: rgb(0, 120, 212);

border-radius: 4px;

border-style: solid;

border-width: 0px;

color: rgb(255, 255, 255);

cursor: pointer;

font-size: 14px;

font-weight: 600;

height: 32px;

margin: 0 30px 22px 0;

padding: 0 10px 0 10px;

user-select: none;

position: fixed;

bottom: 0;

right: 0;

}

#messageBox {

color: #fff;

white-space: pre;

background-color: rgb(128, 128, 128);

border-radius: 4px 4px 0 0;

height: 28px;

margin: 0 0 0 30px;

padding: 10px 16px 0 16px;

position: fixed;

bottom: 0;

left: 0;

}

#saveSignature:hover, #addSignature:hover {

background-color: rgb(0, 108, 192);

}

#saveSignature>span, #addSignature>span {

align-items: center;

display: flex;

flex-wrap: nowrap;

height: 14px;

margin: 0;

padding: 0 0 2px 0;

}

.trumbowyg-box {

margin: 0 !important;

}

.trumbowyg-editor[contenteditable=true]:empty::before{

content: attr(placeholder);

white-space: pre-wrap;

color: #999;

}

.trumbowyg-dropdown-foreColor, .trumbowyg-dropdown-backColor {

max-width: 252px !important;

}

</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.19.1/ui/trumbowyg.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.19.1/plugins/colors/ui/trumbowyg.colors.min.css" />

</head>

<body>

<textarea id="signatureText" style="display:none" placeholder="To get started, type or paste your signature here, then press ‘Save Signature’

Visit the add-in’s Settings page to edit the saved signature."></textarea>

<span id="messageBox" style="display:none"></span>

<button id="saveSignature" style="display:none"><span>Save Signature</span></button>

</body>