:root {
  --item-color: #0353a3;
  
  --MOA-gold: #ffc60b;
  --MOA-blue: #001589;
  
  --MOA-gray: #f0efe9;
  --MOA-gray-dark: #808080;
  --MOA-gray-darker: #2F4F4F;
  --MOA-blue-light: #4583d0; 
  --MOA-gold-light: #fad100;
  --MOA-orange: #f1a051;
  --MOA-orange-light: #f9c970;
  --MOA-green: #7e9f96; 
  --MOA-green-light: #c7e5db;   
  
  font-family:Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 22pt;
	color: #0072C6;
}

h2 {
	color: #0072C6;
	font-size: 20pt;
}

h3 {
	font-size: 16pt;
	font-weight: 400;
	
	
}

/*
Page wrapping div
*/
#imageCover {
		/* Note: The image ration is provided here to fit the gradient across all sizes. Image ratio is currently 3:2 so to get the height for transparency end
		we multiply by calc(2/3) by the background width (variable '--bg-width'). Then we subtract 10VW to get a smooth gradient */
		background-image: url("/SiteAssets/main_background_city_and_mountains.jpg");
		background-image: linear-gradient(to bottom, transparent 0% calc(var(--bg-width) * calc(2/3) - 10vw), var(--MOA-green) calc(var(--bg-width) * calc(2/3)) 100%), url("/SiteAssets/main_background_city_and_mountains.jpg");
		background-repeat: no-repeat;
		background-size: var(--bg-width) auto;
		background-position: center top;
		position: relative;
		padding: 0px;
}

@media (max-width: 400px) {
	#imageCover {
		--bg-width: 350VW;
	}

}
@media (min-width: 400px) {
#imageCover {
		--bg-width: 275VW;
		}
}
@media (min-width: 576px) {
#imageCover {
		--bg-width: 200VW;
		}
}

@media (min-width: 768px) {
#imageCover {
		--bg-width: 150VW;
		}
}

@media (min-width: 992px) {
#imageCover {
		--bg-width: 133VW;
		}
}

@media (min-width: 1400px) {
#imageCover {
		--bg-width: 100VW;
		}
}



/*#region Header */
#MuniAlertBar {
	color: white;
	font-size: 14pt;
}

#MuniAlertContent {
	padding: 15px;
}

#MuniAlertBar i.fas {
	font-size: 32pt;
}

#MuniAlertBar h3 {
	font-weight: bold;
	font-Size: 18pt;
	color: white !important;
}

#MuniAlertBar .critical {
	background-color: #d14336;
}

#MuniAlertBar .moderate {
	background-color: #e6b000;
}

#MuniAlertBar .information {
	background-color: #4583d0;
	background-color: var(--MOA-blue-light);
}

#MuniAlertBar a.btn-primary  {
	border-color: white;
	background: transparent;
	font-weight: bolder;
	font-weight: bolder;
	width: 200px;
}

#MuniAlertBar a.btn-primary:hover{
	border-color: white;
	background: #FFFFFF55;
	
}

.muni-menu-button {
    border-width: 1px;
    box-shadow: 4px 4px 5px 0px #000000a8;
	background-color: #001589;
    background-color: var(--MOA-blue);
    /* border-color: var(--MOA-gold); */
    color: white;
    padding: 8px;
    font-size: 22px;
    font-weight: bold;
}

/*#endregion */

/*#region DepartmentGeneral */
#s4-bodyContainer {
	width: auto !important; 
}

#s4-workspace {
	padding-left: 0px !important;
}

.dept-navbar {
	background-color: #808080;
	background-color: var(--MOA-gray-dark) !important;
	margin-bottom: 20px;

}

.dept-nav-item {
	padding: 8px;
}

.dept-nav-item a{
	font-size: 14pt !important;
	font-family: Helvetica, sans-serif !important;
	color: #FBFBFB !important;
	
}

.dept-nav-dropdown {
	background-color: #808080;
	background-color: var(--MOA-gray-dark) !important;
	width: fit-content !important;
}

.dept-nav-dropdown a:hover {
	background-color: #2F4F4F;
	background-color: var(--MOA-gray-darker)!important;
}

.general-content {
	font-size: 13pt;
	font-family: Helvetica, sans-serif
}

#dept-nav-section #header-icons {
	position: absolute;
	right:10px;
	text-transform:uppercase;
}


.header-icon-container {
	position: absolute;
	right:10px;
	text-transform:uppercase;
	padding-top:8px;
}

.header-icon-item {
	float:left;
}

.header-icon-link {
	padding:0;
}

.header-icon-item :hover {
	background-color:var(--MOA-gray-darker)!important;
}

/*#endregion*/

/*#region GeneralPageStyles */

.side-content { 
	background-color: #f0efe9;
	background-color: var(--MOA-gray);
}

/*#endregion*/

/*#region MuniNavigation*/

/* minor navstyles */
.minor-navbar {
	margin-bottom: 20px;

}

.minor-nav-item {
	padding: 8px;
}

.minor-nav-item a{
	font-size: 14pt !important;
	font-family: Helvetica, sans-serif !important;
	
}

.minor-nav-dropdown {
	width: fit-content !important;
}

.minor-nav-dropdown a:hover {
	background-color: #2F4F4F;
	background-color: var(--MOA-gray)!important;
}


/* major navstyles */
.major-navbar {
	margin-bottom: 20px;

}

.major-nav-item {
	padding: 16px;
}

.major-nav-item a{
	font-size: 18pt !important;
	font-family: Helvetica, sans-serif !important;
	
}

.major-nav-dropdown {
	width: fit-content !important;
}

.major-nav-dropdown a:hover {
	background-color: #2F4F4F;
	background-color: var(--MOA-gray)!important;
}



/*#endregion*/


/*#region MuniSidebar */
								
#s4-bodyContainer {
    display: flex;
    width: 100% !important;
    align-items: stretch;
	flex-direction: column;
}

#DeltaPlaceHolderMain {
	flex-grow: 1 !important;
}

#sideMenuWrapper {
	right: 0px;
}

#muniSideMenu {
	top: 0;
	right: 0;
	height: 100vh; /* Increase for mobile/table displays where scrolling resizes the viewport by hiding the navigation bar */
    min-width: 300px; 
    max-width: 300px;
    overflow-x: hidden;
    position: fixed;
    z-index: 100;
	background-color: #808080;
    background: var(--MOA-gray-dark);

    white-space: nowrap;
    transition: all 0.4s;
}

#muniSideMenu.closed {
    /*margin-left: -250px;*/
    min-width: 0px;
    max-width: 0px;
    overflow: hidden;
    white-space: nowrap;
   
}

.stickyMenuTop {
	position: sticky;
	top: 0;
}


.main-navbar-nav {
	height: 97vh;
}
/* Add the hover-highlight to each element except the first
		because it contains our 'close' button. */
.main-navbar-nav li:hover:not(:first-of-type) {	
	background-color: #2F4F4F;
	background-color: var(--MOA-gray-darker) !important;

}

.side-menu-close button{
  	margin: 16px 16px 16px 16px !important;
	color: white !important;
	font-weight: 600;
	border-color: white !important;
	border-width: 2px;
}

.main-nav-item {
	display: flex;
	flex: 1 1 auto;
	align-content: center;
	justify-content: flex-end;
	overflow: hidden;
	min-height: 40px;
	max-height: 70px;
}

.main-nav-item a{
	margin-top: auto;
	margin-bottom: auto;
	padding-right: 16px !important;
	text-align: right;
	color: #f0efe9;
	color: var(--MOA-gray) !important;
	font-size: 18pt;
	font-family: Helvetica, Arial, sans-serif;
}


@media (max-width: 768px) {
    #muniSideMenu {
        margin-left: -300px;
    }
    #muniSideMenu.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}
/*#endregion */


/*#region Footer*/

#MOA_ContentFooter {
	background: #7e9f96;
	background: var(--MOA-green);
	text-align:	center;
	color: white !important;
	font-weight: bold;
	padding-bottom: 15px;
	padding-top: 10px;
}
#MOA_ContentFooter a{
	color: white !important;
	font-weight: bold;
}

#MOA_ContentFooter a:visited{
	color: white !important;
	font-weight:bold
}

.footer-divider {
	border: 1px solid white;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

.footer-title h3 {
	color: white !important;
	font-weight:700;
	font-size: 16pt;
	padding-bottom: 15px;
	letter-spacing: 1.3px;
}
.footer-content {
	font-size: 12pt;
	line-height: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	
}

.footer-content.address {
	line-height: 1.5;
	font-weight:700;
	font-size: 13pt;
}

.footer-content a{
	font-size: 12pt !important;
}

.footer-content a:hover {
	text-decoration: underline !important;
}
/*#endregion */

/*#region LinkCard */
			
	.card-wrapper {
		margin-bottom: 20px;
		color: black;
	}
	
	.card-wrapper a:link, .service-wrapper a:visited  {
		color: black;	
	}
	
	.card-wrapper a:hover{
		text-decoration: none;
		color: black;
	}
	
	div.card {
		background-color: white;
		border: 1px solid #ddd;
		border-radius: 10px;
		box-shadow: 5px 5px 5px rgb(0 0 0 / 30%);
		padding: 20px;
		height: 100%;
	}
	div.card:hover {
		background-color: lightgrey;
	}
	
	div.card-title {
		align-self: center;
		color: #001589;
		color: var(--MOA-blue);
		display: inline;
		font-size: 18pt;
		font-weight: 700;
		font-weight: bold;
		padding-bottom: 5px;
	}
	div.card-title a {
		align-self: center;
		font-size: 18pt;
		line-height: 0.9;
		color: #0047ba;
	}
	div.card-description {
        padding-top: 5px;
		font-size: 12pt;
		font-weight: 400;
	}
	
	.card-link {
		color: black;
	}
	
	.card-link :hover{
		text-decoration: none;
		
	}
	
	.card-info {
		margin-top: 22px;
	}
		/*#endregion*/

/*#region EventCalendar */
#MOA_EventsControl {
	background: #f8f1df;
	display:inline-block;
	vertical-align:top;
	margin-left: 2px;
	margin-right: 2px;
	width: 345px;
}
#MOA_EventsControl H2 {
	text-align: left;
	padding-left: 25px;
	font-size: 32px !important;
	font-family: Rubik, sans-serif !important;
}
#MOA_EventsControl UL {
	padding-top:15px;
	padding-bottom:15px;
	padding-right: 10px;
	margin-left: 10px;
	margin-right: 10px;
	background: #f5d842;
}
#MOA_EventsControl LI {
	color: #00579D;
	margin-bottom: 12px;
	padding-bottom: 10px;
}
#MOA_EventsControl UL LI .MOA_EventsControl_EventDate {
	LINE-HEIGHT: 20px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 12px;
	font-weight: bold;
	font-size: 18px;
	font-family: Rubik, sans-serif;
}
#MOA_EventsControl UL LI .MOA_EventsControl_Link {
	padding-left: 15px;
}
#MOA_EventsControl A {
	text-decoration: none;
	font-size: 18px;
	font-family: Rubik, sans-serif;
}

/*#endregion */
.deptNavSubItem > .dept-nav-item a {
	font-size:10pt;
}