*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* animation css is started now */

.animt{
  animation:fadeInDown;
  animation-duration: 2s;
}

.animt-1{
  animation:fadeInUp;
  animation-duration: 2s;
}

.animt-2{
  animation:fadeOut;
animation-duration: 2s;
}

.animt-3{
  animation:fadeInUp;
  animation-duration: 2s;
}

.animt-4:hover{
  animation:headShake;
  animation-duration: 5s;
}

.animt-5:hover{
  animation:pulse;
  animation-duration: 2s;
  cursor: pointer;
}

.animt-6:hover{
  animation:pulse;
  animation-duration: 2s;
  cursor: pointer;
  /* transform: scale(1.1); */
}

/* animation is completed */


.container-fluid{
  background-color: #352f5b;
}

.container{
    /* border: 2px solid yellowgreen; */
}

.col-sm{
    /* border: 2px solid red; */
}

.dashboard-img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    /* background-color: pink; */
}

.dashboard-img img{
    width: 100%;
    height: 100%;


}

.graph-img{
  width: 100%;
  height: 450px;
  /* background-color: red; */
}

.graph-img img{
  width: 100%;
  height: 100%;
}
















/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    body {
      /* background-color: lightblue; */
    }

    .rsp{
        display: none;
    }

    .rsp-1{
      display: flex; 
      justify-content: center;
      align-items: center;
    }

    .rsp-2{
      display: none;
    }
  }
  
  /* Small devices (tablets, 576px and up) */
  @media (min-width: 576px) and (max-width: 767.98px) {
    body {
      /* background-color: lightgreen; */
    }
    .rsp{
        display: none;
    }
    .rsp-1{
      display: flex; 
      justify-content: center;
      align-items: center;
    }

  }
  
  /* Medium devices (desktops, 768px and up) */
  @media (min-width: 768px) and (max-width: 991.98px) {
    body {
      /* background-color: lightcoral; */
    }
  }
  
  /* Large devices (large desktops, 992px and up) */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    body {
      /* background-color: lightgoldenrodyellow; */
    }
  }
  
  /* Extra large devices (1200px and up) */
  @media (min-width: 1200px) {
    body {
      /* background-color: lightgray; */
    }
  }