/* Register CSS */

@use 'responsive';
@use 'variables'as var;

.register-card {
    p>a {

        color: var.$primary;
    }
}

.register-form {
    position: relative;
    z-index: 1;

    .form-group {
        position: relative;
        z-index: 1;

        label {
            position: absolute;
            text-align: center;
            z-index: 100;
            border-radius: 50%;
            top: 0;
            right: 15px;
            cursor: pointer;
            font-size: 1rem;
            margin-bottom: 0;

            span {
                font-size: 14px;
                font-weight: 700;
                line-height: 52px;
            }

            &.label-psswd {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: 24px;
                font-weight: 700;
                text-transform: uppercase;
                right: 20px;
                z-index: 10;
            }
        }

        .form-control {
            border: 0;
            border-bottom: 2px solid transparent;
            font-size: 1rem;

            &:focus {
                border-bottom-color: var.$primary;
            }
        }
    }

    .progress {
        width: 100%;
        height: 5px;
        margin-top: 1rem;
        border-radius: 0;
        margin-bottom: 0.25rem;
    }
}

.login-meta-data {
    .forgot-password {
        color: var.$primary;
        font-size: 1rem;
    }

    .custom-checkbox .custom-control-label::before {
        border-radius: 50%;
    }
}

.register-area {
    position: relative;
    z-index: 1;
}

#comingSoonClock {
    display: flex;
    align-items: center;
    justify-content: center;

    div {
        margin: 0 0.25rem;

        span {
            font-size: 1rem;
            color: var.$heading;
            font-weight: 700;

            @media #{responsive.$breakpoint-lg} {
                font-size: 1.5rem;
            }
        }
    }
}