.quickQuote {
  width: 100vw;
  height: 100vh;
  padding-top: 50px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;

    :global {
      .ant-btn-primary {
        border-radius: 5px;
      }

      .ant-col-23 {
        display: flex !important;
      }

      .ant-divider {
        margin: 0 0 5px 0;
        height: 26px;
      }
    }

    .back {
      position: absolute;
      top: 5px;
      left: 218px;
      z-index: 10;
      border: 1px solid #d7d7d7;
      border-right-width: 0;
    }

    .rightContent {
      flex: 1;
      background: #f8fafe;
      overflow: auto;

      .divider {
        color: #000;
        font-size: 18px;

        &:before,
        &:after {
          // border-width: 2px;
          border-color: #d7d7d7;
        }
      }

      .tabs {
        height: auto;

        :global {
          .ant-tabs {
            .ant-tabs-nav {
              margin-bottom: 0;
            }
          }

          .ant-tabs-nav-wrap {
            padding-left: 20px;
          }

          .ant-tabs-tab-btn {
            font-size: 16px;
          }

        }
      }

      .hideTab {
        :global {
          .ant-tabs-nav {
            display: none;
          }
        }
      }

      .viewTable,
      .viewTable1 {
        width: 100%;
        height: auto;
        padding: 0 20px 0 10px;
        flex: 1;

        :global {
          .viewStyle {
            background-color: transparent;
          }

          .ant-form-item-label {
            background-color: transparent !important;
            color: #000 !important;
            flex: 0 0 70px !important;
            max-width: 70px !important;
            text-align: right !important;
          }

          .ant-form-item-control {
            flex: 1;
            max-width: calc(100% - 70px);
          }

          .viewStyle {
            .ant-input-number {
              width: 100% !important;
            }

            .ant-col {
              margin-bottom: 2px;
            }
          }
        }
      }

      .viewTableDownView,
      .viewTableDownView1 {
        :global {
          .viewStyle {
            margin-top: 0 !important;
            padding-right: 14px;

            .ant-form-item-label {
              flex: 0 0 70px !important;
              max-width: 70px !important;
            }

            .ant-form-item-control {
              max-width: calc(100% - 95px);
            }
          }

          .ant-form-item-required {
            &::before {
              content: '' !important;
            }

            color: #ff4d4f !important;
          }
        }

        .subViewTable {
          width: 100%;
          height: auto;

          :global {
            .ant-form-item-row {
              flex-direction: row-reverse;
            }

            .ant-form-item-label {
              flex: 0 0 25px !important;
              max-width: 25px !important;

              >label {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: center;

                &::before {
                  content: none;
                  width: 0;
                }

                &::after {
                  content: none;
                  width: 0;
                }
              }
            }

            .ant-form-item-control {
              flex: 1;
              max-width: calc(100% - 25px);
            }

            .viewStyle>.ant-col-24 {
              padding-left: 100px;
            }
          }
        }
      }

      .viewTableDownView1 {
        :global {
          .viewStyle {
            .ant-form-item-control {
              max-width: calc(100% - 60px);
            }
          }
        }
      }

      .viewTableDownView2 {
        background-color: #3275b734;

        :global {
          .viewStyle {
            margin-top: 5px !important;
          }
        }
      }

      .viewTable1 {
        padding: 0 20px 0 0;
      }

      .boxRadio {
        width: 100%;
        height: 30px;
        padding: 5px 0 0 10px;
      }

      .boxPart1 {
        width: 100%;
        height: auto;
        display: flex;
        padding: 0 10px 0 10px;

        .boxPart1Left {
          flex: 1;
          border-right: 1px solid #d7d7d7;
        }

        .boxPart1Right {
          width: auto;
          height: auto;

          .boxRreview {
            width: 100%;
            height: auto;
            display: flex;

            // align-items: center;
            .svgBox {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }

            :global .ant-carousel .slick-dots li button {
              background-color: #000;
              /* 未激活时的指示器颜色 */
            }

            :global {
              .ant-image {
                // padding: 15px;

              }
            }

            .noImg {
              width: 300px;
              height: 300px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #d7d7d7;
              font-size: 16px;

              &:first-child {
                border-left: 0;
              }
            }

            .boxRreviewTitile {
              width: 100%;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 18px;
            }
          }
        }
      }

      .boxPinbanInfo {
        width: 100%;
        height: auto;
        padding: 0 10px 0 10px;
        display: flex;
        position: relative;

        >div:first-child {
          flex: 1;
          border-right: 1px solid #d7d7d7;
        }

        >div:nth-child(2) {
          >div:first-child {
            display: flex;
          }
        }

        .boxComponent {
          width: 400px;
          height: 300px;
          position: relative;

          // overflow: hidden;
          .boxComponentWidth {
            position: absolute;
            bottom: -10px;
            left: 0px;
            width: 400px;
            height: 10px;
            border: 1px solid #333;
            border-top: transparent;

            .boxComponentWidthTitle {
              width: 400px;
              height: 10px;
              position: absolute;
              top: 15px;
              left: 0px;
              line-height: 10px;
              font-size: 18px;
              text-align: center;
            }
          }
        }

        .boxComponent1 {
          width: 300px;
          height: 300px;
          // border: 1px solid #d7d7d7;
          position: relative;
          overflow: hidden;
        }
      }

      .boxPinbanBtn {
        position: absolute;
        top: 0;
        left: 200px;
      }

      .boxPart2 {
        width: 100%;
        height: auto;
      }

      .many {
        width: 100%;
        height: 185px;
        padding: 0 10px 0 10px;
        position: relative;

        .btns {
          position: absolute;
          top: -40px;
          right: 10px;
          height: 40px;
          min-width: 40px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          background-color: #f8fafe;
          gap: 10px;

          :global {
            .ant-btn {
              border-radius: 5px;
            }
          }

          .confirmOrder {
            background-color: #53b637;
            border-color: #53b637;
          }
        }
      }

      .materialsLine {
        display: flex;

        .materialsViewTable {
          flex: 1;

          :global {
            .viewStyle {
              margin-top: 0 !important;
            }

            .ant-col-4 .ant-col-7 {
              flex-basis: 50px !important;
            }
          }
        }

        .materialsBtns {
          width: 10%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          padding-bottom: 10px;

          :global {
            button {
              padding: 0;
              width: 16px;
              height: 16px;
              line-height: 12px;
              >span {
                font-size: 10px;
              }
            }

            .ant-btn:nth-child(2) {
              background-color: #53b637;
              border-color: #53b637;
            }
          }
        }
      }

      .productNameBtns {
        position: absolute;
        top: 1px;
        right: 2px;

        :global {
          button {
            width: 20px;
          }
        }
      }
    }
  }
}

.leftTree,
.boxTree {
  width: 250px;
  height: 100%;
  background: var(--xly-skin-header-color, #383d41);
  padding: 10px 0 0 10px;
  overflow: hidden;

  :global {
    .ant-tree {
      background: transparent;

      .ant-tree-treenode {
        padding-bottom: 10px;
      }

      .ant-tree-title {
        color: #fff;
        font-size: 14px;
        font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,
          Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;

        // font-weight: bold;
      }

      .ant-tree-node-content-wrapper.ant-tree-node-selected {
        background-color: #00a183;
      }

      .ant-tree-node-content-wrapper:hover {
        background-color: #009688;
      }
    }
  }
}

.boxTree {
  background: transparent;

  :global {
    .ant-tree {

      .ant-tree-title,
      .ant-badge {
        color: #5c6374;
        font-size: 16px;
        font-weight: bold;
      }

      .ant-tree-node-content-wrapper.ant-tree-node-selected {
        background-color: #bae7ff;
      }

      .ant-tree-node-content-wrapper:hover {
        background-color: #bae7ff;
      }
    }
  }
}

.overFlow {
  overflow: auto;
}

.boxModal {
  width: 100%;
  height: calc(100vh - 335px);
  display: flex;

  .boxTree {
    width: 200px;
    height: 100%;
  }

  .boxTable {
    width: calc(100% - 200px);
    height: 100%;

    :global {
      .ant-table-body {
        tr {

          .ant-table-cell:nth-child(3),
          .ant-table-cell:nth-child(4) {
            text-align: center;
          }
        }
      }
    }
  }
}

.downOperations {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  z-index: 1;

  :global {
    button {
      padding: 0;
      width: 16px !important;
      height: 16px;
      line-height: 12px;
      >span {
        font-size: 10px;
      }
    }
  }
}

.sParamConfig {
  :global {
    .ant-form-item-label {
      label {
        &::before {
          content: "" !important;
          display: block !important;
          width: 5px !important;
          min-width: 5px;
          height: 5px !important;
          border-radius: 50% !important;
          background-color: #ff4d4f !important;
          margin-right: 2px !important;
        }
      }
    }
  }
}