.logon-page {
    height: 100%;
    width: 100%;
    background: @color-blue-100;
    padding: 0 @base-unit;
    box-sizing: border-box;

    .logo {
        margin: 0 auto 0;
        width: 1035px;
        height: 60px;
        background: url(../../CMSPages/GetResource.ashx?image=logon-logo.png) no-repeat;
    }

    @media (max-width: (1034 + (@base-unit * 2))) {
        .logo {
            margin: 0;
            width: 131px;
        }
    }

    .center-box {
        width: @base-unit * 27;
        margin: @base-unit * 11.5 auto 0;
        height: @base-unit * 17;

        .logon-box {
            width: @base-unit * 23.5;
            margin: 0 auto;

            .logon-inputs {
                padding: @base-unit @base-unit @base-unit * 2 @base-unit;
                background: @color-white;

                .alert {
                    width: 100%;
                    box-sizing: border-box;
                    overflow: hidden;
                    margin-bottom: 0;
                }

                .row {
                    margin: 0;
                    padding-top: @base-unit * 0.75;

                    .logon-text {
                        .col-xs-8;
                        .make-column(@screen-phone;8);
                        padding: 0;

                        .login-btn {
                            float: right;
                            margin-top: @base-unit * 0.5;
                            width: @base-unit * 8;
                        }
                    }

                    .logon-text-offset {
                        .col-xs-offset-4;
                    }
                    
                    .logon-label {
                        .col-xs-4;
                        .make-column(@screen-phone;4);
                        vertical-align: top;
                        text-align: right;
                        padding-top: @padding-small-horizontal;
                        padding-right: @padding-base-horizontal;

                        label {
                            margin: 0;
                            color: @color-info;
                        }
                    }

                    .token-label {
                        vertical-align: top;
                        text-align: left;
                        padding-top: @padding-small-horizontal;
                        padding-right: @padding-base-horizontal;

                        label {
                            margin: 0;
                        }
                    }
                }

                    .row:first-child {
                        padding-top: @base-unit;
                    }
            }
        }

        .logon-help-links {
            text-align: center;
            margin-top: @base-unit;
            color: @color-white;

            a {
                color: @color-white;
            }
        }
    }

    .language-selector {
        margin: @base-unit * 2 auto 0;
        width: @base-unit * 12;
    }
}

@media screen and (min-height: 850px) {
    .logon-page {
        background: @color-blue-100 url(../../CMSPages/GetResource.ashx?image=logon-background.png) no-repeat center bottom fixed;
    }
}