.dashboard-card{
    padding: 2rem;
    border-radius: 2rem;
    background: #1D2937;
}

.card-title{
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.welcome-user-banner{
    margin-bottom: 1.5rem;
}

.circle-outer{
  height: 75px;
  width: 75px;
  border-radius: 50%;
}

.icon_progress{
  width: 65px;
  height: 65px;
  padding: 10px;
  border-radius: 50%;
  background-color: red;
}


.single-chart {
  width: 250px;
} 

.circular-chart {
  display: block;
  margin: auto;
  width: 10rem;
  height: auto;
  margin-top: 1.5rem;
}

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

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

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

.circular-chart .circle {
  stroke: red;
}

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

.compare-table{
  box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.23);
  margin: auto;
  border-radius: 20px;
  overflow: hidden;
}

.compare-table td{
  padding: 20px;
}


.tabletile{
  text-align: center;
  background-color: steelblue;
  color: white;
  width: 15rem;
}

.forchics{
  text-align: center;
}

.unread-number{
  display: block;
  font-size: 4rem;
  font-weight: 600;
  color: red;
  width: 100%;
  text-align: center;
}