div.grid {

}

div.grid_header {
	font-weight: bold;
}

div.grid_row {
	display: flex;
	justify-content: space-between;
}

div.grid_wrap {
	flex-wrap: wrap;
}

div.grid_nowrap {
	flex-wrap: nowrap;
}

div.grid_vertical_middle {
	align-items: center;
}

div.grid_row.grid_row_top_dashed {
	border-top: 1px dotted #a3a3a3;
}

div.grid_row.grid_row_bottom_dashed {
	border-bottom: 1px dotted #a3a3a3;
}

div.grid_col {
	margin: 5px;
	padding: 0px;
	position: relative;
	word-break: break-word;
}

/* extra small: display grid as rows */
@media (max-width: 575px) {
	div.grid_header {
		display: none;
	}

	div.grid_direction_row {
		flex-direction: row;
	}

	div.grid_direction_row_reverse {
		flex-direction: row;
	}

	div.grid_col:empty {
		display: none;
	}

	div.grid_col_1 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_2 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_3 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_4 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_5 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_6 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_7 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_8 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_9 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_10 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_11 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_12 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_responsive_label {
		display: block;
		font-weight: bold;
	}
}

/* small: display grid as rows */
@media (min-width: 576px) {
	div.grid_header {
		display: none;
	}

	div.grid_direction_row {
		flex-direction: row;
	}

	div.grid_direction_row_reverse {
		flex-direction: row;
	}

	div.grid_col:empty {
		display: none;
	}

	div.grid_col_1 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_2 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_3 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_4 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_5 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_6 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_7 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_8 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_9 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_10 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_11 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_12 {
		flex-basis: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_responsive_label {
		display: block;
		font-weight: bold;
	}
}

/* medium: display grid as rows and columns */
@media (min-width: 768px) {
	div.grid_header {
		display: flex;
	}

	div.grid_direction_row {
		fiex-direction: row;
	}

	div.grid_direction_row_reverse {
		flex-direction: row-reverse;
	}

	div.grid_col:empty {
		display: block;
	}

	div.grid_col_1 {
		flex-basis: 0;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_2 {
		flex-basis: 0;
		flex-grow: 2;
		flex-shrink: 1;
	}

	div.grid_col_3 {
		flex-basis: 0;
		flex-grow: 3;
		flex-shrink: 1;
	}

	div.grid_col_4 {
		flex-basis: 0;
		flex-grow: 4;
		flex-shrink: 1;
	}

	div.grid_col_5 {
		flex-basis: 0;
		flex-grow: 5;
		flex-shrink: 1;
	}

	div.grid_col_6 {
		flex-basis: 0;
		flex-grow: 6;
		flex-shrink: 1;
	}

	div.grid_col_7 {
		flex-basis: 0;
		flex-grow: 7;
		flex-shrink: 1;
	}

	div.grid_col_8 {
		flex-basis: 0;
		flex-grow: 8;
		flex-shrink: 1;
	}

	div.grid_col_9 {
		flex-basis: 0;
		flex-grow: 9;
		flex-shrink: 1;
	}

	div.grid_col_10 {
		flex-basis: 0;
		flex-grow: 10;
		flex-shrink: 1;
	}

	div.grid_col_11 {
		flex-basis: 0;
		flex-grow: 11;
		flex-shrink: 1;
	}

	div.grid_col_12 {
		flex-basis: 0;
		flex-grow: 12;
		flex-shrink: 1;
	}

	div.grid_responsive_label {
		display: none;
	}
}

/* large: display grid as rows and columns */
@media (min-width: 992px) {
	div.grid_header {
		display: flex;
	}

	div.grid_direction_row {
		fiex-direction: row;
	}

	div.grid_direction_row_reverse {
		flex-direction: row-reverse;
	}

	div.grid_col:empty {
		display: block;
	}

	div.grid_col_1 {
		flex-basis: 0;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_2 {
		flex-basis: 0;
		flex-grow: 2;
		flex-shrink: 1;
	}

	div.grid_col_3 {
		flex-basis: 0;
		flex-grow: 3;
		flex-shrink: 1;
	}

	div.grid_col_4 {
		flex-basis: 0;
		flex-grow: 4;
		flex-shrink: 1;
	}

	div.grid_col_5 {
		flex-basis: 0;
		flex-grow: 5;
		flex-shrink: 1;
	}

	div.grid_col_6 {
		flex-basis: 0;
		flex-grow: 6;
		flex-shrink: 1;
	}

	div.grid_col_7 {
		flex-basis: 0;
		flex-grow: 7;
		flex-shrink: 1;
	}

	div.grid_col_8 {
		flex-basis: 0;
		flex-grow: 8;
		flex-shrink: 1;
	}

	div.grid_col_9 {
		flex-basis: 0;
		flex-grow: 9;
		flex-shrink: 1;
	}

	div.grid_col_10 {
		flex-basis: 0;
		flex-grow: 10;
		flex-shrink: 1;
	}

	div.grid_col_11 {
		flex-basis: 0;
		flex-grow: 11;
		flex-shrink: 1;
	}

	div.grid_col_12 {
		flex-basis: 0;
		flex-grow: 12;
		flex-shrink: 1;
	}

	div.grid_responsive_label {
		display: none;
	}
}

/* extra large: display grid as rows and columns */
@media (min-width: 1200px) {
	div.grid_header {
		display: flex;
	}

	div.grid_direction_row {
		fiex-direction: row;
	}

	div.grid_direction_row_reverse {
		flex-direction: row-reverse;
	}

	div.grid_col:empty {
		display: block;
	}

	div.grid_col_1 {
		flex-basis: 0;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_2 {
		flex-basis: 0;
		flex-grow: 2;
		flex-shrink: 1;
	}

	div.grid_col_3 {
		flex-basis: 0;
		flex-grow: 3;
		flex-shrink: 1;
	}

	div.grid_col_4 {
		flex-basis: 0;
		flex-grow: 4;
		flex-shrink: 1;
	}

	div.grid_col_5 {
		flex-basis: 0;
		flex-grow: 5;
		flex-shrink: 1;
	}

	div.grid_col_6 {
		flex-basis: 0;
		flex-grow: 6;
		flex-shrink: 1;
	}

	div.grid_col_7 {
		flex-basis: 0;
		flex-grow: 7;
		flex-shrink: 1;
	}

	div.grid_col_8 {
		flex-basis: 0;
		flex-grow: 8;
		flex-shrink: 1;
	}

	div.grid_col_9 {
		flex-basis: 0;
		flex-grow: 9;
		flex-shrink: 1;
	}

	div.grid_col_10 {
		flex-basis: 0;
		flex-grow: 10;
		flex-shrink: 1;
	}

	div.grid_col_11 {
		flex-basis: 0;
		flex-grow: 11;
		flex-shrink: 1;
	}

	div.grid_col_12 {
		flex-basis: 0;
		flex-grow: 12;
		flex-shrink: 1;
	}

	div.grid_responsive_label {
		display: none;
	}
}

/* extra extra large: display grid as rows and columns */
@media (min-width: 1400px) {
	div.grid_header {
		display: flex;
	}

	div.grid_direction_row {
		fiex-direction: row;
	}

	div.grid_direction_row_reverse {
		flex-direction: row-reverse;
	}

	div.grid_col:empty {
		display: block;
	}

	div.grid_col_1 {
		flex-basis: 0;
		flex-grow: 1;
		flex-shrink: 1;
	}

	div.grid_col_2 {
		flex-basis: 0;
		flex-grow: 2;
		flex-shrink: 1;
	}

	div.grid_col_3 {
		flex-basis: 0;
		flex-grow: 3;
		flex-shrink: 1;
	}

	div.grid_col_4 {
		flex-basis: 0;
		flex-grow: 4;
		flex-shrink: 1;
	}

	div.grid_col_5 {
		flex-basis: 0;
		flex-grow: 5;
		flex-shrink: 1;
	}

	div.grid_col_6 {
		flex-basis: 0;
		flex-grow: 6;
		flex-shrink: 1;
	}

	div.grid_col_7 {
		flex-basis: 0;
		flex-grow: 7;
		flex-shrink: 1;
	}

	div.grid_col_8 {
		flex-basis: 0;
		flex-grow: 8;
		flex-shrink: 1;
	}

	div.grid_col_9 {
		flex-basis: 0;
		flex-grow: 9;
		flex-shrink: 1;
	}

	div.grid_col_10 {
		flex-basis: 0;
		flex-grow: 10;
		flex-shrink: 1;
	}

	div.grid_col_11 {
		flex-basis: 0;
		flex-grow: 11;
		flex-shrink: 1;
	}

	div.grid_col_12 {
		flex-basis: 0;
		flex-grow: 12;
		flex-shrink: 1;
	}

	div.grid_responsive_label {
		display: none;
	}
}