/* {	font-family: 'MedievalSharp', cursive; }*/

@font-face {
        font-family: 'MedievalSharp'; /* Choose a name for your font */
        src: url('../assets/fonts/MedievalSharp-Regular.ttf') format('truetype');
        font-weight: normal; /* Optional: define weight and style */
        font-style: normal;
}

* {	font-family: 'MedievalSharp', cursive; }

html{
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	font-size: 12px;
	width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Main body */
body { 
	height: 100%;
	margin: 0; 
	-moz-user-select: none; 
	-khtml-user-select: none; 
	-webkit-user-select: none; 
	-ms-user-select: none;  
	user-select: none;
	cursor: url('../assets/blueCursor.webp'), auto !important;
}

h1, h2, h3 { margin: 0; }
h2 { font-size: 1.6em; }
h3 {
	color: #7f7f7f;
	font-size: 1.4em;
}

table{
	border-spacing:0;
	border-collapse:collapse;
	margin: 0px 0px 0px 0px;
}
td,th{
	padding:0;
}


img{
	border:0;
	vertical-align:middle;
}

.grayCursor { cursor: url('../assets/grayCursor.webp'), auto; }
.yellowCursor { cursor: url('../assets/yellowCursor.webp'), auto; }
.blueCursor { cursor: url('../assets/blueCursor.webp'), auto; }

.loadingContainer {
	width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.loadingContent {
   opacity: 0;
   animation: fadeIn 0.3s forwards;
   width: 40px;
   height: 40px;
   background-image: url("../assets/img/icons/inMenuIcon.webp"); 
   background-size: 100% 100%; 
   background-repeat: no-repeat;
   background-position: center;
   z-index: 1;
}

.assetsPreloadContainer {
    width: stretch;
    height: 25px;
    background: #333;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    margin: 10px;
	z-index: 10;
}

.assetsPreloadContainer.fade-out {
    animation: fadeOut 0.3s ease-in-out forwards;
}

.assetsPreloadBar {
    width: 0%;
    height: 100%;
    background: #4caf50;
    transition: width 0.01s linear;
}

.assetsPreloadBarText {
	position: absolute;
    width: 100%;
    height: 25px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

.timer-bar-container {
    width: 100%;
    height: 2px;
    background: #333;
    border-radius: 5px;
    overflow: hidden;
}

.timer-bar {
    width: 100%;
    height: 100%;
    background: #4caf50;
    animation: shrink 5s linear forwards;
}

@keyframes shrink {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.menu-container {
	width: 50px;
	height: 50px;
}

.dropdown-menu {
  position: absolute;
  z-index: 10;

  /* Estado inicial (fechado) */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);

  transition: 
    max-height 0.3s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.dropdown-toggle {
	width: 50px;
	height: 50px;
	
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.dropdown-toggle-closed { background-image: url("../assets/img/icons/charMenuIcon.webp");}
.dropdown-toggle-open { background-image: url("../assets/img/icons/charMenuIconOpen.webp");}

.book-pre-char-container-master {
	width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    position: absolute;
	pointer-events: none;
}

/* Estado aberto */
.dropdown-menu.open {
  max-height: 100%; /* ajuste conforme necessário */
  opacity: 1;
  transform: translateY(0);
  z-index: 51;
  padding-top: 5px;
}

.charTopBarMenuItem {
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding-left: 10px;
	padding-right: 10px;
	background-image: url("../assets/img/background/charMenuItemList.webp");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 5px;
	margin-bottom: 5px;
}

.charTopBarMenuItemText {
	height: 30px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    font-weight: bold;
    font-size: larger;
    letter-spacing: 1px;
    color: #000000;
	/*text-shadow: 0px 0px 10px #000000;*/
	pointer-events: none;
}

.charTopBarMenuIconContainer {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 30px;
    height: 30px;
    margin-right: 5px;
	pointer-events: none;
}

.charTopBarMenuResumeIcon { background-image: url("../assets/img/icons/charResumeMenuIcon.webp"); }
.charTopBarMenuSkillsIcon { background-image: url("../assets/img/icons/charSkillsMenuIcon.webp"); }
.charTopBarMenuEquipmentIcon { background-image: url("../assets/img/icons/charEquipmentMenuIcon.webp"); }
.charTopBarMenuQuestsIcon { background-image: url("../assets/img/icons/charQuestsMenuIcon.webp"); }
.charTopBarMenuBagIcon { background-image: url("../assets/img/icons/charBagMenuIcon.webp"); }
.charTopBarMenuKodexIcon { background-image: url("../assets/img/icons/charKodexMenuIcon.webp"); }
.charTopBarMenuSettingsIcon { background-image: url("../assets/img/icons/charSettingsMenuIcon.webp"); }
.charTopBarMenuChangeIcon { background-image: url("../assets/img/icons/charChangeMenuIcon.webp"); }
.charTopBarMenuAboutIcon { background-image: url("../assets/img/icons/charAboutMenuIcon.webp"); }
.charTopBarMenuChangelogIcon { background-image: url("../assets/img/icons/charChangelogMenuIcon.webp"); }
.charTopBarMenuLogoffIcon { background-image: url("../assets/img/icons/charLogoffMenuIcon.webp"); }

.exchangeCharMessageContainer {
	height: 100%;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.exchangeCharMessageText {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
	margin-bottom: 10px;
}

/* Mouse pointer click effect */
div.clickEffect{
	position:fixed;
	box-sizing:border-box;
	border-style:solid;
	border-color:#000000;
	border-radius:50%;
	animation:clickEffect 0.4s ease-out;
	z-index:99999;
}
@keyframes clickEffect{
	0%{
		opacity:1;
		width:1px;
		height:1px;
		margin:-0.5px;
		border-width:0.5rem;
	}
	100%{
		opacity:0.2;
		width:40px;
		height:40px;
		margin:-20px;
		border-width:0.03rem;
	}
}

.sparklesEffect {
	position: fixed;
	pointer-events: none;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	background-image: url("../assets/img/icons/Sparkle.webp");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	animation: sparkleFade 3s ease-in-out forwards;
	opacity: 0;
	transform: scale(0.8);
}

.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);
	
	/*filter: blur(0.3px) brightness(75%);*/
}

.cellLayerContainer.no-weather {
  outline: 2px solid red;
}

/* Object shadows */
.shadowObject::after { filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1.5)); }

/*.shadowObject-0 { filter: drop-shadow([Left]px [Down]px [Blur]px rgba(0, 0, 0, 0.5)); }*/
.shadowObject-0::after { filter: drop-shadow( -4px -15px 10px rgba(0, 0, 0, 0.5)); }
.shadowObject-1::after { filter: drop-shadow( -6px -10px 10px rgba(0, 0, 0, 0.5)); }
.shadowObject-2::after { filter: drop-shadow( -8px  -8px 10px rgba(0, 0, 0, 0.5)); }
/* Dawn */
.shadowObject-3::after { filter: drop-shadow( -10px -6px 10px rgba(0, 0, 0, 0.6)); }
.shadowObject-4::after { filter: drop-shadow(-12px -4px 10px rgba(0, 0, 0, 0.6)); }
.shadowObject-5::after { filter: drop-shadow(-15px -2px 10px rgba(0, 0, 0, 0.6)); }
.shadowObject-6::after { filter: drop-shadow(-20px  1px 10px rgba(0, 0, 0, 0.7)); }
/* Morning */
.shadowObject-7::after  { filter: drop-shadow(-22px  0px 10px rgba(0, 0, 0, 0.8)); }
.shadowObject-8::after  { filter: drop-shadow(-20px  5px  8px rgba(0, 0, 0, 0.9)); }
.shadowObject-9::after  { filter: drop-shadow(-15px 10px  6px rgba(0, 0, 0, 0.9)); }
.shadowObject-10::after { filter: drop-shadow(-10px 15px  4px rgba(0, 0, 0, 0.9)); }
.shadowObject-11::after { filter: drop-shadow( -5px 13px  2px rgba(0, 0, 0,   1)); }
/* Noon */
.shadowObject-12::after { filter: drop-shadow(0px 10px 0px rgba(0, 0, 0, 1)); }
/* Afternoon */
.shadowObject-13::after { filter: drop-shadow( 5px 13px   2px rgba(0, 0, 0,   1)); }
.shadowObject-14::after { filter: drop-shadow(10px 15px   4px rgba(0, 0, 0, 0.9)); }
.shadowObject-15::after { filter: drop-shadow(15px 10px   6px rgba(0, 0, 0, 0.9)); }
.shadowObject-16::after { filter: drop-shadow(20px  5px   8px rgba(0, 0, 0, 0.9)); }
.shadowObject-17::after { filter: drop-shadow(22px  0px  10px rgba(0, 0, 0, 0.8)); }
/* Dusk => Night */
.shadowObject-18::after { filter: drop-shadow(20px  -5px 10px rgba(0, 0, 0, 0.7)); }
.shadowObject-19::after { filter: drop-shadow(15px -10px 10px rgba(0, 0, 0, 0.6)); }
.shadowObject-20::after { filter: drop-shadow(10px -15px 10px rgba(0, 0, 0, 0.6)); }
.shadowObject-21::after { filter: drop-shadow( 5px -20px 10px rgba(0, 0, 0, 0.6)); }
.shadowObject-22::after { filter: drop-shadow( 0px -22px 10px rgba(0, 0, 0, 0.6)); }
/* Midnight */
.shadowObject-23::after { filter: drop-shadow(-2px -20px 10px rgba(0, 0, 0, 0.5)); }

.fxLayerEffect {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: filter 0.5s ease;
}


/* Blur effect */
.fxLayerEffect.blur {
	filter: blur(2px);
}

.changeLogIcon {
	width: 15px;
    height: 15px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    float: left;
    margin-right: 5px;
}

.changeLogIconEnd {
	width: 15px;
    height: 15px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.changeLogCalendar { background-image: url(../assets/img/icons/calendar.webp); }
.changeLogBullet { background-image: url(../assets/img/icons/goldenBullet.webp); }
.changeLogIconFire { background-image: url(../assets/img/elements/fire.webp); }
.changeLogIconMap { background-image: url(../assets/img/icons/charChangelogMenuIcon.webp); }
.changeLogIconBug { background-image: url(../assets/img/icons/bug.webp); }
.changeLogIconExclamation { background-image: url(../assets/img/icons/exclamation.webp); }
.changeLogIconHeart { background-image: url(../assets/img/icons/hp.webp); }
.changeLogIconCat { background-image: url(../assets/img/icons/cat.webp); }
.changeLogIconAstolfo { background-image: url(../assets/img/icons/Astolfo-Icon.webp); }

.changeLogDateEvent {
	height: 15px;
    position: relative;
    float: left;
    font-weight: bold;
}

.changeLogEventText {
    position: relative;
}

.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;
}

.cellLayerItem{
	background-size: 60%;
}

.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;
}




.cellLayerEffect {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 10;
}

.cellLayerEffect.showCell{
	z-index: 25;
}


/* No effect */
.cellLayerEffect.none {
	
}

/* Blur effect */
.cellLayerEffect.blur {
	backdrop-filter: blur(1.2px);

}

.cellLayerEffect.blurBuilding {
	backdrop-filter: blur(1.2px);
}



@keyframes sparkleFade {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	20% {
		opacity: 1;
		transform: scale(1);
	}
	80% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
		transform: scale(0.5);
	}
}




.centerElement {
    /*position: relative;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;*/
	display: grid;
	align-content: center;
    justify-content: center;
}

.shadow {
	filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

.testBorder {
	border: 1px solid yellow;
}

.mainContainer {
	position: relative;
	display:flex;
	flex-direction:column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-x: hidden;
	background-image: url("../assets/img/background/LoginBG.webp"); background-size: 100% 100%; background-repeat: no-repeat;
}

.storageItemBoxQuantity {
	padding: 5px;
    color: white;
    font-weight: bolder;
    pointer-events: none;
}

.storageItemBoxLevel {
	padding: 5px;
    color: white;
    font-weight: bolder;
    pointer-events: none;
}

.itemBuffAttribute {
	color: green;
	padding-left: 5px;
}

.itemAttribute {
	padding-left: 5px;
}

.itemDebuffAttribute {
	color: red;
	padding-left: 5px;
}

.itemDisplayContentHandler {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 51;
    display: flex;
    flex-wrap: wrap;
    background-color: #000000a3;
    justify-content: center;
    align-content: center;
}

.itemDisplayContainer {
	display: flex;
    margin: 5px;
    /*aspect-ratio: 9 / 20;*/
	max-width: min(400px, 100%);
    max-height: 100%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	word-break: break-word;
}

.itemDisplayInfoContainer {
	margin-left: 5px;
    margin-right: 5px;
    padding: 20px;
	background-image: url("../assets/img/background/itemPopupContainer.webp"); 
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.storageItemBoxDisplayPictureContainer {
	height: 100%;
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
}

.itemDisplayPicture {
	width: 80px;
    height: 80px;
    background-size: 90% 90%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 5px;
    border-radius: 10px;
	
}

.item-animating {
    position: fixed;
    z-index: 9999;
    pointer-events: none;

    transition: 
        transform 0.35s ease,
        left 0.35s ease,
        top 0.35s ease;

    transform: scale(1.5);
}

.dropped-item-animating {
    position: fixed;
    z-index: 9999;
    pointer-events: none;

    transition: 
        transform 0.5s ease,
        left 0.5s ease,
        top 0.5s ease;

    transform: scale(0.5);
}

.dropped-item-vanish {
    position: fixed;
    z-index: 9999;
    pointer-events: none;

    transition:  transform 0.7s ease;
    transform: scale(0.0);
}

.itemDisplayResume {
	height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;
	padding-right: 5px;
}

.itemDisplayResumeTop {
	display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
}

.itemDisplayResumePower {
	width: 100%;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
}

.itemDisplayResumeText {
    font-weight: bolder;
	font-size: small;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    height: 20px;
    display: flex;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    align-items: center;
}

.itemDisplayResumeQuantityText {
	width: 100%;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

.itemDisplayResumeCloseButtonContainer {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: wheat;
    font-weight: bold;
    font-size: large;
}

.itemDisplayResumeQuantity {
	margin-left: 5px;
}

.itemScoreContainer{
	
}

.itemScoreIcon {
	width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    float: right;
}

.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;
}

.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;
}

.itemDisplayResumeLoreText {
	margin: 5px;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}

.itemDisplayPriceText {
	font-size: large;
	margin: 5px;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}

.itemDisplayResumeAttributeTitle {
	width: 100%;
    font-size: medium;
    margin: 5px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}

.itemDisplayResumeSeparator {
	width: 100%;
    border: 1px solid #734f008f;
}

.itemDisplayResumeAttribute {
	width: 100%;
    display: flex;
    font-size: medium;
    margin: 5px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.itemDisplayResumeAttributeIconContainer {
	height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.itemDisplayResumeAttributeIcon {
	width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    /* outline: 1px solid #ffa500; */
    /* background-color: #6b3c02; */
    /* margin-top: 10px; */
    /* margin-bottom: 10px; */
    margin-right: 5px;
}

.itemDisplayResumeAttributeText {
	height: 100%;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.itemDisplayResumeElementIcon {
	width: 30px;
    height: 30px;
    background-size: 80% 80%;
    background-position: center;
    background-repeat: no-repeat;
    outline: 1px solid #ffa50059;
    background-color: #00000063;
    margin-right: 5px;
}

.ItemDisplayContent {
    position: absolute;
    z-index: 50;
    height: -webkit-fill-available;
    background-color: #000000c7;
	max-width: 100%;
    aspect-ratio: 9 / 20;
	align-content: center;
}

.IteractiveContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
	/*height: 100%;*/
}

.IteractiveContentBG {
	position: absolute;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: stretch;
	background-color: #0000009e;
}

.charIteractiveContentBG {
	z-index: 51;
}

.npcIteractiveContentBG {
	z-index: 50;
}

.IteractiveContent {
    position: absolute;
    z-index: 50;
    height: -webkit-fill-available;
    max-width: min(400px, 100%);
    /*aspect-ratio: 9 / 20;*/
    display: flex;
    flex-wrap: wrap;
    align-content: center;
	justify-content: center;
}

.npcIteractiveContent {
    display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.itemDisplayTitle {
	width: 100%;
    height: 50px;
    /* border: 2px solid #734f00; */
    /* outline: 2px solid #572a0a; */
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    /* padding: 2px; */
    /* padding-top: 10px; */
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
    color: wheat;
    font-weight: bold;
    font-size: large;
    text-shadow: 0px 0px 10px #000000;
    /* background-color: #331402; */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/itemPopupTopBar.webp);
}

.itemTitleText {
	display: flex;
    /* height: 100%; */
    align-content: flex-end;
    flex-wrap: wrap;
    padding-bottom: 5px;
}

.itemDisplayInfo {
	border: 1px solid #734f00;
    outline: 1px solid #572a0a;
    border-radius: 10px;
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    margin: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: #fcd187;
    /*font-weight: bold;*/
    font-size: larger;
    /* background-color: #331402; */
    background-color: #331402a6;
}

.itemDisplayAttributes {
    border: 2px solid #734f00;
    outline: 2px solid #572a0a;
    margin: 5px;
	padding: 2px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: wheat;
    font-weight: bold;
    font-size: large;
    background-color: #331402;
	text-shadow: 0px 0px 10px #000000;
}

.itemDisplayAttributesInfo {
    border: 1px solid #734f00;
    /* outline: 2px solid #572a0a; */
    border-radius: 5px;
    margin: 5px;
	width: 100%;
    /* padding: 5px; */
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    /* color: white; */
    /*font-weight: bold;*/
    font-size: larger;
    text-shadow: 0px 0px 10px #000000;
    background-color: #00000040;
}

.itemKeyDisplayTextResume {
    border: 1px solid #734f00;
    border-radius: 5px;
	padding: 5px;
    font-size: larger;
    text-shadow: 0px 0px 10px #000000;
    background-color: #00000040;
	margin-top: 5px;
}

.itemResumePopupContainer {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000a8;
    z-index: 99;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.itemResumePopup {
	margin: 30px;
	border-radius: 10px;
	max-width: min(350px, 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../assets/img/background/lootBoxItemContainer.webp);
}

.itemResumePopupInfo {
    border: 1px solid #734f00;
    /* outline: 2px solid #572a0a; */
    border-radius: 5px;
    margin: 5px;
	/*width: 100%;*/
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    /* color: white; */
    /*font-weight: bold;*/
    font-size: larger;
    text-shadow: 0px 0px 10px #000000;
    background-color: #00000070;
}

.itemKeyDisplayText {
	font-size: medium;
}

.itemDisplayValue {
    border: 1px solid #734f00;
    outline: 1px solid #572a0a;
    border-radius: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    color: #ffbf28;
    /* font-weight: bold; */
    font-size: larger;
    background-color: #331402a6;
    text-shadow: 0px 0px 10px #000000;
}

.item-icon {
	width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-right: 5px;
	pointer-events: none;
}


.icon-shadow { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); }
.icon-text {
	display: flex;
    justify-content: center;
    align-items: center;
    color: white;
	font-size: small;
	text-shadow: 0px 0px 10px #000000;
}

.item-icon-gold { background-image: url("../assets/img/icons/gold.webp"); }
.item-icon-thrash { background-image: url("../assets/img/icons/thrash.webp"); }
.item-icon-thrashed { background-image: url("../assets/img/icons/thrashed.webp"); }
.item-icon-drop { background-image: url("../assets/img/icons/drop.webp"); }
.item-icon-deposit { background-image: url("../assets/img/icons/deposit.webp"); }
.item-icon-equip { background-image: url("../assets/img/icons/thrash.webp"); }
.item-icon-accept { background-image: url("../assets/img/icons/check.webp"); }
.item-icon-cancel { background-image: url("../assets/img/icons/cancel.webp"); }
.item-icon-backpack { background-image: url("../assets/img/icons/backpack.webp"); }
.item-icon-retrieve { background-image: url("../assets/img/icons/retrieve_to_backpack.webp"); }
.item-icon-select { background-image: url("../assets/img/icons/select.webp"); }

.score-icon-greater { background-image: url("../assets/img/icons/deposit.webp"); }
.score-icon-worst { background-image: url("../assets/img/icons/drop.webp"); }
.score-icon-equal { background-image: url("../assets/img/icons/equal.webp"); }

.icon-talk { background-image: url("../assets/img/icons/talk.webp"); }
.icon-buy-items { background-image: url("../assets/img/icons/buyItems.webp"); }
.icon-sell-items { background-image: url("../assets/img/icons/sellItems.webp"); }

.loading-icon {
	width: 30px;
    height: 30px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
	pointer-events: none;
	background-image: url("../assets/img/icons/inMenuIcon.webp");
}

.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;
}

.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;
}

.itemDisplayOptions {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: wheat;
    font-weight: bold;
    font-size: large;
}

.iteractiveContentCloseButtonContainer {
	width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: wheat;
    font-weight: bold;
    font-size: large;
}

.storageItemContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	align-content: space-between;
	flex-direction: column;
	width: 100%;
	height: 50%;
	background-image: url(../assets/img/background/WoodPannelMiddleCenter.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;
}

.iteractiveCharBagBottomBar {
	display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
	width: 100%;
    height: 50px;
	background-image: url(../assets/img/background/backpackBottomBar.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.storageCharBagContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
	width: 100%;
    height: 50%;
    background-image: url(../assets/img/background/WoodPannelMiddleCenter.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    flex-wrap: nowrap;
}

.storageLootContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
	width: 100%;
    background-image: url(../assets/img/background/WoodPannelMiddleCenter.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    flex-wrap: nowrap;
}

.lootPickAllButton {
	pointer-events: none;
}

.storageChestTopBar {
	width: 100%;
    height: 50px;
    color: white;
    font-weight: bold;
    font-size: large;
    background-image: url(../assets/img/background/ChestTopBar.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.storageChestContainer {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
	min-height: 1px;
	background-image: url(../assets/img/background/ChestContent.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	align-content: center;
    padding-left: 5px;
    padding-right: 5px;
}

.storageChestBottomBar {
	width: 100%;
    height: 50px;
    background-image: url(../assets/img/background/BottomBarBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.storageBoxContainer {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
	min-height: 1px;
}

.storageBoxCharBagCategoriesContainer {
    width: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	height: -webkit-fill-available;
	overflow: scroll;
	scrollbar-width: none;
	margin-top: 35px;
    margin-bottom: 35px;
}

.storageBoxCharBagItemsContainer {
    width: 100%;
}

.storageBoxCharBagCategoryBox {
	width: 50px;
	height: 50px;
}

/* Char bag on storage display */
.storageBoxCharBag{ 
    display: flex;
	width: 100%;
	height: stretch;
}

.storageBoxLootContainer{ 
    display: flex;
	width: 100%;
}

.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/BackpackCategories.webp");
}



.storageBoxCharBagCategorieBox {
	width: 50px;
	height: 50px;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.storageBoxCharBagCategorieBoxIdle {
	filter: grayscale(100%);
	background-image: url("../assets/img/background/InventoryBox.webp");
}

.storageBoxCharBagCategorieBoxSelected {
	filter: none;
	background-image: url("../assets/img/background/InventoryBoxSelected.webp");
}

.storageBoxCharBagItemBox {
	position: relative;
	width: 50px;
	height: 50px;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url("../assets/img/background/ChestItemBox.webp");
}

.storageBoxCharBagCategorieBoxBG {
	width: 50px;
	height: 50px;
	background-position: center;
	background-size: 70% 70%;
	background-repeat: no-repeat;
}

.storageBoxCharBagContentContainer {
	
}

.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/BackpackTop.webp);
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.storageBoxCharBagTopLow {
	color: #ffe200;
}

.storageBoxCharBagTopMedium {
	color: #ff9200;
}

.storageBoxCharBagTopHigh {
	color: #ff2600;
}

.bagUtilizationContainer {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.storageBoxCharBagContent{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/BackpackContent.webp);
    display: flex;
    flex-direction: column;
}

.storageBoxCharBagContainer {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    flex: 1;
    margin-top: 5px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    overflow: scroll;
    scrollbar-width: none;
}

.storageBoxMapLootContent {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
    flex: 1;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
	background-color: #00000075;
}

.storageBoxMapLootContainer{
    width: 100%;
    height: 100%;
}

.storageBoxMapLootContainerContent{
    width: 100%;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/lootBoxContainerV2.webp);
    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;
    /* flex: 1; */
    width: 100%;
    margin-left: 25px;
    margin-right: 25px;
    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/lootBoxItemContainer.webp);
}

.storageBoxMapLootTopBar {
	height: 45px;
	/*padding-top: 5px;*/
    width: 100%;
    display: flex;
	font-size: large;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/lootBoxTopBar.webp);
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.storageBoxMapLootTitle {
	color: #ffe200;
	font-weight: bolder;
    font-size: large;
}

.storageBoxMapLootTopText {
	height: 30px;
	margin-top: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: #fcd187;
    text-shadow: 1px 1px 2px #000000;
    font-size: medium;
}

.storageBoxMapLootBagContainerBar {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: 30px;
	width: 100%;
    color: #fcd187;
    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;
    background-image: url(../assets/img/background/lootBoxBottomContainerBar.webp);
}

.storageBoxMapLootBagContainer {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    min-height: 100px;
	width: 100%;
    /* flex: 1; */
    /* padding: 10px; */
    margin-left: 25px;
    margin-right: 25px;
    /* margin-bottom: 10px; */
    border-radius: 5px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/lootBoxBottomContainer.webp);
}

.storageBoxMapLootCharBagInfoContainer {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    min-height: 100px;
    /* flex: 1; */
    width: 100%;
}

.storageBoxMapLootItemBox{
    width: 50px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	margin: 5px;
}

.lootBoxCharGoldText {
	color: wheat;
    font-weight: bolder;
}

.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;
}

.storageBoxMapLootBottomBar {
	display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    /* height: 50px; */
    margin-bottom: 15px;
    /* margin-top: 15px;*/
}

.catBox{
    width: 50px;
    height: 50px;
    /* border: 1px solid green; */
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	
}

.itemBox{
    width: 50px;
    height: 50px;
    /* border: 1px solid green; */
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	margin: 1px;
}

.removeBox {
	animation: removeBox 0.5s linear forwards;
}

/* ================================= */

.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;
}

.storageItemBoxDisplay {
	float: left;
    margin: 5px;
	display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
	background-size: 100% 100%; background-repeat: no-repeat;
}

.storageItemBoxEmpty {
	background-image: url("../assets/img/background/ChestItemBoxV2.webp");
}

.storageItemBoxUsed {
	background-image: url("../assets/img/background/ChestItemBoxV2.webp");
}

.storageItem {
	width: 100%;
	height: 100%;
	background-size: 70% 70%; 
	background-repeat: no-repeat;
	background-position: center;
}

.npcSpeechOption {
	display: flex;
    align-items: center;
	border: 1px solid #615031;
    border-radius: 10px;
    width: 100%;
    padding: 5px;
    margin: 5px;
    /*background-color: #dfa459;*/
	background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 4px 4px;
    background-color: #dfa459;
}

.npcConversationOption {
	display: flex;
    align-items: center;
	pointer-events: none;
	width: 100%;
}

.storageButton {
	font-weight: bold;
    font-size: large;
    color: #fda636;
    text-shadow: 0px 0px 5px #000000;
    width: fit-content;
    min-width: 80px;
    padding: 5px 10px 5px 10px;
    margin: 3px;
    height: 25px;
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
	align-content: center;
    /*background-image: url("../assets/img/buttons/Char-profile-button.webp");*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* position: relative; */
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

.storageButtonGreen {
	background-image: url("../assets/img/buttons/buttonGreen.webp");
}

.storageButtonBrown {
	background-image: url("../assets/img/buttons/buttonBrown.webp");
}

.storageButtonBlue {
	background-image: url("../assets/img/buttons/buttonBlue.webp");
}

.storageButtonRed {
	background-image: url("../assets/img/buttons/buttonRed.webp");
}

.disabled {
	filter: grayscale(100%);
}

.messagePopupContainer {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    background-color: #000000ad;
    z-index: 99;
}

.messagePopup {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding: 5px;
    font-size: medium;
    background-image: url(../assets/img/background/messageBoard.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-width: 30%;
    max-height: 95%;
	max-width: min(400px, 100%);
    aspect-ratio: 9 / 20;
}

.messagePopupText {
    width: 100%;
    height: 85%;
    padding: 10px;
    overflow: scroll;
    scrollbar-width: none;
    position: relative;
}

.npcIteractiveContent {
	display: flex;
	width: 100%;
}

.npcMessagePopup {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
	padding: 15px;
	font-size: medium;
	background-image: url(../assets/img/background/messageBoard.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	min-width: 30%;
	width: 100%;
	max-height: 90%;
}

.npcPortraitContainer {
	width: 100px;
    height: 100px;
    background-image: url(../assets/img/background/npcDialogPortraitBackground.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

.npcMessageContent {
	display: grid;
    grid-auto-flow: column;
}

.npcPortraitPicture {
	width: stretch;
    height: stretch;
    margin: 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.npcTextContainer {
    margin: 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.npcMessagePopupBottomBar {
	width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.npcMessageShopPopup {
	display: flex;
	flex-direction: column;
	padding: 5px;
	width: 100%;
	background-image: url(../assets/img/background/npcShopMainContainer.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.npcMessageShopPopupTitle {
    height: 50px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
	background-image: url(../assets/img/background/npcShopTopBar.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #f9b433;
    font-size: large;
}

.npcMessageShopContainer {
	display: flex;
	flex: 1;
	width: 100%;
	min-height: 0;
}

.npcMessageShopLeftPannel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    width: 20%;
	padding: 15px;
    /* height: 100%; */
    /* flex: 1; */
    gap: 5px;
    background-image: url(../assets/img/background/npcShopRightPannelContainer.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.npcShopPortraitContainer {
	width: 100px;
    height: 100px;
    background-image: url(../assets/img/background/npcShopPortraitBackground.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

.npcMessageShopLeftPannelText {
    margin: 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	color: wheat;
	min-width: 100%;
}

.npcShopResponse {
	margin-top: 5px;
}

.npcMessageShopLeftPannelGoldText {
	text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
    height: 30px;
    align-items: center;
	background-image: url(../assets/img/background/npcShopGoldContainer.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.npcMessageShopRightPannel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	flex: 1;
	align-content: flex-start;
	padding: 15px;
	width: stretch;
    background-image: url(../assets/img/background/npcShopRightPannelContainer.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* MOBILE / RETRATO */
@media (orientation: portrait) {

    .npcMessageShopContainer {
        flex-direction: column;
    }

    .npcMessageShopLeftPannel {
        width: stretch;
        height: auto;
        padding: 5px;
    }

    .npcMessageShopRightPannel {
        align-content: center;
		padding: 5px;
    }
	
	.npcMessageShopLeftPannelText {
		min-width: 1px;
	}
}


.npcShopSpeech {
	text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
	align-content: center;
}

.npcMessageShopItemBox {
	height: 75px;
	margin: 10px;
}

.npcShopItemBox {
	position: relative;
    display: flex;
    width: 80px;
    height: 80px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/npcShopItemContainer.webp);
    flex-wrap: wrap;
    justify-content: center;
}

.npcShopItemBoxQuantity {
	position: absolute;
    padding: 5px;
    color: white;
    font-weight: bolder;
    pointer-events: none;
    left: 5px;
    top: 5px;
}

.npcShopItemBoxBG {
	width: 60px;
    height: 60px;
    background-position: center;
    background-size: 70% 70%;
    background-repeat: no-repeat;
}

.npcMessageShopItemPrice {
    width: 100%;
    height: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: wheat;
    background-image: url(../assets/img/background/npcShopItemPrice.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 0 0 5px 5px;
}

.npcShopOptionsContainer {
	text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
	height: 60px;
    justify-content: center;
    align-items: center;
	background-image: url(../assets/img/background/npcShopGoldContainer.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.npcShopOptions {
	display: flex;
    align-items: center;
    border: 1px solid #615031;
    border-radius: 10px;
    width: 100%;
    padding: 5px;
    margin: 5px;
    color: wheat;
    justify-content: center;
	max-width: 160px;
}

/* seta */
.scrollHint {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0px;
    right: 10px;
    opacity: 0;
    pointer-events: none;
	justify-content: center;
    background-image: url(../assets/img/icons/doubleDown.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* animação de piscar */
@keyframes blinkScroll {
    0%   { opacity: 0; transform: translateY(0); }
    25%  { opacity: 1; transform: translateY(5px); }
    50%  { opacity: 0; }
    75%  { opacity: 1; transform: translateY(5px); }
    100% { opacity: 0; }
}

.scrollHint.show {
    animation: blinkScroll 1s ease-in-out infinite;
}

/***************************************************
** Char profile module
***************************************************/
.charProfileContainer {
	display: flex;
    /*height: stretch;*/
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    background-image: url(../assets/img/background/charProfileContainerBackground.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 10px;
}

.charProfileContent {
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
}

.charProfileDisplayTitle {
	width: 100%;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: #fcd187;
    font-weight: bold;
    font-size: large;
    text-shadow: 0px 0px 10px #000000;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/charCategoryTopBar.webp);
}

.charProfileContainerContent {
	width: 100%;
}

.charProfileResumeTitle {
	height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	font-size: medium;
	font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
	color: wheat;
	background-image: url(../assets/img/background/charCategoryTopBar.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.charProfileResumeContainer {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    font-size: larger;
    text-shadow: 0px 0px 10px #000000;
    background-color: #00000040;
    background-image: url(../assets/img/background/charAtributesBoxBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-bottom: 5px;
	border-left: 1px solid #4d2411;
    border-right: 1px solid #4d2411;
}

.charProfileResumeContainerEnd {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom: 1px solid #4d2411;
    border-left: 1px solid #4d2411;
    border-right: 1px solid #4d2411;
}

.charProfileDisplayPictureContainer {
	height: 100%;
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	margin-left: 5px;
}

.charProfilePictureDisplayBG {
	background-size: 90% 90%;
    background-repeat: no-repeat;
    background-position: center;
}

.charProfilePictureDisplay {
    float: left;
    /*margin: 5px;*/
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	background-image: url(../assets/img/background/charProfilePictureBox.webp);
}

.charProfileDisplayPicture {
    width: 100px;
    height: 100px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 5px;
}

.charProfileResumeTop {
	container-type: inline-size;
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
	padding-top: 5px;
}

.charProfileResumeTextName {
	font-weight: bolder;
    font-size: large;
    margin: 5px;
    text-shadow: none;
}

.charProfileResumeTextContainer {
	display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
	padding-right: 5px;
}

.charProfileResumeText {
	width: 100%;
    margin: 5px;
	text-shadow: none;
	/*font-size: 6cqw;*/
}

.charProfileResumeSeparator {
    width: 100%;
    border: 1px solid #734f008f;
}

.charProfileBarContainer {
    font-family: Arial, sans-serif;
    width: 100%;
    /*margin-right: 5px;*/
}

.charProfileExpBarContainer {
    margin-right: 10px;
    margin-left: 5px;
    width: 100%;
}

.charProfileExternBar {
    width: 100%;
    height: 15px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    /*border: 1px solid #5d5858;*/
    border: 1px solid black;
	background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.charProfileResumeCombatAttrContainer {
	display: flex;
    height: 30px;
    flex-wrap: wrap;
    align-content: center;
	justify-content: center;
}

.charEquipmentResumeCombatAttrContainer {
	display: flex;
    /*height: 20px;*/
    flex-wrap: wrap;
    align-content: center;
	justify-content: center;
}

.charProfileResumeAttributeIcon {
	width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
	flex-shrink: 0;
}

.charProfileResumeCombatAttrTextContainer {
	display: flex;
    height: 20px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-left: 5px;
}

.charProfileResumeAttributeTextContainer {
	display: flex;
    /*height: 20px;*/
    width: 100%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
	margin-left: 5px;
    margin-right: 5px;
}

.charProfileResumeCombatAttrText {
	display: flex;
	/*height: 20px;*/
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.charProfileResumeCombatAttrValue {
	display: flex;
	/*height: 20px;*/
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	margin-left: 5px;
}

.charProfileResumeCombatAttrBonus {
	color: #057305;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bolder;
	text-shadow: none;
}

.charProfileResumeCombatAttrPenalty {
	color: #b32323;
    padding-left: 5px;
	padding-right: 5px;
    font-weight: bolder;
	text-shadow: none;
}

.charProfileResumeTable {
	
}

.charProfileResumeVitalStatsText {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    position: relative;
    float: left;
    width: 50%;
	margin-top: 5px;
	height: 20px;
}

.charProfileResumeVitalStatsProgressBar {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
}

.charProfileBottomBar {
	width: 100%;
    height: 50px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}


/**************************************
** Char equipment
**************************************/
.charEquipmentResumeContainer {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    font-size: larger;
    text-shadow: 0px 0px 10px #000000;
    background-color: #00000040;
    background-image: url(../assets/img/background/charEquipmentResumeContainer.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 15px;
}

.charEquipmentMainContainer {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    font-size: larger;
    text-shadow: 0px 0px 10px #000000;
    background-color: #00000040;
    background-image: url(../assets/img/background/charEquipmentContainer.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 10px;
}

.charEquipmentStatsDetailContainer {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
	width: 100%;
    padding: 10px;
    border-radius: 5px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/lootBoxBottomContainer.webp);
	color: wheat;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    font-size: small;
    font-weight: normal;
}

.charEquipmentStatsDetailTitle {
	color: #d9c451;
	margin-top: 5px;
}

.charEquipmentResumeName {
	width: 100%;
    font-weight: bold;
    font-size: larger;
    margin: 5px;
    text-shadow: none;
}

.charEquipmentResumeText {
	width: 100%;
    font-weight: bold;
    margin: 5px;
    text-shadow: none;
}

.charEquipmentResumePicture {
    width: 60px;
    height: 60px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 1px;
}

.charEquipmentItemCategoryContainer {
	width: 100%;
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
	margin-bottom: 2px;
    margin-top: 2px;
}

.charEquipmentItemContainer {
	width: 80px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/charEquipmentItemBox.webp);
}

.charEquipmentItemContainerTitle {
	width: 100%;
    height: 20px;
    background-image: url(../assets/img/background/charEquipmentItemBoxTitle.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: wheat;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    font-size: small;
    font-weight: normal;
    padding-top: 3px;
    /*padding-bottom: 3px;*/
	pointer-events: none;
}

.charEquipmentItemContainerBox{
	width: 100%;
    height: 65px;
    background-image: url(../assets/img/background/charEquipmentItemBox.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	pointer-events: none;
}

.charEquipmentItemContainerBoxItem {
	width: 40px;
    height: 40px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
	pointer-events: none;
}

.errorBox, .loadingBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  min-width: 280px;
  max-width: 400px;
  text-align: center;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 14px;
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-in-out, fadeOut 0.3s ease-in-out 6s forwards;
}

.successBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  min-width: 280px;
  max-width: 400px;
  text-align: center;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 14px;
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-in-out, fadeOut 0.3s ease-in-out 2s forwards;
}

/* Erro (vermelho translúcido) */
.errorBox {
  border: 2px solid rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.5);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
}

/* Carregando (verde translúcido) */
.loadingBox {
  border: 2px solid rgba(0, 255, 0, 0.8);
  background-color: rgba(0, 255, 0, 0.5);
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.5);
}

/* Mensagem de sucesso (verde translúcido) */
.successBox {
  border: 2px solid rgba(0, 255, 0, 0.8);
  background-color: rgba(0, 255, 0, 0.5);
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.5);
}

.manageCharContainer {
	z-index: 9999;
    display: flex;
    position: fixed;
    background-color: #000000d4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 14px;
	font-weight: bold;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    animation: scaleUp 0.5s ease-in;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.deleteCharDialogBox {
	background-image: url("../assets/img/background/CharDescriptionBox.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 10px;
    /* width: 100%; */
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	color: black;
    font-weight: bold;
    font-size: large;
}

.deleteCharMessage {
	color: black;
    font-weight: bold;
    font-size: large;
}

.createChar-Container {
    height: 100%;
    width: 100%;
	overflow: hidden;
}

.createChar-Box {
	width: 100%;
	position: relative;
}

.createChar-TabTitle {
	background-color: gray;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	background-image: url("../assets/img/background/charCreationTitle.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.createChar-content {
	height: 0px;
	transition: height 1s ease-in-out;
	background-image: url("../assets/img/background/createCharDisplayBox.webp");
    background-size: cover;
    background-repeat: round;
	display: flex;
    flex-direction: column;
	overflow: auto;
}

.tabTitleActive {
	color: gold;
    font-weight: bold;
    font-size: large;
	text-shadow: 0px 0px 4px #000000;
}

.tabTitleInactive {
	color: #ff9d20b5;
    font-weight: bold;
    font-size: large;
    text-shadow: 0px 0px 3px #000000;
}

.createChar-bottomButons {
	height: 50px;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin-bottom: 15px;
    margin-top: auto;
}

.createChar-displayContainer {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    /*height: 250px;*/
    margin-top: 10px;
}

.createChar-resumeContainer {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    height: inherit;
	background-image: url(../assets/img/background/CharDescriptionBox.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
	overflow: auto;
}

.createChar-PictureBox {
	width: 80px;
	height: 80px;
	margin: 3px;
}

.createChar-ClassBox {
	width: 70px;
	height: 70px;
	margin: 3px;
}

.createChar-PictureFrame {
	background-image: url("../assets/img/background/createCharPictureBox.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.createChar-PictureFrameSelected {
	box-shadow: 0 0 0 2px #d17312, 0 0 0 4px #000000;
    border-radius: 5px;
}

.createChar-Picture {
	width: -webkit-fill-available;
    height: -webkit-fill-available;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	margin: 3px;
}

.createChar-classIcon {
	width: -webkit-fill-available;
    height: -webkit-fill-available;
	background-size: 100% 100%;
    background-repeat: no-repeat;
}

.createChar-resumeBox {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    position: relative;
}

.createChar-resumeBoxContent {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 15px;
    padding-right: 5px;
}

.createChar-nameFormContainer {
	height: -webkit-fill-available;
    padding-top: 10px;
}

.createChar-keyboardContainer {
	height: -webkit-fill-available;
    display: grid;
    align-items: center;
    justify-content: center;
}

.createChar-nameContainer {
	border: 1px solid red;
}

.createChar-nameInput {
	height: 50px;
    display: grid;
    justify-content: center;
    align-content: center;
    font-weight: bold;
    font-size: large;
	color: white;
    letter-spacing: 1px;
	background-image: url("../assets/img/background/Char-class-name-box.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.createChar-nameLenghtInfo {
	display: grid;
    justify-content: center;
    align-content: center;
    font-size: large;
    background-color: #ab3e3e87;
    border-radius: 5px;
    margin: 5px;
}

.createChar-BasePicture {
	aspect-ratio: 1 / 1;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    max-width: 250px;
    max-height: 200px;
}

.createChar-pictureContainer {
	height: -webkit-fill-available;
    min-height: 150px;
    display: grid;
}

.createChar-ResumeText {
	margin: 10px;
    height: 100%;
    font-size: small;
    overflow: scroll;
    scrollbar-width: none;
}

.createChar-resumeItem {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;	
}

.createChar-Review {
    height: -webkit-fill-available;
    width: 100%;
    margin: 20px;
    display: grid;
    justify-content: center;
}

/* Animações */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -55%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -45%) scale(0.9); }
}

@keyframes removeBox {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes scaleUp {
	0% {
		transform: scale(0); /* Original size */
	}
	100% {
		transform: scale(1); /* Scales up to 1.5 times its original size */
	}
}

.book-container {
	position: relative;
	/*width: 100%;*/
	min-width: 250px;
	min-height: 100%;
	perspective: 1200px; /* Gives the 3D effect */
	/*margin: 50px auto;*/
}

.login-char-selection-pre-container {
	visibility: hidden;
    z-index: 1;
    position: absolute;
    background-image: url("../assets/img/background/BookPageVines.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
	display: flex;
    justify-content: center;
    align-items: center;
}

.login-char-selection-container {
	visibility: hidden;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/background/BookPageVines.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.char-selection-container-module {
	display: flex;
    align-content: flex-start;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.char-selection-container {
    position: relative;
    width: 350px;
    height: 100%;
    perspective: 1200px; /* Gives the 3D effect */
}

.select-char-page {
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
	background-image: url("../assets/img/background/BookPageEmpty.webp");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.char-box-item {
	text-align: left;
    padding-left: 5px;
	padding-top: 3px;
}

.char-status-text {
	height: 15px;
    position: relative;
    float: left;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
	font-weight: bold;
	font-size: larger;.char-box-item
}

.char-status-icon {
	width: 15px;
    height: 15px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-right: 5px;
	pointer-events: none;
}

.icon-level { background-image: url("../assets/img/icons/char/star.webp"); }
.icon-hp { background-image: url("../assets/img/icons/char/hp.webp"); }
.icon-atk { background-image: url("../assets/img/icons/char/attack.webp"); }
.icon-sp-atk { background-image: url("../assets/img/icons/char/sp_attack.webp"); }
.icon-def { background-image: url("../assets/img/icons/char/defense.webp"); }
.icon-sp-def { background-image: url("../assets/img/icons/char/sp_defense.webp"); }
.icon-spd { background-image: url("../assets/img/icons/char/speed.webp"); }
.icon-mana { background-image: url("../assets/img/icons/char/mana.webp"); }
.icon-stamin { background-image: url("../assets/img/icons/char/stamin.webp"); }
.icon-gold { background-image: url("../assets/img/icons/gold.webp"); }
.icon-death { background-image: url("../assets/img/icons/death.webp"); }
.icon-medal { background-image: url("../assets/img/icons/medal.webp"); }
.icon-medalLost { background-image: url("../assets/img/icons/medalLost.webp"); }
.icon-bag { background-image: url("../assets/img/icons/bag.webp"); }


.npcAffinityContainer {
	position: absolute;
    bottom: 15px;
	width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
	animation: fadeInAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.npcAffinityContainer.fade-out {
    animation: fadeOutAnimation ease 0.5s;
    animation-fill-mode: forwards;
}

/*.npcAffinityIcon { 
	width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center; 
	background-image: url("../assets/img/icons/affinityLove.webp");
	width: 15px;
	height: 15px;
}*/

.npcSpeechBaloon { 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../assets/img/icons/npcSpeechBaloonYellow.webp);
    width: 20px;
    height: 18px;
    padding-top: 3px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.npcAffinityIcon {
	background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 12px;
    height: 12px;
}


.affinity-icon-level-0 { background-image: url("../assets/img/icons/affinityLove-0.webp"); }
.affinity-icon-level-1 { background-image: url("../assets/img/icons/affinityLove-1.webp"); }
.affinity-icon-level-2 { background-image: url("../assets/img/icons/affinityLove-2.webp"); }
.affinity-icon-level-3 { background-image: url("../assets/img/icons/affinityLove-3.webp"); }
.affinity-icon-level-4 { background-image: url("../assets/img/icons/affinityLove-4.webp"); }
.affinity-icon-level-5 { background-image: url("../assets/img/icons/affinityLove-5.webp"); }
.affinity-icon-level-6 { background-image: url("../assets/img/icons/affinityLove-6.webp"); }
.affinity-icon-level-7 { background-image: url("../assets/img/icons/affinityLove-7.webp"); }
.affinity-icon-level-8 { background-image: url("../assets/img/icons/affinityLove-8.webp"); }
.affinity-icon-level-9 { background-image: url("../assets/img/icons/affinityLove-9.webp"); }
.affinity-icon-level-10 { background-image: url("../assets/img/icons/affinityLove-10.webp"); }

.barra-container {
    font-family: Arial, sans-serif;
}

.barra-container-text {
	width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 1;
    font-weight: bold;
    text-shadow: 0px 0px 2px #ffffff;
}

.barra-label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: #222;
}

.barra-externa {
    width: 100px;
    height: 15px;
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
	border: 1px solid #5d5858;
}

.barra-interna {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 10px;
    white-space: nowrap;
    transition: width 0.3s ease;
	background-size: 110% 110%; 
	background-repeat: no-repeat;
}

.greenBar { background-image: url("../assets/img/background/greenBar.webp"); }
.redBar { background-image: url("../assets/img/background/rebBar.webp"); }
.blueBar { background-image: url("../assets/img/background/blueBar.webp"); }
.yellowBar { background-image: url("../assets/img/background/greenBar.webp"); }
.orangeBar { background-image: url("../assets/img/background/orangeBar.webp"); }
.lightgreenBar { background-image: url("../assets/img/background/lightgreenBar.webp"); }
.lightblueBar { background-image: url("../assets/img/background/lightblueBar.webp"); }
.pinkBar { background-image: url("../assets/img/background/pinkBar.webp"); }
.brownBar { background-image: url("../assets/img/background/brownBar.webp"); }
.greyBar { background-image: url("../assets/img/background/greyBar.webp"); }
.whiteBar { background-image: url("../assets/img/background/whiteBar.webp"); }

/* BOOK COVER */
.book-cover {
	position: absolute;
    top: 0;
    /* left: -12px; */
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transition: transform 1s ease-in-out, opacity 0s ease-in-out 0s, visibility 0s linear 0s;
    z-index: 2;
    background-image: url(../assets/img/background/BookCover.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* BOOK PAGE */
.book-page {
	position: absolute;
    /* position: relative; */
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 5%;
    /* padding: 20px; */
    box-sizing: border-box;
    /* z-index: 1; */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    text-align: center;
    background-image: url(../assets/img/background/BookPageBlank.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: left center;
    transition: transform 1s ease-in-out, opacity 0s ease-in-out 0s, visibility 0s linear 0s;
    flex-wrap: wrap;
    align-content: center;
}

.book-page-padding {
	padding: 15px;
}

.char-selection-nav-container {
	height: 50px;
	display: flex;
	justify-content: center; /* Horizontally center */
	align-items: center;    /* Vertically center */
	position: absolute;
    bottom: 15px;
}

.book-page-nav-button {
	width: 80px;
	height: 50px;
	display: flex;
	justify-content: center; /* Horizontally center */
	align-items: center;    /* Vertically center */
	margin-right: 10px;
	margin-left: 10px;
}

.book-page-next-button {
	background-image: url("../assets/img/buttons/Navigate-Button-Right.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.book-page-previous-button {
	background-image: url("../assets/img/buttons/Navigate-Button-Left.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.book-login-button {
	font-weight: bold;
    font-size: large;
    color: #fda636;
    text-shadow: 0px 0px 5px #000000;
    width: fit-content;
    min-width: 80px;
    padding: 5px 10px 5px 10px;
    margin: 3px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../assets/img/buttons/Char-profile-button.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* position: relative; */
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

.book-char-profile-button {
	font-weight: bold;
	font-size: xx-large;
	color: #fda636;
    text-shadow: 0px 0px 5px #000000;
	width: 150px;
	height: 50px;
	display: flex;
	justify-content: center; /* Horizontally center */
	align-items: center;    /* Vertically center */
	background-image: url("../assets/img/buttons/Char-profile-button.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	position: relative;
	filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

.book-bottom-button {
	margin-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
}

.book-play-button {
	filter: hue-rotate(65deg);
}

.book-delete-button{
	filter: hue-rotate(325deg);
}

.book-page-curent-page {
	font-weight: bold;
	font-size: xx-large;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center; /* Horizontally center */
	align-items: center;    /* Vertically center */
	background-image: url("../assets/img/background/Book-page-box.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.book-page-flex {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
}

.book-page-blank {
	background-image: url("../assets/img/background/BookPageBlank.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.book-page-borders {
	background-image: url("../assets/img/background/BookPageBorders.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.book-page-vines {
	background-image: url("../assets/img/background/BookPageVines.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.turnPageBook {
		transform: rotateY(-84deg);
		opacity: 0;
		visibility: hidden;
		transition: transform 1s ease-in-out, opacity 0.3s ease-in-out 0.7s, visibility 0s linear 1s;
}

.returnPageBook {
		transform: rotateY(0deg);
		opacity: 1;
		visibility: visible;
		transition: transform 1s ease-in-out, opacity 0s ease-in-out 0s, visibility 0s linear 0s;
}


.book-char-selection-page {
	position: absolute;
	/*position: relative;*/
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 25px;
	box-sizing: border-box;
	/*z-index: 1;*/
	/*display: flex;*/
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-image: url("../assets/img/background/BookPageBlank.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	transform-origin: left center; /* Important for the rotation */
	transition: transform 1s ease-in-out, opacity 0s ease-in-out 0s, visibility 0s linear 0s; /* Added opacity and visibility */
}

.char-selection-page-container {
	margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    height: 100%;
}

.char-box-parent {
	/*display: inline-table;*/
	display: flex;
	align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 250px;
    height: 130px;
    background-image: url("../assets/img/background/Book-page-box.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
	padding: 15px 15px 15px 20px;
}
    
.char-box-picture {
    grid-row: span 4 / span 4;
	border: 1px solid black;
}

.char-box-name {
    grid-column-start: 1;
    grid-row-start: 5;
	border: 1px solid black;
}

.char-box-level {
    grid-column-start: 2;
    grid-row-start: 2;
	border: 1px solid black;
}

.char-box-gold {
    grid-column-start: 2;
    grid-row-start: 1;
	border: 1px solid black;
}

.char-selection-card {
	background-image: url("../assets/img/background/Book-page-box.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

.char-portrait {
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	border-radius: 10px;
}

.char-card-name {
	font-size: large;
	font-weight: bold;
}

.char-profile-poster {
	display: flex;
    justify-content: center;
    background-image: url("../assets/img/background/Char-profile-background.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100%;
    border-radius: 10px;
}

.char-profile-poster-container {
	width: 300px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
}

.char-profile-poster-name {
	display: flex;
    justify-content: center;
    background-image: url("../assets/img/background/Char-class-name-box.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 40px;
    border: 2px solid #000000;
    border-radius: 15px;
    align-items: center;
    color: #ff9d20;
    font-weight: bold;
    font-size: x-large;
    text-shadow: 0px 0px 1px white;
    padding-left: 5px;
    padding-right: 5px;
	width: 100%;
	/*margin-bottom: 5px;*/
}

.char-profile-picture-container {
	display: flex;
    justify-content: center;
    background-image: url("../assets/img/background/Char-portrait-frame.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    aspect-ratio: 1 / 1;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 80%;
	border-radius: 10px;
}

.char-profile-quote {
	/*background-image: url(../img/background/CharDescriptionBox.webp); background-size: 100% 100%; background-repeat: no-repeat;*/
    padding: 10px;
    width: 100%;
    /* height: 100px; */
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: black;
    font-weight: bold;
    /*margin-bottom: 5px;*/
	font-style: italic;
}

.char-profile-poster-stats {
	/*border: 1px solid black;
	width: 100%;*/
	background-image: url("../assets/img/background/CharDescriptionBox.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
	padding: 15px;
}

.char-profile-buttons {
	width: 100%;
    display: flex;
    justify-content: center;
}

.volumeIcon {
	z-index: 101;
    border-radius: 10px;
    background-color: rgb(255 255 255 / 40%);
    width: 40px;
    height: 40px;
    position: absolute;
    right: 20px;
    top: 20px;
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	/*visibility: hidden;*/
	background-image: url("../assets/img/icons/ui/VolumeIcon-Med.webp");
}

.volumeIcon-Min {
	background-image: url("../assets/img/icons/ui/VolumeIcon-Min.webp");
	visibility: visible;
}

.volumeIcon-Med {
	background-image: url("../assets/img/icons/ui/VolumeIcon-Med.webp");
	visibility: visible;
}

.volumeIcon-Max {
	background-image: url("../assets/img/icons/ui/VolumeIcon-Max.webp");
	visibility: visible;
}

.volumeIcon-Off {
	background-image: url("../assets/img/icons/ui/VolumeIcon-Off.webp");
	visibility: visible;
}

.loginContainer {
	height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    background-image: url(../assets/img/background/LoginFormBase.webp);
    background-size: 100% 100%;
}

.loginLogo {
	position: relative;
    left: 50%;
    transform: translate(-50%);
    width: 50%;
    height: 25%;
    background-image: url("../assets/img/LOR-Logo.webp");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 25px;
    margin-bottom: 20px;
}

.loginModuleContainer {
	padding-left: 25px;
	padding-right: 25px;
	position: relative;
	left: 2px;
	height: 100%;	
}

.loginFormContainer {
	text-align: center;
    height: auto;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 4 / 5;
    background-repeat: no-repeat;
    background-repeat: round;
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    display: flow;
    max-height: 90%;
}

.forgotPasswordLink {
	padding: 5px;
}

.fullText {
	width: 100%;
    text-align: center;
}

.loginReturn {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #000000c7;
    transition: opacity 0.5s ease-in-out 0.5s, visibility 0.5s linear 0.5s;
    flex-wrap: wrap;
    align-content: center;
	justify-content: center;
}

.loginReturnMessage {
	padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
	align-items: center;
    justify-content: center;
	text-align: center;
}

.loginFormTitle {
    text-align: center;
    /*margin-bottom: 20px;*/
    font-size: 35px;
    font-weight: bold;
    color: goldenrod;
    text-shadow: 3px 3px 4px #000;
    /*letter-spacing: 2px;*/
}

.LoginForm {
	padding-top: 20px;
}

.GoldLink {
	color: #ff9f0a;
    font-size: larger;
	text-shadow: 3px 3px 6px #000;
}

.BlackLink {
	color: #000000;
    font-size: larger;
    font-weight: bold;
    text-shadow: 3px 3px 6px #000;
}

/*.loginFormItem {
	position: relative;
	left: 50%;
	transform: translate(-50%);
	text-align: center;
	margin-top: 5px;
}*/

.loginFormItem {
	margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.BookInstructions {
	position: relative;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    margin-top: 10px;
	height: 20px;
}

.login-input {
	background-image:url("../assets/img/background/LoginField.webp");
	background-repeat: round;
	/*background-position: top;*/
	background-size: cover;
	/* background: border-box; */
	/* padding-left: 30px; */
	padding: 8px;
	/*width: 50%;*/
	border: none;
	background-color: unset;
	color: #ffffff;
	cursor: url('../assets/blueCursor.webp'), auto !important;
}

.loginButton {
    background-image: url("../assets/img/buttons/Button.webp");
    background-repeat: round;
    /* background-position: top; */
    background-size: cover;
    border: unset;
    background-color: unset;
    /* position: relative; */
    left: 50%;
    /* transform: translate(-50%); */
    text-align: center;
    min-width: 100px;
    /* margin-top: 10px; */
    height: 30px;
    text-align: center;
    margin-bottom: 5px;
    /* font-size: 50px; */
    font-weight: bold;
    color: goldenrod;
    text-shadow: 3px 3px 6px #000;
    letter-spacing: 2px;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
    /* margin-bottom: 30px;*/
}

.loginButton:hover {
  background-image: url("../assets/img/buttons/ButtonHover.webp");
  color: gold;
  text-shadow: 3px 3px 6px #000;
}

.loginButton:active {
  background-image: url("../assets/img/buttons/ButtonClick.webp");
  color: darkgoldenrod;
  text-shadow: 3px 3px 6px #000;
}

.LoginIcon {
	width: 16px;
	height: 16px;
	margin-right: 5px;
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.LORMascotIcon {
	width: 64px;
	height: 64px;
	/*position: relative;
	left: 50%;
	transform: translate(-50%);*/
	margin-bottom: 10px;
}

.LORQuestionMark {
	background-image: url("../assets/img/icons/LOR-QuestionMark.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.LORSucess {
	background-image: url("../assets/img/icons/LOR-Sucess.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.LORErrorAngry {
	background-image: url("../assets/img/icons/LOR-ErrorAngry.webp");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.aboutChangeLogContainer {
	padding-left: 20px;
    padding-right: 30px;
    /* width: 100%; */
    display: flex;
    border: 1px solid red;
}

.aboutChangeLog {
	width: 100%;
    overflow: scroll;
    scrollbar-width: none;
    position: relative;
}

/* Char top bar */
.TopBar {
	background-color: gray;
	padding: 0px 0px 0px 0px;
	height: 50px;
	background-image: url("../assets/img/background/TopBarBackground.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.TopBarGameDate {
    user-select: none;
    width: 100px;
    position: fixed;
    top: 5px;
    right: 60px;
    background: rgba(0, 0, 0, 0.7);
    color: rgb(0, 255, 0);
    font-family: monospace;
    font-size: 12px;
    padding: 4px 6px;
}

.TopBarGameDayPeriod {
    user-select: none;
    width: 35px;
    height: 35px;
    position: fixed;
    top: 5px;
    right: 5px;
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	background-position: center;
}

.morningPeriodIcon { background-image: url("../assets/img/icons/morning.webp"); }
.dayPeriodIcon { background-image: url("../assets/img/icons/day.webp"); }
.eveningPeriodIcon { background-image: url("../assets/img/icons/evening.webp"); }
.nightPeriodIcon { background-image: url("../assets/img/icons/night.webp"); }

/* Left / drop down char menu */
.LeftMenu {
	display: none;
	position: fixed;
	top: 0px;
	left: 40px;
	/*height: 300px;*/
	height: auto;
	overflow: auto;
	width: auto;
	z-index: 999;
	background-color: rgba(19,137,95,0.8);
}

.CharMenuItem {
	background-color: rgba(0,0,0,0.8);
	color: white;
	cursor: pointer;
	font-weight: 300;
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	
	transition: all 0.3s ease;
	font-weight: bold;
}

/* Top bar menu button */
.TopBarMenuButton {
	float: left;
	background-color: gray;
	padding: 0px 0px 0px 0px;
	height: 40px;
	width: 70px;
	background-image: url("../assets/img/buttons/MenuIcon.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.TopBarCharContainer {
	height: 50px;
    position: absolute;
    width: 100%;
}

.CharTopBarMenuIcon {
	float: left;
	padding: 0px 0px 0px 0px;
	height: 40px;
	width: 40px;
	background-position: center;
	background-size: 80%, 100%;
	background-repeat: no-repeat;
}

.TopMenuDebugger {
	float: left;
	background-color: antiquewhite;
	padding: 0px 0px 0px 0px;
	height: 35px;
	/*width: 40px;*/
	border: 1px solid red;
	position: absolute;
    left: 40px;
	display: flex;
    align-content: center;
    flex-wrap: wrap;
	padding-left: 2px;
    padding-right: 2px;
    font-weight: bold;
}

.TopMenuDebuggerButton {
    background-color: antiquewhite;
    padding: 0px 0px 0px 0px;
    height: 35px;
    /* width: 40px; */
    border: 1px solid red;
    position: absolute;
    right: 0px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    padding-left: 2px;
    padding-right: 2px;
    font-weight: bold;
}

.CharTopBarMenuContainer {
	display: none;
	position: absolute;
	width: 40px;
	top: 40px;
	left: 0px;
	height: auto;
	overflow: auto;
	z-index: 999;
	background-color: rgba(19,137,95,0.8);
}

.TopBarBuilderContainer {
	display: none;
	box-sizing: border-box;
	height: inherit;
	width: 100%;
	height: 40px;
}

.BuilderBoxMaterialContainer {
	display: none;
	position: absolute;
	width: 100%;
	/*height: 100%;*/
	top: 40px;
    left: 0px;
}

.BuilderMaterialBoxSelector {
    position: absolute;
    width: 100%;
    display: block;
	box-sizing: border-box;
}

.MaterialSelectionCatBox {
	width: 50px;
	height: 50px;
	background-image: url("../assets/img/background/BoxContainerActiveGrayEmpty.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.MaterialSelectionBox{
	float: left;
	width: 50px;
	height: 50px;
	background-image: url("../assets/img/background/BoxContainerActiveGrayEmpty.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.TopBarBuilderBox {
	border: 1px solid black;
	float: left;
	box-sizing: border-box;
	width: 40px;
	height: inherit;
	box-sizing: border-box;
	background-image: url("../assets/img/background/CharCreationBox.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.buildSettings {
	border: 1px solid black;
	float: right;
	width: 40px;
	height: inherit;
	box-sizing: border-box;
	background-image: url("../assets/img/background/CharCreationBox.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.buildSettingsIcon {
	float: left;
	box-sizing: border-box;
	width: 40px;
	height: inherit;
	box-sizing: border-box;
	background-position: center;
	background-image: url("../assets/img/icons/Settings.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.TopBarBuilderSelectedTool {
	border: 1px solid black;
	width: 40px;
	height: inherit;
	box-sizing: border-box;
	background-position: center;
	background-image: url("../assets/img/icons/Toolbox.png");
	background-size: 70% 70%; 
	background-repeat: no-repeat;
}

.BuilderBoxShowLayers {
	display: none;
	position: absolute;
	background-color: white;
	top: 0px;
	left: 0px;
	z-index: 10;
}

.builderShowLayersBox {
	border: 1px solid black;
	width: 16px;
	height: 16px;
	background-size: 100% 100%; 
}

.Settings {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/Setting_Main_Icon.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.AdminTool {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/Admin.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.AddTileTool {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/plus.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.EditTileTool {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/Toolbox.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.BuildTool {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/Build.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.RemoveTool {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/Eraser.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.RemoveAllTool {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/delete.gif"); background-size: 80% 80%; background-repeat: no-repeat;
}

.SaveTool {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/save.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.CancelTool {
	height: 40px;
	background-position: center;
	background-image: url("../assets/img/icons/cancel.png"); background-size: 80% 80%; background-repeat: no-repeat;
}

.TopBarAdminTileMenu {
	display: none;
	position: absolute;
	width: 40px;
	top: 40px;
	left: 40px;
	height: auto;
	overflow: auto;
	z-index: 999;
	background-color: rgba(19,137,95,0.8);
}

.AdminAddTileTopBar {
	/*border: 1px solid black;*/
	height: 55px;
	width: 100%;
	padding: 10px;
}

.AdminAddTileSettings {
	/*border: 1px solid red;*/
	width: 100%;
}

.AdminAddTileUploadBox {
	height: 50px;
	width: 50px;
	float: left;
	background-position: center;
	background-image: url("../assets/img/background/BoxContainerActiveGrayEmpty.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.AdminAddTileUploadBoxNext {
	height: 50px;
	width: 50px;
	float: left;
	background-position: center;
	background-image: url("../assets/img/icons/next.png"); background-size: 50%; background-repeat: no-repeat;
}

.Uploadable {
	background-image: url("../assets/img/icons/deliver.png"), url("../assets/img/background/BoxContainerActiveGrayEmpty.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.TileEditorReturn {
	padding: 10px;
}

.AdminAddTileUploadIterable {
	display: none;
}

.AdminAddTileSaveBox {
	height: 50px;
	width: 50px;
	position: absolute;
	right: 10px;
	background-image: url("../assets/img/icons/save.png), url("../assets/img/background/BoxContainerActiveGrayEmpty.png);
	background-size: 70%, 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.AdminAddTileBoxContainer {
	/*border: 1px solid green;*/
	width: 100%;
	padding-left: 10px;
	height: 20px;
}

.AdminAddTileBoxTitle {
	/*border: 1px solid green;*/
	width: 30%;
	height: 20px;
	float: left;
}

.AdminSelectBox {
	width: 90%;
}

.AdminAddTileBoxSelect {
	/*border: 1px solid green;*/
	width: 70%;
	height: 20px;
	float: left;
}

.TopBarBuilderMenu {
	display: none;
	position: absolute;
	width: 40px;
	top: 40px;
	left: 0px;
	height: auto;
	overflow: auto;
	z-index: 999;
	background-color: rgba(19,137,95,0.8);
}

.TopBarBuilderSettingsMenu {
	display: none;
	position: absolute;
	width: 40px;
	top: 40px;
	right: 0px;
	height: auto;
	overflow: auto;
	z-index: 999;
	background-color: rgba(19,137,95,0.8);
}

.TopBarBuilderBoxMaterialContainer {
	border: 1px solid black;
	float: left;
	box-sizing: border-box;
	height: inherit;
	background-image: url("../assets/img/background/CharCreationBox.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.TopBarBuilderBoxMaterial {
	float: left;
	margin-left: 5px;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	background-image: url("../assets/img/background/BoxContainerActiveGrayEmpty.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.TopBarBuilderBoxMaterialQuantity {
	float: left;
	display: flex;
	align-items: center;
	padding: 15px;
    font-size: 14px;
    font-weight: bold;
	color: white;
	margin-left: 5px;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	background-image: url("../assets/img/background/BoxContainerActiveGray.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.MaterialSelectionCategoriesContainer {
	float: left;
	width: 50px;
	height: 100%;
	overflow: hidden;
	background-image: url("../assets/img/background/CodexPictrueFrame.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.MaterialSelectionContainer {
	float: left;
	width: 100%;
	overflow-y: scroll;
	background-color: #787878cc;
	padding-left: 5px;
    padding-right: 5px;
}

.MaterialSelectionEnvSelector {
	height: 40px;
	width: 100%;
	overflow: hidden;
	background-image: url("../assets/img/background/CharCreationBox.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.MaterialSelectionEnvSelectorList {
	display: none;
	position: absolute;
	width: inherit;
	right: 0px;
	height: auto;
	overflow: auto;
	z-index: 999;
	background-color: rgba(19,137,95,0.8);
}

.MaterialSelectionEnvSelectorListItem {
	border: 1px solid black;
	display: flex;
    height: 40px;
    border: 1px solid black;
    flex-direction: column;
    justify-content: space-around;
	box-sizing: border-box;
}

.EnvName {
	display: flex;
    height: 40px;
    flex-direction: column;
    justify-content: space-around;
}

.EnvListIcon {
    width: 40px;
    height: 40px;
    float: right;
    position: relative;
    top: -40px;
    background-position: center;
    background-image: url("../assets/img/icons/Receiver.png");
    background-size: 80% 80%;
    background-repeat: no-repeat;
}

.MaterialSelectionEnvPage {
	border: 1px solid black;
	display: none;
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-image: url("../assets/img/background/CodexPictrueFrame.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.MainCharSelectionContainer {
	width: 100%;
	height: 100%;
	background-image: url("../assets/img/background/SkillTreeBG.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

/* Char selection bootom bar */
.CharSelectionBottomBar {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: gray;
	padding: 0px 0px 0px 0px;
	height: 40px;
	background-image: url("../assets/img/background/TopBarBackground.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionBox {
    width: 100%;
    float: left;
    font-size: 10px;
    border: 0px;
    background-image: url("../assets/img/background/TransparentCharResumeBG.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 15px;
}

.CharSelectionContainer {
	position: absolute;
    display: flex;
    float: left;
    width: 100%;
    height: 100%;
    /* margin-right: 50px; */
    overflow: hidden;
    background-image: url("../assets/img/background/CodexPictrueFrame.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

.CharSelectionContainerCentralizer {
	margin-left: auto;
	margin-right: auto;
}


.currentPage {
	display: none;
}

.CharSelectionPageButton {
	position: relative;
	display: flex;
	float: left;
	border: 1px solid black;
	width: 40px;
	height: 40px;
	text-align: center;
	align-items: center;
	vertical-align: middle;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: bold;
}

.MainTextVerticalSpacing {
	padding-top: 5px;
	padding-bottom: 5px;
}

.CharSelectionPictureBox {
	border: 1px solid black;
	width: 68px;
	padding: 15px;
	background-image: url("../assets/img/background/BoxContainerBrown.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionAttributes {
	display: flex;
	align-items: center;
	width: 50%;
}

.CharSelectionAttributesResume {
	display: flex;
	align-items: center;
	width: 100%;
}

/* Test */
.CharSelectionAttributesTextBar {
	border: 1px solid green;
	display: block;
	position: absolute;
	width: 50%;
	height: 10px;
}

.CharSelectionBoxContainer {
	position: relative; 
	height: 100%;
}

.CharSelectionOptions {
	position: relative;
	bottom: 0;
	text-align: right;
	width: 100%;
}

.CharSelectionAttributesIcon {
	width: 16px;
	height: 16px;
	margin-right: 5px;
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.CharSelectionButton {
	width: 32px;
	height: 32px;
	margin: 5px;
    margin-left:auto;
    margin-right:auto;
	background-size: 80% 80%; 
	background-repeat: no-repeat;
	border: 1px solid black;
	border-radius: 5px;
	background-color: lightslategrey;
	background-position: center;
}

.CharSelectionAttributesButtons {
	width: 24px;
	height: 24px;
	margin-right: 5px;
}

.CharSelectionContainerBar {
	border-radius: 25px;
	border: 1px solid black;
	height: 10px;
	width: 100%;
	background-image: url("../assets/img/background/BlackBar.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionExpBar {
	border-radius: 25px;
	border-right: 1px solid black;
	height: 10px;
	background-image: url("../assets/img/background/YellowBar.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionHPBarHigh {
	border-radius: 25px;
	border-right: 1px solid black;
	height: 10px;
	background-image: url("../assets/img/background/GreenBar.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionHPBarMedium {
	border-radius: 25px;
	border-right: 1px solid black;
	height: 10px;
	background-image: url("../assets/img/background/OrangeBar.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionHPBarLow {
	border-radius: 25px;
	border-right: 1px solid black;
	height: 10px;
	background-image: url("../assets/img/background/RedBar.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionStatusBar {
	border-radius: 25px;
	border-right: 1px solid black;
	height: 10px;
	background-image: url("../assets/img/background/GreenBar.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionBoxResumeContainerMaster {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}

.CharSelectionBoxDeleteContainerMaster {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}

.CharSelectionBoxDeleteContainer {
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	position: absolute;
	width: 80%;
	height: 80%;
	margin: 10%;
	display: block;
	background-image: url("../assets/img/background/GreyPannel.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharDeleteConfirmationTextBox {
	width: 100%;
    height: 100%;
    display: flex;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    color: white;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

.CharSelectionContainerBarText {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 10px;
	box-sizing: border-box;
	float: left;
}

.CharSelectionBoxResumeContainer {
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	position: absolute;
	width: 80%;
	height: 80%;
	margin: 10%;
	display: block;
	/*background-image: url("../assets/img/background/GreyPannel.png"); background-size: 100% 100%; background-repeat: no-repeat;*/
}

.CharSelectionAttributesOptions {
	margin-top: 15px;
    bottom: 15px;
    position: absolute;
    width: inherit;
}

.CharSelectionBoxContentPicture {
	/*border: 1px solid red;*/
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	position: relative;
	bottom: 0;
	width: 90%;
	height: 50%;
	margin-top: 5%;
	margin-left: 5%;
	margin-right: 5%;
	padding: 15px;
	display: block;
	box-sizing: border-box;
}

.CharPicture {
	width: 68px;
	height: 68px;
	background-size: 100% 100%; 
	background-repeat: no-repeat;
}

.CharSelectionBoxContent {
	position: relative;
	bottom: 0;
	width: 90%;
	height: 35%;
	margin-left: 5%;
	margin-right: 5%;
	padding: 15px;
	display: block;
	box-sizing: border-box;
	background-image: url("../assets/img/background/GreyPannel.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionBoxNewChar {
	display: flex;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	align-items: center;
	vertical-align: middle;
}

.CharSelectionBoxNewCharButton {
	width: 100%;
	text-align: center;
}

.CharSelectionBoxOptions {
	position: relative;
	bottom: 0;
	width: 90%;
	height: 10%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
	padding: 15px;
	display: block;
	box-sizing: border-box;
	background-image: url("../assets/img/background/GreyPannel.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharSelectionBoxContentName {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	font-weight: bold;
	color: white;
}

.CharSelectionBoxContentNameLevel {
	box-sizing: border-box;
	float: left;
	width: 50%;
	text-align: center;
	font-weight: bold;
	color: white;
}

.CharSelectionBoxResumeTable {
	font-weight: bold;
	color: white;	
}

.CharSelectionBoxResumeTable td  {
	font-weight: bold;
	color: white;	
	padding-top: 5px;
}

.CharSelectionOptionButtonDelete {
	width: 100%;
	text-align: left;
}

.CharSelectionOptionButtonSelect {
	width: 100%;
	text-align: right;
}

.CharSelectionOptionButtonBack {
	width: 100%;
	text-align: center;
}

.CharCreationContainerMaster {
	/*border: 1px solid red;*/
	position: absolute;
	width: 100%;
	height: -webkit-fill-available;
	display: none;
	box-sizing: border-box;
	background-image: url("../assets/img/background/GreyPannel.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharCreationClassBox {
	position: relative;
	display: flex;
	float: left;
	width: 50%;
	height: 150px;
	padding-top: 5px;
    padding-left: 5px;
	box-sizing: border-box;
	background-image: url("../assets/img/background/CharCreationBox.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharCreationInnerPictureContainerBox {
	/*border: 1px solid red;*/
	position: relative;
	float: left;
	padding-left: 5px;
	/*height: 150px;*/
	box-sizing: border-box;
}

.CharCreationInnerContainerBox {
	/*border: 1px solid red;*/
	position: relative;
	float: left;
	width: 100%;
	/*height: 150px;*/
	padding-right: 5px;
	padding-left: 5px;
	box-sizing: border-box;
}

.CharCreationResumeContainerBox {
	/*border: 1px solid red;*/
	background-color: white;
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	padding: 5px;
	box-sizing: border-box;
	background-image: url("../assets/img/background/CodexPictrueFrame.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharCreationResumeBox {
	border: 0px;
}

.CharCreationResumeBoxText {
	padding: 5px;
	text-align: center;
	font-weight: bold;
	color: black;
}

.CharCreationMoveBoxContainer {
	padding: 5px;
}

.CharCreationMoveBox{
	width: 50px;
	height: 50px;
	padding: 9px;
	box-sizing: border-box;
	background-image: url("../assets/img/background/BoxContainerBrown.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharCreationMoveIcon{
	width: 100%;
	height: 100%;
	padding: 5px;
	box-sizing: border-box;
}

.CharCreationPictureBox {
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	background-image: url("../assets/img/background/BoxContainerBrown.png"); background-size: 100% 100%; background-repeat: no-repeat;
}

.CharCreationAttributes {
	display: flex;
	align-items: center;
	width: 95%;
}

.CharCreationAttributesIcon {
	width: 16px;
	height: 16px;
	margin-right: 5px;
}

.CharCreationResumeAttributesIcon {
	width: 16px;
	height: 16px;
	margin-right: 5px;
}

.CharCreationClassText {
	text-align: center;
	font-weight: bold;
	color: white;
}

.CharCreationNameInput {
	border: 1px solid blue;
	height: 20px;
	width: 100%;
	padding-top: 5px;
	text-align: center;
	background-color: black;
	color: white;
}

.CharCreationSubmitButton {
	border: 1px solid blue;
	height: 20px;
	width: 100px;
	padding-top: 5px;
	text-align: center;
	background-color: black;
	color: white;
}

.KeyboardKeyLine {
	display: inline-flex;
}

.KeyboardKey {
	border: 1px solid black;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	margin: 2px;
	text-transform: lowercase;
	font-weight: bold;
}

.KeyboardShiftKey {
	width: 25px;
	height: 25px;
	background-image: url("../assets/img/icons/up.png"); background-size: 70% 70%; background-repeat: no-repeat;
	background-position: center;
}

.KeyboardBackSpaceKey {
	width: 25px;
	height: 25px;
	background-image: url("../assets/img/icons/back.png"); background-size: 70% 70%; background-repeat: no-repeat;
	background-position: center;
}

.KeyboardBackClearKey {
	width: 25px;
	height: 25px;
	background-image: url("../assets/img/icons/cancel.webp"); background-size: 70% 70%; background-repeat: no-repeat;
	background-position: center;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

.KeyboardKeySpace {
	border: 1px solid black;
	width: 200px;
	height: 25px;
	display: flex;
	align-items: center;
	margin: 2px;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.CharCreationOptionButtonBack {
	position: relative;
	display: flex;
	float: left;
	border: 1px solid black;
	width: 40px;
	height: 40px;
	text-align: center;
	align-items: center;
	vertical-align: middle;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: bold;
	background-image: url("../assets/img/icons/back.png"), url("../assets/img/background/BoxContainerActiveGrayEmpty.png"); background-size: 100% 100%; background-repeat: no-repeat;
	background-size: 60%, 100%;
    background-position: center;
}

.PlayerChar {
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	transition: transform 0.25s linear, filter 0.5s ease;
	will-change: transform;
	
	/* valores default (dia) */
	--char-brightness: 100%;
	--char-contrast: 100%;
	--char-saturate: 100%;
	--char-sepia: 0%;

	filter:
		brightness(var(--char-brightness))
		contrast(var(--char-contrast))
		saturate(var(--char-saturate))
		sepia(var(--char-sepia));
}

.PlayerCharWalkingStartStop { transition: transform 0.4s linear, filter 0.5s ease !important; }

.PlayerCharReflection{
	transform: scaleY(-1);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	animation: charReflectionFadeIn 0.1s ease forwards, charReflectionIdle 3s ease-in-out infinite 0.25s;
}

@keyframes charReflectionFadeIn{
	from{
		opacity: 0;
	}

	to{
		opacity: 0.6;
	}
}

@keyframes charReflectionIdle{
	0%{
		opacity: 0.5;
	}

	50%{
		opacity: 0.8;
	}

	100%{
		opacity: 0.5;
	}
}

.cellLayerReflection {
	position: absolute;
	opacity: 0.6;
    left: 0px;
    transform: scaleY(-1);
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
	pointer-events: none;
	animation: cellReflectionIdle 6s ease-in-out infinite;
}

@keyframes cellReflectionIdle{
	0%{
		opacity: 0.5;
	}

	50%{
		opacity: 0.8;
	}

	100%{
		opacity: 0.5;
	}
}

/*
.PlayerChar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	background-size: inherit;
	background-repeat: inherit;

	pointer-events: none;
	z-index: -1;
	transition: transform 0.25s linear, filter 0.5s ease;
}
*/

.MessageImageContainer {
	width: 100%;
	height: 100%;
	background: round;
}

.PlayerCharBaloonSpeech {
	animation: fadeInAnimation ease 0.250s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

	position: absolute;
	border: 1px solid black;
	background-color: #f3db99;
	border-radius: 10px;
	padding: 5px;
}

.PlayerCharBaloonSpeech:after {
	content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top-color: #f3db99;
    border-bottom: 0;
    border-left: 0;
    margin-left: -2px;
    margin-bottom: -9px;
}

.PlayerCharIteractionIcon {
	animation: fadeInAnimation ease 0.250s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

	position: absolute;
	
	background-image: url("../assets/img/icons/inMenuIcon.webp"); 
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	background-position: center;
	
	top: 0px;
    right: 5px;
    width: 20px;
    height: 20px;
}

.PlayerCharIteractionIconNPC {
	animation: fadeInAnimation ease 0.250s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

	position: absolute;
	
	background-image: url("../assets/img/icons/baloonSpeech.webp"); 
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	background-position: center;
	
	top: 0px;
    right: 5px;
    width: 20px;
    height: 20px;
}

.PlayerCharIteractionIconNPC.fade-out {
    animation: fadeOutAnimation ease 0.25s;
    animation-fill-mode: forwards;
}

.PlayerCharIteractionIcon.fade-out {
    animation: fadeOutAnimation ease 0.25s;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

@keyframes fadeOutAnimation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
     }
}

.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;*/
}

.GameContent {
	width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    overflow-x: hidden;	
}

.MapContainer {
	width: 100%;
    display: flex;
    flex: 1;
    overflow: hidden;
	background-image: url("../assets/img/background/BookPageBlank.webp");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
}

.pixelated {
	image-rendering: pixelated;
}

.MapChars{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
}

.gameModule {
	display: none;
    /*display: flex;*/
    flex: 1;
    overflow: hidden;
    position: absolute;
    /* top: 50px; */
    width: 100%;
    background-color: gray;
}

/* Char selection bootom bar */
.SettingsTopBar {
	height: 40px;
	position: absolute;
	width: 100%;
	display: none;
}

.SettingsTopBarMenuIcon {
	float: left;
	padding: 0px 0px 0px 0px;
	height: 40px;
	width: 40px;
	background-position: center;
	background-size: 60%, 100%;
	background-repeat: no-repeat;
}

.SettingsContent {
	position: absolute;
	top: 40px;
	width: 100%;
}

.SettingsItemContainer {
	width: 100%;
	height: 50px;
}

.SettingsItemText {
	float: left;
    width: 35%;
    height: 50px;
	color: white;
	font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.SettingsItem {
	float: left;
    width: 65%;
	height: 50px;
	display: flex;
    align-items: center;
    justify-content: flex-start;
}

.SettingsButton {
	position: relative;
	display: flex;
	float: left;
	border: 1px solid black;
	width: 40px;
	height: 40px;
	text-align: center;
	align-items: center;
	vertical-align: middle;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: bold;
	background-image: url("../assets/img/background/BoxContainerActiveGrayEmpty.png"); background-size: 70%, 100%; background-repeat: no-repeat;
    background-position: center;
	margin-right: 5px;
}

.BuildDoorSetKeyText {
	width: 100%;
	height: 40px;
	color: white;
	font-weight: bold;
	display: flex;
	align-items: center;
	vertical-align: middle;
	box-sizing: border-box;
	justify-content: space-around;
}

/* div's to hide */
.displayNone { display: none !important; }