/* Login page styles - dark theme, in contrast to rest of app */
/* Note: Attempt to non-invasively "break out" of the Bootstrap markup
   used in the rest of the app as a demonstration. As such, it works
   "against" Bootstrap, not "with" it like a Bootstrap Theme would. */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

div.login {
    color: #CCC;
    background-color: #38373A;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: 10;
    animation: 0.2s fadeIn ease-out;
    font-size: 1.3em;
    background-image: url(../../img/login/bg-login-topright.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 80%;
}

div.login * {
    box-sizing: border-box;
}

div.login:after {
    display: block;
    content: '';
    position: absolute;
    height: 40%;
    width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(../../img/login/bg-login-bottom.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 80%;
    z-index: -1;
}

div.login input {
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
}

div.login .form-group {
    border-bottom: 1px solid #777;
    max-width: 15em;
    white-space: nowrap;
    padding: 0.25em;
}

div.login label {
    display: none;
}

div.login .form-group.has-error .glyphicon {
    transform: translateY(-2em);
}

div.login form {
    margin-top: 15%;
    width: 40em;
    height: 30%;
    min-height: 300px;
    /* border: 1px solid red; */
    margin-left: auto;
    margin-right: auto;
    padding-left: 17em;
    background-image: url(../../img/gts-logo.svg);
    background-repeat: no-repeat;
    background-size: 15em;
    background-position: left top;
}

div.login .username-password .actions:after {
    display: block;
    content: 'global trade solution';
    letter-spacing: 6px;
    font-size: 0.7em;
    font-weight: bold;
    color: white;
    white-space: nowrap;
    margin-top: 4em;
}

div.login .username-password i {
    height: 1.45em;
    padding-right: 1.25em;
    margin-right: -0.5em;
    color: white;
}

div.login .username-password .actions button {
    display: block;
}

div.login .username-password .actions button.forgot-password {
    border: none;
    background: none;
    padding: 0;
    margin: 2em 0 1em 0;
    color: #777;
    font-style: italic;
}

div.login .username-password .actions button.forgot-password:hover {
    border: none;
    background: none;
    color: #B8E50C;
}

div.login button.login,
div.login button.back,
div.login button.reset
{
    background: none;
    border: 1px solid #B8E50C;
    padding-left: 2em;
    padding-right: 2em;
    color: #CCC;
}

div.login button.login:active,
div.login button.back:active,
div.login button.reset:active
{
    background: none;
}