:root{
	--mdc-theme-primary: #000050;
	--mdc-theme-error: #f81d1d;
	--mdc-theme-secondary: #cfd8dc;
	--ekc-bank-logo: none;

	--ekc-text-color: rgba(0, 0, 0, 0.87);
	--ekc-note-color: #6e6e6e;
	--ekc-note-size: 12px;

	--mdc-theme-background: #fafafa;

	--mdc-typography-font-family: Roboto, sans-serif;
	--mdc-typography-font-style: normal;
	--mdc-typography-font-weight: 400;
	--mdc-typography-font-size: 14px;
	--mdc-typography-line-height: 20px;

	--mdc-typography-headline1-line-height: 32px;
	--mdc-typography-headline1-font-size: 24px;

	--mdc-text-button-label-text-color: var(--ekc-text-color);
	--mdc-text-button-label-text-transform: none;
	--mdc-outlined-button-label-text-color: var(--ekc-text-color);
	--mdc-outlined-button-label-text-transform: none;
}

body {
	position: absolute;
	font-family: var(--mdc-typography-font-family);
	font-size: var(--mdc-typography-font-size);
	line-height: var(--mdc-typography-line-height);
	margin: 0;
	width: 100%;
	height: 100%;
	color: rgba(0, 0, 0, 0.87);
}


.ekc-root{
	display: grid;
	height: 100%;
	grid-template-rows: minmax(70px, 1fr) auto minmax(40px, 1fr);
	grid-template-columns: auto minmax(200px, 500px) auto;
	grid-gap: 1.5rem;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.5s;
}


.ekc-root > *{
	grid-column: 2;
	align-self: end;

}

.ekc-header{
	width:100%;
}

.ekc-main{
	width:100%;
	align-self: center;
	padding: 1rem;
}


footer{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	margin-bottom: 1.5rem;
	width:100%;
}

.ekc-footer{
	grid-column: 2;
}

.ekc-main header{
	padding-bottom: 20px;
	width: 100%;
	text-align: center;
}

.ekc-form > *{
	margin: auto;
	padding: 0.5rem;
}

.ekc-info,
.ekc-message{
	padding: 0.5rem 0.5rem 1rem 0.5rem;
}

.ekc-message.alert-error{
	color: var(--mdc-theme-error);
}

.ekc-form-group > *{
	width: 100%;
}

button:not(:hover){
	background-color: #fff;
}

button{
	outline: none;
	cursor: pointer;
}

button:focus-visible{
	outline: 2px solid var(--mdc-theme-primary);
}

.ekc-main-button{
	padding-top: 1rem;
}

.ekc-sub-buttons .mdc-button__label{
	font-size: var(--ekc-note-size);
	color: var(--ekc-note-color);
}

.ekc-sub-buttons{
	display: grid;
	-webkit-align-content: center;
}

.ekc-sub-buttons > * > a{
	min-width: 200px;
}

.ekc-sub-buttons > * {
	display: grid;
	align-content: center;
}

@media only screen and (min-width: 460px) {
	.ekc-sub-buttons{
		display: flex;
		justify-content: center;
	}

	.ekc-sub-buttons > *{
		width: fit-content;
	}
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{
	color: var(--ekc-text-color);
}

.mdc-button--outlined .mdc-button__icon{
	transform: translateY(3px);
}

.ekc-logo{
	background-image: var(--ekc-bank-logo);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 70px;
	width: 100%;
	margin: 0 auto;
}

.ekc-form-item {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	justify-items: center;
	width: 100%;
}

li .ekc-form-item {
	margin-left: -20px;
}

.ekc-form-item > *{
	grid-column: 2;
}

#ekc-qr-code {
	max-width: fit-content;
	max-height: fit-content;
}

#ekc-totp-settings {
	margin: 0;
}

#ekc-totp-settings > li {
	padding-bottom: 20px;
}

ul > li {
	list-style-type: disc;
}

.ekc-input-error{
	color: var(--mdc-theme-error);
	font-size: var(--ekc-note-size);
	text-indent: 16px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.instruction{
	text-align: center;
}

.ekc-list-item{
	line-height: 48px;
}


.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{
	color: var(--mdc-theme-primary);
}

.ekc-invalid.mdc-text-field .mdc-text-field__icon--trailing,
.ekc-invalid.mdc-text-field .mdc-floating-label,
.ekc-invalid.mdc-text-field--focused .mdc-floating-label{
	color: var(--mdc-theme-error);
}

.ekc-invalid.mdc-text-field--outlined .mdc-notched-outline__leading,
.ekc-invalid.mdc-text-field--outlined .mdc-notched-outline__notch,
.ekc-invalid.mdc-text-field--outlined .mdc-notched-outline__trailing,
.ekc-invalid.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,
.ekc-invalid.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,
.ekc-invalid.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{
	border-color: var(--mdc-theme-error);
}