*:focus {
  outline: none;
}

.fade-in {
  transform: translateY(0px);
  opacity: 100;
  animation: fadeIn 200ms ease-in forwards;
}

@keyframes fadeIn {
  from { transform: translateY(-5px); opacity: 0; }
  to   { transform: translateY(0px); opacity: 100; }
}

.btn:hover, .select:hover {
            background-color: var(--gray-hover);
        }
        
        .btn-outline:hover {
            background: var(--primary-color);
            color: white;
        }

.input:focus, select:focus-visible, .btn:focus-visible {
  box-shadow: inset 0 0 0 1px var(--primary-color);
  border: 1px solid var(--primary-color);
}

.add-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='3' y1='8' x2='13' y2='8' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='8' y1='3' x2='8' y2='13' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}

.remove-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='3' y1='3' x2='13' y2='13' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='13' y1='3' x2='3' y2='13' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}