/*************************************************************
 * This is the style for the MyList Download page
 * 
 * @author (Anyanwu Benedict Chukwuemeka)
 * @version (v0.01)
 *************************************************************/



html:root
{
    --dlElemMaxWidthFactor: 1.726;
    --dlCtgGridCard_sect1W: 0rem;
    --dlCtgGridCard_ImgBdrW: 15.625rem;
    --dlCtgGridCard_ImgBdrH: 7.8125rem;
    --dLMdlGridCard_editW: 0rem;
    --dLMdlGridCard_atnW: 2.8125rem;
    --dlMdl_pd: 1rem;
}





.dwldListBodyBox .myListBodyTitleBdr .myListNavAtnBdr
{
    margin-top: 1.25rem;
}

.dwldListBodyBox .myListNavAtnBdr .myListNavAtnBox
{
    justify-content: space-between;
}

.dlBodyHdr_ssnSelAllBdr
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
}

.topNavBdr[data-cards-are-selectable="true"] .dlBodyHdr_ssnSelAllBdr,
.dwldListBodyBox[data-cards-are-selectable="true"] .dlBodyHdr_ssnSelAllBdr
{
    opacity: 1;
    visibility: visible;
}

.dlBodyAtnBtnsBox
{
    display: flex;
    flex-direction: row;
    gap: 0.3125rem;
}

.myListDLCatalogBdr
{
    width: 100%;
}

.myListDLCatalogBdr .myListDLCatalogBox
{
    width: 100%;
}






/* =============== DL CATALOG GRID ============= */

.myListDLCatalogBox .myListDLCatalogGrid
{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.dlCtgGridCardBdr
{
    position: relative;
    width: 100%;
}

.dlCtgGridCardBdr::before
{
    content: '';
    position: absolute;
    left: -0.75rem;
    width: calc((100% + 0.75rem));
    height: 100%;
    border-radius: 0.625rem;
    background-color: #ffffff25;
    opacity: 0;
    visibility: hidden;
    transition: all 200ms ease-in-out;
    pointer-events: none;
    z-index: -1;
}

.dlCtgGridCardBdr .dlCtgGridCardBox
{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
}


.dlCtgGridCardBox .dLCtgGridCard_ovrlyLbl
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #00000000;
    pointer-events: none;
    cursor: pointer;
    z-index: 5;
}

.dwldListBodyBox[data-cards-are-selectable="true"] .dLCtgGridCard_ovrlyLbl
{
    pointer-events: all;
}

.dlCtgGridCardBox .dlCtgGridCard_sect2
{
    position: relative;
    width: calc((100% - var(--dlCtgGridCard_sect1W)));
    transition: all 150ms ease-in-out;
    cursor: pointer;
}

.dlCtgGridCardBox:has(.genTick_chkFldCls:checked) .dlCtgGridCard_sect2
{
    filter: brightness(0.45);
}

.dwldListBodyBox[data-cards-are-selectable="true"] .dlCtgGridCard_sect2
{
    padding-left: 0.75rem;
}

.dlCtgGridCard_sect2 .dlCtgGridCard_sect2Btn
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.dlCtgGridCard_sect2 .dlCtgGridCard_sectInfo
{
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0.75rem 0rem;
}

.dlCtgGridCard_sectInfo .dlCtgGridCard_ImgBdr
{
    width: var(--dlCtgGridCard_ImgBdrW);
    height: var(--dlCtgGridCard_ImgBdrH);
}

.dlCtgGridCard_ImgBdr .dlCtgGridCard_ImgBox
{
    width: 100%;
    height: 100%;
    border-radius: 0.625rem;
    filter: brightness(0.75);
    overflow: hidden;
}

.dlCtgGridCard_ImgBox .dlCtgGridCard_ImgSrc
{
    width: clamp(100%, 100%, 100%);
    height: clamp(100%, 100%, 100%);
    object-fit: cover;
    object-position: center;
}

.dlCtgGridCard_ImgSrc.dlCtgGridCard_ImgSrcSml
{
    display: none;
}

.dlCtgGridCard_sectInfo .dlCtgGridCard_detBdr
{
    width: calc((100% - var(--dlCtgGridCard_ImgBdrW)));
    padding: 0 1.25rem;
}

.dlCtgGridCard_detBdr .dlCtgGridCard_detBox
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dlCtgGridCard_detBox .dlCtgGridCard_detTitleBox
{
    width: 100%;
    margin-bottom: 0.3125rem;
}

.dlCtgGridCard_detTitleBox .dlCtgGridCard_detTitleText
{
    --dlCtgGridCard_detTitleTextNo: 2;
    --dlCtgGridCard_detTitleTextH: 1.4;
    position: relative;
    -webkit-line-clamp: var(--dlCtgGridCard_detTitleTextNo);
    -webkit-box-orient: vertical;
    line-clamp:  var(--dlCtgGridCard_detTitleTextNo);
    display: -webkit-box;
    max-height: calc(var(--dlCtgGridCard_detTitleTextNo) * 1em * var(--dlCtgGridCard_detTitleTextH));
    line-height: var(--dlCtgGridCard_detTitleTextH);
    font-size: 1rem;
    color: var(--genWhiteTypeLight);
    overflow-wrap: break-word;
    overflow: hidden;
}

.dlCtgGridCard_detBox .dlCtgGridCard_detPrptyBdr
{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.dlCtgGridCard_detPrptyBdr .dlCtgGridCard_detPrptyBox
{
    width: -moz-fit-content;
    width: fit-content;
}

.dlCtgGridCard_detPrptyBox .dlCtgGridCard_detPrptyText
{
    font-size: 0.875rem;
    color: var(--genWhiteTypeMid);
}






/* ============== DL MODAL =========== */
.genStaticHdr_btm .dlMdlHdr_btm
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.dlMdlHdr_btm .dlMdlHdr_ssnDetBdr
{
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.dlMdlBox[data-cards-are-selectable="true"] .dlMdlHdr_ssnDetBdr
{
    display: none;
}

.dlMdlHdr_ssnDetBdr .dlMdlHdr_epDetBox
{
    width: -moz-fit-content;
    width: fit-content;
}

.dlMdlHdr_epDetBox .dlMdlHdr_epDetText
{
    font-size: 0.875rem;
    color: var(--genWhiteTypeMid);
}

.dlMdlHdr_btm .dlMdlHdr_ssnSelAllBdr
{
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.dlMdlBox[data-cards-are-selectable="true"] .dlMdlHdr_ssnSelAllBdr
{
    display: flex;
}

.dlMdlHdr_btm .dlMdlHdr_ssnAtnBdr
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}


/* --------- DL Modal Grid ------- */
.dlMdlCtntGrid
{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--dlMdl_pd);
}

.dlMdlCtntGrid .dLMdlGridCardBdr
{
    width: 100%;
    transition: all 300ms ease-in-out;
}

.dLMdlGridCardBdr .dLMdlGridCardBox
{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: all 300ms ease-in-out;
}

.dlMdlBox[data-cards-are-selectable="true"] .dLMdlGridCardBox
{
    padding-left: var(--dlMdl_pd);
}

.dLMdlGridCardBox .dLMdlGridCard_ovrlyLbl
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #00000000;
    pointer-events: none;
    cursor: pointer;
    z-index: 5;
}

.dlMdlBox[data-cards-are-selectable="true"] .dLMdlGridCard_ovrlyLbl
{
    pointer-events: all;
}


.dLMdlGridCardBox .dLMdlGridCard_AtnBdr
{
    width: var(--dLMdlGridCard_atnW);
}

.dLMdlGridCardBox .dLMdlGridCard_detBdr
{
    width: calc((100% - (var(--dLMdlGridCard_editW) + var(--dLMdlGridCard_atnW))));
    padding: var(--dlMdl_pd) 0 var(--dlMdl_pd) var(--dlMdl_pd);
    cursor: pointer;
}

.dLMdlGridCard_detBdr .dLMdlGridCard_detBox
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    transition: all 150ms ease-in-out;
}

.dLMdlGridCardBox:has(.genTick_chkFldCls:checked) .dLMdlGridCard_detBox
{
    filter: brightness(0.45);
}

.dLMdlGridCard_detBox .dLMdlGridCard_detTitleBox,
.dLMdlGridCard_detBox .dLMdlGridCard_sizeBox
{
    width: 100%;
}

.dLMdlGridCard_detTitleBox .dLMdlGridCard_detTitleText
{
    font-size: 0.875rem;
    color: var(--genWhiteTypeMid2);
}

.dLMdlGridCard_prptyBdr
{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.dLMdlGridCard_prptyBdr .dLMdlGridCard_prptyBox
{
    display: flex;
    flex-direction: row;
    gap: 0.3125rem;
}

.dLMdlGridCard_prptyBox .dLMdlGridCard_prptyText
{
    font-size: 0.75rem;
    color: var(--genWhiteTypeMid);
}

.dLMdlGridCard_sizeBox .dLMdlGridCard_sizeText
{
    font-size: 0.875rem;
    color: var(--genGreenTypeMid);
}

.dlMdlBox[data-cards-are-selectable="true"] .dLMdlGridCard_AtnBdr
{
    display: none;
}












@media(hover: hover)
{

    .dlCtgGridCardBdr:hover::before
    {
        opacity: 1;
        visibility: visible;
    }

    .dLMdlGridCardBdr:hover
    {
        background-color: #ffffff10;
    }
}








@media only screen and (max-width: 48rem) 
{
    html:root
    {
        --dlCtgGridCard_ImgBdrW: 12.5rem;
        --dlCtgGridCard_ImgBdrH: 6.25rem;
        --dlMdlBdrH: 0rem;
    }

    .dlCtgGridCard_sectInfo .dlCtgGridCard_detBdr
    {
        padding: 0rem 0.875rem;
    }
}



@media only screen and (max-width: 35.125rem) 
{
    html:root
    {
        --dlCtgGridCard_ImgBdrW: 4.6875rem;
        --dlCtgGridCard_ImgBdrH: 7.5rem;
    }

    .myListDLCatalogGrid[data-cards-are-selectable="true"] .dlCtgGridCard_sect1
    {
        --dlCtgGridCard_sect1W: 2.1875rem;
    }

    .dlCtgGridCard_chkBox .dlCtgGridCard_chkFldLbl
    {
        width: 1.25rem;
        height: 1.25rem;
    }

    .dlCtgGridCard_ImgSrc.dlCtgGridCard_ImgSrcLrg
    {
        display: none;
    }

    .dlCtgGridCard_ImgSrc.dlCtgGridCard_ImgSrcSml
    {
        display: block;
    }
    
    .dlCtgGridCard_detTitleBox .dlCtgGridCard_detTitleText
    {
        font-size: 0.875rem;
    }

    .dlCtgGridCard_detPrptyBox .dlCtgGridCard_detPrptyText
    {
        font-size: 0.75rem;
    }
}



@media only screen and (max-width: 30.3125rem) 
{

    .dwldListBodyBox .myListNavAtnBdr .myListNavAtnBox
    {
        flex-direction: column-reverse;
        align-items: center;
        gap: 1rem;
    }

    .dlBodyHdr_ssnSelAllBdr
    {
        display: none;
    }

    .topNavBdr[data-cards-are-selectable="true"] .dlBodyHdr_ssnSelAllBdr,
    .dwldListBodyBox[data-cards-are-selectable="true"] .dlBodyHdr_ssnSelAllBdr
    {
        display: flex;
    }

    .dlCtgGridCard_sect2 .dlCtgGridCard_sectInfo
    {
        padding: 0.625rem 0;
    }

    .dlCtgGridCard_sectInfo .dlCtgGridCard_detBdr
    {
        padding: 0rem 0.75rem;
    }

    .dlCtgGridCard_detBox .dlCtgGridCard_detTitleBox
    {
        margin-bottom: 0.1563rem;
    }
    
    .dlCtgGridCard_detTitleBox .dlCtgGridCard_detTitleText
    {
        --dlCtgGridCard_detTitleTextNo: 3;
    }

    .dlMdlHdr_epDetBox .dlMdlHdr_epDetText
    {
        font-size: 0.8125rem;
    }

    .genStaticHdr_btm .dlMdlHdr_btm
    {
        flex-direction: column;
        gap: var(--dlMdl_pd);
    }
}



@media only screen and (max-width: 21.875rem) 
{
    .topNavBdr.dlPgNav[data-cards-are-selectable="true"] .genBtnBox
    {
        min-width: -moz-fit-content;
        min-width: fit-content;
        padding: 0.625rem 1rem;
    }

    .topNavBdr.dlPgNav[data-cards-are-selectable="true"] .genBtnBox .genBtnText
    {
        font-size: 0.6875rem;
    }
}