/* page layout */
html {
    position: relative;
    min-height: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: .95rem;
}

/* link color */
a {
    color: #2c2d33;
    text-decoration: none;
}
a:active, a:hover {
    outline-width: 0;
    text-decoration: none;
}
.cr-text{
    color:#a7bcea;
}
.cr-link{
    color:#505572;
    transition: color .5s;
}
.cr-link:hover{
    color:#e0e1e6;
}

/* body color */
.bg-gra-01 {
    background: linear-gradient(to top, #fbc2eb 0%, #a18cd1 100%);
}
.bg-gra-02 {
    background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%);
}
.bg-gra-03 {
    background: linear-gradient(to top right, #08aeea 0%, #b721ff 100%);
}
.bg-gra-04 {
    background: linear-gradient(to top right, #4158d0 0%, #c850c0 100%);
}

/* login styles */
.card-login{
    flex: 0 0 100%;
    max-width:450px;
    border:none;
}
.card-login .card-title{
    color:#174583;
}
.card-login .card-subtitle{
    color:#aaa;
}
.card-login input {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    padding: 20px 0 20px 59px;
    border-bottom: 1px solid #e9e9e9;
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: -webkit-linear-gradient(to top, rgba(255, 255, 255, 0) 98%, #0093FF 2%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 98%, #0093FF 2%);
    background-position: -800px 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #999;
    border-radius:0;
}
.card-login input:valid{
    box-shadow: none;
    outline: none;
    background-position: 0 0;
    z-index: 9999999;
    color: #0093FF;
    border-color: #0093FF !important;
}
.card-login input:focus{
    box-shadow: none;
    outline: none;
    background-position: 0 0;
    color: #0093FF;
    border-color: #0093FF !important;
}
.card-login input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
    color: #0093FF;
    visibility: visible !important;
}
.card-login .input-box{
    position: relative;
}
.card-login .input-box span{
    position: absolute;
    z-index: 5;
    top: 0;
    margin-top: 18px;
    font-size: 20px;
    left: 15px;
    color: #aaa;
    transition: all 0.3s;
}
.card-login .input-box input:focus + span{
    color: #0093FF;
    transition: all 0.5s;
}
.card-login .input-box input:valid + span{
    color: #0093FF;
    transition: all 0.5s;
}
.card-login .btn-gradient {
    color: #fff;
    font-size: 15px;
    border-radius: 30px;
    border: none;
    padding: 12px 30px;
    letter-spacing: .5px;
    margin-bottom: 15px;
    background: #0072ff;
    background-size: 200% auto;
    background-image: linear-gradient(to right, #0072ff 0%, #00c6ff 51%, #0072ff 100%);
    transition: all 0.5s;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}
.card-login .btn-gradient:active,.card-login .btn-gradient:focus{
    outline: none;
    box-shadow: none;
}
.card-login .btn-gradient:hover{
    background-position: right center;
}
.card-login .form-body{
    border-top: 1px solid #e9e9e9;
}

@media (max-width: 360px) {
    .card-login .form-body{
        background:none;
    }
}
@media (max-width: 450px) {
    .card-login{
        border-radius:0;
    }
}

.login-error-animate{
    animation:login-anim 2s linear 0s 1 normal;
}
@keyframes login-anim{
    0%{transform:translateX(0)}
    5%{transform:translateX(-10px)}
    10%{transform:translateX(10px)}
    15%{transform:translateX(-10px)}
    20%{transform:translateX(10px)}
    25%{transform:translateX(-10px)}
    30%{transform:translateX(10px)}
    35%{transform:translateX(-10px)}
    40%{transform:translateX(10px)}
    45%{transform:translateX(-10px)}
    50%{transform:translateX(0)}
}