/*--------------------------*/
/* Begin Footer Styles      */
/*--------------------------*/

/*Set the footer height using the --footer-height css variable above*/

:root
{
  --footer-height: 75px; /*adjust the height of the footer here*/
  --footer-height-inverse: -75px;
}

html,
body
{
	margin: 0;
	height: 100%;
}

/*unsetting the default padding that Flare puts on .body-container so that
the footer spans the entire width of the page. Add the padding back in on 
#bodyContent, which doesn't contain the footer.*/
.body-container {
    padding-left: unset;
    padding-right: unset;
}

/*adding the padding that was removed from .body-container*/
div[data-mc-content-body] 
{
	padding-bottom: unset;
	height: 100%;
}

.height-container-sidenav {
	padding-bottom: unset;
}

/*setting the main content div to take at least 100% of the screen height,
yet leave some padding on the bottom. This is the space we'll slide the footer
into.*/
#mc-main-content
{
	min-height: 100%;
	padding-bottom: var(--footer-height);
}

/*adds empty space between the end of the content and the beginning of the footer*/
#mc-main-content:last-child{
	margin-bottom: 50px;
	padding-right: 70mm;
}

/*adding the padding back in that was taken off .body-container, and setting
the min-height*/
#bodyContent{
	padding-left: 1em;
	padding-right: 1em;
	min-height: 100%;
}

/*margin-top uses a calc() function to find the inverse of the footer-height*/
#footer
{
	//*background-color: black;*//
	color: black;
	padding-left: 15px;
	padding-bottom:10px;
	font-style: italic;
	//*margin-top: var(--footer-height-inverse);*//
	height: var(--footer-height);
}

/*--------------------------*/
/*   End Footer Styles      */
/*--------------------------*/