#manage-reviews-page {
	max-width: 1320px;
	padding: 0 #{$spacer * .5};
	margin: 0 auto;
	overflow: hidden;
	.card {
		flex-shrink: 0;
		border-radius: 8px;
		background: #FFF;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.12);

		.card-header {
			padding: 2.5rem 2rem;
		}
	}

	.card-body {
		padding: 3rem 2.5rem;
		display: flex;
		flex-direction: column;

		hr{
			margin-top: 0;
			margin-bottom: 2.5rem;
		}

		.statistics-container {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			justify-content: space-between;
			align-items: flex-start;
			gap: 5.188rem;
			flex-shrink: 0;

			@media (max-width: 1080px) {
				grid-template-columns: repeat(1, 1fr);
			}

			.statistic-data {
				display: flex;
				padding: 1rem 1.5rem;
				flex-direction: column;
				align-items: flex-start;
				gap: .5rem;
				flex-shrink: 0;
				border-radius: 4px;
				border: 1px solid #D1CFCF;

				.statistics-content {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: .75rem;
					align-self: stretch;

					.statistics-header {
						display: flex;
						width: 111px;
						flex-direction: column;
						align-items: flex-start;

						h6 {
							margin-bottom: 4px;
						}

						p {
							color: #9C9C9C;
							font-size: .75rem;
							font-style: normal;
							font-weight: 300;
							margin: 0;
						}
					}

					.rating-stars {
						display: flex;
						align-items: center;
						gap: .75rem;
						align-self: stretch;

						h3 {
							margin: 0;
						}

						.stars {
							display: flex;
							align-items: center;
							gap: 4px;

							.bi,
							.bi-star-fill {
								color: #FFDD00;
								font-size: 1rem;
							}
						}
					}
				}
			}
		}

		.search-add-button {
			padding-top: 2.5rem;
			padding-bottom: 2.5rem;
			gap: 1rem;

			#review-search-form {
				display: flex;
				gap: 1rem;
				align-self: stretch;
				border-radius: 8px;

				.input-group {
					width: 306px;

					#review-search {
						flex: 1 0 0;
						color: #666;
						font-size: 1rem;
						font-style: normal;
						font-weight: 400;
						line-height: 150%;
						padding: 0;
					}
				}

				.input-group-text {
					display: flex;
					align-items: center;
					gap: .75rem;
					background-color: #FFFFFF;
				}
			}

			#new-review-modal-trigger-button {
				display: inline-flex;
				padding: .75rem 1.5rem;
				justify-content: center;
				gap: .5rem;
				border-radius: 4px;
				border: 1px solid #4aa15e;
				background: #4aa15e;
			}
		}

		#reviews-table{
			overflow: auto;
			.review-columns{
				.review-date{
					@include all-widths(130px);
				}
				.location-name{
					@include all-widths(150px);
					text-overflow: ellipsis;
					overflow: hidden;
					padding-right: 1rem;
				}
				.rating-row{
					@include all-widths(150px);
				}
				.review-author-name{
					@include all-widths(150px);
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.review-body{
					@include all-widths(400px);
				}
				.management-buttons{
					@include all-widths(225px);
				}
			}

			#reviews-loader{
				margin: 0;
				padding: 0;
				height: 60px;
				display: flex;
				justify-content: center;
				align-items: center;

				.spinner-loader{
					margin: 0;
				}
			}
		}
		.review-info-rows{
			display: flex;
			flex-direction: column;
			gap: 1rem;
			& > .review-info-row:not(:last-of-type){
				border-bottom: 1px solid rgba(0, 0, 0, .2);
			}
			.review-info-row {
				display: inline-flex;
				align-items: center;
				padding-bottom: 1rem;

				.review-date{
					white-space: nowrap;
				}
				.location-name{
					white-space: nowrap;
				}
				.review-author-name{
					white-space: nowrap;
				}
				.review-body {
					flex-grow: 1;
					text-wrap: wrap;
					padding-right: 1rem;
				}
	
				.rating-row {
					display: flex;
					align-items: center;
					gap: .5rem;
					p{
						margin: 0;
					}
					.row-stars {
						white-space: nowrap;
						i {
							color: #FFDD00;
							font-size: 1rem;
						}
					}
				}
	
				.management-buttons {
					display: inline-flex;
					align-items: flex-start;
					gap: 1rem;
	
					.edit-button {
						display: flex;
						padding: .5rem 1.25rem;
						justify-content: center;
						align-items: center;
						gap: .5rem;
						border-radius: 4px;
						border: 1px solid #2E97F3;
						background: #FFF;
						height: 2rem;
	
						i {
							color: #2E97F3;
						}
					}
	
					.delete-button {
						display: flex;
						padding: .5rem 1.25rem;
						justify-content: center;
						align-items: center;
						gap: .5rem;
						border-radius: 4px;
						border: 1px solid #DC3545;
						background: #FFF;
						height: 2rem;
	
						i {
							color: #DC3545;
						}
					}
				}
			}
		}
	}

	#reviews-rows-headers {
		display: inline-flex;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		padding-bottom: 1rem;
		margin-bottom: 1.25rem;
		min-width: 100%;

		h6 {
			font-size: 1rem;
			font-style: normal;
			font-weight: 600;
			margin: 0;
		}
	}

	.paginator {
		display: flex;
		margin-top: auto;
		justify-content: flex-end;
	}
}

// New Review Modal

#new-review-modal{

	.modal-xl{
		max-width: 932px;
	
		label{
			font-style: normal;
			font-weight: 600;
			padding-bottom: .5rem;
		}
	
		.modal-header{
			display: flex;
			padding: 2.5rem 2rem;
			background-color: rgba(0, 0, 0, .03);
		}
	
		.modal-body{
			padding: 2.5rem 3rem;
	
			#new-review-form{
				hr{
					margin-top: 1.5rem;
					margin-bottom: 1.5rem;
				}
	
				p{
					margin: 0;
				}
				
				.container-fluid{
					padding: 0;
	
					.row{
						margin-bottom: 1.25rem;
						
						.rating-label{
							margin-bottom: 1.5rem;
	
							p{
								margin: 0;
								color: #9C9C9C;
								font-size: .75rem;
							}
						}
						
						.form-control{
							padding: .75rem;
							border-radius: 4px;
						}
						
						#new-review-rating-stars{
							gap: .5rem;
							display: flex;
	
							.star-buttons{
								border: none;
								background-color: #FFFFFF;
								padding: 0;
								
								&.active{
									i{
										color: #FFDD00;
									}
								}

								&:not(.active){
									i{
										color: #D1CFCF;
									}
								}

								i{
									font-size: 1rem;
									padding: .125rem .5rem;
									border-radius: 8px;
									border: 1px solid #D1CFCF;
								}
							}
						}
					}
				}
			}
		}
	
		.modal-footer{
			padding: 2.5rem 3rem;
			border: none;
			gap: 1rem;
			margin: 0;
			padding-top: 0;
	
			.btn-secondary{
				margin: 0;
				display: flex;
				padding: .75rem 1.5rem;
				justify-content: center;
				align-items: center;
				gap: .5rem;
				border-radius: 4px;
				border: 1px solid #DC3545;
				background-color: #FFFFFF;
				color: #DC3545;
			}
	
			.btn-primary{
				margin: 0;
				display: flex;
				padding: .75rem 1.5rem;
				justify-content: center;
				align-items: center;
				gap: .5rem;
				border-radius: 4px;
				border: 1px solid #4aa15e;
				background: #4aa15e;
			}
		}
	
		hr{
			margin-top: 1.5rem;
			margin-bottom: 0;
		}
	}
}


// Delete Review Modal

#delete-review-modal{

	.modal-xl{
		max-width: 932px;

		.modal-header{
			display: flex;
			padding: 2.5rem 2rem;
			background-color: rgba(0, 0, 0, .03);
		}
	
		.modal-body{
			padding: 2.5rem 3rem;

			.caution-message{
				gap: .5rem;
				
				p{
					margin: 0;
					display: flex;
					align-items: center;
				}
				.caution-icon{

					.bi{
						color: #DC3545;
					}

					i{
						display: flex;
						padding: .5rem;
						background-color: rgba(220, 53, 69, 0.10);
						border-radius: 50%;
					}
				}
			}

			hr{
				margin-top: 1.5rem;
				margin-bottom: 0;
			}
		}

		.modal-footer{
			padding: 2.5rem 3rem;
			border: none;
			gap: 1rem;
			margin: 0;
			padding-top: 0;
	
			.btn-secondary{
				margin: 0;
				display: flex;
				padding: .75rem 1.5rem;
				justify-content: center;
				align-items: center;
				gap: .5rem;
				border-radius: 4px;
				border: 1px solid #DC3545;
				background-color: #FFFFFF;
				color: #DC3545;
			}
	
			.btn-primary{
				margin: 0;
				display: flex;
				padding: .75rem 1.5rem;
				justify-content: center;
				align-items: center;
				gap: .5rem;
				border-radius: 4px;
				border: 1px solid #DC3545;
				background: #DC3545;
			}
		}
	}
}

// Edit Review Modal
#edit-review-modal{

	.modal-xl{
		max-width: 932px;
	
		label{
			font-style: normal;
			font-weight: 600;
			padding-bottom: .5rem;
		}
	
		.modal-header{
			display: flex;
			padding: 2.5rem 2rem;
			background-color: rgba(0, 0, 0, .03);
		}
	
		.modal-body{
			padding: 2.5rem 3rem;
	
			#edit-review-form{
				hr{
					margin-top: 1.5rem;
					margin-bottom: 1.5rem;
				}
	
				p{
					margin: 0;
				}
				
				.container-fluid{
					padding: 0;
	
					.row{
						margin-bottom: 1.25rem;
						
						.rating-label{
							margin-bottom: 1.5rem;
	
							p{
								margin: 0;
								color: #9C9C9C;
								font-size: .75rem;
							}
						}
						
						.form-control{
							padding: .75rem;
							border-radius: 4px;
						}
						
						#edit-review-rating-stars{
							gap: .5rem;
							display: flex;
	
							.star-buttons{
								border: none;
								background-color: #FFFFFF;
								padding: 0;
								
								&.active{
									i{
										color: #FFDD00;
									}
								}

								&:not(.active){
									i{
										color: #D1CFCF;
									}
								}

								i{
									font-size: 1rem;
									padding: .125rem .5rem;
									border-radius: 8px;
									border: 1px solid #D1CFCF;
								}
							}
						}
					}
				}
			}
		}
	
		.modal-footer{
			padding: 2.5rem 3rem;
			border: none;
			gap: 1rem;
			margin: 0;
			padding-top: 0;
	
			.btn-secondary{
				margin: 0;
				display: flex;
				padding: .75rem 1.5rem;
				justify-content: center;
				align-items: center;
				gap: .5rem;
				border-radius: 4px;
				border: 1px solid #DC3545;
				background-color: #FFFFFF;
				color: #DC3545;
			}
	
			.btn-primary{
				margin: 0;
				display: flex;
				padding: .75rem 1.5rem;
				justify-content: center;
				align-items: center;
				gap: .5rem;
				border-radius: 4px;
				border: 1px solid #4aa15e;
				background: #4aa15e;
			}
		}
	
		hr{
			margin-top: 1.5rem;
			margin-bottom: 0;
		}
	}
}