@charset "UTF-8";

/* reset kinde of */

* {
	box-sizing: border-box;
	outline: none !important;
}

/* global */

p {
	margin: 0.25em 0;
}

i[id^="comment-"] {
    position: relative;
    top: -14px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

bdi {
	direction: rtl;
}

a {
	text-decoration: none;
}

img, table,audio {
	max-width: 100%;
}

video {
	width: 100% !important;
	height: auto !important;
}

.FARHAN {
	background:#fff;
	border-radius: 8px 8px 0 0;
	box-shadow: -3px 3px 7px #c2c6d8;
	color: #646e83;
}

footer {
	margin-top: 30px;
}

.imgFeat {
	width: 100%;
	height: auto;
}

.hr {
	border: 0;
	height: 15px;
	background: transparent !important;
}

/* html */

html {
	scroll-behavior: smooth;
}

/* margin and padding and width */

.fit-CON {
	width: fit-content;
}

.Hfit-CON {
	height: fit-content;
}

.mrg0, .ul, .padOmrg0 {
	margin: 0;
}

.mrgb {
	margin-bottom: 1rem;
}


.mainTxt audio {
	width:100%;
	height:35px;
	border-radius:100px;
}

.mainTxt a:not(.readMore2) {
	display: inline-block;
	padding: 0.5px 13px;
	border: 1px solid #e8e8e8;
	border-radius: 5px;
	color: #1471ee;
	margin: 2px;
}

.mainTxt a:not(.readMore2):hover {
	background: #1471ee;
	color: #fff;
	border-color: #1471ee;
}

.pad10 {
	padding: 10px;
}

.pad15 {
	padding: 15px;
}

.padOmrg0 {
	padding: 0;
}

.mrg-B10 {
	margin-bottom: 10px;
}

.mrg-B15 {
	margin-bottom: 15px;
}

.mrg-T10 {
	margin-top: 10px;
}

.mrg-T15 {
	margin-top: 15px;
}

.mrg-R10 {
	margin-right: 10px;
}

.mrg-R15 {
	margin-right: 15px;
}

.mrg-L10 {
	margin-left: 10px;
}

.mrg-L15 {
	margin-left: 15px;
}


/* lists */

.ul {
	list-style-type: none;
	padding: 0;
}

.li:last-child,.lib:last-child {
	margin-bottom: 0;
}

.lib:last-child {
	border-bottom: 0;
}

/* flex */

.fl,.flW,.flRe,.flWRe,.plmc {
	display: flex;
}

.flW,.flWRe {
	flex-wrap: wrap;
}

.flRe,.flWRe {
	flex-direction: row-reverse;
}

.aliI-CE,.plmc {
	align-items: center;
}

.jusCo-SP {
	justify-content: space-between;
}

.jusCo-CE,.plmc {
	justify-content: center;
}

.fl-im {
	display: flex !important;
}

.aliI-flS {
	align-items: flex-start;
}

.aliI-flE {
	align-items: flex-end;
}

.fl1 {
	flex-grow: 1;
	flex-shrink: 1;
}

/* border-radius */

.borOK {
	border-radius: 50%;
}

.borNOK {
	border-radius: 10rem;
}

.bor-INH {
	border-radius: inherit;
}

/* buttons and input[type="submit"] */

.but, input[type="submit"] {
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/* positioning */

.por{
	position: relative;
}

.pos,.farhana  {
	position: absolute;
}

.farhana {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
}

.zin0 {
	z-index: 0;
}

.zin1 {
	z-index: 1;
}

.zin2 {
	z-index: 2;
}

.zin3 {
	z-index: 3;
}

.zin4 {
	z-index: 4;
}

.zin5 {
	z-index: 5;
}

.zin6 {
	z-index: 6;
}

.zin7 {
	z-index: 7;
}

.zin8 {
	z-index: 8;
}

.zin9 {
	z-index: 9;
}

.zin10 {
	z-index: 10;
}

/* aligns */

.txt-R {
	text-align: right;
}

.txt-C,.plmc {
	text-align: center;
}

.txt-L {
	text-align: left;
}

.dir-L {
	direction: ltr;
}

.dir-R {
	direction: rtl;
}

/* summary */

summary {
	cursor: pointer;
}

.non-mark {
	list-style-type: none;
}

.non-mark::marker {
	color: transparent !important;
}

/* details topics... */

.non {
	display: block;
}

details .clBut .clos, details[open] .clBut .ope, .disp-N,[name="dis-N"] {
	display: none;
}

details[open] .clBut .clos {
	display: initial;
}

/* displays */

.disp-B {
	display: block;
}

/* float */

.floR {
	float: right;
}

.floL {
	float: left;
}

.clear {
	clear: both;
}

/* overflow */

.ovf-H {
	overflow: hidden;
}

.ovf-YS {
	overflow-y: scroll;
}

/* background and backG settings */

.backGSize {
	background-size: cover !important;
}

/* fonts settings */

.FSt-NOR {
	font-style: normal;
}

.FWe-NOR {
	font-weight: normal;
}

/* @key frames */

@keyframes fade-farhan {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes rot-farhan {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}

/* animations */

.fade-ME,
.stickyAs {
	animation: fade-farhan 0.6s linear 0s 1;
}

/* Fonts */

/* English Font */

@font-face {
	font-family: 'Poppins-Regular';
	src: url('https://bayanbox.ir/download/3597202278100401580/Poppins-Regular.eot');
	src: url('https://bayanbox.ir/download/3597202278100401580/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
	url('https://bayanbox.ir/download/1068366696921114214/Poppins-Regular.svg#Poppins-Regular') format('svg'),
	url('https://bayanbox.ir/download/5947179238070229354/Poppins-Regular.ttf') format('truetype'),
	url('https://bayanbox.ir/download/4861806138071738912/Poppins-Regular.woff') format('woff'),
	url('https://bayanbox.ir/download/7211620908606122750/Poppins-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}


/* Persian Font */

@font-face {
	font-family: 'Vazir-Regular';
	src: url('//bayanbox.ir/download/4827310715344697348/Vazir.eot');
	src: url('//bayanbox.ir/download/4827310715344697348/Vazir.eot?#iefix') format('embedded-opentype'),
	url('//bayanbox.ir/download/9079346587792044865/Vazir.woff2') format('woff2'),
	url('//bayanbox.ir/download/8618153108850776974/Vazir.woff') format('woff'),
	url('//bayanbox.ir/download/8657326714357973781/Vazir.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

textarea, input,
select, body,
button,
h1, h2, h3, h4, h5, h6,
.followBx, .followThis,
.cke_reset_all .cke_rtl * {
	font-family: 'Poppins-Regular','Vazir-Regular';
}


/*Lets Styling...*/


/* body */

body {
	background: #e8eaee url('#');
	font-size:16px;
}

/*header*/

header {
	box-shadow: #b4b6bf 0px 0px 7px;
	flex-direction:column;
	height: 270px;
	border-radius: 10px;
	background: #4b7ec2 url('https://i.pinimg.com/originals/f7/3e/f7/f73ef7a9fa696f8fa2daf1547095da01.jpg');
	background-size: cover;
}

/*blog name*/

.BLN a {
	font-size: 24px;
	display: block;
	padding: 2.5px 15px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border-radius: 100px;
}

/*blog short description*/

header strong {
	padding: 2.5px 15px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 100px;
	color: #fff;
	font-size: 14px;
	margin-top: 8px;
}

/*nav menu*/

nav {
	width: 90%;
	margin: -15px auto 25px;
	background: #0066cc;
	border-radius: 0 0 17px 17px;
	box-shadow: #2772b4 -3px 3px 7px;
}


.menu-IXX {
	margin-left: 6px;
}

.menu-IXX[name*="https://blog.ir/panel/-/followed_blogs?follow="] {
	display: none;
}

.menu-IXX a {
	font-size: 12.5px;
	color: #e3eaf4;
	padding: 0 6px;
}

.menu-IXX a:hover {
	color: #000;
}

/* main */

main {
	width: 855px;
	margin: 50px auto 0;
	padding:0 15px;
}

/* article block */

#article-container {
	width: 500px;
}

/* post list title */

.post_list_title {
	background: #fff;
	border-radius: 7px;
	box-shadow: #c2c6d8 -3px 3px 7px;
	font-size: 16px;
	color: #000;
}

/* posts */

article {
	background: #fff;
	box-shadow: -3px 3px 7px #c2c6d8;
	border-radius: 10px;
	padding: 10px;
}

.fatureImage {
	border-radius: 10px;
}

/* article Main Part When It Has Picture */

.aMPWIHP {
	width: 90%;
	margin: -60px auto 0;
	background: #fff;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0px 5px 3px #e8e8e8;
}

/* categories */

.categ-I {
	margin: 0 0 5px 5px;
}

.categ-I a {
	background: #1471ee;
	color: #fff;
	border-radius: 6px;
	padding: 4.5px 15px;
	font-size: 14.5px;
}

/* article name */

.post-list-name a {
	font-size: 18.72px;
	color: #000;
}

.post-list-name a:hover {
	color: #1471ee;
}

.post-list-name1 {
	width: calc(100% - 45px);
}

/* author and date in articles */

.exAuthName {
	width: calc(100% - 65px);
	padding-left: 55px;
}

.exAuthName b {
	font-size: 14px;
	color: #000;
}

.exAuthName span {
	font-size: 12.5px;
	color: #7e7e7e;
}

/* like buttons */

.exAuthName .pos {
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.likeMe {
	background: #f8f6f6;
	padding: 16px 15px 9px;
	height: 23px;
	border-radius: 5px;
	color: #585858;
}

.rated .likeMe {
	background: #0066cc;
	color: #fff;
}

/* post when it doesn't have any picture */

.topHead-POST section.por {
	width: 35px;
	height: 35px;
	background: #1471ee;
	border-radius: 6px;
}

.topHead-POST section.por span {
	padding-top: 5px;
	color: #fff;
}

.readMore2 {
	padding: 3px 15px;
	color: #fff;
	background: #1471ee;
	border-radius: 4px;
	margin-top: 4px;
	display: inline-block;
	font-size: 13.5px;
}

/* music posts */

article[name$="...."] .mainTxt,
article[name$="....ImViewPost"] .post_summary,
article[name$="....ImViewPost"] .allMusicCon,
article[name$="...."] .aMPWIHP {
	background: rgb(255 255 255);
	box-shadow: 0 0 0 2px #fff;
}

article[name$="....ImViewPost"] .aMPWIHP {
	width:100%;
	padding:0;
	background:none;
}

article[name$="....ImViewPost"] .allMusicCon {
	padding: 15px;
	border-radius: 10px
}

article[name$="....ImViewPost"] .post_summary {
	left: 15px !important;
}

article[name$="....ImViewPost"] .posMusEX {
	padding-left: 50px;
}

.MusicPosName a {
	font-size: 18.72px;
	color: #000;
}

article[name$="...."] .dontShowInPost,
article[name$="....ImViewPost"] .dontShowInPost,
.findCommentContainer[open] .sum i[class*="up"],
.findCommentContainer .sum i[class*="down"]
{display:block;}

.dontShowInPost.x
{display:flex;}

article[name$="...."] .fatureImage,
article[name$="...."] .post-list-name,
article[name$="...."] .dontShowInMusicPost,
article[name$="...."] .footer-article,
.dontShowInPost,
article[name$="....ImViewPost"] .fatureImage,
article[name$="....ImViewPost"] .post-list-name,
article[name$="....ImViewPost"] .dontShowInMusicPost,
article[name$="....ImViewPost"] .footer-article,
article[name$="....ImViewPost"] .dontShowInPost.x,
.findCommentContainer .sum i[class*="up"],
.findCommentContainer[open] .sum i[class*="down"]
{
	display: none;
}

article[name$="...."] .aMPWIHP,
article[name$="....ImViewPost"] .aMPWIHP{
	box-shadow: none;
	margin: 0 auto;
}

article[name$="...."] .allMusicCon,
article[name$="....ImViewPost"] .allMusicCon{
	display: flex;
	z-index: 1;
}

article[name$="...."] .allMusicCon section[style^="back"],
article[name$="....ImViewPost"] .allMusicCon section[style^="back"]{
	width: 80px;
	height: 80px;
	border-radius: 100px;
	background-size: cover !important;
	background-position: center !important;
	margin-left: 10px;
}

article[name$="...."] .posMusEX,
article[name$="....ImViewPost"] .posMusEX{
	width: calc(100% - 95px);
}

.musTAG {
	margin: 0 0 5px 5px;
}

.musTAG a {
	padding: 1.5px 8px;
	background: #e3eaf4;
	font-size: 11.5px;
	border-radius: 100px;
	color: #000;
}

article[name$="...."] .mainTxt,
article[name$="....ImViewPost"] .post_summary{
	position: absolute;
	left: 0;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 100px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

article[name$="...."] .mainTxt p,
article[name$="....ImViewPost"] .post_summary p{
	margin: 0;
	padding: 0;
}

article[name$="...."] .mainTxt audio,
article[name$="....ImViewPost"] .post_summary audio{
	width: 100px;
	max-width: 100px;
	height: 30px;
	position: absolute;
	left: 18px;
	transform: scale(2);
	opacity: 0.3;
	top: 6px;
	-moz-transform: scale(2) translate(1.6px, -0.5px);
}

article[name$="...."] .aMPWIHP:after,
article[name$="....ImViewPost"] .allMusicCon:after{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 10px;
	bottom: 0;
	inset: 0;
	opacity: 0.3;
	background: -webkit-linear-gradient(
			0deg , #f1f3f4 , #f1f3f4);
	background: -moz-linear-gradient(0deg,#3d2626,#3d2626);
}

/*when we click a post*/

.post_summary {
	padding: 5px;
	background: #fbfcfd;
	font-size: 13.5px;
	border-radius: 5px;
	color:#585858;
}



/* main Text */

.mainTxt {
	font-size: 13.5px;
	color: #585858;
}

/* 404 page */

.messageBoxes section[name^="which :"],
.messageBoxes section[name^="which :"] P[id^="i"]
{
	display:none;
}

.messageBoxes section[name="which : چنین مطلبی وجود ندارد"] p#i1,
.messageBoxes section[name="which : چنین صفحه ای وجود ندارد (آدرس اشتباه است)"] p#i2,
.messageBoxes section[name="which : لینک آرشیو معتبر نیست"] p#i3 {
	display:block;
}

.messageBoxes section[name="which : چنین مطلبی وجود ندارد"],
.messageBoxes section[name="which : چنین صفحه ای وجود ندارد (آدرس اشتباه است)"],
.messageBoxes section[name="which : لینک آرشیو معتبر نیست"] {
	padding: 15px;background: #afd1f6;
	border-radius: 6px;
	display:block;
}

.goBackHome {
	padding: 4px 19px;
	border-radius: 5px;
	border: 2px solid #fff;
	color: #fff;
	margin-top: 15px;
	display: inline-block;
}

.MessageTxt {
	color: #000;
	font-size:16px;
}




/* article footer */

/* read more button */

.read-more {
	padding: 3px 15px;
	border-radius: 5px;
	background: #1471ee;
	font-size: 13.5px;
	color: #fff;
}

/* typography */

.mainTxt h1 {
	font-size: 22.5px;
	margin: 9px 0;
}

.mainTxt hr {
	height: 9px;
	border: 0;
	margin-left: -16px;
	margin-right: -17px;
	background: #fff;
	box-shadow: inset 1px 1px 3px 0px #e8e8e8;
}

.mainTxt ul li,.mainTxt ol li {
	background: #f1f5ff;
	padding: 5px;
	margin-bottom: 4px;
	border-radius: 4px;
	list-style-type: circle;
	color:#000;
}

.mainTxt ol li {
	background: #f1f5ff;
	color:#000;
	list-style: lower-latin;
}


.mainTxt blockquote {
	color: #000;
	border: 0;
	font-style: normal;
	margin: 15px -16px;
	background: #f9f9f9;
	padding: 15px;
	position: relative;
	border-radius: 12px 0;
}

.mainTxt blockquote:after {
	padding-top: 11px;
	content: '❝';
	font-size: 28px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #bcbaba;
	height: 16px;
	top: -13px;
	right: 0;
	width: 27px;
	color: #000;
	border-radius: 100px;
	border: 2px dashed #fff;
}


/* like and comment me buttons */

.Feedback {
	position: relative;
}

.Feedback span {
	position: absolute;
	min-width: 30px;
	background: white;
	text-align: center;
	font-size: 13.5px;
	border-radius: 3px;
	box-shadow: 0 0 3px #e8e8e8;
	opacity: 0;
	left: 100%;
	pointer-events: none;
	top: -30px;
}

.comMe {
	background: #f8f6f6;
	padding: 16px 15px 9px;
	height: 23px;
	border-radius: 5px;
	color: #585858;
}

.Feedback:hover > span {
	transform: translateX(-50%);
	left: 50%; 
	opacity: 1;
}

/*post tags*/

.poSXtagCon {
	background: #fff;
	padding: 11px 10px 5px;
	border-radius: 5px;
	box-shadow: #c2c6d8 -3px 3px 7px;
}

.poSXtag {
	margin-left: 5px;
	margin-bottom: 5px;
}

.poSXtag a h6 {
	font-size: 10.5px;
	font-weight: 500;
	color: #585858;
	padding: 2.5px 10px;
	background: #f5f5f5;
	border-radius: 5px;
}

.poSXtag a h6:hover {
	background: #1471ee;
	color: #fff;
}

.poSXtagCon[name$="...."] {
	display: none;
}

.poSXcatCon {
	background: rgb(255, 255, 255);
	padding: 5px 10px 5px;
	border-radius: 5px;
	box-shadow: rgb(194 198 216) -3px 3px 7px;
}

.poSXcat a {
	font-size: 10.5px;
	font-weight: 500;
	color: #000;
	padding: 2.5px 10px;
	background: lavender;
	border-radius: 100px;
}

.findCommentContainer[name="Û°"] {display:none;}

.poSXcat {
	margin-left: 5px;
	margin-bottom: 5px;
}


.poSXcat a:hover {
	color: #ffffff;
	background: #1471ee;
}

/*comment in posts an pages*/

.comCounter {
	background: #fff;
	border-radius: 5px;
	box-shadow: -3px 3px 7px #c2c6d8;
	font-size: 16px;
}

/*find my comment button*/

.findCommentContainer .sum {
	left: 5px;
	top: 5px;
	text-align: center;
	color: transparent;
	background: #e2e2e2;
	height: 16px;
	border-radius: 50%;
	overflow: hidden;
}

.findCommentContainer .sum i {
	color: #000;
	height: 16px;
	font-size: 16px;
}

/*find my comment items*/

.find-I {
	margin-left: 5px;
	margin-bottom: 5px;
}

.find-I a {
	padding: 2.5px 10px;
	background: #f8f9f8;
	color: #000;
	font-size: 12.5px;
	border-radius: 24px;
}

/*comments item in posts and items : client..*/

.com-Ip {
	border-radius: 5px;
}

.com-Ip.f {
	background: #fff;
	box-shadow: -3px 3px 7px #c2c6d8;
}

.excomip {
	width: calc(100%  - 75px);
}

.top-_-com a, .top-_-com .sNAM {
	color: #1471ee;
	font-size: 16px;
}

.com-Ip.f .comTxt-ip {
	color: #000;
}

.com-Ip.f .sNAM {
	color: #000;
}

.com-Ip.f .date-comip {
	color: #d9d9d9;
}

.com-Ip.f .spaceB {
	background: lightcoral;
}

.top-_-com a:hover {
	text-decoration: 1px solid underline;
	color: #000;
}

.date-comip {
	font-size: 13.5px;
}

.comTxt-ip {
	font-size: 13.5px;
}

.spaceB {
	width: 10px;
	height: 10px;
	display: inline-block;
	top: 2px;
	border-radius: 15px 2px;
	margin: 0 4px;
}

/*admin comment*/

.com-Ip.S {
	background: #4caf50;
	box-shadow: #65ad68 -3px 3px 7px;
}
.com-Ip.S .comTxt-ip {
	color: #fff;
}
.com-Ip.S .sNAM {
	color: #000;
}
.com-Ip.S .date-comip {
	color: #c3e997;
}
.com-Ip.S .spaceB {
	background: #ffeb3b;
}

/*comment form*/

#comment_box {
	background: #fff;
	border-radius: 10px;
	box-shadow: -3px 3px 7px #c2c6d8;
}

.smalltip,
.bComForm .commentAvatar span {
	display: none !important;
}

.formField2 .fldcontent {
	padding: 0;
	margin: 0;
}

.formField2 label {
	text-align: right;
	font-size: 12.5px;
}

select,
div.inputFix input.text {
	color: #2076ef;
	border: 0;
	padding: 2px;
	font-size: 13.5px;
	background: #f8f9f8;
	width: 100%;
	appearance: none;
}

div.inputFix {
	padding: 0;
}

label,input[type="checkbox"] {
	cursor: pointer;
}

.formField2 textarea {
	width: 100%;
	border: 0;
	margin-top: 3px;
	background: #ebf0ff;
	resize: none;
	max-height: 100px;
	font-size: 13.5px;
	color: #848faf;
}

.bComForm .commentAvatar img {
	border: 0;
	padding: 0;
	border-radius: 100px;
	box-shadow: 0 0 5px #8a99c5;
}

.bComForm .sendbutton.hasCheckbox,#bComSub {
	margin: 0 auto;
	padding: 2.5px 12px;
	background: #4caf50;
	color: #000;
	border-radius: 100px;
}

input[type=checkbox] {
	filter: brightness(1.5) sepia(1) saturate(26) hue-rotate(166deg);
}

#comment_box .item_success {
	border: 0;
	margin: 0;
	border-radius: 100px;
	color: green;
	background: #cbf6df;
	font-size:13.5px;
}

#comment_box .item_err {
	border: 0;
	border-radius: 100px;
	font-size: 13.5px;
	color: #e0501f;
	background: antiquewhite;
}

#comment_box .item_err .icon,
#comment_box .item_success .icon{
	position: relative;
	background: none;
}

#comment_box .item_err .icon:after,
#comment_box .item_success .icon:after{
	content: '❌';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	inset: 0;
}

#comment_box .item_success .icon::after {
	content: "✔";
	text-align: center;
	color: black;
	background: #ffeb3b;
	border-radius: 100px;
}

#comment_box .item_wrn {
	background: gold;
	border: 0;
	font-size: 13.5px;
	color: #000;
	border-radius: 100px;
}

#comment_box .item_wrn div {
	background: #ffa3a3;
	border-radius: 100px;
}

/* aside */

aside {
	width: 310px;
}

/* side per part */

.sidePerPart {
	background: #fff;
	box-shadow: -3px 3px 7px #c2c6d8;
	border-radius: 5px;
	padding: 10px;
}

/* side title */

.side-title {
	color: #000;
	font-size: 16px;
}

/* info */

.info img {
	border-radius: 5px;
}

.extra-info {
	width: 85%;
	margin: -60px auto 0;
	background: #fff;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 5px 3px #e8e8e8;
}

.blog-name1 {
	font-size: 20px;
	color: #000;
	padding: 5px;
}

.long-description {
	font-size: 13.5px;
	color: #858585;
}

.followBut[href^="https://blog.ir/panel/-/followed_blogs?follow"] {
	border-radius: 5px;
	background: #1471ee;
	color: #fff;
	font-size: 14.5px;
	display: block;
}

/* recent comments */

.ex-contents {
	width: calc(100% - 60px);
}

.top-content {
	margin-top: -6px;
}

.top-content b {
	color: #000;
	font-size: 14.5px;
}

.dot-braker {
	font-size: 25px;
	color: #a0a0a0;
}

.date-recent-comments {
	color: #b0afaf;
	font-size: 12.5px;
}

.comTxt1 {
	font-size: 11.5px;
	color: #858585;
}

/* when mouse hover on recent comments item */

.rec-com-I a {
	background: #fff;
}

.rec-com-I a:hover {
	padding: 5px;
	background: #2d384c;
	border-radius: 5px;
}

.rec-com-I a:hover .top-content b {
	color: #748e8d;
}


.rec-com-I a:hover .dot-braker {
	color: #a0a0a0;
}

.rec-com-I a:hover .date-recent-comments {
	color: #b0afaf;
}

.rec-com-I a:hover .comTxt1 {
	color: #858585;
}


/* box fast commenting in sidebar */

/* buttons container */

/* به هیچ وجه تغییر ندهید تیکه کد زیر رو */

.buttons-C .sum {
	color: transparent !important;
}

/* buttons */

.buttons-C .sum {
	border: 1px solid #e8e8e8;
	background: #fff;
	border-radius: 5px;
}

.buttons-C .sum h5 {
	color: #000;
	display: inline;
	font-size: 16px;    
}

.buttons-C .sum i {
	color: #2d384c;
}

.buttons-C[open] .ul {
	animation: fade-farhan 0.6s linear 0s 1;
}

/* recent posts */

.Spos-featureImage {
	background-position: center !important;
	background-size: cover !important;
	width: 75px;
	height: 75px;
}

.extra-Spost {
	width: calc(100% - 90px);
}

.extra-Spost h4 {
	color: #000;
	font-size: 16px;
}

.Spos-date {
	font-size: 13.5px;
	color: #b0afaf;
}

.Spos-I a:hover .extra-Spost > h4 {
	color: #1471ee;
} 

/* most visited posts  */

.Spos-views {
	font-size: 12.5px;
	color: #858585;
	padding: 2.5px 10px;
	background: #f9f9f9;
	width: fit-content;
	border-radius: 5px;
}

.Spos-views i {
	padding-top: 3px;
	padding-right: 4px;
}

/*music list*/

/*music sectios scrollbar*/

.music-part ul.ul.ovf-YSx::-webkit-scrollbar {
	width: 5px;
}

.music-part ul.ul.ovf-YSx {
	background:#000;
}

.music-part ul.ul.ovf-YSx::-webkit-scrollbar-thumb {
	background-color: #ebf0ff;
}

/*music section*/

.player-music-farhan-container {
	box-shadow: 0 0 3px #d2d5e1;
}

.music-I {
	border-color:#d2d5e1 !important;
}

.player-music-farhan-container, .music-I {
	background: #ebf0ff; /*این رو میگم .. اگر اینو تغییر بدی رنگ بخش موزیک تغییر میکنه لطفا دیگه کد های پایین این رو اصلا تغییر نده*/
} 

/* 

از این بخش به پایین اصن تغییر ندید اگر میخواید رنگ دکمه موزیک تغییر کنه فقط
رنگ کد بالا رو تغییر بدید حله همین تاکید میکنم تغییر ندید

*/

.music-part .ul.ovf-YSx {
	max-height: 180px;
	overflow-y:auto;
}

.music-I {
	border-bottom: 1px solid;
	width:100%;
}

.name-music {
	font-size: 13.5px;
	padding-left: 5px;
	width: calc(100% - 35px);
}

.player-music-farhan-container {
	width: 30px;
	height: 30px;
}

.player-music-farhan-container *p {
	margin: 0 !important;
	color: transparent !important;
}


.player-music-farhan-container audio{
	position: absolute;
	width: 100px !important;
	min-width: 100px !important;
	max-width: 100px !important;
	height: 35px !important;
	min-height: 35px !important;
	max-height: 35px !important;
	left: -11px;
	top: -2px;
	opacity: 0.3;
	/* for css compatibility i set the transform property to '0' TOO😉 */
	transform: translateX(0);
	-moz-transform: translateX(2px);
}

.music-I:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	inset: 0;
	opacity: 0.3;
	/* رنگ های پایین رو به هیچ وجه تغییر ندهید */
	background: -webkit-linear-gradient(0deg ,  #f1f3f4 , #f1f3f4);
	background: -moz-linear-gradient(0deg,#3d2626,#3d2626);
}


/*search*/

#srchBx {
	margin: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	height: auto;
}

#srchBx form {
	position: relative;
}

.search-wrapper {
	margin: 0 !important;
}

.search-box input.text {
	background: #fff !important;
	width: 100% !important;
	float: none !important;
	padding: 6px 6px 6px 37px !important;
	border: 1px solid #e9e9e9 !important;
	height: 37px !important;
	border-radius: 5px !important;
	color: #000 !important;
}

.search-box .submit {
	border: 1px dashed rgb(255 255 255);
	position: absolute;
	left: 3px;
	top: 2px;
	background: #7691bc !important;
	width: 33px !important;
	height: 33px !important;
	border-radius: 9px !important;
}

.search-wrapper:after {
	content: "\e041";
	font-family: "dripicons-v2" !important;
	position:absolute;
	left: 11px;
	top: 53%;
	transform: translateY(-50%);
	color:#fff;
	z-index:1;
	pointer-events: none;
}

/* tag-cloud */

.tag-cloud-I {
	margin: 0 0 5px 5px;
}

.tag-cloud-I a {
	padding: 2.5px 10px;
	font-size: 13.5px;
	color: #6e7ba6;
	background: #ebf0ff;
	border-radius: 5px;
}

.tag-cloud-I a:hover {
	background: #1471ee;
	color: #ebf0ff;
}

/* stats */

.stat-I,
.auth-I a {
	padding: 6px;
	border: 1px solid #e9e9e9;
	border-radius: 5px;
	background: #fff;
}

.stat-I span:not(span[id^="value"]),
.auth-I a span {
	font-size: 14.5px;
	padding-left: 10px;
	color: #000;
}

#stat_summary_div {
	margin-bottom: 15px;
}

.stat-I b,
.auth-I a i {
	padding: 1.5px 10px;
	background: #f1f5ff;
	font-size: 12.5px;
	border-radius: 100px;
	color: #000;
}

/* categories */

.category-I a {
	background: #ebf0ff;
	padding: 10px;
	border-radius: 5px;
	font-size: 12.5px;
}

.category-I a span {
	color: #6e7ba6;
}

.category-I a b {
	padding: 1.5px 10px;
	border-radius: 100px;
	background: #a2b3e380;
	color: #000;
}

.category-I a:hover {
	background: #1471ee;
}

.category-I a:hover > span {
	color: #fff;
}

.category-I a:hover > b {
	color: #fff;
	background: #a2b3e380;
}

/* category child */

.child-C1 li {
	position: relative;
	padding-right: 30px;
}

.child-C1 li:after {
	position: absolute;
	content: '↫';
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	background: linear-gradient(45deg, yellowgreen, #009cff);
	color: #fff;
	font-size: 16px;
}

/* archive */

.arch-I a {
	background:#fff;
	border-radius: 5px;
}


.arch-I a section {
	padding-left: 10px;
	font-size: 13.5px;
}

.arch-I a section span {
	color:#000;
	padding-left:3px;
}

.arch-I a section i {
	color:#e86f80;
}

.arch-I a:hover {
	background: #f1f5ff;
}

.arch-I a:hover > section span {
	color: #5968bc;
}

.arch-I a:hover > section i {
	color: #071d98;
}

.arch-I a div {
	width: 25px;
	height: 25px;
	background-size: 100% 100% !important;
}

/* 

تصویر گذاری برای هر فصل بخش آرشیو  برای دیدن تصاویری که
پیش فرض هستن کافیه لینک تصویر رو کپی کنید و در مرورگرتون ببینیدش

*/

/* بهار */

.arch-I a div[name*="Farvardin"],
.arch-I a div[name*="Ordibehesht"],
.arch-I a div[name*="Khordad"],
.arch-I a div[name*="فروردين"],
.arch-I a div[name*="ارديبهشت"],
.arch-I a div[name*="خرداد"],
.arch-I a div[name*="March"],
.arch-I a div[name*="April"],
.arch-I a div[name*="May"]
{
	background: url('https://www.svgrepo.com/show/99381/spring.svg');
}

/* تابستان */

.arch-I a div[name*="Tir"], 
.arch-I a div[name*="Mordad"], 
.arch-I a div[name*="Shahrivar"],
.arch-I a div[name*="تیر"],
.arch-I a div[name*="مرداد"],
.arch-I a div[name*="شهریور"],
.arch-I a div[name*="June"],
.arch-I a div[name*="July"],
.arch-I a div[name*="August"]
{
	background: url('https://www.svgrepo.com/show/9335/summer.svg');
}


/* پاییز */

.arch-I a div[name*="Mehr"],
.arch-I a div[name*="Ababn"],
.arch-I a div[name*="Azar"],
.arch-I a div[name*="مهر"],
.arch-I a div[name*="آبان"],
.arch-I a div[name*="آذر"],
.arch-I a div[name*="September"],
.arch-I a div[name*="October"],
.arch-I a div[name*="November"]
{
	background: url('https://www.svgrepo.com/show/64198/autumn.svg');
}

/* زمستان */

.arch-I a div[name*="Dey"],
.arch-I a div[name*="Bahman"],
.arch-I a div[name*="Esfand"],
.arch-I a div[name*="دی"],
.arch-I a div[name*="بهمن"],
.arch-I a div[name*="اسفند"],
.arch-I a div[name*="December"],
.arch-I a div[name*="January"],
.arch-I a div[name*="February"]
{
	background: url('https://www.svgrepo.com/show/246278/snowing-winter.svg');
}


/* authors */

.auth-I a {
	background: #a3d4f9;
	border-color: #a3d4f9;
}

.auth-I a span {
	color: #000;
}

.auth-I a i {
	background: #f1f5ff;
	color: #000;
}

/* links and daily link */

.link-I a {
	border-radius: 5px;
	background: #f1f5ff;
	font-size: 14.5px;
	color: #5f6fa0;
}

.link-I a:hover {
	background: #1471ee;
	color: #fff;
}

/* settings transition */

.transAll *,
.transIt,
.mainTxt a {
	transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;
}

/* position settings */

.sticky {
	position: sticky;
	position: -webkit-sticky;
	top: 20px;
}

/* pretty blog with uniStyle🤤  */

::selection {
	background:gold;
	color:#000;
}

body::-webkit-scrollbar-thumb {
	background: white;
}

body::-webkit-scrollbar {
	border-right: 5px solid #3b92e9;
	background: #70b4f7;
	border-left: 5px solid #2177cd;
}

/* pagination */

.pagination-box {
	background: #fff;
	border-radius: 7px;
	box-shadow: -3px 3px 7px #c2c6d8;
	padding-bottom: 3px;
}

.pagination-box a {
	display: block;
	text-align: center;
	padding: 0.5px 15px;
	background: #f1f5ff;
	border-radius: 100px;
	color: #000;
	margin-left:5px;
	margin-bottom:5px;
}

.spacer-pagination {
	font-weight: 900;
	color: #c6c7c9;
	    margin: 0 10px 0 15px;
}

.pagination-box a.current {
	color: #fff;
	background: #1471ee;
}


/*responsive*/

@media only screen and (max-width:860px) {
	main  {
		width: 100%;
	}
	
	.mainPartWrap {
		justify-content:center;
		align-items:center;
		flex-direction:column-reverse;
	}
	
	aside,
	#article-container {
		width:100%;
	}
	
	aside {
		margin-top:25px;
	}
}