/* ------- Timera Energy LOG IN -------- */

/* ------- Animation --------- */

@keyframes Fadeinlogo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeUpSlow {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#loginform {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeUpSlow;
}

@keyframes Fadeinfromright {
    from {
        opacity: 0;
        transform: translateX(3rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ------ Styling ------ */

body.login {
    background-color: #fff;
    color: #1D1D1B;
}

#login h1 a {
    background: url('/wp-content/uploads/2023/07/logo-dark.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 8rem;
    width:13rem;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: Fadeinlogo;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    margin: 0 auto 1.5rem;
    color: #1D1D1B;
}

@keyframes Fadeinlogo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#loginform {
    background-color:transparent;
    box-shadow: none;
    border:none;
    display: flex;
    flex-direction: column;
}

.login input[type="text"],
.login input[type="password"] {
    border: 1px solid #1D1D1B;
    border-radius: 0;
    opacity: 1;
    width:100%;
    margin-top: .5rem;
    padding:.5rem;
    font-family: 'Muli', sans-serif;
    transition: .3s ease-in-out;
}

.login input[type="text"]:hover,
.login input[type="password"]:hover {
    box-shadow:0px 3px 6px rgba(0, 0, 0, 0.29);
    transition: .3s ease-in-out;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    box-shadow:0px 3px 6px rgba(0, 0, 0, 0.29);
    border: 1px solid #57546B;
    outline:none;
}

.login label,
.description.indicator-hint {
    color: #1D1D1B;
}


.login input[type="checkbox"]::before {
    content:none;
}
.login input[type="checkbox"]#rememberme {
    -webkit-appearance: none;
    border: 1px solid #1D1D1B;
    background-color: #fff;
    border-radius: 15px;
    margin-right: 5px;
}

.login input[type="checkbox"]#rememberme:checked{
    -webkit-appearance: none;
    background-color: #000;
}

.login input[type="submit"]{
    margin-top: 1rem;
    display: inline-block;
    border-radius: 0;
    transition: color .3s ease-in-out, background-color .3s ease-in-out;
    border: none;
    background-color: #1D1D1B;
    color: #fff;
    width: 100%;
    font-size: 16px;
    padding: 16px 24px;
    text-transform: none;
}

.login input[type="submit"]:hover,
.login input[type="submit"]:focus{
    background-color: rgba(29, 29, 27, .45);
    /*background-color: #E3E3E3;
    color: #1D1D1B;*/
    border: none;
    transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

.login #nav a,
.login #backtoblog a,
.login a,
p.message,
div#login_error {
    color:#1D1D1B;
    text-decoration: none;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: Fadeinfromright;
    transition: color 300ms ease-in-out;
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login a:hover,
.login #nav a:focus,
.login #backtoblog a:focus,
.login a:focus {
    color: #9ABE57;
    transition: color 300ms ease-in-out;
}

@keyframes Fadeinfromright {
    from {
        opacity: 0;
        transform: translateX(3rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ------- Login Error --------- */

.login #login_error,
.login p.message {
    border-left-color: #FF0000;
    border-top: 1px solid #1D1D1B;
    border-right: 1px solid #1D1D1B;
    border-bottom: 1px solid #1D1D1B;
    background-color: transparent;
    box-shadow: none;
    color: #1D1D1B;
    margin: 0 24px;
}
.login #login_error a{
    color: #FF0000;
}
.login #login_error a:hover{
    color: #707070;
}


/* ------- Lost Password --------- */

#lostpasswordform,
#resetpassform {
    background-color: transparent;
    border: none;
}