/* .ui-tooltip-wrapper {} */

.ui-tooltip-trigger {
    width: fit-content;
    height: fit-content;
}

.ui-tooltip-content {    
    z-index: var(--ui-tooltip-content-z-index);
    display: none;
    padding: var(--ui-tooltip-content-padding);
    color: var(--ui-tooltip-content-color);
    font-size: var(--ui-tooltip-content-font-size);
    background-color: var(--ui-tooltip-content-background-color);
    border-color: var(--ui-tooltip-content-border-color);
    border-style: var(--ui-tooltip-content-border-style);
    border-width: var(--ui-tooltip-content-border-width);
    border-radius: var(--ui-tooltip-content-border-radius);
}

.ui-tooltip-content[data-state^='open'] {
    display: block;
}

.ui-tooltip-arrow,
.ui-tooltip-arrow::before {
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
}

.ui-tooltip-arrow {
    z-index: -1;
    visibility: hidden;
}

.ui-tooltip-arrow::before {
    border: var(--ui-tooltip-content-border-width) var(--ui-tooltip-content-border-style) var(--ui-tooltip-content-border-color);
    transform: rotate(45deg);
    visibility: visible;
    content: '';
}

.ui-tooltip-content[data-popper-placement^='top'] > .ui-tooltip-arrow {
    bottom: -5px;
}

.ui-tooltip-content[data-popper-placement^='top'] > .ui-tooltip-arrow::before {
    border-top: none;
    border-left: none;
}

.ui-tooltip-content[data-popper-placement^='bottom'] > .ui-tooltip-arrow {
    top: -5px;
}

.ui-tooltip-content[data-popper-placement^='bottom'] > .ui-tooltip-arrow::before {
    border-right: none;
    border-bottom: none;
}

.ui-tooltip-content[data-popper-placement^='left'] > .ui-tooltip-arrow {
    right: -5px;
}

.ui-tooltip-content[data-popper-placement^='left'] > .ui-tooltip-arrow::before {
    border-bottom: none;
    border-left: none;
}


.ui-tooltip-content[data-popper-placement^='right'] > .ui-tooltip-arrow {
    left: -5px;
}

.ui-tooltip-content[data-popper-placement^='right'] > .ui-tooltip-arrow::before {
    border-top: none;
    border-right: none;
}

.ui-tooltip-wrapper .ui-tooltip-content p {
    margin-top: 15px;
    margin-bottom: 0;
    color: var(--ui-tooltip-content-color);
    font-size: var(--ui-tooltip-content-font-size);
}

.ui-tooltip-wrapper .ui-tooltip-content p:first-child {
    margin-top: 0;
}
.ui-popover {
    width: fit-content;
    height: fit-content;
}

.ui-popover-trigger {
    display: var(--ui-popover-trigger-display);
    align-items: var(--ui-popover-trigger-align-items);
    justify-content: var(--ui-popover-trigger-justify-content);
}

/* .ui-popover-wrapper {} */

.ui-popover-content {
    z-index: var(--ui-popover-content-z-index);
    display: none;
    max-width: var(--ui-popover-content-max-width);
    padding: var(--ui-popover-content-padding);
    color: var(--ui-popover-content-color);
    font-size: var(--ui-popover-content-font-size);
    background-color: var(--ui-popover-content-background-color);
    border-color: var(--ui-popover-content-border-color);
    border-style: var(--ui-popover-content-border-style);
    border-width: var(--ui-popover-content-border-width);
    border-radius: var(--ui-popover-content-border-radius);
    box-shadow: var(--ui-popover-content-box-shadow);
}

.ui-popover-content[data-state^='open'] {
    display: block;
}

.ui-popover-arrow,
.ui-popover-arrow::before {
    position: absolute;
    width: 20px;
    height: 20px;
    background: inherit;
}

.ui-popover-arrow {
    z-index: -1;
    visibility: hidden;
}

.ui-popover-arrow::before {
    border: var(--ui-popover-content-border-width) var(--ui-popover-content-border-style) var(--ui-popover-content-border-color);
    transform: rotate(45deg);
    visibility: visible;
    content: '';
}

.ui-popover-content[data-popper-placement^='top'] > .ui-popover-arrow {
    bottom: -5px;
}

.ui-popover-content[data-popper-placement^='top'] > .ui-popover-arrow::before {
    border-top: none;
    border-left: none;
}

.ui-popover-content[data-popper-placement^='bottom'] > .ui-popover-arrow {
    top: -5px;
}

.ui-popover-content[data-popper-placement^='bottom'] > .ui-popover-arrow::before {
    border-right: none;
    border-bottom: none;
}

.ui-popover-content[data-popper-placement^='left'] > .ui-popover-arrow {
    right: -5px;
}

.ui-popover-content[data-popper-placement^='left'] > .ui-popover-arrow::before {
    border-bottom: none;
    border-left: none;
}


.ui-popover-content[data-popper-placement^='right'] > .ui-popover-arrow {
    left: -5px;
}

.ui-popover-content[data-popper-placement^='right'] > .ui-popover-arrow::before {
    border-top: none;
    border-right: none;
}

.ui-popover-wrapper .ui-popover-content p {
    margin-top: 15px;
    margin-bottom: 0;
    color: var(--ui-popover-content-color);
    font-size: var(--ui-popover-content-font-size);
}

.ui-popover-wrapper .ui-popover-content p:first-child {
    margin-top: 0;
}

.ui-button {
    all: unset;
    display: var(--ui-button-display);
    flex-basis: var(--ui-button-flex-basis);
    flex-direction: var(--ui-button-flex-direction);
    flex-grow: var(--ui-button-flex-grow);
    flex-shrink: var(--ui-button-flex-shrink);
    flex-wrap: var(--ui-button-flex-wrap);
    align-content: var(--ui-button-align-content);
    align-items: var(--ui-button-align-items);
    align-self: var(--ui-button-align-self);
    justify-content: var(--ui-button-justify-content);
    padding: var(--ui-button-padding);
    color: var(--ui-button-color);
    font-weight: var(--ui-button-font-weight);
    font-size: var(--ui-button-font-size);
    font-family: var(--ui-button-font-family);
    line-height: var(--ui-button-line-height);
    text-align: var(--ui-button-text-align);
    text-transform: var(--ui-button-text-transform);
    text-decoration: var(--ui-button-text-decoration);
    background-color: var(--ui-button-background-color);
    border-color: var(--ui-button-border-color);
    border-style: var(--ui-button-border-style);
    border-width: var(--ui-button-border-width);
    border-radius: var(--ui-button-border-radius);
  }
  
  .ui-button:hover {
    all: unset;
    display: var(--ui-button-display);
    flex-basis: var(--ui-button-flex-basis);
    flex-direction: var(--ui-button-flex-direction);
    flex-grow: var(--ui-button-flex-grow);
    flex-shrink: var(--ui-button-flex-shrink);
    flex-wrap: var(--ui-button-flex-wrap);
    align-content: var(--ui-button-align-content);
    align-items: var(--ui-button-align-items);
    align-self: var(--ui-button-align-self);
    justify-content: var(--ui-button-justify-content);
    padding: var(--ui-button-padding);
    color: var(--ui-button-color);
    font-weight: var(--ui-button-font-weight);
    font-size: var(--ui-button-font-size);
    font-family: var(--ui-button-font-family);
    line-height: var(--ui-button-line-height);
    text-align: var(--ui-button-text-align);
    text-transform: var(--ui-button-text-transform);
    text-decoration: var(--ui-button-text-decoration);
    background-color: var(--ui-button-background-color);
    border-color: var(--ui-button-border-color);
    border-style: var(--ui-button-border-style);
    border-width: var(--ui-button-border-width);
    border-radius: var(--ui-button-border-radius);
    cursor: pointer;
  }
  
  .ui-button:focus {
    all: unset;
    display: var(--ui-button-display);
    flex-basis: var(--ui-button-flex-basis);
    flex-direction: var(--ui-button-flex-direction);
    flex-grow: var(--ui-button-flex-grow);
    flex-shrink: var(--ui-button-flex-shrink);
    flex-wrap: var(--ui-button-flex-wrap);
    align-content: var(--ui-button-align-content);
    align-items: var(--ui-button-align-items);
    align-self: var(--ui-button-align-self);
    justify-content: var(--ui-button-justify-content);
    padding: var(--ui-button-padding);
    color: var(--ui-button-color);
    font-weight: var(--ui-button-font-weight);
    font-size: var(--ui-button-font-size);
    font-family: var(--ui-button-font-family);
    line-height: var(--ui-button-line-height);
    text-align: var(--ui-button-text-align);
    text-transform: var(--ui-button-text-transform);
    text-decoration: var(--ui-button-text-decoration);
    background-color: var(--ui-button-background-color);
    border-color: var(--ui-button-border-color);
    border-style: var(--ui-button-border-style);
    border-width: var(--ui-button-border-width);
    border-radius: var(--ui-button-border-radius);
    cursor: pointer;
  }

  /* it is necessary to add styles for all button variants (default, secondary, error, outline, ghost) as they are used in the project */
.ui-icon-button,
.ui-icon-button:hover,
.ui-icon-button:focus {
  all: unset;
  display: var(--ui-icon-button-display);
  align-items: var(--ui-icon-button-align-items);
  justify-content: var(--ui-icon-button-justify-content);
  padding: var(--ui-icon-button-padding);
  font-size: var(--ui-icon-button-font-size);
  border-radius: var(--ui-icon-button-border-radius);
  transition: all 0.2s;
}

/* it is necessary to add styles for other button variants (secondary, error, outline) as they are used in the project */

.ui-icon-button.default {
  color: var(--ui-icon-button-color-default);
  background-color: var(--ui-icon-button-background-color-default);
}

.ui-icon-button.default:hover,
.ui-icon-button.default:focus {
  color: var(--ui-icon-button-color-default-hover);
  background-color: var(--ui-icon-button-background-color-default-hover);
}

.ui-icon-button.ghost {
  color: var(--ui-icon-button-color-ghost);
  background-color: transparent;
}

.ui-icon-button.ghost:hover,
.ui-icon-button.ghost:focus {
  color: var(--ui-icon-button-color-ghost-hover);
  background-color: transparent;
}

.ui-icon-button.extra-small,
.ui-icon-button.extra-small:hover,
.ui-icon-button.extra-small:focus {
  width: calc(var(--ui-icon-button-width) * 0.5);
  height: calc(var(--ui-icon-button-height) * 0.5);
  padding: var(--ui-icon-button-padding);
  font-size: var(--ui-icon-button-font-size);
}

.ui-icon-button.small,
.ui-icon-button.small:hover,
.ui-icon-button.small:focus {
  width: calc(var(--ui-icon-button-width) * 0.75);
  height: calc(var(--ui-icon-button-height) * 0.75);
  padding: var(--ui-icon-button-padding);
  font-size: var(--ui-icon-button-font-size);
}

.ui-icon-button.medium,
.ui-icon-button.medium:hover,
.ui-icon-button.medium:focus {
  width: var(--ui-icon-button-width);
  height: var(--ui-icon-button-height);
  padding: var(--ui-icon-button-padding);
  font-size: var(--ui-icon-button-font-size);
}

.ui-icon-button.large,
.ui-icon-button.large:hover,
.ui-icon-button.large:focus {
  width: calc(var(--ui-icon-button-width) * 1.5);
  height: calc(var(--ui-icon-button-height) * 1.5);
  padding: var(--ui-icon-button-padding);
  font-size: var(--ui-icon-button-font-size);
}

.ui-icon-button.rounded,
.ui-icon-button.rounded:hover,
.ui-icon-button.rounded:focus {
  border-radius: 50%;
}

.ui-icon-button svg,
.ui-icon-button img {
  display: block;
  width: 80%;
  max-width: 80%;
  height: auto;
  max-height: 80%;
  color: currentcolor;
}


/* 

    Use this file to difine variables for components.
    Override variables values in the files of concrete theme - reccommended wat
    Or use ui kit classses to override styles

*/

:root {
    /* button */
    --ui-button-display: inline-flex;
    --ui-button-flex-basis: 100%;
    --ui-button-flex-direction: row;
    --ui-button-flex-grow: 1;
    --ui-button-flex-shrink: 1;
    --ui-button-flex-wrap: nowrap;
    --ui-button-align-content: stretch;
    --ui-button-align-items: stretch;
    --ui-button-align-self: stretch;
    --ui-button-justify-content: flex-start;
    --ui-button-padding: 0;
    --ui-button-color: #333;
    --ui-button-font-weight: normal;
    --ui-button-font-size: 1em;
    --ui-button-font-family: inherit;
    --ui-button-line-height: 1.5em;
    --ui-button-text-align: left;
    --ui-button-text-transform: none;
    --ui-button-text-decoration: none;
    --ui-button-background-color: transparent;
    --ui-button-border-color: #000;
    --ui-button-border-style: solid;
    --ui-button-border-width: 1px;
    --ui-button-border-radius: 0;

    /* icon-button */
    --ui-icon-button-display: inline-flex;
    --ui-icon-button-align-items: center;
    --ui-icon-button-justify-content: center;
    --ui-icon-button-width: var(--button-field-height, 40px);
    --ui-icon-button-height: var(--button-field-height, 40px);
    --ui-icon-button-padding: 0;
    --ui-icon-button-font-size: 1rem;
    --ui-icon-button-color: 51, 51, 51;
    --ui-icon-button-color-invert: 255, 255, 255;
    --ui-icon-button-color-secondary: 204, 204, 204;
    --ui-icon-button-color-accent: 239, 68, 68;
    --ui-icon-button-border-radius: 0;
    --ui-icon-button-color-default: rgba(var(--ui-icon-button-color-invert), 1);
    --ui-icon-button-background-color-default: rgba(var(--ui-icon-button-color), 1);
    --ui-icon-button-color-default-hover: rgba(var(--ui-icon-button-color-invert), 1);
    --ui-icon-button-background-color-default-hover: rgba(var(--ui-icon-button-color), 0.7);
    --ui-icon-button-color-ghost: rgba(var(--ui-icon-button-color), 1);
    --ui-icon-button-color-ghost-hover: rgba(var(--ui-icon-button-color), 0.7);

    /* popover */
    --ui-popover-trigger-z-index: 9999999;
    --ui-popover-trigger-display: flex;
    --ui-popover-trigger-align-items: center;
    --ui-popover-trigger-justify-content: center;
    --ui-popover-content-z-index: 99999999;
    --ui-popover-content-max-width: 700px;
    --ui-popover-content-padding: 1em;
    --ui-popover-content-color: rgb(51, 51, 51);
    --ui-popover-content-background-color: rgb(255, 255, 255);
    --ui-popover-content-font-size: calc(var(--font-size, 1rem) * 0.875);
    --ui-popover-content-border-color: transparent;
    --ui-popover-content-border-style: initial;
    --ui-popover-content-border-width: 0;
    --ui-popover-content-border-radius: 0;
    --ui-popover-content-box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.25);

    /* tooltip */
    --ui-tooltip-trigger-z-index: 9999999;
    --ui-tooltip-content-z-index: 99999999;
    --ui-tooltip-content-padding: 0.5em;
    --ui-tooltip-content-color: rgb(255, 255, 255);
    --ui-tooltip-content-background-color: rgb(0, 0, 0);
    --ui-tooltip-content-font-size: calc(var(--font-size, 1rem) * 0.875);
    --ui-tooltip-content-border-color: transparent;
    --ui-tooltip-content-border-style: initial;
    --ui-tooltip-content-border-width: 0;
    --ui-tooltip-content-border-radius: 0;
}




/*# sourceMappingURL=user-site-ui.css.map*/