.password-wrapper {
    position: relative;
    width: max-content;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 2.4em;
    box-sizing: border-box;
}

.password-wrapper .toggle-password {
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    user-select:none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    pointer-events: all;
}

.password-wrapper .toggle-password svg {
    width: 260px;
    height: 100%;
    fill: currentColor;
}

div > .password-wrapper {
    margin-left: 260px;
}

.check-password > .password-wrapper {
    margin-left: 0 !important;
}

.margin-forgotten-password {
    margin-left: 0 !important;
}

.relative-position {
    position: relative;
}

div.password-inline > div.label + div.password-wrapper {
    margin-left: 0 !important;
}

div.password-inline > div.label + div.password-input-with-link > div.password-wrapper {
    margin-left: 0 !important;
}

/* -------------------- MOBILE -------------------- */
@media only screen and (max-width:1000px){

    div > .password-wrapper {
        width: 100%;
        margin-left: 0 !important;
        float: none !important;
    }

    div > .password-wrapper input {
        width: 100%;
    }

    div.label + .password-wrapper {
        float: none !important;
    }

    div.label:has(+ .password-wrapper) {
        float: none !important;
    }
}

/* -------------------- DESKTOP -------------------- */
@media only screen and (min-width:1001px){
    .password-inline {
        display: inline-flex;
    }

    .password-input-with-link {
        margin-left: 4px !important;
    }
}