/* ------------------------------------------------------------ ARTICLES ------------------------------------------------------------ */


/* ---------------------------------------- CONTENTS ---------------------------------------- */

/* 

-----> 




*/




/* --------------- Containers --------------- */



#articleCalloutBin{

    width: calc(100% - 100px);
    
    min-height: calc(400px - 200px);
    height: fit-content;

    padding: 100px 50px;

    margin-bottom: 50px;

    /* border-top: 1px solid red;
    border-bottom: 1px solid red; */


}



#categoryBin{
    margin-bottom: 50px;
}




/* ----- Main Container ----- */
#articleContentContainer{

    overflow-y: hidden;

    min-height: calc(500px);
    height: fit-content;
    /* max-height: calc(100vh - 40px - 75px); */

    width: calc(100%);

    margin-bottom: 50px;
    /* border: 1px solid red; */
}



/* ---------- Sidepanel ---------- */
#articleFilterSidepanel{
    overflow-y: scroll;

    width: calc(250px - 20px - 1px);
    height: fit-content;

    padding: 0 10px;

    overflow-y: visible;

    box-shadow: none;

    /* background-color: var(--primary_lite); */
    /* border: 1px solid green; */
    /* border-right: 1px solid var(--primary_lite); */
    border-right: 1px solid black;
}



/* ---------- Doc View Bin ---------- */
#articleListBin{

    /* overflow-y: scroll; */

    width: calc(1200px - 320px - 100px);

    min-height: inherit; height: fit-content;

    padding: 20px 50px;

    /* border: 1px solid blue; */
}




/* ---------- List View ---------- */
.articleList{
    display: flex;
    flex-direction: column;
    align-items: center;

    list-style: none;

    width: 100%;
    height: fit-content;

    padding: 0;

    /* border: 1px solid red; */
}

.articleCard{
    display: flex;
    position: relative;

    width: 750px;
    height: 200px;

    margin-bottom: 40px;

    border-radius: 20px;
    /* border: 1px solid green; */
}
.articleCard .content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: calc(500px - 40px);
    height: calc(200px - 20px);

    padding: 10px 20px;

    border-radius: 20px 0 0 20px;
    /* border: 1px solid blue; */
}
.articleCard .content #articleBtn{
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
}
.articleCard .img{
    display: inline-block;

    overflow: hidden;

    width: 250px;
    height: 200px;

    border-radius: 0 20px 20px 0;
    /* border: 1px solid red; */
    border-left: 1px solid lightgray;
}



/* -------------------- Detail View -------------------- */


/* ---------- Article Content Container ---------- */
.articleContainer{
    display: flex;
    height: fit-content;

    /* border: 1px solid red; */
}

/* ---------- Article Content ---------- */
.article{
    display: flex;
    flex-direction: column;

    /* position: relative;
    right: 100px; */

    align-items: center;
    width: 100%;

    height: fit-content;

    padding: 0;
    margin-bottom: 50px;

    /* border: 1px solid red; */
}
.article .heading{
    display: flex;
    flex-direction: column;
    
    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 100px 0;
}
.article .heading .titleBin{
    max-width: 1000px;
}
.article .body{
    width: 95%; max-width: 700px;

    height: fit-content;

    padding: 80px 0;

    margin-right: 50px;

    /* border: 2px solid green; */
}


#heading{
    background: url("/static/main/images/content/callouts/callout_full_page_3.png") 100% 0 no-repeat;
    min-height: calc(500px - 200px);
    height: fit-content;
}


/* ---------- Ad Tower ---------- */

.adTower {
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    min-height: 100%;
    width: 250px;

    padding: 80px 0;

    /* border: 1px solid red; */
}


.articleExtraBin{
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    width: 100%;
    max-width: 1000px;
    
    min-height: 300px;
    height: fit-content;

    /* border: 1px solid blue; */

    margin-bottom: 20px;
}




