/* 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 */
.textRed { color: #d96666; }

/* Text style */
.smallFont { font-size: smaller; }
.textShadow { text-shadow: 0px 0px 10px #000000; }

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




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 */



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


.charTopBarMenuItem {
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
	justify-content: space-between;
    padding-left: 10px;
	background-image: url("../assets/img/background/interface/menuItemList.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"); }
.charTopBarMenuResumeIcon { background-image: url("../assets/img/icons/charResumeMenuIcon.webp"); }
.charTopBarMenuSkillsIcon { background-image: url("../assets/img/icons/charSkillsMenuIcon.webp"); }
.charTopBarMenuQuestsIcon { background-image: url("../assets/img/icons/charQuestsMenuIcon.webp"); }
.charTopBarMenuBagIcon { background-image: url("../assets/img/icons/bagIcon.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"); }
.charTopBarMenuDevIcon { background-image: url("../assets/img/icons/dev.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 */

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


/* 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 */



/* 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 */

/* Blur effect */

/* Changelog */





/* Map cell/tile layer */

.cellLayerItem{
	background-size: 60%;
}


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

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

/* No effect */

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

}

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



/* 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/login/LoginBG.webp"); background-size: 100% 100%; background-repeat: no-repeat;
}

/* Map storage */


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


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



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


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




.charIteractiveContentBG {
	z-index: 51;
}




.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/itemDisplay/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/itemDisplay/lootBoxItemContainer.webp"); }
.elementResumePopupBG { background-image: url("../assets/img/background/skills/skillElementTypesBG.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;
}




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

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




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













.storageBoxCharBagItemsContainer {
    width: 100%;
}

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

/* Char bag on storage display */

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




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



/* Backpack popup */

.storageBoxCharBagTopLow {
	color: #ffe200;
}

.storageBoxCharBagTopMedium {
	color: #ff9200;
}

.storageBoxCharBagTopHigh {
	color: #ff2600;
}




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
















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


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



/* NPC */


/* Game buttons */






/* Game button colors */
.gameButtonBlue { background-image: url("../assets/img/buttons/buttonBlue.webp"); }

/* Message popup */

.messagePopup {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding: 5px;
    font-size: medium;
    background-image: url(../assets/img/background/main/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-size: 100% 100%;
    background-repeat: no-repeat;
    min-width: 30vw;
    min-height: 30vh;
    max-height: 95vh;
    max-width: min(400px, 100vw);
    margin: 5px;
}


















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


	
}










/* Scroll hint */

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


/***************************************************
** Install game
***************************************************/







/***************************************************
** Modules/Pannel container
***************************************************/

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

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

.pannelContainerTitle {
	width: stretch;
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    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); }






/***************************************************
** Char profile module
***************************************************/



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




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



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

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


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



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



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





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



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



.charEquipmentStatsDetailTitle {
	color: #d9c451;
}











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





/* Icons */


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

.settings-icon-audio { background-image: url(../assets/img/icons/audio.webp); }



/* Barra preta */


/* Parte dourada */

/* Losango */


/* Input invisível */
















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


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








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








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







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




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


/* 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/login/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/login/BookPageVines.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}



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


.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-dexterity { background-image: url("../assets/img/icons/dexterity.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-steps { background-image: url("../assets/img/icons/steps.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;
    align-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/login/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: 0px;
}















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

.book-page-blank {
	background-image: url("../assets/img/background/charSelection/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/login/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/charSelection/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-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/charSelection/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;
}









.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/login/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/login/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 */



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





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






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


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

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

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

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

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






.pixelated {
	image-rendering: pixelated;
}


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






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



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





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






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

/* Skill popup pannel */















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

/* div's to hide */
.blocked { pointer-events: none; }