a.nav-link {font-weight: bold}

  #itemdump .Belt,
  #controls-container .Belt { color:black; background-color:lightblue }
  .Inventory { color:black; background-color:lightgreen; cursor: crosshair; }
  .Stash { color:black; background-color:brown; cursor: crosshair; }
  .Cube { color:black; background-color:lightyellow; cursor: crosshair; }
  .Corpse { color:black; background-color:darkgrey; cursor: crosshair; }
  .Mercenary { color:black; background-color:#ffcbb3; cursor: crosshair; }
  .skills_td {text-align:left; vertical-align:top; white-space:pre;width:18em;}
  .skillpagename {text-align:center; color:red;}
  .oskills {text-align:center; color:#faaa23;}
  .float_right {float:right;margin-right:2em;}
  table#itemdump {width:49em;}
  #itemdump th {text-align:center;}
  #itemdump td {text-align:center;}
  .deadhc {color:darkgrey; text-decoration: line-through;}
  .charmrange {color: grey; font-size:90%;}
  .guid {font-size:75%; color: grey;}

.color-white {color: white;}
.color-red {color: red;}
.color-grey {color: grey;}
.color-green {color: green;}
.color-blue {color: #5050c8;}
.color-gold {color: #a09169;}
.color-dgrey {color: darkgrey;}
.color-tan {color: #aaa078;}
.color-orange {color: #faaa23;}
.color-yellow {color: yellow;}
.color-dgreen {color: darkgreen;}
.color-purple {color: #965afa;}
.color-black {color: black;}
.color-dgreen2 {color: #007100;}

#itemdump .corrupted {text-decoration: underline dashed red;}

div.hand1 {position: absolute;top: 19px; left:4px; text-align:center;vertical-align:middle;width:56px; height:112px;}
div.hand2 {position: absolute;top: 19px; left:214px; text-align:center;vertical-align:middle;width:56px; height:112px}
div.head {position: absolute;top: 4px; left:109px; text-align:center;vertical-align:middle;width:56px; height:56px}
div.amulet {position: absolute;top: 34px; left:176px; text-align:center;vertical-align:middle;width:28px; height:28px}
div.ring1 {position: absolute;top: 174px; left:71px; text-align:center;vertical-align:middle;width:28px; height:28px}
div.ring2 {position: absolute;top: 174px; left:174px; text-align:center;vertical-align:middle;width:28px; height:28px}
div.body {position: absolute;top: 75px; left:109px; text-align:center;vertical-align:middle;width:56px; height:87px}
div.gloves {position: absolute;top: 144px; left:4px; text-align:center;vertical-align:middle;width:56px; height:56px}
div.boots {position: absolute;top: 144px; left:215px; text-align:center;vertical-align:middle;width:56px; height:56px}
div.belt {position: absolute;top: 174px; left:108px; text-align:center;vertical-align:middle;width:56px; height:28px}
div.hand3 {position: absolute;top: 213px; left:4px; text-align:center;vertical-align:middle;width:56px; height:112px}
div.hand4 {position: absolute;top: 213px; left:214px; text-align:center;vertical-align:middle;width:56px; height:112px}

div.center { margin:0 auto; max-width: 1150px;}
img.center {
    position:relative;
    display: block;
    margin-left: auto;
    margin-right: auto 
}

img.gear_img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

body {margin:10px;}

    #controls-container {
      margin: 1em 0;
    }

    .control-group {
      display: inline-block;
    }
    #itemdump {
      margin: 0 auto;
      border-spacing: 0px;
      border-collapse: collapse;
      background-color: hsla(0, 100%, 0%, 0.7);
    }

    #itemdump td {
      vertical-align: middle;
      text-align: center;
    }

    #itemdump th {
      color: #189ad3;
      cursor: cell;
      color: red;
      border-bottom: 1px solid #444;
    }

    input[type="checkbox"][readonly] {
      pointer-events: none;
    }

    input[type="checkbox"]:not(:checked) {
      opacity: 0.6;
    }

    input[type="checkbox"]:indeterminate {
      opacity: 1;
    }

    input[type="checkbox"]:not(:checked).part {
      opacity: 1;
    }

    input[type="checkbox"]:checked.part {
      opacity: 0.6;
    }

    /* Difficulty text background colors */
    .bg-1 { background-color: hsla(100, 100%, 50%, 0.2) }
    .bg-2 { background-color: hsla(100, 100%, 40%, 0.2) }
    .bg-3 { background-color: hsla(90, 100%, 30%, 0.2) }
    .bg-4 { background-color: hsla(60, 100%, 50%, 0.2) }
    .bg-5 { background-color: hsla(30, 100%, 50%, 0.2) }
    .bg-6 { background-color: hsla(0, 100%, 50%, 0.2) }
    .bg-7 { background-color: hsla(290, 100%, 50%, 0.2) }


    #uberquests, #challenges {
      border-spacing: 0px;
      border-collapse: collapse;
      background-color: hsla(0, 100%, 0%, 0.7);
    }

    #gearstats {
      border-spacing: 0px;
      border-collapse: collapse;
      background-color: hsla(0, 100%, 0%, 0.7);
    }

    #gearstats td {
      vertical-align: middle;
      text-align: right;
      width: 4em;
    }


    #gearstats th {
      text-align:left;
      width: 20em;
    }

    .rainbow-text {
      background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
      -webkit-background-clip: text;
      color: transparent;
    }

td.bosskill {
  color: grey;
  font-size: 95%;
  text-align: right;
  padding-right: 5px;
}

    .ssf, .ssf a  {
      color: gold;
    }

   .xsf {
      background-image: linear-gradient(180deg, yellow, orange);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-stroke: 0.75px maroon;
    }

div.tradeid {
  float: left; /* Keep this to allow the element to float left */
  width: auto;  /* Allow the div to take up only the necessary width */
  display: inline-block;
}


.tooltip.show {
  opacity: 1 !important;
  filter:alpha(opacity=100) !important;;
}

  .tooltip .tooltip-inner {
    color: #a09169;
    max-width:36em;
    margin: 10px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 1) !important;
    border: solid 1px #a09169;
  }


div.item-sockets {
      display:grid;
      grid-template-columns: 50% 50%;
      grid-gap:5px;
}

.socket {
  width:17em;
  display:inline-block;
  vertical-align:top;
}

    #table-loc {
      margin: 0 auto;
      border: 1px solid #555;
      border-spacing: 0px;
      border-collapse: collapse;
      background-color: hsla(0, 100%, 0%, 0.7);
    }

    #table-loc td {
      font-size: 12px;
      padding: 5px;
      border: 1px solid #444;
      white-space: nowrap;
    }

    table.dataTable tbody tr:hover {
      background-color: rgba(128, 128, 128, 0.2); /* Adjust the alpha value for transparency */
    }