/*
 * The community discussion page (viewfaq.php: views/faq/view_view-faq.php and
 * views/faq/view_faq-thread.php), in the order page's conversation look: one
 * card holding a flat list of posts - an avatar tile, the name, a role chip,
 * the time under it, the text - with thin rules between them, day rules,
 * tinted brand panels for states and the brand's line icons.
 *
 * Replies to replies are indented one step per level, three at most, and
 * joined to the post they answer by thin connector lines: .ct-guide runs a
 * column on, .ct-elbow turns into the reply's avatar, .ct-stem drops from a
 * post's avatar to its first reply.
 *
 * Everything is scoped to .community-thread and loaded by that view only.
 *
 * 2026-11-03 JD
 */
.community-thread {
	--ct-surface: var(--secondary-background-color);
	--ct-line: var(--primary-border-color);
	--ct-thread: #c4d7e4;
	--ct-ink: var(--primary-text-color);
	--ct-muted: #5a6b7d;
	--ct-navy: #0b2b45;
	--ct-link: #08699f;
	--ct-tint: #eaf7fe;
	--ct-chip-bg: #e2f2fc;
	--ct-chip-ink: #0b4f7c;
	--ct-hover-tint: rgba(13, 169, 239, .09);
	--ct-step: 40px;
	--ct-ava: 40px;
	--ct-pad: 18px;
	--ct-gap: 14px;
}

.dark-theme .community-thread {
	--ct-thread: #35506a;
	--ct-muted: #a9bccb;
	--ct-navy: #fff;
	--ct-link: #8cd0f5;
	--ct-tint: rgba(13, 169, 239, .12);
	--ct-chip-bg: rgba(13, 169, 239, .16);
	--ct-chip-ink: #8cd0f5;
	--ct-hover-tint: rgba(13, 169, 239, .12);
}

.community-thread .order-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	vertical-align: -4px;
}

/* --- Title ---------------------------------------------------------------- */
.community-thread .ct-page-head {
	margin-bottom: 22px;
}

.community-thread .ct-crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: center;
	margin: 0 0 18px;
	text-align: left;
}

.community-thread .ct-crumb > li {
	margin: 0;
	padding: 0;
	font-size: .8rem;
}

.community-thread .ct-crumb > li > a {
	color: var(--ct-muted);
}

.community-thread .ct-crumb > li > a:hover {
	color: var(--ct-link);
}

.community-thread .ct-crumb > li.separator {
	width: 3px;
	height: 3px;
	margin: 0;
	background-color: var(--ct-muted);
	opacity: .6;
}

.community-thread .ct-eyebrow {
	display: block;
	color: var(--ct-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.community-thread .ct-title {
	max-width: 820px;
	margin: 8px 0 16px;
	color: var(--ct-navy);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.18;
	overflow-wrap: anywhere;
}

.community-thread .ct-toprow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.community-thread .ct-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
	min-width: 0;
}

.community-thread .ct-tags .tag {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	height: auto;
	margin: 0;
	padding: 5px 10px;
	border: 0 !important;
	border-radius: 4px;
	background-color: var(--ct-tint);
	color: var(--ct-link) !important;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.4;
}

.community-thread .ct-tags .tag:hover {
	background-color: var(--ct-chip-bg);
	text-decoration: underline !important;
}

.community-thread .ct-tags .tag.active {
	background-color: var(--ct-navy);
	color: var(--ct-surface) !important;
}

.community-thread .ct-tags .tag .order-icon {
	width: 15px;
	height: 15px;
}

.community-thread .ct-subscribe .meta-link {
	margin: 0;
	padding: 0;
	border: 0;
}

.community-thread .ct-subscribe .btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
}

/* --- The conversation card ------------------------------------------------ */
.community-thread .ct-conversation {
	min-width: 0;
	margin-bottom: 24px;
	padding: 4px 24px 22px;
	border: 1px solid var(--ct-line);
	border-radius: 10px;
	background-color: var(--ct-surface);
}

.community-thread .ct-day {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 20px 0 2px;
	color: var(--ct-muted);
	font-size: .75rem;
}

.community-thread .ct-day::before,
.community-thread .ct-day::after {
	flex: 1 1 0;
	height: 1px;
	background-color: var(--ct-line);
	content: '';
}

/* --- Posts ----------------------------------------------------------------- */
.community-thread .ct-post {
	--ct-level: 0;
	position: relative;
	min-width: 0;
	padding: var(--ct-pad) 0 14px calc(var(--ct-level) * var(--ct-step) + var(--ct-ava) + var(--ct-gap));
	scroll-margin-top: 110px;
}

.community-thread .ct-level-1 { --ct-level: 1; }
.community-thread .ct-level-2 { --ct-level: 2; }
.community-thread .ct-level-3 { --ct-level: 3; }

/*
 * The rule between posts is drawn over each post, from its own indent, so a
 * reply's rule starts right of its parent's line and no connector crosses
 * one. The first post and the first after a day rule have none, and folding
 * a subtree away leaves no stray rule behind.
 */
.community-thread .ct-post::after {
	position: absolute;
	top: 0;
	right: 0;
	left: calc(var(--ct-level) * var(--ct-step));
	height: 1px;
	background-color: var(--ct-line);
	content: '';
}

.community-thread .ct-posts > .ct-error:first-child + .ct-post::after,
.community-thread .ct-day + .ct-error + .ct-post::after,
.community-thread .ct-question::after {
	display: none;
}

.community-thread .ct-children[hidden] {
	display: none;
}

.community-thread .ct-avatar {
	display: block;
	position: absolute;
	z-index: 1;
	top: var(--ct-pad);
	left: calc(var(--ct-level) * var(--ct-step));
	width: var(--ct-ava);
	height: var(--ct-ava);
	overflow: hidden;
	border-radius: 9px;
	background-color: var(--ct-tint);
}

.community-thread .ct-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The connectors. Column n sits under the avatar centre of level n - 1. */
.community-thread .ct-guide,
.community-thread .ct-elbow,
.community-thread .ct-stem {
	position: absolute;
	pointer-events: none;
}

/* Give every lane segment a usable hover target, not just a one-pixel rule. */
.community-thread .ct-guide,
.community-thread .ct-elbow {
	width: 16px;
	pointer-events: auto;
	cursor: default;
}

.community-thread .ct-col-1 { --ct-col: 1; }
.community-thread .ct-col-2 { --ct-col: 2; }
.community-thread .ct-col-3 { --ct-col: 3; }

.community-thread .ct-guide {
	top: 0;
	bottom: 0;
	left: calc((var(--ct-col) - 1) * var(--ct-step) + var(--ct-ava) / 2);
	border-left: 1px solid var(--ct-thread);
}

.community-thread .ct-elbow {
	top: 0;
	left: calc((var(--ct-col) - 1) * var(--ct-step) + var(--ct-ava) / 2);
	width: calc(var(--ct-step) - var(--ct-ava) / 2 - 4px);
	height: calc(var(--ct-pad) + var(--ct-ava) / 2);
	border-bottom: 1px solid var(--ct-thread);
	border-left: 1px solid var(--ct-thread);
	border-bottom-left-radius: 10px;
}

/* The line under an avatar to its replies: 16px wide to click, the 1px line drawn in its middle. */
.community-thread .ct-stem {
	top: calc(var(--ct-pad) + var(--ct-ava) + 4px);
	bottom: 0;
	left: calc(var(--ct-level) * var(--ct-step) + var(--ct-ava) / 2 - 8px);
	width: 16px;
	cursor: pointer;
	pointer-events: auto;
}

.community-thread .ct-stem::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 8px;
	border-left: 1px solid var(--ct-thread);
	content: '';
}


/*
 * The fold toggle: a labelled text button in the actions of the post that
 * owns the replies - "Hide 3 replies" with a caret up, "Show 3 replies" with
 * a caret down once folded, then on a tint so the folded state stands out.
 * Pointing at it (or focusing it) tints the replies it covers and lights the
 * post's line, so its reach shows before the click; the replies flash the
 * same tint when they come back.
 */
.community-thread .ct-toggle .order-icon {
	width: 14px;
	height: 14px;
	transform: rotate(180deg);
	transition: transform .15s;
}

.community-thread .ct-toggle[aria-expanded='false'] .order-icon {
	transform: none;
}

.community-thread .ct-toggle-show,
.community-thread .ct-toggle[aria-expanded='false'] .ct-toggle-hide {
	display: none;
}

.community-thread .ct-toggle[aria-expanded='false'] .ct-toggle-show {
	display: inline;
}

.community-thread .ct-actions .ct-toggle[aria-expanded='false'] {
	padding: 4px 12px 4px 10px;
	background-color: var(--ct-chip-bg) !important;
	color: var(--ct-chip-ink) !important;
}

/* The tint starts at the replies' own indent, clear of the ancestors' lines. */
.community-thread .ct-children {
	position: relative;
}

.community-thread .ct-children::before {
	position: absolute;
	top: 0;
	right: -10px;
	bottom: 0;
	left: calc(var(--ct-level) * var(--ct-step) - 10px);
	border-radius: 10px;
	background-color: transparent;
	content: '';
	pointer-events: none;
}

/*
 * The reach of a fold toggle, while it is pointed at or focused: the script
 * puts .ct-scope-on on the replies' box and .ct-scope-owner on the post, and
 * this does the rest - the tint, the owner's line, and every connector inside
 * the box at the box's own column or deeper, bold Sky, down to the deep lane.
 * Columns left of the box belong to the owner's ancestors and stay as they are.
 */
.community-thread .ct-children.ct-scope-on::before {
	background-color: var(--ct-hover-tint);
}

.community-thread .ct-scope-owner > .ct-stem::before,
.community-thread .ct-scope-on .ct-stem::before,
.community-thread .ct-scope-on.ct-level-1 .ct-guide,
.community-thread .ct-scope-on.ct-level-2 .ct-guide:is(.ct-col-2, .ct-col-3),
.community-thread .ct-scope-on.ct-level-3 .ct-guide.ct-col-3 {
	border-left: 2px solid #0da9ef;
}

.community-thread .ct-scope-on.ct-level-1 .ct-elbow,
.community-thread .ct-scope-on.ct-level-2 .ct-elbow:is(.ct-col-2, .ct-col-3),
.community-thread .ct-scope-on.ct-level-3 .ct-elbow.ct-col-3 {
	border-bottom: 2px solid #0da9ef;
	border-left: 2px solid #0da9ef;
}

.community-thread .ct-children-reveal::before {
	animation: ct-reveal 1.4s ease-out;
}

@keyframes ct-reveal {
	from { background-color: var(--ct-hover-tint); }
	to { background-color: transparent; }
}

/* Folded, a post's line has nothing to lead to; nor does its column when no sibling follows it. */
.community-thread .ct-collapsed > .ct-stem,
.community-thread .ct-collapsed.ct-real-last > .ct-guide-own {
	display: none;
}

.community-thread .ct-head {
	min-height: var(--ct-ava);
	padding-right: 44px;
	line-height: 1.35;
}

.community-thread .ct-name {
	color: var(--ct-ink);
	font-size: .95rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.community-thread .ct-name:hover {
	color: var(--ct-link);
}

.community-thread .ct-role {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background-color: var(--ct-chip-bg);
	color: var(--ct-chip-ink);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 1px;
}

.community-thread .ct-level-text {
	margin-left: 4px;
	color: var(--ct-muted);
	font-size: .8rem;
}

.community-thread .ct-time {
	display: block;
	margin-top: 3px;
	color: var(--ct-muted);
	font-size: .8rem;
}

.community-thread .ct-more {
	position: absolute;
	top: calc(var(--ct-pad) - 6px);
	right: -8px;
}

.community-thread .ct-more-btn {
	display: grid;
	width: 40px;
	height: 40px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ct-link);
	cursor: pointer;
}

.community-thread .ct-more-btn:hover,
.community-thread .ct-more-btn[aria-expanded='true'] {
	background-color: var(--ct-tint);
}

.community-thread .ct-more-btn:focus-visible,
.community-thread .ct-textbtn:focus-visible,
.community-thread .ct-like:focus-visible {
	outline: 3px solid #0da9ef;
	outline-offset: 2px;
}

.community-thread .ct-more .dropdown-menu {
	min-width: 180px;
}

.community-thread .ct-more .dropdown-item {
	display: flex;
	gap: 8px;
	align-items: center;
}

.community-thread .ct-replyto {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: 8px;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	background-color: var(--ct-tint);
	color: var(--ct-muted);
	font-size: .78rem;
	line-height: 1.4;
}

.community-thread .ct-replyto strong {
	color: var(--ct-link);
	font-weight: 700;
}

.community-thread .ct-replyto:hover {
	text-decoration: none;
}

.community-thread .ct-replyto:hover strong {
	text-decoration: underline;
}

.community-thread .ct-replyto + .ct-text {
	margin-top: 8px;
}

/* A post reached from an "In reply to" link shows briefly where it is. */
.community-thread .ct-post:target {
	animation: ct-target 1.6s ease-out;
}

@keyframes ct-target {
	from { background-color: var(--ct-chip-bg); }
	to { background-color: transparent; }
}

.community-thread .ct-replyto .order-icon {
	width: 14px;
	height: 14px;
}

.community-thread .ct-text {
	margin-top: 10px;
	color: var(--ct-ink);
	font-size: .95rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* styles.css hyphenates .comment-text-format and p; members' words stay whole here. */
.community-thread .ct-text p,
.community-thread .ct-text .comment-text-format {
	-webkit-hyphens: manual;
	hyphens: manual;
}

.community-thread .ct-text img,
.community-thread .ct-text iframe,
.community-thread .ct-text video {
	max-width: 100% !important;
	height: auto;
}

.community-thread .ct-text p:last-child {
	margin-bottom: 0;
}

.community-thread .ct-header-image {
	margin-top: 14px;
	overflow: hidden;
	border-radius: 8px;
}

.community-thread .ct-poll {
	margin-top: 14px;
}

.community-thread .ct-poll .order-icon {
	width: 16px;
	height: 16px;
}

/* --- Actions: text buttons -------------------------------------------------- */
.community-thread .ct-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 18px;
	align-items: center;
	margin-top: 8px;
}

.community-thread .ct-textbtn,
.community-thread .ct-actions .ct-like {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	height: auto;
	min-height: 36px;
	margin: 0;
	padding: 4px 10px;
	transform: none;
	border: 0;
	border-radius: 999px;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ct-link) !important;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.community-thread .ct-textbtn {
	padding: 4px 0;
}

.community-thread .ct-actions .ct-like {
	margin-left: -10px;
	border-radius: 5px;
}

.community-thread .ct-textbtn:hover,
.community-thread .ct-actions .ct-like:hover {
	text-decoration: underline;
}

/* Text buttons, not buttons: no bar under them. */
.community-thread .ct-actions .ct-like::after {
	content: none;
}

/* The script swaps btn-success / btn-outline-secondary on a vote; here a vote is a tint either way. */
.community-thread .ct-actions .ct-like.active {
	padding: 4px 10px;
	background-color: var(--ct-tint) !important;
}

/* The thumbs-up the vote script writes back in is Font Awesome; it is drawn as the brand's here. */
.community-thread .ct-like .fa-thumbs-up,
.community-thread .ct-icon-share {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--ct-icon) center / contain no-repeat;
	mask: var(--ct-icon) center / contain no-repeat;
}

.community-thread .ct-like .fa-thumbs-up::before {
	content: none;
}

.community-thread .ct-like .fa-thumbs-up {
	--ct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='%23000' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 24 31 L 35 9 Q 44 9 44 19 L 42 29 L 58 29 Q 65 29 63 37 L 57 58 Q 55 63 50 63 L 24 63 Z'/%3E%3Cpath d='M 8 31 L 24 31 L 24 63 L 8 63 Z'/%3E%3C/svg%3E");
}

.community-thread .ct-icon-share {
	--ct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='%23000' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 30 23 L 39 14 Q 49 4 59 14 Q 69 24 59 34 L 49 44'/%3E%3Cpath d='M 42 49 L 33 58 Q 23 68 13 58 Q 3 48 13 38 L 23 28'/%3E%3Cpath d='M 25 47 L 47 25'/%3E%3C/svg%3E");
}

.community-thread .ct-share-links {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-left: auto;
}

.community-thread .ct-share-links .social-button {
	margin: 0;
}

/* --- Replies header, states and forms -------------------------------------- */
.community-thread .ct-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 8px;
	padding: 22px 0 2px;
	border-top: 1px solid var(--ct-line);
}

.community-thread .ct-section-title {
	margin: 0;
	color: var(--ct-navy);
	font-size: 1.1rem;
	font-weight: 700;
}

.community-thread .ct-count {
	margin-left: 4px;
	color: var(--ct-muted);
	font-size: .85rem;
	font-weight: 600;
}

.community-thread .ct-jump {
	color: var(--ct-link);
	font-size: .85rem;
	font-weight: 600;
}

.community-thread .ct-empty {
	margin: 18px 0 0;
	color: var(--ct-muted);
}

.community-thread .ct-error:empty,
.community-thread .form-control-feedback:empty {
	display: none;
}

.community-thread .ct-error {
	margin-top: 8px;
}

/* A state of the discussion: a tinted panel with a toned brand tile and a left accent. */
.community-thread .ct-event {
	--ct-event-edge: #0da9ef;
	--ct-event-bg: #f2fafe;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 16px;
	border-left: 3px solid var(--ct-event-edge);
	border-radius: 10px;
	background-color: var(--ct-event-bg);
	color: var(--ct-ink);
	line-height: 1.55;
}

.community-thread .ct-event-success {
	--ct-event-edge: #36d69d;
	--ct-event-bg: #effbf6;
}

.dark-theme .community-thread .ct-event {
	--ct-event-bg: rgba(13, 169, 239, .08);
}

.dark-theme .community-thread .ct-event-success {
	--ct-event-bg: rgba(54, 214, 157, .08);
}

.community-thread .ct-event-text {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
}

.community-thread .ct-event-text strong {
	font-weight: 700;
}

.community-thread .ct-event-text .btn {
	margin: 0;
}

.community-thread .ct-tile {
	display: inline-grid;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 8px;
}

.community-thread .ct-tile .order-icon {
	width: 20px;
	height: 20px;
}

.community-thread .ct-tile-success {
	background-color: rgba(54, 214, 157, .18);
	color: #12805a;
}

.community-thread .ct-tile-info {
	background-color: rgba(13, 169, 239, .14);
	color: #08699f;
}

.dark-theme .community-thread .ct-tile-success {
	color: #6ee7b7;
}

.dark-theme .community-thread .ct-tile-info {
	background-color: rgba(13, 169, 239, .18);
	color: #8cd0f5;
}

.community-thread .ct-composer {
	padding-top: 22px;
}

.community-thread .ct-composer-label {
	display: block;
	margin-bottom: 10px;
	color: var(--ct-navy);
	font-weight: 700;
}

.community-thread .ct-composer .form-group,
.community-thread .ct-reply-form .form-group,
.community-thread #editCommentForm .form-group {
	margin-bottom: 0;
}

.community-thread .ct-form-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
}

.community-thread .ct-reply-form .ct-form-foot,
.community-thread .ct-form-foot-end {
	justify-content: flex-end;
}

.community-thread .ct-form-foot .btn,
.community-thread .ct-panel .btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
}

.community-thread .ct-hint {
	color: var(--ct-muted);
	font-size: .82rem;
}

.community-thread .ct-reply-form {
	padding: 12px 0 4px;
}

.community-thread #editCommentForm {
	margin-top: 8px;
}

/* Report and delete: a tinted panel under the post. */
.community-thread .ct-panel {
	position: relative;
	margin-top: 12px;
	padding: 16px 52px 16px 16px;
	border-radius: 8px;
	background-color: var(--ct-tint);
}

.community-thread .ct-panel .form-group {
	margin-bottom: 12px;
}

.community-thread .ct-panel label,
.community-thread .ct-panel-title {
	color: var(--ct-ink);
	font-weight: 600;
}

.community-thread .ct-panel-title {
	margin: 0 0 12px;
}

.community-thread .ct-panel-close {
	display: grid;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 8px;
	color: var(--ct-link);
}

.community-thread .ct-panel-close:hover {
	background-color: var(--ct-chip-bg);
}

/* --- Phones ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
	.community-thread {
		--ct-step: 24px;
		--ct-ava: 32px;
		--ct-pad: 16px;
		--ct-gap: 11px;
	}

	.community-thread .ct-title {
		font-size: 1.55rem;
	}

	.community-thread .ct-conversation {
		margin-right: -6px;
		margin-left: -6px;
		padding: 2px 14px 18px;
	}

	.community-thread .ct-avatar {
		border-radius: 7px;
	}

	.community-thread .ct-text {
		font-size: .92rem;
	}

	.community-thread .ct-toprow .ct-subscribe,
	.community-thread .ct-toprow .ct-subscribe .btn,
	.community-thread .ct-composer .ct-form-foot .btn {
		width: 100%;
		justify-content: center;
	}

	.community-thread .ct-share-links {
		margin-left: 0;
	}

	.community-thread .ct-panel {
		padding-right: 48px;
	}
}