/* Reference: http://www.bootstrapzen.com/item/135/simple-login-form-logo/ */

@font-face {
    font-family: "Futura Medium";
    src: url('/javax.faces.resource/fonts/Futura-Medium.ttf.xhtml');
}

.ui-inputfield, .ui-button, .ui-password-icon {
    font-size: 2rem !important;
}
table.panelGridNoBorders tr, table.panelGridNoBorders td {
    border: none !important;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    font-weight: normal;
    color: #333;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}
span.ui-password {
    width: 100%;
}
#j_password_mask {
    line-height: 0.6;
}
h1 {
    font-size: 40px;
    font-weight: lighter;
    margin-top: 0;
}
h6 {
    font-size: 16px;
    color: #999;
    font-weight: lighter;
}

.site-login {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 100vh;
}
.login-form-wrapper {
    grid-column: 1 / 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
}
.login-img-wrapper {
    grid-column: 4 / 7;
    /*background-color: #0F92CE;*/
    /*background: linear-gradient(to top, #055c86, #0f92ce);*/
    display: flex;
}
.login-img-wrapper img {
   max-height: 600px;
    max-width: 800px;
    margin: auto;
}
.login-form {
    width: 50%;
}
.login-headline {
    text-align: center;
    font-weight: lighter;
    margin-bottom: 8rem;
}
.login-footer {
    display: flex;
    width: 80%;
    margin-top: auto;
    color: #999;
    font-size: small;
    justify-content: space-between;
}
.login-footer a {
    color: #999;
}
.login-footer a:hover {
    color: #0f92ce;
    text-decoration: none;
}
.login-footer div {
    display: grid;
    grid-template-rows: repeat(3, 20px);
}


.form-control {
    color: #333!important;
    box-shadow: none!important;
    border-radius: 0!important;
    height: 34px;
}
.form-control:focus, .form-control:active,
.ui-inputfield:focus, .ui-widget-content .ui-inputfield:focus, .ui-widget-header .ui-inputfield:focus,
.ui-inputfield:active, .ui-widget-content .ui-inputfield:active, .ui-widget-header .ui-inputfield:active {
    box-shadow: inset 0 3px 5px rgba(15, 146, 206, 0.1)!important;
}

.btn {
    border-radius: 0!important;
    background-image: none !important;
    box-shadow: none!important;
}
.btn-primary {
    color: #fff!important;
    background-color: #0f92ce!important;
    border-color: #0f92ce!important;
}
.btn-primary:hover {
    color: #fff;
    background-color: #71c0e7!important;
    border-color: #71c0e7!important;
}
.btn-primary:active, .btn-primary:focus {
    color: #fff;
    background-color: #055c86!important;
    border-color: #055c86!important;
}
.icon-accent {
    color: #0F92CE;
}
.login-form .btn-link {
    color: #999;
    width: 100%;
    display: block;
    text-align: center;
}
.login-form .btn-link:hover {
    color: #0f92ce;
    text-decoration: none;
    cursor: pointer;
}
.form-control::placeholder {
    color: #ccc!important;
}
.mt-2 {
    margin-top: 2rem;
}
.mt-4 {
    margin-top: 4rem;
}
.form-group {
    position: relative;
}
.input-icon {
    width: auto;
    height: 16px;
    z-index: 2;
    position: absolute;
    top: 13px;
    left: 10px;
}
.toggle {
    background: none;
    border: none;
    position: absolute;
    right: .75em;
    top: 8px;
    z-index: 9;
}
.toggle .input-icon {
    position: relative;
    top: 0;
    left: 0;
}

@media screen and (max-width: 992px) {
    .login-form-wrapper {
        grid-column: 1 / -1;
    }
    .login-form {
        width: 100%;
    }
    .login-img-wrapper {
         display: none;
    }
    .login-footer {
        width: 100%;
        height: auto;
        grid-row-gap: 2rem;
    }
    .login-footer div {
        grid-column: 1 / -1;
    }
}





.auth-message {
    color: #025798;
    font-size: 1.8em;
    font-weight: bold;
}

.form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    padding-left: 40px;
}

.list-errors {
    padding: 1em 0;
    margin-top: -2em;
}

.global-message {
    margin-bottom: -1.3em;
    margin-top: 1em;
}

.element-message {
    margin-top: -1.3em;
}

.global-message, .element-message {
    color: #C40000;
    display: block;
    font-size: .9em;
}

span.error-notify {
    top: -1em;
    position: relative;
}


#svg-logo {
    width: 100%;
}

form .company-name {
    font-family: Helvetica, Geneva, Arial, sans-serif;
    font-size: 4em;
    font-weight: bold;
    color: #2697C8;
    margin: -.2em;
}


.form-links a {
    color: #fff;
}


.brand-header{
    color:#333!important;
}
.x-style{
    color:#25A4D4!important;
    font-family: 'Futura Medium', sans-serif!important;
    font-size: 48px!important;
}

.valid-msg{
    color:green!important;
}

.error-msg{
    color:red!important;
}

.smart-logo
{
    background: url("/javax.faces.resource/img/logo_light.svg.xhtml");
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 47px;
    margin-left: -17px;
    width: 204px;
}

.layout-topbar-dim .smart-logo, .layout-topbar-dark .smart-logo{
    background: url("/javax.faces.resource/img/logo_black.svg.xhtml")!important;
}

.layout-topbar-light  .smart-logo{
    background: url("/javax.faces.resource/img/logo_light.svg.xhtml")!important;
}

@media screen and (max-width: 991px) {
    .smart-logo{
        margin-top:-6px;
    }
}

@media screen and (min-width: 992px) {
    .smart-logo{
        margin-top:0px;
    }
}
.happy-new-year-logo-decoration{
    margin-left: 200px;
    margin-top: 15px;
}
.happy-new-year-logo-decoration-i{
    font-size: 2rem!important;
    margin-left: -123px;
    top:-3px;
    position:relative;
    --fa-secondary-color: orangered;
    --fa-secondary-opacity: 1.0;
}

.site-login .smart-logo{
    height: 60px;
    margin-left:  auto!important;
    width: auto!important;
}

.site-login .smart-logo .happy-new-year-logo-decoration{
    margin-left: 100px!important;
}

.site-login .smart-logo .happy-new-year-logo-decoration-i{
    top:7px!important;
}

.site-login .btn-lg, .site-login .ui-button {
    background-color: #00DC40!important;
}

.site-login .btn-lg.ui-state-hover, .site-login .ui-button.ui-state-hover {
    background-color: #009E3A !important;
}

.site-login .ui-inputfield.ui-state-hover, .site-login .ui-inputfield.ui-state-focus {
    border-color:  #00DC40!important;
}

a {
    text-decoration: none;
    color:  #29A54F!important;
}

a:hover{
    text-decoration: none;
    color:  #00DC40!important;
}

.site-login  .btn-primary {
    border-color: #29A54F!important;
}