:root {
    --gradient: linear-gradient(90deg, rgba(92, 242, 55, 0.863) 0%, rgba(251, 255, 27, 0.829) 100%);
}

.min-h-full {
    min-height: 100vh;
    background-color: #eaeaea;
    background-image: var(--gradient);
    background-size: 200%;
    animation: gradient-animation 9s infinite alternate;
}

@keyframes gradient-animation {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

.wave {
    animation-name: wave-animation;
    /* Refers to the name of your @keyframes element below */
    animation-duration: 2.5s;
    /* Change to speed up or slow down */
    animation-iteration-count: infinite;
    /* Never stop waving :) */
    transform-origin: 70% 70%;
    /* Pivot around the bottom-left palm */
    display: inline-block;
}

@keyframes wave-animation {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(14deg);
    }

    /* The following five values can be played with to make the waving more or less extreme */
    20% {
        transform: rotate(-8deg);
    }

    30% {
        transform: rotate(14deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(0deg);
    }

    /* Reset for the last half to pause */
    100% {
        transform: rotate(0deg);
    }
}

#registrationForm .form-header .stepIndicator.active {
    font-weight: 600;
}

#registrationForm .form-header .stepIndicator.finish {
    font-weight: 600;
    color: #5a67d8;
}

#registrationForm .form-header .stepIndicator::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9;
    width: 20px;
    height: 20px;
    background-color: #c3dafe;
    border-radius: 50%;
    border: 3px solid #ebf4ff;
}

#registrationForm .form-header .stepIndicator.active::before {
    background-color: #a3bffa;
    border: 3px solid #c3dafe;
}

#registrationForm .form-header .stepIndicator.finish::before {
    background-color: #5a67d8;
    border: 3px solid #c3dafe;
}

#registrationForm .form-header .stepIndicator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 100%;
    height: 3px;
    background-color: #f3f3f3;
}

#registrationForm .form-header .stepIndicator.active::after {
    background-color: #a3bffa;
}

#registrationForm .form-header .stepIndicator.finish::after {
    background-color: #5a67d8;
}

#registrationForm .form-header .stepIndicator:last-child:after {
    display: none;
}

#registrationForm :required.invalid {
    border: 2px solid #ffaba5;
}

#registrationForm .step {
    display: none;
}

.blinkAnnouncement {
    animation: blink 4s infinite;
    }
    .blinkMonitoring {
    animation: blink 2s infinite;
    }
    .blinkSendVerification {
    animation: blink 5s infinite;
    }
    @keyframes blink {
    0%, 50%, 100% {
    opacity: 1;
    }
    25%, 75% {
    opacity: 0;
    }
    }