body{
	margin: 0; padding: 0; width: 100vw; height: 100vh;
}

#brand_logo{
	width: 200px; height: auto; margin-bottom: 10%;
}

.form-floating > label{
	color: grey;
}

.csx_btn{
	height: 40px; border-radius: 10px; color: #fff; background-color: #219EBC; border: none; font-weight: bold; margin-bottom: 20vh; font-size: 12px; 
}

.csx_btn:hover{
	background-color: rgba(33, 158, 188, 0.7); transition: background-color 2s ease-in-out;
}

footer{
	position: absolute; bottom: 20px; color: #fff; font-weight: bold; z-index: 2;
}

.csx_wave{
	height: 250px; position: absolute; bottom: 0px; z-index: 1;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='250' preserveAspectRatio='none' viewBox='0 0 1440 250'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1027%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c108 C 57.6%2c86.2 172.8%2c7.6 288%2c-1 C 403.2%2c-9.6 460.8%2c56.2 576%2c65 C 691.2%2c73.8 748.8%2c31.4 864%2c43 C 979.2%2c54.6 1036.8%2c130.2 1152%2c123 C 1267.2%2c115.8 1382.4%2c30.2 1440%2c7L1440 250L0 250z' fill='rgba(144%2c 224%2c 239%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c195 C 96%2c183.4 288%2c127.2 480%2c137 C 672%2c146.8 768%2c237.6 960%2c244 C 1152%2c250.4 1344%2c184 1440%2c169L1440 250L0 250z' fill='rgba(33%2c 158%2c 188%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1027'%3e%3crect width='1440' height='250' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: bottom;
}

.csx_hero_banner{
	background-image: url("../res/images/hero_banner_login_rev.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; border-top-left-radius: 20px; border-bottom-left-radius: 20px; 
	position: absolute; height: 100%; width: 55%; margin-left: -5%; z-index: 3;
	display: block;
}

.sys_version #system_version{
  padding: 5px 10px; border-radius: 5px; background-color: #00B4D8 ; color: #fff; font-size: 10px; width: fit-content;
}


/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
	#csx_hero_banner_container{
		display: none;
	}

    footer {
        font-size: 12px;
    }

    #brand_logo {
        width: 150px !important;
    }

    .csx-form-floating{
    	width: 75% !important;
    }

    #csx-login-user{
    	margin-top: 0.5rem!important;
    	margin-bottom: 30vh !important;
    	width: 75% !important;
    }

    .lang_mount{margin-right: 0px !important;}
}

/* For Ipad mini Portrait View */
@media screen and (max-device-width: 768px) and (max-device-height: 1024px) and (orientation:portrait), 
/* For Ipad air Portrait View */
(max-device-width: 820px) and (max-device-height: 1180px) and (orientation:portrait),
/* For Surface pro 7 Portrait View */
(max-device-width: 912px) and (max-device-height: 1368px) and (orientation:portrait){
	#csx_hero_banner_container{
		display: none;
	}

	.lang_mount{margin-right: 0px !important;}
}