@font-face {
	font-family:			'SansaProSemibold';
	font-style:				normal;
	font-weight:			bold;
	src:					url('../../Content/Font/sansapro-semibold-webfont.woff');
}

@font-face {
	font-family:			'SansaProLight';
	font-style:				normal;
	font-weight:			lighter;
	src:					url('../../Content/Font/sansapro-light-webfont.woff');
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	@font-face {
		font-family:		'SansaProLight';
		src:				url('../../../../web/themes/roannaise-eau/fonts/sansapro-normal-webfont.svg#sansapro') format('svg');
	}
}

@font-face {
	font-family:			'sansapro';
	src:					url('../../../../web/themes/roannaise-eau/fonts/sansapro-semibold-webfont.eot');
	src:					url('../../../../web/themes/roannaise-eau/fonts/sansapro-semibold-webfont.eot') format('embedded-opentype'), url('../../../../web/themes/roannaise-eau/fonts/sansapro-semibold-webfont.woff') format('woff'), url('../../../../web/themes/roannaise-eau/fonts/sansapro-semibold-webfont.ttf') format('truetype'), url('../../../../web/themes/roannaise-eau/fonts/sansapro-semibold-webfont.svg#sansapro') format('svg');
	font-weight:			bold;
	font-style:				normal;
}

/* Définition de la police de caractères 'Sansa Pro'*/
body {
	font-family:			'SansaProSemibold' !important;
	background-color:		#edf7ff;
	overflow-x:				hidden;
}

.banniere{
	/*min-height:			270px;	*/
	background-size:		100% auto !important;
}

.logo {
	padding:				20px 0 !important;
}

.logo img {
	height:					125px;
}

p {
	font-size:				12px !important;
	font-family:			'SansaProSemibold' !important;
}

h1, h2, strong {
	color:					#0d68ad !important;
	/*font-size:				16px !important;*/
}

a {
	font-family:			'SansaProSemibold' !important;
}

a strong, a span {
	color:					#010205 !important;
}

#footerUsager a {
	color:					#fff !important;
}

ul li a span {
	color:					#010205 !important;
}

/**
	Affichage du caroussel
**/
#myCarousel img {
	height:					350px;
	width:					100%;
}

#myCarousel div.carousel-caption {
	width:					240px;
    height:					250px;
    border-radius:			50%;
	top:					30px;
	right:					70px;
    padding:				30px 20px 0px 20px;
	background:				rgba(255, 255, 255, 0.8);
}

#myCarousel div.carousel-caption h4 {
	font-family:			'SansaProSemibold' !important;
	color:					#0d68ad;
    font-size:				24px;
    font-weight:			bold;
    padding:				0px 30px 20px 30px;
    margin:					0 0 10px 0;
    line-height:			30px;
    text-align:				center;
    text-transform:			uppercase;
    text-shadow:			none;
    background:				url(../Document/AfficherImage/?code=tilde_infos_utiles) no-repeat bottom center;
}

#myCarousel div.carousel-caption p {
	font-family:			'SansaProLight' !important;
	font-size:				14px !important;
	color:					#333333;
    text-shadow:			none;
	margin:					0 0 10px;
	text-align:				center;
}

#myCarousel div.carousel-caption a, 
#myCarousel div.carousel-caption a * {
	color:					#0d68ad !important;
}

/****
	CGA - Corrections présentation
****/
#out_container.boxed, 
#out_container.boxed-attached, 
#footerUsager {
	width:					100%;
}

.main-content, 
.banniere, 
.footer-wrapper .main-block, 
.footer-bottom .main-block {
	position:				relative;
	width:					1170px;
	margin:					auto;
}


@media (max-width: 1170px) {
    .main-content, 
	.banniere, 
	.footer-wrapper .main-block, 
	.footer-bottom .main-block {
		width: 900px;
	}
}

@media (max-width: 974px) {
    .main-content, 
	.banniere, 
	.footer-wrapper .main-block, 
	.footer-bottom .main-block {
		width: 100%;
	}
}

.banniere .row-fluid:last-child {
	position:				absolute;
	right:					15px;
	bottom:					0;
	width:					160px;
}	

.navbar .nav {
	padding:				0 calc((100vw - 1170px) / 2);
}

.navbar .nav-pills i {
	display: none !important; /* Retrait des sous-titres du menu */
}

.accueil h2, 
.accueil h2 span {
	font-size:				25px !important;
}

.hero-list {
	display: flex !important;
}

@media (max-width: 974px) {
	.hero-list {
		flex-direction: column;
		align-items: center;
	}
	
	.hero-list .grey-box {
		width: 90%;
		margin-left: 0;
	}
}

.grey-box {
	background:				#ececec !important;
	border:					0 !important;
	box-shadow:				none !important;
}

.hero-block-2 {
	padding:				0;
}

.hero-block-2 h3 {
	display:				block !important;
	text-align:				center !important;
	height:					40px !important;
	line-height:			20px !important;
	padding:				10px !important;
	color:					#FFFFFF !important;
	background:				#0d68ad !important;
	margin:					0 !important;
}

.hero-block-2 hr {
	display:				inline-block;
	width:					100%;
	padding:				5px 0 !important;
	background:				#FFFFFF;
	border:					0 !important;
}

.hero-block-2 p {
	display:				inline-block;
	margin:					10px 15px;
	text-align:				left;
}
/**
	Fin CGA
**/

/* Navigation */
/**************/

/* Barre de navigation menu mettre image pour l'Accueil */
/* 
25px 25px 15px 25px
.navbar-default .navbar-nav > li:first-child > a {*/
header .navbar .nav > li > a[href="/Portail/fr-FR/Usager"],
header .navbar .nav > li > a[href="/Portail/fr-FR"] {
	background:				#ffffff url("/Portail/fr-FR/Document/AfficherImage/?code=iconeHome") no-repeat center / auto !important; 
	margin-left:			3px;
	padding:				0  !important;
	width:					50px;
	height:					50px;
	border-top:				3px solid #00b1e6 ;
}

header .navbar .nav > li > a[href="/Portail/fr-FR"]:hover,
header .navbar .nav > li > a[href="/Portail/fr-FR"]:focus,
header .navbar .nav > li > a[href="/Portail/fr-FR/Usager"]:hover,
header .navbar .nav > li > a[href="/Portail/fr-FR/Usager"]:focus {
	border-top:				3px solid #0d68ad !important;
	background-color:		#fff !important;
}

.nav-collapse ul li{
	margin:					0;
	height:					70px;
}

.navbar .nav {
	float:					none !important;
	margin:					0 !important;
}

.navbar .nav > li {
	border-right:			0px;
}

.nav-pills {
	background-color:		#00b1e6;
}

.nav-pills > li > a {
	background-color:		transparent !important;
	color:					#fff;
	font-size:				12px;
}

.navbar .nav > li a {
	font-size:				15px;
	font-family:			'SansaProLight' !important;
	font-weight:			400;
	letter-spacing:			0px;
	margin:					10px 5px;
	color:					#fff !important;
}

.navbar .nav > li:last-child a {
	position:				absolute;
    right:					calc((100vw - 1185px) / 2);
    background:				#0d68ad !important;
    height:					45px !important;
    width:					140px;
    line-height:			45px !important;
    font-size:				18px;
    text-align:				left !important;
    margin:					13px 0;
    padding:				0 10px !important;
    word-break:				break-all;
}

.navbar .nav > li > a i {
	height:					15px !important;
	color:					#fff !important;
}
/* bloc home trait de surlignage */
.navbar .nav > li:first-child > a i {
	height:					0px !important;
}


.navbar .nav > li:last-child a i {
	display:				none;
}

.navbar .nav > li > a:hover, 
.nav > li > a:focus {
	letter-spacing:			0px;
	background-color:		#0d68ad !important; 
	color:					#fff !important;
}

.navbar .nav > li > a i:hover, 
.nav > li > a i:focus {
	background-color:		#0d68ad !important;
}



.navbar .nav > li:first-child a:hover, 
.navbar .nav > li:first-child a:focus,
.navbar .nav > li:.active:first-child a {
	border-top:				inherit;
    height:					inherit !important;
	line-height:			inherit !important;
}

.nav-connexion {
	background-color:		transparent !important;
}

.nav-connexion > li > a.btn {
	width:					140px;
	line-height:			30px !important;
	font-family:			'SansaProLight' !important;
	font-weight:			normal;
	font-size:				18px;
	text-align:				left !important;
	margin:					0 0 10px 0;
	padding:				0 10px !important;
	word-break:				break-all;
}

.nav-pills > li > a.btn {
	border:					0 !important;
	background-image:		none !important;
	text-shadow:			none !important;
	box-shadow:				none !important;
	line-height:			10px;
	background-color:		#00b1e6 !important;
	color:					#fff;
}

.nav-pills > li:first-child > a.btn {
	border-right:			1px solid #FFF !important;
	padding-left:			35px;
}

.nav-pills > li > a.btn:hover {
	background-color:		#0d68ad !important;
	color:					#fff !important;
}

.navbar-inner {
	border:					0px;
}

/* Les boutons */
.btn {
	border:					1px solid #fff !important;
	background-color:		#00b1e6 !important;
	background-image:		none !important;
	text-shadow:			none !important;
	color:					#FFF !important;
}

.btn span {
	color:					#fff !important;
}

.btn.active, 
.btn:hover {
	background-color:		#0d68ad !important;
}

body .assistant-contenu {
	height:					auto;
}

.btn-group > .btn:active, 
.btn-group > .btn.active {
	background-color:		#0d68ad  !important;
}

#out_container .main-content table.dataTable tbody tr {
	position:				relative;						/* Important pour permettre l'ancrage du bouton détail sur la ligne */
	-webkit-transition:		background .25s ease-out;
	transition:				background .25s ease-out;
}

/*
	LR - On définit le bouton détail de la dernière cellule de la ligne à une dimension nulle pour pouvoir définir l'action sur l'ensemble de la ligne grâce au pseudo-élément :after
*/
#out_container .main-content table.dataTable#tableAbonnement tbody td:last-child a[href*="Detail"] {
	width:				0;
	height:				0;
	margin:				0;
	padding:			0;
}

/*
	LR - On masque les éléments enfants (icône du bouton)
*/
/*#out_container .main-content table.dataTable#tableAbonnement tbody td a[href*="Detail"] *,
#out_container .main-content table.dataTable#tableAbonnement tbody td a.modal-detacherAbonnement * {*/
#out_container .main-content table.dataTable#tableAbonnement tbody td a[href*="Detail"] * {
	display:			none;
}

/*
	LR - On utilise le pseudo-élément :after pour reporter l'action du bouton détail sur la ligne complète
*/
#out_container .main-content table.dataTable#tableAbonnement tbody td a[href*="Detail"]::after {
	content:			"";
	display:			block;
	position:			absolute;
	top:				0;
	bottom:				0;
	left:				0;
	right:				0;
}

#out_container .main-content table.dataTable#tableAbonnement tbody td a.modal-abonnement, 
#out_container .main-content table.dataTable#tableAbonnement tbody td a.modal-detacherAbonnement {
	z-index:			2;
	position:			relative;
	margin:				0;
	padding:			0;
	text-align:			center;
}

/* Nouvel abonnement */
.bwizard-steps .active:after {
    border-left-color: #009adc;
}

/*Menu Synthese abonnement*/
#synthese #menuAbonnementSynthese .title {
	position:				relative;
	display:				block;
	/* margin:				2rem -1.25rem 1.25rem;*/
	background:				#00b1e6;
	color:					#fff;
	-webkit-transition:		background .25s ease-out;
	transition:				background .25s ease-out;
}

#synthese #menuAbonnementSynthese .title.active,
#synthese #menuAbonnementSynthese .title:hover,
#synthese #menuAbonnementSynthese .title:focus {
	background:				#0d68ad!important;
}

#synthese #menuAbonnementSynthese .title h3,
#synthese #menuAbonnementSynthese .title.active h3 {
	/*position:				relative;
	height:					auto;
	margin:					0;
	padding:				.75rem 2rem;*/
	background:				none !important;
	color:					inherit;
	font-weight:			bold;
	/*font-size:			1rem;*/
	text-align:				center;
}

#synthese #menuAbonnementSynthese .title h3 .icon-search:before {
	color:					#fff;
}

/*pied de page : Couleur police*/
#footerUsager h1, 
#footerUsager h2, 
#footerUsager h3, 
#footerUsager p, 
#footerUsager strong {
	color:					#fff !important; 
}

/*pied de page : Couleur */
.footer-top {
	height:					5px;
	background-color:		#010205 !important ;
}

.footer-wrapper {
	background-color:		#010205 !important ;
}

.footer-bottom {
	background-color:		#010205 !important ;
}

/*
.icon-medium {
	color:					#010205 !important;
}
*/

/* Personnalisation de l'image d'aide au rattachement d'un abonnement
*********************************************************************
Prérequis : 
créer un document dans l'administration de l'AEL avec l'image souhaitée ayant 
pour code : aide_attacher_abo */
#demoFacture {
	
	height: 350px;
}

/* Zoom lors du survol de l'image d'aide au rattachement d'un abonnement*/
#demoFacture:hover {
	-webkit-transform:		scale(1.7);
	transform:				scale(1.7);
}
#divParFacture #demoFacture {
  background-image:  url("/Portail/fr-FR/Document/AfficherImage/?code=aide_attacher_abo") !important;
}
 
#divParContrat #demoFacture {
  background-image:  url("/Portail/fr-FR/Document/AfficherImage/?code=aide_attache_contrat") !important; 
}

/* si nous souhaitons ne pas afficher l'image d'aide au rattachement*/
/*#demoFacture {
	background-image:		none !important;  
}*/

/* CSS pour bouton icone mot de passe en clair*/

/*Changement mot de passe - Creation compte - connexion*/
button#viewPwdIcone {
  border: none;
  vertical-align:top;
  height: 30px;
  width: 30px;
  background: none;
  
}
button#viewPwdIconeConf {
  border: none;
  vertical-align:top;
  height: 30px;
  width: 30px;
  background: none;
  
}
button#viewPwdActuelIcone {
  border: none;
  vertical-align:top;
  height: 30px;
  width: 30px;
  background: none;
  
}
/* reinit mot de passe*/
button#viewPwdChgtIcone {
  border: none;
  vertical-align:top;
  height: 30px;
  width: 30px;
  background: none;
  
}
button#viewPwdChgtIconeConf {
  border: none;
  vertical-align:top;
  height: 30px;
  width: 30px;
  background: none;
  
}
/* Désactiver l'icône "œil" en double sur Edge/Chromium */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}


/* Aide en ligne */
.aideenligne .head {
	padding: 0;
}

.aideenligne .search-bar-inner {
	background-color: white;
}

.aideenligne .logo img {
	height: 75px;
}