@charset "utf-8";
@import "validation.css";
@import "notice.css";
@import "ui.css?v1";

ul#vote-options{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}
ul#vote-options { list-style:none; }
ul#vote-options h5{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}

#vote-options {
	font-size:auto;
	line-height:auto;
	list-style-type:none;
	margin:0;
}

#vote-options li {
	line-height:45px;
	height: 65px;
	margin-top:10px;
	padding:10px;
	background-color: var(--light-dark-color) !important;
}

#vote-options li img {
	width:75px;
	height:45px;
}

#vote-options li button {
	border:1px solid #999;
	line-height:28px;
	margin:6px 0;
	padding:0 5px;
}
#vote-options li h5 {
	font-weight:bolder;
	font-size:24px;
	border-left:1px solid #453129;
	padding-left:10px;
	margin-left:10px;
}

ul#paypal-options{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}
ul#paypal-options { list-style:none; }
ul#paypal-options h4{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}
ul#paypal-options h3{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}

#paypal-options {
	font-size:auto;
	line-height:auto;
	list-style-type:none;
	margin:0;
}

#paypal-options li {
	margin-top: 10px;
	padding: 10px;
	background-color: var(--light-dark-color) !important;
	min-height: 65px;
}

#paypal-options li h4 {
	font-weight:bolder;
	font-size:22px;
	padding-left:10px;
	margin-left:10px;
}
#paypal-options li h3 {
	font-size:18px;
	padding-left:10px;
	margin-left:10px;
}

#helm{
	position:absolute; 
	left:73px; 
	top:58px; 
	width:56px; 
	height:66px; 
}

#wings{
	position:absolute; 
	left:272px;	
	top:59px; 	
	width:127px; 
	height:110px; 
}

#pendant{
	position:absolute; 
	left:233px;	
	top:80px; 	
	width:29px; 
	height:29px; 
}

#sword{
	position:absolute; 
	left:6px; 
	top:242px; 
	width:69px; 
	height:129px; 
}

#armor{
	position:absolute; 
	left:40px; 
	top:138px; 
	width:82px; 
	height:98px; 
}

#shield{
	position:absolute; 
	left:330px; 
	top:242px; 
	width:69px; 
	height:129px; 
}

#gloves{
	position:absolute; 
	left:271px;	
	top:178px;	
	width:85px;	
	height:55px; 
}
#pants{
	position:absolute; 
	left:89px;	
	top:297px;	
	width:58px; 
	height:74px; 
}
#ring_left{
	position:absolute; 
	left:102px;	
	top:252px; 	
	width:29px; 
	height:29px; 
}
#ring_right{
	position:absolute; 
	left:272px;	
	top:252px; 	
	width:29px; 
	height:29px; 
}

#boots{
	position:absolute; 
	left:258px;	
	top:297px; 	
	width:58px; 
	height:74px; 
}

/* AUCTION */
.inv { 
	table-layout : fixed;
	background-color : #212121; 
	border : 1px solid #100f0d; 
	margin : 0px;
	padding : 0px;
} 

.waretitle { 
	font-family : Verdana, Arial, Helvetica, sans-serif; 
	font-size : 11px;
	background:	#610000;
	font-style: oblique;
	font-weight: bold;
	color:#fff;
} 
#sell_item {
	display: none;
}
/* AUCTION END */

 
#pagination {
	color: #fff;
	font: normal 12px verdana, arial, helvetica, serif;
	line-height: 17px;
	margin: 0;
	padding: 12px 8px 8px 12px;
	-webkit-border-radius: 0 0 6px 6px;  
	-moz-border-radius: 0 0 6px 6px;  
	-khtml-border-radius: 0 0 6px 6px;  
	border-radius: 0 0 6px 6px;
}

#pagination a {
	border: 0;
	background: var(--light-dark-color);
	color: #fff;
	margin-right: 8px;
	padding: 4px 8px;
}

#pagination a.on {
	background: rgba(var(--theme-color), 1);
	color: #fff;
	margin-right: 8px;
	padding: 4px 8px;
}

#pagination a:hover {
	background: rgba(var(--theme-color2), 1);
	color: #fff; 
}

#pagination ul {
	height: 21px;
}

#pagination li {
	list-style-type: none;
	float: left;
}

#item_buy{
	margin-left:5px;
	margin-right:5px;
	width: 100%;
}
#item_buy_left{
	float: left;
	padding-right: 5px;
}
#item_buy_right{
	float: left;
	background-color: #3e1d1c;
	width: 492px;
	padding: 1px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
#item_buy_right .full{
	margin: 1px;
	padding: 1px;
	width: 488px;
	background-color:#76403f;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:14px; 
	color:#FFFFFF;
	text-shadow:#000 0px 1px 0px;
	height: 18px;	
	line-height: 18px;
}
#item_buy_right .opt_title{
	margin: 1px;
	padding-left: 1px;
	width: 250px;
	float: left;
	background-color:#76403f;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#FFFFFF;
	text-shadow:#000 0px 1px 0px;
	height: 20px;	
	line-height: 20px;
}
#item_buy_right .opt{
	margin: 1px;
	padding-left: 1px;
	width: 236px;
	float: left;
	background-color:#76403f;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#FFFFFF;
	text-shadow:#000 0px 1px 0px;
	height: 20px;
	line-height: 20px;
}

#item_buy_right .opt select{
	border:0px; 
	border-radius: 0;
	width:60%; 
	font-size:12px; 
	line-height: 1;
	background:#5d302f; 
	color:#fff;
	margin-top: 1px;
	padding:0;
	-webkit-appearance: none;
	outline: 0 !important;
}

#item_buy_right .opt input[type="number"]{
	width: 35px;
	border:0px; 
	border-radius: 0;
	font-size:12px; 
	line-height: 1;
	background:#5d302f; 
	color:#fff;
	margin-top: 1px;
	padding:0;
	-webkit-appearance: none;
}

#item_image_bg{
	position:relative;
	background:url(../images/item_bg.png) no-repeat;
	width: 129px;
	height: 184px;	
}
#item_image_bg img{
	position: absolute;  
	top: 0;  
	bottom: 0;  
	left: 0;  
	right: 0;  
	margin: auto; 
}
.item_info{
	margin-top: 2px;
	background:url(../images/item_desc.png) no-repeat;
	width: 129px;
	height: 36px;
	line-height: 36px;	
	z-index:500;
}

.item_info .info{
	padding-left: 5px;
	text-align: left;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:11px; 
	color:#FFFFFF;
	text-shadow:#000 0px 1px 0px;

}
.item_info .info .btimes{ color:#ed7876;}
.item_info .info .goldcr{ color:#ffaf04; }
.item_info .info .normalcr{ color:#d9a08a;}
#buy_buttons{
	margin-right:10px;
	width: 99%;
}
#buy_buttons button{
	margin: 2px;
}
.buy_button { background:url(../images/slect_btn.png); 
	width:155px; 
	height:42px;
	font-size:14px; 
	color:#FFFFFF;
	text-shadow:#000 0px 1px 0px; 
	border:0;
	float:right;
}
.buy_button:hover{
	cursor: pointer;
}
.payment-method-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}
.payment-method-button label {
    float:left;
}
.payment-method-button label span {
    text-align:center;
   /*padding:3px 0px;*/
    display:block;
	width: 120px;
	height: 50px;
	line-height: 50px;
	font-size:20px; 
	cursor: pointer;
}
.payment-method-button label input {
    position:absolute;
    top:-20px;
}
.btn-fld { /*width: 254px; */overflow: hidden; padding: 12px 20px 12px 130px; }
.buttonn {
	float: right;
	background: #660000; 
	border: none;
	width: auto;
	overflow: visible;
	font-size: 1.4em;
	color: #FFF;
	padding: 7px 10px;  
	border-radius: 4px; 
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	font-weight: bold; 
	text-shadow: 0 1px 0 rgba(0,0,0,0.4);
} 
.span_red{
	background: #660000; 
    color:#fff;
}

.offline{
	color: red;
}

.online{
	color: green;
}
.events-table {
	padding-left:0;
}
.events-table li { display: flex; align-items: center; justify-content: space-between; padding: 0; }
.event-name p { font-weight: bold; color: var(--default-color) !important; font-size: 18px; margin-bottom: 5px; }
.event-name span { font-weight: bold; }

.event-time { text-align: right; color: #6a6a69; }
.event-time p { font-size: 16px; margin-bottom: 5px; }

#tooltip {
	position: absolute;
	z-index: 11001;
	border: 1px solid #111;
	background-color: #221f28;
	padding: 5px;
	opacity: 0.90;
	font: normal 10px Tahoma, Helvetica, sans-serif;
	text-align: center;
	color: #fff;
}

#tooltip h3,
#tooltip div {
	margin: 0;
}

/* MuDream item tooltip (libraries/mudream_tooltip.php). Values are theirs at desktop size:
   HoverTooltip bubble (--box-bg #051F35, radius 20, padding 16/20) around Item tooltip-content
   (padding 12, 16px/20px system font, gaps --mg-2 10px / --mg-4 20px, picture max 140px).
   The theme's #tooltip frame steps aside so only their bubble shows. */
#tooltip:has(.mdt){opacity:1!important;padding:0!important;border:0!important;background:transparent!important}
.mdt{min-width:200px;max-width:500px;padding:28px 32px;background:#051f35;border-radius:20px;box-shadow:0 0 5px 2px rgba(0,0,0,.5);text-align:center;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}
.mdt p{margin:0;padding:0;font-size:16px;line-height:20px;white-space:pre-wrap;text-shadow:0 0 2px currentColor;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif!important;letter-spacing:normal}
.mdt .mdt-img{display:block;max-height:140px;max-width:100%;margin:0 auto 10px}
.mdt .mdt-title,.mdt .mdt-bold{font-weight:700}
.mdt .mdt-title{margin-bottom:10px}
.mdt .mdt-space{margin:10px 0}
.mdt .mdt-space.mdt-big{margin:20px 0}
.mdt .mdt-white{color:#fff}
.mdt .mdt-blue{color:#80b2ff}
.mdt .mdt-pink{color:hotpink}
.mdt .mdt-yellow{color:#ffcc19}
.mdt .mdt-green{color:#16dc6e}
.mdt .mdt-dark-green,.mdt .mdt-green-blue{color:lime}
.mdt .mdt-dark-red{color:maroon}
.mdt .mdt-purple{color:purple}
.mdt .mdt-dark-blue{color:#06f}
.mdt .mdt-dark-yellow{color:#fc0}
.mdt .mdt-gray{color:gray}
.mdt .mdt-red,.mdt .mdt-red-purple{color:#ff3f3f}
.mdt .mdt-violet{color:#b266ff}
.mdt .mdt-orange{color:#ff8c00}
.mdt .mdt-normal{color:#b0c3d9}
.mdt .mdt-uncommon{color:#799b55}
.mdt .mdt-rare{color:violet}
.mdt .mdt-legendary{color:#ff8c00}
.mdt .mdt-epic{color:#eb4b4b}
/* our server's fifth excellent rank; MuDream has no Mythic tier - colour from our item_rarity.json */
.mdt .mdt-mythic{color:#ff1aff}
.mdt .mdt-bg-red{background:#ff3f3f}

#lean_overlay {
    position: fixed;
    z-index: 9998;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#buy_windows, #add_to_card_windows, #select_server, #auction_bet{
	width: 404px;
	padding-bottom: 2px;
	display:none;
	background: var(--light-gray-color);
	z-index:9999;
}
#item_filter_overlay{
	position: absolute;
    height:400px;
    width:300px;
	display:none;
	z-index:9999;
}
#item_filter{
	width: 300px;
	height:710px;
	padding-bottom: 2px;
	background: #FFF;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	box-shadow: 0px 0px 4px rgba(0,0,0,0.7); 
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); 
	-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);   
}
.item_filter_content{	
	height:600px;
	width: 285px;
	margin: 15px;
	overflow: auto;
}
.modal-header, .modal-header2 {
	background-color: var(--dark-color);
	padding: 18px 18px 14px 18px;
	border:0;
	border-radius: 0;
}
.modal-header h2, .modal-header2 h2 { 
	font-size: 2em; 
	font-weight: 700; 
	margin-bottom: 3px; 
}
#buy_windows .modal-header h2, #add_to_card_windows .modal-header h2{
	font-size: 1.5em; 
}
.close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: block;
	width: 16px;
	height: 16px;
	background: url(../images/close.png);
	z-index: 2;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 1 !important;
}

.add_to_card {
	font-size:12px;
	background:var(--light-gray-color);
	width:100%;
	color: #fff;
}
.add_to_card th {
	padding:15px 20px 16px 20px;
	border-top:1px solid var(--dark-color);
	border-bottom:1px solid var(--dark-color);
	background: var(--light-dark-color);
}
.add_to_card th:first-child {
	text-align: left;
	padding-left:20px;
}
.add_to_card tr {
	text-align: center;
	padding-left:20px;
}
.add_to_card td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
.add_to_card td {
	padding:10px;
	border-top: 1px solid var(--dark-color);
	border-bottom:1px solid var(--dark-color);
	border-left: 1px solid var(--dark-color);
	background: var(--light-dark-color);
}
.add_to_card tr.even td {
	background: var(--light-dark-color);
}
.add_to_card tr:last-child td {
	border-bottom:0;
}
.ticket {
	font-size:12px;
	background:var(--light-dark-color) !important;
	color: #fff;
}
.ticket th {
	padding:15px 10px 16px 0px;
	border-top:1px solid var(--dark-color);
	border-bottom:1px solid var(--dark-color);
	background: var(--light-dark-color);
}
.ticket th:first-child {
	text-align: left;
	padding-left:10px;
}
.ticket tr {
	text-align: center;
	padding-left:20px;
}
.ticket td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
.ticket td {
	padding:10px;
	border:1px solid var(--dark-color);
	background: var(--light-dark-color);
}
.ticket tr.even td {
	background: var(--light-gray-color);
}
.ticket tr:last-child td {
	border-bottom:0;
}

.discount_notice{
  margin: 20px auto;
  left:200px;
  width: 280px;
  height: auto;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: fixed;
  z-index: 90;
  opacity: 0.9;
}

.discount_notice .content{
	padding:30px;
	font-size: 14px;
	font-style: normal;
	color: #6a2f3c;
	font-weight: bold;
	position: relative;
	display:block;
}

.ribbon-discount-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

.PriorityZero {
	background-color: rgb(230, 138, 138);
}
.PriorityOne {
    background-color: rgb(204, 64, 64);
}
.PriorityTwo {
    background-color: rgb(255, 0, 0);
}
.PriorityThree {
    background-color: rgb(153, 0, 0);
}

.QapTcha {width:215px;}
.QapTcha .clr{clear:both}
.QapTcha .bgSlider {
	width: 215px;
	height: 31px;
	border: 1px solid var(--light-dark-color) !important;
	background-color: var(--light-dark-color) !important;
}
.QapTcha .slider {width:30px;height:30px;background:transparent url('../images/bg_draggable_qaptcha.jpg') no-repeat;background-size:30px 30px;cursor:e-resize;position:relative;top:0;left:0}
.QapTcha .txtStatus {width:215px;margin-top:7px;text-align:left;color:#bb2828;font-family:Verdana;font-size:10px;clear:both;padding-bottom: 10px;}
.QapTcha .dropSuccess {color:#4e8b37}
.QapTcha .dropError {color:#bb2828}


#exception{
	width: 100%;
	height: 0 auto;
	line-height: 25px;
	min-height:25px;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFF;
	display: none;
	background-color:red;
	position:fixed;
	z-index: 9999;
}

.f16 .flag{display:inline-block;height:16px;width:16px;vertical-align:text-top;line-height:16px;background:url(../images/flags.png) no-repeat;}
.f16 ._African_Union{background-position:0 -16px;}
.f16 ._Arab_League{background-position:0 -32px;}
.f16 ._ASEAN{background-position:0 -48px;}
.f16 ._CARICOM{background-position:0 -64px;}
.f16 ._CIS{background-position:0 -80px;}
.f16 ._Commonwealth{background-position:0 -96px;}
.f16 ._England{background-position:0 -112px;}
.f16 ._European_Union, .f16 .eu{background-position:0 -128px;}
.f16 ._Islamic_Conference{background-position:0 -144px;}
.f16 ._Kosovo{background-position:0 -160px;}
.f16 ._NATO{background-position:0 -176px;}
.f16 ._Northern_Cyprus{background-position:0 -192px;}
.f16 ._Northern_Ireland{background-position:0 -208px;}
.f16 ._Olimpic_Movement{background-position:0 -224px;}
.f16 ._OPEC{background-position:0 -240px;}
.f16 ._Red_Cross{background-position:0 -256px;}
.f16 ._Scotland{background-position:0 -272px;}
.f16 ._Somaliland{background-position:0 -288px;}
.f16 ._Tibet{background-position:0 -304px;}
.f16 ._United_Nations{background-position:0 -320px;}
.f16 ._Wales{background-position:0 -336px;}
.f16 .ad{background-position:0 -352px;}
.f16 .ae{background-position:0 -368px;}
.f16 .af{background-position:0 -384px;}
.f16 .ag{background-position:0 -400px;}
.f16 .ai{background-position:0 -416px;}
.f16 .al{background-position:0 -432px;}
.f16 .am{background-position:0 -448px;}
.f16 .ao{background-position:0 -464px;}
.f16 .aq{background-position:0 -480px;}
.f16 .ar{background-position:0 -496px;}
.f16 .as{background-position:0 -512px;}
.f16 .at{background-position:0 -528px;}
.f16 .au{background-position:0 -544px;}
.f16 .aw{background-position:0 -560px;}
.f16 .ax{background-position:0 -576px;}
.f16 .az{background-position:0 -592px;}
.f16 .ba{background-position:0 -608px;}
.f16 .bb{background-position:0 -624px;}
.f16 .bd{background-position:0 -640px;}
.f16 .be{background-position:0 -656px;}
.f16 .bf{background-position:0 -672px;}
.f16 .bg{background-position:0 -688px;}
.f16 .bh{background-position:0 -704px;}
.f16 .bi{background-position:0 -720px;}
.f16 .bj{background-position:0 -736px;}
.f16 .bm{background-position:0 -752px;}
.f16 .bn{background-position:0 -768px;}
.f16 .bo{background-position:0 -784px;}
.f16 .br{background-position:0 -800px;}
.f16 .bs{background-position:0 -816px;}
.f16 .bt{background-position:0 -832px;}
.f16 .bw{background-position:0 -848px;}
.f16 .by{background-position:0 -864px;}
.f16 .bz{background-position:0 -880px;}
.f16 .ca{background-position:0 -896px;}
.f16 .cg{background-position:0 -912px;}
.f16 .cf{background-position:0 -928px;}
.f16 .cd{background-position:0 -944px;}
.f16 .ch{background-position:0 -960px;}
.f16 .ci{background-position:0 -976px;}
.f16 .ck{background-position:0 -992px;}
.f16 .cl{background-position:0 -1008px;}
.f16 .cm{background-position:0 -1024px;}
.f16 .cn{background-position:0 -1040px;}
.f16 .zh{background-position:0 -1040px;}
.f16 .co{background-position:0 -1056px;}
.f16 .cr{background-position:0 -1072px;}
.f16 .cu{background-position:0 -1088px;}
.f16 .cv{background-position:0 -1104px;}
.f16 .cy{background-position:0 -1120px;}
.f16 .cz{background-position:0 -1136px;}
.f16 .de{background-position:0 -1152px;}
.f16 .dj{background-position:0 -1168px;}
.f16 .dk{background-position:0 -1184px;}
.f16 .dm{background-position:0 -1200px;}
.f16 .do{background-position:0 -1216px;}
.f16 .dz{background-position:0 -1232px;}
.f16 .ec{background-position:0 -1248px;}
.f16 .ee{background-position:0 -1264px;}
.f16 .eg{background-position:0 -1280px;}
.f16 .eh{background-position:0 -1296px;}
.f16 .er{background-position:0 -1312px;}
.f16 .es{background-position:0 -1328px;}
.f16 .et{background-position:0 -1344px;}
.f16 .fi{background-position:0 -1360px;}
.f16 .fj{background-position:0 -1376px;}
.f16 .fm{background-position:0 -1392px;}
.f16 .fo{background-position:0 -1408px;}
.f16 .fr{background-position:0 -1424px;}  
.f16 .bl, .f16 .cp, .f16 .mf, .f16 .yt{background-position:0 -1424px;}
.f16 .ga{background-position:0 -1440px;}
.f16 .gb{background-position:0 -1456px;}  
.f16 .sh{background-position:0 -1456px;}
.f16 .gd{background-position:0 -1472px;}
.f16 .ge{background-position:0 -1488px;}
.f16 .gg{background-position:0 -1504px;}
.f16 .gh{background-position:0 -1520px;}
.f16 .gi{background-position:0 -1536px;}
.f16 .gl{background-position:0 -1552px;}
.f16 .gm{background-position:0 -1568px;}
.f16 .gn{background-position:0 -1584px;}
.f16 .gp{background-position:0 -1600px;}
.f16 .gq{background-position:0 -1616px;}
.f16 .gr{background-position:0 -1632px;}
.f16 .gt{background-position:0 -1648px;}
.f16 .gu{background-position:0 -1664px;}
.f16 .gw{background-position:0 -1680px;}
.f16 .gy{background-position:0 -1696px;}
.f16 .hk{background-position:0 -1712px;}
.f16 .hn{background-position:0 -1728px;}
.f16 .hr{background-position:0 -1744px;}
.f16 .ht{background-position:0 -1760px;}
.f16 .hu{background-position:0 -1776px;}
.f16 .id{background-position:0 -1792px;}
.f16 .mc{background-position:0 -1792px;}
.f16 .ie{background-position:0 -1808px;}
.f16 .il{background-position:0 -1824px;}
.f16 .im{background-position:0 -1840px;}
.f16 .in{background-position:0 -1856px;}
.f16 .iq{background-position:0 -1872px;}
.f16 .ir{background-position:0 -1888px;}
.f16 .is{background-position:0 -1904px;}
.f16 .it{background-position:0 -1920px;}
.f16 .je{background-position:0 -1936px;}
.f16 .jm{background-position:0 -1952px;}
.f16 .jo{background-position:0 -1968px;}
.f16 .jp{background-position:0 -1984px;}
.f16 .ke{background-position:0 -2000px;}
.f16 .kg{background-position:0 -2016px;}
.f16 .kh{background-position:0 -2032px;}
.f16 .ki{background-position:0 -2048px;}
.f16 .km{background-position:0 -2064px;}
.f16 .kn{background-position:0 -2080px;}
.f16 .kp{background-position:0 -2096px;}
.f16 .kr{background-position:0 -2112px;}
.f16 .ko{background-position:0 -2112px;}
.f16 .kw{background-position:0 -2128px;}
.f16 .ky{background-position:0 -2144px;}
.f16 .kz{background-position:0 -2160px;}
.f16 .la{background-position:0 -2176px;}
.f16 .lb{background-position:0 -2192px;}
.f16 .lc{background-position:0 -2208px;}
.f16 .li{background-position:0 -2224px;}
.f16 .lk{background-position:0 -2240px;}
.f16 .lr{background-position:0 -2256px;}
.f16 .ls{background-position:0 -2272px;}
.f16 .lt{background-position:0 -2288px;}
.f16 .lu{background-position:0 -2304px;}
.f16 .lv{background-position:0 -2320px;}
.f16 .ly{background-position:0 -2336px;}
.f16 .ma{background-position:0 -2352px;}
.f16 .md{background-position:0 -2368px;}
.f16 .me{background-position:0 -2384px;}
.f16 .mg{background-position:0 -2400px;}
.f16 .mh{background-position:0 -2416px;}
.f16 .mk{background-position:0 -2432px;}
.f16 .ml{background-position:0 -2448px;}
.f16 .mm{background-position:0 -2464px;}
.f16 .mn{background-position:0 -2480px;}
.f16 .mo{background-position:0 -2496px;}
.f16 .mq{background-position:0 -2512px;}
.f16 .mr{background-position:0 -2528px;}
.f16 .ms{background-position:0 -2544px;}
.f16 .mt{background-position:0 -2560px;}
.f16 .mu{background-position:0 -2576px;}
.f16 .mv{background-position:0 -2592px;}
.f16 .mw{background-position:0 -2608px;}
.f16 .mx{background-position:0 -2624px;}
.f16 .my{background-position:0 -2640px;}
.f16 .mz{background-position:0 -2656px;}
.f16 .na{background-position:0 -2672px;}
.f16 .nc{background-position:0 -2688px;}
.f16 .ne{background-position:0 -2704px;}
.f16 .ng{background-position:0 -2720px;}
.f16 .ni{background-position:0 -2736px;}
.f16 .nl{background-position:0 -2752px;}  
.f16 .bq{background-position:0 -2752px;}
.f16 .no{background-position:0 -2768px;}  
.f16 .bv, .f16 .nq, .f16 .sj{background-position:0 -2768px;}
.f16 .np{background-position:0 -2784px;}
.f16 .nr{background-position:0 -2800px;}
.f16 .nz{background-position:0 -2816px;}
.f16 .om{background-position:0 -2832px;}
.f16 .pa{background-position:0 -2848px;}
.f16 .pe{background-position:0 -2864px;}
.f16 .pf{background-position:0 -2880px;}
.f16 .pg{background-position:0 -2896px;}
.f16 .ph{background-position:0 -2912px;}
.f16 .pk{background-position:0 -2928px;}
.f16 .pl{background-position:0 -2944px;}
.f16 .pr{background-position:0 -2960px;}
.f16 .ps{background-position:0 -2976px;}
.f16 .pt{background-position:0 -2992px;}
.f16 .pw{background-position:0 -3008px;}
.f16 .py{background-position:0 -3024px;}
.f16 .qa{background-position:0 -3040px;}
.f16 .re{background-position:0 -3056px;}
.f16 .ro{background-position:0 -3072px;}
.f16 .rs{background-position:0 -3088px;}
.f16 .ru{background-position:0 -3104px;}
.f16 .rw{background-position:0 -3120px;}
.f16 .sa{background-position:0 -3136px;}
.f16 .sb{background-position:0 -3152px;}
.f16 .sc{background-position:0 -3168px;}
.f16 .sd{background-position:0 -3184px;}
.f16 .se{background-position:0 -3200px;}
.f16 .sg{background-position:0 -3216px;}
.f16 .si{background-position:0 -3232px;}
.f16 .sk{background-position:0 -3248px;}
.f16 .sl{background-position:0 -3264px;}
.f16 .sm{background-position:0 -3280px;}
.f16 .sn{background-position:0 -3296px;}
.f16 .so{background-position:0 -3312px;}
.f16 .sr{background-position:0 -3328px;}
.f16 .st{background-position:0 -3344px;}
.f16 .sv{background-position:0 -3360px;}
.f16 .sy{background-position:0 -3376px;}
.f16 .sz{background-position:0 -3392px;}
.f16 .tc{background-position:0 -3408px;}
.f16 .td{background-position:0 -3424px;}
.f16 .tg{background-position:0 -3440px;}
.f16 .th{background-position:0 -3456px;}
.f16 .tj{background-position:0 -3472px;}
.f16 .tl{background-position:0 -3488px;}
.f16 .tm{background-position:0 -3504px;}
.f16 .tn{background-position:0 -3520px;}
.f16 .to{background-position:0 -3536px;}
.f16 .tr{background-position:0 -3552px;}
.f16 .tt{background-position:0 -3568px;}
.f16 .tv{background-position:0 -3584px;}
.f16 .tw{background-position:0 -3600px;}
.f16 .tz{background-position:0 -3616px;}
.f16 .ua{background-position:0 -3632px;}
.f16 .ug{background-position:0 -3648px;}
.f16 .us, .f16 .en{background-position:0 -3664px;}
.f16 .uy{background-position:0 -3680px;}
.f16 .uz{background-position:0 -3696px;}
.f16 .va{background-position:0 -3712px;}
.f16 .vc{background-position:0 -3728px;}
.f16 .ve{background-position:0 -3744px;}
.f16 .vg{background-position:0 -3760px;}
.f16 .vn{background-position:0 -3776px;}
.f16 .vi{background-position:0 -3792px;}
.f16 .vu{background-position:0 -3808px;}
.f16 .ws{background-position:0 -3824px;}
.f16 .ye{background-position:0 -3840px;}
.f16 .za{background-position:0 -3856px;}
.f16 .zm{background-position:0 -3872px;}
.f16 .zw{background-position:0 -3888px;}
.f16 .sx{background-position:0 -3904px;}
.f16 .cw{background-position:0 -3920px;}
.f16 .ss{background-position:0 -3936px;}
.f16 .nu{background-position:0 -3952px;}

.ref-reward-dropdown {
	position: relative;
	display: inline-block;
}

.ref-reward-dropdown-content {
	display: none;
	position: relative;
	background-color: #f9f9f9;
	min-width: 150px;
	overflow: hidden;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:2500;
	overflow-y: auto;
	max-height:500px;
}

.ref-reward-dropdown-content a {
	color: black;
	padding: 6px 8px;
	text-decoration: none;
	display: block;
}

.ref-reward-dropdown-content a:hover {background-color: #f1f1f1}

.ref-reward-dropdown:hover .ref-reward-dropdown-content {
	display: block;
}

.item_size_12{
	font-size: 12px;
}

.item_font_family{
	font-family: tahoma;
}

.item_white{
	color:#FFFFFF;
}

.item_light_green{
	color:#00FF00;
}

.item_light_blue{
	color:#80B2FF;
}

.item_light_blue_2{
	color:#3366FF;
}

.item_blue{
	color:#0066FF;
}

.item_pink{
	color:#FF1493;
}

.item_yellow{
	color:#FADE09;
}

.item_yellow_2{
	color:#FFCC00;
}

.item_red{
	color:#FF0000;
}

.item_dark_red{
	color:#800000;
}

.item_dark_red_background{
	background-color:#800000;
}
/* "Personal Item" line (MuDream bind-on-pickup), their web tooltip's red band */
.item_red_background{
	background-color:#FF3F3F;
}

.item_purple{
	color: #800080;
}

.item_socket{
	color: #B266FF;
}

.item_grey{
	color: #808080;
}

.item_yellow_title{
	color: #FFCC19;
}
.item_luck{
	color:#80B2FF;
}
.item_exe_title{
	color: #008000;
}

.item_socket_title{
	color: #B266FF;
}

.item_socket_exe_title{
	color: #7401DF;
}

.item_ancient_title{
	color: #01DF01;
}

.item_ancient_background{
	background-color: #0000FF;
}

#inventoryc {
    background-image:url('../../default_assets/images/inventoryc_brown.png?v2');
    width:398px;
    height:320px;
	text-align:center;
	display: inline-block;
	position:relative; 
}
#inventoryc > img {
	position: absolute;
    top: 90px; left: 145px;
    border-radius: 50%;
    border: 3px solid var(--light-dark-color);
	width: 110px;
	height: 110px;
}
#inventoryc > div {
    position:absolute;
    background-repeat:no-repeat;
    background-position:center center;
}
/* Equipment slots.
   Every rule below is the INTERIOR of the slot rectangle drawn in the panel art
   (default_assets/images/inventoryc_brown.png, 398x320 -- gold outlines rgb(203,158,67)),
   measured from the image rather than eyeballed. Keep them in step: an item is drawn
   with background-position:center + background-size:contain, so a div wider than its
   drawn box makes the item spill over the border and read as "too big", and a div
   offset from its box leaves the item visibly off-centre in its placeholder. */
#in_weapon    { left:3px;   top:185px; width:71px;  height:133px; background-size: contain !important;}
#in_shield    { left:323px; top:185px; width:71px;  height:133px; background-size: contain !important;}
#in_helm      { left:71px;  top:1px;   width:57px;  height:69px;  background-size: contain !important;}
#in_armor     { left:35px;  top:75px;  width:82px;  height:101px; background-size: contain !important;}
#in_pants     { left:86px;  top:241px; width:57px;  height:77px;  background-size: contain !important;}
#in_gloves    { left:268px; top:122px; width:84px;  height:56px;  background-size: contain !important;}
#in_boots     { left:255px; top:241px; width:57px;  height:77px;  background-size: contain !important;}
#in_wings     { left:268px; top:2px;   width:126px; height:113px; background-size: contain !important;}
#in_zoo       { left:3px;   top:1px;   width:57px;  height:69px;  background-size: contain !important;}
#in_pendant   { left:230px; top:24px;  width:29px;  height:31px;  background-size: contain !important;}
#in_ring1     { left:98px;  top:195px; width:29px;  height:31px;  background-size: contain !important;}
#in_ring2     { left:268px; top:195px; width:29px;  height:31px;  background-size: contain !important;}
#in_pentagram { left:160px; top:238px; width:78px;  height:80px;  background-size: contain !important;}
#in_ear1      { left:3px;   top:75px;  width:29px;  height:31px;  background-size: contain !important;}
#in_ear2      { left:120px; top:75px;  width:29px;  height:31px;  background-size: contain !important;}
 .cworkshop{
	display: table;
	margin:  50px auto;
}
.cworkshop .inventoryy{
	background-image: url("../../default_assets/images/inv.png");
	height: 610px;
	width: 311px;
	display:block;
}
.cworkshop .equipment{
	background-image: url("../../default_assets/images/equipment.png?v1");
	height: 340px;
	width: 311px;
	display:block;
}
.cworkshop .item{
	position: absolute;
	/*top: 0px;*/
	margin-top:10px;
	margin-left:3px;
}
.cworkshop .item>div{
	cursor: pointer;
	border: solid 2px transparent;
}
div[id*="item-slot-occupied-"] img {
	background-color: rgba(31, 31, 31, 0.73);
	
}

div[id*="item-slot-occupied-"] img:hover {
	background-color: rgba(154, 60, 45, 0.43);
}
.cworkshop .item>div.selected{
	background-color: rgba(154, 60, 45, 0.43);
	border: solid 2px rgba(154, 60, 45, 0.44);
}

.cworkshop .item .hover_inv:hover{
	background-color: rgba(154, 60, 45, 0.43);
	border: solid 2px rgba(154, 60, 45, 0.44);
}
.cworkshop .title{
	margin-top: 13px;
	text-align: center;
	margin-bottom: 30px;
}
.aOverlay{
	z-index:998;
	position:fixed;
	background-color:#070a11;
	opacity:.8;
	width:100%;
	height:100%;
	top:0;
	left:0;
	cursor:pointer;
	display:none
}
.aModal{
	top: 20%;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 422px;
	height: 445px; 
	background-color:rgba(0,0,0,0);
	position:fixed;
	display:none;
	opacity:0;
	z-index:999;
	padding: 0px 60px;
}
.aBackground{
	height: 349px; 
	width: 305px; 
	border: 1px solid black; 
	margin-left: -2px; 
	margin-top: -2px; 
	padding: 0; 
	background: url('../../default_assets/images/artifact/background.png'); 
	background-repeat: no-repeat; 
	background-position: top left; 
	float: left; 
	position: relative; 
	text-align: center; 
	color: gold; 
	padding-top: 15px;
}
.pentaOverlay{
	z-index:998;
	position:fixed;
	background-color:#070a11;
	opacity:.8;
	width:100%;
	height:100%;
	top:0;
	left:0;
	cursor:pointer;
	display:none
}
.pentaModal{
	top: 20%;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 422px;
	height: 445px; 
	background-color:rgba(0,0,0,0);
	position:fixed;
	display:none;
	opacity:0;
	z-index:999;
	padding: 0px 60px;
}
.pentaBackground{
	height: 349px; 
	width: 311px; 
	border: 1px solid black; 
	margin-left: -2px; 
	margin-top: -2px; 
	padding: 0; 
	background: url('../../default_assets/images/elements2.png?v1'); 
	background-repeat: no-repeat; 
	background-position: top left; 
	float: left; 
	position: relative; 
	text-align: center; 
	color: gold; 
	padding-top: 15px;
}
.ranking-table th, .ranking-table td, .half table td{
	border: 1px solid #1A1D21; 
}

form table td, .item_table td, .each_item td, .full td, .form table td{
	border: 0px;
}

.ranking-table img{
	vertical-align: top !important;
	margin: 0;
	padding: 0;
	border: 0;
}
.ranking-table a{
	color: #ffd399 !important;
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
	background-color: transparent;
}

.dmn-account-table,  .dmn-rankings-table{
	border-collapse: collapse;
	border-spacing: 0;
	color: #fff;
	width: 100%;
}
.dmn-account-table thead tr, .dmn-rankings-table thead tr {
	background-color: var(--light-dark-color) !important;
}
.dmn-account-table tbody tr, .dmn-rankings-table tbody tr{
	position: relative;
	left: 0px;
	transition: 0.3s;
	background-color: var(--light-dark-color) !important;
}
.dmn-account-table tbody tr td, .dmn-rankings-table  tbody tr td {
	vertical-align: middle;
}
.dmn-account-table td, .dmn-rankings-table  td {
	border-top: none;
	color: #fff;
}
.dmn-account-table th, .dmn-rankings-table th {
	border-collapse: collapse;
	text-align: left;
	color: #fff;
	font-weight: bold;
	border-bottom: 0 !important;
}
.frcms-langIcon {
	width: 48px;
	height: 48px;
	pointer-events: none;
}

.rankings-player-class-img{
    height:auto
}
.rounded-image-corners{
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    -khtml-border-radius:50%
}
.dropdown-menu > button.btn{
    padding:0!important
}
.dropdown-menu > li > a{
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
		text-decoration: none;
}
.dropdown-menu > li > a:hover{
    color: #fff !important
}
.dmn-sidebar-box {
	padding: 32px 28px;
	background-color: var(--light-dark-color) !important;
	box-shadow: 0 0 40px 0 rgba(0,0,0,.06);
}
.dmn-sidebar-box-items{
	margin-top: 10px;
}
.dmn-sidebar-box-items a{
	display:block;
	line-height: 20px;
	text-decoration: none;
}
/*
.dmn-sidebar-box-items a:hover, .login_form a:hover, .registration_form a:hover, .additional-links a:hover{
	color: #ca9619;
}*/
.dmn-download-button, .dmn-donate-button{
	width: 100%;
}

.dmn-vault-grid-modern{
    position:relative;
    background-color:#0c0c0a;
    background-image:url(../../default_assets/images/vault-grid-bg.jpg);
    width:321px;
    min-height:600px;
    max-height:600px;
    border:1px solid #302f2a
}
.dmn-grid-item-modern{
    position:absolute;
    border-right:1px solid #171717;
    border-bottom:1px solid #171717;
    background-repeat:no-repeat;
    background-position:center
}
.nav-tabs {
	border-bottom: 1px solid #2D3137;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
	border-color: #2D3137;
	color: #fff;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: #fff;
	background-color: #2D3137;
	border-color: #2D3137;
}
.list-group-item-action:focus, .list-group-item-action:hover {
	background-color: transparent;
}

#timers {
	text-align: center;
	margin: 0 auto;
}
#timer_div_title {
	height: 45px;
	width: 100%;
	font-size: 18px;
	text-align: center;
	color: var(--default-color);
}
#timer_div_time {
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timmer_inner_block {
	width: 70px;
	height: 80px;
	background-color: var(--light-dark-color);
	margin: 2px;
	opacity: 1;
	padding: 2px;
}
#timer_div_time .timmer_inner_block .title{
	text-align:center;
	font-size: 14px;
	color: var(--default-color);
}

#timer_div_time .timmer_inner_block .count{
	text-align:center;
	font-weight: bold;
	font-size: 20px;
	padding-top:10px;
	color: var(--default-color);
}
.vbagde {
	position: absolute;
	top: -10px;
	right: -20px;
	padding: 2px;
	border-radius: 50px;
	color: #fff;
	font-size: 8px;
}
.vbadgeBronze{
	background-color: #CD7F32;
}
.vbadgeSilver{
	background-color: #C0C0C0;
}
.vbadgeGold{
	background-color: #FFD700;
}
.vbadgePlatinum{
	background-color: #0096ff;
}

.btn-primary {
	color: #fff;
	background: linear-gradient(to top, #080A0B, #2D3137);
	border: none !important;
	border-radius: 0  !important;
	box-shadow: none !important;
}
.nav-pills{
	opacity: 1 !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	
	color: #fff;
	background: linear-gradient(to top, #080A0B, #2D3137);
	border: none !important;
	border-radius: 0  !important;
	box-shadow: none !important;
}
.shop-product-list{
	margin: 0;
	padding: 0;
	list-style: none;
}
.shop-product-list-item{
	display: inline-block;
	vertical-align: top;
	width: 30%;
	padding: 15px;
	margin: 5px;
	margin-top: 0;
	background-color: var(--light-dark-color) !important;
}
.shop-product-list-item .thumb{
	height: 180px;	
}
.shop-product-list-item .thumb > img {
	vertical-align: middle;
}
.shop-product-list-item .detail {
  padding-top: 15px;
  border-top: solid 1px #393749;
}
.shop-product-list-item .detail .price {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 5px;
}
/* MuDream VIP tiers: package artwork, the duration selector and the perk comparison table. */
.vip-panel{
	background-color: var(--light-gray-color, #171920);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 4px;
	padding: 16px 18px;
	margin-bottom: 18px;
}
.vip-panel-title{
	margin: 4px 0 8px 0;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--body-color, rgba(240, 240, 255, .5));
}
.vip-tier-icon img{
	max-height: 110px;
	width: auto;
}
.store-card-vip .thumb img{
	max-height: 130px;
	width: auto;
}
/* Keep the VIP cards one visual row: equal height, buttons on a common line (scoped to the landing
   section, because the exclusive badge makes the first card taller than the other two). */
#store_subscriptions .shop-product-list{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
#store_subscriptions .shop-product-list-item{
	display: flex;
	flex-direction: column;
}
#store_subscriptions .shop-product-list-item .detail{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
#store_subscriptions .shop-product-list-item .detail > div.text-center:last-child{
	margin-top: auto;
}
/* Duration picker, styled like MuDream's: a dark pill with a chevron on the right. */
.vip-duration{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	margin: 0 auto 10px auto;
	width: auto;
	min-width: 132px;
	padding: 8px 36px 8px 18px;
	background-color: var(--light-dark-color, #0f1116) !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	border-radius: 22px !important;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.1;
	cursor: pointer;
}
.vip-duration:focus{
	outline: none;
	border-color: var(--default-color, #ba6356) !important;
}
.vip-duration option{
	background-color: var(--light-gray-color, #171920);
	color: #ffffff;
	font-weight: 400;
}
/* "What is included" marker: hover or tap the i to see the tier's comparison table. */
.vip-info{
	position: relative;
	display: inline-block;
	margin-left: 7px;
	font-size: 15px;
	line-height: 1;
	color: #9aa0a8;
	cursor: help;
	vertical-align: middle;
	transition: color .15s ease-in-out;
}
.vip-info:hover,
.vip-info:focus{
	color: #ffffff;
	outline: none;
}
.vip-info-tip{
	display: none;
	position: absolute;
	left: 50%;
	top: 150%;
	transform: translateX(-50%);
	z-index: 40;
	width: 252px;
	padding: 10px 12px;
	background-color: var(--light-gray-color, #171920);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 4px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .65);
	text-align: left;
}
.vip-info:hover .vip-info-tip,
.vip-info:focus .vip-info-tip{
	display: block;
}

/* The tip lives inside its card, so the card row (and the hovered card in it) is lifted above
   whatever follows - the "View all" pill and the next section - while the tip is open. */
.mud-shop .store-section ul:hover,
.mud-shop .store-section ul:focus-within,
.mud-shop ul:has(.vip-info:hover),
.mud-shop ul:has(.vip-info:focus){
	position: relative;
	z-index: 60;
}
.mud-shop .store-section ul > li:hover,
.mud-shop .store-section ul > li:focus-within,
.mud-shop ul > li:has(.vip-info:hover),
.mud-shop ul > li:has(.vip-info:focus){
	position: relative;
	z-index: 61;
}
.vip-info-row{
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	line-height: 1.7;
	color: #cfd3d8;
	font-weight: 400;
}
.vip-info-row .vip-info-value{
	color: #4caf50;
	font-weight: 600;
	margin-left: 10px;
	white-space: nowrap;
}
.vip-info-row.off{
	color: #6f757e;
}
.vip-info-row.off .vip-info-value{
	color: #6f757e;
	font-weight: 400;
}
.vip-exclusive{
	color: var(--yellow-color, #fec624);
	font-size: 12px;
	margin: 0;
}
.vip-perk-list li{
	font-size: 13px;
	line-height: 1.4;
}
.vip-perk-off{
	opacity: .6;
}
.vip-duration-links a{
	display: inline-block;
	margin: 0 6px 8px 0;
}

/* =====================================================================================
   Shop storefront, dressed in the SITE theme (same treatment as the Guides section):
   MuDream's measured geometry is kept, their navy palette is replaced by ours --
     panels   --light-gray-color #171920 over the --dark-color #0b0c10 page
     accent   --default-color #ba6356 / --default-color2 #a23e2f (gradient: --bs-gradient-5)
     success  --success-color #28a745 (granted perks, currency chips)
     type     --theme-font GothamSSm-Light
   Everything is scoped to .mud-shop so no other page is affected.
   Revert: pulsemucms.css.bak_pre_shop_sitetheme_20260924 (copy it back over this file).
   ================================================================================== */
.mud-shop{
	--md-font: var(--theme-font, 'GothamSSm-Light', sans-serif);
	--md-text: #ffffff;
	--md-text-secondary: var(--body-color, rgba(240, 240, 255, .5));
	--md-border: rgba(255, 255, 255, .08);
	--md-border-hover: rgba(186, 99, 86, .65);
	--md-item-green: var(--success-color, #28a745);
	--md-green-acent: #28a745;
	--md-main-bg: var(--dark-color, #0b0c10);
	--md-box-bg: var(--light-dark-color, #0f1116);
	--md-item-bg: var(--light-dark-color, #0f1116);
	--md-card-bg: linear-gradient(180deg, var(--light-gray-color, #171920) 0%, #101218 100%);
	--md-radius: 12px;
	--md-pill: 25px;
	--md-main-color: var(--default-color, #ba6356);
	--md-accent-grad: var(--bs-gradient-5, linear-gradient(to right, #a23e2f 0%, #ba6356 100%));
	--md-red: var(--error-color, #dc3545);
	--md-gray: #eff3f4;
	--md-btn-height: 44px;
	--md-btn-sm-height: 35px;
	font-family: var(--md-font);
}
.mud-shop .store-section .title{
	font-family: var(--md-font);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--md-text);
	margin-bottom: 4px;
}
.mud-shop .store-section p.text-muted{
	font-family: var(--md-font);
	font-size: 14px;
	color: var(--md-text-secondary) !important;
}
/* MuDream's .ShopSubscriptions_vip-block, values verbatim from their live stylesheet:
   padding 95px 8px 20px (95px 15px 20px >=1440px), radius 15px, border rgba(255,255,255,.12),
   max-width 280px, textured ::before (main.webp, gold tier yellow.webp), art absolutely placed at
   top centre with translateY(-30%), name in all-small-caps 16px/40px (32px >=1440px), the
   gradient separator, price b 800 var(--font-xxlg)=26px with a dark text-shadow. */
.mud-shop .store-card{
	position: relative;
	background: none !important;
	border: 1px solid var(--md-border) !important;
	border-radius: 15px !important;
	padding: 95px 8px 20px !important;
	margin: 5px !important;
}
.mud-shop .store-card-vip{
	max-width: 280px;
}
@media (min-width: 1440px){
	.mud-shop .store-card{
		padding: 95px 15px 20px !important;
	}
}
.mud-shop .store-card-vip::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 15px;
	/* site-theme surface instead of the MuDream navy texture (card_main.webp) */
	background: var(--md-card-bg);
	pointer-events: none;
}
.mud-shop .store-card > .detail{
	position: relative;
	z-index: 1;
}
.mud-shop .store-card .thumb{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-30%);
	z-index: 2;
	height: auto;
	width: auto;
}
.mud-shop .store-card .thumb img,
.mud-shop .store-card-vip .thumb img{
	max-height: none;
	width: auto;
}
.mud-shop .store-card .item-name{
	font-family: var(--md-font);
	position: relative;
	width: 100%;
	padding-top: 5px;
	color: #fff;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	text-transform: none;
	font-variant: all-small-caps;
	-webkit-font-feature-settings: "smcp", "c2sc";
	font-feature-settings: "smcp", "c2sc";
}
@media (min-width: 1440px){
	.mud-shop .store-card .item-name{
		font-size: 32px;
	}
}
.mud-shop .store-card .item-name::after{
	content: "";
	display: block;
	height: 1px;
	width: 100%;
	background: linear-gradient(90deg, rgba(186, 99, 86, 0), var(--default-color, #ba6356) 50%, rgba(186, 99, 86, 0));
}
.mud-shop .store-card .detail{
	border-top: none;
	padding: 0;
}
.mud-shop .store-card .price{
	font-family: var(--md-font);
	font-size: 16px;
	font-weight: 500;
	opacity: .95;
	color: var(--md-text-secondary);
}
.mud-shop .store-card .price strong{
	display: inline-block;
	font-size: 26px;
	font-weight: 800;
	line-height: 100%;
	color: #ffffff;
	text-shadow: rgba(0, 0, 0, .8) 1px 1px 5px;
	margin-right: 4px;
}
/* their info marker is 28px in --main-color (#FF9533 on the live theme) */
.mud-shop .vip-info{
	font-size: 20px;
	color: var(--md-main-color);
}
.mud-shop .vip-info:hover,
.mud-shop .vip-info:focus{
	color: #ffffff;
}
/* perk rows inside the tooltip, as their .ShopSubscriptions_option */
.mud-shop .vip-info-row{
	padding: 2px 5px;
	font-weight: 500;
	font-size: 16px;
	opacity: .8;
	border-bottom: 1px solid var(--md-border);
}
.mud-shop .vip-info-row .vip-info-value{
	color: var(--md-item-green);
	font-weight: 700;
	text-shadow: none;
}
.mud-shop .vip-info-row.off .vip-info-value{
	color: var(--md-gray);
	font-weight: 700;
	text-shadow: none;
}
/* Currency chip: the site's accent gradient badge (was MuDream's green Currency_cur). */
.mud-cur{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	background: var(--md-accent-grad, linear-gradient(to right, #a23e2f, #ba6356));
	border-radius: 20px;
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	color: #ffffff;
	vertical-align: middle;
}
.mud-cur i{
	color: #ffffff;
	font-size: 11px;
}
/* Their buttons: transparent pill that inverts to white (Button_btn) */
.mud-shop .store-card .item-buy,
.mud-shop .store-card a.vs-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	height: var(--md-btn-height);
	padding: 12px 20px;
	border: 1px solid var(--md-border-hover);
	border-radius: var(--md-pill);
	background: none !important;
	box-shadow: none !important;
	color: var(--md-text) !important;
	font-family: var(--md-font);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	transition: all .2s ease-in-out;
}
.mud-shop .store-card .item-buy:hover,
.mud-shop .store-card a.vs-btn:hover{
	background: var(--md-accent-grad) !important;
	border-color: var(--default-color, #ba6356);
	color: #ffffff !important;
}
/* Their green marks the value that a tier grants */
.mud-shop .vip-perk-list .text-success,
.mud-shop .vip-info-row .text-success,
.mud-shop .vip-perk-list i.text-success{
	color: var(--md-item-green) !important;
}
.mud-shop .vip-panel,
.mud-shop .vip-info-tip{
	font-family: var(--md-font);
}
.mud-shop .vip-info-row{
	color: var(--md-text);
}
.mud-shop .vip-info-row .vip-info-value{
	color: var(--md-item-green);
}
.mud-shop .vip-info-row.off{
	color: var(--md-text-secondary);
}
.mud-shop .vip-info-row.off .vip-info-value{
	color: var(--md-text-secondary);
}
/* Duration picker in their filled-select shape */
.mud-shop .vip-duration,
.mud-shop .vip-duration-links a{
	font-family: var(--md-font);
	font-size: 14px;
	font-weight: 700;
	border-radius: var(--md-pill) !important;
}
.mud-shop .vip-duration{
	min-width: 130px;
	height: var(--md-btn-sm-height);
	padding: 0 32px 0 16px !important;
	background-color: var(--md-box-bg) !important;
	border: 1px solid var(--md-border) !important;
	color: var(--md-text) !important;
	background-position: right 16px center !important;
}
.mud-shop .vip-duration:hover{
	border-color: var(--md-border-hover) !important;
}
.mud-shop .vip-duration-links a{
	height: var(--md-btn-sm-height);
	padding: 0 16px !important;
	border: 1px solid var(--md-border) !important;
	background: none !important;
	color: var(--md-text) !important;
	box-shadow: none !important;
}
.mud-shop .vip-duration-links a.gradient-btn,
.mud-shop .vip-duration-links a:hover{
	background: var(--md-accent-grad) !important;
	color: #ffffff !important;
	border-color: var(--default-color, #ba6356) !important;
}
.mud-shop .vip-exclusive,
.mud-shop .badge-info{
	font-family: var(--md-font);
}
.mud-shop .vip-panel{
	background: var(--md-card-bg);
	border: 1px solid var(--md-border);
	border-radius: var(--md-radius);
}
.mud-shop .vip-panel-title{
	color: var(--md-text-secondary);
	letter-spacing: .04em;
}
.mud-shop .vip-perk-list li{
	font-size: 14px;
	color: var(--md-text);
}
.mud-shop .vip-tier-icon img,
.mud-shop .store-card .thumb img{
	-webkit-filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}
/* --- Page chrome: section nav and standalone buttons, in their pill shape ---------- */
.mud-shop .shop-store-nav a{
	display: inline-flex;
	align-items: center;
	height: var(--md-btn-sm-height);
	padding: 0 16px !important;
	margin: 0 6px 8px 0;
	border: 1px solid var(--md-border);
	border-radius: var(--md-pill);
	font-family: var(--md-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--md-text) !important;
	background: none !important;
	text-decoration: none;
	transition: all .2s ease-in-out;
}
.mud-shop .shop-store-nav a:hover,
.mud-shop .shop-store-nav a.mirror.active{
	background: var(--md-accent-grad) !important;
	border-color: var(--default-color, #ba6356);
	color: #ffffff !important;
}
.mud-shop a.vs-btn:not(.item-buy),
.mud-shop button.vs-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--md-btn-height);
	padding: 12px 20px !important;
	border: 1px solid var(--md-border-hover) !important;
	border-radius: var(--md-pill) !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--md-text) !important;
	font-family: var(--md-font);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	text-decoration: none;
	transition: all .2s ease-in-out;
}
.mud-shop a.vs-btn:not(.item-buy):hover,
.mud-shop button.vs-btn:hover{
	background: var(--md-accent-grad) !important;
	border-color: var(--default-color, #ba6356) !important;
	color: #ffffff !important;
}
.mud-shop .store-card .store-card-sub,
.mud-shop .store-card .store-card-meta,
.mud-shop .store-card .store-card-options{
	font-family: var(--md-font);
	font-size: 13px;
	color: var(--md-text-secondary) !important;
}
/* A product note longer than a badge can hold (the VIP exclusivity line). It wraps inside its own
   card instead of overflowing the neighbouring one. */
.mud-shop .store-card .store-card-label{
	display: block;
	margin: 2px auto 0;
	max-width: 100%;
	font-family: var(--md-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 135%;
	color: var(--md-main-color);
	overflow-wrap: break-word;
}
.mud-shop .store-card .badge{
	font-family: var(--md-font);
	font-size: 12px;
	border-radius: var(--md-pill);
	padding: 3px 10px;
}
.card{
	background-color: transparent;
}
.list-group-item-action{
	color: #9b9b9b !important;
}
.list-group-item{
	color: #9b9b9b !important;
}
.title{
	font-size:24px;
}
.nav-link{
	color: #fff;
	padding: 0rem 1rem;
}
.add_to_card input[type=checkbox], .dmn-sidebar-box input[type=checkbox]{
    appearance: none;
    background-color: var(--white-color) !important;
    position: relative;
    cursor: pointer;
    display:inline-block;
    vertical-align:middle;
    width:15px;
    height:15px;
}
.dmn-sidebar-box input[type=radio]{
    appearance: none;
    background-color: var(--white-color) !important;
    position: relative;
    cursor: pointer;
    display:inline-block;
    vertical-align:middle;
    width:15px;
    height:15px;
	border-radius: 50%;
}
.add_to_card input[type="checkbox"]:checked, .dmn-sidebar-box input[type=checkbox]:checked, .dmn-sidebar-box input[type=radio]:checked {
      appearance: revert;
      accent-color: rgb(0, 0, 0);
}
.alertable-message{
	color: #000 !important;
}
.alertable-prompt .form-group{
	max-width: 260px !important;
}
.alertable-input{
	color: #000 !important;
}
.tab-content{
	background-color: #2D3137;
}
.panel-default .panel-heading{
	background-color: var(--dark-color);
	padding: 5px;
}
.dropdown-toggle::after {
  border: none;
  font-family: var(--icon-font);
  content: "\f078";
  vertical-align: 0;
  font-weight:700;
}
.boss-points-scrollbar {
	overflow-x: hidden;
	overflow-y: scroll;
	width: 100%!important;
	height: 350px!important;
}
.boss-points-scrollbar {
  scrollbar-height: thin!important;
  scrollbar-color: #fff #1B7FCC!important;
}
.boss-points-scrollbar::-webkit-scrollbar {
    width: 24px;
}
.boss-points-scrollbar::-webkit-scrollbar-track {
    background-color: none !important;
}
.boss-points-scrollbar::-webkit-scrollbar-thumb {
    width: 24px;
    height: 52px;
}
.boss-points-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.boss-points-scroll {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
.block-boss-ava span {
	position: relative;
	top: 10px;
	left: -98px;
	background: #0a238a;
	border-radius: 25px;
	height: 30px;
	box-shadow: 0 4px 0 0 rgb(0 0 0/50%);
	color: #fff;
}
.block-boss-ava span i{
	padding: 1px 4px 2px;
	color: #fff;
}
.arrow {
  position: absolute;
  top: 24px;
  width: 40px;
  height: 38px;
  padding: 0;
  border: none;
  display: block;
}
.arrow.prev.active {
  top: 25px!important;	
  left: -35px!important;
  background: url(../images/prev-button.png) no-repeat;
}
.arrow.prev.disabled {
  left: -35px!important;
  top: 25px!important;
  background: url(../images/prev-button.png) no-repeat;
  cursor: default;
  -webkit-filter: brightness(75%);
  filter: brightness(75%);
}
.arrow.next {
  top: 25px!important;
  right: -20px!important;
  background: url(../images/next-button.png) no-repeat;
}
.arrow:focus {
  outline: none;
}
.fieldGroup {
    position: relative;
    margin: 20px 0
}
.fieldGroup input {
    width: 100%;
    height: 100%
}
.fieldGroup span {
	position: absolute;
	color: #696868;
	font-size: 11px;
	z-index: 1;
	display: block;
	padding: 5px;
	background: #040609;
	left: 10px;
	top: -12px;
	text-transform: uppercase
}
.fieldGroup:hover span {
	color: #fc9162;
	text-shadow: 1px 1px 10px #fc9162, -1px -1px 10px #fc9162
}

.news-content tr, .news-content td, .news-content th{
	border-width:thin !important;
}
.block-boss-rank span {
    font-size: 18px;
    position: relative;
    top: -8px;
    left: 4px;
    background: var(--default-color);
    border-radius: 25px;
    height: 10px;
    padding-left: 4px;
    padding-right: 4px;
    box-shadow: 0 4px 0 0 rgb(0 0 0/50%);
    color: #fff;
}
.ClassAvatar {
    position: relative;
    display: inline-flex;
    align-items: center
}
.ClassAvatar img {
	width: 45px;
	height: 46px;
	position: relative;
	overflow: hidden;
	z-index: 2;
	border-radius: 50%;
	top: 38px;
	right: 30px;
}
.ClassAvatar-frame-boss.ClassAvatar-top1 {
    background-image: url(../images/icons/rating1.webp);
}
.ClassAvatar-frame-boss.ClassAvatar-top2 {
    background-image: url(../images/icons/rating2.webp);
}
.ClassAvatar-frame-boss.ClassAvatar-top3 {
    background-image: url(../images/icons/rating3.webp);
}
.ClassAvatar-frame-boss.ClassAvatar-top30 {
    background-image: url(../images/icons/rating30.webp);
}
.ClassAvatar-frame-boss {
	width: 107px;
	height: 107px;
	background-size: cover;
	background-position: 50%;
	z-index: 1;
}
.text-boss-end {
    text-align: right!important;
}
.text-boss-start {
    text-align: left!important;
}

.text-boss-muted {
    color: #ff9f4a!important;
	white-space: nowrap;
}
#week option {
	font-size: 13px;
}
#week optgroup {
	font-size: 13px;
}
.monster-wrapper {
	position: relative;
	margin: 0 auto;
	max-width: 600px;
}
#monsters	{
	box-sizing: border-box;
	overflow-x: hidden;
	display: flex;
	.mitem {
		display: block;
		outline: 1px dotted gray;
		padding: 1em;
		box-sizing: border-box;
	}
}
.paddle {
	position: absolute;
	top: 15px;
	bottom: 0;
}
#left-paddle {
	left: 0;
}
#right-paddle {
	right: 0;
}
.mitem {
	white-space: nowrap;
	float: left;
    list-style-type: none;
	width: 100px;
}
.payment-modal {
	display: none;
	position: fixed;
	z-index: 9999; 
	top: 0;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 100%;
	height: 100%; 
	overflow: auto; 
	background-color: rgba(0, 0, 0, 0); 
	border: 0;
	padding-top:0 !important;
}
#captchaModal {
    display: none;
    width: 400px;
    max-width: 90%;
    padding: 15px;
    background: #171920;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	position: fixed; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
	z-index:10000;
}
#captchaModal iframe {
    width: 100%;
    border: none;
}
#captchaClose{
	position: absolute; 
	top: 8px; 
	right: 12px; 
	background: none; 
	border: none; 
	font-size: 18px; 
	cursor: pointer;
	color:#fff;
}

/* Blank line between tooltip option groups, matching the in-game spacing. */
.item_tooltip_gap{
	height: 9px;
	line-height: 9px;
	font-size: 0;
}

/* ============================================================================
   Character page: stats widget, Gear Score / Inventory tabs, inventory grids.
   Laid out after MuDream's /char/{name} page (CharStatsWidget, CharEquipment and
   the Gear Score|Inventory switcher), fitted to this template's dark palette.
   ============================================================================ */

.char-stats{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
.char-stat{
	flex: 1 1 110px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	background: var(--light-dark-color);
	border-left: 3px solid #6c757d;
	border-radius: 3px;
}
.char-stat-name{
	font-size: 13px;
	letter-spacing: 1px;
	color: #9aa3b2;
	text-transform: uppercase;
}
.char-stat-value{
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}
.char-stat-str{ border-left-color: #d9534f; }
.char-stat-agi{ border-left-color: #5cb85c; }
.char-stat-vit{ border-left-color: #f0ad4e; }
.char-stat-ene{ border-left-color: #5bc0de; }
.char-stat-cmd{ border-left-color: #b07cd6; }
/* Free points carry a full label rather than a 3-letter abbreviation, so it needs more
   room and none of the uppercase/letter-spacing treatment the STR/AGI/... chips get. */
.char-stat-free{ flex-basis: 230px; border-left-color: #ffcc1a; }
.char-stat-free .char-stat-name{ text-transform: none; letter-spacing: 0; }
.char-stat-free .char-stat-value{ color: #ffcc1a; }

/* Tab strip */
.char-tabs{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 0 0 10px 0;
	list-style: none;
}
.char-tab{
	padding: 8px 18px;
	background: var(--light-dark-color);
	color: #9aa3b2;
	font-size: 14px;
	cursor: pointer;
	border-radius: 3px;
	user-select: none;
}
.char-tab:hover{ color: #fff; }
.char-tab.active{
	background: #610000;
	color: #fff;
	font-weight: bold;
}
.char-pane{ display: none; }
.char-pane.active{ display: block; }

/* Inventory grid: 32px cells, items absolutely placed over them */
.char-inv-grid{
	position: relative;
	margin: 15px auto;
	background: rgba(0, 0, 0, 0.35);
}
.char-inv-cell{
	position: absolute;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.char-inv-item{
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	border: 1px solid rgba(255, 204, 26, 0.25);
	cursor: help;
}
.char-inv-item img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.char-inv-empty{
	padding: 30px 0;
	text-align: center;
	color: #9aa3b2;
	font-size: 15px;
}

/* Gear Score panel */
.char-score-total{
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	padding: 18px 0 10px 0;
}
.char-score-label{
	font-size: 15px;
	letter-spacing: 1px;
	color: #9aa3b2;
	text-transform: uppercase;
}
.char-score-value{
	font-size: 34px;
	font-weight: bold;
	color: #c58cff;
}
.char-score-table{
	width: 100%;
	color: #d7dbe2;
	font-size: 13px;
}
.char-score-table th{
	color: #9aa3b2;
	font-weight: normal;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 6px 8px;
}
.char-score-table td{
	padding: 6px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.char-score-table .text-right{ text-align: right; }
.char-score-slot{ color: #9aa3b2; }
.char-score-cell{ color: #c58cff; font-weight: bold; }
.char-score-item{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: help;
}
.char-score-item img{
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* Summed options list beside the Gear Score, after MuDream's ArmoryScoreBlock. */
.char-options-list{
	margin: 10px 0 25px 0;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 3px;
}
.char-options-title{
	margin-bottom: 10px;
	padding-bottom: 8px;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #9aa3b2;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.char-options-group{ margin-bottom: 10px; }
.char-options-group:last-child{ margin-bottom: 0; }
.char-option-item{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 13px;
	color: #d7dbe2;
}
.char-option-label{ font-weight: normal; }
.char-option-value{ font-weight: bold; white-space: nowrap; }


/* Online/offline indicator on the rankings, same idea as MuDream's 24px badge: a dot in front of
   the character name, green while that character is the one connected, dim red when it is not.
   The data is already in the ranking payload ('status' = ConnectStat AND GameIDC = character). */
.rank-status{
	/* the theme pads every <span> inside a ranking cell (7px 15px), which would stretch the dot */
	display:inline-block;
	padding:0!important;
	width:10px!important;
	height:10px!important;
	flex:0 0 auto;
	border-radius:50%;
	margin-right:7px;
	vertical-align:middle;
	position:relative;
	top:-1px;
	background:#4a4f5a;
	box-shadow:0 0 0 2px rgba(255,255,255,.06);
}
.rank-status.is-online{
	background:#00ff55;
	box-shadow:0 0 0 2px rgba(0,255,85,.18), 0 0 8px rgba(0,255,85,.75);
	animation:rank-status-pulse 2s ease-in-out infinite;
}
.rank-status.is-offline{
	background:#8c3a34;
	box-shadow:0 0 0 2px rgba(186,99,86,.15);
}
@keyframes rank-status-pulse{
	0%,100%{box-shadow:0 0 0 2px rgba(0,255,85,.18), 0 0 8px rgba(0,255,85,.75)}
	50%{box-shadow:0 0 0 2px rgba(0,255,85,.28), 0 0 12px rgba(0,255,85,.95)}
}
.rank-status-lbl{font-size:11px;font-weight:700;color:#00ff55;margin-right:6px;vertical-align:middle}

/* Gear Score column on the player rankings (replaces the class-name column; the class is
   already shown by the avatar in the rank cell). Value = Mcharacter::gear_score_total(), the
   same total the character page shows, computed in the TopPlayers task. */
.rank-gs-cell{
	text-align:left!important;
	padding-left:20px!important;
	white-space:nowrap;
}
.rank-gs-cell .rank-gs{
	display:inline-block;
	padding:5px 12px 4px!important;
	font-size:14px;
	font-weight:700;
	letter-spacing:.3px;
	color:#fff;
	background:linear-gradient(to right, rgba(162,62,47,.85), rgba(186,99,86,.85));
	border-radius:3px;
	text-align:center;
	min-width:74px;
}
.rank-gs-cell .rank-gs i{
	font-size:11px;
	margin-right:6px;
	opacity:.85;
}

/* Header row of the player rankings: the same five cells as a data row (so the labels line up
   with the columns underneath), painted as plain muted text like the LVL/RES/ML/Loc labels. */
.rank-head .cell-ranking{
	background:transparent!important;
	color:rgba(255,255,255,.5);
	font-size:12px;
	font-weight:400;
	padding-top:0;
	padding-bottom:0;
	text-align:left;
	white-space:nowrap;
}
/* Same widths/paddings as the data cells so each label starts where its column content starts:
   rank cell 56px (the data rows force min-width 56px), name cell 15px in, guild cell 0 (the
   mark sits flush left), gear score 20px in (.rank-gs-cell). */
.rank-head .cell-ranking:nth-child(1){
	background:none!important;
	flex:0 0 56px;
	min-width:56px;
}
.rank-head .cell-ranking:nth-child(2){
	padding-left:15px;
	padding-right:30px;
}
.rank-head .cell-ranking:nth-child(3){
	padding-left:0;
	padding-right:0;
}
/* the data rows' stats cell is held at 335px by its 300px table + 35px padding; the header's
   table is floated, so it does not count and the cell came out 20px narrower, pushing the
   other header cells right of their columns */
.rank-head .cell-ranking.rank-stats-cell{
	min-width:365px;
}
/* Both stat tables (header labels and data badges) get the same fixed column grid, otherwise
   the data table's auto layout widens columns to fit the badges and the labels drift. 330px
   = 66/66/66/132 for the 20/20/20/40 classes, wide enough for a 56px badge + 9px cell padding. */
.rank-head .cell-ranking.rank-stats-cell table,
.ranking-2 .row-ranking .cell-ranking.rank-stats-cell table{
	table-layout:fixed;
	width:330px!important;
	min-width:330px!important;
}
/* LVL / RES / ML / Loc: labels and values both start at the left edge of their table cell, so
   each label sits over the left edge of its badge (same rule as Name / Guild / Gear Score). */
.rank-head .cell-ranking.rank-stats-cell td,
.ranking-2 .row-ranking .cell-ranking.rank-stats-cell td{
	text-align:left!important;
}
/* the theme's header table floats right with a -20px margin (mr-20-off); the data table does
   neither, so the header sat 20px to the right of the values */
.rank-head .cell-ranking.rank-stats-cell table{
	float:none!important;
	margin-right:0!important;
}
/* Labels start at the left edge of their column content, MuDream-style (Character / Guild /
   Grade Score are all left-anchored on their ranking). The theme pads and tints every <span>
   inside a ranking cell, so that is undone here. */
.rank-head .cell-ranking .rank-head-lbl{
	display:inline;
	padding:0!important;
	background:none!important;
	border-radius:0;
	font-size:12px;
	color:inherit;
	text-align:left;
}

/* ==========================================================================
   Boss kill rating (rank_bosses.ejs) - MuDream "Rankings > Bosses" parity:
   rating cell with a "Rating details" button, league pills, slide-in drawer.
   Shares the player-ranking row chrome above (.rank-head, .rank-gs-cell, .rank-stats-cell).
   ========================================================================== */
.rank-rating-cell{
	text-align:left!important;
	padding-left:14px!important;
	white-space:nowrap;
	min-width:132px;
}
.rank-rating-cell .rank-rating{
	display:inline-block;
	padding:0!important;
	background:none!important;
	min-width:58px;
	font-size:16px;
	font-weight:700;
	letter-spacing:.3px;
	color:#f1d436;
	vertical-align:middle;
}
/* MuDream drawer button (Button main+square+icon-only, RankingsTables_drawer-btn), live computed values
   in MuDreamReference/Mix/wiki/rankings_guild/drawer_btn_styles.json: 18px list icon + 5px padding,
   radius 10px, #ef5e06 (hover #c24c06) under their orange radial highlight; 22px icon from 1920px */
.rank-rating-btn{
	--icon-size:18px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-left:15px;
	padding:5px;
	color:#fff;
	background:radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(255,113,28,.5) 0%, rgba(255,113,28,0) 100%), #ef5e06;
	box-shadow:inset 0 2px 2px 0 rgba(255,255,255,.3), inset 0 -2px 2px 0 rgba(57,9,9,.3), 0 5px 10px 0 rgba(243,29,29,.25), 0 10px 20px 0 rgba(243,29,29,.1);
	border:0;
	border-radius:10px;
	cursor:pointer;
	vertical-align:middle;
	transition:all .2s ease-in-out;
}
.rank-rating-btn:hover{background:radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(255,113,28,.5) 0%, rgba(255,113,28,0) 100%), #c24c06}
.rank-rating-btn .mdr-list-icon{display:block;width:var(--icon-size);height:var(--icon-size);transition:transform .2s ease-in-out}
@media (min-width:1920px){ .rank-rating-btn{--icon-size:22px} }
.rank-head .cell-ranking.rank-rating-cell{padding-left:14px}

/* five stat columns (LVL / ML / RES / GR / Loc) instead of the player table's four */
.rank-bosses .rank-head .cell-ranking.rank-stats-cell table,
.rank-bosses .ranking-2 .row-ranking .cell-ranking.rank-stats-cell table{
	width:310px!important;
	min-width:310px!important;
}
.rank-bosses .rank-head .cell-ranking.rank-stats-cell{min-width:330px}
.rank-bosses .rank-c-s{width:53px}
.rank-bosses .rank-c-loc{width:98px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-bosses .rank-stat{
	display:inline-block;
	min-width:36px;
	padding:3px 6px!important;
	text-align:center;
	border-radius:3px;
	background:linear-gradient(to right, #a23e2f, #ba6356)!important;
}

/* leagues: 100 ranks per pill, like theirs (Platinum 1-100 ... Bronze 301-400) */
.rank-leagues{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.rank-league{
	flex:1 1 160px;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	padding:9px 14px;
	color:rgba(255,255,255,.6);
	background:#0f1116;
	border:0;
	border-left:3px solid transparent;
	border-radius:3px;
	cursor:pointer;
	transition:background .15s ease, color .15s ease;
}
.rank-league:hover{color:#fff}
.rank-league.active{color:#fff;background:linear-gradient(to right, #561f1f, #a23e2f)}
.rank-league-name{font-size:13px;font-weight:700}
.rank-league-range{font-size:12px;opacity:.75}
.rank-league-platinum{border-left-color:#cfe3ee}
.rank-league-golden{border-left-color:#f1d436}
.rank-league-silver{border-left-color:#a9adb5}
.rank-league-bronze{border-left-color:#c47a4a}

/* "Rating details" drawer */
.boss-drawer{
	position:fixed;
	inset:0;
	z-index:10050;
	background:rgba(0,0,0,0);
	visibility:hidden;
	transition:background .2s ease, visibility 0s linear .2s;
}
.boss-drawer.open{background:rgba(0,0,0,.6);visibility:visible;transition:background .2s ease}
.boss-drawer-panel{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:420px;
	max-width:100%;
	display:flex;
	flex-direction:column;
	padding:24px 22px;
	background:#171920;
	border-left:1px solid rgba(186,99,86,.35);
	box-shadow:-12px 0 40px rgba(0,0,0,.5);
	transform:translateX(100%);
	transition:transform .22s ease;
	font-family:var(--theme-font, inherit);
	-webkit-font-smoothing:antialiased;
	color:rgba(240,240,255,.85);
}
.boss-drawer.open .boss-drawer-panel{transform:translateX(0)}
.boss-drawer-title{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:700;color:#fff}
.boss-drawer-close{width:32px;height:32px;padding:0;font-size:24px;line-height:30px;color:rgba(255,255,255,.6);background:none;border:0;cursor:pointer}
.boss-drawer-close:hover{color:#fff}
.boss-drawer-who{display:flex;align-items:center;gap:12px;margin-top:18px}
.boss-drawer-rank{min-width:34px;font-size:22px;font-weight:700;color:#f1d436}
.boss-drawer-avatar{width:56px;height:56px;flex:0 0 56px;background:#0f1116 no-repeat center/cover;border-radius:3px}
.boss-drawer-name{font-size:18px;font-weight:700;color:#fff}
.boss-drawer-name:hover{color:var(--default-color, #ba6356)}
.boss-drawer-total{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:20px 0 10px;
	padding:10px 14px;
	font-size:15px;
	font-weight:700;
	color:#fff;
	background:linear-gradient(to right, #561f1f, #a23e2f);
	border-radius:3px;
}
.boss-drawer-score{font-size:17px;color:#f1d436}
.boss-drawer-list{flex:1 1 auto;overflow-y:auto;margin-right:-8px;padding-right:8px}
.boss-drawer-item{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.boss-drawer-mob{width:44px;height:48px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;background:#0f1116;border-radius:3px}
.boss-drawer-img{max-width:40px;max-height:47px}
.boss-drawer-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.boss-drawer-boss{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boss-drawer-count{font-size:12px;color:rgba(255,255,255,.55)}
.boss-drawer-count b{color:rgba(255,255,255,.9);font-weight:700}
.boss-drawer-points{font-size:15px;font-weight:700;color:#f1d436}
/* The rows are flex containers and every cell is `flex:1`, so header and data rows share
   out the free width differently unless the fixed-content columns opt out of growing.
   Name and Guild stay elastic (same 1.4 : 1 split in both rows). */
.rank-bosses .cell-ranking.rank-gs-cell{flex:0 0 118px;padding-left:12px!important;padding-right:8px}
/* v1.css caps .cell-ranking:nth-child(5) at max-width:100px */
.rank-bosses .cell-ranking.rank-rating-cell{flex:0 0 126px;max-width:none;padding-right:6px;color:#fff;background-color:#0f1116}
.rank-bosses .cell-ranking.rank-stats-cell{flex:0 0 330px;min-width:330px;padding-left:10px;padding-right:10px;color:#fff;background-color:#0f1116}
.rank-bosses .rank-head .cell-ranking.rank-rating-cell,
.rank-bosses .rank-head .cell-ranking.rank-stats-cell{background:transparent!important}
/* v1.css forces text-align:right!important on .cell-ranking:nth-child(5) (0,2,0) - outrank it */
.rank-bosses .row-ranking .cell-ranking.rank-rating-cell{text-align:left!important}
/* the guild mark floats; keep the name beside it instead of wrapping under it */
.rank-bosses .row-ranking .cell-ranking:nth-child(3){flex:1.1 1 0%;white-space:nowrap;overflow:hidden}
.rank-bosses .row-ranking .cell-ranking:nth-child(2){flex:1.3 1 0%;padding-right:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-bosses .rank-head .cell-ranking.rank-gs-cell{padding-left:12px!important}
.rank-bosses .rank-head .cell-ranking.rank-rating-cell{color:rgba(255,255,255,.5)}
.rank-bosses .rank-head .cell-ranking.rank-stats-cell td{padding-top:0;padding-bottom:0;line-height:1.5}

/* =====================================================================================
   MuDream .ShopItemBox_item-box (items, buffs, consumables, bundles) - values verbatim
   from their live stylesheet. The VIP card keeps its own .ShopSubscriptions_vip-block
   rules above; these are more specific and come later, so they win for non-VIP kinds.
   ================================================================================== */
.mud-shop .store-card-item,
.mud-shop .store-card-service,
.mud-shop .store-card-bundle,
.mud-shop .store-card-start_pack{
--md-w: 190px;
--md-img: 92px;
position: relative;
overflow: visible;
display: inline-flex;
vertical-align: top;
width: var(--md-w) !important;
max-width: var(--md-w);
border: 1px solid var(--md-border) !important;
border-radius: 15px !important;
padding: calc(var(--md-img) / 2 + 5px) 5px 5px !important;
margin: calc(var(--md-img) / 2) 5px 5px !important;
background: none !important;
}
.mud-shop .store-card-item::before,
.mud-shop .store-card-service::before,
.mud-shop .store-card-bundle::before,
.mud-shop .store-card-start_pack::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
background: var(--md-card-bg);
pointer-events: none;
}
.mud-shop .store-card-item .thumb,
.mud-shop .store-card-service .thumb,
.mud-shop .store-card-bundle .thumb,
.mud-shop .store-card-start_pack .thumb{
position: absolute;
top: calc(var(--md-img) / 2 * -1);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: var(--md-img);
height: var(--md-img);
background: var(--dark-color, #0b0c10);
border-radius: 50%;
z-index: 2;
}
.mud-shop .store-card-item .thumb::before,
.mud-shop .store-card-service .thumb::before,
.mud-shop .store-card-bundle .thumb::before,
.mud-shop .store-card-start_pack .thumb::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 85%;
height: 85%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(180deg, #ba6356, #6e332a);
border: 2px solid rgba(255, 255, 255, .25);
border-radius: 50%;
z-index: -1;
}
.mud-shop .store-card-item .thumb img,
.mud-shop .store-card-service .thumb img,
.mud-shop .store-card-bundle .thumb img,
.mud-shop .store-card-start_pack .thumb img{
max-width: 80%;
max-height: 80%;
width: auto;
}
.mud-shop .store-card-item .detail,
.mud-shop .store-card-service .detail,
.mud-shop .store-card-bundle .detail,
.mud-shop .store-card-start_pack .detail{
position: relative;
z-index: 1;
display: flex;
flex-flow: column;
justify-content: space-between;
flex-grow: 1;
padding: 10px;
border-top: none;
border-radius: 10px;
overflow: hidden;
}
.mud-shop .store-card-item .item-name,
.mud-shop .store-card-service .item-name,
.mud-shop .store-card-bundle .item-name,
.mud-shop .store-card-start_pack .item-name{
text-align: center;
font-size: 14px;
line-height: 20px;
font-weight: 700;
padding-top: 0;
font-variant: normal;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
}
.mud-shop .store-card-item .item-name::after,
.mud-shop .store-card-service .item-name::after,
.mud-shop .store-card-bundle .item-name::after,
.mud-shop .store-card-start_pack .item-name::after{
display: none;
}
.mud-shop .store-card-item .price,
.mud-shop .store-card-service .price,
.mud-shop .store-card-bundle .price,
.mud-shop .store-card-start_pack .price{
font-size: 14px;
opacity: 1;
}
.mud-shop .store-card-item .price strong,
.mud-shop .store-card-service .price strong,
.mud-shop .store-card-bundle .price strong,
.mud-shop .store-card-start_pack .price strong{
font-size: 16px;
font-weight: 700;
text-shadow: none;
}
.mud-shop .store-card-item .divider,
.mud-shop .store-card-service .divider,
.mud-shop .store-card-bundle .divider,
.mud-shop .store-card-start_pack .divider{
width: 100%;
height: 1px;
background: var(--md-border);
}
.mud-shop .store-card-item a.vs-btn,
.mud-shop .store-card-service a.vs-btn,
.mud-shop .store-card-bundle a.vs-btn,
.mud-shop .store-card-start_pack a.vs-btn{
width: 50%;
min-width: 0;
margin: 0 auto;
padding: 5px 8px !important;
height: auto;
text-transform: uppercase;
justify-content: center;
border-radius: var(--md-pill) !important;
}
/* their section header: .ShopPage_block-title (h4 + icon, centred subtitle with orange <b>) */
.mud-shop .store-section h3.title{
font-size: 38px;
font-weight: 700;
line-height: 100%;
text-align: center;
color: #fff;
margin: 5px auto;
gap: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.mud-shop .store-section h3.title img{
width: auto;
height: 42px;
}
.mud-shop .store-section p.text-muted{
margin: 0;
color: rgba(255, 255, 255, .7) !important;
text-align: center;
font-size: 16px;
font-weight: 600;
line-height: 120%;
text-shadow: rgba(0, 0, 0, .3) 0 4px 79.8px;
}
.mud-shop .store-section p.text-muted b{
color: var(--md-main-color);
}

/* =====================================================================================
   Section header, on every storefront page (landing and the category listings).

   .store-header is the shared partial, so these rules cannot rely on .store-section
   (a listing page has no section wrapper): they repeat what is needed and win for both.
   The icon slot holds MuDream's icon either as an <img> or as a Font Awesome glyph.
   ================================================================================== */
.mud-shop .store-header{
text-align: center;
margin: 5px 0 20px;
}
.mud-shop .store-header h3.title,
.mud-shop .store-section h3.title{
font-family: var(--md-font);
font-size: 38px;
font-weight: 700;
line-height: 100%;
color: var(--md-text);
margin: 5px auto;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.mud-shop .store-header h3.title img,
.mud-shop .store-section h3.title img{
width: auto;
height: 42px;
}
.mud-shop .store-header h3.title i,
.mud-shop .store-section h3.title i{
font-size: 34px;
line-height: 42px;
color: var(--md-main-color);
}
.mud-shop .store-header p.text-muted,
.mud-shop .store-section p.text-muted{
margin: 0;
color: rgba(255, 255, 255, .7) !important;
text-align: center;
font-size: 16px;
font-weight: 600;
line-height: 120%;
font-family: var(--md-font);
}
.mud-shop .store-header p.text-muted b,
.mud-shop .store-section p.text-muted b{
color: var(--md-main-color);
}
/* The section's "View all" sits under the card row, centred, in their pill shape. */
.mud-shop .store-section-more{
text-align: center;
margin: 20px 0 5px;
}
.mud-shop .store-section{
margin-bottom: 45px;
}
.mud-shop .store-section:last-child{
margin-bottom: 10px;
}

/* =====================================================================================
   Compact product rows - MuDream's buff / consumable shape.

   Their Buffs and Consumables are NOT cards: each row is a wide strip with the thumbnail
   on the left, the name and the duration/effect in the middle and the price plus the
   action button on the right. `view.store_row.php` renders one, so a listing switches
   between the two shapes purely by which partial it loops over.
   ================================================================================== */
.mud-shop .shop-row-list{
margin: 0;
padding: 0;
list-style: none;
}
.mud-shop .store-row{
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
margin: 0 0 10px;
border: 1px solid var(--md-border);
border-radius: var(--md-radius);
background: var(--md-card-bg);
font-family: var(--md-font);
}
.mud-shop .store-row:hover{
border-color: var(--md-border-hover);
}
.mud-shop .store-row .row-thumb{
flex: 0 0 auto;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--dark-color, #0b0c10);
border-radius: 10px;
overflow: hidden;
}
.mud-shop .store-row .row-thumb img{
max-width: 90%;
max-height: 90%;
width: auto;
height: auto;
}
.mud-shop .store-row .row-body{
flex: 1 1 auto;
min-width: 0;
}
.mud-shop .store-row .row-name{
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 130%;
color: var(--md-text);
}
.mud-shop .store-row .row-meta{
margin: 2px 0 0;
font-size: 13px;
line-height: 130%;
color: var(--md-text-secondary) !important;
}
.mud-shop .store-row .row-side{
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 14px;
}
.mud-shop .store-row .row-price{
margin: 0;
font-size: 14px;
white-space: nowrap;
color: var(--md-text-secondary);
}
.mud-shop .store-row .row-price strong{
display: inline-block;
font-size: 18px;
font-weight: 700;
color: var(--md-text);
margin-right: 4px;
}
.mud-shop .store-row .row-price s{
margin-left: 6px;
opacity: .6;
}
.mud-shop .store-row .item-buy,
.mud-shop .store-row a.vs-btn{
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--md-btn-sm-height);
min-width: 92px;
padding: 0 18px !important;
border: 1px solid var(--md-border-hover) !important;
border-radius: var(--md-pill) !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
color: var(--md-text) !important;
font-family: var(--md-font);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all .2s ease-in-out;
}
.mud-shop .store-row .item-buy:hover,
.mud-shop .store-row a.vs-btn:hover{
background: var(--md-accent-grad) !important;
border-color: var(--default-color, #ba6356) !important;
color: #ffffff !important;
}
@media (max-width: 767px){
.mud-shop .store-row{
flex-wrap: wrap;
}
.mud-shop .store-row .row-side{
width: 100%;
justify-content: space-between;
}
}

/* =====================================================================================
   Skin Packs - MuDream's .ShopSkinPacks_item card, values taken from their own
   component stylesheet now that it is available (MuDreamReference/WebShop/).

   A rarity tint is what a pack is graded by: `usual` is the white-border grey gradient, `rare`
   the purple one, `super-rare` the red one, and the base (ungraded) card keeps the orange tint.
   The ACP's free-text `label` selects the tint, so packs can be graded as data.
   ================================================================================== */
.mud-shop .shop-skin-grid{
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-gap: 5px;
gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.mud-shop .store-skin-card{
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 20px;
border: 1px solid var(--md-border);
background: linear-gradient(180deg, #0b0c10 61.19%, #2a1210 87.5%);
box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .12);
font-family: var(--md-font);
}
.mud-shop .store-skin-usual{
border: 1px solid rgba(255, 255, 255, .24);
background: linear-gradient(180deg, #0b0c10 61.19%, #232329 87.5%);
}
.mud-shop .store-skin-rare{
border: 1px solid rgba(220, 66, 255, .52);
background: linear-gradient(180deg, #000 61.19%, #61067a 87.5%);
box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .12), 0 0 16px 0 rgba(208, 0, 255, .25);
}
.mud-shop .store-skin-super-rare{
border: 1px solid rgba(255, 66, 69, .52);
background: linear-gradient(180deg, #000 61.19%, #8a0a0c 87.5%);
box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .12), 0 0 16px 0 rgba(255, 0, 4, .25);
}
/* their `-N%` ribbon: an orange tab clipped to a point on its left edge */
.mud-shop .store-skin-price-label{
position: absolute;
top: 15px;
right: 0;
display: flex;
align-items: center;
justify-content: center;
height: 24px;
z-index: 1;
padding: 0 5px 0 16px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: linear-gradient(90deg, #a23e2f, #ba6356);
color: #fff;
font-size: 12px;
font-weight: 700;
-webkit-clip-path: polygon(15% 50%, 0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(15% 50%, 0 0, 100% 0, 100% 100%, 0 100%);
}
.mud-shop .store-skin-preview{
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 180px;
overflow: hidden;
padding-bottom: 5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: linear-gradient(180deg, #0b0c10 61.19%, #2a1210 87.5%);
box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .12);
}
.mud-shop .store-skin-preview img{
width: 100%;
height: 180px;
max-width: 100%;
object-fit: cover;
border-radius: inherit;
}
.mud-shop .store-skin-body{
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 5px 10px 10px;
}
.mud-shop .store-skin-name{
margin: 0;
min-height: 30px;
padding: 0 10px;
color: #fff;
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-weight: 800;
line-height: 100%;
}
.mud-shop .store-skin-sub,
.mud-shop .store-skin-meta{
margin: 4px 0 0;
color: var(--md-text-secondary);
text-align: center;
font-size: 12px;
line-height: 130%;
}
.mud-shop .store-skin-price{
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
margin: 8px 0;
}
.mud-shop .store-skin-price-value{
color: #fff;
font-size: 18px;
font-weight: 700;
}
.mud-shop .store-skin-price-value b{
margin-left: 4px;
color: var(--md-main-color);
font-size: 14px;
font-weight: 500;
}
/* their struck-through old price is a rotated rule, not a text-decoration */
.mud-shop .store-skin-old-price{
position: relative;
display: inline-block;
color: #fff;
font-size: 14px;
font-weight: 700;
opacity: .7;
}
.mud-shop .store-skin-old-price::before{
content: "";
display: block;
position: absolute;
top: 60%;
left: 0;
width: 120%;
height: 2px;
background: #c7bbca;
transform: rotate(25deg) translateY(-50%) translateX(-20%);
}
.mud-shop .store-skin-buy{
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--md-btn-sm-height);
margin-top: auto;
padding: 0 20px;
border: 1px solid var(--md-border-hover);
border-radius: var(--md-pill);
background: none;
color: var(--md-text);
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: all .2s ease-in-out;
}
.mud-shop .store-skin-buy:hover{
background: var(--md-accent-grad);
border-color: var(--default-color, #ba6356);
color: #ffffff;
}
/* their note under the grid: "You can purchase each Skin Item pack only once!" */
.mud-shop .store-skin-note{
margin: 14px 0 0;
color: var(--md-text-secondary);
text-align: center;
font-size: 16px;
}
.mud-shop .store-skin-note b{
color: var(--error-color, #dc3545);
font-weight: 700;
}

/* =====================================================================================
   Service cards.

   A service is NOT an item box, and it is not the centred panel the vendored component
   chunk describes either - that chunk predates the current shop. The live card is a navy
   panel with the icon plate at the TOP LEFT, the price at the TOP RIGHT, LEFT-aligned
   title/description, and the action at the BOTTOM RIGHT:

       +------------------------------------------+
       |  [icon]                    250  (DC)     |
       |                                          |
       |  INVISIBLE                               |
       |  Hide info about characters        ( -> )|
       +------------------------------------------+

   The panel borrows the item/VIP card surface so the sections read as one shop.
   ================================================================================== */
.mud-shop .store-service-card{
position: relative;
display: inline-flex;
vertical-align: top;
flex-direction: column;
width: 100%;
max-width: 435px;
margin: 5px 5px 10px;
padding: 18px;
border: 1px solid var(--md-border);
border-radius: 16px;
background: var(--md-card-bg);
font-family: var(--md-font);
}
.mud-shop .store-service-card:hover{
border-color: var(--md-border-hover);
}
.mud-shop .store-service-top{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.mud-shop .store-service-icon{
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 64px;
height: 64px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 12px;
background: rgba(255, 255, 255, .07);
}
.mud-shop .store-service-icon img{
max-width: 44px;
max-height: 44px;
width: auto;
height: auto;
}
.mud-shop .store-service-icon i{
font-size: 30px;
line-height: 1;
color: #e8ecf6;
}
.mud-shop .store-service-prices{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
text-align: right;
}
.mud-shop .store-service-price{
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
.mud-shop .store-service-price strong{
font-size: 20px;
font-weight: 700;
line-height: 1;
color: #ffffff;
}
.mud-shop .store-service-was{
margin: 0;
font-size: 13px;
color: var(--md-text-secondary);
text-decoration: line-through;
}
.mud-shop .store-service-bottom{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding-top: 14px;
}
.mud-shop .store-service-text{
min-width: 0;
}
.mud-shop .store-service-title{
margin: 0;
color: #ffffff;
font-size: 22px;
line-height: 120%;
font-weight: 700;
text-transform: uppercase;
}
.mud-shop .store-service-subtitle{
margin: 4px 0 0;
font-size: 14px;
line-height: 135%;
font-weight: 500;
color: var(--md-text-secondary);
}
.mud-shop .store-service-meta{
margin: 4px 0 0;
font-size: 12px;
color: var(--md-text-secondary);
}
/* The action, as a round accent button. Ours navigates to the plugin that owns the service
   rather than buying in place, hence an arrow and not a "+". */
.mud-shop .store-service-go{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--md-accent-grad);
color: #ffffff;
font-size: 17px;
text-decoration: none;
transition: all .2s ease-in-out;
}
.mud-shop .store-service-go:hover{
filter: brightness(1.18);
color: #ffffff;
}
/* A row of service cards shares one height (the cards are otherwise ragged, because a title or a
   description can take one line or two). Applied through a list modifier rather than `:has()`, so
   a list that MIXES services with other products - the discount shop - is left alone. */
.mud-shop ul.shop-service-list{
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.mud-shop ul.shop-service-list > .store-service-card{
display: flex;
}

/* MuDream's shop hover tooltip (assets/mudream/mud_tooltip.js, box styles in mud_parts.css).
   The box is portalled to <body> and carries .mud-shop for the tokens; what their global reset
   gave it is restored here: no paragraph margins (Bootstrap adds 1rem), white text. Their
   z-index (810) sits under our fixed header and modals, so the box is lifted above them
   (body > ...: mud_parts.css loads after this file, equal specificity would lose). */
body > .HoverTooltip_tooltip__PUVpB{
	color: #fff;
	z-index: 100000;
	pointer-events: none;
}
body > .HoverTooltip_tooltip__PUVpB p{
	margin: 0;
}
body > .HoverTooltip_tooltip__PUVpB img{
	display: inline-block;
}

/* MuDream's Consumables block: their page text is white (quantities "x0", the cart total) */
.mud-shop .ShopConsumables_wrapper__hXrgB{
	color: #fff;
}

/* Prize Bank (view.bonus_cart.php): MuDream's /account/bonuses parts come from mud_parts.css;
   these are only the pieces of ours they do not have - the page text colour of their site, the
   empty message, and the character picker (their modal was not capturable) as a centred PageBox. */
.mud-shop .prize-bank{
	color: #fff;
	margin-top: 10px;
}
.mud-shop .prize-bank p{
	margin: 0;
}
.mud-shop .prize-empty{
	text-align: center;
	padding: 20px 0;
}
.prize-modal{
	position: fixed;
	inset: 0;
	z-index: 100001;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
	color: #fff;
}
.prize-modal .prize-modal-box{
	width: 360px;
	max-width: calc(100vw - 32px);
	max-height: 80vh;
	overflow: auto;
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
}
.prize-modal .prize-modal-close{
	color: #fff;
	font-size: 24px;
	line-height: 1;
	text-decoration: none;
}
.prize-modal .prize-modal-note{
	font-size: 13px;
	opacity: .8;
	margin: 12px 0;
}
.prize-modal .prize-char{
	justify-content: space-between;
}
.prize-modal .prize-char-lvl{
	opacity: .7;
	font-weight: 400;
}
/* their date cell ("23 sep. 2026") stays on one line */
.mud-shop .prize-bank .BonusesPage_date__udqRQ{
	white-space: nowrap;
}

/* =====================================================================================
   Shop site-theme touch-ups (2026-09-24): the Bootstrap alert used for the shop's
   empty/error states was the default bright blue/yellow; and the small card action
   pill wrapped "VIEW BUNDLE" onto two lines. Scoped to .mud-shop.
   ================================================================================== */
.mud-shop .alert-info{
	background: var(--light-gray-color, #171920);
	border: 1px solid var(--md-border, rgba(255, 255, 255, .08));
	border-radius: var(--md-radius, 12px);
	color: var(--body-color, rgba(240, 240, 255, .5));
}
.mud-shop .alert-warning{
	background: rgba(162, 62, 47, .15);
	border: 1px solid rgba(186, 99, 86, .4);
	border-radius: var(--md-radius, 12px);
	color: #e8b4a8;
}
.mud-shop .store-card-item a.vs-btn,
.mud-shop .store-card-service a.vs-btn,
.mud-shop .store-card-bundle a.vs-btn,
.mud-shop .store-card-start_pack a.vs-btn{
	width: auto;
	min-width: 62%;
	white-space: nowrap;
}

/* The /shop/vip comparison cards use Bootstrap's bg-success (bright green) + bg-dark;
   re-surface them as the site panels (scoped to .mud-shop, views untouched). */
.mud-shop .card.bg-success{
	background: var(--md-card-bg) !important;
	border: 1px solid var(--md-border, rgba(255, 255, 255, .08));
	border-radius: var(--md-radius, 12px) !important;
	overflow: hidden;
}
.mud-shop .card.bg-success .card-header{
	background: transparent;
	border-bottom: 1px solid var(--md-border, rgba(255, 255, 255, .08));
	padding-top: 20px;
}
.mud-shop .card.bg-success .card-title{
	color: #fff !important;
}
.mud-shop .card.bg-success .card-body.bg-dark{
	background: rgba(0, 0, 0, .25) !important;
}

/* ==========================================================================
   MuDream-style rankings header + tables (scoped .mdr-*) - v2
   ========================================================================== */
.mdr-wrap{
	position: relative;
	padding: 12px;
	border-radius: 15px;
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(10,17,25,.55);
	margin-top: 15px;
}
/* --- section buttons (Characters / Guilds / Events / Extras) --- */
.mdr-sections{
	display: flex;
	flex-flow: row nowrap;
	gap: 12px;
}
.mdr-section-btn{
	flex-grow: 1;
	height: 100px;
	padding: 0 20px;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	background-color: #141b24;
	background-size: cover;
	background-position: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: filter .3s ease, box-shadow .2s ease, border-color .2s ease;
	filter: grayscale(100%) brightness(.7);
	position: relative;
	overflow: hidden;
	text-align: left;
}
.mdr-section-btn:before{
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(90deg, rgba(10,15,22,.85) 0%, rgba(10,15,22,.25) 100%);
	z-index: 1;
}
.mdr-section-btn span{
	position: relative;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-shadow: 1px 1px 2px #000;
}
.mdr-section-btn:hover{
	filter: grayscale(0) brightness(1);
}
.mdr-section-btn.mdr-active{
	filter: grayscale(0) brightness(1);
	border-color: #e8862e;
	box-shadow: 0 0 12px rgba(232,134,46,.55), inset 0 0 18px rgba(232,134,46,.15);
}
/* --- category boxes (Resets / Bosses / ...) --- */
.mdr-cats{
	display: flex;
	flex-flow: row nowrap;
	gap: 12px;
	margin-top: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}
.mdr-cats::-webkit-scrollbar{ display: none; }
.mdr-cat-box{
	position: relative;
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 24px;
	min-width: 150px;
	border-radius: 15px;
	background: #12202e;
	border: 1px solid rgba(255,255,255,.06);
	cursor: pointer;
	transition: all .2s ease;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.mdr-cat-box:hover{ color: #fff; text-decoration: none; background: #16283a; }
.mdr-cat-box img{
	width: 44px;
	height: 44px;
	object-fit: contain;
}
.mdr-cat-box .mdr-cat-info{
	position: absolute;
	top: 8px;
	right: 10px;
	color: #6b7d90;
	font-size: 13px;
}
.mdr-cat-box:after{
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, #ffa733, transparent);
	border-radius: 10px;
	transition: all .15s ease;
	content: "";
}
.mdr-cat-box.mdr-active:after{
	width: 45%;
	box-shadow: 0 0 8px 2px rgba(255,167,51,.6);
}
.mdr-cat-box.mdr-active{ background: #16283a; }
/* --- class tabs + league tabs row --- */
.mdr-filter-row{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}
.mdr-class-tabs,
.mdr-league-tabs{
	display: flex;
	flex-flow: row nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	border-radius: 15px;
}
.mdr-class-tabs::-webkit-scrollbar,
.mdr-league-tabs::-webkit-scrollbar{ display: none; }
.mdr-class-tab,
.mdr-league-tab{
	flex: 1 0 auto;
	position: relative;
	min-width: 52px;
	height: 46px;
	padding: 6px 14px;
	background: #12202e;
	border: 1px solid rgba(255,255,255,.06);
	border-right: none;
	color: #9aa9b8;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}
.mdr-class-tab:last-child,
.mdr-league-tab:last-child{ border-right: 1px solid rgba(255,255,255,.06); border-radius: 0 15px 15px 0; }
.mdr-class-tab:first-child,
.mdr-league-tab:first-child{ border-radius: 15px 0 0 15px; }
.mdr-class-tab img{ width: 30px; height: 30px; border-radius: 50%; }
.mdr-league-tab img{ width: 22px; height: 22px; object-fit: contain; }
.mdr-class-tab:after,
.mdr-league-tab:after{
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, #ffa733, transparent);
	border-radius: 10px;
	transition: all .15s ease;
	content: "";
}
.mdr-class-tab:hover,
.mdr-league-tab:hover{ color: #fff; }
.mdr-class-tab.mdr-active,
.mdr-league-tab.mdr-active{ color: #fff; background: #16283a; }
.mdr-class-tab.mdr-active:after,
.mdr-league-tab.mdr-active:after{
	width: 45%;
	box-shadow: 0 0 8px 2px rgba(255,167,51,.6);
}
/* --- ranking table --- */
.mdr-table-wrap{
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	background: #0f1a26;
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 15px;
	padding: 8px 22px;
}
.mdr-table-wrap::-webkit-scrollbar{ display: none; }
.mdr-table{
	width: 100%;
	border-collapse: collapse;
}
.mdr-table thead th{
	padding: 14px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #8ba0b4;
	border-bottom: 1px solid rgba(255,255,255,.08);
	white-space: nowrap;
	text-align: center;
}
.mdr-table thead th:first-child,
.mdr-table thead th.mdr-left{ text-align: left; }
.mdr-table thead th.mdr-th-yellow{ color: #ffd600; }
.mdr-table tbody tr{ transition: background .2s ease; }
.mdr-table tbody tr + tr{ border-top: 1px solid rgba(255,255,255,.05); }
.mdr-table tbody tr:hover{ background: rgba(152,210,249,.06); }
.mdr-table tbody td{
	padding: 10px 12px;
	font-size: 14px;
	vertical-align: middle;
	color: #e8eef4;
	text-align: center;
	border: none;
}
.mdr-table tbody td:first-child{ color: #8ba0b4; }
.mdr-table tbody td.mdr-left,
.mdr-table .mdr-name-cell{ text-align: left; }
.mdr-table .mdr-name-cell{ white-space: nowrap; }
.mdr-table .mdr-name-cell a{
	color: #ffd600;
	font-weight: 700;
	font-size: 15px;
	margin-left: 8px;
}
.mdr-table .mdr-name-cell a:hover{ color: #FFECA7; }
.mdr-table .mdr-score{ color: #fff; font-weight: 700; }
.mdr-table .mdr-score-yellow{ color: #ffd600; }
.mdr-table .mdr-yellow{ color: #ffd600; }
.mdr-table sup{
	margin-left: 3px;
	font-weight: 700;
	color: #ffd600;
	font-size: 10px;
}
.mdr-table .mdr-sub{ font-size: 11px; }
.mdr-table .mdr-class-img{ width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; }
.mdr-table .rank-status{ margin: 0 8px 0 0; }
.mdr-table .mdr-mark{ vertical-align: middle; margin-right: 8px; }
.mdr-table .mdr-guild a{ color: #ffd600; font-weight: 600; }
.mdr-table .mdr-loc{ color: #c7d3de; }
/* framed class avatar (top 3 / top 10) */
.mdr-avatar{
	position: relative;
	display: inline-block;
	width: 42px;
	height: 42px;
	vertical-align: middle;
	/* room for the 81px frame (19.5px past each side); MuDream: with-frame margin-right 10px */
	margin: 0 14px 0 10px;
}
/* MuDream layers the frame BEHIND the portrait: the frame PNGs have an opaque dark
   centre by design (backdrop disc), so the portrait must paint above it */
.mdr-avatar img.mdr-avatar-img{
	position: relative;
	z-index: 1;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: block;
}
.mdr-avatar img.mdr-avatar-frame{
	position: absolute;
	top: 50%;
	left: 50%;
	/* MuDream ClassAvatar_frame: square of (portrait + 30px) at their 32px portrait, image
	   cover-cropped, raised 5px; scaled here to our 42px portrait (42 * 62/32 = 81, 5 -> 6.5) */
	width: 81px;
	height: 81px;
	max-width: none; /* the theme's global img{max-width:100%} would clamp it to the 42px portrait */
	object-fit: cover;
	object-position: 50% 50%;
	transform: translate(-50%, calc(-50% - 6.5px));
	pointer-events: none;
	z-index: 0;
}
/* castle owner crown before the guild mark (MuDream "Castle Owner") */
.mdr-table .mdr-crown{ width: 24px; height: auto; vertical-align: middle; margin-right: 6px; }
.mdr-table .mdr-hidden-loc{ color: #8ba0b4; font-size: 16px; }
/* bosses: table + "Monster | Ranking Points" weight panel on the right */
.mdr-boss-layout{ display: flex; gap: 16px; align-items: flex-start; }
.mdr-boss-layout > .mdr-boss-main{ flex: 1 1 auto; min-width: 0; }
.mdr-boss-weights{
	flex: 0 0 210px;
	background: #0f1a26;
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 15px;
	padding: 10px 0;
	position: sticky;
	top: 90px;
}
.mdr-boss-weights-head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 16px 10px;
	color: #c7d3de;
	font-size: 13px;
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.mdr-boss-weights-head span:last-child{ text-align: center; line-height: 1.2; }
.mdr-boss-weights-list{ max-height: 520px; overflow-y: auto; }
.mdr-boss-weight{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 16px;
	border-bottom: 1px solid rgba(255,255,255,.04);
}
.mdr-boss-weight-mob{ width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.mdr-boss-weight-mob img{ max-width: 56px; max-height: 56px; }
.mdr-boss-weight-pts{ color: #ffd600; font-weight: 700; font-size: 15px; min-width: 50px; text-align: center; }
.mdr-league-empty td{ color: #8ba0b4; padding: 24px 0 !important; text-align: center; }
@media (max-width: 991px){
	.mdr-boss-layout{ flex-direction: column; align-items: stretch; }
	.mdr-boss-layout > .mdr-boss-main{ width: 100%; }
	.mdr-boss-weights{ position: static; width: 100%; flex-basis: auto; }
	.mdr-boss-weights-list{ max-height: 260px; }
}
.mdr-legend-note{
	color: #8ba0b4;
	font-size: 12px;
	padding: 8px 4px;
}
@media (max-width: 991px){
	.mdr-section-btn{ height: 64px; padding: 0 12px; }
	.mdr-section-btn span{ font-size: 13px; }
	.mdr-cat-box{ min-width: 120px; padding: 10px 16px; }
	.mdr-cat-box img{ width: 32px; height: 32px; }
	.mdr-filter-row{ flex-wrap: wrap; }
	.mdr-table-wrap{ padding: 4px 10px; }
}

/* ==========================================================================
   Character page - MuDream "/char/{name}" layout (CharPage / CharStatsWidget /
   CharEquipment modules, from the HAR capture), in our .mdr colours.
   ========================================================================== */
.mdr-char{ --mdr-box-bg: #0f1a26; --mdr-border: rgba(255,255,255,.06); --mdr-yellow: #ffd600; color: #c7d3de; padding: 10px 0 30px; }
.mdr-char-header{ display: flex; align-items: center; justify-content: center; gap: 28px; max-width: 1000px; margin: 0 auto; }
.mdr-char-plaque{ min-width: 190px; padding: 8px 28px; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.35; white-space: nowrap; }
.mdr-char-plaque b{ color: var(--mdr-yellow); font-size: 17px; }
.mdr-char-level{ background: url('../images/armory/char_block_blue.webp') no-repeat center / 100% 100%; padding-left: 14px; }
.mdr-char-resets{ background: url('../images/armory/char_block_blue_l.webp') no-repeat center / 100% 100%; text-align: right; padding-right: 14px; }
.mdr-char-resets:empty{ visibility: hidden; }
.mdr-char-name-block{ display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.mdr-char-name-block .rank-status{ margin: 0; flex: 0 0 auto; }
.mdr-char-avatar{ width: 50px; height: 50px; border-radius: 50%; flex: 0 0 50px; }
.mdr-char-name{ margin: 0; color: #fff; font-size: 38px; line-height: 1.1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mdr-char-info{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 14px auto 0; font-size: 15px; color: #fff; }
.mdr-char-info-item{ display: inline-flex; align-items: center; gap: 6px; }
.mdr-char-info-item > span{ color: rgba(255,255,255,.5); }
.mdr-char-info-item a{ color: var(--default-color, #ba6356); }
.mdr-char-mark{ width: 22px; height: 22px; }
.mdr-char-gens{ height: 22px; }
.mdr-char-content{ display: flex; gap: 22px; align-items: flex-start; margin-top: 26px; }
.mdr-char-left{ flex: 1 1 auto; min-width: 0; }
.mdr-char-right{ flex: 0 0 480px; max-width: 480px; }
/* stat widget (CharStatsWidget, flat) */
.mdr-char-stats{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 12px 22px; background: var(--mdr-box-bg); border: 1px solid var(--mdr-border); border-radius: 20px; }
.mdr-char-stat{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.mdr-char-stat i{ color: #8ba0b4; font-size: 16px; }
.mdr-char-stat-name{ color: #fff; font-weight: 600; }
.mdr-char-stat-value{ color: var(--mdr-yellow); font-size: 18px; font-weight: 600; }
.mdr-char-stat-free .mdr-char-stat-value{ color: #7fd67f; }
/* equipment grid (CharEquipment, lg): 3 big columns + 2 narrow ones */
.mdr-eq{ --slot: 120px; --slot-sm: 60px; --gap-w: 20px; --gap-h: 20px; position: relative; margin: 22px auto 0;
	width: calc(var(--slot) * 3 + var(--slot-sm) * 2 + var(--gap-w) * 4); height: calc(var(--slot) * 3 + var(--gap-h) * 2); }
.mdr-eq-slot{ position: absolute; top: 0; left: 0; width: var(--slot); height: var(--slot); border-radius: 10px; border: 1px solid var(--mdr-border); background: var(--mdr-box-bg); transition: border-color .2s ease; }
.mdr-eq-slot:before{ content: ""; position: absolute; inset: 0; background: var(--slot-bg) no-repeat center / contain; opacity: .7; }
.mdr-eq-slot.is-filled:before{ display: none; }
.mdr-eq-slot.is-filled:hover{ border-color: var(--mdr-yellow); }
/* item images are cropped at their in-game scale (helm ~60px, armor ~90x130): draw them at
   native size and only shrink to fit - "contain" upscaled small square helms to fill the slot */
.mdr-eq-item{ position: absolute; inset: 8px; margin: auto; max-width: calc(100% - 16px); max-height: calc(100% - 16px); cursor: pointer; }
.mdr-eq-ears_l .mdr-eq-item, .mdr-eq-ears_r .mdr-eq-item, .mdr-eq-pendant .mdr-eq-item, .mdr-eq-ring_l .mdr-eq-item, .mdr-eq-ring_r .mdr-eq-item, .mdr-eq-extra .mdr-eq-item{ max-width: calc(100% - 10px); max-height: calc(100% - 10px); }
.mdr-eq-ears_l, .mdr-eq-ears_r, .mdr-eq-pendant, .mdr-eq-ring_l, .mdr-eq-ring_r{ width: var(--slot-sm); height: var(--slot-sm); }
.mdr-eq-ears_l .mdr-eq-item, .mdr-eq-ears_r .mdr-eq-item, .mdr-eq-pendant .mdr-eq-item, .mdr-eq-ring_l .mdr-eq-item, .mdr-eq-ring_r .mdr-eq-item{ inset: 5px; }
.mdr-eq-helm, .mdr-eq-armor, .mdr-eq-pants{ left: calc(var(--slot) + var(--gap-w) * 2 + var(--slot-sm)); }
.mdr-eq-wings, .mdr-eq-shield, .mdr-eq-boots{ left: calc(var(--slot) * 2 + (var(--gap-w) * 2 + var(--slot-sm)) * 2); }
.mdr-eq-weapon, .mdr-eq-armor, .mdr-eq-shield{ top: calc(var(--slot) + var(--gap-h)); }
.mdr-eq-gloves, .mdr-eq-pants, .mdr-eq-boots{ top: calc(var(--slot) * 2 + var(--gap-h) * 2); }
.mdr-eq-ears_l, .mdr-eq-ring_l{ left: calc(var(--slot) + var(--gap-w)); }
.mdr-eq-ears_r, .mdr-eq-pendant, .mdr-eq-ring_r{ left: calc(var(--slot) * 2 + var(--slot-sm) + var(--gap-w) * 3); }
.mdr-eq-pendant{ top: calc(var(--slot-sm) + var(--gap-h)); }
.mdr-eq-ring_l, .mdr-eq-ring_r{ top: calc(var(--slot-sm) * 2 + var(--gap-h) * 2); }
.mdr-eq-extra{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.mdr-eq-extra .mdr-eq-slot{ position: relative; width: 60px; height: 60px; }
.mdr-eq-artifacts{ text-align: center; }
.mdr-eq-artifacts > div[style*="top: -160px"]{ top: 0 !important; left: 0 !important; margin: 16px auto 0; }
.mdr-char-invisible{ margin-top: 40px; text-align: center; font-size: 20px; color: #8ba0b4; }
.mdr-char-invisible i{ font-size: 32px; margin-right: 8px; vertical-align: middle; }
/* Gear Score | Inventory switcher + panel */
.mdr-char-switch{ display: flex; padding: 5px; background: var(--mdr-box-bg); border: 1px solid var(--mdr-border); border-radius: 30px; }
.mdr-char-switch-btn{ flex: 1 1 0; height: 38px; border: 0; border-radius: 25px; background: transparent; color: #8ba0b4; font-size: 16px; cursor: pointer; transition: all .2s ease; }
.mdr-char-switch-btn:hover{ color: #fff; }
.mdr-char-switch-btn.active{ color: #fff; background: linear-gradient(90deg, var(--default-color2, #a23e2f), var(--default-color, #ba6356)); }
.mdr-char-panel{ margin-top: 14px; min-height: 500px; padding: 16px; background: var(--mdr-box-bg); border: 1px solid var(--mdr-border); border-radius: 15px; overflow-x: auto; }
.mdr-char-panel .char-score-table{ font-size: 13px; }
.mdr-char-inv-tabs{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mdr-char-inv-tab{ padding: 5px 12px; border: 1px solid var(--mdr-border); border-radius: 15px; background: transparent; color: #8ba0b4; font-size: 13px; cursor: pointer; }
.mdr-char-inv-tab:hover{ color: #fff; }
.mdr-char-inv-tab.active{ color: #fff; background: #16283a; border-color: rgba(152,210,249,.25); }
.mdr-char-inv-pane{ display: none; }
.mdr-char-inv-pane.active{ display: block; }
.mdr-char-inv-pane .char-inv-grid{ margin: 0 auto; }
@media (max-width: 1199px){
	.mdr-char-content{ flex-direction: column; align-items: stretch; }
	.mdr-char-right{ flex-basis: auto; max-width: none; width: 100%; }
}
@media (max-width: 767px){
	.mdr-char-header{ flex-wrap: wrap; gap: 10px; }
	.mdr-char-name-block{ order: -1; width: 100%; justify-content: center; }
	.mdr-char-name{ font-size: 28px; }
	.mdr-char-plaque{ min-width: 0; flex: 1 1 0; font-size: 13px; }
	.mdr-eq{ --slot: 70px; --slot-sm: 42px; --gap-w: 8px; --gap-h: 10px; }
	.mdr-char-stats{ padding: 10px 14px; }
}

/* MuDream Monster tooltip (their Monster_* CSS module: title 20px/500 white centred, label column
   min-width 120px, value nowrap; icon colours --purple-lighth / --red / --orange). Box in our style. */
.mdr-monster-tip{
	position: absolute;
	z-index: 100000;
	min-width: 220px;
	padding: 14px 18px;
	background: #0f1a26;
	border: 1px solid rgba(152,210,249,.18);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.55);
	color: #c7d3de;
	font-size: 14px;
	pointer-events: none;
}
.mdr-monster-tip-title{ font-weight: 500; font-size: 20px; line-height: 24px; color: #fff; text-align: center; margin-bottom: 12px; }
.mdr-monster-tip-row{ display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mdr-monster-tip-row + .mdr-monster-tip-row{ margin-top: 8px; }
.mdr-monster-tip-label{ min-width: 120px; }
.mdr-monster-tip-label i{ width: 16px; text-align: center; margin-right: 4px; }
.mdr-monster-tip-value{ white-space: nowrap; color: #fff; font-weight: 600; }
.mdr-i-lvl{ color: #AE6CF1; }
.mdr-i-heart{ color: #FF3F3F; }
.mdr-i-swords{ color: #FF9533; }
[data-monster-name]{ cursor: help; }
/* Events side panel: event name instead of a monster picture (their column "Event", 50%) */
.mdr-event-weight-name{ flex: 1 1 auto; min-width: 0; color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdr-event-weights .mdr-boss-weight{ min-height: 44px; }

/* category (i) / crown / invisible tooltips: same box as the monster tooltip, plain text */
.mdr-info-tip{ min-width: 0; max-width: 320px; font-size: 14px; line-height: 20px; color: #fff; text-align: center; }
.mdr-cat-info[data-mdr-tip], .mdr-crown[data-mdr-tip], .mdr-hidden-loc[data-mdr-tip]{ cursor: help; }

/* ==========================================================================
   Guild ranking (rank_guilds.ejs) - MuDream "Rankings > Guilds" parity, values from their live
   computed styles (MuDreamReference/Mix/wiki/rankings_guild/guild_styles.json):
   # centred | Guild (Guild component: 24px mark on rgba(255,255,255,.2), 12px gap, name min-width
   90px, #FFECA7, hover #ffd600) | Ranking #ffd600 | Members | Guild Master (#FFECA7), all centred
   but Guild; Castle Owner crown 24px before the guild link. Table chrome stays ours (.mdr-table).
   ========================================================================== */
.mdr-guild-table thead th:first-child,
.mdr-guild-table thead th.mdr-center,
.mdr-guild-table tbody td.mdr-center{ text-align: center; }
.mdr-guild-table thead th.mdr-left,
.mdr-guild-table tbody td.mdr-left{ text-align: left; }
.mdr-guild-cell{ display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.mdr-guild-cell .mdr-crown{ width: 24px; height: 24px; margin: 0; }
.mdr-guild-link{ display: inline-flex; align-items: center; column-gap: 12px; color: #FFECA7; font-weight: 500; }
.mdr-guild-link:hover{ color: #ffd600; }
.mdr-guild-link > span{ display: inline-block; min-width: 90px; text-align: left; }
.mdr-guild-mark{ width: 24px; height: 24px; max-width: none; background: rgba(255,255,255,.2); }
.mdr-guild-master{ color: #FFECA7; white-space: nowrap; }
.mdr-guild-master:hover{ color: #ffd600; }
/* Ranking + drawer button (their drawer-block: centred, 15px gap, number min-width 65px) */
.mdr-guild-rating{ display: inline-flex; align-items: center; justify-content: center; gap: 15px; }
.mdr-guild-rating > span{ min-width: 65px; text-align: right; }
.mdr-guild-rating .rank-rating-btn{ margin-left: 0; }
/* drawer header: rank + guild link instead of the class avatar */
#guild-rating-drawer .boss-drawer-name.mdr-guild-link{ font-size: 18px; font-weight: 700; color: #FFECA7; }
#guild-rating-drawer .boss-drawer-name.mdr-guild-link:hover{ color: #ffd600; }
#guild-rating-drawer .boss-drawer-name.mdr-guild-link > span{ min-width: 0; }

/* Arena tab: bracket badge in place of a category icon, division colours = arena page (.arena-tier-*) */
.mdr-cat-badge{ display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255,214,0,.45); background: rgba(255,214,0,.08); color: #ffd600; font-weight: 800; font-size: 15px; letter-spacing: .5px; }
.mdr-arena-tier{ display: inline-block; padding: 2px 10px; border: 1px solid; border-radius: 10px; font-weight: 700; font-size: 13px; }
.mdr-arena-tier-0{ color: #c8956d; border-color: #7a5a40; }
.mdr-arena-tier-1{ color: #c0c8d4; border-color: #6c7684; }
.mdr-arena-tier-2{ color: #ffbd19; border-color: #a07a10; }
.mdr-arena-tier-3{ color: #8fe3ff; border-color: #3f8fa8; }
.mdr-arena-tier-4{ color: #c9a0ff; border-color: #7a52b0; }
.mdr-arena-win{ color: #6fdc7d; font-weight: 700; }
.mdr-arena-loss{ color: #ff6b6b; font-weight: 700; }
.mdr-arena-empty{ padding: 28px 10px; text-align: center; color: #8ba0b4; }

/* Arena tab "Matches": recent rated matches (winner team highlighted) */
.mdr-cat-badge-sm{ min-width: 36px; height: 24px; font-size: 12px; padding: 0 6px; }
.mdr-arena-matches .mdr-arena-date{ color: #8ba0b4; white-space: nowrap; }
.mdr-arena-team a{ color: #c7d3de; }
.mdr-arena-team.is-winner a{ color: #6fdc7d; font-weight: 700; }
.mdr-arena-team.is-winner .fa-trophy{ color: #ffd600; }
.mdr-arena-vs{ color: #8ba0b4; font-weight: 800; font-size: 12px; }