body {
  font-family: Arial, sans-serif;
  background: #222222;
  
}

.title {
  color: white;
  font-size: 37.5px;
  margin-bottom: 2.5px;
  margin-left: 5px;
}
#divider {
  width: 80%;  
  height: 0.5px;  
  float: left;
  
  background-color: white;
  margin: 7.5px auto;  
}

.text-block {
  width: 90%;
  float: left;
  font-size: 0.75rem;
  margin: 0 auto;
  text-align: justify;
}

.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.8fr 2fr 0.5fr 0.5fr 2fr;
  gap: 0px 0px;
 
  grid-template-areas:
  "step-indicator step-indicator step-indicator step-indicator"
  "bring-center bring-center map map"
  "slider-container slider-container map map"
  "budget budget map map"
  "graph graph map map"; 
}

.step-indicator { 
  grid-area: step-indicator; 
  display: flex;
  justify-content: center;  
  align-items: center;
  position: relative;  
  padding: 5px 0;  

}
.bring-center { 
  grid-area: bring-center;
  color: white;
  width: 90%;
  margin-left: 12.5px;
  
}

.budget { 
grid-area: budget; 
display: flex;
width: 100%;
padding-top: 25px;
padding-left: 5px;
color: white;
font-size: 38px;
}

.slider-container { 
  grid-area: slider-container; 
   margin-left: 12.5px
}

.map { 
  grid-area: map; 
  justify-content: center;  
  align-items: center;
}

.graph{
  grid-area: graph;
  padding: 12.5px;
  height: 150%;
  justify-content: center;  
  align-items: center;
}

#barChart {
  position: relative;
  height: 100%;
  width: 50%;
  left: 25%;
}



.step {
  background-color: #ddd;  
  border-radius: 3.75px;  
  padding: 5px 10px; 
  margin: 0 25px;  
  text-align: center;
  position: relative;  
}

.step:not(:last-child):not(:nth-last-child(2))::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -50px;  
  width: 100px;  
  height: 0.25px;
  border-top: 3.75px dotted #ccc;  
  z-index: -1;
  transform: translateY(-50%);
}

.step.active {
  background-color: #4CAF50; 
  color: white;  
}

.step.prev {
  background-color: #307033; 
  color: #B4AEAE;  
}

.step-title {
  font-size: 1em;  
}

.button-link {
  display: inline-block;  
  font-size: 0.75rem;
  padding: 2.5px 5px; 
  margin: 25px 0;  
  border-radius: 12.5px;
  background-color: #15A0EF; 
  color: white;  
  text-decoration: none;  
  border-radius: 1.25px;  
  border: none;  
  text-align: center;  
  transition: background-color 0.3s, color 0.3s;  
}

.button-link:hover {
  background-color: #0D6FA6;  
  color: #fff; 
}


#slider {
  -webkit-appearance: none;   
  appearance: none;
  position: relative;
  top: 25px;
  width: 75%;  
  height: 6.25px;  
  background: #d3d3d3; 
  outline: none;  
  opacity: 0.7;  
  -webkit-transition: .2s;  
  transition: opacity .2s;
}

 
#slider:hover{
  opacity: 1;  /*shows when mouse it over*/
}

 
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;  
  appearance: none;
  width: 25px;  
  height: 25px;  
  border-radius: 50%;
  background: #04AA6D;  
  cursor: pointer; 
}

#slider::-moz-range-thumb {
  width: 12.5px;  
  height: 12.5px;  
  background: #04AA6D;  
  cursor: pointer; 
}