/* Removes the clear button from date inputs */
#machine-health-graphics-content-container input[type="date"]::-webkit-clear-button {
  display: none;
}

/* Removes the spin button */
#machine-health-graphics-content-container input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

/* Always display the drop down caret */
#machine-health-graphics-content-container input[type="date"]::-webkit-calendar-picker-indicator {
  color: #2c3e50;
}

/* A few custom styles for date inputs */
#machine-health-graphics-content-container input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  color: #95a5a6;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 18px;
  border: 1px solid #ecf0f1;
  background: #ecf0f1;
  padding: 5px;
  display: inline-block !important;
  visibility: visible !important;
}

#machine-health-graphics-content-container input[type="date"],
#machine-health-graphics-content-container focus {
  color: #95a5a6;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

/* Removes the clear button from date inputs */
#machine-health-graphics-content-container input[type="time"]::-webkit-clear-button {
  display: none;
}

/* Removes the spin button */
#machine-health-graphics-content-container input[type="time"]::-webkit-inner-spin-button {
  display: none;
}

/* Always display the drop down caret 
            input[type="time"]::-webkit-calendar-picker-indicator {
                color: #2c3e50;
            }*/

/* A few custom styles for date inputs */
#machine-health-graphics-content-container input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  color: #95a5a6;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 18px;
  border: 1px solid #ecf0f1;
  background: #ecf0f1;
  padding: 5px;
  display: inline-block !important;
  visibility: visible !important;
}

#machine-health-graphics-content-container input[type="time"],
#machine-health-graphics-content-container focus {
  color: #95a5a6;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#machine-health-graphics-content-container .button {
  background-color: #ff8000;
  border: none;
  color: white;
  padding: 1% 3%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 100%;
  border-radius: 5px;
  margin: 2%;
  padding: 3%;
}
#machine-health-graphics-content-container .chart {
  width: 100%;
  min-height: 450px;
}
#machine-health-graphics-content-container #loading {
  visibility: hidden;
  position: absolute;
  z-index: 1000;
  height: 15vh;
  width: 15vh;
}
#machine-health-graphics-content-container input[type="number"] {
  width: 80%;
  padding: 2% 2%;
  margin: 1%;
  display: inline-block;
  border: 1px solid #EC9B50;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1em;
  margin-top: 2%;
  height: 60%;
}

#machine-health-graphics-content-container .max { grid-area: max; border-bottom: 1px solid rgba(0, 0, 0, 0.8); }
#machine-health-graphics-content-container .min { grid-area: min; border-bottom: 1px solid rgba(0, 0, 0, 0.8); }
#machine-health-graphics-content-container .avg { grid-area: avg; }
#machine-health-graphics-content-container .health-values-container, #machine-health-graphics-content-container .health-values-container-minute{
  height: calc(400px + 0.5rem * 2);
  display: grid;
  grid-template-areas:
    'max'
    'min'
    'avg';
}

#machine-health-graphics-content-container .health-values-container > div, #machine-health-graphics-content-container .health-values-container-minute > div{
  text-align: center;
  padding: 20px 0;
  font-size: 2rem;
  display: grid;
  align-items: center;
}

#machine-health-graphics-content-container .health-values-container > div .head, #machine-health-graphics-content-container .health-values-container-minute > div .head{
  color: #ff8000;
}