@font-face {
	font-family: 'Purista';
	src: url('./Fonts/Purista-Bold.ttf');
	font-display: swap;
}

@font-face {
	font-family: 'AvantGarde LT Medium';
	src: url('./Fonts/AvantGardeGothicLTMedium.ttf');
	font-display: swap;
}

:root {
	font-size: 1vw;
	--ColorBackground: rgba(109, 109, 109, 0.25);
	--Border: rgba(153, 153, 153, 0.3);
	--ColorPrimary: #0087DD;
	--Gradient: linear-gradient(270deg, rgba(0, 104, 170, 0.025) 14%, rgba(0, 73, 119, 0.5) 48%, rgba(0, 93, 152, 0.5) 78.5%, rgba(0, 135, 221, 0.5) 100%);
}

input::placeholder {
	color: #ffffff40
}

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

::-webkit-scrollbar {
	width: 0.438rem;
	border-radius: 3px;
}

::-webkit-scrollbar-track {
	width: 0.438rem;
	background: var(--ColorBackground);
}

::-webkit-scrollbar-thumb {
	background: var(--ColorPrimary);
	border-radius: 3px;
}

button {
	cursor: pointer;
	transition: all .45s
}

img {
	pointer-events: none
}

* {
	margin: 0;
	border: 0;
	padding: 0;
	outline: none;
	user-select: none;
	text-rendering: auto;
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

main {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
}

main::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, rgba(1, 14, 22, 0.95) 0%, rgba(2, 36, 59, 0.8) 100%);
	z-index: -2;
}

.vectores::before {
	content: '';
	position: absolute;
	right: -10%;
	bottom: 0;
	width: 25%;
	height: 25%;
	background-image: url('./imgs/Back.svg');
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0px 0px 6.563rem var(--ColorPrimary));
	z-index: -1;
}

.vectores::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 25%;
	height: 25%;
	background-image: url('./imgs/Topo.svg');
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0px 0px 6.563rem var(--ColorPrimary));
	z-index: -1;
}

inventory {
	position: relative;
	width: 40rem;
	display: flex;
	flex-direction: column;
}

/*
==========================================================================
========[ HEADER INVENTORY - UPGRADE AND WEIGHT ]=========================
==========================================================================
*/
inventory header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* UPGRADE INVENTORY */
inventory header .upgradeInventory {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 6.15rem;
	width: 100%;
	height: 2.875rem;
	background: var(--Gradient);
	border-radius: 0.375rem;
}

inventory header .upgradeInventory h4 {
	margin-right: 4.063rem;
	font-family: 'AvantGarde LT Medium';
	font-weight: 600;
	font-size: 1.125rem;
	color: #FFFFFF;
}

inventory header .upgradeInventory img {
	position: absolute;
	width: 3.563rem;
	height: 4.817rem;
	left: 0.563rem;
	bottom: 0;
	transform: rotate(-10deg);
}

inventory header .upgradeInventory button {
	position: absolute;
	right: 5px;
	width: 8.188rem;
	height: 1.5rem;
	background: rgba(2, 112, 182, 0.75);
	border-radius: 0.25rem;
	font-family: 'AvantGarde LT Medium';
	font-weight: 700;
	font-size: 0.75rem;
	color: #FFFFFF;
}

inventory header .inventory-weight {
	position: relative;
	top: -0.425rem;
	width: 100%;
	border-radius: 0.125rem;
	height: 1.625rem;
	background: rgba(255, 255, 255, 0.09);
	border: 0.4px solid rgba(255, 255, 255, 0.8);
}

inventory header .inventory-weight .PesoBackText span {
	gap: 0.313rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	white-space: nowrap;
	font-family: 'Purista';
	font-style: normal;
	font-weight: 700;
	font-size: 0.875rem;
	color: #FFFFFF;
}

inventory header .inventory-weight #myBar {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	text-align: center;
	justify-content: center;
	width: 40%;
	height: 1.25rem;
	border-radius: 0.125rem;
	background: var(--ColorPrimary);
	color: white;
	margin-left: 0.125rem;
	margin-right: 0.125rem;
}

/*
==========================================================================
========[ HEADER INVENTORY - UPGRADE AND WEIGHT ]=========================
==========================================================================
*/
inventory section {
	display: grid;
	grid-gap: 0.313rem;
	max-height: 43.75rem;
	grid-template-columns: repeat(5, 7.6rem);
	align-content: flex-start;
	overflow-x: hidden;
}

inventory section .item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	justify-content: space-between;
	width: 7.6rem;
	height: 8rem;
	background: var(--ColorBackground);
	border-radius: 0.25rem;
}

inventory section .item img {
	max-width: 52.5%;
	pointer-events: none;
}

inventory section .item .top {
	color: #fff;
	position: relative;
	margin-top: 0.188rem;
	width: 90%;
	display: flex;
	letter-spacing: .0625rem;
	align-items: center;
	justify-content: space-between;
	text-transform: uppercase;
	font-family: 'Purista';
	font-style: normal;
	font-weight: 700;
	font-size: 0.688rem;
}

inventory section .item .top b {
	color: var(--ColorPrimary);
}

inventory section .item .infoItem {
	width: 100%;
}

inventory section .item .name-item {
	color: #fff;
	width: 100%;
	padding: .4375rem;
	line-height: 90%;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	text-overflow: ellipsis;
	letter-spacing: .0625rem;
	text-transform: uppercase;
	background: rgba(0, 0, 0, 0.29);
	border-radius: 0px 0px 0.188rem 0.188rem;
	font-family: 'Purista';
	font-weight: 700;
	font-size: 0.688rem;
}

inventory section .item .bar {
	position: relative;
	width: 100%;
	height: 0.125rem;
}

.populated {
	background: rgba(255, 255, 255, .15);
	z-index: 999;
}

inventory section .populated:hover {
	background: rgba(255, 255, 255, .20);
}

.invLeft .item.empty:nth-child(1)::before {
	content: "1";
}

.invLeft .item.empty:nth-child(2)::before {
	content: "2";
}

.invLeft .item.empty:nth-child(3)::before {
	content: "3";
}

.invLeft .item.empty:nth-child(4)::before {
	content: "4";
}

.invLeft .item.empty:nth-child(5)::before {
	content: "5";
}

.invLeft .item.empty::before {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7.6rem;
	height: 8rem;
	border-radius: 0.25rem;
	font-family: 'Purista', sans-serif;
	font-weight: 700;
	font-size: 3rem;
	color: rgba(255, 255, 255, 0.2);
	z-index: -1;
}

/*====================================================================
========================[ DESCARTE ]==================================
====================================================================*/
inventoryDescarte {
	position: relative;
	text-align: center;
	bottom: -0.625rem;
	width: 100%;
	height: 3.75rem;
	padding: 0.3125rem;
	z-index: 9999;
}

inventoryDescarte img {
	width: 2.45rem;
	height: auto;
}

inventoryDescarte::before {
	position: absolute;
	content: '';
	top: -0.125rem;
	left: 50%;
	transform: translate(-50%);
	width: 100%;
	height: 0.125rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.516) 0%, rgba(153, 153, 153, 0.102) 100%);
	border-radius: 0.125rem;
}

inventoryDescarte .TextDescarte {
	position: absolute;
	width: 100%;
	margin-top: 0.875rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1.125rem;
}

inventoryDescarte .TextDescarte h4 {
	font-family: 'Purista';
	font-style: normal;
	font-weight: 700;
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.6);
}

inventoryDescarte .TextDescarte {
	font-family: 'Purista';
	font-style: normal;
	font-weight: 700;
	font-size: 0.75rem;
	color: rgba(254, 140, 140, 0.45);
}

/*====================================================================
================[ SLOTS BLOQUEADOS ]==================================
====================================================================*/
.Bloqueados {
	position: relative;
	width: 39rem;
	height: auto;
	display: grid;
	grid-gap: 0.1rem;
	grid-template-columns: repeat(5, 7.75rem);
	overflow: hidden;
	z-index: 999;
}

.Bloqueados .BloqueadosInfos {
	position: absolute;
	margin-top: 0.625rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 38.5rem;
}

.item.block {
	display: flex;
	width: 7.6rem;
	height: 8rem;
	border-radius: 4px;
	background: rgba(53, 53, 53, 0.16);
	z-index: -1;
}

.Bloqueados .BloqueadosInfos .ImgBlock {
	width: 7.6rem;
	height: auto;
}

.Bloqueados h4 {
	font-family: 'Purista';
	font-style: normal;
	font-weight: 700;
	font-size: 2.125rem;
	color: #FFFFFF;
}

.Bloqueados span {
	font-family: 'Poppins';
	font-style: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 400;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

/*
=====================================
  TOOLTIP INVENTORY
=====================================
*/
.ui-tooltip {
	position: absolute;
	pointer-events: none;
	font-family: 'Purista';
	z-index: 99999;
	transform: scale(1.15);
}

.ui-helper-hidden-accessible {
	display: none;
}

.tooltip {
	position: relative;
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: .625rem .3125rem .625rem .625rem;
	background: rgba(109, 109, 109, 0.4);
	border-radius: 4px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;
}

.tooltip .tooltip-title {
	display: flex;
	font-size: .625rem;
	font-weight: 600;
	margin-bottom: .3125rem;
	align-items: center;
	text-transform: uppercase;
}

.tooltip .tooltip-title .mark {
	padding: .1875rem .3125rem;
	border-radius: .125rem;
	letter-spacing: .0313rem;
	margin-right: .45rem;
	text-transform: uppercase;
	background-color: var(--ColorPrimary);
}

.tooltip p {
	font-size: .625rem;
	width: 15.625rem;
	opacity: .6;
	letter-spacing: .0313rem;
	font-family: 'AvantGarde LT Medium';
}

.tooltip .info-item {
	margin-top: .3125rem;
	display: flex;
	font-size: .625rem;
	align-items: center;
}

.tooltip .info-item .info {
	display: flex;
	color: #fff;
	font-size: .5rem;
	padding: .125rem .3125rem;
	border-radius: .125rem;
	margin-right: .35rem;
	align-items: center;
	letter-spacing: .0625rem;
	text-transform: uppercase;
	background-color: #0087DD66;
}

/*
===========================================
  BUTTONS ACTIONS - QTD, USAR E ENVIAR
===========================================
*/
inventoryActionsInfos {
	top: 0.3%;
	margin-left: .85rem;
}

inventoryActions {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-transform: uppercase;
	width: 11.875rem;
	height: 12.688rem;
	background-color: rgba(109, 109, 109, 0.25) !important;
	border: 0.175rem solid rgba(255, 255, 255, 0.1);
	border-radius: .375rem;
	margin-bottom: 0.625rem;
}

inventoryActions button {
	display: flex;
	align-items: center;
	letter-spacing: .0625rem;
	justify-content: center;
	text-transform: uppercase;
	width: 9.40rem;
	height: 2.81rem;
	background: radial-gradient(50% 50% at 50% 50%, var(--ColorPrimary) 0%, #06578B 100%);
	border: 0.0625rem solid var(--ColorPrimary);
	border-radius: 0.5rem;
	margin-bottom: 1.25rem;
	font-family: 'Purista';
	font-weight: 700;
	font-size: 1.25rem;
	color: #FFFFFF;
}

inventoryActions input {
	outline: none;
	text-align: center;
	width: 9.401rem;
	height: 2.813rem;
	background: radial-gradient(50% 50% at 50% 50%, rgba(153, 153, 153, 0.17) 0%, rgba(114, 114, 114, 0.13) 100%);
	border: 0.063rem solid rgba(255, 255, 255, 0.6);
	border-radius: 0.25rem;
	font-family: 'Poppins';
	font-weight: 700;
	font-size: 1.125rem;
	color: rgba(255, 255, 255);
	margin-top: 1.25rem;
	margin-bottom: 0.938rem;
}

.itemPrice {
	padding: .3125rem;
	position: absolute;
	right: .625rem;
	top: 0;
	border-radius: .1875rem;
	background-color: var(--ColorPrimary);
}

.hoverControl {
	background: rgba(255, 255, 255, .20) !important;
	z-index: 999;
}

.hoverControlBtn {
	background: var(--ColorPrimary);
}

/* ==================================================================== */
inventoryActionsDrop {
	display: flex;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-transform: uppercase;
	gap: 0.813rem;
	margin-bottom: 3.125rem;
}

.slotchao {
	position: relative;
	width: 11.875rem;
	height: 6.75rem;
	background-color: rgba(109, 109, 109, 0.25) !important;
	border: .063rem solid rgba(255, 255, 255, 0.36);
	border-radius: 0.375rem;
}

.slotchao span {
	margin: 0.25rem 0 0 0.375rem;
	font-family: 'Purista';
	font-weight: 700;
	font-size: 0.625rem;
	color: #FFFFFF;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.35);
}

.slotchao .imgItemDrop {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: 4.063rem;
}

.slotchao .imgChao {
	position: absolute;
	width: 1.8rem;
	height: auto;
	bottom: 0.25rem;
	right: 0.25rem;
}

/* ======================[ EXTRAS ]============================================== */
.invRight {
	margin-bottom: 3.75rem;
}

#invSegundario {
	margin-left: 0.938rem;
}