@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300;400;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins&display=swap);
* {
	font-family: Signika;
	font-size: 1.5vh;
	font-weight: 400;
	box-sizing: content-box;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin: 0;
	color: #fff
}

body,
html {
	overflow: hidden
}

img {
	image-rendering: -webkit-optimize-contrast;
	max-width: 7.7vh;
	max-height: 7.7vh
}

.center-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh
}

.column-wrapper {
	display: flex;
	flex-direction: column
}

.row-wrapper {
	display: flex;
	flex-direction: row
}

.inventory-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: .5vh
}

.inventory-grid {
	display: grid;
	height: calc(52.1vh + 10px);
	grid-template-columns: repeat(5, 10.2vh);
	grid-auto-rows: 10.42vh;
	grid-gap: 2px;
	gap: 2px;
	overflow-y: scroll;
	margin-top: .5vh;
	margin-bottom: 1vh
}

.drag {
	width: 7.7vh;
	height: 7.7vh;
	z-index: 1;
	position: fixed;
	pointer-events: none;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: 50%;
	image-rendering: -webkit-optimize-contrast
}

.hotbar-grid>.item-container:first-child>.item-count:before,
.hotbar-grid>.item-notification:first-child>.item-count:before,
.inventory-grid-player>.item-container:first-child>.item-count:before,
.inventory-grid-player>.item-notification:first-child>.item-count:before {
	content: "1";
	width: 1.5vh;
	height: 1.7vh;
	line-height: 1.7vh;
	font-size: .7em;
	border-top-left-radius: .25vh;
	border-bottom-right-radius: .25vh;
	font-family: Oxygen;
	font-weight: 700;
	text-align: center;
	background-color: #fff;
	color: #000
}

.hotbar-grid>.item-container:nth-child(2)>.item-count:before,
.hotbar-grid>.item-notification:nth-child(2)>.item-count:before,
.inventory-grid-player>.item-container:nth-child(2)>.item-count:before,
.inventory-grid-player>.item-notification:nth-child(2)>.item-count:before {
	content: "2";
	width: 1.5vh;
	height: 1.7vh;
	line-height: 1.7vh;
	font-size: .7em;
	border-top-left-radius: .25vh;
	border-bottom-right-radius: .25vh;
	font-family: Oxygen;
	font-weight: 700;
	text-align: center;
	background-color: #fff;
	color: #000
}

.hotbar-grid>.item-container:nth-child(3)>.item-count:before,
.hotbar-grid>.item-notification:nth-child(3)>.item-count:before,
.inventory-grid-player>.item-container:nth-child(3)>.item-count:before,
.inventory-grid-player>.item-notification:nth-child(3)>.item-count:before {
	content: "3";
	width: 1.5vh;
	height: 1.7vh;
	line-height: 1.7vh;
	font-size: .7em;
	border-top-left-radius: .25vh;
	border-bottom-right-radius: .25vh;
	font-family: Oxygen;
	font-weight: 700;
	text-align: center;
	background-color: #fff;
	color: #000
}

.hotbar-grid>.item-container:nth-child(4)>.item-count:before,
.hotbar-grid>.item-notification:nth-child(4)>.item-count:before,
.inventory-grid-player>.item-container:nth-child(4)>.item-count:before,
.inventory-grid-player>.item-notification:nth-child(4)>.item-count:before {
	content: "4";
	width: 1.5vh;
	height: 1.7vh;
	line-height: 1.7vh;
	font-size: .7em;
	border-top-left-radius: .25vh;
	border-bottom-right-radius: .25vh;
	font-family: Oxygen;
	font-weight: 700;
	text-align: center;
	background-color: #fff;
	color: #000
}

.hotbar-grid>.item-container:nth-child(5)>.item-count:before,
.hotbar-grid>.item-notification:nth-child(5)>.item-count:before,
.inventory-grid-player>.item-container:nth-child(5)>.item-count:before,
.inventory-grid-player>.item-notification:nth-child(5)>.item-count:before {
	content: "5";
	width: 1.5vh;
	height: 1.7vh;
	line-height: 1.7vh;
	font-size: .7em;
	border-top-left-radius: .25vh;
	border-bottom-right-radius: .25vh;
	font-family: Oxygen;
	font-weight: 700;
	text-align: center;
	background-color: #fff;
	color: #000
}

.item-container,
.item-notification {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: rgba(0, 0, 0, .4);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 7.7vh;
	border-radius: .25vh;
	image-rendering: -webkit-optimize-contrast;
	position: relative
}

.item-container .item-count,
.item-notification .item-count {
	display: flex
}

.item-container .item-count span,
.item-notification .item-count span {
	font-family: Oxygen;
	margin-left: auto;
	font-size: .7em;
	font-weight: 300;
	padding: .2em;
	text-shadow: .1vh .1vh 0 rgba(0, 0, 0, .7)
}

.item-container .item-durability,
.item-notification .item-durability {
	margin-top: auto;
	background: rgba(0, 0, 0, .5);
	height: .3em;
	overflow: hidden
}

.item-container .item-durability div,
.item-notification .item-durability div {
	height: 100%
}

.item-container .item-label,
.item-notification .item-label {
	background-color: #457aeb;
	padding: .1em;
	margin: -1px;
	font-size: .7em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	border: inherit;
	border-top: 1px inset rgba(0, 0, 0, .4)
}

.item-container .item-price,
.item-notification .item-price {
	text-shadow: .1vh .1vh 0 rgba(0, 0, 0, .7);
	position: absolute;
	font-size: .8em;
	bottom: 1.4vh;
	right: .1vh;
	height: 2vh;
	display: flex;
	justify-content: center;
	align-items: center
}

.item-container .item-price .item-currency,
.item-notification .item-price .item-currency {
	height: auto;
	width: 2vh;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0)
}

.button,
.misc-btns button,
input[type=number] {
	background-color: rgba(12, 12, 12, .4);
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: .25vh;
	padding: .9vh;
	text-align: center;
	width: 16vh;
	margin: .8vh
}

.button:hover,
.misc-btns button:hover,
input[type=number]:hover {
	background-color: #457aeb;
	opacity: .8
}

.misc-btns {
	position: absolute;
	bottom: 1vh;
	right: 1vh;
	display: flex;
	flex-direction: row;
	justify-content: space-between
}

.misc-btns button {
	width: 2vh;
	font-size: 2.5vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: none;
	border: none
}

input[type=number] {
	margin-bottom: 3vh!important
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none
}

input[type=number]:focus {
	outline: none
}

::-webkit-scrollbar {
	display: none
}

.weight-bar {
	background: rgba(0, 0, 0, .4);
	border: 1px inset rgba(0, 0, 0, .1);
	height: .7em;
	border-radius: .25vh;
	overflow: hidden
}

.weight-bar div {
	height: 100%
}

.hotbar-grid {
	display: grid;
	grid-template-columns: repeat(5, 10.2vh);
	grid-auto-rows: 10.2vh;
	grid-gap: 2px;
	gap: 2px;
	position: absolute;
	bottom: 2vh;
	border-radius: .25vh
}

.hotbar-grid .item-container,
.hotbar-grid .item-notification {
	border: 1px inset rgba(0, 0, 0, .3)
}

.item-info {
	padding: .7vh!important;
	background-color: #457aeb!important;
	opacity: 1!important;
	border-radius: .25vh!important;
	width: 23vh;
	min-width: 180px;
	text-shadow: .1vh .1vh 0 rgba(0, 0, 0, .7);
	border: 1px solid rgba(0, 0, 0, .2)!important;
	line-height: 1.1em!important
}

.item-info,
.item-info p,
.item-info strong {
	font-size: .95em!important
}

.item-info strong {
	font-weight: 600!important
}

.progressBar {
	width: 28vh;
	height: 3.6vh;
	position: absolute;
	bottom: 13vh;
	left: 50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	background-color: rgba(0, 0, 0, .6);	
	border: 1px #ffffff solid;
}

.progressBar-cancel,
.progressBar-value {
	width: 0;
	height: 100%;
	background-color: #457aeb;
	border-radius: inherit;
	-webkit-animation: progressBar linear forwards;
	animation: progressBar linear forwards
}

.progressBar-cancel span,
.progressBar-value span {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 1.25em;
	width: 100%;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap
}

@-webkit-keyframes progressBar {
	0% {
		width: 0
	}
	to {
		width: 100%
	}
}

@keyframes progressBar {
	0% {
		width: 0
	}
	to {
		width: 100%
	}
}

.progressBar-cancel {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
	width: 100%!important;
	background-color: #457aeb
}

.info-fade {
	z-index: 99
}

.info-main {
	position: absolute;
	width: 30vw;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: #457aeb;
	z-index: 99
}

.info-main h2 {
	font-size: 3vh;
	text-align: center;
	padding-bottom: 2vh;
	padding-top: 2vh
}

.info-main p {
	font-size: 1.8vh;
	padding: 2vh
}

.info-main .info-exit-icon {
	font-size: 2.8vh;
	position: absolute;
	right: 1vh;
	top: 1vh
}

.info-main .info-ox {
	position: absolute;
	right: 1vh;
	bottom: 1vh
}

.keyboard-container {
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	z-index: 999;
	width: 30vh;
	background-color: #457aeb;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: .25vh;
	text-shadow: .1vh .1vh 0 rgba(0, 0, 0, .7)
}

.keyboard-container .keyboard-header {
	text-shadow: none;
	font-size: 2vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .5vh;
	letter-spacing: .08vh;
	border-bottom: .3vh solid grey
}

.keyboard-container .keyboard-component {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: .6vh 1.7vh .5vh;
	align-items: center
}

.keyboard-container .keyboard-component p {
	margin-left: .4vh;
	font-size: 1.6vh;
	align-self: flex-start
}

.keyboard-container .keyboard-component input {
	border-radius: .25vh;
	background-color: #457aeb;
	height: 2.4vh;
	width: 25vh;
	font-size: 1.5vh;
	padding: .4vh;
	border: none;
	outline: none
}

.keyboard-container .keyboard-buttons-div {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1vh
}

.keyboard-container .keyboard-buttons-div button {
	border: none;
	outline: none;
	font-size: 1.6vh;
	padding: .6vh;
	border-radius: .25vh;
	background-color: #4caf50
}

.react-contexify {
	border-radius: .25vh;
	background-color: #457aeb;
	box-shadow: none;
	border: 1px inset rgba(0, 0, 0, .2)!important;
	padding: 3px 0
}

.react-contexify__theme--dark {
	font-size: 1.3vh!important;
	background-color: #457aeb
}

.react-contexify__theme--dark .react-contexify__submenu {
	background-color: #457aeb;
	border-radius: .25vh;
	top: -3px
}

.react-contexify__theme--dark .react-contexify__separator {
	background-color: rgba(0, 0, 0, .2)
}

.react-contexify__theme--dark .react-contexify__item__content {
	font-size: 1.3vh!important;
	color: #fff;
	padding: 3px 6px
}

.react-contexify__item:not(.react-contexify__item--disabled):focus>.react-contexify__item__content,
.react-contexify__item:not(.react-contexify__item--disabled):hover>.react-contexify__item__content {
	background-color: #457aeb
}

.item-action {
	width: 100%;
	background-color: #fff;
	font-family: Poppins;
	color: #000;
	text-align: center;
	font-size: 1.1vh;
	border-top-left-radius: .25vh;
	border-top-right-radius: .25vh
}

.item-notifications-container {
	display: flex;
	grid-gap: 2px;
	gap: 2px;
	position: absolute;
	bottom: 20vh;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.item-notification {
	height: 10.78vh;
	width: 10.01vh;
	justify-content: space-between;
	border: 1px inset rgba(0, 0, 0, .3)
}

.item-notification-enter {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0)
}

.item-notification-enter-active {
	transition: opacity .5s, -webkit-transform .5s ease;
	transition: opacity .5s, transform .5s ease;
	transition: opacity .5s, transform .5s ease, -webkit-transform .5s ease
}

.item-notification-enter-active,
.item-notification-exit {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1)
}

.item-notification-exit-active {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	transition: opacity .5s, -webkit-transform .5s ease;
	transition: opacity .5s, transform .5s ease;
	transition: opacity .5s, transform .5s ease, -webkit-transform .5s ease
}


/*# sourceMappingURL=main.3c04c04e.chunk.css.map */