From 59a17adc308fdd11ab082c3fc7ff1452b860ecb9 Mon Sep 17 00:00:00 2001
From: Thomas Clark <tnc1997@outlook.com>
Date: Tue, 1 Oct 2024 19:02:06 +0100
Subject: [PATCH] refactor: restyle the import/export page (#92)

---
 .../Components/AzureInputSelect.razor         |   2 +-
 ...> ImportExportFileFormatInputSelect.razor} |   8 +-
 ...> ImportExportSourceTypeInputSelect.razor} |   8 +-
 .../Components/Pages/ImportExport.razor       | 182 +++++++++++-------
 .../wwwroot/app.css                           |   2 +-
 5 files changed, 124 insertions(+), 78 deletions(-)
 rename src/AzureAppConfigurationEmulator/Components/{ImportExportFileTypeInputSelect.razor => ImportExportFileFormatInputSelect.razor} (74%)
 rename src/AzureAppConfigurationEmulator/Components/{ImportExportSourceServiceInputSelect.razor => ImportExportSourceTypeInputSelect.razor} (70%)

diff --git a/src/AzureAppConfigurationEmulator/Components/AzureInputSelect.razor b/src/AzureAppConfigurationEmulator/Components/AzureInputSelect.razor
index ce609e7..04bccf2 100644
--- a/src/AzureAppConfigurationEmulator/Components/AzureInputSelect.razor
+++ b/src/AzureAppConfigurationEmulator/Components/AzureInputSelect.razor
@@ -1,7 +1,7 @@
 @typeparam TValue
 @using System.Linq.Expressions
 
-<InputSelect @attributes="@AdditionalAttributes" class="px-1 pt-0 pb-0.5 w-full bg-white rounded-sm border cursor-pointer disabled:cursor-default border-storm-dust [&:not(multiple)]:h-[24px] invalid:border-alizarin-crimson dark:bg-cod-grey dark:border-star-dust dark:disabled:bg-shark dark:disabled:border-natural-grey dark:disabled:text-natural-grey disabled:bg-concrete disabled:border-star-dust disabled:text-star-dust" Value="@Value" ValueChanged="@ValueChanged" ValueExpression="@ValueExpression">
+<InputSelect @attributes="@AdditionalAttributes" class="px-1 pt-0 pb-0.5 w-full bg-white rounded-sm border cursor-pointer disabled:cursor-default border-storm-dust h-[24px] invalid:border-alizarin-crimson dark:bg-cod-grey dark:border-star-dust dark:disabled:bg-shark dark:disabled:border-natural-grey dark:disabled:text-natural-grey disabled:bg-concrete disabled:border-star-dust disabled:text-star-dust" Value="@Value" ValueChanged="@ValueChanged" ValueExpression="@ValueExpression">
     @ChildContent
 </InputSelect>
 
diff --git a/src/AzureAppConfigurationEmulator/Components/ImportExportFileTypeInputSelect.razor b/src/AzureAppConfigurationEmulator/Components/ImportExportFileFormatInputSelect.razor
similarity index 74%
rename from src/AzureAppConfigurationEmulator/Components/ImportExportFileTypeInputSelect.razor
rename to src/AzureAppConfigurationEmulator/Components/ImportExportFileFormatInputSelect.razor
index 01c44be..5ddb159 100644
--- a/src/AzureAppConfigurationEmulator/Components/ImportExportFileTypeInputSelect.razor
+++ b/src/AzureAppConfigurationEmulator/Components/ImportExportFileFormatInputSelect.razor
@@ -2,9 +2,9 @@
 
 <AzureInputSelect AdditionalAttributes="@AdditionalAttributes" TValue="@string" Value="@Value" ValueChanged="@HandleValueChanged" ValueExpression="@ValueExpression">
     <option checked="@(Value is null)" hidden value="">Please select a file type</option>
-    <option checked="@(Value is FileType.Json)" value="@FileType.Json">Json</option>
-    <option checked="@(Value is FileType.Yaml)" disabled value="@FileType.Yaml">Yaml</option>
-    <option checked="@(Value is FileType.Properties)" disabled value="@FileType.Properties">Properties</option>
+    <option checked="@(Value is FileFormat.Json)" value="@FileFormat.Json">Json</option>
+    <option checked="@(Value is FileFormat.Yaml)" disabled value="@FileFormat.Yaml">Yaml</option>
+    <option checked="@(Value is FileFormat.Properties)" disabled value="@FileFormat.Properties">Properties</option>
 </AzureInputSelect>
 
 @code {
@@ -21,7 +21,7 @@
         await ValueChanged.InvokeAsync(!string.IsNullOrEmpty(value) ? value : null);
     }
 
-    public static class FileType
+    public static class FileFormat
     {
         public const string Json = ".json";
 
diff --git a/src/AzureAppConfigurationEmulator/Components/ImportExportSourceServiceInputSelect.razor b/src/AzureAppConfigurationEmulator/Components/ImportExportSourceTypeInputSelect.razor
similarity index 70%
rename from src/AzureAppConfigurationEmulator/Components/ImportExportSourceServiceInputSelect.razor
rename to src/AzureAppConfigurationEmulator/Components/ImportExportSourceTypeInputSelect.razor
index c196cce..617475c 100644
--- a/src/AzureAppConfigurationEmulator/Components/ImportExportSourceServiceInputSelect.razor
+++ b/src/AzureAppConfigurationEmulator/Components/ImportExportSourceTypeInputSelect.razor
@@ -2,9 +2,9 @@
 
 <AzureInputSelect AdditionalAttributes="@AdditionalAttributes" TValue="@string" Value="@Value" ValueChanged="@HandleValueChanged" ValueExpression="@ValueExpression">
     <option checked="@(Value is null)" hidden value="">Please select a source service</option>
-    <option checked="@(Value is SourceService.AzureAppConfiguration)" value="@SourceService.AzureAppConfiguration">App Configuration</option>
-    <option checked="@(Value is SourceService.AzureAppService)" disabled value="@SourceService.AzureAppService">App Service</option>
-    <option checked="@(Value is SourceService.ConfigurationFile)" value="@SourceService.ConfigurationFile">Configuration file</option>
+    <option checked="@(Value is SourceType.AzureAppConfiguration)" value="@SourceType.AzureAppConfiguration">App Configuration</option>
+    <option checked="@(Value is SourceType.AzureAppService)" disabled value="@SourceType.AzureAppService">App Service</option>
+    <option checked="@(Value is SourceType.ConfigurationFile)" value="@SourceType.ConfigurationFile">Configuration file</option>
 </AzureInputSelect>
 
 @code {
@@ -21,7 +21,7 @@
         await ValueChanged.InvokeAsync(!string.IsNullOrEmpty(value) ? value : null);
     }
 
-    public static class SourceService
+    public static class SourceType
     {
         public const string AzureAppConfiguration = nameof(AzureAppConfiguration);
 
diff --git a/src/AzureAppConfigurationEmulator/Components/Pages/ImportExport.razor b/src/AzureAppConfigurationEmulator/Components/Pages/ImportExport.razor
index f9cdf0d..a41abf5 100644
--- a/src/AzureAppConfigurationEmulator/Components/Pages/ImportExport.razor
+++ b/src/AzureAppConfigurationEmulator/Components/Pages/ImportExport.razor
@@ -17,46 +17,72 @@
     </AzureToolbar>
 
     <div class="p-5">
-        <EditForm class="flex flex-col gap-4 items-stretch pb-4" Model="@Model" OnSubmit="@HandleSubmit">
-            <ImportExportOperationInputRadioGroup @bind-Value="@Model!.Operation" name="@nameof(Model.Operation)"/>
-
-            @switch (Model.Operation)
+        <EditForm class="flex flex-col gap-10" Model="@Model" OnSubmit="@HandleSubmit">
+            @switch (Model?.Operation)
             {
                 case ImportExportOperationInputRadioGroup.Operation.Import:
-                    <label class="flex flex-col gap-1">
-                        <div>Source service</div>
-                        <ImportExportSourceServiceInputSelect @bind-Value="@Model.SourceService" name="@nameof(Model.SourceService)"/>
-                    </label>
-
-                    switch (Model.SourceService)
+                    <div class="flex flex-col gap-3">
+                        <ImportExportOperationInputRadioGroup @bind-Value="@Model.Operation" name="@nameof(Model.Operation)"/>
+
+                        <label class="flex flex-row items-center">
+                            <div class="w-[200px]">Source type</div>
+                            <div class="flex-1 max-w-[600px]">
+                                <ImportExportSourceTypeInputSelect @bind-Value="@Model.SourceType" name="@nameof(Model.SourceType)"/>
+                            </div>
+                        </label>
+                    </div>
+
+                    switch (Model.SourceType)
                     {
-                        case ImportExportSourceServiceInputSelect.SourceService.AzureAppConfiguration:
-                            <label class="flex flex-col gap-1">
-                                <div>Source connection string</div>
-                                <AzureInputText name="@nameof(Model.SourceConnectionString)" Value="@Model.SourceConnectionString" ValueChanged="@HandleSourceConnectionStringChange" ValueExpression="@(() => Model.SourceConnectionString)"/>
-                            </label>
+                        case ImportExportSourceTypeInputSelect.SourceType.AzureAppConfiguration:
+                            <div class="flex flex-col gap-3">
+                                <div class="font-bold text-lg">Select source</div>
+
+                                <label class="flex flex-row items-center">
+                                    <div class="w-[200px]">Connection string</div>
+                                    <div class="flex-1 max-w-[600px]">
+                                        <AzureInputText name="@nameof(Model.SourceConnectionString)" Value="@Model.SourceConnectionString" ValueChanged="@HandleSourceConnectionStringChange" ValueExpression="@(() => Model.SourceConnectionString)"/>
+                                    </div>
+                                </label>
+                            </div>
 
                             if (!string.IsNullOrEmpty(Model.SourceConnectionString) && Labels is { Count: > 0 })
                             {
-                                <label class="flex flex-col gap-1">
-                                    <div>Key filter</div>
-                                    <AzureInputText @bind-Value="@Model.KeyFilter" name="@nameof(Model.KeyFilter)" placeholder="abc | abc,xyz,..."/>
-                                </label>
-
-                                <label class="flex flex-col gap-1">
-                                    <div>Prefix</div>
-                                    <AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
-                                </label>
+                                <div class="flex flex-col gap-3">
+                                    <div class="font-bold text-lg">Select key-values</div>
+
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">Key filter</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <AzureInputText @bind-Value="@Model.KeyFilter" name="@nameof(Model.KeyFilter)" placeholder="abc | abc,xyz,..."/>
+                                        </div>
+                                    </label>
+
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">At a specific time</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <AzureInputDate @bind-Value="@Model.Moment" name="@nameof(Model.Moment)" Type="@InputDateType.DateTimeLocal"/>
+                                        </div>
+                                    </label>
+
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">From label</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <ImportExportLabelFilterInputSelect @bind-Value="@Model.LabelFilter" Labels="@Labels" name="@nameof(Model.LabelFilter)"/>
+                                        </div>
+                                    </label>
+                                </div>
 
-                                <label class="flex flex-col gap-1">
-                                    <div>At a specific time</div>
-                                    <AzureInputDate @bind-Value="@Model.Moment" name="@nameof(Model.Moment)" Type="@InputDateType.DateTimeLocal"/>
-                                </label>
+                                <div class="flex flex-col gap-3">
+                                    <div class="font-bold text-lg">Apply changes to key-values</div>
 
-                                <label class="flex flex-col gap-1">
-                                    <div>From label</div>
-                                    <ImportExportLabelFilterInputSelect @bind-Value="@Model.LabelFilter" Labels="@Labels" name="@nameof(Model.LabelFilter)"/>
-                                </label>
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">Add prefix</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
+                                        </div>
+                                    </label>
+                                </div>
 
                                 <div>
                                     <AzureButton Appearance="AzureButton.AzureAppearance.Primary" type="submit">@(Model.Operation switch { ImportExportOperationInputRadioGroup.Operation.Export => "Export", ImportExportOperationInputRadioGroup.Operation.Import => "Import", _ => throw new ArgumentOutOfRangeException() })</AzureButton>
@@ -64,41 +90,61 @@
                             }
 
                             break;
-                        case ImportExportSourceServiceInputSelect.SourceService.ConfigurationFile:
-                            <label class="flex flex-col gap-1">
-                                <div>File type</div>
-                                <ImportExportFileTypeInputSelect @bind-Value="@Model.FileType" name="@nameof(Model.FileType)"/>
-                            </label>
-
-                            if (Model.FileType is not null)
-                            {
-                                <label class="flex flex-col gap-1">
-                                    <div>Source file</div>
-                                    <AzureInputFile accept="@Model.FileType" name="@nameof(Model.SourceFile)" OnChange="args => Model.SourceFile = args.File"/>
+                        case ImportExportSourceTypeInputSelect.SourceType.ConfigurationFile:
+                            <div class="flex flex-col gap-3">
+                                <div class="font-bold text-lg">Select source</div>
+
+                                <label class="flex flex-row items-center">
+                                    <div class="w-[200px]">File format</div>
+                                    <div class="flex-1 max-w-[600px]">
+                                        <ImportExportFileFormatInputSelect @bind-Value="@Model.FileFormat" name="@nameof(Model.FileFormat)"/>
+                                    </div>
                                 </label>
-                            }
+
+                                @if (Model.FileFormat is not null)
+                                {
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">Source file</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <AzureInputFile accept="@Model.FileFormat" name="@nameof(Model.SourceFile)" OnChange="args => Model.SourceFile = args.File"/>
+                                        </div>
+                                    </label>
+                                }
+                            </div>
 
                             if (Model.SourceFile is not null)
                             {
-                                <label class="flex flex-col gap-1">
-                                    <div>Separator</div>
-                                    <ImportExportSeparatorInputSelect @bind-Value="@Model.Separator" name="@nameof(Model.Separator)"/>
-                                </label>
-
-                                <label class="flex flex-col gap-1">
-                                    <div>Prefix</div>
-                                    <AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
-                                </label>
-
-                                <label class="flex flex-col gap-1">
-                                    <div>Label</div>
-                                    <AzureInputText @bind-Value="@Model.Label" name="@nameof(Model.Label)"/>
-                                </label>
-
-                                <label class="flex flex-col gap-1">
-                                    <div>Content type</div>
-                                    <ImportExportContentTypeInputSelect @bind-Value="@Model.ContentType" name="@nameof(Model.ContentType)"/>
-                                </label>
+                                <div class="flex flex-col gap-3">
+                                    <div class="font-bold text-lg">Apply changes to key-values</div>
+
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">Separator</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <ImportExportSeparatorInputSelect @bind-Value="@Model.Separator" name="@nameof(Model.Separator)"/>
+                                        </div>
+                                    </label>
+
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">Add prefix</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <AzureInputText @bind-Value="@Model.Prefix" name="@nameof(Model.Prefix)"/>
+                                        </div>
+                                    </label>
+
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">Add label</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <AzureInputText @bind-Value="@Model.Label" name="@nameof(Model.Label)"/>
+                                        </div>
+                                    </label>
+
+                                    <label class="flex flex-row items-center">
+                                        <div class="w-[200px]">Add content type</div>
+                                        <div class="flex-1 max-w-[600px]">
+                                            <ImportExportContentTypeInputSelect @bind-Value="@Model.ContentType" name="@nameof(Model.ContentType)"/>
+                                        </div>
+                                    </label>
+                                </div>
 
                                 <div>
                                     <AzureButton Appearance="AzureButton.AzureAppearance.Primary" type="submit">@(Model.Operation switch { ImportExportOperationInputRadioGroup.Operation.Export => "Export", ImportExportOperationInputRadioGroup.Operation.Import => "Import", _ => throw new ArgumentOutOfRangeException() })</AzureButton>
@@ -236,9 +282,9 @@
         {
             case ImportExportOperationInputRadioGroup.Operation.Import:
             {
-                switch (Model?.SourceService)
+                switch (Model?.SourceType)
                 {
-                    case ImportExportSourceServiceInputSelect.SourceService.AzureAppConfiguration:
+                    case ImportExportSourceTypeInputSelect.SourceType.AzureAppConfiguration:
                     {
                         var dictionary = Model.SourceConnectionString!.Split(';').Select(s => s.Split('=', 2)).ToDictionary(s => s[0], s => s[1]);
                         var endpoint = dictionary["Endpoint"];
@@ -282,7 +328,7 @@
 
                         break;
                     }
-                    case ImportExportSourceServiceInputSelect.SourceService.ConfigurationFile:
+                    case ImportExportSourceTypeInputSelect.SourceType.ConfigurationFile:
                     {
                         await using var stream = Model.SourceFile!.OpenReadStream();
 
@@ -324,7 +370,7 @@
     {
         public string? ContentType { get; set; }
 
-        public string? FileType { get; set; }
+        public string? FileFormat { get; set; }
 
         public string? KeyFilter { get; set; }
 
@@ -344,7 +390,7 @@
 
         public IBrowserFile? SourceFile { get; set; }
 
-        public string? SourceService { get; set; }
+        public string? SourceType { get; set; }
     }
 
 }
\ No newline at end of file
diff --git a/src/AzureAppConfigurationEmulator/wwwroot/app.css b/src/AzureAppConfigurationEmulator/wwwroot/app.css
index eefe73a..abb3966 100644
--- a/src/AzureAppConfigurationEmulator/wwwroot/app.css
+++ b/src/AzureAppConfigurationEmulator/wwwroot/app.css
@@ -1 +1 @@
-/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}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:Consolas,Courier New,Courier,monospace;font-feature-settings:normal;font-variation-settings:normal;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{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;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: }.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.left-1{left:.25rem}.right-3{right:.75rem}.top-2{top:.5rem}.z-\[1000\]{z-index:1000}.m-1{margin:.25rem}.m-1\.5{margin:.375rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-0{margin-top:0;margin-bottom:0}.my-0\.5{margin-top:.125rem;margin-bottom:.125rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-6{margin-bottom:1.5rem}.ml-5{margin-left:1.25rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-2\.5{margin-right:.625rem}.mr-4{margin-right:1rem}.mr-9{margin-right:2.25rem}.mt-1{margin-top:.25rem}.flex{display:flex}.table{display:table}.hidden{display:none}.h-\[10px\]{height:10px}.h-\[12px\]{height:12px}.h-\[15px\]{height:15px}.h-\[16px\]{height:16px}.h-\[18px\]{height:18px}.h-\[20px\]{height:20px}.h-\[24px\]{height:24px}.h-\[28px\]{height:28px}.h-\[32px\]{height:32px}.h-\[36px\]{height:36px}.h-\[40px\]{height:40px}.h-\[48px\]{height:48px}.h-full{height:100%}.max-h-full{max-height:100%}.w-\[10px\]{width:10px}.w-\[12px\]{width:12px}.w-\[15px\]{width:15px}.w-\[16px\]{width:16px}.w-\[18px\]{width:18px}.w-\[24px\]{width:24px}.w-\[265px\]{width:265px}.w-\[28px\]{width:28px}.w-\[32px\]{width:32px}.w-\[44px\]{width:44px}.w-\[48px\]{width:48px}.w-\[585px\]{width:585px}.w-full{width:100%}.w-px{width:1px}.max-w-\[300px\]{max-width:300px}.max-w-\[728px\]{max-width:728px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-none{flex:none}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-4{gap:1rem}.self-start{align-self:flex-start}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-lochmara{--tw-border-opacity:1;border-color:rgb(0 120 212/var(--tw-border-opacity))}.border-mine-shaft{--tw-border-opacity:1;border-color:rgb(41 40 39/var(--tw-border-opacity))}.border-storm-dust{--tw-border-opacity:1;border-color:rgb(100 100 100/var(--tw-border-opacity))}.border-b-alto{--tw-border-opacity:1;border-bottom-color:rgb(225 223 221/var(--tw-border-opacity))}.border-b-lochmara{--tw-border-opacity:1;border-bottom-color:rgb(0 120 212/var(--tw-border-opacity))}.border-t-alto{--tw-border-opacity:1;border-top-color:rgb(225 223 221/var(--tw-border-opacity))}.bg-alto{--tw-bg-opacity:1;background-color:rgb(225 223 221/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-gallery{--tw-bg-opacity:1;background-color:rgb(237 235 233/var(--tw-bg-opacity))}.bg-lochmara{--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.bg-merlin{--tw-bg-opacity:1;background-color:rgb(72 70 68/var(--tw-bg-opacity))}.bg-solitude{--tw-bg-opacity:1;background-color:rgb(230 242 251/var(--tw-bg-opacity))}.bg-storm-dust{--tw-bg-opacity:1;background-color:rgb(100 100 100/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.pb-0{padding-bottom:0}.pb-0\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-1\.5{padding-bottom:.375rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pr-6{padding-right:1.5rem}.pt-0{padding-top:0}.pt-0\.5{padding-top:.125rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-2\.5{padding-top:.625rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:Consolas,Courier New,Courier,monospace}.text-2xl{font-size:1rem;line-height:normal}.text-\[24px\]{font-size:24px}.text-base{font-size:.8125rem;line-height:normal}.text-lg{font-size:.875rem;line-height:normal}.text-sm{font-size:.75rem;line-height:normal}.text-xl{font-size:.9375rem;line-height:normal}.font-bold{font-weight:700}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-5{line-height:1.25rem}.leading-8{line-height:2rem}.text-alizarin-crimson{--tw-text-opacity:1;color:rgb(232 17 35/var(--tw-text-opacity))}.text-mine-shaft{--tw-text-opacity:1;color:rgb(41 40 39/var(--tw-text-opacity))}.text-storm-dust{--tw-text-opacity:1;color:rgb(100 100 100/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.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-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.file\:hidden::file-selector-button{display:none}.placeholder\:text-storm-dust::-moz-placeholder{--tw-text-opacity:1;color:rgb(100 100 100/var(--tw-text-opacity))}.placeholder\:text-storm-dust::placeholder{--tw-text-opacity:1;color:rgb(100 100 100/var(--tw-text-opacity))}.checked\:border-lochmara:checked{--tw-border-opacity:1;border-color:rgb(0 120 212/var(--tw-border-opacity))}.checked\:bg-lochmara:checked{--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.checked\:bg-\[url\(\'data\:image\/svg\+xml\;base64\2c PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI\+PHBhdGggZD0iTTEzLjg2IDMuNjZhLjUuNSAwIDAxLS4wMi43bC03LjkzIDcuNDhhLjYuNiAwIDAxLS44NC0uMDJMMi40IDkuMWEuNS41IDAgMDEuNzItLjdsMi40IDIuNDQgNy42NS03LjJhLjUuNSAwIDAxLjcuMDJ6IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg\+PC9zdmc\+\'\)\]:checked{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEzLjg2IDMuNjZhLjUuNSAwIDAgMS0uMDIuN2wtNy45MyA3LjQ4YS42LjYgMCAwIDEtLjg0LS4wMkwyLjQgOS4xYS41LjUgMCAwIDEgLjcyLS43bDIuNCAyLjQ0IDcuNjUtNy4yYS41LjUgMCAwIDEgLjcuMDJ6Ii8+PC9zdmc+")}.checked\:bg-center:checked{background-position:50%}.checked\:bg-no-repeat:checked{background-repeat:no-repeat}.invalid\:border-alizarin-crimson:invalid{--tw-border-opacity:1;border-color:rgb(232 17 35/var(--tw-border-opacity))}.hover\:border-science-blue:hover{--tw-border-opacity:1;border-color:rgb(16 110 190/var(--tw-border-opacity))}.hover\:bg-alizarin-crimson:hover{--tw-bg-opacity:1;background-color:rgb(232 17 35/var(--tw-bg-opacity))}.hover\:bg-alto:hover{--tw-bg-opacity:1;background-color:rgb(225 223 221/var(--tw-bg-opacity))}.hover\:bg-concrete:hover{--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.hover\:bg-science-blue:hover{--tw-bg-opacity:1;background-color:rgb(16 110 190/var(--tw-bg-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.active\:border-venice-blue:active{--tw-border-opacity:1;border-color:rgb(0 90 147/var(--tw-border-opacity))}.active\:bg-gallery:active{--tw-bg-opacity:1;background-color:rgb(237 235 233/var(--tw-bg-opacity))}.active\:bg-venice-blue:active{--tw-bg-opacity:1;background-color:rgb(0 90 147/var(--tw-bg-opacity))}.enabled\:hover\:bg-concrete:hover:enabled{--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.enabled\:hover\:bg-tropical-blue:hover:enabled{--tw-bg-opacity:1;background-color:rgb(204 228 246/var(--tw-bg-opacity))}.enabled\:active\:bg-gallery:active:enabled{--tw-bg-opacity:1;background-color:rgb(237 235 233/var(--tw-bg-opacity))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:border-star-dust:disabled{--tw-border-opacity:1;border-color:rgb(161 159 157/var(--tw-border-opacity))}.disabled\:bg-concrete:disabled{--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.disabled\:text-star-dust:disabled{--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.has-\[\:disabled\]\:cursor-default:has(:disabled){cursor:default}.has-\[\:checked\:disabled\]\:bg-concrete:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.has-\[\:checked\]\:bg-lochmara:has(:checked){--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.has-\[\:disabled\]\:bg-white:has(:disabled){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.has-\[\:checked\:disabled\]\:text-star-dust:has(:checked:disabled){--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.has-\[\:checked\]\:text-white:has(:checked){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.has-\[\:disabled\]\:text-star-dust:has(:disabled){--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.has-\[\:checked\:disabled\]\:hover\:bg-concrete:hover:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.has-\[\:checked\]\:hover\:bg-science-blue:hover:has(:checked){--tw-bg-opacity:1;background-color:rgb(16 110 190/var(--tw-bg-opacity))}.has-\[\:checked\:disabled\]\:active\:bg-concrete:active:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.has-\[\:checked\]\:active\:bg-venice-blue:active:has(:checked){--tw-bg-opacity:1;background-color:rgb(0 90 147/var(--tw-bg-opacity))}.aria-checked\:border-lochmara[aria-checked=true]{--tw-border-opacity:1;border-color:rgb(0 120 212/var(--tw-border-opacity))}.aria-checked\:bg-lochmara[aria-checked=true]{--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.group[aria-checked=true] .group-aria-checked\:left-7{left:1.75rem}.group[aria-checked=true] .group-aria-checked\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}@media (prefers-color-scheme:dark){.dark\:border-desert-storm{--tw-border-opacity:1;border-color:rgb(250 249 248/var(--tw-border-opacity))}.dark\:border-lochmara{--tw-border-opacity:1;border-color:rgb(0 120 212/var(--tw-border-opacity))}.dark\:border-star-dust{--tw-border-opacity:1;border-color:rgb(161 159 157/var(--tw-border-opacity))}.dark\:border-b-masala{--tw-border-opacity:1;border-bottom-color:rgb(65 65 65/var(--tw-border-opacity))}.dark\:border-t-masala{--tw-border-opacity:1;border-top-color:rgb(65 65 65/var(--tw-border-opacity))}.dark\:bg-cod-grey{--tw-bg-opacity:1;background-color:rgb(27 26 25/var(--tw-bg-opacity))}.dark\:bg-lochmara{--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.dark\:bg-masala{--tw-bg-opacity:1;background-color:rgb(65 65 65/var(--tw-bg-opacity))}.dark\:bg-mine-shaft{--tw-bg-opacity:1;background-color:rgb(41 40 39/var(--tw-bg-opacity))}.dark\:bg-shark{--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.dark\:bg-star-dust{--tw-bg-opacity:1;background-color:rgb(161 159 157/var(--tw-bg-opacity))}.dark\:bg-tuatara{--tw-bg-opacity:1;background-color:rgb(59 58 57/var(--tw-bg-opacity))}.dark\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.dark\:text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.dark\:text-desert-storm{--tw-text-opacity:1;color:rgb(250 249 248/var(--tw-text-opacity))}.dark\:text-mine-shaft{--tw-text-opacity:1;color:rgb(41 40 39/var(--tw-text-opacity))}.dark\:text-star-dust{--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.dark\:placeholder\:text-star-dust::-moz-placeholder{--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.dark\:placeholder\:text-star-dust::placeholder{--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.dark\:checked\:bg-\[url\(\'data\:image\/svg\+xml\;base64\2c PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI\+PHBhdGggZD0iTTEzLjg2IDMuNjZhLjUuNSAwIDAxLS4wMi43bC03LjkzIDcuNDhhLjYuNiAwIDAxLS44NC0uMDJMMi40IDkuMWEuNS41IDAgMDEuNzItLjdsMi40IDIuNDQgNy42NS03LjJhLjUuNSAwIDAxLjcuMDJ6IiBmaWxsPSIjMWIxYTE5Ij48L3BhdGg\+PC9zdmc\+\'\)\]:checked{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzFiMWExOSIgZD0iTTEzLjg2IDMuNjZhLjUuNSAwIDAgMS0uMDIuN2wtNy45MyA3LjQ4YS42LjYgMCAwIDEtLjg0LS4wMkwyLjQgOS4xYS41LjUgMCAwIDEgLjcyLS43bDIuNCAyLjQ0IDcuNjUtNy4yYS41LjUgMCAwIDEgLjcuMDJ6Ii8+PC9zdmc+")}.dark\:hover\:border-dodger-blue:hover{--tw-border-opacity:1;border-color:rgb(40 153 245/var(--tw-border-opacity))}.dark\:hover\:bg-dodger-blue:hover{--tw-bg-opacity:1;background-color:rgb(40 153 245/var(--tw-bg-opacity))}.dark\:hover\:bg-mine-shaft:hover{--tw-bg-opacity:1;background-color:rgb(41 40 39/var(--tw-bg-opacity))}.dark\:hover\:bg-shark:hover{--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.dark\:active\:border-jordy-blue:active{--tw-border-opacity:1;border-color:rgb(108 184 246/var(--tw-border-opacity))}.dark\:active\:bg-jordy-blue:active{--tw-bg-opacity:1;background-color:rgb(108 184 246/var(--tw-bg-opacity))}.dark\:active\:bg-tuatara:active{--tw-bg-opacity:1;background-color:rgb(59 58 57/var(--tw-bg-opacity))}.enabled\:dark\:hover\:bg-shark:hover:enabled{--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.enabled\:dark\:active\:bg-tuatara:active:enabled,.enabled\:dark\:hover\:bg-tuatara:hover:enabled{--tw-bg-opacity:1;background-color:rgb(59 58 57/var(--tw-bg-opacity))}.dark\:disabled\:border-natural-grey:disabled{--tw-border-opacity:1;border-color:rgb(138 136 134/var(--tw-border-opacity))}.dark\:disabled\:bg-shark:disabled{--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.dark\:disabled\:text-natural-grey:disabled{--tw-text-opacity:1;color:rgb(138 136 134/var(--tw-text-opacity))}.disabled\:dark\:text-storm-dust:disabled{--tw-text-opacity:1;color:rgb(100 100 100/var(--tw-text-opacity))}.has-\[\:checked\:disabled\]\:dark\:bg-shark:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.has-\[\:checked\]\:dark\:bg-lochmara:has(:checked){--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.has-\[\:disabled\]\:dark\:bg-cod-grey:has(:disabled){--tw-bg-opacity:1;background-color:rgb(27 26 25/var(--tw-bg-opacity))}.has-\[\:checked\:disabled\]\:dark\:text-natural-grey:has(:checked:disabled){--tw-text-opacity:1;color:rgb(138 136 134/var(--tw-text-opacity))}.has-\[\:checked\]\:dark\:text-mine-shaft:has(:checked){--tw-text-opacity:1;color:rgb(41 40 39/var(--tw-text-opacity))}.has-\[\:disabled\]\:dark\:text-natural-grey:has(:disabled){--tw-text-opacity:1;color:rgb(138 136 134/var(--tw-text-opacity))}.has-\[\:checked\:disabled\]\:hover\:dark\:bg-shark:hover:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.has-\[\:checked\]\:dark\:hover\:bg-dodger-blue:hover:has(:checked){--tw-bg-opacity:1;background-color:rgb(40 153 245/var(--tw-bg-opacity))}.has-\[\:checked\:disabled\]\:dark\:active\:bg-shark:active:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.has-\[\:checked\]\:dark\:active\:bg-jordy-blue:active:has(:checked){--tw-bg-opacity:1;background-color:rgb(108 184 246/var(--tw-bg-opacity))}.group[aria-checked=true] .group-aria-checked\:dark\:bg-cod-grey{--tw-bg-opacity:1;background-color:rgb(27 26 25/var(--tw-bg-opacity))}}.\[\&\:not\(multiple\)\]\:h-\[24px\]:not(multiple){height:24px}
\ No newline at end of file
+/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}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:Consolas,Courier New,Courier,monospace;font-feature-settings:normal;font-variation-settings:normal;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{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;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: }.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.left-1{left:.25rem}.right-3{right:.75rem}.top-2{top:.5rem}.z-\[1000\]{z-index:1000}.m-1{margin:.25rem}.m-1\.5{margin:.375rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-0{margin-top:0;margin-bottom:0}.my-0\.5{margin-top:.125rem;margin-bottom:.125rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-6{margin-bottom:1.5rem}.ml-5{margin-left:1.25rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-2\.5{margin-right:.625rem}.mr-4{margin-right:1rem}.mr-9{margin-right:2.25rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.flex{display:flex}.table{display:table}.hidden{display:none}.h-\[10px\]{height:10px}.h-\[12px\]{height:12px}.h-\[15px\]{height:15px}.h-\[16px\]{height:16px}.h-\[18px\]{height:18px}.h-\[20px\]{height:20px}.h-\[24px\]{height:24px}.h-\[28px\]{height:28px}.h-\[32px\]{height:32px}.h-\[36px\]{height:36px}.h-\[40px\]{height:40px}.h-\[48px\]{height:48px}.h-full{height:100%}.max-h-full{max-height:100%}.w-\[10px\]{width:10px}.w-\[12px\]{width:12px}.w-\[15px\]{width:15px}.w-\[16px\]{width:16px}.w-\[18px\]{width:18px}.w-\[24px\]{width:24px}.w-\[265px\]{width:265px}.w-\[28px\]{width:28px}.w-\[32px\]{width:32px}.w-\[44px\]{width:44px}.w-\[48px\]{width:48px}.w-\[585px\]{width:585px}.w-full{width:100%}.w-px{width:1px}.w-\[200px\]{width:200px}.max-w-\[300px\]{max-width:300px}.max-w-\[728px\]{max-width:728px}.max-w-full{max-width:100%}.max-w-\[600px\]{max-width:600px}.flex-1{flex:1 1 0%}.flex-none{flex:none}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-3{gap:.75rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.self-start{align-self:flex-start}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-lochmara{--tw-border-opacity:1;border-color:rgb(0 120 212/var(--tw-border-opacity))}.border-mine-shaft{--tw-border-opacity:1;border-color:rgb(41 40 39/var(--tw-border-opacity))}.border-storm-dust{--tw-border-opacity:1;border-color:rgb(100 100 100/var(--tw-border-opacity))}.border-b-alto{--tw-border-opacity:1;border-bottom-color:rgb(225 223 221/var(--tw-border-opacity))}.border-b-lochmara{--tw-border-opacity:1;border-bottom-color:rgb(0 120 212/var(--tw-border-opacity))}.border-t-alto{--tw-border-opacity:1;border-top-color:rgb(225 223 221/var(--tw-border-opacity))}.bg-alto{--tw-bg-opacity:1;background-color:rgb(225 223 221/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-gallery{--tw-bg-opacity:1;background-color:rgb(237 235 233/var(--tw-bg-opacity))}.bg-lochmara{--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.bg-merlin{--tw-bg-opacity:1;background-color:rgb(72 70 68/var(--tw-bg-opacity))}.bg-solitude{--tw-bg-opacity:1;background-color:rgb(230 242 251/var(--tw-bg-opacity))}.bg-storm-dust{--tw-bg-opacity:1;background-color:rgb(100 100 100/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.pb-0{padding-bottom:0}.pb-0\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-1\.5{padding-bottom:.375rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pr-6{padding-right:1.5rem}.pt-0{padding-top:0}.pt-0\.5{padding-top:.125rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-2\.5{padding-top:.625rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:Consolas,Courier New,Courier,monospace}.text-2xl{font-size:1rem;line-height:normal}.text-\[24px\]{font-size:24px}.text-base{font-size:.8125rem;line-height:normal}.text-lg{font-size:.875rem;line-height:normal}.text-sm{font-size:.75rem;line-height:normal}.text-xl{font-size:.9375rem;line-height:normal}.font-bold{font-weight:700}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-5{line-height:1.25rem}.leading-8{line-height:2rem}.text-alizarin-crimson{--tw-text-opacity:1;color:rgb(232 17 35/var(--tw-text-opacity))}.text-mine-shaft{--tw-text-opacity:1;color:rgb(41 40 39/var(--tw-text-opacity))}.text-storm-dust{--tw-text-opacity:1;color:rgb(100 100 100/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.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-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.file\:hidden::file-selector-button{display:none}.placeholder\:text-storm-dust::-moz-placeholder{--tw-text-opacity:1;color:rgb(100 100 100/var(--tw-text-opacity))}.placeholder\:text-storm-dust::placeholder{--tw-text-opacity:1;color:rgb(100 100 100/var(--tw-text-opacity))}.checked\:border-lochmara:checked{--tw-border-opacity:1;border-color:rgb(0 120 212/var(--tw-border-opacity))}.checked\:bg-lochmara:checked{--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.checked\:bg-\[url\(\'data\:image\/svg\+xml\;base64\2c PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI\+PHBhdGggZD0iTTEzLjg2IDMuNjZhLjUuNSAwIDAxLS4wMi43bC03LjkzIDcuNDhhLjYuNiAwIDAxLS44NC0uMDJMMi40IDkuMWEuNS41IDAgMDEuNzItLjdsMi40IDIuNDQgNy42NS03LjJhLjUuNSAwIDAxLjcuMDJ6IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg\+PC9zdmc\+\'\)\]:checked{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEzLjg2IDMuNjZhLjUuNSAwIDAgMS0uMDIuN2wtNy45MyA3LjQ4YS42LjYgMCAwIDEtLjg0LS4wMkwyLjQgOS4xYS41LjUgMCAwIDEgLjcyLS43bDIuNCAyLjQ0IDcuNjUtNy4yYS41LjUgMCAwIDEgLjcuMDJ6Ii8+PC9zdmc+")}.checked\:bg-center:checked{background-position:50%}.checked\:bg-no-repeat:checked{background-repeat:no-repeat}.invalid\:border-alizarin-crimson:invalid{--tw-border-opacity:1;border-color:rgb(232 17 35/var(--tw-border-opacity))}.hover\:border-science-blue:hover{--tw-border-opacity:1;border-color:rgb(16 110 190/var(--tw-border-opacity))}.hover\:bg-alizarin-crimson:hover{--tw-bg-opacity:1;background-color:rgb(232 17 35/var(--tw-bg-opacity))}.hover\:bg-alto:hover{--tw-bg-opacity:1;background-color:rgb(225 223 221/var(--tw-bg-opacity))}.hover\:bg-concrete:hover{--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.hover\:bg-science-blue:hover{--tw-bg-opacity:1;background-color:rgb(16 110 190/var(--tw-bg-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.active\:border-venice-blue:active{--tw-border-opacity:1;border-color:rgb(0 90 147/var(--tw-border-opacity))}.active\:bg-gallery:active{--tw-bg-opacity:1;background-color:rgb(237 235 233/var(--tw-bg-opacity))}.active\:bg-venice-blue:active{--tw-bg-opacity:1;background-color:rgb(0 90 147/var(--tw-bg-opacity))}.enabled\:hover\:bg-concrete:hover:enabled{--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.enabled\:hover\:bg-tropical-blue:hover:enabled{--tw-bg-opacity:1;background-color:rgb(204 228 246/var(--tw-bg-opacity))}.enabled\:active\:bg-gallery:active:enabled{--tw-bg-opacity:1;background-color:rgb(237 235 233/var(--tw-bg-opacity))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:border-star-dust:disabled{--tw-border-opacity:1;border-color:rgb(161 159 157/var(--tw-border-opacity))}.disabled\:bg-concrete:disabled{--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.disabled\:text-star-dust:disabled{--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.has-\[\:disabled\]\:cursor-default:has(:disabled){cursor:default}.has-\[\:checked\:disabled\]\:bg-concrete:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.has-\[\:checked\]\:bg-lochmara:has(:checked){--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.has-\[\:disabled\]\:bg-white:has(:disabled){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.has-\[\:checked\:disabled\]\:text-star-dust:has(:checked:disabled){--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.has-\[\:checked\]\:text-white:has(:checked){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.has-\[\:disabled\]\:text-star-dust:has(:disabled){--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.has-\[\:checked\:disabled\]\:hover\:bg-concrete:hover:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.has-\[\:checked\]\:hover\:bg-science-blue:hover:has(:checked){--tw-bg-opacity:1;background-color:rgb(16 110 190/var(--tw-bg-opacity))}.has-\[\:checked\:disabled\]\:active\:bg-concrete:active:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(243 242 241/var(--tw-bg-opacity))}.has-\[\:checked\]\:active\:bg-venice-blue:active:has(:checked){--tw-bg-opacity:1;background-color:rgb(0 90 147/var(--tw-bg-opacity))}.aria-checked\:border-lochmara[aria-checked=true]{--tw-border-opacity:1;border-color:rgb(0 120 212/var(--tw-border-opacity))}.aria-checked\:bg-lochmara[aria-checked=true]{--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.group[aria-checked=true] .group-aria-checked\:left-7{left:1.75rem}.group[aria-checked=true] .group-aria-checked\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}@media (prefers-color-scheme:dark){.dark\:border-desert-storm{--tw-border-opacity:1;border-color:rgb(250 249 248/var(--tw-border-opacity))}.dark\:border-lochmara{--tw-border-opacity:1;border-color:rgb(0 120 212/var(--tw-border-opacity))}.dark\:border-star-dust{--tw-border-opacity:1;border-color:rgb(161 159 157/var(--tw-border-opacity))}.dark\:border-b-masala{--tw-border-opacity:1;border-bottom-color:rgb(65 65 65/var(--tw-border-opacity))}.dark\:border-t-masala{--tw-border-opacity:1;border-top-color:rgb(65 65 65/var(--tw-border-opacity))}.dark\:bg-cod-grey{--tw-bg-opacity:1;background-color:rgb(27 26 25/var(--tw-bg-opacity))}.dark\:bg-lochmara{--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.dark\:bg-masala{--tw-bg-opacity:1;background-color:rgb(65 65 65/var(--tw-bg-opacity))}.dark\:bg-mine-shaft{--tw-bg-opacity:1;background-color:rgb(41 40 39/var(--tw-bg-opacity))}.dark\:bg-shark{--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.dark\:bg-star-dust{--tw-bg-opacity:1;background-color:rgb(161 159 157/var(--tw-bg-opacity))}.dark\:bg-tuatara{--tw-bg-opacity:1;background-color:rgb(59 58 57/var(--tw-bg-opacity))}.dark\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.dark\:text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.dark\:text-desert-storm{--tw-text-opacity:1;color:rgb(250 249 248/var(--tw-text-opacity))}.dark\:text-mine-shaft{--tw-text-opacity:1;color:rgb(41 40 39/var(--tw-text-opacity))}.dark\:text-star-dust{--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.dark\:placeholder\:text-star-dust::-moz-placeholder{--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.dark\:placeholder\:text-star-dust::placeholder{--tw-text-opacity:1;color:rgb(161 159 157/var(--tw-text-opacity))}.dark\:checked\:bg-\[url\(\'data\:image\/svg\+xml\;base64\2c PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI\+PHBhdGggZD0iTTEzLjg2IDMuNjZhLjUuNSAwIDAxLS4wMi43bC03LjkzIDcuNDhhLjYuNiAwIDAxLS44NC0uMDJMMi40IDkuMWEuNS41IDAgMDEuNzItLjdsMi40IDIuNDQgNy42NS03LjJhLjUuNSAwIDAxLjcuMDJ6IiBmaWxsPSIjMWIxYTE5Ij48L3BhdGg\+PC9zdmc\+\'\)\]:checked{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzFiMWExOSIgZD0iTTEzLjg2IDMuNjZhLjUuNSAwIDAgMS0uMDIuN2wtNy45MyA3LjQ4YS42LjYgMCAwIDEtLjg0LS4wMkwyLjQgOS4xYS41LjUgMCAwIDEgLjcyLS43bDIuNCAyLjQ0IDcuNjUtNy4yYS41LjUgMCAwIDEgLjcuMDJ6Ii8+PC9zdmc+")}.dark\:hover\:border-dodger-blue:hover{--tw-border-opacity:1;border-color:rgb(40 153 245/var(--tw-border-opacity))}.dark\:hover\:bg-dodger-blue:hover{--tw-bg-opacity:1;background-color:rgb(40 153 245/var(--tw-bg-opacity))}.dark\:hover\:bg-mine-shaft:hover{--tw-bg-opacity:1;background-color:rgb(41 40 39/var(--tw-bg-opacity))}.dark\:hover\:bg-shark:hover{--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.dark\:active\:border-jordy-blue:active{--tw-border-opacity:1;border-color:rgb(108 184 246/var(--tw-border-opacity))}.dark\:active\:bg-jordy-blue:active{--tw-bg-opacity:1;background-color:rgb(108 184 246/var(--tw-bg-opacity))}.dark\:active\:bg-tuatara:active{--tw-bg-opacity:1;background-color:rgb(59 58 57/var(--tw-bg-opacity))}.enabled\:dark\:hover\:bg-shark:hover:enabled{--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.enabled\:dark\:active\:bg-tuatara:active:enabled,.enabled\:dark\:hover\:bg-tuatara:hover:enabled{--tw-bg-opacity:1;background-color:rgb(59 58 57/var(--tw-bg-opacity))}.dark\:disabled\:border-natural-grey:disabled{--tw-border-opacity:1;border-color:rgb(138 136 134/var(--tw-border-opacity))}.dark\:disabled\:bg-shark:disabled{--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.dark\:disabled\:text-natural-grey:disabled{--tw-text-opacity:1;color:rgb(138 136 134/var(--tw-text-opacity))}.disabled\:dark\:text-storm-dust:disabled{--tw-text-opacity:1;color:rgb(100 100 100/var(--tw-text-opacity))}.has-\[\:checked\:disabled\]\:dark\:bg-shark:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.has-\[\:checked\]\:dark\:bg-lochmara:has(:checked){--tw-bg-opacity:1;background-color:rgb(0 120 212/var(--tw-bg-opacity))}.has-\[\:disabled\]\:dark\:bg-cod-grey:has(:disabled){--tw-bg-opacity:1;background-color:rgb(27 26 25/var(--tw-bg-opacity))}.has-\[\:checked\:disabled\]\:dark\:text-natural-grey:has(:checked:disabled){--tw-text-opacity:1;color:rgb(138 136 134/var(--tw-text-opacity))}.has-\[\:checked\]\:dark\:text-mine-shaft:has(:checked){--tw-text-opacity:1;color:rgb(41 40 39/var(--tw-text-opacity))}.has-\[\:disabled\]\:dark\:text-natural-grey:has(:disabled){--tw-text-opacity:1;color:rgb(138 136 134/var(--tw-text-opacity))}.has-\[\:checked\:disabled\]\:hover\:dark\:bg-shark:hover:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.has-\[\:checked\]\:dark\:hover\:bg-dodger-blue:hover:has(:checked){--tw-bg-opacity:1;background-color:rgb(40 153 245/var(--tw-bg-opacity))}.has-\[\:checked\:disabled\]\:dark\:active\:bg-shark:active:has(:checked:disabled){--tw-bg-opacity:1;background-color:rgb(37 36 35/var(--tw-bg-opacity))}.has-\[\:checked\]\:dark\:active\:bg-jordy-blue:active:has(:checked){--tw-bg-opacity:1;background-color:rgb(108 184 246/var(--tw-bg-opacity))}.group[aria-checked=true] .group-aria-checked\:dark\:bg-cod-grey{--tw-bg-opacity:1;background-color:rgb(27 26 25/var(--tw-bg-opacity))}}.\[\&\(multiple\)\]\:h-\[24px\]{height:24px}.\[\&\(multiple\)\]\:h-\[48px\]{height:48px}.\[\&\:multiple\]\:h-\[48px\]:multiple{height:48px}.\[\&\:not\(multiple\)\]\:h-\[24px\]:not(multiple),.\[\&\>\:not\(multiple\)\]\:h-\[24px\]>:not(multiple){height:24px}
\ No newline at end of file