/* Titles */
@font-face {
    font-family: 'MedievalSharp';
    src: url('../assets/fonts/MedievalSharp-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Text */
@font-face {
    font-family: 'CrimsonText';
    src: url('../assets/fonts/CrimsonText-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Text color */
.textBlue { color: #4c91da; }
.textGreen { color: #49ca49; }
.textRed { color: #d96666; }

/* Text style */
.smallFont { font-size: smaller; }
.textBold { font-weight: bold; }
.textShadow { text-shadow: 0px 0px 10px #000000; }
.textOutline { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000; }

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;
	font-family: 'CrimsonText', serif;
	cursor: url('../assets/blueCursor.webp'), auto !important;
}

/* CRT Filter */
.crt-filter{
    position: relative;
    overflow: hidden;

	filter:
        brightness(1.15)
        contrast(1.00)
        saturate(1.00)
        drop-shadow(-0.5px 0 rgba(255,0,0,.15))
        drop-shadow(0.5px 0 rgba(0,255,255,.15));

    animation: crt-flicker .42s infinite alternate;
}

.crt-filter::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:9998;

    /* Vinheta */
    background:
        radial-gradient(
            ellipse at center,
            transparent 58%,
            rgba(0,0,0,.22) 100%
        );

    mix-blend-mode:multiply;
}

.crt-filter::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:9999;

    opacity:.45;

    background:
        /* Scanlines */
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.04) 0px,
            rgba(255,255,255,.04) 1px,
            rgba(0,0,0,.18) 2px,
            rgba(0,0,0,.18) 3px
        ),

        /* Leve brilho horizontal */
        linear-gradient(
            rgba(255,255,255,.02),
            rgba(255,255,255,0)
        );

    mix-blend-mode:multiply;
}

@keyframes crt-flicker{
    0%{
        filter:
            brightness(1.13)
            contrast(1.00)
            saturate(1.00);
    }

    100%{
        filter:
            brightness(1.15)
            contrast(1.05)
            saturate(1.03);
    }
}


.title{
    font-family: 'MedievalSharp', cursive;
}

.subTitle{
    font-family: 'MedievalSharp', cursive;
	color: wheat;
}

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


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

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

/* Top bar menu */
.menu-container {
	float: left;
    /* margin-left: 5px; */
    margin-top: -5px;
    width: 60px;
    height: 60px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../assets/img/background/menuIconContainer.webp);
	
}

.dropdown-menu {
	position: absolute;
    z-index: 10;
    max-height: 0;
    overflow: auto;
    scrollbar-width: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.3s ease, opacity 0.2s ease, transform 0.2s ease;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../assets/img/background/settingsBG.webp);
    border-radius: 5px;
    /* margin-left: -5px;*/
}

.dropdown-toggle {
	width: 60px;
	height: 60px;
	
	background-size: 60% 60%;
	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");}

.dropdown-menu.open {
	max-height: stretch;
    opacity: 1;
    transform: translateY(0);
    z-index: 51;
    /* margin-top: 5px; */
    padding: 5px;
}

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

.menuItemContext {
	display: flex;
	align-items: center;
}

.charTopBarMenuItemText {
	height: 30px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    font-weight: bold;
    font-size: larger;
    letter-spacing: 1px;
    color: #edc06b;
	pointer-events: none;
	margin-left: 5px;
}

.charTopBarMenuIconContainer {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 25px;
    height: 25px;
    margin: 5px;
	pointer-events: none;
	/*filter: drop-shadow(1px 0 0 gray) drop-shadow(-1px 0 0 gray) drop-shadow(0 1px 0 gray) drop-shadow(0 -1px 0 gray) contrast(125%) brightness(90%);*/
}

.charTopBarMenuAccessIcon {
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    pointer-events: none;
}

/* Top bar menu icons */
.charTopBarMenuIcon { background-image: url("../assets/img/icons/menuItemIcon.webp"); }
.charTopBarMenuInstallIcon { background-image: url("../assets/img/icons/charMenuInstallIcon.webp"); }
.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/backpack.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"); }
.charTopBarMenuDiscordIcon { background-image: url("../assets/img/icons/charDiscordMenuIcon.webp"); }
.charTopBarMenuChangelogIcon { background-image: url("../assets/img/icons/charChangelogMenuIcon.webp"); }
.charTopBarMenuLogoffIcon { background-image: url("../assets/img/icons/charLogoffMenuIcon.webp"); }

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

/* Element relations table */
.elementRelations{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.elementTitle{
    color:#FFF;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    padding:8px;
    border-radius:6px;
}

.relationGroup{
    display:flex;
	align-items: center;
    gap:5px;
}

.relationGroupList {
	flex-direction:column;
	flex-wrap: wrap;
    align-content: center;
}

.relationGroupInline {
	align-items: center;	
}

.relationTitle{
    margin-left: 5px;
	margin-right: 5px;
}

.relationTitleList {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	align-items: center;
}

.relationItem{
    display:flex;
    align-items:center;
    gap:8px;
}

.relationIcon{
	margin: 2px;
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(1px 0 0 gray) drop-shadow(-1px 0 0 gray) drop-shadow(0 1px 0 gray) drop-shadow(0 -1px 0 gray);
}

.relationIcon.strong{
    background:#28a745;
}

.relationIcon.weak{
    background:#d32f2f;
}

.relationIcon.null{
    background:#555;
}

.elementBadge{
    display: flex;
    color: #FFF;
    border-radius: 5px;
    padding: 4px;
    min-width: 80px;
    text-align: center;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
}

/* Element icons */
.elementDisplayIcon{
	margin-left: 5px;
    width: 15px;
    height: 15px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    pointer-events: none;
    filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);
}

.element-icon-Fire { background-image: url("../assets/img/elements/Fire.webp"); }
.element-icon-Bug { background-image: url("../assets/img/elements/Bug.webp"); }
.element-icon-Dark { background-image: url("../assets/img/elements/Dark.webp"); }
.element-icon-Eletric { background-image: url("../assets/img/elements/Eletric.webp"); }
.element-icon-Fighting { background-image: url("../assets/img/elements/Fighting.webp"); }
.element-icon-Flying { background-image: url("../assets/img/elements/Flying.webp"); }
.element-icon-Wind { background-image: url("../assets/img/elements/Flying.webp"); }
.element-icon-Ghost { background-image: url("../assets/img/elements/Ghost.webp"); }
.element-icon-Grass { background-image: url("../assets/img/elements/Grass.webp"); }
.element-icon-Ice { background-image: url("../assets/img/elements/Ice.webp"); }
.element-icon-Neutral { background-image: url("../assets/img/elements/Neutral.webp"); }
.element-icon-Poison { background-image: url("../assets/img/elements/Poison.webp"); }
.element-icon-Psychic { background-image: url("../assets/img/elements/Psychic.webp"); }
.element-icon-Rock { background-image: url("../assets/img/elements/Rock.webp"); }
.element-icon-Steel { background-image: url("../assets/img/elements/Steel.webp"); }
.element-icon-Water { background-image: url("../assets/img/elements/Water.webp"); }
.element-icon-Bone { background-image: url("../assets/img/elements/Bone.webp"); }
.element-icon-Ground { background-image: url("../assets/img/elements/Ground.webp"); }
.element-icon-Holy { background-image: url("../assets/img/elements/Holy.webp"); }
.element-icon-Blood { background-image: url("../assets/img/elements/Blood.webp"); }


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

/* Visual effects */
.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);
	z-index: 51;
}

@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);
	}
}

/* Map cell/tile */
.cellLayerContainer {
	pointer-events: none;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
	transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.cellLayerContainer.blur {
	filter: blur(1px) brightness(75%);
	transform: scale(1.1);
}

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

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

/* Map cell/tile effect layer */
.fxLayerEffect {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: filter 0.5s ease;
}

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

/* Changelog */
.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;
	display: flex;
    align-items: center;
}

.changeLogEventText {
    position: relative;
}

/* Map cell/tile layer */
.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);
}

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

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

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

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

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

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

/* Iteractive content popup */

.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: stretch;
    max-width: min(400px, 100%);
    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;
}

/* Item resume popup */
.resumePopupContainer {
	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;
}

.resumePopup {
	/*margin: 30px;*/
	border-radius: 10px;
	min-width: 250px;
	max-width: min(350px, 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.itemResumePopupBG { background-image: url("../assets/img/background/lootBoxItemContainer.webp"); }
.elementResumePopupBG { background-image: url("../assets/img/background/npcShopMainContainer.webp"); }

.resumePopupInfo {
    border: 1px solid #734f00;
    outline: 2px solid #572a0a;
    border-radius: 5px;
    margin: 5px;
	/*width: 100%;*/
	flex-direction: column;
    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;
}

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

.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;
	filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);
}


.npc-item-icon {
	width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-right: 5px;
	pointer-events: none;
	filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);
}

.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 pannel icons */
.item-icon-gold { background-image: url("../assets/img/icons/gold.webp"); }
.item-icon-dragonTear { background-image: url("../assets/img/icons/dragonTear.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-drop-all { background-image: url("../assets/img/icons/dropAll.webp"); }
.item-icon-deposit { background-image: url("../assets/img/icons/deposit.webp"); }
.item-icon-deposit-all { background-image: url("../assets/img/icons/depositAll.webp"); }
.item-icon-equip { background-image: url("../assets/img/icons/thrash.webp"); }
.item-icon-accept { background-image: url("../assets/img/icons/checkV2.webp"); }
.item-icon-cancel { background-image: url("../assets/img/icons/cancelV2.webp"); }
.item-icon-forbiden { background-image: url("../assets/img/icons/forbiden.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"); }
.item-icon-return { background-image: url("../assets/img/icons/return.webp"); }
.item-icon-star { background-image: url("../assets/img/icons/star.webp"); }
.item-icon-check { background-image: url("../assets/img/icons/check.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"); }
.score-icon-plus { background-image: url("../assets/img/icons/plus.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%;
	max-width: min(400px, 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: 100vw;
	max-width: 400px;
    height: 50%;
    max-height: 400px;
    flex-wrap: nowrap;
}

.storageLootContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
	width: 100%;
	max-width: min(400px, 100vw);
    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;
	padding-top: 5px;
    padding-bottom: 5px;
}

.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: stretch;
    overflow: scroll;
    scrollbar-width: none;
    /* margin-top: 35px; */
    margin-top: 55%;
    /* margin-bottom: 35px; */
    margin-bottom: 55%;
}

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

/* Backpack popup */
.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: center;
    align-content: flex-start;
    flex: 1;
    margin-top: 5px;
    margin-left: 5%;
    margin-right: 5%;
    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;
}

/* NPC */
.npcSpeechOption {
	min-height: 30px;
	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%;
}

/* Game buttons */
.gameButton {
	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-size: 100% 100%;
    background-repeat: no-repeat;
    align-items: center;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
	letter-spacing: 1px;
}

.gameButton:hover {
    transform: translateY(-1px);
    filter:
        brightness(1.08)
        saturate(1.08)
        drop-shadow(12px 12px 12px rgba(0, 0, 0, 0.55));

    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}

.gameButton:active {
    transform: translateY(1px);
    filter: brightness(0.85) drop-shadow(6px 6px 6px rgba(0,0,0,.45));
}

.closeButton {
    /*position: absolute; */
    right: 0px;
    font-weight: bold;
    height: stretch;
    max-height: 40px;
    aspect-ratio: 1 / 1;
    /* margin: 0px; */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/buttons/close.webp);
    border-radius: 5px;
}

.closeButton:hover {
    filter:
        brightness(1.08)
        saturate(1.08);

    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}

.closeButton:active {
    transform: translateY(1px);
    filter: brightness(0.85) drop-shadow(6px 6px 6px rgba(0,0,0,.45));
}

/* Game button colors */
.gameButtonGreen { background-image: url("../assets/img/buttons/buttonGreen.webp"); }
.gameButtonBrown { background-image: url("../assets/img/buttons/buttonBrown.webp"); }
.gameButtonBlue { background-image: url("../assets/img/buttons/buttonBlue.webp"); }
.gameButtonRed { background-image: url("../assets/img/buttons/buttonRed.webp"); }

.disabled { filter: grayscale(100%); pointer-events: none; }

/* Message popup */
.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: 30vw;
    min-height: 30vh;
    max-height: 95vh;
    max-width: min(400px, 100vw);
    margin: 5px;
}

.logoffPopup {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding: 5px;
    font-size: medium;
    background-image: url(../assets/img/background/npcShopMainContainer.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-width: 30vw;
    min-height: 30vh;
    max-height: 95vh;
    max-width: min(400px, 100vw);
    margin: 5px;
	color: wheat;
}

.messagePopupText {
    width: 100%;
    height: 85%;
    padding: 5%;
    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 / PORTRAIT */
@media (orientation: portrait) {

	.pannelContainer {
        height: stretch;
		width: stretch;
    }
	
	.IteractiveContent {
		width: stretch;
		max-width: 100%;
	}

    .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;
	font-size: large;
}

.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;
	font-size: large;
}

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

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

/***************************************************
** Install game
***************************************************/
.installGameContainer {
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    background-image: url(../assets/img/background/pannelContainerBackground.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 10px;
    min-height: 300px;
	gap: 10px;
	max-height: 100%;
	max-width: 400px;
}

.installGameBanner {
	background-image: url(../assets/img/banner.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	width: 100%;
	aspect-ratio: 16/9;
}

.installGameTitle {
	width: 100%;
    text-align: center;
	letter-spacing: 1px;
	font-size: large;
    font-weight: bold;
    color: gold;
    text-shadow: 0px 0px 10px #000000;
}

.installGameInstructions {
	width: 100%;
	margin-left: 10px;
    margin-right: 10px;
    text-align: center;
	color: wheat;
    text-shadow: 0px 0px 10px #000000;
    text-align: center;
    letter-spacing: 1px;
}

.installGameTopic {
	color: white;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    width: 100px;
    justify-content: center;
    align-content: flex-start;
}

.installTopicIcon {
	width: 50px;
    height: 50px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    float: left;
    margin-bottom: 5px;
	filter: drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black);
}

.installPerkfastLoadIcon { background-image: url("../assets/img/icons/fastLoadIcon.webp"); }
.installPerkFullScreenIcon { background-image: url("../assets/img/icons/fullScreenIcon.webp"); }
.installPerkNotificationsIcon { background-image: url("../assets/img/icons/notificationsIcon.webp"); }
.installPerkUpdatesIcon { background-image: url("../assets/img/icons/updatesIcon.webp"); }
.installPerkDataUsageIcon { background-image: url("../assets/img/icons/dataUsageIcon.webp"); }
.installPerkMobileIcon { background-image: url("../assets/img/icons/mobileIcon.webp"); }
.installCompleteIcon { background-image: url("../assets/img/icons/installCompleteIcon.webp"); }

/***************************************************
** Modules container
***************************************************/
.pannelContainer {
    min-height: 0;
	max-height: 100%;
	min-width: min(400px, 100%);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 5px;
    border-radius: 5px;
	overflow: auto;
    scrollbar-width: none;
}

.pannelContainerWoodBG { background-image: url(../assets/img/background/pannelContainerBackground.webp); }
.pannelContainerskillTreeBG { background-image: url(../assets/img/background/skillTreeBG.webp); }

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

.pannelContainerTitle {
	width: stretch;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #fcd187;
    font-weight: bold;
	letter-spacing: 1px;
    font-size: large;
    text-shadow: 0px 0px 10px #000000;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black);
    align-items: center;
}

.pannelContainerTitleDarkBG { background-image: url(../assets/img/background/pannelContainerTitle.webp); }
.pannelContainerTitleWoodBG { background-image: url(../assets/img/background/TopBarBackground.webp); }
.pannelContainerTitleWoodSpiderWebsBG { background-image: url(../assets/img/background/TopBarBG.webp); }
.pannelContainerTitleWoodSteelBG { background-image: url(../assets/img/background/skillTreeBottomBar.webp); }

.pannelContainerSubTitle {
	width: 100%;
    height: 30px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: #fcd187;
    /*font-weight: bold;*/
	letter-spacing: 1px;
    font-size: larger;
    text-shadow: 0px 0px 10px #000000;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/subItemTitle.webp);
    filter: drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black);
}

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

.pannelContent {
    width: 100%;
    /*background-image: url(../assets/img/background/charAtributesBoxBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;*/
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

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

/***************************************************
** Char profile module
***************************************************/
.charProfileResumeContainer {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    font-size: larger;
    /* padding-bottom: 5px; */
    /*padding: 5px;*/
    /* margin-bottom: 5px; */
    color: wheat;
    /*background-image: url(../assets/img/background/charProfileResumeContainerBG.webp);*/
	background-image: url(../assets/img/background/charProfileSectionBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

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

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

.charProfileSection {
	color: wheat;
	background-image: url(../assets/img/background/charProfileResumeContainerBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.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: stretch;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: flex-start;
	margin-top: 10px;
    margin-bottom: 5px;
}

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

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

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

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

.charProfileBarContainer {
    font-family: Arial, sans-serif;
    width: 100%;
    border: 1px solid black;
    border-radius: 5px;
}

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

.charProfileExternBar {
    width: 100%;
    height: 15px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
	background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.charProfileResumeCombatAttrContainer {
	display: flex;
    /*height: 30px;*/
	/*margin-top: 5px;*/
    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;
	filter: drop-shadow(1px 0 0 gray) drop-shadow(-1px 0 0 gray) drop-shadow(0 1px 0 gray) drop-shadow(0 -1px 0 gray);
	/*background-color: #734f00;
    box-shadow: inset 4px 3px 4px rgb(0 0 0 / 50%);*/
}

.charProfileResumeAttributeIconBox {
    width: 25px;
    height: 25px;
    background-size: 75% 75%;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    flex-shrink: 0;
    background-color: #2f2929;
    filter: drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black);
    box-shadow: inset 1px 1px 1px 1px rgb(0 0 0 / 50%);
	border-radius: 5px;
}

.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 {
	margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.charProfileResumeTableContent {
	height: stretch;
	background-image: url(../assets/img/background/charProfileSectionBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	padding: 5px;
}

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


/**************************************
** Char equipment
**************************************/
.charEquipmentMainContainer {
    background-image: url(../assets/img/background/skillTreeBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 10px;
}

.charEquipmentResumeContainer {
	width: stretch;
    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/skillTreeBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 15px;
	border-radius: 5px;
}

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

.charEquipmentStatsDetailTitle {
	color: #d9c451;
}

.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: 70px;
    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/InventoryBox.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: 5px;
	pointer-events: none;
}

.charEquipmentItemContainerBox{
	width: 100%;
    height: 55px;
    background-image: url(../assets/img/background/InventoryBox.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;
}

.separator{
	width: 100%;
    height:1px;
    margin:2px 0;

    background:
    linear-gradient(
        90deg,

        rgba(0,0,0,0),

        rgba(90,70,55,.15) 8%,
        rgba(90,70,55,.80) 18%,

        rgba(90,70,55,1) 50%,

        rgba(90,70,55,.80) 82%,
        rgba(90,70,55,.15) 92%,

        rgba(0,0,0,0)
    );

    position:relative;
}

.separator:after{

    content:"";

    position:absolute;
    left:0;
    top:1px;

    width:100%;
    height:1px;

    background:
    linear-gradient(
        90deg,

        transparent,

        rgba(20,18,15,.10) 8%,
        rgba(20,18,15,.75) 18%,

        rgba(20,18,15,1) 50%,

        rgba(20,18,15,.75) 82%,
        rgba(20,18,15,.10) 92%,

        transparent
    );
}

/***************************************************
** Settings module
***************************************************/
.settingsContainer {
	display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 5px;
	border-radius: 5px;
	overflow: auto;
    scrollbar-width: none;
    max-height: 100%;
}

.settingsPannelBox {
    width: stretch;
    padding: 5px;
	padding-left: 10px;
    padding-right: 10px;
    color: wheat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/settingsSectionBox.webp);
    /*border: 1px solid #4a2f1b;*/
    border-radius: 5px;
}

.settings-subTitle {
	color: #e6bc5b;
    font-size: medium;
    font-weight: bold;
}

.settings-sub-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-left: 2px;
    margin-top: 15px;
    gap: 5px;
}

.settings-item {
	display: flex;
	flex-wrap: nowrap;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: larger;
	gap: 5px;
}

/* Icons */
.settings-icon {
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.settingsButton {
	display: flex;
    min-width: 60px;
    height: 25px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
	padding-left: 2px;
    padding-right: 2px;
}

.settingsButtonDefault { background-image: url(../assets/img/background/settingsButton.webp); }
.settingsButtonActive { background-image: url(../assets/img/background/settingsButtonActive.webp); }

.settings-icon-general { background-image: url(../assets/img/icons/settingsGear.webp); }
.settings-icon-language { background-image: url(../assets/img/icons/language.webp); }
.settings-icon-audio { background-image: url(../assets/img/icons/audio.webp); }
.settings-icon-music { background-image: url(../assets/img/icons/music.webp); }
.settings-icon-sfx { background-image: url(../assets/img/icons/sfx.webp); }
.settings-icon-gameplay { background-image: url(../assets/img/icons/gameplay.webp); }
.settings-icon-interface { background-image: url(../assets/img/icons/interface.webp); }
.settings-icon-textSpeed { background-image: url(../assets/img/icons/textSpeed.webp); }
.settings-icon-closeIcon { background-image: url(../assets/img/icons/closeIcon.webp); }
.settings-icon-brightness { background-image: url(../assets/img/icons/brightness.webp); }
.settings-icon-contrast { background-image: url(../assets/img/icons/contrast.webp); }
.settings-icon-effects { background-image: url(../assets/img/icons/effects.webp); }
.settings-icon-crtfilter { background-image: url(../assets/img/icons/crtfilter.webp); }

.settings-value {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    border-radius: 5px;
    width: 50px;
    background-color: #0d0d0d85;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
	color: #e3cea6;
    border: 1px solid #31261d;
}

.slider{
    --height: 8px;
    --thumb-size: 10px;
    position: relative;
    width: stretch;
    height: 25px;
    display: flex;
    align-items: center;
	margin-left: 10px;
	margin-right: 5px;
}

/* Barra preta */

.slider-bg{
    position:absolute;
    left:0;
    right:0;

    height:var(--height);

    background:
        linear-gradient(to bottom,
            #252525 0%,
            #121212 45%,
            #080808 100%);

    border:1px solid #050505;
    border-radius:20px;

    overflow:hidden;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.05),
        inset 0 -1px 2px rgba(0,0,0,.8);
}

/* Parte dourada */
.slider-fill{
    width:100%;
    height:100%;
    border-radius:20px;
    background:
        linear-gradient(to bottom,
            #f7dc84 0%,
            #d6ab47 45%,
            #b87d22 100%);

    box-shadow:
        inset 0 1px rgba(255,255,255,.35),
        inset 0 -1px rgba(0,0,0,.25),
        0 0 4px rgba(220,170,70,.35);
}

/* Losango */

.slider-thumb{
    position:absolute;
    width:var(--thumb-size);
    height:var(--thumb-size);
    transform:translate(-50%,0) rotate(45deg);
    border-radius:2px;
    background:
        linear-gradient(135deg,
            #fff6ca 0%,
            #efc765 45%,
            #b67d26 100%);

    border:2px solid #654213;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.35),
        0 0 5px rgba(0,0,0,.6);

    pointer-events:none;
    z-index:5;
}

/* Input invisível */

.slider input[type=range]{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
    margin:0;
    z-index:10;
	outline:none;
    border:none;
    box-shadow:none;
	background:transparent;
}

.slider input[type=range]:focus{
    outline:none;
}

.slider input[type=range]:focus-visible{
    outline:none;
}

.slider input[type=range]::-moz-focus-outer{
    border:0;
}

.settingsDropDown{
    position: relative;
    width: stretch;
    font-size: small;
    color: #d8d8d8;
    user-select: none;
}

.settingsDropDown-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 8px 12px; */
    padding: 2px;
    /* cursor: pointer; */
    background: linear-gradient(#1b1b1b, #111);
    border: 2px solid #46361d;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 0 6px rgba(0, 0, 0, .4);
}

.settingsDropDown-option{
	display: flex;
    align-items: center;
    gap: 5px;
}

.settingsDropDown-option img{
    width:26px;
    height:18px;
    border:1px solid #444;
}

.settingsDropDown-arrow{
    color:#cba04b;
    font-size:14px;
    transition:.2s;
}

.settingsDropDown.open .settingsDropDown-arrow{
    transform:rotate(180deg);
}

.settingsDropDown-menu{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    right:0;
    display:none;
    overflow:hidden;
    z-index:1000;
    background:#151515;
    border:2px solid #46361d;
    box-shadow: 0 8px 16px rgba(0,0,0,.6);
}

.settingsDropDown.open .settingsDropDown-menu{
    display:block;
}

.settingsDropDown-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    cursor:pointer;
    transition:.15s;
}

.settingsDropDown-item:hover{
    background:#2b2215;
}

.settingsDropDown-item img{
    width:26px;
    height:18px;
    border:1px solid #444;
}

.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: center;
    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: flex;
    justify-content: center;
	background-size: 100% 100%;
    background-repeat: no-repeat;
}

.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;
	margin-bottom: 2px;
}

.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/backpack.webp"); }
.icon-hourglass { background-image: url("../assets/img/icons/hourglass.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"); }

/* Classes icons */
.class-icon-Wizard { background-image: url("../assets/img/icons/classes/Wizard.webp"); }
.class-icon-Archer { background-image: url("../assets/img/icons/classes/Archer.webp"); }
.class-icon-Necromancer { background-image: url("../assets/img/icons/classes/Necromancer.webp"); }
.class-icon-Rogue { background-image: url("../assets/img/icons/classes/Rogue.webp"); }
.class-icon-Sorcerer { background-image: url("../assets/img/icons/classes/Sorcerer.webp"); }
.class-icon-Warrior { background-image: url("../assets/img/icons/classes/Warrior.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;
}

.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/yellowBar.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/pixelButtonSand.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* position: relative; */
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
	letter-spacing: 1px;
}

.book-login-button:hover {
    transform: translateY(-1px);
    filter:
        brightness(1.08)
        saturate(1.08)
        drop-shadow(12px 12px 12px rgba(0, 0, 0, 0.55));
    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}

.book-login-button:active {
    transform: translateY(1px);
    filter: brightness(0.85) drop-shadow(6px 6px 6px rgba(0,0,0,.45));
}

.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-char-profile-button:hover {
    transform: translateY(-1px);

    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}

.book-char-profile-button:active {
    transform: translateY(1px);
}

.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-parent:hover {
    transform: translateY(-1px);
    filter:
        brightness(1.08)
        saturate(1.08)
        drop-shadow(12px 12px 12px rgba(0, 0, 0, 0.55));

    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}

.char-box-parent:active {
    transform: translateY(1px);
    filter: brightness(0.85) drop-shadow(6px 6px 6px rgba(0,0,0,.45));
}
    
.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 {
	/*display: flex;*/
	background-color: gray;
	padding-top: 5px;
    padding-bottom: 5px;
	height: 50px;
	background-image: url("../assets/img/background/TopBarBackground.webp"); 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 {
	margin: 7px;
	float: right;
    user-select: none;
    width: 35px;
    height: 35px;
    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"); }

/* Top bar char data */
.TopBarCharDataContainer {
	padding-left: 10px;
    padding-right: 10px;
    height: 100%;
    /* display: flex; */
    float: right;
    /*margin-top: 1px;*/
    /* flex-wrap: wrap; */
    align-content: center;
    /* justify-content: center; */
    /* gap: 2px; */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../assets/img/background/settingsButton.webp);
	overflow: auto;
}

.TopBarCharVital { color: white; }
.TopBarCharGold { color: gold; }

.topBarCharDataItemContainer {
	width: 100%;
	height: 15px;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.topBarCharAttributeIcon {
    width: 12px;
    height: 12px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    flex-shrink: 0;
    filter: drop-shadow(1px 0 0 gray) drop-shadow(-1px 0 0 gray) drop-shadow(0 1px 0 gray) drop-shadow(0 -1px 0 gray);
}

.topBarCharStatsProgressBar {
    min-width: 100px;
}

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

.topBarExternBar {
    width: 100%;
    height: 12px;
    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;
}

.topBarExternBarMini {
    height: 6px;
}

.topBarContainerText {
	width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 1;
    /* font-weight: bold; */
    font-size: x-small;
    align-content: center;
    color: white;
}

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


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

/* Skill trees */
.skillDisplayContainer {
	height: stretch;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    padding-bottom: 5px;
}

.skillDisplayGroupping {
	display: flex;
    flex-wrap: wrap;
}

.skillTreeMainContainer {
	display: flex;
    width: 100%;
    flex: 1;
	min-height:0;   /* importante */
    overflow:hidden;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/skillTreeBG.webp);
    flex-wrap: nowrap;
    justify-content: center;
}

.skillTreeContent {
	display: flex;
}

.skillTreeTabContainer {
	min-width: min(400px, 100%);

    display: flex;
    flex-wrap: nowrap;        /* não quebra linha */
    align-items: center;
    justify-content: flex-start;

    overflow-x: auto;
    overflow-y: hidden;
	
	background-color: #0000006b;

    scrollbar-width: none;
    -ms-overflow-style: none;

    /*background-image: url(../assets/img/background/skillTreeBottomBar.webp); background-size: 100% 100%; background-repeat: no-repeat;*/

    font-size: larger;
}

.skillTreeTabContainer::-webkit-scrollbar {
    display: none;
}

.skillTreeTab {
    min-width: 100px;
    flex-shrink: 0;
	
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-size: 100% 100%;
    background-repeat: no-repeat;
	
	/*margin-right: 1px; margin-left: 1px;*/
	
	padding-left: 5px;
	padding-right: 5px;
}

.skillTreeActiveTab { color: gold; background-image: url(../assets/img/background/skillTreeActiveTab.webp); }
.skillTreeInactiveTab { color: wheat; background-image: url(../assets/img/background/skillTreeInactiveTab.webp); }

.skillTreeBottomBar {
	height: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    background-image: url(../assets/img/background/skillTreeBottomBar.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: wheat;
    font-size: large;
    /* padding: 10px; */
    align-items: center;
}

.skillTreeAvailablePointsBox {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    border-radius: 5px;
    width: 50px;
    background-color: #0d0d0d85;
    margin-left: 5px;
    font-weight: bold;
}

.skillTreeAvailablePointsPositive { color: #49ca49; border: 1px solid #31261d; }
.skillTreeAvailablePointsZero { color: #d96666; border: 1px solid #d96666; }

.blink-hard {
  animation: blink-sharp 1s step-start infinite;
}

@keyframes blink-sharp {
  50% { opacity: 0; }
}

.skillTree{
	position:relative;
	
	max-width: 90vw;
	height: stretch;

    flex:1;

    display:flex;
    justify-content:center;
	
	min-height:0;   /* importante */
    min-width:0;

    overflow:auto;
    scrollbar-width:none;

	padding: 5px;
}

.skillTreeCanvas{
    position:relative;
    flex:0 0 auto;
	max-width: 100%;
}

.skillConnections{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.skillLine{
    stroke-width:5;
    stroke-linecap:round;
}

.skillLineActive { stroke:gold; }
.skillLineInactive { stroke:wheat; }

.skillNode{
    position:absolute;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2d2d2d;
    border-radius:5px;
    color:#fff;
    text-align:center;
    box-sizing:border-box;
    transition:.2s;
	
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.skillIcon {
    width: 80%;
    height: 80%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	pointer-events: none;
}

.skillNode:hover{
    border-color:#f4d35e;
    transform:scale(1.1);
}

.skillTitle{
    padding:6px;
    font-size:14px;
    line-height:18px;
	pointer-events: none;
}

.skillLevelProgression {
	position: absolute;
    bottom: -5px;
    border-radius: 5px;
    background-color: #000000b8;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    pointer-events: none;
    font-weight: bold;
    letter-spacing: 2px;
	background-color: #000000;
}

.skillLevelProgressionNull { border: 1px solid #9f9791; }
.skillLevelProgressionAdv { border: 1px solid #d59d00; color: gold; }
.skillLevelProgressionFull { border: 1px solid #1fe91f; color: #1fe91f; }

/* Skill popup pannel */
.skillTreeSkillDisplayContainer {
    width: stretch;
    height: stretch;
	overflow: auto;
    scrollbar-width: none;
}

.skillPannelSection {
	display: flex;
    width: stretch;
    padding: 10px 10px 0px 10px;
    gap: 10px;
}

.skillPannelBox {
	width: stretch;
	padding: 5px;
	color: wheat;
	background-size: 100% 100%;
    background-repeat: no-repeat;
	background-image: url(../assets/img/background/npcShopMainContainer.webp);
	border: 1px solid #4a2f1b;
	border-radius: 5px;
}

.skillPannelSubTitle {
	display: flex;
    width: stretch;
    color: #ffd455;
    flex-wrap: nowrap;
    justify-content: center;
    font-size: larger;
	margin-bottom: 2px;
}

.skillPictureBox {
    width:100px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2d2d2d;
    border-radius:5px;
    color:#fff;
    text-align:center;
    box-sizing:border-box;
	
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.skillPannelHeaderText {
	padding-left: 5px;
}

.skillPannelHeaderSkillName {
	color: #fda636;
	font-size: large;
}

.skillPannelText {
	display: flex;
	color: wheat;
	font-size: larger;
	margin-top: 2px;
}

.skillPannelDescription {
	display: flex;
	color: wheat;
	margin-top: 2px;
}

.skillPannelLevelProgression {
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: 2px;
	color: gold;
}

.skillPannelItem {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    margin-left: 5px;
    margin-right: 5px;
}

.skillPannelItemText {
	display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.skillPannelItemValue {
	display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 2px;
}

.skillPannelSkillUpgradeButtonContainer {
	display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.skillDisplayIcon {
    width: 15px;
    height: 15px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    pointer-events: none;
    filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);
}

.skillNodeActive { background-image: url(../assets/img/background/skillTreeActiveSkillBox.webp); }
.skillNodeInactive { background-image: url(../assets/img/background/skillTreeInactiveSkillBox.webp); }
.skillImageInactive { filter: grayscale(100%); }

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