.container {
  .card {
    font-family: var(--font-family-1-name);
    font-size: var(--font-size-normal);
    align-items: center;
    border: 0.5px solid var(--card-border-color);
    border-radius: 8px;

    .content {
      align-items: center;
      margin: 8px auto;
    }

    #logo {
      background-repeat: no-repeat;
      background-size: cover;
      content: var(--component-logo-header);
    }

    .title {
      font-style: normal;
      font-weight: 700;
      font-size: var(--font-size-xl);
      line-height: 28px;
      text-align: center;
    }

    .subtitle {
      font-style: normal;
      font-weight: 500;
      font-size: var(--font-size-normal);
      line-height: 19px;
      text-align: center;
      color: var(--light-gray-color);
    }
  }
}

@media screen and (max-width: 575px) {
  .container {
    .card {
      margin-top: 0;

      .ant-card-body {
        padding: 14px 10px;
      }

      .ant-card-head {
        border: none;
      }
    }
  }

  .card-view-container {
    max-width: 100%;
  }

  .ant-card.card-login.card {
    border: none;
    box-shadow: none;
  }
}

@media screen and (max-width: 281px) {
  .container .card {
    max-width: 270px;
  }

  .container .card .ant-card-body {
    padding: 14px 10px;
  }
}

.card-login {
  max-width: 990px;
  margin: auto;
  padding-bottom: 0;

  /* Remove default Ant Design Input focus box-shadow for cleaner card appearance */
  .ant-input-affix-wrapper-focused,
  .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
    box-shadow: none;
    z-index: 5;
  }
}

.card-view-content-container {
  display: flex;
  justify-content: center;
  word-break: break-word;
}

.card-view-content {
  position: relative;

  .card-view-content__subtitle {
    margin-bottom: 30px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .ant-form-item-explain-error {
    text-align: left;
  }

  .authorize-btn {
    transition: none;
  }
}

.container .card.card-view {
  .ant-card-body {
    padding: 0;
  }
}

.card-view-container {
  padding: 24px 40px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--card-view-container-height);
}

.card-view-content-footer .footer-options {
  font-size: var(--font-size-sm);
  line-height: 15px;
  padding: 6px 0;
}

@media screen and (min-width: 576px) {
  .card-view-container {
    max-height: var(--card-view-container-max-height);

    .card-view-content {
      overflow-y: var(--card-view-content-overflow-y);
      overflow-x: var(--card-view-content-overflow-x);
    }

    .card-view-content-footer {
      flex-shrink: 0;
    }
  }
}

.App .link.back-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: 40px;
  font-size: var(--font-size-xs);
  line-height: 15px;
}

.status-bar {
  height: 3px;
}

.status-bar-background {
  height: 3px;
}

.header-logo {
  height: 16px;
}

#header-logo-link {
  width: 100%;
}

.card-view-subtitle {
  font-family: var(--font-family-1-name);
  text-align: var(--component-card-content-text-align);
  font-size: var(--component-card-subtitle-font-size, var(--font-size-sm));
  line-height: 1.5714rem;
  margin-bottom: 32px;
  margin-top: 16px;
  color: var(--color-text-secondary);

  h3 {
    font-family: var(--component-title-font-family);
    color: var(--component-title-font-color);
    font-size: var(--font-size-lg);
    font-weight: var(--component-title-font-weight);
    line-height: 1.2em;
    text-align: var(--component-card-content-text-align);
  }
}

.card-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card.card-view {
  .ant-card-head {
    min-height: 40px;
    padding: 0 12px;
  }
}

#logo-header-en {
  content: var(--component-logo-header-en, var(--component-logo-header));
}

#logo-header-de {
  content: var(--component-logo-header-de, var(--component-logo-header));
}

#logo-header-fr {
  content: var(--component-logo-header-fr, var(--component-logo-header));
}

#logo-header-it {
  content: var(--component-logo-header-it, var(--component-logo-header));
}

.status-bar {
  background-color: var(--color-primary-1);
}

.status-bar-background {
  background-color: var(--card-border-color);
}

.card-view-content__title,
.card-view-title,
.signin-self-unblock-title,
.card-view-content h2 {
  font-family: var(--component-title-font-family);
  color: var(--component-title-font-color);
  font-size: var(--component-title-font-size);
  font-weight: var(--component-title-font-weight);
  line-height: 1.2em;
  text-align: var(--component-card-content-text-align);
}

.card-view-content-container .card-view-container {
  width: var(--component-card-width);
}

.card-view-content-container .image {
  width: calc(990px - var(--component-card-width));
}

@media screen and (max-width: 595px) {
  #login {
    border: none;
    box-shadow: none;
  }

  .App .container {
    display: block;
  }

  .container .card-view-container {
    height: auto;
    min-height: auto;
  }
}