;









 
  <script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
<!-- <!-- Timo QA -->
<!-- <script src="https://chatbot-qa.exela.global/js/timo.js"></script> --> 
<!-- Timo PROD -->
 <script src=" https://exela-chatbot.exela.global/js/timo.js"></script> 


    <style type="text/css">


.chatbotOpenDiv {
    color: #585858;
    padding: 0px;
    border: none;
    cursor: pointer;
    opacity: 1;
    position: fixed;
    max-width: 100px;
    height: auto;
    z-index: 1;
    width: 45px;
    height: 45px;
    text-align: center;
    top: calc(100vh - 63px);
    left: calc(100% - 60px);
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.12, 0.15, 0.18, 1.25) ease-in-out;
    animation-name: slideIn;
    background-image: url('https://chatbot-qa.exela.global/icons/new-icon-white.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    filter: drop-shadow(2px 2px 2px #b0b0b0);
}     
.chatbotOpenDiv img {
    padding: 0px;
    width: 23px;
    height: 23px;
    vertical-align: middle;
    text-align: center;
    transition: all 0.9s ease-in-out;
    margin: 5px 0px 0 -2px;
}
.chatbotOpenDiv:hover img{
    transition: 0.9s;
    transform: rotateY(180deg);
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
.timo-contact-support input[type="text"], .timo-contact-support input[type="email"], .timo-contact-support textarea{
    height: inherit !important;
}
.timo-contact-support .custemscroll::-webkit-scrollbar { 
     width: 10px !important;
}
.timo-contact-support {
        min-width: 30% !important;
        max-width: 30% !important;
}
@media (min-width: 768px) and (max-width: 1023px){
    .timo-contact-support {
        width: 100%;
        min-width: 48% !important;
        max-width: 48% !important;
    }
}
@media (max-width: 767px){
    .timo-contact-support {
        width: 100%;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}
</style>


<div class="chatbotOpenDiv open-button draganddrop" ondragstart="dragstartevent(event)" onmousemove="mousemoveevent(event)" ondragend="dragendevent(event)"  draggable="true">
    <img type="image" src="https://exela-chatbot.exela.global/icons/Timo-logo.svg" alt="Need Help?"
        tabindex="0" id="custSupport" title="Contact Support"  />
        </div>
        
<div class="form-popup" id="masterDiv"></div>
<input id="productName" value="Screen360" type="hidden"/>
<input id="userName" value="" type="hidden"/>
<input id="userEmail" value="" type="hidden"/>
<div id="overlay"></div>

<script>
            const browserWindow = window;
            if(!browserWindow['__env']){
              browserWindow['__env'] = {}
            }
            const browserWindowEnv = browserWindow['__env'];
            browserWindowEnv.TIMO_PRODUCT_CODE="Screen360"
            browserWindowEnv.AIBOT_DISABLE_CHAT = true
            browserWindowEnv.AIBOT_ENABLE_SECURE_TIMO = false
            browserWindowEnv.TIMO_PRODUCT_NAME = "Screen360"
            browserWindowEnv.AIBOT_PRODUCT_SUPPORT = "screen-360.support@exelaonline.com"
            browserWindowEnv.AIBOT_LOGIN_PROMPT_MSG = "Login to Screen360 to leave a ticket or email us at "

</script>

<script type="text/javascript" language='Javascript'>
let draggableElement1 = document.querySelector('.draganddrop');

let offsetX1, offsetY1, isDragging1 = false;
function dragstartevent(event){
    offsetX1 = event.clientX - draggableElement1.getBoundingClientRect().left;
    offsetY1 = event.clientY - draggableElement1.getBoundingClientRect().top;
    isDragging1 = true;
}
function mousemoveevent(event){
    if (isDragging1) {
        const x = event.clientX - offsetX1;
        const y = event.clientY - offsetY1;
        draggableElement1.style.left = x +"px";
        draggableElement1.style.top =  y +"px";
        draggableElement1.style.cursor = "move";
    }
}
function dragendevent(event){
    debugger
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    if (isDragging1) {
        const x = event.clientX - offsetX1;
        const y = event.clientY - offsetY1;
        draggableElement1.style.left = x +"px";
        draggableElement1.style.top =  y +"px";
    }
    isDragging1 = false; 
}
</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Screen 360</title>


<link href="/ScreeningI9/css/login.css"
	rel="stylesheet" type="text/css">
<link rel="shortcut icon"
	href="/ScreeningI9/images/favicon.ico">

<link rel="stylesheet" href="css/sweetalert.css">


<script src="js/jquery_3.6.1.js" defer></script>
<script src="js/bootstrap_3.4.1.js" defer></script>

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css.map">

<link
	href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700&display=swap"
	rel="stylesheet">
<link
	href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet"
	integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
	crossorigin="anonymous">

<script type="text/javascript"
	src='/ScreeningI9/javascript/gradient.js'></script>
<script type='text/javascript'
	src='/ScreeningI9/dwr/engine.js'></script>
<script type='text/javascript'
	src='/ScreeningI9/dwr/util.js'></script>
<script type='text/javascript'
	src='/ScreeningI9/dwr/interface/keyCloakUtils.js'></script>
<script type='text/javascript'
	src='/ScreeningI9/dwr/interface/userdetails.js'></script>
<script language="Javascript"
	src='/ScreeningI9/dwr/interface/loginaction.js'></script>
<script language="Javascript"
	src='/ScreeningI9/javascript/screening.js'></script>
	
<script src="js/sweetalert-dev.js"></script>
<script src="js/sweetalert.min.js"></script>
  


<style type="text/css">
<!--
.btn-primary {
	width: 100%;
	box-shadow: none;
	color: #fff !important;
	margin: 0;
	text-transform: capitalize;
	line-height: 1.42857143;
	background: #D71996 !important;
	border-color: #D71996 !important;
	margin-top: 15px;
	padding: 10px 0;
}

.btn-primary:hover {
	background-color: #961169 !important;
	border-color: #961169 !important;
}

.checkbox {
	margin-top: 25px;
	margin-bottom: 25px;
}

<!--
#Layer2 {
	position: absolute;
	width: 291px;
	height: 121px;
	z-index: 2;
	left: 388px;
	top: 260px;
}

body {
	background: url(images/login-imagebg.png);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.logo-login {
	text-align: center;
	position: relative;
	top: 9%;
}

.hide-image {
	position: absolute;
	width: 100%;
	height: 50px;
	background: #fff;
	bottom: 0;
}

.loginform {
	padding: 65px 40px 0 40px;
	height: 100%;
	/* border-collapse: collapse; */
	display: block;
}

.loginform .form-group {
	margin-bottom: 30px;
}

.loginform .form-group .form-control {
	height: auto;
	color: #40505b;
	font-size: 14px;
	padding: 10px 20px 10px 10px;
	font-family: 'Work Sans', sans-serif !important;
	border-radius: 5px;
	background-color: transparent;
	border: 1px solid #9FB6C1 !important;
	border-top: 0;
	border-left: 0px;
	border-right: 0;
}

.loginform .form-group label {
	position: absolute;
	margin: -10px 0 0 5px;
	background-color: #fff;
	padding: 0 5px 0 5px;
	color: #63757E;
	font-weight: normal;
	font-size: 12px;
	font-family: 'Work Sans', sans-serif !important;
}

.wrapper-footer {
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 13px;
	position: absolute;
}

.wrapper-footer_content {
	margin: 10px 0 15px 0;
	text-align: center;
}

.btn-block {
	display: block;
	width: 100%;
}

.borderBottom {
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
}

label {
	font-weight: normal;
}

.horrLine {
	margin: 10px 0;
	border-top: 1px solid #cccccc9e;
}

input:-internal-autofill-selected {
	background: #fff;
}

-->
.error {
	color: #f3305d;
	text-align: center;
	padding: 10px;
	height: 40px;
}

input[type="checkbox"] {
	position: relative;
	margin-right: 10px;
}

#disableWnd {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #000000;
	opacity: 0.5;
	filter: alpha(opacity = 30);
	-moz-opacity: .50;
	-khtml-opacity: 50;
	z-index: 0;
}

-->
</style>
<script language="Javascript">


	function fnChkLogin(formname, action) {

		if (fnCheckNotEmptyField(formname.txtEmail)) {
			var email = document.getElementById('txtEmail').value;
			console.log("email--" + email);
			formname.submit();
		}

		else {

			swal({
				title : "Error",
				text : "Please enter Email Id",
				type : "warning",
				confirmButtonText : "Ok",
				showCancelButton : false,
			}, function() {

			});
			//alert('Please enter login name');
			return false;
		}
	}

	function redirectionkc(realms, redirectionurl, email, clientid, auth_url) {

		if (realms != null) {
			window
					.open(
							auth_url
									+ "realms/"
									+ realms
									+ "/protocol/openid-connect/auth?client_id="
									+ clientid
									+ "&response_type=code&scope=openid%20profile%20email&login_hint="
									+ email + "&redirect_uri=" + redirectionurl,
							"_self");
		} else {
			swal(
					{
						title : "Error",
						text : "If you are unable to log in to Screen360 send a mail to support@screen-360.com to resolve your log-in concern.",
						type : "warning",
						confirmButtonText : "Ok",
						showCancelButton : false,
					}, function() {

					});

			return false;
		}
	}

	function checkKC(formname) {

		var email = document.getElementById('txtEmail').value;

		console.log("email in login--" + email);

		if (email != null) {

			var realms = null;
			var loginForm = null;
			userdetails.fnCheckUserExistbyemailid(email, getUserDetails);

			function getUserDetails(UserId) {
				console.log("getUserDetails=>" + UserId)

				console.log("UserId=>" + UserId);
				if (UserId > 0) {
					console.log("getUserDetails inside iff");
					keyCloakUtils.checkMode(Mode);

					function Mode(Mode) {
						console.log("Mode==>>>>>" + Mode);
						mode = Mode;
						console.log("mode==>>>>>" + mode);
						loginaction.fnkeyclock(email, mode, realmss);
					}

				} else {
					swal(
							{
								title : "Error",
								text : "If you are unable to log in to Screen360 send a mail to support@screen-360.com to resolve your log-in concern.",
								type : "warning",
								confirmButtonText : "Ok",
								showCancelButton : false,
							}, function() {

							});
					return false;
				}

			}

			function realmss(realmss) {
				realms = realmss.realms;
				var redirectionurl = realmss.redirect_uri;
				var clientid = realmss.client_id;
				var auth_url = realmss.auth_url;

				console.log("realms==>>>>>" + realms);

				if (realms == 'exela') {
					redirectionkc(realms, redirectionurl, email, clientid,
							auth_url);
				} else{
					redirectionkcregister(realms, redirectionurl, email, auth_url);
				}
				

			}
		}
	}

	function redirectionkcregister(realms, redirectionurl, email, auth_url) {

		console.log("realmss redirectionkc" + realms);
			window
					.open(
							auth_url
									+ "realms/"
									+ realms
									+ "/protocol/openid-connect/auth?client_id=screen360consumer&response_type=code&scope=openid%20profile%20email&login_hint="
									+ email + "&redirect_uri=" + redirectionurl,
							"_top");

		
	}
</script>
<body onLoad style="overflow: auto">



	<form name="loginform" name="loginform" method="POST"
		style="width: 33%; position: fixed; right: 0; top: 0; bottom: 0; margin: 0; background: #fff;">
		<div class="logo-login">
			<img src="images/logo_360_sprites.png">
			<!-- <div class="hide-image"></div> -->
		</div>
		<input type="hidden" name="ACTION" property="ACTION" /> <input
			type="hidden" name="ClientName" id="ClientName" value="">


		<div class="loginForm">
			<form action="/action_page.php">
				<div class="error">
					
					
				</div>

				<div class="form-group">
					<label>Email Id</label> <input name="txtEmail" type="text"
						id="txtEmail" maxlength="50" size="40" value=""
						class="form-control" placeholder="Email-Id" />
				</div>

				<button class="btn btn-primary btn-block" type="button"
					onclick="checkKC(document.loginform);">
					<!-- <i id="processWnd" style="display: none;" class="fa fa-spinner fa-pulse fa-fw"></i> -->
					NEXT
				</button>
				<div class="bottomFooter"
					style="position: absolute; bottom: 0; right: 0; left: 0; text-align: center">
					<p>
						Copyright &copy;
						<script>
							document.write(new Date().getFullYear());
						</script>
						, Exela Screen360, All Rights Reserved.<br /> <a
							href="https://www.exelatech.com" target="_blank">www.exelatech.com</a>
					</p>
				</div>
			</form>
		</div>


	</form>

	<form name="messageform">
		<input type="hidden" id="messageid" name="message" value="" /> <input
			type="hidden" id="displaybuttonsid" name="displaybuttons" value="" />
		<input type="hidden" id="methodOkid" name="methodOk" value="" /> <input
			type="hidden" id="methodYesid" name="methodYes" value="" /> <input
			type="hidden" id="methodNoid" name="methodNo" value="" />

		<div id="alertContainer"></div>
	</form>
	<div id="disableWnd" style="left: 0px; top: 0px; display: none;"></div>
	<div id="wndProcessing" class="commonWindow" style="display: none;">
		<table width="100%" border="0" cellpadding="0" cellspacing="0"
			id="tbl-pop-up" class="tbl_common_noborder">
			<tr>
				<th align="center">ScreeningI9</th>

			</tr>
			<tr>
				<td height="100%" valign="top">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="100%" align="center"><img
								src="images/progressbar.gif" /> <BR /> Please wait... <br>
								We are processing your request</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>


	</div>
	
</body>