.main {
	background-color: #efefef;
	
	border: 1px solid #555;
	
	border-radius: 1rem;

	box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.35) !important;
}

.main .card-header {
	background-color: #bbb;

	border-top-left-radius: 1rem;

	border-top-right-radius: 1rem;
}

.modal-body {
	background-color: #efefef;
}

.title-img {
	max-height:50px;
	max-width: 100%;
}

#word::placeholder {
	color: #c6c6c6;
}

.btn-outline-primary:not(:checked) {
	background-color: #fff;
}

.btn-outline-primary:not(:checked):hover {
	background-color: #0d6efd;
}

.dropdown-toggle::after {
	display:inline-block;
	
	position:absolute;
	
	right: 13px;
}

#webfont-buttons button {
	background-color: #efefef;
}

#webfont-buttons button:hover, #webfont-buttons button.show {
	background-color: #6e757c;
}

#webfont-buttons .dropdown-toggle::after {
	top: 16px;
}

#font-buttons .dropdown-toggle::after {
	top: 24px;
}

#font-buttons .btn-group:last-child {
	width: 190px !important;
}

#font-buttons .btn-group:first-child {
	width: calc(100% - 190px) !important;
	
	min-width: 110px;
}

@media (max-width: 576px) {
	#font-buttons .btn-group:last-child {
		width: 140px !important;
	}

	#font-buttons .btn-group:first-child {
		width: calc(100% - 140px) !important;
	}
}

@media (max-width: 320px) {
	#font-buttons .btn-group:last-child {
		width: 110px !important;
	}

	#font-buttons .btn-group:first-child {
		width: calc(100% - 110px) !important;
	}
}

label[for="extrude-0"]:after {
	content: 'Flat';
}

label[for="extrude-1"]:after {
	content: 'Extruded';
}

label[for="smooth-0"]:after {
	content: 'Flat';
}

label[for="smooth-1"]:after {
	content: 'Smooth';
}

svg.smooth-img {
	display: none;
}

.smooth-img-path {
	fill: #0d6efd;
}

.btn-check:checked+.btn-outline-primary .smooth-img-path, .btn-check:active+.btn-outline-primary .smooth-img-path, .btn-check:hover+.btn-outline-primary .smooth-img-path {
	fill: #fff;
}

@media (max-width: 767px) {
	label[for="extrude-0"]:after {
		content: '2D';
	}

	label[for="extrude-1"]:after {
		content: '3D';
	}

	label[for="smooth-0"]:after {
		content: '';
	}

	label[for="smooth-1"]:after {
		content: '';
	}
	
	svg.smooth-img {
		display: inline;
		height: 24px;
		width: auto;
	}
}

#font-buttons .btn {
	padding-right: 20px;

	text-align: left;

	font-size: 18px;

	line-height: 2.0;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;
}

.font-menu {
	font-size: 1.5rem;

	min-width: 100%;
}

.font-menu li a small {
	margin-top: 10px;
		
	float: right;

	color: #c6c6c6;
	
	font-family: sans-serif;
	
	font-size: 12px;
}

.fonts-header {
	background-color: #bbb;
}

#webfonts-accordion .accordion-header button small {
	position: absolute;
	
	right: 50px;

	color: #c6c6c6;
	
	font-family: sans-serif;
	
	font-size: 12px;
}

.font-check {
	z-index: 1000;
}

.variant-100        				{ font-weight: 100; font-style: normal; }
.variant.variant-100:before 		{ content:'Thin'; }
.variant-100italic					{ font-weight: 100; font-style: italic; }
.variant.variant-100italic:before 	{ content:'Thin Italic'; }
.variant-200						{ font-weight: 200; font-style: normal; }
.variant.variant-200:before			{ content:'Extra-Light'; }
.variant-200italic					{ font-weight: 200; font-style: italic; }
.variant.variant-200italic:before 	{ content:'Extra-Light Italic'; }
.variant-300						{ font-weight: 300; font-style: normal; }
.variant.variant-300:before			{ content:'Light'; }
.variant-300italic					{ font-weight: 300; font-style: italic; }
.variant.variant-300italic:before 	{ content:'Light Italic'; }
.variant-regular					{ font-weight: 400; font-style: normal; }
.variant.variant-regular:before		{ content:'Regular'; }
.variant-italic						{ font-weight: 400; font-style: italic; }
.variant.variant-italic:before		{ content:'Regular Italic'; }
.variant-500						{ font-weight: 500; font-style: normal; }
.variant.variant-500:before			{ content:'Medium'; }
.variant-500italic					{ font-weight: 500; font-style: italic; }
.variant.variant-500italic:before	{ content:'Medium Italic'; }
.variant-600						{ font-weight: 600; font-style: normal; }
.variant.variant-600:before			{ content:'Semi-Bold'; }
.variant-600italic					{ font-weight: 600; font-style: italic; }
.variant.variant-600italic:before	{ content:'Semi-Bold Italic'; }
.variant-700						{ font-weight: 700; font-style: normal; }
.variant.variant-700:before			{ content:'Bold'; }
.variant-700italic					{ font-weight: 700; font-style: italic; }
.variant.variant-700italic:before	{ content:'Bold Italic'; }
.variant-800						{ font-weight: 800; font-style: normal; }
.variant.variant-800:before			{ content:'Extra-Bold'; }
.variant-800italic					{ font-weight: 800; font-style: italic; }
.variant.variant-800italic:before	{ content:'Extra-Bold Italic'; }
.variant-900						{ font-weight: 900; font-style: normal; }
.variant.variant-900:before			{ content:'Black'; }
.variant-900italic					{ font-weight: 900; font-style: italic; }
.variant.variant-900italic:before	{ content:'Black Italic'; }

.font-add {
	background-color: #d1e7dd;
	
	border: 1px solid #dfdfdf;
}

.font-remove {
	background-color: #f8d7da;
	
	border: 1px solid #dfdfdf;
}

.font-info {
	background-color: #555;
	
	color: #fff;
	
	border-bottom: 1px solid #fff;
}

.font-info:before {
	font-weight: 400;

	font-style: normal;

	font-family: sans-serif;
}

.font-info button {
	font-weight: 300;

	font-style: normal;

	font-family: sans-serif;

	float: right;

	background-color: #555;
}
 
.font-info:after {
	word-wrap: break-word;

	font-size: 2.5rem;

	content: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234567890';
}

.font-info.variant-100			{ display: none; }
.font-info.variant-100italic	{ display: none; }
.font-info.variant-200			{ display: none; }
.font-info.variant-200italic	{ display: none; }
.font-info.variant-300			{ display: none; }
.font-info.variant-300italic	{ display: none; }
.font-info.variant-regular		{ display: none; }
.font-info.variant-italic		{ display: none; }
.font-info.variant-500			{ display: none; }
.font-info.variant-500italic	{ display: none; }
.font-info.variant-600			{ display: none; }
.font-info.variant-600italic	{ display: none; }
.font-info.variant-700			{ display: none; }
.font-info.variant-700italic	{ display: none; }
.font-info.variant-800			{ display: none; }
.font-info.variant-800italic	{ display: none; }
.font-info.variant-900			{ display: none; }
.font-info.variant-900italic	{ display: none; }

.contains-100 .font-info.variant-100				{ display: block; }
.contains-100italic .font-info.variant-100italic	{ display: block; }
.contains-200 .font-info.variant-200				{ display: block; }
.contains-200italic .font-info.variant-200italic	{ display: block; }
.contains-300 .font-info.variant-300				{ display: block; }
.contains-300italic .font-info.variant-300italic	{ display: block; }
.contains-regular .font-info.variant-regular		{ display: block; }
.contains-italic .font-info.variant-italic			{ display: block; }
.contains-500 .font-info.variant-500				{ display: block; }
.contains-500italic .font-info.variant-500italic	{ display: block; }
.contains-600 .font-info.variant-600				{ display: block; }
.contains-600italic .font-info.variant-600italic	{ display: block; }
.contains-700 .font-info.variant-700				{ display: block; }
.contains-700italic .font-info.variant-700italic	{ display: block; }
.contains-800 .font-info.variant-800				{ display: block; }
.contains-800italic .font-info.variant-800italic	{ display: block; }
.contains-900 .font-info.variant-900				{ display: block; }
.contains-900italic .font-info.variant-900italic	{ display: block; }