.msg .arm-copyright {color: #f9f9f9;font-size: 10px;position: absolute;left: 5px;top: 5px;display: unset!important;}
.msg .arm-copyright-text {display: block!important;color: #f9f9f9;font-size: 12px;text-align: center;font-weight: 800}
.msgtextcenter0,.msgtextcenter1,.msgtextcenter2,.msgtextcenter3,
.msgtextcenter4,.msgtextcenter5,.msgtextcenter6,.msgtextcenter7,.msgtextcenter8,.msgtextcenter9,.msgtextleft
{display: none}
.copyright {visibility: hidden;font-size: 5px}


body {
	-youbkit-touch-callout: none; /* iOS Safari */
	-youbkit-user-select: none; /* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE 10+ and Edge */
	overflow: hidden;
	user-select: none;
	font-size: 16px;
	background-image:url(background.jpg) ;
	background-color: #EAEAEA;
	background-size: cover;
	background-attachment: fixed;
}

.convHistory {
	float:left;
	position: relative;
	width: 100%;
	height: calc(100vh - 15px);
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: 60px;
}
.rayan {
	width: 100%;
	height: 100vh;
	padding-top: 60px;
}

@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/rayan.eot);
	src: url(../fonts/rayan.eot?#iefix) format('embedded-opentype'), url(../fonts/rayan.woff2) format('woff2'), url(../fonts/rayan.woff) format('woff'), url(../fonts/rayan.ttf) format('truetype')
}

* {
	margin: 0px;
	padding: 0px;
}
div#finder {
	background: white;
}

body , a , button , input {font-family: 'IRANSans';}
a {
	text-decoration: none;
}

button {
	cursor: pointer;
}

button, input[type="search"], input[type="text"] {
	border: none;
	outline: none;
}
.scrollloading {position: fixed;z-index: 1;opacity: 0.8;left: 0;right: 0;top: 0;height: 100%;background-image: url("loading.svg");background-position: center;background-repeat: no-repeat;background-color: #ffffff;display: none}
input[type="checkbox"] {
	margin: 7px;
	margin-right: 15px;
}


.alert {
	padding: 12px 20px;
	background-color: rgba(0,0,0,0.6);
	text-align:right;
	color: white;
	position: absolute;
	bottom:0;
	line-height: 30px;
	left: 0;
	right: 0;
}

/* The close button */
.closebtn {
	margin-right: 15px;
	color: white;
	font-weight: bold;
	float: left;
	text-align: left;
	font-size: 22px;
	cursor: pointer;
	transition: 0.3s;
}
.addbtn {
	margin-right: 15px;
	color: white;
	font-weight: bold;
	float: left;
	background: #be8658;
	text-align: center;
	font-size: 14px;
	padding: 2px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
	color: black;
}

/* FIRST, THE OVERLAY ELEMENTS */

.alerts {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 9999;
	padding: 10px;
	color: #666;
	border-radius: 4px;
	background: #FFF;
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
	display: none;
}

/* small conversation menu */
.moreMenu {
	position: absolute;
	top: 70px;
	right: 0px;
	z-index: 10;
	padding: 10px;
	color: #666;
	border-radius: 0 0 0 4px;
	background: #FFF;
	display: none;
	border-top: 1px solid #DDD;
}

.moreMenu .option {
	width: 150px;
	height: 50px;
	display: block;
	background: #FFF;
	font-size: 14px;
	text-align: left;
	border-radius: 4px;
	padding-left: 10px;
}

.moreMenu .option:hover {
	background: #DDD;
}

.moreMenu .option:nth-last-child(1) {
	margin-top: 3px;
}

/* switch to mobile version screen */
.switchMobile {
	position: absolute;
	width: 65%;
	height: auto;
	padding: 10px;
	background: #FFF;
	top: 75px;
	left: 0px;
	right: 0px;
	margin: auto;
	border-radius: 4px;
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.1);
	display: none;
}

.switchMobile .title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
}

.switchMobile .desc {
	font-size: 14px;
	font-weight: 300;
	margin-bottom: 25px;
}

.switchMobile .okay {
	float: right;
	width: 80px;
	font-size: 16px;
	font-weight: 600;
	background: #419fd9;
	color: #fff;
	border-radius: 4px;
	padding: 10px;
}

/* side menu */
.menuWrap {
	position: absolute;
	width: 30%;
	min-width: 240px;
	max-width: 320px;
	height: 100%;
	z-index: 3;
	display: none;
}

.menu {
	position: relative;
	left: -320px;
	width: 100%;
	height: 100vh;
	float: left;
	background: #FFF;
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);
	opacity: 0;
}

.me {
	position: relative;
	width: calc(100% - 50px);
	height: 140px;
	background: #419fd9;
	padding: 15px 25px;
	margin-bottom: 15px;
}

.me .image {
	width: 70px;
	height: 70px;
	background: #FFF url(http://4.bp.blogspot.com/-BHhUazKytmw/VbCfWPqrOJI/AAAAAAAAB7c/qj6WVX3du-s/s1600/51b91bba5a3fd9b6c8b9c53bc0ab6c65.jpg) no-repeat center;
	background-size: cover;
	border-radius: 100%;
	cursor: pointer;
}

.me .settings {
	position: absolute;
	right: 20px;
	bottom: 65px;
	width: 40px;
	height: 40px;
	padding-top: 2px;
	color: #FFF;
	border-radius: 100%;
	background: rgba(0, 0, 0, 0.15);
}

.me .settings:hover {
	background: rgba(0, 0, 0, 0.35);
}

.me .cloud {
	position: absolute;
	right: 20px;
	bottom: 15px;
	width: 40px;
	height: 40px;
	color: #FFF;
	border-radius: 100%;
	background: rgba(0, 0, 0, 0.09);
}

.me .cloud:hover {
	background: rgba(0, 0, 0, 0.35);
}

.me .myinfo {
	position: absolute;
	bottom: 15px;
	font-size: 14px;
	color: #FFF;
}

.myinfo .name {
	font-weight: 600;
	margin-bottom: 5px;
}

.myinfo .phone {
	font-weight: 300;
}

nav button {
	width: 100%;
	height: 45px;
	background: #FFF;
	text-align: left;
	padding-left: 20px;
	color: #666;
}

nav {
	float: left;
	width: 100%;
	height: auto;
	max-height: 350px;
	overflow-x: hidden;
	overflow-y: auto;
}

nav button:hover {
	background: #EEE;
}

nav button > i {
	color: #999;
	float: left;
}

nav button > span {
	display: inline-block;
	margin-top: 5px;
	margin-left: 20px;
	font-weight: 600;
	font-size: 14px;
}

.info {
	position: absolute;
	left: 20px;
	bottom: 15px;
	font-size: 12px;
	color: #666;
}

/* configuration screen */
.config {
	position: absolute;
	width: 50%;
	height: 100vh;
	left: 0px;
	right: -200vw;
	top: 0px;
	margin: auto;
	background: #DDD;
	overflow-x: hidden;
	overflow-y: auto;
	display: block;
	z-index: 520;
	opacity: 0;
}

.confTitle {
	font-size: 24px;
	font-weight: 600;
	color: #444;
	margin: 10px 0px 15px 0px;
}

.configSect {
	float: left;
	width: calc(100% - 60px);
	padding: 15px 30px;
	margin-bottom: 10px;
	background: #FFF;
}

.profile .image {
	width: 140px;
	height: 140px;
	background: #FFF url(http://4.bp.blogspot.com/-BHhUazKytmw/VbCfWPqrOJI/AAAAAAAAB7c/qj6WVX3du-s/s1600/51b91bba5a3fd9b6c8b9c53bc0ab6c65.jpg) no-repeat center;
	background-size: cover;
	border-radius: 100%;
	float: left;
	margin-right: 30px;
}

.side {
	width: auto;
	height: 110px;
	float: none;
	position: relative;
}

.side .name {
	font-size: 18px;
	font-weight: 600;
}

.side .pStatus {
	margin-top: 5px;
	font-size: 14px;
	font-weight: 300;
}

.profile .changePic, .profile .edit {
	width: auto;
	font-size: 16px;
	font-weight: 600;
	background: #419fd9;
	color: #fff;
	border-radius: 4px;
	padding: 10px;
}

.profile .edit {
	margin-left: 10px;
	background: #FFF;
	color: #999;
}

.profile .edit:hover {
	color: #419fd9;
}

.second ul {
	float: none;
	margin-left: -7px;
	list-style-type: none;
}

.second ul li {
	margin: 7px;
}

.second .blue {
	color: #419fd9
}

.second label {
	display: block;
	clear: both;
}

.second .information {
	margin-bottom: 30px;
}

.check {
	position: relative;
	float: left;
	display: block;
	width: 38px;
	height: 14px;
	background: #BBB;
	cursor: pointer;
	border-radius: 15px;
	transition: all 0.2s ease-in-out;
}

.check > .tracer {
	width: 16px;
	height: 16px;
	background: #FFF;
	border: 2px solid #BBB;
	border-radius: 100%;
	float: left;
	margin-top: -3px;
	transition: all 0.2s ease-in-out;
}

#checkNight, #deskNotif, #showSName, #showPreview, #playSounds {
	display: none;
}

.toggleTracer:checked ~ .check {
	background: #419fd9;
}

.toggleTracer:checked ~ .check > .tracer {
	border-color: #419fd9;
	margin-left: 18px;
}

.optionWrapper {
	display: block;
	width: 100%;
	height: 32px;
}

.optionWrapper p {
	float: left;
	margin-top: 3px;
	margin-left: 15px;
	font-size: 14px;
	color: #444;
}

/* dark overlay element */
.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 2;
	display: none;
}

/* ----------------- */
/* MAIN APP ELEMENTS */
/* ----------------- */



header {
	width: 100%;
	height: 70px;
	background: #FFF;
}

.trigger {
	float: left;
	width: 32px;
	height: 32px;
	margin: 20px 15px;
	margin-bottom: 0px;
	color: #BBB;
	cursor: pointer;
	opacity: 0.6;
	background: none;
}

.trigger:hover {
	opacity: 1;
}

.trigger > svg {
	width: 24px;
	height: 24px;
	fill: #888;
}

.searchChats {
	width: calc(100% - 85px);
	height: 40px;
	background: #EEE;
	float: left;
	padding: 8px;
	margin-top: 14px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
}

.searchChats:focus {
	color: #444;
	border: 2px solid #419fd9;
	background: rgb(243, 243, 243);
}

.chats {
	width: 100%;
	height: calc(100vh - 70px);
	float: left;
	overflow-x: hidden;
	overflow-y: auto;
}

.chatButton {
	float: left;
	width: 100%;
	height: 80px;
	background: #FFF;
	color: #555;
	cursor: pointer;
	overflow: hidden;
}

.chatButton:hover {
	color: #555;
	background: #EEE;
}

.active, .active:hover {
	color: #FFF;
	background: #419fd9;
}

.chatInfo {
	float: left;
}

.chatInfo p {
	float: left;
}

.chatInfo .image {
	position: absolute;
	width: 55px;
	height: 55px;
	background: #DDD url(https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg) no-repeat center;
	background-size: cover;
	border-radius: 100%;
	margin: 13px 13px;
}

.chatInfo .my-image {
	background-image: url(https://avatars1.githubusercontent.com/u/21313332?s=460&v=4);
}

.chatInfo .name {
	float: left;
	font-weight: 600;
	margin-left: 80px;
	margin-top: 18px;
}

.chatInfo .message {
	float: left;
	clear: left;
	margin-left: 80px;
	margin-top: 7px;
}

.status {
	width: 60px;
	height: 100%;
	position: relative;
	float: right;
}

.status .fixed {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: none;
}

div[class~="normal"] > .fixed {
	display: none;
}

div[class~="normal"] > .count {
	right: 10px;
	bottom: 7px;
}

div[class~="onTop"] > .fixed {
	display: block;
	width: 24px;
	height: 24px;
	fill: #FFF;
}

div[class~="onTop"] > .count {
	right: 49px;
	bottom: 7px;
	background: #FFF;
	color: #419fd9;
}

.status .count {
	position: absolute;
	right: 49px;
	bottom: 7px;
	width: auto;
	height: auto;
	padding: 7px;
	border-radius: 20px;
	color: #222;
	background: rgba(0, 0, 0, 0.12);
}

.status .date {
	position: absolute;
	right: 12px;
	top: 12px;
	font-size: 12px;
}

.status .read {
	position: absolute;
	right: 53px;
	top: 6px;
}

.rightPanel .topBar {
	position: fixed;
	width: 100%;
	top: 0;
	height: 60px;
	right: 0;
	z-index: 9;
	left: 0;
	background: #be8658;
	color: white;
}
.rightPanel .user_number {display: block;font-size: 10px;margin-top: 2px;letter-spacing: 2px;text-align: right;font-weight: 400;}
.rightPanel .user_caption {display: block;font-size: 10px;margin-top: 2px;text-align: right;font-weight: 400;}
.logo-chat {background-color: #ebebed;padding:5px;border-radius:5px;margin:10px 0 0 10px;height:34px}
.leftSide {
	display: inline-block;
	clear: none;
	float: right;
	width: 100%;
}

.leftSide .chatName {
	float: right;
	font-size: 13px;
	margin-right: 10px;
	margin-top: 10px;
	color: #FFFFFF;
	font-weight: 400;
	cursor: default;
}

.chatName > span {
	font-size: 12px;
	font-weight: 500;
	color: #BBB;
	margin-right: 10px;
}

.leftSide .chatStatus {
	float: right;
	clear: right;
	margin-right: 30px;
	margin-top: 5px;
	color: #419fd9;
	font-weight: 300;
	cursor: default;
}

.rightSide {
	display: inline-block;
	clear: none;
	float: right;
	margin-right: 20px;
}

.tbButton, .otherTools .toolButtons {
	width: 35px;
	height: 35px;
	margin-top: 10px;
	background: #FFF;
	color: #888;
	border-radius: 6px;
	margin-left: 6px;
	float: left;
}
.expired-day {font-size: 11px;float: left;height: 31px;margin-top: 10px;padding: 2px 8px;background: #FFF;color: #888;border-radius: 6px;display: inline-block;direction: rtl;margin-left: 5px;text-align: center}
.expired-day span {font-size: 8px;margin-right: 2px}
.expired-day small {display: block;font-size: 8px}

.tbButton i, .otherTools .toolButtons i{	line-height: 35px!important;font-size: 22px}
.tbButton:hover, .otherTools .toolButtons:hover {color: #555;background: #DDD;}
.login-page {direction: rtl;vertical-align: center;align-items: center;align-content: center;height: 100vh;align-self: center;display: grid;}
.login-page .box {z-index: 3;background: rgba(255,255,255,0.7);width: 220px;border-radius: 5px;margin: 0 auto;padding: 20px 15px;box-shadow: 0 3px 11px -3px rgba(0, 0, 0, .1);}
.login-page .bx{display:block;font-size:75px;margin:0 auto;text-align:center;color: #be8658;}
.login-page h3 {font-size:14px;display:block;margin:10px auto;text-align:center}
.login-page .error {font-size: 11px;
	display: block;
	margin: 10px auto;
	text-align: center;
	color: #fff;
	padding: 8px 10px;
	width: 180px;
	border-radius:5px;
	background: #c0392b;}
.login-page button  {width: 100%;font-size:12px;display:block;padding:10px;text-align:center;background:#be8658;margin:10px auto;border-radius:5px;color:#FFFFFF;	transition: all 0.15s ease-in-out;}
.btn-password  {width: 100%;font-size:10px;display:block;padding:10px 0;text-align:center;background:#EAEAEA;color:#6a6a6a;margin:10px auto;border-radius:5px;	transition: all 0.15s ease-in-out;}
.login-page .timer {background:#EAEAEA;color:#222}
.login-page .timer:hover {color:#FFFFFF}
.login-page button:hover , .login-page a:hover {background:#222222}
.login-page ul {position: absolute;bottom:15px;left:0;right:0;display: block;}
.login-page ul li {font-size:9px;display:block;text-align:right;margin-bottom:5px;text-align:center}
.login-page .input-number {padding:12px 0;display:block;margin:0 auto;border:1px solid #EAEAEA;border-radius:5px;width:100% ;text-align:center;direction:ltr!important;}
.login-page .input-number-2 {padding:12px 0;display:block;margin:8px auto;border:1px solid #EAEAEA;border-radius:5px;width:100% ;text-align:center;direction:ltr!important;}
.login-page .captcha-input {padding:12px 0;display:block;margin:0 auto;border:1px solid #EAEAEA;border-radius:5px;width:100% ;text-align:center;direction:rtl!important;}
.captcha-img img{height: 45px;padding:0px;display:block;margin:10px auto;border:1px solid #EAEAEA;border-radius:5px;width:100% }



.messagedate {color:#666666;font-size: 9px;border-bottom: 1px solid #eaeaea;padding-bottom: 8px;margin-bottom: 8px}
.messagedate .message-title {color:#be8658;display: inline-block;margin-left: 3px;font-size: 8px}
.messagedate .message-time {display: inline-block;margin-left: 6px}
.messagedate .message-date {display: inline-block;direction: ltr;margin-left: 6px}
.messagedate .message-number {display: inline-block;}

.messageSent.darkbg .messagedate {color:#FFFFFF;border-bottom: 1px solid #a3724a;}
.messageSent.darkbg .message-title {color:#eaeaea;}

.msg {
	position: relative;
	width: auto;
	min-width: 200px;
	max-width: 350px;
	height: auto;
	padding: 15px;
	margin: 15px;
	margin-bottom: 0px;
	background: #FFF;
	border-radius: 7px;
	clear: both;
}

.messageReceived {float: left;background: #FFF;}
.messageSent {text-align:right;direction:rtl;box-shadow: 0 3px 11px -3px rgba(0, 0, 0, .1);background: rgba(255,255,255,0.9);margin-right: auto;margin-left: auto}
.messageSent a {font-size: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.messageSent a[data-fancybox="gallery"]{display: block}
.messageSent video {border-radius: 8px}
.messageSent.vote  h5 {font-size: 21px}
.messageSent.vote  img {width: 100%;border-radius: 6px }
.messageSent.vote  p {margin-top: 10px;margin-bottom: 10px }
.messageSent.vote .vote-radio {display: block;margin-bottom: 10px;border-radius: 6px;background: #EAEAEA;padding: 7px}
.messageSent.vote .vote-radio input {vertical-align: middle;margin-left: 4px}
.messageSent.vote .vote-radio label {font-size: 14px; }
.messageSent.vote .vote-btn {margin-bottom: 10px;font-size: 14px;background: #0eb582;color: #fff;border: 0;border-radius: 6px;padding: 10px 5px;display: block;width: 100%;}


.messageSent.darkbg {background: #be8658;color: #FFFFFF}
.messageSent.darkbg span ,
.messageSent.darkbg > .timestamp, .messageSent.darkbg > .readStatus {color: #FFFFFF}
.messageSent .file_download {background: #FFFFFF;margin-bottom: 10px;border: 1px solid #be8658;color:#be8658;font-size: 13px;border-radius: 5px;padding: 10px 0;text-align: center;width: 100%;display: block;}
.messageSent .file_download:before {content: "\ece9";font-family: 'boxicons'!important;margin-right: 5px;font-size: 19px;vertical-align: middle;}
.messageSent > .timestamp, .messageSent > .readStatus {
	bottom: 10px;
	right: 8px;
	color: #b5b5b5;
	user-select: none;
	font-size: 10px;
}

.messageSent > .readStatus {
	position: absolute;
	bottom: 10px;
	right: 12px;
}


/* THE REPLY BAR CSS */

.replyBar {
	width: 100%;
	height: 70px;
	float: left;
	background: #fff;
}

.replyBar .attach {
	width: 70px;
	height: 70px;
	color: #777;
	background: #FFF;
	float: left;
}

.replyBar .attach:hover {
	color: #555;
	background: #DDD;
}

.replyBar .d45 {
	transform: rotate(45deg);
	font-size: 32px;
}

.replyBar .replyMessage {
	width: calc(100%);
	float: left;
	height: 70px;
	padding: 0px 8px;
	font-size: 16px;
}

.replyBar .otherTools {
	float: right;
	width: 120px;
	height: 70px;
}

.emojiBar {
	display: none;
	position: absolute;
	width: 325px;
	height: 200px;
	padding: 10px;
	right: 30px;
	bottom: 80px;
	border: 2px solid #DDD;
	border-radius: 3px;
	background: #FFF;
}

.emoticonType {
	width: 100%;
	height: 50px;
}

.emoticonType button {
	width: 105px;
	height: 36px;
	font-weight: 600;
	color: #555;
	background: none;
}

.emoticonType button:hover {
	color: #FFF;
	background: #419fd9;
}

.emojiList, .stickerList {
	width: 100%;
	height: 150px;
	overflow-x: hidden;
	overflow-y: auto;
}

.emojiList .pick {
	width: 50px;
	height: 50px;
	background: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
	transition: all 0.15s ease-in-out;
}

.emojiList .pick:hover {
	background: #DDD;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}

.stickerList .pick {
	width: 80px;
	height: 80px;
	background: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65%;
	transition: all 0.15s ease-in-out;
}

.stickerList .pick:hover {
	background: #DDD;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65%;
}


/* hidden, while not complete */
.stickerList {
	display: none;
}

/* CSS FOR THE EMOJI IMAGES, JUST SOME */

#smileface {
	background-image: url(https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/grinning-face_1f600.png);
}

#grinningface {
	background-image: url(https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/grinning-face-with-smiling-eyes_1f601.png);
}

#tearjoyface {
	background-image: url(https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/face-with-tears-of-joy_1f602.png);
}

#rofl {
	background-image: url(https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/rolling-on-the-floor-laughing_1f923.png);
}

#somface {
	background-image: url(https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/smiling-face-with-open-mouth_1f603.png);
}

#swfface {
	background-image: url(https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/smiling-face-with-open-mouth-and-smiling-eyes_1f604.png);
}

/* SOLVING RESPONSIVE DESIGN ISSUES */

@media screen and (max-width: 1180px) {
	.config {
		width: 60%;
	}
}

@media screen and (max-width: 980px) {
	.config {
		width: 90%;
	}
}

@media screen and (max-width: 840px) {
	.leftPanel {
		width: 40%;
	}

}

@media screen and (max-width: 640px) {
	body {
		font-size: 14px;
	}

	.leftPanel {
		width: 45%;
	}


	.msg {
		width: calc(100% - 60px);
		min-width: unset;
		max-width: unset;
	}



}

@media screen and (max-width: 640px) {
	.leftPanel {
		width: 45%;
	}




	.profile .changePic, .profile .edit {
		font-size: 14px;
		font-weight: 500;
	}

	.profile .edit {
		margin-left: 5px;
	}
}


.finder {
	position: fixed;
	top: -62px;
	text-align: center;
	right: 0;
	left: 0;
	z-index: 999;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	height: 50px;
	background: #fff;
	font-family: 'IRANSans';
	font-size: 14px;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	padding: 5px;
	transition: top 0.15s ease-out;
}

.finder.active {
	top: 0;
}

.finder-input {
	flex-grow: 1;
	width: 0;
	height: 40px;
	border: none;
	text-align: right;
	padding: 0px 20px;
	font-family: 'IRANSans';
	outline: none !important;
}

.finder-input.not-found {
	color: #e7353f;
}

.btn-finder {
	width: 40px;
	height: 40px;
	font-size: 20px;
	margin-top: 4px;
	text-align: center;
	padding: 0;
}
.btn-finder i {vertical-align: middle}
.finder-input,
.btn-finder:not(:last-child) {
	margin-right: 5px;
}

.finder-count {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #888;
	border-right: 1px solid #e5e5e5;
	margin-right: 5px;
	padding-right: 20px;
	white-space: nowrap;
}

.btn-finder,
.finder-count {
	flex-shrink: 0;
	flex-grow: 0;
}

.highlight {
	background: #ff8;
}

.highlight.active {
	background: #ffd71b;
}
/* Modal */
.modal {
	background-color: rgba(0,0,0,.65);
	display: none;
	overflow: auto;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Modal Content */
.modal-content {
	position: relative;
	top: 10%;
	z-index: 999999;
	direction: rtl;
	width: calc(100% - 30px);
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.modal-animated-in {
	animation: totop-in .3s ease;
}
.modal-animated-out {
	animation: totop-out .3s ease forwards;
}
.modal-header {
	background-color: #be8658;
	height: 40px;
	line-height: 40px;
	padding-right: 20px;
}
.modal-content .close {
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.2);
	width: 60px;
	height: 40px;
	color: #fff;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
}
.modal-content .close:hover {
	background-color: #fff;
	color: #222;
}
/* Modal Body */
.modal-body {padding: 20px;}
.modal-body p {font-size: 12px;margin: 10px 0}
.modal-body button {font-size: 14px;display: block;text-align: center;background: #be8658;width: 100%;color: #ffffff;border-radius: 8px;margin:10px 0;padding: 10px 0}
.modal-body input , .modal-body label , .modal-body textarea {display: block;width: calc(100% - 20px);font-family: IRANSans;}
.modal-body label {font-size: 12px;margin: 10px 0}
.modal-body input , .modal-body textarea {padding: 10px;border-radius: 8px;border:1px solid #999999;font-size: 14px}
.modal-header h3{color: #fff;font-size: 14px;font-weight: 400;}
@keyframes totop-in {
	0% {top: 600px;opacity: 0;}
	100% {top: 0;opacity: 1;}
}
@keyframes totop-out {
	0% {top: 0px;opacity: 1;}
	100% {top: -100%;opacity: 0;}
}


.telegram-float-button {z-index: 2;background: #0088cc;height: 40px;width: 40px;padding: 0;line-height: 40px;text-align: center;border-radius: 8px;position: fixed;bottom: 15px;left: 15px;color: #fff;text-decoration: none;}
.telegram-float-button i {font-size: 25px;vertical-align: middle;}

.tamdid-float-button {z-index: 2;background: #e74c3c;height: 40px;padding:0 15px;line-height: 40px;text-align: center;border-radius: 8px;position: fixed;bottom: 15px;left: 60px;color: #fff;text-decoration: none;}
.tamdid-float-button i {font-size: 25px;vertical-align: middle;margin-right: 8px}
.tamdid-float-button span {font-size: 12px;}

.scroll-float-button {z-index: 2;background: #4CAF50 ;height: 40px;padding:0 15px;line-height: 40px;text-align: center;border-radius: 8px;position: fixed;bottom: 15px;right: 15px;color: #fff;text-decoration: none;}
.scroll-float-button i {font-size: 25px;vertical-align: middle;margin-left: 8px}
.scroll-float-button span {font-size: 12px;}


@keyframes pulse {
	to {
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}
}