@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body {
	font-family: 'Manrope';
	font-size: 16px;
	background-color: #f9f9f9;
	color: #444;
	box-sizing: border-box;
}

body .json-container {
	font-family: 'Open Sans';
	font-size: 16px;
	background-color: transparent;
	color: #808080;
	box-sizing: border-box;
	font-family: monospace;
}
body .json-container .json-number {
	color: #416ac4;
    font-weight: 700;
}
body .json-container .json-string {
    color: #1eae3b;
    font-weight: 700;
    font-family: 'Manrope';
    font-size: 14px;
	word-break: break-word;
}
body .json-container .json-key {
	flex: 0 0 auto;
	width: auto;
	min-width: 90px;
}
body .json-container .json-value {
	flex: 1;
    width: auto;
}
.line {
	margin: 4px 0;
	display: flex;
	justify-content: flex-start;
}
.caret-icon, .empty-icon {
	width: 18px;
	text-align: center;
	cursor: pointer;
}
.json-type, .json-key, .json-index, .json-size {
	margin: 0 4px;
}
.json-value {
	margin-left: 8px;
}
.json-key {
color: #444;
}
.json-number {
	color: #f9ae58;
}
.json-boolean {
	color: #ec5f66;
}
.json-string {
	color: #86b25c;
}
.hidden {
	display: none;
}
.fas {
	display: inline-block;
	border-style: solid;
	width: 0;
	height: 0;
}
.fa-caret-down {
	border-width: 6px 5px 0 5px;
	border-color: #808080 transparent;
}
.fa-caret-right {
	border-width: 5px 0 5px 6px;
	border-color: transparent transparent transparent #808080;
}

h1 {
	flex: 1;
	padding: 12px 24px;
	font-family: 'Geologica';
	color: #EEE;
}
h1 label {
	position: absolute;
	left: 24px;
	bottom: 8px;
	display: block;
	font-size: 14px;
	color:hsl(0, 0%, 50%); 
}
h1 label span { color:hsl(0, 0%, 70%); margin-left: 8px; }
header {
	position: relative;
	display: flex;
	align-items: center;
	background: #444;
}

header .buttons {
	padding: 0 24px;
}
header button:nth-child(1) { background: #47c1b7; }
header button:nth-child(3) { background: #aec4ec; }
button {
	padding: 16px 32px;
	background: #6293ee;
	color: white;
	font-weight: 700;
	font-family: 'Manrope';
	border: 0;
	outline: 0;
	cursor: pointer;
}
button.small {
	padding: 8px 16px;
	font-size: 14px;
}

.buttons-B {
	display: flex;
	align-items: center;
	place-content: flex-end;
    width: 100%;
}
.buttons-B button { margin-left: 2px; background: #aec4ec; }
.buttons-B button.on { background: #6293ee; }



.uptime { flex: 1; display: inline-block; }







body { background: hsl(0, 0%, 96%); }


#log {
	display: flex;
	flex-flow: column;
	font-family: monospace;
	unicode-bidi: isolate;
	white-space: pre;
	white-space: normal;
	font-family: 'Roboto Mono';
	font-size: 14px;
	letter-spacing: -0.5px;
}
.log-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1px;
	padding: 2px;
	background: hsl(0, 0%, 92%);
}
.log-row:nth-child(odd) { background: hsl(0, 0%, 96%); }
.log-row:hover { background: hsl(45, 89%, 93%); }
.log-row:hover { background: white; }
.log-row hr { width: 100%; }
.log-row .time {
	flex: 0 0 auto;
	width: 150px;
	margin-right: 8px;
    padding: 4px 0px;
    text-align: center;
	letter-spacing: -1px;
	color: hsl(0, 0%, 75%);
	font-size: 13px;
}
.log-row .time span { color: hsl(0, 0%, 0%); }
.log-row .txt {
	flex: 0 0 auto;
	width: 160px;
	padding: 4px 8px;
	margin-right: 8px;
    font-weight: 700;
	font-family: 'Geologica';
}
.log-row .txt2 {
	flex: 1;
	padding: 4px 8px;
	margin-right: 8px;
	font-size: 12px;
    font-family: 'Manrope';
	line-height: 1.2;
}
.log-row .txt2 pre {
	padding: 8px;
	background-color: #DDD;
	white-space: pre-wrap;
}
.log-row .txt2 b {
	font-family: 'Geologica';
    font-weight: 700;
	font-size: 14px;
}
.log-row .json { min-width: 150px; }
.log-row .json.open { flex: 8; }
.log-row .jsonX {
	padding: 0;
	margin-right: 8px;
	background: hsl(0, 0%, 95%);
}
.log-row .jsonX span { display: none; }
.log-row .jsonX span.show { display: block; }
.log-row .jsonX i {
	display: inline-flex;
	align-items: center;
	place-content: center;
	min-width: 120px;
	min-height: 19px;
	font-size: 14px;
	font-weight: 700;
	font-style: normal;
	background: darkorange;
	background: hsl(0, 0%, 65%);
	color: white;
	cursor: pointer;
}
.log-row .highl { padding: 2px 0px; background: hsl(0, 0%, 85%); }
.log-row .result {
	padding: 3px 8px;
	background: #CCC;
	color:white;
	font-family: 'Geologica';
	font-size: 16px;
	text-align: center;
	cursor: pointer;
}
.log-row .caller {
	flex: 1;
	color: blue;
	font-size: 11px;
	text-align: right;
	letter-spacing: -0.7px;
}


.log-row.new .time {
	background: hsl(0, 0%, 30%);
	color:  hsl(0, 0%, 60%);
}
.log-row.new .time span {
	background: hsl(0, 0%, 30%);
	color: white;
}

.verbose .txt {
	background: #aec4ec;
	color: white;
}
.http .txt {
	background: #6e9cf1;
	color: white;
}
.error .txt {
	background: hsla(0, 100%, 50%, 0.5);
	color: white;
}
.warn .txt {
	background: darkorange;
	color: white;
}
.debug .txt {
	background: #47c1b7;
	color: white;
}


.http.REPLACE-MULTI .txt,
.http.REPLACE .txt,
.http.UPDATE .txt {
	background: #ee6291;
	color: white;
}
.http.DELET .txt {
	background: red;
	color: white;
}







h2 { margin: 48px 0 8px; font-family: 'Geologica'; }
.graph {
	display: flex;
	flex-flow: row-reverse;
	align-items: flex-end;
	margin-bottom: 80px;
}

.graph .bar {
	position: relative;
	display: flex;
	flex-flow: row;
	align-items: flex-end;
	place-content: center;
	flex: 1;
	margin: 0 1px;
	background: #6293ee;
}
.graph .bar2 {
	position: relative;
	width: 70%;
	margin: 0 1px;
	background: darkorange;
}
.graph span {
	position: absolute;
	top: 4px;
	left: 0;
	right: 0;
	margin: auto;
	color: white;
	letter-spacing: -1px;
	font-size: 10px;
	text-align: center;
	opacity: 0.75;
}
.graph .bar2 span { top: -14px; opacity: 0.5; }
.graph label {
    position: absolute;
	bottom: -15px;
    left: -21px;
    width: 80px;
    letter-spacing: -2px;
    font-size: 12px;
    text-align: center;
    opacity: 0.75;
}



.users {margin: 4px 0 24px;
	display: flex;
	flex-flow: row wrap;
	padding: 4px;
}
.users .user {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	margin: 1px;
	background: #6e9cf1;
	color: white;
	font-family: 'Manrope';
}



.chart {
	width: 100%;
	height: 200px;
	margin-bottom: 64px;
}