@import url('https://fonts.googleapis.com/css?family=Lateef&display=swap');

@font-face {
    font-family: 'a_akunarregular';
    src: url('../font/akunar.eot');
    src: url('../font/akunar.eot?#iefix') format('embedded-opentype'),
         url('../font/akunar.woff') format('woff'),
         url('../font/akunar.ttf') format('truetype'),
         url('../font/akunar.svg#a_kunarregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
.menu
/* layout main menu */
 {
	clear: both; */
    float: left;
    
    padding-bottom: 1em;
    width: 100%;
}
ul.menu {
    display: table;
    margin-left: auto;
    margin-right: 0em;
}
.menu li
/* horizontal menu layout */
 {
	display: inline-block;
    margin-right: 10px;
    background-color: #565656;
}
.menu li a:hover
/* link style on-mouse-over */
 {
    color:#FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
}
.menu li:hover
/* button style on-mouse-over */
 {
    background-color: #799924;
}
.menu li a
/* link style */
 {
    color:#FFFFFF;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 0.7em 1em 0.7em 1em;
}
.menu li.active a
/* active menu item style */
 {
    color:#FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
}
.menu li.active
/* active menu button style */
 {
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    background-color: #dd417f;
}
.maininput
{
	padding: 20px;
    width: 60%;
    border: none;
    border-radius: 20px;
    margin-right: -50px;
}

.search
{
	padding: 20px;
    border: none;
    border-radius: 0px 20px 20px 30px;
    background: #799924;
    color: white;
    width: 15%;
}
.card .card-header-success
{
	background: linear-gradient(60deg, #546f0e, #799924);
}
.navbar-brand > img
{
	width: 50px;
}

.coreinput
{
	width: 90%;
    background: none;
    border: none;
    font-size: 35px;
    font-family: Roboto Slab;
}

.ui-menu .ui-menu-item
{
	    padding: 2px 0px 2px 5px;
	    width: auto;
	    font-family: Tahoma;
	    font-size:12px;
}

.corepashtoinput
{
    background: none;
    border: none;
    font-size: 38px;
    width: 90%;
}
#mynav li
{
	width: 33%;
	text-align: center;
}
#mynav li > a
{
	font-family:Mirza;
	font-size: 25px;
	font-weight: normal;
}
#myhead
{
	background-image: url('../img/bg8.jpg');
	margin-top: -25px;
	height: 50vh;
}
.sw
{
	width: 20px;
    background-color: white;
    height: 20px;
    display: inline-block;
    border-radius: 100px;
    cursor: pointer;
}
.sw:hover
{
	
    background-color: #799924;
    
}
.switcher
{
	display: flex;
}
.myfooter
{
	position: fixed;
    bottom: 0;
    margin-top: -23px;
    padding: 25px;
    color: white;
    z-index: 500;
    font-size: 12px;
}
#pashto
{
	direction: rtl;
    font-family: Lateef;
    font-size: 36px;
    padding: 3px 60px 9px 0px;
}
#keyboard
{
	position: absolute;
    margin: -98px 0px 0px 15px;
    color: #3a3a3a;
    font-size: 36px;
    cursor: pointer;
}
.whiter
{
	background: white;
	padding: 15px;
	box-shadow: 3px 5px 6px 0px #0000000d;
	color: black;
	font-size: 13px;
	font-family: Roboto Slab,Times New Roman,serif;
}
.whiter h3
{
	margin: 0px;
	font-family: Roboto Slab,Times New Roman,serif;
}
.whiter h1
{
	font-family: Roboto Slab,Times New Roman,serif;
	font-size: 15px;
	margin: 0px;
}
.randomtitle
{
	font-size: 60px;
	text-align: center;
	font-family: Lateef;
}
.randomphonetic
{
	font-size: 20px;
	text-align: center;
	font-family: Roboto Slab,Times New Roman,serif;
}

.randomword
{
	font-size: 20px;
	text-align: center;
	font-family: Roboto Slab,Times New Roman,serif;
}
.pashto_result
{
	text-align: right;
    font-size: 27px;
    font-family: a_akunarregular;
    padding: 0px 50px 20px 0px;
    margin-bottom: 40px;
    direction: rtl;
}
.roman_result
{
	font-size: 27px;
    font-family: a_akunarregular;
    padding: 25px 0px 25px 50px;
    margin-bottom: 40px;
}
.english_result
{
	font-size: 27px;
    font-family: a_akunarregular;
    padding: 0px 0px 0px 2px;
    margin-bottom: 40px;
}
.word
{
	text-align: right;
    font-size: 27px;
    font-family: a_akunarregular;
    direction: rtl;
    margin-bottom: 10px;
}
.grammer
{
	margin: 5px 0px 0px 0px;
    font-size: 11px;
    font-family: Tahoma;
    position: absolute;
    background: #f5f5f5;
    padding: 0px 10px 0px 10px;
    border-radius: 14px;
    color:#777777;
}
.grammereng
{
	
    font-size: 11px;
    font-family: Tahoma;
    margin: 0px;
    color:#777777;
}
.phonetics
{
	font-size: 20px;
    font-family: Georgia;
}

a
{
	color: black;
}
.playsound
{
	font-size: 40px;
    color: #4e4e4e;
    float: right;
    z-index: 20;
    margin: 10px -51px 0px 7px;
    cursor: pointer;
    position: absolute;
}
.playsoundroman
{
	font-size: 40px;
    color: #4e4e4e;
    float: right;
    z-index: 20;
    margin: 8px 0px 0px -50px;
    cursor: pointer;
    position: absolute;
}
.playsound:hover, .playsoundroman:hover
{
	color: #789924;
}

.footer{
	background:#292929;
	color: #888888;
	padding: 30px;
	text-align: left;
	font-size: 12px;
	font-weight: 500;
}
.footer p
{
	font-size: 12px;
	font-family: Tahoma;
	line-height: 18px;
}
.footer ul li
{
	display: block;
}
	@media (max-width: 768px)
	{
		#wdcontainer
		{
			padding-right: 0px;
			margin-top: 40px;
		}

		#btnlang
		{
			text-align:center;
			padding: 10px;
		}
		.coreinput
		{
			font-size: 18px;
			width: 80%;
		}
		.scricon 
		{
			font-size: 16px;
		}
		.corepashtoinput
		{
		    font-size: 18px;
		    width: 80%;
		}

		#mynav li > a
		{
			font-size: 16px;
		}
		.maininput
		{
			padding: 20px;
		    width: 80%;
		    border: none;
		    border-radius: 20px;
		    margin-right: -50px;
		}

		.search
		{
			padding: 20px;
		    border: none;
		    border-radius: 0px 20px 20px 30px;
		    background: #799924;
		    color: white;
		    width: 25%;
		}
		.keyboard
		{
			width: 100%;
			
		}

	}

.keyboard{
	position: absolute;
    z-index: 1000;
    cursor: move;
}
input::-webkit-input-placeholder {
	padding: 0px 0px 10px 0px;
}

.ui-widget.ui-widget-content
{
	border: 1px solid #ffffff;
    border-radius: 10px;
    box-shadow: 2px 2px 8px 0px #0000002e;
}