/* SECTION BREADCRUMB */

#sectionBreadCrumb {
	width: 100%;
	height: 38px;
	background-color: #efefef;
}

#sectionBreadCrumb * {
	height: 100%;
}

#sectionBreadCrumb p {
	display: flex;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
}

/* SECTION COMMENT ALL */

#sectionCommentAll {
	margin-bottom: 60px;
}

.detail {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.detail-head {
	padding-top: 22px;
	padding-bottom: 30px;
	flex-direction: column;
	font-size: 24px;
	display: flex;
	align-items: center;
}

.detail-head hr {
	width: 105px;
	height: 5px;
	color: #fdc300;
	margin: 0;
	margin-top: 2px;
	opacity: 1;
}

.detail-body {
	display: flex;
}

.comment {
	width: 100%;
}

.comment-head {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 72px;
	background-color: #f6f6f6;
	border: 1px solid #ccc;
	border-bottom: none;
	padding: 0 28px;
}

.total-rating {
	display: flex;
	align-items: center;
}

.score {
	font-size: 24px;
	font-weight: bold;
	margin-right: 10px;
}

.make-comment {
	width: 112px;
	height: 42px;
	color: white;
	background-color: black;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.comment-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 30px;
	border: 1px solid #ccc;
}

.comment-item {
	/* display: flex;
	flex-direction: column;
	padding: 30px 0; */
	border-bottom: 1px solid #ccc;
}

.comment-item:last-of-type {
	border: none;
}

.comment-item-head {
	display: flex;
	align-items: center;
}

.comment-item-name {
	margin-left: 5px;
}

.comment-star {
	margin-right: 16px;
}

.comment-item-body {
	/* margin-top: 24px;
	margin-bottom: 28px; */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-comment {
	font-size: 13px;
}

.like-comment {
	font-size: 13px;
	color: #676767;
	display: flex;
	justify-content: right;
}

.like-comment button {
	all: unset;
	cursor: pointer;
}

.comment-item-foot {
	font-size: 13px;
	color: #676767;
}

.load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	background-color: #f6f6f6;
	border: 1px solid #ccc;
	font-size: 14px;
	margin-top: 32px;
	margin-bottom: 38px;
	cursor: pointer;
}

.liked {
	color: dodgerblue !important;
}

/* POPUP */

/* The Modal (background) */
/* .modal {
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
} */

/* Modal Content */
/* .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    margin-top: 20vh;
    padding: 0;
    border: 1px solid #888;
    width: 765px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.2s;
    animation-name: animatetop;
    animation-duration: 0.2s
} */

/* Add Animation */
@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

/* The Close Button */
.close {
	color: black;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #128d22;
	text-decoration: none;
	cursor: pointer;
}

/* .modal-header {
    padding: 0 35px;
    height: 63px;
    background-color: #f5f5f5;
    color: white;
    display: flex;
}

.modal-body {
    padding: 25px 32px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
} */

.popup-info {
	color: #128d22;
	font-size: 21px;
	font-weight: bold;
}

.rate {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
}

.rate-info {
	font-size: 14px;
	font-weight: bold;
	margin-right: 7px;
}

input[type='text'],
input[type='email'],
select {
	width: 100%;
	height: 44px;
    padding: 0px 20px;
	/* margin: 8px 0; */
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 1px;
	border-bottom: 2px solid black;
}

select {
	background-color: #f5f5f5;
}

textarea {
	padding: 12px 20px;
	margin: 8px 0;
	border: 1px solid #ccc;
}

.form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.checkbox {
	margin-right: 6px;
	margin-top: 3px;
}

label {
	font-size: 13px;
	font-weight: 450;
}

.green {
	color: #128d22;
}

.bold {
	font-weight: bold;
}

.send-button {
	width: 100%;
	height: 44px;
	background-color: #128d22;
	margin-top: 8px;
	color: #ffffff;
	border-radius: 5px;
	border: none;
}

.rating {
	--dir: right;
	--fill: gold;
	--fillbg: rgba(100, 100, 100, 0.15);
	--heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
	--star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
	--stars: 5;
	--starsize: 2rem;
	--symbol: var(--star);
	--value: 1;
	--w: calc(var(--stars) * var(--starsize));
	--x: calc(100% * (var(--value) / var(--stars)));
	block-size: var(--starsize);
	inline-size: var(--w);
	position: relative;
	touch-action: manipulation;
	-webkit-appearance: none;
}

.rating.item {
	--starsize: 1.6rem;
}

[dir='rtl'] .rating {
	--dir: left;
}

.rating::-moz-range-track {
	background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
	block-size: 100%;
	mask: repeat left center/var(--starsize) var(--symbol);
}

.rating::-webkit-slider-runnable-track {
	background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
	block-size: 100%;
	mask: repeat left center/var(--starsize) var(--symbol);
	-webkit-mask: repeat left center/var(--starsize) var(--symbol);
}

.rating::-moz-range-thumb {
	height: var(--starsize);
	opacity: 0;
	width: var(--starsize);
}

.rating::-webkit-slider-thumb {
	height: var(--starsize);
	opacity: 0;
	width: var(--starsize);
	-webkit-appearance: none;
}

.rating,
.rating-label {
	display: block;
	font-family: ui-sans-serif, system-ui, sans-serif;
}

.rating-label {
	margin-block-end: 1rem;
}

.likeButton {
	width: 17px;
	margin-right: 4px;
	cursor: pointer;
}

.starrr {
	display: inline-block;
}

.starrr a {
    color: #ffd119 !important;
}

.starrr a:hover {
    color: #ffd119 !important;
}

.starrr a i,
.starrr a svg {
	font-size: 16px;
	padding: 0 1px;
	color: #ffd119 !important;
	pointer-events: none;
	text-decoration: none;
}

.empty-comment {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120px;
	font-weight: bold;
	font-size: 22px;
}

.input-hidden {
	height: 0 !important;
	width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	float: right !important;
	border: 1px solid white !important;
	position: relative;
	top: 20px;
	right: 52px;
}

@media screen and (max-width: 992px) {
	/* .modal-content {
        width: 95%;
    } */

	.form-footer {
		flex-direction: column;
	}

	.col-lg-3.button-100 {
		width: 100% !important;
	}

	.rate {
		align-items: unset;
		flex-direction: column;
	}

	.rate-info {
		margin-bottom: 10px;
	}
}