/*
* Balanced
* Main CSS
* Version 3.0
* Last updated 15/4/24
*/

/* ==========================================================================
	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: #b7ae2c;
	color: #ffffff;
	text-shadow: none;
}
::-webkit-selection {
	background: #b7ae2c;
	color: #ffffff;
	text-shadow: none;
}
::selection {
	background: #b7ae2c;
	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; */
	background-size: cover;
    background-image: linear-gradient(#bc942e38, #441003eb), url(https://png.pngtree.com/background/20230827/original/pngtree-rising-above-gold-and-currency-the-increasing-value-of-bitcoin-in-picture-image_4840193.jpg);
}
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: #9d7b03;
	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 #523707;
	width: 100%;
	background-color: #523707;
	-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 #b7ae2c;
}

textarea {
	color: #ffffff;
	padding: 15px 20px;
	line-height: 1.4;
	border-radius: 10px;
	outline: none;
	border: 2px solid #523707;
	width: 100%;
	background-color: #523707;
	-webkit-appearance: none;
	transition: border 0.3s ease;
}
textarea:hover,
textarea:focus {
	border: 2px solid #b7ae2c;
	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;
	padding: 35px;
	border-radius: 15px;
	background-color: #181819a3;
}
.panel-parent {
	background-color: #181819a3;
}

/* 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: 15px;
	max-width: 370px;
}

/* Style inputs to account for background colour */

.panel-parent input[type="text"] {
	background-color: #181819a3;
	border: 2px solid #9d7b03;
	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 #b7ae2c;
}

/* Panel highlight */

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

/* Panel footer */

.panel-footer {
	border-radius: 15px;
	background-color: #181819a3;
	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(75, 68, 1) 0%, rgb(171, 196, 46) 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: rgba(255, 255, 255, 0.15) !important;
	cursor: not-allowed !important;
}

.Background_copy_9 {
  border-radius: 10px;
  background-image: -moz-linear-gradient( 90deg, rgb(223,93,93) 0%, rgb(252,108,108) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(223,93,93) 0%, rgb(252,108,108) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(223,93,93) 0%, rgb(252,108,108) 100%);
  position: absolute;
  left: 4044px;
  top: 615px;
  width: 90px;
  height: 35px;
  z-index: 3133;
}


/* 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 #523707;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	background-color: #523707;
	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 #7c7a00;
	color: #9d7b03;
	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 #181819a3;
}
#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 #b7ae2c;
	transition: border 0.2s ease;
}

/* Asset input parent panel styles*/

.panel-parent .input-asset .asset {
	border: 2px solid #181819a3;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	background-color: #181819a3;
}
.panel-parent .input-asset .asset:hover,
.panel-parent .input-asset .asset.active {
	border: 2px solid #b7ae2c;
}
.panel-parent .input-asset.static .asset {
	border: 2px solid #181819a3;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	background-color: #181819a3;
}
.panel-parent .input-asset.static .asset:hover {
	border: 2px solid #181819a3;
	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 #523707;
	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;
}

/* ICX */

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

/* sICX */

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

/* bnUSD */

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

/* BALN */

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

/* OMM */

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

/*
*
* 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 #b7ae2c;
	color: #b7ae2c;
}
ul.pagination li:hover {
	border: 2px solid #b7ae2c;
	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;
	border-radius: 100px;
	margin-right: 5px;
	color: #ffffff;
	font-size: 14px;
	background-color: #9d7b03;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
ul.toggle li:last-of-type {
	margin-right: 0;
}
ul.toggle li.active {
	background-color: #725c00;
}
ul.toggle li:hover {
	background-color: #725c00;
	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: #181819a3;
	transition: background-color 0.3s ease;
}
ul.tabs li:last-of-type {
	margin-right: 0;
}
ul.tabs li:hover {
	cursor: pointer !important;
	background-color: #181819a3;
	transition: background-color 0.2s ease;
}
ul.tabs li.active {
	background-color: #181819d6;
}

/*
*
* 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: #181819a3;
	border: 2px solid #b7ae2c;
	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: #b7ae2c;
	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;
	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: #b7ae2c;
	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: #181819a3;
	opacity: 0;
	padding: 15px;
	border: 2px solid #b7ae2c;
	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 {
	color: #9d7b03;
}
.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;
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 100px;
	border-top: 1px solid #a78c0584;
	background: linear-gradient(0deg, rgb(208, 168, 7) 0%, rgb(233, 233, 35) 100%);
	transition: box-shadow 0.3s ease;
}
.dot svg,
.dot img {
	padding: 12px;
	max-width: 50px;
}
.dot:hover {
	cursor: pointer;
	background-color: #a78c0584;
	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;
}
.dot.wallet.active {
	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;
}

/* Language selector */

.language-selector-container {
	margin-top: 15px;
	text-align: center;
	background-color: #9d7b03;
	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: #b7ae2c;
	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, #b7ae2c, #1b648f);
}

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

.header {
	margin-top: 50px;
	margin-bottom: 50px;
}
.header .logo {
	width: 100px;
	margin-left: 7px;
	margin-right: 75px;
}
.header .dot {
	float: right;
	margin-left: 15px;
}
.logo-back {
	position: absolute;
	background: #181819a3;
	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: #181819a3;
	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: #9d7b03;
	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 {
	padding: 0;
	margin: 0;
	/* background-color: #181819a3; */
	background-color: #181819a3;;
	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;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.navigation ul li a:hover {
	color: #01002a;
	background-color: #f7eb88;
	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;
}
.navigation ul li a.active {
	color: #01002a;
	opacity: 1;
	box-shadow: 0px 20px 25px 0px rgba(1, 0, 42, 0.25);
	background: linear-gradient(0deg, rgb(75, 68, 1) 0%, rgb(171, 196, 46) 100%);
	border-top: 1px solid #5d5f02;
}
.navigation ul li a svg,
.navigation ul li a img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	width: 35px;
}

/* 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: #181819a3;
	border: 2px solid #b7ae2c;
	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: #181819a3;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
	border: 2px solid #b7ae2c;
	border-radius: 15px;
	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;
}

/* ==========================================================================
	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;
}

/*
*
* Sign in modal
*
*/

/* Sign in modal */

#modal-sign-in {
	max-width: 530px;
}
#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;
}
#modal-sign-in h3 {
	font-family: 'tex-gyre-adventor-bold';
	font-weight: normal;
	color: #ffffff;
	font-size: 15px;
}
#modal-sign-in .search {
	margin-bottom: 0;
}
#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: #181819a3;
	padding: 2px 0;
	border-radius: 10px;
	text-align: center;
}
#modal-sign-in .supported-chains li {
	display: inline-block;
	margin: 0 3.2%;
}
#modal-sign-in .supported-chains li:first-of-type {

}
#modal-sign-in .supported-chains img {
	max-height: 20px;
	display: block;
	margin-top: 5px;
}
#modal-sign-in .cosmos .supported-chains {
	text-align: left;
}
#modal-sign-in .cosmos .supported-chains li:first-of-type {
	margin-left: 15px;
}
.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: #523707;
	border-radius: 10px;
	padding: 25px;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.25) inset;
}
ul.list.sign-in > li .grid > .grid-cell:first-of-type {
	padding-left: 50px;
}
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 {
	/*margin-top: 31px;*/
}
ul.list.sign-in > li {
	border-bottom: 1px solid rgba(255,255,255,0.15);
	padding-bottom: 15px;
	margin-bottom: 15px;
}
ul.list.sign-in > li:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
ul.list.sign-in > 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.sign-in > 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.sign-in > 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.sign-in > 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.sign-in > 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.sign-in > 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;
}

/*
*
* 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: #181819a3;
	padding: 2px 0;
	border-radius: 10px;
	text-align: center;
}
#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: #b7ae2c;
	border-radius: 30px;
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
	margin-top: -24px;
	margin-left: 12px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
/*#modal-manage-wallets .supported-chains li.active::after,
#modal-manage-wallets .supported-chains li:hover::after {
	background-color: #b7ae2c;
	opacity: 1;
	transition: opacity 0.2s ease;
}
#modal-manage-wallets .cosmos .supported-chains {
	text-align: left;
}
#modal-manage-wallets .cosmos .supported-chains li:first-of-type {
	margin-left: 15px;
}
*/

/* 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: #523707;
	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 {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 10px;
	color: rgba(255,255,255,0.75);
	margin-top: 5px;
}
ul.list.manage-wallets 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;
}
.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: #b7ae2c;
	/*box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.15);*/
}

/* 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 #b7ae2c;
	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: #b7ae2c;
}

/* 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: #9d7b03;
}
.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 #b7ae2c;
	border-radius: 10px;
	background: #181819a3;
	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;
}

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

.variable-asset-price,
.variable-threshold-locked {
	transition: color 0.3s ease;
}
.variable-asset-price.alert,
.variable-threshold-locked.alert {
	color: #fb6a6a !important;
	transition: color 0.2s ease;
}
header h1 {
	transform: translateY(-5px);
}
.demo-tag-container {
	position: absolute;
	top: -5px;
	left: 110px;
}
.demo-tag {
	position: relative;
	display: inline-block;
	font-size: 12px;
	background-color: #181819a3;
	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,#b7ae2c,#9d7b03,#181819a3,#01002A,#b7ae2c,#9d7b03,#181819a3,#01002A,#b7ae2c);
    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: #181819a3;
}
.modal-content::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(90deg,#b7ae2c,#9d7b03,#181819a3,#01002A,#b7ae2c,#9d7b03,#181819a3,#01002A,#b7ae2c);
    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.35);
	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: #9d7b03;
}
#collateral .asset-selector.dropdown-content {
	max-width: 750px;
	margin-right: 35px;
	width: 415px;
	margin-top: 10px;
}
.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: 2;
}
#collateral-inputs .slider,
.loan-inputs .slider {
	margin-top: 35px;
	margin-bottom: 25px;
}

/* Collateral blockchain selector */

#collateral + .panel-footer + .collateral-blockchain-selector {
	top: 258px;
	left: 35px;
	width: 415px;
	padding-bottom: 5px;
}
.arbitrum.collateral-blockchain-selector.dropdown-content::after {
	left: 172px;
}
.arbitrum.loan-blockchain-selector.dropdown-content::after {
	left: 227px;
}
.base.collateral-blockchain-selector.dropdown-content::after {
	left: 146px;
}
.base.loan-blockchain-selector.dropdown-content::after {
	left: 202px;
}
.avalanche.collateral-blockchain-selector.dropdown-content::after {
	left: 188px;
}
.avalanche.loan-blockchain-selector.dropdown-content::after {
	left: 244px;
}
.ethereum.collateral-blockchain-selector.dropdown-content::after {
	left: 179px;
}
.ethereum.loan-blockchain-selector.dropdown-content::after {
	left: 234px;
}
.icon.collateral-blockchain-selector.dropdown-content::after {
	left: 151px;
}
.icon.loan-blockchain-selector.dropdown-content::after {
	left: 206px;
}
.optimism.collateral-blockchain-selector.dropdown-content::after {
	left: 177px;
}
.optimism.loan-blockchain-selector.dropdown-content::after {
	left: 233px;
}
.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: 258px;
	left: initial;
	right: 35px;
	width: 415px;
	padding-bottom: 5px;
}
.loan-blockchain-selector.dropdown-content::after {
	right: 223px;
}

/* Locked / Used indicator */

#indicator-locked-container,
#indicator-used-container {
	position: relative;
}
#indicator-locked,
#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-used {
	height: 10px;
	transition: height 0.2s ease;
}
#indicator-locked .label,
#indicator-used .label {
	margin-top: -20px;
	margin-left: -23px;
}
#indicator-used .label {
	margin-left: -40px;
}
#indicator-locked.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: #b7ae2c;
	transform: initial;;
	border-width: 12px;
	margin-left: -12px;
	left: 50%;
	top: -25px;
	border-bottom-color: #b7ae2c;
	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 #9d7b03;
	background-color: #9d7b03;
	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;
}
#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: 350px;
	/*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: 153px;
	width: 210px;
}
#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: 396px;
	margin-bottom: 3px;
}
#risk-rebalancing #tooltip-risk.tooltip .tooltip-content:nth-of-type(2)::after {
	left: 21%;
}
#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: #b7ae2c;
	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: #b7ae2c;
	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: #b7ae2c;
	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: #9d7b03;
	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: #b7ae2c;
	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: #b7ae2c;
	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: 78.8%;
	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: #b7ae2c;
	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: #b7ae2c;
	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.html);
	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.bnb td:first-of-type {
	background-image: url(../img/bnb.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 25px;
}

.list tbody tr.avalanche td:first-of-type,
.list tbody tr.aux td:first-of-type {
	background-image: url(../img/otc.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: 25px;
}

.list tbody tr.avalanche td:first-of-type,
.list tbody tr.usdt td:first-of-type {
	background-image: url(../img/usdt.png);
	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.html);
	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.html);
	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.html);
	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.html);
	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.html);
	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.html);
	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: #181819a3;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #181819a3;
}
.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: #181819a3;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #181819a3;
}
.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: #181819a3;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #181819a3;
}
.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: #181819a3;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #181819a3;
}
.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: #181819a3;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #181819a3;
}
.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: #181819a3;
	position: absolute;
	margin-top: -7px;
	left: 15px;
	border-top-left-radius: 7px;
	outline: 2px solid #181819a3;
}

/*
*
* 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: #523707;
	border: 2px solid #181819a3;
}
#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: 202px;
}
/*#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 {

}
.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-blockchain {
	width: 415px;
	margin-top: 12px;
	padding-bottom: 0;
}
.dropdown-content.savings-rate-blockchain::after {
	right: initial;
	left: 111px;
}
.container-container-savings-rate-weekly-earnings {
	max-width: 150px;
}

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

/* Modals */

.dropdown-container {
	border: 2px solid #523707;
	width: 100%;
	background-color: #523707;
	color: #ffffff;
	padding: 3px 20px;
	height: 40px;
	border-radius: 10px;
	transition: 0.3s ease border;
}
.dropdown-container:hover {
	border: 2px solid #b7ae2c;
	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 #523707;
	background-color: #523707;
	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: #b7ae2c;
	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%;
	height: 65%;
	margin-top: 5px;
	font-size: initial;
	overflow-y: scroll;
}
.dropdown-content.swap-from {
	margin-top: 5px;
}
.dropdown-content.swap-from::after,
.dropdown-content.swap-to::after,
.dropdown-content.supply::after  {
	margin-left: initial;
	left: 97px;
}
.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: #181819a3;
	border: 2px solid #b7ae2c;
	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: #b7ae2c;
	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: 18px;
	bottom: 38px;
}
tr.separator {
	display: none;
}
ul.toggle-collateral {
	display: block;
	margin: auto;
	margin-bottom: 15px;
}
ul.toggle-collateral li {
	float: initial;
	display: inline-block;
}
.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: #b7ae2c;
	transition: color 0.2s ease;
}
.list.assets tbody tr:hover .label {
	color: #b7ae2c;
	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: #9d7b03;
}
.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: #b7ae2c;
	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: #9d7b03;
	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: #9d7b03;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 1px solid #9d7b03;
}
.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: #9d7b03;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #9d7b03;
}
.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: #9d7b03;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #9d7b03;
}
.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: #9d7b03;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #9d7b03;
}
.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: #9d7b03;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #9d7b03;
}
.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: #9d7b03;
	position: absolute;
	margin-top: -7px;
	left: 20px;
	border-top-left-radius: 7px;
	outline: 2px solid #9d7b03;
}


/* Supply list */

.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: #b7ae2c;
	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 {
	margin-top: 5px;
	left: 15px;
	right: 15px;
	max-width: 100%;
}
.dropdown-content.swap-from-blockchain-selector::after,
.dropdown-content.swap-to-blockchain-selector::after {
	right: initial;
	left: 98px;
}
.dropdown-content.swap-from-blockchain-selector.arbitrum::after,
.dropdown-content.swap-to-blockchain-selector.arbitrum::after {
	left: 123px;
}
.dropdown-content.swap-from-blockchain-selector.avalanche::after,
.dropdown-content.swap-to-blockchain-selector.avalanche::after {
	left: 140px;
}
.dropdown-content.swap-from-blockchain-selector.base::after,
.dropdown-content.swap-to-blockchain-selector.base::after {
	left: 98px;
}
.dropdown-content.swap-from-blockchain-selector.ethereum::after,
.dropdown-content.swap-to-blockchain-selector.ethereum::after {
	left: 130px;
}
.dropdown-content.swap-from-blockchain-selector.icon::after,
.dropdown-content.swap-to-blockchain-selector.icon::after {
	left: 103px;
}
.dropdown-content.swap-from-blockchain-selector.optimism::after,
.dropdown-content.swap-to-blockchain-selector.optimism::after {
	left: 130px;
}
.dropdown-content.swap-from-blockchain-selector .search,
.dropdown-content.swap-to-blockchain-selector .search {
	border: 2px solid #523707;
	background-color: #523707;
	box-shadow: 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: #181819a3;
}
.supply-options p:hover,
.supply-options p.active {
	background-color: #b7ae2c;
}
#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: #9d7b03;
	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;
}
.supply-1-dropdown input[type="text"],
.supply-2-dropdown input[type="text"] {
	border: 2px solid #523707;
	background-color: #523707;
}
.supply-1-dropdown::after,
.supply-2-dropdown::after {
	left: 106px;
	right: initial;
}
.supply-2-dropdown::after {
	left: 125px;
}

.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: #9d7b03;
	border-radius: 15px;
	text-align: center;
	font-family: tex-gyre-adventor-regular;
}
.concentrated-liquidity .metadata-container > .grid-cell input[type="text"] {
	background-color: #181819a3;
	border: 2px solid #9d7b03;
	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: #181819a3;
	border: 2px solid #b7ae2c;
	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: #b7ae2c;
	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 #523707;
	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 #523707;
	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 #b7ae2c;
}


#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: #181819a3;
	border: 2px solid #b7ae2c;
	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: #b7ae2c;
	border-width: 10px;
	transform: rotate(90deg);
}



.blockchain-selectors .metadata dd a {
	font-size: 16px;
}

/* blockchains */

.collateral-blockchain-selector .variable-collateral-blockchain.asset-image.arbitrum::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image.arbitrum::before,
#rewards .variable-rewards-blockchain.asset-image.arbitrum::before {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/arbitrum.svg);
	display: inline-block;
	margin-left: 5px;
	padding-left: 20px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.collateral-blockchain-selector .variable-collateral-blockchain.asset-image.avalanche::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image.avalanche::before,
#rewards .variable-rewards-blockchain.asset-image.avalanche::before {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/avalanche.svg);
	display: inline-block;
	margin-left: 5px;
	padding-left: 20px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.collateral-blockchain-selector .variable-collateral-blockchain.asset-image.base::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image.base::before,
#rewards .variable-rewards-blockchain.asset-image.base::before {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/base.svg);
	display: inline-block;
	margin-left: 5px;
	padding-left: 20px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.collateral-blockchain-selector .variable-collateral-blockchain.asset-image.ethereum::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image.ethereum::before,
#rewards .variable-rewards-blockchain.asset-image.ethereum::before {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/eth.svg);
	display: inline-block;
	margin-left: 5px;
	padding-left: 20px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.collateral-blockchain-selector .variable-collateral-blockchain.asset-image.icon::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image.icon::before,
#rewards .variable-rewards-blockchain.asset-image.icon::before {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/icx.svg);
	display: inline-block;
	margin-left: 5px;
	padding-left: 20px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.collateral-blockchain-selector .variable-collateral-blockchain.asset-image.optimism::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image.optimism::before,
#rewards .variable-rewards-blockchain.asset-image.optimism::before {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/optimism.svg);
	display: inline-block;
	margin-left: 5px;
	padding-left: 20px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.collateral-blockchain-selector .variable-collateral-blockchain.asset-image.stellar::before,
.loan-blockchain-selector .variable-loan-blockchain.asset-image.stellar::before,
#rewards .variable-rewards-blockchain.asset-image.stellar::before {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../img/logo/stellar-white.png);
	display: inline-block;
	margin-left: 5px;
	padding-left: 20px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}

/* Big assets */

.asset-selector .variable-collateral-asset.asset-image.avax::before {
	content: '';
	display: block;
	height: 18px;
	width: 18px;
	background-image: url(../img/logo/avax.svg);
	display: inline-block;
	margin-right: 5px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.asset-selector .variable-collateral-asset.asset-image.eth::before {
	content: '';
	display: block;
	height: 18px;
	width: 18px;
	background-image: url(../img/logo/eth.svg);
	display: inline-block;
	margin-right: 5px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.asset-selector .variable-collateral-asset.asset-image.icx::before {
	content: '';
	display: block;
	height: 18px;
	width: 18px;
	background-image: url(../img/logo/icx.svg);
	display: inline-block;
	margin-right: 5px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}
.asset-selector .variable-collateral-asset.asset-image.xlm::before {
	content: '';
	display: block;
	height: 18px;
	width: 18px;
	background-image: url(../img/logo/stellar-white.png);
	display: inline-block;
	margin-right: 5px;
	background-repeat: no-repeat;
	transform: translateY(2px);
}

/* 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: #b7ae2c;
	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: 51px;
	top: -24px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #9d7b03;
	border-width: 12px;
	margin-left: -10px;
	transform: rotate(0.5turn);
}

.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: #b7ae2c !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: #9d7b03;
	border: 2px solid #9d7b03;
	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 #b7ae2c;
	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: #b7ae2c;
	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#allocation-liquidity tbody tr td:first-of-type {
	padding-left: 100px;
	background-size: 85px;
	background-position: 0px 13px;
}
table#all-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: #181819a3;
	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: #b7ae2c;
	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: #181819;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	padding: 5px 15px;
	padding-bottom: 7px;
}
.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: 100px;
}

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

/* Modals */

#modal-new-proposal {
	max-width: 400px;
}
#modal-new-proposal h3 {
	margin-bottom: 25px;
}
#modal-new-proposal textarea {
	min-height: 150px;
	margin-top: 15px;
	margin-bottom: 15px;
}
#modal-new-proposal #proposal-options {
	background-color: #523707;
	outline: none;
	border: #523707;
	border-radius: 10px;
	width: 100%;
	margin-bottom: 20px;
	height: 40px;
	padding: 5px 15px;
	color: #fff;
}

/* Vote options */

.vote-options ul {

}
.vote-options li {
	list-style-type: none;
	margin-top: 25px;
	margin-bottom: 25px;
	cursor: pointer;
}
.vote-options li::before {
	content: '';
	position: absolute;
	background-color: transparent;
	height: 20px;
	width: 20px;
	border-radius: 20px;
	border: 3px solid #b7ae2c;
	left: 0;
	margin-top: 2px;
	transition: background-color 0.3s ease;
}
.vote-options li:last-of-type::before {
	border: 3px solid #fb6a6a;
}
.vote-options li:first-of-type:hover::before {
	background-color: #b7ae2c;
	transition: background-color 0.2s ease;
}
.vote-options li:last-of-type:hover::before {
	background-color: #fb6a6a;
	transition: background-color 0.2s ease;
}

.vote-submit {
	margin-left: 35px;
}

.your-votes1 {
    background-color: #9d7b03;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
}


.vote-options li:first-of-type::after {
	content: '';
	position: relative;
	background-color: #b7ae2c;
	height: 20px;
	width: 200px;
	border-radius: 20px;
	display: block;
	margin-top: 10px;
}
.vote-options li:last-of-type::after {
	content: '';
	position: relative;
	background-color: #fb6a6a;
	height: 20px;
	width: 25px;
	border-radius: 20px;
	display: block;
	margin-top: 10px;
}

/* Vote overview */

#vote-overview #vote-power {
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	padding-left: 35px;
	margin-left: 35px;
}
#vote-overview .panel [disabled].noUi-horizontal {
	background: #03334f;
}
#vote-overview .svg {
	width: 35px;
}
#vote-overview .svg path {
	fill: #b7ae2c;
}


/* Breadcrumbs */

.breadcrumbs ol li {
	display: inline-block;
}
.breadcrumbs ol {
	padding-left: 0;
	margin-bottom: 50px;
}
.breadcrumbs span {
	margin-left: 5px;
	margin-right: 5px;
}

.breadcrumbs.vote a {
	font-size: 16px;
}

#proposals,
.your-votes {
	margin-bottom: 0;
}
#proposals .boxes > .grid-cell {
	margin: 0;
	margin-right: 35px;
	border: 3px solid #9d7b03;
	transition: border 0.3s ease;
}
#proposals .boxes > a.grid-cell {
	color: #ffffff;
}
#proposals .boxes > a.grid-cell p {
	color: rgba(255,255,255,0.75);
}
#proposals .boxes > .grid-cell:hover {
	border: 3px solid #b7ae2c;
	cursor: pointer;
	transition: border 0.2s ease;
}
#proposals .boxes > .grid-cell:last-of-type {
	margin-right: 0;
}
#proposals .boxes h3 {
	font-size: 16px;
	margin-bottom: 10px;
}
#proposals .boxes p {
	font-size: 14px;
}

.p-rep-list .search {
	width: 100%;
	background-color: #523707;
	border: none;
	color: #ffffff;
	padding: 10px 20px;
	border-radius: 10px;
	outline: none;
	border: 2px solid #181819a3;
	min-height: 49px;
	margin-bottom: 25px;
	transition: border 0.3s ease;
}
.p-rep-list .search:focus,
.p-rep-list .search:hover {
	border: 2px solid #b7ae2c;
	transition: border 0.2s ease;
}

/*
*
* P-Reps list
*
*/

#p-rep-list .list.p-reps #tooltip-earnings img.tooltip-icon {
	width: 15px;
	margin-top: 2px;
	margin-left: 5px;
	margin-bottom: 0;
}
#tooltip-earnings .tooltip-content {
	margin-bottom: -30px;
}
#p-rep-list .title {
	margin-bottom: 25px;
}
.list.vote tbody tr td:first-of-type,
.list.p-reps tbody tr td:first-of-type {
	padding-left: 20px;
	width: 110px;
}
.list.p-reps thead tr th:nth-of-type(2),
.list.p-reps tbody tr td:nth-of-type(2) {
	text-align: left;
}
.list.p-reps tbody tr td:nth-of-type(2) .grid .grid-cell:first-of-type {
	max-width: 125px;
	padding-right: 20px;
}
.list.p-reps tbody tr td:last-child {
	max-width: 90px;
	text-align: right;
}
.list.p-reps tbody {
	font-size: 16px;
}
.list.vote tbody a,
.list.p-reps tbody a {
	font-size: 16px;
	color: #fff;
}
.list.p-reps tbody tr {
	cursor: default;
	border-radius: 10px;
}

.list.p-reps .plus {
	display: none;
}
.list.vote tbody tr td:nth-of-type(2) .grid .grid-cell:first-of-type,
.list.p-reps tbody tr td:nth-of-type(2) .grid .grid-cell:first-of-type {
	max-width: 70px;
}
.list.p-reps.adjust .plus {
	display: block;
}
.list.p-reps.adjust tbody tr td:nth-of-type(2) .grid .grid-cell:first-of-type {
	max-width: 125px;
}

.list.vote > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(3),
.list.vote > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(4),
.list.vote > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(5),
.list.vote > tbody > tr > td:nth-child(3),
.list.vote > tbody > tr > td:nth-child(4),
.list.vote > tbody > tr > td:nth-child(5),
.list.p-reps > thead > tr > th:nth-child(3),
.list.p-reps > thead > tr > th:nth-child(4),
.list.p-reps > thead > tr > th:nth-child(5),
.list.p-reps > tbody > tr > td:nth-child(3),
.list.p-reps > tbody > tr > td:nth-child(4),
.list.p-reps > tbody > tr > td:nth-child(5) {
	text-align: right;
}

/*
*
* P-Reps list
*
*/

#proposal-list .proposal {
	padding: 20px 25px;
	background-color: #9d7b03;
	border-radius: 10px;
	margin-bottom: 25px;
	border: 3px solid #9d7b03;
	transition: border 0.2s ease;
	box-shadow: 0px 10px 15px 0px rgba(1, 0, 42, 0.1);
}
#proposal-list .proposal h3,
#proposal-list .proposal .proposal-metadata span.label,
.proposal-metadata span.label  {
	color: #ffffff;
}
#proposal-list .proposal p {
	color: rgba(255,255,255,0.75);
}
/*
#proposal-description p,
#proposal-list .proposal p {
	color: rgba(255,255,255,0.75);
}
*/
#proposal-list .proposal:hover {
	border: 3px solid #b7ae2c;
	cursor: pointer;
	transition: border 0.2s ease;
}
#proposal-list .proposal:last-of-type {
	margin-bottom: 0;
}

/*
*
* Proposals
*
*/

#slider-reject .noUi-connect {
	background: #fb6a6a;
}
#vote-overview .button-container {
	max-width: 150px;
	margin-left: 25px;
}
#vote-overview h2 {
	margin-bottom: 15px;
}
#vote-overview .button {
	width: 100%;
	max-width: 100%;
	text-align: center;
	margin-top: 27px;
}
#slider-approve {
	margin-bottom: 10px;
}
#slider-approve,
#slider-reject {
	margin-top: 15px;
}

/*
*
* New proposal
*
*/

#new-proposal .title {
	margin-top: 25px;
	margin-bottom: 15px;
}
#new-proposal textarea {
	min-height: 150px;
}
#new-proposal .message {
	margin-top: 25px;
	margin-bottom: 25px;
}
#new-proposal h2 {
	margin-bottom: 25px;
}
#new-proposal h2 a {
	font-family: 'tex-gyre-adventor-regular';
	font-size: 18px;
}

/* Loan fee */

#new-proposal-loan-fee .fee input,
#new-proposal-collateral-ratio .fee input,
#new-proposal-rebalancing-threshold .fee input {
	max-width: 100px;
}

.dropdown-content.proposal-type {
left: 109px;
	top: 115px;
	width: 210px;
padding-top: 10px;
padding-bottom: 20px;
}
.dropdown-content.proposal-type .list tr {

}
.dropdown-content.proposal-type .list td {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0 !important;
}
.dropdown-content.proposal-type::after {
	left: 110px;
}

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

.liquidity-expanded .toggle li {
	background-color: #181819a3;
}
.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 #181819a3;
}
.liquidity-expanded .controls .input-asset .asset {
	border-bottom-left-radius: 0;
	border: 2px solid #181819a3;
}
.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-horizontal {
	height: 176px;
}
.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 #9d7b03;
	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 #181819a3;
}
.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
========================================================================== */


.quick-amounts-container {
	background-color: #181819a3;
}
.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: initial;
	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: #9d7b03;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: -102px;
	margin-top: -14px;
	border-radius: 50px;
	border: 1px solid #181819a3;
	z-index: 2;
}
.liquidity-pool .graphic::after {
	content: '';
	display: block;
	position: absolute;
	height: 50px;
	width: 50px;
	background-color: #9d7b03;
	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: #181819a3;
	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);
}
.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);
}
.noUi-vertical .noUi-handle {
	width: 20px;
	height: 20px;
	right: -10px;
	top: -8px;
	background-color: #03334f;
	border: 3px solid #b7ae2c;
	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 #181819a3;
	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: #181819a3;
}
.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 #181819a3;
}
.liquidity-expanded .controls .input-asset .asset {
	border-bottom-left-radius: 0;
	border: 2px solid #181819a3;
}
.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 {
	width: 400px;
	max-width: 400px;
	right: 0;
	z-index: 9;
}
.dropdown-content.wallet .overview {
	background-color: #9d7b03;
	border-radius: 10px;
	margin-bottom: 15px;
}
.dropdown-content.wallet .list.assets {
	margin-bottom: 0;
}
#slider-boost {
	margin-top: 10px;
	margin-bottom: 10px;
	background: #9d7b03;
}
#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 #181819a3 !important;
	width: 100%;
	background-color: #523707 !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 #b7ae2c !important;
}

#loan span.loan-selector {
	font-size: 18px;
	font-family: 'tex-gyre-adventor-regular';
	font-weight: normal;
	color: #9d7b03;
}
.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 #b7ae2c;
	color: #ffffff;
	transition: border-bottom 0.2s ease, color 0.2s ease;
}
.modal-asset .asset-container {
	background-color: #9d7b03;
	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 #b7ae2c;
	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 #9d7b03;
	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: #181819a3;
	border: 2px solid #181819a3;
}
.modal-asset .input-asset .asset {
		background-color: #181819a3;
	border: 2px solid #181819a3;
	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: #9d7b03;
	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: #b7ae2c;
	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: #b7ae2c;
	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: #b7ae2c;
	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: #9d7b03;
	padding: 35px;
	border-radius: 15px;
}
.liquidity-withdraw .graphical-options > .grid-cell {
	text-align: center;
	border-radius: 15px;
	background-color: #181819a3;
	border: 2px solid #181819a3;
	transition: border 0.3s ease;
	padding: 10px;
	margin-right: 15px;
	max-width: 150px;
}
.liquidity-withdraw .graphical-options > .grid-cell:hover {
	border: 2px solid #b7ae2c;
	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 {
	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;
}


/* 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: #181819a3;
	border: 2px solid #b7ae2c;
	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: #9d7b03;
	border-radius: 100px;
	padding: 5px;
}
.select-options .grid-cell:hover {
	background-color: #b7ae2c;
}
.select-options .grid-cell.active {
	background-color: #b7ae2c;
}

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

.clickable {
	cursor: pointer;
	transition: color 0.3s ease;
}
.clickable:hover {
	color: #9d7b03;
}


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: #b7ae2c;
	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;
}

/* ==========================================================================
	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);
	}

}

/* 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;
	}

	/* 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);
	}
}

/* 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 {
		top: 40%;
		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;
	}

	/* 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;
	}
	#modal-manage-wallets .list.manage-wallets li > .grid,
	#modal-sign-in .list.sign-in li > .grid {
		flex-direction: column;
	}
	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: center;
		margin-top: 5px;
	}
	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;
	}
	.demo-tag {
		margin-left: -5px;
	}
	.dropdown-content.wallet {
		max-width: initial;
		width: 430%;
	}
	.header > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
		max-width: 75px !important;
	}
	.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;
	}

}

/* 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;
	}

}