.setting-page {
  ion-row {
    img {
      position: absolute !important;
      opacity: 0.3% !important;
      top: -100px;
    }
    div {
      background: var(--ion-color-primary);
      width: 100%;
      height: 100px;
      height: 200px;
    }
  }
  ion-grid {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    color: white;
    padding-top: 20px;
    padding-bottom: 0;
    ion-row {
      ion-col {
        text-align: center;
        ion-avatar {
          margin-left: auto;
          margin-right: auto;
          width: 64px;
          height: 64px;
        }
        h2 {
          margin-top: 10px;
          font-weight: bold;
        }
        p {
          margin-top: 10px;
          margin-bottom: 8px;
        }
        ion-button {
          height: 30px;
          --background: var(--ion-color-light);
          color: var(--ion-color-primary-shade);
        }
      }
    }
  }
  ion-list {
    background: #fafafa;
    padding-bottom: 0;
    ion-item {
      --background: white;
      padding-bottom: 0;
      ion-toggle {
        padding-right: 0;
        --background-checked: var(--ion-color-primary-tint);
        --handle-background-checked: var(--ion-color-primary);
      }
      ion-icon {
        color: black;
      }
      p {
        font-size: 16px;
        color: black;
      }
    }
    &:last-child {
      padding-top: 0;
    }
  }
  ion-item {
    ion-button {
      width: 100%;
      margin: 0;
      height: 30px;
    }
  }
}
#nametxt {
  height: 64px;
  width: 64px;
  border-radius: 100px;
  background: var(--ion-color-secondary);
  font-size: 35px;
  line-height: 60px;
  text-transform: uppercase;
}
.avatar-icon {
  font-size: 64px !important;
  color: lightgray;
}
.row-img {
  opacity: 0.1 !important;
}
