ul {
  list-style-type: none;
  padding-left: 0;
}

a {
  text-decoration: underline !important;
}

@font-face {
  font-family: SilkRoad;
  src: url("../fonts/SilkRoad.ttf") format("truetype");
}

@font-face {
  font-family: Arial, Helvetica, sans-serif;
  src: url("../fonts/alfont_com_arial-1.ttf") format("truetype");
}

/* :root {
  --color-darkest: #111010;
  --color-darkest-rgb: 17, 16, 16;
  --color-dark: #190f06;
  --color-dark-rgb: 25, 15, 6;
  --color-overlay: rgba(var(--color-dark-rgb), 0.67);
  --color-brown: #ffe082;
  --color-brown-rgb: 204, 180, 146;
  --color-brown-hover: #cdac7d;
  --color-brown-hover-rgb: 205, 172, 125;
  --color-light: #efd38f;
  --color-light-rgb: 204, 180, 146;
  --color-red: #c1272d;
  --color-red-rgb: 193, 39, 45;
} */
:root {
  --color-darkest: #111010;
  --color-darkest-rgb: 17, 16, 16;
  --color-dark: #190f06;
  --color-dark-rgb: 25, 15, 6;
  --color-overlay: rgba(var(--color-dark-rgb), 0.67);
  --color-brown: #c1b188;
  --color-brown-rgb: 204, 180, 146;
  --color-brown-hover: #cdac7d;
  --color-brown-hover-rgb: 205, 172, 125;
  --color-light: #efd38f;
  --color-light-rgb: 204, 180, 146;
  --ranking-table-1: #1e1814;
  --ranking-table-2: #281f19;
  --ranking-row-1: #342c26;
  --ranking-row-2: #3b2b1c;
  --color-red: #c1272d;
}

body {
  font-family: "SilkRoad" !important;
  background-color: var(--color-darkest) !important;
  cursor: url("../images/sro.cur"), auto !important;
  transition: 0.3s ease;
}

body *:hover {
  transition: 0.3s ease;
  cursor: url("../images/sro.cur"), auto !important;
}

.regular-text {
  font-family: Arial, Helvetica, sans-serif !important;
}

body * {
  color: var(--color-light) !important;
}

header {
  position: relative;
  /* padding-bottom: 200px;
    background-image: linear-gradient(to bottom , #000000 , #00000000); */
  z-index: 9999;
}

a.link {
  transition: 0.3s ease;
}

a.link:hover {
  text-shadow: #000 0px 1px 2px;
  transform: translateY(-2px);
  transition: 0.3s ease;
}

.text-danger,
.text-danger * {
  color: var(--color-red) !important;
}

.bg-dark {
  background-color: var(--color-dark) !important;
}

.border-primary {
  border-color: var(--color-darkest) !important;
}

.text-dark {
  color: var(--color-darkest) !important;
}

.navbar {
  background-color: transparent !important;
  font-size: larger;
  z-index: 3;
}

.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  transition: 0.3s ease;
}

.navbar a:hover {
  text-shadow: var(--color-brown-hover) 0px 0px 20px;
  transform: translateY(-2px);
  transition: 0.3s ease;
}

.collapse.show {
  background-color: rgba(var(--color-dark-rgb), 0.8) !important;
}

.active {
  text-shadow: var(--color-brown-hover) 0px 0px 20px;
}

@media (max-width: 400px) {
  .navbar-logo {
    width: 200px !important;
  }
}

section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.breadcrumb-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 100%;
  justify-content: center;
  background-image: url("../images/card-header/center.webp");
  filter: drop-shadow(0px 0px 10px #000000aa);
  border-radius: 0.5rem;
  border: 1px solid var(--color-brown) !important;
}

.breadcrumb-home {
  color: var(--color-brown) !important;
  font-size: 2.5rem;
}

.breadcrumb-element {
  color: var(--color-light) !important;
  font-size: 2.5rem;
  transition: 0.3s ease;
}

.breadcrumb-element .active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
}

.breadcrumb-element a:hover {
  color: var(--color-light) !important;
  transition: 0.3s ease;
  text-shadow: var(--color-brown-hover) 0px 0px 20px;
}

.main {
  position: relative;
  height: 100vh;
  background-image: url("../images/parallax-bg.png");
  background-position: center bottom;
  background-size: cover;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    var(--color-darkest),
    #00000000 70%,
    var(--color-darkest)
  );
  z-index: 2;
  pointer-events: none;
}

.figure-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../images/parallax-figure.png");
  background-position: center bottom;
  background-size: cover;
  z-index: 1;
}

.char-bg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/parallax-char.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}

.card {
  border-radius: 0px !important;
  height: auto !important;
  background: transparent;
}

.bg-log,
.bg-reg {
  background-color: var(--color-brown);
  color: var(--color-dark) !important;
}

.card-header {
  font-size: large;
  font-weight: bold;
  border-bottom: none;
}

.server-time {
  font-size: 3rem;
  font-weight: bold;
  color: white !important;
  text-shadow: var(--color-brown-hover) 0px 0px 10px;
  padding: 0%;
}

@media (max-width: 1200px) {
  .order-lg {
    order: 6 !important;
  }
}

.images-dots {
  bottom: 10px;
  right: 10px;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin: 0 5px;
  border: var(--color-brown) 2px solid;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active {
  background-color: var(--color-brown);
}

.data-list li {
  border-bottom: 3px solid transparent;
  border-image: url("https://105.old-silkroad.com/global/assets/images/border-line.png")
    2;
  margin: 5px 0px;
}

.sign-card {
  background-image: url("../images/card-header/center.webp");
  background-repeat: repeat;
  background-position: center;
  transition: 0.3s ease-in-out;
}

.card-link {
  transition: transform 0.3s ease-in-out;
}

.card-link:hover .sign-card {
  transform: translateY(-7px);
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 0px 10px var(--color-light);
}

.card .login-btn::after,
.card .sign-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/btn-login-char.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  border-radius: 0 0 15px 15px;
}

.card .sign-btn::after {
  background-image: url("../images/btn-register-char.png");
  background-position: left;
}



@media (max-width: 768px) {
  .card .login-btn::after,
  .card .sign-btn::after {
    background-size: contain;
    background-position: center;
  }
}

.custom-header {
  background-image: url("../images/small-card-center.webp");
  box-shadow: var(--color-darkest) 0px 10px 20px 2px;
}

.card-list-container,
.server-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  background-color: var(--color-brown);
  background-image: url("/images/PATTERN.webp");
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
}

.card-list * {
  color: var(--color-darkest) !important;
  margin-bottom: 0.6rem;
}

.card-list-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: var(--color-darkest) 2px solid;
  border-radius: 50%;
}

.player-name {
  width: 80%;
  font-size: medium;
}

.killer-name {
  background-color: var(--color-darkest);
  color: var(--color-brown) !important;
  width: 80%;
  font-size: small;
}

.news-card,
.rules-card {
  background-color: var(--color-brown);
  background-image: url("../images/PATTERN.webp");
}

.news-card * {
  color: var(--color-darkest) !important;
}

.news-card h3 {
  background-image: linear-gradient(
    to right,
    rgba(var(--color-darkest-rgb), 0.6),
    #00000000
  );
  padding: 1rem;
  border-radius: 30px;
  color: white !important;
  font-weight: 600;
}

.news-card-content,
.rules-card-content {
  font-family: Arial, Helvetica, sans-serif !important;
}

.server-info-list {
  border: 2px solid var(--color-darkest);
  border-radius: 0 0 25px 25px;
}

.server-info-list li * {
  color: var(--color-darkest) !important;
  font-family:
    Arial, Helvetica, sans-serif, "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
  /* font-weight: 700 !important; */
}

.server-info-list li p {
  margin: 0;
  text-align: start;
  text-wrap: nowrap;
}

.register-main {
  position: relative;
  background-image: url("../images/register-bg.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.reg-char {
  z-index: 6;
  height: 80%;
  pointer-events: none !important;
  opacity: 0.3 !important;
}

.auth-card {
  background-color: var(--color-brown);
  background-image: url("../images/PATTERN.webp") !important;
}

.reg-form {
  width: 100%;
  z-index: 7 !important;
}

.auth-card div h1 {
  margin-bottom: 2rem;
  text-align: center;
  font-size: 5rem !important;
  z-index: 8 !important;
  text-shadow: var(--color-darkest) 0px -10px 20px;
}

.form-control {
  background-color: transparent !important;
  border: var(--color-darkest) 2px solid !important;
  color: var(--color-darkest) !important;
  font-size: 1.5rem !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.form-control:focus {
  box-shadow: 0 0 0 0.3rem var(--color-brown-hover) !important;
  border-color: var(--color-brown-hover) !important;
  background-color: var(--color-light) !important;
}
input:-webkit-autofill {
  -webkit-background-clip: text;
  transition: background-color 5000s ease-in-out 0s;
}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
.reg-btn-container {
  position: absolute;
  bottom: -7%;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
}
.reg-btn-container button:hover,
.login-btn-container button:hover {
  transform: translateY(-5px);
  box-shadow: 0px 0px 10px var(--color-light);
}
label.small-card,
button.small-card {
  background-image: url("../images/small-card-center.webp");
  background-repeat: repeat;
  color: var(--color-brown) !important;
}

.login-btn-container {
  position: absolute;
  bottom: -10%;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.login-btn-container button {
  color: var(--color-brown) !important;
}

.form-check-input {
  width: 20px;
  height: 20px;

  border: var(--color-darkest) 2px solid !important;
  background-color: transparent !important;
}

.form-check-input:checked {
  background-color: var(--color-darkest) !important;
  border-color: var(--color-darkest) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.3rem var(--color-brown-hover) !important;
  border-color: var(--color-brown-hover) !important;
}

.form-check-label {
  font-size: 20px;
  color: var(--color-darkest) !important;
}

@media (max-width: 1000px) {
  .form-control {
    background-color: rgba(var(--color-light-rgb), 0.5) !important;
  }
}

.ranking-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/ranking-bg.png") no-repeat center center;
  background-size: cover;
  z-index: 1;
}

.ranking-element {
  background-color: var(--color-darkest);
  color: var(--color-brown) !important;
  border-radius: 20px 20px 0px 0px;
  box-shadow: 0px 10px 10px #000000aa;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1.5rem;
  font-weight: bold;
  width: 100%;
}

.ranking-element:hover,
.ranking-element:focus,
.ranking-element.active {
  background: rgba(var(--color-darkest-rgb), 0.8) !important;
  font-size: 2rem;
  border-color: var(--bs-black) #000;
  border: 2px solid;
}

.ranking-table {
  background-image: linear-gradient(
    to right,
    var(--ranking-table-1),
    var(--ranking-table-2)
  ) !important;
  border: 2px solid var(--color-brown);
  border-radius: 0px 0px 20px 20px;
  padding-top: 3rem;
}

.ranking-header {
  background-image: linear-gradient(
    to bottom,
    var(--ranking-row-1),
    var(--ranking-row-2)
  );
  border-radius: 10px;
  text-align: center;
}

.ranking-row-odd {
  background-image: linear-gradient(
    to right,
    var(--ranking-row-2),
    var(--ranking-row-1)
  );
  border-radius: 10px;
  text-align: center;
}

.ranking-row-even {
  background-image: linear-gradient(
    to right,
    var(--ranking-row-1),
    var(--ranking-row-2)
  );
  border-radius: 10px;
  text-align: center;
}

.ranking-table-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  width: 60px;
  height: 60px;
}

tr {
  height: 80px;
}

tr td,
tr th {
  min-height: 80px;
  height: 80px;
  vertical-align: middle;
  border: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.download-main {
  position: relative;
  height: 100vh;
  background-image: url("../images/download-bg.webp");
  background-position: center bottom;
  background-size: cover;
}

.download-card {
  background-image: url("../images/PATTERN.webp") !important;
  background-repeat: repeat !important;
  background-color: var(--color-brown);
  border: 2px solid var(--color-brown);
  border-radius: 0px 0px 20px 20px;
  flex: 0 0 !important;
}

.download-title,
.download-text {
  font-family: Arial, Helvetica, sans-serif !important;
}

.requirments-table {
  background-image: linear-gradient(
    to right,
    var(--ranking-table-1),
    var(--ranking-table-2)
  ) !important;
  border-radius: 0px 0px 20px 20px;
  padding-top: 3rem;
}

.requirments-header {
  background-image: linear-gradient(
    to right,
    var(--ranking-row-1),
    var(--ranking-row-2)
  );
  border-radius: 10px;
  text-align: center;
  box-shadow: #00000082 0px 4px 5px;
}

.requirments-row td {
  text-align: center;
  font-size: large;
  padding: 0 !important;
}

.requirments-row td .table-style {
  color: var(--color-brown) !important;
  padding: 0.5rem !important;
  border: 1px solid var(--ranking-row-2) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  box-shadow: #000000c4 0px 5px 3px;
  margin: 0.5rem 0.5rem !important;
}

.info-main {
  position: relative;
  height: 100vh;
}
.donations-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/info-bg.webp");
  background-position: center bottom;
  background-size: cover;
}

.rules-list {
  list-style-type: decimal;
}

.rules-list li {
  color: var(--color-darkest) !important;
  margin-bottom: 1rem;
  font-family: Arial, Helvetica, sans-serif !important;
  color: var(--color-darkest) !important;
}

.rules-caution {
  background-color: black;
  border-radius: 0px 0px 30px 30px;
  font-family: Arial, Helvetica, sans-serif !important;
}

.text-red {
  color: var(--color-red) !important;
}

.btn-brown {
  background-color: var(--color-darkest) !important;
  color: var(--color-brown) !important;
  border: none !important;
  box-shadow: #000 0px 2px 5px;
  transition: 0.3s ease;
}

.btn-brown:hover {
  background-color: var(--color-brown) !important;
  color: var(--color-darkest) !important;
  border: none !important;
  box-shadow: #716750 0px 2px 5px;
  transform: translateY(-3px);
  transition: 0.3s ease;
}

.donation-row {
  background-color: var(--color-overlay);
  border-radius: 10px;
  text-align: center;
}

.donation-element,
.download-section {
  background-color: var(--color-dark);
  border: 2px solid var(--color-darkest);
  border-radius: 10px;
  color: var(--color-darkest) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  height: 100%;
}

.ticket-main {
  position: relative;
  height: 100vh;
  background-image: url("../images/ticket-bg.webp");
  background-position: center center;
  background-size: cover;
}

/* Social Media Dropdown Styles */
.social-dropdown {
  background-color: var(--color-dark) !important;
  border: 2px solid var(--color-brown) !important;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  min-width: 180px;
}

.social-dropdown .dropdown-item {
  color: var(--color-light) !important;
  padding: 10px 20px;
  transition: all 0.3s ease;
  background: transparent !important;
  font-family: "SilkRoad" !important;
}

.social-dropdown .dropdown-item:hover {
  background-color: var(--color-brown-hover) !important;
  color: var(--color-darkest) !important;
  transform: translateX(5px);
}

.social-link i {
  width: 20px;
  margin-right: 8px;
  text-align: center;
  color: var(--false) !important;
}

.nav-item.dropdown .nav-link.dropdown-toggle::after {
  color: var(--color-light) !important;
}

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-brown);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 6px solid #f3f3f3;
  border-top: 6px solid var(--color-darkest);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.custome-table tr td,
tr th,
tr {
  min-height: auto !important;
  height: auto !important;
}

.table-header {
  background-color: var(--color-dark) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  padding: 0.5rem !important;
}

.body-col {
  padding: 0.5rem !important;
  text-align: center;
  box-shadow: #00000082 0px 4px 5px;
  font-size: large;
  border: 1px solid var(--color-brown) !important;
}

/* paggination colors */
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--color-darkest);
  --bs-pagination-bg: var(--color-dark);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--color-brown);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--color-brown-hover);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--color-dark);
  --bs-pagination-focus-color: var(--color-darkest);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: var(--color-brown);
  --bs-pagination-active-bg: var(--color-dark);
  --bs-pagination-active-border-color: var(--color-darkest);
  --bs-pagination-disabled-color: var(--color-darkest);
  --bs-pagination-disabled-bg: var(--color-dark);
  --bs-pagination-disabled-border-color: var(--color-light);
  display: flex;
  padding-left: 0;
  list-style: none;
}

/* Player styles ----------------*/
.itemslot,
.slots {
  width: 40px;
  height: 40px;
}
.itemslot {
  float: left;
}
.shield .itemslot,
.weapon .itemslot {
  margin-bottom: 25px;
  background: url(/image/sro/equipment/clean.png) repeat !important;
}
.head .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_helm.PNG) no-repeat !important;
}
.chest .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_mail.PNG) no-repeat !important;
}
.shoulder .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_shoulderguard.PNG)
    no-repeat !important;
}
.hands .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_gauntlet.PNG)
    no-repeat !important;
}
.legs .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_pants.PNG) no-repeat !important;
}
.foot .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_boots.PNG) no-repeat !important;
}
.earring .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_earring.PNG)
    no-repeat !important;
}
.necklace .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_necklace.PNG)
    no-repeat !important;
}
.lring .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_l_ring.PNG)
    no-repeat !important;
}
.rring .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_r_ring.PNG)
    no-repeat !important;
}
.specdress .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_specialdress.PNG)
    no-repeat !important;
  margin-top: 10px !important;
}
.hat .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_helm.PNG) no-repeat !important;
}
.dress .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_cloth.PNG) no-repeat !important;
}
.attach .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_pandernt.PNG)
    no-repeat !important;
}
.flag .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_plag.PNG) no-repeat !important;
}
.spec .itemslot {
  background: url(/image/sro/interface/equipment/equip_slot_extraneous01.PNG)
    no-repeat !important;
}
.bg-equipment-avatar .slots,
.slots {
  width: 23% !important;
  margin-bottom: 3px !important;
}
.slots.right {
  float: right;
  clear: right;
  margin-right: 0;
  margin-left: 10%;
}
.slots.left {
  float: left;
  clear: left;
  margin-left: 0;
  margin-right: 10%;
}
.slots.shield,
.slots.weapon {
  width: 23% !important;
  margin-bottom: 20px !important;
}
.image .itemslot .image {
  margin: 3px;
}
.itemslot .image .qinfo {
  font-size: 9px;
  font-weight: lighter;
  font-style: normal;
  text-shadow: 0 -0.5px #000;
  color: #fff;
  padding: 0;
  float: left;
}
.itemslot .image {
  margin: 3px;
}
.itemslot .image,
.weapon .itemslot .image {
  width: 100%;
  height: 100%;
  float: left;
  padding: 0 !important;
}
.weapon .itemslot .image {
  margin: 2px;
}
.shield .itemslot .image {
  width: 100%;
  height: 100%;
  float: left;
  margin: 2px;
  padding: 0 !important;
}
.itemInfo {
  color: #fff;
  z-index: 80;
  position: absolute;
  left: 34px;
  top: 3px;
  width: 210px;
  background: rgba(88, 98, 170, 0.85);
  border: 2px solid #303d4d;
  padding: 5px;
  display: none;
  line-height: 18px;
  font-size: 10px;
}
.ui-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 190px;
  padding: 8px !important;
  background: url(/image/sro/equipment/com_bg_tile_tl.PNG) no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 1px !important;
}
.ui-tooltip-content {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 11px !important;
  line-height: 15px;
  font-weight: lighter;
  font-style: normal;
  text-shadow: 1px 1px #000;
  color: #fff;
}
.equip-suit-slot {
  background: url(/image/sro/interface/equipment/equip_slot_specialdress.PNG)
    no-repeat !important;
  margin-top: 10px;
  float: right;
  clear: right;
}
.empty-slot {
  width: 40px !important;
  height: 40px !important;
}
.empty-slot {
  background: url(/image/sro/equipment/clean.png) no-repeat !important;
}
.bg-equipment-avatar .equip-suit-slot {
  background: url(/image/sro/interface/equipment/equip_slot_specialdress.PNG)
    no-repeat !important;
  width: 40px !important;
  height: 40px !important;
  margin-top: 96px;
  float: right;
  clear: right;
}
.equip-suit-slot .image {
  width: 34px !important;
  height: 34px !important;
  margin-left: 2px !important;
  margin-top: 2px !important;
}
div.image span.plus {
  display: block;
  width: 32px;
  height: 32px;
  background: url(/image/sro/equipment/itemplus.png) 0 0;
  -webkit-animation: play 1.8s steps(32) infinite;
  animation: play 1.8s steps(32) infinite;
}

.modal-table tr td,
.modal-table tr th {
  height: auto !important;
}
.modal-body {
  max-height: 70vh !important;
  overflow-y: scroll !important;
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: #111010;
  border-radius: 8px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #c1b188;
  border-radius: 8px;
  border: 1px solid #190f06;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #cdac7d;
}

@-webkit-keyframes play {
  to {
    background-position: -1024px;
  }
}
@keyframes play {
  to {
    background-position: -1024px;
  }
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.image {
  background-repeat: no-repeat !important;
  background-size: 34px 34px !important;
}
.bg-character {
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-position: center top !important;
}
#pill-inventory-tab.active,
#pill-inventory-tab.active:focus,
#pill-avatar-tab.active,
#pill-avatar-tab.active:focus {
  background-color: var(--yellow-color) !important;
  color: #fff !important;
}
#pill-avatar-tab.active:hover,
#pill-inventory-tab.active:hover {
  background-color: var(--yellow-dark-color) !important;
  color: #fff !important;
}
/* ----------------------------- */

.table > :not(caption) > * > * {
  background-color: transparent !important;
}