@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css");

@font-face {
	font-display: block;
	font-family: "FontAwesome";
	font-style: normal;
	font-weight: normal;
	src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/webfonts/fa-solid-900.woff2") format("woff2");
}


/* common styles */
#erEmailConfirmation {
	color: #f88;
	display: none;
	font-size: inherit;
}

.epContainer .clearfix,
.etContainer .clearfix,
.esContainer .clearfix {
	display: block;
}

.epContainer .clearfix:after,
.etContainer .clearfix:after,
.esContainer .clearfix:after {
	clear: both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

.erDefault {
	font-weight: normal;
}

/* start commented backslash hack \*/
* html .clearfix {
	height: 1%;
}

/* close commented backslash hack */

/* summary styles */
.esContainer {
	border: none;
	margin: 0 14px 0 0;
}

.esHead {
}

.esSummary {
	padding: 0 10px 0 0;
}

.esAvgStars {
	padding: 0 8px 0 0;
}

.esAvgRating {
	padding: 0 8px 0 0;
}

.esAvgCount {
	padding: 0 8px 0 0;
}

.esNone {
	color: #404040;
}

/* Product Review Styles */
.epContainer {
}

.epHead {
	align-items: center;
	border-bottom: var(--default-border-width) solid var(--gray-500);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--paragraph-large);
	gap: 1rem;
	justify-content: space-between;
	padding-bottom: 0.5lh;
}

#epBody {
	max-height: 420px;
	overflow-y: auto;
}

#epCreate {
}

#epSummary {
}

.epAvgStars {
	padding: 0 8px 0 0;
}

.epAvgRating {
	padding: 0 8px 0 0;
}

.epAvgCount {
	padding: 0 8px 0 0;
}

.epNone {
	color: #404040;
}

.epContent {
	border-bottom: var(--default-border-width) solid var(--gray-500);
	padding-block: 0.5lh;
}

.epRating {
	float: left;
	position: relative;
	width: 108px;
}

span.epBlanks {
	display: inline;
	float: left;
	width: 0
}

span.epBlanks:before {
	color: #a0a0a0;
	content: "\f005 \f005 \f005 \f005 \f005";
	font-family: FontAwesome, sans-serif;
	line-height: initial;
	white-space: nowrap;
}

.t-pm-review-content__heading {
	display: flex;
	flex-wrap: wrap;
	
	.epRating {
		float: none;
		width: 12ch;
	}
}

.t-pm-review-content__heading-content {}

.epTitle {
	font-weight: bold;
	margin-bottom: 0.5lh;
}

.epReview {
	padding: 15px 0;
}

.epSignature {
	display: flex;
	flex-wrap: wrap;
	gap: 2ch;
}

.epName {
}

.epName:before {
	color: var(--blue-400);
	content: "\f007";
	font-family: FontAwesome, sans-serif;
	font-size: 120%;
	-webkit-font-smoothing: antialiased;
	line-height: initial;
	-moz-osx-font-smoothing: grayscale;
	padding-right: 8px;
	text-rendering: auto;
	transform: translate(0, 0);
}

.epDate {
}

.epBusiness {
}

.epCompany {
}

.epURL {
}

.epVerified {
}

.epVerified:before {
	color: var(--blue-400);
	content: "\f00c";
	font-family: FontAwesome, sans-serif;
	font-size: 120%;
	-webkit-font-smoothing: antialiased;
	line-height: initial;
	-moz-osx-font-smoothing: grayscale;
	padding-right: 4px;
	text-rendering: auto;
	transform: translate(0, 0);
}

.t-pm-review__helpful {
	justify-content: space-between;
	flex-wrap: wrap;
}

.epVote {
	margin: 8px 0 0 0
}

.epHelpful {
	font-style: italic;
}

.epResponse {
	font-style: italic;
	margin: 0 0 18px 12px;
}

.epResponse:before {
	content: "- Store Owner: ";
}

/* Store Review/Testimonial Styles */
.etContainer {
}

#etHead {
	color: #444;
	font-size: 105%;
	font-weight: bold;
	margin-bottom: 12px;
	padding: 5px;
}

#etBody {
	background-color: #f5f5f5;
	margin: 5px;
	max-height: 420px;
	overflow-y: auto;
}

#etCreate {
	float: right;
	line-height: normal;
	text-align: right;
	width: 30%;
}

#etSummary {
	float: right;
	width: 70%
}

.etAvgStars {
	padding: 0 8px 0 0;
}

.etAvgRating {
	padding: 0 8px 0 0;
}

.etAvgCount {
	padding: 0 8px 0 0;
}

.etNone {
	color: #404040;
}

.etContent {
	margin: 28px 12px 0 42px;
}

#etContainer .quote {
	float: left;
	font: normal normal normal 24px/1 FontAwesome;
	-webkit-font-smoothing: antialiased;
	margin-left: -36px;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: auto;
	transform: translate(0, 0);
}

#etContainer .quote:before {
	color: #666;
	content: "\f10d";
}

.etRating {
	float: left;
	height: 28px;
	padding: 8px 12px 0 0;
	width: 64px;
}

.etTitle {
	font-weight: bold;
	padding: 8px 0 0 0;
}

.etReview {
	padding: 15px 0;
}

.etResponse {
	color: #9b0829;
	padding: 10px;
}

.etSignature {
	font-style: italic;
}

.etBusiness {
}

.etName {
	float: right;
	margin: 0 12px 0 0
}

.etDate {
	float: right
}

.etCompany {
	float: right;
	margin: 0 12px 0 0
}

.etURL {
	float: right
}

.etCompany, .etURL {
	padding: 5px 0 0 0;
}

.etVerified {
	font-size: 90%
}

.etVerified:before {
	color: #009;
	content: "\f00c";
	font-family: FontAwesome, sans-serif;
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
	line-height: initial;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: auto;
	transform: translate(0, 0);
}

.etVote {
	display: none;
}

.etHelpful {
	font-style: italic;
}

/* Rating Distribution */

/* the box */
#boxPU {
	background: #fff;
	border: 1px solid #000;
	-moz-box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.5);
	-webkit-box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.5);
	box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.5);
	display: none;
	margin-left: -54px;
	margin-top: 12px;
	padding: 12px;
	position: absolute;
	z-index: 9999;
}

#boxPU:after, #boxPU:before {
	border: solid transparent;
	bottom: 100%;
	content: " ";
	height: 0;
	left: 50%;
	pointer-events: none;
	position: absolute;
	width: 0;
}

#boxPU:after {
	border-bottom-color: #fff;
	border-width: 12px; /* arrow height */
	margin-left: -13px; /* arrow height */
}

#boxPU:before {
	border-bottom-color: #000;
	border-width: 13px; /* arrow height + 1 (makes line) */
	margin-left: -14px; /* arrow height + 1 (makes line) */
}

/* the bars */

.chart {
	font-size: 90%;
	margin-top: 4px;
}

.line {
	clear: both;
	line-height: 17px
}

.level {
	float: left;
	margin-right: 4px
}

span.bar {
	background: #e2e2e2;
	background: linear-gradient(to bottom, #eee, #f4f4f4);
	border-radius: 1px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(0, 0, 0, .1);
	box-sizing: border-box;
	display: block;
	float: left;
	height: 14px;
	margin-bottom: 6px;
	margin-right: 4px;
	width: 100px;
}

span.count {
	float: left;
	margin-left: 4px
}

span.bar span:after {
	color: #3b3b3b;
	margin-left: 106px;
}

a.openChart {
	cursor: pointer;
	font-size: 15px;
}

a.openChart:hover span#boxPU {
	color: #666;
	display: block;
	position: absolute;
}

a:hover {
}

div#erWriteReviewContainer {
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 16px;
}

#erCreateButton {
	font-size: 14px;
	font-weight: bold
}

#erWriteReviewContainer .ui-dialog,
#erEmailConfirmationContainer .ui-dialog,
#erReviewConfirmationContainer .ui-dialog {
	margin-bottom: unset;
	padding: 1rem;
}

#erWriteReviewContainer .ui-dialog .ui-dialog-titlebar,
#erEmailConfirmationContainer .ui-dialog .ui-dialog-titlebar,
#erReviewConfirmationContainer .ui-dialog .ui-dialog-titlebar {
	background-color: var(--blue-400) !important;
	color: var(--white) !important;
	margin-bottom: 1rem;
	
	.ui-dialog-title {
		overflow: unset !important;
		text-overflow: unset !important;
		white-space: normal !important;
	}
}

#erWriteReviewContainer .ui-button,
#erEmailConfirmationContainer .ui-button,
#erReviewConfirmationContainer .ui-button {
	align-items: center;
	align-self: start;
	background-color: var(--blue-400);
	border: var(--default-border-width) solid var(--transparent);
	border-radius: var(--default-border-radius);
	color: var(--white);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	justify-content: center;
	padding: calc(0.923em - var(--default-border-width)) calc(1.54em - var(--default-border-width));
	text-decoration: none;
	transition: background-color 100ms, color 125ms ease-in-out;
	-webkit-user-select: none;
	user-select: none;
	
	@media (hover: hover) and (pointer: fine) {
		&:hover {
			background-color: var(--white);
			border-color: var(--blue-400);
			color: var(--blue-400);
			outline: var(--default-border-width) solid var(--blue-400);
		}
	}
}