html, body{
  background-color : #28394b;
  position : fixed;
  top : 0px;
  left : 0px;
  height : 100%;
  width : 100%;
  margin : 0px;
  padding : 0px;
}
nav .nav-wrapper .left.menu, nav .nav-wrapper .right.settings{
  position : relative;
  height : 56px;
  width : 56px;
  cursor : pointer;
}
  nav .nav-wrapper .left.menu i, nav .nav-wrapper .right.settings i{
    position : absolute;
    top : 50%;
    left : 50%;
    line-height : 56px;
    transform : translate(-50%, -50%);
    font-size : 26px;
  }
.container .row .col .sensor{
  height : 100px;
  width : 100%;
  margin-top : 60px;
  position : relative;
  color : white;
  border-bottom-left-radius : 5px;
  border-bottom-right-radius : 5px;
}
  .container .row .col .sensor:before{
    content : "";
    position : absolute;
    bottom : 100%;
    left : 0px;
    height : 40px;
    width : 100%;
    background-color : white;
    border-top-left-radius : 5px;
    border-top-right-radius : 5px;
    z-index : 1;
    opacity : 0.8;
  }
  .container .row .col .sensor.red{
    background-color : #F44336;
  }
  .container .row .col .sensor.blue{
    background-color : #2196F3;
  }
  .container .row .col .sensor.orange{
    background-color : #FF9800;
  }
  .container .row .col .sensor.green{
    background-color : #4CAF50;
  }
  .container .row .col .sensor:after{
    position : absolute;
    top : 0px;
    right : 0px;
    content : "";
    font-family : fontawesome;
    color : white;
    line-height : 100px;
    text-align : center;
    height : 100px;
    width : 75px;
    font-size : 50px;
  }
  .container .row .col .sensor.temperature:after{
    content : "\f2c7";
  }
  .container .row .col .sensor.humidity:after{
    content : "\f043";
  }
  .container .row .col .sensor.eye:after{
    content : "\f06e";
  }
  .container .row .col .sensor.light:after{
    content : "\f0eb";
  }
  .container .row .col .sensor .value{
    display : inline-block;
    position : absolute;
    top : 12px;
    left : 12px;
    height : 36px;
    line-height : 36px;
    font-size : 36px;
  }
    .container .row .col .sensor .value:after, .container .row .col .sensor .moyenne:after{
      position : absolute;
      top : 0px;
      left : 100%;
      margin : 0px;
      line-height : 14px;
      font-size : 14px;
    }
    .container .row .col .sensor.temperature .value:after, .container .row .col .sensor.temperature .moyenne:after{
      content : "°C";
    }
    .container .row .col .sensor.humidity .value:after, .container .row .col .sensor.eye .moyenne:after{
      content : "%";
    }
  .container .row .col .sensor .moyenne{
    display : inline-block;
    position : absolute;
    bottom : 12px;
    left : 12px;
    height : 20px;
    line-height : 20px;
    font-size : 16px;
    opacity : 0.6;
    white-space : nowrap;
  }
    .container .row .col .sensor .moyenne:after{
      line-height : 10px;
      font-size : 10px;
    }
  .container .row .col .sensor .name{
    position : absolute;
    bottom : 100%;
    left : 0px;
    color : black;
    padding : 10px;
    height : 40px;
    width : 100%;
    z-index : 2;
  }

/* ############################################################################################################################## */
/* ### MATERIALIZE ############################################################################################################## */
/* ############################################################################################################################## */

nav{
  background-color : #28394b;
  box-shadow : none;
}
