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: #25534F; border: none; font-weight: bold; margin-bottom: 20vh; font-size: 12px;
}

.csx_btn:hover{
	background-color: rgba(37,83,79, 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%23SvgjsMask1001%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c31 C 57.6%2c45.8 172.8%2c105 288%2c105 C 403.2%2c105 460.8%2c28 576%2c31 C 691.2%2c34 748.8%2c125.4 864%2c120 C 979.2%2c114.6 1036.8%2c6.2 1152%2c4 C 1267.2%2c1.8 1382.4%2c88 1440%2c109L1440 250L0 250z' fill='rgba(168%2c 218%2c 220%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c133 C 96%2c147.8 288%2c207 480%2c207 C 672%2c207 768%2c125.2 960%2c133 C 1152%2c140.8 1344%2c223.4 1440%2c246L1440 250L0 250z' fill='rgba(37%2c 83%2c 79%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1001'%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_/img_/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;
	/*box-shadow: -4px 0px 20px rgb(0 0 0 / 40%);*/
}

.login_screen_loader{
  width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.8);
  position: absolute; top: 0px; left: 0px; z-index: 100; flex-direction: column;
}

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

    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){
	.lang_mount{margin-right: 0px !important;}
}

.sys_version #system_version {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #00B4D8;
    color: #fff;
    font-size: 10px;
    width: fit-content;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 4;
}

.loading-message{
    font-weight: bold;
}