html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0px;
    font-size: 100%;
    /*font: inherit;*/
    /*vertical-align: baseline;*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/*a:link , a:visited {
    text-decoration:underline;
    color: #6A5ACD;
    background-color: transparent
}
a:hover , a:active {
    text-decoration: underline overline;
    color: #191970 ;
    background-color : #C9C3ED ;

}*/

body {
    line-height: 1;
    overflow-x: hidden;
    max-width: 100%;
    direction: rtl;
    /*background-color:#FFE4CA ;*/
    font: 10px Samim;
    margin: 0 auto;
    min-height: 100%;
    font-family: SamimB, Tahoma !important;
}

#MainDiv {
    max-width: 100%;
    width: 960px;
    margin: 0px auto;
    padding: 0px;
    min-height: 100%;
    border: solid thin ghostwhite;
    /*height: 1000px;*/
    /*border-radius: 7px;*/
    /*border: solid #002B00 1px;*/
    /*background: linear-gradient( darkgreen,white 100%);*/
    /*background: linear-gradient(rgb(115,189,254) 0px,rgb(138,213,252) 15px, rgb(255,255,255) 85px,rgb(130,200,240) 110px,rgb(138,213,252) 130px, rgb(255,255,255) 250px,rgb(130,200,240) 350px,rgb(99,229,253) 100%);*/
    /*box-shadow: 5px 5px 5px #FFC58A;*/
}

.CardMy {
    /*width: 100%;*/
    background: var(--zekr-card-bg, #ffffff);
    color: var(--zekr-text, #1f2937);
    border: 1px solid var(--zekr-border, #e5e7eb);
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    padding: 5px;
    margin: 5px;
    /*margin: 5px;*/
    /*text-align: center;*/
    /*line-height: 5px;*/
    font: bold 14px SamimB;
    /*background-color: #E6FFE6;*/
}

.CardMyB {
    margin: 5px;
    padding: 5px;
    background-color: #E6FFE6;
    border: 1px solid var(--zekr-border, #e5e7eb);
    border-radius: 24px;
    text-align: right;
    /*box-shadow: 0 12px 28px rgba(0,0,0,.08);*/
}

.TitleSite {
    background-color: #ACE1AF; /*#0078D4; /*    #3F51B5; /*#0078D4; /* #249FC9; /*  #297FB8;*/
    height: 35px;
    margin: 0px auto;
    padding: 0px;
    width: 100%;
    border-radius: 10px 10px 0px 0px;
}

.vst {
    text-align: right;
}

.padd10 {
    padding: 10px;
}

.marg10 {
    margin: 10px;
}

.hidden {
    display: none;
}

.titrtable {
    background-color: lightseagreen;
    /*background-color: #EBEBEB;*/
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 9pt;
    font-family: SamimB;
}

.titrtbltd {
    /*background-color: lightseagreen;*/
    /*background-color: #EBEBEB;*/
    /*font-weight: bold;*/
    /*color: white;*/
    /*text-align: center;*/
    font-size: 8pt;
    font-family: Samim;
}

.MyTableTH {
    width: 10%;
    background-color: #EBEBEB;
    font-weight: bold;
    color: #000080;
    text-align: center;
}

.IconButt {
    border: thin solid cornflowerblue; /*rgb(0,164,142);*/
    width: 32px;
    height: 32px;
    margin: 0px;
    padding: 0px;
}

.fard {
    text-align: right;
    font-family: SamimB;
    background-color: white;
}

.zoj {
    text-align: right;
    font-family: SamimB;
    background-color: lightcyan;
}

.titrtable {
    background-color: lightseagreen;
    /*background-color: #EBEBEB;*/
    font-weight: bold;
    color: white;
    text-align: center;
    font-family: SamimB;
}

.tabi {
    font-size: smaller;
    font-weight: bolder;
}


.MyFoot {
    margin: 0px auto;
    font-size: small;
    font-family: Samim,Tahoma;
    background-color: #ACE1AF; /*#0078D4; /*2D3E50;*/
    /*background-color: #0076C5;*/
    /*border-radius: 5px;*/
    width: 100%;
    min-height: 20px;
    color: white; /*#4C5156; */
    height: 25px;
    border-radius: 0px 0px 10px 10px;
    border-bottom: solid #7579E7; /*#0078D4;*/
}

.POne {
    margin: 0px auto;
    padding: 0px;
    min-width: 100%;
}

.PTwo {
    margin: 0px auto;
    padding: 3px;
    min-width: 100%;
    clear: both;
    background-color: #BFF6C3; /*A4C9F5;*/
    color: white;
}

.panel-heading {
    overflow: auto;
    color: darkgreen !important; /*4C5156  */
    background-color: #BFF6C3; /*A4C9F5; 2D3E50;*/
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}

.MyLi220 {
    font-size: 12px;
    text-align: right;
    font-family: Samim,BNazanin, Tahoma !important;
    background-color: #E8F9E8 ;  /* #BFF6C3; /*#FFFF9D ; */
}

.litContact {
    color: #F5F9FE;
    font-size: small;
    font-family: SamimB;
    text-decoration: underline;
    font-weight: bold;
}

.DinMain0 {
    background-color: #f3fef4;
    margin-left: 2px;
    margin-right: 2px;
}

.DinMain1 {
    background-color: #F8FCF5;
}

.DinMain2 {
    background-color: #FCF5F5
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

.mycenter {
    text-align: center;
    margin: 0 auto;
}

.clickrow {
    cursor: pointer;
}

    .clickrow:hover {
        background: #E8F5E9;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

    .table thead tr {
        background: #2E7D32;
        color: #fff;
    }

    .table > thead > tr > th {
        border-bottom: none;
        text-align: center;
        vertical-align: middle;
    }

    .table > tbody > tr > td {
        vertical-align: middle;
        text-align: center;
    }

.fard {
    background: #fff;
}

.zoj {
    background: #F8FCF8;
}

.table tbody tr:hover {
    background: #E8F5E9;
    transition: .2s;
}

/* Read Icon */

/*.table tbody img {
    width: 24px;
    height: 24px;
    transition: .2s;
}*/

/*.table tbody a:hover img {
    transform: scale(1.15);
}*/


/**
{
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}*/

.PrRow {
    border: solid 1px rgb(0,164,142);
}

.results {
    background-color: #bff6c3;
}

.RTL {
    direction: rtl;
}

.results tr[visible='false'],
.no-result {
    display: none;
}

.results tr[visible='true'] {
    display: table-row;
}

.counter {
    padding: 8px;
    color: #ccc;
}

.MyWidth95 {
    width: 95%;
}

.MyWidth25 {
    width: 25%;
}

.MyWidth55 {
    width: 55%;
}

.MyWidth20 {
    width: 20%;
}

.divMySearchs {
    font-family: Samim,BTitr, tahoma !important;
    padding: 5px;
    margin: 2px auto;
    /*max-width: 85%;*/
    width: 100%;
    background-color: white;
    height: 34px;
    /*font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;*/
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.DivPils {
    padding: 5px;
    margin: 5px auto;
    width: 600px;
    text-align: center;
    max-width: 95%;
    /*background-color: #DFF0D8; 
    border: thin solid #007900;*/
    /*background-color: #E9F4FC; 
    border: thin solid #0074E8;*/
    /*background-color: #bff6c3;*/ /*#E5E5E5  ; /*#C4F0FF ; /*DFF0D8; */
    /*border: thin solid #007900;*/
    font-size: 12px;
}


.divMyMenus {
    padding: 5px;
    margin: 2px auto;
    width: 600px;
    max-width: 100%;
    text-align: right;
    font-size: 14px;
    text-align: center;
    /*background-color: #E9F4FC;*/
    /*border: thin solid #0074E8*/
}

.DivMatn {
    background-color: #bff6c3; /*#CEE8F9;*/
    margin: 2px auto;
    padding: 10px;
    text-align: justify;
    /*    width: 600px;*/
    max-width: 95%;
}

.DivBox {
    background-color: #F0F0F0; /*#CEE8F9;*/
    margin: 2px auto;
    padding: 10px;
    text-align: justify;
    /*    width: 450px;*/
    max-width: 95%;
}

.DivTasvir {
    background-color: #ffffff;
    margin: 2px;
    padding: 2px;
    text-align: center;
}

.MargWidth {
    padding: 5px;
    margin: 2px auto;
    /*width: 600px;*/
    width: 100%;
}

.MargWidth95 {
    padding: 5px;
    margin: 2px auto;
    /*width: 575px;*/
    width: 95%;
}


/*div, span, li
{
 font-family: Helvetica;
}*/

.Marg0 {
    padding: 0px;
    margin: 0px;
    border: 0px;
}


.TitrAha {
    font-family: Samim,BTitr, tahoma !important;
    padding: 5px;
    /*margin:5px;*/
}

.TagAha {
    font-family: Samim,tahoma !important;
    padding: 5px;
    text-decoration: none;
    color: white;
    word-wrap: break-word;
    /*margin:5px;*/
}


.Myauto {
    margin: 0px auto;
    font-size: small;
    font-family: Samim,Tahoma;
    background-color: #A4C9F5; /*2D3E50;*/
    /*background-color: #0076C5;*/
    /*border-radius: 5px;*/
    width: 100%;
    min-height: 20px;
    color: #4C5156;
}

.ColoW {
    color: white;
}

.FontSmallB {
    font-size: small;
    font-weight: bolder;
}

.FontSmall {
    font-size: small;
}

.FontSM {
    font-size: smaller;
    font-weight: bold;
}

.h1Class {
    /*color: #24B655;*/
    color: #FFFFff;
    /*width: 402px;*/
    /*font: bold 20px 'B Homa';*/
    font-family: Samim,BTitr, tahoma !important;
    /*margin-top: 5px;*/
    /*margin-right:20px;*/
    text-shadow: 1px 1px 1px black;
    font-size: 16px;
    font-weight: bold;
    /*    width: 100%;*/
    /*text-align:center;*/
}

.puser {
    margin: 5px 5px 5px 20px;
}

h1 {
    font-size: 12px;
    /*font-size: large;*/
    /*color: #003E00;*/
    /*float: right;*/
    /*margin :  0.77em  ;*/
    font-family: Samim,BTitr, tahoma !important;
    font-weight: bold;
    /*display: block;*/
    /*vertical-align: middle;*/
    /*margin-top: 0.67em;*/
    /*margin-bottom: 0.67em;*/
    margin: 5px 2px 5px 12px;
    /*margin-left: 0;
    margin-right: 0;*/
    vertical-align: middle;
    /*font-size: 1.0em;*/
}

.inputstl {
    font-size: 12px;
    font-family: Samim,Tahoma;
    padding: 5px;
    margin: 10px;
    max-width: 95%;
    border: solid 1px #173955;
    outline: 0;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #AACCE8), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #AACCE8 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

.BMTahoma {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    height: 25px;
    border-radius: 5px;
}

.MyLabelForm {
    float: right;
    font-size: 12px;
    font-family: Samim;
    font-weight: bold;
    margin-right: 15px;
    color: blue;
}

.MyLi2 {
    text-align: center;
    /*background-color: #ffffff;*/
    font-size: x-small;
    background-color: #E8F9E8; /*#FFFF9D;*/
}



.MyLi220Ad {
    font-size: 12px;
    text-align: right;
    font-family: Samim,BNazanin, Tahoma !important;
    background-color: azure /*#FFFF9D */;
}

.MyLi220L {
    font-size: 12px;
    text-align: left;
    font-family: Samim,BNazanin, Tahoma !important;
    background-color: lightgray; /*#FFFF9D ; */
    direction: ltr;
}



.MyLi2201 {
    font-size: 14px;
    text-align: right;
    font-family: Samim;
    width: 95%;
    margin: 5px;
    padding: 0px;
    background-color: #DFF0D8;
    border: thin solid white;
    /*white#008000; ; #D9D9D9*/
    /*margin:5px;*/
}

.padmarg0 {
    margin: 0px;
    padding: 0px;
    /*margin:5px;*/
}

i {
    font-family: Samim,BJadidBold, tahoma !important;
    text-align: right;
}

.tdGrp0 {
    font-family: SamimB,BJadidBold, tahoma !important;
    background-color: #00ADEF; /* rgb(0,164,142);*/
    color: white;
    text-align: left;
    font-size: 12px;
    margin: 5px;
    padding: 5px;
    height: 30px;
    border: 1px solid #ccc;
    vertical-align: middle;
    border-radius: 4px;
    /*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;*/
    /*max-width:95%;*/
    /*font-weight:bold;*/
}

.tdGrp1 {
    font-family: SamimB,BJadidBold, tahoma !important;
    background-color: lightgreen; /* rgb(0,164,142);*/
    color: darkslategrey;
    text-align: right;
    font-size: 12px;
    margin: 5px;
    padding: 5px;
    height: 30px;
    /*    border-radius: 4px;*/
    /*border: 1px solid lightgreen;*/ /* #ccc;*/
    vertical-align: middle;
    /*max-width:95%;*/
    /*font-weight:bold;*/
}

.rcornersMedia {
    border: 2px solid lightgreen; /*rgb(0,164,142);*/
    border-radius: 5px;
    /*background: url(img/paper.gif);
    background-position: left top;
    background-repeat: repeat;*/
    /*padding: 20px;*/
    width: 600px;
    max-width: 98%;
    font-size: 10px;
    /*border-radius: 10px;*/
    margin: 5px auto 0px;
}

.rcornersMedia2 {
    border: 2px solid grey;
    border-radius: 5px;
    /*background: url(img/paper.gif);
    background-position: left top;
    background-repeat: repeat;*/
    /*padding: 20px;*/
    /*width: 600px;*/
    max-width: 98%;
    font-size: 10px;
    /*border-radius: 10px;*/
    margin: 5px auto 0px;
    border-radius: 12px; /* گوشه‌های گرد مدرن */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* سایه بسیار ملایم */
    border: 1px solid green;
    transition: transform 0.2s;
}

.MyLi3tr {
    background-color: #E8F9E8;
}

.MyLi3 {
    font-family: SamimB,BJadidBold, tahoma !important;
    text-align: center;
    /*background-color: #AFBABC;*/
    color: darkslategrey;
    font-size: x-small;
    background-color: lightskyblue; /*rgb(115,189,254);*/
}

.tdGrp1Ad {
    font-family: SamimB,BJadidBold, tahoma !important;
    background-color: yellowgreen;
    color: white;
    text-align: right;
    font-size: 12px;
    margin: 5px;
    padding: 5px;
    height: 30px;
    border: 1px solid #ccc;
    vertical-align: middle;
    border-radius: 4px;
    /*max-width:95%;*/
    /*font-weight:bold;*/
}

.IconButt {
    border: thin solid cornflowerblue; /*rgb(0,164,142);*/
    width: 32px;
    height: 32px;
    margin: 0px;
    padding: 0px;
}

.aDecor {
    text-decoration: none;
}

.tdGrp {
    font-family: Samim,BJadidBold, tahoma !important;
    background-color: white; /* rgb(0,164,142);*/
    color: white;
    text-align: right;
    font-size: 12px;
    height: 30px;
    margin: 5px;
    /*max-width:95%;*/
    /*font-weight:bold;*/
}

.MyLi30 {
    text-align: right;
    background-color: #ffffff;
    margin: 2px;
    padding: 2px;
    border-radius: 10px;
    font-family: Samim,Tahoma;
    font-size: 12px;
    float: right;
}

.MyimgCircle {
    width: 50px;
    height: 50px;
    float: right;
    margin-left: 5px;
}

.MyimgCircle20 {
    width: 20px;
    height: 20px;
    float: right;
    margin-left: 5px;
}

.MyimgCircle30 {
    width: 25px;
    height: 25px;
    float: right;
    margin-left: 5px;
}

.MyimgCircle40 {
    width: 40px;
    height: 40px;
    float: right;
    margin-left: 5px;
}



.rcornersAd {
    border: medium solid gainsboro /*rgb(0,164,142)  */;
    border-radius: 5px;
    /*background: url(img/paper.gif);
    background-position: left top;
    background-repeat: repeat;*/
    /*padding: 20px;*/
    width: 600px;
    max-width: 98%;
    font-size: 10px;
    /*border-radius: 10px;*/
    margin: 5px auto 0px;
}

.rcorners3 {
    border: medium solid black; /*rgb(0,164,142);*/
    border-radius: 5px;
    /*background: url(img/paper.gif);
    background-position: left top;
    background-repeat: repeat;*/
    /*padding: 20px;*/
    /*    width: 600px;*/
    max-width: 98%;
    font-size: medium;
    /*border-radius: 10px;*/
    margin: 5px auto 0px;
}




.talarDetails {
    text-align: right;
    font-size: 13px;
    font-family: Samim,Tahoma;
}

.iconimg {
    width: 16px;
    height: 16px;
    font-family: Samim,Tahoma;
}



.MainDivNew {
    max-width: 100%;
    min-height: 100%;
    width: 960px;
    margin: 2px auto;
    padding: 5px;
    /*height: 1000px;*/
    border-radius: 7px;
    border: solid red 10px;
    /*background: linear-gradient(white  , darkgreen 100%) ;*/
    /*box-shadow: 5px 5px 5px #FFC58A;*/
}

#TitrDiv {
    max-width: 98%;
    width: 946px;
    background-color: #24B655;
    height: 35px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #24B655, #85E7A5);
}

#SiteTitle {
    color: white;
    font: bold 20px BYekan, Times New Roman;
    margin-top: 5px;
    text-shadow: 1px 1px 1px black;
}

#SiteOnvan {
    color: #24B655;
    width: 200px;
    font: bold 20px 'B Homa';
    font-family: BYekan, BTitr, tahoma !important;
    margin-top: 5px;
    text-shadow: 1px 1px 1px black;
}

#SiteLogo {
    width: 100px;
    margin: -5px 2px;
}

.FTitr {
    font-family: Samim,BBCNassim, BTitr, tahoma !important;
}

.FZar {
    font-family: 'B Zar', BZar, tahoma !important;
}

.FBaran {
    font-family: 'B Baran', BBaran, tahoma !important;
    font-size: 16px;
}

.FTahoma {
    font-family: tahoma !important;
    font-size: 16px;
}

.MyOverflo {
    overflow: auto;
}

#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(119, 119, 119, 1);
}

#custom-bootstrap-menu.navbar-default {
    font-size: 12px;
    background-color: rgba(52, 73, 94, 1);
    border-width: 1px;
    border-radius: 7px;
}

    #custom-bootstrap-menu.navbar-default .navbar-nav > li > a {
        color: rgba(191, 187, 187, 1);
        background-color: rgba(52, 73, 94, 1);
    }

        #custom-bootstrap-menu.navbar-default .navbar-nav > li > a:hover,
        #custom-bootstrap-menu.navbar-default .navbar-nav > li > a:focus {
            color: rgba(51, 51, 51, 1);
            background-color: rgba(66, 139, 202, 1);
        }

    #custom-bootstrap-menu.navbar-default .navbar-nav > .active > a,
    #custom-bootstrap-menu.navbar-default .navbar-nav > .active > a:hover,
    #custom-bootstrap-menu.navbar-default .navbar-nav > .active > a:focus {
        color: rgba(85, 85, 85, 1);
        background-color: rgba(58, 171, 220, 1);
    }

    #custom-bootstrap-menu.navbar-default .navbar-toggle {
        border-color: #3aabdc;
    }

        #custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
        #custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
            background-color: #3aabdc;
        }

        #custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
            background-color: #3aabdc;
        }

        #custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
        #custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
            background-color: #34495e;
        }

.MyWhite {
    color: white;
    background-color: #24B655;
    border-color: cadetblue;
    lighting-color: burlywood;
}



.trBack {
    /*background: url(img/paper.gif);*/
    background-position: left top;
    background-repeat: repeat;
    width: 100%;
    text-align: right;
    font-size: medium;
    background-color: white;
}

.menu-buttons {
    display: flex;
    flex-wrap: wrap;
    /*gap: 12px;*/
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    max-width: 900px;
}

.menu-btn {
    min-width: 50px;
    height: 28px;
    padding: 0 20px;
    margin: 4px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg,#0f9d8a,#0a7567);
    /*background: linear-gradient(180deg,#3d7db8,#2b5f91);*/
    color: white;
    font-family: Samim;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    transition: all .25s ease;
}

    .menu-btn:hover {
        background: linear-gradient(180deg,#13b19b,#0d8c7b);
        /*background: linear-gradient(180deg,#4a8fce,#356fa8);*/
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,.25);
    }

    .menu-btn:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

    .menu-btn:focus {
        outline: none;
    }






.sidebar-right {
    padding: 10px;
    background: #fafafa;
    border-left: 1px solid #e5e5e5;
    min-height: 400px;
}

/* باکس ها */

.sidebar-box {
    margin-bottom: 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

/* عنوان */

.sidebar-title {
    background: #ACE1AF;
    color: white;
    padding: 8px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

/* لینک سایت ها */

.sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sidebar-links li a {
        display: block;
        padding: 8px;
        border-bottom: 1px solid #eee;
        color: #333;
        text-decoration: none;
        font-size: 13px;
    }

        .sidebar-links li a:hover {
            background: #f5f5f5;
            color: #000;
        }

/* منوی سایت */

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sidebar-menu li a {
        display: block;
        padding: 9px;
        border-bottom: 1px solid #eee;
        text-decoration: none;
        color: #444;
        font-size: 13px;
    }

        .sidebar-menu li a:hover {
            background: #ACE1AF;
            color: white;
            padding-right: 15px;
            transition: all .2s;
        }

.audio-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px; /* گوشه‌های گرد مدرن */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* سایه بسیار ملایم */
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
}

    .audio-card:hover {
        transform: translateY(-2px); /* افکت حرکتی ظریف هنگام هاور */
    }

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* دایره‌ای کردن عکس‌ها */
    object-fit: cover;
    margin-left: 16px;
    border: 2px solid #eef2f3;
}

.content {
    flex: 1;
}

.title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.meta {
    font-size: 12px;
    color: #777;
    margin: 0 0 8px 0;
}

/* استایل‌دهی به پلیر برای کوچک شدن */
.audio-player {
    height: 30px;
    width: 100%;