:root {
	--color_a:#004080;
	--color_b:#0164c9;
	--color_c:#2894ff;
	--color_d:#f3f3f3;
	--color_text:#fff;
	--color_dark:#000;
	--text_size:13px;
}

a {text-decoration: none; color:#000;}

* {
	font-family:Arial;
	border-collapse:collapse;
	border:none;
	margin:0;
	padding:0;
	border-spacing:0px;
	outline:none;
	box-sizing:border-box;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #004080;
    border-radius: 4px;
}

body { 
	background: 
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' fill='none' viewBox='0 0 1750 901'%3e	%3cpath stroke='%23fff' stroke-width='7' d='M0 419.967c25.507-.167 113.225-7.645 156.038-36.213 53.015-25.65 55.016-57.839 50.014-61.36-5.001-3.521-36.01-14.586-63.018 97.573-34.517 143.342-34.01 394.317 247.572 472.275 74.815 16.893 259.048-2.552 349.614-202.516 13.355-29.488 13.018-67.637-18.286-75.882-30.929-8.147-72.12 3.389-84.256 66.654-1 6.706-1.501 19.213 4.501 15.591 7.502-4.526-6.502-40.236-35.51-52.307-29.009-12.071-107.531 3.521-60.518 87.011 47.014 83.491 206.06 74.941 273.08 72.929 67.019-2.012 331.239-20.086 480.139-201.685 141.04-172.011 156.55-450.648 96.53-459.701-56.94-8.588-40.51 143.342 83.52 135.798C1598.4 270.897 1742 73.934 1746 0'%3e%3c/path%3e%3c/svg%3e") no-repeat fixed left top ,
		linear-gradient(217deg, rgba(1,100,201,.8), rgba(1,100,201,0) 70.71%),
		linear-gradient(127deg, rgba(102,181,255,.8), rgba(102,181,255,0) 70.71%),
		linear-gradient(336deg, rgba(0,64,128,.8), rgba(0,64,128,0) 70.71%);
	background-attachment: fixed ; 
	background-size: cover;
	min-height:100vh;
	max-width:1024px;
	min-width:656px;
	width:100%; 
	margin:0px auto;
	padding:32px 0;
	scrollbar-gutter: stable;
}

.small_img{
	background-color: #fff;
    border-radius: 11px;
	width:100%;
	object-fit:contain;
}

.button_icon{
	display:inline-block;
	background-repeat:no-repeat;
	background-position:center center;
	height:28px;
	width:28px; 
	cursor:pointer;
}

.icon_print{background-size:18px 18px;background-image:url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath  vector-effect='non-scaling-stroke' d='M5.5 10V16H12.5V10 M5.5 4.5V1.5L12.5 1.5V4.5 M3.5 9V11.5H1.5V4.5H16.5V11.5H14.5V9V8.5H14H4H3.5V9Z' stroke-width='1' stroke='%23888'/%3e%3c/svg%3e")}
.icon_search{background-size:18px 18px;background-image:url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath vector-effect='non-scaling-stroke' d='M17 17L12 12' stroke-width='1.2' stroke='%23888'/%3e%3ccircle cx='7.5' cy='7.5' r='6' stroke-width='1.2' stroke='%23888'/%3e%3c/svg%3e")}
.icon_close{background-size:24px 24px;background-image:url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath  vector-effect='non-scaling-stroke' d='M4 4.5L12 12.5 M12 4.5L4 12.5' stroke='%23888' stroke-linecap='round' stroke-width='1.25'/%3e%3c/svg%3e")}

select,input[type="text"]{
	border:0;
	color:var(--color_dark);
	text-align-last:left;
	-webkit-appearance:none;
	appearance: none;
	border-bottom:1px solid var(--color_dark);
	background-color:transparent;
	width:100%; 
	height:100%;
}

input::placeholder{color:rgba(0,92,179,.5);font-size:var(--text_size);}

.panel{
	background-color:rgba(245,250,255,.8);
	box-shadow:0px 4px 25px rgba(0,92,179,.3);
	border-radius:16px;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-top:1px solid rgba(255,255,255,0.3);
	border-bottom:1px solid rgba(0,0,0,0.1); 
	display:grid;
	align-content: start;
	grid-template-columns:256px minmax(400px, auto);
	grid-template-rows: 48px auto;
	grid-template-areas:
		'search content'
		'catalog content';	
}

.catalog {
	padding: 8px; 
	grid-area: catalog;  
	font-size:var(--text_size);
}

.catalog summary {
	padding: 8px 0;
	cursor:pointer;font-weight: bold;
}

.catalog a {
	display:block;
	padding: 6px 0 6px 14px;
	margin:2px 0;
	color:var(--color_dark);
	border-radius: 16px;
}

.catalog details:not(:last-child)[open] {
	border-bottom:1px solid rgba(0,0,0,0.3); 
}

.catalog details details {
	display:block;
	margin-left:16px;
} 

.catalog details a {
	display:block;
	padding:6px 0 6px 26px;
} 

.content:after{
	z-index:-2;
	content:"";
	position:absolute;
	left:0;top:16px;
	display:block; 
	height:calc(100% - 32px);
	width:100%;
	border-left:1px solid rgba(0,0,0,0.3);
}

.content {
	padding: 16px;
	padding-bottom: 32px;
	grid-area: content;
	position:relative;
	font-size:var(--text_size);
}

.search {
	grid-area: search;
	display:grid;
	grid-template-columns:46px auto 46px 46px;
	align-items:center;
	justify-items:center;
	font-size:var(--text_size);
	height:48px;
	width:100%; 
}

.search input{height:28px;}

@supports selector(:has(*)){
	:not(:has(.doc:target)) #home{display:inline;}
}


.doc{
	display:none;
	line-height: 24px;
	font-size:var(--text_size);
}

.doc:target{
	display:inline;
	scroll-snap-align: start;
	scroll-margin-top: 40px;
}

.doc ul {
	padding-left:16px;
	list-style-type: disc;
}
.doc ul li {
	margin:12px 0;
}

.doc a {color:var(--color_b);}

.title {font-weight:bold;font-size:20px;scroll-margin-top: 2em;}

.hidden{display:none;}

.search_title{color:var(--color_a);font-size:16px;}

.search_description{color:#000;padding:8px 0;}

#search{display:none;}

#search:target{display:inline;}

#search a{color:#000;}
hr{
	border-bottom:1px solid rgba(0,0,0,1);
	margin:8px 0;
}

.table{
	font-size:var(--text_size);
	/* width:calc(100% + 32px);  */
	width:100%; 
	/* margin:8px -16px; */
	margin:8px 0;
	border-collapse: collapse;
}

.table td,.table th  {
	padding: 8px;
	text-align: left;
	/* border-bottom: 1px solid rgba(0,0,0,0.3); */
	border: 1px solid rgba(0,0,0,0.3);
}

.table td:first-child{
	white-space: pre;
	text-align:center;
}

.table th {
	background-color: rgba(102,181,255,.4);
	text-align:center;
}

.gallery input[class="screen"]:checked + .item-hugger {
	border-color:#004080;
	position: relative;
}

.gallery input[class="screen"]:checked + .item-hugger:before {
	z-index:-2;
	content:""; 
	position:absolute;
	left:calc(50% - 16px);top:-16px;
	height:0px;width:0px;
	background-color:transparent; 
	border-left: 16px solid transparent;
	border-right: 16px solid transparent; 
	border-bottom:16px solid #004080;
}

.gallery input[class="screen"]{display:none;}

.gallery .item-hugger {
	position: relative;
	display:block; 
	border:3px solid transparent;
	aspect-ratio: 16/9; width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position:center;
	background-size:cover;
	margin-top:8px;
}

.gallery label { 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

.gallery .content {
	box-sizing: border-box;
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	aspect-ratio: 16/9;
	margin-bottom:16px;
	opacity: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gallery .item-wrapper img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: contain;
}

.screen1 { grid-area: screen1; }
.screen2 { grid-area: screen2; }
.screen3 { grid-area: screen3; }
.screen4 { grid-area: screen4; } 

.showImg { 
	grid-area: showImg;
	width: 100%;aspect-ratio: 16/9;
}

.gallery {
	position: relative;
	display: grid;
	grid-template-areas:
		'showImg showImg showImg showImg'
		'screen1 screen2 screen3 screen4';
	gap: 8px; 
	padding:8px 0;
	margin-bottom:32px;
}

.gallery input[class="screen"]:checked ~ .content { opacity: 1; }

pre{
	background-color: #c6d9ec;
    border-radius: 11px;
	padding:18px;
	color:#285077;
	line-height: 18px;
	white-space: pre-wrap;
	font-size:12px;font-family:monospace;
}