
#flavor_manager {
	.fm_menu, .fm_content, .fm_sub_menu {
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		width:270px;
		z-index:10;
		background:#f8f8f8;
		overflow:auto;
	}

	.fm_sub_menu {
		display:block;
		z-index:20;
		left:270px;
		bottom:40px;
	}

	.fm_responsive {
		position:fixed;
		left:0;
		bottom:0;
		width:270px;
		text-align:right;
		z-index:50;
		height:40px;
		background:#fff;
		border-top:1px #dfdfdf solid;
		transition:height 0.8s ease;

		> span {
			position:absolute;
			left:0;
			height:40px;
			line-height:40px;
			top:0;
			cursor:pointer;
			font-size:14px;
			display:block;
			width:40px;
			text-indent:0;
			text-align:center;
		}

		> a, > a:hover {
			display:inline-block;
			text-indent:0;
			font-size:14px;
			margin-right:5px;
			color:#808080;
			opacity:0.6;
			width:30px;
			height:40px;
			line-height:40px;
			text-align:center;
			border-radius:50%;
		}
		
		> a.active, > a.active:hover, > a:hover {
			opacity:1;
			color:#3498db;
		}

		> div {
			> a, > a:hover {
				transition:all 0.8s ease;
				display:block;
				height:40px;
				font-size:13px;
				line-height:40px;
				color:lighten(#808080, 10%);
				text-decoration:none;
				background:lighten(#222, 20%);
				text-indent:10px;
				border-top:1px lighten(#222, 25%) solid;
				text-align:left;
			}

			> a:hover {
				color:#fff;
			}
		}
	}

	.fm_content {
		background:#f2f2f2;
		border-left:2px #dfdfdf solid;
		left:270px;
		top:0;
		bottom:0;
		right:0;
		width:auto;
		overflow:auto;
		z-index:40;

		> iframe {
			width:100%;
			height:100%;
			border:0;
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
		}

		> .fm_loader {
			position:absolute;
			z-index:100;
			top:0;
			left:0;
			right:0;
			bottom:0;
			background:fade(#000, 90%);

			> i {
				position:absolute;
				top:50%;
				left:50%;

				font-size:30px;
				color:#808080;
				opacity:0.6;
				margin-left:-15px;
				margin-top:-15px;
			}
		}
	}

	.theme_icon {
		height:160px;
		background-color:#f2f2f2;
		border:1px lighten(#dfdfdf, 2%) solid;
		margin:10px;
		position:relative;

		.fm_uploader {
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			height:auto;
			z-index:1;
			margin:auto;

			> span {
				height:160px;
				line-height:160px;
				border-radius:0;

				> i {
					line-height:160px;
					font-size:24px;
				}
			}

			> input {
				height:160px;
			}
		}
	}

	.fm_menu {
		overflow:hidden;
		box-shadow: 7px 17px 45px -11px rgba(0,0,0, 1);
		bottom:40px;

		.fm_menu_content {
			position:absolute;
			top:50px;
			left:0;
			right:0;
			bottom:0;
			overflow:auto;

			> ul {
				margin-top:10px;

				> li {
					> a, > a:hover {
						display:block;
						height:40px;
						line-height:40px;
						color:lighten(#808080, 20%);
						border-bottom:1px lighten(#dfdfdf, 4%) solid;
						font-size:14px;
						position:relative;
						transition:all 0.8s ease;

						.fa:not(.fa-chevron-right), .fa:not(.fa-spin) {
							margin-left:10px;
							margin-right:5px;
							opacity:0.6;
							font-size:14px;
						}

						.fa-chevron-right, .fa-spin {
							text-indent:0;
							position:absolute;
							height:40px;
							line-height:40px;
							right:10px;
							top:0;
							font-size:12px;
							opacity:0.6;
						}
					}

					> a:hover {
						color:#000;

						.fa-chevron-right {
							opacity:1;
						}
					}
				}
			}
		}
	}

	.fm_save {
		position:fixed;
		left:0;
		z-index:100;
		top:50px;
		width:270px;
		bottom:40px;
		color:#808080;
		text-align:center;
		display:none;
		background:fade(#fff, 60%);

		> i {
			display:none;
			position:absolute;
			top:50%;
			left:0;
			right:0;
			text-align:center;
			font-size:30px;
			margin-top:-15px;
		}

		> i.fa-check {
			color:lighten(#2ecc71, 10%);
			font-weight:600;
		}
	}

	.fm_sub_menu_title {
		> button {
			display:none;
			position:absolute;
			right:5px;
			top:8px;
			font-size:12px;
			background:#0c0c0c;
			color:#fff;
			height:30px;
			line-height:30px;
			padding:0 10px;
			border-radius:3px;
		}
	}

	.fm_sub_menu_title, .fm_menu_title {
		height:50px;
		line-height:50px;
		background:#fff;
		border-bottom:1px #dfdfdf solid;
		color:#222;
		font-weight:200;
		font-size:18px;
		letter-spacing:1px;
		position:absolute;
		top:0;
		left:0;
		right:0;
		padding-left:5px;
		text-indent:50px;

		> i {
			position:absolute;
			left:0;
			top:0;
			height:50px;
			line-height:50px;
			width:50px;
			background:darken(#fff, 5%);
			font-size:16px;
			text-indent:18px;
			display:block;
			cursor:pointer;
			color:#808080;
			opacity:0.6;
		}
	}

	.fm_menu_title {
		position:static;
	}

	.fm_sub_menu_content {
		position:absolute;
		top:50px;
		left:0;
		right:0;
		bottom:0;
		overflow:auto;
		padding:10px;
	}

	.ace_editor_holder {
		display:none;
		position:absolute;
		top:50px;
		left:0;
		right:0;
		bottom:0;
	}

	.fm_submit {
		position:fixed;
		left:190px;
		top:10px;
		z-index:200;

		> span {
			background:#2ecc71;
			color:#fff;
			text-transform:uppercase;
			font-weight:600;
			font-size:12px;
			height:30px;
			line-height:30px;
			padding:0 10px;
			border-radius:3px;
			cursor:pointer;
			display:block;
			opacity:0.4;
		}

		> span.active {
			opacity:1;
		}
	}

	.fm_uploader:hover {
		transition:all 0.8s ease;

		> span {
			opacity:1 !important;
			background:rgba(0, 0, 0, 0.6);
			color:#fff;
		}
	}

	.fm_uploader {
		transition:all 0.8s ease;
		height:40px;
		position:relative;
		margin:20px 0;

		> span {
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			border:1px #808080 dashed;
			border-radius:6px;
			opacity:0.4;
			z-index:-1;
			display:block;
			height:40px;
			line-height:40px;

			> i {
				line-height:40px;
				position:absolute;
				left:50%;
				margin-left:-8px;
				font-size:16px;
			}
		}

		> input {
			height:40px;
			width:100%;
			padding:0;
			margin:0;
			opacity:0;
		}
	}

	.fm_row, .fm_setting {
		padding-bottom:8px;
		margin-bottom:8px;
		border-bottom:1px #dfdfdf solid;
	}

	.fm_setting {
		position:relative;
	}

	.fm_row_title, .fm_title {
		font-size:11px;
		font-weight:600;
		text-transform:uppercase;
		color:#808080;
		margin-bottom:5px;
	}

	.fm_logos, .fm_favicons, .fm_banners > div {
		background:#f2f2f2;
		border:1px #dfdfdf solid;
		display:block;
		height:100px;
		width:100%;
		background-size:cover;
	}

	.fm_banners > div {
		margin-bottom:10px;
		transition:all 0.5s ease;
		position:relative;

		span {
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			display:none;
			z-index:5;

			i {
				position:absolute;
				right:5px;
				top:5px;
				font-size:20px;
				z-index:10;
				color:fade(red, 80%);
				cursor:pointer;
			}
		}
	}

	.fm_banners > div:hover {
		transition:all 0.5s ease;

		span {
			display:block;
			background:rgba(0, 0, 0, 0.4);
		}
	}

	.fm_favicons {
		width:50px;
		height:50px;
	}
}

body#page_route_flavors_manage {
	#flavor_manager .fm_content > iframe {
		transition:all 0.5s ease;
	}
}

.fm_responsive_mobile {
	#flavor_manager .fm_content > iframe {
		margin:10px;
		position:static;
		width:320px;
		height:480px;
		transition:all 0.5s ease;
	}
}

.fm_responsive_tablet {
	#flavor_manager .fm_content > iframe {
		margin:10px;
		position:static;
		width:768px;
		height:1024px;
		transition:all 0.5s ease;
	}
}

.fm_settings_holder {
	height:250px;
	margin:-10px;
	position:relative;
}

._colorpicker_holder {
	cursor:pointer;
	position:absolute;
	right:5px;
	width:30px;
	height:30px;
	top:26px;
	border:1px darken(#fff, 10%) solid;
}

._colorpicker_holder:hover {
	border-color: #297FC7;
}

.colpick {
	z-index:10000000000;
}

.upgrade_product_holder {
	padding:20px;
	font-size:12px;
	background:fade(yellow, 20%);
	color:#808080;
}

.upgrade_product_holder a, .upgrade_product_holder a:hover {
	display:block;
	text-align:center;
	margin:10px 0 0 0;
	text-transform:uppercase;
	font-weight:600;
	letter-spacing:1px;
	font-size:11px;
	border:1px transparent solid;
	border-top-color:lighten(#808080, 30%);
	padding:12px 0;
}

.upgrade_product_holder a:hover {
	border:1px #222 solid;
	color:#222;
}