@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Raleway:wght@400;600;800&family=Roboto:wght@400;500;700&display=swap');


  /* font-family: 'Poppins', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Roboto', sans-serif; */
.login-page{
  /* background-image: url(../images/Dashboard.png); */
 width: 100%;
  background-size: 100%;
  
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
    
  
  
}
.login-form h2{
  font-family: 'Raleway', sans-serif;
  color: #000;

font-size: 32px;
font-style: normal;
font-weight: 800;
line-height: 20px; /* 62.5% */
letter-spacing: 0.25px;
text-align: center;

}

.login-form input{
  display: grid;
  border-radius: 12px;
border: 1px solid #EAEAEA;
background: #FFF;
box-shadow: 0px 0px 6.5px 0px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
width: 367px;
height: 45px;
flex-shrink: 0;
font-family: 'Poppins', sans-serif;

}
.login-form input::placeholder {
  font-family: 'Raleway', sans-serif;
  color: #8B8B8B;
}
.login-form a{
  display: flex;
  justify-content: end;
  text-decoration: none;

 
  font-family: 'Raleway', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
letter-spacing: 0.25px;

}
.login-form button{
  padding: 8px 40px;
  border-radius: 12px;
background: #0565FF;
box-shadow: 0px 0px 10.2px 0px rgba(0, 0, 0, 0.05);
color: #fff;
border: none;


font-family: 'Roboto', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 125% */
letter-spacing: 0.25px;

}
.login-form img{
  
  margin-left: 60px;
  
}















 .flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 33%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 4s ease-out forwards;
}

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

.circular-chart.orange .circle {
  stroke: #ff9f00;
}

.circular-chart.green .circle {
  stroke: #4CC790;
}

.circular-chart.blue .circle {
  stroke: #3c9ee5;
}

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