@appello/web-ui/dist/index.esm.css

Web ui library for a better development experience

/*
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: currentColor; /* 2 */
  outline: 0;
}

/*
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 system font-family 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: 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 */
}

/*
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 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
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]) {
  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.
*/
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
}

/*
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;
}

.form {
  display: flex;
  flex-direction: column;
}
.form__inline-fields {
  gap: 1rem;
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 0.5rem));
}
.form__field {
  width: 100%;
}
.form__field-row .form__field-row {
  margin-top: 0;
}
.form__label {
  display: block;
  font-size: var(--p4-font-size);
  line-height: var(--p4-line-height);
  color: hsl(var(--gray-1-color));
  margin-bottom: 2px;
}
.form__label-required {
  color: hsl(var(--red-color));
}
.form__inline-fields .form__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.form__input {
  font-size: var(--p4-font-size);
  line-height: var(--p4-line-height);
  padding-inline: var(--input-inline-padding);
  border: 1px solid hsl(var(--gray-5-color));
  border-radius: 0.37rem;
  width: 100%;
  transition: background-color 0.2s, border-color 0.2s;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
}
.form__input::-webkit-outer-spin-button, .form__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form__input[type=number] {
  -moz-appearance: textfield;
}
.form__input[readonly] {
  cursor: pointer;
}
.form__input[disabled] {
  background-color: hsl(var(--gray-7-color));
  color: hsl(var(--gray-3-color));
  cursor: not-allowed;
}
.form__input--size-medium {
  height: var(--input-medium-height);
}
.form__input--size-large {
  height: var(--input-large-height);
}
.form__input--error {
  border-color: hsl(var(--red-color));
}
.form__input:focus {
  border-color: hsl(var(--gray-3-color));
}
.form__input::placeholder {
  color: hsl(var(--gray-3-color));
}
.form__input--with-icon-before {
  padding-left: calc(var(--input-icon-size) + var(--input-inline-padding) + var(--input-icon-margin));
}
.form__input--with-icon-after {
  padding-right: calc(var(--input-icon-size) + var(--input-inline-padding) + var(--input-icon-margin));
}
.form__textarea {
  padding-block: var(--input-textarea-vertical-padding);
  height: 6.5rem;
  resize: none;
}
.form__input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--input-icon-size);
  height: var(--input-icon-size);
  pointer-events: none;
}
.form__input-icon--clickable {
  pointer-events: auto;
}
.form__input-icon--before {
  left: var(--input-inline-padding);
}
.form__input-icon--after {
  right: var(--input-inline-padding);
}
.form__error {
  font-size: var(--p4-font-size);
  line-height: var(--p4-line-height);
  color: hsl(var(--red-color));
  margin-top: 3px;
}

:root {
  --accent-color: 209 78% 48%;
  --primary-color: 230 29% 20%;
  --white-color: 0 0% 100%;
  --black-1-color: 180 3% 6%;
  --black-2-color: 220 8% 17%;
  --gray-1-color: 240 3% 45%;
  --gray-2-color: 240 6% 60%;
  --gray-3-color: 240 11% 75%;
  --gray-4-color: 240 21% 86%;
  --gray-5-color: 207 28% 92%;
  --gray-6-color: 240 19% 94%;
  --gray-7-color: 240 29% 97%;
  --pink-color: 340 82% 59%;
  --yellow-color: 49 98% 60%;
  --red-color: 0 84% 61%;
  --green-color: 145 63% 42%;
  --green-light-color: 93 100% 51%;
  --cyan-dark-color: 186 100% 33%;
  --cyan-light-color: 187 71% 50%;
  --purple-color: 291 47% 51%;
  --blue-color: 208 79% 51%;
  --orange-color: 28 92% 53%;
  --h1-font-size: 2.125rem;
  --h1-line-height: 3rem;
  --h2-font-size: 1.8125rem;
  --h2-line-height: 2.625rem;
  --h3-font-size: 1.5625rem;
  --h3-line-height: 2.25rem;
  --h4-font-size: 1.25rem;
  --h4-line-height: 2rem;
  --h5-font-size: 1.125rem;
  --h5-line-height: 1.875rem;
  --p1-font-size: 0.9375rem;
  --p1-line-height: 1.5rem;
  --p2-font-size: 0.875rem;
  --p2-line-height: 1.4375rem;
  --p3-font-size: 0.8125rem;
  --p3-line-height: 1.4375rem;
  --p4-font-size: 0.75rem;
  --p4-line-height: 1.125rem;
  --p5-font-size: 0.6875rem;
  --p5-line-height: 1.1875rem;
  --p6-font-size: 0.625rem;
  --p6-line-height: 1rem;
  --shadow-1: 0px 8px 20px rgba(205, 205, 205, 0.1);
  --shadow-2: 0px 4px 4px rgba(176, 176, 176, 0.1);
  --shadow-3: 0px -4px 20px rgba(199, 199, 199, 0.1);
  --shadow-4: 0px 4px 17px rgba(6, 6, 11, 0.06);
  --input-small-height: 1.8rem;
  --input-medium-height: 2.6rem;
  --input-large-height: 3.3rem;
  --input-inline-padding: 1.18rem;
  --input-textarea-vertical-padding: 1rem;
  --input-icon-size: 1.25rem;
  --input-icon-margin: 0.56rem;
}
.badge {
  display: flex;
  width: max-content;
  align-items: center;
  padding: 0.12rem 0.61rem;
  border-radius: 100px;
}
.badge--green {
  background-color: hsl(var(--green-color)/10%);
  color: hsl(var(--green-color));
}
.badge--gray {
  background-color: hsl(var(--gray-7-color));
  color: hsl(var(--black-2-color));
}
.badge--blue {
  background-color: hsl(var(--blue-color)/10%);
  color: hsl(var(--blue-color));
}
.badge--red {
  background-color: hsl(var(--red-color)/10%);
  color: hsl(var(--red-color));
}
.badge--orange {
  background-color: hsl(var(--orange-color)/10%);
  color: hsl(var(--orange-color));
}
.badge--pink {
  background-color: hsl(var(--pink-color)/10%);
  color: hsl(var(--pink-color));
}
.badge--yellow {
  background-color: hsl(var(--yellow-color)/10%);
  color: hsl(var(--black-2-color));
}
.badge--green-light {
  background-color: hsl(var(--green-light-color)/10%);
  color: hsl(var(--black-2-color));
}
.badge--cyan-dark {
  background-color: hsl(var(--cyan-dark-color)/10%);
  color: hsl(var(--cyan-dark-color));
}
.badge--cyan-light {
  background-color: hsl(var(--cyan-light-color)/10%);
  color: hsl(var(--cyan-light-color));
}
.badge--purple {
  background-color: hsl(var(--purple-color)/10%);
  color: hsl(var(--purple-color));
}
.badge--filled.badge--green {
  background-color: hsl(var(--green-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--gray {
  background-color: hsl(var(--gray-1-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--blue {
  background-color: hsl(var(--blue-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--red {
  background-color: hsl(var(--red-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--orange {
  background-color: hsl(var(--orange-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--pink {
  background-color: hsl(var(--pink-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--yellow {
  background-color: hsl(var(--yellow-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--green-light {
  background-color: hsl(var(--green-light-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--cyan-dark {
  background-color: hsl(var(--cyan-dark-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--cyan-light {
  background-color: hsl(var(--cyan-light-color));
  color: hsl(var(--white-color));
}
.badge--filled.badge--purple {
  background-color: hsl(var(--purple-color));
  color: hsl(var(--white-color));
}
.badge__text {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  font-weight: 700;
}
.badge__icon {
  margin-right: 0.25rem;
}
.browser-select {
  position: relative;
}
.browser-select__select {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  width: fit-content;
}
.button {
  position: relative;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  transition: background-color 0.2s ease-in-out, opacity 0.1s;
}
.button:not(.button--only-icon) {
  padding-inline: 1rem;
}
.button--full {
  width: 100%;
}
.button--primary {
  background-color: hsl(var(--accent-color));
}
.button--primary--default-color {
  color: hsl(var(--white-color));
}
.button--secondary {
  background-color: hsl(var(--gray-7-color));
}
.button--negative {
  background-color: hsl(var(--red-color));
}
.button--negative--default-color {
  color: hsl(var(--white-color));
}
.button[disabled] {
  cursor: default;
}
.button--disabled {
  background-color: hsl(var(--gray-6-color));
  opacity: 0.6;
  color: hsl(var(--black-1-color));
  cursor: not-allowed !important;
}
.button--size-small {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  height: var(--input-small-height);
}
.button--size-medium {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  height: var(--input-medium-height);
}
.button--size-large {
  font-size: var(--p3-font-size);
  line-height: var(--p3-line-height);
  height: var(--input-large-height);
}
.button--size-small.button--only-icon {
  width: var(--input-small-height);
}
.button--size-medium.button--only-icon {
  width: var(--input-medium-height);
}
.button--size-large.button--only-icon {
  width: var(--input-large-height);
}
.button:hover, .button:active {
  opacity: 0.8;
}
.button__loader {
  position: absolute;
}
.button__label {
  display: flex;
  align-items: center;
  column-gap: 7px;
}
.button__label--hidden {
  opacity: 0;
}
.button__count {
  border-radius: 50px;
  font-size: var(--p5-font-size);
  display: inline-block;
  line-height: 1;
  padding: 2px 7px;
}
.button--primary .button__count {
  color: hsl(var(--accent-color));
  background-color: hsl(var(--white-color));
}
.button--negative .button__count {
  color: hsl(var(--red-color));
  background-color: hsl(var(--white-color));
}
.button--secondary .button__count {
  color: hsl(var(--white-color));
  background-color: hsl(var(--accent-color));
}
.container_f0Dns {
  display: flex;
  justify-content: center;
  align-items: center;
}

.full-wrapper_wWcMY {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.dot_RjnHw {
  content: "";
  border-radius: 50%;
  display: inline-block;
  animation: scale_8ptf2 1.2s infinite ease-in-out both;
  margin: 3px;
}
.dot--default-color_gnYH7 {
  background-color: hsl(var(--white-color));
}

.container--colorful_CTZni .dot_RjnHw {
  background-color: hsl(var(--accent-color));
}

.dot_RjnHw:nth-child(1) {
  animation-delay: -0.32s;
}

.dot_RjnHw:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes scale_8ptf2 {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.date-picker__btn {
  display: flex;
  align-items: center;
  gap: 0.43rem;
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
}
.weekday--weekend_Ok0HS {
  color: hsl(var(--red-color));
}

.calendar-wrapper_sbgre {
  position: fixed;
  z-index: 999;
}

.control_ObBrr {
  display: flex;
  align-items: center;
}
.control__label_jFxG0 {
  font-size: var(--p3-font-size);
  line-height: var(--p3-line-height);
  font-weight: 600;
}
.control__arrow_odr2D {
  margin-left: 0.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

.container_WIOSC.rdp {
  border: 1px solid hsl(var(--gray-5-color));
  box-shadow: var(--shadow-4);
  background-color: hsl(var(--white-color));
  margin-inline: 0;
  margin-block: 0.43rem;
  border-radius: 0.5rem;
  padding: 1rem;
  --rdp-cell-size: 30px;
  --rdp-accent-color: hsl(var(--accent-color));
  --rdp-background-color: hsl(var(--accent-color) / 0.1);
}

.container_WIOSC .rdp-caption_label {
  font-size: var(--p3-font-size);
  line-height: var(--p3-line-height);
  font-weight: 600;
}
.container_WIOSC .rdp-nav_button {
  border-radius: 8px;
}
.container_WIOSC .rdp-nav_button > svg {
  width: 12px;
  height: 12px;
}
.container_WIOSC .rdp-head_cell {
  font-size: var(--p4-font-size);
  line-height: var(--p4-line-height);
  font-weight: 400;
  text-transform: none;
  height: 38px;
}
.container_WIOSC .rdp-day {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  font-weight: 600;
  color: hsl(var(--gray-1-color));
  border-radius: 8px;
  border-inline: 1px solid transparent;
  margin-block: 1px;
}
.container_WIOSC .rdp-day--today {
  color: hsl(var(--accent-color));
}
.container_WIOSC .rdp-day--weekend {
  color: hsl(var(--red-color));
}
.container_WIOSC .rdp-day_selected {
  color: hsl(var(--white-color));
}
.container_WIOSC .rdp-day_disabled {
  cursor: not-allowed;
}
.container_WIOSC .rdp-day_range_middle {
  border-radius: 0;
  background-color: hsl(var(--accent-color)/0.1);
  color: hsl(var(--accent-color));
}
.container_5yM-C .rnd__root-menu {
  margin-block: 0.43rem;
}
.container_5yM-C .rnd__menu {
  padding-block: 0.25rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--gray-5-color));
  background-color: hsl(var(--white-color));
  box-shadow: var(--shadow-4);
}
.container_5yM-C .rnd__submenu {
  width: 9.93rem;
}
.container_5yM-C .rnd__option {
  padding: 0.75rem 0.93rem;
  cursor: pointer;
  word-break: break-word;
}
.container_5yM-C .rnd__option:not(.container .rnd__option--disabled):hover {
  background-color: hsl(var(--gray-6-color));
}
.container_5yM-C .rnd__option-icon {
  width: 1rem;
  height: 1rem;
}
.container_5yM-C .rnd__option-icon--left {
  margin-right: 0.49rem;
}
.container_5yM-C .rnd__option-label {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  font-weight: 600;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.empty-state__label {
  margin-top: 1rem;
  font-size: var(--p4-font-size);
  line-height: var(--p4-line-height);
  color: hsl(var(--gray-2-color));
}
.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: hsl(var(--gray-7-color));
  color: hsl(var(--accent-color));
}
.icon-container__icon {
  width: 1.68rem;
  height: 1.68rem;
}
.modal-overlay {
  background-color: hsl(var(--black-1-color)/60%);
  z-index: 999;
  overflow-y: auto;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal {
  --content-padding-x: 30px;
  --content-padding-y: 25px;
  position: relative;
  height: fit-content;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  width: 35%;
  overflow: hidden;
}
.modal__buttons-list {
  gap: 1rem;
}
.modal__title {
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  font-weight: 700;
}
.modal__description {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  color: hsl(var(--gray-2-color));
}
.modal--center {
  margin: auto;
  border-radius: 8px;
  padding: var(--content-padding-y) var(--content-padding-x);
}
.modal--center .modal__close-btn {
  top: 0.625rem;
  right: 0.625rem;
  position: absolute;
}
.modal--center .modal__header-content {
  margin-bottom: 0.625rem;
}
.modal--center .modal__buttons-list {
  border-top: 1px solid hsl(var(--gray-6-color));
  padding-top: var(--content-padding-y);
  margin-top: var(--content-padding-y);
  display: flex;
  justify-content: flex-end;
  margin-inline: calc(var(--content-padding-x) * -1);
  padding-inline: var(--content-padding-x);
}
.modal--right {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  height: 100vh;
}
.modal--right .modal__close-btn {
  border-radius: 0.25rem;
  background-color: hsl(var(--gray-7-color));
  padding: 0.5rem;
  border: 1px solid hsl(var(--gray-6-color));
  margin-right: 1rem;
}
.modal--right .modal__title {
  font-size: var(--p2-font-size);
  line-height: var(--p2-line-height);
  font-weight: 600;
}
.modal--right .modal__header {
  display: flex;
  align-items: center;
  min-height: 5rem;
  border-bottom: 1px solid hsl(var(--gray-6-color));
  padding: 1.25rem;
}
.modal--right .modal__buttons-list {
  padding-inline: 1.25rem;
  padding-bottom: 1.25rem;
  display: flex;
  justify-content: flex-end;
}
.modal--right .modal__content {
  overflow: auto;
  padding: 1.25rem;
}
.modal__button {
  width: auto;
  padding: 0 2.5rem;
}

.react-modal-opened {
  overflow: hidden;
}
.pagination {
  --pagination-item-height: 1.74rem;
  display: flex;
  column-gap: 0.24rem;
  margin-top: 1rem;
}
.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  width: 1.36rem;
  height: var(--pagination-item-height);
  border-radius: 0.18rem;
}
.pagination__item--active {
  background-color: hsl(var(--accent-color));
  color: hsl(var(--white-color));
}
.pagination__item--disabled {
  color: hsl(var(--gray-2-color));
}
.pagination__item:hover:not(.pagination__item--active) {
  background-color: hsl(var(--gray-6-color));
}
.pagination__link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: var(--pagination-item-height);
  width: 100%;
  text-align: center;
}
.pagination__link--nav {
  display: flex;
  justify-content: center;
  user-select: none;
}
.pagination__caption {
  margin-top: 0.75rem;
  font-size: var(--p6-font-size);
  line-height: var(--p6-line-height);
  color: hsl(var(--gray-2-color));
}
.pagination__nav-icon--next {
  display: inline;
  transform: rotate(-90deg);
}
.pagination__nav-icon--prev {
  display: inline;
  transform: rotate(90deg);
}
.search-input {
  --text-input-x-padding: 1.18rem;
  position: relative;
}
.search-input__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--text-input-x-padding);
  pointer-events: none;
  color: hsl(var(--gray-3-color));
}
.search-input__input {
  padding-left: calc(var(--text-input-x-padding) + var(--icon-size) + 0.61rem);
}
.text-input-wrapper {
  position: relative;
}
.sidebar {
  --item-inner-x-padding: 0.85rem;
  --icon-size: 1.1rem;
  --margin-between-icon-and-title: 0.75rem;
  --padding-x: 1.25rem;
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--primary-color));
  width: 17.4rem;
  padding: 1.64rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
}
.sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--padding-x);
}
.sidebar__nav-container {
  overflow-y: auto;
  margin-top: 1.75rem;
  padding-inline: 0.75rem;
}
.sidebar__list-item {
  margin-bottom: 0.5rem;
  position: relative;
}
.sidebar__item {
  color: hsl(var(--white-color)/40%);
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  display: flex;
  align-items: center;
  font-weight: 600;
  padding: 0.61rem var(--item-inner-x-padding);
  border-radius: 5px;
  position: relative;
  width: 100%;
  cursor: pointer;
}
.sidebar__item--active {
  background-color: hsl(var(--white-color)/5%);
  color: hsl(var(--white-color));
}
.sidebar__item--expanded .sidebar__chevron {
  transform: rotate(180deg);
}
.sidebar__nav-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  margin-right: var(--margin-between-icon-and-title);
  pointer-events: none;
}
.sidebar__submenu .sidebar__item {
  padding-left: calc(var(--icon-size) + var(--item-inner-x-padding) + var(--margin-between-icon-and-title));
}
.sidebar__chevron {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
}
.sidebar__footer {
  flex-direction: column;
  padding-inline: var(--padding-x);
  margin-top: auto;
}
.sidebar__footer-user-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.64rem;
}
.sidebar__footer-user-info {
  display: flex;
  margin-top: auto;
  align-items: center;
  text-align: left;
  padding-inline: 0;
}
.sidebar__user-name {
  font-size: var(--p3-font-size);
  line-height: var(--p3-line-height);
  color: hsl(var(--white-color));
  word-break: break-all;
}
.sidebar__user-photo {
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: cover;
  margin-right: 0.75rem;
  flex-shrink: 0;
}
.sidebar__user-email {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  color: hsl(var(--white-color)/50%);
  word-break: break-all;
}
.sidebar__footer-user-right-element {
  flex-shrink: 0;
}
.sidebar__submenu {
  display: none;
}
.sidebar__item--expanded ~ .sidebar__submenu {
  display: block;
}
.sidebar__logo-link {
  display: block;
}
.sidebar__logo-link--collapsed {
  display: none;
}

.sidebar.sidebar--collapsed {
  width: 3.75rem;
  padding-inline: 0.75rem;
}
.sidebar.sidebar--collapsed .sidebar__footer {
  display: flex;
  flex-direction: column;
  padding-inline: 0;
}
.sidebar.sidebar--collapsed .sidebar__user-photo {
  margin-right: 0;
}
.sidebar.sidebar--collapsed .sidebar__user-email, .sidebar.sidebar--collapsed .sidebar__user-name, .sidebar.sidebar--collapsed .sidebar__chevron {
  display: none;
}
.sidebar.sidebar--collapsed .sidebar__header {
  padding: 0;
  margin-bottom: 1.25rem;
  flex-direction: column;
  row-gap: 1rem;
}
.sidebar.sidebar--collapsed .sidebar__logo-link {
  display: none;
}
.sidebar.sidebar--collapsed .sidebar__logo-link--collapsed {
  display: block;
  width: 100%;
  padding-inline: 4px;
}
.sidebar.sidebar--collapsed .sidebar__logo {
  width: 100%;
  height: auto;
}
.sidebar.sidebar--collapsed .sidebar__nav-container {
  margin-top: 0;
  padding-inline: 0;
}
.sidebar.sidebar--collapsed .sidebar__item-title {
  display: none;
}
.sidebar.sidebar--collapsed .sidebar__floating .sidebar__item-title {
  display: block;
}
.sidebar.sidebar--collapsed .sidebar__item {
  padding: 0.6rem;
  border-radius: 0.18rem;
}
.sidebar.sidebar--collapsed .sidebar__item::before {
  display: none;
}
.sidebar.sidebar--collapsed .sidebar__item ~ .sidebar__submenu {
  display: none;
}
.sidebar.sidebar--collapsed .sidebar__floating {
  display: block;
  height: 400px;
  overflow-y: auto;
}
.sidebar.sidebar--collapsed .sidebar__floating-menu {
  background-color: hsl(var(--primary-color));
  width: 14rem;
  padding: 0.25rem 0;
  border-radius: 0.25rem;
}
.sidebar.sidebar--collapsed .sidebar__floating-menu .sidebar.sidebar--collapsed .sidebar__item {
  padding: 0.6rem 1rem;
}
.sidebar.sidebar--collapsed .sidebar__nav-icon {
  margin-right: 0;
}
.table-wrapper_-ypLW {
  position: relative;
}

.table-error_RpmYF {
  margin-bottom: 0.5rem;
}

.table_ZsFHz {
  width: 100%;
  border-style: hidden;
}

.head_0ERIE {
  border-bottom-style: hidden;
}

.head-cell_hp7L2 {
  background-color: hsl(var(--gray-7-color));
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  color: hsl(var(--gray-1-color));
  padding: 0.49rem 0.87rem;
  text-align: left;
  font-weight: 400;
}
.head-cell_hp7L2:first-child {
  border-top-left-radius: 0.49rem;
}
.head-cell_hp7L2:last-child {
  border-top-right-radius: 0.49rem;
}
.head-cell__body_2ZsE0 {
  display: flex;
  user-select: none;
  align-items: center;
}
.head-cell__sort_yqYK5 {
  margin-left: 0.5rem;
  display: inline-flex;
  flex-direction: column;
}
.head-cell__sort-icon_11t-7 {
  transition: color 0.2s ease-in-out;
  color: hsl(var(--gray-3-color));
}
.head-cell__sort-icon_11t-7:first-child {
  margin-bottom: 1px;
  transform: rotate(180deg);
}
.head-cell__sort-icon--active_dXTk7 {
  color: hsl(var(--gray-1-color));
}

.table-overlay_CpnKS {
  position: absolute;
  inset: 0;
  background-color: hsl(var(--white-color)/50%);
}

.cell_b6Jq0 {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  border: 1px solid hsl(var(--gray-6-color));
  padding: 0.93rem;
  vertical-align: middle;
}
.tabs__head {
  position: relative;
}
.tabs__head-list {
  border-bottom: 1px solid hsl(var(--gray-6-color));
  display: flex;
}
.tabs__head-line {
  position: absolute;
  bottom: 1px;
  height: 2px;
  background-color: hsl(var(--accent-color));
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease, width 0.3s ease;
  border-radius: 2px 2px 0 0;
}
.tabs__head-button {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  font-weight: 600;
  color: hsl(var(--gray-1-color));
  padding-inline: 1rem;
  padding-block: 0.5rem 1rem;
}
.tabs__head-button--active {
  color: hsl(var(--accent-color));
}
.tabs__head-button--with-right-component {
  display: flex;
  align-items: center;
}
.link_4m6Vj {
  display: inline-block;
  cursor: pointer;
  word-break: break-word;
  text-decoration: none;
}
.time-picker__control {
  position: relative;
}
.container_x3QZ2 {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  --checked-bg-color: hsl(var(--green-color));
}

.square_5n7s6 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  transition: background-color 0.2s, border-color 0.2s;
  border: 1px solid hsl(var(--gray-4-color));
  border-radius: 3px;
  background-color: hsl(var(--white-color));
}
.square__icon_w505e {
  transition: opacity 0.2s, transform 0.2s;
  transform: scale(0);
  opacity: 0;
  color: hsl(var(--white-color));
}

.input_vScUw {
  display: none;
  opacity: 0;
}
.input_vScUw:checked ~ .square_5n7s6 {
  border: 1px solid var(--checked-bg-color);
  background-color: var(--checked-bg-color);
}
.input_vScUw:checked ~ .square_5n7s6 .square__icon_w505e {
  transform: scale(1);
  opacity: 1;
}

.label_ZwMbE {
  margin-left: 0.5rem;
  font-size: var(--p4-font-size);
  line-height: var(--p4-line-height);
  word-break: break-word;
}
.color-picker-field__input-wrapper {
  position: relative;
}
.color-picker-field__picker {
  position: absolute;
  top: 100%;
  margin-top: 7px;
  width: 300px;
}
.color-picker-field__picker-inner {
  width: auto;
}
.color-picker-field__color {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.25rem;
}
.color-picker-field__icon-after {
  transform: rotate(180deg);
}
.date-input_uZnCb {
  position: relative;
}
.date-input__arrow_am6-G {
  transform: rotate(180deg);
}
.date-input__arrow__disabled_zJ7JY {
  opacity: 0.3;
}
.date-input__input_7WDS7 {
  cursor: pointer;
}
.input-wrapper_mhJSm {
  position: relative;
}

.input_zlGaw {
  padding-right: 2.81rem;
}
.photo-field__label {
  margin-bottom: 0.25rem;
}
.photo-field__img-wrapper {
  position: relative;
  margin-bottom: 0.75rem;
  height: 5rem;
  width: 5rem;
}
.photo-field__remove-btn {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 50%;
  background-color: hsl(var(--black-1-color)/50%);
}
.photo-field__remove-btn-icon {
  color: hsl(var(--white-color));
  padding: 0.125rem;
}
.photo-field__img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.photo-field__upload-btn {
  width: auto;
  padding-inline: 1.75rem;
}
.radio-group {
  display: flex;
  column-gap: 2.5rem;
  margin-top: 0.625rem;
}
.radio-input {
  user-select: none;
  display: flex;
  cursor: pointer;
  align-items: center;
  --checked-bg-color: hsl(var(--accent-color));
}
.radio-input__input {
  box-sizing: border-box;
  opacity: 0;
  display: none;
}
.radio-input__input:checked ~ .radio-input__check-mark:after {
  opacity: 1;
}
.radio-input__input:checked ~ .radio-input__check-mark {
  background-color: var(--checked-bg-color);
  border: none;
}
.radio-input__check-mark {
  position: relative;
  height: 1.25rem;
  width: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: 50%;
  border: 1px solid hsl(var(--gray-4-color));
  background-color: hsl(var(--white-color));
  transition: background-color 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radio-input__check-mark:after {
  content: "";
  opacity: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: hsl(var(--white-color));
}
.radio-input__label-text {
  margin-left: 0.75rem;
  word-break: break-word;
  font-weight: 500;
  font-size: var(--p2-font-size);
  line-height: var(--p2-line-height);
}
body .react-select {
  position: relative;
}
body .react-select--size-medium .react-select__control {
  min-height: var(--input-medium-height);
}
body .react-select--size-large .react-select__control {
  min-height: var(--input-large-height);
}
body .react-select--error .react-select__control {
  border-color: hsl(var(--red-color));
}
body .react-select--is-disabled {
  pointer-events: none;
  cursor: not-allowed;
}
body .react-select__menu-portal {
  z-index: 999 !important;
}
body .react-select__indicator svg {
  width: 100%;
  height: 100%;
}
body .react-select__indicators {
  display: flex;
  align-items: center;
}
body .react-select__indicators .react-select__clear-indicator {
  margin-right: 0.25rem;
}
body .react-select__control {
  background-color: hsl(var(--white-color));
  font-size: var(--p4-font-size);
  line-height: var(--p4-line-height);
  padding-inline: 1.18rem;
  border: 1px solid hsl(var(--gray-5-color));
  border-radius: 0.37rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
body .react-select__control--is-disabled {
  cursor: not-allowed;
}
body .react-select__control--is-focused body .react-select__input-container {
  height: auto;
}
body .react-select__control--is-disabled {
  background-color: hsl(var(--gray-7-color));
  color: hsl(var(--gray-3-color));
}
body .react-select__menu {
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--gray-5-color));
  background-color: hsl(var(--white-color));
  box-shadow: var(--shadow-4);
  position: absolute;
  width: 100%;
  margin-top: 0.43rem;
}
body .react-select__menu-list {
  padding-block: 0.25rem;
}
body .react-select__option {
  font-weight: 600;
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  padding: 0.75rem 0.93rem;
  word-break: break-word;
}
body .react-select__option--is-selected {
  background-color: hsl(var(--accent-color));
  color: hsl(var(--white-color));
}
body .react-select__option--is-disabled {
  background-color: hsl(var(--gray-7-color));
  color: hsl(var(--gray-3-color));
  cursor: not-allowed;
}
body .react-select__option:not(body .react-select__option--is-selected, body .react-select__option--is-disabled):hover {
  background-color: hsl(var(--gray-6-color));
}
body .react-select__single-value {
  position: absolute;
}
body .react-select--single-value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 8px);
}
body .react-select__multi-value {
  background-color: hsl(var(--gray-7-color));
  display: flex;
  border-radius: 2px;
  margin: 2px;
  overflow: hidden;
}
body .react-select__multi-value__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 3px 3px 6px;
}
body .react-select__multi-value__remove {
  align-items: center;
  display: flex;
  padding-left: 4px;
  padding-right: 4px;
  transition: background-color 0.2s ease-in-out, opacity 0.1s;
}
body .react-select__multi-value__remove:hover {
  background-color: hsl(var(--gray-6-color));
}
body .react-select__menu-notice--no-options {
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
  font-weight: 600;
  text-align: center;
  padding: 0.46rem 0;
}
body .react-select__placeholder {
  color: hsl(var(--gray-3-color));
}
body .react-select__indicator {
  display: flex;
  width: 0.93rem;
  height: 0.93rem;
}
.textarea {
  position: relative;
}
.textarea__counter {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  user-select: none;
  color: hsl(var(--gray-3-color));
  font-size: var(--p5-font-size);
  line-height: var(--p5-line-height);
}