:root {
	--color-vert: rgb(140, 230, 150);
	--color-bleu: rgb(151, 218, 247);
	--color-jaune: rgb(255, 199, 97);
	--color-violet: #8E90FF;
	--color-rouge: #F99496;
	--color-rouge-fonce:#e55959;
	--color-orange: #ff986d;
	--color-fondgris: #e8e8e8;
	--color-fondgris: #eff2f2;
	--color-fondgrisFonce: #D3DBDB;
	--color-policegris: #727272;
	--color-pourpre: #E84B95;
	--color-bleuFAMGB: #009bdb;
	--color-fondChampBleu: #E7F2FD;
	--color-bleuOnglet: #86ceee;
	--color-bleuOngletFonce: #59BCE8; /*#59BCE8*/;
	--color-titre: #59BCE8;
	--color-bordure: rgb(243, 243, 244);
	--color-fond: #f2f2f2;
	--color-section: white;
	--borderradius: 7px;
}
.rouge {
	--color: var(--color-rouge);
	--colorDark: #F55154;
}
.bleu {
	--color: var(--color-bleu);
	--colorDark: #55C3F2;
}
.vert {
	--color: var(--color-vert);
	--colorDark: #57DB67;
}
.jaune {
	--color: var(--color-jaune);
	--colorDark: #FFB224;
}
.violet {
	--color: var(--color-violet);
	--colorDark: #474AFF;
}
.orange {
	--color: var(--color-orange);
	--colorDark: #FF6D2E;
}
.gris {
	--color:rgb(238, 238, 238);
}

 @font-face {
	font-family: 'Neue Haas Grotesk Display Pro 45 Light';
	font-style: normal;
	font-weight: normal;
	src: local('Neue Haas Grotesk Display Pro 45 Light'), url('/FAMGBCSJ/OWS/CSS/fonts/NeueHaasDisplayLight.woff') format('woff');
}
 @font-face {
	font-family: 'Roboto-Regular';
	font-style: normal;
	font-weight: normal;
	src: url('/FAMGBCSJ/OWS/CSS/fonts/Roboto-Regular.ttf') format('truetype');
}
 @font-face {
	font-family: 'Roboto-Medium';
	font-style: normal;
	font-weight: normal;
	src: url('/FAMGBCSJ/OWS/CSS/fonts/Roboto-Medium.ttf') format('truetype');
}
*:not(text) {
	font-family: 'Neue Haas Grotesk Display Pro 45 Light', sans-serif;
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-policegris);
}
#chart_div text {
	font-family: 'Neue Haas Grotesk Display Pro 45 Light', sans-serif;
	color: var(--color-policegris);
}
.errorsousligne {
	text-align: right;
	font-size: 12px;
	margin-bottom: 10px;
	margin-top: -10px;
	color: #e35858;
}
body.darkmode {
	--color-fond: #2C2F47;
	--color-policegris:  white;
	--color-section: rgba(255, 255, 255, 0.3);
	--color-fondChampBleu: rgba(255, 255, 255, 0.3);
	--color-bleuOngletFonce: #018CB6;
	--color-bleuOnglet: #018CB6;
	--color-vert: #01B686;
	--color-bleu: #018CB6;
	--color-jaune: #B68601;
	--color-violet: #2B01B6;
	--color-rouge: #B60131;
	--color-titre: white;
}
body {
	position: relative;
	/*min-height: 900px;*/
	min-width: calc(728px - 170px);
	height: calc(100vh - 25px - var(--heightBandeauVersion)); /* fallback pour dvh */
	height: calc(100dvh - 25px - var(--heightBandeauVersion));
	/*overflow: scroll;*/
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    margin: 0px;
    padding: 0px;
    padding-left: 170px;
    padding-top: 25px;
    padding-right: 25px;
    background: linear-gradient(var(--color-fond), var(--color-fond));
    /*background: linear-gradient(#E7F2FD, #86ceee);*/
}
.userSelectAll {
	-webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Old versions of Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
}
polygon {
	fill-opacity : 0;
	stroke : rgba(0, 0, 0, 0);
    transition: fill-opacity 0.4s ease;
}
polygon.color {
	fill-opacity : 0.8;
}
polygon:hover {
	cursor: pointer;
	fill-opacity : 0.5;
}
polygon {fill: var(--color);}

.unClickable {
	pointer-events: none;
}



ol {
	margin: 0px;
	padding: 0px;
	margin-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
	margin-bottom: 24px;
}
.hr {
	background-color: #cdcdcd;
	width: 100%;
	height: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.hr.hr20 {
	margin-top: 20px;
	margin-bottom: 20px;
}
#DHTMLSuite_modalBox_contentDiv .hr {
	width: calc(100% - 25px);
}
.bandeau {
	width: 100vw;
	height: 100%;
	background: no-repeat center/cover url('../Images/istock_842852944.jpeg');
	position: absolute;
	top: 0px;
	left: 0px;
	filter: blur(3px);
}
#loader2 {
	/*background: no-repeat center/auto url('../Images/loading.gif');*/
	display: none;
	position: absolute;
	z-index: 1;
	width: 80px;
	height: 80px;
	border-radius: 60px;
	border: 10px solid transparent;
	border-top-color: var(--color-bleuOngletFonce);
	border-left-color: var(--color-bleuOngletFonce);
	border-right-color: var(--color-bleu);
	border-bottom-color: var(--color-bleuOngletFonce);
	top: calc(50% - 45px);
  	left: calc(50% - 45px);
  	z-index: 2;
  	animation: rotateloader 1s linear infinite forwards; 
}
@keyframes rotateloader {
    0% {
    	transform: rotate(0deg);
    }
    100% {
    	transform: rotate(360deg);
    }
}
#menu {
	width: 150px;
	height: calc(100% - 100px - var(--heightBandeauVersion));
	position: fixed;
	left: 0px;
	top: var(--heightBandeauVersion);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 100px;
	background-size: 100px, cover;
	background-repeat: no-repeat;
	background-image: url("../Images/LogoMediDay_fondBleu.png"), linear-gradient(135deg, var(--color-bleuOnglet), var(--color-bleuFAMGB)); /*RL*/
	background-position: center 15px, center;
	transition: width 0.4s ease; /* Standard */
}
.darkmode #menu {
	border-right: 2px dotted lightgray;
} 
#mainContent {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% + 200px);
	height: calc(100% + 25px);
	margin-left: -175px;
	margin-top: -25px;
	margin-right: -25px;
}
.containerconnexion {
	width:370px;
	max-width: calc(100%);
	background-color: white;
	margin-top: -120px;
	z-index: 10;
	border-radius: var(--borderradius);
	border: 1px solid var(--color-bordure);
}
.containerconnexionblanc {
	background: white url('../images/LogoMediDay_fondBlanc.png') no-repeat;
	background-size: 140px auto;
	background-position: center 10px;
	padding: 120px 25px 26px 25px;
	border-radius: var(--borderradius);
	width: calc(100% - 50px);
}
.containerconnexion.definepassword, .containerconnexion.resetpassword {
	width:450px;
	left: calc(50% - 225px); /*width divisé par 2*/
}
.indication {
	text-align:right;
}
.containerconnexion .indicationspassword {
	text-align:center;
	margin-bottom:13px;
	color: var(--color-rouge);
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1.5px;
}
.containerconnexion table {
	margin: 0px 0px 25px 0px;
	width:100%;
	border-collapse:collapse;
}
.containerconnexion table td:first-child {
	display: flex;
	align-items: center;
}
.containerconnexion .message{
	color: var(--color-policegris);
	font-size:19px;
	font-weight: bold;
	text-align:center;
	max-width:500px;
	margin:auto;
	margin-top:0px;
	margin-bottom:24px;
	letter-spacing: 1.5px;
}
.containerconnexion .message a{
	color:var(--color-one);
	text-decoration:none;
}
.containerconnexion .message a:hover{
	text-decoration:underline;
}
.containerconnexion .message .blue{
	font-weight: bold;
	letter-spacing: 1.5px;
}
.containerconnexion .texte {
	color: var(--color-policegris);
	text-align:center;
	margin:auto;
	margin-bottom:13px;
	font-size: 14px;
	max-width:380px;
	width: 100%;
}
.containerconnexion input[type=text],
.containerconnexion input[type=password] {
	width: calc(100% - 45px);
	margin: 0px 0px 13px 0px;
	padding-left: 35px;
	background-repeat: no-repeat;
}
.containerconnexion input[type=text] {
	background-position:10px 10px;
	background-image:url('../images/iconeusername.png');
}
.containerconnexion input[type=password] {
	background-image: url('../images/iconepassword.png');
	background-position:10px 10px;
}
.containerconnexion .errormessage {
	color:red;
	margin-top:25px;
	text-align: center;
}
.containerconnexion .tdforgot a, 
.containerconnexion input[type="checkbox"] + label, 
.containerconnexion .errormessage, 
.containerconnexion .byorganica {
	font-weight: bold;
	font-size:12px;
	letter-spacing: 1.5px;
}
.containerconnexion input[type="checkbox"] + label {
	color: var(--color-policegris);
	margin-top: 9px;
}
.containerconnexion .tdforgot a {
	color:var(--color-bleuFAMGB);
}
.containerconnexion .tdforgot {
	text-align:right;
}
.containerconnexion .byorganica {
	width:370px;
	max-width: calc(100%);
	text-align: right;
	margin-top: 3px;
	position: absolute;
}
.containerconnexion .byorganica a{
	text-decoration:none;
	color: white;
	text-shadow: 2px 2px 3px #939393;
}
.containerconnexion .byorganica a:hover{
	text-decoration:underline;
}
.containerconnexion input[type=text],
.containerconnexion input[type=password] {
	display:block;
	max-width: 100%;
}
.containerconnexion input[type=text]:disabled {
	background-color:#f0f0f1;
	-webkit-text-fill-color: #727272; /* required on iOS */
	opacity: 1; /* required on iOS */
}
.containerconnexion span.invalide {
	margin: -42px 0px 0px 400px;
}
.containerconnexion .form {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.blocChapitre, 
.containerconnexion, 
#dialogueInfo, 
#dialogueChoix, 
.postit, 
.ligneJour, 
.listeAppelPart2 .scrolloverlay {
	animation: 0.5s ease-out 0s blocChapitre; /* duration | timing-function | delay | name */
}
@keyframes blocChapitre {
    from {opacity: 0;}
    to {opacity:1;}
}
#dialogueInfo, #dialogueChoix {
	position: fixed;
	z-index: 100;
	overflow: hidden;
	display: none;
	border-radius: var(--borderradius);
	width: calc(100vw - 60px);
	margin: 5px; 
	padding: 0px 25px 25px 25px;
	background-color: var(--color-fond);
	border: 1px solid var(--color-bordure);
	top: 0px;
	left: 0px;
}
#dialogueInfo {
	background-size: 90px, 150px;
	background-repeat: no-repeat;
	background-image: url("../Images/LogoMediDay_fondBlanc.png"), url("../Images/logoFAMGB.png");
	background-position: 24px 8px, 25px calc(100% - 20px);
	height: calc(100vh - 37px);
}
#dialogueChoix {
	padding-top: 25px;
	height: calc(100vh - 62px);
}
#dialogueAppelant, 
.partie1, 
#calendar, 
#calendarModele, 
.centre, 
.listeAppelPart1, 
.listeAppelPart2 {
	background-color: var(--color-section);
	border: 1px solid var(--color-bordure);
	border-radius: var(--borderradius);
	overflow: hidden;
	position: relative;
}
#dialogueAppelant {
	width: max-content;
	height: calc(100vh - 50px);
	padding: 25px;
	z-index: 2;
}
#dialogueAppelant .form {
	width: 750px;
}
#calendar, #calendarModele {
	width: calc(100%);
	height: calc(100%);
	margin: auto;
}
#quartier, #calendar, #calendarModele, #mesCoordonnees {
	max-width: 1300px;
}
.partie1 {
	width: calc(100%);
	height: calc(100% - 10px);
	padding-bottom: 10px;
}
.centre {
	padding: 25px;
	margin: auto;
	border: 1px solid var(--color-bordure);
	border-radius: var(--borderradius);
	height: calc(100% - 50px);
	width: calc(100% - 50px);
}
#ListeAppelPage {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	position: relative;
}
.listeAppelPart1, .listeAppelPart2 {
	height: calc(100% - 50px);
	padding: 25px;
}
.listeAppelPart1 {
	width: calc(60% - 12.5px - 50px);
	position: relative;
}
.listeAppelPart2 {
	width: calc(40% - 12.5px - 50px);
}
#resultTableau, #resultCarte {
	display: none;
	position: relative;
}
#resultTableau {
	padding-left: 100px;
	width: calc(100% - 200px);	
	height: 100%;
}
#resultTableau.actif {
	display: flex;
}
#resultCarte {
	display: none;
	padding: 60px 25px 25px 25px;
	width: calc(100% - 50px);
	height: calc(100% - 100px);
	position: relative;	
}
#resultCarte.actif {
	display: block;
}
#resultCarte .SstitreResultats {
	position: absolute;
	width: calc(100% - 50px);
	margin-top: -43px;
	text-align: right;
}
.partie2 {
	width: 240px;
	min-width: 240px;
	padding: 0px 25px 25px 0px;
	height: calc(100vh - 50px);
}
.result {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 100%;
}
.colMedecin {
	min-width: 200px;
	padding-right: 7px;
	z-index: 1;
	border-top: 1px solid rgb(243, 243, 244);
	margin-top: 60px;
	position: relative;
}
.colMedecin ul  {
	list-style-type: none;
	width: 100%;
	padding: 0px;
	margin: 0px;
	position: relative;
	margin-top: 21px;
	height: calc(100% - 115px);
	position: absolute;
	height: calc(100% - 136px);
}
.colHeure, .colHeureLigne {
	position: absolute;
	height: calc(100% - 187px);
}
.colHeure {
	z-index: 4;
	width: 80px;
	padding-top: 162px;
	background-color: white;
	left: 0px;
}
.colHeurePlanning {
	padding-top: 0px;
	height: 100%;
	top: -10px;
}
:is(.colHeurePlanning, .colHeure) li:not(:nth-child(3n + 1)) span {
	display: none;
}
.colHeureLigne {
	margin-left: -100px;
	padding-right: 25px;
	margin-top: 162px;
	z-index: 1;
	width: calc(100% + 100px);
	left: 84px;
}
.colHeure ul, .colHeureLigne ul  {
	list-style-type: none;
	width: 100%;
	padding: 0px;
	margin: 0px;
	margin-top: 10px;
	height: calc(100% - 10px);
}
.colHeure li, .colHeureLigne li {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
	line-height: 35px;
	text-align: left;
	position: relative;
}
.colHeure li {
	width: calc(80px);
}
.colHeureLigne li {
	left: 100px;
	width: calc(100% - 100px);
}
.colHeureLigne li:nth-child(2n + 1) { /* plages de 30 minutes */
/*	border-top: 1px solid rgb(243, 243, 244);*/
}

.colHeure li {
	border-top: 1px solid transparent;
}
.colMedecin li {
	border-top: 1px solid transparent;
}
.colHeureLigne li, 
.ligneHeure .tranchHeure {
	border-top: 1px solid rgb(243, 243, 244);
}
.colHeureLigne li:nth-child(3n + 1),
.ligneHeure .tranchHeure:nth-child(3n + 1) { /* plages de 20 minutes */
	border-top: 1px solid var(--color-fondgrisFonce);
}

.colHeure span {
	font-size: 13px;
	height: 100%;
	color: var(--color-policegris);
	position: absolute;
	margin-top: -13px;
	background-color: white;
	z-index: 2;
	border-bottom: 1px solid white;
	/*padding: 0px 25px 0px 25px;*/ /*BV : 14/06/2022 : remplacement de cette ligne par les 2 en-dessous*/
	text-align:center;
	width:100%;
}
.colMedecin .nomMedecin {
	padding-left: 10px;
	height: 90px;
	overflow: hidden;
	position: relative;
}
.infoMededin {
	background: no-repeat center/10px auto url("../Images/info.png") var(--color-bleuOnglet);
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	right: 4px;
	border-radius: var(--borderradius);
	cursor: pointer;
	z-index: 3;
}
.colMedecin.actif {
	z-index: 2;
}
.colMedecin .vignette {
	position: absolute;
	opacity: 0;
	transform: translateY(-200px);
	width: auto;
	height: auto;
	background-color: white;
	padding: 25px;
	border:  1px solid #f2f2f2;
	border-radius: var(--borderradius);
	min-width: 200px;
	transition: all 0.4s ease;
	-webkit-box-shadow: 3px 3px 3px 1px #D4D4D4;
	box-shadow: 3px 3px 3px 1px #D4D4D4;
	cursor: pointer;
	z-index: -1;
	top: 90px;
}
.colMedecin .vignette.actif {
	opacity: 1;
	transform: translateY(0px);
	z-index: 3;
}
.colMedecin .nomMedecin .distance a {
	font-size: 32px;
	line-height: initial;
	margin-top: 5px;
	color: var(--color-policegris);
	text-decoration: none;
}
.colMedecin .nomMedecin .distance a:hover , .colMedecin .nomMedecin .distance a:hover .uniteDistance{
	color: var(--color-bleuFAMGB);
}
.colMedecin .nomMedecin .spanNomMedecin, .colMedecin .nomMedecin .uniteDistance a {
	color: var(--color-policegris);
	font-size: 14px;
	text-decoration: none;
}
.colMedecin .nomMedecin .spanNomMedecin {
	display: flex;
	flex-direction: row;
	position: relative;
	z-index: 2;
	padding-right: 28px;
}
.colMedecin .nomMedecin .uniteDistance {
	margin-left: 5px;
}
.colMedecin li {
	width: calc(100%);		
	margin-bottom: 0px;
	position: relative;
}
.colHeure li, 
.colHeureLigne li,
.colMedecin li {
	height: calc((100% - (var(--nbreTranchJour) * 1px)) / var(--nbreTranchJour));
}

.form div.ligne {
	margin-bottom: 10px;
	display: flex;
	position: relative;
}
#mesCoordonnees .form div.ligne:not(.ligneBouton) {
	max-width: 500px;
}
#mesCoordonnees .form div.ligne > div:nth-child(2) {
	flex-grow: 1;
}
.form div.divligneBoutons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 25px;
	margin-inline: auto;
	align-items: center;
}
.form div.divligneBoutons .bouton:hover {
	border: 1px solid var(--color-rouge-fonce);
	background-color: var(--color-rouge-fonce);
} 
.form div.divligneBoutons .bouton {
	background-color: var(--color-rouge);
	border: 1px solid var(--color-rouge);
	width: 100%;
}
.form div.ligne.marginBottom {
	margin-bottom: 35px;
}
#dialogueChoix.form div.ligne {
	display: flex;
	flex-direction: column;
}
#statistiques.form div.ligne {
	display: flex;
	flex-direction: column;
}

input, textarea, #listeQuartierAdresse2 {
	min-height: 36px;
	padding: 1px 10px 2px 10px;
	margin: 0;
	resize: none;
}
input[type="text"] {
	height: 36px;
}
#listeQuartierAdresse2 {
	height: auto;
	max-height: 170px;
}
input, textarea {
	width: calc(100% - 166px - 20px);
}
select {
	width: calc(100%);
	padding: 3px 10px 3px 10px;
	position: relative;
	min-height: 47px;
	height: 47px;
	cursor: pointer;
}
select.prefixe {
	max-width:70px;
}
#mesCoordonnees select {
	height:43px;
	min-height:43px;
}
input, textarea, select, #listeQuartierAdresse2 {
	background-color: var(--color-fondChampBleu);
	color: var(--color-policegris);
	border: 2px solid var(--color-fondChampBleu);
	border-radius: var(--borderradius);
	outline: none;
	font-size: 15px;
	resize: none;
	transition: border-color 0.4s ease, background-color 0.4s ease; /* Standard */	
}
input:focus, textarea:focus, select:focus {
	border: 2px solid var(--color-bleuOngletFonce);
}
input:hover, textarea:hover, select:hover {
	border: 2px solid var(--color-bleuOngletFonce);
}
select option {
	padding: 3px 3px 3px 5px;
}
[id^=selectionRelMedecin], [id^=selectionRelMaisonMed] {
	width: calc(100% - 166px - 20px);
	position: absolute;
	left: 166px;
	top: 39px;
}

.form .libelle {
	font-size: 14px;
	padding: 0px 16px 0px 0px;
	margin: 0;
	width: 150px;
	line-height: 18px;
	text-align: right;
	display: flex;
   	justify-content: flex-end;
   	align-items: center;
   	flex-shrink: 0;
}
.form .voirplus {
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	color: var(--color-bleuFAMGB);
	cursor: pointer;
}
.form .voirplus:hover {
	text-decoration: underline;
}
.divSearchList {
	position: absolute;
	top: 17px;
	right: 25px;
}
.divSearchList input {
	width: calc(100% - 24px);
}
.listeAppelPart2 .form .libelle {
	width: calc(40% - 16px);
	font-size: 16px;
	line-height: 24px;
	align-items: flex-start;
}
.modalDialog_contentDiv .form .libelle {
	align-items: flex-start;
	line-height: 24px;
}
.result .form .libelle, 
#dialogueChoix.form .libelle,
#dialogueDupliquerSemaine.form .libelle {
	text-align: left;
	margin-bottom: 5px;
	justify-content: flex-start;
}
#dialogueDupliquerSemaine.form .libelle {
	width: 100%;
}
.result input, 
.result textarea, 
.result .form .libelle,
#dialogueChoix input, 
#dialogueChoix textarea, 
#dialogueChoix.form .libelle,
#listeQuartierAdresse2 {
	width: calc(100% - 22px);
}
input[type="checkbox"], input[type="radio"] {
  	display: none;
}
input[type="checkbox"] + label::before, input[type="radio"] + label::before {
  	content: "";
  	box-sizing: border-box;
  	height: 20px;
  	width: 20px;
  	min-height: 20px;
  	min-width: 20px;
  	border: 1px solid #B3B3B3;
  	display: block;
  	margin-right: 8px;
  	vertical-align: middle;
  	background-color: white;
  	margin-left: 0px;
  	border-radius: var(--borderradius);
  	background-repeat: no-repeat;
/*  	margin-top: -3px;*/
}
input[type="checkbox"] + label:hover::before, input[type="radio"] + label:hover::before {
	border: 1px solid var(--color-bleuOngletFonce);
	transition: border-color 0.4s ease; /* Standard */
}
input[type="checkbox"] + label:hover, 
input[type="radio"] + label:hover {
	color: var(--color-bleuFAMGB);
	transition: color 0.4s ease; /* Standard */
}

.containerconnexion input[type="checkbox"] + label::before {
	margin-right: 10px;
}
input[type="radio"]:checked + label::before {
	background-image: url("../Images/checkradio2.png");
  	background-position: 5px 5px;
   	background-size: 8px;
}
input[type="checkbox"]:checked + label::before {
	background-image: url("../Images/checkbox.png");
  	background-position: 3px 4px;
  	background-size: 13px;
}
input[type="checkbox"] + label, 
input[type="radio"] + label  {
  	margin-top: 7px;
  	margin-bottom: 7px;
  	display: flex;
/*	align-items: center;*/
	font-size: 16px;
	line-height: 20px;
}
input[type="checkbox"] + label a {
	font-size: 16px;
	line-height: 20px;
	color: var(--color-bleuFAMGB);
	margin-left: 4px;
	display: contents;
}
input[type="checkbox"] + label.noMarginBottom, 
input[type="radio"] + label.noMarginBottom  {
	margin-bottom: 0px;
}
input[type="checkbox"].checkboxCommune + label {
	margin-top: 5px;
  	margin-bottom: 5px;
  	font-size: 17px;
}
input[type="checkbox"].checkboxCommune.selected + label {
	font-weight: bold;
	letter-spacing: 1.5px;
}
.fondCheckbox label {
	color: white;
}
input.red, 
textarea.red, 
input[type="text"].red, 
textarea.red, 
.select-selected.red,
select.red,
input.red:disabled, 
input[type="text"].red:disabled {
	background-color: #FDE7E7;
	border-color: #FDE7E7;
}
.displayNone {
	opacity: 0;
	pointer-events: none;
}
#ficheAppelRecherche {
	width: 200px;
}
.date {
	font-size: 20px;
	color: rgb(129, 120, 135);
	font-weight: bold;
	letter-spacing: 1.5px;
	text-align: center;
}
.ligneBleue {
	position: absolute;
	width: calc(100%);
	border-bottom: 2px solid #009bdb;
	margin-left: -15px;
	z-index: 3;
	height: 0px;
}
.ligneBleueText {
	position: relative;
	color: #009bdb;
	font-size: 12px;
	text-align: right;
	height: 0px;
}
.fondCheckbox {
	width: calc(100% - 8px);	
	border-radius: var(--borderradius);
	margin-bottom: 4px;
	padding: 4px;
	background-color: var(--color);
	transition: background-color 0.4s ease; /* Standard */
}
.fondCheckbox:hover {
	background-color: rgba(0,0,0,0);
}
.fondCheckbox input[type="checkbox"] + label {
	margin-top: 0px;
	margin-bottom: 0px;
}
.fondCheckbox input[type="checkbox"] + label::before {
	border:  1px solid white;
	transition: border-color 0.4s ease; /* Standard */
}
.fondCheckbox:hover input[type="checkbox"] + label::before {
	border: 1px solid var(--color);
}
.fondCheckbox:hover input[type="checkbox"] + label {
	color: var(--color);
}
.titre, .sousTitre {
	margin: 0px 0px 25px 0px;
}
.sousTitre.marginTop {
	margin-top: 35px;
}
.marginBottom {
	margin-bottom: 35px;
}
.titre {
	font-size: 30px;
	text-align: center;
	color: var(--color-titre);
	min-height: 32px;
}
.titre.titrePage {
	text-align: left;
}
.titre.titreReserv {
	padding-left: 100px;
	margin-top: 33px;
}
.titreEtBouton {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: calc(100% + 55px - 32px - 16px);
	gap: 16px;
/*	height: 32px;*/
	margin: 0px 0px 16px -55px;
}
.titreEtBouton .titre {
	margin-bottom: 0px;
}
#dialogueInfo .titre {
	text-align: left;
}
.sousTitre {
	font-size: 25px;
	color: var(--color-titre);
}
.sousTitre.sousTitreCarte {
	position: sticky;
	top: 0px;
	left: 0px;
	z-index: 1;
}
.recuppassword .sousTitre, .modalDialog_contentDiv .sousTitre {
	margin-top: 0px;
}
#patient_MarqueurNum {
	display: none;
}
.bouton, input[type="submit"], input[type="button"] {
	font-size: 14px;
	width: max-content;
	line-height: 21px;
	padding: 7px 28px 8px 27px;
	white-space: nowrap;
	border-radius: var(--borderradius);
}
.bouton.boutonColor {
	background-color: var(--color);
	border: 1px solid var(--color);
}
.bouton.boutonColor:hover {
	background-color: white;
	color: var(--color);
	border: 1px solid var(--color);
}
.bouton.poubelle {
	background-image: url("../Images/poubelle.png");
	background-size:20px 20px;
	background-repeat:no-repeat;
	padding-left:50px;
	background-position:15px center;
	background-color:#ee7373;
	border:1px solid #ee7373;
}
.bouton.poubelle:hover {
	background-color:#ce1515;
	border:1px solid #ce1515;
}

:is(.bouton, 
	.flecheDroite, .flecheGauche, .flechePlanning,
	.boutonGauche, .boutonDroite, 
	input[type="button"], input[type="submit"], 
	.flechedate
) {
	background-color: var(--color-bleuOnglet);
	border: 1px solid var(--color-bleuOnglet);
	color: white;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	letter-spacing: 1.5px;
	transition: all 0.4s ease; /* Standard */
}
.flechePlanning {
	display: none;
}
:is(.bouton, 
	.flecheDroite, .flecheGauche,
	.boutonGauche, .boutonDroite, 
	input[type="button"], input[type="submit"], 
	.flechedate
):hover {
	border: 1px solid var(--color-bleuOngletFonce);
	background-color: var(--color-bleuOngletFonce);
}
.bouton.completesemtype {
	background-color:#e1bbd1;
	border:1px solid #e1bbd1;
}
.bouton.completesemtype:hover {
	background-color:#c893b1;
	border:1px solid #c893b1;
}

.bouton.boutonSemaineType, 
#Annuler.bouton, 
.bouton.boutonAnnuler {
	background-color: white;
	color: #5ebee6;
	border: 1px solid #5ebee6;
}
#boutonDezoom, 
#boutonZoom {
	width: 40px;
	height: 40px;
	background-color: white;
	color: #5ebee6;
	border: 1px solid #5ebee6;
	border-radius: var(--borderradius);
	transition: all 0.4s ease; /* Standard */
	cursor: pointer;
	font-size: 40px;
	line-height: 40px;
	text-align: center;
}
#boutonDezoom {
	line-height: 34px;
}

.bouton.boutonSemaineType:hover , 
#Annuler.bouton:hover , 
.bouton.boutonAnnuler:hover ,
#boutonDezoom:hover , 
#boutonZoom:hover {
	background-color: var(--color-bleuOnglet);
	border: 1px solid var(--color-bleuOnglet);
	color: white;
}
#Annuler.bouton, .bouton.boutonAnnuler {
/*	margin-right: 10px;*/
}
.flechedate {
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: var(--borderradius);
}
input:disabled, 
input[type="text"]:disabled, input[type="text"].disabled,
textarea:disabled , 
input[type="submit"]:disabled, input[type="button"]:disabled, 
.bouton.disabled, 
.flecheGauche.disabled, 
#boutonDezoom.disabled, 
#boutonZoom.disabled,
.flechedate.disabled, 
.flechePlanning.disabled,
input:disabled, 
input[type="text"]:disabled, input[type="text"].disabled
textarea:disabled, 
select:disabled {
	pointer-events: none;
	background-color: var(--color-fondgrisFonce);
	border-color: var(--color-fondgrisFonce);
	border: 1px solid var(--color-fondgrisFonce);
}
input:disabled, 
input[type="text"]:disabled, input[type="text"].disabled
textarea:disabled, 
select:disabled {
	border: 2px solid var(--color-fondgrisFonce);
}

.alignSelfCenter {
	align-self: center;
}

#boutonDezoom.disabled, 
#boutonZoom.disabled {
	color: var(--color-policegris);
}
.flecheGauche, .flecheDroite {
	font-size: 25px;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	position: absolute;
	z-index: 4;
	margin-top: 10px;
}
.boutonGauche, .boutonDroite, .flechePlanning {
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 30px;
	font-size: 20px;
}
.boutonGauche, .boutonDroite {
	position: relative;
	z-index: 1;
}
.flecheGauche {
	margin-left: -10px;
}
.flecheDroite {
	margin-left: 35px;
}
#boutonZoomDezoom {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 5px;
	z-index: 1;
	position: fixed;
	bottom: 85px;
	right: 40px;
}
.ligneBouton {
	display: flex;
	justify-content: flex-end;
	margin-top: 25px;
	gap: 12px;
}
.ligneBouton.ligneBoutonCentre {
	justify-content: center;
}
.form div.ligne.ligneBouton {
	margin-bottom: 0px;
}
#fondGris {
	pointer-events: none;
	width: 100vw;
	height: 100vh;
	background-color: black;
	position: fixed;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 1;
	opacity: 0.5;
}
#boutonCarte, #boutonCarte2 {
	margin-top: 11px;
	display: flex;
	justify-content: center;
	position: absolute;
	z-index: 4;
}
#boutonCarte {
	margin-left: 100px;
}
#boutonCarte2 {
	margin-left: 25px;
}
.ligneBouton input:first-child {
/*	margin-right: 10px;*/
}
#appelant {
	display: none;
}
label {
	cursor: pointer;
}
.flex {
	display: flex;
	justify-content: space-between;
}
.flex .colonne {
	width: calc(33% - 60px);
	background-color: var(--color-section);
	border-radius: var(--borderradius);
	height: calc(100vh - 176px - 50px);
	padding: 25px;
}
.flex .colonne, .scrolloverlay {
/*	overflow-y: overlay;
*/	overflow-x: hidden;
	scrollbar-color: #e8e8e8 rgba(0,0,0,0);
	scrollbar-width: thin;
}
.scroll {
	/*overflow-y: scroll;*/ /*BV OY : mise en commentaire 15/07/2022 : sur la page Localisations on voit un ascenseur qui n'a rien à faire là à priori sur chrome uniquement */
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-color: #e8e8e8 rgba(0,0,0,0);
	scrollbar-width: thin;
}
#dialogueChoix .flex .colonne {
	height: calc(100vh - 153px);
	padding-top: 25px;
}
#dialogueChoix .flex .colonne:nth-child(1) {
	width: calc(25% - 60px);
}
#dialogueChoix .flex .colonne:nth-child(2) {
	width: calc(25% - 60px);
}
#dialogueChoix .flex .colonne:nth-child(3) {
	width: calc(50% - 60px);
	position: relative;
	overflow-x: scroll;
}
#resultColMedecin {
	width: auto;
	height: 100%;
	display: flex;
	flex-direction: row;
	position: absolute;
	left: 84px;
	top: 0px;
	z-index: 3;
}
#lienFAMGB {
	display: block;
	position: absolute;
	width: 100%;
	background-repeat: no-repeat;
}
#lienFAMGB {
	background-image: url("../Images/logoFAMGBvertBlanc.png");
	background-position: center -1px;
	bottom: 50px;
	background-size: 95px;
	height: 70px;
}
#developped {
	color: white;
	position: absolute;
	text-align: center;
	width: 100%;
	font-size: 11px;
	text-decoration: none;
	bottom: 15px;
}
#menuLangue {
	color: white;
	text-align: center;
	font-size: 14px;
	margin-bottom: 35px;
}
#menuLangue a, .deconnexion a, .nomUtil {
	color: white !important;
	cursor: pointer;
	text-decoration: none;
	font-size: 12px;
	text-align: center;
}
.nomUtil {
	margin-bottom: 10px;
}
.nomUtil a {
 	text-decoration: none;
 	color: white;
 	font-size: 12px;
 	display: block;
}
.nomUtil a:hover {
	text-decoration: underline;
}
#menuLangue a, .deconnexion a {
	font-weight: bold;
	letter-spacing: 1.5px;
}
#menuLangue span {
	color: white !important;
	text-decoration: underline;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1.5px;
}
.menuCenter {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.menuChapitre {
	margin-inline: auto;
	color: white;
	cursor: pointer;
	width: calc(100% - 16px - 16px);
	height: auto;
	position: relative;
	border-radius: var(--borderradius);
	background-color: rgba(0,0,0,0); 
	padding: 10px 8px;

	transition: background-color 0.3s ease;
}
.menuChapitre.menuOuvert {
	background-color: white;
	pointer-events: none;
}
.menuChapitre:hover {
	background-color: rgba(255,255,255,0.3);
}

.menuChapitre .menuChapitreImg {
	--sizeIcone: 30px;

	height: var(--sizeIcone);
	-webkit-mask: var(--urlIcone) no-repeat center/var(--sizeIcone);
	mask: var(--urlIcone) no-repeat center/var(--sizeIcone);

	background-color: white;
	width: 100%;
	margin-bottom: 6px;
}
.menuChapitre.menuOuvert .menuChapitreImg {
	background-color: var(--color-bleuFAMGB);
}
.menuChapitre.menucoordonnees .menuChapitreImg {--urlIcone: url("../Images/icone_account_circle.svg");}
.menuChapitre.menuplanning .menuChapitreImg {--urlIcone: url("../Images/icone_calendar_month.svg");}
.menuChapitre.menuStatistiques .menuChapitreImg {--urlIcone: url("../Images/icone_Analytics.svg");}
.menuChapitre.menuAppelListe .menuChapitreImg {--urlIcone: url("../Images/icone_list.svg");}
.menuChapitre.menusemaineType .menuChapitreImg {--urlIcone: url("../Images/icone_event.svg");}
.menuChapitre.menulocalisations .menuChapitreImg {--urlIcone: url("../Images/icone_pin_drop.svg");}
.menuChapitre.menuAppelEntrant .menuChapitreImg {--urlIcone: url("../Images/icone_support_agent.svg");}

.menuChapitre.menuGuide .menuChapitreImg {
	-webkit-mask-image: unset;
	mask-image: unset;
	background: no-repeat center/18px auto url("../Images/info.png");
}

.menuChapitre div.menuChapitreLibelle {
	color: white;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1.5px;
	text-decoration: none;
	text-align: center;
	line-height: 16px;
}
.menuChapitre.menuOuvert div.menuChapitreLibelle {
	color: var(--color-bleuFAMGB);
}

ul.propositions {
	position: relative;
	background-color: #FDE7F1;
	margin: 0px;
	padding: 0px;
	z-index: 1;
}
.propositions li {
    width: 100%;
    cursor: pointer;
	font-size: 15px;
	min-height: 36px;
	padding: 1px 10px 2px 10px;
	color: #424242;
	background-color: #FDE7F1;
	line-height: 36px;
}
.propositions li:nth-child(1) {
	border-radius: var(--borderradius) var(--borderradius) 0px 0px;
}
.propositions li:last-child {
	border-radius: 0px 0px var(--borderradius) var(--borderradius);
}
.propositions li:hover {
    background-color: #DDDDDD;
}
.propositions {
    list-style: none;
}
.boutonDateDiv {
	width:max-content;
	display:flex;
	justify-content:space-between;
	align-items: center;
	height: 32px;
	position: relative;
	border-radius: 16px;
	background-color: var(--color-fondChampBleu);
}
.headerSemaine {
	width: max-content;
	margin-left: 12px;
	margin-right: 12px;
	cursor: pointer;
	min-width: 150px;
	text-align: center;
	transition: color 0.3s;
}
.headerSemaine:hover {
	color: var(--color-bleuFAMGB);
}
.ligneJour, .ligneHeure {
	display: flex;
	flex-direction: row;
	width: calc(100% - 55px);
	width: calc(100%);
}
.ligneJour .vide, .ligneHeure .libelleHeure {
	position: absolute;
	left: 25px;
	font-size: 13px;
	margin-top: -10px;
}
.ligneJour .jour {
	width: calc(100%);
	padding-top: 0px;
	padding-bottom: 16px;
	height: calc(129px - 42px);
}
.ligneJour .mois, .ligneJour .libelle {
	color: var(--color-policegris);
	font-size: 14px;
}
.ligneJour .chiffre {
	font-size: 32px;
	line-height: initial;
	color: var(--color-policegris);
}
.ligneHeure {
	height: calc((100%) / 11);
	height: calc((100% - (var(--nbreTranchJour) * 1px)) / var(--nbreTranchJour));
	position: relative;
	flex-direction: column;
}
.ligneHeure .heure {
	width: calc(100%);
	position: relative;
}
.ligneHeure .tranchHeure {
	width: 100%;
	position: relative;
}
.ligneHeure .tranchHeure:not(.plageValide):hover {
	background-color: #DDEFFE !important;
	cursor: pointer;
	transition: background-color 0.5s ease;
}
.ligneHeure .tranchHeure.enCours {
	background-color: #DDEFFE !important;
}
#dialogueChoix .carteQuartiers {
	background-image: url("../Images/CarteMonitoring3.png");
	width: 100%;
	aspect-ratio: 1;
	position: relative;
	background-position: 52% 64%;
	background-size: 92% auto;
	background-repeat: no-repeat;
	transition: all 0.4s ease;
	
	position: absolute;top: 0px; /*BV OY 15/07/2022 */
}
#dialogueChoix .loader, .loader2 {
	display: none;
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 60px;
	border: 10px solid transparent;
	border-top-color: var(--color-bleuOngletFonce);
	border-left-color: var(--color-bleuOngletFonce);
	border-right-color: var(--color-bleuOngletFonce);
	top: calc(50% - 45px);
  	left: calc(50% - 45px);
  	z-index: 2;
  	animation: rotateloader 1s linear infinite forwards; 
}
.loader2 {
	z-index: 2;
}
.carteQuartiers svg {
	position: absolute;
}
#listeQuartiers {
	height: 935px;
}
.boxCalendar {
	position: relative;
	width: calc(100% - 105px);
	background-color: rgba(0, 0, 0, 0); /*RL*/
	padding: 25px 80px 0px 80px;
	height: calc(100% - 50px);
	display: flex;
	flex-direction: column;
}
.planning {
	height: calc(100% - 230px);
	display: flex;
	flex-direction: row;
	position: relative;
	margin-left: -80px;
	padding-left: 80px;
}
.planning .colonneJour {
	width: calc(100% / 5);
}
.postit {
	position: fixed;
	padding: 8px;
	border: 1px solid var(--color-bordure);
	border-radius: var(--borderradius);
	background-color: white;
	z-index: 3;
}
.blocaccordeon {
	padding: 10px 10px 0px 10px;	
}
[class^="blocaccordeon"] {
    height: auto;
}
[class^="blocaccordeon"].ouvert {
	max-height: 100%;
	transition: max-height 0.25s ease-in;
	padding-top: 10px;
	padding-bottom: 10px;
}
.TitrePageMoyen.SansMarginTop {
	margin-top: 0px;
}
.TitrePageMoyen.actif {
	background-color: var(--color-bleuOnglet);
	border:  1px solid var(--color-bleuOnglet);
	transition: all 0.4s ease;
}
.TitrePageMoyen.actif img {
	filter: brightness(100);
}
.TitrePageMoyen.actif:hover img {
	filter: brightness(50);
}
.TitrePageMoyen:hover {
	border: 1px solid var(--color-fondgrisFonce);
	background-color: var(--color-fondgrisFonce);
}
.TitrePageMoyen.actif:hover  {
	border: 1px solid var(--color-bleuOngletFonce);
	background-color: var(--color-bleuOngletFonce);
}
.TitrePageMoyen.actif td {
	transition: all 0.4s ease;
}
.TitrePageMoyen {
	background-color: var(--color-fondgris);
	min-height: 28px;
	padding: 5px 10px 6px 10px;
	cursor:pointer;
	display: flex;
	justify-content: space-between;
	text-align: left;
	position: relative;
	border-radius: var(--borderradius);
	font-size: 15px;
	margin-top: 25px;
	border:  1px solid var(--color-fondgris);

	transition: all 0.4s ease;
}
.TitrePageMoyen td {
	font-weight: bold;
	letter-spacing: 1.5px;
}
.TitrePageMoyen.actif td{
	color: white;
}
.TitrePageMoyen .plus,.TitrePageMoyen .moins{
	cursor:pointer;
	display:block;
	margin-left:15px;
	margin-top: 1px;
	width: 12px;
	height: 12px;
}
.TitrePageMoyen .plus{
	display:none;
}
.TitrePageMoyen span.listeType {
	display: block;
	text-align: left;
	position: absolute;
	top: 9px;
	right: 16px;
}
.TitrePageMoyen.actif span.listeType {
	color: white;
}
.TitrePageMoyen.blocaccordeonLigne {
	line-height: 24px;
	height: 24px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	border-radius: 5px;
	border: none;
	border-bottom: 1px solid rgb(243, 243, 244);
	border-top: 1px solid rgb(243, 243, 244);
	transition: all 0.4s ease;
}
.TitrePageMoyen.blocaccordeonLigne:hover {
	background-color: var(--color-bleuOngletFonce);
	border: none;
	border-bottom: 1px solid var(--color-bleuOngletFonce);
	border-top: 1px solid var(--color-bleuOngletFonce);
}
.TitrePageMoyen.blocaccordeonLigne td {
	font-weight: normal;
}
.blocaccordeon.blocaccordeonLigne {
	margin: 0px;
	padding: 0px;
}
.bouton.petit {
	font-size: 11px;
	padding: 4px 12px;
}
.boutonBasDroite {
	display: flex;
	justify-content: flex-end;
	padding: 16px;
	gap: 12px;
}
.listeQuartierAdresse {
	color: #b6c1ca;
	margin-left: 36px;
	padding-top: 5px;
	padding-bottom: 5px;  
	overflow: hidden;
	max-height: 46px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: calc(100% - 36px);
}
.listeQuartierAdresse:empty {
	padding: 0px;
}
.ligneTypeEtBouton {
	display:flex;
	align-items: center;
	justify-content:space-between;
	width: 400px;
}
.bouton.animeBouton {
	transform: translateX(200px);
	opacity: 0;
	animation: 0.4s ease-out calc(var(--delayBouton2) * 0.1s) boutonLocalisation forwards; /* duration | timing-function | delay | name */
  	animation-iteration-count: 1;
}
@keyframes boutonLocalisation {
    from {
    	transform: translateX(200px);
    	opacity: 0;
    }
    to {
    	transform: translateX(0px);
    	opacity: 1;
    }
}

.pave, .pavePlageMedecin {
	font-size: 13px;
	color: white;
	background-color: var(--color);
	border-radius: var(--borderradius);
	padding-left: 7px;
	padding-right: 7px;
	opacity: 0;
 	animation-iteration-count: 1;
	animation: 0.4s ease-out 0s pavePlageMedecin forwards; /* duration | timing-function | delay | name */
	outline: 2px solid transparent;
	transition: outline-color .4s ease-out;
}
@keyframes pavePlageMedecin {from {opacity: 0;}to {opacity: 1;}}

:is(.pavePlageMedecin, .pave):hover {
	outline: 2px solid var(--colorDark);
	z-index: 2;
}
.pavePlageMedecin {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-right: 3.5px;
	margin-left: 3.5px;
	width: calc(100% - 21px);
	z-index: 1;
	position: absolute;
	top: 0px;
}
.pavePlageMedecin.complet {
	border-left: 7px solid rgba(0,0,0,0.2);
	width: calc(100% - 28px);
}
.pave {
	width: calc(100% - 14px);
	position: relative;
	cursor: pointer; 
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	top: 0px;
	z-index:1;
}
.pavePlageMedecin .paveAdresse {
	width: 100%;
	font-size: inherit;
	color: inherit;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pave .spanheure {
	font-size: inherit;
	color: inherit;
}
.pave .nbrePatients2 {
	font-size: 12px;
	background-color: white;
	text-align: center;
	border-radius: 30px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	color: var(--color);
}
.pavePlageMedecin:hover .containerBoutonEdition{
	display: block;
}
.pavePlageMedecin .containerBoutonEdition {
	height: 15px;
	position: absolute;
	width: 100%;
	border-radius: var(--borderradius) var(--borderradius) 0px 0px;
	display: none;
	z-index: 1;
	animation: animcontainerBoutonEdition .4s ease forwards;
}
@keyframes animcontainerBoutonEdition {
	from {
		opacity: 0;
		bottom: calc(100% - 25px);
	}
	to {
		opacity: 1;
		bottom: calc(100% - 15px);
	}
}
.pavePlageMedecin :is(.btnEdit, .btnDelete, .nbrePatients) {
	position: absolute;
	bottom: 0px;
	width: 27px;
	height: 27px;
	border-radius: 30px;
	background-color: white;
	color: var(--color);
	border: 1px solid var(--color);
}
.pavePlageMedecin .btnEdit {
	right: 39px;
}
.pavePlageMedecin .btnDelete {
	right: 7px;
}
.pavePlageMedecin .nbrePatients {
	left: 7px;
	text-align: center;
	line-height: 27px;
	width: auto;
	padding-left: 7px;
	padding-right: 7px;
	font-size: 12px;
}
.pavePlageMedecin :is(.btnEdit,.btnDelete) {
	cursor: pointer;
	outline: 1px solid transparent;
	transition: outline-color .4s ease-out;
}
.pavePlageMedecin :is(.btnEdit,.btnDelete):hover {
	outline: 1px solid var(--colorDark);
}
.pavePlageMedecin :is(.btnEdit,.btnDelete) .mask {
	width: 100%;
	height: 100%;
	background-color: var(--color);
	mask: var(--urlImage) no-repeat center/13px;
	-webkit-mask: var(--urlImage) no-repeat center/13px;
}
.pavePlageMedecin .btnEdit .mask {--urlImage: url("../Images/modifier.png");}
.pavePlageMedecin .btnDelete .mask {--urlImage: url("../Images/masquer.png");}

.plageValide {
/*	pointer-events: none;*/
}
.fondVignette {
	border-radius: 7px;
	padding: 2px 7px;
	color: white;
	width: calc(100% - 14px);
	display: block;
	margin-top: 7px;
	background-color: var(--color);
}


.divBoutonLongueur {
	display: flex;
	flex-direction: row;
	margin: 24px 0px 16px 0px;
	width: calc(100%);
	justify-content:space-between;
	align-items:center;
}
.containerBoutonHaut {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap-reverse;
}
.divBoutonLongueurHaut {
	margin: 0px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.divBoutonLongueurHaut .bouton {
	font-size: 12px;
	line-height: 16px;
	white-space: break-spaces;
	width: auto;
	padding: 7px 20px 7px 20px;
}
.divBoutonLongueur .left{
	display: flex;
	flex-direction: row;
	gap: 12px;
}
.divBoutonLongueur .right{
	display: flex;
	flex-direction: row;
}
.divBoutonLongueur .bouton {
	margin-right: 0px;
}
/*.divBoutonLongueur .bouton:last-child {
	margin-right: 0px;
}*/
.ligneBoutonDialog {
	width:100%;
	margin-top:25px;
	display:flex;
	justify-content:flex-end;
	gap: 10px;
}
#mapContainer, #map{
	width: 100%;
	height: 100%;
	border-radius: var(--borderradius);
	position: relative;
}
#mapContainer {
	overflow: hidden;
}
#map {
	height: calc(100% + 24px);
}
.ligneListe {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid rgb(243, 243, 244);
	padding: 5px 10px;
	width: calc(100% - 20px);

	transition: all 0.4s ease;
	border-radius: 5px;
}
.ligneListe:not(.ligneTitre):hover {
	background-color: var(--color-fondChampBleu);
	cursor: pointer;
}
.ligneListe.listeSelected {
	background-color: var(--color-fondgris);
}
.ligneListe.listeSelected.annule, 
.ligneListe.annule {
	background-color: #FCE8E6;
/*	pointer-events: none;
*/	cursor: default;
	transition: background-color 0.5s ease; /* Standard */
}
.ligneListe .iconeSuppr {
	width: 24px;
	height: 24px;
	background: no-repeat center/20px url("../Images/iconeSuppr.png");
}
.ligneListe.annule .iconeSuppr {
	display: none;
}
.ligneTitre {
	font-weight: bolder;
	color: var(--color-bleuFAMGB);
	letter-spacing: 1.5px;
	position: sticky;
	top: 0px;
	background-color: white;
	z-index: 1;
}
.listeAppel {
	height: calc(100% - 140px);
}
.listeAppelPart2 .ligne div:nth-child(2) {
	color: var(--color-bleuOngletFonce);
	width: calc(50% - 16px);
}
.infoBulle {
	position: absolute;
	right: 25px;
	top: 25px;
	width: 32px;
	height: 32px;
	background: no-repeat center/12px auto url("../Images/info.png") var(--color-bleuOnglet);
	cursor: pointer;
	border-radius: var(--borderradius);
	z-index: 3;
	transition: background-color 0.4s ease;
}
.infoBulle:hover {
	background-color: var(--color-bleuOngletFonce);
}
.texteInfoBulle {
	position: fixed;
	right: -600px;
	top: 0px;
	width: calc(600px - 50px);
	height: calc(100vh - 75px);
	padding: 50px 25px 25px 25px; 
	background-color: white;
	z-index: 2;
	opacity: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-left: 1px solid #f2f2f2;
	transition: right 1s ease, opacity 1s ease;
}
.texteInfoBulle.deplie {
	right: 0px;
	opacity: 1;
}
.bouleConv {
	width: 12px;
	height: 12px;
	border-radius: 10px;
	background-color: var(--color-fondgris);
	display: inline-block;
	cursor: help;
	right: 8px;
	top: -30px;
	position: absolute;
}
.bouleConv.bouleVerte {background-color: var(--color-vert);}
.bouleConv.bouleOrange {background-color: var(--color-jaune);}
.bouleConv.bouleRouge {background-color: var(--color-rouge);}

.jquery-datepicker {
	z-index: 10;
	top: 45px !important;
	left: 58px !important;
}
#passwordLost {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 25px;
}
.modalDialog_transparentDivs {	
	filter:alpha(opacity=50);	/* Transparency */
	opacity:0.5;	/* Transparency */
	background-color:#000000;
	z-index:100;
	position:absolute; /* Always needed	*/
}
.modalDialog_contentDiv {
	padding:25px;
	z-index:100;/* Always needed	*/
	position:absolute;	/* Always needed	*/
	background-color: white;	/* White background color for the message */
	border-radius: var(--borderradius);
	border: 1px solid var(--color-bordure);
	/*	top:100px !important; */
	/*BV OY : rajouté le 15/07/2022 : comme ça le dialogue ne "saute" pas la 1ere fois qu'il s'affiche*/
}
.modalDialog_contentDiv .form {
	max-height: 600px;
}
.modalDialog_contentDiv_shadow{
	z-index:90;/* Always needed	- to make it appear below the message */
	position:absolute;	/* Always needed	*/
	background-color:#555;
	filter:alpha(opacity=30);	/* Transparency */
	opacity:0.3;	/* Transparency */	
}

/* Suggestion Adresse Google */
.pac-item, .pac-item span {
	color: var(--color-policegris) !important;
	line-height: 30px !important;
	font-size: 15px !important; 
	cursor: pointer;
}
.pac-container {
	width: auto !important;
	border-radius: var(--borderradius);
	background-image: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	border: 1px solid var(--color-bordure);
	background-color: var(--color-section) !important;
}
.pac-container:after {
	height: 0px;
}
.jourMobile {
	display: none;
}
#menuMobile, #menuMobileGuide {
	display: none;
	width: 40px;
	height: 40px;
	background-image: url("../Images/iconeMenu.png");
	background-size: contain;
	right: 12px;
	cursor: pointer;
	filter: brightness(100);
}
#menuMobile {
	top: 5px;
	z-index: 99;
	position: absolute;
}
#menuMobileGuide {
	top: 20px;
	position: fixed;
	z-index: 1001;
}
#menuMobile.ferme, #menuMobileGuide.ferme {
   	animation:spinback 1s ease 1 normal forwards;
}
#menuMobile.ouvert, #menuMobileGuide.ouvert {
   	animation:spin 1s ease 1 normal forwards;
}
@keyframes spin { 
	0% {
       	transform:rotate(0deg); 
	}
   	100% { 
       	transform:rotate(90deg); 
   	} 
}
@keyframes spinback { 
	0% {
       	transform:rotate(90deg); 
	}
   	100% { 
       	transform:rotate(0deg); 
   	} 
}
#navMobile {
	display: none;
}
#messageSmatphonePaysage {
	display: none;
}

.langues2colonnes {
	display:grid;
	/*flex-direction:column;
	flex-wrap:wrap;*/
	height:96px;
	grid-template-columns: repeat(2, 1fr);
}
:is(#langueSup, .langues2colonnes) input[type="checkbox"] + label {
	margin-top: 0px;
	margin-bottom: 3px;
}
#boutonSynchroAgenda {
	display: none;
}

/*@media screen and (orientation:landscape) and (max-device-height: 900px) { /* en fait ça veut dire que si en PC la hauteur de la résolution est de moins de 900px on pourra pas accéder à l'interface (15 pouces = 768  px de haut */
@media only screen and (max-height: 575.98px) and (orientation: landscape) {
	body#body {
		height: 100%;
		width: 100%;
		overflow: hidden;
		padding: 0px;
	}
	#messageSmatphonePaysage {
		display: flex;
		position: fixed;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		text-align: center;
		top: 0px;
		left: 0px;
		background-color: white;
		z-index: 101;
	}
	#messageSmatphonePaysage div {
		font-size: 40px;
		color: var(--color-bleuFAMGB);
	}
}

@media screen and (max-height: 820px) {

	.menuChapitre div.menuChapitreImg {
		display: none;
	}

}
@media screen and (max-device-width: 820px), screen and (max-width: 820px) {
	.indication {
		display:none;
	}
	.infoBulle {
		top: 10px;
		right: 65px;
		position: fixed;
		z-index: 98;
	}
	.texteInfoBulle {
		height: calc(100vh - 105px);
		top: 25px;
		max-width: calc(100vw - 50px);
	}
	#menu {
		z-index: 100;
		position: fixed;
	}
	#navMobile {
		display: block;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100vw;
		height: 50px;
		background: linear-gradient(135deg, var(--color-bleuOnglet), var(--color-bleuFAMGB));
		z-index: 98;
	}
	#menuMobile{
		display: block;
	}
	#menu {
		left: -150px;
		opacity: 0;
		transition: left 1s ease, opacity 1s ease;
	}
	#menu.ouvert {
		left: 0px;
		opacity: 1;
	}
	body#body {
		padding: 0px;
		padding-top: 50px;
		overflow: hidden;
		min-height: auto;
		min-width: auto;
	}
	.centre {
		width: calc(100% - 30px);
		height: calc(100% - 30px);
		padding: 15px;
	}
	#dialogueChoix {
		overflow-y: scroll;
		overflow-x: hidden;
		scrollbar-color: white;
		scrollbar-width: thin;
	}
	#dialogueChoix::-webkit-scrollbar-thumb  {
		background-color: #CDCDCD;
		border-radius: var(--borderradius);
	    border: 2px solid white;
	}
	#dialogueChoix::-webkit-scrollbar {
	 	width: 10px;
	  	background-color: white; 
	  	border-radius: var(--borderradius);
	}
	#dialogueChoix::-webkit-scrollbar-track { 
	    background-color: #fff; 
	    border-radius: var(--borderradius);
	}
	#calendar, #calendarModele {
		height: calc(100vh - 50px);
		height: calc(100dvh - 50px);
		position: fixed;
		z-index: 98;
	}
	.planning {
		flex-direction: row;
		width: calc((100vw - 100px) * 5);
		position: absolute;
		height: calc(100% - 50px);

		left: 50px;
		right: 50px;

		width: calc(100% - 100px);
		margin-left: 0px;
		padding-left: 0px;
		overflow-x: scroll;
    	scroll-snap-type: x mandatory;
    	scroll-padding: 0px;
    	display: grid;
    	grid-gap: 0px;
    	grid-auto-columns: calc(100%);
    	grid-auto-flow: column;
	}
	.planning .colonneJour {
/*		width: calc(100%);*/
		height: 100%;
		scroll-snap-align: start;
		width: 100%;
	}
	.flex .colonne {
		padding: 15px;
	}
	#dialogueChoix .flex .colonne:nth-child(3) {
		display: none;
	}
	#dialogueChoix .flex .colonne:nth-child(1), #dialogueChoix .flex .colonne:nth-child(2), #dialogueChoix .flex .colonne:nth-child(3) {
		width: calc(100% - 30px);
		height: auto;
		overflow: hidden;
	}
	.ligneJour {
		display: none;
	}
	.jourMobile {
		width: calc(100%);
		display: block;
		margin-bottom: 25px;
		margin-top: 40px;
		font-size: 20px;
		text-align: center;
	}
	.ligneHeure {
		height: calc((100% - 100px) / 11);
	}
	#dialogueChoix .flex {
		flex-direction: column;
	}
	.titreEtBouton {
		width: calc(100%);
		flex-direction: column;
		align-items: center;
		margin-left: 0px;
		margin-bottom: 0px;
	}
	.listeAppelPart1 .titre.titrePage, 
	:is(#quartier, #mesCoordonnees) .titre.titrePage, 
	.titreEtBouton .titre {
		position: fixed;
		left: 12px;
		top: 0px;
		color: white;
    	z-index: 98;
    	height: 50px;
    	line-height: 50px;
    	font-size: 25px;
	}
	.listeAppelPart2 .titre.titrePage {
		display: none;
	}
	.boxCalendar {
		width: calc(100% - 100px);
		padding-left: 50px;
		padding-right: 50px;

		width: 100%;
		padding-left: 0px;
		padding-right: 0px;

		padding-top: 15px;
		padding-bottom: 15px;
		height: calc(100% - 92px);
		position: relative;

	}
	.ligneHeure .libelleHeure {
		left: -40px;
		font-size: 11px;
	}
	.titre.titrePage {
		text-align: center;
	}
	.listeAppel {
		border: 1px solid rgb(243, 243, 244);
		border-radius: var(--borderradius);
	}
	.listeAppel .ligneTitre:not(.ligneListeVisibleSmartphone) {
		display: none;
	} 
	.listeAppelPart1, .listeAppelPart2 {
		width: calc(100% - 30px);
		padding: 15px;
	}
	.listeAppelPart1 {
		max-height: calc(33vh - 30px);
		padding-top: 75px;
	}
	.listeAppelPart1.fullHeightResponsive {
		max-height: calc(100%);
		padding-top: 30px;
	}
	.divSearchList {
		left: 15px;
		right: unset;
	}
	.listeAppelPart2 { 
		max-height: calc(66vh - 30px);
	}
	.listeAppelPart1 .scrolloverlay {
		height: calc(100% - 5px) !important;
	}
	.listeAppelPart1 .form {
		margin-bottom: 15px !important;
	}
	.listeAppelPart2 .scrolloverlay {
		height: calc(100% - 50px) !important;
	}
	#ListeAppelPage {
		flex-direction: column;
		height: calc(100vh - 10px);
		height: calc(100dvh - 10px);
	}
	.ligneListe {
		word-break: break-all;
	}
	.ligneListe {
		flex-direction: column;
	}
	.ligneListe div {
		width: 100% !important;
	}
	.divBoutonLongueur, .divBoutonLongueurHaut {
		position: absolute;
    	flex-direction: column;
    	align-items: center;
    	gap: 10px;
    	margin-top: 0px;
    	margin-bottom: 0px;
/*    	width: calc(100vw - 100px);*/

    	width: calc(100vw - 24px);
    	left: 12px;
    	right: 12px;
	}
	.divBoutonLongueur {
    	bottom: -70px;
		margin: 0px;
	}
	.divBoutonLongueurHaut {
		bottom: -27px;
		gap: 5px;
	}
	.divBoutonLongueur .bouton, .boutonBasDroite .bouton {
		font-size: 12px;
    	width: max-content;
    	line-height: 18px;
    	padding: 3px 14px 3px 14px;
    	margin-left: 0px !important;
    	margin-right: 0px !important;
	}
	.divBoutonLongueurHaut .bouton {
		padding: 3px 14px 3px 14px;
		line-height: 18px;
		font-size: 12px;
	}
	.divBoutonLongueur .bouton.poubelle {
		background-size:18px 18px;
		background-position:5px center;
		padding:3px 14px 3px 34px;
	}
	.divBoutonLongueur .left {
		flex-direction:column;
		align-items: center
	}
	.divBoutonLongueur .left .bouton {
		margin-bottom:2px;
	}
	.boutonBasDroite {
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;
		width: calc(100vw - 50px);
		padding-bottom:100px; /*probleme sur safari*/
	}
	.menuChapitre div.menuChapitreImg {
		display: none;
	}
	#mainContent {
		width: calc(100%);
		margin-left: 0px;
	}
	.ligneTypeEtBouton {
		display: flex;
		width: 100%;
	}
	.listeQuartierAdresse {
		margin-left: 27px;
	}
	#dialogueInfo, #dialogueChoix {
		width: calc(100vw - 20px);
		height: calc(100vh - 20px);
		height: calc(100dvh - 20px);
		margin:  0px;
		padding: 10px;
	}
	.modalDialog_contentDiv {
		max-width: calc(100% - 50px);
	}

	.flechePlanning {
		display: block;
		position: fixed;
		bottom: 12px;
		z-index: 1;
		height: 32px;
    	width: 40px;
    	line-height: 32px;
	}
	.flechePlanning.gauche {
		left: 12px;
	}
	.flechePlanning.droite {
		right: 12px;
	}
	.headerSemaine {
		min-width: auto;
	}
	.result {
		display: flex;
		flex-direction: column;
	}
	#rechercheForm.partie2.scrolloverlay {
		overflow-x: visible;
		height: auto;
		padding: 25px;
		width: calc(100% - 50px);
	}
	.result .partie1 {
		min-height: 1000px;
	}
	body#body {
		overflow: scroll;
	}
	.result #resultTableau {
		width: calc(100vw - 80px);
	}
	.colHeurePlanning {
/*		height: calc(100% - 89px);*/

		height: calc(100vh - 268px);
		height: calc(100dvh - 268px);

		position: fixed;
    	top: 145px;
    	left: 0px;
    	z-index: 0;
    	width: 50px;
	}
	.colHeure.colHeurePlanning span {
		font-size: 10px;
		width: 50px;
	}
	
	.fondCheckbox:hover input[type="checkbox"] + label {color: white;}
	.fondCheckbox:hover { background-color:var(--color);}

	#mesCoordonnees .form div.ligne {
		flex-direction: column;
	}
	#mesCoordonnees .form .libelle {
		width: 100%;
		padding: 0px;
		margin: 0px;
		margin-bottom: 5px;
		justify-content: flex-start;
		text-align: left;
	}
	#mesCoordonnees .form .libelle br {
		display: none;
	}
}


/* CSS guide d'utilisation */

body#guide {
	margin: 0px;
    padding: 0px;
    min-height: auto;
    min-width: auto;
    height: 100vh;
    width: 100%;
}
#guide * {
	font-family: "Roboto-Regular";
	letter-spacing: 0px;
}
#guide #headerGuide {
	height: 80px;
	width: 100%;
	background: url("../Images/LogoMediDay_fondBleu.svg"), linear-gradient(90deg, #86CEEE 0%, #009BDB 100%);
	background-position: 32px 8px, center;
	background-repeat: no-repeat;
	background-size: 96px auto, cover;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0px;
	z-index: 1000;
}
#guide #headerTitreGuide {
	font-weight: 700;
	font-size: 25px;
	line-height: 32px;
	color: #FFFFFF;
	padding-left: 160px;
}
#guide #colonneMenuGuide {
	min-width: calc(280px);
	background: #F5F5F5;
	padding: 64px 0px 0px 32px;
	z-index: 1;
}
#guide #stickMenuGuide {
	position: sticky;
	top: 144px;
}
#guide #colonneMenuGuide .titre {
	font-size: 25px;
	font-weight: 700;
	line-height: 25.6px;
	color: #212121;
	text-align: left;
}
#guide #listeAncreGuide {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-left: 18px;
}
#guide .itemAncreGuide {
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 22.08px;
	color: #8B8B8B;
	padding-right: 32px;
	cursor: pointer;
	transition: border-color 0.4s ease;
	border-right: 4px solid transparent;
}
#guide .itemAncreGuide:not(a):hover {
	border-color: #3AAEE2;
}
#guide a.itemAncreGuide:hover {
	color: #3AAEE2;
}
#guide .itemAncreGuide.actif {
	border-color: #3AAEE2;
	color: #212121;
	pointer-events: none;
	cursor: default;
}
#guide #contenuGuide {
	display: flex;
	margin-top: 80px;
	background-color: white;
	justify-content: center;
}
#guide #colonneTexteGuide {
	background-color: white;
	padding-bottom: 180px;
	width: 100%;
	z-index: 0;
}
#guide .guideCenter {
	max-width: 640px;
	margin-inline: auto;
	padding: 0px 24px;
}
#guide #imgMediDayGuide {
	height: 240px;
	margin-top: 80px;
	margin-bottom: 64px;
	background-image: url("../Images/LogoMediDay_fondBlanc.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#guide .titreGuide, 
#guide .titreVignetteGuide, 
#guide .titreGuide2,
#guide .titreGuide3 {
	font-weight: 700;
	color: #212121;
	font-family: "Roboto-Medium";
}
#guide .titreGuide {
	font-size: 39px;
	line-height: 50px;
	margin-bottom: 33px;
}
#guide .titreGuide2 {
	font-size: 31.25px;
	line-height: 40px;
	margin-bottom: 32px;
}
#guide .titreGuide3, #guide .titreVignetteGuide {
	font-size: 20px;
	line-height: 25.6px;
	margin-bottom: 16px;
}
#guide .titreGuide3 {
	margin-top: 56px;
}
#guide .textGuide {
	font-size: 16px;
	line-height: 28px;
	color: #616161;
}
#guide .textVignetteGuide {
	font-size: 14px;
	line-height: 24px;
	color: #8B8B8B;
}
#guide .separationGuide {
	border: 2px solid #F5F5F5;
	margin-top: 80px;
	margin-bottom: 80px;
}
#guide .blocVignetteGuide {
	display: grid;
  	grid-template-columns: 3;
  	grid-template-rows: 2;
  	grid-gap: 24px;
  	align-items: center;
	margin: 64px 0px;
	margin-inline: auto;
	width: fit-content;
	max-width: calc(100% - 48px);
	padding: 0px 24px;
}
#guide .vignetteGuide {
	height: auto;
	max-width: calc(350px - 32px);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1);
}
#guide .blocVignetteGuide .vignetteGuide:nth-child(1) {grid-column: 1; grid-row: 1/3;}
#guide .blocVignetteGuide .vignetteGuide:nth-child(2) {grid-column: 2; grid-row: 1;}
#guide .blocVignetteGuide .vignetteGuide:nth-child(3) {grid-column: 2; grid-row: 2;}
#guide .blocVignetteGuide .vignetteGuide:nth-child(4) {grid-column: 3; grid-row: 1/3;}

#guide .rondVignetteGuide {
	background: #EAFAFF;
	width: 56px;
	height: 56px;
	border-radius: 100px;
	margin-bottom: 16px;
	position: relative;

}
#guide .imgVignetteGuide {
	height: 100%;
	width: 100%;
	background-color: #3AAEE2;
	-webkit-mask: var(--urlIcone) no-repeat center/32px;
	mask: var(--urlIcone) no-repeat center/32px;
}
#guide .imgVignetteGuide.vignetteLocalisation { --urlIcone: url("../Images/icone_pin_drop.svg");}
#guide .imgVignetteGuide.vignetteSemaineType { --urlIcone: url("../Images/icone_event.svg");}
#guide .imgVignetteGuide.vignetteListePatients { --urlIcone: url("../Images/icone_list.svg");}
#guide .imgVignetteGuide.vignettePlanning { --urlIcone: url("../Images/icone_calendar_month.svg");}

#guide .captureEcranGuide {
	position: relative;
	margin: 32px auto;
}
#guide .captureEcranGuide.captureEcranCalendGuide {
	display: flex;
	justify-content: center;
}
#guide .captureEcranGuide img {
	width: 100%;
	max-width: 640px;
	height: auto;
	z-index: 1;
	position: relative;
	box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1);
	border-radius: 12px;
}
#guide .captureEcranGuide.captureEcranCalendGuide img {
	max-width:390px;
}
#guide .blocBleuGuide {
	transform:translateY(-48px) translateX(24px);
	padding: 64px 24px 16px 24px;
	width: calc(100% - 48px);
	background: #EAFAFF;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 0;
	margin-bottom: -48px;
}
#guide .blocBleuLigneGuide {
	display: flex;
	gap: 16px;
}
#guide .blocBleuPointGuide {
	background: #FFFFFF;
	box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	font-size: 16px;
	color: #FF6D4A;
	line-height: 26px;
	height: 26px;
	min-width: 26px;
	text-align: center;
	font-family: "Roboto-Medium";
}
#guide .blocBleuTextGuide {
	line-height: 28px;
	color: #616161;
	font-size: 16px;
}
#guide .bouleBleuLigneGuide {
	display: flex;
	gap: 16px;
	margin: 24px 0px 24px 16px;
	margin-left: 16px;
}
#guide .bouleBleuPointGuide {
	background: linear-gradient(180deg, #86CEEE 0%, #009BDB 100%);
	border-radius: 20px;
	font-size: 16px;
	color: #FFFFFF;
	line-height: 26px;
	height: 26px;
	width: 26px;
	text-align: center;
	font-family: "Roboto-Medium";
}
#guide .bouleBleuTextGuide {
	width: calc(100% - 16px - 26px);
	line-height: 27.52px;
	font-size: 16px;
	color: #616161;
}
#guide .bouleBleuTextGuide .spanBlack {
	color: #212121
}
#guide .bouleBleuTextGuide i {
	color: #A0A0A0;
}
#guide .textBordBleuGuide {
	color: #616161;
	font-size: 16px;
	font-family: "Roboto-Medium";
	line-height: 28px;
	border: 2px solid #F2F2F2;
	border-left: 8px solid #3AAEE2;
	padding: 16px;
	border-radius: 4px;
	margin-bottom: 32px;
	margin-top: 48px;
}
#guide #footerGuide {
	height: auto;
	padding-left: 112px;
	padding-right: 112px;
	padding-top: 24px;
	padding-bottom: 24px;
	gap: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	background-color: #212121;
	line-height: 28px;
}
#guide #footerGuide div {
	color: #FFFFFF;
}
#guide #footerGuide a {
	text-decoration: none;
	color: #62C0E9;
}
@media screen and (max-device-width: 1280px), screen and (max-width: 1280px) {
	#guide .blocVignetteGuide {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 2;
		align-items: start;
	}
	#guide .blocVignetteGuide .vignetteGuide {
		height: calc(100% - 32px);
		max-width: calc(100% - 32px);
	}
	#guide .blocVignetteGuide .vignetteGuide:nth-child(1) {grid-column: 1;grid-row: 1;}
	#guide .blocVignetteGuide .vignetteGuide:nth-child(2) {grid-column: 2;grid-row: 1;}
	#guide .blocVignetteGuide .vignetteGuide:nth-child(3) {grid-column: 1;grid-row: 2;}
	#guide .blocVignetteGuide .vignetteGuide:nth-child(4) {grid-column: 2;grid-row: 2;}
}
@media screen and (max-device-width: 980px), screen and (max-width: 980px) {
	#guide #colonneMenuGuide {
		position: fixed;
		width: calc(100vw - 32px);
		transform: translateX(-100vw);
		opacity: 0;
		left: 0px;
		padding-top: 32px;
		padding-bottom: 32px;
		transition: all 0.4s ease;
	}
	#guide #colonneMenuGuide.ouvert {
		transform: translateX(0px);
		opacity: 1;
	}
	#guide #menuMobileGuide {
		display: block;
	}
}
@media screen and (max-device-width: 688px), screen and (max-width: 688px) {
	#guide .guideCenter {
		max-width: 100%;
	}
	#guide #footerGuide {
		flex-direction: column;
		padding-left: 0px;
		padding-right: 0px;
	}
	#guide #headerTitreGuide {
		padding-left: 100px;
		font-size: 18px;
	}
	#guide #headerGuide {
		background-size: 80px auto, cover;
		background-position: 10px 15px, center;
	}
	#guide .titreGuide, #guide .titreGuide2 {
		font-size: 22px;
		line-height: 32px;
	}
	#guide #imgMediDayGuide {
		height: 180px;
		margin-top: 60px;
		margin-bottom: 48px;
	}
}
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
	#guide .blocVignetteGuide {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: 4;
		align-items: start;
	}
	#guide .blocVignetteGuide .vignetteGuide:nth-child(1) {grid-column: 1;grid-row: 1;}
	#guide .blocVignetteGuide .vignetteGuide:nth-child(2) {grid-column: 1;grid-row: 2;}
	#guide .blocVignetteGuide .vignetteGuide:nth-child(3) {grid-column: 1;grid-row: 3;}
	#guide .blocVignetteGuide .vignetteGuide:nth-child(4) {grid-column: 1;grid-row: 4;}
}
#Iframe_ConnexionMultiple{
	position:absolute;
	z-index:01;
	width:1000px;
	height:150px;
}