/* warboy intro main page (unused)*/
.warboy-intro,
.warboy-intro-alt{
   font-weight: 500;
   font-size: 48px;
   font-family: 'MedievalSharp', cursive;
   color: rgba(219, 217, 193, .8);
   color: rgba(107, 110, 115, 1);
}
.warboy-intro-alt{
   color: rgba(135, 135, 208, .8);
   font-weight: 700;
}


/* img border / stat popover */
.img-stat-popover,
.img-border{
   border-radius: 2px;
   border: 1px solid rgba(22,22,22,.92);
    box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
}
.img-stat-popover{
   width: 300px;
}


/*------------------------------------------------------------------------------
   background images
------------------------------------------------------------------------------*/
/* background image */
/*
.background-img{
    background-repeat: no-repeat;
    background-size: 500px;
    background-position-x: 30%;
    background-position-y: 170px;
}
.background-img.mage,
.background-img.intelligence{
   background-image: url(../image/background/mage_silhouette.png);
}
.background-img.warrior,
.background-img.strength{
   background-image: url(../image/background/warrior_silhouette.png);
}
.background-img.hunter,
.background-img.agility{
   background-image: url(../image/background/hunter_silhouette.png);
}

.background-img.classes{
   background-image: url(../image/background/classes_silhouette.png);
   background-size: 1500px;
}

.background-img.bushes{
   background-image: url(../image/background/bushes_silhouette.png);
   background-size: 1100px;
   background-position-x: 40%;
}

.background-img.huntersMark,
.background-img.wisdom{
   background-image: url(../image/background/wisdom_silhouette.png);
   background-size: 800px;
   background-position-x: 10%;
   background-position-y: 300px;
}
.background-img.huntersMark{
   background-image: url(../image/background/huntersMark_silhouette.png);
}

.background-img.guide{
   background-image: url(../image/background/skeleton_detailed_silhouette.png);
   background-position-x: 20%;
   background-position-y: 300px;
}

.background-img.mana{
   background-image: url(../image/background/mana_silhouette.png);
   background-size: 1000px;
   background-position-x: 10%;
   background-position-y: 200px;
}
*/


/*------------------------------------------------------------------------------
   background img NEW
------------------------------------------------------------------------------*/
/* new make everythign castle bg */
.background-img{
   background-image: url(../image/background/castle.png);
   background-repeat: no-repeat;
   background-size: cover;
}
@media (max-width: 767px) {/* only below this size */
   .background-img{
      background-position-x: -450px;
   }
}
/* need to change color of up arrows to fit background img */
.arrow-up{
   border-bottom-color: #3c3a3a;
}


/*------------------------------------------------------------------------------
   index page overrides
------------------------------------------------------------------------------*/
body.index .navbar{
   box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 35%);
}
body.index .navbar-nest-gradient.shadow{
   box-shadow: 0px -144px 144px -144px rgba(0,0,0,.34) inset;
   -webkit-box-shadow: 0px -144px 144px -144px rgba(0,0,0,.34) inset;
   -moz-box-shadow: 0px -144px 144px -144px rgba(0,0,0,.34) inset;
}
.navbar-item.index{
   width: 0px !important; 
   padding: 0px;
   margin: 0px; 
   opacity: 0;
}



/*------------------------------------------------------------------------------
   hero video
------------------------------------------------------------------------------*/
.hero-video{
   position: relative;
   height: 100%;
}

.hero-video,
.hero-video video {
  width: 100%;
  display: block;
}

.hero-video {
  position: relative;
  margin: 0 auto;
  margin-top: -70px;
}

.video-blurred-wrapper{
   overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
        bottom: 70px;
    width: 100%;
    background: rgb(7, 18, 26);
}

.hero-video video.video-trailer {
  filter: contrast(1.02) saturate(1.02);
}
.hero-video video.video-blurred {
  filter: brightness(82%);
}

.hero-video  video.video-trailer{
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover; /* if you want to cover the entire .hero-video */
  position: relative;
  /*box-shadow: 0px 1px 2px rgba(0,0,0,.2);*/
}

.hero-video  video.video-blurred{
  border:1px solid rgb(39 40 41);
  /*box-shadow: 0px 1px 2px rgba(0,0,0,.2);*/
}

@media (min-width: 1250px) {/* only above this size */
   .hero-video  video.video-trailer{
     margin-top: -100px;
   }
}

@media (min-width: 1400px) {/* only above this size */
   .hero-video  video.video-trailer{
     margin-top: -180px;
   }
}

@media (min-width: 1600px) {/* only above this size */
   .hero-video  video.video-trailer{
     margin-top: -220px;
   }
}

@media (min-width: 1800px) {/* only above this size */
   .hero-video  video.video-trailer{
     margin-top: -300px;
   }
}



/*------------------------------------------------------------------------------
   hero video action buttom
------------------------------------------------------------------------------*/
.hero-video-button{
   width: 300px; 
   overflow: hidden;
   position: absolute;
   margin-top: -220px;
   margin-left: calc(50% - 150px);
   text-shadow: rgba(0,0,0,.4) 1px 1px 1px;
   transition-duration: .2s;
   letter-spacing: .03em;
}

.btn-outline-white{
   border-color:  white;
   color: white;
   background-color: transparent;
}

.hero-video-button:hover,
.hero-video-button:active{
   background-color: #404EED;
   border-radius: 0;
}

.btn-outline-white:focus,
.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white{
    border-color:  white
}


/*------------------------------------------------------------------------------
   article title vertial
------------------------------------------------------------------------------*/
.article-area{
   margin-top: 45px;
   width: 100%;
}

.article-vertical-title{
      font-family: Montserrat, sans-serif;
      margin-top: 71px;
      left: -48px;
       
    rotate: -90deg;
    position: absolute;
    margin-left: 0px;
    letter-spacing: .2rem;
    opacity: .66;
    font-size: 10px;
    color: #c4c2ae;
}


/*------------------------------------------------------------------------------
   hero video & article area media breakpoints
------------------------------------------------------------------------------*/
@media (max-width: 900px) {/* only below this size */
   .hero-video {
      margin-top: 0px;
   }

   .hero-video-button{
      margin-top: 30px;
    border-color: hsl(46 7% 56% / 1);
    color:hsl(46 7% 56% / 1);
    text-shadow: none;
   }

   .article-area {
      margin-top: 125px;
   }
   
   .hero-video  video.video-trailer
   {
     width: 900px !important;
   }
}

@media (max-width: 700px) {/* only below this size */
   .hero-video  video.video-trailer
   {
     width: 900px !important;
     margin-left: -100px;
   }
}

@media (max-width: 600px) {/* only below this size */
   .hero-video  video.video-trailer
   {
     width: 800px !important;
     margin-left: -100px;
   }
}

@media (max-width: 500px) {/* only below this size */
   .hero-video  video.video-trailer
   {
     width: 800px !important;
     margin-left: -150px;
   }
}

@media (max-width: 400px) {/* only below this size */
   .hero-video  video.video-trailer
   {
     margin-top: -20px;
     width:  800px !important;
     margin-left: -200px;
   }
}

@media (max-width: 375px) {/* only below this size */
   .hero-video  video.video-trailer
   {
     margin-top: -55px;
     width: 800px !important;
     margin-left: -212.5px;
   }
}

@media (min-width: 2560px) {/* only over this size */
   .hero-video  video.video-trailer{
     max-width: 1350px;
      padding-top: 110px;
   }
   .hero-video-button{
     transform: scale(1.33);
     margin-top: -240px;
   }
}


/*------------------------------------------------------------------------------
   article scroll area
------------------------------------------------------------------------------*/
.article-outer-container {
  width: 100%;
  overflow: hidden; /* This will hide the scrollbar */
  padding-bottom: 30px; /* This should be larger than the height of the scrollbar */
  
  max-width: 1630px;
  margin: 0 auto;
}

/* doesnt scroll until smaller */
.article-scroll-area {
  width: 100%;
  height: auto;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.article-scroll-area::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

/* desktop doesnt scroll, it uses jquery draggable */
.article-scroll-area.isDesktop {
  overflow-x: visible;
  overflow-y: visible;
}

@media (max-width: 1800px) {/* only below this size */
   .article-outer-container {
     margin-left: 70px;
   }
   
   .article-scroll-area:not(.isDesktop) {
      overflow-x: scroll;
    }
}

@media (min-width: 2560px) {/* only over this size */
   .article-area{
      margin-top: 100px;
   }

   .article-outer-container,
   .article-vertical-title{
      transform: scale(1.33);
   }
   
}


/*------------------------------------------------------------------------------
   article cards
------------------------------------------------------------------------------*/
.card {
  display: inline-flex;
  width: 460px;
  height: 190px;
  margin-left: 0px;
  margin-right: 100px;
  
  background-color: hsl(20deg 3% 16% / 70%);
  border: 2px solid #282726; /* This adds an outline to the cards */
  /* border-color: #464547; */
  
   vertical-align: top;
   cursor: pointer;
   overflow: hidden;
}

.card,
.card-article-type,
.card-title,
.card-desc{
   transition-duration: .3s;
   text-decoration: none !important;
}

.card img {
  width: 150px;
  height: 100%;
  transition-duration: .6s;
  transition-timing-function: ease-out;
}

.card-text-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* align content to start */
  padding: 8px 15px;
  width: calc(100% - 150px);
  min-height: 0; /* This is the key part */
}

.card-article-type {
  font-size: 14px;
  letter-spacing: .1rem;
  font-weight: 600;
  color: #6B6E73;
  opacity: .75;
  text-transform: uppercase;
}

.card-title {
  color : hsl(46 7% 56% / 1);
  color: hsl(46deg 11% 68%);
  font-size: 16px;
  font-weight: 600;
  margin-top: 13px;
  margin-bottom: 5px;
  letter-spacing: .01em;
}

.card-desc {
   width: 100%;
   margin-bottom: 0px;
}


/*------------------------------------------------------------------------------
   card : hover
------------------------------------------------------------------------------*/
.card:hover{
   border-color: rgba(135,135,208,1);
   background-color: hsl(20deg 3% 14% / 80%);
}

.card:hover .card-article-type,
.card:hover .card-title,
.card:hover .card-desc{
   color: rgba(135,135,208,1);
}

.card:hover img{
    width: 180px;
    height: 120%;
    margin-top: -15px;
    margin-left: -30px;
    filter: saturate(1.15) brightness(1.1) contrast(1.08);
}

/*------------------------------------------------------------------------------
   decorative corner and border
------------------------------------------------------------------------------*/
.decorative-corner{
    width: 85px;
    float: right;
    opacity: .2;
}
.decorative-corner.left{
   margin-left: 0px;
    float: left;
   -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

@media (max-width: 600px) {/* only below this size */
   .decorative-corner{
      width: 50px;
   }
   .hero-video {
      border-bottom-width: 2px;
    }
}
@media (min-width: 1200px) {/* only above this size */
   .decorative-corner{
      width: 95px;
   }
}


/*------------------------------------------------------------------------------
   so p is full screen even when within xs-col
------------------------------------------------------------------------------*/
@media (max-width: 475px) {/* only below this size */
   p.wide-xss{
      width: 155%;
   }
}


/*------------------------------------------------------------------------------
   landing page background
------------------------------------------------------------------------------*/
.landing-page-wide-image{
   width: 100%;
   height: auto;
   filter: saturate(1.08) brightness(1.01) contrast(1.01);
}

.landing-page-background{
   width: 100%; 
   height: 1000px;
   background: black;
   margin-top: -200px; 
   margin-bottom: -110px;
   
   background: #41553d;
   /* background: hsl(110deg 36.4% 32.44% / 30%); */
   
      background-image: url(../image/background/greenfavor.png);
   background-repeat: no-repeat;
   background-size: cover;
}

.landing-page-background-inner{
   top: 30%;
   position: relative;
   width: 80%;
   margin: auto;
}

/* alternative for home page footer copyright color and links */
.index .page-footer .copyright {
    color: hsl(107 10% 48% / 1);
    opacity: .62;
}

.index .page-footer a{
    color: #81858b;
}


/*------------------------------------------------------------------------------
   landing page row items
------------------------------------------------------------------------------*/
.landing-page-item-row-wrapper
{
   margin-left: 100px;
}

.landing-page-item-row{
   margin: auto;
   max-width: 1140px;
}

.landing-page-item-row img
{
   max-width: 200px;
}

.landing-page-item-row h3
{
    opacity: 1;
    color: #3CAD4B;
}

@media (max-width: 900px) {/* only below this size */
   .landing-page-item-row-wrapper
   {
      margin-left: 0px;
   }
}


/*------------------------------------------------------------------------------
   hr grad special spacine when above 900px
------------------------------------------------------------------------------*/
@media (min-width: 901px) {/* only above this size */
   .xlg-hr-grad-margin-top-none
   {
      margin-top: 0px !important;
   }
   .xlg-hr-grad-margin-bottom-large
   {
      margin-bottom: 80px !important;
   }
   .xlg-hr-grad-margin-top-large   
   {
      margin-top: 60px !important;
   }
}


/*------------------------------------------------------------------------------
   scroll
------------------------------------------------------------------------------*/
.scroll {
    position: relative;
    width: 100%;
    width: 432px;
}

.scroll img {
    width: 100%;
    height: auto;
}


/*------------------------------------------------------------------------------
   scroll text
------------------------------------------------------------------------------*/
.scroll-text  {
    position: absolute;
    top: 53px;
    left: 55px;
    width: 72%;
    color: #5C574B;
    font-size: 14px;
    line-height: 1.5;
    color: #5C574B;
    font-weight: 600;
}

.scroll-text .scroll-title{
   font-family: 'MedievalSharp', cursive;
   font-size: 22px;
   letter-spacing: .02em;
   line-height: 2;
   font-weight: 700;
}

.scroll-text .scroll-text-small{
    font-size: 12px;
    opacity: .62;
    marign-left: 5px;
    position: relative;
    margin-left: 15px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
}



/*------------------------------------------------------------------------------
   scroll btn
------------------------------------------------------------------------------*/
.scroll-btn,
.scroll-btn.btn-huge{
   font-family: 'MedievalSharp', cursive;
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 26px;
    
    padding-left: 7px;
    margin-left: -7px;
}

.scroll-btn .icon.glyph{
       width: 48px;
    margin-top: -20px;
    margin-right: -18px;
    
    filter: grayscale(100%) brightness(15%) sepia(100%) hue-rotate(-8deg) saturate(2101%);
    opacity: .8;
}

.scroll-btn,
.scroll-btn .icon.glyph{
   transition-duration: .2s;
}

.btn-outline-red:hover .icon.glyph,
.btn-outline-red:active .icon.glyph{
    filter: brightness(1000%);
    opacity: 1;
}


/*------------------------------------------------------------------------------
   text to side of scroll
------------------------------------------------------------------------------*/
.scroll-side-text-wrapper{
   margin-top: 5%;
}

.scroll-side-text{
    font-size: 30px;
    color: #cecdbb;
    font-style: italic;
    letter-spacing: .02em;
    font-weight: 300;
}

@media (max-width: 1025px) {/* only below this size */
   .scroll-side-text{
      margin-left: 80px;
      margin-right: -30px;
   }
}

@media (max-width: 767px){ /* only below this size */
   .scroll-side-text{
      margin-left: 0px;
      margin-right: 0px;
   }
   .scroll-side-text-wrapper{
      margin-top: 10%;
   }
}


/*------------------------------------------------------------------------------
   scroll media breakpoints
------------------------------------------------------------------------------*/
@media (min-width: 1600px) {/* only over this size */
   .scroll{
         margin-left: 100px;
   }
}
@media (min-width: 1800px) {/* only over this size */
   .scroll{
         margin-left: 200px;
   }
}
@media (min-width: 2560px) {/* only over this size */
   .scroll{
      transform: scale(1.33);
      margin-left: 320px;
   }
   .scroll-side-text-wrapper{
      margin-left: -130px;
   }
}

@media (max-width: 500px) {/* only below this size */
   .scroll{
      margin-left: -50px;
      transform: scale(.8);
      margin-top: -30px;
   }
   .scroll-btn{
      margin-left: -17px !important;
      font-size: 22px;
   }
   .scroll-btn .icon.glyph{
      margin-right: -23px;
      margin-top: -17px;
   }
}


/*------------------------------------------------------------------------------
   landing page container & scroll side text media breakpoints
------------------------------------------------------------------------------*/
/* BELOW THESE SIZES */
@media (max-width: 900px) {/* only below this size */
   .landing-page-background{
      margin-top: -170px; 
   }
}

@media (max-width: 800px) {/* only below this size */
   .landing-page-background{
      margin-top: -120px; 
   }
   .landing-page-background-inner{
       top: 20%;
   }
}
@media (max-width: 767px){ /* only below this size */
   .landing-page-background{
      margin-bottom: -135px; 
   }
   .landing-page-background-inner {
       margin-bottom: -140px;
   }
}
@media (max-width: 600px) {/* only below this size */
   .landing-page-wide-image{
      margin-left: -120px;
      width: 200%;
      margin-top: -30px;
    }
    
    .landing-page-background-inner{
      margin-top: -160px; 
   }
}

/* ABOVE THESE SIZES */
@media (min-width: 1300px) {/* only over this size */
   .landing-page-background{
      margin-top: -300px; 
   }
   .landing-page-background-inner{
      top: 40%;
  }
}
@media (min-width: 2000px) {/* only over this size */
   .landing-page-background{
      margin-top: -500px; 
   }
}
@media (min-width: 2560px) {/* only over this size */
   .landing-page-background{
      height: 1333px;
   }
}
@media (min-width: 3000px) {/* only over this size */
   .landing-page-background{
      margin-top: -700px; 
   }
}


/*------------------------------------------------------------------------------
   icon
------------------------------------------------------------------------------*/
/* general icon */
.icon{
   margin-top: -4px;
   width: 18px;
}
/* title icon */
h2 > .icon{
   width: 24px;
   vertical-align: bottom;
}

/* hovering makes picture img border gold if not glyph */
.link:hover:not(.dead):not(.current) .icon:not(.glyph),
.link:focus:not(.dead):not(.current) .icon:not(.glyph),
.link:active:not(.dead):not(.current) .icon:not(.glyph){
    outline: 1px solid hsl(51deg 62% 47%);
    filter: sepia(100) saturate(285%);
}

/* current has common border */
.link.current:not(.dead) .icon:not(.glyph),
.link.current:hover:not(.dead) .icon:not(.glyph),
.link.current:focus:not(.dead) .icon:not(.glyph),
.link.current:active:not(.dead) .icon:not(.glyph){
    outline: 1px solid #b6b4a1;
}

/*------------------------------------------------------------------------------
   icon glyph
------------------------------------------------------------------------------*/
/* icon for glyph is a little larger and given margins and give color to a white image */
.icon.glyph,
h2 > .icon.glyph{
   filter: brightness(70%) sepia(100) saturate(.5) hue-rotate(12deg);
}
.icon.glyph{
    width: 32px;
    margin-top: -9px;
    margin-bottom: -5px;
    margin-left: -5px;
    margin-right: -6px;
}
h2 > .icon.glyph{
   width: 48px;
    margin-top: -32px;
    margin-left: -9px;
    margin-right: -10px;
    margin-bottom: -8px;
}

/* link is colored blue */
.link .icon.glyph{
   filter: brightness(47%) sepia(1) saturate(2) hue-rotate(203deg);
   opacity: .88;
}

/* icon glyph, title and current color are beige */
.link.current .icon.glyph,
.link.dead .icon.glyph,
h2 > .icon.glyph{
   filter:  brightness(66%) sepia(100) saturate(.4) hue-rotate(19deg);
   opacity: .95;
}

/* dead glyph has lowered opacity*/
.link.dead .icon.glyph{
   opacity: .38;
}

/* glyphs in paragraphs should have lowered opacity like their corresponding text */
p .link:not(.dead):not(.current) .icon.glyph{
   opacity: .88;
}

/* hovering makes links gold */
.link:hover:not(.dead):not(.current) .icon.glyph,
.link:focus:not(.dead):not(.current) .icon.glyph,
.link:active:not(.dead):not(.current) .icon.glyph{
    filter: brightness(67%) sepia(1) saturate(3) hue-rotate(-6deg);
    opacity: 1;
}



/*------------------------------------------------------------------------------
    img attribute classes
------------------------------------------------------------------------------*/
/* for imgs filling column or area */
video.fill,
img.fill{
   width: 100%;
}
img.up{
   margin-top: -20px;
}
img.left{
   margin-left: -10px;
}
img.opacity9{
   opacity: .9;
}
img.opacity8{
   opacity: .8;
}
img.opacity7{
   opacity: .7;
}
img.opacity6{
   opacity: .6;
}

img.rounded,
video.rounded{
   border-radius: 2px;
}

img.buffer,
video.buffer{
   margin-top: 8px;
}


/*------------------------------------------------------------------------------
   full width page
------------------------------------------------------------------------------*/
body.fullWidth .main{
   max-width: 100%;
}
body.fullWidth .my-area{
   padding: 0px;
}

body.largeWidth .main{
   max-width: 1200px;
}


/*------------------------------------------------------------------------------
   tip
------------------------------------------------------------------------------*/
.tip{
    font-weight: 600;
    opacity: .97;
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    color: #3CAD4B;
}
.tip .icon.glyph{
   filter: brightness(77%) sepia(1) saturate(10) hue-rotate(-299deg);
    opacity: .7;
    margin-right: -3px;
    width: 24px;
}



/* works from within my-area to touch horizontal edges, my-area has padding of 15px */
.scrollable-x{
   width: 100%;
   overflow-x: scroll;
   width: calc(100% + 30px);
   margin-left: -15px;
}


/*------------------------------------------------------------------------------
   general 1440 support
------------------------------------------------------------------------------*/
@media (min-width: 2560px) {/* only over this size */
   /*
   .navbar{
      transform: scale(1.33);
       padding-top: 6px;
   }
   .navbar-right{
       margin-top: 4px;
   }
   
   .page{
      margin-bottom: -17px;
   }
   .main:not(.index) .page-footer{
     padding-top: 48px;
   }
   .page-footer{
     padding-bottom: 48px;
   }
   .page-footer .wrapper{
     transform: scale(1.33);
   }
   
   .main:not(.index),
   .main.noBreadcrumb:not(.index){
      transform: scale(1.33);
   }
   .main:not(.index){
      margin-top: 120px;
   }
   .main.noBreadcrumb:not(.index){
      margin-top: 120px;
   }
   
   .main.how{
      margin-top: 260px !important;
   }
   body.how .page{
      min-height: 2100px;
   }
   
   body.stats .page{
          min-height: 1450px;
   }
   body.abilities .page{
          min-height: 1550px;
   }
   */
}


/*------------------------------------------------------------------------------
   colors
------------------------------------------------------------------------------*/
/*
   case "Enhanced": return new Color32(135, 135, 208, 255); // 8787D0
   // messages
   case "Dodge": return new Color32(118, 18, 18, 255); // 761212, actually Miss
   // elements
   case "Elemental": return new Color32(219, 122, 201, 255); // DB7AC9
   case "Fire": return new Color32(235, 86, 49, 255); // EB5631
   case "Ice": return new Color32(93, 197, 207, 255); // 5DC5CF
   case "Light": return new Color32(177, 178, 71, 255); // B1B248
   // ranks
   case "Common": return new Color32(219, 217, 193, 255); // DBD9C1 was D8D6B7 was E2CFC6 (226, 207, 198, 255)
   case "Magical": return new Color32(60, 173, 75, 255); // 3CAD4B
   case "Rare": return new Color32(79, 123, 255, 255); // 4F7BFF
   case "Epic": return new Color32(189, 101, 247, 255); // BD65F7
   case "Legendary": return new Color32(234, 172, 72, 255); // EAAC48
   // misc
   case "CommonLight": return new Color32(250, 248, 221, 255); //FAF8DD was FFEADF
   case "Critical": return new Color32(118, 18, 18, 255);
   // health / damage
   case "Health": return new Color32(236, 53, 53, 255); // EC3535
   case "Mana": return new Color32(89, 140, 254, 255);
   case "Damage": return new Color32(230, 52, 52, 255); // E63434
   // trade
   case "Trade": return new Color32(219, 217, 193, 255); // DBD9C1
   // for other ui
   case "Bluesteel": return new Color32(107, 110, 115, 255); // 6B6E73
   case "Label": return new Color32(125, 121, 108, 255); //7D796C
   case "LabelLigher": return new Color32(138, 133, 119, 255); //8A8577, slightly brighter than normal used to item base stats desc
   case "LightLabel": return new Color32(158, 153, 137, 255); //9E9989
   //case "HighlightLabel": return new Color32(181, 178, 166, 255); //B5B2A6, no longer used, now use same as common
   case "DarkLabel": return new Color32(31, 31, 30, 255); // 1A1A19 was 1F1F1E
   case "Afflicted": return new Color32(200, 33, 33, 255);
   case "CommonDisabled": return new Color32(219, 217, 193, 69); //DBD9C1 was E2CFC6
  */
  
  /* warboy colors*/
.enhanced{
   color: rgba(135,135,208,255);
   
}
.bluesteel{
   color: #6B6E73;
}