:root {
  --black: #1e282d;
  --blackTransparent: rgba(30, 40, 45, 0.8);
  --white: #ffffff;
  --whiteTransparent: rgba(255, 255, 255, 0.8);
  --lighterGray: #faf9f5;
  --lightGray: #f4f4f4;
  --gray: #e7e6e2;
  --menuBorder: #4b5357;
  --darkGray: #5e5c58;
  --blue: #39a5db;
  --lightBlue: #8ec1db;
  --linkColor: #3d64a3;
  --pink: #ec008b;
  --pinkText: #e00083; /* passes WCAG AA for normal text */
  --red: red;
  --lightRed: #ffe4e7;
  --yellow: #f5ce50;
  --lightYellow: #f5ecce;
  --fieldGray: #dfdfdf;
  --green: #08cb08;
  --lightGreen: #def8cc;
  --brownOnYellow: #40340d;
  --boxShadow: rgba(0, 0, 0, 0.3);

  /* variables prefixed --cetera are external and set  inside _publication-style.html.erb */
  --publication-color-fallback: var(--black);
  --publication-color-inverted-fallback: var(--white);

  --background-color: var(
    --cetera-background-color,
    var(--lightGray)
  );
  --header-background-color: var(
    --cetera-publication-header-background-color,
    var(--white)
  );
  --header-border-color: var(
    --cetera-publication-header-border-color,
    var(--black)
  );
  --publication-color: var(
    --cetera-publication-color,
    var(--publication-color-fallback)
  );
  --publication-color-inverted: var(
    --cetera-publication-color-inverted,
    var(--publication-color-inverted-fallback)
  );

}

.main {
    flex-direction: column;
}

@media screen and (max-width: 400px) {
    .main {
        justify-content: flex-start;
    }
}

.login-wrapper {
    box-sizing: border-box;
    background: var(--white);
    max-width: 400px;
    font-size: 16px;
    width: 100%;
    padding: 20px;
}

.my-aid-msg--error {
    font-size: 15px;
}

.help-me-button {
    margin-top: 2rem;
}

.tidy_sessions aid-button {
    margin-top: .5rem;
}

.small-text {
    font-size: 14px;
}

img.two-factor-staff {
    height: 80px;
    float: right;
}

.two-factor-form {
    margin-top: 42px;
}

aid-expand#password-safety ol {
    padding-left: 0;
    list-style-position: inside;
}

.ipaccess-ip-wrapper h2 {
    margin-bottom: 1.2em;
}

.ipaccess-ip-wrapper aid-info-box {
    margin: 30px 0;
}

.ipaccess-ip-wrapper .ip-info {
    word-break: break-word;
}

form, .text_container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aid-avatar {
    width: 80px;
    height: 80px;
}

.aid-avatar div {
    width: 100%;
    height: 100%;
}

p {
    margin-bottom: 0;
}