:root {
/* algemene modal settings */
	--inlog-modal_width: calc((2 / 3) * 75vh);
	--inlog-modal_height: 75vh;

/* modal banner settings */
	--inlog-banner_height: calc(var(--inlog-modal_height) *  0.2);

/* modal body settings */
	--inlog-body_height: calc(var(--inlog-modal_height) * 0.7);
	--inlog-body_inputHeight: calc(var(--inlog-body_height) * 0.1);

/* modal footer settings */
	--inlog-footer_height: calc(var(--inlog-modal_height) *  0.1);
}

#inlog-modal ~ #inlog-background {
	display: none;
	width: 100vw;
	height: 100vh;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;

	background-color: #111;
	opacity: 0.0;
}
#inlog-modal.visible ~ #inlog-background {
	display: block;
	opacity: 0.7;
}

#inlog-modal > div {
	display: inline-block;

	width: 100%;

	position: absolute;
	left: 0;
}

#inlog-modal {
	display: block;

	width: var(--inlog-modal_width);
	height: var(--inlog-modal_height);

	box-shadow: 0 0 3vh 0.75vh #333;

	background-color: white;

	position: fixed;
	left: 50%;
	z-index: 1;

	margin-left: calc(var(--inlog-modal_width) / -2);
	margin-top: calc(var(--inlog-modal_height) / -2);

	transform-origin: center calc(var(--inlog-modal_height) / -2);
}

#inlog-modal.visible {
	top: 50%;
	transition: top 1s ease-out, transform 1.5s;
}

#inlog-modal:not(.visible) {
	top: -100vh;
	transition: top 1s;
	transition-timing-function: ease-in, transform 1.5s;
}

#inlog-banner {
	height: var(--inlog-banner_height);

	background-color: var(--primColor);
	z-index: 4;

	top: 0;
}

#inlog-banner-logo {
	display: inline-block;

	width: calc(var(--inlog-banner_height) * 0.9);
	height: calc(var(--inlog-banner_height) * 0.9);

	border-radius: 50%;
	border: calc((0.2vh + 0.2vw) / 2) solid var(--secColor);
	box-shadow: 0 0 3vh 0.75vh #333;

	position: absolute;
	left: 50%;
	top: 10%;
	transform: translate(-50%, -50%);
}

#inlog-banner-text {
	display: inline-block;

	width: 100%;
	height: auto;

	font-size: calc(var(--inlog-banner_height) * 0.3);
	color: #fff;
	text-align: center;

	position: absolute;
	left: 0;
	bottom: 0;
}

#inlog-body {
	height: var(--inlog-body_height);

	top: var(--inlog-banner_height);
}

#inlog-body-form {
	display: inline-block;

	width: 100%;
	max-height: 100%;
	overflow-y: auto;

	text-align: center;

	z-index: 2;

	position: absolute;
	left: 0;
	top: 33%;
	transform: translate(0, -50%);
}

#inlog-body-form > .inputHolder {
	display: inline-block;
	overflow: hidden;

	width: 70%;
	height: var(--inlog-body_inputHeight);

	margin: 1vh;

	border-radius: calc(var(--inlog-body_inputHeight) / 7.5);

	background-color: var(--fieldColor);

	position: relative;
}

#inlog-body-form > .inputHolder > input {
	display: inline-block;

	width: calc(100% - (var(--inlog-body_inputHeight)));
	height: var(--inlog-body_inputHeight);
	padding: 0;

	font-size: calc(var(--inlog-body_inputHeight) * 0.5);
	line-height: var(--inlog-body_inputHeight);
	color: #454545;

	border: 0;

	background-color: inherit;

	position: absolute;
	left: var(--inlog-body_inputHeight);
}

#inlog-body-form > .inputHolder > span {
	display: inline-block;

	width: var(--inlog-body_inputHeight);
	height: calc(var(--inlog-body_inputHeight));

	font-size: calc(var(--inlog-body_inputHeight) * 0.5);
	line-height: calc(var(--inlog-body_inputHeight));
	color: #333;

	position: absolute;
	top: 0;
}

#inlog-body-form > .inputHolder > span#toggle:hover {
	cursor: pointer;
}

#inlog-body-form > .inputHolder > span:first-of-type {
	left: 0;
}

#inlog-body-form > .inputHolder > span:last-of-type {
	right: 0;
}

#inlog-body > span {
	display: inline-block;

	font-size: calc(var(--inlog-body_height) * 0.05 * 0.75);
	line-height: calc(var(--inlog-body_height) * 0.05);
	color: #333;

	position: absolute;
}
#inlog-body-message {
	text-align: center;
	left: 50%;
	bottom: 1%;
	transform: translate(-50%, 0);
}

#inlog-body-error {
	display: inline-block;
	padding-left: calc(var(--inlog-body_height) * 0.01);
	padding-right: 2%;
	overflow: hidden;

	border-radius: 0 0 0 calc(var(--inlog-body_height) * 0.02);

	z-index: 3;

	right: -1px;
	transform: translate(0, -100%);

	transition: top 0.5s, right 0.5s;
}
#inlog-body-error > span {
	display: block;
	height: calc(var(--inlog-body_height) * 0.065);

	padding: 0;
	margin: 0;

	position: relative;
	bottom: calc(var(--inlog-body_height) * 0.33 * 0.065);
}
#inlog-body-error > span > .left-border {
	display: inline-block;
	width: calc(var(--inlog-body_height) * 0.033);
	height: calc(var(--inlog-body_height) * 0.065);
	max-height: calc(var(--inlog-body_height) * 0.065);
	overflow: hidden;
	padding: 0;
	margin: 0;

	font-size: calc(var(--inlog-body_height) * 0.033 * 0.75);
	line-height: calc(var(--inlog-body_height) * 0.033 * 0.75 * 2.25);
	text-align: center;
	color: #eee;

	opacity: inherit;

	position: relative;
	left: calc(var(--inlog-body_height) * -0.01);
	bottom: calc(var(--inlog-body_height) * -0.33 * 0.065);
}

#inlog-footer {
	height: var(--inlog-footer_height);

	background-color: var(--primColor);

	bottom: 0;
}

#inlog-footer-form {
	width: 100%;
	height: 100%;
}

#inlog-footer-form > input {
	width: 30%;
	height: 75%;

	font-size: calc(var(--inlog-footer_height) * 0.75 * 0.5);

	border: 0.5vh solid var(--secColor);
	border-radius: calc(var(--inlog-footer_height) / 7.5);

	background-color: rgba(180, 180, 180, 0.4);
	opacity: 0.8;

	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}

#inlog-footer-form > input:hover {
	cursor: pointer;
}

#inlog-footer-form > input:active {
	box-shadow: inset 0 0 calc((0.6vh + 0.6vw) / 2) 0 #333;
}

#inlog-footer-form > input:first-of-type {
	left: 5%;
}

#inlog-footer-form > input:last-of-type {
	right: 5%;
}