/* ==========================================================================
   Login
   ========================================================================== */

body.nsp-login {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: #004c97;
    font-family: 'Noto Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 13px;
    line-height: 24px;
    color: #333;
    padding: 0 20px;
}

    body.nsp-login a {
        text-decoration: none;
        color: #0072ce;
    }

    body.nsp-login table {
        width: 100%;
    }

    body.nsp-login .login-footer {
        text-align: center;
        color: #fff;
        margin-top: 10px;
        padding: 0;
    }

        body.nsp-login .login-footer a {
            color: #fff;
        }

    body.nsp-login hr {
        height: 1px;
        border: none;
        border-top: 1px solid #dfdfdf;
        /*margin: 0.5em; /* reset to browser default for login page */
    }

/* ==========================================================================
   Move to main styles
   ========================================================================== */
.nsp-module.middle-module {
    width: 460px;
    margin: 0 auto 0;
    padding: 20px 50px;
    min-height: 350px;
}

.nsp-button.full {
    width: 100%;
}

/* ==========================================================================
   Angular form input error styles
   ========================================================================== */
.ng-submitted input.ng-invalid:not([type=range]):not([type="radio"]):not([type="checkbox"]),
.ng-submitted div.ng-invalid,
.ng-submitted textarea.ng-invalid,
input.ng-invalid.ng-dirty:not([type=range]):not([type="radio"]):not([type="checkbox"]),
div.ng-invalid.ng-dirty,
textarea.ng-invalid.ng-dirty,
.ng-dirty.ng-invalid > div.selectize-input,
.ng-submitted .ng-invalid > div.selectize-input {
    border: 1px solid #e73232 !important;
    color: #e73232;
    -webkit-box-shadow: 0 0 5px #ec6060 !important;
    -moz-box-shadow: 0 0 5px #ec6060 !important;
    box-shadow: 0 0 5px #ec6060 !important;
}

.ng-submitted select.ng-invalid,
select.ng-invalid.ng-dirty {
    border: 1px solid #e73232 !important;
    -webkit-box-shadow: 0 0 5px #ec6060 !important;
    -moz-box-shadow: 0 0 5px #ec6060 !important;
    box-shadow: 0 0 5px #ec6060 !important;
}

/* ==========================================================================
    Transition Testing
   ========================================================================== */

/* start 'enter' transition */
.animate.drop-in.ng-enter {
    position: relative;
    /* transition on enter for .4s */
    transition: top .3s ease-out, opacity .3s linear;
    /* start with opacity 0 (invisible) */
    opacity: 0;
    /* start positioned higher (drop-in) */
    top: -10px;
}

/* end 'enter' transition */
.animate.drop-in.ng-enter-active {
    /* end with opacity 1 (fade in) */
    opacity: 1;
    /* end at natural position */
    top: 0;
}


.animate.expand.ng-enter {
    transition: max-height 1s ease, opacity .3s linear;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.animate.expand.ng-enter-active {
    opacity: 1;
    max-height: 300px;
}


.nsp-input label .material-icons {
    font-size: 16px;
    vertical-align: middle;
    color: #004c97;
}