Merge pull request #102 from defencedigital/postgres-migration

Postgres migration

48 files changed, 441 insertions, 1931 deletions

diff --git a/conf/settings/base.py b/conf/settings/base.py
index fb9b658..5f7301c 100644
--- a/conf/settings/base.py
+++ b/conf/settings/base.py
@@ -51,6 +51,7 @@ INSTALLED_APPS = [
     "django.contrib.messages",
     "django.contrib.staticfiles",
     "django_htmx",
+    "widget_tweaks",
     # "debug_toolbar",
 ]
 
@@ -79,6 +80,7 @@ ROOT_URLCONF = "ded.urls"
 # new auth user
 AUTH_USER_MODEL = "myuser.TeamUser"
 
+LOGIN_REDIRECT_URL = "/"
 
 TEMPLATES = [
     {
diff --git a/core/static/css/output.css b/core/static/css/output.css
index e25155d..0a5c4ee 100644
--- a/core/static/css/output.css
+++ b/core/static/css/output.css
@@ -825,36 +825,6 @@ html {
   }
 }
 
-.alert {
-  display: grid;
-  width: 100%;
-  grid-auto-flow: row;
-  align-content: flex-start;
-  align-items: center;
-  justify-items: center;
-  gap: 1rem;
-  text-align: center;
-  border-radius: var(--rounded-box, 1rem);
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
-  padding: 1rem;
-  --tw-text-opacity: 1;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
-  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
-  background-color: var(--alert-bg);
-}
-
-@media (min-width: 640px) {
-  .alert {
-    grid-auto-flow: column;
-    grid-template-columns: auto minmax(auto,1fr);
-    justify-items: start;
-    text-align: start;
-  }
-}
-
 .avatar.placeholder > div {
   display: flex;
   align-items: center;
@@ -898,19 +868,6 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
-  .menu li > *:not(ul, .menu-title, details, .btn):active,
-.menu li > *:not(ul, .menu-title, details, .btn).active,
-.menu li > details > summary:active {
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-    --tw-text-opacity: 1;
-    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
-  }
-
-  .tab:hover {
-    --tw-text-opacity: 1;
-  }
-
   .table tr.hover:hover,
   .table tr.hover:nth-child(even):hover {
     --tw-bg-opacity: 1;
@@ -918,281 +875,6 @@ html {
   }
 }
 
-.btn {
-  display: inline-flex;
-  height: 3rem;
-  min-height: 3rem;
-  flex-shrink: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--rounded-btn, 0.5rem);
-  border-color: transparent;
-  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
-  text-align: center;
-  font-size: 0.875rem;
-  line-height: 1em;
-  gap: 0.5rem;
-  font-weight: 600;
-  text-decoration-line: none;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  border-width: var(--border-btn, 1px);
-  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
-  --tw-text-opacity: 1;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
-  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
-  --tw-bg-opacity: 1;
-  --tw-border-opacity: 1;
-}
-
-.btn-disabled,
-  .btn[disabled],
-  .btn:disabled {
-  pointer-events: none;
-}
-
-:where(.btn:is(input[type="checkbox"])),
-:where(.btn:is(input[type="radio"])) {
-  width: auto;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-
-.btn:is(input[type="checkbox"]):after,
-.btn:is(input[type="radio"]):after {
-  --tw-content: attr(aria-label);
-  content: var(--tw-content);
-}
-
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--rounded-box, 1rem);
-}
-
-.card:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.card-body {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  padding: var(--padding-card, 2rem);
-  gap: 0.5rem;
-}
-
-.card-body :where(p) {
-  flex-grow: 1;
-}
-
-.card figure {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.card.image-full {
-  display: grid;
-}
-
-.card.image-full:before {
-  position: relative;
-  content: "";
-  z-index: 10;
-  border-radius: var(--rounded-box, 1rem);
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-  opacity: 0.75;
-}
-
-.card.image-full:before,
-    .card.image-full > * {
-  grid-column-start: 1;
-  grid-row-start: 1;
-}
-
-.card.image-full > figure img {
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-
-.card.image-full > .card-body {
-  position: relative;
-  z-index: 20;
-  --tw-text-opacity: 1;
-  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
-}
-
-.checkbox {
-  flex-shrink: 0;
-  --chkbg: var(--fallback-bc,oklch(var(--bc)/1));
-  --chkfg: var(--fallback-b1,oklch(var(--b1)/1));
-  height: 1.5rem;
-  width: 1.5rem;
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border-radius: var(--rounded-btn, 0.5rem);
-  border-width: 1px;
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 0.2;
-}
-
-.collapse:not(td):not(tr):not(colgroup) {
-  visibility: visible;
-}
-
-.collapse {
-  position: relative;
-  display: grid;
-  overflow: hidden;
-  grid-template-rows: auto 0fr;
-  transition: grid-template-rows 0.2s;
-  width: 100%;
-  border-radius: var(--rounded-box, 1rem);
-}
-
-.collapse-title,
-.collapse > input[type="checkbox"],
-.collapse > input[type="radio"],
-.collapse-content {
-  grid-column-start: 1;
-  grid-row-start: 1;
-}
-
-.collapse > input[type="checkbox"],
-.collapse > input[type="radio"] {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  opacity: 0;
-}
-
-.collapse[open],
-.collapse-open,
-.collapse:focus:not(.collapse-close) {
-  grid-template-rows: auto 1fr;
-}
-
-.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
-.collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
-  grid-template-rows: auto 1fr;
-}
-
-.collapse[open] > .collapse-content,
-.collapse-open > .collapse-content,
-.collapse:focus:not(.collapse-close) > .collapse-content,
-.collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
-.collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content {
-  visibility: visible;
-  min-height: -moz-fit-content;
-  min-height: fit-content;
-}
-
-@media (hover: hover) {
-  .btm-nav > *.disabled:hover,
-      .btm-nav > *[disabled]:hover {
-    pointer-events: none;
-    --tw-border-opacity: 0;
-    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-    --tw-bg-opacity: 0.1;
-    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-    --tw-text-opacity: 0.2;
-  }
-
-  .btn:hover {
-    --tw-border-opacity: 1;
-    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-    .btn:hover {
-      background-color: color-mix(
-            in oklab,
-            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
-            black
-          );
-      border-color: color-mix(
-            in oklab,
-            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
-            black
-          );
-    }
-  }
-
-  @supports not (color: oklch(0% 0 0)) {
-    .btn:hover {
-      background-color: var(--btn-color, var(--fallback-b2));
-      border-color: var(--btn-color, var(--fallback-b2));
-    }
-  }
-
-  .btn.glass:hover {
-    --glass-opacity: 25%;
-    --glass-border-opacity: 15%;
-  }
-
-  .btn-outline.btn-primary:hover {
-    --tw-text-opacity: 1;
-    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-    .btn-outline.btn-primary:hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    }
-  }
-
-  .btn-disabled:hover,
-    .btn[disabled]:hover,
-    .btn:disabled:hover {
-    --tw-border-opacity: 0;
-    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-    --tw-bg-opacity: 0.2;
-    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-    --tw-text-opacity: 0.2;
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-    .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    }
-  }
-
-  .tab[disabled],
-    .tab[disabled]:hover {
-    cursor: not-allowed;
-    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-    --tw-text-opacity: 0.2;
-  }
-}
-
-.form-control {
-  display: flex;
-  flex-direction: column;
-}
-
 .label {
   display: flex;
   -webkit-user-select: none;
@@ -1236,55 +918,6 @@ html {
   text-decoration-line: underline;
 }
 
-.menu li.disabled {
-  cursor: not-allowed;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  color: var(--fallback-bc,oklch(var(--bc)/0.3));
-}
-
-.modal {
-  pointer-events: none;
-  position: fixed;
-  inset: 0px;
-  margin: 0px;
-  display: grid;
-  height: 100%;
-  max-height: none;
-  width: 100%;
-  max-width: none;
-  justify-items: center;
-  padding: 0px;
-  opacity: 0;
-  overscroll-behavior: contain;
-  z-index: 999;
-  background-color: transparent;
-  color: inherit;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-property: transform, opacity, visibility;
-  overflow-y: hidden;
-}
-
-:where(.modal) {
-  align-items: center;
-}
-
-.modal-open,
-.modal:target,
-.modal-toggle:checked + .modal,
-.modal[open] {
-  pointer-events: auto;
-  visibility: visible;
-  opacity: 1;
-}
-
-:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
-  overflow: hidden;
-  scrollbar-gutter: stable;
-}
-
 .navbar {
   display: flex;
   align-items: center;
@@ -1298,131 +931,6 @@ html {
   align-items: center;
 }
 
-.radio {
-  flex-shrink: 0;
-  --chkbg: var(--bc);
-  height: 1.5rem;
-  width: 1.5rem;
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border-radius: 9999px;
-  border-width: 1px;
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 0.2;
-}
-
-.select {
-  display: inline-flex;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  height: 3rem;
-  min-height: 3rem;
-  padding-inline-start: 1rem;
-  padding-inline-end: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  line-height: 2;
-  border-radius: var(--rounded-btn, 0.5rem);
-  border-width: 1px;
-  border-color: transparent;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(100% - 20px) calc(1px + 50%),
-    calc(100% - 16.1px) calc(1px + 50%);
-  background-size: 4px 4px,
-    4px 4px;
-  background-repeat: no-repeat;
-}
-
-.select[multiple] {
-  height: auto;
-}
-
-.tabs {
-  display: grid;
-  align-items: flex-end;
-}
-
-.tabs-lifted:has(.tab-content[class^="rounded-"])
-    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
-    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
-  border-bottom-color: transparent;
-}
-
-.tab {
-  position: relative;
-  grid-row-start: 1;
-  display: inline-flex;
-  height: 2rem;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  line-height: 2;
-  --tab-padding: 1rem;
-  --tw-text-opacity: 0.5;
-  --tab-color: var(--fallback-bc,oklch(var(--bc)/1));
-  --tab-bg: var(--fallback-b1,oklch(var(--b1)/1));
-  --tab-border-color: var(--fallback-b3,oklch(var(--b3)/1));
-  color: var(--tab-color);
-  padding-inline-start: var(--tab-padding, 1rem);
-  padding-inline-end: var(--tab-padding, 1rem);
-}
-
-.tab:is(input[type="radio"]) {
-  width: auto;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-
-.tab:is(input[type="radio"]):after {
-  --tw-content: attr(aria-label);
-  content: var(--tw-content);
-}
-
-.tab:not(input):empty {
-  cursor: default;
-  grid-column-start: span 9999;
-}
-
-.tab-content {
-  grid-column-start: 1;
-  grid-column-end: span 9999;
-  grid-row-start: 2;
-  margin-top: calc(var(--tab-border) * -1);
-  display: none;
-  border-color: transparent;
-  border-width: var(--tab-border, 0);
-}
-
-:checked + .tab-content:nth-child(2),
-  :is(.tab-active, [aria-selected="true"]) + .tab-content:nth-child(2) {
-  border-start-start-radius: 0px;
-}
-
-input.tab:checked + .tab-content,
-:is(.tab-active, [aria-selected="true"]) + .tab-content {
-  display: block;
-}
-
 .table {
   position: relative;
   width: 100%;
@@ -1456,22 +964,6 @@ input.tab:checked + .tab-content,
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
 
-.btm-nav > *:where(.active) {
-  border-top-width: 2px;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
-}
-
-.btm-nav > *.disabled,
-    .btm-nav > *[disabled] {
-  pointer-events: none;
-  --tw-border-opacity: 0;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-  --tw-bg-opacity: 0.1;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-text-opacity: 0.2;
-}
-
 .btm-nav > * .label {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1507,100 +999,6 @@ input.tab:checked + .tab-content,
   --tw-rotate: -135deg;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .btn {
-    animation: button-pop var(--animation-btn, 0.25s) ease-out;
-  }
-}
-
-.btn:active:hover,
-  .btn:active:focus {
-  animation: button-pop 0s ease-out;
-  transform: scale(var(--btn-focus-scale, 0.97));
-}
-
-@supports not (color: oklch(0% 0 0)) {
-  .btn {
-    background-color: var(--btn-color, var(--fallback-b2));
-    border-color: var(--btn-color, var(--fallback-b2));
-  }
-
-  .btn-primary {
-    --btn-color: var(--fallback-p);
-  }
-}
-
-@supports (color: color-mix(in oklab, black, black)) {
-  .btn-outline.btn-primary.btn-active {
-    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-  }
-}
-
-.btn:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-}
-
-.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  outline-color: var(--fallback-p,oklch(var(--p)/1));
-}
-
-@supports (color: oklch(0% 0 0)) {
-  .btn-primary {
-    --btn-color: var(--p);
-  }
-}
-
-.btn.glass {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-color: currentColor;
-}
-
-.btn.glass.btn-active {
-  --glass-opacity: 25%;
-  --glass-border-opacity: 15%;
-}
-
-.btn-outline.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
-}
-
-.btn-outline.btn-primary.btn-active {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-}
-
-.btn.btn-disabled,
-  .btn[disabled],
-  .btn:disabled {
-  --tw-border-opacity: 0;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-  --tw-bg-opacity: 0.2;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-text-opacity: 0.2;
-}
-
-.btn:is(input[type="checkbox"]:checked),
-.btn:is(input[type="radio"]:checked) {
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-}
-
-.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
-  outline-color: var(--fallback-p,oklch(var(--p)/1));
-}
-
 @keyframes button-pop {
   0% {
     transform: scale(var(--btn-focus-scale, 0.98));
@@ -1615,92 +1013,6 @@ input.tab:checked + .tab-content,
   }
 }
 
-.card :where(figure:first-child) {
-  overflow: hidden;
-  border-start-start-radius: inherit;
-  border-start-end-radius: inherit;
-  border-end-start-radius: unset;
-  border-end-end-radius: unset;
-}
-
-.card :where(figure:last-child) {
-  overflow: hidden;
-  border-start-start-radius: unset;
-  border-start-end-radius: unset;
-  border-end-start-radius: inherit;
-  border-end-end-radius: inherit;
-}
-
-.card:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-.card.bordered {
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
-}
-
-.card.compact .card-body {
-  padding: 1rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.card.image-full :where(figure) {
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-.checkbox:focus {
-  box-shadow: none;
-}
-
-.checkbox:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
-}
-
-.checkbox:disabled {
-  border-width: 0px;
-  cursor: not-allowed;
-  border-color: transparent;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  opacity: 0.2;
-}
-
-.checkbox:checked,
-  .checkbox[aria-checked="true"] {
-  background-repeat: no-repeat;
-  animation: checkmark var(--animation-input, 0.2s) ease-out;
-  background-color: var(--chkbg);
-  background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
-      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
-      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
-      linear-gradient(
-        45deg,
-        var(--chkbg) 30%,
-        var(--chkfg) 30.99%,
-        var(--chkfg) 40%,
-        transparent 40.99%
-      ),
-      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%);
-}
-
-.checkbox:indeterminate {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  background-repeat: no-repeat;
-  animation: checkmark var(--animation-input, 0.2s) ease-out;
-  background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%),
-      linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
-      linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%);
-}
-
 @keyframes checkmark {
   0% {
     background-position-y: 5px;
@@ -1715,90 +1027,6 @@ input.tab:checked + .tab-content,
   }
 }
 
-details.collapse {
-  width: 100%;
-}
-
-details.collapse summary {
-  position: relative;
-  display: block;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-details.collapse summary::-webkit-details-marker {
-  display: none;
-}
-
-.collapse:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
-}
-
-.collapse:has(.collapse-title:focus-visible),
-.collapse:has(> input[type="checkbox"]:focus-visible),
-.collapse:has(> input[type="radio"]:focus-visible) {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
-}
-
-.collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"],
-.collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked),
-.collapse:not(.collapse-open):not(.collapse-close) > .collapse-title {
-  cursor: pointer;
-}
-
-.collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title {
-  cursor: unset;
-}
-
-:where(.collapse > input[type="checkbox"]),
-:where(.collapse > input[type="radio"]) {
-  z-index: 1;
-}
-
-.collapse-title,
-:where(.collapse > input[type="checkbox"]),
-:where(.collapse > input[type="radio"]) {
-  width: 100%;
-  padding: 1rem;
-  padding-inline-end: 3rem;
-  min-height: 3.75rem;
-  transition: background-color 0.2s ease-out;
-}
-
-.collapse[open] > :where(.collapse-content),
-.collapse-open > :where(.collapse-content),
-.collapse:focus:not(.collapse-close) > :where(.collapse-content),
-.collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content),
-.collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) {
-  padding-bottom: 1rem;
-  transition: padding 0.2s ease-out,
-    background-color 0.2s ease-out;
-}
-
-.collapse[open].collapse-arrow > .collapse-title:after,
-.collapse-open.collapse-arrow > .collapse-title:after,
-.collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
-.collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
-.collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
-  --tw-translate-y: -50%;
-  --tw-rotate: 225deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.collapse[open].collapse-plus > .collapse-title:after,
-.collapse-open.collapse-plus > .collapse-title:after,
-.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
-.collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
-.collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
-  content: "−";
-}
-
 .input input {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
@@ -1857,10 +1085,6 @@ details.collapse summary::-webkit-details-marker {
   text-align: inherit;
 }
 
-.join > :where(*:not(:first-child)):is(.btn) {
-  margin-inline-start: calc(var(--border-btn) * -1);
-}
-
 .link:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1871,15 +1095,6 @@ details.collapse summary::-webkit-details-marker {
   outline-offset: 2px;
 }
 
-.menu li > *:not(ul, .menu-title, details, .btn):active,
-.menu li > *:not(ul, .menu-title, details, .btn).active,
-.menu li > details > summary:active {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-  --tw-text-opacity: 1;
-  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
-}
-
 .mockup-phone .display {
   overflow: hidden;
   border-radius: 40px;
@@ -1932,22 +1147,6 @@ details.collapse summary::-webkit-details-marker {
   opacity: 0.6;
 }
 
-.modal:not(dialog:not(.modal-open)),
-  .modal::backdrop {
-  background-color: #0006;
-  animation: modal-pop 0.2s ease-out;
-}
-
-.modal-open .modal-box,
-.modal-toggle:checked + .modal .modal-box,
-.modal:target .modal-box,
-.modal[open] .modal-box {
-  --tw-translate-y: 0px;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 @keyframes modal-pop {
   0% {
     opacity: 0;
@@ -1960,32 +1159,6 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
-.radio:focus {
-  box-shadow: none;
-}
-
-.radio:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
-}
-
-.radio:checked,
-  .radio[aria-checked="true"] {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  background-image: none;
-  animation: radiomark var(--animation-input, 0.2s) ease-out;
-  box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
-      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
-}
-
-.radio:disabled {
-  cursor: not-allowed;
-  opacity: 0.2;
-}
-
 @keyframes radiomark {
   0% {
     box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
@@ -2017,50 +1190,6 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
-.select:focus {
-  box-shadow: none;
-  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
-}
-
-.select-disabled,
-  .select:disabled,
-  .select[disabled] {
-  cursor: not-allowed;
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-  color: var(--fallback-bc,oklch(var(--bc)/0.4));
-}
-
-.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
-  --tw-placeholder-opacity: 0.2;
-}
-
-.select-disabled::placeholder,
-  .select:disabled::placeholder,
-  .select[disabled]::placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
-  --tw-placeholder-opacity: 0.2;
-}
-
-.select-multiple,
-  .select[multiple],
-  .select[size].select:not([size="1"]) {
-  background-image: none;
-  padding-right: 1rem;
-}
-
-[dir="rtl"] .select {
-  background-position: calc(0% + 12px) calc(1px + 50%),
-    calc(0% + 16px) calc(1px + 50%);
-}
-
 @keyframes skeleton {
   from {
     background-position: 150%;
@@ -2071,126 +1200,6 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
-.tabs-lifted > .tab:focus-visible {
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
-}
-
-.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 1;
-  --tw-text-opacity: 1;
-}
-
-.tab:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.tab:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: -5px;
-}
-
-.tab-disabled,
-  .tab[disabled] {
-  cursor: not-allowed;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-text-opacity: 0.2;
-}
-
-.tabs-bordered > .tab {
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 0.2;
-  border-style: solid;
-  border-bottom-width: calc(var(--tab-border, 1px) + 1px);
-}
-
-.tabs-lifted > .tab {
-  border: var(--tab-border, 1px) solid transparent;
-  border-width: 0 0 var(--tab-border, 1px) 0;
-  border-start-start-radius: var(--tab-radius, 0.5rem);
-  border-start-end-radius: var(--tab-radius, 0.5rem);
-  border-bottom-color: var(--tab-border-color);
-  padding-inline-start: var(--tab-padding, 1rem);
-  padding-inline-end: var(--tab-padding, 1rem);
-  padding-top: var(--tab-border, 1px);
-}
-
-.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
-  background-color: var(--tab-bg);
-  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
-  border-inline-start-color: var(--tab-border-color);
-  border-inline-end-color: var(--tab-border-color);
-  border-top-color: var(--tab-border-color);
-  padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
-  padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
-  padding-bottom: var(--tab-border, 1px);
-  padding-top: 0;
-}
-
-.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
-  z-index: 1;
-  content: "";
-  display: block;
-  position: absolute;
-  width: calc(100% + var(--tab-radius, 0.5rem) * 2);
-  height: var(--tab-radius, 0.5rem);
-  bottom: 0;
-  background-size: var(--tab-radius, 0.5rem);
-  background-position: top left,
-        top right;
-  background-repeat: no-repeat;
-  --tab-grad: calc(69% - var(--tab-border, 1px));
-  --radius-start: radial-gradient(
-        circle at top left,
-        transparent var(--tab-grad),
-        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
-        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
-        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
-      );
-  --radius-end: radial-gradient(
-        circle at top right,
-        transparent var(--tab-grad),
-        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
-        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
-        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
-      );
-  background-image: var(--radius-start), var(--radius-end);
-}
-
-.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
-  background-image: var(--radius-end);
-  background-position: top right;
-}
-
-[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
-  background-image: var(--radius-start);
-  background-position: top left;
-}
-
-.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
-  background-image: var(--radius-start);
-  background-position: top left;
-}
-
-[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
-  background-image: var(--radius-end);
-  background-position: top right;
-}
-
-.tabs-lifted
-  > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
-  + .tabs-lifted
-  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
-  background-image: var(--radius-end);
-  background-position: top right;
-}
-
-.tabs-boxed .tab {
-  border-radius: var(--rounded-btn, 0.5rem);
-}
-
 .table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
@@ -2210,13 +1219,6 @@ details.collapse summary::-webkit-details-marker {
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
 
-.table-zebra tr.active,
-    .table-zebra tr.active:nth-child(even),
-    .table-zebra-zebra tbody tr:nth-child(even) {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-}
-
 .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
@@ -2249,106 +1251,24 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
-.btm-nav-xs > *:where(.active) {
-  border-top-width: 1px;
-}
-
-.btm-nav-sm > *:where(.active) {
-  border-top-width: 2px;
-}
-
-.btm-nav-md > *:where(.active) {
-  border-top-width: 2px;
-}
-
-.btm-nav-lg > *:where(.active) {
-  border-top-width: 4px;
-}
-
-.tabs-md :where(.tab) {
-  height: 2rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  line-height: 2;
-  --tab-padding: 1rem;
-}
-
-.tabs-lg :where(.tab) {
-  height: 3rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  line-height: 2;
-  --tab-padding: 1.25rem;
-}
-
-.tabs-sm :where(.tab) {
-  height: 1.5rem;
-  font-size: 0.875rem;
-  line-height: .75rem;
-  --tab-padding: 0.75rem;
-}
-
-.tabs-xs :where(.tab) {
-  height: 1.25rem;
-  font-size: 0.75rem;
-  line-height: .75rem;
-  --tab-padding: 0.5rem;
-}
-
-.card-compact .card-body {
-  padding: 1rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.card-normal .card-body {
-  padding: var(--padding-card, 2rem);
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
-  margin-top: calc(var(--border-btn) * -1);
-}
-
-.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
-  margin-inline-start: calc(var(--border-btn) * -1);
-}
-
-.table-sm :not(thead):not(tfoot) tr {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.table-sm :where(th, td) {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.static {
+  position: static;
 }
 
-.sr-only {
+.absolute {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
 }
 
-.collapse {
-  visibility: collapse;
+.relative {
+  position: relative;
 }
 
-.static {
-  position: static;
+.right-2 {
+  right: 0.5rem;
 }
 
-.m-0 {
-  margin: 0px;
+.top-2 {
+  top: 0.5rem;
 }
 
 .mx-auto {
@@ -2356,15 +1276,16 @@ details.collapse summary::-webkit-details-marker {
   margin-right: auto;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-.mb-0 {
-  margin-bottom: 0px;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -2397,10 +1318,18 @@ details.collapse summary::-webkit-details-marker {
   margin-left: 1rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -2433,20 +1362,30 @@ details.collapse summary::-webkit-details-marker {
   display: grid;
 }
 
-.hidden {
-  display: none;
+.size-4 {
+  width: 1rem;
+  height: 1rem;
 }
 
-.h-4 {
-  height: 1rem;
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
-.h-auto {
-  height: auto;
+.h-6 {
+  height: 1.5rem;
 }
 
-.w-4 {
-  width: 1rem;
+.min-h-full {
+  min-height: 100%;
+}
+
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-6 {
+  width: 1.5rem;
 }
 
 .w-full {
@@ -2473,6 +1412,18 @@ details.collapse summary::-webkit-details-marker {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -2546,6 +1497,10 @@ details.collapse summary::-webkit-details-marker {
   border-width: 1px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -2558,6 +1513,11 @@ details.collapse summary::-webkit-details-marker {
   border-top-width: 1px;
 }
 
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -2637,6 +1597,10 @@ details.collapse summary::-webkit-details-marker {
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
 
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -2679,6 +1643,16 @@ details.collapse summary::-webkit-details-marker {
   padding-bottom: 0.25rem;
 }
 
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2708,6 +1682,10 @@ details.collapse summary::-webkit-details-marker {
   padding-bottom: 2rem;
 }
 
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
 .pt-6 {
   padding-top: 1.5rem;
 }
@@ -2772,6 +1750,10 @@ details.collapse summary::-webkit-details-marker {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -2780,6 +1762,18 @@ details.collapse summary::-webkit-details-marker {
   text-transform: uppercase;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.leading-9 {
+  line-height: 2.25rem;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
 .tracking-wider {
   letter-spacing: 0.05em;
 }
@@ -2794,6 +1788,11 @@ details.collapse summary::-webkit-details-marker {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2814,6 +1813,16 @@ details.collapse summary::-webkit-details-marker {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
@@ -2824,6 +1833,22 @@ details.collapse summary::-webkit-details-marker {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
+.decoration-blue-500 {
+  text-decoration-color: #3b82f6;
+}
+
+.decoration-pink-500 {
+  text-decoration-color: #ec4899;
+}
+
+.decoration-2 {
+  text-decoration-thickness: 2px;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2842,6 +1867,31 @@ details.collapse summary::-webkit-details-marker {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
+.ring-gray-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
+.placeholder\:text-gray-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-gray-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -2852,6 +1902,11 @@ details.collapse summary::-webkit-details-marker {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-indigo-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-indigo-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(67 56 202 / var(--tw-bg-opacity));
@@ -2872,13 +1927,13 @@ details.collapse summary::-webkit-details-marker {
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
-.hover\:underline:hover {
-  text-decoration-line: underline;
+.hover\:text-indigo-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
 }
 
-.focus\:border-blue-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+.hover\:underline:hover {
+  text-decoration-line: underline;
 }
 
 .focus\:outline-none:focus {
@@ -2892,6 +1947,10 @@ details.collapse summary::-webkit-details-marker {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-inset:focus {
+  --tw-ring-inset: inset;
+}
+
 .focus\:ring-blue-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
@@ -2902,15 +1961,53 @@ details.collapse summary::-webkit-details-marker {
   --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-indigo-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
 
+.focus-visible\:outline:focus-visible {
+  outline-style: solid;
+}
+
+.focus-visible\:outline-2:focus-visible {
+  outline-width: 2px;
+}
+
+.focus-visible\:outline-offset-2:focus-visible {
+  outline-offset: 2px;
+}
+
+.focus-visible\:outline-indigo-600:focus-visible {
+  outline-color: #4f46e5;
+}
+
 @media (min-width: 640px) {
+  .sm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .sm\:w-full {
+    width: 100%;
+  }
+
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
 
+  .sm\:p-2 {
+    padding: 0.5rem;
+  }
+
   .sm\:p-6 {
     padding: 1.5rem;
   }
@@ -2924,10 +2021,21 @@ details.collapse summary::-webkit-details-marker {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
+
+  .sm\:leading-6 {
+    line-height: 1.5rem;
+  }
 }
 
 @media (min-width: 768px) {
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
+
+@media (min-width: 1024px) {
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
\ No newline at end of file
diff --git a/core/static/css/styles.css b/core/static/css/styles.css
deleted file mode 100644
index 23064c6..0000000
--- a/core/static/css/styles.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.format-container {
-  margin: 20px;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: flex-start;
-  height: 300px;
-  gap: 1em;
-}
-
-.form-thing {
-  width: 50%;
-  border-style: solid;
-  border-width: 5px 2px;
-  border-color: black;
-  padding: 20px;
-  background-color: #dbefff;
-  margin: auto;
-}
-
-.ep-table {
-  font-size: small;
-  border: 1px solid;
-  border-collapse: collapse;
-  color: black;
-  border-spacing: 0;
-}
-
-.summary-table {
-  font-size: small;
-  border: 1px solid;
-  border-collapse: collapse;
-  color: black;
-  border-spacing: 0;
-}
-
-.summary-table > tbody > tr > td {
-  border: 1px solid;
-}
-
-
-.ep-table > thead > tr > th {
-  padding: 10px;
-  border: 1px solid;
-}
-
-.ep-table > tbody > tr > td {
-  border: 1px solid;
-  padding: 3px;
-}
-
-.ep-table > tbody > tr > td > ul > li > a {
-  color: green;
-}
diff --git a/core/templates/core/base.html b/core/templates/core/base.html
index 682395f..1bf6886 100644
--- a/core/templates/core/base.html
+++ b/core/templates/core/base.html
@@ -5,25 +5,12 @@
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-{#    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">#}
     <link rel="stylesheet" href="{% static 'css/output.css' %}">
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700' rel='stylesheet' type='text/css'/>
-{#    <link rel="stylesheet" href="{% static 'css/styles.css' %}"/>#}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script src="https://unpkg.com/htmx.org@1.9.0" integrity="sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls" crossorigin="anonymous"></script>
     <title>{% block title %}{% endblock title %}</title>
     {% block extra_head_tags %}{% endblock extra_head_tags %}
-    <style type="text/css" media="screen">
-
-  * {
-    font-family: "Roboto Slab";
-  }
-
-    body, h1, h2, h3, h4, h5, h6 {
-      font-family: "Roboto Slab", sans-serif;
-}
-    </style>
 </head>
 <body>
 {% block navbar %}
diff --git a/core/templates/registration/login.html b/core/templates/registration/login.html
index 9e00087..f2f0284 100644
--- a/core/templates/registration/login.html
+++ b/core/templates/registration/login.html
@@ -1,43 +1,68 @@
 {% extends "core/base.html" %}
+{% load widget_tweaks %}
+{% load static %}
 
 {% block content %}
 
-<div class="w3-container">
-  {% if form.errors %}
-  <p>Your username and password didn't match. Please try again.</p>
-  {% endif %}
-
-  {% if next %}
-      {% if user.is_authenticated %}
-      <p>Your account doesn't have access to this page. To proceed,
-      please login with an account that has access.</p>
-      {% else %}
-      <p>Please login to see this page.</p>
-      {% endif %}
-  {% endif %}
-
-  <form method="post" action="{% url 'login' %}">
-  {% csrf_token %}
-  <div class="form-group">
-      {{ form.username.label_tag }}
-      {{ form.username }}
-  </div>
-
-  <div class="form-group">
-      {{ form.password.label_tag }}
-      {{ form.password }}
-  </div>
-
-  <div class="form-group">
-    <button type="submit" class="btn btn-primary" value="login">Log In</button>
-  </div>
-  <input type="hidden" name="next" value="{{ next }}">
-  </form>
-
-  <div class="form-group">
-    {# Assumes you set up the password_reset view in your URLconf #}
-      <a href="{% url 'password_reset' %}">Lost password?</a>
-  </div>
-
-  {% endblock content %}
+{#    <div class="container">#}
+{#    {% if form.errors %}#}
+{#        <p>Your username and password didn't match. Please try again.</p>#}
+{#    {% endif %}#}
+{##}
+{#    {% if next %}#}
+{#        {% if user.is_authenticated %}#}
+{#            <p>Your account doesn't have access to this page. To proceed,#}
+{#                please login with an account that has access.</p>#}
+{#        {% else %}#}
+{#            <p>Please login to see this page.</p>#}
+{#        {% endif %}#}
+{#    {% endif %}#}
+
+    <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+            <p class="text-center font-bold text-3xl">Defence Nuclear Security Regulator Engagement Database (DED)</p>
+            <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your
+                account</h2>
+        </div>
+
+        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+            <form class="space-y-6" action="{% url 'login' %}" method="POST">
+                {% csrf_token %}
+                <div>
+{#                    <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>#}
+                     {{ form.username.label_tag }}
+                    <div class="mt-2">
+{#                        <input id="email" name="email" type="email" autocomplete="email" required#}
+{#                               class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">#}
+                        {% render_field form.username class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                    </div>
+                </div>
+
+                <div>
+                    <div class="flex items-center justify-between">
+{#                        <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>#}
+                        {{ form.password.label_tag }}
+                        <div class="text-sm">
+                            <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+{#                        <input id="password" name="password" type="password" autocomplete="current-password" required#}
+{#                               class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">#}
+                        {% render_field  form.password class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                    </div>
+                </div>
+
+                <div>
+                    <button type="submit"
+                            class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                        Sign in
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+
+{% endblock content %}
 </div>
diff --git a/engagements/forms.py b/engagements/forms.py
index a1c3c44..2532892 100644
--- a/engagements/forms.py
+++ b/engagements/forms.py
@@ -16,6 +16,10 @@ class EngagementEffortReportingCreateForm(forms.ModelForm):
 
     class Meta:
         model = EngagementEffort
+        help_texts = {
+            "is_planned": ("To distinguish planned events from retrospective recording."),
+            "officers": ("Include yourself here but you can also add effort for your colleagues.")
+        }
         fields = [
             'is_planned',
             'proposed_start_date',
@@ -63,7 +67,7 @@ class EngagementEffortRegulationCreateForm(forms.ModelForm):
             "notes",
         ]
         help_texts = {
-            "is_planned": ("<br><small><em>To distinguish planned events from retrospective recording</em></small>")
+            "is_planned": ("To distinguish planned events from retrospective recording.")
         }
         widgets = {
             "proposed_start_date": forms.DateTimeInput(
@@ -93,7 +97,7 @@ class EngagementEffortPlanningCreateForm(forms.ModelForm):
             "notes",
         ]
         help_texts = {
-            "is_planned": ("<br><small><em>To distinguish planned events from retrospective recording</em></small>")
+            "is_planned": ("To distinguish planned events from retrospective recording.")
         }
         widgets = {
             "proposed_start_date": forms.DateTimeInput(
@@ -126,6 +130,9 @@ class EngagementEffortTravelCreateForm(forms.ModelForm):
             "proposed_start_date": forms.DateTimeInput(attrs={"type": "datetime-local"}),
             "proposed_end_date": forms.DateTimeInput(attrs={"type": "datetime-local"}),
         }
+        help_texts = {
+            "is_planned": ("To distinguish planned events from retrospective recording.")
+        }
 
 
 class EngagementEffortCreateForm(forms.ModelForm):
@@ -186,6 +193,7 @@ class EngagementCreateForm(forms.ModelForm):
             "proposed_start_date",
             "proposed_end_date",
             "engagement_type",
+            "external_party",
             "officers",
         ]
         labels = {
diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html
index b776fd8..09a357a 100644
--- a/engagements/templates/engagements/engagement_effort_create.html
+++ b/engagements/templates/engagements/engagement_effort_create.html
@@ -1,34 +1,94 @@
 {% extends "core/base.html" %}
+{% load widget_tweaks %}
 
 {% block title %}Add {{ etype }} effort to Engagement{% endblock title %}
 
 {% block content %}
 
-   <div class="container mx-auto max-w-2xl mt-8">
-    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <h2 class="text-2xl font-bold mb-6">Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event</h2>
-        <p class="mb-6">{{ engagement.external_party }} on {{ engagement.proposed_start_date }}</p>
+    <div class="container mx-auto max-w-2xl mt-8">
+        <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 relative">
+            <a href="{{ request.META.HTTP_REFERER }}" class="absolute top-2 right-2">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </a>
+            <h2 class="text-2xl font-bold mb-6">Register <span class="underline decoration-blue-500 decoration-2">{{ etype|lower }}</span> time</h2>
+            <div class="flex items-end mb-6">
+                <svg id="map-pin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                     stroke="currentColor"
+                     class="size-6 mr-2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
+                </svg>
+                <div class="flex items-end flex-wrap">
+                    <p class="underline decoration-2 font-semibold decoration-pink-500 mr-2">{{ engagement.external_party }} </p>
+                    <p class="font-normal">
+                        ({{ engagement.engagement_type.name|title }})
+                    </p>
+                </div>
+            </div>
 
-        <form method="post" class="space-y-6">
-            {% csrf_token %}
-            {% for field in form %}
-                <div class="mb-4">
-                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
-                        {{ field.label }}
-                    </label>
-                    {{ field }}
-                    {% if field.help_text %}
-                        <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
+            <div class="flex items-end mb-6">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                     stroke="currentColor" class="size-6 mr-2">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                          d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
+                </svg>
+                <p class="text text-gray-500 font-medium">
+                    {% if engagement.proposed_start_date == engagement.proposed_end_date %}
+                        {{ engagement.proposed_start_date|date:"j M Y" }}
+                    {% else %}
+                        {{ engagement.proposed_start_date|date:"j M Y" }} -
+                        {{ engagement.proposed_end_date|date:"j M Y" }}
                     {% endif %}
-                </div>
-            {% endfor %}
-            <div class="mt-6">
-                <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                    Submit
-                </button>
+                </p>
             </div>
-        </form>
+
+            <div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
+                <p class="text-sm text-blue-800">
+                    Please fill out the form below to log your <strong>{{ etype|lower }}</strong> effort for this engagement. 
+                    Make sure to provide accurate information for proper tracking and reporting.
+                </p>
+                <hr class="my-2">
+                <p><a class="text-sm font-bold underline text-blue-800" href="#">Help</a></p>
+            </div>
+
+            <form method="post" class="space-y-6">
+                {% csrf_token %}
+                {% for field in form %}
+                    <div class="my-2">
+                        <div>
+                            <label for="{{ field.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
+                                {{ field.label }}
+                            </label>
+                        </div>
+                        <div>
+                            {% render_field field class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                            {% for error in field.errors %}
+                                {{ field }}
+                            {% endfor %}
+                        </div>
+                        {% if field.help_text %}
+                            <div class="flex items-end mb-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     stroke-width="1.0" stroke="currentColor" class="size-4 text-gray-500 mr-2">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/>
+                                </svg>
+                                <p class="mt-2 text-xs text-gray-500">{{ field.help_text }}</p>
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+                <div class="mt-6">
+                    <button type="submit"
+                            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Submit
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
-</div>
 
 {% endblock content %}
diff --git a/engagements/templates/engagements/engagement_form.html b/engagements/templates/engagements/engagement_form.html
index 3dfe249..a0cdea2 100644
--- a/engagements/templates/engagements/engagement_form.html
+++ b/engagements/templates/engagements/engagement_form.html
@@ -1,60 +1,87 @@
 {% extends "core/base.html" %}
 
 {% load static %}
+{% load widget_tweaks %}
 
 {% block title %}Create new engagement{% endblock title %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <div class="bg-white shadow-md rounded-lg overflow-hidden">
-        <header class="bg-blue-100 p-4">
-            <h2 class="text-3xl font-bold text-center">{{ title }}</h2>
-        </header>
-        <div class="p-6">
-            <div class="mb-8">
-                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
-                    <h4 class="text-lg font-semibold mb-2">Step 1</h4>
-                    <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
-                    <h4 class="text-lg font-semibold mb-2">Step 2</h4>
-                    <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+    <div class="container mx-auto w-2/3 px-4 py-8">
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <header class="bg-blue-100 p-4">
+                <h2 class="text-3xl font-bold text-center">{{ title }}</h2>
+            </header>
+            <div class="p-6">
+                <div class="mb-8">
+                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
+                        <h4 class="text-lg font-semibold mb-2">Step 1</h4>
+                        <p class="mb-4">To roughly plan out future events, you provide the minimal details here:
+                            <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of
+                                Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external
+                                site</strong> or operation and finally the <strong>inspectors</strong> who are carrying
+                            out the work.</p>
+                        <h4 class="text-lg font-semibold mb-2">Step 2</h4>
+                        <p>So that we can track the finer details involved with an Assessment or Inspection, each
+                            Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>,
+                            <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to
+                            these components. In addition, each component can be associated with
+                            <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the
+                            overarching Engagement using this form, you will have the opportunity to add components.</p>
+                    </div>
                 </div>
-            </div>
 
-            <div class="mt-8">
-                <h4 class="text-xl font-semibold mb-4">Enter main details:</h4>
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-                    <div class="px-4 py-5 sm:p-6">
+                <div class="mt-8 mx-auto border p-6 bg-white shadow-md rounded-lg">
+                    <h4 class="text-xl font-semibold mb-1">Enter main details:</h4>
+                    <div class="px-2 pt-1 sm:p-2">
                         <form method="post" class="space-y-6">
                             {% csrf_token %}
-                            {% for field in form %}
-                                <div class="mb-4">
-                                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
-                                        {{ field.label }}
-                                    </label>
-                                    {% if field.field.widget.input_type == 'checkbox' %}
-                                        <div class="flex items-center">
-                                            <input type="checkbox" name="{{ field.name }}" id="{{ field.id_for_label }}" {% if field.value %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                                            <span class="ml-2 text-gray-700">{{ field.help_text|safe }}</span>
-                                        </div>
-                                    {% elif field.field.widget.input_type == 'select' %}
-                                        <select name="{{ field.name }}" id="{{ field.id_for_label }}" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
-                                            {% for choice in field.field.choices %}
-                                                <option value="{{ choice.0 }}" {% if choice.0 == field.value %}selected{% endif %}>{{ choice.1 }}</option>
-                                            {% endfor %}
-                                        </select>
-                                    {% else %}
-                                        <input type="{{ field.field.widget.input_type }}" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value|default:'' }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-                                    {% endif %}
-                                    {% if field.help_text and field.field.widget.input_type != 'checkbox' %}
-                                        <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p>
-                                    {% endif %}
-                                    {% for error in field.errors %}
-                                        <p class="mt-2 text-sm text-red-600">{{ error }}</p>
+                            <div>
+                                {{ form.external_party.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.external_party class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                    {% for error in form.external_party.errors %}
+                                        <p class="text-red-500 text-sm">{{ error }}</p>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        
+                            <div>
+                                {{ form.proposed_start_date.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.proposed_start_date class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                </div>
+                            </div>
+
+                            <div>
+                                {{ form.proposed_end_date.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.proposed_end_date class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                </div>
+                            </div>
+
+                            <div>
+                                {{ form.engagement_type.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.engagement_type class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                    {% for error in form.engagement_type.errors %}
+                                        <p class="text-red-500 text-sm">{{ error }}</p>
                                     {% endfor %}
                                 </div>
-                            {% endfor %}
+                            </div>
+
+                            <div>
+                                {{ form.officers.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.officers class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                    {% for error in form.officers.errors %}
+                                        <p class="text-red-500 text-sm">{{ error }}</p>
+                                    {% endfor %}
+                                </div>
+                            </div>
+
                             <div>
-                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                <button type="submit"
+                                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                     Save
                                 </button>
                             </div>
@@ -64,5 +91,4 @@
             </div>
         </div>
     </div>
-</div>
 {% endblock content %}
diff --git a/templates/w3/accordion-group.html b/templates/w3/accordion-group.html
deleted file mode 100644
index 3d4f5e8..0000000
--- a/templates/w3/accordion-group.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="card mb-2">
-    <div class="card-header" role="tab">
-        <h5 class="mb-0">
-            <a data-toggle="collapse" href="#{{ div.css_id }}" aria-expanded="true"
-               aria-controls="{{ div.css_id }}">
-                {{ div.name }}
-            </a>
-        </h5>
-    </div>
-
-    <div id="{{ div.css_id }}" class="collapse{% if div.active %} show{% endif %}" role="tabpanel"
-         aria-labelledby="{{ div.css_id }}" data-parent="#{{ div.data_parent }}">
-        <div class="card-body">
-            {{ fields }}
-        </div>
-    </div>
-</div>
diff --git a/templates/w3/accordion.html b/templates/w3/accordion.html
deleted file mode 100644
index f3a9859..0000000
--- a/templates/w3/accordion.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id="{{ accordion.css_id }}" role="tablist">
-    {{ content }}
-</div>
diff --git a/templates/w3/betterform.html b/templates/w3/betterform.html
deleted file mode 100644
index 4516291..0000000
--- a/templates/w3/betterform.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% for fieldset in form.fieldsets %}
-    <fieldset class="fieldset-{{ forloop.counter }} {{ fieldset.classes }}">
-        {% if fieldset.legend %}
-            <legend>{{ fieldset.legend }}</legend>
-        {% endif %}
-
-        {% if fieldset.description %}
-            <p class="description">{{ fieldset.description }}</p>
-        {% endif %}
-
-        {% for field in fieldset %}
-            {% if field.is_hidden %}
-                {{ field }}
-            {% else %}
-                {% include "w3/field.html" %}
-            {% endif %}
-        {% endfor %}
-    {% if not forloop.last or not fieldset_open %}
-        </fieldset>
-    {% endif %}
-{% endfor %}
diff --git a/templates/w3/display_form.html b/templates/w3/display_form.html
deleted file mode 100644
index 9c891dd..0000000
--- a/templates/w3/display_form.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% if form.form_html %}
-    {% if include_media %}{{ form.media }}{% endif %}
-    {% if form_show_errors %}
-        {% include "w3/errors.html" %}
-    {% endif %}
-    {{ form.form_html }}
-{% else %}
-    {% include "w3/uni_form.html" %}
-{% endif %}
diff --git a/templates/w3/errors.html b/templates/w3/errors.html
deleted file mode 100644
index db09490..0000000
--- a/templates/w3/errors.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% if form.non_field_errors %}
-    <div class="w3-red">
-        {% if form_error_title %}<h4>{{ form_error_title }}</h4>{% endif %}
-        <ul>
-            {{ form.non_field_errors|unordered_list }}
-        </ul>
-    </div>
-{% endif %}
diff --git a/templates/w3/errors_formset.html b/templates/w3/errors_formset.html
deleted file mode 100644
index 0382973..0000000
--- a/templates/w3/errors_formset.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% if formset.non_form_errors %}
-    <div class="alert alert-block alert-danger">
-        {% if formset_error_title %}<h4 class="alert-heading">{{ formset_error_title }}</h4>{% endif %}
-        <ul class="m-0">
-            {{ formset.non_form_errors|unordered_list }}
-        </ul>
-    </div>
-{% endif %}
diff --git a/templates/w3/field.html b/templates/w3/field.html
deleted file mode 100644
index f73441f..0000000
--- a/templates/w3/field.html
+++ /dev/null
@@ -1,81 +0,0 @@
-{% load crispy_forms_field %}
-
-{% if field.is_hidden %}
-    {{ field }}
-{% else %}
-    {% if field|is_checkbox %}
-        <div class="w3-input">
-        {% if label_class %}
-            <div class="{% for offset in bootstrap_checkbox_offsets %}{{ offset }} {% endfor %}{{ field_class }}">
-        {% endif %}
-    {% endif %}
-    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if not field|is_checkbox %}w3-input{% if 'form-horizontal' in form_class %} row{% endif %}{% else %}{%if use_custom_control%}{% if tag != 'td' %}custom-control {%endif%} custom-checkbox{% else %}form-check{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
-        {% if field.label and not field|is_checkbox and form_show_labels %}
-        {# not field|is_radioselect in row below can be removed once Django 3.2 is no longer supported #}
-        <label {% if field.id_for_label and not field|is_radioselect %}for="{{ field.id_for_label }}" {% endif %}class="{% if 'form-horizontal' in form_class %}col-form-label {% endif %}{{ label_class }}{% if field.field.required %} requiredField{% endif %}">
-                {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-            </label>
-        {% endif %}
-
-        {% if field|is_checkboxselectmultiple %}
-            {% include 'w3/layout/checkboxselectmultiple.html' %}
-        {% endif %}
-
-        {% if field|is_radioselect %}
-            {% include 'w3/layout/radioselect.html' %}
-        {% endif %}
-
-        {% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
-            {% if field|is_checkbox and form_show_labels %}
-                {%if use_custom_control%}
-                    {% if field.errors %}
-                        {% crispy_field field 'class' 'custom-control-input is-invalid' %}
-                    {% else %}
-                        {% crispy_field field 'class' 'custom-control-input' %}
-                    {% endif %}
-                {% else %}
-                    {% if field.errors %}
-                        {% crispy_field field 'class' 'form-check-input is-invalid' %}
-                    {% else %}
-                        {% crispy_field field 'class' 'form-check-input' %}
-                    {% endif %}
-                {% endif %}
-                <label for="{{ field.id_for_label }}" class="{%if use_custom_control%}custom-control-label{% else %}form-check-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
-                    {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-                </label>
-                {% include 'w3/layout/help_text_and_errors.html' %}
-            {% elif field|is_file and use_custom_control  %}
-                {% include 'w3/layout/field_file.html' %}
-            {% else %}
-                <div{% if field_class %} class="{{ field_class }}"{% endif %}>
-                    {% if field|is_select and use_custom_control %}
-                        {% if field.errors %}
-                            {% crispy_field field 'class' 'custom-select is-invalid' %}
-                        {% else %}
-                            {% crispy_field field 'class' 'custom-select' %}
-                        {% endif %}
-                    {% elif field|is_file %}
-                        {% if field.errors %}
-                            {% crispy_field field 'class' 'form-control-file is-invalid' %}
-                        {% else %}
-                            {% crispy_field field 'class' 'form-control-file' %}
-                        {% endif %}
-                    {% else %}
-                        {% if field.errors %}
-                            {% crispy_field field 'class' 'form-control is-invalid' %}
-                        {% else %}
-                            {% crispy_field field 'class' 'form-control' %}
-                        {% endif %}
-                    {% endif %}
-                    {% include 'w3/layout/help_text_and_errors.html' %}
-                </div>
-            {% endif %}
-        {% endif %}
-    </{% if tag %}{{ tag }}{% else %}div{% endif %}>
-    {% if field|is_checkbox %}
-        {% if label_class %}
-            </div>
-        {% endif %}
-        </div>
-    {% endif %}
-{% endif %}
diff --git a/templates/w3/inputs.html b/templates/w3/inputs.html
deleted file mode 100644
index 250031c..0000000
--- a/templates/w3/inputs.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% if inputs %}
-    <div class="w3-input">
-        {% if label_class %}
-            <div class="aab {{ label_class }}"></div>
-        {% endif %}
-
-        <div class="{{ field_class }}">
-            {% for input in inputs %}
-                {% include "w3/layout/baseinput.html" %}
-            {% endfor %}
-        </div>
-    </div>
-{% endif %}
diff --git a/templates/w3/layout/alert.html b/templates/w3/layout/alert.html
deleted file mode 100644
index ba20ae9..0000000
--- a/templates/w3/layout/alert.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div{% if alert.css_id %} id="{{ alert.css_id }}"{% endif %}{% if alert.css_class %} class="{{ alert.css_class }}"{% endif %}>
-    {% if dismiss %}<button type="button" class="close" data-dismiss="alert">&times;</button>{% endif %}
-    {{ content }}
-</div>
diff --git a/templates/w3/layout/attrs.html b/templates/w3/layout/attrs.html
deleted file mode 100644
index c52de9e..0000000
--- a/templates/w3/layout/attrs.html
+++ /dev/null
@@ -1 +0,0 @@
-{% for name, value in widget.attrs.items %}{% if value is not False %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}
diff --git a/templates/w3/layout/baseinput.html b/templates/w3/layout/baseinput.html
deleted file mode 100644
index ffde644..0000000
--- a/templates/w3/layout/baseinput.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<input type="{{ input.input_type }}"
-    name="{% if input.name|wordcount > 1 %}{{ input.name|slugify }}{% else %}{{ input.name }}{% endif %}"
-    value="{{ input.value }}"
-    {% if input.input_type != "hidden" %}
-        class="{{ input.field_classes }}"
-        id="{{ input.id }}"
-    {% endif %}
-    {{ input.flat_attrs }}
-    />
diff --git a/templates/w3/layout/button.html b/templates/w3/layout/button.html
deleted file mode 100644
index f41f9cf..0000000
--- a/templates/w3/layout/button.html
+++ /dev/null
@@ -1 +0,0 @@
-<button {{ button.flat_attrs }}>{{ button.content }}</button>
diff --git a/templates/w3/layout/buttonholder.html b/templates/w3/layout/buttonholder.html
deleted file mode 100644
index bad9405..0000000
--- a/templates/w3/layout/buttonholder.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div {% if buttonholder.css_id %}id="{{ buttonholder.css_id }}"{% endif %}
-    class="buttonHolder{% if buttonholder.css_class %} {{ buttonholder.css_class }}{% endif %}">
-       {{ fields_output }}
-</div>
diff --git a/templates/w3/layout/checkboxselectmultiple.html b/templates/w3/layout/checkboxselectmultiple.html
deleted file mode 100644
index c943fc4..0000000
--- a/templates/w3/layout/checkboxselectmultiple.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{% load crispy_forms_filters %}
-{% load l10n %}
-
-<div {% if field_class %}class="{{ field_class }}"{% endif %}{% if flat_attrs %} {{ flat_attrs }}{% endif %}>
-
-    {% for group, options, index in field|optgroups %}
-    {% if group %}<strong>{{ group }}</strong>{% endif %}
-    {% for option in options %}
-    <div class="{%if use_custom_control%}custom-control custom-checkbox{% if inline_class %} custom-control-inline{% endif %}{% else %}form-check{% if inline_class %} form-check-inline{% endif %}{% endif %}">
-        <input type="checkbox" class="{%if use_custom_control%}custom-control-input{% else %}form-check-input{% endif %}{% if field.errors %} is-invalid{% endif %}" name="{{ field.html_name }}" value="{{ option.value|unlocalize }}" {% include "w3/layout/attrs.html" with widget=option %}>
-        <label class="{%if use_custom_control%}custom-control-label{% else %}form-check-label{% endif %}" for="{{ option.attrs.id }}">
-            {{ option.label|unlocalize }}
-        </label>
-        {% if field.errors and forloop.last and not inline_class and forloop.parentloop.last %}
-            {% include 'w3/layout/field_errors_block.html' %}
-            {% endif %}
-    </div>
-   {% endfor %}
-   {% endfor %}
-    {% if field.errors and inline_class %}
-    <div class="w-100 {%if use_custom_control%}custom-control custom-checkbox{% if inline_class %} custom-control-inline{% endif %}{% else %}form-check{% if inline_class %} form-check-inline{% endif %}{% endif %}">
-        {# the following input is only meant to allow boostrap to render the error message as it has to be after an invalid input. As the input has no name, no data will be sent. #}
-        <input type="checkbox" class="custom-control-input {% if field.errors %}is-invalid{%endif%}">
-        {% include 'w3/layout/field_errors_block.html' %}
-    </div>
-    {% endif %}
-
-    {% include 'w3/layout/help_text.html' %}
-</div>
diff --git a/templates/w3/layout/checkboxselectmultiple_inline.html b/templates/w3/layout/checkboxselectmultiple_inline.html
deleted file mode 100644
index 10f0e9e..0000000
--- a/templates/w3/layout/checkboxselectmultiple_inline.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% if field.is_hidden %}
-    {{ field }}
-{% else %}
-    <div id="div_{{ field.auto_id }}" class="form-group{% if 'form-horizontal' in form_class %} row{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
-
-        {% if field.label %}
-            <label {% if field.id_for_label %}for="{{ field.id_for_label }}" {% endif %} class="{{ label_class }}{% if not inline_class %} col-form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
-                {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-            </label>
-        {% endif %}
-
-        {% include 'w3/layout/checkboxselectmultiple.html' %}
-    </div>
-{% endif %}
diff --git a/templates/w3/layout/column.html b/templates/w3/layout/column.html
deleted file mode 100644
index e372c38..0000000
--- a/templates/w3/layout/column.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div {% if div.css_id %}id="{{ div.css_id }}"{% endif %}
-     class="{% if 'col' in div.css_class %}{{ div.css_class|default:'' }}{% else %}col-md {{ div.css_class|default:'' }}{% endif %}" {{ div.flat_attrs }}>
-        {{ fields }}
-</div>
diff --git a/templates/w3/layout/div.html b/templates/w3/layout/div.html
deleted file mode 100644
index 1651ddc..0000000
--- a/templates/w3/layout/div.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div {% if div.css_id %}id="{{ div.css_id }}"{% endif %}
-    {% if div.css_class %}class="{{ div.css_class }}"{% endif %} {{ div.flat_attrs }}>
-        {{ fields }}
-</div>
diff --git a/templates/w3/layout/field_errors.html b/templates/w3/layout/field_errors.html
deleted file mode 100644
index f649872..0000000
--- a/templates/w3/layout/field_errors.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% if form_show_errors and field.errors %}
-    {% for error in field.errors %}
-        <span id="error_{{ forloop.counter }}_{{ field.auto_id }}" class="invalid-feedback"><strong>{{ error }}</strong></span>
-    {% endfor %}
-{% endif %}
diff --git a/templates/w3/layout/field_errors_block.html b/templates/w3/layout/field_errors_block.html
deleted file mode 100644
index e788b79..0000000
--- a/templates/w3/layout/field_errors_block.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% if form_show_errors and field.errors %}
-    {% for error in field.errors %}
-        <p id="error_{{ forloop.counter }}_{{ field.auto_id }}" class="invalid-feedback"><strong>{{ error }}</strong></p>
-    {% endfor %}
-{% endif %}
diff --git a/templates/w3/layout/field_file.html b/templates/w3/layout/field_file.html
deleted file mode 100644
index f58268a..0000000
--- a/templates/w3/layout/field_file.html
+++ /dev/null
@@ -1,52 +0,0 @@
-{% load crispy_forms_field %}
-
-<div class="{{ field_class }} mb-2">
-{% for widget in field.subwidgets %}
-{% if widget.data.is_initial %}
-<div class="input-group mb-2">
-    <div class="input-group-prepend">
-        <span class="input-group-text">{{ widget.data.initial_text }}</span>
-    </div>
-    <div class="form-control d-flex h-auto">
-        <span class="text-break" style="flex-grow:1;min-width:0">
-        <a href="{{ field.value.url }}">{{ field.value }}</a>
-        </span>
-        {% if not widget.data.required %}
-        <span class="align-self-center ml-2">
-            <span class="custom-control custom-checkbox">
-                <input type="checkbox" name="{{ widget.data.checkbox_name }}" id="{{ widget.data.checkbox_id }}" class="custom-control-input"{% if field.field.disabled %} disabled{% endif %} >
-                <label class="custom-control-label mb-0" for="{{ widget.data.checkbox_id }}">{{ widget.data.clear_checkbox_label }}</label>
-            </span>
-        </span>
-    {% endif %}
-    </div>
-</div>
-<div class="input-group mb-0">
-    <div class="input-group-prepend">
-        <span class="input-group-text">{{ widget.data.input_text }}</span>
-    </div>
-{% endif %}
-    <div class="form-control custom-file{% if field.errors %} is-invalid{%endif%}" style="border:0">
-        <input type="{{ widget.data.type }}" name="{{ widget.data.name }}" class="custom-file-input{% if widget.data.attrs.class %} {{ widget.data.attrs.class }}{% endif %}{% if field.errors %} is-invalid{%endif%}"{% if field.field.disabled %} disabled{% endif %}{% for name, value in widget.data.attrs.items %}{% if value is not False and name != 'class' %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}>
-        <label class="custom-file-label text-truncate" for="{{ field.id_for_label }}">---</label>
-        <script type="text/javascript" id="script-{{ field.id_for_label }}">
-            document.getElementById("script-{{ field.id_for_label }}").parentNode.querySelector('.custom-file-input').onchange =  function (e){
-                var filenames = "";
-                for (let i=0;i<e.target.files.length;i++){
-                    filenames+=(i>0?", ":"")+e.target.files[i].name;
-                }
-                e.target.parentNode.querySelector('.custom-file-label').textContent=filenames;
-            }
-        </script>
-    </div>
-    {% if not widget.data.is_initial %}
-    {% include 'w3/layout/help_text_and_errors.html' %}
-    {% endif %}
-{% if widget.data.is_initial %}
-</div>
-<div class="input-group mb-0">
-{% include 'w3/layout/help_text_and_errors.html' %}
-</div>
-{% endif %}
-{% endfor %}
-</div>
diff --git a/templates/w3/layout/field_with_buttons.html b/templates/w3/layout/field_with_buttons.html
deleted file mode 100644
index 234b310..0000000
--- a/templates/w3/layout/field_with_buttons.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% load crispy_forms_field %}
-
-<div{% if div.css_id %} id="{{ div.css_id }}"{% endif %} class="form-group{% if 'form-horizontal' in form_class %} row{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}{% if div.css_class %} {{ div.css_class }}{% endif %}" {{ div.flat_attrs }}>
-    {% if field.label and form_show_labels %}
-        <label for="{{ field.id_for_label }}" class="{% if 'form-horizontal' in form_class %}col-form-label {% endif %}{{ label_class }}{% if field.field.required %} requiredField{% endif %}">
-            {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-        </label>
-    {% endif %}
-
-    <div class="{{ field_class }}">
-        <div class="input-group {% if div.input_size %} {{ div.input_size }}{% endif %}">
-            {% crispy_field field 'class' 'form-control' %}
-            <span class="input-group-append{% if active %} active{% endif %}">{{ buttons }}</span>
-        </div>
-        {% include 'w3/layout/help_text_and_errors.html' %}
-    </div>
-</div>
diff --git a/templates/w3/layout/fieldset.html b/templates/w3/layout/fieldset.html
deleted file mode 100644
index 85ae30b..0000000
--- a/templates/w3/layout/fieldset.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<fieldset {% if fieldset.css_id %}id="{{ fieldset.css_id }}"{% endif %}
-    {% if fieldset.css_class%}class="{{ fieldset.css_class }}"{% endif %}
-    {{ fieldset.flat_attrs }}>
-    {% if legend %}<legend>{{ legend }}</legend>{% endif %}
-    {{ fields }}
-</fieldset>
diff --git a/templates/w3/layout/formactions.html b/templates/w3/layout/formactions.html
deleted file mode 100644
index 04fed0b..0000000
--- a/templates/w3/layout/formactions.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div{% if formactions.flat_attrs %} {{ formactions.flat_attrs }}{% endif %} class="form-group{% if 'form-horizontal' in form_class %} row{% endif %} {{ formactions.css_class }}" {% if formactions.id %} id="{{ formactions.id }}"{% endif %}>
-    {% if label_class %}
-        <div class="aab {{ label_class }}"></div>
-    {% endif %}
-
-    <div class="{{ field_class }}">
-        {{ fields_output }}
-    </div>
-</div>
diff --git a/templates/w3/layout/help_text.html b/templates/w3/layout/help_text.html
deleted file mode 100644
index 3b5695c..0000000
--- a/templates/w3/layout/help_text.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% if field.help_text %}
-    {% if help_text_inline %}
-        <span id="hint_{{ field.auto_id }}" class="text-muted">{{ field.help_text|safe }}</span>
-    {% else %}
-        <small id="hint_{{ field.auto_id }}" class="form-text text-muted">{{ field.help_text|safe }}</small>
-    {% endif %}
-{% endif %}
diff --git a/templates/w3/layout/help_text_and_errors.html b/templates/w3/layout/help_text_and_errors.html
deleted file mode 100644
index 7313246..0000000
--- a/templates/w3/layout/help_text_and_errors.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% if help_text_inline and not error_text_inline %}
-    {% include 'w3/layout/help_text.html' %}
-{% endif %}
-
-{% if error_text_inline %}
-    {% include 'w3/layout/field_errors.html' %}
-{% else %}
-    {% include 'w3/layout/field_errors_block.html' %}
-{% endif %}
-
-{% if not help_text_inline %}
-    {% include 'w3/layout/help_text.html' %}
-{% endif %}
diff --git a/templates/w3/layout/inline_field.html b/templates/w3/layout/inline_field.html
deleted file mode 100644
index aff23bb..0000000
--- a/templates/w3/layout/inline_field.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{% load crispy_forms_field %}
-
-{% if field.is_hidden %}
-    {{ field }}
-{% else %}
-    {% if field|is_checkbox %}
-        <div id="div_{{ field.auto_id }}" class="form-check form-check-inline{% if wrapper_class %} {{ wrapper_class }}{% endif %}">
-            <label for="{{ field.id_for_label }}" class="form-check-label{% if field.field.required %} requiredField{% endif %}">
-                {% if field.errors %}
-                    {% crispy_field field 'class' 'form-check-input is-invalid' %}
-                {% else %}
-                    {% crispy_field field 'class' 'form-check-input' %}
-                {% endif %}
-                {{ field.label }}
-            </label>
-        </div>
-    {% else %}
-        <div id="div_{{ field.auto_id }}" class="input-group{% if wrapper_class %} {{ wrapper_class }}{% endif %}">
-            <label for="{{ field.id_for_label }}" class="sr-only{% if field.field.required %} requiredField{% endif %}">
-                {{ field.label }}
-            </label>
-            {% if field.errors %}
-                {% crispy_field field 'placeholder' field.label 'class' 'form-control is-invalid' %}
-            {% else %}
-                {% crispy_field field 'placeholder' field.label 'class' 'form-control' %}
-            {% endif %}
-        </div>
-    {% endif %}
-{% endif %}
diff --git a/templates/w3/layout/modal.html b/templates/w3/layout/modal.html
deleted file mode 100644
index ab18198..0000000
--- a/templates/w3/layout/modal.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div id="{{ modal.css_id }}" class="modal fade {{ modal.css_class }}" {{ modal.flat_attrs }}>
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title {{ modal.title_class }}" id="{{ modal.title_id }}">{{ modal.title }}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true" style="float: left">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                {{ fields }}
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/templates/w3/layout/multifield.html b/templates/w3/layout/multifield.html
deleted file mode 100644
index 0a2c050..0000000
--- a/templates/w3/layout/multifield.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% load crispy_forms_field %}
-
-{% if field.is_hidden %}
-    {{ field }}
-{% else %}
-
-    {% if field.label %}
-        <label for="{{ field.id_for_label }}"{% if labelclass %} class="{{ labelclass }}"{% endif %}>
-    {% endif %}
-
-    {% if field|is_checkbox %}
-        {% crispy_field field %}
-    {% endif %}
-
-    {% if field.label %}
-        {{ field.label }}
-    {% endif %}
-
-    {% if not field|is_checkbox %}
-        {% crispy_field field %}
-    {% endif %}
-
-    {% if field.label %}
-        </label>
-    {% endif %}
-
-{% endif %}
diff --git a/templates/w3/layout/prepended_appended_text.html b/templates/w3/layout/prepended_appended_text.html
deleted file mode 100644
index 1cccf79..0000000
--- a/templates/w3/layout/prepended_appended_text.html
+++ /dev/null
@@ -1,51 +0,0 @@
-{% load crispy_forms_field %}
-
-{% if field.is_hidden %}
-    {{ field }}
-{% else %}
-    <div id="div_{{ field.auto_id }}" class="form-group{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if 'form-horizontal' in form_class %} row{% endif %}{% if form_group_wrapper_class %} {{ form_group_wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
-
-        {% if field.label and form_show_labels %}
-            <label for="{{ field.id_for_label }}" class="{% if 'form-horizontal' in form_class %}col-form-label {% endif %}{{ label_class }}{% if field.field.required %} requiredField{% endif %}">
-                {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-            </label>
-        {% endif %}
-
-        <div class="{{ field_class }}">
-            <div class="input-group{% if input_size %} {{ input_size }}{% endif %}">
-                {% if crispy_prepended_text %}
-                  <div class="input-group-prepend{% if active %} active{% endif %}">
-                    <span class="input-group-text">{{ crispy_prepended_text }}</span>
-                  </div>
-                {% endif %}
-                {% if field|is_select and use_custom_control %}
-                    {% if field.errors %}
-                        {% crispy_field field 'class' 'custom-select is-invalid' %}
-                    {% else %}
-                        {% crispy_field field 'class' 'custom-select' %}
-                    {% endif %}
-                {% else %}
-                    {% if field.errors %}
-                        {% crispy_field field 'class' 'form-control is-invalid' %}
-                    {% else %}
-                        {% crispy_field field 'class' 'form-control' %}
-                    {% endif %}
-                {% endif %}
-                {% if crispy_appended_text %}
-                  <div class="input-group-append{% if active %} active{% endif %}">
-                    <span class="input-group-text">{{ crispy_appended_text }}</span>
-                  </div>
-                {% endif %}
-                {% if error_text_inline %}
-                    {% include 'w3/layout/field_errors.html' %}
-                {% else %}
-                    {% include 'w3/layout/field_errors_block.html' %}
-                {% endif %}
-            </div>
-        {% if not help_text_inline %}
-            {% include 'w3/layout/help_text.html' %}
-        {% endif %}
-        </div>
-
-    </div>
-{% endif %}
diff --git a/templates/w3/layout/radioselect.html b/templates/w3/layout/radioselect.html
deleted file mode 100644
index d9c9e5a..0000000
--- a/templates/w3/layout/radioselect.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{% load crispy_forms_filters %}
-{% load l10n %}
-
-<div {% if field_class %}class="{{ field_class }}"{% endif %}{% if flat_attrs %} {{ flat_attrs }}{% endif %}>
-
-    {% for group, options, index in field|optgroups %}
-    {% if group %}<strong>{{ group }}</strong>{% endif %}
-    {% for option in options %}
-      <div class="{%if use_custom_control%}custom-control custom-radio{% if inline_class %} custom-control-inline{% endif %}{% else %}form-check{% if inline_class %} form-check-inline{% endif %}{% endif %}">
-        <input type="radio" class="{%if use_custom_control%}custom-control-input{% else %}form-check-input{% endif %}{% if field.errors %} is-invalid{% endif %}" name="{{ field.html_name }}" value="{{ option.value|unlocalize }}" {% include "w3/layout/attrs.html" with widget=option %}>
-        <label class="{%if use_custom_control%}custom-control-label{% else %}form-check-label{% endif %}" for="{{ option.attrs.id }}">
-            {{ option.label|unlocalize }}
-        </label>
-        {% if field.errors and forloop.last and not inline_class and forloop.parentloop.last %}
-            {% include 'w3/layout/field_errors_block.html' %}
-        {% endif %}
-     </div>
-    {% endfor %}
-    {% endfor %}
-    {% if field.errors and inline_class %}
-    <div class="w-100 {%if use_custom_control%}custom-control custom-radio{% if inline_class %} custom-control-inline{% endif %}{% else %}form-check{% if inline_class %} form-check-inline{% endif %}{% endif %}">
-        {# the following input is only meant to allow boostrap to render the error message as it has to be after an invalid input. As the input has no name, no data will be sent. #}
-        <input type="checkbox" class="custom-control-input {% if field.errors %}is-invalid{%endif%}">
-        {% include 'w3/layout/field_errors_block.html' %}
-    </div>
-    {% endif %}
-
-    {% include 'w3/layout/help_text.html' %}
-</div>
diff --git a/templates/w3/layout/radioselect_inline.html b/templates/w3/layout/radioselect_inline.html
deleted file mode 100644
index 22ba321..0000000
--- a/templates/w3/layout/radioselect_inline.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% if field.is_hidden %}
-    {{ field }}
-{% else %}
-    <div id="div_{{ field.auto_id }}" class="form-group{% if 'form-horizontal' in form_class %} row{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
-
-        {% if field.label %}
-            <label {% if field.id_for_label %}for="{{ field.id_for_label }}" {% endif %}class="{{ label_class }}{% if not inline_class %} col-form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
-                {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-            </label>
-        {% endif %}
-
-        {% include 'w3/layout/radioselect.html' %}
-    </div>
-{% endif %}
diff --git a/templates/w3/layout/row.html b/templates/w3/layout/row.html
deleted file mode 100644
index 6922605..0000000
--- a/templates/w3/layout/row.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div {% if div.css_id %}id="{{ div.css_id }}"{% endif %} class="form-row {{ div.css_class|default:'' }}" {{ div.flat_attrs }}>
-        {{ fields }}
-</div>
diff --git a/templates/w3/layout/tab-link.html b/templates/w3/layout/tab-link.html
deleted file mode 100644
index 8f68f7c..0000000
--- a/templates/w3/layout/tab-link.html
+++ /dev/null
@@ -1 +0,0 @@
-<li class="nav-item"><a class="nav-link{% if 'active' in link.css_class %} active{% endif %}" href="#{{ link.css_id }}" data-toggle="tab">{{ link.name|capfirst }}{% if tab.errors %}!{% endif %}</a></li>
diff --git a/templates/w3/layout/tab.html b/templates/w3/layout/tab.html
deleted file mode 100644
index 59a03bd..0000000
--- a/templates/w3/layout/tab.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<ul{% if tabs.css_id %} id="{{ tabs.css_id }}"{% endif %} class="nav nav-tabs">
-    {{ links }}
-</ul>
-<div class="tab-content card-body">
-    {{ content }}
-</div>
diff --git a/templates/w3/layout/uneditable_input.html b/templates/w3/layout/uneditable_input.html
deleted file mode 100644
index 0af45e4..0000000
--- a/templates/w3/layout/uneditable_input.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% load crispy_forms_field %}
-<div id="div_{{ field.auto_id }}" class="form-group{% if 'form-horizontal' in form_class %} row{% endif %}{% if form_show_errors and field.errors %} error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
-    <label class="{% if 'form-horizontal' in form_class %}col-form-label {% endif %}{{ label_class }}{% if field.field.required %} requiredField{% endif %}">{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label>
-    <div class="{{ field_class }}">
-        {% if field|is_select and use_custom_control %}
-            {% crispy_field field 'class' 'custom-select' 'disabled' 'disabled' %}
-        {% elif field|is_file %}
-            {% crispy_field field 'class' 'form-control-file' 'disabled' 'disabled' %}
-        {% else %}
-            {% crispy_field field 'class' 'form-control' 'disabled' 'disabled' %}
-        {% endif %}
-        {% include 'w3/layout/help_text.html' %}
-    </div>
-</div>
diff --git a/templates/w3/table_inline_formset.html b/templates/w3/table_inline_formset.html
deleted file mode 100644
index a4b951d..0000000
--- a/templates/w3/table_inline_formset.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{% load crispy_forms_tags %}
-{% load crispy_forms_utils %}
-{% load crispy_forms_field %}
-
-{% specialspaceless %}
-{% if formset_tag %}
-<form {{ flat_attrs }} method="{{ form_method }}" {% if formset.is_multipart %} enctype="multipart/form-data"{% endif %}>
-{% endif %}
-    {% if formset_method|lower == 'post' and not disable_csrf %}
-        {% csrf_token %}
-    {% endif %}
-
-    <div>
-        {{ formset.management_form|crispy }}
-    </div>
-
-    <table{% if form_id %} id="{{ form_id }}_table"{% endif%} class="table table-striped table-sm">
-        <thead>
-            {% if formset.readonly and not formset.queryset.exists %}
-            {% else %}
-                <tr>
-                    {% for field in formset.forms.0 %}
-                        {% if field.label and not field.is_hidden %}
-                            <th for="{{ field.auto_id }}" class="col-form-label {% if field.field.required %}requiredField{% endif %}">
-                                {{ field.label }}{% if field.field.required and not field|is_checkbox %}<span class="asteriskField">*</span>{% endif %}
-                            </th>
-                        {% endif %}
-                    {% endfor %}
-                </tr>
-            {% endif %}
-        </thead>
-
-        <tbody>
-            <tr class="d-none empty-form">
-                {% for field in formset.empty_form %}
-                    {% include 'w3/field.html' with tag="td" form_show_labels=False %}
-                {% endfor %}
-            </tr>
-
-            {% for form in formset %}
-                {% if form_show_errors and not form.is_extra %}
-                    {% include "w3/errors.html" %}
-                {% endif %}
-
-                <tr>
-                    {% for field in form %}
-                        {% include 'w3/field.html' with tag="td" form_show_labels=False %}
-                    {% endfor %}
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-
-    {% include "w3/inputs.html" %}
-
-{% if formset_tag %}</form>{% endif %}
-{% endspecialspaceless %}
diff --git a/templates/w3/uni_form.html b/templates/w3/uni_form.html
deleted file mode 100644
index 6b63a3f..0000000
--- a/templates/w3/uni_form.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% load crispy_forms_utils %}
-
-{% specialspaceless %}
-    {% if include_media %}{{ form.media }}{% endif %}
-    {% if form_show_errors %}
-        {% include "w3/errors.html" %}
-    {% endif %}
-    {% for field in form %}
-        {% include field_template %}
-    {% endfor %}
-{% endspecialspaceless %}
diff --git a/templates/w3/uni_formset.html b/templates/w3/uni_formset.html
deleted file mode 100644
index 5c6cd36..0000000
--- a/templates/w3/uni_formset.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% with formset.management_form as form %}
-    {% include 'w3/uni_form.html' %}
-{% endwith %}
-{% for form in formset %}
-    <div class="multiField">
-        {% include 'w3/uni_form.html' %}
-    </div>
-{% endfor %}
diff --git a/templates/w3/whole_uni_form.html b/templates/w3/whole_uni_form.html
deleted file mode 100644
index df71b0b..0000000
--- a/templates/w3/whole_uni_form.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% load crispy_forms_utils %}
-
-{% specialspaceless %}
-{% if form_tag %}<form {{ flat_attrs }} method="{{ form_method }}" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>{% endif %}
-    {% if form_method|lower == 'post' and not disable_csrf %}
-        {% csrf_token %}
-    {% endif %}
-
-    {% include "w3/display_form.html" %}
-
-    {% include "w3/inputs.html" %}
-
-{% if form_tag %}</form>{% endif %}
-{% endspecialspaceless %}
diff --git a/templates/w3/whole_uni_formset.html b/templates/w3/whole_uni_formset.html
deleted file mode 100644
index ba40759..0000000
--- a/templates/w3/whole_uni_formset.html
+++ /dev/null
@@ -1,30 +0,0 @@
-{% load crispy_forms_tags %}
-{% load crispy_forms_utils %}
-
-{% specialspaceless %}
-{% if formset_tag %}
-<form {{ flat_attrs }} method="{{ form_method }}" {% if formset.is_multipart %} enctype="multipart/form-data"{% endif %}>
-{% endif %}
-    {% if formset_method|lower == 'post' and not disable_csrf %}
-        {% csrf_token %}
-    {% endif %}
-
-    <div>
-        {{ formset.management_form|crispy }}
-    </div>
-
-    {% include "w3/errors_formset.html" %}
-
-    {% for form in formset %}
-        {% include "w3/display_form.html" %}
-    {% endfor %}
-
-    {% if inputs %}
-        <div class="form-actions">
-            {% for input in inputs %}
-                {% include "w3/layout/baseinput.html" %}
-            {% endfor %}
-        </div>
-    {% endif %}
-{% if formset_tag %}</form>{% endif %}
-{% endspecialspaceless %}