/*!
 * File Viewer
 * 
 * author: sizeof(cat) <sizeofcat AT riseup DOT net> http://sizeof.cat
 * url: http://sizeof.cat/project/file-viewer/
 * copyright: 2020-2025
 * license: GPLv3
 * 
 *           o8o                                  .o88o.   .o                         .   o.   
 *           `"'                                  888 `"  .8'                       .o8   `8.  
 *  .oooo.o oooo    oooooooo  .ooooo.   .ooooo.  o888oo  .8'   .ooooo.   .oooo.   .o888oo  `8. 
 * d88(  "8 `888   d'""7d8P  d88' `88b d88' `88b  888    88   d88' `"Y8 `P  )88b    888     88 
 * `"Y88b.   888     .d8P'   888ooo888 888   888  888    88   888        .oP"888    888     88 
 * o.  )88b  888   .d8P'  .P 888    .o 888   888  888    `8.  888   .o8 d8(  888    888 .  .8' 
 * 8""888P' o888o d8888888P  `Y8bod8P' `Y8bod8P' o888o    `8. `Y8bod8P' `Y888""8o   "888" .8'  
 *                                                         `"                             "'   
 */

#file-viewer {
	max-width: 100vw;
	font-family: "Fira Code", monospace;
	border: 1px solid #ddd;
	box-shadow: 5px 5px 5px #eee;
	margin-top: 20px;
}

#file-viewer pre {
	margin:0 !important;
}

.offset,
.hex,
.chr {
	padding: 0!important;
	border: 0!important;
	box-shadow: none!important;
}

@media screen and (max-width:839px) {
	#file-viewer {
		overflow: auto;
	}
}

#file-viewer-header {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: #ddd;
	color: #000;
}

#file-viewer-separator {
	height: 0.2rem;
}

#file-viewer > div > div > div {
	contain: content;
	display: grid;
	grid-template-columns: min-content min-content min-content;
	gap: 0.4rem;
}

#file-viewer-content {
	position : relative;
}

#file-viewer-content > div {
	position: absolute;
	left: 0;
	right: 0;
}

.chr {
	margin : 0 0.4rem 0 1rem!important;
}

.highlighted {
	position: absolute;
	z-index: 1;
	border-radius: 4px;
	text-align: center;
	pointer-events: none;
	padding:0!important;
}

:where(#file-viewer-separator, #file-viewer-content) .offset {
	background-color: #ddd;
	color: #000;
}

#file-viewer-content .chr {
	background-color: #eee;
	color: #000;
}

.highlighted {
	background-color: #000;
	color: #fff;
}