/**
 * This CSS file was auto-generated via PostCSS
 *
 * Contributors should avoid editing this file, but instead edit the associated
 * src/resources/postcss/ file. For more information, check out our engineering
 * docs on how we handle CSS in our engineering docs.
 *
 * @see: http://moderntribe.github.io/products-engineering/css/
 */

/* = Tooltips
============================ */

.tribe-tooltip {
	cursor: pointer;
	display: inline-block;
	margin: 0;
	position: relative;
	text-align: left;
}

.tribe-tooltip .dashicons-info {
		color: #a9a9a9;
		font-size: 16px;
		line-height: 1em;
		vertical-align: middle;
	}

/* defaults */

.tribe-tooltip .down,
	.tribe-tooltip .left,
	.tribe-tooltip .right,
	.tribe-tooltip .up {
		background-color: #fff;
		box-shadow: 0 0 3px 3px rgba(4, 5, 5, 0.05);
		box-sizing: border-box;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		max-weight: 100vw;
		opacity: 0;
		padding: 15px;
		position: absolute;
		-webkit-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
		transition: opacity 0.8s;
		visibility: hidden;
		width: 250px;
		z-index: 99999999;
	}

.tribe-tooltip .down i, .tribe-tooltip .left i, .tribe-tooltip .right i, .tribe-tooltip .up i {
			height: 12px;
			overflow: hidden;
			position: absolute;
			width: 24px;
		}

.tribe-tooltip .down i::after, .tribe-tooltip .left i::after, .tribe-tooltip .right i::after, .tribe-tooltip .up i::after {
				background-color: #fff;
				content: '';
				height: 12px;
				position: absolute;
				width: 24px;
			}

.tribe-tooltip.large .down,
		.tribe-tooltip.large .left,
		.tribe-tooltip.large .right,
		.tribe-tooltip.large .up {
			width: 400px;
		}

.tribe-tooltip .tooltip-list {
		padding-left: 10px;
	}

.tribe-tooltip .tooltip-list li {
			list-style-type: disc;
		}

.tribe-tooltip .down {
	left: 50%;
	top: 28px;
}

.tribe-tooltip .down i {
		bottom: 100%;
		left: 50%;
		margin-left: -7px;
	}

.tribe-tooltip .down i::after {
			box-shadow: 0 0 3px 3px rgba(4, 5, 5, 0.05);
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, 50%) rotate(45deg);
			        transform: translate(-50%, 50%) rotate(45deg);
		}

/* active (open) styles */

.tribe-tooltip.active .down,
.tribe-tooltip.active .left,
.tribe-tooltip.active .right,
.tribe-tooltip.active .up {
	opacity: 1;
	visibility: visible;
}

@media screen and (max-width: 480px) {

.tribe-tooltip.large .down,
		.tribe-tooltip.large .left,
		.tribe-tooltip.large .right,
		.tribe-tooltip.large .up {
				width: 250px
		}
			}
