#connexionPopUpArea {
    justify-content: center;
    align-items: center;
    justify-items: center
}

#connexionPopUpPage {
    width:calc(30vw - 20px);
    height:fit-content;

    padding:10px;
    background-color: var(--fake-white);
}

.connexionForm {
    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: center;

    grid-column: 1;
    grid-row: 1;
    
    width: 100%;
}

.connexionInputDiv {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    margin-top:25px;
    margin-bottom:25px;
}

.connexionSubmitDiv {
    display:flex;
}

.connexionInputLabel {
    font-weight: 600;
    color: var(--fake-black);
    width: 100%;
    margin-bottom: 2.5px;
}

.connexionInputText {
    border: 1px solid var(--plain-grey);
    border-radius: 5px;
    padding: 7.5px 5px;
    font-weight: 500;
    margin-top: 5px;
    width: calc(100% - 16px);
}

.connexionInputSubmit {
    background-color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    color: var(--fake-white);

    width: fit-content;
    padding: 10px 10px;
    border-radius: 5px;

    font-weight:bold;
    cursor: pointer;
}

#mdpOubliePopUpArea {
    justify-content: center;
    align-items: center;
    justify-items: center
}

#mdpOubliePopUpPage {
    width: calc(30vw - 20px);
    height: fit-content;

    padding: 10px;
    background-color: var(--fake-white);
}

#envoiMailForm .buttonDiv {
    display:flex;
    justify-content: space-between;
}

@media only screen and (max-width: 1100px) {
    #connexionPopUpPage {
        width: calc(50vw - 20px);
    }

    #mdpOubliePopUpPage {
        width: calc(50vw - 20px);
    }
}

@media only screen and (max-width: 700px) {
    #connexionPopUpPage {
        width: calc(75vw - 20px);
    }

    #mdpOubliePopUpPage {
        width: calc(75vw - 20px);
    }

    .remedioCancelInput {
        padding: 5px 10px!important;
    }

    .remedioSubmitInput {
        padding: 5px 10px!important;
    }
}