.reviews__dashboard{
	padding:32px 24px;
	& .plates__wrapper{
		display: grid;
		grid-template-columns:repeat(2, 1fr);
		grid-column-gap:20px;
		grid-row-gap:20px;
		&>.box{
			border-radius: 8px;
			border:1px solid #E5E7EB;
			background-color:#fff;
			width: 100%;
			& .top{
				padding-top: 24px;
				padding-left: 24px;
				padding-right: 24px;
				margin-bottom: 24px;
				&>p{
					margin:0px;
					font-size: 16px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
				}
			}
			& .graph{
				padding-bottom: 25px;
				padding-left: 15px;
				& canvas{
					width: 100%!important;
				}
			}
			& .bar__graph{
				height: calc(100% - 54px);
				width: 100%;
				display: flex;
				align-items:center;
				justify-content:center;
				min-height: 240px;
				& #circlebar{
					height: 155px;
					width: 155px;
				}
				& .list__bars{
					margin-left: 40px;
					& ul{
						padding:0px;
						list-style-type: none;
						margin:0px;
						&>li{
							margin-bottom: 8px;
							display: flex;
							align-items:center;
							justify-content:flex-start;
							font-size: 14px;
							line-height: 150%;
							font-weight: 400;
							color:#111928;
							&>span{
								display: inline-flex;
								min-width: 16px;
								min-height: 4px;
								display: inline-flex;
								margin-right: 9px;
							}
							&:last-child{
								margin-bottom: 0px;
							}
						}
					}
				}
			}
			&>.title{
				padding:16px;
				border-bottom:1px solid #E5E7EB;
				&>p{
					margin:0px;
					font-size: 14px;
					line-height: 150%;
					font-weight: 400;
					color:#6B7280;
				}
			}
		}
	}
	& .reviews__box{
		display: flex;
		align-items:flex-start;
		justify-content:space-between;
		& .review__reply{
			margin-left: 50px;
			min-width: 535px;
			padding:24px;
			border-radius: 8px;
			background-color:#fff;
			position: relative;
			border:1px solid #E5E7EB;
			&.picked{
				& .review__stick{
					opacity: 1;
				}
			}
			& .review__stick{
				width: 50px;
				position: absolute;
				left: -50px;
				top:60px;
				height: 1px;
				background-color:#1C45C2;
				&:before{
					content:"";
					position: absolute;
					left: -5px;
					top:-4px;
					min-width: 8px;
					max-width: 8px;
					min-height: 8px;
					max-height: 8px;
					border-radius: 250px;
					background-color:#1C45C2;
				}
				&:after{
					content:"";
					position: absolute;
					right: -4px;
					top:-4px;
					min-width: 8px;
					max-width: 8px;
					min-height: 8px;
					max-height: 8px;
					border-radius: 250px;
					background-color:#1C45C2;
				}
				position: absolute;
			}
			& .subject{
				margin-bottom: 20px;
			}
			& .double{
				display: flex;
				align-items:center;
				justify-content:space-between;
				& .group__dropdown{
					width: 100%;
				}
				&>a{
					display: inline-flex;
					min-width: 42px;
					max-width: 42px;
					min-height: 42px;
					max-height: 42px;
					padding:0px;
					align-items:center;
					justify-content:center;
					margin-left: 12px;
				}
			}
			& .controls{
				display: flex;
				justify-content:space-between;
				padding-top: 24px;
				margin-top: 24px;
				border-top:1px solid #E5E7EB;
				align-items:center;
				& .cancel-btn{
					display: inline-flex;
					align-items:center;
					justify-content:center;
					min-height: 41px;
					padding-left: 20px;
					padding-right: 20px;
					text-decoration: none;
					font-size: 14px;
					line-height: 150%;
					font-weight: 500;
					color:#1C45C2;
					transition:.3s ease all;
					&:hover{
						opacity:.7;
					}
				}
				& .regular-btn{
					min-height: 41px;
					padding-left: 20px;
					padding-right: 20px;
				}
			}
		}
		& .list{
			width: 100%;
			&>.elem{
				padding:24px;
				border-radius: 8px;
				border:1px solid #E5E7EB;
				background-color:#fff;
				margin-bottom: 16px;
				position: relative;
				transition:.3s ease all;
				&.picked{
					border-color:#1C45C2;
				}
				&:last-child{
					margin-bottom: 0px;
				}
				& .content{
					& .top__part{
						display: flex;
						align-items:center;
						justify-content:flex-start;
						margin-bottom: 8px;
						& .info__v--icon{
							display: flex;
							align-items:center;
							justify-content:flex-start;
							&>p{
								margin:0px;
								font-size: 12px;
								line-height: 150%;
								font-weight: 400;
								color:#111928;
							}
							&>span{
								display: inline-flex;
								align-items:center;
								justify-content:center;
								margin-right: 5px;
								min-width: 16px;
								max-width: 16px;
								& svg{
									max-width: 100%;
								}
							}
						}
						& .spacer{
							display: flex;
							align-items:center;
							justify-content:center;
							margin:0px 8px;
						}
					}
					&>p{
						margin:0px;
						font-size: 14px;
						line-height: 150%;
						color:#6B7280;
						font-weight: 500;
					}
					& ul{
						padding:0px;
						list-style-type: none;
						margin:0px;
						display: flex;
						align-items:center;
						
						justify-content:flex-start;
						& li{
							display: inline-flex;
							margin-right: 4px;
							&:last-child{
								margin-right: 0px;	
							}
						}
					}
				}
				&>.top{
					display: flex;
					align-items:center;
					justify-content:space-between;
					margin-bottom: 20px;
					&>a{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						min-width: 37px;
						max-width: 37px;
						min-height: 37px;
						padding:0px;
						padding-bottom: 3px;
						& svg{
							width: 20px;
						}
					}
					& .author{
						display: flex;
						align-items:center;
						justify-content:flex-start;
						& .desc{
							display: flex;
							flex-direction:column;
							align-items:flex-start;
							&>p{
								margin:0px;
								margin-bottom: 4px;
								font-size: 16px;
								line-height: 125%;
								font-weight: 600;
								color:#111928;
							}
							&>span{
								font-size: 14px;
								line-height: 125%;
								font-weight: 400;
								color:#6B7280;
							}
						}
						&>span{
							display: inline-flex;
							align-items:center;
							justify-content:center;
							margin-right: 14px;
							& img{
								min-width: 32px;
								max-width: 32px;
								min-height: 32px;
								max-height: 32px;
								border-radius: 250px;
								object-fit:cover;
							}
						}
					}
				}
			}
		}
	}
	& .reviews__filter{
		margin-bottom: 24px;
		& form{
			display: flex;
			justify-content:space-between;
			& .spacer{

				min-width: 1px;
				background-color:#E5E7EB;
				margin:0px 16px;
			}
			& .double__field{
				width: 100%;
				display: flex;
				align-items:center;
				& .group__input{
					width: 100%;
				}
				& .space{
					margin:0px 8px;
					display: inline-flex;
					font-size: 14px;
					line-height: 150%;
					font-weight: 400;
					color:#111928;
				}
				&>.group__dropdown{
					width: 100%;
					margin-right: 16px;
					&:last-child{
						margin-right: 0px;
					}
				}
			}
		}
		padding:16px;
		border-radius: 8px;
		border:1px solid #E5E7EB;
		background-color:#fff;
		&>p{
			margin-top: 12px;
			margin-bottom: 0px;
			font-size: 14px;
			line-height: 125%;
			font-weight: 400;
			color:#6B7280;
		}
	}
	& .head{
		display: flex;
		align-items:center;
		justify-content:space-between;
		margin-bottom: 24px;
		&>h6{
			margin:0px;
			font-size: 28px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
		}
		& .group__input{
			width: 100%;
			max-width: 395px;
			position: relative;
			display: flex;
			align-items:center;
			&>input{
				width: 100%;
				height: 40px;
				border:1px solid #E5E7EB;
				border-radius: 8px;
				background-color:#fff;
				outline:none;
				padding-left: 42px;
				padding-right: 15px;
			}
			& span{
				display: inline-flex;
				position: absolute;
				left: 16px;
			}
		}
	}
}
.sentiments__wrapper{
	& .elem__sentiment{
		display: flex;
		align-items:center;
		justify-content:space-between;
		padding:16px;
		border-bottom:1px solid #E5E7EB;
		& .right{
			display: flex;
			align-items:center;
			justify-content:flex-start;
			min-width: 65px;
			min-height: 37px;
			border-radius: 4px;
			background-color:#F9FAFB;
			padding-left: 8px;
			padding-right: 8px;
			margin-left: 12px;
			& .stars{
				display: flex;
				align-items:center;
				justify-content:flex-start;
				&>p{
					margin:0px;
					font-size: 14px;
					line-height: 150%;
					font-weight: 400;
					color:#4B5563;
				}
				&>span{
					display: inline-flex;
					margin-right: 4px;
					align-items:center;
					justify-content:center;
				}
			}
		}
		&>.left{
			display: flex;
			align-items:center;
			justify-content:flex-start;
			&>p{
				margin:0px;
				font-size: 18px;
				line-height: 150%;
				color:#111928;
				font-weight: bold;
				display: flex;
				align-items:center;
				justify-content:flex-start;
				& span{

					min-width: 24px;
					min-height: 20px;
					max-width: 24px;
					max-height: 20px;
					border-radius: 80px;
					background-color:#F3F4F6;
					margin-left: 8px;
					display: inline-flex;
					align-items:center;
					justify-content:center;
					font-size: 10px;
					line-height: 150%;
					font-weight: 500;
					color:#111928;
				}
			}
			&>span{
				display: inline-flex;
				align-items:center;
				justify-content:center;
				margin-right: 12px;
				min-width: 48px;
				max-width: 48px;
				min-height: 48px;
				max-height: 48px;
				border:1px solid #E5E7EB;
				border-radius: 8px;
				& svg{
					max-width: 32px;
					max-height: 32px;
				}
			}
		}
		&:last-child{
			border-bottom:0px;
		}
	}
}
.sentiment__summary{
	padding-bottom: 16px;
	& .bottom__info{
		width: calc(100% -  70px);
		margin-left: auto;
		display: flex;
		align-items:center;
		justify-content:space-between;
		margin-top: 12px;
		&>.el{
			position: relative;
			&:before{
				content:"";
				position: absolute;
				left: 0px;
				top:-242px;
				height: 230px;
				width: 1px;
				margin-left: 12px;
				background-color:#E5E7EB;
			}
			&:nth-child(1){
				width: 33.3%;
				&:before{
					content:none;
				}
			}
			&:nth-child(2){
				width: 33.3%;
			}
			&:nth-child(3){
				width: 33.3%;
			}
			&>p{
				margin:0px;
				font-size: 12px;
				line-height: 150%;
				font-weight: 400;
				color:#111928;
			}
		}
	}
	& .main__graph{
		width: calc(100% - 70px);
		height: 230px;
		border:1px solid #E5E7EB;
		border-right: 0px;
		margin-left: auto;
		position: relative;
		& .summary__box{
			height: 100%;
			position: absolute;
			left: -55px;
			display: flex;
			flex-direction:column;
			justify-content:space-between;
			align-items:flex-start;
			padding-top: 7px;
			width: calc(100% + 55px);
			padding-bottom: 7px;
			& .elem{
				width: 100%;
				display: flex;
				align-items:center;
				justify-content:flex-start;
				& .bar{
					display: flex;
					align-items:center;
					justify-content:flex-start;
					width: 100%;
					position: relative;
					z-index: 2;
					&>.bar__one{
						background-color:#54ABB9;
					}
					&>.bar__two{
						background-color:#FCDA2A;
					}
					&>.bar__three{
						background-color:#FC512A;
					}
					&>div{
						&>p{
							font-size: 12px;
							line-height: 150%;
							font-weight: 400;
							color:#FFFFFF;
						}
						height: 17px;
					}
				}
				& .title{
					display: flex;
					align-items:center;
					min-width: 70px;
					max-width: 70px;
					justify-content:flex-end;
					text-align: right;
					position: relative;
					left: -15px;
					padding-right: 14px;
					& span{
						display: inline-flex;
						margin-right: 4px;
					}
					&>p{
						margin:0px;
						font-size: 12px;
						line-height: 150%;
						font-weight: 400;
						color:#4B5563;
					}
				}
			}
		}
		&>.line:nth-child(1){
			position: absolute;
			left: 0px;
			top:25%;
			width: 100%;
			height: 1px;
			background-color:#E5E7EB;
		}
		&>.line:nth-child(2){
			position: absolute;
			left: 0px;
			top:50%;
			width: 100%;
			height: 1px;
			background-color:#E5E7EB;
		}
		&>.line:nth-child(3){
			position: absolute;
			left: 0px;
			top:75%;
			width: 100%;
			height: 1px;
			background-color:#E5E7EB;
		}
	}
}
.summary__graph{
	& .bottom__info{
		width: calc(100% -  70px);
		margin-left: auto;
		display: flex;
		align-items:center;
		justify-content:space-between;
		margin-top: 12px;
		&>.el{
			position: relative;
			&:before{
				content:"";
				position: absolute;
				left: 0px;
				top:-242px;
				height: 230px;
				width: 1px;
				margin-left: 12px;
				background-color:#E5E7EB;
			}
			&:nth-child(1){
				width: 33.3%;
				&:before{
					content:none;
				}
			}
			&:nth-child(2){
				width: 33.3%;
			}
			&:nth-child(3){
				width: 33.3%;
			}
			&>p{
				margin:0px;
				font-size: 12px;
				line-height: 150%;
				font-weight: 400;
				color:#111928;
			}
		}
	}
	& .main__graph{
		width: calc(100% - 70px);
		height: 230px;
		border:1px solid #E5E7EB;
		border-right: 0px;
		margin-left: auto;
		position: relative;
		& .summary__box{
			height: 100%;
			position: absolute;
			left: -55px;
			display: flex;
			flex-direction:column;
			justify-content:space-between;
			align-items:flex-start;
			padding-top: 40px;
			width: calc(100% + 55px);
			padding-bottom: 7px;
			& .elem{
				width: 100%;
				display: flex;
				align-items:center;
				justify-content:flex-start;
				& .progress{
					width: 100%;
					height: 17px;
					position: relative;
					z-index: 2;
					&  .active{
						position: absolute;
						left: 0px;
						top:0px;
						height: 100%;
						background-color:#1C45C2;
					}
				}
				& .title{
					display: flex;
					align-items:center;
					min-width: 54px;
					max-width: 54px;
					justify-content:flex-start;
					& span{
						display: inline-flex;
						margin-right: 4px;
					}
					&>p{
						margin:0px;
						font-size: 14px;
						line-height: 150%;
						font-weight: 400;
						color:#4B5563;
					}
				}
			}
		}
		&>.line:nth-child(1){
			position: absolute;
			left: 0px;
			top:25%;
			width: 100%;
			height: 1px;
			background-color:#E5E7EB;
		}
		&>.line:nth-child(2){
			position: absolute;
			left: 0px;
			top:50%;
			width: 100%;
			height: 1px;
			background-color:#E5E7EB;
		}
		&>.line:nth-child(3){
			position: absolute;
			left: 0px;
			top:75%;
			width: 100%;
			height: 1px;
			background-color:#E5E7EB;
		}
	}
}
.summary__graph .bottom__info>.el{
	position: relative;
	left: -17px;
	&:nth-child(1){
		left: 0px;
	}
}
.double__summary{
	display: grid;
	grid-template-columns:repeat(2 ,1fr);
	grid-column-gap:20px;
	&>.box{
		& .summary__graph{
			padding-bottom: 23px;
		}
		& .sentiments__wrapper{
			height: calc(100% - 69px);
			& .elem__sentiment{
				height: 33.3%
			}
		}
		&>.title{
			padding:24px;
			border-bottom:1px solid #E5E7EB;
			&>p{
				margin:0px;
				font-size: 16px;
				line-height: 125%;
				font-weight: 600;
				color:#111928;
			}
		}
		&>.top{
			display: flex;
			align-items:center;
			justify-content:space-between;
			padding:22px 24px;
			&>span{
				display: inline-flex;
				align-items:center;
				justify-content:flex-start;
				font-size: 14px;
				line-height: 160%;
				font-weight: 400;
				color:#6B7280;
				& svg{
					min-width: 22px;
					max-width: 22px;
					margin-right: 8px;
					position: relative;
					top:-1px;
				}
			}
			&>p{
				margin:0px;
				font-size: 16px;
				line-height: 125%;
				font-weight: 600;
				color:#111928;
			}
		}
		background-color:#fff;
		border-radius: 8px;
		border:1px solid #E5E7EB;
	}
}
.triple__info{
	display: grid;
	grid-template-columns:repeat(3 ,1fr);
	grid-column-gap:20px;
	margin-bottom: 20px;
	&>.elem{

		padding:16px 20px;
		border-radius: 8px;
		border:1px solid #E5E7EB;
		background-color:#fff;
		&  .content{
			display: flex;
			align-items:center;
			justify-content:flex-start;
			&>span{
				display: inline-flex;
				font-size: 24px;
				line-height: 125%;
				font-weight: 600;
				color:#111928;
				margin-right: 8px;
			}
			&>p{
				margin:0px;
				font-size: 12px;
				line-height: 125%;
				font-weight: 400;
				color:#6B7280;
				& span{
					display: inline-flex;
					align-items:center;
					padding:2px 4px;
					border-radius: 4px;
					min-height: 19px;
					justify-content:center;
					margin-right: 8px;
				}
			}
		}
		& .top{
			display: flex;
			align-items:center;
			justify-content:flex-start;
			margin-bottom: 12px;
			&>p{
				margin:0px;
				font-size: 14px;
				line-height: 150%;
				font-weight: 400;
				color:#6B7280;
			}
			&>span{
				display: inline-flex;
				margin-right: 9px;
				min-width: 22px;
				max-width: 22px;
				min-height: 22px;
				max-height: 22px;
				&  svg{
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
	}
}
.dashboard__filter{
	margin-bottom: 24px;
	padding:16px;
	border:1px solid #E5E7EB;
	border-radius: 8px;
	background-color:#fff;
	display: grid;
	grid-template-columns:repeat(4,1fr);
	grid-column-gap:16px;
}
.sentiment__summary .main__graph .summary__box .elem .bar{
	width: calc(100% - 55px);
	margin-left: -15px;
	&>div{
		display: flex;
		justify-content:flex-end;
		&>span{
			font-size: 12px;
			line-height: 150%;
			font-weight: 400;
			color:#FFFFFF;
		}
		padding-right: 8px;
	}
}
@media (max-width: 1440px){
	.reviews__dashboard .reviews__box .review__reply{
		min-width: 420px;
		max-width: 420px;
	}
}
@media (max-width: 1200px){
	.reviews__dashboard .plates__wrapper{
		grid-template-columns:1fr;

	}
	.reviews__dashboard .plates__wrapper>.box .graph{
		padding-bottom: 16px;
	}
	.reviews__dashboard .reviews__filter form{
		flex-direction:column;
	}
	.reviews__dashboard .reviews__filter form .spacer{
		width: 100%;
		min-height: 1px;
		margin:20px 0px;
	}
}
.reviews__dashboard .reviews__box .list>.elem>.top .author .desc>span{
	word-break:break-all;
}
.reviews__dashboard .reviews__box .list>.elem>.top .author{
	margin-right: 15px;
}
@media (max-width: 991px){
	.summary__graph .main__graph , .summary__graph .bottom__info{
		width: calc(100% - 45px);
	}
	.triple__info{
		margin-bottom: 16px;
	}
	.reviews__dashboard .head{
		margin-bottom: 20px;
	}
	.double__summary{
		grid-template-columns:1fr;
		grid-row-gap:16px;
	}
	.dashboard__filter{
		margin-bottom: 16px;
	}
	.triple__info{
		grid-template-columns:1fr;
		grid-row-gap:16px;
	}
	.dashboard__filter{
		grid-template-columns:repeat(2 ,1fr);
		grid-row-gap:15px;
	}
	.reviews__dashboard .reviews__box{
		flex-direction:column;
	}
	.reviews__dashboard .reviews__box .review__reply{
		min-width: 0px;
		max-width: 100%;
		margin-left: 0px;
		margin-top: 35px!important;
		width: 100%;
	}
	.reviews__dashboard .reviews__box .review__reply .review__stick:before{
		left: 50%;
		transform:translateX(-50%);
	}
	.reviews__dashboard .reviews__box .review__reply .review__stick:after{
		left: 50%;
		transform:translateX(-50%);
		bottom:-4px;
		top:auto;
		right: auto;
	}
	.reviews__dashboard .reviews__box .review__reply .review__stick{
		left: 50%;
		top:-52px;
		transform:translateX(-50%);
		height: 52px;
		width: 1px;
	}
	.reviews__dashboard .reviews__box .review__reply{
		display: none;
	}
	.reviews__dashboard .head>h6{
		font-size: 24px;
	}
	.reviews__dashboard .reviews__box .review__reply{
		padding:16px;
	}
}

@media (max-width: 767px){
	.reviews__dashboard{
		padding:20px 15px;
	}
	.reviews__dashboard .reviews__filter{
		margin-bottom: 16px;
	}
	.reviews__dashboard .head{
		margin-bottom: 15px;
		flex-direction:column;
	}
	.reviews__dashboard .head>h6{
		width: 100%;
		margin-bottom: 10px;
	}
	.reviews__dashboard .head .group__input{
		max-width: 100%;
	}
	.reviews__dashboard .reviews__box .list>.elem{
		padding:16px;
	}
	.double__summary>.box .sentiments__wrapper .elem__sentiment{
		height: auto;
	}
	.double__summary>.box>.title , .double__summary>.box>.top{
		padding:16px;
	}
}
@media (max-width: 480px){

	.reviews__dashboard .reviews__box .list>.elem .content .top__part{
		flex-direction:column;
		align-items:flex-start;
	}
	.reviews__dashboard .reviews__box .list>.elem .content .top__part .spacer{
		display: none;
	}
	.reviews__dashboard .reviews__box .list>.elem .content .top__part .info__v--icon{
		margin-top: 5px;
	}
	.sentiment__summary .main__graph .summary__box .elem .bar>div>span{
		font-size: 9px;
		padding-top: 1px;
	}
	.double__summary>.box .sentiments__wrapper .elem__sentiment{
		flex-direction:column;
	}
	.sentiments__wrapper .elem__sentiment>.left{
		margin-bottom: 8px;
		margin-right: auto;
	}
	.sentiments__wrapper .elem__sentiment .right{
		margin-left: auto;
	}
	.sentiments__wrapper .elem__sentiment>.left>p{
		font-size: 16px;
	}
	.sentiments__wrapper .elem__sentiment>.left>span{
		min-width: 38px;
		max-width: 38px;
		min-height: 38px;
		max-height: 38px;
		& svg{
			width: 24px;
			height: 24px;
		}
	}
	.dashboard__filter{
		grid-template-columns:1fr;
	}
	.reviews__dashboard .reviews__box .review__reply .double{
		flex-direction:column;
	}
	.reviews__dashboard .reviews__box .review__reply .double>a{
		margin-left: auto;
		margin-top: 10px;
	}
	.reviews__dashboard .reviews__filter form .double__field{
		flex-direction:column;
		&>div:nth-child(1){
			margin-bottom: 10px;
			margin-right: 0px;
		}
	}
	.reviews__dashboard .reviews__box .list>.elem>.top{
		flex-direction:column-reverse;
	}
	.reviews__dashboard .reviews__box .list>.elem>.top .author{
		width: 100%;
		margin-right: 0px;
		margin-top: 10px;
	}
	.reviews__dashboard .reviews__box .list>.elem>.top>a{
		margin-left: auto;
	}
}