#account_team {
  // * ----------------
  // มีบางส่วนใช้ร่วมกับ หน้า _setting.scss
  // ----------------

  .user_group {
    font-size: 14px;

    &__name {
      position: relative;
      margin-bottom: 30px;

      &--title {
        font-weight: bold;
        background: #fff;
        padding-right: 20px;
        width: fit-content;
        z-index: 1;
				position: inherit;
				font-size: $font-size-mid-large;
      }
      &--bar {
        content: "";
        border-bottom: 1px solid #ddd;
        width: 100%;
        display: block;
        position: absolute;
        top: 50%;
      }
    }

    &__account {
      margin-left: 5%;
      margin-bottom: 30px;

      &--group {
        display: flex;
        margin-bottom: 20px;
        position: relative;
      }

      &--nopermission {
        opacity: 0.5;
        text-align: center;
        width: 100%;
      }

      &--email {
				width: 80%;
				font-size: $font-size-normal;
        display: flex;
        align-items: center;
        &:before{
          content: '';
          display: inline-block;
          width: 20px;
          height: 20px;
          background-image: url('../../imgs/email_icon.svg');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          margin-right: 10px;
        }
      }
      &--manage {
        width: 20%;
        text-align: right;
        position: relative;

        img.delete__icon {
          height: 14px;
        }
      }
      &--account {
        text-decoration: underline;
      }
      &--icon {
        height: 14px;
      }
      &--add {
        background: #00bcd4;
        color: #fff;
        text-align: center;
        width: fit-content;
        padding: 12px 20px;
        border-radius: 5px;
        cursor: pointer;
        margin-left: 5%;
				margin-bottom: 40px;
				font-size: $font-size-small;
      }
      .pending {
        color: #999;
      }
    }

    &__account.disable {
      opacity: 0.5;
    }

    .output-error {
      position: absolute;
      top: 21px;
      left: 30px;
      font-size: 9px;
      color: red;
    }
  }
  .dropdown_option {
    &--option {
      display: none;
      position: absolute;
      top: 0;
      right: 20px;
      box-shadow: 1px 1px 1px #ddd;
      z-index: 1;

      li {
        display: block;
        padding: 10px 15px;
        background: #fff;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
      }
      li:hover {
        background: #e7f3fb;
      }
    }
  }
  // .node{
  // 	border-top: 1px solid #ddd;
  // 	padding-top: 30px;
  // }
  .permission_detail {
    border: 1px solid rgba(221, 221, 221, 0.46);
    padding-bottom: 15px;
		font-size: $font-size-normal;

    &__header {
      display: flex;
      align-items: flex-start;
      min-height: 3em;
      background: rgba(221, 221, 221, 0.46);
      font-weight: 400;
			margin-bottom: 15px;
			padding: 12px 0;
    }
    &__body {
      display: flex;
      align-items: flex-start;
			margin-bottom: 12px;
		}
		&__body:last-child {
			margin-bottom: 0px;
    }
    &__title {
      width: 55%;
      padding-left: 35px;
    }
    &__value {
      width: 15%;
      text-align: center;

      img {
        width: 17px;
      }
    }
  }

  .branch{
    &__title{
      font-weight: 700;
    }
    &__line{
      display: flex;
      margin-bottom: 10px;
      margin-left: 30px;

      &--name{
        width: 80%;
        display: flex;
        align-items: center;

        &:before{
          content: '';
          display: inline-block;
          width: 20px;
          height: 20px;
          background-image: url('../../imgs/icon_line.svg');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          margin-right: 10px;
        }
      }
      &--manage{
        width: 20%;
        text-align: right;
        position: relative;

        img.delete__icon {
          height: 14px;
        }
        .add{
          text-decoration: underline;
          color: #1c8820;
          margin: 0 10px;
          font-size: 15px;
        }
        .delete{
          text-decoration: underline;
          color: #d41e11;
          font-size: 15px;
        }
      }
      
    }
  }

  @media only screen and (max-width: 992px) {
    .user_group {
      &__account {
        &--group {
          font-size: 12px;
        }
        &--email {
          width: 70%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &--manage {
          width: 30%;
        }
        &--icon {
          padding-left: 30px;
        }
      }
    }
    .dropdown_option {
      &--option {
        width: max-content;
      }
    }
    .permission_detail {
			padding-bottom: 10px;
			font-size: $font-size-very-small;

      &__header {
        min-height: 4em;
        margin-bottom: 10px;
      }
      &__title {
        padding-left: 10px;
      }
      &__value {
        img {
          width: 15px;
        }
      }
    }
    .branch{
      &__line{
        margin-left: 10px;
        
        &--manage{
          .add{
            margin: 0;
          }
        }
      }
    }
  }

  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
      .user_group {
        &__name {
          &--title {
            display: table;
          }
        }
      }
    }
  }

  @-moz-document url-prefix() {
    .user_group {
      &__name {
        &--title {
          display: table;
        }
      }
    }
  }
}

#setting {
  .popupModel {
    input {
      width: 100%;
      line-height: 35px;
      padding-left: 10px;
      border-radius: 3px;
    }
    .inputGroup {
      margin-bottom: 10px;
    }
    .inputfield {
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      border-radius: 3px;
      padding: 0 10px;

      input {
        border: 0;
				padding: 0;
				font-size: $font-size-normal;
      }

      ::placeholder {
        font-weight: 100;
        font-style: italic;
      }

      &__clear {
        width: 17px;
        cursor: pointer;
      }
    }
    .notEmpty {
      border-color: #595959;
    }
  }
}
#successModal {
  text-align: center;
  .popup {
    &__contrl {
      justify-content: center;
    }
  }

}