style.css

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}


.logo-heading {
  color: rgb(53, 132, 25);
}

.logo-heading img {
  width: 32px;
  height: 32px;
  margin-right: 0.5em;
}

.swap-panel h3 {
  font-size: 20px;
  padding-top: 3px;
}

 .swap-panel {
	 background: white;
	 box-shadow: rgb(53 132 25 / 1%) 0px 0px 1px, rgb(53 132 25 / 10%) 0px 4px 8px, rgb(53 132 25 / 10%) 0px 16px 24px, rgb(53 132 25 / 1%) 0px 24px 32px;
	 border-radius: 24px;
	 max-width: 480px;
	 margin: 0 auto;
	 padding: 16px;
	 padding-bottom: 8px;
   margin-top: 24px;
   margin-bottom: 64px;
}
 .swap-panel .balance-row {
	 display: flex;
	 color: gray;
}
 .swap-panel .balance-row .balance {
	 font-size: 12px;
	 text-align: left;
	 padding-left: 8px;
	 display: flex;
	 align-items: center;
}
 .swap-panel .balance-row .get-wrapped-near a {
	 color: #358419;
	 text-decoration: none;
	 font-size: 12px;
	 display: flex;
	 align-items: center;
	 padding-left: 4px;
}
 .swap-panel .balance-row .half-max-buttons {
	 flex: 1;
	 text-align: right;
	 margin-right: 8px;
}
 .swap-panel .balance-row .half-max-buttons a {
	 font-size: 12px;
	 cursor: pointer;
}
 .swap-panel .pi.pi-arrow-down {
	 font-size: 12px;
	 color: #4d90ee;
}
 .swap-panel .flip-swap {
	 border-radius: 64px;
	 cursor: pointer;
	 box-shadow: rgb(53 132 25 / 1%) 0px 0px 1px, rgb(53 132 25 / 10%) 0px 4px 8px, rgb(53 132 25 / 10%) 0px 16px 24px, rgb(53 132 25 / 1%) 0px 24px 32px;
	 position: relative;
	 width: 32px;
	 height: 32px;
	 margin: 0 auto;
	 background-color: white;
	 top: -12px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
.swap-panel .flip-swap .material-icons {
  padding-left: 96px;
  color: rgb(100, 181, 246);
}
 .swap-panel h4 {
	 font-weight: normal;
	 margin-bottom: 16px;
	 margin-left: 8px;
	 margin-top: 0;
	 text-align: left;
}
 .swap-panel .trade-price-info {
	 display: flex;
	 text-align: left;
	 background: #f7f8fa;
	 border-radius: 16px;
	 padding: 8px;
	 padding-left: 24px;
	 font-size: 12px;
	 margin-bottom: 16px;
}
 .swap-panel .trade-price-info i.pi {
	 margin-right: 8px;
}
 .swap-panel .trade-routes-container {
	 margin-top: 16px;
	 margin-bottom: 16px;
}
 .swap-panel .trade-routes-container:after {
	 content: '';
	 width: 100%;
	 position: relative;
	 bottom: 0;
	 background: linear-gradient(transparent, red);
}
 .swap-panel .trade-routes {
	 padding-top: 16px;
	 text-align: center;
	 max-height: 300px;
	 overflow-y: scroll;
	 margin-bottom: 8px;
}
 .swap-panel .trade-routes .trade-routes-num-routes-found {
	 margin-top: 16px;
	 margin-bottom: 16px;
}
 .swap-panel .trade-routes .trade-route-row {
	 text-align: left;
	 border: 2px solid #b5c1db;
	 border-radius: 12px;
	 padding: 16px;
	 transition: all 0.1s ease-out;
	 padding-top: 0;
	 color: gray;
	 margin-bottom: 12px;
	 cursor: pointer;
}
 .swap-panel .trade-routes .trade-route-row.trade-route-row-selected {
	 border-color: #39877b;
	 color: black;
}
 .swap-panel .trade-routes .trade-route-row .trade-route-row-exchange-name {
	 flex: 1;
	 font-weight: bold;
}
 .swap-panel .trade-routes .trade-route-row .trade-route-row-exchange-logo {
	 width: 24px;
	 height: 24px;
	 margin-left: -4px;
	 margin-right: 8px;
	 border-radius: 24px;
	 background-color: black;
}
 .swap-panel .trade-routes .trade-route-row .trade-route-row-exchange-logo.trade-route-row-exchange-logo-Tonic {
	 padding: 3px;
}
 .swap-panel .trade-routes .trade-route-row .trade-route-row-selected-badge {
	 background-color: #39877b;
	 color: white;
	 border-radius: 32px 32px 32px 0;
	 padding: 2px 10px;
	 display: inline;
	 position: relative;
	 font-size: 12px;
	 top: -10px;
	 left: -18px;
	 font-weight: 500;
}
 .swap-panel .trade-routes .trade-route-row .trade-route-row-trade-info {
	 text-align: right;
}
 .swap-panel .trade-routes .trade-route-row .trade-route-row-trade-info .trade-route-row-output-amount {
	 font-size: 20px;
}
 .swap-panel .trade-routes .trade-route-row .trade-route-row-trade-info .trade-route-row-usdc-amount {
	 display: none;
	 color: #6e727d;
}
 .main-action-button {
	 width: 100%;
	 background-color: #e1ecfd;
	 color: #4d90ee;
	 font-size: 16px;
	 font-weight: 700;
	 border: none;
	 border-radius: 24px;
	 padding: 16px;
	 transition: all 0.2s ease-out;
}
 .main-action-button:disabled {
	 opacity: 0.5;
}
 .main-action-button:not(:disabled) {
	 cursor: pointer;
}
 .main-action-button:hover:not(:disabled) {
	 background-color: #d3e3fc;
}
 .main-action-button:disabled {
	 opacity: 0.5;
}