body {
    background-color: #4770ee;
}

.flex-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    margin: auto;
}

.main-container {
    margin-top: 20px;
    justify-content: space-around;
    align-items: center;
    max-width: 35vw;
    max-height: 90vh;
    background-color: #ffffff90;
    -webkit-box-shadow: 5px 5px 34px 5px rgba(0,0,0,0.53);
    box-shadow: 5px 5px 34px 5px rgba(0,0,0,0.53);
}

    .main-container .flex-item {
        order: 0;
        flex: 1 1 auto;
        align-self: auto;
    }

.logo-container {
    justify-content: space-around;
    align-items: center;
    min-height: 45vh;
}

@media(max-width: 767px) {
    .logo-container > img {
        max-width: 65%;
    }

    .main-container {
        max-width: 90vw;
        max-height: 90vh;
    }
}

@media(min-width: 768px) {
    .logo-container > img {
        max-width: 65%;
    }
}

.login-container {
    justify-content: flex-start;
    align-items: stretch;
    min-height: 55vh;
}

    .login-container .flex-item {
        order: 0;
        flex: 0 1 auto;
        align-self: auto;
    }

        .login-container .flex-item input {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: x-large !important;
            background: transparent;
            border-bottom: 1px solid #212453;
            border-top: 2px solid transparent;
            border-left: 2px solid transparent;
            border-right: 2px solid transparent;
            margin-bottom: 10px;
            text-align: center;
        }

            .login-container .flex-item input:focus {
                outline-offset: 0;
                outline-color: transparent;
                outline-style: auto;
                outline-width: 0;
            }

            .login-container .flex-item input::placeholder {
                color: #4772ee;
            }

            .login-container .flex-item input:-webkit-autofill,
            .login-container .flex-item input:-webkit-autofill:hover,
            .login-container .flex-item input:-webkit-autofill:focus,
            .login-container .flex-item input:-webkit-autofill:active {
                -webkit-text-fill-color: #212453 !important;
                -webkit-box-shadow: inset 0 0 1000px 1000px rgba(0,0,0,0.00) !important;
                outline-style: none;
                transition: background-color 5000s ease-in-out 0s;
            }

        .login-container .flex-item .buttons .btn {
            margin-top: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: x-large;
        }

.btn-primary {
    background-color: #4772ee;
    border-width: 0;
}

.login-container .flex-item .actions {
    text-align: center;
}

    .login-container .flex-item .actions a {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: large;
        text-align: center;
        color: #212453;
    }

.s-SingUpPanel .s-Membership-SingUpPanel,
.singup-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    min-width: 100vh;
}

    .singup-container .ui-tabs,
    .singup-container .ui-corner-all,
    .singup-container .ui-widget,
    .singup-container .ui-widget-content {
    }

    .singup-container .ui-tabs-nav,
    .singup-container .ui-corner-all,
    .singup-container .ui-widget-reset,
    .singup-container .ui-helper-clearfix,
    .singup-container .ui-widget-header {
        padding-left: unset;
    }

    .singup-container ui-tabs-tab,
    .singup-container ui-corner-top,
    .singup-container ui-state-default,
    .singup-container ui-tab,
    .singup-container ui-state-hover,
    .singup-container ui-tabs-active,
    .singup-container ui-state-active {
    }

.vx {
    display: none;
}

.caption {
    display: none;
}