body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100vh;
	background: none !important;
	overflow: hidden !important;
	user-select: none
}

#root {
	height: 100%
}

code {
	font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

::-webkit-scrollbar {
	width: 3px;
	height: 3px
}

::-webkit-scrollbar-track {
	background: rgba(224, 224, 224, 0)
}

::-webkit-scrollbar-thumb {
	background-color: #ff00ec;
	border-radius: 110px
}

p {
	margin: 0;
	padding: 0;
	font-family: Roboto
}

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

.app-wrapper {
	height: 100%;
	width: 100%;
	color: #fff
}

.context-menu-list {
	min-width: 200px;
	background: rgba(255, 0, 236, .9);
	background: radial-gradient(circle, rgba(48, 48, 48, .9) 0%, rgba(14, 14, 14, .9) 100%);
	color: #c1c2c5;
	padding: 4px;
	border-color: #0003;
	border-style: inset;
	border-width: 1px;
	border-radius: 4px;
	outline: none;
	display: flex;
	flex-direction: column
}

.context-menu-item {
	padding: 8px;
	border-radius: 4px;
	background-color: transparent;
	outline: none;
	border: none;
	color: #c1c2c5;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.context-menu-item:active {
	transform: none
}

.context-menu-item:hover {
	background: rgba(255, 0, 236, .9);
	background: radial-gradient(circle, rgba(48, 48, 48, .9) 0%, rgba(14, 14, 14, .9) 100%);
	cursor: pointer
}

.tooltip-description {
	padding-top: 5px
}

.tooltip-markdown>p {
	margin: 0
}

button:active {
	transform: translateY(3px)
}

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

.inventory-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100%;
	gap: 20px
}

.inventory-control {
	display: flex
}

.inventory-control .inventory-control-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	align-items: center
}

.inventory-control .inventory-control-input {
	transition: .2s;
	width: 120px;
	height: 32px;
	border-radius: 5px;
	font-family: Roboto;
	font-size: 16px;
	text-align: center;
	outline: none;
	border: none;
	color: #fff;
	background: rgba(255, 0, 236, .6);
	background: radial-gradient(circle, rgba(48, 48, 48, .6) 0%, rgba(14, 14, 14, .6) 100%);
	box-shadow: 0 4px 4px #1a1a1a99;
	border: solid .5px rgba(46, 46, 46, .6);
	text-shadow: 0 0 5px rgba(255, 255, 255, .548)
}

.inventory-control .inventory-control-input:focus-within {
	background-color: #0c0c0ccc
}

.inventory-control .inventory-control-button {
	font-size: 14px;
	color: #fff;
	background: rgba(255, 0, 236, .6);
	background: radial-gradient(circle, rgba(48, 48, 48, .6) 0%, rgba(14, 14, 14, .6) 100%);
	box-shadow: 0 4px 4px #1a1a1a99;
	border: solid .5px rgba(46, 46, 46, .6);
	transition: .2s;
	border-radius: 5px;
	text-transform: uppercase;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-family: Roboto;
	width: 125px;
	height: 32px;
	font-weight: 500;
	text-shadow: 0 0 5px rgba(255, 255, 255, .548)
}

.inventory-control .inventory-control-button:hover {
	background-color: #0c0c0ccc
}

.useful-controls-dialog {
	background-color: #22232c;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #c1c2c5;
	width: 450px;
	display: flex;
	flex-direction: column;
	padding: 16px;
	border-radius: 4px;
	gap: 16px
}

.useful-controls-dialog-overlay {
	background-color: #00000080
}

.useful-controls-dialog-title {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	font-size: 18px
}

.useful-controls-dialog-close {
	width: 25px;
	height: 25px;
	padding: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	fill: #c1c2c5
}

.useful-controls-dialog-close:hover {
	background-color: #33343f;
	cursor: pointer
}

.useful-controls-content-wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.divider {
	width: 100%;
	height: 1px;
	background-color: #ffffff1f
}

.useful-controls-button {
	position: absolute !important;
	bottom: 25px;
	right: 25px;
	transition: .2s !important;
	border: none;
	color: #fff;
	width: 52px;
	height: 52px;
	display: flex;
	justify-content: center;
	align-items: center;
	fill: #fff;
	border-radius: 5% !important;
	background-color: #0c0c0c66 !important
}

.useful-controls-button:hover {
	background-color: #0c0c0ccc !important;
	cursor: pointer
}

.useful-controls-exit-button {
	position: absolute !important;
	right: 8px;
	top: 8px;
	border-radius: 2.5% !important;
	color: gray !important
}

.inventory-grid-wrapper {
	display: flex;
	flex-direction: column;
	flex: flex-start;
	gap: 10px
}

.inventory-grid-header-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between
}

.inventory-grid-header-wrapper p {
	font-size: 16px
}

.inventory-grid-container {
	display: grid;
	height: calc(6 * 10.22vh + 6 * 10px);
	grid-template-columns: repeat(5, 10vh);
	grid-auto-rows: 10.22vh;
	gap: 10px;
	overflow-y: scroll
}

.inventory-grid-container-four {
	display: grid;
	height: calc(40.88vh + 40px);
	grid-template-columns: repeat(5, 10vh);
	grid-auto-rows: 10.22vh;
	gap: 10px;
	overflow-y: scroll
}

.inventory-grid-container-hotbar {
	display: grid;
	height: calc(10.22vh + 10px);
	grid-template-columns: repeat(5, 10vh);
	grid-auto-rows: 10.22vh;
	gap: 10px;
	overflow: hidden
}

.inventory-slot,
.item-notification-item-box,
.hotbar-item-slot {
	background: rgba(255, 0, 236, .6);
	background: radial-gradient(circle, rgba(48, 48, 48, .6) 0%, rgba(14, 14, 14, .6) 100%);
	position: relative;
	border-radius: 4%;
	color: #c1c2c5;
	box-shadow: 0 4px 4px #1a1a1a99;
	border: solid .5px rgba(46, 46, 46, .6);
	transition: background .5s ease
}

.inventory-slot:hover,
.item-notification-item-box:hover,
.hotbar-item-slot:hover {
	background: rgba(0, 0, 0, .6);
	background: radial-gradient(circle, rgba(127, 127, 127, .6) 0%, rgba(14, 14, 14, .6) 100%);
	border: solid .5px rgba(127, 127, 127, .692)
}

.inventory-slot:hover .inventory-slot-label-text,
.item-notification-item-box:hover .inventory-slot-label-text,
.hotbar-item-slot:hover .inventory-slot-label-text {
	background-color: #ff00ec
}

.inventory-slot-label-box {
	background-color: #22232c;
	color: #c1c2c5;
	text-align: center;
	border-bottom-left-radius: .25vh;
	border-bottom-right-radius: .25vh
}

.inventory-slot-label-text {
	white-space: nowrap;
	text-transform: capitalize;
	background-color: #050505;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 400;
	font-family: Roboto;
	font-size: 10px
}

.inventory-slot-number {
	background: rgb(127, 127, 127);
	background: linear-gradient(115deg, rgb(127, 127, 127) 0%, rgb(127, 127, 127) 100%);
	color: #fff;
	height: 12px;
	width: 12px;
	text-align: center;
	border-top-left-radius: 0;
	border-bottom-right-radius: 10px;
	padding: 3px;
	font-size: 10px;
	font-family: Roboto
}

.item-slot-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%
}

.item-slot-wrapper p {
	font-size: 12px
}

.item-slot-header-wrapper,
.item-hotslot-header-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	z-index: 1
}

.item-hotslot-header-wrapper {
	justify-content: space-between !important
}

.item-slot-info-wrapper {
	display: flex;
	padding: 2px;
	flex-direction: row;
	align-self: flex-end;
	gap: 5px;
	z-index: 1
}

.item-slot-info-wrapper p {
	font-size: 9px
}

.item-slot-currency-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding-right: 3px;
	z-index: 1
}

.item-slot-currency-wrapper p {
	font-size: 14px;
	text-shadow: .1vh .1vh 0 rgba(0, 0, 0, .7)
}

.item-slot-price-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding-right: 3px;
	z-index: 1
}

.item-slot-price-wrapper p {
	font-size: 14px;
	text-shadow: .1vh .1vh 0 rgba(0, 0, 0, .7)
}

.tooltip-wrapper {
	pointer-events: none;
	display: flex;
	background: rgba(255, 0, 236, .9);
	background: radial-gradient(circle, rgba(48, 48, 48, .9) 0%, rgba(14, 14, 14, .9) 100%);
	width: 200px;
	padding: 8px;
	flex-direction: column;
	min-width: 200px;
	color: #c1c2c5;
	font-family: Roboto;
	border-radius: 4px;
	border-color: #0003;
	border-style: inset;
	border-width: 1px
}

.tooltip-wrapper p {
	font-size: 12px;
	font-weight: 400
}

.tooltip-header-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center
}

.tooltip-header-wrapper p {
	font-size: 15px;
	font-weight: 400
}

.tooltip-crafting-duration {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center
}

.tooltip-crafting-duration svg {
	padding-right: 3px
}

.tooltip-crafting-duration p {
	font-size: 14px
}

.tooltip-ingredients {
	padding-top: 5px
}

.tooltip-ingredient {
	display: flex;
	flex-direction: row;
	align-items: center
}

.tooltip-ingredient img {
	width: 28px;
	height: 28px;
	padding-right: 5px
}

.hotbar-container {
	display: flex;
	align-items: center;
	gap: 2px;
	justify-content: center;
	width: 100%;
	position: absolute;
	bottom: 2vh
}

.hotbar-item-slot {
	width: 10vh;
	height: 10vh;
	background-repeat: no-repeat;
	background-position: center;
	image-rendering: -webkit-optimize-contrast;
	background: rgba(255, 0, 236, .6);
	background: radial-gradient(circle, rgba(48, 48, 48, .6) 0%, rgba(14, 14, 14, .6) 100%);
	position: relative;
	border-radius: 4%;
	color: #c1c2c5;
	box-shadow: 0 4px 4px #1a1a1a75;
	border: solid .5px rgba(46, 46, 46, .479);
	transition: background .5s ease
}

.hotbar-slot-header-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between
}

.item-notification-container {
	display: flex;
	overflow-x: scroll;
	flex-wrap: nowrap;
	gap: 2px;
	position: absolute;
	bottom: 20vh;
	left: 50%;
	width: 100%;
	margin-left: calc(50% - 5vh);
	transform: translate(-50%)
}

.item-notification-action-box {
	width: 100%;
	color: #c1c2c5;
	background-color: #0c0c0c66;
	text-transform: uppercase;
	text-align: center;
	border-top-left-radius: .25vh;
	border-top-right-radius: .25vh;
	font-family: Roboto
}

.item-notification-action-box p {
	font-size: 11px;
	padding: 2px;
	font-weight: 600
}

.item-notification-item-box {
	height: 10vh;
	width: 10vh
}

.durability-bar {
	background: rgba(0, 0, 0, .5);
	height: 3px;
	overflow: hidden
}

.weight-bar {
	width: 200px;
	border-radius: 20px;
	padding: 1px;
	background: rgba(0, 0, 0, .4);
	height: .8vh;
	overflow: hidden;
	border: 1px solid rgba(137, 137, 137, .199);
	box-shadow: 3px 3px 5px #0000005e
}

.pill {
	width: 30px;
	border-radius: 20px;
	padding: 1px;
	background: rgba(0, 0, 0, .4);
	height: .8vh;
	overflow: hidden;
	border: 1px solid rgba(137, 137, 137, .199);
	box-shadow: 3px 3px 5px #0000005e
}

.transition-fade-enter {
	opacity: 0
}

.transition-fade-enter-active {
	opacity: 1;
	transition: opacity .2s
}

.transition-fade-exit {
	opacity: 1
}

.transition-fade-exit-active {
	opacity: 0;
	transition: opacity .2s
}

.transition-slide-up-enter {
	transform: translateY(200px)
}

.transition-slide-up-enter-active {
	transform: translateY(0);
	transition: all .2s
}

.transition-slide-up-exit {
	transform: translateY(0)
}

.transition-slide-up-exit-active {
	transform: translateY(200px);
	transition: all .2s
}

.label-new {
	display: flex
}

.label-new p:first-child {
	font-size: 30px
}

.label-new p:last-child {
	font-size: 10px;
	letter-spacing: 1px
}

.WeightBar-new {
	width: max-content
}

.just-contet {
	display: flex;
	justify-content: space-between;
	align-items: end
}

.item-image {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center
}

.item-image img {
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 5%;
	image-rendering: -webkit-optimize-contrast;
	width: 70px;
	z-index: 1
}