/* ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com */  
    
  /*  
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)  
  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)  
  */  
    
  *,  
  ::before,  
  ::after {  
    box-sizing: border-box;  
    /* 1 */  
    border-width: 0;  
    /* 2 */  
    border-style: solid;  
    /* 2 */  
    border-color: #e5e7eb;  
    /* 2 */  
  }  
    
  ::before,  
  ::after {  
    --tw-content: '';  
  }  
    
  /*  
  1. Use a consistent sensible line-height in all browsers.  
  2. Prevent adjustments of font size after orientation changes in iOS.  
  3. Use a more readable tab size.  
  4. Use the user's configured `sans` font-family by default.  
  5. Use the user's configured `sans` font-feature-settings by default.  
  6. Use the user's configured `sans` font-variation-settings by default.  
  */  
    
  html {  
    line-height: 1.5;  
    /* 1 */  
    -webkit-text-size-adjust: 100%;  
    /* 2 */  
    -moz-tab-size: 4;  
    /* 3 */  
    tab-size: 4;  
    /* 3 */  
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";  
    /* 4 */  
    font-feature-settings: normal;  
    /* 5 */  
    font-variation-settings: normal;  
    /* 6 */  
  }  
    
  /*  
  1. Remove the margin in all browsers.  
  2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.  
  */  
    
  body {  
    margin: 0;  
    /* 1 */  
    line-height: inherit;  
    /* 2 */  
  }  
    
  /*  
  1. Add the correct height in Firefox.  
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)  
  3. Ensure horizontal rules are visible by default.  
  */  
    
  hr {  
    height: 0;  
    /* 1 */  
    color: inherit;  
    /* 2 */  
    border-top-width: 1px;  
    /* 3 */  
  }  
    
  /*  
  Add the correct text decoration in Chrome, Edge, and Safari.  
  */  
    
  abbr:where([title]) {  
    -webkit-text-decoration: underline dotted;  
            text-decoration: underline dotted;  
  }  
    
  /*  
  Remove the default font size and weight for headings.  
  */  
    
  h1,  
  h2,  
  h3,  
  h4,  
  h5,  
  h6 {  
    font-size: inherit;  
    font-weight: inherit;  
  }  
    
  /*  
  Reset links to optimize for opt-in styling instead of opt-out.  
  */  
    
  a {  
    color: inherit;  
    text-decoration: inherit;  
  }  
    
  /*  
  Add the correct font weight in Edge and Safari.  
  */  
    
  b,  
  strong {  
    font-weight: bolder;  
  }  
    
  /*  
  1. Use the user's configured `mono` font family by default.  
  2. Correct the odd `em` font sizing in all browsers.  
  */  
    
  code,  
  kbd,  
  samp,  
  pre {  
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;  
    /* 1 */  
    font-size: 1em;  
    /* 2 */  
  }  
    
  /*  
  Add the correct font size in all browsers.  
  */  
    
  small {  
    font-size: 80%;  
  }  
    
  /*  
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.  
  */  
    
  sub,  
  sup {  
    font-size: 75%;  
    line-height: 0;  
    position: relative;  
    vertical-align: baseline;  
  }  
    
  sub {  
    bottom: -0.25em;  
  }  
    
  sup {  
    top: -0.5em;  
  }  
    
  /*  
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)  
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)  
  3. Remove gaps between table borders by default.  
  */  
    
  table {  
    text-indent: 0;  
    /* 1 */  
    border-color: inherit;  
    /* 2 */  
    border-collapse: collapse;  
    /* 3 */  
  }  
    
  /*  
  1. Change the font styles in all browsers.  
  2. Remove the margin in Firefox and Safari.  
  3. Remove default padding in all browsers.  
  */  
    
  button,  
  input,  
  optgroup,  
  select,  
  textarea {  
    font-family: inherit;  
    /* 1 */  
    font-size: 100%;  
    /* 1 */  
    font-weight: inherit;  
    /* 1 */  
    line-height: inherit;  
    /* 1 */  
    color: inherit;  
    /* 1 */  
    margin: 0;  
    /* 2 */  
    padding: 0;  
    /* 3 */  
  }  
    
  /*  
  Remove the inheritance of text transform in Edge and Firefox.  
  */  
    
  button,  
  select {  
    text-transform: none;  
  }  
    
  /*  
  1. Correct the inability to style clickable types in iOS and Safari.  
  2. Remove default button styles.  
  */  
    
  button,  
  [type='button'],  
  [type='reset'],  
  [type='submit'] {  
    -webkit-appearance: button;  
    /* 1 */  
    background-color: transparent;  
    /* 2 */  
    background-image: none;  
    /* 2 */  
  }  
    
  /*  
  Use the modern Firefox focus style for all focusable elements.  
  */  
    
  :-moz-focusring {  
    outline: auto;  
  }  
    
  /*  
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)  
  */  
    
  :-moz-ui-invalid {  
    box-shadow: none;  
  }  
    
  /*  
  Add the correct vertical alignment in Chrome and Firefox.  
  */  
    
  progress {  
    vertical-align: baseline;  
  }  
    
  /*  
  Correct the cursor style of increment and decrement buttons in Safari.  
  */  
    
  ::-webkit-inner-spin-button,  
  ::-webkit-outer-spin-button {  
    height: auto;  
  }  
    
  /*  
  1. Correct the odd appearance in Chrome and Safari.  
  2. Correct the outline style in Safari.  
  */  
    
  [type='search'] {  
    -webkit-appearance: textfield;  
    /* 1 */  
    outline-offset: -2px;  
    /* 2 */  
  }  
    
  /*  
  Remove the inner padding in Chrome and Safari on macOS.  
  */  
    
  ::-webkit-search-decoration {  
    -webkit-appearance: none;  
  }  
    
  /*  
  1. Correct the inability to style clickable types in iOS and Safari.  
  2. Change font properties to `inherit` in Safari.  
  */  
    
  ::-webkit-file-upload-button {  
    -webkit-appearance: button;  
    /* 1 */  
    font: inherit;  
    /* 2 */  
  }  
    
  /*  
  Add the correct display in Chrome and Safari.  
  */  
    
  summary {  
    display: list-item;  
  }  
    
  /*  
  Removes the default spacing and border for appropriate elements.  
  */  
    
  blockquote,  
  dl,  
  dd,  
  h1,  
  h2,  
  h3,  
  h4,  
  h5,  
  h6,  
  hr,  
  figure,  
  p,  
  pre {  
    margin: 0;  
  }  
    
  fieldset {  
    margin: 0;  
    padding: 0;  
  }  
    
  legend {  
    padding: 0;  
  }  
    
  ol,  
  ul,  
  menu {  
    list-style: none;  
    margin: 0;  
    padding: 0;  
  }  
    
  /*  
  Prevent resizing textareas horizontally by default.  
  */  
    
  textarea {  
    resize: vertical;  
  }  
    
  /*  
  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)  
  2. Set the default placeholder color to the user's configured gray 400 color.  
  */  
    
  input::placeholder,  
  textarea::placeholder {  
    opacity: 1;  
    /* 1 */  
    color: #9ca3af;  
    /* 2 */  
  }  
    
  /*  
  Set the default cursor for buttons.  
  */  
    
  button,  
  [role="button"] {  
    cursor: pointer;  
  }  
    
  /*  
  Make sure disabled buttons don't get the pointer cursor.  
  */  
    
  :disabled {  
    cursor: default;  
  }  
    
  /*  
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)  
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)  
     This can trigger a poorly considered lint error in some tools but is included by design.  
  */  
    
  img,  
  svg,  
  video,  
  canvas,  
  audio,  
  iframe,  
  embed,  
  object {  
    display: block;  
    /* 1 */  
    vertical-align: middle;  
    /* 2 */  
  }  
    
  /*  
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)  
  */  
    
  img,  
  video {  
    max-width: 100%;  
    height: auto;  
  }  
    
  /* Make elements with the HTML hidden attribute stay hidden by default */  
    
  [hidden] {  
    display: none;  
  }  
    
  *, ::before, ::after {  
    --tw-border-spacing-x: 0;  
    --tw-border-spacing-y: 0;  
    --tw-translate-x: 0;  
    --tw-translate-y: 0;  
    --tw-rotate: 0;  
    --tw-skew-x: 0;  
    --tw-skew-y: 0;  
    --tw-scale-x: 1;  
    --tw-scale-y: 1;  
    --tw-pan-x:  ;  
    --tw-pan-y:  ;  
    --tw-pinch-zoom:  ;  
    --tw-scroll-snap-strictness: proximity;  
    --tw-gradient-from-position:  ;  
    --tw-gradient-via-position:  ;  
    --tw-gradient-to-position:  ;  
    --tw-ordinal:  ;  
    --tw-slashed-zero:  ;  
    --tw-numeric-figure:  ;  
    --tw-numeric-spacing:  ;  
    --tw-numeric-fraction:  ;  
    --tw-ring-inset:  ;  
    --tw-ring-offset-width: 0px;  
    --tw-ring-offset-color: #fff;  
    --tw-ring-color: rgb(59 130 246 / 0.5);  
    --tw-ring-offset-shadow: 0 0 #0000;  
    --tw-ring-shadow: 0 0 #0000;  
    --tw-shadow: 0 0 #0000;  
    --tw-shadow-colored: 0 0 #0000;  
    --tw-blur:  ;  
    --tw-brightness:  ;  
    --tw-contrast:  ;  
    --tw-grayscale:  ;  
    --tw-hue-rotate:  ;  
    --tw-invert:  ;  
    --tw-saturate:  ;  
    --tw-sepia:  ;  
    --tw-drop-shadow:  ;  
    --tw-backdrop-blur:  ;  
    --tw-backdrop-brightness:  ;  
    --tw-backdrop-contrast:  ;  
    --tw-backdrop-grayscale:  ;  
    --tw-backdrop-hue-rotate:  ;  
    --tw-backdrop-invert:  ;  
    --tw-backdrop-opacity:  ;  
    --tw-backdrop-saturate:  ;  
    --tw-backdrop-sepia:  ;  
  }  
    
  ::backdrop {  
    --tw-border-spacing-x: 0;  
    --tw-border-spacing-y: 0;  
    --tw-translate-x: 0;  
    --tw-translate-y: 0;  
    --tw-rotate: 0;  
    --tw-skew-x: 0;  
    --tw-skew-y: 0;  
    --tw-scale-x: 1;  
    --tw-scale-y: 1;  
    --tw-pan-x:  ;  
    --tw-pan-y:  ;  
    --tw-pinch-zoom:  ;  
    --tw-scroll-snap-strictness: proximity;  
    --tw-gradient-from-position:  ;  
    --tw-gradient-via-position:  ;  
    --tw-gradient-to-position:  ;  
    --tw-ordinal:  ;  
    --tw-slashed-zero:  ;  
    --tw-numeric-figure:  ;  
    --tw-numeric-spacing:  ;  
    --tw-numeric-fraction:  ;  
    --tw-ring-inset:  ;  
    --tw-ring-offset-width: 0px;  
    --tw-ring-offset-color: #fff;  
    --tw-ring-color: rgb(59 130 246 / 0.5);  
    --tw-ring-offset-shadow: 0 0 #0000;  
    --tw-ring-shadow: 0 0 #0000;  
    --tw-shadow: 0 0 #0000;  
    --tw-shadow-colored: 0 0 #0000;  
    --tw-blur:  ;  
    --tw-brightness:  ;  
    --tw-contrast:  ;  
    --tw-grayscale:  ;  
    --tw-hue-rotate:  ;  
    --tw-invert:  ;  
    --tw-saturate:  ;  
    --tw-sepia:  ;  
    --tw-drop-shadow:  ;  
    --tw-backdrop-blur:  ;  
    --tw-backdrop-brightness:  ;  
    --tw-backdrop-contrast:  ;  
    --tw-backdrop-grayscale:  ;  
    --tw-backdrop-hue-rotate:  ;  
    --tw-backdrop-invert:  ;  
    --tw-backdrop-opacity:  ;  
    --tw-backdrop-saturate:  ;  
    --tw-backdrop-sepia:  ;  
  }  
    
  .container {  
    width: 100%;  
  }  
    
  @media (min-width: 640px) {  
    .container {  
      max-width: 640px;  
    }  
      .sm\:mx-auto {  
        margin-left: auto;  
        margin-right: auto;  
      }  
      
      .sm\:max-w-lg {  
        max-width: 32rem;  
      }  
      
  }  
    
  @media (min-width: 768px) {  
    .container {  
      max-width: 768px;  
    }  
      .md\:block {  
        display: block;  
      }  
      
      .md\:min-h-\[300px\] {  
        min-height: 300px;  
      }  
      
      .md\:min-w-\[168\.75\] {  
        min-width: 168.75;  
      }  
      
      .md\:min-w-\[240px\] {  
        min-width: 240px;  
      }  
      
      .md\:max-w-\[360px\] {  
        max-width: 360px;  
      }  
      
      .md\:px-4 {  
        padding-left: 1rem;  
        padding-right: 1rem;  
      }  
      
      .md\:py-2 {  
        padding-top: 0.5rem;  
        padding-bottom: 0.5rem;  
      }  
      
      .md\:py-2\.5 {  
        padding-top: 0.625rem;  
        padding-bottom: 0.625rem;  
      }  
  }  
    
  @media (min-width: 1024px) {  
    .container {  
      max-width: 1024px;  
    }  
      .lg\:ml-3 {  
        margin-left: 0.75rem;  
      }  
      
      .lg\:min-h-\[375px\] {  
        min-height: 375px;  
      }  
      
      .lg\:min-w-\[210\.9375px\] {  
        min-width: 210.9375px;  
      }  
      
      .lg\:min-w-\[240px\] {  
        min-width: 240px;  
      }  
      
      .lg\:border-t-8 {  
        border-top-width: 8px;  
      }  
      
      .lg\:px-5 {  
        padding-left: 1.25rem;  
        padding-right: 1.25rem;  
      }  
      
      .lg\:py-3 {  
        padding-top: 0.75rem;  
        padding-bottom: 0.75rem;  
      }  
      
      .lg\:text-xl {  
        font-size: 1.25rem;  
        line-height: 1.75rem;  
      }  
  }  
    
  @media (min-width: 1280px) {  
    .container {  
      max-width: 1280px;  
    }  
  }  
    
  @media (min-width: 1536px) {  
    .container {  
      max-width: 1536px;  
    }  
  }  
    
  .absolute {  
    position: absolute;  
  }  
    
  .relative {  
    position: relative;  
  }  
    
  .sticky {  
    position: sticky;  
  }  
    
  .inset-0 {  
    inset: 0px;  
  }  
    
  .left-1\/2 {  
    left: 50%;  
  }  
    
  .right-0 {  
    right: 0px;  
  }  
    
  .top-0 {  
    top: 0px;  
  }  
    
  .top-1\/2 {  
    top: 50%;  
  }  
    
  .z-10 {  
    z-index: 10;  
  }  
    
  .z-15 {  
    z-index: 15;  
  }  
    
  .mx-2 {  
    margin-left: 0.5rem;  
    margin-right: 0.5rem;  
  }
  
   .mx-1 {
     margin-left: 0.25rem;
     margin-right: 0.25rem;
   }
    
  .mx-auto {  
    margin-left: auto;  
    margin-right: auto;  
  }  
  .my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
    
  .my-1 {  
    margin-top: 0.25rem;  
    margin-bottom: 0.25rem;  
  }  
    
  .my-2 {  
    margin-top: 0.5rem;  
    margin-bottom: 0.5rem;  
  }  
    
  .ml-4 {  
    margin-left: 1rem;  
  }  
    
  .box-border {  
    box-sizing: border-box;  
  }  
    
  .flex {  
    display: flex;  
  }  
    
  .h-6 {  
    height: 1.5rem;  
  }  
    
  .h-\[240px\] {  
    height: 240px;  
  }  
    
  .h-screen {  
    height: 100vh;  
  }  
    
  .min-h-\[240px\] {  
    min-height: 240px;  
  }  
    
  .min-h-screen {  
    min-height: 100vh;  
  }  
    
  .w-6 {  
    width: 1.5rem;  
  }  
    
  .w-full {  
    width: 100%;  
  }  
    
  .min-w-\[135px\] {  
    min-width: 135px;  
  }  
    
  .max-w-md {  
    max-width: 28rem;  
  }  
    
  .max-w-none {  
    max-width: none;  
  }  
    
  .flex-auto {  
    flex: 1 1 auto;  
  }  
    
  .flex-none {  
    flex: none;  
  }  
    
  .grow {  
    flex-grow: 1;  
  }  
    
  .shrink-0 {  
    flex-shrink: 0;  
  }  
    
  .basis-1\/2 {  
    flex-basis: 50%;  
  }  
  
  .basis-full	{
    flex-basis: 100%;
  }
    
  basis-1\/12 {  
    flex-basis:  8.333333%;  
  }  
    
  .basis-11\/12 {  
    flex-basis: 91.666667%;  
  }  
    
  .-translate-x-1\/2 {  
    --tw-translate-x: -50%;  
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));  
  }  
    
  .-translate-y-1\/2 {  
    --tw-translate-y: -50%;  
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));  
  }  
    
  .flex-col {  
    flex-direction: column;  
  }  
    
  .flex-col-reverse {  
    flex-direction: column-reverse;  
  }  
    
  .items-end {  
    align-items: flex-end;  
  }  
    
  .items-center {  
    align-items: center;  
  }  
  
    .items-between {
      align-items: spac;
    }
    
  .justify-center {  
    justify-content: center;  
  }  
    .justify-between {
      justify-content: space-between;
    }
    
  .gap-1 {  
    gap: 0.25rem;  
  }  
    
  .gap-2 {  
    gap: 0.5rem;  
  }
  
  .p-2 {
    padding: 0.25rem; 
  }
    
  .gap-8 {  
    gap: 2rem;  
  }  
    
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {  
    --tw-space-y-reverse: 0;  
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));  
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));  
  }  
    
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {  
    --tw-space-y-reverse: 0;  
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));  
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));  
  }  
    
  .divide-y > :not([hidden]) ~ :not([hidden]) {  
    --tw-divide-y-reverse: 0;  
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));  
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));  
  }  
    
  .divide-gray-300\/50 > :not([hidden]) ~ :not([hidden]) {  
    border-color: rgb(209 213 219 / 0.5);  
  }  
    
  .overflow-auto {  
    overflow: auto;  
  }  
  
  .w-auto{
    width: auto;
  }
    
  .overflow-y-auto {  
    overflow-y: auto;  
  }  
    
  .overflow-x-auto {  
    overflow-x: auto;  
  }  
    
  .overflow-hidden {  
    overflow: hidden;  
  }  
    
  .overflow-x-hidden {  
    overflow-x: hidden;  
  }  
    
  .overscroll-auto {  
    overscroll-behavior: auto;  
  }  
    
  .rounded {  
    border-radius: 0.25rem;  
  }  
    
  .rounded-lg {  
    border-radius: 0.5rem;  
  }  
    
  .border-t-2 {  
    border-top-width: 2px;  
  }  
    
  .border-t-4 {  
    border-top-width: 4px;  
  }  
    
  .border-blue-600 {  
    --tw-border-opacity: 1;  
    border-color: rgb(37 99 235 / var(--tw-border-opacity));  
  }  
    
  .border-slate-800 {  
    --tw-border-opacity: 1;  
    border-color: rgb(30 41 59 / var(--tw-border-opacity));  
  }  
    
  .bg-gray-50 {  
    --tw-bg-opacity: 1;  
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));  
  }  
    
  .bg-green-500 {  
    --tw-bg-opacity: 1;  
    background-color: rgb(34 197 94 / var(--tw-bg-opacity));  
  }  
  
  .px-8 {
    padding: 0px 16px;
  }
    
  .bg-rose-500 {  
    --tw-bg-opacity: 1;  
    background-color: rgb(244 63 94 / var(--tw-bg-opacity));  
  }  
    
  .bg-slate-100 {  
    --tw-bg-opacity: 1;  
    background-color: rgb(241 245 249 / var(--tw-bg-opacity));  
  }  
    
  .text-slate-100 {  
      --tw-text-opacity: 1;  
      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-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-transparent {  
    background-color: transparent;  
  }  
    
  .bg-white {  
    --tw-bg-opacity: 1;  
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));  
  }  
    
  .bg-\[url\(\/img\/grid\.svg\)\] {  
    background-image: url(/img/grid.svg);  
  }  
    
  .bg-center {  
    background-position: center;  
  }  
    
  .fill-sky-100 {  
    fill: #e0f2fe;  
  }  
    
  .stroke-sky-500 {  
    stroke: #0ea5e9;  
  }  
    
  .stroke-2 {  
    stroke-width: 2;  
  }  
    
  .px-2 {  
    padding-left: 0.5rem;  
    padding-right: 0.5rem;  
  }  
    
  .px-3 {  
    padding-left: 0.75rem;  
    padding-right: 0.75rem;  
  }  
    
  .px-5 {  
    padding-left: 1.25rem;  
    padding-right: 1.25rem;  
  }  
    
  .px-6 {  
    padding-left: 1.5rem;  
    padding-right: 1.5rem;  
  }  
    
  .py-1 {  
    padding-top: 0.25rem;  
    padding-bottom: 0.25rem;  
  }  
    
  .py-2 {  
    padding-top: 0.5rem;  
    padding-bottom: 0.5rem;  
  }  
    
  .py-6 {  
    padding-top: 1.5rem;  
    padding-bottom: 1.5rem;  
  }  
    
  .py-8 {  
    padding-top: 2rem;  
    padding-bottom: 2rem;  
  }  
    
  .pb-8 {  
    padding-bottom: 2rem;  
  }  
    
  .pt-10 {  
    padding-top: 2.5rem;  
  }  
    
  .pt-8 {  
    padding-top: 2rem;  
  }  
    
  .text-right {  
    text-align: right;  
  }  
    
  .text-2xl {  
    font-size: 1.5rem;  
    line-height: 2rem;  
  }  
    
  .text-base {  
    font-size: 1rem;  
    line-height: 1.5rem;  
  }  
    
  .text-lg {  
    font-size: 1.125rem;  
    line-height: 1.75rem;  
  }  
    
  .text-sm {  
    font-size: 0.875rem;  
    line-height: 1.25rem;  
  }  
    
  .font-bold {  
    font-weight: 700;  
  }  
    
  .font-medium {  
    font-weight: 500;  
  }  
    
  .font-semibold {  
    font-weight: 600;  
  }  
    
  .leading-7 {  
    line-height: 1.75rem;  
  }  
    
  .text-gray-600 {  
    --tw-text-opacity: 1;  
    color: rgb(75 85 99 / var(--tw-text-opacity));  
  }  
    
  .text-gray-900 {  
    --tw-text-opacity: 1;  
    color: rgb(17 24 39 / var(--tw-text-opacity));  
  }  
    
  .text-sky-500 {  
    --tw-text-opacity: 1;  
    color: rgb(14 165 233 / var(--tw-text-opacity));  
  }  
    
  .text-slate-800 {  
    --tw-text-opacity: 1;  
    color: rgb(30 41 59 / var(--tw-text-opacity));  
  }  
    
  .text-slate-900 {  
    --tw-text-opacity: 1;  
    color: rgb(15 23 42 / var(--tw-text-opacity));  
  }  
    
  .shadow-xl {  
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);  
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);  
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);  
  }  
    
  .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-gray-900\/5 {  
    --tw-ring-color: rgb(17 24 39 / 0.05);  
  }  
    
  .transition-all {  
    transition-property: all;  
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);  
    transition-duration: 150ms;  
  }  
    
  .duration-\[2500ms\] {  
    transition-duration: 2500ms;  
  }  
    
  .duration-\[1500ms\] {  
    transition-duration: 1500ms;  
  }  
    
  .ease-in-out {  
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);  
  }  
    
  .ease-linear {  
    transition-timing-function: linear;  
  }  
    
  .\[mask-image\:linear-gradient\(180deg\2c white\2c rgba\(255\2c 255\2c 255\2c 0\)\)\] {  
    -webkit-mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));  
            mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));  
  }  
    
  .hover\:text-sky-600:hover {  
    --tw-text-opacity: 1;  
    color: rgb(2 132 199 / var(--tw-text-opacity));  
  }  
    
  @media (min-width: 640px) {  
    .sm\:mx-auto {  
      margin-left: auto;  
      margin-right: auto;  
    }  
    
    .sm\:max-w-lg {  
      max-width: 32rem;  
    }  
    
    .sm\:rounded-lg {  
      border-radius: 0.5rem;  
    }  
    
    .sm\:px-10 {  
      padding-left: 2.5rem;  
      padding-right: 2.5rem;  
    }  
    
    .sm\:py-12 {  
      padding-top: 3rem;  
      padding-bottom: 3rem;  
    }  
  }  
    
  @media (min-width: 768px) {  
    .md\:basis-2\/3 {  
      flex-basis: 66.666667%;  
    }  
  }  
    
  @media (min-width: 1024px) {  
    .lg\:basis-3\/4 {  
      flex-basis: 75%;  
    }  
  }  
    
  .hidden {  
    display: none;  
  }  
    
  .overscroll-contain {  
    overscroll-behavior: none;  
  }  
    
  .relative {  
    position: relative;  
  }  
    
  .right-0 {  
    right: 0px;  
  }  
    
  .flex-row-reverse {  
    flex-direction: row-reverse;  
  }  
    
  .left-0 {  
    left: 0px;  
  }  
    
  .bottom-0 {  
    bottom: 0px;  
  }  
    
  .justify-items-end {  
    justify-items: end;  
  }  
    
  .-mt-1 {  
    margin-top: -0.25rem;  
  }  
    
  .h-fit {  
    height: fit-content;  
  }  
    
  .h-max {  
    height: max-content;  
  }  
    
  .h-min {  
    height: min-content;  
  }  
  .flex-nowrap {  
    flex-wrap: nowrap;  
  }  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  .absolute {  
    position: absolute;  
  }  
    
  .relative {  
    position: relative;  
  }  
    
  .inset-0 {  
    inset: 0px;  
  }  
    
  .left-1\/2 {  
    left: 50%;  
  }  
    
  .top-1\/2 {  
    top: 50%;  
  }  
    
  .mx-auto {  
    margin-left: auto;  
    margin-right: auto;  
  }  
    
  .ml-2 {  
    margin-left: 0.5rem;  
  }  
    
  .ml-4 {  
    margin-left: 1rem;  
  }  
    
  .flex {  
    display: flex;  
  }  
    
  .hidden {  
    display: none;  
  }  
    
  .h-6 {  
    height: 1.5rem;  
  }  
    
  .min-h-screen {  
    min-height: 100vh;  
  }  
    
  .w-6 {  
    width: 1.5rem;  
  }  
    
  .max-w-md {  
    max-width: 28rem;  
  }  
    
  .max-w-none {  
    max-width: none;  
  }  
    
  .flex-none {  
    flex: none;  
  }  
    
  .shrink-0 {  
    flex-shrink: 0;  
  }  
    
  .-translate-x-1\/2 {  
    --tw-translate-x: -50%;  
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));  
  }  
    
  .-translate-y-1\/2 {  
    --tw-translate-y: -50%;  
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));  
  }  
    
  .flex-col {  
    flex-direction: column;  
  }  
    
  .flex-nowrap {  
    flex-wrap: nowrap;  
  }  
    
  .items-center {  
    align-items: center;  
  }  
    
  .justify-center {  
    justify-content: center;  
  }  
    
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {  
    --tw-space-y-reverse: 0;  
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));  
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));  
  }  
    
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {  
    --tw-space-y-reverse: 0;  
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));  
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));  
  }  
    
  .divide-y > :not([hidden]) ~ :not([hidden]) {  
    --tw-divide-y-reverse: 0;  
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));  
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));  
  }  
    
  .divide-gray-300\/50 > :not([hidden]) ~ :not([hidden]) {  
    border-color: rgb(209 213 219 / 0.5);  
  }  
    
  .overflow-hidden {  
    overflow: hidden;  
  }  
    
  .bg-gray-50 {  
    --tw-bg-opacity: 1;  
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));  
  }  
    
  .bg-white {  
    --tw-bg-opacity: 1;  
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));  
  }  
    
  .bg-\[url\(\/img\/grid\.svg\)\] {  
    background-image: url(/img/grid.svg);  
  }  
    
  .bg-center {  
    background-position: center;  
  }  
    
  .fill-sky-100 {  
    fill: #e0f2fe;  
  }  
    
  .fill-slate-100 {  
    fill: #f1f5f9;  
  }  
    
  .stroke-sky-500 {  
    stroke: #0ea5e9;  
  }  
    
  .stroke-2 {  
    stroke-width: 2;  
  }  
    
  .px-6 {  
    padding-left: 1.5rem;  
    padding-right: 1.5rem;  
  }  
    
  .py-6 {  
    padding-top: 1.5rem;  
    padding-bottom: 1.5rem;  
  }  
    
  .py-8 {  
    padding-top: 2rem;  
    padding-bottom: 2rem;  
  }  
    
  .pb-8 {  
    padding-bottom: 2rem;  
  }  
    
  .pt-10 {  
    padding-top: 2.5rem;  
  }  
    
  .pt-8 {  
    padding-top: 2rem;  
  }  
    
  .text-base {  
    font-size: 1rem;  
    line-height: 1.5rem;  
  }  
    
  .text-sm {  
    font-size: 0.875rem;  
    line-height: 1.25rem;  
  }  
    
  .font-bold {  
    font-weight: 700;  
  }  
    
  .font-semibold {  
    font-weight: 600;  
  }  
    
  .leading-7 {  
    line-height: 1.75rem;  
  }  
    
  .text-gray-600 {  
    --tw-text-opacity: 1;  
    color: rgb(75 85 99 / var(--tw-text-opacity));  
  }  
    
  .text-gray-900 {  
    --tw-text-opacity: 1;  
    color: rgb(17 24 39 / var(--tw-text-opacity));  
  }  
    
  .text-sky-500 {  
    --tw-text-opacity: 1;  
    color: rgb(14 165 233 / var(--tw-text-opacity));  
  }  
    
  .text-slate-100 {  
    --tw-text-opacity: 1;  
    color: rgb(241 245 249 / var(--tw-text-opacity));  
  }  
    
  .shadow-xl {  
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);  
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);  
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);  
  }  
    
  .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-gray-900\/5 {  
    --tw-ring-color: rgb(17 24 39 / 0.05);  
  }  
    
  .\[mask-image\:linear-gradient\(180deg\2c white\2c rgba\(255\2c 255\2c 255\2c 0\)\)\] {  
    -webkit-mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));  
            mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));  
  }  
    
  .hover\:text-sky-600:hover {  
    --tw-text-opacity: 1;  
    color: rgb(2 132 199 / var(--tw-text-opacity));  
  }  
    
  @media (min-width: 1280px) {  
    .xl\:text-2xl {  
      font-size: 1.5rem;  
      line-height: 2rem;  
    }  
  }  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  .absolute {  
    position: absolute;  
  }  
    
  .relative {  
    position: relative;  
  }  
    
  .inset-0 {  
    inset: 0px;  
  }  
    
  .left-1\/2 {  
    left: 50%;  
  }  
    
  .top-1\/2 {  
    top: 50%;  
  }  
    
  .mx-auto {  
    margin-left: auto;  
    margin-right: auto;  
  }  
    
  .ml-2 {  
    margin-left: 0.5rem;  
  }  
    
  .ml-4 {  
    margin-left: 1rem;  
  }  
    
  .flex {  
    display: flex;  
  }  
    
  .hidden {  
    display: none;  
  }  
    
  .h-6 {  
    height: 1.5rem;  
  }  
    
  .min-h-screen {  
    min-height: 100vh;  
  }  
    
  .w-6 {  
    width: 1.5rem;  
  }  
    
  .max-w-md {  
    max-width: 28rem;  
  }  
    
  .max-w-none {  
    max-width: none;  
  }  
    
  .flex-none {  
    flex: none;  
  }  
    
  .shrink-0 {  
    flex-shrink: 0;  
  }  
    
  .-translate-x-1\/2 {  
    --tw-translate-x: -50%;  
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));  
  }  
    
  .-translate-y-1\/2 {  
    --tw-translate-y: -50%;  
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));  
  }  
    
  .flex-col {  
    flex-direction: column;  
  }  
    
  .flex-nowrap {  
    flex-wrap: nowrap;  
  }  
    
  .items-center {  
    align-items: center;  
  }  
    
  .justify-center {  
    justify-content: center;  
  }  
    
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {  
    --tw-space-y-reverse: 0;  
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));  
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));  
  }  
    
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {  
    --tw-space-y-reverse: 0;  
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));  
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));  
  }  
    
  .divide-y > :not([hidden]) ~ :not([hidden]) {  
    --tw-divide-y-reverse: 0;  
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));  
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));  
  }  
    
  .divide-gray-300\/50 > :not([hidden]) ~ :not([hidden]) {  
    border-color: rgb(209 213 219 / 0.5);  
  }  
    
  .overflow-hidden {  
    overflow: hidden;  
  }  
    
  .bg-gray-50 {  
    --tw-bg-opacity: 1;  
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));  
  }  
    
  .bg-white {  
    --tw-bg-opacity: 1;  
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));  
  }  
    
  .bg-\[url\(\/img\/grid\.svg\)\] {  
    background-image: url(/img/grid.svg);  
  }  
    
  .bg-center {  
    background-position: center;  
  }  
    
  .fill-sky-100 {  
    fill: #e0f2fe;  
  }  
    
  .fill-slate-100 {  
    fill: #f1f5f9;  
  }  
    
  .stroke-sky-500 {  
    stroke: #0ea5e9;  
  }  
    
  .stroke-2 {  
    stroke-width: 2;  
  }  
    
  .px-6 {  
    padding-left: 1.5rem;  
    padding-right: 1.5rem;  
  }  
    
  .py-6 {  
    padding-top: 1.5rem;  
    padding-bottom: 1.5rem;  
  }  
    
  .py-8 {  
    padding-top: 2rem;  
    padding-bottom: 2rem;  
  }  
    
  .pb-8 {  
    padding-bottom: 2rem;  
  }  
    
  .pt-10 {  
    padding-top: 2.5rem;  
  }  
    
  .pt-8 {  
    padding-top: 2rem;  
  }  
    
  .text-base {  
    font-size: 1rem;  
    line-height: 1.5rem;  
  }  
    
  .text-sm {  
    font-size: 0.875rem;  
    line-height: 1.25rem;  
  }  
    
  .font-bold {  
    font-weight: 700;  
  }  
    
  .font-semibold {  
    font-weight: 600;  
  }  
    
  .leading-7 {  
    line-height: 1.75rem;  
  }  
    
  .text-gray-600 {  
    --tw-text-opacity: 1;  
    color: rgb(75 85 99 / var(--tw-text-opacity));  
  }  
    
  .text-gray-900 {  
    --tw-text-opacity: 1;  
    color: rgb(17 24 39 / var(--tw-text-opacity));  
  }  
    
  .text-sky-500 {  
    --tw-text-opacity: 1;  
    color: rgb(14 165 233 / var(--tw-text-opacity));  
  }  
    
  .text-slate-100 {  
    --tw-text-opacity: 1;  
    color: rgb(241 245 249 / var(--tw-text-opacity));  
  }  
    
  .shadow-xl {  
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);  
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);  
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);  
  }  
    
  .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-gray-900\/5 {  
    --tw-ring-color: rgb(17 24 39 / 0.05);  
  }  
    
  .\[mask-image\:linear-gradient\(180deg\2c white\2c rgba\(255\2c 255\2c 255\2c 0\)\)\] {  
    -webkit-mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));  
            mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));  
  }  
    
  .hover\:text-sky-600:hover {  
    --tw-text-opacity: 1;  
    color: rgb(2 132 199 / var(--tw-text-opacity));  
  }  
    
  @media (min-width: 640px) {  
    .sm\:mx-auto {  
      margin-left: auto;  
      margin-right: auto;  
    }  
    
    .sm\:max-w-lg {  
      max-width: 32rem;  
    }  
    
    .sm\:rounded-lg {  
      border-radius: 0.5rem;  
    }  
    
    .sm\:px-10 {  
      padding-left: 2.5rem;  
      padding-right: 2.5rem;  
    }  
    
    .sm\:py-12 {  
      padding-top: 3rem;  
      padding-bottom: 3rem;  
    }  
  }  
    
  @media (min-width: 768px) {  
    .md\:block {  
      display: block;  
    }  
    
    .md\:min-h-\[300px\] {  
      min-height: 300px;  
    }  
    
    .md\:min-w-\[168\.75\] {  
      min-width: 168.75;  
    }  
    
    .md\:min-w-\[240px\] {  
      min-width: 240px;  
    }  
    
    .md\:max-w-\[360px\] {  
      max-width: 360px;  
    }  
    
    .md\:border-t-\[6px\] {  
      border-top-width: 6px;  
    }  
    
    .md\:px-4 {  
      padding-left: 1rem;  
      padding-right: 1rem;  
    }  
    
    .md\:py-2 {  
      padding-top: 0.5rem;  
      padding-bottom: 0.5rem;  
    }  
    
    .md\:py-2\.5 {  
      padding-top: 0.625rem;  
      padding-bottom: 0.625rem;  
    }  
    
    .md\:text-lg {  
      font-size: 1.125rem;  
      line-height: 1.75rem;  
    }  
  }  
    
  @media (min-width: 1024px) {  
    .lg\:ml-3 {  
      margin-left: 0.75rem;  
    }  
    
    .lg\:min-h-\[375px\] {  
      min-height: 375px;  
    }  
    
    .lg\:min-w-\[210\.9375px\] {  
      min-width: 210.9375px;  
    }  
    
    .lg\:min-w-\[240px\] {  
      min-width: 240px;  
    }  
    
    .lg\:border-t-8 {  
      border-top-width: 8px;  
    }  
    
    .lg\:border-t-\[8px\] {  
      border-top-width: 8px;  
    }  
    
    .lg\:px-5 {  
      padding-left: 1.25rem;  
      padding-right: 1.25rem;  
    }  
    
    .lg\:py-3 {  
      padding-top: 0.75rem;  
      padding-bottom: 0.75rem;  
    }  
    
    .lg\:text-xl {  
      font-size: 1.25rem;  
      line-height: 1.75rem;  
    }  
  }  
    
  @media (min-width: 1280px) {  
    .xl\:text-2xl {  
      font-size: 1.5rem;  
      line-height: 2rem;  
    }  
  } 
   
  .min-w-10\/12 { 
    min-width: 83.333333%; 
  } 
   
  .min-w-2\/12 { 
    min-width: 16.666667%; 
  } 
   
  .min-w-1\/2 { 
    min-width: 50%; 
  }
  
  .min-w-2\/3 {
    min-width: 66.6666%;
  }
   
  .max-w-1\/2 { 
    max-width: 50% 
  } 
   
  .min-w-4\/5 { 
    min-width: 80%; 
  } 
   
  .min-w-1\/5 { 
    min-width: 20%; 
  } 
   
  .max-w-4\/5 { 
    max-width: 80%; 
  } 
   
  .max-w-1\/5 { 
    max-width: 20%; 
  } 
   
   .text-rose-500 { 
     --tw-bg-opacity: 1; 
     color: rgb(244 63 94 / var(--tw-bg-opacity)); 
   } 
    
   .stroke-slate-100 { 
     stroke: #f1f5f9; 
   } 
    
   .min-w-\[90px\] { 
     min-width: 90px; 
   } 
     .max-w-\[90px\] {
       max-width: 90px;
     }
   .min-h-\[160px\] { 
     min-height: 160px; 
   } 
   .max-h-\[160px\] { 
     max-height: 160px; 
   } 
   
   .max-h-\[64px\] {
      max-height: 64px;
    }
    
   .min-h-\[160px\] {
      min-height: 64px;
    }
    
   .justify-end { 
     justify-content: flex-end; 
   } 
    
   .items-end { 
     align-items: flex-end; 
   }
   
   .lift {
     animation: 3s infinite alternate liftAnim;
     aspect-ratio: 9/16;
     max-width: 90px;
     max-height: 160px;
     flex-basis: auto;
     flex-grow: 1;
     flex-shrink: 1;
   }
   
   @keyframes liftAnim {
     from {
       transform: translateX(0%);
     }
   }
   
   .flex-wrap {
     flex-wrap: wrap;
   }
   
   .justify-start {
     justify-content: flex-start;
   }
   
 .door {
   width: 50%;
   height: 100%;
 }
 
 .border-1 {
   border-width: 1px;
 }
 
 .text-center {
   text-align: center;
 }
 
 .text-2xl	{
   font-size: 1.5rem;
   line-height: 2rem;
 }
 .font-semibold {
    font-weight: 600;
  }
  .tracking-tight	{
    letter-spacing: -0.025em;
  }
  .divider {
    min-width: 100vw;
  }
  
  :root {
    --color-primary: #6750A4;
    --color-on-primary: #FFFFFF;
    --color-surface: #FFFBFE;
    --color-on-surface: #1C1B1F;
    --color-on-surface-variant: #CAC4D0;
  }
  
  .up {
    --color-primary: #1FB341;
    --color-on-primary: #FFFFFF;
  }
  
  .down {
    --color-on-primary: #FFFFFF;
    --color-primary: #B3261E;
  }
  
  @media (min-width: 1024px) {  
    lg\:min-w-1\/2 {
      min-width: 50%;
    }
  }
  .button {
    position: relative;
    overflow: hidden;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
    padding-left: 16px;
    gap: 8px;
    text-align: center;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: 0.1px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-color: var(--color-primary);
  }
  .button > div {
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }
  .button:hover {
    background-color: var(--color-primary);
    filter: opacity(90%);
    color: var(--color-on-primary);
  }
  .button:hover > div > svg {
    color: var(--color-on-primary);
    border-color: var(--color-on-primary);
    background-color: transparent;
  }
  .button:focus {
    background-color: var(--color-primary);
    opacity: 75%;
    color: var(--color-on-primary);
  }
  .button:active {
    background-color: var(--color-primary);
    opacity: 66%;
    color: var(--color-on-primary);
  }
  
  #backButton {
    padding: 8px;
    border-radius: 100%;
  }