.relation-dialog {
  position: relative;
  width: 500px;

  &__container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  &__detail {
    flex: 1;
  }

  .close-icon {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .line {
    width: 100%;
    height: 1px;
    margin-top: 15px;
    margin-bottom: 5px;

    border-bottom: 1px solid var(--color-gray-eee);
  }

  .remove-relation {
    display: flex;

    &-icon {
      display: flex;
      align-self: center;
      margin-right: 3px;
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 70px !important;
    margin: 0 20px;

    background-color: white !important;
    border-top: 1px solid lightgray;

    &__close {
      margin-right: 10px;
    }
  }
}