h1 {
  margin-bottom: 48px;
}

.setting-row {
  display: flex;
  align-items: center;
  max-width: 650px;
  margin-bottom: 20px;

  #avatar-container {
    position: relative;
    border-right: 16px solid transparent;
    cursor: pointer;

    mat-icon {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 30;
    }
    > app-avatar {
      width: 75px;
      height: 75px;
    }
  }
}
.setting-info-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;

  > label {
    text-transform: uppercase;
  }
  > span {
    max-width: 400px;
  }
}

.setting-button-col {
  input,
  button {
    margin: 4px;
  }

  button {
    flex-shrink: 0;
  }
}

:host {
  display: flex;
  height: 100%;

  > div {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;

    > div {
      position: absolute;
    }
  }
}

.flex {
  display: flex;
}

mat-icon {
  font-size: 14px;
}
