/* CSS file */
/* lt2_bentobox.css */
/* Example: Used on charts/graphs */

.lt_bento_box {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(var(--lt-bento-chart-min-width), 1fr) );
	grid-gap: var(--lt-padding);
	grid-row-gap: var(--lt-padding);
	margin: var(--lt-padding) 0;
	grid-auto-rows: auto;
	justify-items: stretch;
}
.lt_bento_box:first-child,
.lt_bento_box:first-child h2 {
	margin-top:0;
}
.lt_bento_box.fit {
	grid-template-columns: repeat( auto-fit, minmax(var(--lt-bento-chart-min-width), 1fr) );
}
.lt_bento_box > .col1 {
	grid-column: 1 / -1;
}
.lt_bento_box > .col2 {
	grid-column: span 2;
}

.lt_pillbox + .lt_bento_box {
	margin-top: var(--lt-padding-half);
}
.lt_pillbox + .lt_bento_box h2 {
	margin-top:0;
}
.lt_bento_box + .lt_pillbox {
	margin-top: calc(var(--lt-padding) * 2);
}
.lt_bento_box + #ajaxcontent {
	margin-top: calc(var(--lt-padding) * 4);
}
.lt_chart_container.loading {
	xbackground: #fc9f4333, #eee3, #1f9fdb33, #86cc7533;
	background: linear-gradient(-45deg, #eee1, #39272633, #eee1, #39272633, #eee1);
	background-size: 200% 200%;
	animation: gradient_loading_animation 5s linear infinite;
}

/* if we use bento_items without putting them in a box, they will be full width and need margins, etc. */
:not(.lt_bento_box) > .lt_bento_item {
	margin-bottom: var(--lt-padding);
}
.lt_bento_item.loading {
	display:none;
}
.lt_bento_item.loaded {
	display:block;
}




@media (max-width: 900px) {
	.lt_bento_item,
	.lt_bento_box > .col2 {
		grid-column: 1 / -1;
	}
}


/* this rule: when a 2-column box precedes a 1 column box, the 1 column box can grow to fit
the entire width of the screen once there is enough room for another column. The max-width
here is dependent on the --lt-bento-chart-min-width and grid-gap settings of the enclosing bento.
 */
@media (max-width: 1110px) {
	.lt_bento_item.col2,
	.lt_bento_item.col2 + .lt_bento_item:last-child {
		grid-column: 1 / -1;
	}
}

.lt_bento_item_headcontrols {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	position: relative;
	width:100%;
	flex-wrap: wrap;
}
.lt_bento_item_headcontrols > .lt_bento_control_items {
	display:flex;
	justify-content: flex-end;
	gap: 1em;
	margin-bottom: var(--lt-padding-quarter);
	align-self: flex-end;
	margin-left:auto;
}

.stats_overview .lt_bento_item_headcontrols > .lt_bento_control_items {
	position: absolute;
	right: 3px;
	top: 5em;
}

.lt_bento_item_headcontrols > h2 {
	flex-grow: 1;
	xwidth: 100%;
}


@media (max-width: 767px) {
	.stats_overview .chart_action_button,
	.lt_bento_item .chart_action_button {
		opacity: 1.0;
	}

}