.col-forecast
{
    color: #fff;
    height: 18vh;
}
.col-forecast > label
{
    color: #fff;
    font-size: 16px;
}
.col-forecast > div
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 100%;
    text-align: right;
}
.col-forecast > div > label
{
    margin: 5px;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
}

.icon-red
{
   color:#f44336;
}

.container-mon {
  width: 100%;
  margin: 0px auto;
  position: relative;
  /* HAVE SCALED TO FIT THE WINDOW */
  transform: scale(0.80);
}

.container-mon > .screen {
  width: 280px;
  height: 280px;
  position: relative;  
  /*background: linear-gradient(#e7e7e7, #eaeaea,   #efefef, #fafafa, #fdfdfd,);*/
  background:#fff;
  border: 20px solid #474e5d;
  border-radius: 10px ;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.52), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

}

.monitor > div {
  position: absolute;
}

.monitor:before,
.monitor:after{
   content: "";
   position: absolute;
   left: 50%;
 }

.monitor:before {
  top: -10px;
  margin: -3px 0 0 -3px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #a5adbd;
}

.content-monitor
{
    height:224px; 
    width:240px;    
}
.offline:after {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  bottom: -13px;
  margin: 0 0 -4px -4px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 3px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 0.9s infinite;
  -moz-animation: blinkRed 0.9s infinite;
  -ms-animation: blinkRed 0.9s infinite;
  -o-animation: blinkRed 0.9s infinite;
  animation: blinkRed 0.9s infinite;
}

@-webkit-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-moz-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-ms-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-o-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}


.online:after {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  bottom: -13px;
  margin: 0 0 -4px -4px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #134413 0 -1px 3px, rgba(0, 255, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkGreen 0.9s infinite;
  -moz-animation: blinkGreen 0.9s infinite;
  -ms-animation: blinkGreen 0.9s infinite;
  -o-animation: blinkGreen 0.9s infinite;
  animation: blinkGreen 0.9s infinite;
}

@-webkit-keyframes blinkGreen {
    from { background-color: #0F0; }
    50% { background-color: #0A0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #134413 0 -1px 9px, rgba(0, 255, 0, 0.5) 0 2px 0;}
    to { background-color: #0F0; }
}
@-moz-keyframes blinkGreen {
    from { background-color: #0F0; }
    50% { background-color: #0A0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #134413 0 -1px 9px, rgba(0, 255, 0, 0.5) 0 2px 0;}
    to { background-color: #0F0; }
}
@-ms-keyframes blinkGreen {
    from { background-color: #0F0; }
    50% { background-color: #0A0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #134413 0 -1px 9px, rgba(0, 255, 0, 0.5) 0 2px 0;}
    to { background-color: #0F0; }
}
@-o-keyframes blinkGreen {
    from { background-color: #0F0; }
    50% { background-color: #0A0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #134413 0 -1px 9px, rgba(0, 255, 0, 0.5) 0 2px 0;}
    to { background-color: #0F0; }
}
@keyframes blinkGreen {
    from { background-color: #0F0; }
    50% { background-color: #0A0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #134413 0 -1px 9px, rgba(0, 255, 0, 0.5) 0 2px 0;}
    to { background-color: #0F0; }
}

.noload:after {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  bottom: -13px;
  margin: 0 0 -4px -4px;
  background-color: #ff9800;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #a86400 0 -1px 3px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkOrange 0.9s infinite;
  -moz-animation: blinkOrange 0.9s infinite;
  -ms-animation: blinkOrange 0.9s infinite;
  -o-animation: blinkOrange 0.9s infinite;
  animation: blinkOrange 0.9s infinite;
}

@-webkit-keyframes blinkOrange {
    from { background-color: #ff9800; }
    50% { background-color: #cc7900; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #a86400 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #ff9800; }
}
@-moz-keyframes blinkOrange {
    from { background-color: #ff9800; }
    50% { background-color: #cc7900; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #a86400 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #ff9800; }
}
@-ms-keyframes blinkOrange {
    from { background-color: #ff9800; }
    50% { background-color: #cc7900; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #a86400 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #ff9800; }
}
@-o-keyframes blinkOrange {
    from { background-color: #ff9800; }
    50% { background-color: #cc7900; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #a86400 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #ff9800; }
}
@keyframes blinkOrange {
    from { background-color: #ff9800; }
    50% { background-color: #cc7900; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #a86400 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #ff9800; }
}

.off:after {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  bottom: -13px;
  margin: 0 0 -4px -4px;
  background-color: #f0f0f0;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #afafaf 0 -1px 3px, rgba(175, 175, 175, 0.5) 0 2px 12px;
  -webkit-animation: blinkGray 0.9s infinite;
  -moz-animation: blinkGray 0.9s infinite;
  -ms-animation: blinkGray 0.9s infinite;
  -o-animation: blinkGray 0.9s infinite;
  animation: blinkGray 0.9s infinite;
}

@-webkit-keyframes blinkGray {
    from { background-color: #f0f0f0; }
    50% { background-color: #afafaf; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(175, 175, 175, 0.5) 0 2px 0;}
    to { background-color: #f0f0f0; }
}
@-moz-keyframes blinkGray {
    from { background-color: #f0f0f0; }
    50% { background-color: #afafaf; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(175, 175, 175, 0.5) 0 2px 0;}
    to { background-color: #f0f0f0; }
}
@-ms-keyframes blinkGray {
    from { background-color: #f0f0f0; }
    50% { background-color: #afafaf; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(175, 175, 175, 0.5) 0 2px 0;}
    to { background-color: #f0f0f0; }
}
@-o-keyframes blinkGray {
    from { background-color: #f0f0f0; }
    50% { background-color: #afafaf; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(175, 175, 175, 0.5) 0 2px 0;}
    to { background-color: #f0f0f0; }
}
@keyframes blinkGray {
    from { background-color: #f0f0f0; }
    50% { background-color: #afafaf; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(175, 175, 175, 0.5) 0 2px 0;}
    to { background-color: #f0f0f0; }
}

.DG:after {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    bottom: -13px;
    margin: 0 0 -4px -4px;
    background-color: #00FFFF;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #00ffbb 0 -1px 3px, rgba(0, 255, 187, 0.5) 0 2px 12px;
    -webkit-animation: blinkCyan 0.9s infinite;
    -moz-animation: blinkCyan 0.9s infinite;
    -ms-animation: blinkCyan 0.9s infinite;
    -o-animation: blinkCyan 0.9s infinite;
    animation: blinkCyan 0.9s infinite;
}

@-webkit-keyframes blinkCyan {
    from { background-color: #00FFFF; }
    50% { background-color: #00ffbb; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(0, 255, 187, 0.5) 0 2px 0;}
    to { background-color: #00FFFF; }
}
@-moz-keyframes blinkCyan {
    from { background-color: #00FFFF; }
    50% { background-color: #00ffbb; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(0, 255, 187, 0.5) 0 2px 0;}
    to { background-color: #00FFFF; }
}
@-ms-keyframes blinkCyan {
    from { background-color: #00FFFF; }
    50% { background-color: #00ffbb; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(0, 255, 187, 0.5) 0 2px 0;}
    to { background-color: #00FFFF; }
}
@-o-keyframes blinkCyan {
    from { background-color: #00FFFF; }
    50% { background-color: #00ffbb; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(0, 255, 187, 0.5) 0 2px 0;}
    to { background-color: #00FFFF; }
}
@keyframes blinkCyan {
    from { background-color: #00FFFF; }
    50% { background-color: #00ffbb; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #878484 0 -1px 9px, rgba(0, 255, 187, 0.5) 0 2px 0;}
    to { background-color: #00FFFF; }
}

.lcdtable > tbody > tr > td 
{  
    padding:3px;
    border:0px solid #fff;
 }
 .lcdtable > tbody > tr > td:nth-child(1) > label
 {
    font-size:14px; 
    color:#000;
    font-weight:lighter;  
    width:85px;
    padding-left:8px;
    letter-spacing:1px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
   
 }
 .lcdtable > tbody > tr > td:nth-child(2) > label
 {
    font-size:22px; 
    text-align:right;  
    display:block;
    color:#000;
    font-weight:lighter; 
    letter-spacing:1px;
    font-family:Roboto, "Helvetica Neue", sans-serif;
    text-shadow: 1px 1px 2px #fff, 0 0 1em #ddd, 0 0 0.2em #ddd;
 }

.content-monitor > label
{
    display:block;
    font-size:20px;
    padding:2px;
    text-align:center;  
    font-weight:lighter;  
    letter-spacing:1px;
    color:#000;
}

 /*---- fixed table header starts here ----*/     
.fixed-header-column {
  position: relative;
  width: 86vw;
  overflow: hidden;
}

.fixed-header-column > thead {
  position: relative;
  display: block; 
  width: 86vw;
  overflow: visible;
}

.fixed-header-column > thead  th {
  min-width: 160px;
}

.fixed-header-column > thead > tr > th, .fixed-header-column > tbody > tr > th, .fixed-header-column > tfoot > tr > th, .fixed-header-column > thead > tr > td, .fixed-header-column > tbody > tr > td, .fixed-header-column > tfoot > tr > td
{
    padding:8px;
}

.fixed-header-column > thead th:nth-child(1) {
  position: relative;
  background-color:#fff;
}
.fixed-header-column > thead th:nth-child(2) {
  position: relative;
  background-color:#fff;
}

.fixed-header-column > tbody {
  position: relative;
  display: block;
  width: 92vw;
  height: 60vh;
  overflow: scroll;
}

.fixed-header-column > tbody td {
  min-width: 160px;
}

.fixed-header-column > tbody tr td:nth-child(1) {  
  position: relative;
  display: block; 
  background-color:#fff;
}
.fixed-header-column > tbody tr td:nth-child(2) {  
  position: relative;
  background-color:#fff;
}

/*----------------------------------------*/

.fixed-header-column-one {
  position: relative;
  width: 86vw;
  overflow: hidden;
}

.fixed-header-column-one > thead {
  position: relative;
  display: block; 
  width: 86vw;
  overflow: visible;
}

.fixed-header-column-one > thead  th {
  min-width: 160px;
}

.fixed-header-column-one > thead > tr > th, .fixed-header-column-one > tbody > tr > th, .fixed-header-column-one > tfoot > tr > th, .fixed-header-column-one > thead > tr > td, .fixed-header-column-one > tbody > tr > td, .fixed-header-column-one > tfoot > tr > td
{
    padding:8px;
}

.fixed-header-column-one > thead th:nth-child(1) {
  position: relative;
  background-color:#fff;
}

.fixed-header-column-one > tbody {
  position: relative;
  display: block;
  width: 86vw;
  height: 60vh;
  overflow: scroll;
}

.fixed-header-column-one > tbody td {
  min-width: 160px;
}

.fixed-header-column-one > tbody tr td:nth-child(1) {  
  position: relative;
  display: block; 
  background-color:#fff;
}

/*---- fixed table header ends here ----*/     
.checkbox-custom {
    position: relative;
    width: 12px;
    height: 12px;
    margin: 0;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    top:5px; margin:0;
}

.checkbox-custom:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    width: 12px;
    height: 12px;
    border: 1px solid #dedede;
    border-radius: 2px;
    margin:0;
}

.checkbox-custom[type=checkbox]:checked:before {
    content: '';
    position: absolute;
    top: 0px;
    opacity: 1;
    left: 0px;
    border: 1px solid #f6ac4f;
    border-radius: 2px;
    margin:0;
}


/*---- calendar view -----*/
.cal-view-days
{
    width:12.5%;
    border:1px solid #aaa;
    border-bottom:0px;
    border-right:0;
    height: 30px;
    font-family:Roboto;
    font-weight:400;
    color:#333;      
    text-align:center;
    float:left;
    vertical-align:middle;
}
.border-right
{
   border-right:1px solid #aaa;     
}

.cal-view-date
{
    width:12.5%;
    border:1px solid #ccc;
    border-bottom:0px;
    border-right:0;
    height: 17vh;
    min-height:108px;
    font-family:Roboto;
    font-weight:400;  
    text-align:center;
    float:left;
}
.cal-view-date > label:nth-child(1)
{
    font-size:14px;
    font-family:Roboto;
    font-weight:300;
    color:#000;
    float:right;
    margin-right:6px;
}
.week-first-day
{
    background-color: #f9f9f9;
}
/*----/. calendar view ----*/