/*
* Balanced
* Main CSS
* Version 4.0
* Last updated 9/4/25
*/

/* ==========================================================================
	Fonts
========================================================================== */

/* Tex Gyre Adventor */

@font-face {
	font-family: 'tex-gyre-adventor-regular';
	src: url('../font/tex-gyre-adventor-regular/tex-gyre-adventor-regular.woff2') format('woff2'),
	url('../font/tex-gyre-adventor-regular/tex-gyre-adventor-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Tex Gyre Adventor Bold */

@font-face {
	font-family: 'tex-gyre-adventor-bold';
	src: url('../font/tex-gyre-adventor-bold/tex-gyre-adventor-bold.woff2') format('woff2'),
	url('../font/tex-gyre-adventor-bold/tex-gyre-adventor-bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
	HTML
========================================================================== */

/* Force border box */

*, *::after, *::before {
		box-sizing: border-box;
}

/* Text selection colour */

::-moz-selection {
	background: #2ca9b7;
	color: #ffffff;
	text-shadow: none;
}
::-webkit-selection {
	background: #2ca9b7;
	color: #ffffff;
	text-shadow: none;
}
::selection {
	background: #2ca9b7;
	color: #ffffff;
	text-shadow: none;
}
a::-moz-selection,
a::-webkit-selection,
a::selection {
	color: #ffffff;
}

/* Placeholder text colour */

::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.75);
}
:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.75);
}
::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

/* Element defaults */

html {
	color: #ffffff;
	font-size: 16px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	line-height: 1.4;
	background-color: #01002A;
}
body {
	position: relative;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
section {
	margin-bottom: 50px;
}
h1 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 35px;
	margin: 0;
	padding: 0;
}
h2 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 25px;
	margin: 0;
	padding: 0;
}
h3 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 20px;
	margin: 0;
	padding: 0;
}
h4 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
}
a {
	color: #2fccdc;
	font-size: 14px;
	text-decoration: none;
}
label {
	cursor: pointer;
}

/* Inputs */

input[type=text] {
	color: #ffffff;
	padding: 3px 20px;
	height: 40px;
	border-radius: 10px;
	outline: none;
	border: 2px solid #0c2a4d;
	width: 100%;
	background-color: #05193b;
	-webkit-appearance: none;
	transition: border 0.3s ease;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
}
input[type=text]:hover,
input[type=text]:focus {
	border: 2px solid #2ca9b7;
}

textarea {
	color: #ffffff;
	padding: 15px 20px;
	line-height: 1.4;
	border-radius: 10px;
	outline: none;
	border: 2px solid #05193b;
	width: 100%;
	background-color: #05193b;
	-webkit-appearance: none;
	transition: border 0.3s ease;
}
textarea:hover,
textarea:focus {
	border: 2px solid #2ca9b7;
	transition: border 0.2s ease;
}

/* Misc */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: 15px 0;
	padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
textarea {
	resize: vertical;
}

/* ==========================================================================
	Grids
========================================================================== */

/* Grid setup */

.grid {
	display: flex;
}
.grid-cell {
	flex: 1;
	position: relative;
}

/* Grid alignment */

.grid-top {
	align-items: flex-start;
}
.grid-bottom {
	align-items: flex-end;
}
.grid-center {
	align-items: center;
}
.grid.side-by-side > .grid-cell:nth-child(1) {
	margin-right: 50px;
}

.grid.side-by-side.separator > .grid-cell:nth-child(1) {
	padding-right: 60px;
	margin-right: initial;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.grid.side-by-side.separator > .grid-cell:nth-child(2) {
	padding-left: 60px;
}

/* Grid cell alignment */

.grid-cell-top {
	align-self: flex-start;
}
.grid-cell-center {
	align-self: center;
}
.grid-cell-bottom {
	align-self: flex-end;
}

/* ==========================================================================
	Modules
========================================================================== */

/*
*
* States
*
*/

/* Signed in / out */

.signed-in,
.not-signed-in {
	display: none;
}
.signed-in.active,
.not-signed-in.active {
	display: block;
}

/* Collateral types */

.collateral-icx,
.collateral-avax,
.collateral-eth {
	display: none;
}
.collateral-icx.active,
.collateral-avax.active,
.collateral-eth.active {
	display: block;
}
tr.collateral-icx.active,
tr.collateral-avax.active,
tr.collateral-eth.active {
	display: table-row;
}

/* Blockchain Arbitrum Collateral */

.arbitrum-collateral-eth {
	display: none;
}
.arbitrum-collateral-eth.active {
	display: block;
}

/* Blockchain Avalanche Collateral */

.avalanche-collateral-avax {
	display: none;
}
.avalanche-collateral-avax.active {
	display: block;
}

/* Blockchain Base Collateral */

.base-collateral-eth {
	display: none;
}
.base-collateral-eth.active {
	display: block;
}

/* Blockchain Ethereum Collateral */

.ethereum-collateral-eth {
	display: none;
}
.ethereum-collateral-eth.active {
	display: block;
}

/* Blockchain ICON Collateral */

.icon-collateral-icx,
.icon-collateral-avax,
.icon-collateral-eth {
	display: none;
}
.icon-collateral-icx.active,
.icon-collateral-avax.active,
.icon-collateral-eth.active {
	display: block;
}

/* Blockchain: Optimism Collateral */

.optimism-collateral-eth {
	display: none;
}
.optimism-collateral-eth.active {
	display: block;
}




/* Blockchain Arbitrum Loan */

.arbitrum-loan-eth {
	display: none;
}
.arbitrum-loan-eth.active {
	display: block;
}

/* Blockchain Avalanche Loan */

.avalanche-loan-avax {
	display: none;
}
.avalanche-loan-avax.active {
	display: block;
}

/* Blockchain Base Loan */

.base-loan-eth {
	display: none;
}
.base-loan-eth.active {
	display: block;
}

/* Blockchain Ethereum Loan */

.ethereum-loan-eth {
	display: none;
}
.ethereum-loan-eth.active {
	display: block;
}

/* Blockchain ICON Loan */

.icon-loan-icx,
.icon-loan-avax,
.icon-loan-eth {
	display: none;
}
.icon-loan-icx.active,
.icon-loan-avax.active,
.icon-loan-eth.active {
	display: block;
}

/* Blockchain Optimism Loan */

.optimism-loan-eth {
	display: none;
}
.optimism-loan-eth.active {
	display: block;
}



/* Blockchain type */

.icon-blockchain,
.avalanche-blockchain,
.ethereum-blockchain {
	display: none;
}
.icon-blockchain.active,
.avalanche-blockchain.active,
.ethereum-blockchain.active {
	display: block;
}
span.icon-blockchain.active,
span.avalanche-blockchain.active,
span.ethereum-blockchain.active {
	display: inline-block;
}

/*
*
* Containers / panels
*
*/

/* Panel */

.panel {
	margin-bottom: 50px;
	position: relative;
	padding: 35px;
	border-radius: 25px;
	background-color: #0c2a4d;
	background-image: linear-gradient(171deg, rgba(44,169,183,0.37) 0%, rgba(44,169,183,0) 50%);
}
.panel-parent {
	background-color: initial;
	background-image: linear-gradient(135deg, rgba(32,121,143,1) 0%, rgba(19,70,109,1) 100%);
}

#trade #panel-swap .panel-parent {
	z-index: 2;
	position: relative;
}
#trade #panel-swap .panel-parent::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 25px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}
#trade #panel-swap::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 25px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

/* Panel layout */

.panel h2 {
	margin-bottom: 25px;
}

/* Panel with a parent contained within */

.panel .panel-parent {
	margin-left: -35px; /* Negative margin the padding from panel */
	margin-right: 35px;	/* Negative margin the padding from panel */
	margin-top: -35px;	/* Negative margin the padding from panel */
	margin-bottom: -35px; /* Negative margin the padding from panel */
	padding: 35px;
	padding-top: 30px; /* Aesthetic hack */
	border-radius: 25px;
	max-width: 370px;
}

/* Style inputs to account for background colour */

.panel-parent input[type="text"] {
	background-color: #0c2a4d;
	border: 2px solid transparent;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
}
.panel-parent input[type="text"]:focus,
.panel-parent input[type="text"]:hover {
	border: 2px solid #2ca9b7;
}

/* Panel highlight */

.panel .highlight {
	background-color: #0c2a4d;
	padding: 15px;
	width: 100%;
	border-radius: 15px;
}

/* Panel footer */

.panel-footer {
	border-radius: 15px;
	background-color: #0c2a4d;
	position: absolute;
	padding: 12px 35px;
	padding-top: 35px;
	width: 485px;
	top: 185px;
}

/*
*
* Buttons / Actions
*
*/

/* Buttons */

.button {
	display: inline-block;
	border-radius: 10px;
	padding: 7px 25px;
	color: #ffffff;
	text-decoration: none;
	border-top: 1px solid #3ecddd;
	background: linear-gradient(0deg, rgb(39,153,166) 0%, rgb(46,181,196) 100%);
	cursor: pointer !important;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.1);
	transition: box-shadow 0.3s ease;
}
.button:hover {
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.1),
				0px 10px 15px 0px rgba(1, 0, 42, 0.15) inset;
	transition: box-shadow 0.2s ease;
}
.button:focus {
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.1),
				0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
	transition: box-shadow 0.2s ease;
}
.button.red {
	background-color: #fb6a6a;
	border-top: 1px solid #ff9898;
	background: linear-gradient(0deg, rgb(223,93,93) 0%, rgb(252,108,108) 100%);
}
.button.red:hover {
	background-color: #f72c2c;
}
.button.disabled {
	background: linear-gradient(0deg, rgb(121, 123, 128) 0%, rgb(159, 165, 170) 100%) !important;
	border-top: 1px solid #c6cace !important;
	cursor: not-allowed !important;
}

/* Cancel */

.cancel {
	margin-right: 15px;
	font-size: 14px;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer !important;
	transition: color 0.3s ease;
}
.cancel:hover {
	color: rgba(255, 255, 255, 1);
	transition: color 0.2s ease;
}

/*
*
* Inputs
*
*/

/* Asset input */

.input-asset .grid-cell:first-of-type {
	max-width: 120px;
}
.input-asset input[type="text"] {
	width: 100%;
	height: 40px;
	text-align: right;
	border-radius: 0 10px 10px 0;
}
.input-asset .asset {
	display: block;
	width: 100%;
	height: 40px;
	padding: 10px 20px;
	padding-left: 50px;
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	line-height: 17px;
	color: #ffffff;
	border-radius: 10px 0 0 10px;
	border: 2px solid #05193b;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	background-color: #05193b;
	background-repeat: no-repeat;
	transition: border 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.input-asset .asset:hover,
.input-asset .asset.active {
	border: 2px solid #2ca9b7;
	color: #2fccdc;
	cursor: pointer;
	transition: border 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.input-asset.text-only .asset {
	padding-left: 20px;
}
.input-asset + .input-asset {
	margin-top: 15px;
}

#panel-supply .panel-parent .input-asset input[type="text"],
#panel-swap .panel-parent .input-asset input[type="text"],
#panel-bridge .panel-parent .input-asset input[type="text"] {
	border: 2px solid #0b284c;
}
#panel-supply .panel-parent .input-asset input[type="text"]:hover,
#panel-swap .panel-parent .input-asset input[type="text"]:hover,
#panel-bridge .panel-parent .input-asset input[type="text"]:hover,
#panel-supply .panel-parent .input-asset input[type="text"]:focus,
#panel-swap .panel-parent .input-asset input[type="text"]:focus,
#panel-bridge .panel-parent .input-asset input[type="text"]:focus {
	border: 2px solid #2ca9b7;
	transition: border 0.2s ease;
}

/* Asset input parent panel styles*/

.panel-parent .input-asset .asset {
	border: 2px solid #0b284c;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	background-color: #0b284c;
}
.panel-parent .input-asset .asset:hover,
.panel-parent .input-asset .asset.active {
	border: 2px solid #2ca9b7;
}
.panel-parent .input-asset.static .asset {
	border: 2px solid #0b284c;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	background-color: #0b284c;
}
.panel-parent .input-asset.static .asset:hover {
	border: 2px solid #0b284c;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	color: #ffffff;
	cursor: default;
}

/* Asset input arrow */

.input-asset .asset::after {
	content: url(../img/icon/arrow-down.svg);
	position: absolute;
	width: 10px;
	margin-left: 10px;
}

/* Static asset input */

.input-asset.static .grid-cell:first-of-type {
	max-width: 100px;
}
.input-asset.static .asset:hover {
	border: 2px solid #05193b;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	color: #ffffff;
	cursor: default;
}
.input-asset.static .asset::after {
	display: none;
}

/* Static asset input: bnUSD */

.input-asset.static.bnusd .grid-cell:first-of-type {
	max-width: 117px;
}

/*
*
* Asset images
*
*/

/* Default */

.asset.default {
	background-image: url(../img/logo/default.png);
	background-position: 15px center;
	background-size: 25px;
	background-repeat: no-repeat;
}

/* ICX */

.asset.icx {
	background-image: url(../img/logo/icx.svg);
	background-position: 15px center;
	background-size: 25px;
	background-repeat: no-repeat;
}

/* sICX */

.asset.sicx {
	background-image: url(../img/logo/sicx.svg);
	background-position: 15px center;
	background-size: 25px;
	background-repeat: no-repeat;
}

/* bnUSD */

.asset.bnusd {
	background-image: url(../img/logo/bnusd.svg);
	background-position: 15px center;
	background-size: 25px;
	background-repeat: no-repeat;
}

/* BALN */

.asset.baln {
	background-image: url(../img/logo/baln.svg);
	background-position: 15px center;
	background-size: 25px;
	background-repeat: no-repeat;
}

/* OMM */

.asset.omm {
	background-image: url(../img/logo/omm.svg);
	background-position: 15px center;
	background-size: 25px;
	background-repeat: no-repeat;
}

/*
*
* Metadata
*
*/

.metadata {
	margin: 15px 0;
}
.metadata dt {
	margin-bottom: 5px;
	color: rgba(255,255,255,0.75);
	font-size: 14px;
}
.metadata dd {
	margin-left: 0;
}

/*
*
* Pagination
*
*/

ul.pagination {
	display: block;
	padding: 0;
	text-align: center;
	margin: 0;
	margin-top: 15px;
}
ul.pagination li {
	display: inline-block;
	padding: 5px;
	border: 2px solid rgba(255,255,255,0.15);
	border-radius: 10px;
	width: 35px;
	text-align: center;
	transition: border 0.2s ease;
}
ul.pagination li.active {
	border: 2px solid #2ca9b7;
	color: #2ca9b7;
}
ul.pagination li:hover {
	border: 2px solid #2ca9b7;
	cursor: pointer;
	transition: border 0.3s ease;
}

/*
*
* Loader
*
*/

.loader {
	display: block;
	width: 75px;
	margin-left: auto;
	margin-right: auto; 
}
.loader {
    animation-name: spin;
    animation-duration: 30000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

/*
*
* Toggle
*
*/

ul.toggle {
	display: inline-block;
	margin: 0;
	padding-left: 0;
}
ul.toggle li {
	float: left;
	list-style: none;
	padding: 1px 12px;
	padding-bottom: 3px;
	border-radius: 100px;
	margin-right: 5px;
	color: #ffffff;
	font-size: 14px;
	background-color: #144a68;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
ul.toggle li:last-of-type {
	margin-right: 0;
}
ul.toggle li.active {
	background-color: #2ca9b7;
}
ul.toggle li:hover {
	background-color: #2ca9b7;
	transition: background-color 0.2s ease;
}

/*
*
* Tabs
*
*/

ul.tabs {
	display: inline-block;
	margin: 0;
	margin-bottom: -5px;
	padding-left: 0;
	z-index: 5;
	position: relative;
}
ul.tabs li {
	float: left;
	margin-right: 5px;
	padding: 10px 30px;
	list-style: none;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	background-color: #0c2a4d;
	transition: background-color 0.3s ease;
}
ul.tabs li:last-of-type {
	margin-right: 0;
}
ul.tabs li:hover {
	cursor: pointer !important;
	background-color: #0f3859;
	transition: background-color 0.2s ease;
}
ul.tabs li.active {
	background-color: #144a68;
}

#tab-swap.active {
	background-color: #1f778d;
}
#tab-supply.active {
	background-color: #1e7188;
}
#tab-bridge.active {
	background-color: #1c6b83;
}

/*
*
* Dropdown
*
*/

.dropdown {
	cursor: pointer;
}
.dropdown::after {
	content: url(../img/icon/arrow-down.svg);
	display: inline-block;
	width: 10px;
	margin-left: 6px;
	cursor: pointer;
}
.dropdown-content {
	position: absolute;
	z-index: 3;
	margin-top: 20px;
	font-size: 14px;
	background: #0c2a4d;
	border: 2px solid #2ca9b7;
	border-radius: 15px;
	padding: 25px;
}
.dropdown-content::after {
	content: '';
	top: 0%;
	right: 10px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	border-width: 12px;
	margin-left: -10px;
	transform: rotate(0.5turn);
	margin-top: -25px;
}
.dropdown-content {
	pointer-events: none;
	opacity: 0;
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
	-webkit-transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}
.dropdown-content.active {
	pointer-events: auto !important;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}
.dropdown-content.wallet .button {
	margin-top: 15px;
}

/*
*
* Tooltip
*
*/

.tooltip {
	position: relative;
	cursor: help !important;
}

/* Tooltip arrow */

.tooltip .tooltip-content::after {
	content: '';
	position: absolute;
	left: 50%;
	top: initial;
	bottom: -24px;
	border: solid transparent;
	height: 0;
	width: 0;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	transform: initial;;
	border-width: 12px;
	margin-left: -12px;
}

/* Tooltip content */

.tooltip-content {
	position: absolute;
	z-index: 9999;
	min-width: 200px;
	left: 27px;
	bottom: 30px;
	text-align: left;
	font-size: 14px;
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
	background: #0b284c;
	opacity: 0;
	padding: 15px;
	border: 2px solid #2ca9b7;
	border-radius: 15px;
	cursor: default;
	pointer-events: none;
}
.tooltip .tooltip-content {
	transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	transition: opacity 0.3s, transform 0.3s;
}
.tooltip:hover .tooltip-content {
	pointer-events: auto;
	opacity: 1;
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}
.tooltip-content.active {
	pointer-events: auto;
	opacity: 1;
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}
.tooltip-item::after {
	content: url(../img/icon/question.svg);
	position: absolute;
	width: 14px;
	margin-left: 7px;
	margin-top: 2px;
}

/*
*
* Plus / minus
*
*/

.plus,
.minus {
	float: right;
	width: 15px;
	height: 15px;
	padding-top: 5px;
	text-align: center;
	border: 2px solid #00b1a3;
	border-radius: 25px;
	cursor: pointer;
	color: #00b1a3;
	transition: color 0.3s ease, background 0.3s ease;
	line-height: 1px;
	margin-left: 10px;
	font-size: 10px;
	font-weight: bold;
	margin-top: 4px;
}
.plus:hover,
.minus:hover {
	color: #ffffff;
	background: #00b1a3;
	transition: color 0.2s ease, background 0.2s ease;
}
tr.default .minus {
	display: none;
}
tr.default:hover .minus {
	display: block;
}

/* Minus colours */

.minus {
	padding-top: 3px;
	border: 2px solid #fb6a6a;
	color: #fb6a6a;
}
.minus:hover {
	color: #ffffff;
	background: #fb6a6a;
}

/*
*
* Text
*
*/

/* Text styles */

.text-bold {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
}
.label {
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	font-size: 14px;
	color: rgba(255,255,255,0.75);
}
.text-upper {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 3px;
	color: #d5d7db;
}

/* Text alignment */

.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

/* Text color */

.text-green {
	background: linear-gradient(0deg, #29b0bf 0%, #36cbdc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text-purple {
	background: linear-gradient(0deg, #9b89f2 0%, #9e97f3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text-red {
	color: #fb6a6a;
}
.text-white {
	color: #ffffff;
}

/*
*
* Stylistic
*
*/

/* Borders */

.border-left {
	border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.border-right {
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.border-top {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.border-bottom {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Radius */

.radius-left-none {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.radius-right-none {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.radius-top-none {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.radius-bottom-none {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/*
*
* Misc
*
*/

/* Visiblity */

.hide {
	display: none;
}
.show {
	display: block;
}

/* Dot */

.dot {
  display: inline-block;
  position: relative;
  border-radius: 100px;

  /* your base look */
  background-color: #0c2a4d;
  background-image: linear-gradient(
    171deg,
    rgba(44,169,183,0.37) 0%,
    rgba(44,169,183,0) 50%
  );
  background-size: 150%;
  overflow: hidden;
}

.dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* the "hover" gradient lives here */
  background-image: linear-gradient(
    171deg,
    rgba(44,169,183,0.50) 0%,
    rgba(44,169,183,0) 50%
  );
  background-size: 200%;
  opacity: 0;
  transition: opacity .35s ease;
}
.dot:hover::before,
.dot.active::before {
  opacity: 1;
}
.dot svg,
.dot img {
	padding: 10px;
	max-width: 50px;
	display: inline-block;
}
.dot img {
	padding: 0;
	width: 50px;
}
.header .dot.wallet {
	padding-left: 25px;
	padding-right: 10px;
}
.header .dot.wallet .svg {
	width: 52px;
	max-width: initial;
}
.header .dot .svg path {
	fill: #2ca9b7 !important;
}
.header .dot.wallet img {
	width: 65px;
	max-width: initial;
	margin-top: -6px;
	margin-bottom: -10px;
}
.header .dot.wallet img {
	width: 62px;
	max-width: initial;
	margin-top: -5px;
	margin-bottom: -10px;
}
.header .wallet-metadata {
	margin-top: 2px;
}
.header .dot.wallet .variable-active-wallet-2 {
	font-size: 14px;
}
.header .dot.wallet .wallet-metadata > p {
	margin-bottom: -2px;
}
.dot.wallet .grid-cell {
	flex: 0 0 auto;     /* or: flex: initial; or: flex: none; */
}
.utility-container {
	text-align: right;
}
.header .dot {
	position: relative;
	cursor: pointer;
}
.utility-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;   /* vertically centers the dots */
	gap: 12px;             /* optional spacing between them */
}

/*
*
* New header
*
*/

/* Language selector */

.language-selector-container {
	margin-top: 15px;
	text-align: center;
	background-color: #144a68;
	border-radius: 10px;
	padding: 10px;
}
#modal-sign-in .dropdown-content.language-selector {
	padding: 0;
	left: 196px;
	right: initial;
	margin-top: 0px;
}
#modal-sign-in .dropdown-content.language-selector ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}
#modal-sign-in .dropdown-content.language-selector ul li {
	padding: 10px 15px;
	transition: background-color 0.3s ease;
}
#modal-sign-in .dropdown-content.language-selector ul li:first-of-type {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
#modal-sign-in .dropdown-content.language-selector ul li:last-of-type {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
#modal-sign-in .dropdown-content.language-selector ul li:hover {
	cursor: pointer;
	background-color: #2ca9b7;
	transition: background-color 0.2s ease;
}

/*
*
* Animations
*
*/

/* Underline animation */

.animation-underline {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
    margin-bottom: -9px;
}
.animation-underline:after {
    content: '';
    display: block;
    width: 0px;
    height: 1px;
    margin-top: 3px;
    background: transparent;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}
.animation-underline:hover:after {
    width: 100%;
}
.animation-underline.active:after {
    width: 100%;
}
.animation-underline.active.secondary:after {
	background-image: linear-gradient(90deg, #ffffff, #b8b8c3);
}
.animation-underline.active.secondary:hover:after {
	background-image: linear-gradient(120deg, #2ca9b7, #1b648f);
}

/* ==========================================================================
	Header
========================================================================== */

.header {
	margin-top: 50px;
	margin-bottom: 50px;
}
.header .logo {
	width: 100px;
	margin-left: 7px;
	margin-right: 75px;
}
.logo-back {
	position: absolute;
	background: #0b284c;
	top: 16px;
	left: 125px;
	border-radius: 10px;
	font-size: 14px;
	padding: 10px 15px;
	z-index: 9;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}
.logo-link:hover + .logo-back {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}

#copy-address {
	position: absolute;
	background: #0b284c;
	top: 14px;
	left: inherit;
	border-radius: 10px;
	font-size: 14px;
	padding: 10px 15px;
	z-index: 9;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	right: 215px;
}
#wallet-address:hover + #copy-address {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}
#wallet-address {
	cursor: pointer;
	transition: color 0.3s ease;
}
#wallet-address:hover {
	color: #2fccdc;
	transition: color 0.2s ease;
}
#wallet-address.no-active:hover {
	cursor: initial;
	color: rgba(255,255,255,0.75);
}

/* ==========================================================================
	Wrapper
========================================================================== */

/* Navigation container width */

.wrapper > .grid-cell:nth-child(1) {
	max-width: 180px;
}

/* ==========================================================================
	Navigation
========================================================================== */

.navigation ul {
	position: relative;
	padding: 0;
	margin: 0;
	background-color: #0c2a4d;
	width: 100px;
	border-radius: 25px;
	margin-left: 7px;
}
.navigation ul li {
	list-style-type: none;
	margin-bottom: 15px;
}
.navigation ul li a {
	display: block;
	color: #8695a6;
	text-decoration: none;
	padding: 15px;
	text-align: center;
	border-radius: 25px;
	width: 114px;
	margin-left: -7px;
	position: relative;
	z-index: 3;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
	border: 1px solid transparent;
}
.navigation ul li a:hover {
	color: #ffffff;
	background-color: #2ca9b7;
	box-shadow: 0px 20px 25px 0px rgba(1, 0, 42, 0.25);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.3s ease;
	box-shadow: 0px 20px 25px 0px rgba(1, 0, 42, 0.25);
	background: linear-gradient(135deg, rgba(32,121,143,1) 0%, rgba(19,70,109,1) 100%);
	border: 1px solid #286579;
}
.navigation ul li a.active {
	color: #fff;
	opacity: 1;
	box-shadow: 0px 20px 25px 0px rgba(1, 0, 42, 0.25);
	background: linear-gradient(135deg, rgba(32,121,143,1) 0%, rgba(19,70,109,1) 100%);
	border: 1px solid #286579;
}
.navigation ul li a svg,
.navigation ul li a img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	width: 35px;
}

.navigation ul li a img {
	width: 70px;
	margin-bottom: -10px;
	margin-top: -15px;
}

/* Default icon colour */

.navigation ul li a svg path,
.navigation ul li a svg rect {
	fill: #8695a6 !important;
	transition: fill 0.3s ease;
}

/* Hover / active icon colour */

.navigation ul li a:hover svg path,
.navigation ul li a:hover svg rect {
	fill: #01002a !important;
	transition: fill 0.2s ease;
}
.navigation ul li a.active svg path,
.navigation ul li a.active svg rect {
	fill: #01002a !important;
	transition: fill 0.2s ease;
}

.navigation .notification-dot {
	transform: none;
	left: 80px;
	position: absolute;
	margin-top: -5px;
	transition: background-color 0.3s ease;
	display: none;
}
.navigation ul li a:hover .notification-dot,
.navigation ul li a.active .notification-dot {
	background-color: #01002a;
	transition: background-color 0.2s ease;
}

/* ==========================================================================
	Notifications
========================================================================== */

.notification {
	position: fixed;
	margin-left: 180px;
	top: 50px;
	max-width: 300px;
	padding: 15px;
	background: #0b284c;
	border: 2px solid #2ca9b7;
	border-radius: 10px;	
	z-index: 9;
}

/* ==========================================================================
	Modal
========================================================================== */

/*
*
* Modules
*
*/

/* Modal layout */

.modal-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(1,0,42,0.75);
	transition: all 0.3s;
}
.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: 90px;
	width: 50%;
	height: auto;
	max-width: 400px;
	z-index: 2000;
	visibility: hidden;
	backface-visibility: hidden;
	transform: translateX(-50%) translateY(-50%);
}
#modal-bridge-assets {
	max-width: 430px;
}

/* Modal content */

.modal-content {
	color: #fff;
	background: #0c2a4d;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
	border: 2px solid #2ca9b7;
	border-radius: 25px;
	padding: 25px;
}
.modal-content h3 {
	margin-bottom: 5px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
}
.modal-content h3 + p {
	font-size: 20px;
}
.modal-actions {
	border-top: 1px solid #485e79;
	text-align: center;
	padding-top: 20px;
	margin-top: 20px;
}
.modal-content .grid.comparison  {
	margin-top: 25px;
	margin-bottom: 25px;
}

/* Modal visible */

.modal-show {
	visibility: visible;
}
.modal-show ~ .modal-overlay {
	opacity: 1;
	visibility: visible;
}

/* Modal animation */

.modal .modal-content {
	transform: scale(0.7);
	opacity: 0;
	transition: all 0.3s;
}
.modal-show .modal-content {
	transform: scale(1);
	opacity: 1;
}

/*
*
* Specific
*
*/

/* Send modal */

#modal-send-confirm .modal-content h3 + p {
	margin-bottom: 15px;
}
#slider-stake-modal {
	margin-top: 25px;
	margin-bottom: 15px;
}
#modal-claim-rewards .modal-content h3 + p {
	margin-bottom: 15px;
}

/* Withdraw modal */

#modal-withdraw-collateral .graphical-options {
	margin-top: 15px;
}
#modal-withdraw-collateral .graphical-options span.text-bold {
	font-size: 14px;
}

/* Graphical options */

.graphical-options label {
	transition: background-color 0.3s ease;
}
.graphical-options label:hover {
	background-color: #1d5879;
	transition: background-color 0.2s ease;
}
.graphical-options [type="radio"]:not(:checked) + label svg path {
	fill: #8695a6 !important;
	transition: fill 0.3s ease;
}
.graphical-options label:hover svg path {
	transition: fill 0.2s ease;
}
.graphical-options label img,
.graphical-options label svg {
	height: 40px;
	margin-bottom: 10px;
}
.graphical-options [type="checkbox"]:checked,
.graphical-options [type="checkbox"]:not(:checked),
.graphical-options [type="radio"]:checked,
.graphical-options [type="radio"]:not(:checked){
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	visibility: hidden;
}
.graphical-options .checkbox-tools:checked + label,
.graphical-options .checkbox-tools:not(:checked) + label {
	position: relative;
	display: inline-block;
	padding: 10px;
	width: 112px;
	font-size: 14px;
	margin: 0 auto;
	text-align: center;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
}
.graphical-options .checkbox-tools:checked + label,
.graphical-options .checkbox-tools label:hover {
	background-color: #1d5879;
}
.graphical-options .checkbox-tools:checked + label::before,
.graphical-options .checkbox-tools:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.graphical-options .checkbox-tools:checked + label .uil,
.graphical-options .checkbox-tools:not(:checked) + label .uil{
	font-size: 24px;
	line-height: 24px;
	display: block;
	padding-bottom: 10px;
}
.graphical-options label .sicx {
	width: 40px;
}

/* Vote modal fees */

.graphical-options .reject [type="radio"]:not(:checked) + label svg path,
.graphical-options .reject [type="radio"]:not(:checked) + label svg circle {
	stroke: #8695a6 !important;
	transition: fill 0.3s ease;
}
#modal-vote-fees .graphical-options {
	max-width: 250px;
	margin: 0 auto;
}
#modal-vote-fees .graphical-options label img,
#modal-vote-fees .graphical-options label svg {
	height: 30px;
}

/*
*
* Sign in modal
*
*/

/* Sign in modal */

#modal-sign-in {
	max-width: 500px;
}
#modal-sign-in .modal-content {
	background-color: #0c2a4d;
	border: none;
}
#modal-sign-in .modal-content img,
#modal-sign-in .modal-content h2,
#modal-sign-in .modal-content .wallet-info,
#modal-sign-in .modal-content h3,
#modal-sign-in .modal-content .search,
#modal-sign-in .modal-content .list.sign-in {
	position: relative;
	z-index: 3;
}
#modal-sign-in .modal-content::before,
#modal-sign-in .modal-content::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 25px;
}
.variable-active-wallet {
	margin-top: 10px;
	margin-bottom: 5px;
}

#modal-sign-in .modal-content::before {
	background-image: url("../img/feature/background-vibe-dynamic.svg");
	background-size: 370%;
	background-position: center 70%;
}
#modal-sign-in .modal-content::before {
	background-image: url("../img/feature/background-flow-dynamic.svg");
	opacity: .35;
	z-index: 0;
	pointer-events: none;
	background-size: 300%;
	background-position: center 77.7%;
	background-repeat: no-repeat;
}
#modal-sign-in .modal-content::before {
	background-image: url("../img/feature/background-synergy-dynamic.svg");
	background-size: 300%;
	background-position: center 70.7%;
}

#modal-sign-in .modal-content::after {
	background: linear-gradient(0deg, rgba(12,42,77,1) 0%, rgba(12,42,77,0) 50%),
				linear-gradient(171deg, rgba(44,169,183,.37) 0%, rgba(44,169,183,0) 50%);
	z-index: 1;
}
#modal-sign-in .modal-content img {
	width: 125px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#modal-sign-in .label.message {
	margin-top: 15px;
}
#modal-sign-in .language-selector + .label.message {
	margin-top: 15px;
}
#modal-sign-in h2 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 25px;
	color: #ffffff;
	display: block !important;
	margin-top: 15px;
}
#modal-sign-in h3 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	color: #ffffff;
	font-size: 15px;
	margin-bottom: 0;
}
#modal-sign-in .search {
	margin-bottom: 0;
	margin-top: 15px;
}
#modal-sign-in .message {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 5px;
}
#modal-sign-in .language-selector {
	margin-top: 10px;
	margin-bottom: 15px;
}
/*
#modal-sign-in .supported-chains {
	list-style: none;
	margin-top: 10px;
	background-color: #0b284c;
	padding: 2px 0;
	border-radius: 10px;
	text-align: center;
	width: 215px;
	margin-top: 5px;
}*/
#modal-sign-in .supported-chains {
	padding-left: 0;
	margin-top: 5px;
}
#modal-sign-in .supported-chains li {
	display: inline-block;
	margin: -2px;
	margin-bottom: -6px;
}
#modal-sign-in .supported-chains li:first-of-type {

}
#markets #modal-sign-in .search.new {
	background-image: url("../img/icon/search1.svg"),
						linear-gradient(180deg, rgba(10,37,69,1) 0%, rgba(14,50,81,1) 100%);
}
#modal-sign-in .supported-chains img {
	max-height: 30px;
	display: block;
	margin-top: 5px;
	width: initial;
}
#modal-sign-in .cosmos .supported-chains {
	text-align: left;
}
#modal-sign-in .cosmos .supported-chains li:first-of-type {
	margin-left: 15px;
}
#modal-sign-in .modal-content ul.list.sign-in > li .grid > .grid-cell:first-of-type::before {
	content: '';
	display: block;
	background-size: contain;
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: initial;
	margin-top: 0;
	outline: none;
	top: -15px;
	left: -5px;
	background-repeat: no-repeat;
	background-image: url(../img/logo/default.png);
}
#modal-sign-in .modal-content ul.list.sign-in > li.ethereum .grid > .grid-cell:first-of-type::before {
	top: 2px;
}
#modal-sign-in .modal-content ul.list.sign-in > li.ethereum {
	padding-bottom: 12px;
}
#modal-sign-in .modal-content ul.list.sign-in > li.ethereum.wallet-connected {
	margin-top: 0;
}
#modal-sign-in .modal-content ul.list.sign-in > li.ethereum > .grid > .container-connect-ethereum,
#modal-sign-in .modal-content ul.list.sign-in > li.ethereum > .grid > .container-manage-ethereum {
	max-width: 135px;
}
#modal-sign-in .modal-content ul.list.sign-in > li.ethereum.wallet-connected > .grid > .container-manage-ethereum {
	margin-top: -33px;
}
#modal-sign-in .modal-content ul.list.sign-in > li.wallet-connected .grid > .grid-cell:first-of-type::before {
	top: -1px;
}
#modal-sign-in .modal-content ul.list.sign-in > li.wallet-connected {
	padding-top: 15px;
	padding-bottom: 15px;
}
#modal-sign-in .modal-content .wallet-connected h3 {
	padding-bottom: 3px;
}
#modal-sign-in .modal-content ul.list.sign-in > li.arbitrum .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/arbitrum-blockchain.png);
}
#modal-sign-in .modal-content ul.list.sign-in > li.ethereum .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/ethereum-blockchain.png);
}
#modal-sign-in .modal-content ul.list.sign-in > li.avalanche .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/avalanche-blockchain.png);
}
#modal-sign-in .modal-content ul.list.sign-in > li.base .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/base-blockchain.png);
}
#modal-sign-in .modal-content ul.list.sign-in > li.injective .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/injective-blockchain.png);
}
#modal-sign-in .modal-content ul.list.sign-in > li.solana .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/solana-blockchain.png);
}
#modal-sign-in .modal-content ul.list.sign-in > li.sui .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/sui-blockchain.png);
}
#modal-sign-in .modal-content ul.list.sign-in > li.stellar .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/stellar-blockchain.png);
}

/*
*
* Copy wallet link
*
*/

.wallet-address {
	cursor: pointer;
}
.wallet-copy {
	position: absolute;
	background: #0b284c;
	top: 55px;
	left: 50px;
	border-radius: 10px;
	font-size: 14px;
	padding: 10px 15px;
	z-index: 9;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	transform: translate3d(0,-10px,0) rotate3d(1,1,0,25deg);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	padding: .45rem .8rem;
	border-radius: 999px;
	background-image: linear-gradient(135deg, rgba(32,121,143,0.5) 0%, rgba(23,86,120,0.5) 100%);
	border: 1px solid rgba(86,171,188,.38);
	z-index: 9;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
.wallet-address:hover + .wallet-copy {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}
/* Show the tooltip when we toggle it via JS */
.wallet-copy.active {
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
  transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}

/* ==========================================================================
	List / Table
========================================================================== */

/*
*
* Default list
*
*/

table.list {
	width: 100%;
	border-collapse: collapse;
}
table.list th {
	text-align: left;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 3px;
	color: #d5d7db;
}
table.list tbody tr {
	border-bottom: 1px solid #304a68;
}
table.list tbody tr:last-of-type {
	border-bottom: none;
}
table.list td {
	padding-top: 20px;
	padding-bottom: 20px;
}
table.list tbody tr:last-of-type td {
	padding-bottom: 0;
}

.external-link::after {
	content: url(../img/icon/external.svg);
	display: inline-block;
	width: 11px;
	margin-left: 6px;
	cursor: pointer;
	transform: translateY(1px);
}

/* Sign in list */

ul.list {
	padding-left: 0;
	list-style: none;
}
ul.list p.label {
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	font-size: 14px;
	color: rgba(255,255,255,0.75);
}
ul.list.sign-in {
	max-height: 350px;
	overflow-y: scroll;
	background-color: #0c2a4d;
	border-radius: 20px;
	padding: 15px;
	margin-bottom: 0;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
	background-image: url("../img/icon/search2.svg"), linear-gradient(0deg, rgb(10, 37, 69) 0%, rgb(14, 50, 81) 100%);
}
ul.list.sign-in > li {
	position: relative;
}
ul.list.sign-in > li .grid > .grid-cell:first-of-type {
	padding-left: 55px;
}
ul.list.sign-in > li .grid > .grid-cell:last-of-type {
	max-width: 130px;
	text-align: right;
}
ul.list.sign-in > li .grid > .grid-cell:last-of-type p:first-of-type {
	margin-bottom: 3px;
}
ul.list.sign-in > li {
	border-bottom: 1px solid rgba(255,255,255,0.15);
	padding-top: 25px;
	padding-bottom: 25px;
}
ul.list.sign-in > li:first-of-type {
	padding-top: 0 !important;
}
ul.list.sign-in > li.wallet-connected:first-of-type {
	margin-top: -10px;
}
ul.list.sign-in > li.wallet-connected:last-of-type {
	padding-bottom: 0 !important;
	margin-bottom: -10px;
}
ul.list.sign-in > li:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/*
*
* Manage wallets modal
*
*/

/* Manage wallets modal */

#modal-manage-wallets {
	max-width: 530px;
}
#modal-manage-wallets .label.message {
	margin-top: 15px;
}
#modal-manage-wallets .language-selector + .label.message {
	margin-top: 15px;
}
#modal-manage-wallets h2 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 25px;
	color: #ffffff;
	margin-bottom: 15px;
}
#modal-manage-wallets h3 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	color: #ffffff;
	font-size: 15px;
}
#modal-manage-wallets .search {
	margin-bottom: 0;
}
#modal-manage-wallets .message {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 5px;
}
#modal-manage-wallets .language-selector {
	margin-top: 10px;
	margin-bottom: 15px;
}
#modal-manage-wallets .supported-chains {
	list-style: none;
	margin-top: 10px;
	background-color: #0b284c;
	padding: 2px 0;
	border-radius: 10px;
	text-align: center;
	display: block;
}
#modal-manage-wallets .supported-chains li {
	display: inline-block;
	margin: 0 3.2%;
}
#modal-manage-wallets .supported-chains li:first-of-type {

}
#modal-manage-wallets .supported-chains img {
	max-height: 20px;
	display: block;
	margin-top: 5px;
}
#modal-manage-wallets .supported-chains li::after {
	content: '';
	background-color: #2ca9b7;
	border-radius: 30px;
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
	margin-top: -24px;
	margin-left: 12px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Manage wallets list */

ul.list {
	padding-left: 0;
	list-style: none;
}
ul.list p.label {
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	font-size: 14px;
	color: rgba(255,255,255,0.75);
}
ul.list.manage-wallets {
	max-height: 350px;
	overflow-y: scroll;
	background-color: #05193b;
	border-radius: 10px;
	margin-bottom: 0;
	padding: 25px;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
}

ul.list.manage-wallets p.or,
ul.list.sign-in p.or {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 10px;
	color: rgba(255,255,255,0.75);
	margin-top: 5px;
	display: none;
}
ul.list.manage-wallets p.or::before,
ul.list.sign-in p.or::before {
	content: '';
	position: absolute;
	height: 1px;
	width: 35px;
	background-color: rgba(255,255,255,0.25);
	right: 29px;
	margin-top: 8px;
}

ul.list.manage-wallets > li .grid > .grid-cell:first-of-type {
	padding-left: 50px;
}
ul.list.manage-wallets > li .grid > .grid-cell:nth-of-type(2) {
	max-width: 130px;
	text-align: right;
}
ul.list.manage-wallets > li .grid > .grid-cell:nth-of-type(3) {
	max-width: 130px;
	text-align: right;
}
ul.list.manage-wallets > li .grid > .grid-cell:last-of-type p {
	/*margin-top: 31px;*/
}
ul.list.manage-wallets > li {
	border-bottom: 1px solid rgba(255,255,255,0.15);
	padding-bottom: 15px;
	margin-bottom: 15px;
}
ul.list.manage-wallets > li:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
ul.list.manage-wallets > li.avalanche .grid > .grid-cell:first-of-type {
	background-image: url(../img/logo/avalanche.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 35px;
}
ul.list.manage-wallets > li.ethereum .grid > .grid-cell:first-of-type {
	background-image: url(../img/logo/eth.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 35px;
}
ul.list.manage-wallets > li.icon .grid > .grid-cell:first-of-type {
	background-image: url(../img/logo/icx.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 35px;
}
ul.list.manage-wallets > li.sui .grid > .grid-cell:first-of-type {
	background-image: url(../img/logo/sui.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 35px;
}
ul.list.manage-wallets > li.cosmos .grid > .grid-cell:first-of-type {
	background-image: url(../img/logo/cosmos.webp);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 35px;
}
ul.list.manage-wallets > li.stellar .grid > .grid-cell:first-of-type {
	background-image: url(../img/logo/stellar-white.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 35px;
}

.collateral-deposit-image {
	width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	display: none;
}

/* ==========================================================================
	Legend
========================================================================== */

.legend > .grid-cell:nth-child(1) {
	margin-right: 35px;
}
.legend label {
	margin-bottom: 10px;
	display: block;
}
.legend label::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	margin-right: 10px;
	margin-bottom: -4px;
	/*box-shadow: 0px 10px 20px 0px rgba(1, 0, 42, 0.25);*/
}

/* Deposited / Borrowed */

.legend > .grid-cell:nth-child(1) label::before {
	background-color: #2ca9b7;
	/*box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.15);*/
	background-image: linear-gradient(0deg, rgb(39,153,166) 0%, rgb(46,181,196) 100%);
	box-shadow: 0px 10px 10px 0px rgba(12, 42, 77, 0.25);
}

/* Available */

.legend > .grid-cell:nth-child(2) label::before {
	background-color: #03334f;
	/*box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;*/
}

/* ==========================================================================
	Slider
========================================================================== */

.noUi-target,
.noUi-target * {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-user-select: none;
	-ms-touch-action: none;
	touch-action: none;
	-ms-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.noUi-target {
	position: relative;
}
.noUi-base,
.noUi-connects {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

/* Wrapper for all connect elements. */

.noUi-connects {
	overflow: hidden;
	z-index: 0;
}
.noUi-connect,
.noUi-origin {
	will-change: transform;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	-ms-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-webkit-transform-style: preserve-3d;
	transform-origin: 0 0;
	transform-style: flat;
}
.noUi-connect {
	height: 100%;
	width: 100%;
}
.noUi-origin {
	height: 10%;
	width: 10%;
}

/* Offset direction */

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
	left: 0;
	right: auto;
}

/* Give origins 0 height/width so they don't interfere with clicking the connect elements. */

.noUi-vertical .noUi-origin {
	width: 0;
}
.noUi-horizontal .noUi-origin {
	height: 0;
}
.noUi-handle {
	backface-visibility: hidden;
	position: absolute;
	transition: opacity 0.3s ease;
}
.noUi-touch-area {
	height: 100%;
	width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
	transition: transform 0.3s;
}
.noUi-state-drag * {
	cursor: inherit !important;
}

/* Slider size and handle placement */

.noUi-horizontal {
	height: 5px;
	transition: height 0.3s ease;
}
.noUi-horizontal .noUi-handle {
	width: 20px;
	height: 20px;
	right: -10px;
	top: -8px;
	background-color: #03334f;
	border: 3px solid #2ca9b7;
	opacity: 1;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.20);
	transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.2s ease;
}
.noUi-vertical {
	width: 18px;
}
.noUi-vertical .noUi-handle {
	width: 28px;
	height: 34px;
	right: -6px;
	top: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
	left: -17px;
	right: auto;
}

/* Styling: Giving the connect element a border radius causes issues with using transform: scale */

.noUi-target {
	background: #03334f;
	border-radius: 5px;
	/*box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;*/
}
.noUi-connects {
	border-radius: 5px;
}
.noUi-connect {
	background-image: linear-gradient(0deg, rgb(39,153,166) 0%, rgb(46,181,196) 100%);
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.1);
}

/* Handles and cursors */

.noUi-draggable {
	cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
	cursor: ns-resize;
}
.noUi-handle {
	border: 1px solid #D9D9D9;
	border-radius: 100px;
	background: #FFF;
	cursor: pointer;
}
.noUi-active {
	background-color: #036975 !important;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Handle stripes */

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
	width: 14px;
	height: 1px;
	left: 6px;
	top: 14px;
}
.noUi-vertical .noUi-handle:after {
	top: 17px;
}

/* Disabled state */

.panel [disabled].noUi-horizontal{
	background: #144a68;
}
.panel-parent [disabled].noUi-horizontal {
	background: #03334f;
}
[disabled] .noUi-handle {
	opacity: 0;
	cursor: default;
	transition: opacity 0.3s ease;
}
[disabled].noUi-horizontal {
	height: 15px;
	transition: height 0.3s ease;
}

/* Base */

.noUi-pips,
.noUi-pips * {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.noUi-pips {
	position: absolute;
	color: #999;
}

/* Values */

.noUi-value {
	position: absolute;
	white-space: nowrap;
	text-align: center;
}
.noUi-value-sub {
	color: #ccc;
	font-size: 10px;
}

/* Markings */

.noUi-marker {
	position: absolute;
	background: #CCC;
}
.noUi-marker-sub {
	background: #AAA;
}
.noUi-marker-large {
	background: #AAA;
}

/* Horizontal layout */

.noUi-pips-horizontal {
	padding: 10px 0;
	height: 80px;
	top: 100%;
	left: 0;
	width: 100%;
}
.noUi-value-horizontal {
	transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
	transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
	margin-left: -1px;
	width: 2px;
	height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
	height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
	height: 15px;
}

/* Vertical layout */

.noUi-pips-vertical {
	padding: 0 10px;
	height: 100%;
	top: 0;
	left: 100%;
}
.noUi-value-vertical {
	transform: translate(0, -50%);
	padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
	transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
	width: 5px;
	height: 2px;
	margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
	width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
	width: 15px;
}
.noUi-tooltip {
	display: block;
	position: absolute;
	border: 2px solid #2ca9b7;
	border-radius: 10px;
	background: #0b284c;
	color: #ffffff;
	padding: 15px;
	text-align: center;
	white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	left: 50%;
	bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	top: 50%;
	right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
	-webkit-transform: translate(50%, 0);
	transform: translate(50%, 0);
	left: auto;
	bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
	-webkit-transform: translate(0, -18px);
	transform: translate(0, -18px);
	top: auto;
	right: 28px;
}
.noUi-tooltip {
	display: none;
}
.noUi-active .noUi-tooltip {
	display: block;
}

/* ==========================================================================
	Modules NEW
========================================================================== */

/*
*
* Modals
*
*/
#modal-collateral-confirm .modal-content {
	background-image: url(../img/feature/collateral-background.png);
	background-size: cover;
	background-repeat: no-repeat;
}
#modal-loan-confirm .modal-content {
	background-image: url(../img/feature/background-loop-static.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center -53px;
}
#modal-collateral-confirm .graphic-collateral {
	position: relative;
	margin-top: -5px;
	z-index: -1;
}
#modal-loan-confirm .graphic-loan {
	position: relative;
}
#modal-collateral-confirm .modal-content,
#modal-loan-confirm .modal-content,
#modal-supply-confirm .modal-content,
#modal-borrow-confirm .modal-content {
	max-width: 90%;
	z-index: 9;
}
#modal-collateral-confirm .modal-actions {
	border-top: none;
	padding-top: 0;
}
#modal-collateral-confirm .graphic-collateral .collateral-asset-image {
	position: absolute;
	width: 80px;
	height: 80px;
	left: calc(50% - 40px);
	z-index: 9;
	margin-top: 20px;
	background-size: contain;
	background-repeat: no-repeat;
}
#modal-loan-confirm .graphic-loan .loan-asset-image {
	width: 100px;
	height: 100px;
	margin-top: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
#modal-collateral-confirm .graphic-collateral .collateral-asset-image::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(
		to top,
		rgba(146,253,171,0.75) 10%,
		rgba(146,253,171,0) 50%
	);
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
}
#modal-collateral-confirm .graphic-collateral .collateral-asset-image.icx::after {
	scale: 0.8;
}
.graphic-collateral .collateral-asset-image {
	background-image: url(../img/logo/default.png);
}
.graphic-loan .loan-asset-image {
	background-image: url(../img/logo/bnusd.svg);
}
.graphic-collateral .collateral-blockchain-image {
	position: absolute;
	width: 30px;
	height: 30px;
	right: 0;
	z-index: 9;
	margin-top: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(../img/logo/default.png);
	bottom: 0;
}
.graphic-loan .loan-blockchain-image {
	position: absolute;
	width: 30px;
	height: 30px;
	right: 0;
	z-index: 9;
	margin-top: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(../img/logo/default.png);
	bottom: 0;
}
.graphic-collateral .collateral-blockchain-image::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(
		to top,
		rgba(146,253,171,0.75) 10%,
		rgba(146,253,171,0) 50%
	);
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
}
.graphic-collateral .collateral-blockchain-image.icon::after {
	scale: 0.8;
}
#modal-collateral-confirm .graphic-collateral img {
	width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -50px;
}
.graphic-collateral::after {
	content: "";
	position: absolute;
	top: 0; left: 30%; right: 0; bottom: 0;
	background: linear-gradient(
		to bottom,
		rgba(12,42,77,1) 10%,
		rgba(12,42,77,0) 50%
	);
	width: 40%;
}
#modal-collateral-confirm .grid.comparison,
#modal-loan-confirm .grid.comparison,
#modal-swap-confirm .grid.comparison,
#modal-supply-confirm .grid.comparison,
#modal-borrow-confirm .grid.comparison {
	background-color: #144a68;
	padding: 15px 0;
	border-radius: 15px;
	z-index: 9;
	position: relative;
	background-image: linear-gradient(155deg, rgb(32,121,143) 0%, rgb(20,74,104) 100%);
	border-top: 1px solid #2c89a2;
}

/*
*
* Wallet
*
*/

#dynamic-list-wallet {
	padding-bottom: 5px;
}
.dropdown-content.wallet::after {
	right: 21px;
}
.dropdown-content.activity::after {
	right: 260px;
}
.wallet .wallet-onboarding,
#collateral .asset-onboarding,
.dropdown-content.activity .activity-onboarding {
	margin-top: 50px;
	margin-bottom: 50px;
}
.wallet .list-header,
.collateral-blockchain-selector .list-header {
	position: absolute;
	width: 100%;
	background-color: #0c2a4d;
	z-index: 2;
	padding-bottom: 5px;
	margin-top: -10px;
}
.wallet .search,
.collateral-blockchain-selector .search {
	margin-top: 15px;
	margin-bottom: 25px;
}
.collateral-blockchain-selector .search {
	margin-top: 0;
}
.dropdown-content.wallet,
.dropdown-content.activity {
	pointer-events: none;
	width: 400px;
	max-width: 400px;
	right: 0;
	border: 1px solid #125a66;
	border-radius: 25px;
	z-index: -1;
}
.dropdown-content.wallet.active,
.dropdown-content.activity.active {
	z-index: 9;
}
.list-scrollable {
	max-height: 350px;
	overflow-y: auto;
	border-radius: 10px;
}
.wallet .floating-container {
	width: 100%;
	z-index: 2;
}

/*
*
* Wallet new styles
*
*/

#wallet-container {
	position: relative;
}
.dropdown-content.wallet {
	background-color: #0c2a4d;
}
.dropdown-content.wallet h2,
.dropdown-content.wallet h3,
.dropdown-content.wallet .search,
.dropdown-content.wallet .list-scrollable {
	position: relative;
	z-index: 3;
}
.dropdown-content.wallet::before,
.dropdown-content.wallet::after,
.dropdown-content.activity::before,
.dropdown-content.activity::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 25px;
}
.dropdown-content.wallet .search.new {
	margin-bottom: 15px;
	background-image: url("../img/icon/search1.svg"), linear-gradient(180deg, rgb(10, 37, 69) 0%, rgb(14, 50, 81) 100%) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-size: 18px, cover !important;
	background-position: 15px 11px, center !important;
}
.dropdown-content.wallet .list-header {
	background-color: initial;
}
.wallet .floating-container {
	width: 100%;
	z-index: 2;
	position: relative;
}
.dropdown-content.wallet::before,
.dropdown-content.activity::before {
	background-image: url("../img/feature/background-vibe-dynamic.svg");
	background-size: 370%;
	background-position: center 70%;
}
.dropdown-content.wallet::before,
.dropdown-content.activity::before {
	background-image: url("../img/feature/background-flow-dynamic.svg");
	opacity: .35;
	z-index: 0;
	pointer-events: none;
	background-size: 300%;
	background-position: center 77.7%;
	background-repeat: no-repeat;
}
.dropdown-content.wallet::before,
.dropdown-content.activity::before {
	background-image: url("../img/feature/background-synergy-dynamic.svg");
	background-size: 300%;
	background-position: center -490px;
}
.dropdown-content.wallet::after,
.dropdown-content.activity::after {
	background: linear-gradient(0deg, rgba(12,42,77,1) 0%, rgba(12,42,77,0) 50%),
				linear-gradient(171deg, rgba(44,169,183,.37) 0%, rgba(44,169,183,0) 50%);
	z-index: 1;
	border: initial;
	height: initial;
	width: initial;
	border-radius: initial;
	pointer-events: initial;
	margin-right: initial;
	margin-left: initial;
	margin-top: initial;
	transform: initial;
	border-radius: 25px;
}
.dropdown-content.wallet .list-scrollable,
.dropdown-content.activity .list-scrollable {
	max-height: 350px;
	overflow-y: scroll;
	background-color: #0c2a4d;
	border-radius: 20px;
	padding: 15px;
	padding-top: 0;
	margin-bottom: 0;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
	background-image: url("../img/icon/search2.svg"), linear-gradient(0deg, rgb(10, 37, 69) 0%, rgb(14, 50, 81) 100%);
}



/* Make the wallet list header sticky inside the dropdown scroller */
.dropdown-content.wallet .list-scrollable {
  /* This is the scrolling container */
  overflow-y: auto;
  position: relative; /* establish containing block for z-index layering */
}

/* Override the old absolute positioning and make the header sticky */
.dropdown-content.wallet .list-scrollable .list-header {
  position: -webkit-sticky; /* Safari/iOS */
  position: sticky;
  top: 0;                   /* stick to the top of the scroll area */
  z-index: 4;               /* above list items and the background overlays */
  background: #0c2a4d;      /* give it a solid backdrop so items don't show through */
  margin-top: 0;            /* undo previous hacky offsets */
  padding-bottom: 5px;
}

.dropdown-content.wallet .list-scrollable .list-header {
  position: sticky !important;
  top: 0;
}

/* Stretch the sticky header across the padded scroll area */
.dropdown-content.wallet .list-scrollable .list-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;                      /* cancel the container's top padding */
  margin: 0 -15px 10px;            /* extend left/right over the container padding */
  margin-bottom: 0;
  padding: 10px 15px 5px;          /* restore inner spacing */
  width: auto;                     /* no fixed width needed */
  z-index: 4;
  background-image: linear-gradient(0deg, rgb(10,37,69) 0%, rgb(14,50,81) 100%);
  box-shadow: 0 6px 10px rgba(1, 0, 42, 0.25); /* subtle separation while scrolling */
}

/*
*
* Activity
*
*/

.dropdown-content.activity .list-item > .grid-cell:nth-of-type(2) {
	max-width: 95px;
}
.dropdown-content.activity .list .list-item:not(.parent):not(.secondary) .grid-cell:nth-of-type(1)::before {
	display: none;
}
.dropdown-content.activity .list.activity {
	z-index: 9;
}
.dropdown-content.activity .list.activity .list-scrollable {
	margin-top: 15px;
}
.dropdown-content.activity .activity-onboarding:not(.hide) + .list-scrollable {
	display: none;
}
.dot.activity.hide {
	display: none !important;
}

/*
*
* Lists
*
*/

/* List: defaults */

.list .list-header {
	text-align: left;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 3px;
	color: #d5d7db;
}
.list .list-item {
	padding-top: 20px;
	padding-bottom: 20px;
	position: relative;
	transition: color 0.3s ease;
}
.list .list-item:hover {
	color: #2ca9b7;
	cursor: pointer;
	transition: color 0.2s ease;
}
.list .list-item + .list-item {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
#markets-list-your .list .list-item + .list-item,
#markets-list-all .list .list-item + .list-item {
	border-top: none;
}
.list .list-item > .grid-cell:first-of-type {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
}

/* List: Activity */

.list.activity .list-item > .grid-cell:first-of-type,
.list.activity .list-header > .grid-cell:nth-of-type(2) {
	padding-left: 35px;
}

/* List: blockchains */

.list.blockchains .list-header > .grid-cell:last-of-type,
.list.blockchains .list-item > .grid-cell:last-of-type {
	text-align: right;
}
.list.blockchains .list-item > .grid-cell:first-of-type {
	padding-left: 42px;
}

/* List: wallet */

.list.wallet .list-header > .grid-cell:nth-of-type(2),
.list.wallet .list-item > .grid-cell:nth-of-type(2),
.list.wallet .list-header > .grid-cell:last-of-type,
.list.wallet .list-item > .grid-cell:last-of-type {
	text-align: right;
}
.list.wallet .list-item > .grid-cell:first-of-type,
.list.wallet .list-header > .grid-cell:nth-of-type(2) {
	padding-left: 40px;
}
.list.wallet .list-item.parent > .grid-cell:nth-of-type(2),
.list.wallet .list-item.parent > .grid-cell:nth-of-type(3) {
	font-size: 12px;
	color: rgba(255,255,255,0.75);
}

#slider-loan:not(.noUi-horizontal) {
	height: 15px;
	background: #03334f;
	border-radius: 5px;
	box-shadow: 0px 10px 10px 0px rgba(12, 42, 77, 0.25);
}

/* List: collateral assets */

.list.collateral-assets .list-header > .grid-cell:nth-of-type(2),
.list.collateral-assets .list-item > .grid-cell:nth-of-type(2),
.list.collateral-assets .list-header > .grid-cell:last-of-type,
.list.collateral-assets .list-item > .grid-cell:last-of-type {
	text-align: right;
}
.list.collateral-assets .list-item > .grid-cell:first-of-type,
.list.collateral-assets .list-header > .grid-cell:nth-of-type(2) {
	padding-left: 35px;
}
.list.collateral-assets .list-item.parent > .grid-cell:nth-of-type(2),
.list.collateral-assets .list-item.parent > .grid-cell:nth-of-type(3) {
	font-size: 12px;
	color: rgba(255,255,255,0.75);
}
.list.collateral-assets .list-header > .grid-cell:last-of-type,
.list.collateral-assets .list-item > .grid-cell:last-of-type {
	max-width: 85px;
}
.list.collateral-assets .list-item.secondary > .grid-cell:last-of-type {
	max-width: 70px;
}
#dynamic-list-collateral-assets-all.list.collateral-assets .list-item.secondary > .grid-cell:last-of-type {
	margin-left: 15px;
}

/* List: icons */

.list.wallet .list-item::before,
.list.collateral-assets .list-item::before,
.list.blockchains .list-item::before,
.list.activity .list-item::before {
	content: '';
	position: absolute;
	height: 25px;
	width: 25px;
	border-radius: 100%;
	background-image: url(../img/logo/default.png);
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-3px);
}
.list.blockchains .list-item::before {
	border-radius: 5px;
}
.list.blockchains .list-item::before {
	height: 45px;
	width: 45px;
	transform: translateY(-10px) translateX(-6px);
}
.list.blockchains .list-item.sui::before {
	background-image: url(../img/logo/sui-blockchain.png);
}
#markets .markets .blockchain .list .list-item > .grid-cell:first-of-type {
	padding-left: 45px !important;
}

/* List: icons activity */

.list.activity .list-item::before {
	transform: translateY(7px);
}
.list.activity .list-item > div:nth-child(1) > p:nth-child(1)::before {
	content: '';
	display: block;
	height: 16px;
	width: 16px;
	background-image: url(../img/logo/default.png);
	background-size: contain;
	background-color: #0c2a4d;
	position: absolute;
	margin-top: 21px;
	left: 14px;
	border-radius: 7px;
	outline: 1px solid #0c2a4d;
}
.list.blockchains .list-item:not(.parent):not(.secondary) .grid-cell:nth-of-type(1)::before {
	display: none;
}
.list .list-item.secondary::before {
	height: 20px;
	width: 20px;
	transform: translateY(0px);
}
.list .list-item.secondary .grid-cell:nth-of-type(1)::before {
	content: '';
	display: block;
	height: 16px;
	width: 16px;
	background-image: url(../img/logo/default.png);
	background-size: contain;
	background-color: #144a68;
	position: absolute;
	margin-top: 10px;
	left: 11px;
	border-radius: 7px;
	outline: 1px solid #144a68;
}
.swap-from-parent .variable-swap-from-asset::before,
.swap-to-parent .variable-swap-to-asset::before {
	content: '';
	display: block;
	height: 25px;
	width: 25px;
	background-image: url(../img/logo/default.png);
	background-size: contain;
	background-color: #144a68;
	position: absolute;
	margin-top: 0;
	left: 17px;
	border-radius: 100%;
	outline: 1px solid #144a68;
}
.asset.swap-from, .asset.swap-to {
	background-image: none !important;
}
.list .list-item:not(.parent):not(.secondary) .grid-cell:nth-of-type(1)::before {
	content: '';
	display: block;
	height: 20px;
	width: 20px;
	background-image: url(../img/logo/default.png);
	background-size: contain;
	background-color: #0c2a4d;
	position: absolute;
	margin-top: 8px;
	left: 13px;
	border-radius: 100%;
	outline: none;
}

#swap-to-list-assets:has(.list-item.secondary.compact)
  .list .list-item:not(.parent):not(.secondary)
  .grid-cell:nth-of-type(1)::before {
  display: none;
}
#swap-from-list-assets:has(.list-item.secondary.compact)
  .list .list-item:not(.parent):not(.secondary)
  .grid-cell:nth-of-type(1)::before {
  display: none;
}
#swap-from-list-assets .list .list-item.secondary.compact ul li.sui-chain,
#swap-to-list-assets .list .list-item.secondary.compact ul li.sui-chain {
	background-image: url(../img/logo/sui-blockchain.png) !important;
}

.list .list-item.parent + .list-item.secondary .grid-cell:nth-of-type(1)::after,
.list .list-item.secondary.compact .grid-cell:nth-of-type(1)::after {
	content: '';
	top: 0%;
	left: 25px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #144a68;
	border-width: 12px;
	transform: rotate(0.5turn);
	margin-top: -33px;
}
.list .list-item:last-child:not(.parent):not(.secondary) {
    padding-bottom: 0;
}
.list .list-item.parent:hover {
	cursor: default;
	color: #ffffff;
}
.list .list-item:hover {
	color: #2ca9b7;
	cursor: pointer;
	transition: color 0.2s ease;
}
.list .list-item.parent + .list-item.secondary {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.list .list-item.secondary .grid-cell:nth-of-type(1) {
	font-family: 'tex-gyre-adventor-regular';
}
.list .list-item.secondary.last {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-bottom: 25px;
}
.list .list-item.secondary.last.compact {
	border-radius: 10px;
}
#dynamic-list-swap-from-assets .list-header > .grid-cell:last-of-type,
#dynamic-list-swap-to-assets .list-header > .grid-cell:last-of-type {
	max-width: initial;
}
.list .list-item.secondary.last + .list-item {
	/*border-top: none;*/
}
.list .list-item.secondary {
	background-color: #144a68;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	border: none;
}
/* Hack: Keep ICON uppercase */
.list .list-item.secondary.icon .grid-cell:nth-of-type(1),
.list.blockchains .list-item.icon .grid-cell:nth-of-type(1) {
	text-transform: uppercase;
}

/* List: logos */

.list .list-item.bnusd::before {
	background-image: url(../img/logo/bnusd.png);
}
/* Hack: Keep ICON visible */
.list .list-item.secondary.icon .grid-cell:nth-of-type(1)::before,
.list .list-item.icon:not(.parent):not(.secondary) .grid-cell:nth-of-type(1)::before,
.list.activity .list-item.icon > div:nth-child(1) > p:nth-child(1)::before {
	border-radius: initial;
	border-top-left-radius: 7px;
}

/* Activity list: destination logos */



/* The little pill that shows the destination chain + asset */
.list .list-item .destination-swap {
  display: inline-flex;
  position: absolute;
  left: 0;
}

/* The two small icons: before = chain, after = asset */
.list .list-item .destination-swap::before,
.list .list-item .destination-swap::after {
  content: "";
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.list .list-item .destination-swap::before {
	width: 14px;
	height: 14px;
	position: absolute;
	left: 14px;
	top: 55px;
	background-color: #0c2a4d;
	border-radius: 7px;
	outline: 2px solid #0c2a4d;
}
.list .list-item .destination-swap::after {
	width: 25px;
	height: 25px;
	position: absolute;
	left: 0;
	top: 40px;
}
.list.activity .list-item.swap::before {
	top: 5px;
}
.list.activity .list-item.swap > div:nth-child(1) > p:nth-child(1)::before {
	transform: translateY(-15px);
}
.list.activity .list-item.swap > div:nth-child(1) > p:nth-child(1)::after {
	display: block;
	position: absolute;
	content: "";
	width: 9px;
	height: 14px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../img/icon/arrow-down-1.svg);
	left: 8px;
	margin-top: 2px;
}

/* ==========================================================================
	Home: Specific styles NEW
========================================================================== */

/*
*
* Collateral states
*
*/

/*
* Collateral: Signed out
*/

/*  */
#collateral.state-signed-out {

}

/* Collateral: Signed in */

/* Signed in */
#collateral.state-signed-in {
	
}

/* Signed in adjust state */
#collateral.state-signed-in.state-adjust {
	
}


.asset-selector .variable-collateral-asset.asset-image::before {
	content: '';
	display: block;
	height: 18px;
	width: 18px;
	background-image: url(../img/logo/default.png);
	display: inline-block;
	margin-right: 5px;
	background-repeat: no-repeat;
	transform: translateY(2px);
	background-size: contain;
}
.collateral-blockchain-selector .variable-collateral-blockchain.asset-image::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image::before {
	content: '';
	display: block;
	height: 25px;
	width: 25px;
	background-image: url(../img/logo/default.png);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	margin-left: 0px;
	transform: translateY(9px);
	margin-right: 2px;
	border-radius: 5px;
}

/* SUI fix (Hack) */

.collateral-blockchain-selector .variable-collateral-blockchain.asset-image.sui::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image.sui::before {
	background-image: url(../img/logo/sui-blockchain.png);
}

/*
*
* Collateral markup
*
*/

.grid-cell.collateral-actions {
	max-width: 175px;
}
.collateral.tooltip .tooltip-content {
	bottom: 75px;
	min-width: 120px;
	text-align: center;
	left: 63px;
	padding: 10px;
}

/*
* Collateral: onboarding
*/

.collateral-onboarding .message,
.collateral-no-asset .message,
.loan-onboarding .message {
	margin-top: 65px;
	margin-bottom: 50px;
	text-align: center;
}

/*
* Collateral: list
*/

#toggle-collateral {
	margin-bottom: 15px;
}
.dropdown-content.asset-selector::after {
	right: initial;
	left: 168px;
	display: none;
}
.dropdown-content.collateral-blockchain-selector::after {
	right: initial;
	left: 125px;
	display: none;
}
.list.collateral-assets .label {
	font-size: 12px;
}
.list.collateral-assets .list-header > .grid-cell:nth-of-type(2),
.list.collateral-assets .list-item > .grid-cell:nth-of-type(2) {

}
#toggle-collateral.hide {
	display: none;
}
#toggle-collateral li {

}

/*
*
* Loan markup
*
*/

.loan.tooltip .tooltip-content {
	bottom: 75px;
	min-width: 140px;
	text-align: center;
	left: 85px;
	padding: 10px;
}

/*
* Position details
*/

#slider-risk .noUi-connect {
	background-image: none;
	background-color: #2ca9b7;
	transition: background-color 0.3s ease;
}
#slider-risk.alert .noUi-connect {
	/*background-image: linear-gradient(0deg, #fb6a6a 0%, #fb6a6a 100%);*/
	background-image: none;
	background-color: #fb6a6a;
	transition: background-color 0.2s ease;
}

/* ==========================================================================
	Home: Specific styles
========================================================================== */

.variable-asset-price,
.variable-threshold-locked,
.variable-collateral-asset-price {
	transition: color 0.3s ease;
}
.variable-asset-price.alert,
.variable-threshold-locked.alert,
.variable-collateral-asset-price.alert {
	color: #fb6a6a !important;
	transition: color 0.2s ease;
}
header h1 {
	transform: translateY(-5px);
}
.demo-tag-container {
	position: absolute;
	top: -5px;
	left: 110px;
}
#trade .demo-tag-container {
	left: 100px;
}
#markets .demo-tag-container {
	left: 140px;
}
.demo-tag {
	position: relative;
	display: inline-block;
	font-size: 12px;
	background-color: #0c2a4d;
	border-radius: 8px;
	margin-left: 7px;
	padding: 3px 10px;
}
.demo-tag::before,
.demo-tag::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(90deg,#2ca9b7,#144a68,#0c2a4d,#01002A,#2ca9b7,#144a68,#0c2a4d,#01002A,#2ca9b7);
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    border-radius: 10px;
    opacity: 1;
    animation: animate 60s linear infinite;
}
.demo-tag::after {
    filter: blur(10px);
}
@keyframes animate {
    0%
    {
        background-position: 0 0;
    }
    50%
    {
        background-position: 300% 0;
    }
    100%
    {
        background-position: 0 0;
    }
}

/*
.modal-content {
	position: relative;
	background-color: #0c2a4d;
}
.modal-content::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(90deg,#2ca9b7,#144a68,#0c2a4d,#01002A,#2ca9b7,#144a68,#0c2a4d,#01002A,#2ca9b7);
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    border-radius: 10px;
    opacity: 0.25;
    animation: animate 50s linear infinite;
}
.modal-content::after {
    filter: blur(10px);
}
*/

/* Sign in message */

#message-home-sign-in {
	margin-top: 75px;
}

/* Collateral / Loan */

#collateral.panel,
#loan.panel {
	margin-bottom: 95px;
	/*box-shadow: 0px 20px 25px 0px rgba(1, 0, 42, 0.25);*/
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.5);
	padding-bottom: 30px;
}
#collateral.panel h2,
#loan.panel h2 {
	margin-bottom: 0;
}
#slider-collateral,
#slider-loan {
	margin-top: 35px;
	margin-bottom: 25px;
}
#collateral input[type="text"].active,
#loan input[type="text"].active {
	text-align: right;
}
.has-signed-in #collateral + .panel-footer,
.has-signed-in #loan + .panel-footer {
	top: 210px;
}
#collateral + .panel-footer,
#loan + .panel-footer {
	top: 210px;
}

/* Collateral */

#collateral span.asset-selector {
	font-size: 18px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	color: #2fccdc;
}
#collateral .asset-selector.dropdown-content {
	max-width: 750px;
	margin-right: 35px;
	width: 415px;
	margin-top: 10px;
	max-height: 500px;
	overflow-y: scroll;
	z-index: 9;
}
.asset-selector.avax.dropdown-content::after {
	left: 209px;
}
.asset-selector.eth.dropdown-content::after {
	right: 206px;
}
.asset-selector.icx.dropdown-content::after {
	left: 191px;
}

/* Collateral footer */

#collateral {
	z-index: 4;
}
#collateral-inputs .slider,
.loan-inputs .slider {
	margin-top: 35px;
	margin-bottom: 25px;
}

/* Collateral blockchain selector */

#collateral + .panel-footer + .collateral-blockchain-selector {
	top: 250px;
	left: 35px;
	width: 415px;
}
.collateral-actions.hide {
	display: none !important;
}

/* Loan footer */

#loan {
	z-index: 2;
}
#loan + .panel-footer {
	right: 0;
}
#collateral + .panel-footer,
#loan + .panel-footer {
	font-size: 14px;
}

/* Loan blockchain selector */

#loan + .panel-footer + .loan-blockchain-selector {
	top: 250px;
	left: initial;
	right: 35px;
	width: 415px;
}
.loan-blockchain-selector.dropdown-content::after {
	right: 223px;
	display: none;
}

/* Locked / Used indicator */

#indicator-locked-container,
#indicator-used-container,
.indicator-locked-container,
.indicator-available-container {
	position: relative;
}
.indicator-padding .indicator-locked-container,
.indicator-padding .indicator-available-container {
	margin-top: 25px;
}
#indicator-locked,
.indicator-locked,
.indicator-available,
#indicator-used {
	position: absolute;
	width: 1px;
	height: 20px;
	margin-top: -5px;
	background-color: #ffffff;
	opacity: 0;
	z-index: 2;
	pointer-events: none;
	transition: height 0.2s ease, opacity 0.2s ease;
}
#indicator-used {
	margin-top: -5px;
}
.adjust #indicator-locked,
.adjust .indicator-locked,
.adjust .indicator-available,
.adjust #indicator-used {
	height: 10px;
	transition: height 0.2s ease;
}
#indicator-locked .label,
.indicator-locked .label,
.indicator-available .label,
#indicator-used .label {
	margin-top: -20px;
	margin-left: -23px;
}
.indicator-available .label {
	margin-left: -39px;
}
#indicator-used .label {
	margin-left: -40px;
}
#indicator-locked.active,
.indicator-locked.active,
.indicator-available.active,
#indicator-used.active {
	opacity: 1;
	transition: opacity 0.3s ease;
}
#message-loan-amount {
	min-width: 165px;
	bottom: -70px;
	left: 55px;
}
#message-loan-amount::after {
	content: '';
	position: absolute;
	left: 50%;
	top: initial;
	bottom: -24px;
	border: solid transparent;
	height: 0;
	width: 0;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	transform: initial;;
	border-width: 12px;
	margin-left: -12px;
	left: 50%;
	top: -25px;
	border-bottom-color: #2ca9b7;
	border-top-color: transparent;
}

/* Locked */

#loan .asset-selector {
	font-size: 18px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
}
#collateral .onboarding-message,
#loan .onboarding-message {
	margin-top: 65px;
	margin-bottom: 50px;
	text-align: center;
}

/* Overide styles (For default view) */

#collateral:not(.adjust) input[type="text"],
#loan:not(.adjust) input[type="text"] {
	text-align: left;
	padding-left: 30px;
	font-size: 18px;
	border: 2px solid transparent;
	background-color: transparent;
	box-shadow: none;
}
#collateral:not(.adjust) input[type="text"]:disabled,
#loan:not(.adjust) input[type="text"]:disabled {
	-webkit-text-fill-color: #ffffff;
	opacity: 1;
}
#collateral:not(.adjust).panel [disabled].noUi-horizontal,
#loan:not(.adjust).panel [disabled].noUi-horizontal {
	background: #03334f;
	box-shadow: 0px 10px 10px 0px rgba(12, 42, 77, 0.25);
}
#collateral .legend label,
#loan .legend label {
	font-size: 14px;
	color: rgba(255,255,255,0.75);
	transition: margin-bottom 0.3s ease;
}
#collateral:not(.adjust) .legend label,
#loan:not(.adjust) .legend label {
	margin-bottom: 0;
	transition: margin-bottom 0.3s ease;
}
#collateral .collateral-default-actions,
#loan .loan-default-actions {
	display: none;
}
#collateral:not(.adjust) .collateral-adjust-actions,
#loan:not(.adjust) .loan-adjust-actions {
	display: none;
}
#collateral:not(.adjust) .collateral-default-actions,
#loan:not(.adjust) .loan-default-actions {
	display: block;
}

#collateral.adjust .adjust-default,
#loan.adjust .adjust-default {
	display: none;
}
.adjust-active {
	display: none;
}
#collateral.adjust .adjust-active,
#loan.adjust .adjust-active {
	display: block;
}


/*
*
* Position details
*
*/

/* Parent panel */

#position-details .panel-parent {
	max-width: 330px;
	/*box-shadow: 20px 0px 25px 0px rgba(1, 0, 42, 0.25);*/
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
}
#position-details .panel-parent hr {
	margin: 20px 0;
}
#position-details .panel-parent .metadata {
	margin: 0;
}
#position-details .panel-parent .metadata dd {
	font-size: 18px;
}
#position-details .panel-parent .separator {
	max-width: 1px;
}
#position-details .panel-parent .separator::before {
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	margin-left: -35px;
	background-color: rgba(255, 255, 255, 0.15);
}
#position-details .panel-parent p:last-of-type {
	margin-top: 5px;
}

/* Risk / Rebalancing */

#risk-rebalancing h3 {
	display: inline-block;
}
#risk-rebalancing .tooltip-item::after {
	margin-top: 5px;
}
#risk-rebalancing .dropdown.time-selector {
	margin-left: 15px;
}
#risk-rebalancing #loan-rewards {
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	padding-left: 35px;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(1) {
	margin-bottom: 3px;
	margin-left: 105px;
	width: 190px;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(1)::after {
	left: 60%;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(2) {
	margin-left: 324px;
	margin-bottom: 3px;
	min-width: 220px;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(2)::after {
	left: 61%;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(3) {
	margin-bottom: -180px;
	margin-left: -170px;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(4) {
	margin-left: 370px;
	margin-bottom: 3px;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(4)::after {
	left: 37%;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(3)::after {
	left: 50%;
	top: -25px;
	border-bottom-color: #2ca9b7;
	border-top-color: transparent;
}
#risk-rebalancing #tooltip-rebalancing::after {
	margin-left: -12px;
	margin-top: 6px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content {
	width: 340px;
	left: -176px;
	margin-bottom: 6px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(2) {
	bottom: -140px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(2)::after {
	content: '';
	position: absolute;
	left: 19%;
	top: -24px;
	border: solid transparent;
	height: 0;
	width: 0;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	transform: initial;;
	border-width: 12px;
	margin-left: -12px;
	transform: rotate(0.5turn);
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(2)::before {
	content: '';
	position: absolute;
	left: 56%;
	top: -24px;
	border: solid transparent;
	height: 0;
	width: 0;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	transform: initial;;
	border-width: 12px;
	margin-left: -12px;
	transform: rotate(0.5turn);
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(1) p.heading {
	max-width: 320px;
	text-align: center;
	margin: auto;
	font-size: 16px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(1) {
	max-width: 435px;
	width: 435px;
	left: -223px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(1) .graphical-options {
	margin-top: 35px;
	margin-bottom: 25px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(1) .graphical-options img {
	width: 175px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(1) .graphical-options .text-bold {
	margin-top: 10px;
	margin-bottom: 5px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(1) .graphical-options > .grid-cell {
    margin-right: 25px;
    padding-right: 25px;
}
#risk-rebalancing #tooltip-rebalancing.tooltip .tooltip-content:nth-of-type(1) .graphical-options > .grid-cell:last-of-type {
	margin-right: 0;
	padding-right: 0;
}

/* Risk */

.risk {
	height: 17px;
	border-radius: 0;
}
.risk[disabled].noUi-horizontal {
	background: #144a68;
	border-radius: 0;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	/*box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.15);*/
}
.risk[disabled].noUi-horizontal .noUi-connect {
	background-color: #2ca9b7;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	transition: background-color 0.3s ease;
}
.risk[disabled].noUi-horizontal.alert .noUi-connect {
	background-color: #fb6a6a;
	transition: background-color 0.2s ease;
}
.risk-container {
	margin-top: 23px;
	margin-bottom: 20px;
}
.risk-container .limit {
	max-width: 90px;
}
.risk-container .limit span {
	min-width: 95%;
	text-align: center;
	border-radius: 100px;
	padding: 1px 10px;
	font-size: 11px;
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	display: block;
	height: 17px;
	line-height: 14px;
}
.risk-container .limit:first-of-type span {
	background-color: #2ca9b7;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 3px solid #0d2a4d;
}
.risk-container .limit:last-of-type {
	text-align: right;
}
.risk-container .limit:last-of-type span {
	background-color: #fb6a6a;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

/* Risk thresholds */

.threshold {
	position: absolute;
	width: 1px;
	height: 50px;
	margin-top: -35px;
	background-color: #ffffff;
	z-index: 2;
	transition: color 0.3s ease;
}
.threshold::after {
	position: absolute;
	content: '';
	top: 0;
	width: 10px;
	height: 1px;
	margin-left: -10px;
	background-color: #ffffff;
	z-index: 2;
	transition: height 0.3s ease;
}
.threshold .metadata {
	margin-top: -10px;
}
.threshold .metadata dt {
	font-size: 14px;
	color: #ffffff;
	margin-bottom: 0;
}
.threshold .metadata dd {
	font-size: 14px;
	color: rgba(255,255,255,0.75);
}

/* Alert */

.alert {
	color: #fb6a6a !important;
}
.threshold.alert,
.threshold.alert::after  {
	background-color: #fb6a6a;
}

/* Reward threshold */

.threshold.rewards {
	left: 53.2%;
	text-align: right;
	display: none;
}
.threshold.rewards .metadata {
	width: 125px;
	margin-left: -140px;
}
.threshold.liquidated {
	left: 100%;
}
.threshold.rewards.alert .metadata dt,
.threshold.rewards.alert .metadata dd,
.threshold.locked.alert .metadata dt,
.threshold.locked.alert .metadata dd {
	color: #fb6a6a;
}

/* Locked threshold */

.threshold.locked {
	left: 67%;
	text-align: right;
}
.threshold.locked .metadata {
	width: 150px;
	margin-left: -165px;
}

/* Rebalancing */

.rebalancing-container h3 {
	display: inline-block;
	margin-bottom: 15px;
	margin-right: 15px;
}
.rebalancing-container .metadata {
	margin: 0;
}
.rebalancing-container .metadata dt {
	margin-bottom: 0;
	margin-top: 2px;
}
.rebalancing-container .dropdown-content.time-selector {
	padding: 0;
	left: 187px;
	right: initial;
	margin-top: -5px;
}
.rebalancing-container .dropdown-content.time-selector ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}
.rebalancing-container .dropdown-content.time-selector ul li {
	padding: 10px 15px;
	transition: background-color 0.3s ease;
}
.rebalancing-container .dropdown-content.time-selector ul li:first-of-type {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.rebalancing-container .dropdown-content.time-selector ul li:last-of-type {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
.rebalancing-container .dropdown-content.time-selector ul li:hover {
	cursor: pointer;
	background-color: #2ca9b7;
	transition: background-color 0.2s ease;
}

/* Loan interest */

.rebalancing-container .dropdown-content.loan-interest {
	padding: 0;
	left: 47px;
	right: initial;
	margin-top: 12px;
}
.rebalancing-container .dropdown-content.loan-interest ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}
.rebalancing-container .dropdown-content.loan-interest ul li {
	padding: 10px 15px;
	transition: background-color 0.3s ease;
}
.rebalancing-container .dropdown-content.loan-interest ul li:first-of-type {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.rebalancing-container .dropdown-content.loan-interest ul li:last-of-type {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
.rebalancing-container .dropdown-content.loan-interest ul li:hover {
	cursor: pointer;
	background-color: #2ca9b7;
	transition: background-color 0.2s ease;
}

/* Boost rewards */

#tooltip-liquidity-apy {
	transition: opacity 0.3s, transform 0.3s;
}
#tooltip-liquidity-apy.active {
	pointer-events: auto;
	opacity: 1;
	transition: opacity 0.3s, transform 0.3s;
}

/*
*
* Assets
*
*/

.list tbody tr.all td:first-of-type {
	background-image: url(../img/icon/all.svg);
	background-repeat: no-repeat;
	background-position: 4px center;
	background-size: 20px;
}
.list tbody tr.default td:first-of-type {
	background-image: url(../img/logo/default.png);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.usdb td:first-of-type {
	background-image: url(../img/logo/usdb.png);
	background-repeat: no-repeat;
	background-position: 36px center;
	background-size: 29px;
}
.list tbody tr.sicx td:first-of-type {
	background-image: url(../img/logo/sicx.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 25px;
}
.list tbody tr.icon td:first-of-type,
.list tbody tr.icon td:first-of-type,
.list tbody tr.icon td:first-of-type,
.list tbody tr.icx td:first-of-type,
.list tbody tr.icon td:first-of-type {
	background-image: url(../img/logo/icx.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 25px;
}
.list tbody tr.avalanche td:first-of-type,
.list tbody tr.avax td:first-of-type {
	background-image: url(../img/logo/avalanche.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 25px;
}
.list tbody tr.optimism td:first-of-type,
.list tbody tr.op td:first-of-type,
.list tbody tr.optimism.eth td:first-of-type,
.list tbody tr.optimism.bnusd td:first-of-type {
	background-image: url(../img/logo/optimism.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 25px;
}
.list tbody tr.arbitrum td:first-of-type,
.list tbody tr.arb td:first-of-type {
	background-image: url(../img/logo/arbitrum.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 25px;
}
.list tbody tr.base td:first-of-type {
	background-image: url(../img/logo/base.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 25px;
}
.list tbody tr.polygon td:first-of-type {
	background-image: url(../img/logo/polygon.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 36px;
}
.list tbody tr.bnusd td:first-of-type,
.list tbody tr.bnusd.secondary-parent td:first-of-type  {
	background-image: url(../img/logo/bnusd.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 26px;
}
.list tbody tr.usdc td:first-of-type,
.list tbody tr.usdc.secondary-parent td:first-of-type  {
	background-image: url(../img/logo/usdc.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 26px;
}
.list tbody tr.usdt td:first-of-type,
.list tbody tr.usdt.secondary-parent td:first-of-type  {
	background-image: url(../img/logo/usdt.svg);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 26px;
}
.list tbody tr.eth td:first-of-type,
.list tbody tr.ethereum td:first-of-type {
	background-image: url(../img/logo/eth.svg);
	background-repeat: no-repeat;
	background-position: 0px center;
	background-size: 25px;
}
.list tbody tr.baln td:first-of-type {
	background-image: url(../img/logo/baln.svg);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.stability-fund td:first-of-type {
	background-image: url(../img/logo/stability-fund.svg);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.usds td:first-of-type {
	background-image: url(../img/logo/usds.png);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.omm td:first-of-type {
	background-image: url(../img/logo/omm.svg);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.sicx-bnusd td:first-of-type {
	background-image: url(../img/feature/pool-sicx-bnusd.png);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.baln-bnusd td:first-of-type {
	background-image: url(../img/feature/pool-baln-bnusd.png);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.sicx-icx td:first-of-type {
	background-image: url(../img/feature/pool-sicx-icx.png);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.total td:first-of-type {
	background-image: url(../img/feature/pool-total.svg);
	background-repeat: no-repeat;
	background-position: 1px center;
	background-size: 25px;
}
.list tbody tr.separator {
	border-bottom: none;
}
.list tbody tr.separator td {
	padding-top: 0;
	padding-bottom: 0;
}

.list.assets .collateral.avax.secondary-parent.avalanche td:first-of-type::after,
.list.assets .wallet.avax.secondary-parent.avalanche td:first-of-type::after,
.list.assets .collateral.bnusd.secondary-parent.avalanche td:first-of-type::after,
.list.assets .wallet.bnusd.secondary-parent.avalanche td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/avax.svg);
	background-color: #0c2a4d;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #0c2a4d;
}
.list.assets .collateral.bnusd.secondary-parent.ethereum td:first-of-type::after,
.list.assets .wallet.bnusd.secondary-parent.ethereum td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/eth.svg);
	background-color: #0c2a4d;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #0c2a4d;
}
.list.assets .collateral.bnusd.secondary-parent.base td:first-of-type::after,
.list.assets .wallet.bnusd.secondary-parent.base td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/base.svg);
	background-color: #0c2a4d;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #0c2a4d;
}
.list.assets .collateral.bnusd.secondary-parent.optimism td:first-of-type::after,
.list.assets .wallet.bnusd.secondary-parent.optimism td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/optimism.svg);
	background-color: #0c2a4d;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #0c2a4d;
}
.list.assets .collateral.bnusd.secondary-parent.arbitrum td:first-of-type::after,
.list.assets .wallet.bnusd.secondary-parent.arbitrum td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/arbitrum.svg);
	background-color: #0c2a4d;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #0c2a4d;
}
.list.assets .collateral.icx.secondary-parent.icon td:first-of-type::after,
.list.assets .wallet.icx.secondary-parent.icon td:first-of-type::after,
.list.assets .collateral.avax.secondary-parent.icon td:first-of-type::after,
.list.assets .wallet.avax.secondary-parent.icon td:first-of-type::after,
.list.assets .collateral.eth.secondary-parent.icon td:first-of-type::after,
.list.assets .wallet.eth.secondary-parent.icon td:first-of-type::after,
.list.assets .collateral.bnusd.secondary-parent.icon td:first-of-type::after,
.list.assets .wallet.bnusd.secondary-parent.icon td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/icx.svg);
	background-color: #0c2a4d;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #0c2a4d;
}

/*
*
* List: Assets (All collateral)
*
*/

.list.assets.all-collateral .collateral.avax.secondary-parent td:first-of-type::after,
.list.assets.all-collateral .collateral.eth.secondary-parent td:first-of-type::after {
	display: none;
}
.list.assets.all-collateral .collateral.avax.icon.secondary td:first-of-type  {
	border-bottom-left-radius: 10px;
}
.list.assets.all-collateral .collateral.avax.icon.secondary td:last-of-type  {
	border-bottom-right-radius: 10px;
}
.list.assets.all-collateral .collateral.avax.icon.secondary td:first-of-type  {
	border-top-left-radius: 0;
}
.list.assets.all-collateral .collateral.avax.icon.secondary td:last-of-type  {
	border-top-right-radius: 0;
}
.list.assets.all-collateral .collateral.eth.icon.secondary td:first-of-type  {
	border-bottom-left-radius: 0;
}
.list.assets.all-collateral .collateral.eth.icon.secondary td:last-of-type  {
	border-bottom-right-radius: 0;
}

/*
*
* List: Assets (New)
*
*/

.list.assets.all-collateral {
	margin-bottom: -15px;
}

/*
*
* Rewards
*
*/

/* Layout */

#rewards h2 {
	display: inline-block;
	margin-right: 5px;
}
.earning-potential.action.adjust .adjust-default,
.savings-rate.action.adjust .adjust-default {
	display: none;
}
.earning-potential.action.adjust .adjust-active,
.savings-rate.action.adjust .adjust-active {
	display: block;
}

#rewards .dropdown-content .search {
	background-color: #05193b;
	border: 2px solid #0c2a4d;
}
#rewards .dropdown-content.rewards-blockchain-selector {
	margin-top: -15px;
	width: calc(50% - 95px);
}
#rewards .dropdown-content.rewards-blockchain-selector::after {
	right: initial;
}
#rewards .dropdown-content.rewards-blockchain-selector.ethereum::after {
	left: 207px;
}
#rewards .dropdown-content.rewards-blockchain-selector.icon::after {
	left: 174px;
}
.dropdown-content.savings-rate-asset.bnusd::after {
	left: 127px;
}
.dropdown-content.savings-rate-asset.usdc::after {
	left: 119px;
}
.dropdown-content.savings-rate-asset.usdt::after {
	left: 127px;
}
.dropdown-content.stablecoin-selector.bnusd::after {
	left: 106px;
}
.dropdown-content.stablecoin-selector.usdc::after {
	left: 99px;
}
.dropdown-content.stablecoin-selector.usdt::after {
	left: 93px;
}
/*#rewards .rewards-blockchain-selector {
	display: inline-block;
	transform: translateY(-2px);
}
#rewards .variable-rewards-blockchain.asset-image {
	font-size: 18px;
}
#rewards .variable-rewards-blockchain.asset-image::before {
	width: 18px !important;
	height: 18px !important;
	transform: translateY(2px);
}*/
#rewards .savings-rate.action .title,
#rewards .earning-potential.action .title {

}

/* Rewards blockchain dropdown display (NEEDS REFACTORING BADLY) */

.list.assets .blockchain.rewards.not-signed-in {
	display: table-row !important;
}
.list.assets .blockchain.rewards.signed-in {
	display: none !important;
}

.icon-signed-in .list.assets .icon.blockchain.rewards.not-signed-in,
.ethereum-signed-in .list.assets .ethereum.blockchain.rewards.not-signed-in,
.base-signed-in .list.assets .base.blockchain.rewards.not-signed-in,
.optimism-signed-in .list.assets .optimism.blockchain.rewards.not-signed-in,
.arbitrum-signed-in .list.assets .arbitrum.blockchain.rewards.not-signed-in {
	display: none !important;
}
.icon-signed-in .list.assets .icon.blockchain.rewards.signed-in,
.ethereum-signed-in .list.assets .ethereum.blockchain.rewards.signed-in,
.base-signed-in .list.assets .base.blockchain.rewards.signed-in,
.optimism-signed-in .list.assets .optimism.blockchain.rewards.signed-in,
.arbitrum-signed-in .list.assets .arbitrum.blockchain.rewards.signed-in {
	display: table-row !important;
}

.slider-rewards-savings-rate,
.slider-rewards-earning-potential {
	margin-top: 25px;
	margin-bottom: 15px;
}
#rewards .savings-rate .input-savings-rate-deposited,
#rewards .earning-potential .input-earning-potential-deposited {
	max-width: 100px;
}
.savings-rate.onboarding-message h3,
.earning-potential.onboarding-message h3 {
	margin-bottom: 15px;
}
.reward-actions.grid.side-by-side.separator > .grid-cell:nth-child(2) {
	padding-left: 0;
}
.reward-actions .savings-rate {
	padding-right: 60px !important;
	margin-right: 60px !important;
	border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.value-container > .grid-cell {
	padding-right: 25px;
	margin-right: 25px;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.value-container > .grid-cell:last-of-type {
	padding-right: 0;
	margin-right: 0;
	border-right: none;
}
.value-container .title {
	margin-bottom: 10px;
}
.value-container p {
	font-size: 14px;
}

/* Apply a margin when position details is hidden */

#position-details-container.hide + .rewards {
	margin-top: 50px;
}

/* Value container */

#rewards .value-container {
	margin-top: 35px;
	box-shadow: 0px 5px 20px 0px rgba(1, 0, 42, 0.25) inset;
}

/* Message */

#rewards .message {
	text-align: center;
	max-width: 300px;
	margin: auto;
	margin-top: 37px;
	margin-bottom: 15px;
}

/* Rewards list */

.list.rewards tbody tr td {
	padding-top: 0px;
	padding-bottom: 10px;
}
.list.rewards tbody tr {
	border: none;
}
.list.rewards tbody td {
	text-align: right;
}
.list.rewards tbody td:first-of-type {
	text-align: left;
}
.list.rewards tbody tr:last-of-type {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	border-top: 1px solid #304a68;
}
.list.rewards tbody tr:last-of-type td {
	padding-top: 10px;
	padding-bottom: 20px;
}
.wallet-rewards .title {
	margin-bottom: 25px;
}
.wallet-rewards .title h2 {
	margin-bottom: 0;
}

#collateral > div:nth-child(1) > div:nth-child(1),
#loan > div:nth-child(1) > div:nth-child(1) {
	transform: translateY(-2px);
}

.repay-with-collateral {
	display: block;
	float: right;
}
.repay-with-collateral.hide {
	display: none !important;
}
.repay-with-collateral img {
	width: 20px;
	display: block;
	position: absolute;
}
.repay-with-collateral .tooltip-content {
	min-width: 177px;
	left: -80px;
	bottom: 25px;
}
.repay-with-collateral .tooltip-content {
	min-width: 157px;
	left: -69px;
	bottom: 25px;
	font-size: 12px;
}
.repay-with-collateral .tooltip-content p {
	color: #ffffff;
}
.repay-with-collateral .tooltip-item {
	cursor: pointer !important;
}
.repay-with-collateral .tooltip-item::after {
	display: none;
}

/*
*
* Savings rate blockchain selector
*
*/

.dropdown-content.savings-rate-asset,
.dropdown-content.stablecoin-selector {
	width: 415px;
	margin-top: 12px;
	padding-bottom: 0;
}
.dropdown-content.savings-rate-asset::after,
.dropdown-content.stablecoin-selector::after {
	right: initial;
	left: 111px;
}
.container-container-savings-rate-weekly-earnings {
	max-width: 150px;
}

/* ==========================================================================
	Trade specific styles (Layout styles: sizing, spacing, etc.)
========================================================================== */


#your-pools tr.expanded > td {
	padding-top: 5px;
}
.liquidity-pool .blockchain::before {
	content: '';
	display: block;
	position: absolute;
	height: 30px;
	width: 30px;
	background-color: rgb(15, 57, 90);
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: -71px;
	margin-top: 16px;
	border-radius: 50px;
	z-index: 2;
	background-size: 15px;
}
.sicx-bnusd.liquidity-pool .blockchain::before {
	background-image: url(../img/logo/icx.svg);
}


#supply-list-assets-1.list.collateral-assets .list-header > .grid-cell:nth-of-type(2),
#supply-list-assets-2.list.collateral-assets .list-header > .grid-cell:nth-of-type(2) {
	max-width: 100%;
}

.liquidity-pool .blockchain::after {
	display: none !important;
}

.activity-item.pending-liquidity {
	border-radius: 10px;
	padding: 10px 20px !important;
	border: 1px solid rgba(44, 169, 183, 0.5);
	transition: border 0.3s ease;
}
.activity-item.pending-liquidity:hover {
	border: 1px solid rgba(44, 169, 183, 1);
	transition: border 0.2s ease;
}
.activity-item.pending-liquidity .number {
	max-width: 50px;
	text-align: center;
}
.activity-item.pending-liquidity .number::after {
	content: '';
	border-radius: 100px;
	background-color: #0c2a4d;
	display: block;
	height: 40px;
	width: 40px;
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	padding-top: 6px;
	border: 2px solid #1d4e70;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25);
	z-index: 2;
	position: relative;
}
.activity-item.pending-liquidity .number.tick::after {
	border: 2px solid #2ca9b7;
}
.pending-liquidity ul::after {
	content: '';
	display: block;
	position: absolute;
	width: 2px;
	height: 70px;
	background-color: #1d4e70;
	top: 40px;
	left: 19px;
}
.pending-liquidity.one-tick ul::after {
	background-image: linear-gradient(0deg, #1d4e70 0%, #1d4e70 75%, #2ca9b7 100%);
}
.pending-liquidity.two-tick ul::after {
	background-image: linear-gradient(0deg, #1d4e70 0%, #2ca9b7 25%, #2ca9b7 100%);
}
.activity-item.pending-liquidity ul li:nth-child(1) .grid .number.tick::after,
.activity-item.pending-liquidity ul li:nth-child(2) .grid .number.tick::after,
.activity-item.pending-liquidity ul li:nth-child(3) .grid .number.tick::after {
	background-image: url(../img/icon/tick-gradient.png);
	content: "";
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
}
.activity-item.pending-liquidity ul li:nth-child(1) .grid .number::after {
	content: "1";
}
.activity-item.pending-liquidity ul li:nth-child(2) .grid .number::after {
	content: "2";
}
.activity-item.pending-liquidity ul li:nth-child(3) .grid .number::after {
	content: "3";
}

.list .activity-item.pending-liquidity.list-item:hover {
	color: #ffffff;
}
.activity-item.pending-liquidity ul {
	padding-left: 0;
	list-style: none;
	margin-top: 15px;
	margin-bottom: 5px;
	position: relative;
}
.activity-item.pending-liquidity ul li + li {
	margin-top: 15px;
}
.activity-item.pending-liquidity h3 {
	font-size: 16px;
	display: inline-block;
	margin-right: 5px;
}
.list.activity .list-item.pending-liquidity::before {
	display: none;
}

.activity.notify::before {
	content: '';
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	right: -5px;
	top: -5px;
	z-index: 2;
	background-image: -webkit-linear-gradient( 90deg, rgb(255,57,74) 0%, rgb(255,88,102) 100%);
	box-shadow: 0 0 0 rgba(255,70,86, 1);
	animation: pulse 2s infinite;
}
.activity.notify::after {
	content: '';
	z-index: 1;
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	right: -5px;
	top: -5px;
	box-shadow: 0px 4px 10px 0px rgba(1, 0, 42, 0.5);
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,70,86, 1);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(255,70,86, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,70,86, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,70,86, 1);
    box-shadow: 0 0 0 0 rgba(255,70,86, 1);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,70,86, 0);
      box-shadow: 0 0 0 10px rgba(255,70,86, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255,70,86, 0);
      box-shadow: 0 0 0 0 rgba(255,70,86, 0);
  }
}


/*.list-item.activity-item .activity-blockchain {
	background-color: #144a68;
	border-radius: 10px;
	padding: 5px 10px;
	margin-left: 35px;
	margin-top: 7px;
}
.list-item.activity-item > .grid > .grid-cell:first-of-type  {
	padding-left: 35px;
}
.list-item.activity-item > .grid > .grid-cell .label  {
	font-size: 12px;
	margin-top: 3px;
}
.list-item.activity-item > .grid > .grid-cell:last-of-type  {
	max-width: 100px;
}
.list.activity .activity-item.swap::before {
  transform: translateY(8px);
}

.list.activity .list-item::before {
	content: '';
	position: absolute;
	height: 25px;
	width: 25px;
	background-image: url(../img/logo/default.png);
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-3px);
}


.list.collateral-assets .list-item.secondary > .grid-cell:last-of-type {
	font-size: 12px;
}*/

/* Signed out asset list */

.list .list-item.secondary.compact > .grid-cell {
	max-width: initial !important;
	padding-left: 0;
}
.list .list-item.secondary.compact::before,
.list .list-item.secondary.compact > .grid-cell::before {
	display: none;
}
.list .list-item.secondary.compact ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.list .list-item.secondary.compact ul li {
	float: left;
	margin-right: 3px;
	width: 25px;
	height: 25px;
	background-image: url(../img/logo/default.png);
	background-repeat: no-repeat;
	background-size: contain;
}
.list .list-item.secondary.compact ul li:nth-child(9) {
	margin-right: 0;
}
.list .list-item.secondary.compact ul li:nth-child(1n+10) {
	margin-top: 10px;
}
.list.collateral-assets .list-item.parent > .grid-cell:nth-of-type(2) {
	color: #ffffff;
	font-size: 14px;
}

/* Modals new */
#modal-swap-confirm .modal-content {
	background-image: url(../img/feature/background-focus-static.svg);
	background-size: 300%;
	background-repeat: no-repeat;
	background-position: center -450px;
}
#modal-swap-confirm .graphic-swap {
	margin-top: 25px;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}
#modal-swap-confirm .graphic-swap .from,
#modal-swap-confirm .graphic-swap .to {
	content: '';
	display: block;
	height: 70px;
	width: 50px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
}
#modal-swap-confirm .graphic-swap .from {
	background-position: center right;
}
#modal-swap-confirm .graphic-swap .arrow {
	content: '';
	display: block;
	height: 70px;
	width: 50px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	background-image: url(../img/icon/arrow.svg);
	background-position: center;
	background-size: 35px;
}
#modal-swap-confirm .graphic-swap .swap-from-blockchain-image,
#modal-swap-confirm .graphic-swap .swap-to-blockchain-image {
	position: absolute;
	width: 30px;
	height: 30px;
	right: 0;
	z-index: 9;
	margin-top: 20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../img/logo/default.png);
	bottom: 0;
	outline: 3px solid #0c2a4d;
	background-color: #0c2a4d;
	border-radius: 100%;
	background-position: center;
}
#modal-swap-confirm .graphic-swap .swap-from-blockchain-image.icon,
#modal-swap-confirm .graphic-swap .swap-to-blockchain-image.icon {
	border-radius: 0;
	border-top-left-radius: 15px;
}
#modal-swap-confirm .graphic-swap .swap-to-blockchain-image {
	left: 40px;
	right: initial;
}

.asset.swap-from,
.asset.swap-to {
	background-position: 15px center;
	background-size: 25px;
	background-repeat: no-repeat;
}

.asset.supply-1,
.asset.supply-2 {
	background-position: 15px center;
	background-size: 22px;
	background-repeat: no-repeat;
}

/* Modals */

.dropdown-container {
	border: 2px solid #05193b;
	width: 100%;
	background-color: #05193b;
	color: #ffffff;
	padding: 3px 20px;
	height: 40px;
	border-radius: 10px;
	transition: 0.3s ease border;
}
.dropdown-container:hover {
	border: 2px solid #2ca9b7;
	transition: 0.2s ease border;
}
.dropdown-container a {
	color: #ffffff;
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	line-height: 30px;
}
#modal-bridge-assets h2 {
	margin-bottom: 10px;
}
#modal-bridge-assets .button {
}
#modal-bridge-assets .input-asset.static.bridge .grid-cell:first-of-type {
	max-width: 115px;
}

#modal-supply-confirm h3 + p {
	margin-bottom: 20px;
	font-size: 16px;
}
#modal-supply-confirm .supply-asset {
	margin-bottom: 20px;
	max-width: 275px;
	margin-left: auto;
	margin-right: auto;
}
#modal-supply-confirm .grid-top > div:nth-child(2)::after {
	content: '';
	width: 1px;
	height: 114px;
	background-color: #485e79;
	position: absolute;
	margin-left: 68px;
	top: 40px;
}
#modal-supply-confirm .supply-asset .button {
	padding: 5px 11px;
	font-size: 12px;
}
#modal-return-confirm .graphical-options.repay {
	margin-top: 15px;
	margin-bottom: 15px;
}
#modal-return-confirm .graphical-options.withdraw {
	margin-top: 15px;
	margin-bottom: 15px;
}
#modal-return-confirm .modal-content h3 + p {
	margin-bottom: 5px;
}
#modal-return-confirm .repay-options p {
	display: inline-block;
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 14px;
	padding: 5px 15px;
	border-radius: 15px;
	cursor: pointer;
}
#modal-return-confirm .repay-options p:hover,
#modal-return-confirm .repay-options p.active {
	background-color: #1d5879;
}
#modal-supply-cancel h3 + p {
	font-size: 16px;
	max-width: 250px;
	margin: 0 auto;
	margin-bottom: 15px;
}

/* Supply liquidity modal */

#modal-new-liquidity-pool {
	max-width: 600px;
}
#modal-new-liquidity-pool .comparison {
	margin-bottom: 35px;
}
#modal-new-liquidity-pool .comparison > .grid-cell.border-right {
	padding-right: 25px;
	margin-right: 25px;
}
#modal-new-liquidity-pool .pool-rewards-details {
	margin-top: 15px;
}
#modal-new-liquidity-pool .pool-rewards-details input {

}
#modal-new-liquidity-pool .pool-rewards-details .grid-cell:first-of-type {
	margin-right: 25px;
}
#modal-new-liquidity-pool .pool-rewards-details .grid-cell:first-of-type input {
	float: right;
}
#modal-new-liquidity-pool .modal-content .price-conversion {
	margin-bottom: 15px;
	margin-top: 25px;
}
#modal-new-liquidity-pool .modal-content .price-conversion p {
	font-size: 16px;
}

.dropdown-content.swap-from .search,
.dropdown-content.swap-to .search,
.dropdown-content.supply .search,
.dropdown-content.supply .search,
.search {
	border: 2px solid #05193b;
	background-color: #05193b;
	margin-bottom: 15px;
	padding-left: 45px;
}
.search {
	padding-left: 45px !important;
}
.dropdown-content.swap-from .search,
.dropdown-content.swap-to .search,
.dropdown-content.supply .search,
.search {
	background-image: url("../img/icon/search1.svg");
	background-repeat: no-repeat;
	background-size: 18px;
	background-position: 15px 9px;
}

/* Ledger modal */

#modal-sign-in-ledger {
	max-width: 400px;
}
#modal-sign-in-ledger table {
	border-collapse: collapse;
	width: 100%;
}
#modal-sign-in-ledger table td {
	transition: background-color 0.2s ease;
}
#modal-sign-in-ledger table tr:hover td{
	background-color: #2ca9b7;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
#modal-sign-in-ledger table tr td {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
}
#modal-sign-in-ledger table tr td:first-of-type {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
#modal-sign-in-ledger table tr td:last-of-type {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
#modal-sign-in-ledger .modal-content h3 {
	margin-bottom: 15px;
}

/* Dropdowns */

.dropdown-content.return {
	text-align: left;
	margin-right: -19px;
	margin-top: 15px;
}
.dropdown-content.return h2 {
	margin-bottom: 15px;
}
.dropdown-content.return h2 + p {
	margin-bottom: 15px;
}
.dropdown-content.return table {
	margin-bottom: 25px;
}
.dropdown-content.return table tr td:last-of-type {
	text-align: right;
}
.dropdown-content.return table tr:first-of-type td {
	line-height: 25px;
	padding-top: 10px;
	padding-bottom: 15px;
}

.dropdown-content.swap-from,
.dropdown-content.swap-to,
.dropdown-content.supply {
	left: 15px;
	right: 15px;
	max-width: 100%;
	margin-top: 5px;
	font-size: initial;
}
.dropdown-content.swap-from {
	margin-top: 5px;
}
.dropdown-content.swap-from::after,
.dropdown-content.swap-to::after,
.dropdown-content.supply::after  {
	display: none;
}
.dropdown-content.liquidity {
	left: 15px;
	right: 15px;
	height: 73%;
	overflow-y: scroll;
	max-width: 100%;
	margin-top: 10px;
	font-size: initial;
}
.dropdown-content.liquidity::after {
	margin-left: initial;
	left: 97px;
}

/* Instant amounts */

.instant-amounts {
	position: absolute;
	opacity: 0;
	background: #0c2a4d;
	border: 2px solid #2ca9b7;
	border-radius: 15px;
	width: 230px;
	padding-top: 6px;
	left: 109%;
	top: -4px;
	z-index: 9;
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
	text-align: center;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.instant-amounts::before {
	content: '';
	left: -14px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	border-width: 12px;
	margin-left: -10px;
	top: 11px;
	transform: rotate(0.25turn);
}
.instant-amounts.active {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.2s ease;
}
.instant-amounts .toggle {
	margin-top: 5px;
	padding-top: 10px;
	margin-bottom: 6px !important;
}
.instant-amounts .toggle li {
	font-size: 12px;
	color: rgba(255,255,255,0.75);
}
.instant-amounts .toggle li:hover {
	color: #ffffff;
}
#swap-from.active {
	border-bottom-right-radius: 0;
	transition: border-bottom-right-radius 0.2s ease;
}
#swap-to.active {
	border-bottom-right-radius: 0;
	transition: border-bottom-right-radius 0.2s ease;
}
.asset-selector.eth.dropdown-content::after {
	right: 206px;
}
#swap-to-instant {
	width: auto;
	top: 4px;
	padding-bottom: 6px;
	border-top-left-radius: 13px;
	border-bottom-left-radius: 13px;
	text-align: left;
}
#swap-to-instant::before {
	top: 4px;
}

/* Dropdown: Minimum to recieve */

.dropdown-content.minimum-to-receive {
	width: 340px;
	right: -25px;
	margin-top: 13px;
}
.dropdown-content.minimum-to-receive::after {
	right: 17px;
}
.dropdown-content.minimum-to-receive > .grid-cell > .grid {
	margin-bottom: 10px;
}
.dropdown-content.minimum-to-receive > .grid-cell > .grid:last-of-type {
	margin-bottom: 0;
}
.dropdown-content.minimum-to-receive input {
	border: 2px solid rgb(82, 129, 155);
	height: 30px;
	width: 100px;
	text-align: right;
	float: right;
}
#tooltip-minimum-to-receive.tooltip-item::after {
	margin-left: 140px;
	margin-top: -20px;
}
#panel-swap #tooltip-minimum-to-receive .tooltip-content {
	width: 260px;
	left: 17px;
	bottom: 56px;
}
tr.separator {
	display: none;
}
.input-asset > .grid-cell.bnusd {
	max-width: 132px;
}

/* Wallet */

.wallet .list.assets tbody tr:hover {
	cursor: initial;
	color: #ffffff;
}
.wallet .list.assets tbody tr:hover .label {
	cursor: initial;
	color: rgba(255,255,255,0.75);
}

/* Asset list */

.list.assets tbody tr:last-of-type {
	border-bottom: none !important;
}
.list.assets tbody tr:hover {
	cursor: pointer;
	color: #2ca9b7;
	transition: color 0.2s ease;
}
.list.assets tbody tr:hover .label {
	color: #2ca9b7;
	transition: color 0.2s ease;
}
.list.assets thead th,
.list.assets tbody td {
	text-align: right;
}
.list.assets tbody tr:last-of-type td {
	padding-bottom: 20px;
}
.list.assets thead th:first-of-type,
.list.assets tbody td:first-of-type {
	text-align: left;
}
.list.assets tbody td:first-of-type {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	padding-left: 40px;
}

/* Secondary */

.list.assets td.asset-total {
	color: rgba(255,255,255,0.75);
	font-size: 12px;
}
.list.assets .collateral:first-of-type,
.list.assets .wallet:first-of-type {
	border-top: none;
}
.list.assets .collateral .label,
.list.assets .wallet .label {
	font-size: 12px;
}
.list.assets .collateral.secondary,
.list.assets .wallet.secondary {
	border-top: none;
	border-bottom: none;
}
.list.assets .collateral.secondary td,
.list.assets .wallet.secondary td {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #144a68;
}
.list.assets .collateral.secondary td:first-of-type,
.list.assets .wallet.secondary td:first-of-type {
	padding-left: 50px;
	font-family: 'tex-gyre-adventor-regular';
	background-position: 10px center;
	background-size: 20px;
}
.list.assets .collateral.secondary.alert td:first-of-type,
.list.assets .wallet.secondary.alert td:first-of-type {
	color: #ffffff;
	transition: color 0.3s ease;
}
.list.assets .collateral.secondary.alert:hover td:first-of-type,
.list.assets .wallet.secondary.alert:hover td:first-of-type {
	color: #2ca9b7;
	transition: color 0.2s ease;
}
.list.assets .rounded-top td:first-of-type {
	border-top-left-radius: 10px;
}
.list.assets .rounded-top td:last-of-type  {
	border-top-right-radius: 10px;
}
.list.assets .rounded-bottom td:first-of-type  {
	border-bottom-left-radius: 10px;
}
.list.assets .rounded-bottom td:last-of-type  {
	border-bottom-right-radius: 10px;
}
.list.assets .collateral.secondary.ethereum td:first-of-type,
.list.assets .wallet.secondary.ethereum td:first-of-type {
	background-size: 20px;
	background-position: 10px center;
}
.list.assets .collateral.secondary td:last-of-type,
.list.assets .wallet.secondary td:last-of-type {
	padding-right: 15px;
}
.list.assets .collateral.secondary.rounded-top td,
.list.assets .wallet.secondary.rounded-top td {
	padding-top: 15px;
	background-position: 10px 15px !important;
}
.list.assets .collateral.secondary.rounded-bottom td,
.list.assets .wallet.secondary.rounded-bottom td {
	padding-bottom: 15px;
	background-position: 10px 9px;
}
.secondary-parent.no-border-bottom {
    border-bottom: none;
}
.list.assets .rounded-top::after {
	content: '';
	left: 48px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #144a68;
	border-width: 12px;
	margin-left: -10px;
	transform: rotate(0.5turn);
	margin-top: -24px;
}
.list.assets .avax.secondary.rounded-top::after {
	left: 57px;
}
.list.assets .bnusd.secondary.rounded-top::after {
	left: 60px;
}

.list.assets .collateral.secondary.bnusd td:first-of-type,
.list.assets .wallet.secondary.bnusd td:first-of-type {
	background-size: 20px;
	background-position: 10px center;
	background-image: url(../img/logo/bnusd.svg);
}
.list.assets .collateral.secondary.eth td:first-of-type,
.list.assets .wallet.secondary.eth td:first-of-type {
	background-size: 20px;
	background-position: 10px center;
	background-image: url(../img/logo/eth.svg);
}
.list.assets .collateral.secondary.avax td:first-of-type,
.list.assets .wallet.secondary.avax td:first-of-type {
	background-size: 20px;
	background-position: 10px center;
	background-image: url(../img/logo/avalanche.svg);
}


.list.assets .collateral.secondary.icon td:first-of-type::after,
.list.assets .wallet.secondary.icon td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/icx.svg);
	background-color: #144a68;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 1px solid #144a68;
}
.list.assets .collateral.secondary.ethereum td:first-of-type::after,
.list.assets .wallet.secondary.ethereum td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/eth.svg);
	background-color: #144a68;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #144a68;
}
.list.assets .collateral.secondary.avalanche td:first-of-type::after,
.list.assets .wallet.secondary.avalanche td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/avax.svg);
	background-color: #144a68;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #144a68;
}
.list.assets .collateral.secondary.base td:first-of-type::after,
.list.assets .wallet.secondary.base td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/base.svg);
	background-color: #144a68;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #144a68;
}
.list.assets .collateral.secondary.optimism td:first-of-type::after,
.list.assets .wallet.secondary.optimism td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/optimism.svg);
	background-color: #144a68;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #144a68;
}
.list.assets .collateral.secondary.arbitrum td:first-of-type::after,
.list.assets .wallet.secondary.arbitrum td:first-of-type::after {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/arbitrum.svg);
	background-color: #144a68;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #144a68;
}


/* Supply list */

.supply-list-toggle.hide {
	display: none !important;
}
.list.supply {
	margin-bottom: -20px;
}
.dropdown-content.supply {
	height: 73%;
	margin-top: 10px;
}
.dropdown-content.supply .search {
	margin-bottom: 15px;
}
.list.supply tbody tr {
	border-bottom: 1px solid #304a68;
	transition: color 0.3s ease, border-bottom 0.3s ease;
}
.list.supply tbody tr:last-of-type {
	border-bottom: none !important;
}
.list.supply tbody tr:hover {
	cursor: pointer;
	color: #2ca9b7;
	transition: color 0.2s ease, border-bottom 0.2s ease;
}
.list.supply thead th,
.list.supply tbody td {
	text-align: right;
}
.list.supply tbody tr:last-of-type td {
	padding-bottom: 20px;
}
.list.supply thead th:first-of-type,
.list.supply tbody td:first-of-type {
	text-align: left;
}
.list.supply tbody td:first-of-type {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
}

/* Swap / supply */

/*
#panel-swap,
#panel-swap .panel-parent,
#panel-supply,
#panel-supply .panel-parent,
#panel-bridge,
#panel-bridge .panel-parent {
	border-top-left-radius: 0;
}*/
#panel-swap .button,
#panel-supply .button,
#panel-bridge .button {
	margin-top: 25px;
}
#panel-swap .panel-parent,
#panel-supply .panel-parent,
#panel-bridge .panel-parent {
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
}

#panel-supply h3 {
	margin-bottom: 10px;
}

/* Rebalaning */

.rebalance-container {
	padding-right: 21px;
}
.rebalance-container .tooltip .tooltip-content {
	left: -287px;
	width: 320px;
}
.rebalance-container .tooltip .tooltip-content::after {
	left: 95%;
}

/* Swap controls */

#panel-swap label {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 25px;
	padding-bottom: 5px;
	display: inline-block;
}
#panel-swap .input-asset {
	margin-top: 10px;
	margin-bottom: 15px;
}
#panel-swap hr + .grid {
	margin-bottom: 5px;
}
#panel-swap hr + .grid + .grid {
	margin-bottom: 5px;
}
#panel-swap .tooltip .tooltip-content {
	width: 260px;
    left: 14px;
    bottom: 15px;
}
#panel-swap .loader {
	margin-top: 100px;
}

.dropdown-content.swap-from-blockchain-selector,
.dropdown-content.swap-to-blockchain-selector,
.dropdown-content.supply-1-blockchain-selector,
.dropdown-content.supply-2-blockchain-selector {
	margin-top: 5px;
	left: 15px;
	right: 15px;
	max-width: 100%;
}
.dropdown-content.swap-from-blockchain-selector .search,
.dropdown-content.swap-to-blockchain-selector .search,
.dropdown-content.supply-1-blockchain-selector .search,
.dropdown-content.supply-2-blockchain-selector .search {
	border: 2px solid #05193b;
	background-color: #05193b;
	box-shadow: none;
}
.dropdown-content.swap-from-blockchain-selector::after,
.dropdown-content.swap-to-blockchain-selector::after,
.dropdown-content.supply-1-blockchain-selector::after,
.dropdown-content.supply-2-blockchain-selector::after {
	display: none;
}

/* Swap overview */

#panel-swap h3,
#panel-swap ul.toggle:nth-child(1) {
	margin-bottom: 10px;
}
#panel-swap #chart-line,
#panel-swap #chart-candle {
	margin-top: 25px;
}
#chart-message {
	margin-top: 125px;
}
#exchange-button {
	border-radius: 50px;
}
#exchange-button img {
	width: 25px;
	display: block;
	margin: 5px auto;
	margin-top: 20px;
}

/* Supply controls */

.supply-options p {
	display: inline-block;
	margin-top: 15px;
	font-size: 14px;
	padding: 5px 15px;
	border-radius: 15px;
	cursor: pointer;
	background-color: #0c2a4d;
}
.supply-options p:hover,
.supply-options p.active {
	background-color: #2ca9b7;
}
#slider-supply-sicx {
	margin-top: 15px;
}

#panel-supply .panel-parent h2 {
	margin-bottom: 0;
}
#panel-bridge .panel-parent h2 {
	margin-bottom: 15px;
}
#panel-bridge .fee {
	margin-top: 25px;
	margin-bottom: 5px;
}
#panel-bridge .asset.to {

}
#panel-bridge .asset.to::after {
	display: none;
}
#panel-supply .panel-parent .grid:nth-child(1) .grid-cell:nth-child(1) {
	max-width: 100px;
}
/*
#panel-supply .panel-parent .dropdown {
	font-size: 18px;
	padding-top: 5px;
	display: block;
	transition: color 0.3s ease
}
*/
#panel-supply .panel-parent .animation-underline:hover,
#panel-supply .panel-parent .animation-underline.active {
	color: #2fccdc;
	cursor: pointer;
	transition: color 0.2s ease
}
#panel-supply .panel-parent .input-asset {
	margin-top: 15px;
}
#panel-supply #slider-supply {
	margin-top: 15px;
}
#panel-supply .asset-per-asset {
	margin-top: 25px;
	border-radius: 10px;
	background-color: #32627d;
}

/* Supply dropdown */

.supply-1-dropdown,
.supply-2-dropdown {
	width: 340px;
	left: 16px;
	margin-top: 5px;
}
.supply-1-dropdown input[type="text"],
.supply-2-dropdown input[type="text"] {
	border: 2px solid #05193b;
	background-color: #05193b;
}
.supply-1-dropdown::after,
.supply-2-dropdown::after {
	left: 106px;
	right: initial;
	display: none;
}

.grid.pool-overview-2 {
	margin-top: 25px;
}
.concentrated-toggles.hide {
	display: none !important;
}

/* Supply overview */

#panel-supply h3 {
	margin-bottom: 10px;
}
#panel-swap ul.toggle:nth-child(1),
#panel-supply ul.toggle:nth-child(1) {
	margin-bottom: 8px;
}
#panel-swap .toggle,
#panel-supply .toggle {
	transform: translateY(4px);
}
#panel-supply .liquidity-apy {
	font-size: 18px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
}
#panel-supply h3 + p.label {
	margin-bottom: 5px;
	line-height: 25px;
}
#panel-supply h3 + p.label + .grid .grid-cell:nth-child(1) dl:first-of-type,
#panel-supply h3 + p.label + .grid .grid-cell:nth-child(2) dl:first-of-type {
	margin-bottom: 25px;
}
.concentrated-liquidity .metadata-container {
	background-color: #144a68;
	border-radius: 15px;
	text-align: center;
	font-family: tex-gyre-adventor-regular;
}
.concentrated-liquidity .metadata-container > .grid-cell input[type="text"] {
	background-color: #0c2a4d;
	border: 2px solid #144a68;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
	text-align: center;
	max-width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}
.concentrated-liquidity .current-price {
	margin-top: 15px;
	margin-bottom: 15px;
}
.pool-overview-1 {
	margin-top: 25px;
}
.pool-overview {
	margin-top: 40px;
}
.pool-overview .metadata {
	margin: 20px 0;
}
.concentrated-liquidity .noUi-tooltip {
	display: block;
	bottom: -10px;
	padding: 5px 15px;
}
.noUi-handle-lower .noUi-tooltip {
	left: -43px;
}
.noUi-handle-upper .noUi-tooltip {
	left: 57px;
}

/* Concentrated liquidity: Depth */

.pool-overview-1 .metadata-container {
	margin-top: 25px;
}
#slider-concentrated-liquidity-1,
#slider-concentrated-liquidity-1 + img {
	margin-top: 10px;
}
.concentrated-liquidity-tooltip-left,
.concentrated-liquidity-tooltip-right {
	width: 120px;
	position: absolute;
	background: #0c2a4d;
	border: 2px solid #2ca9b7;
	padding: 5px 10px;
	border-radius: 15px;
	top: -10px;
}
#slider-concentrated-liquidity-2 .concentrated-liquidity-price-tooltip::after {
	content: '';
	top: 4px;
	left: -18px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	border-width: 10px;
	transform: rotate(90deg);
}
.concentrated-liquidity-tooltip-left {
	right: 31px;
	left: initial;
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
}
.concentrated-liquidity-tooltip-right {
	left: 31px;
	right: initial;
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
}
input[type="text"].concentrated-liquidity-tooltip-left-input {
	padding: 0;
	text-align: right;
	padding-right: 10px;
	height: 26px;
	font-size: 12px;
	border: 2px solid #05193b;
	border-radius: 5px;
	margin-top: 3px;
	margin-bottom: 3px;
}
input[type="text"].concentrated-liquidity-tooltip-right-input {
	padding: 0;
	padding-left: 10px;
	height: 25px;
	font-size: 12px;
	border: 2px solid #05193b;
	border-radius: 5px;
	margin-top: 3px;
	margin-bottom: 3px;
}
input[type=text].concentrated-liquidity-tooltip-left-input:hover,
input[type=text].concentrated-liquidity-tooltip-left-input:focus,
input[type=text].concentrated-liquidity-tooltip-right-input:hover,
input[type=text].concentrated-liquidity-tooltip-right-input:focus {
	border: 2px solid #2ca9b7;
}


#slider-concentrated-liquidity-1 .concentrated-liquidity-tooltip-left .label,
#slider-concentrated-liquidity-1 .concentrated-liquidity-tooltip-left-percentage,
#slider-concentrated-liquidity-1 .concentrated-liquidity-tooltip-right .label,
#slider-concentrated-liquidity-1 .concentrated-liquidity-tooltip-right-percentage {
	text-align: right;
	display: block;
	font-size: 12px;
}
#slider-concentrated-liquidity-1 .concentrated-liquidity-tooltip-right .label,
#slider-concentrated-liquidity-1 .concentrated-liquidity-tooltip-right-percentage {
	text-align: left;
}
#slider-concentrated-liquidity-1 .concentrated-liquidity-tooltip-left-percentage,
#slider-concentrated-liquidity-1 .concentrated-liquidity-tooltip-right-percentage {
	color: rgba(255, 255, 255, 0.75);
}

/* Concentrated liquidity: Price */

#slider-concentrated-liquidity-2 .concentrated-liquidity-price-tooltip {
	position: absolute;
	left: 30px;
	top: -7px;
}
#slider-concentrated-liquidity-2 .input-concentrated-liquidity-price {
	width: 60px;
	border-top-left-radius: 11px;
	border-bottom-left-radius: 11px;
	background: #0c2a4d;
	border: 2px solid #2ca9b7;
	font-size: 12px;
	padding: 0;
	text-align: center;
	height: 28px;
}
#slider-concentrated-liquidity-2 .input-concentrated-liquidity-price::after {
	top: 28px;
	border-width: 10px;
	left: -10px;
}
#slider-concentrated-liquidity-2 .concentrated-liquidity-price-tooltip::after {
	content: '';
	top: 4px;
	left: -18px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	border-width: 10px;
	transform: rotate(90deg);
}
.blockchain-selectors .metadata dd a {
	font-size: 16px;
}

/* Liquidity list */

.list.liquidity thead th,
.list.liquidity tbody td {
	text-align: right;
}
.list.liquidity thead th:first-of-type,
.list.liquidity tbody td:first-of-type {
	text-align: left;
}
.list.liquidity tbody td:first-of-type {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
}

/* Hover style v1 */

.list.liquidity tr:hover {
	cursor: pointer;
}
.list.liquidity tr:not(.expanded) td {
	transition: color 0.3s ease;	
}
.list.liquidity tr:not(.expanded):hover td,
.list.liquidity tr.active td {
	color: #2ca9b7;
	transition: color 0.2s ease;
}
.list.liquidity tr.active {
	border-bottom: none;
}
.list.liquidity tr.active td {
	padding-bottom: 0;
}
.liquidity-expanded {
	position: relative;
}
.liquidity-expanded::after {
	content: '';
	left: 40px;
	top: -24px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #20778d;
	border-width: 12px;
	margin-left: -10px;
	transform: rotate(0.5turn);
}
.liquidity-expanded .input-asset .asset {
	padding-left: 50px;
}
.liquidity-expanded .input-asset .grid-cell:first-of-type {
	max-width: 115px;
}

.list.liquidity tbody td:first-of-type {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.list.liquidity tbody td:last-of-type {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.list.liquidity svg {
	width: 10px;
	margin-left: 5px;
	margin-top: -6px;
	transition: color 0.2s ease;
}
.list.liquidity tr:not(.expanded) svg path,
.list.liquidity tr svg path{
	transition: stroke 0.3s ease;
}
.list.liquidity tr:not(.expanded):hover svg path,
.list.liquidity tr.active svg path{
	stroke: #2ca9b7 !important;
	transition: stroke 0.2s ease;
}

/* Withdraw liquidity */

.dropdown-content.withdraw.sicx img {
	width: 35px;
	margin-bottom: 10px;
}
.dropdown-content.withdraw.sicx .graphical-options > .grid-cell {
	text-align: center;
	border-radius: 10px;
	background-color: #144a68;
	border: 2px solid #144a68;
	transition: border 0.3s ease;
	padding: 10px;
	margin-right: 15px;
}
.dropdown-content.withdraw.sicx .graphical-options > .grid-cell:last-of-type {
	margin-right: 0;
}
.dropdown-content.withdraw.sicx .graphical-options > .grid-cell:hover {
	border: 2px solid #2ca9b7;
	cursor: pointer;
	transition: border 0.2s ease;
}

.dropdown-content.withdraw {
	margin-top: 15px;
}
.dropdown-content.withdraw .title {
	margin-bottom: 15px;
}
.dropdown-content.withdraw .title .grid-cell:first-of-type {
	max-width: 127px;
}
.dropdown-content.withdraw .title p {
	margin-top: 7px;
	font-size: 16px;
}
.dropdown-content.withdraw h2 {
	margin-bottom: 0;
}
.dropdown-content.withdraw .input-asset {
	margin-bottom: 15px;
}
.dropdown-content.withdraw .input-asset + p {
	margin-bottom: 25px;
}
.dropdown-content.withdraw .button {
	margin-top: 25px;
}
.dropdown-content.withdraw::after {
	right: 27px;
}
.dropdown-content.slippage {
	padding: 0;
	width: 68px;
	right: -19px;
}
.dropdown-content.slippage input,
.dropdown-content.slippage input:hover,
.dropdown-content.slippage input:focus {
	border: none;
	text-align: center;
}
#modal-bridge-assets .dropdown-content.bridge-from,
#modal-bridge-assets .dropdown-content.bridge-to {
	padding: 0;
	left: 0;
	right: initial;
	margin-top: 5px;
	max-width: initial;
	width: 170px;
}
#modal-bridge-assets .dropdown-content.bridge-from ul,
#modal-bridge-assets .dropdown-content.bridge-to ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}
#modal-bridge-assets .dropdown-content.bridge-from ul li,
#modal-bridge-assets .dropdown-content.bridge-to ul li {
	padding: 10px 15px;
	transition: background-color 0.3s ease;
}
#modal-bridge-assets .dropdown-content.bridge-from ul li:first-of-type,
#modal-bridge-assets .dropdown-content.bridge-to ul li:first-of-type {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
#modal-bridge-assets .dropdown-content.bridge-from ul li:last-of-type,
#modal-bridge-assets .dropdown-content.bridge-to ul li:last-of-type {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
#modal-bridge-assets .dropdown-content.bridge-from ul li:hover,
#modal-bridge-assets .dropdown-content.bridge-to ul li:hover {
	cursor: pointer;
	background-color: #2ca9b7;
	transition: background-color 0.2s ease;
}
.dropdown-content.bridge-asset {
	max-width: initial;
	width: 380px;
	left: 24px;
}
#statistics #pools table tbody tr td:first-of-type {
	padding-left: 100px;
	background-size: 85px;
	background-position: 0px 12px;
}
table#all-pools tbody tr td:first-of-type,
table#your-pools tbody tr:not(.expanded) td:first-of-type,
table#allocation-liquidity tbody tr td:first-of-type {
	padding-left: 100px;
	background-size: 85px;
	background-position: 0px 13px;
}
table#all-pools td,
table#your-pools td,
table#allocation-liquidity td:first-of-type {
	padding-top: 25px;
	padding-bottom: 25px;
}
.liquidity-details .search {
	margin-bottom: 0;
}
.stability-fund {
	margin-top: 15px;
	opacity: 1;
	width: 299px;
	left: 36px;
	bottom: -75px;
}
.stability-fund .or {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 3px;
	color: #d5d7db;
	text-align: center;
	margin-bottom: 15px;
}
.stability-fund .or::after {
	content: '';
	display: block;
	height: 1px;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.15);
	margin-top: -10px;
}
.stability-fund a {
	display: block;
	text-align: center;
}
.stability-fund .or span {
	background-color: #0b284c;
	padding: 10px;
}
.stability-fund::after {
	content: '';
	position: absolute;
	left: 50%;
	top: -26px;
	border: solid transparent;
	height: 0;
	width: 0;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	transform: initial;;
	border-width: 12px;
	margin-left: -12px;
	transform: rotate(0.5turn);
}

/* New bridge modal */

#modal-bridge-assets-new {
	max-width: 500px;
}
#modal-bridge-assets-new h2 {
	margin-bottom: 10px;
}

/* Chain selector */

.chain-selector {
	background-color: rgb(15, 57, 90);
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	padding: 5px 15px;
	padding-bottom: 7px;
	border-top: 1px solid rgba(255,255,255,0.15);
}
.chain-selector p {
	font-size: 14px;
}
#panel-swap .input-asset {
	margin-bottom: 0;
}
#panel-swap .panel-parent .input-asset input[type="text"],
#panel-supply .panel-parent .input-asset input[type="text"] {
	border-bottom-right-radius: 0;
}
#panel-swap .panel-parent .input-asset .asset,
#panel-supply .panel-parent .input-asset .asset {
	border-bottom-left-radius: 0;
}
.price-impact {
	margin-top: 25px;
	margin-bottom: 5px;
}
.minimum-to-receive > .grid-cell:nth-of-type(2) {
	max-width: 140px;
}

/* Filter */

.search-filter-container > .grid-cell:nth-of-type(2) {
	max-width: 75px;
	padding-left: 15px;
}

.asset-filter {
	
}

.blockchain-filter-button-container {
	max-width: 40px;
	margin-left: 10px;
}
.blockchain-filter-button {
	padding: 10px 11px;
	background-color: #144a68;
	border-radius: 10px;
	height: 40px;
	display: block;
	color: rgba(255,255,255,0.75);
	transition: background-color 0.3s ease, color 0.3s ease;
}
.blockchain-filter-button.active,
.blockchain-filter-button:hover {
	background-color: #2ca9b7;
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.blockchain-filters {
	background-color: #144a68;
	border-radius: 10px;
	padding: 5px 10px;
	position: relative;
	margin-bottom: 15px;
}
.blockchain-filters::after {
	content: '';
	top: 3px;
	right: 8px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #144a68;
	border-width: 12px;
	margin-left: -10px;
	transform: rotate(0.5turn);
	margin-top: -25px;
}
.blockchain-filters ul.toggle {
	margin-bottom: 0 !important;
}
.blockchain-filters ul.toggle li {
	font-size: 12px;
	border-radius: 10px;
	padding: 5px 10px;
	margin-right: 5px;
	height: 30px;
	width: 40px;
}
.blockchain-filters ul.toggle li.all {
	padding: 7px 13px;
}
.blockchain-filters ul.toggle li:nth-of-type(6n) {
	margin-right: 0;
}
.blockchain-filters ul.toggle li:nth-of-type(n+7) {
	margin-top: 5px;
}
.blockchain-filters ul.toggle li img {
	width: 20px;
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
	Liquidity incentives specific styles (Layout styles: sizing, spacing, etc.)
========================================================================== */

.liquidity-expanded .toggle li {
	background-color: rgb(15, 57, 90);
}
.liquidity-expanded .controls {
	max-width: 350px;
}
.liquidity-expanded #slider-concentrated-liquidity-1-expanded {
	height: 162px;
	margin-bottom: 15px;
}
.liquidity-expanded .concentrated-liquidity {
	margin-left: 50px;
}
.liquidity-expanded .concentrated-liquidity img {
	margin-left: initial;
	top: 53px;
}
.liquidity-expanded [disabled].noUi-horizontal {
	background: #03334f;
}
.liquidity-expanded a {
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
}
#slider-supply-1 {
	margin-top: 15px;
}
.liquidity-expanded .metadata-container {
	background-color: #03334f;
}
.liquidity-expanded .controls .input-asset input[type="text"] {
	border-bottom-right-radius: 0;
	border: 2px solid #0c2a4d;
}
.liquidity-expanded .controls .input-asset .asset {
	border-bottom-left-radius: 0;
	border: 2px solid #0c2a4d;
}
.liquidity-expanded .controls .button {
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
}
.liquidity-expanded .controls .dropdown-content + .input-asset {
	margin-top: 15px;
}
.liquidity-expanded h3 {
	margin-top: 15px;
	margin-bottom: 15px;
}
.liquidity-expanded .noUi-connect {
	background-color: rgba(44, 169, 183, 0.25);
}
.liquidity-expanded .noUi-target {
	background-color: rgba(0, 0, 0, 0);
}
.liquidity-expanded img {
	max-width: 100%;
	position: absolute;
	top: 0;
	height: 179px;
	text-align: center;
	margin-left: 32px;
	margin-right: auto;
	display: block;
}
.liquidity-expanded #chart-line-2 {
	max-width: 100%;
	position: absolute;
	top: 0;
	height: 179px;
}
.liquidity-expanded #slider-liquidity-expanded-2 {
	z-index: 5;
	height: 175px;
	width: calc(100% - 43px);
}
.liquidity-expanded #chart-line-2 + .metadata-container {
	margin-top: 35px;
}
.liquidity-expanded .noUi-vertical .noUi-connect {
	background-color: rgba(255, 255, 255, 0.25);
}
.liquidity-expanded .metadata-container {
	border-radius: 15px;
	text-align: center;
	font-family: tex-gyre-adventor-regular;
}
.liquidity-expanded .metadata-container > .grid-cell input[type="text"] {
	border: 2px solid #144a68;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
	text-align: center;
	max-width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}
svg.liquidity-down-arrow{
	width: 10px;
	margin-left: 5px;
	margin-top: -6px;
	transition: color 0.2s ease;
}
.liquidity-expanded input[type="text"] {
	border: 2px solid #0c2a4d;
}
.liquidity-incentives-expanded {
	padding-right: 25px !important;
	margin-right: 25px !important;
	border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.distribution-duration {
	margin-top: 15px;
	margin-bottom: 15px;
}
.liquidity-expanded .metadata-container {
	margin-top: 15px;
}
.liquidity-expanded h3 {
	margin-top: 0 !important;
}
.liquidity-incentive-eth-bnusd {
	border-bottom: none !important;
}

/* ==========================================================================
	Development styles
========================================================================== */

.modal-content h2 + p {
	font-size: 25px;
}

#rewards .variable-rewards-blockchain.asset-image.ethereum::before {
	height: 18px;
	width: 18px;
	margin-right: 5px;
	transform: translateY(3px);
}
.variable-rewards-blockchain.asset-image.ethereum {
	margin-top: -3px;
}

/* Loan interest */

/*
.savings-rate .dropdown-content.stablecoin-selector {
	padding: 0;
	left: 47px;
	right: initial;
	margin-top: 12px;
}
.savings-rate .dropdown-content.stablecoin-selector ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}
.savings-rate .dropdown-content.stablecoin-selector ul li {
	padding: 10px 15px;
	transition: background-color 0.3s ease;
}
.savings-rate .dropdown-content.stablecoin-selector ul li:first-of-type {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.savings-rate .dropdown-content.stablecoin-selector ul li:last-of-type {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
.savings-rate .dropdown-content.stablecoin-selector ul li:hover {
	cursor: pointer;
	background-color: #2ca9b7;
	transition: background-color 0.2s ease;
}
*/

/*
.modal-content h2 + p {
	font-size: 25px;
	margin-top: 5px;
}
.modal-content .grid.comparison {
	background-color: #144a68;
	padding: 10px 0px;
	border-radius: 10px;
	margin-bottom: 0;
	margin-top: 15px;
}
.modal-content .grid.comparison > .grid-cell p + p {
	margin-top: 5px;
}
.modal-content .modal-actions {
	border-top: none;
	margin-top: 5px;
}
*/


.quick-amounts-container {
	background-color: #0c2a4d;
}
.quick-amounts-container .label {
	margin-top: 3px;
}
.quick-amounts-container .toggle {
	transform: initial !important;
}
.quick-amounts-container > .grid-cell:nth-child(2) {
	max-width: 50px;
}
.quick-amounts-container ul.toggle {
	margin-left: 5px;
	margin-top: 4px !important;
	margin-bottom: 0 !important;
}
.quick-amounts-container ul.toggle li {
	font-size: 12px;
	padding: 1px 7px;
}


/*
*
* New input
*
*/

#panel-swap .panel-parent .input-asset input[type="text"] {
	height: 50px;
	font-size: 16px;
	padding-bottom: 20px;
	padding-top: 1px;
}
#panel-swap .panel-parent .input-asset .asset {
	height: 50px;
	line-height: 25px;
}
.inline-dollar-value {
	position: absolute;
	font-size: 12px;
	color: rgba(255,255,255,0.75);
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	top: 28px;
	left: initial;
	right: 22px;
}

/*
*
* Liquidity
*
*/

.liquidity-pool .graphic::before {
	content: '';
	display: block;
	position: absolute;
	height: 50px;
	width: 50px;
	background-color: #144a68;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: -102px;
	margin-top: -14px;
	border-radius: 50px;
	border: 1px solid #0c2a4d;
	z-index: 2;
}
.liquidity-pool .graphic::after {
	content: '';
	display: block;
	position: absolute;
	height: 50px;
	width: 50px;
	background-color: #144a68;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: -61px;
	margin-top: -14px;
	border-radius: 50px;
}

.liquidity-pool .blockchain::after {
	content: '';
	display: block;
	position: absolute;
	height: 30px;
	width: 30px;
	background-color: rgb(15, 57, 90);
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: -71px;
	margin-top: 16px;
	border-radius: 50px;
	z-index: 9;
}

/* sICX / bnUSD */

.sicx-bnusd.liquidity-pool .graphic::before {
	background-image: url(../img/logo/sicx.svg);
	background-size: 27px;
}
.sicx-bnusd.liquidity-pool .graphic::after {
	background-image: url(../img/logo/bnusd.svg);
	background-size: 27px;
}
.sicx-bnusd.liquidity-pool .blockchain::after {
	background-image: url(../img/logo/icx.svg);
	background-size: 15px;
}

/* BALN / bnUSD */

.baln-bnusd.liquidity-pool .graphic::before {
	background-image: url(../img/logo/baln.svg);
	background-size: 27px;
}
.baln-bnusd.liquidity-pool .graphic::after {
	background-image: url(../img/logo/bnusd.svg);
	background-size: 27px;
}
.baln-bnusd.liquidity-pool .blockchain::after {
	background-image: url(../img/logo/eth.svg);
	background-size: 15px;
}

/* sICX / ICX */

.sicx-icx.liquidity-pool .graphic::before {
	background-image: url(../img/logo/sicx.svg);
	background-size: 27px;
}
.sicx-icx.liquidity-pool .graphic::after {
	background-image: url(../img/logo/icx.svg);
	background-size: 27px;
}
.sicx-icx.liquidity-pool .blockchain::after {
	background-image: url(../img/logo/avax.svg);
	background-size: 15px;
}


#rewards .dropdown.asset-image.bnusd::before {
	content: '';
	height: 20px;
	width: 20px;
	background-image: url(../img/logo/bnusd.svg);
	display: inline-block;
	margin-left: 0px;
	padding-left: 25px;
	background-repeat: no-repeat;
	transform: translateY(5px);
}


#rewards .dropdown-content.rewards-blockchain-selector {
	width: calc(50% - 70px);
}

#panel-bridge .blockchain-selectors .exchange {
	max-width: 75px;
}
#panel-bridge .blockchain-selectors .exchange img {
	display: block;
	width: 15px;
	margin-top: 15px;
}

.concentrated-liquidity .noUi-horizontal {
	height: 176px;
}
.concentrated-liquidity .noUi-connect {
	background-color: rgba(44, 169, 183, 0.25);
	background-image: none;
}
.concentrated-liquidity .noUi-target {
	background-color: rgba(0, 0, 0, 0);
}
.concentrated-liquidity img {
	max-width: 100%;
	position: absolute;
	top: 0;
	height: 179px;
	text-align: center;
	margin-left: 32px;
	margin-right: auto;
	display: block;
}
.concentrated-liquidity #chart-line-2 {
	max-width: 100%;
	position: absolute;
	top: 0;
	height: 179px;
}
.concentrated-liquidity #slider-concentrated-liquidity-2 {
	z-index: 5;
	height: 175px;
	width: calc(100% - 43px);
}
.concentrated-liquidity #chart-line-2 + .metadata-container {
	margin-top: 35px;
}
.concentrated-liquidity .noUi-vertical .noUi-connect {
	background-color: rgba(255, 255, 255, 0.25);
	background-image: none;
}
.noUi-vertical .noUi-handle {
	width: 20px;
	height: 20px;
	right: -10px;
	top: -8px;
	background-color: #03334f;
	border: 3px solid #2ca9b7;
	opacity: 1;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.20);
	transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.2s ease;
}
.concentrated-liquidity .noUi-vertical .noUi-tooltip {
	left: initial;
	bottom: initial;
	width: 75px;
	left: 20px;
	font-size: 12px;
}
.concentrated-liquidity .noUi-vertical .noUi-handle-upper .noUi-tooltip {

}
#panel-bridge .input-asset + .input-asset .grid-cell:first-of-type {
	max-width: 60px;
}
#panel-bridge .asset.to {
	padding-left: 20px;
}
#panel-bridge .asset.to:hover {
	border: 2px solid #0b284c;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	color: #ffffff;
	cursor: default;
}
#panel-bridge .panel-parent .metadata {
	margin-top: 0;
}
#panel-bridge .panel-parent input[type="text"] {
	margin-top: 0;
}
.liquidity-expanded .toggle li {
	background-color: rgb(15, 57, 90);
}
.liquidity-expanded .controls {
	max-width: 350px;
}
.liquidity-expanded #slider-concentrated-liquidity-1-expanded {
	height: 162px;
	margin-bottom: 15px;
}
.liquidity-expanded .concentrated-liquidity {
	margin-left: 50px;
}
.liquidity-expanded .concentrated-liquidity img {
	margin-left: initial;
	top: 53px;
}
.liquidity-expanded [disabled].noUi-horizontal {
	background: #03334f;
}
.liquidity-expanded a {
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
}
#slider-supply-1 {
	margin-top: 15px;
}
.liquidity-expanded .concentrated-liquidity .metadata-container {
	background-color: #03334f;
}
.liquidity-expanded .controls .input-asset input[type="text"] {
	border-bottom-right-radius: 0;
	border: 2px solid #0c2a4d;
}
.liquidity-expanded .controls .input-asset .asset {
	border-bottom-left-radius: 0;
	border: 2px solid #0c2a4d;
}
.liquidity-expanded .controls .button {
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
}
.liquidity-expanded .controls .dropdown-content + .input-asset {
	margin-top: 15px;
}
.liquidity-expanded h3 {
	margin-top: 15px;
	margin-bottom: 15px;
}
.dropdown-content.wallet .overview {
	background-color: #144a68;
	border-radius: 10px;
	margin-bottom: 15px;
}
.dropdown-content.wallet .list.assets {
	margin-bottom: 0;
}
#slider-boost {
	margin-top: 10px;
	margin-bottom: 10px;
	background: #144a68;
}
#rewards-new h3 {
	margin-bottom: 25px;
}
#boost .boost-increase {
	text-align: center;
	margin-top: 15px;
	padding-top: 15px;
}
#boost .metadata {
	margin-top: 0;
	margin-bottom: 0;
}
.boost-increase > div:nth-child(1) > div:nth-child(3) > dl:nth-child(1) {
	margin-top: 0;
	margin-bottom: 0 !important;
}
#rewards-new .panel-parent .metadata {
	margin: 0;
}
#rewards-new .panel-parent h2 + .grid {

}
#rewards-new .panel-parent {
	max-width: 350px;
}
.boost-adjust-actions > div:nth-child(1) > div:nth-child(1) {
	max-width: 170px;
}
.boost-adjust-actions p.text-red {
	max-width: 170px;
	float: right;
	margin-top: -5px;
}
.boost-adjust-actions {
	float: right;
}
.dropdown-content.locked-selector {
	right: -19px;
	margin-top: 12px;
	padding: 0;
	z-index: 9999999;
}
.dropdown-content.asset-selector input[type=text],
.dropdown-content.loan-selector input[type=text] {
	color: #ffffff;
	padding: 3px 20px;
	height: 40px;
	border-radius: 10px;
	outline: none;
	border: 2px solid #0c2a4d !important;
	width: 100%;
	background-color: #05193b !important;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset !important;
	font-size: 100% !important;
	-webkit-appearance: none;
	transition: border 0.3s ease;
}
.dropdown-content input[type=text]:hover,
.dropdown-content input[type=text]:focus,
.dropdown-content input[type=text]:active {
	border: 2px solid #2ca9b7 !important;
}

#loan span.loan-selector {
	font-size: 18px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	color: #2fccdc;
}
.loan-selector.dropdown-content {
	max-width: 750px;
	margin-right: 35px;
	width: 415px;
	top: 60px;
}
.loan-selector.dropdown-content::after {
	right: 260px;
}

/* Modal asset */

.modal-asset .list.wallet {
	margin-bottom: 15px;
}
.modal-asset .list.wallet .expanded .expanded-container ul.tabs li.active,
.modal-asset.list.wallet .expanded .expanded-container ul.tabs li:hover {
	border-bottom: 3px solid #2ca9b7;
	color: #ffffff;
	transition: border-bottom 0.2s ease, color 0.2s ease;
}
.modal-asset .asset-container {
	background-color: #144a68;
	padding: 35px;
	border-radius: 10px;
	position: relative;
}
.modal-asset .asset-container ul.tabs li.active,
.modal-asset .asset-container ul.tabs li:hover {
	border-bottom: 3px solid #2ca9b7;
	color: #ffffff;
	transition: border-bottom 0.2s ease, color 0.2s ease;
}
.modal-asset .asset-container h3 {
	margin-bottom: 15px;
	color: #ffffff;
font-family: 'tex-gyre-adventor-bold';
font-weight: normal;
}
.modal-asset .asset-container ul.tabs li {
	padding: 10px 15px;
	padding-top: 0;
	margin-right: 15px;
	border-bottom: 3px solid #144a68;
	color: rgba(255, 255, 255, 0.75);
	background-color: transparent;
	transition: border-bottom 0.3s ease, color 0.3s ease;
}
.modal-asset .asset-container input[type="text"] {
	background-color: #0b284c;
	border: 2px solid #0b284c;
}
.modal-asset .input-asset .asset {
		background-color: #0b284c;
	border: 2px solid #0b284c;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.modal-asset .asset-container ul.tabs {
	margin-bottom: 15px;
	border-bottom: 1px solid #37657f;
	width: 100%;
}
.modal-asset .asset-container .button {
	margin-top: 25px;
}
.modal-asset .asset-container .label {
	font-size: 14px !important;
}
.modal-asset tbody tr.active,
.modal-asset tbody tr:hover {
	color: #ffffff !important;
	cursor: default;
}
.modal-asset .asset-container::after {
	content: '';
	left: 51px;
	top: -24px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #144a68;
	border-width: 12px;
	margin-left: -10px;
	transform: rotate(0.5turn);
}
.modal-asset .list.wallet {
	margin-bottom: 0;
}



#boost h3 span {
	font-family: 'tex-gyre-adventor-regular';
}
#stake-input-baln {
	max-width: 75px;
	height: 35px;
	padding: 3px 10px;
	text-align: center;
}
#boost .locked-selector ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}
#boost .locked-selector ul li {
	padding: 10px 15px;
	transition: background-color 0.3s ease;
}
#boost .locked-selector ul li:first-of-type {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
#boost .locked-selector ul li:last-of-type {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
#boost .locked-selector ul li:hover {
	cursor: pointer;
	background-color: #2ca9b7;
	transition: background-color 0.2s ease;
}
#tooltip-boost .tooltip-content {
	min-width: 335px;
	left: -153px;
	bottom: 35px;
}

#boost #slider-boost.active {
	margin-top: 25px;
}

#boost .threshold.locked {
	left: 75%;
	height: 25px;
	margin-top: 0px;
	z-index: 0;
}
#boost .threshold.locked .metadata {
	margin-top: -10px;
}
.max-rewards {
	min-width: 120px;
	left: 35px;
	bottom: 55px;
	z-index: 99999;
}
.max-rewards::after {
	content: '';
	bottom: -50%;
	right: 43px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	border-width: 12px;
	margin-left: -10px;
}
.boost-increase .metadata dt {
	margin-bottom: 0;
}
#modal-liquidity-apy-list .list.supply tbody tr:hover {
	color: #ffffff;
	cursor: default;
}
.tooltip-content.liquidity-apy-list {
	left: -400px;
	width: 598px;
	bottom: -150px;
	text-align: center;
}
.tooltip-content.liquidity-apy-list::after {
	content: '';
	top: 0%;
	right: 85px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	border-width: 12px;
	margin-left: -10px;
	transform: rotate(0.5turn);
	margin-top: -25px;
}
.liquidity-apy-list dd {
	margin-left: 0;
	font-size: 16px;
}
.liquidity-apy-list > .grid + .grid {
	margin-top: 15px;
}
.modal {
	z-index: 999999;
}
.modal-overlay {
	z-index: 99999;
}
.threshold.liquidated .metadata {
	float: right;
	margin-right: 17px;
}
.threshold .metadata dd,
.threshold .metadata dt {
	text-align: right;
}
.loan-rewards {
	padding-left: 35px;
}
.panel .panel-parent.liquidity-expanded {
	max-width: 100%;
	margin: 0;
	background-color: #144a68;
	padding: 35px;
	border-radius: 15px;
}
.liquidity-withdraw .graphical-options > .grid-cell {
	text-align: center;
	border-radius: 15px;
	background-color: #0c2a4d;
	border: 2px solid #0c2a4d;
	transition: border 0.3s ease;
	padding: 10px;
	margin-right: 15px;
	max-width: 150px;
}
.liquidity-withdraw .graphical-options > .grid-cell:hover {
	border: 2px solid #2ca9b7;
	cursor: pointer;
	transition: border 0.2s ease;
}
.liquidity-withdraw .graphical-options > .grid-cell img {
	max-width: 35px;
	margin-bottom: 10px;
}
#slider-stake-lp,
#slider-stake-lp-1,
#slider-withdraw-lp-1 {
	background: #03334f;
}
.liquidity-expanded .stake-lp .noUi-target {
	margin-top: 0;
	margin-bottom: 10px;
}
.stake-lp .noUi-target + .label{
	margin-bottom: 15px;
}
.liquidity-withdraw .graphical-options {
	justify-content: center;
}
.liquidity-expanded .noUi-target {
	margin-top: 25px;
	margin-bottom: 25px;
}


.stake-lp.adjust .adjust-default,
.stake-lp.adjust .adjust-default {
	display: none;
}
.adjust-active {
	display: none;
}
.stake-lp.adjust .adjust-active,
.stake-lp.adjust .adjust-active {
	display: block;
}

/* Rebalancing modal */

#modal-rebalancing {
	max-width: 460px;
}
#modal-rebalancing h3 + p {
	text-align: center;
	max-width: 390px;
	margin-left: auto;
	margin-right: auto;
}
#modal-rebalancing .graphical-options {
	margin-top: 25px;
	margin-bottom: 25px;
}
#modal-rebalancing .graphical-options img {
	width: 175px;
}
#modal-rebalancing .graphical-options .text-bold {
	margin-top: 10px;
	margin-bottom: 5px;
}
#modal-rebalancing .graphical-options > .grid-cell {
	margin-right: 35px;
}
#modal-rebalancing .graphical-options > .grid-cell:last-of-type {
	margin-right: 0;
}
#modal-rebalancing .graphical-options > .grid-cell {
    margin-right: 25px;
    padding-right: 25px;
}
#modal-rebalancing .graphical-options > .grid-cell:last-of-type {
	margin-right: 0;
	padding-right: 0;
}

/*
*
* Banner
*
*/

.banner {
	position: relative;
	margin-top: 25px;
	padding: 15px 25px;
	border-radius: 10px;
	background: #0c2a4d;
	border: 2px solid #2ca9b7;
	line-height: 1.7;
}
.banner .close {
	max-width: 35px;
}
.banner .close img {
	width: 25px;
	cursor: pointer;
}

/*
*
* Select options
*
*/

.select-options .grid-cell {
	text-align: center;
	background-color: #144a68;
	border-radius: 100px;
	padding: 5px;
}
.select-options .grid-cell:hover {
	background-color: #2ca9b7;
}
.select-options .grid-cell.active {
	background-color: #2ca9b7;
}

#statistics .asset-selector.dropdown {
	font-size: 18px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	color: #2fccdc;
}

.clickable {
	cursor: pointer;
	transition: color 0.3s ease;
}
.clickable:hover {
	color: #2fccdc;
}


input[type="text"].liquidity-vote-input {
	display: none;
}
input[type="text"].liquidity-vote-input.active {
	display: inline-block;
	height: 35px;
	width: 75px;
}
#allocation-liquidity tr:not(.expanded):hover td {
	color: #ffffff;
	cursor: initial;
}
table#allocation-liquidity tbody tr td:first-of-type {
	background-position: 0px 17px;
}

/* Modal: Confirm liquidity votes */

#modal-confirm-vote-liquidity .values .asset {
	margin-right: 10px;
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 20px;
}
#modal-confirm-vote-liquidity .values .percentage {
	font-size: 20px;
}

.message-error {
	background-color: #fb6a6a;
}

.liquidity-details .tooltip-content.active {
	pointer-events: auto;
	opacity: 1;
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}
.liquidity-details .tooltip-content.active::after {
	content: '';
	position: absolute;
	left: 50%;
	top: initial;
	bottom: -24px;
	border: solid transparent;
	height: 0;
	width: 0;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2ca9b7;
	transform: initial;;
	border-width: 12px;
	margin-left: -12px;
}

/* ==========================================================================
	Liquidity incentives
========================================================================== */

.liquidity-incentives.your-pools th:nth-of-type(3),
.liquidity-incentives.your-pools th:nth-of-type(4),
.liquidity-incentives.your-pools th:nth-of-type(5) {
	text-align: right;
}
.liquidity-incentives.your-pools tr td:nth-of-type(3),
.liquidity-incentives.your-pools tr td:nth-of-type(4),
.liquidity-incentives.your-pools tr td:nth-of-type(5) {
	text-align: right;
}

.liquidity-incentives .expanded .metadata-container {
	margin-bottom: 15px;
}
.liquidity-incentives .expanded .input-asset input[type="text"] {
	border-bottom-right-radius: 0;
}
.liquidity-incentives .expanded .input-asset .asset {
	border-bottom-left-radius: 0;
}

/* ==========================================================================
	Markets
========================================================================== */

/*
*
* Blockchain test
*
*/

.blockchain-test ul li {
	display: inline-block;
}
.blockchain-test .rounded-square {
	border-radius: 5px;
	width: 20px;
}
.hexagon {
	width: 20px;
	aspect-ratio: 1;
	display: block;
	object-fit: cover;
	object-position: center;
	clip-path: polygon(
		54.7631% 2.75%,
		88.5382% 22.25%,
		93.3013% 30.5%,
		93.3013% 69.5%,
		88.5382% 77.75%,
		54.7631% 97.25%,
		45.2369% 97.25%,
		11.4618% 77.75%,
		6.6987% 69.5%,
		6.6987% 30.5%,
		11.4618% 22.25%,
		45.2369% 2.75%
	);
	filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

/* Use rounded corners when supported */
@supports (clip-path: path("M0 0")) {
  /* Pick ONE of these radius options (3%, 5%, 8%) */
  .hexagon--r3 {
    clip-path: path('M 54.5% 2.5981% L 88.8013% 22.4019% A 3% 3% 0 0 1 93.3013% 30.1962% L 93.3013% 69.8038% A 3% 3% 0 0 1 88.8013% 77.5981% L 54.5% 97.4019% A 3% 3% 0 0 1 45.5% 97.4019% L 11.1987% 77.5981% A 3% 3% 0 0 1 6.6987% 69.8038% L 6.6987% 30.1962% A 3% 3% 0 0 1 11.1987% 22.4019% L 45.5% 2.5981% A 3% 3% 0 0 1 54.5% 2.5981% Z');
  }
  .hexagon--r5 {
    clip-path: path('M 57.5% 4.3301% L 85.8013% 20.6699% A 5% 5% 0 0 1 93.3013% 33.6603% L 93.3013% 66.3397% A 5% 5% 0 0 1 85.8013% 79.3301% L 57.5% 95.6699% A 5% 5% 0 0 1 42.5% 95.6699% L 14.1987% 79.3301% A 5% 5% 0 0 1 6.6987% 66.3397% L 6.6987% 33.6603% A 5% 5% 0 0 1 14.1987% 20.6699% L 42.5% 4.3301% A 5% 5% 0 0 1 57.5% 4.3301% Z');
  }
  .hexagon--r8 {
    clip-path: path('M 62% 6.9282% L 81.3013% 18.0718% A 8% 8% 0 0 1 93.3013% 38.8564% L 93.3013% 61.1436% A 8% 8% 0 0 1 81.3013% 81.9282% L 62% 93.0718% A 8% 8% 0 0 1 38% 93.0718% L 18.6987% 81.9282% A 8% 8% 0 0 1 6.6987% 61.1436% L 6.6987% 38.8564% A 8% 8% 0 0 1 18.6987% 18.0718% L 38% 6.9282% A 8% 8% 0 0 1 62% 6.9282% Z');
  }
}

/*
*
* Markets Omm to refactor
*
*/

#markets .list tbody td {
	background-color: #0c2a4d;
}
#markets tr.expanded {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

#markets .list tbody td {
	transition: border-radius 0.6s ease, border 0.6s ease;
}
#markets .list tr th:first-of-type,
#markets .list tr td:first-of-type {
	padding-left: 35px;
	text-align: left;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
#markets .list td:last-child,
#markets .list th:last-child {
	padding-right: 35px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
#markets .list.markets .market-expanded {
	padding-bottom: 25px;
}
#markets h2 {
	display: inline-block;
}
#markets .list tbody tr.spacer {
	display: block;
	margin-top: 15px;
}
#markets table.list tbody tr:not(.active) {
	border-bottom: none;
}
#markets .list tbody tr.expanded > td {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#markets .overview > .panel {
	padding: 25px;
}
#markets .markets .overview .metadata,
#markets .performance-risk .metadata,
#markets .risk-container {
	margin: 0;
}
#markets .markets .overview .metadata {
	height: 50px;
}

/* Active */

#markets .list tr.active td:first-of-type {
	border-bottom-left-radius: 0;
}
#markets .list tr.active td:last-child {
	border-bottom-right-radius: 0;
}

#markets .market-expanded .slider {
	margin-top: 25px;
	margin-bottom: 25px;
}
#markets .supply-actions,
#markets .borrow-actions {
	margin-top: 15px;
}
#markets .supply .legend > .grid-cell:first-of-type,
#markets .borrow .legend > .grid-cell:first-of-type {
	margin-right: 25px;
}
#markets .toggle {
	transform: translateY(3px);
}
#markets .toggle.hide {
	display: none !important;
}
#markets .filters,
#markets .overview-toggles {
	margin-bottom: 25px;
}
#markets .list th {
	font-weight: normal;
	padding-bottom: 15px;
}
#markets #your-overview-content .metadata dd,
#markets #market-overview-content .metadata dd {
	font-size: 25px;
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
}
#markets .overview .metadata {
	margin: 0;
}
#markets .performance-risk {
	margin-bottom: 25px;
}

/* Risk slider */

#markets #risk #slider-markets-risk {
	margin-top: 12px;
}
#markets #risk .noUi-horizontal {
	height: 15px;
}
#markets #risk .noUi-target {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
#markets #risk [disabled] .noUi-handle {
	display: none;
}
#markets #risk [disabled] .noUi-connect {
	background-image: linear-gradient( 90deg, rgb(96,129,223) 0%, rgb(157,77,241) 100%); /* Purple */
}
#markets #risk [disabled].usdb .noUi-connect {
	background-image: linear-gradient( -135deg, #21cfc0 0%, #1fa6b3 100%) /* Bridge */
}
#markets #risk .value-risk-total {
  font-size: 20px;
}
#markets .panel [disabled].noUi-horizontal,
#markets .noUi-target {
	background: #144a68;
}
#markets .legend > .grid-cell:nth-child(2) label::before {
	background-color: #144a68;
}

/* Risk message */

#markets #risk .risk-message-noassets {
	margin-top: 18px;
	margin-bottom: 12px;
}

/* Risk warning */

#markets #risk .risk-message-liquidated {
	text-align: right;
	margin-right: 16px;
}
#markets #risk .risk-message-liquidated::after {
	content: '';
	width: 10px;
	height: 1px;
	background-color: #d3d9e7;
	position: absolute;
	transition: height 0.3s ease;
	z-index: 9;
	margin-top: 12px;
	margin-left: 5px;
}
#markets #risk .risk-message-liquidated span::after {
	content: '';
	width: 1px;
	height: 37px;
	background-color: #d3d9e7;
	position: absolute;
	transition: height 0.3s ease;
	z-index: 9;
	margin-top: 12px;
	margin-left: 15px;
}
.performance-risk h2 {
	margin-bottom: 25px;
}
.performance-risk .panel {
	padding: 25px;
}

/* Risk legend */

#markets #risk .legend {
	margin-top: 10px;
	margin-bottom: 8px;
}

/*
*
* To standardise 
*
*/

#markets .overview.panel,
#markets .markets.panel,
.navigation ul {
	border-radius: 25px;
	background-color: #0c2a4d;
	background-image: linear-gradient(171deg, rgba(44,169,183,0.37) 0%, rgba(44,169,183,0) 50%);
	background-size: 150%;
	/*border: 1px solid rgba(44, 169, 183, 0.5);*/
}
#markets .overview.panel {
	padding-top: 32px;
	border-radius: 35px;
}
#markets .overview.panel::before,
#markets .overview.panel::after,
#markets .markets.panel,
#markets .markets.panel::before,
#markets .markets.panel::after {
	border-radius: 35px !important;
}
#markets .overview.panel,
#markets .markets.panel {
	position: relative;
}
#markets .floating-panel::after,
#markets .markets.panel::after,
#markets .overview.panel::after,
.navigation ul::after,
.header .dot::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 25px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.35;
}
#markets ul.toggle li,
#trade ul.toggle li {
	background-color: #134563;
	background-image: linear-gradient(00deg, rgba(30,131,143,0.35) 0%, rgba(54,203,220,0.35) 100%);
	background-size: 150%;
	box-shadow: 0px 10px 10px 0px rgba(1, 0, 42, 0.01);
	transition: background-image 0.3s ease;
}
#markets ul.toggle li.active,
#markets ul.toggle li:hover,
#trade ul.toggle li.active,
#trade ul.toggle li:hover {
	background-image: linear-gradient(0deg, rgba(30,131,143,1) 0%, rgba(54,203,220,1) 100%);
	box-shadow: 0px 10px 10px 0px rgba(1, 0, 42, 0.1);
	transition: background-image 0.2s ease;
}

#markets .markets > .filters > .grid-cell:first-of-type {
	max-width: 400px;
}
#markets .markets > .filters > .grid-cell:last-of-type .sort-container {
	position: absolute;
	transform: translateY(8px) translateX(45px);
}
#markets .markets > .filters > .grid-cell:last-of-type .sort-container #sort-your-markets {
	color: #ffffff;
	border: 0;
	outline: 0;
	background: transparent;
}

#markets .panel-parent .input-asset .asset {
	background: linear-gradient(180deg, rgba(86,171,188,.32), rgba(86,171,188,.18));
	border: 1px solid rgba(86,171,188,.38);
	z-index: 9;
	position: relative;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}

/*
*
* Search
*
*/

#markets #search-markets {
	margin-bottom: 0;
	max-width: 485px;
	float: right;
	height: 35px;
}
#widgets .search.new,
#trade .search.new,
#markets .search.new {
	border-radius: 1000px;
	background-color: initial;
	border: none;
	position: relative;
	box-shadow: inset 0px 3px 25px 0px rgba(12, 42, 77, 0.25);
	background-image: url("../img/icon/search1.svg"),
						linear-gradient(180deg, rgba(10,37,69,0.75) 0%, rgba(14,50,81,0.75) 100%);
	font-size: 14px;
	background-repeat: no-repeat, no-repeat;
	background-size: 18px, cover;
	background-position: 15px 11px, center;
	padding-left: 50px;
}
#widgets .search.new:hover,
#widgets .search.new:active,
#widgets .search.new:focus,
#trade .search.new:hover,
#trade .search.new:active,
#trade .search.new:focus,
#markets .search.new:hover,
#markets .search.new:active,
#markets .search.new:focus {
	border: none !important;
}
#markets .search-container-new {
	width: 350px !important;
	position: relative;
	display: block;
	float: right;
	margin-top: 3px;
}
#markets .search-container-new::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 1000px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.75;
	transition: opacity 0.3s ease;
}
#markets .search-container-new:focus-within::after,
#markets .search-container-new:hover::after {
    opacity: 1;
	transition: opacity 0.2s ease;
}
#markets #search-markets {
	background-position: 15px 9px, center;
}

/*
*
* Overview inner panel
*
*/

#markets .floating-panel {
	position: relative;
	padding: 25px;
	border-radius: 25px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
#markets .floating-panel::after {
	opacity: 0.35;
}
#markets .floating-panel::before {
	background-color: #ffffff;
	opacity: 0.5;
	mix-blend-mode: soft-light;
	content:"";
	position:absolute;
	inset:0;
	border-radius: 25px;
}
#markets .overview .chart-supply-interest-container .earning-text,
#markets .overview .chart-borrow-interest-container .paying-text {
	position: relative;
	z-index: 2;
	text-align: center;
}
#markets .overview .chart-borrow-interest-container .paying-text a {
	color: #ada3ff;
}
#markets .overview .chart-borrow-interest-container .paying-text a::after {
	content: url('../img/icon/arrow-down-purple.svg');
}

/*
*
* Layout
*
*/

#markets .overview h2 {
	margin-bottom: 0;
}
#markets .markets h2 {
	margin-bottom: 5px;
}
#markets .overview .overview-toggles h2,
#markets .markets .filters h2 {
	margin-right: 10px;
	margin-bottom: 0;
}
#markets .markets .blockchain {
	box-shadow: 0px 15px 30px 0px rgba(9, 54, 92, 0.25);
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	border-radius: 25px;
}

/*
*
* All markets
*
*/

#markets .markets #markets-list-all .supply .legend.income > .grid-cell,
#markets .markets #markets-list-all .borrow .legend.income > .grid-cell {
	margin: 0;
	padding: 0;
	text-align: center;
}
#markets .markets #markets-list-all .borrow::after,
#markets .markets #markets-list-all .supply::after,
#modal-sign-in::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 15px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}
#modal-sign-in::after {
	border-radius: 25px;
	opacity: 0;
	transition: 0.2s ease opacity;
}
#modal-sign-in.modal-show::after {
	opacity: 0.5;
	transition: 2s ease opacity;
}

#markets .markets #markets-list-all .supply .legend.income > .grid-cell:first-of-type,
#markets .markets #markets-list-all .borrow .legend.income > .grid-cell:first-of-type {
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}
#markets .markets #markets-list-all .supply .legend.income,
#markets .markets #markets-list-all .borrow .legend.income {
	position: relative;
	padding: 15px 0;
	margin-top: 15px;
	margin-bottom: 0;
}
#markets .markets #markets-list-all .supply .legend.income .metadata,
#markets .markets #markets-list-all .borrow .legend.income .metadata {
	padding: 0 10px;
}
#markets .markets #markets-list-all .expanded .button.modal-trigger {
	margin-top: 10px;
}

/*
#markets .markets #markets-list-all .supply .legend.income::before,
#markets .markets #markets-list-all .borrow .legend.income::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 15px;
	mix-blend-mode: soft-light;
	background-color: #ffffff;
	background-image: none;
	opacity: 0.35;
	transition: opacity 0.3s ease;
}
*/

/*
*
* All markets: Calculator
*
*/

#markets-list-all .supply,
#markets-list-all .borrow {
  text-align: center;
}
.all-calculator {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem .8rem;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(86,171,188,.32), rgba(86,171,188,.18));
	border: 1px solid rgba(86,171,188,.38);
	z-index: 9;
	position: relative;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
.all-calculator .calc-input {
	width: 100px;
	padding: 5px 15px;
	border: 0;
	outline: 0;
	background: rgba(14,53,76,.42);
	color: #fff;
	border-radius: 15px;
	/*border: 2px solid transparent;*/
	height: 35px;
}
.all-calculator .calc-input:hover,
.all-calculator .calc-input:focus {
	border: none;
}
.all-calculator .calc-result {

}
.all-calculator .calc-period {
	border: 0;
	outline: 0;
	background: transparent;
	color: rgba(255,255,255,.9);
}
.all-calculator .symbol, .all-calculator .arrow {

}
.all-calculator.is-borrow{
	background: linear-gradient(180deg, rgba(138,125,238,.30), rgba(138,125,238,.18));
	border: 1px solid rgba(138,125,238,.35);
}

/*
*
* All markets: Supply / Borrow actions
*
*/

#markets .markets #markets-list-all .expanded .all-cta > p {
	position: relative;
	z-index: 2;
	color: rgba(255,255,255,0.75);
	font-size: 14px;
	margin-bottom: 15px;
	margin-top: 10px;
}
#markets .markets #markets-list-all .expanded .add-to-wallet,
#markets .markets #markets-list-all .expanded .need-supply {
	margin-top: 10px;
}
#markets .markets #markets-list-all .expanded .all-cta .dropdown-content {
	width: 375px;
	margin-top: 0;
}
#markets .markets #markets-list-all .expanded .all-cta .dropdown::after {
	margin-left: 3px;
}
#markets .markets #markets-list-all .list .list-item::before {

}
#markets .markets #markets-list-all .expanded .all-cta .list .list-item::before {

}

/*
*
* All markets: Supply
*
*/

#markets .markets #markets-list-all .supply-container {
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	margin-right: 25px;
	padding-right: 25px;
}
#markets .markets #markets-list-all .supply {
	position: relative;
	border-radius: 15px;
	height: 100%;
	padding: 25px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	transition: border 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
#markets .markets #markets-list-all .supply::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 15px;
	background-image: linear-gradient(135deg, rgba(32,121,143,1) 0%, rgba(19,70,109,1) 100%);
	opacity: 1;
	transition: opacity 0.3s ease;
}

/*
*
* All markets: Borrow
*
*/

#markets .markets #markets-list-all .borrow {
	border-radius: 15px;
	height: 100%;
	padding: 25px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	transition: border 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
#markets .markets #markets-list-all .borrow::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 15px;
	background-image: linear-gradient(135deg, rgb(86,106,181) 0%, rgb(36,56,129) 100%);
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

/*
*
* All markets: Borrow
*
*/

#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span {
	display: inline-block;
}
#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span::after {
	content: url(../img/icon/chevron-right-white.svg);
	display: inline-block;
	width: 5px;
	margin-left: 7px;
	opacity: 0.5;
	transform: translateY(-1px) rotate(0deg);
	transition: transform 0.3s ease, opacity 0.3s ease;
}
#markets .markets .blockchain .list .list-item:hover > .grid:first-of-type > .grid-cell:first-of-type span::after {
	transform: translateY(-1px) translateX(3px) rotate(0deg);
	transition: transform 0.2s ease, opacity 0.2s ease;
	opacity: 1;
}
#markets .markets .blockchain .list .list-item.active > .grid:first-of-type > .grid-cell:first-of-type span::after {
	opacity: 1;
	transition: transform 0.2s ease, opacity 0.2s ease;
	transform: translateY(2px) translateX(4px) rotate(90deg);
}

/*
*
* Markets: Misc.
*
*/

#markets .markets #markets-list-all .chart-box {

}
#markets .markets .blockchain .overview {
	padding: 25px;
	padding-top: 35px;
	padding-bottom: 15px;
}
#markets .markets .blockchain {
	position: relative;
}
#markets .markets .separator-full {
	margin-top: 35px;
	margin-bottom: 35px;
}
#markets-list-your {
	position: relative;
}
#markets .markets .blockchain::before {
	background-color: #ffffff;
	opacity: 0.25;
	mix-blend-mode: soft-light;
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 25px;
}
#markets .markets .blockchain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 25px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.35;
	transition: opacity 0.2s ease, border 0.2s ease;
}

/*
*
* Markets: Unconfirmed data indicator
*
*/
/*
#markets .markets .blockchain.adjust-supply-active::after {
	border: 1px solid #2ca9b7;
	mix-blend-mode: initial;
	opacity: 0.9;
}
#markets .markets .blockchain.adjust-borrow-active::before {

}
#markets .markets .blockchain.adjust-borrow-active::after {

}
#markets .markets .blockchain.adjust-borrow-active .overview {
	position: relative;
}
#markets .markets .blockchain .overview::before {
	content: 'Unconfirmed data';
	display: block;
	position: absolute;
	text-align: center;
	width: 300;
	top: -20px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	border-radius: 999px;
	border: 1px solid transparent;
	z-index: 9;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	transition: opacity 0.3s ease;
	padding: 10px 20px;
	font-size: 14px;
	text-align: center;
	left: 41%;
	background-color: rgba(16, 58, 90, 0.9);
	background-image: linear-gradient(135deg, rgba(78,97,171,0.5) 0%, rgba(54,73,146,0.5) 100%);
}
#markets .markets .blockchain.adjust-supply-active .overview::before {
	border: 1px solid #2ca9b7;
	background-color: rgba(16, 58, 90, 0.9);
	background-image: linear-gradient(135deg, rgba(32,121,143,0.5) 0%, rgb(23,86,120,0.5) 100%);
}
#markets .markets .blockchain.adjust-supply-active .overview::before,
#markets .markets .blockchain.adjust-borrow-active .overview::before {
	opacity: 1;
	transition: opacity 0.2s ease;
}
*/



#markets .markets .blockchain .overview > .grid > .grid-cell:first-of-type {
	padding-left: 80px;
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 25px;
	max-width: 25%;
}
#markets .markets .blockchain .overview > .grid > .grid-cell:first-of-type::before {
	content: '';
	display: block;
	position: absolute;
	height: 90px;
	width: 90px;
	left: -10px;
	top: -20px;
	background-image: url(../img/logo/default.png);
	background-size: contain;
	background-repeat: no-repeat;
}

/*
*
* Markets: Blockchain header images
*
*/

/* Arbitrum */

#markets .markets .blockchain.arbitrum .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/arbitrum-blockchain.png);
}

/* Avalanche */

#markets .markets .blockchain.avalanche .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/avalanche-blockchain.png);
}

/* Base */

#markets .markets .blockchain.base .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/base-blockchain.png);
}

/* BNB */

#markets .markets .blockchain.bnbchain .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/bnb-blockchain.png);
}

/* Injective */

#markets .markets .blockchain.injective .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/injective-blockchain.png);
}

/* Optimism */

#markets .markets .blockchain.optimism .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/optimism-blockchain.png);
}

/* Polygon */

#markets .markets .blockchain.polygon .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/pol-block-shadow-v1.png);
}

/* Stellar */

#markets .markets .blockchain.stellar .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/stellar-blockchain.png);
}

/* Solana */

#markets .markets .blockchain.solana .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/solana-blockchain.png);
}

/* Sonic */

#markets .markets .blockchain.sonic .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/sonic-blockchain.png);
}

/* Sui */

#markets .markets .blockchain.sui-chain .overview > .grid > .grid-cell:first-of-type::before {
	background-image: url(../img/logo/sui-blockchain.png);
}

/*
*
* Markets: Blockchain header images
*
*/

#markets .markets .blockchain .list {
	padding: 25px;
}
#markets .markets .blockchain .list .list-header,
#markets .markets #markets-list-all .list .list-header {
	margin-bottom: 15px;
}
#markets .markets .blockchain .list .list-item,
#markets .markets #markets-list-all .list .list-item {
	border-radius: 15px;
	padding: 10px 25px;
	transition: border 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
}
#markets .markets #markets-list-all .list .list-item.active,
#markets .markets #markets-list-all .list .list-item.active::before,
#markets .markets #markets-list-all .list .list-item.active::after {
	border-radius: 25px;
	transition: border-radius 0.2s ease;
}
#markets .markets #markets-list-all .list .list-item.active::after {
	opacity: 0.35;
}
#markets .markets #markets-list-your .list .list-item {
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017),
				0 6.7px 5.3px rgba(0, 0, 0, 0.024),
				0 12.5px 10px rgba(0, 0, 0, 0.03),
				0 22.3px 17.9px rgba(0, 0, 0, 0.036),
				0 41.8px 33.4px rgba(0, 0, 0, 0.043),
				0 100px 80px rgba(0, 0, 0, 0.06);
}

/*
*
* Your markets: Supplied list items
*
*/

#markets .markets #markets-list-your .list .supplied .list-item::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 15px;
	background-image: linear-gradient(135deg, rgba(32,121,143,1) 0%, rgba(19,70,109,1) 100%);
	opacity: 0.5;
	transition: opacity 0.3s ease;
}
#markets .markets #markets-list-your .list .supplied .list-item::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 15px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.25;
	transition: opacity 0.3s ease;
}
#markets .markets #markets-list-your .list .supplied .list-item:hover::before,
#markets .markets #markets-list-your .list .supplied .list-item.active::before {
	opacity: 1;
	transition: opacity 0.2s ease;
}
#markets .markets #markets-list-your .list .supplied .list-item:hover::after,
#markets .markets #markets-list-your .list .supplied .list-item.active::after {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

/*#markets .markets #markets-list-your .list .supplied .available {
	position: relative;
	padding: 15px;
	margin-top: 15px;
	border-radius: 25px;
	overflow: hidden;
	box-shadow: inset 0px 0px 15px 0px rgba(4, 12, 19, 0.15);
}
#markets .markets #markets-list-your .list .supplied .available::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 25px;
	mix-blend-mode: soft-light;
	background-color: #60646a;
	pointer-events:none;
}*/
#markets #markets-list-your .available .separator-full {
	margin-top: 30px;
	margin-bottom: 30px;
}
#markets #markets-list-your .available.solo .separator-full {
	margin-top: 9px;
	display: none;
}
#markets #markets-list-your .available .separator-full::before {
	width: 32%;

}
#markets #markets-list-your .available .separator-full::after {
	width: 32%;
}

/*
*
* Your markets: Borrowed list items
*
*/

#markets .markets #markets-list-your .list .borrowed .list-item.new-borrow::before {
	background-image: none;
}
#markets .markets #markets-list-your .list .borrowed .list-item:not(.new-borrow):not(:where(.loan-blockchain-selector.dropdown-content *))::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 15px;
	background-image: linear-gradient(135deg, rgba(86,106,181,1) 0%, rgba(36,56,129,1) 100%);
	opacity: 0.4;
	transition: opacity 0.3s ease;
}
#markets .markets #markets-list-your .list .borrowed .list-item:not(.new-borrow)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 15px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.25;
	transition: opacity 0.3s ease;
}
#markets .markets #markets-list-your .list .borrowed .list-item:hover::before,
#markets .markets #markets-list-your .list .borrowed .list-item.active::before {
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
#markets .markets #markets-list-your .list .borrowed .list-item:hover::after,
#markets .markets #markets-list-your .list .borrowed .list-item.active::after {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

/*
*
* All market list items
*
*/

#markets .markets #markets-list-all > .list > .list-item {
	background-color: initial;
	box-shadow: 17.678px 17.678px 90px 0px rgba(1, 0, 42, 0.46);
}
#markets .markets #markets-list-all .expanded {
	margin-bottom: 15px;
	border-top: none;
	margin-top: 25px;
	padding: 0;
}
#markets .markets #markets-list-all .supply-actions,
#markets .markets #markets-list-all .borrow-actions {
	margin-bottom: 0;
}
#markets .markets #markets-list-all .list:not(.loan-blockchain) > .list-item::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 15px;
	mix-blend-mode: soft-light;
	background-color: #ffffff;
	background-image: none;
	opacity: 0.35;
	transition: opacity 0.3s ease, border-radius 0.3s ease;
}
#markets .markets #markets-list-all .list .list-item.active::before,
#markets .markets #markets-list-all .list .list-item:hover::before {
	opacity: 0.75;
	transition: opacity 0.2s ease;
}
#markets .markets #markets-list-all .list .list-item.active::before {
	opacity: 0.25;
	border-radius: 25px;
	transition: opacity 0.3s ease, border-radius 0.3s ease;
}
#markets .markets #markets-list-all .list .list-item::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 15px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.25;
	transition: opacity 0.3s ease;
}

/*
*
* Your markets: Blockchain header
*
*/

#markets .markets #markets-list-your .blockchain .overview .metadata .overview-metadata-borrowed,
#markets .markets #markets-list-your .blockchain .overview .metadata .overview-metadata-risk {
	opacity: 0;
	transition: opacity 0.2s ease;
}
#markets .markets #markets-list-your .blockchain .overview .metadata .overview-metadata-borrowed.active,
#markets .markets #markets-list-your .blockchain .overview .metadata .overview-metadata-risk.active {
	opacity: 1;
	transition: opacity 0.2s ease;
}
#markets .markets .blockchain .overview {

}
#sort-your-markets option.hide { display: none; }

/* Tooltip */

#markets .markets .blockchain .overview .tooltip-risk .tooltip-content {
	width: 250px;
	left: -111px;
	bottom: 35px;
}
#markets .markets .blockchain .overview .tooltip-risk .tooltip-content ul {
	padding-left: 20px;
	padding-bottom: 0;
	margin-bottom: 3px;
}

/*
*
* Markets Borrow blockchain selector
*
*/

#markets .markets .loan-blockchain-selector.dropdown-content {
	z-index: 9;
	left: 0;
	margin-top: 20px;
	width: 90%;
	margin-left: 5%;
	background-image: linear-gradient(135deg, rgba(86,106,181,0.75), rgba(36,56,129,0.75));
	border: 1px solid #4a67b9;
	border-radius: 25px;
}
#markets .markets .loan-blockchain-selector.dropdown-content .search {
	font-size: 14px;
	border: 2px solid transparent;
	background-color: #253b7b;
	transition: border 0.3s ease;
}
#markets .markets .loan-blockchain-selector.dropdown-content .search:hover,
#markets .markets .loan-blockchain-selector.dropdown-content .search:active {
	transition: border 0.2s ease;
	border: 2px solid #8a7dee;
}
#markets .markets .loan-blockchain-selector.dropdown-content .search:hover,
#markets .markets .loan-blockchain-selector.dropdown-content .search:focus,
#markets .markets .loan-blockchain-selector.dropdown-content .search:active {
	border: 2px solid #8a7dee !important;
}
#markets .markets .loan-blockchain-selector.dropdown-content .list.blockchains,
#markets .markets .loan-blockchain-selector.dropdown-content .list.blockchains .loan-blockchain {
	padding: 0;
}
/*#markets .markets .loan-blockchain-selector.dropdown-content .list.blockchains .loan-blockchain .list-item::before {
	background-image: none;
}*/
#markets .markets .loan-blockchain-selector.dropdown-content .list.blockchains .loan-blockchain .list-item {
	padding: 20px 25px;
	background-image: linear-gradient(135deg, rgba(86,106,181,0.4) 0%, rgba(36,56,129,0.4) 100%);
}
#markets .markets .loan-blockchain-selector.dropdown-content .list.blockchains .loan-blockchain .list-item > .grid-cell:first-of-type {
	text-align: left;
}

/*
*
* All markets Borrow blockchain selector
*
*/

#markets .markets #markets-list-all .expanded .all-cta .dropdown-content {
	z-index: 9;
	left: 0;
	margin-top: -10px;
	width: 90%;
	margin-left: 5%;
	background-image: linear-gradient(135deg, rgba(32,121,143,1) 0%, rgba(19,70,109,1) 100%);
	border: 1px solid #25728a;
	border-radius: 25px;
}
#markets .markets #markets-list-all .expanded .borrow .all-cta .dropdown-content {
	background-image: linear-gradient(135deg, rgba(86,106,181,0.75), rgba(36,56,129,0.75));
	border: 1px solid #4a67b9;
}
#markets .markets #markets-list-all .expanded .all-cta .dropdown-content::after {
	display: none;
}
#markets .markets #markets-list-all .expanded .all-cta .dropdown-content .list.blockchains .list-item > .grid-cell:first-of-type {
	text-align: left;
}
#markets .markets #markets-list-all .expanded .all-cta .dropdown-content .list.blockchains .list-item {
	padding: 20px 25px;
}
#markets .markets #markets-list-all .expanded .borrow .all-cta .dropdown-content .list.blockchains .list-item {
	background-image: linear-gradient(135deg, rgba(86,106,181,0.4) 0%, rgba(36,56,129,0.4) 100%);
}

/*
*
* Markets misc.
*
*/

/* Market borrow select */

#markets .markets .borrowed *::-moz-selection,
#markets .markets .borrow ::-moz-selection {
	background: #8f85f2;
	color: #ffffff;
	text-shadow: none;
}
#markets .markets .borrowed *::-webkit-selection,
#markets .markets .borrow ::-webkit-selection {
	background: #8f85f2;
	color: #ffffff;
	text-shadow: none;
}
#markets .markets .borrowed *::selection,
#markets .markets .borrow ::selection {
	background: #8f85f2;
	color: #ffffff;
	text-shadow: none;
}
#markets .markets .borrowed a::-moz-selection,
#markets .markets .borrowed a::-webkit-selection,
#markets .markets .borrowed a::selection,
#markets .markets .borrow a::-moz-selection,
#markets .markets .borrow a::-webkit-selection,
#markets .markets .borrow a::selection {
	color: #ffffff;
}

/*
*
* Markets misc.
*
*/

#markets .noUi-connects {
	overflow: visible !important;
}
#markets .noUi-connect {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.15);
}
#markets .markets .blockchain .overview .metadata-highlight {
	font-size: 18px;
}
#markets .markets .blockchain .list .list-item {
	position: relative;
}
#markets .markets .blockchain .list .borrowed .list-item.new-borrow .list-item {

}
#markets .markets .blockchain .list .list-item + .list-item,
#markets .markets #markets-list-all .list .list-item + .list-item {
	margin-top: 15px;
}
#markets .markets .blockchain .list .list-item:hover,
#markets .markets #markets-list-all .list .list-item:hover,
#markets .markets #markets-list-all .list .list-item.active {
	transition: border 0.2s ease;
	color: inherit;
}
#markets .markets .blockchain .list .list-header > .grid-cell:first-of-type,
#markets .markets #markets-list-all .list .list-header > .grid-cell:first-of-type {
	padding-left: 25px;
}
#markets .markets .blockchain .list .list-header > .grid-cell:nth-of-type(2),
#markets .markets .blockchain .list .list-header > .grid-cell:nth-of-type(3),
#markets .markets .blockchain .list .list-item > .grid-cell:nth-of-type(2),
#markets .markets #markets-list-all .list .list-item > .grid-cell:nth-of-type(2),
#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(2),
#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(2),
#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(3),
#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(3),
#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(4),
#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(4),
#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(5),
#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(5),
#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(6),
#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(6) {
	text-align: right;
}
#markets .markets #markets-list-all > .list > .list-header > .grid-cell:nth-of-type(2) {
	transform: translateX(35px);
}
#markets .markets #markets-list-all > .list > .list-header > .grid-cell:nth-of-type(3) {
	transform: translateX(25px);
}
#markets .markets #markets-list-all > .list > .list-header > .grid-cell:nth-of-type(4) {
	transform: translateX(15px);
}
#markets .markets #markets-list-all > .list > .list-header > .grid-cell:nth-of-type(5) {
	transform: translateX(15px);
}
#markets .markets #markets-list-all > .list > .list-header > .grid-cell:nth-of-type(6) {
	transform: translateX(10px);
}
#markets .markets .blockchain .list .list-header .grid-cell:last-of-type,
#markets .markets #markets-list-all .list .list-header > .grid-cell:last-of-type {
	text-align: right;
	padding-right: 25px;
}
#markets .markets .blockchain .list .list-item > .grid-cell:last-of-type  {
	text-align: right;
}
#markets .markets .blockchain .list .list-item > .grid-cell:first-of-type,
#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:first-of-type,
#markets .markets #markets-list-all .list .list-item > .grid:first-of-type > .grid-cell:first-of-type {
	padding-left: 50px;
}
#markets .markets .blockchain .list .list-item > .grid-cell:first-of-type::before,
#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:first-of-type::before,
#markets .markets #markets-list-all .list .list-item > .grid:first-of-type > .grid-cell:first-of-type::before,
#markets .markets .blockchain .list .borrowed .new-borrow .expanded .list-item > .grid:first-of-type > .grid-cell:first-of-type::before {
	width: 40px;
	height: 40px;
	background-color: initial;
	margin-top: 0;
	outline: none;
	top: 3px;
	left: 0px;
	background-repeat: no-repeat;
}
#markets .markets .blockchain .list .borrowed .new-borrow .expanded .list-item > .grid:first-of-type {
	height: 43px;
}
#markets .markets .blockchain .list .borrowed .new-borrow .expanded .list-item > .grid:first-of-type > .grid-cell:first-of-type {
	text-align: left;
}
#markets .markets .blockchain .list .borrowed .new-borrow .expanded .list-item > .grid:first-of-type > .grid-cell:first-of-type::before {
	content: '';
	display: block;
	background-size: contain;
	position: absolute;
	border-radius: 100%;
	top: 1px;
}
#markets .markets .blockchain .list .borrowed .new-borrow .expanded .list-item > .grid:first-of-type > .grid-cell:last-of-type {
	padding-right: 0;
}
#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span,
#markets .markets #markets-list-all .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span {
	transform: translateY(11px);
	display: block;
	/*font-family: 'tex-gyre-adventor-bold';*/
	font-weight: normal;
}

#chart-total-supply-interest,
#chart-total-borrow-interest {
	position: relative;
}
#chart-total-supply-interest,
#chart-total-borrow-interest {
	height: 100px;
}

/*
*
* Overview interest chart tooltips
*
*/

.lwc-tooltip {
	position: absolute;
	pointer-events: none;
	padding: 5px 10px;
	background-color: rgba(16, 58, 90, 0.9);
	background-image: linear-gradient(135deg, rgba(32,121,143,0.5) 0%, rgb(23,86,120,0.5) 100%);
	border-radius: 12px;
	color: #fff;
	box-shadow: 7px 7px 25px 0px rgba(1, 0, 42, 0.25);
	border: 1px solid rgba(44, 169, 183, 0.5);
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 99;
	text-align: center;
	min-width: 80px;
}
.lwc-tooltip .date {
	font-size: 12px;
	margin-bottom: 2px;
	color: rgba(255,255,255,0.75);
}
.lwc-tooltip .value {
	margin-bottom: 2px;
	font-size: 14px;
}
#chart-total-borrow-interest .lwc-tooltip,
.chart-borrow .lwc-tooltip {
	border: 1px solid rgba(156, 141, 247, 0.5);
	background-color: rgba(16, 58, 90, 0.9);
	background-image: linear-gradient(135deg, rgba(78,97,171,0.5) 0%, rgba(54,73,146,0.5) 100%);
}

/*
*
* Asset interest chart tooltips
*
*/

.chart-supply .lwc-tooltip,
.chart-borrow .lwc-tooltip {
	min-width: 100px;
}

#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span,
#markets .markets #markets-list-all .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span {
	display: inline-block;
}
#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span::after,
#markets .markets #markets-list-all .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span::after {
	content: url(../img/icon/chevron-right-white.svg);
	display: inline-block;
	width: 5px;
	margin-left: 7px;
	opacity: 0.5;
	transform: translateY(-1px) rotate(0deg);
	transition: transform 0.3s ease, opacity 0.3s ease;
}
#markets .markets .blockchain .list .list-item:hover > .grid:first-of-type > .grid-cell:first-of-type span::after,
#markets .markets #markets-list-all .list .list-item:hover > .grid:first-of-type > .grid-cell:first-of-type span::after {
	transform: translateY(-1px) translateX(3px) rotate(0deg);
	transition: transform 0.2s ease, opacity 0.2s ease;
	opacity: 1;
}
#markets .markets .blockchain .list .list-item.active > .grid:first-of-type > .grid-cell:first-of-type span::after,
#markets .markets #markets-list-all .list .list-item.active > .grid:first-of-type > .grid-cell:first-of-type span::after {
	opacity: 1;
	transition: transform 0.2s ease, opacity 0.2s ease;
	transform: translateY(2px) translateX(4px) rotate(90deg);
}


#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:last-of-type span,
#markets .markets #markets-list-all .list .list-item > .grid:first-of-type > .grid-cell:nth-of-type(4) span,
#markets .markets #markets-list-all .list .list-item > .grid:first-of-type > .grid-cell:last-of-type span {
	transform: translateY(11px);
	display: block;
}
#markets .markets .blockchain .list .supplied {
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	margin-right: 25px;
	padding-right: 25px;
}
#markets .markets .blockchain .list .borrowed {

}
#markets .list .list-item .expanded .grid-cell:nth-of-type(1)::before {
	display: none;
}
#markets .list .list-item .expanded {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 15px;
	margin-top: 15px;
	cursor: default;
	position: relative;
}
#markets .list .list-item .expanded img {
	max-width: 100%;
	margin-top: 25px;
	margin-bottom: 20px;
}
#markets .legend > .grid-cell:nth-child(2) label::before {
	background-color: #0e4362;
}

/* Income legend */

#markets .legend.income {
	margin-top: 10px;
	margin-bottom: 10px;
}
#markets .legend.income > .grid-cell {
	padding-left: 30px;
}
#markets .legend.income .metadata {
	margin: 0;
}

/* Actions */

#markets .supply-actions,
#markets .borrow-actions {
	margin-bottom: 15px;
}

#markets .markets .expanded span.apy {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	font-size: 20px;
}
#markets .markets .supplied .expanded span.apy {
	background: -webkit-linear-gradient(90deg, #29b0bf, #36cbdc);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#markets .markets .borrowed .expanded span.apy {
	background: -webkit-linear-gradient(90deg, #9e8afb, #a199f9);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#markets #slider-supply,
#markets #slider-borrow {
	margin-bottom: 25px;
}
#markets .panel [disabled].noUi-horizontal,
#markets .noUi-target {
	background-color: #0e4362;
}
#markets .borrowed [disabled].noUi-horizontal,
#markets .borrowed .noUi-target {
	background-color: #203777;
}
#markets .overview .metadata [disabled].noUi-horizontal,
#markets .overview .metadata .noUi-target {
	background-color: #123f5e;
}
#markets .borrowed .legend > .grid-cell:nth-child(2) label::before {
	background-color: #203777;
}
#markets .borrowed .noUi-connect,
#markets .overview .metadata .noUi-connect {
	background-image: linear-gradient(180deg, rgb(145, 136, 243) 0%, rgb(119, 95, 225) 100%);
}
#markets .overview .metadata .alert .noUi-connect {
	background-image: linear-gradient(0deg, rgb(255, 57, 74) 0%, rgb(255, 88, 102) 100%);
}
#markets .overview .metadata .alert .risk-number {
	background: linear-gradient(0deg, rgb(255, 57, 74) 0%, rgb(255, 88, 102) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#markets .overview .metadata .alert .risk-number + .tooltip > .tooltip-content {
	color: #ffffff;
}
#markets .markets .borrowed .button,
#modal-borrow-confirm .action-commit-borrow,
.button-purple {
	border-top: 1px solid #a59eff;
	background-image: linear-gradient(0deg, rgb(118,93,224) 0%, rgb(146,138,244) 100%);
}
#modal-borrow-confirm .modal-content {
	border: 2px solid #8e83f1;
}
#markets .markets .borrowed .legend > .grid-cell:nth-child(1) label::before {
	background-image: linear-gradient(0deg, rgb(118,93,224) 0%, rgb(146,138,244) 100%);
}
#markets .markets .risk-text {
	margin-top: 5px;
	display: block;
	margin-bottom: 10px;
}
#markets .markets .risk-text .risk-label {
	color: rgba(255,255,255,0.75);
	font-size: 14px;
}
#markets .markets .no-borrow .risk-text .label {
	font-size: 12px;
	transform: translateY(10px) translateX(24px);
	display: block;
	max-width: 60%;
}
.overview .metadata .risk-slider {
	height: 15px;
	border-radius: 7px;
}
.overview .metadata .risk-slider .noUi-connects {
	border-radius: 7px;
}
#markets .metadata .risk-slider .noUi-connect {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}





/* lay out the three blocks 
.markets .blockchain .overview .grid.metadata{
	column-gap:2rem;
}*/
/* every cell becomes a reference box for the rule
.markets .blockchain .overview .grid.metadata .grid-cell{
	position:relative;
} */
/* draw the rule halfway across the gap
.markets .blockchain .overview .grid.metadata .grid-cell:not(:last-child)::after{
	content:"";
	position:absolute;
	top:0.25rem;
	bottom:0.25rem;
	width:1px;
	background:#1f4c7b;
	background: rgba(255, 255, 255, 0.15);
	/* 1. start at the cell’s right edge
	left:100%;        */
	/* 2. nudge it left by half the gap (2rem/2)
} */


.overview-metadata-supplied {
	text-align: right;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}
#markets .markets .overview .overview-metadata-supplied > .metadata {
	margin-right: 50px;
}
#markets .markets .overview .overview-metadata-borrowed > .metadata {
	margin-left: 50px;
}





#markets .markets .overview .metadata > .grid-cell:nth-of-type(1),
#markets .markets .overview .metadata > .grid-cell:nth-of-type(2) {
	transform: translateY(2px);
}
#markets .markets .overview .metadata > .grid-cell:nth-of-type(3) {
	transform: translateY(-5px);
}
#markets .markets .blockchain .overview .metadata.supplied-only > .grid-cell > span::after {
	display: none;
}
#markets .markets .blockchain .overview .metadata.supplied-only > .grid-cell:nth-of-type(1) {
	transform: translateY(0px);
}
#markets .markets .blockchain .overview .metadata > .grid-cell > span::after {
	content: '';
	display: inline-block;
	height: 30px;
	width: 1px;
	background-color: rgba(255, 255, 255, 0.15);
	position: absolute;
	right: 33px;
	margin-top: -1px;
}

#markets .markets .blockchain + .blockchain {
	margin-top: 35px;
}
#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:nth-of-type(2) {
	text-align: right;
	padding-right: 30px;
}
#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:nth-of-type(3) {
	text-align: right;
}

/* Old Settlement styles */

.settlement {
	margin-bottom: 15px;
	text-align: center;
	transition: margin 0.2s ease;
}
.settlement p {
	font-size: 14px;
	margin-top: -5px;
}
.expanded.indicator-padding .settlement {
	margin-bottom: 35px;
	transition: margin 0.2s ease;
}

/* New Settlement styles */

.settlement {
	display: inline-block;
	padding: 10px 25px;
	padding-top: 5px;
	background: linear-gradient(180deg, rgba(138,125,238,.30), rgba(138,125,238,.18));
	border: 1px solid rgba(138,125,238,.35);
	border-radius: 25px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	margin-bottom: 25px;
	margin-left: 33px;
}
.expanded.indicator-padding .settlement {
	margin-bottom: 15px;
}

/* Center the "chip" and keep it shrink-to-fit */
.settlement{
  display: table;               /* instead of inline-block */
  margin: 0 auto 25px;          /* replaces margin-left: 33px */
  padding: 5px 25px 10px;       /* keep your existing padding */
  background: linear-gradient(180deg, rgba(138,125,238,.30), rgba(138,125,238,.18));
  border: 1px solid rgba(138,125,238,.35);
  border-radius: 25px;
  box-shadow: 0 2.8px 2.2px rgba(0,0,0,.017),
              0 6.7px 5.3px rgba(0,0,0,.024),
              0 12.5px 10px rgba(0,0,0,.03),
              0 22.3px 17.9px rgba(0,0,0,.036),
              0 41.8px 33.4px rgba(0,0,0,.043),
              0 100px 80px rgba(0,0,0,.06);
}

.expanded.indicator-padding .settlement{
  margin: 0 auto 35px;          /* keep your tighter bottom margin in this context */
}

/*
*
* Separator
*
*/

.separator-full span {
	padding-left: 15px;
	padding-right: 15px;
	font-size: 14px;
}
.separator-full::before {
	content: '';
	width: 40%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.15);
	display: block;
	margin-bottom: -14px;
}
.separator-full::after {
	content: '';
	width: 40%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.15);
	display: block;
	margin-top: -8px;
	margin-left: auto;
}
#markets #markets-list-your .supply-slider,
#markets #markets-list-your .borrow-slider {
	margin-bottom: 25px;
}

/*
*
* New borrow
*
*/

#markets .markets .blockchain .list .borrowed .new-borrow {
	background-color: initial;
	text-align: center;
	font-size: 14px;
	padding: 20px 25px;
	max-height: 500px;
	overflow-y: scroll;
	box-shadow: 17px 17px 90px 0px rgba(1, 0, 42, 0) !important;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Make the scroller explicit and form a stacking context */
#markets .markets .blockchain .list .borrowed .new-borrow {
  overflow-y: auto;         /* scroll container */
  position: relative;       /* for z-index */
}
#markets .markets .blockchain .list .borrowed .new-borrow .new-borrow__sticky {
	transition: background-color 0.3s ease;
	background-color: transparent;
}
/* The sticky header wrapper */
#markets .markets .blockchain .list .borrowed .new-borrow.active .new-borrow__sticky {
	position: sticky;
	top: 0;
	z-index: 3;
	backdrop-filter: blur(15px);

	background-image: linear-gradient(135deg, rgba(49, 78, 127, 0.95) 0%, rgba(32, 63, 116, 0.95) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017),
				0 6.7px 5.3px rgba(0, 0, 0, 0.024),
				0 12.5px 10px rgba(0, 0, 0, 0.03),
				0 22.3px 17.9px rgba(0, 0, 0, 0.036),
				0 41.8px 33.4px rgba(0, 0, 0, 0.043),
				0 100px 80px rgba(0, 0, 0, 0.06);
	transition: background-color 0.5s ease;
}

/* Sticky on inline spans is unreliable — make it block-level */
#markets .markets .blockchain .list .borrowed .new-borrow .search-container-new {
  display: block;
}

/* Hide search + header when the row is collapsed; leave the title visible */
#markets .markets .blockchain .list .borrowed .new-borrow:not(.active) .new-borrow__sticky .search-container-new,
#markets .markets .blockchain .list .borrowed .new-borrow:not(.active) .new-borrow__sticky .list-header {
  display: none;
}
#markets .markets .new-borrow__sticky .list-header > .grid-cell::before {
	display: none !important;
}
#markets .markets .blockchain .list .borrowed .new-borrow .search {
	font-size: 14px;
	line-height: 1.4;
	margin-top: 15px;
	max-width: initial !important;
}
#markets .markets .blockchain .list .borrowed .new-borrow .expanded {
	border-top: none;
}
#markets .markets .blockchain .list .borrowed .new-borrow .search-container-new {
	position: relative;
	float: initial;
	display: initial;
	width: initial;
}
#markets .markets .blockchain .list .borrowed .new-borrow .search {
	height: 35px;
}
#markets .markets .blockchain .list .borrowed .new-borrow .search-container-new::before {
	top: 3px;
	left: 20px;
}
#markets .markets .blockchain .list .borrowed .new-borrow .search-container-new::after {
	display: none;
}
#markets .markets .blockchain .list .borrowed .new-borrow p {
	color: rgba(255, 255, 255, 1);
	transition: color 0.3s ease;
	transform: translateY(-2px);
}
#markets .markets .blockchain .list .borrowed .new-borrow:hover p,
#markets .markets .blockchain .list .borrowed .new-borrow.active p {
	color: #ffffff;
	transition: color 0.2s ease;
}
#markets .markets .blockchain .list .borrowed .new-borrow p::before {
	content: '';
	display: inline-block;
	height: 20px;
	width: 20px;
	background-image: url(../img/icon/circle-plus.png);
	background-size: contain;
	transform: translateY(4px);
	margin-right: 8px;
	opacity: 0.75;
}
#markets .markets .blockchain .list .borrowed .new-borrow {
	padding: 0;
	background-image: linear-gradient(135deg, rgba(86,106,181,0) 0%, rgba(36,56,129,0) 100%);
	transition: background-image 0.3s ease;
}
#markets .markets .blockchain .list .borrowed .new-borrow.active,
#markets .markets .blockchain .list .borrowed .new-borrow:hover {
	background-image: linear-gradient(135deg, rgba(86,106,181,0.25) 0%, rgba(36,56,129,0.25) 100%);
	transition: background-image 0.2s ease;
}
#markets .markets .blockchain .list .borrowed .new-borrow::before {

}
#markets .markets .blockchain .list .borrowed .new-borrow .new-borrow__sticky {
	transition: background-color 0.2s ease;
}
#markets .markets .blockchain .list .borrowed .new-borrow.active .new-borrow__sticky {
	padding-left: 25px;
	padding-right: 25px;
	transition: background-color 0.2s ease;
}
#markets .markets .blockchain .list .borrowed .new-borrow .new-borrow__sticky p {
	padding: 19px 25px;
}
#markets .markets .blockchain .list .borrowed .new-borrow.active .new-borrow__sticky p {
	padding-bottom: 25px;
	cursor: pointer;
}
#markets .markets #markets-list-your .list .list-item.new-borrow.active {
	cursor: initial;
}
#markets .markets .blockchain .list .borrowed .new-borrow .search {
	margin-top: 0;
}
#markets .markets .blockchain .list .borrowed .new-borrow .expanded {
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 25px;
	padding-top: 10px;
}
#markets .supply-blockchain-image.sonic {
	background: #113a5b !important;
	border-color: #113a5b !important;
}
#markets .borrow-blockchain-image.sonic {
	background: #233b6e !important;
	border-color: #233b6e !important;
}

/* Other */

.message-markets-borrow-2 {
	margin-bottom: 13px;
}
.invisible {
	opacity: 0;
}

/* Overide styles (For default view) */

.markets .supplied .list-item:not(.adjust) input[type="text"],
.markets .borrowed .list-item:not(.adjust) input[type="text"] {
	text-align: left;
	padding-left: 30px;
	font-size: 18px;
	border: 2px solid transparent;
	background-color: transparent;
	box-shadow: none;
	padding-right: 0;
}
.markets .supplied .list-item:not(.adjust) input[type="text"]:disabled,
.markets .borrowed .list-item:not(.adjust) input[type="text"]:disabled {
	-webkit-text-fill-color: #ffffff;
	opacity: 1;
}
.markets .supplied .list-item:not(.adjust).panel [disabled].noUi-horizontal,
.markets .borrowed .list-item:not(.adjust).panel [disabled].noUi-horizontal {
	background: #03334f;
	box-shadow: 0px 10px 10px 0px rgba(12, 42, 77, 0.25);
}
.markets .supplied .legend label,
.markets .borrowed .legend label {
	font-size: 14px;
	color: rgba(255,255,255,0.75);
	margin-bottom: 10px;
	transition: margin-bottom 0.3s ease;
}
.markets .supplied .list-item:not(.adjust) .legend label,
.markets .borrowed .list-item:not(.adjust) .legend label {
	margin-bottom: 0;
	transition: margin-bottom 0.3s ease;
}
/*
.supplied .collateral-default-actions {
	display: none;
}
.supplied .list-item:not(.adjust) .collateral-adjust-actions {
	display: none;
}
.supplied .list-item:not(.adjust) .collateral-default-actions {
	display: block;
}
*/
.supplied .list-item.adjust .adjust-default,
.borrowed .list-item.adjust .adjust-default {
	display: none;
}
.adjust-active {
	display: none;
}
.supplied .list-item.adjust .adjust-active,
.borrowed .list-item.adjust .adjust-active {
	display: block;
}

/* New adjust styles */

.markets .list-item input[type="text"] {
	transition: font-size 0.2s ease, background-color 0.2s ease;
}
.markets .list-item.adjust input[type="text"],
#panel-swap .panel-parent .input-asset input[type="text"] {
	background-color: #0b3e5e;
	border: 2px solid transparent;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
	padding-left: 30px;
	font-size: 14px;
	transition: font-size 0.2s ease, background-color 0.2s ease, border 0.2s ease;
}
.panel-parent .input-asset .asset {
	background-color: #0f395a;
	border: 2px solid transparent;
}
.markets .list-item.adjust input[type="text"]:focus,
.markets .list-item.adjust input[type="text"]:hover {
	border: 2px solid #2ca9b7;
	transition: border 0.2s ease;
}
.markets .borrowed .list-item.adjust input[type="text"]:focus,
.markets .borrowed .list-item.adjust input[type="text"]:hover {
	border: 2px solid #8a7dee;
	transition: border 0.2s ease;
}
.markets .borrowed .list-item.adjust input[type="text"] {
	background-color: #253b7b;
}

/* New overview */

#markets .overview.new .metadata-values {
	font-size: 16px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
}
#markets .overview.new .supplied-metadata {
	transform: translateX(-73px);
}
#markets .overview.new .supplied-metadata:nth-of-type(2) {
	transform: translateX(-57px);
}
#markets .markets .blockchain .overview.new .metadata > .grid-cell:first-of-type::before {
	display: none;
}
#markets .overview.new > .grid > .grid-cell:first-of-type {
	width: calc(100% - 45px);
}
#markets .overview.new > .grid > .grid-cell:first-of-type > .grid > .grid-cell:nth-of-type(2)::before {
	content: '';
	display: inline-block;
	height: 20px;
	width: 20px;
	background-image: url(../img/icon/circle-down.png);
	background-size: contain;
	transform: translateY(4px);
	margin-right: 3px;
}
#markets .overview.new > .grid > .grid-cell:last-of-type > .grid > .grid-cell:nth-of-type(2)::before {
	margin-right: 3px;
}
#markets .markets .blockchain .overview.new .metadata > .grid-cell > span::after {
	display: none;
}
#markets .overview.new > .grid > .grid-cell:last-of-type > .grid > .grid-cell:nth-of-type(1) {
	transform: translateY(-4px);
}
#markets .overview.new > .grid > .grid-cell:last-of-type > .grid > .grid-cell:nth-of-type(2) {
	transform: translateY(3px) translateX(-10px);
}
#markets .overview.new > .grid > .grid-cell:last-of-type > .grid > .grid-cell:nth-of-type(3) {
	transform: translateY(4px) translateX(-25px);
}
#markets .markets .blockchain .overview.new > .grid > .grid-cell:first-of-type::before {
	top: -1px;
}
#markets .borrowed .noUi-horizontal .noUi-handle {
	border: 3px solid #8c7bf4;
}
#markets .chart-supply,
#markets .chart-borrow {
	position: relative;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 100%;
	height: 100px;
}
#markets .market-toggle-container {
	display: none;
}
#markets .chart-supply-interest-container,
#markets .chart-supply-interest-container {
	position: relative;
	margin-right: 25px;
	border-radius: 20px;
	padding: 10px 35px;
	padding-top: 15px;
	padding-right: 5px;
	padding-left: 25px;
	margin-top: 20px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
#markets .chart-supply-interest-container::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 20px;
	background-image: linear-gradient(135deg, rgb(32,121,143) 0%, rgb(23,86,120) 100%);
	opacity: 0.5;
	transition: opacity 0.3s ease;
	background-size: 100%;
}
#markets .chart-supply-interest-container::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #2ca9b7;
	border-radius: 20px;
	box-sizing: border-box;
	opacity: 0.25;
	transition: opacity 0.3s ease;
}
#markets .chart-borrow-interest-container {
	position: relative;
	margin-left: 25px;
	border-radius: 20px;
	padding: 10px 35px;
	padding-top: 15px;
	padding-right: 5px;
	padding-left: 25px;
	margin-top: 20px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
#markets .chart-borrow-interest-container::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 20px;
	background-image: linear-gradient(135deg, rgb(78,97,171) 0%, rgb(54,73,146) 100%);
	opacity: 0.4;
	transition: opacity 0.3s ease;
	background-size: 100%;
}
#markets .chart-borrow-interest-container::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #9c8df7;
	border-radius: 20px;
	box-sizing: border-box;
	opacity: 0.25;
	transition: opacity 0.3s ease;
}

/*
*
* Search wizardry
*
*/

/* Your markets — Supplied header */
.blockchain .supplied:not(:has(> .list-item:not(.hide))) > .grid.list-header {
  display: none;
}

/* Your markets — “Available to supply” header + separator */
.blockchain .supplied > .available:not(:has(> .list-item:not(.hide))) > .grid.list-header,
.blockchain .supplied > .available:not(:has(> .list-item:not(.hide))) > .separator-full {
  display: none;
}

/* (Optional) Borrowed header – exclude the “Borrow a new asset” picker row */
.blockchain .borrowed:not(:has(> .list-item:not(.hide):not(.new-borrow))) > .grid.list-header {
  display: none;
}

body:has(#search-markets:not(:placeholder-shown)) #markets-list-your .borrowed.grid-cell > .list-item.new-borrow {
  display: none;
}
body:has(#search-markets:not(:placeholder-shown))
#markets-list-your .blockchain:not(
  :has(
    .supplied > .list-item:not(.hide),
    .supplied > .available > .list-item:not(.hide),
    .borrowed.grid-cell > .list-item:not(.hide):not(.new-borrow)
  )
) {
  display: none;
}

/*
*
* Modals
*
*/

#modal-supply-confirm .modal-content {
	background-image: url(../img/feature/background-loop-static.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center -53px;
}
#modal-supply-confirm .graphic-loan {
	position: relative;
}
#modal-supply-confirm .modal-content {
	max-width: 90%;
	z-index: 9;
}
#modal-supply-confirm .graphic-loan .loan-asset-image {
	width: 100px;
	height: 100px;
	margin-top: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
#modal-supply-confirm h2,
#modal-borrow-confirm h2 {
	display: block;
}

#markets #modal-supply-confirm .graphic-supply .supply-asset-image,
#markets #modal-borrow-confirm .graphic-borrow .borrow-asset-image {
	width: 100px;
	height: 100px;
	margin-top: 20px;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border-radius: 100%;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
#markets #modal-supply-confirm .graphic-supply .supply-blockchain-image,
#markets #modal-borrow-confirm .graphic-borrow .borrow-blockchain-image {
	position: absolute;
	width: 35px;
	height: 35px;
	transform: translateY(4px);
	right: 0;
	z-index: 9;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(../img/logo/default.png);
	bottom: 0;
	border: 3px solid #134565;
	border-radius: 10px;
}

/* New blockchain styles */

#markets #modal-supply-confirm .graphic-supply .supply-blockchain-image,
#markets #modal-borrow-confirm .graphic-borrow .borrow-blockchain-image {
	position: absolute;
	width: 45px;
	height: 45px;
	transform: translateY(10px);
	right: -10px;
	z-index: 9;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url(../img/logo/default.png);
	bottom: 0;
	border-radius: 10px;
}

#markets #modal-borrow-confirm .graphic-borrow .borrow-blockchain-image {
	border: 3px solid #233b70;
}
#markets #modal-supply-confirm .modal-content,
#markets #modal-borrow-confirm .modal-content {
	background-image: url(../img/feature/background-loop-dynamic.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center -53px;
}
#markets #modal-supply-confirm .graphic-supply .supply-blockchain-image.sui,
#markets #modal-borrow-confirm .graphic-borrow .borrow-blockchain-image.sui {
	background-image: url(../img/logo/sui-blockchain.png);
}

/*
*
* New modal style
*
*/

#modal-borrow-confirm .grid.comparison {
	background-color: initial;
	background-image: initial;
	border-top: none;
}
/*#modal-borrow-confirm .modal-content {
	border: none;
}*/
#markets #modal-supply-confirm .modal-content {
	position: relative;
	z-index: 9;
	background-image:
		url("../img/feature/background-vibe-dynamic.svg"),
		linear-gradient(135deg, rgba(32,121,143,0.5), rgba(19,70,109,0.5));
	background-position: center -53px, center;
}
#markets #modal-supply-confirm .modal-content {
	position: relative;
	z-index: 9;
	background-image: none;
	background-color: #0c2a4d;
	background-position: center -562px, center;
	background-size: 400%;
	border: 2px solid #2ca9b7;
	/*border: 2px solid rgba(44, 169, 183, 0.5);*/
}
#markets #modal-supply-confirm .modal-content::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 25px;
	background-repeat: no-repeat;
	opacity: .35;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/feature/background-synergy-dynamic.svg");
	background-size: 300%;
	background-position: center 58%;
}
#markets #modal-supply-confirm .modal-content::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 25px;
	background: linear-gradient(0deg, rgba(12,42,77,1) 0%, rgba(12,42,77,0) 50%),
				linear-gradient(171deg, rgba(44,169,183,.37) 0%, rgba(44,169,183,0) 50%);
	z-index: 1;
}
#markets #modal-supply-confirm .modal-content .modal-actions,
#markets #modal-supply-confirm .modal-content .variable-loan-action,
#markets #modal-supply-confirm .modal-content .variable-loan-borrowed-difference,
#markets #modal-supply-confirm .modal-content .graphic-supply {
	position: relative;
	z-index: 9;
}
#markets #modal-supply-confirm .graphic-supply .supply-blockchain-image,
#markets #modal-borrow-confirm .graphic-borrow .borrow-blockchain-image {
	border: initial;
}

/* Variation 1 */

#markets #modal-supply-confirm .modal-content::before {
	background-image: url("../img/feature/background-vibe-dynamic.svg");
	background-size: 400%;
	background-position: center 55.1%;
}

/* Variation 2 

#markets #modal-supply-confirm .modal-content::before {
	background-image: url("../img/feature/background-bloom-dynamic.svg");
	background-size: 250%;
	background-position: center 62%;}
}*/

/* Variation 2 */

#markets #modal-supply-confirm .modal-content::before {
	background-image: url("../img/feature/background-synergy-dynamic.svg");
	background-size: 300%;
	background-position: center 58%;
}


#markets #modal-borrow-confirm .modal-content {
	position: relative;
	z-index: 9;
	background-image:
		url("../img/feature/background-loop-static-purple.svg"),
		linear-gradient(135deg, rgba(86,106,181,0.5), rgba(36,56,129,0.5));
	background-position: center -53px, center;
}
#markets #modal-supply-confirm .grid.comparison,
#markets #modal-borrow-confirm .grid.comparison {
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
#markets #modal-borrow-confirm .grid.comparison::before {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 15px;
	background-image: linear-gradient(135deg, rgba(86,106,181,1) 0%, rgba(36,56,129,1) 100%);
	opacity: 1;
	z-index: -1;
}
#markets #modal-borrow-confirm .grid.comparison::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid #fff;
	border-radius: 15px;
	box-sizing: border-box;
	mix-blend-mode: soft-light;
	opacity: 0.25;
	transition: opacity 0.3s ease;
}
/*#markets #modal-borrow-confirm .modal-content::after {
	content:"";
	position:absolute;
	inset:0;
	border-radius: 15px;
	background-image: linear-gradient(135deg, rgba(86,106,181,1) 0%, rgba(36,56,129,1) 100%);
	opacity: 0.7;
	z-index: -1;
}*/
#markets #modal-borrow-confirm .modal-content .modal-actions {
	border-top: 1px solid #4d5fa4;
}
#markets #modal-borrow-confirm .modal-content .borrow-asset-image {
	border-radius: 50px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
}
#markets .markets .blockchain .list .borrowed .noUi-horizontal .noUi-handle {

}

/*
*
* Expand / collapse fix
*
*/

#markets .list .list-item:not(.new-borrow) .expanded {
	padding: 10px 25px;
	margin-top: 5px;
}
#markets .markets #markets-list-your .list > .supplied .list-item,
#markets .markets #markets-list-your .list > .borrowed > .list-item:not(.new-borrow) {
	padding: 0;
}
#markets .markets #markets-list-your .list .list-item:not(.new-borrow, .new-borrow *) > .grid:first-of-type {
  padding: 10px 25px;
}
#markets .markets .blockchain .list .borrowed .new-borrow .expanded .list-item > .grid:first-of-type > .grid-cell:first-of-type::before {

}

#markets .markets .supported-chains {
	padding-left: 0;
	margin-bottom: -15px;
	margin-top: 12px;
}
#markets .markets .supported-chains li {
	display: inline-block;
	height: 28px;
	width: 28px;
	background-image: url(../img/logo/default.png);
	background-size: contain;
	border-radius: 5px;
}
#markets .markets .supported-chains li.sui-chain {
	background-image: url(../img/logo/sui-blockchain.png) !important;
}
#markets .markets .supported-chains li + li {

}
#markets .markets .supported-chains li.hide {
	display: none !important;
}
#markets .markets .supported-chains li.more-blockchains {
	background-image: none;
	transform: translateY(-10px);
	font-size: 14px;
	border-radius: 50px;
	text-align: center;
}

/* Clickable headers + tiny arrows */
.grid.list-header .grid-cell { cursor: pointer; user-select: none; }
.grid.list-header .grid-cell.sorted-asc::after  { content: "▲"; margin-left: .35em; font-size: .85em; opacity: .9; }
.grid.list-header .grid-cell.sorted-desc::after { content: "▼"; margin-left: .35em; font-size: .85em; opacity: .9; }


/* ==========================================================================
	Responsive styles
========================================================================== */

/* Netbook */

@media (max-width: 1200px) {

	/*
	*
	* Elements
	*
	*/

	body {
		max-width: 90%;
	}
	main {
		margin-bottom: 75px;
	}

	/* Navigation */

	.wrapper > .grid-cell:nth-child(1) {
		position: fixed;
		bottom: 15px;
		max-width: initial;
		text-align: center;
		z-index: 3;
		left: 50%;
		width: 351px;
		margin-left: -175px;
	}
	.navigation {
		margin-left: initial;
		width: initial;
		border-radius: 25px;
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.068),
					0 6.7px 5.3px rgba(0, 0, 0, 0.096),
					0 12.5px 10px rgba(0, 0, 0, 0.12),
					0 22.3px 17.9px rgba(0, 0, 0, 0.144),
					0 41.8px 33.4px rgba(0, 0, 0, 0.172),
					0 100px 80px rgba(0, 0, 0, 0.24);
	}
	.navigation ul {
		margin-left: initial;
		width: initial;
		border-radius: 25px;
	}
	.navigation ul li {
		list-style-type: none;
		margin-bottom: 0;
		display: inline-block;
	}
	.navigation ul li a {
		margin-left: 0;
	}
	.navigation ul li a svg,
	.navigation ul li a img {
		height: 30px;
	}
	.modal {
		margin-left: 0;
	}
	.header .logo {
		margin-left: 0;
		margin-right: 35px;
	}

	/*
	*
	* Home
	*
	*/

	.panel-footer {
		width: calc(50% - 25px);
	}

}

/* Tablet portrait & phablet */

@media (max-width: 1000px) {

	/*
	*
	* Modules
	*
	*/

	/* Grids */

	.grid.panel,
	.grid.side-by-side {
		flex-direction: column;
	}
	.grid.wrapper {
		flex-direction: column-reverse;
	}
	.grid.side-by-side > .grid-cell:nth-child(1) {
		margin-right: 0;
	}

	/* Header */

	.header {
		margin-top: 25px;
	}
	.header .logo {
		margin-left: 0;
		margin-right: 25px;
	}

	/* Panels */

	.panel .panel-parent {
		max-width: inherit;
		margin-right: -35px;
		margin-bottom: 35px;
	}
	.panel-footer {
		width: 100%;
	}

	/* Modals */

	.modal {
		margin-left: initial;
		max-width: initial;
		width: 75%;
	}

	/*
	*
	* Home page
	*
	*/

	.has-signed-in #loan + .panel-footer,
	#loan + .panel-footer {
		top: 540px;
	}
	.rebalancing-container > .grid {
		flex-direction: column;
		align-items: initial;
	}
	.rebalancing-container > .grid > .grid-cell:last-of-type {
		margin-top: 15px;
	}
	.risk-container {
		margin-top: 60px;
	}
	.grid.side-by-side.wallet-rewards {
		flex-direction: column-reverse;
	}
	#position-details .panel-parent {
		max-width: calc(100% + 70px);
	}
	#risk-rebalancing .tooltip {
		display: none;
	}
	#risk-rebalancing #loan-rewards {
		padding-left: 0;
		border-left: none;
	}

	/*
	*
	* Trade page
	*
	*/

	.return-container {
		display: none;
	}
	.chart-metadata {
		flex-direction: column;
	}
	.chart-metadata ul.toggle {
		float: left;
		clear: both;
	}
	.chart-metadata ul.toggle:nth-child(1) {
		margin-top: 15px;
	}
	.tv-lightweight-charts {
		max-width: calc(100% + 70px);
		width: calc(100% + 70px) !important;
		margin-left: -35px;
		margin-bottom: -20px;
	}
	.tv-lightweight-charts table {
		width: 100% !important;
	}
	.pool-overview {
		flex-direction: column;
	}
	.pool-overview > .grid-cell.border-right {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	#chart-message {
		margin-top: 35px;
		margin-bottom: 15px;
	}

	.collateral-footer {
		display: none;
	}

	/* Boost */

	#boost > .grid {
		flex-direction: column;
	}
	#boost .boost-increase > .grid {
		flex-direction: row;
	}
	#boost .boost-increase {
		max-width: 100%;
	}
	#boost .boost-increase {
		margin-left: 0;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		padding-top: 15px;
		margin-top: 25px;
	}
	#tooltip-boost .tooltip-content {
	    left: -153px;
	}
	#rewards-new .panel-parent {
		max-width: calc(100% + 70px);
		margin-left: -35px;
	}

	/* Wallpapers */

	.wallpaper > .grid-cell > .grid.grid-center {
		flex-direction: column;
	}

	.loan-rewards {
		padding-left: 0;
	}

	.reward-actions .savings-rate.action {
		margin-right: 0;
		padding-right: 0;
		border-right: none;
		padding-bottom: 25px;
		margin-bottom: 25px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	/*
	*
	* Markets
	*
	*/

	#markets #your-overview-content,
	#markets #market-overview-content {
		flex-direction: column;
	}
	#markets #your-overview-content > .grid-cell.border-right,
	#markets #market-overview-content > .grid-cell.border-right {
		border-right: none;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	#markets #your-overview-content > .grid-cell.border-right {
		margin-bottom: 15px;
		padding-bottom: 25px;
	}
	#markets .overview-toggles {
		flex-direction: column;
	}
	#markets .markets .blockchain .list {
		flex-direction: column;
	}
	#markets .search-container-new::before {
		right: initial;
		left: 20px;
	}
	#markets .market-list-toggles {
		transform: translateY(4px);
	}
	#markets .markets > .filters {
		align-items: initial;
		flex-direction: column;
	}
	#markets .markets > .filters > .grid-cell:first-of-type {
		margin-bottom: 15px;
	}
	#markets .markets .overview .metadata {
		height: initial;
	}
	#markets .markets .blockchain .overview > .grid > .grid-cell:first-of-type {
		margin-bottom: 40px;
	}
	.markets .blockchain .overview .grid.metadata .grid-cell:not(:last-child)::after {
		left: 111%;
	}
	#markets .markets .no-borrow .risk-text .label {
		max-width: initial;
		transform: translateY(8px) translateX(0px);
	}
	#markets .search.new {
		max-width: initial !important;
	}
	#markets .markets .markets-list-your .blockchain .overview > .grid {
		flex-direction: column;
		align-items: initial;
	}
	#markets .markets .blockchain .list .supplied {
		border-right: none;
		margin-right: initial;
		padding-right: initial;
	}
	#markets .markets .mobile-supply-borrow-toggles .toggle-your-borrow.active,
	#markets .markets .mobile-supply-borrow-toggles .toggle-your-borrow:hover {
		background-image: linear-gradient(0deg, rgb(118,93,224) 0%, rgb(146,138,244) 100%);
	}
	#markets .markets .mobile-supply-borrow-toggles .toggle-your-borrow {
		background-color: #3b3466;
	}
	.market-toggle-container {
		margin-bottom: 5px;
		margin-top: 10px;
	}
	#markets .market-toggle-container {
		display: block;
	}
	#markets .search-container-new {
		max-width: initial;
		width: 100% !important;
	}

	#markets .tv-lightweight-charts {
		max-width: initial;
		width: initial !important;
		margin-left: initial;
		margin-bottom: initial;
	}
	#markets .tv-lightweight-charts table {
		width: initial; !important;
	}
	#markets .chart-supply-interest-container {
		margin-right: initial;
	}
	#markets .chart-borrow-interest-container {
		margin-left: initial;
	}
	/*#markets .markets .supported-chains,
	#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(2),
	#markets .markets #markets-list-all .list .list-item .grid > .grid-cell:nth-of-type(2) {
		display: none;
	}*/
	#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(3) {
		transform: translateX(30px);
	}
	#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(4) {
		transform: translateX(18px);
	}
	#markets .markets #markets-list-all .list .list-header > .grid-cell:nth-of-type(5) {
		transform: translateX(10px);
	}
}

/* 800px and above */

@media (min-width: 800px) {

	/* Mobile */

	#markets-list-all .mobile-show {
		display: none !important;
	}

}

/* 800px and below */

@media (max-width: 800px) {
	/* wallet labels */
	.header > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
		display: none;
	}
	.header > div:nth-child(1) > div:nth-child(2) {
		max-width: 70px;
	}
	.loan-rewards {
		border-left: none;
	}
	#risk-rebalancing .dropdown.time-selector {
		margin-left: 0;
	}
	.header .dot.activity {
		display: none;
	}

	/* Rewards */

	.reward-actions .savings-rate {
		padding-right: 0 !important;
		margin-right: 0 !important;
		border-right: none !important;
		margin-bottom: 25px;
	}
	#rewards .dropdown-content.rewards-blockchain-selector {
		width: calc(100% - 50px);
	}
	#rewards .dropdown-content.rewards-blockchain-selector::after {
	  right: initial;
	  left: 153px;
	}
	#rewards > div:nth-child(1) > div:nth-child(2) {
		max-width: 10px;
	}
	div.savings-rate:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
		max-width: 100px;
	}
	div.savings-rate:nth-child(2) > div:nth-child(1) > div:nth-child(1) > h3:nth-child(1) > span:nth-child(1) {
		display: block;
		margin-top: 5px;
	}

	/* Instant amounts */

	.instant-amounts {
		left: initial;
		right: 0;
		top: -80px;
	}
	.instant-amounts .toggle {
		margin-top: 0px;
		padding-top: 5px;
	}
	.instant-amounts::before {
		right: 12px;
		left: initial;
		transform: rotate(0deg);
		top: 63px;
	}
	#swap-from-instant > p.label {
		text-align: right;
		padding-right: 15px;
	}
	#swap-to-instant {
		top: -49px;
		padding-top: 2px;
		padding-bottom: 4px;
		border-radius: 15px;
	}
	#swap-to-instant::before {
		top: 30px;
	}
	.liquidity-details > .grid:first-of-type {
		flex-direction: column;
	}

	/* Supply Liquidity */

	.concentrated-liquidity #slider-concentrated-liquidity-2 {
		width: calc(100% + 9px);
		margin-left: -35px;
	}
	.concentrated-liquidity #slider-concentrated-liquidity-2 .noUi-connects {
		border-radius: 0;
	}
	#slider-concentrated-liquidity-2 .concentrated-liquidity-price-tooltip {
		left: -23px;
	}
	#slider-concentrated-liquidity-2 .concentrated-liquidity-price-tooltip::after {
		left: 20px;
	}
	#slider-concentrated-liquidity-2 .noUi-handle-upper .concentrated-liquidity-price-tooltip {
		top: -44px;
	}
	#slider-concentrated-liquidity-2 .noUi-handle-upper .concentrated-liquidity-price-tooltip::after {
		transform: rotate(0deg);
		top: 28px;
	}
	#slider-concentrated-liquidity-2 .noUi-handle-lower .concentrated-liquidity-price-tooltip {
		top: 30px;
	}
	#slider-concentrated-liquidity-2 .noUi-handle-lower .concentrated-liquidity-price-tooltip::after {
		transform: rotate(180deg);
		top: -20px;
	}

	#rewards .value-container {
		flex-direction: column;
	}
	.value-container > .grid-cell {
		padding-right: 0;
		margin-right: 0;
		border-right: none;
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}
	.value-container > .grid-cell:first-of-type {
		margin-top: 0;
		border-top: none;
		padding-top: 0;
	}
	.reward-actions .savings-rate.action {
		margin-right: 0;
		padding-right: 0;
		border-right: none;
		padding-bottom: 25px;
		margin-bottom: 25px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	/*
	*
	* Markets
	*
	*/

	#markets #your-overview-content .metadata dd,
	#markets #market-overview-content .metadata dd {
		font-size: 20px;
	}

	/*
	*
	* All Markets
	*
	*/

	#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(2),
	#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(3),
	#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(4),
	#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(5),
	#markets .markets #markets-list-all .list .list-header {
		display: none;
	}
	#markets .markets #markets-list-all .metadata-group {
		margin-top: 30px;
		position: relative;
		padding: 0 15px;
		margin-bottom: 5px;
	}
	#markets .markets #markets-list-all .metadata-group::before {
		background-color: #ffffff;
		opacity: 0.25;
		mix-blend-mode: soft-light;
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 15px;
	}
	#markets .markets #markets-list-all .metadata-group .metadata {
		text-align: center;
	}
	#markets .markets #markets-list-all .supply-group {
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(6) p::after {
		content: url(../img/icon/chevron-right-white.svg);
		display: inline-block;
		width: 6px;
		margin-left: 7px;
		transform: translateY(1px) rotate(0deg);
		transition: transform 0.3s ease;
	}
	#markets .markets #markets-list-all .list .list-item.active > .grid > .grid-cell:nth-of-type(6) p::after{
		transform: translateY(3px) translateX(3px) rotate(90deg);
		transition: transform 0.3s ease;
	}
	#markets .markets #markets-list-all .list .list-item > .grid > .grid-cell:nth-of-type(6) p {
		font-size: 14px;
	}
	#markets .markets #markets-list-all .supply-container,
	#markets .markets #markets-list-all .borrow-container {
		border-right: none;
		margin-right: initial;
		padding-right: initial;
		margin-bottom: 6px;
	}
	#markets .markets #markets-list-all .market-toggle-container {
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		margin-bottom: 15px;
		padding-top: 15px;
		margin-top: 0;
	}
	#markets .markets #markets-list-all .expanded > .grid {
		flex-direction: column;
	}
	#markets .markets #markets-list-all .supply,
	#markets .markets #markets-list-all .borrow {
		padding: 10px 15px;
		padding-bottom: 15px;
	}
	#markets .markets #markets-list-all .list .list-item > .grid:first-of-type > .grid-cell:last-of-type span:first-of-type {
		display: none;
	}
	#markets .markets #markets-list-all .list .list-item:not(.parent):not(.secondary) .metadata-group .grid-cell:nth-of-type(1)::before {
		display: none;
	}
	#markets .markets #markets-list-all .expanded {
		margin-bottom: 0;
	}
}

/* 600px and above */

@media (min-width: 600px) {

	/* Mobile */

	#markets-list-your .mobile-show {
		display: none !important;
	}

}

/* 600px and below */

@media (max-width: 600px) {

	/* HTML */

	h1 {
		font-size: 30px;
	}
	h2 {
		font-size: 20px;
	}

	/* Modules */

	.logo-back {
		display: none;
	}
	.navigation ul li a svg,
	.navigation ul li a img {
		height: 25px;
	}
	ul.tabs li {
		padding: 10px 25px;
	}
	.modal {
		width: 90%;
	}
	.modal-content {
		padding: 15px;
	}
	ul.list p.label {
		font-size: 12px;
	}
	.navigation ul li a {
		padding: 5px;
		padding-top: 10px;
	}
	.panel {
		padding: 25px;
	}
	.panel .panel-parent {
		padding: 25px;
		max-width: calc(100% + 50px);
		margin-left: -25px;
	}
	#position-details .panel-parent {
		max-width: calc(100% + 50px);
		margin-left: -25px;
	}
	#rewards-new .panel-parent {
		max-width: calc(100% + 50px);
		margin-left: -25px;
	}
	.tv-lightweight-charts {
		max-width: calc(100% + 50px);
		width: calc(100% + 50px) !important;
		margin-left: -25px;
		margin-bottom: -20px;
	}
	.button {
		padding: 5px 15px;
	}
	ul.tabs {
		margin-bottom: 5px;
	}
	#panel-supply .panel-parent .grid:nth-child(1) .grid-cell:nth-child(1) {
		max-width: 80px;
	}
	#loan-message {
		margin-top: 35px;
		margin-bottom: 25px;
	}
	#rewards .message {
		margin-top: 35px;
		margin-bottom: 25px;
	}
	.dropdown-content.wallet::after {
		right: 15px;
	}
	ul.list.sign-in > li > .grid-center {
		align-items: initial;
	}
	ul.list.sign-in > li .grid > .grid-cell:nth-of-type(2) > p {
		width: 100%;
		text-align: right;
	}

	/* Modals */

	#modal-manage-wallets .supported-chains,
	#modal-sign-in .supported-chains {
		text-align: left;
		width: calc(100% + 50px);
		margin-left: -50px;
	}
	#modal-manage-wallets .supported-chains li,
	#modal-sign-in .supported-chains li {
		margin: initial;
		margin-left: 10px;
	}
	ul.list.manage-wallets p.or, ul.list.sign-in p.or {
		display: none !important;
	}
	#modal-sign-in .modal-content ul.list.sign-in > li.ethereum.wallet-connected > .grid > .container-manage-ethereum {
		margin-top: 0;
	}
	ul.list.manage-wallets > li.ethereum .grid > .grid-cell:first-of-type,
	ul.list.manage-wallets > li.icon .grid > .grid-cell:first-of-type,
	ul.list.manage-wallets > li.cosmos .grid > .grid-cell:first-of-type,
	ul.list.manage-wallets > li.stellar .grid > .grid-cell:first-of-type,
	ul.list.manage-wallets > li.sui .grid > .grid-cell:first-of-type,
	ul.list.sign-in > li.ethereum .grid > .grid-cell:first-of-type,
	ul.list.sign-in > li.icon .grid > .grid-cell:first-of-type,
	ul.list.sign-in > li.cosmos .grid > .grid-cell:first-of-type,
	ul.list.sign-in > li.stellar .grid > .grid-cell:first-of-type,
	ul.list.sign-in > li.sui .grid > .grid-cell:first-of-type {
		width: 100%;
		background-position: 0 6px;
	}
	ul.list.manage-wallets > li .grid > .grid-cell:nth-of-type(3),
	ul.list.sign-in > li .grid > .grid-cell:nth-of-type(3) {
		max-width: initial;
		width: 100%;
		text-align: right;
	}
	ul.list.manage-wallets > li .grid > .grid-cell:last-of-type p,
	ul.list.sign-in > li .grid > .grid-cell:last-of-type p {
		display: inline-block;
		margin-left: 5px;
		margin-right: 5px;
	}
	ul.list.manage-wallets,
	ul.list.sign-in {
		padding: 15px;
	}
	ul.list.manage-wallets p.or::before,
	ul.list.sign-in p.or::before {
		display: none;
	}
	#modal-manage-wallets .modal-content > .grid:first-of-type,
	#modal-sign-in .modal-content > .grid:first-of-type {
		flex-direction: column;
	}
	#modal-manage-wallets .language-selector > p {
		text-align: left;
	}
	#modal-manage-wallets h2 {
		margin-bottom: 0;
	}
	ul.list.manage-wallets > li .grid > .grid-cell:nth-of-type(2),
	ul.list.sign-in > li .grid > .grid-cell:nth-of-type(2) {
		max-width: initial;
	}
	ul.list.manage-wallets > li .grid > .grid-cell:nth-of-type(2) > p,
	ul.list.sign-in > li .grid > .grid-cell:nth-of-type(2) > p {
		margin-top: 5px;
	}

	/* Header */

	.header .logo {
		width: 75px;
		margin-right: 15px;
		display: none;
	}
	.demo-tag {
		margin-left: -5px;
	}
	.dropdown-content.wallet {
		max-width: initial;
		width: 500%;
	}
	.wallet .floating-container > div:nth-child(1) > div:nth-child(1) {
		max-width: 75px !important;
	}
	.wallet .floating-container > div:nth-child(1) > div:nth-child(2) {
		text-align: right;
	}
	.header > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
		text-align: right;
	}

	/* Home */

	.asset-selector.avax.dropdown-content::after {
	  left: 102px;
	}
	.asset-selector.eth.dropdown-content::after {
	  right: 249px;
	}
	.asset-selector.icx.dropdown-content::after {
		left: 84px;
	}
	/*
	.avalanche.collateral-blockchain-selector.dropdown-content::after {
		left: 213px;
	}
	.ethereum.collateral-blockchain-selector.dropdown-content::after {
		left: 204px;
	}
	.icon.collateral-blockchain-selector.dropdown-content::after {
		left: 176px;
	}
	*/

	.arbitrum.collateral-blockchain-selector.dropdown-content::after {
		left: 196px;
	}
	.arbitrum.loan-blockchain-selector.dropdown-content::after {
		left: 252px;
	}
	.base.collateral-blockchain-selector.dropdown-content::after {
		left: 171px;
	}
	.base.loan-blockchain-selector.dropdown-content::after {
		left: 227px;
	}
	.avalanche.collateral-blockchain-selector.dropdown-content::after {
		left: 213px;
	}
	.avalanche.loan-blockchain-selector.dropdown-content::after {
		left: 269px;
	}
	.ethereum.collateral-blockchain-selector.dropdown-content::after {
		left: 204px;
	}
	.ethereum.loan-blockchain-selector.dropdown-content::after {
		left: 259px;
	}
	.icon.collateral-blockchain-selector.dropdown-content::after {
		left: 176px;
	}
	.icon.loan-blockchain-selector.dropdown-content::after {
		left: 231px;
	}
	.optimism.collateral-blockchain-selector.dropdown-content::after {
		left: 202px;
	}
	.optimism.loan-blockchain-selector.dropdown-content::after {
		left: 258px;
	}

	#loan {
		z-index: 1;
	}
	#collateral:not(.adjust) input[type="text"],
	#loan:not(.adjust) input[type="text"] {
		padding-right: 0;
	}
	#collateral + .panel-footer + .collateral-blockchain-selector {
		top: 267px;
		left: 0;
		width: 100%;
	}
	#loan + .panel-footer + .loan-blockchain-selector {
		left: initial;
		right: initial;
		width: 100%;
		top: 580px;
	}
	#collateral .asset-selector.dropdown-content {
		max-width: initial;
		width: 100%;
		left: 0;
	}
	.has-signed-in #collateral + .panel-footer,
	#collateral + .panel-footer {
		top: 200px;
		padding-left: 25px;
	}
	.has-signed-in #loan + .panel-footer,
	#loan + .panel-footer {
		top: 520px;
		padding-left: 25px;
	}
	.threshold .metadata dt,
	.threshold .metadata dd {
		font-size: 12px;
	}
	.threshold.locked .metadata {
		width: 120px;
		margin-left: -140px;
		margin-top: 17px;
	}
	.threshold.locked::after {
		top: 25px;
	}
	#collateral:not(.adjust) input[type="text"],
	#loan:not(.adjust) input[type="text"] {
		font-size: 16px;
	}
	#position-details .panel-parent .metadata dd {
		font-size: 16px;
	}
	.list.wallet .expanded .expanded-container {
		padding: 25px;
	}
	.list.wallet {
		margin-bottom: 0;
	}
	.threshold {
		height: 42px;
	}
	.threshold.locked {
		margin-top: 0;
		height: 25px;
	}
	.risk-container {
		margin-bottom: 50px;
	}

	/* Liquidated */

	.threshold.liquidated {
		margin-top: -27px;
	}
	.threshold.liquidated .metadata {

	}
	.risk-container {
		margin-top: 18px;
	}

	/* Transaction */

	.transactions thead tr th:last-of-type,
	.transactions tbody tr td:last-of-type {
		display: none;
	}

	/* Supply Liquidity */

	.concentrated-liquidity #slider-concentrated-liquidity-2 {
		width: calc(100%);
		margin-left: -25px;
	}

	/*
	*
	* Markets (Will need to standardise eventually)
	*
	*/

	/* Modules */

	.grid.mobile-show {
		display: flex;
	}
	.desktop-show {
		display: none !important;
	}

	/* Layout */

	#markets .overview.panel,
	#markets .markets.panel,
	#markets .markets .blockchain .list,
	#markets .floating-panel {
		padding: 15px;
	}
	#markets .markets .blockchain .overview {
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 15px;
	}
	#markets .markets .blockchain .list .list-item,
	#markets .markets #markets-list-all .list .list-item {
		padding: 10px 15px;
	}
	#markets .market-list-toggles {
		display: block;
		width: 100%;
		margin-top: 10px;
	}
	#markets .markets > .filters > .grid-cell:first-of-type {
		margin-bottom: 25px;
	}

	/* Metadata layout */

	#markets .markets .blockchain .overview .grid.metadata {
	    flex-wrap: wrap;
	    column-gap: initial;
	    /*padding: 15px;*/
	}
	/*#markets .markets .blockchain .overview .grid.metadata::before {
		background-color: #ffffff;
		opacity: 0.25;
		mix-blend-mode: soft-light;
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 15px;
	}*/
	#markets .markets #markets-list-your .blockchain .overview .metadata .overview-metadata-borrowed {
		opacity: 1;
	}
	#markets .markets .blockchain .overview .grid.metadata > .grid-cell:nth-child(-n+2) {
	    flex: 1 1 35%;
	}
	#markets .markets .blockchain .overview .grid.metadata > .grid-cell:nth-child(3) {
	    flex: 1 1 100%;
	    transform: initial;
	}
	.markets .blockchain .overview .grid.metadata .grid-cell:not(:last-child)::after {
		display: none;
	}
	#markets .markets .overview .metadata {
		text-align: center;
	}
	#markets .markets .blockchain .overview .grid.metadata > .grid-cell:first-of-type {
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}
	#markets .markets .blockchain .overview .grid.metadata > .grid-cell:nth-child(2) {

	}
	#markets .markets .blockchain .overview .metadata dd {
		font-size: 18px;
	}
	#markets .markets .blockchain .overview .metadata dd > span:last-of-type {
		display: block;
		margin-top: 5px;
	}
	#markets .markets .blockchain .overview > .grid > .grid-cell:first-of-type {
		max-width: 100%;
		text-align: center;
		padding-left: 0;
		margin-bottom: 15px;
	}
	#markets .markets .blockchain .overview > .grid > .grid-cell:first-of-type::before {
		position: relative;
		left: initial;
		top: initial;
		height: 125px;
		width: 125px;
		margin-left: auto;
		margin-right: auto;
		transform: translateX(3px);
		margin-bottom: -10px;
	}
	#markets .markets .blockchain .overview .grid.metadata .risk-inner {
	    margin: 0 25px;
	    margin-top: 15px;
	}
	#markets .markets .overview .overview-metadata-supplied > .metadata {
		margin-right: initial;
	}
	#markets .markets .overview .overview-metadata-borrowed > .metadata {
		margin-left: initial;
	}
	#markets .markets .blockchain .overview .grid.metadata .risk-inner.no-borrow {
		display: none;
	}

	/* Assets */

	#markets #markets-list-your .available .separator-full::before {
		width: 23%;
	}
	#markets #markets-list-your .available .separator-full::after {
		width: 23%;
	}
	#markets .markets .blockchain .tv-lightweight-charts {
		max-width: initial;
		height: initial;
		width: initial;
		margin: initial;
	}
	.message-markets-borrow-1 {
		margin-top: 0;
	}
	#markets .chart-supply,
	#markets .chart-borrow {
		overflow: hidden; /* temp fix */
	}
	#markets .markets .markets-list-your .blockchain .list .list-header,
	.list .list-item:not(.parent):not(.secondary) .mobile-show .grid-cell:nth-of-type(1)::before {
		display: none;
	}
	#markets .markets #markets-list-your .list .list-item.pending .expanded {
		margin-top: 30px;
	}
	#markets .list .list-item:not(.new-borrow) .expanded {
		padding: 10px 15px;
	}
	#markets .legend.income > .grid-cell {
		padding-left: 0;
	}
	#markets .legend.income .metadata,
	.markets .supplied .legend label,
	.markets .borrowed .legend label {
		text-align: center;
	}
	#markets .supply-actions,
	#markets .borrow-actions {
		margin-bottom: 0;
	}
	#markets .markets #markets-list-your .list .list-item:not(.new-borrow, .new-borrow *) > .grid:first-of-type {
		padding: 10px 15px;
	}
	#markets .markets .blockchain .list .borrowed .new-borrow.active .new-borrow__sticky {
		padding-left: 15px;
		padding-right: 15px;
	}
	#markets .markets .blockchain .list .borrowed .new-borrow .expanded {
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 15px;
	}
	#markets .markets .blockchain .loan-blockchain-selector.dropdown::after {
		margin-left: 0;
	}
	.markets .supplied .list-item:not(.adjust) input[type="text"],
	.markets .borrowed .list-item:not(.adjust) input[type="text"] {
		padding-left: 0;
		text-align: center;
	}
	.markets .list-item.adjust input[type="text"] {
		padding: 5px;
		text-align: center;
	}
	.markets .legend > .grid-cell:nth-child(1) {
		margin-right: 15px;
	}
	.message-markets-borrow-2 {
		max-width: 215px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Mobile show */

	#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:nth-of-type(2) {
		display: none;
	}
	#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:nth-of-type(3) p {
		font-size: 14px;
	}
	#markets .markets #markets-list-your .list > .supplied .list-item,
	#markets .markets #markets-list-your .list > .borrowed > .list-item:not(.new-borrow) {
		padding-bottom: 15px;
	}
	#markets .list .list-item:not(.new-borrow) .expanded {
		margin-top: 15px;
		padding-bottom: 0;
	}
	#markets .markets .blockchain .mobile-show.mobile-overview {
		position: relative;
		margin-top: 30px;
		margin-left: 15px;
		margin-right: 15px;
	}
	#markets .markets .blockchain .mobile-show.mobile-overview::before {
		background-color: #ffffff;
		opacity: 0.25;
		mix-blend-mode: soft-light;
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 15px;
	}
	#markets .markets .blockchain .mobile-show.mobile-overview .metadata {
		text-align: center;
	}
	#markets .markets .blockchain .mobile-show.mobile-overview > .grid-cell:first-of-type > .metadata {
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}

	#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:nth-of-type(3) p::after {
		content: url(../img/icon/chevron-right-white.svg);
		display: inline-block;
		width: 6px;
		margin-left: 7px;
		transform: translateY(1px) rotate(0deg);
		transition: transform 0.3s ease;
	}
	#markets .markets .blockchain .list .list-item.active > .grid:first-of-type > .grid-cell:nth-of-type(3) p::after {
		transform: translateY(3px) translateX(3px) rotate(90deg);
		transition: transform 0.3s ease;
	}
	#markets .markets .blockchain .list .list-item.new-borrow .list-item > .grid:first-of-type > .grid-cell:nth-of-type(2) {
		display: block;
		text-align: right;
	}
	#markets .markets .blockchain .list .borrowed .new-borrow .search {
		text-align: left;
	}
	#markets .markets .loan-blockchain-selector.dropdown-content {
		padding: 10px;
	}
	#markets .markets .loan-blockchain-selector.dropdown-content .search {
		text-align: center;
		padding: 5px !important;
	}
	#markets .markets .loan-blockchain-selector.dropdown-content .list.blockchains .loan-blockchain .list-item {
		padding: 10px 15px;
	}
	#markets .markets .blockchain .list .list-item > .grid-cell:first-of-type {
		padding-left: 35px;
	}
	#markets .markets .blockchain .list .list-item > .grid:first-of-type > .grid-cell:first-of-type span::after {
		display: none;
	}
	.header .wallet-metadata,
	.dot.wallet > .grid > .grid-cell:first-of-type {
		display: none;
	}
	.header .dot.wallet {
		padding: 0;
	}
	.dot.wallet .grid-cell {
		flex: 1;
	}
	.navigation ul li a svg, .navigation ul li a img {
		height: initial;
		width: 55px;
	}

  .all-calculator {
    /* two-row layout */
    display: grid;
    grid-template-columns: 24px 1fr auto;
    grid-template-rows: 42px auto;
    column-gap: .6rem;
    row-gap: .4rem;
    width: 100%;
    box-sizing: border-box;
    padding: .6rem .75rem;
    border-radius: 15px;
  }

  /* row 1: $ + full‑width input */
  .all-calculator .symbol {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    white-space: nowrap;
  }
  .all-calculator .calc-input {
    grid-column: 2 / 4;                     /* span content + select column */
    grid-row: 1;
    width: 100%;
    min-width: 0;                            /* prevent overflow in grid */
    height: 36px;
    border-radius: 999px;
    padding: 6px 14px;                       /* comfortable touch target */
    background: rgba(14,53,76,.50);
  }

  /* row 2: →   $0.00      / year */
  .all-calculator .arrow {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    opacity: .75;
    white-space: nowrap;
  }
  .all-calculator .calc-result {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;                 /* never spills */
  }
  .all-calculator .calc-period {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
    min-width: 84px;                         /* keeps the select neat */
  }

}

/* 500px and below */

@media (max-width: 500px) {

}

/* 450px and below */

@media (max-width: 450px) {

	/* Home */

	.has-signed-in #collateral + .panel-footer,
	#collateral + .panel-footer {
		top: 220px;
	}
	.has-signed-in #loan + .panel-footer,
	#loan + .panel-footer {
		top: 535px;
	}
	#collateral span.asset-selector {
		display: block;
	}

}

/*
*
* Safari fixes
*
*/

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {

	#markets .floating-panel::before {
		mix-blend-mode: initial;
		background-color: initial;
		background-image: linear-gradient(70deg, rgba(54, 119, 149, 1), rgba(57, 106, 148, 1));
	}
	#markets .markets #markets-list-all .list .list-item::before {
		mix-blend-mode: initial;
		background-image: linear-gradient(70deg, rgba(54, 119, 149, 1), rgba(57, 106, 148, 1));
	}
	#markets .markets #markets-list-all .list .list-item::after {
		mix-blend-mode: initial;
		opacity: 0.07;
	}
	#markets .markets .blockchain::before {
		mix-blend-mode: initial;
		background-image: linear-gradient(70deg, rgba(54, 119, 149, 1), rgba(57, 106, 148, 1));
	}
	#markets .markets .blockchain::after {
		mix-blend-mode: initial;
		border: 1px solid rgba(255, 255, 255, 0.25);
	}
	#markets .markets #markets-list-your .list .supplied .list-item::after {
		mix-blend-mode: initial;
		opacity: 0.08;
	}
	#markets .markets #markets-list-your .list .supplied .list-item:hover::after,
	#markets .markets #markets-list-your .list .supplied .list-item.active::after {
		opacity: 0.15;
	}
	#markets .markets #markets-list-your .list .borrowed .list-item:not(.new-borrow)::after {
		mix-blend-mode: initial;
		opacity: 0.08;
	}
	#markets .markets #markets-list-your .list .borrowed .list-item:hover::after,
	#markets .markets #markets-list-your .list .borrowed .list-item.active::after {
		opacity: 0.15;
	}
}