@import url("https://fonts.googleapis.com/css2?family=Poppins");
*{
margin: 0;
padding: 0; box-sizing: border-box;
font-family:
Poppins, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #a1d3a27d, #c9d6ff);
}
:where(.container, form, .input-field, header) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container {
    background: #fff;
    padding: 35px 65px 50px 65px;
    border-radius: 20px;
    row-gap: 20рх;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}
    .container header {
        height: 122px;
        width: 124px;
        background-image: url('/img/check.gif');
        background-size: cover;
        background-position: center;
    }
    .container .header {
        height: 73px;
        width: 82px;
        background-image: url(/img/email3.gif);
        background-size: 73px;
        background-position: center;
    }
    .container .mdp {
        height: 73px;
        width: 82px;
        background-image: url(/img/mdp.gif);
        background-size: 73px;
        background-position: center;
    }
        .container h4 {
    font-size: 1.25rem;
    color: #333;
    font-weight: 500;
}
.container p {
    max-width: 250px;
    text-align: center;
    font-size: 13px;
}
    •container p a {
        color: #4FAAFA;
        text-decoration: none;
    }
.container p a:hover {
    text-decoration: underline;
}
.otp .input-field {
    flex-direction: row;
    column-gap: 10px;
}

.otp .input-field input {
    height: 50px;
    width: 43px;
    border-radius: 13px;
    outline: nones;
    font-size: 1.125rem;
    text-align: center;
    border: 1px solid #ddd;
}

.otp input-field input:focus {
    box-shadow: 0 1px 0 rgba(o, 0, 0, .1);
}

.otp .input-field input::-webkit-inner-spin-button,
.otp .input-field input::-webkit-outer-spin-button {
    display: none;
}

.otp button {
    margin-top: 25px;
    margin-bottom: 15px;
    width: 100%;
    color: #fff;
    font-size: 1rem;
    border: none;
    padding: 9px 0;
    cursor: pointer;
    border-radius: 15px;
    pointer-events: none;
    background: #66a9af;
    opacity: -5;
    transition: all 0.2s ease;
}

    .otp button.active {
        opacity: 1;
        pointer-events: auto;
    }

    .otp button:hover {
        background: #a1d3a2;
    }


form .input-field {
    flex-direction: row;
    column-gap: 10px;
}
    form .input-field input {
        height: 50px;
        width: 43px;
        border-radius: 13px;
        outline: nones;
        font-size: 1.125rem;
        text-align: center;
        border: 1px solid #ddd;
    }
form input-field input:focus {
    box-shadow: 0 1px 0 rgba(o, 0, 0, .1);
}
form .input-field input::-webkit-inner-spin-button,
form .input-field input::-webkit-outer-spin-button {
    display: none;
}
form button{
    margin-top: 25px;
    margin-bottom: 15px;
    width: 100%;
    color: #fff;
    font-size: 1rem;
    border: none;
    padding: 9px 0;
    cursor: pointer;
    border-radius: 15px;
    pointer-events: none;
    background: #66a9af;
    opacity: -5;
    transition: all 0.2s ease;
}
    form button.active {
        opacity: 1;
        pointer-events: auto;
    }
    form button:hover {
        background: #a1d3a2;
    }
.submit {
    margin-bottom: 15px;
    width: 100%;
    color: #fff;
    border: none;
    padding: 12px 31px;
    cursor: pointer;
    border-radius: 15px;
    background: #66a9af;
    transition: background 0.2s ease;
}
    .submit:hover {
        background: #50888f;
    }
.change-mdp {
    margin-bottom: 15px;
    width: 100%;
    color: #fff;
    border: none;
    padding: 12px 31px;
    cursor: pointer;
    border-radius: 15px;
    background: #fc8d01;
    transition: background 0.2s ease;
}
    .change-mdp:hover {
        background: #fc8d01;
    }
.inputfield {
    display: flex;
    margin-bottom: 15px;
}

.input-group-text {
    background-color: #007bff; /* Couleur de fond du conteneur de l'icône */
    color: #fff; /* Couleur du texte de l'icône */
    border: 1px solid #007bff; /* Bordure du conteneur de l'icône */
    border-radius: 0.2rem; /* Bordure arrondie */
    padding: 0.375rem 0.75rem; /* Rembourrage du conteneur de l'icône */
}

.form-control {
    flex: 1; /* L'élément prend tout l'espace disponible */
    border: 1px solid #ced4da; /* Bordure du champ de saisie */
    border-radius: 0.2rem; /* Bordure arrondie */
    padding: 0.375rem 0.75rem; /* Rembourrage du champ de saisie */
    font-size: 1rem; /* Taille de la police du champ de saisie */
}

/*Footer*/
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 50px;
    height: 50px;
}