@media (min-width: 980px){
	html body {
		margin-inline-end: clamp(300px, 19vw, 500px);
	}

	#elQueryLog {
		position: fixed;
		top: 0;
		bottom: 0;
		inset-inline-end: 0;
		padding-bottom: 70px;
		width: clamp(300px, 19vw, 500px);
		background: #121417;
		color: #fafafa;
		overflow: auto;
	}

	:is(#elQueryLog, .elQueryLogMenu) h3 {
		color: #fff;
		padding: 1em;
		text-align: center;
		font-weight: 600;
	}

	#elQueryLog > div{
		border-bottom: 1px solid hsl(0 0% 100% / .25);
	}

	#elQueryLog [data-ipsdialog] {
		cursor: pointer;
	}

	:is(#elQueryLog, .elQueryLogMenu) .prettyprint {
		border: 0;
		background: transparent;
		white-space: pre-wrap;
		padding: 1.2em;
	}

	:is(#elQueryLog, .elQueryLogMenu) .prettyprint:hover{
		background: hsl(0 0% 100% / .08);
	}


}

@media screen and (max-width: 979px) {
	#elQueryLog {
		display: none;
	}
}