Fix displayed identical fonts in sign PDF (#2751)

# Description of Changes

### Changes:
- Add a new custom select to display fonts correctly and to allow more
styling flexibility in Sign PDF feature by hiding the original
`<select>` element (`display: none;`) and wrap it with a `<div>` and
then create a custom selection menu using `<div>`s and CSS to achieve
the required results due to the limitations of `<select>` and `<option>`
while still preserving the hidden `<select>` for form submission.

### Why was the change made?
1. A bug that caused font families to not be displayed in Firefox.
2. Select/Option element are not flexible when it comes to styling
(compared to DIVs for example) but bullet point `1.` is of higher
priority.

### UI Changes:
- Dark Mode:
   - Before:

![image](https://github.com/user-attachments/assets/37f79c81-8155-4430-9e36-2b4cc2a442e6)

   - After:

![image](https://github.com/user-attachments/assets/e6a2b209-0d8f-4ff2-94ea-54827706d0cd)

- Light Mode:
   - Before:

![image](https://github.com/user-attachments/assets/c5356899-6be9-497b-8ad9-d50e6bd077d5)

   - After: 

![image](https://github.com/user-attachments/assets/29373b1a-cfa1-48a2-9040-3ed2fd5f7fd3)

Note:
- Changes in `sign.js` are between the lines 95-228, as it seems the
file was auto-formatted affecting whitespaces and
single_quotes/double_quotes.


#### Useful quotes from MDN:

> [Styling with
CSS](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css)
Styling the <option> element is highly limited. Options don't inherit
the font set on the parent. In Firefox, only
[color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) and
[background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
can be set, however in Chrome and Safari it's not possible to set any
properties. You can find more details about styling in [our guide to
advanced form
styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling).

#### Useful references:
- [Option
Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css)
- [Select
Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
- [Advanced Form
Styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling)

Closes #1575

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

src/main/resources/static/css/sign.css

@@ -32,15 +32,14 @@ select#font-select option {
   margin-left: -2.2rem;
 }
 
-.draggable-buttons-box>button {
+.draggable-buttons-box > button {
   z-index: 4;
   background-color: rgba(13, 110, 253, 0.1);
   flex: 1 1 auto;
   min-width: 2.5rem;
   max-width: 4rem;
 }
 
-
 .rotation-handle {
   width: 20px;
   height: 20px;
@@ -163,3 +162,76 @@ select#font-select option {
 .small-file-container-saved:hover .drag-icon {
   display: flex;
 }
+
+/* The container must be positioned relative: */
+.custom-select {
+  position: relative;
+  font-family: inherit;
+}
+
+.custom-select select {
+  display: none; /*hide original SELECT element: */
+}
+
+.select-selected {
+  background-color: inherit;
+  line-height: 30px;
+  font-size: 30px;
+  border-radius: 3rem !important;
+}
+
+/* Style the arrow inside the select element: */
+.select-selected:after {
+  position: absolute;
+  content: "";
+  top: 50%;
+  right: 10px;
+  translate: 0 -50%;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-color: #fff transparent transparent transparent;
+}
+
+/* Point the arrow upwards when the select box is open (active): */
+.select-selected.select-arrow-active:after {
+  border-color: transparent transparent #fff transparent;
+  translate: 0 -75%;
+}
+
+/* style the items (options), including the selected item: */
+.select-items div,
+.select-selected {
+  color: inherit;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.select-items div {
+  border: 1px solid transparent;
+  border-color: transparent transparent transparent transparent;
+
+  line-height: 30px;
+  font-size: 30px;
+}
+
+/* Style items (options): */
+.select-items {
+  position: absolute;
+  background-color: inherit;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 101;
+  border: inherit;
+}
+
+/* Hide the items when the select box is closed: */
+.select-hide {
+  display: none;
+}
+
+.select-items div:hover,
+.same-as-selected {
+  background-color: rgba(54, 54, 54, 0.1);
+}