/*
 {$BRAND_NAME`}
 Copyright (c) Christopher Graham, 2004-2024
*/

/*
This file defines styles for Conversr (abbreviated as CNS).
*/

/*{+START,INCLUDE,_cns_colours,.css,css,default}{+END}*/

/*
=========================
=====Conversr Styles=====
=========================
*/

.cns-forum-topic-wrapper-column-column1, .cns-forum-grouping-column1 {
	width: 43px;
}
/*{+START,IF,{$EQ,{$LANG},EN}}*/
	.cns-forum-topic-wrapper-column-column2, .cns-forum-grouping-column2 {
		width: 100%;
	}
	.cns-forum-topic-wrapper-column-column3 {
		overflow-wrap: break-word;
		width: 100px;
	}
	.cns-forum-topic-wrapper-column-column4, .cns-forum-grouping-column3 {
		overflow-wrap: break-word;
		width: 5em;
	}
	.cns-forum-topic-wrapper-column-column5, .cns-forum-grouping-column4 {
		overflow-wrap: break-word;
		width: 5em;
	}
	.cns-forum-topic-wrapper-column-column6 {
		width: 14em;
	}
	.cns-forum-topic-wrapper-column-column6-shorter {
		width: 9em;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile}*/
	.cns-forum-topic-wrapper-column-column1,
	.cns-forum-topic-wrapper-column-column2,
	.cns-forum-topic-wrapper-column-column3,
	.cns-forum-topic-wrapper-column-column4,
	.cns-forum-topic-wrapper-column-column5,
	.cns-forum-topic-wrapper-column-column6,
	.cns-forum-topic-wrapper-column-column7 {
		width: auto;
	}

	.cns-forum-grouping-column2, .cns-forum-grouping-column3, .cns-forum-grouping-column4, .cns-forum-grouping-column5 {
		width: 50% !important;
	}
/*{+END}*/

.cns-forum-topic-wrapper-column-column7 {
	width: 3.3em;
}

/*{+START,IF,{$EQ,{$LANG},EN}}*/
	.cns-forum-grouping-column5 {
		width: 17em;
	}
/*{+END}*/

.dropdown-actions {
	width: 7.5em;
}

.cns-column1 {
	background-color: {$GET,area_3_background} !important; /*  !important so precedence over th.dh */
	font-size: 0.85em;
	vertical-align: middle;
	padding: 0.5em;
	display: table-cell;
}

.cns-column2 {
	background-color: {$GET,area_background};
	font-size: 1.0em;
	vertical-align: middle;
	padding: 0.5em;
	display: table-cell;
}

.cns-column3 {
	background-color: {$GET,area_4_background};
	font-size: 0.85em;
	vertical-align: middle;
	display: table-cell;
	overflow-wrap: break-word;
}

.cns-column4, .cns-column5 {
	background-color: {$GET,area_2_background};
	font-size: 0.85em;
	vertical-align: middle;
	display: table-cell;
}

.cns-column6 {
	padding: 0.5em;
	background-color: {$GET,area_3_background};
	font-size: 0.9em;
	vertical-align: middle;
	display: table-cell;
}

/*{+START,CSS_MODE,desktop}*/
	/*{+START,IF,{$THEME_OPTION,curved_borders}}*/
		.cns-forum-box-left,
		.ocf-forum-box-left {
			border-top-left-radius: 10px;
		}
		.cns-forum-box-right {
			border-top-right-radius: 10px;
		}
		.cns-left-post-buttons, .cns-forum-box-bleft {
			border-bottom-left-radius: 10px;
		}
		.post-buttons, .cns-forum-box-bright {
			border-bottom-right-radius: 10px;
		}
	/*{+END}*/
/*{+END}*/

.cns-topic-list, .cns-forum-grouping, .cns-topic {
	border: 0 !important;
	border-collapse: collapse;
}
.cns-topic-list td, .cns-forum-grouping td, .cns-topic > div > div > div {
	border: 1px solid {$GET,main_background};
}
/*{+START,CSS_MODE,mobile}*/
	.cns-topic-list td {
		padding: 1em 0.5em;
	}
/*{+END}*/

div.cns-table-footer {
	width: 100%;
}
/*{+START,CSS_MODE,desktop}*/
	div.cns-table-footer {
		display: table;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile}*/
	div.cns-table-footer {
		display: none;
	}
/*{+END}*/
div.cns-table-footer > div {
	display: table-row-group;
}
div.cns-table-footer > div > div {
	display: table-row;
}

.cns-table-footer > div {
	height: 0.3em;
}

.cns-topic-marker-cell {
	background-color: {$GET,area_background};
	vertical-align: middle;
	text-align: center;
}

.cns-buttons-screen {
	white-space: nowrap;
}
/*{+START,CSS_MODE,desktop}*/
	.cns-buttons-screen {
		text-align: right;
		float: right;
		margin: 1.5em 0 1.5em 1em !important;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile}*/
	.cns-buttons-screen {
		text-align: center;
		margin: 1.5em 0 1.5em 0 !important;
	}
/*{+END}*/

/*
=========================
=========Joining=========
=========================
*/

.cns-join-rules {
	max-height: 30em;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/*
=========================
=====Marking system======
=========================
*/

.cns-on, .cns-on td {
	background-color: {$GET,point_of_interest_background} !important;
	border-color: {$GET,pale_border} !important;
}

.cns-off {
}

/*
=========================
=======Topic View========
=========================
*/

.cns-topic-header {
	background-color: {$GET,area_background};
}

/* Use correct div semantics for the posts, but table-style rendering */
.cns-topic {
	display: table;
}
.cns-topic > * {
	/*display: none; needed in case of unclosed <b> tags inside causing <b></b> throughout rest of document, due to HTML5 parse rules*/
}
.cns-topic .cns-topic-post {
	display: table-row-group;
}
.cns-topic > div > * {
	/*display: none; ^ ditto*/
}
.cns-topic .cns-topic-section {
	display: table-row;
}
.cns-topic > div > div > * {
	/*display: none; ^ ditto*/
}
.cns-topic .cns-topic-section > div {
	display: table-cell;
}
.cns-topic .cns-topic-section > div:first-child {
	background-color: {$GET,area_background};
	padding: 0.3em;
	vertical-align: middle;
}
/*{+START,CSS_MODE,desktop}*/
	.cns-topic .cns-topic-section > div:first-child {
		width: 130px;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile}*/
	.cns-topic .cns-topic-section > div:first-child {
		width: 80px;
	}
/*{+END}*/
.email-body .cns-topic .cns-topic-section > div:first-child {
	width: 70px;
}

.cns-post-box .cns-topic .cns-topic-section > div {
	border: 0;
}

.cns-topic {
	/*{+START,IF,{$EQ,{$LANG},EN}}*/
		table-layout: fixed !important; /* Needed to be able to lock in overflow scrolling to individual cells */
	/*{+END}*/
}

.cns-topic .cns-forum-box-left,
.cns-post-details {
	color: {$GET,box_title_text};
}
.cns-topic-post + .cns-topic-post .cns-forum-box-left,
.cns-topic-post + .cns-topic-post .cns-forum-box-right {
	border-top-width: 15px !important;
}
.cns-topic .cns-forum-box-left, .cns-post-details, .cns-post-details a, .cns-post-details a:hover {
	color: {$GET,box_title_text} !important;
}

.cns-post-emphasis, .cns-post-personal, .cns-post-poll, .cns-post-private-topic {
	font-size: 0.85em;
	font-weight: bold;
	text-align: center;
}

.cns-post-emphasis, div.cns-post-emphasis.cns-forum-box-left { /* Extra selector clause to give precedence over th.de-th and .cns-forum-box-left */
	background-color: {$GET,emphasis_background} !important;
	color: {$GET,emphasis_text};
}

.cns-post-personal, div.cns-post-personal.cns-forum-box-left { /* Extra selector clause to give precedence over th.de-th and .cns-forum-box-left */
	background-color: {$GET,cns_personal_post_background} !important;
	color: {$GET,cns_personal_post_text};
}

.cns-post-poll, div.cns-post-poll.cns-forum-box-left { /* Extra selector clause to give precedence over th.de-th and .cns-forum-box-left */
	background-color: {$GET,cns_polls_background} !important;
	color: {$GET,cns_polls_text};
}

.cns-post-private-topic, div.cns-private-topic.cns-forum-box-left { /* Extra selector clause to give precedence over th.de-th and .cns-forum-box-left */
	background-color: {$GET,cns_private_topic_post_background} !important;
	color: {$GET,cns_private_topic_post_text};
}

.cns-topic-poll {
	border-collapse: collapse;
}

.cns-topic-poll, .cns-topic-poll td {
	text-align: right;
}

.cns-topic-poll, .cns-topic-poll th {
	text-align: left;
	width: 100%;
}

.cns-topic-poll img {
	max-width: none;
}

.cns-topic-poll-radio, .cns-topic-poll-result {
	text-align: right;
	width: 50%;
	padding: 0.5em;
}

.cns-topic-poll-result-column2 {
	padding: 0.5em;
}

.cns-topic-poll-result-column2 * {
	vertical-align: middle;
}

.cns-topic-poll-relative {
	position: relative;
}

.cns-topic-poll-result .cns-topic-poll-relative {
	color: {$GET,cns_polls_text} !important;
}

.cns-topic-poll-progress {
	position: absolute;
	top: 5%;
	left: 0;
	width: 0;
	height: 90%;
	background-color: {$GET,cns_polls_background} !important;
}

.cns-topic-poster-title {
	font-size: 0.8em;
	margin-top: 0.5em;
}

.cns-topic-poster-rank-images {
	margin-top: 1.5em;
}

.cns-guest-poster {
	font-weight: bold;
}

.cns-post-details {
	text-align: left;
	padding: 0.6em 0.5em !important;
	{$BETA_CSS_PROPERTY,display: flex;}
	justify-content: space-between;
	align-items: center;
}

.cns-rank-image img {
	max-width: 100%;
	height: auto;
}

.cns-post-details-rating {
	white-space: nowrap;
	line-height: 0; /* Needed for valignment */
}

/*{+START,CSS_MODE,desktop}*/
	.cns-topic-post-member-details {
		padding: 0.5em;
	}
/*{+END}*/

.cns-topic-post-member-details {
	text-align: center;
	vertical-align: top !important;
}
/*{+START,CSS_MODE,mobile}*/
	.cns-topic-post-member-details {
		width: 80px;
	}
/*{+END}*/

.cns-topic-poster-name {
	text-align: center;
	display: inline-block;
	margin: 1em 0;
	max-width: 100%;
}
/*{+START,CSS_MODE,desktop}*/
	.cns-topic-poster-name {
		overflow-wrap: break-word;
	}
/*{+END}*/

.cns-topic-post-avatar {
	margin: 0 auto;
}

.cns-topic-post-avatar:not([width]):not([height]) {
	max-width: 100%;
	height: auto;
}

.cns-post-main-column {
	background-color: {$GET,area_faded_background};
	padding: 0.5em;
	vertical-align: top;
}

/*{+START,CSS_MODE,desktop}*/
	.cns-post-main-column.buttons-group {
		padding: 1em;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile}*/
	.cns-post-main-column.buttons-group {
		padding: 0.5em;
		text-align: center;
	}
/*{+END}*/
.cns-post-main-column .buttons-group {
	margin: 0;
	padding: 0;
}

.cns-topic-post-area {
	padding: 0.5em;
	line-height: 1.6em;
}
.cns-topic-post-area #map-canvas img { /*some exceptions may need defining for the above*/
	max-width: none;
}

.cns-topic-post-area > h2,
.cns-topic-post-area > h3 {
	margin-top: 0;
}

hr.cns-sig-barrier {
	border-top: 1px solid {$GET,divider_line};
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	height: 0;
	width: 40%;
	background-color: {$GET,divider_line};
	margin: 1em 1em 1em 0;
}
/*{+START,CSS_MODE,mobile}*/
	hr.cns-sig-barrier {
		display: none;
	}
/*{+END}*/

.cns-post-emphasis {
	text-align: center;
}

.cns-post-back-to-top {
	padding: 0.5em;
	text-align: right;
}

.cns-post-back-to-top img {
	vertical-align: middle;
	margin-left: 0.25em;
}

.cns-topic-control-functions {
	margin: 0.25em 0;
}
/*{+START,CSS_MODE,desktop}*/
	.cns-topic-control-functions {
		font-size: 0.9em;
	}
/*{+END}*/

.cns-topic-control-functions > .box-inner {
	margin: 0;
}

.cns-topic-control-functions form {
	{$BETA_CSS_PROPERTY,display: inline-flex;}
	padding: 10px;
}

.cns-topic-control-functions label {
	margin-bottom: 0;
	align-self: center;
	padding-right: 1em;
}

.cns-topic-control-functions select {
	max-width: 10.5em;
}

/*{+START,CSS_MODE,mobile}*/
	.cns-topic-control-functions form {
		width: 100%;
	}
	.cns-topic-control-functions label {
		min-width: 8.5em;
		display: inline-block;
	}
	.cns-topic-control-functions select {
		width: 9em;
		max-width: none;
	}
	.cns-topic-control-functions input {
		width: 5em;
	}
/*{+END}*/

.cns-topic-actions {
	margin: 1em 0;
}

.cns-topic-actions form {
	{$BETA_CSS_PROPERTY,display: inline-flex;}
	margin-right: 1em;
}

.cns-topic-actions label {
	margin-bottom: 0;
	align-self: center;
	padding-right: 1em;
}

.cns-topic-control-functions label,
.cns-topic-actions label {
	white-space: nowrap;
}

.cns-quick-reply {
	margin-top: 4em;
}

.comments-wrapper .boxless-space .box + .box---post-map::before {
	border-top: 0 !important;
}

.box---post-map ul {
	padding-left: 1em;
}

.box---post-map li {
	list-style: none;
	margin: 0;
	line-height: normal;
	font-size: 14px;
}

.box---post-map li img {
	vertical-align: top;
}

.box---post-map li > span {
	padding-top: 3.5px;
	display: inline-block;
	vertical-align: top;
}

.cns-post-map-item-unread {
	font-weight: bold;
}

/*{+START,CSS_MODE,mobile}*/
	.page-running-topicview .buttons--add-topic {
		display: none;
	}
/*{+END}*/

/*
=========================
=======Forum View========
=========================
*/

.cns-intro-question-answer-box {
	text-align: center;
}

.cns-pt-category-filters {
	font-weight: bold;
}


.cns-forum-grouping-heading {
	margin: 14px 4px;
	min-height: 20px;
	{$BETA_CSS_PROPERTY,display: flex;}
	align-items: center;
}

.cns-forum-grouping-heading .associated-details {
	margin-left: 7px;
	font-size: 14px;
}

.cns-forum-grouping-toggleable-tray-button {
	border-bottom: 0;
	padding-left: 0.5em;
	margin-left: auto;
	align-self: center;
}

.cns-forum-grouping-toggleable-tray-button .toggleable-tray-button .icon {
	padding-right: 0 !important;
}

.cns-forum-grouping {
	table-layout: fixed !important;
}

.cns-topic-list {
	/* TODO: Remove if we confirm this is the correct fix for topic lists not going full width in mobile */
	/*{+START,IF,{$EQ,{$LANG},EN}}*/
		/*table-layout: fixed !important;*/
	/*{+END}*/
}

.cns-topic-list th, .cns-forum-grouping th {
	padding: 0.5em;
}

/*{+START,CSS_MODE,mobile}*/
	.cns-forum-grouping th {
		width: 50%;
	}
/*{+END}*/

.cns-forum-grouping-centered-header {
	text-align: center;
}

.cns-forum-description {
	color: {$GET,area_key_text};
	font-size: 0.85em;
}

.cns-forum-subforums {
	font-size: 0.85em;
}
.cns-forum-subforums a {
	white-space: nowrap;
}

.cns-forum-grouping td {
	padding: 0.5em;
	text-align: left;
}

/*{+START,CSS_MODE,mobile}*/
	.cns-forum-grouping td .horizontal-meta-details, .cns-forum-grouping td  .associated-link, .cns-topic-list  .horizontal-meta-details {
		width: auto;
		display: block !important;
		padding: 0.5em 0 0 0;
	}
/*{+END}*/

.cns-forum-in-category-forum {
	padding: 1em; /* This override is in place because unlike most .cns-column2's, the forums in the forum view should have extensive padding. */
}

.cns-forum-in-category-forum .associated-link {
	text-decoration: none;
}

.cns-forum-in-category-forum .horizontal-meta-details img {
	position: relative;
	top: 2px;
}

.cns-forum-new-post-indicator {
	vertical-align: middle;
}

.cns-forum-new-post-indicator .icon-cns-general--no-new-posts,
.cns-forum-new-post-indicator .icon-cns-general--no-new-posts-redirect {
	color: {$GET,seed_secondary};
}

.cns-forum-new-post-indicator .icon-cns-general--new-posts,
.cns-forum-new-post-indicator .icon-cns-general--new-posts-redirect {
	color: {$GET,seed};
}

.cns-forum-num-topics {
	text-align: center !important;
}

.cns-forum-num-posts {
	text-align: center !important;
}

.cns-forum-latest {
}

.cns-forum-topic-title-bits {
	margin-top: 0.25em;
}

/*{+START,CSS_MODE,mobile}*/
	.cns-forum-topic-title-bits-left {
		display: block;
		margin: 0.5em 0;
	}
/*{+END}*/

.cns-forum-topic-title-bits-left .icon {
	color: {$GET,seed};
}

.cns-forum-topic-description {
	font-size: 0.85em;
	color: {$GET,area_key_text};
	margin-top: 0.5em;
}

.cns-forum-topic-row-poster {
	text-align: center;
}

.cns-forum-topic-row-num-posts {
	text-align: center;
}

.cns-forum-topic-row-num-views {
	text-align: center;
}

.cns-forum-topic-row-last-post {
}

.cns-forum-topic-row-preview-button {
	background-color: {$GET,area_4_background};
	font-size: 0.85em;
	padding: 0.5em !important;
	float: right;
	margin: 0 0 0 0.5em;
	text-decoration: none;
}

.cns-forum-topic-row-emoticon {
	text-align: center;
	width: 30px;
}
.cns-forum-topic-row-emoticon img:not([width]):not([height]) {
	max-width: 100%;
	height: auto;
}

.cns-forum-topic-row-preview {
	padding: 0.5em;
}

/*{+START,CSS_MODE,desktop}*/
	.cns-forum-topic-indent {
		margin-left: 0.25em;
	}
/*{+END}*/

.cns-unread-topic-title {
	font-weight: bold;
}

/*{+START,CSS_MODE,mobile}*/
	.cns-buttons-screen .buttons--search {
		display: none;
	}
/*{+END}*/

/*
=========================
====Viewing usergroups===
=========================
*/

.responsive-table .cns-rank-image {
	display: inline;
}

.group-add-member form * {
	vertical-align: middle;
}

/*
=========================
======Miscellaneous======
=========================
*/

.cns-join-1 {
	text-align: center;
}

.cns-join-declarations {
	display: inline-block;
	text-align: left;
}

.cns-join-1 .cns-join-declarations label {
	margin-left: 5px;
}

.btns-cns-join-step1 {
	{$BETA_CSS_PROPERTY,display: flex;}
	justify-content: center;
}

.btns-cns-join-step1 .btn {
	margin: 0 7px;
}

.cns-emoticon-cell {
	float: left;
	text-align: center;
	padding: 0.5em 0;
}

.cns-whisper-lead-in {
	margin: 1.5em 0;
}

/*{+START,CSS_MODE,mobile}*/
	.cns-whisper-choose-box {
		margin-bottom: 1em;
		width: 100%;
		float: left;
	}
/*{+END}*/
/*{+START,CSS_MODE,desktop}*/
	.cns-whisper-choose-box {
		margin-bottom: 3em;
		padding: 3em 1.5em 3em 3em;
		width: 50%;
	}
/*{+END}*/
.cns-whisper-choose-box .box {
	margin-top: 0;
}
/*{+START,CSS_MODE,desktop}*/
	.cns-whisper-choose-box.right {
		padding: 3em 3em 3em 1.5em;
	}
/*{+END}*/

.cns-whisper-choose-box p:first-child {
	min-height: 11em; /* Makes the left/right boxes the same height */
}

.cns-member-box-avatar {
	display: inline-block;
	margin-right: 0.5em;
	max-width: 100px !important;
	vertical-align: top;
}

.tooltip .cns-member-box-avatar-touching {
	max-width: 245px; /* Based on tooltip size */
}

.cns-member-signature {
	margin: 0.5em;
	font-size: 0.85em;
	color: {$GET,area_key_text};
}
/*{+START,CSS_MODE,mobile}*/
	.cns-member-signature {
		display: none;
	}
/*{+END}*/

.cns-highlighted-name {
	animation: cns-highlighted-name-pulsate 2s ease-out;
	animation-iteration-count: infinite;
	color: {$GET,area_link};
	background-color: {$GET,area_background};
	display: block;
}

@keyframes cns-highlighted-name-pulsate {
	0% {
		 color: {$GET,area_link};
	}
	50% {
		 color: {$GET,a.hover};
	}
	100% {
		 color: {$GET,area_link};
	}
}

/*
=========================
=side_cns_private_topics=
=========================
*/

.topic-list-topic {
	margin: 0.5em 0;
	overflow: hidden;
}

.topic-list-title {
	font-weight: bold;
}

.topic-list-title * {
	white-space: inherit !important;
}

.topic-list-meta {
	font-size: 0.85em;
}

.topic-list-by {
	font-weight: bold;
}

/*
=========================
=======Print rules=======
=========================
*/

@media print {
	.cns-post-back-to-top,
	.cns-topic-control-functions,
	.cns-member-bar-etc,
	.box---block-main-bottom-bar,
	.box---members-viewing,
	.cns-buttons-screen {
		display: none;
	}
}

/*
=========================
=========Buttons=========
=========================
*/

/*{+START,CSS_MODE,mobile}*/
	/* Modifications to make the top "Mark read" button appear in mobile mode (other non-accessibility-redundancy stuff is hidden in mobile mode) */

	.cns-topic-buttons.non-accessibility-redundancy,
	.cns-forum-buttons.non-accessibility-redundancy {
		display: block;
	}

	.cns-forum-buttons.non-accessibility-redundancy .cns-buttons-screen input,
	.cns-topic-buttons.non-accessibility-redundancy .cns-buttons-screen input,
	.cns-forum-buttons.non-accessibility-redundancy .cns-buttons-screen a,
	.cns-topic-buttons.non-accessibility-redundancy .cns-buttons-screen a {
		display: none;
	}

	.cns-forum-buttons.non-accessibility-redundancy .cns-buttons-screen input[alt="{!cns:MARK_READ}"],
	.cns-topic-buttons.non-accessibility-redundancy .cns-buttons-screen input[alt="{!cns:MARK_READ}"] {
		display: inline-block;
	}
/*{+END}*/

.cns-tr-end {
	background: {$GET,pale_border};
}
