/**
 * Name: naoTooltips.css
 * Author: Noemi Losada <info@noemilosada.com>
 * Date: 09/07/2016
 */

.naoTooltip-wrap {
  /*cursor: help;*/
  display: inline-block;
  position: relative;
}

/** Tooltip base
================================================== */
.naoTooltip:before {
  border-style: solid;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.naoTooltip {
    background-color: #CCD7FD;
    border-radius: 4px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
    color: #111;
    font-size: 13px;
    opacity: 1;
    /*padding: 5px;*/
    position: relative;
    text-align: center;
    /*visibility: hidden;*/
    visibility: visible;
    /*width: 500px;*/ /* Set the width to the largest option */
    z-index: 999;
    display: inline-block;
    left: 10px;
}

/** Tooltip position and arrows
================================================== */
/* Left */
.naoTooltip.nt-left-top:before,
.naoTooltip.nt-left:before,
.naoTooltip.nt-left-bottom:before {
  border-color: transparent transparent transparent #00cd99;
  border-width: 8px 0 8px 8px;
  right: -8px;
  left: auto;
  top: calc(50% - 8px);
}

/* Right */
    .naoTooltip.nt-right:before,
    .naoTooltip.nt-right-bottom:before,
    .naoTooltip.nt-right-top:before {
        border-color: transparent #CCD7FD transparent transparent;
        border-width: 8px 8px 8px 0;
        left: -8px;
        right: auto;
        top: calc(50% - 8px);
    }

/* Top */
.naoTooltip.nt-top:before,
.naoTooltip.nt-top-left:before,
.naoTooltip.nt-top-right:before {
  border-color: #00cd99 transparent transparent transparent;
  border-width: 8px 8px 0 8px;
  bottom: -8px;
  right: calc(50% - 8px);
}

/* Bottom */
.naoTooltip.nt-bottom:before,
.naoTooltip.nt-bottom-left:before,
.naoTooltip.nt-bottom-right:before {
  border-color: transparent transparent #00cd99 transparent;
  border-width: 0 8px 8px 8px;
  right: calc(50% - 8px);
  top: -8px;
}

/* Combinations */
.naoTooltip.nt-left-top:before,
.naoTooltip.nt-right-top:before {
  top: 8px;
}

.naoTooltip.nt-left-bottom:before,
.naoTooltip.nt-right-bottom:before {
  top: calc(100% - 24px);
}

.naoTooltip.nt-top-left:before,
.naoTooltip.nt-bottom-left:before {
  right: calc(100% - 24px);
}

.naoTooltip.nt-bottom-right:before,
.naoTooltip.nt-top-right:before {
  right: 8px;
}

/** Tooltip sizes (small, medium, large)
================================================== */
/* Small */
.naoTooltip.nt-small {
  max-width: 125px;
}

/* Medium */
.naoTooltip.nt-medium {
  max-width: 225px;
}

/* Large */
.naoTooltip.nt-large {
  max-width: 500px;
}