/*
 * Reader reviews on a programme page.
 *
 * Restyles the native ReHub review list rather than replacing it, because what
 * it collects is the most valuable reader content on the site: nine criterion
 * scores on the same axes as the house scoring, plus real first-hand prose.
 * Every selector below targets markup ReHub already outputs.
 *
 * Design is carried over from the reader verdict work: white card, 1px #E8E8E8,
 * 8px radius, --fr-shadow-soft, 2px chips, 3px buttons, plum links.
 *
 * Colours are literal by design. The stylesheet variables in this theme are not
 * reliable across the redesign layer, so every value here is the token itself.
 *
 * ink #1A1A1A  body #333333  muted #6F6F6F  faint #8C8C8C  label #8A8A8A
 * hairline #E8E8E8  warm #FAFAF8  fill #F4F4F2  teal #14527A  plum #6B4C6B
 * grey bar #B9B6B0  deep grey #55534F  blue #E8F4FF  cream #FEF3E2  pink #FFEAF2
 *
 * Bars, sliders and icons are grey rather than blue. The pale blue read as
 * childish against everything else on the page, and none of these elements
 * carries meaning through colour, so a neutral is the honest choice. The only
 * colour left in the block is the pros and cons panel tints.
 */

.fr-reader-reviews {
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The review column is 1200px wide, which is right for a row of programme cards
   and wrong for a paragraph: stretched across it, a line here ran about 157
   characters, and reading gets hard past roughly 75.

   So the width is used rather than either stretched or left empty. A rated
   review becomes two columns, her words on the left at a sane measure and her
   scores on the right, which is what was sitting in that empty strip. Below
   1000px it stacks back to one column. */
.fr-reader-reviews .user_reviews_view {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 12px 36px;
	align-items: start;
}

/* ReHub gives this block a percentage width of its own, which left it at about
   45% of the grid cell and put the empty strip back. In a grid cell the cell is
   the width. */
.fr-reader-reviews .user_reviews_view > .user_reviews_view_proscons {
	grid-column: 1;
	grid-row: 1;
	width: auto !important;
	max-width: none !important;
	float: none !important;
}

.fr-reader-reviews .user_reviews_view > .fr-rr-scores {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.fr-reader-reviews .user_reviews_view > .user-review-vote {
	grid-column: 1 / -1;
}

/* A plain comment has no scores to put beside it, so there is nothing to fill
   the space with. It is capped wide rather than at a book measure: a little
   long to read, but the alternative is a visibly empty half. */
.fr-reader-reviews .comment-content,
.fr-reader-reviews__invite,
.fr-reader-reviews #respond textarea {
	max-width: 900px;
}

@media (max-width: 1000px) {
	.fr-reader-reviews .user_reviews_view {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-reader-reviews .user_reviews_view > .fr-rr-scores,
	.fr-reader-reviews .user_reviews_view > .user_reviews_view_proscons {
		grid-column: 1;
		grid-row: auto;
	}
}

.fr-reader-reviews__invite {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.55;
	color: #6F6F6F;
}

/* ---- Sort tabs and the add button ---------------------------------------- */

.fr-reader-reviews .rh_grey_tabs_span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px !important;
	padding: 0;
	background: none;
	border: 0;
}

.fr-reader-reviews .rh_grey_tabs_span > span {
	padding: 7px 14px;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	color: #6F6F6F;
	cursor: pointer;
	line-height: 1.4;
}

.fr-reader-reviews .rh_grey_tabs_span > span:hover {
	background: #FAFAF8;
	color: #1A1A1A;
}

.fr-reader-reviews .rh_grey_tabs_span > span.active {
	background: #1A1A1A;
	border-color: #1A1A1A;
	color: #FFFFFF;
}

/* The house primary button: ink, white text, 3px. */
.fr-reader-reviews .add_user_review_link,
.fr-reader-reviews a.def_btn.add_user_review_link {
	display: inline-block;
	margin-left: auto;
	padding: 12px 24px !important;
	background: #1A1A1A !important;
	border: 1px solid #1A1A1A !important;
	border-radius: 3px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	text-shadow: none !important;
	box-shadow: none !important;
	line-height: 1.3 !important;
}

.fr-reader-reviews .add_user_review_link:hover {
	background: #333333 !important;
	border-color: #333333 !important;
}

/* ---- The review card ----------------------------------------------------- */

.fr-reader-reviews ol.commentlist,
.fr-reader-reviews ul.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fr-reader-reviews li.comment {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.fr-reader-reviews li.comment .commbox {
	padding: 26px 28px;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(30, 26, 22, 0.04);
}

/* ---- Who wrote it -------------------------------------------------------- */

.fr-reader-reviews .comm_meta_wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 16px;
}

.fr-reader-reviews .comm_meta_wrap .fn,
.fr-reader-reviews .comm_meta_wrap .fn a {
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	color: #1A1A1A;
	text-decoration: none;
}

.fr-reader-reviews .comm_meta_wrap .time,
.fr-reader-reviews .comm_meta_wrap .time a {
	font-size: 13px;
	color: #8C8C8C;
	text-decoration: none;
}

/* ---- What she wrote ------------------------------------------------------ */

.fr-reader-reviews .comment-content p,
.fr-reader-reviews .comm_text_from_review p,
.fr-reader-reviews .comm_text_from_review {
	font-size: 16px;
	line-height: 1.6;
	color: #333333;
}

/* ReHub puts her prose inside the same flex row as the pros and cons boxes, so
   it was competing with them for width and landed at about 500px. It takes the
   whole row; the two boxes sit under it. */
.fr-reader-reviews .comm_text_from_review {
	flex: 1 1 100%;
	margin-bottom: 18px !important;
}

/* ---- Her scores ---------------------------------------------------------- */

/* Hidden from first paint rather than by the footer script, which is what made
   the star block flash before it was replaced. Keyed on a class the head script
   adds, so with scripting off the original block simply stays visible. If the
   script runs but cannot read the values, build() marks the box as a fallback
   and it comes back rather than leaving the reader with nothing. */
.fr-rr-js .fr-reader-reviews .user_reviews_view_box {
	display: none;
}

.fr-rr-js .fr-reader-reviews .user_reviews_view_box.fr-rr-fallback {
	display: block;
}

.fr-reader-reviews .user_reviews_view_box {
	padding: 20px 22px;
	background: #FAFAF8;
	border-radius: 8px;
	margin-bottom: 18px !important;
}

.fr-reader-reviews .user_reviews_view_score .rating,
.fr-reader-reviews strong.rating {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1A1A1A;
	font-variant-numeric: tabular-nums;
}

.fr-reader-reviews .user_reviews_view_criteria_line {
	margin-bottom: 8px !important;
	font-size: 13.5px;
}

.fr-reader-reviews .user_reviews_view_criteria_name {
	font-weight: 600;
	color: #1A1A1A;
}

/* ReHub paints these bars with inline colours, so only the shape is set here. */
.fr-reader-reviews .user_reviews_view_criteria_line .rating_bar,
.fr-reader-reviews .user_reviews_view_criteria_line .re_bar_line {
	border-radius: 0 !important;
	height: 10px !important;
}

/* ---- Pros and cons ------------------------------------------------------- */

.fr-reader-reviews .user_reviews_view_proscons {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.fr-reader-reviews .user_reviews_view_pros,
.fr-reader-reviews .user_reviews_view_cons {
	flex: 1 1 200px;
	padding: 16px 18px;
	border-radius: 8px;
}

.fr-reader-reviews .user_reviews_view_pros { background: #E8F4FF; }
.fr-reader-reviews .user_reviews_view_cons { background: #FFEAF2; }

.fr-reader-reviews .user_reviews_view_pc_title {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #55534F;
}

.fr-reader-reviews .pros_comment_item,
.fr-reader-reviews .cons_comment_item {
	display: block;
	font-size: 14.5px;
	line-height: 1.5;
	color: #1A1A1A;
}

/* ---- Was this helpful ---------------------------------------------------- */

.fr-reader-reviews .user-review-vote {
	margin-top: 18px !important;
	padding-top: 16px !important;
	border-top: 1px solid #E8E8E8 !important;
	font-size: 13px;
}

.fr-reader-reviews .us-rev-vote-up,
.fr-reader-reviews .us-rev-vote-down {
	color: #6F6F6F !important;
}

.fr-reader-reviews .us-rev-vote-up:hover { color: #14527A !important; }
.fr-reader-reviews .us-rev-vote-down:hover { color: #8A1D46 !important; }

/* ---- The form ------------------------------------------------------------ */

.fr-reader-reviews #respond,
.fr-reader-reviews .comment-respond {
	margin-top: 28px;
	padding: 26px 28px;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(30, 26, 22, 0.04);
}

.fr-reader-reviews #reply-title,
.fr-reader-reviews .comment-reply-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #1A1A1A;
}

.fr-reader-reviews #respond input[type="text"],
.fr-reader-reviews #respond input[type="email"],
.fr-reader-reviews #respond input[type="url"],
.fr-reader-reviews #respond textarea {
	width: 100%;
	padding: 13px 14px;
	background: #FFFFFF;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font-family: inherit;
	font-size: 15px;
	color: #1A1A1A;
}

.fr-reader-reviews #respond .submit,
.fr-reader-reviews #respond input[type="submit"] {
	padding: 15px 30px;
	background: #1A1A1A;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	cursor: pointer;
}

.fr-reader-reviews a {
	color: #6B4C6B;
}

/* ---- Focus and motion ---------------------------------------------------- */

.fr-reader-reviews a:focus-visible,
.fr-reader-reviews button:focus-visible,
.fr-reader-reviews input:focus-visible,
.fr-reader-reviews textarea:focus-visible,
.fr-reader-reviews .rh_grey_tabs_span > span:focus-visible {
	outline: 2px solid #14527A;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fr-reader-reviews *,
	.fr-reader-reviews *::before,
	.fr-reader-reviews *::after {
		transition: none !important;
		animation: none !important;
	}
}

@media (max-width: 700px) {
	.fr-reader-reviews li.comment .commbox,
	.fr-reader-reviews #respond {
		padding: 22px 20px;
	}

	.fr-reader-reviews .add_user_review_link {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}

	.fr-reader-reviews .user_reviews_view_proscons {
		gap: 12px;
	}
}

/* ---- Reader avatars ------------------------------------------------------ */

.fr-reader-reviews .avatar,
.fr-reader-reviews .fr-reader-avatar {
	border-radius: 50%;
	vertical-align: middle;
}

.fr-avatar-picker {
	margin: 18px 0 22px;
	padding: 0;
	border: 0;
}

.fr-avatar-picker__legend {
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #1A1A1A;
}

.fr-avatar-picker__note {
	margin: 4px 0 12px;
	font-size: 13px;
	color: #8C8C8C;
}

.fr-avatar-picker__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fr-avatar-picker__opt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 8px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: #6F6F6F;
	transition: border-color 0.14s ease, background 0.14s ease;
}

.fr-avatar-picker__opt:hover {
	background: #FAFAF8;
	border-color: #B9B6B0;
}

/* The radio itself is off-screen rather than hidden, so it stays operable by
   keyboard and reachable by a screen reader; the label carries the state. */
.fr-avatar-picker__opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fr-avatar-picker__opt:has(input:checked) {
	border-color: #1A1A1A;
	background: #FAFAF8;
	color: #1A1A1A;
}

.fr-avatar-picker__opt:has(input:focus-visible) {
	outline: 2px solid #14527A;
	outline-offset: 3px;
}

.fr-avatar-picker__opt img {
	display: block;
	border-radius: 50%;
}

/* ---- Rebuilt scores ------------------------------------------------------
   The original ReHub block is hidden by fr-reader-reviews.js and replaced with
   this. No stars: the site does not use them anywhere, and ten star widgets in
   one card was most of what made it feel cluttered. The nine criteria fold away
   so the card leads with the person and her words instead of with numbers.
   -------------------------------------------------------------------------- */

.fr-reader-reviews .fr-rr-scores {
	margin: 0 0 18px;
}

/* Label above rather than pushed to the right edge. With margin-left:auto it
   ended up nearly a thousand pixels from the number it labels, which is most of
   the empty space this card had. */
.fr-rr-overall {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin-bottom: 14px;
}

.fr-rr-overall__num,
.fr-rr-overall__scale {
	display: inline;
}

.fr-rr-overall__num {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1A1A1A;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fr-rr-overall__scale {
	font-size: 14px;
	color: #8C8C8C;
	margin-left: 6px;
}

/* Number and scale share a line; the label sits above via order. */
.fr-rr-overall__num { align-self: baseline; }

.fr-rr-overall__label {
	order: -1;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #8A8A8A;
}

/* ---- The nine, folded away ---- */

.fr-rr-criteria {
	border-top: 1px solid #E8E8E8;
}

/* Styled as the house secondary button, because that is what it is. As plain
   text with a small mark after it, it read as a heading and nobody could tell
   it opened. */
.fr-rr-criteria__summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 16px;
	background: #FFFFFF;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 700;
	color: #1A1A1A;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.fr-rr-criteria__summary::-webkit-details-marker { display: none; }
.fr-rr-criteria__summary::marker { content: ""; }

.fr-rr-criteria__summary:hover {
	background: #F4F4F2;
}

/* One label for each state. */
.fr-rr-criteria__open,
.fr-rr-criteria[open] .fr-rr-criteria__shut { display: none; }
.fr-rr-criteria[open] .fr-rr-criteria__open { display: inline; }

/* Chevron, drawn from a rotated corner so there is no icon font to load. */
.fr-rr-criteria__summary .fr-rr-criteria__chev {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid #1A1A1A;
	border-bottom: 2px solid #1A1A1A;
}

.fr-rr-criteria__chev--down { transform: rotate(45deg) translate(-2px, -2px); }
.fr-rr-criteria__chev--up   { transform: rotate(-135deg) translate(-2px, -2px); }

/* Same swap the two labels use. These carry the .fr-rr-criteria__summary
   ancestor because the base rule that sets display:block does too, and without
   it both chevrons showed at once when the panel was shut. */
.fr-rr-criteria__summary .fr-rr-criteria__chev--up,
.fr-rr-criteria[open] .fr-rr-criteria__summary .fr-rr-criteria__chev--down { display: none; }
.fr-rr-criteria[open] .fr-rr-criteria__summary .fr-rr-criteria__chev--up { display: block; }

@media (prefers-reduced-motion: reduce) {
	.fr-rr-criteria__chev { transition: none; }
}

/* Giving a details child an explicit display overrides the browser's own
   hiding of closed content, so the list stayed open permanently and the toggle
   appeared to do nothing. It has to be hidden back explicitly. */
.fr-rr-criteria:not([open]) .fr-rr-criteria__list {
	display: none;
}

.fr-rr-criteria[open] .fr-rr-criteria__list {
	display: flex;
	flex-direction: column;
	padding-top: 8px;
}

/* One grid, so every row lines up. The original floated the names, which is why
   the rows came out ragged at 15px and 30px depending on how the name wrapped. */
.fr-rr-crit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 60px 32px;
	align-items: center;
	gap: 14px;
	padding: 9px 0;
}

.fr-rr-crit + .fr-rr-crit {
	border-top: 1px solid #F4F4F2;
}

.fr-rr-crit__name {
	font-size: 13.5px;
	font-weight: 600;
	color: #1A1A1A;
}

.fr-rr-crit__track {
	display: block;
	height: 8px;
	background: #F4F4F2;
}

.fr-rr-crit__fill {
	display: block;
	height: 100%;
	background: #B9B6B0;
}

.fr-rr-crit__num {
	text-align: right;
	font-size: 13.5px;
	font-weight: 700;
	color: #1A1A1A;
	font-variant-numeric: tabular-nums;
}

/* The hidden original block. The star fill span is deliberately NOT hidden here:
   `.userstar-rating > span` is the element whose width shows the rating, in the
   form as well as the display, so hiding it stopped the stars responding as a
   reader dragged a slider. The display block is hidden whole, which was all
   this ever needed to do. */
.fr-reader-reviews .user_reviews_view_box[hidden] {
	display: none !important;
}

@media (max-width: 700px) {
	.fr-rr-crit {
		grid-template-columns: 130px 1fr 34px;
		gap: 10px;
	}
}

/* ---- The two facts, in the form and on the card -------------------------- */

.fr-review-context {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 18px 0 22px;
	padding-top: 18px;
	border-top: 1px solid #E8E8E8;
}

.fr-review-context__field {
	flex: 1 1 240px;
	margin: 0;
}

.fr-review-context label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #1A1A1A;
}

.fr-review-context select {
	width: 100%;
	padding: 13px 14px;
	background: #FFFFFF;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font-family: inherit;
	font-size: 15px;
	color: #1A1A1A;
}

.fr-review-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.fr-review-chip {
	padding: 4px 10px;
	background: #F4F4F2;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1A1A1A;
}

/* ---- The rating sliders in the form -------------------------------------- */
/* ReHub ships noUiSlider in its own greys. These put it in the house palette
   and match the bars the finished review is displayed with, so the control a
   reader drags looks like the result she is about to produce. */

.fr-reader-reviews .noUi-target,
.fr-reader-reviews .user_rating_slider_criteria {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

.fr-reader-reviews .noUi-background,
.fr-reader-reviews #user_reviews_in_comment .noUi-origin.noUi-background {
	background: #F4F4F2 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* The filled portion, the same soft teal the finished criteria bars use.
   The ID is carried here on purpose. Three rules compete for this element:
   noUiSlider's own #3FB8AF, ReHub's #FF9800, and a #6B8F71 green set in this
   theme's style.css as `#user_reviews_in_comment .noUi-connect !important`.
   A class-only selector loses to that one on specificity even with !important,
   which is why the green survived the first attempt. */
.fr-reader-reviews #user_reviews_in_comment .noUi-connect,
.fr-reader-reviews #user_reviews_in_comment .noUi-origin.noUi-connect,
.fr-reader-reviews .noUi-connect,
.fr-reader-reviews .noUi-origin.noUi-connect {
	background: #B9B6B0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.fr-reader-reviews .noUi-handle {
	background: #FFFFFF !important;
	border: 1px solid #1A1A1A !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
}

/* ReHub draws two grip lines inside the handle; they read as clutter at this
   size and the circle is legible on its own. */
.fr-reader-reviews .noUi-handle::before,
.fr-reader-reviews .noUi-handle::after {
	display: none !important;
}

.fr-reader-reviews .noUi-handle:focus-visible {
	outline: 2px solid #14527A;
	outline-offset: 2px;
}

/* The form's own labels and running total. */
.fr-reader-reviews #user_reviews_in_comment label {
	display: block;
	margin: 14px 0 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1A1A1A;
}

.fr-reader-reviews .your_total_score {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #E8E8E8;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8A8A8A;
}

.fr-reader-reviews #user_reviews_in_comment textarea {
	width: 100%;
	margin-bottom: 12px;
	padding: 13px 14px;
	background: #FFFFFF;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font-family: inherit;
	font-size: 15px;
	color: #1A1A1A;
}

/* ---- Pros and cons icons ------------------------------------------------- */
/* ReHub ships a #58c649 green tick and a red cross. Neither is in the palette,
   and the green in particular sat oddly next to everything else. Each icon now
   takes the deeper tone of the box it sits in, so the pair reads as one system:
   blue on the blue pros panel, rose on the pink cons panel. */

.fr-reader-reviews .pros_comment_item:before {
	color: #55534F !important;
}

.fr-reader-reviews .cons_comment_item:before {
	color: #55534F !important;
}

/* ---- The other two greens ------------------------------------------------
   style.css lines 2618 to 2620 set #6B8F71 on three things with !important:
   the slider fill, the star glyphs and the rate bars. The slider is handled
   above. These two need matching specificity to win, hence the leading `body`
   on the last one, which mirrors the rule it is overriding.

   The stars take the mid blue used for the pros icons and the avatars rather
   than the slider's lighter fill, because a small glyph needs the contrast.
   -------------------------------------------------------------------------- */

.fr-reader-reviews .userstar-rating span:before {
	color: #55534F !important;
}

body .fr-reader-reviews .user-review-criteria .rate-bar-bar {
	background-color: #B9B6B0 !important;
}