:root {
	--bg1: #172731;
    --bg2: #314955;
    --bg3: #283a43; /* even */
    --bg4: #486777;	/* odd */
    --border1: #1c272d;
    --border2: #475963;
    --tabshadow: #0005;
    --table-heading: #467c80;
    /* --table-heading-color: #fffbef; */
    /* --table-heading-second: #918763; */
    /* --table-heading-second-color: #e5d8a8; */
    /* --table-row-odd: #c9ba8a; */
    --table-border: #274d53;
	--btn-color: #d6d6d6;
	--btn-color-hover: #fff;
    --btn-background: #23818d;
    --btn-background-hover: #18a3b6;
	--btn-outline-active: #ffffff3a;
}

input[type="text"]{
	max-width: 665px;
}
  td.whites, td.white, .white{
	color: white;
  }
  .TableContainer {
	border: 1px solid black;
	position: relative;
	width: 100%;
	color: #b8d9d6;
  }
  .TableContainer .Odd {
	background-color: var(--bg3);
  }
  .TableContainer .Even {
	background-color: var(--bg4);
  }
  
  /* TABLEHEADER DECORATION */
  .TableContainer .CaptionContainer {
	position: relative;
	font-size: 1pt;
	background-color: var(--bg1) !important;
	height: 100%;
	width: 100%;
	text-align: left;
  }
  .TableContainer .CaptionContainer .CaptionInnerContainer {
	position: relative;
	background-color: var(--bg1);
	width: 100%;
	height: 100%;
	padding-top: 3px;
	padding-bottom: 4px;
  }
  .TableContainer .CaptionContainer .Text {
	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 var(--bg1);
	position: relative;
	margin-right: 4px;
	height: 100%;
	background-color: var(--bg2);
	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: var(--bg2);
	border: 2px solid var(--border1);
  }
  .TableContainer .Table1 .InnerTableContainer {
	padding: 5px;
  }
  /* INNERLYOUT 2 */
  .TableContainer .Table2 {
	width: 100%;
	border: 2px solid var(--border1);
	background-color: var(--bg3);
	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 var(--border2);
  }
  /* INNERLYOUT 3 */
  .TableContainer .Table3 {
	width: 100%;
	border: 2px solid var(--border1);
	background-color: var(--bg3);
  }
  .TableContainer .Table3 .InnerTableContainer {
	width: 100%;
	position: relative;
	margin-top: 5px;
	margin-left: 3px;
  }
  .TableContentAndRightShadow{
	background-image: none !important;
  }
  .TableContainer .Table3 .TableContentAndRightShadow td {
	border: 1px solid var(--border2);
  }
  /* INNERLYOUT 4 */
  .TableContainer .Table4 {
	width: 100%;
	border: 2px solid var(--border1);
	background-color: var(--bg3);
  }
  .TableContainer .Table4 .InnerTableContainer {
	width: 100%;
	position: relative;
	margin-top: 3px;
  }
  .TableContentAndRightShadow .TableContentContainer{
	box-shadow: 2px 2px 3px var(--tabshadow);
  }
  .TableContainer .Table4 .TableContentAndRightShadow .TableContent td {
	padding-left: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
  }
  /* INNERLYOUT 5 */
  .TableContainer .Table5 {
	width: 100%;
	border: 2px solid var(--border1);
	background-color: var(--bg3);
  }
  .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;
	float: right;
	z-index: 99;
  }
  .TableShadowRightTop {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 4px;
	height: 5px;
	z-index: 99;
	background-image: none !important;
  }
  .TableContentAndRightShadow {
	position: relative;
	background-repeat: repeat-y;
	background-position: top right;
	margin-right: 3px;
  }
  .TableShadowContainer {
	position: relative;
	margin-right: 5px;
  }
  .TableBottomShadow {
	position: relative;
	height: 5px;
	width: 100%;
	padding: 0px;
	margin: 0px;
	background-image: none !important;
  }
  .TableBottomLeftShadow {
	position: relative;
	height: 5px;
	width: 4px;
	float: left;
	padding: 0px;
	margin: 0px;
	background-image: none !important;
  }
  .TableBottomRightShadow {
	position: relative;
	float: right;
	right: -2px;
	top: 0px;
	height: 5px;
	width: 4px;
	background-image: none !important;
  }
  /* 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 */
  .LabelV {
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
  }
  .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: var(--bg4);
  
  }
  .LabelH td {
	background-color: var(--bg4);
	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;
	padding: 0 10px;
	word-break: keep-all;
	display: block;
	word-wrap: normal;
	width: max-content;
    height: 25px;
	line-height: 25px;
	outline: 2px solid transparent;
	text-align: center;
    z-index: 10;
    background: var(--btn-background) !important;
    background-image: none;
    margin: 0 5px 0 0;
    border-radius: 3px;
    display: inline-block;
    color: var(--btn-color);
    border: 0px solid var(--table-border);
	font-weight: bold;
	font-size: 11px;
	transition: all ease .2s;

	box-shadow: 0 1px 3px #0007;
  }
    .BigButton:active{
		outline: 2px solid var(--btn-background-hover);
	}
  .BigButton:hover{
	background: var(--btn-background-hover) !important;
	box-shadow: 0 0 7px var(--btn-background-hover);
	color: var(--btn-color-hover);
  }
  .BigButtonOver {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 137px;
	height: 25px;
	visibility: hidden;
	z-index: 15;
	display: none !important;
  }
  .ButtonText {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 25px;
	width: 135px;
	z-index: 20;
	opacity: 0 !important;
  }
  .TopButtonContainer {
	position: relative;
	right: 4px;
	top: 4px;
	z-index: 60;
  }
  .TopButtonContainerInnerTable {
	position: absolute;
	right: 4px;
	top: 2px;
	z-index: 60;
  }
  * html .TopButtonContainer {
	right: 27px;
  }
  .TopButtonContainer .TopButton {
	position: absolute;
	right: 0px;
	z-index: 55;
  }
  #world_list_tr td {
	text-align: left;
  }
  .OptionContainer {
	text-align: center;
  }
  label {
	cursor: pointer;
  }
  .InputIndicator {
	position: relative;
	top: 5px;
	left: 218px;
	height: 12px;
	width: 12px;
	background-repeat: no-repeat;
  }
  * html .InputIndicator {
	left: 0px;
  }
  .sortarrow {
	width: 10px;
	height: 10px;
  }

  /* Auction House Styles */
.AuctionHouseTabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

.AuctionHouseTabs a {
    padding: 10px 15px;
    margin-right: 5px;
    background: #f1f1f1;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.AuctionHouseTabs a.active {
    background: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.AuctionItem {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    background: #fff;
}

.AuctionHeader {
    background: #f5f5f5;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.CharName {
    font-weight: bold;
    font-size: 16px;
}

.CharInfo {
    color: #666;
    margin-left: 10px;
}

.AuctionContent {
    display: flex;
    padding: 15px;
}

.CharImage {
    flex: 0 0 120px;
    text-align: center;
}

.CharImage img {
    max-width: 100px;
    max-height: 100px;
}

.AuctionDetails {
    flex: 1;
    padding: 0 15px;
}

.DetailRow {
    display: flex;
    margin-bottom: 8px;
}

.Label {
    flex: 0 0 150px;
    font-weight: bold;
    color: #555;
}

.Value {
    flex: 1;
}

.AuctionActions {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.AuctionActions form {
    margin-bottom: 10px;
}

.AuctionActions input[type="number"] {
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
}

.AuctionActions input[type="submit"] {
    width: 100%;
    padding: 8px;
    background: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

.AuctionActions input[type="submit"]:hover {
    background: #45a049;
}

.OwnerNotice {
    padding: 10px;
    background: #f8f8f8;
    text-align: center;
    border: 1px dashed #ddd;
}

/* Tables */
.AuctionHistoryTable, .MyBidsTable, .MyAuctionsTable {
    width: 100%;
    border-collapse: collapse;
}

.AuctionHistoryTable th, .MyBidsTable th, .MyAuctionsTable th {
    background: #f5f5f5;
    padding: 10px;
    text-align: left;
}

.AuctionHistoryTable td, .MyBidsTable td, .MyAuctionsTable td {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
}

/* Empty states */
.NoAuctions, .NoHistory, .NoBids {
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 5px;
}