@charset "utf-8";

@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600);

/* General Inspire css */
/* ======= GENERAL STYLES =======*/
html,body{height:100%;}
body{font-size:10pt; background-color:#fff; margin:0 auto; padding:0; color:#000;}
div.content{margin:0 10px;}

a{text-decoration:none;}
h1.pgTitle{text-transform:uppercase; position:relative;}
h1.pgTitle .subHead{text-transform:none;}
h1.pgTitle .subHead a{text-decoration:underline;}
/* removed #pgBackLink from back button on thread.cfm. */
#pgBackLink, #pgNextLink{background-color:#777; font-size:10pt; padding:4px 10px; border-radius:12px;}
#pgBackLink{position:absolute; right:15px; top:5px;}
a#pgBackLink, #pgBackLink i, a#pgNextLink, #pgNextLink i{color:#fff;}
input[type=submit], input[type=reset], input[type=button], button{background-color: #777; text-transform:uppercase; padding:6px 8px;}
hr{color:#999;height:1px;border:0;background-color:#999;}
.title{color:#fff; font-size:40pt; width:800px; float:right; margin-right:20px; font-weight:bold;}
#pgControlsTray{margin:0; min-height:26px; padding:12px 0 0 0; clear:left; overflow:auto;}
#pgControlsTray.halfTray{padding:0; clear:none; float:right;}
#pgControlsTray, #pgControlsTray a, a.aBtn{color:#777;}
#pgControlsTray a, a.aBtn{border:1px solid #e0e0e0; padding:3px 6px; background-color:#fff;}
#pgControlsTray a.alert i{color:#c00;}
#pgControlsTray a.alert{border-color:#c00;}
#pgControlsTray a.filterApplied i{color:#0a0;}
#pgControlsTray a.filterApplied{border-color:#0a0;}
#pgControlsTray form{display:inline;}
#pgControlsTray label{color:#000;}
#pgControlsTray input, #pgControlsTray select{height:26px; vertical-align:middle; border:1px solid #ccc; margin:0;}
#controls1, #controls2{padding:4px 0;}
#controls1{float:left;}
#controls2{float:right;}
#pgControlsTray a, #pgControlsTray i{display:inline-block; line-height:18px;}
#controls1 a{margin-right:5px;}
#controls2 a{margin-left:5px;}
#controls2 a.select2-choice{width:166px;}
a.aBtn{padding:5px 10px; display:inline-block;}
a.aBtn+a.aBtn{margin-left:10px;}
table.sortable .eventFullRow td{background-color:#ddd;}
table.sortable .eventFullRow td, .eventFullLink{color:#777;}

.white8bold{color:#fff; font-weight:bold;}
.text8{color:#000;}

#meta #userAcct{float:left; margin-left:10px;}
.subHead td{background-color:#c9c9c9; border-bottom:1px solid #999; border-top:1px solid #fff; text-transform:uppercase; font-weight:bold !important;}
#loginBox{background-color:#fff !important;}
#loginBox, #loginBox a{color:#000;}

.responsiveFrm select, .responsiveFrm textarea, .responsiveFrm input:not([type=submit]):not([type=reset]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):not([type=image]){height:auto;}

table.sortable{width:1220px;}
.hasSideMenu table.sortable{width:1000px;}
.ui-widget-content table.sortable, table.sortable.matrix{width:100%;}
.sortable>thead>tr>th{padding:6px 3px; font-weight:normal;}

/* MMenu */
.mm-listitem__btn{padding-right:45px;}
.mm-listitem__btn:not(.mm-listitem__text){border-left-width:0;}
.mm-listitem{border-color:rgba(255,255,255,.25);}
.mm-navbar{border-bottom:2px solid rgba(255,255,255,.5);}
.mm-counter{color:rgba(255,255,255,.5);}
.mm-navbar__title{text-transform:uppercase;}
.mm-counter{padding-left:5px;}

/* ======= 	TOP LINKS STYLES =======*/
#meta{margin:auto; text-align:right; width:1250px; line-height:23px; padding:0; position:inherit;}
#meta *{margin:0; padding:0;}
#meta ul{list-style:none;	margin-right:8px;}
#meta ul li{list-style:none; display:inline; padding:0; display:inline-block;}
#meta ul li a{text-decoration:none; font-size:14px;}
#meta ul li a:hover{text-decoration:none;}
#meta li + li:before{content:" | ";font-size:14px;padding:0 12px;}
#OutstandingBalance{font-size:12px;}
.preheadernav, #logoblock{position:relative; z-index:1002; width:100%; min-height:18px; padding:0; margin:0;}
#logo{clear:right; margin:auto; text-align:left; width:1250px; line-height:inherit; font-size:24px;}
#logo img{margin-right:15px; vertical-align:baseline;}
#topNav{position:relative; z-index:1001; height:auto;}
#topNav>ul{max-width:1250px; border-left:1px solid rgba(255,255,255,.25);}
#topNav>ul>li{padding:0 10px; border-right:1px solid rgba(255,255,255,.25);}
#headerTabs{display:table; width:100%; border-bottom:1px solid #ccc; border-top:1px solid #fff;}
#headerTabs .headerTab{display:table-cell; padding:0; border-left:1px solid #eee; text-align:center; vertical-align:top;}
#headerTabs .headerTab:first-child{border-left:none;}
#headerTabs p{display:inline-block; text-align:center; padding:20px 0; margin:0; width:100%;}
#headerTabs .headerTab:hover p, #headerTabs .headerTab.tabSel p{background-color:rgba(255,255,255,.3);}
/*------------------------------------*\
	TOP DROPDOWN NAV
\*------------------------------------*/

#mainmenu {
	height: 30px;
	position: relative;
	list-style: none;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left: 5px;
	z-index: 900;
/*	background-image: url(images/main-nav-bg.png);
	background-repeat: repeat-x; */
}

#mainmenu li { padding-top: 8px; float: left; }
#mainmenu a { 
	color: #fff; 
	font-size: 12px; 
	border-left: 1px solid #fff; 
	padding: 0px 12px; 
	margin-bottom: 8px; 
	text-decoration: none; 
	display: block; 
}
#mainmenu li:first-child a { border-left: none; margin-left: 0px; }
#mainmenu ul {
	list-style: none;
	position: absolute;
	display: none;
	margin-top: -2px;
	padding: 0px;
	width: 200px;
	opacity: 1;
	filter: alpha(opacity=100);
}
     
#mainmenu ul li {
	float: none;
	margin-left: 0;
	padding: 0px !important;
	border:solid 1px white;
}
#mainmenu ul a { 
    border: none; 
    margin: 0;
    white-space: nowrap; 
	padding: 5px 10px; 
    color: #fff; 
}
#mainmenu li:hover ul  { 
    display: block;  
	-moz-box-shadow: 0px 6px 15px #000;/* Firefox */
	-webkit-box-shadow: 0px 6px 15px #000;/* Safari and Google Chrome */
	box-shadow: -1px 6px 15px -2px #000;/* W3C Standard */
}
#mainmenu ul li:hover {
	opacity: 1 !important;    
	filter:alpha(opacity=100) !important;
}
/*------------------------------------*\
	LEFT COLUMN NAV
\*------------------------------------*/
/* Clear float */
.clear{
    clear:both;
}		

/* ~~ Element/tag selectors ~~
ul, ol, dl {
	padding: 0;
	margin: 0;
} */
.wid ul, .wid ol, .wid dl{margin:0 0 15px 25px;}
.wid ul.slick-dots{margin:0;}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
	/* padding-right: 15px;
	padding-left: 15px; adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
a { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
	width:1250px;
	margin:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	position:relative;
}
/* Shared styles */
/*------------------------------------*\
	Container Bg angled drop shadow
\*------------------------------------*/
.box{position:relative; margin:0 auto;}
.nivo-caption{width:100%;}
.header{width:1250px;	height:275px;}
.header h1 {
	position:absolute;
	z-index: 11;
	text-shadow: 1px 1px 3px #666;
	width: 1210px;
  margin: 0 10px;
}
.header h1.vertbottom{bottom:50px;}
.header h1.verttop{top:50px;}
.header h1.vertmiddle{top:115px;}
.header h1.horzleft{text-align:left;}
.header h1.horzcenter{text-align:center;}
.header h1.horzright{text-align:right;}
/*------------------------------------*\
	NIVO Slider stlyes
\*------------------------------------*/
#slider-wrapper {
	position: relative;
	z-index: 10;
}
.nivo-controlNav {
	bottom: 10px;
  right: 15px;
	position: absolute;
	z-index:1098 !important;
}
.nivo-controlNav a {
	background-image:url(/sysfiles/templates/images/inspire/nav-button.png);
	border: 0 none;
	display: block;
	float: left;
	height: 10px;
	margin-right: 7px;
	text-indent: -9999px;
	width: 10px;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	position: relative;
	cursor: pointer;
	z-index:1099 !important;
}
.nivo-controlNav a.active
{
	background-position: 0pt -10px;
}

/*------------------------------------*\
	THREE COLUMN LAYOUT CONTROLLERS
\*------------------------------------*/
.equal {
	display:table;
	width:1250px;
	background-color:#fff;
}
.row {
	display: table-row;
}
.sidebarleftcontainer {
	width: 219px;
	display: table-cell;
	vertical-align: top;
}
.sidebarleft {
	top: 0;
	width: 219px;
	vertical-align: bottom;
}
.sidebarleftbottomfade {
	height: 100px;
	width: 219px;
	bottom: 0;
	position: absolute;
}

.sidebarleftcontainer .sidebarleft.sidebarright .jqueryslidemenu ul li{text-align:left; padding-right:0; padding-left:10px;}
.sidebarleft.sidebarright .jqueryslidemenu ul li ul, .sidebarleft.sidebarright .jqueryslidemenu ul li ul li ul{left:-221px;}
.sidebarleft.sidebarright>#sideNav>ul>li{position:relative;}
.sidebarleft.sidebarright>#sideNav>ul>li>a{padding-left:10px;}
.sidebarleft.sidebarright>#sideNav>ul>li .menuDDicon{position:absolute; left:8px; visibility:hidden;}
.sidebarleft.sidebarright>#sideNav>ul>li .menuDDicon:before{visibility:visible; content:"\ab";}

.sidebarrightcontainer {
	margin-top:10px;
	width: 203px;
	float:right;
	clear:right;
	text-align:right;
}
.sidebarrightwidget, .sidebarrightwidgetfade {
	display: inline-block;
	width: 175px;
	padding:7px;
}
.sidebarrightwidget {
	text-align:left;
	margin-top:20px;
}
.sidebarrightwidgetfade {
	height: 100px;
}
.sidebarrightwidget h3 {
	font-style:normal;
	font-size: 12pt;
	margin: 5px 0 10px 0; 
	padding:0;
	display: block;
	width: 100%;
	padding-bottom: 5px;
	border-bottom: 2px solid #666;
}
.sidebarrightwidget hr {
	border:0;
	width:180px;
	height:2px; margin-top:4px;
}	
.sidebarrightwidget .new {
	position:absolute;
	border-radius: 3px;
	font-size: 8pt;
    margin-top:12px;
	margin-bottom:6px;
	margin-left:110px;
	width:70px; 
	text-align:center;
	background-color: #ffffff;	
}
.sidebarrightwidget .newcount {
	position:absolute;
	border-radius: 10px;
	font-size: 7pt;
	margin-top:4px;
	margin-left:170px;
	width:18px; 
	text-align:center;
	color:#FFF;
	background-color: #003366;	
}
.sidebarrightwidget .more {
	float:left;
	border-radius: 3px;
	font-size: 8pt;
	margin-left:10px;
	margin-top:12px;
	margin-bottom:6px;
	width:50px; text-align:center;
	background-color: #ffffff;	
}
.sidebarrightwidget .post {
	padding:5px	;
	top: 0;
	font-size:12px;
	text-align:center;	
}
.sidebarrightwidget .post hr {
	border:0;
	width:180px;
	background-color: #cccccc;
	height:1px; margin-top:4px; 
}
.sidebarrightwidgetshim {
	height: 30px;
}

.sidewidgettop{background:url(/images/widget-right-shadow-top.png) no-repeat; width:203px; height:13px;}
.sidewidgetbottom{background:url(/images/widget-right-shadow-bottom.png) no-repeat; width:203px; height:13px;}

.familytag {
	display: inline-block;
	height: 60px;
	width: 188px;
	margin-left: 15px;
	z-index:3;
	position:relative;
	padding:0;
}
.familytag span{
	/*Welcome Text*/
	position: absolute; top: 12px; left: 12px; display: block; font-size:12pt;
}
.familytag span em{
	font-size:9pt; 
}
.gmaps_link {
	margin-top:10px;
	vertical-align: top;
	text-align:center;
	font-size:10px;
}

.pagecontent{padding:15px 5px 10px 5px;}
.pagecontent ul{padding:0 0 0 40px;}
.pagecontent ul li{line-height:1.3em;}
.pagecontent ul li.tabContTab{height:27px; line-height:normal;}

.widgetContainer .tabContainer.ui-tabs .ui-tabs-nav li{background-color:transparent !important; background:inherit;}
.widgetContainer .tabContainer.ui-tabs .ui-tabs-nav li.ui-tabs-active{background-color: rgba(255,255,255,.2) !important;}

/* ~~ jumpToTop Button */

.jumpToTop {
	position: fixed;
	bottom: -20px;
	right: 15px;
	height: clamp(35px, 3vh, 42px);
	width: clamp(90px, 10vw, 120px);
	font-size: clamp(12px, 2.25vw, 14px);
	border: 2px solid #fff;
	border-radius: 8px;
	display: flex;
	padding-top: 5px;
	padding-bottom: 2px;
	justify-content: center;
	text-align: center;
	z-index: 9999;
	background-color: rgba(0,0,0,.8);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
	cursor: pointer;
}

.active {
	visibility: visible;
	opacity: 1;
}

.jumpToTop a i.fa-solid {
	color: #fff;
}

/* ======= Conversations Revamp Styles ======= */
/* ~~ Like Button ~~ */

.likeactive {
	--fa-secondary-opacity: 1;
}

.likeinactive {
	--fa-secondary-opacity: 0;
}

/* ~~ Conversations Page Styles ~~ */
.pgTitleTray {
	display: flex;
	justify-content: space-between;
}

.pgTitleTrayLeft {
	max-width: 80%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 12px;
}

.flexContainer {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.flexContainer i {
	font-size: 18px;
	color: #777;
	margin-top: 5px;
}

.pgTitleTrayLeft h1 {
	display: flex;
	gap: 15px;
	align-items: center;
}

#changeThreadTitle {
	font-size: 22pt;
	cursor: pointer;
}

#newThreadTitle {
	height: 22pt;
    font-size: 19pt;
    font-weight: 600;
    width: fit-content;
}

#threadTitleEdit {
	margin-bottom: 2px;
}

#saveThreadTitle {
	background-color: #f2675a !important; 
	color: #fff !important; 
	padding: 3px 6px; 
	border: solid 1px #e0e0e0;
	height: 26pt;
	font-size: 15pt;
	cursor: pointer;
}

#cancelThreadTitle {
	background-color: #777 !important; 
	color: #fff !important; 
	padding: 3px 6px; 
	border: solid 1px #e0e0e0;
	height: 26pt;
	font-size: 15pt;
	cursor: pointer;
}

.pgTitleTrayRight {
	max-width: 20%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	flex: 1 1 auto;
}

.pgTitleTrayRight a {
	background-color:#777; 
	font-size:10pt; 
	padding:4px 10px; 
	border-radius:12px;
	color:#fff;
}

#feedBackBtn {
	color:#fff;
}

.conversationsControlTray {
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
	padding: 4px 8px;
	border-radius: 5px;
	margin-bottom: 10px;
	row-gap: 0px;
}

.dropdown-content {
	display: none;
	flex-direction: column;
	position: absolute;
	left: 0;
	top: 100%;
	background: #fff; 
	border: 1px solid #ccc;
	width: 136.6px;
	z-index: 1000;
}

.dropdown-item {
	padding: 10px 5px;
	cursor: pointer;
}

.dropdown-break {
	border-top: 1px solid #ccc;
}

.conversationsControlTray label {
	color: #fff;
	font-size: 12px;
}

.conversationControls1 {
	display: flex;
	justify-content: flex-start;
	gap: 7px;
}

.conversationControls2 {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
}

.conversationControls2 form {
	display: flex;
	flex-wrap: wrap;
}

#convoDisclaimer i {
	color:#777;
}

.stdMenuBtn {
	display:inline-flex;
	border: 1px solid #e0e0e0;
	padding: 3px 6px;
	background-color: #fff;
	width: fit-content;
	cursor: pointer;
	color: #777;
	height: 18px;
	gap: 2.5px;
	align-items: center;
}

.stdMenuBtn i {
	color: #777;
}

.stdMenuBtn p {
	margin-bottom: 0;
}

#clearFilters {
	padding: 6px 8px;
	height: 1.85em;
	font-size: 10pt;
}

#fltrFrm {
	display: flex;
	gap: 7px;
}

#forumFrm {
	display: flex;
	gap: 5px;
}

.formatSelect {
	border: 1px solid #ccc;
	height: 1.85em;
	color:rgb(119, 119, 119);
}

.searchItems {
	display: flex;
	gap: 2px;
}

.searchBar {
	padding-left: 2.2em;
	background-image: url('/sysfiles/templates/images/search-icon.svg');
	background-repeat: no-repeat;
	background-position: left 5px center;
	background-size: 1.3em;
	height: 1.85em;
	border: 1px solid #ccc;
}

#searchBtn {
	border-radius: 2px;
	background-color: #777;
	height: 1.85em;
	color: #fff;
    margin-right: 6px;
}

.threadContainer .threadRow:last-child {
	border-bottom: 1px solid #ccc;
}

.threadRow {
	display: grid;
	grid-template-columns: 5fr 3fr 3fr 1fr;
	gap: 16px;
	align-items: center;
	padding: 12px 0 12px 22px;
	border-top: 1px solid #ccc;
}

.threadRow h3 i {
	padding:0 4px;
}

.threadFirstColumn {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.threadFirstColumn h3 {
	display: flex;
	margin-bottom: 0px;
	align-items: center;
}

.threadSecondColumn, .threadThirdColumn {
	display: flex;
	justify-content: center;
	align-items: center;
}

.threadLastColumn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 25px;
}

.threadTopContainer {
	display: flex;
	gap: 25px;
	align-items: center;
}

.threadTitle {
	color: #000;
}

.threadTitle i {
	color: #777;
	font-size: 13px;
}

/* addInfoPopup override for objUtils.listPopup()*/
.addInfoPopup {
	font-weight: 600 !important;
}

.threadInfo {
	font-size: 12.5px;
	color: rgb(119, 119, 119);
	margin-bottom: 0px;
}

.badgeIcon {
	font-size: 11px;
	background-color: rgb(242, 103, 90);
	color: #fff;
	padding: 3px 6px;
	border-radius: 5px;
	width: fit-content;
	margin-left: 3px;
}

.bubbleGen {
	font-size: 11px;
	padding: 3px 6px;
	border-radius: 5px;
	width: fit-content;
	cursor: pointer;
}

.bubbleClass {
	font-size: 11px;
	padding: 3px 6px;
	border-radius: 5px;
	width: fit-content;
	cursor: pointer;
}

.bubbleSC {
	font-size: 11px;
	padding: 3px 6px;
	border-radius: 5px;
	width: fit-content;
	cursor: pointer;
}

#typeSC {
	display: flex;
	gap: 5px;
	align-items: center;
	width: 80%;
	max-width: 450px;
}

#createSC {
	display: flex;
	gap: 5px;
	background-color: #777;
	color: #fff;
	text-transform: uppercase;
	padding: 6px 8px;
	font-size: 10pt;
	border-radius: 12px;
}

@media only screen and (max-width:899px) {
	.conversationControls1 {
		margin-bottom: 10px;
	}

	#cSelect {
		margin-bottom: 10px;
	}

	.threadRow {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: 17fr 3fr;
		grid-template-rows: auto auto auto;
		align-items: start;
		padding: 12px 0 12px 22px;
		border-top: 1px solid #ccc;
		cursor: pointer;
		row-gap: 0px;
	}

	.threadSecondColumn, .threadThirdColumn {
		display: flex;
		justify-content: flex-start;
	}

	.threadSecondColumn {
		margin-top: 6px;
		margin-bottom: 2px;
	}

	.pgTitleTrayRight a {
		padding: 4px 16px;
	}

	#newConversationBtn, #newPostBtn, #clearFilters {
		border: 1px solid #e0e0e0 !important;
	}
}

/* ~~ Post Revamp Styles ~~ */

#pageTitle{
	margin-bottom: 2px;
}

#pageTitle i {
	font-size: 20px;
	color: #777;
}

#newPostsMarker {
	height: 1.5px;
	margin: 3px 0px;
	background: red; 
	color: white; 
	font-weight: bold; 
	border-radius: 3px;
}

.postContainer .postContent:last-child {
	border-bottom: 2px solid #666;
	padding-bottom: 15px;
}

.postContent {
	width: 100%;
	padding: 0;
}

.postHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 10px;
	background-color: rgb(237, 239, 241);
	border: solid 1px rgb(237, 239, 241);
	border-radius: 5px;
}

.postHeaderLeft {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: bold;
	margin-left: 10px;
}

.postHeaderRight {
	color: #666;
	margin-right: 10px;
}

.postBody {
	margin: 20px 20px 30px 20px;
}

.postActionTray {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
	padding: 6px 10px 20px 10px;
	color: #777;
	border-top: 1px solid #ccc;
}

.likeInfo {
	margin-right: 10px;
	position: relative;
}

#postReplyForm {
	margin-top: 10px;
}

#postUpdateCat, #postUpdateThreadT {
	display: flex;
	gap: 10px;
	margin-bottom: 7px;
}

/* Likes Info Popup */

.likesInfoContent {
	position:absolute; 
	padding:5px 20px; 
	width:300px; 
	background-color: #f6f6f6; 
	border: 1px dashed #999; 
	z-index: 9999;
}

@media only screen and (max-width:899px) {
	.likesInfoContent {
		left:8% !important; 
		width:76% !important; 
		padding-left:4% !important; 
		padding-right:4% !important;
	}
}

/* ~~ thread_new styles ~~ */
.categoryTypeTray {
	display: flex;
	gap: 25px;
}

.typeOption {
	display: flex;
	margin-bottom: 10px;
}

.typeOption input {
	margin-bottom: 3px;
}

/* ~~ moderate.cfm styles (family side) ~~ */
.modPostHeaderLeft {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	font-weight: bold;
	margin-left: 10px;
}

.modPostHeaderRight {
	color: #666;
	margin-right: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-weight: bold;
}

.modPostActionTray {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 25px;
	padding: 6px 10px 20px 10px;
	color: #777;
	border-top: 1px solid #ccc;
}

.modTableFamSideLeft {
	display: flex;
	gap: 25px;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-right: 40px;
}

.modTableFamSideRight {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: 0px;
}

/* ======= CALENDAR STYLES ======= */

.calendarControls {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 10px 0;
}

.calTodayIcon {
	position: relative;
	display: inline-block;
}

.calTodayIconSD {
	position: absolute;
	top: 4.2px;
	right: 3.75px;
	font-size: 7.5px;
	font-weight: bold;
}

.calTodayIconDD {
	position: absolute;
	top:4.2px;
	right: 1.75px;
	font-size: 7.5px;
	font-weight: 1000;
}

.calControls1 {
	display: flex;
	flex-direction: column;
}

.currYrAndMnth {
	display: flex;
	gap: 5px;
}

.currentWeek {
	margin-bottom: 0;
	font-size: 28px;
	color: #777;
}

.calControlsNextAndPrev {
	display: flex;
	gap: 5px;
	align-items: center;
}

.calControlsNextAndPrev i {
	font-size: 28px;
	color: #777;
	cursor: pointer;
}

.calFltrMonth {
	font-size: 28px;
	border: 1px #ccc solid;
	border-radius: 5px;
	color: #777;
	padding: 2px 5px;
	text-align: center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.calFltrYear {
	font-size: 26px;
	border: 1px #ccc solid;
	border-radius: 5px;
	color: #777;
	padding: 2px 5px;
	text-align: center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.calFltrYearRow {
	font-size: 20px;
	padding: 2px 5px;
	border: 1px #ccc solid;
	border-radius: 5px;
	margin-bottom: 3px;
	color: #777;
	text-align: center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.calFltrView {
	font-size: 24px;
	padding: 2px 5px;
	border: 1px #ccc solid;
	border-radius: 5px;
	color: #777;
	text-align: center;
}

.stdSelect {
	height: 1.95em;
	border: 1px solid #e0e0e0;
	color: #777;
	margin-bottom: 3px;
}

.dayToSelect {
	cursor: pointer;
}

/* ~~ Calendar Header Styles ~~ */
.calTable {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	height: 650px;
	min-width: 320px;
	border-radius: 5px;
}

.calHeadRow {
	height: 50px;
	min-width: 320px;
}

.calHeadRow th {
	font-weight: normal;
}

.calHeadRow th:last-child {
	border-right: none;
}

.calBodyRow {
	height: 100px;
	min-width: 320px;
}

.calBodyRow td {
	border: 1px solid #ccc;
}

.calTD {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2px;
	max-height: 100px;
	cursor: pointer;
}

.calDayNumRow {
	display: flex;
	justify-content: flex-start;
	width: 100%;
}

.calDayNum {
	padding: 4px;
	cursor: pointer;
}

.calEventItem {
	display: flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	padding: 3px 5px;
	border-radius: 5px;
	gap: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: clamp(10.5px, 1.5vw, 14px);
}

.striped-background {
  background-image: repeating-linear-gradient(
    45deg,              /* angle for diagonal stripes */
    #fff 0px,           /* light gray start */
    #fff 10px,          /* light gray end */
    #eee 10px,          /* slightly lighter gray start */
    #eee 20px           /* lighter gray end */
  );
}

/* ~~ Weekly and Daily View Styles ~~ */
.dailyAndWeeklyView {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 10px 0;
}

.dayContainer {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.dayOfWeekHeader {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 1px solid #ccc;
}

.dayOfWeekHeader p {
	margin-bottom: 5px;
}

.dayInWeek {
	display: flex;
	justify-content: center;
	padding: 5px;
	cursor: pointer;
	width: 15px;
}

.calToday {
	background-color: #f2675a;
	color: #fff;
	border-radius: 15px;
}

.selectedDay {
	border: 2px solid #f2675a;
	border-radius: 15px;
}

#dayEventLink {
	cursor: pointer;
}

.dayOfWeekContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-right: 1px solid #ccc;
	height: 500px;
	padding: 7px;
}

.dailyAndWeeklyView .dayContainer:last-child .dayOfWeekContent {
	border-right: none;
}

.dailyView {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
}

.dayContentContainer {
	display: flex;
	justify-content: center;
	height: 500px;
}

#dayContent {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	width: 90%;
}

.calTodayContBG {
	background-color: #fef8f6;
}

.weekEventItem {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 80%;
	padding: 10px;
	background-color: #ccc;
	border-radius: 5px;
	margin-top: 12px;
}

.dayEventItem {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px;
	background-color: #ccc;
	border-radius: 5px;
	margin-top: 12px;
}

@media only screen and (max-width:899px) {
	.weekEventItem {
		font-size: 9.5px;
		padding: 5px;
	}
}

/* ~~ The footer ~~ */
/* ======= FOOTER LINKS STYLES ======= */
footer{margin:auto; padding:0; text-align:center; width:1250px; line-height:16px; position:relative; z-index: 25;}
footer *{margin:0; padding:0;}
footer ul{list-style:none; margin:6px 0;}
footer ul li{list-style:none; color:#666666; padding:0; display:inline-block;}
footer ul li a{text-decoration:none; color:#bac1c3; font-size:8pt;}
footer ul li a:hover{text-decoration:none;}
footer li + li:before {
    content: " | ";font-size:8pt;
}
footer p {color:#666666; padding:0; font-size:11pt; margin-top:4px;}
footer .footerTemplateSocial i{font-size:22pt;}
#skipContent{min-height:60px;}

/******* footer templates ********/
#footer, .footerTemplate1, .footerTemplate2, .footerTemplate3, #footerTemplate3boxD, .footerTemplate4, #footerTemplate4boxC{overflow:auto;}
#footer a.skip2content{color:transparent !important;}
#footer .footerTemplate{padding:20px 20px 80px 20px; min-height:100px; position:relative;}
#footer .footerTemplate p{line-height:16px;}
#footer .footerTemplate a{font-size:11pt; text-decoration:none;}
#footer .footerTemplate h2{font-size:16pt; text-transform:uppercase; line-height:22px;}
#footer .footerTemplate h3{font-size:14pt;}
#footer .footerTemplate li + li:before{font-size:11pt;}
.footerTemplateCompany{width:450px; padding:5px;}
.footerTemplateCompany img{margin-bottom:15px; max-height:50px; max-width:300px;}
.footerTemplateSocial{padding:0 5px; text-align:left;}
.footerTemplateSocial a{margin-left:0;}
.footerTemplateSocial a + a{margin-left:5px;}
.footerTemplateHost p, .footerTemplateHost a{color:#888;}
.footerTemplateContact ul{text-transform:uppercase;}
.footerTemplate.footerTemplate1 *{color:#000;}
.footerTemplate.footerTemplate2 *{color:#888;}
.footerTemplate.footerTemplate3 *{color:#fff;}
.footerTemplate.footerTemplate4 *{color:#666;}
.footerTemplate.footerTemplate4 .footerTemplateHost p{color:#fff;}
.footerTemplate3 .footerTemplateSocial, .footerTemplate4 .footerTemplateSocial{text-align:right;}
.social-icon-RS, .social-icon-YT, .social-icon-GG, .social-icon-IG, .social-icon-PN, .social-icon-FB, .social-icon-TW, .social-icon-IN{display:inline-block; width:30px; height:30px;}
/* template 1 */
#footerTemplate1boxA{float:left; text-align:left;}
#footerTemplate1boxB{float:right; text-align:right; width:550px;}
.footerTemplate1 .footerTemplateSocial{position:absolute; bottom:20px;}
.footerTemplate1 .footerTemplateLinks{margin:10px 0;}
.footerTemplate1 .footerTemplateLinks h3{text-transform:uppercase; display:inline-block; font-size:10pt; margin-right:8px;}
.footerTemplate1 .footerTemplateLinks h3:after{content:": ";}
.footerTemplate1 .footerTemplateLinks ul{display:inline-block; text-transform:uppercase;}
.footerTemplate1 .footerTemplateHost{position:absolute; bottom:20px; width:550px;}
.footerTemplate1 .footerTemplateDisclaimer{position:absolute; width:550px; bottom:40px;}
.footerTemplate1 .skip2content{display:block;}
.footerTemplate.footerTemplate1 h2{margin-bottom:10px;}
/* template 2 */
#footerTemplate2boxA{float:left; text-align:left;}
#footerTemplate2boxB{float:right; text-align:right; width:750px;}
.footerTemplate.footerTemplate2{padding-bottom:60px;}
.footerTemplate.footerTemplate2 .footerTemplateContact ul li{display:block;}
.footerTemplate.footerTemplate2 .footerTemplateContact ul li:before{content:"";}
.footerTemplate2 .footerTemplateFeature, .footerTemplate2 .footerTemplateLinks{float:right; width:335px; min-height:225px; padding:0 12px 0 25px; border-left:1px solid #888; text-align:left;}
.footerTemplate2 .footerTemplateFeature p{line-height:22px;}
.footerTemplate2 .footerTemplateDisclaimer{margin-bottom:15px;}
.footerTemplate2 .footerTemplateSocial{position:absolute; bottom:20px;}
.footerTemplate2 .footerTemplateHost{position:absolute; bottom:20px; width:750px;}
.footerTemplate2 .footerTemplateLinks ul{line-height:20px;}
.footerTemplate2 .footerTemplateLinks li{display:list-item;}
.footerTemplate2 .footerTemplateLinks li + li:before{content:"";}
.footerTemplate.footerTemplate2 h2{margin-bottom:10px;}
.footerTemplate.footerTemplate2 h3{margin-bottom:18px;}
.footerTemplateContact ul{text-transform:none;}
/* template 3 */
#footerTemplate3boxA{float:right; text-align:right; width:750px;}
#footerTemplate3boxB{float:left; text-align:left; width:450px;}
#footerTemplate3boxC{width:100%;}
#footerTemplate3boxD{width:100%; line-height:normal;}
.footerTemplate.footerTemplate3{padding-bottom:0;}
.footerTemplate.footerTemplate3 .footerTemplateContact ul li{padding-right:15px;}
.footerTemplate.footerTemplate3 .footerTemplateContact ul li:before{content:"";}
.footerTemplate3 .footerTemplateLinks{position:absolute; right:20px; bottom:0;}
.footerTemplate3 .footerTemplateLinks h3{text-transform:uppercase; display:inline-block; font-size:10pt; margin-right:8px;}
.footerTemplate3 .footerTemplateLinks h3:after{content:": ";}
.footerTemplate3 .footerTemplateLinks ul{display:inline-block; text-transform:uppercase;}
.footerTemplate3 .footerTemplateDisclaimer{margin-bottom:15px;}
#footerTemplate3boxC .footerTemplateHost{float:right; text-align:right; margin:3px 25px 20px 0; width:450px;}
#footerTemplate3boxD h2{float:left; font-size:20pt; margin:6px 0 6px 25px;}
#footerTemplate3boxD .footerTemplateSocial{float:right; margin:8px 25px 6px 0; width:450px; text-align:right;}
.footerTemplate.footerTemplate3 h2{margin-bottom:10px;}
.footerTemplate.footerTemplate3 h3{margin-bottom:18px;}
/* template 4 */
#footerTemplate4boxA{float:right; text-align:right;}
#footerTemplate4boxB{float:left; text-align:left; width:450px;}
#footerTemplate4boxC{width:100%;}
#footer .footerTemplate.footerTemplate4{padding-bottom:0;}
.footerTemplate.footerTemplate4 .footerTemplateContact ul li{display:block;}
.footerTemplate.footerTemplate4 .footerTemplateContact ul li:before{content:"";}
.footerTemplate4 .footerTemplateFeature, .footerTemplate4 .footerTemplateLinks{float:left; width:335px; min-height:225px; padding:0 40px 0 5px; text-align:left;}
.footerTemplate4 .footerTemplateFeature p{line-height:22px;}
.footerTemplate4 .footerTemplateDisclaimer{margin-bottom:15px;}
#footerTemplate4boxC{padding:5px 0;}
#footerTemplate4boxC .footerTemplateSocial{float:right; margin:6px 9px 0 0; width:450px; text-align:right;}
#footerTemplate4boxC .footerTemplateHost{float:left; text-align:left; margin-left:25px;}
#footerTemplate4boxC .footerTemplateHost p{margin-bottom:4px;}
.footerTemplate4 .footerTemplateLinks ul{line-height:20px;}
.footerTemplate4 .footerTemplateLinks li{display:list-item;}
.footerTemplate4 .footerTemplateLinks li + li:before{content:"";}
.footerTemplate4 .footerTemplateContact ul{text-transform:none;}
.footerTemplate.footerTemplate4 h2{margin-bottom:10px;}
.footerTemplate.footerTemplate4 h3{margin-bottom:18px;}


/* JQuery Menu */
.jqueryslidemenu{width:218px;}
.jqueryslidemenu a{font-weight:bold;}
.jqueryslidemenu ul{margin:10px 15px 100px 15px; padding:0; list-style-type:none;}
.jqueryslidemenu ul li{position:relative; display:inline; float:left; text-align:right; width:188px; font-size:9pt;}
.jqueryslidemenu ul li.noBorder{border-bottom:none}
.jqueryslidemenu ul li a{display:block; padding:10px 0; text-decoration:none;}
* html .jqueryslidemenu ul li a{display:inline-block;}
.jqueryslidemenu ul li ul{position:absolute; left:188px; top:-1px; display:block; padding:0; margin:0; visibility:hidden; z-index:1100;}
.jqueryslidemenu ul li ul li{display:list-item; float:none; text-align:left;}
.jqueryslidemenu ul li ul li ul{top:-1px;}
.jqueryslidemenu ul li ul li a{padding:10px 0 10px 10px; margin:0; border-top-width:0;}
.sidebarleftcontainer .jqueryslidemenu ul{margin:0;}
.sidebarleftcontainer .jqueryslidemenu ul li{width:209px; padding-right:10px; border-bottom:1px solid rgba(255,255,255,.25);}
.sidebarleftcontainer .jqueryslidemenu ul li ul{left:219px; top:-1px; border-top:1px solid rgba(255,255,255,.25);}
.sidebarleftcontainer .jqueryslidemenu ul li ul li{border-right:1px solid rgba(255,255,255,.25); border-left:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25);}
.downarrowclass{position:absolute; top:12px; right:7px;}
.rightarrowclass{position:absolute; top:6px; right:5px;}
.jqueryslidemenu ul li a.menuNoLink, .jqueryslidemenu ul li a:hover.menuNoLink{cursor:text;}
.sideMenuHead{padding-right:15px; text-transform:uppercase;}
#welcomeFam, .sideMenuHead{font-weight:bold; font-size:10pt;}
.jqueryslidemenu ul li.sideMenuLIHead{
	height:22px; 
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;}
.jqueryslidemenu ul li.sideMenuLIHead a{padding:3px 0; cursor:text;}
#welcomeFam{margin:10px 0 0 20px;}
.clear{clear:both; line-height:0;}

.jqueryslidemenuHorz{width:auto;}
.jqueryslidemenuHorz ul{margin:0; padding:0 20px 30px 20px; list-style-type:none;}
.jqueryslidemenuHorz ul li{border-bottom:none; width:auto; text-align:left;}
.jqueryslidemenuHorz ul li a, .jqueryslidemenuHorz ul li ul li a{padding:10px;}
.jqueryslidemenuHorz ul li ul{left:0; border-top:1px solid rgba(255,255,255,.25);}
.jqueryslidemenuHorz ul li ul li{border-bottom:1px solid rgba(255,255,255,.25); border-left:1px solid rgba(255,255,255,.25); border-right:1px solid rgba(255,255,255,.25);}
.jqueryslidemenuHorz ul li ul li:last-child{border-bottom:none;}