@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700&display=swap&subset=latin-ext";
@import "fontiran.css";
:root {
--body-bg-color:#e5ecef;
--theme-bg-color:#fff;
--settings-icon-hover:#9fa7ac;
--developer-color:#f9fafb;
--input-bg:#f8f8fa;
--input-chat-color:#a2a2a2;
--border-color:#eef2f4;
--body-font:Manrope, sans-serif;
--body-color:#273346;
--settings-icon-color:#c1c7cd;
--msg-message:#969eaa;
--chat-text-bg:#f1f2f6;
--theme-color:#0086ff;
--msg-date:#c0c7d2;
--button-bg-color:#f0f7ff;
--button-color:var(--theme-color);
--detail-font-color:#919ca2;
--msg-hover-bg:rgba(238,242,244,0.4);
--active-conversation-bg:linear-gradient(to right, rgba(238,242,244,0.4) 0%, rgba(238,242,244,0) 100%);
--overlay-bg:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
--chat-header-bg:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 78%, rgba(255,255,255,0) 100%)
}
body {
	font-family: IRANSans!important;
	font-weight: 300;
	background-color: #E2E2E2;
	margin: 0
}
h1, h2, h3, h4, h5, h6, input, textarea {
	font-family: IRANSans!important
}
h1 {
	font-weight: 700
}
.text-right {
	text-align: right
}
.text-center {
	text-align: center
}
.text-left {
	text-align: left
}
.text-small {
	font-size: .8em
}
.text-xsmall {
	font-size: .6em
}
.text-large {
	font-size: 1.2em
}
.text-xlarge {
	font-size: 1.4em
}
.text-underline {
	text-decoration: underline
}
.text-ultralight {
	font-weight: 200
}
.text-light {
	font-weight: 300
}
.text-regular {
	font-weight: 400
}
.text-medium {
	font-weight: 500
}
.text-bold {
	font-weight: 700
}
.text-black {
	font-weight: 900
}
blockquote {
	font-weight: 500;
	padding: 10px;
	border: 1px dashed #666
}
.mainbox {
	width: 100%;
	background-color: #EFEFEF;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #FF3
}
.mainboxnegativ {
	width: 100%;
	background-color: #000;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #FF3;
	color: #F9F9F9
}
.mainbox2 {
	font-size: 1em;
	width: 90%;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px
}
.mainbox3 {
	width: 100%;
	background-color: #b8b8b8;
	display: table;
	margin-bottom: 30px;
	border-right: 8px solid #bd70ff
}
.mainbox2negativ {
	font-size: 1em;
	color: #F9F9F9;
	background-color: #000;
	padding-right: 20px
}
.farsiparagraph {
	font-size: 1em;
	width: 47%;
	float: right;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px
}
.englishparagraph {
	font-size: 1em;
	width: 47%;
	float: left;
	direction: ltr;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px
}
.rightbox {
	width: 60%;
	padding-right: 20px;
	padding-left: 5px;
	float: right;
	margin-left: 10px;
	margin-bottom: 0;
	min-width: 0;
	background-color: #F7F7F7
}
.titelbox {
	width: 60%;
	padding-right: 25px;
	padding-left: 0;
	float: right;
	margin-left: 10px;
	margin-bottom: 0;
	min-width: 0;
	background-color: #F2F2F2;
	color: #4B4B4B
}
.lefttbox {
	padding-right: 20px;
	padding-left: 4px;
	float: right;
	margin-bottom: 10px;
	min-width: 0
}
.alphabet {
	width: 35%;
	float: left;
	font-size: 21em;
	text-align: center;
	font-weight: 500;
	color: #999
}
.alphabet2 {
	width: 35%;
	float: left;
	direction: ltr;
	font-size: 1.6em;
	text-align: left;
	font-weight: 500;
	color: #333;
	margin-top: 100px
}
.footer {
	font-weight: 300;
	font-size: .7em;
	text-align: center;
	direction: ltr;
	margin-bottom: 0;
	padding-bottom: 0
}
[data-theme=purple] {
--theme-color:#9f7aea;
--button-color:#9f7aea;
--button-bg-color:rgba(159,122,234,0.12)
}
[data-theme=green] {
--theme-color:#38b2ac;
--button-color:#38b2ac;
--button-bg-color:rgba(56,178,171,0.15)
}
[data-theme=orange] {
--theme-color:#ed8936;
--button-color:#ed8936;
--button-bg-color:rgba(237,137,54,0.12)
}
.dark-mode {
--body-bg-color:#1d1d1d;
--theme-bg-color:#27292d;
--border-color:#323336;
--body-color:#d1d1d2;
--active-conversation-bg:linear-gradient(to right, rgba(47,50,56,0.54), rgba(238,242,244,0) 100%);
--msg-hover-bg:rgba(47,50,56,0.54);
--chat-text-bg:#383b40;
--chat-text-color:#b5b7ba;
--msg-date:#626466;
--msg-message:var(--msg-date);
--overlay-bg:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #27292d 65%, #27292d 100%);
--input-bg:#2f3236;
--chat-header-bg:linear-gradient(to bottom, #27292d 0%, #27292d 78%, rgba(255,255,255,0) 100%);
--settings-icon-color:#7c7e80;
--developer-color:var(--border-color);
--button-bg-color:#393b40;
--button-color:var(--body-color);
--input-chat-color:#6f7073;
--detail-font-color:var(--input-chat-color)
}
.blue {
	background-color: #0086ff
}
.purple {
	background-color: #9f7aea
}
.green {
	background-color: #38b2ac
}
.orange {
	background-color: #ed8936
}
* {
	outline: none;
	box-sizing: border-box
}
img {
	max-width: 100%
}
body {
	background-color: var(--body-bg-color);
	font-family: var(--body-font);
	color: var(--body-color)
}
html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased
}
.app {
	display: flex;
	flex-direction: column;
	background-color: var(--theme-bg-color);
	max-width: 1600px;
	height: 100vh;
	margin: 0 auto;
	overflow: hidden
}
.header {
	height: 80px;
	width: 100%;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	padding: 0 20px
}
.wrapper {
	width: 100%;
	display: flex;
	flex-grow: 1;
	overflow: hidden
}
.conversation-area, .detail-area {
	width: 340px;
	flex-shrink: 0
}
.detail-area {
	border-left: 1px solid var(--border-color);
	margin-left: auto;
	padding: 30px 30px 0;
	display: flex;
	flex-direction: column;
	overflow: auto
}
.chat-area {
	flex-grow: 1
}
.search-bar {
	height: 80px;
	z-index: 3;
	position: relative;
	margin-left: 280px
}
.search-bar input {
	height: 100%;
	width: 100%;
	display: block;
	background-color: transparent;
	border: none;
	color: var(--body-color);
	padding: 0 54px;
	background-image: url(../data-uri/svg/svg_b3d73.svg);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 25px 48%;
	font-family: var(--body-font);
	font-weight: 600;
	font-size: 15px
}
.search-bar input::placeholder {
color:var(--input-chat-color)
}
.logo {
	color: var(--theme-color);
	width: 38px;
	flex-shrink: 0
}
.logo svg {
	width: 100%
}
.user-settings {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-left: auto;
	flex-shrink: 0
}
.user-settings > * + * {
	margin-left: 14px
}
.dark-light {
	width: 22px;
	height: 22px;
	color: var(--settings-icon-color);
	flex-shrink: 0
}
.dark-light svg {
	width: 100%;
	fill: transparent;
	transition: .5s
}
.user-profile {
	width: 40px;
	height: 40px;
	border-radius: 50%
}
.settings {
	color: var(--settings-icon-color);
	width: 22px;
	height: 22px;
	flex-shrink: 0
}
.conversation-area {
	border-right: 1px solid var(--border-color);
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	position: relative
}
.msg-profile {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 15px
}
.msg-profile.group {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--border-color)
}
.msg-profile.group svg {
	width: 60%
}
.msg {
	display: flex;
	align-items: center;
	padding: 20px;
	cursor: pointer;
	transition: .2s;
	position: relative
}
.msg:hover {
	background-color: var(--msg-hover-bg)
}
.msg.active {
	background: var(--active-conversation-bg);
	border-left: 4px solid var(--theme-color)
}
.msg.online:before {
	content: "";
	position: absolute;
	background-color: #23be7e;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid var(--theme-bg-color);
	left: 50px;
	bottom: 19px
}
.msg-username {
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 15px
}
.msg-detail {
	overflow: hidden
}
.msg-content {
	font-weight: 500;
	font-size: 13px;
	display: flex
}
.msg-message {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--msg-message)
}
.msg-date {
	font-size: 14px;
	color: var(--msg-date);
	margin-left: 3px
}
.msg-date:before {
	content: "•";
	margin-right: 2px
}
.add {
	position: sticky;
	bottom: 25px;
	background-color: var(--theme-color);
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 50%;
	background-image: url(../data-uri/svg/svg_6eb44.svg);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 28px;
	box-shadow: 0 0 16px var(--theme-color);
	margin: auto auto -55px;
	flex-shrink: 0;
	z-index: 1;
	cursor: pointer
}
.overlay {
	position: sticky;
	bottom: 0;
	left: 0;
	width: 340px;
	flex-shrink: 0;
	background: var(--overlay-bg);
	height: 80px
}
.chat-area {
	display: flex;
	flex-direction: column;
	overflow: auto
}
.chat-area-header {
	display: flex;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background: var(--chat-header-bg)
}
.chat-area-profile {
	width: 32px;
	border-radius: 50%;
	object-fit: cover
}
.chat-area-title {
	font-size: 18px;
	font-weight: 600
}
.chat-area-main {
	flex-grow: 1
}
.chat-msg-img {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	object-fit: cover
}
.chat-msg-profile {
	flex-shrink: 0;
	margin-top: auto;
	margin-bottom: -20px;
	position: relative
}
.chat-msg-date {
	position: absolute;
	left: calc(100% + 12px);
	bottom: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--msg-date);
	white-space: nowrap
}
.chat-msg {
	display: flex;
	padding: 0 20px 45px
}
.chat-msg-content {
	margin-left: 12px;
	max-width: 70%;
	display: flex;
	flex-direction: column;
	align-items: flex-start
}
.chat-msg-text {
	background-color: var(--chat-text-bg);
	padding: 15px;
	border-radius: 20px 20px 20px 0;
	line-height: 1.5;
	font-size: 14px;
	font-weight: 500;
	direction: rtl
}
.chat-msg-text + .chat-msg-text {
	margin-top: 10px
}
.chat-msg-text {
	color: var(--chat-text-color)
}
.owner {
	flex-direction: row-reverse
}
.owner .chat-msg-content {
	margin-left: 0;
	margin-right: 12px;
	align-items: flex-end
}
.owner .chat-msg-text {
	background-color: var(--theme-color);
	color: #fff;
	border-radius: 20px 20px 0 20px
}
.owner .chat-msg-date {
	left: auto;
	right: calc(100% + 12px)
}
.chat-msg-text img {
	max-width: 300px;
	width: 100%
}
.chat-area-footer {
	display: flex;
	border-top: 1px solid var(--border-color);
	width: 100%;
	padding: 10px 20px;
	align-items: center;
	background-color: var(--theme-bg-color);
	position: sticky;
	bottom: 0;
	left: 0
}
.chat-area-footer svg {
	color: var(--settings-icon-color);
	width: 20px;
	flex-shrink: 0;
	cursor: pointer
}
.chat-area-footer svg:hover {
	color: var(--settings-icon-hover)
}
.chat-area-footer svg + svg {
	margin-left: 12px
}
.chat_message_up {
	border: none;
	color: var(--body-color);
	background-color: var(--input-bg);
	padding: 12px;
	border-radius: 6px;
	font-size: 15px;
	margin: 0 12px;
	text-align:right;
	direction:rtl;
	width: 100%
}
.chat-area-footer input::placeholder {
color:var(--input-chat-color)
}
.detail-area-header {
	display: flex;
	flex-direction: column;
	align-items: center
}
.detail-area-header .msg-profile {
	margin-right: 0;
	width: 60px;
	height: 60px;
	margin-bottom: 15px
}
.detail-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px
}
.detail-subtitle {
	font-size: 12px;
	font-weight: 600;
	color: var(--msg-date)
}
.detail-button {
	border: 0;
	background-color: var(--button-bg-color);
	padding: 10px 14px;
	border-radius: 5px;
	color: var(--button-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-family: IRANSans!important;
	flex-grow: 1;
	font-weight: 500
}
.detail-button svg {
	width: 18px;
	margin-right: 10px
}
.detail-button:last-child {
	margin-left: 8px
}
.detail-buttons {
	margin-top: 20px;
	display: flex;
	width: 100%
}
.detail-area input {
	background-color: transparent;
	border: none;
	width: 100%;
	color: var(--body-color);
	background-image: url(../data-uri/svg/svg_b3d73.svg);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 100%;
	font-family: var(--body-font);
	font-weight: 600;
	font-size: 14px;
	border-bottom: 1px solid var(--border-color);
	padding: 14px 0
}
.detail-area input::placeholder {
color:var(--detail-font-color)
}
.detail-changes {
	margin-top: 40px
}
.detail-change {
	color: var(--detail-font-color);
	font-family: var(--body-font);
	font-weight: 600;
	font-size: 14px;
	border-bottom: 1px solid var(--border-color);
	padding: 14px 0;
	display: flex
}
.detail-change svg {
	width: 16px;
	margin-left: auto
}
.colors {
	display: flex;
	margin-left: auto
}
.color {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	cursor: pointer
}
.color.selected {
	background-image: url(../data-uri/svg/svg_404d8.svg);
	background-size: 10px;
	background-position: center;
	background-repeat: no-repeat
}
.color:not(:last-child) {
	margin-right: 4px
}
.detail-photo-title {
	display: flex;
	align-items: center
}
.detail-photo-title svg {
	width: 16px
}
.detail-photos {
	margin-top: 30px;
	text-align: center
}
.detail-photo-title {
	color: var(--detail-font-color);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 20px
}
.detail-photo-title svg {
	margin-right: 8px
}
.detail-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 6px;
	grid-row-gap: 6px;
	grid-template-rows: repeat(3, 60px)
}
.detail-photo-grid img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
	object-position: center
}
.view-more {
	color: var(--theme-color);
	font-weight: 600;
	font-size: 15px;
	margin: 25px 0
}
.follow-me {
	text-decoration: none;
	font-size: 14px;
	width: calc(100% + 60px);
	margin-left: -30px;
	display: flex;
	align-items: center;
	margin-top: auto;
	overflow: hidden;
	color: #9c9cab;
	padding: 0 20px;
	height: 52px;
	flex-shrink: 0;
	position: relative;
	justify-content: center
}
.follow-me svg {
	width: 16px;
	height: 16px;
	margin-right: 8px
}
.follow-text {
	display: flex;
	align-items: center;
	transition: .3s
}
.follow-me:hover .follow-text {
	transform: translateY(100%)
}
.follow-me:hover .developer {
	top: 0
}
.developer {
	position: absolute;
	color: var(--detail-font-color);
	font-weight: 600;
	left: 0;
	top: -100%;
	display: flex;
	transition: .3s;
	padding: 0 20px;
	align-items: center;
	justify-content: center;
	background-color: var(--developer-color);
	width: 100%;
	height: 100%
}
.developer img {
	border-radius: 50%;
	width: 26px;
	height: 26px;
	object-fit: cover;
	margin-right: 10px
}
.dark-mode .search-bar input, .dark-mode .detail-area input {
	background-image: url(../data-uri/svg/svg_3e68f.svg)
}
.dark-mode .dark-light svg {
	fill: #ffce45;
	stroke: #ffce45
}
.dark-mode .chat-area-group span {
	color: #d1d1d2
}
.chat-area-group {
	flex-shrink: 0;
	display: flex
}
.chat-area-group * {
	border: 2px solid var(--theme-bg-color)
}
.chat-area-group * + * {
	margin-left: -5px
}
.chat-area-group span {
	width: 32px;
	height: 32px;
	background-color: var(--button-bg-color);
	color: var(--theme-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-weight: 500
}

@media (max-width: 1120px) {
.detail-area {
	display: none
}
}

@media (max-width: 780px) {
.conversation-area {
	display: none
}
.search-bar {
	margin-left: 0;
	flex-grow: 1
}
.search-bar input {
	padding-right: 10px
}
}