@charset "UTF-8";

:root {
	--surface-a: #ffffff;
	--surface-b: #fafafa;
	--surface-c: rgba(0, 0, 0, 0.04);
	--surface-d: rgba(0, 0, 0, 0.12);
	--surface-e: #ffffff;
	--surface-f: #ffffff;
	--text-color: rgba(0, 0, 0, 0.87);
	--text-color-secondary: rgba(0, 0, 0, 0.6);
	--primary-color: #4c7aa5;
	--primary-color-alert: #d32f2f;
	--primary-color-link: #0066cc;
	--primary-menu-text-color: #4c7aa5;
	--primary-color-hover: #3F6184;
	--primary-lightest-color: #e8eaf6;
	--primary-color-text: #ffffff;
	--font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;

	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-color);
}

h1 {
	font-size: 1.25rem;
}

h2 {
	font-size: 1.25rem;
}

p {
	margin: 0;
}

body {
	height: 100vh;
	margin: 0;
}

header {
	height: 4rem;
	background-color: var(--surface-c);
	box-shadow: 0px 1px 10px rgb(0 0 0 / 12%), 0px 4px 5px rgb(0 0 0 / 14%), 0px 2px 4px -1px rgb(0 0 0 / 20%);
}

main {
	height: calc(100vh - 7rem);
	overflow: auto;
}

footer {
	position: absolute;
	bottom: 0;
	height: 3rem;
	width: 100%;
	align-content: center;
	font-size: 0.75rem;
	background-color: var(--surface-c);
	box-shadow: 0px 4px 10px rgb(0 0 0 / 3%), 0px 0px 2px rgb(0 0 0 / 6%), 0px 2px 6px rgb(0 0 0 / 12%);
}

.footer-link {
	color: var(--primary-color-link);
}


/* Layout header */
/*---------------------------------------------------------------------------*/
.layout-header .grid-container {
	display: grid;
	grid-template-columns: 33.33% 33.33% 33.33%;
	height: 2.5rem;

	padding: 0.75rem;
	align-items: center;
}

.grid-header-item-1 {
	text-align: left;
}

.grid-header-item-2 {
	text-align: center;
}

.grid-header-item-3 {
	text-align: right;
}

.grid-header-item-2 h1 {
	margin: 0;
}

.header-logo {
	float: left;
	height: 2rem;
}


/* content */
/*---------------------------------------------------------------------------*/
.layout-content .grid-container {
	display: grid;
	grid-template-columns: 33.33% 33.33% 33.33%;
}


/* Layout Footer */
/*---------------------------------------------------------------------------*/
.layout-footer .flex-container {
	display: flex;
	flex-wrap: nowrap;
}

.flex-footer-item-1 {
	padding: 1rem 1rem 1rem 1rem;
}

.flex-footer-item-2 {
	padding: 1rem 0.5rem 1rem 1rem;
}

.flex-footer-item-3 {
	padding: 1rem 0.5rem 1rem 0.5rem;
}

.flex-footer-item-4 {
	padding: 1rem 0.5rem 1rem 0.5rem;
}

.flex-footer-item-5 {
	padding: 1rem 1rem 1rem 0.5rem;
}


/* Input */
input[type='text'],
input[type='password'] {
	border-radius: 4px 4px 0 0;
	border: 1px solid transparent;
	border-bottom: 1.5px solid grey;

	background: #f5f5f5 no-repeat;

	background-origin: border-box;
	padding: 0.75rem;
}


input[type='text']:hover,
input[type='password']:hover {
	background-color: #ececec;
}

input[type='text']:focus,
input[type='password']:focus {
	background-color: #ececec;
	outline: none;
	border: 1px solid transparent;
	border-bottom: 2px solid var(--primary-color);

}


/* Button */
button {
	background: var(--primary-color);
	color: var(--primary-color-text);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;

	border: 0 none;
	border-radius: 4px;

	padding: 0.643rem 0.75rem;

	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}


/* Button Ripple effect */
#next {
	background-position: center;
	transition: background 0.8s;
}

#next:hover {
	background: var(--primary-color-hover) radial-gradient(circle, transparent 1%, var(--primary-color-hover) 1%) center/15000%;
}

#next:active {
	background-color: var(--primary-color-hover);
	background-size: 100%;
	transition: background 0s;
	outline: none;
}

#next:focus {
	background-color: var(--primary-color-hover);
	background-size: 100%;
	transition: background 0s;
	outline: none;
}


/* desktop */
/*---------------------------------------------------------------------------*/
@media (max-width: 1024px) {
	.layout-header .grid-container {
		display: grid;
		grid-template-columns: 25% 50% 25%;
	}

	.layout-content .grid-container {
		display: grid;
		grid-template-columns: 25% 50% 25%;
	}
}


/* small desktop */
/*---------------------------------------------------------------------------*/
@media (max-width: 992px) {
	.layout-header .grid-container {
		display: grid;
		grid-template-columns: 20% 60% 20%;
	}

	.layout-content .grid-container {
		display: grid;
		grid-template-columns: 20% 60% 20%;
	}
}


/* Tablet and mobile */
/*---------------------------------------------------------------------------*/
@media (max-width: 768px) {

	.layout-header .grid-container {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 50% 50%;

		height: 3rem;
		padding: 0.5rem 0.75rem 0.5rem 0.75rem;
	}

	.grid-header-item-1 {
		text-align: left;
	}

	.grid-header-item-2 {
		text-align: center;
	}

	.grid-header-item-3 {
		display: none;
	}

	.header-logo {
		height: 1.25rem;
	}

	.layout-header h1 {
		font-size: 1.25rem;
	}

	section {
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}

	.layout-content .grid-container {
		display: grid;
		grid-template-columns: 100%;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.grid-content-item-1 {
		display: none;
	}

	.grid-content-item-3 {
		display: none;
	}


	.flex-footer-item-2 {
		display: none;
	}

	.flex-footer-item-3 {
		display: none;
	}

	.flex-footer-item-4 {
		display: none;
	}

	.create a {
		margin-left: 0;
	}
}


/* Login, [data-name="unified"] */
/*---------------------------------------------------------------------------*/
div.heading {
	display: none;
}

a:focus {
	border: 0 none;
}

.helpLink {
	display: none;
}

.error p {
	color: var(--primary-color-alert);
}

#forgotPassword,
#createAccount {
	color: var(--primary-color-link);
}

div.entry-item {
	display: flex;
	flex-direction: column;
}

input#signInName {
	margin: 0.25rem 0 2rem 0;
}

#forgotPassword {
	float: right;
}

input#password {
	margin: 0.25rem 0 2rem 0;
	width: 100%;
	box-sizing: border-box;
}

div.rememberMe {
	display: none;
}

input#rememberMe {
	margin-bottom: 2rem;
}

.create {
	margin-top: 3rem;
}

.create a {
	margin-left: 0.5rem;
}

.divider h2 {
	display: none;
}

form i {
	margin-left: -30px;
	cursor: pointer;
}


/* Sprachen */
/*---------------------------------------------------------------------------*/
.language {
	display: none;
}

.language-de:lang(de) {
	display: inherit !important;
}

.language-en:lang(en) {
	display: inherit !important;
}

.language-fr:lang(fr) {
	display: inherit !important;
}

.language-it:lang(it) {
	display: inherit !important;
}