/*
	query.css (kalucity)
	Stranica "Servers" (server.php): kartice servera koje osvezava server.js.
*/

.ps-server-container { display: flex; flex-wrap: wrap; gap: 14px; text-align: left; }
#ps-container .ps-server-wrapper { width: min(470px, 100%); margin: 0; float: none; text-align: left; }

#ps-container .ps-server-main {
	width: 100%;
	margin: 0;
	overflow: hidden;
	text-align: left;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}
.ps-server-main .hdr {
	padding: 9px 12px;
	font: 600 13.5px var(--font-head);
	letter-spacing: .03em;
	text-align: center;
	background: var(--panel-2);
	border-bottom: 1px solid var(--line);
}
.ps-server-main .hdr img.flag { float: left; margin-top: 2px; }
.ps-server-main .hdr img.ajax { float: right; }

.ps-server-main .map { float: left; width: 160px; height: 120px; margin: 10px; }
.ps-server-main .map img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--r-sm); }

.ps-server-main .content, .ps-server-main .details, .ps-server-main .rcon {
	height: 112px;
	padding: 8px 10px 0 0;
	overflow: hidden;
	font-size: 12.5px;
}
.ps-server-main .players, .ps-server-main .rules { font-size: 12.5px; padding: 0 10px 10px; }

.ps-server-main table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ps-server-main table th { padding: 5px 6px; font: 600 11px var(--font-head); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); background: var(--panel-2); }
.ps-server-main table td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.ps-server-main table tr.even td { background: var(--row-alt); }
.ps-server-main table tr.footer th { height: 3px; padding: 0; font-size: 0; }
.ps-server-main table .name { text-align: left; }
.ps-server-main table .kills { text-align: center; }
.ps-server-main table .time { text-align: right; }

#ps-container .ps-server-main .content p label,
#ps-container .ps-server-main .details p label { float: left; width: 84px; font-weight: 600; color: var(--dim); }
#ps-container .ps-server-main .content p span.ping,
#ps-container .ps-server-main .details p span.ping { margin-left: 1em; color: var(--mute); }
.ps-server-main .content .timeout, .ps-server-main .details .timeout { line-height: 90px; text-align: center; color: var(--mute); }

#ps-container .ps-server-main .menu {
	margin: 0 0 6px 180px;
	padding: 4px 0;
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
#ps-container .ps-server-main .menu ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
#ps-container .ps-server-main .menu ul li { display: block; margin: 0; }
#ps-container .ps-server-main .menu ul li a { display: block; padding: 3px 9px; border-radius: 999px; color: var(--dim); }
#ps-container .ps-server-main .menu ul li.selected a { color: var(--gold-ink); background: linear-gradient(var(--gold-hi), var(--gold)); }

.ps-server-main .clear { clear: left; height: 0; }

#ps-container .ps-column-sep { border: 0; }
#ps-container .ps-column-sep p { text-align: left; }
#timer-bar { display: block; width: 1px; height: 2px; border-radius: 1px; background: var(--gold); }