.DarkMode:not(.LightMode) {
  --main-background-color: #141317;
  --main-color: white;
  --form-background-color: var(--main-background-color);
  --form-color: var(--main-color);
  --form-highlight-color: -webkit-linear-gradient(#C7C1EB, #FEC8C2);
  --form-label-color: #e1e1e1;
  --form-fieldset-legend-color: var(--color-ghost);
  --form-fieldset-legend-font-weight: 100;

  --form-input-background-color: #353147;
  --form-input-border: 1px solid #3A3A3A;
  --form-input-color: #F7F9FC;
  --form-input-placeholder-color: var(--color-blanc);
  --form-input-autofill-color: var(--color-athens);

  --form-select-color-text: var(--color-athens);
  --form-select-background-color: rgba(87 87 87 / 0.2);

  --sign-in-button-background-color: #272727;
  --sign-in-button-color: #878787;
  --sign-in-button-border: none;

  --submit-button-background-color: #fff;
  --submit-button-color: var(--color-mostly-black);
  --submit-button-border: 1px solid white;
  --submit-button-border-radius: 0.25rem;

  --navbar-border: 1px solid #3A3A3A;
  --navbar-logo-color: var(--main-color);
  --navbar-background-color: transparent;

  --button-white-outlined-background-color: var(--main-background-color);
  --button-white-outlined-color: var(--color-ghost);

  --signup-disclaimer-padding: 1rem 0;
  --signup-disclaimer-border-bottom: 1px solid #3A3A3A;
  --signup-disclaimer-margin-bottom: 1.5rem;

  --net-worth-label-color: var(--color-mud);
}

.DarkMode,
.DarkMode #login-page-theme-title,
.DarkMode #kc-header-wrapper,
.DarkMode .LoginPageThemeTitle {
    background-color: var(--main-background-color);
    color: var(--main-color);
}

.DarkMode #kc-header-wrapper {
    min-height: 2.5rem;
}

.DarkMode .ContentWrapper {
    padding-top: 0;
}

.DarkMode #login-page-theme-title,
.LoginPageThemeTitle {
    font-size: 1.5rem;
    line-height: 2rem;
}

.DarkMode #kc-login {
    margin-bottom: 1rem;
}

.DarkMode #kc-form {
    background-color: var(--form-background-color);
    color: var(--form-color);
}

.DarkMode #kc-form h2 {
    margin-bottom: 1rem;
}

.DarkMode #page-top-section,
.DarkMode #kc-form h2,
.DarkMode #kc-agreement-notice,
.DarkMode .coverage-brand-container,
.DarkMode .PasswordCriteria,
.DarkMode #input-error-firstname + #input-error-lastname .DarkMode #side-content {
    display: none;
}

.DarkMode .errors {
    display: flex;
    gap: 0.5rem;
}

.DarkMode .Logo::before {
    background: var(--navbar-logo-color);
    mask-image: url("../img/logo.svg");
    -webkit-mask-image: url("../img/logo.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    height: 1rem;
}

.DarkMode .Logo .Advisers {
    font-size: 0.5rem;
    margin-top: 0.125rem;
    width: 8.5rem;
    color: white;
}

.DarkMode .Input,
.DarkMode .Select {
    background-color: var(--form-input-background-color);
    border: var(--form-input-border);
    color: var(--form-input-color);
}

.DarkMode .Input::placeholder,
.DarkMode .Select {
    color: var(--color-mud);
}

.DarkMode .Select {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 14 14'%3E%3Cpath fill%3D'%23878787' d%3D'M2.8 4.2c0 .2.1.4.2.5s.3.2.5.2.4-.1.5-.2l3-3 3 3c.1.1.3.2.5.2s.4-.1.5-.2.2-.3.2-.5-.1-.4-.2-.5L7.5.2C7.4.1 7.2 0 7 0s-.4.1-.5.2L3 3.7c-.2.2-.2.3-.2.5zm0 5.6c0 .2.1.4.2.5l3.5 3.5c.1.1.3.2.5.2s.4-.1.5-.2l3.5-3.5c.1-.1.2-.3.2-.5s-.1-.4-.2-.5-.3-.2-.5-.2-.4.1-.5.2l-3 3-3-3c-.1-.1-.3-.2-.5-.2s-.4.1-.5.2-.2.2-.2.5z'%2F%3E%3C%2Fsvg%3E");
    padding-top: 1.5rem;
    padding-bottom: 0.25rem;
    height: auto;
}

.DarkMode .Button.blue:not(.outlined):not(.ghost) {
    border-radius: var(--submit-button-border-radius);
    border-color: var(--submit-button-background-color);
    background-color: var(--submit-button-background-color);
    color: var(--submit-button-color);
}

.DarkMode a,
.DarkMode a:active,
.DarkMode a:hover {
    color: var(--submit-button-background-color);
    font-weight: bold;
}

.DarkMode .FormGroup {
    position: relative;
    margin-bottom: 2rem;
}

.DarkMode .Placeholder {
    pointer-events: none;
    position: absolute;
    left: 0;
    padding: 0.625rem 0.625rem 0.625rem 0.75rem;
    top: 0.25rem;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0.75;
    color: var(--form-input-placeholder-color);
}

.DarkMode .Input {
    padding-top: 1.375rem;
    padding-bottom: 0.25rem;
}

.DarkMode .dark-signup-disclaimer {
    text-align: center;
    grid-column: span 2;
    margin-bottom: 2rem;
    font-size: 0.875rem;
}

.DarkMode input:focus + .Placeholder,
.DarkMode input:not(:placeholder-shown) + .Placeholder {
    opacity: 1;
    transform: scale(0.75) translateY(-50%);
    font-weight: bold;
    transform-origin: left center;
}

.DarkMode .Select + .Placeholder {
    opacity: 1;
    transform: scale(0.9) translateY(-40%);
    transform-origin: left center;
    font-weight: bold;
}

.Idp {
    display: none;
}

.DarkMode .Idp {
    display: inline-block;
    background-color: white;
    background-position: center;
}

.DarkMode .Button.google {
    background-image: url("../img/social/google-g.svg");
}

.DarkMode .Button.linkedin {
    background-image: url("../img/social/linkedin-blue.svg");
    background-size: 1.625rem;
}

.DarkMode .Button.facebook {
    background-image: url("../img/social/facebook-f.svg");
    background-size: 2rem;
}

.DarkMode .Button.apple {
    background-image: url("../img/social/apple-black.svg");
    background-size: 1.625rem;
}

.DarkMode #kc-form-buttons {
    display: flex;
    gap: 0.5rem;
}

.DarkMode #kc-form-buttons a {
    flex-shrink: 0;
}

/* Change Autocomplete styles in Chrome */
.DarkMode .Input:-webkit-autofill,
.DarkMode .Input:-webkit-autofill:hover,
.DarkMode .Input:-webkit-autofill:focus,
.DarkMode .Input:autofill,
.DarkMode .Input:autofill:hover,
.DarkMode .Input:autofill:focus,
.DarkMode .Select:-webkit-autofill,
.DarkMode .Select:-webkit-autofill:hover,
.DarkMode .Select:-webkit-autofill:focus .DarkMode .Select:autofill,
.DarkMode .Select:autofill:hover,
.DarkMode .Select:autofill:focus {
    box-shadow: 0 0 0 1000px var(--color-midnight-black) inset;
    transition: all 0s 5000s;
    background-color: transparent !important;
    -webkit-text-fill-color: var(--form-input-autofill-color);
}

@media (min-width: 992px) {
    .DarkMode #kc-header-wrapper {
        min-height: 5rem;
    }

    .DarkMode #side-content {
        display: none;
    }

    .DarkMode #page-wrapper {
        display: grid;
        column-gap: 2rem;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .DarkMode #kc-form {
        grid-column: 3 / 11;
    }

    .DarkMode #login-page-theme-title,
    .LoginPageThemeTitle {
        font-size: 2rem;
        line-height: 3rem;
    }

    .DarkMode .Logo::before {
        height: 1.5rem;
    }

    .DarkMode .Logo .Advisers {
        font-size: 0.625rem;
        margin-top: 0.5rem;
        width: 12.75rem;
    }

    .DarkMode .FormGroup {
        margin-bottom: 2rem;
    }

    .DarkMode .dark-signup-disclaimer {
        text-align: left;
        margin-bottom: 2rem;
        font-size: 0.875rem;
    }
}

@media (min-width: 1200px) {
    .DarkMode #page-wrapper {
        display: grid;
        column-gap: 2rem;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .DarkMode #kc-form {
        grid-column: 4 / 10;
    }
}

.Button .social-icon {
    margin-right: 1rem;
    padding: 0.25rem;
    background-color: white;
    border-radius: 2rem;
}

.Button.facebook,
.Button.google,
.Button.twitter,
.Button.linkedin {
    border-color: transparent;
}

.Button.facebook {
    background-color: var(--color-facebook);
}

.Button.google {
    background-color: var(--color-google);
}

.Button.twitter {
    background-color: var(--color-twitter);
}

.Button.linkedin {
    background-color: var(--color-linkedin);
}

.Button.linkedin img {
    padding: 0.25rem;
}

.DarkMode .FormCard {
    background-color: transparent;
}