:root {
	/* backgrounds */
	--primary: #171921;
	--secondary: #0b0d13;
	--third: #8c7d66;
	--border: #2d2734;

	/* text */
	--font-color: #c4c6d0;

	/* Links / anchors */
	--anchor:#c9a25b;
	--anchor-hover:#d7c4ff;

	/* buttons or alert boxes with different colors */
	--bg-danger: #3c0e0e;
	--color-danger: #9e5858;
	--border-danger: #350505;

	--bg-warning: #905c00;
	--color-warning: #39280a;
	--border-warning: #322001;

	--bg-info: #005d90;
	--color-info: #00263e;
	--border-info: #022530;

	--bg-success: #009039;
	--color-success: #003f0c;
	--border-success: #00380c;

	--bg-default: #0c0e14;
	--color-default: #c9a25b;
	--border-default: #000;
}



body {
	font-family: 'arial', sans-serif;
	color:var(--font-color);
	background: #05070d url("../img/riftfall-client-bg.png") center top / cover fixed no-repeat;
	min-height: 100vh;
}


body, ul { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none;color:var(--anchor); }
a:hover {color:var(--anchor-hover);}
a:hover, button:hover, input[type="submit"]:hover { cursor: pointer; }
* {-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;}
*:hover {-webkit-transition-duration: 0s;-moz-transition-duration: 0s;-o-transition-duration: 0s;transition-duration: 0s;}

nav .container > div > ul > li > ul {
	position: absolute;
	border: 2px solid;
	border-top:none !important;
	border-color: var(--border);
	width: 200px;
}

nav { border: 10px solid var(--primary); }
nav .container { padding-left: 10px; }
nav .container > div > ul > li,
.modIcon:hover > i:nth-child(2) { display: inline-block; }

nav .container > div > ul > li > a { padding: 20px; }
nav .container > div > ul > li:hover > ul,
nav .container > div > ul > li > a,
nav .container > div > ul > li > ul > li > a { display: block; z-index: 1; }
nav .container > div > ul > li > ul > li > a { padding: 10px 20px; }
nav .container, .preventCollapse, .ellipsis { overflow: hidden; }

.topPane { margin-bottom: 10px; }
.leftPane { width: 70%; }
.rightPane { width: 29%; }
.searchForm { width: 200px; }
.body { padding: 10px 0px; }
table { width: 100%; }
td { padding: 10px 5px; }
.header { color: #d1a233; }
.feedContainer { margin:2rem 0; }
.pull-left { float:left; }
.pull-right { float:right; }
.well, .header { width: auto; }
.centralizeContent { text-align: center; }
.smedia { font-size: 2em; }

.banner {
    background: linear-gradient(180deg, rgba(4, 5, 9, 0.08), rgba(4, 5, 9, 0.52)), url("../img/riftfall-header.png");
    height: 380px;
    background-size: cover;
    background-position: center 58%;
    background-repeat: no-repeat;
    margin-top: 30px;
    border: 1px solid #463a52;
	box-shadow: 0 0 0 8px rgba(10, 12, 18, 0.9), 0 20px 55px rgba(0, 0, 0, 0.65), inset 0 0 70px rgba(111, 62, 203, 0.2);
}

.riftfall-highlights {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 9px 0 0;
	border-top: 1px solid #5b4b37;
	border-bottom: 1px solid #2e3038;
	background: rgba(9, 11, 17, 0.96);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
}

.riftfall-highlight {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 74px;
	padding: 10px 14px;
	color: #dfe1e7;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.riftfall-highlight + .riftfall-highlight {
	border-left: 1px solid #2e3038;
}

.riftfall-highlight:hover {
	background: #171a22;
	color: #f3ca72;
}

.riftfall-highlight-copy {
	min-width: 0;
}

.riftfall-highlight-copy strong,
.riftfall-highlight-copy small {
	display: block;
	letter-spacing: 0;
}

.riftfall-highlight-copy strong {
	overflow: hidden;
	color: #f0ede5;
	font-size: 0.93rem;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.riftfall-highlight-copy small {
	margin-top: 4px;
	color: #8f96a6;
	font-size: 0.72rem;
	line-height: 1.3;
}

.riftfall-highlight-art,
.riftfall-highlight-logo {
	position: relative;
	display: grid;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	margin-right: 10px;
	place-items: center;
}

.riftfall-highlight-art::before {
	position: absolute;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(207, 81, 72, 0.5);
	border-radius: 50%;
	background: rgba(126, 35, 43, 0.17);
	box-shadow: 0 0 18px rgba(215, 65, 69, 0.38);
	content: '';
	animation: riftfallAuraPulse 2.4s ease-in-out infinite;
}

.riftfall-highlight-art-blue::before {
	border-color: rgba(101, 127, 221, 0.55);
	background: rgba(64, 67, 150, 0.18);
	box-shadow: 0 0 18px rgba(95, 97, 221, 0.42);
	animation-delay: -1.2s;
}

.riftfall-highlight-art img {
	position: relative;
	z-index: 1;
	width: 42px;
	height: 42px;
	object-fit: contain;
	image-rendering: pixelated;
	animation: riftfallItemFloat 2.8s ease-in-out infinite;
}

.riftfall-highlight-art-blue img {
	animation-delay: -1.4s;
}

.riftfall-highlight-logo {
	flex-basis: 42px;
	width: 42px;
	height: 42px;
}

.riftfall-highlight-logo img {
	width: 32px;
	height: 32px;
	filter: drop-shadow(0 0 9px rgba(216, 182, 100, 0.38));
}

.riftfall-highlight-status {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	margin: 0 18px 0 12px;
	border-radius: 50%;
	background: #50bd7c;
	box-shadow: 0 0 0 5px rgba(80, 189, 124, 0.12), 0 0 14px rgba(80, 189, 124, 0.62);
	animation: riftfallStatusPulse 2s ease-out infinite;
}

.riftfall-highlight-client > .fa {
	margin-left: auto;
	padding-left: 10px;
	color: #c9a25b;
	font-size: 1rem;
}

@keyframes riftfallAuraPulse {
	0%, 100% { opacity: 0.5; transform: scale(0.82); }
	50% { opacity: 1; transform: scale(1.12); }
}

@keyframes riftfallItemFloat {
	0%, 100% { transform: translateY(2px); }
	50% { transform: translateY(-3px); }
}

@keyframes riftfallStatusPulse {
	0% { box-shadow: 0 0 0 0 rgba(80, 189, 124, 0.42), 0 0 14px rgba(80, 189, 124, 0.62); }
	70%, 100% { box-shadow: 0 0 0 8px rgba(80, 189, 124, 0), 0 0 14px rgba(80, 189, 124, 0.42); }
}

@media (prefers-reduced-motion: reduce) {
	.riftfall-highlight-art::before,
	.riftfall-highlight-art img,
	.riftfall-highlight-status {
		animation: none;
	}
}



.searchForm input {
    width: 100%;
    height: 25px;
    border: 1px solid var(--border);
    color: var(--font-color);
    font-size: 1em;
}

.turnstile-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.turnstile-container .cf-turnstile {
	width: 100%;
	min-width: 0;
}

#countDownTimer {
	line-height: 2.3;
	padding: 0px 10px;
	color: #5390a8;
}

.modIcon > i:nth-child(2),
.modIcon:hover > i:nth-child(1),
/*.loginContainer, */
nav .container > div > ul > li > ul {
	display: none;
}

.loginForm {
    display: flex;
    flex-wrap: wrap;
}
.loginForm button:hover {
	background: #0000004d;
}
.loginForm button {
    width: 100%;
    margin-top: 10px;
    background: rgb(15,17,20);
    color: var(--font-color);
    height: 40px;
    border: 1px solid var(--border);
    font-size: 1em;
}

.loginForm input {
	width: 100%;
	height: 30px;
	border: none;
	color: #fff;
	font-size: 1em;
	border-bottom: 1px solid var(--border);
}

.main {
	width: 1220px;
	margin: 2rem auto;
	position: relative;
	z-index: 1;
}

.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alert-box {
	max-width: 500px;
	font-size: 14px;
	border-radius: 5px;
	border: 1px solid var(--third);
	margin: 0 auto;
	margin-bottom: 15px;
	text-align: center;
}

.alert-default {
	background: var(--bg-default);
	color: var(--color-default);
	border-color: var(--border-default);
}
.alert-info {
	background: var(--bg-info);
	color: var(--color-info);
	border-color: var(--border-info);
}
.alert-success {
    background: var(--bg-success);
    color: var(--color-success);
    border-color: var(--border-success);
}
.alert-warning {
	background: var(--bg-warning);
	color: var(--color-warning);
	border-color: var(--border-warning);
}
.alert-danger {
	background: var(--bg-danger);
	color: var(--color-danger);
	border-color: var(--border-danger);
}
.alert-collapse {display:inline-block;}
.alert-size1 { font-size: 12px; }
.alert-size2 { font-size: 15px; }
.alert-size3 { font-size: 18px; }
.alert-size4 { font-size: 20px; }


nav .container > div > ul > li > ul > li > a:hover,
.searchForm input, #countDownTimer, .loginForm input,
nav, footer, table, .header, .feedContainer {
	background: var(--primary);
}
.loginForm .well {
	width: 100%;
}

nav .container,
nav .container > div > ul > li > ul,
.leftPane, .rightPane, .topPane,
tr:nth-child(2n+1) {
	background: var(--secondary);
}

body:before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(3, 4, 8, 0.25), rgba(3, 4, 8, 0.86)),
		radial-gradient(circle at 50% 0%, rgba(122, 72, 255, 0.22), transparent 34%);
	z-index: 0;
}

nav {
	border: 1px solid #3b3345;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

nav .container,
nav .container > div > ul > li > ul {
	background: rgba(9, 11, 17, 0.96);
}

nav .container > div > ul > li > a {
	color: #d6c18d;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0;
}

nav .container > div > ul > li > a:hover,
nav .container > div > ul > li > ul > li > a:hover {
	background: #211936;
	color: #f1e8c7;
}

.feedContainer,
.leftPane,
.rightPane,
.topPane,
footer {
	background: rgba(8, 10, 16, 0.92);
	border: 1px solid #292333;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

.well {
	box-sizing: border-box;
}

table,
.loginForm button,
select,
input {
	border-color: #3b3345;
	box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28);
}

.header,
tr.yellow td,
.zheadline {
	color: #d6b66f;
	text-shadow: 0 0 14px rgba(125, 76, 255, 0.24);
}

h1,
h2,
h3 {
	color: #ead28c;
	font-weight: normal;
	letter-spacing: 0;
}

button,
input[type="submit"],
.loginForm button {
	background: linear-gradient(180deg, #2a2135, #12141d);
	color: #ead28c;
	border: 1px solid #5a4a68;
}

button:hover,
input[type="submit"]:hover,
.loginForm button:hover {
	background: linear-gradient(180deg, #3a2a55, #161924);
	color: #fff2c4;
}

footer, .feedContainer,
nav .container, .topPane {
	border-bottom: 2px solid var(--border)
}

table, .header, .well, .smedia a {
	padding: 10px;
}

.searchForm input,
.loginForm input,
.alert-box {
	padding: 5px;
}

/* Znote AAC */
.leftPane img {
	max-width: 100%;
}

.leftPane table img,
.show img,
#news img {
	max-width: none;
}

.show td img,
.page_items .leftPane td img,
.page_spells .leftPane td img,
.page_shop .leftPane td img {
	display: inline-block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	image-rendering: auto;
	vertical-align: middle;
}

.outfitColumn img,
.inventory_outfit img {
	max-width: none;
	object-fit: contain;
}

#piv_flex .itm {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

#piv_flex .itm img {
	position: static;
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	max-width: none;
}
/* adding button style to select */
select {
	background: rgb(15,17,20);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}
input {
	background: rgb(15,17,20);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}
#loginContainer li {
	text-align: right;
}

ul.linkbuttons {
	margin-top: 8px;
	padding: 0 8px;
}
ul.linkbuttons li {
	display: inline-block;
	border: 1px solid #d1a233;
	width: calc(50% - 10px);
	float: left;
	margin-bottom: 16px;
	text-align: center;
}
ul.linkbuttons li:nth-child(odd) {
	margin-right: 16px;
}
ul.linkbuttons li a {
	padding: 5px 0;
	display: inline-block;
	width: 100%;
	text-align: center;
}
ul.linkbuttons:after {
	content: '';
	display: block;
	clear: both;
}
.widget,
.widget .body,
.search_widget,
.search_widget .body {
	padding-bottom: 0;
}
.widget center {
	margin: auto;
}
.widget h3 {
	margin-bottom: 0;
}
.search_widget form {
	margin: auto;
}
.search_widget input {
	width: 50%;
	float: left;
}
.search_widget label {
	padding: 9px;
	float: left;
}
.search_widget form:after {
	display: block;
	content: '';
	clear: both;
}
div.relative {
	position: relative;
}
.search_widget #name_suggestion {
	position: absolute;
	width: 280px;
	left: -290px;
	display: none;
}
.search_widget #name_suggestion.show {
	display: block;
}
.search_widget .sname {
	text-align: right;
}
.search_widget .sname a {
	display: inline-block;
	background-color: black;
	padding: 10px 20px;
	border-bottom: 1px solid rgb(30,33,40);
}
.page_credits .feedContainer .pull-left.leftPane {
	box-sizing: border-box;
	padding-left: 8px;
	padding-right: 8px;
}

.page_characterprofile #characterProfileTable thead th:first-of-type {
	position: relative;
	width: 28%;
}
.page_characterprofile #characterProfileTable thead th:last-of-type {
	text-align: left;
	padding-left: 16px;
}
.page_characterprofile .outfit {
	position: absolute;
	top: 0;
	left: 0;
}
.page_characterprofile .flag {
	position: absolute;
	top: 16px;
	right: 16px;
}
.postHolder iframe {
	display: block;
	margin: auto;
}

/* Riftfall overview and library */
.riftfall-intro,
.riftfall-library,
.riftfall-world-map {
	margin: 2rem 0;
	color: #d9dbe3;
}

.riftfall-intro {
	padding: 28px;
	border: 1px solid #443b4d;
	border-top: 3px solid #c9a25b;
	background: rgba(10, 12, 18, 0.94);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.riftfall-intro-copy {
	max-width: 760px;
}

.riftfall-kicker {
	margin: 0 0 8px;
	color: #d1a233;
	font-size: 0.78rem;
	font-weight: bold;
	text-transform: uppercase;
}

.riftfall-intro h1,
.library-heading h1 {
	margin: 0;
	color: #f3f0e8;
	font-size: 2.35rem;
	line-height: 1.15;
}

.riftfall-intro-copy > p:last-child,
.library-heading > p:last-child {
	max-width: 820px;
	margin: 12px 0 0;
	color: #b9bdc8;
	font-size: 1.04rem;
	line-height: 1.65;
}

.riftfall-stat-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 24px 0 0;
	border-top: 1px solid #332e3a;
	border-bottom: 1px solid #332e3a;
}

.riftfall-stat-strip div {
	min-width: 0;
	padding: 15px 12px;
	text-align: center;
}

.riftfall-stat-strip div + div {
	border-left: 1px solid #332e3a;
}

.riftfall-stat-strip strong,
.riftfall-stat-strip span {
	display: block;
}

.riftfall-stat-strip strong {
	color: #f0bd4d;
	font-size: 1.35rem;
}

.riftfall-stat-strip span {
	margin-top: 4px;
	color: #8f96a6;
	font-size: 0.78rem;
	text-transform: uppercase;
}

.riftfall-quick-links {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 18px 0 0;
	border: 0;
}

.riftfall-quick-links a,
.library-actions a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 10px;
	border: 1px solid #49404f;
	background: #141720;
	color: #e7e8ec;
	font-weight: bold;
	text-align: center;
}

.riftfall-quick-links a:hover,
.library-actions a:hover {
	border-color: #c9a25b;
	background: #1d202a;
	color: #f3c765;
}

.riftfall-feature-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 28px;
}

.riftfall-feature-row > div {
	min-width: 0;
	padding-top: 18px;
	border-top: 2px solid #36313e;
}

.riftfall-feature-row > div > i {
	color: #4ea37a;
	font-size: 1.35rem;
}

.riftfall-feature-row h2 {
	margin: 10px 0 8px;
	color: #ece9e1;
	font-size: 1.08rem;
}

.riftfall-feature-row p {
	margin: 0;
	color: #aeb2be;
	line-height: 1.55;
}

.riftfall-newest-player {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin: -0.75rem 0 2rem;
	padding: 16px 4px;
	border-top: 1px solid #3b3541;
	border-bottom: 1px solid #3b3541;
}

.riftfall-newest-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #426951;
	background: #111b18;
	color: #71c795;
	font-size: 1.1rem;
}

.riftfall-newest-player span,
.riftfall-newest-player strong {
	display: block;
}

.riftfall-newest-player span {
	color: #8f96a6;
	font-size: 0.72rem;
	font-weight: bold;
	text-transform: uppercase;
}

.riftfall-newest-player strong {
	margin-top: 3px;
	font-size: 1.05rem;
}

.riftfall-newest-player p {
	margin: 4px 0 0;
	color: #b9bdc8;
}

.riftfall-newest-player time {
	color: #858c9c;
	font-size: 0.78rem;
	text-align: right;
}

.riftfall-event-widget .body {
	padding-bottom: 12px;
	text-align: center;
}

.riftfall-event-widget .body > strong {
	display: block;
	color: #f0d58f;
	font-size: 1.05rem;
}

.riftfall-event-countdown {
	margin-top: 7px;
	color: #72d19b;
	font-family: Consolas, monospace;
	font-size: 1.65rem;
	font-weight: bold;
}

.riftfall-event-time {
	margin-top: 2px;
	color: #8f96a6;
	font-size: 0.74rem;
	text-transform: uppercase;
}

.riftfall-event-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.riftfall-event-meta code,
.riftfall-event-meta span {
	padding: 4px 6px;
	border: 1px solid #3a3440;
	background: #11131a;
	color: #bfc3cc;
	font-size: 0.72rem;
}

.riftfall-event-meta code {
	color: #e6bd62;
}

.library-heading {
	padding: 4px 0 22px;
	border-bottom: 1px solid #3a3440;
}

.library-index {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 28px;
	border: 0;
}

.library-index a {
	padding: 8px 12px;
	border: 1px solid #3b414b;
	background: rgba(11, 13, 19, 0.86);
	color: #cbd0da;
}

.library-index a:hover {
	border-color: #c9a25b;
	color: #f0c56a;
}

.library-section {
	padding: 24px 0;
	border-top: 1px solid #312d36;
	scroll-margin-top: 16px;
}

.library-section:first-of-type {
	border-top: 0;
}

.library-section h2 {
	margin: 0 0 18px;
	color: #f0ede5;
	font-size: 1.35rem;
}

.library-section h2 i {
	width: 28px;
	color: #d1a233;
}

.library-section > p {
	max-width: 900px;
	color: #b5b9c4;
	line-height: 1.65;
}

.wiki-step-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid #35313b;
	background: #35313b;
}

.wiki-step-grid article {
	min-width: 0;
	padding: 16px;
	background: #11141c;
}

.wiki-step-grid article > strong {
	display: inline-grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border: 1px solid #a77e2b;
	color: #f0c56a;
}

.wiki-step-grid h3,
.wiki-item-grid h3 {
	margin: 12px 0 6px;
	color: #f0ede5;
	font-size: 1rem;
}

.wiki-step-grid p,
.wiki-item-grid p {
	margin: 0;
	color: #aeb2be;
	line-height: 1.55;
}

.wiki-route {
	max-width: 920px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: wiki-route;
}

.wiki-route li {
	position: relative;
	min-height: 38px;
	padding: 11px 12px 11px 54px;
	border-top: 1px solid #302d36;
	color: #b8bdc7;
	line-height: 1.55;
	counter-increment: wiki-route;
}

.wiki-route li::before {
	position: absolute;
	top: 9px;
	left: 8px;
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 1px solid #4c4436;
	color: #efc66e;
	content: counter(wiki-route);
}

.wiki-route strong {
	color: #e7e4dc;
}

.wiki-item-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid #35313b;
	background: #35313b;
}

.wiki-item-grid article {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 14px;
	min-width: 0;
	padding: 15px;
	background: #11141c;
}

.wiki-item-grid img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	image-rendering: pixelated;
}

.wiki-item-grid h3 {
	margin-top: 0;
}

.wiki-item-grid p + p {
	margin-top: 6px;
}

.wiki-item-grid small {
	display: block;
	margin-top: 8px;
	color: #7f8795;
	line-height: 1.45;
}

.library-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid #35313b;
	background: #35313b;
}

.library-facts dl {
	min-width: 0;
	margin: 0;
	padding: 14px;
	background: #11141c;
}

.library-facts dt {
	color: #858d9d;
	font-size: 0.76rem;
	text-transform: uppercase;
}

.library-facts dd {
	overflow-wrap: anywhere;
	margin: 6px 0 0;
	color: #f0c466;
	font-weight: bold;
}

.progression-track {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid #35313b;
	background: #35313b;
}

.progression-track > div {
	min-width: 0;
	padding: 16px;
	background: #11141c;
}

.progression-track strong,
.progression-track span {
	display: block;
}

.progression-track strong {
	color: #58a986;
	font-size: 1.15rem;
}

.progression-track span {
	margin-top: 8px;
	color: #aeb3bf;
	line-height: 1.45;
}

.library-system-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
}

.library-system-list article {
	min-width: 0;
	padding-top: 15px;
	border-top: 2px solid #3b3642;
}

.library-system-list h3 {
	margin: 0 0 7px;
	color: #e8e7e2;
	font-size: 1.05rem;
}

.library-system-list p {
	margin: 0 0 8px;
	color: #adb2bd;
	line-height: 1.55;
}

.command-grid {
	display: grid;
	grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
	border: 1px solid #35313b;
}

.command-grid code,
.command-grid span {
	padding: 11px 14px;
	border-bottom: 1px solid #2c2931;
}

.command-grid code {
	background: #101c1a;
	color: #66bd93;
	font-weight: bold;
}

.command-grid span {
	background: #11141c;
	color: #b8bdc8;
}

.command-grid > :nth-last-child(-n+2) {
	border-bottom: 0;
}

.library-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.library-actions a {
	min-width: 160px;
}

/* Live status */
.server-state {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: bold;
}

.server-state:before {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	content: "";
}

.server-state.online {
	color: #6fc79b;
}

.server-state.online:before {
	background: #45b77d;
	box-shadow: 0 0 0 4px rgba(69, 183, 125, 0.14);
}

.server-state.offline {
	color: #d77878;
}

.server-state.offline:before {
	background: #c45c5c;
	box-shadow: 0 0 0 4px rgba(196, 92, 92, 0.14);
}

/* Real client minimap */
.map-toolbar,
.map-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.map-toolbar {
	flex-wrap: wrap;
	margin-top: 18px;
	padding: 10px;
	border: 1px solid #39343f;
	background: rgba(10, 12, 18, 0.94);
}

.map-floors,
.map-zoom {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.map-floors button,
.map-zoom button {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #44404a;
	background: #141720;
	color: #c9cdd7;
	font: inherit;
	font-weight: bold;
}

.map-floors button:hover,
.map-floors button.active,
.map-zoom button:hover {
	border-color: #d1a233;
	background: #31291b;
	color: #f3ca70;
}

.map-caption {
	min-height: 24px;
	padding: 10px 2px;
	color: #aeb4c0;
}

.map-caption strong {
	color: #e8e6df;
}

.map-stage {
	height: min(68vh, 780px);
	min-height: 430px;
	overflow: auto;
	border: 1px solid #4a424f;
	background: #080a0d;
	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.72);
}

.map-stage img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	transform-origin: left top;
	image-rendering: auto;
}

/* Compact language control in the main navigation. */
nav .container > div > ul > li.riftfall-language-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 11px 8px;
	vertical-align: top;
}

nav .container > div > ul > li.riftfall-language-switch > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 34px;
	padding: 7px 6px;
	border: 1px solid transparent;
	color: #b9bdc8;
	font-size: 0.78rem;
	line-height: 1;
}

nav .container > div > ul > li.riftfall-language-switch > a:hover,
nav .container > div > ul > li.riftfall-language-switch > a.active {
	border-color: #b58b38;
	background: #161922;
	color: #f3d88b;
}

.riftfall-flag {
	display: inline-block;
	flex: 0 0 18px;
	width: 18px;
	height: 12px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-sizing: border-box;
}

.riftfall-flag-pl {
	background: linear-gradient(to bottom, #fff 0 50%, #dc143c 50% 100%);
}

.riftfall-flag-gb {
	background:
		linear-gradient(33deg, transparent 43%, #fff 43% 48%, #cf142b 48% 52%, #fff 52% 57%, transparent 57%),
		linear-gradient(-33deg, transparent 43%, #fff 43% 48%, #cf142b 48% 52%, #fff 52% 57%, transparent 57%),
		linear-gradient(to right, transparent 38%, #fff 38% 44%, #cf142b 44% 56%, #fff 56% 62%, transparent 62%),
		linear-gradient(to bottom, transparent 32%, #fff 32% 40%, #cf142b 40% 60%, #fff 60% 68%, transparent 68%),
		#21468b;
}

/* Live item data shown for every equipped item on character profiles. */
#piv_flex .riftfall-equipment-item {
	cursor: help;
	outline: 1px solid transparent;
	outline-offset: -2px;
}

#piv_flex .riftfall-equipment-item:focus {
	outline-color: #f0d27c;
}

#piv_flex .riftfall-equipment-item.rarity-common { box-shadow: inset 0 0 0 1px #8d929c; }
#piv_flex .riftfall-equipment-item.rarity-rare { box-shadow: inset 0 0 0 1px #4a89d8; }
#piv_flex .riftfall-equipment-item.rarity-epic { box-shadow: inset 0 0 0 1px #b253dd; }
#piv_flex .riftfall-equipment-item.rarity-legendary { box-shadow: inset 0 0 0 1px #e6a23a; }

.riftfall-item-tooltip {
	position: fixed;
	left: 0;
	top: 0;
	box-sizing: border-box;
	width: min(290px, calc(100vw - 20px));
	max-height: calc(100vh - 20px);
	overflow-y: auto;
	padding: 12px;
	border: 1px solid #474b56;
	border-top: 3px solid #8d929c;
	background: rgba(8, 10, 15, 0.98);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
	color: #d6d8df;
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(3px);
	z-index: 10000;
}

.riftfall-equipment-item.tooltip-open .riftfall-item-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.riftfall-item-tooltip.rarity-rare { border-top-color: #4a89d8; }
.riftfall-item-tooltip.rarity-epic { border-top-color: #b253dd; }
.riftfall-item-tooltip.rarity-legendary { border-top-color: #e6a23a; }

.riftfall-item-name {
	display: block;
	margin-bottom: 8px;
	color: #f2dc9a;
	font-family: Georgia, serif;
	font-size: 15px;
	text-transform: capitalize;
}

.riftfall-item-tooltip.rarity-rare .riftfall-item-name { color: #78b5ff; }
.riftfall-item-tooltip.rarity-epic .riftfall-item-name { color: #d989ff; }
.riftfall-item-tooltip.rarity-legendary .riftfall-item-name { color: #ffc767; }

.riftfall-item-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 9px;
}

.riftfall-item-tags span {
	padding: 3px 5px;
	border: 1px solid #303541;
	background: #11151e;
	color: #aeb4c2;
}

.riftfall-item-tags b {
	color: #f0f1f4;
}

.riftfall-item-section {
	padding-top: 8px;
	border-top: 1px solid #292e38;
}

.riftfall-item-section + .riftfall-item-section {
	margin-top: 7px;
}

.riftfall-item-section small {
	display: block;
	margin-bottom: 4px;
	color: #9ea6b7;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

.riftfall-item-section ul {
	margin: 0;
	padding: 0;
}

.riftfall-item-section li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 0;
	list-style: none;
}

.riftfall-item-bonuses li {
	display: block;
	color: #b9e1cc;
}

.riftfall-item-empty {
	margin: 7px 0 0;
	color: #8e95a3;
}