@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

/**
GENERIC
**/

html {
    -webkit-font-smoothing: antialiased !important
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #3f3f3f;
}

#main {padding-top: 65px;}


/* NAV LEFT */
.nav-left {
    width: 220px;
}

.nav-left > li > a {
    display: block;
    width: 190px 9;
    margin: 0 0 -1px;
    padding: 8px 14px;
    border: 1px solid #E5E5E5;
}

.nav-left > li > a > .icon-chevron-right {
    float: right;
    margin-top: 2px;
    margin-right: -6px;
    opacity: .25;
}

.nav-left > li:first-child > a {
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.nav-left > li:last-child > a {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.nav-left .active > a > .icon-chevron-right {
    opacity: 1.0;
}

.navbar-brand > img {
    max-width: 50px;
    width: auto;
}
/**
LOGIN
**/

.login {
    background: #004a99;
}

.login .wrapper {
    width: 400px;
    height: 500px;
    margin: -200px -200px;
    position: absolute;
    left: 50%;
    top: 50%
}

.login .wrapper h1 > a {
    color: #fff;
    display: block;
    font-weight: 300;
    font-size: 48px;
    text-align: center;
    padding: 2px 0;
    text-decoration: none
}

.login .wrapper h1 > a img {
    margin-right: 20px;
    margin-top: -8px
}

.login .wrapper .login-body {
    margin-top: 20px;
    background: #fff
}

.login .wrapper .login-body form {
    padding: 0 30px
}

.login .wrapper .login-body h2 {
    font-weight: 300;
    color: #333;
    font-size: 24px;
    padding: 20px 30px 5px 30px
}
.login .wrapper .login-body .email input {
    margin-bottom: 15px;
}
.login .wrapper .login-body .email input, .login .wrapper .login-body .pw input {
    padding: 8px 12px;
    height: 35px
}

.login .wrapper .login-body .submit {
    margin-top: 15px;
    *zoom: 1
}

.login .wrapper .login-body .submit:after {
    content: "";
    display: table;
    clear: both
}

.login .wrapper .login-body .submit input {
    float: right
}

.login .wrapper .login-body .submit .remember {
    float: left;
    margin-top: 5px;
    margin-left: 1px
}

.login .wrapper .login-body .submit .remember [class*=icheckbox], .login .wrapper .login-body .submit .remember label {
    float: left
}

.login .wrapper .login-body .submit .remember label {
    margin-left: 10px
}

.login .wrapper .login-body .forget {
    margin-top: 50px
}

.login .wrapper .login-body .forget a {
    background: #eee;
    padding: 10px 0;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #555
}

.login .wrapper .login-body .forget a:hover {
    background: #ddd
}

.login .wrapper .login-body .forget a span {
    line-height: 30px;
    margin-bottom: 10px;
    position: relative
}

.login-logo {
    max-width: 250px;
    height: auto;
}

/**
LABELS (FOR DISPLAYING SYSTEM COLOURS)
 */
.label-primary {background-color: var(--primary-colour);}
.label-info {background-color: var(--alert-info); color: var(--alert-info-dark);}
.label-success {background-color: var(--alert-success); color: var(--alert-success-dark);}
.label-danger {background-color: var(--alert-danger); color: var(--alert-danger-dark);}
.label-warning {background-color: var(--alert-warning); color: var(--alert-warning-dark);}

.copy-colour {
    background-color: var(--copy-colour);
    color: var(--white);
}
.form-help-colour {
    background-color: var(--form-help-text);
    color: var(--white);
}
.link-colour {
    background-color: var(--primary-colour);
    color: var(--white);
}
.active-link-colour {
    background-color: var(--primary-colour-hover);
    color: var(--white);
}

.label-info-border {
     background-color: var(--alert-info-dark);
     color: var(--white);
 }
.label-success-border {
    background-color: var(--alert-success-dark);
    color: var(--white);
}
.label-danger-border {
    background-color: var(--alert-danger-dark);
    color: var(--white);
}
.label-warning-border {
    background-color: var(--alert-warning-dark);
    color: var(--white);
}