:root {
	--black: #000000;
	--white: #ffffff;
	--color-primary-lighter: #bfc3dc;
	--color-primary: #252560;
	--color-primary-dark: #1d2560;
	--color-secondary-lighter: #fbedc7;
	--color-secondary: #f2c442;
	--color-secondary-dark: #a9892e;
	--color-tertiary: #a62423;
	--color-grey-lighter: #f7f7f7;
	--color-grey-light: #efefef;
	--color-grey-outline: #c5c5c5;
	--color-grey-dark: #707070;
	--color-grey-darker: #5a5a5a;
	--color-html-links: #2773ae;
	
	--font-size-xs: 14px;
	--font-size-s: 16px;
	--font-size-m: 20px;
	--font-size-l: 26px;
	--font-size-xl: 30px;
	
	--padding-xs: 0.5rem;
	--padding-s: 0.625rem;
	--padding-m: 0.75rem;
	--padding-l: 1rem;
	
	--border-radius: 5px;
	
	--line-height: 1.4rem;
	
	--content-size-l: 1170px;
	--content-size-m: 980px;
	--content-size-s: 764px;
}

@font-face {
	font-family: 'OpenSans';
	font-style: normal;
	font-weight: 300;
	src: url('../../Content/Font/OpenSans-Regular.ttf');
}

/* Elements communs */
.top_line {
    display:none;
}

h1 {
	font-size: var(--font-size-xl) !important;
	color: var(--color-primary);
	font-weight: 600;
	position: relative;
	margin: 20px 0 30px;
}

h1::before {
	position: absolute;
    bottom: -11px;
    left: 0;
	height: 3px;
    width: 92.5px;
	content: "";
    display: block;
	background-color: var(--color-secondary);
}

h2 {
	font-size: var(--font-size-l) !important;
	font-weight: 600;
}

h2, h3 {
	color: var(--color-primary);
}

body, p, label, a, button, input, h3, select, h4, h5,
#breadcrumb ul li {
	font-size: var(--font-size-s) !important;
	color: var(--black) !important;
	line-height: var(--line-height) !important;
}

/* Ajout de la couleur aux liens externes et internes sans toucher aux boutons */
a[href^="/Portail"]:not(a[class*="btn"]),
a[href^="http"]:not(a[class*="btn"]) {
	color: var(--color-html-links) !important;
}

hr {
    border-bottom: 2px solid var(--color-secondary);
}

ul li, ul li a {
	color: var(--black);
}

ul li a:hover,
ul li a:focus {
	color: var(--color-primary);
}

.icon-large {
	color: var(--color-primary) !important;
}

.icon-medium,
.icon-large.icon-credit-card {
	color: var(--color-secondary) !important;
}

a.active {
	background-color: var(--color-primary-dark) !important;
}

a {
	color: var(--color-primary);
}


/* Pop-up */
.modal-egee .modal-header{
	    background-color: var(--color-primary) !important;
}

.modal-egee .close {
	opacity: 1;
}

/* Carousel */
.carousel i {
	color: var(--color-secondary) !important;
	font-size: 40px;
}

.carousel-caption {
	background: none;
    background-color: var(--white);
	border-radius: 10px 0 0 10px;
	right: 0;
}
.carousel-caption a,
.carousel-caption h4,
.carousel-caption p {
	color: var(--black);
	padding: 0 !important;
}
.carousel-control {
	opacity: 1
}

.carousel-inner {
	border-radius: var(--border-radius);
}

.carousel {
	margin: var(--padding-l) 0;
}

.visible-desktop {
	margin: 10px 0;
}

@media (max-width: 767px) {
    .span12 .visible-desktop {
        display: block !important;
    }
	
	#myCarousel {
		display: none !important;
	}
}

/*Enleve le contour */
#out_container,
header {
	box-shadow:none !important;
	width:100% !important;
}

body {
	background-color: var(--white);
	overflow-x:	hidden;
}

@media (min-width: 1170px) {
	.main-content>*:not(.recent-actualites, .modal),
	.main-content .actualite-wrapper,
	.footer-wrapper,
	header>*:not(.navbar, .search-bar) {
		width: var(--content-size-l) !important;
		margin:auto;
	}
}

@media (min-width: 980px) and (max-width: 1199px) {
	.main-content>*:not(.recent-actualites, .modal),
	.main-content .actualite-wrapper,
	.footer-wrapper,
	header>*:not(.navbar, .search-bar) {
		width: var(--content-size-m) !important;
		margin:auto;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	.main-content>*:not(.recent-actualites, .modal),
	.main-content .actualite-wrapper,
	.footer-wrapper,
	header>*:not(.navbar) {
		width: var(--content-size-s) !important;
		margin:auto;
	}
}

@media (max-width: 767px) {
	#out_container {
		margin: 0 !important;
	}
}

/*****Police par defaut ****/
body *:not(i[class*="icon-"], span[class*="icon-"]) {
	font-family: 'OpenSans' !important;
}

/* Les boutons */

/* Bouton primaire */
.btn {
	border: solid 2px var(--color-primary) !important;
    background-color: var(--white) !important;
    color: var(--color-primary) !important;
	padding: var(--padding-xs) var(--padding-s) !important;
    line-height: 1.4 !important;
    border-radius: var(--border-radius) !important;
	text-shadow: none !important;
	background-image: none !important;
}

.btn.active, 
.btn:hover ,
.btn:focus {
	background-color: var(--color-primary) !important;
	color: var(--white) !important;
	border: solid 2px var(--color-primary) !important;
	transition: all 250ms ease-in-out 0ms;
}

.btn span:not(:last-child) {
	margin-right: 0.25rem;
}

/* Boutons secondaires */

.btn-assistant {
	font-size : var(--font-size-xs) !important;
	margin : 4px auto;
	max-width: 200px;
}

.btn-mini{
    background-color: var(--color-primary) !important;
    color: var(--white) !important;
	font-size: var(--font-size-xs);
}

.nav-connexion {
	display: flex;
    gap: var(--padding-xs);
}

.btn-mini.active, 
.btn-mini:hover ,
.btn-mini:focus{
	background-color: var(--color-primary-dark) !important;
	border: 2px solid var(--color-primary-dark) !important;
	color: var(--white) !important;
	transition: all 250ms ease-in-out 0ms;
}

.nav-connexion .btn-mini {
	background-color: var(--color-primary) !important;
	border: 2px solid var(--white) !important;
	color: var(--white) !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-connexion .btn-mini:hover {
	background-color: var(--color-tertiary) !important;
	border: 2px solid var(--color-tertiary) !important;
}

.btn-group .active {
	background-color: var(--color-primary) !important;
	color: var(--white) !important;
	box-shadow: none;
    border-color: var(--color-primary) !important;
}

.btn-group .btn[disabled] {
	opacity: 1 !important;
}

.btn-group .btn {
	padding: var(--padding-xs) !important;
}

.btn-group .btn:hover {
	border-color: var(--color-primary) !important;
}

.assistant-boutons {
	display: flex;
    height: auto;
    flex-direction: row-reverse;
}

/*.main-content, */
/*.banniere, */
.footer-wrapper .main-block, 
.footer-bottom .main-block {
	position:				relative;
	margin:					auto;
}

.main-block.accueil {
	padding-top: 25px;
}

.cartedevisite {
	color: var(--black);
}

header {
	background-color: var(--color-primary);
}

.banniere{
	background-size: 100% auto !important;
	background-color: var(--color-primary);
	display: flex;
}

#out_container > header .banniere div.logo{
	width : 100% !important;
	padding: 10px;
	margin:0;
	min-width: 150px;
}

.aideenligne .logo {
	margin: 0;
}

@media (max-width: 767px) {
	#out_container > header .banniere div.logo{
		width : 100% !important;
	}
}

/* Champs formulaires */
/* NB : On ne modifie pas les champs de formulaire de recherche */


input:not(input[type="submit"], input[type="button"], input[type="checkbox"]),
textarea {
	border: 2px solid var(--color-grey-outline) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--padding-s) 0 !important;
    height: auto !important;
    width: 100% !important;
    text-indent: var(--padding-l);
	box-sizing: border-box;
}

#detailPointDInstallation .EgeeDate input {
	box-sizing: unset !important;
	width: 95% !important;
	border-radius: 4px 0 0 4px !important;
	border: 1px solid #ccc !important;
	height: 20px !important;
    padding: 4px 6px !important;
}

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

.editor-field .selection .select2-selection {
	border: 2px solid var(--color-grey-outline) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--padding-s) 0 !important;
    height: auto !important;
	display: flex;
    align-items: center;
	min-height: 46px;
}

.editor-field .selection .select2-selection .select2-selection__arrow {
	top: 11px;
}

.editor-field .select2-container {
	width: 100% !important;
}

.editor-field .select2-container .select2-selection__rendered {
	line-height: var(--line-height);
}

.editor-field .select2-container,
input[type="checkbox"] {
	margin-bottom: 10px;
}

input:hover,
textarea:hover,
.editor-field .selection .select2-selection:hover {
	border-color: var(--color-grey-dark) !important;
}

input:focus,
textarea:focus,
.editor-field .selection .select2-selection:focus {
	border: 2px solid var(--color-primary-dark) !important;
	box-shadow: none !important;
}

/* Sélecteur de date */
.date.input-append.EgeeDate {
	width: 100%;
}

.EgeeDate>.form-line {
	width:85%;
}

.EgeeDate .add-on {
	width: 15%;
    padding: var(--padding-s) 0 !important;
    font-size: var(--font-size-s) !important;
    height: auto !important;
    line-height: var(--line-height) !important;
	border: 2px solid var(--color-grey-outline) !important;
	margin-left: 0px;
	border-radius: var(--border-radius) !important;
	border-left-width: 1px !important;
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	cursor: pointer;
}

.EgeeDate i {
	padding: 0;
}

.EgeeDate>.form-line input.editor-field-egee-date {
	width: 100% !important;
	border-right-width: 1px !important;
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}

/* Champs de recherche */
#SearchContainer input:focus,
#Login:focus,
#MotDePasse:focus {
	box-shadow: none;
	border-color: var(--color-primary);
}

#SearchContainer #Search {
	margin-left: 5px;
}

/*Menu principal */

.navbar .nav {
	list-style-type: none;
	display: flex;
	justify-content: center;
	float: none;
	margin: 0;
}

.navbar-inner {
	background-color: var(--color-primary);
	border: none;
}

.navbar .nav>li {
	border-right: 0px;
	padding: var(--padding-m) 20px;
}

.navbar .nav>li a {
	color: var(--white) !important;
	margin: 0;
	padding: 0;
}

.navbar .nav li:hover a {
	text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.navbar .nav li:hover>a {
	border-top: none;
}

.navbar .nav .active a {
	text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
	border-top: none;
}

.navbar .nav .active>a,
.navbar .nav .active>a:hover {
	background-color: transparent;
	padding: 0;
}

.navbar .nav>li:hover a,
.navbar .nav>li:hover a i {
	color: var(--white) !important;
	padding: 0;
}

.navbar .nav .active>a,
.navbar .nav .active>a:hover,
.navbar .nav .active a>i,
.navbar .nav .active a>i:hover {
	color: var(--white) !important;
	border-top: none;
}

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

.buttons-container {
	background-color: var(--color-primary);
}

.buttons-container .nav-select {
	border-radius: var(--border-radius);
}

.accueil p, .accueil h3 {
	text-align: center;
}

/* Corps page accueil */
.accueil-corps-title {
	text-transform: none;
	line-height: 1.25;
}

.accueil-corps-subtitle {
	text-transform: none;
	color: var(--color-grey-lighter);
}

.accueil-corps {
	color: var(--color-grey-dark);
}

.accueil-corps-bas-texte {
	color: var(--color-grey-dark);
}

/* PIED DE PAGE */
/*Couleur police pour pied de page*/
#footerUsager h1, #footerUsager h2, 
#footerUsager h3, #footerUsager p, 
#footerUsager strong, #footerUsager .span4,
#footerUsager a {
 color: var(--white) !important;
}

#footerUsager {
	background-color: var(--color-primary);
	width: 100%;
	margin: 0;
}

.footer-top {
	height: 20px;
	background-color: transparent !important;
}

.footer-wrapper {
	background-color: transparent !important;
    margin: auto;
}

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

.footer-bottom .main-block {
	padding: 10px 20px;
}

.footer-bottom .span12 {
	align-content: center;
}

/* Application de la taille du logo en mobile */ 
@media (max-width: 767px) {
	#footerUsager .span4 img {
		width: 25%;
	}
}


/*---liste factures bullet d'extension si plus d'information--*/
/* deploiement*/
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{
	background-color : var(--color-secondary) !important;
}

/* replis*/
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before{
	background-color : var(--color-secondary-dark) !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--color-grey-outline);
}

table thead th { 
	border-bottom-color: var(--color-grey-outline) !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before {
    line-height: 16px !important;
    font-size: var(--font-size-l);
}

/* Réduction de la taille de police du tableau de factures */
#tableFactures {
	font-size: var(--font-size-xs);
}


.dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_filter, 
.dataTables_wrapper .dataTables_info, 
.dataTables_wrapper .dataTables_processing, 
.dataTables_wrapper .dataTables_paginate {
    color: var(--black);
}

/* Tableau documents */
.table-striped td a:hover,
#tableAbonnement a:hover {
	color: var(--black);
}

/* Bloc page accueil */
@media (max-width: 480px) {
    .hero-list div.span3 {
        min-height: 300px;
    }
	
	.hero-list {
		flex-direction: column;
	}
}

@media (max-width: 767px) {
    .hero-list div.span3 {
        min-height: 300px;
    }
	
	.hero-list {
		flex-direction: column;
	}
}

.grey-box {
	background-color : var(--color-primary);
	border: none;
	border-radius: var(--border-radius);
}

.grey-box p {
	line-height: 1;
}

.hero-list {
	display: flex;
    justify-content: center;
}

.hero-list h2,
.hero-list p {
	color: var(--white) !important;
}


.hero-list h2 {
	color: var(--color-secondary) !important;
	line-height: 1.25;
}

.hero-list img {
	height: 6em;
    padding-bottom: 5px;
	font-size: var(--font-size-xs);
}

.hero-list .grey-box a {
	margin: 0;
	height: 100%;
    width: 100%;
}

.hero-list .grey-box:hover {
	background-color: var(--color-primary-dark) !important;
}

.hero-list .grey-box a:hover,
.hero-list .grey-box a:hover p,
.hero-list .grey-box .btn-connect:hover,
.hero-list .grey-box .btn-connect:hover p,
.hero-list .grey-box:hover p,
.hero-list .grey-box:hover .icon-large {
	color: var(--white) !important;
	text-decoration: none;
}

.hero-list .grey-box a:hover h2,
.hero-list .grey-box .btn-connect:hover h2,
.hero-list .grey-box:hover h2 {
	color: var(--color-secondary) !important;
	text-decoration: none;
}

/* Actualites */
.recent-actualites {
    background-color: var(--color-secondary-lighter);
    border-bottom: var(--color-secondary-lighter) solid 2px;
}

.actualites-slide .slides li,
.actualites-slide .slides li a {
	color: var(--black);
}

/*Menu Synthese abonnement*/
/*------------------------*/
#menuAbonnementSynthese-inner,
#menuAbonnementSynthese-inner p {
	color: var(--black);
}

 .incruste{
	box-shadow : none; /*pas de degrade */
	border : 3px solid var(--color-grey-outline);
	text-align: left !important;
}

#menuAbonnementSynthese-inner>.row-fluid>.span12>* {
	text-indent: 10px; /* Alinea bloc synthese */
}


#menuAbonnementSynthese-inner>.row-fluid>.span12>strong {
	padding: 10px; /* Alinea bloc synthese */
}

#synthese #menuAbonnementSynthese .title {
	position: relative;
	display: block;
	background: var(--color-primary) !important;
	color: var(--white) !important;
	-webkit-transition: background .25s ease-out;
	transition: background .25s ease-out;
}

/*- survol 
- actif
- a le focus */
#synthese #menuAbonnementSynthese .active a,
#synthese #menuAbonnementSynthese .title:hover,
#synthese #menuAbonnementSynthese .title:focus,
#synthese #menuAbonnementSynthese #menuAbonnementSynthese-inner .active h3,
#synthese #menuAbonnementSynthese .title:hover h3,
#synthese #menuAbonnementSynthese .title:focus h3,
#synthese #menuAbonnementSynthese .active .icon-medium,
#synthese #menuAbonnementSynthese .title:focus .icon-medium,
#synthese #menuAbonnementSynthese .title:hover .icon-medium {
	background-color: var(--color-primary) !important;
	color: var(--color-secondary) !important;
}

#synthese #menuAbonnementSynthese .title h3 {
	background: none !important;
	color: var(--white) !important;
	text-align: left;
	text-transform: uppercase;
}

/* Bouton acces synthese complete */
#menuAbonnementSynthese-inner>.row-fluid:last-child .span12 {
	text-align: left;
	background-color: var(--color-secondary-lighter);
	align-content: center;
}

#synthese .pull-right {
	color: var(--black) !important;
	float: left;
	width: 100%;
	line-height: 35px;
}

#menuAbonnementSynthese-inner>.row-fluid:last-child .span12:hover {
	background-color: var(--color-secondary);
}

#synthese .pull-right:hover {
	text-decoration: none;
	color: var(--black) !important;
}

.text-divider6 span {
    background-color: var(--color-secondary);
}

img.visible-desktop[src="/Portail/Content/Images/Theme/itembkg_synthese_demandes.png"] {
    width: 9%;
}

/* Majuscule dans la carte de visite */
#menuAbonnementSynthese-inner .cartedevisite .cartesynthese-dates div::first-letter,
#menuAbonnementSynthese-inner .cartedevisite .cartesynthese-montantTTC div::first-letter {
	text-transform: uppercase;
}

#breadcrumb li:last-child {
	color: var(--color-primary);
}

/* couleur icone */
#synthese #menuAbonnementSynthese .icon-medium {
	color: var(--white) !important;
}

/* Contenu page Mes contrats */
.main-content .main-block .span8 img {
	height: 60px;
    width: 60px;
    max-width: none;
    position: relative;
    top: -10px;
	left: -10px;
}

/* Etape d'une demande */
.bwizard-steps li, .bwizard-steps .activable {
	background-color : var(--color-primary) !important;
}


.bwizard-steps .active{
	background-color : var(--color-secondary) !important;
	color : var(--white);
}

.bwizard-steps .active:after{
	border-left-color: var(--color-secondary) !important;
}

.bwizard-steps li:after, .bwizard-steps .activable:after {
    position: absolute;
    right: -20px;
    top: 0;
    height: 0;
    width: 0;
    border-bottom: 20px inset transparent;
    border-left: 20px solid var(--color-primary);
    border-top: 20px inset transparent;
    content: "";
    z-index: 2;
}

.label-inverse, .badge-inverse {
    background-color: var(--color-primary);
}

.assistant-avancement ul li {
	color: var(--white);
}

.bwizard-steps .badge-inverse {
	display: none;
}

/* Personnalisation de l'image d'aide au rattachement d'un abonnement 
*********************************************************************
Pre requis : 
creer un document dans l'administration de l'AEL avec l'image souhaitee ayant 
pour code : aide_attacher_abo */
#demoFacture {
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
}

#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; 
}
/* 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);
}

/* Bouton Open id */
.accueil #openid-connect {
	background-color: inherit !important;
	box-shadow: none !important;
	border: none !important;
	background-image: none;
}

.hero-list .btn-connect {
	height: inherit;
	margin: 0;
}

#openid-connect {
    background-image: url(/Portail/Content/Images/openid.png);
}

/* Désactiver l'icône "œil" sur Edge/Chromium */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none;
}

@media print {
  /* Style lors de l'impression de la synthèse */
  .banniere {
	  display: none !important;
  }
  
  h1 {
	  font-size: 25px !important;
  }
  
  h2 {
	  font-size: 22px !important;
  }
}

/* Style propre à l'aide en ligne */
.aideenligne .head {
	background-color: var(--color-primary) !important;
}

.aideenligne img.logo {
	width: 20% !important;
}

/* Mise en page demande d'auto relève */
form[action="/Portail/fr-FR/Usager/DemandeAutoReleve/CreateAutoReleve"]>.main-block>h4,
form[action="/Portail/fr-FR/Usager/DemandeAutoReleve/CreateAutoReleve"]>.main-block>.row-fluid>.span12>h4 {
	margin-top: 10px;
}

form[action="/Portail/fr-FR/Usager/DemandeAutoReleve/CreateAutoReleve"]>.main-block .span4>h5 {
	margin-bottom: 5px;
}

/* Retrait de l'onglet prelevements dans Factures et prelevements" */
#tabFacturesPrelevement #liPrelevement {
	display: none;
}