/* --------------- styles for Tooltip -----------------------*/

.simpletooltip[aria-hidden="true"],
.minimalist-simpletooltip[aria-hidden="true"],
.minimalist-left-simpletooltip[aria-hidden="true"] {
	display: none;
}
/* position relative for containers */
.simpletooltip_container,
.minimalist-simpletooltip_container,
.minimalist-left-simpletooltip_container {
	position: relative;
}

/* tooltip styles */
.simpletooltip, 
.minimalist-simpletooltip, 
.minimalist-left-simpletooltip {
	position: absolute;
	z-index: 666;
	width: 10em;
	border-radius: .5em;
	/*background: rgba( 0, 0, 0, .9 );*/
	background: #595959;
	color: #fff;
	padding: .5em;
	text-align: left;
	line-height: 1.3;
	margin-top: -.55em;
}
.simpletooltip, 
.minimalist-simpletooltip {
	right: auto;
	left: 100%;
	margin-left: .5em;
}
.minimalist-left-simpletooltip {
	right: 100%;
	left: auto;
	margin-right: .5em;
}
/* used pseudo-element to make arrows */
.simpletooltip::before,
.minimalist-simpletooltip::before,
.minimalist-left-simpletooltip::before {
	content: '';
	speak: none;
	position: absolute;
	z-index: 666;
	width: 0px;
	height: 0px;
	pointer-events: none;
}
.simpletooltip::before,
.minimalist-simpletooltip::before {
	top: .5em;
	left: -10px;
	margin-left: -10px;
	border: 10px solid transparent;
	/*border-right: 10px solid rgba( 0, 0, 0, .9 )*/
	border-right: 10px solid #595959
}
.minimalist-left-simpletooltip::before {
	top: .5em;
	right: -10px;
	margin-right: -20px;
	border: 10px solid transparent;
	/*border-left: 10px solid rgba( 0, 0, 0, .9 )*/
	border-left: 10px solid #595959;
}



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

/* for this example: mobile */
@media (max-width: 44.375em) {

	.simpletooltip, 
	.minimalist-simpletooltip,
	.minimalist-left-simpletooltip  {
		top: 100%;
		left: 50%;
		right: 0;
		margin: 0;
		margin-top: .7em;
		margin-left: -5.8em;
	}

	.simpletooltip::before, 
	.minimalist-simpletooltip::before,
	.minimalist-left-simpletooltip::before  {
		top: -10px;
		right: auto;
		left: 50%;
		margin-left: -5px;
		margin-top: -10px;
		border: 10px solid transparent;
		/*border-bottom: 10px solid rgba( 0, 0, 0, .9 );*/
		border-bottom: 10px solid #595959;
	}
  
}