/* Ensure the body takes the full height of the viewport */
body, html {
    height: 100%;
}

/* Flexbox container to center the login card */
.container-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Style the login card */
.card-custom {
    width: auto;
    background-color: var(--ps-gray); /* Schwarzer Hintergrund */
    min-width: 300px;  /* Minimum width */
    padding: 20px;
/*    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);  */
}

.card-custom:hover{
  box-shadow: 12px 12px 32px rgba(0, 0, 0, 0.3),
  -6px -6px 26px var(--ps-light-blue);
}

/* Optional styling for inputs and labels */
.text-white-noshadow {
    color: var(--ps-white);
}

/* Layout for form elements with Flexbox */
.form-row {
    display: flex;
    justify-content: space-between; /* Positioniert Label links und Input rechts */
    align-items: center;
    margin-bottom: 10px;
}

.form-row label {
    margin-right: 10px;
    flex: 1; /* Label nimmt den Platz auf der linken Seite ein */
    text-align: left; /* Labels sind linksbündig */
}

.form-row input {
    flex: 2; /* Input-Felder nehmen den verbleibenden Platz auf der rechten Seite ein */
    text-align: right; /* Option: Input kann rechtsbündig sein */
    width: 100%; /* Nimmt die volle Breite des flexiblen Bereichs ein */
}

.form-checkbox {
    text-align: left;
    margin-bottom: 10px;
}

/* Custom styles for login button */
.btn-login {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

/* Checkbox styling */
.form-checkbox label {
    color: var(--ps-wihte);
}
/* Schwarze Eingabefelder */
.form-row input {
    flex: 2; /* Input-Felder nehmen den verbleibenden Platz auf der rechten Seite ein */
    width: 100%; /* Nimmt die volle Breite des flexiblen Bereichs ein */
    background-color: var(--ps-black); /* Schwarzer Hintergrund */
    border: 1px solid var(--ps-light-gray); /* Grauer Rand */
    color: var(--ps-white); /* Weißer Text */
    padding: 8px;
    border-radius: 5px; /* Optionale abgerundete Ecken */
    outline: none; /* Entfernt Standardumrandung */
}

/* Platzhalter in weiß */
.form-row input::placeholder {
    color: var(--ps-light-gray); /* Hellerer Platzhalter-Text */
}

/* Effekt beim Fokussieren auf das Eingabefeld */
.form-row input:focus {
    border-color: var(ps-white); /* Weißer Rand bei Fokus */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Leichter weißer Schimmer */
}