.before-and-after-selection {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;

  .signing-prompt {
    color: rgba($color: #000000, $alpha: 0.45);
  }

  .countersigner_form {
    margin-bottom: 0;

    .countersigner_form_btn {
      .form_btn {
        margin-right: 5px;
      }

      .form_btn:nth-last-child(1) {
        margin-right: 0px;
      }
    }
  }
}

.sign-off-method {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;

  .countersigner_form {
    margin-bottom: 0;

    .countersigner_form_btn {
      .form_btn {
        margin-right: 5px;
      }

      .form_btn:nth-last-child(1) {
        margin-right: 0px;
      }
    }
  }
}

.signed-by {
  margin-bottom: 10px;

  .item-title {
    font-size: 13px;
    color: rgba($color: #000000, $alpha: 0.85);
  }

  >.item-select {
    display: flex;
    padding: 5px 0;
    flex-wrap: wrap;

    .item-bat {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: #FFFFFF;
      border: 1px solid rgba(0, 0, 0, 0.06);
      cursor: pointer;

      &:hover {
        span {
          color: #1890ff;
        }
      }
    }


  }
}

.endorsement-review_Mobile {


  .signed-by {
    background-color: #fff;
    padding: 5px 12px;
    margin: 10px 0;

    .item-title {
      margin-bottom: 8px;
      display: inline-block;
    }

  }

  .before-and-after-selection {

    .signing_method {
      padding: 5px 12px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .signing-prompt {
      padding: 5px 12px;
    }
  }

  .sign-off-method {
    flex-direction: row;
    background-color: #fff;
    padding: 5px 12px;
    align-items: center;
  }

  .endorsement-approval {
    background-color: #fff;
    padding: 5px 12px;
    margin-bottom: 10px;
    align-items: center;
  }

  .endorsement_button {
    padding: 10px 20px;

    .Button_Mobile {
      border-radius: 4px;
    }
  }
}

.process_drawer_amis>.ant-drawer-content-wrapper>.ant-drawer-content>.ant-drawer-wrapper-body>.ant-drawer-header .ant-drawer-header-title .ant-drawer-close .left-text {
  font-size: 14px;
}

.item-select-list-item-content {
  margin-bottom: 5px;
  overflow: auto;

  .item-select-tag {
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background-color: #F2F2F2;
    border-color: transparent;


    .item-select-tag-img {
      width: 32px;
      height: 32px;
      font-size: 32px;
      margin-right: 5px;

      svg {
        top: 0;
      }
    }

    .item-select-tag-text {
      max-width: 60px;
      margin-right: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-select-tag-btn {
      transform: rotate(45deg);
      font-size: 22px;
      color: #ccc;
      cursor: pointer;
    }

    &:hover {
      background-color: #1890ff;

      .item-select-tag-text,
      .item-select-tag-btn {
        color: #fff;
      }
    }
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #fff;
  }

  .toggle-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    transition: all ease-in .2s;
    overflow-y: auto;
    font-size: 14px;
    color: #000;

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

    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #fff;
    }
  }
}