/* ==========================================================================
	Dark mode
========================================================================== */

@media (prefers-color-scheme: dark) {

	html {
		background: #222328;
	}
	h1,
	h2,
	h3 {
		color: #ffffff;
	}
	.panel {
		background-color: #3f414a;
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034),
					0 6.7px 5.3px rgba(35, 36, 41, 0.048),
					0 12.5px 10px rgba(35, 36, 41, 0.06),
					0 22.3px 17.9px rgba(35, 36, 41, 0.072),
					0 41.8px 33.4px rgba(35, 36, 41, 0.086),
					0 100px 80px rgba(35, 36, 41, 0.12);
	}
	.list tbody tr {
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034),
					0 6.7px 5.3px rgba(35, 36, 41, 0.048),
					0 12.5px 10px rgba(35, 36, 41, 0.06),
					0 22.3px 17.9px rgba(35, 36, 41, 0.072),
					0 41.8px 33.4px rgba(35, 36, 41, 0.086),
					0 100px 80px rgba(35, 36, 41, 0.12);
	}
	.list tbody td {
		background-color: #3f414a;
	}
	.navigation ul li a:hover,
	.navigation ul li a.active {
		color: #ffffff;
		background-color: #3f414a;
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034),
					0 6.7px 5.3px rgba(35, 36, 41, 0.048),
					0 12.5px 10px rgba(35, 36, 41, 0.06),
					0 22.3px 17.9px rgba(35, 36, 41, 0.072),
					0 41.8px 33.4px rgba(35, 36, 41, 0.086),
					0 100px 80px rgba(35, 36, 41, 0.12);
	}
	.navigation ul li a.active svg path,
	.navigation ul li a.active svg rect {
		stroke: #ffffff !important;
	}
	.list.markets tr.asset td {
		color: #ffffff;
	}
	ul.toggle li.active,
	ul.toggle li:hover {
		color: #ffffff;
	}
	.text-dark {
		color: #ffffff !important;
	}
	.dot {
		background-color: #3f414a;
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034),
					0 6.7px 5.3px rgba(35, 36, 41, 0.048),
					0 12.5px 10px rgba(35, 36, 41, 0.06),
					0 22.3px 17.9px rgba(35, 36, 41, 0.072),
					0 41.8px 33.4px rgba(35, 36, 41, 0.086),
					0 100px 80px rgba(35, 36, 41, 0.12);
	}
	.dot svg path {
		fill: #a8b1c4;
	}
	.border-right {
		border-right: 1px solid #565b66;
	}
	.header .wallet-content a:hover {
		color: #ffffff;
	}
	input[type="text"] {
		color: #ffffff;
		background-color: #3f414a;
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034),
					0 6.7px 5.3px rgba(35, 36, 41, 0.048),
					0 12.5px 10px rgba(35, 36, 41, 0.06),
					0 22.3px 17.9px rgba(35, 36, 41, 0.072),
					0 41.8px 33.4px rgba(35, 36, 41, 0.086),
					0 100px 80px rgba(35, 36, 41, 0.12);
	}
	.separator-full::before {
		background-color: #565b66;
	}
	.separator-full::after {
		background-color: #565b66;
	}
	html,
	.metadata dt,
	.label,
	.list tbody tr.available-to-supply p {
		color: #a8b1c4 !important;
	}
	.list.bomm-votes tbody,
	.list.sicx-votes tbody {
		color: #ffffff !important;
	}
	#apr-toggle .switch-slider {
		background-color: #515462;
	}
	.text-green,
	.supply .supply-apy {
		color: #0ed9c9 !important;
	}
	.text-purple,
	.borrow .borrow-apy {
		color: #b07aff !important;
		background: initial !important;
		-webkit-text-fill-color: initial !important;
	}
	.metadata dd {
		color: #ffffff;
	}
	.input-supply-default {
		color: #ffffff;
	}
	.list.markets .market-expanded {
		border-top: 1px solid #565b66;
	}
	input[type="text"].input-supply,
	input[type="text"].input-supply-available,
	input[type="text"].input-borrow,
	input[type="text"].input-borrow-available {
		color: #ffffff;
	}
	input[type="text"].input-supply:disabled,
	input[type="text"].input-supply-available:disabled,
	input[type="text"].input-borrow:disabled,
	input[type="text"].input-borrow-available:disabled {
		color: #ffffff;
		-webkit-text-fill-color: #ffffff;
	}
	.button {
		color: #ffffff;
	}
	#risk .noUi-target {
		background: -moz-linear-gradient( 0deg, rgb(96,129,223, 0.25) 0%, rgb(157,77,241, 0.25) 100%);
		background: -webkit-linear-gradient( 0deg, rgb(96,129,223, 0.25) 0%, rgb(157,77,241, 0.25) 100%);
		background: -ms-linear-gradient( 0deg, rgb(96,129,223, 0.25) 0%, rgb(157,77,241, 0.25) 100%);
	}
	#risk .value-risk-total {
	    color: #a8b1c4;
	}
	#risk .risk-message-liquidated::after {
		background-color: #a8b1c4;
	}
	#risk .risk-message-liquidated span::after {
		background-color: #a8b1c4;
	}
	#panel-stake .input-asset input[type="text"],
	#panel-unstake .input-asset input[type="text"],
	.adjust input[type="text"].input-supply,
	.adjust input[type="text"].input-supply-available,
	.adjust input[type="text"].input-borrow,
	.adjust input[type="text"].input-borrow-available,
	input[type="text"].input-edit {
		border: 2px solid #565b66;
	}
	.ticker {
		color: #ffffff;
	}
	.cancel {
	    color: #ffffff;
	}
	.cancel:hover {
	    color: #a8b1c4;
	}
	.noUi-horizontal .noUi-handle {
		background-color: #3f414a;
	}
	.tooltip-content {
		background-color: #3f414a;
		color: #ffffff;
	}
	.navigation ul li a:hover svg path,
	.navigation ul li a:hover svg rect,
	.navigation ul li a:hover svg circle {
		stroke: #ffffff !important;
		transition: stroke 0.2s ease;
	}
	.navigation ul li a.active svg path,
	.navigation ul li a.active svg rect,
	.navigation ul li a.active svg circle {
		stroke: #ffffff !important;
		transition: stroke 0.2s ease;
	}
	.header .wallet-content a {
		color: #ffffff;
	}
	.or::before {
		background-color: #3f414a;
		color: #ffffff;
	}
	.or::after {
		background-color: #565b66;
	}

	/* Rewards */

	#staking-overview #staking-apy {
		border-left: 1px solid #565b66;
	}
	.noUi-target {
		background: #515462;
	}
	#risk #slider-risk {
		background: #515462;
	}

	.border-top {
		border-top: 1px solid #565b66;
	}
	.border-bottom {
		border-bottom: 1px solid #565b66;
	}
	.logo.svg g path {
		fill: #ffffff;
	}
	.list.p-reps tbody {
		color: #ffffff;
	}
	.logo {
		content:url("../img/logo/omm-dark.svg");
	}
	.navigation ul li:hover a svg,
	.navigation ul li:hover a img {
		filter:  brightness(0) invert(1);
	}
	.navigation ul li a.active svg,
	.navigation ul li a.active img {
		filter:  brightness(0) invert(1);
	}
	#vote-overview #vote-power {
		border-left: 1px solid #565b66;
	}
	.list.p-reps tbody a {
		color: #ffffff;
	}
	#vote-overview input[type="text"],
	#staking-overview input[type="text"] {
		border: 2px solid #565b66;
		color: #ffffff;
	}
	#vote-overview input[type="text"]:hover,
	#staking-overview input[type="text"]:hover {
		border: 2px solid #2ca9b7;
	}
	.modal-overlay {
		background: rgba(34, 35, 40, 0.75);
	}
	.modal-content {
		background: #3f414a;
	}
	.modal-content h3 + p {
		color: #ffffff;
	}
	.modal-actions {
		border-top: 1px solid #565b66;
	}
	.list.p-reps tbody tr {
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034), 0 6.7px 5.3px rgba(35, 36, 41, 0.048), 0 12.5px 10px rgba(35, 36, 41, 0.06), 0 22.3px 17.9px rgba(35, 36, 41, 0.072), 0 41.8px 33.4px rgba(35, 36, 41, 0.086), 0 100px 80px rgba(35, 36, 41, 0.12);
	}

	/* Modals */

	.graphical-options .checkbox-tools:checked + label,
	.graphical-options .checkbox-tools label:hover {
		background-color: #565b66;
	}
	.graphical-options #withdraw-wait [type="radio"]:checked + label svg path,
	.graphical-options #withdraw-wait [type="radio"]:checked + label svg circle {
		stroke: #ffffff !important;
	}
	.graphical-options #withdraw-keep [type="radio"]:checked + label svg path {
		fill: #ffffff !important;
	}
	.graphical-options .checkbox-tools:checked + label .text-bold {
		color: #ffffff;
	}
	.graphical-options label:hover {
		background-color: #565b66;
	}
	.graphical-options label:hover svg path {
		fill: #ffffff !important;
	}
	.graphical-options #withdraw-wait label:hover svg path {
		fill: initial !important;
	}
	.graphical-options #withdraw-wait label:hover svg g {
		stroke: #ffffff !important;
	}
	.graphical-options label:hover span.text-bold {
		color: #ffffff;
	}
	.sign-in-options > .grid-cell a:hover {
		background-color: #565b66;
		color: #ffffff;
	}
	#modal-add-preps ul {
		color: #ffffff;
	}
	.notification.panel {
		color: #ffffff;
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	}
	.notice {
		background-color: #565b66;
	}
	#performance #time-selector:hover,
	#performance #time-selector.active {
		color: #ffffff;
	}
	#performance .time-selector-content,
	#proposal .proposal-selector-content {
		background: #282b2f;
		color: #7a8294;
	}
	#performance .time-selector-content li:hover {
		color: #ffffff;
		background-color: #3f414a;
	}
	.supply .noUi-target {
		background: -moz-linear-gradient( 180deg, rgb(0,211,194, 0.25) 0%, rgb(63,157,213, 0.25) 100%);
		background: -webkit-linear-gradient( 180deg, rgb(0,211,194, 0.25) 0%, rgb(63,157,213, 0.25) 100%);
		background: -ms-linear-gradient( 180deg, rgb(0,211,194, 0.25) 0%, rgb(63,157,213, 0.25) 100%);
	}
	.borrow .noUi-target {
		background: -moz-linear-gradient( 0deg, rgb(96,129,223, 0.25) 0%, rgb(157,77,241, 0.25) 100%);
		background: -webkit-linear-gradient( 0deg, rgb(96,129,223, 0.25) 0%, rgb(157,77,241, 0.25) 100%);
		background: -ms-linear-gradient( 0deg, rgb(96,129,223, 0.25) 0%, rgb(157,77,241, 0.25) 100%);
	}
	.adjust input[type="text"].input-supply:focus,
	.adjust input[type="text"].input-supply:hover,
	.adjust input[type="text"].input-supply-available:focus,
	.adjust input[type="text"].input-supply-available:hover {
		border: 2px solid #2ca9b7;
		transition: border 0.2s ease;
	}
	.adjust input[type="text"].input-borrow:focus,
	.adjust input[type="text"].input-borrow:hover,
	.adjust input[type="text"].input-borrow-available:focus,
	.adjust input[type="text"].input-borrow-available:hover {
		border: 2px solid #8165e9;
		transition: border 0.2s ease;
	}
	.value-risk-total.alert-purple {
		color: #b07aff !important;
	}

	/* Vote */

	#proposal-overview .text-bold {
		color: #ffffff;
	}
	#proposal-overview .proposal-overview-metadata svg g,
	#proposal-overview .proposal-overview-metadata svg path,
	#proposal-overview .proposal-overview-metadata svg circle {
		stroke: #a8b1c4 !important;
	}
	#proposal-overview .proposal-overview-metadata .label {
		color: #ffffff !important;
	}
	#proposal-description .proposal-description-metadata svg path {
		stroke: #a8b1c4 !important;
	}

	#proposal-cards p,
	#proposal-list p {
	    color: #a8b1c4;
	}

	.new-proposal input[type="text"] {
		border: 2px solid #565b66;
	}
	textarea {
		border: 2px solid #565b66;
		background-color: #3f414a;
		color: #ffffff;
	}
	.proposal-metadata span.label {
		color: #ffffff;
	}
	.banner {
		background-color: #3f414a;
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034), 0 6.7px 5.3px rgba(35, 36, 41, 0.048), 0 12.5px 10px rgba(35, 36, 41, 0.06), 0 22.3px 17.9px rgba(35, 36, 41, 0.072), 0 41.8px 33.4px rgba(35, 36, 41, 0.086), 0 100px 80px rgba(35, 36, 41, 0.12);
	}
	.banner .label {
		color: #ffffff;
	}
	#your-votes .list tbody tr:hover {
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.017), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.036), 0 41.8px 33.4px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.06);
	}
	#your-votes .list.vote > tbody > tr {
		color: #ffffff;
	}
	.proposal-decision {
		background-color: #282b2f;
	}
	#modal-sign-in-ledger .modal-content h3 {
		color: #ffffff;
	}
	ul.pagination li {
		border: 2px solid #565b66;
	}
	ul.pagination li:hover {
		background-color: #565b66;
		color: #ffffff;
	}
	#modal-sign-in-ledger table tr:hover td {
		background-color: #282b2f;
	}
	.modal .before-after {
		/*background-color: #4a4f59;*/
	}
	input[type="text"].input-boost {
		border: 2px solid #565b66;
		color: #ffffff;
	}
	.reward-amount {
		color: #ffffff;
	}
	.mobile-vote > .metadata-group .borrow-group {
		border-top: 1px solid #7a808e;
	}
	.bomm-tooltip-content,
	.bomm-tooltip .tooltip-content,
	#vote-overview  {
		color: #ffffff;
	}
	.dropdown-content {
		background: #3f414a;
	}
	.boosted-omm .locked-selector ul li:hover {
		background: #4a4f59;
		color: #ffffff;
	}
	.mobile-market .metadata-group {
		background-color: #32343c;
	}
	.select-box {
		background-color: #32343c;
		border: 2px solid #32343c;
		color: #ffffff;
	}
	.input-asset .asset {
		border: 2px solid #565b66;
		color: #ffffff;
	}
	.input-asset .asset:hover, .input-asset .asset.active {
		color: #ffffff;
	}
	.input-asset + .dropdown-content thead {
		border-bottom: 1px solid #565b66;
	}
	.input-asset + .dropdown-content tbody tr:hover td {
		background-color: #32343c;
	}

	a .tooltip-content,
	.adjust-options .tooltip .tooltip-content {
		color: #ffffff;
	}

	.text-white-in-dark {
		color: #ffffff !important;
	}
}
@media (prefers-color-scheme: dark) and (max-width: 1200px) {
	.navigation {
		background-color: #282b2f;
		box-shadow: 0 2.8px 2.2px rgba(35, 36, 41, 0.034), 0 6.7px 5.3px rgba(35, 36, 41, 0.048), 0 12.5px 10px rgba(35, 36, 41, 0.06), 0 22.3px 17.9px rgba(35, 36, 41, 0.072), 0 41.8px 33.4px rgba(35, 36, 41, 0.086), 0 100px 80px rgba(35, 36, 41, 0.12);
	}
}
@media (prefers-color-scheme: dark) and (max-width: 800px) {
	#your-overview-content .border-right,
	#market-overview-content .border-right,
	.supply-group {
		border-bottom: 1px solid #565b66;
	}
	.market-expanded .supply {
		border-right: none;
	}
	#your-liquidity.grid.panel .grid-cell.border-right,
	#all-liquidity > .grid-cell.border-right {
		border-top: 1px solid #565b66;
	}
	#staking-overview #staking-apy {
		border-left: none;
		border-top: 1px solid #565b66;
	}
	#vote-overview #vote-power {
		border-left: none;
	}
}