/* .diplo-deep-link {
    background-color: yellow;
    display: inline;
    animation: zoomInOut 0.5s ease;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2.2);
    }

    100% {
        transform: scale(1);
    }
} */




.diplo-deep-link {
    -webkit-animation: 1s highlight 1s 1 normal forwards;
    animation: 1s highlight 1s 1 normal forwards;
    background-color: none;
    background: linear-gradient(90deg, #e4f7ff 50%, rgba(255, 255, 255, 0) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
}

@-webkit-keyframes highlight {
    to {
        background-position: 0 0;
    }
}

@keyframes highlight {
    to {
        background-position: 0 0;
    }
}







  /* .diplo-deep-link i{
    display: none;
    transition: opacity 0.5s;
    background: #e4f7ff 0.7;   
  }
  .diplo-deep-link:hover i {
    display: block;
  } */
  

/* (A) BUILD TOOLTIP USING BEFORE PSEUDO-CLASS */
[data-tooltip]::before {
    content: attr(data-tooltip);
  }
  
  /* (B) POSITION TOOLTIP */
  [data-tooltip] {
    position: relative;
    display: inline-block;
  }
  [data-tooltip]::before {
    position: absolute;
    z-index: 999;
  }
  [data-tooltip].top::before {
    bottom: 100%;
    margin-bottom: 10px;
  }
  [data-tooltip].bottom::before {
    top: 100%;
    margin-top: 10px;
  }
  [data-tooltip].left::before {
    right: 100%;
    margin-right: 10px;
  }
  [data-tooltip].right::before {
    left: 100%;
    margin-left: 10px;
  }
  
  /* (C) SHOW TOOLTIP ONLY ON HOVER */
  [data-tooltip]::before {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
  }
  [data-tooltip]:hover::before {
    visibility: visible;
    opacity: 1;
  }
  
  /* (D) STYLE THE TOOLTIP */
  /* [data-tooltip] { background: #fea; } */
  [data-tooltip]::before {
    background: #414141;
    color: #fff;
    padding: 5px;
    min-width: 100px;
    text-align: center;
  }