html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000;
	color: #fff;
	font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 12px;
	touch-action: none;
	-webkit-text-size-adjust: 100%;
}
canvas {
	width: 100%;
	height: 100%;
	vertical-align: bottom;
}
a {
	color: #fff;
	text-decoration: none;
}

:root {
	--c0: rgb(0, 0, 0);
	--c1: rgb(0, 0, 0);
	--c2: rgb(0, 0, 0);
	--c3: rgb(0, 0, 0);
	--slider-ipt-nft-mint-slider: 0%;
	--slider-ipt-pxl-mint-slider: 0%;
	--slider-ipt-pxl-deposit-slider: 0%;
	--slider-ipt-pxl-withdraw-slider: 0%;
}


div#nav {
	position: fixed;
	top: 16px;
	right: 8px;
	left: 8px;
	padding: 2px;
	color: #fff;
}
div.header {
	display: flex;
	gap: 2px;
}
div#title {
	display: flex;
	gap: 24px;
	white-space: nowrap;
}
div#opt-pixels, div#opt-owner {
	display: none;
	height: 14px;
}
div#opt-owner {
	width: calc(100vw - 52px);
	min-width: 120px;
	text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/*
 * MetaMask
 */
div#connection {
	height: 15px;
	margin: 24px 0 0 18px;
}
div#metamask, div#wrong-network, div#minting-status, div#btn-connect, div#connected, div#collectors-decks, div#collectors-pixel {
	display: none;
}

div#btn-connect {
	cursor: pointer;
}

svg.connect {
	width: 15px;
	height: 15px;
	vertical-align: bottom;
}
text.txt {
	font: normal 11px 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	fill: #fff;
}
div#connected {
	max-width: 100%;
	text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}



div#menu {
	display: none;
	margin: 24px 0 0 18px;
	gap: 8px;
}
div.menu-item {
	cursor: pointer;
}
div.menu-item:hover {
	font-style: italic;
}
div.menu-item-selected {
	text-decoration: overline;
}
div#pages {
	margin: 24px 0 0 16px;
}
div.page {
	display: none;
}
div.page-info {
	margin: 0 0 16px;
}



div#nft-mint {
	display: none;
	margin: 18px 0 0 18px;
}

div.text-input {
	margin: 0 0 2px;
	display: flex;
	align-items: center;
	gap: 4px;
}

div.buttons {
	margin: 14px 0 0 0;
}
span#price {
	margin: 0 0 0 2px;
}

div#message-container {
	display: none;
	align-items: center;
	gap: 4px;
	margin: 26px 0 0 18px;
}
div#activity-container {
	width: 15px;
	height: 15px;
}
div#opt-message {
	width: fit-content;
	padding: 2px 4px;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #fff;
}

div#loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 12px 40px 16px;
	width: 100px;
	color: #fff;
	background-color: #000;
}
div#percent {
	text-align: center;
}
div#status {
	margin-top: 4px;
	width: 0;
	height: 1px;
	background-color: #fff;
}

div#help {
	position: fixed;
	bottom: 20px;
	right: 28px;
	color: #fff;
	border-top: 1px solid #fff;
}
div.help-item {
	width: 80px;
	display: flex;
	justify-content: space-between;
}

/*
 * Navigation 
 */
svg.icon {
	width: 16px;
	height: 16px;
	vertical-align: bottom;
}
rect.center {
	transform-box: fill-box;
	transform-origin: center;
}
svg.back, svg.nav {
	width: 15px;
	height: 15px;
	vertical-align: bottom;
}



/*
 * Input 
 */
input[type=number] {
	width: 48px;
	height: 15px;
	font-size: 12px;
}

/* input:focus {
  outline: none;
} */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}


input[type=range] {
	-webkit-appearance: none;
  appearance: none;
	width: 128px;
  height: 14px;
  background: transparent;
  cursor: pointer;
}

/* Chrome, Safari, Edge */
input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	appearance: none;
  height: 6px;
  border-radius: 3px;
}
input[type="range"]#ipt-nft-mint-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #fff var(--slider-ipt-nft-mint-slider), #999 var(--slider-ipt-nft-mint-slider));
}
input[type="range"]#ipt-pxl-mint-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #fff var(--slider-ipt-pxl-mint-slider), #999 var(--slider-ipt-pxl-mint-slider));
}
input[type="range"]#ipt-pxl-deposit-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #fff var(--slider-ipt-pxl-deposit-slider), #999 var(--slider-ipt-pxl-deposit-slider));
}
input[type="range"]#ipt-pxl-withdraw-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #fff var(--slider-ipt-pxl-withdraw-slider), #999 var(--slider-ipt-pxl-withdraw-slider));
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
	transform: translate(0, -4px);
  border-radius: 7px;
  background: #fff;
}

input[type=range]:disabled::-webkit-slider-thumb {
	background: #999;
}

/* Firefox */
input[type="range"]::-moz-range-track {
	appearance: none;
	height: 6px;
  border-radius: 3px;
}
input[type="range"]#ipt-nft-mint-slider::-moz-range-track {
  background: linear-gradient(90deg, #fff var(--slider-ipt-nft-mint-slider), #999 var(--slider-ipt-nft-mint-slider));
}
input[type="range"]#ipt-pxl-mint-slider::-moz-range-track {
  background: linear-gradient(90deg, #fff var(--slider-ipt-pxl-mint-slider), #999 var(--slider-ipt-pxl-mint-slider));
}
input[type="range"]#ipt-pxl-deposit-slider::-moz-range-track {
  background: linear-gradient(90deg, #fff var(--slider-ipt-pxl-deposit-slider), #999 var(--slider-ipt-pxl-deposit-slider));
}
input[type="range"]#ipt-pxl-withdraw-slider::-moz-range-track {
  background: linear-gradient(90deg, #fff var(--slider-ipt-pxl-withdraw-slider), #999 var(--slider-ipt-pxl-withdraw-slider));
}

input[type=range]::-moz-range-thumb {
	appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #fff;
  border: none;
}

input[type=range]:disabled::-moz-range-thumb {
	background: #999;
}