@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
.sidebar[data-v-4291a596] {
	width: var(--sidebar-width);
	height: 100vh;
	background: #1b1d1c;
	position: fixed;
	z-index: 999;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.sidebar ul[data-v-4291a596] {
	margin-top: 20px;
	width: 100%;
}
.sidebar ul li[data-v-4291a596] {
	height: 24px;
	width: 100%;
	list-style: none;
	line-height: 24px;
	width: 140px;
	margin-top: 20px;
	border-radius: 5px;
	position: relative;
}
.sidebar ul li[data-v-4291a596]:before {
	content: "";
	position: absolute;
	width: 0;
	display: block;
	height: 8px;
	background-color: var(--color-primary-light);
	bottom: 0;
	left: 35px;
	transition: width 0.2s linear;
	opacity: 0.7;
}
.sidebar ul li[data-v-4291a596]:hover:before {
	width: 40%;
}
.sidebar ul li a[data-v-4291a596] {
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: 0 0 0 15px;
	border-radius: 10px;
	font-size: 0.9rem;
}
.sidebar ul li a img[data-v-4291a596] {
	height: 18px;
	width: 18px;
}
.sidebar ul li a span[data-v-4291a596] {
	margin-left: 10px;
}
.sidebar ul li.active[data-v-4291a596]:before {
	width: 40%;
}
.sidebar-top[data-v-4291a596] {
	width: 100%;
	padding: 23px 0;
}
.sidebar-top .logo[data-v-4291a596] {
	padding: 0 21px;
}
.sidebar-bottom[data-v-4291a596] {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.connect-wallet-btn[data-v-4291a596] {
	outline: none;
	padding: 8px 12px;
	color: #fff;
	width: 80%;
	border-radius: 10px;
	background-color: transparent;
	border: 1px solid #96cf24;
	cursor: pointer;
	transition: all 0.15s ease;
	font-weight: 700;
	margin-bottom: 20px;
}
.connect-wallet-btn p[data-v-4291a596] {
	font-size: 0.8rem;
}
.connect-wallet-btn[data-v-4291a596]:hover {
	background-color: #96cf24;
}
.connect-wallet-btn:hover p[data-v-4291a596] {
	background: linear-gradient(90deg, #fff 0, #fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.wallet-wrap[data-v-4291a596] {
	position: relative;
	padding: 23px 21px;
}
.wallet[data-v-4291a596] {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	justify-content: center;
	outline: none;
	font-size: 0.8rem;
	border-radius: 6px;
	cursor: pointer;
	color: #9ca3af;
	border: none;
	font-weight: 500;
	padding: 6px 20px;
	background: 0 0;
}
.wallet[data-v-4291a596]:hover {
	background-color: #313131;
}
.wallet img[data-v-4291a596] {
	width: 20px;
	margin-right: 10px;
}
.wallet div[data-v-4291a596] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.wallet .wallet-balance[data-v-4291a596] {
	margin-top: 5px;
	color: #fff;
}
.wallet-detail[data-v-4291a596] {
	position: absolute;
	top: -65px;
	left: 100%;
	display: none;
	background: #1b1d1c;
	width: 0;
	height: 280px;
	border-radius: 0 10px 10px 0;
	padding: 28px 40px;
	opacity: 0;
	transition: width 0.3s linear, opacity 0.1s linear;
}
.wallet-detail .close-wallet-detail[data-v-4291a596] {
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
}
.wallet-detail .copy-address[data-v-4291a596] {
	background: #242424;
	border-radius: 5px;
	padding: 5px 8px;
	font-weight: 500;
	cursor: pointer;
	margin-bottom: 12px;
}
.wallet-detail .copy-address[data-v-4291a596],
.wallet-detail .token-balance[data-v-4291a596] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	opacity: 0.75;
	color: #fff;
}
.wallet-detail .token-balance[data-v-4291a596] {
	margin-top: 8px;
}
.wallet-detail .explorer-link[data-v-4291a596] {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
}
.wallet-detail .explorer-link[data-v-4291a596]:hover {
	text-decoration: underline;
	-webkit-text-decoration-color: #96cf24;
	text-decoration-color: #96cf24;
}
.wallet-detail .disconnect-btn[data-v-4291a596] {
	border-radius: 5px;
	outline: none;
	width: 100%;
	background: 0 0;
	border: 0.5px solid #96cf24;
	cursor: pointer;
	margin-top: 20px;
	height: 35px;
}
.wallet-detail .disconnect-btn[data-v-4291a596]:hover {
	background: linear-gradient(90deg, #5aa62b 0, #96cf24);
}
.wallet-detail .disconnect-btn:hover p[data-v-4291a596] {
	background: linear-gradient(90deg, #fff 0, #fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text-linear[data-v-4291a596] {
	font-weight: 500;
	font-size: 1rem;
	background: linear-gradient(90deg, #5aa62b 0, #96cf24);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.show-wallet-detail[data-v-4291a596] {
	display: flex;
	flex-direction: column;
	align-content: center;
	width: 360px;
	opacity: 1;
	transition: width 0.1s linear, opacity 0.5s ease;
}
.setting[data-v-4291a596] {
	width: 100%;
	padding: 20px;
	border-top: 1px solid hsla(0, 0%, 50.2%, 0.2);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.setting div[data-v-4291a596] {
	width: 100%;
}
.setting .language[data-v-4291a596],
.setting div[data-v-4291a596] {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.setting .language[data-v-4291a596] {
	cursor: pointer;
	color: var(--color-text-default);
}
.setting img[data-v-4291a596] {
	cursor: pointer;
	width: 1.5rem;
	height: 1.5rem;
}
.sidebar__menu-item-list[data-v-4291a596] {
	margin-top: 40px;
}
.sidebar__menu-item[data-v-4291a596] {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.sidebar__menu-item__icon[data-v-4291a596] {
	width: 15px;
	height: 15px;
}
.sidebar__menu-item__label[data-v-4291a596] {
	display: flex;
	cursor: pointer;
	height: 40px;
	width: 100%;
	align-items: center;
	position: relative;
	padding-left: 20px;
	background-image: linear-gradient(60deg, #34401d, #34401d 50%, transparent 0);
	background-size: 220%;
	background-position: 100%;
	transition: all 0.25s ease-out;
}
.sidebar__menu-item__label.active[data-v-4291a596],
.sidebar__menu-item__label[data-v-4291a596]:hover {
	background-position: 0;
}
.sidebar__menu-item__title[data-v-4291a596] {
	color: #fff;
	display: flex;
	font-size: 16px;
	margin-left: 8px;
	position: relative;
	white-space: nowrap;
}
.sidebar__menu-item__title-text[data-v-4291a596] {
	z-index: 1;
}
.sidebar__menu-item__title-selected[data-v-4291a596] {
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 0;
	transform: translateY(-50%);
	background: linear-gradient(90deg, #5aa62b, #96cf24);
	transition: all 0.25s ease-out;
}
.sidebar__menu-item:hover .sidebar__menu-item__title-selected[data-v-4291a596],
.sidebar__menu-item__title-selected.active[data-v-4291a596] {
	height: 100%;
}
.sidebar__menu-item__submenu[data-v-4291a596] {
	display: none;
}
.sidebar__menu-item__submenu.expand[data-v-4291a596] {
	display: block;
}
.sidebar__sub-menu-item[data-v-4291a596] {
	font-size: 16px;
	cursor: pointer;
	padding-left: 40px;
	color: #fff;
	height: 40px;
	display: flex;
	align-items: center;
}
a[data-v-4291a596] {
	color: inherit;
	text-decoration: inherit;
}
.text-center[data-v-4291a596] {
	text-align: center;
}
.hidden[data-v-4291a596] {
	display: none !important;
}
.header[data-v-66c0fab5] {
	display: flex;
	flex-direction: column;
	color: var(--color-text-default);
	background: #1b1d1c;
	padding: 14px 20px;
	transition: all 0.2s linear;
}
.header-top[data-v-66c0fab5] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.dapp-name[data-v-66c0fab5] {
	font-weight: 500;
	font-size: 36px;
	line-height: 43px;
	background: linear-gradient(90deg, #5aa62b 0, #96cf24);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 10px rgba(201, 251, 103, 0.5);
}
.menu-icon[data-v-66c0fab5] {
	opacity: 1;
	cursor: pointer;
}
.menu-icon[data-v-66c0fab5]:hover {
	opacity: 0.8;
}
.header-bot ul[data-v-66c0fab5] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.header-bot ul li[data-v-66c0fab5] {
	height: 24px;
	width: 100%;
	list-style: none;
	line-height: 24px;
	width: 140px;
	margin-top: 20px;
	border-radius: 5px;
	position: relative;
}
.header-bot ul li[data-v-66c0fab5]:before {
	content: "";
	position: absolute;
	width: 0;
	display: block;
	height: 8px;
	background-color: var(--color-primary-light);
	bottom: 0;
	left: 35px;
	transition: width 0.2s linear;
	opacity: 0.7;
}
.header-bot ul li[data-v-66c0fab5]:hover:before {
	width: 40%;
}
.header-bot ul li a[data-v-66c0fab5] {
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: 0 0 0 15px;
	border-radius: 10px;
	font-size: 0.85rem;
}
.header-bot ul li a img[data-v-66c0fab5] {
	height: 18px;
	width: 18px;
}
.header-bot ul li a span[data-v-66c0fab5] {
	margin-left: 10px;
}
.header-bot ul li.active[data-v-66c0fab5]:before {
	width: 40%;
}
.footer[data-v-7ac5e255] {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: var(--color-text-default);
	background: #1b1d1c;
	padding: 10px 20px;
}
.connect-wallet-btn[data-v-7ac5e255] {
	outline: none;
	padding: 8px 12px;
	color: #fff;
	width: 120px;
	border-radius: 10px;
	background-color: transparent;
	border: 1px solid #96cf24;
	cursor: pointer;
	transition: all 0.15s ease;
	font-weight: 700;
}
.connect-wallet-btn p[data-v-7ac5e255] {
	font-size: 0.8rem;
}
.connect-wallet-btn[data-v-7ac5e255]:hover {
	background-color: #96cf24;
}
.connect-wallet-btn:hover p[data-v-7ac5e255] {
	background: linear-gradient(90deg, #fff 0, #fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.wallet-wrap[data-v-7ac5e255] {
	position: relative;
}
.wallet[data-v-7ac5e255] {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	justify-content: center;
	outline: none;
	font-size: 0.8rem;
	border-radius: 6px;
	cursor: pointer;
	color: #9ca3af;
	border: none;
	font-weight: 500;
	padding: 6px 20px;
	background: 0 0;
}
.wallet[data-v-7ac5e255]:hover {
	background-color: #313131;
}
.wallet img[data-v-7ac5e255] {
	width: 20px;
	margin-right: 10px;
}
.wallet div[data-v-7ac5e255] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.wallet .wallet-balance[data-v-7ac5e255] {
	margin-top: 5px;
	color: #fff;
}
.wallet-detail[data-v-7ac5e255] {
	position: absolute;
	top: -230px;
	left: 0;
	display: none;
	background: #1b1d1c;
	width: 100%;
	height: 0;
	border-radius: 0 10px 10px 0;
	padding: 18px 40px;
	opacity: 0;
	transition: height 0.3s ease, opacity 0.1s linear;
}
.wallet-detail .close-wallet-detail[data-v-7ac5e255] {
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
}
.wallet-detail .copy-address[data-v-7ac5e255] {
	background: #242424;
	border-radius: 5px;
	padding: 5px 8px;
	font-weight: 500;
	cursor: pointer;
	margin-bottom: 12px;
}
.wallet-detail .copy-address[data-v-7ac5e255],
.wallet-detail .token-balance[data-v-7ac5e255] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	opacity: 0.75;
	color: #fff;
}
.wallet-detail .token-balance[data-v-7ac5e255] {
	margin-top: 8px;
}
.wallet-detail .explorer-link[data-v-7ac5e255] {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
}
.wallet-detail .explorer-link[data-v-7ac5e255]:hover {
	text-decoration: underline;
	-webkit-text-decoration-color: #96cf24;
	text-decoration-color: #96cf24;
}
.wallet-detail .disconnect-btn[data-v-7ac5e255] {
	border-radius: 5px;
	outline: none;
	width: 100%;
	background: 0 0;
	border: 0.5px solid #96cf24;
	cursor: pointer;
	margin-top: 20px;
	height: 35px;
}
.wallet-detail .disconnect-btn[data-v-7ac5e255]:hover {
	background: linear-gradient(90deg, #5aa62b 0, #96cf24);
}
.wallet-detail .disconnect-btn:hover p[data-v-7ac5e255] {
	background: linear-gradient(90deg, #fff 0, #fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.language-setting[data-v-7ac5e255] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.menu-icon[data-v-7ac5e255] {
	cursor: pointer;
}
.menu-icon[data-v-7ac5e255]:hover {
	opacity: 0.7;
}
.show-wallet-detail[data-v-7ac5e255] {
	display: flex;
	flex-direction: column;
	align-content: center;
	height: auto;
	opacity: 1;
	transition: height 0.1s ease, opacity 0.5s ease;
}
.modal-mask[data-v-6f4c4a24] {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s ease;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-container[data-v-6f4c4a24] {
	width: 360px;
	margin: 0 auto;
	background-color: var(--color-modal-bg);
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
	transition: all 0.3s ease;
}
@media (max-width: 360px) {
	.modal-container[data-v-6f4c4a24] {
		width: 100%;
	}
}
.modal-body[data-v-6f4c4a24] {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem;
}
.injected-wallet[data-v-6f4c4a24] {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	background: 0 0;
	border: 1px solid hsla(0, 0%, 76.5%, 0.62);
	padding: 20px;
	width: 100%;
	border-radius: 16px;
	cursor: pointer;
	color: var(--color-text-secondary);
}
.injected-wallet[data-v-6f4c4a24]:hover {
	background: #0ab80a;
	color: #fff;
}
.injected-wallet .injected-wallet-icon[data-v-6f4c4a24] {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.injected-wallet .injected-wallet-icon img[data-v-6f4c4a24] {
	width: 40px;
	height: 40px;
}
.injected-wallet .injected-wallet-text[data-v-6f4c4a24] {
	font-size: 1.375rem;
	font-weight: 700;
	margin-top: 10px;
}
.other-wallet[data-v-6f4c4a24] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 10px;
}
.other-wallet .wallet[data-v-6f4c4a24] {
	border: 1px solid grey;
	border-radius: 12px;
	padding: 10px 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: calc(50% - 5px);
	color: var(--color-text-secondary);
	font-size: 0.7rem;
	font-weight: 700;
	cursor: pointer;
}
.other-wallet .wallet[data-v-6f4c4a24]:hover {
	background: #0ab80a;
	color: #fff;
}
.other-wallet .wallet img[data-v-6f4c4a24] {
	width: 30px;
	height: 30px;
}
.modal-enter[data-v-6f4c4a24],
.modal-leave-active[data-v-6f4c4a24] {
	opacity: 0;
}
.modal-enter .modal-container[data-v-6f4c4a24],
.modal-leave-active .modal-container[data-v-6f4c4a24] {
	transform: scale(1.1);
}
.fade-enter-active[data-v-646dcc41],
.fade-leave-active[data-v-646dcc41] {
	transition: opacity 0.5s;
}
.fade-enter[data-v-646dcc41],
.fade-leave-to[data-v-646dcc41] {
	opacity: 0;
	transition: opacity 0.5s;
}
.modal-mask[data-v-646dcc41] {
	position: fixed;
	z-index: 9998;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: table;
	transition: opacity 0.3s ease;
}
.modal-wrapper[data-v-646dcc41] {
	display: table-cell;
	vertical-align: middle;
}
.modal-container[data-v-646dcc41] {
	width: 400px;
	margin: 0 auto;
	background-color: var(--color-modal-bg);
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
	transition: all 0.3s ease;
	padding-bottom: 0.5rem;
}
@media (max-width: 400px) {
	.modal-container[data-v-646dcc41] {
		width: 97%;
	}
}
.modal-header[data-v-646dcc41] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding: 1rem 1rem 0.5rem;
	color: var(--color-text-default);
	font-weight: 500;
	font-size: 1.25rem;
	background: var(--color-modal-header-bg);
}
.modal-header svg[data-v-646dcc41] {
	stroke: var(--color-text-default);
	transition: all 0.3s ease;
	cursor: pointer;
}
.modal-header svg[data-v-646dcc41]:hover {
	stroke: var(--color-text-secondary);
}
.modal-body[data-v-646dcc41] {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 1rem 1.5rem;
}
.setting-section[data-v-646dcc41] {
	color: #9a6aff;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	margin-bottom: 24px;
	font-size: 0.6rem;
}
.setting-label[data-v-646dcc41] {
	color: var(--color-text-default);
	font-size: 0.85rem;
}
.setting-gas[data-v-646dcc41] {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 15px;
	flex-wrap: wrap;
}
.setting-gas button[data-v-646dcc41] {
	width: 33%;
	min-width: 110px;
}
button.btn-setting[data-v-646dcc41] {
	outline: none;
	border: none;
	cursor: pointer;
	height: 32px;
	padding: 0 16px;
	background-color: var(--color-btn-setting-bg);
	box-shadow: none;
	color: var(--color-primary-light);
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: 16px;
	font-size: 0.7rem;
	transition: background-color 0.2s ease 0s, opacity 0.2s ease 0s;
}
button.btn-setting[data-v-646dcc41]:hover {
	background-color: var(--color-btn-setting-bg-hover);
}
button.active[data-v-646dcc41] {
	color: #fff;
}
button.active[data-v-646dcc41],
button.active[data-v-646dcc41]:hover {
	background-color: var(--color-primary-light);
}
.divider[data-v-646dcc41] {
	width: 100%;
	height: 0.5px;
	background: rgba(66, 66, 66, 0.2);
	margin: 25px 0;
}
.setting-slippage[data-v-646dcc41] {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin-top: 20px;
	flex-wrap: wrap;
	color: var(--color-primary-light);
}
.setting-slippage button[data-v-646dcc41] {
	margin-right: 5px;
}
.setting-slippage input[data-v-646dcc41] {
	width: 80px;
	background-color: var(--color-input-bg);
	border-radius: 16px;
	color: var(--color-primary-light);
	display: block;
	font-size: 16px;
	height: 32px;
	outline: none;
	padding: 0 16px;
	border: 1px solid var(--color-input-bg);
}
.setting-slippage input[data-v-646dcc41]:focus {
	outline: 2px solid #b667e4;
}
.setting-slippage input.active[data-v-646dcc41] {
	border: none;
	outline: 2px solid #95e467;
}
.setting-slippage input.active[data-v-646dcc41]:focus {
	outline: 2px solid #b667e4;
}
.warning[data-v-646dcc41] {
	margin-top: 20px;
	color: #f3841e;
	font-weight: 400;
	line-height: 1.5;
	font-size: 0.75rem;
}
.modal-footer[data-v-646dcc41] {
	border-top: 1px solid #34363a;
	padding: 1rem 1.5rem;
	border-radius: 0 0 20px 20px;
}
.custom-template {
	margin: 100px 5px 5px;
	background: var(--color-notification-bg);
	display: flex;
	flex-direction: column;
	text-align: left;
	font-size: 0.8rem;
	align-items: center;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 35px;
	padding-right: 35px;
	border-radius: 12px;
	position: relative;
	color: var(--color-text-default);
}
.custom-template .custom-template-icon {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 24px;
	height: 24px;
}
.custom-template .custom-template-close {
	position: absolute;
	padding: 0 20px;
	font-size: 1rem;
	opacity: 0.2;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}
.custom-template .custom-template-close svg {
	stroke: var(--color-text-default);
}
.custom-template .custom-template-close:hover {
	opacity: 0.8;
}
.custom-template .custom-template-content {
	padding: 5px;
	flex: 1 0 auto;
}
.custom-template .custom-template-content .custom-template-title {
	letter-spacing: 1px;
	font-size: 1rem;
	font-weight: 500;
}
.custom-template .custom-template-content .custom-template-text {
	margin-top: 20px;
}
.custom-template .custom-template-content .custom-template-text a {
	font-size: 1rem;
	font-weight: 500;
	color: #5aa62b;
	cursor: pointer;
}
.custom-template .custom-template-content .custom-template-text a:hover {
	text-decoration: underline;
}
.v-fade-left-enter-active,
.v-fade-left-leave-active,
.v-fade-left-move {
	transition: all 0.5s;
}
.v-fade-left-enter,
.v-fade-left-leave-to {
	opacity: 0;
	transform: translateX(500px) scale(0.2);
}
.modal-mask[data-v-8d610c78] {
	position: fixed;
	z-index: 9998;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: table;
	transition: opacity 0.3s ease;
}
.modal-wrapper[data-v-8d610c78] {
	display: table-cell;
	vertical-align: middle;
}
.modal-container[data-v-8d610c78] {
	width: 500px;
	margin: 0 auto;
	background-color: var(--color-modal-bg);
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
	transition: all 0.3s ease;
	padding-bottom: 2rem;
}
@media (max-width: 500px) {
	.modal-container[data-v-8d610c78] {
		width: 100%;
	}
}
.modal-header[data-v-8d610c78] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding: 1rem 1rem 0.5rem;
	color: var(--color-text-default);
}
.modal-header svg[data-v-8d610c78] {
	stroke: var(--color-text-default);
	transition: all 0.3s ease;
	cursor: pointer;
}
.modal-header svg[data-v-8d610c78]:hover {
	stroke: var(--color-text-secondary);
}
.modal-body[data-v-8d610c78] {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 2rem;
	height: 100%;
	flex-wrap: wrap;
}
.modal-body .network[data-v-8d610c78] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 35px;
	border-radius: 5px;
	cursor: pointer;
}
.modal-body .network img[data-v-8d610c78] {
	width: 46px;
	height: 46px;
}
.modal-body .network span[data-v-8d610c78] {
	margin-top: 10px;
	color: var(--color-text-secondary);
}
.modal-body .active[data-v-8d610c78] {
	border: 2px solid var(--color-border-active-chain);
	background: var(--color-bg-active-chain);
}
.loading[data-v-8d610c78] {
	display: flex;
	align-items: center;
	width: 100%;
	outline: none;
	border: none;
	border: 1px solid #40444f;
	border-radius: 12px;
	background-color: #2c2f36;
	transition: all 0.1s ease;
	padding: 0.5rem 1rem;
	color: #fff;
	font-size: 1rem;
}
.howto[data-v-8d610c78] {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.howto a[data-v-8d610c78] {
	color: #5aa62b;
	text-decoration: none;
}
.modal-default-button[data-v-8d610c78] {
	float: right;
}
.modal-enter[data-v-8d610c78],
.modal-leave-active[data-v-8d610c78] {
	opacity: 0;
}
.modal-enter .modal-container[data-v-8d610c78],
.modal-leave-active .modal-container[data-v-8d610c78] {
	transform: scale(1.1);
}
@font-face {
	font-family: UniviaLight;
	src: url(../fonts/UniviaPro-Light.4b807cb8.otf) format("opentype");
}
@font-face {
	font-family: Univia;
	src: url(../fonts/UniviaPro-Medium.ab502e75.otf) format("opentype");
	font-weight: 400;
}
@font-face {
	font-family: Univia;
	src: url(../fonts/UniviaPro-Italic.199a4da0.otf) format("opentype");
	font-style: italic;
}
:root {
	--color-primary: #328b31;
	--color-primary-light: #96cf24;
	--layout-background-color: #e5e5e5;
	--color-grey: #535353;
	--color-grey-light: #9ca3af;
	--color-grey-light-1: grey;
	--color-white: #fff;
	--color-black: #000;
	--color-text-default: #535353;
	--color-text-secondary: #a2a2aa;
	--color-token-info-bg: #e5e5ee;
	--color-bank-bg: #fff;
	--color-token-assets-bg: #fff;
	--color-input-bg: #fff;
	--color-token-symbol: #535353;
	--color-modal-amount: #f5f5f9;
	--color-overlay: hsla(0, 0%, 94.1%, 0.9);
	--color-background-swap-card: #fff;
	--sidebar-width: 180px;
	--btn-switch-bg: #ededf2;
	--btn-switch-active: #fff;
	--color-swap-input-bg: #f5f5f9;
	--color-swap-input-border: #f5f5f9;
	--color-btn-swap-disabled-bg: #d4d4d4;
	--color-modal-bg: #fff;
	--color-modal-header-bg: linear-gradient(111.68deg, #f2ecf2, #e8f2f6);
	--color-confirm-modal-footer-bg: #f0f0f0;
	--color-price-update-bg: #c9c8c8;
	--color-input-bg: hsla(0, 0%, 100%, 0.3);
	--color-input-shadow: hsla(0, 0%, 95.3%, 0.6);
	--color-input-boder: #e2e2e2;
	--color-token-row-bg-hover: #e4e4e4;
	--color-btn-setting-bg: #eff4f5;
	--color-btn-setting-bg-hover: #f7feff;
	--color-divider: #e2e2e2;
	--color-notification-bg: #dfdfdf;
	--color-pool-bg: #f8f6f6;
	--color-border-active-chain: #fff;
	--color-bg-active-chain: #eef3ff;
}
:root.dark {
	--color-primary: #328b31;
	--color-primary-light: #96cf24;
	--layout-background-color: #000;
	--color-grey: #535353;
	--color-grey-light: #9ca3af;
	--color-grey-light-1: grey;
	--color-white: #fff;
	--color-black: #000;
	--color-text-default: #fff;
	--color-text-secondary: #c5c5cc;
	--color-token-info-bg: #2a2c32;
	--color-bank-bg: #2a2c32;
	--color-token-assets-bg: transparent;
	--color-modal-bg: #2a2c32;
	--color-input-bg: #2a2c32;
	--color-token-symbol: #fff;
	--color-modal-amount: #3a3a3a;
	--color-overlay: rgba(39, 39, 39, 0.9);
	--color-background-swap-card: #181818;
	--btn-switch-bg: #2c2c2e;
	--btn-switch-active: #515153;
	--color-swap-input-bg: #2a2c32;
	--color-swap-input-border: #2c2f36;
	--color-btn-swap-disabled-bg: #40444f;
	--color-modal-bg: #27262c;
	--color-modal-header-bg: linear-gradient(166.77deg, #3b4155, #3a3045);
	--color-confirm-modal-footer-bg: #2c2f36;
	--color-price-update-bg: rgba(248, 231, 145, 0.2);
	--color-input-bg: #212429;
	--color-input-shadow: rgba(0, 0, 0, 0.3);
	--color-input-boder: #2c2f36;
	--color-token-row-bg-hover: #1a1c1f;
	--color-btn-setting-bg: #353547;
	--color-btn-setting-bg-hover: #2e2e3f;
	--color-divider: #3e414b;
	--color-notification-bg: #0d0d0e;
	--color-pool-bg: #131314;
	--color-border-active-chain: #3c5ea2;
	--color-bg-active-chain: #11152a;
}
* {
	box-sizing: border-box;
	font-family: Univia, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	padding: 0;
	margin: 0;
	scroll-behavior: smooth !important;
}
.v-skeleton-loader {
	max-width: 100% !important;
}
html {
	font-size: calc(11.25926px + 0.24691vw);
	background: var(--layout-background-color);
}
body::-webkit-scrollbar {
	display: none;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	border: 0;
	background: #212429;
	background-image: none;
}
select::-ms-expand {
	display: none;
}
.app {
	height: 100% vh;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background: var(--layout-background-color);
	color: var(--text-primary-color);
}
.header {
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
}
.content {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: var(--sidebar-width);
	padding: 10px calc(-1.48148px + 2.16049vw);
}
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	display: none;
	width: 100%;
}
.text-green,
.text-linear {
	background: linear-gradient(90deg, #5aa62b 0, #96cf24);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text-linear {
	text-shadow: 0 0 10px rgba(201, 251, 103, 0.5);
}
.text-default {
	color: var(--color-text-default);
}
.text-secondary {
	color: var(--color-text-secondary);
}
.font-light {
	font-family: UniviaLight, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
@media (max-width: 968px) {
	.footer,
	.header {
		display: block;
		z-index: 9999999999;
	}
	.sidebar {
		display: none;
	}
	.content {
		margin-left: 0;
		margin-top: 80px;
		margin-bottom: 60px;
	}
}
.fade-enter-active,
.fade-leave-active {
	transition-duration: 0.3s;
	transition-property: opacity;
	transition-timing-function: ease;
}
.fade-enter,
.fade-leave-active {
	opacity: 0;
}