:root {
    /* Global variables */
    --font-family: Raleway, Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif, sans-serif;
    --font-size: 18px;
    --background-color: #002a4e;

    --color-body-text: #FFF;
    --color-accent: #ffd300;
    
    /* Element specific variables */
    /* https://dev-lebanon-valley-college.pantheonsite.io/wp-content/uploads/2022/08/wide-lrg_certificate-leadership-ethics-5.jpeg.webp */
    --logo-url: url(/wp-content/uploads/2022/10/lvc.svg);
    --logo-width: 300px;
    --logo-height: 35px;
    
    --link-color: #FFF;
    --link-color-hover: #ffd300;

    --label-color: #333;
    --label-font-size: 16px;
    --label-line-height: 1.2;
    --label-font-weight: 700;

    --form-background-color: #FFF;
    --form-box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 10%);
    --form-border-radius: 3px;

    --input-focus-border-color: #333;
    --input-focus-box-shadow: 0 0 0 1px #333;
    --input-font-size: 16px;
    --input-font-weight: 400;
    --input-line-height: 17px;
    --input-color: #000;
    --input-border-color: #000;
    --input-border-width: 1px;
    --input-border-radius: 0;
    --input-border-style: solid;

    --message-background-color: #FFF;
    --message-color: var(--color-body-text);
    --message-border-color: var(--color-accent);
    --message-font-size: 16px;
    --message-border-radius: 0 10px 10px 0;
    --message-box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 10%);

    --button-font-size: 16px;
    --button-background-color: #ffd300;
    --button-color: #002a4e;
    --button-border: 0px solid #002a4e;
    --button-hover-background-color: #95c1dc;
    --button-hover-color: #000;
    --button-hover-border: 1px solid #95c1dc;
    --button-padding: 17px 20px;
    
    --button-secondary-background-color: #95c1dc;
    --button-secondary-color: #000;
}

body.login {
    background-color: var(--background-color) !important;
    color: var(--color-body-text) !important;
    position: relative;
    font-family: var(--font-family);
    font-size: var(--font-size);
    background-repeat: no-repeat;
    background-position: bottom;
    overflow-x: hidden;
    background-image: url(/wp-content/uploads/2022/08/wide-lrg_certificate-leadership-ethics-5.jpeg.webp);
    background-size: cover;
    background-blend-mode: luminosity;

    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background: #002a4e;
        width: 100%;
        height: 100%;
        mix-blend-mode: multiply;
    }
    
    /* Links */
    a,
    .button-link {
        color: var(--link-color) !important;
        transition: all 300ms ease;

        &:hover {
            color: var(--link-color-hover) !important;
            text-decoration: underline;
        }
    }

    /* Logo */
    h1 a {
        background-image: var(--logo-url);
        background-size: var(--logo-width) var(--logo-height);
        height: var(--logo-height);
        width: var(--logo-width);
        text-indent: -9999px;
    }

    div#login p#nav a,
    div#login p#backtoblog a {
        color: var(--link-color) !important;
        &:hover {
            text-decoration: underline;
        }
    }
    
    /* Icons */
    .button.wp-hide-pw .dashicons {
        color: var(--color-accent) !important;
    }
    
    /* Forms */
    form,
    form#loginform,
    form#lostpasswordform,
    form.admin-email-confirm-form,
    form#resetpassform,
    form#registerform,
    form#itsec-2fa-on-board {
        background-color: var(--form-background-color) !important;
        border-radius: var(--form-border-radius) !important;
        box-shadow: var(--form-box-shadow) !important;
        border: 0;
        
        label {
            font-size: var(--label-font-size);
            line-height: var(--label-line-height);
            width: 100%;
            color: var(--label-color) !important;
            margin-bottom: 0px;
            font-weight: var(--label-font-weight);

            &[for="rememberme"] {
                font-size: 14px;
                font-weight: normal;
                margin-top: -3px;
                margin-left: 5px;
            }
        }
    }
  
    /* Main Input Text Fields */
    input#user_login, 
    input#user_pass {
        border-radius: var(--input-border-radius) !important;
        border-style: var(--input-border-style) !important;
        border-width: var(--input-border-width);
        border-color: var(--input-border-color);
        background: 0 0;
        outline: 0 !important;
        color: var(--input-color);
        font-family: var(--font-family) !important;
        font-size: var(--input-font-size) !important;
        line-height: var(--input-line-height) !important;
        font-weight: var(--input-font-weight) !important;
        width: 100%;

        &:focus {
            border-color: var(--input-focus-border-color);
            box-shadow: 0 0 0 1px var(--input-focus-border-color);
        }
    }
    
    /* Radios & Checkboxes */
    p.forgetmenot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 5px 0 20px !important;
    }
    
    input[type=checkbox], 
    input[type=radio] {
        background: #FFF!important;
        border-color: #2c363a !important;
    }
    
    /* Buttons */
    input#wp-submit,
    button.button-primary.itsec-screen__actions--continue,
    .admin-email__actions .button-primary,
    .admin-email__actions a.button {
        background-color: var(--button-background-color) !important;
        border: none;
        box-shadow: none;
        color: var(--button-color);
        cursor: pointer;
        font-size: var(--button-font-size) !important;
        padding: var(--button-padding) !important;
        text-transform: uppercase;
        width: auto;
        transition: all 300ms ease;
        border: var(--button-border);
        min-height: unset !important;
        line-height: 1;
        font-weight: 700 !important;

        &:hover,
        &:focus {
            background-color: var(--button-hover-background-color) !important;
            color: var(--button-hover-color) !important;
        }
    }

    /* Secondary button */
    .admin-email__actions a.button {
        background: var(--button-secondary-background-color) !important;
        color: var(--button-secondary-color) !important;
    }
    
    /* Notices & Messages */
    .message, 
    .notice, 
    .success {
        border-left-color: var(--message-border-color);
        background-color: var(--message-background-color);
        color: var(--message-color);
        font-size: var(--message-font-size);
        border-radius: var(--message-border-radius);
        box-shadow: var(--message-box-shadow);
    }
    
    .button.wp-hide-pw {
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        min-height: 33px !important;
    }

    .language-switcher {
        max-width: 500px;
        margin-top: 30px;
    }
    
    .language-switcher form {
        padding: 15px 0 !important;
    }

    
    .notice * {
        color: #000;
    }

    form p.admin-email__details {
        color: #000;
    }
}