@font-face {
	font-family: 'GolosText';
	src: local('GolosText'),
		url('../fnt/GolosText-Regular.ttf') format('truetype'),
		url('../fnt/GolosText-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fnt/GolosText-Regular.woff') format('woff'); 
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'GolosText';
	src: local('GolosText'),
		url('../fnt/GolosText-Bold.ttf') format('truetype'),
		url('../fnt/GolosText-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fnt/GolosText-Bold.woff') format('woff'); 
	font-weight: 700;
	font-style: normal;
}

/*@import url(FiraSansCondensed.css);*/
html {
	margin-right: calc(-1 * (100vw - 100%));
}
html,body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: 'GolosText','SegoeUI',monospace;
	/*font-family: 'Fira Sans Condensed','SegoeUI',monospace;*/
	font-weight: normal;
}
body {

}
body.scroll-fix {
	overflow: hidden;
}
body:not(.page-view-size-1):not(.page-view-size-2):not(.page-view-size-3) {
	font-size: 18px;
}
body.page-view-size-1 {
	font-size: 20px;
}
body.page-view-size-2 {
	font-size: 24px;
}
body.page-view-size-3 {
	font-size: 28px;
}
body:not(.page-view-color-1):not(.page-view-color-2):not(.page-view-color-3):not(.page-view-color-4):not(.page-view-color-5) {
	--page-color-h: 219;
	--page-color-h2: 219;
	/* bg - светлый фон, darkbg - тёмный фон. fg - foreground, который видно на светлом фоне; darkfg - foreground, который видно на тёмном фоне. fg и bg с одним индексом протестированы вместе, с разными - нет */

	/*<--depricated*/
	--page-fg-color: hsl( 0, 0%, 0% );
	--page-fg2-color: hsl( 0, 0%, 31% );
	--page-bg-color: hsl( 0, 0%, 100% );
	--page-bg2-color: hsl( 209, 55%, 60% );
	--page-bg3-color: hsl(0, 0%, 88%); 
	--page-fg3-color: hsl(0, 0%, 47%); 
	--page-fg4-color: hsl(0, 0%, 60%); 
	--page-border-color: hsl(0, 0%, 80%);
	--page-darkfg-color: hsl( 0, 0%, 100% );
	--page-darkfg2-color: hsl( 0, 0%, 100% );
	--page-darkbg-color: hsl( var(--page-color-h), 30%, 25% );
	--page-darkbg2-color: hsl( var(--page-color-h), 45%, 16% );
	--page-darkborder-color: hsla( var(--page-color-h), 0%, 100%, 0.3 );
	--page-darkfg3-color: hsl( 209, 38.67%, 66.81% ); 
	--page-darkbg3-color: hsl( 0, 0%, 94.12% ); 
	/*depricated-->*/
	
	/*main*/
	--page-main-kit-fg1: hsl( 0, 0%, 0% );
	--page-main-kit-fg2: hsl( 0, 0%, 31% );
	--page-main-kit-bg1: hsl( 0, 0%, 100% );
	--page-main-kit-bg2: hsl( 0, 0%, 94.12% );
	--page-main-kit-bg3: hsl( 209, 55%, 60% );
	--page-main-kit-border: hsl(0, 0%, 80%);
	--page-main-kit-darkborder: hsla( var(--page-color-h), 0%, 100%, 0.3 );

	/*grey*/
	--page-grey-kit-fg1: hsl(0, 0%, 47%); 
	--page-grey-kit-fg2: hsl(0, 0%, 60%);
	--page-grey-kit-fg3-1: hsl( 0, 0%, 31% );
	--page-grey-kit-fg3-2: hsl(0, 0%, 80%);
	--page-grey-kit-darkfg1: hsl(0, 0%, 94%);
	--page-grey-kit-bg1: hsl(0, 0%, 88%);
	--page-grey-kit-bg3: hsl(0, 0%, 94%);
	--page-grey-kit-darkbg1: hsl(0, 0%, 80%);

	/*sidebar*/
	--page-sidebar-kit-fg1: hsl( 209, 38.67%, 66.81% );
	--page-sidebar-kit-darkbg1: hsl( var(--page-color-h), 30%, 25% );
	--page-sidebar-kit-darkfg1: hsl( 0, 0%, 100% );
	--page-sidebar-kit-darkbg2: hsl( var(--page-color-h), 45%, 16% );
	--page-sidebar-kit-darkfg2: hsl( 0, 0%, 100% );

	/*special*/
	--page-link-color: hsl( 197, 82%, 35% );
	--page-link-hover-color: hsl(197, 81%, 44%);
	--page-activity-color: hsl(198, 100%, 43%);
}

body.page-view-color-1 {
	--page-color-h: 0;
	--page-color-h2: 0;

	/*<--depricated*/
	--page-fg-color: hsl( 0, 0%, 0% );
	--page-fg2-color: hsl( 0, 0%, 0% );
	--page-fg3-color: hsl( 0, 0%, 0% );
	--page-fg4-color: hsl( 0, 0%, 0% );
	--page-bg-color: hsl( 0, 0%, 100% );
	--page-bg2-color: hsl(0, 0%, 80%);
	--page-bg3-color: hsl(0, 0%, 88%);
	--page-darkborder-color: hsla( 0, 0%, 100%, 0.5 );
	--page-border-color: hsl(0, 0%, 50%);
	--page-darkfg-color: hsl( 0, 0%, 100% );
	--page-darkfg2-color: hsl( 0, 0%, 100% );
	--page-darkfg3-color: hsl( 0, 0%, 100% );
	--page-darkbg-color: hsl( var(--page-color-h), 0%, 25% );
	--page-darkbg2-color: hsl( var(--page-color-h), 0%, 16% );
	--page-darkbg3-color: hsl(0, 0%, 80%);
	/*depricated-->*/

	/*main*/
	--page-main-kit-fg1: hsl( 0, 0%, 0% );
	--page-main-kit-fg2: hsl( 0, 0%, 0% );
	--page-main-kit-bg1: hsl( 0, 0%, 100% );
	--page-main-kit-bg2: hsl(0, 0%, 80%);
	--page-main-kit-bg3: hsl(0, 0%, 88%);
	--page-main-kit-border: hsl(0, 0%, 50%);
	--page-main-kit-darkborder: hsla( 0, 0%, 100%, 0.5 );

	/*grey*/
	--page-grey-kit-fg1: hsl( 0, 0%, 0% ); 
	--page-grey-kit-fg2: hsl( 0, 0%, 0% );
	--page-grey-kit-fg3-1: hsl( 0, 0%, 0% );
	--page-grey-kit-fg3-2: hsl( 0, 0%, 40% );
	--page-grey-kit-darkfg1: hsl(0, 0%, 94%);
	--page-grey-kit-bg1: hsl(0, 0%, 88%);
	--page-grey-kit-bg3: hsl(0, 0%, 94%);
	--page-grey-kit-darkbg1: hsl(0, 0%, 80%);

	/*sidebar*/
	--page-sidebar-kit-fg1: hsl( 0, 0%, 100% );
	--page-sidebar-kit-darkbg1: hsl( var(--page-color-h), 0%, 25% );
	--page-sidebar-kit-darkfg1: hsl( 0, 0%, 100% );
	--page-sidebar-kit-darkbg2: hsl( var(--page-color-h), 0%, 16% );
	--page-sidebar-kit-darkfg2: hsl( 0, 0%, 100% );

	/*special*/
	--page-link-color: hsl(0, 0%, 20.47%);
	--page-link-hover-color: hsl(197, 97.54%, 8.36%);
	--page-activity-color: hsl(198, 100%, 8.7%);
}

body.page-view-color-2 {
	--page-color-h: 0;
	--page-color-h2: 0;

	/*<--depricated*/
	--page-fg-color: hsl( 0, 0%, 100% );
	--page-fg2-color: hsl( 0, 0%, 100% );
	--page-fg3-color: hsl( 0, 0%, 100% );
	--page-fg4-color: hsl( 0, 0%, 100% );
	--page-bg-color: hsl( 0, 0%, 0% );
	--page-bg2-color: hsl(0, 0%, 15%);
	--page-bg3-color: hsl(0, 0%, 15%);
	--page-darkborder-color: hsla( 0, 0%, 0%, 0.3 );
	--page-border-color: hsl(0, 0%, 50%);
	--page-darkfg-color: hsl( 0, 0%, 0% );
	--page-darkfg2-color: hsl( 0, 0%, 100% );
	--page-darkfg3-color: hsl( 0, 0%, 0% );
	--page-darkbg-color: hsl( var(--page-color-h), 0%, 100% );
	--page-darkbg2-color: hsl( var(--page-color-h), 0%, 0% );
	--page-darkbg3-color: hsl( 0, 0%, 10% );
	/*depricated-->*/

	/*main*/
	--page-main-kit-fg1: hsl( 0, 0%, 100% );
	--page-main-kit-fg2: hsl( 0, 0%, 100% );
	--page-main-kit-bg1: hsl( 0, 0%, 0% );
	--page-main-kit-bg2: hsl(0, 0%, 15%);
	--page-main-kit-bg3: hsl(0, 0%, 15%);
	--page-main-kit-border: hsl(0, 0%, 50%);
	--page-main-kit-darkborder: hsla( 0, 0%, 0%, 0.3 );

	/*grey*/
	--page-grey-kit-fg1: hsl( 0, 0%, 100% ); 
	--page-grey-kit-fg2: hsl( 0, 0%, 100% );
	--page-grey-kit-fg3-1: hsl( 0, 0%, 100% );
	--page-grey-kit-fg3-2: hsl( 0, 0%, 90% );
	--page-grey-kit-darkfg1: hsl(0, 0%, 94%);
	--page-grey-kit-bg1: hsl(0, 0%, 15%);
	--page-grey-kit-bg3: hsl(0, 0%, 40%);
	--page-grey-kit-darkbg1: hsl(0, 0%, 10%);

	/*sidebar*/
	--page-sidebar-kit-fg1: hsl( 0, 0%, 0% );
	--page-sidebar-kit-darkbg1: hsl( var(--page-color-h), 0%, 100% );
	--page-sidebar-kit-darkfg1: hsl( 0, 0%, 0% );
	--page-sidebar-kit-darkbg2: hsl( var(--page-color-h), 0%, 0% );
	--page-sidebar-kit-darkfg2: hsl( 0, 0%, 100% );

	/*special*/
	--page-link-color: hsl(0, 0%, 83.46%);
	--page-link-hover-color: hsl(0, 0%, 90%);
	--page-activity-color: hsl(0, 0%, 100%);
}

body.page-view-color-3 {
	--page-color-h: 210;
	--page-color-h2: 210;

	/*<--depricated*/
	--page-fg-color: hsl( var(--page-color-h), 100%, 20% );
	--page-fg2-color: hsl( var(--page-color-h), 100%, 20% );
	--page-fg3-color: hsl( var(--page-color-h), 100%, 20% );
	--page-fg4-color: hsl( var(--page-color-h), 100%, 20% );
	--page-bg-color: hsl( var(--page-color-h), 100%, 90% );
	--page-bg2-color: hsl( var(--page-color-h), 100%, 85% );
	--page-bg3-color: hsl( var(--page-color-h), 100%, 85% );
	--page-darkborder-color: hsla( var(--page-color-h), 38%, 70%, 0.3 );
	--page-border-color: hsl( var(--page-color-h), 38%, 80% );
	--page-darkfg-color: hsl( var(--page-color-h), 38%, 80% );
	--page-darkfg2-color: hsl( 0, 0%, 100% );
	--page-darkfg3-color: hsl( var(--page-color-h), 38%, 80% );
	--page-darkbg-color: hsl( var(--page-color-h), 50%, 20% );
	--page-darkbg2-color: hsl( var(--page-color-h), 50%, 15% );
	--page-darkbg3-color: hsl( var(--page-color-h), 100%, 85% );
	/*depricated-->*/

	/*main*/
	--page-main-kit-fg1: hsl( var(--page-color-h), 100%, 20% );
	--page-main-kit-fg2: hsl( var(--page-color-h), 100%, 20% );
	--page-main-kit-bg1: hsl( var(--page-color-h), 100%, 90% );
	--page-main-kit-bg2: hsl( var(--page-color-h), 100%, 85% );
	--page-main-kit-bg3: hsl( var(--page-color-h), 100%, 85% );
	--page-main-kit-border: hsl( var(--page-color-h), 38%, 80% );
	--page-main-kit-darkborder: hsla( var(--page-color-h), 38%, 70%, 0.3 );

	/*grey*/
	--page-grey-kit-fg1: hsl( var(--page-color-h), 100%, 20% ); 
	--page-grey-kit-fg2: hsl( var(--page-color-h), 100%, 25% );
	--page-grey-kit-fg3-1: hsl( var(--page-color-h), 100%, 20% );
	--page-grey-kit-fg3-2: hsl( var(--page-color-h), 20%, 40% );
	--page-grey-kit-darkfg1: hsl( var(--page-color-h), 38%, 80% )
	--page-grey-kit-bg1: hsl( var(--page-color-h), 100%, 85% );
	--page-grey-kit-bg3: hsl( var(--page-color-h), 100%, 95% );
	--page-grey-kit-darkbg1: hsl( var(--page-color-h), 80%, 85% );

	/*sidebar*/
	--page-sidebar-kit-fg1: hsl( var(--page-color-h), 38%, 80% );
	--page-sidebar-kit-darkbg1: hsl( var(--page-color-h), 50%, 20% );
	--page-sidebar-kit-darkfg1: hsl( var(--page-color-h), 38%, 80% );
	--page-sidebar-kit-darkbg2: hsl( var(--page-color-h), 50%, 15% );
	--page-sidebar-kit-darkfg2: hsl( 0, 0%, 100% );

	/*special*/
	--page-link-color: hsl( 197, 82%, 35% );
	--page-link-hover-color: hsl(197, 81%, 44%);
	--page-activity-color: hsl(198, 100%, 43%);
}

body.page-view-color-4 { /*todo*/
	--page-color-h: 53;
	--page-color-h2: 53;

	/*<--depricated*/
	--page-fg-color: hsl( var(--page-color-h), 100%, 20% );
	--page-fg2-color: hsl( var(--page-color-h), 100%, 20% );
	--page-fg3-color: hsl( var(--page-color-h), 100%, 20% );
	--page-fg4-color: hsl( var(--page-color-h), 100%, 20% );
	--page-bg-color: hsl( var(--page-color-h), 100%, 90% );
	--page-bg2-color: hsl( var(--page-color-h), 100%, 83% );
	--page-bg3-color: hsl( var(--page-color-h), 100%, 85% );
	--page-darkborder-color: hsla( var(--page-color-h), 38%, 70%, 0.3 );
	--page-border-color: var(--page-darkfg-color);
	--page-darkfg-color: hsl( var(--page-color-h), 38%, 80% );
	--page-darkfg2-color: hsl( 0, 0%, 100% );
	--page-darkfg3-color: hsl( var(--page-color-h), 38%, 80% );
	--page-darkbg-color: hsl( var(--page-color-h), 50%, 20% );
	--page-darkbg2-color: hsl( var(--page-color-h), 50%, 15% );
	--page-darkbg3-color: hsl( var(--page-color-h), 100%, 83% );
	/*depricated-->*/
		
	/*main*/
	--page-main-kit-fg1: hsl( var(--page-color-h), 100%, 20% );
	--page-main-kit-fg2: hsl( var(--page-color-h), 100%, 20% );
	--page-main-kit-bg1: hsl( var(--page-color-h), 100%, 90% );
	--page-main-kit-bg2: hsl( var(--page-color-h), 100%, 83% );
	--page-main-kit-bg3: hsl( var(--page-color-h), 100%, 83% );
	--page-main-kit-border: hsl( var(--page-color-h), 38%, 80% );
	--page-main-kit-darkborder: hsla( var(--page-color-h), 38%, 70%, 0.3 );

	/*grey*/
	--page-grey-kit-fg1: hsl( var(--page-color-h), 100%, 20% ); 
	--page-grey-kit-fg2: hsl( var(--page-color-h), 100%, 20% );
	--page-grey-kit-fg3-1: hsl( var(--page-color-h), 100%, 20% );
	--page-grey-kit-fg3-2: hsl( var(--page-color-h), 20%, 40% );
	--page-grey-kit-darkfg1: hsl( var(--page-color-h), 18%, 85% );
	--page-grey-kit-bg1: hsl( var(--page-color-h), 38%, 85% );
	--page-grey-kit-bg3: hsl(53, 100%, 85.86%);
	--page-grey-kit-darkbg1: hsl( var(--page-color-h), 18%, 45% );

	/*sidebar*/
	--page-sidebar-kit-fg1: hsl( 209, 38.67%, 66.81% );
	--page-sidebar-kit-darkbg1: hsl( var(--page-color-h), 30%, 25% );
	--page-sidebar-kit-darkfg1: hsl( 0, 0%, 100% );
	--page-sidebar-kit-darkbg2: hsl( var(--page-color-h), 45%, 16% );
	--page-sidebar-kit-darkfg2: hsl( 0, 0%, 100% );

	/*special*/
	--page-link-color: hsl(55.72, 48.44%, 32.65%);
	--page-link-hover-color: hsl(56, 48%, 25%);
	--page-activity-color: hsl(56, 100%, 17%);
}

body.page-view-color-5 {
	--page-color-h: 28;
	--page-color-h2: 83;

	/*<--depricated*/
	--page-fg-color: hsl( var(--page-color-h2), 100%, 60% );
	--page-fg2-color: hsl( var(--page-color-h2), 100%, 60% );
	--page-fg3-color: hsl( var(--page-color-h), 100%, 60% );
	--page-fg4-color: hsl( var(--page-color-h), 100%, 60% );
	--page-bg-color: hsl( var(--page-color-h), 100%, 10% );
	--page-bg2-color: hsl( var(--page-color-h), 100%, 15% );
	--page-bg3-color: hsl( var(--page-color-h), 100%, 15% );
	--page-darkborder-color: hsla( var(--page-color-h2), 90%, 70%, 0.5 );
	--page-border-color: var(--page-darkborder-color);
	--page-darkfg-color: hsl( var(--page-color-h2), 90%, 50% );
	--page-darkfg2-color: hsl( 0, 0%, 100% );
	--page-darkfg3-color: hsl( var(--page-color-h2), 90%, 50% );
	--page-darkbg-color: hsl( var(--page-color-h), 50%, 20% );
	--page-darkbg2-color: hsl( var(--page-color-h), 50%, 15% );
	--page-darkbg3-color: hsl( var(--page-color-h), 100%, 15% );
	/*depricated-->*/
		
	/*main*/
	--page-main-kit-fg1: hsl( var(--page-color-h2), 100%, 60% );
	--page-main-kit-fg2: hsl( var(--page-color-h2), 100%, 60% );
	--page-main-kit-bg1: hsl( var(--page-color-h), 100%, 60% );
	--page-main-kit-bg2: hsl( var(--page-color-h), 100%, 15% );
	--page-main-kit-bg3: hsl( var(--page-color-h), 100%, 60% );
	--page-main-kit-border: hsla( var(--page-color-h2), 90%, 70%, 0.5 );
	--page-main-kit-darkborder: hsla( var(--page-color-h2), 90%, 70%, 0.5 );

	/*grey*/
	--page-grey-kit-fg1: hsl( var(--page-color-h), 100%, 60% );
	--page-grey-kit-fg2: hsl( var(--page-color-h), 100%, 60% );
	--page-grey-kit-fg3-1: hsl( var(--page-color-h2), 100%, 60% );
	--page-grey-kit-fg3-2: hsla( var(--page-color-h2), 90%, 70%, 0.5 );
	--page-grey-kit-darkfg1: hsl(89.57, 100%, 37.23%);
	--page-grey-kit-bg1: hsl( var(--page-color-h), 100%, 15% );
	--page-grey-kit-bg3: hsl( var(--page-color-h), 100%, 25% );
	--page-grey-kit-darkbg1: hsl(28, 88.47%, 14.92%);

	/*sidebar*/
	--page-sidebar-kit-fg1: hsl( var(--page-color-h2), 90%, 50% );
	--page-sidebar-kit-darkbg1: hsl( var(--page-color-h), 50%, 20% );
	--page-sidebar-kit-darkfg1: hsl( var(--page-color-h2), 90%, 50% );
	--page-sidebar-kit-darkbg2: hsl( var(--page-color-h), 50%, 15% );
	--page-sidebar-kit-darkfg2: hsl( 0, 0%, 100% );

	/*special*/
	--page-link-color: hsl(114.18, 100%, 62.34%);
	--page-link-hover-color: hsl(114.18, 100%, 72.34%);
	--page-activity-color: hsl(114.18, 80%, 62.34%);
}
body {
	color: var( --page-fg-color );
	background-color: var( --page-bg-color );
}
body.page-view-space-1 {
	letter-spacing: 0.1em;
	word-spacing: 0.3em;
}
body.page-view-space-2 {
	letter-spacing: 0.2em;
	word-spacing: 0.5em;
}
body.page-view-space-3 {
	letter-spacing: 0.3em;
	word-spacing: 0.7em;
}
body.page-view-image-1 img {
	filter: grayscale( 1 );
}
body.page-view-image-2 img:not(.image-unhidden) {
	display: none;
}
body.page-view-image-2 div:not(.image-unhidden) {
	background-image: none;
}

div {
	box-sizing: border-box;
}
p {
	line-height: 1.5em;
}
a, .link {
	text-decoration: underline;
   color: var(--page-link-color);
	cursor: pointer;
}
a:hover, .link:hover {
	color: var(--page-link-hover-color);
}
blockquote {
	font-style: italic;
	overflow: hidden;
	padding: 2em;
	margin: var(--vertical-field) 0;
	background: linear-gradient( to bottom, #fff0 10px, var(--page-grey-kit-bg3) 10px, var(--page-grey-kit-bg3) calc(100% - 10px), #fff0 calc(100% - 10px));
	position: relative;
}
blockquote:before {
	content: '«';
	position: absolute;
	top: -20px;
	left: 10px;
	color: var(--page-grey-kit-fg1);
	font-size: 50px;
	line-height: 50px;
}
blockquote:after {
	content: '»';
	position: absolute;
	bottom: -10px;
	right: 10px;
	color: var(--page-grey-kit-fg1);
	font-size: 50px;
	line-height: 50px;
}

blockquote img[align='left'] {
	margin: 0 1em 0.5em 0;
	border-radius: 10px;
}
.page-content img[align='left'] {
	max-width: 25%;
	margin: 0 1em 0.5em 0;
	border-radius: 10px;
}
.page-content img[align='right'] {
	max-width: 25%;
	margin: 0 0 0.5em 1em;
	border-radius: 10px;
}
.page-content {
	flex-grow: 1;
	padding: var(--vertical-field) var(--gorizontal-field);
	/* line-height: 1.5em; */ 
}
.none {
	display: none !important;
}
.sidebar {
	z-index: 100;
	transition: width 0.5s,height 0.5s;
	background: var(--page-darkbg-color);
  	color: var(--page-darkfg-color);
}
body.page-view-color-2  .sidebar {
	color: var(--page-darkfg3-color);
}
.sidebar a {
	color: inherit;
}
.sidebar-button {
	width: 50px;
	height: 50px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}
.sidebar-button a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 50px;
	text-align: center;
	text-decoration: none;
	color: var(--page-darkfg2-color);
}

.sidebar-switchbutton div {
	position: absolute;
	height: 3px;
	background-color: var(--page-darkfg2-color);
	border-radius: 3px;
	transition: all 0.5s;
}

.sidebar.open .sidebar-switchbutton div {
	width: 15px;
	height: 5px;
}
.sidebar:not(.open) .sidebar-switchbutton div:nth-child(1) {
	width: 30px;
	left: 10px;
	top: 12px;
}
.sidebar:not(.open) .sidebar-switchbutton div:nth-child(2) {
	width: 25px;
	left: 10px;
	top: 19px;
}
.sidebar:not(.open) .sidebar-switchbutton div:nth-child(3) {
	width: 28px;
	left: 10px;
	top: 26px;
}
.sidebar:not(.open) .sidebar-switchbutton div:nth-child(4) {
	width: 25px;
	left: 10px;
	top: 33px;
}
.sidebar.open .sidebar-switchbutton div:nth-child(4) {
	left: 15px;
	top: 20px;
	transform: rotate( 45deg );
}
.sidebar.open .sidebar-switchbutton div:nth-child(3) {
	left: 19px;
	top: 20px;
	transform: rotate( -45deg );
}
.sidebar.open .sidebar-switchbutton div:nth-child(2) {
	left: 15px;
	top: 24px;
	transform: rotate( -45deg );
}
.sidebar.open .sidebar-switchbutton div:nth-child(1) {
	left: 19px;
	top: 24px;
	transform: rotate( 45deg );
}
.sidebar-buttons {
	z-index: 101;
	background-color: var(--page-darkbg2-color);
	top: 0;
	left: 0;
	display: flex;
}
.sidebar-specialbutton, .sidebar-searchbutton, .sidebar-lockbutton {
	line-height: 50px;
	text-align: center;	
	justify-content: center;
	display: flex;
}
.sidebar-content {
	position: absolute;
	transition: all 0.5s;
}
.sidebar:not(.open) .sidebar-content {
	overflow: hidden;
}
.sidebar.open .sidebar-content {
	overflow-y: auto;
}
.sidebar-content:not(.sidebar-content-active) {
	z-index: 99;
	opacity: 0;
	pointer-events: none;
	height: inherit;
	overflow: hidden;
}
.sidebar-content.sidebar-content-active {
	z-index: 100;
	opacity: 1;
	pointer-events: auto;
}
.sidebar-menu {
	display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.sidebar-nav {
	flex-basis: 550px;
    flex-grow: 1;
    margin-right: 70px;
}
.sidebar-menu-contacts {
	flex-basis: 0;
    max-width: 450px;
    min-width: 350px;
    color: var(--page-darkfg3-color);
    font-size: 0.9em;
    display: flex;
    border: 2px var(--page-darkfg3-color) solid;
    padding: 50px 60px;
    flex-grow: 1;
    flex-direction: column;
    flex-wrap: nowrap;
}
.sidebar-menu-contacts > * {
	width: 100%;
}
.contacts-social {
	display: flex;
	flex-wrap: wrap;
}
.contacts-buy svg, .contacts-social svg {
	height: 40px;
	width: 40px;
}
.buy_fil0, .dzen_fil0, .rutube_fil0, .vk_fil0, .yt_fil0, .od_fil0, .telegram_fil1 {
    fill: var(--page-darkfg3-color); 
}
.buy_fil1, .dzen_fil1, .rutube_fil1, .vk_fil1, .yt_fil1, .od_fil1, .rutube_fil2, .telegram_fil2  {
    fill: none;
}
.telegram_fil0 {
	fill: var(--page-darkfg3-color);
    opacity: 0.4;
}
.sidebar-header {
	font-size: 170%;
}
.sidebar-header {
	color: var(--page-darkfg-color);
	font-weight: bold;
	margin-bottom: 1em;
}
.sidebar-special-variant {
	min-width: 50px;
	height: 50px;
	margin: 5px;
	border-width: 2px;
	border-style: solid;
	font-family: inherit;
	cursor: pointer;
	vertical-align: middle;
	padding: 0 10px;
	position: relative;
}
.special-variant-active:after {
	content: '';
	position: absolute;
	top: 53px;
	left: -2px;
	right: -2px;
	height: 4px;
	background: var(--page-darkfg-color);
}
.special-size {
	border-color: var(--page-darkborder-color);
	color: var(--page-darkfg-color);
	background: none;
	font-weight: bold;
}
.special-size-1 {	
	font-size: 18px;
}
.special-size-2 {
	font-size: 22px;
}
.special-size-3 {
	font-size: 28px;
}
.special-color {
	border-width: 5px;
	font-weight: bold;
	font-size: 18px;
}
.special-color-1 {
	border-color: #000;
	background: #fff;
	color: #000;
}
.special-color-2 {
	border-color: #fff;
	background: #000;
	color: #fff;
}
.special-color-3 {
	border-color: #063462;
	background: #9dd1ff;
	color: #063462;
}
.special-color-4 {
	border-color: #4d4b43;
	background: #f7f3d6;
	color: #4d4b43;
}
.special-color-5 {
	border-color: #a9e44d;
	background: #3b2716;
	color: #a9e44d;
}
.special-space, .special-image {
	font-weight: bold;
	font-size: 18px;
	background: none;
	border-color: var(--page-darkborder-color);
	color: var(--page-darkfg-color);
	text-align: center;
}
.special-space span {
	display: inline-block;
	height: 3px;
	border-width: 2px; 
	border-style: none solid solid solid;
	border-color: var(--page-darkborder-color);
	color: var(--page-darkfg-color);
	margin: 0 1px;
}
.special-space-1 span {
	width: 3px;
}
.special-space-2 span {
	width: 7px;
}
.special-space-3 span {
	width: 11px;
}


/* меню */
.menu-top {
	list-style-type: none;
	font-size: 140%;
	padding-left: 0;
}
.menu-top li {
	padding: 0.45em;
	list-style-type: none;
}
.menu-top li a {
	text-decoration: none;
}
.menu-top .menu-ordinary li, .menu-top li li li {
	font-size: 85%;
	padding-left: 0.5em;
	position: relative;
}
.menu-top .menu-ordinary li:before, .menu-top li li li:not(.item-more):before {
  position: absolute;
  left: -1em;
  top: 0.4em;
  display: block; 
  font-size: 1em;
  color: var(--page-darkfg-color);
  content: "\2014";
  opacity: 0.5;
}
.menu-top>li>a {
	position: relative;
	padding-right: 1.5em;
}
.menu-top li ul {
	padding: 0.5em 0 0.5em 1em;
	font-size: 85%;
}
.menu-top li li li a {
	text-decoration: underline;
	font-weight: normal;
}
.menu-top .menu-ordinary li a {
	text-decoration: underline;
	font-weight: normal;
}

.menu-top>li>a:after {
	content: '';
	position: absolute;
	display: block;
	width: 0.4em;
	height: 0.4em;
	border-width: 0 0 1px 1px;
	border-style: none none solid solid;
	border-color: var( --page-darkfg-color );
	transition: all 0.5s;
}
.menu-top>li:not(.active)>a:after {
	bottom: 0.3em;
	right: 0.25em;
	transform: rotate(-135deg);
}
.menu-top>li.active>a:after {
	bottom: 0.3em;
	right: 0;
	transform: rotate(-45deg);
}
.menu-top-dropblock {
	overflow: hidden;
	transition: all 0.5s;
}
.menu-top-dropcont {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	margin-right: -3em;
}
.menu-top-dropcont>ul {
	margin-right: 3em;
	flex-grow: 1;
}
.top-search-form input, .top-search-form button {
	font: inherit;
	outline: none;
}
.top-search-form button {
	color: var( --page-darkfg-color );
	background-color: var( --page-darkbg-color );
	border: 1px solid var( --page-darkfg2-color );
	padding: 0.3em 1em;
}
.top-search-form input[type=text] {
	color: var( --page-fg-color );
	background-color: var( --page-bg-color );
	border: 1px solid var( --page-darkfg2-color );
	padding: 0.3em 1em;
}
pre {
	display: block;
	max-width: 100%;
	overflow: auto;
	font-size: 70%;
}

.content-wrapper { 
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
}
.text-arrow {
	display: inline-block;
	height: 1em;
	width: 1.4em;
	background-size: 1.4em 0.7em;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: middle;
}
.arrow-right-link, .arrow-left-link {
	background-image: url(/Sys/Module/Page/v2/view/default/img/arrow_right_link.svg);
}
.arrow-left-link, .arrow-left-black, .arrow-left-white {
	transform: scale(-1, 1)
}
.arrow-right-black, .arrow-left-black {
	background-image: url(/Sys/Module/Page/v2/view/default/img/arrow_right_black.svg);
}
.arrow-right-white, .arrow-left-white {
	background-image: url(/Sys/Module/Page/v2/view/default/img/arrow_right_white.svg);
}
.page-view-color-1 :is(.arrow-right-link, .arrow-left-link) {
	filter: brightness(0);
}
.page-view-color-2 :is(.arrow-right-link, .arrow-left-link, .arrow-right-black, .arrow-left-black) {
	filter: brightness(100);
}
.page-view-color-2 :is(.arrow-right-white, .arrow-left-white) {
	filter: brightness(0);
}
.page-view-color-3 :is(.arrow-right-black, .arrow-left-black, .arrow-right-white, .arrow-left-white) {
	background-image: url(/Sys/Module/Page/v2/view/default/img/arrow_right_link.svg);
}
.page-view-color-3 :is(.arrow-right-white, .arrow-left-white) {
	filter: brightness(1.7);
}
.page-view-color-4 :is(.arrow-right-black, .arrow-left-black, .arrow-right-white, .arrow-left-white, .arrow-right-link, .arrow-left-link) {
	filter: sepia(1);
}
.page-view-color-5 :is(.arrow-right-black, .arrow-left-black, .arrow-right-white, .arrow-left-white, .arrow-right-link, .arrow-left-link) {
	background-image: url(/Sys/Module/Page/v2/view/default/img/arrow_right_acid_green.svg);
}
.link-doc {
	display: inline-block;
}
.page-block-blue .link-doc {
	padding-left: 1.5em;
	background: url(/Sys/Module/Page/v2/view/default/img/page_icon_white.svg) no-repeat left center;
	background-size: auto 1.3em;
	line-height: 1.3em;
}
.page-block-lite .link-doc {
	padding-left: 1.5em;
	background: url(/Sys/Module/Page/v2/view/default/img/page_icon.svg) no-repeat left center;
	background-size: auto 1.3em;
	line-height: 1.3em;
}

.page {
	flex-grow: 1;
}
.page-header {
	background-size: cover;
	background-position: center center;
}
.page-header:not(.header-text) .wrapper-fields {
	min-height: 300px;
}
.page-topline {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	margin-top: 1em;
}
.page-header:not(.header-text):not(.header-bg) .page-topline {
	opacity: 0.5
}
.page-topline-logo {
	height: 25px;
	width: 100px;
	min-width: 100px;
	background-size: 100px;
}
.page-header.header-text .page-topline-logo {
	background: url(/Sys/Module/Page/v2/view/default/img/ipolytech24_blue.svg) 0 0 no-repeat;
	background-size: 100px;
}
.page-header.header-bg-text .page-topline-logo,.page-header.header-bg .page-topline-logo {
	background: url(/Sys/Module/Page/v2/view/default/img/ipolytech24_black.svg) 0 0 no-repeat;
	background-size: 100px;
}
.page-header.header-bg-text-light .page-topline-logo {
	background: url(/Sys/Module/Page/v2/view/default/img/ipolytech24_black.svg) 0 0 no-repeat;
	background-size: 100px;
}
.page-header.header-bg-text-dark .page-topline-logo {
	background: url(/Sys/Module/Page/v2/view/default/img/ipolytech24_white.svg) 0 0 no-repeat;
	background-size: 100px;
}
.page-topline-path {
	display: flex;
	justify-content: end;
	overflow: hidden;
}
.page-topline-path .tpath-item {
	font-size: 0.7em;
	text-decoration: none;
	text-wrap: nowrap;
}
.page-header.header-bg-text .page-topline-path .tpath-item,.page-header.header-bg .page-topline-path .tpath-item {
	color: var(--page-fg-color);
}
.page-header.header-bg-text-light .page-topline-path .tpath-item {
	color: var(--page-fg-color);
}
.page-header.header-bg-text-dark .page-topline-path .tpath-item {
	color: var(--page-darkfg-color);
}
.page-topline-path .tpath-item:not(:first-child) {
	margin-left: 0.7em;
	padding-left: 1em;
	background-repeat: no-repeat;
	background-size: 0.3em;
	background-position: left center;
}
.header-bg-text-light .page-topline-path .tpath-item:not(:first-child) {
	background-image: url(/Sys/Module/Page/v2/view/default/img/arrowline_right_black.svg);
}
.header-bg-text-dark .page-topline-path .tpath-item:not(:first-child) {
	background-image: url(/Sys/Module/Page/v2/view/default/img/arrowline_right_white.svg);
}
.header-bg-text .page-topline-path .tpath-item:not(:first-child), .header-text .page-topline-path .tpath-item:not(:first-child), .header-bg .page-topline-path .tpath-item:not(:first-child) {
	background-image: url(/Sys/Module/Page/v2/view/default/img/arrowline_right_gray.svg);
}

.page-header.header-text {
}
.page-header.header-bg-text {
	background-color: #f0f0f0;
}
.page-header.header-bg-text-light {
	background-color: #ccc;
}
.page-header.header-bg-text-dark {
	background-color: #555;
}
.page-view-color-1 .page-header, .page-view-color-2 .page-header, .page-view-color-3 .page-header, .page-view-color-4 .page-header, .page-view-color-5 .page-header {
	background: var(--page-darkbg-color);
}
.page-header .wrapper-fields {
	min-height: 100%;
	overflow: hidden;
	padding-top: 1em;
	padding-bottom: 1em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.page-header.header-bg-text-light .wrapper-fields {
	background: #fff5;
}
.page-header.header-bg-text-dark .wrapper-fields {
	background: #0005;
}
.page-view-color-1 .page-header .wrapper-fields, .page-view-color-2 .page-header .wrapper-fields, .page-view-color-3 .page-header .wrapper-fields, .page-view-color-4 .page-header .wrapper-fields, .page-view-color-5 .page-header .wrapper-fields {
	background: unset;
}
.page-header h1 {
	font-size: clamp(28px, 6.5vw, 40px);
	max-width: 1000px;
}
.page-header.header-bg-text h1 {
	color: var(--page-fg-color);
}
.page-header.header-bg-text-light h1 {
	color: var(--page-fg-color);
}
.page-header.header-bg-text-dark h1 {
	color: var(--page-darkfg-color);
}
.page-view-color-1 .page-header h1, .page-view-color-2 .page-header h1, .page-view-color-3 .page-header h1, .page-view-color-4 .page-header h1, .page-view-color-5 .page-header h1 {
	color: var(--page-darkfg-color);
}

/* footer */
footer {
	width: 100%;
	font-size: 1em;
}
body:not(.page-view-color-1):not(.page-view-color-2):not(.page-view-color-3):not(.page-view-color-4):not(.page-view-color-5) footer {
	color: var(--page-darkfg-color);
	animation: footergrad 30s infinite linear;
	background-image: linear-gradient( -27deg, #155693, #08c0c6, #155693, #08c0c6, #155693 );
	background-size: 4000px 2040px;
}
.page-view-color-1 footer, .page-view-color-3 footer, .page-view-color-4 footer, .page-view-color-5 footer {
	color: var(--page-darkfg-color);
	background-color: var(--page-darkbg-color);
}
.page-view-color-2 footer {
	color: var(--page-fg-color);
	background-color: var(--page-darkbg2-color);
}
footer h4 {
	font-size: 1em;
	font-weight: bold;
	margin: 0;
	margin-bottom: 1em;
}
footer p {
	margin: 0;
	font-size: 0.8em;
}
footer a, footer .link {
	color: var(--page-darkfg-color);
}
.page-view-color-2 footer a, .page-view-color-2 footer .link {
	color: var(--page-fg-color)
}
footer a:hover, footer .link:hover {
	color: var(--page-darkfg-color);
}
.page-view-color-2 footer a:hover, .page-view-color-2 footer .link:hover {
	color: var(--page-fg-color);
}
@keyframes footergrad {
	100% {
		background-position: 4000px 2000px;
	}
}
.footer-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 38, 88, 0.2);
	padding: 2em var(--gorizontal-field);
}
.footer-row {
	display: flex;
	flex-grow: 1;
    gap: 2em 3em;
    flex-wrap: wrap;
    opacity: 0.75;
}
.footer-subrow {
	display: flex;
    flex-grow: 1;
    gap: 2em 3em;
    flex-wrap: wrap;
    flex-basis: 600px;
}
.footer-name {
	flex-grow: 2;
    flex-basis: 700px;
}
.footer-name-small {
	display: block;
	font-size: 0.9em;
	margin: 0;
	margin-bottom: 0.2em;
}
.footer-name-big {
	display: block;
	font-size: 1.3em;
	margin: 0;
}
footer .buy_fil0, footer .dzen_fil0, footer .rutube_fil0, footer .vk_fil0, footer .yt_fil0, footer .od_fil0, footer .telegram_fil0, footer .telegram_fil1 {
	fill: var(--page-darkfg-color);
}
.page-view-color-2 footer .buy_fil0, .page-view-color-2 footer .dzen_fil0, .page-view-color-2 footer .rutube_fil0, .page-view-color-2 footer .vk_fil0, .page-view-color-2 footer .yt_fil0, .page-view-color-2 footer .od_fil0, .page-view-color-2 footer .telegram_fil0, .page-view-color-2 footer .telegram_fil1 {
	fill: var(--page-fg-color);
}
footer .telegram_fil0 {
	opacity: 0.4;
}
.footer-contacts-social-wrapper h4 {
	margin-bottom: 0.5em;
}
/* .page-view-image-1 footer {
    filter: grayscale(100%);
} */

.feedback-marker {
	display: none;
	position: absolute;
    width: 30px;
    height: 30px;
    background: #3390ff;
    border-radius: 26px;
}
.feedback-marker > div {
	width: 14px;
    height: 10px;
    background: #fff;
    border-radius: 3px;
    position: relative;
    margin: 8px;
    cursor: pointer;
}
.feedback-marker > div::after {
	content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0;
    border-color: #fff transparent transparent #fff;
    border-style: solid;
    border-width: 5px;
}
.feedback-marker.active {
	display: block;
}

.alert {
	padding: calc( var(--vertical-field) / 3 ) calc( var(--gorizontal-field) / 3 );
	margin-bottom: calc( var(--vertical-field) / 3 );
	--alert-bg-color: hsl( var(--alert-base-h), 60%, 90% );
	--alert-fg-color: hsla( var(--alert-base-h), 100%, 20% );
	--alert-link-color: hsl( var(--alert-base-h), 100%, 40% );
}
.alert.alert-info, .btn.btn-info {
	--alert-base-h: 180;
}
.alert.alert-blue, .btn.btn-blue {
	--alert-base-h: 210;
}
.alert.alert-danger, .btn.btn-danger {
	--alert-base-h: 0;
}
.alert.alert-warning, .btn.btn-warning {
	--alert-base-h: 50;
}
.alert.alert-success, .btn.btn-success {
	--alert-base-h: 102;
}
.btn.btn-info, .btn.btn-blue, .btn.btn-danger, .btn.btn-warning, .btn.btn-success {
	--btn-bg-color: hsl( var(--alert-base-h), 55%, 80% );
    --btn-fg-color: hsla( var(--alert-base-h), 95%, 30%, 0.5 );
    --btn-link-color: hsl( var(--alert-base-h), 95%, 20% );
}
.alert h4 {
	font-size: 1.3em;
   margin-bottom: 0.5em;
   margin-top: 0.5em;
}
.alert {
	background: var(--alert-bg-color);
	color: var(--alert-fg-color);
}
.alert a, .alert .link {
	/* color: hsl( var(--alert-base-h), 95%, 20% ); */
	color: inherit;
}

.page-content ul {
	list-style-type: none;
}
.page-content ul>li:before {
	 content:  '—';
	 display: inline-block;
	 width: 1.3em;
	 margin-left: -1.3em;
}
.page-content ul>li:not(:last-child), .page-content ol>li:not(:last-child) {
    margin-bottom: 0.7em;
}
.page-content li > ol, .page-content li > ul, .page-content ol > ul, .page-content ul > ol, .page-content ol > ol, .page-content ul > ul {
	margin-block: 0.8em;
}
.page-content ul:empty {
	display: none;
}

.btn, a.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-color: var(--btn-bg-color, var(--page-grey-kit-bg3));
    border: 1px solid var(--btn-fg-color, var(--page-grey-kit-darkbg1));
	color: var(--btn-link-color, var(--page-link-color));
    white-space: nowrap;
    padding: 6px 12px;
    font-size: inherit;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	transition: filter 0.5s;
}
a.btn {
	text-decoration: unset;
}
.btn > a {
	color: inherit;
	text-decoration: none;
}
.btn:hover {
	filter: brightness(1.05);
}
.alert .btn {
	/* --alert-bg-color: hsl( var(--alert-base-h), 55%, 80% );
    --alert-fg-color: hsl( var(--alert-base-h), 95%, 30% );
    --alert-link-color: hsl( var(--alert-base-h), 95%, 30% ); */
	--btn-bg-color: hsl( var(--alert-base-h), 55%, 80% );
    --btn-fg-color: hsla( var(--alert-base-h), 95%, 30%, 0.5 );
    --btn-link-color: hsl( var(--alert-base-h), 95%, 20% );
}
.btn-primary {
    color: var(--page-grey-kit-darkfg1);
    background-color: var(--page-main-kit-bg3);
    border-color: var(--page-darkfg3-color);
}
a.btn.btn-primary, .btn.btn-primary.link {
	color: var(--page-grey-kit-darkfg1);
	text-decoration: none;
}
.btn.btn-primary a, .btn.btn-primary .link {
	color: var(--page-grey-kit-darkfg1);
	text-decoration: none;
}
a.btn.btn-primary:hover, .btn.btn-primary.link:hover {
	color: var(--page-grey-kit-darkfg1);
	text-decoration: underline;
}
.btn.btn-primary a:hover, .btn.btn-primary .link:hover {
	color: var(--page-grey-kit-darkfg1);
	text-decoration: underline;
}

.button-group {
	display: flex;
	padding: 1px;
}
.button-group>a {
	display: block;
	margin: -1px;
	padding: 0.5em 1em;
	text-decoration: none;
	border: 1px solid var(--page-grey-kit-fg3-2);
}
.button-group>a:first-child {
	border-radius: 0.5em 0 0 0.5em;
}
.button-group>a:last-child {
	border-radius: 0 0.5em 0.5em 0;
}
.button-group>a:not(.active) {
	color: var(--page-fg3-color);
	background: var(--page-grey-kit-bg3);
}
.button-group>a.active {
	color: var(--page-fg-color);
	background: var(--page-bg-color);
}


.list-item {
	display: flex;
	flex-direction: column;
	gap: 0.7em 2em;
	min-width: 70%;
	overflow: hidden;
	max-width: 100%;
}
.list-item:not(:last-child) {
	margin-bottom: 3em;
	overflow: hidden;
}
.item-info {
	flex-grow: 1;
	width: 60%;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.item-info-small {
    color: var(--page-grey-kit-fg1);
    font-size: 0.7em;
}
.item-header {
	display: block;
	font-size: 120%;
	font-weight: bold;
	max-width: 800px;
}

.cookie-permission-alert {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: calc(var(--vertical-field) / 2) var(--gorizontal-field);
	background-color: var(--page-bg2-color);
	color: var(--page-bg-color);
	font-size: 0.8em;
	z-index: 100;
}
.cookie-permission-alert button {
	background: none;
	color: inherit;
	font: inherit;
	border: 1px solid var(--page-bg-color);
	padding: 0.3em 1em;
	margin: 0 1em;
}

body:not(.cookie-alert-show) .cookie-permission-alert {
	display: none;
}


@media (max-width: 1699px) {
	.footer-row {
		flex-basis: auto;
	}
	.footer-subrow {
		flex-basis: auto;
		justify-content: unset;
	}
}
/* </--footer */


/* FORM */
.form2024 {
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    width: fit-content;
    max-width: 350px;
	margin-bottom: 1em;
	color: var(--page-fg2-color);
	box-sizing: border-box;
    --form2024-dark-link-hover-color: hsl(197deg 83.86% 62.91%);
    --form2024-light-link-hover-color: hsl(197deg 98.45% 29.74%);
    --form2024-light-bg-color: #e0e1e2;
    --form2024-light-bg-hover-color: #f0f0f0;
    --form2024-dark-bg-color: #6c757d;
    --form2024-dark-bg-hover-color: #848e97;
}
body.page-view-color-1 .form2024, body.page-view-color-2 .form2024, body.page-view-color-3 .form2024, body.page-view-color-4 .form2024, body.page-view-color-5 .form2024 {
    --form2024-light-bg-color: var(--page-bg-color);
    --form2024-dark-bg-color: var(--page-darkbg-color);
    --form2024-light-bg-hover-color: var(--page-darkbg-color);
    --form2024-dark-link-hover-color: var(--page-darkfg-color);
    --form2024-light-link-hover-color: var(--page-darkfg-color);
}
.form2024 .form-header {
	font-size: 1.3em;
	margin-bottom: 0.5em;
	text-decoration: underline;
}
.form2024 :is(.input-wrapper) {
	display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.form2024 .checkbox-wrapper {
	display: flex;
	gap: 0.55em;
	padding-block: 0.15em;
	align-items: center;
}
.form2024 .radio-wrapper {
	display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 0;
    flex-basis: 0;
    width: fit-content;
}
.form2024 .file-wrapper {
	display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.form2024 .radio-wrapper .radio-header {
	font-size: 0.88em;
    color: inherit;
	padding-bottom: 0.7em;
}
.form2024 .radio-wrapper .option-wrapper {
	display: flex;
	padding-block: 0.37em;
    padding-left: 0.3em;
    gap: 0.55em;
    align-items: center;
    border-left: 3px solid var(--page-border-color);
	transition: border-color 0.1s linear;
}
.form2024 .radio-wrapper .option-wrapper:has( input[type="radio"]:checked ) {
	border-color: var(--page-link-color);
}
.form2024 .input-wrapper label {
    font-size: 0.88em;
    color: inherit;
}
.form2024 .checkbox-wrapper label {
	font-size: 0.88em;
    color: inherit
}
.form2024 .radio-wrapper .option-wrapper label {
	font-size: 0.88em;
    color: inherit
}
.form2024 .input-wrapper input[type="text"], .form2024 .input-wrapper select, .form2024 .input-wrapper textarea {
    padding: 0.75em 1.1em;
    border: 1px var(--page-border-color) solid;
    transition: all 0.16s;
    font-family: inherit;
    font-size: 1.1em;
    color: var(--page-fg-color);
    background: var(--page-bg-color);
    letter-spacing: inherit;
    border-radius: 0.45em;
}
.form2024 .input-wrapper input:focus-visible, .form2024 .input-wrapper select:focus-visible, .form2024 .input-wrapper textarea:focus-visible {
    outline: none;
    border: 1px solid var(--page-bg2-color);
}
.form2024 .input-wrapper select > option {
	padding: 0.75em 1.1em;
    font-family: inherit;
    font-size: 1em;
    color: var(--page-fg-color);
    background: var(--page-bg-color);
}
.form2024 .checkbox-wrapper input[type="checkbox"] {
	background-color: var(--page-bg-color);
	width: 1.5em;
    height: 1.5em;
    padding: 0;
    margin: 0;
}
.form2024 .radio-wrapper .option-wrapper input[type="radio"] {
	background-color: var(--page-bg-color);
	margin: 0.2em 0 0 0;
    padding: 0;
    width: 1.2em;
    height: 1.2em;
}
.form2024 .file-wrapper input[type="file"] {
	padding: 0.5em;
    border: 1px var(--page-border-color) solid;
	color: inherit;
    border-radius: 10px;
    max-width: 100%;
	text-wrap: wrap;
    line-height: 1.6em;
	font-family: inherit;
	cursor: pointer;
    box-sizing: border-box;
}
.form2024 .file-wrapper input[type="file"]::file-selector-button {
	padding: 0.5em;
    background: var(--form2024-light-bg-color);
	color: inherit;
	border: none;
	border-radius: 0.45em;
	outline: none;
}
.form2024 button[type="submit"], .form2024 button.submit {
    width: fit-content;
    padding: 0.85em 1.55em;
    border-radius: 0.6em;
    border: none;
    color: var(--page-fg-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88em;
    background: var(--form2024-light-bg-color);
    letter-spacing: inherit;
    transition: all 0.16s;
    margin-top: 1.04em;
}
.form2024 button[type="submit"].dark, .form2024 button.submit.dark {
    background-color: var(--form2024-dark-bg-color);
    color: var(--page-darkfg-color);
}
.form2024 button[type="submit"].dark:hover, .form2024 button[type="submit"].dark:focus-visible, .form2024 button.submit.dark:hover, .form2024 button.submit.dark:focus-visible {
    color: var(--form2024-dark-link-hover-color);
    background-color: var(--form2024-dark-bg-hover-color);
    outline: none;
}
.form2024 button[type="submit"]:hover, .form2024 button[type="submit"]:focus-visible, .form2024 .form2024 button.submit:hover, .form2024 .form2024 button.submit:focus-visible {
    color: var(--form2024-light-link-hover-color);
    background-color: var(--form2024-light-bg-hover-color);
    outline: none;
}
.form2024.light {
	color: var(--page-fg-color);
}
.form2024.dark {
	color: var(--page-darkfg-color);
}
.form2024.s, .form2024.small {
    font-size: 0.8em;
    max-width: 200px;
}
.form2024.b, .form2024.big {
    font-size: 1.2em;
    max-width: 350px;
}
/* </-- FORM */


/* блоки */
.page-block {
	margin: var(--vertical-field) 0;
	padding: 1em;
}
.page-block-content {
	width: fit-content;
}
.page-block-lite {
	border-width: 1px;
	border-style: solid;
	background-color: var(--page-bg-color);
	border-color: var(--page-grey-kit-bg1);
}
.page-block-blue {
	background-color: var(--page-bg2-color);
	color: var(--page-bg-color);
}
.page-block-dark {
	background-color: var(--page-fg2-color);
	color: var(--page-bg-color);
}
.page-block-blue a {
	color: var(--page-bg-color);
}
.page-block-dark a {
	color: var(--page-bg-color);
}
.page-block>h3 {
	margin-top: 0;
}

.page-right-socitem {
	display: inline-block;
	margin: 0 1em 0 0;
}
.page-right-socitem img {
	vertical-align: middle;
}
.page-right-social {
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}




/* блоки */

.loading {
	--loading-item-width: 2%;
	--loading-item-height: 4%;
	--loading-gap: 2%;
	--loading-duration: 900ms;
	--loading-pause: 50ms;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--loading-gap);
	position: absolute;
	inset: 0;
	cursor: wait;
}
.loading .loading-first {
	--loading-animation-delay: calc(-1 * var(--loading-duration) / 3 * 2);
}
.loading .loading-second {
	--loading-animation-delay: calc(-1 * var(--loading-duration) / 3);
}
.loading .loading-third {
	--loading-animation-delay: calc( -1 * var(--loading-pause) );
}
.loading > * {
	z-index: 500;
	border-radius: 5%;
	width: var(--loading-item-width);
	height: var(--loading-item-height);
	animation-name: loading-animation;
	animation-duration: calc( var(--loading-duration) + var(--loading-pause));
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: var(--loading-animation-delay);
}
@keyframes loading-animation {
	0% {
		background-color: #ffffff88;
	}
	50% {
		background-color: #ffffffd7;
		transform: scale(1, 1.5);
		transform-origin: center;
	}
	100% {
		background-color: #ffffff88;
	}
}
.slider-img-wrapper .loading {
	--loading-item-width: 15px;
	--loading-item-height: 20px;
	--loading-gap: 10px;
	--loading-duration: 1500ms;
	--loading-pause: 150ms;
}
.slider-thumbnails .loading {
	--loading-item-width: 3px;
	--loading-item-height: 5px;
	--loading-gap: 2px;
	--loading-duration: 1500ms;
	--loading-pause: 150ms;
}

.table {
	background-color: transparent;
	border-collapse: collapse;
    border: 1px solid #ccc;
	width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
	min-width: 600px
}
.table caption {
	text-align: start;
	font-size: 1.5em;
	margin-bottom: 0.55em;
}
.table td, .table th {
    border: 1px solid #ccc;
    padding: 5px;
}
.table th {
	background-color: var(--page-grey-kit-darkfg1);
	font-size: .9em;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 0.5em;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
/* более 1000 */
@media ( min-width: 1000px ) {
	.page {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 500px, 100% ) minmax( 250px, 500px ) );
		grid-template-rows: 0fr 1fr;
	}
	.page-content {
		grid-row: span 2;
	}
	.page-right-column-top {
		grid-column: 2/-1;
		grid-row: 1;
		padding: var(--vertical-field) var(--gorizontal-field) var(--vertical-field) 0;
	}
	.page-right-column-bottom {
		grid-column: 2/-1;
		grid-row: 2;
		padding: var(--vertical-field) var(--gorizontal-field) var(--vertical-field) 0;
	}
	.page-content-bottom {
		grid-column: span 2;
		padding: var(--vertical-field) var(--gorizontal-field);
	}
	.page-column-add {
		padding: var(--vertical-field) var(--gorizontal-field);
		grid-column: 1/-2;
	}
	.page-right-column-add {
		padding: var(--vertical-field) var(--gorizontal-field) var(--vertical-field) 0;
	}
}

/* менее 1000 */
@media ( max-width: 999px ) {
	.page {
		display: flex;
		flex-direction: column;
	}
	.page-right-column-top {
		padding: var(--vertical-field) var(--gorizontal-field);
	}
	.page-right-column-bottom {
		padding: var(--vertical-field) var(--gorizontal-field);
	}
	.page-content-bottom {
		padding: var(--vertical-field) var(--gorizontal-field);
	}
	.page-column-add {
		padding: var(--vertical-field) var(--gorizontal-field);
	}
	.page-right-column-add {
		padding: var(--vertical-field) var(--gorizontal-field);
	}
}

/* более 600 */
@media ( min-width: 600px ) {
	body {
		--gorizontal-field: 4em;
		--vertical-field: 2em;
		margin-left: 50px;
	}
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
	}
	.sidebar:not(.open) {
		width: 50px;
		overflow: hidden;
	}
	.sidebar.open {
		width: 100vw;
		overflow: auto;
	}
	.sidebar-buttons {
		position: fixed;
		width: 50px;
		height: 100%;
		flex-direction: column;
	}
	.sidebar-content {
		right: 0;
		top: 0;
		width: calc(100vw - 50px);
		height: 100vh;
		padding: 70px;
	}
	.wrapper-fields {
		padding-left: var(--gorizontal-field);
		padding-right: var(--gorizontal-field);
	}
}
/* менее 600 */
@media ( max-width: 599px ) {
	body {
		--gorizontal-field: 1.5em;
		--vertical-field: 1em;
		margin-left: 0;
	}
	.sidebar {
		position: relative;
		width: 100%; /*todo поставить 100vw если чё то сломалось*/
		overflow: hidden;
		height: 50px;
	}
	.sidebar:not(.open) {
	}
	.sidebar.open {
		position: fixed;
		top: 0;
		height: 100vh;
	}
	.sidebar-buttons {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 50px;
	}
	.sidebar-content {
		left: 0;
		bottom: 0;
		width: 100vw;
		height: calc(100vh - 50px);
		padding: 20px;
	}
	.sidebar-menu-contacts {
		padding: 25px 30px;
		min-width: unset;
		width: fit-content;
	}
	.wrapper-fields {
		padding-left: var(--gorizontal-field);
		padding-right: var(--gorizontal-field);
	}
	.table {
		font-size: 0.8em;
	}
	@media ( max-width: 399px ) {
		.sidebar-nav {
			margin: 0;
		}
		.sidebar-menu-contacts {
			font-size: 0.8em;
			padding: 15px;
		}
		.table {
			font-size: 0.65em;
		}
	}
}