.eacf7-settings {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;

  * {
    box-sizing: border-box;
  }

  .settings-menu {
    display: flex;
    flex-direction: column;
    width: 200px;
    margin-right: 20px;
    border-right: 1px solid #e5e5e5;
    min-height: calc(100vh - 120px);
    border-radius: 7px;
    position: sticky;
    top: 32px;
    background: #fff;
    z-index: 1;
    overflow: hidden;

    &-item {
      padding: 10px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      align-items: center;
      width: 100%;

      &:hover {
        background: #f7f7f7;
      }

      i {
        margin-right: 7px;
      }

      .title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

  }

  .settings-form {
    flex: 1;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .13);
    min-height: calc(100vh - 120px);
    position: relative;
  }

  .settings-content {
    &-header {
      h2 {
        margin-top: 0;
      }

      margin-bottom: 15px;
      border-bottom: 1px solid #e5e5e5;
    }
  }

  .settings-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;

    &-label {
      width: 180px;
      margin-right: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;

      &:after {
        content: ':';
        margin-left: auto;
      }
    }

    .settings-item-content {
      flex: 1;

      input[type="text"],
      input[type="number"],
      select,
      textarea {
        width: 100%;
        max-width: 350px;
        padding: 5px;
        border: 1px solid #e5e5e5;
        border-radius: 7px;
        font-size: 14px;
        transition: all 0.2s ease-in-out;
        outline: none;

        &:focus {
          border-color: #007cba;
        }
      }

      .description {
        margin-top: 7px;
        font-size: 12px;
        color: #666;
      }

    }

    &.accounts {
      flex-direction: column;
      align-items: flex-start;

      label {
        font-size: 2rem;
        display: block;
        margin-bottom: 2rem;
      }

      .eacf7-auth-btn {
        background: #FFF;
        border: 1px solid #e5e5e5;
        color: #000;

        &:hover {
          background: #f7f7f7;
        }

        img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
      }

      .account-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
          border-radius: 50%;
        }

        .account-item-info {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex: 1;
          margin-right: 20px;

          .account-item-name {
            font-weight: bold;
          }

          .account-item-email {
            font-size: 0.8rem;
          }

        }

        .date {
          display: flex;
          align-items: center;
          margin-right: 20px;

          &-value {
            margin-left: 10px;
          }
        }

        .account-item-action {
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease-in-out;
          border-radius: 5px;
          padding: 5px 10px;
          background: #FFF;
          border: 1px solid #e5e5e5;
          color: #000;

          &:hover {
            background: #f7f7f7;
          }

          i {
            margin-right: 7px;
          }
        }


      }
    }
  }

}