﻿/*
 * 
 * Copyrights 2015 SIGMA-RH Solutions inc. All Rights Reserved.
 * 
 * This software is the proprietary information of SIGMA-RH Solutions inc.
 * Use is subject to license terms.
 * 
 */

html, body, form 
{
	height:100%;
	font-size: 9pt;
	font-family:Segoe UI Semilight, Segoe UI, Arial;
	margin:0px;
	max-width: 100%;
}

body
{
	background-color: #007AB5;
}
body:not(.login)
{
	background-image: url(images/body.png);
	background-position: left bottom;
	background-repeat: no-repeat;
}

/*#region Login layout*/

body.login div.layoutContainer 
{    
	position: fixed;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    transform: translateX(-50%);
	opacity: 1;
	-moz-transition: opacity ease-in 0.5s;
	-o-transition: opacity ease-in 0.5s;
	-webkit-transition: opacity ease-in 0.5s;
	transition: opacity ease-in 0.5s;
}
body.login:not(.loaded) div.layoutContainer
{
	opacity: 0;
}
@media (min-height: 500px)
{
	body.login div.layoutContainer 
	{    
		position: fixed;
		top: 50%;
		max-width: 100%;
		max-height: 100%;
		transform: translateY(-50%) translateX(-50%);
	}
}

body.login div.mainLayout 
{
    display: inline-block;
    position: relative;
    max-width: 100%;
}

body.login div.optionsContainer
{
    max-width: 100%;
}

body.login div.systemLogo
{
	margin-bottom: 30px;
	height: 59px;
	width: 100%;
	background-image: url(images/logoLoginEn.s.png);
	background-repeat: no-repeat;
	background-position-x: center;
	-moz-background-size: contain;
	-o-background-size: contain;
	-webkit-background-size: contain;
	background-size: contain;
}
body.login div.systemLogo.fr
{
	background-image: url(images/logoLogin.s.png);
}
@media only screen and (min-width: 350px)
{
	body.login div.systemLogo
	{
		height: 79px;
		background-image: url(images/logoLoginEn.png);
	}
	body.login div.systemLogo.fr
	{
		background-image: url(images/logoLogin.png);
	}
}



@media only screen and (min-width: 653px) and (min-height: 520px)
{
	body.login div.mainLayout 
	{
		width: 653px;
		height: 520px;
		background-image: url(images/loginBody.png);
		background-position: center center;
		background-repeat: no-repeat;
	}
	/*
		pétales par CSS
		<div style="border-radius: 0px 20%; border: 11px solid rgba(255, 255, 255, 0.15); border-image: none; top: 2px; width: 40%; height: 50%; right: 2px; position: absolute; box-sizing: border-box;"></div>
		<div style="border-radius: 0px 20%; border: 11px solid rgba(255, 255, 255, 0.15); border-image: none; left: 2px; width: 40%; height: 50%; bottom: 2px; position: absolute; box-sizing: border-box;"></div>
	*/
	body.login div.mainLayout::after
	{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -5px;
		margin-top: -5px;
		z-index: 0;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: rgba(255,255,255,0.35);
		box-shadow: 0px 0px 200px 225px rgba(255,255,255,0.35);
	}


	body.login div.optionsContainer 
	{
		box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		z-index: 1;
	}

	body.login div.systemLogo 
	{
		position: absolute;
		left: 0px;
		bottom: 100%;
	}
}

body.login div.optionsContainer > div.optionsList
{
    background-color: #fff;
    padding: 10px;
    max-width: 100%;
    width: 375px;
	box-sizing: border-box;
	position: relative;
}

body.login div.instructions
{
	text-align: center;
	margin-bottom: 1.5em;
}


/*#region Options*/
a.AuthenticationOption
{
	word-wrap: normal;
	background-color: #007AB5;
	text-align: center;
	color: white;
	text-decoration: none;
	display: block;
	vertical-align: middle;
	white-space: normal;
	border: 0;
	box-sizing: border-box;
	margin: 10px 0;
	padding: 1px;
	/**/
	/*height: 40px;*/
	background-color: #fff;
	color: #007AB5;
	border: solid 1px #ADB2BA !important;
	/*box-sizing: content-box;*/
}
a.AuthenticationOption:hover
{
	border: solid 2px #007AB5;
	margin: 9px 0;
	padding: 0;
	/**/
	border-width: 2px !important;
}


a.AuthenticationOption > div
{
	/*vertical-align: middle;
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	position: relative;
	height:100%;
	max-height: 100px;*/
	/**/
	/*margin-left: 1em;
	margin-right: 1em;*/
	margin:0.5em;
	padding:0.5em;
	/**/
	background-repeat: no-repeat;
	background-size: contain;
	background-origin: border-box;
}

a.AuthenticationOption > div > img
{
	vertical-align: middle;
	margin-right: 2em;
	max-width: 100px;
	max-height: 100%;
}

/*#endregion Options*/

body.login div.rememberOption
{
	text-align: center;
	margin-top: 1.5em;
}

/*#endregion Login layout*/

/*#region Error layout*/

img.clientLogo
{
	height:45px;
	position:fixed;
	left:0px;
	top:0px;
}

/*#region Content*/
div.content
{
	background-color: #FFFFFF;
	position:fixed;
	left:150px;
	right:150px;
	top:125px;
	bottom:125px;
	text-align: center;
	padding-top:20px;
}

div.content div.title
{
	display: block;
	font-size: 40pt;
	margin: 60px;
}

div.content div.subTitle
{
	display: block;
	font-size: 24pt;
	margin-bottom: 70px;
	padding-top: 20px;
}

div.content div.errorTitle
{
	font-size: 14pt;
	text-decoration: underline;
}

div.content div.errorDescription
{
	margin: 0px;
	margin-bottom: 30px;
}
/*#endregion Content*/

body:not(.login) div.systemLogo
{
	height:59px;
	width:220px;
	position:fixed;
	left:30px;
	bottom:5px;
	background-image: url(images/logoEn.png);
	background-repeat: no-repeat;
}
body:not(.login) div.systemLogo.fr
{
	background-image: url(images/logo.png);
}

/*#endregion Error layout*/


div.copyrights
{
	color: #CCCCCC;
	font-size: xx-small;
	text-align:center;
	position: fixed;
	bottom: 10px;
	width:100%;
}