/* .selectToken {
  .modal-dialog {
    width: 464px;

    @include media-breakpoint-down(sm) {
      width: calc(100% - 16px);
    }

    .modal-content {
      background: rgba(255, 255, 255, 1);
    }

    .modalWrapper {
      border-radius: 16px !important;

      button:global {
        background: none;
        color: inherit;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
      }

      .header {
        padding: 28px 28px 16px !important;

        @media (max-width: 464px) {
          padding: 16px 24px !important;
        }

        .search {
          -webkit-border-radius: 30px;
          -moz-border-radius: 30px;
          border-radius: 30px;
          background: #f7f7f7;
          border: 1px solid rgba(143, 146, 161, 0.6);
          color: rgba(3, 3, 25, 0.6);
          width: 100%;
          height: 59px;
          padding: 17px 32px;
        }

        .search:focus {
          outline: none;
          border: 1px solid #a5beee;
          color: #333333;
        }
      }

      .contentWrapper {
        position: relative;

        .tokenbar {
          position: absolute;
          width: 96px;
          height: 372px;
          border-radius: 0 24px 0 10px;
          padding: 24px 20px;
          background: #f6f6f7;
          overflow-y: auto;
          overflow-x: hidden;

          ul {
            li:last-child > a {
              margin-bottom: 0;
            }
          }

          @media (max-width: 464px) {
            position: inherit;
            width: 100%;
            height: 96px;
            border-radius: 0;
            padding: 16px;
            overflow-x: auto;
            overflow-y: hidden;

            ul {
              overflow-y: hidden;
              display: flex;

              li {
                display: inline-block;
                margin: 5px;
              }
            }
          }

          .sideItem {
            padding: 14px;
            text-align: center;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(143, 146, 161, 0.8);
            margin-bottom: 16px;
            height: 56px;
            width: 56px;

            @media (max-width: 464px) {
              margin-bottom: 0;
            }

            &:hover,
            &.active {
              background: rgba(26, 106, 244, 0.08);
              border: 1px solid #1a6af4;
            }
          }
        }

        .tokenList {
          max-height: 372px;
          overflow: auto;
          margin-right: 5px;

          .tokenButton {
            padding: 16px 24px 16px 124px;

            @media (max-width: 464px) {
              padding: 16px 24px;
            }

            &:hover,
            &.active {
              background: rgba(247, 247, 247, 0.6);
            }
          }
        }

        ::-webkit-scrollbar {
          width: 4px;
          height: 4px;
        }


        ::-webkit-scrollbar-thumb {
          width: 4px;
          background: #dddfe4;
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: #c1c3c7;
        }
      }
    }
  }
} */


.selectToken .modal-dialog {
  width: 464px;
}
.selectToken .modal-dialog .modal-content {
  background: rgba(255, 255, 255, 1);
}
.selectToken .modal-dialog .modalWrapper {
  border-radius: 16px !important;
}
.selectToken .modal-dialog .modalWrapper button:global {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
.selectToken .modal-dialog .modalWrapper .header {
  padding: 28px 28px 16px !important;
}
@media (max-width: 464px) {
  .selectToken .modal-dialog .modalWrapper .header {
    padding: 16px 24px !important;
 }
}
.selectToken .modal-dialog .modalWrapper .header .search {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background: #f7f7f7;
  border: 1px solid rgba(143, 146, 161, 0.6);
  color: rgba(3, 3, 25, 0.6);
  width: 100%;
  height: 59px;
  padding: 17px 32px;
}
.selectToken .modal-dialog .modalWrapper .header .search:focus {
  outline: none;
  border: 1px solid #a5beee;
  color: #333;
}
.selectToken .modal-dialog .modalWrapper .contentWrapper {
  position: relative;
 /* Handle */
 /* Handle on hover */
}
.selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar {
  position: absolute;
  width: 96px;
  height: 372px;
  border-radius: 0 24px 0 10px;
  padding: 24px 20px;
  background: #f6f6f7;
  overflow-y: auto;
  overflow-x: hidden;
}
.selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar ul li:last-child > a {
  margin-bottom: 0;
}
@media (max-width: 464px) {
  .selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar {
    position: inherit;
    width: 100%;
    height: 96px;
    border-radius: 0;
    padding: 16px;
    overflow-x: auto;
    overflow-y: hidden;
 }
  .selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar ul {
    overflow-y: hidden;
    display: flex;
 }
  .selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar ul li {
    display: inline-block;
    margin: 5px;
 }
}
.selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar .sideItem {
  padding: 14px;
  text-align: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(143, 146, 161, 0.8);
  margin-bottom: 16px;
  height: 56px;
  width: 56px;
}
@media (max-width: 464px) {
  .selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar .sideItem {
    margin-bottom: 0;
 }
}
.selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar .sideItem:hover, .selectToken .modal-dialog .modalWrapper .contentWrapper .tokenbar .sideItem.active {
  background: rgba(26, 106, 244, 0.08);
  border: 1px solid #1a6af4;
}
.selectToken .modal-dialog .modalWrapper .contentWrapper .tokenList {
  max-height: 372px;
  overflow: auto;
  margin-right: 5px;
}
.selectToken .modal-dialog .modalWrapper .contentWrapper .tokenList .tokenButton {
  padding: 16px 24px 16px 124px;
}
@media (max-width: 464px) {
  .selectToken .modal-dialog .modalWrapper .contentWrapper .tokenList .tokenButton {
    padding: 16px 24px;
 }
}
.selectToken .modal-dialog .modalWrapper .contentWrapper .tokenList .tokenButton:hover, .selectToken .modal-dialog .modalWrapper .contentWrapper .tokenList .tokenButton.active {
  background: rgba(247, 247, 247, 0.6);
}
.selectToken .modal-dialog .modalWrapper .contentWrapper ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.selectToken .modal-dialog .modalWrapper .contentWrapper ::-webkit-scrollbar-thumb {
  width: 4px;
  background: #dddfe4;
  border-radius: 4px;
}
.selectToken .modal-dialog .modalWrapper .contentWrapper ::-webkit-scrollbar-thumb:hover {
  background: #c1c3c7;
}
@media (max-width: 767px) {


   .selectToken {
      width: calc(100% - 16px);
    }
}