/** @file CSS for styling form elements. */

main form { width: 100%; max-width: 700px; padding: 0 20px; margin: 0 auto; }

input { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
input:focus { outline: none; }
input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] {
    display: block; width: 100%; box-sizing: border-box; border: 1px solid #d5d5d5; font-family: 'apclight', sans-serif; font-size: 16px; line-height: 24px; padding: 12px 15px; margin-bottom: 0; }
input[type=checkbox], input[type=radio] { width: 13px; height: 13px; }
input[type=checkbox] { opacity: 0; }
button, input[type="reset"], input[type="button"], input[type="submit"] { width: 100%; border: none; font-family: 'apclight', sans-serif; text-transform: uppercase; font-size: 16px; padding: 15px 25px; margin: 0; color: #ffffff; cursor: pointer;
    background-color: #7bb914;
    -moz-appearance: none; -webkit-appearance: none; appearance: none; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

form fieldset { border: none; margin: 0 0 15px; padding: 0; }
form fieldset legend { display: none; }

form .form-item { margin-bottom: 20px; }

.form-item label { display: block; padding-bottom: 5px; font-family: 'ecdmed', sans-serif; font-size: 13px; }
.form-item label.form-required::after { content: "*"; color: #7bb914; }

form .description { font-size: 12px; line-height: 16px; margin-top: 5px; }

form select { display: block; width: 100%; box-sizing: border-box; border: 1px solid #d5d5d5; border-radius: 0; font-family: 'apclight', sans-serif; font-size:16px; line-height: 24px; padding: 12px 20px; cursor: pointer;
    -webkit-appearance: none;
    background-color: #ffffff; background-image: url('../../images/downarrow.svg'); background-size: 15px; background-position: right 15px center; background-repeat: no-repeat; }

form textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid #d5d5d5; font-family: 'apclight', sans-serif; font-size: 16px; line-height: 24px; padding: 15px; }

form .js-form-type-checkbox label { position: relative; padding: 7px 0 9px 45px; color: #283d38; font-size: 13px; line-height: 20px; }
form .js-form-type-checkbox label::before, .js-form-type-checkbox label::after { display: inline-block; position: absolute; }
form .js-form-type-checkbox label::before { content: ""; height: 28px; width: 28px; border: 1px solid #d9d9d9; background: #ffffff; top: 0; left: 0; }
form .js-form-type-checkbox label::after { content: "";  height: 8px; width: 16px; border-left: 3px solid #52c0a7; border-bottom: 3px solid #52c0a7; transform: rotate(-45deg); top: 8px; left: 6px; }

form .js-form-type-checkbox input[type="checkbox"] + label::after { content: none; }
form .js-form-type-checkbox input[type="checkbox"]:checked + label::after { content: ""; }

a#edit-login-returning-customer-forgot-password { display: inline-block; margin: 20px 0; font-family: 'ecdmed', sans-serif; font-size: 14px; color: #7bb914; }
a#edit-login-returning-customer-forgot-password:hover { text-decoration: underline; } 

/** For individual form requirements **/

.form-branding { width: 140px; margin: 0 auto 40px; }

.field--type-datetime h4 { display: block; padding-bottom: 5px; font-family: 'ecdmed', sans-serif; font-size: 13px; }

#block-gencix-userregistrationform { margin-bottom: 100px; }