/*
	persP Reader 	v0.1
	version:		1
*/


@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');



/* ##################### */
/* ##################### */



::-webkit-scrollbar { 
  display: none; 
}

*:focus {outline:0}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}



::placeholder {
	opacity: .3;
}


/* ##################### */
/* ##################### */


#app {
	--background-app: #222;
	
	--accent-base: 80, 127, 131;
	
	--accent: rgb(var(--accent-base));
	--accent2: #5AD4DE;
	
	--error: #ff4343;
}

#app.white {
	--background-app: #ccc;
	--accent: #7F8350;
	--accent2: #5AD4DE;
}




















html, body, input, select, textarea, *:after, *:before {
	font-family: 'Nunito Sans', sans-serif;
}

html, body {
	padding: 0;
	margin: 0;
	
	position: fixed;
	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	overflow: hidden;
}


/* ##################### */
/* ##################### */


.white-space {
	flex: 1;
	
	min-width: 150px;
}

.white-space-colum {
	flex: 1;
}

.white-space-small-colum {
	flex: 0.1;
}

.flex-center {
	display: flex;
	
	align-items: center;
  justify-content: center;
}

.flex-vertical {
	display: flex;
	
	align-items: center;
}
.flex-end {
	display: flex;
	
	align-items: center;
	justify-content: flex-end;
}


/* ##################### */
/* ##################### */




/* ##################### */
/* ##################### */


.panels,
.option-box > div,
#login > div > div > .login-box {
	border-radius: 6px;
	
	padding: 0 8px 0 5px;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#444444+0,3d3d3d+100 */
	background: #444444; /* Old browsers */
	background: -moz-linear-gradient(top, #444444 0%, #3d3d3d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #444444 0%,#3d3d3d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #444444 0%,#3d3d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */
	
	box-shadow: 0 0 6px rgba(0,0,0,.5);
}


/* ##################### */
/* ##################### */

#login {
	position: fixed;
	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	overflow: hidden;
	
	display: flex;
	
	display: none;
	display: block;
	
	background: var(--background-app);
	
	z-index: 50;
}
	
	#login > div {
		position: relative;
		
		width: 100%;
		height: 100%;
	}
	
		#login > div >.bgima {
			width: 100%;
			height: 100%;
			
			background: var(--background-app);
			
			background-image: url("https://source.unsplash.com/300x150/daily");
		
			filter: brightness(60%) contrast(200%) grayscale(95%) blur(5px) opacity(50%);
		  
		  background-position: center center;
		  background-repeat: no-repeat;
		  background-size: cover;
		  
		  opacity: .3;
		}
		
		#login > div > div {
			position: absolute;
			
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			
			overflow: none;
		}
			
			#login > div > div > .login-box {
				width: 300px;
				
				border-radius: 16px;
				
				padding: 0;
				
				box-shadow: 0 3px 10px 0 rgba(0,0,0,.7), 
										0 20px 40px 0 rgba(0,0,0,.15);
				
				-webkit-animation-duration: 0.1s;
			  animation-duration: 0.1s;
			  -webkit-animation-timing-function: ease-in-out;
			  animation-timing-function: ease-in-out;
			  -webkit-animation-iteration-count: 1;
			  animation-iteration-count: 1;
			}
				
				#login > div > div > .login-box > .logo {
					width: 145px;
					height: 70px;
					
					background: url('https://lib.jeekjee.net/media/logos/persP_white.svg');
					background-size: contain;
					background-position: center center;
					background-repeat: no-repeat;
					
					margin: 45px auto;
					
					display: block;
				}
				
				#login > div > div > .login-box > input {
					width: 204px;
					height: 46px;
					
					/*border: solid 2px #666;*/
					border-width: 0;
					
					margin: 0 auto;
					
					padding-left: 12px;
					padding-right: 12px; 
					
					display: block;
					
					color: #eee;
					font-size: 16px;
					font-weight: 300;
					
					background: #262626;
				}
				
				#login > div > div > .login-box > .login-email {
					border-radius: 8px 8px 0 0;
				}
				
				#login > div > div > .login-box > .login-password {
					border-radius: 0 0 8px 8px;
					
					border-top-width: 0;
					
					margin-top: 1px;
				}
				
				#login > div > div > .login-box > .login-button {
					text-align: center;
					
					padding: 35px 0;
				}




#app {
	position: fixed;
	
	background-color: #000;
	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	overflow: hidden;
	
	display: flex;
}
#app.light {
	background-color: #999;
}
	
	#app > .panel-left {
		position: relative;
		
		flex: 1;
		
		min-width: calc(100% - 260px);
		max-width: calc(100% - 260px);
		
		z-index: 1;
	}
		
		#app > .panel-left	> .top {
			display: flex;
			
			height: 42px;
		}
			
			#app > .panel-left	> .top > .project-manager {
				width: 46px;
				min-width: 46px;
				max-width: 46px;
				height: auto;
				
				background-image: url('https://lib.jeekjee.net/media/ui_icons/projectsPanel_white@3x.png');
				background-size: 35px;
				background-position: center bottom;
				background-repeat: no-repeat;
				
				cursor: pointer;
			}
			
			#app > .panel-left	> .top > .pinned-projects {
				width: auto;
				
				overflow: auto;
				
				display: flex;
				
				padding-top: 7px
			}
			
			#app > .panel-left	> .top > .pinned-projects > div {
				display: flex;
			}
			
			#app > .panel-left	> .top > .create-projects {
				width: 26px;
				min-width: 26px;
				max-width: 26px;
				
				color: #fff;
				text-align: center;
				line-height: 42px;
				font-size: 16px;
				
				background-image: url('https://lib.jeekjee.net/media/ui_icons/add_white@3x.png');
				background-size: 11px;
				background-position: center center;
				background-repeat: no-repeat;
				
				cursor: pointer;
				
				opacity: .5;
			}
			
			#app > .panel-left	> .top > .invite-user {
				width: 26px;
				min-width: 26px;
				max-width: 26px;
				
				color: #fff;
				text-align: center;
				line-height: 42px;
				font-size: 16px;
				
				background-image: url('https://lib.jeekjee.net/media/ui_icons/export_white@3x.png');
				background-size: 32px;
				background-position: center center;
				background-repeat: no-repeat;
				
				cursor: pointer;
				
				opacity: .5;
			}
			
			#app > .panel-left	> .top > .connected-users {
			}
			
				#app > .panel-left	> .top > .connected-users > div {
					height: 100%;
				}
			
					#app > .panel-left	> .top > .connected-users > div > div {
						width: 20px;
						height: 20px;
						
						min-width: 20px;
						max-width: 20px;
						
						margin: 0 6px;
						
						background-color: #999;
						
						border-radius: 50%;
						
						font-size: 10px;
						color: #fff;
						text-align: center;
						line-height: 20px;
						text-transform: uppercase;
						
						cursor: pointer;
					}
			
			#app > .panel-left	> .top > .personal-settings {
				width: 36px;
				min-width: 36px;
				max-width: 36px;
			}
				
				#app > .panel-left	> .top > .personal-settings > .dot {
					width: 20px;
					height: 20px;
					
					background: #000;
					
					border-radius: 50%;
					margin: 0 auto;
					
					margin-top: calc(50% - 10px);
					
					border: solid 2px rgba(255,255,255,.7);
					
					line-height: 20px;
					color: #fff;
					font-weight: bold;
					font-size: 10px;
					text-transform: uppercase;
					text-align: center;
					
					cursor: pointer;
				}
			
			#app > .panel-left	> .top > .date-time {
				width: 90px;
				min-width: 90px;
				max-width: 90px;
				
				display: flex;
			}
				
				#app > .panel-left	> .top > .date-time > .time {
					font-size: 16px;
					color: #fff;
					
					line-height: 42px;
					
					margin-left: 4px;
				}
				
				#app > .panel-left	> .top > .date-time > .time-mode {
					font-size: 10px;
					color: #fff;
					
					line-height: 42px;
					
					margin-left: 4px;
					opacity: .5;
				}
		
		#app > .panel-left	> .center {
			display: flex;
			
			height: calc(100% - 42px);
		}
			
			#app > .panel-left	> .center > .tools {
				position: relative;
				
				width: 46px;
				
				z-index: 1;
			}
				
				#app > .panel-left	> .center > .tools > .tools {
					width: calc(100% - 3px);
					height: 100%;
					
					display: flex;
					flex-direction: column;
					
					margin-left: 3px;
				}
					
					#app > .panel-left	> .center > .tools > .tools > .tool {
						width: 40px;
						height: 40px;
						
						cursor: pointer;
						
						opacity: .4;
					}
					
					#app > .panel-left	> .center > .tools > .tools > .tool:first-child {
						width: 40px;
						height: 23px;
						
						background: transparent;
					}
					
					#app > .panel-left	> .center > .tools > .tools > div.white-space-colum {
						background: transparent;
						
						width: auto;
						height: auto;
					}
					
					#app > .panel-left	> .center > .tools > .tools > .tool.active,
					#app > .panel-left	> .center > .tools > .tools > .tool.active:hover {
						opacity: 1;
					}
					
					#app > .panel-left	> .center > .tools > .tools > .tool:hover {
						opacity: .6;
					}
			
			#app > .panel-left	> .center > .editor {
				position: relative;
				
				/*flex: 1;*/
				width: calc(100% - 46px);
				
				display: flex;
				
				flex-direction: column;
				
				box-shadow: 0 2px 4px rgba(0,0,0,.5);
				
				z-index: 2;
			}
				
				#app > .panel-left	> .center > .editor > .status {
					position: relative;
					
					background-color: #2A2A2A;
					
					z-index: 5;
				}
				
				#app > .panel-left	> .center > .editor > .stage {
					position: relative;
				
					flex: 1;
					
					background-color: #2A2A2A;
					/*
					background: rgba(51,50,50,1);
					background: -moz-radial-gradient(center, circle cover, rgba(51,50,50,1) 0%, rgba(27,27,27,1) 100%);
					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(51,50,50,1)), color-stop(100%, rgba(27,27,27,1)));
					background: -webkit-radial-gradient(center, circle cover, rgba(51,50,50,1) 0%, rgba(27,27,27,1) 100%);
					background: -o-radial-gradient(center, circle cover, rgba(51,50,50,1) 0%, rgba(27,27,27,1) 100%);
					background: -ms-radial-gradient(center, circle cover, rgba(51,50,50,1) 0%, rgba(27,27,27,1) 100%);
					background: radial-gradient(circle at center, rgba(51,50,50,1) 0%, rgba(27,27,27,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333232', endColorstr='#1b1b1b', GradientType=1 );
					*/
					overflow: hidden;
				}
				
				#app > .panel-left > .center > .editor > .action-animation {
					height: 30px;
					
					color: #fff;
					
					overflow: auto;
				}
				
				
				
				#app > .panel-left > .center > .editor > .action-animation.open {
					height: auto;
				}
				
					#app > .panel-left > .center > .editor > .action-animation .tab {
						height: 30px;
						
						color: #fff;
						
						overflow: auto;
						
						display: flex;
						
						position: relative;
					}
					
					#app > .panel-left > .center > .editor > .action-animation.open .tab {
						height: auto;
					}
				
						#app > .panel-left > .center > .editor > .action-animation .tab > div {
							width: auto;
							height: 22px;
							
							background: #181818;
							
							font-size: 10px;
							text-transform: uppercase;
							color: rgba(255,255,255,.5);
							
							padding: 0 24px 0 12px;
							
							margin-top: 8px;
							
							cursor: pointer;
							
							display: flex;
							
							position: relative;
						}
				
						#app > .panel-left > .center > .editor > .action-animation.open .tab > div {
							margin-top: 10px;
						}
				
						#app > .panel-left > .center > .editor > .action-animation .tab > .resize {
							background: transparent;
							
							position: absolute;
							
							top: 0;
							left: calc(50% - 15px);
							
							width: 30px;
							height: 10px;
							
							cursor: pointer;
							
							margin-top: 0;
							padding: 0;
							
							display: none;
							
							pointer-events: none;
						}
				
						#app > .panel-left > .center > .editor > .action-animation .tab > .resize:after {
							position: absolute;
							
							content: '';
							
							top: calc(50% - 1.5px);
							left: 0;
							right: 0;
							
							height: 3px;
							
							background: rgba(216,216,216,.3);
							
							border-radius: 3px;
						}
				
						#app > .panel-left > .center > .editor > .action-animation.open .tab > .resize {
							margin-top: 0;
							
							display: block;
							
							pointer-events: all;
						}
				/*
						#app > .panel-left > .center > .editor > .action-animation .tab > .active {
							background: rgba(var(--accent-base), 0.5);
							background: #252525;
						}
						*/
						#app > .panel-left > .center > .editor > .action-animation .tab > .active:after {
							position: absolute;
							
							content: '';
							
							top: calc(50% - 4px);
							right: 5px;
							
							width: 8px;
							height: 8px;
							
							background: var(--accent2);
							
							border-radius: 50%;
						}
						
				/*
						#app > .panel-left > .center > .editor > .action-animation.open-action .tab > .active.action,
						#app > .panel-left > .center > .editor > .action-animation.open-anim .tab > .active.animation {
							background: var(--accent);
							background: #3c3c3c;
						}
				*/
						#app > .panel-left > .center > .editor > .action-animation .tab > div + div {
							margin-left: 2px;
						}
				
						#app > .panel-left > .center > .editor > .action-animation .tab > .action {
							
						}
				
						#app > .panel-left > .center > .editor > .action-animation.open-action .tab > .action {
							flex: 1;
							background: #3c3c3c;
						}
						
						#app > .panel-left > .center > .editor > .action-animation .tab > .animation {
							justify-content: flex-end;
						}
				
						#app > .panel-left > .center > .editor > .action-animation.open-anim .tab > .animation {
							flex: 1;
							background: #3c3c3c;
						}
							
							#app > .panel-left > .center > .editor > .action-animation .tab > div > .icon {
								width: 16px;
								height: 22px;
								
								background-size: 23px;
								background-repeat: no-repeat;
								background-position: center center;
							}
							
							#app > .panel-left > .center > .editor > .action-animation .tab > div > .name {
								margin-left: 8px;
								line-height: 22px;
							}
				
					#app > .panel-left > .center > .editor > .action-animation .action-animation-content {
						background: rgba(75,75,75,.18);
					}
				
					#app > .panel-left > .center > .editor > .action-animation .action-animation-content {
						height: 0;
					}
				
					#app > .panel-left > .center > .editor > .action-animation.open .action-animation-content {
						height: 375px;
						
						margin-top: 3px;
						
						overflow: auto;
					}
			
			#app > .panel-left	> .center > .colors {
				position: relative;
				
				width: 10px;
				width: 5px;
				
				z-index: 1;
			}
			
			#app > .panel-left	> .center > .colors.open {
				width: 60px;
			}
	
	#app > .panel-right {
		position: relative;
		
		width: 260px;
		min-width: 260px;
		max-width: 260px;
		
		background-color: var(--background-app);
		
		z-index: 2;
		
		box-shadow: 0 2px 4px rgba(0,0,0,.5);
	}
		
		#app > .panel-right > .options {
			height: 100%;
		}
			
			#app > .panel-right > .options > .menu {
				display: flex;
				
				width: calc(100% - 76px);
				height: 14px;
				
				padding: 10px 38px
			}
			
				#app > .panel-right > .options > .menu > div {
					width: calc(100% / 3);
					
					line-height: 14px;
					text-align: center;
					font-size: 10px;
					text-transform: uppercase;
					color: #fff;
					
					cursor: pointer;
					
					opacity: .3;
				}
			
				#app > .panel-right > .options > .menu > div:hover {
					opacity: 1;
				}
				
				#app > .panel-right > .options.opt1 > .menu > div:nth-child(1) {
					color: #8FECF3;
					
					opacity: 1;
				}
				
				#app > .panel-right > .options.opt2 > .menu > div:nth-child(2) {
					color: #8FECF3;
					
					opacity: 1;
				}
				
				#app > .panel-right > .options.opt3 > .menu > div:nth-child(3) {
					color: #8FECF3;
					
					opacity: 1;
				}
				
				#app > .panel-right > .options.opt4 > .menu > div:nth-child(4) {
					color: #8FECF3;
					
					opacity: 1;
				}
			
			#app > .panel-right > .options > .props {
				position: relative;
				
				width: 100%;
				height: calc(100% - 34px);
				
				overflow: hidden;
				
				display: flex;
			}
			
				#app > .panel-right > .options > .props > div {
					position: relative;
					flex: 1;
					min-width: 100%;
					height: 100%;
					
					transition: all .2s ease-in-out;
					
					overflow: hidden;
				}
				
				#app > .panel-right > .options > .props > .props_design {
					
				}
				
				
				#app > .panel-right > .options > .props > .props_flow {
					
				}
				
				#app > .panel-right > .options > .props > .props_inout {
					
				}
				
				
				#app > .panel-right > .options.opt1 > .props > .div:first-child {
					margin-left: 0
				}
				
				#app > .panel-right > .options.opt2 > .props > div:first-child {
					margin-left: -100%
				}
				
				#app > .panel-right > .options.opt3 > .props > div:first-child {
					margin-left: -200%
				}
				
				#app > .panel-right > .options.opt4 > .props > div:first-child {
					margin-left: -300%
				}
					
					#app > .panel-right > .options > .props > div > .top-menu {
						width: 100%;
						height: 47px;
						
						display: flex;
					}
						
						#app > .panel-right > .options > .props > div > .top-menu > div {
							width: 40px;
							height: 33px;
							
							
							cursor: pointer;
							
							opacity: .3;
						}
						
						#app > .panel-right > .options > .props > div > .top-menu > div:hover,
						#app > .panel-right > .options > .props > div > .top-menu > div.select {
							opacity: 1;
						}
						
						#app > .panel-right > .options > .props > div > .top-menu > div + div {
							margin-left: 5px;
						}
					
					#app > .panel-right > .options > .props > div > .content {
						width: 100%;
						height: calc(100% - 47px);
						
						display: flex;
						
						overflow: hidden;
					}
						
						#app > .panel-right > .options > .props > div > .content > div {
							position: relative;
							flex: 1;
							min-width: 100%;
							height: 100%;
							
							transition: all .2s ease-in-out;
						
							overflow: hidden;
						}
							
							#app > .panel-right > .options > .props > div > .content > div > .menu {
								width: 100%;
								height: 50px;
								
								color: #fff;
							}
							
								#app > .panel-right > .options > .props > div > .content > div > .menu > div {
									width: 55px;
									
									text-align: center;
									font-size: 15px;
									font-weight: 300;
									
									cursor: pointer;
									
									color: #fff;
									
									opacity: .3;
								}
							
								#app > .panel-right > .options > .props > div > .content > div > .menu > div:hover,
								#app > .panel-right > .options > .props > div > .content > div > .menu > div.slc {
									opacity: .8;
								}
							
							
							#app > .panel-right > .options > .props > div > .content > div > .content {
								width: 100%;
								height: calc(100% - 45px - 10px);
								
								padding-top: 10px;
								
								display: flex;
								
								color: #fff;
							}
							
							
							#app > .panel-right > .options > .props > div > .content > div > .content-system {
								height: calc(100% - 45px - 10px - 50px);
							}
							
							
							#app > .panel-right > .options > .props > div > .content > div > .content > .full-content {
								position: relative;
								flex: 1;
								min-width: 100%;
								height: 100%;
								
								transition: all .2s ease-in-out;
							
								overflow-x: hidden;
								overflow-y: auto;
							}
							
							#app > .panel-right > .options > .props > div > .content > div > .content.content-full {
								height: calc(100% - 10px);
								
								overflow-x: hidden;
								overflow-y: auto;
							}
							
							#app > .panel-right > .options > .props > div > .content > div > .bottom-menu {
								position: relative;
								
								width: 100%;
								height: 45px;
								
								display: flex;
							}
							
							#app > .panel-right > .options > .props > div > .content > div > .bottom-menu:before {
								position: absolute;
								
								content: '';
								
								top: -6px;
								left: 15px;
								right: 10px;
								height: 6px;
								
								/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.21+100 */
								background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.21) 100%); /* FF3.6-15 */
								background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.21) 100%); /* Chrome10-25,Safari5.1-6 */
								background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.21) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#36000000',GradientType=0 ); /* IE6-9 */
							}
							
							#app > .panel-right > .options > .props > div > .content > div > .bottom-menu:after {
								position: absolute;
								
								content: '';
								
								top: 0;
								left: 5px;
								right: 5px;
								height: 1px;
								
								/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c8c8c8+0,2989d8+12,c2c2c2+12,9c9c9c+88,979797+100&0+0,1+12,1+88,0+100 */
								background: -moz-linear-gradient(left, rgba(200,200,200,0) 0%, rgba(194,194,194,1) 12%, rgba(156,156,156,1) 88%, rgba(151,151,151,0) 100%); /* FF3.6-15 */
								background: -webkit-linear-gradient(left, rgba(200,200,200,0) 0%,rgba(194,194,194,1) 12%,rgba(156,156,156,1) 88%,rgba(151,151,151,0) 100%); /* Chrome10-25,Safari5.1-6 */
								background: linear-gradient(to right, rgba(200,200,200,0) 0%,rgba(194,194,194,1) 12%,rgba(156,156,156,1) 88%,rgba(151,151,151,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
								filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c8c8c8', endColorstr='#00979797',GradientType=1 ); /* IE6-9 */
								
								opacity: .2;
							}
							
								#app > .panel-right > .options > .props > div > .content > div > .bottom-menu > div {
									width: 37px;
									height: 33px;
									
									opacity: .3;
									
									cursor: pointer;
								}
								
								#app > .panel-right > .options > .props > div > .content > div > .bottom-menu > div:hover,
								#app > .panel-right > .options > .props > div > .content > div > .bottom-menu > div.select {
									opacity: 1;
								}
								
								#app > .panel-right > .options > .props > div > .content > div > .bottom-menu > div + div {
									margin-left: 1px;
								}
					
					












/*
	*
	* PINNED PROJECT
	*
	*/
.pinned-project {
	background: #2C2B2B;
	
	height: 30px;
	
	padding: 0 25px 0 20px;
	
	position: relative;
	
	cursor: pointer;
	
	white-space: nowrap;
	
	margin-right: 3px;
}
#app.light .pinned-project {
	background: #616b7a;
}

.pinned-project.open {
	background: var(--accent);
}
#app.light .pinned-project.open {
	background: #35c2cf;
}

.pinned-project:last-child {
	margin-right: 0;
}

	.pinned-project > .updated {
		position: absolute;
		
		background: #E4BEB8;
		
		width: 6px;
		height: 6px;
		
		border-radius: 50%;
		
		top: calc(50% - 3px);
		left: 6px;
	}

	.pinned-project > .text {
		text-transform: uppercase;
		color: #fff;
		line-height: 30px;
		font-size: 10px;
		
		opacity: .5
	}

	.pinned-project.open > .text {
		opacity: 1
	}












.sys-content-editable {
	overflow: auto;
	background-color: white;
	outline: 4px solid var(--accent);
	color: #333;
	cursor: text;
}




/**
	*
	* CONTEXT menu Temporal CSS
	*
	*/

.context {
	  position:absolute;
	  pointer-events: none;	
}

	.context > .context-central-area {
		  position: absolute;
		  border-radius: 50%;
/* 		  border: 3px solid rgba(255,255,255,0.23); */
		  box-shadow: 0 -60px 60px 20px rgba(255,255,255,0.4) ;
		  opacity: 0.7;		
	}
	
	.context > .context-central-element {
			position: absolute;
		  	border-radius: 50%;
		  	border: none;
		  	background: #666 ;
		  	box-shadow: 0 0 42px rgba(0,0,0,0.6);
		  	opacity: 1;
		  	transform: scale(1);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;	
			transition: all .1s ease-in-out;	  			  
	}	
	
		.context > .selected {
				position: absolute;
			  	border-radius: 50%;
			  	border: 2px solid white;
			  	background: #000 ;
			  	box-shadow: 0 0 42px rgba(255,255,255,0.6);
			  	opacity: 1;
			  	transform: scale(1.4);
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center center;	
				transition: all .1s ease-in-out;	  			  
			  			  
		}
			
	.context > .context-option {
			position: absolute;
		  	border-radius: 18px;
		  	height:32px;
		  	border: none;
		  	background: #000 ;
		  	box-shadow: 0 2px 16px rgba(0,0,0,0.6);
		  	opacity: 1;	  			  
	}
	
	.context > .context-option-text {			  
	}	
	
	.context > .shift {
		  	background: #30B8BD ;  			  
	}	
	
		.context > .context-option > .elem {
				position: relative;
			  	width: 28px;
			  	height:28px;
			  	margin-top: 2px;
			  	opacity: 0.6;
			  	float:left;
				background-size: 28px;
				background-repeat: no-repeat;
				background-position: center center;	
/* 				transition: all .1s ease-in-out;	  			   */
		}
		
		.context > .context-option > .elem:first-child {
				margin-left: 10px;	  			  
		}						

		.context > .context-option > .selected {
			  	opacity: 1;	  			  
		}


/**
	*
	* JSON EDITOR Temporal CSS
	*
	*/
	
.json {
	width:70%;
/* 	display: flex; */
	margin: 40px auto 60px;
}	

	.json > .json-container{
	    margin-left: 10px;
	    margin-right: 10px;
	    flex-direction: column;
	    width:100%;
	    overflow:auto;
	}
	
	.json > .json-container > .title{
	    font-size: 20px;
	    color: #666;
	    padding: 8px 10px;
	    text-align: center;
	    width: 100%;
	    margin-bottom: 20px;
	}	
	
	.json > .json-container >.block-label {
	    margin: 14px;
	    font-size: 12px;
	    color: #999;
	    padding: 8px 10px;
	    text-align: center;
	    text-transform: uppercase;
	    width: 100%;
	}	
		.json > .json-container > .json-component{
			display: flex;
		}
		
		
			.json > .json-container > .json-component  >.label {
				margin-bottom: 14px;
				margin-top: 6px;
			    font-size: 15px;
			    color: #999;
			    padding: 8px 10px;
			    text-align: right;
			    width: 120px;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    overflow: hidden;
			}			 
			
			.json > .json-container > .json-component > div { 
				width:100%
			}	
			
			.json > .json-container > .json-component > div > input {    
				width: calc(100% - 24px);
			    border-radius: 4px;
			    padding: 12px 10px;
			    font-size: 13px;
			    border: 2px solid black;
			    color: #ccc;
			    background: #121212;
			 }
			 	.json > .json-container > .json-component > div > input:focus { 
				 	border: 2px solid white;   
				    color: #AAA;
				    background: #222;
			 	}
			 	
			 .json > .json-container > .json-component > .parameters {    
				width: 100%;
			    
			    color: #ccc;
			 }
			 
			 
			 .json > .json-container > .json-component > .parameters:empty {    
				 text-align: center;
				 font-size: 15px;
				 content: "No values";
			 }			 	
			 
				 .json > .json-container > .json-component > .parameters > .param-block {    
					width: 100%;
				    display:flex;
				    flex-direction: row;
				 }		
				 
				 
				 
					 .json > .json-container > .json-component > .parameters > .param-block  > .preformat { 
					    line-height: 35px;
					    margin-top: 10px;
					    margin-right: 10px;
					    margin-bottom: 10px;
					    border-right: 1px dotted #262626;				 
					}	 
				 
				 
				 	 .json > .json-container > .json-component > .parameters > .param-block  > .title {    
						width: 20px;
					    font-size: 13px;
					    color: #555;
			    
					 }					 		 
			 
				 	 .json > .json-container > .json-component > .parameters > .param-block  > .par-prop  {    
						width: 100px;
					    font-size: 15px;
					    color: #bbb;
					    padding: 0px 5px;
						background: none;
						border: 1px solid transparent;
						border-radius: 0px;
						border-right: 1px dotted #262626;
				    					    
					 }	
					 	.json > .json-container > .json-component > .parameters > .param-block  > .par-prop:focus  {
						 		border: 1px solid white;
						 		color: white;
						 		border-radius: 4px;
						 		background: #232323;
						 }
						 
				 	 .json > .json-container > .json-component > .parameters > .param-block  > .par-value {  
					 	flex:1;  
					    font-size: 15px;
					    color: #777;
					    padding: 0px 5px;
					    border: 1px solid transparent;
					    border-right: 1px dotted #262626;
					    border-radius: 0px;
						background: none;					    
					 }	
					 	.json > .json-container > .json-component > .parameters > .param-block  > .par-value:focus  {
						 		border: 1px solid white;
						 		color:white;
						 		border-radius: 4px;
						 		background: #232323;
						 }					 
				 	 .json > .json-container > .json-component > .parameters > .param-block  > .par-options {  
					 	width: 60px;
					    font-size: 13px;
					    color: #aaa;
					 }
				 	 .json > .json-container > .json-component > .parameters > .param-block  > .par-actions { 
					 	width:60px;   
					    font-size: 13px;
					    color: #aaa;
					    
					 }	
					 	 .json > .json-container > .json-component > .parameters > .param-block > .par-actions  > .par-icn { 
						 	width:30px;
						 	height:30px;   
						    float:left;
						    opacity:0.2;
						    cursor: pointer;
						    
						 }
						 
						 	 .json > .json-container > .json-component > .parameters > .param-block > .par-actions  > .par-icn:hover { 
							    opacity:1;
							    
							 }						 						 			 					 				 

/**
	*
	* INPUT (Slider)
	*
	*/
.slider-box {
	width: 100%;
	height: 100%;
	
	min-height: 28px;
	max-height: 28px;
	
	display: flex;
}

	.slider-box > .field {
		width: 100%;
		min-width: 50px;
		max-width: 120px;
		
		display: flex;
		
		align-items: center;
		justify-content: center;
	}
	
	.slider-box > .slider {
		position: relative;
			
		width: calc(100% - 20px);
		
		padding: 0 10px;
		
		/*min-width: 40px;*/
		
		margin-right: 8px;
	}

		.slider-box > .slider > .bar {
			position: relative;
			
			background: #979797;
			
			width: 100%;
			height: 2px;
			
			border-radius: 2px;
			
			top: calc(50% - 1.5px)
		}
			
			.slider-box > .slider > .bar > .bar-value {
				width: 0;
				height: 100%;
			
				border-radius: 2px;
				
				background-color: #4A90E2;
			}

			.slider-box > .slider > .bar > .dot {
				position: absolute;
				
				top: -3.5px;
				left: 0px;
				
				width: 9px;
				height: 9px;
				
				border-radius: 50%;
				
				background: #D8D8D8;
				
				cursor: pointer;
				
				box-shadow: 0 0 4px rgba(0,0,0,.5)
			}




/**
	*
	* INPUT (Color)
	*
	*/
.color-box {
	width: 100%;
	height: 100%;
	
	min-height: 28px;
	max-height: 28px;
	
	display: flex;
}
	
	.color-box > .prop {
		width: 17px;
		height: 24px;
		
		margin-top: 2px;
		
		min-width: 17px;
		max-width: 17px;
		
		color: #fff;
		font-size: 10px;
		text-transform: uppercase;
		
		line-height: 27px;
		
		padding-left: 7px;
	}

	.color-box > .field {
		width: 100%;
		max-width: 62px;
		
		position: relative;
		
		display: flex;
	}
		
		.color-box > .field > .color-popup {
			background: var(--background-app);
			
			border: solid 2px #777;
			
			border-radius: 3px;
			
			position: absolute;
			
			top: -30px;
			left: calc(50% - 62px);
			
			width: 120px;
			
			box-shadow: 0 0 25px rgba(0,0,0,.7);
			
			display: flex;
			
			z-index: 5;
		}
		
		.color-box > .field > .color-popup > .arrow {
			position: absolute;
			
			top: calc(100% + 2px);
			left: calc(50% - 5px);
			
			border-top: 5px solid #777;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			
			z-index: 10;
		}
			
			.color-box > .field > .color-popup > input {
				width: 55px;
				
				border-width: 0;
				
				background-color: transparent;
				
				margin: 2px 0;
				
				color: #fff;
			}
			
			.color-box > .field > .color-popup > input + input {
				width: 35px;
				
				color: #999;
				
				border-left: solid 1px #999;
				border-right: solid 1px #999;
				
				text-align: right;
			}
			
			.color-box > .field > .color-popup > .set {
				flex: 1;
				
				font-size: 12px;
				text-align: center;
				line-height: 21px;
				
				cursor: pointer;
			}
		
		.color-box > .field > .field-prop {
			position: absolute;
			
			top: -15px;
			left: 0;
			
			font-size: 12px;
		}
		
		.color-box > .field > .field-color {
			position: relative;
			
			width: 100%;
			height: 24px;
			
			overflow: hidden;
				
			border-radius: 2px;
		}
		
		.color-box > .field > .field-color.active {
			/*transform: scale(1.1);*/
			box-shadow: 0 0 10px rgba(0,0,0,.5)
		}
		
			.color-box > .field > .field-color > .bgima {
				opacity: .25;
		
				background-image: url('https://lib.jeekjee.net/media/ui_icons/bgtransparent.svg');
				background-size: 11.8px;
				
				width: 100%;
				height: 100%;
			}
			
			.color-box > .field > .field-color > .color {
				position: absolute;
				
				width: calc(100% - 12px);
				height: 100%;
				
				top: calc(50% - 12px);
				left: 0;
				
				cursor: pointer;
				
				transition: all .1s ease-in-out;
				
				line-height: 22px;
				
				padding: 0 6px;
				font-size: 9px;
				color: #000;
				font-weight: 600;
				text-transform: uppercase;
				text-overflow: ellipsis;
				white-space: nowrap;
				
				overflow: hidden;
			}
			
			.color-box > .field > .field-color > .opacity {
				position: absolute;
				
				bottom: 0;
				left: 0;
				right: 0;
				
				height: 3px;
				
				background: #7e7e7e;
				
				border-top: solid 2px #3f3f3f;
			}
			
			.color-box > .field > .field-color > .opacity > div {
				width: auto;
				height: 100%;
				
				background: #ccc
			}
		
	
	.color-box > .slider {
		position: relative;
			
		width: 100%;
		
		padding: 0 10px;
		
		min-width: 40px;
		
		margin-right: 8px;
	}
		
		.color-box > .slider > .slider-prop {
			position: absolute;
			
			top: -15px;
			left: 10px;
			
			font-size: 12px;
		}





/**
	*
	* INPUT (Input)
	*
	*/
.input-box {
	position: relative;
	
	width: 100%;
	height: 100%;
	
	min-height: 28px;
	max-height: 28px;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-family: 'Source Sans Pro', sans-serif;
}
	
	.input-box > .prop {
		width: 17px;
		height: calc(100% - 4px);
		
		color: #fff;
		font-size: 10px;
		text-transform: uppercase;
		
		line-height: 27px;
		
		padding-left: 7px;
		
		cursor: default;
	}
	
	.input-box > .input {
		flex: 1;
		
		display: flex;
		
		align-items: center;
		justify-content: center;
		
		background: #212121;
		
		border-radius: 2px;
		
		height: calc(100% - 4px);
		
		overflow: hidden;
		
		position: relative;
	}
		
		.input-box > .input > input {
			width: 100%;
			
			flex: 1;
			
			border-width: 0;
		
			height: calc(100% - 7px);
			
			margin-left: 5px;
			
			text-align: right;
			
			background: transparent;
			
			color: #fff;
			font-size: 13px;
		}
		
		.input-box > .input > .format {
			margin-top: 3px;
			
			width: 20px;
			
			font-size: 10px;
			text-transform: uppercase;
			color: rgba(255,255,255,.5);
			text-align: center;
			
			cursor: pointer;
		}
		
		.input-box > .input > .multi {
			position: absolute;
			
			top: 0;
			right: 20px;
			
			height: 100%;
			
			font-size: 13px;
			
			line-height: 24px;
			
			pointer-events: none;
			
			opacity: .4;
		}
	
	.input-box > .pointer {
		width: 17px;
		
		position: relative;
		
		cursor: pointer;
	}
	
	.input-box > .pointer-on:before {
		position: absolute;
		
		content: '';
		
		border: solid 1px #fff;
		
		border-radius: 50%;
		
		width: 9px;
		height: 9px;
		
		top: calc(50% - (11px / 2));
		right: 2px;
		
		opacity: .2;
	}
	
	.input-box > .pointer-on:after {
		position: absolute;
		
		content: '';
		
		background: #fff;
		
		border-radius: 50%;
		
		width: 5px;
		height: 5px;
		
		top: calc(50% - (5px / 2));
		right: 5px;
		
		opacity: .2;
	}






/**
	*
	* INPUT (Textarea)
	*
	*/
.textarea-box {
	position: relative;
	
	width: 100%;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-family: 'Source Sans Pro', sans-serif;
	
	padding: 5px 0;
}
	
	.textarea-box > .prop {
		width: 17px;
		
		color: #fff;
		font-size: 10px;
		text-transform: uppercase;
		
		line-height: 27px;
		
		padding-left: 7px;
	}
	
	.textarea-box > .input {
		flex: 1;
		
		display: flex;
		
		align-items: center;
		justify-content: center;
		
		background: #212121;
		
		border-radius: 2px;
		
		overflow: hidden;
		
		position: relative;
	}
		
		.textarea-box > .input > textarea {
			width: 100%;
			
			flex: 1;
			
			border-width: 0;
			
			margin-left: 5px;
			
			text-align: left;
			
			background: transparent;
			
			color: #fff;
			font-size: 13px;
			
			resize: none;
		}
		
		.textarea-box > .input > .format {
			margin-top: 3px;
			
			width: 20px;
			
			font-size: 10px;
			text-transform: uppercase;
			color: rgba(255,255,255,.5);
			text-align: center;
			
			cursor: pointer;
		}
		
		.textarea-box > .input > .multi {
			position: absolute;
			
			top: 0;
			right: 20px;
			
			height: 100%;
			
			font-size: 13px;
			
			line-height: 24px;
			
			pointer-events: none;
			
			opacity: .4;
		}
	
	.textarea-box > .pointer {
		width: 17px;
		
		position: relative;
		
		cursor: pointer;
	}
	
	.textarea-box > .pointer-on:before {
		position: absolute;
		
		content: '';
		
		border: solid 1px #fff;
		
		border-radius: 50%;
		
		width: 9px;
		height: 9px;
		
		top: calc(50% - (11px / 2));
		right: 2px;
		
		opacity: .2;
	}
	
	.textarea-box > .pointer-on:after {
		position: absolute;
		
		content: '';
		
		background: #fff;
		
		border-radius: 50%;
		
		width: 5px;
		height: 5px;
		
		top: calc(50% - (5px / 2));
		right: 5px;
		
		opacity: .2;
	}





/**
	*
	* INPUT (Input Vertex)
	*
	*/
.input-box-vertex {
	justify-content: flex-start;
}
	.input-box-vertex > .labels {
		position: absolute;
		
		bottom: 100%;
		left: 40px;
		right: 37px;
		
		height: 10px;
		
		display: none;
	}
	
	.input-box-vertex.multiple > .labels {
		display: flex;
	}
		
		.input-box-vertex > .labels > div {
			flex: 0 0 25%;
			
			width: 25%;
			
			font-size: 8px;
			text-align: right;
			color: rgba(255,255,255,.5);
			text-transform: uppercase;
			line-height: 10px;
		}
	
	.input-box-vertex  > .input {
		max-width: 63px;
	}
	
	.input-box-vertex.multiple  > .input {
		max-width: none;
	}
	
		.input-box-vertex > .input > .input-mode {
			position: relative;
			
			width: 16px;
			height: 100%;
			
			background: #302F2F;
			
			cursor: pointer;
		}
		
		.input-box-vertex > .input > .input-mode:after {
			position: absolute;
			
			content: 'U';
			
			top: 50%;
			right: 0;
			left: 0;
			
			color: rgba(255,255,255,.5);
			font-size: 10px;
			text-align: center;
			
			transform: translateY(-50%)
		}
		
		.input-box-vertex.multiple > .input > .input-mode:after {
			content: 'M';
		}
		
		.input-box-vertex.multiple > .input > .input-simple {
			display: none;
		}
		
		.input-box-vertex > .input > .input-multiple {
			display: none;
		}
		
		.input-box-vertex.multiple > .input > .input-multiple {
			display: block;
		}
		
		.input-box-vertex.multiple > .input > .input-multiple + .input-multiple {
			border-left: solid 1px rgba(255,255,255,.1)
		}

/**
	*
	* INPUT (Input 3D)
	*
	*/
.input-box-3D {
	justify-content: flex-start;
}
	
	.input-box-3D > .labels > div {
		flex: 0 0 calc(100% / 3);
		width: calc(100% / 3);
	}
	
	.input-box-3D > .input > .input-mode:after {
		content: '2D'
	}
	
	.input-box-3D.multiple > .input > .input-mode:after {
		content: '3D'
	}
	


/**
	*
	* INPUT (Radio)
	*
	*/
.radio-box {
	width: 100%;
	height: 100%;
	
	min-height: 28px;
	max-height: 28px;
	
	display: flex;
	align-items: center;
	justify-content: center;
		
	cursor: pointer;
}
	.radio-box > .control {
		width: 14px;
		height: 14px;
		
		border-radius: 50%;
		
		background-image: url('https://lib.jeekjee.net/media/ui_icons/ticker_off.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	.radio-box > .control.on {
		background-image: url('https://lib.jeekjee.net/media/ui_icons/ticker_on_blue.svg');
	}





/**
	*
	* INPUT (Dropdown)
	*
	*/
.dropdown-box {
/* 	position: relative; */
	
	width: 100%;
	height: 100%;
	
	min-height: 28px;
	max-height: 28px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
	
	.dropdown-box > .prop {
		width: 17px;
		height: 24px;
		
		min-width: 17px;
		max-width: 17px;
		
		color: #fff;
		font-size: 10px;
		text-transform: uppercase;
		
		line-height: 27px;
		
		padding-left: 7px
	}
	
	.dropdown-box > .box {
		position: relative;
		
		width: calc(100% - 17px);
		width: calc(100% - 24px);
		
		height: 24px;
		
		background: #212121;
		
		border-radius: 2px;
		
		cursor: pointer;
		
		font-family: 'Source Sans Pro', sans-serif;
	}
		
		.dropdown-box > .box  > .dropdown-selected {
			color: #fff;
			font-size: 13px;
			line-height: 24px;
			
			padding: 0 17px 0 10px;
			
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		
		.dropdown-box > .box  > .triangle {
			position: absolute;
			width: 0; 
			height: 0; 
			
			top: calc(50% - 2.5px);
			right: 7px;
			
			border-left: 5px solid transparent;
			border-top: 7px solid #fff;
			border-right: 5px solid transparent;
			
			transition: all .2s ease-in-out;
		}
		
		.dropdown-box.open > .box  > .triangle {
			transform: rotateZ(180deg)
		}
	
	
	.dropdown-box > .toggle-list {
		position: absolute;
		
		top: calc(100% - 1px);
		left: 10px;
		left: 0;
		right: 17px;
		
		top: calc(100% - 10px);
		left: -5px;
		right: -8px;
		
		z-index: 5;
		
		background: #212121;
		
		box-shadow: 0 0 36px rgba(0,0,0,.5);
		box-shadow: 0 0 56px rgba(0,0,0,.7);
		
		display: none;
	}
	
	.dropdown-box.open > .toggle-list {
		display: block;
	}
	
	.dropdown-box > .pointer {
		width: 17px;
		
		position: relative;
		
		cursor: pointer;
	}
	
	.dropdown-box > .pointer-on:before {
		position: absolute;
		
		content: '';
		
		border: solid 1px #fff;
		
		border-radius: 50%;
		
		width: 9px;
		height: 9px;
		
		top: calc(50% - (11px / 2));
		right: 2px;
		
		opacity: .2;
	}
	
	.dropdown-box > .pointer-on:after {
		position: absolute;
		
		content: '';
		
		background: #fff;
		
		border-radius: 50%;
		
		width: 5px;
		height: 5px;
		
		top: calc(50% - (5px / 2));
		right: 5px;
		
		opacity: .2;
	}





/**
	*
	* INPUT (Button)
	*
	*/
.button-box {
	display: inline-block;
	
	padding: 0 25px;
	
	background: var(--background-app);
	
	height: 40px;
	
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	
	border-radius: 3px;
	
	cursor: pointer;
	
	vertical-align: top;
}

.button-box.cancel {
	background-color: transparent;
	color: #aaa;
}

.button-box:hover,
.button-box:active {
	background: #000;
}

.button-box.opaButton {
	background: rgb(103,103,103);
	
	color: rgb(255,255,255);
	
	font-size: 13px;
	
	border-radius: 0;
	
	opacity: .4;
}
.button-box.opaButton:hover {
	opacity: 1;
}







/**
	*
	* INPUT (List)
	*
	*/
.list-box {
	
}
	
	.list-box > .list-search {
		width: 100%;
		height: 32px;
		
		background: #000;
		
		display: flex;
	}
		
		.list-box > .list-search > .search-input {
			border-width: 0;
			
			height: 24px;
			
			margin-top: 4px;
			margin-left: 10px;
			margin-right: 5px;
			
			border-radius: 24px;
			
			padding-left: 10px;
			padding-right: 10px;
			
			width: calc(100% - 15px - 38px);
			
			background: #333;
			
			color: #fff;
			font-size: 12px;
		}
		
		.list-box > .list-search > .search-icon {
			width: 33px;
			height: 33px;
			
			margin-right: 5px;
			
			background-image: url('https://lib.jeekjee.net/media/ui_icons/search_white@3x.png');
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
		}
	
	.list-box > .list-hook {
		position: relative;
		
		overflow: auto;
	}
	
		.list-box > .list-hook > .list-item {
			width: calc(100% - 12px);
			height: 23px;
			
			line-height: 24px;
			font-size: 12px;
			color: #888;
			
			cursor: pointer;
			
			padding: 0 2px 0 10px;
			
			border-bottom: solid 1px rgba(0,0,0,.2);
			
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			
			display: flex;
		}
		
		.list-box > .list-hook > .list-item:hover, .list-box > .list-hook > .list-item.slc {
			background-color: rgba(255,255,255,.1);
			
			color: #fff;
		}
		
		.list-box > .list-hook > .list-item:last-child {
			border-bottom-width: 0;
			
			height: 23px;
		}





/**
	*
	* INPUT (Tab)
	*
	*/
.tab-box {
	width: 100%;
	height: 24px;
	
	display: flex;
}
	
	.tab-box > div {
		background: #212121;
		
		width: 24px;
		height: 24px;
		
		color: #fff;
		font-size: 13px;
		text-align: center;
		line-height: 24px;
		
		border-radius: 2px;
		
		cursor: pointer;
		
		opacity: .3;
	}	
	
	.tab-box > div + div {
		margin-left: 2px;
	}
	
	.tab-box > div.selected {
		opacity: 1;
	}




/**
	*
	* COLORS
	*
	*/
.stage-color-box {
	overflow: auto;
	
	display: none;
}
	
	.stage-color-box > .color-item {
		width: 100%;
		height: 30px;
		
		cursor: pointer;
	}
	
	.stage-color-box > .color-item + .color-item {
		margin-top: 1px;
	}
	
	.stage-colors.open .color-box > .color-item {
		width: 50%;
		
		float: left;
	}
	
	.stage-colors.open .color-box > .color-item:nth-child(2) {
		margin-top: 0;
	}
	
	.stage-colors.open .color-box > .color-item:nth-child(odd) {
		width: calc(50% - 1px);
		margin-right: 1px;
	}



/**
	*
	* OPTION BOX
	*
	*/
.option-box {
	position: relative;
	
	width: 220px;
	
	margin-left: 17px;
}

#app > .panel-right > .options > .props div.option-box {
	overflow: visible;
}

.option-box:after {
	position: absolute;
	
	content: attr(data-name);
	
	top: 50%;
	left: calc(100% + 8px);
	
	font-size: 10px;
	text-transform: uppercase;
	color: #fff;
	line-height: 14px;
	white-space: nowrap;
	
	opacity: .3;
	
	transform: rotate(90deg) translateX(-65%);
	
	transform-origin: left;
}

.option-box + .option-box {
	margin-top: 6px;
}

.option-box:last-child {
	margin-bottom: 6px;
}
	
	.option-box > div {
		padding: 0 8px 0 5px;
	}
	
	.option-box > div.transparent {
		background: transparent;
		
		padding: 0;
		
		box-shadow: none;
	}
		
		.option-box > div > .row {
			position: relative;
			
			display: flex;
			
			padding: 12px 0 11px;
			
			flex-flow: row wrap;
		}
		
		.option-box > div > .row:after {
			position: absolute;
			
			content: '';
			
			bottom: 0;
			left: 1px;
			right: 5px;
			
			height: 1px;
			
			background: rgba(0,0,0,.2);
			
			pointer-events: none;
		}
		
		.option-box > div > .row + .row {
			padding: 13px 0 11px;
		}
		
		.option-box > div > .row + .row:before {
			position: absolute;
			
			content: '';
			
			top: 0;
			left: 1px;
			right: 5px;
			bottom: auto;
			
			height: 1px;
			
			background: rgba(255,255,255,.1);
			
			pointer-events: none;
		}
		
		.option-box > div > .row:last-child:after {
			height: 0;
		}
			
			.option-box > div > .row > .row {
				display: flex;
				
				width: 100%;
				
				padding: 0 0 11px;
			}
			
			.option-box > div > .row > .row:last-child {
				display: flex;
				
				width: 100%;
				
				padding: 0;
			}
			
			.option-box > div > .row > .row-2 {
				display: flex;
				
				width: 100%;
				
				padding: 0 0 6px;
			}






.pointer-box {
	position: relative;
	
	width: 100%;
	height: 100%;
}

.pointer-box-simple {
	position: relative;
	
	width: 100%;
	height: 100%;
}

.pointer-box:before {
	position: absolute;
	
	content: '';
	
	width: 10px;
	height: 10px;
	
	top: calc(50% - 6px);
	left: calc(50% - 6px);
	
	border: solid 1px rgba(255,255,255,.2);
	
	border-radius: 50%;
}

.pointer-box:after {
	position: absolute;
	
	content: '';
	
	width: 6px;
	height: 6px;
	
	top: calc(50% - 3px);
	left: calc(50% - 3px);
	
	background: rgba(255,255,255,.2);
	
	border-radius: 50%;
}





.pointer-box.active:after {
	background: var(--accent);
	background: var(--accent2);
}

.pointer-box.active:before {
	border-color: var(--accent);
	border-color: var(--accent2);
}

.pointer-box.error:after {
	background: var(--error);
}

.pointer-box.error:before {
	border-color: var(--error);
}


.pointer-box.mousedown:after {
	background: var(--accent2);
}

.pointer-box.mousedown:before {
	border-color: var(--accent2);
}













/**
	*
	* COLORS
	*
	*/
#app > .panel-right > .options > .props div .wire-inputs-2 {
	overflow: visible;
}
#app > .panel-right > .options > .props div .wire-inputs-2 div {
	overflow: visible;
}
.wire-inputs-2 {
	position: relative;
	
	display: flex;
}
	
	.wire-inputs-2 > div {
		width: 50%;
	}
		
	.wire-inputs-2 > .wire-box {
		position: absolute;
		
		width: 58px;
		height: 3px;
		
		top: -2px;
		left: calc(50% - 30px);
		
		border: solid 1px transparent;
		border-bottom-width: 0;
	}
	
	.wire-inputs-2.link > .wire-box {
		border-color: #979797
	}
		
		.wire-inputs-2 > .wire-box > .wire-icon {
			position: absolute;
			
			width: 18px;
			height: 18px;
			
			top: -12px;
			left: calc(50% - 9px);
			
			background-image: url('https://lib.jeekjee.net/media/ui_icons/meta_unlock_white@3x.png');
			background-size: 22px;
			background-position: center center;
			background-repeat: no-repeat;
			
			opacity: .3;
			
			cursor: pointer;
		}
		
		.wire-inputs-2.link > .wire-box > .wire-icon {
			background-image: url('https://lib.jeekjee.net/media/ui_icons/meta_lock_white@3x.png');
			opacity: 1;
		}






/**
	*
	* TOOLTIP
	*
	*/
.tooltip {
	position: absolute;
	
	top: 0;
	left: 0;
	
	min-width: 80px;
	
	padding: 5px 15px;
	
	border-radius: 3px;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#444444+0,3d3d3d+100 */
	background: #444444; /* Old browsers */
	background: -moz-linear-gradient(top, #444444 0%, #3d3d3d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #444444 0%,#3d3d3d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #444444 0%,#3d3d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-9 */
	background: #000;
	
	color: #fff;
	font-size: 14px;
	box-shadow: 0 0 6px rgba(0,0,0,.5);
	text-align: center;
	
	z-index: 100;
	
	pointer-events: none;
}
	
	.tooltip > .text {
		
	}
	
	.tooltip > .arrow-down {
		position: absolute;
		
		content: '';
		
		top: 100%;
		left: calc(50% - 8px);
		
		border-top: solid 5px #000;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
	}
	
	.tooltip > .arrow-up {
		position: absolute;
		
		content: '';
		
		bottom: 100%;
		left: calc(50% - 8px);
		
		border-bottom: solid 5px #000;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
	}
	
	.tooltip > .arrow-right {
		position: absolute;
		
		content: '';
		
		top: calc(50% - 8px);
		right: 100%;
		
		border-top: solid 8px transparent;
		border-right: 5px solid #000;
		border-bottom: 8px solid transparent;
	}







.preview-small {
	display: flex;
	
	width: 100%;
	height: 100%;
}
	
	.preview-small > .icon {
		flex: 1;
		
		height: 40px;
	}
	
	.preview-small > .preview {
		width: 40px;
		height: 40px;
		
		position: relative;
	}
	
		.preview-small > .preview > .back {
			width: 100%;
			height: 100%;
			
			opacity: .25;
		
			background-image: url('https://lib.jeekjee.net/media/ui_icons/bgtransparent.svg');
			background-size: 11.5px;
		}
	
		.preview-small > .preview > .render {
			position: absolute;
			
			width: 100%;
			height: 100%;
			
			top: 0;
			left: 0;
			
			overflow: hidden;
		}
		
			.preview-small > .preview > .render > .media {
				position: absolute;
				
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 11px;
			}
		
			.preview-small > .preview > .render > .label {
				position: absolute;
				
				background: #212121;
				
				bottom: 0;
				left: 0;
				right: 0;
				
				height: 11px;
				
				line-height: 11px;
				font-size: 8px;
				font-weight: bold;
				text-transform: uppercase;
				color: #fff;
				text-align: center;
			}



.actor-list {
	position: absolute;
	
	background-color: #000;
	
	width: 230px;
	
	top: 0;
	right: 0;
	bottom: 0;
	
	display: flex;
	
	flex-direction: column
}
	
	.actor-list > .actor-list-box {
		border-radius: 6px;
		
		margin: 0 5px 30px 5px;
		
		flex: 1;
		
		padding: 0;
		
		overflow: auto;
		
		background: var(--background-app);
	}
	
	.actor-list > .actor-list-box.simple-block {
		flex: none;
		
		margin-bottom: 0;
		
		border-radius: 0px;
		
		color: #777;
		
		height: 30px;
		
		display: flex;
		flex-direction: row;
	}
	
	.actor-list > .actor-list-box.simple-block + .simple-block {
		margin-bottom: 6px;
	} 
		
		.actor-list > .actor-list-box.simple-block.filter > div {
			width: 25px;
			height: 25px;
			
			cursor: pointer;
			
			opacity: .3;
		}
		
		.actor-list > .actor-list-box.simple-block.filter > div.active {
			opacity: 1;
		}
		
		.actor-list > .actor-list-box.simple-block.filter > div + div {
			margin-left: 4px;
		}
		
		
		.actor-list > .actor-list-box.simple-block .search-input {
			border-radius: 12px;
			
			border-width: 0;
			
			height: 22px;
			
			margin: 0 10px;
			
			padding: 0 10px;
			
			background: #444;
			
			color: #999;
			font-size: 13px;
		}
		
		.actor-list > .actor-list-box > .list {
			display: flex;
			flex-wrap: wrap;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item {
			position: relative;
			
			width: 100%;
			
			flex-grow: 0;
			
			color: #777;
			
			font-size: 13px;
			
			line-height: 30px;
			
			margin-bottom: 1px;
			
			cursor: pointer;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.over-top:before {
			position: absolute;
			
			content: '';
			
			top: -5px;
			left: 0;
			
			width: 8px;
			height: 8px;
			
			border-radius: 50%;
			
			border: solid 2px #4A90E2;
			
			pointer-events: none;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.over-top:after {
			position: absolute;
			
			content: '';
			
			top: 0;
			left: 10px;
			right: 0;
			height: 2px;
			
			background: #4A90E2;
			
			pointer-events: none;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.over-bottom:before {
			position: absolute;
			
			content: '';
			
			bottom: -5px;
			left: 0;
			
			width: 8px;
			height: 8px;
			
			border-radius: 50%;
			
			border: solid 2px #4A90E2;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.over-bottom:after {
			position: absolute;
			
			content: '';
			
			bottom: 0;
			left: 10px;
			right: 0;
			height: 2px;
			
			background: #4A90E2;
			
			pointer-events: none;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.over-bottom-group > .item:before {
			position: absolute;
			
			content: '';
			
			bottom: -5px;
			left: 5px;
			
			width: 8px;
			height: 8px;
			
			border-radius: 50%;
			
			border: solid 2px #4A90E2;
			
			pointer-events: none;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.over-bottom-group > .item:after {
			position: absolute;
			
			content: '';
			
			bottom: 0;
			left: 15px;
			right: 0;
			height: 2px;
			
			background: #4A90E2;
			
			pointer-events: none;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item > .item:hover {
			background-color: rgba(255,255,255,.1)
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.no-hover > .item:hover {
			background-color: rgba(255,255,255,.025)
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.select > .item {
			background-color: rgba(55, 226, 245, 0.2);
			color: #bbb			
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.select.no-hover > .item {
			background-color: rgba(255,255,255,.15);
			color: #bbb
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.hover > .item {
			background-color: rgba(255,255,255,.2);
			color: #bbb
		}
		.actor-list > .actor-list-box > .list .actor-list-item.hover > .item:hover {
			background-color: rgba(255,255,255,.1);
			color: #777;
		}
		
		.actor-list > .actor-list-box > .list .actor-list-item.select.hover > .item {
			background-color: rgba(55, 226, 245, 0.4);
			color: #bbb				
		}
			
		.actor-list > .actor-list-box > .list .actor-list-item:before > .item {
			position: absolute;
			
			content: '';
			
			top: 0;
			left: 7px;
			right: 7px;
			
			height: 1px;
			
			background: rgba(255,255,255,.1);
			
			pointer-events: none;
		}.
		
		.actor-list > .actor-list-box > .list .actor-list-item:after {
			position: absolute;
			
			content: '';
			
			bottom: ;
			left: 7px;
			right: 7px;
			
			height: 1px;
			
			background: rgba(0,0,0,.2);
			
			pointer-events: none;
		}
		
			.actor-list > .actor-list-box > .list .actor-list-item > div {
				margin: 0;
				
				display: flex;
				height: 30px;
				
				position: relative;
			}
				
				.actor-list > .actor-list-box > .list .actor-list-item > div > .locked {
					position: absolute;
					
					width: 10px;
					height: 100%;
					
					left: 0;
					top: 0;
				}
				
				.actor-list > .actor-list-box > .list .actor-list-item > div > .arrow {
					position: relative;
					
					width: 12px;
					
					margin-left: 7px;
				}
					
					.actor-list > .actor-list-box > .list .actor-list-item > div > .arrow > div {
						position: relative;
						
						width: 100%;
						height: 100%;
					}
				
					.actor-list > .actor-list-box > .list .actor-list-item > div > .arrow > div:after {
						position: absolute;
						
						content: '';
						
						top: calc(50% - 3px);
						left: calc(50% - 3px);
						
						border-top: solid 6px #fff;
						border-left: solid 3px transparent;
						border-right: solid 3px transparent;
						
						transform: rotateZ(-90deg);
						
						transition: all .2s ease-in-out;
					}
				
					.actor-list > .actor-list-box > .list .actor-list-item.open > div > .arrow > div:after {
						transform: rotateZ(0);
					}
					
				
				.actor-list > .actor-list-box > .list .actor-list-item > div > .icon {
					width: 28px;
					opacity: .6
				}
				
				.actor-list > .actor-list-box > .list .actor-list-item > div > .name {
					flex: 1;
					
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					
					padding-right: 5px;
					padding-left: 3px;
				}
				
				.actor-list > .actor-list-box > .list .actor-list-item > div > .name:focus {
					background: #fff;
					color: #333;
				}
				
				.actor-list > .actor-list-box > .list .actor-list-item > div > .options {
					width: 60px;
					
					display: flex;
					
					margin-right: 5px;
					
					display: none;
				}
				
				.actor-list > .actor-list-box > .list .actor-list-item:hover > div > .options,
				.actor-list > .actor-list-box > .list .actor-list-item.select > div > .options {
					display: flex;
				}
				
					.actor-list > .actor-list-box > .list .actor-list-item > div > .options > div {
						flex: 0 0 calc(100% / 3);
					}
						
						.actor-list > .actor-list-box > .list .actor-list-item > div > .options > div > div {
							width: 100%;
							height: 100%;
							
							opacity: .3;
							
							/*display: none;*/
						
							background-size: 22px;
							background-position: center center;
							background-repeat: no-repeat;
						}
						
						.actor-list > .actor-list-box > .list .actor-list-item > div > .options > div > div.active {
							display: block;
							opacity: 1;
						}
				
						.actor-list > .actor-list-box > .list .actor-list-item.select > div > .options > div > div {
							display: block;
						}
						
					.actor-list > .actor-list-box > .list .actor-list-item > div > .options > div > .mask {
						background-image: url('https://lib.jeekjee.net/media/ui_icons/tools_rectangle_white@3x.png');
					}
					
					.actor-list > .actor-list-box > .list .actor-list-item > div > .options > div > .lock {
						background-image: url('https://lib.jeekjee.net/media/ui_icons/meta_unlock_white@3x.png');
					}
					
					.actor-list > .actor-list-box > .list .actor-list-item > div > .options > div >.hide {
						background-image: url('https://lib.jeekjee.net/media/ui_icons/meta_hide_white@3x.png');
					}
				
				.actor-list > .actor-list-box > .list .actor-list-item > .childList {
					background: rgba(0,0,0,.2);
					
					margin: 0;
					
					height: auto;
					
					display: none;
					
					flex-wrap: wrap;
				}
				
				.actor-list > .actor-list-box > .list .actor-list-item.open > .childList {
					display: flex;
				}
				







.page-title {
	position: absolute;
	
	
	background-color: #00000033;
	
	width: auto;
	height: 14px;
	
	top: 10px;
	
	color: #EEE;
  font-size: 12px;
  
  border-radius: 12px;
  
  padding: 4px 16px 6px 16px;
  
  cursor: pointer;
}






.shadow-box {
	
}
	
	.shadow-box > div > .row + .row {
		padding: 8px 0 6px;
	}
	
		.shadow-box > div > .row > .add {
			width: 18px;
			height: 18px;
			
			background-image: url('https://lib.jeekjee.net/media/ui_icons/new_project_white@3x.png');
			background-size: 28px;
			background-position: center center;
			background-repeat: no-repeat;
			
			margin: 0 auto;
			
			cursor: pointer;
		}
		
		.shadow-box.empty > div > .row > .add {
			width: 40px;
			height: 40px;
			
			background-size: contain;
		}

.shadow-list {
	width: 100%;
	
	display: flex;
}

.shadow-list + .shadow-list {
	margin-top: 11px;
}
	
	.shadow-list > .delete {
		width: 24px;
		
		background-image: url('https://lib.jeekjee.net/media/ui_icons/selClear_white@3x.png');
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		
		cursor: pointer;
	}






.filter-box {
	
}
	
	.filter-box > div > .select {
		position: absolute;
		
		left: 5px;
		right: 5px;
		bottom: 5px;
		
		background: var(--background-app);
		
		overflow: auto;
		
		border-radius: 6px;
		
		max-height: 170px;
		
		border: solid 2px #999;
		
		box-shadow: 0 0 10px rgba(0,0,0,.7);
	}
		
		.filter-box > div > .select > div {
			padding: 8px;
			
			color: #fff;
			font-size: 12px;
			
			cursor: pointer;
			
			border-top: solid 1px rgba(255,255,255,.2);
			border-bottom: solid 1px rgba(0,0,0,.2);
		}
		
		.filter-box > div > .select > div:hover {
			background: rgba(255,255,255,.1);
		}
		
		.filter-box > div > .row + .row {
			padding: 8px 0 6px;
		}
		
			.filter-box > div > .row > .add {
				width: 18px;
				height: 18px;
				
				background-image: url('https://lib.jeekjee.net/media/ui_icons/new_project_white@3x.png');
				background-size: 28px;
				background-position: center center;
				background-repeat: no-repeat;
				
				margin: 0 auto;
				
				cursor: pointer;
			}
			
			.filter-box.empty > div > .row > .add {
				width: 40px;
				height: 40px;
				
				background-size: contain;
			}

.filter-list {
	width: 100%;
	
	display: flex;
}

.filter-list + .filter-list {
	margin-top: 11px;
}
	
	.filter-list > .delete {
		width: 24px;
		
		background-image: url('https://lib.jeekjee.net/media/ui_icons/selClear_white@3x.png');
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		
		cursor: pointer;
	}

.active-single {
		width: 17px;
		height: 24px;
		
		margin-top: 2px;
		
		min-width: 17px;
		max-width: 17px;
		
		color: #fff;
		font-size: 10px;
		text-transform: uppercase;
		
		line-height: 27px;
		
		padding-left: 7px;
	}

.prop {
		width: 17px;
		height: 24px;
		
		margin-top: 2px;
		
		min-width: 17px;
		max-width: 17px;
		
		color: #fff;
		font-size: 10px;
		text-transform: uppercase;
		
		line-height: 27px;
		
		padding-left: 7px;
	}

















.design-system {
	width: 230px;
	
	margin-left: 5px;
}
	.design-system .color-colum {
		width: 50%;
		
		margin-right: 1px
	}
	
	.design-system .color-colum + .color-colum {
		margin-right: 0;
		margin-left: 1px;
	}
		
		.design-system .color-colum > .color-big {
			position: relative;
			
			width: calc(100% - 2px);
			height: 116px;
			
			margin-bottom: 2px;
			
			font-size: 10px;
			
			border: dotted 1px #666;
			
			cursor: pointer;
		}
			
			.design-system .color-colum > .color-big > .label {
				position: absolute;
				
				right: 0;
				bottom: 15px;
				left: 0;
				
				text-align: center;
				font-size: 10px;
				
				opacity: .7;
				
				pointer-events: none;
				
				z-index: 5;
			}
			
			.design-system .color-colum > .color-big > .add {
				position: absolute;
				
				width: 14px;
				height: 14px;
				
				top: calc(50% - 20px);
				left: calc(50% - 7px);
				
				text-align: center;
				font-size: 20px;
				
				opacity: .5;
				
				pointer-events: none;
			}
			
			.design-system .color-colum > .color-big > .mode {
				position: absolute;
				
				width: 16px;
				height: 16px;
				
				bottom: 4px;
				left: 4px;
				
				text-align: center;
				font-size: 10px;
				color: #eee;
				line-height: 16px;
				
				z-index: 5;
			}
			
			.design-system .color-colum > .color-big > .expand {
				position: absolute;
				
				width: 16px;
				height: 16px;
				
				bottom: 4px;
				right: 4px;
				
				text-align: center;
				font-size: 14px;
				
				background: url('https://lib.jeekjee.net/media/ui_icons/sdown_white@3x.png');
				background-size: contain;
				background-position: center center;
				background-repeat: no-repeat;
				
				z-index: 5;
			}
		
		.design-system .color-colum .color-colum-list:empty {
			position: relative;
		}
		
		.design-system .color-colum .color-colum-list > div {
			margin-bottom: 2px
		}
	
	.design-system .color-list {
		width: 100%;
		
		display: flex;
		
		flex-flow: row wrap;
	}
	
	.design-system .color-list:empty {
		position: relative;
		
		border: dotted 1px #666;
		
		min-height: 75px;
	}
	
	.design-system .color-list:empty:after {
		position: absolute;
		
		content: '+';
		
		width: 20px;
		height: 20px;
		
		top: calc(50% - 10px);
		left: calc(50% - 10px);
		
		font-size: 16px;
		color: #666;
		line-height: 20px;
		text-align: center;
	}
	
		.design-system .color-list > .color-item {
			width: calc((100% - 2px * 3) / 4);
			
			margin-bottom: 2px;
			margin-right: 2px;
			
			font-size: 11px;
		}
		
		
		.design-system .color-list > .color-item:nth-child(4n+4) {
			margin-right: 0;
		}
	

	.design-system .color-item .color-item-bg {
		position: relative;
		
		width: calc(100% - 10px);
		height: 30px;
		
		text-align: center;
		
		line-height: 30px;
		
		font-size: 11px;
		
		padding: 0 5px;
		
		cursor: pointer;
		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		
		/* border: solid 1px rgba(0,0,0,.2); */
	}
	
	.design-system .color-item .color-item-bg.slc:after {
		position: absolute;
		
		content: '';
		
		top: -8px;
		right: -8px;
		
		width: 12px;
		height: 12px;
		
		background: #fff;
		
		border: solid 1px #000;
		
		transform: rotateZ(-45deg)
	}
	
		.design-system .color-item.select .color-item-bg {
			width: calc(100% - 10px);
			height: 26px;
			
			border: solid 2px #24bdf0;
			
			line-height: 26px;
			
			padding: 0 3px;
		}
	
	
	.design-system .color-item.primary,
	.design-system .color-item.accent {
		width: 100%;
		height: 100%;
	}
	
	.design-system .color-item.primary.select,
	.design-system .color-item.accent.select {
		height: calc(100% - 4px);
	}
		
		.design-system .color-item.primary .color-item-bg,
		.design-system .color-item.accent .color-item-bg {
			height: 100%;
			
			text-align: left;
		}
	
	.design-system .color-item.primary .color-item-bg.slc:after,
	.design-system .color-item.accent .color-item-bg.slc:after {
		width: 16px;
		height: 16px;
		
		top: -9px;
		right: -9px;
	}
	
	.design-system .color-add {
		width: calc(100% - 2px);
		height: 28px;
		
		text-align: center;
		font-size: 12px;
		
		line-height: 30px;
		
		border: dotted 1px #666;
		
		cursor: pointer;
	}






#canvas.xray > div * {
	background: transparent !important;
	
	border-color: transparent !important;
	
	box-shadow: 0 0 0 1px #000 !important;
	
	filter: none !important;
	
	color: #000 !important;
	
	opacity: 1 !important;
}

#canvas.xray > div * video {
	display: none !important;
}

#canvas.xray > div [data-img="1"] {
	background: #efefef !important;
}

#canvas.xray > div *.persP-Slide {
	background: #fff !important;
}



.message-key {
	position: absolute;
	
	bottom: 40px;
	
	background-color: #000;
	
	font-size: 12px;
	color: #ccc;
	text-align: center;
	
	border-radius: 6px;
	
	padding: 8px 20px;
	
	box-shadow: 0 0 32px #00000066;
	
	line-height: 28px;
	
	pointer-events: none;
}
	.message-key > sep {
		display: inline-block;
		
		width: 20px;
	}
	
	.message-key > key {
		display: inline-block;
		
		border: solid 1px #fff;
		
		font-size: 9px;
		color: #fff;
		text-transform: uppercase;
		
		padding: 3px 8px;
		
		margin: 0 4px;
		
		border-radius: 4px;
		
		line-height: initial;
	}








.color-palette {
	position: absolute;
	
	bottom: calc(100% + 10px);
	left: calc(50% - (225px / 2));
	
	width: 225px;
	
	background: #333;
	
	border-radius: 4px;
	
	/* border: solid 2px #888; */
	
	z-index: 10;
	z-index: 11;
	
	border: solid 2px #666;
	
	box-shadow: 0 10px 40px 0 rgba(0,0,0,.7),
							0 5px 12px rgba(0,0,0,.8);
}

.color-palette.bottom {
	top: calc(100% + 10px);
	bottom: auto;
}

	.color-palette > .arrow {
		position: absolute;
		
		top: calc(100% - 5px);
		left: calc(50% - 4px);
		
		width: 10px;
		height: 10px;
		
		background: #333;
	
		transform: rotateZ(-45deg);
		
		border: solid 2px #666;
		
		border-top-width: 0;
		border-right-width: 0;
		
	}
	
	.color-palette.bottom  > .arrow {
		top: auto;
		bottom: calc(100% - 5px);
		
		border-top-width: 2px;
		border-right-width: 2px;
		
		border-left-width: 0;
		border-bottom-width: 0;
	}
	
	.color-palette > .palette {
		position: relative;
		
		width: 170px;
		height: 130px;
		
		margin: 12px 0 0 12px;
		
		cursor: pointer;
		
		/* overflow: hidden; */
		
		border-radius: 3px;
		
		display: inline-block;
	}
		
		.color-palette > .palette > .canvas {
			position: relative;
			
			width: 100%;
			height: 100%;
				
			border-radius: 3px;
			
			overflow: hidden;
		}
			
			.color-palette > .palette > .canvas > canvas {
				width: 100%;
				height: 100%;
			}
		
		.color-palette > .palette > .selector {
			position: absolute;
			
			top: calc(-8px + ((100%) * 0));
			left: calc(-8px + ((100%) * 0));
			
			width: 12px;
			height: 12px;
			
			border: solid 2px white;
			
			border-radius: 50%;
		}
	
	
	.color-palette > .spectrum {
		position: relative;
		
		width: 19px;
		height: 130px;
		
		margin: 10px 0 0 10px;
		
		cursor: pointer;
		
		display: inline-block;
	}
		
		.color-palette > .spectrum > .canvas {
			position: relative;
			
			width: 100%;
			height: 100%;
			
			border-radius: 3px;
		
			overflow: hidden;
		}
			
			.color-palette > .spectrum > .canvas > canvas {
				width: 100%;
				height: 100%;
			}
		
		.color-palette > .spectrum > .selector {
			position: absolute;
			
			top: calc(-5px + ((100%) * 0));
			left: -3px;
			
			width: 19px;
			height: 4px;
			
			border: solid 3px white;
			
			border-radius: 2px;
		}
		
		.color-palette > .spectrum > .selector:after {
			position: absolute;
			
			content: '';
			
			top: -1px;
			left: -10px;
			
			width: 7px;
			height: 6px;
			
			background: linear-gradient(90deg, #ffffff00, #ffffff);
		}
	
	.color-palette > .hex-Color-mode {
		margin: 10px 12px 0;
		padding: 0;
		
		height: 29px;
		
		display: flex;
	}
		
		.color-palette > .hex-Color-mode > input {
			width: 100%;
			height: calc(100% - 10px - 4p);
			
			padding: 5px 10px;
			margin: 0;
			
			border: solid 2px #ccc;
			
			border-radius: 3px;
			
			color: #ccc;
			font-weight: bold;
			font-size: 14px;
			
			background: #111;
		}
	
		.color-palette > .hex-Color-mode > .format_btn {
			border: solid 2px #666;
			
			width: 92px;
			
			margin-left: 10px;
			
			line-height: 25px;
			text-align: center;
			text-transform: uppercase;
			color: #ccc;
			font-size: 11px;
			font-weight: bold;
			
			cursor: pointer;
			
			border-radius: 3px;
		}
	
	.color-palette > .color-format {
		margin: 10px 12px 10px;
		
		display: flex;
	}
		
		.color-palette > .color-format > div {
			width: calc((100% - 20px) / 3);
			height: 25px;
			
			border: solid 2px #666;
			
			border-radius: 3px;
			
			background: #111;
			
			display: flex;
		}
			
			.color-palette > .color-format > div > div {
				width: 16px;
				
				line-height: 25px;
				color: #727272;
				text-transform: uppercase;
				text-align: center;
				font-size: 11px;
			}
			
			.color-palette > .color-format > div > input {
				width: calc(100% - 16px);
				
				border-width: 0;
				
				background: transparent;
				
				color: #fff;
				font-size: 13px;
			}
		
		.color-palette > .color-format > div + div {
			margin-left: 10px;
		}
	
	.color-palette > .color-slc {
		margin: 0 12px 10px;
	}
		
		.color-palette > .color-slc > .title {
			position: relative;
			
			color: #999;
			font-size: 11px;
			text-transform: uppercase;
			font-weight: bold;
			
			margin-bottom: 5px;
			
			cursor: pointer;
		}
		
		.color-palette > .color-slc > .title:after {
			position: absolute;
			
			content: '';
			
			top: calc(50% - 2.5px);
			right: 5px;
			
			border-top: solid 5px #999;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			
			transition: all .2s ease-in-out;
		}
		
		.color-palette > .color-slc.hide > div {
			display: none;
		}
		
		.color-palette > .color-slc.hide > .title {
			display: block;
		}
		
		.color-palette > .color-slc.hide > .title:after {
			transform: rotateZ(180deg)
		}
		
			.color-palette > .color-slc > div > .color {
				position: relative;
				
				width: 20px;
				height: 20px;
				
				display: inline-block;
				
				line-height: 20px;
				text-align: center;
				font-size: 10px;
				font-weight: bold;
				
				vertical-align: top;
				
				cursor: pointer;
				
				border-radius: 2px;
				
				margin: 0 3px 3px 0;
			}
		
			.color-palette > .color-slc > div > .color.slc:after {
				position: absolute;
				
				content: '';
				
				top: -2px;
				right: -2px;
				bottom: -2px;
				left: -2px;
				
				border: solid 1px #ccc;
				
				border-radius: 3px;
				
				pointer-events: none;
			}
		
			.color-palette > .color-slc > div > .add {
				font-size: 12px;
				text-align: center;
				line-height: 20px;
			}











.modal {
	position: absolute;
	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	background: rgba(27,27,27,.95);
	
	cursor: pointer;
	
	z-index: 99;
}
	
	.modal > .box {
		position: relative;
		
		width: 400px;
		height: 300px;
		
		color: #ccc;
		
		box-shadow: 0 10px 35px rgba(0,0,0,.4), 
								0 5px 10px rgba(0,0,0,.35), 
								0 0px 5px rgba(0,0,0,.15);
								
		box-shadow: 0 0 7px rgba(0,0,0,.5), 
							0 12px 84px rgba(0,0,0,.5);
		
		cursor: default;
		
		background: #272727;
	}
	
	.modal > .box.simple {
		border-radius: 8px;
		
		background:  -webkit-linear-gradient(#2C2C2C 0%, #262525 100%) 
	}
		
		.modal > .box > .close {
			position: absolute;
			
			top: 10px;
			right: 15px;
			
			width: 30px;
			height: 30px;
			
			cursor: pointer;
		}
		
		.modal > .box > .title {
			position: absolute;
			
			top: -45px;
			left: 0;
			right: 0;
			
			height: 45px;
			
			
			text-transform: lowercase;
			font-size: 48px;
			color: rgba(255,255,255,.1);
			color: #9AB5B9;
			font-weight: 200;
			text-align: center;
			
			overflow: hidden;
			
			pointer-events: none;
		}
		
		.modal > .box > .inner {
			height: calc(100% - 104px);
			
			margin: 0 15px;
			padding: 10px 0px 20px 0px;
			
			color: #ddd;
			font-size: 14px;
			
			display: flex;
		}
			.modal > .box > .inner > .icon {
				position: absolute;
				
				left: -100px;
				
				width: 100px;
			}
			
			.modal > .box > .inner > .text {
				flex: 1
			}
		
		.modal > .box > .btns {
			text-align: center;
			
			margin: 0 15px;
			padding: 10px 0px 24px;
		}
			
			.modal > .box > .btns > div {
				width: 100%;
				
				text-align: center;
			}
				
				.modal > .box > .btns > div > div + div {
					margin-left: 2px;
				}
		
		.modal > .box .shadow {
			position: absolute;
			
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			
			background-image: radial-gradient(circle at 50% -40%, rgba(39,39,39,0) 45%, rgba(39,39,39,1) 90%);
			
			
			pointer-events: none;
		}
		
		.modal > .box .shadow-2 {
			position: absolute;
			
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#272727+46,272727+100&0+46,1+100 */
background: -moz-linear-gradient(left, rgba(39,39,39,0) 46%, rgba(39,39,39,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(39,39,39,0) 46%,rgba(39,39,39,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(39,39,39,0) 46%,rgba(39,39,39,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=1 ); /* IE6-9 */

			pointer-events: none;
		}
		
		.modal > .box .vertical-shadow {
			opacity: .15;
			
			background: rgba(255,255,255,0);
			background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
			background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(10%, rgba(255,255,255,1)), color-stop(90%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
			background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
			background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
			background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
			background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
		}
		
		.modal > .box .vertical-shadow-black {
			opacity: 1;
			
			background: rgba(0,0,0,0);
			background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
			background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(10%, rgba(0,0,0,1)), color-stop(90%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)));
			background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
			background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
			background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
			background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
		}




.project-manager {
	display: flex;
	height: 100%;
}
	.project-manager > .project-list {
		width: 250px;
		height: 100%;
		
		background: #1e1e1e;
	}
		
		.project-manager > .project-list .search {
			background: #121212;
			
			width: calc(100% - 30px);
			
			padding: 15px;
			
			border-bottom: solid 1px #000;
			
			position: relative;
			
			display: flex;
		}
		
			.project-manager > .project-list .search > input {
				background: #000;
				
				width: 100%;
				
				border: solid 1px #333;
				
				border-radius: 25px;
				
				color: #ccc;
				font-size: 13px;
				
				padding: 6px 30px 6px 30px;
			}
			
			.project-manager > .project-list .search > .empty {
				position: absolute;
				
				top: calc(50% - 7px);
				right: 25px;
				
				width: 14px;
				height: 14px;
				
				border-radius: 50%;
				
				background-color: #444;
				
				background-image: url('https://lib.jeekjee.net/media/ui_icons/selClear_black@3x.png');
				background-size: contain;
				background-position: center center;
				background-repeat: no-repeat;
				
				cursor: pointer;
			}
			
			.project-manager > .project-list .search > .icon {
				position: absolute;
				
				top: calc(50% - 7px);
				left: 25px;
				
				width: 14px;
				height: 14px;
				
				background-image: url('https://lib.jeekjee.net/media/ui_icons/search_white@3x.png');
				background-size: 29px;
				background-position: center center;
				background-repeat: no-repeat;
				
				opacity: .5;
			}
		
		.project-manager > .project-list > .list {
			overflow: auto;
			
			width: 100%;
			height: calc(100% - 63px - 50px);
		}
		
		.project-manager > .project-list > .list > .list-item {
			position: relative;
			
			padding: 8px 14px;
			
			border-top: solid 1px rgba(255,255,255,.1);
			border-bottom: solid 1px rgba(0,0,0,.5);
			
			font-size: 12px;
			
			cursor: pointer;
			
			display: flex;
		}
		
		.project-manager > .project-list > .list > .list-item:hover {
			background: rgba(255,255,255,.05);
		}
		
		.project-manager > .project-list > .list > .list-item.slc,
		.project-manager > .project-list > .list > .list-item.slc:hover {
			background: rgba(255,255,255,.3);
		}
		
		/*
		.project-manager > .project-list > .list-item.slc:after {
			position: absolute;
			
			content: '';
			
			top: 0;
			left: 0;
			
			border-left: 7px solid var(--background-app);
			border-top: solid 16px transparent;
			border-bottom: solid 16px transparent;
		}
		*/
		
			.project-manager > .project-list > .list > .list-item > .title {
				flex: 1;
			}
			
			.project-manager > .project-list > .list > .list-item > .pinned {
				width: 16px;
				
				background-image: url('https://lib.jeekjee.net/media/ui_icons/pin_white@3x.png');
					
				background-size: 35px;
				background-position: center center;
				background-repeat: no-repeat;
				
				cursor: pointer;
				
				opacity: 0;
				
				pointer-events: none;
			}
			
			.project-manager > .project-list > .list > .list-item:hover > .pinned {
				opacity: .25;
				pointer-events: all;
			}
			
			.project-manager > .project-list > .list > .list-item > .pinned.slc,
			.project-manager > .project-list > .list > .list-item:hover > .pinned.slc {
				opacity: 1;
			}
			
			.project-manager > .project-list > .list > .list-item > .opened {
				position: absolute;
				
				top: 0;
				left: 0;
				bottom: 0;
				
				width: 10px;
				
				background: var(--accent);
			}
			
			.project-manager > .project-list > .list > .list-item > .delete {
				width: 16px;
					
				background-size: 26px;
				background-position: center center;
				background-repeat: no-repeat;
				
				margin-left: 8px;
				
				cursor: pointer;
				
				opacity: 0;
				
				pointer-events: none;
			}
			
			.project-manager > .project-list > .list > .list-item:hover > .delete {
				opacity: 1;
				
				pointer-events: all;
			}
		
		.project-manager > .project-list > .import {
			width: 100%;
			height: 50px;
			
			background: #999;
			
			cursor: pointer;
		}
			
			.project-manager > .project-list > .import > div {
				color: #333;
				font-size: 18px;
				font-weight: bold;
			}
	
	.project-manager > .project-render {
		width: calc(100% - 252px);
		height: 100%;
		
		overflow: hidden;
		
		perspective: 700px;
	}
	
	.project-manager > .project-render > .render-hook {
		width: 100%;
		height: 100%;
		
		perspective: 700px;
	}
		
		.project-manager > .project-render > .render-hook > .preview {
			width: 100%;
			height: 100%;
			
			position: relative;
			
			top: -60px;
			
			transform: rotateZ(-24deg) rotateX(25deg) rotateY(15deg) skew(25deg) scale(1);
			
			transition: all 180s linear;
			
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}
		
		.project-manager > .project-render > .render-hook > .preview.zoom {
			transform: rotateZ(-24deg) rotateX(25deg) rotateY(15deg) skew(25deg) scale(2);
		}
			
			.project-manager > .project-render > .render-hook > .preview > div {
				position: relative;
				
				width: 50%;
				height: 50%;
				
				display: inline-block;
				
				vertical-align:  top;
			}
	
	.project-manager > .bottom_hook {
		position: absolute;
		
		left: calc(50% - (465px / 2) + 126px);
		bottom: 20px;
		
		width: 465px;
		
		height: 30px;
		
		display: flex;
	}
		
		.project-manager > .bottom_hook > div {
			width: 75px;
			height: 30px;
			
			font-size: 12px;
			
			text-align: center;
		}
		
		.project-manager > .bottom_hook > div + div {
			margin-left: 3px;
		}
	
	.project-manager > .right_hook {
		position: absolute;
		
		top: 50px;
		right: 20px;
		bottom: 100px;
		
		width: 100px;
		
		display: flex;
		
		flex-direction: column;
	}
	
		.project-manager > .right_hook .title {
			font-size: 10px;
			color: #fff;
			text-align: right;
		}
		
		.project-manager > .right_hook .text {
			font-size: 10px;
			color: #909090;
			text-align: right;
		}
		
		.project-manager > .right_hook .text + .title {
			margin-top: 20px;
		}
		
		.project-manager > .right_hook .version {
			width: 75px;
			height: 20px;
			
			font-size: 10px;
			text-transform: uppercase;
			
			margin: 0 0 0 auto;
			
			padding: 0 10px;
			border-radius: 20px;
			
			background: #515453;
			
			display: flex;
			
			cursor: pointer;
		}
		
		.project-manager > .right_hook .version + .version {
			margin-top: 4px;
		}
		
		.project-manager > .right_hook .version.active {
			background-color: #50E3C2;
			
			color: #000;
		}
		
		.project-manager > .right_hook .version > div {
			line-height: 21px;
		}
		
		.project-manager > .right_hook .version > .mode {
			margin-right: 9px;
		}
		
		
		.project-manager > .right_hook .team {
			width: 100%;
			height: 20px;
			
			display: flex;
			
			position: relative;
		}
		
		.project-manager > .right_hook .team + .team {
			margin-top: 10px;
		}
			
			.project-manager > .right_hook .team > .name {
				line-height: 20px;
				color: #909090;
				font-size: 12px;
				text-align: right;
				text-transform: capitalize;
				
				flex: 1;
			}
		
			.project-manager > .right_hook .team > .dot {
				width: 20px;
				height: 20px;
				
				background: #ccc;
				
				border-radius: 50%;
				
				margin-left: 10px;
				
				font-size: 10px;
				text-align: center;
				line-height: 20px;
				color: #fff;
				text-transform: uppercase;
				font-weight: bold;
			}
		
			.project-manager > .right_hook .team > .connected {
				width: 6px;
				height: 6px;
				
				background: #90ecf3;
				
				border-radius: 50%;
				
				position: absolute;
				
				top: calc(50% - 3px);
				right: -10px;
			}








.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}







@-webkit-keyframes hvr-wobble-horizontal {
  33.3% {
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
  }
  66.6% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  33.3% {
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
  }
  66.6% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}





.alerts-box {
	position: absolute;
	
	top: 0;
	left: 0;
	right: 0;
	
	/*height: 38px;*/
	
	z-index: 90;
}
	
	.alerts-box > .alert {
		position: relative;
		
		width: 100%;
		height: 38px;
		
		display: flex;
	}
	
	.alerts-box > .alert:before {
		position: absolute;
		
		content: '';
		
		top: 0;
		right: 0;
		left: 0;
		
		height: 1px;
		
		background: rgba(255,255,255,.2);
	}
	
	.alerts-box > .alert:after {
		position: absolute;
		
		content: '';
		
		right: 0;
		bottom: 0;
		left: 0;
		
		height: 1px;
		
		background: rgba(0,0,0,.15);
	}
	
		
		.alerts-box > .alert > div {
			line-height: 38px;
			
			font-size: 12px;
		}
		
		.alerts-box > .alert > .title {
			text-transform: uppercase;
			font-weight: bold;
			
			padding-left: 15px; 
		}
		
		.alerts-box > .alert > .body {
			padding: 0 15px; 
			
			flex: 1;
		}
		
		.alerts-box > .alert > .date {
			padding-right: 15px;
			
			font-size: 10px;
		}
		
		.alerts-box > .alert > .delete {
			width: 38px;
			
			background-image: url('https://lib.jeekjee.net/media/ui_icons/selClear_white@3x.png');
			background-size: 22px;
			background-position: center center;
			background-repeat: no-repeat;
			
			cursor: pointer;
		}








.cursor-layer {
	position: absolute;
	
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
/* 	background: rgba(255,0,0,.3); */
	
	z-index: 10;
}

	.cursor-layer > div {
		position: absolute;
		
		width: 0;
		height: 0;
		
		border-bottom: solid 15px #000;
		border-left: solid 8px transparent;
		border-right: solid 8px transparent;
		
		transform: rotateZ(-30deg);
		
		z-index: 10;
	}
	
		.cursor-layer > div > div {
			position: absolute;
			
			width: 20px;
			height: 20px;
			
			top: 20px;
			left: -10px;
			
			border-radius: 50%;
			
			line-height: 20px;
			text-align: center;
			font-size: 10px;
			text-transform: uppercase;
			
			transform: rotateZ(30deg);
		}







#app > .panel-right > .options > .props > div > .content > div > .content.messages-box {
	display: block;
	height: calc(100% - 80px);
}

.messages-box {
}
	
	.messages-box > div {
		background: #333;
		
		margin: 5px;
		padding: 8px;
	}
	
	.messages-box > div.me {
		border-radius: 8px 8px 0 8px;
		
		margin-left: 55px;
		
		background: #555;
	}
	
	.messages-box > div.other {
		border-radius: 0 8px 8px 8px;
		
		margin-right: 55px;
	}
		
		.messages-box > div .autor {
			color: #bbb;
			font-size: 10px;
			font-weight: bold;
		}
		
		.messages-box > div .date {
			color: #888;
			font-size: 9px;
		}
		
		.messages-box > div .msg {
			font-size: 12px;
			color: #eee;
			
			margin-top: 8px;
		}

.message-send {
	width: 100%;
	height: 70px;
	
	background: #111;
}
	
	.message-send > div {
		padding: 10px;
		
		display: flex;
	}
		
		.message-send > div > textarea {
			border-width: 0;
			
			background: #a2a2a2;
			
			font-size: 12px;
			color: #333;
			
			padding: 4px;
			
			border-radius: 3px;
			
			resize: none;
			
			height: calc(100% - 20px);
			width: calc(100% - 55px);
		}
		
		.message-send > div > .send {
			background: #3c3c3c;
			
			line-height: 50px;
			
			text-align: center;
			font-size: 10px;
			font-weight: bold;
			color: #999;
			border-radius: 3px;
			
			margin-left: 5px;
			
			cursor: pointer;
			
			width: calc(100% - 190px);
		}






.design-fonts-brand {
	width: 100%;
	
	display: flex;
	
	flex-flow: row wrap;
}

.design-fonts-brand:empty {
	min-height: 70px;
}
	
	.design-fonts-brand > .design-fonts-brand-item {
		width: 50%;
		height: 98px;
		
		position: relative;
		
		cursor: pointer;
	}
	
	.design-fonts-brand > .design-fonts-brand-item.active {
		width: calc(50% - 4px);
		height: 94px;
		
		border: solid 2px #24bdf0;
	}
	
	.design-fonts-brand > .design-fonts-brand-item:before {
		position: absolute;
		
		content: '';
		
		top: 0;
		left: 10px;
		right: 10px;
		
		height: 1px;
		
		background: #3E3E3E;
	}

	.design-fonts-brand > .design-fonts-brand-item:after {
		position: absolute;
		
		content: '';
		
		top: 10px;
		left: 0;
		bottom: 10px;
		
		width: 1px;
		
		background: #3E3E3E;
	}

	.design-fonts-brand > .design-fonts-brand-item:first-child:before {
		height: 0;
	}

	.design-fonts-brand > .design-fonts-brand-item:nth-child(odd):after {
		width: 0;
	}

	.design-fonts-brand > .design-fonts-brand-item:nth-child(2):before {
		height: 0;
	}
		
		.design-fonts-brand > .design-fonts-brand-item > div {
			padding: 18px;
		}
		
		.design-fonts-brand > .design-fonts-brand-item.active > div {
			padding: 16px;
		}
		
			.design-fonts-brand > .design-fonts-brand-item > div > .test {
				width: 100%;
				
				font-size: 15px;
				
				line-height: 21px;
			}
			
			.design-fonts-brand > .design-fonts-brand-item > div > .title {
				color: #fff;
				font-weight: bold;
				font-size: 10px;
			}
			
			.design-fonts-brand > .design-fonts-brand-item > div > .font {
				width: 100%;
				
				white-space: nowrap;
				
				text-overflow: ellipsis;
				font-size: 11px;
				color: #A9A9A9;
				
				margin-top: 5px;
				
				overflow: hidden;
			}
	
	.design-fonts-brand > .design-fonts-brand-item > .add {
		position: relative;
		
		width: calc(100% - 2px - 20px);
		height: calc(100% - 2px - 20px);
		
		border: dotted 1px #666;
		
		cursor: pointer;
		
		padding: 0;
		margin: 10px;
	}
	
	.design-fonts-brand > .design-fonts-brand-item > .add:after {
		position: absolute;
		
		content: '+';
		
    width: 14px;
    height: 14px;
    
    top: calc(50% - 7px);
    left: calc(50% - 7px);
    
    text-align: center;
    font-size: 20px;
    line-height: 14px;
    
    opacity: .5;
    
    pointer-events: none;
	}
		
		
	

.design-fonts-project {
	width: 100%;
}

.design-fonts-project:empty {
	min-height: 70px;
}
	
	.design-fonts-project > .design-fonts-project-item {
		background: #3F3F3F;
		
		width: 100%;
		
		cursor: pointer;
	}

	.design-fonts-project > .design-fonts-project-item.active {
		width: calc(100% - 4px);
		
		border: solid 2px #24bdf0;
	}
	
	.design-fonts-project > .design-fonts-project-item + .design-fonts-project-item {
		margin-top: 1px;
	}
	
		.design-fonts-project > .design-fonts-project-item > div {
			padding: 8px 15px
		}
		
		.design-fonts-project > .design-fonts-project-item.active > div {
			padding: 6px 13px
		}
			
			.design-fonts-project > .design-fonts-project-item > div > .title {
				color: #fff;
				font-weight: bold;
				font-size: 10px;
			}
			
			.design-fonts-project > .design-fonts-project-item > div > .font {
				width: 100%;
				height: 12px;
				
				line-height: 12px;
				
				font-size: 11px;
				color: #A9A9A9;
			}
			
			.design-fonts-project > .design-fonts-project-item > div > .test {
				width: 100%;
				height: 22px;
				
				line-height: 22px;
				
				font-size: 15px;
			}


.fonts-dropdown {
	position: absolute;
	
	top: 0;
	left: 5px;
	right: 30px;
	
	background: #282828;
	
	border-radius: 8px;
	
	border: solid 1px #4F4F4F;
	
	box-shadow: 0 5px 4px rgba(0,0,0,.08),	
							0 7px 16px rgba(0,0,0,.1);
}

	.fonts-dropdown > .arrow-border {
		position: absolute;
		
		border-bottom: 11px solid #4F4F4F;
		border-left: 11px solid transparent;
		border-right: 11px solid transparent;
		
		top: -11px;
		left: calc(50% - 11px);
	}
	.fonts-dropdown > .arrow {
		position: absolute;
		
		border-bottom: 9px solid #282828;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		
		top: -9px;
		left: calc(50% - 9px);
	}
	
	.fonts-dropdown > .fonts-title {
		padding: 16px 0 12px;
		
		text-align: center;
		color: #9AB5B9;
		font-size: 18px;
	}
	
	.fonts-dropdown > .fonts-dropdown-label {
		padding: 0 20px 10px;
		
		position: relative;
	}
	
	.fonts-dropdown > .fonts-dropdown-label +.fonts-dropdown-label {
		padding-top: 0;
	}
		
		.fonts-dropdown > .fonts-dropdown-label > .title {
			font-size: 12px;
			color: #fff;
		}
		
		.fonts-dropdown > .fonts-dropdown-label > input,
		.fonts-dropdown > .fonts-dropdown-label > textarea {
			width: calc(100% - 16px);
			height: 23px;
			
			border-width: 0;
			
			background: #212121;
			
			color: #A9A9A9;
			font-size: 12px;
			
			margin-top: 5px;
			
			padding: 0 8px;
			
			border-radius: 2px;
		}
		
		.fonts-dropdown > .fonts-dropdown-label > textarea {
			height: 65px;
			
			resize: none;
			
			padding-top: 4px;
			padding-bottom: 4px;
		}

	.fonts-dropdown > .fonts-dropdown-buttons {
		padding: 8px 20px 16px;
		
		text-align: center;
	}


.font-mouse-modal {
	position: absolute;
	
	background-color: #333;
	
	width: 100;
	
	z-index: 5;
	
	pointer-events: none;
	
	border-radius: 3px;
	
	border: dashed 2px #444;
}
	
	.font-mouse-modal > div {
		position: relative;
		
		padding: 5px 12px;
		
		color: #bbb;
		font-size: 11px;
		white-space: nowrap;
		text-overflow: ellipsis;
		
		overflow: hidden;
	}
	
	.font-mouse-modal > div + div:after {
		position: absolute;
		
		content: '';
		
		top: 0;
		left: 5px;
		right: 5px;
		
		height: 1px;
		
		border-top: dashed 1px #555;
	}



.design-style-hook {
	width: 100%;
	
	display: flex;
	
	flex-flow: row wrap;
}

.design-style-hook:empty {
	min-height: 70px;
}
	
	.design-style-hook > .design-style-item {
		width: 100%;
		height: 42px;
		
		display: flex;
		
		cursor: pointer;
		
		overflow: hidden;
	}
	
	.design-style-hook > .design-style-item.active {
		width: calc(100% - 4px);
		height: 38px;
		
		border: solid 2px #24bdf0;
	}
	
	.design-style-hook > .design-style-item.grid {
		width: calc((100% - 4px) / 3);
		height: 89px;
		
		background: #3C3C3C;
		
		flex-flow: row wrap;
	}
	
	.design-style-hook > .design-style-item.grid.add {
		background: transparent;
	}
	
	.design-style-hook > .design-style-item + .design-style-item {
		margin-top: 2px;
	}
	
	.design-style-hook > .design-style-item.grid + .design-style-item.grid {
		margin-left: 2px;
		margin-bottom: 2px;
		margin-top: 0;
	}
	
	.design-style-hook > .design-style-item.grid + .design-style-item.grid:nth-child(3n+4) {
		margin-left: 0;
	}
	
	.design-style-hook > .design-style-item.grid.active {
		width: calc(((100% - 4px) / 3) - 4px);
		height: 85px;
	}
		
		.design-style-hook > .design-style-item > .preview {
			width: 54px;
			height: 100%;
			
			background: #3C3C3C;
			
			position: relative;
		}
		
		.design-style-hook > .design-style-item.grid > .preview {
			width: 100%;
			height: calc(100% - 22px);
		}
		
		.design-style-hook > .design-style-item.active > .preview {
			width: 50px;
		}
		
		.design-style-hook > .design-style-item.grid.active > .preview {
			width: 100%;
		}
		
		.design-style-hook > .design-style-item.active > .preview:after {
			position: absolute;
			
			content: '';
			
			top: 0;
			left: 100%;
			bottom: 0;
			
			width: 2px;
			
			background: #3C3C3C
		}
		
		.design-style-hook > .design-style-item > .text {
			width: calc(100% - 54px - 20px);
			height: calc(100% - 12px);
			
			padding: 6px 10px;
		}
		
		.design-style-hook > .design-style-item.grid > .text {
			width: 100%;
			height: 22px;
			
			line-height: 22px;
			text-align: center;
			
			padding: 0;
		}
		
		.design-style-hook > .design-style-item.active > .text {
			width: calc(100% - 54px - 20px - 2px);
			
			padding: 4px 8px 4px 12px;
		}	
		
		.design-style-hook > .design-style-item.grid.active > .text {
			width: 100%;
			height: 22px;
			
			padding: 2px 0 0;
		}
			
			.design-style-hook > .design-style-item > .text > .name {
				color: #A9A9A9;
				font-size: 11px;
				text-transform: capitalize;
				line-height: 16px;
				text-overflow: ellipsis;
				
				white-space: nowrap;
				
				overflow: hidden;
			}
			
			.design-style-hook > .design-style-item.grid > .text > .name {
				height: 100%;
				
				padding: 0 8px;
			}
			
			.design-style-hook > .design-style-item.grid.active > .text > .name {
				padding: 0 6px;
			}
			
			.design-style-hook > .design-style-item > .text > .description {
				color: #787878;
				font-size: 11px;
				line-height: 16px;
			}
			
			.design-style-hook > .design-style-item.grid > .text > .description {
				display: none;
			}
	
		.design-style-hook > .design-style-item > .add {
			position: relative;
			
			width: calc(100% - 2px);
			height: calc(100% - 2px);
			
			border: dotted 1px #666;
			
			cursor: pointer;
			
			padding: 0;
		}
		
		.design-style-hook > .design-style-item > .add:after {
			position: absolute;
			
			content: '+';
			
	    width: 14px;
	    height: 14px;
	    
	    top: calc(50% - 7px);
	    left: calc(50% - 7px);
	    
	    text-align: center;
	    font-size: 20px;
	    line-height: 14px;
	    
	    opacity: .5;
	    
	    pointer-events: none;
		}
		




.filter-box-compo {
	width: 85%;
	height: 24px;
	
	display: flex;
	
	margin: 0 auto;
}
	
	.filter-box-compo > .filters {
		flex: 1;
		
		display: flex
	}
		
		.filter-box-compo > .filters > div {
			width: 24px;
			height: 100%;
		
			cursor: pointer;
			
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			
			font-size: 10px;
			font-weight: bold;
			font-color: #ccc;
			text-transform: uppercase;
			line-height: 24px;
		}
		
		.filter-box-compo > .filters > .space {
			background: #444;
			
			width: 1px;
			height: calc(100% - 6px);
			
			margin-right: 7px;
			
			margin-top: 3px;
			margin-bottom: 3px;
		}
	
	.filter-box-compo > .show {
		width: 24px;
		width: 48px;
		
		display: flex;
	}
		
		.filter-box-compo > .show > div {
			width: 24px;
			height: 24px;
		
			cursor: pointer;
			
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
		}
		
		.filter-box-compo > .show > div.list {
			background-image:  url('https://lib.jeekjee.net/media/ui_icons/list_mode_white@3x.png');
		}
		
		.filter-box-compo > .show > div.grid {
			background-image:  url('https://lib.jeekjee.net/media/ui_icons/grid_mode_white@3x.png');
		}





.font-dropdown {
	width: 100%;
	height: 23px;
	
	background: #212121;
	
	color: #A9A9A9;
	font-size: 12px;
	
	border-radius: 2px;
	
	position: relative;
	
	margin-top: 5px;
}
	
	.font-dropdown > .select {
		width: calc(100% - 16px);
		height: 23px;
		
		padding: 0 8px;
		
		line-height: 23px;
		
		text-overflow: ellipsis;
		
		white-space: nowrap;
		
		overflow: hidden;
		
		position: relative;
		
		cursor: pointer;
	}
		
	.font-dropdown > .select:after {
		position: absolute;
		
		content: '';
		
		width: 0; 
		height: 0; 
		
		top: calc(50% - 2.5px);
		right: 7px;
		
		border-left: 5px solid transparent;
		border-top: 7px solid #fff;
		border-right: 5px solid transparent;
		
		transition: all .2s ease-in-out;
	}
	
	.font-dropdown.open > .select:after {
		transform: rotateZ(180deg)
	}
	
	
	.font-dropdown > .box {
		position: absolute;
		
		top: 100%;
		left: 0;
		right: 0;
		
		height: 150px;
		
		background: #111;
		
		display: none;
		
		overflow: auto;
	}
	
	.font-dropdown.open > .box {
		display: block;
	}










.persP-Slide {
	position: absolute;
}
	
	.persP-Slide > .persP-Slide-hook {
		position: absolute;
		
		top: 0;
		left: 0;
		
		width: 100%;
		height: 100%;
		
		perspective: 700px;
		
		z-index: 1;
		
		overflow: hidden;
	}
	
	.persP-Slide > .persP-Slide-fixed {
		position: absolute;
		
		top: 0;
		left: 0;
		
		width: 0;
		height: 0;
		
		overflow: visible;
		
		z-index: 2;
	}
	
	.persP-Slide > .persP-Slide-sot {
		position: absolute;
		
		top: 0;
		left: 0;
		
		width: 0;
		height: 0;
		
		overflow: visible;
		
		perspective: 700px;
		
		z-index: 3;
	}


.level-focus-languages {
	position: absolute;
	
	top: 0;
	left: 100px;
	
	width: calc(50% - 200px);
	height: 100%;
	
	background-color: #11111133;
}

.level-focus-tools {
	position: absolute;
	
	top: 0;
	left: calc(50% + 100px);
	right: 10px;
	
	height: 100%;
	
	background: #111111;
	
	overflow: hidden;
}


.level-focus-slide {
	position: absolute;
	
	left: calc(50% - 100px);
	top: 0;
	
	width: 200px;
	height: calc(100% - 7px);
	height: 100%;
	
	background: #080808;
	
	z-index: 5;
}

	.level-focus-slide > .level-focus-title {
		position: absolute;
		
		top: 0;
		left: 30px;
		right: 30px;
		
		height: calc(100% - 20px);
		
		font-size: 14px;
		color: #ffffff88;
		text-align: center;
		
		padding: 10px;
				
		cursor: pointer;
	}
		
		.level-focus-slide > .level-focus-title > .level-focus-title-name {
			position: absolute;
			
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			
			line-height: 40px;
			
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	
		.level-focus-slide > .level-focus-title > .drop {
			position: absolute;
			
			top: 40px;
			
			background: #000;
			
			left: -50px;
			right: -50px;
			
			max-height: 200px;
			
			overflow: auto;
			
			box-shadow: 0 10px 25px rgba(0,0,0,.3);
		}
			
			.level-focus-slide > .level-focus-title > .drop > div {
				padding: 15px;
				
				color: #999;
				font-size: 12px;
				text-transform: capitalize;
				
				cursor: pointer;
			}
			
			.level-focus-slide > .level-focus-title > .drop > div:hover {
				background: rgba(255,255,255,.1);
			}
		
	.level-focus-slide > .level-focus-arrows {
		position: absolute;
		
		top: 10px;
		left: 10px;
		
		width: 20px;
		height: 20px;
		
		cursor: pointer;
	}
	
	.level-focus-slide > .level-focus-arrows.level-focus-arrows-right {
		left: auto;
		
		right: 10px;
	}







.refactor-modal {
	margin: 0 40px;
	
	height: 100%;
}
	
	.refactor-modal > .title {
		font-size: 18px;
		color: #fff;
		text-align: center;
		
		margin-top: 30px;
	}
	
	.refactor-modal > .project {
		font-size: 18px;
		color: #5AD4DE;
		font-weight: bold;
		text-align: center;
		
		margin-top: 5px;
	}
	
	.refactor-modal > .text {
		font-size: 13px;
		color: #787878;
		
		margin-top: 16px;
	}
	
	.refactor-modal > .text + .text {
		margin-top: 5px;
	}





.import-box-list {
	width: calc(90% - 4px);
	height: calc(100% - 70px);
	
	background: #444;
	
	border: solid 2px #111;
	
	overflow: auto;
	
	border-radius: 8px;
	
	margin-top: 15px;
}
	
	.import-box-list > div {
		display: flex;
		
		width: 100%;
		height: 30px;
		
		cursor: pointer;
	}
	
	.import-box-list > div:hover {
		background: rgba(255,255,255,.1);
	}
	
	.import-box-list > div.slc {
		background: var(--accent);
	}
	
	.import-box-list > div.slc:hover {
		background: var(--accent);
	}
		
		.import-box-list > div > .name {
			flex: 1;
			
			color: #fff;
			font-size: 13px;
			line-height: 30px;
			text-overflow: ellipsis;
			white-space: nowrap;
			
			overflow: hidden;
			
			padding: 0 10px;
		}
		
		.import-box-list > div > .options {
			
			display: flex;
		}
		
			.import-box-list > div > .options > div {
				background: rgba(0,0,0,.1);
				
				flex: 1;
				
				padding: 0 8px;
				
				font-size: 12px;
				line-height: 30px;
			}
			
			.import-box-list > div > .options > div:hover {
				background: rgba(0,0,0,.2);
			}	






.breakpoints {
	position: relative;
	
	width: 100%;
	height: 20px;
	
	z-index: 1;
	
	overflow: hidden;
}
	
	.breakpoints > .record {
		position: absolute;
		
		width: 46px;
		height: 100%;
		
		top: 0;
		left: 0;
		
		cursor: pointer;
	}
	.breakpoints > .record.active {
		background: var(--error);
	}
	
	.breakpoints > .record:after {
		position: absolute;
		
		content: '';
		
		width: 10px;
		height: 10px;
		
		top: calc(50% - 5px);
		left: calc(50% - 5px);
		
		background: rgba(255,255,255,.2);
		
		border-radius: 50%;
	}
	
	.breakpoints > .record.active:after {
		background: rgba(255,255,255,.6);
		box-shadow: 0 0 5px rgba(255,255,255,1)
	}
	
	.breakpoints > .save {
		position: absolute;
		
		width: 46px;
		height: 100%;
		
		top: 0;
		right: 0;
		
		cursor: pointer;
	}
	
	.breakpoints > .save:after {
		position: absolute;
		
		content: '+';
		
		width: 20px;
		height: 20px;
		
		top: 0;
		left: calc(50% - 10px);
		
		color: rgba(255,255,255,.2);
		font-size: 14px;
		line-height: 20px;
		text-align: center;
	}
	
	.breakpoints > .contents {
		position: absolute;
		
		top: 0;
		left: 46px;
		right: 46px;
		bottom: 0;
		
		overflow: hidden;
		
		z-index: 4;
	}
	
	.breakpoints > .presets {
		position: absolute;
		
		width: 90px;
		height: 18px;
		
		top: 1px;
		left: calc(50% - 45px);
		
		font-size: 10px;
		font-weight: bold;
		color: #ccc;
		text-align: center;
		
		line-height: 20px;
		
/* 		background: #333; */
		
		display: flex;
		
		z-index: 5;
		
/* 		box-shadow: 0 0 10px rgba(0,0,0,.6); */
	}
		
		.breakpoints > .presets > div {
			width: 30px;
			height: 100%;
			
			cursor: pointer;
		}
		
		.breakpoints > .presets > div:hover {
			background: rgba(255,255,255,.2);
		}
		
	
		.breakpoints > .contents > .breakpoint {
			position: absolute;
			
			width: auto;
			height: 100%;
			
			font-size: 10px;
			font-weight: bold;
			color: var(--background-app);
			
			background: rgba(255,255,255,.3);
			
			cursor: pointer;
			
			box-shadow: 0 0 12px rgba(0,0,0,.4);
		}
		
		.breakpoints > .contents > .breakpoint.slc {
			background: var(--accent);
			
			color: #fff;
		}
			
			.breakpoints > .contents > .breakpoint > div {
				position: absolute;
				
				height: 100%;
				
				line-height: 20px;
				
				padding: 0 5px;
			}
			
			.breakpoints > .contents > .breakpoint > .init {
				left: 0;
			}
			
			.breakpoints > .contents > .breakpoint > .end {
				right: 0;
			}











.modal-custom {
	position: relative;
}
	
	.modal-custom > .modal-icon {
		width: 100px;
		height: 100px;
		
		position: absolute;
		
		top: 0;
		left: -100px;
		
		pointer-events: none;
	}
	
	.modal-custom .titles {
		font-size: 22px;
		color: #fff;
		
		margin: 30px 45px 0;
	}
		
		.modal-custom .titles > span {
			color: #5AD4DE;
		}
	
	.modal-custom > .modal-tab {
		background: #181818;
		
		width: 100%;
		height: 38px;
		
		display: flex;
		
		border-radius: 8px 8px 0 0;
		overflow: hidden;
	}
		
		.modal-custom > .modal-tab > div {
			padding: 0 12px;
			
			line-height: 38px;
			font-size: 13px;
			text-transform: uppercase;
			
			cursor: pointer;
		}
		
		.modal-custom > .modal-tab > div:first-child {
			padding-left: 24px;
		}
		
		.modal-custom > .modal-tab > div.active {
			background: var(--accent);
		}
	
	.modal-custom .block {
		margin: 16px 45px 0 25px;
	}
		
		.modal-custom .block > div {
			display: flex;
		}
			
			.modal-custom .block > div > .row-title {
				width: 106px;
				height: 30px;
				
				padding-right: 20px;
				
				text-align: right;
				color: #A9A9A9;
				font-size: 12px;
				text-transform: uppercase;
				line-height: 30px;
				
				white-space: nowrap;
			}
			
			.modal-custom .block > div .row-input {
				flex: 1;
				
				height: 30px;
				
				background: #212121;
				
				border-width: 0;
				
				border-radius: 2px;
				
				padding: 0 10px;
				
				line-height: 30px;
				font-size: 16px;
				color: #ccc;
				
				vertical-align: top;
			}
			
			.modal-custom .block > div .row-input.error {
				border: solid 1px var(--error);
			}
			
			.modal-custom .block > div .row-textarea {
				flex: 1;
				
				background: #212121;
				
				border-width: 0;
				
				border-radius: 2px;
				
				padding: 0 10px;
				
				line-height: 25px;
				font-size: 16px;
				color: #ccc;
				
				resize: none;
			}
			
			.modal-custom .block > div .row-data {
				flex: 1;
				
				display: flex;
			}
				
				.modal-custom .block > div .row-data > .tab-option {
					width: auto;
					height: 50px;
					
					border-radius: 6px;
					
					color: #fff;
					font-size: 13px;
					text-align: center;
					
					padding: 0 9px;
					
					cursor: pointer;
				}
				
				.modal-custom .block > div > .row-data > .tab-option + .tab-option {
					margin-left: 8px;
				}
				
				.modal-custom .block > div > .row-data > .tab-option:hover {
					background: rgba(255,255,255,.1);
				}
				
				.modal-custom .block > div > .row-data > .tab-option.slc,
				.modal-custom .block > div > .row-data > .tab-option.slc:hover {
					background: var(--accent)
				}
					
					.modal-custom .block > div > .row-data > .tab-option > img {
						height: 27px;
						
						margin-bottom: 2px;
					}
					
					.modal-custom .block > div > .row-data > .tab-option > * {
						pointer-events: none;
					}
			
			.modal-custom .block > div > .row-dropdown {
				position: relative;
				
				width: 190px;
				height: 30px;
				
				background: #212121;
				
				border-radius: 2px;
				
				color: #fff;
				font-size: 16px;
				
				cursor: pointer;
			}
			
			.modal-custom .block > div > .row-dropdown:after {
				position: absolute;
				
				content: '';
				
				width: 0; 
				height: 0; 
				
				top: calc(50% - 2px);
				right: 7px;
				
				border-left: 4px solid transparent;
				border-top: 5px solid #888;
				border-right: 4px solid transparent;
				
				transition: all .2s ease-in-out;
			}
			
			.modal-custom .block > div > .row-dropdown.open:after {
				transform: rotateZ(180deg)
			}
			
				.modal-custom .block > div > .row-dropdown > .slc {
					line-height: 30px;
					
					padding: 0 9px;
				}
				
				.modal-custom .block > div > .row-dropdown > .options {
					background: #000;
					
					position: absolute;
					
					top: 100%;
					left: 0;
					right: 0;
					
					display: none;
					
					box-shadow: 0 5px 10px rgba(0,0,0,.2);
				}
				
				.modal-custom .block > div > .row-dropdown.open > .options {
					display: block;
				}
					
					.modal-custom .block > div > .row-dropdown > .options > div {
						height: 30px;
						
						line-height: 30px;
						
						padding: 0 12px;
					}
	
	.modal-custom .modal-btns {
		margin: 50px 0 20px;
		
		text-align: center;
	}
		
		.modal-custom .modal-btns > div + div {
			margin-left: 2px;
		}
	
	
	
	.modal-custom > .tab {
		margin: 30px 45px 3px;
		
		border-bottom: solid 1px #353535;
	}
		
		.modal-custom > .tab > .option {
			font-size: 22px;
			color: #fff;
			
			cursor: pointer;
			
			opacity: .3
		}
		
		.modal-custom > .tab > .option:hover {
			opacity: .6;
		}
		
		.modal-custom > .tab > .option + .option {
			margin-left: 18px;
		}
		
		
		.modal-custom > .tab > .option.slc,
		.modal-custom > .tab > .option.slc:hover {
			color: #5AD4DE;
			opacity: 1;
		}
	
	.modal-custom > .list {
		background: #212121;
		
		height: 250px;
		
		margin: 20px 45px 0;
		
		border-radius: 2px;
		
		overflow: auto;
		
		padding: 4px;
	}
		
		.modal-custom > .list > div {
			display: flex;
			
			width: 100%;
			height: 40px;
			
			position: relative;
		}
		
		.modal-custom > .list > div.slc:after {
			position: absolute;
			
			content: '';
			
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			
			background: #5AD4DE;
			
			opacity: .4;
			
			pointer-events: none;
		}
			
			.modal-custom > .list > div > .connected {
				width: 30px;
				
				position: relative
			}
				
				.modal-custom > .list > div > .connected > div {
					
					width: 7px;
					height: 7px;
					
					border-radius: 50%;
					
					background: #5AD4DE;
				}
			
			.modal-custom > .list > div > .name {
				flex: 1;
				
				font-size: 16px;
				color: #fff;
				line-height: 40px;
				
				border-right: solid 1px #2C2C2C;
			}
			
			.modal-custom > .list > div > .role {
				width: 75px;
				line-height: 40px;
				
				border-right: solid 1px #2C2C2C;
			}
				
				.modal-custom > .list > div > .role {
					padding: 0 14px;
				}
			
			.modal-custom > .list > div > .options {
				width: 70px;
				
				border-right: solid 1px #2C2C2C;
			}
				
				.modal-custom > .list > div > .options > img {
					width: auto;
					height: 18px;
					
					cursor: pointer;
				}
				
				.modal-custom > .list > div > .options > img + img {
					margin-left: 10px;
				}
			
			.modal-custom > .list > div > .delete {
				width: 35px;
				
				text-align: center;
			}
				
				.modal-custom > .list > div > .delete > div {
					width: 20px;
					height: 20px;
					
					border-radius: 50%;
					
					background: red;
				}




.move-actor-box {
	background: #000;
	
	position: absolute;
	
	top: 0;
	left: 0;
	
	width: auto;
	height: auto;
	
	z-index: 100;
	
	border-radius: 3px;
	
	border: solid 2px #444;
	
	box-shadow: 0 10px 10px rgba(0,0,0,.2);
}
	
	.move-actor-box > div {
		color: #bbb;
		white-space: nowrap;
		font-size: 10px;
		
		padding: 6px 12px;
	}
	
	.move-actor-box > div + div {
		border-top: solid 1px #333;
	}








.text-edit {
	position: absolute;
	
	top: 0;
	left: 0;
	
	width: 0;
	height: 0;
	
	overflow: visible;
}
	
	.text-edit > .textOptions {
		position: absolute;
		
		transform-origin: top left;
		
		height: 23px;
	}
		
		.text-edit > .textOptions > div {
			height: 23px;
			
			border-radius: 25px;
			
			background: #000000CC;
			
			display: flex;
			
			position: absolute;
			
			box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
		}
		
			.text-edit > .textOptions > div > div {
				margin: 4px;
				
				border-radius: 50%;
				
				background-size: 20px;
				background-repeat: no-repeat;
				background-position: center center;
				
				width: 15px;
				height: 15px;
				
				cursor: pointer;
			}
			
			.text-edit > .textOptions > div > div:hover {
				opacity: 1;
			}
			
			.text-edit > .textOptions > div > div + div {
				margin-left: 0;
			}
			
			.text-edit > .textOptions > div > .empty {
				cursor: default;
				
				border-width: 0;
				
				width: 10px;
				
				position: relative;
			}
				
				.text-edit > .textOptions > div >.empty:after {
					position: absolute;
					
					content: '';
					
					top: 0;
					bottom: 0;
					
					width: 1px;
					
					left: calc(50% - 1px);
					
					background: #666;
				}
	
	.text-edit > .textBox {
		position: absolute;
		
		border-width: 0;
		padding: 0;
		margin: 0;
		
		background: transparent;
		
		transform-origin: top left;
	}











.media-hook-params {
	width: 100%;
	
	border-bottom: solid 6px #000;
	
}

	.media-hook-params > .search {
		padding: 8px 0;
		
		position: relative;
	}
	
		.media-hook-params > .search > input {
			border-radius: 12px;
	    border-width: 0;
	    width: calc(100% - 22px);
	    height: 22px;
	    margin: 0 10px;
	    padding: 0 10px;
	    background: #444;
	    color: #999;
	    font-size: 13px;
		}
	
		.media-hook-params > .search > .clear {
			position: absolute;
	    background-image: url(https://lib.jeekjee.net/media/ui_icons/selClear_black@3x.png);
	    background-position: center center;
	    background-repeat: no-repeat;
	    background-size: 15px;
	    width: 12px;
	    height: 12px;
	    right: 20px;
	    top: calc(50% - 6px);
	    background-color: rgb(255, 255, 255);
	    border-radius: 50%;
	    cursor: pointer;
	    opacity: 0.3;
		}

.media-hook {
	/*width: 230px;*/
	height: calc(100% - 68px - 26px);
	height: calc(100% - 68px - 26px - 222px);
	
	overflow: auto;
	
	margin-left: 5px;
	margin-right: 5px;
}

.media-hook.grid {
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	vertical-align: top;
}
	
	.media-hook > .media-hook-item {
		width: 100%;
		height: 42px;
		
		display: flex;
		
		cursor: pointer;
		
		overflow: hidden;
		
		position: relative;
	}
	
	.media-hook > .media-hook-item:hover {
		background: rgba(255,255,255,.1);
	}
	
	.media-hook > .media-hook-item.active {
		
	}
	
	.media-hook > .media-hook-item.active:after {
		position: absolute;
		
		content: '';
		
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		
		border: solid 2px #24bdf0;
		
		pointer-events: none;
	}
	
	.media-hook > .media-hook-item + .media-hook-item {
		margin-top: 2px;
	}
	
	.media-hook.grid > .media-hook-item {
		width: calc((100% - 4px) / 3);
		height: 89px;
		
		background: #3C3C3C;
		
		flex-flow: row wrap;
		
		margin-top: 0;
		margin-bottom: 2px;
		
		display: block;
	}
	
	.media-hook.grid > .media-hook-item:hover {
		background: rgba(255,255,255,.2);
	}
	
	.media-hook.grid > .media-hook-item + .media-hook-item {
		margin-left: 2px;
	}
	
	.media-hook.grid > .media-hook-item + .media-hook-item:nth-child(3n+4) {
		margin-left: 0;
	}
		
		.media-hook > .media-hook-item > .icon {
			width: 45px;
			height: 100%;
			
			position: relative;
			
			background-color: rgba(255,255,255,.05);
			
			pointer-events: none;
		}
		
		.media-hook.grid > .media-hook-item > .icon {
			width: 45px;
			height: 45px;
			
			margin: 10px auto;
			
			background-color: transparent;
		}
		
		.media-hook > .media-hook-item > .text-hook {
			width: calc(100% - 115px);
			display: block;
			
			padding-top: 4px;
			
			pointer-events: none;
		}
		.media-hook.grid > .media-hook-item > .text-hook {
			width: 100%;
		}
		
		.media-hook > .media-hook-item > .text-hook > .text {
			font-size: 13px;
			color: #aaa;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			
			padding: 0 6px;
		}
			
			.media-hook.grid > .media-hook-item > .text-hook > .text {
				text-align: center;
			}
		
		.media-hook > .media-hook-item > .text-hook > .size {
			color: #777;
			font-size: 10px;
			font-weight: bold;
			text-transform: uppercase;
		}
		
		.media-hook.grid > .media-hook-item > .text-hook > .size {
			display: none;
		}


.media-hook-upload {
	position: absolute;
	
	top: 0;
	left: 0;
	right: 0;
	bottom: 45px;
	
	background: var(--background-app);
	
	pointer-events: none;
	
	display: none;
}
.media-hook-upload.active {
	display: block;
}

.media-hook-upload:before {
	position: absolute;
	
	content: '';
	
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	
	border-radius: 15px;
	
	background: rgba(255,255,255,.1);
	
	border: dashed 2px #666;
}

.media-hook-upload:after {
	position: absolute;
	
	content: 'UPLOAD';
	font-size: 18px;
	font-weight: bold;
	color: #999;
	text-align: center;
	line-height: 30px;
	
	width: 100px;
	height: 30px;
	
	top: calc(50% - 15px);
	left: calc(50% - 50px);
}


.media-hook-info {
	background: rgba(0,0,0,.4);
	height: 26px;
	
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 26px;
	color: #666;
}













.symbol-hook {
	/*width: 230px;*/
	height: calc(100% - 68px - 26px);
	
	overflow: auto;
	
	margin-left: 5px;
	margin-right: 5px;
}

.symbol-hook.grid {
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	vertical-align: top;
}
	
	.symbol-hook > .symbol-hook-item {
		width: 100%;
		height: 90px;
		
		display: flex;
		
		cursor: pointer;
		
		overflow: hidden;
		
		position: relative;
	}
	
	.symbol-hook > .symbol-hook-item:hover {
		background: rgba(255,255,255,.1);
	}
	
	.symbol-hook > .symbol-hook-item.active {
		
	}
	
	.symbol-hook > .symbol-hook-item.active:after {
		position: absolute;
		
		content: '';
		
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		
		border: solid 2px #24bdf0;
		
		pointer-events: none;
	}
	
	.symbol-hook > .symbol-hook-item + .symbol-hook-item {
		margin-top: 2px;
	}
	
	.symbol-hook.grid > .symbol-hook-item {
		width: calc((100% - 2px) / 2);
		height: 120px;
		
		background: #3C3C3C;
		
		flex-flow: row wrap;
		
		margin-top: 0;
		margin-bottom: 2px;
		
		display: block;
	}
	
	.symbol-hook.grid > .symbol-hook-item:hover {
		background: rgba(255,255,255,.2);
	}
	
	.symbol-hook.grid > .symbol-hook-item + .symbol-hook-item {
		margin-left: 2px;
	}
	
	.symbol-hook.grid > .symbol-hook-item + .symbol-hook-item:nth-child(2n+3) {
		margin-left: 0;
	}
		
		.symbol-hook > .symbol-hook-item > .icon {
			width: 90px;
			height: 100%;
			
			position: relative;
			
			background-color: rgba(255,255,255,.05);
			
			pointer-events: transparent;
			
			overflow: hidden;
		}
			.symbol-hook > .symbol-hook-item > .icon > .back-transparent {
				position: absolute;
				
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				
				background-image: url('https://lib.jeekjee.net/media/ui_icons/bgtransparent.svg');
				background-size: 10px;
				
				opacity: .25;
			}
		
		.symbol-hook.grid > .symbol-hook-item > .icon {
			width: 100%;
			height: calc(100% - 26px);
			
			margin: 0 auto;
			
			background-color: transparent;
		}
		
		.symbol-hook > .symbol-hook-item > .text-hook {
			width: calc(100% - 105px);
			
			padding-top: 4px;
			
			pointer-events: none;
		}
		.symbol-hook.grid > .symbol-hook-item > .text-hook {
			width: 100%;
		}
			
			.symbol-hook > .symbol-hook-item > .text-hook > .text-hook-center {
				display: block;
				
				padding-bottom: 20px;
				
				width: 100%;
			}
			
			.symbol-hook.grid > .symbol-hook-item > .text-hook > .text-hook-center {
				padding-bottom: 0;
			}
		
				.symbol-hook > .symbol-hook-item > .text-hook > .text-hook-center > .text {
					font-size: 13px;
					color: #aaa;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					text-align: left;
					
					padding: 0 6px;
				}
					
					.symbol-hook.grid > .symbol-hook-item > .text-hook > .text-hook-center > .text {
						text-align: center;
					}
				
				.symbol-hook > .symbol-hook-item > .text-hook > .text-hook-center > .size {
					color: #777;
					font-size: 10px;
					font-weight: bold;
					line-height: 14px;
					
					height: 28px;
					
					text-overflow: ellipsis;
					overflow: hidden;
					
					padding: 0 6px;
					margin-top: 3px;
				}
				
				.symbol-hook.grid > .symbol-hook-item > .text-hook > .text-hook-center > .size {
					display: none;
				}





.media-preview {
	width: 100%;
	height: auto;
	
	border-bottom: solid 2px #000;
	
	background: #141414;
	
	position: relative;
	
	z-index: 4;
}
	
	.media-preview > .title {
		position: relative;
		
		width: 100%;
		height: 30px;
		
		cursor: pointer;
	}
	
	.media-preview > .title:after {
		position: absolute;
		
    content: '';
    
    top: calc(50% - 3px);
    left: 13px;
    
    border-top: solid 6px #fff;
    border-left: solid 3px transparent;
    border-right: solid 3px transparent;
    
    transition: all .2s ease-in-out;
	}
	
	.media-preview.close > .title:after {
		transform: rotateZ(-90deg);
	}
		
		.media-preview > .title > .title-text {
			line-height: 30px;
			font-size: 13px;
			color: #fff;
			padding: 0 10px 0 30px;
		}
	
	.media-preview > .content {
		width: 100%;
		height: 190px;
		
		display: flex;
	}
	
	.media-preview.close > .content {
		display: none;
	}
		
		.media-preview > .content > .colors {
			width: 20px;
			height: auto;
			
			padding-right: 1px;
			
			overflow: auto;
			
			background: #212121;
		}
			
			.media-preview > .content > .colors > div {
				width: 20px;
				height: 20px;
				
				cursor: pointer;
			}
			
			.media-preview > .content > .colors > div + div {
				margin-top: 1px;
			}
		
		.media-preview > .content > .info {
			width: calc(100% - 61px);
			height: auto;
			
			display: flex;
			flex-direction: column;
		}
			
			.media-preview > .content > .info > .size {
				width: 100%;
				height: 20px;
				
				display: flex;
				
				font-size: 11px;
				color: #fff;
				line-height: 20px;
				
				background: #1C1C1C;
			}
				
				.media-preview > .content > .info > .size > .retina {
					width: 40px;
					
					opacity: .3;
					
					padding-left: 5px;
				}
				
				.media-preview > .content > .info > .size > .dims {
					flex: 1;
					
					opacity: .8;
					
					text-align: center;
				}
				
				.media-preview > .content > .info > .size > .format {
					width: 40px;
					
					opacity: .3;
					
					text-transform: uppercase;
					text-align: right;
					
					padding-right: 5px;
				}
			
			.media-preview > .content > .info > .preview {
				width: 100%;
				
				height: calc(100% - 42px);
			}
			
			.media-preview > .content > .info > .name {
				width: 100%;
				height: 22px;
				
				font-size: 13px;
				color: rgba(255,255,255,.4);
				line-height: 22px;
				text-align: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				
				padding: 0 10px;
				
				background: #1C1C1C;
			}
		
		.media-preview > .content > .options {
			width: 40px;
			height: auto;
			
			display: flex;
			flex-direction: column;
			
			background: #212121;
		}
			
			.media-preview > .content > .options > .add {
				width: 100%;
				height: 20px;
			}
			
			.media-preview > .content > .options > .extra {
				width: 100%;
				flex: 1;
				
				display: flex;
				flex-direction: column;
			}
	
				.media-preview > .content > .options > .extra > div {
					width: 100%;
					
					font-size: 11px;
					color: #fff;
					text-align: center;
					

					white-space: nowrap;

					
					position: relative;
				}
	
				.media-preview > .content > .options > .extra > div + div {
					margin-top: 5px;
				}
					
					.media-preview > .content > .options > .extra > div > div {
						line-height: 15px;
						
						opacity: .3;
					}
					
					.media-preview > .content > .options > .extra > div > div + div {
						opacity: 1;
						
						
						font-size: 11px;
					}






.hook-db {
	position: absolute;
	
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	bottom: 0px;
	
/* 	background: var(--background-app); */
background-color: black;
	
	display: flex;
	flex-direction: column;
	
	z-index: 5;
	z-index: 15;
}
	
	.hook-db > .title {
		position: relative;
		
		height: 50px;
		
		padding: 0 15px;
		
		font-size: 24px;
		background-color: #111;
		color:#888;
		line-height: 50px;
	}
		
		.hook-db > .title > .close {
			position: absolute;
			
			top: calc(50% - 10px);
			right: 15px;
			
			width: 20px;
			height: 20px;
			
			background-size: 38px;
			background-position: center center;
			background-repeat: no-repeat;
			
			cursor: pointer;
			
			opacity: .5;
		}
		
		.hook-db > .title > .close:hover {
			opacity: 1;
		}


		.hook-db > .title > .icnbutton{
			position: absolute;
			
			top: calc(50% - 13px);
/* 			right: 172px; */
			
			width: 26px;
			height: 26px;
			
			background-size: 36px;
			background-position: center center;
			background-repeat: no-repeat;			
			
			
			cursor: pointer;
			
			opacity: .5;
		}

			.hook-db > .title > .icnbutton:hover {
				opacity: 1;
			}		

	
	.hook-db > .content {
		margin: 5px 5px 20px;
		margin-right: 0px;
		
		background-color: #000;
		font-size: 13px;
		
		display: flex;
		
		flex: 1;
	}
	
		.hook-db > .content > .tables {
			width: 220px;
			
			background-color: #171717;
			border-radius:8px;
			
			color: #666;
			overflow: auto;
		}
		
		
		.hook-db > .content > .tables >  div:first-child{
			margin-top: 0px;
		}
		
		.hook-db > .content > .tables > .tables-group {
		}				
		
		
			.hook-db > .content > .tables > .tables-group > .connection {
				display:flex;
				width:100%;
				height:36px;
			}
		
				.hook-db > .content > .tables >  .tables-group > .connection > div:first-child  {
					margin-left:4px;
					margin-top:3px;
					
					width: 30px;
					height: 30px;
					
					background-size: 30px;
					background-position: center center;
					background-repeat: no-repeat;
					opacity:0.6;	
				}
				
				.hook-db > .content > .tables >  .tables-group > .connection > div:nth-child(2) {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					cursor: pointer;
					line-height: 36px;
					margin-left:4px;
					flex:1;
				}
				
				.hook-db > .content > .tables >  .tables-group > .connection > .add-endpoint {
						margin-right:4px;
						margin-top:8px;
						
						width: 20px;
						height: 20px;
						
						background-size: 30px;
						background-position: center center;
						background-repeat: no-repeat;
						opacity:0.3;
						cursor: pointer;	
					}
					
					.hook-db > .content > .tables  >  .tables-group > .connection > .add-endpoint:hover  {
							opacity:1;	
						}						
								
				
				
			.hook-db > .content > .tables > .endpoint {
				display:flex;
				width:100%;
				height:30px;
			}

				.hook-db > .content > .tables > .endpoint > div:first-child {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					cursor: pointer;
					line-height: 30px;
					margin-left:60px;
					opacity:0.7;
				}				
			
			.hook-db > .content > .tables > .tables-group > div:hover {
				background: rgba(255,255,255,.05);
			}
		
			
			.hook-db > .content > .tables >  .tables-group > div.active,
			.hook-db > .content > .tables >  .tables-group > div.active:hover {
				background: var(--accent);
				color: #fff;
			}
				.hook-db > .content > .tables > div.active  > div:first-child {
					opacity:1;
				}	
				
								
			
		.hook-db > .content > .endpoints {
			width: 220px;
			
			background-color: #171717;
			border-radius:8px;
			
			color: #666;
			overflow: auto;
			margin-left: 5px;
		}
		
			.hook-db > .content > .endpoints > div > div {
				padding: 8px 10px;
				
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				
				cursor: pointer;
			}
			
			.hook-db > .content > .endpoints > div > div:hover {
				background: rgba(255,255,255,.05);
			}
			
			.hook-db > .content > .endpoints > div > div.active,
			.hook-db > .content > .endpoints > div > div.active:hover {
				background: var(--accent);
				color: #fff;
			}			
		
		
		.hook-db > .content > .table-expanded {
			display: flex;
			flex-direction: column;
			margin-left: 5px;
			width: calc(100% - 230px) ;
		}
		
		
		
			.hook-db > .content > .table-expanded > .table-info {
				background-color: #171717;
				height:60px;
			}
				.hook-db > .content > .table-expanded > .table-info {
					background-color: #171717;
					height:60px;
				}
				
					.hook-db > .content > .table-expanded > .table-info > .conn-info {
						display:flex;
						width:100%;
					}
				
						.hook-db > .content > .table-expanded > .table-info  >.conn-info > div:first-child  {
							margin-left:4px;
							margin-top:8px;
							
							width: 40px;
							height: 40px;
							
							background-size: 40px;
							background-position: center center;
							background-repeat: no-repeat;
						}
						
						.hook-db > .content > .table-expanded > .table-info > .conn-info > div:nth-child(2) {
							line-height: 36px;
							margin-left:4px;
							margin-top:13px;
							color: #CCC;
							font-size: 17px;
							flex:1;
						}	
						
							.hook-db > .content > .table-expanded > .table-info  > .conn-info > div:nth-child(2) > span {
								opacity:0.3;
							}
							
							
						.hook-db > .content > .table-expanded > .table-info  > .conn-info > .icon  {
							margin-right:6px;
							margin-top:11px;
							
							width: 40px;
							height: 40px;
							
							background-size: 42px;
							background-position: center center;
							background-repeat: no-repeat;
							opacity:0.2;
							cursor:pointer;
						}
						

	
							.hook-db > .content > .table-expanded > .table-info  > .conn-info > .icon:last-child {
								margin-right:16px;
							}
							
							.hook-db > .content > .table-expanded > .table-info  > .conn-info > .icon:hover {
								opacity:1;
							}																														
						
		
		
		
		
			.hook-db > .content > .table-expanded > .table-rows {
				width: 100%;
				
				background-color: #141414;
				overflow: auto;
				margin-top:2px;
				flex: 1;
			}
			
				.hook-db > .content > .table-expanded > .table-rows table {
					width: 100%;
				    border-spacing: 1px;
					
				}
				
					.hook-db > .content > .table-expanded > .table-rows table > thead {
						background: #444;
						
						font-size: 10px;
						color: #999;
						font-weight: bold;
						text-transform: uppercase;
						
						width: 100%;
						height: 36px;
					}
						
						.hook-db > .content > .table-expanded > .table-rows table > thead > tr {
							/*display: flex;*/
							
							padding: 5px 0;
						}
						
							.hook-db > .content > .table-expanded > .table-rows table > thead > tr > td {
								line-height: 36px;
								
								padding: 0 8px;
									
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
							
							.hook-db > .content > .table-expanded > .table-rows table > thead > tr > td + td {
								flex: 1;
							}
							
				
					.hook-db > .content > .table-expanded > .table-rows table > tbody {
						background: #282828;
						
						font-size: 13px;
						color: #777;
						
						width: 100%;
						height: 25px;
						cursor: default;
					}
						
						.hook-db > .content > .table-expanded > .table-rows table > tbody > tr {
							padding: 5px 0;
						}
						
							.hook-db > .content > .table-expanded > .table-rows table > tbody > tr > td {
								padding: 0 8px;
								
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								height:36px;
								max-width: 200px;
							}
							
							.hook-db > .content > .table-expanded > .table-rows table > tbody > tr > .no-editable {
								opacity:0.3;
							}
							
							.hook-db > .content > .table-expanded > .table-rows table > tbody > tr > td + td {
								flex: 1;
							}
							
								.hook-db > .content > .table-expanded > .table-rows table > tbody > tr > td > div {
									padding: 3px 0;
									
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
								}
								
								.hook-db > .content > .table-expanded > .table-rows table > tbody > tr > td > div + div {
									border-top: solid 1px #888;
								}
								
								.hook-db > .content > .table-expanded > .table-rows table > tbody > tr > td > div + div:empty {
									border-top: solid 0px #888;
								}
						
						.hook-db > .content > .table-expanded > .table-rows table > tbody > tr + tr {
							border-top: solid 1px #fff;
						}
				
				.hook-db > .content > .table-expanded > .table-rows .add {
					width: 60px;
					height: 40px;
					
					background: #666;
					
					margin: 12px;
					
					cursor: pointer;
				}
		
			.hook-db > .content > .table-expanded > .table-controls {
				width: 100%;
				height: 50px;
				background-color: #171717;
				margin-top: 2px;
			}
				.hook-db > .content > .table-expanded > .table-controls .add {
					width: 60px;
					height: 40px;
					
					background: #666;
					
					margin: 12px;
					
					cursor: pointer;
				}
				
				.hook-db > .content > .table-expanded > .table-controls > .conn-string{
					display:flex;
					width:100%;
				}
				
					.hook-db > .content > .table-expanded > .table-controls > .conn-string > .json-input{
						display:flex;
						flex-direction: column;
						flex:1;
					}				
					
						.hook-db > .content > .table-expanded > .table-controls > .conn-string > .json-input > div{
							line-height: 36px;
							margin-left:30px;
							margin-top:13px;
							color: #CCC;
							font-size: 14px;					
							
						}
						.hook-db > .content > .table-expanded > .table-controls > .conn-string > .json-input  > textarea {
							width: calc(100% - 60px);
							height: calc(100% - 100px);
							padding: 10px;
							margin:30px 30px;
							margin-top: 10px;
							border-radius: 8px;
							color: #999;
							background-color: #131313;
							font-size: 14px;
							border:2px solid black;
						}	
							.hook-db > .content > .table-expanded > .table-controls > .conn-string > .json-input  > textarea > .error {	
								border-color:yellow;
							}
							.hook-db > .content > .table-expanded > .table-controls > .conn-string > .json-input  > textarea > .editing {	
								border-color:white;
							}						



/* Data Section right pane */


				#app > .panel-right > .options > .props > .props_data {
					position:relative;
					
					width: 220px;
					
				  margin-left: 17px;
				  margin-left: 0;
				}
				
					#app > .panel-right > .options > .props > .props_data > .threads-title {
				    position: relative;
				    
				    width: 100%;
				    width:220px;
				    height: 38px;
				    
						display: flex;
						
				    align-items: center;
				    justify-content: center;
				    
				    font-size: 10px;
				    color: #fff;
				    text-transform: uppercase;
				    
				    margin: 0 auto;
					}				
				
					
						#app > .panel-right > .options > .props > .props_data > .thread-buttons {
					    width: 100%;
							width:220px;	
					    
					    display: flex;
					    
					    overflow: hidden;
					    
							align-items: center;
							justify-content: center;
													    
						  flex: 1;	
				    
							margin: 0 auto;
						}
						
							#app > .panel-right > .options > .props > .props_data > .thread-buttons > .button {
								background: #797979;
								
								min-width: 60px;
								
								padding: 8px;
								margin-right: 6px;
								
								text-align: center;
								font-size: 10px;
								color: #fff;
								text-transform: uppercase;
								
								border-radius: 2px;
								
								cursor: pointer;
								
								opacity: .5;								
							}
							
							#app > .panel-right > .options > .props > .props_data > .thread-buttons > .button:hover {
								opacity: 1;
							}					
						
						#app > .panel-right > .options > .props > .props_data > .active-threads {
					    width: 220px;
					    
					    display: flex;
					    
					    overflow: hidden;
					    flex-direction: column;
					    
					    flex: 1;
					    
							margin: 0 auto;
						}	
						
							#app > .panel-right > .options > .props > .props_data > .active-threads > div > .thread-container {
	
									border-radius: 6px;
								    padding: 0 8px 0 5px;
								    background: #505050;
/*
								    background: -moz-linear-gradient(top, #444444 0%, #404040 100%);
								    background: -webkit-linear-gradient(top, #444444 0%,#404040 100%);
								    background: linear-gradient(to bottom, #444444 0%,#404040 100%);
*/
								    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#404040',GradientType=0 );
								    box-shadow: 0 0 6px rgba(0,0,0,.5);
								    height: 60px;
								    
								    margin-bottom: 10px;
								    display: flex;
								    flex-direction: column;
		
							}
									#app > .panel-right > .options > .props > .props_data > .active-threads > div > .paused {
										height: 32px;
										overflow: hidden;
										background: #363636;
										color:#CCC;
									}	
							
							#app > .panel-right > .options > .props > .props_data > .active-threads > div > .thread-container > div {
								display: flex;
							}
								#app > .panel-right > .options > .props > .props_data > .active-threads > div > .thread-container > div > .thread{
		
										padding-top:10px;
										padding-left: 10px;
									    font-size: 10px;
									    color: #fff;
									    font-weight: 600;
									    position: relative;
									    flex:1
			
								}
								
								#app > .panel-right > .options > .props > .props_data > .active-threads > div > .thread-container > div > .thread > span{
		
										opacity:0.4
			
								}								
								
								#app > .panel-right > .options > .props > .props_data > .active-threads > div > .thread-container > div >.led {
		
										position:relative;
										width:10px;
										height:10px;
										border-radius: 50%;
										background: #ffffff;
										opacity: 0.2;
										margin-top: 10px;
										margin-right: 10px;
										transition: all .15s ease-in-out;
			
								}
								
								#app > .panel-right > .options > .props > .props_data > .active-threads > div > .thread-container > div > .thread-info {
		
										padding-top:10px;
										padding-left: 10px;
									    font-size: 10px;
									    color: #fff;
									    font-weight: 400;
									    position: relative;
									    flex:1;
									    opacity:0.2;
									 
			
								}	
								
								#app > .panel-right > .options > .props > .props_data > .active-threads > div > .thread-container > div >.thread-controls {
		
									margin-right: 1px;
								    margin-top: 2px;
								    width: 24px;
								    height: 24px;
									
									background-size: 24px;
									background-position: center center;
									background-repeat: no-repeat;
									opacity:0.2;
									cursor:pointer;
									 
								}	
								
									#app > .panel-right > .options > .props > .props_data > .active-threads > div > .thread-container > div >.thread-controls:hover {	
										opacity:1;
									}																

	









.override-options {
	width: 100%;
	height: 40px;
	
	padding-bottom: 10px;
}
	
	.override-options > div {
		height: 24px;
		
		line-height: 24px;
		color: rgba(255,255,255,.3);
		font-size: 13px;
		text-transform: uppercase;
		text-align: center;
		font-family: 'Source Sans Pro', sans-serif;
	}
	
	.override-options > .previous {
		width: 10px;
	}
	
	.override-options > .reset {
		width: 90px;
		
		background: rgba(121,121,121,.3);
		border-radius: 2px;
		
		margin-left: 18px;
		
		cursor: pointer;
	}
	
	.override-options > .component {
		width: 90px;
		
		background: rgba(121,121,121,.3);
		border-radius: 2px;
		
		margin-left: 3px;
		
		cursor: pointer;
	}
	
	.override-options > .next {
		width: 10px;
		
		margin-left: 18px;
	}


.overrides {
	
}
	
	.overrides .top-menu {
		font-size: 10px;
		color: #fff;
		text-transform: uppercase;
		
		width: 100%;
		height: 38px;
	}
		
		.overrides .top-menu > div {
			opacity: .2;
			
			cursor: pointer;
		}
		
		.overrides .top-menu > div:hover {
			opacity: .7;
		}
		
		.overrides .top-menu > .active,
		.overrides .top-menu > .active:hover {
			opacity: 1;
		}
		
		
		.overrides .top-menu > div + div {
			margin-left: 12px;
		}
	
	.overrides .override-content {
		width: 100%;
		height: calc(100% - 38px);
	}
		
		.overrides .override-content > div {
			width: 100%;
			height: 100%;
		}



.edit-override-hook {
	font-size: 10px;
}
	
	.edit-override-hook > div {
		padding: 12px 0;
		
		border-bottom: solid 1px rgba(0,0,0,.2);
		
		position: relative;
		
		margin: 0 7px 0 5px;
	}
	
	.edit-override-hook > div + div {
		padding-top: 16px;
		
		border-top: solid 1px rgba(255,255,255,.1);
	}
	
	.edit-override-hook > div:last-child {
		border-bottom-width: 0;
	}
		
		.edit-override-hook > div > .title {
			text-transform: uppercase;
			font-weight: 600;
			
			padding-bottom: 21px;
		}
		
		.edit-override-hook > div > .content {
			width: 100%;
			min-height: 28px;
			
			display: flex;
			
			position: relative;
		}
	
			.edit-override-hook > div > .content > .name {
				width: 55px;
				
				line-height: 28px;
				font-size: 11px;
				text-transform: uppercase;
				color: rgba(255,255,255,.4);
				text-align: right;
				font-family: 'Source Sans Pro', sans-serif;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
	
			.edit-override-hook > div > .content > .property {
				width: calc(100% - 55px);
				min-height: 28px;
				
				margin-left: 9px;
				
				font-size: 13px;
				color: #fff;
				
				position: relative;
			}
				
				.edit-override-hook > div > .content > .property > .dropdown {
					width: 100%;
					height: 28px;
				}
					
					.edit-override-hook > div > .content > .property > .dropdown > .box {
						width: 100%;
						height: 24px;
						
						background: #212121;
						
				    color: #fff;
						font-size: 13px;
						line-height: 24px;
						
						margin-top: 2px;
						
						position: relative;
						
						cursor: pointer;
					}
					
					.edit-override-hook > div > .content > .property > .dropdown > .box:after {
						position: absolute;
						
						content: '';
						
						width: 0; 
						height: 0; 
						
						top: calc(50% - 2px);
						right: 7px;
						
						border-left: 3px solid transparent;
						border-top: 5px solid #fff;
						border-right: 3px solid transparent;
						
						transition: all .2s ease-in-out;
					}
					
					.edit-override-hook > div > .content > .property > .dropdown.open > .box:after {
						transform: rotateZ(180deg)
					}
					
						.edit-override-hook > div > .content > .property > .dropdown > .box > div {
							padding: 0 15px 0 8px;
							
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					
					.edit-override-hook > div > .content > .property > .dropdown > .box > .list {
						position: absolute;
						
						top: 100%;
						left: 0;
						right: 0;
						
						background: #000;
						
						display: none;
						
						z-index: 5;
					}
					
					.edit-override-hook > div > .content > .property > .dropdown.open > .box > .list {
						display: block;
					}
						
						.edit-override-hook > div > .content > .property > .dropdown > .box > .list > div {
							padding: 4px 0;
							margin: 0 4px;
							
							font-size: 11px;
						}
						
						.edit-override-hook > div > .content > .property > .dropdown > .box > .list > div + div {
							border-top: solid 1px rgba(255,255,255,.1);
						}
				
				.edit-override-hook > div > .content > .property > .images {
					width: 100%;
					height: 40px;
					
					margin-top: 5px;
				}
					
					.edit-override-hook > div > .content > .property > .images > .preview {
						width: 40px;
						height: 40px;
						
						position: relative;
					}
						
						.edit-override-hook > div > .content > .property > .images > .preview > .back {
							position: absolute;
							
							width: 100%;
							height: 100%;
							
							background-image: url('https://lib.jeekjee.net/media/ui_icons/bgtransparent.svg');
							background-size: 11.5px;
							
							opacity: .25;
						}
						
						.edit-override-hook > div > .content > .property > .images > .preview > .image {
							position: absolute;
							
							width: 100%;
							height: 100%;
							
							background-position: center center;
							background-size: contain;
							background-repeat: no-repeat;
						}
					
					.edit-override-hook > div > .content > .property > .color-list {
						display: flex;
						flex-flow: row wrap;
					}
						
						.edit-override-hook > div > .content > .property > .color-list > div {
							width: 20px;
							height: 20px;
							
							cursor: pointer;
							
							margin-top: 3px;
							
							border: solid 1px #7E7E7E;
						}
						
						.edit-override-hook > div > .content > .property > .color-list > div + div {
							margin-left: 2px;
						}
						
						.edit-override-hook > div > .content > .property > .color-list > .active {
							border-color: #fff;
						}
						
						.edit-override-hook > div > .content > .property > .color-list > div:nth-child(5n+6) {
							margin-left: 0;
						}
			
			.edit-override-hook > div > .content > .external {
				width: calc(100% - 55px);
				height: 28px;
				
				margin-left: 9px;
				
				font-size: 13px;
				color: #fff;
				
				position: relative;
				
				display: none;
				
				opacity: .2;
			}
				
				.edit-override-hook > div > .content > .external > .icon {
					width: 28px;
					height: 28px;
					
					background-size: 28px;
					background-position: center center;
					background-repeat: no-repeat;
				}
				
				.edit-override-hook > div > .content > .external > .text {
					line-height: 28px;
					color: #fff;
					font-size: 11px;
					
					margin-left: 3px;
				}
		
		.edit-override-hook > div > div > .tag {
			position: absolute;
			
			top: 13px;
			right: 0;
			
			font-size: 10px;
			color: #fff;
			
			opacity: .4;
		}







.edit-override-data {
	overflow: auto;
	
	margin: 0 14px;
}
.edit-override-data.menu {
	margin: 0;
}
	
	.edit-override-data > .data-top-menu {
		width: 100%;
		height: 40px;
		
		padding-bottom: 10px;
	}
		
		.edit-override-data > .data-top-menu > div {
			height: 24px;
		}
		
		.edit-override-data > .data-top-menu > .previous {
			width: 10px;
		}
		
		.edit-override-data > .data-top-menu > .search {
			width: 183px;
			
			margin-left: 18px;
			margin-right: 18px;
			
			position: relative;
			
			background: rgba(81,84,83,.3);
			
			border-radius: 12px;
			
			display: flex;
		}
			
			.edit-override-data > .data-top-menu > .search > input {
				width: calc(100% - 50px);
				
				border-width: 0;
				
				border-radius: 12px;
				
				background: #515453;
				
				line-height: 24px;
				color: #fff;
				
				padding: 0 10px 0 25px;
			}
			
			.edit-override-data > .data-top-menu > .search > .label {
				width: 50px;
				
				text-align: center;
				line-height: 24px;
				font-size: 13px;
				color: rgba(255,255,255,.3);
				text-transform: uppercase;
				
				font-family: 'Source Sans Pro', sans-serif;
				
				cursor: pointer;
			}
			
			.edit-override-data > .data-top-menu > .search > .icon {
				position: absolute;
				
				top: 0;
				left: 2px;
				
				width: 24px;
				height: 24px;
				
				opacity: .3;
				
				cursor: pointer;
			}
		
		.edit-override-data > .data-top-menu > .next {
			width: 10px;
		}
	
	.edit-override-data table {
		border-spacing: 0;
	}
		
		.edit-override-data table > thead {
			
		}
			
			.edit-override-data table > thead > tr {
				height: 23px;
			}
				
				.edit-override-data table > thead > tr > td {
					line-height: 23px;
					padding: 0 7px;
					
					font-weight: bold;
					font-size: 10px;
					color: rgba(255,255,255,.4);
					text-align: left;
					text-transform: uppercase;
					white-space: nowrap;
					
					border-right: solid 1px rgba(151,151,151,.2);
					border-bottom: solid 1px rgba(151,151,151,.2);
				}
				
				.edit-override-data table > thead > tr > td:last-child {
					border-right-width: 0;
				}
		
		.edit-override-data table > tbody {
			
		}
			
			.edit-override-data table > tbody > tr {
				height: 30px;
				
				cursor: pointer;
			}
			
			.edit-override-data table > tbody > .active {
				background: #fff;
			}
				
				.edit-override-data table > tbody > tr > td {
					white-space: nowrap;
					
					padding: 0 10px;
					
					line-height: 30px;
					
					font-size: 13px;
					color: rgba(255,255,255,.3);
					font-weight: 500;
					
					border-right: solid 1px rgba(151,151,151,.2);
					border-bottom: solid 1px rgba(151,151,151,.2);
				}
				
				.edit-override-data table > tbody > .active > td {
					color: rgba(0,0,0,.4);
				}
				
				.edit-override-data table > tbody > tr > td:last-child {
					border-right-width: 0;
				}
				
				.edit-override-data table > tbody > tr:last-child > td {
					border-bottom-width: 0;
				}
	
	.edit-override-data > .total {
		text-align: center;
		font-size: 13px;
		color: rgba(255,255,255,.3);
		text-transform: uppercase;
		
		padding: 13px 0;
	}







.edit-overrides-map {
	
}
	
	.edit-overrides-map > .top-menu-d {
		width: 100%;
		height: 40px;
		
		padding-bottom: 10px;
	}
		
		.edit-overrides-map > .top-menu-d > div {
			height: 24px;
		}
		
		.edit-overrides-map > .top-menu-d > .previous {
			width: 10px;
		}
		
		.edit-overrides-map > .top-menu-d > .dropdown {
			width: 183px;
			
			margin-left: 18px;
			margin-right: 18px;
			
			position: relative;
		}
		
		.edit-overrides-map > .top-menu-d > .dropdown:after {
			position: absolute;
			
			content: '';
			
	    width: 0;
	    height: 0;
	    
	    top: calc(50% - 1.75px);
	    right: 7px;
	    
	    border-left: 3.5px solid transparent;
	    border-top: 5px solid #fff;
	    border-right: 3.5px solid transparent;
	    
	    transition: all .2s ease-in-out;
		}
		
		.edit-overrides-map > .top-menu-d > .dropdown.open:after {
			transform: rotateZ(180deg);
		}
			
			.edit-overrides-map > .top-menu-d > .dropdown > .icon {
				width: 24px;
				height: 24px;
				
				position: absolute;
				
				top: 0;
				left: 4px;
				
				opacity: .2;
			}
			
			.edit-overrides-map > .top-menu-d > .dropdown > .box {
				width: calc(100% - 32px - 23px);
				height: 24px;
				
				padding-left: 32px;
				padding-right: 23px;
				
				background: rgba(121,121,121,.3);
				
				border-radius: 2px;
				
				font-size: 13px;
				color: rgba(255,255,255,.4);
				line-height: 24px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				
				cursor: pointer;
			}
			
			.edit-overrides-map > .top-menu-d > .dropdown > .dropdown-options {
				position: absolute;
				
				top: 100%;
				left: 0;
				right: 0;
				
				background: #000;
				
				border-radius: 2px;
				
				max-height: calc(24px * 5);
				
				display: none;
				
				z-index: 2;
				
				overflow: auto;
			}
			
			.edit-overrides-map > .top-menu-d > .dropdown.open > .dropdown-options {
				display: block;
			}
				
				.edit-overrides-map > .top-menu-d > .dropdown > .dropdown-options > div {
					line-height: 24px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					
					padding: 0 10px;
					
					font-size: 12px;
					
					cursor: pointer;
				}
				
				.edit-overrides-map > .top-menu-d > .dropdown > .dropdown-options > div:hover {
					background: rgba(255,255,255,.1);
				}

		.edit-overrides-map > .top-menu-d > .next {
			width: 10px;
		}






.overrides-map {
	color: rgba(255,255,255,.5);
	
	position: relative;
	
	margin-top: 20px;
}
	
	.overrides-map .col {
		display: flex;
		
		padding-left: 20px;
		
		height: 26px;
		
		font-size: 13px;
		color: rgba(255,255,255,.5);
		line-height: 26px;
		text-transform: capitalize;
		
		padding-top: 7px;
		
		border-bottom: solid 1px rgba(0,0,0,.2);
		
		position: relative;
	}
	
	.overrides-map .col + .col {
		padding-top: 0;
		
		border-top: solid 1px rgba(255,255,255,.1);
	}
	
	.overrides-map .props + .col {
		padding-top: 7px;
		
		border-top-width: 0;
	}
	
	
	.overrides-map > .props {
		position: absolute;
		
		top: -24px;
		
		left: 0;
		right: 0;
		
		height: 15px;
		
		line-height: 15px;
		font-size: 9px;
		font-weight: bold;
		color: rgba(255,255,255,.4);
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		
		background: transparent;
		box-shadow: none;
		
		border-bottom-width: 0;
	}
		
		.overrides-map .col > .cell-left {
			width: 60px;
			
			position: relative;
		}
		
		.overrides-map .col > .cell-left:after {
			position: absolute;
			
			content: '';
			
			top: calc(50% - 4px);
			left: -11px;
			
			border-left: 5px solid #fff;
			border-top: 3.5px solid transparent;
			border-bottom: 3.5px solid transparent;
		}
		
		.overrides-map > .props > .cell-left:after {	
			content: none;
		}
		
		.overrides-map .col > .cell-right {
			flex: 1;
			
			margin-left: 25px;
			
			position: relative;
			
		}
		
		.overrides-map .col > .cell-right:after {
			position: absolute;
			
			content: '';
			
			width: 9px;
			height: 9px;
			
			top: calc(50% - 5px);
			left: -19px;
			
			border-right: 1px solid #fff;
			border-bottom: 1px solid #fff;
			
			transform: rotateZ(-45deg);
		}
		
		.overrides-map > .props > .cell-right:after {	
			content: none;
		}
		
			.overrides-map .col > div > div {	
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		
			.overrides-map .col > .cell-right > div {
				width: 85px;
			}
		
			.overrides-map .col > div > .dropdown {	
				position: absolute;
				
				background: #000;
				
				display: none;
				
				top: 100%;
				left: 0;
				
				width: auto;
				
				z-index: 2;
			}
		
			.overrides-map .col > div > .dropdown.open {	
				display: block;
			}
		
			.overrides-map .col > .cell-right > .dropdown {	
				left: auto;
				right: 0;
			}
				
				.overrides-map .col > div > .dropdown > div {	
					display: block;
					
					padding: 0 8px;
					
					white-space: nowrap;
					
					cursor: pointer;
				}
				
				.overrides-map .col > div > .dropdown > div:hover {	
					background: rgba(255,255,255,.1);
				}
	
		.overrides-map .col > .remove {	
			position: absolute;
			
			top: calc(50% - 9px);
			right: 0;
			
			width: 18px;
			height: 18px;
			
			cursor: pointer;
			
			background-size: 24px;
			background-position: center center;
			background-repeat: no-repeat;
			
			display: none;
		}
			
			.overrides-map .col:hover > .remove {
				display: block;
			}
	
	.overrides-map > .col-2 {
		display: flex;
		
		
		font-size: 13px;
		color: rgba(255,255,255,.5);
		line-height: 26px;
		text-transform: capitalize;
		
		padding-top: 12px;
		padding-bottom: 12px;
		
		position: relative;
		
		border-top: solid 1px rgba(255,255,255,.1);
	}
		.overrides-map > .col-2 > .cell {
			text-align: center;
			
			width: 100%;
		}
			
			.overrides-map > .col-2 > .cell > .add {
				width: 13px;
				height: 13px;
				
				background-size: 26px;
				background-position: center center;
				background-repeat: no-repeat;
				
				margin: 0 auto;
				
				cursor: pointer;
				
				opacity: .5;
			}

.apply-to-all {
	padding: 20px 0;
}
	
	.apply-to-all > div {
		background: rgba(121,121,121,.3);
		
		border-radius: 2px;
		
		height 24px;
		
		line-height: 24px;
		color: rgba(255,255,255,.3);
		font-size: 13px;
		text-transform: uppercase;
		font-family: 'Source Sans Pro', sans-serif;
		
		padding: 0 14px;
		
		cursor: pointer;
	}
	
	.apply-to-all > div:hover {
		background: rgba(121,121,121,.5);
	}
	
	
	
	
	
	
.taxonomy {

}

	.taxonomy .top-menu {
		font-size: 10px;
		color: #fff;
		text-transform: uppercase;
		
		width: 100%;
		height: 38px;
		
		position: relative;
	}
		
		.taxonomy .top-menu > div {
			opacity: .2;
			
			cursor: pointer;
		}
		
		.taxonomy .top-menu > div:hover {
			opacity: .7;
		}
		
		.taxonomy .top-menu > .active,
		.taxonomy .top-menu > .active:hover {
			opacity: 1;
		}
		
		.taxonomy .top-menu > div + div {
			margin-left: 12px;
		}
		
		.taxonomy .top-menu > .add {
			position: absolute;
			
			top: calc(50% - 9px);
			right: 23px;
			
			width: 18px;
			height: 18px;
			
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 27px;
			
			cursor: pointer;
			
			opacity: .7;
		}
		
		.taxonomy .top-menu > .add:hover {
			opacity: 1;
		}
		
		.taxonomy .top-menu > .dropdown {
			position: absolute;
			
			top: calc(50% + 9px);
			right: 23px;
			
			width: 150px;
			
			background: #121212;
			
			opacity: 1;
			
			padding: 4px 0;
			
			display: none;
			
			box-shadow: 0 10px 40px 0 rgba(0,0,0,.2), 
									0 5px 12px rgba(0,0,0,.4)
		}
		
		.taxonomy .top-menu > .dropdown.open {
			display: block;
		}
		
		.taxonomy .top-menu > .dropdown:hover {
			opacity: 1;
		}
			
			.taxonomy .top-menu > .dropdown > div {
				padding: 10px 16px;
				
				color: rgba(255,255,255,.7);
				font-size: 10px;
				font-weight: 600;
				text-transform: uppercase;
				
				position: relative;
			}
			
			.taxonomy .top-menu > .dropdown > div + div:after {
				position: absolute;
				
				content: '';
				
				top: 0;
				left: 10px;
				right: 10px;
				
				height: 1px;
				
				background: rgba(255,255,255,.1)
			}
			
			.taxonomy .top-menu > .dropdown > div:hover {
				background: rgba(255,255,255,.05);
			}
	
	.taxonomy .taxonomy-content {
		width: 100%;
		height: calc(100% - 38px);
	}
		
		.taxonomy .taxonomy-content > div {
			width: 100%;
			height: 100%;
		}

.option-box > div.taxonomy-items {
	padding: 0 15px;
}

.option-box > div.taxonomy-items.close {
	border-radius: 4px;
}

	.option-box > div.taxonomy-items.close > .scheme,
	.option-box > div.taxonomy-items.close > .actions,
	.option-box > div.taxonomy-items.close > .values,
	.taxonomy-items.close:hover > .title > .delete {
		display: none;
	}
	
	.taxonomy-items.close > .title {
		padding: 7px 0;
		
		border-bottom-width: 0;
		
		font-size: 12px;
	}

.taxonomy-items {
	padding: 0 7px;
}
	
	.taxonomy-items > .title {
		padding: 14px 0 3px;
		
		font-size: 10px;
		color: #fff;
		font-weight: 600;
		text-transform: uppercase;
		
		position: relative;
		
		min-height: 14px;
	}
		
		.taxonomy-items > .title > .delete {
			position: absolute;
			
			top: 14px;
			right: 0;
			
			width: 14px;
			height: 14px;
			
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 22px;
			
			opacity: .7;
			
			cursor: pointer;
			
			display: none;
		}
		
		.taxonomy-items > .title > .delete:hover {
			opacity: 1;
		}
		
		.taxonomy-items:hover > .title > .delete {
			display: block;
		}
	
	.taxonomy-items > .scheme {
		padding-top: 5px;
		padding-bottom: 5px;
		
		border-bottom: solid 1px rgba(0,0,0,.2);
	}
		
		.taxonomy-items > .scheme > .row {
			width: 100%;
			height: 28px;
			
			display: flex;
			
			position: relative;
		}
			
			.taxonomy-items > .scheme > .row > .prop {
				width: 20px;
				
				line-height: 28px;
				
				padding-left: 2px;
			}
			
			.taxonomy-items > .scheme > .row > .value {
				flex: 1;
				
				display: flex;
			}
				
				.taxonomy-items > .scheme > .row > .value > input {
					background: #212121;
					
					border-radius: 2px;
					
					border-width: 0;
					
					height: 24px;
					
					line-height: 24px;
					
					margin-top: 2px;
					
					flex: 1;
					
					color: #fff;
					font-size: 13px;
					
					padding: 0 9px;
				}
	
	.taxonomy-items > .values {
		width: 100%;
		min-height: 30px;
		
		padding-top: 10px;
		padding-bottom: 20px;
		
		border-top: solid 1px rgba(255,255,255,.1);
		border-bottom: solid 1px rgba(0,0,0,.2);
	}
		
		.taxonomy-items > .values > div {
			width: 100%;
			height: 17px;
			
			display: flex;
		}
			
			.taxonomy-items > .values > div > .icon {
				width: 17px;
				height: 17px;
				
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 27px;
			}
			
			.taxonomy-items > .values > div > .text {
				flex: 1;
				
				line-height: 17px;
				font-size: 10px;
				text-transform: uppercase;
				font-weight: 600;
				color: rgba(255,255,255,.4);
				
				padding-left: 7px;
			}
			
			.taxonomy-items > .values > div > .add {
				width: 17px;
				height: 17px;
				
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 27px;
				
				cursor: pointer;
				
				opacity: .7;
				
				display: none;
				
				cursor: pointer;
				
				position: relative;
			}
			
			.taxonomy-items > .values > div > .add:hover {
				opacity: 1;
			}
			
			.taxonomy-items:hover > .values > div > .add {
				display: block;
			}
	
	.taxonomy-items > .actions {
		width: 100%;
		min-height: 30px;
		
		padding-top: 10px;
		
		border-top: solid 1px rgba(255,255,255,.1);
	}
		
		.taxonomy-items > .actions > div {
			width: 100%;
			height: 17px;
			
			display: flex;
		}
			
			.taxonomy-items > .actions > div > .icon {
				width: 17px;
				height: 17px;
				
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 27px;
			}
			
			.taxonomy-items > .actions > div > .text {
				flex: 1;
				
				line-height: 17px;
				font-size: 10px;
				text-transform: uppercase;
				font-weight: 600;
				color: rgba(255,255,255,.4);
				
				padding-left: 7px;
			}
			
			.taxonomy-items > .actions > div > .add {
				width: 17px;
				height: 17px;
				
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 27px;
				
				cursor: pointer;
				
				opacity: .7;
				
				display: none;
				
				position: relative;
			}
			
			.taxonomy-items > .actions > div > .add:hover {
				opacity: 1;
			}
			
			.taxonomy-items:hover > .actions > div > .add {
				display: block;
			}
			
			.taxonomy-items > div > div {
				position: relative;
			}
			
				.taxonomy-items > div > div > .drop {
					position: absolute;
					
					top: 100%;
					right: 0;
					
					width: 120px;
					max-height: 150px;
					
					background: #000;
					
					display: none;
					
					overflow: auto;
					
					z-index: 5;
				}
				
				.taxonomy-items > div > div > .drop.open {
					display: block;
				}
					
					.taxonomy-items > div > div > .drop > div {
						padding: 4px 8px;
						
						cursor: pointer;
						
						font-size: 12px;
					}
	
		.taxonomy-items > div > .props {
			width: 100%;
			height: auto;
			
			margin-top: 2px;
			padding-bottom: 6px;
			
			display: block;
		}
			
			.taxonomy-items > div > .props > .prop-block {
				margin: 0 15px;
			}
			
			.taxonomy-items > div > .props > .prop-block + .prop-block {
				margin-top: 20px;
			}
				
				.taxonomy-items > div > .props > .prop-block > .title {
					width: 100%;
					
					text-align: center;
					
					line-height: 22px;
					
					font-size: 10px;
					font-weight: 600;
					color: rgba(255,255,255,.8);
					text-transform: uppercase;
				}
				
				.taxonomy-items > div > .props > .prop-block > .prop-block-hook {
					display: flex;
					
					align-items: flex-start;
					
					position: relative;
				}
				
				.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .delete {
					position: absolute;
					
					top: 0;
					left: 100%;
					
					width: 22px;
					height: 22px;
					
					background-size: 24px;
					background-position: center center;
					background-repeat: no-repeat;
					
					cursor: pointer;
					
					display: none;
				}
				
				.taxonomy-items:hover > div > .props > .prop-block > .prop-block-hook > .delete {
					display: block;
				}
					
				.taxonomy-items > div > .props > .prop-block > .prop-block-hook + .prop-block-hook {
					margin-top: 3px;
				}
					
					.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .name {
						height: 24px;
						
						color: rgba(255,255,255,.7);
						font-size: 13px;
						
						line-height: 24px;
						
						border-radius: 2px;
						border-width: 0;
						
						line-height: 24px;
						font-size: 13px;
						color: #fff;
						
						padding: 0 8px;
						
						border-radius: 2px;
						
						background: #212121;
						
						width: 100%;
						
						margin-top: 2px;
					}
					
					.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value {
						width: 100%;
						
						margin-top: 2px;
					}
						
						.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value > .text-hook {
							position: relative;
						}
						
						
							.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value > .text-hook > .text {
								position: relative;
								
								height: 24px;
								
								line-height: 24px;
								font-size: 13px;
								color: #fff;
								
								padding: 0 8px;
								
								border-radius: 2px;
								
								background: #212121;
								
								cursor: pointer;
							}
								
							.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value > .text-hook > .text:after {
							  position: absolute;
						    content: '';
						    width: 0;
						    height: 0;
						    top: calc(50% - 1.75px);
						    right: 7px;
						    border-left: 3.5px solid transparent;
						    border-top: 5px solid #fff;
						    border-right: 3.5px solid transparent;
						    transition: all .2s ease-in-out;
							}
							
							.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value.open > .text-hook > .text:after {
							  transform: rotateZ(180deg);
							}
							
							.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value > .text-hook > .box {
								position: absolute;
								
								top: 100%;
								left: 0;
								right: 0;
								
								background: #000;
								
								max-height: 120px;
								
								overflow: auto;
								
								display: none;
								
								z-index: 5;
							}
							
							.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value.open > .text-hook > .box {
								display: block;
							}
								
								.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value > .text-hook > .box > div {
									padding: 6px 8px;
									
									font-size: 11px;
									color: rgba(255,255,255,.6);
									font-weight: 600;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									
									cursor: pointer;
								}
								
								.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .value > .text-hook > .box > div:hover {
									color: rgba(255,255,255,1);
								}
					
					.taxonomy-items > div > .props > .prop-block > .prop-block-hook > .add  {
						width: 24px;
						height: 24px;
						
						margin-left: 5px;
						
						background-size: 24px;
						background-position: center center;
						background-repeat: no-repeat;
						
						cursor: pointer;
						
						opacity: 0;
						pointer-events: none;
					}
					
					.taxonomy-items:hover > div > .props > .prop-block > .prop-block-hook > .add  {
						opacity: 1;
						pointer-events: all;
					}






.taxonomy-props-box {
	background: rgba(33,33,33,.6);
	
	border-radius: 2px;
	
	margin-top: 4px;
}

.taxonomy-props-box:empty {
	margin-top: 0;
}
	
	.taxonomy-props-box > .taxonomy-props-options {
		width: 100%;
		height: 32px;
		
		line-height: 32px;
		
		position: relative;
		
		display: flex;
	}
	
	.taxonomy-props-box > .taxonomy-props-options + .taxonomy-props-options:after {
		position: absolute;
		
		content: '';
		
		top: 0;
		left: 12px;
		right: 12px;
		
		height: 1px;
		
		background: #D8D8D8;
		
		opacity: .1;
	}
		
		.taxonomy-props-box > .taxonomy-props-options > .text {
			padding-left: 6px;
			
			font-size: 10px;
			font-weight: bold;
			color: rgba(255,255,255,.4);
			text-transform: uppercase;
			
			line-height: 32px;
		} 
		
		.taxonomy-props-box > .taxonomy-props-options > input {
			width: 100%;
			height: 100%;
			
			background: transparent;
			
			border-width: 0;
			
			font-size: 13px;
			color: #fff;
			
			padding: 0 20px 0 7px;
		}
		
		.taxonomy-props-box > .taxonomy-props-options > .remove {
			position: absolute;
			
			top: calc(50% - 11px);
			right: 0;
			
			width: 22px;
			height: 22px;
			
			cursor: pointer;
			
			background-size: 24px;
			background-position: center center;
			background-repeat: no-repeat;
			
			opacity: .2;
		}



.switch-box {
	width: 100%;
	height: 100%;
	
	position: relative;
}
	
	.switch-box > .switch {
		position: absolute;
		
		top: calc(50% - 8px);
		left: 0;
		
		width: 30px;
		height: 16px;
		
		background: #212121;
		
		border-radius: 16px;
		
		cursor: pointer;
	}
		
		.switch-box > .switch > div {
			position: absolute;
			
			top: 1px;
			left: 1px;
			
			width: 14px;
			height: 14px;
			
			border-radius: 50%;
			
			background: #6A6868;
			
			transition: all .1s ease-in-out;
		}
		
		.switch-box.active > .switch > div {
			left: calc(100% - 15px);
			background: var(--accent2);
		}


.option-box > .scheme-visible {
	display: flex;
	
	padding: 5px;
}
	
	.option-box > .scheme-visible > .compo {
		width: 28px;
		height:28px;
		
		display: flex;
	}
	
	.option-box > .scheme-visible > .text {
		display: flex;
		
		flex: 1;
		
		font-size: 13px;
		line-height: 28px;
		
		padding-left: 8px;
	}





.action-item {
	display: flex;
  
  margin-top: 17px;
}
	
	.action-item > .active {
		width: 40px;
		
		padding-top: 4px;
	}
	
	.action-item > .collapse {
		width: 19px;
		
		position: relative;
		
		cursor: pointer;
	}
	
	.action-item > .collapse:after {
		position: absolute;
		
		content: '';
		
		width: 0; 
		height: 0; 
		
		top: calc(50% - 2px);
		right: 7px;
		
		border-left: 3.5px solid transparent;
		border-top: 5px solid rgba(255,255,255,.6);
		border-right: 3.5px solid transparent;
		
		transition: all .2s ease-in-out;
	}
	
	.action-item.collapse > .collapse:after {
		transform: rotateZ(-90deg)
	}
	
	.action-item > .action-props {
		flex: 1;
		
		height: 40px;
		
		display: flex;
	}
	
	.action-item.collapse > .action-props > .props,
	.action-item.collapse > .action-props > .remove {
		display: none;
	}
	
		.action-item > .action-props > div {
			height: 36px;
			
			line-height: 36px;
			
			padding: 0 10px;
			
			margin-top: 2px;
			
			cursor: pointer;
		}
			
		.fn-actions > .action-item > .action-props > .name {
			
		}
			
		.action-item > .action-props > .name {
			width: 95px;
			
			padding: 0;
			
			display: flex;
		}
			
			.action-item > .action-props > .name > input {
				background: #4B4A4A;
				
				text-transform: uppercase;
				font-size: 10px;
				color: #000;
				
				width: 100%;
				
				padding: 0 10px;
				
				white-space: nowrap;
				
				text-overflow: ellipsis;
				overflow: hidden;
				
				height: 34px;
				
				border: solid 1px #979797;
			
				border-radius: 4px 0 0 4px;
			}
			
			.action-item > .action-props > .name > input:focus {
				background: #fff;
			}
			
			.fn-actions .action-item > .action-props > .name > input {
				height: 36px;
				
				border-width: 0;
				
				border-radius: 0;
			}
		
		.action-item > .action-props > .props {
			display: flex;
			
			flex: 1;
			
			padding: 0 0 0 3px;
			
			cursor: default;
		}
		
		.action-item > .action-props > .remove {
			width: 36px;
			
			margin-left: 12px;
			
			opacity: 0;
			
			pointer-events: none;
		}
		
		.action-item:hover > .action-props > .remove {
			opacity: 1;
			
			pointer-events: all;
		}
			
			.action-item > .action-props > .props > div {
				height: 100%;
			
				line-height: 36px;
				
				background: #161616;
				
				cursor: pointer;
				
				display: flex;
				
				position: relative;
				
				min-width: 25px;
				
				margin-left: 3px;
			}
				
				.action-item > .action-props > .props > div > .title {
					position: absolute;
					
					top: -11px;
					left: 6px;
					
					height: 10px;
					
					line-height: 10px;
					text-transform: uppercase;
					font-size: 8px;
					color: rgba(255,255,255,.4);
				}
				
				.action-item > .action-props > .props > div > .value {
					line-height: 36px;
					
					font-size: 13px;
					color: rgba(255,255,255,.6);
					
					overflow: auto;
					
					display: flex;
					
					width: 100%;
					
					position: relative;
				}
				
				.action-item > .action-props > .props > div > .value > input {
					width: calc(100% - 2px);
					height: 34px;
					
					background: transparent;
					
					font-size: 13px;
					color: rgba(255,255,255,.6);
					
					padding: 0;
					
					line-height: 36px;
				
					padding: 0 14px;
					
					border: 1px solid transparent;
				}
				
				.action-item > .action-props > .props > div > .value > input:focus {
					border-color: #fff;
				}
				
				.action-item > .action-props > .props > div > .value > input.error,
				.action-item > .action-props > .props > div > .value > input.error:focus {
					border-color: rgba(208,2,27,.65);
					background: rgba(57,41,41,.65);
				}
				
				.action-item > .action-props > .props > div > .value > .number-up {
					position: absolute;
					
					top: calc(50% - 8px);
					right: 3px;
					
					width: 8px;
					height: 6px;
					
					opacity: .4;
				}
		
			.action-item > .action-props > .props > div > .value > .number-up:after {
				position: absolute;
				
				content: '';
				
				top: 0;
				left: 0;
				
				border-bottom: solid 5px #fff; 
				border-left: solid 4px transparent; 
				border-right: solid 4px transparent; 
			}
				
				
				.action-item > .action-props > .props > div > .value > .number-down {
					position: absolute;
					
					top: calc(50% + 2px);
					right: 3px;
					
					width: 8px;
					height: 5px;
					
					opacity: .4;
				}
			
				.action-item > .action-props > .props > div > .value > .number-down:after {
					position: absolute;
					
					content: '';
					
					top: 0;
					left: 0;
					
					border-top: solid 5px #fff; 
					border-left: solid 4px transparent; 
					border-right: solid 4px transparent; 
				}
				
				
				.action-item > .action-props > .props > div > .value > .pointer {
					width: 25px;
					
					position: absolute;
					
					top: 1px;
					left: 1px;
					bottom: 1px;
				}
				
				.action-item > .action-props > .props > div > .value > .pointer + input {
					padding-left: 28px;
				}





.collapse-left {
	position: absolute;
	
	top: 0;
	left: 0;
	bottom: 0;
	
	width: 5px;
	
	background: #191919;
	
	cursor: pointer;
}






.fn-actions {
	margin-left: 140px;
	margin-left: 107px;
	
	display: flex;
	
	position: relative;
	flex-direction: column;
}

.fn-actions.collapse {
	display: none;
}

	.fn-actions .fn-actions {
		margin-left: 67px;
	}
	
	.fn-actions > div {
		display: flex;
		
		position: relative;
	}
	
	.fn-actions > div + div {
		padding-top: 20px;
		padding-top: 0;
	}
	
	.fn-actions > div + .collapse {
		padding-top: 0;
	}
		
		.fn-actions > div > div {
			flex: 1;
		}
		
		.fn-actions > div > .collapse {
			width: 19px;
			height: 36px;
			
			margin-top: 19px;
			
			position: relative;
			
			cursor: pointer;
			
			flex: none;
		}
		
		.fn-actions > div > .collapse:after {
			position: absolute;
			
			content: '';
			
			width: 0; 
			height: 0; 
			
			top: calc(50% - 2px);
			right: 7px;
			
			border-left: 3.5px solid transparent;
			border-top: 5px solid rgba(255,255,255,.6);
			border-right: 3.5px solid transparent;
			
			transition: all .2s ease-in-out;
		}
		
		.fn-actions > div > .fn-prop {
			background: #3F3E3E;
			
			text-transform: uppercase;
			font-size: 10px;
			text-align: center;
			line-height: 36px;
			
			width: 60px;
			height: 36px;
			
			flex: none;
			
			padding: 0;
			
			margin-right: 4px;
			
			margin-top: 19px;
		}
		
		.fn-actions > div.collapse > div {
			display: none;
		}
		
		.fn-actions > div.collapse > .fn-prop {
			display: block;
		}
		
		.fn-actions > div.collapse > .collapse {
			display: block;
			transform: rotateZ(-90deg)
		}


.action-block {
	position: relative;
	
	min-height: 40px;
	
	margin-top: 15px;
}


.action-block > .addNew {
	position: absolute;
	
	top: 0;
	right: 0;
	
	background: #000;
	
	width: 14px;
	height: 40px;
	
	cursor: pointer;
	
	z-index: 5;
}

.action-block + .action-block {
	padding-top: 5px;
}

.action-block.primary {
	padding: 10px;
}
	
	.action-block > .trigger {
		position: relative;
	}
		
		.action-block > .trigger > .remove {
			position: absolute;
			
			top: 0;
			right: 0;
			
			width: 26px;
			height: 26px;
			
			cursor: pointer;
		}






.action-module {
	width: 100%;
	height: 100%;
}
	
	.action-module > .triggers {
		width: 100%;
		height: 43px;
		
		display: flex;
		
		justify-content: center;
		
		position: relative;
	}
		
		.action-module > .triggers > div {
			width: 35px;
			height: 100%;
		}
		
		.action-module > .triggers > .trigger {
			width: 40px;
			height: 100%;
			
			cursor: pointer;
			
			position: relative;
		}
		
		.action-module > .triggers > .trigger + .trigger {
			margin-left: 4px;
		}
		
		.action-module > .triggers > .trigger.select {
			opacity: 1;
		}
		
			.action-module > .triggers > .trigger > div {
				opacity: .4;
				
				width: 100%;
				height: 100%;
			}
		
			.action-module > .triggers > .trigger.active > .data {
				opacity: 1;
				
				position: absolute;
				
				top: 0;
				left: 0;
				right: 0;
				
				height: 2px;
				width: auto;
				
				background: var(--accent2);
				
				pointer-events: none;
			}
		
			.action-module > .triggers > .trigger.select > div {
				opacity: 1;
			}
		
		
		
		.action-module > .triggers > .block-options {
			position: absolute;
			
			top: 0;
			right: 0;
			
			display: flex;
			
			width: auto;
			
		}
			
			.action-module > .triggers > .block-options > div {
				width: 35px;
				height: 100%;
				
				opacity: .2;
			}
			
			.action-module > .triggers > .block-options > div:hover {
				opacity: 1;
			}
			
			.action-module > .triggers > .block-options > div + div {
				margin-left: 2px;
			}
	
	.action-module > .triggers-block {
		opacity: 1;
		
		width: 100%;
		height: calc(100% - 43px - 50px);
		
		overflow: auto;
		
		padding-bottom: 50px;
	}




.action-dropdown {
	background: #181818;
	
	border-radius: 6px;
	
	position: absolute;
	
	width: 180px;
	height: 400px;
	
	border: solid 1px #4B4B4B;
	
	z-index: 5;
}

.action-dropdown:before {
	position: absolute;
	
	content: '';
	
	border-top: solid 10px transparent;
	border-bottom: solid 10px transparent;
	border-right: solid 6px #4B4B4B;
	
	top: calc(50% - 10px);
	left: -7px;
}

.action-dropdown:after {
	position: absolute;
	
	content: '';
	
	border-top: solid 9px transparent;
	border-bottom: solid 9px transparent;
	border-right: solid 5px #181818;
	
	top: calc(50% - 9px);
	left: -5px;
}

	.action-dropdown > .list {
		height: calc(100% - 145px);
		
		overflow: auto;
	}
		
		.action-dropdown > .list > div {
			padding: 10px 14px;
			
			color: rgba(255,255,255,.4);
			font-size: 14px;
			
			position: relative;
		}
		
		.action-dropdown > .list > div + div:after {
			position: absolute;
			
			content: '';
			
			top: 0;
			left: 23px;
			right: 23px;
			
			height: 1px;
			
			background: #D8D8D8;
			
			opacity: .1;
		}
		
		.action-dropdown > .list > .slc {
			background: rgba(var(--accent-base), .35);
			
			color: #fff;
		}
	
	.action-dropdown > .category {
		height: 145px;
		
		background: #222222;
	}
	
	




.action-value-dropdown {
	width: 100%;
}
	
	.action-value-dropdown > .value {
		color: rgba(255,255,255,.6);
		font-size: 13px;
		
		position: relative;
		
		height: 100%;
	}
	
	.action-value-dropdown > .value:after {
		position: absolute;
		
		content: '';
		
    width: 0;
    height: 0;
    
    top: calc(50% - 1.75px);
    right: 7px;
    
    border-left: 3.5px solid transparent;
    border-top: 5px solid #fff;
    border-right: 3.5px solid transparent;
    
    transition: all .2s ease-in-out;
	}
	
	.action-value-dropdown.open > .value:after {
		transform: rotateZ(-180deg);
	}
	
	.action-value-dropdown > .options {
		position: absolute;
		
		top: 100%;
		left: 0;
		right: 0;
		
		background: #000;
		
		display: none;
		
		z-index: 5;
		
		max-height: 130px;
		
		overflow: auto;
	}
	
	.action-value-dropdown.open > .options {
		display: block;
	}
		
		.action-value-dropdown > .options > div {
			color: rgba(255,255,255,.6);
			font-size: 11px;
			
			padding: 0 10px;
			
			position: relative;
		}
		
		.action-value-dropdown > .options > div + div:after {
			position: absolute;
			
			content: '';
			
			top: 0;
			left: 12px;
			right: 12px;
			
			height: 1px;
			
			background: rgba(255,255,255,.1);
		}
		
		.action-value-dropdown > .options > div:hover {
			background: rgba(255,255,255,.1);
		}





.dropdown-box-mega {
  width: 100%;
  height: 100%;
}
	
	.dropdown-box-mega > .box {
		position: relative;
		
		width: 100%;
		height: 100%;
		
		display: flex;
		
		cursor: pointer;
	}
		
		.dropdown-box-mega > .box > .icon {
			width: auto;
			height: 40px;
			
			position: relative;
		}
		
			.dropdown-box-mega > .box > .icon > .back {
				width: 100%;
				height: 100%;
				
				opacity: .25;
			
				background-image: url('https://lib.jeekjee.net/media/ui_icons/bgtransparent.svg');
				background-size: 11.5px;
			}
		
			.dropdown-box-mega > .box > .icon > .preview {
				position: absolute;
				
				width: 100%;
				height: 100%;
				
				top: 0;
				left: 0;
				
				overflow: hidden;
				
				background-size: contain;
				background-position: center center;
				background-repeat: no-repeat;
			}
		
		.dropdown-box-mega > .box > .text {
			height: 100%;
			
			background: #212121;
			
			border-radius: 0 2px 2px 0;
			
			position: relative;
		}
		
		.dropdown-box-mega > .box > .text:after {
			position: absolute;
	    content: '';
	    width: 0;
	    height: 0;
	    top: calc(50% - 2px);
	    right: 5px;
	    border-left: 3px solid transparent;
	    border-top: 4px solid #fff;
	    border-right: 3px solid transparent;
	    transition: all .2s ease-in-out;
		}
		
		.dropdown-box-mega.open > .box > .text:after {
			transform: rotateZ(180deg);
		}
		
			.dropdown-box-mega > .box > .text > div {
				color: rgba(255,255,255,.3);
				color: #fff;
				font-size: 13px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-family: 'Source Sans Pro', sans-serif;
				
				width: 100%;
				
				padding: 0 14px 0 8px;
			}
	
	.dropdown-box-mega > .list {
		position: absolute;
		
		background: #212121;
		
		top: 100%;
		left: 0;
		right: 0;
		
		border-radius: 2px;
		
		padding-bottom: 12px;
		
		z-index: 5;
		
		display: none;
		
		box-shadow: 0 2px 4px rgba(0,0,0,.5);
	}
	
	.dropdown-box-mega.open > .list {
		display: block;
	}
		
		
		.dropdown-box-mega.open > .list > div > .search {
			margin: 6px 6px 12px;
			
			height: 24px;
			
			background: #2F3030;
			
			border-radius: 24px;
			
			display: flex;
		}
			
			.dropdown-box-mega.open > .list > div > .search > div {
				width: 35px;
				height: 100%;
				
				display: flex;
				
				overflow: hidden;
			}
			
			.dropdown-box-mega.open > .list > div > .search > .active {
				width: calc(100% - 35px);
				height: 100%;
				
				background: #515453;
				
				border-radius: 24px;
			}
			
				.dropdown-box-mega.open > .list > div > .search > div > .icon {
					width: 35px;
					height: 100%;
					
					cursor: pointer;
					
					opacity: .3;
				}
			
				.dropdown-box-mega.open > .list > div > .search > .active > .icon {
					cursor: default;
				}
			
				.dropdown-box-mega.open > .list > div > .search > div > input {
					width: calc(100% - 35px);
					height: 100%;
					
					border-width: 0;
					
					background: transparent;
					
					font-size: 13px;
					color: #fff;
					caret-color: #589DEC;
					
					display: none;
				}
			
				.dropdown-box-mega.open > .list > div > .search > .active > input {
					display: block;
				}
			
				.dropdown-box-mega.open > .list > div > .search > div > .title {
					width: calc(100% - (35px * 2));
					height: 100%;
					
					padding-left: 35px;
					
					line-height: 24px;
					font-size: 11px;
					color: #fff;
					text-align: center;
					
					display: none;
				}
			
				.dropdown-box-mega.open > .list > div > .search > .active > .title {
					display: block;
				}
			
			.dropdown-box-mega.open > .list > div > .search > .local {
			
			}
			
				.dropdown-box-mega.open > .list > div > .search > .local > input {
					width: calc(100% - 35px - 10px);
					
					padding-right: 10px;
				}
			
			.dropdown-box-mega.open > .list > div > .search > .external {
			
			}
			
				.dropdown-box-mega.open > .list > div > .search > .external > input {
					width: calc(100% - 35px - 10px);
					
					padding-left: 10px;
				}
		
		
		.dropdown-box-mega.open > .list > .content {
			
		}
			
			.dropdown-box-mega.open > .list > .content > div {
				
			}
			
			.dropdown-box-mega.open > .list > .content > .local {
				overflow: auto;
				
				max-height: 132px;
			}
			
			.dropdown-box-mega.open > .list > .content > .local.grid {
				display: grid;
				
				padding: 0 10px;
				
				grid-column-gap: 3px;
				grid-row-gap: 3px;
				grid-template-columns: 1fr 1fr 1fr;
			}
				
				.dropdown-box-mega.open > .list > .content > .local > .title {
					width: calc(100% - 24px);
					height: 30px;
					
					padding: 0 12px;
					
					line-height: 30px;
					
					font-size: 13px;
					color: rgba(255,255,255,.6);
					font-weight: bold;
				}
				
				.dropdown-box-mega.open > .list > .content > .local > .local-item {
					width: calc(100% - 24px);
					height: 30px;
					
					padding: 0 12px;
					
					cursor: pointer;
					
					display: flex;
				}
				
				.dropdown-box-mega.open > .list > .content > .local > .local-item.active,
				.dropdown-box-mega.open > .list > .content > .local > .local-item.active:hover {
					background: rgba(var(--accent-base),.3);
				}
				
				.dropdown-box-mega.open > .list > .content > .local > .local-item:hover {
					background: rgba(255,255,255,.1);
				}
				
				.dropdown-box-mega.open > .list > .content > .local > .local-item + .local-item {
					margin-top: 4px;
				}
					
					.dropdown-box-mega.open > .list > .content > .local > .local-item > .preview {
						width: 30px;
						height: 30px;
						
						position: relative;
					}
						
						.dropdown-box-mega.open > .list > .content > .local > .local-item > .preview > .back {
							width: 100%;
							height: 100%;
							
							opacity: .25;
						
							background-image: url('https://lib.jeekjee.net/media/ui_icons/bgtransparent.svg');
							background-size: 11.5px;
						}
						
						.dropdown-box-mega.open > .list > .content > .local > .local-item > .preview > .image {
							position: absolute;
							
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							
							background-size: contain;
							background-position: center center;
							background-repeat: no-repeat;
							
							overflow: hidden;
						}
					
					.dropdown-box-mega.open > .list > .content > .local > .local-item > .text {
						width: calc(100% - 30px - 5px);
						height: 30px;
						
						margin-left: 5px;
					}
					
						.dropdown-box-mega.open > .list > .content > .local > .local-item > .text > div {
							font-size: 13px;
							color: rgba(255,255,255,.6);
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						
						.dropdown-box-mega.open > .list > .content > .local > .local-item > .text > .format {
							font-size: 10px;
							color: rgba(255,255,255,.3);
							text-transform: uppercase;
						}
						
						.dropdown-box-mega.open > .list > .content > .local > .local-item > .text > .font-name {
							line-height: 30px;
							height: 100%;
						}
				
				.dropdown-box-mega.open > .list > .content > .local.grid > .local-item {
					width: 100%;
					height: 58px;
					
					padding: 0;
				}
				
				.dropdown-box-mega.open > .list > .content > .local.grid > .local-item + .local-item {
					margin-top: 0;
				}
					
					.dropdown-box-mega.open > .list > .content > .local.grid > .local-item > .preview {
						width: 100%;
						height: 100%;
						
						position: relative;
					}
					
					.dropdown-box-mega.open > .list > .content > .local.grid > .local-item.active > .preview:after {
						position: absolute;
						
						content: '';
						
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						
						border: solid 1px var(--accent);
						
						pointer-events: none;
					}
			
				
			.dropdown-box-mega.open > .list > .content > .external {
				padding: 0 10px;
			}
				
				.dropdown-box-mega.open > .list > .content > .external > .top {
					display: flex;
				}
					
					.dropdown-box-mega.open > .list > .content > .external > .top > .preview {
						width: 30px;
						height: 30px;
						
						position: relative;
					}
						
						.dropdown-box-mega.open > .list > .content > .external > .top > .preview > .back {
							width: 100%;
							height: 100%;
							
							opacity: .25;
						
							background-image: url('https://lib.jeekjee.net/media/ui_icons/bgtransparent.svg');
							background-size: 11.5px;
						}
						
						.dropdown-box-mega.open > .list > .content > .external > .top > .preview > .image {
							position: absolute;
							
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
						}
						
						.dropdown-box-mega.open > .list > .content > .external > .top > .preview > .reload {
							position: absolute;
							
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							
							cursor: pointer;
						}
					
					.dropdown-box-mega.open > .list > .content > .external > .top > textarea {
						resize: none;
						
						margin-left: 3px;
						
						background: #141414;
						
						width: calc(100% - 30px - 3px - 16px);
						height: 62px;
						
						border-radius: 2px;
						
						border: solid 1px #525252;
						
						font-size: 13px;
						color: #fff;
						
						padding: 4px 8px;
					}
				
				.dropdown-box-mega.open > .list > .content > .external > .buttons {
					margin-top: 16px;
				}
					
					.dropdown-box-mega.open > .list > .content > .external > .buttons > div {
						background: #3B3B3B;
						
						border-radius: 2px;
						
						width: 76px;
						height: 24px;
						
						line-height: 24px;
						font-size: 13px;
						color: rgba(255,255,255,.3);
						text-align: center;
						text-transform: uppercase;
						
						cursor: pointer;
					}
					
					.dropdown-box-mega.open > .list > .content > .external > .buttons > div + div {
						margin-left: 3px;
					}









.render-input {
	border-width: 0;
	
	border-radius: 0;
	
	background: transparent;
	
	padding: 0;
	margin: 0;
	
	width: 100%;
	height: 100%;
}








.transform-block {
	position: relative;
}
	
	.transform-block > .delete {
		position: absolute;
		
		top: 8px;
		right: 2px;
		
		width: 16px;
		height: 16px;
		
		background-size: 24px;
		background-repeat: no-repeat;
		background-position: center center;
		
		opacity: .2;
		
		cursor: pointer;
	}
	
	.transform-block > div > .title {
		font-size: 10px;
		line-height: 12px;
		color: #fff;
		font-weight: bold;
		text-transform: uppercase;
		white-space: nowrap;
		text-overflow: ellipsis;
		
		overflow: hidden;
		
		margin-left: 7px;
		
		width: 100%;
		height: 12px;
	}
	
	.transform-block > div > .rule {
		background: #212121;
		
		width: 100%;
		min-height: 80px;
		
		margin-left: 7px;
		margin-right: 11px;
		
		border-radius: 2px;
		
		border-width: 0;
		
		resize: none;
		
		font-size: 12px;
		color: #fff;
	}











.modal-render {
	
}
	
	.modal-render > .QR {
		background: #fff;
		
		width: 170px;
		height: 170px;
		
		border-radius: 3px;
		
		margin: 50px auto 0;
		
		overflow: hidden;
		
		cursor: pointer;
	}
		
		.modal-render > .QR > img {
			width: 100%;
			height: 100%;
		}







.instance-map {
	position: absolute;
	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	background: #000;
	
	z-index: 99;
}
	
	.instance-map > .preview {
		width: 100%;
		height: 220px;
		
		background: #181818;
		
		border-bottom: 7px solid #000;
		
		position: relative;
	}
		
		.instance-map > .preview > .title {
			position: absolute;
			
			font-size: 21px;
			color: rgba(255,255,255,.2);
			
			top: 9px;
			left: 22px;
		}
		
		.instance-map > .preview > .close {
			position: absolute;
			
			top: 9px;
			right: 14px;
			
			width: 15px;
			height: 15px;
			
			background-size: 26px;
			background-position: center center;
			background-repeat: no-repeat;
			
			cursor: pointer;
		}
		
		.instance-map > .preview > .render {
			width: 100%;
			height: 100%;
		}
	
	.instance-map > .map {
		width: 100%;
		height: calc(100% - 227px);
		
		background: #121212;
		
		display: flex;
	}
		
		.instance-map > .map > .map-left {
			width: calc((100% - 260px) / 2);
			height: 100%;
		}
		
		.instance-map > .map > .map-center {
			width: 260px;
			height: 100%;
		}
		
		.instance-map > .map > .map-right {
			width: calc((100% - 260px) / 2);
			height: 100%;
		}
			
			.instance-map > .map > div > .block {
				width: 100%;
				
				height: 80px;
				
				display: flex;
				align-items: center;
			}
			
			.instance-map > .map > .map-left > .block {
				justify-content: flex-end;
			}
			
			.instance-map > .map > .map-right > .block {
				justify-content: flex-start;
			}
				
				.instance-map > .map > div > .block > div {
					width: 245px;
					height: 30px;
					
					display: flex;
					
					position: relative;
				}
					
				.instance-map > .map > .map-left > .block > div {
					position: absolute;
					
					cursor: pointer;
				}
					
				.instance-map > .map > .map-left > .block > div:after {
					position: absolute;
					content: '';
			    width: 0;
			    height: 0;
			    top: calc(50% - 2px);
			    right: 6px;
			    border-left: 4px solid transparent;
			    border-top: 6px solid #fff;
			    border-right: 5px solid transparent;
			    transition: all .2s ease-in-out;
				}
					
				.instance-map > .map > .map-left > .block > div.open:after {
					transform: rotateZ(180deg);
				}
					
					.instance-map > .map > div > .block > div > .text {
						width: calc(100% - 38px);
						height: 100%;
						
						line-height: 30px;
						font-size: 18px;
						color: rgba(255,255,255,.4);
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						text-align: left;
					}
					
					.instance-map > .map > .map-left > .block > div > .text {
						width: calc(100% - 38px - 20px);
					}
					
					.instance-map > .map > .map-right > .block > div > .text {
						text-align: right;
					}
						
						.instance-map > .map > div > .block > div > .text > span {
							color: #fff;
						}
					
					.instance-map > .map > div > .block > div > .icon {
						width: 30px;
						height: 100%;
						
						opacity: .5;
					}
					
					.instance-map > .map > div > .block > div > .list {
						position: absolute;
						
						top: 100%;
						left: 0;
						right: 0;
						
						background: #000;
						
						z-index: 5;
					}
					
						.instance-map > .map > div > .block > div > .list > div {
							padding: 0 12px;
							
							color: rgba(255,255,255,.5);
							font-size: 13px;
							line-height: 28px;
						}
							
							.instance-map > .map > div > .block > div > .list > div > div {
								padding: 0 12px;
								height: 28px;
							}
							
							.instance-map > .map > div > .block > div > .list > div > div:hover {
								background: rgba(255,255,255,.05);
							}
				
				.instance-map > .map > .map-left > .block > div {
					justify-content: flex-start;
				}
					
					.instance-map > .map > .map-left > .block > div > .icon {
						margin-right: 8px;
					}
				
				.instance-map > .map > .map-center > .block > div {
					width: auto;
					
					height: 26px;
					
					line-height: 26px;
					color:rgba(255,255,255,.3);
					font-size: 10px;
					
					border-radius: 2px;
					
					padding: 0 12px;
					
					cursor: pointer;
					
					background: #2f2f2f;
				}
				
				.instance-map > .map > .map-right > .block > div {
					justify-content: flex-end;
				}
					
					.instance-map > .map > .map-right > .block > div > .icon {
						margin-left: 8px;
					}
					
			
			
			.instance-map > .map > div > .content {
				width: 100%;
				
				height: calc(100% - 80px - 40px);
				
				display: flex;
				
				overflow: hidden;
			}
			
			.instance-map > .map > .map-left > .content {
				justify-content: flex-end;
			}
			
			.instance-map > .map > .map-right > .content {
				justify-content: flex-start;
			}
				
				.instance-map > .map > div > .content > .prop-options {
					width: 54px;
					height: 100%;
				}
					
					.instance-map > .map > div > .content > .prop-options > div {
						width: 54px;
						height: 54px;
						
						cursor: pointer;
						
						opacity: .3;
					}
					
					.instance-map > .map > div > .content > .prop-options > div:hover {
						opacity: 1;
					}
					
					.instance-map > .map > div > .content > .prop-options > div + div {
						margin-top: 3px;
					}
				
				.instance-map > .map > div > .content > .prop-list {
					width: 100%;
					max-width: 325px;
					height: 100%;
					
					overflow: auto;
				}
					
					.instance-map > .map > div > .content > .prop-list > div {
						width: calc(100% - 2px);
						height: auto;
						
						border-radius: 6px;
						
						border: solid 1px #4B4B4B;
						
						background: #191919;
						
						overflow: hidden;
					}


.map-row {
	display: flex;
}

.map-row + .map-row {
	border-top: solid 1px #4B4B4B;
}
	
	.map-row > div,
	.map-row > div > div > div,
	.map-row > div > div > div > div {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		
		font-size: 14px;
		line-height: 29px;
	}
	
	
	
	.map-row > .scheme {
		width: 60px;
		
		color: rgba(255,255,255,.2);
		
		padding: 0 10px;
	}
	
	.map-row > .props {
		width: calc(100% - 60px);
		
		cursor: pointer;
	}
	
	.map-row > .scheme + .props {
		border-left: solid 1px #4B4B4B;
	}
		
		.map-row > .props > div {
			display: flex;
		}
		
		.map-row > .props > div + div {
			border-top: solid 1px #4B4B4B;
		}
		
		.map-row > .props > .active,
		.map-row > .props > .hover.active {
			background: var(--accent);
		}
		
		.map-row > .props > .hover {
			background: rgba(255,255,255,.05);
		}
			
			.map-row > .props > div > .prop_hook {
				width: calc(100% - 70px);
				border-right: solid 1px #4B4B4B;
			
				color: rgba(255,255,255,.4);
				
				padding: 0 10px;
			}
			
			.map-row > .props > .active > .prop_hook {
				border-right-color: transparent;
				color: #fff;
			}
			
			.map-row > .props > div > .value {
				width: 70px;
				min-width: 70px;
				max-width: 70px;
				
				background: #111111;
				
				color: rgba(255,255,255,.15);
				
				padding: 0 10px;
				
				display: flex;
				
				position: relative;
			}
			
			.map-row > .props > .active > .value,
			.map-row > .props > .hover.active > .value {
				background: transparent;
				
				color: rgba(255,255,255,.6);
			}
			
			.map-row > .props > .hover > .value {
				background: transparent;
			}
			
			.map-row > .props:first-child > div > .value {
				border-right: solid 1px #4B4B4B;
			}
			
			.map-row > .props:first-child > .active > .value {
				border-right-color: transparent;
			}
				
				.map-row > .props:first-child > div > .value > div {
					margin-left: auto;
				}
			
			.map-row > .props > div > .value > div {
				width: calc(100% - 8px);
			}
			
			.map-row > .props > div > .value > .pointer {
				width: auto;
				
				position: absolute;
				
				top: 0;
				right: 4px;
				bottom: 0;
				
				width: 16px;
				
				display: none;
				
				opacity: .6;
			}
			
			.map-row > .props > div:hover > .value > .pointer-delete {
				display: none;
			}
			
			.map-row > .props > div:hover > .value > .pointer-pointer {
				display: block;
			}
			
			.map-row > .props > .active > .value > .pointer-delete {
				display: block;
			}
			
			.map-row > .props > .active > .value > .pointer-pointer {
				display: none;
			}
			
			.map-row > .props > .active:hover > .value > .pointer-delete {
				display: block;
			}
			
			.map-row > .props > .active:hover > .value > .pointer-pointer {
				display: none;
			}
			
			.map-row > .props > .active:hover > .value > .pointer-delete.pointer-pointer,
			.map-row > .props > .active > .value > .pointer-delete.pointer-pointer {
				display: block;
			}






.links-lines {
	position: absolute;
	
	left: 0;
	
	overflow: visible;
}
	
	.links-lines > path {
		fill: none;
		stroke-width: 2px;
		stroke: #fff;
		
		stroke-dasharray: 2, 2;
		
		
		opacity: .1;
	}
	
	.links-lines.active > path {
		stroke: var(--accent);
		
		stroke-dasharray: none;
		
		opacity: 1;
	}
	
	.links-lines.hover > path {		
		opacity: .6;
	}











.animation-panel {
	width: 100%;
	height: 100%;
	
	background: #080808;
}
	
	.animation-panel > .top {
		width: 100%;
		height: 36px;
		
		background: #131313;
		
		display: flex;
		justify-content: space-between;
		
		position: relative;
	}
		
		.animation-panel > .top > div {
			height: 36px;
			
			line-height: 36px;
		}
		
		.animation-panel > .top > .anim-modes {
			
		}
			
			.animation-panel > .top > .anim-modes > div {
				width: 48px;
				height: 100%;
				
				background: #444;
				background: transparent;
				
				cursor: pointer;
				
				opacity: .3;
				
				background-size: 40px;
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			.animation-panel > .top > .anim-modes > div + div {
				margin-left: 3px;
			}
			
			.animation-panel > .top > .anim-modes > div.slc {
				opacity: 1;
			}
		
		.animation-panel > .top > .center-data {
			display: flex;
			
			position: relative;
		}
			
			.animation-panel > .top > .center-data > div {
				height: 36px;
				
				margin: 0 5px;
			}
			
			.animation-panel > .top > .center-data > .status {
				
			}
				
				.animation-panel > .top > .center-data > .status > div {
					width: 36px;
					height: 100%;
					
					background-size: 36px;
					background-position: center center;
					background-repeat: no-repeat;
					
					cursor: pointer
				}
			
			.animation-panel > .top > .center-data > .timer {
				font-size: 18px;
				color: rgba(255,255,255,.2);
			}
			
			.animation-panel > .top > .center-data > .ms {
				font-size: 12px;
				color: rgba(255,255,255,.5);
			}
			
			.animation-panel > .top > .center-data > .loop {
				margin-left: 28px;
				
				width: 28px;
				
				background-size: 50px;
				background-position: center center;
				background-repeat: no-repeat;
				
				margin-right: 0;
				
				cursor: pointer;
			}
			
			.animation-panel > .top > .center-data > .restart {
				position: absolute;
				
				top: calc(50% - 10px);
				left: calc(100% + 12px);
				
				height: 20px;
				
				padding: 0 12px;
				
				border-radius: 13px;
				
				background: var(--accent);
				
				color: #fff;
				font-size: 10px;
				line-height: 20px;
				white-space: nowrap;
				
				cursor: pointer;
			}
			
			.animation-panel > .top > .center-data > .velocity {
				line-height: 36px;
				
				font-size: 16px;
				color: #fff;
				font-weight: 300;
				
				padding-left: 4px;
				
				margin-left: 0;
				
				width: 50px;
				
				position: relative;
				
				cursor: pointer;
				
				display: flex;
				
				opacity: .2;
			}
				
				.animation-panel > .top > .center-data > .velocity > div {
					font-size: 17px;
					line-height: 36px;
				}
				
				.animation-panel > .top > .center-data > .velocity > .vel {
					font-size: 19px;
				}
			
		
		.animation-panel > .top > .duration {
			display: flex;
			
			margin-right: 12px;
			margin-right: 3px;
		}
			
			.animation-panel > .top > .duration > div {
				height: 36px;
			}
			
			
			.animation-panel > .top > .duration > .record {
				cursor: pointer;
				
				width: 26px;
				
				position: relative;
			}
			
			.animation-panel > .top > .duration > .record:after {
				position: absolute;
				
				content: '';
				
				width: 12px;
				height: 12px;
				
				top: calc(50% - 7px);
				left: calc(50% - 7px);
				
				border: solid 1px #7B0800;
				
				border-radius: 50%;
			}
			
			.animation-panel > .top > .duration > .record.active:after {
				background: #ff4343
			}
			
			.animation-panel > .top > .duration > .add {
				cursor: pointer;
				
				width: 26px;
				
				background-size: 26px;
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			.animation-panel > .top > .duration > .timer {
				font-size: 18px;
				color: rgba(255,255,255,.2);
				transition: all .2s ease-in-out;
			}
			
			.animation-panel > .top > .duration > .ms {
				font-size: 12px;
				color: rgba(255,255,255,.5);
			}
	
	.animation-panel > .bottom {
		width: 100%;
		height: calc(100% - 36px - 2px);
		
		margin: 2px 15px 0;
		margin: 2px 0 0;
		
		display: flex;
	}	
	
		.animation-panel > .bottom > .scroll {
			width: 0;
			height: 100%;
			
			background: #181818;
			
			overflow: hidden;
			
			box-shadow: 2px 0 11px rgba(0,0,0,.5);
			
			position: relative;
			z-index: 2;
		}
		
			.animation-panel > .bottom > .scroll > .scroll_hook {
				position: relative;
				
				margin: 10px 0 0 20px;
				margin: 20px 0 0 0;
				
				overflow: auto;
				
				height: calc((100% - 20px) - 28px);
				height: calc((100% - 28px) - 28px);
			}
		
			.animation-panel > .bottom > .scroll > div {
				width: 100%;
				height: 100%;
			}
		
				.animation-panel > .bottom > .scroll > div > .list_hook {
					position: relative;
					
					overflow: auto;
					
					height: calc((100% - 20px) - 28px);
					height: calc(100% - 40px);
				}
					
					.animation-panel > .bottom > .scroll > div > .list_hook > div {
						height: 30px;
						padding: 0 12px;
						
						line-height: 30px;
						font-size: 13px;
						text-overflow: ellipsis;
						white-space: nowrap;
						
						overflow: hidden;
						
						cursor: pointer
					}
					
					.animation-panel > .bottom > .scroll > div > .list_hook > div:hover {
						background: rgba(255,255,255,.2);
					}
					
					.animation-panel > .bottom > .scroll > div > .list_hook > .active,
					.animation-panel > .bottom > .scroll > div > .list_hook > .active:hover {
						background: var(--accent2);
					}
				
				.animation-panel > .bottom > .scroll > div > .list_add {
					width: 100%;
					height: 40px;
					
					cursor: pointer;
					
					background: rgba(255,255,255,.1);
					
					box-shadow: 0px 0 11px rgba(0,0,0,.2);
				}
					
					.animation-panel > .bottom > .scroll > div > .list_add > div {
						width: 100%;
						height: 100%;
						
						background-size: 30px;
						background-position: center center;
						background-repeat: no-repeat;
						
						opacity: .3;
					}
					
					.animation-panel > .bottom > .scroll > div > .list_add > div:hover {
						opacity: 1;
					}
		
		.animation-panel > .bottom > .anim {
			width: 100%;
			height: calc(100% - 36px);
			
			margin: 2px 15px 0;
			margin: 0;
		}	
	
		.animation-panel > .bottom > .anim > .content {
			width: 100%;
			height: 100%;
			
			position: relative;
			
			overflow: auto;
		}	
			
			.animation-panel > .bottom > .anim > .content > .actor-info {
				width: calc(100% - 30px);
				width: 100%;
				height: calc(100% - 20px);
				height: 100%;
				
				padding: 0 15px;
				padding: 0;
				
				position: relative;
				overflow: auto;
			}
				
				.animation-panel > .bottom > .anim > .content > .actor-info > .time-position {
					width: 1px;
					height: 100%;
					
					background: #fff;
					
					position: absolute;
					
					top: 0;
					left: 15px;
					
					z-index: 15;
				}
					
					.animation-panel > .bottom > .anim > .content > .actor-info > .time-position > .arrow {
						border-top: solid 8px #fff;
				    border-left: solid 6px transparent;
				    border-right: solid 6px transparent;
				    margin-left: -6px;
				    border-bottom: 0px solid transparent;
				    position: relative;
				    width: 1px;
					}
					
					.animation-panel > .bottom > .anim > .content > .actor-info > .time-position > .arrow:after {
						position: absolute;
				    content: '';
				    border-top: solid 5px #000;
				    border-left: solid 4px transparent;
				    border-right: solid 4px transparent;
				    top: -7px;
				    left: -4px;
				    pointer-events: none;
				    width: 1px;
					}
						
						.animation-panel > .bottom > .anim > .content > .actor-info > .time-position > .arrow > div {
							position: absolute;
							
							width: 20px;
							height: 20px;
							
							top: -10px;
							left: -10px;
							
							cursor: pointer;
							
							z-index: 5;
						}
				
				.animation-panel > .bottom > .anim > .content > .actor-info > .time-info {
					width: calc(100% - 30px);
					height: 20px;
					
					padding: 0 15px;
					
					display: flex;
					justify-content: space-between;
					
					background: #000;
				}
					
					.animation-panel > .bottom > .anim > .content > .actor-info > .time-info > div {
						font-size: 10px;
						color: rgba(255,255,255,.3);
						line-height: 20px;
						
						display: flex;
						justify-content: space-between;
						
						pointer-events: none;
					}
					
					.animation-panel > .bottom > .anim > .content > .actor-info > .time-info > div:after {
						position: absolute;
						
						content: '';
						
						top: 20px;
						bottom: 0;
						
						width: 1px;
						
						border-right: dashed 1px rgba(151,151,151,.2);
					}
				
				.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim {
					
				}
				
				.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim + .actor-anim {
					margin-top: 24px;
				}
					
					.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .on-after {
						
					}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .on-after > div {
							margin-bottom: 24px;
						}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .on-after > .on {
							
						}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .on-after > .after {
							margin-left: 100%;
						}
					
					.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props {
						height: 16px;
						height: 22px;
					
						background: var(--accent);
						background: #3F3F3F;
						
						border-radius: 8px;
						border-radius: 11px;
						
						line-height: 16px;
						line-height: 22px;
						color: rgba(255,255,255,.4);
						font-size: 10px;
						text-transform: uppercase;
						
						position: relative;
						
				    display: flex;
						justify-content: space-between;
						
						cursor: pointer;
					}
					
					.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props:hover {
						background: #5F5F5F;
					}
					
					.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim.open > .actor-anim-props {
						background: var(--accent);
					}
					
					.animation-panel > .bottom > .anim > .content > .actor-info > .actor-anim > .actor-anim-props:before {
						position: absolute;
						
						content: '';
						
						width: 9px;
						height: 9px;
						
						top: calc(50% - 4.5px);
						left: -12px;
						
						background: rgba(255,255,255,.3);
					}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .move-start {
							position: absolute;
							
							top: 0;
							left: -12px;
							bottom: 0;
							
							width: 7px;
							
							cursor: pointer;
							
							display: none;
						}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .move-start:before {
								position: absolute;
								
								content: '';
								
								top: 3px;
								left: 0;
								bottom: 3px;
								
								width: 2px;
								
								background: rgba(255,255,255,.3);
								
								border-radius: 3px;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .move-start:after {
								position: absolute;
								
								content: '';
								
								top: 3px;
								right: 0;
								bottom: 3px;
								
								width: 2px;
								
								background: rgba(255,255,255,.3);
								
								border-radius: 3px;
							}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .move-end {
							position: absolute;
							
							top: 0;
							right: -12px;
							bottom: 0;
							
							width: 7px;
							
							cursor: pointer;
						}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .move-end:before {
								position: absolute;
								
								content: '';
								
								top: 3px;
								left: 0;
								bottom: 3px;
								
								width: 2px;
								
								background: rgba(255,255,255,.3);
								
								border-radius: 3px;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .move-end:after {
								position: absolute;
								
								content: '';
								
								top: 3px;
								right: 0;
								bottom: 3px;
								
								width: 2px;
								
								background: rgba(255,255,255,.3);
								
								border-radius: 3px;
							}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .init-value {
							margin-left: 8px;
							
							display: flex;
							
							padding-right: 4px;
						}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .init-value > .expand-prop {
								width: 7px;
								height: 100%;
								
								margin-right: 6px;
								
								position: relative;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .init-value > .expand-prop:after {
								position: absolute;
								
								content: '';
								
								top: calc(50% - 2.5px);
								left: calc(50% - 3px);
								
								border-top: 5px solid rgba(255,255,255,.3);
								border-left: 3px solid transparent;
								border-right: 3px solid transparent;
								
								transition: all .2s ease-in-out;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim.open > .actor-anim-props > .init-value > .expand-prop:after {
								transform: rotateZ(-180deg);
							}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .name-prop {
							display: flex;
							
							width: calc(100% - 66px);
							
							justify-content: center;
						}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .name-prop > .name {
								color: #fff;
								
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .name-prop > .props {
								margin-left: 8px;
								
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .name-prop > .props:empty {
								margin-left: 0;
							}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .end-value {
							margin-right: 8px;
							
							display: flex;
						}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .end-value > div {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								
								white-space: nowrap;
							}
						
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .end-value > .move-end {
								position: relative;
								
								width: 7px;
								height: 100%;
								
								cursor: ew-resize;
								
								margin-left: 6px;
							}
								
								.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .end-value > .move-end:before {
									position: absolute;
									
									content: '';
									
									top: 6px;
									left: 0;
									bottom: 6px;
									
									width: 2px;
									
									background: rgba(255,255,255,.15);
									
									border-radius: 3px;
								}
								
								.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .end-value > .move-end:after {
									position: absolute;
									
									content: '';
									
									top: 6px;
									right: 0;
									bottom: 6px;
									
									width: 2px;
									
									background: rgba(255,255,255,.15);
									
									border-radius: 3px;
								}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .on-line {
							position: absolute;
							
							top: 50%;
							left: -8px;
							
							width: 1px;
							height: 1px;
							
							pointer-events: none;
						}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .after-line {
							position: absolute;
							
							top: 50%;
							right: -8px;
							
							width: 1px;
							height: 1px;
							
							pointer-events: none;
						}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-anim-props > .end-value {
							margin-right: 8px;
						}
					
					.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand {
						display: none;
					}
					
					.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim.open > .actor-props-expand {
						display: block;
					}
						
						.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div {
							margin-top: 4px;
							
							height: 16px;
						
							background: #5D5D5D;
							
							border-radius: 8px;
							
							line-height: 16px;
							color: rgba(255,255,255,.4);
							font-size: 10px;
							text-transform: uppercase;
							
							position: relative;
							
					    display: flex;
							justify-content: space-between;
						}
						
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .move-start {
								position: absolute;
								
								top: 0;
								left: -12px;
								bottom: 0;
								
								width: 7px;
								
								cursor: pointer;
								
								display: none;
							}
						
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim.open > .actor-props-expand > div > .move-start {
								display: block;
							}
								
								.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .move-start:before {
									position: absolute;
									
									content: '';
									
									top: 3px;
									left: 0;
									bottom: 3px;
									
									width: 2px;
									
									background: rgba(255,255,255,.3);
									
									border-radius: 3px;
								}
								
								.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .move-start:after {
									position: absolute;
									
									content: '';
									
									top: 3px;
									right: 0;
									bottom: 3px;
									
									width: 2px;
									
									background: rgba(255,255,255,.3);
									
									border-radius: 3px;
								}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .move-end {
								position: absolute;
								
								top: 0;
								right: -12px;
								bottom: 0;
								
								width: 7px;
								
								cursor: pointer;
								
								display: none;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim.open > .actor-props-expand > div > .move-end {
								display: block;
							}
								
								.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .move-end:before {
									position: absolute;
									
									content: '';
									
									top: 3px;
									left: 0;
									bottom: 3px;
									
									width: 2px;
									
									background: rgba(255,255,255,.3);
									
									border-radius: 3px;
								}
								
								.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .move-end:after {
									position: absolute;
									
									content: '';
									
									top: 3px;
									right: 0;
									bottom: 3px;
									
									width: 2px;
									
									background: rgba(255,255,255,.3);
									
									border-radius: 3px;
								}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .init-value {
								margin-left: 8px;
								
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .name {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
								
								padding: 0 4px;
							}
							
							.animation-panel > .bottom > .anim > .content > .actor-info .actor-anim > .actor-props-expand > div > .end-value {
								margin-right: 8px;
								
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
		
		.animation-panel > .bottom > .anim > .scroll {
			width: 100%;
			height: 30px;
			
			margin-top: 1px;
			
			position: relative;
			
			cursor: pointer;
		}
			
			.animation-panel > .bottom > .anim > .scroll > .scroll-bar {
				position: absolute;
				
				left: 0;
				right: 0;
				
				height: 10px;
				
				top: calc(50% - 6px);
				
				background: #313131;
				
				border-radius: 8px;
				
				overflow: hidden;
			}
				
				.animation-panel > .bottom > .anim > .scroll > .scroll-bar > .scroll-resize {
					position: absolute;
					
					top: 0;
					bottom: 0;
					
					width: 12px;
					
					cursor: ew-resize;
					
					background: #242424;
				}
				
				.animation-panel > .bottom > .anim > .scroll > .scroll-bar > .scroll-resize.scroll-resize-l {
					left: 0;
				}
				
				.animation-panel > .bottom > .anim > .scroll > .scroll-bar > .scroll-resize.scroll-resize-r {
					right: 0;
				}

.anim-lines {
	position: absolute;
	
	top: 100%;
	left: 0;
	
	z-index: 3;
	
	width: 1px;
	height: 1px;
	
	overflow: visible;
}
	.anim-lines > .line {
		fill: none;
		stroke-width: 1px;
		stroke: #4D4D4D;
	}





.anim-slide-block {
	width: 100%;
	width: calc(100% - 30px);
	height: calc(100% - 28px);
	height: calc(100% - 20px);
	
	padding: 0 15px;
  overflow: auto;
}



.anim-actor-block {
	position: relative;
}
	
	.anim-actor-block > .on-after {
		width: 100%;
		height: 20px;
		height: auto;
		
		margin-bottom: 8px;
	}
		
		.anim-actor-block > .on-after > .on {
			
		}
		
		.anim-actor-block > .on-after > .after {
			margin-left: 100%;
		}
	
	.anim-actor-block > .content {
		width: 100%;
		height: 24px;
			
		position: relative;
	}
	
	.anim-actor-block > .content-scroll {
		display: flex;
	}
		
		.anim-actor-block > .content > .on-line {
			position: absolute;
			
			top: calc(50% - 4px);
			left: -12px;
			
			width: 6px;
			height: 6px;
			
			border: solid 1px rgba(47,54,62,.2);
			border-color: #2F363E;
			
			transform: rotateZ(45deg);
			
			cursor: pointer;
			
			z-index: 10;
		}
		
		.anim-actor-block.open > .content > .on-line {
			border-color: #4E8DD4;
		}
		
		.anim-actor-block > .content > .on-line:hover {
			border-color: var(--accent2);
			background: var(--accent2);
		}
		
		.anim-actor-block > .content > .actor {
			width: 100%;
			height: 100%;
			
			overflow: hidden;
			
			background: #3F3F3F;
			background: #2F363E;
			
			border-radius: 18px;
			
			color: rgba(255,255,255,.4);
			font-size: 10px;
			text-transform: uppercase;
			
			cursor: pointer;
			
			display: flex;
			justify-content: space-between;
		}
		
		
		.anim-actor-block.select > .content > .actor {
			background: #4E8DD4;
		}
		
		.anim-actor-block.select > .content > .actor.preset {
			background: #3F2B56;
		}
		
		.anim-actor-block.select > .content > .actor.effect {
			background: #2B563F;
		}
		
				.anim-actor-block > .content > .actor > div > .resize {
					width: 13px;
					height: 100%;
					
					background: rgba(0,0,0,.3);
					
					cursor: pointer;
				}
		
			.anim-actor-block > .content > .actor > .left {
				display: flex;
			}
			
				.anim-actor-block > .content > .actor > .left > .ease {
					margin: 6px 0 0 6px;
					
					width: 20px;
					height: 12px;
					
					background: rgba(0,0,0,.2);
					
					text-align: center;
				}
		
			.anim-actor-block > .content > .actor > .right {
				display: flex;
			}
				
				.anim-actor-block > .content > .actor > .right > .effects {
					width: 20px;
					height: 100%;
					
					background-size: 22px;
					background-position: center center;
					background-repeat: no-repeat;
					
					cursor: pointer;
				}
				
				.anim-actor-block > .content > .actor > .right > .add {
					width: 20px;
					height: 100%;
					
					background-size: 22px;
					background-position: center center;
					background-repeat: no-repeat;
					
					cursor: pointer;
					
					margin-left: 2px;
				}
		
		.anim-actor-block > .content > .actor-arrow {
			width: 24px;
			height: 100%;
			
			position: relative;
		}
			
			.anim-actor-block > .content > .actor-arrow:after {
				position: absolute;
				
				content: '';
				
				border-top: 5px solid rgba(255,255,255,.6);
				border-left: solid 3px transparent;
				border-right: solid 3px transparent;
				
				top: calc(50% - 2.5px);
				left: calc(50% - 3px);
				
				transform: rotateZ(-90deg);
				
				transition: all .2s ease-in-out;
			}
			
			.anim-actor-block.open > .content > .actor-arrow:after {
				transform: rotateZ(0deg);
			}
		
		.anim-actor-block > .content-scroll > .actor-name {
			width: calc(100% - 48px);
			height: 100%;
			
			overflow: hidden;
			
			color: rgba(255,255,255,.7);
			font-size: 14px;
			line-height: 24px;
			text-overflow: ellipsis;
			white-space: nowrap;
			
			overflow: hidden;
			
			cursor: pointer;
		}
		
		.anim-actor-block.select > .content-scroll > .actor-name {
			color: #4E8DD4;
		}
		
		.anim-actor-block.select > .content-scroll > .actor-name.preset {
			color: #3F2B56;
		}
		
		.anim-actor-block.select > .content-scroll > .actor-name.effect {
			color: #2B563F;
		}
		
		.anim-actor-block > .content-scroll > .actor-add {
			width: 24px;
			height: 100%;
			
			cursor: pointer;
			
			background-size: 24px;
			background-position: center center;
			background-repeat: no-repeat;
			
			opacity: .3;
		}
		
		.anim-actor-block > .content > .after-line {
			position: absolute;
			
			top: calc(50% - 5px);
			right: -14px;
			
			width: 8px;
			height: 8px;
			
			border-radius: 50%;
			
			border: solid 1px #2F363E;
			
			z-index: 10;
		}
		
		.anim-actor-block.open > .content > .after-line {
			border-color: #4E8DD4;
		}
		
		.anim-actor-block > .content > .after-line:hover {
			border-color: var(--accent2);
			background: var(--accent2);
		}
	
	.anim-actor-block > .actor-props {
		display: none;
	}
	
	.anim-actor-block.open > .actor-props {
		display: block;
	}
		
		.anim-actor-block > .actor-props > .prop-anim {
			position: relative;
			
			width: 100%;
			
			margin-top: 4px;
		}
			
			.anim-actor-block > .actor-props > .prop-anim > .keyframes {
				width: 100%;
				height: 18px;
				
				background: #171717;
			}
				
				.anim-actor-block > .actor-props > .prop-anim > .keyframes > div {
					width: calc(100% - 12px);
					width: 100%;

					height: 100%;
					
					position: relative;
				}
					
					.anim-actor-block > .actor-props > .prop-anim > .keyframes > div > div {
						position: absolute;
						
						top: 3px;
						left: 0px;
						
						width: 8px;
						height: 8px;
						
						border-radius: 50%;
						
						border: solid 2px #4E8DD4;
						
						background: rgba(88, 157, 236, .6);
						
						cursor: pointer;
					}
					
					.anim-actor-block > .actor-props > .prop-anim > .keyframes > div > .hover {
						border-color: #ff4343;
						
						background: rgba(255, 67, 67, .6);
					}
						
.edit-keyframe {
	position: absolute;
	
	border-radius: 2px;
	
	width: 240px;
	height: 175px;
	
	background: #2d2d2d;
	
	z-index: 5;
	
	box-shadow: 0 0 12px rgba(0,0,0,.6);
}
	
	.edit-keyframe:after {
		position: absolute;
		
		content: '';
		
		top: 100%;
		left: calc(50% - 8px);
		
		border-top: solid 6px #2d2d2d;
		border-left: solid 8px transparent;
		border-right: solid 8px transparent;
	}
	
	.edit-keyframe > .top {
		display: flex;
		
		width: calc(100% - 40px);
		
		margin: 0 auto;
		
		padding: 20px 0 0;
	}
		
		.edit-keyframe > .top > .prop-name {
			width: calc(45% - 4px);
			
			text-align: right;
			
			line-height: 28px;
			font-size: 12px;
			color: #999;
			white-space: nowrap;
			text-overflow: ellipsis;
			
			overflow: hidden;
			
			margin-right: 4px;
		}
		
		.edit-keyframe > .top > .prop-value {
			width: calc(55% - 4px);
			
			margin-left: 4px;
		}
	
	.edit-keyframe > .easing {
		width: calc(100% - 40px);
		height: 92px;
		
		margin: 20px auto 0;
	}
		
		.edit-keyframe > .easing > div {
			width: 100%;
			height: 50%;
			
			display: flex;
			
			margin-top: 2px;
		}
		
		.edit-keyframe > .easing > .disabled {
			opacity: .3;
			
			pointer-events: none;
		}
		
		.edit-keyframe > .easing > div:first-child {
			margin-top: 0;
		}
		
			.edit-keyframe > .easing > div > div {
				width: 25%;
				height: 100%;
				
				cursor: pointer;
				
		    background-size: 36px;
				background-position: center center;
				background-repeat: no-repeat;
				
				color: rgba(255,255,255,.5);
				line-height: 45px;
				text-align: center;
				font-size: 9px;
				text-transform: uppercase;
				
				background-color: #212121;
				
				margin-left: 2px;
			}
			
			.edit-keyframe > .easing > div > div:first-child {
				margin-left: 0;
			}
			
			.edit-keyframe > .easing > div > div:hover {
				background-color: #000;
			}
			
			.edit-keyframe > .easing > div > div.active,
			.edit-keyframe > .easing > div > div.active:hover {
				background-color: #4E8DD4;
				color: #fff;
			}
	
	.edit-keyframe > .arrows {
		position: absolute;
		
		width: 14px;
		height: 24px;
		
		top: calc(50% - 12px);
		left: 3px;
		
		cursor: pointer;
		
		opacity: .3;
	}
	
	.edit-keyframe > .arrows:hover {
		opacity: 1;
	}
	
	.edit-keyframe > .arrows:after {
		position: absolute;
    
    content: '';
    
    top: 6px;
    left: 4px;
    
    width: 12px;
    height: 12px;
    
    border-top: solid 1px #fff;
    border-left: solid 1px #fff;
    
    transform: rotateZ(-45deg);
	}
	
	.edit-keyframe > .arrows.right {
		left: auto;
		right: 3px;
	}
	
	.edit-keyframe > .arrows.right:after {
    transform: rotateZ(135deg);
    left: -3px;
	}
	
					
					.anim-actor-block > .actor-props > .prop-anim > .keyframes > div > div.self-prop {
						width: 12px;
						height: 100%;
						
						top: 0;
						
						border-width: 0;
						
						background: rgba(88,159,236,.3);
						
						border-radius: 0;
					}
		
		.anim-actor-block > .actor-props > .prop-name {
			position: relative;
			
			width: 100%;
			height: 18px;
			
			margin-top: 4px;
			
			display: flex;
		}
			
			.anim-actor-block > .actor-props > .prop-name > .name {
				position: relative;
				
				width: calc(100% - 42px);
				height: 100%;
				
				font-size: 10px;
				text-align: right;
				color: rgba(255,255,255,.4);
				line-height: 18px;
				text-transform: uppercase;
			}
			
			.anim-actor-block > .actor-props > .prop-name > .kf {
				position: relative;
				
				width: 42px;
				height: 100%;
				
				margin-top: 4px;
				
				display: flex;
			}
				
				.anim-actor-block > .actor-props > .prop-name > .kf > .arrows {
					width: calc((100% - 17px) / 2);
					
					height: 100%;
				}
				
				.anim-actor-block > .actor-props > .prop-name > .kf > .add {
					padding: 0 4px;
					
					width: 7px;
					height: 100%;
					
					cursor: pointer;
				}
					
					.anim-actor-block > .actor-props > .prop-name > .kf > .add > div {
						width: 7px;
						height: 7px;
						
						border-radius: 50%;
						
						border: solid 1px #fff;
						
						background: rgba(88, 157, 236, .4);
						background: rgba(255, 255, 255, .2);
						
						opacity: .2;
						
						margin: 4px auto 0;
					}
				
					.anim-actor-block > .actor-props > .prop-name > .kf > .add > div.add-icon {
						border-color: #4E8DD4;
						background: rgba(88, 157, 236, .6);
						
						opacity: 1;
					}
				
					.anim-actor-block > .actor-props > .prop-name > .kf > .add > div.remove-icon {
						border-color: #ff4343;
						background: rgba(255, 67, 67, .6);
						
						opacity: 1;
					}
		
.prop-dropdown {
	position: absolute;
	
	width: 200px;
	height: 180px;
}
		
.prop-dropdown:after {
	position: absolute;
	
	content: '';
	
	top: 100%;
	left: calc(50% - 12px);
	
	border-top: solid 8px #2d2d2d;
	border-left: solid 12px transparent;
	border-right: solid 12px transparent;
	
	z-index: 5;
}
	
	.prop-dropdown > div {
		position: relative;
		
		width: 100%;
		height: calc(100% - 10px);
		
		background: #2d2d2d;
		
		padding: 5px 0;
		
		overflow: auto;
		
		box-shadow: 0 0 12px rgba(0,0,0,.6);
		
		border-radius: 2px;
		
		z-index: 4;
	}
	
		.prop-dropdown > div > div {
			display: block;
			
			padding: 6px 22px;
			
			color: #fff;
			font-size: 12px;
			
			cursor: pointer;
		}
		
		.prop-dropdown > div > div:hover {
			background: rgba(255,255,255,.1);
		}




.row-language {
	display: flex;
	padding: 10px;
	
	max-height: 100%;
}
	
	.row-language > .title {
		width: 140px;
		
		text-align: right;
		
		padding: 0 10px;
	}
	
	.row-language > .language-hook {
		flex: 1;
		
		border-left: solid 1px #4c4c4c;
		
		max-height: 100%;
	}
		
		.row-language > .language-hook > .language-list {
			max-height: calc(100% - 30px);
			
			/*overflow: auto;*/
		}
			
			.row-language > .language-hook > .language-list > div {
				
			}
				
				.row-language > .language-hook > .language-list > div > .language-item {
					line-height: 28px;
					padding: 0 12px;
					
					margin: 0 10px;
					
					position: relative;
					
					cursor: pointer;
				}
				
				.row-language > .language-hook > .language-list > div > .language-item:focus {
					background: rgba(255,255,255,.1);
				}
				
				.row-language > .language-hook > .language-list > div > .language-item + .language-item {
					border-top: solid 1px rgba(0,0,0,.2);
				}
					
					.row-language > .language-hook > .language-list > div > .language-item > .language-box-dropdown {
						position: absolute;
						
						top: 100%;
						left: 0;
						right: 0;
						
						max-height: 150px;
						
						background: #000;
						
						z-index: 3;
						
						overflow: auto;
					}
						
						.row-language > .language-hook > .language-list > div > .language-item > .language-box-dropdown > div {
							font-size: 13px;
							
							padding: 6px 12px;
							
							cursor: pointer;
						}
		
		.row-language > .language-hook > .language-button {
			width: 100%;
			height: 30px;
		}
			
			.row-language > .language-hook > .language-button > div {
				width: 100px;
				height: 24px;
				
				border-radius: 8px;
				
				margin: 3px auto 0;
				
				color: #fff;
				
				cursor: pointer;
				
				text-align: center;
				
				line-height: 24px;
				
				background: #000;
			}


.modal-edit-ftp {
	width: 100%;
	height: 100%;
}
	
	.modal-edit-ftp > .tab {
		display: flex;
		
		justify-content: center;
		
		padding: 16px 0 10px;
		
		border-bottom: solid 1px rgba(0,0,0,.2);
		
		margin: 0 20px 5px;
	}
		
		.modal-edit-ftp > .tab > div {
			padding: 4px 12px;
			
			cursor: pointer;
			
			opacity: .2;
		}
		
		.modal-edit-ftp > .tab > div + div {
			margin-left: 12px;
		}
		
		.modal-edit-ftp > .tab > .active {
			opacity: 1;
		}
	
	.modal-edit-ftp > .content {
		width: 100%;
		height: calc(100% - 62px);
		
		overflow: hidden;
		
		border-radius: 0 0 8px 8px;
	}
		
		.modal-edit-ftp > .content > div {
			width: 100%;
			height: 100%;
		}
			
			.modal-edit-ftp > .content > div > .row {
				display: flex;
				
				margin: 0 18px;
			}
			
			.modal-edit-ftp > .content > div > .row + .row {
				margin-top: 6px;
			}
				
				.modal-edit-ftp > .content > div > .row > .title {
					width: 140px;
					
					text-align: right;
					
					line-height: 28px;
					text-transform: capitalize;
					font-size: 14px;
					color: rgba(255,255,255,.7);
				}
				
				.modal-edit-ftp > .content > div > .row > .value {
					flex: 1;
					
					margin-left: 12px;
					
					min-height: 28px;
					
					line-height: 28px;
					font-size: 13px;
				}
					
					.modal-edit-ftp > .content > div > .row > .value > .tab-options {
						padding: 0 12px;
						
						border-radius: 3px;
						
						cursor: pointer;
					}
					
					.modal-edit-ftp > .content > div > .row > .value > .tab-options + .tab-options {
						margin-left: 8px;
					}
					
					.modal-edit-ftp > .content > div > .row > .value > .tab-options.active {
						background: var(--accent);
					}




.modal-edit-tracker {
	width: 100%;
	height: 100%;
}


.modal-edit-include {
	width: 100%;
	height: 100%;
}