.xDevToolTip 
{
  cursor:           pointer;
  position:         relative;
  display:          inline-block;
  font-size:        8pt; 
  color:            #A7C69E;
  border:           2px solid #A7C69E; 
  background-color: #34462E;
  border-radius:    12px;       
}

.xDevToolTip .xDevToolTipText 
{
  visibility:        hidden;    
  width:              240px;   
  background-color: #A7C69E;
  color:            #34462E;
  text-align:        center;
  padding:              4px;
  border-radius:        8px;
  font-size:            8pt;          
  
  position:        absolute;    
  z-index:                2;
  bottom:              22px;
  left:               -16px;   
                         
  opacity:                0;
  transition: opacity  0.1s;
}
          
.xDevToolTip .xDevToolTipText:after 
{
  content:            "";
  position:     absolute;   
  bottom:          -14px;
  left:             15px;     
                          
  border-width:      7px;
  border-style:    solid;
  
  border-color: #A7C69E  transparent transparent transparent;
}
                                                                         
.xDevToolTip:hover .xDevToolTipText 
{
  visibility: visible;
  opacity:          1;
}