sb-info-bubble {
    position: relative; /* So we can use absolute positioning below */

    /* Reset font properties because this is usually included in header (h1, h2,...) */
    font-weight: 400;
    line-height: 22px;
    cursor: help;
}

sb-info-bubble img.info {
    width: 20px;
    height: 20px;
    vertical-align: top;
}

sb-info-bubble .bubble-content {
   visibility: hidden;
   width: max-content;
   border: 1px solid #ccc!important;
   padding: 15px;
   border-radius: 16px;
   background-color: #E0E0E0;

   word-wrap: break-word;
   white-space:normal;

   font-family: 'OpenSans';
   font-size: 16px;
   color: #666666;

   /* Position the tooltip text */
   position: absolute;
   z-index: 1;
   top: -15px;
   right: 150%;

   /* Fade in tooltip */
   opacity: 0;
   transition: opacity 1s;
}

sb-info-bubble .bubble-content::after {
    content: " ";
    position: absolute;
    top: 18px;
    left: 100%;
    margin-top: -5px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #ccc;
}

/* Show the tooltip text when you mouse over the tooltip container */
sb-info-bubble:hover .bubble-content {
    visibility: visible;
    opacity: 1;
}

sb-info-bubble .info-line:not(:last-child) {
    margin-bottom:10px;
}