@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
 * 
 */

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

:root {
	--main_color:#DD3333;
}

body {
	margin:0;
	padding:0;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
}
a {
	outline:none;
}
table {
	width:100%;
	border-collapse:collapse;
	margin:0.8em auto;
	border:1px solid #f2f2f2;
	color:#333;
}
table tr {
}
table td {
	font-weight:normal;
	padding:8px 5px;
}
table th {
	font-weight:normal;
	padding:8px 5px;
}
table a {
	color:#333;
	text-decoration:none;
}
table a:hover {
	text-decoration:underline;
}
table tr:not(.nohover):not(.tr_entete):hover > td {
	/*color:#FFFFFF;
	background:var(--main_color);*/
}
table tr:not(.nohover):not(.tr_entete):hover > td a {
	/*color:#FFFFFF;*/
}
table .tr_entete {
	border:1px solid #f2f2f2;
	color:var(--main_color);
}

input[type=text] {
	width:calc(100% - 26px);
	border:1px solid #ddd;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	padding:8px 12px;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
}
input[type=password] {
	width:calc(100% - 26px);
	border:1px solid #ddd;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	padding:8px 12px;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
}
select {
	width:100%;
	border:1px solid #ddd;
	-webkit-border-radius:6px 0 0 6px;
	-moz-border-radius:6px 0 0 6px;
	border-radius:6px 0 0 6px;
	padding:6px 12px;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
}
textarea {
	border:1px solid #ddd;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	padding:6px 12px;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
}

img {
	border:none;
}

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

h1 {
	font-size:2em;
	text-align:center;
	line-height:2em;
	font-family:Arial, Helvetica, sans-serif;
	color:var(--main_color);
	text-transform:uppercase;
	margin:1em 0 0 0;
	padding:0;
}
h2 {
	font-size:22px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	color:var(--main_color);
	margin:1em 0 0 0;
	padding:12px 0;
}
h3 {
	font-size:1em;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#fff;
	margin:0;
	padding:0;
}
h4 {
	font-size:1.428571428571429em;
	line-height:1.142857142857143em;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	color:var(--main_color);
	margin:0;
	margin-top:1em;
	padding:0;
	text-align:center;
}


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

#page {
	width:100%;/*73.14285714285714em; /*=(1024px/14px)*/
	margin-right:auto;
	margin-left:auto;
}
#bandeau_noscript {
	text-align:center;
	color:red;
}
#bandeau_haut {
	width:100%;
	font-size:0.9em;
	color:#FFFFFF;
	border-bottom:1px solid #f5f5f5;
}
#bandeau_haut > .bandeau_haut_1 {
	min-height:10px;
	background-color:#FFFFFF;
}
#bandeau_haut > .bandeau_haut_2 {
	display:inline-block;
	white-space:nowrap;
	width:calc(50% - 102px);
	padding:7px 50px;
	vertical-align:top;
}
#bandeau_haut > .bandeau_haut_3 {
	display:inline-block;
	white-space:nowrap;
	width:calc(50% - 72px);
	padding:12px 70px 10px 0;
	vertical-align:top;
	text-align:right;
}
#bandeau_haut > .bandeau_haut_3 > a{
	text-decoration:none;
	font-size:18px;
	color:var(--main_color);
}
#bandeau_haut > .bandeau_haut_3 > p{
	margin-top:10px;
	margin-right:-40px;
	float:right;
}
.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 {
	clear:both;
	width:100%;
	height:50px;
	font-size:14px;
	color:var(--main_color);
	margin-top:15px;
	padding-top:0;
	padding-bottom:0;
}
#bandeau_bas > .bandeau_bas_1 {
	float:left;
	width:450px;
	text-align:center;
	margin-top:1px;
	color:#333;
}
#bandeau_bas > .bandeau_bas_2 {
	text-align:center;
	line-height:50px;
	vertical-align:middle;
}
#bandeau_bas > .bandeau_bas_3 {
	float:right;
	width:450px;
	text-align:center;
}
#bandeau_bas > .bandeau_bas_3 p {
	color:var(--main_color);
	font-weight:400;
	font-size:14px;
	text-align:center;
	line-height:50px;
	vertical-align:middle;
	padding:0;
	margin:0;
}
#bandeau_bas > .bandeau_bas_3 img {
	margin:0 10px 0 20px;
}

#bandeau_bas a {
	color:var(--main_color);
	text-transform:uppercase;
	text-decoration:underline;
}
#bandeau_bas a:hover {
	color:#424242;
	text-decoration:none;
}

#contenu {
	width:100%;
	min-height:30.28571428571429em; /*=(628px/14px)*/
	padding-bottom:10px;
	padding-top:1px;
}
#contenu.index, #contenu.login_adherent, #contenu.login_praticien, #contenu.login_structure {
	text-align:center;
}

.img_cliquable {
	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;
}

input.input_date {
	width:5em;
}

.div_pagination {
	display:none;
}
.div_pagination {
	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:var(--main_color);
}
.div_numero.selected a {
	text-decoration:none;
	cursor:default;
	color:var(--main_color);
	font-weight:bold;
}
.div_numero.selected a:hover {
	text-decoration:none;
	cursor:default;
	color:#de2560;
}

.ligne_entete {
	font-size:1em;
	background-color:#fff;
	color:var(--main_color);
}
.ligne_impair {
	font-size:1em;
	background-color:#FFFFFF;
	color:#666;
}
.ligne_pair {
	font-size:1em;
	background-color:#FFFFFF;
	color:#666;
}
.ligne_debit {
	font-style:italic;
}
.ligne_credit {
}

#espace_accueil_texte_haut {
	width:100%;
	text-align:center;
	color:var(--main_color);
	margin-bottom:30px;
}
#espace_accueil_texte_bas {
}
#espace_accueil_acces_adherent, #espace_accueil_acces_praticien, #espace_accueil_acces_structure {
	display:inline-block;
	white-space:nowrap;
	width:20%;
	text-align:center;
}
#espace_accueil_acces_structure {
	opacity:0.5;
}
#espace_accueil_acces_adherent img {
}
#espace_accueil_acces_adherent a, #espace_accueil_acces_praticien a, #espace_accueil_acces_structure a {
	text-decoration:none;
	color:var(--main_color);
	font-size:16px;
}
#espace_accueil_acces_adherent a:hover, #espace_accueil_acces_praticien a:hover, #espace_accueil_acces_structure a:hover {
	text-decoration:underline;
}

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

.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:#666;
	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;
}


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


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

	#page {
		width:50em;/*=800px/14*/
	}
	#contenu {
		min-height:28.5714em; /*=400px/14*/
	}
	#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;
	}

}