#middle {
    display: flex;
    gap: 60px;
    height: 100%;
}

.middle-left {
    width: 50%;
    min-height: 80vh;
    img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        align-self: stretch;
    }
}

.middle-right {
    display: flex;
    padding: 100px 10px !important;
    flex-direction: column;
    width: 50%;
    align-items: center;
    background: var(--Background, #2b2b2b);
    .middle-right-content{
        width: 100% !important;
    }
    h2 {
        color: var(--White, #fff);

        /* H2 - Work Sans */
        font-family: "Work Sans";
        font-size: 51px;
        font-style: normal;
        font-weight: 600;
        line-height: 110%; /* 56.1px */
        text-transform: capitalize;
        margin-bottom: 20px;
    }
    h3 {
        color: var(--White, #fff);
        /* Body Text- Work Sans */
        font-family: "Work Sans";
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%; /* 35.2px */
        text-transform: capitalize;
        margin-bottom: 40px;
    }
}



/*?------------- EACH INPUT -------------*/
.form-group {
    width: 50%;
    position: relative;
    margin-bottom: 20px;
    input {
        width: 100%;
        display: flex;
        height: 46px;
        padding: 16px 45px;
        align-items: center;
        gap: 12px;
        align-self: stretch;
        border-radius: 20px;
        border: 1px solid var(--caption-label-text, #858584);
        background: var(--Text, #fff);
    }
    label {
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        height: 20px;
        width: 20px;
        position: absolute;
        color: black;
        img {
            width: 20px;
            height: 20px;
        }
    }
}

#submit-button{
    width: 50%;
}


/*! --------------- Responsive --------------- !*/
@media (max-width: 835px) {
    .form-group {
        width: 90% !important;
    }
    button {
        width: 90% !important;
    }
}

@media (max-width: 768px) {
    #middle {
        gap: 0px;
        display: flex;
        flex-direction: column;
    }
    .middle-left {
        min-height: 0vh !important;
        width: 100%;
        height: 100%;
        img {
            object-fit: cover;
            height: 232px;
            align-self: stretch;
        }
    }
    .middle-right {
        width: 100%;
        padding: 30px 0 40px;
        justify-content: center;
        text-align: center;
    }
    .middle-right-content {
        padding: 0 30px;
    }
    form {
        width: 100%;
    }
    .form-group {
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }

    button {
        width: 90% !important;
        transform: translateX(5%);
    }
}



/* !---------------------------------- ERROR MESSAGES ----------------------------------! */

/*------------- ERROR MESSAGE 1 -------------*/
.error1::after {
    content: "Password must have at least 1 number" !important;
    white-space: nowrap;
    position: absolute;
    bottom: -22px;
    left: 25px;
    color: red !important;
    font-size: small;
    margin-bottom: 5px;
}

.done1::after {
    content: "";
    position: absolute;
    display: block;
    bottom: -22px;
    left: 25px;
    color: green;
    font-size: small;
    margin-bottom: 5px;
}

/*------------- ERROR MESSAGE 2 -------------*/
.error2::after {
    content: "Password must have at least 1 Special Character" !important;
    white-space: nowrap;

    position: absolute;
    bottom: -22px;
    left: 25px;
    color: red !important;
    font-size: small;
    margin-bottom: 5px;
}
.done2::after {
    content: "";
    position: absolute;
    display: block;
    bottom: -22px;
    left: 25px;
    color: green;
    font-size: small;
    margin-bottom: 5px;
}

/*------------- ERROR MESSAGE 3 -------------*/
.error3::after {
    content: "";
    content: "Password must be at least 8 characters" !important;
    white-space: nowrap;

    position: absolute;
    bottom: -22px;
    left: 25px;
    color: red !important;
    font-size: small;
    margin-bottom: 5px;
}
.done3::after {
    position: absolute;
    bottom: -22px;
    left: 25px;
    color: green;
    font-size: small;
    margin-bottom: 5px;
}

/*------------- ERROR MESSAGE 4 -------------*/
.error4::after {
    content: "Password must have at least 1 Uppercase letter" !important;
    white-space: nowrap;

    position: absolute;
    bottom: -22px;
    left: 25px;
    color: red !important;
    font-size: small;
    margin-bottom: 5px;
}
.done4::after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 25px;
    color: green;
    font-size: small;
    margin-bottom: 5px;
}

/*------------- ERROR MESSAGE 5 -------------*/
.error5::after {
    content: "Password must have at least 1 Lowercase letter" !important;
    white-space: nowrap;

    position: absolute;
    bottom: -22px;
    left: 25px;
    color: red !important;
    font-size: small;
    margin-bottom: 5px;
}
.done5::after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 25px;
    color: green;
    font-size: small;
    margin-bottom: 5px;
}

/*------------- ERROR MESSAGE 6 -------------*/
.error6::after {
    content: "Username At least have 3 letters" !important;
    white-space: nowrap;

    position: absolute;
    bottom: -22px;
    left: 25px;
    color: red !important;
    font-size: small;
    margin-bottom: 5px;
}
.done6::after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 25px;
    color: green;
    font-size: small;
    margin-bottom: 5px;
}

/*------------- ERROR MESSAGE 7 -------------*/
.error7::after {
    content: "Password not match" !important;
    position: absolute;
    bottom: -22px;
    left: 25px;
    color: red !important;
    font-size: small;
    margin-bottom: 5px;
}
.done7::after {
    content: "" !important;
    position: absolute;
    bottom: -22px;
    left: 25px;
    color: green;
    font-size: small;
    margin-bottom: 5px;
}

/*------------- EMAIL ERROR MESSAGE  -------------*/
.error8::after {
    content: "Email not valid" !important;
    position: absolute;
    z-index: 1;
    bottom: -22px;
    left: 25px;
    color: red !important;
    font-size: small;
    margin-bottom: 5px;
}
.done8::after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 25px;
    color: green;
    font-size: small;
    margin-bottom: 5px;
}

/*------------- DANGER IMAGE -------------*/
.errorbadge:before {
    content: "" !important;
    background-image: url("../../assests/svg/danger.svg");
    width: 20px;
    height: 20px;
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
}

/*------------- PASSWORD SHOW IMAGE -------------*/
i {
    transition: all 0.5s;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 14px;
    top: 54%;
    color: #2e2e2e;
    opacity: 0.7;
    transform: translateY(-50%);
    cursor: pointer;
}

/*------------- PASSWORD SHOW IMAGE WITH DANGER IMAGE  -------------*/
i.wdanger {
    transition: all 0.5s;
    right: 39px;
}