@charset "utf-8";

body {
	font-family: Arial;
	font-family: Arial, Verdana, Univers;
}

/* START OF STYLESHEET FOR LOGIN SCREEN */

	.loginformleft {
		visibility: hidden;
		display: none;
	}

	.latestnews {
		visibility: hidden;
		display: none;
	}

	.complogo1 {
		visibility: hidden;
		display: none;
	}

	.complogo2 {
		visibility: hidden;
		display: none;
	}

	.complogo3 {
		visibility: hidden;
		display: none;
	}

	.complogo4 {
		visibility: hidden;
		display: none;
	}

	.complogo5 {
		visibility: hidden;
		display: none;
	}

	.loginformright {
		position: fixed;
		left: 1dvw;
		top: 1dvh;
		height: 50dvh;
		width: 98dvw;
	}

	.loginformoffice {
		position: fixed;
		top: 30dvh;
		font-size: 2vh;
		font-family: Arial;
		font-family: Arial, Verdana, Univers;
		text-align: left;
		left: 0;
		height: 21dvh;
		width: 70dvw;
		margin-left: 15dvw;
		padding-top: 1.3dvh;
		z-index: 1;
	}

	.loginlogo {
		visibility: hidden;
		display: none;
	}

	.rightbackground {
		visibility: hidden;
		display: none;
	}

	.mobilelogoarea {
		visibility: hidden;
		display: none;
	}

	.mobilelogoarea2 {
		visibility: hidden;
		display: none;
	}

	.mobilebackground {
		position: fixed;
		top: 0dvh;
		left: 0dvw;
		width: 100dvw;
		height: 100dvh;
		background-image: url(images/taiosbackground.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto auto;
		z-index: 0;
		opacity: 0.2;
	}

	.mobilecomparea {
		position: fixed;
		top: 88dvh;
		left: 1dvw;
		width: 98dvw;
		height: 6dvh;
		text-align: center;
		z-index: 1;
	}

	/* LOGIN FORM INPUTS */

		input[type=text], select {
			width: 100%;
			height: 3.8dvh;
			padding-left: 10px;
			display: inline-block; 
			border: 0px solid white;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient(to left, transparent, #73a9da, transparent);
			border-image-slice: 1;
			font-family: arial;
			font-size: 1.6dvh;
		}

		input[type=text]:hover {
			translate: 0 1px;
		}

		#logininput {
			font-size: 1.5dvh;
			font-family: Arial;
			font-family: Arial, Verdana, Univers;
			text-align: left;
			padding-left: 10px;
			width: 100%;
			margin-top: 1.3dvh;
			height: 4.1dvh;
			border: none;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient(to left, transparent, #73a9da, transparent);
			border-image-slice: 1;
			box-shadow: 0px 1px 3px 1px lightblue;
			border-radius: 100px 100px 100px 100px;
			background-color: #eaf5fe;
			z-index: 100;
		}

		#logininput:hover {
			translate: 0 1px;
		}

		#passwordinput {
			font-size: 1.5dvh;
			font-family: Arial;
			font-family: Arial, Verdana, Univers;
			text-align: left;
			padding-left: 10px;
			width: 100%;
			margin-top: 1.3dvh;
			height: 4.1dvh;
			border: none;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient(to left, transparent, #73a9da, transparent);
			border-image-slice: 1;	
			box-shadow: 0px 1px 3px 1px lightblue;
			border-radius: 100px 100px 100px 100px;
			background-color: #eaf5fe;
			z-index: 100;
		}

		#passwordinput:hover {
			translate: 0 1px;
		}

	/* END OF LOGIN FORM INPUTS */

	/* LOGIN FORM BUTTONS */

		button[type=submit] {
	  		width: 100%;
	  		background-position: right;
			background-size: 200%;
			background-image: linear-gradient(to right, #004fa1 50%, #EAf7FF 0%, #EAf7FF 50%);
			transition: color 0.3s ease-in-out;color: #004fa1;
	  		color: #004fa1;
	  		border: 0px solid white;
			cursor: pointer;
		}

		button[type=submit]:hover {
			background-position: left;
			transition-property: background-position, color;
			transition-timing-function: 0.3 ease-in-out;
		 	color: #EAf7FF;
		 	translate: 0 1px;
		}

		#loginbutton {
			width: 100%;
			font-size: 1.9dvh;
			margin-top: 1.3dvh;
			padding-right: 10px;
			height: 4.1dvh;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient(to left, transparent, #73a9da, transparent);
			border-image-slice: 1;
			box-shadow: 0px 1px 3px 1px lightblue;
			border-radius: 100px 100px 100px 100px;
			background-color: #eaf5fe;
			z-index: 100;
		}

		#loginbutton:hover {
			translate: 0 1px;
		}

	/* END OF LOGIN FORM BUTTONS */

	/* COOKIE AREA */

		#cookiewording { 
			grid-area: wording; 
			padding: 0 10%; 
			height: auto;
			visibility: visible;
		}
		
		#cookieaccept { 
			grid-area: accept;
			height: auto;
			visibility: visible;
			padding-left: 50%;
		}
		
		#cookiereject { 
			grid-area: reject; 
			height: auto;
			visibility: visible;
			padding-right: 50%;
		}
		
		#cookiewarning { grid-area: warning; 
			padding: 0 10%; 
			height: 0px;
			visibility: hidden;
		}

		#cookiecontainer {
			display: grid;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			grid-template-areas:
			'wording wording'
			'accept reject'
			'warning warning';
			background-color: #f7fcff;
			column-gap: 20px;
			row-gap: 2.7vh;
			z-index: 100;
			height: auto;
			visibility: visible;
			font-size: 1.9vh;
		}

		.cookiecontainer > div {
			background-color: #2196F3;
			text-align: center;
			font-size: 1.6vh;
		}

		/* COOKIE BUTTONS */

			#cookiebut {
				font-size: 1.8vh;
				width: 100%;
				height: 100%;
				border: none;
				border-bottom: 1px solid transparent;
				border-image: linear-gradient(to left, transparent, #73a9da, transparent);
				border-image-slice: 1;
				border-radius: 0.4vh;
				border-radius: 100px 100px 100px 100px;
			}

		/* END OF COOKIE BUTTONS */

	/* END OF COOKIE AREA */

/* END OF STYLESHEET FOR LOGIN SCREEN */