* {
    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 : transparent;
    height           : 100vh;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    padding          : 20px;
    overflow         : auto;
}
.centiva-login > div {
	width            : 100%;
    display          : flex;
    flex-direction   : column;
	background-color : #ffffff99;
	padding          : 20px;
	border-radius    : 10px;
	backdrop-filter  : blur(5px);
}
.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     : 120%;
	color         : var(--color-main);
	font-weight   : normal;
}
h4 {
    margin-top    : 40px;
    margin-bottom : 40px;
    font-size     : 110%;
	color         : var(--color-main);
	font-weight   : bold;
}
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);
}
input:read-only {
	background-color : var(--color-lightgrey);
}
.lgn-btn {
    margin-top    : 30px;
    margin-bottom : 20px;
}
button {
    position         : relative;
    width            : 100%;
    padding          : 10px;
    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    : 5px;
}
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;
}
button.secondary {
    background-color : var(--color-clear);
    color            : var(--color-main);
}
button.link {
    position         : relative;
    width            : 100%;
    padding          : 0;
    border           : none;
    border-radius    : 0;
    background-color : var(--color-clear);
    color            : #0000ee;
    font-size        : 14px;
	text-decoration  : underline;
    font-weight      : normal;
    cursor           : pointer;
    overflow         : hidden;
    margin-bottom    : 0;
}
.lgn-errors, #lgn_errors {
    margin : 5px;
    color  : var(--color-alert);
}
.lgn-errors:empty {
	display : none;
}
.lgn-link {
	padding          : 0;
    margin           : 0;
    border           : none;
    background       : none;
    background-color : transparent !important;
    cursor           : pointer;
	text-decoration  : underline;
}
.lgn-link-spacer {
	margin : 10px;
}
.image-container {
    z-index     : 5;
    height      : 100vh;
    overflow    : hidden;
    /* width       : calc(100vw - 480px); */
    /* margin-left : 480px; */
    position    : relative;
}
.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;
    }
}