@primary: #46c0d9;
@buttonStress: #fff;
@buttonReduce: #f53654;
@primary10: #ee1b40;
@bgTheme: #ffdfe5;
@bgWhite: #ffffff;
@bgSecond: #f7f8f9;
@bgThird: #edf0f2;
@bgMask: rgba(90, 95, 113, 0.6);
@textPrimary: #000000;
@textSecond: #7987a3;
@textThird: #c3c5ca;
@textUnable: #bcc0ce;
@textWhite: #ffffff;
@textUniversal: rgba(106, 81, 39, 1);
@error: #ff3d71;
@error10: rgba(255, 72, 133, 0.1);
@warn: #ff820e;
@warn10: rgba(255, 130, 14, 0.1);
@success: #09ca97;
@success10: rgba(9, 202, 151, 0.1);
@link: #3763ff;
@unifyBlack: #000000;
@unifyWhite: #ffffff;
@contentBorder: #edf0f2;
@isMobile: true;
body,
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: @isMobile;
  .content {
    flex: 1;
    padding: 0 0px;
    min-height: 100vh;
    max-width: 100%;
    background: @bgTheme;
  }
}

.ant-modal-header {
  border-radius: 16px !important;
  border: none !important;
  padding-top: 24px !important;
}
.ant-modal-title {
  text-align: left;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.ant-tooltip {
  font-size: 12px !important;
  font-weight: 400 !important;
  z-index: 1000 !important;
}

.ant-tooltip-inner {
  border-radius: 8px !important;
  background: @unifyBlack !important;
  color: @bgWhite !important;
  padding: 12px 16px !important;
}

.ant-tooltip-arrow-content {
  width: 9px !important;
  height: 9px !important;
  --antd-arrow-background-color: @unifyBlack !important;
  background: @unifyBlack !important;
}
.isMobileModalFunc (@a) when (@a=true) {
  min-width: 100% !important;
  top: 0 !important;
  margin: 0 !important;
  height: 100vh !important;
}
.isMobileModalContentFunc (@a) when (@a=true) {
  position: relative !important;
  bottom: 0 !important;
  min-width: 100% !important;
  position: absolute !important;
  border-radius: 16px 16px 0 0 !important;
  max-height: ~"calc(100vh - 57px)" !important;
  .ant-modal-body {
    overflow: auto;
    max-height: ~"calc(100vh - 120px)" !important;
  }
}
.ant-modal {
  min-width: 448px !important;
  // top: 100px !important;
  margin: 8px auto !important;
  height: auto !important;
  // background: @bgWhite !important;
  border-radius: 16px !important;
  padding-bottom: 0 !important;
  .isMobileModalFunc(@isMobile);
}
.ant-modal-header {
  background: @bgWhite !important;
  .ant-modal-title {
    color: @textPrimary !important;
  }
}
.ant-modal-close-x {
  color: @textSecond !important;
  font-size: 20px !important;
}
.ant-modal-content {
  min-width: 448px !important;
  max-height: auto !important;
  border-radius: 16px !important;
  background: @bgWhite !important;
  .ant-modal-body {
    overflow: unset;
    max-height: none;
  }
  .isMobileModalContentFunc(@isMobile);
}
.swapBtn {
  background: @primary !important;
  color: #ffffff !important;
}
.swapBtn:focus {
  background: @primary !important;
}
.swapBtn:hover {
  background: @buttonReduce !important;
}
.redType {
  background: @error !important;
  color: @unifyWhite !important;
}
.redType:focus {
  background: @error !important;
}
.redType:hover {
  background: @error !important;
}
.ant-btn[disabled] {
  background: @bgThird !important;
  color: @textUnable !important;
}
// .ant-btn-loading {
//   background: @buttonReduce !important;
//   color: @textPrimary;
// }
.headerChainItemBgIsMobileFunc (@a) when (@a=true) {
  height: 36px;
}

.headerChainItemBg,
.headerChainItemBgHover {
  background: @primary10;
  border-radius: 12px;
  margin-right: 10px;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerChainItemBgIsMobileFunc(@isMobile);

  .chainName {
    color: @unifyBlack;
  }
  // .ant-typography {
  // width: 90px;
  //   color: @bgWhite;
  // }

  .moreChainBtnIsMobileFunc (@a) when (@a=true) {
    width: auto;
  }
  .moreChainBtn,
  .moreChainBtn:focus,
  .moreChainBtn:hover {
    // width: 120px;
    font-weight: bold;
    color: @buttonStress;
    padding: 4px 8px 4px 8px;
    font-size: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    .moreChainBtnIsMobileFunc(@isMobile);
  }

  .chainIcon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  .chainName {
    // width: 70px;
    color: @buttonStress;
    margin-left: 5px;
  }
}

.headerChainItemBgHover {
  background: @buttonStress;
  .chainName {
    color: @unifyBlack;
  }
  // .ant-typography {
  // width: 90px;
  //   color: @unifyBlack;
  // }
}

.ant-dropdown {
  margin-top: 8px !important;
  .headerChainDropDownMenu {
    border-radius: 16px;
    padding: 8px 0px 8px 0px;
    background: @bgWhite;
    .ant-dropdown-menu-item {
      margin: 0px 0px 0px 0px;
      padding: 0px 8px 0px 8px;
    }
    .chainItem {
      width: 100%;
      height: 40px;
      display: flex;
      border-radius: 12px;
      align-items: center;
      background-color: @bgWhite;
      padding-left: 5px;
    }
    .chainIcon {
      width: 20px;
      border-radius: 50%;
    }
    .chainName {
      margin-left: 5px;
      // width: 70px;
      font-size: 12px;
      font-weight: 700;
      color: @textSecond;
    }

    .chainItem:hover {
      .chainName {
        color: @primary;
      }
    }
    .chainItemSelect {
      width: 100%;
      height: 40px;
      display: flex;
      border-radius: 12px;
      align-items: center;
      padding-left: 5px;
      background-color: @primary10;
    }
    .disconnect:hover {
      background-color: @primary10;
    }
  }
  .ant-dropdown-menu-item:hover {
    background: none;
  }
}
.provider {
  border-radius: 40px;
  width: 100%;
  height: 64px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: @bgSecond;
  .prologo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid @bgWhite;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .proarrow {
    margin-right: 25px;
    color: @textSecond !important;
  }
  .protext {
    font-size: 16px;
    font-weight: 500;
    color: @textPrimary;
  }
}
.swapheader {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-top: 15px;
  margin-right: 14px;
  .headLeft {
    display: flex;
    align-items: center;
  }
  .heardlink {
    font-size: 14px;
    font-weight: 600;
    color: @textPrimary;
    cursor: pointer;
    margin-left: 35px;
  }
  .heardlink:hover {
    color: @buttonStress;
  }
  
  .extra {
    position: "absolute";
    margin-right: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .themeIcon {
      box-sizing: border-box;
      //   padding: 7px 0 7px 58px;
    }
    .headerItemBgIsMobileFunc (@a) when (@a=true) {
      height: 36px;
    }
    .headerItemBg {
      background: @primary10;
      border-radius: 12px;
      display: flex;
      align-items: center;
      height: 52px;
      .headerItemBgIsMobileFunc(@isMobile);

      .ant-typography {
        width: 130px;
        color: @buttonStress;
      }

      .historyBtn {
        // width: 100px;
        font-weight: bold;
        color: @buttonStress;
        padding: 4px 10px 4px 10px;
      }
      .historyBtn:focus,
      .historyBtn:hover {
        background: none;
      }
    }
    .headerItemBg:hover {
      background: @primary;
      .historyBtn {
        color: #fff;
      }
    }

    .mobileMenu {
      // width: 100px;
      font-weight: bold;
      color: @buttonStress;
      padding: 4px 10px 4px 10px;
      background: @primary10;
      border-radius: 50%;
      display: flex;
      align-items: center;
      height: 36px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.swapfooter {
  margin: 30px 0px 0px 0px;
  padding: 0px !important;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: @bgTheme !important;
  background: #46c0d9;

  .swapFooterContent {
    margin: 0px;
    padding: 0px;
    width: 100%;
    position: relative;
    .swapFooterBg {
      width: 100%;
    }
    .footlink {
      position: absolute;
      bottom: 28px;
      left: 100px;
      z-index: 20;
      display: flex;
      .footImg {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: @primary;
      }
      .footImg:hover {
        background: @buttonReduce;
      }
    }
  }
}
.headerItemBgaIsMobileFunc (@a) when (@a=true) {
  height: 36px;
}
.headerItemBga,
.headerItemBgaHover {
  background: @primary10;
  border-radius: 12px;
  height: 52px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  .headerItemBgaIsMobileFunc(@isMobile);

  .ant-typography {
    width: 90px;
    color: @buttonStress;
  }

  .addressBtnIsMobileFunc (@a) when (@a=true) {
    width: 70px;
  }
  .addressBtn,
  .addressBtn:focus,
  .addressBtn:hover {
    width: 115px;
    font-weight: bold;
    color: @unifyBlack;
    margin-right: 15px;
    padding: 4px 8px 4px 8px;
    background: none;
    .addressBtnIsMobileFunc(@isMobile);
  }
}

.headerItemBgaHover {
  background: #fff;
  .ant-typography {
    color: @unifyBlack;
  }
}
.connectWalletBtnIsMobileFunc (@a) when (@a=true) {
  height: 36px !important;
}
.connectWalletBtn {
  background: @primary !important;
  font-weight: 600 !important;
  color: #fff !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  margin-right: 14px;
  height: 52px !important;
  .connectWalletBtnIsMobileFunc(@isMobile);
}
.connectWalletBtn:focus {
  background: @primary !important;
}
.connectWalletBtn:hover {
  background: @buttonReduce !important;
}
.indicator {
  width: 8px;
  height: 8px;
  border-radius: 24px;
  vertical-align: middle;
  margin-left: 8px;
  background: @success;
}

.ant-dropdown {
  margin-top: 8px !important;
  .dropDownMenu {
    border-radius: 16px;
    padding: 8px 0px 8px 0px;
    background: @bgWhite;
    .ant-dropdown-menu-item {
      // margin: 3px 0px 3px 0px;
      margin: 0px 0px 0px 0px;
      padding: 0px 8px 0px 8px;
    }
    .disconnect {
      width: 100%;
      height: 40px;
      border-radius: 12px;
      display: flex;
      justify-content: left;
      align-items: center;
      font-weight: 700;
      background-color: @primary10;
      color: @textSecond;
      padding: 3px 12px;
      font-size: 14px;
    }
    .disconnect:hover {
      background-color: @primary10;
    }
  }
}
.notifiBase,
.pendingNoti,.minPendingNoti ,.minNotifiBase{
  color: @textPrimary !important;
  background: @bgWhite !important;
  border-radius: 12px !important;
  width: 400px !important;
  min-height: 235px !important;
  padding: 20px 20px 24px 24px !important;
  margin-right: -10px !important;
  .ant-notification-notice-message {
    margin-top: 5px;
    font-size: 18px !important;
    font-weight: 700;
  }
  .ant-notification-notice-description {
    margin-left: 40px !important;
    .niticontButton {
      position: absolute;
      top: 175px;
      left: -40px;
      width: 130px;
      height: 36px;
      color: @textPrimary;
      font-weight: 600;
      background-color: @buttonStress;
      border-radius: 12px;
      border: 0 solid @buttonStress;
      font-size: 14px;
      align-items: center;
    }
  }
  .ant-notification-close-x {
    color: @textSecond;
  }
}

.notifiBaseShowDetail,.minNotifiBaseShowDetail {
  min-height: 285px !important;
}
.pendingNoti,.minPendingNoti {
  min-height: 280px !important;
}
.ant-notification-notice-close{
  top:16px !important;
}


@media screen and (max-width: 2000px) and (min-width: 440px) {

  .minPendingNoti,.minNotifiBase {
    width: 205px !important;
    max-width:205px !important;
    padding: 9px 12px 12px 12px !important;
    min-height: 94px !important;
    .ant-notification-notice-close{
      top:11px !important;
    }
    .ant-notification-notice-message{
      margin-bottom: 0px !important;
      margin-left: 24px !important;
    }
   
    .notitime{
      display: none !important;
    }
    .niticont {
      width:181px !important;
      top:8px !important;
      padding:4px !important;
      min-height: 40px !important;
      background: @primary10 !important;
      border-radius: 16px !important;
  
      .niticontChain{
        display: flex !important;
        .notitext{
          .notitextNum,.notitextDecimal{ display: none !important;}
        }
        .notiarrw{
          margin: 10px 3px 5px 10px !important;
        }
        .notiarrwImg{
          transform: rotate(0deg) !important;
        }
        .notiIconMidWidth{
          position: relative;
          display: block !important;
        }
        .notiIcon{
          display: none !important;
        }
        .notiTokenIcon{
          width: 30px !important;
          height: 30px !important;
        }
      }
    }
    .notiTips{
      display: none !important;
    }
    .notiLink{
      top:3px !important;
      left:0px !important;
      font-size: 17px !important;
    }
    .niticontButton{
      top:62px !important;
      width: 181px !important;
      height:28px !important;
      font-size: 12px !important;
      line-height:0 !important;
    }
    .notipendingIcon{
      width: 15px !important;
      height: 15px !important;
      font-size: 10px !important;
    }
    .notiMessage{
      font-size: 14px !important;
    }
    .titleIcon{
      font-size: 15px !important;
      width: 15px !important;
      height: 15px !important;
      position: relative  !important;
      top: -5px !important;
    }
  }
  .minNotifiBaseShowDetail {
    min-height: 128px !important;
  }
  
}
@media screen and (max-width: 440px) and (min-width: 350px) {
  .notifiBase,
  .pendingNoti,.minPendingNoti,.minNotifiBase {
    width: ~"calc(100vw - 30px)" !important;
    max-width: ~"calc(100vw - 30px)" !important;
  }
  .niticont {
    width: ~"calc(100vw - 70px)" !important;
    .notiIconMidWidth{
      display: none !important;
    }
    .notiIcon{
      display: block !important;
    }
  }
  
}


.notipendingIcon {
  width: 26px;
  height: 26px;
  background: @warn;
  border-radius: 50%;
  padding: 3px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notiPendingColor {
  color: @warn !important;
}
.notiSuccessColor {
  color: @success !important;
}
.notiErrorColor {
  color: @error !important;
}
.notiMessage {
  font-size: 18px;
  line-height: 1 ;
}
.titleIcon{
  font-size: 26px;
  position: static;
}


.niticont {
  background: @bgSecond;
  border-radius: 12px;
  position: absolute;
  top: 27px;
  left: -40px;
  min-height: 133px;
  width: 350px;
  padding: 12px;
  .niticontChain{
    display: block;
    .notitext{
      .notitextNum,.notitextDecimal{ display: inline-block;}
    }
  }
}

.notimsg {
  display: flex;
  align-items: center;
  justify-content: left;
}
.notiarrw {
  width: 30px;
  margin: 10px 0 5px 5px;
}
.notiarrwImg {
  transform: rotate(90deg);
  img {
    width: 24px;
  }
}
.notiIcon {
  position: relative;
  display:  inline-block;
}
.notiIconMidWidth{
  display: none;
}
.notiTokenIcon {
  width: 34px;
  height: 34px;
  border: 1px solid @unifyWhite;
  border-radius: 50%;
}
.notitime {
  font-size: 12px;
  font-weight: 400;
  color: @textUnable;
  display: block;
  position: relative;
  left: 7px;
}
.notitext {
  font-size: 14px;
  font-weight: 600;
  color: @textPrimary;
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.notiLink {
  cursor: pointer;
  position: relative;
  top: -1px;
  left: 5px;
  color: @buttonStress;
}
.notiChainImg {
  width: 22px;
  height: 22px;
  position: absolute;
  border-radius: 50%;
  left: 15px;
  top: 9px;
  border: 1px solid @bgWhite;
}
.notiTips {
  width: 100%;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(237, 240, 242, 1);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 145px;
  left: 0;
}
.notiEstimated {
  font-size: 12px;
  font-weight: 400;
  color: @textSecond;
}
.notiMinute {
  font-size: 14px;
  font-weight: 600;
  color: @textPrimary;
}
.inputIsMobileFunc (@a) when (@a=true) {
  font-size: 12px;
}
.tokenModal {
  .ant-modal-body {
    padding-right: 0px !important;
  }
}
.tokenModalContent {
  ::-webkit-scrollbar {
    width: 6px;
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(247, 203, 126, 1);
    background: rgba(247, 203, 126, 1);
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(142, 214, 230);
    border-radius: 10px;
    background: rgb(142, 214, 230);
  }
  position: relative;
  .tokenModalContent {
    overflow: auto;
    max-height: 500px;
  }

  .searchinput {
    width: 100% !important;
    height: 48px;
    border-radius: 16px !important;
    margin-bottom: 24px;
    background: @bgWhite !important;
    input {
      background: @bgWhite !important;
      color: @textPrimary !important;
      border-color: @textThird !important;
      font-size: 13px;
      font-weight: 600;
      .inputIsMobileFunc(@isMobile);
    }
  }
  .ant-input-affix-wrapper:focus,
  .ant-input-affix-wrapper:hover,
  .ant-input-affix-wrapper-focused {
    border-color: @primary !important;
    box-shadow: unset !important;
  }
  .activeItem {
    height: 64px;
    background: @bgSecond;
    border-radius: 16px;
  }
  .item {
    height: 64px;
    background: @bgWhite;
    border-radius: 16px;
  }
  .item:hover {
    background: @bgThird;
  }
  .litem {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-left: 16px;
    cursor: pointer;
  }
  .itemLeft {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: @success;
  }
  .itemLeft {
    img {
      width: 34px;
      height: 34px;
      border: 2px solid @unifyWhite;
      border-radius: 50%;
    }
  }

  .tokenName {
    font-size: 14px;
    font-weight: 700;
    color: @textPrimary;
  }
  .tokenBlance {
    font-size: 14px;
    font-weight: 500;
    color: @textThird;
    margin-right: 24px;
    display: flex;
    align-items: flex-end;
  }
  .ant-row {
    margin: 0 !important;
  }
  .tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 8px 16px;
    background: @primary10;
    border-radius: 16px;
  }
  .tipsLeft {
    font-size: 14px;
    font-weight: 700;
    color: @primary;
  }
  .tipsRight {
    font-size: 14px;
    font-weight: 600;
    color: @textSecond;
    margin-left: 5px;
  }
  .noResult {
    color: @textPrimary;
  }
  .baseAre {
    // border-bottom: 1px solid @bgThird;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .baseToken {
    display: flex;
    align-items: center;
    // padding: 6px;
    // border-radius: 10px;
    img {
      width: 22px;
      height: 22px;
      border: 2px solid @unifyWhite;
      border-radius: 50%;
    }
  }
  .baseItem {
    display: inline-block;
    border: 1px solid @textThird;
    border-radius: 16px;
    color: @textPrimary;
    background-color: @bgWhite;
    margin-right: 8px;
    padding: 6px;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .baseItem:hover {
    background-color: @bgThird;
  }
  .activeBaseItem {
    border: 1px solid @textThird;
    color: @textPrimary;
    background-color: @textThird;
    border-radius: 16px;
    display: inline-block;
    color: @textPrimary;
    margin-right: 8px;
    color: @textSecond;
    padding: 6px;
    cursor: not-allowed;
    margin-bottom: 8px;
  }
  .baseTokenName {
    font-size: 14px;
    font-weight: 500;
    color: @textPrimary;
  }
}
.chainModal {
  .chainModalContent {
    overflow: auto;
    max-height: 500px;
  }
  .searchinput {
    width: 100% !important;
    height: 48px;
    border-radius: 16px !important;
    margin-bottom: 24px;
    background: @bgWhite !important;
    input {
      background: @bgWhite !important;
      color: @textPrimary !important;
      border-color: @textThird !important;
      font-size: 14px;
      font-weight: 600;
    }
  }
  .ant-input-affix-wrapper:focus,
  .ant-input-affix-wrapper:hover,
  .ant-input-affix-wrapper-focused {
    border-color: @primary !important;
    box-shadow: unset !important;
  }

  .activeItem {
    height: 64px;
    background: @bgSecond;
    border-radius: 16px;
  }

  .item {
    height: 64px;
    background: @bgWhite;
    border-radius: 16px;
  }
  .item:hover {
    background: @bgThird;
  }
  .litem {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding-left: 16px;
    cursor: pointer;
  }
  .itemLeft {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: @success;
  }
  .itemLeft {
    img {
      width: 34px;
      height: 34px;
      border: 2px solid @bgWhite;
      border-radius: 50%;
    }
  }
  .itemRight {
    position: absolute;
    right: 28px;
    top: 28px;
  }
  .tokenName {
    font-size: 16px;
    font-weight: 700;
    color: @textPrimary;
  }
  .ant-row {
    margin: 0 !important;
  }
  .tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 8px 16px;
    background: @primary10;
    border-radius: 16px;
    margin-bottom: 24px;
  }
  .tipsLeft {
    font-size: 14px;
    font-weight: 700;
    color: @primary;
  }
  .tipsRight {
    font-size: 14px;
    font-weight: 600;
    color: @textSecond;
    margin-left: 5px;
  }
  .noResult {
    color: @textPrimary;
  }
}
.mobileMenuModal {
  .modallink {
    font-size: 16px;
    font-weight: 500;
    color: @textPrimary;
    cursor: pointer;
    margin-left: 32px;
    margin-bottom: 30px;
  }
  .modallink:hover {
    color: @buttonStress;
  }
  .menuModalFooter {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 50px;
    left: 0;
    .footImg {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: @primary;
    }
    .footImg:hover {
      background: @buttonReduce;
    }
  }
}
.flexCenterIsMobileFunc (@a) when (@a=true) {
  margin: 0 14px !important;
}
.flexCenter {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
  width: 500px;
  .flexCenterIsMobileFunc(@isMobile);

  .transferCard {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-top: 45px; 
    border-radius: 16px;
    background: @bgWhite;
    box-shadow: 0px 16px 64px rgba(41, 46, 62, 0.08);
    // .transferCardIsMobileFunc(@isMobile);
    .ant-card-head {
      color: @link;
      font-size: 22px;
      border-bottom: 1px solid @unifyBlack;
      padding: 30px 20px 10px 20px;
      font-weight: 700;
    }
    .antCardBodyIsMobileFunc (@a) when (@a=true) {
      padding: 32px 16px;
    }
    .ant-card-body {
      padding: 24px;
      .antCardBodyIsMobileFunc(@isMobile);
    }
    .ant-card-head-title {
      padding: 0px;
      line-height: 1;
      margin-bottom: 7px;
      height: 25px;
    }
    .ant-card-extra {
      padding: 0px;
      line-height: 1;
    }

    .cardContent {
      position: relative;
      max-width: 560px;

      .trans {
        .transitem {
          .transitemTitle {
            color: @bgWhite;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .source {
              display: inline-block;
              margin-right: 8px;
              font-size: 14px;
              width: 35px;
              color: @textUnable;
              font-weight: 700;
              margin-left: 20px;
              line-height: 32px;
            }
          }
          .transselect {
            background: @bgSecond;
            display: flex;
            border-radius: 16px;
            align-items: center;
            height: 52px;
            width: 100%;

            .chainSelcet {
              border-radius: 100px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-left: 8px;
              padding-right: 10px;
              width: 100%;
              height: 52px;
              font-size: 16px;
              font-weight: 600;
              color: @textPrimary;
              cursor: pointer;
            }
          }
          .transcontent {
            background: @bgSecond;
            border-radius: 16px;
            padding: 15px 0;
            margin-top: 4px;
            height: 88px;

            .transnum {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 12px;
              margin-top: 3px;
              color: @textSecond;

              .transnumtext {
                font-size: 12px;
                font-weight: 600;
                color: @textUnable;
                .transnumtextrate {
                  color: @error;
                  padding: 0px 4px;
                }
              }
              .transnumlimt {
                cursor: pointer;
                font-size: 12px;
                color: @textUnable;
                .transnumlimtmax {
                  color: @buttonStress;
                }
              }
            }

            .transdes {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 12px;
              margin-top: 0px;
              font-size: 20px;

              .transdestext,
              .transdestextActive {
                color: #c3c5ca;
                flex: 2;
                font-size: 24px;
                font-weight: 700;
                .ant-input::-webkit-input-placeholder {
                  font-size: 24px;
                  font-weight: 700;
                  color: #c3c5ca !important;
                }
              }
              .transdestextActive {
                color: @textPrimary;
                .ant-input {
                  font-size: 24px !important;
                  font-weight: 700 !important;
                  color: @textPrimary !important;
                }
              }
              .transdeslimt {
                position: relative;
                flex: 1;

                .investSelctForLoading {
                  display: flex;
                  position: absolute;
                  top: -18px;
                  right: 0;
                  align-items: center;
                  justify-content: end;
                  background: @bgThird;
                  border-radius: 12px;
                  width: 83px;
                  height: 34px;
                }

                .investSelct {
                  display: flex;
                  position: absolute;
                  top: -18px;
                  right: 0;
                  align-items: center;
                  background: @bgThird;
                  border-radius: 12px;
                  padding: 0 8px;
                  cursor: pointer;

                  .selectpic {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: @bgThird;
                    & img {
                      width: 100%;
                      border-radius: 50%;
                      vertical-align: baseline;
                    }
                  }
                  .selectdes {
                    margin-left: 5px;
                    margin-right: 5px;
                    font-size: 16px;
                    font-weight: 600;
                    color: @textPrimary;
                  }
                  .selecttoog {
                    height: 24px;
                    margin-bottom: 10px;
                  }
                }
              }
            }
          }
        }

        .icon {
          position: absolute;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: -5px 0 -22px 0;
          z-index: 15;
        }
        .iconInner {
          .arrowUpDowm {
            display: block;
          }
          .arrowupdownActive {
            display: none;
          }
        }
        .iconInner:hover {
          .arrowUpDowm {
            display: none;
          }
          .arrowupdownActive {
            display: block;
          }
        }
      }
    }
    .compareBody {
      width: 100%;
      border-radius: 16px;
      background: @success10;
      padding: 10px 12px;
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .compareWord {
        color: @textPrimary;
        font-size: 14px;
        font-weight: 600;
      }
      .compareInfoIcon {
        width: 15px;
        height: 15px;
      }
    }
    .btnare {
      // position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 15;

      .btnarein {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;

        .unlimit-div {
          display: flex;
          margin-bottom: 8px;
          align-items: center;

          .unlimit-text {
            margin-left: 6px;
            color: #7987a3;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }
    }

    .contCover {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
    }
  }
}
.transBtn {
  width: ~"calc(100% - 0px)" !important;
  margin: 0 !important;
  height: 56px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  border: 0 !important;
}
.priceUpdate {
  width: 100%;
  margin: 0;
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 16px;
  color: @primary;
  background: @primary10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  .acceptText {
    font-size: 14px;
    font-weight: 600;
  }
  .acceptBtn {
    border: 0;
    border-radius: 8px !important;
    height: 24px !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
  }
}
.changedInfo {
  border-radius: 16px;
  background: @success10;
  padding: 16px;
  .changedInfoTitle {
    font-size: 12px;
    font-weight: 600;
    color: @textPrimary;
  }
  .changedInfoItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .changedInfoItemLeft {
    font-size: 12px;
    font-weight: 600;
    color: @textSecond;
  }
  .changedInfoItemRight {
    font-size: 12px;
    font-weight: 600;
    color: @textPrimary;
  }
}
.changedInfoReduce {
  background: @error10 !important;
}
.err {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  min-height: 24px;
  margin-top: 20px;
  .errInner {
    width: 100%;
    color: @error;
    text-align: left;
    margin: 0 0 24px 0;
    background: rgba(255, 79, 126, 0.1);
    // box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),
    //   0px 8px 24px -4px rgba(24, 39, 75, 0.08);
    border-radius: 16px;
    font-size: 14px;
  }
}
.errInnerbody {
  display: flex;
  align-items: center;
  margin: 10px 14px;
}

.warningInnerbody {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6;
  color: @warn;
  align-items: center;
  margin: 8px 12px;
  font-weight: 600;
}

.slippageContent {
  cursor: pointer;
  position: relative;
  text-align: right;
  .settingIcon {
    width: 24px;
    color: @textSecond;
  }
}
.transTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settingsTitle{
  font-size: 20px;
  font-weight: 700;
  color:@textPrimary;
}
.settings {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
}
.modeSelect {
  border: 1px solid @primary;
  border-radius: 8px;
  width: 64px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  .modeSelectSimple {
    height: 32px;
    width: 32px;
    border-radius: 8px 0 0 8px;
    border-right: 1px solid @primary;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @bgWhite;
    cursor: pointer;
    .simpleIcon {
      width: 16px;
    }
  }
  .modeActive {
    background-color: @primary10 !important;
  }
  .modeSelectClassic {
    height: 32px;
    width: 32px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @bgWhite;
    cursor: pointer;
    .classicIcon {
      width: 16px;
    }
  }
}

.feeLoadItem {
  border-radius: 16px;
  border: 1px solid @bgThird;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  margin-top: 24px;
  color: @textSecond;
  font-weight: 400;
  font-size: 12px;
  margin-bottom: 20px;

  .iconImg {
    width: 18px;
    height: 18px;
    margin-right: 3px;
    padding-bottom: 1px;
  }

  @keyframes changeright {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .iconImg {
    animation: changeright 1.1s infinite linear;
  }
}
.btnIcon {
  width: 18px;
  height: 18px;
}
.swapInfoBoxOpen {
  height: 285px !important;
}
.swapInfoBox {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-content: "center";
  gap: 6;
  height: 69px;
  max-width: 560px;
  margin-top: 24px;
  margin-bottom: 20px;
  transition: height 0.4s;
  overflow: hidden;
  .priceItemIsMobileFunc (@a) when (@a=true) {
    padding: 10px 6px;
    .priceItemContent {
      width: 100% !important;
    }
    .overViewNum {
      margin-right: 2px !important;
    }
    .priceItemSymbol {
      margin-right: 2px !important;
    }
    .priceItemText {
      margin-right: 2px !important;
    }
    .iconImg {
      margin-right: 2px !important;
      width: 12px !important;
      height: 12px !important;
    }
  }

  .priceItem {
    background: @bgSecond !important;
    border-radius: 16px;
    padding: 10px 16px;
    .priceItemIsMobileFunc(@isMobile);
    .priceItemTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .priceTitle {
      color: @textSecond;
      font-size: 12px;
      font-weight: 600;
    }
    .overViewTrangle {
      width: 14px;
      cursor: pointer;
    }
    .estimatedGasAndmin {
      font-size: 12px;
      font-weight: 400;
      color: @textSecond;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 3px 0;
      .gastips {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .priceItemContent {
      color: @textPrimary;
      font-size: 12px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: auto;
      .overViewNum {
        color: @textPrimary;
        margin-right: 4px;
      }
      .priceItemSymbol {
        color: @textPrimary;
        margin-right: 4px;
      }
      .priceItemText {
        color: @textSecond;
        margin-right: 4px;
      }
      .iconImg {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-bottom: 3px;
        border: 1px solid #fff;
        margin-right: 4px;
      }
      .priceItemPrice {
        color: @textUnable;
        font-weight: 400;
      }
    }
  }

  .swapDesc {
    margin-top: 10px;
    padding: 10px 16px 5px 16px;
    border-radius: 16px 16px 0px 0px;
    border: 1px solid @contentBorder;
    // border-bottom: 0;

    .item {
      display: flex;
      justify-content: space-between;

      .title {
        color: @textSecond;
        font-size: 12px;
        font-weight: 600;
      }
      .itemContent {
        color: @textPrimary;
        font-size: 12px;
        font-weight: 600;

        .iconImg {
          width: 16px;
          height: 16px;
          border-radius: 50%;
        }
      }
    }
  }

  .routing {
    width: 100%;
    margin-top: 10px;
    padding: 10px 16px 5px 16px;
    border-radius: 0px 0px 16px 16px;
    border: 1px solid @contentBorder;

    .routingTitle {
      width: 100%;
      color: @buttonStress;
      font-size: 12;
      font-weight: 600;
    }

    .routingContentIsMobileFunc (@a) when (@a=true) {
      .startChainInfo {
        width: 24px;
        height: 24px;
        .chainPic {
          width: 28px;
        }
        .tokenPic {
          width: 14px;
        }
      }
      .chainInfoIn {
        width: 20px;
        height: 20px;
        .chainPicIn {
          width: 20px;
        }
        .tokenPicIn {
          width: 14px;
          height: 14px;
          top: 7px;
          right: -4px;
        }
      }
    }

    .routingContent {
      margin: 17px 0 15px 0;
      display: flex;
      align-items: center;
      justify-content: left;
      position: relative;
      .routeLine8 {
        width: 8px;
        height: 1px;
        border-top: 1px dashed @textSecond;
      }
      .routeLine12 {
        width: 12px;
        height: 1px;
        border-top: 1px dashed @textSecond;
      }
      .routeLine24 {
        width: 24px;
        height: 1px;
        border-top: 1px dashed @textSecond;
      }
      .routeFromIcon {
        width: 5px;
        height: 5px;
        background: @textSecond;
        transform: rotate(45deg);
        margin-left: 10px;
        margin-right: 3px;
      }
      .routeToIcon {
        width: 0;
        height: 0;
        border-left: 4px solid @textSecond;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        margin-left: 3px;
        margin-right: 3px;
      }
      .startChainInfo {
        position: relative;
        width: 36px;
        height: 40px;
        .chainPic {
          width: 36px;
          border-radius: 50%;
          .ant-image{
            width: 100%;
          }
        }
        .tokenPic {
          width: 24px;
          border-radius: 50%;
          position: absolute;
          top: 12px;
          right: -8px;
          z-index: 2;
        }
      }
      .chainInfoIn {
        position: relative;
        width: 36px;
        height: 40px;
        display: flex;
        align-items: center;
        .chainPicIn {
          width: 28px;
          border-radius: 50%;
          // border: 2px solid @bgThird;
        }
        .tokenPicIn {
          width: 20px;
          height: 17px;
          border-radius: 50%;
          position: absolute;
          top: 15px;
          right: 0;
          z-index: 2;
        }
      }
      .dexChainIcon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: @bgWhite;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .routeDetail {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .routeDetailItem {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .routingContentIsMobileFunc(@isMobile);
    }

    .routingDesc {
      color: @warn;
      font-size: 12px;
      margin-bottom: 10px;
      .routingDescLink {
        color: @warn;
        border-bottom: 1px solid @warn;
      }
    }
  }
}
.confirmSwapContent {
  padding: 24px;
  background: @bgWhite;
  border-radius: 24px;
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-top: 45px;
  box-shadow: 0px 16px 64px rgba(41, 46, 62, 0.08);
  .confirmSwapContentHeader {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .returnHome {
      cursor: pointer;
      font-size: 16px;
      color: @textPrimary;
      margin-right: 17px;
    }
    .confirmSwapContentTitle {
      font-size: 20px;
      font-weight: 700;
      color: @textPrimary;
    }
  }
}
.confirmSwapModal {
  .trans {
    background: @bgSecond;
    border-radius: 16px;
    margin-bottom: 10px;
    padding: 10px 16px 10px 16px;
    margin-top: -15px;

    .transcontent {
      display: flex;
      align-items: start;
      .transdes {
        width: 100%;
        margin-left: 10px;

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

          .transdesAmount {
            color: @textPrimary;
            font-size: 24px;
            font-weight: 700;
          }
          .transdesToken {
            color: @textPrimary;
            font-size: 24px;
            font-weight: 600;
          }
        }
        .transdesPrice {
          color: @textUnable;
          font-size: 12px;
          font-weight: 400;
          margin-top: -8px;
          .transdesPriceRate {
            color: @error;
          }
        }
      }
    }
  }

  .swapInfoBox {
    width: auto;
  }

  .button,
  .button:focus,
  .button:hover {
    margin-top: 15px;
    height: 56px;
    line-height: 42px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    background: @link;
    border: 0px solid @bgWhite;
  }
}
.ratemodal {
  position: relative;

  .rateBodyIsMobileFunc (@a) when (@a=true) {
    width: ~"calc(100vw - 60px)";
    .rateContent {
      display: block;
      .inputBtn {
        margin-top: 20px;
        .rateInput {
          & input {
            text-align: left !important;
          }
        }
        .activeRateInput,
        .activeRateInputError,
        .activeRateInputWarnning {
          & input {
            text-align: left !important;
          }
        }
      }
    }
  }

  .rateBody {
    padding: 32px 16px;
    border: 1px solid #edf0f2;
    border-radius: 16px;
    z-index: 21;
    right: 0;
    position: absolute;
    background-color: @bgWhite;
    width: 440px;
    box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),
      0px 8px 24px -4px rgba(24, 39, 75, 0.08);
    text-align: left;

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

      .title {
        font-size: 16px;
        font-weight: 700;
        color: @textPrimary;
        display: flex;
        align-items: center;
      }

      .inputBtn {
        position: relative;

        .rateInput {
          background-color: transparent;
          height: 48px;
          border-radius: 24px;
          font-size: 14px;
          color: @textPrimary;
          border-color: #d9d9d9;
          & input {
            background-color: transparent;
            text-align: right;
            color: @textPrimary;
          }
        }

        .activeRateInput,
        .activeRateInputError,
        .activeRateInputWarnning {
          background-color: transparent;
          height: 48px;
          border-radius: 24px;
          font-size: 14px;
          color: @textPrimary;
          border-color: #edf0f2;
          text-align: right;
          & input {
            background-color: transparent;
            text-align: right;
            color: @textPrimary;
          }
        }

        .activeRateInputError {
          border-color: @error;
          color: @error;
          box-shadow: none;
          & input {
            color: @error !important;
          }
        }

        .activeRateInputWarnning {
          border-color: @warn;
          color: @warn;
          box-shadow: none;
          & input {
            color: @warn !important;
          }
        }
      }
    }

    .rateBodyIsMobileFunc(@isMobile);

    .desc {
      background-color: rgba(255, 130, 14, 0.1);
      border-radius: 16px;
      padding: 14px 10px;
      font-size: 14px;
      font-weight: 600;
      color: @warn;
      margin-top: 20px;
      display: flex;
      align-items: center;

      .descTitle {
        margin-left: 10px;
      }
    }

    .descError {
      background-color: rgba(255, 79, 126, 0.1);
      border-radius: 16px;
      padding: 14px 10px;
      font-size: 14px;
      font-weight: 600;
      color: @error;
      margin-top: 20px;
      display: flex;
      align-items: center;

      .descErrorTitle {
        margin-left: 10px;
      }
    }
  }

  .ratemodalwarp {
    position: fixed;
    width: 2000px;
    height: 2000px;
    top: 0;
    left: 0;
    z-index: 20;
  }
}
.rateIcon {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  position: relative;
  top: 2px;
}
.historyBodyIsMobileFunc (@a) when (@a=true) {
  background: none;
  margin-top: 0px;
  padding: 10px 14px;
}

.historyBody {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  line-height: 1;
  min-height: 700px;
  max-width: 1200px;
  padding: 10px 24px;
  background: @bgWhite;
  border-radius: 16px;
  .historyBodyIsMobileFunc(@isMobile);

  .historyHeader {
    background: @bgWhite;
    border-radius: 24px;
    height: 60px;
    margin-top: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .backHeaderIsMobileFunc (@a) when (@a=true) {
      display: flex;
      align-items: center;
      padding-left: 14px;
      font-size: 18px;
      width: auto;
      margin-top: 3px;
    }
    .backHeader {
      cursor: pointer;
      color: @textPrimary;
      font-size: 20px;
      font-weight: 700;

      // margin-left: 5px;
      padding: 5px 5px 10px 0px;
      width: 120px;
      img {
        padding-bottom: 2px;
      }
      .backHeaderIsMobileFunc(@isMobile);
    }

    .refreshHeader {
      cursor: pointer;
    }
  }

  .historyList {
    .whiteSpinblur {
      .ant-spin-blur {
        opacity: 0.5;
      }
      .ant-spin-blur::after {
        opacity: 0.5;
      }
      .ant-spin-container::after {
        background: #f6f7fd;
      }
    }

    .spinblur {
      .ant-spin-blur {
        opacity: 0.4;
      }
      .ant-spin-blur::after {
        opacity: 0.4;
      }
      .ant-spin-container::after {
        background: #2c2c2c;
      }
    }

    .ListItem {
      width: 100%;
      background: @bgSecond;
      margin-top: 16px !important;
      border-radius: 16px;
      padding: 24px 16px 24px 24px !important;

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

        .itemLeft {
          display: flex;
          justify-content: start;
          align-items: center;

          .reducetxnum {
            font-size: 14px;
            color: @textPrimary;
            line-height: 1;
            // min-width: 128px;
            margin-left: 10px;
            margin-right: 10px;
            font-weight: 600;
          }

          .linkIcon {
            color: @buttonStress;
          }

          .arrowIcon {
            width: 24px;
            height: 14px;
            margin-left: 27px;
          }

          .receivetxnum {
            font-size: 14px;
            line-height: 1;
            color: @textPrimary;
            // min-width: 128px;
            margin-left: 20px;
            font-weight: 600;
          }

          .linktitle {
            font-size: 14px;
            // margin-left: -15px;
            margin-top: 2px;
          }

          .itemTime {
            font-size: 12px;
            color: @textSecond;
            text-align: right;
            font-weight: 600;
            margin-left: 20px;
          }
        }

        .itemStatu {
          margin-bottom: 0px;
          text-align: right;
          align-items: center;
          justify-content: space-between;
          max-height: 40px;

          .statusDisplay {
            display: flex;
            flex-direction: row;
            justify-content: end;
            font-size: 14px;

            .completed {
              color: @success;
              font-weight: 700;
            }

            .pending {
              color: @textSecond;
              font-weight: 700;
            }

            .failed {
              color: @error;
              font-weight: 700;
            }

            .toolTipIcon {
              width: 15px;
              height: 15px;
              margin-left: 5px;
            }
          }
        }
      }
    }

    .ListItemForSkeleton {
      width: 100%;
      background: @bgSecond;
      margin-top: 16px !important;
      border-radius: 16px;
      padding: 16px 16px 16px 24px !important;

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

        .itemLeft {
          display: flex;
          justify-content: start;
          align-items: center;

          .reducetxnum {
            font-size: 14px;
            color: @textPrimary;
            line-height: 1;
            // min-width: 128px;
            margin-left: 10px;
            margin-right: 10px;
            font-weight: 600;
          }

          .linkIcon {
            color: @buttonStress;
          }

          .arrowIcon {
            width: 24px;
            height: 14px;
            margin-left: 27px;
          }

          .receivetxnum {
            font-size: 14px;
            line-height: 1;
            color: @textPrimary;
            // min-width: 128px;
            margin-left: 20px;
            font-weight: 600;
          }

          .linktitle {
            font-size: 14px;
            // margin-left: -15px;
            margin-top: 2px;
          }

          .itemTime {
            font-size: 12px;
            color: @textSecond;
            text-align: right;
            font-weight: 600;
            margin-left: 20px;
          }
        }

        .itemStatu {
          margin-bottom: 0px;
          text-align: right;
          align-items: center;
          justify-content: space-between;
          max-height: 40px;

          .statusDisplay {
            display: flex;
            flex-direction: row;
            justify-content: end;
            font-size: 14px;

            .completed {
              color: @success;
              font-weight: 700;
            }

            .pending {
              color: @textSecond;
              font-weight: 700;
            }

            .failed {
              color: @error;
              font-weight: 700;
            }

            .toolTipIcon {
              width: 15px;
              height: 15px;
              margin-left: 5px;
            }
          }
        }
      }
    }

    .mobileListItem {
      width: 100%;
      background: @bgWhite;
      margin-top: 16px !important;
      border-radius: 16px;
      padding: 16px 10px 16px 10px !important;

      .itemStatu {
        margin-bottom: 0px;
        text-align: left;
        align-items: center;
        // justify-content: space-between;
        // max-height: 40px;

        .statusDisplay {
          display: flex;
          flex-direction: row;
          justify-content: start;
          font-size: 18px;

          .completed {
            color: @success;
            font-weight: 700;
          }

          .pending {
            color: @textSecond;
            font-weight: 700;
          }

          .failed {
            color: @error;
            font-weight: 700;
          }

          .toolTipIcon {
            width: 15px;
            height: 16px;
            margin-left: 5px;
            padding-top: 1px;
          }
        }

        .itemTime {
          font-size: 12px;
          color: @textSecond;
          text-align: left;
          font-weight: 400;
          margin-top: 5px;
        }
      }

      .itemcont {
        background: @bgSecond;
        margin-top: 10px;
        padding: 24px 10px 24px 10px;
        border-radius: 16px;

        .itemSwapChain {
          display: flex;
          justify-content: start;
          align-items: center;

          .itemSwapAmount {
            font-size: 16px;
            color: @textPrimary;
            line-height: 1;
            margin-left: 50px;
            font-weight: 600;
          }

          .linktitle {
            margin-left: 10px;
            .linkIcon {
              color: @buttonStress;
            }
          }
        }

        .arrowIcon {
          width: 14px;
          height: 24px;
          margin: 20px 0 20px 12px;
        }
      }

      .itemcontForSkeleton {
        background: @bgSecond;
        margin-top: 10px;
        padding: 14px 10px 24px 10px;
        border-radius: 16px;

        .itemSwapChain {
          display: flex;
          justify-content: start;
          align-items: center;

          .itemSwapAmount {
            font-size: 16px;
            color: @textPrimary;
            line-height: 1;
            margin-left: 50px;
            font-weight: 600;
          }

          .linktitle {
            margin-left: 10px;
            .linkIcon {
              color: @buttonStress;
            }
          }
        }

        .arrowIconForSkeleton {
          width: 14px;
          height: 24px;
          margin: 18px 0 8px 12px;
        }
      }
    }

    .statusDesDisplay {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20px;

      .toBeRefundIsMobileFunc (@a) when (@a=true) {
        width: 100% !important;
      }
      .toBeRefund {
        width: 160px;
        height: 36px;
        color: @textPrimary;
        font-weight: 600;
        background-color: @buttonStress;
        border-radius: 12px;
        border: 0 solid @buttonStress;
        font-size: 14px;
        align-items: center;
        .toBeRefundIsMobileFunc(@isMobile);
      }

      .comfirmingRefundIsMobileFunc (@a) when (@a=true) {
        width: 100%;
        justify-content: space-between;
      }
      .comfirmingRefund {
        padding: 5px 15px 5px 15px;
        background-color: rgba(101, 122, 163, 0.1);
        color: @textSecond;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        .comfirmingRefundIsMobileFunc(@isMobile);
      }

      .bridgeRefundIsMobileFunc (@a) when (@a=true) {
        width: 100%;
        justify-content: space-between;
      }
      .bridgeRefund {
        padding: 5px 15px 5px 15px;
        background-color: @success10;
        color: @success;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        .bridgeRefundIsMobileFunc(@isMobile);
      }

      .statusDesIcon {
        display: flex;
      }
    }

    .empty {
      height: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: @textUnable;
      font-size: 15px;
      background: @bgWhite;
      margin-top: 10px;
      border-radius: 16px;
      .emptyContent {
        text-align: center;
      }
    }
  }

  .connectWallet {
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @textUnable;
    font-size: 15px;
    background: @bgWhite;
    margin-top: 10px;
    border-radius: 16px;
    .connectWalletButton {
      width: 160px;
      height: 36px;
      color: @textPrimary;
      font-weight: 600;
      background-color: @buttonStress;
      border-radius: 12px;
      border: 0 solid @buttonStress;
      font-size: 14px;
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;

    .ant-pagination-item a {
      color: @textSecond;
    }
    .ant-pagination-item-active {
      border-color: #edf0f2;
      background: @bgSecond;
    }
    .ant-pagination-item-active a {
      color: @textPrimary;
    }

    // .ant-pagination-disabled {
    //   color: rgba(101, 122, 163, 0.1);
    // }
    // .ant-pagination-item-link {
    //   color: #657aa3;
    // }
  }
  .historyLoadbg {
    // position: absolute;
    width: 100%;
    // height: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.5) !important;

    .historyLoadgif {
      width: 100px;
      height: 100px;
    }
  }
}

.requestRefundModal {
  border: 0px solid #17171a;
  padding-bottom: 0px !important;

  .ant-modal-content {
    background: @bgWhite;
    border-radius: 16px;
    .ant-modal-close {
      color: @textPrimary;
      width: 16px;
      height: 16px;
      margin-top: 14px;
      margin-right: 40px;
    }
    .ant-modal-header {
      background: @bgSecond;
      border-radius: 16px 16px 0px 0px;
      border-bottom: none;
      .ant-modal-title {
        padding-top: 10px;
        font-size: 20px;
        font-weight: 700;
        color: #2e3a59;
        .ant-typography {
          color: #2e3a59;
        }
      }
    }

    .ant-modal-body {
      .refundButton,
      .refundButton:focus,
      .refundButton:hover {
        margin-top: 40px;
        height: 56px;
        line-height: 42px;
        border-radius: 16px;
        font-size: 18px;
        font-weight: 700;
        color: @textPrimary;
        background: @buttonStress !important;
        border: 0px solid @bgWhite;
      }

      .modaldes {
        color: @textPrimary;
        margin-top: 10px;
        font-size: 14px;
        text-align: left;
        font-weight: 400;
        .chainDes {
          font-weight: 700;
        }
      }
    }
  }
  .ant-typography {
    color: #2e3a59;
  }
}
.customToken {
  width: 100%;
  padding-right: 24px;
  height: 380px;
  background: @bgWhite;
  .customToken_searchinput {
    width: 100% !important;
    height: 48px;
    border-radius: 16px !important;
    margin-bottom: 24px;
    background: @bgWhite !important;
    input {
      background: @bgWhite !important;
      color: @textPrimary !important;
      border-color: @textThird !important;
      font-size: 13px;
      font-weight: 600;
      .inputIsMobileFunc(@isMobile);
    }
  }

  .customToken_item {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-left: 16px;
  }
  .itemLeft {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .itemLeft {
    img {
      width: 38px;
      height: 38px;
      border: 2px solid @unifyWhite;
      border-radius: 50%;
    }
  }
  .tokenDes {
    margin-left: 20px;
  }
  .tokenName {
    font-size: 14px;
    font-weight: 700;
    color: @textPrimary;
  }
  .tokenSymbol {
    font-size: 12px;
    font-weight: 500;
    color: @textUnable;
  }
  .importBtn {
    text-align: center;
    background: @primary;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .errTips {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    min-height: 24px;
    margin-top: 0px;
    .errInner {
      width: 100%;
      color: @error;
      text-align: left;
      margin: 0 0 24px 0;
      background: rgba(255, 79, 126, 0.1);
      // box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),
      //   0px 8px 24px -4px rgba(24, 39, 75, 0.08);
      border-radius: 16px;
      font-size: 14px;
    }
  }
  .errInnerbody {
    display: flex;
    align-items: center;
    margin: 10px 14px;
  }
}
.addCustomToken {
  .addCustom {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;
    padding-left: 16px;
    cursor: pointer;
    margin-bottom: 15px;
  }
  .addCustomLeft {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .addCustomLeft {
    img {
      width: 38px;
      height: 38px;
      border: 2px solid @unifyWhite;
      border-radius: 50%;
    }
  }
  .tokenDes {
    margin-left: 20px;
  }
  .tokenName {
    font-size: 14px;
    font-weight: 700;
    color: @textPrimary;
  }
  .tokenSymbol {
    font-size: 12px;
    font-weight: 500;
    color: @textUnable;
  }
  .addCustomAddress {
    font-size: 14px;
    font-weight: 600;
    color: @success;
    background: @success10;
    border-radius: 16px;
    padding: 8px 12px;
  }
  .waring {
    width: 100%;
    padding: 10px 14px;
    border-radius: 16px;
    background: @error10;
    display: flex;

    margin-top: 20px;
    .errorText {
      font-size: 14px;
      font-weight: 600;
      color: @error;
    }
    .errorDes {
      font-size: 14px;
      font-weight: 600;
      color: @textPrimary;
      margin-top: 10px;
      margin-bottom: 5px;
    }
    .ant-checkbox-checked .ant-checkbox-inner {
      background-color: @success!important;
      border-color: @success!important;
    }
    .ant-checkbox-wrapper:hover {
      .ant-checkbox-inner {
        border-color: @success!important;
      }
    }
    .ant-checkbox-checked::after {
      border-color: @success!important;
    }
  }
  .importButton {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    .primaryBtn {
      width: ~"calc(100% - 0px)" !important;
      margin: 0 !important;
      height: 56px !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      border-radius: 16px !important;
      border: 0 !important;
      background: @primary !important;
      color: @unifyBlack !important;
    }
    .primaryBtn:focus {
      background: @primary !important;
    }
    .primaryBtn:hover {
      background: @buttonReduce !important;
    }
    .ant-btn[disabled],
    .ant-btn[disabled]:hover,
    .ant-btn[disabled]:focus,
    .ant-btn[disabled]:active {
      color: rgba(0, 0, 0, 0.25) !important;
      border-color: #d9d9d9 !important;
      background: #f5f5f5 !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }
  }
}
.addCustomBtn {
  height: 58px;
  width: 100%;
  text-align: center;
  border: 1px solid @primary;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 500;
  color: @primary;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .addCustomBtnIcon {
    font-size: 18px;
    margin-left: 6px;
  }
}
.tokenNoResultText {
  color: @textUnable;
  font-size: 14px;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 50px;
}
.chainHopButton {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  .primaryBtn {
    width: ~"calc(100% - 0px)" !important;
    margin: 0 !important;
    height: 56px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    border: 0 !important;
    background: @primary !important;
    color: @unifyBlack !important;
  }
  .primaryBtn:focus {
    background: @primary !important;
  }
  .primaryBtn:hover {
    background: @buttonReduce !important;
  }
  .ant-btn[disabled],
  .ant-btn[disabled]:hover,
  .ant-btn[disabled]:focus,
  .ant-btn[disabled]:active {
    color: rgba(0, 0, 0, 0.25) !important;
    border-color: #d9d9d9 !important;
    background: #f5f5f5 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
}
.walletConnectContent {
  width: "100%";
  padding-top: 45px;
  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: @success!important;
    border-color: @success!important;
  }
  .ant-checkbox-wrapper:hover {
    .ant-checkbox-inner {
      border-color: @success!important;
    }
  }
  .ant-checkbox-checked::after {
    border-color: @success!important;
  }
}
.redText {
  color: @error !important;
}
button {
  text-shadow: none !important;
  box-shadow: none !important;
}
.LearnMore {
  font-size: 12px;
  font-weight: 600;
  color: @warn;
  text-decoration: underline;
  cursor: pointer;
}
.warnText {
  color: @warn;
}
.greenText {
  color: @success !important;
}
.referraButton{
 margin-left: 10px;
.connectBtn {
  width: 100% !important;
  margin: 0 !important;
  height: 54px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: @primary !important;
  color: #fff !important;
  margin-top: 25px !important;
}

  .copyBtn {
    width: 64px !important;
    margin: 0 !important;
    height: 34px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: @primary !important;
    color: @unifyBlack !important;
  }
  .copyBtn,.connectBtn:focus {
    background: @primary !important;
  }
  .copyBtn,.connectBtn:hover {
    background: @buttonReduce !important;
  }
  .ant-btn[disabled],
  .ant-btn[disabled]:hover,
  .ant-btn[disabled]:focus,
  .ant-btn[disabled]:active {
    color: rgba(0, 0, 0, 0.25) !important;
    border-color: #d9d9d9 !important;
    background: #f5f5f5 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
}
.referralContent{
  .referralText{
    font-size: 14px;
    font-weight: 600;
    color: @textPrimary;
    cursor: pointer;
    margin-left: 35px;
    background: conic-gradient(from 90deg at 50% 51.52%, #4589FF 0deg, #FF7EB6 141.23deg, #F1C21B 231.23deg, #49CD7A 287.48deg, #4589FF 360deg);
    -webkit-background-size: 200% 100%;
    background-size: 200% 100%;
    -webkit-animation: hue 6s infinite alternate;
    animation: hue 6s infinite alternate;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    .isMobileReferralTextFunc(@isMobile)
  }
  @-webkit-keyframes hue{
    0%{
      -webkit-filter:hue-rotate(0deg);
    }
    100%{
      -webkit-filter:hue-rotate(-1turn);
    }
  }
  @keyframes hue{
    0%{
      -webkit-filter:hue-rotate(0deg);
    }
    100%{
      -webkit-filter:hue-rotate(-1turn);
    }
  }
  .isMobileReferralTextFunc (@a) when (@a=true) {
    font-size: 16px;
    font-weight: 500;
  }
 
}
.referralModal{
  .referraldec{
    font-size: 14px;
    font-weight: 600;
    color: @textPrimary;
  }
  .referralLinkTitle{
    font-size: 12px;
    font-weight: 700;
    color: @textPrimary;
    margin-top: 20px;
  }
  .referralArea{
    width: 100%;
    height: 72px;
    border-radius: 12px;
    padding: 12px;
    margin-top:8px;
    background: @bgTheme;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .referralLink{
      font-size: 12px;
      font-weight: 600;
      color: @textUniversal;
      word-break: break-all;
    }
  }
  
}
.customMessage{
  .ant-message-notice-content{
    background: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    border-radius: 8px !important;
  }
}
// .ant-tooltip-placement-bottom .ant-tooltip-arrow,
// .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,
// .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
//   top: 2px !important;
// }
// .ant-tooltip-placement-top .ant-tooltip-arrow,
// .ant-tooltip-placement-topLeft .ant-tooltip-arrow,
// .ant-tooltip-placement-topRight .ant-tooltip-arrow {
//   bottom: 2px !important;
// }
// .ant-tooltip-placement-right .ant-tooltip-arrow,
// .ant-tooltip-placement-rightTop .ant-tooltip-arrow,
// .ant-tooltip-placement-rightBottom .ant-tooltip-arrow {
//   left: 2px !important;
// }
// .ant-tooltip-placement-left .ant-tooltip-arrow,
// .ant-tooltip-placement-leftTop .ant-tooltip-arrow,
// .ant-tooltip-placement-leftBottom .ant-tooltip-arrow {
//   right: 2px !important;
// }
.announcement{
  width: 100%;
  background: @warn10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-top: 15px;
  .announcementIcon{
    width: 20px;
    height: 20px;
  }
  .announcementText{
    font-size: 14px;
    font-weight: 600;
    color: @textUniversal;
    margin-left: 10px;
  }
}

.mobileSwap {
  width: 100%;
  .flexCenter {
    width: ~"calc(100vw - 28px)" !important;
  }
  // .pathItem {
  //   border-radius: 0 0 16px 16px !important;
  // }
  .dexRoutePath {
    width: ~"calc(100vw - 28px)" !important;
    max-width: ~"calc(100vw - 28px)" !important;
    margin-top: 24px;
    margin-left: 14px;
    margin-right: 14px;
    padding: 16px;
    .dexContent {
      opacity: 1 !important;
    }
  }
  .borderHeader {
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 12px 12px 0 0 !important;
    top: -1px !important;
    left: 0px !important;
    position: relative !important;
    width: ~"calc(100vw - 62px)" !important;
  }
  .borderHeaderDisabled {
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 12px 12px 0 0 !important;
    top: 0px !important;
    left: -1px !important;
    position: relative !important;
    width: ~"calc(100vw - 61px)" !important;
  }
  .dexHeader {
    display: block !important;
    .dexTitle {
      justify-content: space-between;
    }
    .dexMenu {
      justify-content: space-between;
      margin-top: 10px !important;
    }
  }
  .estimatedGas {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    padding: 3px 16px;
  }
  .chainInfoArea {
    padding: 0 16px !important;
    margin-top: 12px !important;
  }
  .routeinfoArea {
    padding: 0 10px !important;
    bottom: -19px !important;
  }
  .routeShowDetail {
    height: 28px !important;
  }
  .routeArea {
    padding: 0 34px !important;
    margin-top: 0 !important;
  }
  .midRoute {
    padding-left: 13px !important;
    padding-right: 13px !important;
    top: -15px !important;
  }
  .areabottom {
    bottom: -5px !important;
  }

  .picShow {
    width: 30px !important;
    .amountNum {
      font-size: 12px !important;
      font-weight: 700 !important;
    }
    .chainName {
      font-weight: 400 !important;
    }
    .chainPic {
      width: 28px !important;
    }
    .tokenPic {
      width: 16px !important;
      top: 9px !important;
    }
  }
  .midPicShow {
    width: 30px !important;
    display: flex;
    align-items: center;
    .chainPic {
      width: 28px !important;
    }
    .tokenPic {
      width: 16px !important;
    }
  }

  .leftRoute,
  .rightRoute {
    flex: 0 !important;
  }
  .oneRoute {
    top: 0 !important;
  }

  .midRouteIn {
    padding: 3px 16px !important;
  }
  .picShowSim {
    flex: 0 !important;
  }
  .maxReturn {
    flex: 1 !important;
    padding: 9px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .LowGas {
    flex: 1 !important;
    padding: 9px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
.swap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-image: url(./static/media/bgf.png);
}
.dexRoutePathOpen {
  padding: 24px !important;
  max-width: 676px !important;
  .dexContent {
    opacity: 1 !important;
  }
}
.dexRoutePath {
  width: 100%;
  max-width: 0;
  border-radius: 24px;
  background: @bgWhite;
  margin-top: 45px;
  margin-left: 24px;
  margin-right: 40px;
  padding: 0px;
  transition: all 0.3s;
  box-shadow: 0px 16px 64px rgba(41, 46, 62, 0.08);
  overflow: hidden;
  .dexContent {
    opacity: 0;
  }
  .dexHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .dexTitle {
    font-size: 20px;
    font-weight: 700;
    color: @textPrimary;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menuRight {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .intervalOut {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    .intevaltext {
      font-size: 12px;
      font-weight: 400;
      color: @textSecond;
    }
  }
  .clockIcon {
    width: 16px;
  }

  .itervalIcon {
    width: 28px;
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    img {
      width: 100%;
    }
  }
  .showDetailIcon {
    width: 28px;
    margin-left: 8px;
    cursor: pointer;
    img {
      width: 100%;
    }
  }
  .dexMenu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    margin-bottom: 0px;
    background: @bgSecond;
    padding: 2px;
    border-radius: 16px;
  }
  .maxReturn {
    font-size: 12px;
    font-weight: 700;
    color: @textSecond;
    padding: 8px;
    border-radius: 16px;
    background: @bgSecond;
    flex: none;
    display: unset;
    cursor: pointer;
    .maxReturnIcon {
      display: inline-block;
    }
    .activeIcon {
      display: none;
    }
  }
  .LowGas {
    font-size: 12px;
    font-weight: 700;
    color: @textSecond;
    padding: 8px;
    border-radius: 16px;
    background: @bgSecond;
    flex: none;
    display: unset;
    cursor: pointer;
    .gasIcon {
      display: inline-block;
    }
    .gasActiveIcon {
      display: none;
    }
  }
  .maxReturnActive {
    background: @success10;
    color: @success;
    .maxReturnIcon {
      display: none;
    }
    .activeIcon {
      display: inline-block;
    }
  }
  .LowGasActive {
    background: @success10;
    color: @success;
    .gasIcon {
      display: none;
    }
    .gasActiveIcon {
      display: inline-block;
    }
  }
  .maxReturnIcon {
    width: 14px;
    img {
      width: 100%;
    }
  }
  .gasIcon {
    width: 14px;
    img {
      width: 100%;
    }
  }
}
.borderHeader {
  font-size: 14px;
  font-weight: 600;
  color: @textWhite;
  padding: 3px 12px;
  border-radius: 14px 14px 14px 0;
  background: @success;
  text-align: left;
  width: fit-content;
}
.borderHeaderDisabled{
  font-size: 14px;
  font-weight: 600;
  color: @success;
  background: @success10;
  padding: 3px 12px;
  border-radius: 14px 14px 14px 0;
  text-align: left;
  width: fit-content;
}
.dexRoutePathItem {
  margin-bottom: 23px;
}
.dexRoutePathItem:last-child {
  margin-bottom: 0px;
}
.pathItem {
  border: 2px solid @bgSecond;
  border-radius: 16px 16px 16px 16px;
  position: relative;
  padding-bottom: 24px;
  background: @bgSecond;
  cursor: pointer;

  .gasBody {
    display: flex;
    justify-content: center;
  }
  .estimatedGas {
    font-size: 12px;
    font-weight: 700;
    color: @textSecond;
    padding: 3px 16px;
    border-radius: 0 0 16px 16px;
    background: @bgThird;
    display: flex;
    align-items: center;
  }
  .chainInfoArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
  }
  .chainInfo {
    display: flex;
    align-items: flex-start;

    .amountNum {
      font-size: 14px;
      font-weight: 700;
      color: @textPrimary;
    }
    .chainName {
      font-size: 12px;
      font-weight: 600;
      color: @textSecond;
      line-height: 1;
    }
  }
  .picShow {
    position: relative;
    top: 0px;
    width: 40px;
    .chainPic {
      width: 36px;
      border-radius: 50%;
      border: 2px solid @bgThird;
    }
    .tokenPic {
      width: 20px;
      border-radius: 50%;
      border: 1px solid @bgThird;
      position: absolute;
      top: 15px;
      right: 0px;
      z-index: 2;
    }
  }
  .midPicShow {
    position: relative;
    width: 40px;
    height: 40px;
    .chainPic {
      width: 36px;
      border-radius: 50%;
      border: 2px solid @bgThird;
    }
    .tokenPic {
      width: 20px;
      border-radius: 50%;
      border: 1px solid @bgThird;
      position: absolute;
      top: 15px;
      right: 0px;
      z-index: 2;
    }
  }

  .routeArea {
    width: 100%;
    padding-left: 42px;
    padding-right: 45px;
    margin-top: 6px;
    .dashed {
      width: 100%;
      height: 30px;
      border: 1px dashed @textSecond;
      border-radius: 0 0 24px 24px;
      border-top: none;
      position: relative;
      .routeFromIcon {
        width: 5px;
        height: 5px;
        background: @textSecond;
        transform: rotate(45deg);
        position: absolute;
        top: -7px;
        left: -3px;
      }
      .routeToIcon {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid @textSecond;
        position: absolute;
        top: -7px;
        right: -5px;
      }
    }
    .dexChainIcon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: @bgWhite;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .routeShowDetail {
      position: relative;
      width: 100%;
      height: 35px;
    }

    .routeinfoArea {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 36px;
      position: absolute;
      bottom: -12px;
      padding: 0 20px;
      .dexChain {
        font-size: 12px;
        font-weight: 600;
        color: @textSecond;
        padding: 4px 5px;
        border-radius: 12px;
        background: @bgSecond;
        display: flex;
        align-items: center;
      }

      .picShowSim {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .midDexChain {
        font-size: 12px;
        font-weight: 600;
        color: @textSecond;
        padding: 4px 5px;
        border-radius: 12px;
        background: @bgSecond;
        display: flex;
        align-items: center;
      }
    }
    .mobileRoute {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
    }
  }
  .oneRoute {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    top: 5px;
  }
  .oneRouteDetail {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    top: 0;
  }
  .dashedClose {
    height: 9px !important;
  }
  .areabottom {
    bottom: 6px !important;
  }
}
.pathItem:last-child {
  margin-bottom: 0;
}
.pathItemActive {
  border: 2px solid @success;
}
.pathEmpty {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 40px;
  .emptyIcon {
    width: 60px;
  }
  .emptytext {
    font-size: 14px;
    font-weight: 500;
    color: @textUnable;
    width: 100%;
    overflow: hidden;
    .emptytextIn {
      width:300px;
      margin: 0 auto;
      .greenBold{
       color: @success;
       font-weight: 500;
       text-decoration: underline;
       cursor: pointer;
      }
    }
  }
}
.newsIcon {
  width: 10px;
  height: 10px;
  margin-left: 5px;
}
.pathTopIcon {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}