@charset "utf-8";

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

/* START OF STYLESHEET FOR LOGIN SCREEN */

	.loginformleft {
		position: fixed;
		float: left;
		left: 0;
		top: 0;
	/*	background-color: #0000a0; */
		background-image: url(images/taiosbackground30.jpg);
		background-size: 100% 100%;
		height: 100%;
		width: 30%;
		padding-left: 1%;
		padding-right: 1%;
		padding-bottom: -5%;
		text-align: center;
		align-items: center;
	}

	.latestnews {
		background-image: linear-gradient(to left, transparent, white, white, white, white, white, white, white, white, white, white, white, white, white, white, white, transparent); 
/*		background-color: white; */
		font-size: 2svh;
		left: 0%;
		width: 97%;
		height: 7.9svh;
		position: absolute;
		margin: auto;
		text-align: left;
		top: calc(50% - 6.8svh);
		padding-left: 0.5vw;
		padding-right: 0.5vw;
		color: blue;
	}

	.alertsbanner {
		background-image: linear-gradient(to left, transparent, rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), rgba(219,72,51,0.1), transparent); 
		font-size: 2svh;
		left: 0%;
		width: 90%;
		height: 7.9svh;
		position: absolute;
		top: calc(50% + 1.8svh);
		padding-left: 1.5vw;
		padding-right: 1.5vw;
		color: rgba(219,72,51);
		text-align: center;
		align-content: center;
	}

	#alerttimer {
		background-color: rgba(0, 0, 0, 0);
		font-size: 5svh;
		left: 0%;
		width: 91%;
		height: 7.9svh;
		position: absolute;
		top: calc(50% + 10.4svh);
		padding-left: 1.5vw;
		padding-right: 1.5vw;
		color: #bde0fe;
		text-align: center;
		align-content: center;
	}

	/* Container styles */
	.scrolling-text-container {
	    overflow: hidden;
	}

	/* Inner container styles */
	.scrolling-text-inner {
	    display: flex;
	    white-space: nowrap;
	    font-size: 2svh;
	    padding: 2.7svh 0;
	    color: #73a9da;
	}

	/* Text styles */
	.scrolling-text {
	    display: flex;
	}

	.scrolling-text-item {
	    padding: 0 15px;
	}

	/* Apply the animation to the text items */
	.scrolling-text-inner>div {
	    animation: var(--direction) var(--marquee-speed) linear infinite;
	}

	/* Pause the animation when a user hovers over it */
	.scrolling-text-container:hover .scrolling-text-inner>div {
	    animation-play-state: paused;
	}

	/* Setting the Animation using Keyframes */
	@keyframes scroll-left {
	    0% {
	        transform: translateX(40%);
	    }

	    100% {
	        transform: translateX(-100%);
	    }
	}

	.complogo1 {
		position: fixed; 
		bottom: 0; 
		width:29%; 
		text-align: center;
		padding-right: 1.3svh; 
		margin-top: 1.3svh;
		color: silver; 
		font-size: 3.4svh;
	}

	.complogo2 {
		font-style: italic; 
		color: silver; 
		font-size: 0.9svh;
	}

	.complogo3 {
		color: silver; 
		font-size: 3.4svh;
	}

	.complogo4 {
		ont-style: bold; 
		color: #960000; 
		font-size: 3.4svh;
		margin-left: -1svh;
	}

	.complogo5 {
		position: fixed; 
		bottom: 0; 
		width:29%; 
		text-align: center; 
		padding-right: 1.3svh; 
		margin-top: 1.3svh;
		font-style: italic; 
		font-size: 1.2svh;
		color: silver;
	}

	.loginformright {
		position: fixed;
		float: right;
		right: 0;
		top: 0;
		height: 100svh;
		width: 68%;
	}

	.loginformoffice {
		font-size: 2.5svh;
		font-family: Arial;
		font-family: Arial, Verdana, Univers;
		text-align: left;
		color: #004fa1;
		position: absolute;
		margin: auto;
		left: calc(50% - 22svh);
		top: calc(50% - 15svh); 
		height: 23.6svh;
		width: 39svh;
		padding-top: 1.3svh;
		padding-left: 10px;
	}

	.loginlogo {
		align-content: justify;
		margin-left: auto;
		width: 13.7svh;
		padding-top: 67svh;
		opacity: 0.8;
	}

	.rightbackground {
		width: 100%;
		height: 100%;
		opacity: 0.2;
	}

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

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

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

	/* LOGIN FORM INPUTS */

		input[type=text], select {
			width: 100%;
			height: 4.0svh;
			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.7svh;
		}

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

		input[type=text]:focus {
		    outline: none !important;
		}

		#logininput {
			font-size: 1.9svh;
			font-family: Arial;
			font-family: Arial, Verdana, Univers;
			text-align: left;
			padding-left: 10px;
			width: 96%;
			margin-top: 2.6svh;
			height: 4.8svh;
			border: none;
			border: 0px solid white;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient(to left, transparent, #73a9da, transparent);
			border-image-slice: 1;
		}

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

		#logininput:focus {
		    outline: none !important;
		}

		#passwordinput {
			font-size: 1.9svh;
			font-family: Arial;
			font-family: Arial, Verdana, Univers;
			text-align: left;
			padding-left: 10px;
			width: 96%;
			margin-top: 2.6svh;
			height: 4.8svh;
			border: none;
			border: 0px solid white;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient(to left, transparent, #73a9da, transparent);
			border-image-slice: 1;
		}

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

		#passwordinput:focus {
		    outline: none !important;
		}

	/* END OF LOGIN FORM INPUTS */

	/* LOGIN FORM BUTTONS */

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

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

		#loginbutton {
			width: 96%;
			font-size: 1.9svh;
			margin-top: 2.6svh;
			padding-right: 10px;
			height: 4.8svh;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient(to left, transparent, #73a9da, transparent);
			border-image-slice: 1;
		/*	border-left: 5px solid #0082c6;	*/
		}

		#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.7svh;
			z-index: 100;
			height: auto;
			visibility: visible;
			font-size: 1.9svh;
		}

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

		/* COOKIE BUTTONS */

			#cookiebut {
				font-size: 1.8svh;
				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: 100px 100px 100px 100px;
			}

		/* END OF COOKIE BUTTONS */

	/* END OF COOKIE AREA */

/* END OF STYLESHEET FOR LOGIN SCREEN */