@dhasdk/simple-ui 1.0.0 → 1.0.6

package/README.md

@@ -2,7 +2,7 @@
 
 This library was generated with [Nx](https://nx.dev) on React 18.x.
 
-## <span style="color: orange;">*This library is under active development and not ready for production use outside of DHA WMT\*</span>
+## <span style="color: orange;">*This library is under active development and not ready for production use\*</span>
 
 
 
@@ -13,8 +13,10 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 - [Badge](#badge)
 - [BreadCrumbs](#breadcrumbs)
 - [Button](#button)
+- [ButtonGroup](#buttongroup)
 - [Card](#card)
 - [CharacterCounter](#charactercounter)
+- [CheckBox](#checkbox)
 - [DatePicker](#datepicker)
 - [Input](#input)
 - [List](#list)
@@ -24,13 +26,14 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 - [Select](#select)
 - [SideBarNav](#sidebarnav)
 - [Skeleton](#skeleton)
+- [Slider](#slider)
 - [Status](#status)
 - [Tabs](#tabs)
 - [Toggle](#toggle)
 
 ## Quick Notes:
 
-- Some of these components use what are called **variants**. This allows pre-defined styles to be set, or 'variants', and those variants to be called by name via a prop when using the specified component. An example is the **Button** component below, and calling it using the 'filled' style variant of that component.
+- Some of these components use what are called **variants** from the **class-variance-authority** library. This allows pre-defined styles to be set, or 'variants', and those variants to be called by name via a prop when using the specified component. An example is the **Button** component below, and calling it using the 'DHAActive' style variant of that component (example code below).
 
 <!-- I N S T A L L A T I O N ----------------------------------------------------------------------------------- -->
 
@@ -223,7 +226,9 @@ danger Variant
 
 BreadCrumbs allow users to quickly and easily see their current location in an app or sites heirarchy, as well as quickly navigate to previous levels, enabling quick navigation back to those sections.
 
-The BreadCrumbs component takes in various props (`className`, `classNameContainer`, `variant`, `auto`, and `separator`), in addition to any other html attributes a normal NAV element would use.
+When the container or window is too narrow to display the full Breadcrumbs list, the middle items are truncated into an ellipsis.
+
+The BreadCrumbs component takes in various props in addition to any other html attributes a normal NAV element would use.
 
 A `ref` can also be created and assigned to the button component, and the component will point the reference to the html nav element.
 
@@ -231,7 +236,9 @@ The `className` prop takes a list of alternate CSS classes the developer would l
 
 The `classNameContainer` takes a list of css classes that are applied to the enclosing `nav` element.
 
-Finally, the `separator` prop is a string value that represents the separator used between bread crumbs. The default value is a greater than sign, >.
+The `routes` prop when specified supplies the list of supplied paths + names that are used inside the BreadCrumbs component instead of the component attempting to auto-create a routes list.
+
+If `routes` are not specified, the Breadcrumbs component will attempt to auto-generate and display its parent routes.
 
 Full list of props below
 
@@ -242,18 +249,31 @@ Full list of props below
 | ----------- | -------- | -------- | -------- | -------------------------------------------- |
 | className   | string   | Yes      |   | This is used to apply user supplied styling to the `Link` components. Note that words are capitalized using CSS, and can be made using the prop. |
 | classNameContainer | string   | Yes   |   | This is used to apply user supplied styling to the container `nav` element. |
+| routes | []{ name: string, route: string} | Yes | undefined | When present the Breadcrumbs component will use this list of supplied routes + names instead of attempting to auto-create a routes list. |
 | ...props    | string   | Yes | undefined | takes additional props that are not specifically defined in the component, i.e. aria-label |
-| separator  | string   | Yes       | > | A string separator value to place between the separate breadcrumbs. The default value is '>' |
-| variant    | string   | Yes       |  | Allows the user to enter a pre-defined variant that includes its own pre-defined styling. |
+| separator  | string   | Yes       |  | A string value providing the path name to an alternate separator |
+| variant    | string   | Yes       | 'default' | Allows the user to enter a pre-defined variant that includes its own pre-defined styling, options are 'default' and 'bold'. |
 
 ### Example Usage
 
-Default Variant
+With Auto Routes
 
 ```jsx
   <BreadCrumbs />
 ```
 
+Manually Specified Routes
+
+```jsx
+  <Breadcrumbs 
+    routes = 
+      {[
+        { name: 'Path 1', route: '/path1' },
+        { name: 'Path 2', route: '/path2' },
+        { name: 'Path 3', route: '/path3' },
+      ]}
+  />
+```
 
 ### Dependencies
 
@@ -362,7 +382,8 @@ The **ButtonGroup** is a component that wraps a series of **Button** components,
 
 The **ButtonGroup** also allows the ability to pass common css classes to the individual **Button** components, while allowing individual **Button** components to still utilize their own custom/unique css classes.
 
-A reference can also be created and passed to the button component, and the component will point the reference to the html button.
+The variants labeled **default** and **column** demonstrated in the examples below are UX defined variants.
+
 
 ### Props
 
@@ -371,17 +392,46 @@ A reference can also be created and passed to the button component, and the comp
 | children   | ReactNode   | Yes      |  | This contains one or more Button components that comprise this ButtonGroup. |
 | className | string | Yes  |'' | This prop applies the given classNames to the DIV that wraps and comprises the ButtonGroup component. |
 | classNameButtons | string | Yes | undefined | These are common classes that are applied to each of the children Button components. These classes can be overridden on a one by one basis by using an individual Button components own className prop. |
+| variant | string | Yes | 'default' | One of three possible variants that can be specified, **'default'** and **'column'** are UX defined variants that pre-layout up to three buttons for each variant. A **'custom'** variant is also present that leaves all layout and styling to the developer. |
 
 
 ### Example Usage
 
-simple example
+default variant w/ 3 Buttons (ux styled)
 
 ```jsx
   <ButtonGroup className='w-full'>
-    <Button>A</Button>
-    <Button>B</Button>
-    <Button>C</Button>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
+    <Button variant='transparent' onClick={doSomething}>Tertiary</Button>
+  </ButtonGroup>
+```
+
+default variant w/ 2 Buttons
+
+```jsx
+  <ButtonGroup>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
+  </ButtonGroup>
+```
+
+column variant w/ 3 Buttons
+
+```jsx
+  <ButtonGroup variant='column'>
+    <Button variant='outline' onClick={doSomething} >Secondary</Button>
+    <Button variant='filled' onClick={doSomething} >Primary</Button>
+    <Button variant='transparent' onClick={doSomething} >Tertiary</Button>
+  </ButtonGroup>
+```
+
+column variant w/ 2  Buttons
+
+```jsx
+  <ButtonGroup variant='column'>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
   </ButtonGroup>
 ```
 
@@ -390,26 +440,30 @@ use of common examples
 ```jsx
   <ButtonGroup 
     className='w-full' 
-    classNameButtons="border-2 border-green-500 bg-green-200 font-black">
-    <Button>A</Button>
-    <Button>B</Button>
-    <Button>C</Button>
+    classNameButtons="border-2 border-green-500 bg-green-200 font-black"
+    variant='custom'
+    >
+    <Button onClick={doSomething}>A</Button>
+    <Button onClick={doSomething}>B</Button>
+    <Button onClick={doSomething}>C</Button>
   </ButtonGroup>
 ```
 
 use of custom class
 
 ```jsx
-  <ButtonGroup className='w-full'>
+  <ButtonGroup className='w-full' variant='custom'>
     <Button 
       className='border-2 border-green-500 bg-green-200 font-black'
+       onClick={doSomething} 
       >A</Button>
-    <Button>B</Button>
-    <Button>C</Button>
+    <Button onClick={doSomething}>B</Button>
+    <Button onClick={doSomething}>C</Button>
   </ButtonGroup>
 ```
 
 
+
 ### Dependencies
 
 **_none_**
@@ -546,6 +600,97 @@ Using an altOverageMessageText and altRemainingMessageText
 [Top of Page](#table-of-contents)
 
 
+<!-- C H E C K    B O X -------------------------------------------------------- -->
+
+[Top of Page](#table-of-contents)
+
+## CheckBox
+
+A **CheckBox** is a component that can be either selected or de-selected allowing the user to control a value or selection. A group of **CheckBox** components can be used together to let the user select or deselect a series of related values.
+
+**CheckBoxGroup** is a component that allows CheckBoxes to be placed in a hierarchical order with each individual **CheckBox** placed at a different "level". This allows a user to visually see the relationship between various checkbox items, in addition to seeing the state at various levels when different selections are made.
+
+Note the use of the **key** attribute in the above examples. Without this, toggling between the various **CheckBoxGroup** examples would potential cause errors as the components could be sharing state. If you are having inconsistencies with these components and you are using more than one, try specifying a unique key attribute value.
+
+The **CheckBoxGroup** component can be optionally used with any number of **CheckBox** components to control indented relationships between various individual CheckBoxes. This enables parent CheckBoxes being set to 'indeterminate' state when its various children are both **checked** and **unchecked**.
+
+**CheckBoxGroup** also takes three props that are directly passed down to **CheckBox**, allowing you to specify any of these values in one place instead of in each instance of **CheckBox**. These three props are all boolean values, described below. They are **`fill`**, **`icon`**, and **`marker`**.
+
+Used by itself, **CheckBox** behaves as a normal checkbox component and can be used individually or in groups. It also takes the same attributes that a normal **`html input type="checkbox"`** would.
+
+### Props for CheckBoxGroup
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| bridgePraent   | boolean   | Yes      | {false} | When true, the lines that denote the relationships between parent CheckBoxes and their children are extended at the root level to match root level CheckBoxes to one another. In the above examples, compare 'Multi-Level' and 'bridgeParent' to see the differences. |
+| fill | boolean   | Yes      | {false}  | specifies using the **`fill`** variant or not. If used, the checkbox itself will have a darker solid background. |
+| icon  | boolean  | Yes  | {true} | When **`true`** (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
+| marker | boolean | Yes  | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. |
+| showBranch | boolean | Yes  | {true} | When true this will cause the normal relationship lines between CheckBoxes to appear. If it is false, the indentation will still exist between various levels, but the lines will be absent. In the above examples, compare 'Multi-Level' and 'showBranch false' to see the differences. |
+
+
+### Props for CheckBox
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| ariaLabel   | string   | Yes  | 'CheckBox Component' | The **aria-label** to assign to this CheckBox |
+| className | string | Yes | **`'flex items-center'`** | alternate css classes to add/change styling of the **div** that wraps the **input** element. |
+| classNameInput | string | Yes | **`''`** | alternate css classes to add/change styling of the **input** html element. |
+| classNameSvg | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. |
+| fill | boolean | Yes | {false} | specifies using the **fill** variant or not. If used, the checkbox itself will have a darker solid background. |
+| icon | boolean | Yes | {true} | When true (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
+| marker | boolean | Yes | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. |
+| ...props	 | string | Yes | undefined  | takes additional props that are not specifically defined in the component, i.e. aria-label |
+| ref | string | Yes | undefined | ref is exposed as a prop, and can be assigned and used on this component as normal |
+| value | string | Yes | 'on' | The value passed along if this CheckBox is checked. If checked, both the **name** and the **value** will be submitted as a name/value pair. |
+
+
+
+
+### Example Usage
+
+Basic example
+
+```jsx
+  <CheckBoxGroup key='1'>
+    <CheckBox level={0} name='g1'>Group 1</CheckBox>
+    <CheckBox level={1} name='g1i1'>group 1, item 1</CheckBox>
+    <CheckBox level={1} name='g1i2'>group 1, item 2</CheckBox>
+    <CheckBox level={2} name='h1i2i1'>group 1, item 2, item 1</CheckBox>
+    <CheckBox level={2} name='g1i2i2'>group 1, item 2, item 2</CheckBox>
+    <CheckBox level={1} name='h1i3'>group 1, item 3</CheckBox>
+    <CheckBox level={0} name='g2'>Group 2</CheckBox>
+    <CheckBox level={1} name='g2i1'>group 2, item 1</CheckBox>
+    <CheckBox level={1} name='g2i2'>group 2, item 2</CheckBox>
+    <CheckBox level={2} name='h2i2i1'>group 2, item 2, item 1</CheckBox>
+  </CheckBoxGroup>  
+```
+
+Using markers via the marker prop
+
+```jsx
+  <CheckBoxGroup key='1' marker>
+    <CheckBox level={0} name='g1'>Group 1</CheckBox>
+    <CheckBox level={1} name='g1i1'>group 1, item 1</CheckBox>
+    <CheckBox level={1} name='g1i2'>group 1, item 2</CheckBox>
+    <CheckBox level={2} name='h1i2i1'>group 1, item 2, item 1</CheckBox>
+    <CheckBox level={2} name='g1i2i2'>group 1, item 2, item 2</CheckBox>
+    <CheckBox level={1} name='h1i3'>group 1, item 3</CheckBox>
+    <CheckBox level={0} name='g2'>Group 2</CheckBox>
+    <CheckBox level={1} name='g2i1'>group 2, item 1</CheckBox>
+    <CheckBox level={1} name='g2i2'>group 2, item 2</CheckBox>
+    <CheckBox level={2} name='h2i2i1'>group 2, item 2, item 1</CheckBox>
+  </CheckBoxGroup>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
 <!-- D A T E P I C K E R ------------------------------------------------------------------------------- -->
 
 ## DatePicker
@@ -912,13 +1057,12 @@ Basic Pill
 
 <!-- S E C T I O N H E A D E R  ------------------------------------------------------- -->
 
+
 ## SectionHeader
 
 The **`SectionHeader`** component displays a **`children`** prop as a heading, and uses various additional props to customize the remaining portion of the Header.
 
-Optional props are **`className`**, **`classNameChildren`**, **`classNameSubHeader`**, **`iconLeft`**, **`iconRight`**, **`subHeader`**, and **`underline`**.  Various examples and
-combinations of these props in use can be seen via the above drop down with 
-the **Usage** button
+Various examples and combinations of this components props in use can be seen via code examples below.
 
 Full list of props below
 
@@ -930,43 +1074,48 @@ Full list of props below
 | className   | string   | Yes  | (1) below | Alternate CSS classnames to apply to the SectionHeader component.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
 | classNameChildren   | string   | Yes  | (2) below  | Alternate CSS classnames to apply to the **`children`** component which contains the Header content.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
 | classNameSubHeader   | string   | Yes | (3) below | Alternate CSS classnames to apply to the subHeader portion when present.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| fill | boolean | Yes | false | if true, the background on the sectionHeader is filled. Fill is applied by applying **`bg-[#092068] text-[#f0f0f0]`** to the default classes. A custom fill can be applied by applying your own classList via the **`className`** prop and leaving **`fill`** at its default false setting. |
+| button | boolean | Yes | false | Boolean value specifying whether to display a button or not on the right side of the SectionHeader. |
+| buttonOnClick | () => void | Yes | undefined | An onClick handler for the optional button. |
+| buttonContent | string | Yes | 'Click Me!' | The text content to display in the Button component if enabled |
 | iconLeft   | ReactNode   | Yes  |  | This prop takes an image to display as its left icon. It takes this value as a ReactNode, see examples above. |
 | iconRight   | ReactNode   | Yes  |  | This prop takes an image to display as its right icon. It takes this value as a ReactNode, see examples above. |
 | underline   | boolean   | Yes  | false | When true, an underline is displayed underneath the entire SubHeader, this is done by applying the classes **`border-b-2 border-black`** to the default classes. A custom underline can be applied via the **`className`** prop. |
 | subHeader | string   | Yes  | undefined | This prop takes a string value that is displayed as a SubHeader when present.  If no subHeader is passed in, nothing is displayed in this location. |
-| fill | boolean | Yes | false | if true, the background on the sectionHeader is filled. Fill is applied by applying **`bg-[#092068] text-[#f0f0f0]`** to the default classes. A custom fill can be applied by applying your own classList via the **`className`** prop and leaving **`fill`** at its default false setting. |
-| childButton | ReactNode &#124; undefined | Yes |  |  |
+| type | 'page', 'section', or 'subsection' | Yes | 'page' | This specifies the SectionHeader type to display. Each variation is intended for a lower ordered item than the one before it. The options are 'page', 'section', and 'subsection'. |
 
 
-1. Default classNames
+1. Default classNames 
+
+   - type 'page' - **`pt-4 pb-2 flex pl-6 pr-2 justify-start items-center gap-4 inline-flex w-full`**
 
-- **`pl-6 pr-2 pt-4 pb-2 justify-start items-start gap-4 inline-flex w-full`**
+   - type 'section'/'subsection' - **`py-2 flex pl-6 pr-2 justify-start items-center gap-4 inline-flex w-full`**
 
 2. children classNames
 
-- **`self-stretch text-[40px] font-normal font-["Arial"] leading-[48px] pb-1`**
+   - **`self-stretch text-[40px] font-normal font-["Arial"] leading-[48px] pb-1`**
 
 3. subHeader classNames
 
-- **`text-xl font-normal font-["Arial"] leading-[30px]`**
+   - **`text-xl font-normal font-["Arial"] leading-[30px]`**
 
 ### Example Usage
 
 ```jsx
-  <SectionHeader
-    iconLeft={<img src={frame} alt='left header icon' />}
-    iconRight={<img src={important} alt='left header icon' className='size-8 mt-2' />}
+  <SectionHeader  
+    iconLeft={<img src={frameLight} alt='left header icon' className="size-10" />}
+    iconRight={<img src={importantLight} alt='right header icon' className='size-10' />}
     subHeader="1st things first though"
     underline
-    childButton={<Button variant='transparent' className='h-10' 
-      icon={<img src={chevronRight} alt='right chevron' />}
-      iconPosition='right' >Click Me</Button>}
+    fill
+    button
+    buttonContent="Alert"
+    buttonOnClick={() => alert('Clicked!')}
   >
-    Prologue
+      Prologue
   </SectionHeader>
 ```
 
-
 ### Dependencies
 
 **_none_**
@@ -1321,6 +1470,85 @@ Skeleton w/ Alternate Coloring
 [Top of Page](#table-of-contents)
 
 
+[Top of Page](#table-of-contents)
+<!-- S L I D E R ------------------------------------------------------------------------------ -->
+
+## Slider
+
+A Slider is an html **`input`** element of type 'range' that allows a user to enter a numeric value. It consists of a stationary 'track' and a movable 'thumb', the thumb being the ux element the user drags to indicate a desired value.
+
+The Slider utilizes an input element of type range, and applies additional css styling via a css module.
+
+For accessibility purposes the thumb recieves alternate styling on a focus event. Safari does not provide focus to a slider thumb though, so styling also changes on active, though that is more transient and perhaps less useful for accessibility purposes.
+
+[Additional input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range) not defined below can be passed in as well and applied directly to the html input element.
+
+For the className props, the tailwind **`twMerge`** function is used, so if tailwind classes are passed in, they will replace or add to the existing classes as appropriate.
+
+Full list of props below
+
+### Props for Slider
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the **input** element that makes up the **Slider** component. |
+| classNameLabel | string | Yes |  | A string value of tailwind classes used to apply styling to the **label** inside the **Slider** component. |
+| changeHandler | **`(value: number) => void;`** | Yes |  | A **callback** function can be used to pass values back to the parent. Example in the usage display of the callback example above. |
+| id | string | Yes |  | The **id** value used to link the **label** and **input** elements together. If an **id** is not provided, the **label** is not displayed. |
+
+
+Tailwind CSS Classes used for Slider components
+
+- className defaults
+  - **`w-full block mb-2`**
+- classNameLabel defaults
+  - **`block mb-2'`**
+
+
+### Example Usage
+
+Default example, no callback or label
+
+```jsx
+  <Slider />
+```
+
+Example with callback function
+
+```jsx
+  const [value, setValue] = useState<number>(50);
+  // ...
+
+  return (
+    <>
+        <Slider className='block mb-4' startValue={value} changeHandler={setValue} />
+        <div className='block'>value: {value}</div>
+    </>
+  );
+```
+Slider w/ startValue (an input attribute) & changeHandler
+
+```jsx
+  const [value, setValue] = useState<number>(50);
+  // ...
+
+  <Slider 
+      startValue={value} 
+      changeHandler={setValue} 
+      id='1' 
+      label='Volume Level' 
+      classNameLabel='font-bold text-blue-900' 
+      />
+  <div>value: {value}</div>
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+
 <!-- S T A T U S ---------------------------------------------------------------------------- -->
 
 ## Status

package/index.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{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,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";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,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,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:baseline}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;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,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}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--background: 0 0% 100%;--foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--primary: 166 91% 33%;--primary-foreground: 163 100% 92%;--secondary: 210 40% 96.1%;--secondary-foreground: 222.2 47.4% 11.2%;--muted: 210 40% 96.1%;--muted-foreground: 215.4 16.3% 46.9%;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 210 40% 98%;--border: 214.3 31.8% 91.4%;--input: 214.3 31.8% 91.4%;--ring: 222.2 84% 4.9%;--radius: .5rem}.dark{--background: 222.2 84% 4.9%;--foreground: 210 40% 98%;--card: 222.2 84% 4.9%;--card-foreground: 210 40% 98%;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--primary: 210 40% 98%;--primary-foreground: 222.2 47.4% 11.2%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 215 20.2% 65.1%;--accent: 217.2 32.6% 17.5%;--accent-foreground: 210 40% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 210 40% 98%;--border: 217.2 32.6% 17.5%;--input: 217.2 32.6% 17.5%;--ring: 212.7 26.8% 83.9%}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}*,: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 / .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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::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 / .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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.\!container{width:100%!important}.container{width:100%}@media (min-width: 640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width: 768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width: 1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width: 1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width: 1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.-left-2{left:-.5rem}.-right-2{right:-.5rem}.-top-1{top:-.25rem}.bottom-1{bottom:.25rem}.bottom-\[45px\]{bottom:45px}.bottom-\[60px\]{bottom:60px}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1\/2{top:50%}.top-\[calc\(100\%\+4px\)\]{top:calc(100% + 4px)}.top-full{top:100%}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.col-start-1{grid-column-start:1}.col-start-3{grid-column-start:3}.m-0{margin:0}.-mx-\[0\.1em\]{margin-left:-.1em;margin-right:-.1em}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-mb-8{margin-bottom:-2rem}.-mt-1{margin-top:-.25rem}.-mt-4{margin-top:-1rem}.-mt-8{margin-top:-2rem}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.me-0{margin-inline-end:0px}.me-1{margin-inline-end:.25rem}.me-1\.5{margin-inline-end:.375rem}.me-2{margin-inline-end:.5rem}.me-3{margin-inline-end:.75rem}.me-4{margin-inline-end:1rem}.ml-2{margin-left:.5rem}.ml-2\.5{margin-left:.625rem}.ml-3{margin-left:.75rem}.ml-6{margin-left:1.5rem}.mr-2{margin-right:.5rem}.mr-2\.5{margin-right:.625rem}.mr-3{margin-right:.75rem}.mr-6{margin-right:1.5rem}.ms-0{margin-inline-start:0px}.ms-0\.5{margin-inline-start:.125rem}.ms-1{margin-inline-start:.25rem}.ms-2{margin-inline-start:.5rem}.ms-2\.5{margin-inline-start:.625rem}.ms-4{margin-inline-start:1rem}.ms-5{margin-inline-start:1.25rem}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-\[-0\.5rem\]{margin-top:-.5rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-1{width:.25rem;height:.25rem}.size-1\.5{width:.375rem;height:.375rem}.size-10{width:2.5rem;height:2.5rem}.size-14{width:3.5rem;height:3.5rem}.size-2{width:.5rem;height:.5rem}.size-2\.5{width:.625rem;height:.625rem}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-6{width:1.5rem;height:1.5rem}.size-8{width:2rem;height:2rem}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-24{height:6rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[26px\]{height:26px}.h-\[2px\]{height:2px}.h-\[300px\]{height:300px}.h-\[40px\]{height:40px}.h-\[45px\]{height:45px}.h-\[48px\]{height:48px}.h-\[50px\]{height:50px}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[2em\]{max-height:2em}.w-1\/2{width:50%}.w-16{width:4rem}.w-24{width:6rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-\[150px\]{width:150px}.w-\[250px\]{width:250px}.w-\[292px\]{width:292px}.w-\[309px\]{width:309px}.w-\[35vw\]{width:35vw}.w-\[52px\]{width:52px}.w-\[600px\]{width:600px}.w-\[79px\]{width:79px}.w-\[90vw\]{width:90vw}.w-auto{width:auto}.w-full{width:100%}.min-w-96{min-width:24rem}.min-w-min{min-width:-moz-min-content;min-width:min-content}.max-w-64{max-width:16rem}.max-w-\[2em\]{max-width:2em}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.grow{flex-grow:1}.basis-0{flex-basis:0px}.basis-full{flex-basis:100%}.origin-center{transform-origin:center}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(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)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(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;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-8{--tw-translate-x: 2rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(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)) skew(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)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0px}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.text-clip{text-overflow:clip}.whitespace-nowrap{white-space:nowrap}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[100px\]{border-radius:100px}.rounded-\[40px\]{border-radius:40px}.rounded-\[50\%\]{border-radius:50%}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-b-lg{border-bottom-right-radius:var(--radius);border-bottom-left-radius:var(--radius)}.rounded-b-md{border-bottom-right-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-l-md{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-md{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-t-lg{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.rounded-t-md{border-top-left-radius:calc(var(--radius) - 2px);border-top-right-radius:calc(var(--radius) - 2px)}.rounded-bl{border-bottom-left-radius:.25rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tl{border-top-left-radius:.25rem}.rounded-tr{border-top-right-radius:.25rem}.rounded-tr-none{border-top-right-radius:0}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-4{border-width:4px}.border-8{border-width:8px}.border-\[0\.5px\]{border-width:.5px}.border-\[1px\]{border-width:1px}.border-\[3px\]{border-width:3px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-l-8{border-left-width:8px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-t{border-top-width:1px}.border-t-0{border-top-width:0px}.border-t-2{border-top-width:2px}.border-\[\#0256ab\]{--tw-border-opacity: 1;border-color:rgb(2 86 171 / var(--tw-border-opacity))}.border-\[\#07192D\],.border-\[\#07192d\]{--tw-border-opacity: 1;border-color:rgb(7 25 45 / var(--tw-border-opacity))}.border-\[\#092068\]{--tw-border-opacity: 1;border-color:rgb(9 32 104 / var(--tw-border-opacity))}.border-\[\#305B25\]{--tw-border-opacity: 1;border-color:rgb(48 91 37 / var(--tw-border-opacity))}.border-\[\#40bf40\]{--tw-border-opacity: 1;border-color:rgb(64 191 64 / var(--tw-border-opacity))}.border-\[\#6a686b\]{--tw-border-opacity: 1;border-color:rgb(106 104 107 / var(--tw-border-opacity))}.border-\[\#A1A6A8\]{--tw-border-opacity: 1;border-color:rgb(161 166 168 / var(--tw-border-opacity))}.border-\[\#B3B3B3\]{--tw-border-opacity: 1;border-color:rgb(179 179 179 / var(--tw-border-opacity))}.border-\[\#D54309\]{--tw-border-opacity: 1;border-color:rgb(213 67 9 / var(--tw-border-opacity))}.border-\[\#D9D9D9\]{--tw-border-opacity: 1;border-color:rgb(217 217 217 / var(--tw-border-opacity))}.border-\[\#b3b3b3\]{--tw-border-opacity: 1;border-color:rgb(179 179 179 / var(--tw-border-opacity))}.border-\[\#bbbabc\]{--tw-border-opacity: 1;border-color:rgb(187 186 188 / var(--tw-border-opacity))}.border-\[\#dfe1e2\]{--tw-border-opacity: 1;border-color:rgb(223 225 226 / var(--tw-border-opacity))}.border-\[\#efbd1f\]{--tw-border-opacity: 1;border-color:rgb(239 189 31 / var(--tw-border-opacity))}.border-\[\#ff0004\]{--tw-border-opacity: 1;border-color:rgb(255 0 4 / var(--tw-border-opacity))}.border-black{--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.border-blue-700{--tw-border-opacity: 1;border-color:rgb(29 78 216 / var(--tw-border-opacity))}.border-dha-mc-true-blue{--tw-border-opacity: 1;border-color:rgb(2 86 171 / 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-gray-500{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}.border-green-700{--tw-border-opacity: 1;border-color:rgb(21 128 61 / var(--tw-border-opacity))}.border-purple-500{--tw-border-opacity: 1;border-color:rgb(168 85 247 / var(--tw-border-opacity))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}.border-red-600{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity))}.border-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.border-slate-500{--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity))}.border-yellow-600{--tw-border-opacity: 1;border-color:rgb(202 138 4 / var(--tw-border-opacity))}.bg-\[\#0256AB\]{--tw-bg-opacity: 1;background-color:rgb(2 86 171 / var(--tw-bg-opacity))}.bg-\[\#053ea6\]{--tw-bg-opacity: 1;background-color:rgb(5 62 166 / var(--tw-bg-opacity))}.bg-\[\#07192d\]{--tw-bg-opacity: 1;background-color:rgb(7 25 45 / var(--tw-bg-opacity))}.bg-\[\#092068\]{--tw-bg-opacity: 1;background-color:rgb(9 32 104 / var(--tw-bg-opacity))}.bg-\[\#9FC5F0\]{--tw-bg-opacity: 1;background-color:rgb(159 197 240 / var(--tw-bg-opacity))}.bg-\[\#D9D9D9\]{--tw-bg-opacity: 1;background-color:rgb(217 217 217 / var(--tw-bg-opacity))}.bg-\[\#caecf5\]{--tw-bg-opacity: 1;background-color:rgb(202 236 245 / var(--tw-bg-opacity))}.bg-\[\#d0cfd1\]{--tw-bg-opacity: 1;background-color:rgb(208 207 209 / var(--tw-bg-opacity))}.bg-\[\#d6f4d5\]{--tw-bg-opacity: 1;background-color:rgb(214 244 213 / var(--tw-bg-opacity))}.bg-\[\#eeeeef\]{--tw-bg-opacity: 1;background-color:rgb(238 238 239 / var(--tw-bg-opacity))}.bg-\[\#f4c2c2\]{--tw-bg-opacity: 1;background-color:rgb(244 194 194 / var(--tw-bg-opacity))}.bg-\[\#fff1be\]{--tw-bg-opacity: 1;background-color:rgb(255 241 190 / var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.bg-blue-300{--tw-bg-opacity: 1;background-color:rgb(147 197 253 / var(--tw-bg-opacity))}.bg-blue-400\/10{background-color:#60a5fa1a}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-blue-500\/50{background-color:#3b82f680}.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-300{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.bg-gray-400\/10{background-color:#9ca3af1a}.bg-gray-500{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}.bg-gray-500\/10{background-color:#6b72801a}.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-500\/10{background-color:#22c55e1a}.bg-orange-500{--tw-bg-opacity: 1;background-color:rgb(249 115 22 / var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / 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-500\/10{background-color:#ef44441a}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.bg-slate-500{--tw-bg-opacity: 1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}.bg-slate-600{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / 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-100{--tw-bg-opacity: 1;background-color:rgb(254 249 195 / var(--tw-bg-opacity))}.bg-yellow-50{--tw-bg-opacity: 1;background-color:rgb(254 252 232 / var(--tw-bg-opacity))}.bg-yellow-500\/10{background-color:#eab3081a}.bg-zinc-800{--tw-bg-opacity: 1;background-color:rgb(39 39 42 / var(--tw-bg-opacity))}.bg-opacity-50{--tw-bg-opacity: .5}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#305B25\]{--tw-gradient-from: #305B25 var(--tw-gradient-from-position);--tw-gradient-to: rgb(48 91 37 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-50\%{--tw-gradient-from-position: 50%}.to-\[\#5AAB46\]{--tw-gradient-to: #5AAB46 var(--tw-gradient-to-position)}.bg-clip-content{background-clip:content-box}.fill-\[\#305B25\]{fill:#305b25}.fill-blue-400{fill:#60a5fa}.fill-gray-400{fill:#9ca3af}.fill-green-400{fill:#4ade80}.fill-green-500{fill:#22c55e}.fill-green-600{fill:#16a34a}.fill-red-400{fill:#f87171}.fill-slate-500{fill:#64748b}.fill-white{fill:#fff}.fill-yellow-400{fill:#facc15}.fill-yellow-500{fill:#eab308}.stroke-\[\#a1a6a8\]{stroke:#a1a6a8}.stroke-green-500{stroke:#22c55e}.stroke-red-400{stroke:#f87171}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-\[17px\]{padding:17px}.px-2{padding-left:.5rem;padding-right:.5rem}.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}.px-\[12px\]{padding-left:12px;padding-right:12px}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.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-\[8px\]{padding-top:8px;padding-bottom:8px}.py-px{padding-top:1px;padding-bottom:1px}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pe-2{padding-inline-end:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pl-\[15px\]{padding-left:15px}.pr-0{padding-right:0}.pr-0\.5{padding-right:.125rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.ps-6{padding-inline-start:1.5rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-10{padding-top:2.5rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.font-\[\"Arial\"\],.font-\[\'Arial\'\],.font-\[Arial\]{font-family:Arial}.font-\[\`Arial\`\]{font-family:`Arial`}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[0\.8em\]{font-size:.8em}.text-\[0\.9em\]{font-size:.9em}.text-\[20px\]{font-size:20px}.text-\[32px\]{font-size:32px}.text-\[40px\]{font-size:40px}.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-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.leading-\[18px\]{line-height:18px}.leading-\[19px\]{line-height:19px}.leading-\[30px\]{line-height:30px}.leading-\[48px\]{line-height:48px}.leading-normal{line-height:1.5}.text-\[\#0256ab\]{--tw-text-opacity: 1;color:rgb(2 86 171 / var(--tw-text-opacity))}.text-\[\#07192d\]{--tw-text-opacity: 1;color:rgb(7 25 45 / var(--tw-text-opacity))}.text-\[\#092068\]{--tw-text-opacity: 1;color:rgb(9 32 104 / var(--tw-text-opacity))}.text-\[\#1c1d1f\]{--tw-text-opacity: 1;color:rgb(28 29 31 / var(--tw-text-opacity))}.text-\[\#333234\]{--tw-text-opacity: 1;color:rgb(51 50 52 / var(--tw-text-opacity))}.text-\[\#387740\]{--tw-text-opacity: 1;color:rgb(56 119 64 / var(--tw-text-opacity))}.text-\[\#394150\]{--tw-text-opacity: 1;color:rgb(57 65 80 / var(--tw-text-opacity))}.text-\[\#71767a\]{--tw-text-opacity: 1;color:rgb(113 118 122 / var(--tw-text-opacity))}.text-\[\#747476\]{--tw-text-opacity: 1;color:rgb(116 116 118 / var(--tw-text-opacity))}.text-\[\#966222\]{--tw-text-opacity: 1;color:rgb(150 98 34 / var(--tw-text-opacity))}.text-\[\#A1A6A8\]{--tw-text-opacity: 1;color:rgb(161 166 168 / var(--tw-text-opacity))}.text-\[\#A32C24\]{--tw-text-opacity: 1;color:rgb(163 44 36 / var(--tw-text-opacity))}.text-\[\#f0f0f0\]{--tw-text-opacity: 1;color:rgb(240 240 240 / 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-500{--tw-text-opacity: 1;color:rgb(59 130 246 / 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-dha-mc-true-blue{--tw-text-opacity: 1;color:rgb(2 86 171 / 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-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity))}.text-green-900{--tw-text-opacity: 1;color:rgb(20 83 45 / var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity: 1;color:rgb(147 51 234 / 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-900{--tw-text-opacity: 1;color:rgb(127 29 29 / var(--tw-text-opacity))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity))}.text-slate-200{--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-yellow-700{--tw-text-opacity: 1;color:rgb(161 98 7 / var(--tw-text-opacity))}.text-yellow-900{--tw-text-opacity: 1;color:rgb(113 63 18 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(107 114 128 / var(--tw-placeholder-opacity))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity: 1;color:rgb(107 114 128 / var(--tw-placeholder-opacity))}.opacity-50{opacity:.5}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(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-\[0px_4px_4\.900000095367432px_0px_rgba\(0\,0\,0\,0\.12\)\]{--tw-shadow: 0px 4px 4.900000095367432px 0px rgba(0,0,0,.12);--tw-shadow-colored: 0px 4px 4.900000095367432px 0px 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 / .1), 0 4px 6px -4px rgb(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-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-1{outline-width:1px}.outline-offset-0{outline-offset:0px}.outline-offset-\[-1px\]{outline-offset:-1px}.outline-\[\#387740\]{outline-color:#387740}.outline-\[\#394150\]{outline-color:#394150}.outline-\[\#966121\]{outline-color:#966121}.outline-\[\#a22b23\]{outline-color:#a22b23}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-inset{--tw-ring-inset: inset}.ring-blue-400\/30{--tw-ring-color: rgb(96 165 250 / .3)}.ring-gray-400{--tw-ring-opacity: 1;--tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity))}.ring-gray-400\/20{--tw-ring-color: rgb(156 163 175 / .2)}.ring-gray-700{--tw-ring-opacity: 1;--tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity))}.ring-green-400\/20{--tw-ring-color: rgb(74 222 128 / .2)}.ring-green-500\/20{--tw-ring-color: rgb(34 197 94 / .2)}.ring-red-400\/20{--tw-ring-color: rgb(248 113 113 / .2)}.ring-slate-500{--tw-ring-opacity: 1;--tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity))}.ring-white{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))}.ring-yellow-400\/20{--tw-ring-color: rgb(250 204 21 / .2)}.ring-opacity-5{--tw-ring-opacity: .05}.ring-offset-background{--tw-ring-offset-color: hsl(var(--background))}.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)}.backdrop-blur-2xl{--tw-backdrop-blur: blur(40px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-lg{--tw-backdrop-blur: blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.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-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.duration-300{animation-duration:.3s}.checked\:border-\[\#000\]:checked{--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.checked\:bg-\[\#000\]:checked{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.checked\:p-\[3px\]:checked{padding:3px}.hover\:border-b-2:hover{border-bottom-width:2px}.hover\:border-\[\#5992fa\]:hover{--tw-border-opacity: 1;border-color:rgb(89 146 250 / var(--tw-border-opacity))}.hover\:border-\[\#7392f3\]:hover{--tw-border-opacity: 1;border-color:rgb(115 146 243 / var(--tw-border-opacity))}.hover\:border-dha-mc-secondary-border:hover{--tw-border-opacity: 1;border-color:rgb(198 198 198 / var(--tw-border-opacity))}.hover\:border-gray-400:hover{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity))}.hover\:border-slate-600:hover{--tw-border-opacity: 1;border-color:rgb(71 85 105 / var(--tw-border-opacity))}.hover\:bg-\[\#0752dc\]:hover{--tw-bg-opacity: 1;background-color:rgb(7 82 220 / var(--tw-bg-opacity))}.hover\:bg-\[\#092068\]:hover{--tw-bg-opacity: 1;background-color:rgb(9 32 104 / var(--tw-bg-opacity))}.hover\:bg-\[\#092068\]\/20:hover{background-color:#09206833}.hover\:bg-\[\#0c2c8e\]:hover{--tw-bg-opacity: 1;background-color:rgb(12 44 142 / var(--tw-bg-opacity))}.hover\:bg-\[\#D1DBFB\]:hover{--tw-bg-opacity: 1;background-color:rgb(209 219 251 / var(--tw-bg-opacity))}.hover\:bg-\[\#abb5c2\]:hover{--tw-bg-opacity: 1;background-color:rgb(171 181 194 / var(--tw-bg-opacity))}.hover\:bg-\[\#bbbabc\]:hover{--tw-bg-opacity: 1;background-color:rgb(187 186 188 / var(--tw-bg-opacity))}.hover\:bg-\[\#d1dbfb\]:hover{--tw-bg-opacity: 1;background-color:rgb(209 219 251 / var(--tw-bg-opacity))}.hover\:bg-blue-100:hover{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}.hover\:bg-blue-400:hover{--tw-bg-opacity: 1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.hover\:bg-blue-500:hover{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.hover\:bg-dha-mc-pale-blue:hover{--tw-bg-opacity: 1;background-color:rgb(227 235 243 / var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / 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-gray-600:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.hover\:bg-slate-200:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.hover\:bg-slate-300:hover{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.hover\:bg-slate-400:hover{--tw-bg-opacity: 1;background-color:rgb(148 163 184 / var(--tw-bg-opacity))}.hover\:fill-black:hover{fill:#000}.hover\:font-bold:hover{font-weight:700}.hover\:text-\[\#0000ff\]:hover{--tw-text-opacity: 1;color:rgb(0 0 255 / var(--tw-text-opacity))}.hover\:text-\[\#092068\]:hover{--tw-text-opacity: 1;color:rgb(9 32 104 / var(--tw-text-opacity))}.hover\:text-black:hover{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.hover\:text-purple-700:hover{--tw-text-opacity: 1;color:rgb(126 34 206 / var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:outline-\[\#c6c6c6\]:hover{outline-color:#c6c6c6}.focus\:mb-2:focus{margin-bottom:.5rem}.focus\:rounded-md:focus{border-radius:calc(var(--radius) - 2px)}.focus\:rounded-l-md:focus{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.focus\:rounded-r-md:focus{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.focus\:border-\[\#5992fa\]:focus{--tw-border-opacity: 1;border-color:rgb(89 146 250 / var(--tw-border-opacity))}.focus\:border-black:focus{--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.focus\:bg-\[\#092068\]:focus{--tw-bg-opacity: 1;background-color:rgb(9 32 104 / var(--tw-bg-opacity))}.focus\:bg-\[\#092068\]\/20:focus{background-color:#09206833}.focus\:bg-white:focus{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.focus\:shadow-\[0px_0px_0px_3px_rgba\(238\,131\,255\,1\.00\)\]:focus{--tw-shadow: 0px 0px 0px 3px rgba(238,131,255,1);--tw-shadow-colored: 0px 0px 0px 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:shadow-\[0px_0px_0px_3px_rgba\(251\,137\,241\,1\)\]:focus{--tw-shadow: 0px 0px 0px 3px rgba(251,137,241,1);--tw-shadow-colored: 0px 0px 0px 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:shadow-\[0px_0px_0px_3px_rgba\(251\,137\,241\,1\.00\)\]:focus{--tw-shadow: 0px 0px 0px 3px rgba(251,137,241,1);--tw-shadow-colored: 0px 0px 0px 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:outline-4:focus{outline-width:4px}.focus\:outline-\[\#fa89f1\]:focus{outline-color:#fa89f1}.focus\:ring: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(3px + 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-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.active\:bg-\[\#0F37B3\]:active{--tw-bg-opacity: 1;background-color:rgb(15 55 179 / var(--tw-bg-opacity))}.active\:bg-\[\#9fc5f0\]:active{--tw-bg-opacity: 1;background-color:rgb(159 197 240 / var(--tw-bg-opacity))}.active\:bg-blue-700:active{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.active\:outline-\[\#0256ab\]:active{outline-color:#0256ab}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:border:disabled{border-width:1px}.disabled\:border-2:disabled{border-width:2px}.disabled\:border-\[\#F2F2F2\]:disabled{--tw-border-opacity: 1;border-color:rgb(242 242 242 / var(--tw-border-opacity))}.disabled\:border-\[\#e4e4e5\]:disabled{--tw-border-opacity: 1;border-color:rgb(228 228 229 / var(--tw-border-opacity))}.disabled\:border-dha-mc-bottom-nav-background:disabled{--tw-border-opacity: 1;border-color:rgb(249 249 249 / var(--tw-border-opacity))}.disabled\:border-dha-mc-secondary-border:disabled{--tw-border-opacity: 1;border-color:rgb(198 198 198 / var(--tw-border-opacity))}.disabled\:bg-\[\#939194\]:disabled{--tw-bg-opacity: 1;background-color:rgb(147 145 148 / var(--tw-bg-opacity))}.disabled\:bg-\[\#e4e4e5\]:disabled{--tw-bg-opacity: 1;background-color:rgb(228 228 229 / var(--tw-bg-opacity))}.disabled\:bg-dha-mc-bottom-nav-background:disabled{--tw-bg-opacity: 1;background-color:rgb(249 249 249 / var(--tw-bg-opacity))}.disabled\:text-\[\#939194\]:disabled{--tw-text-opacity: 1;color:rgb(147 145 148 / var(--tw-text-opacity))}.disabled\:text-dha-mc-checkbox-inactive:disabled{--tw-text-opacity: 1;color:rgb(148 148 148 / var(--tw-text-opacity))}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width: 640px){.sm\:max-w-\[15em\]{max-width:15em}}@media (min-width: 768px){.md\:mx-32{margin-left:8rem;margin-right:8rem}.md\:me-2{margin-inline-end:.5rem}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:inline-flex{display:inline-flex}.md\:hidden{display:none}.md\:size-3{width:.75rem;height:.75rem}.md\:size-3\.5{width:.875rem;height:.875rem}.md\:h-\[32px\]{height:32px}.md\:h-\[36px\]{height:36px}.md\:h-\[48px\]{height:48px}.md\:h-\[50px\]{height:50px}.md\:w-\[113px\]{width:113px}.md\:w-\[328px\]{width:328px}.md\:w-\[334px\]{width:334px}.md\:w-\[343px\]{width:343px}.md\:gap-0{gap:0px}.md\:gap-0\.5{gap:.125rem}.md\:gap-4{gap:1rem}.md\:gap-8{gap:2rem}.md\:px-5{padding-left:1.25rem;padding-right:1.25rem}.md\:px-\[14px\]{padding-left:14px;padding-right:14px}.md\:py-0{padding-top:0;padding-bottom:0}.md\:py-1{padding-top:.25rem;padding-bottom:.25rem}.md\:py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.md\:py-\[12px\]{padding-top:12px;padding-bottom:12px}.md\:py-\[14px\]{padding-top:14px;padding-bottom:14px}.md\:pb-6{padding-bottom:1.5rem}.md\:text-\[24px\]{font-size:24px}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:leading-normal{line-height:1.5}.md\:hover\:underline:hover{text-decoration-line:underline}}@media (min-width: 1024px){.lg\:absolute{position:absolute}.lg\:mx-64{margin-left:16rem;margin-right:16rem}.lg\:mb-0{margin-bottom:0}.lg\:mb-0\.5{margin-bottom:.125rem}.lg\:me-2{margin-inline-end:.5rem}.lg\:me-2\.5{margin-inline-end:.625rem}.lg\:ms-1{margin-inline-start:.25rem}.lg\:mt-0{margin-top:0}.lg\:mt-0\.5{margin-top:.125rem}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:size-4{width:1rem;height:1rem}.lg\:\!h-\[18\.65px\]{height:18.65px!important}.lg\:\!h-\[24\.87px\]{height:24.87px!important}.lg\:h-14{height:3.5rem}.lg\:h-\[43px\]{height:43px}.lg\:h-\[56px\]{height:56px}.lg\:w-\[133px\]{width:133px}.lg\:w-\[18\.65px\]{width:18.65px}.lg\:w-\[293px\]{width:293px}.lg\:w-\[350px\]{width:350px}.lg\:w-\[432px\]{width:432px}.lg\:w-\[49\.74px\]{width:49.74px}.lg\:w-\[600px\]{width:600px}.lg\:max-w-\[25em\]{max-width:25em}.lg\:translate-x-6{--tw-translate-x: 1.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:translate-x-\[28px\]{--tw-translate-x: 28px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:translate-x-\[calc\(100\%-6px\)\]{--tw-translate-x: calc(100% - 6px) ;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:gap-0{gap:0px}.lg\:gap-12{gap:3rem}.lg\:gap-6{gap:1.5rem}.lg\:border{border-width:1px}.lg\:border-0{border-width:0px}.lg\:border-none{border-style:none}.lg\:p-\[3\.11px\]{padding:3.11px}.lg\:p-\[3\.1px\]{padding:3.1px}.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}.lg\:px-\[16px\]{padding-left:16px;padding-right:16px}.lg\:py-0{padding-top:0;padding-bottom:0}.lg\:py-2{padding-top:.5rem;padding-bottom:.5rem}.lg\:py-4{padding-top:1rem;padding-bottom:1rem}.lg\:py-\[16px\]{padding-top:16px;padding-bottom:16px}.lg\:pb-7{padding-bottom:1.75rem}.lg\:pl-6{padding-left:1.5rem}.lg\:ps-\[19px\]{padding-inline-start:19px}.lg\:text-\[18px\]{font-size:18px}.lg\:text-\[32px\]{font-size:32px}.lg\:text-lg{font-size:1.125rem;line-height:1.75rem}.lg\:leading-\[27px\]{line-height:27px}.lg\:text-\[\#4E4E4E\]{--tw-text-opacity: 1;color:rgb(78 78 78 / var(--tw-text-opacity))}.lg\:shadow-\[0px_4px_4px_0px_rgba\(0\,0\,0\,0\.25\)\]{--tw-shadow: 0px 4px 4px 0px rgba(0,0,0,.25);--tw-shadow-colored: 0px 4px 4px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}}._testP_87un4_21{color:green;font-weight:700;border:1px solid blue}._slider_87un4_28{display:block}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:50%;margin-bottom:6px}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:#053a5f;height:.5rem;border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:#add8e6;border:2px solid lightskyblue;width:1.25em;height:1.25em;border-radius:50%;margin-top:-.4em}input[type=range]:focus::-webkit-slider-thumb{border:1px solid blue;outline:2px solid blue;outline-offset:.1rem}input[type=range]:active::-webkit-slider-thumb{border:1px solid blue;outline:2px solid blue;outline-offset:.1rem}input[type=range]::-moz-range-track{background:#053a5f;height:.5rem;border-radius:4px}input[type=range]::-moz-range-thumb{background-color:#add8e6;border:2px solid lightskyblue;width:1.25em;height:1.25em;border-radius:50%}input[type=range]:focus::-moz-range-thumb{border:1px solid blue;outline:2px solid blue;outline-offset:.1rem}

package/index.d.ts

@@ -1,5 +1,6 @@
 export { Accordion, AccordionParent } from './lib/Accordion';
 export type { AccordionProps, AccordionParentProps } from './lib/Accordion';
+export { AppointmentPicker } from './lib/AppointmentPicker';
 export { Badge } from './lib/Badge';
 export type { BadgeProps } from './lib/Badge';
 export { Button } from './lib/Button';
@@ -10,6 +11,8 @@ export type { BreadcrumbsProps } from './lib/Breadcrumbs';
 export { Card } from './lib/Card';
 export { CharacterCounter } from './lib/CharacterCounter';
 export type { CharacterCounterProps } from './lib/CharacterCounter';
+export { CheckBox, CheckBoxGroup } from './lib/CheckBox';
+export type { CheckBoxProps, CheckBoxGroupProps } from './lib/CheckBox';
 export { DatePicker } from './lib/DatePicker';
 export type { DatePickerProps } from './lib/DatePicker';
 export { IconPosition } from './lib/Tabs';
@@ -18,6 +21,12 @@ export { List, ListItem } from './lib/List';
 export { Modal } from './lib/Modal';
 export { Pill } from './lib/Pill';
 export type { PillProps } from './lib/Pill';
+export { ProgressBar } from './lib/ProgressBar';
+export type { ProgressBarProps } from './lib/ProgressBar';
+export { RadioGroup } from './lib/RadioGroup';
+export type { RadioOption } from './lib/RadioGroup';
+export { Search } from './lib/Search';
+export type { DataSearchResults, SearchDataItem, SearchProps } from './lib/Search';
 export { SectionHeader } from './lib/SectionHeader';
 export type { SectionHeaderProps } from './lib/SectionHeader';
 export { Select } from './lib/Select';
@@ -28,6 +37,7 @@ export { SideBarNav } from './lib/SideBarNav';
 export { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from './lib/Skeleton';
 export type { SkeletonProps, SkelProps } from './lib/Skeleton';
 export { SkipLink } from './lib/SkipLink';
+export { Slider } from './lib/Slider';
 export { Status } from './lib/Status';
 export type { StatusProps } from './lib/Status';
 export { Tabs } from './lib/Tabs';