@import "variables";
.orderFeedback {
	.orderFeedback__head {
		margin-bottom: 24px;
		font-size: 14px;
		h1 {
			margin-bottom: 0;
			font-size: 34px;
			font-weight: bold;
			line-height: 1.25;
			@media (max-width: 767px){
				font-size: 22px;
			}
		}
		.description {
			padding-top: 4px;
		}
	}
	.orderFeedback__body {
		padding-bottom: 24px;
	}

	.orderFeedback-rate {
		background: $color_gray_05;
		border: 2px solid $color_gray_05;
		margin-bottom: 16px;
		@media(min-width: 767px) {
			margin-bottom: 24px;
		}
		padding: 16px;
		&.warning {
			border-color: $color_red;
		}
		.orderFeedback-rate__intro {
			position: relative;
			overflow: hidden;
			font-size: 18px;
			font-weight: bold;
			line-height: 18px;
			@media(min-width: 767px){
				height: 18px;
			}
		}
		.orderFeedback-rate__title {
			position: relative;
			overflow: hidden;
			height: 40px;
			font-size: 18px;
			font-weight: bold;
		}
		.orderFeedback-rate__stars {
			@media(min-width: 767px){
				padding-bottom: 16px;
			}
		}
	}

	.orderFeedback__form {
		.form__head {
			margin-bottom: 8px;
			font-size: 22px;
			font-weight: bold;
		}
		.form__description {
			margin-bottom: 16px;
		}
		.form-group {
			margin-bottom: 16px;
		}
	}

	.notification {
		//margin-top: 120px;
		margin-top: 40px;
		text-align: center;
		/*@media (max-width: 767px) {
			margin-top: 60px;
		}*/
		.notification__icon {
			margin-bottom: 24px;
			img, svg {
				display: block;
				width: 80px;
				height: 80px;
				margin: 0 auto;
			}
			@media (max-width: 767px) {
				img, svg {
					width: 64px;
					height: 64px;
				}
			}
		}
		.notification__head {
			margin-bottom: 32px;
			font-weight: bold;
			font-size: 34px;
			line-height: 1.25;
			@media (max-width: 767px) {
				font-size: 22px;
			}
		}
		.notification__data {
			width: 300px;
			max-width: 100%;
			margin: 0 auto 32px;
			font-size: 16px;
			text-align: left;
			dt {
				//margin-bottom: 8px;
				font-size: 22px;
				font-weight: bold;
			}
			dd {
				&:not(:first-child){
					margin-top: 8px;
				}
				.pull-right {
					font-weight: bold;
				}
				.message {
					font-size: 14px;
				}
			}
		}
		.notification__like {
			max-width: 300px;
			margin: 0 auto 48px;
			padding: 16px;
			@include box-shadow(0 2px 7px 0 rgba(0,0,0,0.15));
			@include border-radius(4px);
			.title {
				font-size: 16px;
				font-weight: bold;
				color: $blue;
			}
			.description {
				font-size: 12px;
			}
			.button {
				&:not(:first-child){
					margin-top: 16px;
				}
			}
		}
		.notification__action {
			font-size: 16px;
			.btn {
				&.btn-lg {
					min-width: 175px;
				}
			}
		}
		a {
			border-bottom-color: transparent;
			&:hover {
				border-bottom-color: $blue;
			}
		}
	}
}

//rate-stars
.rate-stars {
	position: relative;
	overflow: hidden;
	display: block;
	max-width: 400px;
	@media(min-width: 992px){
		max-width: 250px;
	}
	span {
		//background: url(../images/rate-stars.png) no-repeat 0 0 / 100% auto;
		background: url(../images/temp/i-starEmpty.png) no-repeat 0 0 / 100% auto;
		display: block;
		float: left;
		width: 20%;
		img {
			display: block;
			width: 100%;
		}
		&.active {
			//background-position: left bottom;
			background: url(../images/temp/i-starFull.png) no-repeat 0 0 / 100% auto;
		}
	}
	&:not(.disabled){
		span {
			&.hover {
				//background-position: left bottom !important;
				background: url(../images/temp/i-starFull.png) no-repeat 0 0 / 100% auto !important;
			}
			&:hover {
				cursor: pointer;
			}
		}
	}
	&:hover {
		span {
			&.active {
				background-position: 0 0;
			}
		}
	}
}