#templates-panel {
	background-color: #f5f5f5;

	.inner-content {
		padding: 15px;
	}

	#templates-list {
		height: 100%;
		overflow: auto;

		figure {
			margin-bottom: 20px;
			.box-shadow(0 1px 2px rgba(0,0,0,0.2));
			border-radius: 4px;
			border: 2px solid transparent;

			> .img-responsive {
				border-top-right-radius: 4px;
				border-top-left-radius: 4px;
				width: 100%;	
			}

			&:hover {
				cursor: pointer;;
			}

			> figcaption {
				font-size: 13px;
				border-top: 1px solid @gray-lighter;
				text-align: center;
				padding: 10px 5px;
				background-color: #fff;
				color: @gray-light;
				
			}

			&.active {
				border-color: @brand-primary;
			}
		}
	}

	#templates-preview {
		height: 100%;
		overflow: hidden;
	}

	#templates-preview-iframe {
		width: 100%;
		height: 100%;
		border: none;
	}

	.flyout-panel-toolbar {
		padding: 15px;
		color: darken(#fff, 10%);

		> .btn {
			margin-right: 5px;

			&:nth-child(4) {
				margin-right: 25px;
			}
		}
	
		> span {
			position: relative;
			top: 3px;
			margin-right: 10px;
		}

	}
}