html {
    background-color: black;
}

body {
    padding: 30px 0 20px 0;
    color: whitesmoke;
    background-color: black;
}

body, html {
    overflow-x: hidden;
}

/* Set padding to keep content from hitting the edges */

.header-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .header-section img {
        margin: auto;
        margin-left: 0;
        display: block;
        max-width: 90vw;
        max-height: 16vh;
        width: auto;
        height: auto
    }

.footer-section img {
    width: 33vw;
    height: 33vw;
    margin: auto;
    display: block;
}

.intro, .entry, .divider, .create {
    text-align: center;
}

.create {
    margin-top: 14vw;
    font-size: 4vw
}

.divider {
    display: none
}

button {
    padding: 1vw;
    color: #ffffff;
    background-color: #5cb85c;
    border: 0
}

    button:hover,
    button:focus,
    button:active,
    button.active,
    .open .dropdown-togglebutton {
        color: #ffffff;
        background-color: #47a447;
        border: 0;
    }

    button:active,
    button.active,
    .open .dropdown-togglebutton {
        background-image: none;
    }

    button.disabled,
    button[disabled],
    fieldset[disabled] button,
    button.disabled:hover,
    button[disabled]:hover,
    fieldset[disabled] button:hover,
    button.disabled:focus,
    button[disabled]:focus,
    fieldset[disabled] button:focus,
    button.disabled:active,
    button[disabled]:active,
    fieldset[disabled] button:active,
    button.disabled.active,
    button[disabled].active,
    fieldset[disabled] button.active {
        background-color: #5cb85c;
        border: 0;
    }


.intro {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: whitesmoke;
    font-size: 4vw;
    display: flex;
    width: 85%;
    margin-bottom: 2vw;
    justify-content: center
}

    .intro > h2 {
        font-size: 4.3vw;
    }

    .intro > p {
        margin-left: 12%
    }

.footer-section, .intro {
    margin-top: 5vw
}

.error {
    display: none;
}

#forgotPassword {
    clear: right;
    cursor: pointer;
    font-size: 4.5vw;
    position: relative;
    top: 43vw;
    left: 0vw;
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

    .header-section img {
        margin: auto;
        display: block;
        width: 70vw;
        height: 19vh;
    }
}


#logonIdentifier,
#password,
#signInName {
    background-color: #fff !important;
    border: 1px solid #ccc;
    border-radius: 2px !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
    color: #555;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s !important;
}

label {
    margin: 15px 20px;
}

.password-label > label {
    padding-left: 110px;
}

#createAccount {
    padding-left: 7px;
}

/*SignUp*/

.sendButton, .verifyButton, .editButton, .defaultButton,
#continue, #cancel {
    height: 7.3vw;
    font-size: 3.8vw;
    margin: 1vw 0 2vw 0;
    border-radius: 1.2vw
}

.sendButton, .verifyButton, .editButton, .defaultButton {
    width: 42vw;
}

.pageLevel {
    margin-left: 10%
}

#continue {
    margin-right: 3vw;
    width: 37vw;
    margin-left: 10%
}

#cancel {
    background-color: #db524b !important;
    border: 0;
    width: 32vw;
}

.attrEntry {
    margin-bottom: 2.8vw;
}

    .attrEntry > label, .entry-item label {
        display: none
    }

    .attrEntry input {
        width: 75vw;
        height: 8.4vw;
    }

        .attrEntry input, .attrEntry input::-webkit-input-placeholder {
            font-style: italic;
            font-size: 3.8vw;
            padding-left: 2vw
        }

            .attrEntry input, .attrEntry input::-moz-placeholder {
                font-style: italic;
                font-size: 3.8vw;
                padding-left: 2vw
            }

                .attrEntry input, .attrEntry input::-ms-input-placeholder {
                    font-style: italic;
                    font-size: 3.8vw;
                    padding-left: 2vw
                }

.helpLink {
    display: none
}

#email_ver_input {
    margin-bottom: 2.8vw
}

.verify {
    margin-top: 2.8vw
}

li {
    list-style-type: none
}

ul {
    margin: 0;
    padding: 0
}

.attr {
    margin-left: 9%
}

.verificationErrorText {
    width: 75vw
}

/*login*/

.entry input {
    width: 75vw;
    height: 10vw;
    margin-bottom: 2vw;
}

    .entry input, .entry input::-webkit-input-placeholder {
        font-style: italic;
        font-size: 3.4vw;
        line-height: 9vw !important;
        padding-left: 2vw;
        margin: 0;
    }

        .entry input, .entry input::-moz-placeholder {
            font-style: italic;
            font-size: 3.4vw;
            line-height: 3.6vw;
            margin: 0;
            padding-left: 2vw;
            overflow: visible;
        }

            .entry input, .entry input::-ms-input-placeholder {
                font-style: italic;
                font-size: 3.4vw;
                line-height: 3.6vw;
                margin: 0;
                padding: 2vw;
                overflow: visible;
            }

#next {
    width: 66vw;
    height: 12vw;
    font-size: 5.5vw;
    padding: 0;
    margin: 7vw 0 2vw 0;
    border-radius: 1.2vw
}

.localAccount {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
}

a:focus {
    outline: none !important
}

.container {
    padding-right: 10vw !important
}