@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);/* Build a Material theme */
/*  Typography */
/* Shape */
/* Color */
.lock-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  background: url(./img/Lock.png) no-repeat center center;
  background-size: contain;
  position: relative;
  /* tooltip relies on this */
  cursor: pointer;
  vertical-align: middle;
}

.lock-icon:hover {
  filter: drop-shadow(0 0 6px rgba(66, 165, 245, 0.8));
}

.lock-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: 110%;
  /* place tooltip to the left */
  transform: translateY(-50%);
  background: rgba(66, 165, 245, 0.95);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 9999;
  /* ensures it shows above MDC elements */
}

.lock-icon:hover::after {
  opacity: 1;
}