.logoSide,
.logoSide .x-panel,
.formSide {
	background-color: transparent;
}
.loginForm .x-panel-footer.x-panel-btns {
	padding-top: 34px;
}
.logoArea {
	height:100%;
	width:100%;
}
.fr-transparent-login .login {
	background-color: var(--theme-bg-transparent);
	backdrop-filter: blur(5px);
}
.fr-transparent-login .login .x-panel {
	background-color: transparent;
}
#loginLogoImage {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
    height: 100%;
}
.fr-btn-signin {
	font-size:16px;
	padding: 4px 12px;
}

.loginFormTitle {
	font-size: 28px;
	padding-bottom: 24px;
}
#loginText {
	overflow-y: auto;
}

.footerTextPanel .x-panel-body {
	overflow: auto;
}
.footerText {
	color: var(--theme-textLight);
}
.fr-transparent-login .footerText {
	color: var(--theme-text);
}

.login .fr-btn-link:hover {
	text-decoration: underline;
}

.loginFormField {
	font-size:17px;
	height: 38px;
	line-height: 38px;
	padding-left: 10px;
	box-shadow: none;
	border-radius: var(--sBr);
	background-color: transparent;
	backdrop-filter: blur(1px);
	margin-bottom:8px;
	border: 1px solid var(--hBCol);
}
.lang-select {
	color: var(--theme-main);
}
.fr-transparent-login .loginFormField::placeholder {
	color: var(--theme-textLight);
}
.fr-transparent-login .loginFormField {
	border-color: transparent;
}
.loginFormField:focus {
	border-color: var(--theme-main);
}


.fr-touch-only .loginFormField {
	font-size: 22px;
	height: 50px;
}

.loginFormField:-webkit-autofill {
	transition: background-color 5000s ease-in-out 0s;
}

.loginQRCodeWrap {
	margin:10px 0;
	display:inline-block;
	background-image:url(../images/loading.gif);
	background-position: center center;
	background-repeat:no-repeat;
	width:210px;
	height:210px;
}
.forgotPass {
	text-align: right;
	margin-bottom:12px;
}


/*
.login.transparent .x-form-text,
.login.transparent textarea.x-form-field {
	border-color: var(--theme-main);
}

*/

.x-toolbar-left {
	vertical-align: bottom !important;
}