: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);
}



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

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

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

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