/* body{
    background-color: #24282d;
}
body::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, 0.0);
    width: 0px;
}

body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.0);
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.0);
    border-radius: 0px;
    border: 0px solid rgba(0, 0, 0, 0.0);
} */

body::-webkit-scrollbar {
    width: 0px !important;
}

.contact__row {
    min-height: 88vh !important;
}

.container__form {
    height: 80%;
    max-width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.container__form--ball {
    width: 100%;
}

form {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* align-items: center;
    background-color: red; */
}

.form__container--left,
#form__container--right {
    background-color: #24282D;
    /* min-height: 88vh; */
}

#form__container--right {
    /* height: 88vh; */
    /* background-color: #24282D; */
    /* display: flex;
    justify-content: center; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

#form__overlay {
    /* height: 100%; */
    background: rgba(255, 255, 255, 0.1);
    min-height: 100%;
}

#form__overlay p {
    color: #FFF;
    font-family: Montserrat;
    font-size: 16px;
}

.check__consent {
    color: #FFF;
    font-family: Montserrat;
    font-size: 12px;
}

.check__consent--link {
    text-transform: capitalize;
    font-weight: 400;
    text-decoration: underline;
    font-size: 12px;
}

#form__overlay p span {
    font-weight: 700;
}

#form__pic {
    background-image: url(/public/assets/img/cv-photo-profil-650-100.jpg);
    background-size: cover;
    height: 54vmin;
    width: 54vmin;
    /* height: 0vmin;
    width: 0vmin; */
    transform: translateX(-200%);
    /* border-radius: 50%; */
    box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
    position: relative;
    --translate-coverContact: 0%;
    /* variable to use the pseudo element in GSAP */

}

#form__pic::before {
    content: "";
    background-color: #3A3E42;
    position: absolute;
    z-index: 1;
    height: 56vmin;
    width: 56vmin;
    top: -10px;
    left: -10px;
    transform: translateX(var(--translate-coverContact));
    /* to place the div in front of the photo */
    border-radius: 50%;
}


#container__name {
    display: flex;
    width: 100vw !important;
}

#span__form__signup--containerptcha,
#span__lastname,
#span__captcha {
    padding: 0px 10px;
}

#span__firstname {
    padding: 0px 13px;
}

legend {
    font-family: Poppins;
    font-size: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    /* background-color: blue; */
    /* max-height: 85px; */
}

#text {
    height: 100px;
}

#captcha,
#text,
#email,
#lastname,
#firstname,
#mobile,
#username,
#password,
#passwordCheck {
    color: #fff !important;
    border-radius: 0%;
    background-color: #333740;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.085) 0px -11.5px 12.5px 0px inset, rgba(0, 0, 0, 0.075) 0px -18px 15px 0px inset, rgba(0, 0, 0, 0.05) 0px -39.5px 20px 0px inset, rgba(0, 0, 0, 0.03) 0px 1px 0.5px, rgba(0, 0, 0, 0.045) 0px 2px 1px, rgba(0, 0, 0, 0.045) 0px 4px 2px, rgba(0, 0, 0, 0.045) 0px 8px 4px, rgba(0, 0, 0, 0.045) 0px 16px 8px;
    box-sizing: border-box;
}

#contact__btn:last-child,
.signUp__btn {
    height: 100px;
    width: 120px;
    background-color: #333740 !important;
    font-family: 'Montserrat', sans-serif !important;
    border: none;
    border-radius: 0%;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.input-group-text {
    background: linear-gradient(to bottom, #f5f5f5 0%, #e0e0e0 50%, #f5f5f5 100%);
    box-shadow: rgba(0, 0, 0, 0.045) 0px -11.5px 12.5px 0px inset, rgba(0, 0, 0, 0.04) 0px -18px 15px 0px inset, rgba(0, 0, 0, 0.03) 0px -39.5px 20px 0px inset, rgba(0, 0, 0, 0.015) 0px 1px 0.5px, rgba(0, 0, 0, 0.0225) 0px 2px 1px, rgba(0, 0, 0, 0.0225) 0px 4px 2px, rgba(0, 0, 0, 0.0225) 0px 8px 4px, rgba(0, 0, 0, 0.0225) 0px 16px 8px;
}

input::placeholder,
textarea::placeholder {
    font-family: 'Montserrat', sans-serif !important;
    color: #D5D5D5 !important;
    font-size: 0.9em;
}

small,
.text-success {
    font-family: 'Montserrat', sans-serif !important;
}

.contact__legend {
    font-size: 1.5em;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}


.g-recaptcha {
    max-width: 100%;
    overflow: hidden;
}



@media (max-width: 280px) {
    #form__pic {
        max-height: 175px !important;
        max-width: 175px !important;
    }

    .form__container--left {
        max-height: 60vh;
    }

    #form__container--right {
        min-height: 110vh;
    }

    #form__overlay p {
        font-size: 14px !important;
    }
}

@media (min-width: 281px) and (max-width: 375px) {
    #form__pic {
        max-height: 250px;
        max-width: 250px;
    }

    #form__container--right {
        min-height: 110vh;
    }

    .check__consent {
        text-align: justify;
    }

    .form__container--left {
        max-height: 70vh;
    }

    #signin__container {
        height: 84vh !important;
    }
}

@media (min-width: 376px) and (max-width: 768px) {
    .navbar {
        height: 13vh;
    }

    .form__container--left {
        max-height: 55vh;
    }

    #form__overlay p {
        font-size: 16px;
    }

    #form__container--right {
        min-height: 88vh;
    }

    .check__consent {
        text-align: justify;
    }

    /* 
    #container__name {
        width: 50vw;
    }


    legend {
        font-size: 20px !important;
    }

    #form__pic {
        max-height: 250px;
        max-width: 250px;
    } */
}

@media (min-width: 768px) and (max-width: 820px) {
    #form__pic::before {
        height: 54vmin !important;
        width: 54vmin !important;
    }

    #form__overlay p {
        font-size: 24px;
    }

    #form__pic {
        max-height: 400px !important;
        max-width: 400px !important;
    }

    .form__container--left {
        max-height: 70vh;
    }

    #form__container--right {
        min-height: 70vh;
        padding-bottom: 0px !important;
    }

    legend {
        font-size: 30px !important;
    }

    form {
        max-height: 100vh;
    }

    input {
        height: 70px;
    }

    /* #firstname{
        height: 95px !important;
    } */

    input::placeholder,
    textarea::placeholder {
        font-size: 20px;
    }
}

@media (min-width: 820px) and (max-width: 1024px) {


    #form__pic::before {
        height: 50.5vmin !important;
        width: 50.5vmin !important;
    }

    #form__overlay p {
        font-size: 24px;
    }

    .container__legend {
        padding: 30px 0px 0px 0px !important;
        height: 50px;
    }

    legend {
        font-size: 28px !important;
    }

    #form__pic {
        max-height: 500px;
        max-width: 500px;
    }

    .form__container--left {
        max-height: 60vh;
    }

    #form__container--right {
        padding: 0px 0px 50px 0px;
    }


    input::placeholder,
    textarea::placeholder,
    small {
        font-size: 18px;
    }

    button:last-child {
        font-size: 20px;
    }

    input {
        height: 70px;
    }

    #contact__btn {
        margin: 0px 0px 20px 0px;
    }
}

@media (min-width: 1025px) {
    body {
        overflow-x: hidden !important;
    }

    .navbar {
        /* height: 12vh !important; */
    }

    #container__contact {
        /* height: 88vh !important;
        overflow: hidden; */
    }

    .container__legend {
        height: 4vh;
    }

    #form__container--right {
        padding: 0px 0px 50px 0px;
    }
}

@media (max-height: 820px) {
    body {
        overflow: visible;
    }
}


@media (min-width: 650px) and (max-height: 430px) {
    .form__container--left {
        min-height: 120vh;
    }

    .container__legend {
        padding-top: 0px;
    }

    #signin__container {
        min-height: 120vh;
    }
}

@media (min-width: 1023px) and (max-width: 1025px) and (min-height: 767px) and (max-height: 769px) {
    .form__container--left {
        min-height: 88vh;
    }

    .contact__legend {
        padding: 0px 0px 20px 0px !important;
    }

    #form__pic::before {
        height: 56vmin !important;
        width: 56vmin !important;
    }
}

@media (min-width: 900px) and (max-width: 1100px) and (min-height: 1300px) and (max-height: 1400px) {
    .contact__legend {
        padding: 0px 0px 50px 0px !important;
    }

    #form__pic::before {
        height: 56vmin !important;
        width: 56vmin !important;
    }
}

@media (max-width: 768px) {
    #form__pic::before {
        height: 58vmin;
        width: 58vmin;
    }
}



/* ! profile */

.profile__deleteBtn {
    background-color: rgba(0, 0, 0, 0.2) !important;
    width: 100%;
    max-height: 37px;
}