.heart-rate {
    max-width: 180px;
    height: 43px;
    position: relative;
    margin:0px auto;
    overflow:hidden;
    }
.heart-rate-container
{
  max-width: 180px;
  height: 43px;
  position: relative;
  margin:0px auto;
  overflow:hidden;

}
    
    .fade-in {
      position: absolute;
      width: 100%;
      height:100%;
      background-color: white;
      top: 0;
      right: 0;
      animation: heartRateIn 4.5s linear infinite;
      
     /* Gia na katalavw ti ginetai des auto
        border:1px solid red;
        */
    
    }
    
    .fade-out {
      position: absolute;
      width: 120%;
      height: 100%;
      top: 0;
      left: -120%;
      animation: heartRateOut 4.5s linear infinite;
      background: rgba(255, 255, 255, 1);
      background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
      background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
      background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
      background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
      
    }
    
    @keyframes heartRateIn {
      0% {
        width: 100%;
      }
      50% {
        width: 0%;
      }
      100% {
        width: 0;
      }
    }
    
    @keyframes heartRateOut {
      0% {
        left: -120%;
      }
      30% {
        left: -120%;
      }
      100% {
        left: 0;
      }
    }