:root {
  --color-primary-base: 4 103 181;
  --color-primary-gradient: 0 73 148;
  --color-primary-button-text: 4 103 181;
  --color-primary-button-alternative-text: 255 255 255;
  --color-secondary-base: 249 122 40;
  --color-secondary-gradient: 199 76 0;
  --color-secondary-button-text: 255 255 255;
  --color-tertiary-base: 51 51 51;
  --color-tertiary-gradient: 103 103 103;
  --color-tertiary-button-text: 51 51 51;
  --color-success-base: 93 193 11;
  --color-success-gradient: 44 147 0;
  --color-success-button-text: 0 0 0;
  --color-info-base: 13 123 253;
  --color-info-gradient: 0 83 211;
  --color-info-button-text: 255 255 255;
  --color-warning-base: 245 206 1;
  --color-warning-gradient: 189 151 0;
  --color-warning-button-text: 0 0 0;
  --color-danger-base: 225 45 45;
  --color-danger-gradient: 182 0 0;
  --color-danger-button-text: 255 255 255;
  --color-form-base: 3 81 140;
}

/* Target the parent container of the login box directly */
:has(> .login-section) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* And give the login box a sensible width inside it */
.login-section {
    max-width: 440px;
    width: 100%;
}