@images:"../img/";

@import "omnia.less";

/* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}


// Styles ----------------------------------------------------

// Colors

@col-white-50:rgba(255, 255, 255, .5);
@col-green:#7ab51d;
@col-green-dark:#588215;
@col-blue:#0046aa;
@col-blue-3:rgba(0, 70, 170, .03);
@col-blue-5:rgba(0, 70, 170, .05);
@col-blue-10:rgba(0, 70, 170, .1);
@col-blue-10-flat:mix(@col-blue, white, 10%);
@col-blue-15:rgba(0, 70, 170, .15);
@col-blue-25:rgba(0, 70, 170, .25);
@col-blue-35:rgba(0, 70, 170, .35);
@col-blue-50:rgba(0, 70, 170, .5);
@col-blue-50-flat:rgba(127, 162, 212, 1);
@col-blue-50-flat-50:rgba(127, 162, 212, .5);
@col-blue-50-flat-75:rgba(127, 162, 212, .75);
@col-blue-66:rgba(0, 70, 170, .66);
@col-blue-75:rgba(0, 70, 170, .75);
@col-grey-dark:#4B4B4D;
@col-grey-medium-1:#A5A5A6;
@col-grey-medium-2:#D2D2D2;
@col-grey-light:#E4E4E4;
@col-grey-transparent:#f0f0f0;
@col-red:#C1002B;
@col-red-50:rgba(193, 0, 43, .5);
@col-yellow:#FFDD00;
@col-edit:#af00af; //#0046aa; //#ff00ff;
@col-edit-back:rgba(176, 0, 176, .1); //mix(@col-edit, white, 10%); //@col-blue-10; //rgba(255, 0, 255, .10);

.col-white { color:white; }
.col-blue { color:@col-blue; }
.col-blue-25 { color:@col-blue-25; }
.col-blue-35 { color:@col-blue-35; }
.col-blue-50 { color:@col-blue-50; }
.col-edit { color:@col-edit; }
.back-white { background-color:#fff; }
.back-white-95 { background-color:rgba(255, 255, 255, .95); }
.back-blue { background-color:@col-blue; }
.back-blue-10 { background-color:@col-blue-10; }
.back-blue-15 { background-color:@col-blue-15; }
.back-blue-25 { background-color:@col-blue-25; }
.back-blue-35 { background-color:@col-blue-35; }
.back-blue-50 { background-color:@col-blue-50; }
.back-green { background-color:@col-green; }
.back-yellow { background-color:@col-yellow; }
.back-red { background-color:@col-red; }
.back-edit { background:@col-edit-back; }

// Fonts

.font { font-family:'Open Sans' !important; font-size:14px !important; font-weight:300 !important; }
.font-icon { font-family:FontAwesome; }
.fw-font-payback-light { 
	font-family:'PAYBACKLight', 'Open Sans', Helvetica, Arial; 
	&.fw-h0 { font-size:64px !important; }
	&.fw-h1 { font-size:48px !important; }
	&.fw-h2 { font-size:32px !important; }
	&.fw-h3 { font-size:24px !important; }
	&.fw-h4 { font-size:18px !important; }
};

// Borders

.radius { border-radius:2px; }
.shadow-low { box-shadow:0 2px 4px @col-blue-10; }
.shadow-low-2 { box-shadow:0 1px 6px @col-blue-25; }
.shadow { box-shadow:0px 2px 40px rgba(0, 0, 0, .25); }
.shadow-blue { box-shadow:0px 2px 40px rgba(0, 70, 170, .25); }
.noshadow { box-shadow:none !important; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; }
.border-trans { border:1px solid transparent; }
.border-edit { _box-shadow:0 2px 3px @col-blue-10; .radius; border:1px solid @col-blue-15; _border:1px dashed @col-edit !important; }
.border-blue-25 { border:1px solid @col-blue-25; }

// Sizes

.svg { background-position:0 0; background-size:100% 100%;  }
.s24 { width:24px; height:24px; }
.s32 { width:32px; height:32px; }
.s48 { width:48px; height:32px; }
.s60 { width:60px; height:32px; }
.nopaddingleft { padding-left:0 !important; padding-right:5px !important; }
.ml0 { margin-left:0; }
.mr0 { margin-right:0; }
.mlr0 { .ml0; .mr0; }
.p10 { padding:10px; }
.pt10 { padding-top:10px; }
.pl0 { padding-left:0; }
.pl10 { padding-left:10px; }
.pb10 { padding-bottom:10px; }
.pr0 { padding-right:0; }
.pr10 { padding-right:10px; }
.plr0 { .pl0; .pr0; }

.flex-col { display:flex; flex-direction:column; }
.flex-row { display:flex; flex-direction:row; }
.flex-vmiddle { display:flex; align-items:center; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-cell { flex:auto; }

.col-md-offset-right-1 { @media(min-width: 992px) { margin-right: 8.33333333%; } }

// Icons

.pb-logo { .svg; width:280px; height:100px; background-image:url('@{images}logo-payback.svg'); }
.icon-sunglass-blue { .block; .s48; height:16px; background:url('@{images}icon-glasses-blue.svg'); .svg; }
.icon-sunglass-lightblue { .block; .s48; height:16px; background:url('@{images}icon-glasses-lightblue.svg'); .svg; }

// General

.tt {
	height:539px; _background:#404040;
	.bar { bottom:calc(667px - 539px); }
}

* { .border-inside; }

html, body { width:100%; height:100%; overflow:hidden; position:fixed; }
html { .cropped; touch-action:manipulation; }
body { .m0; height:100vh; line-height:1; }


// Elements ----------------------------------------------------

.icon { .font-icon; margin-right:10px; }
.nobreak {
	* { display:inline; }
	br { .hidden; }
}
.ui { 
	.inline; .vtop; .font; .cropped; .radius; padding:0px 12px 0px 12px; .nohighlightcolor; border:0; line-height:15px; height:35px; margin-bottom:10px;
	&.left { border-top-right-radius:0; border-bottom-right-radius:0; margin-right:0; border-right:0; }
	&.middle { .left; border-radius:0; }
	&.right { border-top-left-radius:0; border-bottom-left-radius:0; }
	&.right.last { margin-right:0; }
	&.space { padding-right:10px; }
	
	&:focus, &:active { outline:none !important; }
}
.button-group-label { .ui; .mr0; .col-blue-35; line-height:35px; padding-left:10px; padding-right:10px; }
.button { 
	.ui; .hcenter; .hand; .inline; .col-blue; background:transparent; border:1px solid @col-blue-25; text-shadow:none; box-shadow:none;
	&:hover { .col-blue; .back-blue-15; }

	&.frameless { border:0; }
	&.blue { 
		color:white; .back-blue; border:0;
		i { color:white; }
		&:hover { background:#000; color:white; }
	}
	&.green { 
		color:white; background:@col-green; border:0;
		i { color:white; }
		&:hover { background:@col-green-dark; color:white !important; }
	}
	&.red { 
		color:white; background:@col-red; border:0;
		i { color:white; }
		&:hover { background:#000; color:white; }
	}
	
	i:first-child { margin-right:10px; }
	i.icon-only { .m0; }
	
	&.inactive { .col-blue-25; }
	&.active { 
		.col-blue; .back-blue-10;
		&:hover { .back-blue-35; }
	}
	&.toggle { box-shadow:none; margin-right:1px; }
	&.fw-square { 
		min-width:100px; min-height:80px; .hcenter; align-items:center; justify-content:center; _border:1px solid @col-blue-10; margin-right:5px; margin-bottom:5px;
		i { .block; margin:0 0 10px 0; }
		span { .block; }
	}
}
.input { 
	.ui; border:1px solid @col-blue-25; .noshadow; color:@col-blue;
	&:focus, &:active { .noshadow; border:1px solid @col-blue; }
	&::-webkit-input-placeholder { .noshadow; line-height:20px; color:@col-blue-35; }
}
.sep { .ui; border-right:1px solid @col-blue-10; border-radius:0; margin-right:10px; padding:0; margin-left:10px; width:1px; }
.fw-tags { 
	margin-top:5px;
	* { .font; .noshadow; color:@col-blue; .radius; }
	.fw-tags-view { 
		.fw-tag { 
			.inline; .back-blue-10; .border-blue-25; padding:5px 10px 5px 10px; margin-right:5px; border-radius:4px; font-weight:600;
			&.fw-black { background-color:black !important; border:1px solid transparent !important }
			&.fw-green { background-color:@col-green !important; border:1px solid transparent !important; }
			&.fw-yellow { background-color:@col-yellow !important; border:1px solid transparent !important; color:black !important; }
			&.fw-red { background-color:@col-red !important; border:1px solid transparent !important }
			//&:before { content:'#'; margin-right:3px; }
		}
	}
	.fw-tags-inputwrapper {
		.hidden;

		.form-control { 
			border:0; padding:0; margin-top:1px; .nowrap;
		}

		input { 
			height:25px !important; _margin-left:5px;
			&:focus, &:active { .noshadow; }
			&::-webkit-input-placeholder { .noshadow; color:@col-blue-35; }
		}

		.token { 
			.back-blue-15; .inline; height:24px; border-radius:4px; border-color:transparent;
			*:focus { outline:0; }
			//&:before { content:'#'; margin-left:10px; line-height:23px; }
			
			.token-label { _padding-left:5px; line-height:24px; }
			.close { 
				padding-right:10px; .col-blue; line-height:25px; text-shadow:none; opacity:1;
				&:hover { color:black; }
			}
			&:hover { border-color:transparent; }
			&.active { .back-blue-35; border-color:transparent; }
		}
		
		.token + input { margin-left:3px; }
	}
	
	&.fw-dark {
		.fw-tags-view .fw-tag,
		.form-control .token { 
			.back-blue; color:white; border:1px solid rgba(255, 255, 255, .35); _background:rgba(255, 255, 255, .5); 
			&:before { color:rgba(255, 255, 255, .5); }
		}
		
		.form-control {
			background:transparent;
			input { 
				.col-white; 
				&::-webkit-input-placeholder { color:rgba(255, 255, 255, .5); }
			}
			.token {
				height:26px; padding:0;
				&:before { margin-left:8px; }
				.token-label { .col-white; padding:0; padding-left:10px; }
				.close { 
					color:rgba(255, 255, 255, .5); 
					&:hover { .col-white; }
				}
				&:hover {  }
				&.active { background:rgba(255, 255, 255, .25); .col-blue; }
			}
		}
	}
}
.fw-tree {
	ul { padding:0; padding-left:0; margin-top:1px; }
	li { 
		.col-blue; .hand; .radius; .nobullets; margin-left:0; line-height:30px; margin-top:1px;
		.text {
			padding:3px 15px 3px 15px;
			i { margin-right:10px; .col-blue-50;}
			&:hover { .back-blue-10; }
		}
		&.active > .text { background:white; color:black; }
	}
	li:not(.parent):not(.active) > ul { .hidden; }
	//li.parent > .files { .hidden; }
}
.fw-files { 
	.rel; padding-top:20px; 
	
	.fw-item { 
		.rel; transition: all 0.1s ease; border-radius:4px; overflow:hidden; text-decoration:none; .vtop; .hand; .inline; background-repeat:no-repeat; color:@col-blue; margin:0 20px 20px 0; width:200px; height:135px; padding:135px 0px 0 0px; .font; font-size:14px !important;
		&:hover { background-color:@col-blue-5; padding:100px 10px 10px 10px; margin:-10px 10px 10px -10px; width:220px; height:155px; background-position:10px 10px; }

		.text { .cropped; background:rgba(255, 255, 255, .85); border:1px solid @col-blue-10; height:46px; padding:13px 20px 10px 20px; color:@col-blue; }

		&:not(.fw-file-image) {
			padding-top:95px; 
			&:hover { padding-top:105px; }
			.text { background:transparent; color:@col-blue; padding-top:8px; border:0; }
		}
		&.folder { background-image:url("@{images}folder.svg"); }
		&.file { background-image:url("@{images}image.svg"); }
		&.brand { background-image:url("@{images}folder-logo.png"); color:white; }
		&.pointee { background-image:url("@{images}folder-pointee.png"); color:white; }
		
		
		//&.file:hover { color:@col-blue; background-image:none !important; }
		
		.sub { font-size:12px; margin-bottom:5px; }
		
		//&:before { content:''; background:rgba(255, 255, 255, .8); .abs; .block; width:200px; height:35px; .l0; top:100px; }
	
		@media(max-width:767px) {
			.inline; width:147.5px; height:99.5625px; background-size:147.5px 99.5625px; padding-top:60px;
			&:hover { padding-top:70px; }
		}
	}
	&.edit {
		.fw-item {
			&:hover { 
				background-color:transparent; 
			}
		}
	}	
}

// Components ----------------------------------------------------

.header { 
	position:fixed !important; .w100; margin-left:0; margin-right:0; z-index:1000; .t0; background:rgba(255, 255, 255, 1); height:55px; border-bottom:1px solid rgba(0, 70, 170, .1);
	
	& > * { height:55px; .pt10; }
	* { .vtop; }
	
	.logo { .pb-logo; .inline; .hand; height:35px; width:98px; margin-right:5px; }
	.title-col { padding-left:0; padding-right:0; .cropped; }
	.title { 
		.inline; .nowrap; 
		.slash { 
			.ui; line-height:35px; padding-left:1px; padding-right:1px; color:@col-blue-25; 
			i { line-height:37px; } 
		}
		.title { color:black; }
		.button-group-label { padding-left:12px; padding-right:12px; }
	}
	.fw-search { 
		.nowrap; .hidden; .vtop; height:35px; width:~"calc(100% - 170px)";
		input { width:~"calc(100% - 40px)"; margin-left:1px; }
		&.shown { .inline; }
	}
	.fw-mode { .inline; }
	.label { color:@col-blue !important; }

	.blue {
		background:@col-blue;
		.button, .btn { 
			color:rgba(255, 255, 255, .5); 
			&:hover { color:white; background:rgba(255, 255, 255, .1); }
		}
		.slash,
		.title { color:rgba(255, 255, 255, .5); }
		.sep { border-right:1px solid rgba(255, 255, 255, .25); }
	}

	.button, .btn { margin-bottom:0 !important; }
}
.bar { .back-white; .pt10; .hcenter; .b0; }
.comp { 
	margin-top:30px; 
	.fw-comp-frame { border:1px solid transparent; }
	.data-text { _min-height:35px !important; }
	
	&.edit { 
		margin-top:50px;
		.fw-comp-frame { 
			border:1px solid transparent; margin-right:30px !important; background:rgba(255, 255, 255, .8); min-height:35px !important;
			&:hover {
				.radius; .border-edit;
				.fw-menu-local { .block; }
			}
		}
		.data-text:hover { .back-edit; }
		.fw-tags-view { .hidden; }
		.fw-tags-inputwrapper { .block; }
	}
}
.fw-sidemenu {
	.fixed; padding-top:54px; padding-left:0px; padding-right:0px; height:200%; z-index:10; width:300px; left:-240px; .hand; transition: all 0.1s ease; 
	
	.fw-overlay { background:rgba(0, 70, 170, .05); border-right:1px solid @col-blue-10; min-height:100%; width:255px; padding-right:15px; }
	
	//.menu { .abs; top:55px; .w100; .hright; padding-right:15px; }

	&.open { 
		left:0;
		.fw-overlay { padding-right:0; background:rgba(229, 236, 246, .95); }
	}

	&.edit {
		.fw-overlay { padding:5px 25px 5px 5px; }
		.text {
			.border-trans;
			&:hover { 
				.col-edit; .back-edit; .border-edit; 
				i { .col-edit; }
				&:after { .abs; right:65px; .font-icon; content:"\f256"; }
			}
		}
		
		&.open { 
			.fw-overlay { padding-right:5px; }
		}
	}
}

.buffet {
	background:@col-blue-10; padding-top:54px; min-height:100%;
	.item { .inline; .p10; .cropped; .radius; width:100px; height:100px; background:white; margin-right:10px; margin-top:10px; border:1px dashed @col-blue; }
}
.fw-drag-item {
	.border-edit; .back-edit;
	img { zoom:.25; }
}

// Bootstrap Theme

.btn { 
	.button; 
	//&.active,
	//&:active { background:white !important; }
	&.btn-default { .frameless; }
	&.btn-primary { .green; }
	&.btn-danger { .red; }
}
.nav-tabs {
	border-bottom:1px solid @col-blue-25 !important;
	li.active a { border:1px solid @col-blue-25 !important; border-bottom:1px solid transparent !important; }
	li:not(.active) a:hover { background-color:@col-blue-10; border-bottom:1px solid transparent !important; }
}
.row { .rel; .border-inside; margin-right:0; margin-left:0; }
.modal-header { padding:15px 15px 10px 15px; border-bottom:1px solid @col-blue-15; }
.modal-body { padding:10px 15px 10px 15px; }
.modal-title { .fw-font-payback-light; .fw-h4; .col-blue; }
.modal-footer { padding:10px 15px 0px 15px; border-top:1px solid @col-blue-15; }
.modal-content { .radius; border-radius:4px; box-shadow:none; -webkit-box-shadow:none; border:none; .shadow-blue; }
.modal-backdrop { .back-blue; }
.dropdown { ul { .shadow-low; } }

// Modules ----------------------------------------------------

.components { .hidden; }

.get { 
	.rel; .flex-col; .h100;
	
	.header > .title { .hidden; }

	.bar { margin-top:55px; margin-bottom:-55px; z-index:10; }

	.content {
		.rel; .w100; .scrollable; .back-white; height:~"calc(100% - 55px)"; padding-bottom:100px; border-top:55px solid transparent; _padding-top:55px; min-height:100%; padding-left:0; padding-right:0;

		.fw-menu-local {
			.hidden; .abs; .t00; .hright; width:80px; left:~"calc(100% - 80px)"; height:35px; z-index:3; padding-right:0px; background:rgba(255, 255, 255, .9);
			.drag i { line-height:35px !important; }
			.btn, .button { 
				.col-edit; border-radius:0;
				&:hover { .back-edit; }
			}
		}
		.fw-add {
			.hidden; .abs; .w100; top:100%; height:65px; margin-top:7px;
			&.edit { 
				.hand; border:0; display:block; .hright;
				.handle { 
					.font; .col-edit; .hleft; .border-trans; margin-top:0px; height:37px; padding-right:0px; 
					& > * { 
						&:first-child { color:@col-blue-25; margin-left:-12px; }
						&:not(:first-child) { .hidden; }
					}
					& > button:first-child { color:@col-blue-25; margin-left:-12px; }
					button { border-radius:0; }
					& > * { .inline; .vtop; height:35px; line-height:35px; }
					.text { 
						.inline; margin-right:10px; color:@col-edit; 
						i { margin-right:10px; }
					}
					.btn, .button { 
						color:@col-edit; 
						&:hover,
						&:active { background:@col-edit-back; }
					}
					.fw-grid-dropdown {
						width:178px;
						.fw-line { padding-left:5px; }
						.fw-cell { .inline; border:1px solid @col-blue-25; width:15px; height:15px; margin-right:2px; margin-bottom:2px; line-height:0; }
					}
				}
				&:hover > .handle { 
					.radius; .border-edit; z-index:4; background:rgba(255, 255, 255, .9);
					& > * { 
						.col-edit; .inline; 
						&:first-child { .hidden; }
					}
				}
			}
		}
		.fw-add-dialog { .hidden; }
		
		.fw-comp-stage { 
			.flex-vmiddle; .back-blue-10; background-image:url("@{images}scissors.jpg"); background-size:cover; background-position:top left; .hidden; 

			.controls {
				.back-white; .inline; .radius; .shadow; .pt10;
				
				ul { margin-bottom:10px; }
				.upload {
					.file-button { .abs; opacity:0; width:0; height:0; }
					label { line-height:35px !important; }
				}
				
				.search {
					.pb10;
					span button { margin:0 !important; }
				}
				
				.fw-fail {
					.hidden; padding:20px 0 20px 0; text-align:center !important;
					img { margin-bottom:20px; }
				}
			}
		}
		.fw-comp-header { 
			.comp; .back-blue; .fw-font-payback-light; .fw-h1; height:220px; padding-top:140px; margin-top:0 !important; border-bottom:1px solid @col-blue-10;
			@media(min-width:768px) and (max-width:991px) { height:150px; padding-top:90px; .fw-h2; }
			@media(max-width:767px) { height:100px; padding-top:50px; .fw-h2; }
			
			.fw-title { 
				.nobreak; color:white;
				@media(min-width:768px) and (max-width:991px) { padding-left:45px; padding-right:45px; }
				@media(max-width:767px) { padding-left:35px; padding-right:35px; }
			}

			&.edit {
				_padding-top:120px; 
				.fw-title:hover { background:rgba(255, 255, 255, .2); }
			}
			&.edit,
			&.fw-hastags { padding-top:115px; }
		}
		.fw-comp-headline { 
			.comp; .fw-font-payback-light;
			&.fw-h2 .text { border-bottom:1px solid @col-grey-medium-2; .col-blue; line-height:40px; }
			&.fw-h3 .text { border-bottom:1px solid @col-grey-medium-2; line-height:35px; }
			&.fw-h4 .text { font-size:20px; line-height:35px; }
			& + .fw-comp-headline { margin-top:20px; }
			
			/*@media(max-width:767px) { 
				&.fw-h2,
				&.fw-h3 { 
					.pt10; margin-bottom:-20px; padding-top:20px; border-top:1px solid @col-blue-15; 
					.text { border:0; }
				}
				&.fw-h2 { border-top-width:5px; margin-bottom:-30px; }
				& + .fw-comp-headline { margin-top:30px; }
			}*/
			
			&.edit { 
				& + .fw-comp-headline { margin-top:50px; }
			}
			.fw-menu-local { 
				width:250px !important; left:~"calc(100% - 250px)" !important; .cropped;
				& > div { .inline; }
			}
		}
		.fw-comp-text {
			.comp; color:@col-grey-dark; font-size:16px; line-height:24px;
			.text { padding-left:0; }
		}
		.fw-comp-image {
			.fw-image {
				.fw-image-row { 
					margin-right:-15px; min-height:150px; padding-top:10px; 
					.fw-placeholder { 
						.rel; .inline; .hand; .vtop; min-height:150px; color:transparent; padding:0 15px 10px 0;
						
						.fw-info { 
							.block; .w100; min-height:150px; .flex-vmiddle; justify-content:center; color:@col-grey-medium-2; border:1px dashed @col-grey-medium-2; font-style:italic; 
							&.fw-filled { justify-content:left; border:0; }
						}
						
						//&.fw-empty { .hidden; }
					}
				}
				//& > * { .vmiddle; }
				img { .inline; max-width:100%; border:1px solid @col-blue-25; }
				.add { 
					.hidden; width:200px; height:200px; border:1px dashed @col-edit; line-height:200px; color:@col-edit; .hcenter; 
					&:hover { background:@col-edit-back; }
				}
			}	
			&.edit {
				.fw-image {
					.fw-image-row { 
						padding-top:40px; 
						
						.fw-placeholder { 
							.fw-info {
								color:@col-edit; border:1px dashed @col-edit;
								
								&:hover { .back-edit; }
							}

							&.fw-empty { .inline; }
						}
					}
					.add { .inline; }
					//max-height:400px; .cropped; 
					//img { height:400px; }
				}
				&:hover {
					img { _border:1px dashed @col-blue-25; }
				}
			}
			.fw-menu-local { 
				width:380px !important; left:~"calc(100% - 380px)" !important; 
				& > div { .inline; }
			}
		}
		.fw-comp-loading {
			.comp; color:@col-blue; font-size:16px; line-height:24px;
			i { font-size:14px; margin-right:5px; }
		}
		.fw-comp-files {
			.comp; 
			.fw-comp-frame { 
				padding-top:10px;
				.fw-files; 
			}
			
			/*.item { 
				text-decoration:none; .vtop; .hand; .inline; background-repeat:no-repeat; background-size:200px 135px; color:@col-blue; margin:0 20px 10px 0; width:200px; height:135px; padding:95px 10px 0 20px; .font; font-size:16px !important;

				&:hover { background-color:@col-blue-5; padding:105px 20px 10px 30px; margin:-10px 10px 0px -10px; width:220px; height:155px; background-position:10px 10px; }

				&.folder { background-image:url("@{images}folder.svg"); }
				&.file { background-image:url("@{images}image.svg"); }
				&.brand { background-image:url("@{images}folder-logo.png"); color:white; }
				&.pointee { background-image:url("@{images}folder-pointee.png"); color:white; }
				
				.sub { font-size:12px; margin-bottom:5px; }
			
				@media(max-width:767px) {
					.inline; width:147.5px; height:99.5625px; background-size:147.5px 99.5625px; padding-top:60px;
					&:hover { padding-top:70px; }
				}
			}
			&.edit {
				.item {
					&:hover { background-color:transparent; }
				}
			}*/	
		}
		.fw-comp-stage {
			display:flex; height:30%; margin-top:0 !important; 
			@media(max-width:767px) { height:280px; }
			.search { 
				button { margin-top:10px; margin-bottom:0; }
			}
			&.unique { .h100; }
		}
		.fw-comp-table {
			.fw-comp-frame { 
				height:200px; 

				.fw-menu-local { 
					width:380px !important; left:~"calc(100% - 380px)" !important; 
					& > div { .inline; }
				}
			}
		}
		
		&.edit {
			//background-color:white; background-image:repeating-linear-gradient(45deg, transparent, transparent 35px, @col-blue-10 35px, @col-blue-10 70px); background-repeat:no-repeat; background-size:50px 100%;
		
			.comp:last-child {
				.fw-add {
					_height:55px;
					.handle { opacity:1; _margin-top:20px; }
				}
			}
		}
		
		&.drag {
			.fw-add .handle { opacity:0; }
		}
	}

}

.editor {
	.h100; .flex-col; .hidden;
	.view { 
		.h100; .flex-col; padding-top:55px;
		.canvas {
			.scrollable; .back-blue-10; .flex-cell;
			
			.crop-wrapper img { height:100%; }
			.output-wrapper {
				.back-white;
				.output { -webkit-transform-origin:top left; }
				&.z50 {
					width:960px; height:540px; .cropped;
					.output { -webkit-transform:scale(.5); }
				}
			}
		}
		.bar { }
	}
	.view-crop { .hidden; }
	.view-view { display:flex; }
}