/** Containers/structure **/

.bg-primary { background-color:#182882 !important; }

section.form-section {
	padding: 0;
	margin: 0.5em 0;
	border: 1px solid #000;
}

section.form-section header {
	margin: 0;
	padding: 0.4em;
}

section.form-section .fieldset {
	display: block;
	border: none;
	margin: 0;
	padding: 0.5em 0.2em;
}

section.form-section .fieldset p {
	margin-bottom: 0.4em !important;
}

section.form-section .fieldset .full-width {
	margin-left: 0;
}

section.form-section .group .form-field {
	margin: 0;
	padding: 0 0.5em;
}

section.form-section .inline .form-field { 
	display: inline-block;
	float: left;
	width: auto;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}

section.form-section .has-label .form-field {
	margin: 0 1em 0.5em 0;
	padding: 0;
	
}
section.form-section .has-label .form-field:last-child { margin-right: 0; }

section.form-section .inline .form-field label {
	display: block;
	float: left;
	padding: 0;
	margin: 0;
	width: 99%;
	
}
section.form-section .inline .form-field label input,
section.form-section .inline .form-field label textarea { 
	margin-bottom: 0.4em;
	width: 100%;
	width: calc(99% - 1.6em); 
}
section.form-section .inline .form-field label input:first-child,
section.form-section .inline .form-field label textarea:first-child { margin-top: 0.4em; }
section.form-section .inline .form-field label input:last-child,
section.form-section .inline .form-field label textarea:last-child { margin-bottom: 0; }

section.form-section .inline .form-field i,
section.form-section .inline .form-field label { 
	font-size: 16px; 
	font-style: normal; 
}

/** Table layout components **/
section.form-section .table-layout .wrapper {
	margin: 0.5em;
	padding: 0.5em 0;
}
section.form-section .inline .form-field label input,
section.form-section .inline .form-field label textarea,
.form-row .form-field-wrapper.table-layout .form-field input[type="text"],
.form-row .form-field-wrapper.table-layout .form-field input[type="email"],
.form-row .form-field-wrapper.table-layout .form-field textarea, 
.form-row .form-field-wrapper.table-layout .form-field select {
	font-size: 14px;
	margin-top: 0;
}
section.form-section .table-layout .form-field label {
	display: block;
	float: none;
	width: auto;
}
section.form-section .table-layout .form-field label.col,
section.form-section .table-layout .form-field div.col {
	display: block;
	float: left;
	width: auto;
	margin: 0.5em 0.3em 0 0;
	
}
section.form-section .table-layout .form-field div.col.text,
section.form-section .table-layout .form-field div.col strong.text,
section.form-section .table-layout .form-field label.col { 
	font-size: 14px !important;
	line-height: normal;
}
section.form-section .table-layout .form-field label.check {
	background: url('/images/icons/check.png') no-repeat center right;
}
section.form-section .table-layout .form-field .xxsmall, 
section.form-section .table-layout .form-field .xxsmall input { width: 66px !important; }
section.form-section .table-layout .form-field .xsmall, 
section.form-section .table-layout .form-field .xsmall input { width: 72px !important; }
section.form-section .table-layout .form-field .asmall, 
section.form-section .table-layout .form-field .asmall input { width: 90px !important; }
section.form-section .table-layout .form-field .small, 
section.form-section .table-layout .form-field .small input { width: 125px !important; }
section.form-section .table-layout .form-field .medium, 
section.form-section .table-layout .form-field .medium input { width: 225px !important; }
section.form-section .table-layout .form-field .large, 
section.form-section .table-layout .form-field .large input { width: 460px !important; }
section.form-section .table-layout .form-field .full, 
section.form-section .table-layout .form-field .full input { 
	width: 100% !important;
	max-width: calc(630px - 0.2em) !important;
}
.form-container .form-section .fieldset .form-field-wrapper.table-layout .form-field div.col input,
.form-container .form-section .fieldset .form-field-wrapper.table-layout .form-field div.col textarea {
	width: calc(100% - 14px) !important; 
}

/** Components **/ 
section.form-section header .text, section.form-section .fieldset .text, section.form-section footer .text { 
	line-height: normal;
	margin: 0;
}
section.form-section header .text { font-size: 16px; }
section.form-section footer .text { font-size: 10px; font-style: normal; line-height: 160%; }
section.form-section .center { text-align: center; margin: 0 auto; }
section.form-section .bold { font-weight: bold; }
section.form-section .white { color: #fff; }
section.form-section .bg-black { background: #000; }
section.form-section .bg-white { background: #fff; }
section.form-section .bg-blue { background: #CCCCFF; }
section.form-section .bg-pink { background: #FFCCFF; }
section.form-section .bg-green { background: #CCFFCC; }
section.form-section .bg-light-red { background: #f2b8bf; }
section.form-section .bg-lighter-red { background: #f8eaed; }
section.form-section .bg-light-blue { background: #d6eaf8; }
section.form-section .bg-lighter-blue { background: #ebf5fb; }

/** Selector rules **/
form section.form-section:first-child { margin-top: 0; }
form section.form-section:last-child { margin-bottom: 0; }
section.form-section .inline .form-field:first-child {}
section.form-section .inline .form-field:last-child { padding-right: 0; }
section.form-section .inline .form-field:first-child label { margin-right: 1em; }
section.form-section .table-layout .form-field label.col:last-child,
section.form-section .table-layout .form-field div.col:last-child { margin-right: 0; }


/** Responsive **/
@media only screen and (max-width: 480px) {
	section.form-section .has-label .form-field {
		margin-right: 0.4em;
		padding: 0;
	}
	section.form-section .table-layout .form-field .large, 
	section.form-section .table-layout .form-field .large input,
	section.form-section .table-layout .form-field .full, 
	section.form-section .table-layout .form-field .full input { 
		width: 100% !important;
		max-width: calc(100% - 0.2em) !important;
		float: none;
		clear: both;
	}
}

@media only screen and (max-width: 768px) {
	section.form-section .inline .form-field,
	section.form-section .group .form-field {
		margin: 0;
		padding: 0.8em 0 0.8em 0.5em;
	}
	
	section.form-section .inline .form-field { 
		display: block;
		float: none;
		margin-top: 0;
		margin-bottom: 0;
	}
	
	section.form-section .has-label .form-field { 
		float: left;
		width: auto;
		margin-top: 0;
		margin-bottom: 0;
	}
	
	section.form-section .inline .form-field:first-child label { margin-right: 0.2em; }
}