._root_1hhce_1 {
    &[data-variant='fancy'] {
        border: 4px solid transparent;
        background:
                linear-gradient(180deg, var(--mantine-primary-color-5), var(--mantine-primary-color-6)) padding-box, /* Inner background color */
                linear-gradient(0deg, var(--mantine-primary-color-5), var(--mantine-primary-color-6)) border-box; /* Gradient for border */
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
        &:active {
            background:
                    linear-gradient(0deg, var(--mantine-primary-color-5), var(--mantine-primary-color-6)) padding-box,
                    linear-gradient(180deg, var(--mantine-primary-color-5), var(--mantine-primary-color-6)) border-box;
        }
        &:hover:not(:active) {
            background:
                    linear-gradient(180deg, var(--mantine-primary-color-4), var(--mantine-primary-color-5)) padding-box,
                    linear-gradient(0deg, var(--mantine-primary-color-4), var(--mantine-primary-color-5)) border-box;
        }
    }

    &[data-variant='fancy-active'] {
        border: 4px solid transparent;
        background:
                linear-gradient(180deg, var(--mantine-color-orange-6), var(--mantine-color-orange-8)) padding-box, /* Inner background color */
                linear-gradient(0deg, var(--mantine-color-orange-6), var(--mantine-color-orange-8)) border-box; /* Gradient for border */
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
        &:active {
            background:
                    linear-gradient(0deg, var(--mantine-color-orange-6), var(--mantine-color-orange-8)) padding-box,
                    linear-gradient(180deg, var(--mantine-color-orange-6), var(--mantine-color-orange-8)) border-box;
        }
        &:hover:not(:active) {
            background:
                    linear-gradient(180deg, var(--mantine-color-orange-5), var(--mantine-color-orange-7)) padding-box,
                    linear-gradient(0deg, var(--mantine-color-orange-5), var(--mantine-color-orange-7)) border-box;
        }
    }
}.modal-tabs {
  ::before {
    border-top-width: 0;
  }
}
.grid-layout-box {
  & .react-grid-item {
    transition: none;

    &.cssTransforms {
      transition-property: transform;
    }
    & > .react-resizable-handle {
      position: absolute;
      right: 3px;
      bottom: 3px;
      width: 5px;
      height: 5px;
      border-right: 2px solid rgba(0, 0, 0, 0.4);
      border-bottom: 2px solid rgba(0, 0, 0, 0.4);
      z-index: 999;
    }
    &.react-draggable-dragging {
      transition: none;
    }
    &.react-grid-placeholder {
      background: #575757;
      border-radius: 4px;
    }
  }

  & .draggable-area {
    cursor: move;
  }
}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.creatable-option {
  color: var(--mantine-primary-color);
}

.creatable-option-text {
  color: var(--mantine-color-black);
}

div[data-combobox-selected='true'] {
  .creatable-option,
  .creatable-option-text {
    color: var(--mantine-color-white);
  }
}
.jiggle {
  animation: jiggle 0.25s 2;
}

@keyframes jiggle {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}
.mobile-drawer .mantine-Drawer-content {
  height: auto;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-drawer .mantine-Drawer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}