h1{
    margin-bottom: 48px;
}

.setting-row {
  display: flex;
  align-items: center;
  max-width: 600px;
  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;
  }
}

.slider-col{
  flex: 1 1 0;

  mat-slider{
    width: 100%;
  }
}


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

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

    > div {
      position: absolute;
    }
  }
}