.grid_row,
.grid_row_full{
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: auto;
}

.grid_row_full{
  width: 100%;
}

.grid_row > *{
	margin-left: 5px;
	margin-right: 5px;
}


.grid_column{
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: center;
}

.grid_column > *{
	margin-bottom: 5px;
  align-self: center;
}

.grid_metro,
.grid_matrix{
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: auto;
    flex-wrap: wrap;
}

.grid_matrix{
    justify-content: center;
}
.grid_metro > *{
	flex: 1;
}

.grid_cell_right{
	text-align: right;
	justify-content: end;
  margin-left: auto;
}

.grid_cell_middle{
	align-self: center;
  text-align: center;
}

.grid_spacer{
  margin-left:10px;
}
.grid_cell_horizontal{
	flex: 1;
	width: 100%;
}

.grid_row .grid_cell_horizontal{
	align-self: center;
}

.grid_cell_error{
	border: 1px solid red;
	color: red;
	border-radius: 5px;
	padding: 5px;
}
.grid_cell_valid{
	border: 1px solid blue;
	border-radius: 5px;
	color: blue;
	padding: 5px;
}

.grid_box{
	border: 1px solid #ddd;
	padding: 15px;
	margin: 10px 5px 10px 5px;
	min-width: 350px;
}
.grid_box_error{
	color: red;
}
.grid_box_warning{
	color: orange;
}
.grid_box_title{
	font-weight: bold;
	width: 100%;
	flex: 1;
	text-decoration: underline;
	line-height: 3em;
}

.grid_cell_vertical{
  flex: 1;
}