.content{
    width: 100%;
    float: left;
    margin-top: 20px;
}

/* Invoice Feedback Rating start */
.rate {
    float: left;
    height: 46px;
    text-align: left;
}
.rate:not(:checked) > input {
    position:absolute;
    /*top:-9999px;*/
    display: none;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:40px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    /*content: '★ ';*/
    content: "\2605";
}
.rate > input:checked ~ label, .rate input[checked="checked"] ~ label {
    color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.rateUser {
    float: left;
    height: 46px;
    text-align: left;
}
.rateUser:not(:checked) > input {
    position:absolute;
    /*top:-9999px;*/
    display: none;
}
.rateUser:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:40px;
    color:#ccc;
}
.rateUser:not(:checked) > label:before {
    /*content: '★ ';*/
    content: "\2605";
}
.rateUser > input:checked ~ label, .rateUser input[checked="checked"] ~ label {
    color: #ffc700;
}
.rateUser:not(:checked) > label:hover,
.rateUser:not(:checked) > label:hover ~ label {
    color: #deb217;
}
.rateUser > input:checked + label:hover,
.rateUser > input:checked + label:hover ~ label,
.rateUser > input:checked ~ label:hover,
.rateUser > input:checked ~ label:hover ~ label,
.rateUser > label:hover ~ input:checked ~ label {
    color: #c59b08;
}
/* Invoice Feedback Rating End */


/* Ticket Service Rating start */
.rateTicket {
    float: left;
    height: 46px;
    text-align: left;
}
.rateTicket:not(:checked) > input {
    position:absolute;
    /*top:-9999px;*/
    display: none;
}
.rateTicket:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:40px;
    color:#ccc;
}
.rateTicket:not(:checked) > label:before {
    /*content: '★ ';*/
    content: "\2605";
}
.rateTicket > input:checked ~ label, .rateTicket input[checked="checked"] ~ label {
    color: #ffc700;
}
.rateTicket:not(:checked) > label:hover,
.rateTicket:not(:checked) > label:hover ~ label {
    color: #deb217;
}
.rateTicket > input:checked + label:hover,
.rateTicket > input:checked + label:hover ~ label,
.rateTicket > input:checked ~ label:hover,
.rateTicket > input:checked ~ label:hover ~ label,
.rateTicket > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

/* Rate user permission  */
.rateTicketPermission {
    float: left;
    height: 46px;
    text-align: left;
}
.rateTicketPermission:not(:checked) > input {
    position:absolute;
    /*top:-9999px;*/
    display: none;
}
.rateTicketPermission:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:40px;
    color:#ccc;
}
.rateTicketPermission:not(:checked) > label:before {
    /*content: '★ ';*/
    content: "\2605";
}
.rateTicketPermission > input:checked ~ label, .rateTicketPermission input[checked="checked"] ~ label {
    color: #ffc700;
}
.rateTicketPermission:not(:checked) > label:hover,
.rateTicketPermission:not(:checked) > label:hover ~ label {
    color: #deb217;
}
.rateTicketPermission > input:checked + label:hover,
.rateTicketPermission > input:checked + label:hover ~ label,
.rateTicketPermission > input:checked ~ label:hover,
.rateTicketPermission > input:checked ~ label:hover ~ label,
.rateTicketPermission > label:hover ~ input:checked ~ label {
    color: #c59b08;
}
/* Ticket Service Rating End */

/* Rating Dashboard start */
.rateDashboard {
    float: left;
    height: 46px;
    text-align: left;
}
.rateDashboard:not(:checked) > input {
    position:absolute;
    /*top:-9999px;*/
    display: none;
}
.rateDashboard:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:40px;
    color:#ccc;
}
.rateDashboard:not(:checked) > label:before {
    /*content: '★ ';*/
    content: "\2605";
}
.rateDashboard > input:checked ~ label, .rateDashboard input[checked="checked"] ~ label {
    color: #ffc700;
}
.rateDashboard:not(:checked) > label:hover,
.rateDashboard:not(:checked) > label:hover ~ label {
    color: #deb217;
}
.rateDashboard{
    pointer-events: none;
}
.rateDashboard > input:checked + label:hover,
.rateDashboard > input:checked + label:hover ~ label,
.rateDashboard > input:checked ~ label:hover,
.rateDashboard > input:checked ~ label:hover ~ label,
.rateDashboard > label:hover ~ input:checked ~ label {
    color: #c59b08;
}
/* Rating Dashboard End */

.overall-rating{
    width: 100%;
    float: left;
    font-size: 14px;
    margin-top: 5px;
    color: #8e8d8d;
}

.statusMsg{
    font-size: 16px;
    padding: 10px !important;
    border: 1.5px dashed;
}
.statusMsg.errordiv{
    color: #ff4040;
}
.statusMsg.succdiv{
    color: #00bf6f;
}

/* Ratings Invoice */
.ratemsg {
    animation: fadeOut 2s forwards;
    animation-delay: 5s;
    background: mediumseagreen;
    color: white;
    padding: 10px;
    text-align: center;
    margin-left: 210px;
}
/* Ratings ticket */
.ratemsgticket {
    animation: fadeOut 2s forwards;
    animation-delay: 5s;
    background: mediumseagreen;
    color: white;
    padding: 10px;
    text-align: center;
    margin-left: 210px;
}




@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeIn {
    from {opacity: 1;}
    to {opacity: 0;}
}

#ratings{
    margin-top: -75px;
}

.heightref valignmiddle centpercent{
    margin-top: 61px;
}
/* Feedback Rating end */

/* User Satisfaction Level Start */

/* User Satisfaction Level End */