.ffx-tooltip__title { cursor: pointer; display: inline-block; padding: 0; margin: 0; }

.ffx-tooltip__content { display: none; }

.ffx-tooltip--close { background-color: #ccc; border: 0; border-radius: 10px; color: #fff; display: block; font-size: 12px; font-weight: bold; height: 20px; margin: 0; padding: 0; position: absolute; text-align: center; top: 6px; right: 6px; width: 20px; -webkit-appearance: none; }

.ffx-tooltip__marker { background-color: #007cc3; border-radius: 10px; color: #fff; display: inline-block; font-size: 13px; font-weight: bold; height: 18px; line-height: 18px; margin-left: 10px; text-align: center; width: 18px; }

#tooltip { background: #fff; border: 1px solid #ccc; border-radius: 3px; color: #333; font-size: 13px; line-height: 1.3; position: absolute; z-index: 100; padding: 10px; }
#tooltip:before, #tooltip:after { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ''; position: absolute; left: 50%; margin-left: -10px; }
#tooltip:before { border-top: 10px solid #ccc; bottom: -10px; }
#tooltip:after { border-top: 10px solid #fff; bottom: -9px; }
#tooltip.top:before { border-top-color: transparent; border-bottom: 10px solid #ccc; top: -20px; bottom: auto; }
#tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #fff; top: -19px; bottom: auto; }
#tooltip.left:before { left: 10px; margin: 0; }
#tooltip.left:after { left: 10px; margin: 0; }
#tooltip.right:before { right: 10px; left: auto; margin: 0; }
#tooltip.right:after { right: 10px; left: auto; margin: 0; }

.tooltip__body { position: relative; }

/*@ sourceMappingURL=ffx-tooltip.css.map */