body {
  color: #ffffff;
  margin:0;
  padding:0;
  background-color: #000000;
  background-image: url(images/background.jpg);
  background-size: cover;
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center;
}

/****** desktop ******/
@media only screen and (min-width: 730px) {
    :root /* variables */ {
        --ribbon-items-hmargin: 30px;
        --ribbon-items-vmargin: 8px;
        --login-item-width: 250px;
    }
}

/****** mobile ******/
@media only screen and (max-width: 729px) {
    :root /* variables */ {
        --ribbon-items-hmargin: 2px;
        --ribbon-items-vmargin: 2px;
        --login-item-width: 100%;
    }
}



.loginForm{
  margin:40px;
  text-align: center;
}

.loginForm input:not([type=checkbox]){
    width: var(--login-item-width);
    height: 40px;
}

.navBar {
    background-color: #ffc080;
    background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: #806060;
    border-width: 1px;
    border-style: solid;
	padding: 0; margin: 0;
	text-align: center; /* centrer le texte */
}
.navBar ul{
    margin: var(--ribbon-items-vmargin);
}
.navBar li {
	display: inline;
	list-style: none;
}
.navBar a {
	display:inline-block;
	margin: 0 var(--ribbon-items-hmargin);
	color: #000000;
	text-decoration: none;
	transition: 400ms;
}
.navBar a:hover {
	display:inline-block;
	margin: 0 var(--ribbon-items-hmargin);
	color: #000000;
    text-shadow: 0px 0px 4px #ff0000;
}




.graph{
    /* height:400px; */
    width: 100%;
    line-height: 400px;  /* a trick to vertical center */
    white-space: nowrap; /* a trick to vertical center */
    text-align: center;
}

.graphControls{
    text-align: center;
    margin: 5px;
}


.graphAndControls{

}

.heaterGraph{
  float: left;
  width: 80%;
  clear: both;
  margin-left: 15px;
  margin-right: 15px;
}







/*
/* to display inline <form>
#cssTrickOnTheLastItemOfAnInlineForm {
    overflow:auto;
    display:block;
}
select {
    float:left;
}
*/


.inlineForm{
    display: inline;
}


.heatersList {
    display: flex;
    flex-wrap: wrap;

}

.heaterItem {
    margin: 30px;
    border: solid black;

}

.heaterItem img{
    height: 15px;
    width: 15px;
    vertical-align: middle;
}

.heaterItem a{
    color: #ffffff;
}