.littlefoot {
	--button-background-color: #3bbc4c;
	--button-text-color: #fff;
	--button-active-background-color: #3f3f3f;
	--button-active-text-color: #fff;
	--button-border-radius: 8px;
	--button-border-radius: 0.5rem;
	--button-height: 16px;
	--button-height: 1rem;
	--button-margin: 0 1.6px;
	--button-margin: 0 0.1rem;
	--button-padding: 0 9.6px;
	--button-padding: 0 0.6rem;
	--button-transition: background-color 0.25s ease, color 0.25s ease;
	--popover-background-color: #3bbc4c;
	--popover-text-color: rgb(61, 59, 59);
	--popover-border: 1px solid #949494;
	--popover-border-radius: 8px;
	--popover-border-radius: 0.5rem;
	--popover-max-height: 15em;
	--popover-max-width: 90%;
	--popover-horizontal-padding: 22.4px;
	--popover-horizontal-padding: 1.4rem;
	--popover-vertical-padding: 9.6px;
	--popover-vertical-padding: 0.6rem;
	--popover-shadow: 0 0 8px rgba(0, 0, 0, .302);
	--popover-transform-origin: 50% 0;
	--popover-transform: scale(0.1) translateZ(0);
	--popover-active-transform: scale(1) translateZ(0);
	--popover-transition: opacity 0.25s ease, transform 0.25s ease;
	--popover-width: 22em;
	--popover-scroll-indicator-color: #3f3f3f;
	--popover-tooltip-size: 8px;
	--popover-tooltip-size: 0.5rem;
	--popover-z-index: 1;
	position: relative
}

.littlefoot__button {
	background-color: var(--button-background-color);
	border: 0;
	border: var(--button-border, 0);
	border-radius: var(--button-border-radius);
	color: var(--button-text-color);
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	font-size: var(--button-font-size, 12px);
	font-size: .75rem;
	font-size: var(--button-font-size, .75rem);
	font-weight: 400;
	font-weight: var(--button-font-weight, initial);
	height: var(--button-height);
	margin: var(--button-margin);
	padding: var(--button-padding);
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: var(--button-transition);
	vertical-align: middle
}

.littlefoot__button.is-active,
.littlefoot__button:active,
.littlefoot__button:focus,
.littlefoot__button:hover {
	background-color: var(--button-active-background-color);
	color: var(--button-active-text-color)
}

.littlefoot__button svg {
	float: left;
	height: 4.8px;
	height: .3rem
}

.littlefoot__popover {
	/* border: var(--popover-border); */
	border-radius: var(--popover-border-radius);
	box-shadow: var(--popover-shadow);
	margin: calc(var(--popover-tooltip-size) + var(--button-height)) 0;
	max-width: var(--popover-max-width);
	position: absolute;
	top: 0;
	transform: var(--popover-transform);
	transform-origin: var(--popover-transform-origin);
	transition: var(--popover-transition);
	width: var(--popover-width);
	z-index: var(--popover-z-index)
}

.littlefoot__popover.is-above {
	bottom: 0;
	top: auto
}

.littlefoot__popover.is-active {
	transform: var(--popover-active-transform)
}

.littlefoot__wrapper {
	position: relative;
	z-index: var(--popover-z-index)
}

.littlefoot__content,
.littlefoot__wrapper {
	border-radius: var(--popover-border-radius)
}

.littlefoot__content {
	-webkit-overflow-scrolling: touch;
	background-color: var(--popover-background-color);
	box-sizing: border-box;
	/* color: var(--popover-text-color); */
	/* font-family: serif; */
	/* font-family: initial; */
	/* font-family: var(--popover-font-family, initial); */
	font-size: medium;
	font-size: var(--popover-font-size, initial);
	font-style: normal;
	font-style: var(--popover-font-style, initial);
	font-weight: 400;
	font-weight: var(--popover-font-weight, initial);
	line-height: normal;
	line-height: var(--popover-line-height, normal);
	max-height: var(--popover-max-height);
	overflow: auto;
	padding: var(--popover-vertical-padding) var(--popover-horizontal-padding);
	width: 100%
}
.littlefoot__content * {
	color: var(--popover-text-color) !important;
}

.littlefoot__content img {
	max-width: 100%
}

.littlefoot__content:focus {
	outline: none
}

.is-scrollable {
	--arrow-x: calc(var(--popover-horizontal-padding)*-1);
	--arrow-y: calc(var(--popover-vertical-padding)/2)
}

.is-scrollable .littlefoot__content:after {
	bottom: 0;
	color: var(--popover-scroll-indicator-color);
	content: "\21E3";
	display: block;
	left: 0;
	opacity: 1;
	position: sticky;
	text-align: center;
	transform: translateX(var(--arrow-x)) translateY(var(--arrow-y));
	transition: var(--popover-transition);
	width: var(--popover-horizontal-padding)
}

.is-scrollable.is-fully-scrolled .littlefoot__content:after {
	opacity: 0
}

.littlefoot__tooltip {
	--tooltip-margin: calc(var(--popover-tooltip-size)*-1);
	background-color: var(--popover-background-color);
	border: var(--popover-border);
	box-shadow: var(--popover-shadow);
	height: calc(var(--popover-tooltip-size)*2);
	margin-left: var(--tooltip-margin);
	position: absolute;
	transform: rotate(45deg);
	width: calc(var(--popover-tooltip-size)*2)
}

.is-below .littlefoot__tooltip {
	top: var(--tooltip-margin)
}

.is-above .littlefoot__tooltip {
	bottom: var(--tooltip-margin)
}

@media (max-width:767.98px) {
	.littlefoot__popover {
		border-radius: 0;
		border-width: 1px 0 0;
		bottom: 0 !important;
		left: 0 !important;
		margin: 0;
		max-width: 100% !important;
		position: fixed;
		right: 0 !important;
		top: auto !important;
		transform: translateY(100%);
		width: 100%
	}

	.littlefoot__popover.is-active {
		transform: translateY(0)
	}

	.littlefoot__wrapper {
		border-radius: 0;
		max-width: 100% !important;
		transform: none
	}

	.littlefoot__tooltip {
		display: none
	}
}

@media not print {
	.littlefoot--print {
		display: none
	}
}

@media print {

	.littlefoot__button,
	.littlefoot__popover {
		display: none
	}
}