#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: rgba(14,14,16,0.5);
    padding: 5px;
    opacity: 0.90;
    font: normal 10px Tahoma, Helvetica, sans-serif;
    text-align: center;
    color: #fff;
    width: 250px;
}

#tooltip h3,
#tooltip div {
    margin: 0;
}
.profile {
    width: 100%;
}
.profile .box {
    position: relative;
    width: 310px;
    height: 440px;
    margin:50px auto;
    background: rgb(35 26 15);
    border: 2px solid rgb(16,12,0);
}
.box .character {
    position: absolute;
    top: 20px;
    left: 10px;
}
.borderAC {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(115,113,82,0.3);
    background: rgba(0,0,0,0.3);
}
.box1 , .box2 , .box3 , .box4 , .box5 , .box6 , .box7 , .box8 , .box9 {
    position: absolute;
    width: 60px;
    height: 60px;
    right: 15px;
}
.box  .box1 {
    top: 15px;
}
.box .box2 {
    top: 85px;
}
.box .box6 {
    top: 155px;
}
.box .box4 {
    width: 85px;
    height: 85px;
    top: 225px;
}
.box .box3 {
    width: 85px;
    height: 85px;
    top: 315px;
}
.box .box5 {
    width: 85px;
    height: 85px;
    top: 315px;
    right: 115px;
}
.box .box8 {
    width: 55px;
    height: 55px;
    top: 345px;
    right: 215px;
}
.box .box7 {
    width: 55px;
    height: 55px;
    top: 280px;
    right: 215px;
}
.box .box9 {
    width: 55px;
    height: 55px;
    top: 215px;
    right: 215px;
}
.box .imgBorder
{
    width: 100%;
}
.flex_item {
    display: flex;
    justify-content: space-between;
}
.flex_item .item_info{
    width: 70%;
    text-align: left;
}

.title_item {
    font-family: "Philosopher", sans-serif;
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
	color: #ff0000;
}
.title_gem {
    color: #7DF983;
}
.title_damage {
    color: #F3E250;
    font-size: 13px;
}
.title_Enchant {
    color: #F3E250;
    font-size: 13px;
}