.slide-up-enter-active,
.slide-up-leave-active,
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.1s ease;
  position: absolute;
  width: 100%;
}

.slide-up-enter-from {
  transform: translateY(100%);
  opacity: 0;
}
.slide-up-enter-to {
  transform: translateY(0%);
  opacity: 1;
}
.slide-up-leave-from {
  transform: translateY(0%);
  opacity: 1;
}
.slide-up-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.slide-down-enter-from {
  transform: translateY(-100%);
  opacity: 0;
}
.slide-down-enter-to {
  transform: translateY(0%);
  opacity: 1;
}
.slide-down-leave-from {
  transform: translateY(0%);
  opacity: 1;
}
.slide-down-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.orange-button {
  background: #0A0345;
  transition: all 0.3s ease;
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

.orange-button:hover {
  background: #00112f;
}

.orange-button:disabled {
  background: #ccc;
  cursor: default;
}

.orange-select {
  border-color:#0A0345;
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

.orange-select.disabled {
  color: gray;
}

.orange-select option {
  color: black;
}

.border-block {
  border: 1px solid #0A0345;
  padding: 8px;
  border-radius: 8px;
  position: relative;
}

.calc-img {
  background: white;
  max-width: 800px;
  border: 1px solid #0A0345;
  border-radius: 8px;
}

.calc-img {
  background: white;
  max-width: 800px;
  border: 1px solid #0A0345;
  border-radius: 8px;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  font-weight: normal;
  visibility: hidden;
  opacity: 0;
  width: 220px;
  background-color: white;
  border: 1px solid black;
  color: black;
  text-align: left;
  padding: 6px;
  border-radius: 8px;
  position: absolute;
  z-index: 10;
  top: 24px;
  left: -290px;
  transition: opacity 0.3s ease;
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}