body {
    font-family: Arial, sans-serif;
}

.ag-theme-alpine.compact {
    --ag-grid-size: 3px;
}


.dmc-tabs {
  font-size: 18px;
  /*font-weight: 500;*/
  position: relative;
  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));

  &:first-of-type {
    border-radius: 4px 0 0 4px;
  }

  &:last-of-type {
    border-radius: 0 4px 4px 0;
  }

  & + & {
    border-left-width: 0;
  }

  &:hover {
    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
  }

  &[data-active] {
    z-index: 1;
    background-color: var(--mantine-color-blue-filled);
    border-color: var(--mantine-color-blue-filled);
    color: var(--mantine-color-white);

    &:hover {
      background-color: var(--mantine-color-blue-filled-hover);
    }
  }
}



.fade-in {
  opacity: 0;
  animation: fadeIn ease 1s forwards;
}

.step-1 {
  animation-delay: 0s;
}
.step-2 {
  animation-delay: 0.5s;
}
.step-3 {
  animation-delay: 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



.card-button {
  width: 100%;
  height: 100%;
  padding: 20px;
  text-align: left;
  background-color: white;
  border: 1px solid var(--mantine-color-gray-3);
  border-radius: 8px;
  transition: transform 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.card-button:hover {
  background-color: var(--mantine-color-gray-0);
  transform: scale(1.05);
  cursor: pointer;
}


.card-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  max-height: 200px; /* optional: limits vertical height */
}

.card-text {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0.5rem;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease-in-out;
}

#image-container:hover .hover-overlay {
  opacity: 1;
}

.selectable-grid .ag-cell {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
}