/* Classes for Sign up */
.arrow_back {
    background: url("../img/arrow_back.png") no-repeat;
    left: 37.17px;
    top: 41.51px;
    position: absolute;
    height: 37px;
    width: 37px;
}

.arrow_back img {
    height: 24px;
    width: 24px;
}


form img {
    width: 16px;
    height: 21px;
    object-fit: contain;
}


.logo_white {
    position: absolute;
    left: 7rem;
    top: 7rem;
    height: 122px;
    width: 100px;
}


.signUp__frame {
    position: relative;
    gap: 1rem;
}


.signUp__title {
    margin: auto;
}


.signUp__form--container {
    display: flex;
    flex-direction: column;
    width: 75%;
    gap: 20px;
}


/* Classe for forgot password */
.forgot__file--wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    min-height: inherit;
    background-color: #4589FF;
}


.forgot__frame {
    position: relative;
    width: 761px;
    height: auto;
    gap: 1rem
}


.forgot__text--wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 72%;
}

.forgot__text--wrapper h1 {
    text-align: center;
}


.forgot__text {
    font-size: 1.4rem;
    text-align: center;
    padding-top: 2rem;
}


.forgot__form--container {
    width: 55%;
}


.forgot__buttons {
    margin-top: 2rem;
}


.forgot__buttons button {
    background-color: #4589FF;
    font-size: 1.2rem;
    padding: 5px 30px;
}

/* Classes for reset Password */
.reset__input--container {
    border-bottom: 1px solid #D1D1D1;
    padding-bottom: 5px !important;
}

.reset__input--container2 {
    margin-top: 2rem;
    border-bottom: 1px solid #D1D1D1;
    padding-bottom: 5px !important;
    margin-bottom: 2%;
}


.reset__input--container img {
    opacity: 0;
}


.reset__input--container2 img {
    opacity: 0;
}


.password__comparison {
    width: 100%;
    padding: 0;
}


.forgot__buttons--reset {
    margin-top: 3rem;
}


.response__forgot--container {
    position: absolute;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
}


.email__sent--container {
    position: absolute;
    top: 70vh;
    left: 50vw;
    display: flex;
    align-items: center;
    width: max-content;
    gap: 13px;
    padding: 10px 15px;
    border-radius: 1rem;
    transition: all 250 ease-in-out;
    transform: translate(-50%, 0vh);
}

.email__sent--container:hover {
    background-color: #4589FF !important;
    box-shadow: unset;
    border: unset !important;
}


/* General Media Log In */
/* Width base Media*/
@Media(max-width:992px) {
    .forgot__text {
        font-size: 1.2rem;
        padding-top: 1rem;
    }


    .forgot__buttons--reset {
        margin-top: 2rem;
    }
}

@Media(max-width:778px) {
    .forgot__request--wrapper {
        width: 90vw;
    }


    .signUp__title {
        font-size: 2rem;
    }
}


@media(max-width:576px) {
    .forgot__title {
        font-size: 2rem;
    }


    .reset__input--container,
    .reset__input--container2 {
        flex-direction: unset !important;
    }
}


@media(max-width:376px) {
    .forgot__title {
        font-size: 1.5rem !important;
    }


    .forgot__text {
        font-size: 1rem !important;
    }


    .arrow_back {
        left: 5vw;
    }
}


/* Height base Media*/
@Media(max-height:768px) {
    .arrow_back {
        left: 5vw;
        top: 5vh;
    }
}


@media(max-height:576px) {
    .forgot__frame {
        width: 80vw;
        height: auto !important;
        padding-block: 5px !important;
    }


    .forgot__text {
        margin-bottom: unset;
        font-size: 1rem;
    }


    .forgot__buttons {
        margin-top: 5px;
    }


    .forgot__buttons button {
        font-size: 1rem;
    }
}