body.login {

    width: 100vw;
    height: 100vh;
    min-height: 100%;
    background-image: url("https://www.propertunity.co/wp-content/uploads/2022/01/default_geocode-2x.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;


    flex-direction: column;

    background: none;
    overflow: hidden;

    &::after {
        content: '';
        background-color: var(--shade-07) !important;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        opacity: .75;
    }

    & * {
        margin: 0;
        padding: 0;
        outline: none;
        box-shadow: none !important;
        /*  font-family: var(--fa-font);*/
    }

    & iframe {
        /* MAKE VIDEO A LITTLE BIGGER TO HIDE  */
        transform: scale(1.4);
    }

    & video {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        z-index: 1;
        pointer-events: none;
    }

    & a {

        & *, 
        &:active, 
        &:focus {
            text-decoration: none !important;
            border: 0 !important;
        }
    }

    & .notice { 
        margin-top: 30px;
        padding: 15px;
        border-radius: var(--border-radius);
        background-color: rgba(255, 255, 255, .2);

        & p { 
            text-align: justify;
            padding: 0;
            margin: 0px !important;
        }

    }

    & #login {

        padding: 0;
        margin: 0;
        z-index: 3;

        position: relative;
        z-index: 10;

        & .login-heading,
        & p.forgetmenot,
        & button.button.button-secondary.wp-hide-pw.hide-if-no-js,
        & span.dashicons.dashicons-visibility {
            display: none !important;
        }

        & h1.wp-login-logo {
            text-align: center;
            font-weight: lighter;
            margin-bottom: 30px;

            &:hover a::before {
                transform: rotate(-90deg) !important; /* Apply counterclockwise rotation */
                transition: transform 0.3s ease-in-out; /* Smooth animation */
            }

            & a {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 55px;
                display: block;
                background-image: none; /* Remove default logo */
                text-indent: 0; /* Ensure text is visible */
                font-size: 48px;
                color: #FFF;
                font-weight: lighter !important;
                background-color: transparent;
            }
            
            & a:hover::before {
                transform: rotate(-90deg) !important; /* Rotates the pseudo-element 90° CCW */
            }

            & a::before {
                content: '\f3c5 \00a0';
                font-family: 'Font Awesome 6 Pro', 'Open Sans', sans-serif !important;
            }

            & a:hover,
            & a:hover::before,
            & a:hover::after {
                color: var(--brand-light) !important;
                transition: var(--transition);
            }

            & a i {
                font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'Open Sans', sans-serif !important;
            }

        }

        & form#loginform { 

            & .input-group,
            & .form-floating {
                background: transparent;
                background-color: transparent;
            }

            .input-group-text { 

                width: var(--input-size);
                min-width: var(--input-size);
                max-width: var(--input-size);
                height: var(--input-size);
                min-height: var(--input-size);
                max-height: var(--input-size);
                background-color: rgba(255, 255, 255, .4 ) !important;

                &:first-child {
                    border-top-left-radius: var(--border-radius);
                }

                & i { 
                    color: var(--white) !important; 
                }

            }

            & .input,
            & input {
                /* Base styles */
                font-size: 1rem !important;
                color: var(--white) !important;
                background: rgba(255,255,255,.2) !important;
                border: 0;
                
                /* Autofill overrides */
                &:-webkit-autofill,
                &:-webkit-autofill:hover,
                &:-webkit-autofill:focus,
                &:-webkit-autofill:active {
                    -webkit-text-fill-color: var(--white) !important;
                    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.2) inset !important;
                    box-shadow: 0 0 0px 1000px rgba(255,255,255,.2) inset !important;
                    transition: background-color 5000s ease-in-out 0s !important;
                    caret-color: var(--white) !important;
                }
                
                /* Alternative method - sometimes more reliable */
                &:-internal-autofill-selected {
                    background-color: rgba(255,255,255,.2) !important;
                    background-image: none !important;
                    color: var(--white) !important;
                }

                &:focus,
                &:active,
                &[type=password],
                &[type=text],
                &[type=tel],
                &[type=email] {
                    font-size: 16px !important;
                    width: 100%;
                    height: var(--input-size);
                    max-height: var(--input-size);
                    min-height: var(--input-size);
                    padding: 10px 40px;
                    border-radius: .25rem;
                    outline: none;
                    border-radius: var(--border-radius);
                }

                &::placeholder {
                    color: #FFF;
                    font-size: 16px;
                }
            }

            & label.login-label {
                color: var(--white) !important;
                display: block !important;
            }

            & .form-floating {

                &:first-of-type {
                    border-top-right-radius: var(--border-radius);

                    > label {

                        border-top-right-radius: var(--border-radius);
                        
                    }
                }

                & > label {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 2;
                    height: 100%;
                    padding: 0px 0px 0px 14px;
                    overflow: hidden;
                    text-align: start;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    pointer-events: none;
                    border: var(--bs-border-width) solid transparent;
                    transform-origin: 0 0;
                    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
                }
            }

            & p.submit { 

                margin: 0px !important; 
                display: flex; 
                border-bottom-left-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);

                #wp-submit {
                    width: 100%;
                    height: var(--input-size);
                    min-height: var(--input-size);
                    max-height: var(--input-size);
                    font-size: 22px;
                    background-color: var(--shade-14) !important;
                    color: #FFF;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: all 200ms ease-in-out;
                    cursor: pointer;
                    border-radius: var(--border-radius) !important;
                    background-color: rgba(255, 255, 255, .2);
                    margin-right: 15px;
                    border-radius: 0px !important;
                    font-size: 22px;
                    font-weight: 500;

                    border-bottom-left-radius: var(--border-radius);
                    border-bottom-right-radius: var(--border-radius);

                    &:hover {
                        background-color: var(--brand) !important;
                    }
                }
            }
        }
    }

    & #login_error,
    & .message {
        padding: 15px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        border: 2px solid;
        border-radius: .25rem;
    }

    & #login_error {
        color: var(--error);
        background-color: var(--error-light);
        border-color: var(--error);
    }

    &.login-action-lostpassword .message > .message,
    &.login-action-lostpassword.bb-login #login > p.message {
        color: #FFF;
        background-color: var(--brand);
        border-color: var(--brand);
    }

    & #backtoblog, 
    & p#nav, 
    & div.privacy-policy-page-link,
    & #login_error {
        display: none;
    }

    #register-new-user-btn {

        color: var(--white);
        background-color: rgba(255, 255, 255, .2 );
        font-size: 22px;
        font-weight: 500;

        &:hover {
            color: var(--brand);
            background-color: var(--white);
        }

        &:focus {
            color: var(--white);
            font-size: 22px;
            font-weight: 500;
        }

    }

    & .subfooter {

        padding: 0px 15px 15px 15px;
        background:transparent; 

        & a:hover { 
            color: var(--white) !important;
        }
        & .col-auto {
            margin-bottom: 5px;
        }

        & .tagline {

            & a { 

                color: var(--subfooter-text) !important;

                &:hover { 

                    color: var(--white) !important;
                }

            }

            & .icon-text-badge { 

                display: inline-flex; 
                align-items: center; 
            }
        }

        & .brand-social-icons { 

            display: none; 

            & a {

                background-color: transparent !important;

                &:hover {
                    background-color: rgba(255, 255, 255, .2) !important;
                }
            }
        }

        & .fine-print { 

            & *,
            & a { 
                
                font-weight: 300;
                font-size: 12px;
                line-height: 13px;
                color: var(--subfooter-text) !important;
            }

            & .margin-right { 
                margin-right: 6px;
            }
            & li { 
                height: 13px;
            }
        }
    }
}



p.message.reset-pass::after {
  content: '  Type your new password';
}

#loginform, 
#lostpasswordform, 
#resetpassform {
  padding: 0 !important;
  border: 0 solid transparent !important;
  background-color: transparent !important;
}

label:not(.not-login-label) {
  font-size: 20px;
  color: #FFF;
  width: 100% !important;
  text-align: left !important;
}

.login .button-primary:hover,
.login .button-primary:active {
  opacity: 1 !important;
}

.login a,
.login h1 a.bb-login-title,
.login form .lostmenot a,
form#lostpasswordform a.bs-sign-in {
  color: #FFF !important;
}

p#nav * { color: var(--white); }

span.checkbox {
  background-color: rgba(255,255,255,.4) !important;
}

p#nav a, #backtoblog a {
    color: #FFF !important;
    text-align: center !important;
    display: block;
    font-weight: lighter;
    font-size: 14px !important;
    z-index: 99 !important;
}

p#nav a:hover, p#nav a:active, #backtoblog a:hover, #backtoblog a:active {
    color: var(--brand) !important;
}

p {
    margin: 30px 0px 30px 0px !important;
    color: var(--white) !important;
    text-align: center;
    font-size: 18px;
}

body.login bb-login p.message.reset-pass,
body.login.login-action-lostpassword.bb-login #login > p.message {
    padding: 15px;
}

p.message p {
    margin-top: 15px !important;
}





@keyframes onAutoFillStart {}

input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 9999s ease-in-out 0s !important;
    -webkit-text-fill-color: #666 !important;
    box-shadow: 0 0 0px 1000px #666 inset !important;
    animation-name: onAutoFillStart;
    animation-duration: 0.01s;
    animation-iteration-count: 1;
}

input label { 
    padding: 4px;
}

.form-floating label {
    height: var(--input-size);
    min-height: var(--input-size) !important;
    max-height: var(--input-size);
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
}

.form-floating { 
    margin-left: 0px !important; 
}
.form-floating > .form-control:-webkit-autofill~label,
.form-floating > .form-control:not(:placeholder-shown)~label {
  transform: scale(.85) translateY(-.3rem) translateX(.15rem);
}