/* root variables
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
:root
{
    --blog-menu-panel-width: calc(100% - 6em);
    --blog-menu-gaps: 1em;
}




















/* main datatables container
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container
{
    /* row and column gap variables */
    --dt-panel-margin: 3em;
    --dt-panel-padding: 1.75em;
    --dt-panel-cell-gap: 1.75em;
    --dt-panel-cell-item-gap: 1em;

    /* panel variables */
    --panel-border-radius: 0.5em;
    --panel-background-color: linear-gradient(to top left, rgba(0,0,0,0.75), rgba(0,0,0,0.35));
    --panel-box-shadow: 0 0.5em 1em 0.15em rgba(0,0,0,0.15);
    --panel-box-shadow-mobile: inset 0 0 0 0.1rem rgba(255,255,255,0.15), 0 0.75em 1.5em 0.25em rgba(0,0,0,0.25);

    /* input size variables */
    --dt-input-width: 100%;
    --dt-input-height: 3em;
    --dt-input-tb-padding: 0;
    --dt-input-lr-padding: 1em;
    --dt-input-text-casing: inherit;
    --dt-input-font-family: var(--outfit);
    --dt-input-font-size: 1em;
    --dt-input-line-height: 1em;
    --dt-input-border-width: 0.1rem;
    --dt-input-border-style: solid;
    --dt-input-border-radius: 0.25em;
    --dt-input-outline-width: 0.2rem;
    --dt-input-outline-offset: 0.3rem;
    --dt-input-outline-style: solid;
    --dt-input-box-shadow: 0 0.15em 0.35em 0.05em rgba(0,0,0,0.25);

    /* input static color variables */
    --dt-input-static-text-color: var(--white);
    --dt-input-static-placeholder-text-color: rgba(255,255,255,0.35);
    --dt-input-static-background-color: var(--eerie-norm);
    --dt-input-static-border-color: var(--gainsboro-dark);
    --dt-input-static-outline-color: rgba(0,0,0,0);
    
    /* input focus color variables */
    --dt-input-focus-text-color: var(--white);
    --dt-input-focus-placeholder-text-color: rgba(255,255,255,0.1);
    --dt-input-focus-background-color: var(--eerie-lite);
    --dt-input-focus-border-color: var(--white);
    --dt-input-focus-outline-color: var(--persian-lite);

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--dt-panel-margin); column-gap: var(--dt-panel-margin);

    /* standard rules */
    width: 100%;
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container {--dt-panel-margin: 2em;}
}




















/* datatables layout rows
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 100%; align-self: center;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: 0; column-gap: 0;

    /* standard rules */
    width: 100%; margin: 0; padding: 0;
}










/* datatables layout cells
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row .dt-layout-cell
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center;

    /* parent flex rules */
    display: flex!important; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: 0; column-gap: 0;

    /* standard rules */
    margin: 0; padding: 0;
}




















/* category buttons
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row
{
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--dt-panel-cell-gap); column-gap: var(--dt-panel-cell-gap);

    /* standard rules */
    z-index: 4;
    display: none; max-width: 100%;
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row {display: none;}
}

/* direct children */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row > *
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-items: center;

    /* standard rules */
    width: auto; max-width: 100%; margin: 0!important; padding: 0!important;
    text-align: center;
}





/* paragraph
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row p
{
    /* child flex rules */
    flex-basis: auto;

    /* standard rules */
    text-transform: uppercase; white-space: nowrap;
    font-weight: 600; font-size: inherit; line-height: 1em;
}

/* icon */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row p::after
{
    position: relative; display: inline-block; float: none; width: auto; height: auto; margin: 0 0 0 0.5em; content: "\f178";
    font-family: var(--fa7); font-weight: 700; font-size: inherit; line-height: inherit;
}





/* list
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul
{
    /* child flex rules */
    flex-basis: auto;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--dt-panel-cell-item-gap); column-gap: var(--dt-panel-cell-item-gap);
}





/* list item
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li
{
    /* child flex rules */
    order: 0; flex-grow: 1; flex-shrink: 1; flex-basis: auto; align-self: center;

    /* standard rules */
    clear: none; width: auto; margin: 0; padding: 0;
}

/* mobile settings */
@media only screen and (max-width: 768px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li {flex-basis: calc(25% - ((var(--dt-panel-cell-item-gap) * 3) / 4));}
}

/* hide dot */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li::before {display: none;}





/* button
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a
{
    z-index: 1;
    display: block; float: left; width: 100%; height: 3em; margin: 0; padding: 0 1.25em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
    font-family: var(--oswald); font-weight: 600; font-size: 1em; line-height: 3em;
    color: var(--white);
    background: rgba(255,255,255,0.05);
    border-radius: 0.15em;
    outline-offset: 0.2rem; outline-style: solid;
    box-shadow: 0 0.25em 0.35em 0.1em rgba(0,0,0,0.1);
}

/* hover/active */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a:is(:hover,.active)
{
    text-decoration: none;
    color: var(--white);
}

/* focus */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a:hover:focus {outline-width: 0.2rem;}





/* backgrounds
================================================== */

/* main containers */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a::before,
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a::after
{
    top: 0; left: 0; display: block; float: left;
    border-radius: inherit;
}





/* scaling background
================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a::before
{
    z-index: -2;
    transform: scaleY(0); transform-origin: top center;
    background: var(--iceberg-norm);
    opacity: 0;
    will-change: auto;
    transition: transform 0.2s ease 0s, background 0.2s ease 0s, opacity 0.2s ease 0.1s;
}

/* hover/active */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a:is(:hover,.active)::before
{
    transform: scaleY(1); transform-origin: bottom center;
    opacity: 1;
    transition: transform 0.2s ease 0s, background 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* active */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a.active::before {background: var(--persian-norm);}

/* active hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a.active:hover::before {background: var(--persian-lite);}





/* shine
================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-category-row ul li a::after
{
    z-index: -1;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
}




















/* datatable layout top
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* row
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row
{
    /* parent flex rules */
    row-gap: var(--dt-panel-cell-gap); column-gap: var(--dt-panel-cell-gap);

    /* standard rules */
    z-index: 3;
    padding: var(--dt-panel-padding);
    background: var(--panel-background-color);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--panel-box-shadow);
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row {row-gap: calc(var(--dt-panel-cell-gap) / 2);}
}
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row
    {
        z-index: 6;
        position: fixed; top: calc(var(--header-height) + var(--blog-menu-gaps)); right: 0; float: right; width: var(--blog-menu-panel-width);
        background: linear-gradient(to top right, var(--eerie-norm), var(--eerie-lite));
        box-shadow: var(--panel-box-shadow-mobile);
    }

    /* visibility */
    html[data-blog-options="false"] > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row
    {
        transform: translate3d(100%,0,0);
        opacity: 0; visibility: hidden;
    }
    html[data-blog-options="true"] > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row
    {
        transform: translate3d(calc(var(--blog-menu-gaps) * -1),0,0);
        opacity: 1; visibility: visible;
    }
}










/* all inputs in datatablse top
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row :is(select,input[type="search"])
{
    z-index: 1;
    position: relative; display: block; float: left; width: var(--dt-input-width); height: var(--dt-input-height); margin: 0; padding: var(--dt-input-tb-padding) var(--dt-input-lr-padding);
    text-transform: var(--dt-input-text-casing);
    font-family: var(--dt-input-font-family); font-size: var(--dt-input-font-size); line-height: var(--dt-input-line-height);
    color: var(--dt-input-static-text-color);
    background: var(--dt-input-static-background-color);
    border-width: var(--dt-input-border-width); border-style: var(--dt-input-border-style); border-color: var(--dt-input-static-border-color); border-radius: var(--dt-input-border-radius);
    outline-width: var(--dt-input-outline-width); outline-offset: var(--dt-input-outline-offset); outline-style: var(--dt-input-outline-style); outline-color: var(--dt-input-static-outline-color);
    box-shadow: var(--dt-input-box-shadow);
    will-change: auto;
    transition: color 0.2s ease 0s, background 0.2s ease 0s, background-color 0.2s ease 0s, border-color 0.2s ease 0s, outline-color 0.2s ease 0s;
}

/* focus */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row :is(select,input[type="search"]):focus
{
    color: var(--dt-input-focus-text-color);
    background: var(--dt-input-focus-background-color);
    border-color: var(--dt-input-focus-border-color);
    outline-color: var(--dt-input-focus-outline-color);
}





/* specific for search
==================================================================================================== */

/* placehoder */
/*html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row :is(input[type="search"])::placeholder {}*/

/* focus placeholder */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row :is(input[type="search"]):focus::placeholder {color: var(--dt-input-focus-placeholder-text-color);}





/* specific for select
==================================================================================================== */

/* select hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row :is(select):hover {cursor: pointer;}

/* select options */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row :is(select) option
{
    color: var(--white);
    background: var(--eerie-norm);
}










/* cell
======================================================================================================================================================================================================== */

/* main container */
/*html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell {}*/

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell
    {
        /* child flex rules */
        flex-grow: 1; flex-shrink: 1; flex-basis: auto;
    }
}

/* order of cells */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-search-cell {order: 1;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-category-cell {order: 2;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-length-cell {order: 3;}










/* category
======================================================================================================================================================================================================== */

/* main container */
/*html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-category-cell {}*/










/* length
======================================================================================================================================================================================================== */

/* main container */
/*html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-length-cell {}*/

/* length container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-length-cell .dt-length {width: 100%; margin: 0; padding: 0;}

/* hide label */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-length-cell .dt-length label {display: none;}










/* search
======================================================================================================================================================================================================== */

/* main container */
/*html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-search-cell {}*/

/* search container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-search-cell .dt-search {width: 100%; margin: 0; padding: 0;}

/* adjust padding of input field */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-search-cell .dt-search input:is([type="search"]) {padding-left: calc(var(--dt-input-lr-padding) * 2.75);}

/* adjust label for search icon */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-search-cell .dt-search label
{
    z-index: 2;
    transform: translate3d(0,-50%,0);
    position: absolute; top: 50%; left: var(--dt-input-lr-padding); width: auto; height: auto; margin: 0; padding: 0;
}

/* search icon */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-top-row .dt-layout-cell.dt-search-cell .dt-search label::before
{
    position: relative; display: block; float: left; width: auto; height: auto; content: "\f002";
    font-family: var(--fa7); font-weight: 700; font-size: 1em; line-height: 1em;
}




















/* datatable layout bottom
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* row
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row
{
    /* parent flex rules */
    row-gap: var(--dt-panel-cell-gap); column-gap: var(--dt-panel-cell-gap);

    /* standard rules */
    z-index: 1;
    padding: var(--dt-panel-padding);
    background: var(--panel-background-color);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--panel-box-shadow);
}










/* cell
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell
{
    /* child flex rules */
    flex-basis: 100%;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--dt-panel-cell-item-gap); column-gap: var(--dt-panel-cell-item-gap);
}










/* info
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-info
{
    margin: 0; padding: 0;
    text-align: center; text-transform: uppercase;
    font-weight: 300; font-size: 0.85em; line-height: 1.35em;
}










/* paging
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--dt-panel-cell-item-gap); column-gap: var(--dt-panel-cell-item-gap);
}





/* nav
================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav
{
    /* variables */
    --pagination-button-size: 2em;
    --pagination-button-spacing: 0.35em;
    --pagination-border-radius: 0.25em;

    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--pagination-button-spacing); column-gap: var(--pagination-button-spacing);
}



/* ellipsis
========================= */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav .ellipsis
{
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: 0; column-gap: 0;

    /* standard rules */
    font-size: 0;
}

/* add icon */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav .ellipsis::before
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 100%; align-self: center;

    /* standard rules */
    box-sizing: border-box; content: "\f141";
    font-family: var(--fa7); font-weight: 700; font-size: 1rem; line-height: 1em;
    color: inherit;
}



/* buttons
========================= */

/* main cointainer */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: 0; column-gap: 0;

    /* standard rules */
    width: var(--pagination-button-size); min-width: 0; height: var(--pagination-button-size); margin: 0; padding: 0;
    text-align: center;
    font-family: var(--oswald); font-weight: 700; font-size: 1em; line-height: 1em;
    color: var(--eerie-norm)!important;
    background: var(--gainsboro-norm);
    border: none; border-width: 0; border-style: solid; border-color: var(--white); border-radius: var(--pagination-border-radius);
    will-change: auto;
    transition: color 0.2s ease 0s, background 0.2s ease 0s, background-color 0.2s ease 0s, border-color 0.2s ease 0s, outline-color 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button:hover
{
    color: var(--white)!important;
    background: var(--iceberg-dark);
}

/* shine */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button::before
{
    z-index: 1;
    position: absolute; top: 0; left: 0; display: block; float: left; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; content: "";
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
    border-radius: inherit;
}



/* border radius for icon buttons
========================= */

/* main cointainer */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button:is(.first,.last) {border-radius: calc(var(--pagination-button-size) / 2);}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.previous {border-radius: calc(var(--pagination-button-size) / 2) var(--pagination-border-radius) var(--pagination-border-radius) calc(var(--pagination-button-size) / 2);}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.next {border-radius: var(--pagination-border-radius) calc(var(--pagination-button-size) / 2) calc(var(--pagination-button-size) / 2) var(--pagination-border-radius);}



/* disabled
========================= */

/* main cointainer */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.disabled
{
    color: var(--eerie-lite)!important;
    background: var(--gainsboro-dark);
    opacity: 0.25;
}

/* hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.disabled:hover
{
    cursor: not-allowed;
    opacity: 0.5;
}



/* current
========================= */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.current
{
    color: var(--white)!important;
    background: var(--persian-norm);
}

/* hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.current:hover
{
    color: var(--white)!important;
    background: var(--persian-lite);
}



/* icons
========================= */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button .icon
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 100%; align-self: center;

    /* standard rules */
    text-align: inherit;
    font-size: inherit; line-height: inherit;
    color: inherit;
}

/* icon container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button .icon::before
{
    position: relative; display: block; float: left; width: 100%; height: auto;
    text-align: inherit;
    font-family: var(--fa7); font-weight: 700; font-size: inherit; line-height: 1em;
    color: inherit;
}

html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.first .icon::before {content: "\f100";}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.previous .icon::before {content: "\f104";}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.next .icon::before {content: "\f105";}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-bottom-row .dt-layout-cell .dt-paging nav button.last .icon::before {content: "\f101";}




















/* datatable layout
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* row
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table {z-index: 2;}










/* cell
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell
{
    /* child flex rules */
    flex-basis: 100%;
}




















/* datatable table
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* table
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable
{
    /* variables */
    --filter-sort-width: 14em;
    --panel-gap: var(--dt-panel-margin);

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--panel-gap); column-gap: var(--panel-gap);

    /* standard rules */
    float: left; width: 100%; margin: 0; padding: 0;
    border-width: 0; border-style: solid; border-color: rgba(0,0,0,0);
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable {--filter-sort-width: 100%;}
}

/* hide the col group */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable colgroup {display: none;}





/* overlay
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable::before
{
    z-index: 5;
    transform: translate3d(-50%,-50%,0) scaleY(1.5);
    top: 50%; left: 50%; display: block; float: left; width: 100vw; height: calc(100% + (var(--blog-home-section-padding) * 2)); min-height: 100vh;
    background: linear-gradient(to top right, var(--eerie-dark), var(--eerie-norm));
    will-change: auto;
    transition: opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

/* visibility */
html[data-blog-options="false"] > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable::before {opacity: 0; visibility: hidden;}
html[data-blog-options="true"] > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable::before {opacity: 0.85; visibility: visible;}










/* thead/tbody resets
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead,tbody):is(.flex-layout)
{
    /* child flex rules that apply to both the thead and tbody */
    order: 0; flex-grow: 0; flex-shrink: 0; align-items: stretch;

    /* parent flex rules that apply to direct flex children of the <thead> and <tbody>, which are <tr> rows */
    display: flex; flex-direction: row; flex-wrap: wrap; row-gap: var(--tile-gap); column-gap: var(--tile-gap);

    /* standard rules */
    border-width: 0;
}





/* specific for thead
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout)
{
    /* variables */
    --tile-gap: 1em;

    /* child flex rules that apply directly to the <thead> container */
    flex-basis: var(--filter-sort-width); align-self: stretch;

    /* parent flex rules that align the flex children <tr> rows (sorting options) */
    justify-content: center; align-items: flex-start; align-content: flex-start;

    /* standard rules */
    padding: var(--dt-panel-padding);
    background: var(--panel-background-color);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--panel-box-shadow);
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout)
    {
        z-index: 5;
        position: fixed; top: calc(var(--header-height) + var(--datatable-filter-height) + (var(--blog-menu-gaps) * 2)); right: 0; float: right; width: var(--blog-menu-panel-width);
        background: linear-gradient(to top right, var(--eerie-norm), var(--eerie-lite));
        box-shadow: var(--panel-box-shadow-mobile);
    }

    /* visibility */
    html[data-blog-options="false"] > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout)
    {
        transform: translate3d(100%,0,0);
        opacity: 0; visibility: hidden;
    }
    html[data-blog-options="true"] > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout)
    {
        transform: translate3d(calc(var(--blog-menu-gaps) * -1),0,0);
        opacity: 1; visibility: visible;
    }
}

/* filter and sort text */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout)::before
{
    position: relative; display: block; float: left; width: 100%; height: auto; padding: 0 0 0.75em 0; content: "Sort By";
    text-align: center; text-transform: uppercase; white-space: nowrap;
    font-family: var(--oswald); font-weight: 600; font-size: 1.4em; line-height: 1em;
    color: var(--white);
    border-width: 0 0 0.2rem 0; border-style: solid; border-color: rgba(255,255,255,0.1);
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout)::before {display: none;}
}






/* specific for tbody
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout)
{
    /* variables */
    --tile-gap: var(--dt-panel-margin);
    --tiles-per-row: 4;
    --tile-flex-basis: calc(100% / var(--tiles-per-row));
    --tile-info-gap: 1em;
    --tile-info-item-gap: 0.5em;

    /* child flex rules that apply directly to the <tbody> container */
    flex-basis: calc(100% - (var(--filter-sort-width) + var(--panel-gap))); align-self: center;

    /* parent flex rules that align the flex children <tr> tags (individual blog post tiles) */
    justify-content: flex-start; align-items: flex-start; align-content: flex-start;
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) {flex-basis: 100%;}
}










/* table rows
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead,tbody):is(.flex-layout) tr
{
    /* child flex rules that apply to <tr> rows of both the <thead> and <tbody> */
    order: 0;

    /* parent flex rules that align individual <th>/<td> cells inside of <tr> rows in both the <thead> and <tbody> */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: center;

    /* standard rules */
    width: auto; margin: 0; padding: 0;
    overflow: hidden;
    border-width: 0; border-style: solid; border-color: rgba(0,0,0,0);
}





/* specifc for thead rows
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr
{
    /* child flex rules that only apply to <tr> rows in the <thead> */
    flex-grow: 0; flex-shrink: 0; flex-basis: 100%; align-self: center;

    /* parent flex rules */
    row-gap: 0.75em; column-gap: 0.75em;

    /* standard rules */
    overflow: visible;
}





/* specifc for tbody rows
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr
{
    /* child flex rules that only apply to <tr> rows in the <tbody> */
    flex-grow: 1; flex-shrink: 1; flex-basis: calc(var(--tile-flex-basis) - ((var(--tile-gap) * (var(--tiles-per-row) - 1)) / var(--tiles-per-row))); align-self: stretch;

    /* parent flex rules that apply to all <th>/<td> children of a <tr> row */
    row-gap: var(--tile-info-gap); column-gap: var(--tile-info-item-gap);

    /* standard rules */
    min-width: 23em; max-width: 50%; padding: calc(var(--tile-gap) * 1.5) var(--tile-gap);
    border-radius: var(--panel-border-radius);
    box-shadow: var(--panel-box-shadow);
}

/* mobile settings */
@media only screen and (max-width: 1650px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr {max-width: none;}
}
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr
    {
        /* child flex rules */
        flex-basis: 100%;

        /* standard rules */
        min-width: 0;
    }
}










/* table cells
======================================================================================================================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead,tbody):is(.flex-layout) tr :is(th,td)
{
    /* child flex rules that get apply to all <th>/<td> children of the <tr> row in both the <thead> and <tbody> */
    flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: flex-start;

    /* standard rules */
    width: auto; height: auto; margin: 0; padding: 0;
    color: var(--banner-text-color);
    border: 0;
}





/* specific thead cells
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td)
{
    /* child flex rules that apply to <th>/<td> cells in a <tr> row of the <thead> */
    flex-basis: 100%;

    /* parent flex rules that apply to all elements inside of <th>/<td> cells inside of <tr> rows inside the <thead> */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;

    /* standard rules */
    padding: 0.25em 0.35em 0.25em 0.75em;
    background: linear-gradient(to top right, rgba(255,255,255,0.05), rgba(255,255,255,0.1));
    border-radius: 0.25em;
    box-shadow: 0 0.25em 0.5em 0.15em rgba(0,0,0,0.15);
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td)
    {
        /* child flex rules */
        flex-grow: 1; flex-shrink: 1; flex-basis: auto;
    }
}

/* adjust the order of my thead cells for the desired order */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.date) {order: 1;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.title) {order: 2;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.description) {order: 3;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.categories) {order: 4;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.author) {order: 5;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.image) {order: 6;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.url) {order: 7;}

/* hide these cells in the sorting area */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.image,.url) {display: none;}





/* specific tbody cells
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td)
{
    /* child flex rules that get applied to all <th>/<td> cells inside of <tr> rows inside of the <tbody> */
    flex-basis: auto;
}










/* thead sorting items
======================================================================================================================================================================================================== */

/* when a column is ordered
==================================================================================================== */

/* ordered scaling background
================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td)::before
{
    z-index: 1;
    transform: scaleX(0); transform-origin: left center;
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%), linear-gradient(to top right, var(--persian-norm), var(--persian-lite));
    border-radius: inherit;
    opacity: 0;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* ordered */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.dt-ordering-asc,.dt-ordering-desc)::before
{
    transform: scaleX(1);
    opacity: 1;
}





/* static scaling background
================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td)::after
{
    z-index: 2;
    transform: scaleY(0); transform-origin: top center;
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to top right, var(--iceberg-dark), var(--iceberg-lite));
    border-radius: inherit;
    opacity: 0;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):hover::after
{
    transform: scaleY(1); transform-origin: bottom center;
    opacity: 0.5;
}





/* column header
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td) .dt-column-header
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 100%; align-self: center;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; row-gap: 0; column-gap: 0.25em;

    /* standard rules */
    z-index: 3;
}

/* direct children */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td) .dt-column-header > span
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center;
}





/* column title
================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td) .dt-column-header .dt-column-title
{
    white-space: nowrap;
    font-weight: 500; line-height: 1em;
}

/* mobile settings */
@media only screen and (max-width: 800px)
{
    html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td) .dt-column-header .dt-column-title {font-size: 0.9em;}
}





/* column order
================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td) .dt-column-header .dt-column-order
{
    width: 1.15em; height: 2em; margin: 0; padding: 0;
}

html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td) .dt-column-header .dt-column-order::before,
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td) .dt-column-header .dt-column-order::after
{
    transform: translate3d(0,0,0);
    position: absolute; left: 0; right: auto; width: 100%; height: 1em; margin: 0; padding: 0;
    text-align: center;
    font-family: var(--fa7); font-weight: 700; font-size: 0.75em; line-height: 1em;
    will-change: auto;
    transition: opacity 0.2s ease 0s;
}





/* icons
================================================== */

/* arrow up
========================= */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.dt-orderable-desc,.dt-orderable-asc) .dt-column-header .dt-column-order::before
{
    transform: translate3d(0,0,0);
    top: 0.15em; bottom: auto; content: "\f0d8";
    opacity: 0.1;
}



/* arrow down
========================= */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.dt-orderable-desc,.dt-orderable-asc) .dt-column-header .dt-column-order::after
{
    transform: translate3d(0,0,0);
    top: auto; bottom: 0.15em; content: "\f0d7";
    opacity: 0.1;
}





/* ordering
================================================== */

/* arrow up
========================= */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.dt-ordering-desc,.dt-ordering-asc) .dt-column-header .dt-column-order::before
{
    transform: translate3d(0,0,0);
    top: 0.15em; bottom: auto;
    opacity: 0.075;
}

/* ordered */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.dt-ordering-asc) .dt-column-header .dt-column-order::before {opacity: 1;}



/* arrow down
========================= */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.dt-ordering-desc,.dt-ordering-asc) .dt-column-header .dt-column-order::after
{
    transform: translate3d(0,0,0);
    top: auto; bottom: 0.15em;
    opacity: 0.075;
}

/* ordered */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(thead):is(.flex-layout) tr :is(th,td):is(.dt-ordering-desc) .dt-column-header .dt-column-order::after {opacity: 1;}










/* title
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).title {flex-basis: 100%;}

/* heading tags */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).title :is(h1,h2,h3,h4,h5,h6)
{
    margin: 0; padding: 0;
    text-transform: uppercase;
    font-weight: 700; font-size: 1.8em; line-height: 1.35em;
    text-shadow: 0.075em 0.075em 0.075em rgba(0,0,0,0.35);
}





/* categories
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).categories {flex-basis: 100%;}

/* hide categories */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr[data-show-tags="false"] :is(th,td).categories {display: none;}

/* list */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).categories ul
{
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; row-gap: var(--tile-info-item-gap); column-gap: var(--tile-info-item-gap);

    /* standard rules */
    margin: 0; padding: 0;
}

/* list item */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).categories ul li
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center;
    
    /* standard rules */
    clear: none; width: auto; margin: 0; padding: 0.35em 0.5em 0.25em 0.5em;
    text-transform: uppercase;
    font-weight: 700; font-size: 0.85em; line-height: 1em;
    background: var(--banner-overlay-color);
    border-width: 0.1rem; border-style: solid; border-color: currentColor; border-radius: 0.25em;
}

/* hide dot */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).categories ul li::before {display: none;}





/* description
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).description {flex-basis: 100%;}

/* hide description */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr[data-show-description="false"] :is(th,td).description {display: none;}

/* paragraph */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).description p
{
    margin: 0; padding: 0;
    font-size: 0.85em; line-height: 1.35em;
    text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.35);
}





/* author
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).author
{
    width: auto; padding: 0.25em 0.5em;
    background: var(--banner-overlay-color);
    border-width: 0.1rem; border-style: solid; border-color: currentColor; border-radius: 0.25em;
}

/* hide author */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr[data-show-author="false"] :is(th,td).author {display: none;}

/* paragraph */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).author p {margin: 0; padding: 0;}

/* icon */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).author p::before
{
    position: relative; display: inline-block; float: none; width: auto; height: auto; margin: 0 0.5em 0 0; content: "\f4ff";
    font-family: var(--fa7); font-weight: 700;
}





/* date
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).date
{
    width: auto; padding: 0.25em 0.5em;
    background: var(--banner-overlay-color);
    border-width: 0.1rem; border-style: solid; border-color: currentColor; border-radius: 0.25em;
}

/* hide date */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr[data-show-date="false"] :is(th,td).date {display: none;}

/* paragraph */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).date p {margin: 0; padding: 0;}

/* icon */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).date p::before
{
    position: relative; display: inline-block; float: none; width: auto; height: auto; margin: 0 0.5em 0 0; content: "\f133";
    font-family: var(--fa7); font-weight: 400;
}

/* spans */
/*html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).date p > span {}*/

html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).date p > span.month
{
    text-transform: uppercase;
    font-weight: 900;
}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).date p > span.day {font-weight: 900;}
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).date p > span.year {font-weight: 100;}





/* image
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).image
{
    /* child flex rules */
    flex-basis: 100%;

    /* standard rules */
    transform: scale(1); transform-origin: center center;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-repeat: no-repeat; background-position: var(--banner-image-position); background-size: cover;
    border-radius: inherit;
    will-change: auto;
    transition: transform 0.3s ease 0s;
}

/* hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr:hover :is(th,td).image {transform: scale(1.1);}

/* overlay */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).image::before
{
    z-index: 1;
    top: 0; left: 0; display: block; float: left;
    background: var(--banner-overlay-color);
    border-radius: inherit;
}

/* color hover overlay */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).image::after
{
    z-index: 2;
    transform: scaleY(0); transform-origin: top center;
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to top right, var(--persian-dark), var(--persian-lite));
    opacity: 0;
    will-change: auto;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0.1s;
}

/* hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr:hover :is(th,td).image::after
{
    transform: scaleY(1); transform-origin: bottom center;
    opacity: 0.75;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}





/* link/url
==================================================================================================== */

/* main container */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).url
{
    /* child flex rules */
    flex-basis: 100%;

    /* standard rules */
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: inherit;
}

/* link tag */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).url a
{
    z-index: 2;
    position: absolute; top: 0; left: 0; display: block; float: left; width: 100%; height: 100%;
    border-radius: inherit;
}

/* icon */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).url::before
{
    z-index: 1;
    transform: translate3d(-50%,0,0);
    top: 1em; right: 1em; display: block; float: right; width: auto; height: auto; content: "\f178";
    font-family: var(--fa7); font-weight: 700; font-size: 2em; line-height: 1em;
    opacity: 0.5;
    will-change: auto;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}

/* hover */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr:hover :is(th,td).url::before
{
    transform: translate3d(0,0,0);
    opacity: 1;
}





/* empty table
==================================================================================================== */

/* table row */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr:has(:is(th,td).dt-empty) {max-width: none; padding: 0;}

/* table cell */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).dt-empty
{
    width: 100%; padding: 3em;
    text-align: center;
    font-weight: 700; font-size: 1.2em; line-height: 1.35em;
    color: var(--white);
    background: linear-gradient(to top right, var(--persian-dark), var(--persian-norm));
}

/* icon */
html > body #blogPostsTable_wrapper.dt-container .dt-layout-row.dt-layout-table .dt-layout-cell table.blog-posts-table.dataTable :is(tbody):is(.flex-layout) tr :is(th,td).dt-empty::before
{
    position: relative; display: inline-block; float: none; width: auto; height: auto; margin: 0 0.75em 0 0; content: "\f071";
    font-family: var(--fa7); font-weight: 700;
}