/* ------------------------------ Containers, bins, modals, and scrollbars ------------------------------ */


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

-----> SECTION: Digital Ad Containers

-----> SECTION: Containers
--> CONTENT: CMS Containers, Objects, & Bins
--> CONTENT: Standard Containers, Objects, & Bins

-----> SECTION: Bins


*/


/* ------------------------------------------------------------ SECTION: Digital Ad Containers ------------------------------------------------------------ */


/* -------------------- CONTENT: Leaderboard Ad Banners -------------------- */
.leaderboadAdBanner{
    display: flex;
    align-items: center;
    justify-content: center;

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

    padding: 20px 0;

    background-color: #aaa;
}
.digitalAdImg_Leaderboard{
    object-fit: contain;

    width: 728px; max-width: 100%;
    height: 90px;

    padding: 0;
    margin: 0;

}
.digitalAd_anchorTag{
    display: inline-block;
    width: fit-content; max-width: 90%;
    height: fit-content;

    padding: 0;
    margin: auto;
}

/* -------------------- CONTENT: Horizontal Ad Container -------------------- */
.horizontalAdContainer{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: fit-content; min-height: calc(150px - 80px);

    padding: 40px 0;

    background-color: #aaa;
}


/* ------------------------------------------------------------ SECTION: Containers ------------------------------------------------------------ */
.cms_mainContentContainer{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    position: relative;
    z-index: 100;

    width: calc(100%);
    height: fit-content; min-height: calc(100vh - 300px);

    background-color: white;
    /* border: 1px solid blue; */
}


/* ------------------------------ CONTENT: CMS Object Containers & Bins ------------------------------ */


/* ---------- Tags ---------- */
.cms_object{
    position: relative;
    z-index: 100;
}


/* ---------- Containers ---------- */
.cms_mainHorizContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: calc(100%);

    height: fit-content;
    min-height: 500px;
    border: 1px solid red;
}
.cms_subContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    overflow-x: hidden;

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

    padding: 0;
    margin: 0;
    /* border: 1px solid green; */
}


/* ----- Used as an add-on for Main Horizontal Containers ----- */
.cms_mainSC{
    min-height: 500px;
}

/* ----- Bins ----- */
.cms_vertBinFull{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: calc(100% - 80px); min-width: calc(350px - 80px); max-width: calc(800px - 80px);
    height: fit-content;

    margin: 0;
    padding: 0 40px;
}
.cms_vertContentBin1{ /* ----- Used for horizontal hero ----- */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: calc(60% - 80px); min-width: calc(350px - 80px); max-width: calc(800px - 80px);
    height: fit-content;

    margin: 0;
    padding: 0 40px;
    /* border: 1px solid green; */
}

.cms_vertBinMedium{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: 45%; min-width: 450px; max-width: 600px;
    height: fit-content;
    /* border: 1px solid green; */
}
.cms_horizBinFull{
    display: flex;
    flex-wrap: wrap;

    width: 100%; 
    height: fit-content;
    /* border: 1px solid red; */
}
.cms_horizBin1200{
    display: flex;
    flex-wrap: wrap;

    width: 100%; max-width: 1200px;
    height: fit-content;
}
.cms_horizBinFit{
    display: flex;
    flex-wrap: wrap;

    width: fit-content;
    height: fit-content;


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

.cms_primaryImageBin{ /* ----- Used for Horizontal Heroes */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: calc(40% - 80px); min-width: calc(300px - 80px); max-width: calc(600px - 80px);
    height: fit-content; min-height: 200px;

    margin: 0;
    padding: 0 40px;
    /* border: 1px solid green; */
}


/* ------------------------------ Standard Bins & Containers ------------------------------ */

/* ----- Used for Main Horizontal Content Heroes ----- */
.cms_horizContainer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    width: 100%;
    height: fit-content;

    padding: 100px 0;
    /* border: 1px solid red; */
}
.cms_vertContainer{
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    width: 100%;
    height: fit-content;
}

.cms_objectBinFullCentered{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    padding: 10px 0;
    margin: 0;

    /* border: 1px solid blue; */

}
.cms_objectBinFullLeft{
    display: flex;
    flex-direction: column;
    align-items: start;

    width: calc(100% - 10px);

    padding: 10px 5px;
    margin: 0;

    /* border: 1px solid blue; */

}
.cms_objectBinFullRight{
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: 100%;

    padding: 10px 0;
    margin: 0;

    /* border: 1px solid blue; */

}



.cms_vertBinSmall{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: 45%; min-width: 450px; max-width: 600px;
    height: fit-content;
    /* border: 1px solid green; */
}
.cms_vertBinSmallLeftAlign{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    
    width: fit-content; min-width: 450px; max-width: 1000px;
    height: fit-content;
}
.cms_vertBinLarge{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    width: fit-content; max-width: 1400px;
    height: fit-content;
    /* border: 1px solid green; */
}


/* For text */
.cms_containerTitleBin{
    text-align: center;

    width: 90%; max-width: 1400px;
    height: fit-content;

    padding: 2px;
    margin: 10px 0;
    /* border: 1px solid blue; */
}
.cms_paragraphBin{
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    text-align: left;
    line-height: 1.75em;

    width: 90%; max-width: 1000px;
    height: fit-content;

    padding: 2px 0;
    margin: 0;

    /* border: 1px solid blue; */
}
.cms_headerTextBin{
    
    display: inline-block;
    width: calc(100%); max-width: 1000px;
    height: fit-content;

    padding: 0;
    margin-bottom: 20px;

    line-height: 10rem;
}
.cms_bodyTextBin{
    width: calc(100% - 20px); max-width: 1000px;
    height: fit-content;

    line-height: 2em;
}
.cms_mapBinSmall{
    display: inline-block;
    width: 400px;
    height: 300px;
    /* height: 100%; min-height: 200px; max-height: 500px; */
    border: 1px solid red;
}


/* -------------------- Title and text bins -------------------- */
.cms_subheaderBin{
    width: calc(80% - 10px);
    max-width: calc(1400px - 10px);

    padding: 10px 5px;
    margin: 10px 0;
}
.cms_textContentFull{
    display: block;
    /* min-width: calc(100% - 20px); */
    width: calc(100% - 20px);
    max-width: calc(1000px - 20px);
    /* max-width: calc(800px - 20px); */

    padding: 10px 10px;
    margin: 10px 0;
    /* border: 1px solid red; */
}

/* ------------------------------ Heroes ------------------------------ */
.cms_centeredHero{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    /* overflow-y: hidden; */

    width: calc(90% - 80px); max-width: calc(1200px - 80px);

    height: fit-content; min-height: 300px; max-height: fit-content;

    margin: 60px 0;
    padding: 60px 40px;

    /* border: 1px solid red; */
}
.cms_horizontalHero{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;

    width: calc(90% - 80px); max-width: calc(1200px - 80px); 
    height: fit-content; min-height: 250px;

    margin: 60px 0;
    padding: 60px 40px;

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







/* ------------------------------ Modals ------------------------------ */
.cms_modalStyleFull1{
    display: none;
    position: fixed;
    z-index: 900;

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

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    overflow-y: auto;

    background-color: rgba(0, 0, 0, 0.6);
    /* background-color: black; */
}
.cms_modalContentBinLarge1{
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: calc(90% - 100px);
    height: fit-content;
    min-height: 60%;
    max-height: calc(90% - 60px);

    padding: 30px 50px;

    overflow-y: scroll;
    overflow-x: hidden;

}
.cms_modalContentBinSmall1{
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 400px;
    height: fit-content;
    min-height: 200px;

    padding: 30px 50px;

    /* overflow-y: scroll; */

    background-color: white;
}
.cms_modalPreviewBinContent{
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: calc(90% - 100px);
    height: calc(90% - 100px);
    /* min-height: 60%; */
    /* max-height: calc(90% - 60px); */

    padding: 30px 50px;

    overflow-y: scroll;
    overflow-x: hidden;

}

/* OLD */
.client_modalstyle2{
    display: none;
    position: fixed;
    top: 0;

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

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

    padding: 0;
    margin: 0;

    z-index: 100;
    overflow-y: scroll;
    /* background-color: var(--bg2); */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6);
}
.client_modalstyle2 .modalContent{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 90%;  max-width: 1400px;
    /* height: fit-content; min-height: 450px; max-height: 1000px; */

    height: 90vh;

    /* margin: 0 5%; */
    overflow-y: scroll;


    background-color: #fefefe;
    
    padding: 10px;


    border: 1px solid #888;

}

.cms_obj_HorizOrientation_R{
    flex-direction: row-reverse;
}



.roundedModalContentBin{
    border-radius: 10px;
}





/* Modal close button */
.closeModal {

    font-size: 48px;
    font-weight: 500;
    line-height: 40px;

    /* width: 100%; */
    height: fit-content;

    margin: 0;
    padding: 0;

    color: #aaa;
    /* border: 1px solid red; */
    transition: 0.2s ease-in-out;
  }
  .closeModal:hover,
  .closeModal:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}



::-webkit-scrollbar{
    height: 8px;
    width: 8px;
}
::-webkit-scrollbar-thumb:vertical{
    background-color: var(--primary);
    border-radius: 10px;
}
::-webkit-scrollbar-track:vertical{
    background: lightgray;
}


::-webkit-scrollbar-track:horizontal{
    background: none;

}
::-webkit-scrollbar-track:horizontal:hover{
    background: none;
}
::-webkit-scrollbar-thumb:horizontal{
    background-color: var(--primary);
    border-radius: 10px;
}




.createNewObjectBin_Style{
    width: 100%; max-width: 500px; min-width: 100%;
    
    padding: 50px 0;
}

