.bagUtilizationContainer {
    width: 100%;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    touch-action: none;
}
.catBox{
    width: 50px;
    height: 50px;
    /* border: 1px solid green; */
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	
}
.closeButton {
    font-weight: bold;
    height: 40px;
    aspect-ratio: 1 / 1;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 5px;
}
.closeButton:hover {
    filter:
        brightness(1.08)
        saturate(1.08);

    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}
.closeButton:active {
    transform: translateY(1px);
    filter: brightness(0.85) drop-shadow(6px 6px 6px rgba(0,0,0,.45));
}
.itemBagScoreIcon {
	width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    float: right;
    position: absolute;
    bottom: 4px;
    right: 1px;
	pointer-events: none;
}
.itemBox{
    width: 50px;
    height: 50px;
    /* border: 1px solid green; */
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	margin: 1px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/backpack/ChestItemBox.webp);
}
.itemEquippedIcon {
	display: flex;
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: 5px;
	right: 4px;
	background-color: #ac0efdfa;
	border-radius: 5px;
	pointer-events: none;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	color: #ffffff;
	font-size: larger;
}
.itemScoreSparklesEffect {
	position: fixed;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	background-image: url("../assets/img/icons/Sparkle.webp");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}
.itemThrashIcon {
	width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    right: 2px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/icons/thrash.webp);
    pointer-events: none;
}
.iteractiveCharBagBottomBar {
	display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
	width: 100%;
    height: 50px;
	background-image: url(../assets/img/background/backpack/backpackBottomBar.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.iteractiveCharBagContainer {
	display: flex;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}
.score-icon-greater { background-image: url("../assets/img/icons/deposit.webp"); }
.storageBoxCharBag{ 
    display: flex;
	width: 100%;
	height: stretch;
}
.storageBoxCharBagCategorieBox {
	width: 50px;
	height: 50px;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.storageBoxCharBagCategorieBoxBG {
	width: 50px;
	height: 50px;
	background-position: center;
	background-size: 70% 70%;
	background-repeat: no-repeat;
}
.storageBoxCharBagCategorieBoxIdle {
	filter: grayscale(100%);
	background-image: url("../assets/img/background/backpack/InventoryBox.webp");
}
.storageBoxCharBagCategories{
	width: 100px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: scroll;
    scrollbar-width: none;
	padding-left: 1px;
    padding-right: 1px;
    background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url("../assets/img/background/backpack/BackpackCategories.webp");
}
.storageBoxCharBagCategoriesContainer {
    width: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: stretch;
    overflow: scroll;
    scrollbar-width: none;
    /* margin-top: 35px; */
    margin-top: 55%;
    /* margin-bottom: 35px; */
    margin-bottom: 55%;
}
.storageBoxCharBagContainer {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    flex: 1;
    margin-top: 5px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 15px;
    overflow: scroll;
    scrollbar-width: none;
}
.storageBoxCharBagContent{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/backpack/BackpackContent.webp);
    display: flex;
    flex-direction: column;
}
.storageBoxCharBagItemBox {
	position: relative;
	width: 50px;
	height: 50px;
}
.storageBoxCharBagTop {
	height: 45px;
	padding-top: 5px;
    width: 100%;
    display: flex;
    font-weight: bolder;
	font-size: large;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/backpack/BackpackTop.webp);
    align-content: center;
    justify-content: center;
    flex-wrap: nowrap;
}
.storageBoxContainer {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
	min-height: 1px;
}
.storageCharBagContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
	width: 100vw;
	max-width: 400px;
    height: 50%;
    max-height: 400px;
    flex-wrap: nowrap;
    background-image: url(../assets/img/background/backpack/pannelContainerBackground.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.storageItemBoxLevel {
	padding: 5px;
    color: white;
    font-weight: bolder;
    pointer-events: none;
}
.storageItemBoxQuantity {
	padding: 5px;
    color: white;
    font-weight: bolder;
    pointer-events: none;
}

.drop-hover{
    outline:2px solid #ffd700;
    outline-offset:-2px;
}