@CHARSET "ISO-8859-1";

/**
 * Style commun à tous les portails
 * Cette feuille de style est chargé en 1ere, permettant une personnalisation du style commun au niveau d'un portail spécifique
 * ---------------------------------------------------------------------------------------------------------------------------------------------------
 * @version 2017-08-01 JN : Création (éclatement de anciennement personnalise.css)
 * @version 2018-10-12 JN : Remise à plat avec les médias queries quand c'est vraiment nécessaire
 * @version 2020-08-21 JN : sécurité des mots de passe
 * @version 2021-03-31 JN : style sur les input[type=date]
 * @version 2021-07-09 JN : autocomp
 * @version 2021-10-12 JA : utilisation de variable
 * 
 */
 
:root {
	--main_color:#244b5a;
	--second_color:#80c7bc;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* POLICES DE CARACTERES */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

@font-face {
	font-family: 'Damion-Regular';
	src: url('fonts/DAMION-REGULAR.TTF') format('truetype');
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* BALISES GENERALES */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  height: 100%;
	margin:0;
	padding:0;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#555;
	background-color:#f9f9f9;
}

table {
	width:100%;
	border-collapse:collapse;
	margin-left:auto;
	margin-right:auto;
	margin-top:0.8em;
	border:1px solid #dddddd;
	color:#474747;
}
table tr {
	border:1px solid #dddddd;
	font-size:0.9em;
}
table td {
	padding:8px;
}
table th {
	padding:8px;
}
table tr.tr_entete {
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	background-color:#fff;
	color:var(--main_color);
	font-weight:bold;
}
table a {
	color:#474747;
	text-decoration:none;
}
table a:hover {
	color:#474747;
	text-decoration:underline;
}
table tr:not(.nohover):not(.tr_entete):hover > td {
	color:#fff;
	background:var(--second_color);
}
table tr:not(.nohover):not(.tr_entete):hover > td a {
	color:#fff;
}
table tr.select td {
	color:#fff;
	background:var(--main_color);
}
select {
	padding: 8px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	font-size: 14px;
}
select:focus {
	outline: none !important;
}
input[type='text'] {
	width: 100%;
	padding: 8px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	font-size: 14px;
}
input[type=text]:focus {
	outline: none !important;
	border-color: #719ECE;
	box-shadow: 0 0 10px #719ECE;
}
input[type=text].input_disabled {
	background-color:#eee;
}
input[type='text'].input_date {
	width:108px;
}
input[type='password'] {
	width: 100%;
	padding: 8px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	font-size: 14px;
}
input[type='password']:focus {
	outline: none !important;
	border-color: #719ECE;
	box-shadow: 0 0 10px #719ECE;
}
input[type='date'] {
	width:208px;
	padding: 8px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	font-size: 14px;
}
input[type=date]:focus {
	outline: none !important;
	border-color: #719ECE;
	box-shadow: 0 0 10px #719ECE;
}
input[type='file'] {
	width: 100%;
	padding: 8px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	font-size: 14px;
}

textarea {
	width: 100%;
	padding: 8px 12px;
	margin: 8px 0;
	box-sizing: border-box;
	font-size: 14px;
}
textarea:focus {
	outline: none !important;
	border-color: #719ECE;
	box-shadow: 0 0 10px #719ECE;
}

img {
	border:none;
}

button {
	background:none;
	border:none;
	cursor:pointer;
	padding:0;
}

h1 {
	font-size:2em;
	text-align:center;
	line-height:1.1em;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:1em;
	color:var(--main_color);
}	
h2 {
	font-size:1.5em;
	text-align:center;
	line-height:1.1em;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:1em;
	color:var(--main_color);
}
h3 {
	font-size:1.428571428571429em;
	line-height:1.142857142857143em;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	color:#666666;
}
h4 {
	color:#474747;
	font-size:1em;
	text-align:left;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* STYLES COMMUNS AUX DIFFERENTS PORTAILS */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

.button_disabled, .button_disabled:hover {opacity:0.2; filter:alpha(opacity=20); cursor:default;}

#TB_overlay     {position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%;}
.TB_overlayBG   {background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;}
#TB_window      {position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%;}
#TB_title       {background-color:var(--main_color); color:#fff; height:27px; border-bottom: 1px solid #fff;}
#TB_content     {clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em;}
#TB_windowTitle {float:left; padding:6px 0 5px 10px; height:16px;}
#TB_windowClose {float:right; padding:4px 10px 4px 0;height:19px;}

#TB_confirm_size         {width:400px; height:150px;}
#TB_confirm_overlay      {position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%;}
.TB_confirm_overlayBG    {background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;}
#TB_confirm_window       {position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%;}
#TB_confirm_title        {background-color:var(--main_color); color:#fff; height:27px; border-bottom: 1px solid #fff;}
#TB_confirm_content      {clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em;}
#TB_confirm_button       {background-color:#efefef; color:#333; border-top: 1px solid #ccc; padding:4px; text-align:center; position:absolute; bottom:0; width:422px;}
#TB_confirm_windowTitle  {float:left; padding:6px 0 5px 10px; height:16px;}
#TB_confirm_image        {display:inline-block; width:90px; margin:20px 0; text-align:left; vertical-align:top;}
#TB_confirm_message      {display:inline-block; width:304px; margin:20px 0;}
#TB_confirm_label        {display:inline-block; width:90px; vertical-align:top; margin-top:5px;}
#TB_confirm_oui          {margin:0 2px 0 5px;}
#TB_confirm_non          {margin:0 5px 0 2px;}

#TB_message_overlay      {position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%;}
.TB_message_overlayBG    {background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;}
#TB_message_window       {position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%;}
#TB_message_title        {background-color:var(--main_color); color:#fff; height:27px; border-bottom: 1px solid #fff;}
#TB_message_content      {clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em;}
#TB_message_windowTitle  {float:left; padding:6px 0 5px 10px; height:16px;}
#TB_message_image        {display:inline-block; width:50px; margin:20px 0; text-align:left; vertical-align:top;}
#TB_message_message      {display:inline-block; width:344px; margin:20px 0;}

.img_cliquable {
	cursor:pointer;
}
.curseur {
	cursor:pointer;
}
/* Encart qui s'affiche lorsque l'on survole une image ou un objet ayant la classe info_msgbox. Cela affiche l'information contenue dans l'attribut title */
#msgbox {display:block; position:absolute; padding:3px;}
#msgbox {background-color:#eee; border:1px solid #999; color:#666; font-size:12px;}

.devise {
	display:none;
}

.ligne_entete {
}
.ligne_impair {
}
.ligne_pair {
}
.ligne_debit {
	font-style:italic;
}
.ligne_credit {
}

.input_date {
	width:5em;
}

.div_pagination {
	display:none;
	margin-top:1em;
	margin-bottom:1em;
	text-align:center;
}
.div_pagination>div {
	display:inline-block; margin-right:1em; 
}
.div_pagination a {
	text-decoration:underline;
	color:#474747;
}
.div_pagination a:hover {
	color:#de2560;
}
.div_numero.selected a {
	text-decoration:none;
	cursor:default;
	color:#de2560;
	font-weight:bold;
}
.div_numero.selected a:hover {
	text-decoration:none;
	cursor:default;
	color:#de2560;
}

#page {
	margin-right:auto;
	margin-left:auto;
	height: 100%;
	display: flex;
	flex-direction: column;
}
#bandeau_noscript {
	text-align:center;
	color:red;
}
#bandeau_haut {
	background-color: #fff;
	/*border:2px solid #eee;*/
}
#bandeau_haut > .bandeau_haut_1 {
	display:inline-block;
	box-sizing:border-box;
	white-space:nowrap;
	width:300px;
	margin-top:10px;
	padding:10px;
	vertical-align:top;
	text-align:right;
	height:100px;
	line-height:90px;
	border-bottom: 1px solid var(--main_color);
}
#bandeau_haut > .bandeau_haut_1 a {
	margin:0 10px;
}
#bandeau_haut > .bandeau_haut_2 {
	display:inline-block;
	box-sizing:border-box;
	white-space:nowrap;
	width:calc(100% - 300px);
	margin-top:10px;
	padding:10px;
	vertical-align:top;
	text-align:left;
	height:100px;
	line-height:110px;
	border-bottom: 1px solid var(--main_color);
}
#bandeau_haut > .bandeau_haut_2 {
	font-size:24px;
	color: var(--main_color);
}
#bandeau_haut > .bandeau_haut_2 img {
	height: 80px;
	vertical-align: top;
	margin: 0 5px 0 100px;
}
#bandeau_haut > .bandeau_haut_3 {
}
.page_index .page_preconnexion #bandeau_haut {
}
.page_adherent .page_preconnexion #bandeau_haut {
}
.page_praticien .page_preconnexion #bandeau_haut {
}
.page_structure .page_preconnexion #bandeau_haut {
}
div.bandeau_haut_logo {
	float:right;
	height:130px;
	line-height:130px;
}
div.bandeau_haut_logo img {
	vertical-align:middle;
	max-height:120px;
	max-width:300px;
}

#bandeau_bas {
	margin-top: auto;
	white-space:nowrap;
	padding:5px 0;
	background-color:var(--main_color);
}
#bandeau_bas > .bandeau_bas_1 {
	display:inline-block;
	box-sizing: border-box;
	white-space:nowrap;
	width:300px;
	line-height:20px;
	text-align:right;
	vertical-align:middle;
	padding:5px 0;
}
#bandeau_bas > .bandeau_bas_1 a {
	margin:0 10px;
}
#bandeau_bas > .bandeau_bas_2 {
	display:inline-block;
	box-sizing: border-box;
	white-space:nowrap;
	width:calc(100% - 600px);
	line-height:20px;
	text-align:center;
	vertical-align:middle;
	padding:0;
}
#bandeau_bas .bandeau_bas_copyright {
	display:inline-block;
	box-sizing: border-box;
	white-space:nowrap;
	width:300px;
	line-height:20px;
	text-align:center;
	vertical-align:bottom;
	padding:5px 0;
	font-size:12px;
	color:#bbb;
	text-align: center;
}
#bandeau_bas .bandeau_bas_nom {
	display: block;
	font-size:16px;
	color:#fff;
}
#bandeau_bas .bandeau_bas_adr {
	display: inline-block;
	padding:5px 20px;
	font-size:13px;
	color:#fff;
}
#bandeau_bas .bandeau_bas_tel {
	display: inline-block;
	padding:5px 20px;
	font-size:13px;
	color:#fff;
}

#page:not(.page_preconnexion) #contenu {
	display:flex;
	flex-direction:row;
	flex:1 0 auto;
}
.page_praticien #page:not(.page_preconnexion) #contenu {
	/*display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex: 1 0 auto;*/
}
#contenu.index {
	text-align:center;
}
#contenu.login_adherent {
	text-align:center;
}
#contenu.login_praticien {
	text-align:center;
}
#contenu.login_structure {
	text-align:center;
}

#espace_accueil_texte_haut {
	width:100%;
	text-align:center;
	color:var(--main_color);
	margin-bottom:30px;
}
#espace_accueil_texte_bas {
}
#espace_accueil_acces_adherent {
	display:inline-block;
	white-space:nowrap;
	width:25%;
	text-align:center;
	margin-top:10px;
}
#espace_accueil_acces_praticien {
	display:inline-block;
	white-space:nowrap;
	width:25%;
	text-align:center;
	margin-top:10px;
}
#espace_accueil_acces_structure {
	display:none;
}

#espace_accueil_acces_adherent img {
	display:none;
}
#espace_accueil_acces_praticien img {
	display:none;
}
#espace_accueil_acces_structure img {
	display:none;
}

#espace_accueil_acces_adherent a {
	text-decoration:none;
	color:var(--main_color);
	font-size:16px;
	padding-top:5px;
	background:url(../images/personnalise/espace_adherent.png) no-repeat center top;
	display:inline-block;
	padding-top:210px;
	width:200px;
}
#espace_accueil_acces_praticien a {
	text-decoration:none;
	color:var(--main_color);
	font-size:16px;
	padding-top:5px;
	background:url(../images/personnalise/espace_praticien.png) no-repeat center top;
	display:inline-block;
	padding-top:210px;
	width:200px;
}
#espace_accueil_acces_structure a {
}
#espace_accueil_acces_adherent a:hover {
	text-decoration:none;
	color:var(--second_color);
	background:url(../images/personnalise/espace_adherent_hover.png) no-repeat center top;
	text-decoration: underline;
}
#espace_accueil_acces_praticien a:hover {
	text-decoration:none;
	color:var(--second_color);
	background:url(../images/personnalise/espace_praticien_hover.png) no-repeat center top;
	text-decoration: underline;
}
#espace_accueil_acces_structure a:hover {
}

.image_accueil {
	width:200px;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.btn_download_fichier, .btn_download_fichier_disable {
}

.obligatoire {
	color:red;
	font-style:italic;
}
.form_div.obligatoire input {
	border:1px solid #f00;
}
.etoile {
	color:red;
	padding:0 5px;
}

.div_progress {
	display: -ms-flexbox;
	display: inline-flex;
	height:5px;
	margin-left:10px;
	margin-right:10px;
	overflow: hidden;
	line-height: 0;
	font-size: 0.75rem;
	background-color: #e9ecef;
	border-radius: 0.25rem;
}
.div_progress_bar {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	background-color: #007bff;
	transition: width 0.6s ease;
	height:5px;
}
.label_progress {
	display:inline-block;
}

.bg-danger {
  background-color: #dc3545 !important;
}
.bg-warning {
  background-color: #ffc107 !important;
}
.bg-info {
  background-color: #17a2b8 !important;
}
.bg-success {
  background-color: #28a745 !important;
}
.text-danger {
  color: #dc3545 !important;
}
.text-warning {
  color: #ffc107 !important;
}
.text-info {
  color: #17a2b8 !important;
}
.text-success {
  color: #28a745 !important;
}


/* utilisé dans mutual_web.config */
.espace_accueil_intro {
	font-size: 18px;
}
.texte_accueil {
	color:#555;
	font-size:1.014285714285714em;
	text-align:left;
}
.texte_compte_web_a_modifier {
	color:red;
	font-size:1.014285714285714em;
	text-align:left;
}
.texte_compte_web_fin_mdp {
	color:blue;
	font-size:1.014285714285714em;
	text-align:left;
}
.texte_conventionnement {
	color:#555;
	font-size:1.014285714285714em;
	text-align:left;
}
.image_conventionnement {
	width:25%;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.texte_compte_web_a_modifier {
	color:red;
	font-size:1.014285714285714em;
	text-align:left;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* LES MEDIAS QUERIES */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */


@MEDIA screen and (max-width:1023px) {

	#page {
		width:50em;/*=800px/14*/
	}
	#contenu {
		min-height:28.5714em; /*=400px/14px*/
	}
	#bandeau_haut {
		min-height:90px;
		padding-bottom:10px;
	}
	#bandeau_haut>div>a>.img_gauche {
		max-width:400px;
	}
	div.bandeau_haut_logo {
		height:90px;
		line-height:90px;
	}
	div.bandeau_haut_logo img {
		max-height:90px;
		max-width:200px;
	}
	#bandeau_bas {
		font-size:0.8em;
	}
	.ligne_entete {
		font-size:0.9em;
	}
	.ligne_impair {
		font-size:0.9em;
	}
	.ligne_pair {
		font-size:0.9em;
	}

}