.MapChars{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
}
.MapMover {
    position: absolute;
    inset: 0;                 /* ocupa TODO o MapContainer */
    width: 100%;
    height: 100%;

    transform: translate3d(0, 0, 0);
    will-change: transform;
	
	z-index: 10;
}
.MapTable {
	table-layout: fixed;
    position: absolute; /* ou relative, mas seja explícito */
    left: 0;
    top: 0;
	width: 100%;
    height: 100%;
    white-space: nowrap;
	border-collapse: collapse;
	will-change: transform;
}
.MapTable td {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	/*background: round;*/
    /*background-repeat: round;*/
}
.cellLayer {
	pointer-events: none;
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: filter 1.5s ease;
}
.cellLayer::after {
	content: "";
	position: absolute;
	inset: 0;

	background: inherit;
	background-size: inherit;
	background-repeat: inherit;
	background-position: inherit;

	pointer-events: none;
	z-index: -1;
	transition: filter 1.5s ease;
}
.cellLayerContainer {
	pointer-events: none;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
	transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.cellLayerContainer.blur {
	filter: blur(1px) brightness(75%);
	transform: scale(1.1);
}
.cellLayerContainer.no-weather {
  outline: 2px solid red;
}
.charProfileResumeAttributeIcon {
	width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
	flex-shrink: 0;
	filter: drop-shadow(1px 0 0 gray) drop-shadow(-1px 0 0 gray) drop-shadow(0 1px 0 gray) drop-shadow(0 -1px 0 gray);
	/*background-color: #734f00;
    box-shadow: inset 4px 3px 4px rgb(0 0 0 / 50%);*/
}
.charProfileResumeCombatAttrText {
	display: flex;
	/*height: 20px;*/
    flex-wrap: nowrap;
    align-items: center;
}
.fxLayerEffect {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: filter 0.5s ease;
}
.fxLayerEffect.blur {
	filter: blur(2px);
}
.icon-bag { background-image: url("../assets/img/icons/backpack.webp"); }
.icon-gold { background-image: url("../assets/img/icons/gold.webp"); }
.item-icon-retrieve { background-image: url("../assets/img/icons/retrieve_to_backpack.webp"); }
.lootBoxCharBagBarContainer{
	min-width: 100px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}
.lootBoxCharBagProgressBarContainer {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 100px;
}
.lootBoxCharGoldText {
	color: wheat;
    font-weight: bolder;
}
.lootPickAllButton {
	pointer-events: none;
}
.storageBoxMapLootBagContainer {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    min-height: 100px;
	width: 100%;
    border-radius: 5px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/mapDroppedItem/lootBoxBottomContainer.webp);
}
.storageBoxMapLootBagContainerBar {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: 30px;
	width: 100%;
    text-shadow: 1px 1px 2px #000000;
    font-size: medium;
    /*margin-top: 10px;
    margin-left: 25px;
    margin-right: 25px;*/
    border-radius: 5px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.storageBoxMapLootBottomBar {
	display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    /* height: 50px; */
    margin-bottom: 15px;
    /* margin-top: 15px;*/
}
.storageBoxMapLootCharBagInfoContainer {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    min-height: 100px;
    /* flex: 1; */
    width: 100%;
}
.storageBoxMapLootContainer{
    width: 100%;
    height: 100%;
}
.storageBoxMapLootContainerContent{
    width: 100%;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
}
.storageBoxMapLootContentItems {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
	align-items: center;
    min-height: 100px;
    border-radius: 5px;
    overflow: scroll;
    scrollbar-width: none;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/mapDroppedItem/lootBoxItemContainer.webp);
}
.storageBoxMapLootItemBox{
    width: 50px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	margin: 5px;
}
.storageBoxMapLootTopBar {
	height: 40px;
    width: 100%;
    display: flex;
    font-size: large;
    align-content: center;
    justify-content: center;
    flex-wrap: nowrap;
}
.storageBoxMapLootTopText {
	height: 30px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-shadow: 1px 1px 2px #000000;
    font-size: medium;
}
.storageChestBottomBar {
	width: 100%;
    height: 50px;
    background-image: url(../assets/img/background/mapStorage/ChestBottomBar.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
	padding-top: 5px;
    padding-bottom: 5px;
}
.storageChestContainer {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
	min-height: 1px;
	background-image: url(../assets/img/background/mapStorage/ChestContent.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	align-content: center;
    padding-left: 5px;
    padding-right: 5px;
}
.storageChestTopBar {
	width: 100%;
    height: 50px;
    font-weight: bold;
    font-size: large;
    background-image: url(../assets/img/background/mapStorage/ChestTopBar.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}
.storageContainer{
    display: flex;
    height: stretch;
    width: min-content;
    flex-wrap: nowrap;
    flex-direction: column;
}
.storageItem {
	width: 100%;
	height: 100%;
	background-size: 70% 70%; 
	background-repeat: no-repeat;
	background-position: center;
}
.storageItemBox {
    float: left;
    height: 50px;
    width: 50px;
    margin: 5px;
	/*padding: 10px;*/
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
	background-size: 100% 100%; background-repeat: no-repeat;
}
.storageItemContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	align-content: space-between;
	flex-direction: column;
	width: 100%;
	max-width: min(400px, 100%);
	height: 50%;
}
.storageLootContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
	width: 100%;
	max-width: min(400px, 100vw);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    flex-wrap: nowrap;
    padding: 5px;
}