.border-strength{
    box-shadow:inset 0px 2px 5px -2px #e93f21, inset 0px -2px 5px 0px #e80000;
}
.border-dexterity{
    box-shadow:inset 0px 2px 5px -2px #02fdf5, inset 0px -2px 5px 0px #004240;
}
.border-constitution{
    box-shadow:inset 0px 2px 5px -2px #01ff6f, inset 0px -2px 5px 0px #04682f;
}
.border-intelligence{
    box-shadow:inset 0px 2px 5px -2px #eca137, inset 0px -2px 5px 0px #6c4002;
}
.border-wisdom{
    box-shadow:inset 0px 3px 5px -2px #d262f4, inset 0px -2px 5px 0px #7a109a;
}
.border-charisma{
    box-shadow:inset 0px 3px 5px -2px #f66eb9, inset 0px -2px 5px 0px #7d0145;
}

.border-after-strength::after{
    border: 2px solid rgba(233, 63, 33,0.5);
}
.border-after-dexterity::after{
    border: 2px solid rgba(2, 253, 245,0.5);
   
}
.border-after-constitution::after{
    border: 2px solid rgba(1, 255, 111,0.5);
   
}
.border-after-intelligence::after{
    border: 2px solid rgba(236, 161, 55,0.5);
   
}
.border-after-wisdom::after{
    border: 2px solid rgba(210, 98, 244,0.5);
   
}
.border-after-charisma::after{
    border: 2px solid rgba(246, 110, 185,0.5);
   
}


.text-outline-strength{
    text-shadow: rgb(159, 13, 13) 3px 0px 0px, rgb(159, 13, 13) 2.83487px 0.981584px 0px, rgb(159, 13, 13) 2.35766px 1.85511px 0px, rgb(159, 13, 13) 1.62091px 2.52441px 0px, rgb(159, 13, 13) 0.705713px 2.91581px 0px, rgb(159, 13, 13) -0.287171px 2.98622px 0px, rgb(159, 13, 13) -1.24844px 2.72789px 0px, rgb(159, 13, 13) -2.07227px 2.16926px 0px, rgb(159, 13, 13) -2.66798px 1.37182px 0px, rgb(159, 13, 13) -2.96998px 0.42336px 0px, rgb(159, 13, 13) -2.94502px -0.571704px 0px, rgb(159, 13, 13) -2.59586px -1.50383px 0px, rgb(159, 13, 13) -1.96093px -2.27041px 0px, rgb(159, 13, 13) -1.11013px -2.78704px 0px, rgb(159, 13, 13) -0.137119px -2.99686px 0px, rgb(159, 13, 13) 0.850987px -2.87677px 0px, rgb(159, 13, 13) 1.74541px -2.43999px 0px, rgb(159, 13, 13) 2.44769px -1.73459px 0px, rgb(159, 13, 13) 2.88051px -0.838247px 0px;
}
.text-outline-dexterity{
    text-shadow: rgb(0, 66, 64) 3px 0px 0px, rgb(0, 66, 64) 2.83487px 0.981584px 0px, rgb(0, 66, 64) 2.35766px 1.85511px 0px, rgb(0, 66, 64) 1.62091px 2.52441px 0px, rgb(0, 66, 64) 0.705713px 2.91581px 0px, rgb(0, 66, 64) -0.287171px 2.98622px 0px, rgb(0, 66, 64) -1.24844px 2.72789px 0px, rgb(0, 66, 64) -2.07227px 2.16926px 0px, rgb(0, 66, 64) -2.66798px 1.37182px 0px, rgb(0, 66, 64) -2.96998px 0.42336px 0px, rgb(0, 66, 64) -2.94502px -0.571704px 0px, rgb(0, 66, 64) -2.59586px -1.50383px 0px, rgb(0, 66, 64) -1.96093px -2.27041px 0px, rgb(0, 66, 64) -1.11013px -2.78704px 0px, rgb(0, 66, 64) -0.137119px -2.99686px 0px, rgb(0, 66, 64) 0.850987px -2.87677px 0px, rgb(0, 66, 64) 1.74541px -2.43999px 0px, rgb(0, 66, 64) 2.44769px -1.73459px 0px, rgb(0, 66, 64) 2.88051px -0.838247px 0px;
}
.text-outline-constitution{
    text-shadow: rgb(4, 104, 47) 3px 0px 0px, rgb(4, 104, 47) 2.83487px 0.981584px 0px, rgb(4, 104, 47) 2.35766px 1.85511px 0px, rgb(4, 104, 47) 1.62091px 2.52441px 0px, rgb(4, 104, 47) 0.705713px 2.91581px 0px, rgb(4, 104, 47) -0.287171px 2.98622px 0px, rgb(4, 104, 47) -1.24844px 2.72789px 0px, rgb(4, 104, 47) -2.07227px 2.16926px 0px, rgb(4, 104, 47) -2.66798px 1.37182px 0px, rgb(4, 104, 47) -2.96998px 0.42336px 0px, rgb(4, 104, 47) -2.94502px -0.571704px 0px, rgb(4, 104, 47) -2.59586px -1.50383px 0px, rgb(4, 104, 47) -1.96093px -2.27041px 0px, rgb(4, 104, 47) -1.11013px -2.78704px 0px, rgb(4, 104, 47) -0.137119px -2.99686px 0px, rgb(4, 104, 47) 0.850987px -2.87677px 0px, rgb(4, 104, 47) 1.74541px -2.43999px 0px, rgb(4, 104, 47) 2.44769px -1.73459px 0px, rgb(4, 104, 47) 2.88051px -0.838247px 0px;
}
.text-outline-intelligence{
    text-shadow: rgb(136, 83, 8) 3px 0px 0px, rgb(136, 83, 8) 2.83487px 0.981584px 0px, rgb(136, 83, 8) 2.35766px 1.85511px 0px, rgb(136, 83, 8) 1.62091px 2.52441px 0px, rgb(136, 83, 8) 0.705713px 2.91581px 0px, rgb(136, 83, 8) -0.287171px 2.98622px 0px, rgb(136, 83, 8) -1.24844px 2.72789px 0px, rgb(136, 83, 8) -2.07227px 2.16926px 0px, rgb(136, 83, 8) -2.66798px 1.37182px 0px, rgb(136, 83, 8) -2.96998px 0.42336px 0px, rgb(136, 83, 8) -2.94502px -0.571704px 0px, rgb(136, 83, 8) -2.59586px -1.50383px 0px, rgb(136, 83, 8) -1.96093px -2.27041px 0px, rgb(136, 83, 8) -1.11013px -2.78704px 0px, rgb(136, 83, 8) -0.137119px -2.99686px 0px, rgb(136, 83, 8) 0.850987px -2.87677px 0px, rgb(136, 83, 8) 1.74541px -2.43999px 0px, rgb(136, 83, 8) 2.44769px -1.73459px 0px, rgb(136, 83, 8) 2.88051px -0.838247px 0px;
}
.text-outline-wisdom{
    text-shadow: rgb(93, 11, 118) 3px 0px 0px, rgb(93, 11, 118) 2.83487px 0.981584px 0px, rgb(93, 11, 118) 2.35766px 1.85511px 0px, rgb(93, 11, 118) 1.62091px 2.52441px 0px, rgb(93, 11, 118) 0.705713px 2.91581px 0px, rgb(93, 11, 118) -0.287171px 2.98622px 0px, rgb(93, 11, 118) -1.24844px 2.72789px 0px, rgb(93, 11, 118) -2.07227px 2.16926px 0px, rgb(93, 11, 118) -2.66798px 1.37182px 0px, rgb(93, 11, 118) -2.96998px 0.42336px 0px, rgb(93, 11, 118) -2.94502px -0.571704px 0px, rgb(93, 11, 118) -2.59586px -1.50383px 0px, rgb(93, 11, 118) -1.96093px -2.27041px 0px, rgb(93, 11, 118) -1.11013px -2.78704px 0px, rgb(93, 11, 118) -0.137119px -2.99686px 0px, rgb(93, 11, 118) 0.850987px -2.87677px 0px, rgb(93, 11, 118) 1.74541px -2.43999px 0px, rgb(93, 11, 118) 2.44769px -1.73459px 0px, rgb(93, 11, 118) 2.88051px -0.838247px 0px;
}
.text-outline-charisma{
    text-shadow: rgb(125, 1, 69) 3px 0px 0px, rgb(125, 1, 69) 2.83487px 0.981584px 0px, rgb(125, 1, 69) 2.35766px 1.85511px 0px, rgb(125, 1, 69) 1.62091px 2.52441px 0px, rgb(125, 1, 69) 0.705713px 2.91581px 0px, rgb(125, 1, 69) -0.287171px 2.98622px 0px, rgb(125, 1, 69) -1.24844px 2.72789px 0px, rgb(125, 1, 69) -2.07227px 2.16926px 0px, rgb(125, 1, 69) -2.66798px 1.37182px 0px, rgb(125, 1, 69) -2.96998px 0.42336px 0px, rgb(125, 1, 69) -2.94502px -0.571704px 0px, rgb(125, 1, 69) -2.59586px -1.50383px 0px, rgb(125, 1, 69) -1.96093px -2.27041px 0px, rgb(125, 1, 69) -1.11013px -2.78704px 0px, rgb(125, 1, 69) -0.137119px -2.99686px 0px, rgb(125, 1, 69) 0.850987px -2.87677px 0px, rgb(125, 1, 69) 1.74541px -2.43999px 0px, rgb(125, 1, 69) 2.44769px -1.73459px 0px, rgb(125, 1, 69) 2.88051px -0.838247px 0px;
}

.background-strength{
    background-image: url(../images/str.jpeg);
}
.background-dexterity{
    background-image: url(../images/dex.jpeg);
}
.background-constitution{
    background-image: url(../images/con.jpeg);
}
.background-intelligence{
    background-image: url(../images/int.jpeg);
}
.background-wisdom{
    background-image: url(../images/wis.jpeg);
}
.background-charisma{
    background-image: url(../images/cha.jpeg);
}


.section-subtitle{
    text-align: center;
    padding-bottom: 20px;
    font-size: 20px;
    color: #f2d38b;
    text-transform: capitalize;
}
/******************************************************************************************
    CHARACTERISTIS
*****************************************************************************************/

.section-characteristics{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 40px;
    padding: 10px;
    margin-bottom: 40px;
}
.characteristics-ability{
    border: 1px solid #5b696d;
    position: relative;
    /* border-radius: 17px 17px 2px 2px; */
    text-align: center;
    /* padding-bottom: 30px; */
    background-color: #394155;
    border-radius: 25%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100px;
}



.characteristics-ability .name{
    font-size: 12px;
    padding-top: 10px;
    color: #fff;
    text-transform: uppercase;
    /* font-family: 'Times New Roman', Times, serif; */

    /* text-shadow: rgb(38, 44, 60) 2px 0px 0px, rgb(38, 44, 60) 1.75517px 0.958851px 0px, rgb(38, 44, 60) 1.0806px 1.68294px 0px, rgb(38, 44, 60) 0.141474px 1.99499px 0px, rgb(38, 44, 60) -0.832294px 1.81859px 0px, rgb(38, 44, 60) -1.60229px 1.19694px 0px, rgb(38, 44, 60) -1.97998px 0.28224px 0px, rgb(38, 44, 60) -1.87291px -0.701566px 0px, rgb(38, 44, 60) -1.30729px -1.5136px 0px, rgb(38, 44, 60) -0.421592px -1.95506px 0px, rgb(38, 44, 60) 0.567324px -1.91785px 0px, rgb(38, 44, 60) 1.41734px -1.41108px 0px, rgb(38, 44, 60) 1.92034px -0.558831px 0px; */
    
}

.characteristics-ability .value{
    font-size: 45px;
    
    color: #fff;
    position: absolute;
    top: 25px;
    right: 5px;
    text-align: right;
    width: 100%;
    font-size: 70px;
    font-weight: bold;
    font-style: normal;
    font-family: 'Times New Roman', Times, serif;
    mix-blend-mode: overlay;
}
/*
.characteristics-ability .value{
    font-size: 45px;
    line-height: 45px;
    color: #262c3c;
    text-shadow: rgba(255, 255, 255,1) 2px 0px 0px, rgba(255, 255, 255,1) 1.75517px 0.958851px 0px, rgba(255, 255, 255,1) 1.0806px 1.68294px 0px, rgba(255, 255, 255,1) 0.141474px 1.99499px 0px, rgba(255, 255, 255,1) -0.832294px 1.81859px 0px, rgba(255, 255, 255,1) -1.60229px 1.19694px 0px, rgba(255, 255, 255,1) -1.97998px 0.28224px 0px, rgba(255, 255, 255,1) -1.87291px -0.701566px 0px, rgba(255, 255, 255,1) -1.30729px -1.5136px 0px, rgba(255, 255, 255,1) -0.421592px -1.95506px 0px, rgba(255, 255, 255,1) 0.567324px -1.91785px 0px, rgba(255, 255, 255,1) 1.41734px -1.41108px 0px, rgba(255, 255, 255,1) 1.92034px -0.558831px 0px;
}
*/
.characteristics-ability .num{
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    translate: -50%;
    bottom: -12px;
    text-align: center;
}

.characteristics-ability .num::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #262c3c;
    position: absolute;
    z-index: -1;
    transform: rotate(45deg);
    border-radius: 10px 0 10px 0;
}
.characteristics-ability .num::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border:1px solid #5b696d;
    position: absolute;
    top: -1px;
    left: -1px;
    transform: rotate(45deg);
    border-radius: 10px 0 10px 0;
}

/******************************************************************************************
    SAVING
*****************************************************************************************/

.section-saving{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    padding: 10px;
    margin-bottom: 30px;
}
.characteristics-saving{
    border: 2px solid #5b696d;
    position: relative;
    text-align: left;
    padding-left: 20px;
    line-height: 28px;
    background-color: #394155;
    height: 30px;
    border-radius: 20px 10px 10px 20px;
    font-size: 18px;
    text-transform: capitalize;

}
.characteristics-saving .num{
    border: 2px solid #5b696d;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 5px 20px 20px 5px;
    top:-7px;
    right: -7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;

    font-size: 20px;
    text-align: center;
    line-height: 40px;
    font-style: normal;
    font-family: 'Times New Roman', Times, serif;
}
.characteristics-saving .selection{
    position: absolute;
    border: 2px solid #5b696d;
    background-color: #394155;
    width: 10px;
    height: 10px;
    top: 8px;
    left: -7px;
    border-radius: 50%;
}
.characteristics-saving .selected{
    background-color: #b6c4e8;
}



.section-characteristics-profBobus, .section-characteristics-perception{
    border: 2px solid #5b696d;
    position: relative;
    text-align: left;
    padding-left: 50px;
    line-height: 28px;
    background-color: #394155;
    height: 30px;
    border-radius: 30px;
    font-size: 18px;
    text-transform: capitalize;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;;
}
.section-characteristics-profBobus span, .section-characteristics-perception span{
    display: inline-block;
    border: 2px solid #5b696d;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    position: absolute;
    left: -2px;
    top: -2px;
    background-color: rgba(255,255,255,0.1);
}

/******************************************************************************************
    SKILLS
*****************************************************************************************/

.skills-item{
    margin: 10px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.skills-item .selection{
   width: 30px;
   position: relative;
}
.skills-item .selection::after{
    content: "";
    width:8px;
    height:8px;
    display: block;
    position: absolute;
    border: 1px dashed rgba(255,255,255,0.5);
    border-radius: 50%;
    top: 10px;
    left: 50%;
    translate: -50%;
}
.skills-item .selected::after{
    background-color: white;
}
.skills-item .mod{
   width: 20px;
   background-position: center;
   background-size: cover;
}
.skills-item .name{
    text-align: left;
    padding-left: 20px;
    text-transform: uppercase;
    font-size: 18px;
}
.skills-item .value{
    text-align: right;
    position: relative;
    padding-right: 7px;
    font-size: 23px;
    font-style: normal;
    font-weight: normal;
    font-family: 'Times New Roman', Times, serif;
}
.skills-item .value::after{
    content: '';
    display: block;
    position: absolute;
    height: 35px;
    width: 35px;
    /* border:1px solid rgba(255,255,255,0.3); */
    top: -5px;
    right: 0;
    border-radius: 7px;
}


/******************************************************************************************
    INVENTORY
*****************************************************************************************/


.moneyIcon{
    width: 50px;
    background-image: url(../images/gp.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
.moneyInfo{
    text-align: left;
    width: 20%;
    font-size: 20px;
    vertical-align: top;
    padding-left: 5px;
    line-height: 18px;
}
.inventory_filter{
    width: 100%;
    background-color: transparent;
    padding-left: 30px;
    color:#778297;
    text-transform: uppercase;
    border: 0;
    font-size: 15px;
    background-image: url(../images/bag.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 13px;
}

.section-inventory .header table{
    height: 30px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.section-inventory{
    overflow: hidden;
}


#addInventory, #editSpells{
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
    padding: 10px 30px 10px 30px;
    border: 0;
    border-radius: 5px;
    font-size: 15px;
    color: #000;

    background: linear-gradient(0deg, rgba(239, 239, 239, 0.7) 0%, rgba(239, 239, 239,1) 100%);
}


.inventory-item {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.inventory-item .item-name{

    text-align: left;
    text-transform:capitalize;
    font-size: 20px;

    padding-left: 30px;
    position: relative;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inventory-item .item-name::before{
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px;
    left: 0;
    top: 5px;
    mix-blend-mode: color-dodge;
    opacity: 0.6;
}
.icon-inuse::before{
    opacity: 1 !important;
    filter: brightness(1.2);
}

.item-inuse{
    color: rgb(95, 166, 252);
    border-bottom: 1px solid rgba(95, 166, 252,0.7);
    border-top: 1px solid rgba(95, 166, 252,0.7);
    background: radial-gradient(circle, rgba(95, 166, 252,0.3) 0%, rgba(60,64,74,0) 90%);
    /* border: 2px solid rgba(252, 181, 95,0.7); */
    /* background-image: linear-gradient(0deg, rgba(95, 166, 252, 0.5) 0%, rgba(252, 181, 95,0) 20%, rgba(252, 181, 95,0)  80%, rgba(95, 166, 252,0.5)  100%); */ 
}

.inventory-item .item-count{
    text-align: right;
    position: relative;
    padding-right: 7px;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    font-family: 'Times New Roman', Times, serif;
}


/*

.skills-item{
    margin: 10px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.skills-item .selection{
   width: 30px;
   position: relative;
}
.skills-item .selection::after{
    content: "";
    width:8px;
    height:8px;
    display: block;
    position: absolute;
    border: 1px dashed rgba(255,255,255,0.5);
    border-radius: 50%;
    top: 10px;
    left: 50%;
    translate: -50%;
}
.skills-item .selected::after{
    background-color: white;
}
.skills-item .mod{
   width: 20px;
   background-position: center;
   background-size: cover;
}
.skills-item .name{
    text-align: left;
    padding-left: 20px;
    text-transform: uppercase;
    font-size: 18px;
}
.skills-item .value{
    text-align: right;
    position: relative;
    padding-right: 7px;
    font-size: 23px;
    font-style: normal;
    font-weight: normal;
    font-family: 'Times New Roman', Times, serif;
}
.skills-item .value::after{
    content: '';
    display: block;
    position: absolute;
    height: 35px;
    width: 35px;
    border:1px solid rgba(255,255,255,0.3);
    top: -5px;
    right: 0;
}




/*

.inventory-item{
    border: 2px solid #5b696d;
    position: relative;
    text-align: left;
    line-height: 28px;
    background-color: #394155;
    height: 30px;
    border-radius: 8px;
    text-transform: capitalize;

    padding: 10px;
    font-size: 21px;
    background-image: linear-gradient(90deg,rgba(63, 91, 113,0) 0%, #3f5b71 30%, #334454 70%, rgba(51, 68, 84, 0) 100%); 
    margin-bottom: 3px;
}
.inventory-item .item-name{
    padding-left: 30px;
    position: relative;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inventory-item .item-name::before{
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px;
    left: 0;
    top: 5px;
    mix-blend-mode: color-dodge;
    opacity: 0.6;
}
.icon-inuse::before{
    opacity: 1 !important;
    filter: brightness(1.2);
}
.item-inuse{
    color: #151b29;
    border: 2px solid rgba(252, 181, 95,0.7);
    background-image: linear-gradient(90deg, rgba(252, 181, 95, 0.2) 0%, #fcb55f 50%, rgba(252, 181, 95, 0.2) 100%);
}

.inventory-item .item-count{
    width: 20%;
    text-align: right;
    padding-right: 10px;
    font-style: normal;
    font-weight: normal;
    font-family: 'Times New Roman', Times, serif;
    font-size: 15px;
}
/*
.characteristics-saving{
    border: 2px solid #5b696d;
    position: relative;
    text-align: left;
    padding-left: 20px;
    line-height: 28px;
    background-color: #394155;
    height: 30px;
    border-radius: 20px 10px 10px 20px;
    font-size: 18px;
    text-transform: capitalize;

}
.characteristics-saving .num{
    border: 2px solid #5b696d;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 5px 20px 20px 5px;
    top:-7px;
    right: -7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;

    font-size: 20px;
    text-align: center;
    line-height: 40px;
    font-style: normal;
    font-family: 'Times New Roman', Times, serif;
}
.characteristics-saving .selection{
    position: absolute;
    border: 2px solid #5b696d;
    background-color: #394155;
    width: 10px;
    height: 10px;
    top: 8px;
    left: -7px;
    border-radius: 50%;
}
.characteristics-saving .selected{
    background-color: #b6c4e8;
}
*/

/*

.inventory-item{
    padding: 10px;
    font-size: 21px;
    position: relative;
    background-image: linear-gradient(90deg,rgba(63, 91, 113,0) 0%, #3f5b71 30%, #334454 70%, rgba(51, 68, 84, 0) 100%); 
    margin-bottom: 3px;
}
.inventory-item::before{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    top:0;
    background-image: linear-gradient(90deg, rgba(30, 93, 142, 0) 0%, rgb(68, 169, 246) 50%, rgba(30, 93, 142, 0) 100%);
}
.inventory-item::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom:0;
    background-image: linear-gradient(90deg, rgba(30, 93, 142, 0) 0%, rgb(35, 143, 225) 50%, rgba(30, 93, 142, 0) 100%);
}
.item-inuse{
    background-image: linear-gradient(90deg, rgba(162, 129, 69, 0) 0%, #fcb55f 50%, rgba(162, 129, 69, 0) 100%);
}


.inventory-item .item-name{
    padding-left: 30px;
    position: relative;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
}
.inventory-item .item-count{
    width: 20%;
    text-align: right;
    padding-right: 10px;
}

.inventory-item .item-name::before{
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px;
    left: 0;
    top: 5px;
    mix-blend-mode: color-dodge;
    opacity: 0.6;
}
.icon-inuse::before{
    opacity: 1 !important;
    filter: brightness(1.2);
}

*/

.inventory-weapon::before{
    background-image: url(../images/inventory-weapon.png);
}
.inventory-armor::before{
    background-image: url(../images/inventory-shield.png);
}
.inventory-gems::before{
    background-image: url(../images/inventory-gems.png);
}
.inventory-ammunition::before{
    background-image: url(../images/inventory-ammo2.png);
}
.inventory-other::before,
.inventory-standard-gear::before,
.inventory-kits::before,
.inventory-adventuring-gear::before{
    background-image: url(../images/inventory-other1.png);
}
.inventory-custom-item::before{
    background-image: url(../images/inventory-other1.png);
}



/******************************************************************************************
    SPELLS
*****************************************************************************************/

.item-spell{
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,115,230,0.3);
    background-image: linear-gradient(90deg,rgba(63, 91, 113,0) 0%, #3f5b71 30%, #334454 70%, rgba(51, 68, 84, 0) 100%); 
    margin-bottom: 1px;
    position: relative;
}
.item-spell-level{
    padding-left: 10px;
    font-size: 17px;
}
.item-spell-name{
    font-size: 20px;
}
.item-spell-spec{
    text-align: right;
    padding-right: 10px;
}
.learn-new-spell{
    
    border-bottom: 1px solid rgba(0,115,230,0.3);
    background-image: linear-gradient(90deg,rgba(63, 91, 113,0) 0%, #3f5b71 30%, #334454 70%, rgba(51, 68, 84, 0) 100%); 
}
.learn-new-spell .item-spell-name{
    font-family: 'Times New Roman', Times, serif;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    text-decoration: underline;
}

.spell-slots{
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,12,255,0.3);
    background-image: linear-gradient(90deg,rgba(217, 9, 155,0) 0%, rgba(217, 9, 155,0.4) 30%, rgba(217, 9, 155,0.4) 70%, rgba(217, 9, 155,0) 100%); 
    
}
.spell-slot{
    display: inline-block;
    
    border: 1px solid white;
    padding: 15px;
    margin: 2px;
    border-radius: 50%;
}
.spell-slot-level{
    text-align: center;
    line-height: 18px;
    font-size: 12px;
}
.spell-slot-level div{
   font-size: 35px;
   
}
.used-slot{
    background-color: #fff;
}
.spellSelector{
    position: absolute;
    width: calc(100% + 5px);
    left: -5px;
    top: -10px;
    height: calc(100% + 15px);
    background-color: rgba(255,255,255,0.2);
    border-radius: 10px;;
    color: rgba(0,0,0,0);
    border: 0;
}

.known_spells{
    margin-top: 10px;
    margin-bottom: 20px;
}
.unlimited-slots::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid rgba(179, 23, 23,0.6);
    border-right: 15px solid transparent;

    position: absolute;
    top: 0;
}

.spell_0{
    background-image: linear-gradient(90deg,rgba(63, 91, 113,0) 0%, #614036 30%, #334454 70%, rgba(51, 68, 84, 0) 100%);
}
/******************************************************************************************
    FEATURES
*****************************************************************************************/

.section-features{
    padding-left: 10px;
    padding-right: 10px;
  
    font-style: normal;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    
}
.section-features-item{
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}


/******************************************************************************************
    CHARACTER
*****************************************************************************************/

.section-character{
    padding: 10px;
}

.modal-character-main-info{
    padding: 10px;
}
.modal-label{
    margin-bottom: 10px;
}
.modal-input-block{
    margin-bottom: 20px;
}