.fa-cw:before {
	content: '\f021'
}

#outputArea .fa {
	color: green
}

.animate-spin {
	-moz-animation: spin 2s infinite linear;
	-o-animation: spin 2s infinite linear;
	-webkit-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
	display: inline-block
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg)
	}
}

@-webkit-keyframes spin {
	0% {
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg)
	}
}

@-o-keyframes spin {
	0% {
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg)
	}
}

@-ms-keyframes spin {
	0% {
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg)
	}
}

@keyframes spin {
	0% {
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-moz-transform: rotate(359deg);
		-o-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg)
	}
}

body,html {
	background-color: #fff;
	color: #444;
	font-family: Helvetica Neue,Helvetica CY,Arial,sans-serif;
	font-size: 15px;
	padding: 0;
	margin: 0
}

#bbody {
	max-width: 986px;
	min-width: 320px;
	margin: 0 auto
}

#bheader {
	margin: 5px auto
}

#blanguage {
	float: right
}

#bmain {
	margin: 10px auto;
	min-height: 600px
}

#bfooter {
	margin: 25px auto;
	color: #b4b4b5
}

#bfooter a {
	color: #b4b4b5
}

#bfooter span {
	vertical-align: middle
}

.brow {
	display: block;
	width: 100%;
	clear: both;
	float: none
}

.bcenter {
	text-align: center
}

.bright {
	text-align: right
}

.bcontent {
	margin: 5px
}

.bshare .fa {
	color: #4267b2
}

.bcontent .fa {
	color: #4267b2
}

.bcol_3 {
	width: 33%;
	display: inline
}

.loadfile {
	padding: 15px;
	background-color: #e8e8e8;
	width: 100%
}

.dragdoparea {
	border: 1px dashed #5f69a3;
	vertical-align: middle!important;
	height: 105px;
	width: 100%;
	background-color: #fff;
	text-align: center;
	padding: 5px;
	color: #adadad
}

#convert_work {
	margin: 25px 0;
	padding: 15px;
	width: 100%;
	background: #ededed;
	background: radial-gradient(circle,rgba(237,237,237,1) 0,rgba(200,171,171,.37298669467787116) 91%,rgba(230,230,230,1) 100%);
	border-radius: 20px;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.stepno {
	vertical-align: middle;
	text-align: center;
	font-style: italic;
	font-size: 64px;
	color: #0f0f4659;
	line-height: 120px
}

#setp1,#setp2,#setp3 {
	margin-bottom: 15px;
	margin-top: 15px
}

#setp2 {
	border-top: 1px dashed;
	border-bottom: 1px dashed
}

.bcol-10,.bcol-2,.bcol-3,.bcol-4,.bcol-8,.bcol-9 {
	display: inline-block;
	vertical-align: middle;
}

.bcol-2 {
	width: 16.2%
}

.bcol-3 {
	width: 25%
}

.bcol-4 {
	width: 33%
}

.bcol-8 {
	width: 66%
}

.bcol-9 {
	width: 75%
}

.bcol-10 {
	width: 83.33333333%
}

.optionitem {
	margin-top: 5px;
	margin-bottom: 5px
}

.optionlabel {
	width: 15%;
	text-align: left;
	display: inline-block;
	font-style: italic;
	vertical-align: top;
}

.optioninput {
	width: 59%;
	text-align: left;
	display: inline-block;
	height: 25px
}

.bbutton {
	display: inline-block;
	cursor: pointer;
	border-color: #e2e2ea;
	border-width: 1px;
	border-style: solid;
	padding: 3px;
	border-radius: 5px;
	background-color: #3b5998;
	color: #fff;
	font-size: 25px;
	padding: 10px 15px
}

.bbutton .fa {
	color: #fff
}

.exad {
	margin-top: 30px;
	margin-bottom: 30px
}

.subtitle {
	display: inline-block
}

.h1title h1 {
	display: inline-block
}

#curFileInput {
	text-align: center;
	margin: 20px;
	font-size: 20px
}

#outputArea {
	text-align: center;
	margin: 20px;
	font-size: 20px;
	display: inline-block;
}

#outputArea small {
	font-style: italic;
	font-size: 12px
}

#outputArea a {
	text-decoration: none;
	color: #3b5998
}

.listitem {
	display: inline-block;
	width: 130px
}

.toollist {
	margin: 20px
}

.toollist .fa {
	color: gray
}

#imagelist {
	text-align: center
}

#imagelist canvas {
	margin: 5px;
	border: 1px solid #a4a5af
}

.acenter {
	margin-top: 25px;
	text-align: center
}
#outputImages {
	text-align: center
}

#outputImages img {
	margin: 5px;
	border: 1px solid #a4a5af;
	cursor: pointer
}
.noupload {
	display: inline-block;
	position: relative;
	width: 35px;
	height: 35px
}

.noupload:before {
	position: absolute;
	font-family: fontello;
	top: 7px;
	left: 7px;
	content: "\e804";
	color: #3b5998
}

.noupload .fa-block {
	margin-left: -8px;
	font-size: 25px;
	color: #f59696
}
/* for template
.container {
	display: inline-block;
	position: relative;
	padding-left: 30px;
	margin-left: 15px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer
}
*/
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%
}

.container:hover input~.checkmark {
	background-color: #ccc
}

.container input:checked~.checkmark {
	background-color: #2196f3
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none
}

.container input:checked~.checkmark:after {
	display: block
}

.container .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff
}

.datagrid {
	margin-top: 5px
}

.datagrid table {
	border-collapse: collapse;
	text-align: left;
	width: 100%
}

.datagrid {
	font: normal 12px/150% Arial,Helvetica,sans-serif;
	background: #fff;
	overflow: hidden
}

.datagrid table td,.datagrid table th {
	padding: 3px 4px
}

.datagrid table thead th {
	background: -webkit-gradient(linear,left top,left bottom,color-stop(.05,#8c8c8c),color-stop(1,#7d7d7d));
	background: -moz-linear-gradient(center top,#8c8c8c 5%,#7d7d7d 100%);
	background-color: #8c8c8c;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border-left: 1px solid #a3a3a3
}

.datagrid table thead th:first-child {
	border: none
}

.datagrid table tbody td {
	color: #7d7d7d;
	border-left: 1px solid #dbdbdb;
	font-size: 12px;
	border-bottom: 1px solid #e1eef4;
	font-weight: 400
}

.datagrid table tbody td:first-child {
	border-left: none
}

.datagrid table tbody tr:last-child td {
	border-bottom: none
}


.inner .fa {
	color: #4267b2
}



.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1
}

.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: 0;
	cursor: pointer;
	padding: 14px 16px;
	transition: .3s;
	font-size: 17px
}

.tab button:hover {
	background-color: #ddd
}

.tab button.active {
	background-color: #ccc
}

.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	margin-bottom: 10px;
	min-height: 400px
}

.tabcontent textarea {
	width: 100%
}
.apple_radio {
	display: inline-block;
    	position: relative;
    	padding-left: 30px;
	width: 750px;
	margin-left: 15px;
    	margin-bottom: 12px;
}
.apple_radio input {
    	position: absolute;
    	opacity: 0;
    	cursor: pointer;