/*******************************************************
    - Application Name: Faber & Faber Workflow;
    - Created Date: 2017;
    - Modifyed Date: 2018;
/********************************************************/

html {
    overflow-y: scroll;
}
body {
    color: rgb(63, 68, 65);
    /*background-color: rgb(241, 242, 243);*/
    background: rgb(241, 242, 243) url("/workflow_media/img/body-bk.png");
    background-repeat: no-repeat;
    background-size: cover;
}
	
.login-container-ff{
    padding-top: 30px;
}

/*-----------------------------------------*
    Login BRAND
/*-----------------------------------------*/
.wf-login-brand-ff{
    padding-top: 25px;
    padding-bottom: 25px;
}
.wf-login-brand-ff > img{
    margin: auto;
    vertical-align: bottom;    
}
.wf-login-brand-ff .h2 {
    margin-top: 6px;
    margin-bottom: 0;
    display: inline-block;
    font-weight: bold;
    color: rgb(49, 92, 113);
    text-shadow: 1px 2px 0px rgb(255, 255, 255);
    font-size: 41px;
}

/*-----------------------------------------*
    Login Form Message BOX
/*-----------------------------------------*/
.login-block-ff .alert {
    background-color: rgb(252, 229, 226);
    border-color: transparent;
    color: rgb(201, 66, 62);
    padding: 10px 15px;
}

/*-----------------------------------------*
    Login Form Body
/*-----------------------------------------*/
.login-block-ff{
    max-width: 390px;
    margin: auto auto 15px auto;    
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);    
}

.login-block-ff .block-body-ff{
    padding: 20% 10% 15%;
}
.login-block-ff form .form-group + .form-group{
    margin-top: 38px;
    margin-bottom: 0; 
}
.login-block-ff .form-signin-ff .input-group-addon {
    max-width: 42px;
    background: none;
    border-width: 0 0 1px 0;
    padding-left: 5px;
    border-radius: 0;
}

.login-block-ff .form-signin-ff .form-control{
    min-height: 45px;
    border-width: 0px 0px 1px 0px;
    padding-left: 5px;
    opacity: 0;

    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;

    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
 }



.login-block-ff .form-signin-ff .focus-input{
    display: block;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
    border-bottom: 1px solid #ccc;
}

.login-block-ff .form-control.has-content{
    opacity: 1 !important;
    cursor: text;
}

.login-block-ff .form-control:focus + .focus-input::after,
.login-block-ff .form-control.has-content + .focus-input::after{
    top: -15px;
    font-size: 12px;
    color: rgb(41, 137, 233);

}

.login-block-ff .form-control:focus + .focus-input::before,
.login-block-ff .form-control.has-content + .focus-input::before{
    width: 100%;
}

.login-block-ff .form-signin-ff .focus-input::before{
	background: rgba(52,182,247,1);
	background: -moz-linear-gradient(left, rgba(52,182,247,1) 0%, rgba(109,51,122,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(52,182,247,1)), color-stop(100%, rgba(109,51,122,1)));
	background: -webkit-linear-gradient(left, rgba(52,182,247,1) 0%, rgba(109,51,122,1) 100%);
	background: -o-linear-gradient(left, rgba(52,182,247,1) 0%, rgba(109,51,122,1) 100%);
	background: -ms-linear-gradient(left, rgba(52,182,247,1) 0%, rgba(109,51,122,1) 100%);
	background: linear-gradient(to right, rgba(52,182,247,1) 0%, rgba(109,51,122,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34b6f7', endColorstr='#6d337a', GradientType=1 );
    bottom: -1px;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transition: all 0.4s ease 0s;
    width: 0;
}

.login-block-ff .form-signin-ff .focus-input:after{
    color: rgb(153, 153, 153);
    content: attr(data-placeholder);
    display: block;
    left: 0px;
    padding-left: 35px;
    position: absolute;
    top: 12px;
    transition: all 0.4s ease 0s;
    width: 100%;
}


/* login button*/
.login-block-ff form .form-login-action-ff{}
.login-block-ff form .form-login-action-ff .btn{
    padding: 9px 80px;
    margin: auto;
    background-color: rgba(54, 64, 104, 0.9);
    color: rgb(255,255,255);
}
.login-block-ff form .form-login-action-ff .btn:hover{
    background-color: rgba(40, 50, 90, 0.9);
}

/*-----------------------------------------*
    Login Form Footer
/*-----------------------------------------*/
.login-block-ff .panel-footer{
    padding: 0;
}
.login-block-ff .panel-footer div[class*='col-lg-'] {
    padding: 11px 15px;
}
.login-block-ff .panel-footer div[class*='col-lg-']:last-child {
    border-left: 1px solid rgb(225, 225, 225);
}
.login-block-ff .panel-footer div[class*='col-lg-'] a{
    /*padding: 12px 15px;
    display: block;*/
    text-decoration: none;
}
.login-block-ff .panel-footer div[class*='col-lg-'] a.active{
    text-decoration:  underline !important;     
}

.login-block-ff .panel-footer .panel-body{
    background-color: rgb(234, 234, 234);
    position: relative;
}


.login-block-ff .panel-footer .collapse.in > a{
    color: rgb(81, 80, 80);
 }

.login-block-ff .wf-login-tabs-content-ff .panel-body{
    padding-top: 15px;
    padding-bottom: 20px;
    border-top: 1px solid rgb(222, 222, 222);

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    -moz-border-bottom-left-radius: 4px;
    -moz-border-bottom-right-radius: 4px;

    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;        
}

.login-block-ff .wf-login-tabs-content-ff form .form-group{
    margin-top: 0;
}
.login-block-ff .wf-login-tabs-content-ff .form-group .btn{
    padding: 2% 13%;
}