:root {
				--cuscol: #87c43e;
				--progh: 50px;
				--footer: 50px;
				--navtop: 2vh;
				/*--max: 100%;*/
			}
			* {
				margin: 0; padding: 0;
				box-sizing: border-box;
				font-size: 16px;
				font-family: 'Calibri';
			}
			img {
				width: var(--max); height: var(--max);
				object-fit: contain;
			}
			select, input, button {
				outline: none;
			}
			._textbox {
				border: 1px solid transparent;
				border-bottom: 1px solid #ccc;
				padding:  8px 10px;
				background: transparent;
			}

			.prog {
				width: 100vw; height: var(--progh);
				/*margin-top: var(--navtop);*/
				margin: calc(var(--navtop) - 1vh) auto var(--navtop);

				/*position: fixed;*/
				/*top: 1vh;*/

				display: flex;
				justify-content: center;
			}
			.prog .progicon {
				width: var(--progh); height: var(--progh);
				margin: 0 15px;

				border-radius: 50%;
				/*border: 1px solid #ccc;*/
				box-shadow: 0 0 1px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3);

				/*overflow: hidden;*/
			}
			.progicon .label {
				text-align: center;
				display: block;
				width: 100%; height: 30px;

				display: flex;
				justify-content: center;
				align-items: center;
			}
			.progicon .label span {
				font-size: 10px;
			}

			.loginwrapper {
				width: 100vw; height: calc(100vh - (var(--navtop) + (var(--progh)*1.5) + var(--footer)));
				position: relative;
				padding: 0 15vw;

				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.loginwrapper > div {
				width: calc(100% / 2); height: inherit;

				display: flex;
				justify-content: center;
				align-items: center;
			}
			.left {
				flex-direction: column;
			}
			.logo {
				width: 400px; height: 160px;
				margin: 20px auto;
				/*border: 1px solid #000;*/
			}
			.companyname {
				color: var(--cuscol);
				font-size: 25px;
			}

			.logincontainer {
				width: 400px; height: 440px;
				background: #fff;
				padding: 10px 20px;

				border-radius: 10px;
				box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 2px 1px rgba(0,0,0,0.1);
			}
			.logincred {
				width: var(--max);
				margin: 40px 0 25px;
			}
			.top header {
				font-size: 28px;
			}
			.inputwrapper {
				width: var(--max); height: auto;
				display: flex;
				align-items: center;
				margin: 35px 0;
				position: relative;
			}
			.inputwrapper input,
			.inputwrapper select
			{
				width: var(--max);
				z-index: 2;
				padding: 8px 1px;

				font-weight: bold;
			}
			.inputwrapper span {
				display: block;
				width: var(--max);
				position: absolute;
				z-index: 1;
				color: #999;

				transition: all 0.3s;
			}
			.inputwrapper .underline {
				position: absolute;
				bottom: -1px; left: 0;

				width: var(--max); height: 1px;
				background: #87c43e;

				transition: transform 0.3s, opacity 0.1s;
				transform: scaleX(0);
				opacity: 0;
			}
			.inputwrapper .underline.full {
				transform: scaleX(1);
				opacity: 1;
			}

			.btngrp {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.loginbtn, .loginbtn * {
				cursor: pointer;
			}
			.loginbtn {
				position: relative;
				overflow: hidden;
				background: var(--cuscol);
			}
			.loginbtn input {
				width: 100px;
				padding: 6px 0;
				color: #fff;

				border: none;
				background: transparent;
				position: relative;
				z-index: 2;
			}
			.licagrmnt {
				color: #6abf05;
				cursor: pointer;
			}
			.licagrmnt_container {
				position: fixed;
				top: 0; left: 0;

				width: 100vw; height: 100vh;
				padding: 0 25vw;
				background: #fff;
				z-index: 100;

				overflow: auto;
				counter-reset: x;
			}
			.licagrmnt_container > header {
				/*position: absolute;*/
				/*top: 0; left: 0;*/

				width: 100%; height: auto;
				font-size: 25px;
				padding: 10px 0 15px;
				font-weight: bold;
				text-align: center;
				border-bottom: 1px solid #ccc	;

				display: flex;
				justify-content: center;
				align-items: center;
			}
			.licagrmnt_container article {
				padding: 15px 0 100px;
			}
			.licagrmnt_container article .xcount::before {
				counter-increment: x;
				content: counter(x) '. ';
			}
			.licagrmnt_container article section {
				margin-bottom: 40px;
			}
			.licagrmnt_container article section > label {
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 15px;
				display: block;
			}
			.licagrmnt_container article section p {
				text-indent: calc(20px * 2);
				line-height: 1.4;
				margin-bottom: 15px;
			}
			.licagrmnt_container article section p,
			.licagrmnt_container article section li {
				text-align: justify;
			}
			.licagrmnt_container article section strong {
				text-align: center;
			}
			.licagrmnt_container article section ul.circle {
				list-style-type: circle;
				padding: 0 0 0 20px;
			}
			.licagrmnt_container > div {
				position: fixed;
				bottom: 0; left: 0;

				width: 100%; height: 50px;
				background: #fff;

				display: flex;
				justify-content: center;
				align-items: center;
			}
			.licagrmnt_container > div:after {
				/*content: '';*/

				width: 100vw; height: 70px;
				background: linear-gradient(transparent, rgba(0,0,0,0.5));
				position: absolute;
				z-index: -1;
			}
			.closebtn {
				width: 60px; height: 60px;
				border-radius: 50%;

				position: absolute;
				bottom: 7vh;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;

				background: #fff;
				transition: all 0.3s;
			}
			.closebtn svg {
				/*width: 100%; height: 100%;*/
				transform: scale(0.4);
				stroke: #000;
				stroke-width: 3;
				transition: all 0.3s;
			}
			.closebtn:hover {
				background: #87c43e;
			}
			.closebtn:hover svg {
				stroke: #fff;
			}

			footer {
				width: 100%; height: var(--footer);
				/*position: fixed;*/
				/*bottom: 0; left: 0;*/

				display: flex;
				justify-content: center;
				align-items: center;

				background: transparent;
			}

			.inputwrapper span.inputfocus {
				transform: translate(-35px, -25px) scale(0.8);
				font-weight: bold;
				color: var(--cuscol);
			}
			.explode {
				display: block; position: absolute;
				background: hsl(90, 53%, 40%);
				border-radius: var(--max);
				transform: scale(0);
				z-index: 1;
			}
			.explode.animate {
				animation: explodeAnimate 0.65s linear;
			}
			@keyframes explodeAnimate {
				100% {opacity: 0; transform: scale(2.5);}
			}

			._fadeout {
				opacity: 0;
			}
			._strtoupper {
				text-transform: uppercase;
			}

			@media only screen and (max-width: 1024px) {
				.licagrmnt_container {
					padding: 0 15vw;
				}
				.licagrmnt_container header {
					padding: 5px 0 10px;
				}
			}
			@media only screen and (max-width: 850px) {
				.loginwrapper {
					align-items: center;
					flex-direction: column;
					height: auto;
					padding: 0;
				}
				.left {
					margin: 4vh 0;
				}
				.loginwrapper > div {
					width: calc((100% / 3) * 2);
				}
				.logo {
					width: 300px; height: 120px;
				}
				footer {
					margin-top: 6vh;
				}
				.licagrmnt_container {
					padding: 0 5vw;
				}
				.licagrmnt_container header {
					padding: 2px 0 5px;
				}
			}
			@media only screen and (max-width: 600px) {
				.companyname {
					display: none;
				}
			}
			@media only screen and (max-width: 480px) {
				.loginwrapper > div {
					width: calc((100% / 7) * 6);
				}
			}