Particle Connect CSS

index.css

/* src/styles/root.css */
.particle-connect-ui-theme-ligth {
  --bg-color: #FFFFFF;
  --font-color1: #000000;
  --font-color2: rgba(60, 66, 66, 0.6);
  --font-color3: rgba(107, 113, 146, 1);
  --scoll-bar-color: rgba(0, 0, 0, 0.3);
  --hover-color: rgba(0, 0, 0, 0.3);
  --hover-color2: rgba(81, 119, 249, 0.05);
  --active-color: rgba(0, 0, 0, 1);
  --active-bg-color: rgba(0, 0, 0, 1);
  --active-font-color: rgba(255, 255, 255, 1);
  --close-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAA79JREFUaEPdm7uO1TAQhv/lfl8uFW9BR0/PE9BQIEQLEhIIUSEEEhK0CFHQ8AT09HS8Bd2y3Je9os/yrLw5yYnt2IecjBQJ7Ukcf5nx7/HYrKiOHZF0VNJhfx2StOIv3rjnr11JO/7akrRduju8tJQBdFzSMUkA5RjAm5L+SgJ4sA0F5PmTkk4MgOqCAHZD0h/v7SzYXEADAy63jdgOE85AZoHmdI5QPOPHVmwnS9zHWP2ZGrqpgKd9OKY+VwLQxImw/RXbYGxHEY1zklDHMRhq+10S43SuxQACt/ofQrKv74Tstz7IPsCxwhl8L+Q8QH7Dc2MJyy6PEq54ErWdsXmAwKGYy2AkBUBGA6KWzHHLZMyTM+ra5kG8hmL2jc+xwROiKOuBFK8N4sIIFTP2YzIe18Obm4CEJeG5zEaYEq7OQkD+fXEJQ7PpDCb/r6aqIeApSVxTsN+SuA54EO/lruPG9lHw4loIyCIV5ZySoaibFqJn/Wp8COBlSc8lfZb0KrOhu5KuSHog6UtmG/YYVYEfBlgiPF9Iuulbfy3pcWIHn0i64595J+l+4vNtYrMGILnm+YGN8fg1Se+D3DUFMoRjLrsh6WOBPq0DSD2FFXoJuy7pTSJkE+62pA8lOkMFAEDggCxlKZA14eDZsCVR6VVDDGRtOACditbKPedBLgIOwB1Lz2pN8G2QvNjUEkEpOeaaw8wBXqqcfzYhrRO14XjP3iIAeRGQb4NUkFTqVkG17BJIB1hiku9T4HDM2b0p82Rf+12/79YUGXtpCEcVDGPXCasN6cZgzeJSm1oClpoM5Hpwq8ZE3+a5pqDEzJO5UOFzbqIvmarFwNk9i4B0qVqpZDsFblGQLtnGSilpToZSy5NuVW+AJRJuMpKn/oOlTuJNyEdeiIaMQ7bZXIhiJNuo6RB7KOmeP0iQk36FkC8lPRvSGV/KdypqNjRMmdvITihZfMrs3FVfsiDrsTkzp6mZohONTL5sOJXCL3sUlAzddlqzdD8FL+4XfdsA+VutBXDOWEp9hnFL2X7f2naXlrkI7Iq9fYD8PukNUPsA1ErHvj9vfZ3ZF7Qf5u3ijv2EhTHMPWnRt03N5E2GU6solSoizfuZ0NnR7TwQ1AdIg2M75RSGZe9ppxhAm07YXitdIM71IAcNgGs9GxOjol0vJhFYxBHKrvfb0Uq3extjsR4M20JZWV4tWmFRSo5TJh17zgE0WEodeLS2ACEgeIz1XbINAbSXEbJcpUEBs5O+yWAx82Bqo5M8lN71EUbz3wr+AYmK2/Eo29nbAAAAAElFTkSuQmCC);
  --more-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAOCAYAAADE84fzAAAAAXNSR0IArs4c6QAAALBJREFUOE+l1N8NwiAQx/Evk5gmLtANfHGOxgWMu3SBdo2+6AgO4DDmlEsoAXoALw3k+Pyuf6jjPy7ACVj9vOfyAN7Ay3n46bUFuHXIsn/y+4cYl/XWgBAWZxRcQU1sCYhhuftF8Z6AJCxgiLcEZOEUXhNQhHO4JeAQLuGlABN8hKcCPsA5OAe/ryJ3LuIXmqqLO9WaImzpXCHzowi7s3Su9RtwBWbgbvlF1OAWb1fzBRrFKl8Qs4flAAAAAElFTkSuQmCC);
  --more-icon-fff: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAOCAYAAADE84fzAAAAAXNSR0IArs4c6QAAALZJREFUOE+l1MsNwjAQRdH7KkFINEAHbKgDpQFELzRg2sgGSqAAehnkyKAQ/Jkk3tmanGdNbAvAzA7ARtItztcMM7sAT0kPJfiewCCpW4qbWQBO6fvtFI/riwImcHT2Sm0ZJ84OyMCdpDDgawJKcDS/+JKAGvyHzwlowVncE+CBi3gtwAtX8ULAC9iN7sFwKkr34ueH5ooyO/2UVeHmzivHtAm78dSiHjgCV0lnzxPRbIsHKdW8AZKJbFk8CuGzAAAAAElFTkSuQmCC);
  --back-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAA5hJREFUaEPdm8luFDEQhv+w7+trcOcFQICE4MR658KNO0cEB04cQUgIngUkxA0J8RgQSICQkAR9lj3q9HSP3T2ubs+UZAmle2x/XeWqctmsyEYOSDooab9v+ySt+MaIu77tSNr2bUvSv9zTYdBcAtBhSYckAdRHAN6U9FcSwHPLvID8/qikI3NAtUEAuyHpj9d2L9i+gAEMuL59pE4YcwayF2ifyWGKJ/zaSp1kjvdYq+tdTbcr4HFvjl1/lwMwOCfM9ldqh6kTxWmckoR3LEHwtj8lsU5nSgogcKdHMMnY3DHZHzHIGGCpcAE+CjkLkGdorhSzbNMo5oom8bZTMgsQODzmIghJAZDJgHhLYtwiCXFyyrs2aRCt4TFj67M0eEwUz7onxWuCOFugx0z9mKzH1erLdUDMEvNcZMFMMVcnVUD+fW4BTbOuDIL/9+BVq4DHJNGGEPaJzyVdlPRQ0ufMg/6WRNujQbTXdx/XZX7AvZJ0w//opaTHXTpIeBctfqsCsknFc1pLHY71ctNAg3DgUTeDiZ70u3FLwCa425I+GQ1KVWAtAFqb59BwfDNnpgCSa54x+op0OwZcwFkFkHoKO3QLGRMOnnUAgQMyt4wNB89G2BLl3jWUAAeg86K5c89S4ADcDulZrgBPPH0t6Zq3d+KcZSiILSsHeD5j/vlU0gM/KqnSLcM4F4Pj+a4lIOW9e5Lep8zE6B0HmDPIE1PfSbpc0eJ9SR+MAGLd7lg4GSDfSLpaAKRbgxbFJcIOkFdGhtyyDPQlQLpAb5mqjQ3pUjXrZLsJ8o6kjzEPkeG5S7aRnJ60aV51SBKAu8aQk+0SE7JKuKuwQBJCLlWyHEtI4rAzUYTB8abWQir3tgZ5XdIXg4Ep5TsvGsTaTMM4dcgXkp5kBpwqOtH/kGVDIJ9JuiDpkaSvmQEby4bLUvjljIKSoTtOq5fuh9RiZqVNuptorwmQv+XeAFuBNPXLiS9l+4k0nS4NVQS2AHfF3hggz5f6ADR8AGqlpZ/Ph7lOnQuGB7NOcUu/YREYZt60iB1TUyEjw8lVlMq97gjonOi2XgiKATKh0m45Vc0yetspBTCEE47XcheI+2qUiwbANd6NSfGibQOTCAxxhbJt/HC10p3epkiqBqt94VnZXg3tYfGUXKfsdO25D2CApdSBRq0dEA4EjbG/6yzzAIbBMFlablDAwk3fzmApcbBrp0t5Kb3tIxTz3wr+A84tyfE2Wc4aAAAAAElFTkSuQmCC);
  --border-color: #E8E9ED;
}
.particle-connect-ui-theme-dark {
  --bg-color: #1a1b20;
  --font-color1: #ffffff;
  --font-color2: rgba(255, 255, 255, 0.6);
  --font-color3: #ffffff;
  --scoll-bar-color: rgba(255, 255, 255, 0.7);
  --border-color: #1a1b20;
  --hover-color: rgba(255, 255, 255, 0.3);
  --hover-color2: rgba(255, 255, 255, 0.3);
  --active-bg-color: rgba(255, 255, 255, 1);
  --active-font-color: rgba(0, 0, 0, 1);
  --close-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAABDdJREFUaEPdmlluFDEQhv9i3xGb2Hce4ALcgwMgLgDvwAEQ73ABxDvcgwvwhJIQAgnZCCGZZMKk0D+yo56Ou9vutofulDSakdquqa+9VNlVggSiqocAHAdwEMABAPvNh78pfwEMMt9bAP6ICL+jisTSZqBOAjgB4HBNvRsEBbAaC7YxoKoS6FwDqKJ3QdglESFwbakNqKpHAVwAcKT2v/t1JOiCiKz7NR9tFQyoqpx+BDtW5w8b9FkzoJshOoIAVfWsmY5B/UIMqmirABZFZMlXp5ehqsp2FwGc8lWcuN1vAHMiQuBSqQRUVW7tV8aw1qpszT/n2vwuInQ5hVIKqKrcQAhn/VeoEanbE25GRArXZSGgmZbXWzhyrpGcLpquZYCXAdBxd0EYGPxwGeoEVNUzxhV0Ac7aOC8iy3mDdwGakOsmgMoNqGX03FGnRKSftcsFeNUEyi2z38ucNRGZKQQ0cSV3zS7Lt2xYtzOCZte8ZY44XQbcFJEpC5AF7OLGUjQQP0XkFx8OAVWVB9LbAPZ1eegytvMwPSkiAwvIk8G1PQJnMej8exaQxx9O0SbCoOA1gM8A3tZU9AzAfQDPeaqvqcN242F5wQJyc+E9ShN5CeCJUfABwItAZXw5j0yfdwBeBfbPN++LyKQYx07ApvIQwPuMkhDILBxVPAbwqalBw3UYOSzjCNBYKz6QeThOz48R4KhinoCxg+oQyJRwBFwlYIrQzAcyNRwB1wjIwLruPWbZTCqDHAccbesR8E7CE7sLkju33S1pRMw1l3/hWwS8lziCyUNmjUgJx//ZJuBdkzeItHE51bggU8PRkAEBYzj5qpeTX3Ns7+NCqvRWPe8TkDFoyltqF1yIn6yCKHu+nsIPZv/QtVvyeWgwUBdy6AdjBNouA8pcgY+frAuV7bdMQF7HX4qhLaPDx8+NA3KWgLy15mE31i2aD5x9Fykhecs2YY9LsaKZELjUkD0RmbaA5wEwNdZE8qMR4uea9C2ymWm2RQvIJMuNJnQAeBp/anSEwLlGkjcCbxra81VENrK3ajEiGp7oeWVR97DKQ/MDADzRN5GBiHyhgr16bbiTp8hf/HI3bWsu0HdEmTOcsOm0EdegqqdNqtpXWRvbMbW9Yg1zJV84iqxQ6qKMXNuPrEFLo6q83+Q9TReFOfuRwqGiBCgrKjhduyQrIjKXN7gshZ3iMirVC9uVFyxcg5mpykQMixBSXEjFBGWFBfMQ2y6lVWUkdBmEbOumw/JLwhXWylSeIFpcCNQzhUBMlRVKJSB7trCUi5mn2SilXNlX05JiPIZhw+ytj3iNYA6Smw6PVyxZHqekL6fMgfImjqB7qyA2P2Qm8mF2ODbo/y1pdoDSpXBUOXX5zcKGEOFuyLJlTkU67tLd0Vdx8Br0VWxKMZkWpw/lx/6mCvovflh2Nfzm6dtXd0i7f4OccmrSCbV4AAAAAElFTkSuQmCC);
  --more-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAOCAYAAADE84fzAAAAAXNSR0IArs4c6QAAALZJREFUOE+l1MsNwjAQRdH7KkFINEAHbKgDpQFELzRg2sgGSqAAehnkyKAQ/Jkk3tmanGdNbAvAzA7ARtItztcMM7sAT0kPJfiewCCpW4qbWQBO6fvtFI/riwImcHT2Sm0ZJ84OyMCdpDDgawJKcDS/+JKAGvyHzwlowVncE+CBi3gtwAtX8ULAC9iN7sFwKkr34ueH5ooyO/2UVeHmzivHtAm78dSiHjgCV0lnzxPRbIsHKdW8AZKJbFk8CuGzAAAAAElFTkSuQmCC);
  --more-icon-fff: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAOCAYAAADE84fzAAAAAXNSR0IArs4c6QAAALZJREFUOE+l1MsNwjAQRdH7KkFINEAHbKgDpQFELzRg2sgGSqAAehnkyKAQ/Jkk3tmanGdNbAvAzA7ARtItztcMM7sAT0kPJfiewCCpW4qbWQBO6fvtFI/riwImcHT2Sm0ZJ84OyMCdpDDgawJKcDS/+JKAGvyHzwlowVncE+CBi3gtwAtX8ULAC9iN7sFwKkr34ueH5ooyO/2UVeHmzivHtAm78dSiHjgCV0lnzxPRbIsHKdW8AZKJbFk8CuGzAAAAAElFTkSuQmCC);
  --back-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAABEJJREFUaEPdm0lv1TAQx//Dvu87iH2HCx8AAQe+BCckTix3BOLAFSEWcefGtwHBiUJpWYootKWlLGXpOuj/5FR5afLivOdJAiNFrRTH9s9je8bjeQIDUdWlAFYAWAJgEYCFAOYBmO+amwYwA2ASwLh7xkTkd+juSKgKVXUlgDUA+HdBm/VOAfgBYFRExtqso+mzjgBVlRrZBGBtB1BZHIQdBTAkItR4W9IWoKpyum0GsN5NvbYa9/yIcCMOlNO6kBQGdFNxh1tXhRrrsDDX6wcR4RT2Fm9AVWXZrU5r3t9598SvoAIYBjAgIvw/V7w6qqrcBXcD4O5YB+Fu+05EqNWWkguoqtzm97rtPq++Mt9PAHgjIvybKS0BHdy+Ctab70BRg72tNJkJqKq0ZYRb7NtaReXoKBAy1ZSkAroNhXDLKup00WZ/AXidtvFkAW4DsKFoKxWX/ywin5J9mAOoqvQh9wDI3YAqBko2T7PxNuniNUG4qXnwH1h3WWPL9fgqPlWTgPQrt9RMM0W7QydgKPpoFtA5zodjR5qiFdelPHfTl9GuGgek88ynDOEp5AaAEwCuA+gK3OisFuOARw2OPGn9JtwtAGfdy0cAbgcG5FHrBddiA1BVVzlfM3A7c6pLwtF+XTDQIBumr/o9AtwFYLUxXRrcJQDPjNr9JiJ9EeAx482lbDiO2bSIPBdVpTu232gUWW0VcBFOLwHpktE1s5Aq4cjzkYAMP6wzoKsajkhfCMhTw/LAgHWAI9IYAem98NQeSuoCR55xAh4JeGJn7IZG+4wbLdo5S1OQp5RJAh4PGNu8CuCca5WBoYuGdi4Pju9nLAH/ALgC4LFPT4zKNABD+qCM49wHcDKmRUI+MQLIq3bKYpMh5B0Ap2sAOWFlJgh5F8CpiiF/Whr6OkA2DL2lq1Y1ZMNVs3a20yBpG5/m7RAB3veWdVxKQtIBuGwMOSUiXRHgTnf9HGDQMqtImhBryK8i8r7skAVduXsxO0nI8wC6DUa2KWRBUPqk7SYPFOlfEvIhgAdFKvAo2xx04geqWmbYkJDXABwCcBNAj0enixQZFJFBfpAM/FKLTDD4l4WJCgwZNq7TkqH7MrVoNYiz2ksDJDCnTcgDsBVIWr28zu7OvHxxa7GsILAFeGPnjFecdQG63aWLWHTCqs4REelPVt7qCvuAS6az6lDIenm47vG+wnZTta7pI8mB4brj/Xxqzsz/kEZCuMxcmdx7eJflxDt75n7WSTgteSffMtspF9BNV8Y6eQPFBIU6CHNJ+3zSLL0AIyJV5f39xgozMJhJwXSRAd9RLgTotMkDMs1I2Yl5jLP2iwhPIN5SGDCmTYY6mJVhfQLhyYBZv0yjLCxtAzpt0jEnKJ/QoAQj1LCIFM70jUaiI8D4cLpMYF6D09VrF5ZQdLV4Gq8+KT1rvsR+VsBMRT6tflZAG8Yt3+RnBX8BGG560bLz030AAAAASUVORK5CYII=);
}

/* src/styles/flex.css */
.particle-connect-ui .flex {
  display: flex;
}
.particle-connect-ui .flex-column {
  display: flex;
  flex-direction: column;
}
.particle-connect-ui .flex-wrap {
  flex-wrap: wrap;
}
.particle-connect-ui .start-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.particle-connect-ui .start-center {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.particle-connect-ui .start-end {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.particle-connect-ui .center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.particle-connect-ui .center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.particle-connect-ui .center-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.particle-connect-ui .center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.particle-connect-ui .flex1 {
  flex: 1;
}
.particle-connect-ui .hover:hover {
  cursor: pointer;
  opacity: 0.8;
}

/* src/styles/font/index.css */
@font-face {
  font-family: "Apercu Pro-Light";
  font-style: normal;
  src: url(./Alliance-No-1-Regular-WZT7KIBP.woff2) format("woff2"), url(./Alliance-No-1-Regular-LGX6HLOQ.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro-Mono";
  font-style: normal;
  src: url(./Alliance-No-1-Medium-3ITNO56N.woff2) format("woff2"), url(./Alliance-No-1-Medium-TISC4WT5.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro";
  font-style: normal;
  src: url(./Alliance-No-1-SemiBold-2WWQPZHS.woff2) format("woff2"), url(./Alliance-No-1-SemiBold-2D6PRMDQ.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro-Medium";
  font-style: normal;
  src: url(./Alliance-No-1-Bold-H6IRQAM5.woff2) format("woff2"), url(./Alliance-No-1-Bold-ABEQRDSS.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro-Bold";
  font-style: normal;
  src: url(./Alliance-No-2-Bold-JEEK6NA5.woff2) format("woff2"), url(./Alliance-No-2-Bold-RX4FAILL.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro-Black";
  font-style: normal;
  src: url(./Alliance-No-2-ExtraBold-XGXNYWG2.woff2) format("woff2"), url(./Alliance-No-2-ExtraBold-VY6OMXVX.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro";
  font-style: normal;
  font-weight: 200;
  src: url(./Alliance-No-1-Regular-WZT7KIBP.woff2) format("woff2"), url(./Alliance-No-1-Regular-LGX6HLOQ.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro";
  font-style: italic;
  font-weight: 400;
  src: url(./Alliance-No-1-Medium-3ITNO56N.woff2) format("woff2"), url(./Alliance-No-1-Medium-TISC4WT5.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro";
  font-style: normal;
  font-weight: 450;
  src: url(./Alliance-No-1-Medium-3ITNO56N.woff2) format("woff2"), url(./Alliance-No-1-Medium-TISC4WT5.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro";
  font-style: normal;
  font-weight: 500;
  src: url(./Alliance-No-1-SemiBold-2WWQPZHS.woff2) format("woff2"), url(./Alliance-No-1-SemiBold-2D6PRMDQ.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro";
  font-style: normal;
  font-weight: 600;
  src: url(./Alliance-No-2-Bold-JEEK6NA5.woff2) format("woff2"), url(./Alliance-No-2-Bold-RX4FAILL.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Apercu Pro";
  font-style: normal;
  font-weight: 800;
  src: url(./Alliance-No-2-ExtraBold-XGXNYWG2.woff2) format("woff2"), url(./Alliance-No-2-ExtraBold-VY6OMXVX.ttf) format("truetype");
  font-display: swap;
}
.particle-connect-ui .connect-body {
  font-family: "Apercu Pro";
}

/* src/styles/index.css */

/* src/components/ChainModal/index.css */
.particle-chain-modal-container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.39);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1998;
  visibility: hidden;
  color: var(--font-color1);
}
.particle-chain-modal-container.show {
  visibility: initial;
}
@keyframes model-box-show {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1 !important;
  }
}
.particle-chain-modal-box {
  max-width: 100%;
  width: 350px;
  min-height: 100px;
  border: 1px solid var(--bg-color);
  background-color: var(--bg-color);
  border-radius: 21px;
  opacity: 0;
  transform: translateY(100px);
  visibility: hidden;
  overflow: hidden;
  padding: 16px;
  box-sizing: border-box;
}
.particle-chain-modal-box.show {
  visibility: initial;
  animation: model-box-show .18s ease forwards;
  opacity: 1;
}
.particle-chain-modal-title {
  font-size: 18px;
  height: 60px;
  line-height: 60px;
  font-weight: 800;
  color: var(--font-color1);
  margin-left: 6px;
  width: 100%;
}
.particle-chain-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  background-image: var(--close-icon);
  background-size: cover;
  z-index: 9;
  transition: all 0.1s;
}
.particle-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--font-color1);
  width: 100%;
  margin-bottom: 10px;
}
.particle-chain-list-box {
  width: 100%;
  max-height: 65vh;
  overflow-y: auto;
}
.particle-not-tips {
  padding: 0 10px 0 0;
  box-sizing: border-box;
  margin-top: 15px;
  color: var(--font-color2);
  font-size: 14px;
}
.particle-chain-list-item {
  height: 40px;
  width: 100%;
  border-radius: 12px;
  padding: 7px;
  box-sizing: border-box;
  font-weight: 700;
  color: var(--font-color1);
  margin-top: 4px;
  cursor: default;
}
.particle-disconnect-btn {
  color: #FF494A;
  height: 40px;
  width: 100%;
  border-radius: 12px;
  box-sizing: border-box;
  font-weight: 700;
  margin-top: 10px;
  cursor: default;
}
.particle-chain-list-item.item-hover:hover,
.particle-disconnect-btn:hover {
  background-color: var(--hover-color);
  cursor: pointer;
  transition: all 0.3s;
}
.particle-chain-list-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 10px;
}
.particle-chain-list-item.active {
  background-color: var(--active-bg-color) !important;
  color: var(--active-font-color) !important;
}
.particle-chain-active-connected {
  color: var(--active-font-color);
  font-size: 14px;
}
.particle-chain-active-confirm {
  font-weight: 400;
  font-size: 12px;
}
.particle-chain-active-confirm span {
  background-color: #FFD641;
  display: flex;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
}
.particle-chain-active-connected {
  display: none;
  font-weight: 400;
  font-size: 12px;
}
.particle-chain-list-item.active .particle-chain-active-connected {
  display: flex;
}
.particle-chain-active-connected span {
  display: flex;
  width: 8px;
  height: 8px;
  background-color: #30E000;
  margin-left: 6px;
  border-radius: 50%;
}

/* src/components/ConnectForm/index.css */
.particle-connect-form-contaier {
  width: 100%;
  height: 100%;
  position: relative;
}
.particle-form-footer {
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  color: var(--font-color1);
}
.particle-qrcode {
  width: 380px;
  height: 380px;
  box-sizing: border-box;
  border: 1px solid #E9EAEB;
  border-radius: 10px;
  margin-top: 30px;
  margin-bottom: 5px;
  background-color: #fff;
}
.particle-copy-uri {
  color: var(--font-color2);
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  margin-bottom: 10px;
  width: 100%;
}
.particle-qrcode img {
  width: 100%;
  height: 100%;
}
.particle-loading > img {
  width: 68px;
  height: 68px;
  border-radius: 10px;
}
.particle-loading h3 {
  font-size: 18px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 800;
  margin-top: 10px;
  line-height: 30px;
  color: var(--font-color1);
}
.particle-loading p {
  font-size: 14px;
  font-weight: 500;
  line-height: 12px;
  color: var(--font-color2);
  text-align: center;
  margin: 0;
}
@keyframes loading-inner {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.particle-loading-img {
  width: 30px;
  height: 30px;
  margin-top: 20px;
  animation: loading-inner 1.5s linear infinite;
}
.particle-open-qrcode {
  width: 53px;
  height: 28px;
  background-color: rgba(0, 0, 0, 0.06);
  font-size: 12px;
  text-align: center;
  border-radius: 20px 20px 20px 20px;
  line-height: 28px;
  margin-left: 30px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #000;
  font-weight: 800;
}
.particle-tips {
  margin-top: 10px;
  font-size: 12px;
  color: var(--font-color2);
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* src/components/ConnectModal/index.css */
.particle-connect-modal-container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.39);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1998;
  visibility: hidden;
  overflow: hidden;
}
.particle-connect-modal-container.show {
  visibility: initial;
}
@keyframes model-box-show {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
.particle-connect-modal-box {
  width: 748px;
  max-width: 95vw;
  height: 526px;
  border: 1px solid var(--bg-color);
  background-color: var(--bg-color);
  border-radius: 20px;
  transform: translateY(200px);
  visibility: hidden;
  position: fixed;
  top: calc(50vh - 263px);
  left: calc(50vw - 374px);
  z-index: 1999;
  overflow: hidden;
}
.particle-connect-modal-box.show {
  visibility: initial;
  animation: model-box-show 0.18s ease forwards;
}
.particle-connect-modal-title {
  font-size: 18px;
  height: 60px;
  line-height: 60px;
  font-weight: 600;
  color: var(--font-color1);
  margin-left: 6px;
  width: 100%;
}
.particle-connect-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  background-image: var(--close-icon);
  background-size: cover;
  z-index: 9;
  transition: all 0.1s;
}
.particle-connect-modal-close:hover {
  transform: scale(1.1);
}
.particle-connect-methods-list {
  height: 100%;
  padding: 0 0px 0 22px;
  box-sizing: border-box;
}
.particle-connect-methods-form {
  width: 446px;
  max-width: 95vw;
  height: 526px;
  border-left: 1px solid #efefef;
}
.particle-connect-modal-group-name {
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 12px;
  color: #868989;
  max-width: 100%;
  overflow-x: hidden;
  margin-left: 6px;
}
.particle-connect-modal-group-item {
  font-size: 17px;
  font-weight: 500;
  line-height: 12px;
  color: var(--font-color1);
  width: 260px;
  height: 41px;
  overflow: hidden;
  transition: all 0.3s;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 4px;
}
.particle-connect-modal-group-item img {
  width: 30px;
  height: 30px;
}
.particle-group-icon-box {
  height: 30px;
  width: 30px;
  margin-left: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 13px;
  margin-left: 6px;
  overflow: hidden;
  border-radius: 5px;
}
.particle-connect-modal-group-item.active {
  background-color: var(--active-bg-color);
  color: var(--active-font-color) !important;
  transform: scale(1) !important;
}
.particle-item-hover1:active {
  transform: scale(0.95);
}
.particle-item-hover1:hover {
  background-color: var(--hover-color);
  color: var(--font-color1);
}
.particle-connect-more {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--font-color1);
  width: 100%;
  padding-right: 28px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  cursor: pointer;
}
.particle-connect-more .particle-icon_more {
  width: 11.44px;
  height: 6.75px;
  margin-left: 4px;
  border-radius: 4px;
  transition: all 0.3s;
  background-image: var(--more-icon);
  background-size: cover;
}
.particle-connect-more .particle-icon_more.show {
  transform: rotate(180deg);
}
.particle-connect-modal-gourp-list {
  height: 460px;
  overflow-y: auto;
  padding-bottom: 20px;
  box-sizing: border-box;
}
.particle-connect-modal-gourp-list::-webkit-scrollbar-thumb {
  width: 8px;
  background: var(--scoll-bar-color);
  margin-right: 2px;
  border: none;
  border-radius: 10px;
}
.particle-no-auth-key {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  font-size: 14px;
}
.particle-item-what {
  margin-top: 30px;
  margin-bottom: 28px;
  width: 100%;
}
.particle-no-auth-key h3 {
  font-size: 18px;
  width: 100%;
  margin-top: 0;
  width: 100%;
  font-weight: 600;
  text-align: center;
  color: var(--font-color1);
}
.particle-item-what h5 {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--font-color1);
  max-width: 276px;
  margin: 0;
}
.particle-item-what p {
  font-size: 14px;
  font-weight: 400;
  color: var(--font-color2);
  margin: 0;
  line-height: 22px;
  max-width: 276px;
}
.particle-icon-what {
  width: 48px;
  height: 48px;
  margin-right: 26px;
  user-select: none;
  margin-left: 22px;
  pointer-events: none;
}
.particle-icon-back {
  display: none;
}
@media screen and (max-width: 768px) {
  .particle-connect-modal-box {
    width: 350px;
    left: calc(50vw - 175px);
  }
  .particle-connect-methods-list.hide {
    display: none;
  }
  .particle-connect-modal-title {
    text-align: center;
    padding-right: 22px;
    box-sizing: border-box;
  }
  .particle-connect-modal-group-item {
  }
  .particle-connect-methods-form {
    display: none;
    max-width: 100%;
    box-sizing: border-box;
    border: none;
  }
  .particle-connect-methods-form.show {
    display: block;
    position: relative;
  }
  .particle-icon-back {
    display: block;
    position: absolute;
    left: 15px;
    top: 15px;
    cursor: pointer;
    z-index: 9;
    background-image: var(--back-icon);
    width: 28px;
    height: 28px;
    background-size: 100% 100%;
  }
  .particle-qrcode {
    max-width: 320px;
    max-height: 320px;
    padding: 10px;
  }
}
.-cbwsdk-css-reset {
  display: none;
}

/* src/components/AccountModal/index.css */
.particle-account-modal-container {
  z-index: 1998;
  visibility: hidden;
  border-radius: 0;
  overflow: hidden;
  position: absolute;
  right: -20px;
  top: 60px;
  width: 100vw;
  height: 100vh;
}
@media screen and (max-width:600px) {
  .particle-account-modal-container {
    z-index: 1998;
    visibility: hidden;
    border-radius: 0;
    overflow: hidden;
    position: initial !important;
    left: 0 !important;
    top: 0 !important;
    width: auto;
    height: auto;
    background-color: rgba(0, 0, 0, 0.39);
  }
  .particle-account-modal-box {
    position: absolute !important;
    right: 0;
    top: 60px;
  }
}
.particle-account-modal-container.show {
  visibility: initial;
}
@keyframes model-box-show {
  0% {
    transform: translateY(-20px);
    opacity: 0;
    height: auto;
  }
  100% {
    transform: translateY(0px);
    opacity: 1 !important;
    min-height: 100px;
    height: auto;
  }
}
.particle-account-modal-box {
  position: absolute;
  max-width: 100vw;
  width: 280px;
  height: 0;
  z-index: 1999;
  padding: 18px 22px;
  border: 1px solid var(--bg-color);
  background-color: var(--bg-color);
  border-radius: 18px;
  opacity: 0;
  transform: translateY(-20px);
  visibility: hidden;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0px 3px 6px rgba(137, 146, 175, 0.16);
}
.particle-account-modal-box.topLeft {
  left: 0;
  bottom: 60px;
}
.particle-account-modal-box.topRight {
  right: 0;
  bottom: 60px;
}
.particle-account-modal-box.bottomLeft {
  left: 0;
  top: 60px;
}
.particle-account-modal-box.bottomRight {
  right: 0;
  top: 60px;
}
.particle-account-modal-box.show {
  visibility: initial;
  animation: model-box-show .18s ease forwards;
}
.particle-account-modal-title {
  font-size: 18px;
  height: 60px;
  line-height: 60px;
  font-weight: 800;
  color: var(--font-color1);
  margin-left: 6px;
  width: 100%;
}
.particle-account-modal-close {
  font-size: 14px;
  position: absolute;
  right: 24px;
  top: 24px;
  cursor: pointer;
  background-size: cover;
  z-index: 9;
  transition: all 0.1s;
  color: var(--font-color1);
}
.particle-account-header {
  display: flex;
  align-items: center;
  padding: 0 0 16px 0;
  box-sizing: content-box;
  border-bottom: 1px solid #DCDFE6;
  width: 100%;
  margin-bottom: 17px;
}
.particle-avatar {
  height: 33px;
  width: 33px;
  margin-right: 0;
  border-radius: 50%;
  overflow: hidden;
}
.particle-account-address {
  margin-left: 7px;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  color: var(--font-color3);
  font-family: Apercu Pro;
  user-select: none;
}
.particle-account-info span {
  user-select: none;
}
.particle-logout:hover {
  transform: scale(1.02);
}
.particle-logout:active {
  opacity: 0.8;
}
.particle-icon-copy {
  width: 18px;
  height: 18px;
  margin-left: 10px;
  cursor: pointer;
}
.particle-link-item {
  width: 100%;
  height: 40px;
  opacity: 1;
  border-radius: 6px;
  transition: all 0.3s;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  color: var(--font-color1);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  font-family: Apercu Pro !important;
}
.particle-link-item .icon {
  font-size: 20px;
  font-weight: 600;
  margin-right: 15px;
  color: var(--font-color1);
}
.particle-link-item.red,
.particle-link-item.red .icon {
  color: #F92531 !important;
}
.particle-link-item.red:hover {
  background: rgba(249, 37, 49, 0.1) !important;
}
.particle-link-item:hover {
  background: var(--hover-color2);
}

/* src/components/ConnectButton/index.css */
.particle-user-bar-container {
  display: inline-flex;
}
.particle-connect-wallet-btn {
  display: inline-flex;
  background-color: #0e76fd;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  transition: all .125s ease;
  cursor: pointer;
  user-select: none;
  text-align: center;
  justify-content: center;
  align-items: center;
  max-width: 147px;
  height: 100%;
  text-align: center;
  word-break: keep-all;
}
.particle-connect-wallet-btn:hover {
  transform: scale(1.01);
}
.particle-connect-wallet-btn:active {
  opacity: 0.8;
}
.particle-account-info {
  display: inline-flex;
  overflow: hidden;
  background-color: var(--bg-color);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 400;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: nowrap;
  cursor: pointer;
  transition: all 0.14s;
  color: var(--font-color1);
  position: relative;
}
.particle-unsupported-chain-button {
  display: inline-flex;
  overflow: hidden;
  background-color: #FF494A;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 400;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: nowrap;
  cursor: pointer;
  transition: all 0.14s;
  color: #fff;
}
.particle-account-info.particle-chain {
  margin-right: 8px;
}
.particle-account-info:hover,
.unsupported-chain-button:hover {
  transform: scale(1.01);
}
.particle-avatar-img {
  border-radius: 3px;
  margin-right: 10px;
  overflow: hidden;
  background-color: var(--bg-color);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-size: 100% auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.particle-chain-icon {
  width: 100%;
  height: 100%;
}
.particle-account-info span,
.unsupported-chain-button span {
  margin-right: 4px;
}
.particle-icon-more {
  width: 11.44px;
  height: 6.75px;
  background-image: var(--more-icon);
  background-size: cover;
}
.particle-unsupported-chain-button .icon-more {
  background-image: var(--more-icon-fff);
}
.particle-unsupported-tips {
  color: var(--font-color2);
  font-size: 14px;
  margin: 20px 0 10px;
  font-weight: 500;
}
@media screen and (max-width:500px) {
  .particle-account-info span {
    display: none;
  }
}
.particle-account-info-fixed {
  position: relative;
  width: auto;
  height: auto;
}
.custom-btn-box.account-show {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
}
.custom-btn-box .particle-account-modal-container,
.custom-btn-box .particle-account-modal-box {
  display: none !important;
}
.custom-btn-box.account-show .particle-account-modal-container,
.custom-btn-box.account-show .particle-account-modal-box {
  display: flex !important;
  position: fixed !important;
}
.custom-btn-box.account-show .particle-account-modal-container {
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.custom-btn-box.account-show .particle-account-modal-box {
  right: calc(50vw - 140px) !important;
  top: calc(50vh - 200px) !important;
  opacity: 1 !important;
}
.particle-user-bar-container .particle-account-modal-container,
.particle-user-bar-container .particle-account-modal-box {
  display: none !important;
}
.particle-user-bar-container.is-ui-button .particle-account-modal-container,
.particle-user-bar-container.is-ui-button .particle-account-modal-box {
  display: block !important;
  opacity: 1 !important;
}
/*# sourceMappingURL=index.css.map */