/* This is the default styling for all Tooltipsters: */
.tooltip-message {
	background:     #000; /* <- for IE */
	background:     rgba(0, 0, 0, 0.9);
	color:          #fff;
	font-family:    Arial, sans-serif;
	font-size:      12px;
	line-height:    12px;
	position:       absolute;
	padding:        10px;
	border-radius:  2px;
	text-align:     center;
	z-index:        9999999;
	pointer-events: none;
	width:          auto;
	overflow:       visible;
}

/* When you want to create a second class for your Tooltipster messages, copy (or modify) this template and add your style to it. Don't forget to refer to it in your Tooltipster settings (tooltipClass: '.my-custom-theme') */
.my-custom-theme {
	position:       absolute;
	text-align:     center;
	z-index:        9999999;
	pointer-events: none;
	width:          auto;
	/* Start styling here... */
}

/* Add a slight border radius to all images inside the Tooltipsters */
.tooltip-message img {
	border-radius: 2px;
}

/* These next classes handle the styles for the little arrow attached to the tooltip. If you need to change the color of the arrow to match a custom Tooltipster theme, set it in your Tooltipster settings (arrowColor: '#yourcolor') */
.tooltip-arrow {
	display:     block;
	text-align:  center;
	font-size:   12px;
	line-height: 12px;
	width:       100%;
	height:      5px;
	position:    absolute;
	left:        0px;
	z-index:     -1;
}
.tooltip-arrow-top {
	bottom:     -3px;
	margin:     0 auto;
	text-align: center;
}
.tooltip-arrow-top-right {
	bottom:      -3px;
	margin-left: -10px;
	text-align:  right;
}
.tooltip-arrow-top-left {
	bottom:      -3px;
	margin-left: 10px;
	text-align:  left;
}
.tooltip-arrow-bottom {
	top:        -10px;
	margin:     0 auto;
	text-align: center;
}
.tooltip-arrow-bottom-right {
	top:         -10px;
	margin-left: -10px;
	text-align:  right;
}
.tooltip-arrow-bottom-left {
	top:         -10px;
	margin-left: 10px;
	text-align:  left;
}
.tooltip-arrow-left {
	top:        0px;
	right:      -18px;
	margin:     0 auto;
	text-align: right;
}
.tooltip-arrow-right {
	top:        0px;
	left:       -8px;
	margin:     0 auto;
	text-align: left;
}

/* Some styling to enable the slide animation */
.tooltip-slide {
	height:   0px;
	position: absolute;
	width:    auto;
	z-index:  9999999;
	overflow: hidden;
}