@font-face { font-family: 'Roboto';  src: url('/fonts/Roboto-Regular.ttf'); }
/*@font-face { font-family: 'ptsans';  src: url('/fonts/PT-Sans.ttf'); }*/

/*@import url('https://fonts.googleapis.com/css2?family=Cuprum&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');*/

:root {
	--color-light: rgba(255,255,255,1);
		--color-light-darker-1: rgba(250,250,250,1); --color-light-darker-2: rgba(245,245,245,1); --color-light-darker-3: rgba(240,240,240,1); --color-light-darker-4: rgba(235,235,235,1); --color-light-darker-5: rgba(230,230,230,1); --color-light-darker-6: rgba(225,225,225,1); --color-light-darker-7: rgba(220,220,220,1); --color-light-darker-8: rgba(215,215,215,1); --color-light-darker-9: rgba(210,210,210,1); --color-light-darker-10: rgba(205,205,205,1); --color-light-darker-11: rgba(200,200,200,1); --color-light-darker-12: rgba(195,195,195,1); --color-light-darker-13: rgba(190,190,190,1); --color-light-darker-14: rgba(185,185,185,1); --color-light-darker-15: rgba(180,180,180,1); --color-light-darker-16: rgba(175,175,175,1); --color-light-darker-17: rgba(170,170,170,1); --color-light-darker-18: rgba(165,165,165,1); --color-light-darker-19: rgba(160,160,160,1); --color-light-darker-20: rgba(155,155,155,1);
	--color-dark: rgba(0,0,0,1);
		--color-dark-lighter-1: rgba(5,5,5,1); --color-dark-lighter-2: rgba(10,10,10,1); --color-dark-lighter-3: rgba(15,15,15,1); --color-dark-lighter-4: rgba(20,20,20,1); --color-dark-lighter-5: rgba(25,25,25,1); --color-dark-lighter-6: rgba(30,30,30,1); --color-dark-lighter-7: rgba(35,35,35,1); --color-dark-lighter-8: rgba(40,40,40,1); --color-dark-lighter-9: rgba(45,45,45,1); --color-dark-lighter-10: rgba(50,50,50,1); --color-dark-lighter-11: rgba(55,55,55,1); --color-dark-lighter-12: rgba(60,60,60,1); --color-dark-lighter-13: rgba(65,65,65,1); --color-dark-lighter-14: rgba(70,70,70,1); --color-dark-lighter-15: rgba(75,75,75,1); --color-dark-lighter-16: rgba(80,80,80,1); --color-dark-lighter-17: rgba(85,85,85,1); --color-dark-lighter-18: rgba(90,90,90,1); --color-dark-lighter-19: rgba(95,95,95,1); --color-dark-lighter-20: rgba(100,100,100,1);
	--color-link: rgba(100,100,250,1);
    --color-red: rgb(220, 40, 60, 1);
		--color-red-lighter-1: rgba(230, 50, 70, 1); --color-red-lighter-2: rgba(240, 60, 80, 1); --color-red-lighter-3: rgba(250, 70, 90, 1);
		--color-red-darker-1: rgb(210, 30, 50, 1);
    --color-green: rgb(43, 213, 80, 1);
    --color-yellow: rgb(255, 190, 0, 1);
	--font-family: 'Roboto', sans-serif;
	--input-background: var(--color-light);
	--input-color: var(--color-dark-lighter-15);
	--input-placeholder-color: rgba(100,100,100,0.5);
	--input-border-radius: 0.3rem;
	--box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.1);
		--box-shadow-smaller-1: 0 0.15rem 0.4rem rgba(0,0,0,0.1);
	--border-radius: 0.6rem;
	--default-transition: 0.2s;
	--hover-transform-scale: scale(1.05);
}

.background_dark { background: var(--color-dark); }
	.background_dark_lighter_1 { background: var(--color-dark-lighter-1); }.background_dark_lighter_2 { background: var(--color-dark-lighter-2); }.background_dark_lighter_3 { background: var(--color-dark-lighter-3); }.background_dark_lighter_4 { background: var(--color-dark-lighter-4); }.background_dark_lighter_5 { background: var(--color-dark-lighter-5); }.background_dark_lighter_6 { background: var(--color-dark-lighter-6); }.background_dark_lighter_7 { background: var(--color-dark-lighter-7); }.background_dark_lighter_8 { background: var(--color-dark-lighter-8); }.background_dark_lighter_9 { background: var(--color-dark-lighter-9); }.background_dark_lighter_10 { background: var(--color-dark-lighter-10); }.background_dark_lighter_11 { background: var(--color-dark-lighter-11); }.background_dark_lighter_12 { background: var(--color-dark-lighter-12); }.background_dark_lighter_13 { background: var(--color-dark-lighter-13); }.background_dark_lighter_14 { background: var(--color-dark-lighter-14); }.background_dark_lighter_15 { background: var(--color-dark-lighter-15); }.background_dark_lighter_16 { background: var(--color-dark-lighter-16); }.background_dark_lighter_17 { background: var(--color-dark-lighter-17); }.background_dark_lighter_18 { background: var(--color-dark-lighter-18); }.background_dark_lighter_19 { background: var(--color-dark-lighter-19); }.background_dark_lighter_20 { background: var(--color-dark-lighter-20); }

.background_light { background: var(--color-light); }
	.background_light_darker_1 { background: var(--color-light-darker-1); }.background_light_darker_2 { background: var(--color-light-darker-2); }.background_light_darker_3 { background: var(--color-light-darker-3); }.background_light_darker_4 { background: var(--color-light-darker-4); }.background_light_darker_5 { background: var(--color-light-darker-5); }.background_light_darker_6 { background: var(--color-light-darker-6); }.background_light_darker_7 { background: var(--color-light-darker-7); }.background_light_darker_8 { background: var(--color-light-darker-8); }.background_light_darker_9 { background: var(--color-light-darker-9); }.background_light_darker_10 { background: var(--color-light-darker-10); }.background_light_darker_11 { background: var(--color-light-darker-11); }.background_light_darker_12 { background: var(--color-light-darker-12); }.background_light_darker_13 { background: var(--color-light-darker-13); }.background_light_darker_14 { background: var(--color-light-darker-14); }.background_light_darker_15 { background: var(--color-light-darker-15); }.background_light_darker_16 { background: var(--color-light-darker-16); }.background_light_darker_17 { background: var(--color-light-darker-17); }.background_light_darker_18 { background: var(--color-light-darker-18); }.background_light_darker_19 { background: var(--color-light-darker-19); }.background_light_darker_20 { background: var(--color-light-darker-20); }

.font_color_dark { color: rgba(0,0,0,1); }
	.font_color_light_darker_1 { color: var(--color-light-darker-1); }.font_color_light_darker_2 { color: var(--color-light-darker-2); }.font_color_light_darker_3 { color: var(--color-light-darker-3); }.font_color_light_darker_4 { color: var(--color-light-darker-4); }.font_color_light_darker_5 { color: var(--color-light-darker-5); }.font_color_light_darker_6 { color: var(--color-light-darker-6); }.font_color_light_darker_7 { color: var(--color-light-darker-7); }.font_color_light_darker_8 { color: var(--color-light-darker-8); }.font_color_light_darker_9 { color: var(--color-light-darker-9); }.font_color_light_darker_10 { color: var(--color-light-darker-10); }.font_color_light_darker_11 { color: var(--color-light-darker-11); }.font_color_light_darker_12 { color: var(--color-light-darker-12); }.font_color_light_darker_13 { color: var(--color-light-darker-13); }.font_color_light_darker_14 { color: var(--color-light-darker-14); }.font_color_light_darker_15 { color: var(--color-light-darker-15); }.font_color_light_darker_16 { color: var(--color-light-darker-16); }.font_color_light_darker_17 { color: var(--color-light-darker-17); }.font_color_light_darker_18 { color: var(--color-light-darker-18); }.font_color_light_darker_19 { color: var(--color-light-darker-19); }.font_color_light_darker_20 { color: var(--color-light-darker-20); }
.font_color_light { color: rgba(255,255,255,1); }
	.font_color_dark_lighter_1 { color: var(--color-dark-lighter-1); }.font_color_dark_lighter_2 { color: var(--color-dark-lighter-2); }.font_color_dark_lighter_3 { color: var(--color-dark-lighter-3); }.font_color_dark_lighter_4 { color: var(--color-dark-lighter-4); }.font_color_dark_lighter_5 { color: var(--color-dark-lighter-5); }.font_color_dark_lighter_6 { color: var(--color-dark-lighter-6); }.font_color_dark_lighter_7 { color: var(--color-dark-lighter-7); }.font_color_dark_lighter_8 { color: var(--color-dark-lighter-8); }.font_color_dark_lighter_9 { color: var(--color-dark-lighter-9); }.font_color_dark_lighter_10 { color: var(--color-dark-lighter-10); }.font_color_dark_lighter_11 { color: var(--color-dark-lighter-11); }.font_color_dark_lighter_12 { color: var(--color-dark-lighter-12); }.font_color_dark_lighter_13 { color: var(--color-dark-lighter-13); }.font_color_dark_lighter_14 { color: var(--color-dark-lighter-14); }.font_color_dark_lighter_15 { color: var(--color-dark-lighter-15); }.font_color_dark_lighter_16 { color: var(--color-dark-lighter-16); }.font_color_dark_lighter_17 { color: var(--color-dark-lighter-17); }.font_color_dark_lighter_18 { color: var(--color-dark-lighter-18); }.font_color_dark_lighter_19 { color: var(--color-dark-lighter-19); }.font_color_dark_lighter_20 { color: var(--color-dark-lighter-20); }
.font_color_link { color: var(--color-link) !important; }
.font_color_red { color: var(--color-red) !important; }
	.font_color_red_lighter_1 { color: var(--color-red-lighter-1) !important; } .font_color_red_darker_1 { color: var(--color-red-darker-1) !important; }
.font_color_green { color: var(--color-green) !important; }
	
.font_family { font-family: var(--font-family); }

html, body, p, h1, h2, h3, ul { margin: 0; padding: 0; }

html, body { font-size: 18px; font-family: var(--font-family); color: var(--color-dark-lighter-10); position: relative; overflow-x: hidden; overflow-y: scroll; min-height: 100vh; border: px solid red; background: var(--color-light-lighter-1); }
body { overflow-y: hidden; }

img { vertical-align: bottom; }
a, .link { text-decoration: none; color: var(--color-link); cursor: pointer; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1rem; }
li { margin: 0 0 0 1.2rem; padding: 0; }

button, input[type="button"], input[type="button"]:active, input[type="submit"], input[type="submit"]:active, input[type="text"]:focus, input[type="password"]:focus, textarea, *[contenteditable], *[contenteditable='true'], select { outline: none; border: none; font-family: var(--font-family); }

input[type="button"], input[type="submit"], input[type="text"], input[type="password"], textarea, *[contenteditable], *[contenteditable='true'] { color: var(--input-color); font-family: var(--font-family); }

input[type="text"], input[type="password"], textarea { width: 100%; resize: none; overflow: hidden; border: 1px solid var(--color-light-darker-8); font-size: 1rem; border-radius: 0.4rem; background: var(--input-background); padding: 0.6rem 1rem; box-shadow: var(--box-shadow-smaller-1); }

select { width: 100%; padding: 0.6rem 1rem; font-size: 1rem; color: var(--input-color); border-radius: 0.4rem; background: var(--input-background); border: none; box-shadow: var(--box-shadow-smaller-1); outline: none; }

/*placeholder*/
input[type='text']::placeholder, input[type='password']::placeholder, textarea::placeholder { color: var(--input-placeholder-color); }
input[type='text']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--input-placeholder-color); }
input[type='text']::-moz-placeholder, input[type='password']::-moz-placeholder, textarea::-moz-placeholder { color: var(--input-placeholder-color); }
input[type='text']:-moz-placeholder, input[type='password']:-moz-placeholder, textarea:-moz-placeholder { color: var(--input-placeholder-color); }
input[type='text']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--input-placeholder-color); }

[contenteditable]:empty:before {
	content: attr(data-placeholder);
	color: var(--color-light-darker-12);
	display: inline-block;
	cursor: text;
}
/*placeholder*/

input[type='checkbox'] { margin: 0 0.5rem 0 0; }

label { display: inline-flex; align-items: center; }

table { border-collapse: collapse; }
	
.input_title { margin: 0 0 0.4rem 0; color: var(--color-dark-lighter-3); }

.new_scroll::-webkit-scrollbar { /*вся полоса*/ width: 6px; }
.new_scroll::-webkit-scrollbar-track { /*полоса прокрутки*/ background-color: var(--color-light-lighter-2); border-left: px solid #ddd; } 
.new_scroll::-webkit-scrollbar-thumb { /*бегунок*/ border: px solid red; background-color: var(--color-red); transition: 0.3s; } 
.new_scroll::-webkit-scrollbar-thumb:hover { /*бегунок при наведении*/ background-color: var(--color-red-lighter-1); } 

*, *:before, *:after { -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; }

/*КНОПКИ >> */

.button { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1rem; border-radius: 0.4rem; box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.09); cursor: pointer; transition: 0.1s; overflow: hidden; position: relative; background: var(--color-red); color: #fff; font-size: 1rem; white-space: nowrap; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
.button_smaller_1 { padding: 0.5rem 0.9rem; font-size: 0.95rem; }
.button_smaller_2 { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
	.button:before { position: absolute; top: 0; left: 0; content: ''; height: 100%; width: 100%; display: block; background: rgba(255,255,255,0.1); opacity: 0; transition: 0.2s; }
	.button:hover:before { opacity: 1; }
	.button:active:before { opacity: 0; }
	.button > img, .button > .fa { margin-right: 0.7rem; }

.button_d_load { background: var(--color-dark-lighter-2); color: var(--color-light-lighter-2); }

.button_border_theme:after { content: ''; border: 4px solid var(--color-theme); display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.button_grayscale { background: rgba(200,200,200,1); color: #333; }

/* << КНОПКИ*/

.none { display: none; } .flex { display: flex; } .inline_flex { display: inline-flex; } .flex_wrap { flex-wrap: wrap; } .grid_gap_1 { grid-gap: 0.5rem; } .grid_gap_2 { grid-gap: 1rem; } .grid_gap_3 { grid-gap: 1.5rem; } .grid_gap_4 { grid-gap: 2rem; } .flex_space_between { justify-content: space-between; } .flex_vrt_center { align-items: center; }
.els_center { text-align: center; } .to_center { margin-left: auto; margin-right: auto; }

.transition { transition: var(--default-transition); }
.hover_increase { transition: var(--default-transition); } .hover_increase:hover { transform: var(--hover-transform-scale); }
.hover_opacity { transition: var(--default-transition); } .hover_opacity:hover { opacity: 0.7; }
.hover_underline:hover { text-decoration: underline; }

.width_100 { width: 100%; }
.not_copy { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
.font_bold { font-weight: bold !important; } .font_normal { font-weight: normal !important; }
.break_word { word-break: break-word; }
.cursor_pointer { cursor: pointer; }

.font_bigger_1{font-size:105% !important} .font_bigger_2{font-size:110% !important} .font_bigger_3{font-size:115% !important} .font_bigger_4{font-size:120% !important} .font_bigger_5{font-size:125% !important} .font_bigger_6{font-size:130% !important} .font_bigger_7{font-size:135% !important} .font_bigger_8{font-size:140% !important} .font_bigger_9{font-size:145% !important} .font_bigger_10{font-size:150% !important} .font_bigger_11{font-size:155% !important} .font_bigger_12{font-size:160% !important} .font_bigger_13{font-size:165% !important} .font_bigger_14{font-size:170% !important} .font_bigger_15{font-size:175% !important} .font_bigger_16{font-size:180% !important} .font_bigger_17{font-size:185% !important} .font_bigger_18{font-size:190% !important} .font_bigger_19{font-size:195% !important} .font_bigger_20{font-size:200% !important}
.font_smaller_1{font-size:95% !important} .font_smaller_2{font-size:90% !important} .font_smaller_3{font-size:85% !important} .font_smaller_4{font-size:80% !important} .font_smaller_5{font-size:75% !important} .font_smaller_6{font-size:65% !important} .font_smaller_7{font-size:60% !important} .font_smaller_8{font-size:55% !important} .font_smaller_9{font-size:50% !important} .font_smaller_10{font-size:45% !important}
.margin_top_1{margin-top:0.1rem !important} .margin_top_2{margin-top:0.2rem !important} .margin_top_3{margin-top:0.3rem !important} .margin_top_4{margin-top:0.4rem !important} .margin_top_5{margin-top:0.5rem !important} .margin_top_6{margin-top:0.6rem !important} .margin_top_7{margin-top:0.7rem !important} .margin_top_8{margin-top:0.8rem !important} .margin_top_8{margin-top:0.9rem !important} .margin_top_10{margin-top:1rem !important} .margin_top_11{margin-top:1.1rem !important} .margin_top_12{margin-top:1.2rem !important} .margin_top_13{margin-top:1.3rem !important} .margin_top_14{margin-top:1.4rem !important} .margin_top_15{margin-top:1.5rem !important}
.margin_bottom_1{margin-bottom:0.1rem !important} .margin_bottom_2{margin-bottom:0.2rem !important} .margin_bottom_3{margin-bottom:0.3rem !important} .margin_bottom_4{margin-bottom:0.4rem !important} .margin_bottom_5{margin-bottom:0.5rem !important} .margin_bottom_6{margin-bottom:0.6rem !important} .margin_bottom_7{margin-bottom:0.7rem !important} .margin_bottom_8{margin-bottom:0.8rem !important} .margin_bottom_8{margin-bottom:0.9rem !important} .margin_bottom_10{margin-bottom:1rem !important} .margin_bottom_11{margin-bottom:1.1rem !important} .margin_bottom_12{margin-bottom:1.2rem !important} .margin_bottom_13{margin-bottom:1.3rem !important} .margin_bottom_14{margin-bottom:1.4rem !important} .margin_bottom_15{margin-bottom:1.5rem !important} .margin_bottom_16{margin-bottom:1.6rem !important} .margin_bottom_17{margin-bottom:1.7rem !important} .margin_bottom_18{margin-bottom:1.8rem !important} .margin_bottom_19{margin-bottom:1.9rem !important} .margin_bottom_20{margin-bottom:2rem !important}
.margin_left_1{margin-left:0.1rem !important} .margin_left_2{margin-left:0.2rem !important} .margin_left_3{margin-left:0.3rem !important} .margin_left_4{margin-left:0.4rem !important} .margin_left_5{margin-left:0.5rem !important} .margin_left_6{margin-left:0.6rem !important} .margin_left_7{margin-left:0.7rem !important} .margin_left_8{margin-left:0.8rem !important} .margin_left_8{margin-left:0.9rem !important} .margin_left_10{margin-left:1rem !important} .margin_left_11{margin-left:1.1rem !important} .margin_left_12{margin-left:1.2rem !important} .margin_left_13{margin-left:1.3rem !important} .margin_left_14{margin-left:1.4rem !important} .margin_left_15{margin-left:1.5rem !important}
.margin_right_1{margin-right:0.1rem !important} .margin_right_2{margin-right:0.2rem !important} .margin_right_3{margin-left:0.3rem !important} .margin_right_4{margin-right:0.4rem !important} .margin_right_5{margin-right:0.5rem !important} .margin_right_6{margin-right:0.6rem !important} .margin_right_7{margin-right:0.7rem !important} .margin_right_8{margin-left:0.8rem !important} .margin_right_8{margin-right:0.9rem !important} .margin_right_10{margin-right:1rem !important} .margin_right_11{margin-right:1.1rem !important} .margin_right_12{margin-right:1.2rem !important} .margin_right_13{margin-right:1.3rem !important} .margin_right_14{margin-right:1.4rem !important} .margin_right_15{margin-right:1.5rem !important}


/*ОКНА >> */
.notify { display: ; position: fixed; bottom: -4rem; left: 50%; z-index: 105; transform: translateX(-50%); max-width: 25%; padding: 1rem 1.5rem; background: rgba(0,0,0,0.95); border-radius: 0.8rem; box-shadow: 0 0 0.5rem rgba(0,0,0,0.7); text-align: center; opacity: 0; word-break: break-word;
}
	.notify .cross { width: 1.3rem; height: 1.3rem; cursor: pointer; position: absolute; top: 0; right: 0; transform: translate(30%,-40%); transition: 0.2s; background: #fff; border-radius: 50%; }
		.notify .cross > img {
			width: 100%; height: 100%; transform: scale(1.1);
		}
	.notify .cross:hover { transform: translate(30%,-40%) scale(1.05); }

#dark_back { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; border: px solid green; }

.back_modal {
	position: fixed; top: 0; left: 0; z-index: 100; border: px solid red; width: 100%; height: 100%; justify-content: center; display: none; opacity: 0; text-align: center; background: rgba(0,0,0,0.5); overflow-y: auto;  border: px solid red;
}
	.ins_back_modal {
		width: 100%; min-height: 100vh;
		border: px solid green;
		position: relative;
		display: flex; justify-content: center; align-items: center;
	}
		.modal_window {
			background: rgba(255,255,255,1);
			border-radius: 0.5rem;
			text-align: center;
			box-shadow: 0 0 1.5rem rgba(0,0,0,0.5);
			overflow: hidden;
			opacity: 0; z-index: 55; display: none;
			position: relative;
			/*position: relative; left: 50%; transform: translateX(-50%);*/
		}
			.modal_window_content {
				border-radius: 0.5rem; border: px solid green; text-align: center; overflow: hidden; position: relative; width: 100%; height: 100%;
			}
				.modal_title {
					padding: 1.5rem;
					display: flex; align-items: center; justify-content: center;
					text-align: center; font-weight: bold; font-size: 1.5rem;
				}
				.modal_content {
					padding: 1.5rem;
					word-break: break-word;
				}
		.modal_confirm {
			max-width: 35%;
		}
				.modal_title {
					padding: 1rem;
					font-size: 1.4rem;
					background: rgba(0,0,0,0.1);
				}
				.modal_content {
					padding: 1rem 1.5rem;
					font-size: 1.2rem
				}
				.modal_confirm_buttons {
					padding: 1rem 1rem 1.5rem 1rem;
					display: flex; grid-gap: 1rem; justify-content: center; align-items: center;
				}
/*<< ОКНА*/

/*АНИМАЦИЯ >> */
.animation_waiting_1 { /*анимация ожидания на всю ширину*/
	border: px solid red; border-radius: 0.5rem; position: relative; opacity: 1; width: 100%; display: flex; align-items: center; height: 0.5rem;
}
	.animation_waiting_1 span {
		width: 0.5rem; height: 0.5rem; display: inline-block; background: var(--color-theme-2); border-radius: 50%; position: absolute; top: 0; left: 0;
	}
	.animation_waiting_1 span:nth-of-type(1) { animation: loading_full_width_anim1 infinite 3s; }
	.animation_waiting_1 span:nth-of-type(2) { animation: loading_full_width_anim2 infinite 3s; }
	.animation_waiting_1 span:nth-of-type(3) { animation: loading_full_width_anim3 infinite 3s; }
	@keyframes loading_full_width_anim1 {
		0% { left: 0; opacity: 0; }
		10% { left: 0; opacity: 0; }
		50% { left: 47%; opacity: 1; background: var(--color-theme-1); }
		60% { left: 47%; opacity: 1; }
		100% { left: 100%; opacity: 0; }
	}
	@keyframes loading_full_width_anim2 {
		0% { left: 0; opacity: 0; }
		5% { left: 0; opacity: 0; }
		50% { left: 50%; opacity: 1; background: var(--color-theme-1); }
		55% { left: 50%; opacity: 1; }
		100% { left: 100%; opacity: 0; }
	}
	@keyframes loading_full_width_anim3 {
		0% { left: 0; opacity: 0; }
		50% { left: 53%; opacity: 1; background: var(--color-theme-1); }
		100% { left: 100%; opacity: 0; }
	}
.animation_waiting_2 {
	border: px solid green;
	width: 1rem; height: 1rem;
}
	.animation_waiting_2 span {
		content: '';
		display: inline-block;
		background: var(--color-theme-1);
		width: 1rem; height: 1rem;
		border-radius: 50%;
		transform: translateX(-120%);
		transition: 0.2s;
		position: absolute;
		animation: animation_waiting_1 infinite 2s linear;
	}
	@keyframes animation_waiting_1 {
		25% { transform: scale(0.8); background: #fff; }
		50% { transform: translateX(120%); background: var(--color-theme-2); }
		75% { transform: scale(0.8); background: #fff; }
	}
/* << АНИМАЦИЯ*/

/*Переключатели*/
.toggle_item { display: flex; justify-content: space-between; }
	.toggle_item > span { color: var(--color-dark-lighter-3); margin-right: 0.5rem; }
	
	.checkbox {
		display: inline-block; height: 28px; line-height: 28px; margin-right: 10px position: relative; vertical-align: middle; user-select: none; border: px solid red;
	}
		.checkbox .checkbox-switch { /*фон*/
			display: inline-block; box-sizing: border-box; width: 76px; height: 28px; margin: 0 auto; position: relative;	 background: var(--color-light-darker-1); border: 1px solid var(--color-light-darker-3); border-radius: 3px; font-size: 13px; color: #000; transition: all 150ms ease-in;	
		}
			.checkbox .checkbox-switch:before { /*квадратный бегунок*/
				content: ''; display: block; box-sizing: border-box; width: 28px; height: 28px; position: absolute; top: 50%; left: -1px; text-indent: -100%; background-color: var(--color-light-lighter-2); border: 1px solid var(--color-light-darker-3); border-radius: 3px; transform: translateY(-50%); transition: all 150ms ease-in;
			}
			.checkbox .checkbox-feature {
				position: relative; display: block; height: 28px; line-height: 28px; overflow: hidden;
			}
				.checkbox .checkbox-feature:before, .checkbox .checkbox-feature:after {
					content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); transition: all 150ms ease-in;
				}
				.checkbox .checkbox-feature:before {
					content: attr(data-label-on); left: -60%;
				}
				.checkbox .checkbox-feature:after {
					content: attr(data-label-off); right: 8px;
				}
		.checkbox input[type=checkbox] {
			display: block;	 width: 0; height: 0; position: absolute; z-index: -1; opacity: 0;
		}
		.checkbox input[type=checkbox]:checked + .checkbox-switch {
			background: var(--color-theme); color: var(--color-light);
		}
			.checkbox input[type=checkbox]:checked + .checkbox-switch:before { /*бегунок*/
				left: calc(100% - 27px);
			}
				.checkbox input[type=checkbox]:checked + .checkbox-switch .checkbox-feature:before {
					left: 13px;
				}
				.checkbox input[type=checkbox]:checked + .checkbox-switch .checkbox-feature:after {
					right: -60%;
				}
		 
			/* Hover */
			.checkbox input[type=checkbox]:not(:disabled) + .checkbox-switch:hover:before {
				border-color: rgba(0,0,0,.6);
			}
			.checkbox input[type=checkbox]:not(:disabled) + .checkbox-switch:hover {
				cursor: pointer;
			}
		 
		/* Disabled */
		.checkbox input[type=checkbox]:disabled + .checkbox-switch {
			border-color: rgba(0, 0, 0, .1); filter: grayscale(70%);
		}
			.checkbox input[type=checkbox]:disabled + .checkbox-switch .checkbox-feature {
				color: #999;
			}
		 
			/* Focus */
			.checkbox.focused .checkbox-switch:before {
				border-width: 2px; border-color: #ffdb4d;
			}
			
/* для элемента input c type="checkbox" */
.my_checkbox > input {
	position: absolute !important;
	z-index: -1;
	opacity: 0 !important;
}

/* для элемента label, связанного с .custom-checkbox */
.my_checkbox > span {
	display: inline-flex;
	align-items: center;
	user-select: none;
	color: var(--color-dark-lighter-10);
}

	/* создание в label псевдоэлемента before со следующими стилями */
	.my_checkbox > span::before {
		content: '';
		display: inline-block;
		width: 1rem; height: 1rem;
		flex-shrink: 0; flex-grow: 0;
		border: 1px solid #adb5bd; border-radius: 0.25em;
		margin-right: 0.5em;
		background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%;
	}

	/* стили при наведении курсора на checkbox */
	.my_checkbox > input:not(:disabled):not(:checked) + span:hover::before {
		border-color: #b3d7ff;
	}

	/* стили для активного чекбокса (при нажатии на него) */
	.my_checkbox > input:not(:disabled):active + span::before {
		background-color: #b3d7ff;
		border-color: #b3d7ff;
	}

	/* стили для чекбокса, находящегося в фокусе */
	.my_checkbox > input:focus + span::before {
		box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	}

	/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
	.my_checkbox > input:focus:not(:checked) + span::before {
	  border-color: #80bdff;
	}

	/* стили для чекбокса, находящегося в состоянии checked */
	.my_checkbox > input:checked + span::before {
		border-color: #0b76ef;
		background-color: #0b76ef;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
	}

	/* стили для чекбокса, находящегося в состоянии disabled */
	.my_checkbox > input:disabled + span::before {
		background-color: #e9ecef;
	}
/*Переключатели*/

/*ЗАГЛУШКА*/
body.plug {
	display: flex;
	min-width: 100vw; min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	position: relative;
}
	body.plug > div {
		position: relative; z-index: 1;
		padding: 1rem;
		font-weight: bold; color: var(--color-light-lighter-2); font-size: 2rem; text-align: center; text-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.4);
	}
/*ЗАГЛУШКА*/


/*OBSERVER*/
.d_load_end {
	min-height: 4rem; /*чтобы страница не прыгала при подгрузке*/
	display: flex; align-items: center; justify-content: center;
	margin-top: 1rem;
	border: px solid red; /*без границы observer не видит пустой элемент*/
}
/*OBSERVER*/

	
@media screen and (min-width: 1025px) { /*только для ноутбуков и компов*/

    .only_phone { display: none !important; }
    .only_tablet { display: none; }
	.except_laptop { display: none; }

}

/*ТЕЛЕФОНЫ*/
@media screen and (max-width: 360px) {
	html,body { font-size: 16px; }
}
@media screen and (min-width: 361px) and (max-width: 540px) {
	html,body { font-size: 19px; }
}

@media screen and (max-width: 540px) {

	.floating_button_show_sidebar {
		position: fixed; bottom: 1rem; z-index: 5;
		display: inline-flex; align-items: center; justify-content: center;
		width: 2.5rem; height: 2.5rem;
		border-radius: 50%;
		cursor: pointer;
		box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.5);
		background: #fff;
		color: var(--color-dark); font-size: 1.2rem;
	}

	.notify {
		bottom: -4rem;
		max-width: 90%;
		padding: 0.8rem 1rem;
	}

	.only_tablet { display: none !important; }
	.except_phone { display: none !important; }
	.only_desktop { display: none !important; }
	
		.modal_confirm {
			max-width: 90%;
		}

}
/*ТЕЛЕФОНЫ*/

/*ПЛАНШЕТЫ*/
@media screen and (min-width: 541px) and (max-width: 800px) {
	html,body { font-size: 17px !important; }
}
@media screen and (min-width: 800px) and (max-width: 1024px) {
	html,body { font-size: 20px !important; }
}
	
@media screen and (min-width: 541px) and (max-width: 1024px) {
	
	.notify { max-width: 50% !important; }
	
    .only_phone { display: none !important; }
	.only_desktop { display: none !important; }

}
/*ПЛАНШЕТЫ*/

/*ДЕСКТОПЫ*/
@media screen and (min-width: 1400px) { html,body { font-size: 20px !important; } }
@media screen and (min-width: 1500px) { html,body { font-size: 21.7px !important; } }
@media screen and (min-width: 1600px) { html,body { font-size: 23.4px !important; } }
@media screen and (min-width: 1700px) { html,body { font-size: 25.1px !important; } }
@media screen and (min-width: 1800px) { html,body { font-size: 26.8px !important; } }
@media screen and (min-width: 1900px) { html,body { font-size: 28.5px !important; } }
@media screen and (min-width: 2000px) { html,body { font-size: 30.2px !important; } }
@media screen and (min-width: 2100px) { html,body { font-size: 31.9px !important; } }
@media screen and (min-width: 2200px) { html,body { font-size: 33.6px !important; } }
@media screen and (min-width: 2300px) { html,body { font-size: 35.3px !important; } }
@media screen and (min-width: 2400px) { html,body { font-size: 37px !important; } }
@media screen and (min-width: 2500px) { html,body { font-size: 38.7px !important; } }
@media screen and (min-width: 2600px) { html,body { font-size: 40.4px !important; } }
@media screen and (min-width: 2700px) { html,body { font-size: 42.1px !important; } }
@media screen and (min-width: 2800px) { html,body { font-size: 43.8px !important; } }
@media screen and (min-width: 2900px) { html,body { font-size: 45.5px !important; } }
@media screen and (min-width: 3000px) { html,body { font-size: 47.2px !important; } }
@media screen and (min-width: 3100px) { html,body { font-size: 48.9px !important; } }
@media screen and (min-width: 3200px) { html,body { font-size: 50.6px !important; } }
@media screen and (min-width: 3300px) { html,body { font-size: 52.3px !important; } }
@media screen and (min-width: 3400px) { html,body { font-size: 54px !important; } }
@media screen and (min-width: 3500px) { html,body { font-size: 55.7px !important; } }
@media screen and (min-width: 3600px) { html,body { font-size: 57.4px !important; } }
@media screen and (min-width: 3700px) { html,body { font-size: 59.1px !important; } }
@media screen and (min-width: 3800px) { html,body { font-size: 60.8px !important; } }
@media screen and (min-width: 3900px) { html,body { font-size: 62.5px !important; } }
@media screen and (min-width: 4000px) { html,body { font-size: 64.2px !important; } }
/*ДЕСКТОПЫ*/

body {
	display: ;
}

.greeting {
	font-size: 1.8rem; font-weight: bold; color: var(--color-yellow); text-align: center;
	padding: 1rem;
	position: relative;
	background: var(--color-light);
}
	.greeting img {
		cursor: pointer;
		position: absolute; top: 0.5rem; right: 0.5rem;
		width: 0.8rem; height: 0.8rem;
	}

.header {
	border: px solid red;
	background: var(--color-light);
}
.header_fixed {
	top: 0; left: 0; position: fixed; z-index: 10;
	width: 100%;
}
	.ins_header {
		display: flex; align-items: center;
		padding: 1rem 0;
	}
		.header_logo {
			width: 20%;
			border: px solid green;
			padding: 0 1rem;
			text-align: center;
		}
			.header_logo img {
				max-width: 100%;
				height: 2.5rem;
			}
		.header_search {
			margin: 0 auto;
			border: px solid green;
			width: 45%;
		}
			.header_search_form {
				display: flex; align-items: stretch;
			}
				.header_search_form input[type='text'] {
					border-bottom-right-radius: 0;
					border-top-right-radius: 0;
					padding: 0.5rem 1rem;
				}
				.header_search_form span {
					display: inline-flex; align-items: center;
					padding: 0 1rem;
					background: var(--color-light-darker-6);
					border-radius: var(--input-border-radius);
					border-bottom-left-radius: 0;
					border-top-left-radius: 0;
				}
					.header_search_form span img {
						width: 1rem; height: 1rem;
					}

.sidebar_i_content {
	width: 100%;
	display: flex;
}

	.sidebar {
		width: 18%;
		border: px solid red;
		background: var(--color-light);
	}
	.sidebar_fixed {
		left: 0; position: fixed; z-index: 10;
	}
		.ins_sidebar {
			padding: 1rem;
			border: px solid green;
			min-height: 100vh;
		}
			.form_subscribe {
				display: flex; flex-direction: column; grid-gap: 1rem;
				margin-top: 2rem;
				border: 1px solid var(--color-light-darker-15);
				padding: 1rem;
				border-radius: 0.4rem;
			}
			.reg_link {
				display: block;
				margin-top: 3rem; padding: 1rem;
				text-align: center; font-size: .9rem; color: var(--color-dark-lighter-10);
				cursor: pointer;
				background: #fff;
				border-radius: 0.4rem;
				box-shadow: var(--box-shadow);
				border: 1px solid var(--color-red-lighter-3);
			}

	.content {
		width: 82%;
		margin: 0 0 0 auto;
		border: px solid blue;
		background: var(--color-light-darker-4);
	}
		.ins_content {
			border: px solid blue;
			min-height: 200vh;
		}
			.sort {
				border: px solid blue;
				padding: 1rem;
				background: var(--color-light-darker-4);
			}
			.sort_fixed {
				position: fixed; z-index: 10;
			}
				.sort_item {
					border-radius: 0.7rem;
					background: var(--color-light);
					color: var(--color-dark-lighter-20); font-size: 0.9rem;
					display: inline-block;
					padding: 0.6rem 1.5rem;
					box-shadow: var(--box-shadow-smaller-1);
					margin: 0 0.5rem 0 0;
					cursor: pointer;
					transition: 0.2s;
				}
				.sort_item:not(.sort_item_select):hover {
					box-shadow: var(--box-shadow);
					transform: scale(1.03);
				}
				.sort_item_select {
					display: inline-flex; align-items: center; justify-content: space-between;
					padding: 0.6rem 1rem;
					cursor: default;
					position: relative;
					width: 10rem;
				}
					.sort_item_select > span {
						padding: 0 1.5rem 0 0;
					}
					.sort_item_select img {
						height: 0.4rem;
						cursor: pointer;
						opacity: 0.6;
					}
					.sort_item_select > div { /*список носителей и стран*/
						position: absolute; top: 2.7rem; left: 50%; z-index: 2;
						background: #fff;
						transform: translateX(-50%);
						box-shadow: var(--box-shadow-smaller-1);
						border-radius: var(--border-radius);
						max-height: 15rem; min-width: 100%;
						overflow-y: auto;
						display: none;
					}
						.sort_item_select > div > a {
							display: block;
							padding: 0.3rem 0.6rem;
							color: var(--color-dark-lighter-5); font-size: 0.85rem;
							transition: 0.2s;
							white-space: nowrap;
						}
						.sort_item_select > div > a:hover {
							background: #ddd;
						}
			.video_items {
				display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0.5rem;
				padding: 1rem;
			}
				.video_item {
					text-align: center;
					display: block;
					color: var(--color-dark);
				}
				.search_page_item .video_item {
					font-size: 0.85rem;
				}
					.video_item_preview {
						margin: 0 0 0.3rem 0;
						overflow: hidden;
					}
						.video_item_preview img {
							width: 100%;
							border-radius: 0.2rem;
							transition: 0.2s;
						}
						.video_item:hover .video_item_preview img {
							transform: scale(1.02);
						}
					.video_item_native {
						
					}
					.video_item_details {
						font-size: 0.8rem; color: var(--color-dark-lighter-20);
					}
					
			.video_page {
				display: flex;
				padding: 1rem;
			}
				.video_content {
					border: px solid red;
					width: 77%;
				}
					.ins_video_content {
						padding-right: 0.5rem;
					}
						.video_player {
							
						}
							.video_player img {
								width: 100%;
							}
						.video_info {
							padding: 0.85rem;
						}
								.video_thumbs_up {
									cursor: pointer;
									margin: 0 1rem 0 0;
								}
									.video_thumbs_up img {
										width: 1.4rem; height: 1.4rem;
									}
						.video_details_item { /*раскрывающиеся блоки*/
							margin-bottom: 1.5rem;
						}
							.video_details_title {
								display: flex;
							}
								.video_details_title .fa { /*плюс*/
									cursor: pointer;
									color: rgba(50,100,200,1); font-size: 1.2rem;
									margin-right: 0.7rem;
								}
							.video_details_content {
								margin-top: 0.6rem; padding: 0.5rem;
								background: #fff;
								border-radius: 0.3rem;
								position: relative;
								display: ;
							}
								.synonym_item {
									display: inline-block;
									padding: 0.2rem 0.6rem 0.3rem 0.6rem;
									font-size: 0.85rem;
									border-radius: 0.3rem; border: 1px solid var(--color-light-darker-15);
									margin: 0 0.7rem 0 0;
								}
								.slider_arrow {
									position: absolute; top: 50%; z-index: 1;
									width: 1.5rem;
									cursor: pointer;
									opacity: 0;
								}
								.slider_arrow:first-of-type {
									left: 0;
									transform: translate(-30%, -100%) scaleX(-1);
								}
								.slider_arrow:last-of-type {
									right: 0;
									transform: translate(30%, -100%);
								}
								.video_details_slider {
									margin-top: 0.5rem;
									display: grid; grid-gap: 0.5rem; grid-template-columns: 1fr 1fr 1fr 1fr;
									position: relative;
								}
									.synonym_video_item {
										display: block;
									}
										.synonym_video_item img {
											width: 100%;
										}
										.synonym_video_item > div {
											padding: 0.2rem;
											text-align: center; color: var(--color-dark-lighter-10); font-size: 0.7rem;
										}
											.synonym_video_item a {
												display: inline;
											}
				.video_sidebar {
					width: 23%;
					border: px solid red;
				}
					.ins_video_sidebar {
						padding: 0 0.5rem;
					}
						.video_sidebar .video_item {
							margin: 0 0 1rem 0;
						}
			.search_page {
				padding: 1rem;
			}
				.search_page_item {
					background: #fff;
					border-radius: var(--border-radius);
					box-shadow: var(--box-shadow);
					padding: 1rem; margin: 0 0 1rem 0;
				}
					.search_page_item > div:first-of-type {
						margin: 0 0 1rem 0;
					}
					.search_page_item > div:last-of-type {
						display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1rem;
					}
					.search_page_item .video_item_native {
						display: none;
					}
					.search_page_item .video_item_details {
						font-size: 0.7rem;
					}
					
			.reg_page {
				display: flex; flex-direction: column; grid-gap: 1.5rem;
				padding: 2rem; margin: 0 auto;
				border: px solid;
				width: 60%;
				transform: translateX(-20%);
			}
				.reg_page textarea {
					height: 10rem;
				}
					.reg_item {
						display: flex; grid-gap: 1rem; align-items: center;
					}
						.reg_item > span:first-of-type { /*подсказка*/
							margin: 0 0 0.5rem 0;
							color: var(--color-dark-lighter-20);
							display: inline-block;
							width: 50%;
							text-align: right;
							border: px solid;
						}
						.reg_item > input, .reg_item > select, .reg_item > textarea {
							width: 50%;
						}
						.reg_photo {
							width: 50%;
							flex-grow: 1;
							border: px solid;
						}
							.reg_photo > div { /*круг*/
								border-radius: 50%;
								display: flex; align-items: center; justify-content: center;
								width: 6rem; height: 6rem;
								background: var(--color-light);
								box-shadow: var(--box-shadow);
							}
								.reg_photo img {
									width: 3rem;
									opacity: 0.5;
								}
			
			.addvideo_page {
				padding: 1rem 1rem 2rem 1rem;
				position: relative;
			}
				.addvideo_profile {
					position: absolute; top: 1.8rem; right: 2rem;
					display: flex; align-items: center;
					color: var(--color-dark-lighter-20);
				}
					.addvideo_profile img {
						width: 2rem; height: 2rem;
						margin: 0 0.5rem 0 0;
					}
				.addvideo_fields {
					margin-top: 2rem;
				}
				.addvideo_fields .border_bottom {
					border-bottom: 1px solid var(--color-light-darker-20);
				}
				.addvideo_fields .border_right {
					border-right: 1px solid var(--color-light-darker-20);
				}
					.addvideo_fields_width {
						width: 50%;
						margin: 0 auto;
						display: flex; flex-direction: column;
					}
					.addvideo_fields_grid {
						display: grid; grid-template-columns: 1fr 1fr;
					}
					.addvideo_forms {
						width: 75%;
						background: var(--color-light-darker-6);
						margin: 1.5rem auto;
						border-radius: var(--border-radius); border: 1px solid var(--color-light-darker-14);
						padding: 1rem 1rem;
					}
						.addvideo_field_item {
							display: flex; grid-gap: 0.8rem; align-items: center;
							border: px solid;
							padding: 0.5rem;
						}
						.addvideo_forms .addvideo_field_item {
							padding: 0.75rem;
						}
							.addvideo_field_item > span { /*текст перед полем*/
								color: var(--color-dark-lighter-20); font-size: 1rem;
								display: inline-block;
								width: 40%;
								text-align: right;
							}
							
							.addvideo_field_item > input, .addvideo_field_item > select {
								width: 60%;
							}
					.addvideo_after_fields {
						width: 40%;
						margin: 1rem auto 0 auto;
						text-align: center;
					}
						.addvideo_after_fields label {
							font-size: 0.9rem;
						}
			.for_native_page {
				padding: 2rem;
				font-size: 1.15rem; line-height: 1.8rem;
			}
				.for_native_page table {
					border: 1px solid var(--color-dark-lighter-20);
					width: 60%;
					margin: 1rem auto 2rem auto;
					background: #fff;
					font-size: 1rem;
				}
					.for_native_page table tr:first-of-type {
						border-bottom: 1px solid var(--color-dark-lighter-20);
					}
						.for_native_page table td:first-of-type, .for_native_page table th:first-of-type {
							border-right: 1px solid var(--color-dark-lighter-20);
						}
						.for_native_page table td {
							padding: 0 0.5rem;
						}
				.examine_examples {
					margin-top: 0.5rem;
					display: grid; grid-gap: 1rem; grid-template-columns: 1fr 1fr 1fr 1fr;
				}
					.examine_examples img {
						width: 100%;
					}