/* RLC site changes */
#dnn_FullPane {margin-top: 40px; margin-bottom: 40px}
.grayback {background-color: #ebebeb;  margin-bottom: 40px }
.blackbck {background-color: #000; padding-top: 30px; padding-bottom: 30px}
.missionwords {padding: 40px; text-align:center; font-weight:bold; font-size: 1.2em}

h2 {margin-bottom: 2rem}

.S001_Theme_Default .SF_Button, .S001_Theme_Default .SF_PrintForm, .S001_Theme_Default .SF_CheckOut, .S001_Theme_Default .SF_Return {background-color:#e44029 !important; color: #fff !important; padding: 6px 42px !important}
.S001_Theme_Default .fieldtitle {color: #fff !important} 

/* these are your root variables - change these to modify the colors or fonts and it will update all the styles in the theme */

:root {
    --main-color: #000;
    --main-color-lighter: #2890D7;
	--main-color-darker: #163549;
	--main-color-darkest: #1d3446;
    --secondary-color: #163549;
    --secondary-color-lighter: #304F63;
	--gray: #373737;
	--gray-lighter: #ebebeb;
    --white: #ffffff;
	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 16px;
	--text-lg: 18px;
	--text-xl: 20px;
	--leading-base: 1.6;
	--leading-tight: 1.2;
	--font-body: 'Lato', sans-serif;
	--font-display: 'Lato', sans-serif;
	--rounded: 16px;
	--prose-max-w: 65ch;
    --footerbck: #fff;

}

body#Body {
	font-family: var(--font-body);
	color: var(--gray);
	font-size: var(--text-base);
	line-height: var(--leading-base);
	
}

header {
	
}

.footer {border-bottom: 10px solid #e44029; background-color: var(--footerbck);}

/* minor tweaks to .Normal styles */
.Normal {
	font-family: var(--font-body);
	color: var(--gray);
	font-size: var(--text-base);
	line-height: var(--leading-base);
	
}
.Normal ul {
	list-style: disc;
}

.Normal ul ::marker {
	color: var(--main-color);
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--font-display);
}

a {
    color: var(--main-color);
}
a:visited {
    color: var(--main-color);
}
a:hover {
    color: var(--main-color-lighter);
}

.z-30 {
	z-index: 30;
}

/* button styles */

.btn-primary {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--white);
}

.btn-primary:visited {
    color: var(--white);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.bg-primary {
	background-color: var(--main-color) !important;
}
.bg-primary a {
	color: var(--white);
}

.bg-primary-darker {
	background-color: var(--main-color-darker) !important;
}
.bg-primary-darker a {
	color: var(--white);
}
.bg-primary-darkest {
	background-color: var(--main-color-darkest) !important;
}
.bg-primary-darkest a {
	color: var(--white);
}


/* dnn search widget */
.search {
	display: flex;
	align-items: center;
}
#dnn_dnnSearch_ClassicSearch {
	display: inline-flex;
}
.searchInputContainer {
	flex: none;
	margin: 0 !important;
}
.searchInputContainer .NormalTextBox:focus {
	outline: var(--main-color-lighter);
}
a.search-button {
	display: inline-flex;
	flex: none;
	width: 31px;
	height: 31px;
	position: relative;
	text-align: center;
	align-items: center;
	overflow: hidden;
	font-size: var(--text-sm);
	text-decoration: none !important;
}
a.search-button::before {
	flex: none;
	top: 0;
	left: 0;
	width: 31px;
	height: 31px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f002";
	color: var(--white);
}

a.search-button:hover::before {
	opacity: 0.7;
}

/* social media links */

.social-media a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 25px;
	height: 25px;
	border-radius: 9999px;
}

.social-media a i {
	flex: none;
}

.social-media a:hover {
	background: var(--main-color-lighter);
	color: var(--main-color);
}

/* main navigation on desktop */

nav#nav-main ul.root {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-flex;
	align-items: center;
	justify-content: start;
}

nav#nav-main ul.root li.menu-item {
	flex: none;
	position: relative;
	padding: 10px 20px;
}


/* We use a span to just make aligning things easier */
nav#nav-main ul.root li.menu-item > span {
	display: inline-flex;
}

/* the link */
nav#nav-main ul.root li.menu-item > span a {
	color: var(--gray);
	font-weight: bold;
	display: block;
	font-size: var(--text-lg);
	text-decoration: none;
}

/* the caret that apperas when a menu item has children */
nav#nav-main ul.root li.menu-item > span i {
	margin-left: 10px;
}

/* style the active parent page */
nav#nav-main ul.root li.menu-item > span a.active {
	color: var(--main-color);
}

/* style the menu when the user hovers over it */
nav#nav-main ul.root li.menu-item:hover {
	background: var(--secondary-color);
}
nav#nav-main ul.root li.menu-item:hover > span a {
	color: var(--white);
}
nav#nav-main ul.root li.menu-item:hover > span i {
	color: var(--white);
}


/* when the user hovers over the parent item, show the dropdown menu */
nav#nav-main ul.root li.menu-item:hover > .menu-dropdown {
	display: block !important;
}

/* dropdown menu */

nav#nav-main ul.root li.menu-item .menu-dropdown {
	display: none;
	position: absolute;
	transform: translateX(-50%);
	top: 100%;
	left: 50%;
	background: var(--secondary-color);
	width: 275px;
	padding: 15px;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

nav#nav-main ul.child-menu  {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav#nav-main ul.child-menu > li {
	position: relative;
}

nav#nav-main ul.child-menu > li > a {
	color: var(--white);
	padding: 5px 10px;
	display: block;
	text-decoration: none;
}

nav#nav-main ul.child-menu > li > a:hover {
	background-color: var(--main-color-lighter);
}

/* active page */
nav#nav-main ul.child-menu > li > a.active {
	background: var(--main-color);	
}

/*third level menu*/

nav#nav-main ul.grandchild-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav#nav-main ul.grandchild-menu li a {
	color: var(--white);
	font-size: var(--text-sm);
	padding: 5px 10px 5px 30px;
	display: block;
	text-decoration: none;
}

nav#nav-main ul.grandchild-menu li a.active {
	font-weight: bold;
	background-color: var(--main-color-lighter);
}



/* mobile navigation */

nav#nav-mobile ul.root {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

nav#nav-mobile ul.root li.menu-item {
	flex: none;
	position: relative;
	padding: 10px 0px;
}


/* We use a span to just make aligning things easier */
nav#nav-mobile ul.root li.menu-item > span {
	display: flex;
	justify-content: space-between;
}

/* the link */
nav#nav-mobile ul.root li.menu-item > span a {
	color: var(--gray);
	font-weight: bold;
	display: block;
	font-size: var(--text-lg);
	text-decoration: none;
	flex: none;
}



/* the caret that appears when a menu item has children */

nav#nav-mobile ul.root li.menu-item span.dropdown-caret {
	width: 40px;
	margin-left: auto;
	flex: none;
	text-align: center;
}

nav#nav-mobile ul.root li.menu-item span.dropdown-caret i {
	
}

span.dropdown-caret.active-caret i::before {
	content: "\f077";
}

/* the parent page has a child page that is active so make indicate that it's active somehow */
nav#nav-mobile ul.root li.menu-item > span a.breadcrumb-active {
	color: var(--main-color-lighter);
}

/* style the active parent page */
nav#nav-mobile ul.root li.menu-item > span a.active {
	color: var(--main-color);
}


/* dropdown menu */

nav#nav-mobile ul.root li.menu-item .menu-dropdown {
	display: none;
	background: var(--secondary-color);
	padding: 15px;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

nav#nav-mobile ul.child-menu  {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav#nav-mobile ul.child-menu > li {
	position: relative;
}

nav#nav-mobile ul.child-menu > li > a {
	color: var(--white);
	padding: 5px 10px;
	display: block;
	text-decoration: none;
}

nav#nav-mobile ul.child-menu > li > a:hover {
	background-color: var(--main-color-lighter);
}

/* active page */
nav#nav-mobile ul.child-menu > li > a.active {
	background: var(--main-color);	
}

/*third level menu*/

nav#nav-mobile ul.grandchild-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav#nav-mobile ul.grandchild-menu li a {
	color: var(--white);
	font-size: var(--text-sm);
	padding: 5px 10px 5px 30px;
	display: block;
	text-decoration: none;
}

nav#nav-mobile ul.grandchild-menu li a.active {
	font-weight: bold;
	background-color: var(--main-color-lighter);
}



/* sidebar navigation */

nav.sidebar > ul.root {
	margin: 0;
	padding: 15px;
	list-style: none;
	background: var(--secondary-color);
}

nav.sidebar > ul.root > li {
	display: block;
}

nav.sidebar > ul.root > li > a {
	color: #fff;
	padding: 15px 10px;
	display: flex;
	width: 100%;
	font-weight: bold;
	align-items: center;
	justify-content: between;
	text-decoration: none;
	transition: ease-in-out 0.2s all;
	line-height: var(--leading-tight);
}

nav.sidebar > ul.root > li > a:hover {
	background: #ffffff;
	color: var(--dark-gray);
}

/* if the child page in the sidebar is active, show an indicator on the parent of that active page */

nav.sidebar > ul.root > li > a.breadcrumb-active {
	background: #ffffff;
	color: var(--dark-gray);
}

/* active top page in the sidebar */
nav.sidebar > ul.root > li > a.active {
	background: #ffffff;
	color: var(--dark-gray);
}

/* submenu in the sidebar */
nav.sidebar ul.child-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav.sidebar ul.child-menu > li {
	
}

nav.sidebar ul.child-menu > li > a {
	color: #ffffff;
	display: block;
	padding: 5px 15px;
	text-decoration: none;
	font-size: var(--text-sm);
}

nav.sidebar ul.child-menu > li a:hover {
	opacity: 0.7;
}

nav.sidebar ul.child-menu > li > a.active {
	font-weight: bold;
	background-color: var(--main-color-lighter);
}


/* re-style the dnn login */

.LoginPanel {
	width: auto !important;
	float: none !important;
	display: flex !important;
	padding: 0 !important;
	max-width: 100% !important;
	justify-content: center;
}

.LoginPanel > div {
	min-width: 300px;   
	max-width: 500px;
}

/* style the form item wrapper */

.LoginPanel .dnnForm .dnnFormItem {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

/* style the form label */

.LoginPanel .dnnFormItem > .dnnLabel {
	margin-top: 0;
}

.LoginPanel .dnnFormItem > .dnnLabel label {
	display: block; 
}

.LoginPanel .dnnLabel {
	display: block;
	float: none;
	position: relative;
	width: auto;
	padding-right: 0;
	margin-right: 0;
	overflow: visible;
	text-align: left;
}

/* boostrap fix - remove the yellow background from the checkbox field */
.dnnCheckbox .mark {
	background: none !important;
}

/* give the Remember Me checkbox a smaller text size */
.dnnLoginRememberMe {
	font-size: 15px;
}

/* style the login panel text input fields */
.LoginPanel .dnnLoginService input[type="text"], 
.LoginPanel .dnnLoginService input[type="password"] {
	width: 100% !important;
	min-width: 100%;
	margin: 0;
	border-radius: 1px;
	padding: 10px;
}

/* hide the empty label beside the Reset Password button */
.LoginPanel .dnnFormItem:last-child span.dnnFormLabel {
	display: none;
}

.LoginPanel ul.dnnActions {
	margin: 0 !important;
	padding: 0 !important;
}

/* primary action buttons - also used in dnn modal popups */

.dnnPrimaryAction, 
.dnnFormItem input[type="submit"], 
a.dnnPrimaryAction {
	background: var(--main-color);
	border: none;
	color: #ffffff;
	text-shadow: none;
	font-weight: 400;
	box-shadow: none;
	border-radius: 1px;
	font-size: 15px;
	padding: 10px 20px;
}
.dnnPrimaryAction:hover, 
.dnnFormItem input[type="submit"]:hover, 
a.dnnPrimaryAction:hover {
	background: var(--main-color-lighter) !important;
	text-decoration: none !important;
}

/* secondary action buttons - also used in dnn modal popups */

.dnnSecondaryAction, 
.dnnFormItem input[type="submit"], 
a.dnnSecondaryAction {
	background: #f5f5f5;
	border: none;
	color: #555;
	text-shadow: none;
	font-weight: 400;
	box-shadow: none;
	border-radius: 1px;
	font-size: 15px;
	padding: 10px 20px;
}
.dnnSecondaryAction:hover, 
.dnnFormItem input[type="submit"]:hover, 
a.dnnSecondaryAction:hover {
	background: #f1f1f1 !important;
	text-decoration: none !important;
}

.sc-content-block-menu.sc-content-block-quick-insert {
	display: none !important;
	visibility: hidden !important;
}
