body {
    background-color: #d1dbd9;
    background: rgb(209,219,217);
    background: linear-gradient(0deg, rgba(209,219,217,1) 0%, rgba(232,238,236,1) 100%);
    background: linear-gradient(180deg, rgba(209,219,217,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(180deg, rgba(179,189,187,1) 0%, rgba(255,255,255,1) 87.5%);
    /*background: linear-gradient(180deg, rgba(209,219,217,1) 0%, rgba(29,38,35,1) 100%);*/
    text-align: center;
}

#Template {
    /* This isn't on AcoraCMSBasic.master but it's on AcoraCMSDefault.master */
    text-align: center;
}

#LoginForm {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

    #Body[class*=clientPic]:not(.inFrame) #CMSAdminPage::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
    }

        #Body.clientPic.fullWidth #CMSAdminPage::before {
            width: 100%;
        }

        #Body:not(.inFrame) #LoginForm::after {
            position: absolute;
            z-index: 2;
            top: 120px;
            left: calc(50% - 75px);
            width: 120px;
            height: 90px;
            background-color: #fff;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 90px;
        }

    #Body:not(.clientPic.fullWidth):not(.inFrame) #CMSAdminPage::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
        background: linear-gradient(37.5deg, #004e42 0%, #0cb37c 75%);
        background-image: url('/AcoraCMS/Admin/images/logos/bg_acora_devices_3940x2048.png');
        background-size: cover;
        background-position: right top;
    }

    #LoginFormPanel {
        position: relative;
        z-index: 2;
        display: flex;
        box-sizing: border-box;
        text-align: left;
        /*box-shadow: 0 0 15px rgb(0 0 0 / 25%);*/
        border-radius: 2px;
    }

        #LoginFormPanel .loginForm {
            order: 2;
            box-sizing: border-box;
            background: #ffffff;
            background: rgba(255,255,255,0.9);
            padding: 40px;
            width: 440px;
            flex-shrink: 0;
        }

            #LoginFormPanel h1 {
                margin: 0;
                font-size: 200%;
                line-height: 150%;
                float: none;
            }

                #LoginFormPanel h1::before {
                    content: " ";
                    position: relative;
                    float: left;
                    width: 60px;
                    height: 60px;
                    margin-right: 20px;
                    background-color: #009376;
                    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBpZD0ic3ZnQ29udGVudCIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjE4NyIgaGVpZ2h0PSIxNzcxIiBzdHlsZT0icG9zaXRpb246IHJlbGF0aXZlOyB3aWR0aDogMjE4N3B4OyBoZWlnaHQ6IDE3NzFweDsgbWFyZ2luOmF1dG87IHVzZXItc2VsZWN0OiBub25lOyBjdXJzb3I6IGRlZmF1bHQ7IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjE4NyAxNzcxIj48ZyBpZD0ic3ZnUGF0aCI+PHBhdGggZD0iTSAxOTU1LjUwMCAxLjE3NiBDIDE5MjIuNzA1IDQuNDc3LCAxODg4LjkxNSAxNi40NjcsIDE4NjIgMzQuMzUyIEMgMTg0OC45ODMgNDMuMDAyLCAxODQyLjg3MyA0OC4wNDEsIDE4MjkgNjEuNTY1IEMgMTgxOS40MTYgNzAuOTA4LCAxNTYwLjgyNCAyODUuNTE5LCA5MzcuNTAwIDgwMS40NDAgQyA0NTQuNjAwIDEyMDEuMTMzLCA1OC42MDAgMTUyOS4xNTgsIDU3LjUwMCAxNTMwLjM4NCBDIDU2LjQwMCAxNTMxLjYxMSwgNTIuNTAzIDE1MzQuOTU4LCA0OC44NDEgMTUzNy44MjEgQyAzNS4wODQgMTU0OC41NzcsIDIxLjA1MiAxNTY1LjgzMywgMTMuMDU2IDE1ODEuODI5IEMgOC40MDYgMTU5MS4xMjksIDMuMzAzIDE2MDcuMTcwLCAxLjU0OCAxNjE4IEMgLTAuNDY1IDE2MzAuNDE5LCAtMC40MzQgMTY1MS4xMTYsIDEuNjE1IDE2NjMuMDc0IEMgMTAuNzI1IDE3MTYuMjM0LCA1MS4wMDggMTc1Ny4zNjksIDEwNSAxNzY4LjY0MyBDIDExNi42MDQgMTc3MS4wNjcsIDE0My4xMDYgMTc3MS4xMTEsIDE1NSAxNzY4LjcyNyBDIDE3OS4yNDkgMTc2My44NjcsIDE5OC42OTAgMTc1NC4xODYsIDIxOC40NzcgMTczNy4xMTUgQyAyMjMuMTg1IDE3MzMuMDUzLCA1NzMuNDE2IDE0ODAuMDE0LCA5OTYuNzY4IDExNzQuODA3IEwgMTc2Ni41MDAgNjE5Ljg4MyAxNzY2Ljc1NCA3NTAuNDQyIEMgMTc2Ni45MjEgODM2LjMxOSwgMTc2Ny4zNDggODgxLCAxNzY4LjAwNCA4ODEgQyAxNzY4LjU5NiA4ODEsIDE3NjkgODg0Ljg3MCwgMTc2OSA4OTAuNTM5IEMgMTc2OSA5MjcuNjYzLCAxNzgxLjY0NiA5NjkuMTAzLCAxODAyLjcwOCAxMDAxIEMgMTgzNi40NDkgMTA1Mi4wOTcsIDE4ODkuNjk5IDEwODUuNjQwLCAxOTQ5LjUyNiAxMDkzLjQ4MiBDIDE5NjQuMzkyIDEwOTUuNDMxLCAxOTkwLjYxNyAxMDk1LjQyNSwgMjAwNS42OTkgMTA5My40NzAgQyAyMDkwLjc5MSAxMDgyLjQzNywgMjE2MS4zODAgMTAxOC43MDYsIDIxODAuODg0IDkzNS4zMDQgQyAyMTg2LjgyMiA5MDkuOTA3LCAyMTg2LjM4MSA5MzguOTY0LCAyMTg2LjczMyA1NTAuNTc4IEMgMjE4Ni45NTMgMzA4LjQ5OSwgMjE4Ni43MjkgMTk1LjMyOSwgMjE4Ni4wMjggMTk0LjYyOCBDIDIxODUuNDYyIDE5NC4wNjIsIDIxODQuOTk4IDE5MS43NzgsIDIxODQuOTk2IDE4OS41NTAgQyAyMTg0Ljk5MCAxODMuODI1LCAyMTgyLjM1MCAxNjguMjQ1LCAyMTc5LjQ0MSAxNTYuNzY5IEMgMjE2NS44ODIgMTAzLjI3NSwgMjEzMC44ODkgNTcuMDM0LCAyMDgyLjI1OCAyOC4zNDUgQyAyMDQ1LjQ2NiA2LjY0MCwgMTk5OS4zNjYgLTMuMjQxLCAxOTU1LjUwMCAxLjE3NiBNIDE5NTguMDU2IDEzNTQuMDQwIEMgMTg3MC43ODMgMTM2Mi40NjMsIDE3OTguMjU0IDE0MjMuNTY1LCAxNzc1Ljk5NSAxNTA3LjQxOCBDIDE3NzAuNTg2IDE1MjcuNzk2LCAxNzY5LjU4NiAxNTM2LjMxMSwgMTc2OS41ODYgMTU2MiBDIDE3NjkuNTg2IDE1ODcuMTI3LCAxNzcwLjUwOCAxNTk1LjI5OCwgMTc3NS42MTQgMTYxNS40NTcgQyAxNzg0LjM4NyAxNjUwLjA4NywgMTgwMy4xODMgMTY4My4wNDQsIDE4MjguOTk5IDE3MDkuMDU3IEMgMTg0Ni43NjEgMTcyNi45NTYsIDE4NjQuMjc3IDE3MzkuNDIzLCAxODg3LjEzMSAxNzUwLjQzNSBDIDE5MzkuMTE4IDE3NzUuNDg0LCAyMDAxLjE3NyAxNzc3LjY5MSwgMjA1NC45MTQgMTc1Ni40MDEgQyAyMTI0LjUzNCAxNzI4LjgxOCwgMjE3NC4wMDQgMTY2Ni4wMjYsIDIxODQuNDg5IDE1OTEuOTMzIEMgMjE4Ni40MDEgMTU3OC40MTUsIDIxODYuNjgzIDE1NDkuNjQxLCAyMTg1LjAzMiAxNTM2LjUwMCBDIDIxNzcuMzE0IDE0NzUuMDkzLCAyMTQ0LjEzNSAxNDIxLjQ1MCwgMjA5MyAxMzg3LjcwOSBDIDIwNjcuNzYzIDEzNzEuMDU2LCAyMDM4LjQ2MiAxMzU5Ljg2NCwgMjAwOC43NjAgMTM1NS41MzMgQyAxOTk1LjMxNyAxMzUzLjU3MywgMTk3MC40NzggMTM1Mi44NDEsIDE5NTguMDU2IDEzNTQuMDQwIiBzdHJva2U9Im5vbmUiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvZz48L3N2Zz4=");
                    background-size: 65% auto;
                    background-position: center center;
                    background-repeat: no-repeat;
                }

            #LoginFormPanel p {
                margin: 0;
            }

            #LoginFormPanel #LoginHelpContainer {
                clear: both;
            }

            #LoginFormPanel .submitButton {
                background-color: #009376;
            }

                #LoginFormPanel .submitButton:hover {
                    background-color: #323834;
                }

            #LoginFormPanel li a {
                color: #009376;
            }

        #LoginFormPanel .tips {
            order: 1;
            box-sizing: border-box;
            background-color: rgba(29,38,35,0.75);
            padding: 40px;
            width: 440px;
            flex-shrink: 0;
            color: #fff;
        }

            #LoginFormPanel .tips a {
                color: #00d1a9;
                color: #61caa8;
            }

            #LoginFormPanel .tips [class*="icon"]::before {
                color: rgba(235,121,41,1) !important;
                margin-right: 10px;
            }

            #LoginFormPanel .tips [class*="icon"]::after {
                color: rgba(255,255,255,0.99) !important;
                color: #eef6ff !important;
            }

            #LoginFormPanel .tips :first-child {
                margin-top: 0 !important;
            }

            #LoginFormPanel .tips .contentItem {
                display: none;
                margin-bottom: 15px;
            }

                #LoginFormPanel .tips .contentItem:first-child,
                #LoginFormPanel .tips .contentItem:nth-child(2) {
                    /* Display a maximum of 2 items. */
                    display: block;
                }

                #LoginFormPanel .tips .contentItem[class*=category] h2 {
                    margin-bottom: 0;
                }

                #LoginFormPanel .tips .contentItem[class*=category] h2::before {
                    position: relative;
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 5px;
                    color: rgba(235,121,41,1) !important;
                    font-family: "Font Awesome 5 Duotone";
                    font-weight: 400;
                    font-size: 133.33%;
                    font-style: normal;
                    font-variant: normal;
                    text-rendering: auto;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    z-index: 1;
                }

                #LoginFormPanel .tips .contentItem[class*=category] h2::after {
                    position: absolute;
                    top: 0.565em;
                    left: 0;
                    color: #e1e8e9 !important;
                    color: rgba(203,255,245,0.75) !important;
                    font-family: "Font Awesome 5 Duotone";
                    font-size: 133.33%;
                    line-height: 1;
                }

                #LoginFormPanel .tips .contentItem[class*=categoryAnalytics] {
                }

                    #LoginFormPanel .tips .contentItem[class*=categoryAnalytics] h2::before {
                        content: "\f080";
                    }

                    #LoginFormPanel .tips .contentItem[class*=categoryAnalytics] h2::after {
                        content: "\10f080";
                    }

                #LoginFormPanel .tips .contentItem[class*=categoryEvents] {
                }

                #LoginFormPanel .tips .contentItem[class*=categoryHelp] {
                }

                    #LoginFormPanel .tips .contentItem[class*=categoryHelp] h2::before {
                        content: "\f30f";
                    }

                    #LoginFormPanel .tips .contentItem[class*=categoryHelp] h2::after {
                        content: "\10f30f";
                    }

                #LoginFormPanel .tips .contentItem[class*=categoryNews] {
                }

                    #LoginFormPanel .tips .contentItem[class*=categoryNews] h2::before {
                        content: "\f1ea";
                    }

                    #LoginFormPanel .tips .contentItem[class*=categoryNews] h2::after {
                        content: "\10f1ea";
                    }

                #LoginFormPanel .tips .contentItem[class*=categoryOffers] {
                }

                #LoginFormPanel .tips .contentItem[class*=categoryTips] {
                }

    #Body.clientPic2 #LoginForm {
    }

        #Body.clientPic2 #LoginForm #LoginFormPanel .tips {
            position: relative;
            background-image: url('https://www.g-mwater.com.au/images/gmw/banners/2021/Tatura_customer_service_centre.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: right center;
        }

            #Body.clientPic2 #LoginForm #LoginFormPanel .tips::after {
                content: "";
                position: absolute;
                bottom: 40px;
                right: 40px;
                width: 100px;
                height: 100px;
                padding: 10px;
                background-color: #fff;
                background-image: url(https://www.g-mwater.com.au/App_Sites/gmw/Templates/Default/images/gmw_logo_2020.png);
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 100px;
            }

            #Body.clientPic2 #LoginForm #LoginFormPanel .tips * {
                display: none;
            }

/*
    Login Form
*/

#LoginFormContainer {
    position: relative;
}

    #LoginFormContainer fieldset {
        display: inline-block;
        width: 100%;
        clear: left;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        margin: 20px 0;
        padding: 0;
        border: 0;
    }

    fieldset.submitButtons {
        margin-bottom: 0 !important;
    }
    
    #LoginFormContainer fieldset legend {
        display: none;
        /*
        margin: -1em 0 1em -0.75em;
        padding: 0;
        background: transparent;
        */
    }
    
    #LoginFormContainer ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
        #LoginFormContainer ol li {
            position: relative;
            float: left;
            width: 100%;
            margin: 0 0 10px;
            padding: 0;
            list-style: none;
        }
    
            #LoginFormContainer ol li label {
                position: relative; 
                float: left;
                width: 80px;
                line-height: 38px;
                font-weight: 500;
            }

            #LoginFormContainer ol li input {
                position: relative; 
                float: left;
                box-sizing: border-box;
                width: calc(100% - 80px);
            }

    #LoginFormContainer .rememberMe {
        float: left;
        width: 100%;
        clear: both;
        margin-top: 15px;
        text-align: center;
    }

        #LoginFormContainer .rememberMe label {
        }

        #LoginFormContainer .rememberMe input {
            margin-right: 5px;
            margin-top: 0px;
        }

    #LoginFormContainer #LoginButtonContainer {
        clear: left;
    }
    
    #LoginFormContainer #LoginHelp {
        position: absolute;
        right: 0;
        bottom: 15px;
    }
    
        #LoginFormContainer #LoginHelp ul.loginLinks {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
            #LoginFormContainer #LoginHelp ul.loginLinks li {
                display: inline-block;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            #LoginFormContainer #LoginHelp ul.loginLinks li a::before {
                display: inline-block;
                margin-right: 5px;
                color: #303030;
                font: normal normal normal 14px/1 "Font Awesome 5 Pro";
                font-weight: bold;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }

            #LoginFormContainer #LoginHelp ul.loginLinks li a.passwordLink {
            }
        
                #LoginFormContainer #LoginHelp ul.loginLinks li a.passwordLink::before {
                    content: "\f023";
                }
                        
            #LoginFormContainer #LoginHelp ul.loginLinks li a.registerLink {
            }
        
                #LoginFormContainer #LoginHelp ul.loginLinks li a.registerLink::before {
                    content: "\f234";
                }
        
            #LoginFormContainer #LoginHelp ul.loginLinks li a.requestAccessLink {
            }
        
                #LoginFormContainer #LoginHelp ul.loginLinks li a.requestAccessLink::before {
                    content: "\f2be";
                }

/*
    Inside a Frame
*/

body.inFrame {
    background: none !important;
}

    body.inFrame #LoginFormPanel {
        display: block;
        margin: 0;
        padding: 10px;
        max-width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

        body.inFrame #LoginForm {
            display: block;
        }

            body.inFrame #LoginForm::before {
                display: none;
            }

        body.inFrame #LoginFormPanel .loginForm {
            box-sizing: border-box;
            background: #ffffff;
            padding: 5px;
            width: 100%;
            flex-shrink: 0;
        }

            body.inFrame #LoginFormPanel h1 {
                margin-top: 0;
            }

            body.inFrame #LoginFormPanel h1::before {
                display: none;
            }

            body.inFrame #LoginFormContainer fieldset {
                border: 0;
                padding: 0;
                margin-bottom: 0;
            }

            body.inFrame #LoginFormContainer ol li label {
            }

        body.inFrame #LoginFormPanel .tips {
            display: none;
        }

/*
    Small screens
*/

@media screen and (max-width: 1400px) {

    #Body:not(.inFrame) #LoginForm::after {
        top: 40px;
    }

}

@media screen and (max-width: 900px) {

    #LoginFormPanel {
        flex-direction: column;
    }

    #Body[class*=clientPic] #CMSAdminPage::before {
        left: 0;
        top: 0;
        height: 50%;
        width: 100%;
    }

    #CMSAdminPage::after {
        left: 0;
        top: 50%;
        height: 50%;
        width: 100%;
        background-position: center center;
    }

    #Body.clientPic2 #LoginForm #LoginFormPanel .tips {
        height: 320px;
    }

}

@media screen and (max-width: 500px) {

    body.inFrame #LoginFormPanel h1 {
        font-size: 150%;
        margin-bottom: 5px;
    }

    body.inFrame #LoginFormContainer #LoginHelp {
        right: auto;
        left: 0;
        bottom: -30px;
    }

}