/*

سلام دوستان فرهان هستم سازنده این  قالب تمامی قالب های من
قابلیت های متنوعی دارند و همگی هم رایگان هستند
راستش این رو مینویسم تا بتونید با این راهنمای کوچیک قالب رو ادیت کنید
برای تغییر هدر کافیه به خط : 300 بری
و اونجا توی اون پرانتز لینک تصویر مورد علاقتو بزاری کدش این شکلیه
background: url('لینک تصویرتون رو اینجا بزارید');
پس برید به خط 300 و تغییرش بدید
285 :واسه تغییر پس زمینه کل وب باید به خط
و اونجا به یه همچین کدی میرسید :
background: powderblue url('#');
خب اگر میخواید پس زمینه وبتون رنگ باشه کافیه به جای کلمه
powderblue
یه رنگ دیگه بزارید و اگر خواستید تصویر بزارید کافیه فقط به جای اون علامت # لینک تصویر
خودتون رو بزارید در مورد قسمت ها و قابلیت های دیگه این وب کافیه به آدرس زیر برید و
قالب شماره 3 رو انتخاب کنید و بخونید محض اطلاع باید بگم این قالب
هم پلی لیست موزیک داره و هم مای تسک که خیلی جالبه حتما ببینیدش

https://farhanwd.blog.ir/flag/templates-room

و آدرس وب من :

https://farhanwd.blog.ir

//--------------------------------------------------------------//
copyright 12/19/2021 7:50 PM Farhan Theme's collection Num : 03
//--------------------------------------------------------------//

*/

@charset "UTF-8";

/* reset kinde of */

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

/* global */

p {
    margin: 0.25em 0;
}

a {
    text-decoration: none;
}

img, table {
    max-width: 100%;
    padding-right: 11px;
    padding-left: 11px;
    background: #e4e7e7;
    border: 2px solid #b8b8b8;
}

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

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

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

/* html */

html {
    scroll-behavior: smooth;
}

/* margin and padding */

.mrg0, .ul {
    margin: 0;
}

.mrgb {
    margin-bottom: 1rem;
}

.pad10 {
    padding: 10px;
}

.pad15 {
    padding: 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;
}

/* border-radius */

.borOK {
    border-radius: 50%;
}

.borNOK {
    border-radius: 10rem;
}

/* 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;
}

.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;
}

/* 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;
}

/*fonts in blog never change*/

/* فونت های وبلاگ اینجاست بچه ها اصن تغییر ندید  این قسمت نیازی به ادیت نداره */

/* fonts */

@font-face {
    font-family: 'main';
    src: url(https://bayanbox.ir/download/1133625635203418600/Vazir.ttf);
}

@font-face {
    font-family: 'main2';
    src: url(https://bayanbox.ir/download/4157849144148293191/Normal.ttf);
}

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

/* body */

body {
    background:#cdecc0 url(//cdn.bayan.ir/blog/templates/120/body-bg.jpg);
    border-top:16px solid #e4e7e4;
    font-size: 12px;
}
::selection {
    background: #304a50;
    color: #e9f2f6;
}

a {
  color: #82d704;
    font-weight:bold;
  text-decoration: none;
  position: relative;
  transition: color 250ms ease;
}
a:hover {
    background: #ffe65c;
  color: #000000;
}

/* main */

main {
    width: 820px;
    margin: 20px auto;
}

/*header*/

.header-1 {
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;  /* پایین میتونید لینک هدر وب رو بزارید همون عکس گلگلیه که توی دمو یا همون پیشنمایش دیدید کافیه توی پرانتز پایین لینک خودتون رو بزارید */
   background:#e0e0e0 url(//bayanbox.ir/view/2278894617592441501/mirrored-squares.pn);
      box-shadow: 0 0 0px #b5b5b5;
      border: 0px solid #b6b9b9;
    border:11px solid #f0f3f5;
        border-top:23px solid #fafafa;
    padding: 11px;
    background-size: 100% 100%;
    flex-direction: column;
}

.header-1 .blt {
    font-size:25px;
    padding:6px;
    background: #ffffff url('http://bayanbox.ir/view/1941502382524971581/br.png');
    margin: 0 0 5px;
    border-radius:5px;
}

.header-1 .blt a {
    color: #64634a;
}

.header-1 strong {
    color:#64634a;
    padding:4px;
    background: #ffffff url('http://bayanbox.ir/view/1941502382524971581/br.png');
    font-size:19px;
    border-radius:5px;
}

/* article block list */

.article-block {
    width: 505px;
}

/* post item */

.post-I {
    background: #fefbfc url('https://cdn.bayan.ir/blog/templates/382/bg_stripes.png');
    box-shadow: 0 0 0px #b5b5b5;
    box-shadow: 0 0 0px 3px #ced7d9;
    margin-bottom: 15px;
    padding: 1px;
}

/* post name */

/* موقع ترجمه پدینگ رایت باید باشه */

.post-name a {
    font-size: 16px;
    color: #585a59;
padding:4px 22px 6px 1px;
        background:#f1f4f1 url(https://cdn.bayan.ir/blog/templates/382/folder_ico.png) right center no-repeat;
    border:1px solid #fdfcfc;
        border-bottom:2px solid #fbf8f8;
}
a:hover {
    background: #70cd7c;
  color: #e3eded;
}

.mainTxt {
   font-weight:bold;
    font-size: 16px;
    color: #404344;
    margin:12px 1px 0px 1px;
}
/*---block-post---*/
#block-post {
    width: 505px;
    float: right;
}
/*---block-message---*/
.align {
    margin-bottom: 15px;
}
.messages {
    background: #d5ddd7;
    box-shadow: 0px 0px 0px 9px #e6eae9;
    padding: 1px 1px;
    text-align: center;
}


/* post category just one */

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

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

/* post footer */

.post-footer {
    background:#b7c0dc url(https://cdn.bayan.ir/blog/templates/142/body-bg.png) repeat;
        border-top:0px solid #a8cf17;
    padding: 0px 15px;
    border-top: 2px solid #bfc0bf;
    margin-top: 6px;
}

.post-details .sum {
    width: 16px;
}

.post-details .sum div {
    width: 6px;
    height: 6px;
    margin: 1px;
    border: 1px solid #4b57ec;
}

.post-details .sum .close-ov {
    display: none;
}

.post-details[open] .sum .close-ov {
    display: block;
}

.close-ov {
    position: fixed;
    inset: 0;
    height: 100vh;
    backdrop-filter: blur(4px);
    background: rgba(0,0,0,0.2);
}

/* like and go to comments */

.like {
    padding: 2px 0 0;
}

.rated .like i:before,.rated .like-task i:before {
    content:"\f004";
}

.rated .like-task {
    color:#4c4bec;
}

.anim-like-farhan {
    width: 35px;
    height: 35px;
    background: #59f887; /*رنگ قلب لایک همون انیمیشنه که کلیک میکنید روی لایک نشون داده میشه*/
    transform: rotate(45deg);
    position: relative;
}

.left-top-cir{
    width: 35px;
    height: 35px;
    border-radius: 100px;
    background: inherit;
    top: -17.5px;
    position: absolute;
}

.right-top-cir {
    right: 17.5px;
    width: 35px;
    height: 35px;
    border-radius: 100px;
    background: inherit;
    position: absolute;
}

.red-anim {
    opacity: 0;
    visibility:hidden;
    animation-name: anim-red;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-play-state: paused;
    animation-iteration-count: 1;
}

.rated .like .red-anim {
    animation-play-state: running;
    visibility:visible;
}

@keyframes anim-red {
    0% {
        transform:translate(0,0);
        opacity:1;
    }
    
    25% {
        transform:translate(3px,-20px)
    }
    
    50% {
        transform:translate(-3px,-40px)
    }
    
    75% {
        transform:translate(3px,-60px)
    }
    
    100% {
        transform:translate(-3px,-80px);
        opacity:0;
    }
}


.like,
.comGo {
    display: inline-block;
    color: #2a73a0;
}

.comGo {
    padding-right: 6px;
}

/* read more */

.read-more {
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    margin-right: 10px;
    background: linear-gradient(45deg, #040846, #33bae7);
    border-radius: 2px;
}

/* post profile */

.post-profile {
    width: 290px;
    border-radius: 3px;
    background: #fff;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* header post profile */

.post-profile-header {
    height: 100px;
    border-radius: 3px 3px 0 0;
}

.headimg-pro {
    height: 100%;
    width: 100%;
}

.overlay {
    backdrop-filter: blur(3px);
}

.img-post-avatar {
    height: 64px;
    width: 64px;
    border-radius: 10px;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img-post-avatar img {
    padding: 6px;
    background: #fff;
    border-radius: inherit;
}

/* top data for post */

.top-date-for-post {
    padding: 6px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.top-data-aR {
    width: calc(100% - 50px);
    padding-left: 10px;
    white-space: pre;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.top-data-aL {
    direction: ltr;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
}

/* main post profile */

.main-data-post .b {
    text-align: center;
    display: block;
    padding-top: 12px;
}

.main-data-post {
    padding: 25px 10px 5px;
}

/* rate for post */

.rate-prof-post {
    margin-top: 10px;
}

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

.rate-I span:not(.rate-counter) {
    width: 50px;
    height: 50px;
    background: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #15a3d1;
    font-size: 30px;
    border-radius: 7px;
    padding-top: 5px;
}

.rate-I div {
    margin-top: 10px;
    text-align: center;
    background: aliceblue;
    border: 1px solid #478fcf;
    border-radius: 100px;
    color: #000;
    font-weight: 400;
}

.rate-I div:after {
    z-index: -1;
    content: '';
    position: absolute;
    border: 0;
    border-right: 10px solid #1886e7;
    border-bottom: 10px solid transparent;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-50deg);
}

/* how much seen */

.rate-I.seen span {
    padding: 0;
    background: aliceblue;
    color: #15a3d1;
}

.rate-I.seen div {
    background: aliceblue;
    border: 1px solid #478fcf;
    color: #000;
}

.rate-I.seen div:after {
    border-right-color: #1886e7;
}

/* how much comment */

.rate-I.feedback span {
    padding: 0;
    background: aliceblue;
    color: #15a3d1;
}

.rate-I.feedback div {
    background: aliceblue;
    border: 1px solid #478fcf;
    color: #000;
}

.rate-I.feedback div:after {
    border-right-color: #1886e7;
}

/* tag-and-cat in post profile */

.tag-and-cat .sum {
    width: 30px;
    height: 30px;
    background: #ffe6e6;
    border-radius: 100px;
    box-shadow: 0 0 3px #eaf4ff;
    font-size: 16px;
    padding-top: 3px;
    color: blueviolet;
    transition: all 0.6s ease-in-out;
}

.tag-and-cat[open] .sum {
    color: red;
    background: #fff;
    transform: rotate(46deg);
}

.tag-and-cat ul.por {
    padding: 10px;
    margin-top: 25px;
    background: #ffedf2;
    border-radius: 15px;
}

.more-I {
    padding: 5px;
    margin-bottom: 3px;
}

.more-I:first-child {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.6);
    color: #000;
    font-size: 11px;
}

.tag-post-pro {
    padding: 0 3px;
    margin: 0 0 1px 1px;
    background: rgba(255, 0, 0, 0.1);
    border-radius: 2px;
    font-size: 10px;
}

.tag-post-pro a {
    color: #000;
    font-weight: 600;
}

.tag-and-cat ul.por:after {
    content: '';
    border: 0;
    border-right: 15px solid #ffedf2;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: -6px;
    transform: rotate(-44deg);
    z-index: -1;
}

/* pagination box */

.pagination-box {
    background: powderblue;
    padding: 10px;
    border: 1px solid #6fc1cb;
    margin: 25px 0;
}

.pagination-box a {
    margin: 5px;
    padding: 4px 10px;
    border: 1px solid #c7c2c7;
    color: #00545e;
    background: powderblue;
    text-align: center;
    border-radius: 100px;
    font-weight: 600;
}

.pagination-box a.current {
    box-shadow: 0 0 6px 1px #6fc1cb;
    background: #6fc1cb;
}

/* دکمه قبلی */

.befo {
    border: 1px solid #c7c2c7;
    color: #00545e;
    background: powderblue;
}

/* دکمه بعدی */

.afte {
    border: 1px solid #c7c2c7;
    color: #00545e;
    background: powderblue;
}

/* جدا کننده ... */

.spacer {
    font-size: 15px;
    font-weight: 600;
    color: #ff280f;
}

/* comments in posts and pages */

.if-post-has-com {
    padding: 5px;
    display: block;
    text-align: center;
    background:url(http://bayanbox.ir/view/1395074413296743242/bg.png) #e8e8e8;
        border:1px solid #d0dcda;
        border-top:1px solid #d0dcda;
    border: 1px solid #6fc1cb;
    margin: 0 0 15px;
    border-radius: 100px;
    color: #fe2a2a;
}

.no-comm {
    color: #000;
    font-size: 14px;
    display:none;
}

.no-comm[name="۰"] {
    display:block;
}

.dot-com-no {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    animation-name: farhanComments;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.dot-com1 {
    animation-delay: 0.3s;
}

.dot-com2 {
    animation-delay: 0.6s;
}

.dot-com3 {
    animation-delay: 0.9s;
}

@keyframes farhanComments {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

/* per comment */

.comments {
    margin-bottom: 10px;
    background:url(http://bayanbox.ir/view/8183506170057604885/back.png) #eff0f0;
    border: 2px solid #fff;
}

.commet-header-extra {
    width: calc(100% - 100px);
    margin-right: 15px;
}

.comment-name {
    color: #00bd57;
    font-weight: 600;
}

.comment-web {
    color: aliceblue;
    width: 25px;
    height: 25px;
    background: linear-gradient(45deg, #2196f3, #00dc5ed6);
    padding-top: 2px;
}

.comment-main {
    border-right: 1px solid #6fc1cb;
    padding: 0 10px;
    margin: 8px 17px 8px 0;
    color: #000;
}

/* comment reply */

.coms-rep-but .sum {
    margin-bottom: 8px;
    width:fit-content;
}

.coms-rep-but[open] .sum {
    margin-bottom: 0;
}

.coms-rep-but .sum, .coms-rep-but .sum::marker {
    color: #2a73a0;
    font-weight: 600;
    background: #effbb2;
}

.comment-second {
    margin: 22px 0px;
    background:#f8fee1 url(https://cdn.bayan.ir/blog/templates/142/body-bg.png) repeat;
    border: 3px solid #fff;
}

/*comment form*/

.toprelo {
    display: block;
    top: 100%;
    left: 50%;
    width: 25px;
    height: 25px;
    transform: translate(-50%, -50%);
    background: #335a99;
    border-radius: 50%;
}


.toprelo:after {
    content: '↺';
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding-top: 3px;
}

.formField2 textarea {
    width:100%;
    border:0;
    background:#ffffff;
    resize:none;
    max-height:100px;
}

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

.formField2 .fldcontent {
    margin-right:0;
    padding-left:0;
}

.bComForm .commentAvatar img {
    border:0;
    border-radius:50%;
    width:35px;
    height:35px;
}

div.inputFix input.text,select {
    padding:2px;
    border:0;
    width:100%;
    color:#000;
    background:#dfe5e7;
    appearance:none;
    font-size:11px;
    border-radius:0;
}

select {
    cursor:pointer;
}

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

.in {
    display:flex;
    flex-wrap:wrap;
    width:100%;
}

.inputFix {
    padding:0;
}

.bComForm .hasComment {
    margin-left:0;
}

.in .formField2 {
    padding-left:5px;
    flex-grow:1;
}

.formField2 input[type="submit"] {
    margin-top: 0 !important;
    text-align: center;
    width: 100%;
    padding: 5px;
    background: #67d449;
    color: #ff6b38;
    margin-bottom:8px;
}


/* side bar */

aside {
    width: 290px;
    background: #f1f3f4 url(http://bayanbox.ir/view/8183506170057604885/back.png);
        box-shadow: 0 0 0px #b5b5b5;
    border: 3px solid #b6b9b9;
}

/* side per part😂 */

.side-part {
    padding: 15px;
    border: 1px solid #c7c2c7;
    margin-bottom: 15px;
}

.side-header {
    border: 1px solid #c7c2c7;
    padding: 0 5px;
}

.side-header:after,
.field .sum:after {
    content: '';
    position: absolute;
    border-right: 12px solid #b5cf02;
    border-bottom: 11px solid transparent;
    transform: rotate(271deg);
    bottom: 0px;
    left: 100%;
}

/* about Me */

.info strong {
    color: #1d2a21;
}

/*

بخش زیر صرفا به این خاطر نوشته شده
که اگر خواستید عکس توی بخش درباره من رو گردالی کنی
بتونید کافیه اون عدد رو بین 0 تا 100 تغییر بدید

*/

.info img {
    border-radius: 0;
}

/* long description */

.info div {
    color: #000;
    font-size: 14px;
}

/* follow button */

.follow-but1 {
    text-align: center;
    margin-top: 10px;
    
}

.follow-but1 a {
    color: #000;
    display: block;
    border: 1px solid #b9d4cf;
    padding: 5px;
    border-radius: 100px;
}

/*search*/

div#srchBx {
    margin: 0;
    padding: 0;
    border: 0;
    background: #c7cedb;
    border-radius: 0;
}

.search-box .submit {
    background: transparent;
    position: absolute;
    left: 0;
}

.search-box input.text::placeholder {
    color: #fff;
}

.search-box input.text {
    color: #fff;
    padding: 0 6px 0 40px;
}

form[action="https://www.google.com/search"] {
    position: relative;
}

.search-box .search-wrapper {
    margin: 0;
    width: 100%;
    position: relative;
}

.search-box .search-wrapper:after {
    content:"\f002";
    color:#093867;
    position: absolute;
    left: 0;
    width: 35px;
    height: 30px;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* menu */

.menu {
    margin-bottom: 6px;
    text-align: center;
}

.menu a {
    padding: 5px;
    border: 1px solid #c7c2c7;
    display: block;
    border-radius: 2px 16%;
    color: #000;
    overflow: hidden;
    position: relative;
    transition: all 0.6s ease;
}

.menu a:after {
    content: '';
    background: linear-gradient(45deg, powderblue, #8dc7e7);
    position: absolute;
    width: 0;
    inset: 0;
    z-index: -1;
    transition: all 0.6s ease;
}

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

.menu a:hover:after,
.recent-comment a:hover:after {
    width: 100%;
}

/* recent comments */

.recent-comment {
    margin-bottom: 8px;
}

.recent-comment a {
    color: #000;
    padding: 4px;
    border: 1px solid #c7c2c7;
}

.recent-comment a div {
    width: calc(100% - 48px);
    padding-left: 5px;
}

.recent-comment a:after {
    left: 0;
    content: '';
    width: 0%;
    position: absolute;
    background: linear-gradient(45deg, powderblue, #8dc7e7);
    top: 0;
    z-index: -1;
    bottom: 0;
    transition: all 0.6s ease;
}

.recent-comment a:hover {
    color: #000;
}

/* MT.BT.MP.THE = you can use this feature for these names => My Tasks . Blue Tags . Mini Posts . The Events */

.task-I {
    margin: 0 0 2px 2px;
    padding: 4px 6px;
    background: #d8edbf;
    font-size: 12px;
    font-weight: 600;
    flex-grow: 1;
    text-align: center;
}

.shnotOp {
    display: inline-block;
}

.shOp {
    position: fixed;
    top: 15px;
    right: 15px;
    background: #040846;
    color: #fff;
    display: none !important;
    width: 25px;
    height: 25px;
}

.task-I[open] .sum .shOp {
    display: flex !important;
}

.task-I .sum:before {
    content: '\f0c6';
    padding-left: 4px;
    color: #000;
}

.put-task-here {
    position: fixed;
    height: 100vh;
    backdrop-filter: blur(3px);
    background: rgba(0,0,0,0.2);
    inset: 0;
}

.MT-BT-MP-THE {
    width: 250px;
    background: #a9e990;
    box-shadow: 0 0 30px 6px #6f9ff5;
    border-radius: 5px;
    margin: 25px auto;
}

.date-tasks {
    padding: 5px;
    width: fit-content;
    display: inline-block;
    margin: 5px auto;
    border-radius: 3px;
    background: #bdf660;
}

.main-txt-task {
    font-weight: normal;
    font-size: 13px;
    padding: 0 5px 5px;
}

.name-task {
    padding: 0 5px 4px;
    display: block;
    font-size: 16px;
}

.footer-task {
    padding: 5px;
    border-top: 1px solid #c7c2c7;
}

.like-task, .com-task {
    font-size: 15px;
    color: #040846;
}

.read-task {
    color: #0b5c81;
}

/* music */

.music-I {
    margin-bottom: 10px;
    background: #a9e990;
}

.name-music {
    padding: 5px;
    margin-right: auto;
}

.img-con-music:after {
    content: '';
    border: 3px solid #fff;
    top: 5px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    left: 5px;
    z-index: 1;
}

.music-con {
    width: 35px;
    height: 35px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.music-con p {
    margin:0;
}

.img-con-music {
    width: 73px;
    height: 73px;
    margin-right: 5px;
}

.img-con-music img {
    width: 100%;
    height: 100%;
}

.music-con audio {
    position: absolute;
    left: -8px;
    width: 100px;
    height: 36px;
    filter: opacity(0.5);
    -moz-transform: scale(0.9);
}

/* recent and popular and most view and most commented posts */

.field {
    padding: 15px;
    border: 0;
    border-top: 1px solid #c7c2c7;
}

.field[open] {
    border: 1px solid #cb6fbe;
}

.field .sum {
    top: -12px;
    padding: 0 51px;
    border: 1px solid #bdbdbc;
    background: #c7cedb;
    color: #000;
}

.field .sum::marker {
    color: #268daf;
}

.field ul.ul {
    margin: 8px 0 0;
}

.side-post {
    margin-bottom: 10px;
}

.side-post a {
    justify-content: space-between;
    padding: 5px;
    background: #15efc8;
    color: #000;
}

/* links and daily links and archive */

.link {
    margin-bottom: 8px;
}

.link a {
    padding: 5px;
    display: block;
    text-align: center;
}

/* links */

.Links .link a {
    color: #000;
    background: #d1fa87;
}

/* daily link */

.Daily .link a {
    color: #000;
    background: #a9e990;
}

/* archive */

.Archive .link a {
    color: #000;
    background: #a9e990;
    display: flex;
}

.Archive .link a div.plmc,
.cate a div.plmc {
    min-width: 25px;
    height: 25px;
    font-weight: 600;
    color: #000;
    border: 1px solid #6fc1cb;
    background: #d1fa87;
}

/* categories */

.cate,
ul.ul.subC {
    margin-bottom: 8px;
}

.cate a {
    color: #000;
    background: #a9e990;
    padding: 5px;
}

.cate a div.plmc {
    color: #000;
    border: 1px solid #6fc1cb;
    background: lightskyblue;
}


/* category child */

.subC .cate a {
    background: #94c1d6;
    margin-right: 20px;
    color: #fff;
    position: relative;
}

.subC .cate a:before {
    content: '↯';
    position: absolute;
    right: -21px;
    color: #000;
    font-size: 15px;
    transform: rotate(30deg);
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #a9e990;
    border-radius: 100px;
}

.subC .cate a div.plmc {
    color: #fff;
    border: 1px solid #6fc1cb;
    background: #a9e990;
}

/* tag cloud */

.tag-C {
    padding: 1px 6px;
    margin: 0 0 2px 2px;
    font-size: 12px;
    background: #a9e990;
    border: 1px solid lightseagreen;
    font-weight: 600;
}

.tag-C a {
    color: #000;
}

.footer-web {
    padding: 15px;
    background: #a9e990;
    margin-top:20px;
}

.footer-web a {
    color: #000;
    font-family: cursive;
    background: linear-gradient(45deg, #54a1d0, #87cefa);
    padding: 2px 6px;
    border-radius: 100px 0 0 100px;
}

/* موقع ترجمه بکنمش بیفور */

.tag-C:after {
    content: '#';
}

/* side bar */

aside {
    width: 290px;
}

/*typo graphy*/

.mainTxt {
    font-size: 12px;
}

blockquote {
    border: 0;
    padding: 10px 5px 5px;
    text-align: center;
    margin: 18px 0;
    font-style: normal;
    position: relative;
     background: linear-gradient(45deg, #ebfff0, #ffffff);
    border-radius: 5px;
}

blockquote:after {
    content: '❝';
    position:absolute;
    top: 0;
    left: 50%;
    display: block;
    font-size: 25px;
    width:25px;
    transform: translate(-50%, -50%) rotate(180deg);
    height:25px;
    background: #b9fb6a;
    color: #0bd59c;
    border-radius: 3px 57% 15px;
    box-shadow: 0 0 1px #000;
}

.mainTxt a, .main-txt-task a {
    color:#0fbfff;
    background:#e6f4f1;
    text-decoration:1px underline solid #ebbc14;
}

span[style="text-decoration: line-through;"] {
    text-decoration: 1px wavy line-through red !important;
}

.main-txt-task audio, .mainTxt audio {
    max-width:100%;
    height:36px;
    display:block;
    margin:8px auto;
    border-radius: 100px;
    filter: invert(1) sepia(1) hue-rotate(113deg);
}

.main-txt-task hr, .mainTxt hr {
    border: 0;
    border-bottom: 1px dashed #7ab3c5;
}


/* این قسمت اصلا نباید تغییر داده بشه لطفا به هیچ وجه این قسمت رو تغییر ندهید */

.fa,.field .sum::marker,.sum:after,.sum:before,.search-box .search-wrapper:after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
              }
img {
    transition: all .4s ease;
}
img:hover {
    transform: scale(1.1);
}
html{scroll-behavior: smooth;}
#scrollToTop {
     width: 64px;
        height: 45px;
        background: #eed958 url('http://bayanbox.ir/view/7444602683029121626/1-5.png') no-repeat;
        border-radius: 7px;
        box-shadow: 0 0 15px 3px #238CE4;
        opacity: .4;
        position: fixed;
        bottom: 10px;
        right: 10px;
        transition: opacity .4s ease 0s;
}
#scrollToTop:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px #00AF66;
}
}
img {
    filter: grayscale(0%);
}
img:hover {
    filter: grayscale(100%);
}
img {
    transition: all .4s ease;
}
img:hover {
    transform: scale(1.1);
}
html{scroll-behavior: smooth;}
#scrollToTop {
     width: 64px;
        height: 45px;
        background: #81ba4f url('http://bayanbox.ir/view/7444602683029121626/1-5.png') no-repeat;
        border-radius: 7px;
        box-shadow: 0 0 15px 3px #238CE4;
        opacity: .4;
        position: fixed;
        bottom: 10px;
        right: 10px;
        transition: opacity .4s ease 0s;
}
#scrollToTop:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px #7900af;
              }
img {
    filter: grayscale(0%);
}
img:hover {
    filter: grayscale(100%);
}
img {
    transition: all .4s ease;
}
img:hover {
    transform: scale(1.1);
}
html{scroll-behavior: smooth;}
#scrollToTop {
     width: 64px;
        height: 45px;
        background: #ffbe1f url('http://bayanbox.ir/view/7444602683029121626/1-5.png') no-repeat;
        border-radius: 7px;
        box-shadow: 0 0 15px 3px #238CE4;
        opacity: .4;
        position: fixed;
        bottom: 10px;
        right: 10px;
        transition: opacity .4s ease 0s;
}
#scrollToTop:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px #df9716;
}
img {
    filter: grayscale(0%);
}
img:hover {
    filter: grayscale(100%);
}