.cx-callout { /* styling accordingly to OOjs UI's `popupWidget-popup` */
	background: #fff;
	color: #222;
	position: absolute;
	max-width: 500px;
	border: 1px solid #a2a9b1;
	border-radius: 2px;
	padding: 20px;
	-webkit-box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
	overflow: visible;
	z-index: 999;
}

.cx-callout:after,
.cx-callout:before {
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

/* @noflip */.cx-callout-2:after,
.cx-callout-2:before {
	left: 100%;
	top: 20px;
}

/* @noflip */.cx-callout-2:after,
.cx-callout-3:after,
.cx-callout-4:after {
	border-color: transparent;
	border-left-color: #fff;
	border-width: 12px;
	margin-top: -12px;
}

/* @noflip */.cx-callout-2:before,
.cx-callout-3:before,
.cx-callout-4:before {
	border-color: transparent;
	border-left-color: #a2a9b1;
	border-width: 13px;
	margin-top: -13px;
}

/* @noflip */.cx-callout-3:after,
.cx-callout-3:before {
	left: 100%;
	top: 50%;
}

/* @noflip */.cx-callout-4:after {
	left: 100%;
	bottom: 8px;
}

/* @noflip */.cx-callout-4:before {
	left: 100%;
	bottom: 7px;
}

/* @noflip */.cx-callout-8:after {
	right: 100%;
	bottom: 8px;
}

/* @noflip */.cx-callout-8:before {
	right: 100%;
	bottom: 7px;
}

/* @noflip */.cx-callout-8:after,
.cx-callout-9:after,
.cx-callout-10:after {
	border-right-color: #fff;
	border-width: 12px;
	margin-top: -12px;
}

/* @noflip */.cx-callout-8:before,
.cx-callout-9:before,
.cx-callout-10:before {
	border-right-color: #a2a9b1;
	border-width: 13px;
	margin-top: -13px;
}

/* @noflip */.cx-callout-9:after,
.cx-callout-9:before {
	right: 100%;
	top: 50%;

}
/* @noflip */.cx-callout-10:after,
.cx-callout-10:before {
	right: 100%;
	top: 20px;
}

/* @noflip */.cx-callout-0:after,
.cx-callout-0:before,

/* @noflip */.cx-callout-12:after,
.cx-callout-12:before {
	bottom: 100%;
	left: 50%;
}

/* @noflip */.cx-callout-12:after,
.cx-callout-0:after {
	border-color: transparent;
	border-bottom-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}

/* @noflip */.cx-callout-12:before,
.cx-callout-0:before {
	border-color: transparent;
	border-bottom-color: #a2a9b1;
	border-width: 13px;
	margin-left: -13px;
}

/* @noflip */ .cx-callout-11:after,
.cx-callout-11:before {
	bottom: 100%;
	left: 20px;
}

/* @noflip */.cx-callout-11:after {
	border-color: transparent;
	border-bottom-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}

/* @noflip */.cx-callout-11:before {
	border-color: transparent;
	border-bottom-color: #a2a9b1;
	border-width: 13px;
	margin-left: -13px;
}

/* @noflip */.cx-callout-1:after {
	bottom: 100%;
	right: 11px;
	border-bottom-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}

/* @noflip */.cx-callout-1:before {
	bottom: 100%;
	right: 10px;
	border-bottom-color: #a2a9b1;
	border-width: 13px;
	margin-left: -13px;
}

/* @noflip */.cx-callout-6:after,
.cx-callout-6:before {
	top: 100%;
	left: 50%;
}

/* @noflip */.cx-callout-6:after {
	border-top-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}

/* @noflip */.cx-callout-6:before {
	border-top-color: #a2a9b1;
	border-width: 13px;
	margin-left: -13px;
}

/* @noflip */.cx-callout-7:after,
.cx-callout-7:before {
	top: 100%;
	left: 20px;
}

/* @noflip */.cx-callout-7:after {
	border-top-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}

/* @noflip */.cx-callout-7:before {
	border-top-color: #a2a9b1;
	border-width: 13px;
	margin-left: -13px;
}

/* @noflip */.cx-callout-5:after {
	top: 100%;
	right: 11px;
	border-top-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}

/* @noflip */.cx-callout-5:before {
	top: 100%;
	right: 10px;
	border-top-color: #a2a9b1;
	border-width: 13px;
	margin-left: -13px;
}
