@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700;800&display=swap');



* {
	margin: 0;
	padding: 0
}

#branah-keyboard {
	line-height: 20px;
	font-size: 1em
}

#branah-keyboard button {
	float: left;
	display: block;
	margin: 1px;
	height: 3em;
	text-align: center;
	color: gray
}

#branah-keyboard .branah-label-natural {
	color: #e0115f
}

#branah-keyboard .branah-label-shift {
	color: #057cb5
}

#branah-keyboard .branah-label-natural,
#branah-keyboard .branah-label-shift {
	margin-top: -5px;
	line-height: 20px;
	text-align: center;
	cursor: default
}

#branah-keyboard .branah-label-reference {
	color: gray;
	font-size: .9em;
	line-height: 12px;
	text-align: left;
	cursor: default
}

#branah-k29 .branah-label-reference,
#branah-k32 .branah-label-reference {
	/*color: #000*/
}

#branah-keyboard .branah-recessed span {
	color: #3C0
}

#branah-keyboard .branah-recessed-hover span {
	color: #50c878
}

#branah-keyboard .branah-clear {
	clear: both
}

@media only screen and (max-width:640px) {
	#page {
		margin: 0 2px
	}

	#header {
		margin-bottom: 1em
	}

	#logo {
		display: inline-block;
		width: 100%;
		height: 46px;
		line-height: 46px;
		background-repeat: repeat-x;
		background-image: url(/images/branahmobile.jpg)
	}

	div.side_content {
		height: 50px
	}

	.adslot_1 {
		width: 320px;
		height: 50px
	}

	a.soft_button {
		padding: 0 2px 0 0;
		margin-left: 0
	}

	ul.list {
		list-style: none
	}

	ul.list li {
		text-align: center;
		line-height: 2em;
		margin: 1em
	}

	textarea {
		width: 85%
	}

	#share {
		width: 100%;
		margin: 2em auto 1em auto;
		text-align: center
	}

	#action {
		line-height: 2.25em
	}

	#archived {
		font-size: .85em;
		margin: .5em 0 1em 0
	}

	#branah-keyboard button {
		width: 88px
	}

	#branah-keyboard .branah-key {
		width: 43px
	}

	.gsc-search-box,
	.gsc-control-cse {
		display: none
	}
}

@media only screen and (min-width:641px) and (max-width:840px) {
	p {
		text-align: justify
	}

	textarea {
		width: 610px
	}

	#page {
		width: 630px;
		margin: 0 auto
	}

	#header {
		margin-bottom: 1em
	}

	#logo {
		display: inline-block;
		width: 630px;
		height: 108px;
		line-height: 108px;
		background-image: url(/images/branahtab.jpg)
	}

	div.side_content {
		height: 60px
	}

	.adslot_1 {
		width: 468px;
		height: 60px
	}

	ul.list {
		list-style: none;
		display: inline-block;
		width: 120px
	}

	ul.list li {
		line-height: 2em;
		margin: 0
	}

	#editor {
		width: 600px
	}

	#keyboard {
		width: 630px
	}

	#selectAll,
	#saveAsTextFile,
	#postToFacebook,
	#shrink,
	#enlarge {
		margin-right: 2px;
		padding: 0 5px;
		vertical-align: middle;
		line-height: 18px
	}
}

@media only screen and (min-width:841px) {
	p {
		text-align: justify
	}

	textarea {
		width: 610px
	}



	#header {
		margin-bottom: 1em
	}

	#logo {
		display: inline-block;
		width: 840px;
		height: 144px;
		line-height: 144px;
		background-image: url(/images/branah.jpg)
	}

	div.side_content {
		position: absolute;
		top: 0;
		left: 0;
		width: 160px;
		_margin-left: -210px
	}

	.adslot_1 {
		display: block;
		width: 160px;
		height: 600px
	}

	div.main_content {
		position: relative;
		padding-left: 210px
	}

	ul.list {
		list-style: none;
		display: inline-block;
		width: 160px
	}

	#editor {
		width: 607px;
		height: 96px
	}
}

@media only screen and (min-width:641px) {
	#branah-keyboard {
		width: 630px
	}

	#branah-keyboard button {
		line-height: 2.75em
	}

	#branah-keyboard .branah-key {
		width: 40px
	}

	#branah-backspace {
		width: 78px
	}

	#branah-tab {
		width: 62px
	}

	#branah-k25 {
		width: 56px
	}

	#branah-caps-lock {
		width: 76px
	}

	#branah-enter {
		width: 84px
	}

	#branah-left-shift {
		width: 46px
	}

	#branah-right-shift {
		width: 114px
	}

	#branah-space {
		width: 246px;
		text-align: center
	}

	#branah-right-ctrl,
	#branah-right-alt,
	#branah-escape {
		width: 62px
	}

	#branah-left-ctrl,
	#branah-left-alt,
	#branah {
		width: 60px
	}
}

#keyboard {margin: 0 !important; width: 100% !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
#keyboard button {padding: 0 !important; float: left !important; display: block !important; margin:0px !important; height: 3em !important; text-align: center !important; color: gray !important; height: 50px !important; box-shadow: 2px 2px 2px #999 !important; background: #efefef !important; line-height: 2.75em !important; border: 1px solid #767676 !important; } 
#keyboard button span {font-size: 13px !important; line-height: 13px !important; font-weight: normal !important; display: flex; align-items: center; justify-content: center; } 
#keyboard button span a {text-decoration: none; line-height: 1px; display: inline-flex; float: right; font-weight: normal !important; } 
#keyboard button * {font-weight: normal; text-transform: capitalize; }


/******** New CSS ***********/

#editor {width: 100%; height: 130px; } 
#branah-keyboard {width: 100%; } 
#branah-keyboard .branah-key {width: auto; flex: 6.5%; } 
div#branah-keyboard-alpha {display: flex; flex-flow: wrap;row-gap: 1px; column-gap: 1px; }
#keyboard button {width: auto; flex: 12%; } 
button#branah-enter {width: 13.4%; } 
button#branah-left-ctrl {display: none !important; } 
button#branah-left-alt {display: none !important; } 
button#branah-right-ctrl {display: none !important; }
button#branah-space {width: auto; flex:80%; }
#keyboard button span.material-symbols-outlined {display: none; }
.social_share-content {display: flex;align-items: center;}
.social_share-content button {background: 0 0 !important; border: none !important; box-shadow: none !important; padding: 0 !important; height: auto !important; text-shadow: none !important; width: auto !important; display: inline-flex !important; margin: 0 0 0 !important;outline: none !important;}
.social_share-content > *:not(:last-child) {margin:0 10px 0 0 !important; }
#branah-keyboard div#branah-keyboard-emoji button.branah-key {width: 6.66%; }
#branah-keyboard .branah-key.emoji span.icon {display: none; }
.social_share-content button span.material-symbols-outlined {color: #000; }
#branah-keyboard .branah-label-natural {color: #272727; }
.arabic_keyboard textarea#editor {font-family: Readex Pro, cursive; font-weight: 300; font-size: 19px !important; line-height: 30px; }
.social_share-content button#share {background: #54595f !important; color: #fff !important; padding: 0 10px !important; border-radius: 100px; display: flex !important; align-items: center; justify-content: center; line-height: 1; font-size: 17px !important; font-weight: 500; font-family: inherit; position: relative; overflow: hidden; }
.social_share-content button#share * {color: #fff; margin-right: 6px; }
.social_share-content button#share div#share_popup {display: flex; margin: 0; padding: 8px 11px; } 
.social_share-content button#share div#share_popup a {border: none; line-height: normal; margin: 0; padding: 0; white-space: normal; display: flex; font-size: 22px; text-decoration: none; } 
.social_share-content button#share div#share_popup .social_icon {margin: 0; opacity: 0; transition: linear 0.5s; } 
.social_share-content button#share div#share_popup .social_icon:not(:last-child) {margin: 0 20px 0 0; } 
.social_share-content button#share div#share_popup a * {margin: 0; } 
.social_share-content button#share .share_content {position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; background: #E98074; top: 0; bottom: 0; left: 0; width: 100%; margin: 0; transition: cubic-bezier(0, 0.67, 0.28, 0.81) 0.9s; border-radius: 100px; transform: translateX(0px);z-index: 999; } 
.social_share-content button#share:hover .share_content {transform: translateX(-118px); } 
.social_share-content button#share div#share_popup .social_icon:last-child {transition-duration: 0s; } 
.social_share-content button#share:hover div#share_popup .social_icon:last-child {opacity: 1; transition-delay: 0.3s; } 
.social_share-content button#share div#share_popup .social_icon:first-child {transition-delay: 0s; } 
.social_share-content button#share:hover div#share_popup .social_icon:first-child {opacity: 1; transition-delay: 0.4s; }
#keyboard button span.material-symbols-outlined {display: block; font-size: 22px !important; color:grey; } 
#keyboard button span.icon_text {color:grey; font-size: 15px !important; display: flex; margin-top: 3px;}
#branah-keyboard .branah-key.emoji span.icon {display: block; font-size: 21px !important; } 
#branah-keyboard .branah-key.emoji span:last-child {display: none; } 
#branah-keyboard .branah-key.emoji span.icon img.emoji {filter: grayscale(1); } 
#branah-keyboard .branah-label-reference {padding: 0 4px;}
#keyboard button span {font-size: 17px !important; color: #272727; } 
button#branah-right-alt {display: none !important; } 
/*button#branah-escape {display: none !important; }*/
html,body {height: auto; }
#keyboard button.branah-recessed *,#branah-keyboard .branah-label-shift {color: #50c878 !important; }
button#branah-space span {color: grey; }


/***** Responsive Design CSS **********/

@media (max-width: 767px){

#keyboard button span.material-symbols-outlined {display: flex; font-size:22px !important; }
#keyboard button span.icon_text {display: none; } 
#keyboard button span {font-size: 15px !important; padding: 3px !important; } 
#branah-keyboard .branah-label-natural, #branah-keyboard .branah-label-shift {font-size: 19px !important; } 
#branah-keyboard .branah-label-reference {font-size: 17px !important;display: none; } 
button#branah-space {flex:60%; }
#branah-keyboard .branah-key.emoji span.icon {display: block; } 
#branah-keyboard .branah-key.emoji span:last-child {display: none; }
#branah-keyboard .branah-key.emoji span.icon img.emoji {filter: grayscale(1); font-size: 21px; }
button#branah-escape {display: none !important; }
button#branah-right-alt,button#branah-right-shift,button#branah-caps-lock,button#branah-tab {display: none !important; }
#branah-keyboard .branah-key {flex: 7%; } 
#branah-keyboard .branah-key.emoji {flex: 9%; }


}

@media (max-width: 657px){

#branah-keyboard div#branah-keyboard-emoji button.branah-key {width: 14.25%; }

}

@media (max-width: 500px){

/*#keyboard button {flex: 9%; } 
#branah-keyboard .branah-key {flex: 6.6%; }*/
button#branah-space {flex: 60%; }

}

@media (max-width: 422px){

/*#keyboard button {flex: 11%; } */
#keyboard button span.material-symbols-outlined {font-size: 20px !important; } 
#branah-keyboard .branah-label-natural, #branah-keyboard .branah-label-shift {font-size: 16px !important; } 
#branah-keyboard .branah-label-reference {font-size: 15px !important; } 
/*#branah-keyboard .branah-key {flex: 6%; } 
#branah-keyboard .branah-key.emoji {flex: 9%; } 
button#branah-space {flex: 50%;} */

}

@media (max-width: 390px){

#keyboard button {flex:10%; } 
button#branah-space {flex: 70%;}
#branah-keyboard .branah-key.emoji {flex: 10%; }


}
button.fas.btn.btn-rounded {font-family: 'Readex Pro', sans-serif; background: #E98074; border: none; color: #fffdf9; line-height: normal; box-shadow: none; border-radius: 100px; padding: 10px 25px; }
p#analyzedText {text-align:right; padding: 5px 15px !important; border-radius: 5px; }
.popup-wrapper, div#kbmenu {background: none !important; border: none !important; }
.popup-body {padding: 0 !important; }
.arabic_keyboard textarea#editor, textarea#editor1 {font-weight: 400; background: #fff; resize: vertical; max-width: 100%; overflow-x: auto; }
form#saveAsTextFile {display: inline-block; float: left; vertical-align: middle; }
form#saveAsTextFile + button.fas.btn.btn-rounded {float: right; display: inline-block; vertical-align: middle; padding: 9px 20px; font-family: 'Readex Pro'; font-weight: 500; font-size: 17px; }
form#saveAsTextFile p#action {margin: 0; }
.arabic_keyboard {display: inline-block; margin-top: 15px; }
button.fas.btn.btn-rounded:hover {background-color: #E98074; }
header .et_pb_menu__wrap ul#menu-mainmenu li a {text-decoration: none !important; }
ul.et_social_icons_container {display: none; }
.et_social_sidebar_networks {display: none; }
@media only screen and (max-width: 767px) {
  button.fas.btn.btn-rounded {font-size: 16px !important; padding: 10px 20px !important; }
}
@media only screen and (max-width: 460px) {
  button.fas.btn.btn-rounded {display: flex; margin-bottom: 10px; }
}
@media (max-width: 420px) {
  form#saveAsTextFile + button.fas.btn.btn-rounded, form#saveAsTextFile {margin: 7px !important; float: none; }
}