* {
    margin           : 0;
    padding          : 0;
    font-family      : Helvetica;
    font-size        : 14px;
    outline          : none;
    box-sizing       : border-box;
}
body {
    background-color : var(--color-bg);
}
.centiva-forgotpw {
    z-index          : 10;
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 480px;
    background-color : var(--color-clear);
    height           : 100vh;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    padding          : 20px;
    overflow         : auto;
}
.centiva-forgotpw > div {
    display          : flex;
    flex-direction   : column;
    flex-grow        : 1;
    margin           : 0 40px;
}
.centiva-forgotpw > div > img {
    margin-right     : 0;
    align-self       : center;
    max-height       : 50vh;
    max-width        : 400px;
}
.centiva-forgotpw > div > div {
    flex-grow        : 1;
    margin-left      : 0;
    text-align       : center;
}
h3 {
    margin-top       : 40px;
    margin-bottom    : 40px;
    font-size        : 160%;
    color            : var(--color-main);
}
.fpw-text {
    margin           : 0 40px 40px;
}
input {
    width            : 100%;
    padding          : 10px;
    margin-top       : 10px;
    box-sizing       : border-box;
    border           : 1px solid var(--color-lightgrey);
    border-radius    : 4px;

}
input:focus {
    border-color     : var(--color-grey);
}
button {
    position         : relative;
    width            : 100%;
    padding          : 10px;
    margin-top       : 30px;
    border           : 1px solid var(--color-main);
    border-radius    : 4px;
    background-color : var(--color-main);
    color            : var(--color-clear);
    font-weight      : bold;
    cursor           : pointer;
    overflow         : hidden;
    margin-bottom    : 20px;
}
button:after {
    content          : "";
    background       : var(--color-btnfade);
    display          : block;
    position         : absolute;
    opacity          : 0;
    transition       : all 0.8s;
    width            : 100%;
    height           : 100%;
    top              : 0;
    left             : 0;
}
button:active:after {
    opacity          : 1;
    transition       : 0s
}
#fpw_errors {
    margin           : 5px;
    color            : var(--color-alert);
    /* text-align       : left; */
    /* font-size        : 85%; */
}
.image-container {
    z-index          : 5;
    width            : 100vw;
    height           : 100vh;
    overflow         : hidden;
}
.image-container > img {
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    object-fit       : cover;
    transition       : opacity 1s;
}
.bottom-right-logo {
    z-index          : 10;
    position         : fixed;
    bottom           : 20px;
    right            : 50px;
}
@media (max-width : 860px) {
    .centiva-forgotpw {
        width        : 100vw;
    }
    .bottom-right-logo {
        opacity      : 0;
    }
}
@media (max-height : 640px) {
    .centiva-forgotpw {
        align-items  : flex-start;
    }
}