/* ############################################################################
   ##
   ##  Subscribe Module - Inline Styles
   ##
   ##  Subscribe module elements that are displayed within regular page templates.
   ##
   ######################################################################### */

/* 
    Subscription Form Widget - Form
    (The form might appear inside .subscriptionFormSubmission - see below.)
*/

.subscribeForm {
}

    .subscribeForm fieldset {
    }

        .subscribeForm fieldset legend {
        }

        .subscribeForm fieldset ol.formFields {
        }
        
            .subscribeForm fieldset ol.formFields li.fieldContainer {
            }

                .subscribeForm fieldset ol.formFields li.fieldContainer .fieldTitle {
                }

                .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent {
                }

                    .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent .fieldControls {
                    }

                        .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent .fieldControls input {
                        }

        .subscribeForm #MailingListsContainer {
            /* Mailing lists field */
        }

            .subscribeForm #MailingListsContainer .fieldTitle {
            }

            .subscribeForm #MailingListsContainer .fieldContent {
            }
            
                .subscribeForm #MailingListsContainer .fieldContent fieldset {
                }

                    .subscribeForm #MailingListsContainer .fieldContent fieldset legend {
                    }

                    .subscribeForm #MailingListsContainer .fieldContent fieldset label {
                        /* Mailing lists checkboxes */
                    }

        .subscribeForm fieldset.submitButtons {
        }

            .subscribeForm fieldset.submitButtons legend {
            }
            
            .subscribeForm fieldset.submitButtons .submitButton {
            }
            
/* 
    Subscription Form Widget - Form Submission Message
    (The form might appear inside .subscriptionFormSubmission - see below.)
*/

.subscribeFormSubmission  {
}

.subscribeFormSubmission.validationError {
}

    .subscribeFormSubmission.validationError .messageError {
    }

    .subscribeFormSubmission.validationError .subscribeForm {
    }

.subscribeFormSubmission.validationSuccess {
}

    .subscribeFormSubmission.validationSuccess .messageInformation,
    .subscribeFormSubmission.validationSuccess .messageConfirm {
    }

/*
    Simple Subscribe Form 
    - Only the email field is shown
*/

.simpleSubscribeForm {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background: #f0f0f0;
}

    .simpleSubscribeForm .subscribeForm {
        position: relative;
    }

        .simpleSubscribeForm .subscribeForm fieldset {
            padding: 0 !important;
            border: 0 !important;  
            margin: 0 !important;
        }

            .simpleSubscribeForm .subscribeForm fieldset legend {
                position: absolute;
                left: -10000em; /* For accessibility - move it, don't hide it */
            }

            .simpleSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer {
                display: none; /* We'll only show the email and subscription field containers, turn them on below. */
                margin: 0 0 5px !important;
            }

                .simpleSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldTitle {
                    position: absolute;
                    left: -10000em; /* For accessibility - move it, don't hide it */
                    z-index: 1;
                }

                .simpleSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent {
                    width: 100%;
                    max-width: 100%;
                    padding: 0;
                    background: none;
                    border-radius: 0;
                }

                    .simpleSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent label:last-child {
                        margin-bottom: 0 !important
                    }

        .simpleSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer.emailField {
            display: block;
        }

            .simpleSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent .fieldControls {
                padding-right: 176px;
            }

        .simpleSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer.mailingListOptions {
            display: block;
            margin-bottom: 0 !important;
        }

            .simpleSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer.mailingListOptions .fieldTitle {
                position: absolute;
                left: -10000em; /* For accessibility - move it, don't hide it */
            }

        .simpleSubscribeForm .subscribeForm fieldset.submitButtons {
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block !important;
            width: auto !important;
        }

/*
    Horizontal Subscribe Form
*/

.horizontalSubscribeForm {
}

    .horizontalSubscribeForm .subscribeForm {
        position: relative;
    }

        .horizontalSubscribeForm .subscribeForm fieldset {
            padding: 0 !important;
            margin: 0 !important;
            width: 75% !important;
            min-width: 0;
            line-height: normal;
            background: none;
            border: 0 !important;
            border-radius: 0;
        }

            .horizontalSubscribeForm .subscribeForm fieldset legend {
                position: absolute;
                left: -10000em; /* For accessibility - move it, don't hide it */
            }

            .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer {
                clear: none;
                width: 32% !important;
                margin: 0 2% 0 0;
            }

            .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li#Field003Container {
                margin-right: 0;
            }

            .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldTitle {
                position: absolute;
                left: -10000em; /* For accessibility - move it, don't hide it */
                z-index: 1;
            }

            .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent {
                width: 100%;
                max-width: 100%;
                padding: 0;
                background: none;
                border-radius: 0;
            }

                .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent label:last-child {
                    margin-bottom: 0 !important
                }

                .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent .fieldControls {
                }

                    .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent .fieldControls input {
                        position: relative;
                        padding: 20px 15px;
                        color: #181828;
                        font-size: 100%;
                        line-height: 100%;
                        border: 0;
                        border-radius: 3px;
                        transition: all 100ms ease-out;
                    }

                        .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer .fieldContent .fieldControls input ::placeholder {
                            opacity: 0.5;
                        }

            .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li#Field001Container {
                /* First Name */
            }

            .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li#Field002Container {
                /* Last Name */
            }

            .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li#Field003Container {
                /* Email Address */
            }

            .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer.mailingListOptions {
                display: block;
                width: 100% !important;
                margin-bottom: 0 !important;
            }

                .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer.mailingListOptions .fieldTitle {
                    position: absolute;
                    left: -10000em; /* For accessibility - move it, don't hide it */
                }

            .horizontalSubscribeForm .subscribeForm fieldset.submitButtons {
                float: right;
                width: 25% !important;
                padding-left: 2% !important;
            }

                .horizontalSubscribeForm .subscribeForm fieldset.submitButtons .submitButton {
                    width: 100%;
                    padding: 21px 15px;
                    font-size: 100%;
                    line-height: 100%;
                    border-radius: 3px;
                }

@media screen and (max-width: 600px) {

    .horizontalSubscribeForm .subscribeForm fieldset {
        width: 100% !important;
    }

        .horizontalSubscribeForm .subscribeForm fieldset.submitButtons {
            width: 100% !important;
            padding-left: 0 !important;
        }

        .horizontalSubscribeForm .subscribeForm fieldset ol.formFields li.fieldContainer {
            width: 100% !important;
            margin: 0 0 10px !important;
        }
}

/*
    When there's only one list and it's pre-selected, you might want to make the checkbox field invisible.
*/
.hideLists .subscribeForm fieldset ol.formFields li.fieldContainer.mailingListOptions {
    position: absolute;
    left: -10000em; /* For accessibility - move it, don't hide it */
}