@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: 9pt 'Open Sans', Helvetica, Arial, Verdana, sans-serif;background-color: #ffffff;	margin: 0 auto;	padding: 0;	color: #000;}
.ui-widget {font-family:'Open Sans', Helvetica, Arial, Verdana, sans-serif;}
div.content{margin:0 10px;}

button{text-transform:uppercase; padding:3px 8px;}
hr{color:#999;height:1px;border:0;background-color:#999;}
a{color:#03F;font-family:'Open Sans', Helvetica, Arial, Verdana, sans-serif; text-decoration:none;}
a:visited{color:#03F;}
a:hover{color:#900;}
.title{color:#fff; font-size:40pt; width:800px; float:right; margin-right:20px; font-family:'Open Sans', "Century Gothic", Helvetica, Arial, Verdana, sans-serif; font-weight:bold;}

.white8bold, a:link.white8bold, a:visited.white8bold{color:#fff; font-weight:bold;}
.text8 {color:#000;}

.subHead td{background-color:#c9c9c9; border-bottom:1px solid #999; border-top:1px solid #fff; font-size:8pt !important; text-transform:uppercase; font-weight:bold !important;}

/* ======= 	TOP LINKS STYLES =======*/
#meta{margin:auto; text-align:right; width:953px; line-height:20px; 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;}
#meta #userAcct{float:left; margin-left:10px;}
#OutstandingBalance{font-size:12px;}
.preheadernav{position:relative; z-index:1002; width:100%; min-height:18px; padding:0; margin:0;}
#logo{clear:right; margin:auto; text-align:left; width:953px; line-height:50px; font-size:24px;}
#logo img{margin-right:15px; vertical-align:middle;}
#topNav{position:relative; z-index:1001;}
#headerTabs{display:table; width:100%; border-bottom:1px solid #ccc; border-top:1px solid #eee;}
#headerTabs .headerTab{display:table-cell; padding:0; border-left:1px solid #ddd; text-align:center; vertical-align:top;}
#headerTabs .headerTab.tabUnsel{background-color:#eee;}
#headerTabs .headerTab:hover, #headerTabs .headerTab.tabSel{background-color:#fff;}
#headerTabs .headerTab:first-child{border-left:none;}
#headerTabs p{text-align:left; display:inline-block; margin:20px;}
/*------------------------------------*\
	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
\*------------------------------------*/
/*  to create the gradient seperator, need a shim <li>*/
#sideNav ul li.leftnavshim{
	/* Edit for template second color should match leftnavwrapper ul li:hover bg-color */
	height:1px;
}

/* Clear float */
.clear{
    clear:both;
}		

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	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: 953px;
	background-color: #FFFFFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	position:relative;
	/*If need to enable, have to find way to make this not conflict with z-index on navigation.cfm(/other?) Modals!
	z-index:10;*/
}
/* Shared styles */
/*------------------------------------*\
	Container Bg angled drop shadow
\*------------------------------------*/
.box
{
	position: relative;
	/*If need to enable, have to find way to make this not conflict with z-index on navigation.cfm(/other?) Modals!
	z-index:9;*/
	margin: 0 auto;
	background-color: #fff;
	/*-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.7);
	-ms-box-shadow: 0 0 8px rgba(0, 0, 0, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.7);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.7);*/
}

/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
.header {
	width: 953px;
	height: 211px;
}
.header h1 {
	font-family: 'Open Sans', Georgia, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	position:absolute;
	z-index: 11;
	top:60px;
	right:10px;
	text-shadow: 1px 1px 2px #000;
	max-width: 500px;
	text-align: right;
}
/*------------------------------------*\
	NIVO Slider stlyes
\*------------------------------------*/
#slider-wrapper {
	position: relative;
	z-index: 10;
}
.nivo-controlNav {
	top: 175px;
	left: 10%;
	margin-left: 750px;
	position: absolute;
	display:block !important;
	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:953px;
}
.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;
}
.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;
}
/*==================================================
 * Curved TOP/BOTTOM DROP SHADOW
 * ===============================================*/
.tagbottomcurve {
  	position:relative;	
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;/* Safari and Google Chrome */
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;/* Firefox */
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;/* W3C Standard */
}
.tagbottomcurve:before, 
.tagbottomcurve:after {
	content:"";
	position:absolute;
	z-index:1;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.5);/* Safari and Google Chrome */
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.5);/* Firefox */
	box-shadow:0 0 15px rgba(0,0,0,0.5);/* W3C Standard */
	width:80%;
	bottom:0;
	left:20px;
	right:10px; 
	height:20px;
	-moz-border-radius:100px / 10px;/* Firefox */
	border-radius:100px / 10px;/* W3C Standard */
}

.tagtopcurve {
	position:relative;		
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;/* Safari and Google Chrome */
		 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;/* Firefox */
					box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;/* W3C Standard */
}
.tagtopcurve:before, 
.tagtopcurve:after {
	content:"";
	position:absolute;
	z-index:1;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.5);/* Safari and Google Chrome */
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.5);/* Firefox */
	box-shadow:0 0 15px rgba(0,0,0,0.5);/* W3C Standard */
	width:80%;
	top:0;
	left:20px;
	right:10px; 
	height:20px;
	-moz-border-radius:100px / 10px;/* Firefox */
	border-radius:100px / 10px;/* W3C Standard */
}

.pagecontent {
	padding: 15px 5px 10px 5px;
}
.midwidgettable {
	width: 531px;
	height:189px;
	background-color:#FFF;
	display: table;
	border-collapse:separate;
	border-spacing:10px 0px;
}
.midwidgetrow {
	display: table-row;	
}
.midwidget {
	position:relative;
	display: table-cell;	
	width: 164px;
}
.midwidget h3 {
	font-style:normal;
	font-size: 12pt; margin: 18px 10px 0 10px; padding:0;
}
.midwidget p, .midwidget button {
	margin: 8px 10px;
}
.midwidget a, .midwidget a:visited {
	text-decoration:none; color:#000;
}
.midwidget button {
	position:absolute;
	bottom:0;
	left:50%;
	width:80px;
	margin-left:-40px;
}
.midwidget hr {
	border:0;
	width:140px;
	height:2px; margin-top:4px; 
	
}	
.midwidget .new {
	position:absolute;
	border-radius: 3px;
	font-size: 8pt;
	margin-top:18px;
	margin-left:110px;
	width:40px; text-align:center;
	background-color: #ffffff;	
}
.midwidget .newcount {
	position:absolute;
	border-radius: 10px;
	font-size: 7pt;
	margin-top:10px;
	margin-left:142px;
	width:20px; text-align:center;
	color:#FFF;
	background-color: #003366;	
}
.midwidget .more {
	float:left;
	border-radius: 3px;
	font-size: 8pt;
	margin-left:10px;
	margin-top:12px;
	width:50px; text-align:center;
	background-color: #ffffff;	
}	
.midwidget .post {
	padding:5px;
	font-size:12px;	
}	
.midwidget .post img{
	float:right;
}

.midwidget .post .image-block {
	width:43px;
	margin:0;
	float:right;
}

.midwidget .post .reflection {
	position:relative;
	z-index:1;
	top:-14px;
}

.midwidget .post .reflection img {  
	-webkit-transform: scaleY(-1);
 	   -moz-transform: scaleY(-1);
	    -ms-transform: scaleY(-1);
	     -o-transform: scaleY(-1);
		    transform: scaleY(-1);
			   filter: flipv;
	opacity:0.10;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=.1)";
	filter: alpha(opacity=.1);
}

.midwidgeticon{float:right; margin:10px;}

		

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
	border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
	text-decoration: none;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #ADB96E;
	color: #FFF;
}


/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}

.clearfloat { /* this class can be placed on a <br /> or empty block element as the final element following the last floated block (within the .container) if the footer is removed or taken out of the .container */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
.header, section, footer, aside, article, figure {
	display: block;
}

#loginBox {position:absolute; top:25px; right:10px; display:none; border-radius:5px; -moz-border-radius:5px; border-top-right-radius:0; -moz-border-top-right-radius:0; padding:5px; background-color:#999; -moz-box-shadow: 0px 5px 10px #333;/* Firefox */ -webkit-box-shadow: 0px 5px 10px #333;/* Safari and Google Chrome */ box-shadow: -1px 5px 10px -2px #333;/* W3C Standard */}
#loginArrow{position:absolute; top:-8px; right:0;}
#loginButton{cursor:pointer;}
#loginButton i{width:22px; height:22px; line-height:22px; text-align:center; font-style:normal;}
#loginForm input[type=submit]{border:1px solid; width:100%;}
#loginForm {width:248px; margin-top:-1px; padding:10px; border-radius:5px; -moz-border-radius:5px;}
#loginForm input[type=text], #loginForm input[type=password]{width:calc(100% - 10px); padding:5px; margin-bottom:10px; border:1px solid #000; border-radius:3px; -moz-border-radius:3px;}

/* ======= 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: 0.25em 0.5em; 
	border: solid 1px #e0e0e0;
	height: 26pt;
	font-size: 15pt;
	cursor: pointer;
}

#cancelThreadTitle {
	background-color: #777 !important; 
	color: #fff !important; 
	padding: 0.25em 0.5em; 
	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: 94%;
	margin-left: 2.5%;
	z-index: 50;
}

.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: 0.25em 0.5em;
	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: 1em;
}

#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: 0.9em;
	color: rgb(119, 119, 119);
	margin-bottom: 0px;
}

.badgeIcon {
	font-size: 11px;
	background-color: rgb(242, 103, 90);
	color: #fff;
	padding: 0.25em 0.5em;
	border-radius: 0.4em;
	width: fit-content;
	margin-left: 3px;
}

.bubbleGen {
	font-size: 0.9em;
	padding: 0.25em 0.5em;
	border-radius: 0.4em;
	width: fit-content;
	cursor: pointer;
}

.bubbleClass {
	font-size: 0.9em;
	padding: 0.25em 0.5em;
	border-radius: 5px;
	width: fit-content;
	cursor: pointer;
}

.bubbleSC {
	font-size: 0.9em;
	padding: 0.25em 0.5em;
	border-radius: 0.4em;
	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;
}

.calControls1 {
	display: flex;
	flex-direction: column;
}

.calControls2Row1 {
	display: flex;
	gap: 5px;
}

.currentWeek {
	margin-bottom: 0;
	font-size: 28px;
	color: #777;
	text-wrap: nowrap;
}

.calControls1Row1 {
	display: flex;
	gap: 7px;
	margin-top: 10px;
}

.calControls1Row1 i {
	font-size: 26px;
	color: #777;
	cursor: pointer;
}

.calControls2 {
	display: flex;
	gap: 20px;
	align-items: center;
}

.calControls2Row1, .calControls2Row2 {
	display: flex;
	gap: 5px;
}

.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;
}

.calTodayIcon {
	cursor: pointer;
}

.calTodayIcon i {
	font-size: 18pt;
	color: #999;
}

.calTodayIconSD {
	position: relative;
	top: -14px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	color: #999;
}

.calTodayIconDD {
	position: relative;
	top: -14px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	color: #999;
}

.stdSelect {
	height: 1.95em;
	border: 1px solid #e0e0e0;
	color: #777;
}

.stdMenuBtn.filterApplied {
	border-color: #0a0;
}

.stdMenuBtn.filterApplied i {
	color: #0a0;
}

.dayToSelect {
	cursor: pointer;
}

/* ~~ Calendar Header Styles ~~ */
.calTable {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	height: 800px;
	min-width: 320px;
	border-radius: 5px;
}

.calendarViewContainter, .listViewContainer {
	display: flex;
	justify-content: space-evenly;
}

#noEventError {
	width: 100%;
}

.calHeadRow {
	height: 50px;
	min-width: 320px;
}

.calHeadRow th {
	font-weight: normal;
}

.calHeadRow th:last-child {
	border-right: none;
}

.calBodyRow {
	height: 125px;
	min-width: 320px;
}

.calBodyRow td {
	border: 1px solid #ccc;
}

.calTD {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.calDayNumRow {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 25px;
	font-size: clamp(1vh, 1.5vw, 14px);
	margin-bottom: 0.1vh;
}

.calDayEvents {
	display: flex;
    flex-direction: column;
	justify-content: flex-start;
    gap: 5px;
    height: 80px;
}

.calDayEvents span, .calDayEvents a {
	margin: 0 0.25vw;
	height: 15px;
}

.calDayExtraEvents {
	display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 20px;
}

.calDayExtraEvents span {
	background-color: #000;
	color: #fff;
	padding: 2px;
	border-top-left-radius: 5px;
	font-size: clamp(1vh, 1.5vw, 14px);
	margin: 0;
}

.calDayNumSD {
	padding: 3px 6px;
	cursor: pointer;
}

.calDayNumDD {
	padding: 4px 5px 4px 4px;
	cursor: pointer;
}

.calEventItem {
	display: flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	padding: 2.5px;
	border: 1px solid;
	border-radius: 5px;
	gap: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: clamp(10px, 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 */
  );
}

/* ~~ Calendar List View Styles ~~ */
.calListTable {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 30px;
}

.calListHead {
	height: 50px; 
	border-bottom:1px #ccc solid;
}

.calListHeadRow th {
	padding: 10px 5px 1px 5px;
}

.calListHeadRow th a {
	color: #000;
	text-decoration: none;
}

#e_viewListHeadRow th {
	text-align: left;
	padding-left: 10px;
}

#e_viewListHeadRow th:first-child {
	padding-left: 2px;
}

.calListRow td {
	padding: 10px 10px 10px 50px;
}

.calListRow td:last-child {
	padding:10px 50px;
}

.calListEventTitle {
	text-align: left !important;
}

.signedupListRow td {
	padding: 10px;
}

/* ~~ Weekly and Daily View Styles ~~ */
.dailyAndWeeklyViewContainer {
	display: flex;
	width: 100%;
}

#weekPrev, #weekFwd, #monthPrev, #monthFwd {
	font-size: 20px;
	margin-top: 35px;
	color: #777;
	cursor: pointer;
}

.dailyAndWeeklyView {
	display: grid;
	width: 100%;
    grid-template-columns: repeat(7, 14.27%);
	padding: 10px 0;
    table-layout: fixed;
}

.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: #000;
	color: #fff;
	border-radius: 15px;
}

.selectedDay {
	border: 2px solid #000;
	border-radius: 15px;
}

#dayEventLink {
	cursor: pointer;
}

.dayOfWeekContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-right: 1px solid #ccc;
	min-height: 60vh;
	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;
	min-height: 500px;
}

#dayContent {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	width: 78%;
}

.calTodayContBG {
	background-color: #fafafa;
}

.weekEventItem {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 80%;
	padding: 10px;
	border: 1px solid;
	border-radius: 5px;
	margin-top: 12px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.weekEventItem span {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.dayEventItem {
	display: flex;
	flex-direction: column;
	border: 1px solid;
	gap: 3px;
	padding: 10px;
	border-radius: 5px;
	margin-top: 12px;
}

@media screen and (max-width: 899px) {
	.weekEventItem {
		font-size: 9.5px;
		padding: 5px;
	}
}

@media only screen and (max-width:500px) {
	.calFltrMonth {
		font-size: 20px;
	}

	.calFltrYear {
		font-size: 18px;
	}
	
	.calControls2 {
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;
        width: 139px;
	}

	.calControls2Row1 {
		display: flex;
		justify-content: flex-end;
        width: 100%;
	}

	.calControls2Row2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
        width: 100px;
	}

    .calControls2Row2 span, .calControls2Row2 a {
        gap: 7px;
    }

	.currentWeek {
		font-size: 20px;
	}
	
	.weekEventItem {
		font-size: 8.5px;
	}

	.calListRow td {
		padding: 10px;
	}

	.calListRow td:last-child {
		padding:10px;
	}
}

/* ~~ The footer ~~ */
/* ======= 	FOOTER LINKS STYLES =======*/
footer{margin:auto; padding:0; text-align:center; width:953px;line-height:12px; margin-bottom:20px; 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:8pt; margin-top:4px;}

/* 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; left:188px;}
.jqueryslidemenu ul li ul li a{width:178px; padding:10px 0 10px 10px; margin:0; border-top-width:0;}
.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 8px 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:5px 8px;}
.jqueryslidemenuHorz ul li ul li a{width:171px;}
.jqueryslidemenuHorz ul li ul{left:0; top:23px; border-top:1px solid #000;}
.jqueryslidemenuHorz ul li ul li{border-bottom:1px solid #000;  border-right:1px solid #000;}