/********************** Загрузка ФАЙЛОВ **********************/
.ls_file {}
	.ls_file file {display:block; }
		.ls_file file info {display:inline-block;}

		.ls_file file input[type=checkbox]:not(checked) {position:absolute; opacity:0; padding:0; margin:0; width:1px; height:1px; display:block;}
		.ls_file file input[type=checkbox]:not(checked) + label {position:relative; padding:2px 0 2px 24px; cursor:pointer;}
		.ls_file file input[type=checkbox]:not(checked) + label:before {content:''; background:url(img/files/del_box.svg) 0 0 no-repeat; position:absolute; top:0px; left:2px; width:16px; height:16px;}
		.ls_file file input[type=checkbox]:not(checked) + label + info {padding:2px 0 5px 0;}

		.ls_file file input[type=checkbox]:checked + label:before {background-position:-16px 0;}
		.ls_file file input[type=checkbox]:checked + label + info {text-decoration:line-through;}

		/* Индивидуально для изображений */
	.ls_file file[ex="jpg"] input[type=checkbox] + label,
	.ls_file file[ex="jpeg"] input[type=checkbox] + label,
	.ls_file file[ex="png"] input[type=checkbox] + label,
	.ls_file file[ex="gif"] input[type=checkbox] + label {position:absolute;}

	.ls_file file[ex="jpg"] input[type=checkbox] + label:before,
	.ls_file file[ex="jpeg"] input[type=checkbox] + label:before,
	.ls_file file[ex="png"] input[type=checkbox] + label:before,
	.ls_file file[ex="gif"] input[type=checkbox] + label:before {background-color:#ffffff; left:1px; top:1px; border:3px solid #ffffff;}






/********************** MEDIA Галлерея **********************/
.media {display:flex; flex-direction:column; column-gap:12px; row-gap:12px;}
.media.wolf_mode {position:relative; z-index:10;}
.media.wolf_mode:after {content:""; background:#00000030; position:absolute; z-index:11; left:-30px; right:-30px; top:-30px; bottom:-30px; border-radius:20px;}

	.media btn {height:28px;}
		.media btn img {width:24px; height:24px;}

	.media .vitg {position:relative; z-index:1;}
		.media .vitg .item:before,
		.media .vitg .item:after {content:""; display:block; position:absolute; top:50%; left:50%; margin-right:-50%; transform:translate(-50%, -50%);}
		.media .vitg .item:before {background:#00000099; width:60%; height:40%; border-radius:5px;}
		.media .vitg .item:after {border:10px solid transparent; border-left:10px solid #ffffffdd; border-right:0;}

		.media .vitg:hover .item:before {background:#000000cc;}
		.media .vitg:hover .item:after {border-left-color:#ffffff;}

	.media .lsi {display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; column-gap:12px; row-gap:12px; flex-wrap:wrap;}
		.media .lsi .item {background:url(img/not_bg.svg); display:flex; align-items:center; justify-content:center; position:relative; border:1px solid #c5c5c5; width:140px; height:100px; padding:0px; border-radius:8px; cursor:pointer;}
			.media .lsi .item .view {object-fit:contain; width:auto; max-width:100%; height:100%; max-height:100%; border-radius:4px;}
			.media .lsi .item[del] .view {opacity:0.8; transform:scale(0.7); filter:grayscale(100%);}



			.media .lsi .item .dash {opacity:0; position:absolute; z-index:2; top:0px; right:0px;}
			.media .lsi .item:hover .dash {opacity:1;}
				.media .lsi .item .dash .but.del {background:url(img/gall/del.svg); width:16px; height:16px; padding:0px; cursor:pointer;}
				.media .lsi .item[del] .dash .but.del {transform:rotate(45deg);}




			.media .lsi .item .opt {background:#ffffff; position:absolute; z-index:1; bottom:0; left:0; right:0; border:0 8px 8px 0; padding:4px;}
				.media .lsi .item .opt .sub_gr {}
					.media .lsi .item .opt .sub_gr .bild {display:flex; flex-direction:row; flex-wrap:wrap; column-gap:4px;}
						.media .lsi .item .opt .sub_gr .bild .val {display:none; position:relative; width:24px; height:24px; margin:0px; border:0px; padding:0px; border-radius:50%; box-sizing:border-box; cursor:pointer;}
						.media .lsi .item .opt .sub_gr .bild .val.light {border:2px solid #333333;}
						.media .lsi .item .opt .sub_gr .bild .val.use {}
						.media .lsi .item .opt .sub_gr .bild .val.partly {position:relative; overflow:hidden;}
						.media .lsi .item .opt .sub_gr .bild .val.partly:after {content:""; background:repeating-linear-gradient(0deg, #000000 0px, #000000 1px, #ffffff 1px, #ffffff 2px); display:block; position:absolute; top:0px; right:0px; width:50%; height:100%;}

						.media .lsi .item .opt .sub_gr .bild .val.use:before,
						.media .lsi .item .opt .sub_gr .bild .val.partly:before {content:''; display:block; position:absolute; top:12px; left:4px; border:3px solid #ffffff; border-top:0; border-right:0; width:11px; height:6px; border-radius:1px; transform-origin:top left; transform:rotate(-45deg);}
						.media .lsi .item .opt .sub_gr .bild .val.light.use:before,
						.media .lsi .item .opt .sub_gr .bild .val.light.partly:before {top:10px; left:2px; border-color:#000000;}

						.media .lsi .item:hover .opt .sub_gr .bild .val,
						.media .lsi .item .opt .sub_gr .bild[cnt_use="0"] .val,
						.media .lsi .item .opt .sub_gr .bild .val.use,
						.media .lsi .item .opt .sub_gr .bild .val.partly {display:block;}



			.media .lsi .item .load_prog {background:#ffffff; position:absolute; left:5%; top:50%; width:90%; z-index:5; margin-top:-5px; height:8px; border:1px solid #ffffff; box-shadow:0px 0px 0px 1px #888888; border-radius:4px; box-sizing:border-box; overflow:hidden;}
			.media .lsi .item .load_prog div {background:#25bb1b; position:absolute; left:0px; top:0px; bottom:0px; width:0%; transition:width 0.5s ease-in-out;}



			.media .lsi .item .pre_canvas {position:absolute; z-index:100; outline:1px dashed #000000; box-shadow:0px 0px 0px 2px #ffffff; overflow:hidden;}
				.media .lsi .item .pre_canvas .lar {position:absolute; cursor:default;}
					.media .lsi .item .pre_canvas .lar[t="dsgp_text"] {white-space:pre; line-height:100%;}
					.media .lsi .item .pre_canvas .lar[t="dsgp_img"] {}
						.media .lsi .item .pre_canvas .lar[t="dsgp_img"] img,
						.media .lsi .item .pre_canvas .lar[t="dsgp_img"] svg {display:block; width:100%; height:auto;}




	.media .integration {display:none; position:absolute; z-index:10000; background:#ffffff; border:2px solid #000000; padding:10px; border-radius:6px; box-shadow:0px 0px 15px 5px #00000090;}
		.media .integration textarea {display:block; height:48px; width:250px;}



	.media .parent_list {display:none; position:absolute; z-index:10000; background:#ffffff; min-width:370px; border:2px solid #000000; padding:2px; border-radius:6px; box-shadow:0px 0px 15px 5px #00000090;}
		.media .parent_list .item {float:left; background:#FFFFFF; position:relative; border:2px solid #919191; padding:1px; border-radius:5px; margin:4px; cursor:pointer;}
		.media .parent_list .item:hover {box-shadow:0px 0px 3px 1px #00000080;}
		.media .parent_list .item[use] {border:2px solid #23bd00; transform:scale(0.8);}
		.media .parent_list .item[use]:after {content:''; display:block; position:absolute; top:7px; left:2px; border:4px solid #23bd00; border-top:0; border-right:0; width:10px; height:6px; border-radius:1px; transform-origin:top left; transform:rotate(-45deg);}
			.media .parent_list .item img {object-fit:contain; border-radius:3px; width:60px; height:45px;}
			.media .parent_list .item .man {display:none;}


		.media .parent_list .sets {display:flex; flex-direction:row; flex-wrap:wrap; width:100%; padding:0px; padding-top:15px; padding-bottom:15px; box-sizing:border-box;}
			.media .parent_list .sets .title {width:100%;}
			.media .parent_list .sets .k {display:flex; flex-direction:row; margin:5px; border:1px solid #919191; cursor:pointer;}
			.media .parent_list .sets .k:hover {border:1px solid #dc4848; box-shadow:0px 0px 2px 1px #dc4848;}
				.media .parent_list .sets .k .ki {}
					.media .parent_list .sets .k .ki img {object-fit:contain; border-radius:3px; width:30px; height:25px;}

	.media > .man {}
		.media > .man .grap {}
		.media > .man .grap:after {content:"1"; display:none;}
		.media > .man .grap[own]:after {display:block;}



.media_pop_up {transition:none; width:100%; height:100%; box-sizing:border-box; overflow:hidden;}
.media_win.mgl {transition:none; width:100%; height:100%; font-family:'Arial';}
	.media_win.mgl * {transition:none;}
	.media_win.mgl img {display:block;}



	.media_win.mgl .tape {display:flex; flex-direction:column; position:fixed; z-index:50; top:11px; right:11px; background:rgba(0, 0, 0, 0.3); border-radius:9px;}
		.media_win.mgl .tape .item {position:relative; z-index:1; background:#ffffff; background-clip:content-box; border:3px solid rgba(0, 0, 0, 0); border-radius:9px; margin-top:-3px; cursor:pointer;}
		.media_win.mgl .tape .item:first-child {margin-top:0;}
		.media_win.mgl .tape .item:hover {border-color:#ffffff; z-index:3;}
		.media_win.mgl .tape .item.select {border-color:#fbff00; z-index:2;}
			.media_win.mgl .tape .item img {width:70px; height:55px; border:1px solid #000000; object-fit:contain; border-radius:6px;}
			.media_win.mgl .tape .item[t="video"] img {background:#ffffff}


		.media_win.mgl .tape .item.vitg {position:relative; z-index:1;}
			.media_win.mgl .tape .item.vitg:before,
			.media_win.mgl .tape .item.vitg:after {content:""; display:block; position:absolute; top:50%; left:50%; margin-right:-50%; transform:translate(-50%, -50%);}
			.media_win.mgl .tape .item.vitg:before {background:#00000099; width:60%; height:50%; border-radius:5px;}
			.media_win.mgl .tape .item.vitg:after {border:10px solid transparent; border-left:10px solid #ffffffdd; border-right:0;}

			.media_win.mgl .tape .item.vitg:hover:before {background:#000000cc;}
			.media_win.mgl .tape .item.vitg:hover:after {border-left-color:#ffffff;}




	.media_win.mgl .img_back {position:fixed; z-index:10; background:rgba(0, 0, 0, 0); top:0; left:0; width:150px; height:100%; cursor:pointer; transition:all, 0.1s ease-in-out;}
	.media_win.mgl .img_back:hover {background:rgba(0, 0, 0, 0.3);}

	.media_win.mgl .close {position:fixed; z-index:40; top:5px; left:5px; width:50px; height:50px; cursor:pointer;}
		.media_win.mgl .close .ico::after,
		.media_win.mgl .close .ico::before,
		.media_win.mgl .close .shadow::after,
		.media_win.mgl .close .shadow::before {content:""; position:absolute; left:10px; z-index:10; background:#aaaaaa; height:3px; width:25px; border-radius:4px;}

		.media_win.mgl .close:hover .ico::after,
		.media_win.mgl .close:hover .ico::before,
		.media_win.mgl .close:hover .shadow::after,
		.media_win.mgl .close:hover .shadow::before {background:#ffffff;}

		.media_win.mgl .close .ico::after,
		.media_win.mgl .close .shadow::after {top:25px; transform:rotate(45deg);}
		.media_win.mgl .close .ico::before,
		.media_win.mgl .close .shadow::before{top:25px; transform:rotate(-45deg);}

		.media_win.mgl .close .shadow::after,
		.media_win.mgl .close .shadow::before {box-shadow:0 0 0px 0 #ffffff; z-index:9;}


	.media_win.mgl .big {display:block; width:100%; height:100%; position:relative; cursor:pointer; padding:0px;}
	.media_win.mgl .big[loading]:after {content:''; position:absolute; z-index:1000; top:50%; left:50%; width:36px; height:36px; border:4px solid #ffffffb0; border-top-color:#000000b0;  border-radius:100%; margin:-15px 0 0 -15px; box-sizing:border-box; animation:big_media_load 0.9s linear infinite;}
	.media_win.mgl .big[loading="qlt"]:after {top:25px; width:16px; height:16px; margin:0 auto 0 auto; border-width:2px;}
			/* делаем белую подложку на случай прозрачного изображения */
		.media_win.mgl .big .view {min-width:unset; max-width:unset; min-height:unset; max-height:unset; flex-basis:unset;}
		.media_win.mgl .big img {background:#ffffff; position:absolute; box-sizing:border-box; width:auto; height:auto; object-fit:contain;}
		.media_win.mgl .big iframe {position:absolute; box-sizing:border-box;}


		.media_win.mgl .big .dsgp_area {position:absolute; z-index:100; outline:1px dashed #000000; box-shadow:0px 0px 0px 2px #ffffff;}
			.media_win.mgl .big .dsgp_area .resize {background:#ff0000; position:absolute; bottom:-20px; right:-20px; width:24px; height:24px;}





	.media_win.mgl .func {display:flex; position:fixed; z-index:50; bottom:10px; left:10px;}
		.media_win.mgl .func .but {background:#ffffff; display:flex; flex-direction:row; column-gap:0px; padding:10px; cursor:pointer;}
			.media_win.mgl .func .but .is {position:relative; width:32px; opacity:0;}
				.media_win.mgl .func .but .is:after {content:""; position:absolute; left:8px; top:2px; border:2px solid #00a21b; border-left:0; border-top:0; width:9px; height:8px; opacity:1; transform:rotate(45deg);}
			.media_win.mgl .func .but.use .is {opacity:1;}

			.media_win.mgl .func .but.use .name {}

			.media_win.mgl .func .but .del {position:relative; display:flex; align-items:center; justify-content:center; width:32px; padding:0 0 0 10px; box-sizing:content-box; opacity:0;}
				.media_win.mgl .func .but .del::after,
				.media_win.mgl .func .but .del::before {content:""; position:absolute; z-index:10; background:#ff0000; height:2px; width:16px; border-radius:4px;}
				.media_win.mgl .func .but .del::after {transform:rotate(45deg);}
				.media_win.mgl .func .but .del::before {transform:rotate(-45deg);}


			.media_win.mgl .func .but.use .del {opacity:1;}







@media screen and (max-width:1200px) {
	.media .lsi .item .man {opacity:0.2;}
}

@media screen and (max-width:640px) {
	.media_win.mgl {}
		.media_win.mgl .img_back {display:none;}
		.media_win.mgl .close {width:30px; height:30px; top:0px; left:0px;}

		.media_win.mgl .close .ico::after,
		.media_win.mgl .close .ico::before,
		.media_win.mgl .close .shadow::after,
		.media_win.mgl .close .shadow::before {left:2px;}


		.media_win.mgl .close .ico::after,
		.media_win.mgl .close .shadow::after {top:12px;}
		.media_win.mgl .close .ico::before,
		.media_win.mgl .close .shadow::before{top:12px;}



		.media_win.mgl .tape {background:unset; bottom:unset; top:2px; left:5px; right:5px; text-align:center; height:1px;}
			.media_win.mgl .tape .item {background:#313131; display:inline-block; margin:0px; padding:1px; border-width:1px; border-radius:100%;}
				.media_win.mgl .tape .item img {width:10px; height:10px; border-radius:100%;}
}


@keyframes big_media_load {
	100% {transform:rotate(360deg);}
}









.svg_editor {display:flex; flex-direction:column; min-height:100%;}
	.svg_editor .tools {display:flex; background:#f8f8f8; border:1px solid #b6b6b6; border-bottom:0; padding:3px;}
		.svg_editor .tools btn {margin-right:10px;}


	.svg_editor .canvas_area {flex-grow:3; display:flex; justify-content:center; align-items:center; background:#dddddd; padding:20px; border:1px solid #9a9a9a;}
	.svg_editor .canvas_area .svg_area {outline:1px solid #000000;}
	.svg_editor .canvas_area .cursor_crosshair {cursor:crosshair;}
	.svg_editor .canvas_area .cursor_text {cursor:text;}



	.svg_editor .marker {position:absolute; box-sizing:border-box;}
		.svg_editor .marker .marker_resize {display:none; position:absolute; bottom:0; right:0; width:4px; height:4px; background:#de3d31; border:1px solid #ffffff; outline:1px solid #de3d31; margin:0 -3px -3px 0; cursor:se-resize;}
		.svg_editor .marker:hover .marker_resize {display:block;}

		.svg_editor .marker .marker_param {display:none; flex-direction:column; justify-content:center; align-items:center; position:absolute; top:0; right:-26px; width:26px; background:#333333; border:1px solid #ffffff; padding:2px; box-sizing:border-box;}
		.svg_editor .marker:hover .marker_param {display:flex;}
			.svg_editor .marker .marker_param .close {position:relative; width:16px; height:16px; cursor:pointer;}
				.svg_editor .marker .marker_param .close:after,
				.svg_editor .marker .marker_param .close:before {content:""; background:#ffffff; top:6px; left:2px; width:12px; height:3px; border-radius:2px; position:absolute;}
				.svg_editor .marker .marker_param .close:after {transform:rotate(45deg);}
				.svg_editor .marker .marker_param .close:before {transform:rotate(-45deg);}

			.svg_editor .marker .marker_param > .in {display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; width:16px; height:16px; cursor:pointer;}
				.svg_editor .marker .marker_param > .in input {background:none; width:16px; height:12px; border:1px solid #cccccc; font-size:12px; color:#ffffff;}
				.svg_editor .marker .marker_param > .in input::-webkit-outer-spin-button,
				.svg_editor .marker .marker_param > .in input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}


	.svg_editor .rect_stroke {border:0px solid #000000;}
	.svg_editor .rect_fill {}

	.svg_editor .text_fill {}
		.svg_editor .text_fill > textarea {background:none; border:1px solid #000000; width:100%; height:100%; font-weight:bold; resize:none;}
		.svg_editor .text_fill .marker_resize {background:#000000; outline:1px solid #000000;}

	.svg_editor .marker_cut_part {border:1px dashed #000000;}
		.svg_editor .marker_cut_part .marker_resize {background:#000000; outline:1px solid #000000;}