body {
    background-repeat: no-repeat;
    background-image: linear-gradient(white 10%, rgb(240,240,240));

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* font-family: 'Calibri'; */
    
}

#main-container {
  height: max-height;
  width: 100%;
}

.row-element {
  background-image: linear-gradient(to right, rgb(233, 233, 233), rgb(187, 187, 187));
  border-radius: 5px;
  box-shadow: 2px 2px 1px rgb(150,150,150);
  padding: 1px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 4px;
}

#chartContainer {
  width: 1000px;
  height: 240px;
}

/* heading colours */

.heading-red {
  background-image: linear-gradient(to right, rgb(252, 0, 0) 30%, rgb(160, 0, 0)); color: rgb(255, 255, 255); font-size: 20px;
}

.heading-yellow {
  background-image: linear-gradient(to right, rgb(252, 214, 0) 30%, rgb(160, 131, 0)); color: rgb(0, 0, 0); font-size: 20px;
}

.heading-green {
  background-image: linear-gradient(to right, rgb(0, 167, 103) 30%, rgb(0, 109, 54)); color: rgb(255, 255, 255); font-size: 20px;
}

.heading-blue {
  background-image: linear-gradient(to right, rgb(64, 173, 201) 30%, rgb(49, 104, 177)); color: rgb(255, 255, 255); font-size: 20px;
}

#graph-bg {
  margin: 10px;
  border-radius: 5px;
  background-image: whitesmoke;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

.slidecontainer {
  width: 82%; /* Width of the outside container */
}
  
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 60%; /* Full-width */
  height: 5px; /* Specified height */
  background: #000000; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}
  
/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

#lineGraph {
  width: 100%;
  height: 100%;
}

.textNormal {
  padding: 3px;
  color: black;
}

.textAlert {
  padding: 3px;
  border-radius: 5px;
  background-color: rgb(255, 230, 0);
  color: black;
}