@import url('https://fonts.googleapis.com/css?family=Lato:300,400');

/**
 * GENERAL STYLING
 */
body {
	background-color:#333;
	margin:0px;
}

body, input, select {
	font-family:Lato, Trebuchet MS, Arial, sans-serif;
}

body > div {
	overflow:hidden;
}

h1, h2, h3, h4 {
	color:#fff;
}

h1 {
	font-size:48px;
	font-weight:300;
}

h1 span {
	font-size:24px;
	color:#ccc;
}

input[type="text"], input[type="password"], select {
	min-width:200px;
	border:solid 1px #ccc;
	padding:6px;
	box-sizing:border-box;
}

select {
	padding:5px;
}

input[type="submit"], .btn {
	display:inline-block;
	background-color:#428bca;
	font-size:14px;
	border:none;
	text-decoration:none;
	color:#fff;
	padding:8px;
	margin:0px 3px 0px 0px;
	cursor:default;
	opacity:0.7;
	transition:.5s ease;
}

.btnsm {
	font-size:13px;
	padding:3px 6px;
}

.btnsub {
	background-color:rgba(255, 255, 255, 0.3);
}

input[type="submit"]:hover, .btn:hover {
	opacity:0.9;
}

.btngroup {
	margin-top:6px;
}

.log {
	padding: 0;
	margin: 0;
}

.content-box {
	border:2px solid rgba(0, 0, 0, 0.7);
	background-color:#fff;
	color:#000;
	padding:20px;
	border-radius:50px;
}

.log li {
	list-style-type:none;
	border-bottom:solid 1px #ccc;
	overflow:hidden;
	display:flex;
}

.log li.entry {
	display:flex;
	flex-direction:column;
	align-items:stretch;
}

.log li .log-face {
	padding:6px;
	overflow:hidden;
	display:flex;
	cursor:pointer;
	user-select:none;
}

li.entry > .log-face > .content {
	flex-grow:1;
}

li.entry > .log-face > .time {
    width:20%;
    text-align:right;
}

li.entry > .log-face > .server {
    width:15%;
	text-align:center;
}

li.entry > .log-face > div {
	margin:5px 1px;
}

.log li .left {
	float:left;
}

.log li .right {
	float:right;
}

.log li .fade {
	color:#ccc;
}

.graph {
	width:100%;
	height:460px;
	background-color:#fff;
	border:solid 2px rgba(0, 0, 0, 0.7);
	box-sizing:border-box;
}

.container {
	width:90%;
	max-width:1400px;
	margin:0px auto;
}

.navbar, .errorbar, .client > div, .footer {
	display:none;
}

.client form {
	color:#fff;
}

.client form label {
	min-width:15%;
	display:inline-block;
	margin-right:6px;
}

.errorbar {
	background-color:#ff9494;
	border-bottom:solid 1px #000;
	padding:6px 6px 9px 6px;
}

.footer {
	font-size:14px;
	color:#222;
	text-align:center;
}

.scrollable::-webkit-scrollbar {
	width:10px;
}
.scrollable::-webkit-scrollbar-thumb {
	border-radius:30px;
}
.scrollable::-webkit-scrollbar-track {
	border-right-width:4px;
	border-right-style:solid;
}

/**
 * LOGIN STYLING
 */
.login {
	display:none;
}

.login .main {
	max-width:420px;
	background-color:#fff;
	border:solid 2px rgba(0, 0, 0, 0.7);
	margin:120px auto 0px auto;
	padding:20px;
	border-radius:50px;

}

.login .error {
	display:none;
	background-color:#ff9494;
	padding:9px;
	margin-bottom:12px;
}

.login h1 {
	background-color:#eee;
	font-size:42px;
	font-weight:300;
	text-align:center;
	padding:8px 8px 12px 8px;
	color:#000;
	margin:0px;
    border-radius:20px;
}

.login form {
	padding:12px;
}

.login input[type="text"], .login input[type="password"] {
	width:100%;
	margin-bottom:12px;
	margin-top:2px;
	border-radius:5px;
}

.login input[type="submit"] {
	font-size:14px;
	padding:6px 12px;
	border-radius:5px;
}

.login .center {
	text-align:center;
}

/**
 * DIALOG STYLING
 */
.mask {
	display:none;
	position:fixed;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	background-color:rgba(0, 0, 0, 0.9);
	overflow-y:scroll;
	z-index:99;
}

.mask.active {
	display:flex;
	align-items:center;
	justify-content:center;
}

.dialog-box {
	border:2px solid rgba(0, 0, 0, 0.7);
	color:#000;
	border-radius:50px;
	width:80%;
	height:80%;
	min-width:360px;
	min-height:380px;
	overflow:hidden;
}

.dialog {
	position:relative;
	width:100%;
	height:100%;
	/*background-color:rgba(255, 255, 255, 0.95);
	border:solid 6px rgba(0, 0, 0, 0.7);*/
	color:#000;
	/*box-sizing:border-box;*/
	overflow:hidden;
}

.mask .dialog {
	display:none;
}

@keyframes dialog {
	from {opacity:0.1;display:none;}
	to {opacity:1.0;display:flex;}
}

.mask .dialog.active {
	display:flex;
	animation-name:dialog;
	animation-duration:0.3s;  
	animation-direction:normal;
	animation-fill-mode:forwards;
	flex-direction:row;
	justify-content:space-between;
}

.dialog h1, .dialog h2, .dialog h3, .dialog h4 {
	font-weight:300;
	color:#333;
	margin:0px;
}

.dialog h1 {
	font-size:32px;
}

.dialog h2 {
	font-size:14px;
}

.dialog h3 {
	font-size:12px;
	font-weight:bold;
	color:#aaa;
	margin-bottom:0px;
}

.dialog .info {
	overflow-y:auto;
	width:500px;
}

.dialog .info-box {
	flex-grow:0;
	overflow:hidden;
	padding:20px;
	padding-left:0;
	display:flex;
	align-items:stretch;
	background-color:#ffffff80;
}

.dialog .resizer {
	height:100%;
	width:3px;
	background-color:#bbb;
	cursor:col-resize;
}

.dialog .logs-box {
	width:min-content;
	flex-grow:1;
	overflow:hidden;
	padding:20px;
	padding-right:0;
	display:flex;
	align-items:stretch;
	background-color:#fffe;
}

.dialog .logs {
	overflow-y:auto;
	width:100%;
	padding:12px;
}

.dialog #skinpreview, .dialog .attribute {
	border-bottom:solid 1px #ccc;
}

.dialog #skinpreview {
	margin-top:-32px;
}

.dialog .attribute {
	background-color:#fff;
	padding:9px;
}

.dialog .close {
	position:absolute;
	float:right;
	top:30px;
	right:30px;
	cursor:pointer;
}

.dialog .close img {
	width:24px;
	height:24px;
}

.dialog .filters .label {
	color:#000;
}

.dialog ul.log {
	border-style:solid;
	border-width:1px 1px 0px 1px;
	border-color:#ccc;
	background-color:#ddd;
}

.dialog ul li .log-face {
	background-color:#fffe;
}

.dialog ul li:nth-child(even) .log-face {
	background-color:#f9f9f9;
}

/**
 * HEADER STYLING
 */
.navbar {
	background-color:#222;
	border-bottom:solid 6px #111;
	font-weight:300;
	color:#fff;
	overflow:hidden;
}

.navbar h1 {
	font-size:24px;
	font-weight:300;
	cursor:pointer;
	float:left;
}

.navbar .right {
	border-right:solid 1px #111;
	float:right;
}

.navbar .right a, .navbar .right a:link, .navbar .right a:visited {
	display:inline-block;
	border-left:solid 1px #111;
	text-decoration:none;
	color:#fff;
	padding:21px 12px;
	opacity:0.6;
	transition:.5s ease;
}

.navbar .right a:hover, .navbar .right a.active {
	opacity:1;
}

.navbar img {
	float:left;
	margin:-2px 8px 0px 0px;
}

.dropdown {
	position:relative;
	overflow:visible;
}

.dropdown > div {
	position:absolute;
	right:0px;
	display:none;
	background-color:#222;
	border-style:solid;
	border-width:0px 1px;
	border-color:#111;
	z-index:98;
}

.dropdown a, .dropdown a:link, .dropdown a:visited {
	display:block;
	border-bottom:solid 1px #111;
	text-decoration:none;
	color:#fff;
	padding:9px;
	opacity:0.6;
	transition:.5s ease;
}

.dropdown a:hover {
	opacity:1;
}

/**
 * CONTENT STYLING
 */
.sect {
	overflow:hidden;
}

.half {
	width:50%;
	float:left;
}

.inner {
	margin:0px 16px;
}

.half:first-child .inner {
	margin-left:0px;
}

.half:last-child .inner {
	margin-right:0px;
}

.gr {
	color:#aaa;
}

/**
 * DASHBOARD STYLING
 */
#dashboard .graph {
	margin-top:16px;
	border-radius: 50px;
}

.servers li .badge {
	background-color:rgba(0, 0, 0, 0.2);
	border-radius:12px;
	font-size:14px;
	padding:0px 7px 2px 7px;
	float:right;
}

/**
 * PLAYER STYLING
 */
#players {
	padding-top:24px;
}

#players .search {
	text-align:center;
}

#players .search input {
	font-size:24px;
	padding:12px 12px 14px 12px;
}

#players .search input[type="text"] {
	width:60%;
	max-width:600px;
	border:solid 2px #ccc;
	border-radius:6px 0px 0px 6px;
	-moz-border-radius:6px 0px 0px 6px;
	-webkit-border-radius:6px 0px 0px 6px;
}

#players .search input[type="submit"] {
	background-color:#5dba5d;
	border:solid 2px #46a346;
	border-radius:0px 6px 6px 0px;
	-moz-border-radius:0px 6px 6px 0px;
	-webkit-border-radius:0px 6px 6px 0px;
	color:#fff;
	transition:opacity .5s ease-out;
	-moz-transition:opacity .5s ease-out;
	-webkit-transition:opacity .5s ease-out;
}

#players .search input[type="submit"]:hover {
	opacity:0.8;
}

#players .row {
	overflow:hidden;
}

#players .server {
	width:33%;
	box-sizing:border-box;
	padding-right:6px;
	overflow:hidden;
	float:left;
}

#players .server h4 {
	margin-bottom:4px;
}

#players h2 {
	font-weight:300;
	color:#fff;
	margin-bottom:6px;
}

.playericon {
	width:32px;
	height:32px;
	background-color:#000;
	border:solid 2px #222;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	transition:opacity .5s ease-out;
	-moz-transition:opacity .5s ease-out;
	-webkit-transition:opacity .5s ease-out;
}

.playerlink {
	cursor:pointer;
}

.playerlink .playericon:hover {
	opacity:0.6;
}

.servericon {
	width:32px;
	height:32px;
	background-color:#000;
	border:solid 2px #222;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	transition:opacity .5s ease-out;
	-moz-transition:opacity .5s ease-out;
	-webkit-transition:opacity .5s ease-out;
}

.serverlink {
	cursor:pointer;
}

.serverlink .servericon:hover {
	opacity:0.6;
}

/**
 * LOGS STYLING
 */
.logs .more {
	text-align:center;
	color:#333;
}

#logs .search {
	float:right;
}

#logs ul.log {
	color:#818b98;
}

#logs .log li .log-face {
	padding:10px;
	border:solid #ddd;
	border-width:0 6px;
	background-color: #1f242e;
	transition-duration:0.2s;
}

.log-extra {
	display:flex;
	flex-wrap:wrap;
	opacity:0.0;
	padding:0;
	height:0;
	transition-duration:.5s;
	transition-property:opacity;
}

.active > .log-extra {
	opacity:1.0;
	margin:5px 15px 10px;
	height:auto;
}

#logs .log li.selected {
	background-color:#332442;
}

#logs .log li.selected > .log-face {
	background-color:#402060;
}

.log-extra > span {
	width:50%;
}

span[replacement="player"]  {
    color: #b8bfc6;
}

.filters {
	color:#fff;
	padding-top:3px;
}

.filters .label {
	float:left;
}

.filters a {
	display:inline-block;
	background-color:#428bca;
	border-radius:3px;
	font-family:Arial;
	font-weight:bold;
	font-size:13px;
	padding:4px 8px;
	margin:0px 0px 4px 4px;
	opacity:0.6;
	transition:.5s ease;
	cursor:default;
}

.filters a:hover, .filters a.active {
	opacity:1;
}

.extra-filters {
    display:flex;
    flex-direction:column;
    width:70%;
    margin:10px;
}

.extra-filters > * {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    margin:10px
}

.extra-filters > * > * {
    width:50%;
    text-align:end;
}

.extra-filters > * > * > label {
    margin-right:5px;
    color:#ccc;
}

#copied-content {
    position: absolute;
    width:0;
    height:0;
    padding:0;
	z-index:-1000;
}

/**
 * RESPONSIVE STYLING
 */
@media screen and (max-width: 900px) {
	#playerinfo .search input {
		width:100%;
		margin-bottom:9px;
	}
	#serverinfo .search input {
		width:100%;
		margin-bottom:9px;
	}
}

@media screen and (max-width: 700px) {
	.navbar .right {
		border-right:none;
	}

	.navbar .right a, .navbar .right a:link, .navbar .right a:visited {
		border-left:none;
	}

	.navbar .right span {
		display:none;
	}

	.navbar .right img {
		padding-right:0px;
	}

	.dropdown {
		display:block;
		position:initial;
	}
	
	.dropdown > div {
		left:0px;
	}
	
	input[type="text"], input[type="password"], select {
		width:100%;
		margin-bottom:6px;
	}

	.half {
		width:100%;
		float:initial;
	}

	.half .inner {
		margin:0px;
	}

	#players .server {
		width:100%;
		padding-bottom:12px;
	}

	#players .search input[type="text"] {
		width:60%;
	}
	 
	.dialog {
		position:static;
		width:100%;
		border:none;
		margin-top:0px;
	}
	
	.dialog > div {
		position:static;
	}
	
	.dialog .info {
		width:100%;
	}
	 
	.dialog #skinpreview {
		display:none;
	}
}
 
@media screen and (max-width:420px) {
	h1 {
		font-size:36px;
	}
	
	h1 span {
		font-size:18px;
	}
	
	.navbar h1, .navbar .right {
		float:initial;
	}
	
	.navbar .right a, .navbar .right a:link, .navbar .right a:visited {
		padding:0px 12px 12px 0px;
	}
	
	.login .main {
		max-width:100%;
		margin:12px;
	}
	
	#players .search input {
		font-size:16px;
	}
}