.process_drawer {

  >.ant-drawer-content-wrapper {
    >.ant-drawer-content {
      >.ant-drawer-wrapper-body {
        >.ant-drawer-body {
          padding: 0;
          background-color: var(--saas-crud-advanced-modle-body-color);
          display: flex;
          flex-direction: column;

          .ant-spin-container {
            .flow-drawer-header {
              position: relative;
              display: flex;
              justify-content: space-between;
              color: var(--saas-font-size-black);
              border-bottom: 1px solid var(--saas-border-color);
              border-radius: 2px 2px 0 0;
              height: 38px;
              line-height: 38px;
              background-color: var(--saasBodyMessageTablePaginationColor);
              font-size: 16px;
              letter-spacing: 1px;


              .left-text {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 36px;
                font-weight: 500;
                color: var(--saas-font-size-black);
              }

              .flow-drawer-extra {
                width: 72px;
                font-weight: 500;
                color: var(--saas-font-size-black);
                display: flex;
                flex-direction: column;

                .flow-drawer-icon {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  height: 36px;

                  >span {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                  }

                  .right-text-icon {
                    cursor: pointer;

                    >span {
                      width: 22px;
                      height: 22px;
                      border-radius: 50%;
                      background-color: #cde1fd;
                      color: #287ef0;
                      display: inline-block;

                      svg {
                        position: relative;
                        top: 2px;
                      }
                    }
                  }
                }

                .flow-drawer-file {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  height: 25px;

                  span {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    color: var(--saas-font-size-black);

                  }

                  .right-text-icon:nth-child(2) {
                    svg {
                      top: 0.25rem;

                      g {
                        fill: var(--saas-font-size-black);
                      }
                    }
                  }
                }

                .characteristic_but {
                  .characteristic_but_icon {
                    position: relative;

                    svg {
                      font-size: 12px;
                    }

                    .characteristic_but_icon_div {
                      position: absolute;
                      z-index: 1;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
              }

              .flow-drawer-header-title {
                flex: 1;
                font-weight: 500;
                font-size: 16px;
                text-align: center;
                overflow: hidden;

                .detailed_title {
                  display: flex;
                  background-color: var(--saasBodyMessageTablePaginationColor);
                  justify-content: space-between;
                  align-items: center;
                  overflow: hidden;

                  .detailed_title_left {
                    display: flex;
                    line-height: 42px;
                    max-width: calc(100% - 48px);

                    .detailed_title_img_text {
                      display: flex;
                      flex: 1;
                      max-width: calc(100% - 42px);

                      .detailed_title_img {
                        display: inline-block;
                        width: 32px;
                        font-size: 32px;
                        margin-right: 10px;
                        height: 32px;
                      }

                      .detailed_title_text {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-weight: 600;
                        font-size: 16px;
                        flex: 1;
                        margin-right: 10px;
                        height: 42px;
                      }
                    }

                    .process_content_icon {
                      height: 32px;
                      font-size: 32px;

                      svg.process {
                        top: 0;
                      }
                    }


                  }
                }

                .detailed_Mobile {
                  .detailed_title_left {
                    align-items: center;

                    .process_content_icon {
                      font-size: 12px;
                      height: 18px;
                      padding: 0px 4px;
                      border-radius: 3px;
                      color: #fff;
                      line-height: 18px;
                    }

                    .process_content_pass {
                      background-color: #13B478;
                    }

                    .process_content_revert {
                      background-color: #FDA71E;
                    }

                    .process_content_doing {
                      background-color: #287EF0;
                    }

                    .process_content_refuse {
                      background-color: #FF3A3A;
                    }

                    .process_content_return {
                      background-color: #FDA71E;
                    }
                  }
                }

                .characteristic {
                  padding: 0px 12px 10px 0px;
                  color: var(--saas-font-size-dark-black);
                  font-size: 12px;
                  line-height: 17px;
                  text-align: left;

                  .characteristic_but {
                    vertical-align: middle;
                    font-size: 12px;

                    g {
                      fill: var(--saas-font-size-dark-black);
                    }
                  }
                }
              }
            }

            .ImageControl-flow-drawer-header {
              .flow-drawer-title {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }

            .ImageControl-body {
              flex: 1;
              overflow: hidden;

              .ImageControl-Document {
                background-color: rgba(237, 239, 242);
                padding: 10px 25px;

                .react-pdf__Page {
                  margin-bottom: 10px;

                  &:nth-last-child(1) {
                    margin-bottom: 0px;
                  }
                }
              }
            }

            .flow-drawer-header-mobile {
              height: auto;
              padding: 12px 0 0px 12px;
            }

            .detailed_information {
              flex: 1;
              overflow: auto;

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

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

              &::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, .2);
                border-radius: 5px;
                border: 1px solid #f1f1f1;
                -webkit-transition: background-color .3s;
                transition: background-color .3s;
              }

              &::-webkit-scrollbar-track {
                background: #f8f8f8;
              }
            }
          }

          .ant-spin-nested-loading:nth-child(2) {
            flex: 1;
            overflow: hidden;

            .ant-spin-container {
              height: 100%;
              display: flex;
            }
          }

        }

        .ant-drawer-footer {
          background-color: var(--saas-crud-advanced-modle-body-color);
          border-top-color: var(--saas-border-color);
        }
      }
    }
  }

  .handling_opinions {
    text-align: right;

    .flowButtonList_button {
      max-width: 200px;
      border-radius: 4px;
      margin: 0 3px;
      background-color: #f7f7f7;
      color: #1890FF;
      margin-right: 3px;
    }

    .flow_revert {
      color: #fff;
      background-color: #FDA71E;
      border-color: #FDA71E;
    }

    .flow_cancel {
      color: #000000d9;
      border-color: #d9d9d9;
      background: #fff;
    }
  }

  >.ant-modal-content {
    border-radius: 8px;
    overflow: hidden;

    .ant-modal-close {
      .ant-modal-close-x {
        width: 33px;
        height: 24px;
        line-height: 24px;
        font-size: 14px;

        &:hover {
          background-color: #e3636e;
        }
      }
    }

    .ant-modal-header {
      border-bottom-color: transparent;
      height: 16px;
      padding: 0;
      cursor: move;

      .ant-modal-title,
      #process_drawer_title {
        height: 100%;
      }
    }

    >.ant-modal-body {
      min-height: 300px;
      max-height: calc(100vh - 250px);
      overflow: auto;
      padding: 0px 75px 0px;

      @media screen and (min-width:1280px) and (max-width:1440px) {
        max-height: 340px !important;
      }

      @media screen and (min-width:1441px) and (max-width:1680px) {
        max-height: 450px !important;
      }
    }

    .ant-modal-footer {
      padding: 10px 75px 0px;
    }
  }
}

.custom-modal-container {
  width: 730px !important;

  .custom-modal-container-body {
    max-height: 400px;
    clear: both;
    padding-left: 14px;
    overflow: auto;

  }
}

.ant-modal-centered {
  .ant-modal.infoModalConfirm {
    text-align: center;

    .ant-modal-content {
      width: 280px;
      height: 120px;
      border-radius: 8px;
      overflow: hidden;
      display: inline-block;

      .ant-modal-body {
        .ant-modal-confirm-body {
          .ant-modal-confirm-title {
            font-weight: bold;
            text-align: center;
          }
        }

        .ant-modal-confirm-btns {
          text-align: center;
          width: 100%;
          position: absolute;
          left: 0;
          margin-top: 0;
          display: flex;
          justify-content: center;
          flex-wrap: nowrap;
          bottom: 0;

          .ant-btn {
            width: 50%;
            height: 45px;
            font-size: 18px;
            color: #1677ff !important;
            border-radius: 0 !important;

          }

          .ant-btn+.ant-btn {
            margin-left: 0;
            font-weight: bold;
            background-color: transparent !important;
            border-color: #d9d9d9 !important;
            border-radius: 0
          }
        }
      }
    }
  }
}