// the button
.manage-fonts { 
 
	i { 
		padding-top: 6px;
		font-size: 16px;
		width: 20px; 
		height: 20px;
		margin-right: 7px;
	}

}

.add-fonts { 
	.loading_overlay 
	{
		background-color: #eee; 
		opacity: 0.9; 
		position: absolute;
		left: 0;
		right: 0;
		top: 0; 
		bottom: 0; 
		z-index: 12000;
	
	}
	.loading { 
		font-size: 22px;
		color: #000;	
		z-index: 12001; 	
			width: 124px;
			height: 31px;
			position: absolute; 
			top: 50%; 
			left: 50%;
			margin: -16px 0 0 -62px;
		span, img { float: left; margin-right: 5px; } 
		span {
			line-height: 32px; 
			vertical-align: middle;
	
		}
	}
	.modal_content p {
		@include bp(960) {
			margin: 5px 0; 
		}
	}

	.controls { 
	//	height: 30px; 
		background-color: #fff; 
		width: 100%;
		box-sizing: border-box;
		clear:both;
		display: inline-block;
	}	
}

.font_manager {
	height: 450px; 
	max-height: 65vh;
	width: 100%; 
	position: relative; 
	.font_search {
		span { 
			font-size: 15px; 
			font-weight: 700;
		
		}
	
	}
	.font_wrap {
		max-height: 80%; 
		overflow-x: auto; 
		overflow-y: none;
		margin-top: 15px;	
	}
	
	.font_left, .font_right {
		display: inline-block;
		text-align: left;
		width: 50%;
				
		.items { 
			margin-top:15px;
			margin-left: 10px;
			line-height: 20px; 	
			font-size: 14px;
			list-style: none; 
			
			li 
			{	
				span {
					margin-left: 5px; 
				
				}
				input { 
			 		margin: 2px 0;
			 		vertical-align: center;
				
				}
			}
			
		
		}
	}
	
	.font_left { 
		float: left;
	}
	
	.font_right {

	}
	
	
	.font_example {
		width: 90%;
		display: block;

		padding: 10px 20px;
		clear:both;
		border: 1px solid #000000;
		@include bp(960) 
		{
			display: none;
		}
		.example_text { 
			display: none;
		}
	}

}
