/* [project]/src/shared/ui/Modal.module.css [app-client] (css) */
.Modal-module__vgJrVq__shell {
  z-index: 100;
  padding: calc(var(--spacing, .25rem) * 3);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

@media (min-width: 40rem) {
  .Modal-module__vgJrVq__shell {
    padding: calc(var(--spacing, .25rem) * 6);
  }
}

.Modal-module__vgJrVq__shellDrawer {
  z-index: 100;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.Modal-module__vgJrVq__backdrop {
  background-color: #0f172b66;
  position: fixed;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .Modal-module__vgJrVq__backdrop {
    background-color: color-mix(in oklab, var(--color-slate-900, lab(7.78673% 1.82346 -15.0537)) 40%, transparent);
  }
}

.Modal-module__vgJrVq__backdrop {
  animation: .12s ease-out forwards Modal-module__vgJrVq__modalFadeIn;
}

.Modal-module__vgJrVq__dialog {
  z-index: 10;
  border-radius: var(--radius-2xl, 1rem);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #e2e8f0cc;
  flex-direction: column;
  width: 100%;
  max-height: 92vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .Modal-module__vgJrVq__dialog {
    border-color: color-mix(in oklab, var(--color-slate-200, lab(91.7353% -.998765 -4.76968)) 80%, transparent);
  }
}

.Modal-module__vgJrVq__dialog {
  background-color: var(--color-white, #fff);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  will-change: transform, opacity;
  contain: layout paint;
  animation: .14s cubic-bezier(.16, 1, .3, 1) both Modal-module__vgJrVq__modalEnter;
  transform: translateZ(0);
}

.Modal-module__vgJrVq__drawer {
  z-index: 10;
  border-left-style: var(--tw-border-style);
  border-color: #e2e8f0cc;
  border-left-width: 1px;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .Modal-module__vgJrVq__drawer {
    border-color: color-mix(in oklab, var(--color-slate-200, lab(91.7353% -.998765 -4.76968)) 80%, transparent);
  }
}

.Modal-module__vgJrVq__drawer {
  background-color: var(--color-white, #fff);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  will-change: transform;
  contain: layout paint;
  animation: .16s cubic-bezier(.16, 1, .3, 1) both Modal-module__vgJrVq__drawerSlideIn;
}

.Modal-module__vgJrVq__shellDrawer .Modal-module__vgJrVq__backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation-duration: .12s;
}

.Modal-module__vgJrVq__header {
  border-bottom-style: var(--tw-border-style);
  border-color: #e2e8f0b3;
  border-bottom-width: 1px;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .Modal-module__vgJrVq__header {
    border-color: color-mix(in oklab, var(--color-slate-200, lab(91.7353% -.998765 -4.76968)) 70%, transparent);
  }
}

.Modal-module__vgJrVq__header {
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, .25rem) * 5);
  padding-block: calc(var(--spacing, .25rem) * 4);
}

@media (min-width: 40rem) {
  .Modal-module__vgJrVq__header {
    padding-inline: calc(var(--spacing, .25rem) * 6);
  }
}

.Modal-module__vgJrVq__title {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  --tw-tracking: var(--tracking-tight, -.025em);
  letter-spacing: var(--tracking-tight, -.025em);
  color: #002855;
}

.Modal-module__vgJrVq__subtitle {
  margin-top: calc(var(--spacing, .25rem) * .5);
  font-size: var(--text-xs, .75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
  color: var(--color-slate-500, #62748e);
}

@supports (color: lab(0% 0 0)) {
  .Modal-module__vgJrVq__subtitle {
    color: var(--color-slate-500, lab(48.0876% -2.03595 -16.5814));
  }
}

.Modal-module__vgJrVq__closeButton {
  cursor: pointer;
  border-radius: var(--radius-xl, .75rem);
  padding: calc(var(--spacing, .25rem) * 1.5);
  color: var(--color-slate-400, #90a1b9);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
}

@supports (color: lab(0% 0 0)) {
  .Modal-module__vgJrVq__closeButton {
    color: var(--color-slate-400, lab(65.5349% -2.25151 -14.5072));
  }
}

@media (hover: hover) {
  .Modal-module__vgJrVq__closeButton:hover {
    background-color: var(--color-slate-100, #f1f5f9);
  }
}

@media (hover: hover) {
  .Modal-module__vgJrVq__closeButton:hover {
    color: var(--color-slate-700, #314158);
  }
}

.Modal-module__vgJrVq__body {
  padding-inline: calc(var(--spacing, .25rem) * 5);
  padding-block: calc(var(--spacing, .25rem) * 5);
  color: var(--color-slate-700, #314158);
  flex: 1;
  font-size: 13px;
  overflow-y: auto;
}

@supports (color: lab(0% 0 0)) {
  .Modal-module__vgJrVq__body {
    color: var(--color-slate-700, lab(26.9569% -1.47018 -15.6993));
  }
}

@media (min-width: 40rem) {
  .Modal-module__vgJrVq__body {
    padding-inline: calc(var(--spacing, .25rem) * 6);
  }
}

.Modal-module__vgJrVq__footer {
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 3);
  border-top-style: var(--tw-border-style);
  border-color: #e2e8f0b3;
  border-top-width: 1px;
  flex-shrink: 0;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .Modal-module__vgJrVq__footer {
    border-color: color-mix(in oklab, var(--color-slate-200, lab(91.7353% -.998765 -4.76968)) 70%, transparent);
  }
}

.Modal-module__vgJrVq__footer {
  background-color: #f8fafcb3;
}

@supports (color: color-mix(in lab, red, red)) {
  .Modal-module__vgJrVq__footer {
    background-color: color-mix(in oklab, var(--color-slate-50, lab(98.1434% -.369549 -1.05968)) 70%, transparent);
  }
}

.Modal-module__vgJrVq__footer {
  padding-inline: calc(var(--spacing, .25rem) * 5);
  padding-block: calc(var(--spacing, .25rem) * 3.5);
}

@media (min-width: 40rem) {
  .Modal-module__vgJrVq__footer {
    padding-inline: calc(var(--spacing, .25rem) * 6);
  }
}

@keyframes Modal-module__vgJrVq__modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes Modal-module__vgJrVq__modalEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 3px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Modal-module__vgJrVq__drawerSlideIn {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

/*# sourceMappingURL=src_shared_ui_Modal_module_1a-ru77.css.map*/