/**
 * @author: Procurios
 * @about:  pbuic-form-element-address.css - Layout of the address form element
 */

/**
 * FormElement layout settings
 */

label.fea-g-label,
.address-row label span {
	display: block;
	font-style: italic;
}

.pbuic-fe-address label.sr {
	display: none;
}

/**
 * CSS needed for interaction with JS
 */

/** Toggle visibility of checkboxes */
.fea-g-hidden {
	display: none;
}

.address-row select {
	display: block;
}

input.address-field {
	width: 100%;
}

input.address-freetext {
	display: block;
}

.address-row .fea-number {
	display: inline-block;
	width: 40%;
}

.address-row .fea-number_add span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.pbuic-fe-address label input {
	width: 100%;
}

.pbuic-fe-address input {
	margin-bottom: .8em;
}

@media screen and (max-width: 666px) {
	.address-row .fea-number {
		margin-right: 2%;
	}
}

.address-row .fea-number_add {
	display: inline-block;
	width: 20%;
}

@media screen and (min-width: 667px) {
	.online-investment-snippet .pbuic-fe-address {
		max-width: 37.3em; /** Cause rest of text input are .w-medium @todo: Move to a non-generic css e.g. myOikocredit registrationSteps.css % */
	}

	.address-row label {
		display: inline-block;
		margin-right: .5%;
	}

	.address-row label:last-child {
		margin-right: 0;
	}

	/** Address field sizes */
	.address-row .fea-number {
		width: 20%;
	}

	.address-row .fea-number_add {
		width: 14%;
	}

	.address-row .fea-street {
		width: 65%;
	}

	.address-row .fea-postcode {
		width: 25%;
	}

	.address-row .fea-town {
		width: 74.5%;
	}
}

/** Relation address checkboxes */
.fea-addressee-options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fea-addressee-options input {
	width: auto;
}

.fea-addressee-options li {
	margin-bottom: .5em;
}

/** country */
.fea-country {
	padding: 0;
}

.fea-country select {
	display: block;
}

/** google maps links **/
.fea-google-maps {
	display: none;
}

div.invalid div.pbuic-fe-address label.invalid-field {
	color: #c72860;
	font-weight: bold;
}

div.invalid div.pbuic-fe-address input.invalid-field,
div.invalid div.pbuic-fe-address select.invalid-field {
	background: #fee;
}