.active {
  animation: fadeIn 0.25s 1 ease-in-out forwards;
  z-index: 1080;
}

.modal {
  overflow-y: auto;
}

.content {
  border-radius: 15px !important;
  border: 3px solid var(--color-1-500) !important;
  box-shadow: 0px 0px 5px 0px var(--color-1-20) !important;
}

.activeBackdrop {
  animation: fadeIn50 0.15s 1 ease-in-out forwards;
}

.errorAlert {
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

.btn:disabled {
  cursor: auto;
}

.tooltip {
  top: 40px;
  right: 0;
  left: 0;
}

.tooltipArrow {
  right: calc(50% - 4px);
}

.tooltipArrow::before {
  border-bottom-color: var(--color-1-900) !important;
}

.tooltipContent {
  background-color: var(--color-1-900) !important;
  max-width: 100%;
}

.buttonWrapper:hover .tooltip {
  opacity: 0.9;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn50 {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

.modal pre {
  padding: 16px !important;
  border-radius: 3px;
}

.header {
  background-color: var(--color-1-10);
}

@media only screen and (max-width: 575.98px) {
  .content {
    height: calc(90% - 1rem);
    width: 90%;
    margin: auto;
  }

  .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }
}
