@font-face {
    font-family: Samim;
    src: url('https://static.aftab.cc/fonts/Samim.woff');
}
@font-face {
    font-family: Samim;
    src: url('https://static.aftab.cc/fonts/Samim-Bold.woff');
    font-weight: bold;
}
body{
    direction:rtl;
	font-family:Samim,Tahoma;
	font-size: 16px;
	background-color: #3498db;
	/*overscroll-behavior: none;*/
}
a,
a:link,
a:active,
a:visited {
    text-decoration: none;
}
a:active{
	color: orangered;
}
html{
	direction: rtl;
	/*overscroll-behavior: none;*/
	background-color: #3498db !important;
}
main{
	margin-top: 20px;

}
.container{
	max-width: 800px;
}
h1 .badge {
    font-size: .7em;
}
@media screen and (max-width: 600px){
	.p-5 {
	    padding: 1rem !important;
	}
	h1 .badge {
	    font-size: .5em;
	}
}
.center{
	text-align: center;
}

#copyright{
	direction: ltr;
	font-size: 11px;
	text-align: center;
	margin-top: 50px;
}
form{
	margin-bottom: 30px;
}

#footer{
	text-align: left;
}
.text-left{
	text-align: left;
}
#q{
}
.ltr{
	direction: ltr;
}
.bg-title{
	background-color: #3498db;
}
#translation a{
	color: black;
}
#similar a{
	color: black;
}
#google_image_result{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
}
#google_image_result img{
	width: 105px !important;
	border: 3px solid white;
	box-shadow: 0px 0px 3px gray;
	margin: 3px;
}
.pointer{
	cursor: pointer;
}

.dark{
	background-color: black !important;
	color: white;
}
.dark main{
	background-color: black;
	color: white;
}
.dark .bg-light{
	background-color: black !important;
	color: white !important;
}
.dark a{
	color: white !important;
}
.dark .dropdown a{
	color: black !important;
}
.dark .list-group-item a{
	color: black !important;
}
.dark #instant a{
	color: black !important;
}
.dark table tr td{
	color: white;
}

#lock_div{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: black;
	display: none;
	z-index: 999999;
}
.result-words{
	cursor: pointer;
}
#more a{
	margin: 5px;
}


#result{
	min-height: 40vh;
}
.video{
	width: 100%;
	min-height: 300px;
}
#logo{
	width: 150px;
}
.logoLoading{
	animation: 3s logoLoading infinite linear;
}
.logoStarting{
	animation: logoStarting 1s;
}
@keyframes logoLoading{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(720deg);
	}
}
@keyframes logoStarting{
	from{
		transform: rotate(720deg);
	}
	to{
		transform: rotate(0deg);
	}
}

#mic{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	margin: 0 auto;
	font-size: 30px;
	/*border: 1px solid black;*/
	text-align: center;
	background-color: #3498db;
	color: white;
	cursor: pointer;
}
.micPlay{
	animation: micPlay 2s infinite;
}

@keyframes micPlay{
	0%{
		background-color: #3498db;
	}
	50%{
		background-color: #ff3838;
	}
	100%{
		background-color: #3498db;
	}
}
#help{
	font-size: 0.7em;
}
#suna_history li{
	cursor: pointer;
}
#suna_history li:hover{
	color: darkred;
}
#suna_history li i{
	display: inline-block;
	width: 40px;
	text-align: center;
}
#history{
	max-height: 250px;
	overflow-y: scroll;
	line-height: 1.7;
}
#suggestions li{
	cursor: pointer;
}
#suggestions li:hover{
	color: darkred;
}
#operation{
	color: #70757a;
	direction: ltr;
	text-align: left;
}
#operation-result{
	direction: ltr;
	font-size: 2rem;
	text-align: center;
}
#singer{
}
#singer_image{
	margin: 0 auto; 
	background-size: cover; 
	width: 100px; 
	height: 100px; 
	border-radius: 50%;
	background-position: center center;
}
#singer_title{
	max-width: 350px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#filter{
	display: inline-block;
	width: 150px;
	height: 25px;
	font-size: 0.6rem;
	border-radius: 3px;
}
#next{
	color: white;
	float: right;
	font-size: 5rem;
	text-shadow: 1px 1px 1px #ddd;
	cursor: pointer;
}
#prev{
	color: white;
	float: left;
	font-size: 5rem;
	text-shadow: 1px 1px 1px #ddd;
	cursor: pointer;
}