:root{
	--color-primary:#ff5e3a;
	--color-primary-o:#ff5e3aaa;
	--color-secondary:#3f4257;/*7c5ac2*/
	--color-secondary-o:#3f425733;
	--color-thirdly:#38a9ff;
	--color-thirdly-o:#38a9ffaa;
	--color-dark:#3f4257;
	--color-dark-o:#3f4257aa;
	--color-dark-2:#494c62;
	--color-dark-3:#333333;
	--color-gray:#9a9fbf;
	--color-gray-2:#cccccc;

	--border-bottom:1px solid var(--color-secondary-o)
}
body{
	font-size: 16px;
	background-color: #edf2f6;
	line-height: 1.5;
}
.bg-dark{
	background-color:var(--color-dark);
}
.bg-dark-o{
	background-color:var(--color-dark-o);
}
.bg-dark-2{
	background-color: var(--color-dark-2);
}
.bg-white{
	background-color: #ffffff;
}
.bg-primary{
	background-color: var(--color-primary);
}
.bg-secondary{
	background-color: var(--color-secondary);
}
.bg-thirdly{
	background-color: var(--color-thirdly);
}
.bg-gray{
	background-color: var(--color-gray);
}
.bg-gray-2{
	background-color: var(--color-gray-2);
}
.text-dark,.text-dark a{
	color:var(--color-dark-3);
}
.text-gray{
	color:var(--color-gray);
}
.text-gray-2,.text-gray-2 a{
	color:var(--color-gray-2);
}
.text-white,.text-white a{
	color:#ffffff;
}
.text-primary{
	color: var(--color-primary);
}
.text-secondary{
	color: var(--color-secondary);
}
.text-thirdly{
	color: var(--color-thirdly);
}
.font-xs{
	font-size: 1.2em;
}
.font-s{
	font-size: 1.7em;
}
.font-m{
	font-size: 2.2em;
}
a{
	color: var(--color-dark);
}
a:hover{
	text-decoration: none;
}
input,textarea,select,button{
	border: solid 1px var(--color-secondary-o);
	background-color: var(--color-secondary-o);
	color: var(--color-dark);
	padding: 10px;
}
input:focus,textarea:focus,select:focus,button:focus{
	border: solid 1px var(--color-secondary);
	outline: none;
}
.border-bottom{
	border-bottom: var(--border-bottom);
}
button{
	border: solid 1px var(--color-dark);
	background-color: var(--color-dark);
	color: #ffffff;
}
button:hover{
	background-color: var(--color-secondary);
}
.border-radius-50{
	border-radius: 50%;
}
img.cover{
	object-fit:cover;
}
.border-radius-50{
	border-radius: 50%;
}
p{
	margin-bottom: 10px;
}
.word-break{
	word-break: break-word;
}
.list-none{
	list-style: none;
}
.btn{
	background-color: var(--color-primary);
	color:#ffffff;
	border-radius: 0.3rem;
	padding: .8rem 2.1rem;
	border:solid 1px #ffffff;
	font-weight: 700;
}
.btn.bg-secondary{
	background-color: var(--color-secondary);
}
.logo,.header-account{
	width: 70px;
	height: 70px;
	display: inline-block;
}
.border-none{
	border:none;
}
.grid {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
	grid-auto-rows: 20px;
}

.masonry-with-columns-ders{
	columns: 6 300px;
	column-gap: 1rem;
}
.masonry-with-columns {
	columns: 6 300px;
	column-gap: 1rem;
}
.masonry-with-columns > div ,.masonry-with-columns-ders > div{
	width: 150px;
	margin: 0 1rem 1rem 0;
	display: inline-block;
	width: 100%;
}

.header-account img{
	border-radius: 50%;
}
header{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	z-index: 1000;
}


.mesajlasmalist ::-webkit-scrollbar,
.mesajlasmalist::-webkit-scrollbar {
	display: none;
}

.mesajlasmalist{
	height: calc(100vh - 70px);
	overflow-y: scroll;
}
.left-side,.right-side{
	width:70px;
	height:100vh;
	position: fixed;
	top: 0;
	left:0;
	z-index: 90;
}
.right-side{
	right:0;
	left:auto;
}
.left-side i{
	font-size:1.5em;
}
.left-side a:hover{
	color: var(--color-primary);
}
.right-side img{
	border-radius: 50%;
}
.box{
	border:1px solid #e6ecf5;
	border-radius: 5px;
	background-color: #ffffff;
	margin-bottom:20px;
	width: 100%;
	padding: 1.5rem;
}
.box-title{
	border-bottom:var(--border-bottom);
	margin-bottom: 1rem;
	display: inline-block;
	width: 100%;
}
.text-075{
	font-size: 0.75em;
	line-height: 1.1;
}
.comment-bot .comment-btn{
	color:#ffffff!important;
	border-radius: 50%;
	width:32px;
	height: 32px;
	display: inline-block;
	text-align: center;
	padding-top: 7px;
}
.comment-bot .comment-btn:hover{
	background-color: var(--color-primary);
}
.landing-btn{
	border: solid 2px #ffffff;
	background:none;
}
.landing input,.landing button{
	border:solid 1px #dddddd;
}
.header-acc-menu{
	display:none;
	position: absolute;
	top:70px;
	right:0;
	z-index: 10000;
	width:200px;
	
}
.comment-point span{
	font-size: 1.2em;
	padding:6px;
	background-color: var(--color-primary);
	color: #ffffff;
	border-radius: 50%;
}
.frm-list{
	height: 100vh;
	overflow-y: scroll;
}
.position-sticky{
	position: sticky;
	top:0;
	left: 0;
}
.profile-avatar{
	margin-top:-80px;
}
.profile-avatar img{
	border-radius: 50%;
}
.profile-nav a{
	font-size: 1.1em;
	font-weight: 600;
}
.profile-action a{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding-top: 12px;
}
.profile-action{
	position: absolute;
	top:-30px;
	right:100px;
	font-size: 1.5em;
	
}
.profile-about label{
	display: inline-block;
	float:left;
}
.profile-about input,.profile-about textarea{
	float:right;
	display:inline-block;
}
input:read-only,textarea:read-only {
	border:none;
}
.profile-about textarea{
	height: max-content;
}
.profile-about select,.profile-about input,.profile-about textarea{
	width: 223px;
}
.footer-widget{
	position: fixed;
	right:0;
	bottom:0;
	width:400px;
	height:400px;
	z-index: 900;
	display:none;
}
.fw-head{
	height: 60px;
}
.chat-foot{
	height:60px;
	border-top:solid 1px var(--color-secondary);
}
.chat-body{
	height:calc(100% - 120px);
	overflow-y: scroll;
}
.chat-foot button{
	float:right;
	padding:20px 10px;
	width:45px;
	height: 100%;
	border-radius: 0;
	border: none;
}
.chat-foot textarea{
	float:left;
	width:calc(100% - 45px);
	height: 100%;
	border:none;
}
.chat-foot textarea:focus{
	outline: none;
}
.chat-head img{
	border-radius: 50%;
}
.chat-body p{
	background-color: var(--color-thirdly);
	padding: 5px;
	margin-right:40px;
	width:calc(100% - 40px);
	color:#ffffff;
}
.chat-body p.not{
	background-color:#ffffff;
	border: solid 1px var(--color-gray);
	margin-left:40px;
	width:calc(100% - 40px);
	text-align: right;
	color:#333333;
}
.urunara input,.urunara button{
	background: var(--color-dark);
	border: solid 1px var(--color-dark);
}
.grup-katil-cik a{
	width: 40px;
	height: 40px;
	text-align: center;
}
.resim-goster{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: none;
}
.resim-goster img{
	border: solid 5px #ffffff;
}
.resim-container{
	height: 75vh;
}
.file-input::-webkit-file-upload-button {
	visibility: hidden;
}
b.grup-hak{
	display: inline-block;
	width: 90px;
}
.grup-yeni-sag{
	height: 50vh;
	overflow-y: scroll;
}