body {
    font-size:1em;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

a {
font-size: 0.9em;
    color:#337ab7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h3 {
    font-size:1.4em;
}
h4 {
    font-size:1.1em;
}

li {
    line-height: 1.2em;
}
.dropdown-menu {
    padding:10px;
}

.divTable {
    font-family: Helvetica, Arial, sans-serif;
}
.left30{
    margin-left:30px;
}
.lh3{
    line-height: 3em;
}
.table1 td  {
    font-size:0.9em;
}


#Header_bonjour {
    font-family:ArcherPro-Medium;
    color:#fff;
    font-size:1.4em;

}


.TitreSection {
    font-family	: ArcherPro-Semibold;
    color :#000;
    font-size: 1.8em;
}

.sstitre {
    font-family:Montserrat-Regular;
    /*font-size:0.9em;*/
}

#bonjour {
    font-family:ArcherPro-SemiboldItalic;

    margin-bottom:10px;
    margin-bottom:30px;
    text-align:center;
    font-weight: 500 ;

}

#authentification {
    font-family:Montserrat-Regular;
    color:#126171;
}

#login,#password,#code {
    font-family: Roboto-Regular;
    background: #E7F0FE;
    border:1px solid #539DAC;
    text-align:left;  width:100%; height:50px;  margin-bottom:20px;
}

.modal-content,.modal-header {
    font-family: Roboto-Regular;
    border:0px;
}

.BtnBlancNoir {

    width:10%;
    height:40px;
    top:50px;
    color :#000;
    font-size:0.9em;
    text-decoration: none;
    font-family:Montserrat-Regular;
    border-radius: 4px;
    text-align:center;
  line-height: 1em;
    padding:2px; background:#FFF; border:2px solid #000; cursor:pointer; cursor:hand;
}

.Puce {
    /*color: #ec552c;*/
    background-color: #FFF;

    top:-5px;
    right : 5px;

    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);
    position:relative;

    width: 60px;
    height: 60px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;

    font-family: ArcherPro-Medium;
    text-align: center;
    font-size: 2.4em;
}

.BtnTransmistion {
    osition: absolute;
    idth:400px;
    argin-top:20px;
    background: #FE6E13 ;
    padding:25px;
    margin:0px;
    height:70px;

    border-radius : 10px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
}

.BtnTeleconsultation, .BtnSuiviHydrique, .BtnStatistiques {
    padding-top:25px;
    padding-left:20px;
    height:100px;

}

#AlerteEncours {
    font-family:Montserrat-Regular;
    color:#fff;
    font-size:18px;
    text-align:left;

}

#HistoAnomalieActivite{
    padding:10px;
    font-size:1.8em;
    text-align:left;
}

#Col1_Cpte_Histo{
    cursor:pointer; pointer:hand;
    text-align:center;
}

#Col2_Cpte_Histo{
   text-align:center;
    cursor:pointer; pointer:hand;
}


#MD, #MC , #PREV30j, #PREV6m {
    /*font-family:Montserrat-Regular;*/
    op:-100px;
    font-size:70px;
    font-weight:100 !important;
    font-family: ArcherPro-Medium;
}

.Libelle_blanc {
    color: #FFF;
    letter-spacing: .1rem;
}

.Libelle_noir {

    letter-spacing: .1rem;
}



/* > 1450*/
@media screen and (min-width: 1400px) {

    .Dlg_MargeTop {
        margin-top:350px;
        box-shadow: 10px 5px 5px red;
        z-index:999;
    }

    #oiseaux {
        position:absolute;
        top:42%;
        left:8%;
    }

    #ImgPIECE  { width:210px; }
    #LigneBleu {  top:295px;}
    #PhraseDeb { /*left:28%; */ top:100px; line-height: 1.0em;}
    #PhraseFin { /*right:30%;*/ top:240px;}
    #Compteur {
        top:46px; font-size:72px;
    }

    .BleuFonce {

        padding-top:25px;
        padding-left:20px;
        margin:0px;
    }

    .Libelle {
        font-family:Montserrat-Regular;
        font-size:18px;
        margin: auto;
    }

    .Libelle2 {
        font-family:Montserrat-Regular;
        font-size:14px;
        margin: auto;
    }



    /*#VilleG { width:100px;}*/

}
/* entre 1100 && 1300*/
@media screen and (min-width: 1100px) and (max-width: 1399px){

    #oiseaux {
        position:absolute;
        top:18%;
        left:4%;
    }


    #ImgPIECE  { width:200px; }
    #LigneBleu {  top:287px;}
    #PhraseDeb { /*left:24%;*/ top:-25px;}
    #PhraseFin { /*right:26%;*/ top:230px;}
    #Compteur {
        top:46px; font-size:65px;
    }

    .BleuFonce {
        /*background: #00a4bf;*/

        padding:25px;
        margin:20px;
        margin:0px;
    }

    .Libelle {
        font-family:Montserrat-Regular;
        font-size:16px;
        margin: auto;
    }

    .Libelle2 {
        font-family:Montserrat-Regular;
        font-size:14px;
        margin: auto;
    }

   /*#VilleG { width:100px;}*/
    #VilleG { display:none;}
    #VilleD { display:none;}


}
/* entre 700 && 1000*/
@media screen and (min-width: 800px) and (max-width: 1100px){
    #oiseaux { display:none;}

    #ImgPIECE  { width:180px; }
    #LigneBleu {  top:290px;}
    #PhraseDeb { /*left:10%;*/ top:-20px;}
    #PhraseFin { /*right:10%;*/ top:220px;}
    #Compteur {
        top:46px; font-size:65px;
    }

    .BleuFonce {
        /*background: #00a4bf;*/
        padding:25px;
        margin:20px;
        margin:0px;
    }

    .Libelle {
        font-family:Montserrat-Regular;
        font-size:12px;
        margin: auto;
    }

    #VilleG { display:none;}
    #VilleD { display:none;}


}
/* <800 */
@media screen and (max-width: 800px) {


    #oiseaux { display:none;}

    #ImgPIECE  { width:120px; }
    #LigneBleu {  top:245px;}
    #PhraseDeb { /*left:10%;*/ top:-15px;}
    #PhraseFin { /*right:10%;*/ top:180px;}
    #Compteur {
        top:30px; font-size:40px;
    }
    #VilleG { display:none;}
    #VilleD { display:none;}

    .Puce {
        /*color: #ec552c;**/
        background-color: #FFF;
        top:-20px;
        right : 5px;

        box-shadow: 4px 4px 11px 0px rgba(0,0,0,0.3);
        position:relative;


        width: 40px;
        height: 40px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;

        font-family: ArcherPro-Medium;
        text-align: center;
        font-size: 1.8em;
    }
    .BtnAlerte {
        background: #ec552c ;
        padding:25px;
        margin:20px;
        height:50px;
    }

    .BtnTeleconsultation, .BtnSuiviHydrique, .BtnStatistiques {
        /*background: #72C5D4 ;*/
        padding:25px;
        margin:20px;
        height:50px;
    }

    #AlerteEncours {
        line-height:1px;
        color:#fff;
        font-size:10px;
        text-align:left;
    }
    #HistoAnomalieActivite{
        padding:10px;
        font-size:15px;
        text-align:left;
    }

    #Col1_Cpte_Histo{

    }

    #Col2_Cpte_Histo{

    }

    #MD, #MC, #PREV30j, #PREV6m {
        top:0px;
        font-size:22px;
        font-weight:bold;
    }



    .page-header {
        font-size:12pt;
    }
    .Bulle_old {
        top:-50px;
    }
    .ovale_old {
        font-size: 8px;
        width: 40px;
        height: 20px;
        background: #ff0000;
        -webkit-border-radius: 20px / 10px;
        -moz-border-radius:    20px / 10px;
        border-radius:         20px / 10px;
    }

    #Phrase {font-size:15px;}


    .BleuFonce {
        /*background: #00a4bf;*/
        padding:2px;
        margin:2px;
    }



    .ehpadH3{
       font-size:1.5em;
    }

    h2{ font-size:12pt;    }
    .texte { font-size:8.5pt;    }


    .LOGOT {

        width:220px; margin-top:25px; margin-left:20px;

    }

    #CssChbre_old {
        margin-top:0px;
        font-size:12pt;
    }
    #CssDate_old {
        font-size:12pt;
    }
    #CssDuree2_old {
        color:#fff;
        /*left: 0; right: 0;*/ /*margin: auto ; */
        /*margin-top:10px; */
        font-size:6pt;
    }
    #ZONE_BAS { bottom : -20px; }

    #VilleG { display:none;}
    #VilleD { display:none;}

}



    .LOGOT {
        width:250px; margin-top:20px; margin-left:20px;
    }
    .page-header {
      font-size:18pt;     
    }
    #CssChbre {
     /*margin-top:10px;*/
     font-size:18pt;  
    }
    #CssDate {
     font-size:10pt;  
    }
    #CssDuree2 {
        color:#fff; 
        
        /*left: 0; right: 0; margin: auto ; margin-top:27px; */
    }
    #BulleLevel {
        border:1px solid #777777;
        background:#fff;
        position:absolute;
        display:none;
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
        opacity: 0.8;
        padding:5px;
        padding-left:15px;
        padding-right:15px;
    }

    #z2Soleil {
        margin-right		: 10px;
        margin-top			: 25px;
    }

    #BulleLevel {
        font-size:12px;
        right:70px;

    }
    .Bulle {
        
        top:0px;   
    }
    .ovale {
        z-index:9999;
        font-size: 13px;
        font-weight:bold;
        width: 70px;
        height: 40px;
        background: #ff0000;
        -webkit-border-radius: 35px / 20px;
        -moz-border-radius:    35px / 20px; 
        border-radius:         35px / 20px; 
    }

	#Phrase {font-size:25px;}





    .Titre {
        font-family	: ArcherPro-Medium;
        color :#000;
    }


    .LienNoir {
       /* color :#000;
        text-decoration: underline;*/
        font-family:Montserrat-Regular;
        /*font-size:0.9em;*/
    }





    .BtnAHistoriques {
        border:1px solid #DEDEDE;
        font-size: 1.em;
        background: #ffffff ;
        padding-top:25px;
        padding-left:20px;
        margin:0px;
        font-weight: bold;
    }


    .Orange {
       /* background-color:#72c5d4;*/
        width:220px;
        padding:12px;
        margin:20px;
    }
    

@media (max-height:550px){

    #ZONE_BAS {
    display:none;   
    }


}


@media screen and (max-width: 800px) {


    
}


@media (min-width: 800px) {

    
    #Perso2,#Perso3 {
     display:none;   
    }
  #Ligne30 {
         display:block;
        margin-top:10px;   
    }   
    
    .BtnBleu {
				width			: 350px;
		margin-top		: 30px;

	}
    
}

@media (min-width: 700px) and (max-width: 1200px) {

    
    #Perso2,#Perso3,#Perso3a {
     display:none;   
    }
    

    #bonjour,#authentification {
    font-size:25px; 
    }
    
    #login,#password,#code {

      font-size:14px;    
    }
    
    #Ligne30 {
        display:none;
    }
    
    #Ligne100 {
    margin-top:0px;   
    }
    #ZONE_BAS { bottom : -20px; }
}

@media (min-width: 1200px) and (max-width: 1500px) {
    #Perso2 {
        display:block;   
        width:320px;
        position:absolute; bottom:72px; right:15px; z-index:99;  
    }
  
     #Perso3a { right:00px; top : 610px; width:300px;
    }

    #bonjour,#authentification {
    font-size:30px;
    }
   
    #login,#password,#code {
        font-size:18px;

    }
    
    #Ligne30 {
        display:none;
    }
    
    #Ligne100 {
        margin-top:100px;
    }
    
    #ZONE_BAS { bottom : -20px; }
}

@media (min-width: 1400px) and (max-width: 1500px) {
     #Perso2 {
          display:block;   
          width:400px;
      position:absolute; bottom:58px; right:15px; z-index:99;  
    }
        #Perso3 {
        display:block;   
        width:500px;
        position:absolute; bottom:-5px; right:-100px; z-index:99;  
    }
       #Perso3a { right:60px; top : 620px; width:300px;
}
}

@media (min-width: 1500px) and (max-width: 1700px) {
    #Perso2 {
         display:block;   
        width:450px;
      position:absolute; bottom:70px; right:20px; z-index:99;  
    }
    #Perso3 {
        display:block;   
        width:500px;
        position:absolute; bottom:140px; right:0px; z-index:99;  
    }
       #Perso3a { right:60px; top : 560px; width:350px;
}
    #bonjour ,#authentification {
    font-size:35px; 
    }
    
    #login,#password,#code {
      font-size:18px;    
    }
    
    #Ligne30 {
         display:block;
        margin-top:20px;
    }
    
    #Ligne100 {
        margin-top:100px;   
    }
    
    #ZONE_BAS { bottom : 0px; }
}

@media (min-width: 1700px)	{

   #Perso2 {
         display:block;   
        width:450px;
      position:absolute; bottom:70px; right:20px; z-index:99;  
    }
    #Perso3 {
        display:block;   
        width:500px;
        position:absolute; bottom:170px; right:0px; z-index:99;  
    } 

    #Perso3a {
        right:60px; top : 560px; width:350px;
    }
     #bonjour ,#authentification{
    font-size:35px; 
    }
    
    #login,#password,#code {
      font-size:18px;    
    }
    
    #Ligne30 {
         display:block;
        margin-top:20px;
    }
    
    #Ligne100 {
        margin-top:100px;   
    }
    
    #ZONE_BAS { bottom : 0px; }
}
 


	#ZONE_NULL {
        osition:absolute;
		idth:100%;
        eight:180px;
		
        
	}	
	#ZONE_FFF {
		width:100%;
		osition:relative;
		op : 189px;
		
		background-color: #fff;
        
       
	}

	#ZONE_BAS {
		width:100%;
		position:absolute;
        background-color: #f1f1f1;
      
        height:150px;
	}

	#ZONE_CCC {
		border:0px solid #000;
        width             :100%;
		osition:relative;
		top :170px;
		background-color  : #f1f1f1;
		height:550px;
        overflow:auto;
	}

  	#ZONE_CCC_EHPAD {
		border:0px solid #000;
        width             :100%;
		top :170px;
		background-color  : #f1f1f1;

        overflow:auto;
	}



    .btn_SeDeconnecter_txt {
        font-size	: 14px;
        font-family	: Montserrat-Regular;
	}

.extranetGenericButton {
    background: var(--Btn_icope_enable);
    cursor: hand;
    cursor: pointer;
    vertical-align: middle;
    text-align:center;
    border-radius : 10px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
    transition: opacity  0.3s; /* Transition douce pour un effet agréable */
}
.extranetGenericButton:hover  {
    opacity: 0.5; /* Par exemple, changer l'opacité */
}

.Carre {
	cursor: hand;
	cursor: pointer;
	/*display: table-cell;  comportement visuel de cellule */
	vertical-align: middle;
	text-align:center;
	isplay: flex; /* contexte sur le parent */
}



	
//	Histogramme	
	.labels {
	
		margin-right	: 50px;
		fill 			: #000000;
		font-size		: 12px;
	}
	.graph .labels.x-labels {
	 z-index:9999999999;
		text-anchor		: middle;
	}
	.graph .labels.y-labels {
        z-index:9999999999;
		text-anchor		: end;
	}
	.graph .grid {
		stroke			: #aaaaaa;
		stroke-dasharray: 0;
		stroke-width	: 1;
	}
	.gris{
		fill:#FFF;
		fill-opacity : 0.4;
	}
	


.lds-dual-ring {
    Xisplay: inline-block;
    width: 60px;
    height: 60px;
}
.lds-dual-ring:after {
    content: " ";
   display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #FE6E13;
    border-color: #FE6E13 transparent #FE6E13 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 10px;
}
.lds-ellipsis div {
    position: absolute;
    top: 5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #FE6E13;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}



.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
    top:0px;
    position:relative;
    display: block;
    width: 10em;
    overflow: auto;
    height: 2em;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}
.invisible-scrollbar::-webkit-scrollbar {
    display: none;

}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000;
}

/* DivTable.com */
.divTable{
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
   font-size: 12.6px;
    padding: 0px 0px;
    margin:0px;
}

.divTableCell {
    text-align: center;
    border: 0px solid #999999;
    display: table-cell;
    padding: 0px 0px;
    cursor:pointer;
}

.divTableBody {
    display: table-row-group;
}
.divTableBody:hover
{
    background-color: #E8E8E8;
}