.loginForm {
    composes: borderRadius from 'HPCCloudStyle/Theme.mcss';
    border: 1px solid grey;
    text-align: center;
    width: 35%;
    padding: 20px 0 15px;
    display: inline-block;
    margin-top: 12px;
}

.loginWidth {
    width: 90%;
}

.loginInput {
    composes: loginWidth;
    composes: input from 'HPCCloudStyle/ItemEditor.mcss';
    margin: 3px auto 0;
}

.loginButton {
    composes: loginWidth;
    composes: button from 'HPCCloudStyle/ItemEditor.mcss';
    background-color: #444;
    color: white;
    margin: 3px auto;
}

.loginButton:hover, .loginButton:active,
.loginButton:focus, .loginButton[disabled]:hover {
    color: white;
    background-color: #555;
}

.header {
    margin-top: 10px;
}

.topIcon {
    composes: fa                from 'font-awesome/css/font-awesome.css';
    composes: fa-cloud-download from 'font-awesome/css/font-awesome.css';
    font-size: 150px;
}

.subtitle {
    composes: lightText from 'HPCCloudStyle/Theme.mcss';
    font-size: 1.25em;
    margin: 10px auto;
}

.forgotPassword {
    composes: loginWidth;
    text-align: left;
    margin: 0 auto;
    font-size: 0.85em;
}

.box {
    composes: loginWidth;
    margin: 16px auto 0;
}

.errorBox {
    composes: box;
    composes: errorBox from 'HPCCloudStyle/Theme.mcss';
}

.warningBox {
    composes: box;
    composes: warningBox from 'HPCCloudStyle/Theme.mcss';
}

.forgetCloudIcon {
    composes: fa                from 'font-awesome/css/font-awesome.css';
    composes: fa-fw             from 'font-awesome/css/font-awesome.css';
    composes: fa-cloud-download from 'font-awesome/css/font-awesome.css';

    font-size: 150px;
}

.sendIcon {
    composes: fa                        from 'font-awesome/css/font-awesome.css';
    composes: fa-fw                     from 'font-awesome/css/font-awesome.css';
    composes: fa-arrow-circle-o-right   from 'font-awesome/css/font-awesome.css';
}

@media screen and (max-width: 700px) {
    .loginForm {
        width: 70%;
    }
}

@media screen and (max-width: 400px) {
    .loginForm {
        width: 100%;
    }
}