/* it will work better with this box-sizing, you may adapt it to your needs */
/*html { box-sizing: border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}*/
code{ font-size:14px; color:#F90;}
.cur_point{ cursor:pointer; font-size:16px;}
.simple-tooltip-container {
  position: relative;
}
 
.simple-tooltip-tooltip {
  position: absolute;
  z-index: 666;
  top: 50%;
  left: 50%;
  width: 15em;  
  background: #666;
  border: 1px solid #882525;
  border-radius: .5em;
  padding: 1em;
  text-align: left;
}
.simple-tooltip-tooltip__title {
  margin: 0;
  line-height: 1;
}
.simple-tooltip-tooltip p {
  font-size: 1em;
}
.simple-tooltip-tooltip__close {
  float: right;
  /** fix typo inputs **/
  font-family: inherit;
  font-size: 1em;
  background: #999;
  color: #fff;
  border-radius: 1em;
}

/* it can be easily adapted in media-queries for tablets/mobile */

/* for this example: tablets */
@media (max-width: 55.625em) {

  .simple-tooltip-container {
    position: static;
	
  }
  .simple-tooltip-tooltip {
    position: static;
	  width: auto;
	  margin-top: 1em;
  }
  
}

/* another example ("it's customisable" button) */
/* tooltip modal */
.left-tooltip-tooltip {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  z-index: 667;
  position: fixed;
  width: 25em;
  max-width: 100%;
  background: #f00;
  padding: .5em;
  font-size: 1em;
  border: 0;
  animation: fromleft .3s linear;
  background-image:
      -webkit-linear-gradient(
        top,
        #882525 3em,
        #f7f7f7 3em
      );
  background-image:
      linear-gradient(
        to bottom,
        #882525 3em,
        #f7f7f7 3em
      );
}
.left-tooltip-tooltip__close {
  float: right;
  background: transparent;
  color: #fff;
}
.left-tooltip-tooltip__title {
  font-size: 1.2em;
  margin: 0;
  color: #fff;
  font-weight: normal;
}

@-webkit-keyframes fromleft {
  0%   { width: 0; }
  100% { width: 25em; }
}
@keyframes fromleft {
  0%   { width: 0; }
  100% { width: 25em; }
}