.flex-rows {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.flex-columns {
	display: flex;
	flex-direction: row;
	column-gap: 10px;
}

#databoard { /*Contains databoard-header and databoard-body*/
	border: 2px solid var(--main-border-color);
	display: grid;
	grid-template-rows: min-content 1fr;
	grid-row-gap: 10px;
}

#databoard-header { /*Contains databoard-header-info, databoard-header-redirect and databoard-header-close*/
	flex-grow: 0;
	flex-shrink: 0;
}

#databoard-header-info { /*Contains databoard-header-info-title and databoard-header-info-subtitle*/
	flex-grow: 1;
}

#databoard-header-info-name { /*Span containing name of the item*/
	
}

#databoard-header-info-subtitle {
	font-size: 13px;
}

#databoard-header-redirect { /*Contains redirect to Bricklink*/
	flex-grow: 0;
	border: 2px solid var(--main-border-color);
}

#databoard-header-close { /*Contains close button for entire databoard*/
	flex-grow: 0;
	vertical-align: middle;
	border: 2px solid var(--main-border-color);
}

#databoard-body { /*Contains databoard-body-main and databoard-body-side*/
	display: grid;
	grid-template-columns: 6fr 1fr;
	grid-template-rows: 4fr 120px;
    grid-gap: 10px;

	max-width: 100% !important;
	max-height: 100% !important;
}

.chart { /*Individual chart*/
	width: 100%;
	height: 49%;
}

.control {
	max-width: 100% !important;
	max-height: 100% !important;
}

#databoard-body-controls-main {
	max-width: 100% !important;
	max-height: 100%;
}


@media screen and (max-width: 500px) {
	#databoard-body {
		grid-template-columns: 100%;
		grid-template-rows: 4fr 1fr 1fr 1fr;
		overflow-y: auto;
	}
}

.filter-grid {
	display: grid;
	grid-template-columns: 1fr min-content;
	grid-gap: 5px;
	text-align: left;
}

.filter-input {

}

.filter-label {
	text-align: left;
}