body {
    background-color: var(--dark-blue);
}


.main-content {
    background-color: white;
    border-radius: 5px;
    border: 1px solid transparent;
    margin-bottom: 5rem;
    margin-top: 5rem;
}



.inputLabel {
    font-weight: bold;
}


#logo {
width: 10rem;

}

/*Section API */
#api {
    margin: 0 auto;
    text-align: center;
}

    /*#api div.heading, #api label, a.helpLink {
        display: none;
    }*/

    #api div.heading > h1,
    #api div.entry-item > label,
    #api div.password-label > label {
        display: none;
    }


    .intro > h2 {
        font-size: 16pt;
    }

div.rememberMe {
    bottom: 20px;
    position: relative;
    float: right;
    width: 50%;
    margin-bottom: 2rem;
    text-align: right;
}



input#email,
input#password {
    margin-bottom: 16px;
    width: 100%;
    padding: 6px 20px;
    height: 50px;
}

div.password-label {
    width: 50%;
    text-align: left;
}

button#next {
    width: 100%;
}


div.error {
    color: red;
    display:none;
}



.buttons > button {
    font-family: var(--font-family-primary);
    font-size: var(--font-size4);
    font-weight: var(--peso2);
    text-transform: uppercase;
    color: var(--white);
    background-color: var(--intense-blue);
    border: solid 1px var(--intense-blue);
    border-radius: 40px;
}

.buttons > button:hover {
    font-family: var(--font-family-primary);
        font-size: var(--font-size4);
        font-weight: var(--peso2);
        text-transform: uppercase;
        color: var(--intense-blue);
        background-color: var(--white);
        border: solid 1px var(--intense-blue);
        border-radius: 40px;
}



.buttons button[aria-disabled=true] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size4);
    font-weight: var(--peso2);
    text-transform: uppercase;
    color: var(--white);
    background-color: var(--intense-blue);
    border: solid 1px var(--intense-blue);
    border-radius: 40px;
        cursor: no-drop;
        opacity: .3;
}