diff --git a/TalentBlazor/Data/ApplicationDbContext.cs b/TalentBlazor.ServiceInterface/Data/ApplicationDbContext.cs
similarity index 65%
rename from TalentBlazor/Data/ApplicationDbContext.cs
rename to TalentBlazor.ServiceInterface/Data/ApplicationDbContext.cs
index 828be16..c9e2a69 100644
--- a/TalentBlazor/Data/ApplicationDbContext.cs
+++ b/TalentBlazor.ServiceInterface/Data/ApplicationDbContext.cs
@@ -1,9 +1,9 @@
 using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore;
-using TalentBlazor.ServiceModel;
 
 namespace TalentBlazor.Data;
 
-public class ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : IdentityDbContext<ApplicationUser>(options)
+public class ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
+    : IdentityDbContext<ApplicationUser>(options)
 {
-}
+}
\ No newline at end of file
diff --git a/TalentBlazor.ServiceInterface/Data/CustomUserSession.cs b/TalentBlazor.ServiceInterface/Data/CustomUserSession.cs
new file mode 100644
index 0000000..84c4adf
--- /dev/null
+++ b/TalentBlazor.ServiceInterface/Data/CustomUserSession.cs
@@ -0,0 +1,42 @@
+using System.Security.Claims;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.Extensions.Options;
+using ServiceStack;
+using ServiceStack.Web;
+
+namespace TalentBlazor.Data;
+
+public class CustomUserSession : AuthUserSession
+{
+    public override void PopulateFromClaims(IRequest httpReq, ClaimsPrincipal principal)
+    {
+        // Populate Session with data from Identity Auth Claims
+        ProfileUrl = principal.FindFirstValue(JwtClaimTypes.Picture);
+    }
+}
+
+/// <summary>
+/// Add additional claims to the Identity Auth Cookie
+/// </summary>
+public class AdditionalUserClaimsPrincipalFactory(
+    UserManager<ApplicationUser> userManager,
+    RoleManager<IdentityRole> roleManager,
+    IOptions<IdentityOptions> optionsAccessor)
+    : UserClaimsPrincipalFactory<ApplicationUser,IdentityRole>(userManager, roleManager, optionsAccessor)
+{
+    public override async Task<ClaimsPrincipal> CreateAsync(ApplicationUser user)
+    {
+        var principal = await base.CreateAsync(user);
+        var identity = (ClaimsIdentity)principal.Identity!;
+
+        var claims = new List<Claim>();
+        // Add additional claims here
+        if (user.ProfileUrl != null)
+        {
+            claims.Add(new Claim(JwtClaimTypes.Picture, user.ProfileUrl));
+        }
+
+        identity.AddClaims(claims);
+        return principal;
+    }
+}
diff --git a/TalentBlazor.ServiceInterface/TalentBlazor.ServiceInterface.csproj b/TalentBlazor.ServiceInterface/TalentBlazor.ServiceInterface.csproj
index 417e025..a91d50f 100644
--- a/TalentBlazor.ServiceInterface/TalentBlazor.ServiceInterface.csproj
+++ b/TalentBlazor.ServiceInterface/TalentBlazor.ServiceInterface.csproj
@@ -7,6 +7,8 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.*" />
+        <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.*" />
         <PackageReference Include="ServiceStack" Version="8.*" />
         <PackageReference Include="ServiceStack.Ormlite" Version="8.*" />
         <PackageReference Include="ServiceStack.Server" Version="8.*" />
diff --git a/TalentBlazor.ServiceModel/AppUser.cs b/TalentBlazor.ServiceModel/ApplicationUser.cs
similarity index 91%
rename from TalentBlazor.ServiceModel/AppUser.cs
rename to TalentBlazor.ServiceModel/ApplicationUser.cs
index bb87ac6..3f7704f 100644
--- a/TalentBlazor.ServiceModel/AppUser.cs
+++ b/TalentBlazor.ServiceModel/ApplicationUser.cs
@@ -5,8 +5,9 @@
 using System.Collections.Generic;
 using System.Runtime.Serialization;
 using Microsoft.AspNetCore.Identity;
+using TalentBlazor.ServiceModel;
 
-namespace TalentBlazor.ServiceModel;
+namespace TalentBlazor.Data;
 
 [Icon(Svg = Icons.AppUser)]
 [Alias("AspNetUsers")]
@@ -21,4 +22,3 @@ public class ApplicationUser : IdentityUser
     [Input(Type = "file"), UploadTo("users")]
     public string? ProfileUrl { get; set; }
 }
-
diff --git a/TalentBlazor.ServiceModel/Talent.cs b/TalentBlazor.ServiceModel/Talent.cs
index 9da509e..1d0de40 100644
--- a/TalentBlazor.ServiceModel/Talent.cs
+++ b/TalentBlazor.ServiceModel/Talent.cs
@@ -2,6 +2,7 @@
 using ServiceStack.DataAnnotations;
 using System;
 using System.Collections.Generic;
+using TalentBlazor.Data;
 
 namespace TalentBlazor.ServiceModel;
 
diff --git a/TalentBlazor.ServiceModel/TalentBlazor.ServiceModel.csproj b/TalentBlazor.ServiceModel/TalentBlazor.ServiceModel.csproj
index 81cc5db..532bd0e 100644
--- a/TalentBlazor.ServiceModel/TalentBlazor.ServiceModel.csproj
+++ b/TalentBlazor.ServiceModel/TalentBlazor.ServiceModel.csproj
@@ -7,7 +7,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Microsoft.Extensions.Identity.Stores" Version="8.0.0-rc.2.23480.2" />
+        <PackageReference Include="Microsoft.Extensions.Identity.Stores" Version="8.*" />
         <PackageReference Include="ServiceStack.Interfaces" Version="8.*" />
     </ItemGroup>
 
@@ -19,10 +19,4 @@
         <Folder Include="Types\" />
     </ItemGroup>
 
-    <ItemGroup>
-      <Reference Include="Microsoft.Extensions.Identity.Stores">
-        <HintPath>..\..\..\..\..\Program Files\dotnet\shared\Microsoft.AspNetCore.App\8.0.0-rc.2.23480.2\Microsoft.Extensions.Identity.Stores.dll</HintPath>
-      </Reference>
-    </ItemGroup>
-
 </Project>
diff --git a/TalentBlazor/Components/App.razor b/TalentBlazor/Components/App.razor
index ed82668..ad13a02 100644
--- a/TalentBlazor/Components/App.razor
+++ b/TalentBlazor/Components/App.razor
@@ -23,7 +23,7 @@
     <Routes />
     <script src="_framework/blazor.web.js"></script>
     <script src="js/servicestack-blazor.js"></script>
-    <script>JS.init()</script>
+    <script>JS.init({colorScheme:false})</script>
     <script src="lib/js/highlight.js"></script>
     <script>hljs.highlightAll()</script>
 </body>
diff --git a/TalentBlazor/Components/Identity/ExternalLoginPicker.razor b/TalentBlazor/Components/Identity/ExternalLoginPicker.razor
index 8492065..7d43811 100644
--- a/TalentBlazor/Components/Identity/ExternalLoginPicker.razor
+++ b/TalentBlazor/Components/Identity/ExternalLoginPicker.razor
@@ -11,9 +11,9 @@
 {
     <div>
         <p>
-            There are no external authentication services configured. 
-            See this <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?LinkID=532715">article
-            about setting up this ASP.NET application to support logging in via external services</a>.
+            There are no external authentication services configured.
+            See this <HyperLink href="https://go.microsoft.com/fwlink/?LinkID=532715">article
+            about setting up this ASP.NET application to support logging in via external services</HyperLink>.
         </p>
     </div>
 }
@@ -26,7 +26,7 @@ else
             <div class="space-x-2">
                 @foreach (var provider in _externalLogins!)
                 {
-                    <button type="submit" class="@Css.SecondaryButton" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                    <button type="submit" class="@SecondaryButton.Classes" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
                 }
             </div>
         </div>
diff --git a/TalentBlazor/Components/Identity/LogoutForm.razor b/TalentBlazor/Components/Identity/LogoutForm.razor
index e53fce4..1cc0145 100644
--- a/TalentBlazor/Components/Identity/LogoutForm.razor
+++ b/TalentBlazor/Components/Identity/LogoutForm.razor
@@ -33,7 +33,7 @@
         if (SignInManager.IsSignedIn(user))
         {
             await SignInManager.SignOutAsync();
-            RedirectManager.RedirectTo(ReturnUrl ?? "/");
+            RedirectManager.RedirectTo(ReturnUrl ?? "/Account/Logout");
         }
     }
 }
diff --git a/TalentBlazor/Components/Identity/ShowRecoveryCodes.razor b/TalentBlazor/Components/Identity/ShowRecoveryCodes.razor
index f0683d0..41a9bfe 100644
--- a/TalentBlazor/Components/Identity/ShowRecoveryCodes.razor
+++ b/TalentBlazor/Components/Identity/ShowRecoveryCodes.razor
@@ -1,4 +1,4 @@
-<h3 class="@Css.H3">Recovery codes</h3>
+<Heading3>Recovery codes</Heading3>
 <div class="max-w-xl">
     <StatusMessage Message="@StatusMessage" />
 
diff --git a/TalentBlazor/Components/Layout/ManageLayout.razor b/TalentBlazor/Components/Layout/ManageLayout.razor
index 3c8de9c..d1e5c95 100644
--- a/TalentBlazor/Components/Layout/ManageLayout.razor
+++ b/TalentBlazor/Components/Layout/ManageLayout.razor
@@ -1,11 +1,11 @@
 @inherits LayoutComponentBase
 @layout MainLayout
 
-<h1 class="@Css.H1">Manage your account</h1>
 
-<div>
-    <h4 class="font-semibold text-lg my-2">Change your account settings</h4>
-    <hr class="dark:border-gray-700" />
+<div class="mt-8 mx-auto max-w-screen-lg">
+    <Heading1>Manage your account</Heading1>
+    <Heading4>Change your account settings</Heading4>
+    <hr class="mt-4 dark:border-gray-700" />
     <div class="flex flex-wrap">
         <div class="grow-0">
             <ManageNavMenu />
@@ -15,3 +15,4 @@
         </div>
     </div>
 </div>
+
diff --git a/TalentBlazor/Components/Pages/Account/AccessDenied.razor b/TalentBlazor/Components/Pages/Account/AccessDenied.razor
index 77ead44..3300471 100644
--- a/TalentBlazor/Components/Pages/Account/AccessDenied.razor
+++ b/TalentBlazor/Components/Pages/Account/AccessDenied.razor
@@ -3,11 +3,13 @@
 
 <PageTitle>Access Denied</PageTitle>
 
-<h1 class="text-3xl font-bold tracking-tight sm:text-4xl text-danger">Access Denied</h1>
+<div class="mt-8 mx-auto max-w-lg">
+    <h1 class="text-3xl font-bold tracking-tight sm:text-4xl text-danger">Access Denied</h1>
 
-<p class="my-4 text-danger">
-    You do not have access to this resource.
-</p>
+    <p class="my-4 text-danger">
+        You do not have access to this resource.
+    </p>
+</div>
 
 @code {
     [Parameter] public string ReturnUrl { get; set; }
diff --git a/TalentBlazor/Components/Pages/Account/ConfirmEmail.razor b/TalentBlazor/Components/Pages/Account/ConfirmEmail.razor
index 59bbe3e..44bbb8b 100644
--- a/TalentBlazor/Components/Pages/Account/ConfirmEmail.razor
+++ b/TalentBlazor/Components/Pages/Account/ConfirmEmail.razor
@@ -1,4 +1,4 @@
-@page "/Account/ConfirmEmail"
+@page "/Account/ConfirmEmail"
 
 @using System.Text
 @using Microsoft.AspNetCore.Identity
@@ -11,9 +11,9 @@
 
 <PageTitle>Confirm email</PageTitle>
 
-<h1 class="mb-3 @Css.H1">Confirm email</h1>
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Confirm email</Heading1>
 
-<div class="max-w-xl">
     <StatusMessage Message="@statusMessage" />
 </div>
 
diff --git a/TalentBlazor/Components/Pages/Account/ConfirmEmailChange.razor b/TalentBlazor/Components/Pages/Account/ConfirmEmailChange.razor
index 100b6a5..a7f6583 100644
--- a/TalentBlazor/Components/Pages/Account/ConfirmEmailChange.razor
+++ b/TalentBlazor/Components/Pages/Account/ConfirmEmailChange.razor
@@ -1,4 +1,4 @@
-@page "/Account/ConfirmEmailChange"
+@page "/Account/ConfirmEmailChange"
 
 @using System.Text
 @using Microsoft.AspNetCore.Identity
@@ -13,9 +13,9 @@
 
 <PageTitle>Confirm email change</PageTitle>
 
-<h1 class="mb-3 @Css.H1">Confirm email change</h1>
+<Heading1>Confirm email change</Heading1>
 
-<div class="max-w-xl">
+<div class="mt-8 mx-auto max-w-lg">
     <StatusMessage Message="@_message" />
 </div>
 
diff --git a/TalentBlazor/Components/Pages/Account/ExternalLogin.razor b/TalentBlazor/Components/Pages/Account/ExternalLogin.razor
index dabba53..77636db 100644
--- a/TalentBlazor/Components/Pages/Account/ExternalLogin.razor
+++ b/TalentBlazor/Components/Pages/Account/ExternalLogin.razor
@@ -25,9 +25,9 @@
 <PageTitle>Register</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <StatusMessage Message="@_message" />
-    <h1 class="@Css.H1">Register</h1>
-    <h2 class="@Css.H2" id="external-login-title">Associate your @providerDisplayName account.</h2>
+    <StatusMessage class="mb-3" Message="@_message" />
+    <Heading1>Register</Heading1>
+    <Heading2 id="external-login-title">Associate your @providerDisplayName account.</Heading2>
 
     <Alert id="external-login-description" Type="AlertType.Information" class="my-4">
         You've successfully authenticated with <strong>@providerDisplayName</strong>.
@@ -39,18 +39,18 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="confirmation-form" Model="Input" OnValidSubmit="OnValidSubmitAsync" FormName="confirmation" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-4">
                     <div>
-                        <label for="email" class="@Css.InputLabel">Email</label>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="email" placeholder="Please enter your email." />
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="email" placeholder="Please enter your email." />
                         </div>
-                        <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Register</button>
+                        <PrimaryButton type="submit">Register</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/ForgotPassword.razor b/TalentBlazor/Components/Pages/Account/ForgotPassword.razor
index c6cfb6c..5c97082 100644
--- a/TalentBlazor/Components/Pages/Account/ForgotPassword.razor
+++ b/TalentBlazor/Components/Pages/Account/ForgotPassword.razor
@@ -1,4 +1,4 @@
-@page "/Account/ForgotPassword"
+@page "/Account/ForgotPassword"
 
 @using System.ComponentModel.DataAnnotations
 @using System.Text
@@ -16,23 +16,23 @@
 
 <PageTitle>Forgot your password?</PageTitle>
 
-<div class="max-w-xl">
-    <h1 class="mb-3 @Css.H1">Forgot your password?</h1>
-    <h3 class="@Css.H3">Enter your email.</h3>
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Forgot your password?</Heading1>
+    <Heading3>Enter your email.</Heading3>
 
     <EditForm Model="Input" FormName="forgot-password" OnValidSubmit="OnValidSubmitAsync" method="post">
         <DataAnnotationsValidator />
-        <ValidationSummary class="@Css.ValidationSummary" />
+        <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
         <div class="flex flex-col gap-y-4">
             <div>
-                <label for="email" class="@Css.InputLabel">Email</label>
+                <label for="email" class="@TextInput.LabelClasses">Email</label>
                 <div class="mt-1 relative rounded-md shadow-sm">
-                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                 </div>
-                <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
             </div>
             <div>
-                <button type="submit" class="@Css.PrimaryButton">Reset password</button>
+                <PrimaryButton type="submit">Reset password</PrimaryButton>
             </div>
         </div>
     </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/ForgotPasswordConfirmation.razor b/TalentBlazor/Components/Pages/Account/ForgotPasswordConfirmation.razor
index b28d4cb..cbcf33e 100644
--- a/TalentBlazor/Components/Pages/Account/ForgotPasswordConfirmation.razor
+++ b/TalentBlazor/Components/Pages/Account/ForgotPasswordConfirmation.razor
@@ -2,8 +2,11 @@
 
 <PageTitle>Forgot password confirmation</PageTitle>
 
-<h1 class="@Css.H1">Forgot password confirmation</h1>
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Forgot password confirmation</Heading1>
+
+    <p class="my-4">
+        Please check your email to reset your password.
+    </p>
+</div>
 
-<p class="my-4">
-    Please check your email to reset your password.
-</p>
diff --git a/TalentBlazor/Components/Pages/Account/InvalidPasswordReset.razor b/TalentBlazor/Components/Pages/Account/InvalidPasswordReset.razor
index 2856950..a58f318 100644
--- a/TalentBlazor/Components/Pages/Account/InvalidPasswordReset.razor
+++ b/TalentBlazor/Components/Pages/Account/InvalidPasswordReset.razor
@@ -2,8 +2,12 @@
 
 <PageTitle>Invalid password reset</PageTitle>
 
-<h1 class="@Css.H1">Invalid password reset</h1>
+<div class="mt-8 mx-auto max-w-lg">
 
-<p class="my-4">
-    The password reset link is invalid.
-</p>
+    <Heading1>Invalid password reset</Heading1>
+
+    <p class="my-4">
+        The password reset link is invalid.
+    </p>
+
+</div>
diff --git a/TalentBlazor/Components/Pages/Account/InvalidUser.razor b/TalentBlazor/Components/Pages/Account/InvalidUser.razor
index c2a9e31..9830212 100644
--- a/TalentBlazor/Components/Pages/Account/InvalidUser.razor
+++ b/TalentBlazor/Components/Pages/Account/InvalidUser.razor
@@ -2,8 +2,12 @@
 
 <PageTitle>Invalid user</PageTitle>
 
-<h3 class="@Css.H3">Invalid user</h3>
+<div class="mt-8 mx-auto max-w-lg">
+
+    <Heading3>Invalid user</Heading3>
+
+    <div class="max-w-xl">
+        <StatusMessage />
+    </div>
 
-<div class="max-w-xl">
-    <StatusMessage />
 </div>
diff --git a/TalentBlazor/Components/Pages/Account/Lockout.razor b/TalentBlazor/Components/Pages/Account/Lockout.razor
index 5f51d34..1542240 100644
--- a/TalentBlazor/Components/Pages/Account/Lockout.razor
+++ b/TalentBlazor/Components/Pages/Account/Lockout.razor
@@ -2,7 +2,12 @@
 
 <PageTitle>Locked out</PageTitle>
 
-<header>
-    <h1 class="@Css.H1">Locked out</h1>
-    <p class="my-4 text-danger">This account has been locked out, please try again later.</p>
-</header>
+<div class="mt-8 mx-auto max-w-lg">
+
+    <header>
+        <Heading1>Locked out</Heading1>
+        <p class="my-4 text-danger">This account has been locked out, please try again later.</p>
+    </header>
+
+</div>
+
diff --git a/TalentBlazor/Components/Pages/Account/Login.razor b/TalentBlazor/Components/Pages/Account/Login.razor
index d9d5262..bcdfe0a 100644
--- a/TalentBlazor/Components/Pages/Account/Login.razor
+++ b/TalentBlazor/Components/Pages/Account/Login.razor
@@ -1,4 +1,4 @@
-@page "/Account/Login"
+@page "/Account/Login"
 
 @using System.ComponentModel.DataAnnotations
 @using System.Text
@@ -17,52 +17,50 @@
 
 <div class="mt-8 mx-auto max-w-lg">
     <div class="max-w-xl">
-        <h1 class="mb-3 @Css.H1">
-            Use a local account to log in.
-        </h1>
-        <StatusMessage Message="@errorMessage" />
+        <Heading1>Use a local account to log in.</Heading1>
+        <StatusMessage class="mb-3" Message="@errorMessage" />
         <section class="mt-4 sm:shadow overflow-hidden sm:rounded-md">
             <EditForm id="account" Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login">
                 <div class="px-4 bg-white dark:bg-black sm:p-6">
-                    <ValidationSummary class="@Css.ValidationSummary" />
+                    <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                     <div class="flex flex-col gap-y-4">
                         <div>
                             <div>
-                                <label for="Email" class="@Css.InputLabel">Email</label>
+                                <label for="Email" class="@TextInput.LabelClasses">Email</label>
                                 <div class="mt-1 relative rounded-md shadow-sm">
-                                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                                 </div>
                             </div>
                         </div>
                         <div>
                             <div>
-                                <label for="UserName" class="@Css.InputLabel">Password</label>
+                                <label for="UserName" class="@TextInput.LabelClasses">Password</label>
                                 <div class="mt-1 relative rounded-md shadow-sm">
-                                    <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="current-password" aria-required="true" placeholder="password" />
+                                    <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="password" />
                                 </div>
                             </div>
                         </div>
 
                         <div class="flex items-center justify-between">
                             <div class="flex items-center">
-                                <InputCheckbox id="remember-me" @bind-Value="Input.RememberMe" class="@Css.Checkbox" />
+                                <InputCheckbox id="remember-me" @bind-Value="Input.RememberMe" class="@CheckboxInput.InputClasses" />
                                 <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-50 select-none">Remember Me</label>
                             </div>
                         </div>
 
                         <div>
-                            <button id="login-submit" type="submit" class="@Css.PrimaryButton">Log in</button>
+                            <PrimaryButton id="login-submit" type="submit">Log in</PrimaryButton>
                         </div>
 
                         <div class="mt-8 text-sm">
                             <p class="mb-3">
-                                <a class="@Css.Link" id="forgot-password" href="/Account/ForgotPassword">Forgot your password?</a>
+                                <HyperLink class="font-semibold" id="forgot-password" href="/Account/ForgotPassword">Forgot your password?</HyperLink>
                             </p>
                             <p class="mb-3">
-                                <a class="@Css.Link" href="@(NavigationManager.GetUriWithQueryParameters("/Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</a>
+                                <HyperLink class="font-semibold" href="@(NavigationManager.GetUriWithQueryParameters("/Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</HyperLink>
                             </p>
                             <p class="mb-3">
-                                <a class="@Css.Link" id="resend-confirmation" href="/Account/ResendEmailConfirmation">Resend email confirmation</a>
+                                <HyperLink class="font-semibold" id="resend-confirmation" href="/Account/ResendEmailConfirmation">Resend email confirmation</HyperLink>
                             </p>
                         </div>
                     </div>
@@ -71,7 +69,7 @@
         </section>
         <div class="mt-8">
             <section>
-                <h3 class="@Css.H3">Use another service to log in.</h3>
+                <Heading3>Use another service to log in.</Heading3>
                 <ExternalLoginPicker />
             </section>
         </div>
diff --git a/TalentBlazor/Components/Pages/Account/LoginWith2fa.razor b/TalentBlazor/Components/Pages/Account/LoginWith2fa.razor
index 7efb393..749d13c 100644
--- a/TalentBlazor/Components/Pages/Account/LoginWith2fa.razor
+++ b/TalentBlazor/Components/Pages/Account/LoginWith2fa.razor
@@ -1,4 +1,4 @@
-@page "/Account/LoginWith2fa"
+@page "/Account/LoginWith2fa"
 
 @using System.ComponentModel.DataAnnotations
 @using Microsoft.AspNetCore.Identity
@@ -13,7 +13,7 @@
 <PageTitle>Two-factor authentication</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Two-factor authentication</h1>
+    <Heading1>Two-factor authentication</Heading1>
     <StatusMessage Message="@_message" />
     <p class="my-4">Your login is protected with an authenticator app. Enter your authenticator code below.</p>
     <div class="mt-3 shadow overflow-hidden sm:rounded-md">
@@ -22,27 +22,27 @@
                 <input type="hidden" name="ReturnUrl" value="@ReturnUrl" />
                 <input type="hidden" name="RememberMe" value="@RememberMe" />
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="two-factor-code" class="@Css.InputLabel">Authenticator code</label>
+                        <label for="two-factor-code" class="@TextInput.LabelClasses">Authenticator code</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="two-factor-code" type="text" @bind-Value="Input.TwoFactorCode" class="@Css.InputText" autocomplete="off" />
+                            <InputText id="two-factor-code" type="text" @bind-Value="Input.TwoFactorCode" class="@TextInput.InputClasses" autocomplete="off" />
                         </div>
-                        <ValidationMessage For="() => Input.TwoFactorCode" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.TwoFactorCode" class="mt-2 text-danger text-sm" />
                     </div>
 
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <InputCheckbox id="remember-machine" @bind-Value="Input.RememberMachine" class="@Css.Checkbox" />
+                            <InputCheckbox id="remember-machine" @bind-Value="Input.RememberMachine" class="@CheckboxInput.InputClasses" />
                             <label for="remember-machine" class="ml-2 block text-sm text-gray-900 dark:text-gray-50 select-none">
                                 Remember this machine
                             </label>
                         </div>
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Log in</button>
+                        <PrimaryButton type="submit">Log in</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
@@ -51,7 +51,7 @@
 </div>
 <p class="mt-4">
     Don't have access to your authenticator device? You can
-    <a id="recovery-code-login" class="@Css.Link" href="/Account/LoginWithRecoveryCode?ReturnUrl=@ReturnUrl">log in with a recovery code</a>.
+    <HyperLink class="font-semibold" id="recovery-code-login" href=@($"/Account/LoginWithRecoveryCode?ReturnUrl={ReturnUrl}")>log in with a recovery code</HyperLink>.
 </p>
 
 @code {
diff --git a/TalentBlazor/Components/Pages/Account/LoginWithRecoveryCode.razor b/TalentBlazor/Components/Pages/Account/LoginWithRecoveryCode.razor
index 5988fe7..70a48e6 100644
--- a/TalentBlazor/Components/Pages/Account/LoginWithRecoveryCode.razor
+++ b/TalentBlazor/Components/Pages/Account/LoginWithRecoveryCode.razor
@@ -1,4 +1,4 @@
-@page "/Account/LoginWithRecoveryCode"
+@page "/Account/LoginWithRecoveryCode"
 
 @using System.ComponentModel.DataAnnotations
 @using Microsoft.AspNetCore.Identity
@@ -13,9 +13,9 @@
 
 <PageTitle>Recovery code verification</PageTitle>
 
-<h1 class="@Css.H1">Recovery code verification</h1>
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Recovery code verification</Heading1>
 
-<div class="max-w-xl">
     <StatusMessage Message="@_message" />
     <p class="my-4">
         You have requested to log in with a recovery code. This login will not be remembered until you provide
@@ -25,17 +25,17 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm Model="Input" FormName="login-with-recovery-code" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="recovery-code" class="@Css.InputLabel">Recovery Code</label>
+                        <label for="recovery-code" class="@TextInput.LabelClasses">Recovery Code</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="recovery-code" type="text" @bind-Value="Input.RecoveryCode" class="@Css.InputText" autocomplete="off" placeholder="RecoveryCode" />
+                            <InputText id="recovery-code" type="text" @bind-Value="Input.RecoveryCode" class="@TextInput.InputClasses" autocomplete="off" placeholder="RecoveryCode" />
                         </div>
-                        <ValidationMessage For="() => Input.RecoveryCode" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.RecoveryCode" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Log in</button>
+                        <PrimaryButton type="submit">Log in</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/Logout.razor b/TalentBlazor/Components/Pages/Account/Logout.razor
new file mode 100644
index 0000000..5a6cdf3
--- /dev/null
+++ b/TalentBlazor/Components/Pages/Account/Logout.razor
@@ -0,0 +1,10 @@
+@page "/Account/Logout"
+
+<PageTitle>Signed out</PageTitle>
+
+<div class="mt-8 mx-auto max-w-lg">
+    <div>
+        <Heading1>Signed out</Heading1>
+        <p class="my-4">You have successfully signed out.</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/TalentBlazor/Components/Pages/Account/Manage/ChangePassword.razor b/TalentBlazor/Components/Pages/Account/Manage/ChangePassword.razor
index 5df8a0d..7978a39 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/ChangePassword.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/ChangePassword.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/ChangePassword"
+@page "/Account/Manage/ChangePassword"
 
 @using System.ComponentModel.DataAnnotations
 @using Microsoft.AspNetCore.Identity
@@ -13,7 +13,7 @@
 
 <PageTitle>Change password</PageTitle>
 
-<h3 class="@Css.H3">Change password</h3>
+<Heading3>Change password</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage Message="@_message" />
@@ -22,32 +22,32 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="change-password-form" Model="Input" FormName="change-password" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 
                 <div class="flex flex-col gap-4">
                     <div>
-                        <label for="old-password" class="@Css.InputLabel">Old password</label>
+                        <label for="old-password" class="@TextInput.LabelClasses">Old password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="old-password" type="password" @bind-Value="Input.OldPassword" class="@Css.InputText" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
+                            <InputText id="old-password" type="password" @bind-Value="Input.OldPassword" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
                         </div>
-                        <ValidationMessage For="() => Input.OldPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.OldPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="new-password" class="@Css.InputLabel">New password</label>
+                        <label for="new-password" class="@TextInput.LabelClasses">New password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
+                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
                         </div>
-                        <ValidationMessage For="() => Input.NewPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.NewPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="confirm-password" class="@Css.InputLabel">Confirm password</label>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password." />
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password." />
                         </div>
-                        <ValidationMessage For="() => Input.ConfirmPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Update password</button>
+                        <PrimaryButton type="submit">Update password</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/Manage/DeletePersonalData.razor b/TalentBlazor/Components/Pages/Account/Manage/DeletePersonalData.razor
index 4e55f50..839db00 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/DeletePersonalData.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/DeletePersonalData.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/DeletePersonalData"
+@page "/Account/Manage/DeletePersonalData"
 
 @using System.ComponentModel.DataAnnotations
 @using Microsoft.AspNetCore.Identity
@@ -13,7 +13,7 @@
 
 <PageTitle>Delete Personal Data</PageTitle>
 
-<h3 class="@Css.H3">Delete Personal Data</h3>
+<Heading3>Delete Personal Data</Heading3>
 
 <div class="max-w-xl">
     <Alert Type="AlertType.Error" class="mb-3">
@@ -26,20 +26,20 @@
 
             <EditForm class="mt-3" id="delete-user" Model="Input" FormName="delete-user" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationMessage" />
+                <ValidationSummary class="mt-2 text-danger text-sm" />
 
                 <div class="flex flex-col gap-4">
                     @if (_requirePassword)
                     {
                         <div>
-                            <label for="password" class="@Css.InputLabel">Password</label>
+                            <label for="password" class="@TextInput.LabelClasses">Password</label>
                             <div class="mt-1 relative rounded-md shadow-sm">
-                                <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="current-password" aria-required="true" placeholder="Please enter your password." />
+                                <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="Please enter your password." />
                             </div>
-                            <ValidationMessage For="() => Input.Password" class="@Css.ValidationMessage" />
+                            <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
                         </div>
                     }
-                    <button class="@Css.DangerButton" type="submit">Delete data and close my account</button>
+                    <PrimaryButton Style="ButtonStyle.Red" type="submit">Delete data and close my account</PrimaryButton>
                 </div>
             </EditForm>
         </div>
diff --git a/TalentBlazor/Components/Pages/Account/Manage/Disable2fa.razor b/TalentBlazor/Components/Pages/Account/Manage/Disable2fa.razor
index 1ce660f..c5c91ef 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/Disable2fa.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/Disable2fa.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/Disable2fa"
+@page "/Account/Manage/Disable2fa"
 
 @using Microsoft.AspNetCore.Identity
 @using TalentBlazor.Data
@@ -11,7 +11,7 @@
 
 <PageTitle>Disable two-factor authentication (2FA)</PageTitle>
 
-<h3 class="@Css.H3">Disable two-factor authentication (2FA)</h3>
+<Heading3>Disable two-factor authentication (2FA)</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage />
@@ -29,7 +29,7 @@
     <div class="mt-4">
         <form @formname="disable-2fa" @onsubmit="OnSubmitAsync" method="post">
             <AntiforgeryToken />
-            <button class="@Css.DangerButton" type="submit">Disable 2FA</button>
+            <PrimaryButton Style="ButtonStyle.Red" type="submit">Disable 2FA</PrimaryButton>
         </form>
     </div>
 </div>
diff --git a/TalentBlazor/Components/Pages/Account/Manage/Email.razor b/TalentBlazor/Components/Pages/Account/Manage/Email.razor
index 5a8b813..d7b9746 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/Email.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/Email.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/Email"
+@page "/Account/Manage/Email"
 
 @using System.ComponentModel.DataAnnotations
 @using System.Text
@@ -17,7 +17,7 @@
 
 <PageTitle>Manage email</PageTitle>
 
-<h3 class="@Css.H3">Manage email</h3>
+<Heading3>Manage email</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage />
@@ -29,37 +29,37 @@
             </form>
             <EditForm id="change-email-form" Model="Input" FormName="change-email" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-4">
                     @if (_isEmailConfirmed)
                     {
                         <div>
-                            <label for="email" class="@Css.InputLabel">Email</label>
+                            <label for="email" class="@TextInput.LabelClasses">Email</label>
                             <div class="mt-1 relative rounded-md shadow-sm">
-                                <input id="email" type="text" value="@_email" class="@Css.InputText" placeholder="Please enter your email." disabled />
+                                <input id="email" type="text" value="@_email" class="@TextInput.InputClasses" placeholder="Please enter your email." disabled />
                             </div>
                         </div>
                     }
                     else
                     {
                         <div>
-                            <label for="email" class="@Css.InputLabel">Email</label>
+                            <label for="email" class="@TextInput.LabelClasses">Email</label>
                             <div class="mt-1 relative rounded-md shadow-sm">
-                                <input id="email" type="text" value="@_email" class="@Css.InputText" placeholder="Please enter your email." disabled />
+                                <input id="email" type="text" value="@_email" class="@TextInput.InputClasses" placeholder="Please enter your email." disabled />
                             </div>
-                            <button id="email-verification" type="submit" class="@Css.SecondaryButton" form="send-verification-form">Send verification email</button>
+                            <SecondaryButton id="email-verification" type="submit" form="send-verification-form">Send verification email</SecondaryButton>
                         </div>
                     }
                 <div>
-                    <label for="new-email" class="@Css.InputLabel">New email</label>
+                    <label for="new-email" class="@TextInput.LabelClasses">New email</label>
                     <div class="mt-1 relative rounded-md shadow-sm">
-                        <InputText id="new-email" type="text" @bind-Value="Input.NewEmail" class="@Css.InputText" autocomplete="email" aria-required="true" placeholder="Please enter new email." />
+                        <InputText id="new-email" type="text" @bind-Value="Input.NewEmail" class="@TextInput.InputClasses" autocomplete="email" aria-required="true" placeholder="Please enter new email." />
                     </div>
-                    <ValidationMessage For="() => Input.NewEmail" class="@Css.ValidationMessage" />
+                    <ValidationMessage For="() => Input.NewEmail" class="mt-2 text-danger text-sm" />
                 </div>
                 <div>
-                    <button id="change-email-button" type="submit" class="@Css.PrimaryButton">Change email</button>
+                    <PrimaryButton id="change-email-button" type="submit">Change email</PrimaryButton>
                 </div>
             </div>
             </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/Manage/EnableAuthenticator.razor b/TalentBlazor/Components/Pages/Account/Manage/EnableAuthenticator.razor
index bcb8507..32f070e 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/EnableAuthenticator.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/EnableAuthenticator.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/EnableAuthenticator"
+@page "/Account/Manage/EnableAuthenticator"
 
 @using System.ComponentModel.DataAnnotations
 @using System.Globalization
@@ -22,21 +22,21 @@
 }
 else
 {
-    <h3 class="@Css.H3">Configure authenticator app</h3>
+    <Heading3>Configure authenticator app</Heading3>
 
     <div class="max-w-xl" data-module="pages/Account/Manage/EnableAuthenticator.mjs">
-        <StatusMessage />
+        <StatusMessage class="mb-3" />
         <div>
             <p>To use an authenticator app go through the following steps:</p>
             <ol class="list-decimal ml-8">
                 <li>
                     <p class="my-2">
                         Download a two-factor authenticator app like Microsoft Authenticator for
-                        <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?Linkid=825072">Android</a> and
-                        <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?Linkid=825073">iOS</a> or
+                        <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=825072">Android</HyperLink> and
+                        <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=825073">iOS</HyperLink> or
                         Google Authenticator for
-                        <a class="@Css.Link" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en">Android</a> and
-                        <a class="@Css.Link" href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</a>.
+                        <HyperLink class="font-semibold" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en">Android</HyperLink> and
+                        <HyperLink class="font-semibold" href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</HyperLink>.
                     </p>
                 </li>
                 <li>
@@ -45,7 +45,7 @@ else
                     </p>
 
                     <Alert class="my-4" Type="AlertType.Information">
-                        Learn how to <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.
+                        Learn how to <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</HyperLink>.
                     </Alert>
 
                     <div data-permanent id="qrCode"></div>
@@ -60,17 +60,17 @@ else
                         <div class="max-w-xs">
                             <EditForm id="send-code" Model="Input" FormName="send-code" OnValidSubmit="OnValidSubmitAsync" method="post">
                                 <DataAnnotationsValidator />
-                                <ValidationSummary class="@Css.ValidationSummary" />
+                                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                                 <div class="flex flex-col gap-4">
                                     <div>
-                                        <label for="code" class="@Css.InputLabel">Verification Code</label>
+                                        <label for="code" class="@TextInput.LabelClasses">Verification Code</label>
                                         <div class="mt-1 relative rounded-md shadow-sm">
-                                            <InputText id="code" type="text" @bind-Value="Input.Code" class="@Css.InputText" autocomplete="off" placeholder="Please enter the code." />
+                                            <InputText id="code" type="text" @bind-Value="Input.Code" class="@TextInput.InputClasses" autocomplete="off" placeholder="Please enter the code." />
                                         </div>
-                                        <ValidationMessage For="() => Input.Code" class="@Css.ValidationMessage" />
+                                        <ValidationMessage For="() => Input.Code" class="mt-2 text-danger text-sm" />
                                     </div>
-                                    <button type="submit" class="@Css.PrimaryButton">Verify</button>
+                                    <PrimaryButton type="submit">Verify</PrimaryButton>
                                 </div>
                             </EditForm>
                         </div>
@@ -79,18 +79,6 @@ else
             </ol>
         </div>
     </div>
-    <script src="js/qrcode.min.js"></script>
-    <script>
-    (() => {
-        function render() {
-            new QRCode(document.getElementById("qrCode"), document.getElementById('qrCodeData').getAttribute('data-url'))
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-            Blazor.addEventListener('enhancedload', render)
-        })
-        render()
-    })()
-    </script>
 }
 
 @code {
diff --git a/TalentBlazor/Components/Pages/Account/Manage/ExternalLogins.razor b/TalentBlazor/Components/Pages/Account/Manage/ExternalLogins.razor
index 91dda82..7e0309f 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/ExternalLogins.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/ExternalLogins.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/ExternalLogins"
+@page "/Account/Manage/ExternalLogins"
 
 @using Microsoft.AspNetCore.Authentication
 @using Microsoft.AspNetCore.Identity
@@ -15,17 +15,17 @@
 <PageTitle>Manage your external logins</PageTitle>
 
 <div class="max-w-xl">
-    <StatusMessage />
+    <StatusMessage class="mb-3" />
     @if (_currentLogins?.Count > 0)
     {
-        <h3 class="@Css.H3">Registered Logins</h3>
+        <Heading3>Registered Logins</Heading3>
         <div class="prose prose-xl">
             <table class="table">
                 <tbody>
                     @foreach (var login in _currentLogins)
                     {
                         <tr>
-                            <td id="login-provider-@login.LoginProvider">@login.ProviderDisplayName</td>
+                            <td id="login-provider-@login.LoginProvider"><Heading4>@login.ProviderDisplayName</Heading4></td>
                             <td>
                                 @if (_showRemoveButton)
                                 {
@@ -34,7 +34,7 @@
                                         <div>
                                             <input type="hidden" name="@nameof(LoginProvider)" value="@login.LoginProvider" />
                                             <input type="hidden" name="@nameof(ProviderKey)" value="@login.ProviderKey" />
-                                            <button type="submit" class="@Css.PrimaryButton" title="Remove this @login.ProviderDisplayName login from your account">Remove</button>
+                                            <PrimaryButton type="submit" title=@($"Remove this {login.ProviderDisplayName} login from your account")>Remove</PrimaryButton>
                                         </div>
                                     </form>
                                 }
@@ -51,8 +51,8 @@
     }
     @if (_otherLogins?.Count > 0)
     {
-        <h4 class="@Css.H4">Add another service to log in.</h4>
-        <form id="link-login-form" class="form-horizontal" action="/Account/Manage/LinkExternalLogin" method="post">
+        <Heading4>Add another service to log in.</Heading4>
+        <form id="link-login-form" class="mt-4 form-horizontal" action="/Account/Manage/LinkExternalLogin" method="post">
             <AntiforgeryToken />
             <div id="socialLoginList">
                 <p>
@@ -60,7 +60,7 @@
                     {
                         <button id="link-login-button-@provider.Name"
                                 type="submit"
-                                class="@Css.SecondaryButton mr-2 mb-2"
+                                class="@SecondaryButton.Classes mr-2 mb-2"
                                 name="Provider"
                                 value="@provider.Name"
                                 title="Log in using your @provider.DisplayName account">
diff --git a/TalentBlazor/Components/Pages/Account/Manage/GenerateRecoveryCodes.razor b/TalentBlazor/Components/Pages/Account/Manage/GenerateRecoveryCodes.razor
index bb2c737..9f6fb81 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/GenerateRecoveryCodes.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/GenerateRecoveryCodes.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/GenerateRecoveryCodes"
+@page "/Account/Manage/GenerateRecoveryCodes"
 
 @using Microsoft.AspNetCore.Identity
 @using TalentBlazor.Data
@@ -18,7 +18,7 @@
     }
     else
     {
-        <h3 class="@Css.H3">Generate two-factor authentication (2FA) recovery codes</h3>
+        <Heading3>Generate two-factor authentication (2FA) recovery codes</Heading3>
         <Alert Type="AlertType.Warning">
             <p class="mb-3">
                 <strong>Put these codes in a safe place.</strong>
@@ -28,14 +28,14 @@
             </p>
             <p class="mb-3">
                 Generating new recovery codes does not change the keys used in authenticator apps. 
-                If you wish to change the key used in an authenticator app you should 
-                <a class="@Css.Link" href="/Account/Manage/ResetAuthenticator">reset your authenticator keys.</a>
+                If you wish to change the key used in an authenticator app you should
+                <HyperLink class="font-semibold" href="/Account/Manage/ResetAuthenticator">reset your authenticator keys.</HyperLink>
             </p>
         </Alert>
         <div class="mt-4">
             <form @formname="generate-recovery-codes" @onsubmit="OnSubmitAsync" method="post">
                 <AntiforgeryToken />
-                <button class="@Css.DangerButton" type="submit">Generate Recovery Codes</button>
+                <PrimaryButton Style="ButtonStyle.Red" type="submit">Generate Recovery Codes</PrimaryButton>
             </form>
         </div>
     }
diff --git a/TalentBlazor/Components/Pages/Account/Manage/Index.razor b/TalentBlazor/Components/Pages/Account/Manage/Index.razor
index 6de9dd5..d8e58c3 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/Index.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/Index.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage"
+@page "/Account/Manage"
 
 @using System.ComponentModel.DataAnnotations;
 @using System.Security.Claims
@@ -14,7 +14,7 @@
 
 <PageTitle>Profile</PageTitle>
 
-<h3 class="@Css.H3">Profile</h3>
+<Heading3>Profile</Heading3>
 <StatusMessage />
 
 <div class="max-w-xl">
@@ -22,24 +22,24 @@
         <EditForm id="profile-form" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post"
                   class="px-4 bg-white dark:bg-black sm:p-6">
             <DataAnnotationsValidator />
-            <ValidationSummary class="@Css.ValidationSummary" />
+            <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
             <div class="flex flex-col gap-y-4">
                 <div>
-                    <label for="username" class="@Css.InputLabel">Username</label>
+                    <label for="username" class="@TextInput.LabelClasses">Username</label>
                     <div class="mt-1 relative rounded-md shadow-sm">
-                        <input id="username" type="text" value="@_username" class="@Css.InputText" placeholder="Please choose your username." disabled />
+                        <input id="username" type="text" value="@_username" class="@TextInput.InputClasses" placeholder="Please choose your username." disabled />
                     </div>
                 </div>
                 <div>
-                    <label for="phone-number" class="@Css.InputLabel">Phone number</label>
+                    <label for="phone-number" class="@TextInput.LabelClasses">Phone number</label>
                     <div class="mt-1 relative rounded-md shadow-sm">
-                        <InputText id="phone-number" type="text" @bind-Value="Input.PhoneNumber" class="@Css.InputText" placeholder="Please enter your phone number." />
+                        <InputText id="phone-number" type="text" @bind-Value="Input.PhoneNumber" class="@TextInput.InputClasses" placeholder="Please enter your phone number." />
                     </div>
-                    <ValidationMessage For="() => Input.PhoneNumber" class="@Css.ValidationMessage" />
+                    <ValidationMessage For="() => Input.PhoneNumber" class="mt-2 text-danger text-sm" />
                 </div>
                 <div>
-                    <button id="update-profile-button" type="submit" class="@Css.PrimaryButton">Save</button>
+                    <PrimaryButton id="update-profile-button" type="submit">Save</PrimaryButton>
                 </div>
             </div>
         </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/Manage/ManageNavPages.cs b/TalentBlazor/Components/Pages/Account/Manage/ManageNavPages.cs
index 9b2ebbc..12ef247 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/ManageNavPages.cs
+++ b/TalentBlazor/Components/Pages/Account/Manage/ManageNavPages.cs
@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Mvc.Rendering;
 using Microsoft.AspNetCore.Mvc.ViewFeatures;
 using ServiceStack;
diff --git a/TalentBlazor/Components/Pages/Account/Manage/PersonalData.razor b/TalentBlazor/Components/Pages/Account/Manage/PersonalData.razor
index e9da988..58d40f4 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/PersonalData.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/PersonalData.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/PersonalData"
+@page "/Account/Manage/PersonalData"
 
 @using System.Text.Json
 @using Microsoft.AspNetCore.Identity
@@ -8,7 +8,7 @@
 
 <PageTitle>Personal Data</PageTitle>
 
-<h3 class="@Css.H3">Personal Data</h3>
+<Heading3>Personal Data</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage />
@@ -20,10 +20,10 @@
         </p>
         <form id="download-data" action="/Account/Manage/DownloadPersonalData" method="post">
             <AntiforgeryToken />
-            <button class="@Css.PrimaryButton" type="submit">Download</button>
+            <PrimaryButton type="submit">Download</PrimaryButton>
         </form>
         <p>
-            <a id="delete" href="/Account/Manage/DeletePersonalData" class="@Css.DangerButton">Delete</a>
+            <PrimaryButton Style="ButtonStyle.Red" id="delete" href="/Account/Manage/DeletePersonalData">Delete</PrimaryButton>
         </p>
     </div>
 </div>
diff --git a/TalentBlazor/Components/Pages/Account/Manage/ResetAuthenticator.razor b/TalentBlazor/Components/Pages/Account/Manage/ResetAuthenticator.razor
index f1bed1a..0d07a39 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/ResetAuthenticator.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/ResetAuthenticator.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/ResetAuthenticator"
+@page "/Account/Manage/ResetAuthenticator"
 
 @using Microsoft.AspNetCore.Identity
 @using TalentBlazor.Data
@@ -12,7 +12,7 @@
 
 <PageTitle>Reset authenticator key</PageTitle>
 
-<h3 class="@Css.H3">Reset authenticator key</h3>
+<Heading3>Reset authenticator key</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage />
@@ -30,7 +30,7 @@
     <div class="pt-4">
         <form id="reset-authenticator-form" @formname="reset-authenticator" @onsubmit="OnSubmitAsync" method="post">
             <AntiforgeryToken />
-            <button id="reset-authenticator-button" class="@Css.DangerButton" type="submit">Reset authenticator key</button>
+            <PrimaryButton Style="ButtonStyle.Red" id="reset-authenticator-button" type="submit">Reset authenticator key</PrimaryButton>
         </form>
     </div>
 </div>
diff --git a/TalentBlazor/Components/Pages/Account/Manage/SetPassword.razor b/TalentBlazor/Components/Pages/Account/Manage/SetPassword.razor
index 8e135ca..43b63e2 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/SetPassword.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/SetPassword.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/SetPassword"
+@page "/Account/Manage/SetPassword"
 
 @using System.ComponentModel.DataAnnotations
 @using Microsoft.AspNetCore.Identity
@@ -12,10 +12,10 @@
 
 <PageTitle>Set password</PageTitle>
 
-<h3 class="@Css.H3">Set your password</h3>
+<Heading3>Set your password</Heading3>
 
 <div class="max-w-xl">
-    <StatusMessage Message="@_message" />
+    <StatusMessage class="mb-3" Message="@_message" />
 
     <p class="text-info">
         You do not have a local username/password for this site. Add a local
@@ -26,25 +26,25 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="set-password-form" Model="Input" FormName="set-password" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-4">
                     <div>
-                        <label for="new-password" class="@Css.InputLabel">New password</label>
+                        <label for="new-password" class="@TextInput.LabelClasses">New password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@Css.InputText" autocomplete="new-password" placeholder="Please enter your new password." />
+                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@TextInput.InputClasses" autocomplete="new-password" placeholder="Please enter your new password." />
                         </div>
-                        <ValidationMessage For="() => Input.NewPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.NewPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="confirm-password" class="@Css.InputLabel">Confirm password</label>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" placeholder="Please confirm your new password." />
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" placeholder="Please confirm your new password." />
                         </div>
-                        <ValidationMessage For="() => Input.ConfirmPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Set password</button>
+                        <PrimaryButton type="submit">Set password</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/Manage/TwoFactorAuthentication.razor b/TalentBlazor/Components/Pages/Account/Manage/TwoFactorAuthentication.razor
index dba0948..4697b8f 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/TwoFactorAuthentication.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/TwoFactorAuthentication.razor
@@ -1,4 +1,4 @@
-@page "/Account/Manage/TwoFactorAuthentication"
+@page "/Account/Manage/TwoFactorAuthentication"
 
 @using Microsoft.AspNetCore.Http.Features
 @using Microsoft.AspNetCore.Identity
@@ -12,10 +12,10 @@
 
 <PageTitle>Two-factor authentication (2FA)</PageTitle>
 
-<h3 class="@Css.H3">Two-factor authentication (2FA)</h3>
+<Heading3>Two-factor authentication (2FA)</Heading3>
 
 <div class="max-w-xl">
-    <StatusMessage />
+    <StatusMessage class="mb-3" />
 
     @if (_consentFeature?.CanTrack ?? true)
     {
@@ -25,45 +25,45 @@
             {
                 <Alert Type="AlertType.Error">
                     <strong>You have no recovery codes left.</strong>
-                    <p>You must <a class="@Css.Link" href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</a> before you can log in with a recovery code.</p>
+                    <p>You must <HyperLink href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink> before you can log in with a recovery code.</p>
                 </Alert>
             }
             else if (_recoveryCodesLeft == 1)
             {
                 <Alert Type="AlertType.Error">
                     <strong>You have 1 recovery code left.</strong>
-                    <p>You can <a class="@Css.Link" href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</a>.</p>
+                    <p>You can <HyperLink href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink>.</p>
                 </Alert>
             }
             else if (_recoveryCodesLeft <= 3)
             {
                 <Alert Type="AlertType.Error">
                     <strong>You have @_recoveryCodesLeft recovery codes left.</strong>
-                    <p>You should <a class="@Css.Link" href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</a>.</p>
+                    <p>You should <HyperLink href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink>.</p>
                 </Alert>
             }
 
             if (_isMachineRemembered)
             {
                 <form class="inline-block" @formname="forget-browser" @onsubmit="OnSubmitForgetBrowserAsync" method="post">
-                    <button type="submit" class="@Css.PrimaryButton">Forget this browser</button>
+                    <PrimaryButton type="submit">Forget this browser</PrimaryButton>
                 </form>
             }
 
-            <a href="/Account/Manage/Disable2fa" class="@Css.PrimaryButton">Disable 2FA</a>
-            <a href="/Account/Manage/GenerateRecoveryCodes" class="@Css.PrimaryButton">Reset recovery codes</a>
+            <PrimaryButton href="/Account/Manage/Disable2fa">Disable 2FA</PrimaryButton>
+            <PrimaryButton href="/Account/Manage/GenerateRecoveryCodes">Reset recovery codes</PrimaryButton>
         }
 
         <div class="mt-4">
-            <h4 class="@Css.H4">Authenticator app</h4>
+            <Heading4 class="mb-4">Authenticator app</Heading4>
             @if (!_hasAuthenticator)
             {
-                <a id="enable-authenticator" href="/Account/Manage/EnableAuthenticator" class="@Css.PrimaryButton">Add authenticator app</a>
+                <PrimaryButton id="enable-authenticator" href="/Account/Manage/EnableAuthenticator">Add authenticator app</PrimaryButton>
             }
             else
             {
-                <a id="enable-authenticator" href="/Account/Manage/EnableAuthenticator" class="@Css.PrimaryButton">Set up authenticator app</a>
-                <a id="reset-authenticator" href="/Account/Manage/ResetAuthenticator" class="@Css.PrimaryButton">Reset authenticator app</a>
+                <PrimaryButton id="enable-authenticator" href="/Account/Manage/EnableAuthenticator">Set up authenticator app</PrimaryButton>
+                <PrimaryButton id="reset-authenticator" href="/Account/Manage/ResetAuthenticator">Reset authenticator app</PrimaryButton>
             }
         </div>
     }
diff --git a/TalentBlazor/Components/Pages/Account/Manage/_Imports.razor b/TalentBlazor/Components/Pages/Account/Manage/_Imports.razor
index 3b56b9b..33168f7 100644
--- a/TalentBlazor/Components/Pages/Account/Manage/_Imports.razor
+++ b/TalentBlazor/Components/Pages/Account/Manage/_Imports.razor
@@ -1,2 +1,2 @@
-@layout TalentBlazor.Components.Layout.ManageLayout
+@layout TalentBlazor.Components.Layout.ManageLayout
 @attribute [Microsoft.AspNetCore.Authorization.Authorize]
diff --git a/TalentBlazor/Components/Pages/Account/Register.razor b/TalentBlazor/Components/Pages/Account/Register.razor
index 56d8308..defad8d 100644
--- a/TalentBlazor/Components/Pages/Account/Register.razor
+++ b/TalentBlazor/Components/Pages/Account/Register.razor
@@ -1,4 +1,4 @@
-@page "/Account/Register"
+@page "/Account/Register"
 
 @using System.ComponentModel.DataAnnotations
 @using System.Text
@@ -20,40 +20,40 @@
 
 <PageTitle>Register</PageTitle>
 
-<h1 class="mb-3 @Css.H1">Register</h1>
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Register</Heading1>
 
-<div class="max-w-xl">
     <StatusMessage Message="@Message" />
     <div class="mt-3 shadow overflow-hidden sm:rounded-md">
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="registerForm" Model="Input" asp-route-returnUrl="@ReturnUrl" method="post" OnValidSubmit="RegisterUser" FormName="register">
-                <h3 class="@Css.H3">Create a new account.</h3>
+                <Heading3>Create a new account.</Heading3>
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="email" class="@Css.InputLabel">Email</label>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                         </div>
-                        <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="password" class="@Css.InputLabel">Password</label>
+                        <label for="password" class="@TextInput.LabelClasses">Password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="password" />
+                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="password" />
                         </div>
-                        <ValidationMessage For="() => Input.Password" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
                         <label for="confirm-password">Confirm Password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="password" />
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="password" />
                         </div>
-                        <ValidationMessage For="() => Input.ConfirmPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button id="registerSubmit" type="submit" class="@Css.PrimaryButton">Register</button>
+                        <PrimaryButton id="registerSubmit" type="submit">Register</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
@@ -61,7 +61,7 @@
     </div>
     <div class="mt-8">
         <section>
-            <h3 class="@Css.H3">Use another service to register.</h3>
+            <Heading3>Use another service to register.</Heading3>
             <ExternalLoginPicker />
         </section>
     </div>
diff --git a/TalentBlazor/Components/Pages/Account/RegisterConfirmation.razor b/TalentBlazor/Components/Pages/Account/RegisterConfirmation.razor
index 8e354bc..2053dad 100644
--- a/TalentBlazor/Components/Pages/Account/RegisterConfirmation.razor
+++ b/TalentBlazor/Components/Pages/Account/RegisterConfirmation.razor
@@ -1,4 +1,4 @@
-@page "/Account/RegisterConfirmation"
+@page "/Account/RegisterConfirmation"
 
 @using System.Text
 @using Microsoft.AspNetCore.Identity
@@ -14,20 +14,20 @@
 
 <PageTitle>Register confirmation</PageTitle>
 
-<h1 class="@Css.H1">Register confirmation</h1>
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Register confirmation</Heading1>
 
-<div class="max-w-xl">
     <StatusMessage Message="@statusMessage" />
 
     @if (emailConfirmationLink is not null)
     {
         <p class="my-4">
             This app does not currently have a real email sender registered, see 
-            <a class="@Css.Link" href="https://aka.ms/aspaccountconf">these docs</a> for how to configure a real email sender.
+            <HyperLink class="font-semibold" href="https://aka.ms/aspaccountconf">these docs</HyperLink> for how to configure a real email sender.
         </p>
         <p class="my-4">
             Normally this would be emailed:
-            <a id="confirm-link" class="@Css.Link" href="@emailConfirmationLink">Click here to confirm your account</a>
+            <HyperLink class="font-semibold" id="confirm-link" href="@emailConfirmationLink">Click here to confirm your account</HyperLink>
         </p>
     }
     else
diff --git a/TalentBlazor/Components/Pages/Account/ResendEmailConfirmation.razor b/TalentBlazor/Components/Pages/Account/ResendEmailConfirmation.razor
index 040edcd..634ea9f 100644
--- a/TalentBlazor/Components/Pages/Account/ResendEmailConfirmation.razor
+++ b/TalentBlazor/Components/Pages/Account/ResendEmailConfirmation.razor
@@ -1,4 +1,4 @@
-@page "/Account/ResendEmailConfirmation"
+@page "/Account/ResendEmailConfirmation"
 
 @using System.ComponentModel.DataAnnotations
 @using System.Text
@@ -16,25 +16,24 @@
 
 <PageTitle>Resend email confirmation</PageTitle>
 
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Resend email confirmation</Heading1>
+    <Heading3>Enter your email.</Heading3>
 
-<div class="max-w-xl">
-    <h1 class="mb-3 @Css.H1">Resend email confirmation</h1>
-    <h3 class="@Css.H3">Enter your email.</h3>
-
-    <StatusMessage Message="@_message" />
+    <StatusMessage class="mb-3" Message="@_message" />
     <EditForm Model="Input" FormName="resend-email-confirmation" OnValidSubmit="OnValidSubmitAsync" method="post">
         <DataAnnotationsValidator />
-        <ValidationSummary class="@Css.ValidationSummary" />
+        <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
         <div class="flex flex-col gap-y-4">
             <div>
-                <label for="email" class="@Css.InputLabel">Email</label>
+                <label for="email" class="@TextInput.LabelClasses">Email</label>
                 <div class="mt-1 relative rounded-md shadow-sm">
-                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" aria-required="true" placeholder="name@example.com" />
+                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" aria-required="true" placeholder="name@example.com" />
                 </div>
-                <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
             </div>
             <div>
-                <button type="submit" class="@Css.PrimaryButton">Resend</button>
+                <PrimaryButton type="submit">Resend</PrimaryButton>
             </div>
         </div>
     </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/ResetPassword.razor b/TalentBlazor/Components/Pages/Account/ResetPassword.razor
index f07ef18..cb0ffc3 100644
--- a/TalentBlazor/Components/Pages/Account/ResetPassword.razor
+++ b/TalentBlazor/Components/Pages/Account/ResetPassword.razor
@@ -1,4 +1,4 @@
-@page "/Account/ResetPassword"
+@page "/Account/ResetPassword"
 
 @using System.ComponentModel.DataAnnotations
 @using System.Text
@@ -13,42 +13,42 @@
 
 <PageTitle>Reset password</PageTitle>
 
-<h1 class="@Css.H1">Reset password</h1>
-<h2 class="@Css.H2">Reset your password.</h2>
+<div class="mt-8 mx-auto max-w-lg">
+    <Heading1>Reset password</Heading1>
+    <Heading2>Reset your password.</Heading2>
 
-<div class="max-w-xl">
     <StatusMessage Message="@Message" />
     <div class="mt-3 shadow overflow-hidden sm:rounded-md">
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="reset-password-form" Model="Input" FormName="reset-password" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 <input type="hidden" name="Input.Code" value="@Input.Code" />
 
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="email" class="@Css.InputLabel">Email</label>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                         </div>
-                        <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="password" class="@Css.InputLabel">Password</label>
+                        <label for="password" class="@TextInput.LabelClasses">Password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please enter your password." />
+                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please enter your password." />
                         </div>
-                        <ValidationMessage For="() => Input.Password" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="confirm-password" class="@Css.InputLabel">Confirm password</label>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please confirm your password." />
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please confirm your password." />
                         </div>
-                        <ValidationMessage For="() => Input.ConfirmPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Reset</button>
+                        <PrimaryButton type="submit">Reset</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/TalentBlazor/Components/Pages/Account/ResetPasswordConfirmation.razor b/TalentBlazor/Components/Pages/Account/ResetPasswordConfirmation.razor
index ba3e6b7..38a05ca 100644
--- a/TalentBlazor/Components/Pages/Account/ResetPasswordConfirmation.razor
+++ b/TalentBlazor/Components/Pages/Account/ResetPasswordConfirmation.razor
@@ -1,8 +1,12 @@
 @page "/Account/ResetPasswordConfirmation"
 <PageTitle>Reset password confirmation</PageTitle>
 
-<h1 class="@Css.H1">Reset password confirmation</h1>
+<div class="mt-8 mx-auto max-w-lg">
 
-<p class="my-4">
-    Your password has been reset. Please <a class="@Css.Link" href="/Account/Login">click here to log in</a>.
-</p>
+    <Heading1>Reset password confirmation</Heading1>
+
+    <p class="my-4">
+        Your password has been reset. Please <HyperLink class="font-semibold" href="/Account/Login">click here to log in</HyperLink>.
+    </p>
+
+</div>
diff --git a/TalentBlazor/Components/Pages/Account/_Imports.razor b/TalentBlazor/Components/Pages/Account/_Imports.razor
index 72f8df8..8dd666c 100644
--- a/TalentBlazor/Components/Pages/Account/_Imports.razor
+++ b/TalentBlazor/Components/Pages/Account/_Imports.razor
@@ -1 +1 @@
-@using TalentBlazor.Components.Identity
+@using TalentBlazor.Components.Identity
diff --git a/TalentBlazor/Components/Pages/Index.razor b/TalentBlazor/Components/Pages/Index.razor
index 569c000..85957cf 100644
--- a/TalentBlazor/Components/Pages/Index.razor
+++ b/TalentBlazor/Components/Pages/Index.razor
@@ -1,23 +1,6 @@
 @page "/"
 <SetHeader>
     <div class="flex flex-col">
-        <nav class="flex px-4 pb-4" aria-label="Breadcrumb">
-            <ol role="list" class="flex items-center space-x-4">
-                <li>
-                    <div>
-                        <a href="/" class="text-gray-400 hover:text-gray-500">
-                            <svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
-                        </a>
-                    </div>
-                </li>
-                <li>
-                    <div class="flex items-center">
-                        <svg class="flex-shrink-0 h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path></svg>
-                        <a href="/" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Talent Blazor</a>
-                    </div>
-                </li>
-            </ol>
-        </nav>
         <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
             <div class="ml-4 mt-4">
                 <h3 class="text-lg leading-6 font-medium text-gray-900">Welcome to the Talent Blazor Demo</h3>
diff --git a/TalentBlazor/Components/Pages/Talent/ContactDetails.razor b/TalentBlazor/Components/Pages/Talent/ContactDetails.razor
index d274aac..ef88df8 100644
--- a/TalentBlazor/Components/Pages/Talent/ContactDetails.razor
+++ b/TalentBlazor/Components/Pages/Talent/ContactDetails.razor
@@ -15,7 +15,7 @@
         <div class="">
             <div>
                 <div>
-                    <img class="h-32 w-full object-cover lg:h-48" src="https://images.unsplash.com/photo-1444628838545-ac4016a5418a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="">
+                    <img class="mt-4 h-32 w-full object-cover lg:h-48" src="https://images.unsplash.com/photo-1444628838545-ac4016a5418a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="">
                 </div>
                 @if (loading == true)
                 {
diff --git a/TalentBlazor/Components/Pages/Talent/ContactsList.razor b/TalentBlazor/Components/Pages/Talent/ContactsList.razor
index a666463..cf6690a 100644
--- a/TalentBlazor/Components/Pages/Talent/ContactsList.razor
+++ b/TalentBlazor/Components/Pages/Talent/ContactsList.razor
@@ -3,6 +3,17 @@
 @inherits AppComponentBase
 @rendermode RenderMode.InteractiveServer
 
+<SetHeader>
+    <div class="flex flex-col">
+        <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
+            <div class="ml-4 mt-4">
+                <h3 class="text-lg leading-6 font-medium text-gray-900">Candidates</h3>
+                <p class="mt-1 text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit quam corrupti consectetur.</p>
+            </div>
+        </div>
+    </div>
+</SetHeader>
+
 <div class="flex-1 min-w-0">
         <nav class="flex" aria-label="Breadcrumb">
             @if (contacts.Count > 0)
@@ -12,13 +23,6 @@
                 </Breadcrumbs>
             }
         </nav>
-
-        <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
-            <div class="ml-4 mt-4">
-                <h3 class="text-lg leading-6 font-medium text-gray-900">Candidates</h3>
-                <p class="mt-1 text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit quam corrupti consectetur.</p>
-            </div>
-        </div>
     </div>
 
 <main class="px-4 py-2 sm:p-6">
diff --git a/TalentBlazor/Components/Pages/Talent/Dashboard.razor b/TalentBlazor/Components/Pages/Talent/Dashboard.razor
index 263dadf..6479efe 100644
--- a/TalentBlazor/Components/Pages/Talent/Dashboard.razor
+++ b/TalentBlazor/Components/Pages/Talent/Dashboard.razor
@@ -7,14 +7,6 @@
 
 <SetHeader>
     <div class="flex-1 min-w-0">
-        <nav class="flex" aria-label="Breadcrumb">
-            @if (hasInit)
-            {
-                <Breadcrumbs>
-                    <Breadcrumb href="/dashboard">Dashboard</Breadcrumb>
-                </Breadcrumbs>
-            }
-        </nav>
 
         <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
             <div class="ml-4 mt-4">
@@ -207,7 +199,6 @@
     int avgSalaryRangeLower = 0;
     int avgSalaryRangeUpper = 0;
     decimal prefRemotePercentage = 0.0m;
-    bool hasInit = false;
 
     ResponseStatus? errorResponse;
     string? LoginUrl { get; set; }
@@ -240,6 +231,5 @@
     {
         await FetchJobApps();
         await base.OnInitializedAsync();
-        hasInit = true;
     }
 }
diff --git a/TalentBlazor/Components/Pages/Talent/JobList.razor b/TalentBlazor/Components/Pages/Talent/JobList.razor
index 1fe6ec9..39991fe 100644
--- a/TalentBlazor/Components/Pages/Talent/JobList.razor
+++ b/TalentBlazor/Components/Pages/Talent/JobList.razor
@@ -3,12 +3,8 @@
 @layout MainLayout
 @rendermode RenderMode.InteractiveServer
 
-<div class="flex-1 min-w-0">
-        <nav class="flex" aria-label="Breadcrumb">
-            <Breadcrumbs>
-                <Breadcrumb href="/jobs">Jobs</Breadcrumb>
-            </Breadcrumbs>
-        </nav>
+<SetHeader>
+    <div class="flex flex-col">
         <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-8">
             <div class="ml-4 mt-4">
                 <h3 class="text-lg leading-6 font-medium text-gray-900">Job Postings</h3>
@@ -16,11 +12,20 @@
             </div>
         </div>
     </div>
-    <div class="mt-6 flex xl:mt-0 xl:ml-4">
+</SetHeader>
+
+<div class="flex-1 min-w-0">
+        <nav class="flex" aria-label="Breadcrumb">
+            <Breadcrumbs>
+                <Breadcrumb href="/jobs">Jobs</Breadcrumb>
+            </Breadcrumbs>
+        </nav>
+    </div>
+    <div class="mt-6">
         <!-- Actions -->
         <AuthorizeView>
             <Authorized>
-                <a href="/jobs/create" class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Create new job</a>
+                <PrimaryButton href="/jobs/create">Create new job</PrimaryButton>
             </Authorized>
         </AuthorizeView>
     </div>
diff --git a/TalentBlazor/Components/Shared/Header.razor b/TalentBlazor/Components/Shared/Header.razor
deleted file mode 100644
index e1d611a..0000000
--- a/TalentBlazor/Components/Shared/Header.razor
+++ /dev/null
@@ -1,82 +0,0 @@
-@using TalentBlazor.Components.Identity
-@inherits AppAuthComponentBase
-@inject NavigationManager NavigationManager
-
-<header class="border-b border-gray-200 dark:border-gray-800 pr-3">
-    <div class="flex flex-wrap items-center">
-        <div class="flex flex-grow flex-shrink flex-nowrap justify-end items-center">
-            <nav class="relative flex flex-grow">
-                <ul class="flex flex-wrap items-center justify-end w-full m-0">
-
-                    <li class="relative flex flex-wrap just-fu-start m-0">
-                        <NavLink href="about" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">About</NavLink>
-                    </li>
-                    <li class="relative flex flex-wrap just-fu-start m-0">
-                        <NavLink href="deploy" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Deploying</NavLink>
-                    </li>
-                    <li class="relative flex flex-wrap just-fu-start m-0">
-                        <NavLink href="privacy" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Privacy</NavLink>
-                    </li>
-
-                    <AuthorizeView Roles="Admin">
-                        <Authorized>
-                            <li class="relative flex flex-wrap just-fu-start m-0">
-                                <NavLink href="admin" class="p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400" ActiveClass="text-blue-700 dark:text-blue-300">Admin</NavLink>
-                            </li>
-                        </Authorized>
-                    </AuthorizeView>
-                    <AuthorizeView>
-                        <Authorized>
-                            <li>
-                                <div class="mx-3 relative">
-                                    <div>
-                                        <a href="/Account/Manage"
-                                            class="max-w-xs bg-white dark:bg-black rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50 dark:lg:hover:bg-gray-900 dark:ring-offset-black" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-                                            <img class="h-8 w-8 rounded-full" src=@User.GetProfileUrl() alt="">
-                                            <span class="hidden ml-3 text-gray-700 dark:text-gray-300 text-sm font-medium lg:block">
-                                                <span class="sr-only">Open user menu for </span>
-                                                @User.GetDisplayName()
-                                            </span>
-                                        </a>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="mr-3 relative flex flex-wrap just-fu-start m-0">
-                                <LogoutForm id="header-logout-form" />
-                                <LinkButton onclick="document.getElementById('header-logout-form').submit(); return false;">
-                                    Sign Out
-                                </LinkButton>
-                            </li>
-                        </Authorized>
-                        <Authorizing>
-                            <li class="relative flex flex-wrap just-fu-start m-0">
-                                <NavLink href="/Account/Login" class="m-2 mr-4">
-                                    <SecondaryButton>
-                                        Sign In
-                                    </SecondaryButton>
-                                </NavLink>
-                            </li>
-                        </Authorizing>
-                        <NotAuthorized>
-                            <li class="relative flex flex-wrap just-fu-start m-0">
-                                <NavLink href="/Account/Login" class="m-2 mr-4">
-                                    <SecondaryButton>
-                                        Sign In
-                                    </SecondaryButton>
-                                </NavLink>
-                            </li>
-                        </NotAuthorized>
-                    </AuthorizeView>
-
-                    <li class="relative flex flex-wrap just-fu-start m-0">
-                        <DarkModeToggleLite />
-                    </li>
-
-                </ul>
-            </nav>
-        </div>
-    </div>
-</header>
-
-@code {
-}
diff --git a/TalentBlazor/Components/Shared/MainLayout.razor b/TalentBlazor/Components/Shared/MainLayout.razor
index 2a73846..ed7ed09 100644
--- a/TalentBlazor/Components/Shared/MainLayout.razor
+++ b/TalentBlazor/Components/Shared/MainLayout.razor
@@ -4,7 +4,7 @@
 
 <div class="min-h-screen">
     <!-- Navigation -->
-    <NavMenu></NavMenu>
+    <NavMenu />
 
     <CascadingValue Value="this">
         <!-- Header Content -->
@@ -22,7 +22,7 @@
         </main>
     </CascadingValue>
 </div>
-<Footer></Footer>
+<Footer />
 
 @code {
     [CascadingParameter] protected Task<AuthenticationState>? AuthenticationStateTask { get; set; }
@@ -38,10 +38,4 @@
         LoginUrl = NavigationManager.GetLoginUrl();
         return base.OnParametersSetAsync();
     }
-
-    // async Task Logout()
-    // {
-    //     await AuthStateProvider.LogoutAsync();
-    //     NavigationManager.NavigateTo(LoginUrl, true);
-    // }
 }
\ No newline at end of file
diff --git a/TalentBlazor/Components/Shared/NavMenu.razor b/TalentBlazor/Components/Shared/NavMenu.razor
index 8798bbc..2987376 100644
--- a/TalentBlazor/Components/Shared/NavMenu.razor
+++ b/TalentBlazor/Components/Shared/NavMenu.razor
@@ -1,7 +1,6 @@
 @inject AuthenticationStateProvider AuthStateProvider;
 @inject NavigationManager NavigationManager;
 @using TalentBlazor.Components.Identity;
-@rendermode RenderMode.InteractiveServer
 
 <nav class="bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
diff --git a/TalentBlazor/Components/Shared/Sidebar.razor b/TalentBlazor/Components/Shared/Sidebar.razor
deleted file mode 100644
index d6da8c3..0000000
--- a/TalentBlazor/Components/Shared/Sidebar.razor
+++ /dev/null
@@ -1,110 +0,0 @@
-@using TalentBlazor.Components.Identity
-@inject NavigationManager NavigationManager
-@inject IJSRuntime JS
-
-<div data-module="mjs/components/Sidebar.mjs"></div>
-
-<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
-<div class="mobile relative z-40 md:hidden" role="dialog" aria-modal="true" data-collapse="hidden">
-    <div class="fixed inset-0 bg-gray-600 dark:bg-gray-400 bg-opacity-75 dark:bg-opacity-75" data-collapse="opacity-0" data-collapse-off="opacity-100"></div>
-    <div class="fixed inset-0 flex z-40">
-        <div class="relative flex-1 flex flex-col max-w-xs w-full bg-white dark:bg-black" data-collapse="-translate-x-full" data-collapse-off="translate-x-0">
-            <div class="absolute top-0 right-0 -mr-12 pt-2" data-collapse="opacity-0" data-collapse-off="opacity-100">
-                <button type="button" data-toggle-sidebar
-                        class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-black">
-                    <span class="sr-only">Close sidebar</span>
-                    <!-- Heroicon name: outline/x -->
-                    <svg class="h-6 w-6 text-white dark:text-black" xmlns="http://www.w3.org/2000/svg" fill="none"
-                         viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
-
-            <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
-                <NavLink href="/" class="flex-shrink-0 flex items-center px-4 text-2xl whitespace-nowrap overflow-x-hidden flex items-center">
-                    <svg style="color:rgb(91, 33, 182)" class="h-8 w-auto" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15z" fill="currentColor" /></svg>
-                    <div class="ml-2 text-black dark:text-white">Talent Blazor</div>
-                </NavLink>
-                <nav class="mt-5 px-2 space-y-1">
-
-                    <NavLink href="counter" ActiveClass="@MobileNavLinkActiveClass" class="@MobileNavLinkClass">
-                        <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/counter.svg">
-                        Counter
-                    </NavLink>
-                    <NavLink href="weather" ActiveClass="@MobileNavLinkActiveClass" class="@MobileNavLinkClass">
-                        <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/weather.svg">
-                        Weather
-                    </NavLink>
-                    <NavLink href="todomvc" ActiveClass="@MobileNavLinkActiveClass" class="@MobileNavLinkClass">
-                        <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/todomvc.svg">
-                        Todos
-                    </NavLink>
-                    <NavLink href="secure/bookings" ActiveClass="@MobileNavLinkActiveClass" class="@MobileNavLinkClass">
-                        <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/bookings.svg">
-                        Bookings
-                    </NavLink>
-                    <NavLink href="secure/coupons" ActiveClass="@MobileNavLinkActiveClass" class="@MobileNavLinkClass">
-                        <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/coupon.svg">
-                        Coupons
-                    </NavLink>
-                    <NavLink href="profile" ActiveClass="@MobileNavLinkActiveClass" class="@MobileNavLinkClass">
-                        <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/profile.svg">
-                        Profile
-                    </NavLink>
-                </nav>
-            </div>
-        </div>
-
-        <div class="flex-shrink-0 w-14">
-            <!-- Force sidebar to shrink to fit close icon -->
-        </div>
-    </div>
-</div>
-
-<!-- Static sidebar for desktop -->
-<div class="desktop hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
-    <!-- Sidebar component, swap this element with another sidebar if you like -->
-    <div class="flex-1 flex flex-col min-h-0 border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-black">
-        <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
-            <NavLink href="/" class="flex items-center flex-shrink-0 px-4 text-2xl whitespace-nowrap overflow-x-hidden flex items-center">
-                <svg style="color:rgb(91, 33, 182)" class="h-8 w-auto" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M23.834 8.101a13.912 13.912 0 0 1-13.643 11.72a10.105 10.105 0 0 1-1.994-.12a6.111 6.111 0 0 1-5.082-5.761a5.934 5.934 0 0 1 11.867-.084c.025.983-.401 1.846-1.277 1.871c-.936 0-1.374-.668-1.374-1.567v-2.5a1.531 1.531 0 0 0-1.52-1.533H8.715a3.648 3.648 0 1 0 2.695 6.08l.073-.11l.074.121a2.58 2.58 0 0 0 2.2 1.048a2.909 2.909 0 0 0 2.695-3.04a7.912 7.912 0 0 0-.217-1.933a7.404 7.404 0 0 0-14.64 1.603a7.497 7.497 0 0 0 7.308 7.405s.549.05 1.167.035a15.803 15.803 0 0 0 8.475-2.528c.036-.025.072.025.048.061a12.44 12.44 0 0 1-9.69 3.963a8.744 8.744 0 0 1-8.9-8.972a9.049 9.049 0 0 1 3.635-7.247a8.863 8.863 0 0 1 5.229-1.726h2.813a7.915 7.915 0 0 0 5.839-2.578a.11.11 0 0 1 .059-.034a.112.112 0 0 1 .12.053a.113.113 0 0 1 .015.067a7.934 7.934 0 0 1-1.227 3.549a.107.107 0 0 0-.014.06a.11.11 0 0 0 .073.095a.109.109 0 0 0 .062.004a8.505 8.505 0 0 0 5.913-4.876a.155.155 0 0 1 .055-.053a.15.15 0 0 1 .147 0a.153.153 0 0 1 .054.053A10.779 10.779 0 0 1 23.834 8.1zM8.895 11.628a2.188 2.188 0 1 0 2.188 2.188v-2.042a.158.158 0 0 0-.15-.15z" fill="currentColor" /></svg>
-                <div class="ml-2 text-black dark:text-white">Talent Blazor</div>
-            </NavLink>
-            <nav class="mt-5 flex-1 px-2 bg-white dark:bg-black space-y-1">
-                <NavLink href="counter" ActiveClass="@DesktopNavLinkActiveClass" class="@DesktopNavLinkClass">
-                    <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/counter.svg">
-                    Counter
-                </NavLink>
-                <NavLink href="weather" ActiveClass="@DesktopNavLinkActiveClass" class="@DesktopNavLinkClass">
-                    <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/weather.svg">
-                    Weather
-                </NavLink>
-                <NavLink href="todomvc" ActiveClass="@DesktopNavLinkActiveClass" class="@DesktopNavLinkClass">
-                    <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/todomvc.svg">
-                    Todos
-                </NavLink>
-                <NavLink href="secure/bookings" ActiveClass="@DesktopNavLinkActiveClass" class="@DesktopNavLinkClass">
-                    <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/bookings.svg">
-                    Bookings
-                </NavLink>
-                <NavLink href="secure/coupons" ActiveClass="@DesktopNavLinkActiveClass" class="@DesktopNavLinkClass">
-                    <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/coupon.svg">
-                    Coupons
-                </NavLink>
-                <NavLink href="profile" ActiveClass="@DesktopNavLinkActiveClass" class="@DesktopNavLinkClass">
-                    <img class="mr-4 flex-shrink-0 h-6 w-6" src="/img/nav/profile.svg">
-                    Profile
-                </NavLink>
-            </nav>
-        </div>
-    </div>
-</div>
-
-@code {
-    const string MobileNavLinkActiveClass = "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-50";
-    const string MobileNavLinkClass = "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md";
-
-    const string DesktopNavLinkActiveClass = "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-50";
-    const string DesktopNavLinkClass = "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-50 group flex items-center px-2 py-2 font-medium rounded-md";
-}
diff --git a/TalentBlazor/Components/_Imports.razor b/TalentBlazor/Components/_Imports.razor
index 65116b2..a78cf1d 100644
--- a/TalentBlazor/Components/_Imports.razor
+++ b/TalentBlazor/Components/_Imports.razor
@@ -15,4 +15,5 @@
 @using TalentBlazor
 @using TalentBlazor.Components
 @using TalentBlazor.Components.Shared
+@using TalentBlazor.Data
 @using TalentBlazor.ServiceModel
diff --git a/TalentBlazor/Configure.Auth.cs b/TalentBlazor/Configure.Auth.cs
index f4ff885..38b47ec 100644
--- a/TalentBlazor/Configure.Auth.cs
+++ b/TalentBlazor/Configure.Auth.cs
@@ -1,6 +1,5 @@
 using ServiceStack.Auth;
 using TalentBlazor.Data;
-using TalentBlazor.ServiceModel;
 
 [assembly: HostingStartup(typeof(TalentBlazor.ConfigureAuth))]
 
@@ -13,6 +12,7 @@ public void Configure(IWebHostBuilder builder) => builder
         {
             appHost.Plugins.Add(new AuthFeature(IdentityAuth.For<ApplicationUser>(options => {
                 options.EnableCredentialsAuth = true;
+                options.SessionFactory = () => new CustomUserSession();
             })));
         });
 }
diff --git a/TalentBlazor/Configure.Mq.cs b/TalentBlazor/Configure.Mq.cs
index c82d452..704c1fe 100644
--- a/TalentBlazor/Configure.Mq.cs
+++ b/TalentBlazor/Configure.Mq.cs
@@ -7,6 +7,8 @@
 
 namespace TalentBlazor;
 
+/**
+ * Register ServiceStack Services you want
 /**
  * Register ServiceStack Services you want to be able to invoke in a managed Background Thread
  * https://docs.servicestack.net/background-mq
@@ -34,17 +36,11 @@ public void Configure(IWebHostBuilder builder) => builder
 /// <summary>
 /// Sends emails by publishing a message to the Background MQ Server where it's processed in the background
 /// </summary>
-public class EmailSender : IEmailSender
+public class EmailSender(IMessageService messageService) : IEmailSender
 {
-    IMessageService MessageService { get; }
-    public EmailSender(IMessageService messageService)
-    {
-        MessageService = messageService;
-    }
-
     public Task SendEmailAsync(string email, string subject, string htmlMessage)
     {
-        using var mqClient = MessageService.CreateMessageProducer();
+        using var mqClient = messageService.CreateMessageProducer();
         mqClient.Publish(new SendEmail
         {
             To = email,
diff --git a/TalentBlazor/Css.cs b/TalentBlazor/Css.cs
deleted file mode 100644
index c4db219..0000000
--- a/TalentBlazor/Css.cs
+++ /dev/null
@@ -1,23 +0,0 @@
-using ServiceStack;
-
-namespace TalentBlazor;
-
-public static class Css
-{
-    public const string H1 = "text-3xl font-bold tracking-tight sm:text-4xl text-gray-900 dark:text-gray-50";
-    public const string H2 = "text-3xl md:text-4xl font-bold tracking-tighter leading-tight md:pr-8 whitespace-nowrap text-center pt-8";
-    public const string H3 = "mb-4 text-2xl font-semibold leading-tight text-gray-900 dark:text-gray-100";
-    public const string H4 = "mb-4 text-xl font-semibold leading-tight text-gray-900 dark:text-gray-100";
-    public const string Link = "font-semibold text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400";
-    public const string LinkUnderline = "underline hover:text-success duration-200 transition-colors";
-    public const string PrimaryButton = "cursor-pointer inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-    public const string SecondaryButton = "cursor-pointer inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black";
-    public const string DangerButton = "cursor-pointer inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black focus:ring-red-300 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500 dark:ring-offset-black";
-    public const string ValidationSummary = "mb-3 text-danger text-center font-semibold";
-    public const string ValidationMessage = "mt-2 text-danger text-sm";
-    public static string InputText => CssUtils.Tailwind.Input("");
-    public const string InputLabel = "block text-sm font-medium text-gray-700 dark:text-gray-300";
-    public const string Checkbox = "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500";
-    public const string AlertDanger = "mb-2 p-2 px-4 flex items-center rounded text-danger bg-red-100 font-semibold";
-    public const string AlertSuccess = "mb-2 p-2 px-4 flex items-center rounded text-success bg-green-100 font-semibold";
-}
diff --git a/TalentBlazor/Data/ApplicationUser.cs b/TalentBlazor/Data/ApplicationUser.cs
deleted file mode 100644
index 0d7d256..0000000
--- a/TalentBlazor/Data/ApplicationUser.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-using Microsoft.AspNetCore.Identity;
-
-namespace TalentBlazor.Data;
-
-
-
diff --git a/TalentBlazor/Migrations/20231019062137_CreateIdentitySchema.Designer.cs b/TalentBlazor/Migrations/20231117085343_CreateIdentitySchema.Designer.cs
similarity index 98%
rename from TalentBlazor/Migrations/20231019062137_CreateIdentitySchema.Designer.cs
rename to TalentBlazor/Migrations/20231117085343_CreateIdentitySchema.Designer.cs
index 9caaea7..4fd0bac 100644
--- a/TalentBlazor/Migrations/20231019062137_CreateIdentitySchema.Designer.cs
+++ b/TalentBlazor/Migrations/20231117085343_CreateIdentitySchema.Designer.cs
@@ -1,4 +1,4 @@
-// <auto-generated />
+// <auto-generated />
 using System;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Infrastructure;
@@ -11,14 +11,14 @@
 namespace TalentBlazor.Migrations
 {
     [DbContext(typeof(ApplicationDbContext))]
-    [Migration("20231019062137_CreateIdentitySchema")]
+    [Migration("20231117085343_CreateIdentitySchema")]
     partial class CreateIdentitySchema
     {
         /// <inheritdoc />
         protected override void BuildTargetModel(ModelBuilder modelBuilder)
         {
 #pragma warning disable 612, 618
-            modelBuilder.HasAnnotation("ProductVersion", "8.0.0-rc.2.23480.1");
+            modelBuilder.HasAnnotation("ProductVersion", "8.0.0");
 
             modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole", b =>
                 {
diff --git a/TalentBlazor/Migrations/20231019062137_CreateIdentitySchema.cs b/TalentBlazor/Migrations/20231117085343_CreateIdentitySchema.cs
similarity index 99%
rename from TalentBlazor/Migrations/20231019062137_CreateIdentitySchema.cs
rename to TalentBlazor/Migrations/20231117085343_CreateIdentitySchema.cs
index 45f1ea1..4bcd3d1 100644
--- a/TalentBlazor/Migrations/20231019062137_CreateIdentitySchema.cs
+++ b/TalentBlazor/Migrations/20231117085343_CreateIdentitySchema.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using Microsoft.EntityFrameworkCore.Migrations;
 
 #nullable disable
diff --git a/TalentBlazor/Migrations/ApplicationDbContextModelSnapshot.cs b/TalentBlazor/Migrations/ApplicationDbContextModelSnapshot.cs
index 7efd864..d5a113c 100644
--- a/TalentBlazor/Migrations/ApplicationDbContextModelSnapshot.cs
+++ b/TalentBlazor/Migrations/ApplicationDbContextModelSnapshot.cs
@@ -1,4 +1,4 @@
-// <auto-generated />
+// <auto-generated />
 using System;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Infrastructure;
@@ -15,7 +15,7 @@ partial class ApplicationDbContextModelSnapshot : ModelSnapshot
         protected override void BuildModel(ModelBuilder modelBuilder)
         {
 #pragma warning disable 612, 618
-            modelBuilder.HasAnnotation("ProductVersion", "8.0.0-rc.2.23480.1");
+            modelBuilder.HasAnnotation("ProductVersion", "8.0.0");
 
             modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole", b =>
                 {
diff --git a/TalentBlazor/Program.cs b/TalentBlazor/Program.cs
index 1936429..e837765 100644
--- a/TalentBlazor/Program.cs
+++ b/TalentBlazor/Program.cs
@@ -32,7 +32,7 @@
 // $ dotnet ef database update
 var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
 builder.Services.AddDbContext<ApplicationDbContext>(options =>
-    options.UseSqlite(connectionString));
+    options.UseSqlite(connectionString, b => b.MigrationsAssembly(nameof(TalentBlazor))));
 builder.Services.AddDatabaseDeveloperPageExceptionFilter();
 
 builder.Services.AddIdentityCore<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
diff --git a/TalentBlazor/TalentBlazor.csproj b/TalentBlazor/TalentBlazor.csproj
index bf54c22..a60c54c 100644
--- a/TalentBlazor/TalentBlazor.csproj
+++ b/TalentBlazor/TalentBlazor.csproj
@@ -15,10 +15,10 @@
 
     <ItemGroup>
         <PackageReference Include="Bogus" Version="34.0.2" />
-        <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.0-rc.2.23480.2" />
-        <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.0-rc.2.23480.2" />
-        <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.0.0-rc.2.23480.1" />
-        <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.0-rc.2.23480.1" />
+        <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.*" />
+        <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.*" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.*" />
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.*" />
         <PackageReference Include="Markdig" Version="0.33.0" />
         <PackageReference Include="ServiceStack" Version="8.*" />
         <PackageReference Include="ServiceStack.Blazor" Version="8.*" />
@@ -65,55 +65,6 @@
           <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </Content>
     </ItemGroup>
-
-    <ItemGroup>
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\AccessDenied.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\ConfirmEmail.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\ConfirmEmailChange.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\ExternalLogin.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\ForgotPassword.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\ForgotPasswordConfirmation.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\InvalidPasswordReset.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\InvalidUser.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Lockout.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Login.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\LoginWith2fa.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\LoginWithRecoveryCode.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\ChangePassword.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\DeletePersonalData.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\Disable2fa.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\Email.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\EnableAuthenticator.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\ExternalLogins.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\GenerateRecoveryCodes.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\Index.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\PersonalData.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\ResetAuthenticator.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\SetPassword.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\TwoFactorAuthentication.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Manage\_Imports.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\Register.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\RegisterConfirmation.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\ResendEmailConfirmation.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\ResetPassword.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\ResetPasswordConfirmation.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Account\_Imports.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Admin\Bookings.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Admin\Coupons.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Admin\Index.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Counter.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Docs.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Error.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Home.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Profile.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Secure\Bookings.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Secure\Coupons.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\TodoMvc.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Weather.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Admin\Users\Create.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Admin\Users\Edit.razor" />
-      <_ContentIncludedByDefault Remove="Components\Pages\Admin\Users\Index.razor" />
-    </ItemGroup>
     
     <Target Name="tailwind" BeforeTargets="Publish">
         <Exec Command="npm run ui:build" WorkingDirectory="./" />
diff --git a/TalentBlazor/wwwroot/css/app.css b/TalentBlazor/wwwroot/css/app.css
index f121aa6..c3add1a 100644
--- a/TalentBlazor/wwwroot/css/app.css
+++ b/TalentBlazor/wwwroot/css/app.css
@@ -1 +1,4085 @@
-/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af}input::placeholder,textarea::placeholder{color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}[multiple],[type=date],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}[multiple]:focus,[type=date]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,select:focus,textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--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);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}[multiple]{background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--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(2px + 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)}[type=checkbox]:checked,[type=radio]:checked{border-color:#0000;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{border-color:#0000;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{border-color:#0000;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px auto -webkit-focus-ring-color}.aspect-h-9{--tw-aspect-h:9}.aspect-w-16{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%);--tw-aspect-w:16}.aspect-w-16>*{position:absolute;height:100%;width:100%;top:0;right:0;bottom:0;left:0}.animate-spin{animation:spin 1s linear infinite}.dark{color-scheme:dark}.lang:before{content:"$ "}.notes a{color:#1e40af}.dark .notes{color:#9ca3af}.dark .notes a{color:#3f83f8}.svg-external{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.25rem' height='1.25rem' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231E40AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14'/%3E%3C/svg%3E") no-repeat 100% 100%;padding-right:1.35rem}.dark .svg-external{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.25rem' height='1.25rem' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%233f83f8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14'/%3E%3C/svg%3E") no-repeat 100% 100%}div.example-code{margin:28px 0;border-radius:8px}.dark p code{background-color:#1e3a8a;color:#f3f4f6}p code{color:#3b82f6;background-color:#eff6ff;padding:.25em .5rem;border-radius:.25rem}.example ::-webkit-scrollbar{width:8px;height:6px}.example ::-webkit-scrollbar-thumb{background-color:#ccc}.youtube{width:448px;height:252px}input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-transition:background-color 600000s 0s,color 600000s 0s;transition:background-color 600000s 0s,color 600000s 0s}input[data-autocompleted]{background-color:initial!important}strong{font-weight:600}[data-collapsed] [data-collapse=hidden]{display:none}[data-collapse-off=opacity-100]{opacity:1}[data-collapsed] [data-collapse=opacity-0]{opacity:0}[data-collapse-off=-translate-x-full]{transform:translateX(0)}[data-collapsed] [data-collapse=-translate-x-full]{transform:translateX(-100%)}@media (min-width:640px){.youtube{width:761px;height:428px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.bottom-0{bottom:0}.left-4{left:1rem}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-20{top:5rem}.top-3{top:.75rem}.top-3\.5{top:.875rem}.top-4{top:1rem}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.col-span-12{grid-column:span 12/span 12}.col-end-1{grid-column-end:1}.float-left{float:left}.m-0{margin:0}.m-2{margin:.5rem}.m-3{margin:.75rem}.m-4{margin:1rem}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.-mx-1\.5{margin-left:-.375rem;margin-right:-.375rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-my-1{margin-top:-.25rem;margin-bottom:-.25rem}.-my-1\.5{margin-top:-.375rem;margin-bottom:-.375rem}.-my-2{margin-top:-.5rem;margin-bottom:-.5rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.-mb-8{margin-bottom:-2rem}.-mb-px{margin-bottom:-1px}.-ml-0{margin-left:0}.-ml-0\.5{margin-left:-.125rem}.-ml-1{margin-left:-.25rem}.-ml-px{margin-left:-1px}.-mr-1{margin-right:-.25rem}.-mr-12{margin-right:-3rem}.-mr-24{margin-right:-6rem}.-mt-0{margin-top:0}.-mt-0\.5{margin-top:-.125rem}.-mt-1{margin-top:-.25rem}.-mt-12{margin-top:-3rem}.-mt-8{margin-top:-2rem}.-mt-px{margin-top:-1px}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.me-1{margin-inline-end:.25rem}.me-2{margin-inline-end:.5rem}.me-3{margin-inline-end:.75rem}.me-4{margin-inline-end:1rem}.ml-0{margin-left:0}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-0{margin-right:0}.mr-0\.5{margin-right:.125rem}.mr-1{margin-right:.25rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.ms-1{margin-inline-start:.25rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.flow-root{display:flow-root}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-24{height:6rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-96{height:24rem}.h-full{height:100%}.max-h-24{max-height:6rem}.max-h-60{max-height:15rem}.max-h-96{max-height:24rem}.min-h-0{min-height:0}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.w-0{width:0}.w-0\.5{width:.125rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-80{width:20rem}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.grow-0{flex-grow:0}.border-collapse{border-collapse:collapse}.origin-top-left{transform-origin:top left}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.translate-x-0{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))}.translate-x-0{--tw-translate-x:0px}.translate-x-5{--tw-translate-x:1.25rem}.translate-x-5,.translate-x-full{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))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-4{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))}.translate-y-4{--tw-translate-y:1rem}.rotate-180{--tw-rotate:180deg}.rotate-180,.scale-100{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))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{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 spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.scroll-py-4{scroll-padding-top:1rem;scroll-padding-bottom:1rem}.list-decimal{list-style-type:decimal}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-stretch{justify-content:stretch}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.gap-y-8{row-gap:2rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem*var(--tw-space-x-reverse));margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.divide-gray-300>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(209 213 219/var(--tw-divide-opacity))}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity))}.border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.border-pink-500{--tw-border-opacity:1;border-color:rgb(236 72 153/var(--tw-border-opacity))}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity))}.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-yellow-400{--tw-border-opacity:1;border-color:rgb(250 204 21/var(--tw-border-opacity))}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-cyan-600{--tw-bg-opacity:1;background-color:rgb(8 145 178/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233/var(--tw-bg-opacity))}.bg-sky-600{--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.bg-opacity-75{--tw-bg-opacity:0.75}.fill-gray-600{fill:#4b5563}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-1\.5{padding-bottom:.375rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-8{padding-bottom:2rem}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-11{padding-left:2.75rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pr-1{padding-right:.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-6{padding-right:1.5rem}.pr-9{padding-right:2.25rem}.pt-0{padding-top:0}.pt-0\.5{padding-top:.125rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.align-text-top{vertical-align:text-top}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wider{letter-spacing:.05em}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-blue-900{--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity))}.text-danger{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity))}.text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.text-indigo-700{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/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))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity))}.text-sky-500{--tw-text-opacity:1;color:rgb(14 165 233/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-success{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-red-300::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(252 165 165/var(--tw-placeholder-opacity))}.placeholder-red-300::placeholder{--tw-placeholder-opacity:1;color:rgb(252 165 165/var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px 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{outline-style:solid}.ring-0{--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(var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-0,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.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)}.ring-4{--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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-4,.ring-8{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-8{--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(8px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-purple-500{--tw-ring-opacity:1;--tw-ring-color:rgb(168 85 247/var(--tw-ring-opacity))}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.file\:mr-4::file-selector-button{margin-right:1rem}.file\:rounded-full::file-selector-button{border-radius:9999px}.file\:border-0::file-selector-button{border-width:0}.file\:bg-violet-50::file-selector-button{--tw-bg-opacity:1;background-color:rgb(245 243 255/var(--tw-bg-opacity))}.file\:px-4::file-selector-button{padding-left:1rem;padding-right:1rem}.file\:py-2::file-selector-button{padding-top:.5rem;padding-bottom:.5rem}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-semibold::file-selector-button{font-weight:600}.file\:text-violet-700::file-selector-button{--tw-text-opacity:1;color:rgb(109 40 217/var(--tw-text-opacity))}.focus-within\:border-indigo-500:focus-within{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.focus-within\:border-red-500:focus-within{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.focus-within\:border-transparent:focus-within{border-color:#0000}.focus-within\:outline-none:focus-within{outline:2px solid #0000;outline-offset:2px}.focus-within\:ring-1:focus-within{--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)}.focus-within\:ring-1:focus-within,.focus-within\:ring-2:focus-within{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-2:focus-within{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus-within\:ring-indigo-500:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus-within\:ring-red-500:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px}.hover\:border-gray-200:hover{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\:bg-cyan-700:hover{--tw-bg-opacity:1;background-color:rgb(14 116 144/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-green-100:hover{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:bg-indigo-200:hover{--tw-bg-opacity:1;background-color:rgb(199 210 254/var(--tw-bg-opacity))}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity))}.hover\:bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity))}.hover\:bg-red-200:hover{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.hover\:bg-sky-700:hover{--tw-bg-opacity:1;background-color:rgb(3 105 161/var(--tw-bg-opacity))}.hover\:bg-yellow-100:hover{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.hover\:bg-yellow-50:hover{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.hover\:text-gray-400:hover{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-indigo-500:hover{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.hover\:text-indigo-600:hover{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.hover\:text-sky-500:hover{--tw-text-opacity:1;color:rgb(14 165 233/var(--tw-text-opacity))}.hover\:text-success:hover{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.hover\:no-underline:hover{text-decoration-line:none}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:file\:bg-violet-100::file-selector-button:hover{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity))}.focus\:\!border-none:focus{border-style:none!important}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.focus\:border-purple-500:focus{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity))}.focus\:border-red-500:focus{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.focus\:bg-indigo-500:focus{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity))}.focus\:bg-red-500:focus{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\:\!outline-none:focus{outline:2px solid #0000!important;outline-offset:2px!important}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-0:focus{--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(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-1:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-1:focus{--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)}.focus\:ring-2:focus{--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(2px + 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)}.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))}.focus\:ring-cyan-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(103 232 249/var(--tw-ring-opacity))}.focus\:ring-cyan-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(6 182 212/var(--tw-ring-opacity))}.focus\:ring-green-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(134 239 172/var(--tw-ring-opacity))}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity))}.focus\:ring-green-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(22 163 74/var(--tw-ring-opacity))}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus\:ring-pink-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(236 72 153/var(--tw-ring-opacity))}.focus\:ring-purple-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(168 85 247/var(--tw-ring-opacity))}.focus\:ring-red-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(252 165 165/var(--tw-ring-opacity))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.focus\:ring-sky-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(125 211 252/var(--tw-ring-opacity))}.focus\:ring-sky-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233/var(--tw-ring-opacity))}.focus\:ring-white:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity))}.focus\:ring-yellow-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(202 138 4/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-gray-100:focus{--tw-ring-offset-color:#f3f4f6}.focus\:ring-offset-gray-50:focus{--tw-ring-offset-color:#f9fafb}.focus\:ring-offset-green-50:focus{--tw-ring-offset-color:#f0fdf4}.focus\:ring-offset-yellow-50:focus{--tw-ring-offset-color:#fefce8}.group:hover .group-hover\:inline{display:inline}.group:hover .group-hover\:text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.group:hover .group-hover\:text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.group:hover .group-hover\:opacity-75{opacity:.75}:is(.dark .dark\:divide-gray-700)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity))}:is(.dark .dark\:divide-gray-800)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(31 41 55/var(--tw-divide-opacity))}:is(.dark .dark\:border-gray-600){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}:is(.dark .dark\:border-gray-700){--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}:is(.dark .dark\:border-gray-800){--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}:is(.dark .dark\:border-indigo-400){--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity))}:is(.dark .dark\:bg-black){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}:is(.dark .dark\:bg-blue-200){--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}:is(.dark .dark\:bg-blue-600){--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}:is(.dark .dark\:bg-blue-800){--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity))}:is(.dark .dark\:bg-cyan-600){--tw-bg-opacity:1;background-color:rgb(8 145 178/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-400){--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-700){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-800){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-900){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-200){--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-600){--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}:is(.dark .dark\:bg-green-900){--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-400){--tw-bg-opacity:1;background-color:rgb(129 140 248/var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-800){--tw-bg-opacity:1;background-color:rgb(55 48 163/var(--tw-bg-opacity))}:is(.dark .dark\:bg-indigo-900){--tw-bg-opacity:1;background-color:rgb(49 46 129/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-200){--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-300){--tw-bg-opacity:1;background-color:rgb(252 165 165/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-500){--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-600){--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-900){--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity))}:is(.dark .dark\:bg-sky-600){--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity))}:is(.dark .dark\:bg-transparent){background-color:initial}:is(.dark .dark\:bg-yellow-200){--tw-bg-opacity:1;background-color:rgb(254 240 138/var(--tw-bg-opacity))}:is(.dark .dark\:bg-opacity-75){--tw-bg-opacity:0.75}:is(.dark .dark\:fill-gray-300){fill:#d1d5db}:is(.dark .dark\:text-black){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}:is(.dark .dark\:text-blue-300){--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity))}:is(.dark .dark\:text-blue-400){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-100){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-300){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-400){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-50){--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-500){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-600){--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}:is(.dark .dark\:text-green-100){--tw-text-opacity:1;color:rgb(220 252 231/var(--tw-text-opacity))}:is(.dark .dark\:text-green-400){--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}:is(.dark .dark\:text-green-500){--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}:is(.dark .dark\:text-green-600){--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-300){--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-400){--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-500){--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}:is(.dark .dark\:text-red-100){--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity))}:is(.dark .dark\:text-red-800){--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}:is(.dark .dark\:text-slate-400){--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}:is(.dark .dark\:text-white){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:ring-offset-black){--tw-ring-offset-color:#000}:is(.dark .dark\:ring-offset-green-200){--tw-ring-offset-color:#bbf7d0}:is(.dark .dark\:file\:bg-violet-900)::file-selector-button{--tw-bg-opacity:1;background-color:rgb(76 29 149/var(--tw-bg-opacity))}:is(.dark .dark\:file\:text-violet-200)::file-selector-button{--tw-text-opacity:1;color:rgb(221 214 254/var(--tw-text-opacity))}:is(.dark .dark\:hover\:bg-blue-700:hover){--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-blue-900:hover){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-cyan-700:hover){--tw-bg-opacity:1;background-color:rgb(14 116 144/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-700:hover){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-900:hover){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-green-700:hover){--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-indigo-300:hover){--tw-bg-opacity:1;background-color:rgb(165 180 252/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-indigo-800:hover){--tw-bg-opacity:1;background-color:rgb(55 48 163/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-red-200:hover){--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-red-700:hover){--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-sky-700:hover){--tw-bg-opacity:1;background-color:rgb(3 105 161/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:text-blue-200:hover){--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-300:hover){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-400:hover){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-50:hover){--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-indigo-400:hover){--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-sky-400:hover){--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-white:hover){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:hover\:file\:bg-violet-800)::file-selector-button:hover{--tw-bg-opacity:1;background-color:rgb(91 33 182/var(--tw-bg-opacity))}:is(.dark .dark\:focus\:text-black:focus){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}:is(.dark .dark\:focus\:ring-black:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-blue-800:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(30 64 175/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-cyan-500:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(6 182 212/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-green-500:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-indigo-600:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-red-500:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-sky-500:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233/var(--tw-ring-opacity))}@media (min-width:640px){.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.sm\:mx-4{margin-left:1rem;margin-right:1rem}.sm\:my-8{margin-top:2rem;margin-bottom:2rem}.sm\:-mt-16{margin-top:-4rem}.sm\:ml-6{margin-left:1.5rem}.sm\:mt-0{margin-top:0}.sm\:mt-2{margin-top:.5rem}.sm\:block{display:block}.sm\:inline-block{display:inline-block}.sm\:flex{display:flex}.sm\:table-cell{display:table-cell}.sm\:hidden{display:none}.sm\:h-32{height:8rem}.sm\:h-96{height:24rem}.sm\:h-screen{height:100vh}.sm\:w-32{width:8rem}.sm\:w-full{width:100%}.sm\:min-w-0{min-width:0}.sm\:max-w-prose{max-width:65ch}.sm\:max-w-xl{max-width:36rem}.sm\:flex-1{flex:1 1 0%}.sm\:translate-y-0{--tw-translate-y:0px}.sm\:scale-100,.sm\:translate-y-0{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))}.sm\:scale-100{--tw-scale-x:1;--tw-scale-y:1}.sm\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;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))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-row-reverse{flex-direction:row-reverse}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.sm\:space-x-5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem*var(--tw-space-x-reverse));margin-left:calc(1.25rem*(1 - var(--tw-space-x-reverse)))}.sm\:space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.sm\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem*var(--tw-space-x-reverse));margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)))}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.sm\:overflow-hidden,.sm\:truncate{overflow:hidden}.sm\:truncate{text-overflow:ellipsis;white-space:nowrap}.sm\:rounded{border-radius:.25rem}.sm\:rounded-lg{border-radius:.5rem}.sm\:rounded-md{border-radius:.375rem}.sm\:border-t-0{border-top-width:0}.sm\:p-0{padding:0}.sm\:p-6{padding:1.5rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-14{padding-left:3.5rem;padding-right:3.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.sm\:pb-0{padding-bottom:0}.sm\:pb-1{padding-bottom:.25rem}.sm\:pb-4{padding-bottom:1rem}.sm\:pl-16{padding-left:4rem}.sm\:pl-3{padding-left:.75rem}.sm\:pr-6{padding-right:1.5rem}.sm\:pt-1{padding-top:.25rem}.sm\:pt-3{padding-top:.75rem}.sm\:text-left{text-align:left}.sm\:align-middle{vertical-align:middle}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.sm\:duration-700{transition-duration:.7s}}@media (min-width:768px){.md\:fixed{position:fixed}.md\:inset-y-0{top:0;bottom:0}.md\:order-1{order:1}.md\:order-2{order:2}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:-mt-px{margin-top:-1px}.md\:mt-0{margin-top:0}.md\:mt-2{margin-top:.5rem}.md\:block{display:block}.md\:inline-block{display:inline-block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:table-cell{display:table-cell}.md\:grid{display:grid}.md\:hidden{display:none}.md\:w-64{width:16rem}.md\:max-w-xl{max-width:36rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-col{flex-direction:column}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:1rem}.md\:gap-6{gap:1.5rem}.md\:divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.md\:divide-y-0>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(0px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(0px*var(--tw-divide-y-reverse))}.md\:rounded-lg{border-radius:.5rem}.md\:p-4{padding:1rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:pl-64{padding-left:16rem}.md\:pr-8{padding-right:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-start-1{grid-column-start:1}.lg\:col-start-3{grid-column-start:3}.lg\:-mx-8{margin-left:-2rem;margin-right:-2rem}.lg\:ml-10{margin-left:2.5rem}.lg\:ml-4{margin-left:1rem}.lg\:ml-6{margin-left:1.5rem}.lg\:mt-0{margin-top:0}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:table-cell{display:table-cell}.lg\:hidden{display:none}.lg\:h-48{height:12rem}.lg\:max-w-3xl{max-width:48rem}.lg\:max-w-7xl{max-width:80rem}.lg\:max-w-screen-md{max-width:768px}.lg\:grid-flow-col-dense{grid-auto-flow:column dense}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:justify-end{justify-content:flex-end}.lg\:rounded-md{border-radius:.375rem}.lg\:p-2{padding:.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.lg\:pr-8{padding-right:2rem}.lg\:hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}:is(.dark .dark\:lg\:hover\:bg-gray-900:hover){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}}@media (min-width:1280px){.xl\:col-span-6{grid-column:span 6/span 6}.xl\:ml-4{margin-left:1rem}.xl\:mt-0{margin-top:0}.xl\:inline{display:inline}.xl\:flex{display:flex}.xl\:table-cell{display:table-cell}.xl\:max-w-3xl{max-width:48rem}.xl\:max-w-screen-lg{max-width:1024px}.xl\:items-center{align-items:center}.xl\:justify-between{justify-content:space-between}}@media (min-width:1536px){.\32xl\:mt-5{margin-top:1.25rem}.\32xl\:block{display:block}.\32xl\:table-cell{display:table-cell}.\32xl\:hidden{display:none}.\32xl\:max-w-screen-xl{max-width:1280px}}
\ No newline at end of file
+/*
+! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+/* @tailwindcss/forms css */
+
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='month'],[type='search'],[type='tel'],[type='time'],[multiple],textarea,select
+{
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+  background-color:#fff;
+  border-color:#6b7280;
+  border-width:1px;
+  border-radius:0;
+  padding:0.5rem 0.75rem;
+  font-size:1rem;
+  line-height:1.5rem
+}
+
+[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='month']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[multiple]:focus,textarea:focus,select:focus{
+  outline:2px solid transparent;
+  outline-offset:2px;
+  --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width:0px;
+  --tw-ring-offset-color:#fff;
+  --tw-ring-color:#2563eb;
+  --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);
+  border-color:#2563eb
+}
+
+input::-moz-placeholder,textarea::-moz-placeholder{
+  color:#6b7280;
+  opacity:1
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder{
+  color:#6b7280;
+  opacity:1
+}
+
+input::placeholder,textarea::placeholder{
+  color:#6b7280;
+  opacity:1
+}
+
+select{
+  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position:right 0.5rem center;
+  background-repeat:no-repeat;
+  background-size:1.5em 1.5em;
+  padding-right:2.5rem;
+  -webkit-print-color-adjust:exact;
+  color-adjust:exact
+}
+
+[multiple]{
+  background-image:initial;
+  background-position:initial;
+  background-repeat:unset;
+  background-size:initial;
+  padding-right:0.75rem;
+  -webkit-print-color-adjust:unset;
+  color-adjust:unset;
+}
+
+[type='checkbox'],[type='radio']{
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+  padding:0;
+  -webkit-print-color-adjust:exact;
+  color-adjust:exact;
+  display:inline-block;
+  vertical-align:middle;
+  background-origin:border-box;
+  -webkit-user-select:none;
+  -moz-user-select:none;
+  user-select:none;
+  flex-shrink:0;
+  height:1rem;
+  width:1rem;
+  color:#2563eb;
+  background-color:#fff;
+  border-color:#6b7280;
+  border-width:1px
+}
+
+[type='checkbox']{
+  border-radius:0
+}
+
+[type='radio']{
+  border-radius:100%
+}
+
+[type='checkbox']:focus,[type='radio']:focus{
+  outline:2px solid transparent;
+  outline-offset:2px;
+  --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width:2px;
+  --tw-ring-offset-color:#fff;
+  --tw-ring-color:#2563eb;
+  --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(2px + 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)
+}
+
+[type='checkbox']:checked,[type='radio']:checked{
+  border-color:transparent;
+  background-color:currentColor;
+  background-size:100% 100%;
+  background-position:center;
+  background-repeat:no-repeat
+}
+
+[type='checkbox']:checked{
+  background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
+}
+
+[type='radio']:checked{
+  background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")
+}
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
+  border-color:transparent;
+  background-color:currentColor
+}
+
+[type='checkbox']:indeterminate{
+  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color:transparent;
+  background-color:currentColor;
+  background-size:100% 100%;
+  background-position:center;
+  background-repeat:no-repeat
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
+  border-color:transparent;
+  background-color:currentColor
+}
+
+[type='file']{
+  background:unset;
+  border-color:inherit;
+  border-width:0;
+  border-radius:0;
+  padding:0;
+  font-size:unset;
+  line-height:inherit
+}
+
+[type='file']:focus{
+  outline:1px auto -webkit-focus-ring-color;
+}
+
+/* @tailwindcss/aspect css */
+
+.aspect-h-9 {
+  --tw-aspect-h: 9;
+}
+
+.aspect-w-16 {
+  position: relative;
+  padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
+  --tw-aspect-w: 16;
+}
+
+.aspect-w-16 > * {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+.lang:before {
+  content: "$ ";
+}
+
+.notes a {
+  color: rgb(30 64 175);
+}
+
+.dark .notes {
+  color: rgb(156 163 175);
+}
+
+.dark .notes a {
+  color: rgb(63 131 248);
+}
+
+.svg-external {
+  background: url("data:image/svg+xml,%3Csvg width='1.25rem' height='1.25rem' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14' stroke='%231E40AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right;
+  padding-right: 1.35rem;
+}
+
+.dark .svg-external {
+  background: url("data:image/svg+xml,%3Csvg width='1.25rem' height='1.25rem' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14' stroke='%233f83f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right;
+}
+
+div.example-code {
+  margin: 28px 0;
+  border-radius: 8px;
+}
+
+.dark p code {
+  background-color: rgb(30 58 138);
+  /*text-blue-900*/
+  color: rgb(243 244 246);
+  /*text-gray-100*/
+}
+
+p code {
+  color: #3b82f6;
+  background-color: #eff6ff;
+  padding: 0.25em 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.example ::-webkit-scrollbar {
+  width: 8px;
+  height: 6px
+}
+
+.example ::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+}
+
+.youtube {
+  width: 448px;
+  height: 252px;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  -webkit-transition: background-color 600000s 0s, color 600000s 0s;
+  transition: background-color 600000s 0s, color 600000s 0s;
+}
+
+input[data-autocompleted] {
+  background-color: transparent !important;
+}
+
+strong {
+  font-weight: 600;
+}
+
+[data-collapsed] [data-collapse=hidden] {
+  display: none
+}
+
+[data-collapse-off=opacity-100] {
+  opacity: 1
+}
+
+[data-collapsed] [data-collapse=opacity-0] {
+  opacity: 0
+}
+
+[data-collapse-off=-translate-x-full] {
+  transform: translateX(0)
+}
+
+[data-collapsed] [data-collapse=-translate-x-full] {
+  transform: translateX(-100%)
+}
+
+@media (min-width: 640px) {
+  .youtube {
+    width: 761px;
+    height: 428px;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-20 {
+  top: 5rem;
+}
+
+.top-3 {
+  top: 0.75rem;
+}
+
+.top-3\.5 {
+  top: 0.875rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.col-span-12 {
+  grid-column: span 12 / span 12;
+}
+
+.col-end-1 {
+  grid-column-end: 1;
+}
+
+.float-left {
+  float: left;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-3 {
+  margin: 0.75rem;
+}
+
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.-mx-1\.5 {
+  margin-left: -0.375rem;
+  margin-right: -0.375rem;
+}
+
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
+.-mx-4 {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+.-my-1 {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+}
+
+.-my-1\.5 {
+  margin-top: -0.375rem;
+  margin-bottom: -0.375rem;
+}
+
+.-my-2 {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.-mb-8 {
+  margin-bottom: -2rem;
+}
+
+.-mb-px {
+  margin-bottom: -1px;
+}
+
+.-ml-0 {
+  margin-left: -0px;
+}
+
+.-ml-0\.5 {
+  margin-left: -0.125rem;
+}
+
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.-ml-px {
+  margin-left: -1px;
+}
+
+.-mr-1 {
+  margin-right: -0.25rem;
+}
+
+.-mr-24 {
+  margin-right: -6rem;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.-mt-12 {
+  margin-top: -3rem;
+}
+
+.-mt-8 {
+  margin-top: -2rem;
+}
+
+.-mt-px {
+  margin-top: -1px;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.me-1 {
+  margin-inline-end: 0.25rem;
+}
+
+.me-2 {
+  margin-inline-end: 0.5rem;
+}
+
+.me-3 {
+  margin-inline-end: 0.75rem;
+}
+
+.me-4 {
+  margin-inline-end: 1rem;
+}
+
+.ml-0 {
+  margin-left: 0px;
+}
+
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-8 {
+  margin-left: 2rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-0 {
+  margin-right: 0px;
+}
+
+.mr-0\.5 {
+  margin-right: 0.125rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-1\.5 {
+  margin-right: 0.375rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.ms-1 {
+  margin-inline-start: 0.25rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.table {
+  display: table;
+}
+
+.flow-root {
+  display: flow-root;
+}
+
+.grid {
+  display: grid;
+}
+
+.contents {
+  display: contents;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-0 {
+  height: 0px;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-24 {
+  height: 6rem;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-96 {
+  height: 24rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.max-h-24 {
+  max-height: 6rem;
+}
+
+.max-h-60 {
+  max-height: 15rem;
+}
+
+.max-h-96 {
+  max-height: 24rem;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-0 {
+  width: 0px;
+}
+
+.w-0\.5 {
+  width: 0.125rem;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-11 {
+  width: 2.75rem;
+}
+
+.w-12 {
+  width: 3rem;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-80 {
+  width: 20rem;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
+.min-w-full {
+  min-width: 100%;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.shrink {
+  flex-shrink: 1;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.grow-0 {
+  flex-grow: 0;
+}
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.origin-top-left {
+  transform-origin: top left;
+}
+
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  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));
+}
+
+.translate-x-5 {
+  --tw-translate-x: 1.25rem;
+  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));
+}
+
+.translate-x-full {
+  --tw-translate-x: 100%;
+  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));
+}
+
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  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));
+}
+
+.translate-y-4 {
+  --tw-translate-y: 1rem;
+  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));
+}
+
+.rotate-180 {
+  --tw-rotate: 180deg;
+  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));
+}
+
+.scale-100 {
+  --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));
+}
+
+.scale-95 {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  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));
+}
+
+.transform {
+  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 spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-text {
+  cursor: text;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.resize {
+  resize: both;
+}
+
+.scroll-py-4 {
+  scroll-padding-top: 1rem;
+  scroll-padding-bottom: 1rem;
+}
+
+.list-decimal {
+  list-style-type: decimal;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-stretch {
+  justify-content: stretch;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
+.gap-y-3 {
+  row-gap: 0.75rem;
+}
+
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
+.gap-y-8 {
+  row-gap: 2rem;
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
+.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
+}
+
+.self-center {
+  align-self: center;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre {
+  white-space: pre;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-r-md {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-0 {
+  border-width: 0px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-l-4 {
+  border-left-width: 4px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-none {
+  border-style: none;
+}
+
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.border-green-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(74 222 128 / var(--tw-border-opacity));
+}
+
+.border-indigo-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+}
+
+.border-pink-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(236 72 153 / var(--tw-border-opacity));
+}
+
+.border-purple-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(168 85 247 / var(--tw-border-opacity));
+}
+
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
+.border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(248 113 113 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-yellow-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 204 21 / var(--tw-border-opacity));
+}
+
+.bg-amber-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 191 36 / var(--tw-bg-opacity));
+}
+
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
+.bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
+.bg-green-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.bg-purple-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
+.bg-sky-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-75 {
+  --tw-bg-opacity: 0.75;
+}
+
+.fill-gray-600 {
+  fill: #4b5563;
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.p-0 {
+  padding: 0px;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-14 {
+  padding-top: 3.5rem;
+  padding-bottom: 3.5rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.pb-0 {
+  padding-bottom: 0px;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-1\.5 {
+  padding-bottom: 0.375rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
+.pl-11 {
+  padding-left: 2.75rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pl-2\.5 {
+  padding-left: 0.625rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
+.pr-9 {
+  padding-right: 2.25rem;
+}
+
+.pt-0 {
+  padding-top: 0px;
+}
+
+.pt-0\.5 {
+  padding-top: 0.125rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-1\.5 {
+  padding-top: 0.375rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.align-bottom {
+  vertical-align: bottom;
+}
+
+.align-text-top {
+  vertical-align: text-top;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.normal-case {
+  text-transform: none;
+}
+
+.leading-5 {
+  line-height: 1.25rem;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.leading-7 {
+  line-height: 1.75rem;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.tracking-tighter {
+  letter-spacing: -0.05em;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
+.text-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
+.text-danger {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity));
+}
+
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity));
+}
+
+.text-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+
+.text-indigo-400 {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.text-indigo-700 {
+  --tw-text-opacity: 1;
+  color: rgb(67 56 202 / var(--tw-text-opacity));
+}
+
+.text-purple-600 {
+  --tw-text-opacity: 1;
+  color: rgb(147 51 234 / var(--tw-text-opacity));
+}
+
+.text-purple-800 {
+  --tw-text-opacity: 1;
+  color: rgb(107 33 168 / var(--tw-text-opacity));
+}
+
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / 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));
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity));
+}
+
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
+}
+
+.text-sky-500 {
+  --tw-text-opacity: 1;
+  color: rgb(14 165 233 / var(--tw-text-opacity));
+}
+
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgb(250 204 21 / var(--tw-text-opacity));
+}
+
+.text-yellow-700 {
+  --tw-text-opacity: 1;
+  color: rgb(161 98 7 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.placeholder-gray-400::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-400::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-red-300::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-red-300::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-placeholder-opacity));
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.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);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --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);
+}
+
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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 {
+  outline-style: solid;
+}
+
+.ring-0 {
+  --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(0px + 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-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-4 {
+  --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(4px + 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-8 {
+  --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(8px + 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-black {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
+}
+
+.ring-purple-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
+}
+
+.ring-white {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+}
+
+.ring-opacity-5 {
+  --tw-ring-opacity: 0.05;
+}
+
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-100 {
+  transition-duration: 100ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.duration-500 {
+  transition-duration: 500ms;
+}
+
+.duration-75 {
+  transition-duration: 75ms;
+}
+
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.file\:mr-4::file-selector-button {
+  margin-right: 1rem;
+}
+
+.file\:rounded-full::file-selector-button {
+  border-radius: 9999px;
+}
+
+.file\:border-0::file-selector-button {
+  border-width: 0px;
+}
+
+.file\:bg-violet-50::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
+}
+
+.file\:px-4::file-selector-button {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.file\:py-2::file-selector-button {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.file\:text-sm::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.file\:font-semibold::file-selector-button {
+  font-weight: 600;
+}
+
+.file\:text-violet-700::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgb(109 40 217 / var(--tw-text-opacity));
+}
+
+.focus-within\:border-indigo-500:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+}
+
+.focus-within\:border-red-500:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
+.focus-within\:border-transparent:focus-within {
+  border-color: transparent;
+}
+
+.focus-within\:outline-none:focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-within\:ring-1:focus-within {
+  --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);
+}
+
+.focus-within\:ring-2:focus-within {
+  --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(2px + 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);
+}
+
+.focus-within\:ring-indigo-500:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
+.focus-within\:ring-red-500:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
+}
+
+.focus-within\:ring-offset-2:focus-within {
+  --tw-ring-offset-width: 2px;
+}
+
+.hover\:border-gray-200:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.hover\:border-gray-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.hover\:border-gray-400:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-green-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-yellow-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
+}
+
+.hover\:text-blue-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+.hover\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.hover\:text-green-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
+.hover\:text-indigo-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
+}
+
+.hover\:text-indigo-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.hover\:text-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
+.hover\:text-sky-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(14 165 233 / var(--tw-text-opacity));
+}
+
+.hover\:no-underline:hover {
+  text-decoration-line: none;
+}
+
+.hover\:shadow-2xl:hover {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:file\:bg-violet-100::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 233 254 / var(--tw-bg-opacity));
+}
+
+.focus\:\!border-none:focus {
+  border-style: none !important;
+}
+
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.focus\:border-indigo-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+}
+
+.focus\:border-purple-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(168 85 247 / var(--tw-border-opacity));
+}
+
+.focus\:border-red-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
+.focus\:bg-indigo-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
+.focus\:bg-red-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.focus\:\!outline-none:focus {
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-0:focus {
+  --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(0px + 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);
+}
+
+.focus\:ring-1:focus {
+  --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);
+}
+
+.focus\:ring-2:focus {
+  --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(2px + 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);
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-green-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-indigo-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-pink-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-purple-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-red-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus\:ring-offset-gray-100:focus {
+  --tw-ring-offset-color: #f3f4f6;
+}
+
+.focus\:ring-offset-gray-50:focus {
+  --tw-ring-offset-color: #f9fafb;
+}
+
+.focus\:ring-offset-green-50:focus {
+  --tw-ring-offset-color: #f0fdf4;
+}
+
+.disabled\:bg-gray-100:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.disabled\:shadow-none:disabled {
+  --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);
+}
+
+.group:hover .group-hover\:inline {
+  display: inline;
+}
+
+.group:hover .group-hover\:text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:opacity-75 {
+  opacity: 0.75;
+}
+
+:is(.dark .dark\:divide-gray-700) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
+}
+
+:is(.dark .dark\:divide-gray-800) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-divide-opacity));
+}
+
+:is(.dark .dark\:border-gray-600) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-gray-700) {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-gray-800) {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-indigo-400) {
+  --tw-border-opacity: 1;
+  border-color: rgb(129 140 248 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:bg-black) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-blue-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-blue-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-gray-400) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-gray-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-gray-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-green-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-green-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 83 45 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-indigo-400) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(129 140 248 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-indigo-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 48 163 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-indigo-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 46 129 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-red-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-red-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-transparent) {
+  background-color: transparent;
+}
+
+:is(.dark .dark\:bg-yellow-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-opacity-75) {
+  --tw-bg-opacity: 0.75;
+}
+
+:is(.dark .dark\:fill-gray-300) {
+  fill: #d1d5db;
+}
+
+:is(.dark .dark\:text-black) {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-blue-300) {
+  --tw-text-opacity: 1;
+  color: rgb(147 197 253 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-blue-400) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-100) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-300) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-400) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-50) {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-500) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-600) {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-100) {
+  --tw-text-opacity: 1;
+  color: rgb(220 252 231 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-300) {
+  --tw-text-opacity: 1;
+  color: rgb(134 239 172 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-400) {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-500) {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-600) {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-indigo-300) {
+  --tw-text-opacity: 1;
+  color: rgb(165 180 252 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-indigo-400) {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-indigo-500) {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-100) {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 226 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-300) {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-800) {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-sky-300) {
+  --tw-text-opacity: 1;
+  color: rgb(125 211 252 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-slate-400) {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-white) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:ring-offset-black) {
+  --tw-ring-offset-color: #000;
+}
+
+:is(.dark .dark\:ring-offset-green-200) {
+  --tw-ring-offset-color: #bbf7d0;
+}
+
+:is(.dark .dark\:file\:bg-violet-900)::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(76 29 149 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:file\:text-violet-200)::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgb(221 214 254 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-blue-900:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-gray-900:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-green-700:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-indigo-300:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 180 252 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-indigo-800:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 48 163 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:text-blue-200:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-blue-400:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-gray-300:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-gray-400:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-gray-50:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-green-400:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-indigo-400:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-red-400:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-sky-400:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(56 189 248 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-white:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:file\:bg-violet-800)::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(91 33 182 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:focus\:text-black:focus) {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:disabled\:bg-gray-800:disabled) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+@media (min-width: 640px) {
+  .sm\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .sm\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .sm\:-mx-6 {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+
+  .sm\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .sm\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .sm\:-mt-16 {
+    margin-top: -4rem;
+  }
+
+  .sm\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:inline-block {
+    display: inline-block;
+  }
+
+  .sm\:flex {
+    display: flex;
+  }
+
+  .sm\:table-cell {
+    display: table-cell;
+  }
+
+  .sm\:hidden {
+    display: none;
+  }
+
+  .sm\:h-32 {
+    height: 8rem;
+  }
+
+  .sm\:h-96 {
+    height: 24rem;
+  }
+
+  .sm\:h-screen {
+    height: 100vh;
+  }
+
+  .sm\:w-32 {
+    width: 8rem;
+  }
+
+  .sm\:w-full {
+    width: 100%;
+  }
+
+  .sm\:min-w-0 {
+    min-width: 0px;
+  }
+
+  .sm\:max-w-prose {
+    max-width: 65ch;
+  }
+
+  .sm\:max-w-xl {
+    max-width: 36rem;
+  }
+
+  .sm\:flex-1 {
+    flex: 1 1 0%;
+  }
+
+  .sm\:translate-y-0 {
+    --tw-translate-y: 0px;
+    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));
+  }
+
+  .sm\:scale-100 {
+    --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));
+  }
+
+  .sm\:scale-95 {
+    --tw-scale-x: .95;
+    --tw-scale-y: .95;
+    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));
+  }
+
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .sm\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .sm\:items-end {
+    align-items: flex-end;
+  }
+
+  .sm\:items-center {
+    align-items: center;
+  }
+
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .sm\:justify-between {
+    justify-content: space-between;
+  }
+
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .sm\:overflow-hidden {
+    overflow: hidden;
+  }
+
+  .sm\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sm\:rounded {
+    border-radius: 0.25rem;
+  }
+
+  .sm\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .sm\:rounded-md {
+    border-radius: 0.375rem;
+  }
+
+  .sm\:border-t-0 {
+    border-top-width: 0px;
+  }
+
+  .sm\:p-0 {
+    padding: 0px;
+  }
+
+  .sm\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .sm\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .sm\:px-14 {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .sm\:pb-0 {
+    padding-bottom: 0px;
+  }
+
+  .sm\:pb-1 {
+    padding-bottom: 0.25rem;
+  }
+
+  .sm\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .sm\:pl-16 {
+    padding-left: 4rem;
+  }
+
+  .sm\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .sm\:pt-1 {
+    padding-top: 0.25rem;
+  }
+
+  .sm\:text-left {
+    text-align: left;
+  }
+
+  .sm\:align-middle {
+    vertical-align: middle;
+  }
+
+  .sm\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .sm\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .sm\: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);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  .sm\:duration-700 {
+    transition-duration: 700ms;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:order-1 {
+    order: 1;
+  }
+
+  .md\:order-2 {
+    order: 2;
+  }
+
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:-mt-px {
+    margin-top: -1px;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .md\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:inline-block {
+    display: inline-block;
+  }
+
+  .md\:inline {
+    display: inline;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:table-cell {
+    display: table-cell;
+  }
+
+  .md\:grid {
+    display: grid;
+  }
+
+  .md\:max-w-xl {
+    max-width: 36rem;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
+  .md\:gap-4 {
+    gap: 1rem;
+  }
+
+  .md\:gap-6 {
+    gap: 1.5rem;
+  }
+
+  .md\:divide-x > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-x-reverse: 0;
+    border-right-width: calc(1px * var(--tw-divide-x-reverse));
+    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+  }
+
+  .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-y-reverse: 0;
+    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
+  }
+
+  .md\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
+
+  .md\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .md\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .lg\:col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .lg\:col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .lg\:-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
+  .lg\:ml-10 {
+    margin-left: 2.5rem;
+  }
+
+  .lg\:ml-4 {
+    margin-left: 1rem;
+  }
+
+  .lg\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:table-cell {
+    display: table-cell;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:h-48 {
+    height: 12rem;
+  }
+
+  .lg\:max-w-3xl {
+    max-width: 48rem;
+  }
+
+  .lg\:max-w-7xl {
+    max-width: 80rem;
+  }
+
+  .lg\:max-w-screen-md {
+    max-width: 768px;
+  }
+
+  .lg\:grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .lg\:pr-8 {
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .xl\:ml-4 {
+    margin-left: 1rem;
+  }
+
+  .xl\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .xl\:inline {
+    display: inline;
+  }
+
+  .xl\:flex {
+    display: flex;
+  }
+
+  .xl\:table-cell {
+    display: table-cell;
+  }
+
+  .xl\:max-w-3xl {
+    max-width: 48rem;
+  }
+
+  .xl\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
+  .xl\:items-center {
+    align-items: center;
+  }
+
+  .xl\:justify-between {
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
+  .\32xl\:block {
+    display: block;
+  }
+
+  .\32xl\:table-cell {
+    display: table-cell;
+  }
+
+  .\32xl\:hidden {
+    display: none;
+  }
+
+  .\32xl\:max-w-screen-xl {
+    max-width: 1280px;
+  }
+}
\ No newline at end of file
diff --git a/TalentBlazor/wwwroot/mjs/app.mjs b/TalentBlazor/wwwroot/mjs/app.mjs
index dca9e8b..bcf09ca 100644
--- a/TalentBlazor/wwwroot/mjs/app.mjs
+++ b/TalentBlazor/wwwroot/mjs/app.mjs
@@ -1,7 +1,6 @@
-import { $1, $$ } from "@servicestack/client"
-export function mountAll(opt) {
-    $$('[data-module]').forEach(async el => {
-        let modulePath = el.getAttribute('data-module')
+export async function remount() {
+    document.querySelectorAll('[data-module]').forEach(async el => {
+        let modulePath = el.dataset.module
         if (!modulePath) return
         if (!modulePath.startsWith('/') && !modulePath.startsWith('.')) {
             modulePath = `../${modulePath}`
@@ -12,20 +11,13 @@ export function mountAll(opt) {
                 module.default.load()
             }
         } catch (e) {
-            console.error(`Couldn't load module ${el.getAttribute('data-module')}`, e)
+            console.error(`Couldn't load module ${el.dataset.module}`, e)
         }
     })
 }
 
-export async function remount() {
-    mountAll({ force: true })
-}
-
 document.addEventListener('DOMContentLoaded', () =>
     Blazor.addEventListener('enhancedload', () => {
         remount()
         globalThis.hljs?.highlightAll()
-        if (localStorage.getItem('color-scheme') == 'dark') {
-            document.documentElement.classList.add('dark')
-        }
     }))
diff --git a/TalentBlazor/wwwroot/mjs/components/DarkModeToggleLite.mjs b/TalentBlazor/wwwroot/mjs/components/DarkModeToggleLite.mjs
deleted file mode 100644
index 8198423..0000000
--- a/TalentBlazor/wwwroot/mjs/components/DarkModeToggleLite.mjs
+++ /dev/null
@@ -1,35 +0,0 @@
-// Implemented in Vanilla JS to avoid needing Blazor Server or WASM in Layout
-const template = isDark => (`<button type="button" onclick="toggleDarkMode()" class="bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black" role="switch" aria-checked="false">
-    <span class="` + (!isDark ? 'translate-x-5' : 'translate-x-0') + ' pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white dark:bg-black shadow transform ring-0 transition ease-in-out duration-200' + `">
-        <span class="` + (!isDark ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200') + ' absolute inset-0 h-full w-full flex items-center justify-center transition-opacity' + `" aria-hidden="true">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z" /></svg>
-        </span>
-        <span class="` + (!isDark ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100') + ' absolute inset-0 h-full w-full flex items-center justify-center transition-opacity' + `" aria-hidden="true">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z" /></svg>
-        </span>
-    </span>
-</button>`)
-
-const html = document.documentElement
-let isDark = html?.classList.contains('dark')
-function renderDarkMode() {
-    if (isDark) {
-        html?.classList.add('dark')
-    } else {
-        html?.classList.remove('dark')
-    }
-    document.querySelector('#dark-mode-toggle').innerHTML = template(isDark)
-}
-
-function toggleDarkMode() {
-    isDark = !isDark
-    localStorage.setItem('color-scheme', isDark.value ? 'dark' : 'light')
-    renderDarkMode()
-}
-globalThis.toggleDarkMode = toggleDarkMode
-
-export default {
-    load() {
-        renderDarkMode()
-    }
-}
diff --git a/TalentBlazor/wwwroot/mjs/components/Sidebar.mjs b/TalentBlazor/wwwroot/mjs/components/Sidebar.mjs
deleted file mode 100644
index a9b8c0d..0000000
--- a/TalentBlazor/wwwroot/mjs/components/Sidebar.mjs
+++ /dev/null
@@ -1,23 +0,0 @@
-import { on, $1 } from "@servicestack/client"
-
-function hideSidebar() {
-    document.body.setAttribute('data-collapsed', 'true')
-}
-function toggleSidebar() {
-    let collapsed = document.body.getAttribute('data-collapsed')
-    if (collapsed) {
-        document.body.removeAttribute('data-collapsed')
-    } else {
-        hideSidebar()
-    }
-}
-
-on('[data-toggle-sidebar]', {
-    click: toggleSidebar
-})
-
-export default {
-    load() {
-        hideSidebar()
-    }
-}
diff --git a/TalentBlazor/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs b/TalentBlazor/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs
index 69f68e3..89d53c4 100644
--- a/TalentBlazor/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs
+++ b/TalentBlazor/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs
@@ -4,9 +4,6 @@ const loadJs = addScript('lib/js/qrcode.min.js')
 export default {
     async load() {
         await loadJs
-        function render() {
-            new QRCode($1("#qrCode"), $1('#qrCodeData').getAttribute('data-url'))
-        }
-        render()
+        new QRCode($1("#qrCode"), $1('#qrCodeData').dataset.url)
     }
 }
diff --git a/TalentBlazor/wwwroot/tailwind/README.txt b/TalentBlazor/wwwroot/tailwind/README.txt
index 5d39b22..164dc3e 100644
--- a/TalentBlazor/wwwroot/tailwind/README.txt
+++ b/TalentBlazor/wwwroot/tailwind/README.txt
@@ -1 +1,2 @@
 Source code of components containing tailwind classes that also need to be included in tailwind's generated /css/app.css 
+Available from: https://raw.githubusercontent.com/ServiceStack/ServiceStack/main/ServiceStack.Blazor/src/ServiceStack.Blazor/dist/tailwind.html
\ No newline at end of file
diff --git a/TalentBlazor/wwwroot/tailwind/ServiceStack.Blazor.html b/TalentBlazor/wwwroot/tailwind/ServiceStack.Blazor.html
index 0c06ef5..5e4fbaa 100644
--- a/TalentBlazor/wwwroot/tailwind/ServiceStack.Blazor.html
+++ b/TalentBlazor/wwwroot/tailwind/ServiceStack.Blazor.html
@@ -222,7 +222,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Query
 }
 </div>
 @inherits UiComponentBase
-<div class=@ClassNames(BackgroundColor, BorderColor, "border-l-4 p-4", Class)>
+<div class=@ClassNames(BackgroundColor, BorderColor, "border-l-4 p-4", Class) @attributes="AdditionalAttributes">
 <div class="flex">
 <div class="flex-shrink-0">
 @if (Type == AlertType.Warning)
@@ -290,7 +290,7 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Query
 @inherits AlertSuccessBase
 @if (!dismissed)
 {
-<div class=@(ClassNames("rounded-md bg-green-50 dark:bg-green-200 p-4", CssClass())) role="alert">
+<div class=@(ClassNames(Classes, CssClass())) role="alert">
 <div class="flex">
 <div class="flex-shrink-0">
 <svg class="h-5 w-5 text-green-400 dark:text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
@@ -323,6 +323,7 @@ <h3 class="text-sm font-medium text-green-800">
 }
 @code {
 bool dismissed = false;
+public static string Classes { get; set; } = "rounded-md bg-green-50 dark:bg-green-200 p-4";
 }
 @typeparam T
 @inherits TextInputBase
@@ -872,19 +873,19 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 <div class=@ClassNames("relative flex items-start", CssClass())>
 <div class="flex items-center h-5">
 <input type="checkbox"
-class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black"
+class="@CheckboxInput.InputClasses"
 id=@Id
 name=@Id
 @bind="CurrentValueAsBool"
 @attributes="IncludeAttributes">
 </div>
 <div class="ml-3 text-sm">
-<label class=@ClassNames("font-medium text-gray-700 dark:text-gray-300", LabelClass) for=@Id>
+<label class=@ClassNames(CheckboxInput.LabelClasses, LabelClass) for=@Id>
 @UseLabel
 </label>
 @if (HasErrorField)
 {
-<p class=@ClassNames("text-gray-500")>@ErrorFieldMessage</p>
+<p class=@ClassNames(CheckboxInput.ErrorClasses)>@ErrorFieldMessage</p>
 }
 else if (!string.IsNullOrEmpty(UseHelp))
 {
@@ -893,11 +894,11 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 </div>
 </div>
 @inherits UiComponentBase
-<input id="confirmDelete" type="checkbox" @bind-value="confirmDelete" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black">
-<label for="confirmDelete" class="mx-1 select-none dark:text-gray-300">@ConfirmLabel</label>
+<input id="confirmDelete" type="checkbox" @bind-value="confirmDelete" class="@CheckboxClasses">
+<label for="confirmDelete" class="@LabelClasses">@ConfirmLabel</label>
 <button type="button" disabled=@(!confirmDelete) @onclick="OnDelete"
-class=@ClassNames("select-none inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white",
-confirmDelete? "cursor-pointer bg-red-600 dark:bg-red-300 hover:bg-red-700 dark:hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" : "bg-red-400 dark:bg-red-500", Class)>
+class=@ClassNames(ButtonClasses,
+confirmDelete? EnabledClasses : DisabledClasses, Class)>
 @if (ChildContent != null)
 {
 @ChildContent
@@ -907,17 +908,71 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 @Label
 }
 </button>
+@code {
+public static string CheckboxClasses { get; set; } = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black";
+public static string LabelClasses { get; set; } = "mx-1 select-none dark:text-gray-300";
+public static string ButtonClasses { get; set; } = "select-none inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white";
+public static string EnabledClasses { get; set; } = "cursor-pointer bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500";
+public static string DisabledClasses { get; set; } = "bg-red-400";
+}
 @inherits UiComponentBase
-<button type="button" class=@ClassNames("bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", Class) role="switch" aria-checked="false" @onclick="toggleDark">
-<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "translate-x-5" : "translate-x-0", "pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200")>
-<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "opacity-0 ease-out duration-100" : "opacity-100 ease-in duration-200", "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity") aria-hidden="true">
+<button type="button" class=@ClassNames(ButtonClasses, Class) role="switch" aria-checked="false" @onclick="toggleDark">
+<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "translate-x-5" : "translate-x-0", InnerClasses)>
+<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "opacity-0 ease-out duration-100" : "opacity-100 ease-in duration-200", IconClasses) aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z" /></svg>
+</span>
+<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "opacity-100 ease-in duration-200" : "opacity-0 ease-out duration-100", IconClasses) aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z" /></svg>
+</span>
+</span>
+</button>
+@code {
+public static string ButtonClasses { get; set; } = "bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500";
+public static string InnerClasses { get; set; } = "pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white dark:bg-black shadow transform ring-0 transition ease-in-out duration-200";
+public static string IconClasses { get; set; } = "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity";
+}
+@inherits UiComponentLiteBase
+<button type="button" onclick="toggleDarkMode()" class=@ClassNames(DarkModeToggle.ButtonClasses, Class) role="switch" aria-checked="false" @attributes="AdditionalAttributes">
+<span class="@DarkModeToggle.InnerClasses" data-class-light="translate-x-5" data-class-dark="translate-x-0">
+<span class="@DarkModeToggle.IconClasses" data-class-light="opacity-0 ease-out duration-100" data-class-dark="opacity-100 ease-in duration-200" aria-hidden="true">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z" /></svg>
 </span>
-<span class=@ClassNames(!BlazorConfig.Instance.DarkMode ? "opacity-100 ease-in duration-200" : "opacity-0 ease-out duration-100", "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity") aria-hidden="true">
+<span class="@DarkModeToggle.IconClasses" data-class-light="opacity-100 ease-in duration-200" data-class-dark="opacity-0 ease-out duration-100" aria-hidden="true">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z" /></svg>
 </span>
 </span>
 </button>
+<script>
+window.toggleDarkMode = (function () {
+let isDark = localStorage.getItem('color-scheme') === 'dark'
+const html = document.documentElement
+function renderDarkMode() {
+html.classList.toggle('dark', isDark)
+document.querySelectorAll('[data-class-light]').forEach(el => {
+const removeClasses = isDark
+? el.dataset.classLight
+: el.dataset.classDark
+const addClasses = isDark
+? el.dataset.classDark
+: el.dataset.classLight
+removeClasses.split(' ').forEach(c => el.classList.remove(c))
+addClasses.split(' ').forEach(c => el.classList.add(c))
+})
+}
+renderDarkMode()
+document.addEventListener('DOMContentLoaded', () =>
+Blazor.addEventListener('enhancedload', () => {
+isDark = localStorage.getItem('color-scheme') == 'dark'
+html.classList.toggle('dark', isDark)
+renderDarkMode()
+}))
+return function() {
+isDark = !isDark
+localStorage.setItem('color-scheme', isDark ? 'dark' : 'light')
+renderDarkMode()
+}
+})()
+</script>
 @typeparam Model
 @inherits UiComponentBase
 <CascadingValue IsFixed="true" Value="this">@ChildContent</CascadingValue>
@@ -984,12 +1039,11 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 <div>
 @if (!string.IsNullOrEmpty(UseLabel))
 {
-<label for=@Id class="block text-sm font-medium text-gray-700 dark:text-gray-300">@UseLabel</label>
+<label for=@Id class="@DateTimeInput.LabelClasses">@UseLabel</label>
 }
 <div class="mt-1 relative rounded-md shadow-sm">
-<input type="date" class=@ClassNames("block w-full sm:text-sm rounded-md",
-CssClass("shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600 dark:text-white dark:bg-gray-900",
-"pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500"))
+<input type="date" class=@ClassNames(DateTimeInput.InputBaseClasses,
+CssClass(DateTimeInput.InputValidClasses, DateTimeInput.InputInvalidClasses))
 id=@Id name=@Id @bind-value="CurrentValueAsDateTime" placeHolder=@UsePlaceholder @bind-value:event="oninput" @attributes="IncludeAttributes">
 @if (HasErrorField)
 {
@@ -1003,7 +1057,7 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 </div>
 @if (HasErrorField)
 {
-<p class="mt-2 text-sm text-red-500" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+<p class="@DateTimeInput.ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
 }
 else if (!string.IsNullOrEmpty(UseHelp))
 {
@@ -1065,16 +1119,19 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 <Alert HtmlMessage=@HtmlMessage />
 <div class="md:p-4">
 <button type="button" @onclick="signIn"
-class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+class="@ButtonClasses">
 Sign In
 </button>
 </div>
 </SlideOver>
 }
+@code {
+public static string ButtonClasses { get; set; } = "flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50";
+}
 @inherits ErrorSummaryBase
 @if (UseStatus.ShowSummary(UseExcept))
 {
-<div class=@(ClassNames("bg-red-50 dark:bg-red-200 border-l-4 border-red-400 p-4", CssClass())) role="alert">
+<div class=@(ClassNames(Classes, CssClass())) role="alert">
 <div class="flex">
 <div class="flex-shrink-0">
 <!-- Heroicon name: solid/x-circle -->
@@ -1083,11 +1140,15 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 </svg>
 </div>
 <div class="ml-3">
-<p class="text-sm text-red-700 dark:text-red-800">@UseStatus.SummaryMessage(UseExcept)</p>
+<p class="@MessageClasses">@UseStatus.SummaryMessage(UseExcept)</p>
 </div>
 </div>
 </div>
 }
+@code {
+public static string Classes { get; set; } = "bg-red-50 dark:bg-red-200 border-l-4 border-red-400 p-4";
+public static string MessageClasses { get; set; } = "text-sm text-red-700 dark:text-red-800";
+}
 @using Microsoft.AspNetCore.Components.Forms
 @inherits TextInputBase
 @implements IDisposable
@@ -1095,14 +1156,12 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 <div>
 @if (!string.IsNullOrEmpty(UseLabel))
 {
-<label for=@Id class=@ClassNames("block text-sm font-medium text-gray-700 dark:text-gray-300", LabelClass)>@UseLabel</label>
+<label for=@Id class=@ClassNames(LabelClasses, LabelClass)>@UseLabel</label>
 }
 <div class="block mt-2">
 <span class="sr-only">UseHelp ?? UseLabel</span>
 @{
-var cls = @ClassNames("block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900",
-CssClass("block w-full text-sm text-slate-500 dark:text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800",
-"pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500"));
+var cls = @ClassNames(InputBaseClasses, CssClass(InputValidClasses, InputInvalidClasses));
 }
 <InputFile @ref="InputFile" class=@cls id=@Id name=@Id placeHolder=@UsePlaceholder multiple=@Multiple accept=@Accept @attributes="IncludeAttributes" OnChange="@OnChange" />
 @if (HasErrorField)
@@ -1117,7 +1176,7 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 </div>
 @if (HasErrorField)
 {
-<p class="mt-2 text-sm text-red-500" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+<p class="@ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
 }
 else if (!string.IsNullOrEmpty(UseHelp))
 {
@@ -1194,13 +1253,18 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 string imgCls(string? src) => string.IsNullOrEmpty(src) || src.StartsWith("data:") || src.EndsWith(".svg")
 ? ""
 : "rounded-full object-cover";
+public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500";
+public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300";
+public static string InputBaseClasses { get; set; } = "block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900";
+public static string InputValidClasses { get; set; } = "block w-full text-sm text-slate-500 dark:text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800";
+public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
 }
 @using Microsoft.AspNetCore.Components.Forms
 @typeparam TReq
 @inherits BlazorComponentBase
 <div class="m-2 mt-4" @ref="fileDropContainer">
-<label for="blazor-input-file"
-class=@(ClassNames("flex justify-center w-full h-32 px-4 transition border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none", CssUtils.ClassNames(@class)))>
+<label for="blazor-input-file" class=@(ClassNames(LabelClasses, Class))>
 <span class="flex items-center space-x-2">
 <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-600" fill="none" viewBox="0 0 24 24"
 stroke="currentColor" stroke-width="2">
@@ -1234,9 +1298,51 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 <ErrorSummary/>
 </CascadingValue>
 }
+@code {
+public static string LabelClasses { get; set; } = "flex justify-center w-full h-32 px-4 transition border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none";
+}
+@inherits UiComponentLiteBase
+<h1 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h1>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes { get; set; } = "mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl";
+}
+@inherits UiComponentLiteBase
+<h2 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h2>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes { get; set; } = "mb-4 text-3xl md:text-4xl font-bold tracking-tighter leading-tight md:pr-8 whitespace-nowrap text-center pt-8";
+}
+@inherits UiComponentLiteBase
+<h3 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h3>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes { get; set; } = "mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100 leading-tight";
+}
+@inherits UiComponentLiteBase
+<h4 class=@ClassNames(Classes, Class) @attributes="AdditionalAttributes">@ChildContent</h4>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes { get; set; } = "text-xl font-semibold text-gray-900 dark:text-gray-100 leading-tight";
+}
 <div class=@(@class)>
 @((MarkupString) HtmlUtils.HtmlDump(Value ?? ""))
 </div>
+@inherits UiComponentLiteBase
+<a class=@ClassNames(GetStyleClass(Style), Class) @attributes="AdditionalAttributes">@ChildContent</a>
+@code {
+[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+public static string Classes  => GetStyleClass(LinkStyle.Indigo);
+[Parameter] public LinkStyle Style { get; set; } = LinkStyle.Indigo;
+public static string GetStyleClass(LinkStyle style) => style switch
+{
+LinkStyle.Blue => "text-blue-600 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-400",
+LinkStyle.Red => "text-red-600 dark:text-red-300 hover:text-red-500 dark:hover:text-red-400",
+LinkStyle.Green => "text-green-600 dark:text-green-300 hover:text-green-500 dark:hover:text-green-400",
+LinkStyle.Sky => "text-sky-600 dark:text-sky-300 hover:text-sky-500 dark:hover:text-sky-400",
+_ => "text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400"
+};
+}
 @inherits UiComponentBase
 @((MarkupString)ToHtml())
 @inherits UiComponentBase
@@ -1246,7 +1352,7 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 }
 else
 {
-<div class=@ClassNames("mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300", @class)>
+<div class=@ClassNames(Classes, @class)>
 <h1 class="flex">
 <svg class=@ClassNames("self-center inline mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300", ImageClass)
 role="status" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -1257,8 +1363,13 @@ <h1 class="flex">
 </h1>
 </div>
 }
+@code {
+public static string Classes = "mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300";
+}
 @inherits TextInputBase
 @implements IHasJsonApiClient
+@if (AppMetadata != null)
+{
 <div class=@ClassNames("lookup-field", FieldClass)>
 <input type="hidden" name=@Input.Id value=@Value />
 @if (!string.IsNullOrEmpty(UseLabel))
@@ -1281,8 +1392,7 @@ <h1 class="flex">
 {
 <div class="mt-1 relative">
 <button type="button" class="lookup flex relative w-full bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-@onclick="lookup"
-aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
+@onclick="lookup" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
 <span class="w-full inline-flex truncate">
 <span class="text-blue-700 dark:text-blue-300 flex cursor-pointer">
 <Icon class="mr-1 w-5 h-5" Image=@Icon />
@@ -1302,7 +1412,7 @@ <h1 class="flex">
 <p class="mt-2 text-sm text-red-500" id=@($"{Input.Id}-error")>@ErrorFieldMessage</p>
 }
 </div>
-@code {
+<DynamicModalLookup @ref="LocalModalLookup" AppMetadata=@AppMetadata />
 }
 @inherits UiComponentBase
 <div @onclick="Close" id=@Id aria-labelledby="modal-title" role="dialog" aria-modal="true" class=@ClassNames("relative z-10", DialogTransition.DisplayClass)>
@@ -1454,13 +1564,17 @@ <h3 class="hidden sm:block text-xl leading-6 font-medium text-gray-900 dark:text
 @inherits UiComponentBase
 @if (!string.IsNullOrEmpty(Title))
 {
-<h2 class="text-base font-semibold text-gray-500 dark:text-gray-400">
+<h2 class="@TitleClasses">
 @Title
 </h2>
 }
-<ul role="list" class="mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800">
+<ul role="list" class="@ListClasses">
 <CascadingValue IsFixed="true" Value="this">@ChildContent</CascadingValue>
 </ul>
+@code {
+public static string TitleClasses { get; set; } = "text-base font-semibold text-gray-500 dark:text-gray-400";
+public static string ListClasses { get; set; } = "mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-t border-b border-gray-200 dark:border-gray-800";
+}
 @inherits UiComponentBase
 <li class="relative flex items-start space-x-4 py-6">
 <div class="flex-shrink-0">
@@ -1632,56 +1746,38 @@ <h3 class="text-base font-medium text-gray-900 dark:text-gray-100">
 @inherits UiComponentBase
 @if (!string.IsNullOrEmpty(href))
 {
-<a href=@href class=@ClassNames(cls, Class) title=@title target=@target @onclick:stopPropagation @attributes="IncludeAttributes">
+<a href=@href class=@ClassNames(Classes(Style), Class) title=@title target=@target @onclick:stopPropagation @attributes="IncludeAttributes">
 @ChildContent
 </a>
 }
 else
 {
-<button type=@type @onclick="onclick" class=@ClassNames(cls, Class) @attributes="IncludeAttributes">
+<button type=@type @onclick="onclick" class=@ClassNames(Classes(Style), Class) @attributes="IncludeAttributes">
 @ChildContent
 </button>
 }
-@code {
-string colors => Style switch
-{
-ButtonStyle.Blue => "text-white bg-blue-600 hover:bg-blue-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
-ButtonStyle.Purple => "text-white bg-purple-600 hover:bg-purple-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
-ButtonStyle.Red => "focus:ring-red-500 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500",
-ButtonStyle.Green => "focus:ring-green-300 text-white bg-green-600 hover:bg-green-700 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500",
-ButtonStyle.Sky => "focus:ring-sky-300 text-white bg-sky-600 hover:bg-sky-700 focus:ring-sky-500 dark:bg-sky-600 dark:hover:bg-sky-700 dark:focus:ring-sky-500",
-ButtonStyle.Cyan => "focus:ring-cyan-300 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-500",
-_ => "focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-};
-string cls => "inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black " + colors;
-}
 @inherits UiComponentBase
 @if (!string.IsNullOrEmpty(href))
 {
-<a href=@href class=@ClassNames(cls, Class) title=@title target=@target @onclick:stopPropagation @attributes="IncludeAttributes">
+<a href=@href class=@ClassNames(Classes, Class) title=@title target=@target @onclick:stopPropagation @attributes="IncludeAttributes">
 @ChildContent
 </a>
 }
 else
 {
-<button type=@type @onclick="onclick" class=@ClassNames(cls, Class) @attributes="IncludeAttributes">
+<button type=@type @onclick="onclick" class=@ClassNames(Classes, Class) @attributes="IncludeAttributes">
 @ChildContent
 </button>
 }
-@code {
-string colors => "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black";
-string cls => "inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 " + colors;
-}
 @typeparam TValue
 @inherits SelectInputBase<TValue>
 <div class=@FieldClass>
 @if (!string.IsNullOrEmpty(UseLabel))
 {
-<label for=@Id class=@ClassNames("block text-sm font-medium text-gray-700 dark:text-gray-300", LabelClass)>@UseLabel</label>
+<label for=@Id class=@ClassNames(SelectInput.LabelClasses, LabelClass)>@UseLabel</label>
 }
-<select id=@Id name=@Id class=@ClassNames("mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none border-gray-300 sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600",
-CssClass(valid:"text-gray-900 focus:ring-indigo-500 focus:border-indigo-500",
-invalid:"text-red-900 focus:ring-red-500 focus:border-red-500"))
+<select id=@Id name=@Id class=@ClassNames(SelectInput.InputBaseClasses,
+CssClass(SelectInput.InputValidClasses, SelectInput.InputInvalidClasses))
 @bind="CurrentValue" @attributes="IncludeAttributes">
 @ChildContent
 @foreach (var kvp in KvpValues())
@@ -1691,7 +1787,7 @@ <h3 class="text-base font-medium text-gray-900 dark:text-gray-100">
 </select>
 @if (HasErrorField)
 {
-<p class="mt-2 text-sm text-red-500" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+<p class="@SelectInput.ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
 }
 </div>
 @inherits BlazorComponentBase
@@ -1751,13 +1847,11 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 <div class=@FieldClass>
 @if (!string.IsNullOrEmpty(UseLabel))
 {
-<label for=@Id class=@ClassNames("block text-sm font-medium text-gray-700 dark:text-gray-300", LabelClass)>@UseLabel</label>
+<label for=@Id class=@ClassNames(@LabelClasses, LabelClass)>@UseLabel</label>
 }
 <div class="mt-1 w-full relative rounded-md shadow-sm">
 @{
-var cls = ClassNames("w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none",
-CssClass("shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500",
-"pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500"));
+var cls = ClassNames(InputBaseClasses, CssClass(InputValidClasses, InputInvalidClasses));
 }
 <button class=@cls @onclick="handleClick" @onclick:preventDefault>
 <div class="flex flex-wrap pb-1.5">
@@ -1792,29 +1886,35 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 </div>
 @if (HasErrorField)
 {
-<p class="mt-2 text-sm text-red-500" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+<p class="@ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
 }
 else if (!string.IsNullOrEmpty(UseHelp))
 {
 <p id=@($"{Id}-description") class="text-gray-500">@UseHelp</p>
 }
 </div>
+@code {
+public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500";
+public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300";
+public static string InputBaseClasses { get; set; } = "w-full cursor-text flex flex-wrap sm:text-sm rounded-md dark:text-white dark:bg-gray-900 border focus-within:border-transparent focus-within:ring-1 focus-within:outline-none";
+public static string InputValidClasses { get; set; } = "shadow-sm border-gray-300 dark:border-gray-600 focus-within:ring-indigo-500 focus-within:border-indigo-500";
+public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus-within:outline-none focus-within:ring-red-500 focus-within:border-red-500";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
 @typeparam TValue
 @inherits TextInputBase<TValue>
 <div class=@FieldClass>
 @if (!string.IsNullOrEmpty(UseLabel))
 {
-<label for=@Id class=@ClassNames("block text-sm font-medium text-gray-700 dark:text-gray-300", LabelClass)>@UseLabel</label>
+<label for=@Id class=@ClassNames(TextAreaInput.LabelClasses, LabelClass)>@UseLabel</label>
 }
 <div class="mt-1 relative rounded-md shadow-sm">
 <textarea id=@Id name=@Id @bind="CurrentValue" placeHolder=@UsePlaceholder @attributes="IncludeAttributes"
-class=@ClassNames("shadow-sm block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900",
-CssClass(valid:"text-gray-900 focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600",
-invalid:"text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300"))
-/>
+class=@ClassNames(TextAreaInput.InputBaseClasses,
+CssClass(TextAreaInput.InputValidClasses,TextAreaInput.InputInvalidClasses)) />
 @if (HasErrorField)
 {
-<p class="mt-2 text-sm text-red-500" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+<p class="@TextAreaInput.ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
 }
 else if (!string.IsNullOrEmpty(UseHelp))
 {
@@ -1827,13 +1927,11 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 <div class=@FieldClass>
 @if (!string.IsNullOrEmpty(UseLabel))
 {
-<label for=@Id class=@ClassNames("block text-sm font-medium text-gray-700 dark:text-gray-300", LabelClass)>@UseLabel</label>
+<label for=@Id class=@ClassNames(TextInput.LabelClasses, LabelClass)>@UseLabel</label>
 }
 <div class="mt-1 relative rounded-md shadow-sm">
 @{
-var cls = ClassNames("block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900",
-CssClass("shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600",
-"pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500"));
+var cls = ClassNames(TextInput.InputBaseClasses, CssClass(TextInput.InputValidClasses, TextInput.InputInvalidClasses));
 }
 @if (UseType == Html.Input.Types.Textarea)
 {
@@ -1854,7 +1952,7 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 </div>
 @if (HasErrorField)
 {
-<p class="mt-2 text-sm text-red-500" id=@($"{Id}-error")>@ErrorFieldMessage</p>
+<p class="@TextInput.ErrorClasses" id=@($"{Id}-error")>@ErrorFieldMessage</p>
 }
 else if (!string.IsNullOrEmpty(UseHelp))
 {
@@ -1862,7 +1960,10 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 }
 </div>
 @inherits UiComponentBase
-<a href=@href class=@ClassNames("text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200", Class) title=@title target=@target @onclick="onclick" @onclick:stopPropagation>@ChildContent</a>
+<a href=@href class=@ClassNames(Classes, Class) title=@title target=@target @onclick="onclick" @onclick:stopPropagation>@ChildContent</a>
+@code {
+public static string Classes { get; set; } = "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200";
+}
 using ServiceStack.Blazor.Components;
 namespace ServiceStack.Blazor;
 /// <summary>
@@ -1996,3 +2097,46 @@ <h2 class=@HeadingClass id="slide-over-title">@Title</h2>
 ExtraLarge,
 ExtraLarge2x,
 }
+/* CSS Classes for Generic Components */
+public static class TextInput
+{
+public static string ErrorClasses { get; set; } = "mt-2 text-sm text-red-500";
+public static string LabelClasses { get; set; } = "block text-sm font-medium text-gray-700 dark:text-gray-300";
+public static string InputBaseClasses { get; set; } = "block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none";
+public static string InputValidClasses { get; set; } = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600";
+public static string InputInvalidClasses { get; set; } = "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+public static class DateTimeInput
+{
+public static string ErrorClasses { get; set; } = TextInput.ErrorClasses;
+public static string LabelClasses { get; set; } = TextInput.LabelClasses;
+public static string InputBaseClasses { get; set; } = TextInput.InputBaseClasses;
+public static string InputValidClasses { get; set; } = TextInput.InputValidClasses;
+public static string InputInvalidClasses { get; set; } = TextInput.InputInvalidClasses;
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+public static class TextAreaInput
+{
+public static string ErrorClasses { get; set; } = TextInput.ErrorClasses;
+public static string LabelClasses { get; set; } = TextInput.LabelClasses;
+public static string InputBaseClasses { get; set; } = "shadow-sm block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none";
+public static string InputValidClasses { get; set; } = "text-gray-900 focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600";
+public static string InputInvalidClasses { get; set; } = "text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+public static class SelectInput
+{
+public static string ErrorClasses { get; set; } = TextInput.ErrorClasses;
+public static string LabelClasses { get; set; } = TextInput.LabelClasses;
+public static string InputBaseClasses { get; set; } = "mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none border-gray-300 sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:shadow-none";
+public static string InputValidClasses { get; set; } = "text-gray-900 focus:ring-indigo-500 focus:border-indigo-500";
+public static string InputInvalidClasses { get; set; } = "text-red-900 focus:ring-red-500 focus:border-red-500";
+public static string InputClasses { get; set; } = InputBaseClasses + " " + InputValidClasses;
+}
+public static class CheckboxInput
+{
+public static string ErrorClasses { get; set; } = "text-gray-500";
+public static string LabelClasses { get; set; } = "font-medium text-gray-700 dark:text-gray-300";
+public static string InputClasses { get; set; } = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-black";
+}