:root.light {
    --login-cover-image: url("/ui/cover/light");
}

:root.dark {
    --login-cover-image: url("/ui/cover/dark");
}

body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

/* Logo */
:root:not(.light) .logo-light {
    display: none;
}

:root:not(.dark) .logo-dark {
    display: none;
}

/* Content */
.login-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    color: var(--color-login-text);
    background-color: var(--color-login-background);
    box-shadow: var(--shadow-content);
    text-align: center;
    overflow: auto;
}

.login-title {
    font-size: var(--font-size-lg);
    font-weight: 500;
}

.login-description {
    font-size: var(--font-size-md);
    opacity: 75%;
}

.login-form-container {
    padding: var(--spacing-xl);
}

.login-form-loading {
    display: flex;
    justify-content: center;
}

/* Logo */
.login-logo {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl) 0;
}

.login-logo img {
    max-width: 12.5em;
}

/* Footer */
.login-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    margin-top: auto;
}

.login-actions {
    display: flex;
    align-items: start;
}

.login-actions dw-live-color-scheme-selector::part(toggle) {
    color: var(--color-login-text);
}

.login-copyright {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    opacity: 50%;
}

/* Cover Image */
.login-cover {
    display: flex;
    background-image: var(--login-cover-image);
    background-size: cover;
    background-position: center;
        /* Center content with Flexbox */
    width: 100%;
    height: 100vh;
    justify-content: Left; /* horizontally center */
    align-items: center;     /* vertically center */
    align-content: center;
    text-align: Left;
}

/*PLMGroup cover text start*/

.login-cover-text {
  color: #ffffff !important; /* white text */
  position: relative;
 /* left: 10%; */
  transform: translateX(+100px);
  z-index: 10;
  max-width: 600px;
  padding: 1.5rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* optional for readability */

}

/* Screen: Large */
@media screen and (min-width: 60em) {
    body {
        grid-template-columns: 30em minmax(0, 1fr);
    }

    .login-title {
        font-size: 1.5rem;
    }

    .login-cover {
        display: block;
    }
}

@media screen and (max-width: 60em) {
    .login-form-container {
        display: flex;
        justify-content: center;
    }
}