@import 'fonts';
@import 'vars';
hr + hr{
	display:none;
}
.px-rating{
	margin:0px !important;
	padding:0px !important;
	& .rating-list.rated{margin:0 auto;}
	& li{margin:0px; padding:0px;}
	& *{
		pointer-events:auto!important;
	}
	& .reviewsCount {
		cursor:pointer;
		&:hover{
			text-decoration:underline;
		}

		& span, & label{
			float:left;
		}
		& span {margin-left:5px;}
		&:after{
			content:""; display:block; clear:both;
		}
	}
	& + hr{
		margin:10px 0px!important;
	}
}

.px-post-review-wrapper{
	& ul{
		padding:0px!important;
		margin:0px!important;
		& li {padding:0px!important;margin:0px!important;}
	}
    display:none;
    box-sizing:border-box;
    position:absolute; top:0; left:0;
    max-width:600px; width:70%;
    z-index:889;
    margin-top:25px;
    font-family:$openSansRegular;

    & .px-review-box{
        box-sizing:border-box;
        position:relative;
        height:300px;
        background:white;
        box-shadow: -1px 0px 8px -2px rgba(46, 46, 46, 0.5);
        
        &:before{
            
            content:"";
            display:block;
            position:absolute;
            right:0; top:0; margin-right:15px; margin-top:-14px;
            background:transparent; 
            width:0px; height:0px;
            border-left: 15px solid transparent;
            border-top: 0px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 15px solid white;
             
        }
        &:after{content:""; display:block; clear:both;}
        width:100%;

        & textarea{ 
            box-sizing:border-box;
            margin:5px 2%;
            margin-top:0px; padding-top:0px;
            padding-left:0px;
            width:96%;
            box-sizing:border-box;
            border:0px; outline:0px;
            color:#9e9e9e;
            font-family:$openSansLight;
            font-size:15px;
            height:165px;
        }

        & #px-review-error-msg{
            display:block; width:96%; margin-left:2%;
            color:red;
            height:20px;
            font-size:12px; line-height:20px;
            font-family:$openSansRegular;
        }

        & input[type="text"] {
            width:40%;
            height:40px;
            line-height:40px;
            outline:none; border:1px solid #e0e0e0;
            float:left;
        }

        & input[name="email-address"]{
            border-right:0px;
        }

        & button{
			padding:0px;
            width:20%; 
            height:40px;
            line-height:40px;
            display:block;
            background:#4386f4;
            outline:none; border:none;
            float:left;
            font-family:$openSansRegular;
            color:white; 
            position:relative; z-index:10;
			font-size:14px;
			text-transform:capitalize;
        }

    }

    & .px-review-headline{
        padding-top:1px;
        position:relative;
        & hr{
            display:block;
            background:#e0e0e0;
            border:none; outline:none; height:1px; width:72%;
            margin:17px 0px;
			margin-left:2%;

        }
        & #px-review-close-lightbox{
            cursor:pointer; 
            position:absolute; top:0; right:0;
            margin-top:15px; margin-right:15px;
            font-size:15px; font-weight:500;
            font-family:$openSansRegular;
            color:#9e9e9e;

        }
        & .review-headline-title{
            width:60%; display:block;
            margin-left:2%; margin-top:10px;
            font-size:24x; color:#424242;
            
			& span{
				display:block; float:left;
			}
			&:after{
				content:""; display:block; clear:both;
			}
			& label{ color:#4386f4; display:block; float:left; margin-left:5px;} 
            
        }
    }
}
.px-reviews-container{
	& p{
		margin:0px!important;
		padding:0px!important;
	}
}
.px-reviews-replies-list{
	
	& ul{
		padding:0px!important;
		margin:0px!important;
		& li { padding:0px!important; }
	}

    background:#f5f5f5;
    margin:0px;
    padding:25px;
    margin-top:70px;
	&.inactive{background:none;}
    & .px-user-review{margin-top:20px;}
    
    & h2{
        color:#424242;
        font-family:$openSansRegular;
        font-size:18px; line-height:20px;    
    }
    & hr{
        border-top: 1px solid #e0e0e0;
        margin-top:8px;
    }

    & .review-headline{
        
        position:relative;
		&:after{content:""; display:block; clear:both;}
        & label.date{
            position:absolute; right:0; top:0;
            color:#808080;
            font-family:$openSansRegular;
            font-size:14px; 
            margin-top:13px;
            
        }

        & strong{
            font-family:$openSansRegular;
            font-size:15px;
            color:#4386f4;
			display:block; float:left; margin-top:11px;
			line-height:20px;
        }
        &:after{
            display:block; content:"";
            clear:both;
        }
        & .px-rating{margin:0px; width:106px; margin-top:3px; margin-left:15px;}
        & > * {
            float:left;
            display:block;

        }

    }

    & .review-body{
        margin-top:5px;
        border:1px solid #e0e0e0;
        -webkit-border-radius: 2px;
           -moz-border-radius: 2px;
            -ms-border-radius: 2px;
             -o-border-radius: 2px;
                border-radius: 2px;
        background:white;
        box-sizing:border-box;
        padding:17px 22px;
        font-family:$openSansRegular;
        font-size:14px; line-height:16px;
        color:#848484;
    }

    & .px-replies{ text-align:right; }
    & .px-submit-reply{
		display:block;
        margin-left:auto; margin-right:0px;
        border:0px; outline:none; 
        color:white; 
        font-family:$openSansRegular;
        font-size:14px;
        background:#4386f4;
        width:120px; height:25px; text-align:center; 
        line-height:25px;
        cursor:pointer;
        padding:0px;
        position:relative; 
        z-index:9;
    }

    & .px-reply{
        text-align:left;
        width:70%; 
        box-sizing:border-box; 
        padding:10px 22px; 
        border:1px solid #e0e0e0;
        -webkit-border-radius: 2px;
           -moz-border-radius: 2px;
            -ms-border-radius: 2px;
             -o-border-radius: 2px;
                border-radius: 2px;
        background:white;
        margin-left:auto; margin-right:0px;
        margin-top:15px;
        font-family:$openSansRegular;
        font-size:14px; line-height:16px;
        color:#848484;
        position:relative;

        & .username{
            display:block; position:absolute; left:0; top:0;
            height:50%; margin-left:-43%;
            width:43%;
            font-size:15px; font-family:$openSansRegular;
            color:#4386f4;
            & span{
                position:absolute; right:0; bottom:0; margin-bottom:2px;
                margin-right:5px;
            }
        }
        & .date{
            display:block; position:absolute; left:0; top:50%;
            height:50%; margin-left:-43%; width:43%;
            margin-top:2px;
            padding-right:5px;
            font-size:12px;
            text-align:right;
        }

        &:after{    
            content:""; display:block;
            width:50%; height:1px; background:#e0e0e0;
            position:absolute; left:0; top:50%;
            margin-left:-50%;
            
        }

        &.last-reply:before{
            content:""; display:block; 
            position:absolute; left:0; top:50%;
            width:30%;
            margin-left:-65%;
            background:#f5f5f5;
            height:100%;
        }
       
    }

    & .px-replies-wrapper{
        
        margin-top:-25px; padding-top:25px;
        margin-left:auto; margin-right:0px;
        width:90%;
        position:relative;
        overflow:hidden;
        
        &:after{

            content:""; display:block; position:absolute;
            left:0; top:0;
            width:1px; height:100%; 
            background:#f5f5f5; z-index:9;

        }


        &:before{
            content:""; display:block; position:absolute;left:0; top:0;
            width:1px; height:100%; margin-left:1px;
            background:#e0e0e0;
        }

        &.no-replies:before{
            display:none;
        }


    }

}
ul.rating{margin-left:15px;}
ul.px-rating{margin-left:5px!important;}
ul.additional-info{
	overflow:hidden;
	margin:0px!important;
	& + hr{
		margin:5px 0px!important;
	}
	& .px-rating > li{
		display:block;
		margin:0px;
		margin-top:7px;
	}
	& > li{
		display:block;
		position:relative; 
		width:49%; margin-left:1%;
		float:left;
		text-align:center;
		&:first-child:after{
			content:"";
			display:block; 
			position:absolute;
			right:0; top:0; margin-right:2px;
			width:1px; 
			height:100%; margin-top:1%;
			background:#eeeeee;
		}
		& strong{
			font:normal normal 24px/26px $openSansSemibold;
			color:#424242;
			display:block; 
			text-align:center;
			margin-top:14px;
		}
		& span{
			font:normal normal 13px/15px $openSansRegular;
			word-wrap:normal;
			display:block;
			clear:both;
		}
	}
}
.rating{
	
	& + hr{
		margin:5px 0px;
	}
    color:#616161;
    font:normal normal 0.9em/18px $openSansLight;
    margin:10px 10px; padding:0px;
	&:after{content:""; display:block; clear:both;}
    & > li{
        display:block;
		float:left;
		height:20px;
        margin-right:3%;
		font-size:16px; line-height:30px;
		margin-top:7px!Important;
    }
    & .rating-list{ 
		padding:0px;
		width: 87px;
    	margin: 0 auto!important;
		& *{
			pointer-events:auto!important;
		}
		margin-left:0px; padding-left:0px; cursor: pointer;
		&:after{
			display:block; content:""; clear:both;
		} 
	}
    & .rating-list li{
		line-height:20px;
        display:block;
		float:left; 
		margin-left:0px;
        width:16px; height:30px;
        background:url("images/rating-schema/icons/default-stars.png") no-repeat;
		background-position:center;
		
		-webkit-transition:0.4s background;
		   -moz-transition:0.4s background;
		    -ms-transition:0.4s background;
		        transition:0.4s background;
    }
    & .rating-list li.active{
        background:url("images/rating-schema/icons/default-stars-active.png") no-repeat;
		background-position:center;

		-webkit-transition:0.4s background;
		   -moz-transition:0.4s background;
		    -ms-transition:0.4s background;
		        transition:0.4s background;
    }
	& .rating-list li.half-active{
		background:url("images/rating-schema/icons/default-stars-half-active.png") no-repeat;
		background-position:center;

		-webkit-transition:0.4s background;
		   -moz-transition:0.4s background;
		    -ms-transition:0.4s background;
		        transition:0.4s background;
	}

}
ul.additional-info{
	& .px-rating{
		margin:0 auto!important;
		max-width:106px;
		& > li{float:none;}
	}
}

$class-slug: 'like-scheme';
@for $i from 1 through 14 {
	.#{$class-slug}-#{$i} {
		& .rating-list{
			width:106px;
		}
		& .rating-list li{
			width:20px;
			background:url("images/rating-schema/icons/like-scheme-#{$i}.png") no-repeat;
			background-size:90%;
			background-position:center;
		}
		
		& .rating-list li.active{
			background:url("images/rating-schema/icons/like-scheme-#{$i}-active.png") no-repeat;
			background-size:90%;
			background-position:center;
		}
		& .rating-list li.half-active{
			background:url("images/rating-schema/icons/like-scheme-#{$i}-half-active.png") no-repeat;
			background-size:90%;
			background-position:center;
		}
	}
}


@media ( max-width:1200px ){

    .px-post-review-wrapper{
        max-width:500px;
    }

}