Overleaf/services/web/frontend/stylesheets/pages/account-settings.scss

.affiliations-table {
  table-layout: fixed;
}

.affiliations-table-cell {
  padding: var(--spacing-04);
  overflow-wrap: break-word;
}

.affiliations-table-cell-tabbed {
  margin: var(--spacing-04) 0 0 var(--spacing-07);
  padding-left: var(--spacing-04);
}

.affiliations-table-row-highlighted {
  background-color: var(--bg-light-secondary);
}

.affiliation-change-container {
  margin-top: var(--spacing-04);
}

.affiliations-table-label {
  padding-top: var(--spacing-02);
}

.btn-link-accounts {
  margin-bottom: var(--spacing-03);
}

.settings-widget-status-icon,
.dropbox-sync-icon {
  position: relative;
  font-size: 1.3em;
  line-height: 1.3em;
  vertical-align: top;

  &.status-error,
  &.dropbox-sync-icon-error {
    color: var(--bg-danger-01);
  }

  &.status-success,
  &.dropbox-sync-icon-success {
    color: var(--content-positive);
  }
}

.unboxed-setting-row {
  display: flex;
  justify-content: space-between;
  padding-right: var(--spacing-05);
}

.unboxed-setting-description {
  flex: 0 1 60%;
}

.settings-widgets-container {
  border: 1px solid var(--border-divider);

  hr {
    margin: 0 var(--spacing-05);
  }
}

.settings-widget-container {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: var(--spacing-07);
  align-items: center;
  padding: var(--spacing-05);

  > div {
    display: flex;
    flex-direction: column;
    padding-right: var(--spacing-07);

    &:last-child {
      padding-right: var(--spacing-00);
    }
  }

  img {
    width: 40px;
    height: 40px;
  }

  .description-container {
    flex-grow: 1;
  }

  .dual-logo {
    display: flex;
    justify-content: space-evenly;
    height: 100%;
  }

  .title-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-05);

    > h4 {
      margin: 0;
      margin-right: var(--spacing-05);
    }
  }

  p {
    margin-bottom: var(--spacing-05);

    &:last-child {
      margin-bottom: var(--spacing-00);
    }
  }
}

@include media-breakpoint-down(md) {
  .settings-widget-container {
    grid-template-columns: 1fr;

    .title-row {
      display: unset;
    }
  }
}

// Prevents icon from large account linking sections, such as the git bridge,
// from rendering in the center of the widget, anchoring it to the top
.linking-icon-fixed-position {
  align-self: start;
  padding-top: var(--spacing-05);
}

// overrides the default `Col` padding, as the inner `affiliations-table-cell` has its own padding, and
// the content length of the git-bridge token table is pretty much fixed (tokens and dates)
.linking-git-bridge-table-cell {
  padding-right: 0;
}

.linking-git-bridge-revoke-button {
  padding: var(--spacing-01) var(--spacing-02);
}

.security-row {
  .line-header > b {
    color: var(--content-primary);
  }

  color: var(--content-secondary);
  display: flex;
  flex-direction: row;
  padding: var(--spacing-03) 0;

  .icon {
    color: var(--content-primary);
    display: flex;
    flex: 1 1 7%;
    padding: 0 var(--spacing-06);
    margin-top: var(--spacing-06);
  }

  .text {
    flex: 1 1 93%;
    display: flex;
    flex-direction: column;
    margin-right: var(--spacing-06);
  }

  .button-column {
    display: flex;
    align-items: center;
  }

  .status-label {
    @include body-sm;

    border-radius: var(--border-radius-base);
    padding: var(--spacing-01) var(--spacing-02);
    margin-top: var(--spacing-02);
    margin-left: var(--spacing-04);
    flex-shrink: 0;

    &.status-label-configured {
      background-color: var(--bg-accent-01);
      color: var(--content-secondary-dark);
    }

    &.status-label-ready {
      background-color: var(--bg-light-tertiary);
      color: var(--content-primary);
    }
  }
}

#settings-page-root {
  .recaptcha-branding {
    font-size: var(--font-size-01);
    text-align: left;
    padding: 0 0 var(--spacing-04);
  }
}

#settings-page-root,
#action-project-modal {
  &#settings-page-root .confirm-email-form {
    background: var(--bg-light-secondary);
  }

  .confirm-email-form-inner {
    margin: auto;
    padding: var(--spacing-08);
    max-width: 480px;

    label {
      overflow-wrap: anywhere;
    }

    .text-danger {
      display: flex;
      gap: var(--spacing-03);
      padding: var(--spacing-02);
    }

    .form-actions {
      margin-top: var(--spacing-05);
      display: flex;
      flex-direction: column;
      gap: var(--spacing-05);

      button {
        white-space: normal;
      }

      .btn-danger-ghost:not(:hover) {
        background: transparent;
      }
    }
  }
}