html {
    margin: 0 !important;
}

body.login-pages {
    height: 100vh;
    margin: 0;
    background: linear-gradient(-45deg, rgba(157, 177, 246, 0.8), #FFFFFF, #FFFFFF, #A2F1FF80);
    background-size: 400% 400%;
    background-color: #FFF;
    animation: randomGradient 20s ease-in-out infinite;

}

@keyframes randomGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.shadow {
    box-shadow: 0px 0px 40px 0px #0000000D !important;
}



[id^="legend-"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.otp .col-2 {
    width: auto !important;
}

.otp input {
    width: 40px;
    height: 40px;
    overflow: hidden !important;
    min-height: 40px;
}

.status-box {
    min-width: 54px;
}


.min-h-auto {
    min-height: auto !important;
}


.showing:not(.star-type) {
    .show-password {
        position: relative;

        &:after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            right: 0;
            width: 1px;
            height: 100%;
            background-color: rgb(107 123 144);
            z-index: 1;
            pointer-events: none;
        }
    }
}
.showing:not(.star-type) {
    .show-password1 {
        position: relative;

        &:after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            right: 0;
            width: 1px;
            height: 100%;
            background-color: rgb(107 123 144);
            z-index: 1;
            pointer-events: none;
        }
    }
}
.text-secondary {
    strong.d-block:first-child {
        margin-top: 0 !important;
    }
}


@media (max-width: 767px) {
    .steps.steps-counter:not(.steps-vertical) {
        flex-direction: column;
        align-items: flex-start;

        .step-item {
            text-align: left;
            padding-top: 0;
            padding-left: calc(var(--tblr-steps-dot-size) + 1rem);
            min-height: auto;

            &:not(:first-child) {
                margin-top: 1rem;
            }

            &:not(:last-child) {
                &:after {
                    position: absolute;
                    content: "";
                    transform: none;
                    left: 4px;
                    width: var(--tblr-steps-border-width);
                    height: calc(100% + 1rem);
                }
            }

            &:before {
                top: 7px;
                left: 0;
                transform: translate(0, 0);
            }
        }
    }
}