/**
 * Used by /admissions/enquiry/index.html.
 */

/* main enquiry div */
#enquiry {
    position: relative;
    min-height: 100%;  /* full height while loading */
    z-index: 0;  /* make sure all WTK components are below the header and subheader */
    opacity: 0;  /* hide first */
}

/* overview section */
#enqOverview {
    position: relative;
    padding-bottom: 30px;
}
#enqOverview .enq-description {
    position: relative;
    width: 100%;
    padding-right: 500px;
    min-height: 150px;
}

/* navigation */
#enqNav {
    position: absolute;
    left: 0px;
    top: 108px;
    width: 100%;
    padding-top: 60px;
    z-index: 3;
}
#enqNav .box {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 480px;
    padding-top: 25px;
    padding-right: 20px;
    line-height: 1.5em;
    white-space: nowrap;
}
#enqNav .title {
    font-size: 30px;
    font-weight: 200;
    color: #808080;
}
#enqNav .links {
    position: relative;
    margin-top: 30px;
}
#enqNav .links .link {
    position: relative;
    margin: 5px 0px;
}
#enqNav.float {
    position: fixed;
    top: 60px;
}

/* terms and conditions section */
.terms-condition {
    margin-top: 30px;
    max-width: 505px;
}
.terms-condition .box {
    position: relative;
    display: block;
    padding: 6px;
    border-radius: 9px;
    background-color: #EEEEEE;
}
.terms-condition .box .box-container {
    position: relative;
    border: 1px solid #B0B0B0;
    background-color: #FFFFFF;
    height: 220px;
    border-radius: 6px;
}
.terms-condition-content {
    font-size: 15px;
}
.terms-condition-content .title {
    font-size: 16px;
    font-weight: 600;
}
.terms-condition-content p,
.terms-condition-content ol {
    margin: 16px 0px;
}

.terms-condition-content p.top {
    margin-top: 0px;
}

.terms-condition-checkbox {
    position: relative;
    margin-top: 10px;
    max-width: 505px;
}

/* buttons section */
#buttonsSection {
    padding: 60px 0px;
    text-align: center;
    border-top: 1px solid #CCCCCC;
}


/* form styles */
.form-section {
    position: relative;
    margin-top: 80px;
    margin-bottom: 60px;
    max-width: 550px;
}
.form-section:first-child {
    margin-top: 0px;
}

.form {
    position: relative;
}

.form-title {
    position: relative;
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3em;
    margin: 20px 0px;
    text-align: left;
}
.form-title-description {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3em;
    margin: 20px 0px;
    text-align: left;
}

.form-field {
    position: relative;
    margin: 0px 0px;
    width: 100%;
    max-width: 505px;
    padding-right: 105px;
}

.form-field .field-label-line {
    position: relative;
    margin-top: 15px;
    margin-bottom: 5px;
}
.form-field .field-label {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5em;
}
.form-field .field-desc-label-line {
    position: relative;
    margin: 5px 0px;
    line-height: 1em;
}
.form-field .field-desc-label {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    line-height: 1.5em;
}
.form-field .field-component-line {
    position: relative;
    margin: 5px 0px;
    line-height: 0px;
}
.form-field .field-component {
    position: relative;
    display: block;
    padding: 6px;
    border-radius: 9px;
    background-color: #EEEEEE;
}
.form-field .field-component.inline {
    display: inline-block;
}
.form-field .field-component .form-field-container {
    position: relative;
    border: 1px solid #B0B0B0;
    background-color: #FFFFFF;
    border-radius: 6px;
}

.form-field .label-field {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3em;
    margin: 10px 0px;
    text-align: left;
}
.form-field .field-indicator.for-label-field {
    bottom: auto;
    top: 5px;
}

.form-field .field-indicator {
    position: absolute;
    display: inline-block;
    right: 0px;
    bottom: 12px;
    height: 18px;
    width: 76px;
    border-radius: 0px 1000px 1000px 0px;
    padding-right: 2px;
    background-color: #808080;
}
.form-field .field-indicator .pointer {
    position: absolute;
    display: inline-block;
    width: 0px;
    height: 0px;
    border: 9px solid transparent;
    left: -18px;
    border-right: 9px solid #808080;
}
.form-field .field-indicator .label {
    position: relative;
    display: block;
    line-height: 19px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}
.form-field.text-area .field-indicator {
    bottom: 88px;
}
.form-field .field-indicator.mandatory {
    background-color: #006CCC;
}
.form-field .field-indicator.mandatory .pointer {
    border-right-color: #006CCC;
}

/* focused field  */
.form-field.focused .field-component .form-field-container {
    border-color: transparent !important;
}
.form-field.focused .field-indicator {
    background-color: #0082FF !important;
}
.form-field.focused .field-indicator .pointer {
    border-right-color: #0082FF !important;
}

/* valid field */
.form-field.valid .field-indicator {
    background-color: #00C83C;
}
.form-field.valid .field-indicator .pointer {
    border-right-color: #00C83C;
}

/* invalid field */
.form-field.invalid .field-component {
    background-color: #FFBCCB;
}
.form-field.invalid .field-component .form-field-container {
    border-color: #FF615F;
}
.form-field.invalid .field-indicator {
    background-color: #F02337;
}
.form-field.invalid .field-indicator .pointer {
    border-right-color: #F02337;
}
.form-field.invalid .label-field {
    color: #C6001C;
}


.field-error-message {
    display: none;
    position: relative;
    margin: 6px 0px;
    line-height: 1em;
    font-size: 15px;
    color: #F02337;
}

.field-separator {
    position: relative;
    height: 40px;
}

.field-header {
    position: relative;
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3em;
    margin: 20px 0px;
    text-align: left;
}
.field-header > span {
    position: relative;
    display: inline-block;
    padding-bottom: 1px;
    border-bottom: 1px solid #303030;
}

.field-subheader {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3em;
    margin: 20px 0px;
    text-align: left;
}

/**** CSS media queries ****/
@media (max-width: 1120px) {
    #enqOverview .enq-description {
        padding-right: 220px;
    }
    #enqNav .box {
        width: 240px;
        right: 0;
    }
}
@media (max-width: 860px) {
    #enqOverview .enq-description {
        padding-right: 0px;
        min-height: 0px;
    }
    #enqNav {
        display: none;
    }
}

@media (max-width: 600px) {
    #enqOverview {
        padding-bottom: 20px;
    }
    
    .terms-condition {
        margin-bottom: 30px;
    }
    .terms-condition-content {
        font-size: 14px;
    }
    .terms-condition-content .title {
        font-size: 15px;
    }
    
    #buttonsSection {
        padding: 40px 0px;
    }
    
    .form-section {
        margin-top: 60px;
    }
    .form-title {
        font-size: 25px;
        margin: 12px 0px;
    }
    .form-title-description {
        font-size: 16px;
        margin: 12px 0px;
    }
    .form-field .field-label {
        font-size: 16px;
    }
}

@media (max-width: 440px) {
    .form-field {
        padding-right: 0px;
    }
    .form-title {
        font-size: 22px;
        margin: 10px 0px;
    }
    .form-field.no-label.has-indicator {
        padding-top: 18px;
    }
    .form-field .field-label {
        padding-right: 74px;
    }
    .form-field .field-indicator {
        width: 70px;
        bottom: auto;
        top: 2px;
        padding: 0px;
        border-radius: 1000px;
        height: 17px;
    }
    .form-field .field-indicator .label {
        line-height: 18px;
        font-size: 10px;
    }
    .form-field .field-indicator .pointer {
        display: none;
    }
}