@charset "utf-8";
/* CSS Document */

body
{
	background: #06090c;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #373737;
}

body:before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(4, 7, 10, 0.45), rgba(4, 7, 10, 0.88)),
		url('images/background-mist.jpg') center top / cover no-repeat,
		#06090c;
	pointer-events: none;
	transform: translateZ(0);
	will-change: transform;
}

#page
{
	width: 780px;
	margin: auto;
}

#header
{
	width: 780px;
	height: 92px;
	background: transparent;
	float: left;
}

#tabs
{
	width: 99%;
	height: 32px;
	background: url('images/tabs-bg.png') no-repeat;
	padding-left: 200px;
	position: relative;
	display: inline-flex;
	right: 0;
}

		#tabs .tab
		{
			width: 112px;

			background: url('images/tab.png') no-repeat;
		float: left;
		text-align: center;
		color: #E2E2E2;
		font-weight: bold;
		padding-top: 12px;
		cursor: pointer;
	}

	#tabs .tab:hover
	{
		text-decoration: underline;
	}

		#tabs .tab-active
		{
			width: 113px;

			background: url('images/tab-active.png') no-repeat;
		float: left;
		text-align: center;
		color: #FFFFFF;
		font-weight: bold;
		padding-top: 10px;
		cursor: pointer;
	}

#mainsubmenu
{
	width: 760px;
	height: 42px;
	background: url('images/submenu.png') no-repeat;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}

	#mainsubmenu a
	{
		display: block;
		float: left;
		padding: 5px;
		color: #FFFFFF;
		font-weight: bold;
		margin-top: 7px;
		text-decoration: none;
	}

	#mainsubmenu a:hover
	{
		text-decoration: underline;
	}

	#mainsubmenu .separator
	{
		width: 2px;
		height: 32px;
		display: block;
		float: left;
		background: url('images/separator.png') no-repeat;
	}

#content
{
	width: 780px;
	background: url('images/site-bg.png') repeat-y;
	float: left;
}

	#margins
	{
		width: 760px;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 5px;
		margin-bot: 5px;
		text-align: justify;
	}

#content-bot
{
	width: 780px;
	height: 28px;
	background: url('images/site-bot.png') no-repeat;
	float: left;
}

#copyrights
{
	width: 740px;
	padding: 10px;
	float: left;
	text-align: center;
}

#news-submenu,
#account-submenu,
#community-submenu,
#forum-submenu,
#library-submenu,
#shops-submenu
{
	display: none;
}

a
{
	color: #990000;
	text-decoration: none;
	font-weight: bold;
}

a:hover
{
	color: #FF0000;
}

.white, .whites
{
	color: #FFFFFF;
}










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

.TableContainer {
  border: 1px solid #d0cdb4;
  position: relative;
  width: 100%;
  font-size: 10px;
}
.TableContainer .Odd {
  background-color: #e5e3d7;
}
.TableContainer .Even {
  background-color: #d0cdb4;
}

/* TABLEHEADER DECORATION */
.TableContainer .CaptionContainer {
  position: relative;
  font-size: 10pt;
  background-color: #afab89 !important;
  height: 100%;
  width: 100%;
  text-align: left;
}
.TableContainer .CaptionContainer .CaptionInnerContainer {
	position: relative;
  background-color: #afab89;
  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 #afab89;
  position: relative;
  margin-right: 4px;
  height: 100%;
  background-color: #d0cdb4;
  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: #d0cdb4;
  border: 2px solid #afab89;
}
.TableContainer .Table1 .InnerTableContainer {
  padding: 5px;
}
/* INNERLYOUT 2 */
.TableContainer .Table2 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
  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 #e5e3d7;
}
/* INNERLYOUT 3 */
.TableContainer .Table3 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
}
.TableContainer .Table3 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table3 .TableContentAndRightShadow td {
  border: 1px solid #e5e3d7;
}
/* INNERLYOUT 4 */
.TableContainer .Table4 {
  width: 100%;
  border: 2px solid #afab89;
  background-color: #e5e3d7;
}
.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 #afab89;
  background-color: #e5e3d7;
}
.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: 10px;
  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: 10px;
}
.TableShadowContainer {
  position: relative;
  widht: 100%;
  margin-right: 5px;
}
.TableBottomShadow {
  position: relative;
  font-size: 10px;
  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;
}
/* LABELS */
.LabelV {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
}
.LabelV120 {
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
	width: 120px;
}
.LabelV150 {
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
	width: 150px;
}
.LabelV200 {
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
	width: 200px;
}
.LabelH {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  background-color: #afab89;

}
.LabelH td {
  background-color: #afab89;
  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;
}
.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: #d0cdb4;
  padding: 2px;
}

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

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}
.Content .BoxContent .Odd {
  background-color: #d0cdb4;
  padding: 2px;
}

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

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}
.Content .BoxContent .Odd {
  background-color: #d0cdb4;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #e5e3d7;
  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 .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: 7pt;
  position: absolute;
  top: 0px;
  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 #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 #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

.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;
}

.Content #News .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

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

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

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

.Content #News .NewsHeadlineAuthor {
  position: absolute;
  top: 7px;
  right: 10px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News Archive */

.Content #NewsArchive .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #d0cdb4;
  border-right: 1px solid #d0cdb4;
}

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

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

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

/** --------------------------------------
 *  ### not final versions for tests
 *  ### concerning the new payment process
 *  --------------------------------------
 */

/* new error handling concept tests */

.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: #d0cdb4;
  padding: 5px;
  padding-left: 43px;
}
.SmallBox .Message {
  font-size: 10pt;
  position: relative;
  height: 100%;
  background-color: #d0cdb4;
  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;
}

/* MistLegacy responsive layer: keep the classic Kathrine look, but stop wide
   pages and tables from forcing the whole browser to scroll sideways. */
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	min-width: 0;
}

body.MistMobileMenuOpen {
	overflow: hidden;
}

#page {
	width: min(calc(100vw - 16px), 780px);
	max-width: 780px;
}

#header,
#content,
#content-bot,
#mainsubmenu {
	width: 100%;
}

#header {
	aspect-ratio: auto;
	height: 92px;
	background-position: center top;
	background-size: cover;
}

#tabs {
	width: 100%;
	max-width: 100%;
	padding-left: clamp(6px, 11vw, 90px) !important;
	padding-right: 8px !important;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	background-size: 100% 100%;
	scrollbar-width: none;
}

#tabs::-webkit-scrollbar {
	display: none;
}

#tabs .tab,
#tabs .tab-active {
	flex: 0 0 112px;
}

#mainsubmenu {
	min-height: 42px;
	height: auto;
	padding-left: 10px;
	padding-right: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	white-space: nowrap;
	background-size: 100% 100%;
	scrollbar-width: none;
}

#mainsubmenu::-webkit-scrollbar {
	display: none;
}

#mainsubmenu > div {
	min-width: max-content;
	white-space: nowrap;
}

#mainsubmenu a,
#mainsubmenu .separator {
	float: none;
	display: inline-block;
	vertical-align: top;
}

#content {
	overflow: hidden;
	background-size: 100% auto;
}

#margins {
	width: auto;
	max-width: calc(100% - 20px);
	min-width: 0;
}

.Content,
#ContentHelper {
	max-width: 100%;
	min-width: 0;
}

#ContentHelper {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	padding-bottom: 6px;
}

.PortalLaunchBanner {
	margin: 0 0 16px;
	padding: 8px;
	border: 2px solid #f0c46b;
	background: #32131a;
	box-shadow: 0 0 0 1px #7b1d29, 0 8px 20px rgba(0, 0, 0, 0.35);
}

.PortalLaunchBanner .TableContainer {
	margin: 0;
	font-size: 12px;
}

.PortalLaunchBanner .CaptionContainer,
.PortalLaunchBanner .CaptionContainer .CaptionInnerContainer {
	background-color: #7b1d29 !important;
}

.PortalLaunchBanner .CaptionContainer .Text {
	color: #fff1c2;
	font-size: 14px;
	text-transform: uppercase;
}

.PortalLaunchBanner .InnerTableContainer,
.PortalLaunchBanner .TableContentContainer {
	background-color: #f1e0c6;
}

.PortalLaunchBanner .PortalLaunchBannerTable,
.PortalLaunchBanner .PortalLaunchBannerTable td {
	color: #3d210f;
	font-size: 13px;
	line-height: 1.45;
}

.PortalLaunchBanner .PortalLaunchBannerTable b {
	color: #641922;
}

.PortalLaunchBanner .PortalLaunchBannerTable a,
.PortalLaunchBanner .PortalLaunchBannerTable a:link,
.PortalLaunchBanner .PortalLaunchBannerTable a:visited {
	color: #004294;
	font-weight: bold;
	text-decoration: underline;
}

#ContentHelper table,
#ContentHelper .TableContainer,
#ContentHelper .myaac-table {
	max-width: none;
}

#ContentHelper > table {
	width: 100%;
	min-width: 0;
}

#ContentHelper .TableContainer,
#ContentHelper .myaac-table {
	min-width: 640px;
}

#ContentHelper img {
	max-width: 100%;
	height: auto;
}

#content-bot {
	background-size: 100% 28px;
}

#copyrights {
	width: 100%;
}

#tabs::-webkit-scrollbar,
#mainsubmenu::-webkit-scrollbar,
#ContentHelper::-webkit-scrollbar {
	height: 8px;
}

#tabs::-webkit-scrollbar-track,
#mainsubmenu::-webkit-scrollbar-track,
#ContentHelper::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.25);
}

#tabs::-webkit-scrollbar-thumb,
#mainsubmenu::-webkit-scrollbar-thumb,
#ContentHelper::-webkit-scrollbar-thumb {
	background: rgba(175, 171, 137, 0.85);
	border-radius: 999px;
}

@media (max-width: 720px) {
	body {
		background-attachment: scroll;
	}

	#page {
		width: 100%;
	}

	#header {
		aspect-ratio: auto;
		height: 74px;
	}

	#tabs {
		padding-left: 6px !important;
	}

	#margins {
		max-width: calc(100% - 12px);
		margin-left: 6px;
		margin-right: 6px;
	}

	#ContentHelper .TableContainer,
	#ContentHelper .myaac-table {
		min-width: 620px;
	}
}

/* Final guard against cached/inline legacy sizing: the Kathrine skin artwork is
   780px wide, so the chrome should never stretch beyond that. */
#page {
	width: min(780px, calc(100vw - 16px)) !important;
	max-width: 780px !important;
	overflow: visible;
}

#header {
	width: 100% !important;
	max-width: 780px !important;
	height: 92px !important;
	max-height: 92px !important;
	background: transparent !important;
	position: relative;
	overflow: hidden;
}

#header:before {
	content: none;
}

#header:after {
	content: none;
}

.MistHeaderMark {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: min(390px, 72%);
	transform: translate(-50%, -50%);
}

.MistHeaderLogo {
	display: block;
	width: 100%;
	height: auto;
	filter:
		drop-shadow(0 3px 4px rgba(0, 0, 0, 0.78))
		drop-shadow(0 0 10px rgba(233, 172, 58, 0.24));
}

#tabs,
#mainsubmenu,
#content,
#content-bot {
	width: 100% !important;
	max-width: 780px !important;
	float: left;
}

#tabs {
	height: 32px !important;
	margin-top: 0 !important;
}

#mainsubmenu {
	max-height: 42px;
}

/* Modern navigation for MistLegacy. The old Kathrine tab/submenu strip stays in
   the DOM as a fallback, but the active UX is side rails or a hamburger drawer. */
#tabs,
#mainsubmenu {
	display: none !important;
}

#MistMobileMenuButton {
	position: fixed;
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
	z-index: 4000;
	padding: 9px 14px;
	border: 1px solid rgba(226, 226, 226, 0.45);
	border-radius: 10px;
	background: rgba(10, 14, 17, 0.92);
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

#MistMobileMenu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 3990;
	background: rgba(0, 0, 0, 0.62);
}

#MistMobileMenu.is-open {
	display: block;
}

.MistMobileMenuPanel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(86dvw, 360px);
	height: 100%;
	padding: 18px;
	padding-top: max(18px, env(safe-area-inset-top));
	padding-bottom: max(18px, env(safe-area-inset-bottom));
	overflow-y: auto;
	background: rgba(18, 20, 22, 0.98);
	box-shadow: -18px 0 30px rgba(0, 0, 0, 0.45);
}

.MistMobileMenuClose {
	width: 100%;
	margin-bottom: 14px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
	background: #343434;
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
}

.MistMobileMenuGroup {
	margin-bottom: 8px;
}

.MistMobileMenuGroup h2,
.MistSideNav h2 {
	margin: 0 0 8px;
	color: #f2e7c6;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.MistMobileMenuHeading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 12px 38px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
	color: #f2e7c6;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	overflow: hidden;
	transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.MistMobileMenuGroup.is-open .MistMobileMenuHeading {
	background: linear-gradient(180deg, rgba(127, 13, 13, 0.96), rgba(74, 5, 5, 0.94));
	border-color: rgba(231, 212, 154, 0.78);
	color: #ffe8a3;
	box-shadow: inset 4px 0 0 #1fb56c, 0 0 0 1px rgba(231, 212, 154, 0.18), 0 0 14px rgba(153, 0, 0, 0.45);
	text-shadow: 0 0 7px rgba(255, 210, 90, 0.48);
}

.MistMobileMenuChevron {
	position: relative;
	z-index: 1;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.28);
	line-height: 21px;
	text-align: center;
}

.MistMobileMenuLinks {
	max-height: 0;
	overflow: hidden;
	padding: 8px 0 6px 10px;
	border-left: 1px solid rgba(242, 231, 198, 0.22);
	opacity: 0;
	transform: translateY(-4px);
	transition: max-height 160ms ease, opacity 130ms ease, transform 130ms ease;
}

.MistMobileMenuGroup.is-open .MistMobileMenuLinks {
	max-height: 520px;
	opacity: 1;
	transform: translateY(0);
}

.MistMobileMenuGroup a,
.MistSideNav a,
.MistSideNav button {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 3px;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease, padding-left 140ms ease;
}

.MistMobileMenuHeading > span:first-child {
	position: relative;
	z-index: 1;
}

.MistSideNav button[data-menu-tab] {
	min-height: 30px;
	padding-left: 32px;
	color: #f2e7c6;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.MistSideNav button[data-menu-tab]::before,
.MistMobileMenuHeading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 8px;
	width: 20px;
	height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) brightness(1.02);
	image-rendering: pixelated;
	transform: translateY(-50%);
	transition: filter 140ms ease, transform 140ms ease;
}

.MistMobileMenuHeading::before {
	left: 12px;
}

.MistSideNav button[data-menu-tab="news"]::before,
.MistMobileMenuGroup[data-mobile-menu-group="news"] .MistMobileMenuHeading::before {
	background-image: url("https://item-images.ots.me/1092/1949.gif");
}

.MistSideNav button[data-menu-tab="account"]::before,
.MistMobileMenuGroup[data-mobile-menu-group="account"] .MistMobileMenuHeading::before {
	background-image: url("https://item-images.ots.me/1092/2091.gif");
}

.MistSideNav button[data-menu-tab="community"]::before,
.MistMobileMenuGroup[data-mobile-menu-group="community"] .MistMobileMenuHeading::before {
	background-image: url("https://item-images.ots.me/1092/2516.gif");
}

.MistSideNav button[data-menu-tab="forum"]::before,
.MistMobileMenuGroup[data-mobile-menu-group="forum"] .MistMobileMenuHeading::before {
	background-image: url("https://item-images.ots.me/1092/1950.gif");
}

.MistSideNav button[data-menu-tab="library"]::before,
.MistMobileMenuGroup[data-mobile-menu-group="library"] .MistMobileMenuHeading::before {
	background-image: url("https://item-images.ots.me/1092/2175.gif");
}

.MistSideNav button[data-menu-tab="shops"]::before,
.MistMobileMenuGroup[data-mobile-menu-group="shops"] .MistMobileMenuHeading::before {
	background-image: url("https://item-images.ots.me/1092/2160.gif");
}

.MistSideNav {
	display: none;
	position: fixed;
	top: 160px;
	z-index: 1000;
	width: 150px;
	max-height: calc(100vh - 200px);
	padding: 12px;
	overflow-y: auto;
	background: rgba(10, 14, 17, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	scrollbar-width: thin;
}

.MistTopAction {
	display: none;
	position: fixed;
	top: 84px;
	z-index: 1010;
	width: 150px;
	padding: 4px 0;
	overflow: visible;
	text-align: left;
}

.MistTopAction--left {
	background-position: left 8% top;
}

.MistTopAction--right {
	background-position: right 4% top;
}

.MistTopAction .MistTopButton {
	position: relative;
	display: block;
	left: 50%;
	width: 200px;
	height: 35px;
	overflow: visible;
	color: transparent !important;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
	transform: translateX(-50%);
	transition: filter 120ms ease, transform 120ms ease;
}

.MistTopButtonImage {
	position: absolute;
	display: block;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
	object-position: center;
	border: 0;
	transition: transform 120ms ease, filter 120ms ease;
}

.MistTopAction .MistTopButton:hover {
	transform: translate(-50%, -1px);
	filter: drop-shadow(0 0 6px rgba(231, 212, 154, 0.42)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

.MistTopAction .MistTopButton:hover .MistTopButtonImage {
	transform: scale(1.03);
	filter: brightness(1.12);
}

.MistSideNav--left {
	left: 14px;
}

.MistSideNav--right {
	right: 14px;
}

.MistSideNav a:hover,
.MistMobileMenuGroup a:hover {
	background: linear-gradient(90deg, rgba(100, 18, 10, 0.88), rgba(54, 8, 8, 0.82));
	border-color: rgba(231, 212, 154, 0.58);
	color: #ffe8a3;
	box-shadow: 0 0 10px rgba(231, 212, 154, 0.14);
	text-shadow: 0 0 6px rgba(255, 211, 94, 0.34);
}

.MistSideNav button[data-menu-tab]:hover,
.MistMobileMenuHeading:hover {
	background: linear-gradient(180deg, rgba(118, 32, 12, 0.94), rgba(64, 8, 8, 0.9));
	border-color: rgba(231, 212, 154, 0.72);
	color: #ffe8a3;
	box-shadow: 0 0 13px rgba(231, 212, 154, 0.2);
	text-shadow: 0 0 8px rgba(255, 211, 94, 0.48);
}

.MistSideNav button[data-menu-tab]:hover::before,
.MistMobileMenuHeading:hover::before,
.MistSideNav button.is-active::before,
.MistMobileMenuGroup.is-open .MistMobileMenuHeading::before {
	filter: drop-shadow(0 0 5px rgba(255, 214, 94, 0.6)) brightness(1.28);
	transform: translateY(-50%) scale(1.14);
}

.MistSideNav button.is-active {
	background: linear-gradient(180deg, rgba(127, 13, 13, 0.96), rgba(74, 5, 5, 0.94));
	border-color: rgba(231, 212, 154, 0.82);
	color: #ffe8a3;
	box-shadow: inset 4px 0 0 #1fb56c, 0 0 0 1px rgba(231, 212, 154, 0.2), 0 0 13px rgba(153, 0, 0, 0.46);
	text-shadow: 0 0 8px rgba(255, 211, 94, 0.5);
}

.MistSideNav a.is-current,
.MistMobileMenuGroup a.is-current {
	background: linear-gradient(90deg, rgba(88, 6, 6, 0.96), rgba(38, 7, 7, 0.88));
	border-color: rgba(231, 212, 154, 0.76);
	color: #ffe8a3;
	box-shadow: inset 4px 0 0 #e7d49a, inset 7px 0 0 rgba(31, 181, 108, 0.72), 0 0 0 1px rgba(231, 212, 154, 0.2), 0 0 12px rgba(231, 212, 154, 0.22);
	font-weight: bold;
	text-shadow: 0 0 6px rgba(255, 211, 94, 0.4);
}

.MistSideNavGroup {
	margin-bottom: 2px;
}

.MistSideNavSubmenu {
	max-height: 0;
	overflow: hidden;
	margin: 2px 0 4px;
	padding-left: 6px;
	border-left: 1px solid rgba(242, 231, 198, 0.22);
	opacity: 0;
	transform: translateY(-4px);
	transition: max-height 160ms ease, opacity 130ms ease, transform 130ms ease;
}

.MistSideNavSubmenu.is-open {
	max-height: 620px;
	opacity: 1;
	transform: translateY(0);
}

.MistSideNavSubmenu a {
	margin-bottom: 2px;
	padding: 4px 6px;
	font-size: 9px;
	font-weight: normal;
}

.MistSideNav a[href*="/account/create"],
.MistSideNav a[href*="/account/lost"],
.MistSideNav a[href*="/downloads"],
.MistSideNav a[href*="/online"],
.MistSideNav a[href*="/highscores"],
.MistSideNav a[href*="/rankings/pvp"],
.MistSideNav a[href*="/rankings/guilds"],
.MistSideNav a[href*="/last-kills"],
.MistSideNav a[href*="/fragers"],
.MistSideNav a[href*="/start-here"],
.MistSideNav a[href*="/boosted"],
.MistSideNav a[href*="/events"],
.MistSideNav a[href*="/refer-a-friend"],
.MistSideNav a[href*="/points"],
.MistSideNav a[href$="/gifts"],
.MistMobileMenuGroup a[href*="/account/create"],
.MistMobileMenuGroup a[href*="/account/lost"],
.MistMobileMenuGroup a[href*="/downloads"],
.MistMobileMenuGroup a[href*="/online"],
.MistMobileMenuGroup a[href*="/highscores"],
.MistMobileMenuGroup a[href*="/rankings/pvp"],
.MistMobileMenuGroup a[href*="/rankings/guilds"],
.MistMobileMenuGroup a[href*="/last-kills"],
.MistMobileMenuGroup a[href*="/fragers"],
.MistMobileMenuGroup a[href*="/start-here"],
.MistMobileMenuGroup a[href*="/boosted"],
.MistMobileMenuGroup a[href*="/events"],
.MistMobileMenuGroup a[href*="/refer-a-friend"],
.MistMobileMenuGroup a[href*="/points"],
.MistMobileMenuGroup a[href$="/gifts"] {
	color: #f7df9b;
	border-color: rgba(231, 212, 154, 0.22);
}

.MistSideNav a[href*="/account/create"],
.MistSideNav a[href*="/account/lost"],
.MistSideNav a[href*="/downloads"],
.MistSideNav a[href*="/online"],
.MistSideNav a[href*="/highscores"],
.MistSideNav a[href*="/rankings/pvp"],
.MistSideNav a[href*="/rankings/guilds"],
.MistSideNav a[href*="/last-kills"],
.MistSideNav a[href*="/fragers"],
.MistSideNav a[href*="/start-here"],
.MistSideNav a[href*="/boosted"],
.MistSideNav a[href*="/events"],
.MistSideNav a[href*="/refer-a-friend"],
.MistSideNav a[href*="/points"],
.MistSideNav a[href$="/gifts"] {
	padding-left: 18px;
}

.MistSideNav a[href*="/account/create"]::before,
.MistSideNav a[href*="/account/lost"]::before,
.MistSideNav a[href*="/downloads"]::before,
.MistSideNav a[href*="/online"]::before,
.MistSideNav a[href*="/highscores"]::before,
.MistSideNav a[href*="/rankings/pvp"]::before,
.MistSideNav a[href*="/rankings/guilds"]::before,
.MistSideNav a[href*="/last-kills"]::before,
.MistSideNav a[href*="/fragers"]::before,
.MistSideNav a[href*="/start-here"]::before,
.MistSideNav a[href*="/boosted"]::before,
.MistSideNav a[href*="/events"]::before,
.MistSideNav a[href*="/refer-a-friend"]::before,
.MistSideNav a[href*="/points"]::before,
.MistSideNav a[href$="/gifts"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 7px;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: radial-gradient(circle, #fff1a8 0%, #e7b44b 58%, #1fb56c 100%);
	box-shadow: 0 0 5px rgba(231, 212, 154, 0.62);
	transform: translateY(-50%);
}

.MistInfoCard {
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.MistInfoCard:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.MistIntelCard {
	min-height: 148px;
	padding: 0 0 10px;
	overflow: hidden;
}

.MistIntelSlides {
	position: relative;
	min-height: 126px;
}

.MistIntelSlide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5px 2px 9px;
	opacity: 0;
	transform: translateY(6px);
	text-align: center;
	animation: mistIntelCycle 35s infinite;
}

.MistIntelSlide:nth-child(2) {
	animation-delay: 7s;
}

.MistIntelSlide:nth-child(3) {
	animation-delay: 14s;
}

.MistIntelSlide:nth-child(4) {
	animation-delay: 21s;
}

.MistIntelSlide:nth-child(5) {
	animation-delay: 28s;
}

.MistIntelKicker {
	display: block;
	margin-bottom: 4px;
	color: rgba(242, 231, 198, 0.72);
	font-size: 8px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.11em;
}

.MistIntelSlide h2 {
	margin: 0 0 4px;
	color: #f2e7c6;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}

.MistIntelSlide p {
	margin: 0 0 5px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 9px;
	line-height: 1.25;
}

.MistIntelSlide strong {
	color: #ffffff;
	font-size: 9px;
}

.MistIntelMonster {
	align-self: center;
	width: auto;
	max-width: 74px !important;
	height: auto !important;
	max-height: 58px !important;
	margin: -2px 0 4px;
	filter: drop-shadow(0 0 7px rgba(80, 255, 80, 0.42));
	image-rendering: pixelated;
}

.MistIntelDots {
	display: flex;
	justify-content: center;
	gap: 4px;
	height: 8px;
}

.MistIntelDots span {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: rgba(242, 231, 198, 0.25);
	animation: mistIntelDot 35s infinite;
}

.MistIntelDots span:nth-child(2) {
	animation-delay: 7s;
}

.MistIntelDots span:nth-child(3) {
	animation-delay: 14s;
}

.MistIntelDots span:nth-child(4) {
	animation-delay: 21s;
}

.MistIntelDots span:nth-child(5) {
	animation-delay: 28s;
}

.MistInfoRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, 0.72);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

.MistInfoRow strong {
	color: #f2e7c6;
	text-align: right;
}

.MistInfoRow strong.is-online {
	color: #74d46f;
}

.MistInfoRow strong.is-offline {
	color: #ff7070;
}

@keyframes mistIntelCycle {
	0%, 4% {
		opacity: 0;
		transform: translateY(6px);
	}

	7%, 18% {
		opacity: 1;
		transform: translateY(0);
	}

	21%, 100% {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@keyframes mistIntelDot {
	0%, 6%, 22%, 100% {
		background: rgba(242, 231, 198, 0.25);
		transform: scale(1);
	}

	8%, 18% {
		background: #e7d49a;
		transform: scale(1.25);
	}
}

@media (min-width: 860px) {
	:root {
		--mist-body-width: min(780px, calc(100vw - 384px));
		--mist-left-rail-width: 150px;
		--mist-right-rail-width: 150px;
		--mist-rail-gap: 14px;
		--mist-layout-width: calc(var(--mist-left-rail-width) + var(--mist-rail-gap) + var(--mist-body-width) + var(--mist-rail-gap) + var(--mist-right-rail-width));
		--mist-layout-left: calc((100vw - var(--mist-layout-width)) / 2);
	}

	#page {
		width: var(--mist-body-width) !important;
		max-width: 780px !important;
		margin-left: calc(var(--mist-layout-left) + var(--mist-left-rail-width) + var(--mist-rail-gap)) !important;
		margin-right: 0 !important;
	}

	#MistMobileMenuButton,
	#MistMobileMenu {
		display: none !important;
	}

	.MistSideNav {
		display: block;
	}

	.MistTopAction {
		display: block;
	}

	.MistSideNav--left {
		left: max(8px, var(--mist-layout-left));
	}

	.MistSideNav--right {
		right: max(8px, var(--mist-layout-left));
	}

	.MistTopAction--left {
		left: max(8px, var(--mist-layout-left));
	}

	.MistTopAction--right {
		right: max(8px, var(--mist-layout-left));
	}
}

@media (min-width: 1204px) {
	:root {
		--mist-body-width: 780px;
	}
}

/* Phone rules come last on purpose. iOS Safari will visually zoom out if any
   legacy wrapper still advertises a desktop-width layout. */
@media (max-width: 720px) {
	html,
	body {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: hidden;
	}

	#top,
	#page,
	#header,
	#content,
	#content-bot {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	#page {
		margin: 0 !important;
	}

	#header {
		height: 74px !important;
		max-height: 74px !important;
		background-position: center top !important;
	}

	.MistHeaderMark {
		left: 50%;
		top: 50%;
		width: min(290px, 74%);
	}

	#margins {
		width: auto !important;
		max-width: calc(100% - 12px) !important;
		min-width: 0 !important;
		margin-left: 6px !important;
		margin-right: 6px !important;
	}

	.Content,
	.BoxContent,
	#ContentHelper {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	#ContentHelper {
		overflow-x: auto !important;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
	}

	#ContentHelper > table {
		width: 100% !important;
		min-width: 0 !important;
	}

	#ContentHelper .TableContainer,
	#ContentHelper .myaac-table {
		min-width: 560px;
	}

	#MistMobileMenuButton {
		top: max(10px, env(safe-area-inset-top));
		right: max(10px, env(safe-area-inset-right));
	}

	.MistMobileMenuPanel {
		width: min(88vw, 360px);
		width: min(88dvw, 360px);
	}
}

/* Table reset: simple content should fit the column; only dense tables should
   become scroll surfaces. */
#ContentHelper {
	overflow-x: visible !important;
}

#ContentHelper table,
#ContentHelper .TableContainer,
#ContentHelper .myaac-table {
	max-width: 100% !important;
	min-width: 0 !important;
}

.MistTableViewport,
.MistHeadlineScroll {
	max-width: 100%;
	overflow-x: visible;
}

.MistTableFrame--data .MistTableViewport,
.MistTableFrame--wide .MistTableViewport,
.MistTableFrame--scroll .MistTableViewport {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.MistTableFrame--data .MistTableViewport > table,
.MistTableFrame--wide .MistTableViewport > table,
.MistTableFrame--scroll .MistTableViewport > table {
	width: 100%;
}

.MistTableFrame--wide .MistTableViewport > table,
.MistTableFrame--scroll .MistTableViewport > table {
	min-width: 680px !important;
}

@media (max-width: 720px) {
	.MistTableFrame--data .MistTableViewport,
	.MistTableFrame--wide .MistTableViewport,
	.MistTableFrame--scroll .MistTableViewport {
		overflow-x: visible;
	}
}

/* Character profile: reuse the same compact table language as the other pages. */
.MistTableFrame--character-profile .MistHeadlineScroll {
	overflow-x: visible;
}

.MistTableFrame--character-profile .MistTableViewport > table {
	min-width: 0 !important;
}

.MistCharacterProfileContent {
	color: #373737;
	font-size: 10px;
	line-height: 1.35;
	text-align: left;
}

.MistCharacterProfileContent br {
	display: none;
}

.MistCharacterInfoPanel,
.MistCharacterSubPanel,
.MistCharacterAccountPanel {
	margin: 0 0 10px;
	border: 1px solid #d0cdb4;
	background: #e5e3d7;
}

.MistCharacterSectionTitle {
	margin: 0;
	padding: 5px 7px;
	background: #afab89;
	color: #ffffff;
	font-size: 10pt;
	font-weight: bold;
}

.MistCharacterInfoRows {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

.MistCharacterInfoRow {
	display: table-row;
	background: #e5e3d7;
}

.MistCharacterInfoRow:nth-child(even) {
	background: #d0cdb4;
}

.MistCharacterInfoLabel,
.MistCharacterInfoValue {
	display: table-cell;
	padding: 5px 7px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	vertical-align: middle;
}

.MistCharacterInfoLabel {
	width: 150px;
	font-weight: bold;
}

.MistCharacterNameCell {
	display: table-cell;
}

.MistCharacterOutfitBadge {
	display: inline-block;
	margin-right: 6px;
	vertical-align: middle;
}

.MistCharacterOutfitSprite {
	max-width: 48px !important;
	max-height: 48px !important;
	image-rendering: pixelated;
	vertical-align: middle;
}

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

.MistDataTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 10px;
}

.MistDataTable th,
.MistDataTable td {
	padding: 4px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	vertical-align: middle;
}

.MistDataTable tr:nth-child(odd) td {
	background: #e5e3d7;
}

.MistDataTable tr:nth-child(even) td {
	background: #d0cdb4;
}

.MistCharacterSkillValue,
.MistCharacterQuestStatus,
.MistCharacterAccountAction {
	text-align: right;
	white-space: nowrap;
}

.MistCharacterEquipmentBody {
	padding: 8px;
	text-align: center;
}

.MistCharacterEquipmentGrid,
.MistCharacterEquipmentGrid table {
	width: auto !important;
	min-width: 0 !important;
	margin: 0 auto;
}

.MistCharacterEquipmentGrid td {
	padding: 1px;
	text-align: center;
}

.MistCharacterEquipmentGrid img {
	width: 32px !important;
	height: 32px !important;
	max-width: none !important;
	image-rendering: pixelated;
}

.MistCharacterAccountTable th {
	padding: 5px 6px;
	background: #afab89;
	color: #ffffff;
	text-align: left;
}

.MistCharacterHouseValue form,
.MistCharacterAccountAction form {
	display: inline-block;
	margin: 0 0 0 8px;
	vertical-align: middle;
}

.MistTableFrame--character-search {
	margin-top: 8px;
}

@media (max-width: 720px) {
	.MistCharacterBuildGrid {
		grid-template-columns: 1fr;
	}

	.MistCharacterInfoRows,
	.MistCharacterInfoRow,
	.MistCharacterInfoLabel,
	.MistCharacterInfoValue {
		display: block;
		width: 100%;
	}

	.MistCharacterInfoLabel {
		padding-bottom: 1px;
	}

	.MistCharacterInfoValue {
		padding-top: 1px;
	}
}