.popover {
	position: absolute;
	z-index: 10;
	width: 300px;
	margin: 8px 0 0;
	border: 3px solid #292929;
	border-radius: 6px;
	background: #e5e5e5;

	&.br {
		margin: 0 0 8px;
	}
	.popover-arrow {
		position: absolute;
		top: -9px;
		left: 10px;
		z-index: 3;
		width: 0;
		height: 0;
		border-bottom: 6px solid #292929;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;

		&:before {
			position: absolute;
			top: 4px;
			left: -5px;
			z-index: 2;
			content: "";
			border-bottom: 5px solid #e5e5e5;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
		}
	}
	&.br .popover-arrow, &.bl .popover-arrow {
		top: auto;
		bottom: -9px;
		border-bottom: 0;
		border-top: 6px solid #292929;

		&:before {
			top: -9px;
			border-bottom: 0;
			border-top: 5px solid #e5e5e5;
		}
	}
	&.tr .popover-arrow, &.br .popover-arrow {
		left: auto;
		right: 10px;
	}
	.tabs {
		position: relative;
		bottom: -1px;
		z-index: 2;
		padding: 7px 7px 0;

		li {
			display: inline-block;
		}
		a {
			display: block;
			padding: 0 12px;
			border: 1px solid transparent;
			border-bottom: 0;
			color: #555;
			line-height: 24px;

			&.is-active {
				border-color: #b8b8b8;
				border-bottom: 0;
				border-radius: 3px 3px 0 0;
				background: #fff;
				color: #222;
			}
		}
	}
	.sections {
		position: relative;
		z-index: 1;
		border-top: 1px solid #b8b8b8;
		border-radius: 0 0 6px 6px;
		background: #fff;

		.section {
			display: none;

			&.is-active {
				display: block;
			}
		}
	}
}

