.picture-rect-modal {
  &.modal-component .modal-content {
    padding: 0;
    height: auto;
    .picture-view-layout {
      margin: 0 auto;
    }
  }
  .ant-modal-close {
    .ant-modal-close-x {
      width: 43px;
      height: 43px;
      line-height: 43px;
    }
  }
  .ant-modal-header {
    padding: 10px 24px;
    .ant-modal-title {
      font-size: var(--fs-default);
      font-weight: 700;
    }
  }

  .ant-modal-body {
    height: 584px;
  }
  .picture-rect-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .footer-button {
      text-align: center;
      width: 104px;
      height: 28px;
      line-height: 26px;
      margin: 8px 4px;
      cursor: pointer;
      border: 1px solid #ccc;
      font-size: var(--fs-small);;
      transition: all 0.3s;
      color: #333;
      &:hover {
        color: var(--primary);
        border-color: var(--primary);
        .anticon {
          color: var(--primary);
        }
      }
      .anticon {
        color: var(--icon);
        font-size: var(--fs-default);
        position: relative;
        top: 1px;
        margin-right: 4px;
      }
    }
  }
}
&.picture-rect-modal-no-footer {
  .ant-modal-body {
    height: 540px;
  }
}
