.wrapper {
    width: 0px;
    animation: fullView 0.5s forwards linear;
  }
  
  .br {
    border-radius: 8px;  
  }
  
  .w80 {
     width: 80%;
  }
  
  .card-box {
    border: 2px solid #fff;
    box-shadow:0px 0px 10px 0 #a9a9a9;
    padding: 30px 40px;
    width: 80%;
    margin: 50px auto;
  }
  
  .Pic {
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }
  
  .comment {
    height: 10px;
    background: #777;
    margin-top: 20px;
  }
  .inputshimmer{
    height: 2.5rem;
    width: 100%;
    /* background:#777; */
    border: 2px solid #ced4da;

  }
  
  .animate {
   animation : shimmer 2s infinite;
   background: linear-gradient(to right,#eff1f3 4%,#e2e2e2 25%,#eff1f3 36%);
   background-size: 1000px 100%;
}
.animate2{
  animation : shimmer 2s infinite;
  background:  linear-gradient(to right,#eff1f3 4%,#e2e2e2 11%,#eff1f3 20%);
  background-size: 1000px 100%;
}
  
  @keyframes fullView {
    100% {
      width: 100%;
    }
  }
  
  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }

  .loader {
    width: 48px;
    height: 48px;
    border: 3px solid rgb(204, 199, 199);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid;
    border-color: #15a362  transparent;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }