@font-face {
  font-family: 'Montserrat-Regular';
  font-style: normal;
  src: url(../../_assets/fonts/Montserrat/Montserrat-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat-Medium';
  font-style: normal;
  src: url(../../_assets/fonts/Montserrat/Montserrat-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat-SemiBold';
  font-style: normal;
  src: url(../../_assets/fonts/Montserrat/Montserrat-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat-Bold';
  font-style: normal;
  src: url(../../_assets/fonts/Montserrat/Montserrat-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat-MediumItalic';
  font-style: normal;
  src: url(../../_assets/fonts/Montserrat/Montserrat-MediumItalic.ttf) format('truetype');
}



@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  src: url(../../_assets/fonts/Roboto/Roboto-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto-Medium';
  font-style: normal;
  src: url(../../_assets/fonts/Roboto/Roboto-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto-Bold';
  font-style: normal;
  src: url(../../_assets/fonts/Roboto/Roboto-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Mockup-1';
  font-style: normal;
  src: url(../../_assets/fonts/Mockup/AHEM_MissingNormal.TTF) format('truetype');
}
@font-face {
  font-family: 'Mockup-2';
  font-style: normal;
  src: url(../../_assets/fonts/Mockup/BLOKKNeue-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Mockup-3';
  font-style: normal;
  src: url(../../_assets/fonts/Mockup/MockFlowFont1.ttf) format('truetype');
}
@font-face {
  font-family: 'Mockup-4';
  font-style: normal;
  src: url(../../_assets/fonts/Mockup/MockFlowFont2.ttf) format('truetype');
}
@font-face {
  font-family: 'Mockup-5';
  font-style: normal;
  src: url(../../_assets/fonts/Mockup/Redacted-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Mockup-6';
  font-style: normal;
  src: url(../../_assets/fonts/Mockup/RedactedScript-Regular.ttf) format('truetype');
}


@font-face {
  font-family: 'Old-Fenris';
  src: url(../../_assets/fonts/Old-Fenris/Old-Fenris-Regular.otf);
}






body{
display:block;
width:100vw;
height:100vh;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:0px;
padding:0px;
background-color:#111111;
background-color:#151515;
}
#item-container {
position:absolute;
width:600px;
min-height:200px;
display:inline-block;
background-color:#000;
padding:0px;
left:50%;
top:70px;
top:100px;
transform:translateX(-50%);
line-height:0px;
opacity:0;
mask: url('../../_assets/images/video-clip-mask.png?v=1');
mask-size: 1800% 100%;
mask-position: 0% 100%;
-webkit-mask-position: 0% 100%;
}
#item-container.show{
opacity:1;
transition:opacity 0.25s ease-in;
animation: appear 0.35s steps(17, start) 1, unmask 0.01s steps(1, start) 1;
animation-delay: 0s, .25s;
animation-fill-mode: forwards;
}

#item-container:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    pointer-events: none;
    box-shadow: 0px 0px 14px 1px var(--rarity-color) inset;
    box-shadow: 0px 0px 6px 0px var(--rarity-color) inset;
    z-index: 1;
    opacity: 0.0;
}

@keyframes appear {
  to {
    mask-position: 100% 100%;
	-webkit-mask-position: 100% 100%;
  }
}

@keyframes unmask {
  to {
    mask:unset;
  }
}




#item-container .item-image{
position:absolute;
bottom:-20px;
left:20px;
opacity:0;

mask-image: linear-gradient(0deg, black 43%, transparent 45%);
    mask-size: 100% 500%;
    mask-repeat: no-repeat;
    mask-position: 0% 67%;

    mask-image: linear-gradient(0deg, black 42%, transparent 43%);
    mask-size: 100% 500%;
    mask-repeat: no-repeat;
    mask-position: 0% 70%;


    mask-image: linear-gradient(-18deg, black 90%, transparent 94%);
    mask-size: 120% 120%;
    mask-repeat: no-repeat;
    mask-position: 0% 10%;


mask-image: url(../../_assets/images/edgeMask.png);
    mask-size: 100% 120%;
    mask-repeat: no-repeat;
    mask-position: 0% 50%;

    mask-size: 100% 160%;
    mask-repeat: no-repeat;
    mask-position: 0% 20%;
margin:0px;
padding:0px;



    mask-size: 100% 110%;
    mask-repeat: no-repeat;
    mask-position: 100% 82%;
    margin: 0px;
    padding: 0px;
    /* background-color: #fff;*/
}


#item-container.show .item-image{
opacity:1;
transition:opacity 0.25s ease-in;
transition-delay:0.2s;
animation: slide-up 0.2s ease-in-out 1;
animation-delay: 0.25s;
animation-fill-mode: forwards;
}

@keyframes slide-up {
  to {
    bottom:1px;
  }
}

#rarity-bg{
position:relative;
display:inline-block;
}
#rarity-bg img {
padding:0px;
margin:0px;
}
#contents {
    position: relative;
    width: 600px;
    top: 0px;
    bottom: 0px;
    line-height: normal;
    background-color: #252525;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.65) inset;
    padding-bottom: 0px;
min-height: 375px;
}
#item-header {
width:600px;
height:200px;
background-color:rgba(255,0,0,0.0);
position:relative;
top:0px;
left:0px;

background-image:url(../../_assets/images/arpg_rarity_mythic.png);
background-position:center top;
background-repeat:no-repeat;
}

.text {

/*text-shadow: 2px 0 0 var(--shadow-color), -2px 0 0 var(--shadow-color), 0 2px 0 var(--shadow-color), 0 -2px 0 var(--shadow-color), 1px 1px 0 var(--shadow-color), -1px -1px 0 var(--shadow-color), 1px -1px 0 var(--shadow-color), -1px 1px 0 var(--shadow-color), 1px 1px 5px var(--shadow-color);
*/
    
}

/*@supports (-webkit-text-stroke: var(--shadow-width) var(--shadow-color)) {*/
  .text {
--shadow-color: rgb(0,0,0,0.5);
--shadow-width: 2px;
   /* -webkit-text-fill-color: white;*/
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
padding: 0px;
    margin: 0px;
paint-order: stroke fill;
  }


#item-header .left-side {
position:relative;
padding-left:23px;
/*padding-top:13px;*/
width:410px;
height:200px;
max-width:430px;
z-index:10;
max-height:200px;
}

#item-header .right-side {
position:absolute;
width:300px;
height:300px;
max-width:300px;
max-height:300px;
overflow:clip;
bottom:1px;
right:-50px;
background-color:rgba(255,0,0,0.0);
}

.item-name-bounds{
position:relative;
display:block;
width:100%;
min-height:100px;
max-height:100px;
height:100px;
/*background:pink;*/
align-content: end;
}

.text.item-name{
    font-family: 'Montserrat-SemiBold';
    position: relative;
    background-color: rgba(0, 50, 0, 0.0);
    font-size: 36px;
    color: #fff;
    letter-spacing: 0.03em;
line-height: 1.2em;

min-height: 60px;
    align-content: center;
}

.text.item-flavor-text{
font-family: 'Montserrat-MediumItalic';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 18px;
    color: #9c9c9c;
    letter-spacing: 0.03em;
    line-height: 1.3em;
    margin-top: 14px;
    padding-left: 8px;
}

.text.item-flavor-text .item-flavor-author{
font-family: 'Montserrat-Medium';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 16px;
    color: #9c9c9c;
color:#7a7a7a;
    letter-spacing: 0.03em;
    line-height: 1.0em;
    margin-top: 8px;
    padding-left: 0px;
    display: block;
    margin-left: 0px;
}



.text.item-type{
font-family: 'Roboto-Regular';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.035em;
    line-height: 1.2em;
    text-transform: uppercase;
}

.text.item-score{
    font-family: 'Montserrat-SemiBold';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 52px;
    color: #fff;
    letter-spacing: 0.03em;
line-height: 1.0em;
padding-left:32px;
}
.text.item-score:after{
content:'';
position:absolute;
top:8px;
left:-4px;
width:34px;
height:34px;
background-image:url(../../_assets/images/itemlvl.png);
background-size:100% 100%;
background-position:center center;
background-repeat:no-repeat;

}
.name-divider {
    position: relative;
    width: 100%;
    display: block;
    height: 0.14em;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    margin-top: 5px;
    margin-bottom: 8px;
}

.text.item-main-stat{
font-family: 'Montserrat-SemiBold';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 98px;
    color: #fff;
    letter-spacing: 0.0em;
    line-height: 1.25em;
    padding-left: 32px;
}
.text.item-main-stat-type{
font-family: 'Montserrat-Bold';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 28px;
    color: #fff;
    letter-spacing: 0.0em;
    line-height: 1.25em;
    padding-left: 11px;
    text-transform: uppercase;
    padding-top: 19px;
}
.text.item-main-stat-range{
    font-family: 'Montserrat-Medium';
    position: relative;
    /* background-color: rgba(0, 255, 0, 0.0); */
    font-size: 20px;
    color: #6a6559;
    letter-spacing: 0.025em;
    line-height: 1.25em;
    padding-left: 11px;
    padding-top: 0px;
    font-weight: 800;
}

.text.item-main-stat-detail{
    font-family: 'Montserrat-Medium';
    position: relative;
    /* background-color: rgba(0, 255, 0, 0.0); */
    font-size: 26px;
    color: #6a6559;
    letter-spacing: 0.025em;
    line-height: 1.25em;
    padding-left: 11px;
    padding-top: 0px;
    font-weight: 800;
    font-size: 20px;
    color: #cacaca;
    font-weight: 500;
    font-weight: 400;
    
}

.text.item-main-stat-detail .value{
font-family: 'Montserrat-SemiBold';
color:#fff;
margin-right:6px;
}

#upgrade-diamonds {
--size: 52px;
--gutter: -7.5px;
position:relative;
width:600px;
height:40px;
text-align:center;
margin-top: calc(var(--size)* -0.42);
z-index:4;
}
#upgrade-diamonds .diamond{
position:relative;
display:inline-block;
width: var(--size);
height: calc(var(--size)* 0.82);
background-image:url(../../_assets/images/T_Diamond_Empty.png);
background-size:100% 100%;
background-position:center center;
background-repeat:no-repeat;
margin-left:var(--gutter);
margin-right:var(--gutter);
}

#upgrade-diamonds .diamond.success{
background-image:url(../../_assets/images/T_Diamond_Yellow.png);
}
#upgrade-diamonds .diamond.failure{
background-image:url(../../_assets/images/T_Diamond_Red.png);
filter: contrast(1.0) saturate(0.75) brightness(1.025);
}

#upgrade-diamonds .diamond:after{
    content: '';
    position: absolute;
    width: calc(var(--size)* 0.5);
    height: calc(var(--size)* 0.5);
    top: 49%;
    left: 49%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: #252525;
    z-index: -1;
    filter: blur(1px);
}

#upgrade-diamonds .diamonds-bg{

    height: 41%;
    bottom: 0px;
    /* left: 0px; */
    /* right: 0px; */
    background: #252525;
    position: absolute;
    z-index: -2;
    width: 30%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.75;
}

#main-stat-container {
position:relative;
width:600px;
/*height:130px;*/
padding-bottom:14px;
}

.row {
position:relative;
width:100%;
display:block;
}

.column {
display:inline-block;

min-height:20px;
vertical-align:top;
}

.corner-flair {
	mask-image: url(../../_assets/images/T_Loot_Corner.png);
	-webkit-mask-image: url(../../_assets/images/T_Loot_Corner.png);
	background-color: #000000;
	/*background-image: linear-gradient(70deg, #f109fe, #7c6fee, #61bae3);*/
	z-index: 0;
	mask-position: center;
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	position:absolute;
    top: 202px;
    left: 4px;
	width:600px;
	height:230px;
z-index:2;
pointer-events:none;
user-select:none;
filter: brightness(0.75);
}

.corner-flair.bottom {
    top: unset;
    bottom: 7px;
    transform: scaleX(-1) scaleY(-1);
    left: unset;
    right: 6px;
filter: brightness(0.6);
}

.shadow11 {
	position:absolute;
	top:0px;
	right:0px;
	width:200px;
	height:200px;
  mask-image: url(../../_assets/images/equipment/2024.09.05.14.36.17_512x512_SHADOW.png), 
  linear-gradient(-45deg,
    black 20%, transparent 50%);
  mask-repeat: space;
/*  -webkit-mask-image: url(http://yoksel.github.io/Sandbox/img/tiles/tile-transparent-black.png), linear-gradient(-45deg, black 20%, transparent 50%);*/
  -webkit-mask-image: url(../../_assets/images/equipment/2024.09.05.14.36.17_512x512_SHADOW.png);
    -webkit-mask-repeat: space;
    -webkit-mask-repeat: round;
z-index:2;
}

.masked {
  position:absolute;
  width: 600px;
  height: 200px;
  /*mask-repeat: no-repeat;
  mask-size: 100%;*/

  background: red;
  mask-image: url(../../_assets/images/T_StripeMask.PNG),
    linear-gradient(9deg, black, transparent);
}


.masker {
position: absolute;
    width: 600px;
    height: 200px;
    mask-image: url(../../_assets/images/bottomGradient.png);
    mask-repeat: space;
    /* -webkit-mask-image: url(http://yoksel.github.io/Sandbox/img/tiles/tile-transparent-black.png), linear-gradient(-45deg, black 20%, transparent 50%); */
    z-index: 0;
    bottom: 0px;
    background-image: url(../../_assets/images/T_StripeMask.PNG);
    background-position: center center;
    background-repeat: repeat;
    background-size: 30px 10px;
    mask-size: 600px 200px;
    mask-repeat: no-repeat;
    mask-position: bottom;
    mix-blend-mode: soft-light;
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}

#item-attributes {
--shadow-color: rgb(0,0,0,0.5);
--shadow-width: 2px;
position:relative;
/*width:600px;*/
display:block;
    padding-left: 28px;
    padding-right: 30px;
z-index:99;
}


.attr{
--color: var(--shadow-color);
    --width: var(--shadow-width);
    position: relative;
    /* width: 100%; */
    /* display: inline-block; */
display:flex;
    padding: 4px;
padding: 10px 4px;
padding-left:8px;
}


#item-attributes .attr:nth-child(even) {
background: rgba(255,255,255,0.01);
background: rgba(255,255,255,0.007);
background: rgb(30 30 30 / 40%);
}
#item-attributes .attr:nth-child(odd) {
background: rgba(255,255,255,0.035);
background: rgba(255,255,255,0.03);
background: rgb(30 30 30 / 80%);
}


#item-attributes > .attr:first-of-type {
border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#item-attributes > .attr:last-of-type {
border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}


#item-attributes .attr{
box-shadow: 0px 0px 0px 1px #4c432f inset;
box-shadow: 0px 0px 0px 1px #1f1f1f inset;
overflow:hidden;

    box-shadow: 0px 0px 0px 0.5px #1f1f1f inset;
    overflow: hidden;
}

#item-attributes .attr.sparkle:after{
content:'';
position:absolute;
top:0px;left:0px;right:0px;bottom:0px;
/*background-color:#C3AC77;*/
    z-index: -1;
    background-image: linear-gradient(90deg, rgba(195, 172, 119, 0.1) 0%, transparent 60%);


    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /* background-color: #C3AC77; */
    z-index: -1;
    background-image: linear-gradient(90deg, rgb(195 172 119 / 55%) 0%, transparent 100%);
    /* filter: blur(4px);*/

}

#item-attributes .attr:nth-child(odd):after {
background-image: linear-gradient(90deg, rgb(195 172 119 / 55%) 0%, transparent 100%);
}
#item-attributes .attr:nth-child(even):after {
background-image: linear-gradient(90deg, rgb(195,172,119, 0.1) 0%, transparent 100%);
}

#item-attributes .attr p {
-webkit-text-stroke: var(--width) var(--color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
    font-family: 'Montserrat-SemiBold';
    position: relative;
    /* background-color: rgba(0, 255, 0, 0.0); */
    font-size: 22px;
    color: #d4d4d4;
    letter-spacing: 0.05em;
    line-height: 1.25em;
    padding-left: 5px;
    padding-top: 1px;
    font-weight: 400;
}
.attr p .attr-value {
margin-right: 8px;
color:#ffffff;
}
.attr p .attr-range {
    margin-left: 8px;
    color: #BCB29A;
    color: rgba(188, 178, 154, 0.5);
    font-size: 18px;
    vertical-align: middle;
}

.attr .attr-icon {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-block;
    background-image: url(../../_assets/images/ping_icon_default.png);
    background-position: center 62%;
    background-repeat: no-repeat;
    background-size: 80% 80%;
}
.attr.sparkle .attr-iconxx {
background-image: url(../../_assets/images/ping_icon_sparkle3.png);
opacity:0.85;
}

.attr.sparkle .attr-icon {
    /* background-image: url(../../_assets/images/socket_icon2.png); */
    background-image: none;
    opacity: 0.85;
    mask-image: url(../../_assets/images/ping_icon_sparkle3.png);
    background-color: #ffe6c0;
    mask-size: 78%;
    mask-position: center center;
    mask-repeat: no-repeat;
}


.attr.socket .attr-icon {
    /* background-image: url(../../_assets/images/socket_icon2.png); */
    background-image: none;
    opacity: 0.7;
    mask-image: url(../../_assets/images/socket_icon2.png);
    background-color: var(--attr-color);
    mask-size: 82%;
    mask-position: center center;
    mask-repeat: no-repeat;
}

.attr p .is-percent {
font-size: 20px;
    vertical-align: text-bottom;
}


.attr.socket p.text {
color:var(--attr-color);
}

#item-attributes .attr.socket p {
color:var(--attr-color);
opacity:0.75;
font-size:22px;
}

#item-attributes .attr.sparkle p.text {
color:#ffe6c0;

}

#item-attributes .attr.sparkle p .attr-value {
color:#ffe6c0;

}


.attr:first-of-type {
border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/*#item-attributes .attr:nth-last-of-type(0) {
.item-attributes .attr:not(:last-child) {*/
.item-attributes .attr:last-of-type {
border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;

}





:root {
  --primary-color: #185ee0;
  --secondary-color: #e6eef9;
}

.tab-container {
  position: absolute;
  left: 0;
  top: 18px;
  right: 0;

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

    font-family: 'Montserrat-SemiBold';
    position: relative;
    /* background-color: rgba(0, 255, 0, 0.0); */
    font-size: 12px;
    color: #6a6559;
    letter-spacing: 0.025em;
    line-height: 1.25em;
    font-weight: 400;
user-select:none;
}

.tabs {
    display: flex;
    position: relative;
    background-color: #111111;
    box-shadow: 0 0 1px 0 rgb(255 255 255 / 10%), 0 0px 0px 1px rgb(255 255 255 / 10%);
    padding: 0.25rem;
    border-radius: 99px;
	overflow:hidden;
}
.tabs * {
  z-index: 2;
--rarity-1: #6A6A6A;
--rarity-2: #497938;
--rarity-3: #2D7185;
--rarity-4: #843F88;
--rarity-5: #CB7800;
--rarity-6: #A88555;
--rarity-0: #3d4d4a;
}

.tabs * {	/* NEW STUFF */
  z-index: 2;
--rarity-1: #6A6A6A;
--rarity-2: #2D7185;
--rarity-3: #c1a025;
--rarity-4: #CB7800;
--rarity-5: #497938;
--rarity-6: #A88555;
--rarity-0: #3d4d4a;
}

input[type=radio] {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 97px;
  /*font-size: 1.25rem;*/
  font-weight: 400;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s ease-in;
}

.notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 0.75rem;
  border-radius: 50%;
  background-color: var(--secondary-color);
  transition: 0.15s ease-in;
}

input[type=radio]:checked + label {
  color: var(--primary-color);
}
input[type=radio]:checked + label > .notification {
  background-color: var(--primary-color);
  color: #fff;
}

input[id=radio-1]:checked ~ .glider {
  transform: translateX(0);
  background-color:var(--rarity-1);
}

input[id=radio-2]:checked ~ .glider {
  transform: translateX(100%);
  background-color:var(--rarity-2);
}

input[id=radio-3]:checked ~ .glider {
  transform: translateX(200%);
  background-color:var(--rarity-3);
}

input[id=radio-4]:checked ~ .glider {
  transform: translateX(300%);
  background-color:var(--rarity-4);
}

input[id=radio-5]:checked ~ .glider {
  transform: translateX(400%);
  background-color:var(--rarity-5);
}

input[id=radio-6]:checked ~ .glider {
  transform: translateX(500%);
  background-color:var(--rarity-6);
}

input[id=radio-1]+ label {
  color: var(--rarity-1);
}
input[id=radio-2]+ label {
  color: var(--rarity-2);
}
input[id=radio-3]+ label {
  color: var(--rarity-3);
}
input[id=radio-4]+ label {
  color: var(--rarity-4);
}
input[id=radio-5]+ label {
  color: var(--rarity-5);
}
input[id=radio-6]+ label {
  color: var(--rarity-6);
}

input[type=radio]:checked + label {
  color: #fff;
-webkit-text-stroke: 2px rgba(0,0,0,0.35);
    paint-order: stroke fill;
}


.glider {
  position: absolute;
  display: flex;
  height: 28px;
  width: 97px;
  background-color: var(--secondary-color);
  z-index: 1;
  border-radius: 99px;
  transition: 0.25s ease-out;

  box-shadow:0px 0px 0px 0.15em rgba(0,0,0,0.5) inset;
  opacity:0;
}

@media (max-width: 600px) {
  .tabs {
    transform: scale(0.6);
  }
}

.market-details{
position:relative;
width:600px;
display:inline-block;
background-color:rgba(255,0,0,0.0);
margin-top:30px;
margin-bottom:20px;
z-index:2;
}
.market-details .innards{
    position: relative;
    width: 538px;
    margin-left: 26px;
    margin-right: 28px;
    background-color: rgba(0, 255, 0, 0.0);
}
.icon-group {
display:inline-block;
position:relative;
max-height: 32px;
}
.icon-group.align-left{
float:left;
}
.icon-group.align-right{
float:right;
}

.icon{
	width:34px;
	height:34px;
	position:relative;
    background-image: url(../../_assets/images/coins_icon.png);
    background-size:100%;
	background-position: center center;
	background-repeat:no-repeat;
    opacity: 1;
    /*mask-image: url(../../_assets/images/coins_icon.png);
    background-color: #ff0000;
    mask-size: 82%;
    mask-position: center center;
    mask-repeat: no-repeat;*/
	display:inline-block;
vertical-align: middle;

}
.icon.sell-value{
background-image: url(../../_assets/images/coins_icon.png);
}
.icon.trades-left{
background-image: url(../../_assets/images/T_Icon_Trade15.png);
width: 28px;
    height: 28px;
    top: 0px;
}
.icon.market-demand{
    background-image: url(../../_assets/images/T_Icon_Market21.png);
    width: 33px;
    height: 23px;
    top: 3px;
    vertical-align: text-bottom;
}
.icon:after{
	content:'';
	position:absolute;
	top:0px;left:0px;right:0px;bottom:0px;
    /* background-image: url(../../_assets/images/socket_icon2.png); */
    background-image: none;
    opacity: 1.0;
    mask-image: url(../../_assets/images/coins_icon.png);
    background-color: #cbb9a2;
    mask-size: 95%;
    mask-position: center center;
    mask-repeat: no-repeat;
mix-blend-mode: multiply;
  z-index: 10;  
}
.icon.sell-value:after{
mask-image: url(../../_assets/images/coins_icon.png);
}
.icon.trades-left:after{
mask-image: url(../../_assets/images/T_Icon_Trade14.png);
mask-size: 100%;
mask-image: None;
mask-size: 100%;
background-color:transparent;
}
.icon.market-demand:after{
mask-image: url(../../_assets/images/T_Icon_Market17.png);
mask-image: None;
mask-size: 100%;
background-color:transparent;
}
.text.item-sell-value-text, .text.item-trade-value-text, .text.item-trades-count-text{
font-family: 'Montserrat-SemiBold';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 0.03em;
    line-height: 1.25em;
    padding-right: 3px;
	padding-left:3px;
	display:inline-block;
vertical-align: middle;
}

.text.item-trades-count-text {
color:#e2e2e2;
}

.text.item-trade-value-text{
margin-left: 24px;
    text-transform: capitalize;
    --shadow-width: 0.2em;
    --shadow-color: rgba(0, 0, 0, 0.45);
    letter-spacing: 0.025em;
    padding-left: 5px;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 900;
    font-family: 'Montserrat-Bold';
filter: saturate(0.5);

/*-------------------*/
margin-left: 24px;
    text-transform: capitalize;
    --shadow-width: 0.2em;
    --shadow-color: rgba(0, 0, 0, 0.45);
    letter-spacing: 0.02em;
    padding-left: 5px;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 100;
    font-family: 'Montserrat-SemiBold';
    filter: saturate(0.5);
}


.text.item-trade-value-text.feedback-unknown{
color:#8c8c8c;
}
.text.item-trade-value-text.feedback-low{
color:#af453b;
}
.text.item-trade-value-text.feedback-moderate{
color:#b9b83b;
}
.text.item-trade-value-text.feedback-high{
color:#78c73c;
}
.text.item-trade-value-text.feedback-exceptional{
color:#29c5df;
}

.text.item-trade-value-text:after{
--arrow-size: 18px;
content:'';
position:absolute;
left:calc(var(--arrow-size) * -1);
top:0px;
width:var(--arrow-size);
height:var(--arrow-size);
background-image: url(../../_assets/images/T_Icon_Arrow_Up.png);
    background-size:100%;
	background-position: center center;
	background-repeat:no-repeat;
}

.text.item-trade-value-text.feedback-exceptional:before{
--arrow-size: 24px;
    content: '';
    position: absolute;
    left: calc(calc(var(--arrow-size)* -1) - -9px);
    top: -4px;
    width: var(--arrow-size);
    height: var(--arrow-size);
    background-image: url(../../_assets/images/T_Icon_Sparkles_Small.png);
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 3;
    transform: scaleX(-1);
filter: saturate(1.5);
}

/*['unknown', 'low', 'fair', 'high', 'exceptional'];*/

.text.item-trade-value-text.feedback-unknown:after{
background-image: url(../../_assets/images/T_Icon_Arrow_Dots.png);
top: 4px;
    left: -14px;
}
.text.item-trade-value-text.feedback-low:after{
background-image: url(../../_assets/images/T_Icon_Arrow_Down.png);
top:4px;
}
.text.item-trade-value-text.feedback-moderate:after{
background-image: url(../../_assets/images/T_Icon_Arrow_Fair.png);
top:0px;
}
.text.item-trade-value-text.feedback-high:after{
background-image: url(../../_assets/images/T_Icon_Arrow_Up.png);
top:0px;
}
.text.item-trade-value-text.feedback-exceptional:after{
background-image: url(../../_assets/images/T_Icon_Arrow_Exceptional.png);
top:0px;
}


.text.item-required-level-text{
font-family: 'Montserrat-SemiBold';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 0.03em;
    line-height: 1.25em;
    padding-right: 3px;
	padding-left:3px;
	display:inline-block;
vertical-align: middle;

display: block;
    text-align: right;
    font-family: 'Montserrat-Medium';
    color: #939393;
	font-size:17px;
}

.has-fire-color {
    color: #fb590e !important;
	font-weight: 900 !important;
}
.has-cold-color {
    color: #78aac4 !important;
	font-weight: 900 !important;
}
.has-lightning-color {
    color: #ccc8ff !important;
	font-weight: 900 !important;
}
.has-physical-color {
    color: #8c8282 !important;
	font-weight: 900 !important;
}
.has-poison-color {
    color: #7fb755 !important;
	font-weight: 900 !important;
}
.has-shadow-color {
    color: #9b51e0 !important;
	font-weight: 900 !important;
}
.has-holy-color {
    color: #d8c197 !important;
	font-weight: 900 !important;
}
.has-necrotic-color {
    color: #72c8af !important;
	font-weight: 900 !important;
}

.item-main-stat-detail .is-percent {
font-size: 18px;
    vertical-align: text-bottom;
}
.item-main-stat-detail .is-time {
font-size: 18px;
    vertical-align: inherit;
}

.has-gradient{
background: -webkit-linear-gradient(328deg, #ffffff, #ffffff, #ff6631);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#item-special-perk {
position:relative;
width:542px;
display:inline-block;
background-image:url(../../_assets/images/arpg_special_new_legendary.png);
background-size: 100% auto;
background-repeat:no-repeat;
background-position:left top;
margin-top: 14px;
border-radius: 4px;
    overflow: hidden;

    background-size: 550px auto;
    background-repeat: no-repeat;
    background-position: -4px -2px;
    margin-top: 14px;
    border-radius: 2px;
    overflow: hidden;
}

#item-special-perk:after {
content:'';
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
pointer-events:none;
user-select:none;
box-shadow: 0px 0px 0px 0.08em var(--rarity-color,"#000000") inset;
    filter: brightness(0.5) saturate(0.5);
    opacity: 1;

filter: brightness(0.75) saturate(0.75);
    opacity: 0.5;

filter: brightness(0.5) saturate(0.75);
    opacity: 0.75;

border-radius:2px;
}


#item-special-perk-content {
    position: relative;
    width: calc(100% - 60px);
    display: inline-block;
    padding-top: 10px;
    padding-left: 45px;
    padding-bottom: 10px;
}

.aspect-icon {
    --aspect-icon-size: 29px;
    position: absolute;
    width: var(--aspect-icon-size);
    height: var(--aspect-icon-size);
    top: 11px;
    left: 10px;
    background-image: none;
    opacity: 1.0;
    mask-image: url(../../_assets/images/arpg_special_new_icon.png);
    background-color: var(--rarity-color);
    mask-size: 82%;
    mask-size: 100%;
    mask-position: center center;
    mask-repeat: no-repeat;
    /* filter: brightness(1.2) saturate(0.5);*/
	z-index:0;
}
.aspect-icon-shadow{
    --aspect-icon-size: 29px;
    position: absolute;
    top: 11px;
    left: 10px;
    width: var(--aspect-icon-size);
    height: var(--aspect-icon-size);
    background-image: url(../../_assets/images/arpg_special_new_icon.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    filter: brightness(0.0) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}

.text.aspect-name {
    font-family: 'Montserrat-SemiBold';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 22px;
    color: var(--rarity-color,"#ffffff");
    letter-spacing: 0.01em;
line-height: 1.2em;

    /*filter: brightness(1.2) saturate(0.5);*/
}

.text.aspect-name .aspect-range{
    margin-left: 5px;
    font-size: 18px;
    font-family: 'Montserrat-SemiBold';
    letter-spacing: 0.04em;
    vertical-align: bottom;
    /* color: #a9a9a9; */
filter: brightness(1.1) saturate(0.65);
    opacity: 0.55;
}

.text.aspect-textxx {
    font-family: 'Montserrat-Medium';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 20px;
    color: #cbcbcb;
    letter-spacing: 0.01em;
    line-height: 1.1em;
    /* filter: brightness(1.2) saturate(0.5); */
    margin-top: 2px;
}
.text.aspect-text {
font-family: 'Montserrat-SemiBold';
    position: relative;
    background-color: rgba(0, 255, 0, 0.0);
    font-size: 18px;
    color: #cbcbcb;
    letter-spacing: 0.02em;
    line-height: 1.15em;
line-height: 1.32em;
    /* filter: brightness(1.2) saturate(0.5); */
    margin-top: 2px;
	padding-left:2px;
}

/*
c_skill
c_item
c_set_item
c_set_bonus
c_float
c_int
c_time
c_important
c_set_description

*/


.text.aspect-text span.c_skill{
	color:#ff6631;
	color:#f19a47;
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
}
.text.aspect-text span.c_item{
	color:#57be63;
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
}
.text.aspect-text span.c_set_item{
	color:#57be63;
	display:block;
	
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
padding-left:10px;
}
.text.aspect-text span.c_set_bonus{
	color:#e4e4e4;
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
}
.text.aspect-text span.c_set_bonus:before{
	content:'';
	position:relative;
	display:block;
	height:0px;
	background:red;
}
.text.aspect-text span.c_float{
	color:#e0bb8b;
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
}
.text.aspect-text span.c_int{
	color:#e0bb8b;
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
}
.text.aspect-text span.c_time{
	color:#6bb2d3;
	color:#83b8d1;
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
}
.text.aspect-text span.c_important{
	color:#ffffff;
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
    display: inline-block;
    position: relative;
}
.text.aspect-text span.c_importantxx:after{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 1px;
    background-color: transparent;
    border-bottom-width: 3px;
    opacity: 0.95;
    border-bottom-style: dotted;
    /* border-spacing: 4px; */
    transform: scaleY(0.2) scaleX(1.06);
}
.text.aspect-text span.c_set_description{
	color:#78d483;
    --shadow-width: 0.16em;
    --shadow-color: rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: var(--shadow-width) var(--shadow-color);
    padding: 0px;
    margin: 0px;
    paint-order: stroke fill;
}