/* Click and responsive safety fixes for the legacy Tibia layout. */

#Bodycontainer,
#MainHelper1,
#MainHelper2 {
  position: relative;
}

#ArtworkHelper1,
#ArtworkHelper2,
#HeaderArtworkDiv {
  pointer-events: none !important;
}

#MenuColumn {
  top: 0 !important;
  z-index: 300 !important;
}

#Menu,
#Menu .menuitem,
#Menu .MenuButton,
#Menu .Submenu,
#Menu .Submenu a,
#Menu .Submenuitem {
  pointer-events: auto !important;
}

#ContentColumn {
  position: relative;
  z-index: 40;
}

#ThemeboxesColumn {
  z-index: 35;
}

#Footer {
  z-index: 5 !important;
}

#cookie-consent-banner {
  z-index: 8500 !important;
}

#otRain {
  pointer-events: none !important;
}

#discord-fab,
#facebook-fab,
#whatsapp-fab,
#tiktok-fab {
  z-index: 120 !important;
}

@media screen and (max-width: 1320px) {
  #discord-fab,
  #facebook-fab,
  #whatsapp-fab,
  #tiktok-fab {
    left: 6px !important;
    width: 42px !important;
    height: 42px !important;
  }

  #discord-fab svg,
  #facebook-fab svg,
  #whatsapp-fab svg,
  #tiktok-fab svg {
    width: 22px !important;
    height: 22px !important;
  }

  #discord-fab {
    bottom: 12px !important;
  }

  #facebook-fab {
    bottom: 62px !important;
  }

  #whatsapp-fab {
    bottom: 112px !important;
  }

  #tiktok-fab {
    bottom: 162px !important;
  }
}

@media screen and (max-width: 1100px) {
  html,
  body {
    overflow-x: hidden;
  }

  #MainHelper1,
  #Bodycontainer {
    min-width: 0 !important;
    width: 100% !important;
  }

  #MainHelper2 {
    max-width: 100% !important;
    padding-top: 32px !important;
  }

  #Bodycontainer {
    display: block !important;
  }

  #MenuColumn,
  #ThemeboxesColumn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 180px !important;
    margin: 0 auto 14px !important;
  }

  #ContentColumn {
    margin: 0 8px 14px !important;
  }

  #ArtworkHelper1,
  #ArtworkHelper2 {
    display: none !important;
  }

  #discord-fab,
  #facebook-fab,
  #whatsapp-fab,
  #tiktok-fab {
    display: none !important;
  }
}

@media screen and (max-width: 720px) {
  .Content .BoxContent {
    overflow-x: auto;
  }

  .Content table {
    max-width: 100%;
  }

  #cookie-consent-banner {
    padding: 12px !important;
    font-size: 12px !important;
  }

  #cookie-consent-banner p {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
}