.login-main { margin-top:100px; background:#fff; padding:20px; position:relative;  }

.login-title
{
    color: #555;
    font-size: 18px;
    margin-bottom:35px;
}
.logo
{
    height: 80px;
    margin: 0 auto 10px;
    display: block;
}
.btn { border:0; border-radius:0; }
.login-wrap { margin-top:50px }
.login-wrap h1 { font-weight:300 }
.login-brand { padding-top:50px }
body { background:#efefef }
.need-help { margin-top:10px; font-size:0.9em; color:#ccc; }
.need-help:hover { color:#888 }
.login-wrapper { border-left:1px solid #eee; min-height:300px }

.form-control{ margin-bottom:10px; padding:5px 10px !important; }
.form-control::-webkit-input-placeholder { color: #ccc; }
.form-control::-moz-placeholder { color: #ccc; }
.form-control:-ms-input-placeholder { color: #ccc; }
img.lock { height:22px; margin-right:10px; }
img.user { height:40px; margin-right:10px }

@media (max-width: 767px) {
    .login-main { margin-top:50px }
    .login-brand { padding-top:0;  }
    .login-wrapper { border:none }
    .logo { height:60px; }
}


.loading { position:absolute; background:green; width:100%; height:100%; top:0; left:0; display:none}
.loading.candidate { background:#2375c2; }
.loading .spinner { top:50%; left:50%; margin-left:-20px; margin-top:-20px; }


/* spinner */
.spinner {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color:  #fff;
    border-radius: 100%;
    opacity: 1;
    animation: spinner 0.6s infinite linear;
    transition: top 0.3s 0.3s ease,
    opacity 0.3s 0.3s ease,
    border-radius 0.3s ease;
    box-shadow: 0px 1px 0px rgba(0,0,0,0.2);
}

.spinner.lg
{
    border-width:4px;
    height:40px;
    width:40px;
}

@keyframes spinner {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(359deg); }
}

/* stacked */
.stacked
{
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.stacked:before, .stacked:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.stacked:before {
    background: #fafafa;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    left: -5px;
    top: 4px;
    transform: rotate(-2.5deg);
}
.stacked:after {
    background: #f6f6f6;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    right: -3px;
    top: 1px;
    transform: rotate(1.4deg);
}