<style>
.category_title>a {
    padding: 6px 10px;
    font-size: 20px;
    color: #2577b1;
    border: 1px solid #dfdfdf;
    background: linear-gradient(0deg, #edf6fd, #f6fafe);
    display: block;
}

.category_title>.CollapseIcon {
    position: absolute;
    left: 4px;
    top: 6px;
    border: unset;
}

.category_title {
    position: relative;
    clear: both;
}


.sub_forums>div {
    display: table-cell !important;
    vertical-align: middle !important;
}

.forum-icon {
    text-align: center !important;
    width: 46px !important;
    padding-right: 10px;
}

.sub_forums {
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
}

.forum-numrs {
    width: 20%;
    text-align: left;
}

.forum-stats {
    padding-right: 10px;
    width: 35%;
}

.forum-last-post {
    width: 20%;
    font-size: 11px;
    line-height: unset;
    margin: 0;
    padding: 0 10px 0;
    float: unset;
}



.forum-stats>.title_n>a {
    color: #2577b1 !important;
    font-size: 14px;
}

.forum-stats>div,
.sub_forums a {
    color: #000;
}

.forum-last-post a,
.forum-last-post .last_time_ago,
.forum-last-post i,
.forum-last-post .no_post {
    color: #2577b1 !important;
    font-weight: normal;
}


.describe,
.title_n,
.node-subNodeMenu {
    padding: 0;
}

.sections {
    background: unset;
    border: unset;
    width: unset;
    padding: unset;
    display: unset;
    border-radius: unset;
}

.sbp_forum {
    padding: 0 10px;
}

.forum-numrs>dl {
    display: inline-block !important;
    margin: unset !important;
    text-align: center;
    width: 20%;
}

.forum-numrs>dl>dtt,.forum-numrs>dl>dd {
    display: block !important;
    margin: unset !important;
}

.Info_last_post, .sub_forums>.forum-last-post>.Photo {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.sub_forums>.forum-last-post>.Photo {
    width: 40px;
    height: 40px;
    background-size: 100%;
    border-radius: 100%;
}

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

.subNodeMenu>li {
    padding: 0;
    margin: 0;
    line-height: unset;
    border-bottom: 1px solid #ddd;
    display: block;
}

.subNodeMenu>li>a {
    display: block;
    padding: 10px 25px 10px 0px !important;
    margin: 0;
    text-decoration: none;
}

.subNodeMenu>li>a:hover {
    background-color: #edf6fd9e;
}

@media (max-width:800px) {

    .forum-numrs {
        text-align: right;
        margin-top: 25px;
    }

    .sub_forums,
    .sub_forums>div {
        width: 100%;
        display: inline-block !important;
    }

    .forum-stats {
        width: 80% !important;
    }

    .forum-last-post {
        width: 100% !important;
        padding: 1rem 3rem;
    }

    .sub_forums>.forum-stats>div>ol {
        width: 300px;
        display: none;
    }

    .node-subNodeMenu{
        display: none;
    }

    .forum-stats, .forum-numrs, .forum-last-post {
        padding-right: 50px;
    }

    .forum-icon {
        position: absolute;
        right: 0;
    }
}
</style>

<div class="sections">
{if {$SHOW_SUB_SECTIONS}}
<!-- start_category-in_page_forum -->
<ul class="categorys">
<li class="category forum_sub">
<span>{$lang['forum_sub']} : {$Section_Title}</span>
</li>
{/if}
{Des::foreach}{forums_list}{forum}
{if {$forum['parent']} == 0}
{if {$forum['sort']} != 1}
</ul></div>
<!-- end_categorys_one_by_one -->
{/if}
<!-- start_categorys_one_by_one -->
<script type="text/javascript">
$(document).ready(function()
{
var img = "collapseimage_{$forum['id']}";
var imgChange = document.getElementById(img);
if($.cookie("pbboard_collapse_forumid_{$forum['id']}") == "{$forum['id']}") {
$("#collapseimg_forumbit_{$forum['id']}").css('display', 'none');
imgChange.className = "collapsed";
};
});
</script>


<div class="category_title">
<a class="CollapseIcon" href="#collapseforum_{$forum['id']}" onclick="return collapse_toggle('{$forum['id']}')" id="collapseforum_{$forum['id']}">
<span id="collapseimage_{$forum['id']}" class="expanded"></span>
</a>
<a href="index.php?page=forum&amp;show=1&amp;id={$forum['id']}">
<span>{$forum['title']}</span></a>
</div>


<div id="collapseimg_forumbit_{$forum['id']}">
<ul class="categorys">
{elseif {$forum['parent']} != 0}
<li class="sub_forums">
<div class="forum-icon">
{if {$forum['use_section_picture']} and {$forum['sectionpicture_type']}== 1}
<span class="section_picture" title="{$lang['section_picture']}"><img src="{$forum['section_picture']}" alt="{$lang['section_picture']}" /></span>
{else}
<span class="{$forum['forum_icon']}" title="{$forum['forum_icon_alt']}"></span>
{/if}
</div>
<div class="forum-stats">
<div class="title_n"><a href="index.php?page=forum&amp;show=1&amp;id={$forum['id']}">
{$forum['title']}</a></div>
{if {$forum['use_section_picture']} and {$forum['sectionpicture_type']} == 2}
<div class="section_picture_dn_describe">
<span class="section_picture" title="{$forum['forum_icon_alt']}"><img src="{$forum['section_picture']}" alt="{$forum['forum_icon_alt']}" /></span>
</div>
{/if}
{if {$_CONF['info_row']['no_describe']} and {$forum['section_describe']} != ''}
<div class="describe">
{$forum['section_describe']}
</div>
{/if}

{if {$_CONF['info_row']['no_moderators']} and {$forum['moderators_list']}}
<div class="home-moderators-lain">
{$lang['moderators_list']} {$forum['moderators_list']}
</div>
{/if}


<!-- start_forum_sub -->
{if {$_CONF['info_row']['no_moderators']} and {$forum['moderators_list']}}
<div class="home-moderators-lain">
    {$lang['moderators_list']} {$forum['moderators_list']}
</div>
{/if}
{if {$forum['is_sub']}}
{if {$_CONF['info_row']['no_sub']}}
<div class="node-subNodeMenu">
    <a class="menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false"
        aria-haspopup="true">المنتديات الفرعية</a>
    <div class="menu" data-menu="menu" aria-hidden="true">
        <div class="menu-content">
            <h4 class="menu-header">المنتديات الفرعية</h4>
            <ol class="subNodeMenu">
                {$forum['sub']}
            </ol>
        </div>
    </div>
</div>
{/if}
{/if}
<!-- end_forum_sub  -->



{if {$forum['num_subjects_awaiting_approval']} >0 and {$forum['IsModeratorCheck']}}
<div class="awaiting_approval pkr-b">{$lang['subjects_review']}: <b>{$forum['num_subjects_awaiting_approval']}</b></div>
{/if}
{if {$forum['num_replys_awaiting_approval']} >0 and {$forum['IsModeratorCheck']}}
<div class="awaiting_approval pkr-b">{$lang['replys_review_num']}: <b>{$forum['num_replys_awaiting_approval']}</b>
{if {$align} == 'right'}
<a class="appssroveposts" href="index.php?page=search&amp;option=6&amp;review_reply=1&section={$forum['id']}&amp;sort_order=DESC" title="{$lang['approveposts']}"><i class="fa fa-arrow-circle-left pkr-c" title="{$lang['approveposts']}"></i> </a>
 {else}
<a class="appssroveposts" href="index.php?page=search&amp;option=6&amp;review_reply=1&section={$forum['id']}&amp;sort_order=DESC" title="{$lang['approveposts']}"><i class="fa fa-arrow-circle-right pkr-c" title="{$lang['approveposts']}"></i> </a>
{/if}
</div>
{/if}
</div>

<div class="forum-numrs">
<dl class="subject_num subject_num_icon" title="{$lang['subject_num']}">
<dtt>{$lang['subject_num']}</dtt>
<dd>{$forum['subject_num']}</dd>
</dl>
<dl class="reply_num reply_num_icon" title="{$lang['reply_num']}">
<dtt>{$lang['reply_num']}</dtt>
<dd>{$forum['reply_num']}</dd>
</dl>

{if {$forum['forum_online']}}
<dl class="forum_online online_num_icon" title="{$lang['Whos_Online']}">
<dtt>{$lang['viewer']})</dtt>
<dd>{$forum['forum_online']}</dd>
</dl>
{/if}

</div>

<div class="forum-last-post">
{if {$forum['linksection']}}
<div class="no_post">{$lang['linkvisitor']} {$forum['linkvisitor']}</div>
{elseif {$forum['hide_subject']} and {$forum['ModeratorCheck']}}
<div class="no_post">{$lang['speciality']}</div>
{elseif {$forum['section_password']} and {$forum['ModeratorCheck']}}
<div class="no_post">{$lang['speciality']}</div>
{elseif {$forum['last_subject']} != ''}

{if {$_CONF['info_row']['allow_avatar']}}
<div class="Photo"  title="{$lang['Picture']} {$forum['username']} {$lang['Personal']}" style="background-image: url({$forum['writer_photo']});">

</div>
{/if}


<div class="Info_last_post">
<div class="Info_last_Reply">

 <a href="index.php?page=topic&amp;show=1&amp;id={$forum['last_subjectid']}" title="{$forum['last_subject_title']}">{$forum['last_subject']}</a></div>
<div class="NewsUser"> <span class="last_writer">{$forum['last_writer']}</span><span class="yy"> , </span> 

<span class="last_time_ago">{$forum['last_time_ago']}</span>

<a href="index.php?page=topic&amp;show=1&amp;id={$forum['last_subjectid']}&amp;count={$forum['last_berpage_nm']}#{$forum['last_reply']}" title="{$lang['Go_to_last_post']}">
{if {$align} == 'right'}
<i class="Iconchevron fa fa-arrow-circle-left pkr-c" title="{$lang['Go_to_last_post']}"></i>
 {else}
<i class="Iconchevron fa fa-arrow-circle-right pkr-c" title="{$lang['Go_to_last_post']}"></i>
{/if}
</a></div>
</div>
{else}
<div class="no_post">{$lang['no_post']}</div>
{/if}
</div>
</li>
{/if}
{/Des::foreach}
</ul>
{if !{$SHOW_SUB_SECTIONS}}
</div>
{/if}
<!-- End_All-categorys -->
</div>