@charset "utf-8";

.md-tooltip {

  display: none;

  position: absolute;

  z-index: 9999;

  line-height: 1.5;

  padding: 7px 10px;

  -webkit-border-radius: 4px;

          border-radius: 4px;

  background: #FFF;

  background: rgba(255, 255, 255, .8);

  color: #111;

  font-size: 12px;

  

  border: 1px solid #3366FF;

}

.md-tooltip .over {

  color: #f00;

}

.md-tooltip span {

  display:inline-block;

}

.md-tooltip:after,.md-tooltip:before {

    border: solid transparent;

  content: " ";

  position:absolute;

/*  left: 10px;*/

/*  top: -18px;*/

  width: 0;

  height: 0;

  margin: 0 0 0 -5px;

/*  border-top: 10px solid transparent #3366FF;

  border-right: 5px solid transparent #3366FF;

  border-left: 5px solid transparent #3366FF;

  border-bottom: 10px solid #3366FF;

  border-bottom-color: rgba(255, 255, 255, .8);

*/

}

.md-tooltip:after {

    border-width: 8px;

    border-bottom-color: #FFF;

    top: -16px;

    left: 12px

}

.md-tooltip:before {

    border-width: 10px;

    border-bottom-color: #3366FF;

    top: -20px;

    left: 10px

}





.demo4:after, .demo4:before {

    border: solid transparent;

    content: ' ';

    height: 0;

    left: 100%;

    position: absolute;

    width: 0;

}

.demo4:after {

    border-width: 9px;

    border-left-color: #ccc;

    top: 15px;

}

.demo4:before {

    border-width: 14px;

    border-left-color: #333;

    top: 10px;

}