sensortoy-app/app/css/app.css

body {
  font-family: Ubuntu, "Helvetica Neue", Helvetica, arial, sans-serif;

  }


#lightR, #projR { color: red !important; }

#lightG, #projG { color: green !important; }

#lightB, #projB { color: blue !important; }

#lightW, #projW { background-color: #aabbcc; }

.lightBG, .heatingBG, .projectorBG {
  float: right;
  }



.h105 {
  height: 100px;
  }

.mdHeading {
  overflow: hidden;
  }


.item_content {
  height: 100px;
  /* border: 1px solid grey;*/
  min-height: 100px;
  overflow: hidden;
  }

.item_content a.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  }

.item_content div.body, .item_content div.site, .item_content div.tags {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #313131;
  }

.time, .date, .temp {
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 80px;
  color: #bad649;
  }

.time span.hour:after {
  content: ":";
  }

.date {
  font-size: 35px;
  line-height: 1;
  }

.temp::after {
  content: "°c";
  }

.item_content div.tags {
  color: blue;
  }

.noConnection {
  color: rgb(244, 150, 26);
  }

#caltext {
  color: #fff;
  }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles */
  .time, .date, .temp {
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size: 33px;
    /*color: #ff0000;*/
    }

  .time {
    font-size: 50px;
    line-height: 1;
    }

  .time span.hour:after {
    content: "\a";
    white-space: pre;
    }

  .temp {
    font-size: 70px;
    }

  .temp::after {
    content: "°";
    }

  .wd-we {
    font-size: 75%;
    }

  .mo {
    font-size: 85%;
    }

  .mo.mo-1, .mo.mo-10 {
    font-size: 70%;
    }

  .mo.mo-2 {
    font-size: 65%;
    }

  .mo.mo-8 {
    font-size: 80%;
    }

  .mo.mo-9 {
    font-size: 55%;
    }

  .mo.mo-11, .mo.mo-12 {
    font-size: 60%;
    }

  }

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
  }

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
  }

.spinner {
  margin: 25px auto 0;
  width: 70px;
  text-align: center;
  }

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: rgb(244, 150, 26);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
  }

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  }

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
  }

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    }
  }


.md-display {
  opacity: 1;
  transition: opacity 0.3s, visibility 0.3s;

  }

.lostConnection {
    opacity: 0.5;
    transition: opacity 0.3s, visibility 0.3s;
}


.mui-ellipsis-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal!important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.pulser {
  display: block;
  margin-top:10%;
  border-radius: 100px;
  width: 30px;
  height: 30px;
  border: 10px solid #C5F4EB;
  -webkit-animation: pulse 0.75s ease-in infinite;
  -moz-animation: pulse 0.75s ease-in infinite;
  animation: pulse 0.75s ease-in infinite;
}
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(0); }
  85% { opacity: 1; }
  100% { -webkit-transform: scale(1); -webkit-filter: blur(5px); opacity: 0; }
}
@-moz-keyframes pulse {
  0% { -moz-transform: scale(0); }
  85% { opacity: 1; }
  100% { -moz-transform: scale(1); -moz-filter: blur(5px); opacity: 0; }
}
@keyframes pulse {
  0% { transform: scale(0); }
  85% { opacity: 1; }
  100% { transform: scale(1); filter: blur(5px); opacity: 0; }
}


header {
  position: fixed;
  top: 0;
  z-index: 1;
  right:0;
  transition: left .2s;
  width:100%;
  }

.mui-tabs__bar > li.tabOnWhite > a

  {
color:#78909C;
  }

.mui-tabs__bar > li.mui--is-active.tabOnWhite > a
{
  color:#2196F3;
  }