.wpl {background:#ffffff; display:inline-flex; flex-direction:row; align-items:center; justify-content:flex-start; column-gap:5px; border:1px solid #acb1b8; padding:0px;}
	.wpl .type {width:24px; height:24px; box-sizing:border-box; cursor:pointer;}
	.wpl[type="box"] .type {background:url(/allpack/modules/core/fields/style-web_page/img/ft_link_box.svg) center center no-repeat;}
	.wpl[type="page"] .type {background:url(/allpack/modules/core/fields/style-web_page/img/ft_link_page.svg) center center no-repeat;}
	.wpl[type="url"] .type {background:url(/allpack/modules/core/fields/style-web_page/img/ft_link_url.svg) center center no-repeat;}
	.wpl[type="back"] .type {background:url(/allpack/modules/core/fields/style-web_page/img/ft_link_back.svg) center center no-repeat;}
	.wpl[type="tmpl_0"] .type,
	.wpl[type="tmpl_1"] .type,
	.wpl[type="tmpl_2"] .type,
	.wpl[type="tmpl_3"] .type {background:url(/allpack/modules/core/fields/style-web_page/img/ft_link_tmpl.svg) center center no-repeat;}
	.wpl .box {display:none;}
	.wpl .page {display:none;}
	.wpl .url {display:none;}
	.wpl .back {display:none;}
	.wpl .tmpl {display:none;}
	.wpl .anchor {display:none;}

	.wpl[type="box"] .type ~ .box,
	.wpl[type="box"] .type ~ .anchor {display:block;}

	.wpl[type="page"] .type ~ .page {display:block;}
	.wpl[type="url"] .type ~ .url {display:block;}
	.wpl[type="back"] .type ~ .back {display:block;}
	.wpl[type="tmpl_0"] .type ~ .tmpl_0 {display:block;}
	.wpl[type="tmpl_1"] .type ~ .tmpl_1 {display:block;}
	.wpl[type="tmpl_2"] .type ~ .tmpl_2 {display:block;}
	.wpl[type="tmpl_3"] .type ~ .tmpl_3 {display:block;}

	.wpl .lsrm {border:0px;}
	.wpl .lsrm:hover {border:0px;}
	.wpl input {border:0px;}


	.wpl .param {display:flex; flex-direction:row; align-items:center;}
		.wpl .param .act {}
		.wpl .param .still {width:50px; display:none;}
		.wpl[act="go_m"] .param .still {display:block;}
			.wpl .param .still input {width:100%; box-sizing:border-box;}

.cp_tbl f > .wpl {margin:-3px 0 -3px -1px;}
.cp_dtl .lsf .f_group > f > .wpl {margin:-3px 0 -3px -2px;}



	/* Позиционирование */
.css_pos {position:relative; margin:5px; width:50px; height:50px; box-shadow:0px 0px 0px 2px #cccccc; box-sizing:border-box;}
	.css_pos p {display:block; position:absolute; z-index:1; background:#999999; width:8px; height:8px; margin:0px; padding:0px; border-radius:2px; cursor:pointer;}
	.css_pos p:nth-child(1) {top:-4px; left:-4px;}							/* верх - лево */
	.css_pos p:nth-child(2) {top:-4px; left:calc(50% - 4px);}				/* верх - центер */
	.css_pos p:nth-child(3) {top:-4px; right:-4px;}							/* верх - право */
	.css_pos p:nth-child(4) {top:calc(50% - 4px); right:-4px;}				/* центр - право */
	.css_pos p:nth-child(5) {bottom:-4px; right:-4px;}						/* низ - право */
	.css_pos p:nth-child(6) {bottom:-4px; left:calc(50% - 4px);}			/* низ - центр */
	.css_pos p:nth-child(7) {bottom:-4px; left:-4px;}						/* низ - лево */
	.css_pos p:nth-child(8) {top:calc(50% - 4px); left:-4px;}				/* центр - лево */
	.css_pos p:nth-child(9) {top:calc(50% - 4px); left:calc(50% - 4px);}	/* центр - центр */

	.css_pos div {display:block; position:absolute; top:0%; left:0%; z-index:2; width:0px; height:0px; margin:0px; padding:0px;}
	.css_pos div:after  {content:""; display:block; position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px; z-index:2; background:#ff0000; width:8px; height:8px; margin:0px; padding:0px; border-radius:2px; cursor:pointer;}



.css_vis {width:32px; height:32px; border:0px; border-radius:5px; box-sizing:border-box; cursor:pointer; overflow:hidden;}
.css_vis[val="visible"] {background:url(/allpack/modules/core/fields/style-web_page/img/ft_vis_visible.svg) center no-repeat;}
.css_vis[val="hidden"] {background:url(/allpack/modules/core/fields/style-web_page/img/ft_vis_hidden.svg) center no-repeat;}


.css_bg {}
	.css_bg .bg_demo {position:relative; background:url(/allpack/modules/core/fields/style-web_page/img/bg/not24.svg) center center no-repeat; width:30px; height:30px; border:1px solid #ffffff; border-radius:5px; box-shadow:0 0 0 1px #999999; box-sizing:border-box; cursor:pointer;}
		.css_bg .bg_demo .bg {width:100%; height:100%; border-radius:4px;}
		.css_bg .bg_demo:after {content:""; background:linear-gradient(90deg, #FF999B, #B4FF99, #9BFFFA, #BAA1FF, #FF9D9D); position:absolute; z-index:2; top:-2px; right:-2px; width:16px; height:16px; border:1px solid #333333; border-radius:0px 5px 0 5px; box-sizing:border-box;}
		.css_bg[clip="text"] .bg_demo:after {width:12px; height:12px;}

		.css_bg[clip="text"] .bg_demo:before {content:""; background:url(/allpack/modules/core/fields/style-web_page/img/bg/clip_text.svg) center center / cover; position:absolute; z-index:1; top:-2px; bottom:-2px; left:-2px; right:-2px; border-radius:5px; box-sizing:border-box;}


	.css_bg .win {display:none; position:fixed; z-index:1000; background:#ffffff; border:2px solid #656565; border-radius:5px; border-top-right-radius:0px; box-shadow:2px 2px 10px 0 #00000090;}

		.css_bg .win .man_win {background:#ffffff; display:flex; position:absolute; top:-23px; right:-2px; border:2px solid #656565; border-bottom:0px; border-top-left-radius:5px; border-top-right-radius:5px;}
			.css_bg .win .man_win .drag {background:url(/allpack/modules/core/fields/style-web_page/img/bg/drag.svg) left top; width:48px; height:17px; margin:5px; cursor:move;}
			.css_bg .win .man_win .close {width:30px; position:relative; margin-left:20px;}
				.css_bg .win .man_win .close:before,
				.css_bg .win .man_win .close:after {margin:4px 0 0 0; position:absolute; left:17px; content:''; height:16px; width:2px; background:#6c6c6c;}
				.css_bg .win .man_win .close:hover:before,
				.css_bg .win .man_win .close:hover:after {background:#000000;}
				.css_bg .win .man_win .close:before {transform:rotate(45deg);}
				.css_bg .win .man_win .close:after {transform:rotate(-45deg);}

		.css_bg .win .dg {display:flex; flex-direction:column; row-gap:0px; min-height:15px; padding:0px; counter-reset:layer_num;}
			.css_bg .win .dg .lar {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; column-gap:15px; background:#ffffff; position:relative; width:100%; padding:15px; box-sizing:border-box; counter-increment:layer_num;}
			.css_bg .win .dg .lar[type="url"] {align-items:flex-start;}
			.css_bg .win .dg .lar:nth-child(2n) {background:#f1f1f1;}

			.css_bg .win .dg .lar:first-child {border-top-right-radius:5px; border-top-left-radius:5px;}
			.css_bg .win .dg .lar:last-child {border-bottom-right-radius:5px; border-bottom-left-radius:5px;}

				.css_bg .win .dg .lar .layer_opt {display:flex; flex-direction:column;}
					.css_bg .win .dg .lar .layer_opt .drag {background:url(/allpack/modules/core/fields/style-web_page/img/bg/drag.svg) center; width:13px; height:25px; cursor:move;}
					.css_bg .win .dg .lar .layer_opt .num {cursor:move; writing-mode:tb-rl; padding:15px 0 0 0; color:#aaaaaa; font-size:12px;}
					.css_bg .win .dg .lar .layer_opt .num::after {content:counter(layer_num); display:inline-block; padding-top:5px; font-weight:bold; color:#888888;}
				.css_bg .win .dg .lar .bgv {position:relative; width:120px; height:120px; border:2px solid #7a7a7a; border-radius:10px; cursor:pointer;}
					.css_bg .win .dg .lar .bgv img {background:url(/allpack/modules/core/fields/style-web_page/img/bg/not.svg); position:relative; z-index:3; width:100%; height:120px; object-fit:contain; border-radius:7px;}
					.css_bg .win .dg .lar .bgv img[src] {z-index:1;}

					.css_bg .win .dg .lar .bgv .clear {dis play:none; background:#ffffffcc; position:absolute; z-index:2; left:0px; top:0px; width:24px; height:24px; border-top-left-radius:9px; cursor:pointer; box-sizing:border-box;}
					.css_bg .win .dg .lar .bgv .clear:before,
					.css_bg .win .dg .lar .bgv .clear:after {margin:4px 0 0 0; position:absolute; left:11px; content:''; height:16px; width:2px; background:#6c6c6c;}
					.css_bg .win .dg .lar .bgv .clear:hover:before,
					.css_bg .win .dg .lar .bgv .clear:hover:after {background:#000000;}
					.css_bg .win .dg .lar .bgv .clear:before {transform:rotate(45deg);}
					.css_bg .win .dg .lar .bgv .clear:after {transform:rotate(-45deg);}

					.css_bg .win .dg .lar .bgv .load_prog {background:#ffffff; position:absolute; left:5%; top:50%; width:90%; z-index:5; margin-top:-8px; height:14px; border:2px solid #ffffff; box-shadow:0px 0px 0px 2px #888888; border-radius:8px; box-sizing:border-box; overflow:hidden;}
					.css_bg .win .dg .lar .bgv .load_prog div {background:#25bb1b; position:absolute; left:0px; top:0px; bottom:0px; width:0%; transition:width 0.5s ease-in-out;}


					.css_bg .win .dg .lar .bgv .bg_clr {display:none; position:absolute; z-index:4; top:-2px; right:-2px;}
						/* установку цвета можно использовать только в последнем фоне */
					.css_bg .win .dg .lar:last-child .bgv .bg_clr {display:block;}
						.css_bg .win .dg .lar .bgv .bg_clr .ft_color .types_clr .clr_area {border-top-right-radius:10px; overflow:hidden;}
						.css_bg .win .dg .lar .bgv .bg_clr .ft_color .types_clr .type .clr {height:32px;}


				.css_bg .win .dg .lar .conf {}
					.css_bg .win .dg .lar .conf .item {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:2px; column-gap:10px;}
						.css_bg .win .dg .lar .conf .item .title {width:65px; font-size:13px;}
						.css_bg .win .dg .lar .conf .item .val {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; column-gap:5px;}


						/* Повтор фона с изобарежением */
					.css_bg .win .dg .lar .conf .bg_repeat {}
						.css_bg .win .dg .lar .conf .bg_repeat .ico {width:16px; height:16px; background-size:contain; background-position:center; background-repeat:no-repeat;}
						.css_bg .win .dg .lar .conf .bg_repeat input[value="repeat"] + .ico {background-image:url(/allpack/modules/core/fields/style-web_page/img/bg/bg_repeat.svg);}
						.css_bg .win .dg .lar .conf .bg_repeat input[value="repeat-x"] + .ico {background-image:url(/allpack/modules/core/fields/style-web_page/img/bg/bg_repeat-x.svg);}
						.css_bg .win .dg .lar .conf .bg_repeat input[value="repeat-y"] + .ico {background-image:url(/allpack/modules/core/fields/style-web_page/img/bg/bg_repeat-y.svg);}
						.css_bg .win .dg .lar .conf .bg_repeat input[value="no-repeat"] + .ico {background-image:url(/allpack/modules/core/fields/style-web_page/img/bg/bg_no-repeat.svg);}



						/* Фиксация изобрашения */
					.css_bg .win .dg .lar .conf .attach {}
						.css_bg .win .dg .lar .conf .attach .ico {width:16px; height:16px; background-size:contain; background-position:center; background-repeat:no-repeat;}
						.css_bg .win .dg .lar .conf .attach input[value="scroll"] + .ico {background-image:url(/allpack/modules/core/fields/style-web_page/img/bg/scroll.svg);}
						.css_bg .win .dg .lar .conf .attach input[value="fixed"] + .ico {background-image:url(/allpack/modules/core/fields/style-web_page/img/bg/fixed.svg);}






					/* Настройка градиента */
				.css_bg .win .dg .lar .cfg {display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; width:45px; column-gap:10px; row-gap:10px;}
					.css_bg .win .dg .lar .cfg .repeat_grd {position:relative; width:16px; height:16px;}
						.css_bg .win .dg .lar .cfg .repeat_grd .ico1 {position:relative;}

						.css_bg .win .dg .lar[type="linear-gradient"] .cfg .repeat_grd .ico1:before,
						.css_bg .win .dg .lar[type="radial-gradient"] .cfg .repeat_grd .ico1:before,
						.css_bg .win .dg .lar[type="conic-gradient"] .cfg .repeat_grd .ico1:before {content:''; position:absolute; top:6px; left:0px; right:3px; height:4px; background:#028c02;}
						.css_bg .win .dg .lar[type="linear-gradient"] .cfg .repeat_grd .ico1:after,
						.css_bg .win .dg .lar[type="radial-gradient"] .cfg .repeat_grd .ico1:after,
						.css_bg .win .dg .lar[type="conic-gradient"] .cfg .repeat_grd .ico1:after {content:''; position:absolute; top:2px; right:-6px; border:6px solid transparent; border-left-color:#028c02;}



						.css_bg .win .dg .lar[type="repeating-linear-gradient"] .cfg .repeat_grd .ico1:before,
						.css_bg .win .dg .lar[type="repeating-radial-gradient"] .cfg .repeat_grd .ico1:before,
						.css_bg .win .dg .lar[type="repeating-conic-gradient"] .cfg .repeat_grd .ico1:before {content:''; position:absolute; top:1px; left:0px; right:3px; height:4px; background:#028c02;}
						.css_bg .win .dg .lar[type="repeating-linear-gradient"] .cfg .repeat_grd .ico1:after,
						.css_bg .win .dg .lar[type="repeating-radial-gradient"] .cfg .repeat_grd .ico1:after,
						.css_bg .win .dg .lar[type="repeating-conic-gradient"] .cfg .repeat_grd .ico1:after {content:''; position:absolute; top:-3px; right:-6px; border:6px solid transparent; border-left-color:#028c02;}

						.css_bg .win .dg .lar[type="repeating-linear-gradient"] .cfg .repeat_grd .ico2:before,
						.css_bg .win .dg .lar[type="repeating-radial-gradient"] .cfg .repeat_grd .ico2:before,
						.css_bg .win .dg .lar[type="repeating-conic-gradient"] .cfg .repeat_grd .ico2:before {content:''; position:absolute; top:10px; left:3px; right:0px; height:4px; background:#028c02;}
						.css_bg .win .dg .lar[type="repeating-linear-gradient"] .cfg .repeat_grd .ico2:after,
						.css_bg .win .dg .lar[type="repeating-radial-gradient"] .cfg .repeat_grd .ico2:after,
						.css_bg .win .dg .lar[type="repeating-conic-gradient"] .cfg .repeat_grd .ico2:after {content:''; position:absolute; top:6px; left:-6px; border:6px solid transparent; border-right-color:#028c02;}



						/* Вид радиального градиента */
					.css_bg .win .dg .lar .cfg .shape {}
						.css_bg .win .dg .lar .cfg .shape .ico {width:16px; height:16px; background-size:contain; background-position:center; background-repeat:no-repeat;}
						.css_bg .win .dg .lar .cfg .shape input[value="ellipse"] + .ico {background-image:url(/allpack/modules/core/fields/style-web_page/img/bg/ellipse.svg);}
						.css_bg .win .dg .lar .cfg .shape input[value="circle"] + .ico {background-image:url(/allpack/modules/core/fields/style-web_page/img/bg/circle.svg);}





					.css_bg .win .dg .lar .cfg .scale {width:100%;}
						.css_bg .win .dg .lar .cfg .scale .title {font-size:10px;}

						.css_bg .win .dg .lar .cfg .scale .num {width:28px;}
							.css_bg .win .dg .lar .cfg .scale .num input {font-size:11px; min-height:15px;}

						.css_bg .win .dg .lar .cfg .scale .unit {}
							.css_bg .win .dg .lar .cfg .scale .unit .lsrm {margin-left:1px;}
							.css_bg .win .dg .lar .cfg .scale .unit .lsrm.link > lss {min-width:15px;}




					/* Угол поворота */
				.css_bg .win .dg .lar .angle {background:url(/allpack/modules/core/fields/style-web_page/img/bg/not.svg); position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center; width:56px; height:56px; border:2px solid #8b8b8b; box-shadow:inset 0 0 0px 7px #ffffff; border-radius:50%;}
					.css_bg .win .dg .lar .angle .dial {position:absolute; z-index:1; width:42px; height:42px; box-shadow:inset 0px 0px 4px #00000085; border-radius:50%;}

					.css_bg .win .dg .lar .angle .cursor {position:absolute; z-index:2; background:linear-gradient(180deg, #0072ff 50%, #00000000 50%); width:4px; height:100%; transform-origin:50% 50%;}
					.css_bg .win .dg .lar .angle .cursor:after {content:""; background:#0072ff; position:absolute; top:50%; left:-2px; margin-top:-2px; width:8px; height:8px; border-radius:50%; box-shadow:0px 0px 2px #000000;}
					.css_bg .win .dg .lar .angle .cursor:before {content:""; background:#0072ff; position:absolute; top:-7px; left:-4px; width:12px; height:12px; border-radius:50%; box-shadow:0px 0px 2px #000000;}


					/* Позиционирование */
				.css_bg .win .dg .lar .pos {position:relative; width:50px; height:50px; box-shadow:0px 0px 0px 2px #cccccc; box-sizing:border-box;}
					.css_bg .win .dg .lar .pos p {display:block; position:absolute; z-index:1; background:#999999; width:8px; height:8px; margin:0px; padding:0px; border-radius:2px; cursor:pointer;}
					.css_bg .win .dg .lar .pos p:nth-child(1) {top:-4px; left:-4px;}						/* верх - лево */
					.css_bg .win .dg .lar .pos p:nth-child(2) {top:-4px; left:calc(50% - 4px);}				/* верх - центер */
					.css_bg .win .dg .lar .pos p:nth-child(3) {top:-4px; right:-4px;}						/* верх - право */
					.css_bg .win .dg .lar .pos p:nth-child(4) {top:calc(50% - 4px); right:-4px;}			/* центр - право */
					.css_bg .win .dg .lar .pos p:nth-child(5) {bottom:-4px; right:-4px;}					/* низ - право */
					.css_bg .win .dg .lar .pos p:nth-child(6) {bottom:-4px; left:calc(50% - 4px);}			/* низ - центр */
					.css_bg .win .dg .lar .pos p:nth-child(7) {bottom:-4px; left:-4px;}						/* низ - лево */
					.css_bg .win .dg .lar .pos p:nth-child(8) {top:calc(50% - 4px); left:-4px;}				/* центр - лево */
					.css_bg .win .dg .lar .pos p:nth-child(9) {top:calc(50% - 4px); left:calc(50% - 4px);}	/* центр - центр */

					.css_bg .win .dg .lar .pos div {display:block; position:absolute; top:0%; left:0%; z-index:2; width:0px; height:0px; margin:0px; padding:0px;}
					.css_bg .win .dg .lar .pos div:after  {content:""; display:block; position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px; z-index:2; background:#ff0000; width:8px; height:8px; margin:0px; padding:0px; border-radius:2px; cursor:pointer;}




				.css_bg .win .dg .lar > .palette {background:url(/allpack/modules/core/fields/style-web_page/img/bg/not.svg); border:1px solid #8b8b8b; margin-top:30px; margin-bottom:30px;}
					.css_bg .win .dg .lar > .palette .scale {position:relative; width:200px; height:16px;}
						.css_bg .win .dg .lar > .palette .scale .grdspot {position:absolute; margin-top:28px; cursor:pointer;}
						.css_bg .win .dg .lar > .palette .scale .grdspot[del] {opacity:0.2;}
						.css_bg .win .dg .lar > .palette .scale .grdspot:after {content:''; position:absolute; left:-6px; top:-16px; border:6px solid transparent; border-bottom:10px solid #000000;}

							.css_bg .win .dg .lar > .palette .scale .grdspot[top] {margin-top:-29px;}
							.css_bg .win .dg .lar > .palette .scale .grdspot[top]:after {top:20px; border-bottom-color:transparent; border-top-color:#000000;}

							.css_bg .win .dg .lar > .palette .scale .grdspot .ft_color {border-radius:4px; margin-left:-9px;}
							.css_bg .win .dg .lar > .palette .scale .grdspot:hover .ft_color {box-shadow:3px 3px 0px #00000030;}
								.css_bg .win .dg .lar > .palette .scale .grdspot .ft_color .types_clr .type .clr_area {border-width:1px;}
								.css_bg .win .dg .lar > .palette .scale .grdspot .ft_color .types_clr .type .clr {width:16px; border-radius:2px;}
								.css_bg .win .dg .lar > .palette .scale .grdspot .ft_color .types_clr .type .clr:after {display:none;}



				.css_bg .win .dg .lar .hint_val {display:flex; align-items:center; justify-content:flex-end; background:#555555; position:absolute; top:0px; right:0px; min-width:70px; height:23px; padding:0 7px 0 15px; box-sizing:border-box; border-radius:0 0 0 10px;}
				.css_bg .win .dg .lar .hint_val[val=""] {display:none;}
				.css_bg .win .dg .lar .hint_val:after {content:attr(val); font-size:13px; color:#ffffff; font-weight:bold;}


				.css_bg .win .dg .lar .del {align-self:center; width:0px; height:24px; cursor:pointer; box-sizing:border-box;}
				.css_bg .win .dg .lar .del .click_box {position:absolute; right:10px; width:24px; height:24px;}
				.css_bg .win .dg .lar .del:before,
				.css_bg .win .dg .lar .del:after {margin:5px 0 0 12px; position:absolute; right:20px; content:''; height:16px; width:2px; background:#6c6c6c;}
				.css_bg .win .dg .lar .del:hover:before,
				.css_bg .win .dg .lar .del:hover:after {background:#000000;}
				.css_bg .win .dg .lar .del:before {transform:rotate(45deg);}
				.css_bg .win .dg .lar .del:after {transform:rotate(-45deg);}



		.css_bg .win .other_prop {display:flex; flex-direction:row; column-gap:30px; padding:2px 0 10px 10px;}
		.css_bg .win .other_prop:empty {display:none;}
			.css_bg .win .other_prop .filter {display:flex; flex-direction:row; column-gap:30px;}
				.css_bg .win .other_prop .filter .item {display:flex; flex-direction:row; column-gap:2px;}



		.css_bg .win .bg_add {display:flex; flex-direction:row; justify-content:flex-start; column-gap:10px; align-items:center; padding:0px 100px 15px 15px;}
			.css_bg .win .bg_add .item {display:flex; flex-direction:row; align-items:center; column-gap:5px; height:24px; border:1px solid #888888; font-size:13px; padding:3px 7px; border-radius:5px; cursor:pointer; white-space:nowrap;}
			.css_bg .win .bg_add item:hover {background:#dddddd;}

			.css_bg .win .bg_add .ico_grd {width:24px; height:24px; border:1px solid #000000; box-shadow:inset 0px 0px 0px 1px #ffffff; border-radius:5px; box-sizing:border-box;}

			.css_bg .win .bg_add .ico_grd_linear {background:linear-gradient(270deg, #ffffff 0%, #000000 100%);}
			.css_bg .win .bg_add .ico_grd_radial {background:radial-gradient(circle at center center, #ffffff 0%, #000000 100%);}
			.css_bg .win .bg_add .ico_grd_conic {background:conic-gradient(from 0deg at center center, #ffffff 0%, #000000 100%);}


			.css_bg .win .bg_add .kit {position:relative; width:28px; height:31px; margin:-5px -8px -4px 0px;}
			.css_bg .win .bg_add .kit:before {content:''; background:#888888; position:absolute; top:0px; bottom:0px; left:0px; width:1px;}
			.css_bg .win .bg_add .kit:after {content:''; position:absolute; top:15px; right:9px; border:4px solid transparent; border-top-color:#363636;}
			.css_bg .win .bg_add .kit[kit_active]:after {border-top-color:transparent; border-bottom-color:#a90909; top:11px;}

			.css_bg .win .bg_add .item.cancell {background:#f1e7e7 url(/allpack/modules/core/fields/style-web_page/img/bg/cancell.svg) center no-repeat; width:24px; position:absolute; right:15px; align-self:flex-end;}
			.css_bg .win .bg_add .item.cancell:hover {background-color:#871616; border-color:#5a0505; color:#ffffff;}

			.css_bg .win .bg_add .item[type="my"] {padding-left:0;}
			.css_bg .win .bg_add .item[type="my"] .kit:before {display:none;}

		.css_bg .win .kit_view {display:flex; flex-direction:row; flex-wrap:wrap; column-gap:10px; row-gap:10px; padding:15px;}
		.css_bg .win .kit_view:empty {display:none;}
			.css_bg .win .kit_view .view {width:70px; height:50px; border:1px solid #000000; box-shadow:inset 0px 0px 0px 1px #ffffff; border-radius:5px; box-sizing:border-box; cursor:pointer;}
			.css_bg .win .kit_view .view:hover {border-color:#aaaaaa;}


.cp_dtl .lsf .f_group > f > .css_bg {margin:-2px 0 -3px -2px;}



@media screen and (max-width:480px) {
		.css_bg .win .dg {}
			.css_bg .win .dg .lar {column-gap:5px; padding:5px;}
				.css_bg .win .dg .lar .bgv {width:100px; height:100px;}
					.css_bg .win .dg .lar .bgv img {height:100px;}
				.css_bg .win .dg .lar .conf .item {column-gap:5px;}
					.css_bg .win .dg .lar .conf .item .title {width:50px; font-size:11px;}

			.css_bg .win .dg .lar > .palette .scale {width:125px;}

		.css_bg .win .bg_add div {font-size:11px;}
}






.css_size {display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start; height:19px;}
	.css_size .num {display:none; align-items:center; justify-content:flex-end; font-size:13px; line-height:100%; padding:0 2px; min-width:20px; cursor:text; border-radius:3px; box-sizing:border-box;}
	.css_size .num:hover {box-shadow:0px 0px 1px 1px #00000060;}
	.css_size .num:focus {box-shadow:0px 0px 1px 2px #ff0000b0; outline:none;}
	.css_size .unit {display:flex; align-items:center; justify-content:flex-start; font-size:13px; line-height:100%; text-decoration:underline dotted; text-decoration-color:#aaaaaa; padding:0 1px; cursor:pointer;}
	.css_size .unit:hover {text-decoration:underline solid; color:#ff0000;}

	.css_size .unit_ls {background:#ffffff; position:absolute; z-index:7500; display:flex; flex-direction:column; box-shadow:0px 0px 10px 0px #00000090;}
		.css_size .unit_ls:after {content:""; position:absolute; z-index:1; top:-20px; right:-20px; bottom:-20px; left:0px;}
		.css_size .unit_ls .item {position:relative; z-index:2; display:flex; flex-direction:row; align-items:center; column-gap:3px; row-gap:3px; padding:9px 10px; cursor:pointer;}
		.css_size .unit_ls .item:hover {background:#eeeeee;}
			.css_size .unit_ls .item .title {font-size:13px; line-height:100%; color:#000000; padding:0 0 0 1px;}
			.css_size .unit_ls .item .des {font-size:13px; line-height:130%; color:#777777;}

		/* Скрываем значение для некоторых едениц измерения */
	.css_size[unit="px"] .num,
	.css_size[unit="%"] .num,
	.css_size[unit="vh"] .num,
	.css_size[unit="vw"] .num {display:flex;}


		.css_size .brst {border:2px solid #999999; padding:2px 10px; cursor:pointer;}
		.css_size .brst.dotted {border-style:dotted;}
		.css_size .brst.dashed {border-style:dashed;}
		.css_size .brst.solid {border-style:solid;}
		.css_size .brst.groove {border-style:groove;}
		.css_size .brst.ridge {border-style:ridge;}
		.css_size .brst.inset {border-style:inset;}
		.css_size .brst.outset {border-style:outset;}


.cp_dtl .lsf .f_group > f > .css_size {margin:-3px 0 -3px -2px;}








	/* CSS border (граница) */
.css_border {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; column-gap:3px;}
	.css_border > input[value="0px"] ~ .css_size[prop="border-style"],
	.css_border > input[value="0px"] ~ .ft_color {display:none;}

.cp_dtl .lsf .f_group > f > .css_border {margin:-3px 0 -3px -2px;}
















.css_disp {}
	.css_disp .val {}
		.css_disp .val .demo {width:32px; height:32px; border:2px solid #bbbbbb; border-radius:5px; box-sizing:border-box; cursor:pointer; overflow:hidden;}
		.css_disp .val .demo:before {display:none;}
		.css_disp[display="flex"] .val .demo {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;}
			.css_disp[display="flex"] .val .demo .cell {min-width:11px; min-height:11px; display:flex; align-items:center; justify-content:center; border:0px solid #000000; box-sizing:border-box;}
				.css_disp[display="flex"] .val .demo .cell:after {content:'2'; color:#ffffff; font-size:11px; line-height:100%;}
			.css_disp[display="flex"] .val .demo .cell:nth-child(1) {background:#ff8383;}
				.css_disp[display="flex"] .val .demo .cell:nth-child(1):after {content:'1';}
			.css_disp[display="flex"] .val .demo .cell:nth-child(2) {background:#8686ff;}
				.css_disp[display="flex"] .val .demo .cell:nth-child(2):after {content:'2';}


		.css_disp[display="grid"] .val .demo {position:relative; display:grid; column-gap:1px; row-gap:1px;}
		.css_disp[display="grid"] .val .demo:before {position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; color:#ffffff; font-size:22px; line-height:100%; font-weight:600; text-shadow:0 0 2px #000000;}
			.css_disp[display="grid"] .val .demo .cell {background:#faadcd; min-width:3px; min-height:3px;}


			.css_disp[direction="row"] .val .demo {flex-direction:row;}
			.css_disp[direction="column"] .val .demo {flex-direction:column;}
			.css_disp[direction="row-reverse"] .val .demo {flex-direction:row-reverse;}
			.css_disp[direction="column-reverse"] .val .demo {flex-direction:column-reverse;}

			.css_disp[justify="noraml"] .val .demo {justify-content:flex-start;}
			.css_disp[justify="flex-start"] .val .demo {justify-content:flex-start;}
			.css_disp[justify="center"] .val .demo {justify-content:center;}
			.css_disp[justify="flex-end"] .val .demo {justify-content:flex-end;}
			.css_disp[justify="space-between"] .val .demo {justify-content:space-between;}
			.css_disp[justify="space-around"] .val .demo {justify-content:space-around;}

			.css_disp[items="flex-start"] .val .demo {align-items:flex-start;}
			.css_disp[items="center"] .val .demo {align-items:center;}
			.css_disp[items="flex-end"] .val .demo {align-items:flex-end;}
			.css_disp[items="stretch"] .val .demo {align-items:stretch;}
			.css_disp[items="baseline"] .val .demo {align-items:baseline;}



			.css_disp[grid_col="1fr"] .val .demo,
			.css_disp[grid_col="auto"] .val .demo {grid-template-columns:1fr;}
			.css_disp[grid_col="1fr"] .val .demo:before,
			.css_disp[grid_col="auto"] .val .demo:before {content:"1";}

			.css_disp[grid_col="1fr 1fr"] .val .demo,
			.css_disp[grid_col="auto auto"] .val .demo {grid-template-columns:1fr 1fr;}
			.css_disp[grid_col="1fr 1fr"] .val .demo:before,
			.css_disp[grid_col="auto auto"] .val .demo:before {content:"2";}

			.css_disp[grid_col="1fr 1fr 1fr"] .val .demo,
			.css_disp[grid_col="auto auto auto"] .val .demo {grid-template-columns:1fr 1fr 1fr;}
			.css_disp[grid_col="1fr 1fr 1fr"] .val .demo:before,
			.css_disp[grid_col="auto auto auto"] .val .demo:before {content:"3";}

			.css_disp[grid_col="1fr 1fr 1fr 1fr"] .val .demo,
			.css_disp[grid_col="auto auto auto auto"] .val .demo {grid-template-columns:1fr 1fr 1fr 1fr;}
			.css_disp[grid_col="1fr 1fr 1fr 1fr"] .val .demo:before,
			.css_disp[grid_col="auto auto auto auto"] .val .demo:before {content:"4";}

			.css_disp[grid_col="1fr 1fr 1fr 1fr 1fr"] .val .demo,
			.css_disp[grid_col="auto auto auto auto auto"] .val .demo {grid-template-columns:1fr 1fr 1fr 1fr 1fr;}
			.css_disp[grid_col="1fr 1fr 1fr 1fr 1fr"] .val .demo:before,
			.css_disp[grid_col="auto auto auto auto auto"] .val .demo:before {content:"5";}

			.css_disp[grid_col="1fr 1fr 1fr 1fr 1fr 1fr"] .val .demo,
			.css_disp[grid_col="auto auto auto auto auto auto"] .val .demo {grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;}
			.css_disp[grid_col="1fr 1fr 1fr 1fr 1fr 1fr"] .val .demo:before,
			.css_disp[grid_col="auto auto auto auto auto auto"] .val .demo:before {content:"6";}







		.css_disp[display="block"] .val .demo {display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; row-gap:2px; padding:2px;}
			.css_disp[display="block"] .val .demo:before,
			.css_disp[display="block"] .val .demo:after {content:""; display:block; width:100%; height:11px; background:#aaaaaa; box-sizing:border-box;}


		.css_disp[display="inline"] .val .demo {display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; row-gap:2px; padding:2px;}
			.css_disp[display="inline"] .val .demo:before,
			.css_disp[display="inline"] .val .demo:after {content:""; display:block; width:100%; height:4px; background:#cccccc; box-sizing:border-box;}
			.css_disp[display="inline"] .val .demo:after {width:50%;}

		.css_disp[display="inline-block"] .val .demo {display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; row-gap:2px; padding:2px;}
			.css_disp[display="inline-block"] .val .demo:before,
			.css_disp[display="inline-block"] .val .demo:after {content:""; display:block; width:100%; height:4px; background:#cccccc; box-sizing:border-box;}
			.css_disp[display="inline-block"] .val .demo:after {width:50%;}



	.css_disp .win {display:none; position:fixed; z-index:1000; background:#ffffff; border:2px solid #656565; border-radius:5px; box-shadow:2px 2px 10px 0 #00000090; overflow:hidden;}
		.css_disp .win .display {display:flex; flex-direction:row;}
			.css_disp .win .display div {background:#eeeeee; padding:3px 15px; cursor:pointer;}
			.css_disp .win .display div:hover {background:#cccccc;}

			.css_disp[display="none"] .win .display div[val="none"],
			.css_disp[display="inline"] .win .display div[val="inline"],
			.css_disp[display="inline-block"] .win .display div[val="inline-block"],
			.css_disp[display="block"] .win .display div[val="block"],
			.css_disp[display="flex"] .win .display div[val="flex"],
			.css_disp[display="grid"] .win .display div[val="grid"] {background:#777777; color:#ffffff;}



	.css_disp .fx {display:grid; grid-template-columns:auto auto auto;  padding:10px;}

		.css_disp .fx .param {display:flex; flex-direction:row; grid-column:2 / 4; column-gap:15px; padding:0 0 10px 0;}
			.css_disp .fx .param .gap {display:flex; flex-direction:row; align-items:center;}
				.css_disp .fx .param .gap .ico {width:16px; height:16px; padding-right:5px;}
				.css_disp .fx .param .gap[p="column"] .ico {background:url(/allpack/modules/core/fields/style-web_page/img/ft_disp_column_gap.svg) 0% 0% no-repeat;}
				.css_disp .fx .param .gap[p="row"] .ico {background:url(/allpack/modules/core/fields/style-web_page/img/ft_disp_row_gap.svg) 0% 0% no-repeat;}

				.css_disp .fx .param .wrap {background:url(/allpack/modules/core/fields/style-web_page/img/ft_disp_wrap.svg) 0% 0% no-repeat; width:16px; height:16px; cursor:pointer;}
				.css_disp .fx .param .wrap.no {background:url(/allpack/modules/core/fields/style-web_page/img/ft_disp_nowrap.svg) 0% 0% no-repeat;}

		.css_disp .fx .dir_row {}
			.css_disp .fx .dir_row .dash {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; padding:0 0 10px 0;}
				.css_disp .fx .dir_row .dash .but {position:relative; opacity:0.7; width:45px; height:24px; padding:3px 8px; border:1px solid #000000; cursor:pointer; border-radius:3px; box-sizing:border-box; transition:all 0.7s ease-in-out;}
				.css_disp .fx .dir_row .dash .but:hover {position:relative; opacity:1;}
				.css_disp .fx .dir_row .dash .but[val="row"] {}
				.css_disp .fx .dir_row .dash .but[val="row"]:before {content:''; position:absolute; top:7px; left:5px; right:10px; height:8px; background:#028c02;}
				.css_disp .fx .dir_row .dash .but[val="row"]:after {content:''; position:absolute; top:3px; right:-2px; border:8px solid transparent; border-left:8px solid #028c02;}

				.css_disp .fx .dir_row .dash .but[val="row-reverse"] {}
				.css_disp .fx .dir_row .dash .but[val="row-reverse"]:before {content:''; position:absolute; top:7px; left:10px; right:5px; height:8px; background:#028c02;}
				.css_disp .fx .dir_row .dash .but[val="row-reverse"]:after {content:''; position:absolute; top:3px; left:-2px; border:8px solid transparent; border-right:8px solid #028c02;}

				.css_disp[direction="row"] .fx .dir_row .dash .but[val="row"],
				.css_disp[direction="row-reverse"] .fx .dir_row .dash .but[val="row-reverse"] {background:#00000020; position:relative; opacity:1; width:150px;}



			/* Направляюшие по X */
		.css_disp .fx .x {position:relative; height:16px; opacity:0; transition:all 0.7s ease-in-out;}
		.css_disp[direction="column"][items] .fx .x,
		.css_disp[direction="column-reverse"][items] .fx .x,
		.css_disp[direction="row"][justify] .fx .x,
		.css_disp[direction="row-reverse"][justify] .fx .x {opacity:1;}


			.css_disp .fx .x div {position:absolute; left:0px; top:0px; border:1px solid #00000030; width:16px; height:16px; cursor:pointer; box-sizing:border-box; transition:all 0.7s ease-in-out;}
			.css_disp .fx .x div:before {content:''; position:absolute; top:3px; left:0px; background:#000000; width:3px; height:8px;}
			.css_disp .fx .x div:after {content:''; display:none; position:absolute; top:3px; left:0px; background:#000000; width:3px; height:8px;}

			.css_disp .fx .x .left {border-left:2px solid #000000;}
			.css_disp .fx .x .left:before {}

			.css_disp .fx .x .center {left:93px;}
			.css_disp .fx .x .center:before {width:6px; left:4px;}
			.css_disp .fx .x .center:after {display:block; left:6px; top:0px; width:2px; height:14px;}

			.css_disp .fx .x .right {left:186px; border-right:2px solid #000000;}
			.css_disp .fx .x .right:before {left:10px;}

			.css_disp .fx .x .around {left:124px; border-left:1px solid #000000; border-right:1px solid #000000;}
			.css_disp .fx .x .around:before {left:2px;}
			.css_disp .fx .x .around:after {display:block; left:9px;}

			.css_disp .fx .x .stretch {left:140px; border-left:1px solid #000000; border-right:1px solid #000000;}
			.css_disp .fx .x .stretch:before {left:0px; top:2px; width:14px; height:3px;}
			.css_disp .fx .x .stretch:after {display:block; left:0px; top:9px; width:14px; height:3px;}


			.css_disp .fx .x .between {left:155px; border-left:1px solid #000000; border-right:1px solid #000000;}
			.css_disp .fx .x .between:before {left:0px;}
			.css_disp .fx .x .between:after {display:block; left:11px;}


				/* Показывать ли специальные направляюшие */
			.css_disp[direction="column"] .fx .x .around,
			.css_disp[direction="column"] .fx .x .between,
			.css_disp[direction="column-reverse"] .fx .x .around,
			.css_disp[direction="column-reverse"] .fx .x .between,

			.css_disp[direction="column"] .fx .y .stretch,
			.css_disp[direction="column-reverse"] .fx .y .stretch {opacity:0; cursor:default;}




				/* По X левый край */
			.css_disp[direction="row"][justify="flex-start"] .fx .x .left,
			.css_disp[direction="row-reverse"][justify="flex-end"] .fx .x .left,
			.css_disp[direction="column"][items="flex-start"] .fx .x .left,
			.css_disp[direction="column-reverse"][items="flex-start"] .fx .x .left,

				/* По X центр */
			.css_disp[direction="row"][justify="center"] .fx .x .center,
			.css_disp[direction="row-reverse"][justify="center"] .fx .x .center,
			.css_disp[direction="column"][items="center"] .fx .x .center,
			.css_disp[direction="column-reverse"][items="center"] .fx .x .center,


				/* По X правый край */
			.css_disp[direction="row"][justify="flex-end"] .fx .x .right,
			.css_disp[direction="row-reverse"][justify="flex-start"] .fx .x .right,
			.css_disp[direction="column"][items="flex-end"] .fx .x .right,
			.css_disp[direction="column-reverse"][items="flex-end"] .fx .x .right,

				/* По X равносторонне отдаление элементов */
			.css_disp[direction="row"][justify="space-around"] .fx .x .around,
			.css_disp[direction="row-reverse"][justify="space-around"] .fx .x .around,


				/* По Y Растянуть */
			.css_disp[direction="column"][items="stretch"] .fx .x .stretch,
			.css_disp[direction="column-reverse"][items="stretch"] .fx .x .stretch,

				/* По X максимальное отдаление */
			.css_disp[direction="row"][justify="space-between"] .fx .x .between,
			.css_disp[direction="row-reverse"][justify="space-between"] .fx .x .between  {background:#00000020;}





			/* Направляюшие по Y */
		.css_disp .fx .y {position:relative; width:16px; height:200px; opacity:0; transition:all 0.7s ease-in-out;}
		.css_disp[direction="column"][justify] .fx .y,
		.css_disp[direction="column-reverse"][justify] .fx .y,
		.css_disp[direction="row"][items] .fx .y,
		.css_disp[direction="row-reverse"][items] .fx .y {opacity:1;}


			.css_disp .fx .y div {background:#ffffff; position:absolute; left:0px; top:0px; border:1px solid #00000030; width:16px; height:16px; cursor:pointer; box-sizing:border-box; transition:all 0.3s ease-in-out;}
			.css_disp .fx .y div:before {content:''; position:absolute; top:0px; left:3px; background:#000000; width:8px; height:3px;}
			.css_disp .fx .y div:after {content:''; display:none; position:absolute; top:0px; left:3px; background:#000000; width:8px; height:3px;}

			.css_disp .fx .y .top {border-top:2px solid #000000;}
			.css_disp .fx .y .top:before {}

			.css_disp .fx .y .center {top:93px;}
			.css_disp .fx .y .center:before {height:6px; top:4px;}
			.css_disp .fx .y .center:after {display:block; left:0px; top:6px; width:14px; height:2px;}

			.css_disp .fx .y .bottom {top:186px; border-bottom:2px solid #000000;}
			.css_disp .fx .y .bottom:before {top:10px;}

			.css_disp .fx .y .around {top:124px; border-top:1px solid #000000; border-bottom:1px solid #000000;}
			.css_disp .fx .y .around:before {top:2px;}
			.css_disp .fx .y .around:after {display:block; top:9px;}

			.css_disp .fx .y .stretch {top:140px; border-top:1px solid #000000; border-bottom:1px solid #000000;}
			.css_disp .fx .y .stretch:before {top:0px; left:2px; width:3px; height:14px;}
			.css_disp .fx .y .stretch:after {display:block; top:0px; left:9px; width:3px; height:14px;}

			.css_disp .fx .y .between {top:156px; border-top:1px solid #000000; border-bottom:1px solid #000000;}
			.css_disp .fx .y .between:before {top:0px;}
			.css_disp .fx .y .between:after {display:block; top:11px;}


				/* Показывать ли специальные направляюшие */
			.css_disp[direction="row"] .fx .y .around,
			.css_disp[direction="row"] .fx .y .between,
			.css_disp[direction="row-reverse"] .fx .y .around,
			.css_disp[direction="row-reverse"] .fx .y .between,

			.css_disp[direction="row"] .fx .x .stretch,
			.css_disp[direction="row-reverse"] .fx .x .stretch  {opacity:0; cursor:default;}


				/* По Y левый край */
			.css_disp[direction="column"][justify="flex-start"] .fx .y .top,
			.css_disp[direction="column-reverse"][justify="flex-end"] .fx .y .top,
			.css_disp[direction="row"][items="flex-start"] .fx .y .top,
			.css_disp[direction="row-reverse"][items="flex-start"] .fx .y .top,

				/* По Y центр */
			.css_disp[direction="column"][justify="center"] .fx .y .center,
			.css_disp[direction="column-reverse"][justify="center"] .fx .y .center,
			.css_disp[direction="row"][items="center"] .fx .y .center,
			.css_disp[direction="row-reverse"][items="center"] .fx .y .center,


				/* По Y правый край */
			.css_disp[direction="column"][justify="flex-end"] .fx .y .bottom,
			.css_disp[direction="column-reverse"][justify="flex-start"] .fx .y .bottom,
			.css_disp[direction="row"][items="flex-end"] .fx .y .bottom,
			.css_disp[direction="row-reverse"][items="flex-end"] .fx .y .bottom,

				/* По Y равносторонне отдаление элементов */
			.css_disp[direction="column"][justify="space-around"] .fx .y .around,
			.css_disp[direction="column-reverse"][justify="space-around"] .fx .y .around,


				/* По Y Растянуть */
			.css_disp[direction="row"][items="stretch"] .fx .y .stretch,
			.css_disp[direction="row-reverse"][items="stretch"] .fx .y .stretch,


				/* По Y максимальное отдаление */
			.css_disp[direction="column"][justify="space-between"] .fx .y .between,
			.css_disp[direction="column-reverse"][justify="space-between"] .fx .y .between  {background:#00000030;}




		.css_disp .fx .dir_col {}
			.css_disp .fx .dir_col .dash {display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; height:100%; padding:0 10px 0 0;}

				.css_disp .fx .dir_col .dash .but {position:relative; opacity:0.7; width:24px; height:45px; padding:8px 3px; border:1px solid #000000; cursor:pointer; border-radius:3px; box-sizing:border-box; transition:all 0.7s ease-in-out;}
				.css_disp .fx .dir_col .dash .but:hover {position:relative; opacity:1;}
				.css_disp .fx .dir_col .dash .but[val="column"] {}
				.css_disp .fx .dir_col .dash .but[val="column"]:before {content:''; position:absolute; left:7px; top:5px; bottom:10px; width:8px; background:#028c02;}
				.css_disp .fx .dir_col .dash .but[val="column"]:after {content:''; position:absolute; left:3px; bottom:-2px; border:8px solid transparent; border-top:8px solid #028c02;}


				.css_disp .fx .dir_col .dash .but[val="column-reverse"] {}
				.css_disp .fx .dir_col .dash .but[val="column-reverse"]:before {content:''; position:absolute; left:7px; top:10px; bottom:5px; width:8px; background:#028c02;}
				.css_disp .fx .dir_col .dash .but[val="column-reverse"]:after {content:''; position:absolute; left:3px; top:-2px; border:8px solid transparent; border-bottom:8px solid #028c02;}


				.css_disp[direction="column"] .fx .dir_col .dash .but[val="column"],
				.css_disp[direction="column-reverse"] .fx .dir_col .dash .but[val="column-reverse"] {background:#00000020; position:relative; opacity:1; height:150px;}



		.css_disp .fx .demo {position:relative; width:200px; height:200px; border:1px solid #000000;}
			.css_disp .fx .demo div {position:absolute; top:0px; left:0px; display:flex; align-items:center; justify-content:center; width:50px; height:50px; font-size:24px; border:1px solid #000000; padding:0; box-sizing:border-box; transition:all 0.7s ease-in-out;}
			.css_disp .fx .demo .el1 {background:#ff8383;}
			.css_disp .fx .demo .el2 {background:#8686ff;}
			.css_disp .fx .demo .el3 {background:#84ff84;}









				/* ПРОПИСЫАЕМ ПОЛОЖЕНИЕ БЛОКОВ ДЛЯ ПЛАВНОГО ИЗМЕНЕНИЯ ДЕМОНСТРАЦИОННОГО ОКЛА */

			/* direction=row */

		.css_disp[direction="row"][justify="unset"] .fx .el1,
		.css_disp[direction="row"][justify="noraml"] .fx .el1,
		.css_disp[direction="row"][justify="flex-start"] .fx .el1 {left:0px;}
		.css_disp[direction="row"][justify="unset"] .fx .el2,
		.css_disp[direction="row"][justify="normal"] .fx .el2,
		.css_disp[direction="row"][justify="flex-start"] .fx .el2 {left:50px;}
		.css_disp[direction="row"][justify="unset"] .fx .el3,
		.css_disp[direction="row"][justify="normal"] .fx .el3,
		.css_disp[direction="row"][justify="flex-start"] .fx .el3 {left:100px;}


		.css_disp[direction="row"][justify="center"] .fx .el1 {left:25px;}
		.css_disp[direction="row"][justify="center"] .fx .el2 {left:75px;}
		.css_disp[direction="row"][justify="center"] .fx .el3 {left:125px;}

		.css_disp[direction="row"][justify="flex-end"] .fx .el1 {left:50px;}
		.css_disp[direction="row"][justify="flex-end"] .fx .el2 {left:100px;}
		.css_disp[direction="row"][justify="flex-end"] .fx .el3 {left:150px;}

		.css_disp[direction="row"][justify="space-between"] .fx .el1 {left:0px;}
		.css_disp[direction="row"][justify="space-between"] .fx .el2 {left:75px;}
		.css_disp[direction="row"][justify="space-between"] .fx .el3 {left:150px;}

		.css_disp[direction="row"][justify="space-around"] .fx .el1 {left:10px;}
		.css_disp[direction="row"][justify="space-around"] .fx .el2 {left:75px;}
		.css_disp[direction="row"][justify="space-around"] .fx .el3 {left:140px;}

		.css_disp[direction="row"][items="flex-start"] .fx .el1 {top:0px;}
		.css_disp[direction="row"][items="flex-start"] .fx .el2 {top:0px;}
		.css_disp[direction="row"][items="flex-start"] .fx .el3 {top:0px;}

		.css_disp[direction="row"][items="center"] .fx .el1 {top:75px;}
		.css_disp[direction="row"][items="center"] .fx .el2 {top:75px;}
		.css_disp[direction="row"][items="center"] .fx .el3 {top:75px;}

		.css_disp[direction="row"][items="stretch"] .fx .el1 {top:0px; height:100%}
		.css_disp[direction="row"][items="stretch"] .fx .el2 {top:0px; height:100%}
		.css_disp[direction="row"][items="stretch"] .fx .el3 {top:0px; height:100%}

		.css_disp[direction="row"][items="flex-end"] .fx .el1 {top:150px;}
		.css_disp[direction="row"][items="flex-end"] .fx .el2 {top:150px;}
		.css_disp[direction="row"][items="flex-end"] .fx .el3 {top:150px;}



			/* direction=row-reverse */
		.css_disp[direction="row-reverse"][justify="unset"] .fx .el1,
		.css_disp[direction="row-reverse"][justify="normal"] .fx .el1,
		.css_disp[direction="row-reverse"][justify="flex-start"] .fx .el1 {left:150px;}
		.css_disp[direction="row-reverse"][justify="unset"] .fx .el2,
		.css_disp[direction="row-reverse"][justify="normal"] .fx .el2,
		.css_disp[direction="row-reverse"][justify="flex-start"] .fx .el2 {left:100px;}
		.css_disp[direction="row-reverse"][justify="unset"] .fx .el3,
		.css_disp[direction="row-reverse"][justify="normal"] .fx .el3,
		.css_disp[direction="row-reverse"][justify="flex-start"] .fx .el3 {left:50px;}



		.css_disp[direction="row-reverse"][justify="center"] .fx .el1 {left:125px;}
		.css_disp[direction="row-reverse"][justify="center"] .fx .el2 {left:75px;}
		.css_disp[direction="row-reverse"][justify="center"] .fx .el3 {left:25px;}

		.css_disp[direction="row-reverse"][justify="flex-end"] .fx .el1 {left:100px;}
		.css_disp[direction="row-reverse"][justify="flex-end"] .fx .el2 {left:50px;}
		.css_disp[direction="row-reverse"][justify="flex-end"] .fx .el3 {left:0px;}

		.css_disp[direction="row-reverse"][justify="space-between"] .fx .el1 {left:150px;}
		.css_disp[direction="row-reverse"][justify="space-between"] .fx .el2 {left:75px;}
		.css_disp[direction="row-reverse"][justify="space-between"] .fx .el3 {left:0px;}

		.css_disp[direction="row-reverse"][justify="space-around"] .fx .el1 {left:140px;}
		.css_disp[direction="row-reverse"][justify="space-around"] .fx .el2 {left:75px;}
		.css_disp[direction="row-reverse"][justify="space-around"] .fx .el3 {left:10px;}

		.css_disp[direction="row-reverse"][items="flex-start"] .fx .el1 {top:0px;}
		.css_disp[direction="row-reverse"][items="flex-start"] .fx .el2 {top:0px;}
		.css_disp[direction="row-reverse"][items="flex-start"] .fx .el3 {top:0px;}

		.css_disp[direction="row-reverse"][items="center"] .fx .el1 {top:75px;}
		.css_disp[direction="row-reverse"][items="center"] .fx .el2 {top:75px;}
		.css_disp[direction="row-reverse"][items="center"] .fx .el3 {top:75px;}

		.css_disp[direction="row-reverse"][items="stretch"] .fx .el1 {top:0px; height:100%}
		.css_disp[direction="row-reverse"][items="stretch"] .fx .el2 {top:0px; height:100%}
		.css_disp[direction="row-reverse"][items="stretch"] .fx .el3 {top:0px; height:100%}

		.css_disp[direction="row-reverse"][items="flex-end"] .fx .el1 {top:150px;}
		.css_disp[direction="row-reverse"][items="flex-end"] .fx .el2 {top:150px;}
		.css_disp[direction="row-reverse"][items="flex-end"] .fx .el3 {top:150px;}



			/* direction=column */
		.css_disp[direction="column"][justify="unset"] .fx .el1,
		.css_disp[direction="column"][justify="normal"] .fx .el1,
		.css_disp[direction="column"][justify="flex-start"] .fx .el1 {top:0px;}
		.css_disp[direction="column"][justify="unset"] .fx .el2,
		.css_disp[direction="column"][justify="normal"] .fx .el2,
		.css_disp[direction="column"][justify="flex-start"] .fx .el2 {top:50px;}
		.css_disp[direction="column"][justify="unset"] .fx .el3,
		.css_disp[direction="column"][justify="normal"] .fx .el3,
		.css_disp[direction="column"][justify="flex-start"] .fx .el3 {top:100px;}

		.css_disp[direction="column"][justify="center"] .fx .el1 {top:25px;}
		.css_disp[direction="column"][justify="center"] .fx .el2 {top:75px;}
		.css_disp[direction="column"][justify="center"] .fx .el3 {top:125px;}

		.css_disp[direction="column"][justify="flex-end"] .fx .el1 {top:50px;}
		.css_disp[direction="column"][justify="flex-end"] .fx .el2 {top:100px;}
		.css_disp[direction="column"][justify="flex-end"] .fx .el3 {top:150px;}

		.css_disp[direction="column"][justify="space-between"] .fx .el1 {top:0px;}
		.css_disp[direction="column"][justify="space-between"] .fx .el2 {top:75px;}
		.css_disp[direction="column"][justify="space-between"] .fx .el3 {top:150px;}

		.css_disp[direction="column"][justify="space-around"] .fx .el1 {top:10px;}
		.css_disp[direction="column"][justify="space-around"] .fx .el2 {top:75px;}
		.css_disp[direction="column"][justify="space-around"] .fx .el3 {top:140px;}

		.css_disp[direction="column"][items="flex-start"] .fx .el1 {left:0px;}
		.css_disp[direction="column"][items="flex-start"] .fx .el2 {left:0px;}
		.css_disp[direction="column"][items="flex-start"] .fx .el3 {left:0px;}

		.css_disp[direction="column"][items="center"] .fx .el1 {left:75px;}
		.css_disp[direction="column"][items="center"] .fx .el2 {left:75px;}
		.css_disp[direction="column"][items="center"] .fx .el3 {left:75px;}

		.css_disp[direction="column"][items="stretch"] .fx .el1 {left:0px; width:100%}
		.css_disp[direction="column"][items="stretch"] .fx .el2 {left:0px; width:100%}
		.css_disp[direction="column"][items="stretch"] .fx .el3 {left:0px; width:100%}

		.css_disp[direction="column"][items="flex-end"] .fx .el1 {left:150px;}
		.css_disp[direction="column"][items="flex-end"] .fx .el2 {left:150px;}
		.css_disp[direction="column"][items="flex-end"] .fx .el3 {left:150px;}



			/* direction=column-reverse */
		.css_disp[direction="column-reverse"][justify="unset"] .fx .el1,
		.css_disp[direction="column-reverse"][justify="normal"] .fx .el1,
		.css_disp[direction="column-reverse"][justify="flex-start"] .fx .el1 {top:150px;}
		.css_disp[direction="column-reverse"][justify="unset"] .fx .el2,
		.css_disp[direction="column-reverse"][justify="normal"] .fx .el2,
		.css_disp[direction="column-reverse"][justify="flex-start"] .fx .el2 {top:100px;}
		.css_disp[direction="column-reverse"][justify="unset"] .fx .el3,
		.css_disp[direction="column-reverse"][justify="normal"] .fx .el3,
		.css_disp[direction="column-reverse"][justify="flex-start"] .fx .el3 {top:50px;}

		.css_disp[direction="column-reverse"][justify="center"] .fx .el1 {top:125px;}
		.css_disp[direction="column-reverse"][justify="center"] .fx .el2 {top:75px;}
		.css_disp[direction="column-reverse"][justify="center"] .fx .el3 {top:25px;}

		.css_disp[direction="column-reverse"][justify="flex-end"] .fx .el1 {top:100px;}
		.css_disp[direction="column-reverse"][justify="flex-end"] .fx .el2 {top:50px;}
		.css_disp[direction="column-reverse"][justify="flex-end"] .fx .el3 {top:0px;}

		.css_disp[direction="column-reverse"][justify="space-between"] .fx .el1 {top:150px;}
		.css_disp[direction="column-reverse"][justify="space-between"] .fx .el2 {top:75px;}
		.css_disp[direction="column-reverse"][justify="space-between"] .fx .el3 {top:0px;}

		.css_disp[direction="column-reverse"][justify="space-around"] .fx .el1 {top:140px;}
		.css_disp[direction="column-reverse"][justify="space-around"] .fx .el2 {top:75px;}
		.css_disp[direction="column-reverse"][justify="space-around"] .fx .el3 {top:10px;}

		.css_disp[direction="column-reverse"][items="flex-start"] .fx .el1 {left:0px;}
		.css_disp[direction="column-reverse"][items="flex-start"] .fx .el2 {left:0px;}
		.css_disp[direction="column-reverse"][items="flex-start"] .fx .el3 {left:0px;}

		.css_disp[direction="column-reverse"][items="center"] .fx .el1 {left:75px;}
		.css_disp[direction="column-reverse"][items="center"] .fx .el2 {left:75px;}
		.css_disp[direction="column-reverse"][items="center"] .fx .el3 {left:75px;}

		.css_disp[direction="column-reverse"][items="stretch"] .fx .el1 {left:0px; width:100%}
		.css_disp[direction="column-reverse"][items="stretch"] .fx .el2 {left:0px; width:100%}
		.css_disp[direction="column-reverse"][items="stretch"] .fx .el3 {left:0px; width:100%}

		.css_disp[direction="column-reverse"][items="flex-end"] .fx .el1 {left:150px;}
		.css_disp[direction="column-reverse"][items="flex-end"] .fx .el2 {left:150px;}
		.css_disp[direction="column-reverse"][items="flex-end"] .fx .el3 {left:150px;}






	.css_disp .gd {display:grid; grid-template-columns:auto auto auto auto; padding:10px;}

		.css_disp .gd .gap {display:flex; flex-direction:row; grid-column-start:1; grid-column-end:5; padding:0 0 10px 0;}
			.css_disp .gd .gap .val {display:flex; flex-direction:row; align-items:center; padding-right:10px;}
				.css_disp .gd .gap .val .ico {width:16px; height:16px; padding-right:5px;}
				.css_disp .gd .gap .val[p="column"] .ico {background:url(/allpack/modules/core/fields/style-web_page/img/ft_disp_column_gap.svg) 0% 0% no-repeat;}
				.css_disp .gd .gap .val[p="row"] .ico {background:url(/allpack/modules/core/fields/style-web_page/img/ft_disp_row_gap.svg) 0% 0% no-repeat;}


		.css_disp .gd .col {display:flex; flex-direction:row; column-gap:5px; grid-column-start:1; grid-column-end:3; padding:0 0 10px 0;}
			.css_disp .gd .col .count {background:#ffffff; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; row-gap:2px; font-size:15px; line-height:100%; width:36px; height:36px; border:1px solid #777777; border-radius:5px; box-sizing:border-box; cursor:pointer; overflow:hidden;}
			.css_disp .gd .col .count:hover {background:#cccccc;}
			.css_disp .gd .col .count[y] {background:#12a11d; border-color:#12a11d; color:#ffffff;}
			.css_disp .gd .col .count[y] ~ .count .size {visibility:hidden;}

				.css_disp .gd .col .count .size {background:#ffffff50; font-size:12px; width:100%; text-align:center;}





		.css_disp .gd .row_size {display:flex; flex-direction:column; padding:2px;}
			.css_disp .gd .row_size .row {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; column-gap:2px; height:50px;}
				.css_disp .gd .row_size .row div {background:#ffffff; display:flex; justify-content:center; align-items:center; font-size:11px; line-height:100%; width:auto; height:auto; padding:2px 3px; border:1px solid #777777; border-radius:5px; box-sizing:border-box; cursor:pointer;}
				.css_disp .gd .row_size .row div:hover {background:#cccccc;}


		.css_disp .gd .demo {display:grid; grid-template-columns:1fr; grid-template-rows:repeat(4, 1fr); grid-column-start:1; grid-column-end:3; min-width:200px; height:204px; padding:1px; border:1px solid #000000; overflow:hidden; box-sizing:border-box;}

		.css_disp[grid_col="1fr"] .gd .demo,
		.css_disp[grid_col="auto"] .gd .demo {grid-template-columns:1fr;}
		.css_disp[grid_col="1fr 1fr"] .gd .demo,
		.css_disp[grid_col="auto auto"] .gd .demo {grid-template-columns:1fr 1fr;}
		.css_disp[grid_col="1fr 1fr 1fr"] .gd .demo,
		.css_disp[grid_col="auto auto auto"] .gd .demo {grid-template-columns:1fr 1fr 1fr;}
		.css_disp[grid_col="1fr 1fr 1fr 1fr"] .gd .demo,
		.css_disp[grid_col="auto auto auto auto"] .gd .demo {grid-template-columns:1fr 1fr 1fr 1fr;}
		.css_disp[grid_col="1fr 1fr 1fr 1fr 1fr"] .gd .demo,
		.css_disp[grid_col="auto auto auto auto auto"] .gd .demo {grid-template-columns:1fr 1fr 1fr 1fr 1fr;}
		.css_disp[grid_col="1fr 1fr 1fr 1fr 1fr 1fr"] .gd .demo,
		.css_disp[grid_col="auto auto auto auto auto auto"] .gd .demo {grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;}



			.css_disp .gd .demo .cell {background:#f7c3c3; position:relative; border:1px solid #ffffff; min-height:50px; min-width:50px; padding:0; box-sizing:border-box;}
				.css_disp .gd .demo .cell:hover {z-index:10;}

				.css_disp .gd .demo .cell:before {content:attr(num); position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; width:15px; height:11px; font-size:11px; line-height:100%; color:#ffffff; border-radius:0 0 3px 0;}
				.css_disp .gd .demo .cell:nth-child(3n+1):before {background:#b40000;}
				.css_disp .gd .demo .cell:nth-child(3n+2):before {background:#0000f0;}
				.css_disp .gd .demo .cell:nth-child(3n+3):before {background:#00a000;}

				.css_disp .gd .demo .cell .size {opacity:0; position:absolute; width:100%; height:100%; border:1px solid #00000050; box-sizing:border-box;}
					.css_disp .gd .demo .cell .size .toffee {background:#000000; position:absolute; right:2px; bottom:2px; width:4px; height:4px; padding:1px; border:1px solid #000000; background-clip:content-box; cursor:nw-resize;}

				.css_disp .gd .demo .cell:hover .size {opacity:1;}








			/* Направляюшие по Y */
		.css_disp .gd .y {position:relative; width:16px; height:200px;}
			.css_disp .gd .y div {position:absolute; left:0px; top:0px; border:1px solid #00000030; width:16px; height:16px; cursor:pointer; box-sizing:border-box; transition:all 0.3s ease-in-out;}
			.css_disp .gd .y div:before {content:''; position:absolute; top:0px; left:3px; background:#000000; width:8px; height:3px;}
			.css_disp .gd .y div:after {content:''; display:none; position:absolute; top:0px; left:3px; background:#000000; width:8px; height:3px;}

			.css_disp .gd .y .top {border-top:2px solid #000000;}
			.css_disp .gd .y .top:before {}

			.css_disp .gd .y .center {top:93px;}
			.css_disp .gd .y .center:before {height:6px; top:4px;}
			.css_disp .gd .y .center:after {display:block; left:0px; top:6px; width:14px; height:2px;}

			.css_disp .gd .y .bottom {top:186px; border-bottom:2px solid #000000;}
			.css_disp .gd .y .bottom:before {top:10px;}


			.css_disp .gd .y .stretch {top:140px; border-top:1px solid #000000; border-bottom:1px solid #000000;}
			.css_disp .gd .y .stretch:before {top:0px; left:2px; width:3px; height:14px;}
			.css_disp .gd .y .stretch:after {display:block; top:0px; left:9px; width:3px; height:14px;}


				
			.css_disp[items="start"] .gd .y .top,		/* По Y левый край */
			.css_disp[items="center"] .gd .y .center,		/* По Y центр */
			.css_disp[items="end"] .gd .y .bottom,		/* По Y правый край */
			.css_disp[items="stretch"] .gd .y .stretch {background:#00000030;}	/* По Y Растянуть */





			/* Направляюшие по X */
		.css_disp .gd .x {position:relative; height:16px; grid-column-start:1; grid-column-end:3;}
			.css_disp .gd .x div {position:absolute; left:0px; top:0px; border:1px solid #00000030; width:16px; height:16px; cursor:pointer; box-sizing:border-box; transition:all 0.3s ease-in-out;}
			.css_disp .gd .x div:before {content:''; position:absolute; top:3px; left:0px; background:#000000; width:3px; height:8px;}
			.css_disp .gd .x div:after {content:''; display:none; position:absolute; top:3px; left:0px; background:#000000; width:3px; height:8px;}

			.css_disp .gd .x .left {border-left:2px solid #000000;}
			.css_disp .gd .x .left:before {}

			.css_disp .gd .x .center {left:50%; margin-left:-8px;}
			.css_disp .gd .x .center:before {width:6px; left:4px;}
			.css_disp .gd .x .center:after {display:block; left:6px; top:0px; width:2px; height:14px;}

			.css_disp .gd .x .right {left:100%; margin-left:-16px; border-right:2px solid #000000;}
			.css_disp .gd .x .right:before {left:10px;}

			.css_disp .gd .x .around {left:68%; margin-left:-8px; border-left:1px solid #000000; border-right:1px solid #000000;}
			.css_disp .gd .x .around:before {left:2px;}
			.css_disp .gd .x .around:after {display:block; left:9px;}

			.css_disp .gd .x .between {left:83%; margin-left:-8px; border-left:1px solid #000000; border-right:1px solid #000000;}
			.css_disp .gd .x .between:before {left:0px;}
			.css_disp .gd .x .between:after {display:block; left:11px;}




				
			.css_disp[justify="start"] .gd .x .left, 			/* По X левый край */
			.css_disp[justify="center"] .gd .x .center, 			/* По X центр */
			.css_disp[justify="end"] .gd .x .right, 			/* По X правый край */
			.css_disp[justify="space-around"] .gd .x .around, 		/* По X равносторонне отдаление элементов */
			.css_disp[justify="space-between"] .gd .x .between  {background:#00000030;} 	/* По X максимальное отдаление */








.cp_dtl .lsf .f_group > f > .css_disp {margin:-3px 0 -3px -2px;}






.css_shadow {}
	.css_shadow .demo {display:inline-block; width:22px; height:22px; cursor:pointer;}
	.css_shadow[prop='box-shadow'] .demo {background:repeating-linear-gradient(45deg, #00000020 0% 25%, #00000050 25% 50%); width:32px; height:32px; border:1px solid #ffffff; box-sizing:border-box; border-radius:5px;}
	.css_shadow[prop='text-shadow'] .demo {font-size:22px; line-height:22px; text-align:center;}

	.css_shadow .win {display:none; position:fixed; z-index:1000; background:#ffffff; border:2px solid #656565; border-radius:5px; box-shadow:2px 2px 10px 0 #00000090;}
	.css_shadow .dg {display:grid; grid-template-columns:auto;  padding:10px;}

		.css_shadow .dg .in_val {width:35px; height:22px; margin:0px; border:1px solid #888888; padding:0; border-radius:3px; box-sizing:border-box;}
		.css_shadow .dg .in_val::-webkit-outer-spin-button,
		.css_shadow .dg .in_val::-webkit-inner-spin-button {display:none; -webkit-appearance:none; margin:0;}

		.css_shadow .dg > .type {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; padding:0 0 10px 0;}
			.css_shadow .dg > .type div {margin:0 5px 0 0; border:1px solid #888888; padding:3px 7px; border-radius:5px; cursor:pointer;}
			.css_shadow .dg > .type div:last-child {margin:0px;}

			.css_shadow .dg > .type[v="no"] .no,
			.css_shadow .dg > .type[v="inset"] .in,
			.css_shadow .dg > .type[v="outset"] .out {background:#00000030;}

		.css_shadow .dg > .val {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; padding:0 0 10px 0;}
			.css_shadow .dg > .val .t {width:55px; text-align:right; padding:0 5px 0 0;}
			.css_shadow .dg > .val .v {}
			.css_shadow .dg . .val .u {}


.cp_dtl .lsf .f_group > f > .css_shadow {margin:-3px 0 -3px -2px;}





.css_dim {}
	.css_dim * {box-sizing:border-box;}
	.css_dim > .view {display:inline-block; position:relative; background:repeating-linear-gradient(45deg, #00000005 0px 8px, #00000020 8px 16px); border:1px solid #999999; border-radius:0px; width:32px; height:32px; cursor:pointer; box-sizing:border-box;}
		.css_dim > .view div {position:absolute; background:#666666;}
		.css_dim > .view .x {left:1px; right:1px; top:50%; height:2px; margin-top:-1px;}
			.css_dim > .view .x:before {content:''; position:absolute; top:-4px; left:-6px; border:5px solid transparent; border-right:5px solid #666666;}
			.css_dim > .view .x:after {content:''; position:absolute; top:-4px; right:-6px; border:5px solid transparent; border-left:5px solid #666666;}

		.css_dim > .view .y {top:1px; bottom:1px; left:50%; width:2px; margin-left:-1px;}
			.css_dim > .view .y:before {content:''; position:absolute; left:-4px; top:-6px; border:5px solid transparent; border-bottom:5px solid #666666;}
			.css_dim > .view .y:after {content:''; position:absolute; left:-4px; bottom:-6px; border:5px solid transparent; border-top:5px solid #666666;}


	.css_dim .tmpl {display:none;}

	.css_dim .win {display:none; position:fixed; z-index:1000; background:#ffffff; border:1px solid #656565; border-radius:5px; box-shadow:2px 2px 10px 0 #00000090;}
	.css_dim > .dg {display:grid; grid-template-columns:auto; padding:0px;}



	.css_dim .opt {background:repeating-linear-gradient(270deg, #00000000 0px 8px, #00000010 8px 16px), #ffffff; border-bottom:2px solid #00000010; display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; column-gap:20px; padding:5px;}
		.css_dim .opt .prop {display:flex; flex-direction:row; justify-content:center; align-items:center; column-gap:5px;}
			.css_dim .opt .prop .t {}
			.css_dim .opt .prop div[form] {}
			.css_dim .opt .prop[prop="z-index"] {}
			.css_dim[pos="static"] .opt .prop[prop="z-index"] {display:none;}
				.css_dim .opt .prop[prop="z-index"] input {width:50px;}


	.css_dim .css_size {}
		.css_dim .css_size .num {min-width:15px; padding:0px;}
		.css_dim .css_size .unit {min-width:18px;}

		.css_dim .css_size[num="0"] .num {color:#999999; font-size:11px;}
		.css_dim .css_size[num="0"] .unit {color:#999999; font-size:11px;}

		.css_dim .css_size[num="0"] .num:focus,
		.css_dim .css_size[num="0"] .num:focus + .unit,
		.css_dim .css_size[num="0"]:hover .num,
		.css_dim .css_size[num="0"]:hover .unit {color:#000000; font-size:13px;}



	.css_dim .circle {background:#ffffff; display:grid; border:4px solid #000000; grid-template-columns:min-content auto min-content;}
		.css_dim .circle > .side {display:flex;  justify-content:center; align-items:center; padding:2px;}
		.css_dim .circle > .side:hover {backg round:#00000020;}

		.css_dim .circle > .general {padding:0px; flex-direction:row; align-items:stretch; justify-content:flex-start; column-gap:5px;}
		.css_dim .circle > .general:hover {}

			.css_dim .circle > .general .left_cell {display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; width:100%; box-sizing:border-box;}
			.css_dim .circle > .general .main {display:flex; flex-direction:row; align-items:center; justify-content:flex-start;}
			.css_dim .circle > .general .right_cell {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; width:100%;}

			.css_dim .circle > .general .dash {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; box-sizing:border-box; padding:0px 5px;}
			.css_dim .circle > .general .dash:hover {backg round:#00000010;}
				.css_dim .circle > .general .dash .title {white-space:nowrap; padding:5px 8px;}




			.css_dim .circle > .general .chain {display:flex; align-items:center; justify-content:flex-start;}
				.css_dim .circle > .general .chain input {position:absolute; opacity:0; left:-9999px; width:0px; height:0px; margin:0px; border:0px; padding:0px;}
				.css_dim .circle > .general .chain input + label {position:relative; z-index:1; display:inline-block; width:16px; height:16px; color:#000000; font-size:0px; margin:0px; border:0px; padding:0px; border-radius:3px; box-sizing:border-box; cursor:pointer;}
				.css_dim .circle > .general .chain input + label:before {content:''; background:url(/allpack/modules/core/fields/style-web_page/img/ft_dim_chain_off.svg) center no-repeat; position:absolute; z-index:2; top:0px; left:0px; width:16px; height:16px; box-sizing:border-box;}
				.css_dim .circle > .general .chain input:checked + label:before {background:url(/allpack/modules/core/fields/style-web_page/img/ft_dim_chain_on.svg) center no-repeat;}
				.css_dim .circle > .general .chain input:active + label {background:#00000030;}
				.css_dim .circle > .general .chain input:focus + label,
				.css_dim .circle > .general .chain input + label:hover {background:#00000030;}





	.css_dim .circle.chain {bor der-width:0px;}
	.css_dim .circle.chain[prop="border-radius"] {bor der-radius:0px;}
		.css_dim .circle.chain > .general .dash {width:100%;}
		.css_dim .circle.chain > .general .main {display:none;}
		.css_dim .circle.chain > .general .right_cell {display:none;}
		.css_dim .circle.chain > .side {padding:0px;}
		.css_dim .circle.chain > .side[side="1"],
		.css_dim .circle.chain > .side[side="2"],
		.css_dim .circle.chain > .side[side="3"] {opacity:0; overflow:hidden;}

		.css_dim .circle.chain > .side[side="1"],
		.css_dim .circle.chain > .side[side="3"] {width:0px;}

		.css_dim .circle.chain > .side[side="2"] {height:0px;}

		.css_dim .circle.chain[prop="border-radius"] > .side[side="0"],
		.css_dim .circle.chain[prop="border-radius"] > .side[side="1"],
		.css_dim .circle.chain[prop="border-radius"] > .side[side="2"],
		.css_dim .circle.chain[prop="border-radius"] > .side[side="3"] {width:0px; height:0px;}
		.css_dim .circle.chain[prop="border-radius"] > .general .dash {justify-content:flex-start;}







	.css_dim .win .dg > .circle[prop="margin"],
	.css_dim .win .dg > .circle[prop="border"],
	.css_dim .win .dg > .circle[prop="border-radius"],
	.css_dim .win .dg > .circle[prop="padding"] {border-radius:4px;}


	.css_dim .win .dg .circle[prop="pos"] > .general,
	.css_dim .win .dg .circle[prop="margin"] > .general,
	.css_dim .win .dg .circle[prop="border"] > .general,
	.css_dim .win .dg .circle[prop="padding"] > .general,
	.css_dim .win .dg .circle[prop="pos"] > .side[side="2"],
	.css_dim .win .dg .circle[prop="margin"] > .side[side="2"],
	.css_dim .win .dg .circle[prop="border"] > .side[side="2"],
	.css_dim .win .dg .circle[prop="padding"] > .side[side="2"] {grid-column-start:1; grid-column-end:4;}


	.css_dim[pos="static"] .win .dg .circle[prop="pos"] > .side {visibility:hidden; overflow:hidden; width:0; height:0;}



	.css_dim .circle[prop="pos"] {border:0px;}
		.css_dim .circle[prop="pos"] > .general .dash {background:#dcdcdc;}
	.css_dim .circle[prop="margin"] {border-color:#ffb86e;}
		.css_dim .circle[prop="margin"] > .general .dash {background:#f9cc9d90;}
	.css_dim .circle[prop="border"] {border-color:#fddd9b; min-width:200px;}
		.css_dim .circle[prop="border"] > .general .dash {background:#fddd9b90;}
	.css_dim .circle[prop="padding"] {border-color:#c3d08b; min-width:170px;}
		.css_dim .circle[prop="padding"] > .general .dash {background:#c3d08b90}



	.css_dim .circle[prop="border"] .side[side="1"] .css_border,
	.css_dim .circle[prop="border"] .side[side="3"] .css_border {flex-direction:column;}


	.css_dim .circle[prop="border-radius"] {border-color:#c58c8c; border-radius:15px; overflow:hidden;}
		.css_dim .circle[prop="border-radius"] > .general {padding:0px;}
			.css_dim .circle[prop="border-radius"] > .general .dash {background:#c58c8c90; justify-content:center; position:relative; height:100%;}




	.css_dim .circle[hover][prop="margin"] {background:#f9cc9d90;}
	.css_dim .circle[hover][prop="border"] {background:#fddd9b90;}
	.css_dim .circle[hover][prop="border-radius"] {background:#c58c8c90;}
	.css_dim .circle[hover][prop="padding"] {background:#c3d08b90;}


	.css_dim .content {background:repeating-linear-gradient(45deg, #00000000 0px 8px, #00000015 8px 16px), #ffffff; display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; row-gap:10px; border:2px solid #999999; border-radius:4px; height:100%; padding:2px;}
		.css_dim .content .size_box {display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; row-gap:10px;}
			.css_dim .content .size_box .size_w,
			.css_dim .content .size_box .size_h,
			.css_dim .content .size_box .size_b {display:flex; flex-direction:row; column-gap:3px; justify-content:flex-start; align-items:flex-start;}
			.css_dim .content .size_box .size {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; padding:0 5px;}
			.css_dim .content .size_box .t {padding:2px 2px 2px 0; min-width:17px; text-align:right; box-sizing:border-box;}

			.css_dim .content .size_box .mode {padding-top:2px; opacity:0.5;}
			.css_dim .content .size_box .mode[onclick] {cursor:pointer; opacity:1;}
			.css_dim .content .size_box .mode:before {content:""; display:block; width:16px; height:16px;}
			.css_dim .content .size_box .mode.m_one:before{background:url(/allpack/modules/core/fields/style-web_page/img/ft_dim_switch.svg) 0px 0px;}
			.css_dim .content .size_box .mode.m_range:before{background:url(/allpack/modules/core/fields/style-web_page/img/ft_dim_switch.svg) -16px 0px;}

			.css_dim .content .size_box .mode.m_one ~ .range {display:none;}
			.css_dim .content .size_box .mode.m_range ~ .one {}

			.css_dim .content .size_box .range {display:flex; flex-direction:column; row-gap:3px;}

		.css_dim .content .pos_box {}


.cp_dtl .lsf .f_group > f > .css_dim {margin:-3px 0 -3px -2px;}










.css_ico {}
	.css_ico .ico {background:#ffffff url(/allpack/modules/core/fields/style-web_page/img/ft_ico_ico.svg) center center no-repeat; width:32px; height:32px; border:0; border-radius:5px; box-sizing:border-box; cursor:pointer; overflow:hidden;}


	.css_ico .win {display:none; position:fixed; z-index:1000; background:#ffffff; border:2px solid #656565; border-radius:5px; box-shadow:2px 2px 10px 0 #00000090;}

		.css_ico > .win > .dg {display:flex; flex-direction:column; row-gap:0px;}
			.css_ico > .win > .dg > div {padding:10px 15px 10px 15px;}
			.css_ico > .win > .dg > div:first-child {padding-bottom:15px;}
			.css_ico > .win > .dg > div:nth-child(2n) {background:rgba(0,0,0,0.05);}
    		.css_ico > .win > .dg > div:last-child {padding-bottom:25px;}


			.css_ico .win .dg .area {display:flex; align-items:flex-start; justify-content:flex-start; column-gap:15px;}
				.css_ico .win .dg .area .prop {display:flex; flex-direction:column;}
				.css_ico .win .dg .area .prop:first-child {padding-left:19px;}
					.css_ico .win .dg .area .prop .title {padding:0 0 4px 0;}
					.css_ico .win .dg .area .prop .in {display:flex; align-content:flex-start; justify-content:flex-start;}



.cp_dtl .lsf .f_group > f > .css_ico {margin:-3px 0 -3px -2px;}












.css_font {}
	.css_font .ico {background:#ffffff url(/allpack/modules/core/fields/style-web_page/img/ft_font_ico.svg) center center no-repeat; width:32px; height:32px; border:2px solid #bbbbbb; border-radius:5px; box-sizing:border-box; cursor:pointer; overflow:hidden;}


	.css_font .win {display:none; position:fixed; z-index:1000; background:#ffffff; border:2px solid #656565; border-radius:5px; box-shadow:2px 2px 10px 0 #00000090;}

		.css_font > .win > .dg {display:flex; flex-direction:column; row-gap:0px;}

			.css_font .win .dg .area_font {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; column-gap:5px; padding:20px 25px;}
				.css_font .win .dg .area_font .prop {display:flex; flex-direction:row; align-items:center; column-gap:5px;}
				.css_font .win .dg .area_font .prop:first-child {padding-left:19px;}
				.css_font .win .dg .area_font .prop[prop="font-size"] {padding:0px 5px;}
				.css_font .win .dg .area_font .prop[prop="text-shadow"] {padding:0px 0px 0px 20px;}
				.css_font .win .dg .area_font .prop[prop="line-height"] {padding:0px 0px 0px 20px;}
				.css_font .win .dg .area_font .prop[prop="letter-spacing"] {padding:0px 0px 0px 20px;}
					.css_font .win .dg .area_font .prop .title {padding:0;}
					.css_font .win .dg .area_font .prop .in {display:flex; align-content:flex-start; justify-content:flex-start;}



.cp_dtl .lsf .f_group > f > .css_font {margin:-3px 0 -3px -2px;}









.css_other {}
	.css_other .ico {display:flex; align-items:center; justify-content:center; background:#ffffff; width:32px; height:32px; border:0; border-radius:5px; box-sizing:border-box; cursor:pointer; overflow:hidden;}
		.css_other .ico .tch {background:#555555; position:relative; width:4px; height:4px; border-radius:100%;}
		.css_other .ico .tch:before,
		.css_other .ico .tch:after {content:""; background:#555555; position:absolute; width:4px; height:4px; border-radius:100%;}

		.css_other .ico .tch:before {left:-8px;}
		.css_other .ico .tch:after {right:-8px;}

	.css_other .win {display:none; position:fixed; z-index:1000; background:#ffffff; border:2px solid #656565; border-radius:5px; box-shadow:2px 2px 10px 0 #00000090;}

		.css_other > .win > .dg {display:flex; flex-direction:column; row-gap:0px;}
			.css_other > .win > .dg > div {padding:10px 15px 10px 15px;}
			.css_other > .win > .dg > div:first-child {padding-bottom:15px;}
			.css_other > .win > .dg > div:nth-child(2n) {background:rgba(0,0,0,0.05);}
    		.css_other > .win > .dg > div:last-child {padding-bottom:25px;}


			.css_other .win .dg .area {display:flex; align-items:flex-start; justify-content:flex-start; column-gap:15px;}
				.css_other .win .dg .area .prop {display:flex; flex-direction:column;}
				.css_other .win .dg .area .prop:first-child {padding-left:19px;}
					.css_other .win .dg .area .prop .title {padding:0 0 4px 0;}
					.css_other .win .dg .area .prop .in {display:flex; align-content:flex-start; justify-content:flex-start;}






.css_transition {display:flex; flex-direction:row; align-items:flex-end; justify-content:flex-start; height:19px;}
	.css_transition .num {display:flex; align-items:center; justify-content:flex-end; font-size:13px; line-height:100%; padding:0 2px; min-width:20px; cursor:text; border-radius:3px; box-sizing:border-box;}
	.css_transition .num:hover {box-shadow:0px 0px 1px 1px #00000060;}
	.css_transition .num:focus {box-shadow:0px 0px 1px 2px #ff0000b0; outline:none;}


.cp_dtl .lsf .f_group > f > .css_transition {margin:-3px 0 -3px -2px;}



.css_transform {display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;}
	.css_transform .fn {display:flex; padding:5px 0px 5px 15px;}
	

	.css_transform .num {display:flex; align-items:center; justify-content:flex-end; font-size:13px; line-height:100%; padding:0 2px; min-width:20px; cursor:text; border-radius:3px; box-sizing:border-box;}
	.css_transform .num:hover {box-shadow:0px 0px 1px 1px #00000060;}
	.css_transform .num:focus {box-shadow:0px 0px 1px 2px #ff0000b0; outline:none;}


.cp_dtl .lsf .f_group > f > .css_transform {margin:-3px 0 -3px -2px;}




.css_filter {display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;}
	.css_filter .fn {display:flex; padding:5px 0px 5px 15px;}
	

	.css_filter .num {display:flex; align-items:center; justify-content:flex-end; font-size:13px; line-height:100%; padding:0 2px; min-width:20px; cursor:text; border-radius:3px; box-sizing:border-box;}
	.css_filter .num:hover {box-shadow:0px 0px 1px 1px #00000060;}
	.css_filter .num:focus {box-shadow:0px 0px 1px 2px #ff0000b0; outline:none;}


.cp_dtl .lsf .f_group > f > .css_filter {margin:-3px 0 -3px -2px;}