/* reset webkit search input styles */

input[type=search] {
    -webkit-appearance: none;
    outline: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* field errors */

.error {
    background: #faeda2;
    border: none;
    padding: 10px;
    border-radius: 5px;
    color: #b91701;
}


.errorlist {
    padding: 0px;
    list-style: none;
    margin: 0px;
}

.errorlist > li {
    background: ;
    border: none;
    font-style: italic;
    color: #bd3434;
    margin: 5px 0px;
}

/* form fieldset defaults */

form fieldset {
    padding: 1% 2.5%;
    border: none;
    background: #e9e9e9;
    border-radius: 5px;
    margin-top: 20px;
    width: 95%;
}

/* top level inputs... */

form ul {
    margin: 0;
    padding-left: 0;
    list-style: none outside none;
}

form ol {
    padding-left: 15px;
}

/* li's with floated elements should ideally use the .group class to
 * clear floats. otherwise, set a height for them */

form ul li {
    margin: 5px 0;
}

/* form elements */

form label {
    min-width: 80px;
    width: 20%;
    float: left;
    display: block;
    margin: 5px 0px;
    color: #333333;
}

form input,
form textarea {
    display: inline-block;
}

form select {
    width: 100%;
}

/* input types so we don't affect checkboxes or radios etc. */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
    border: 1px solid #bbbbbb;
    padding: 10px;
    width: 88%;
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: calc(100% - 20px);
}

/* hover effects */

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
    border: 1px solid #ffa167;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset, 0 0 6px rgba(255, 100, 0, 0.4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset, 0 0 6px rgba(255, 100, 0, 0.4);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset, 0 0 6px rgba(255, 100, 0, 0.4);
    outline: none;
}

textarea {
    height: 70px;
}

/* in the event that a element follows a label, reduce its width */

label + input[type="text"],
label + input[type="password"],
label + input[type="email"],
label + input[type="number"],
label + textarea,
label + select {
    width: 75.5%;
}

/* the submit button */

input[type="submit"] {
    border: none;
    border-radius: none;
    outline: none;
    float: right;
}

/* second level inputs */

form ul li ul li {
    clear: none;
}

/* second level labels... */

form ul li ul li label,
form ul li.understanding label {
    width: auto;
}

/* radio labels... */

form ul li.radio ul li label {
    width: 33%;
}

form ul li.radio ul li input {
    margin-right: 5px;
    position: relative;
    top: 2px;
}

/* understanding checkbox */

form ul li.understanding ol {
    margin-bottom: 10px;
}

form ul li.understanding label[for="id_understand"] {
    font-weight: 600;
}

form ul li.understanding input#id_understand {
    margin: 8px 0 0 10px;
}

/* dependents list ... */

form ul li ul.dependents {
    margin-bottom: 20px;
}

/* declaration list labels... */

form ul li.declaration label {
    float:  none;
    width: auto;
}

form ul li.declaration label[for="id_proof"] {
    float: left;
    font-weight: 600;
}

form ul li.declaration input#id_proof {
    margin: 8px 0 0 10px;
}

/* eligibility list */

form ul li.declaration ul.eligibility ol {
    list-style: upper-alpha outside none;
}

form ul li.declaration ul.eligibility li.intend_use input {
    float: left;
    margin-top: 5px;
}

form ul li.declaration ul.eligibility li.intend_use label {
    float: left;
    width: 80%;
    margin: 0 0 0 10px;
    font-weight: 600;
}

form ul li.declaration ul.eligibility li.eligible_enrol input#id_eligible_enrol {
    float: left;
    margin-top: 5px;
}

form ul li.declaration ul.eligibility li.eligible_enrol label[for="id_eligible_enrol"] {
    float: left;
    width: 80%;
    margin: 0 0 0 10px;
    font-weight: 600;
}


/* column styles for forms */

form .twocol {
    width: 49%;
    float: left;
    padding: 0;
}

form .twocol.first {
    margin-right: 1%;
}

/* date of birth and expiry select elements */

form li.birth-date,
form li.expiry-date {
    margin-top: 4px;
}

form li.birth-date label,
form li.expiry-date label {
    float: none;
    font-size: 11px;
    margin-top: 0;
    margin-bottom: 3px;
}

form li.birth-date select {
    width: 31%;
    margin-right: 1%;
}

form li.expiry-date select {
    width: 49%;
    margin-right: 1%:
}


/* the appointment form */

form.appointment-form ul li label {
    float: none;
    width: auto;
}

form.appointment-form ul li ul li label {
    float: left;
    width: 20%;
    margin: 0;
}

form.appointment-form select {
    width: 100%;
}

form.appointment-form input[type="radio"] {
    position: relative;
    top: 2px;
}

form.appointment-form input[type="submit"] {
    width: 100%;
    text-align: center;
    float: none;
}


/* feedback form */

form.feedback ul li.radio ul li label {
    width: 13.5%;
}

form.feedback label {
    width: 30%;
    margin-right: 3%;
}

form.feedback ul li.reasons ul {
    padding-left: 200px;
}

form.feedback ul li.reasons ul li label {
    width: 44.5%;
}


/* registration form */

form#registration-form li.home-phone {
    clear: left;
}