/* content styles */

.subscrip-community-brand {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 8px;
	min-height: 76px;
}

.subscrip-community-brand__name {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: #173452;
	word-break: break-word;
}

.subscrip-community-brand__thumb {
	width: 76px;
	height: 76px;
	flex: 0 0 76px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid #c9d7e8;
	box-shadow: 0 2px 8px rgba(20, 36, 70, 0.14);
}

.topicsearchbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	flex-wrap: nowrap;
}

.topicsearchbar .topicsearchlabel {
	margin: 0;
	white-space: nowrap;
}

.topicsearchbar #topicsearch {
	min-width: 300px;
	max-width: 520px;
	width: 45vw;
}

.topicsearchbar .btn {
	margin: 0;
}

.topicsearchbar .topicsearchclear {
	padding-left: 8px;
	padding-right: 0;
}

@media (max-width: 768px) {
	.subscrip-community-brand {
		padding: 8px;
		gap: 10px;
	}

	.subscrip-community-brand__name {
		font-size: 17px;
	}

	.subscrip-community-brand__thumb {
		width: 60px;
		height: 60px;
		flex-basis: 60px;
	}

	.topicsearchbar {
		flex-wrap: wrap;
		align-items: stretch;
		gap: 8px;
	}

	.topicsearchbar .topicsearchlabel {
		width: 100%;
	}

	.topicsearchbar #topicsearch {
		width: 100%;
		min-width: 0;
	}

	.topicsearchbar .btn {
		min-width: 88px;
	}

	.topicsearchbar .topicsearchclear {
		padding-left: 0;
	}
}

.topicgroupwrap {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.2+0,0.05+100 */
	background: -moz-linear-gradient(-65deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0,0.04) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-65deg, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0,0.04) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(155deg, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.04) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#0d000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
	margin:20px 0;
	border-radius:5px;
	border:1px solid #ddd;
}

.groupheader {
	margin:0;
	padding:10px;
}

.topicopts {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
}

.topicbox.ui-accordion .ui-accordion-content {
	padding:5px 15px;
}

.topicbox {
	padding-bottom: 300px;
}


.topicblock {
	display:inline-block;
	width:47%;
	vertical-align:top;
	margin:0 1% 2% 1%;
	border-radius:2px;
	position:relative;
}

@media (min-width: 601px) {
	.topicblock:hover {
		margin:-1px calc(1% + 1px) 2% calc(1% - 1px);
	}
}

@media (max-width: 991px) {
	.topicblock {
		width:45%;
		margin:0 2% 2% 2%;
	}
}
@media (min-width: 601px) and (max-width: 991px) {
	.topicblock:hover {
		margin:-1px calc(2% + 1px) 2% calc(2% - 1px);
	}
}

@media (max-width: 600px) {
	.topicblock {
		width:95%;
		margin:0 2% 2% 2%;
	}
}




.topicinnerblock {
	position:absolute;
	top:0;
	width:100%;
}



.topicinnerblock h4 {
	margin:0;
	padding:5px;
	background: #555555 url("../../lib/jqueryui/images/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x;
	font-weight: normal;
	color: #ffffff;
	border-radius:2px 2px 0 0 ;
	box-shadow: 0px 3px 3px 0px #555;
}


@media (min-width: 601px) {
	.topicblock:hover .topicinnerblock h4 {
		box-shadow: 1px 4px 4px 0px #555;
	}
}

.topicblock h4.newtopic {
	background: #f58400 url("images/ui-bg_inset-soft_30_f58400_1x100.png") 50% 50% repeat-x;
}

.mandatory-topic-label {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: #1d5f8a;
	background: none;
	border: none;
}

.topicblock h4.issubscribed {
	background: #4ca20b url("../../lib/jqueryui/images/ui-bg_highlight-soft_60_4ca20b_1x100.png") 50% 50% repeat-x;
}

.topicblock h4.isunsubscribedcolour {
	border: 1px solid #666666;
	font-weight: bold;
	color: #eeeeee;
}

/*
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #59b4d4;
	background: #0078a3 url("images/ui-bg_glass_40_0078a3_1x400.png") 50% 50% repeat-x;
	font-weight: bold;
	color: #ffffff;
}


.newtopic.ui-state-active
{
	border: 1px solid #ffaf0f;
	background: #df7b10 url("images/ui-bg_highlight-soft_30_df7b10_1x100.png") 50% 50% repeat-x;
	font-weight: bold;
	color: #ffffff;
}
*/

.topicspacer {
	display:hidden;
}
.topicdescspace {
	height:120px;
}

.topicdetarea {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	text-shadow: none;
	padding: 0 10px 0 0;
	border-radius:0 0 2px 2px;
	width: 100%;
	font-size: 15px;
	position:absolute;
	height:120px;
	overflow:hidden;
	background:white;
	box-shadow: 0px 3px 3px 0px #555;
}

.topic-left-col {
	flex: 0 0 165px;
	display: flex;
	flex-direction: column;
	margin-right: 12px;
	transition: flex-basis 0.3s ease;
}

.topic-right-col {
	flex: 1;
	min-width: 0;
	padding: 5px 0 10px;
}

.topicdetimage {
	height: 120px;
	flex-shrink: 0;
	transition: height 0.3s ease;
}

.topicdetimage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}

.topicdetimage--logo {
	background: #f5f5f5;
	border-radius: 3px;
}

.topicdetimage--logo img {
	object-fit: contain;
	padding: 8px;
}

.topicdetarea > .optwrap {
	flex: 0 0 100%;
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin: 6px 0 4px;
	padding: 7px 12px;
	font-size: 12px;
	background: #eaf1f8;
	border: 1px solid #b8d0e8;
	border-radius: 5px;
	filter: none;
}

.expandonhover {
	flex: 1;
}

.topicdescription {
	padding-bottom:10px;
	min-height:45px;
}

@media (min-width: 601px) {
	.topicblock:hover .topicdetarea > .optwrap {
		display: flex;
	}
	.topicblock:hover .topicdetarea {
		box-shadow: 1px 4px 4px 0px #555;
		height:initial;
		min-height:120px;
		padding-bottom: 16px;
		border-radius: 0 0 2px 2px;
		z-index:101;
	}
	.topicblock:hover .topic-left-col {
		flex-basis: 220px;
		max-width: 50%;
	}
	.topicblock:hover .topicdetimage {
		height: 240px;
	}
	.topicblock:hover .expandonhover {
		transition-delay:3s;
		display:block;
	}
}

/* is-expanded: mirrors all :hover rules for touch devices */
.topicblock.is-expanded {
	margin: -1px calc(1% + 1px) 2% calc(1% - 1px);
}
.topicblock.is-expanded .topicinnerblock h4 {
	box-shadow: 1px 4px 4px 0px #555;
}
.topicblock.is-expanded .topicdetarea > .optwrap {
	display: flex;
}
.topicblock.is-expanded .topicdetarea {
	box-shadow: 1px 4px 4px 0px #555;
	height: initial;
	min-height: 120px;
	padding-bottom: 16px;
	border-radius: 0 0 2px 2px;
	z-index: 101;
}
.topicblock.is-expanded .topic-left-col {
	flex-basis: 220px;
	max-width: 50%;
}
.topicblock.is-expanded .topicdetimage {
	height: 240px;
}
.topicblock.is-expanded .expandonhover {
	display: block;
}

@media (max-width: 600px) {
	/* Remove the desktop overflow-space gap */
	.topicbox {
		padding-bottom: 20px;
	}

	/* Hide the desktop height-spacer — topicinnerblock now provides the height */
	.topicspacer {
		display: none;
	}

	/* Switch to in-flow layout so expanded cards push content down */
	.topicinnerblock {
		position: relative;
	}

	/* Show the 120px preview in-flow (same crop as desktop, no absolute overlay) */
	.topicdetarea {
		position: relative;
		height: 120px;
		overflow: hidden;
		box-shadow: none;
		z-index: auto;
	}

	/* Tap to expand: show full content and subscription controls */
	.topicblock.is-expanded .topicdetarea {
		height: auto;
		overflow: visible;
		z-index: auto;
		position: relative;
		padding-bottom: 16px;
	}

	/* Full-width blocks don't need the desktop margin shift on expand */
	.topicblock.is-expanded {
		margin: 0 2% 2% 2%;
	}
}

.sublink {
	padding-right:15px;
}


.optwrap {
	position:relative;
	
	border-top:1px solid #ccc;
	
	background: -moz-linear-gradient(-65deg, rgba(0,0,255,0.05) 0%, rgba(0,0,0,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-65deg, rgba(0,0,255,0.05) 0%,rgba(0,0,0,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(155deg, rgba(0,0,255,0.05) 0%,rgba(0,0,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d0000FF', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
	margin:0 -10px;
	padding:7px 5px 0 5px;
}

.optwrap .tick,
.optwrap .cross,
.optwrap .oo-tick,
.optwrap .oo-cross
 {
	border-radius:3px;
}

.optwrap .tick,
.optwrap .cross {
		padding-top:2px;
}


.optwrap .spinner {
	padding-top:10px;
}

.optwrap .oo-spinner {
	padding-top:3px;
}

.topicname {
	display:inline-block;
}

.notificon {
	position:absolute;
	left:5px;
}

.optoutwrap {
	display: inline-flex;
	align-items: center;
}

.optout {
	padding: 0;
	margin: 0;
}

.optout .notificon {
	left:0px;
	margin-top:-2px;
}

.optout .oo-spinner {
	margin-top:0px;
	padding-top:3px;
}

.historyarea {
	padding-top:10px;
	text-align:center;
}

.msghistory {
	font-size:13px;
	padding-top:1px;
	padding-bottom:1px;
}

.lastmsgdate {
	font-size:0.8em;
	font-weight:normal;
	line-height:1.8em;
	float:right;
}


ul.selcontact li {
	text-decoration:underline;
	cursor:pointer;
}

#msghistorydialog {
	display:none;
	width:60%;
	height:60%;
	overflow:auto;
	float:none;
}


#legendwrap {
	font-size:0.9em;
}
#legendwrap h4 {
	margin-top:0;
}


@media (max-width: 768px) {
	#legendwrap {
		font-size:0.9em;
		margin-top:10px;
	}
}

.legendbox {
	padding:2px;
	text-align:center;
	margin:5px 0 0 0;
	font-weight:normal;
	display:inline-block;
	width:40px;
	height:1.2em;
}

@media(max-width:767px){
	.lastmsgdate {
		font-size:0.5em;
	}
}


.hmsgcontent {
	padding-bottom:15px;
	border-bottom:1px solid #888;
	margin-bottom:15px;
}
/*
.topiclevel1 {
	margin-left:2% !important
}

.topiclevel2 {
	margin-left:4% !important
}

.topiclevel3 {
	margin-left:6% !important
}
*/
.eventname {
	padding-left:3%;
}

.eventname,
.eventstart,
.eventreg {
	min-height:36px;
	line-height:36px;
	vertical-align:middle;
}

.eventname .tooltiphelp{
	vertical-align:middle;
}
		
marquee {
	vertical-align:middle;
}

marquee div,marquee img {
	display:inline-block;
	vertical-align:middle;
	margin:0 30px;
}

marquee img {
	max-height:80px;
}



/* Right bar area*/


.mainwrap {
	position:relative;
}

.surveyheader {
	background-image: -webkit-gradient(linear, left 0%, left 100%, from(#439e4c), to(#347a3b));
	background-image: -webkit-linear-gradient(top, #439e4c, 0%, #347a3b, 100%);
	background-image: -moz-linear-gradient(top, #439e4c 0%, #347a3b 100%);
	background-image: linear-gradient(to bottom, #439e4c 0%, #347a3b 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff439e4c', endColorstr='#ff347a3b', GradientType=0);
	border-color: #317337;
}

.surveyrow span{
	display:inline-block;
	max-width:185px;
}

#sidebar > div > div {
	border:1px solid #aaa;
	border-radius:5px;
	background-color:rgba(255,255,255,0.1);
	background: -moz-linear-gradient(-65deg, rgba(0,0,255,0.05) 0%, rgba(0,0,0,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-65deg, rgba(0,0,255,0.05) 0%,rgba(0,0,0,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(155deg, rgba(0,0,255,0.05) 0%,rgba(0,0,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d0000FF', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
	padding-bottom:15px;
	
}


#sidebar > div {
	margin-bottom:15px;
}

#sidebar h3 {
	text-align:center;
	margin:0px -20px 10px -20px;
	padding:10px 0;
	color:white;
	overflow: hidden;
}

.sidebar-clubhr {
	margin: 10px 0 8px;
	border-color: #ccc;
}
.sidebar-clubaddress,
.sidebar-clubemail {
	font-size: 12px;
	color: #555;
	margin-bottom: 4px;
}
.sidebar-clubabout {
	font-size: 13px;
	color: #333;
}
.sidebar-clubabout p:last-child {
	margin-bottom: 0;
}

.minievtlist h3 {
	background: linear-gradient(to bottom, #37a243 0%,#0d7323 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


div.publicsurveylist > div.surveyrow > span{
	display:inline-block;
	padding-top:5px;
}

#topicsugestioncontainer input[type='text'],
#topicsugestioncontainer textarea {
	width:100%;
}

.topicsuggestions input[type='submit'] {
	padding-left:2em;
	padding-right:2em;
}


#topicvotecontainer {
	margin-top:5px;
	border-bottom:1px solid #202020;
	min-height:100px;
	padding-bottom:5px;
}
	
#votetext {
}

#votearea {
	margin:5px 15px ;
	border:1px solid grey;
	vertical-align:top;
	background-color:white;
}

#voteform input {
	margin-left:5px;
}

.minievtlist .eventwrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.minievtlist .eventwrap a {
	text-decoration: underline;
	display: block;
}

.minievtlist .evtdate {
	font-size: 80%;
	padding: 0;
	display: block;
}

.minievtlist .minievt-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.minievtlist .minievt-text {
	flex: 1;
	min-width: 0;
}

.ajaxres {
	text-align:center;
	font-weight:bold;
	color:red;
}

/* Styles for branch links */

h3.branchlinksheader {
	background: linear-gradient(to bottom, rgb(255, 165, 101) 0%,rgb(253, 139, 22) 44%,#da7538 100%);
	
	background-repeat: repeat-x;
	border-radius: 4px 4px 0 0;
}

.branchlinks li {
  display: block;
	font-size:16px;
	padding-top:5px;
}

.branchlinks li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #333;
}

.branchlinks a {
		color:#333;
}

.merch_education #legendwrap {
	padding-bottom:5px;

	border:1px solid #aaa;
	border-radius:5px;
	background-color:rgba(255,255,255,0.1);
	background: -moz-linear-gradient(-65deg, rgba(0,0,255,0.05) 0%, rgba(0,0,0,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-65deg, rgba(0,0,255,0.05) 0%,rgba(0,0,0,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(155deg, rgba(0,0,255,0.05) 0%,rgba(0,0,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d0000FF', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
}


.merch_education #legendwrap > div{
	margin-left:10px;
}

.merch_education #legendwrap h4 {
  text-align: center;
  margin: 0px -15px 5px -15px;
  padding: 5px 0;
  color: white;

	background-image: linear-gradient(to bottom, #7abeef 0%, #69b5ec 50%, #4b92fb 100%);	
  border-radius: 4px 4px 0 0;
}


.merch_education #topicsheader {
	margin-top:35px;
	margin-bottom:30px;
}

/* Topic news */
.topicnewsarea {
	margin-top: 10px;
}
.topicnewsarea h5 {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #888;
	margin: 0 0 6px;
	letter-spacing: 0.04em;
}
.topicnewsitem {
	background: #f6f8fa;
	border: 1px solid #e2e6ea;
	border-radius: 5px;
	padding: 8px 10px;
	margin-bottom: 6px;
}
.topicnewsitem:last-child {
	margin-bottom: 0;
}
.topicnewsmeta {
	margin-bottom: 3px;
}
.topicnewsmeta strong {
	font-size: 13px;
}
.topicnewsmeta span {
	color: #999;
	margin-left: 6px;
}
.topicnewssummary {
	font-size: 12px;
	color: #555;
	margin-bottom: 3px;
}
.topicnewsbody {
	font-size: 13px;
	padding: 8px 0 4px;
	color: #333;
	border-top: 1px solid #ddd;
	margin-top: 6px;
}

.topic-documents {
	margin-bottom: 10px;
}
.topic-docs-toggle {
	margin-bottom: 6px;
}
.topic-documents .doc-list {
	margin: 4px 0 0 0;
	padding-left: 16px;
}