* {
    margin      : 0;
    padding     : 0;
    font-family : Helvetica;
    font-size   : 14px;
    outline     : none;
    box-sizing  : border-box;
}
body {
    background-color : var(--color-app-bg);
}
.centiva-login {
    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-login > div {
    display        : flex;
    flex-direction : column;
}
.centiva-login > div > img {
    margin-right : 0;
    align-self   : center;
}
.centiva-login > 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);
}
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
}
#lgn_errors {
    margin     : 5px;
    color      : var(--color-alert);
    /* text-align : left; */
    /* font-size  : 85%; */
}
.image-container {
    z-index     : 5;
    height      : 100vh;
    overflow    : hidden;
    width       : calc(100vw - 480px); /* 2021-11-24 */
    margin-left : 480px; /* 2021-11-24 */
    position    : relative; /* 2021-11-24 */
}
.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-login {
        width : 100vw;
    }
    .bottom-right-logo {
        opacity : 0;
    }
}
@media (max-height : 640px) {
    .centiva-login {
        align-items : flex-start;
    }
}