.uni-ic {
  input[type='number'] {
    -moz-appearance: textfield;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  &-hidden {
    display: none !important;
  }

  &__loading {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    position: relative;
    align-content: space-around;
    justify-content: center;

    &__svg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      fill: none;
      stroke-width: 5px;
      stroke-linecap: round;
      stroke: RGB(64, 0, 148);

      &.bg {
        stroke-width: 8px;
        stroke: RGB(207, 205, 245);
      }

      &.animate {
        stroke-dasharray: 242.6;
        animation: fill-animation 1s cubic-bezier(1, 1, 1, 1) 0s infinite;
      }

      @keyframes fill-animation {
        0% {
          stroke-dasharray: 40 242.6;
          stroke-dashoffset: 0;
        }
        50% {
          stroke-dasharray: 141.3;
          stroke-dashoffset: 141.3;
        }
        100% {
          stroke-dasharray: 40 242.6;
          stroke-dashoffset: 282.6;
        }
      }
    }
  }

  position: relative;
  width: 100%;
  background: RGB(255, 255, 255);
  box-shadow: RGB(0 0 0 / 1%) 0px 0px 1px, RGB(0 0 0 / 4%) 0px 4px 8px,
    RGB(0 0 0 / 4%) 0px 16px 24px, RGB(0 0 0 / 1%) 0px 24px 32px;
  border-radius: 24px;

  color: RGB(86, 90, 105);

  &__header-container {
    padding: 1rem 1.25rem 0.5rem;
    margin-bottom: -4px;
  }

  &__header-content {
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    width: 100%;
    display: flex;
    padding: 0px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;

    &-title {
      box-sizing: border-box;
      margin: 0px;
      min-width: 0px;
      font-weight: 500;
    }

    &-settings {
      margin-left: 0.5rem;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      position: relative;
      border: none;
      text-align: left;

      &-button {
        position: relative;
        width: 100%;
        border: none;
        background-color: transparent;
        margin: 0px;
        height: 35px;
        padding: 0.15rem 0.5rem;
        border-radius: 0.5rem;
        user-select: none;
        cursor: pointer;
      }
    }
  }

  &__error,
  &__transaction {
    position: relative;
    padding: 8px;
    text-align: center;
  }

  &__swap {
    &-container {
      position: relative;
      padding: 8px;
    }
    &-content {
      display: grid;
      grid-auto-rows: auto;
    }

    &-input-container {
      display: flex;
      flex-flow: column nowrap;
      position: relative;
      border-radius: 20px;
      background-color: RGB(247, 248, 250);
      z-index: 1;
    }

    &-input-content {
      border-radius: 20px;
      border: 1px solid RGB(247, 248, 250);
      background-color: RGB(247, 248, 250);
    }

    &-input-content-main {
      display: flex;
      flex-flow: row nowrap;
      -webkit-box-align: center;
      align-items: center;
      padding: 0.75rem 0.75rem 0.75rem 1rem;

      &-from {
        color: RGB(0, 0, 0);
        width: 0px;
        position: relative;
        font-weight: 500;
        outline: none;
        border: none;
        flex: 1 1 auto;
        background-color: RGB(247, 248, 250);
        font-size: 24px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0px;
        appearance: textfield;
        text-align: right;

        &-max {
          height: 28px;
          background-color: RGB(253, 234, 241);
          border: 1px solid RGB(253, 234, 241);
          border-radius: 0.5rem;
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          margin-right: 0.5rem;
          color: RGB(255, 0, 122);
        }

        &-currency-container {
          -webkit-box-align: center;
          align-items: center;
          height: 2.2rem;
          font-size: 20px;
        
          font-weight: 500;
          background-color: RGB(255, 255, 255);
          color: RGB(0, 0, 0);
          border-radius: 12px;
          box-shadow: none;
          outline: none;
          cursor: pointer;
          user-select: none;
          border: none;
          padding: 0px 0.5rem;
        }

        &-currency {
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          justify-content: space-between;

          &-icon {
            width: 24px;
            height: 24px;
            box-shadow: RGB(0 0 0 / 8%) 0px 6px 10px;
            border-radius: 24px;
            display: flex;
            align-items: center;
          }

          &-symbol {
            margin: 0px 0.25rem 0px 0.75rem;
            font-size: 20px;
          
          }

          &-choose {
            margin: 0px 0.25rem 0px 0.5rem;
            height: 35%;
          }
        }
      }
    }

    &-content-balance-and-price {
      box-sizing: border-box;
      margin: 0px;
      min-width: 0px;
      width: 100%;
      display: flex;
      padding: 0px;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      justify-content: space-between;

      &-container {
        display: flex;
        flex-flow: row nowrap;
        -webkit-box-align: center;
        align-items: center;
        color: RGB(0, 0, 0);
        font-size: 0.75rem;
        line-height: 1rem;
        padding: 0px 1rem 1rem;
        -webkit-box-pack: end;
        justify-content: flex-end;
      }

      &__balance {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: start;
        justify-content: flex-start;
        width: fit-content;
        height: 17px;

        &-text {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          font-weight: 400;
          font-size: 14px;
          display: inline;
          cursor: pointer;
        }
      }

      &__price {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        font-weight: 400;
        font-size: 14px;

        &-text {
          color: RGB(0, 0, 0);
          font-size: inherit;
        }
      }
    }

    &-divider {
      padding: 4px;
      border-radius: 12px;
      height: 18px;
      width: 18px;
      position: relative;
      margin-top: -14px;
      margin-bottom: -14px;
      left: calc(50% - 16px);
      background-color: RGB(247, 248, 250);
      border: 4px solid RGB(255, 255, 255);
      z-index: 2;
      cursor: pointer;
    }

    &-output {
      &-container {
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        border-radius: 20px;
        background-color: RGB(247, 248, 250);
        z-index: 1;
      }

      &-content {
        border-radius: 20px;
        border: 1px solid RGB(247, 248, 250);
        background-color: RGB(247, 248, 250);

      

        &-main {
          display: flex;
          flex-flow: row nowrap;
          -webkit-box-align: center;
          align-items: center;
          padding: 0.75rem 0.75rem 0.75rem 1rem;

          &-from {
            color: RGB(0, 0, 0);
            width: 0px;
            position: relative;
            font-weight: 500;
            outline: none;
            border: none;
            flex: 1 1 auto;
            background-color: RGB(247, 248, 250);
            font-size: 24px;
          
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0px;
            appearance: textfield;
            text-align: right;
          }

          &-select {
            -webkit-box-align: center;
            align-items: center;
            height: 2.2rem;
            font-size: 20px;
            font-weight: 500;
            background-color: RGB(255, 255, 255);
            color: RGB(0, 0, 0);
            border-radius: 12px;
            box-shadow: none;
            outline: none;
            cursor: pointer;
            user-select: none;
            border: none;
            padding: 0px 0.5rem;

            &-content {
              display: flex;
              -webkit-box-align: center;
              align-items: center;
              -webkit-box-pack: justify;
              justify-content: space-between;

              &-title {
                margin: 0px 0.25rem;
                font-size: 16px;
              }

              &-icon {
                margin: 0px 0.25rem 0px 0.5rem;
                height: 35%;
              }
            }
          }
        }
      }
    }

    &-button {
      &:disabled {
        background-color: RGB(237, 238, 242);
        color: RGB(136, 141, 155);
        cursor: auto;
        box-shadow: none;
        border: 1px solid transparent;
        outline: none;
        opacity: 0.6;
      }

      padding: 18px;
      width: 100%;
      font-weight: 500;
      text-align: center;
      border-radius: 20px;
      outline: none;
      border: 1px solid transparent;
      text-decoration: none;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      flex-wrap: nowrap;
      -webkit-box-align: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      z-index: 1;
      background-color: RGB(255, 0, 122);
      color: white;
      box-sizing: border-box;
      margin: 0px;
      min-width: 0px;
      appearance: none;
      margin-top: 10px;

      // &-container {
      //   margin-top: 1rem;
      // }

      &-text {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        font-size: 20px;
        font-weight: 500;
      }
    }

    &-quote {
      width: 100%;
      padding-top: 6px;
      padding-bottom: 6px;
      border-radius: 20px;

      &-container {
        display: grid;
        grid-auto-rows: auto;
        row-gap: 4px;
      }

      &-price {
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;

        &-text {
          font-weight: 400;
          line-height: 1.5;
          font-size: 14px;
          padding: 0.1rem 0.5rem 0.1rem 0.35rem;
          justify-content: center;
          align-items: center;
          display: 'flex';

          &-info {
            &__container {
              padding: 0.25rem;
              line-height: 0;
              display: inline-block;
            }
          }
        }
      }

      &-slippage {
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;

        &-text {
          font-weight: 400;
          line-height: 1.5;
          font-size: 14px;
        }
      }
    }

    &-allow {
      padding: 16px;
      width: 100%;
      font-weight: 500;
      text-align: center;
      border-radius: 20px;
      outline: none;
      border: 1px solid transparent;
      text-decoration: none;
      display: flex;
      flex-wrap: nowrap;
      -webkit-box-align: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      z-index: 1;
      will-change: transform;
      transition: transform 450ms ease 0s;
      transform: perspective(1px) translateZ(0px);
      background-color: RGB(255, 0, 122);
      color: white;
      margin-bottom: 12px;

      &-container {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        width: 100%;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
      }

      &-icon {
        width: 24px;
        height: 24px;
        box-shadow: RGB(0 0 0 / 8%) 0px 6px 10px;
        border-radius: 24px;
        margin-right: 10px;
        display: flex;
        align-items: center;
      }

      &-info {
        display: inline-block;
      }
    }
  }

  &__settings {
    display: grid;
    grid-auto-rows: auto;
    row-gap: 12px;
    padding: 1rem;

    &-container {
      min-width: 20.125rem;

     
      background-color: RGB(237, 238, 242);
      box-shadow: RGB(0 0 0 / 1%) 0px 0px 1px, RGB(0 0 0 / 4%) 0px 4px 8px,
        RGB(0 0 0 / 4%) 0px 16px 24px, RGB(0 0 0 / 1%) 0px 24px 32px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      font-size: 1rem;
      position: absolute;
      top: 3rem;
      right: 0rem;
      z-index: 100;
    }

    &-transaction {
      display: grid;
      grid-auto-rows: auto;
      row-gap: 12px;

      &-title {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        font-weight: 600;
        font-size: 14px;
      }

      &-slippage {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: start;
        justify-content: flex-start;
        width: fit-content;

        &-container {
          display: grid;
          grid-auto-rows: auto;
          row-gap: 8px;
        }

        &-title {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          font-weight: 400;
          font-size: 14px;
        }

        &-info {
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: center;
          justify-content: center;
          padding: 0.2rem;
          border: none;
          // background: none RGB(247, 248, 250);
          outline: none;
          cursor: default;
          border-radius: 36px;
        }

        &-options {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          width: 100%;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          justify-content: space-between;
          cursor: pointer;
        }

        &-option {
          -webkit-box-align: center;
          align-items: center;
          height: 2rem;
          border-radius: 36px;
          font-size: 1rem;
          width: auto;
          min-width: 3.5rem;
          border: 1px solid RGB(237, 238, 242);
          outline: none;
          background: RGB(255, 255, 255);
          margin-right: 8px;
          color: RGB(0, 0, 0);

          &:not(.selected) {
            cursor: pointer;
          }

          &.selected {
            background: RGB(255, 0, 122);
            color: RGB(255, 255, 255);
          }
        }

        &-manual {
          color: RGB(0, 0, 0);
          -webkit-box-align: center;
          align-items: center;
          border-radius: 36px;
          font-size: 1rem;
          width: auto;
          min-width: 3.5rem;
          border: 1px solid RGB(237, 238, 242);
          outline: none;
          background: RGB(255, 255, 255);
          height: 2rem;
          position: relative;
          padding: 0px 0.75rem;
          flex: 1 1 0%;

          &.selected {
            background: #ff007a;

            .uni-ic__settings-transaction-slippage-manual-content {
              background: #ff007a;
              color: white;
            }

            input {
              background: #ff007a;
              color: white;
            }
          }

          &-content {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            width: 100%;
            display: flex;
            padding: 0px;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            justify-content: space-between;
          }

          &-input {
            background: RGB(255, 255, 255);
            font-size: 16px;
            width: auto;
            outline: none;
            color: RGB(0, 0, 0);
            text-align: right;
            width: 100%;
            height: 100%;
            border: 0px;
            border-radius: 2rem;
          }
        }

        &-warning {
          font-size: 14px;
          padding-top: 7px;
          color: RGB(243, 132, 30);
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          width: 100%;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          justify-content: space-between;
        }
      }

      &-deadline {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: start;
        justify-content: flex-start;
        width: fit-content;

        &-container {
          display: grid;
          grid-auto-rows: auto;
          row-gap: 8px;
        }

        &-title {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          font-weight: 400;
          font-size: 14px;
        }

        &-info {
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: center;
          justify-content: center;
          padding: 0.2rem;
          border: none;
          // background: none RGB(247, 248, 250);
          outline: none;
          cursor: default;
          border-radius: 36px;
        }

        &-minute {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: start;
          justify-content: flex-start;
          width: fit-content;

          &-button {
            color: RGB(0, 0, 0);
            -webkit-box-align: center;
            align-items: center;
            border-radius: 36px;
            font-size: 1rem;
            width: auto;
            min-width: 3.5rem;
            border: 1px solid RGB(237, 238, 242);
            outline: none;
            background: RGB(255, 255, 255);
            height: 2rem;
            position: relative;
            padding: 0px 0.75rem;
            flex: 1 1 0%;
            width: 80px;
          }

          &-input {
            width: 100% !important;
            height: 100%;
            border: 0px;
            border-radius: 2rem;
            background: RGB(255, 255, 255);
            font-size: 16px;
            width: auto;
            outline: none;
            color: RGB(0, 0, 0);
            text-align: right;
          }

          &-label {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-weight: 400;
            font-size: 14px;
            padding-left: 8px;
          }
        }
      }
    }

    &-interface {
      &-header {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        font-weight: 600;
        font-size: 14px;
      }

      &-multihops {
        &-container {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          width: 100%;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          justify-content: space-between;
        }

        &-text {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          font-weight: 400;
          font-size: 14px;

          &-container {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            display: flex;
            padding: 0px;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: start;
            justify-content: flex-start;
            width: fit-content;
          }

          &-info {
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            padding: 0.2rem;
            border: none;
            outline: none;
            cursor: default;
            border-radius: 36px;
          }
        }

        &-actions {
          border-radius: 12px;
          border: none;
          background: RGB(237, 238, 242);
          display: flex;
          width: fit-content;
          cursor: pointer;
          outline: none;
          padding: 0px;

          &-on,
          &-off {
            padding: 0.35rem 0.6rem;
            border-radius: 12px;
            background: white;
            color: black;
            font-size: 1rem;
            font-weight: 500;

            &.selected {
              background: RGB(255, 0, 122);
              color: white;
              cursor: default;
            }
          }
        }
      }
    }
  }

  &__modal {
    &-tokens {
      &-title {
        margin-top: 2px;
      }

      &-search {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        width: 100%;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: start;
        justify-content: flex-start;

        &__input {
          position: relative;
          display: flex;
          padding: 16px;
          -webkit-box-align: center;
          align-items: center;
          width: 100%;
          white-space: nowrap;
          background: none;
          outline: none;
          border-radius: 20px;
          color: RGB(0, 0, 0);
          border: 1px solid RGB(206, 208, 217);
          appearance: none;
          font-size: 18px;
          transition: border 100ms ease 0s;
          margin-bottom: 12px;
        }
      }

      &-item {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        width: 100%;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding: 4px 20px;
        height: 56px;
        display: grid;
        grid-template-columns: auto minmax(auto, 1fr) auto minmax(0px, 72px);
        gap: 16px;
        pointer-events: none;
        // opacity: 0.5;

        &-container {
          &:hover {
            background: RGB(255, 0, 122);
            color: white;
            cursor: pointer;
          }

          &.selected {
            background: RGB(255, 0, 122);
            color: white;
            opacity: 0.6;
          }
        }

        &-icon {
          width: 24px;
          height: 24px;
          box-shadow: RGB(0 0 0 / 8%) 0px 6px 10px;
          border-radius: 24px;
          display: flex;
          align-items: center;
        }

        &-content {
          display: flex;
          flex-direction: column;
          -webkit-box-pack: start;
          justify-content: flex-start;
          align-items: flex-start;

          &-symbol {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-weight: 500;
          }

          &-name {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-weight: 300;
            font-size: 12px;
          }
        }

        &-balance-content {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: start;
          justify-content: flex-start;
          width: fit-content;
          justify-self: flex-end;

          &-value {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            white-space: nowrap;
            overflow: hidden;
            max-width: 5rem;
            text-overflow: ellipsis;
          }
        }
      }
    }

    &-confirm-swap {
      width: 100%;
      padding: 1rem;
      &__content {
        display: grid;
        grid-auto-rows: auto;
        row-gap: 4px;
        margin-top: 1rem;
      }

      &__input,
      &__output {
        display: grid;
        grid-auto-rows: auto;
        row-gap: 8px;

        &-container {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          width: 100%;
          border-radius: 16px;
          padding: 0.75rem 1rem;
          background-color: RGB(237, 238, 242);
          margin-bottom: 0.25rem;
        }

        &-header {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          width: 100%;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          justify-content: space-between;

          &__text {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-weight: 500;
            font-size: 14px;
            color: RGB(136, 141, 155);
          }

          &__price {
            color: RGB(0, 0, 0);
            font-size: inherit;

            &-container {
              box-sizing: border-box;
              margin: 0px;
              min-width: 0px;
              font-weight: 400;
              font-size: 14px;
            }
          }
        }

        &-main {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          width: 100%;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          justify-content: space-between;

          &__symbol {
            box-sizing: border-box;
            min-width: 0px;
            display: flex;
            padding: 0px;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: start;
            justify-content: flex-start;
            width: fit-content;
            margin: 0px;

            &__image {
              width: 20px;
              height: 20px;
              box-shadow: RGB(0 0 0 / 8%) 0px 6px 10px;
              border-radius: 24px;
              margin-right: 12px;
            }

            &__label {
              box-sizing: border-box;
              margin: 0px;
              min-width: 0px;
              font-size: 20px;
              
              font-weight: 500;
            }
          }

          &__price {
            box-sizing: border-box;
            min-width: 0px;
            display: flex;
            padding: 0px 1rem;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: start;
            justify-content: flex-start;
            width: fit-content;
            margin: 0px;
            margin-top: 0.25rem;

            &-text {
              box-sizing: border-box;
              margin: 0px;
              min-width: 0px;
              font-size: 24px;
             
              font-weight: 500;
              text-overflow: ellipsis;
              max-width: 220px;
              overflow: hidden;
              text-align: right;
            }
          }
        }
      }

      &__divider {
        padding: 4px;
        border-radius: 12px;
        height: 32px;
        width: 32px;
        position: relative;
        margin-top: -18px;
        margin-bottom: -18px;
        left: calc(50% - 16px);
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        background-color: RGB(247, 248, 250);
        z-index: 2;
      }

      &__price {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        width: 100%;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;

        &__title {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          font-weight: 500;
          font-size: 14px;
        }

        &__rate {
          align-items: center;
          display: flex;
          width: fit-content;
          &-button {
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            padding: 0px;
            font-size: 0.875rem;
            font-weight: 400;
            background-color: transparent;
            border: none;
            height: 24px;
            cursor: pointer;
          }
        }
      }

      &__info {
        display: grid;
        grid-auto-rows: auto;
        row-gap: 8px;

        &-container {
          box-sizing: border-box;
          margin: 0px;
          margin-top: 0.5rem;
          min-width: 0px;
          width: 100%;
          border-radius: 16px;
          padding: 0.75rem;
          border: 1px solid RGB(237, 238, 242);
          background-color: RGB(247, 248, 250);
        }

        &__item {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          width: 100%;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          justify-content: space-between;

          &__title {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            display: flex;
            padding: 0px;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: start;
            justify-content: flex-start;
            width: fit-content;

            &-content {
              box-sizing: border-box;
              margin: 0px;
              min-width: 0px;
              font-weight: 400;
              font-size: 12px;
            }
          }

          &__value {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-weight: 500;
            color: RGB(0, 0, 0);
            text-align: right;
            font-size: 12px;
          }
        }
      }

      &__output-info {
        box-sizing: border-box;
        margin: 0px;
        min-width: 24px;
        font-weight: 400;
        font-size: 12px;
        font-style: italic;
        text-align: left;
        width: 100%;

        &-container {
          display: grid;
          grid-auto-rows: auto;
          row-gap: 8px;
          justify-items: flex-start;
          padding: 0.75rem 1rem;
          min-width: 24px;
        }
      }

      &__action {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        width: 100%;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: start;
        justify-content: flex-start;
        flex-wrap: wrap;

        &-container {
          display: grid;
          grid-auto-rows: auto;
          row-gap: 12px;
          padding: 0px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
        }

        &__button {
          padding: 16px;
          width: 100%;
          font-weight: 500;
          text-align: center;
          border-radius: 20px;
          outline: none;
          border: 1px solid transparent;
          text-decoration: none;
          display: flex;
          -webkit-box-pack: center;
          justify-content: center;
          flex-wrap: nowrap;
          -webkit-box-align: center;
          align-items: center;
          cursor: pointer;
          position: relative;
          z-index: 1;
          will-change: transform;
          transition: transform 450ms ease 0s;
          transform: perspective(1px) translateZ(0px);
          background-color: RGB(255, 0, 122);
          color: white;
          margin: 10px 0px 0px;

          &:disabled {
            background-color: RGB(255, 0, 122);
            color: white;
            cursor: auto;
            box-shadow: none;
            border: 1px solid transparent;
            outline: none;
            opacity: 0.4;
            pointer-events: none;
          }

          &-text {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-size: 20px;
            font-weight: 500;
          }
        }
      }

      &__price-updated {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        width: 100%;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;

        &-container {
          display: grid;
          grid-auto-rows: auto;
          row-gap: 0px;
          justify-items: flex-start;
          background-color: RGB(255, 0, 122, 0.1);
          color: RGB(255, 0, 122);
          padding: 0.5rem;
          border-radius: 12px;
          margin-top: 8px;
        }

        &__text {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          display: flex;
          padding: 0px;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: start;
          justify-content: flex-start;
          width: fit-content;

          svg {
            margin-right: 8px;
            min-width: 24px;
          }

          &-content {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-weight: 500;
            color: RGB(255, 0, 122);
          }
        }

        &__action {
          padding: 0.5rem;
          width: fit-content;
          font-weight: 500;
          text-align: center;
          border-radius: 20px;
          outline: none;
          border: 1px solid transparent;
          text-decoration: none;
          display: flex;
          -webkit-box-pack: center;
          justify-content: center;
          flex-wrap: nowrap;
          -webkit-box-align: center;
          align-items: center;
          cursor: pointer;
          position: relative;
          z-index: 1;
          will-change: transform;
          transition: transform 450ms ease 0s;
          transform: perspective(1px) translateZ(0px);
          background-color: RGB(255, 0, 122);
          color: white;
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          appearance: none;
          display: inline-block;
          line-height: inherit;
          border-radius: 12px;
          font-size: 12px;
        }
      }
    }

    &-transaction {
      &__state {
        display: grid;
        grid-auto-rows: auto;
        row-gap: 12px;

        &__loading {
          display: flex;
          flex-direction: column;
          -webkit-box-pack: start;
          justify-content: flex-start;
          width: 100%;
          -webkit-box-align: center;
          align-items: center;
          padding: 60px 0px;

          &-spinner {
            animation: 2s linear 0s infinite normal none running iVXCSc;
            height: 90px;
            width: 90px;

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

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

        &__info {
          display: grid;
          grid-auto-rows: auto;
          row-gap: 12px;
          justify-items: center;

          &-confirmation {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-weight: 500;
            font-size: 20px;
            text-align: center;
          }

          &-quote {
            display: grid;
            grid-auto-rows: auto;
            row-gap: 12px;
            justify-items: center;

            &-info {
              box-sizing: border-box;
              margin: 0px;
              min-width: 0px;
              font-weight: 600;
              font-size: 14px;
              text-align: center;
            }
          }
        }

        &__action {
          box-sizing: border-box;
          margin: 0px 0px 12px;
          min-width: 0px;
          font-size: 12px;
          text-align: center;

          button {
            padding: 16px;
            width: 100%;
            font-weight: 500;
            text-align: center;
            border-radius: 20px;
            outline: none;
            border: 1px solid transparent;
            text-decoration: none;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            flex-wrap: nowrap;
            -webkit-box-align: center;
            align-items: center;
            cursor: pointer;
            position: relative;
            z-index: 1;
            will-change: transform;
            transition: transform 450ms ease 0s;
            transform: perspective(1px) translateZ(0px);
            background-color: RGB(232, 0, 111);
            color: white;
          }
        }
      }

      &__rejected {
        display: grid;
        grid-auto-rows: auto;
        row-gap: 12px;

        &__content {
          display: grid;
          grid-auto-rows: auto;
          row-gap: 24px;
          justify-items: center;
          margin-top: 20px;
          padding: 2rem 0px;

          &-text {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            font-weight: 500;
            font-size: 16px;
            color: RGB(218, 45, 43);
            text-align: center;
            width: 85%;
            word-break: break-word;
          }
        }

        &__dismiss {
          display: grid;
          grid-auto-rows: auto;
          row-gap: 12px;
          padding: 0px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;

          &-button {
            padding: 16px;
            width: 100%;
            font-weight: 500;
            text-align: center;
            border-radius: 20px;
            outline: none;
            border: 1px solid transparent;
            text-decoration: none;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            flex-wrap: nowrap;
            -webkit-box-align: center;
            align-items: center;
            cursor: pointer;
            position: relative;
            z-index: 1;
            will-change: transform;
            transition: transform 450ms ease 0s;
            transform: perspective(1px) translateZ(0px);
            background-color: RGB(232, 0, 111);
            color: white;
          }
        }
      }
    }
  }

  .uni-ic__swap-quote-price-text-info:hover .uni-ic__tooltip-wrapper,
  .uni-ic__settings-transaction-slippage-info:hover .uni-ic__tooltip-wrapper,
  .uni-ic__settings-transaction-deadline-info:hover .uni-ic__tooltip-wrapper,
  .uni-ic__settings-interface-multihops-text-info:hover
    .uni-ic__tooltip-wrapper {
    visibility: visible;
  }

  &__tooltip {
    display: grid;
    grid-auto-rows: auto;
    row-gap: 8px;

    &-wrapper {
      z-index: 9999;
      visibility: hidden;
      // opacity: 0;
      // transition: opacity 1s;
      background: RGB(237, 238, 242);
      border: 1px solid RGB(206, 208, 217);
      box-shadow: RGB(47 128 237 / 10%) 0px 4px 8px 0px;
      border-radius: 8px;
      position: absolute;
      margin-left: 30px;
      right: 10px;
    }

    &-container {
      max-width: 256px;
      min-width: 256px;
      padding: 0.6rem 1rem;
      font-weight: 400;
      word-break: break-word;
    }

    &__item {
      box-sizing: border-box;
      margin: 0px;
      min-width: 0px;
      width: 100%;
      display: flex;
      padding: 0px;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      justify-content: space-between;

      &__title {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        display: flex;
        padding: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: start;
        justify-content: flex-start;
        width: fit-content;

        &__content {
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          font-weight: 400;
          font-size: 12px;
        }
      }

      &__value {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        font-weight: 500;
        text-align: right;
        font-size: 12px;
      }
    }
  }

  &__modal {
    display: none;
    position: fixed;
    z-index: 3;
    padding-bottom: 100vh;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: RGB(0, 0, 0, 0.4);
    max-height: 80vh;
    min-height: 80vh;

    &__content {
      border-radius: 20px;
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      width: 20%;

    

    }

    &__close {
      float: right;
      font-size: 28px;
      font-weight: bold;

      &:hover,
      &:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}