.flyout-container {
	display: none;
}

.flyout-container.flyout-container--open {
	display: block;
}

.flyout-container, .flyout-backdrop {
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10;
}

.flyout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	width: 13.5rem;
	z-index: 20;
	right: 5px;
}

.flyout-content {
	background-color: #fff;
	border: 0.0625rem solid #f2f1f4;
	border-radius: 0.5rem;
	/* margin: 0.5rem; */
	min-width: 13.5rem;
}

.flyout-content h5 {
	border-bottom: 0.0625rem solid #f4f4f5;
	margin: 0;
	padding: 0.625rem 1rem;
}

.flyout-body {
	padding: 1.25rem;
}

.flyout-section--padded {
	padding: 0 1.25rem;
}

.flyout-arrow-border, .flyout-arrow-fill {
	border-style: solid;
	border-width: 0.35rem;
	content: '';
	left: 12.25rem;
	position: absolute;
}

.flyout-arrow-border {
	border-color: transparent transparent #cccccc;
	top: -0.98rem;
}

.flyout-arrow-fill {
	border-color: transparent transparent #fff;
	top: -0.965rem;
}

.flyout--above .flyout-arrow-border {
	border-color: #cccccc transparent transparent;
	bottom: -0.5rem;
	top: initial;
}

.flyout--above .flyout-arrow-fill {
	border-color: #fff transparent transparent;
	bottom: -0.4375rem;
	top: initial;
}

button .button-flyout {
	display: block;
	margin: 0.75rem auto 0.5rem;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}