#register-tiers-list{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:12px;
	max-width:600px;
	width: 100%;
}

.tier-standard{
	--tier-color-base:var(--template-malang-RD);
	--tier-color-dark:#3a91e2;
}
.tier-sponsor{
	--tier-color-base:var(--template-malang-FS);
	--tier-color-dark:#dbba00;
}
.tier-mane{
	--tier-color-base:var(--template-malang-PP);
	--tier-color-dark:#da5bb2;
}
.tier-princess{
	--tier-color-base:var(--template-malang-TS);
	--tier-color-dark:#966bca;
}
.tier-spirit{
	--tier-color-base:var(--template-malang-AJ);
	--tier-color-dark:#cb8c27;
}
.tier-spirit-dx{
	--tier-color-base:#FF8D8D;
	--tier-color-dark:#da4040;
}
.tier-onsite{
	--tier-color-base:#C8F0C8;
	--tier-color-dark:#40a539;
}
.register-tier-divider{
	/* This will go outside the container. */
	width:min(var(--pages-actual-width), 720px);
	align-self:center;
	height:2px;
	background:linear-gradient(to left,
		hsl(from var(--color-text-auto) h s l / 0%) 0%,
		hsl(from var(--color-text-auto) h s l / 100%) 10%,
		hsl(from var(--color-text-auto) h s l / 100%) 90%,
		hsl(from var(--color-text-auto) h s l / 0%) 100%
	)
}
.register-tier-entry{
	border-radius:8px;
	overflow:hidden;
	background-color: hsl(from var(--color-background-auto) h s l / 30%);
	
	position:relative;
	/* Z-Index of +1 to establish a stacking context*/
	z-index:1;
}

.register-click-hint{
	position:absolute;
	right:8px;
	bottom:8px;
	/* -1 to go behind regularly positioned elements*/
	z-index:-1;
	opacity:0.7;
	font-size:0.8em;
	display:flex;
	flex-direction:row;
	align-items:center;
}
.register-click-hint .material-symbols-rounded{
	font-size:1.3em;
	margin-bottom:0.0em;
}
.register-tier-entry.tier-detail-mode .register-click-hint{
	display:none;
}

.register-tier-regular-positioning{
	border-radius:8px;
	border-style:solid;
	border-width:4px;
	border-color:var(--tier-color-base);
	display:flex;
	flex-direction:column;
	align-items:stretch;
}
.register-tier-header{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	border-bottom-style:dotted;
	border-bottom-width:2px;
	border-bottom-color: hsl(from var(--tier-color-base) h s l / 100%);
	gap:8px;
	padding-bottom:8px;
}

.register-tier-top{
	display:flex;
	flex-direction:row;
	align-items:center;
}
#register-tiers-list.narrow .register-tier-top{
	flex-direction:column;
}
.register-topleft{
	background-color:#0F0;
	display:flex;
	flex-direction:row;
	padding-top:8px;
	padding-left:44px;
	padding-right:16px;
	padding-bottom:10px;
	border-bottom-right-radius:16px;
	position:relative;
	background-color: hsl(from var(--tier-color-base) h s l / 100%);
	overflow:hidden;
	align-self:flex-start;
	flex-shrink:1;
}
#register-tiers-list.narrow .register-topleft{
	padding-left:50px;
	border-bottom-right-radius:0;
	align-self:stretch;
}
.register-tier-icon{
	width:44px;
	height:44px;
	transform:rotate(-10deg);
	opacity:1.0;
	position:absolute;
	top:2px;
	left:2px;
	/* +1 to go above stuff*/
	z-index:1;
}
#register-tiers-list.narrow .register-tier-icon{
	left:4px;
	top:4px;
}
.register-tier-name{
	font-size:1.8em;
	font-weight:700;
	color:var(--color-text-dark);
}
.register-tier-description{
	color:var(--color-text-auto);
	margin-left:16px;
	margin-right:16px;
	line-height:1.4;
}
.register-tier-topcenter{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	margin-left:12px;
	margin-top:4px;
	gap:2px;
	align-self:stretch;
	flex-shrink:0;
}
#register-tiers-list.narrow .register-tier-topcenter{
	flex-direction:row;
	margin-left:4px;
	margin-top:12px;
	margin-right:4px;
	gap:8px;
}
.register-tier-limit{
	color:var(--color-text-auto);	
	font-size:0.8em;
}
.register-tier-top-spacer{
	flex-grow:1;
}
.register-tier-price{
	font-size:1.0em;
	font-weight:700;
	color:var(--color-text-auto);
}

.register-tier-button{
	margin:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
#register-tiers-list.narrow .register-tier-button{
	margin-top:4px;
}
.register-tier-perks-list{
	display:flex;
	/*flex-direction:column;*/
	flex-direction:row;
	flex-wrap:wrap;
	gap:4px;
	padding:12px;
	cursor:pointer;
}
.register-tier-perks-list:hover{
	background-color: light-dark(#00000018,#FFFFFF24);
}

.register-tier-entry.tier-detail-mode .register-tier-perks-list{
	flex-direction:column;
}

/* This transparent element makes sure the "Click for more..." text */
/*   is never covered by the perk entries */
.register-tier-entry:not(.tier-detail-mode) .register-tier-perks-list:after{
	content:"";
	display:block;
	width:10.0em;
	height:8px;
	/*background:#FF000040;*/
}

.register-tier-perk{
	padding:0.3em;
	font-size:0.9em;
	color:#202020;
	background-color:var(--tier-color-base);
	border-radius:2px;
	width:auto;
	display:flex;
	flex-direction:row;
	align-items:center;
}
#register-tiers-list.narrow .register-tier-perk{
	flex-direction:column;
	align-items:flex-start;
	gap:2px;
}
.perk-name{
	flex-shrink:0;
}
.register-tier-entry.tier-detail-mode .perk-name{
	font-weight:700;
}
.perk-detail{
	margin-left:8px;
	display:none;
	font-size:0.9em;
	opacity:0.8;
	flex-shrink:1;
	flex-grow:1;
	line-height:1.4;
}
.register-tier-entry.tier-detail-mode .perk-detail{
	display:block;
}

.register-tier-perk.perk-overwritten.perk-overwritten{
	background-color:light-dark(#828282,#606060);
	/*display:none;*/
}
.register-tier-perk.perk-overwritten .perk-name{
	text-decoration-line: line-through;
	text-decoration-thickness: 3px;
}

.register-tier-perk.perk-inherited{
	background-color:light-dark(#FFFFFF,#B0B0B0);
	/*background-color:var(--color-background-light);*/
	/*background-color:#E0E0E0;*/
}
.register-tier-perks-inherit-divider{
	height:24px;
	font-size:32px;
	font-weight:700;
	text-align:center;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	color:var(--tier-color-base);
	align-self:stretch;
}
.register-tier-perks-inherit-divider::before{
	display:block;
	flex-grow:1;
	margin-right:4px;
	height:4px;
	background-image:linear-gradient(
		to left,
		var(--tier-color-base),
		hsl(from var(--tier-color-base) h s l / 0%)
	);
	content:"";
}
.register-tier-perks-inherit-divider::after{
	display:block;
	flex-grow:1;
	margin-left:4px;
	height:4px;
	background-image:linear-gradient(
		to right,
		var(--tier-color-base),
		hsl(from var(--tier-color-base) h s l / 0%)
	);
	content:"";
}
.register-tier-perks-inherit-marker{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	color:var(--color-text-auto);
	font-size:1.2em;
	font-weight:700;
	text-align:center;
	width:1.5em;
}

#register-tiers-table{

	--tier-table-data-columns-width:2.4em;
	--tier-table-data-rows-height:1.6em;
	--tier-table-header-rows-height:9.0em;
	--tier-table-perk-name-width:15.0em;
	
	--tier-table-bg:light-dark(
		#F4F4F4,
		/*var(--template-malang-bg),*/
		var(--color-background-dark));
	
	font-size:min(calc(var(--pages-actual-width) * 0.027),20px);
	padding-left:1.5em;
	padding-right:1.5em;
	padding-bottom:1.5em;
	padding-top:0.0em;
	background-color: var(--tier-table-bg);
	align-self:center;
	width:max-content;
	height:max-content;
	
	/* Reverts value from .embed-frame -- otherwise sticky won't work */
	overflow:unset; 
}

.tier-table{
	border-collapse:collapse;
	
	color:var(--color-text-auto);
}

.tier-table .unfocus-able{
	transition-property:opacity;
	transition-duration:0.2s;
}
.anim-disabled .tier-table .unfocus-able{
  transition-duration:0s;
}
.tier-table .unfocused .unfocus-able{
	opacity:0.3;
}

/* Common style for cell inner DIVs. */
/* This makes styling a bit easier. */
.tier-table .cell-inner-div{
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:stretch;
}
.tier-table-header-row{
	position:sticky;
	top:0;
	background-color: var(--tier-table-bg);
	/* without z-index it gets a bit buggy with opacity and stuff*/
	z-index:10;
}
.tier-table-corner-cell{}
.tier-table-header-cell{
	width:var(--tier-table-data-columns-width);
	height:var(--tier-table-header-rows-height);
}
.tier-table .cell-inner-div.tier-table-header-cell-inner{
	position:relative;
	overflow:visible;
}
.tier-table-header-cell-bottom-bar{
	position:absolute;
	bottom:0;
	left:0.1em;
	right:0.1em;
	height:0.2em;
	background-color: hsl(
		from light-dark(var(--tier-color-dark),var(--tier-color-base))
		h s l / 100%);
}
.tier-table-header-cell-rotator{
	position:absolute;
	bottom:0;
	width:max-content;
	height:max-content;
	right:calc(var(--tier-table-data-columns-width) * 0.6);
	
	transform-origin:bottom right;
	transform: rotate(50deg);
	
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items:flex-end;
	gap:0.2em;
	
	z-index:11;
	
	border-bottom: 0.15em solid hsl(
		from light-dark(var(--tier-color-dark),var(--tier-color-base)) 
		h s l / 70%);
	
	/* This extends the bounding box a bit so it overlaps the next rotator. */
	/* Makes it so things won't flash around when moving the mouse over the header */
	padding-top:0.50em
	
}
.tier-table-header-icon{
	width:1.3em;
	height:1.3em;
}
.tier-table-header-name{
	color: light-dark(var(--tier-color-dark),var(--tier-color-base));
}
.tier-table-data-row:not(.tier-table-data-row-with-explanation){
	position:relative;
	border-bottom: 0.1em solid hsl(from var(--color-text-auto) h s l / 50%);
}
.tier-table-data-row.tier-table-data-row-with-explanation .tier-table-perk-name{
	cursor:pointer;
}
.tier-table-perk-name{
	text-align:left;
	width:var(--tier-table-perk-name-width);
	height:fit-content;
	font-weight:700;
}
.tier-table .cell-inner-div.tier-table-perk-name-inner{
	padding-left:0.1em;
	padding-top:0.3em;
	padding-bottom:0.2em;
	flex-direction:row;
	justify-content:flex-start;
	gap:0.4em;
	align-items:baseline;
}
.tier-table .tier-table-perk-name-inner-text{
	text-align:left;
	flex-grow:1;
}
.tier-table .tier-table-perk-name-inner-icon{
	width:1.0em;
	height:1.0em;
	flex-shrink:0;
	flex-grow:0;
	
	font-family:'Material Symbols Rounded';
	transform:scale(1.2);
	margin-top:-0.5em;
}

.tier-table-boolean-cell{
	width:var(--tier-table-data-columns-width);
	height:var(--tier-table-data-rows-height);
}
.tier-table-boolean-cell-inner{
	text-align:center;
	font-family:'Material Symbols Rounded';
	font-size:1.5em;
	user-select:none;
}
.tier-table-boolean-cell-inner.cell-true{
	color: light-dark(var(--tier-color-dark),var(--tier-color-base));
}
.tier-table-boolean-cell-inner.cell-false{
	color: hsl(from var(--color-text-auto) h s l / 12%);
}
.tier-table-explain-row{
	border-bottom: 0.1em solid hsl(from var(--color-text-auto) h s l / 50%);
}
.tier-table-explain-cell{
	height:fit-content;
	width:var(--tier-table-perk-name-width);
	
}
.tier-table .cell-inner-div.tier-table-explain-cell-inner{
	max-height:0em;
	overflow:hidden;
	transition-property:max-height, opacity;
	transition-duration:0.2s;
}
.anim-disabled .tier-table .cell-inner-div.tier-table-explain-cell-inner{
  transition-duration:0s;
}

.tier-table .tier-table-explain-row:not(.expanded) .tier-table-explain-cell-inner{
	max-height:0em;
	opacity:0.0;
}

.tier-table .tier-table-explain-row.expanded .tier-table-explain-cell-inner{
	max-height:5.0em;
	opacity:1.0;
}
.tier-table .cell-inner-div.tier-table-explain-cell-inner .tier-table-explain-cell-inner-text{
	width:100%;
	height:100%;
	padding-left:0.6em;
	padding-bottom:0.2em;
	text-align:left;
	line-height:1.4;
	font-size:0.8em;
	color: hsl( from currentColor h s l / 80%);
}


/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
	#register-tiers-table{
		font-size:calc(var(--pages-actual-width) * 0.032);
	}
	.tier-table{
		--tier-table-header-rows-height:16.0em;
	}
}

/* Smaller Mobiles */
@media (width<480px) {
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
}