
.ds-collapsible-tease-overlay-background {
  background: rgba(255, 255, 255, 0.5);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 1) 100%
  );
}

.ds-drawer-root:has(~ .ds-drawer-root[data-state='open']) .dialog-content-overlay {
  opacity: 1;
}
.ds-drawer-overlay ~ .ds-drawer-overlay {
  background-color: transparent;
}

.ds-main-nav-backdrop {
  --ds-main-nav-backdrop-y: var(--ds-main-nav-bottom);
  --ds-main-nav-backdrop-gradient-length: 20vh;
  --ds-main-nav-backdrop-gradient-split: calc(
    var(--ds-main-nav-backdrop-y) + var(--ds-main-nav-backdrop-gradient-length)
  );

  --ds-main-nav-backdrop-background-color: rgba(0, 0, 0, 0.15);
  --ds-main-nav-backdrop-background: linear-gradient(
    180deg,
    transparent var(--ds-main-nav-backdrop-y),
    var(--ds-main-nav-backdrop-background-color) var(--ds-main-nav-backdrop-gradient-split),
    var(--ds-main-nav-backdrop-background-color)
  );

  background: var(--ds-main-nav-backdrop-background-color);
  background: var(--ds-main-nav-backdrop-background);
}
.ds-main-nav-backdrop + .ds-main-nav-bar {
  z-index: var(--ds-overlay-z-index, 50);
}
.json-renderer {

    overflow-wrap: break-word;
}

  .json-renderer p {

    margin-top: 0.5rem;

    margin-bottom: 0.5rem;
}

  .json-renderer p {

    display: block;
}

  .json-renderer p {

    line-height: 1.375rem;

    font-size: 0.875rem;
}

  .json-renderer strong {

    font-weight: 600;
}

  .json-renderer em {

    font-style: italic;
}

  .json-renderer ul,
  .json-renderer ol {

    margin-top: 0.75rem;

    margin-bottom: 0.75rem;
}

  .json-renderer ul,
  .json-renderer ol {

    padding-left: 1rem;
}

  .json-renderer ul {

    list-style-type: disc;
}

  .json-renderer ol {

    list-style-type: decimal;
}

  .json-renderer li {

    margin-top: 0.5rem;

    margin-bottom: 0.5rem;
}

  .json-renderer h1,
  .json-renderer h2,
  .json-renderer h3,
  .json-renderer h4,
  .json-renderer h5,
  .json-renderer h6 {

    margin-top: 1rem;

    margin-bottom: 1rem;
}

  .json-renderer h1,
  .json-renderer h2,
  .json-renderer h3,
  .json-renderer h4,
  .json-renderer h5,
  .json-renderer h6 {

    font-weight: 500;
}

  .json-renderer h1,
  .json-renderer h2,
  .json-renderer h3,
  .json-renderer h4,
  .json-renderer h5,
  .json-renderer h6 {

    --tw-text-opacity: 1;

    color: rgb(68 68 68 / var(--tw-text-opacity, 1));
}

  .json-renderer h1 strong,
    .json-renderer h1 b,
    .json-renderer h2 strong,
    .json-renderer h2 b,
    .json-renderer h3 strong,
    .json-renderer h3 b,
    .json-renderer h4 strong,
    .json-renderer h4 b,
    .json-renderer h5 strong,
    .json-renderer h5 b,
    .json-renderer h6 strong,
    .json-renderer h6 b {

    font-weight: 500;
}

  .json-renderer h1 {

    font-size: 1.875rem;

    line-height: 2.25rem;
}

  .json-renderer h2 {

    font-size: 1.5rem;

    line-height: 2rem;
}

  .json-renderer h3 {

    font-size: 1.25rem;

    line-height: 1.75rem;
}

  .json-renderer h4 {

    font-size: 1.125rem;

    line-height: 1.75rem;
}

  .json-renderer h5 {

    font-size: 1rem;

    line-height: 1.5rem;
}

  .json-renderer h6 {

    font-size: 0.875rem;

    line-height: 1.25rem;
}

  .json-renderer h5,
  .json-renderer h6 {

    font-weight: 650;
}

  .json-renderer h5 strong,
    .json-renderer h5 b,
    .json-renderer h6 strong,
    .json-renderer h6 b {

    font-weight: 650;
}

  .json-renderer a {

    --tw-text-opacity: 1;

    color: rgb(101 27 105 / var(--tw-text-opacity, 1));
}

  .json-renderer a {

    text-decoration-line: underline;
}

  .json-renderer a:hover {

    text-decoration-line: none;
}

  .json-renderer :first-child {

    margin-top: 0px;
}
@layer tw-components {
  :root,
  .ds-context-kosik {
    /* Button — primary */
    --ds-button-primary-background: var(--ds-context-primary);
    --ds-button-primary-text: #FFFFFF;
    --ds-button-primary-hover-background: var(--ds-context-off-mid);

    /* Button — secondary */
    --ds-button-secondary-background: #FFFFFF;
    --ds-button-secondary-border: var(--ds-context-primary);
    --ds-button-secondary-text: var(--ds-context-primary);
    --ds-button-secondary-hover-background: var(--ds-context-tertiary);

    /* Button — tertiary */
    --ds-button-tertiary-background: var(--ds-context-tertiary);
    --ds-button-tertiary-text: var(--ds-context-primary);
    --ds-button-tertiary-hover-background: var(--ds-context-off-light);

    /* Button — ghost */
    --ds-button-ghost-text: var(--ds-context-primary);
    --ds-button-ghost-hover-background: var(--ds-context-tertiary);
  }

  .ds-context-pharmacy {
    /* Button — primary */
    --ds-button-primary-background: var(--ds-context-primary);
    --ds-button-primary-text: #FFFFFF;
    --ds-button-primary-hover-background: #3c8820;

    /* Button — secondary */
    --ds-button-secondary-background: #FFFFFF;
    --ds-button-secondary-border: var(--ds-context-primary);
    --ds-button-secondary-text: var(--ds-context-primary);
    --ds-button-secondary-hover-background: var(--ds-context-tertiary);

    /* Button — tertiary */
    --ds-button-tertiary-background: var(--ds-context-tertiary);
    --ds-button-tertiary-text: var(--ds-context-primary);
    --ds-button-tertiary-hover-background: var(--ds-context-mid);

    /* Button — ghost */
    --ds-button-ghost-text: var(--ds-context-primary);
    --ds-button-ghost-hover-background: var(--ds-context-tertiary);
  }

  .ds-context-market {
    /* Button — primary */
    --ds-button-primary-background: var(--ds-context-primary);
    --ds-button-primary-hover-background: var(--ds-context-off-mid);

    /* Button — secondary */
    --ds-button-secondary-border: var(--ds-context-primary);
    --ds-button-secondary-text: var(--ds-context-contrast);
    --ds-button-secondary-hover-background: var(--ds-context-tertiary);

    /* Button — tertiary */
    --ds-button-tertiary-background: var(--ds-context-tertiary);
    --ds-button-tertiary-text: var(--ds-context-contrast);
    --ds-button-tertiary-hover-background: var(--ds-context-off-light);

    /* Button — ghost */
    --ds-button-ghost-text: var(--ds-context-contrast);
    --ds-button-ghost-hover-background: var(--ds-context-tertiary);
  }
}

:root {
  --ds-icon-size: 100%;
  --ds-icon-fill-primary: #651B69;
  --ds-icon-fill-secondary: #C49EDB;

  --ds-icon-fill-success: #198754;
  --ds-icon-fill-warning: #FFA115;
  --ds-icon-fill-error: #DC3545;
  --ds-icon-fill-info: #4468E8;

  --ds-icon-fill-current: currentColor;

  --ds-overlay-z-index: 50;
  --ds-toast-z-index: 51;
  --ds-main-nav-panel-padding-bottom: 1rem;

  --ds-side-nav-border: #929292;
  --ds-side-nav-active-border: #0000fa;
  --ds-side-nav-active-text: #0000fa;
  --ds-side-nav-hover-bg: rgba(163, 160, 160, 0.2);
  --ds-side-nav-hover-active-bg: rgba(150, 150, 253, 0.4);
  --ds-side-nav-hover-chevron-bg: rgba(123, 120, 120, 0.2);
  --ds-side-nav-hover-active-chevron-bg: rgba(110, 110, 213, 0.4);
  --ds-side-nav-text: #222222;
}

/* Not prefixed by css layer polyfill = can be easily overriden */

@layer app {
  :root {
    --ds-carousel-button-x: 0.25rem;
  }
    @media (min-width: 1200px) {
  :root {
      --ds-carousel-button-x: 1.25rem
  }
    }
}

@layer tw-components {
  :root,
  .ds-context-kosik {
    --ds-context-primary: #651B69;
    --ds-context-mid: #C49EDB;
    --ds-context-off-mid: #8B4F97;
    --ds-context-tertiary: #F4E4FF;
    --ds-context-off-light: #E4CDF3;
  }

  .ds-context-pharmacy {
    --ds-context-primary: #4BAA28;
    --ds-context-mid: #C9E5BE;
    --ds-context-tertiary: #f1f9ec;
  }

  .ds-context-market {
    --ds-context-primary: #037C90;
    --ds-context-mid: #8CC3CD;
    --ds-context-off-mid: #48A0AE;
    --ds-context-tertiary: #E8F3F5;
    --ds-context-off-light: #D1E7EB;
    --ds-context-contrast: #096675;
  }
}

@layer ds-preflight {
  :where([class*='tw-border-']),
  :where([class*='tw-divide-']) > * {
    border: 0 solid #e5e7eb;
  }

  ::after,
  ::before {
    --tw-content: '';
  }

  :where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
    border: 0 solid #e5e7eb;
  }

    button:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    input:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    optgroup:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    select:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    textarea:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      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:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      -webkit-appearance: button;
      background-color: transparent;
      background-image: none;
    }

      button:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep):focus {
        outline: revert;
      }

    [role='button']:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    button:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      cursor: pointer;
    }

    :disabled:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      cursor: default;
    }

    input::placeholder:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    textarea::placeholder:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      opacity: 1;
    }

    h1:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h2:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h3:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h4:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h5:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h6:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      font-size: inherit;
      font-weight: inherit;
    }

    blockquote:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    dd:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    dl:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    figure:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h1:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h2:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h3:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h4:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h5:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    h6:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    hr:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    p:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    pre:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      margin: 0;
    }

    ol:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    ul:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    menu:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    img:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    svg:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    video:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    canvas:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    audio:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    iframe:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    embed:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep),
    object:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      display: block;
      vertical-align: middle;
    }

    a:where(.twpf, .tw-pf, .twpf-deep, .tw-pf-deep) {
      color: inherit;
      text-decoration: inherit;
    }
    :where(.twpf-deep, .tw-pf-deep) * {
      border: 0 solid #e5e7eb;
    }

    :where(.twpf-deep, .tw-pf-deep) button,
    :where(.twpf-deep, .tw-pf-deep) input,
    :where(.twpf-deep, .tw-pf-deep) optgroup,
    :where(.twpf-deep, .tw-pf-deep) select,
    :where(.twpf-deep, .tw-pf-deep) 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;
    }

    :where(.twpf-deep, .tw-pf-deep) button {
      -webkit-appearance: button;
      background-color: transparent;
      background-image: none;
    }

      :where(.twpf-deep, .tw-pf-deep) button:focus {
        outline: revert;
      }

    :where(.twpf-deep, .tw-pf-deep) [role='button'],
    :where(.twpf-deep, .tw-pf-deep) button {
      cursor: pointer;
    }

    :where(.twpf-deep, .tw-pf-deep) :disabled {
      cursor: default;
    }

    :where(.twpf-deep, .tw-pf-deep) input::placeholder,
    :where(.twpf-deep, .tw-pf-deep) textarea::placeholder {
      opacity: 1;
    }

    :where(.twpf-deep, .tw-pf-deep) h1,
    :where(.twpf-deep, .tw-pf-deep) h2,
    :where(.twpf-deep, .tw-pf-deep) h3,
    :where(.twpf-deep, .tw-pf-deep) h4,
    :where(.twpf-deep, .tw-pf-deep) h5,
    :where(.twpf-deep, .tw-pf-deep) h6 {
      font-size: inherit;
      font-weight: inherit;
    }

    :where(.twpf-deep, .tw-pf-deep) blockquote,
    :where(.twpf-deep, .tw-pf-deep) dd,
    :where(.twpf-deep, .tw-pf-deep) dl,
    :where(.twpf-deep, .tw-pf-deep) figure,
    :where(.twpf-deep, .tw-pf-deep) h1,
    :where(.twpf-deep, .tw-pf-deep) h2,
    :where(.twpf-deep, .tw-pf-deep) h3,
    :where(.twpf-deep, .tw-pf-deep) h4,
    :where(.twpf-deep, .tw-pf-deep) h5,
    :where(.twpf-deep, .tw-pf-deep) h6,
    :where(.twpf-deep, .tw-pf-deep) hr,
    :where(.twpf-deep, .tw-pf-deep) p,
    :where(.twpf-deep, .tw-pf-deep) pre {
      margin: 0;
    }

    :where(.twpf-deep, .tw-pf-deep) ol,
    :where(.twpf-deep, .tw-pf-deep) ul,
    :where(.twpf-deep, .tw-pf-deep) menu {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    :where(.twpf-deep, .tw-pf-deep) img,
    :where(.twpf-deep, .tw-pf-deep) svg,
    :where(.twpf-deep, .tw-pf-deep) video,
    :where(.twpf-deep, .tw-pf-deep) canvas,
    :where(.twpf-deep, .tw-pf-deep) audio,
    :where(.twpf-deep, .tw-pf-deep) iframe,
    :where(.twpf-deep, .tw-pf-deep) embed,
    :where(.twpf-deep, .tw-pf-deep) object {
      display: block;
      vertical-align: middle;
    }

    :where(.twpf-deep, .tw-pf-deep) a {
      color: inherit;
      text-decoration: inherit;
    }
}

@keyframes ds-fade-in-css {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ds-fade-out-css {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.ds-image-icon-wrapper :is(img, svg) {
  width: var(--ds-icon-size);
  height: var(--ds-icon-size);
}

.ds-image-icon-wrapper img {
  object-fit: contain;
  object-position: center;
}

.ds-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.ds-hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@layer tw-components {
  .ds-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    --tw-border-spacing-x: 0px;
    --tw-border-spacing-y: 0.5rem;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    text-align: left;
    font-size: 0.875rem;
  }

    .ds-table thead th {
    padding: 1rem;
  }

    .ds-table thead th {
    padding-bottom: 0.5rem;
  }

    .ds-table thead th {
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity, 1));
  }

    .ds-table thead th {
    font-weight: 550;
    line-height: 1.125rem;
    font-size: 0.875rem;
  }

    .ds-table tbody tr {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  }

    .ds-table tbody td {
    padding: 1rem;
  }

    .ds-table tbody td {
    --tw-text-opacity: 1;
    color: rgb(34 34 34 / var(--tw-text-opacity, 1));
  }

    .ds-table tbody td:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

    .ds-table tbody td:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
  }
  .ds-field-group {
    display: flex;
    height: 3rem;
    align-items: center;
  }
}

.ds-field-group button {
  position: relative;
  height: 100%;
  flex-shrink: 0;
}

.ds-field-group button:focus-visible {
  z-index: 1;
}

.ds-field-group button:not(:last-of-type) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.ds-field-group button:last-of-type {
  border-radius: 0.375rem;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.ds-field-group .ds-icon-button {
  aspect-ratio: 1 / 1;
  width: auto;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.ds-field-group .ds-icon-button:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(233 233 233 / var(--tw-bg-opacity, 1));
}

.ds-field-group .ds-text-field {
  position: relative;
  height: 100%;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.ds-field-group .ds-text-field:focus-within {
  z-index: 1;
}

.ds-field-group .ds-text-field--disabled {
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-right-color: rgb(124 124 124 / var(--tw-border-opacity, 1));
}
