/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.em-field-group {
	padding-right: calc(10px / 2);
	padding-left: calc(10px / 2);
	margin-bottom: 10px;
}

.em-form-wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.em-column {
	position: relative;
	min-height: 1px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.em-column.em-col-100 {
	width: 100%;
}
.em-column.em-col-80 {
	width: 80%;
}
.em-column.em-col-75 {
	width: 75%;
}
.em-column.em-col-70 {
	width: 70%;
}
.em-column.em-col-66 {
	width: 66.666%;
}
.em-column.em-col-60 {
	width: 60%;
}
.em-column.em-col-50 {
	width: 50%;
}
.em-column.em-col-40 {
	width: 40%;
}
.em-column.em-col-33 {
	width: 33.333%;
}
.em-column.em-col-30 {
	width: 30%;
}
.em-column.em-col-25 {
	width: 25%;
}
.em-column.em-col-20 {
	width: 20%;
}
.em-field-group {
	.em-field-textual {
		width: 100%;
		max-width: 100%;
		border: 1px solid #818a91;
		background-color: transparent;
		color: #373a3c;
		vertical-align: middle;
		flex-grow: 1;
	}
	.em-select-field {
		width: 100%;
		max-width: 100%;
		background-color: transparent;
		color: #373a3c;
		vertical-align: middle;
		flex-grow: 1;
	}
	.em-field-subgroup {
		width: 100%;
		max-width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.em-field-subgroup:not(.em-subgroup-inline) {
		.em-field-option {
			flex-basis: 100%;
		}
	}
	.em-field-subgroup.em-subgroup-inline {
		.em-field-option {
			padding-right: 10px;
		}
	}
}

.em-field-label {
	cursor: pointer;
}

@media (max-width: 600px) {
	.em-column.em-col-80,
	.em-column.em-col-75,
	.em-column.em-col-70,
	.em-column.em-col-66,
	.em-column.em-col-60,
	.em-column.em-col-50,
	.em-column.em-col-40,
	.em-column.em-col-33,
	.em-column.em-col-30,
	.em-column.em-col-25,
	.em-column.em-col-20 {
		width: 100%;
	}
}