.step {
    display: none;
}

.step.active {
    display: flex;
}

.pop-in-container {
    opacity: 0;
    transform: scale(0.5);
    animation: popIn 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes popIn {
    0% {
        opacity: 0;
        /* Start with opacity 0 (fully transparent) */
        transform: scale(0.5);
        /* Start with the container scaled down */
    }

    100% {
        opacity: 1;
        /* End with opacity 1 (fully visible) */
        transform: scale(1);
        /* End with the container at its original scale */
    }
}

.loader {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid #FFF;
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 0.8s linear infinite;
}

.loader2 {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid #8F2F30;
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 0.4s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Remove the number input arrows for non-WebKit browsers */
input[type="number"] {
    -moz-appearance: textfield;
    /* Firefox */
    appearance: textfield;
    /* Other browsers */
}

/* Remove the number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    /* Removes the margin in Safari */
}