/******************************************************************
Site Name:
Author:

Stylesheet: Login Stylesheet

This stylesheet is loaded (if admin.php is setup in your
functions file) on the login page. This way you can style
the login page. It won't affect any other page, admin or front-end.

For more info, check out the codex:
http://codex.wordpress.org/Creating_Admin_Themes

******************************************************************/
/* the form box */
/*
This is the Wordpress logo in the admin area.
You'll have to load your own images and mess
with the width and height.
*/
:root{
    --accent-primary : #D0661C;
    --accent-secondary : #5a2c71;
}

body {
    min-height: 100vh;
    background: #ffffff;
}

body::after{
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(../images/login/login-screen.jpg) no-repeat top center;
    background-size: cover;
}

body::before{
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
}


#login{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    padding: 50px;
    /*background: rgba(255,255,255,0.1);*/
    background: rgba(255,255,255,1);
    border-radius: 6px;
    box-shadow: 0 5px 35px rgba(0,0,0,0.5);
    font-size: 14px;
    z-index: 5;
}

#login::after{
    content: '';
    position: absolute;
    z-index: 0;
    left: 5px;
    top: 5px;
    bottom: 5px;
    right: 5px;
    border-radius: 5px;
    pointer-events: none;
    /*background: linear-gradient(to bottom, rgba(255,255,255,.2) 0%,rgba(255,255,255,.15) 15%, transparent 50%,transparent 85%,rgba(255,255,255,.3) 100%);*/
}

.login h1 a {
    background: url(../images/login/logo-yvelines-fibre-login.png) no-repeat top center;
    width: 300px;
    height: 130px;
    text-indent: -9999px;
    overflow: hidden;
    padding-bottom: 15px;
    display: block;
    background-size: contain;
    pointer-events: none;
}

#login form {
    margin-left: 0;
    padding: 0;
    font-weight: normal;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#login form label {
    color: #403f3f;
}

#login form .input {
    position: relative;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
    font-weight: 200;
    width: 97%;
    padding: 8px 10px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 16px;
    border: 1px solid #403f3f;
    background: transparent;
    outline: none;
    /*box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.3);*/
    box-shadow: none;
    color: #403f3f;
    font-size: 16px;
}

#login form .button.wp-hide-pw{
    right: 10px;
}

#login form .button.wp-hide-pw .dashicons{
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    position: absolute;
    left: 50%;
    color: var(--accent-secondary);
}
#login form .forgetmenot{
    display: block;
    width: 100%;
    margin-bottom: 15px;
    color: var(--accent-secondary);
    font-weight: bold;
    font-size: 14px;
}

#login form .submit input[type="submit"]{
    display: block;
    background-color: var(--accent-secondary);
    width: 100%;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    border: 1px solid var(--accent-secondary) ;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    outline: none !important;
}

.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover{
    background: #fff !important;
    color: var(--accent-secondary) !important;
    box-shadow: none !important;
}


#login #nav a,
#login #backtoblog a,
#login .privacy-policy-page-link a{
    color: var(--accent-secondary);
    /*transition: color 0.3s ease-in-out;*/
    font-size: 14px;
}

#login #nav a:hover,
#login #backtoblog a:hover,
#login .privacy-policy-page-link a:hover{
    /*text-decoration: underline;*/
}

.language-switcher{
    display: none;
}