.disabled { filter: grayscale(100%); pointer-events: none; }
.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);
}
.item-icon-check { background-image: url("../assets/img/icons/check.webp"); }
.item-icon-forbiden { background-image: url("../assets/img/icons/forbiden.webp"); }
.item-icon-return { background-image: url("../assets/img/icons/return.webp"); }
.skillConnections{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.skillDisplayContainer {
    padding-bottom: 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-width: min(400px, 100%);
    width: 100%;
    min-height: 50vh;
    aspect-ratio: 3 / 4;
}
.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);
}
.skillIcon {
    width: 80%;
    height: 80%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	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;
}
.skillLine{
    stroke-width:5;
    stroke-linecap:round;
}
.skillNode{
    position:absolute;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    color:#fff;
    text-align:center;
    box-sizing:border-box;
    transition:.2s;
	
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.skillNode:hover{
    border-color:#f4d35e;
    transform:scale(1.1);
}
.skillPannelBox {
	width: stretch;
	padding: 5px;
	background-color: #0000007a;
	border: 1px solid #4a2f1b;
	border-radius: 5px;
}
.skillPannelDescription {
	display: flex;
	margin-top: 2px;
}
.skillPannelHeaderSkillName {
	font-size: large;
}
.skillPannelHeaderText {
	padding-left: 5px;
}
.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;
}
.skillPannelLevelProgression {
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: 2px;
}
.skillPannelSection {
	display: flex;
    width: stretch;
    padding: 10px 10px 0px 10px;
    gap: 10px;
}
.skillPannelSkillUpgradeButtonContainer {
	display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.skillPannelSubTitle {
	display: flex;
    width: stretch;
    flex-wrap: nowrap;
    justify-content: center;
    font-size: larger;
	margin-bottom: 2px;
}
.skillPannelText {
	display: flex;
	font-size: larger;
	margin-top: 2px;
}
.skillPictureBox {
    width:100px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    color:#fff;
    text-align:center;
    box-sizing:border-box;
	
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.skillTitle{
    padding:6px;
    font-size:14px;
    line-height:18px;
	pointer-events: none;
}
.skillTree{
	position:relative;
	height: stretch;
    flex:1;
    display:flex;
    justify-content:center;
	min-height:0;   /* importante */
    min-width:0;
    overflow:auto;
    scrollbar-width:none;
	padding: 5px;
}
.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;
}
.skillTreeBottomBar {
	height: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: large;
    /* padding: 10px; */
    align-items: center;
}
.skillTreeCanvas{
    position:relative;
    flex:0 0 auto;
	max-width: 100%;
}
.skillTreeContent {
	display: flex;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 15px;
    min-width: min(400px, 100%);
    width: 100%;
    min-height: 50vh;
    aspect-ratio: 3 / 4;
}
.skillTreeInactiveTab { background-image: url(../assets/img/background/skills/skillTreeInactiveTab.webp); }
.skillTreeMainContainer {
	display: flex;
    width: 100%;
	min-height:0;
    overflow:hidden;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/skills/skillTreeBG.webp);
    flex-wrap: nowrap;
    justify-content: center;
}
.skillTreeSkillDisplayContainer {
    width: stretch;
    height: stretch;
	overflow: auto;
    scrollbar-width: 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;
}
.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: #000000;

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

    font-size: larger;
}
.skillTreeTabContainer::-webkit-scrollbar {
    display: none;
}
.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%); }