#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;
  color: #5A2800;
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 9pt;
  text-align: left;
  padding: 10px;
  border: 1px double #5A2800;
  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;
}

/* 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;
  width: expression(document.body.clientWidth > 1200? "1200px": "100%");
}

#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: 0px;
  top: 0px;
  width: 180px;
  margin-right: 15px;
  margin-left: 15px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  line-height: 12pt;
}

#ContentColumn {
  position: relative;
  margin: 0px;
  margin-left: 205px;
  margin-right: 205px;
}

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

  background: rgba(0, 0, 0, 0.6);
}

#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;
  margin-top: 10px;
}

* 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;
  width: 100%;
  height: 140px;
  top: -218px;
  left: 4px;
  background-repeat: no-repeat;
  z-index: 5;
}

#LeftArtwork #TibiaLogoArtworkTop {
  display: block;
  margin: 0 auto;
  /* height: 296px; */
  width: 446px;
  z-index: 5;
  /* cursor: default; */
  border: 0px;
  animation: top-logo-artwork-floating 20s ease 0s normal none infinite running;
}

@keyframes top-logo-artwork-floating {
  0% {
    /* opacity: 1; */
    transform: scale(1) translateY(-7px);
  }

  25% {
    /* opacity: 0.85; */
    /* transform: scale(1) translate(28px); */
  }

  50% {
    /* opacity: 0.7; */
    transform: scale(1) translateY(7px);
  }

  75% {
    /* opacity: 0.85; */
    /* transform: scale(1) translate(-28px); */
  }

  to {
    /* opacity: 1; */
    transform: scale(1) translateY(-7px);
  }
}

#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 {
  position: relative;
  left: 5px;
  top: 8px;
  width: 100%;
  margin-bottom: 38px;
  background-repeat: no-repeat;
}

.SmallMenuBox#DownloadBox {
  top: 4px;
}

.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: 39px;
  width: 160px;
  left: 5px;
  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;
}

#PedestalAndOnline {
  position: absolute;
  left: 20px;
  top: -121px;
  width: 104px;
  height: 85px;
}

/** -------------------------------
 *  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: 1px;
  left: 18px;
  width: 124px;
  height: 11px;
  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: 5px;
  height: 39px;
  width: 160px;
  background-repeat: repeat-y;
}

#Loginbox #LoginButton {
  position: relative;
  top: 0px;
  left: 5px;
  height: 37px;
  width: 150px;
}

#Loginbox #LoginButton .Button {
  position: relative;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 37px;
  visibility: hidden;
}

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

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

#Menu {
  position: relative;
  left: 5px;
  background-repeat: no-repeat;
}

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

#MenuBottom {
  position: relative;
  left: -5px;
  bottom: 0px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

/* Menuitems */

.MenuButton {
  position: relative;
  height: 32px;
  width: 170px;
  display: block;
  cursor: pointer;
}

.Button {
  position: relative;
  height: 32px;
  /*width: 150px;*/
  visibility: hidden;
  display: block;
}

.Extend {
  position: absolute;
  top: 20px;
  right: -2px;
  height: 12px;
  width: 12px;
  background-repeat: no-repeat;
}

.Lights {
  visibility: hidden;
}

.Light_lu {
  position: absolute;
  top: 2px;
  left: 3px;
  height: 2px;
  width: 2px;
  background-repeat: no-repeat;
}

.Light_ru {
  position: absolute;
  top: 2px;
  right: 3px;
  height: 2px;
  width: 2px;
  background-repeat: no-repeat;
}

.Light_ld {
  position: absolute;
  height: 2px;
  width: 2px;
  top: 28px;
  left: 3px;
}

.Icon {
  position: absolute;
  height: 32px;
  width: 32px;
  top: 0px;
  left: 8px;
}

.Label {
  position: absolute;
  height: 22px;
  width: 116px;
  top: 6px;
  left: 42px;
}

/* Submenus(items) */

.LeftChain {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 33px;
  width: 7px;
  background-repeat: repeat-y;
}

.RightChain {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 33px;
  width: 7px;
  background-repeat: repeat-y;
}

.Submenu {
  position: relative;
  margin-left: 0px;
  margin-right: 5px;
  background-color: #0D2E2B;
  width: 170px;
}

.Submenuitem {
  position: relative;
  margin: 0px;
  padding: 0px;
}

.ActiveSubmenuItemIcon {
  position: absolute;
  top: 5px;
  left: 8px;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  visibility: hidden;
}

.SubmenuitemLabel {
  margin: 0px;
  border-top: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 22px;
  border-bottom: 1px solid #0e0e0e;
  overflow: hidden;
  color: white !important;
}

/* Submenu links */
.Submenu a:link {
  color: #d7d7d7;
  text-decoration: none;
}

.Submenu a:visited {
  color: #d7d7d7;
  text-decoration: none;
}

.Submenu a:focus {
  color: #d7d7d7;
  text-decoration: none;
}

.Submenu a:active {
  color: white;
  text-decoration: none;
}

.Submenu a:hover {
  color: white;
  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: 6px;
  margin-left: 5px;
  margin-right: 5px;
  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;
}


/** -------------------------------
 *  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: #5A2800;
  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: #5A2800;
  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: #5A2800;
  visibility: visible;
}

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

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

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

.Content .BoxContent .ff_pagetext {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 9pt;
  color: #5A2800;
  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: #d4c0a1;
  padding: 5px;
  padding-left: 43px;
}

.SmallBox .Message {
  font-size: 10pt;
  position: relative;
  height: 100%;
  background-color: #d4c0a1;
  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: #f1e0c6;
}

.TableContainer .Even {
  background-color: #d5c0a1;
}

.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: #5f4d41 !important;
  height: 100%;
  width: 100%;
  text-align: left;
}

.TableContainer .CaptionContainer .CaptionInnerContainer {
  position: relative;
  background-color: #5f4d41;
  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 #5F4D41;
  position: relative;
  margin-right: 4px;
  height: 100%;
  background-color: #d4c0a1;
  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: #d4c0a1;
  border: 2px solid #55636c;

}

.TableContainer .Table1 .InnerTableContainer {
  padding: 5px;

}

/* INNERLYOUT 2 */
.TableContainer .Table2 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #f1e0c5;
  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 #faf0d7;
}

/* INNERLYOUT 3 */
.TableContainer .Table3 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #f1e0c5;
}

.TableContainer .Table3 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}

.TableContainer .Table3 .TableContentAndRightShadow td {
  border: 1px solid #faf0d7;
}

/* INNERLYOUT 4 */
.TableContainer .Table4 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #f1e0c5;
}

.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: #f1e0c5;
}

.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 #875f3e;*/
}

.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 #875f3e;
}

.TableContentContainer {
  border: 1px solid #5f4d41;
  position: relative;
  margin-right: 7px;
  margin-bottom: 5px;
  height: 100%;
  background-color: #d4c0a1;
  padding: 0;
}

.TableContainer .Table3 .TableContent td {
  border: 1px solid #d9c8a9;
  font-family: 'Verdana', sans-serif;
  font-size: 12px;
  color: #2c1e0e;
  padding: 6px 10px;
  line-height: 1.4;
}

.TableContainer .Table3 .TableContent tr:hover {
  background-color: #f1e5c9;
  transition: background-color 0.2s ease-in-out;
}


.TableContainer .GreedyCell {
  width: 80%;
}

.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;
  font-family: 'Verdana', sans-serif;
  font-size: 12px;
  color: #2c1e0e;
  padding: 6px 10px;
  line-height: 1.4;
}

.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 {
  white-space: nowrap;
  vertical-align: top;
  font-weight: 700;
  font-family: 'Verdana', sans-serif;
  font-size: 12px;
  color: #2c1e0e;
  padding: 6px 10px;
  line-height: 1.4;
  border-radius: 6px;
}

.LabelH {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  background-color: #d5c0a1;

}

.LabelH td {
  background-color: #d5c0a1;
  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: 0px;
  z-index: 55;
}

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

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

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

/* News Ticker */

.Content #NewsTicker .BoxContent {
  background-color: transparent;
  padding: 10px 15px !important;
  border-radius: 6px;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
  color: #fff;
}

.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: 20px;
}

.Content #NewsTicker .NewsTickerDate {
	font-size: 9pt;
	/* position: absolute; */
	top: 0;
	float: left
}

.Content #NewsTicker .NewsTickerShortText {
  margin-left: 85px;
  height: 14px;
}

.Content #NewsTicker .NewsTickerFullText {
  margin-left: 85px;
  margin-right: 20px;
  display: none;
}

.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 .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;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

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

.Content #FeaturedArticle .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #FeaturedArticle .NewsHeadlineText {
  position: relative;
  top: 8px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News */

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

/* BUTTONS */
.MediumButtonText {
  position: absolute;
  top: 0;
  left: 0;
  height: 37px;
  width: 150px;
  z-index: 20;
}

.MediumButtonBackground {
  position: relative;
  top: 0;
  left: 0;
  width: 150px;
  height: 37px;
  z-index: 10;
}

.MediumButtonOver {
  position: relative;
  top: 0;
  left: 0;
  width: 150px;
  height: 37px;
  visibility: hidden;
  z-index: 15;
}

.MediumButtonForm {
  margin: 0;
  padding: 0;
}

.moduleRow {}

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

.scrollToTop {
  width: 70px;
  height: 70px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: #444;
  text-decoration: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: none;
  z-index: 50000;
}

.scrollToTop:hover {
  text-decoration: none;
  cursor: pointer;
}



.logomx {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

/* === NAVBAR PRINCIPAL === */
.hegal-navbar {
  background-color: #111111cf;
  color: white;
  padding: 8px 0;
}

.hegal-navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px; /* o lo que uses */
  margin: 0 auto;
}

.hegal-navbar-left,
.hegal-navbar-menu,
.hegal-navbar-right {
  display: flex;
  align-items: center;
}

/* === LOGO & TÍTULO === */

.hegal-navbar-left {
  display: flex;
  align-items: center;
  height: 100%;
}

.hegal-navbar-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
  color: white;
}

.hegal-navbar-logo-wrapper:hover {
  opacity: 0.85;
}

.hegal-navbar-logo {
  height: 48px;
  pointer-events: none; /* evita conflictos si está dentro del <a> */
  animation: jumpRotate 2.5s ease forwards;
}

.hegal-navbar-title {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  user-select: none;
  color: inherit;
}

@keyframes jumpRotate {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  20% {
    transform: translateY(-20px) rotate(0deg);
  }
  50% {
    transform: translateY(0) rotate(180deg);
  }
  70% {
    transform: translateY(-10px) rotate(270deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

.hegal-navbar-title {
  font-size: 20px;
  font-weight: bold;
  color: #f4f0f0;
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  opacity: 0;
  transform: scale(0.8);
  animation: revealTitle 1s ease forwards;
  animation-delay: 2.5s;
  line-height: 1;
}

@keyframes revealTitle {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.hegal-navbar-categories > li > .navbar-category-label,
.hegal-navbar-submenu li a {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 15px;
  color: #f1f1f1;
  letter-spacing: 0.5px;
}

/* === MENÚ PRINCIPAL === */
.hegal-navbar-categories {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hegal-navbar-item {
  position: relative;
  padding: 0 10px;
}

/* === FLECHA ▼ === */
.dropdown-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #ccc;
  transition: transform 0.3s ease;
}

.hegal-navbar-item:hover .dropdown-arrow {
  transform: rotate(180deg);
  border-top-color: #00ff15;
}

.hegal-navbar-submenu {
  display: none;
  position: absolute;
  top: 100%; /* cambia de 28px a 100% para que esté justo debajo del texto */
  left: 0;
  background: #191919;
  padding: 10px 0;
  list-style: none;
  border: 1px solid #444;
  border-radius: 4px;
  z-index: 10000;
  min-width: 160px;
}

.hegal-navbar-item:hover .hegal-navbar-submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hegal-navbar-submenu li {
  padding: 0;
}


.hegal-navbar-submenu li a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  color: #ddd;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hegal-navbar-submenu li:last-child a {
  border-bottom: none;
}

.hegal-navbar-submenu li a:hover {
  background-color: #2d2d2d;
  color: #7cd31d;
}

/* === BOOSTED CREATURES === */
.hegal-navbar-creatures {
  display: flex;
  align-items: center;
}

.hegal-navbar-creatures img {
  width: 70px;
  height: 70px;
  margin-left: 8px;
  border-radius: 4px;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.hegal-navbar-creatures img:hover {
  transform: scale(1.1);
}


/*otros*/
.social-bar-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  height: 48px;
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 14px;
  color: #eee;
  gap: 20px;
  background-color: #111111cf;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
}

.social-icon,
.player-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.social-icon img {
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: iconGlow 2.5s infinite ease-in-out;
}

.social-icon:hover img {
  transform: scale(1.1);
}


.social-icon:hover,
.player-counter:hover {
  color: #f0c040;
}

.social-icon img,
.player-counter img,
.login-button img,
.download-button img {
  width: 50px;
  height: 50px;
}


.action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 30px;
  margin-left: 40px;
}

.Content .action-buttons a.login-button,
.Content .action-buttons a.download-button {
  font-family: 'Verdana', Arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: white; /* o el color que hayas definido en tu botón */
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
  }
}

.login-button,
.download-button {
  all: unset;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  animation: pulseGlow 2.5s infinite ease-in-out;
}

.login-button {
  background: linear-gradient(135deg, #3c218f, #3c218f);
  color: #fff;
}

.download-button {
  background: linear-gradient(135deg, #91AC8F, #66785F);
  color: #fff;
}

.login-button:hover,
.download-button:hover {
  transform: scale(1.06);
  animation: none;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
}


/*others mas*/
#NewsTicker.Box.news-ticker-wrapper {
  max-width: 1400px;
  margin: 0px auto 0 auto; /* ← espacio superior */
  padding: 16px 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.3));
  border: 1px solid rgb(255 255 255 / 0%);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  color: #f5f5f5;
  font-family: 'Verdana', sans-serif;
}

#NewsTicker.Box {
  background-image: none !important;
  background-color: #111111cf !important;
}



.news-ticker-wrapper .BoxContent {
  padding: 12px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  color: #eee;
  font-size: 13px;
  font-family: Verdana, sans-serif;
}

.news-ticker-wrapper .Row {
  margin-bottom: 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#NewsTicker .BoxContent .Odd,
#NewsTicker .BoxContent .Even {
  background: rgba(0, 0, 0, 0.3);  /* Un fondo translúcido bonito */
  color: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
}

#NewsTicker {
  background: transparent !important;
}

.news-ticker-wrapper .NewsTickerIcon {
  width: 20px;
  height: 20px;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  filter: drop-shadow(1px 1px 1px black);
}

.news-ticker-wrapper .NewsTickerExtend {
  width: 12px;
  height: 12px;
  display: inline-block;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.news-ticker-wrapper .NewsTickerText {
  display: inline-block;
  vertical-align: middle;
}

.news-ticker-wrapper .NewsTickerFullText {
  display: none;
  padding: 8px;
  margin-top: 5px;
  border-left: 3px solid #f0c040;
  animation: fadeIn 0.3s ease-in-out;
}

.news-ticker-wrapper .Row.open .NewsTickerFullText {
  display: block;
}

.news-ticker-wrapper .Row.open .NewsTickerExtend {
  transform: rotate(45deg);
}

.news-ticker-wrapper .NewsTickerDate {
  color: #f0c040;
  font-weight: bold;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
#NewsTicker .Border_2 {
  background-color: transparent !important;
}

#NewsTicker .Border_3 {
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

.NewsTickerExtend {
  display: none !important;
}

.news-ticker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 19px;
  padding-left: 8px;
}

.news-ticker-avatar {
  height: 28px;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
  animation: floatUpDown 2.5s ease-in-out infinite;
}

.news-ticker-title {
  height: 26px;
  width: auto;
  display: inline-block;
}

/* animación suave de flotación */
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}


/*nuevo file*/
.content-box-modern {
  background: rgba(0, 0, 0, 0.6);
  padding: 18px 24px;
  margin-top: 25px;
  color: #fff;
}

.content-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.content-icon {
  height: auto;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
}

.content-title {
  height: 30px;
}

.content-body {
  background: linear-gradient(145deg, #f1e0c5, #f1e0c5);
  box-shadow: inset 0 0 6px rgb(255 255 200);
  border-radius: 6px;
  padding: 12px 16px;
}

.content-inner {
  font-size: 14px;
  line-height: 1.6;
}

/*other values*/


.account-status td,
.account-status select,
.account-status input[type="checkbox"],
.account-status label {
  border: 1px solid #d9c8a9;
  font-family: 'Verdana', sans-serif;
  font-size: 12px;
  color: #2c1e0e;
  padding: 6px 10px;
  line-height: 1.4;
}

.account-status,
.account-status p,
.account-status h2 {
  font-family: 'Verdana', sans-serif;
  font-size: 12px;
  color: #2c1e0e;
  padding: 6px 10px;
  line-height: 1.4;
  border-radius: 6px;
}

.account-status h2 {
  color: #000000; /* tono dorado */
  font-size: 16px;
  margin-top: 10px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.section-header img {
  width: 24px;
  height: 24px;
}

.section-header h2 {
  margin: 0;
  color: #000000;
  font-size: 16px;
}


.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  animation: pulseGlowHeader 2s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.section-header:hover {
  transform: scale(1.01);
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 1px rgba(255, 204, 102, 0);
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 204, 102, 0.7);
  }
  100% {
    box-shadow: 0 0 1px rgba(255, 204, 102, 0);
  }
}

.login-form-wrapper input[type="text"],
.login-form-wrapper input[type="password"],
.login-form-wrapper input[type="number"] {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #d9c8a9;
  background-color: #f8f3e6;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.login-form-wrapper input:focus {
  border-color: #b58d5d;
  outline: none;
}


.login-button-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.new-player-highlight {
  background-color: #f5e8d3;
  padding: 10px;
  border-radius: 5px;
}


/*Create account*/

.account-statuss td,
.account-statuss select,
.account-statuss input[type="checkbox"],
.account-statuss label {
  font-family: 'Verdana', sans-serif;
  font-size: 12px;
  color: #2c1e0e;
  padding: 6px 10px;
  line-height: 1.4;
}

.account-statuss .TableContent td {
  padding-top: 12px;
  padding-bottom: 10px;
  padding-left: 8px;
  padding-right: 8px;
}


.account-statuss .OptionContainer img,
.account-statuss input[type="radio"] + label img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.account-statuss .OptionContainer:hover img,
.account-statuss input[type="radio"]:hover + label img {
  transform: scale(1.05) rotate(-2deg);
  filter: brightness(1.1);
}

.account-statuss input[type="checkbox"]:checked {
  animation: checkboxPulse 0.3s ease;
}

@keyframes checkboxPulse {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1.2);
  }
}

 /*box premium*/
.hegal-premium-box {
  width: 180px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.05);
  font-family: Verdana, sans-serif;
  text-align: center;
  padding: 12px 10px 18px; /* más padding */
  margin: 0px auto 18px;
  box-sizing: border-box;
}


.hegal-premium-header {
  background: linear-gradient(145deg, #fcd000, #c79f00);
  color: #040404;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 6px 0;
}

.hegal-premium-content {
  padding: 10px 10px 5px;
}

.hegal-premium-text {
  font-size: 12px;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 1px 1px 2px #000;
}

.hegal-premium-image {
  width: 70px;
  margin-bottom: 10px;
  animation: bounceSpin 2.5s infinite;
}

.hegal-premium-button {
  background-color: #fcd000;
  color: #000;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hegal-premium-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 6px rgba(255, 255, 0, 0.5);
}

@keyframes bounceSpin {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-6px) rotate(-3deg);
  }
  50% {
    transform: translateY(0) rotate(3deg);
  }
  75% {
    transform: translateY(-3px) rotate(-2deg);
  }
}

.hegal-box-header-lastkill {
  background: #fcd000;
  color: #000;
  font-weight: bold;
  font-size: 13px;
  padding: 6px 0;
  text-transform: uppercase;
  border-bottom: 1px solid #c2a000;
  margin-bottom: 12px;
}

.hegal-online-box {
  width: 180px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.05);
  font-family: Verdana, sans-serif;
  text-align: center;
  padding: 12px 10px 18px;
  margin: 0px auto 18px;
  box-sizing: border-box;
}

.players-online-number {
  background: #101818;
  color: #00ffcc;
  font-weight: bold;
  font-size: 14px;
  padding: 6px 0;
  border: 1px solid #333;
  margin-top: 8px;
  box-shadow: inset 0 0 5px rgba(0, 255, 200, 0.2);
}

.boosted-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px 0;
}

.boosted-label {
  color: #ffd700;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 4px;
  animation: blink 1.5s infinite alternate;
  text-shadow: 0 0 3px #000;
  letter-spacing: 0.5px;
}

.boosted-monster,
.boosted-boss {
  width: 64px;
  height: 64px;
  cursor: pointer;
  transition: transform 0.3s;
}
.boosted-monster:hover,
.boosted-boss:hover {
  transform: scale(1.1);
}

@keyframes blink {
  0%   { opacity: 1; }
  100% { opacity: 0.4; }
}


.boosted-creature-wrapper.floating {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.boosted-label-overlay {
  position: absolute;
  left: 70%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  animation: boostedPulse 1.8s infinite ease-in-out;
}

/* Monster label - verde mágico */
.boosted-label-overlay.monster {
  color: #00ff66; /* verde neón */
  text-shadow:
          0 0 5px #00ff66,
          0 0 10px #00cc66,
          0 0 15px #00ff99;
}

/* Boss label - rojo demoníaco */
.boosted-label-overlay.boss {
  color: #ff3385; /* fucsia fuerte */
  text-shadow:
          0 0 5px #ff3385,
          0 0 10px #ff1a66,
          0 0 15px #ff66a3;
}

@keyframes boostedPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
}


.hegal-premium-header-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
}

.twitch-button {
  background-color: #9146FF;
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 4px;
  display: inline-block;
  transition: all 0.2s ease-in-out;
}

.twitch-button:hover {
  background-color: #772ce8;
  transform: scale(1.05);
  text-decoration: none;
}
.hegal-twitch-embed {
  width: 100%;
  max-width: 100%;
  height: 200px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 10px;
}

/* === Boosted Creatures Header Widget === */
.boosted-banner-wide {
  width: 100%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  z-index: 10;
}

.boosted-banner-title {
  font-family: 'Verdana', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #ffcc00;
  text-shadow:
          0 0 5px #ff9900,
          0 0 10px #ff5500,
          0 0 20px #ff2200;
  padding: 8px 16px;
  border-radius: 8px;
  letter-spacing: 1px;
  display: inline-block;
}

@keyframes flamePulse {
  0% {
    text-shadow:
            0 0 5px #ff9900,
            0 0 10px #ff5500,
            0 0 20px #ff2200;
    transform: scale(1);
  }
  50% {
    text-shadow:
            0 0 8px #ffaa00,
            0 0 16px #ff4400,
            0 0 28px #ff0000;
    transform: scale(1.06);
  }
  100% {
    text-shadow:
            0 0 5px #ff9900,
            0 0 10px #ff5500,
            0 0 20px #ff2200;
    transform: scale(1);
  }
}

.boosted-banner-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.boosted-creature {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  color: white;
  text-shadow: 0 0 2px black;
}

.boosted-creature img {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.boosted-creature img:hover {
  transform: scale(1.1);
}

.boosted-name {
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 5px #000000, 0 0 10px #ffaa00, 0 0 15px #ff8800;
  font-family: Verdana, Arial, sans-serif;
  animation: boostedGlow 1.8s ease-in-out infinite;
}

.boosted-label {
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  font-family: Verdana, Arial, sans-serif;
  box-shadow: 0 0 4px black;
}

.boosted-label.creature {
  background-color: #2a8f2a;
}

.boosted-label.boss {
  background-color: #b30000;
}

.social-bar-custom .social-links a {
  font-family: inherit;
  font-weight: normal;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.social-bar-custom .social-links a:hover {
  filter: brightness(1.2);
}

.social-bar-custom .social-links a,
.social-bar-custom .social-links a:visited,
.social-bar-custom .social-links a:hover,
.social-bar-custom .social-links a:active,
.social-bar-custom .social-links a:focus {
  text-decoration: none;
  color: inherit;
  font-weight: normal;
}



/*lastkill*/

.lastkill-scroll-container {
  max-height: 250px; /* altura máxima visible */
  overflow-y: auto;
  margin-top: 8px;
  padding-right: 4px;
}

/* Scrollbar personalizado para modern look (opcional) */
.lastkill-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.lastkill-scroll-container::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 3px;
}

.lastkill-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.lastkill-entry {
  display: flex;
  gap: 10px;
  background: linear-gradient(145deg, #121212, #0b0b0b);
  border-left: 3px solid #ff4444;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.lastkill-entry:hover {
  transform: scale(1.02);
  background: linear-gradient(145deg, #181818, #101010);
}

.lastkill-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  margin-top: 2px;
}

.lastkill-text {
  font-size: 11.8px;
  color: #ddd;
  line-height: 1.4;
  font-family: "Verdana", sans-serif;
}

.lastkill-text strong {
  color: #ffd700; /* Amarillo oro brillante para destacar */
  font-weight: 600;
  font-size: 12.5px;
  text-shadow: 0 0 2px #000, 0 0 4px #000;
  display: inline-block;
  margin-bottom: 2px;
}

.lastkill-text small {
  color: #999;
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
}

.hegal-box-content .lastkill-text a {
  color: #00ccff !important;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hegal-box-content .lastkill-text a:hover {
  color: #66e0ff !important;
  text-shadow: 0 0 2px #00e0ff;
}