@font-face {
	font-family: "Averia";
	src: url('AveriaLibre-Light.ttf');
}
@font-face {
	font-family: "Lato";
	src: url('Lato-Regular.ttf');
}

fieldset {
	border: 1px solid #ccc;
}

legend {
	color: #007AA8;
	text-transform: uppercase;
	font-family: "Averia";
	font-size: 1.3em;
}

fieldset dt label {
	font-family: "Lato";
	font-weight: 600;
	font-size: 1em;
	color: #1C437A;
}
fieldset dd label {
	font-family: "Lato";
}

.error,
.red,
ul.errors {
	font-family: "Lato";
	color: red;
}

ul.errors {
	text-shadow: 1px 1px 0 rgba(255, 255, 255, .75);
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
textarea,
select {
	font-family: "Lato";
	max-width: 400px;
	background-color: #fff;
	border : 1px solid #1F9FD0;
	border-radius: 90px;
	padding: 12px 18px 14px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
textarea:focus,
select:focus {
	font-family: "Lato";
	box-shadow: none;
}

.ui-datepicker .ui-datepicker-title select{
	border : 1px solid #1F9FD0;
	padding: 5px;
}

.infobox {
	color: #FFF;
	background: #617798;
}

input.disabled{
	color: #bbb;
	background: #858B93;
}

a.disabled {
	color: #CCC;
	background: #EFF3F7;
}

a.selected {
	color: #FFF;
	background: orange;
}

button {
	color: #FFF;
	background: #52C930;
}

button:disabled,
button.disabled {
	color: #ddd;
	background: #A2C697;
}

#submit-element,
#next-element {
	
}

#header {
	width: 100%;
}

#header h1 {
	color: #007AA8;
	font-size: 1.7em;
	text-align: center;
	padding: 80px 10px 25px 10px;
	flex: 1;
	font-family: "Averia";
}

#logo {
	width: 230px;
	height: 96px;
	margin: 12px 0 0 24px;
	float: left;
	background: url(/modules/gdcgui/image/logo.png) no-repeat top left;
	background-size: cover;       
}

.right{
	flex-direction: column; 
	display: flex;
	margin-right: 10px;
}

.help{
	color: #007AA8;
	font-family: "Lato";
	font-size: 0.9em;
}
.help div{
	float:left;
}
.help .phoneInfo{
	margin-right: 10px;
}
.help .passerelle{
	text-align:right;
}
.help .passerelle img{
	width: 70px;
}
.help .passerelle p{
	text-align:right;
	color: #B41078;
}

.tgwf_green{
	border-bottom:none !important;
}
#phoneInfo {
	flex-direction: column; 
	background: url(/modules/gdcgui/image/interface/phone.png);
	background-repeat: no-repeat;
	padding-left: 40px;
}

#phoneInfo strong {
	color: #007AA8;
	font-size: 1.2em;
	font-weight: bold;
	
}

a{
	text-decoration: none;
}

#header-bottom {
	height: 300px;
	width: 100%;
	background: url(/modules/gdcgui/image/interface/accueil-4-edit-nantes.jpg) #fff no-repeat top center;
}

input[type=submit] {
	background: #007AA8;
	border: 1px solid #007AA8;
	font-family: "Lato";
	padding: 12px 23px 14px;
	font-size: 15px;
	float: right;
	color: #FFF;
	border-radius: 90px;
}

input[type=submit]:hover {
	background: #ffffff;
    color: #007AA8;
    transition: all 0.3s; 
}


.sprite {
	background-image: url(/modules/gdcgui/image/customer/sprite.png);
	background-repeat: no-repeat;
}

.mini-loader {
	background: url(/modules/gdcgui/image/customer/mini-loader.gif) no-repeat 97% center;
}

.header-menu-user {
	color: #fff;
}

.header-menu-user .info a {
	color: #007AA8;
}

#password-lost {
	background: none repeat scroll 0 0 #FAFAFA;
	border: 1px solid #EEEEEE;
	box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 4px #EEE;
}

#password-lost label {
	color: #666;
}

#typeId-label,
#arrTransportMode-label,
#arrHandicapNature-label,
#arrHandicapTechnicalAssistance-label,
#arrHandicapEquipmentInfo-label,
#hasAmount-label,
#arrTypeLogement-label{
	padding:0 10px 0 0 ;
}

#progress p{
	color: #007AA8;
}

/** Tablette **/
@media screen and (max-width: 1199px) and (min-width: 768px) {
	fieldset dt label {
		font-size: 0.9em;
	}
	.help div{
		float: none;
	}
	#logo{
		margin-right:20px;
	}
	.help .phoneInfo{
		margin-right: 0px;
	}
}

/** MOBILE **/
@media screen and (max-width: 767px) {
	fieldset dt label {
		font-size: 0.9em;
	}
	
	#logo {
		width: 120px;
		height: 57px;
		margin: 5px;
	}

	input[type=text],
	input[type=email],
	input[type=password],
	input[type=number],
	textarea,
	select {
		max-width: 94%;
		width: 94%;
	}
	.help div{
		float: none;
	}
	.help .phoneInfo{
		margin-right: 0px;
	}
	.help .passerelle img{
		width: 100px;
	}
	
}

@media screen and (max-width: 500px) {
	#header h1{
		font-size: 1.1em;
	}
	#phoneInfo{
		height: 40px;
		background-position: center;
		padding: 0;
	}
	#phoneInfo p{
		display:none;
	}
	
}