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

a,label{text-decoration: none;color:var(--color_dark);}

*{
	font-family:Arial;
	border-collapse:collapse;
	border:none;
	margin:0;
	padding:0;
	border-spacing:0px;
	outline:none;
	font-size:13px;
	box-sizing:border-box;
	line-height: 22px;
    overscroll-behavior: none;
}

body {
	background-color:rgba(11,116,213,1);
	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(11,116,213,1), rgba(11,116,213,0) 70.71%),
		linear-gradient(127deg, rgba(107,181,250,1), rgba(107,181,250,0) 70.71%),
		linear-gradient(336deg, rgba(5,64,122,1), rgba(5,64,122,0) 70.71%);
	background-attachment: fixed ; 
	background-size: cover;
	min-height:100vh;
	width:100%;
	padding:16px 16px 0 16px;
}
body:has(.modal .controll:checked) {overflow: hidden;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .chr { display:initial;}
    .moz { display:none;}
	input:-webkit-autofill {
		-webkit-text-fill-color: #000;
		-webkit-box-shadow: 0 0 0px 1000px transparent inset;
		transition: background-color 5000s ease-in-out 0s;
	}
}
@media screen and (min--moz-device-pixel-ratio:0) {
    .chr { display:none;}
    .moz { display:initial;}
}

hr {
	border-bottom:1px solid rgba(0,0,0,1);
	margin:8px 0;
}

details li {
	margin-bottom: 14px;
}

.logo {
	background-image: url("img/Lanit_logo.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center center;
	margin:32px auto 32px auto;
	display:block;
	width:220px;
	height:220px;
}

.panel{ 
	max-width:980px; 
	min-width:320px;
	background-color:rgba(245,250,255,.8);
	box-shadow:0px 4px 25px rgba(0,92,179,.3);
	margin:32px auto;
	border-radius:16px;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	overflow: hidden;
	border-top:1px solid rgba(255,255,255,0.3);
	border-bottom:1px solid rgba(0,0,0,0.1);
	display:grid;
	grid-template-columns:33% auto 33%;
}
.cellar{
	max-width:980px; 
	min-width:330px;
	margin:32px auto 0px auto;
	display:grid;
	/* grid-template-columns:27% 24% 14% auto; */
	grid-template-columns:30% auto 36%;
	align-items:center;
	justify-items:center;
	background-color:rgba(245,250,255,.8);
	border-radius: 16px 16px 0 0;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow:0px 4px 25px rgba(0,92,179,.3);
	height:92px;

}

.cellar > a{}

.cellar > a:hover{
	text-decoration:underline;
	text-underline-offset: 4px;
}

.center_item{position:relative;}

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

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

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

.file{
	background-repeat: no-repeat;
	background-position:0px center;
	background-size:16px 16px;
	padding-left:22px;
	margin:16px 0;
	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='M8.58594 2L13 6.41406V14H3V2H8.58594Z M13 8H9C8.44772 8 8 7.55228 8 7V3' stroke='black' stroke-width='1'/%3e%3c/svg%3e")
}

.link_icon{
	background-repeat: no-repeat;
	background-position:0px center;
	background-size:16px 16px;
	padding-left:22px;
	margin:16px 0;
	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='M13 8V3H8 M12 4L7 9 M13 13.5H3V3' stroke='black' stroke-width='1' stroke-linecap='round'/%3e%3c/svg%3e")
}

.icon_search{background-size:18px 18px;background-image:url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M22.5 22.5L16.5 16.5' stroke='%23fff'  stroke-width='1.8' /%3e%3ccircle cx='10' cy='10' r='9' stroke='%23fff' stroke-width='1.5'/%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 d='M4 4.5L12 12.5 M12 4.5L4 12.5' stroke='%23fff' stroke-linecap='round'/%3e%3c/svg%3e")}

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

input::placeholder{color:var(--color_text);font-size:16px;opacity: 0.5;}

.item{
	width:100%; 
	height:100%;
	display:grid;
	padding:16px;
	grid-template-rows:110px 42px 86px 194px;
	transition:0.2s;
}

.item:hover{
	transition:0.4s;
	background-color: rgba(40,148,255,.2);
}

.item *{
	color:var(--color_dark);
}

.item .icon{
	display:block;
	background-repeat: no-repeat;
	background-position:center 10px;
	background-size:82px 82px;
	width:100%;
	height:100%;
	/* filter: contrast(0%) brightness(0.6); */
}
.item .name{
	font-weight: bold;
	font-size:20px;
	display:block; 
	width:100%; 
}

.item .dicr{  
	margin-bottom:12px;
}

.button{
	font-weight: bold;
	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 d='M11.5 11.5L14.5 8L11.5 4.5' stroke='%23000' stroke-linecap='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position:calc(100% - 8px) center;
	background-size:26px 26px; 
	padding-left:8px;
	width:100%;
	height:36px;
	margin:4px 0;
	display:flex;
	overflow: hidden;
	cursor:pointer; 
	position:relative;
	justify-content:start;
	align-items:center; 
}

.button:before{
	z-index:-2;
	content:"";
	position:absolute;
	left:0%;bottom:0%;
	height:100%; 
	width:100%; 
	border-radius:8px;
}

.button:hover:before{background-color:#fff;}

.buttons > summary{
	font-weight: bold;
	color: var(--color_dark);
	padding-left:8px;
	width:100%;
	height:36px;
	margin:4px 0;
	display:flex;
	cursor:pointer; 
	position:relative;
	justify-content:start;
	align-items:center; 
}

.buttons > div{
	padding:0 0 16px 16px 
}

.buttons > summary:before{
	z-index:-2;
	content:"";
	position:absolute;
	left:0%;bottom:0%;
	height:100%; 
	width:100%; 
	border-radius:8px;
}

.buttons > summary:hover:before{background-color:#fff;}

.button_request{
	background-color: #2894ff;
	color:#fff;
	padding:8px;
	cursor: pointer;
	min-width:128px;
	border-radius:16px;
}

.button_request:hover{
	background-color:#fff;
	color:#000;
}

.search{
	margin:0px auto;
	width:256px;
	height:28px;
	display:grid;
	grid-template-columns:46px auto 46px;
	align-items:center;
	justify-items:center;
	box-sizing:content-box;
	border-radius:16px;
}

.free:after{
	position:absolute;
	right:16px;
	top:16px;
	font-weight: bold;
	font-size: 14px;
	background-color: #2894ff;
	color: var(--color_text);
	box-shadow:0px 4px 25px rgba(1,100,201,.3);
	display:block;
	padding:4px 6px;
	border-radius:8px;
	height:min-content;
	width:min-content;
	content:"Бесплатно";
}

.dev:after{
	position:absolute;
	right:16px;
	top:16px;
	font-weight: bold;
	font-size: 14px;
	background-color: #2894ff;
	color: var(--color_text);
	box-shadow:0px 4px 25px rgba(1,100,201,.3);
	display:block;
	padding:4px 6px;
	border-radius:8px;
	height:min-content;
	width:min-content;
	content:"Бесплатно";
}

.trial:after{
	position:absolute;
	right:16px;
	top:16px;
	font-weight: bold;
	font-size: 14px;
	background-color: #ffa844;
	color: var(--color_text);
	box-shadow:0px 4px 25px rgba(255,143,15,.3);
	display:block;
	padding:4px 6px;
	border-radius:8px;
	height:min-content;
	width:min-content;
	white-space: nowrap;
	content:"версия на 30 дней";
}

.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    visibility: hidden;
    background-color:rgba(40,148,255,.2);
    opacity: 0;
    position: fixed; 
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.modal > .overlay{
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
    z-index: 10;
}

.overlay:target, .modal .controll:checked ~ .overlay {
    visibility: visible;
    opacity: 1;
}

body:has(.overlay:target){
	overflow:hidden; 
	user-select:none;
} 
	
.popup {
    top:50vh; 
    left:50vw; 
    position:fixed;
	transform:translate(-50% , -50%);
	border-top:1px solid rgba(255,255,255,0.3);
	border-bottom:1px solid rgba(0,0,0,0.1);
	box-shadow:0px 4px 25px rgba(0,64,128,.2);
    z-index: 10;
    display: block;
    visibility: hidden;
    margin: 0 auto;
	user-select:text;
	max-height:calc(100vh - 128px);
	max-width:calc(100vw - 128px);
    background-color:rgb(202,222,243);
	padding:32px 8px;
	border-radius:16px;
}

.popup .scroll_content {
	overflow-y:auto;
	max-height:calc(100vh - 168px);
	max-width:800px;
	width:calc(100vw - 160px); 
    display:block;
}

.overlay:target+.popup, .modal .controll:checked ~ .overlay+.popup {
    visibility: visible;  
}

.close {
    position: absolute;
    top:  6px;
    right:  6px;
    filter: invert(1);
	width: 20px;
    height: 20px;
	background-repeat: no-repeat;
	background-position:center center;
	cursor: pointer;
}

.popup_title {
    position: absolute;
    top:6px;
    left:0;
	width:100%;
	text-align:center;
} 

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

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

.title {
	font-weight:bold;font-size:20px;
}

.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;
	width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position:center;
	background-size:cover;
	margin-top:8px;
}

.gallery .item-hugger:after {content:"";
	width: 100%;
	display: block;
	padding-top: 56.25%;
	pointer-events: none;
}

.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%; 
	margin-bottom:16px;
	opacity: 0;
}

.gallery .item-wrapper{
	display:flex;
	align-items:center;
	justify-content:center;
}

.gallery .item-wrapper img {
	width: 100%;
	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%; 
}

.showImg:after {content:"";
	width: 100%;
	display: block;
	padding-top: 60%;
}

.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; }

.description{
	margin-bottom:32px;
	display: grid;
	grid-template-columns:auto 33%;
	gap:8px;
}

.description .link{
	border-left:1px solid #004080;
	padding-left:8px;
	height:min-content;
}

.description ul, .download ul, .scroll_content ul{
	padding-left:16px;
	list-style-type: disc;
}

.scroll_content ul ul {
	list-style-type: square;
}

#contact{
    position:fixed;
	transition:.6s;
	cursor:pointer; 
    border-radius:50px;
    right:32px;bottom:32px;
    height:100px;width:100px; 
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow:0px 4px 25px rgba(0,92,179,.3);
    background: no-repeat center / 50px 50px url("data:image/svg+xml,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='6' y='5' width='19' height='13' rx='1' stroke='%23444444' stroke-width='2'/%3e%3cpath d='M2 11V25L5.46667 22.4C5.81286 22.1404 6.23393 22 6.66667 22H20' stroke='%23444444' stroke-width='2' stroke-linecap='round'/%3e%3cpath d='M6.5 6L15.5 13L24.5 6' stroke='%23444444' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e");
    background-color:rgba(245,250,255,.8);
}

#contact:hover{
    transition:.2s;
    background-color:rgba(245,250,255,1);
	margin-bottom:4px;
}

ol {
	counter-reset: list;
	list-style: none;
}

ol ol, ol ul {
   margin:0 32px;
}

.list_roman {counter-reset: list_roman;}

.list_roman div {
   text-decoration: none;
   display: block; 
   position: relative; 
   margin:16px 0;
}

.list_roman ul {list-style: disc;}

.list_roman div:not(ul > li > div, .left_bord, .just_text):before {
	counter-increment: list_roman;
	content: counters(list_roman, "." , upper-roman) " ";
	margin-right:12px;
	font-size:14px;
	text-align: center;
	font-weight: bold; 
}

.list_roman p {text-indent: 2em;}

.list {counter-reset:list;}

.list div {
   text-decoration: none;
   display: block; 
   position: relative; 
   margin:16px 0;
}

.list ul {list-style: disc;}

.list div:not(ul > li > div, .left_bord, .just_text):before {
   counter-increment: list;
   content: counters(list, ".") " "; 
   text-align: center;
   font-weight: bold;
}

.left_bord{
	padding:4px 0;
	background-color:rgb(202,222,243);
	border-radius:8px;
}

.left_bord div{
	margin:8px 0;
}

.table tr, .table td {
  border: 1px solid;
  padding:8px;
}

.table tr:first-child { 
	background-color:rgb(202,222,243);
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.download_file{
	display:grid;
	grid-template-columns:53% 47%;
	align-items:center; 
}

@keyframes slide {
  from { background-color: transparent; }
  to { background-color: transparent; }
}

form > div {
	display:grid;
	grid-template-columns:min-content auto;
	justify-items:right;
	align-items:center;
	gap: 8px; 
	padding:4px 0;
}

form > div label{white-space: nowrap;}

form > div input, form > div input[type="text"], form > div textarea{
	width:100%;
	padding:4px;
	border-bottom: 1px solid rgba(0,0,0,.3);
	color:#000;
	font-size:12px;
	background-color:transparent;
	height:100%;
}

form > div input:focus, form > div textarea:focus {
	border-bottom: 1px solid #000;
}

form > div input:placeholder {
	color: red ;
}

.select_products{
	display:grid;
	padding:14px 0 12px 0;
	grid-template-columns:50% 50%;
	justify-items:left;
	align-items:center;
	white-space:nowrap;
	gap:8px; 
	width:100%;
	height:100%;
}

.select_products > div input[type="checkbox"]{
	width:auto;
	height:auto;
	margin-right:8px;
}

.modal .controll {display:none;}

@media only screen and (max-width: 900px){
	.panel{
		grid-template-columns:50% 50%;
		max-width:660px;
	}
	.download_file{
		display:block;
		word-break: break-all;
	}
	.cellar{grid-template-columns:100%;max-width:660px;padding:8px 0px}
}

@media only screen and (max-width: 600px) { 
	.panel{
		display:block;
		max-width:330px;
	}
	.select_products{grid-template-columns:100%;}
	.cellar{grid-template-columns:100%; max-width:330px;padding:8px 0px}
	.popup { 
		max-height:calc(100vh - 12px);
		max-width:calc(100vw - 12px); 
	}
	.popup .scroll_content { 
		max-height:calc(100vh - 92px); 
		width:calc(100vw - 16px);  
	}
}