main>.container {
  padding: 60px 15px 0;
}


.tooltipp {
  position: relative;
  /* making the .tooltipp span a container for the tooltipp text */
  border-bottom: 1px dashed #000;
  /* little indicater to indicate it's hoverable */
}

.tooltipp:before {
  content: attr(data-text);
  /* here's the magic */
  position: absolute;

  /* vertically center */
  top: 50%;
  transform: translateY(-50%);

  /* move to right */
  left: 100%;
  margin-left: 15px;
  /* and add a small left margin */

  /* basic styles */
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-align: center;

  display: none;
  /* hide by default */

  opacity: 0;
  transition: .3s opacity;
}

.tooltipp:hover:before {
  display: block;
  opacity: 1;
}


.tooltipp:after {
  opacity: 0;
  transition: .3s;
}

.tooltipp:hover:after {
  opacity: 1;
}

/* XDEBUG */
.xdebug-error th
{
    font-family:monospace;
    font-weight:normal;
    font-size:15px;
    padding: 6px 6px 6px 6px;
    border:1px solid black;
    background: #FFCC99;    
    color:#000000;          
}
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
    line-height:1.6em;
    padding: 10px 10px 10px 10px;
    border:1px solid #000000;
    background: #000000;          
    color:#FFFFFF;
}
.xdebug-error td
{
    font-size:14px;
    padding: 6px 6px 6px 6px;
    border:1px solid green;
    background: #D1FFE8;          
    color:#000000;
}