body {
  font-family: Ubuntu, "Helvetica Neue", Helvetica, arial, sans-serif;
  background-color: #004c6d;
  }

html, body {
  height: 100%;
  overflow: hidden;
}



#weatherIcon {
  margin-left:25%;
  margin-right:25%;
  height:70px;
  width:70px;

  }

#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;
  }

/*.lightBG {
  background-color: rgba(255, 255, 0, 0.3);
  }

.heatingBG {
  background-color: rgba(255, 0, 255, 0.3);
  }

.projectorBG {
  background-color: rgba(0, 255, 255, 0.3);
  }*/

.mui-panel {
  background-color: #015579;
  }

.h105 {
  height: 100px;
  }

.mdHeading {
  overflow: hidden;
  }

.mui--text-title {
  color: #ffffff;
  }

.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);
    }
  }

.material-icons {
  color: #e5f7fd;
  }

.material-icons.md-18 { font-size: 18px; }

.material-icons.md-24 { font-size: 24px; }

.material-icons.md-36 { font-size: 36px; }

.material-icons.md-48 { font-size: 48px; }

.material-icons.md-100 { font-size: 100px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }

.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }

.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.material-icons.md-bulb {
  content: ""
  }

/*
fan : toys

<i class="material-icons">&#xE332;</i>


bulb : lightbulb_outline
<i class="material-icons">&#xE90F;</i>

calendar: event_note
<i class="material-icons">&#xE616;</i>

projector: cast
<i class="material-icons">&#xE307;</i>

*/

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

  }

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