/* ------------------------------------------------------
**** Forms
------------------------------------------------------ */

.field-element {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
          overflow: hidden;
}

.field-element * {
	  -webkit-box-sizing: inherit;
	          box-sizing: inherit;
}

.field-label,
.field-element--checkboxboollist .fieldset__legend,
.field-element--checkboxset .fieldset__legend,
.fieldset--multiradio .fieldset__legend {
	margin-top: 0;
	line-height: inherit;
	margin-bottom: 5px;
	padding-top: 5px;
	font-weight: bold;
	font-size: 1.1em;
}

form.frmbldr--wrap .field-label,
form.frmbldr--wrap .field-element--checkboxboollist .fieldset__legend,
form.frmbldr--wrap .field-element--checkboxset .fieldset__legend,
form.frmbldr--wrap .fieldset--multiradio .fieldset__legend {
	font-weight: 200;
}

legend.field-label,
h2.field-label,
h3.field-label,
h4.field-label {
	display: block;
	margin-bottom: 5px;
}

.field-label__required {
	text-indent: -9999px;
	line-height: 0;
	display: inline-block;
}

.field-label__required:after {
    content: "*";
    text-indent: 0;
    display: block;
    line-height: inherit;
}

.field-helper {
	font-weight: normal;
	font-size: 92%;
}

.field-label--vis-hidden {
	opacity: 0;
}

.field-label--vis-hidden-no-space {
	opacity: 0;
	text-indent: -9999px;
	height: 0;
	overflow: hidden;
}

.field-element {
	margin-bottom: .75em;
}

/* Hacky mobile site over-rides */
body input.textbox,
body select,
body textarea {
	width: 100% !important;
}

.field-element input.textbox,
.field-element select,
.field-element textarea {
	margin-bottom: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #f3f3f5;
	padding-left: 10px;
	padding-right: 10px;
	border: 2px solid #CDCDCD;
	border-radius: 3px;
}

.field-element input.textbox:focus,
.field-element select:focus,
.field-element textarea:focus {
	border-color: #8d8d8d;
	-webkit-box-shadow: none;
	        box-shadow: none;
}

.field-element input[type="radio"],
.field-element input[type="checkbox"] {
	width: auto;
}


/* ---- Money ---- */
.field-element--money .field-input .textbox {
    padding-left: 55px;
    background-image: url(../images/form-icons.svg);
    background-repeat: no-repeat;
    background-position: top -447px left -2px;
	height: 36px;
}

.field-element--money .field-input {
    position: relative;
}
.field-element--money .field-input .money-symbol:before {
    content: "\00a4";       /* Generic currency sign */
    position: absolute;
    display: block;
    top: 6px;
    left: 0;
    color: #58595B;
    font-weight: bold;
    font-size: 19px;
    width: 41px;
    text-align: center;
}
.field-element--money .field-input .money-symbol--dollar:before {
    content: "$";    /* Dollars */
}
.field-element--money .field-input .money-symbol--pound:before {
    content: "\00a3";    /* Pounds */
}
.field-element--money .field-input .money-symbol--yen:before {
    content: "\00a5";    /* Yen */
}
.field-element--money .field-input .money-symbol--indian_rupee:before {
    content: "\20B9";   /* Indian rupee */
}


/* datepicker specific styles */

.field-element--datepicker input.fb-datepicker {
	height: 36px;
	width: 100%;
}

.daterangepicker {
	border: 1px #ccc solid;
	box-shadow: 0 0 2px #ddd;
	top: -100px;
	left: -100px;
}
.daterangepicker,
.daterangepicker .calendar-table {
	background: #f8f8f8;
}
.daterangepicker th,
.daterangepicker td {
	box-sizing: border-box;
}
.daterangepicker .calendar {
    max-width: 295px !important;
}
.glyphicon:before {
    font-style: normal;
}
.glyphicon-chevron-left:before {
    content: "<"
}
.glyphicon-chevron-right:before {
    content: ">";
}


/* textbox specific styles */

.field-element--text input.textbox,
.field-element--number input.textbox {
	height: 36px;
}


/* upload specific styles */
.field-element--forms--upload_field .field-input {
	padding: 20px;
	background: #EEEFF1;
	border-radius: 3px;
}
.field-element--forms--upload_field.field-element--error .field-input {
	border: 2px #c44556 solid;
}


/* Dropdown specific styles */

.field-element--dropdown .field-input {
	border: 2px solid #CDCDCD;
	border-radius: 3px;
	background: #f3f3f5 url(../images/arrow_dropdown.svg) no-repeat right center;
	width: 100%;
	height: 36px;
	padding-top: 1px;
	overflow: hidden;
}

.field-element--dropdown.field-element--error select,
.field-element--dropdown select {
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 15px;
	padding-right: 40px;
	border: 0px;
	width: 101%;
	height: 33px;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: -1px;
	margin-left: -2px;
	margin-bottom: 0;
}

.field-element--dropdown.field-element--error .field-input {
	border-color: #c44556;
}

/* Radio and checkbox specific styles */

.field-input select:after {
	position: absolute;
	content: '\00a0';
	right: 10px;
	top: 0;
	bottom: 0;
}

.field-element select::-ms-expand {
	display: none;
}


/* - radios and checkboxes - */

.fieldset--multiradio,
.fieldset--checkboxset {
	margin-bottom: 0;
}

.field-element input[type="checkbox"],
.field-element input[type="radio"] {
    float: left;
    margin: 0;
}

.field-element input[type="checkbox"] + label,
.field-element input[type="radio"] + label {
    padding-left: 10px;
    margin-left: 16px;
    position: relative;
    cursor: pointer;
    display: block;
    margin-bottom: 0;
    line-height: 1.2;
}

.field-element--checkboxboollist .fieldset-input,
.field-element--checkboxset .fieldset-input,
.field-element--multiradio .fieldset-input {
	padding: 10px 13px 10px;
	margin-bottom: 5px;
	background: #eeeff1;
	min-height: 36px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column nowrap;
	        flex-flow: column nowrap;
}

.field-element--checkboxboollist input,
.field-element--checkboxset input,
.fieldset--multiradio input {
	position: absolute;
}

.field-element--checkboxboollist label,
.field-element--checkboxset label,
.fieldset--multiradio label {
	margin-left: 16px;
	padding-right: 10px;
}

/** radio grid **/
.field-element--field-set-grid .fieldset-input {
	display: table-cell;
}

.field-element--field-set-grid .field-element__input-set {
	background-color: #eeeff1;
	margin-bottom: 5px;
	display: table;
	width: 100%;
}


/* Old Checkbox tables that can't be converted because reasons */


form table.checkbox-list,
form table.checkbox-list tr {
	border: 0px !important;
	background: transparent;
}

form table.checkbox-list td {
	background: #eeeff1;
	border: 0px;
	height: 36px;
	vertical-align: middle;
	padding: 0 8px !important;
	width: 69%;
}

form table.checkbox-list td.check {
	width: 5%;
	padding-right: 0 !important;
}
form table.checkbox-list td.field-info {
	width: 26%;
	text-align: right;
}
form table.checkbox-list span.field-info {
	color: #01387A;
	white-space: nowrap;
}

/* - field error messages - */

.field-element--error textarea,
.field-element--error select,
.field-element--error input[type="text"],
.field-element--error input[type="password"],
.field-element--error input[type="datetime"],
.field-element--error input[type="datetime-local"],
.field-element--error input[type="date"],
.field-element--error input[type="month"],
.field-element--error input[type="time"],
.field-element--error input[type="week"],
.field-element--error input[type="number"],
.field-element--error input[type="email"],
.field-element--error input[type="url"],
.field-element--error input[type="search"],
.field-element--error input[type="tel"],
.field-element--error input[type="color"] {
	background-color: #f6e3e6;
	border: 2px solid #c44556;
}


.field-element--error select {
	background: #f6e3e6 url(../images/arrow_dropdown.svg) no-repeat right center;
}

.fel-field-error {
	background: #c44556;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	margin-top: -2px;
}

.field-info .field-error {
	line-height: 1.2;
	background: #c44556;
	border: 0px;
	font-size: 1em;
	padding: 4px 10px 3px 10px;
	color: #fff;
}

.field-info .field-error:before {
	content: '-\00a0'
}


.field-error__list {
	margin: 0;
	padding: 8px 10px 4px 22px;
}

.main-content li {
	margin: 0 !important;
}

.main-content .field-error__list__item,
.field-error__list__item {
	margin-bottom: 8px !important;
	list-style-type:none;
	position: relative;
}
.field-error__list__item:before {
	content: '-\00a0';
	margin-left: -10px;
}


.ac_results {
	width: 260px !important;
	background: #eeeff1;
	border: 0px;
	-webkit-box-shadow: 0 3px 4px -2px rgba(0,0,0,.5);
	box-shadow: 0 3px 4px -2px rgba(0,0,0,.5);
	margin: -2px 0 0 0;
	z-index: 2;
}
.ac_results li {
	padding: 5px 11px;
	font-family: inherit;
	font-size: 1.4rem;
}


/* ---- */

input.datepicker.wd {
	margin-left: 0;
}
input.datepicker.wy {
	margin-right: 0;
}
input.datepicker {
	width: 60px;
	margin: 0 4px;
}
input.timepicker {
	width: 135px;
}

select[multiple],
select[size] {
	height: auto;
}

select.cc-type,
select.cc-exp,
input.cc-cvn {
	width: 30%;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	font-size: 1.4rem;
	color: #ccc;
}

.radio,
.checkbox {
	min-height: 1.5em;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
	float: left;
	margin-right: 10px;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child {
	padding-top: 5px;
}

.radio.inline,
.checkbox.inline {
	display: inline-block;
	padding-top: 5px;
	margin-bottom: 0;
	vertical-align: middle;
}

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
	margin-left: 12px;
}


.form-actions {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	padding: 0.5em 24px 1.5em;
}
	.form-actions:before, .form-actions:after {
		content: " ";
		display: table;
	}
	.form-actions:after {
		clear: both;
	}

[placeholder]:focus::-webkit-input-placeholder {
	opacity: 0;
	-webkit-transition: opacity .5s .5s ease;
	transition: opacity .5s .5s ease;
}



/* ---- Form section form styles ---- */

.form-section input,
.form-section label,
.form-section select,
.form-section textarea {
	margin-bottom: 0;
}

/* Field info */
.form-section span.field-info {
	color: #385799;
}

.form-section span.field-info,
.form-section span.field-error {
	font-weight: bold;
	padding: 0;
	display: block;
	margin: 0 0 -8px 0;
	font-size: 1.2rem;
	vertical-align: middle;
	background: none;
	border-right: none;
}

.form-section span.field-error {
	color: #D20000;
}
input[type=text].field-error,
input[type=password].field-error,
textarea.field-error,
.textbox.field-error {
	border: 1px #D20000 solid;
}
span.field-error + span.field-info {
	display: none;
}

input[type="file"] {
	width: 100%;
	border: 2px solid #CDCDCD;
}

:where(.g-recaptcha) {
	margin-top: .75em;
	margin-bottom: .75em
}


:where(input[type="file"]) {
	background-color: #f3f3f5;
	height: 36px;
	padding: 4px;
	display: grid;
	align-items: center;
	border-radius: 3px;
}



/* hacky form class for extra top margin, sometimes you need it */

.extra-t-margin {
	margin-top: .75em;
}