.hero-avatar{
  position: absolute;
  top: 15px;
  right: 0;    
  margin: 50px 25px;
}

.avatars {
    display: flex;
    padding-left: 2rem;
}

.avatar {
  position: relative;
  margin: 0 0 0 -1rem;
}

.avatars .avatar img {    
    width: 64px !important;
    height: 64px !important;
    border-radius: 100%;
    border: 2px solid #444;    
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .avatars .avatar .tooltiptext {
    visibility: hidden;
    
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    font-size: 0.6em;    
  
    /* Position the tooltip text - see examples below! */
    position: absolute;    
    top: 50px;
    left: 0;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .avatars .avatar:hover .tooltiptext {
    visibility: visible;    
  }

  .avatars .rounded {
    padding: 2px;
    border-radius: 100%;
    border: 1px solid blue;
    z-index: 2;
    position: relative;    
    top: 0px;
    left: 0;
    margin: 0 0 0 -1rem;
  }

  .car {
    color: white;
    background-color: red;
  }

  .passenger {
    color: red;
    background-color: yellow;
  }

  .telegram-icon {
    opacity: 0;
    z-index: 0;
    content: "";
    position: absolute;
    border: 1px solid rgb(17, 85, 178);
    inset: -2px;
    border-radius: 500px;
  }

  .trayecto {
    padding: 10px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr;
    grid-template-rows: 50px;
    grid-template-areas: "fecha time space icon";
  }

  .trayecto-fecha{
    display: table-cell;
    grid-area: fecha;
  }

  .trayecto-button{
    height: 100%;    
  }

  .trayecto-time{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "at" "to";
    grid-area: time;
  
  }

  .trayecto-at{
    margin-left: 2px;    
    grid-area: at;
  }

  .trayecto-to{
    margin-left: 2px;
    grid-area: to;    
  }

  .trayecto-icon {
    grid-area: icon;
    text-align: right;
  }