body {
  margin: 0px;
  padding: 0px;
  background-color: #051122;
}

@font-face {
  font-family: "MenuHeader";
  src: url("martel.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

img {
  border: none;
}

#ArtworkHelper {
  text-align: center;
  background-position: top center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-width: 1000px;
}

/* helper div */
.HelperDivIndicator {
  position: relative;
  cursor: help;
}
.OptionContainer {
  text-align: center;
}

#HelperDivContainer {
  display: none;
  position: absolute;
  width: 225px;
  z-index: 1000;
  background-color: #e0c09a;
  color: #3d2314;
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 9pt;
  text-align: left;
  padding: 10px;
  border: 1px double #3d2314;
  margin-left: 8px;
}

#HelperDivContainer .HelperDivArrow {
  position: absolute;
  top: -1px;
  left: -8px;
  width: 8px;
  height: 13px;
}

#HelperDivContainer #HelperDivHeadline {
  font-size: 12pt;
  font-weight: bold;
}

#HelperDivContainer #HelperDivHeadline {
  position: relative;
  white-space: normal;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
}

#HelperDivContainer .Ornament {
  width: 220px;
}

#HelperDivContainer #HelperDivText {
  text-align: center;
}

#HelperDivContainer #HelperDivText ul {
  padding-left: 20px;
}

/* Reusable game-like box component without heavy background images */
.box-ui {
  width: 100%;
  background: linear-gradient(180deg, #efddbf 0%, #e6cfa9 100%);
  border: 1px solid #caa24a;
  border-radius: 9px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.box-ui:hover {
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.24),
    0 0 10px rgba(202, 162, 74, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.box-ui__header {
  background: linear-gradient(180deg, #f2e2c6 0%, #e7cfaa 100%);
  color: #2d2212;
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  text-align: right;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(155, 118, 44, 0.45);
}

.box-ui__content {
  background: linear-gradient(180deg, #ead5b3 0%, #e0c19b 100%);
  color: #2f2413;
  padding: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09);
}

.box-ui__footer {
  height: 8px;
  background: linear-gradient(180deg, #ddc197 0%, #d1ad7d 100%);
  border-top: 1px solid rgba(155, 118, 44, 0.4);
}

@media (max-width: 1000px) {
  .box-ui {
    max-width: 100%;
  }
}

/* container to implement min/max width */
#Bodycontainer {
  text-align: left;
  min-width: 1000px;
  max-width: 1280px;
  width: 100%;
  height: 100%;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  display: table;
}
#LoginCreateAccountBox p {
  margin: 0;
  padding: 0;
  font-size: 12pt;
}
#LoginFormButtonCell {
  width: 145px;
  vertical-align: top;
  padding-right: 0;
}

#ContentRow {
  position: relative;
  top: 155px;
}

/* "star-HTML-hack" to correct the position of the content row */
* html #ContentRow {
  display: inline-block;
}

#MenuColumn {
  position: absolute;
  left: 40px;
  top: -11px;
  width: 180px;
  margin-right: 15px;
  margin-left: 15px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  line-height: 12pt;
  z-index: 30;
}

#ContentColumn {
  position: relative;
  margin: 0px;
  margin-left: 262px;
  margin-right: 205px;
  z-index: 10;
}

#ThemeboxesColumn {
  text-align: center;
  position: absolute;
  top: 0px;
  right: -4px;
  width: 180px;
  margin: -4px;
  margin-right: 15px;
  margin-left: 25px;
}

#Footer {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 7pt;
  font-weight: normal;
  text-align: center;
  position: relative;
  width: 100%;
  padding-bottom: 20px;
  color: white;
}
* html #Footer {
  padding-bottom: 120px;
  margin-bottom: 50px;
}

/* Footer linkes */
#Footer a:link {
  color: white;
  text-decoration: none;
}
#Footer a:visited {
  color: white;
  text-decoration: none;
}
#Footer a:focus {
  color: white;
  text-decoration: none;
}
#Footer a:active {
  color: white;
  text-decoration: underline;
}
#Footer a:hover {
  color: white;
  text-decoration: underline;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  HEADER AREA
 *  -------------------------------
 */

#LeftArtwork {
  position: absolute;
  height: 140px;
  width: 100%;
  top: -140px;
  left: 0;
  background-repeat: no-repeat;
  z-index: 5;
  pointer-events: none;
}

#LeftArtwork #TibiaLogoArtworkTop {
  position: absolute;
  top: -15px;
  left: 45%;
  transform: translateX(-50%);
  width: clamp(160px, 22vw, 165px);
  height: auto;
  max-width: calc(100vw - 32px);
  z-index: 5;
  display: block;
  cursor: pointer;
  border: 0;
  animation: flutuar 3s ease-in-out infinite;
  pointer-events: auto;
}

@keyframes flutuar {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(10px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 1000px) {
  #LeftArtwork #TibiaLogoArtworkTop {
    top: -24px;
  }
}

@media (max-width: 640px) {
  #LeftArtwork {
    top: -118px;
  }

  #LeftArtwork #TibiaLogoArtworkTop {
    top: -10px;
    width: min(180px, calc(100vw - 24px));
  }
}


#LeftArtwork #TibiaLogoArtworkBottom {
  position: absolute;
  top: 102px;
  left: 0px;
  height: 43px;
  width: 166px;
  z-index: 5;
}

#LeftArtwork #Statue_1 {
  position: absolute;
  top: 0px;
  left: 5px;
  height: 30px;
  width: 32px;
  z-index: 10;
}

#LeftArtwork #Statue_2 {
  position: absolute;
  top: 0px;
  right: 25px;
  height: 30px;
  width: 32px;
  z-index: 10;
}

.SmallMenuBox#DownloadBox {
  top: 4px;
}

.SmallMenuBox#DonateBox {
  top: -65px;
}

.SmallMenuBox {
  position: relative;
  left: 5px;
  top: 8px;
  width: 100%;
  margin-bottom: 38px;
  background-repeat: no-repeat;
}
.SmallMenuBox#DownloadBox {
  top: -35px;
}
.SmallMenuBox .SmallBoxTop {
  position: absolute;
  left: -5px;
  top: -12px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}
.SmallMenuBox#DownloadBox .SmallBoxBorder {
  height: 39px;
}
.SmallMenuBox .SmallBoxBorder {
  position: absolute;
  top: 0;
  height: 52px;
  width: 8px;
  background-repeat: repeat-y;
  z-index: 10;
}
.SmallMenuBox .SmallBoxButtonContainer {
  position: relative;
  height: 105px;
  width: 208px;
  left: -30px;
  background-repeat: repeat-y;
  z-index: 1;
}
#PlayNowContainer {
  position: absolute;
  width: 150px;
  height: 37px;
  top: 1px;
  left: 5px;
  z-index: 99;
}
.SmallMenuBox .BorderRight {
  right: 9px;
}
.SmallMenuBox#DownloadBox .SmallBoxBottom {
  top: 39px;
}
.SmallMenuBox .SmallBoxBottom {
  position: absolute;
  top: 52px;
  left: -5px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#LeftArtwork #LogoLink {
  position: absolute;
  bottom: 14px;
  left: 58px;
  height: 14px;
  width: 50px;
  z-index: 99;
  cursor: pointer;
}

#RightArtwork {
  text-align: left;
  position: absolute;
  top: 38px;
  right: 24px;
  width: 132px;
  background-repeat: no-repeat;
  z-index: 90;
}

#RightArtwork #PlayersOnline {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 7pt;
  line-height: 8pt;
  text-align: center;
  position: absolute;
  width: 92px;
  bottom: 11px;
  left: 21px;
  color: #cfa600;
  border-bottom: 1px solid #010101;
  cursor: pointer;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  LOGINBOX
 *  -------------------------------
 */

#Loginbox {
  position: relative;
  left: 5px;
  top: 8px;
  width: 100%;
  margin-bottom: 38px;
  background-repeat: no-repeat;
}

#Loginbox #LoginTop {
  position: absolute;
  left: -5px;
  top: -12px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#Loginbox #LoginBottom {
  position: absolute;
  top: 52px;
  left: -5px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#Loginbox .LoginBorder {
  position: absolute;
  top: 0px;
  height: 52px;
  width: 8px;
  background-repeat: repeat-y;
  z-index: 10;
}

#Loginbox #BorderRight {
  right: 9px;
}

#Loginbox .Loginstatus {
  position: relative;
  top: 0px;
  left: 5px;
  height: 13px;
  width: 160px;
}

#Loginbox .LoginstatusText {
  position: absolute;
  top: -40px;
  left: -2px;
  width: 150px;
  height: 28px;
  cursor: pointer;
}

#Loginbox #LoginstatusText_1 {
  top: 2px;
  cursor: default;
}

#Loginbox #LoginstatusText_2_1 {
  visibility: visible;
}

#Loginbox #LoginstatusText_2_2 {
  visibility: hidden;
}

#LoginBox #LoginButtonContainer {
  margin-left: -30px;
  height: 105px;
  width: 208px;
  background-repeat: repeat-y;
}

#Loginbox #LoginButton {
  position: relative;
  top: 17px;
  left: 15px;
  height: 48px;
  width: 177px;
}

#Loginbox #LoginButton .Button {
  position: relative;
  top: 17px;
  left: 10px;
  width: 177px;
  height: 48px;
  visibility: hidden;
}

#Loginbox #LoginButton #ButtonText {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 48px;
  width: 177px;
  z-index: 15;
  cursor: pointer;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  MENU
 *  -------------------------------
 */

#Menu {
  position: relative;
  left: -40px;
  top: -94px;
  width: 236px;
  background-repeat: no-repeat;
}

.menuitem {
  position: relative;
  margin-bottom: 10px;
}

#MenuTop {
  display: none;
}

#MenuBottom {
  display: none;
}

/* Menuitems */

.MenuButton {
  position: relative;
  height: 34px;
  width: 236px;
  margin-bottom: 0;
  display: block;
  cursor: pointer;
  background: url("images/menu-custom/header.webp") center center / 100% 100%
    no-repeat !important;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45));
}

.Button {
  display: none !important;
}

.Extend {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #f9f4e8;
  border-bottom: 2px solid #f9f4e8;
  transform: rotate(45deg);
  transition: transform 0.2s ease, top 0.2s ease;
}

.MenuButton.is-open .Extend {
  top: 14px;
  transform: rotate(225deg);
}

.Lights {
  display: none;
}

.Light_lu {
  display: none;
}

.Light_ru {
  display: none;
}

.Light_ld {
  display: none;
}

.Icon {
  display: none;
}

.Label {
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #f5efe1;
  font-family: "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 1px;
  text-shadow:
    0 1px 0 #2a1a0d,
    0 0 2px rgba(0, 0, 0, 0.8);
}

/* Submenus(items) */

.LeftChain {
  display: none;
}

.RightChain {
  display: none;
}

.Submenu {
  position: relative;
  width: 90%;
  margin: -1px 0 10px 0;
  padding: 0;
  background-color: #dcc39f;
  background: url("images/menu-custom/content-center.webp") center top / 100% auto
    repeat-y;
  border-radius: 0;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.Submenu::after {
  content: "";
  display: block;
  width: 100%;
  height: 26px;
  background: url("images/menu-custom/content-bottom.webp") center top / 100% 100%
    no-repeat;
}

.Submenuitem {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  background-color: transparent;
}

.Submenuitem::before {
  content: "\203A";
  margin-left: 22px;
  margin-right: 12px;
  color: #8f7f65;
  font-size: 22px;
  line-height: 1;
}

.Submenuitem.is-active {
  background: rgba(0, 0, 0, 0.06);
}

.Submenuitem.is-active::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: #3f9b76;
}

.ActiveSubmenuItemIcon {
  display: none;
}

.SubmenuitemLabel {
  margin: 0;
  border-top: 0;
  padding: 10px 16px 10px 0;
  width: calc(100% - 44px);
  border-bottom: 1px solid rgba(77, 58, 35, 0.2);
  overflow: hidden;
  text-align: left;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 400;
  color: #2a2926 !important;
  text-shadow: none;
}

.Submenuitem.is-active .SubmenuitemLabel {
  color: #2f7359 !important;
  font-weight: 600;
}

/* Submenu links */
.Submenu a:link {
  color: #2a2926;
  text-decoration: none;
}
.Submenu a:visited {
  color: #2a2926;
  text-decoration: none;
}
.Submenu a:focus {
  color: #2a2926;
  text-decoration: none;
}
.Submenu a:active {
  color: #2a2926;
  text-decoration: none;
}
.Submenu a:hover {
  color: #26201b;
  text-decoration: none;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  CONTENT AREA
 *  -------------------------------
 */

.Content .BoxContent {
  padding: 10px;
}

/* "tanhack" for correction of IE bug */
* html .Content {
  top: -5px;
}

.Content {
  position: relative;
  top: 0px;
  width: 100%;
}

/* "star-HTML-hack" to correct the position of the content area */
* html .Content {
  position: relative;
  top: 796px;
  margin: 20px;
  border: 0px dashed #051122;
  border-right-width: 550px;
}

#ContentHelper {
  position: relative;
}

.InfoBar {
  position: relative;
  height: 28px;
  top: 11px;
  margin-left: 40px;
  margin-right: 40px;
  font-size: 10px;
  color: #fff;
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
}
.InfoBar a {
  border: 0;
}
.InfoBarBlock {
  margin-right: 15px;
  border: 0;
}
.InfoBarBigLogo {
  margin-bottom: 0;
  border: 0;
}
.InfoBarSmallElement {
  margin-left: 5px;
  border: 0;
}
.InfoBarNumbers {
  top: -4px;
  position: relative;
}
.InfoBar a {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 7pt;
  font-weight: 400;
  color: #fff;
}
.InfoBar a:link {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}
.InfoBar a:visited {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}
.InfoBar a:focus {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}
.InfoBar a:active {
  color: #fff;
  font-weight: 400;
  text-decoration: underline;
}
.InfoBar a:hover {
  color: #fff !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
}
.InfoBarLinks {
  text-decoration: none;
  font-size: 10px;
}
.InfoBarLinks a:hover {
  text-decoration: none;
  font-size: 10px;
}

.TopShowcaseBox {
  margin-bottom: 22px !important;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(245, 231, 206, 0.98) 0%, rgba(225, 196, 154, 0.96) 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.TopShowcaseBar {
  height: 40px;
  margin: 0;
  border: 1px solid #7a531f;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, #1d5385 0%, #0f3b67 55%, #092a4f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.TopShowcaseBox .InfoBar {
  top: 6px;
  margin-left: 18px;
  margin-right: 18px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.InfoBarPrimaryLinks {
  display: flex;
  align-items: center;
  gap: 0;
}

.InfoBarItem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 14px;
  font-size: 13px;
  line-height: 1;
  text-decoration: none !important;
}

.InfoBarPrimaryLinks .InfoBarItem + .InfoBarItem {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.InfoBarIcon {
  font-size: 14px;
  line-height: 1;
  color: #ffffff;
}

.InfoBarIconSvg {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.InfoBarIconSvg svg {
  width: 14px;
  height: 14px;
  display: block;
}

.InfoBarIconSvg.is-stroke svg {
  fill: none;
  stroke: currentColor;
}

.InfoBarIconSvg.is-online {
  color: #49df74;
}

.InfoBarStatusWrap {
  display: flex;
  align-items: center;
}

.InfoBarStatus {
  gap: 8px;
}

.InfoBarStatus .InfoBarIcon {
  color: #49df74;
}

.InfoBarStatusCount {
  color: #49df74;
  font-weight: 700;
}

.TopShowcaseBox .InfoBarSmallElement {
  margin-left: 0;
}

.TopShowcaseBox .InfoBar a,
.TopShowcaseBox .InfoBar a:link,
.TopShowcaseBox .InfoBar a:visited,
.TopShowcaseBox .InfoBar a:focus,
.TopShowcaseBox .InfoBar a:active,
.TopShowcaseBox .InfoBar a:hover {
  font-size: 13px;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.TopShowcaseBox .InfoBar a:hover .InfoBarSmallElement,
.TopShowcaseBox .InfoBar a:hover .InfoBarStatusCount,
.TopShowcaseBox .InfoBar a:hover .InfoBarIcon,
.TopShowcaseBox .InfoBar a:hover .InfoBarIconSvg {
  filter: brightness(1.1);
}

.TopShowcaseCarouselWrap {
  padding: 0;
  margin: 0;
  line-height: 0;
  border: 1px solid #7a531f;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(245, 231, 206, 0.6) 0%, rgba(194, 157, 108, 0.38) 100%);
}

.TopShowcaseCarouselContainer {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.TopShowcaseCarousel {
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

.TopShowcaseSlide {
  display: block;
  width: 100%;
}

.TopShowcaseCarousel .carousel-control-prev,
.TopShowcaseCarousel .carousel-control-next {
  width: 9%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.TopShowcaseBox:hover .carousel-control-prev,
.TopShowcaseBox:hover .carousel-control-next {
  opacity: 1;
}

.TopPackageShowcaseWrap {
  padding: 22px 18px 28px;
  border: 1px solid #7a531f;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(circle at top, rgba(255, 247, 224, 0.92) 0%, rgba(224, 192, 154, 0.96) 42%, rgba(183, 138, 87, 0.92) 100%);
}

.TopPackageShowcaseInner {
  max-width: 100%;
  color: #2f180b;
}

.TopPackageShowcaseHeader {
  margin-bottom: 18px;
  text-align: center;
  line-height: 1.45;
}

.TopPackageShowcaseEyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(87, 49, 18, 0.12);
  color: #6d3d16;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.TopPackageShowcaseHeader h2 {
  margin: 0 0 6px;
  color: #4a220c;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.TopPackageShowcaseHeader p {
  margin: 0;
  font-size: 14px;
  color: #6a4327;
}

.TopPackageCountdown {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border: 1px solid rgba(122, 83, 31, 0.18);
  border-radius: 14px;
  background: rgba(255, 248, 233, 0.52);
}

.TopPackageCountdown span {
  color: #7b5228;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.TopPackageCountdown strong {
  color: #4a220c;
  font-family: Verdana, Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.TopPackageShowcaseGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.TopPackageCard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(71, 43, 16, 0.28);
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(69, 39, 13, 0.16);
  backdrop-filter: blur(3px);
}

.TopPackageCard::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.9;
  pointer-events: none;
}

.TopPackageCard > * {
  position: relative;
  z-index: 1;
}

.TopPackageCard--crystal {
  background: linear-gradient(180deg, rgba(232, 246, 255, 0.94) 0%, rgba(180, 223, 247, 0.9) 100%);
}

.TopPackageCard--crystal .TopPackageCardLabel {
  color: #0f5f8c;
}

.TopPackageCard--crystal::before {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 45%);
}

.TopPackageCard--emerald {
  background: linear-gradient(180deg, rgba(233, 255, 244, 0.94) 0%, rgba(172, 231, 195, 0.9) 100%);
}

.TopPackageCard--emerald .TopPackageCardLabel {
  color: #1f7a43;
}

.TopPackageCard--emerald::before {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 46%);
}

.TopPackageCard--ruby {
  background: linear-gradient(180deg, rgba(255, 234, 236, 0.95) 0%, rgba(244, 178, 187, 0.92) 100%);
}

.TopPackageCard--ruby .TopPackageCardLabel {
  color: #a11b2c;
}

.TopPackageCard--ruby::before {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 48%);
}

.TopPackageCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.TopPackageCardLabel {
  display: inline-block;
  max-width: 60%;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: #351b0b;
}

.TopPackageCardPrice {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(53, 27, 11, 0.1);
  font-size: 18px;
  font-weight: 700;
  color: #351b0b;
}

.TopPackageFeatureBlock {
  display: grid;
  gap: 6px;
}

.TopPackageFeatureTitle {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d3d16;
}

.TopPackageAddonRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
}

.TopPackageMountRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
}

.TopPackageAddon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 1px solid rgba(96, 43, 13, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  cursor: default;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.TopPackageAddon:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(68, 39, 13, 0.16);
}

.TopPackageAddonThumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: 100% bottom / 62px 62px no-repeat;
}

.TopPackageMountThumb {
  background-size: 72px 72px;
}

.TopPackageHighlights,
.TopPackageItems {
  margin: 0;
  padding: 0;
  list-style: none;
}

.TopPackageHighlights {
  display: grid;
  gap: 8px;
}

.TopPackageHighlights li,
.TopPackageItems li {
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  color: #442313;
}

.TopPackageHighlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.TopPackageItems li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(96, 43, 13, 0.55);
}

.TopPackageHighlights li::before {
  display: none;
}

.TopPackageHighlightIcon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.TopPackageHighlightIcon img {
  display: block;
  max-width: 26px;
  max-height: 26px;
}

.TopPackageHighlightText {
  display: inline-block;
}

.TopPackageHighlight--coins .TopPackageHighlightText {
  color: #9b5c00;
  font-weight: 700;
  text-shadow: 0 0 0 rgba(255, 214, 102, 0);
  animation: topPackageCoinsGlow 1.8s ease-in-out infinite;
}

.TopPackageHighlight--coins .TopPackageHighlightIcon {
  border-radius: 999px;
  box-shadow: 0 0 0 rgba(255, 214, 102, 0);
  animation: topPackageCoinsGlow 1.8s ease-in-out infinite;
}

@keyframes topPackageCoinsGlow {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 214, 102, 0);
    filter: brightness(1);
    text-shadow: 0 0 0 rgba(255, 214, 102, 0);
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 0 14px rgba(255, 214, 102, 0.45);
    filter: brightness(1.08);
    text-shadow: 0 0 10px rgba(255, 214, 102, 0.75);
  }
}

.TopPackageDivider {
  height: 1px;
  margin: 2px 0 0;
  background: rgba(96, 43, 13, 0.16);
}

.TopPackageCard h3 {
  margin: 0 0 10px;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #4f2410;
}

.TopPackageItems {
  display: grid;
  gap: 7px;
}

.TopPackageItems li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
}

.TopPackageItems li::before {
  display: none;
}

.TopPackageItemSprite {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(96, 43, 13, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.TopPackageItemSprite img {
  display: block;
}

.TopPackageItemText {
  display: inline-block;
}

.TopPackageCardFooter {
  margin-top: auto;
  padding-top: 8px;
}

.TopPackageCTA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(53, 27, 11, 0.18);
  border-radius: 11px;
  box-shadow: 0 10px 20px rgba(69, 39, 13, 0.12);
  box-sizing: border-box;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.TopPackageCTA:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(69, 39, 13, 0.16);
  text-decoration: none;
}

.TopPackageCTA--crystal {
  background: linear-gradient(180deg, #1f84bd 0%, #14648f 100%);
  color: #f6ead1 !important;
}

.TopPackageCTA--emerald {
  background: linear-gradient(180deg, #2f9b55 0%, #1f7a43 100%);
  color: #f6ead1 !important;
}

.TopPackageCTA--ruby {
  background: linear-gradient(180deg, #c63b4f 0%, #9f2033 100%);
  color: #f6ead1 !important;
}

.TopPackageCTA:link,
.TopPackageCTA:visited,
.TopPackageCTA:focus,
.TopPackageCTA:active {
  color: #f6ead1 !important;
  text-decoration: none;
}

.TopPackageCTA {
  text-shadow: 0 1px 0 rgba(53, 27, 11, 0.38);
}

@media (max-width: 991px) {
  .TopPackageShowcaseGrid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .TopPackageCardLabel {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .TopPackageShowcaseWrap {
    padding: 18px 12px 22px;
  }

  .TopPackageShowcaseHeader h2 {
    font-size: 22px;
  }

  .TopPackageCountdown strong {
    font-size: 22px;
  }

  .TopPackageCardHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .TopPackageCardPrice {
    align-self: flex-start;
  }

  .TopPackageCTA {
    font-size: 20px;
  }
}

/* "star-HTML-hack" to to implement min-width in IE */
* html #ContentHelper {
  display: inline-block;
  position: relative;
  top: -800px;
  margin: -20px;
  margin-right: -570px;
}

.Content > .Box,
#ContentHelper > .Box {
  position: relative;
  margin: 5px;
  margin-bottom: 18px;
  color: #3d2314;
  overflow: visible;
}

.Content .BoxContent {
  font-family:
    Verdana,
    Arial,
    sans-serif;
  font-size: 9pt;
  background-color: #e0c09a;
  color: #3d2314;
  min-height: 367px;
  height: auto !important;
  height: 387px;
}

/* "star-HTML-hack" to correct Box width in IE */
* html .Content .Box {
  width: 100%;
}
/* "star-HTML-hack" to correct BoxContent width in IE */
* html .Content .BoxContent {
  width: 100%;
}

.Content th {
  font-family:
    Verdana,
    Arial,
    sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: white;
  background-color: #505050;
}

.Content .BoxContent td {
  font-family:
    Verdana,
    Arial,
    sans-serif;
  font-size: 10pt;
  color: #3d2314;
}

/* Content Links */

.Content a {
  font-family:
    Verdana,
    Arial,
    sans-serif;
  font-weight: bold;
  color: #004294;
  text-decoration: none;
}
.Content a:hover {
  font-family:
    Verdana,
    Arial,
    sans-serif;
  font-weight: bold;
  text-decoration: underline;
  color: #0063dc;
}
.Content .HelpLink {
  font-size: 7pt;
  cursor: pointer;
}

/* Corners */

.Content .Corner-tl {
  position: absolute;
  top: -4px;
  left: -5px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .Corner-tr {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .BottomCornersHelper {
  position: absolute;
  width: 100%;
}

.Content .CornerWrapper-b {
  position: absolute;
  width: 100%;
}

.Content .Corner-bl {
  position: absolute;
  bottom: -4px;
  left: -6px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .Corner-br {
  position: absolute;
  bottom: -4px;
  right: -6px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.SecretAchievementIcon {
  position: absolute;
  width: 44px;
  height: 20px;
  margin-left: 12px;
  margin-top: -2px;
  right: 5px;
}

/* Borders */

.Content .BorderTitleText {
  position: relative;
  height: 40px;
  border: 1px solid #7a531f;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #1d5385 0%, #0f3b67 55%, #092a4f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.Content .Title,
.Content .TitleText {
  position: absolute;
  top: 6px;
  left: 20px;
}

.Content .Title {
  display: none;
}

.Content .TitleText {
  right: 20px;
  display: flex;
  align-items: center;
  min-height: 28px;
  color: #f2e3be;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(50, 27, 7, 0.95),
    0 0 8px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}

.Content .Border_2 {
  margin: 0 0px 0px;
  padding: 0px;
  background-color: #7a531f;
}

.Content .Border_3 {
  margin: 0 1px 1px;
  border-top: 0;
  border-bottom: 1px solid rgba(52, 30, 10, 0.35);
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  THEMEBOXES of the Tibia
 *  website
 *  -------------------------------
 */

.Themebox {
  position: relative;
  margin-bottom: 10px;
  top: -4px;
  width: 180px;
  height: 154px;
}
#Themeboxes div {
  font-size: 10pt;
  background-repeat: no-repeat;
}
#Themeboxes .ThemeboxButton {
  position: absolute;
  bottom: 20px;
  left: 22px;
  height: 25px;
  width: 135px;
  cursor: pointer;
}
#Themeboxes .Bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 12px;
  width: 180px;
}
/* "star-HTML-hack" to correct the position of the bottom element */
* html #Themeboxes .Bottom {
  bottom: -3px;
}
#Themeboxes #NewcomerBox .ThemeboxButton {
  bottom: 15px;
}

#PremiumBox {
  position: relative;
  height: 204px;
}
#PremiumBoxDecor {
  margin: 0;
  position: absolute;
  top: -28px;
  left: 5px;
  width: 64px;
  height: 64px;
}
#PremiumBoxBg {
  margin: 0;
  position: absolute;
  top: 34px;
  left: 10px;
  width: 160px;
  height: 126px;
}
#PremiumBoxOverlay {
  margin: 0;
  position: absolute;
  top: 34px;
  left: 10px;
  width: 163px;
  height: 26px;
}
#PremiumBoxOverlayText {
  color: #fff;
  font-family: Verdana, sans-serif;
  margin-top: 3px;
  text-align: center;
  font-size: 11px;
}
#PremiumBoxButtonDecor {
  position: absolute;
  width: 114px;
  height: 26px;
  left: 33px;
  bottom: 34px;
  z-index: 25;
}
#PremiumBoxButton {
  position: absolute;
  bottom: 9px;
  left: 18px;
  text-align: center;
}

#Themeboxes #JobBox {
  height: 164px;
}
#Themeboxes #GalleryBox #GalleryContent {
  position: relative;
  height: 111px;
  width: 170px;
  top: 31px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  border: 0;
  cursor: pointer;
}
#Themeboxes #CurrentPollBox #CurrentPollText {
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  line-height: 11pt;
  color: #3d2314;
  position: absolute;
  height: 70px;
  width: 150px;
  top: 37px;
  left: 15px;
  padding-top: 5px;
  overflow: hidden;
}
#Themeboxes #SkyscraperBanner {
  border: 0;
}

#Themeboxes #NetworksBox {
  position: relative;
  height: 204px;
}
#Themeboxes #NetworksBox #FacebookBlock {
  position: relative;
  top: 32px;
  height: 113px;
}
#Themeboxes #NetworksBox #FacebookLikeBox {
  position: relative;
  left: 27px;
  top: 3px;
  height: 60px;
  width: 115px;
  overflow: hidden;
}
#Themeboxes #NetworksBox #FacebookLikeBox div {
  position: relative;
  left: -1px;
  top: -1px;
}
#Themeboxes #NetworksBox #FacebookSendBox {
  position: absolute;
  left: 92px;
  top: 14px;
  width: 50px;
}
#Themeboxes #NetworksBox #FacebookLikes {
  position: relative;
  left: 14px;
  top: 10px;
  width: 155px;
  left: 13px;
  overflow: hidden;
}
#Themeboxes #NetworksBox #FacebookLikes div {
  position: relative;
  left: -69px;
}
#Themeboxes #NetworksBox #TwitterBlock {
  position: relative;
  top: 42px;
  text-align: center;
}

/** -------------------------------
 *  OLD Stylesheet declarations for
 *  the CONTENT AREA
 *  -------------------------------
 */

.Content .BoxContent td .white {
  color: #efefef;
  visibility: visible;
}

.Content .BoxContent td .whites {
  color: #efefef;
  visibility: visible;
  font-size: 9pt;
}

.Content .BoxContent .white {
  color: #efefef;
  visibility: visible;
}

.Content .BoxContent td .green {
  color: #00bf00;
}

.Content .BoxContent td .yellow {
  color: #ffbb05;
}

.Content .BoxContent td .red {
  color: #ef0000;
}

.Content .BoxContent td .grey {
  color: #808080;
}

.Content .BoxContent td .orange {
  color: #ff9712;
}

/** -------------------------------
 *  OLD Stylesheet declarations for
 *  the CONTENT AREA (forum)
 *  -------------------------------
 */

.Content .BoxContent .ff_info {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 10pt;
  color: #3d2314;
  visibility: visible;
}

.Content .ff_white a {
  color: #ffffff;
}

.Content .BoxContent .ff_white {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  color: #efefef;
  visibility: visible;
  font-size: 7pt;
  font-weight: bold;
}

.Content .BoxContent .ff_red {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  color: #ef0000;
  visibility: visible;
  font-size: 8pt;
  font-weight: bold;
}

.Content .BoxContent .ff_whitelarge {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  color: #efefef;
  visibility: visible;
  font-size: 9pt;
  font-weight: bold;
}

.Content .BoxContent .ff_info {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 8pt;
  color: #3d2314;
  visibility: visible;
}

.Content .BoxContent .ff_infotext {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 8pt;
  color: #3d2314;
  visibility: visible;
  line-height: 12pt;
}

.Content .BoxContent .ff_smallinfo {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 7pt;
  color: #3d2314;
  visibility: visible;
}

.Content .BoxContent .ff_large {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 12pt;
  color: #3d2314;
  visibility: visible;
}

.Content .BoxContent .ff_pagetext {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 9pt;
  color: #3d2314;
  visibility: visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_pagetextgrey {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 9pt;
  color: #505050;
  visibility: visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_pagetextred {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 9pt;
  color: #f00;
  visibility: visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_correct {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 11pt;
  color: #ff0000;
  visibility: visible;
  font-weight: bold;
}

.FormFieldError {
  font-size: 8pt;
  color: red;
}
.SmallBox {
  position: relative;
  font-size: 1px;
}
.SmallBox .ErrorMessage {
  font-size: 8pt;
  position: relative;
  color: red;
  height: 100%;
  background-color: #cfa048;
  padding: 5px;
  padding-left: 43px;
}
.SmallBox .Message {
  font-size: 10pt;
  position: relative;
  height: 100%;
  background-color: #cfa048;
  padding: 10px;
}
.SmallBox .ErrorMessage ul {
  padding-left: 15px;
}
.SmallBox .BoxFrameHorizontal {
  position: relative;
  height: 4px;
}
.SmallBox .BoxFrameVerticalRight {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}
.SmallBox .BoxFrameVerticalLeft {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}
.SmallBox .MessageContainer {
  position: relative;
  height: 100%;
}
.SmallBox .BoxFrameEdgeLeftTop {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeLeftBottom {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeRightTop {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeRightBottom {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .AttentionSign {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 30px;
  height: 26px;
}

/** ----------------
 *  new process bars
 *  ----------------
 */

#ProgressBar #Headline {
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: 5px;
}
#ProgressBar #MainContainer {
  position: relative;
  top: 10px;
  height: 50px;
  margin-bottom: 25px;
}
#ProgressBar #BackgroundContainer {
  position: relative;
  width: 100%;
}

#ProgressBar #BackgroundContainerLeftEnd {
  position: absolute;
  float: left;
}
#ProgressBar #BackgroundContainerCenter {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 17px;
  width: 100%;
}
#ProgressBar #BackgroundContainerCenterImage {
  position: relative;
  margin-left: 25px;
  margin-right: 25px;
  height: 17px;
}
#ProgressBar #BackgroundContainerRightEnd {
  position: absolute;
  right: 0px;
  top: 0px;
  float: right;
}
#ProgressBar #TubeLeftEnd {
  position: absolute;
  left: 25px;
  top: 4px;
}
#ProgressBar #TubeRightEnd {
  position: absolute;
  right: 25px;
  top: 4px;
  z-index: 0;
}
#ProgressBar .Steps {
  position: relative;
  height: 39px;
  font-size: 9px;
  float: left;
  top: -11px;
  margin-left: -1px;
}
#ProgressBar #StepsContainer1 {
  text-align: right;
  margin-left: 92px;
  margin-right: 40px;
  height: 10px;
}
#ProgressBar #StepsContainer2 {
  width: 100%;
  height: 10px;
}
#ProgressBar .TubeContainer {
  position: relative;
  padding-right: 47px;
}
#ProgressBar .Tube {
  position: relative;
  top: 16px;
  left: 0px;
  width: 100%;
  height: 7px;
  background: #ffffff none repeat scroll 0%;
}
* html #ProgressBar .Tube {
  top: 13px;
}
#ProgressBar .SingleStepContainer {
  position: absolute;
  top: 0px;
  width: 47px;
  height: 30px;
  right: 0px;
  text-align: center;
}
#ProgressBar #FirstStep .SingleStepContainer {
  left: 45px;
  width: 47px;
  position: absolute;
}
#ProgressBar .StepIcon {
  position: absolute;
  right: 0px;
}
* html #ProgressBar .StepIcon {
  right: -1px;
}
#ProgressBar #FirstStep .StepIcon {
  top: 0px;
  left: 0px;
}
#ProgressBar .StepText {
  top: 40px;
  position: absolute;
  width: 200px;
  right: -77px;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  NEW TABLES
 *  -------------------------------
 */

.TableContainer {
  border: 1px solid black;
  position: relative;
  width: 100%;
  font-size: 1px;
}
.TableContainer .Odd {
  background-color: #f10b0f;
}
.TableContainer .Even {
  background-color: #f10b0f;
}
.Text {
  margin-top: 3px;
  margin-left: 4px;
  margin-bottom: 2px;
  padding: 3px;
  padding-top: 3px;
}

/* TABLEHEADER DECORATION */
.TableContainer .CaptionContainer {
  position: relative;
  font-size: 1pt;
  background-color: #cfa048 !important;
  height: 100%;
  width: 100%;
  text-align: left;
}
.TableContainer .CaptionContainer .CaptionInnerContainer {
  position: relative;
  background-color: #cfa048;
  width: 100%;
  height: 100%;
  padding-top: 3px;
  padding-bottom: 4px;
}
.TableContainer .CaptionContainer .Text {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: white;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftTop {
  position: absolute;
  width: 5px;
  height: 5px;
  top: -2px;
  left: -2px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeRightTop {
  position: absolute;
  width: 5px;
  height: 5px;
  top: -2px;
  right: -2px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
  position: absolute;
  width: 5px;
  height: 5px;
  left: -2px;
  bottom: -3px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeRightBottom {
  position: absolute;
  width: 5px;
  height: 5px;
  right: -2px;
  bottom: -3px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionBorderTop {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  top: -1px;
}
.TableContainer .CaptionContainer .CaptionBorderBottom {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  bottom: -2px;
}
.TableContainer .CaptionContainer .CaptionVerticalLeft {
  position: absolute;
  height: 100%;
  width: 3px;
  left: -1px;
  top: 0px;
}
.TableContainer .CaptionContainer .CaptionVerticalRight {
  position: absolute;
  height: 100%;
  width: 3px;
  right: -1px;
  top: 0px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightTop {
  right: -3px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
  bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightBottom {
  right: -3px;
  bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionBorderBottom {
  bottom: -3;
}
* html .TableContainer .CaptionContainer .CaptionVerticalRight {
  right: -2px;
}
/* TABLE CONTENT */
.TableContentContainer {
  border: 1px solid #cfa048;
  position: relative;
  margin-right: 4px;
  height: 100%;
  background-color: #cfa048;
  padding: 0px;
}
.TableContent {
  width: 100%;
  border-collapse: collapse;
}
.TableContent td {
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}
/* INNERLYOUT 1 */
.TableContainer .Table1 {
  width: 100%;
  background-color: #cfa048;
  border: 2px solid #55636c;
}
.TableContainer .Table1 .InnerTableContainer {
  padding: 5px;
}
/* INNERLYOUT 2 */
.TableContainer .Table2 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #f10b0f;
  padding: 0px;
  margin: 0px;
  border-collapse: collapse;
}
.TableContainer .Table2 td {
  padding: 0px;
  margin: 0px;
}
.TableContainer .Table2 .InnerTableContainer {
  margin-top: 1px;
}
.TableContainer .Table2 .InnerTableContainer table {
  border-collapse: collapse;
}
.TableContainer .Table2 .InnerTableContainer td {
  padding-top: 2px;
  padding-left: 5px;
  padding-bottom: 2px;
  padding-right: 5px;
  border: 1px solid #55636c;
}
/* INNERLYOUT 3 */
.TableContainer .Table3 {
  width: 100%;
  border: 2px solid #227c5e;
  background-color: #2a302c;
}
.TableContainer .Table3 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table3 .TableContentAndRightShadow td {
  border: 1px solid #55636c;
}
/* INNERLYOUT 4 */
.TableContainer .Table4 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #0f532e;
}
.TableContainer .Table4 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 3px;
}
.TableContainer .Table4 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* INNERLYOUT 5 */
.TableContainer .Table5 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #2a302c;
}
.TableContainer .Table5 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table5 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* SHADOWS */
.TableShadowContainerRightTop {
  position: relative;
  top: 0px;
  right: 3px;
  margin-right: 0px;
  font-size: 1px;
  float: right;
  z-index: 99;
}
.TableShadowRightTop {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 4px;
  height: 5px;
  z-index: 99;
}
.TableContentAndRightShadow {
  position: relative;
  background-repeat: repeat-y;
  background-position: top right;
  margin-right: 3px;
  font-size: 1px;
  /*box-shadow: 3px 3px 2px #100b07;*/
}
.TableShadowContainer {
  position: relative;
  margin-right: 5px;
}
.TableBottomShadow {
  position: relative;
  font-size: 1px;
  height: 5px;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.TableBottomLeftShadow {
  position: relative;
  height: 5px;
  width: 4px;
  float: left;
  padding: 0px;
  margin: 0px;
}
.TableBottomRightShadow {
  position: relative;
  float: right;
  right: -2px;
  top: 0px;
  height: 5px;
  width: 4px;
}
/* HEADLESS CONTENT TABLE */
.HeadlessTable {
  border: 0px;
  border-style: solid;
  border-color: #656565;
  border-top-width: 1px;
  border-top-color: white;
  border-left-width: 1px;
  border-left-color: white;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-right-color: #656565;
  margin-left: 15px;
}
/* LABELS */
.InnerTableContainer .TableContentContainer {
  box-shadow: 3px 3px 2px #100b07;
}
.TableContentContainer {
  border: 1px solid #cfa048;
  position: relative;
  margin-right: 7px;
  margin-bottom: 5px;
  height: 100%;
  background-color: #cfa048;
  padding: 0;
}
.TableContainer .Table3 .TableContent td {
  border: 1px solid #c9dbd1;
}

.TableContainer .GreedyCell {
  width: 80%;
}

.team-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.team-page__headline {
  text-align: center;
}

.team-page__headline table {
  margin: 0 auto;
}

.team-page__headline-text {
  text-align: center;
  vertical-align: middle;
  font-size: 17px;
  font-weight: bold;
  color: #f6e3bd;
  text-shadow:
    0 1px 0 #442a14,
    0 0 8px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.03em;
}

.team-page .team-section {
  border-color: #4b2e1a;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 220, 156, 0.08);
}

.team-page .team-section .CaptionContainer {
  background: linear-gradient(180deg, #d9b15d 0%, #b67c2f 100%) !important;
}

.team-page .team-section .CaptionInnerContainer {
  background: linear-gradient(180deg, #d9b15d 0%, #b67c2f 100%);
}

.team-page .team-section .Text {
  min-height: 22px;
  color: #fff7e4;
  letter-spacing: 0.04em;
}

.team-page .team-table {
  border: 1px solid #5c3e22 !important;
  box-shadow:
    0 10px 16px rgba(0, 0, 0, 0.2),
    0 6px 20px rgba(0, 0, 0, 0.19) !important;
}

.team-page .team-table .InnerTableContainer {
  margin-top: 4px;
  margin-left: 2px;
}

.team-page .team-table .TableContentContainer {
  background:
    linear-gradient(180deg, rgba(51, 75, 66, 0.96) 0%, rgba(31, 45, 40, 0.98) 100%),
    #24332d;
  border-color: #638776;
}

.team-page .team-table .TableContent td {
  vertical-align: middle;
  border-color: #8ba497;
}

.team-page .team-table .TableContent > tbody > tr:first-child td {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #4a3017;
  border-color: rgba(94, 67, 37, 0.45) !important;
  background: linear-gradient(180deg, #eed6ad 0%, #d8b07d 100%);
}

.team-page .team-table .TableContent tr[style*="height: 64px"] td {
  color: #f3e7d1;
}

.team-page .team-table .TableContent tr[style*="height: 64px"] td:first-child {
  width: 68px;
  text-align: center;
}

.team-page .team-table .TableContent img[alt="player outfit"] {
  display: block;
  margin: 0 auto;
}

.team-page .team-table a {
  color: #fff1c5;
  font-weight: bold;
  text-decoration: none;
}

.team-page .team-table a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.team-page .team-table font {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
}

.team-page .team-table font[color="red"] {
  background: linear-gradient(180deg, #b63a3a 0%, #7a1717 100%);
  color: #ffe1e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-page .team-table font[color="chocolate"] {
  background: linear-gradient(180deg, #cf8f3a 0%, #8a5414 100%);
  color: #fff0d6 !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-page .team-table font[color="royalblue"] {
  background: linear-gradient(180deg, #3f72d2 0%, #203d84 100%);
  color: #e2ebff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-page .team-table font[color="seagreen"] {
  background: linear-gradient(180deg, #31a06b 0%, #186543 100%);
  color: #e2ffef !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-page .team-table font[color="forestgreen"] {
  background: linear-gradient(180deg, #4f9b39 0%, #2d6520 100%);
  color: #ecffe3 !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-page .team-table .TableContent tr[style*="height: 64px"] td:nth-child(4) font[color="green"] {
  background: rgba(48, 161, 98, 0.18);
  border: 1px solid rgba(109, 235, 155, 0.3);
  color: #9ff1bc !important;
  min-width: 78px;
  text-align: center;
  text-transform: uppercase;
}

.team-page .team-table .TableContent tr[style*="height: 64px"] td:nth-child(4) font[color="red"] {
  background: rgba(158, 54, 54, 0.18);
  border: 1px solid rgba(255, 121, 121, 0.25);
  color: #ffaaaa !important;
  min-width: 78px;
  text-align: center;
  text-transform: uppercase;
}
.LabelV80 {
  font-weight: 700;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 80px;
}
.LabelV100 {
  font-weight: 700;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 100px;
}
.LabelV120 {
  font-weight: 700;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 120px;
}
.LabelV150 {
  font-weight: 700;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 150px;
}
.LabelV175 {
  font-weight: 700;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 175px;
}
.LabelV200 {
  font-weight: 700;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 200px;
}
.LabelV250 {
  font-weight: 700;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 250px;
}

.LabelV {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
}
.LabelH {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  background-color: #36404b;
}
.LabelH td {
  background-color: #d4c813;
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}

/* BUTTONS */
.InnerTableButtonRow {
  width: 100%;
  padding-left: 1px;
  padding-right: 0px;
  padding-bottom: 4px;
  border: 0px;
}
.InnerTableButtonRow td {
  padding-right: 4px;
}
.BigButton {
  position: relative;
  width: 135px;
  height: 25px;
  z-index: 10;
}
.BigButtonOver {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 137px;
  height: 25px;
  visibility: hidden;
  z-index: 15;
}
.ButtonText {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 135px;
  z-index: 20;
}
.BigButtonText {
  position: absolute;
  top: 0;
  left: 0;
  width: 135px;
  height: 25px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: none;
  text-align: center;
  color: #ffd18c;
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  z-index: 20;
  text-shadow:
    -1px -1px 0 #000,
    0 -1px 0 #000,
    1px -1px 0 #000,
    1px 0 0 #000,
    1px 1px 0 #000,
    0 1px 0 #000,
    -1px 1px 0 #000,
    -1px 0 0 #000;
}
.BigButtonText:hover {
  top: 1px;
  left: 1px;
}
.TopButtonContainer {
  position: relative;
  right: 4px;
  top: 4px;
  z-index: 60;
}
* html .TopButtonContainer {
  right: 27px;
}
.TopButtonContainer .TopButton {
  position: absolute;
  right: 0;
  z-index: 55;
  cursor: pointer;
}

.Content .BoxContent .Odd {
  background-color: #cfa048;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #c712c7;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

/* News Ticker */

.Content #NewsTicker .BoxContent {
  padding: 5px;
  min-height: 90px;
  height: auto !important;
  height: 100px;
}

.Content #NewsTicker .NewsTickerPanelBody {
  padding: 10px 12px 14px;
  border: 1px solid rgba(122, 83, 31, 0.28);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
}

.Content #NewsTicker .BoxContent .Row {
  position: relative;
  width: 100%;
}

.Content #NewsTicker .NewsTickerIcon {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

.Content #NewsTicker .NewsTickerText {
  font-size: 9pt;
  position: relative;
  margin-left: 26px;
}

.Content #NewsTicker .NewsTickerDate {
  font-size: 11px;
  position: absolute;
  top: 0px;
  float: left;
  color: #724318;
  font-weight: 700;
}

.Content #NewsTicker .NewsTickerShortText {
  margin-left: 92px;
  min-height: 16px;
  color: #2f2413;
}

.Content #NewsTicker .NewsTickerFullText {
  margin-left: 92px;
  margin-right: 20px;
  display: none;
  color: #3d2314;
}

.Content #NewsTicker .NewsTickerExtend {
  position: relative;
  right: 0px;
  top: 1px;
  right: 1px;
  height: 12px;
  width: 12px;
  background-repeat: no-repeat;
  float: right;
  cursor: pointer;
  z-index: 10;
}

/* Featured Article */

.Content #FeaturedArticle .BoxContent {
  position: relative;
  height: 100px;
  padding: 5px;
  padding-left: 10px;
  min-height: 100px;
  height: auto !important;
  height: 110px;
  line-height: 10.5pt;
}

.Content #FeaturedArticle .FeaturedArticlePanelBody {
  padding: 12px;
  border: 1px solid rgba(122, 83, 31, 0.28);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
}
.Content #FeaturedArticle .NewsHeadline {
  margin-top: 5px;
}

.Content #FeaturedArticle #TeaserThumbnail {
  position: relative;
  top: 0px;
  right: 0px;
  height: 100px;
  width: 150px;
  margin-left: 10px;
  background-color: black;
  z-index: 90;
  float: right;
}

#ContentHelper #FeaturedArticle:first-child .BoxContent {
  padding: 10px;
}

.Content #FeaturedArticle #TeaserText {
  height: 100px;
  overflow: hidden;
  z-index: 0;
}

.Content #FeaturedArticle #Link {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 89 165 0 0;
  z-index: 99;
}

.Content #FeaturedArticle .NewsHeadlineBackground {
  position: relative;
  min-height: 38px;
  margin-bottom: 5px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #1d5385 0%, #0f3b67 55%, #092a4f 100%);
  border-left: 0;
  border-right: 0;
  border: 1px solid #7a531f;
  border-radius: 10px 10px 0 0;
}

.Content #FeaturedArticle .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  float: left;
}

.Content #FeaturedArticle .NewsHeadlineDate {
  font-size: 11px;
  position: static;
  width: auto;
  color: white;
  font-weight: 700;
}

.Content #FeaturedArticle .NewsHeadlineText {
  position: static;
  min-width: 0;
  font-size: 18px;
  font-weight: bold;
  color: white;
}

/* News */

.Content #News .BoxContent {
  padding: 10px 12px 14px;
  min-height: 100px;
  height: auto !important;
  height: 110px;
}

.Content #News .NewsHeadline {
  margin: 0 0 10px;
}

.Content #News .NewsHeadlineBackground {
  position: relative;
  min-height: 38px;
  margin-bottom: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #1d5385 0%, #0f3b67 55%, #092a4f 100%);
  border-left: 0;
  border-right: 0;
  border: 1px solid #7a531f;
  border-radius: 10px 10px 0 0;
}

.Content #News .NewsHeadlineIcon {
  display: none;
}

.Content #News .NewsHeadlineDate {
  flex-shrink: 0;
  font-size: 11px;
  position: static;
  width: auto;
  color: white;
  font-weight: 700;
}

.Content #News .NewsHeadlineText {
  position: static;
  min-width: 0;
  font-size: 18px;
  font-weight: bold;
  color: white;
  line-height: 1;
}

.Content #News .NewsHeadlineAuthor {
  position: static;
  margin-left: auto;
  padding-left: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.Content #News .NewsCardBody {
  border: 1px solid rgba(122, 83, 31, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
  overflow: hidden;
}

.Content #News .NewsCardContent {
  padding: 14px 18px 10px;
  line-height: 1.55;
}

.Content #News .NewsCardFooter {
  display: flex;
  justify-content: flex-end;
  padding: 0 18px 14px;
}

.Content #News .NewsCommentLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0c4f96;
  font-size: 13px;
  font-weight: 700;
}

.Content #News .NewsCommentLink::before {
  content: "\00BB";
  font-size: 16px;
  line-height: 1;
}

.Content #NewsArchive .NewsArchivePanel {
  border: 1px solid rgba(122, 83, 31, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
  overflow: hidden;
}

.Content #NewsArchive .NewsArchivePanelHeader {
  min-height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(180deg, #1d5385 0%, #0f3b67 55%, #092a4f 100%);
  border-bottom: 1px solid rgba(52, 30, 10, 0.35);
}

.Content #NewsArchive .NewsArchivePanelBody {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.Content #NewsArchive .NewsArchiveRow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(61, 35, 20, 0.08);
}

.Content #NewsArchive .NewsArchiveRow:hover {
  background: rgba(61, 35, 20, 0.13);
  text-decoration: none;
}

.Content #NewsArchive .NewsArchiveRowDate {
  flex-shrink: 0;
  color: #724318;
  font-size: 11px;
  font-weight: 700;
}

.Content #NewsArchive .NewsArchiveRowTitle {
  min-width: 0;
  color: #2f2413;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Content #newsticker .CoinsSpendersPanelBody {
  padding: 10px 12px 14px;
  min-height: 90px;
  border: 1px solid rgba(122, 83, 31, 0.28);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
}

.AccountPanel {
  margin-bottom: 18px;
  border: 1px solid rgba(122, 83, 31, 0.35);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
  overflow: hidden;
}

.AccountPanelHeader {
  min-height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(180deg, #1d5385 0%, #0f3b67 55%, #092a4f 100%);
  border-bottom: 1px solid rgba(52, 30, 10, 0.35);
}

.AccountPanelBody {
  padding: 16px 18px;
}

.AccountLoginForm {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.AccountLoginFields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.AccountField {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.AccountField--remember {
  grid-template-columns: 170px minmax(0, 1fr);
}

.AccountFieldLabel {
  color: #3d2314;
  font-size: 13px;
  font-weight: 700;
}

.AccountFieldInput {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(122, 83, 31, 0.35);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.92);
  box-sizing: border-box;
  color: #2f2413;
  font-size: 14px;
}

.AccountFieldInput:focus {
  outline: none;
  border-color: #0f5c9a;
  box-shadow: 0 0 0 2px rgba(15, 92, 154, 0.12);
}

.AccountRememberLabel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #5f4630;
  font-size: 13px;
  font-weight: 600;
}

.AccountLoginActions {
  width: 180px;
  display: flex;
  justify-content: flex-end;
}

.AccountPanelFooterAction {
  padding: 0 18px 18px;
}

.ModernActionButton {
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(74, 50, 18, 0.35);
  border-radius: 9px;
  cursor: pointer;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease;
}

.ModernActionButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.ModernActionButton--full {
  width: 100%;
}

.ModernActionButton--primary {
  width: 100%;
  color: #f4e8c5;
  background: linear-gradient(180deg, #1d5385 0%, #0f3b67 55%, #092a4f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 10px rgba(9, 42, 79, 0.18);
}

.ModernActionButton--secondary {
  color: #f2e3be;
  background: linear-gradient(180deg, #6a5837 0%, #4d391d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 10px rgba(52, 30, 10, 0.12);
}

.ModernActionButton--accent {
  min-width: 190px;
  color: #fff4e4;
  background: linear-gradient(180deg, #da3b14 0%, #a61508 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 10px rgba(125, 16, 7, 0.22);
}

.AccountIntroTitle {
  margin: 28px 0 16px;
  text-align: center;
  color: #3d2314;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
}

.AccountNewPlayerBody {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.AccountNewPlayerText {
  color: #3d2314;
  font-size: 15px;
}

.AccountNewPlayerText p {
  margin: 0 0 6px;
}

.AccountNewPlayerBulletList {
  margin-left: 10px;
}

.AccountCreateForm {
  flex-shrink: 0;
}

.AccountWorkflowForm {
  margin: 0;
}

.AccountWorkflowForm .TableContainer {
  border: 1px solid rgba(122, 83, 31, 0.35);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
  overflow: hidden;
}

.AccountWorkflowForm .CaptionContainer,
.AccountManagePage .CaptionContainer {
  background: linear-gradient(180deg, #1d5385 0%, #0f3b67 55%, #092a4f 100%);
}

.AccountWorkflowForm .CaptionContainer .Text,
.AccountManagePage .CaptionContainer .Text {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.AccountWorkflowForm .TableContentContainer,
.AccountManagePage .TableContentContainer {
  border: 1px solid rgba(122, 83, 31, 0.28);
  border-radius: 8px;
  background: rgba(248, 237, 216, 0.9);
  box-shadow: none;
  margin-right: 0;
  margin-bottom: 0;
}

.AccountWorkflowForm input[type="text"],
.AccountWorkflowForm input[type="password"],
.AccountWorkflowForm select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(122, 83, 31, 0.35);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.92);
  box-sizing: border-box;
  color: #2f2413;
}

.AccountWorkflowForm input[type="text"]:focus,
.AccountWorkflowForm input[type="password"]:focus,
.AccountWorkflowForm select:focus {
  outline: none;
  border-color: #0f5c9a;
  box-shadow: 0 0 0 2px rgba(15, 92, 154, 0.12);
}

.AccountWorkflowSubmit {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.AccountWorkflowIntro {
  margin-bottom: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(122, 83, 31, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
}

.AccountWorkflowIntro h2 {
  margin: 0 0 12px;
  color: #3d2314;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 28px;
}

.AccountWorkflowIntro p,
.AccountWorkflowIntro li {
  color: #4e3824;
  font-size: 14px;
  line-height: 1.5;
}

.AccountCreateIntro {
  margin-bottom: 16px;
}

.AccountCreateIntro h2 {
  font-size: 25px;
}

.AccountCreateIntro p {
  font-size: 13px;
}

.AccountCreateModernForm {
  margin: 0;
}

.AccountCreateGrid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.AccountCreateSection {
  margin-bottom: 0;
}

.AccountCreateSection .AccountPanelHeader {
  font-size: 15px;
}

.AccountCreateSectionBody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.AccountCreateModernForm .AccountFieldLabel,
.AccountCreateModernForm .AccountChoice,
.AccountCreateModernForm .AccountCreateRulesTitle,
.AccountCreateModernForm .AccountCreateCheckbox,
.AccountCreateModernForm .AccountCreateHint {
  font-size: 12px;
}

.AccountCreateModernForm .AccountFieldInput,
.AccountCreateModernForm select,
.AccountCreateModernForm .FormFieldError {
  font-size: 13px;
}

.AccountCreateModernForm .ModernActionButton {
  font-size: 16px;
}

.AccountCharacterCreateIntro {
  margin-bottom: 16px;
}

.AccountCharacterCreateRules {
  display: grid;
  gap: 10px;
}

.AccountCharacterCreateRules p {
  margin: 0;
}

.AccountCharacterCreateWarning {
  padding: 10px 12px;
  border: 1px solid rgba(166, 21, 8, 0.22);
  border-radius: 8px;
  background: rgba(255, 238, 235, 0.85);
  color: #8d1e11;
  font-size: 13px;
  font-weight: 700;
}

.AccountCharacterCreateForm {
  margin: 0;
}

.AccountCharacterCreateForm .AccountPanelBody {
  padding: 14px 16px;
}

.AccountCreateFieldError--inline {
  margin: 6px 0 0;
  min-height: 14px;
}

.AccountCharacterSuggest {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
}

.AccountCharacterSuggest a {
  color: #0c4f96;
  text-decoration: none;
}

.AccountCharacterSuggest a:hover {
  text-decoration: underline;
}

.AccountCharacterCreateHint {
  margin-left: 182px;
}

.AccountCharacterCreateSubmit {
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.AccountCharacterCreateSubmit .ModernActionButton {
  min-width: 180px;
}

.AccountSuccessIntro {
  margin-bottom: 16px;
}

.AccountSuccessPanel {
  margin-bottom: 0;
}

.AccountSuccessBody {
  padding: 18px 20px;
}

.AccountSuccessDescription {
  color: #4e3824;
  font-size: 14px;
  line-height: 1.6;
}

.AccountSuccessDescription b,
.AccountSuccessDescription strong {
  color: #3d2314;
}

.AccountSuccessActions .ModernActionButton {
  min-width: 180px;
}

.AccountCreateFieldControl,
.AccountCreateSelectWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.AccountCreateSelectWrap select {
  min-width: 240px;
}

.AccountCreateFieldError {
  margin: -4px 0 0 182px;
  min-height: 14px;
}

.AccountCreateHint {
  margin-left: 182px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 83, 31, 0.2);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.45);
  color: #5c432c;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.AccountCreateRequired {
  color: #a61508;
}

.AccountField--choices,
.AccountField--captcha {
  align-items: start;
}

.AccountChoiceGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.AccountChoice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(122, 83, 31, 0.22);
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.55);
  color: #3d2314;
  font-size: 13px;
  font-weight: 700;
}

.AccountCreateRulesBox {
  padding: 12px 14px;
  border: 1px solid rgba(122, 83, 31, 0.2);
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.5);
}

.AccountCreateRulesTitle {
  margin-bottom: 10px;
  color: #3d2314;
  font-size: 14px;
  font-weight: 700;
}

.AccountCreateCheckbox {
  display: inline-flex;
  align-items: start;
  gap: 10px;
  color: #4e3824;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.AccountCreateCheckbox a {
  color: #0c4f96;
}

.AccountCreateRecaptchaNote {
  margin-top: 8px;
  color: #6b5336;
  font-size: 11px;
  font-weight: 600;
}

.LostAccountForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.LostAccountFields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.LostAccountOptions {
  padding: 14px 16px;
  border: 1px solid rgba(122, 83, 31, 0.2);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.45);
}

.LostAccountOptionsTitle {
  margin-bottom: 10px;
  color: #3d2314;
  font-size: 14px;
  font-weight: 700;
}

.LostAccountOption {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  color: #4e3824;
  font-size: 14px;
}

.LostAccountOption:last-child {
  margin-bottom: 0;
}

.AccountManagePage {
  color: #3d2314;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.AccountManageWelcome,
.AccountManageVerify {
  text-align: center;
  padding: 9px 14px;
  border: 1px solid rgba(122, 83, 31, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(244, 228, 200, 0.92) 0%, rgba(227, 201, 162, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(68, 39, 13, 0.08);
}

.AccountManageWelcome {
  font-size: 15px;
  font-weight: 700;
}

.AccountManageVerify {
  font-size: 14px;
  font-weight: 700;
}

.AccountPanel--overview {
  margin-bottom: 0;
}

.AccountPanel--notice,
.AccountPanel--characters,
.AccountPanel--info,
.AccountPanel--logs {
  margin-bottom: 0;
}

.AccountManagePage .AccountPanelHeader {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.AccountManagePage .AccountPanelBody {
  padding: 11px 13px;
}

.AccountManagePage .ModernActionButton {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.AccountManageHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.AccountManageHeroStatus {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.AccountManageHeroBadge {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(61, 35, 20, 0.08) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(68, 39, 13, 0.12);
}

.AccountManageHeroCopy {
  min-width: 0;
}

.AccountManageHeroTitle {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
  color: #3d2314;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
}

.AccountManageHeroTitle b,
.AccountManageHeroTitle strong,
.AccountManageHeroTitle span {
  color: inherit !important;
}

.AccountManageHeroTitle .AccountManageHeroTitleText {
  color: #3d2314 !important;
}

.AccountManageHeroTitle .AccountManageHeroCountdown {
  display: inline-block;
  color: #6b451b !important;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.AccountManageHeroMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 5px;
  color: #5c432c;
  font-size: 11px;
  font-weight: 600;
}

.AccountManageHeroMeta a {
  color: #0c4f96;
  font-weight: 700;
}

.AccountManageNotice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.AccountManageNotice--stacked {
  align-items: flex-start;
}

.AccountManageNoticeCopy {
  min-width: 0;
  color: #4e3824;
}

.AccountManageNoticeCopy h3 {
  margin: 0 0 8px;
  color: #3d2314;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 17px;
}

.AccountManageNoticeCopy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.AccountManageNoticeAction {
  flex-shrink: 0;
  margin: 0;
}

.AccountManageTableWrap {
  overflow-x: auto;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 10px;
  background: rgba(255, 250, 241, 0.58);
}

.AccountManageTable {
  border-collapse: collapse;
  color: #3d2314;
}

.AccountManageTable thead th {
  padding: 12px 14px;
  text-align: left;
  color: #f9edd2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: linear-gradient(180deg, #6a5837 0%, #4d391d 100%);
}

.AccountManageTable tbody td {
  padding: 14px;
  vertical-align: top;
  border-top: 1px solid rgba(122, 83, 31, 0.16);
  background: rgba(255, 252, 245, 0.68);
}

.AccountManageTable tbody tr:nth-child(even) td {
  background: rgba(244, 232, 207, 0.82);
}

.AccountManageTableIndex {
  width: 54px;
  white-space: nowrap;
  color: #6b451b;
  font-weight: 800;
}

.AccountManageTableActions {
  width: 130px;
}

.AccountCharacterName {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #3d2314;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

.AccountCharacterDeleted {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(162, 21, 8, 0.14);
  color: #a61508;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.AccountCharacterMeta,
.AccountCharacterGuild {
  margin-top: 4px;
  color: #6b5336;
  font-size: 11px;
  line-height: 1.35;
}

.AccountCharacterDetailsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  color: #6a4d26;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.AccountCharacterGrid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AccountCharacterCard {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.85) 0%, rgba(239, 223, 191, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(68, 39, 13, 0.08);
}

.AccountCharacterOutfit {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: rgba(61, 35, 20, 0.08);
  background-position: 160% bottom;
  background-repeat: no-repeat;
  background-size: 76px 76px;
}

.AccountCharacterCardBody {
  flex: 1;
  min-width: 0;
}

.AccountCharacterCardAside {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.AccountCharacterOptionsLabel {
  color: #6b451b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.AccountCharacterActions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.AccountCharacterActions--inline {
  gap: 5px;
}

.AccountCharacterActions a {
  color: #0c4f96;
  font-size: 11px;
  font-weight: 700;
}

.AccountManageActionsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.AccountManageActionsRow form {
  margin: 0;
}

.AccountManageInfoTable {
  border-collapse: collapse;
  color: #3d2314;
}

.AccountManageInfoTable th,
.AccountManageInfoTable td {
  padding: 8px 10px;
  border-top: 1px solid rgba(122, 83, 31, 0.16);
  text-align: left;
  background: rgba(255, 252, 245, 0.68);
}

.AccountManageInfoTable tr:first-child th,
.AccountManageInfoTable tr:first-child td {
  border-top: 0;
}

.AccountManageInfoTable tr:nth-child(even) th,
.AccountManageInfoTable tr:nth-child(even) td {
  background: rgba(244, 232, 207, 0.82);
}

.AccountManageInfoTable th {
  width: 155px;
  color: #6b451b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.AccountManageSplitRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.AccountManageSplitRowMain {
  flex: 1;
  min-width: 0;
}

.AccountManageSplitRowAside {
  flex-shrink: 0;
  margin: 0;
}

.AccountStatusActions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 145px;
}

.AccountManageActionLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none !important;
}

.ModernActionButton.AccountManageActionLink,
.ModernActionButton.AccountManageActionLink:link,
.ModernActionButton.AccountManageActionLink:visited,
.ModernActionButton.AccountManageActionLink:hover,
.ModernActionButton.AccountManageActionLink:active {
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #f4e8c5 !important;
}

.AccountManagePage .InnerTableButtonRow form,
.AccountManagePage .TableContentContainer form {
  margin: 0;
}

.AccountManagePage .TopButtonContainer {
  display: none;
}

.CharacterSearchForm {
  margin: 0;
}

.CharacterSearchPanel {
  margin-bottom: 0;
}

.CharacterSearchBody {
  display: flex;
  gap: 12px;
  align-items: end;
}

.CharacterSearchFieldWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CharacterSearchButton {
  width: 170px;
}

.CharacterProfilePage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #3d2314;
}

.CharacterProfileTopbar {
  display: flex;
  gap: 16px;
  align-items: start;
}

.CharacterProfileSearch {
  flex: 1;
  min-width: 0;
}

.CharacterProfileAdminLink {
  width: auto;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  box-sizing: border-box;
}

.CharacterProfileHeroPanel {
  margin-bottom: 0;
}

.CharacterProfileHero {
  display: flex;
  gap: 18px;
  align-items: stretch;
}

.CharacterProfileOutfitCard {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CharacterProfileOutfitFrame {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.85) 0%, rgba(239, 223, 191, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(68, 39, 13, 0.08);
  overflow: hidden;
}

.CharacterProfileVipCard {
  padding: 12px 14px;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.85) 0%, rgba(239, 223, 191, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(68, 39, 13, 0.08);
}

.CharacterProfileVipTitle {
  color: #3d2314;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.CharacterProfileVipMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  color: #6b5336;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.CharacterProfileOutfitImage {
  image-rendering: auto;
}

.CharacterProfileHeroMain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.CharacterProfileHeroTitleRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.CharacterProfileHeroTitleWrap {
  min-width: 0;
}

.CharacterProfileHeroName {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #3d2314;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
}

.CharacterProfileHeroName small {
  font-size: 12px;
  font-family: Verdana, Arial, sans-serif;
  font-weight: 700;
}

.CharacterProfileHeroMeta {
  margin-top: 6px;
  color: #6b5336;
  font-size: 13px;
  font-weight: 700;
}

.CharacterProfileStatusChip {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.CharacterProfileStatusChip--online {
  background: rgba(40, 167, 69, 0.14);
  color: #1c7d33;
}

.CharacterProfileStatusChip--offline {
  background: rgba(108, 117, 125, 0.15);
  color: #5b4d3d;
}

.CharacterProfileStatsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.CharacterProfileStatCard,
.CharacterProfileInfoItem {
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.85) 0%, rgba(239, 223, 191, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(68, 39, 13, 0.08);
}

.CharacterProfileStatCard {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.CharacterProfileStatLabel,
.CharacterProfileInfoItem > span,
.CharacterProfileMetricHeader > span {
  color: #6b451b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.CharacterProfileStatValue,
.CharacterProfileInfoItem > strong,
.CharacterProfileMetricHeader > strong {
  color: #3d2314;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.CharacterProfileQuickFacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.CharacterProfileQuickFacts > div {
  padding: 12px 14px;
  border: 1px solid rgba(122, 83, 31, 0.2);
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.55);
}

.CharacterProfileQuickFacts span {
  display: block;
  margin-bottom: 5px;
  color: #6b451b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.CharacterProfileQuickFacts strong {
  color: #3d2314;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.CharacterProfileMainGrid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
}

.CharacterProfileMainColumn,
.CharacterProfileSideColumn {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.CharacterProfileInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.CharacterProfileInfoItem {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.CharacterProfileInfoItem--full {
  grid-column: 1 / -1;
}

.CharacterProfilePositive {
  color: #1c7d33;
}

.CharacterProfileNegative {
  color: #a61508;
}

.CharacterProfileProgress {
  margin-top: 4px;
}

.CharacterProfileEquipmentGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.CharacterProfileEquipmentColumn {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.CharacterProfileEquipmentSlot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid rgba(128, 128, 128, 0.65);
  border-radius: 8px;
  background: #292929;
}

.CharacterProfileTableWrap {
  overflow-x: auto;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 10px;
  background: rgba(255, 250, 241, 0.58);
}

.CharacterProfileTable {
  border-collapse: collapse;
  text-align: center;
  color: #3d2314;
}

.CharacterProfileTable td {
  padding: 10px 8px;
  border-top: 1px solid rgba(122, 83, 31, 0.16);
  background: rgba(255, 252, 245, 0.68);
}

.CharacterProfileTable tr:first-child td {
  border-top: 0;
}

.CharacterProfileTable tr:nth-child(even) td {
  background: rgba(244, 232, 207, 0.82);
}

.CharacterProfileTable {
  text-align: left;
}

.CharacterProfileTableDate {
  width: 145px;
  white-space: nowrap;
  color: #6b451b;
  font-size: 11px;
  font-weight: 700;
}

.CharacterProfileChecklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CharacterProfileChecklistItem {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(122, 83, 31, 0.2);
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.6);
  color: #3d2314;
  font-size: 12px;
  font-weight: 700;
}

.CharacterProfileSignaturePanel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.CharacterProfileSignaturePreview {
  display: flex;
  justify-content: center;
  padding: 12px;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.6);
}

.CharacterProfileSignatureFields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CharacterProfileSignatureRow {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 82px;
  gap: 10px;
  align-items: center;
}

.CharacterProfileSignatureRow label {
  color: #6b451b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.CharacterProfileSignatureRow .btn_clipboard {
  position: static;
  margin-top: 0;
  border-radius: 8px;
}

.OnlinePage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #3d2314;
}

.OnlineFilterForm,
.OnlineCharacterSearchForm {
  margin: 0;
}

.OnlineFilterPanel,
.OnlineCharacterSearchPanel {
  margin-bottom: 0;
}

.OnlineFilterBody {
  display: flex;
  gap: 12px;
  align-items: end;
}

.OnlineSummaryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.OnlineRecordHeroPanel {
  margin-bottom: 0;
  overflow: hidden;
}

.OnlineRecordHero {
  position: relative;
  padding: 24px 24px 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(135deg, #153f68 0%, #0f3b67 35%, #6a5837 100%);
}

.OnlineRecordHeroEyebrow {
  color: rgba(249, 237, 210, 0.88);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.OnlineRecordHeroValue {
  margin-top: 8px;
  color: #fff5df;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow:
    0 1px 0 rgba(50, 27, 7, 0.95),
    0 0 14px rgba(0, 0, 0, 0.22);
}

.OnlineRecordHeroValue small {
  display: block;
  margin-top: 6px;
  color: rgba(249, 237, 210, 0.9);
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-shadow: none;
}

.OnlineRecordHeroMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.OnlineRecordHeroMeta span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4e8c5;
  font-size: 11px;
  font-weight: 700;
}

.OnlineNumeric,
.OnlineNumericCell {
  font-family: Verdana, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.OnlineNumericCell {
  font-weight: 700;
}

.OnlineWorldGrid,
.OnlineVocationGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.OnlineWorldCard,
.OnlineVocationCard,
.OnlineInfoCard {
  padding: 12px 14px;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.85) 0%, rgba(239, 223, 191, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(68, 39, 13, 0.08);
}

.OnlineWorldName,
.OnlineVocationCard strong,
.OnlineInfoCard strong {
  color: #3d2314;
  font-size: 15px;
  font-weight: 700;
}

.OnlineWorldMeta,
.OnlineWorldType,
.OnlineVocationCard span,
.OnlineInfoCard span {
  color: #6b5336;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.OnlineWorldMeta,
.OnlineWorldType,
.OnlineInfoCard strong {
  margin-top: 4px;
}

.OnlineInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.OnlineInfoCard small {
  font-size: 10px;
  font-weight: 600;
}

.OnlinePlayersTableWrap {
  overflow-x: auto;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 10px;
  background: rgba(255, 250, 241, 0.58);
}

.OnlinePlayersTable {
  border-collapse: collapse;
  color: #3d2314;
}

.OnlinePlayersTable thead th {
  padding: 12px 14px;
  text-align: left;
  color: #f9edd2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: linear-gradient(180deg, #6a5837 0%, #4d391d 100%);
}

.OnlinePlayersTable tbody td {
  padding: 12px 14px;
  border-top: 1px solid rgba(122, 83, 31, 0.16);
  background: rgba(255, 252, 245, 0.68);
  vertical-align: middle;
}

.OnlinePlayersTable tbody tr:nth-child(even) td {
  background: rgba(244, 232, 207, 0.82);
}

.OnlinePlayersCountry {
  width: 44px;
  white-space: nowrap;
}

.OnlinePlayersOutfitCell {
  width: 72px;
}

.OnlinePlayersOutfitWrap {
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(61, 35, 20, 0.08);
}

.OnlinePlayersOutfit {
  position: absolute;
  left: 50%;
  top: 39%;
  transform: translateX(-50%);
}

.OnlineVipStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  line-height: 1;
}

.OnlineVipStatus--vip {
  background: rgba(40, 167, 69, 0.18) !important;
  color: #0f6b2b !important;
  border: 1px solid rgba(15, 107, 43, 0.22);
}

.OnlineVipStatus--free {
  background: rgba(166, 21, 8, 0.18) !important;
  color: #8f1509 !important;
  border: 1px solid rgba(143, 21, 9, 0.22);
}

.OnlineEmptyState {
  padding: 16px;
  border: 1px dashed rgba(122, 83, 31, 0.35);
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.5);
  text-align: center;
  color: #6b5336;
  font-weight: 700;
}

.HighscoresPage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #3d2314;
}

.HighscoresHeroPanel,
.HighscoresFilterPanel,
.HighscoresTablePanel {
  margin-bottom: 0;
}

.HighscoresHeroPanel {
  overflow: hidden;
}

.HighscoresHero {
  position: relative;
  padding: 24px 24px 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(135deg, #6b451b 0%, #3d2314 38%, #0f3b67 100%);
}

.HighscoresHeroEyebrow {
  color: rgba(249, 237, 210, 0.88);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.HighscoresHeroValue {
  margin-top: 8px;
  color: #fff5df;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow:
    0 1px 0 rgba(50, 27, 7, 0.95),
    0 0 14px rgba(0, 0, 0, 0.22);
}

.HighscoresHeroMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.HighscoresHeroMeta span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4e8c5;
  font-size: 11px;
  font-weight: 700;
}

.HighscoresFilterForm {
  margin: 0;
}

.HighscoresFilterGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.HighscoresField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.HighscoresField label {
  color: #6b451b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.HighscoresField select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(122, 83, 31, 0.35);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.92);
  box-sizing: border-box;
  color: #2f2413;
  font-size: 14px;
  font-weight: 700;
}

.HighscoresField select:focus {
  outline: none;
  border-color: #0f5c9a;
  box-shadow: 0 0 0 2px rgba(15, 92, 154, 0.12);
}

.HighscoresSubmit {
  min-width: 148px;
  align-self: end;
  justify-content: center;
}

.HighscoresOutfitCell {
  width: 86px;
}

.HighscoresOutfitWrap {
  width: 64px;
  height: 64px;
  margin: 0 auto;
}

.HighscoresOutfitImage {
  position: absolute;
  left: 30%;
  top: -10px;
  transform: translateX(-50%);
}

.HighscoresOutfitImage--compact {
  top: -14px;
}

.HighscoresNote {
  padding: 12px 14px;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.64);
  color: #5f4630;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.HighscoresPlayerLink {
  font-weight: 800;
  text-decoration: none;
}

.HighscoresPlayerLink--online {
  color: #0f6b2b;
}

.HighscoresPlayerLink--offline {
  color: #8f1509;
}

.HighscoresPlayerLink:hover {
  text-decoration: underline;
}

.HighscoresNumeric,
.HighscoresTextRight {
  text-align: right;
}

.HighscoresNumeric {
  font-weight: 800;
}

.HighscoresPagination {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.HighscoresPaginationLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.76);
  color: #3d2314;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.HighscoresPaginationLink:visited,
.HighscoresPaginationLink:hover,
.HighscoresPaginationLink:active {
  color: #3d2314;
}

.HighscoresPaginationLink:hover {
  filter: brightness(1.03);
}

.LastKillsPage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #3d2314;
}

.LastKillsHeroPanel,
.LastKillsFilterPanel,
.LastKillsTablePanel {
  margin-bottom: 0;
}

.LastKillsHeroPanel {
  overflow: hidden;
}

.LastKillsHero {
  position: relative;
  padding: 24px 24px 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(135deg, #7c1710 0%, #45150c 42%, #0f3b67 100%);
}

.LastKillsHeroEyebrow {
  color: rgba(249, 237, 210, 0.88);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.LastKillsHeroValue {
  margin-top: 8px;
  color: #fff5df;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow:
    0 1px 0 rgba(50, 27, 7, 0.95),
    0 0 14px rgba(0, 0, 0, 0.22);
}

.LastKillsHeroMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.LastKillsHeroMeta span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4e8c5;
  font-size: 11px;
  font-weight: 700;
}

.LastKillsFilterForm {
  margin: 0;
}

.LastKillsFilterRow {
  display: flex;
  gap: 12px;
  align-items: end;
}

.LastKillsField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
}

.LastKillsField label {
  color: #6b451b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.LastKillsField select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(122, 83, 31, 0.35);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.92);
  box-sizing: border-box;
  color: #2f2413;
  font-size: 14px;
  font-weight: 700;
}

.LastKillsField select:focus {
  outline: none;
  border-color: #0f5c9a;
  box-shadow: 0 0 0 2px rgba(15, 92, 154, 0.12);
}

.LastKillsTimeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.LastKillsEntry {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(122, 83, 31, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.82) 0%, rgba(244, 232, 207, 0.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(68, 39, 13, 0.08);
}

.LastKillsEntryRank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(180deg, #7c1710 0%, #a61508 100%);
  color: #fff4e4;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(125, 16, 7, 0.18);
}

.LastKillsEntryBody {
  min-width: 0;
}

.LastKillsEntryMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.LastKillsEntryMeta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(122, 83, 31, 0.18);
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.9);
  color: #6b5336;
  font-size: 11px;
  font-weight: 800;
}

.LastKillsEntryText {
  color: #3d2314;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.LastKillsEntryText a {
  color: #0c4f96;
  font-weight: 800;
}

.LastKillsEntryText a:hover {
  text-decoration: underline;
}

.GuildsPage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #3d2314;
}

.GuildsHeroPanel,
.GuildsFilterPanel,
.GuildsListPanel,
.GuildsActionsPanel {
  margin-bottom: 0;
}

.GuildsHeroPanel {
  overflow: hidden;
}

.GuildsHero {
  position: relative;
  padding: 24px 24px 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(135deg, #0f3b67 0%, #184e7f 38%, #6a5837 100%);
}

.GuildsHeroEyebrow {
  color: rgba(249, 237, 210, 0.88);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.GuildsHeroValue {
  margin: 8px 0 0;
  color: #fff5df;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow:
    0 1px 0 rgba(50, 27, 7, 0.95),
    0 0 14px rgba(0, 0, 0, 0.22);
}

.GuildsHeroText {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(249, 237, 210, 0.92);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.GuildsHeroMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.GuildsHeroMeta span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4e8c5;
  font-size: 11px;
  font-weight: 700;
}

.GuildsFilterForm {
  margin: 0;
}

.GuildsFilterRow {
  display: flex;
  gap: 12px;
  align-items: end;
}

.GuildsField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
}

.GuildsField label {
  color: #6b451b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.GuildsField select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(122, 83, 31, 0.35);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.92);
  box-sizing: border-box;
  color: #2f2413;
  font-size: 14px;
  font-weight: 700;
}

.GuildsField select:focus {
  outline: none;
  border-color: #0f5c9a;
  box-shadow: 0 0 0 2px rgba(15, 92, 154, 0.12);
}

.GuildsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.GuildsCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.82) 0%, rgba(244, 232, 207, 0.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(68, 39, 13, 0.08);
}

.GuildsCardTop {
  display: flex;
  gap: 14px;
  align-items: center;
}

.GuildsLogoWrap {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 14px;
  background: rgba(255, 252, 245, 0.76);
}

.GuildsLogo {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
}

.GuildsCardHead {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.GuildsName {
  margin: 0;
  color: #3d2314;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.GuildsDeleteLink {
  color: #8f1509;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.GuildsDescription {
  color: #4e3824;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  word-break: break-word;
}

.GuildsDescriptionEmpty {
  color: #7c6547;
}

.GuildsCardActions,
.GuildsActionsRow {
  display: flex;
  justify-content: flex-start;
}

.GuildsActionLink,
.GuildsActionLink:link,
.GuildsActionLink:visited,
.GuildsActionLink:hover,
.GuildsActionLink:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.GuildsActionsBody {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.GuildsActionsText {
  margin: 0;
  color: #4e3824;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.GuildsCleanupLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.GuildsCleanupLinks a {
  color: #0c4f96;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.GuildsCleanupLinks a:hover,
.GuildsDeleteLink:hover {
  text-decoration: underline;
}

.TeamDirectoryPage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #3d2314;
}

.TeamHeroPanel,
.TeamRolePanel {
  margin-bottom: 0;
}

.TeamHeroPanel {
  overflow: hidden;
}

.TeamHero {
  position: relative;
  padding: 24px 24px 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #0f3b67 0%, #1d5385 38%, #876637 100%);
}

.TeamHeroEyebrow {
  color: rgba(249, 237, 210, 0.88);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.TeamHeroValue {
  margin: 8px 0 0;
  color: #fff5df;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow:
    0 1px 0 rgba(50, 27, 7, 0.95),
    0 0 14px rgba(0, 0, 0, 0.22);
}

.TeamHeroText {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(249, 237, 210, 0.92);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.TeamHeroMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.TeamHeroMeta span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4e8c5;
  font-size: 11px;
  font-weight: 700;
}

.TeamDirectoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}

.TeamRoleHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.TeamRoleCount {
  color: rgba(244, 232, 197, 0.88);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.TeamRoleBody {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.TeamStaffList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.TeamStaffCard {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.82) 0%, rgba(244, 232, 207, 0.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(68, 39, 13, 0.08);
}

.TeamStaffOutfitWrap {
  flex: 0 0 78px;
  width: 78px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 83, 31, 0.24);
  border-radius: 14px;
  background: rgba(255, 252, 245, 0.76);
}

.TeamStaffOutfitImage {
  display: block;
  margin: 0 auto;
}

.TeamStaffContent {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.TeamStaffTop {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.TeamStaffIdentity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.TeamStaffName {
  min-width: 0;
}

.TeamStaffName a,
.TeamStaffName a:link,
.TeamStaffName a:visited {
  color: #3d2314;
  font-family: "MenuHeader", Verdana, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}

.TeamStaffName a:hover,
.TeamStaffName a:active {
  color: #0c4f96;
}

.TeamStaffPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.TeamStaffRoleBadge,
.TeamStaffStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.TeamStaffRoleBadge {
  color: #fff4e4;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.TeamStaffRoleBadge--administrator {
  background: linear-gradient(180deg, #be3f39 0%, #8d1d19 100%);
}

.TeamStaffRoleBadge--community-manager {
  background: linear-gradient(180deg, #d28c2f 0%, #95540b 100%);
}

.TeamStaffRoleBadge--gamemaster {
  background: linear-gradient(180deg, #3f72d2 0%, #20428c 100%);
}

.TeamStaffRoleBadge--senior-tutor {
  background: linear-gradient(180deg, #2d9e6a 0%, #176847 100%);
}

.TeamStaffRoleBadge--tutor {
  background: linear-gradient(180deg, #538f35 0%, #2d641d 100%);
}

.TeamStaffStatus--online {
  background: rgba(48, 161, 98, 0.15);
  border: 1px solid rgba(109, 235, 155, 0.28);
  color: #25714a;
}

.TeamStaffStatus--offline {
  background: rgba(158, 54, 54, 0.12);
  border: 1px solid rgba(210, 90, 90, 0.22);
  color: #9a2d2d;
}

.TeamStaffInfoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.TeamStaffInfoItem {
  padding: 10px 12px;
  border: 1px solid rgba(122, 83, 31, 0.18);
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.55);
}

.TeamStaffInfoItem span {
  display: block;
  margin-bottom: 4px;
  color: #7a5c3b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.TeamStaffInfoItem strong {
  display: block;
  color: #4e3824;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-word;
}

.TeamStaffInfoItem--country strong {
  display: flex;
  align-items: center;
  min-height: 21px;
}

.TeamStaffFlag {
  display: inline-flex;
  align-items: center;
}

.TeamStaffFlag img {
  display: block;
}

@media (max-width: 1100px) {
  .CharacterProfileTopbar,
  .CharacterProfileHero,
  .CharacterProfileMainGrid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .CharacterProfileQuickFacts,
  .CharacterProfileStatsGrid,
  .CharacterProfileInfoGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .CharacterProfileOutfitCard {
    width: 100%;
  }

  .AccountCreateFieldError,
  .AccountCreateHint {
    margin-left: 0;
  }

  .OnlineSummaryGrid,
  .OnlineInfoGrid {
    grid-template-columns: 1fr;
  }

  .HighscoresFilterGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .LastKillsFilterRow {
    flex-direction: column;
    align-items: stretch;
  }

  .LastKillsField {
    min-width: 0;
  }

  .GuildsGrid {
    grid-template-columns: 1fr;
  }

  .TeamDirectoryGrid {
    grid-template-columns: 1fr;
  }

  .TeamStaffInfoGrid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .GuildsFilterRow {
    flex-direction: column;
    align-items: stretch;
  }

  .GuildsField {
    min-width: 0;
  }


@media (max-width: 700px) {
  .HighscoresHeroValue {
    font-size: 28px;
  }

  .TeamHeroValue {
    font-size: 28px;
  }

  .TeamStaffCard {
    flex-direction: column;
  }

  .TeamStaffOutfitWrap {
    width: 100%;
    min-height: 88px;
  }

  .TeamStaffInfoGrid {
    grid-template-columns: 1fr;
  }

  .HighscoresFilterGrid {
    grid-template-columns: 1fr;
  }

  .HighscoresPagination {
    flex-direction: column;
  }

  .LastKillsHeroValue {
    font-size: 28px;
  }

  .LastKillsEntry {
    grid-template-columns: 1fr;
  }

  .LastKillsEntryRank {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .GuildsHeroValue {
    font-size: 28px;
  }

  .GuildsCardTop {
    align-items: flex-start;
  }
}
  .OnlineVocationGrid {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
  }
}

@media (max-width: 760px) {
  .CharacterSearchBody,
  .CharacterProfileHeroTitleRow,
  .OnlineFilterBody {
    flex-direction: column;
    align-items: stretch;
  }

  .CharacterSearchButton,
  .CharacterProfileAdminLink {
    width: 100%;
  }

  .CharacterProfileQuickFacts,
  .CharacterProfileStatsGrid,
  .CharacterProfileInfoGrid,
  .CharacterProfileEquipmentGrid {
    grid-template-columns: 1fr;
  }

  .CharacterProfileHeroName {
    font-size: 20px;
  }

  .CharacterProfileSignatureRow {
    grid-template-columns: 1fr;
  }

  .OnlineRecordHero {
    padding: 18px;
  }

  .OnlineRecordHeroValue {
    font-size: 28px;
  }

  .OnlineVocationGrid {
    grid-template-columns: 1fr;
  }

  .AccountField {
    grid-template-columns: 1fr;
  }

  .AccountCreateSelectWrap select {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .AccountManageHero {
    flex-direction: column;
    align-items: stretch;
  }

  .AccountManageNotice,
  .AccountManageSplitRow {
    flex-direction: column;
    align-items: stretch;
  }

  .AccountManageHeroStatus {
    align-items: flex-start;
  }

  .AccountManageHeroTitle {
    font-size: 18px;
  }

  .AccountStatusActions {
    min-width: 0;
  }

  .AccountCharacterCard {
    align-items: flex-start;
  }

  .AccountCharacterCardAside {
    width: auto;
  }
}

@media (max-width: 640px) {
  .AccountManageHeroStatus {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .AccountManageHeroMeta {
    justify-content: center;
  }

  .AccountManageTable thead th,
  .AccountManageTable tbody td,
  .AccountManageInfoTable th,
  .AccountManageInfoTable td {
    padding: 8px;
  }

  .AccountCharacterName {
    font-size: 14px;
  }

  .AccountManageInfoTable th {
    width: 120px;
  }

  .AccountCharacterCard {
    flex-direction: column;
    align-items: stretch;
  }

  .AccountCharacterOutfit {
    align-self: center;
  }

  .AccountCharacterCardAside {
    width: auto;
    align-items: flex-start;
  }
}

/* BUTTONS */
.MediumButtonText {
  position: absolute;
  top: 0;
  left: 0;
  height: 48px;
  width: 177px;
  z-index: 20;
}
.MediumButtonBackground {
  position: relative;
  top: 28;
  left: 10;
  width: 177px;
  height: 48px;
  z-index: 10;
}
.MediumButtonOver {
  position: relative;
  top: 0;
  left: 0;
  width: 177px;
  height: 48px;
  visibility: hidden;
  z-index: 15;
}
.MediumButtonForm {
  margin: -29;
  right: 0;
  padding: 0;
}

.moduleRowOver {
  background-color: #cfa048;
  cursor: pointer;
  cursor: hand;
}