/**
 * Grids and columns
 *
 * @since: Symphony 2.3
 */


/*-----------------------------------------------------------------------------
	General column definitions
-----------------------------------------------------------------------------*/

.columns {
	margin-left: -15px;
	clear: both;
}

.columns:after {
	content: "";
	clear: both;
	display: block;
}

.columns .column,
.columns > .invalid {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	margin: 0 0 15px;
	padding: 0 0 0 15px;
}

/* Equal columns */

.two.columns .column,
.two.columns > .invalid {
	width: 50%;
}

.three.columns .column,
.three.columns > .invalid {
	width: 33.33%;
}

.four.columns .column,
.four.columns > .invalid {
	width: 25%;
}

.columns legend {
	margin: 0 0 0 -15px !important;
	padding: 0 5px 0 15px !important;
}

.columns legend + * {
	margin-top: 10px;
}

/* Unequal columns */

form.columns {
	margin: 0;
	padding: 10px 18px 0;
}

form.columns .column.primary {
	padding: 0;
	width: 100%;
}

.two.columns .column.primary {
	margin: 0;
	width: 65%;
}

.two.columns .column.secondary {
	margin: 0;
	width: 35%;
}

@media screen and (max-width: 700px) {

	.two.columns .column.primary,
	.two.columns .column.secondary {
		width: 100%;
	}

	.two.columns .column.secondary {
		padding: 15px 0 0 0;
		margin-top: 5px;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	.two.columns .column.secondary p.label {
		margin-top: 10px;
	}

}

/* Errors in columns */

.columns > .invalid {
	background: none;
	border: none;
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.columns > .invalid .column {
	background-color: #eb6347;
	border: 1px solid #c31;
	border-bottom: 0;
	-webkit-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	padding: 10px 10px;
	width: 100%;
	float: none;
	margin: 0;
}

.columns > .invalid > .column > i {
	top: 10px;
	right: 10px;
}

.columns > .invalid > .column > .tags {
	margin-bottom: 0;
}

.columns > .invalid > p {
	background-color: #eb6347;
	border: 1px solid #c31;
	border-top: 0;
	-webkit-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
	-webkit-box-shadow: 0 1px 2px rgba(204, 51, 17, 0.3);
	box-shadow: 0 1px 2px rgba(204, 51, 17, 0.3);
	padding: 0 10px 10px;
}

/*-----------------------------------------------------------------------------
	Special definition
-----------------------------------------------------------------------------*/

.columns .column.justified {
	padding-top: 21px;
}