.fs-container--item-list {

  width: 80%;

  -webkit-transform: translate(0%, 0%);

  transform: translate(0%, 0%);

}



.fs-container--skill-list {

  width: 30%;

  -webkit-transform: translate(0%, 0%);

  transform: translate(0%, 0%);

}



.fs-container--description {

  padding-top: 4%;

  padding-bottom: 1%;

  padding-left: 5%;

  padding-right: 5%;

}



.fs-container--item-list--build {

  position: relative;

  padding-bottom: 104% !important;

  background: url("https://albiononline.pl/wp-content/uploads/build-place-holer.png");

  background-size: cover;

}



.fs-container--skill-list--build {

  position: relative;

  padding-bottom: 350% !important;

  background: url("https://albiononline.pl/wp-content/uploads/skills-placeholder.png");

  background-size: cover;

}



.fs-item-list {

  /* overflow: hidden; */

  padding: 6px 0 12px;

  text-align: center;

}



.fs-skill-list {

  /* overflow: hidden; */

  padding: 6px 0 12px;

  text-align: center;

}



.fs-item {

  position: absolute;

  display: inline-block;

  width: 24%; /* Adjust as needed */

  height: 24%; /* Adjust as needed */

  line-height: 1; /* Adjust as needed */

  margin: -1% 0; /* Adjust as needed */

  /* overflow: hidden; */

  text-overflow: ellipsis;

}



.fs-tooltip-item {

  visibility: hidden;

  width: 200%;

  background-color: #555;

  color: #fff;

  /* text-align: center; */

  padding: 5px 0;

  border-radius: 6px;

  position: absolute;

  z-index: 1;

  /* bottom: -30%; */

  /* right: 30%; */

  transform: translate(-50%, -50%);

  opacity: 0;

  transition: opacity 0.3s;

}



.fs-item:hover .fs-tooltip-item {

  visibility: visible;

  opacity: 1;

}



.fs-tooltip-skill {

  visibility: hidden;

  width: 500%;

  background-color: #555;

  color: #fff;

  /* text-align: center; */

  padding: 5px 0;

  border-radius: 6px;

  position: absolute;

  z-index: 1;

  /* bottom: -30%; */

  /* right: 30%; */

  transform: translate(-50%, -50%);

  opacity: 0;

  transition: opacity 0.3s;

}



.fs-skill:hover .fs-tooltip-skill {

  visibility: visible;

  opacity: 1;

}



.fs-item--head {

  top: 10%;

  left: 38%;

}



.fs-item--chest {

  top: 32%;

  left: 38%;

}



.fs-item--boots {

  top: 54.5%;

  left: 38%;

}



.fs-item--mainhand {

  top: 32%;

  left: 11.5%;

}



.fs-item--secondhand {

  top: 32%;

  left: auto;

  right: 11%;

}



.fs-item--bag {

  top: 7.5%;

  left: 6%;

}



.fs-item--cape {

  top: 7.5%;

  left: auto;

  right: 6%;

}



.fs-item--food {

  top: 57.5%;

  left: 6%;

}



.fs-item--potion {

  top: 57.5%;

  left: auto;

  right: 6%;

}



.fs-item--mount {

  top: 76.5%;

  left: 38%;

}



.fs-skill {

  position: absolute;

  display: inline-block;

  width: 35%; /* Adjust as needed */

  /* height: 35%; Adjust as needed */

  line-height: 1; /* Adjust as needed */

  margin: -1% 0; /* Adjust as needed */

  /* overflow: hidden; */

  text-overflow: ellipsis;

}



.fs-skill--weapon-active-skill-1 {

  top: 17.3%;

  left: 6.5%;

}



.fs-skill--weapon-active-skill-2 {

  top: 29.3%;

  left: 6.5%;

}



.fs-skill--weapon-active-skill-3 {

  top: 41.3%;

  left: 6.5%;

}



.fs-skill--weapon-passive-skill-1 {

  top: 53%;

  left: 7%;

}



.fs-skill--head-active-skill-1 {

  top: 12%;

  right: 13%;

}



.fs-skill--head-passive-skill-1 {

  top: 23.9%;

  right: 13%;

}



.fs-skill--chest-active-skill-1 {

  top: 35.8%;

  right: 13%;

}



.fs-skill--chest-passive-skill-1 {

  top: 47.6%;

  right: 13%;

}



.fs-skill--chest-passive-skill-2 {

  top: 59.6%;

  right: 13%;

}



.fs-skill--boots-active-skill-1 {

  top: 71.4%;

  right: 13.5%;

}



.fs-skill--boots-passive-skill-1 {

  top: 83.2%;

  right: 13%;

}



.fs-spinner {

  position: absolute;

  top: 25%;

  left: 35%;

  border: 16px solid var(--fs-background-2-color);

  border-top: 16px solid var(--fs-header-color);

  border-radius: 50%;

  width: 120px;

  height: 120px;

  animation: spin 0.75s linear infinite;

}



.fs-skill--label--dmg {

  font-weight: bold;

  color: #ff2e2e;

}



.fs-skill--label--other {

  font-weight: bold;

  color: #edd5c7;

}



.fs-skill--label--cc {

  font-weight: bold;

  color: #ffb418;

}



.fs-skill--label--debuff {

  font-weight: bold;

  color: #c27af0;

}



.fs-skill--label--buff {

  font-weight: bold;

  color: #20c7ff;

}



.fs-skill--label--mobility {

  font-weight: bold;

  color: #ffffff;

}



.fs-skill--label--heal {

  font-weight: bold;

  color: #6acc04;

}



@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}