/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    margin-left: 0.25em;
}
/* Tooltip text */
.tooltip .tooltiptext {
   font-size: 14px;
   font-weight:normal;
   position: absolute;
   visibility: hidden;
   display: inline-block;
   bottom: 20px;
   left: 50%;
   margin-left: -12.5em;
   color: #333333;
   background-color: #f5f7fa;
   text-align: left; 
   width: 25em; 
   height: auto;
   white-space: normal;
   padding: 0.5em;
   border: 1px solid #d9d9d9;
   z-index: 100;
}
.tooltip .tooltiptext.wide {
   width: 36em;
   margin-left: -13em;
}
.tooltip .tooltiptext.short {
   width: 14em;
   margin-left: -7em;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
   visibility: visible;
}
.tooltip .fa-exclamation-triangle {
    color: #ffcc00;
}