/*
 * Twin
 * ----------------------------------------------------------------------
 */

.json-string-disconnected{
      color: red;
}

.twinButtons{
  position: absolute;
  margin: 0px 12px;
  top: 0px;
  right: 0px;
}

.twinButtons button{
  margin: 3px 3px;
  padding: 6px 6px;
}



.popup{
  visibility: hidden;
  background-color: #555;
  color: #fff;
  border-radius: 6px;
  padding: 12px 12px;
  z-index: 9999;
  margin: 5% 5%;
  height: 100%;
  position: relative;
}

/* Popup arrow */
._popup::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 82%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

.popup.show {
  visibility: visible;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

.popup H3{
  padding-bottom: 10px;
}

#desiredPopup textarea{
  display: block;
  width: 100%;
  height: 70%;
  margin-bottom: 6px;
  font-size: 1.4em;
  overflow: scroll;
}

.popup a{
  _display: block;
  padding: 6px 12px;
  color: white;
}

#desiredPopup button{
  float: right;
  padding: 6px 12px;
  margin: 0px 12px;
  right: 0px;
}

.command{
  position: relative;
  height:64px;
  padding-left:32px;
}

.command button{
 float: right;
  padding: 6px 12px;
  margin: 0px 12px;
  right: 0px; 
}

.cert{
  position: absolute;
  bottom:10px;
  right:10px;
}

/*
 * Logging
 * ----------------------------------------------------------------------
 */

.serialOutput{
  background-color: black;

  min-width:  100%;
  height:  100%;

  color: white;
  font-family: monospace;
  overflow: scroll;
  white-space: nowrap

}

  .log_debug{
    color:  gray;
  }
  
  .log_info{
    color:  white;
  }

  .log_warn{
    color:  yellow;
  }

  .log_error{
    color:  red;
  }

  .log_system{
    color:  DimGray;
    font-style: italic;
  }


/*
 * Irrigation Lines
 * ----------------------------------------------------------------------
 */


  .irrigation-lines {
    position: absolute;
    left: 0px;
    width: 100%;
    min-width: 370px;
  }

 .irrigation-line {
    display: block;
    position: relative;
    margin: 20px 10px;
    height: 200px;  
    width: auto;
    
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.7223em;
    font-weight: 600;
    line-height: 1.077em;
    color: #333;
    background-color: #F7F7F7;
    z-index: 1000;
    -webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.3);
    border: 1px  solid rgba(50, 50, 50, 0.3);
    border-radius: 1.1rem;  
  }

  @media (min-width: 640px) {

    .irrigation-line {
      display: block;
      width: 518px;
      margin: 20px auto;
    } 
  }

  @media (min-width: 970px) {

    .irrigation-line {
      display: inline-block;
      width: 400px;
      margin: 40px 40px 40px 40px;
    }
  }

.irrigation-line-label {
  position: absolute;
  right: 20px;
  top: 10px;
  text-align: right;
  font-size: 1.5em;
  font-style: italic;
}

.irrigation-line-detail {
  position: absolute;
  left: 202px;
  bottom: 75px;
  
}

.irrigation-line-detail-header {
  line-height: 1.5em;
}

.irrigation-line-detail-value {
  font-weight: 400;
  line-height: 1.5em;
}


.irrigation-line-progress {
  position: absolute;
  top: 0px;
  left:0px;
  height: 200px;
  width: 200px;

}


.irrigation-line-progress svg{
  margin: 20px 20px;
  padding-left: 10px;
  
}

.circle {
  stroke: #cec5c5;
  fill: none;
  stroke-width: 4.2;
  stroke-linecap: round;
}

.progress {
  stroke: #059D35;
  animation: progress 1s ease-out forwards; 
}

.remaining {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  font-style: italic;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}


.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

/*
 * Swtich
 * ----------------------------------------------------------------------
 */

.switch {
    position: absolute; 
    display: inline-block; 
    right: 10px;
    bottom: 10px;
    width: 51px; 
    height: 90px
} 
.switch input {
    display: none
}

.slider {
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background-color: #ccc; 
    border-radius: 37px
}
.slider:before {
    position: absolute; 
    content: ""; 
    height: 39px; 
    width: 39px; 
    left: 6px; 
    bottom: 6px; 
    background-color: #fff; 
    -webkit-transition: .4s; 
    transition: .4s;
    border-radius: 37px;
}
input:checked+.slider {
    background-color: #b30000;
}
input:checked+.slider:before {
    -webkit-transform: translateY(-37px);
    -ms-transform: translateY(-37px); 
    transform: translateY(-37px);
}