.post-users-rating { display: block; font-size: 15px; } .post-users-rating .rc-rating { display: block; } @media (max-width: 550px) { .post-users-rating .rc-rating { margin: 10px auto; } } .post-users-rating .rating-details { width: 220px; color: #256de3; margin: 10px 0; font-size: 15px; } @media (max-width: 550px) { .post-users-rating .rating-details { margin: 10px auto; } } .post-users-rating .rating-details-line { display: table; width: 100%; margin: 0 0 5px; } .post-users-rating .rating-detail-th, .post-users-rating .rating-detail-slider, .post-users-rating .rating-detail-value { display: table-cell; line-height: 13px; } .post-users-rating .rating-detail-th { width: 50px; } .post-users-rating .rating-detail-slider { background: #f4f7f8; width: 123px; position: relative; border-radius: 6px; } .post-users-rating .rating-detail-slider .value { overflow: hidden; width: 10%; position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; } .post-users-rating .rating-detail-slider .value:after { content: ''; display: block; width: 100%; height: 13px; background: -moz-linear-gradient(left, rgba(37,109,227,0.1) 0%, rgb((37,109,227,1) 100%); background: -webkit-linear-gradient(left, rgba(37,109,227,0.1) 0%,rgb((37,109,227,1) 100%); background: linear-gradient(to right, rgba(37,109,227,0.1) 0%,rgb((37,109,227,1) 100%); } .post-users-rating .rating-detail-value { width: 40px; text-align: right; } .submit-rating .submit-rating-label { display: inline-block; font-size: 15px; width: 70px; vertical-align: middle; font-weight: 700; } .submit-rating-stars { width: 130px; height: 28px; position: relative; display: inline-block; vertical-align: middle; } .submit-rating-stars:before, .submit-rating-stars span:before, .submit-rating-stars:after { font-family: star; font-size: 20px; letter-spacing: 5px; top: 0; left: 0; position: absolute; } .submit-rating-stars:before, .submit-rating-stars:after { content: "\53\53\53\53\53"; color: #e2e2e2; } .submit-rating-stars:after { color: #256de3; opacity: 1; transition: opacity .2s; } .submit-rating-stars span:before { color: #256de3; opacity: 0; transition: opacity .2s; } .submit-rating-stars span { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; cursor: pointer; } .submit-rating-stars span:nth-child(1) { width: 25px; z-index: 5; } .submit-rating-stars span:nth-child(1):before { content: "\53"; } .submit-rating-stars span:nth-child(2) { width: 50px; z-index: 4; } .submit-rating-stars span:nth-child(2):before { content: "\53\53"; } .submit-rating-stars span:nth-child(3) { width: 75px; z-index: 3; } .submit-rating-stars span:nth-child(3):before { content: "\53\53\53"; } .submit-rating-stars span:nth-child(4) { width: 100px; z-index: 2; } .submit-rating-stars span:nth-child(4):before { content: "\53\53\53\53"; } .submit-rating-stars span:nth-child(5) { width: 125px; z-index: 1; } .submit-rating-stars span:nth-child(5):before { content: "\53\53\53\53\53"; } .submit-rating-stars span:hover:before, .submit-rating-stars span.active:before { opacity: 1; } .submit-rating-stars:hover:after, .submit-rating-stars.voted:after { opacity: 0; visibility: hidden; } .rating-modal .submit-rating-stars:after { display: none; } .submit-rating-stars.voted span:hover { opacity: 0; } .submit-rating-stars.voted span.active:hover { opacity: 1; } .rating-modal { position: fixed; z-index: 999999; display: none; } .rating-modal, .rating-modal .overlay { top: 0; bottom: 0; left: 0; right: 0; } .rating-modal .overlay { position: absolute; background: rgba(29, 29, 29, 0.5); } @media (max-width: 643px) { .rating-modal { top: 0; transition: all .2s; } } .rating-modal .modal-body { width: 580px; min-height: 300px; margin: 180px auto; padding: 50px 100px; background: #ffffff; border-radius: 8px; position: relative; } @media (max-width: 643px) { .rating-modal .modal-body { width: auto; margin: 0; padding: 50px 6%; border-radius: 0; height: 100%; } .rating-modal .modal-body .additional-information { padding-left: 20px; padding-right: 20px; margin: 0 -20px 40px; } .rating-modal .modal-body .response { padding: 100px 50px; } } .rating-modal .modal-body .close { position: absolute; display: block; top: 0; right: 0; margin: 15px; width: 20px; height: 20px; z-index: 10; } .rating-modal .modal-body .close:before, .rating-modal .modal-body .close:after { content: ''; position: absolute; margin: --.5px -14px; top: 50%; left: 50%; height: 1px; width: 28px; background: #256de3; } .rating-modal .modal-body .close:hover:before, .rating-modal .modal-body .close:hover:after { background: #2560c1; } .rating-modal .modal-body .close:before { transform: rotate(45deg); } .rating-modal .modal-body .close:after { transform: rotate(-45deg); } .rating-modal .additional-information { margin: 0 -100px 40px; padding: 25px 100px 5px; background: #efefef; color: #666; text-align: center; } .rating-modal .additional-information p:before { display: none; } .rating-modal .additional-information input { border-color: #bbb; padding: 0; height: 35px; padding-left: 10px; width: 69%; } .rating-modal .submit-rating { text-align: center; margin-bottom: 20px; margin-top: -4px; } .rating-modal .submit-rating .submit-rating-label { width: auto; margin: 8px 6px 0; } .rating-modal .comment-form-author, .rating-modal .comment-form-email { position: relative; } .rating-modal .comment-form-email:before { display: block; position: absolute; top: 0; left: 0; height: 46px; width: 40px; background: transparent center center no-repeat; } .rating-modal .comment-form-author { position: relative; } .rating-modal .comment-form-email { position: relative; } .rating-modal .comment-form-email:before { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAYAAADphp8SAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1MEY3NDcyNEMzNDFFNjExQjU4QkJEMkUzMDFDQ0VFNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NjVENTg2RDZERDUxMUU2OTRGNjg0NDQyQkRFMTI5QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NjVENTg2QzZERDUxMUU2OTRGNjg0NDQyQkRFMTI5QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM3ZjAyNDE0LWM5ZDAtNGVkMC1iNjRjLTRiYzFjNzY5MGU3ZCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmNlYzk4ZmMzLWE0M2YtMTE3OS1iMzgwLWU4MTAwZTMzODI4NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQMNGYAAAD4SURBVHjaYlHNfVzOwMDQDMSsDOSBb0BcxQg06AOQwc9AGfjGBCQ+MFAOHoEMqqKCQY0gg1YCcR4Q/ybDAJCeHCBeDTJoCRDPBWI7IH5AgiH3oXrmA/FSkEERQHwKiL8AsSEQryXCkDVAbATVcxqIw5mgEtpAfBKIw25NkgkB0tlA/AOLASCxTKCaUJBmqCFaIAlQ9P9HU7wKiFOBWAkafmpQ8VtQzSDvzwbiEGRNTFhsDQPiC0DMAvVqDtSFBkDMDsTn0A1hgCrGBhSB+CgQTwHieVCxVqihWHMANq+RBZgYqARABn2lgjngvFaPI6qJBd9BWQQgwADsZDd177l62gAAAABJRU5ErkJggg=="); } .rating-modal .submit-line { margin-bottom: -5px; } .rating-modal input { width: 100%; height: 46px; padding: 10px 10px 10px 20px; border-radius: 4px; box-sizing: border-box; } .rating-modal button { display: inline-block; width: 100%; height: 40px; border-radius: 20px; border: none; outline: none; cursor: pointer; background: #256de3; color: #fff; font-size: 13px; text-transform: uppercase; transition: all .2s; padding: 3px 5px 4px; } .rating-modal button:hover { background: #2560c1; } .rating-modal .response { display: none; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.92); z-index: 5; font-size: 19px; font-weight: 700; padding: 100px; } .rating-modal .response.active i { display: inline-block; position: absolute; top: 50%; left: 50%; color: #256de3; font-size: 13px; text-indent: -99999em; width: 10em; height: 10em; margin-left: -65px; margin-top: -65px; box-shadow: inset 0 0 0 1em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); border-radius: 50%; } .rating-modal .response.active i:before, .rating-modal .response.active i:after { content: ''; position: absolute; border-radius: 50%; } .rating-modal .response.active i:before { width: 5.2em; height: 10.2em; background: #fff; border-radius: 10.2em 0 0 10.2em; top: --.1em; left: --.1em; -webkit-transform-origin: 5.2em 5.1em; transform-origin: 5.2em 5.1em; -webkit-animation: load2 2s infinite ease 1.5s; animation: load2 2s infinite ease 1.5s; } .rating-modal .response.active i:after { width: 5.2em; height: 10.2em; background: #fff; border-radius: 0 10.2em 10.2em 0; top: --.1em; left: 5.1em; -webkit-transform-origin: 0px 5.1em; transform-origin: 0px 5.1em; -webkit-animation: load2 2s infinite ease; animation: load2 2s infinite ease; } @-webkit-keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .rating-modal .success { padding-top: 10px; color: #256de3; } .rating-modal .error { padding-top: 10px; color: #f04860; } .text-center { text-align: center; } .pulse { animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 0.9; } 50% { transform: scale(0.99); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.9; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.9; } 50% { -webkit-transform: scale(0.99); opacity: 0.9; } 100% { -webkit-transform: scale(0.95); opacity: 0.9; } } .pulse:after { animation-name:pulse1; -webkit-animation-name:pulse1; animation-duration:1.5s; -webkit-animation-duration:1.5s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite } @keyframes pulse1 { 0% { opacity: 0; } 50% { opacity: 0.4; } 100% { opacity: 0; } } @-webkit-keyframes pulse1 { 0% { opacity: 0; } 50% { opacity: 0.4; } 100% { opacity: 0; } }