/*
This file inherits all the styles from DefaultStyle.css
Please make sure that the following import link is present if you want to inherit default styles.
Any changes in fonts, colours, layout, etc. can be done via overriding CSS style elements after the import statement.

Good CSS guide is located at

http://www.htmlhelp.com/reference/css/

*/

/*#region Fonts*/
@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=523b4b44-d1c7-4b4a-bcab-e44311cffc78");
/*Special modification*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
/*Special modification*/
/*#endregion */

img
{
    border: 0;
}

/* put your changes below this comment */
input
{
    color: #666666;
}

input[type="submit"]
{
    color: Black;
}

.DetailsCell
{
	white-space: normal;
	vertical-align: top;
	font-size: 11px;
}

.DetailsAlternatingCell, .DetailsAlternatingCell a
{
	background-color: #FFFFFF;
	font-size: 11px;
}

.DescriptionRow
{
	padding-bottom: 20px ! important;
}

p.gray
{
	margin-bottom: 0px;
}

h1
{
	color:#000000;
	font-family: Arial, Verdana;
	font-size: 16pt;
	font-weight:normal;
	margin: 2px 20px 2px 0px;
}

h2
{
	color:#00A4E4;
	font-family: Arial, Verdana;
	FONT-SIZE:14pt;
}

.button
{
    margin-left: 10px;
    float: none;
    background-color:inherit;
}

a
{
	color: #00A4E4;
	FONT-SIZE:12px;
	FONT-FAMILY: Arial, Sans-Serif;
}

.DetailsHeader a, .DetailsCell a, .DetailsAlternatingCell a
{
	font-size: 11px;
}

a:hover
{
	color: #666666;
	text-decoration: none;
}

a.pagetrail
{
	color: #666666;
	background: inherit;
}

a.pagetrail:hover
{
	color: #000000;
	background: inherit;
}

a.mainContentItem
{
    color: #00A4E4
}

.left_nav
{
	width:200px;
	float:left;
	margin-right: 50px;
}

.left_nav ul
{
    list-style: none;
}

.left_nav ul li
{
	font-size:12px;
	padding:3px 0px;
}

.left_nav ul li a
{
	padding-left:14px;

	color: #666666;
	text-decoration:none;
}

.left_nav ul li a:hover
{
	color: #00A4E4;
}

.left_nav ul li a.selected
{

	color:#00a4e4;
}

.left_nav ul ul
{
	padding:5px 0px 2px 15px;
}

.left_nav ul ul li
{
	font-size:11px;
}

.DataGridContainer
{
    padding: 10px 0px 20px 0px;
}

.DataGridContainer th
{
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    background-color: silver;
    color: white;
    padding: 3px 5px 3px 5px;
}

.DataGridContainer td
{
    padding: 3px 5px 3px 5px;
    border-bottom: solid 1px #cccccc;
    vertical-align: top;
}

div.refresh {
    float:right;
    margin-top: -35px;
    padding: 4px 4px 4px 4px;
	background: silver;
	color: #FFF;
}

div.refresh a {
    color:#FFF;
    text-decoration: none;
}

div.appTitle
{
    font-size: 12px;
}

/* New login page design Feb 2017 */
html.login,
html.login body,
html.login form { height: 100%; }
html.login * { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #575a5d; }
#login-container { display: table; height: 100%; width: 100%; }
#login-left { display: none; }
#login-right { display: table-cell; width: 100%; min-width: initial; padding: 30px 0; }

@media only screen and (min-width: 800px) {
    #login-left { display: table-cell; width: 66.7%;
        /*background: #04a7df url(./Images/login-left.png) right -780px top 0 no-repeat; */
    }
    #login-right { width: 33.3%; min-width: 470px; height: 100%; background-color: #fff; }
}
@media only screen and (min-width: 1020px) {
    #login-left { background-position: left top; }
    #login-right { padding: 30px; }
}
@media only screen and (min-width: 1900px) {
    #login-left { background-position: right top; }
}
#login-company-logo-container { text-align: right; }
#login-company-logo { width: 200px; height: 56px; margin-right: 20px; }
#login-my-account-logo { width: 200px; height: 32.6px; }
#login-content { box-sizing: border-box; padding: 60px 30px 0 30px; position: relative; height: calc(100% - 56px); font-family: Helvetica Neue Light, Helvetica, Arial, sans-serif; font-size: 16px; min-height: 650px; }
@media only screen and (min-width: 800px) {
    #login-content { min-height: 600px; }
}
#login-content * { font-family: inherit; font-size: inherit; }
#login-content strong { font-family: Helvetica Neue Bold, Helvetica, Arial, sans-serif; font-weight: normal; }
#login-content h1 { font-size: 30px; color: #003479; margin: .7em 0; }
#login-content a, #login-content a:visited { text-decoration: none; color: #00a8e1; }
#login-content input[type=text],
#login-content input[type=password] { width: 250px; border: 1px solid #eee; padding: 4px; }
@media only screen and (min-width: 800px) {
    #login-content input[type=text],
    #login-content input[type=password] { width: 350px; }
}
#login-content > input[type=text],
#login-content > input[type=password],
#login-content > .RememberMeBox,
#login-content > span,
#login-content .login-row { margin-bottom: 12px; display: block !important; }
#login-content input[type=submit],
#login-content a.link-button { display: inline-block; vertical-align: bottom; background-color: #003479; color: #fff; padding: 10px 30px; border: none; cursor: pointer; box-shadow: 0 0 0 0 #00a8e1 inset; transition: .4s ease-in-out; }
#login-content input[type=submit]:hover,
#login-content a.link-button:hover { box-shadow: 0 40px 0 0 #00a8e1 inset; color: #fff; text-decoration: none; }
#login-content a.link-button { background-color: #c6c6c6; color: #575a5d; text-decoration: none; }
#login-content .ErrorMessage { font-family: Helvetica Neue Bold, Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 20px 0; display: block; }
#login-content .ErrorMessage:empty { display: none !important; }
#login-content a:hover { text-decoration: underline; }
@media only screen and (max-width: 500px) {
    #login-content p br { display: none; }
}
#login-footer { position: absolute; bottom: 20px; left: 30px; width: calc(100% - 20px); text-align: center; font-size: 11px; }
@media only screen and (min-width: 800px) {
    #login-footer { text-align: left; }
}
#login-footer a,
#login-footer a:visited { color: inherit; margin-left: 10px; display: block; margin-top: 10px; }
#login-footer a:hover { text-decoration: none; color: #00a8e1; }
@media only screen and (min-width: 800px) {
    #login-footer a { display: inline; margin-top: 0; }
    #login-footer a:before { content: "\2022"; display: inline; margin-right: 10px; }
    #login-footer a:hover:before { color: #575a5d; }
}
/*Specific modifications done to the Stylesheet to resemble the new site's look*/
div#login-left {
	background: none;
}
#login-company-logo {
	height: auto;
	margin-right: 67px;
}
div#login-right {
	padding-top: 51px;
	width: 27.3%;
	min-width: unset;
	background-color: transparent;
}

body {
    background-repeat: no-repeat;
    background-image: url('./Images/ocean.png');
    background-size: 100% auto;
    background-position: -9vw 100%;
    background-attachment: fixed;
}

#login-container {
    background-repeat: no-repeat;
    background-image: url("./Images/etoiles.png");
    background-size: 60% auto;
    background-position: 0% 0%;
}
#login-content {
	background-color: #ba1f27;
	height: calc(100% - 212px);
	margin-top: 37px;
	padding-top: 34px;
	padding-bottom: 134px;
	width: 418px;
	padding-left: 43px;
    min-height:unset!important;
    height: auto !important;
    max-width: 90vw;
    max-height: calc(100vw - 100px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div#login-footer {
	display: none;
}
h1.my-account-title {
	color: #fff !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif !important;
	margin-top: 0 !important;
	margin-bottom: 1.4em !important;
}
#login-content input[type=text], #login-content input[type=password] {
	padding: 12px;
}
#login-content > input[type=text], #login-content > input[type=password], #login-content > .RememberMeBox, #login-content > span, #login-content .login-row {
	margin-bottom: 19px;
	width: 306px;
	color: #4e4e4e;
	border-radius: 2px;
}
#login-content > input[type=text]:focus, #login-content > input[type=password]:focus, #login-content > .RememberMeBox:focus, #login-content > span:focus, #login-content .login-row:focus {
	color: #3e3e3e;
}
#login-content input[type=submit], #login-content a.link-button {
	background-color: #000;
	padding: 12px 65px;
}
#login-content input[type=submit]:hover, #login-content a.link-button:hover {
	transform: scale(1.05);
	box-shadow: none;
}
.RememberMeBox label {
	color: #fff;
}
p.atl-login-text {
	color: #edc3c6;
	font-size: 12px !important;
	font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif !important;
	padding-top: 10px;
	padding-right: 20px;
}
#login-content strong {
	color: #000;
}
#login-content a, #login-content a:visited {
	color: #000;
}
/*responsive rules*/
/*Specific modifications done to the Stylesheet to resemble the new site's look*/
@media only screen and (max-width: 980px) {
	div#login-left {
		display: none;
	}
	div#login-content {
		margin: auto;
		margin-top: 52px;
		height: calc(100% - 451px);
	}
}
@media only screen and (max-width: 791px) {
	div#login-content {
		margin: auto;
		margin-top: 45px;
	}
}
@media only screen and (max-width: 768px) {
	div#login-content {
		height: calc(100% - 571px);
	}
}
@media only screen and (max-width: 480px) {
	#login-company-logo {
		margin: auto;
		display: block;
	}
}
@media only screen and (max-width: 445px) {
	#login-content {
		padding-top: 30px;
		width: 387px;
		padding-left: 30px;
	}
}
@media only screen and (max-width: 414px) {
	#login-content > input[type=text], #login-content > input[type=password], #login-content > .RememberMeBox, #login-content > span, #login-content .login-row {
		width: 277px;
	}
	#login-content {
		padding-top: 30px;
		width: 360px;
	}
}
@media only screen and (max-width: 375px) {
	#login-content {
		width: 334px;
	}
	#login-content > input[type=text], #login-content > input[type=password], #login-content > .RememberMeBox, #login-content > span, #login-content .login-row {
		width: 249px;
	}
	div#login-right {
		padding-top: 20px;
	}
	h1.my-account-title {
		margin-bottom: 1em !important;
	}
}
@media only screen and (max-width: 360px) {
	#login-content {
		width: 318px;
	}
	#login-content > input[type=text], #login-content > input[type=password], #login-content > .RememberMeBox, #login-content > span, #login-content .login-row {
		width: 232px;
	}
	div#login-content {
		margin-top: 30px;
	}
}
@media only screen and (max-width: 320px) {
	#login-content {
		width: 278px;
	}
	#login-content > input[type=text], #login-content > input[type=password], #login-content > .RememberMeBox, #login-content > span, #login-content .login-row {
		width: 194px;
	}
	div#login-right {
		padding-top: 10px;
	}
}