/** main.css **/
@CHARSET "UTF-8";


@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url("../css/Nunito.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
	margin:auto;
	padding:0;
}
body{
	min-height:500px;
    font: 20px/1 Nunito,Arial,sans-serif;
}
h1,h2{
 	line-height: 1;
	font-family: Nunito,Arial,sans-serif;
	font-weight: normal;
	margin: 0 auto;
}

p {
    padding: 20px;
	margin:  auto;
    width : 550px;
}

h1{
	font-size: 40px;
	padding: 0px 15px 0px;
	text-align: center;
	top: 0px;
	margin-top: -30px;
}

h2{
	font-size: 14px;
	padding: 4px 13px 9px 11px;
	top: 51px;
}
object{
	display: block;
    width: 1200px;
    height: 1000px;
	margin:  auto;
	background-color: #f0f0f0;
}

nav{
	display: block;
	margin: 2px auto 0;
	text-align: center;
	width: 950px;

}

footer{
	color: #BBBBBB;
	font-size: 15px;
	line-height: 1.6;
	padding: 10px 20px 0;
	text-align: center;
	display:block;
}

footer b{
	color: #888888;
	display: block;
	font-size: 10px;
	font-weight: normal;
}

a, a:visited {
	text-decoration:none;
	outline:none;
	color:#54a6de;
}

a:hover{
	text-decoration:underline;
}
/**************************************************************************************************/	
/******************* Menu CSS *********************************************************************/	
/**************************************************************************************************/	
.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
    margin: auto;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;

    box-shadow: 0 0 24px rgba(255, 255, 255, 0.6);
    -moz-box-shadow: 0 0 24px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0 0 24px rgba(255, 255, 255, 0.6);
}

.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

    border-right: 1px solid rgba(9, 9, 9, 0.125);

    /* Adding a 1px inset highlight for a more polished efect: */

    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

    position:relative;

    float: left;
    list-style: none;
}
.fancyNav li:after{

    /* This creates a pseudo element inslide each LI */	

    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* Gradients! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

    /* This will create a smooth transition for the opacity property */

    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}
/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
    border-radius: 24px 0 0 24px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

    border-radius:24px 0 0 24px;
}

.fancyNav li:last-child{
    border-radius: 0 24px 24px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

    border-radius:0 24px 24px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}
.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}
/* Styling the anchor elements */

.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
/*     font: 20px/1 Cabin Condensed,Arial,sans-serif;*/
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}

.fancyNav a.homeIcon{
    background:url('../img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 100px;
}

/**************************************************************************************************/	
/******************* tableau des valeurs instantanees *********************************************/	
/**************************************************************************************************/	
.TableInstant th{
    background-color: #f0f0f0;
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #D6D6D6 70%);
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    float: left;
    color: #5d5d5d;
    white-space:nowrap;
	width: 155px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	text-align: left;
    padding: 8px 180px 10px 10px;
}
.TableInstant th:first-child{
    border-radius: 24px 0 0 24px;
	text-align: left;
    padding: 8px 180px 10px 10px;
}
.TableInstant th:last-child{
    border-radius: 0 24px 24px 0;
	text-align: left;
    padding: 8px 180px 10px 10px;
}
/**************************************************************************************************/
.TableInstant td{
    background-color: #f0f0f0;
    background-image: linear-gradient(rgba(246, 80, 80, 0.64) 0%, #F58888 50%, #F00 90%) ;
    border-right: 0px solid rgba(9, 9, 9, 0.125);
    box-shadow: 0px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    float: left;
    color: #5d5d5d;
    white-space:nowrap;
	width: 20px;
    /* list-style: none; */
    /* Styling texte */
    /* display: inline-block; */
    /* font: 20px/1 Cabin Condensed,Arial,sans-serif; */
    /* padding: 8px 40px 10px 40px; */
    /*padding: 8px 45px 10px;*/
    /* text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); */
    /* z-index:2; */
    /* text-decoration:none !important; */
}
.TableInstant td:first-child{
    border-radius: 24px 0 0 24px;
	text-align: center;
}
.TableInstant td:last-child{
    border-radius: 0 24px 24px 0;
    padding: 8px 40px 10px 20px;
    text-align: left;
    z-index:-1;
}

/**************************************************************************************************/
#gauche {
    position: absolute;
}
#droite {
    position: absolute;
    right: 0px;
}

/******ETAT**************************************************************/
.etat {
    position:sticky;
    z-index:90;
	width:500px;
	/* left: 50%; */
	top: 1px;
	/* transform: translateX(-50%); */
}
.etat th{
    background-color: #f0f0f0;
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #D6D6D6 70%);
    /* border-right: 1px solid rgba(9, 9, 9, 0.125); */
    /* box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; */
    position:relative;
    /* float: left; */
    color: #757474;
    white-space:nowrap;
	width: 120px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	text-align: center;
    /* padding: 8px 10px 10px 10px; */
}
	
.etat th:first-child{
	width: 300px;
    border-radius: 24px 0 0 24px;
    padding: 8px 10px 10px 10px;
}
.etat th:last-child{
	width: 120px;
    border-radius: 0 24px 24px 0;
    padding: 0px 0px 0px 0px;
}

#modeCommand,#modeChauff {
	position: relative;
	z-index: 2;
	width: 40px;
	height: 30px;
	display: inline-block;
}
.modeCommandArret {
	background: url("../img/modeCommand.png") no-repeat;
	background-position: 0% ; 
}
.modeCommandProgram {
	background: url("../img/modeCommand.png") no-repeat;
	background-position: 20% ; 
}
.modeCommandConfort {
	background: url("../img/modeCommand.png") no-repeat;
	background-position: 40% ; 
}
.modeCommandReduit {
	background: url("../img/modeCommand.png") no-repeat;
	background-position: 60% ; 
}
.modeCommandSoiree {
	background: url("../img/modeCommand.png") no-repeat;
	background-position: 80% ; 
}
.modeCommandAbsence {
	background: url("../img/modeCommand.png") no-repeat;
	background-position: 100% ; 
}

/* #tooltipModeCommand{ */
  /* display : block; */
  /* width: 200px; */
/* } */

#erreurNumber,#erreurText{
    padding: 12px 0px 12px 10px;
}
.erreur th{
    background-color: #f0f0f0;
    background-image: linear-gradient(#fefefe 0%, #f9c0c0 50%, #EA8F8F 70%);
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    color: #757474;
    white-space:nowrap;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	text-align: center;
}
.erreurVisible th{
    visibility: visible;
}
.erreurNonVisible th{
    visibility: hidden;
}
.erreur th:first-child{
	width: 80px;
    border-radius: 24px 0 0 24px;
    padding: 8px 10px 10px 10px;
}
.erreur th:last-child{
	width: 600px;
    border-radius: 0 24px 24px 0;
    padding: 0px 0px 0px 0px;
	text-align: left;
}

/**************************************************************************************************/	
/******************* graphiques ******************************************************************/	
/**************************************************************************************************/	

#live {
	min-width: 400px;
    width: 1000px;
	height: 600px;
	margin: 0 auto;
}
#chart_last24 {
	min-width: 400px;
	height: 550px;
	margin: 0 auto;
}
.rel {
    width: 100%; /*1206px;*/
}
.graphe_gauge {
    display: inline-block;
    visibility: hidden;
	position: absolute;
    width: 150px;
	height: 200px;
	z-index: 10;
}
.graphe_gaugePos1{
	top: 90px;
	left: 80px;
}
.graphe_gaugePos2{
	top: 90px;
	left: 210px;
}

.graphe_size {
    display: inline-block;
	width: 99%;
	height: 40%;
}
.graphe_size2 {
    display: inline-block;
	width: 33%;
	height: 600px;
	/* margin: 0 auto; */
    position:relative;
	/* top: -200px; */
}
.graphe_size3 {
    display: inline-block;
	width: 33%;
	height: 600px;
	/* margin: 0 auto; */
    position:static;
}
.graphe_size4 {
    display: inline-block;
	width: 99%;
	height: 600px;
}
.graphe_size5 {
    font: 15px/1 Nunito,Arial,sans-serif;
    display: inline-block;
	/* width: 33%; */
	height: 299px;
	/* padding: 10% 0 0 0 ; */
	margin: 0 auto;
	position: static;
}
.calendar {
    width: 250px;
}

/**************************************************************************************************/	
/******************* Bandeau CSS ******************************************************************/	
/**************************************************************************************************/	

.clear{
	clear: both;
}

#new_version {
    display: inline-block;
	width: 100%;
	height: 20px;
    color: #5d5d5d;
	text-align: center;
    background-color: #f0f0f0;
	padding: 10px 0 30px 0;


}
/*************************************************************************************************/	
/******** dessin chaudiere************************************************************************/	
/*************************************************************************************************/	
/********tableau pour le dessin ********************************************************************/	
#tableau_dessin {
    width: 1073px;
    height: 801px;
    margin: auto; 
    font-size: 16px ;

	font-weight: normal; 
    position: relative;
}

#image {
    /* position: relative; */
    cursor: pointer;
}
#bulles {
    cursor: pointer;
}

.hidden { 
    /* display:none ; */
   /*  background-color: red ; */
    position: relative;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear, transform 2s;
    transform: scale(0.7,0.7) ;
}
.visible  {
    position: relative;
    visibility:visible;
    opacity: 1;
    transition:  opacity 2s linear;
    transition:  opacity 2s linear, transform 2s;
    transform: scale(1,1) ;
    /* display:block ; */
}


/* position des images
    -------------
  A |   | 1 | 2 |
    -------------
  B |   | 1 | 2 | 
    -------------
  C |   | 1 | 2 |
    -------------
  D |   | 1 | 2 |
    -------------
  E |   | 1 | 2 |
    -------------
*/
/********animation des images ********************************************************************/	

/*********************************************************/
/*** LIGNE A *********************************************/
/***A1*****************************/
.extr_fixe {
    position: absolute;
    left: 300px;
	width: 217px;
	height: 112px;
	display: inline-block;
	background: url("../img/nano-A1.png") no-repeat;
    background-position: 0% ;
}
.extr_anime {
    position: absolute;
    left: 300px;
	width: 217px;
	height: 112px;
	display: inline-block;
	background: url("../img/nano-A1.png") no-repeat;
    animation: anim_extr .3s steps(9) infinite ;
}
@keyframes anim_extr {
    from { background-position: 0%; }
    to       { background-position: 112.5%; }
}
/***A2*****************************/
.RAPS_fixe {
    position: absolute;
    left: 517px;
	width: 256px;
	height: 112px;
	display: inline-block;
	background: url("../img/nano-A2.png") no-repeat;
    background-position: 0% ;
}
.RAPS_anime {
    position: absolute;
    left: 517px;
	width: 256px;
	height: 112px;
	display: inline-block;
	background: url("../img/nano-A2.png") no-repeat;
    animation: anim_RAPS .7s steps(5) infinite ;
}
@keyframes anim_RAPS {
    from { background-position: 0%; }
    to       { background-position: 125%; }
}
/*********************************************************/
/*** LIGNE B *********************************************/
/***B1*****************************/
.ressort_fumee {
    position: absolute;
    left: 300px;
    top: 112px;
	width: 217px;
	height: 301px;
	display: inline-block;
	background: url("../img/nano-B1.png") no-repeat;
    background-position: 0% ;
}
.ressort_fixe {
    position: absolute;
    left: 300px;
    top: 112px;
	width: 217px;
	height: 301px;
	display: inline-block;
	background: url("../img/nano-B1.png") no-repeat;
    background-position: 16.66% ;
}
.ressort_anime {
    position: absolute;
    left: 300px;
    top: 112px;
	width: 217px;
	height: 301px;
	display: inline-block;
	background: url("../img/nano-B1.png") no-repeat;
    animation: anim_ressort .5s steps(6) infinite alternate;
}
@keyframes anim_ressort {
    from { background-position: 16.66%; }
    to       { background-position: 116.66%; }
}
/***B2*****************************/
#nano-B2 {
    position: absolute;
    left: 517px;
    top: 112px;
	width: 256px;
	height: 301px;
	display: inline-block;
	background: url("../img/nano-B2.png") no-repeat;
    background-position: 0% ;
}
/*********************************************************/
/*** LIGNE C *********************************************/
/***C1*****************************/
.coeur_combustion {
    position: absolute;
    left: 300px;
    top: 413px;
	width: 217px;
	height: 187px;
	display: inline-block;
	background: url("../img/nano-C1.png") no-repeat;
    animation: anim_flamme .5s steps(5) infinite alternate;
}
@keyframes anim_flamme {
    from { background-position: 20%; }
    to       { background-position: 120%; }
}

.coeur_eteint {
    position: absolute;
    left: 300px;
    top: 413px;
	width: 217px;
	height: 187px;
	display: inline-block;
	background: url("../img/nano-C1.png") no-repeat;
    background-position: 0% ;
}
/***C2*****************************/
#nano-C2 {
    position: absolute;
    left: 517px;
    top: 413px;
	width: 256px;
	height: 187px;
	display: inline-block;
	background: url("../img/nano-C2.png") no-repeat;
    background-position: 0% ;
}
/*********************************************************/
/*** LIGNE D *********************************************/
/***D1*****************************/
.foyer_eteint {
    position: absolute;
    left: 300px;
    top: 600px;
	width: 162px;
	height: 50px;
	display: inline-block;
	background: url("../img/nano-D1.png") no-repeat;
    background-position: 0% ;
}
.foyer_veille {
    position: absolute;
    left: 300px;
    top: 600px;
	width: 162px;
	height: 50px;
	display: inline-block;
	background: url("../img/nano-D1.png") no-repeat;
    background-position: 25% ;
}
.foyer_allumage {
    position: absolute;
    left: 300px;
    top: 600px;
	width: 162px;
	height: 50px;
	display: inline-block;
	background: url("../img/nano-D1.png") no-repeat;
    background-position: 50% ;
}
.foyer_reprise {
    position: absolute;
    left: 300px;
    top: 600px;
	width: 162px;
	height: 50px;
	display: inline-block;
	background: url("../img/nano-D1.png") no-repeat;
    background-position: 75% ;
}
.foyer_combustion {
    position: absolute;
    left: 300px;
    top: 600px;
	width: 162px;
	height: 50px;
	display: inline-block;
	background: url("../img/nano-D1.png") no-repeat;
    background-position: 100% ;
}
/***D2*****************************/
.vis_stop {
    position: absolute;
    left: 462px;
    top: 600px;
	width: 311px;
	height: 50px;
	display: inline-block;
	background: url("../img/nano-D2.png") no-repeat;
    background-position: 0% ;
}
.vis_marche {
    position: absolute;
    z-index:-1;
    left: 462px;
    top: 600px;
	width: 311px;
	height: 50px;
	display: inline-block;
	background: url("../img/nano-D2.png") no-repeat;
    animation: anim_vis 1s steps(5) infinite ;
}
@keyframes anim_vis {
    from { background-position: 0%; }
    to       { background-position: 125%; }
}
/*********************************************************/
/*** LIGNE E *********************************************/
/***E1*****************************/
.cendrier_ferme {
    position: absolute;
    left: 300px;
    top: 650px;
	width: 217px;
	height: 151px;
	display: inline-block;
	background: url("../img/nano-E1.png") no-repeat;
    background-position: 25% ;
}
.cendrier_ventil {
    position: absolute;
    left: 300px;
    top: 650px;
	width: 217px;
	height: 151px;
	display: inline-block;
	background: url("../img/nano-E1.png") no-repeat;
    background-position: 0% ;
}
.cendrier_ouvert {
    position: absolute;
    left: 300px;
    top: 650px;
	width: 217px;
	height: 151px;
	display: inline-block;
	background: url("../img/nano-E1.png") no-repeat;
    background-position: 100% ;
}
.cendrier_mouvt {
    position: absolute;
    left: 300px;
    top: 650px;
	width: 217px;
	height: 151px;
	display: inline-block;
	background: url("../img/nano-E1.png") no-repeat;
    animation: anim_cendrier 1s steps(4) infinite alternate;
}
@keyframes anim_cendrier {
    from { background-position: 25%; }
    to       { background-position: 125%; }
}
/**********************************/
#nano-E2 {
    position: absolute;
    left: 517px;
    top: 650px;
	width: 256px;
	height: 151px;
	display: inline-block;
	background: url("../img/nano-E2.png") no-repeat;
    background-position: 0% ;
}
/********Bulles et valeurs ********************************************************/	
/**********************************************************************************/
/*** BULLES ********************************/
.extr-bulle {
    position: absolute;
    z-index: 2;
    left: -100px;
	top: -40px;
    width: 446px;
	height: 200px;
	display: inline-block;
	background: url("../img/bulles.png") no-repeat;
    background-position: 0% ;
}
.fumee-bulle {
    position: absolute;
    z-index: 2;
    left: 0px;
	top: 130px;
    width: 446px;
	height: 200px;
	display: inline-block;
	background: url("../img/bulles.png") no-repeat;
    background-position: 16.66% ;
}
.Tchaud-bulle {
    position: absolute;
    z-index: 2;
    left: -40px;
	top: 310px;
    width: 446px;
	height: 200px;
	display: inline-block;
	background: url("../img/bulles.png") no-repeat;
    background-position: 33.33% ;
}
.puiss-bulle {
    position: absolute;
    z-index: 2;
    left: -10px;
	top: 500px;
    width: 446px;
	height: 200px;
	display: inline-block;
	background: url("../img/bulles.png") no-repeat;
    background-position: 50% ;
}
.bois-bulle {
    position: absolute;
    z-index: 2;
    left: 600px;/*630px;*/
	top: 615px;
    width: 446px;
	height: 200px;
	display: inline-block;
	background: url("../img/bulles.png") no-repeat;
    background-position: 83.33% ;
}
.silo-bulle {
    position: absolute;
    z-index: 2;
    left: 670px;
	top: 370px; /*320px;*/
    width: 446px;
	height: 300px;
	display: inline-block;
	background: url("../img/bulle-silo.png") no-repeat;
}
.maison-bulle {
    position: absolute;
    z-index: 2;
    left: 750px;
	top: -50px;
    width: 446px;
	height: 600px;
	display: block;
	background: url("../img/maison.png") no-repeat;
}
	#pompe-radiat {
		position: absolute;
		z-index: 3;
		left: 60px;
		top: 260px;
		width: 100px;
		height: 135px;
		display: inline-block;
	}
	#ballonECS-bulle {
		position: absolute;
		z-index: 2;
		left: 95px;
		top: 0px;
		width: 446px;
		height: 300px;
		display: inline-block;
	}
	.tuyau-ECS {
		position: absolute;
		z-index: 1;
		left: 0px;
		top: 0px;
		width: 446px;
		height: 600px;
		display: inline-block;
		background: url("../img/tuyauECS.png") no-repeat;
	}
	.ballonECS-0 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 0% ; /*11 images 0% 10%... */
	}
	.ballonECS-10 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 10% ; 
	}
	.ballonECS-20 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 20% ; 
	}
	.ballonECS-30 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 30% ; 
	}
	.ballonECS-40 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 40% ; 
	}
	.ballonECS-50 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 50% ; 
	}
	.ballonECS-60 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 60% ; 
	}
	.ballonECS-70 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 70% ; 
	}
	.ballonECS-80 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 80% ; 
	}
	.ballonECS-90 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 90% ; 
	}
	.ballonECS-100 {
		background: url("../img/ballonECS.png") no-repeat;
		background-position: 100% ; 
	}
		#pompe-ECS {
			position: absolute;
			z-index: 2;
			left: 125px;
			top: 260px;
			width: 100px;
			height: 135px;
			display: inline-block;
		}
.pompeOFF {
	background: url("../img/pompe.png") no-repeat;
	background-position: 0% ; /* 2 images : 0%  100% */
}
.pompeON {
	background: url("../img/pompe.png") no-repeat;
    animation: anim_pompe 0.3s steps(5) infinite ;
}
@keyframes anim_pompe {
    from { background-position: 20%; }
    to       { background-position: 120%; }
}

	/*** TEXTE BULLE*************************/
.texte-bulle {
    position: absolute;
	display: inline-block;
    z-index: 5;
    top: 110px;
	left: 185px;
    font-size: 40px ;
    text-align: center;
}
.BallonECS-texte {
    position: absolute;
	display: block;
    z-index: 3;
    top: 100px;
    left: 200px;
	width: 40px;
    font-size: 20px ;
}
.maison-Tint-texte {
    z-index: 4;
    left: 125px;
    top: 110px;
    width: 60px;
	height: 20px;
    font-size: 20px ;
}
.maison-Text-texte {
    z-index: 3;
    left: 215px;
    top: 15px;
    width: 60px;
	height: 20px;
    font-size: 20px ;
}
.radiateur-texte {
    position: relative;
	/* display: block; */
    z-index: 4;
    top: 185px;
    left: 75px;
    width: 60px;
	height: 20px;
    font-size: 20px ;
}
.silo-texte {
   /* float: right;*/
    position: absolute;
    z-index: 0;
    left: 230px;
	top: 145px;
    bottom: 70px;
    width: 140px;
    height: 163px;
	display: inline-block;
  /* background: url("../img/Silo-textile-GWTS-XXL2.png") no-repeat; */
}
/* .pompe-radiat { */
	/* position: relative; */
	/* z-index: 3; */
	/* left: 60px; */
	/* top: 260px; */
	/* width: 100px; */
	/* height: 135px; */
/* } */
#bois-texte {
    left: 160px;
    top: 87px;
	font-size: 33px;
}
#silo {
    position: absolute;
    z-index: 0;
    left: 220px;
    top: 43px;
    width: 180px;
    height: 200px;
}
/*** TOOLTIP ********************************/

@keyframes pop-tooltip {
    0%  { transform: scale(0.1); }
    60%  { transform: scale(1); }
    80%  { transform: scale(0.9); }
    100%{ transform: scale(1); }
}
/* Tooltip container */
.tooltipContainer {
  position: absolute;
}
/* Tooltip text + position*/
.tooltipContainer > .tooltipMaison { /*div maison*/
  visibility: hidden;
  position: relative;
  display : block;
  width: 200px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 15px ;
  top: -90px;
  left: -80px;
  z-index: 10;
}
.tooltipContainer > .tooltipBulle {/*bulles*/
  visibility: hidden;
  position: relative;
  display : block;
  width: 200px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 20px ;
  margin: auto;
  top: 30px;
  z-index: 10;
}
.tooltipContainer > .tooltipEtat {
  position: relative;
  display : block;
  visibility: hidden;
  width: 200px;
  top: 40px;
  left: -30px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 30px 0;
  position: absolute;
  z-index: 10;
}
.tooltipContainer > .tooltipStatEcs {
  position: relative;
  display : block;
  visibility: hidden;
  width: 600px;
  top: -80px;
  left: 10px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 30px 0;
  position: absolute;
  z-index: 10;
}
.tooltipContainer:hover .tooltipBulle, .tooltipContainer:hover .tooltipMaison, .tooltipContainer:hover .tooltipEtat, .tooltipContainer:hover .tooltipStatEcs{
  visibility: visible;
  background: linear-gradient(white,grey);
  Animation: pop-tooltip 1s ; 
}

/*****************************************************************************/
/*** page reglages ********************************/
.ensemble {
  width: 1150px;
  margin-left: auto;
  margin-right: auto;
}  

/********cadre reglage******/
.boutons_radio {
  width: 400px;
  height: 700px;
  border: 1px solid;
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 30px 30px;
  margin:  auto;
  /* position: absolute; */
  display: inline-block;
  float: left;
}
.radio_chauffage, .radio_ECS, .radio_MODE{
  top: 50px;
  position: relative;
  /* width: 400px; */
  /* Height: 100px; */
  text-align: left;
  margin: 0px 30px 40px 0px ;
}
.radio_bouton {
  top: 50px;
  position: relative;
  width: 200px;
  height: 100px;
  text-align: center;
}
input[type=submit]{
  background-color: grey;
  border: none;
  color: white;
  padding: 8px 32px;
  text-decoration: none;
  margin: 8px 2px 15px;
  cursor: pointer;
  border-radius: 10px;	
  transition-duration: 0.4s;
}
input[type=submit]:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  background-color: #4CAF50; /* Green */
  color: white;
}
/********************************************************************/	
/********cadre tarif******/
.tarif {
  width: 750px;
  min-height: 700px;
  border: 1px solid;
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 30px 30px;
  margin: auto;
  position: relative;
  display : inline-block;
  /* z-index: -2; */
  	margin: 0 auto;

}
/*** tableau des prix saison *********************************************/	
.TableTarif th{
    background-color: #f0f0f0;
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #D6D6D6 70%);
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    /* float: left; */
    color: #5d5d5d;
    white-space:nowrap;
	width: 200px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	text-align: left;
    padding: 8px 30px 10px 10px;
}
.TableTarif th:first-child{
    border-radius: 10px 0 0 10px;
	text-align: left;
    padding: 8px 30px 10px 10px;
}
.TableTarif th:last-child{
    border-radius: 0 10px 10px 0;
	text-align: right;
    padding: 8px 30px 10px 10px;
}
/******************************/
.TableTarif td{
    background-color: #f0f0f0;
    background-image: linear-gradient(rgba(246, 80, 80, 0.64) 0%, #F58888 50%, #F00 90%) ;
    border-right: 0px solid rgba(9, 9, 9, 0.125);
    box-shadow: 0px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    float: left;
    color: #5d5d5d;
    white-space:nowrap;
	width: 20px;
}
.TableTarif td:first-child{
    border-radius: 10px 0 0 10px;
	text-align: center;
}
.TableTarif td:last-child{
    border-radius: 0 10px 10px 0;
    padding: 8px 70px 10px 20px;
    text-align: center;
    /* z-index:-1; */
}
#prix {
	width: 63px;
	height: 20px;
}
.tarif_bouton {
  position: relative;
  width: 200px;
  margin: 2px auto 5px;
  text-align: center;
}
.form_saison_tarif {
  position: absolute;
  width: 350px;
  /* height: 100px; */
  text-align: center;
  display : inline-block;
}

/***ajouter/supprimer  onglet*******/
.onglet {
  position: relative;
  /* width: 200px; */
  height: 100px;
  text-align: center;
  /* display : inline-block; */
  float: right;
}	
.form_ajout_saison {
  position: relative;
  width: 200px;
  /* height: 100px; */
  text-align: center;
}	
.text_ajout_saison {
  position: relative;
  width: 130px;
  height: 35px;
  margin: 20px auto 20px;
  text-align: center;
}	
div.tabs {
  height: 650px;		
  width: 300px;
  position: relative;		/* Establish a containing block */
  line-height: 1;		/* Easier to calculate with */
  z-index: 0;
  }			
div.tabs > div {
  display: inline;		/* We want the buttons all on one line */
}
div.tabs > div > a {
  color: #5d5d5d;			/* Looks more like a button than a link */
  background: #CCC;		/* Active tabs are light gray */
  padding: 0.2em;		/* Some breathing space */
  border: 0.1em outset #BBB;	/* Make it look like a button */
  border-bottom: 0.1em solid #CCC;  /* Visually connect tab and tab body */
  border-radius: 10px 10px 10px 10px;
} 
div.tabs > div:not(:target) > a {
  border-bottom: none;		/* Make the bottom border disappear */
  background: #999;		/* Inactive tabs are dark gray */
}		
div.tabs > div:target > a,	/* Apply to the targeted item or... */
:target #default2 > a {		/* ... to the default item */
  border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
  background: #f0f0f0; /* Active tab is light gray */
}		
div.tabs > div > div {
  background: #f0f0f0;		/* Light gray */
  z-index: -2;			/* Behind, because the borders overlap */
  left: 0; top: 1.3em;		/* The top needs some calculation... */
  bottom: 0; right: 0;		/* Other sides flush with containing block */
  overflow: auto;		/* Scroll bar if needed */
  padding: 0.3em;		/* Looks better */
  /*border: 0.1em outset #BBB; /* 3D look */
  /* border: 1px solid #f0f0f0; */
  border-radius: 0px 20px 20px 20px;
}	
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
  position: absolute ; /* All these DIVs overlap */
}		
div.tabs > div:target > div, :target #default2 > div {
  position: absolute;		/* All these DIVs overlap */
  z-index: -1; /* Raise it above the others */
}			
div.tabs :target {
  outline: none;
}


/*** page form_password ********************************/

.password_div {
  top: 20px;
  border: 1px solid;
  border-radius: 20px;
  position: relative;
  width: 600px;
  height: 230px;
  margin:auto;
  /* margin-right:auto; */
  text-align: center;
}
button[type=submit]{
  background-color: grey;
  border: none;
  color: white;
  padding: 6px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;	
  transition-duration: 0.4s;
}
button[type=submit]:hover {
  box-shadow: 0 12px 6px 0 rgba(0,0,0,0.24), 0 17px 6px 0 rgba(0,0,0,0.19);
  background-color: #4CAF50; /* Green */
  color: white;
}


/*** tableau telnet********************************/
table.telnetTable {
  /* position: relative; */
  display : inline-table;
  border: 4px solid #555555;
  background-color: #74A6A2;
  width: 500px;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
  padding: auto;
}
table.telnetTable td, table.telnetTable th {
  border: 1px solid #555555;
  padding: 6px 5px;
  width: 50px;
}
table.telnetTable tbody td {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  cursor: pointer;
}

td.select  {
  background-color: #A43152;
  border: 7px solid #555555;
}
.inactif  {
  background-color: #a2c3c1;
  border: 7px solid #555555;
}

#telnet_center {
  width: 1020px;
  margin: auto;
}

/* table.telnetTable tfoot td { */
  /* font-size: 13px; */
/* } */
/* table.telnetTable tfoot .links { */
  /* text-align: right; */
/* } */
/* table.telnetTable tfoot .links a{ */
  /* display: inline-block; */
  /* background: #FFFFFF; */
  /* color: #A43152; */
  /* padding: 2px 8px; */
  /* border-radius: 5px; */
/* } */