body {
    margin: 0;
    box-sizing: border-box;
    background-color: #404040;
}

.account-container {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

    .account-container > div {
        display: flex;
        flex-direction: column;
        gap: 1em;
        width: 50%;
        height: 100vh;
        overflow: auto;
    }

    .account-container .account-logo-container {
        display: flex;
        place-content: center;
        margin-top: 5em;
    }

        .account-container .account-logo-container > img {
            width: 240px;
        }

        .account-container .account-logo-container ~ .account-body-container {
            margin-top: 0;
        }

    .account-container .account-body-container {
        font-size: 2em;
        margin: 3em 5em 1em 5em;
    }

        .account-container .account-body-container > div.account-page-content {
            display: flex;
            flex-direction: column;
            gap: 1em;
            color: white;
            font-family: sans-serif;
            font-size: 0.8em;
        }

            .account-container .account-body-container > div.account-page-content a {
                color: unset;
                text-decoration: unset;
                text-transform: uppercase;
                font-weight: bold;
                cursor: pointer;
            }

                .account-container .account-body-container > div.account-page-content a.text-capitalize {
                    text-transform: capitalize;
                }

            .account-container .account-body-container > div.account-page-content .account-form-error-container {
                display: none;
            }

                .account-container .account-body-container > div.account-page-content .account-form-error-container > span {
                    display: block;
                    width: 100%;
                    box-sizing: border-box;
                    font-size: 0.75em;
                    padding: 1em 0.5em;
                    color: #E02B2B;
                    background-color: #e02b2b2b;
                }

    .account-container .account-font-sm {
        font-size: 0.75em;
    }

    .account-container .account-font-xs {
        font-size: 0.5em;
    }

    .account-container .account-text-center {
        text-align: center;
    }

.account-image-mobile-view {
    background-image: none;
    height: 0;
    display: none;
}

.account-image-web-view {
    background-image: url('../../images/ddpy_signup_image_web.jpg');
    height: 100vh;
    background-size:contain;
    background-repeat:repeat;
    background-position: top;
    display: block;
}

@media only screen and (max-width: 1400px) {
    .account-container .account-logo-container {
        margin-top: 4em;
    }

        .account-container .account-logo-container > img {
            width: 200px;
        }

    .account-container .account-body-container {
        margin-top: 2em;
        font-size: 1.5em;
    }
}

@media only screen and (max-width: 992px) {
    .account-container .account-logo-container {
        margin-top: 1em;
    }

        .account-container .account-logo-container > img {
            width: 180px;
        }

    .account-container .account-body-container {
        margin-top: 1.5em;
        font-size: 1em;
    }
}

@media only screen and (max-width: 660px) {
    .account-container {
        flex-direction: column-reverse;
        height: auto;
    }

        .account-container > div {
            width: 100%;
            height: auto;
        }

        .account-container .account-logo-container {
            margin-top: 1em;
        }

            .account-container .account-logo-container > img {
                width: 120px;
            }

        .account-container .account-body-container {
            margin-top: 1em;
            font-size: 1em;
        }

    .account-image-mobile-view {
        background-image: url('../../images/ddpy_signup_image_mobile.jpg');
        height: 25vh;
        width: 100%;
        background-size: contain;
        background-position: center;
        display: block;
    }

    .account-image-web-view {
        background-image: none;
        height: 0;
        display: none;
    }
}