:root {
	--colorone: #FF0066;
	--colortwo: #FF6600;
}
[data-theme="themeA"] {
	--colorone: #FF0066;
	--colortwo: #FF6600;
}

[data-theme="themeB"] {
	--colorone: #009900;
	--colortwo: #99CC00;
}

[data-theme="themeC"] {
	--colorone: #6600CC;
	--colortwo: #0099CC;
}

[data-theme="themeD"] {
	--colorone: #9900DD;
	--colortwo: #DD0099;
}

[data-theme="themeE"] {
	--colorone: #FF6633;
	--colortwo: #FFCC00;
}

[data-theme="themeF"] {
	--colorone: #0099CC;
	--colortwo: #00CC99;
}
body {
	font-family: 'Saira Semi Condensed', sans-serif;
	color: #333333;
	background: #f2f2f2;
	moz-user-select: none; 
	-webkit-user-select: none; 
	-ms-user-select:none; 
	user-select:none;
	-o-user-select:none;
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: var(--colortwo);
	transition: 0.5s;
}

a:hover {
	color: var(--colorone);
}

s14 {
	font-size: 14px;
}

s20 {
	font-size: 20px;
}

.dftheme {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	border: 2px #FFFFFF solid;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	display: inline-block;
	vertical-align: middle;
	margin: 10px;
	cursor: pointer;
}

.theme {
	border: 2px #FFFFFF solid;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	display: inline-block;
	vertical-align: middle;
	margin: 4px;
	cursor: pointer;
}

.themeA {
	background: linear-gradient(80deg, #FF0066, #FF6600);
}

.themeB {
	background: linear-gradient(80deg, #009900, #99CC00);
}

.themeC {
	background: linear-gradient(80deg, #6600CC, #0099CC);
}

.themeD {
	background: linear-gradient(80deg, #9900DD, #DD0099);
}

.themeE {
	background: linear-gradient(80deg, #FF6633, #FFCC00);
}

.themeF {
	background: linear-gradient(80deg, #00CC99, #0099CC);
}

.colortitle {
	display: inline-block; 
	vertical-align: middle; 
	margin-left: 5px;
	color: rgb(250, 250, 250, 0.8);
	cursor: pointer;
}

.thememenu {
	display: inline-block;
	position: relative; 
	margin: 5px;
}

.themebox {
	height: 0;
	padding: 0;
	overflow: hidden;
	position: absolute;
	background-color: #FFFFFF;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	transition: 0.5s;
	width: 160px;
	border-radius: 10px;
	margin-left: -26px;
}

.themeboxact {
	height: 95px;
	padding: 10px;
	opacity: 1;
	overflow: none;
}

/* Side Nav Bar*/

.sidenav {
	height: 100%;
	width: 200px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden;
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	padding: 80px 50px 80px 50px;
	color: #FFFFFF;
}

.footer {
	margin-top: 40px;
	font-size: 14px; 
	color: rgb(250, 250, 250, 0.6); 
}

.footer a {
	color: rgb(250, 250, 250, 0.8);  
	transition: 0.5s;
}

.footer a:hover {
	color: #FFFFFF;
}

.footer .dbr {
	height: 15px
}

.main {
	margin-left: 0px;
	padding: 40px;
}

.menu {
	padding: 10px 15px 10px 15px; 
	margin: 5px 0 5px;
	transition: 0.5s;
	color: #FFFFFF;
}

.menu:hover {
	background: rgb(0,0,0, 0.1);
	border-radius: 10px;
	
}

.menuactive {
	background: #FFFFFF; 
	color: var(--colorone); 
	font-weight: bold; 
	padding: 10px 15px 10px 15px; 
	margin: 5px 0 5px; 
	border-radius: 10px;
}

/* Main Body */

.right {
	float: right;
}

.rightpc {
	float: right;
}

.title {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo)); 
	color: #FFFFFF; 
	padding: 20px 40px 20px 40px; 
	border-radius: 30px; 
	font-size: 45px; 
	width: 500px;
}

.customize {
	padding: 20px 0 15px 0;
	border-bottom: #C0C0C0 solid 2px;
	margin-bottom: 10px;
	position: sticky;
	top: 0;
	background: #f2f2f2;
}

.semititle {
	padding: 20px 0 15px 0;
	border-bottom: #C0C0C0 solid 2px;
	margin-bottom: 10px;
	position: sticky;
	top: 0;
	background: #f2f2f2;
	text-align: left;
}

.fontbox {
	background: #ffffff;
	width: 420px;
	padding:  15px 20px 20px 20px;
	border-radius: 20px;
	display: inline-table;
	margin: 7px 5px 7px 5px;
	text-align: left;
	transition: 0.5s;
}

.box {
	background: #ffffff;
	padding:  20px 20px 20px 20px;
	border-radius: 20px;
	display: inline-block;
	margin: 18px 5px 5px 5px;
	text-align: left;
	transition: 0.5s;
	vertical-align: top;
}

.preview {
	font-size: 40px; 
	color: #000000; 
	padding: 10px;
}

.fontbox:hover , .download:hover , .box:hover, .toolbox:hover, .inputsubmit:hover , .designersocial:hover, .designerbox:hover , .theme:hover{
	box-shadow: 0 10px 16px -6px rgb(0,0,0,0.2);
}

.fontdetail {
	width: 260px;
}

.note {
	background: #f2f2f2;
	padding: 10px 20px 10px 20px;
	border-radius: 10px;
	margin: 10px 0 0 0;
	font-size: 14px;
	text-align: center;
}

.aboutnote {
	padding: 10px 20px; 
	background: #F0F0F0; 
	border-radius: 10px; 
	font-style: italic; 
	margin: -5px -10px 15px -10px;
}
/* Inputs */

.textbox {
	padding: 5px;
	font-family: 'Saira Semi Condensed', sans-serif;
	outline: 0;
	border: 0;
	width: 120px;
	font-size: 16px;
	background: #f2f2f2;
}

.selector {
	padding: 5px;
	font-family: 'Saira Semi Condensed', sans-serif;
	outline: 0;
	border: 0;
	width: 100px;
	font-size: 16px;
	background: #f2f2f2;
	cursor: pointer;
}

.slider {
	-webkit-appearance: none;
	width: 100px;
	height: 5px;
	border-radius: 5px;
	background: #d3d3d3;
	outline: none;
	transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	cursor: pointer;
}

.download {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	color: #FFFFFF;
	border: 0;
	outline: 0;
	font-family: 'Saira Semi Condensed', sans-serif;
	font-size: 16px;
	padding: 10px;
	border-radius: 15px;
	width: calc(100% + 20px);
	margin: 12px -10px -10px -10px;
	transition: 0.5s;
	cursor: pointer;
}

.inputtext {
	width: calc(100% - 10px);
	max-width: 400px;
	padding: 10px;
	outline: 0; 
	border: var(--colortwo) solid 1px;
	border-radius: 10px;
	margin: 5px 0 10px 0; 
	font-family: 'Saira Semi Condensed', sans-serif;
	font-size: 14px;
}

.inputsubmit {
	padding: 10px 30px;
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	font-family: 'Saira Semi Condensed', sans-serif;
	font-size: 16px;
	border-radius: 10px;
	outline: 0;
	border: 0;
	cursor: pointer;
	color: #FFFFFF;
	margin: 8px 0 5px 0;
	transition: 0.5s;
}

.morefont {
	width: 60%;
}

/* Designers */

.logo {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: #f2f2f2;
}
.logo:before {
    position: absolute;
    z-index: -1;
  	top: -10px;
  	right: -10px;
  	width: 220px;
    height: 220px;
    background: linear-gradient(80deg, var(--colorone), var(--colortwo));
    border-radius: 100%;
    content: '';
}

.logocont {
	display: inline-table;
	vertical-align: middle;
	margin: 30px 20px 30px 20px;
	padding: 10px;
}

.designerbox {
	background: #ffffff;
	border-radius: 20px;
	display: inline-block;
	text-align: left;
	transition: 0.5s;
	vertical-align: middle;
	margin: 18px 5px 18px 5px;
	width: calc(100% - 350px); 
	padding: 30px 35px
}

.designersocial {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo)); 
	color: #FFFFFF; 
	padding: 8px; 
	font-size: 25px; 
	border-radius: 100%;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin: 8px 2px 8px 2px;
	transition: 0.5s;
}

.designers {
	margin-top: 100px;
}

.boxlogoborder {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	display: inline-block;
	padding: 10px;
	border-radius: 100%;
	margin-top: -100px;
	margin-bottom: 10px;
}

.boxlogo {
	width: 160px; 
	border-radius: 100%; 
	border: #f2f2f2 solid 6px;
}

/* Font Menu Tab*/

.fontmenu {
	width: calc(100% - 370px);
}

.fontmenutab {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	margin: -20px -20px 20px -20px;
	border-radius: 20px 20px 0 0;
	padding: 15px 15px 0 15px;
	text-align: center;
}

.tab {
  overflow: hidden;
}

.tab button {
	font-family: 'Saira Semi Condensed', sans-serif;
	background-color: rgb(0,0,0,0);
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px 14px;
	transition: 0.5s;
	border-radius: 10px 10px 0 0; 
	color: #FFFFFF;
	font-size: 16px;
}

.tab button:hover {
	background-color: #FFFFFF;
	color: var(--colorone);
}

.tab button.active {
	background-color: #FFFFFF;
	color: var(--colorone);
	font-weight: bold;
	padding: 10px 22px;
}

.tabcontent {
	display: none;
	padding: 10px 20px;
}

.tabcontent table {
	display: inline-block;
}

.tabcontent textarea {
	width: 100%;
	padding: 10px 20px 20px 20px;
	font-size: 40px;
	resize: none;
	min-height: 180px;
	outline: 0;
	border: 0;
}

.paratitle {
	font-size: 50px;
	transition: 0.5s;
}

.parapassage {
	font-size: 18px;
}

.paratitle:hover {
	color: var(--colorone);
}

.trycont {
	padding: 0px 0 6px 0;
	border-bottom: #C0C0C0 solid 2px;
	margin: 0 5px 10px 5px;
	text-align: left;
	overflow: auto;
}

.trycont .leftpc {
	padding: 3px 0;
}

.trybtn {
	color: var(--colorone); 
	background: #ffffff;
	border: var(--colorone) 1px solid;
	border-radius: 5px;
	text-align: center;
	width: 32px;
	height: 32px;
	transition: 0.5s;
}
.trybtn .material-icons {
	color: var(--colorone);
	font-size: 18px;
}
.trybtnact{
    background: linear-gradient(var(--colorone),var(--colortwo));
	color: #ffffff; 
	border: none;
	border-radius: 5px;
	text-align: center;
	width: 32px;
	height: 32px;
	transition: 0.5s box-shadow;
}
.trybtnact .material-icons {
	color: #ffffff;
}
.trybtn:hover {
    box-shadow: 0 10px 16px -6px rgb(0,0,0,0.2);
}

.trybold {
	font-weight: bold;
}

.tryitalic {
	font-style: italic;
}

.tryunderline {
	text-decoration: underline;
}

.tryleft {
	text-align: left;
}
.trycenter {
	text-align: center;
}
.tryright {
	text-align: right;
}
.tryblack {
	background: #231f20;
	color: #FFFFFF;
	border-radius: 10px;
}




/* Toast */
#toast, .toast{
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: rgb(0,0,0,0.5);
	color: #FFFFFF;
	text-align: center;
	border-radius: 10px;
	padding: 10px 0;
	position: fixed;
	z-index: 1;
	left: 50%;
	bottom: 30px;
}

#toast.show, .toastShow{
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}




@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;} 
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;} 
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}



/* Tools */
.tool {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	margin: -20px 20px -20px -20px;
	width: 120px;
	padding: 10px;
	border-radius: 20px 0 0 20px;
	display: inline-block;
	vertical-align: middle;
}

.toolbox {
	background: #ffffff;
	padding:  20px 20px 20px 20px;
	border-radius: 20px;
	display: inline-block;
	margin: 7px;
	text-align: left;
	transition: 0.5s;
	vertical-align: top;
	width: calc(100% - 80px);  
	color: #333333;
}

.toolText {
	width: calc(100% - 180px); 
	display: inline-block; 
	vertical-align: middle; 
	padding: 0 10px;
}


/* Pagination */

.nexprebtn {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo));
	cursor: pointer;
	border: 0;
	outline: 0;
	width: 50px;
	height: 50px;
	border-radius: 30px;
	font-size: 25px;
	color: #FFFFFF;
	text-align: center;
	display: inline-block;
	vertical-align: center;
	margin: 20px 10px;
	transition: 0.5s;
}

.nexprebtn:hover {
	box-shadow: 0 10px 16px -6px rgb(0,0,0,0.2);
}

.nexprebtn:disabled {
	opacity: 0.5;
}




/* Converterer Jinish */

.textareaContainer {
	display: inline-block; 
	vertical-align: middle; 
	width: calc(50% - 40px);
}

.kboardTextareaContainer {
	display: block; 
	width: 100%;
}


.textareaTitle {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo)); 
	color: #FFFFFF; 
	border-radius: 15px 15px 0 0; 
	font-size: 15px; 
	padding: 4px;
	width: calc(100% - 8px);
	overflow: auto;
	text-align: left;
}

.textareaName {
	font-size: 18px;
	padding: 13px;
	display: inline-block;
	vertical-align: middle;
}

.textareaContainer .textarea {
	border-radius: 0 0 15px 15px;
	padding: 20px;
	font-size: 25px;
	width: 100%;
	height: 350px;
	border: 0;
	outline: 0;
	resize: none;
}

.kboardTextareaContainer .textarea {
	border-radius: 0 0 15px 15px;
	padding: 20px;
	font-size: 25px;
	width: 100%;
	height: 300px;
	border: 0;
	outline: 0;
	resize: none;
}

.clrButton {
	font-weight: bold;
	background: #ffffff; 
	color: var(--colortwo);
	float: right; 
	padding: 10px; 
	border-radius: 10px; 
	margin: 5px 4px; 
	font-size: 14px;
	cursor: pointer;
	transition: 0.5s;
}

.clrButton .material-icons {
	display: inline-block;
	vertical-align: middle;
	margin-right: 3px;
}

.clrButton .btnName {
	display: inline-block;
	vertical-align: middle;
	margin-right: 3px;
}

.clrButton:hover {
	background: rgb(0,0,0, 0.2);
	color: #FFFFFF;
}

.convertIcon {
	padding: 10px; 
	font-size: 40px;
	display: inline-block;
	vertical-align: middle;
	color: #999999;
}

.convertMode {
	background: rgb(0,0,0,0.1); 
	border-radius: 15px; 
	padding: 15px 20px; 
	display: inline-block; 
	margin: 5px;
	transition: 0.5s;
	color: #666666;
}

.activeMode, .convertMode:hover {
	background: linear-gradient(80deg, var(--colorone), var(--colortwo)); 
	color: #FFFFFF;
}

.convertMode div {
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px;
}


/*converter shesh */

/* okkhor originals */

.originalYes {
	background: var(--colortwo);
	display: inline-block; 
	vertical-align: middle; 
	color: #FFFFFF; 
	padding: 1px 6px; 
	font-size: 12px; 
	border-radius: 4px; 
	margin: 3px 0;
	transition: 0.5s;
}

.originalYes:hover {
	background: var(--colorone);
}

.originalNo {
	display: none;
}

/*okkhor original end */

/*keyboard start */

.keyboard {
	background: #FFFFFF; 
	padding: 8px; 
	border-radius: 15px; 
	display: inline-block;
}

.keyboard .key {
	width: 60px; 
	height: 60px; 
	border-radius: 8px; 
	background: #DDDDDD; 
	display: inline-block; 
	vertical-align: middle; 
	margin: 1.5px 0; 
}
.keyboard .key .defKey {
	width: 25px; 
	height: 30px; 
	line-height: 30px; 
	display: inline-block; 
	vertical-align: middle; 
	border-radius: 8px; 
	opacity: 0.6;
}
.keyboard .key .valKeyCont {
	display: inline-block; 
	vertical-align: middle;
}
.keyboard .key .valKeyCont .valKey {
	width: 25px; 
	height: 30px; 
	line-height: 30px; 
	border-radius: 8px;
	font-weight: bold; 
	transition: 0.5s; 
	cursor: pointer;
}
.keyboard .key .valKeyCont .valKey:hover {
	background: rgb(0,0,0,0.2);
}
.keyboard .keyBksp {
	width: 100px; 
	height: 60px; 
	border-radius: 8px; 
	display: inline-block; 
	vertical-align: middle; 
	line-height: 60px; 
	background: linear-gradient(80deg, var(--colorone), var(--colortwo)); 
	color: #FFFFFF; 
	opacity: 0.8; 
	margin: 1.5px 0; 
}
.keyboard .keyCplk {
	width: 112px; 
	height: 60px; 
	border-radius: 8px; 
	display: inline-block; 
	vertical-align: middle; 
	line-height: 60px; 
	background: linear-gradient(80deg, var(--colorone), var(--colortwo)); 
	color: #FFFFFF; 
	opacity: 0.8; 
	margin: 1.5px 0; 
}
.keyboard .keyShft {
	width: 143px; 
	height: 60px; 
	border-radius: 8px; 
	display: inline-block; 
	vertical-align: middle; 
	line-height: 60px; 
	background: linear-gradient(80deg, var(--colorone), var(--colortwo)); 
	color: #FFFFFF; 
	opacity: 0.8; 
	margin: 1.5px 0; 
}

/*keyboard end*/


/* Mobile Extra */

.headerm {
	display: none;
}

.closem {
	display: none;
}

@media screen and (min-width: 1900px) {
	.fontbox {
		width: 450px;
	}
}

@media screen and (max-width: 1600px) {
	.fontbox {
		width: 500px;
	}
}

@media screen and (max-width: 1600px) {
	.fontbox {
		width: 500px;
	}
}

@media screen and (max-width: 1500px) {
	.fontbox {
		width: 460px;
	}
}

@media screen and (max-width: 1400px) {
	.fontbox {
		width: 420px;
	}
	.sidenav {
		padding: 60px 50px 60px 50px;
	}
}

@media screen and (max-width: 800px) {
	.sidenav {
	    width: 0px;
		overflow-x: hidden;
		padding: 0;
		transition: width 0.5s;
		box-shadow: 10px 0px 18px rgb(0,0,0,0.3);
		z-index: 3;
	}
	
	.closem {
		display: block;
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 50px;
		color: #FFFFFF;
		text-decoration: none;
		margin-left: 50px;
	}
	
	.footer {
		position: static;
		width: 100%;
		margin-top: 30px;
	}
	
	.headerm {
		display: block;
		background: linear-gradient(80deg, var(--colorone), var(--colortwo));
		padding: 10px;
		font-size: 35px;
		color: #FFFFFF;
		margin: -18px -18px 18px -18px;
		position: sticky;
		z-index: 2;
		top: 0;
		border-bottom: solid 2px #f2f2f2;
	}
	
	.rightpc {
		float: none;
	}
	
	.main {
		margin-left: 0;
		padding: 10px;
	}
	
	.customize {
		text-align: center;
		top: 35px;
		z-index: 1;
	}
	
	.semititle {
		z-index: 1;
		top: 77px;
	}
	
	
	.title {
		font-size: 35px;
		padding: 15px 30px 15px 30px;
		width: calc(100% - 60px)
	}
	
	.fontbox {
		width: calc(100% - 60px);
	}
	
	.fontmenu {
		width: calc(100% - 40px);
		padding: 10px;
	}
	.fontmenutab {
		margin: -10px -10px 15px -10px;
	}
	
	.paratitle {
		font-size: 40px;
	}
	
	.trycont {
		margin: 0px 0 10px 0;
		padding-top: 8px;
		text-align: center;
	}
	.morefont {
		width: 95%;
	}


	.logocont {
		text-align: center;
		width: calc(100% - 60px);
	}
	.designerbox {
		margin-top: 0px;
		width: calc(100% - 80px)
	}

	.tool {
		margin: -20px -20px 15px -20px;
		width: calc(100% + 20px);
		border-radius: 20px 20px 0 0;
		text-align: center;
	}

	.tool img {
		width: 150px;
	}

	.toolText {
		width: calc(100% - 20px); 
	}

	.trycont .leftpc {
		padding: 0 0 3px 0;
	}


	.textareaContainer {
		display: block; 
		width: 100%;
	}
	.textarea {
		height: 300px;
	}

	.convertIcon {
		transform: rotate(-90deg);
	}
}

@media screen and (min-width: 1400px) {
	.footer {
		position: fixed; 
		bottom: 80px;
		left: 0; 
		width: 200px;
		padding: 0 50px;
	}
}

@media screen and (max-width: 480px) {
	.convertMode {
		display: block;
		width: calc(100% - 50px);
		text-align: center;
	}


	.clrButton .material-icons {
		margin-right: 0px;
	}

	.clrButton .btnName {
		display: none;
	}

}

@media screen and (max-width: 1355px) {
	.keyboard .keyShft, .keyboard .keyCplk, .keyboard .keyBksp {
		display: none;
	}
}
@media screen and (max-width: 1249px) {
	.keyboard br {
		display: none;
	}
}