From d30a42238fa7c1ca7bd5f8993cf11280b0324fe7 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Wed, 13 May 2026 22:46:33 +0200
Subject: [PATCH] Add Blazor receiver UI and error page CSS styles

Introduced new CSS files for the Blazor receiver UI, including card layouts, logo styles, and a custom error/404 page with illustrations. Added responsive and modernized styles for buttons, footers, language dropdowns, and signature pad. These changes enhance the UI without affecting legacy MVC CSS.
---
 .../wwwroot/css/card.css                      | 126 ++++
 .../wwwroot/css/error-space.css               | 391 +++++++++++
 .../wwwroot/css/logo.css                      |  37 ++
 .../wwwroot/css/receiver-extras.css           |  88 +++
 .../wwwroot/css/receiver-site.css             | 625 ++++++++++++++++++
 5 files changed, 1267 insertions(+)
 create mode 100644 receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/card.css
 create mode 100644 receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/error-space.css
 create mode 100644 receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/logo.css
 create mode 100644 receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/receiver-extras.css
 create mode 100644 receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/receiver-site.css

diff --git a/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/card.css b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/card.css
new file mode 100644
index 00000000..f5e4df96
--- /dev/null
+++ b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/card.css
@@ -0,0 +1,126 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+
+* {
+	box-sizing: border-box;
+}
+
+.dd-cards-container {
+	font-family: 'Muli', sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+
+}
+
+.dd-card {
+	background-color: #fff;
+	display: flex;
+	max-width: 100%;
+	margin: 0;
+	overflow: hidden;
+	width: 100%;
+}
+
+	.dd-card h6 {
+		opacity: 0.6;
+		margin: 0;
+		letter-spacing: 0.0625rem;
+		font-size: clamp(0.6rem, 1.33vw, 0.8rem);
+	}
+
+	.dd-card h2 {
+		letter-spacing: 0.0625rem;
+		margin: 0;
+		font-size: clamp(1rem, 2.67vw, 1.67rem);
+	}
+
+.uppercase {
+	text-transform: uppercase;
+}
+
+.dd-card-preview {
+	background-color: #2A265F;
+	color: #fff;
+	padding: 0.1rem 1rem 1rem 1rem;
+	margin:0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+	.dd-card-preview a {
+		color: #fff;
+		opacity: 0.6;
+	}
+
+	.dd-card-preview button {
+		border-width: 0;
+		align-items: center;
+		background-color: transparent;
+		color: white;
+		margin: 15% 0 0 0;
+		transition: color 0.25s ease;
+
+	}
+
+		.dd-card-preview button:hover {
+			color: #bebebe;
+		}
+
+		.dd-card-preview span {
+		}
+
+.dd-card-info {
+	padding: clamp(0.55rem, 2vw, .875rem) 0 0 clamp(0.55rem, 2.5vw, 1.7rem);
+	margin: 0;
+	position: relative;
+	width: 100%;
+}
+
+	.dd-card-info p, .dd-card-info a, .dd-card-info small, .dd-card-info span {
+		opacity: 0.65;
+		font-size: clamp(0.55rem, 1.23vw, 0.75rem);
+		margin: clamp(0.55rem, 2vw, .875rem) 0 clamp(0.55rem, 2vw, .875rem) 0;
+		text-decoration: none;
+		padding: 0;
+	}
+
+.app-logo {
+	width: clamp(4rem, 10vw, 5rem);
+	margin: 1rem 0 0 0;
+}
+
+.progress-container {
+	text-align: right;
+	width: 100%;
+	margin: clamp(0.8rem, 2vw, 1rem) 0 0 0;
+}
+
+.progress {
+	background-color: #ddd;
+	border-radius: 0.1875rem;
+	height: clamp(0.25rem, 1vw, 0.3125rem);
+	width: clamp(6rem, 20vw, 10rem);
+	position: relative;
+}
+
+	.progress::after {
+		background-color: #2A265F;
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: clamp(0.25rem, 1vw, 0.3125rem);
+		width: var(--progress-width, 1%);
+		transition: width 1s ease;
+		opacity: 0.85;
+	}
+
+.progress-text {
+	font-size: clamp(0.5rem, 1.5vw, 0.625rem);
+	opacity: 0.6;
+	letter-spacing: clamp(0.05rem, 0.5vw, 0.0625rem);
+	text-align: left;
+}
\ No newline at end of file
diff --git a/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/error-space.css b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/error-space.css
new file mode 100644
index 00000000..9a3391b0
--- /dev/null
+++ b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/error-space.css
@@ -0,0 +1,391 @@
+html,
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0px;
+    background: linear-gradient(90deg, rgba(47, 54, 64, 1) 23%, rgba(24, 27, 32, 1) 100%);
+}
+
+:root {
+    --moon-left-position: 0px;
+}
+
+
+.moon {
+    background: linear-gradient(90deg, rgba(208, 208, 208, 1) 48%, rgba(145, 145, 145, 1) 100%);
+    position: absolute;
+    top: -100px;
+    left: var(--moon-left-position);
+    width: 900px;
+    height: 900px;
+    content: '';
+    border-radius: 100%;
+    box-shadow: 0px 0px 30px -4px rgba(0, 0, 0, 0.5);
+}
+
+.moon__crater {
+    position: absolute;
+    content: '';
+    border-radius: 100%;
+    background: linear-gradient(90deg, rgba(122, 122, 122, 1) 38%, rgba(195, 195, 195, 1) 100%);
+    opacity: 0.6;
+}
+
+.moon__crater1 {
+    top: 250px;
+    left: calc(var(--moon-left-position) + 800px);
+    width: 60px;
+    height: 180px;
+}
+
+.moon__crater2 {
+    top: 650px;
+    left: calc(var(--moon-left-position) + 640px);
+    width: 40px;
+    height: 80px;
+    transform: rotate(55deg);
+}
+
+.moon__crater3 {
+    top: -20px;
+    left: calc(var(--moon-left-position) + 340px);
+    width: 65px;
+    height: 120px;
+    transform: rotate(250deg);
+}
+
+.star {
+    background: grey;
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    content: '';
+    border-radius: 100%;
+    transform: rotate(250deg);
+    opacity: 0.4;
+    animation-name: shimmer;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+@keyframes shimmer {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 0.7;
+    }
+}
+
+.star1 {
+    top: 40%;
+    left: 50%;
+    animation-delay: 1s;
+}
+
+.star2 {
+    top: 60%;
+    left: 90%;
+    animation-delay: 3s;
+}
+
+.star3 {
+    top: 10%;
+    left: 70%;
+    animation-delay: 2s;
+}
+
+.star4 {
+    top: 90%;
+    left: 40%;
+}
+
+.star5 {
+    top: 20%;
+    left: 30%;
+    animation-delay: 0.5s;
+}
+
+.error {
+    position: absolute;
+    left: 100px;
+    top: 400px;
+    transform: translateY(-60%);
+    font-family: 'Montserrat', sans-serif;
+    color: #363e49;
+}
+
+.error__title {
+    font-size: 10em;
+}
+
+.error__subtitle {
+    font-size: 2em;
+}
+
+.error__description {
+    opacity: 0.5;
+}
+
+.error__button  {
+    display: inline-block;
+    margin-top: 3em;
+    margin-right: 0.5em;
+    padding: 0.5em 2em;
+    outline: none;
+    border: 2px solid #2f3640;
+    background-color: transparent;
+    border-radius: 8em;
+    color: #576375;
+    cursor: pointer;
+    transition-duration: 0.2s;
+    font-size: 0.75em;
+    font-family: 'Montserrat', sans-serif;
+    text-decoration: none;
+}
+
+.error__button:hover {
+    color: #21252c;
+}
+
+.error__button--active {
+    background-color: #e67e22;
+    border: 2px solid #e67e22;
+    color: white;
+}
+
+.error__button--active:hover {
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
+    color: white;
+}
+
+.astronaut {
+    position: absolute;
+    width: 185px;
+    height: 300px;
+    left: 70%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(20deg) scale(1.2);
+}
+
+.astronaut__head {
+    background-color: white;
+    position: absolute;
+    top: 60px;
+    left: 60px;
+    width: 60px;
+    height: 60px;
+    content: '';
+    border-radius: 2em;
+}
+
+.astronaut__head-visor-flare1 {
+    background-color: #7f8fa6;
+    position: absolute;
+    top: 28px;
+    left: 40px;
+    width: 10px;
+    height: 10px;
+    content: '';
+    border-radius: 2em;
+    opacity: 0.5;
+}
+
+.astronaut__head-visor-flare2 {
+    background-color: #718093;
+    position: absolute;
+    top: 40px;
+    left: 38px;
+    width: 5px;
+    height: 5px;
+    content: '';
+    border-radius: 2em;
+    opacity: 0.3;
+}
+
+.astronaut__backpack {
+    background-color: #bfbfbf;
+    position: absolute;
+    top: 90px;
+    left: 47px;
+    width: 86px;
+    height: 90px;
+    content: '';
+    border-radius: 8px;
+}
+
+.astronaut__body {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 115px;
+    left: 55px;
+    width: 70px;
+    height: 80px;
+    content: '';
+    border-radius: 8px;
+}
+
+.astronaut__body__chest {
+    background-color: #d9d9d9;
+    position: absolute;
+    top: 140px;
+    left: 68px;
+    width: 45px;
+    height: 25px;
+    content: '';
+    border-radius: 6px;
+}
+
+.astronaut__arm-left1 {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 127px;
+    left: 9px;
+    width: 65px;
+    height: 20px;
+    content: '';
+    border-radius: 8px;
+    transform: rotate(-30deg);
+}
+
+.astronaut__arm-left2 {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 102px;
+    left: 7px;
+    width: 20px;
+    height: 45px;
+    content: '';
+    border-radius: 8px;
+    transform: rotate(-12deg);
+    border-top-left-radius: 8em;
+    border-top-right-radius: 8em;
+}
+
+.astronaut__arm-right1 {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 113px;
+    left: 100px;
+    width: 65px;
+    height: 20px;
+    content: '';
+    border-radius: 8px;
+    transform: rotate(-10deg);
+}
+
+.astronaut__arm-right2 {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 78px;
+    left: 141px;
+    width: 20px;
+    height: 45px;
+    content: '';
+    border-radius: 8px;
+    transform: rotate(-10deg);
+    border-top-left-radius: 8em;
+    border-top-right-radius: 8em;
+}
+
+.astronaut__arm-thumb-left {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 110px;
+    left: 21px;
+    width: 10px;
+    height: 6px;
+    content: '';
+    border-radius: 8em;
+    transform: rotate(-35deg);
+}
+
+.astronaut__arm-thumb-right {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 90px;
+    left: 133px;
+    width: 10px;
+    height: 6px;
+    content: '';
+    border-radius: 8em;
+    transform: rotate(20deg);
+}
+
+.astronaut__wrist-left {
+    background-color: #e67e22;
+    position: absolute;
+    top: 122px;
+    left: 6.5px;
+    width: 21px;
+    height: 4px;
+    content: '';
+    border-radius: 8em;
+    transform: rotate(-15deg);
+}
+
+.astronaut__wrist-right {
+    background-color: #e67e22;
+    position: absolute;
+    top: 98px;
+    left: 141px;
+    width: 21px;
+    height: 4px;
+    content: '';
+    border-radius: 8em;
+    transform: rotate(-10deg);
+}
+
+.astronaut__leg-left {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 188px;
+    left: 50px;
+    width: 23px;
+    height: 75px;
+    content: '';
+    transform: rotate(10deg);
+}
+
+.astronaut__leg-right {
+    background-color: #e6e6e6;
+    position: absolute;
+    top: 188px;
+    left: 108px;
+    width: 23px;
+    height: 75px;
+    content: '';
+    transform: rotate(-10deg);
+}
+
+.astronaut__foot-left {
+    background-color: white;
+    position: absolute;
+    top: 240px;
+    left: 43px;
+    width: 28px;
+    height: 20px;
+    content: '';
+    transform: rotate(10deg);
+    border-radius: 3px;
+    border-top-left-radius: 8em;
+    border-top-right-radius: 8em;
+    border-bottom: 4px solid #e67e22;
+}
+
+.astronaut__foot-right {
+    background-color: white;
+    position: absolute;
+    top: 240px;
+    left: 111px;
+    width: 28px;
+    height: 20px;
+    content: '';
+    transform: rotate(-10deg);
+    border-radius: 3px;
+    border-top-left-radius: 8em;
+    border-top-right-radius: 8em;
+    border-bottom: 4px solid #e67e22;
+}
\ No newline at end of file
diff --git a/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/logo.css b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/logo.css
new file mode 100644
index 00000000..ee066cf2
--- /dev/null
+++ b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/logo.css
@@ -0,0 +1,37 @@
+.dd-locked-logo {
+    width: 13rem;
+    padding-top: 1rem;
+}
+
+.dd-show-logo {
+    width: 9rem;
+    position: absolute;
+    right: 0;
+    margin: 0 2rem 0 0;
+    padding: 0;
+    top:0;
+}
+
+.cursor-locked-logo {
+    width: 9rem;
+    padding-top: 1rem;
+}
+
+.cursor-show-logo {
+    width: 6rem;
+}
+
+@media (max-width: 767px) {
+    .dd-show-logo {
+        width: 5rem;
+        margin-right: 0rem;
+    }
+
+    .cursor-show-logo {
+        width: 3rem;
+    }
+}
+
+.signFlow-logo {
+    width: 9rem;
+}
\ No newline at end of file
diff --git a/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/receiver-extras.css b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/receiver-extras.css
new file mode 100644
index 00000000..a1d230c8
--- /dev/null
+++ b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/receiver-extras.css
@@ -0,0 +1,88 @@
+/* Phase 5–6 additions for the Blazor receiver UI.
+   Lives next to receiver-site.css so the legacy MVC CSS stays untouched
+   and any tweaks specific to the Blazor flow are easy to spot. */
+
+.signature-pad-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.signature-pad-canvas {
+    cursor: crosshair;
+}
+
+.signature-list {
+    margin: 0;
+    padding: 0;
+}
+
+.signature-item {
+    background-color: #fff;
+    transition: background-color 0.2s ease;
+}
+
+.signature-item.bg-success-subtle {
+    background-color: #d1e7dd !important;
+}
+
+/* Receiver-shell wraps every page that uses ReceiverLayout. */
+.receiver-shell {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.receiver-shell > * {
+    flex: 1 0 auto;
+}
+
+.envelope-content {
+    flex-grow: 1;
+}
+
+/* Footer override for Blazor — the legacy CSS uses position:fixed,
+   which collides with the WebAssembly app shell. Keep it sticky but
+   not absolutely positioned so the page content remains scrollable. */
+footer.receiver-footer {
+    background-color: #001F61;
+    color: #fff;
+    font-family: 'Muli';
+    border-radius: 10px 10px 0 0;
+    padding: 0.5rem 1rem;
+    font-size: clamp(0.58rem, 1.5vw, 1rem);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+footer.receiver-footer a {
+    color: #FF7500;
+    text-decoration: none;
+}
+
+footer.receiver-footer .language-switcher {
+    background: transparent;
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0.25rem;
+    padding: 0.15rem 0.5rem;
+}
+
+/* Cookie consent banner (Blazor counterpart of _CookieConsentPartial). */
+.receiver-cookie-banner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1100;
+    background-color: #f8f9fa;
+    border-top: 1px solid #ced4da;
+    padding: 0.75rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
diff --git a/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/receiver-site.css b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/receiver-site.css
new file mode 100644
index 00000000..c989bfdb
--- /dev/null
+++ b/receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web/wwwroot/css/receiver-site.css
@@ -0,0 +1,625 @@
+/*
+    Colors taken from:
+    https://tailwindcss.com/docs/customizing-colors#default-color-palette
+*/
+
+/* Toolbar Buttons */
+
+.navbar-toggler {
+    border: 0;
+}
+
+.material-symbols-outlined {
+    align-content: center;
+}
+
+.btn-group {
+    margin-right: 10vw;
+    margin-bottom: 10vh;
+}
+
+.btn_refresh, .btn_reject, .btn_complete {
+    height:2.5rem;
+}
+
+    .btn_complete .icon, .btn_reject .icon, .btn_refresh .icon {
+        width: 1.1rem;
+    }
+
+    .btn_complete span, .btn_reject span, .btn_refresh span {
+        vertical-align: middle;
+    }
+
+.button-finish {
+    color: #fff;
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+}
+
+    .button-finish:hover {
+        color: #fff;
+        background-color: #0b5ed7;
+        border-color: #0a58ca;
+    }
+
+    .button-finish:focus {
+        box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
+    }
+
+    .button-finish:active {
+        color: #fff;
+        background-color: #0a58ca;
+        border-color: #0a53be;
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    }
+
+    .button-finish:disabled {
+        color: #fff;
+        background-color: #0d6efd;
+        border-color: #0d6efd;
+    }
+
+.button-reject {
+    color: #fff;
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
+
+    .button-reject:hover {
+        color: #fff;
+        background-color: #bb2d3b;
+        border-color: #b02a37;
+    }
+
+    .button-reject:focus {
+        box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
+    }
+
+    .button-reject:active {
+        color: #fff;
+        background-color: #b02a37;
+        border-color: #a52834;
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    }
+
+    .button-reject:disabled {
+        color: #fff;
+        background-color: #dc3545;
+        border-color: #dc3545;
+    }
+
+.button-reset {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d;
+}
+
+    .button-reset:hover {
+        color: #fff;
+        background-color: #5c636a;
+        border-color: #565e64;
+    }
+
+    .button-reset:focus {
+        box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+    }
+
+    .button-reset:active {
+        color: #fff;
+        background-color: #565e64;
+        border-color: #51585e;
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    }
+
+    .button-reset:disabled {
+        color: #fff;
+        background-color: #6c757d;
+        border-color: #6c757d;
+    }
+
+body {
+    background: #f8fcfc;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    margin: 0;
+}
+
+main {
+    display:flex;
+    margin: 0 0 0.5vh 0;
+}
+
+.home-description {
+    text-align: justify;
+    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
+    font-weight: 500;
+    font-size: .95em;
+    letter-spacing: -1px;
+    word-spacing: -2px;
+}
+
+.envelope-view {
+    display: flex; /* d-flex */
+    flex-direction: column; /* flex-column */
+    width: 100vw;
+    height: 95.9vh;
+}
+
+#app {
+    background: gray;
+    width: 100vw;
+    height: 100%;
+    flex-grow: 1;
+    border-width: 0;
+}
+
+footer {
+    height: 4vh;
+    min-height: 1.5rem;
+    background-color: #001F61;
+    border-radius: 10px 10px 0 0;
+    color: #fff;
+    font-family: 'Muli';
+    padding: 0.5vh 0;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 998;
+    border-width: 0;
+    font-size: clamp(0.58rem, 1.5vw, 1rem);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+}
+
+    footer * {
+        margin-left: clamp(0.5rem, 2vw, 1rem);
+    }
+
+    footer a {
+        color: #FF7500;
+        text-decoration: none;
+    }
+
+    footer .dropdown-toggle, footer .flag-dropdown, footer li {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+    }
+
+    footer .dropdown-menu a {
+        padding: 0.25rem 1rem 0.25rem 1rem;
+        margin-left: 0;
+        user-select: none;
+    }
+
+.page {
+    margin-top: 3rem;
+    background: white;
+    border-radius: 0.313rem;
+    box-shadow: rgba(9, 30, 66, 0.25) 0rem 0.25rem 0.5rem -0.125rem, rgba(9, 30, 66, 0.08) 0rem 0rem 0rem 0.063rem;
+    max-width: 40rem;
+}
+
+    .page section {
+        max-width: 30rem;
+        margin: 0 auto;
+    }
+
+    .page header .icon {
+        display: inline-block;
+        border-radius: 6.25rem;
+        padding: 0.938rem;
+        margin-bottom: 2rem;
+    }
+
+        .page header .icon.admin {
+            background-color: #331904;
+            color: #fecba1;
+        }
+
+        .page header .icon.locked {
+            background-color: #ffa407;
+            color: #000;
+        }
+
+            .page header .icon.locked.tfa {
+                background-color: #ff7207;
+                color: #000;
+            }
+
+        .page header .icon.signed {
+            background-color: #146c43;
+            color: #fff;
+        }
+
+        .page header .icon.rejected {
+            background-color: #e4d8d5;
+            color: #fff;
+        }
+
+        .page header .icon.expired {
+            background-color: rgba(228, 216, 213, 0.5);
+            color: #fff;
+        }
+
+    .page .form {
+        max-width: 30rem;
+        margin: 2rem auto;
+        display: flex;
+        gap: 1rem;
+    }
+
+#form-access-code > .input,
+#form-admin-password > .input {
+    flex-grow: 1;
+}
+
+#page-admin header .icon {
+    background-color: #331904;
+    color: #fecba1;
+}
+
+
+.envelope {
+    display: block;
+    border: 0.063rem solid #eee;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+}
+
+footer#page-footer {
+    color: #333;
+    max-width: 40rem;
+    margin-top: 1rem;
+    font-size: 0.85rem;
+}
+
+    footer#page-footer a,
+    footer#page-footer a:link,
+    footer#page-footer a:hover,
+    footer#page-footer a:visited,
+    footer#page-footer a:focus {
+        color: #444;
+    }
+
+.sender-card {
+    background-color: transparent;
+    border: none;
+}
+
+    .sender-card .row {
+        height: 7vh;
+    }
+
+    .sender-card img {
+        height: 7vh;
+        background-color: rgb(209, 207, 207);
+        border-radius: 3.125rem;
+    }
+
+.navbar .container {
+    display: flex;
+    padding: 0;
+    margin: 0;
+}
+
+.navbar-toggler {
+    padding: 0;
+    margin: 0;
+    width: 4rem;
+    left: 0;
+}
+
+.envelope-message {
+    position: absolute;
+    display: flex;
+    width: calc(100% - 8rem);
+    align-items: center;
+    justify-content: start;
+    margin-left: 4rem;
+}
+
+.envelope-message .icon {
+    margin-right: 0.5rem;
+}
+
+.envelope-message .message {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    font-weight: 550;
+}
+
+.logo {
+    width: 9rem;
+    position: absolute;
+    right: 0;
+    margin-right:2rem;
+}
+
+.none-display {
+    display: none
+}
+
+.dropdown-flag img, .img-flag {
+    width: 30%;
+    height: 70%;
+}
+
+.dropdown-flag {
+    height: 75%;
+    width: 75%;
+}
+
+/* CSS for custom class to increase dropdown height */
+.increase-dropdown-height {
+    min-height: 25rem; /* Optional, larger value for increased height */
+}
+
+
+/* Adjusting select2 width to fit within a specific form size */
+.dropdown-flag .select2-container {
+    width: 100% !important; /* Makes the container full width */
+    max-width: 11.25rem; /* Suitable maximum width for the form */
+}
+
+.lang-item {
+    font-size: 0.85rem;
+}
+
+#langDropdownMenuButton {
+    min-width: 4vw;
+}
+
+.highlight {
+    font-weight: 700;
+    font-size: 0.85rem;
+}
+
+.signature-process-title, .signature-process-name {
+    font-size: 1.125rem;
+}
+
+
+.mail-link {
+    color: black;
+    text-decoration: none;
+}
+
+.mail-link:hover {
+    text-decoration: underline;
+}
+
+#flex-action-panel {
+    z-index: 1050;
+}
+
+#form-access-code {
+    justify-content: space-evenly;
+}
+
+.access-code-form-floating {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+}
+
+    .access-code-form-floating button {
+        align-content: center;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        margin:0;
+        height: 100%;
+    }
+
+    .access-code-form-floating input {
+        align-content: center;
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        border-right-width: 0;
+        width: 7rem;
+    }
+
+#access-code-error-message {
+    justify-content: center;
+    align-content: center;
+    margin: 1.5rem 7rem 0 7rem;
+    height: 2.5rem;
+}
+
+#sms-timer {
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    font-family: 'Arial', sans-serif;
+    font-weight: bold;
+    color: #ffffff;
+    background-color: #007bff;
+    margin: 0 0 0 2rem;
+    border-radius: 8px;
+    text-align: center;
+}
+
+    #sms-timer:hover {
+        background-color: #0056b3;
+        cursor: pointer;
+    }
+
+.form-check.tfa-sms {
+    margin-left: 2rem;
+}
+
+    .form-check.tfa-sms .form-check-label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        margin-left: -.1rem;
+    }
+
+/*.flag-dropdown button {
+    height: 100%;
+}*/
+
+.header-1 {
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0;
+    padding-top: 0;
+}
+
+.header-1 .text {
+    text-align: center;
+    margin-left: 1.5vw;
+        margin-top:0;
+    padding-top: 0;
+}
+
+.no-receiver-explanation {
+    padding: 2.5rem;
+}
+
+.ajs-message.ajs-custom {
+    margin: 0rem 0rem 0rem 0rem;
+    padding: 0rem 0rem 0rem 0rem;
+    width:50rem;
+}
+
+    .ajs-message.ajs-custom .alert {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .ajs-message.ajs-custom span {
+        margin: 0 1rem 0 0;
+    }
+
+    .ajs-message.ajs-custom p {
+        margin: 0;
+        padding: 0;
+    }
+
+/* styles for mobile responsiveness */
+@media (max-height: 850px) {
+    .navbar .container {
+        display: flex;
+        padding: 0;
+        margin: 0;
+    }
+
+    .navbar-toggler {
+        padding: 0;
+        margin: 0;
+        width: 4rem;
+        left: 0;
+    }
+
+    .envelope-message {
+        width: calc(100% - 4rem -9rem);
+    }
+
+        .envelope-message .message {
+            font-size: 14px;
+            font-weight: 550;
+        }
+
+    .logo {
+        width: 9rem;
+        position: absolute;
+        right: 0;
+    }
+
+    .card-text, .card-text {
+        font-size: 0.6rem; /* Font size reduced */
+        margin: 0rem;
+        padding: 0rem;
+    }
+
+    .highlight {
+        font-weight: 700;
+        font-size: 0.5rem;
+    }
+
+    .signature-process-title, .signature-process-name {
+        font-size: 0.7rem;
+    }
+}
+
+@media (max-width: 767px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .navbar-brand {
+        font-size: 0.5rem;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .envelope-message {
+        width: calc(100% - 4rem - 4.5rem);
+        margin-left: 3rem;
+    }
+
+        .envelope-message .message {
+            font-size: 12px;
+            font-weight: 550;
+        }
+
+        .envelope-message .icon {
+            margin-right: 0.1rem;
+            font-size: 1rem
+        }
+
+    .logo {
+        width: 5rem;
+        right: 0;
+        margin-right: 1rem;
+    }
+
+    .btn_group {
+        position: fixed;
+        flex-direction: row;
+        bottom: 0.5rem;
+        right: 0.5rem;
+    }
+
+    .img-fluid {
+        width: 1.2rem;
+        height: 100%;
+        display: none;
+    }
+
+    .page {
+        margin-top: 1rem;
+        max-width: 90%;
+        padding: 0.5rem;
+    }
+
+        .page section {
+            max-width: 90%;
+        }
+
+    #form-access-code {
+        margin-left: 0;
+    }
+}
+
+@media (max-width: 1024px) {
+    #flex-action-panel, .btn-desktop {
+        display: none;
+    }
+}
+
+@media (max-height: 600px) {
+    .collapse {
+        height: 4rem;
+    }
+}
+
+#tfaRegStep .tfaQrCode {
+    width: 7rem;
+}
\ No newline at end of file