.mic-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 100px;
}
.mic-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}
.mic-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #aaa;
}
.mic-Score.disabled * {
  cursor: not-allowed;
}
.mic-Score {
  color: #666;
  font-size: 14px;
}
.mic-Score .items {
  display: block;
}
.mic-Score .starGroup {
  display: inline-block;
}
.mic-Score .starGroup > label {
  position: relative;
  display: inline-block;
  float: right;
  width: 15px;
  height: 14px;
  margin-right: 10px;
  color: transparent;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAABAUlEQVQokZ3SsSvFURjG8Y+LgU02y+1mMbARyqB3MDIa/AM2Isl2ZbApq+KfMHvTTRlkk8Hys4uSUWJw6Xb9rhvPdJ5z3u/7nN5zeur1ujJFROAUi5l5VlZTKSU/tYtBlHfvBEfEPOaadi4iZv+SvNPmt8uK+ppJQ5jAOKax0Fa3FBHHuMItbjLzqafRaFxipsMNftN1BcU/QLivYAWbePsDeIDl3mq1qiiKy1qtdo4lDPwCvWM1M/eLonj/nnZmNnDRJfEuM4++TPtTTXaBRyOi/wccESMY6QL3Yawseapl/YwtDGMdDy1nE62dvvSKF5xgLzMfm/uHzQ+ygTWfQwMf0pNAi4GpbOIAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-size: cover;
}
.mic-Score .starGroup.readOnly > input:checked ~ label {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAABEElEQVQokZ3SMS9DURjG8V+LgU1sYmkYDGzElUi4BiOjwWSzESJiur0x2CRWCV/CYpGrIulNxCYGC0M3IRGjSA0taeq2TT3Tec55/+9z8p6TKxaLshQFySLOsRyn4WVWTT6TrCnGALK7t4KjIFnAXN3ORUEy203yfpPfyyrqrScNYhITmMFSU91KFCSnuMUD7uM0fMtVL+bLCFrcoJ3u8nj6BwjPeaxhB19dgEdY7cmNrStVCuWFkecrrKC/DVTFRpyGh6VKofo77TgNr3HTIfExTsOTH9P8VFMd4NEoSPr+wFGQDGO4A9yL8azk6Yb1O3YxhC28NJxNNnb60Sc+cIaDOA1f6/vH9Q+yjU21oYFveoxA7x6+qdIAAAAASUVORK5CYII=);
}
.mic-Score .starGroup.default > input:checked ~ label,
.mic-Score .starGroup.default > input:focus ~ label,
.mic-Score .starGroup.default > input:hover ~ label {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAABEElEQVQokZ3SMS9DURjG8V+LgU1sYmkYDGzElUi4BiOjwWSzESJiur0x2CRWCV/CYpGrIulNxCYGC0M3IRGjSA0taeq2TT3Tec55/+9z8p6TKxaLshQFySLOsRyn4WVWTT6TrCnGALK7t4KjIFnAXN3ORUEy203yfpPfyyrqrScNYhITmMFSU91KFCSnuMUD7uM0fMtVL+bLCFrcoJ3u8nj6BwjPeaxhB19dgEdY7cmNrStVCuWFkecrrKC/DVTFRpyGh6VKofo77TgNr3HTIfExTsOTH9P8VFMd4NEoSPr+wFGQDGO4A9yL8azk6Yb1O3YxhC28NJxNNnb60Sc+cIaDOA1f6/vH9Q+yjU21oYFveoxA7x6+qdIAAAAASUVORK5CYII=);
}
.mic-Score .starGroup.default > label {
  cursor: pointer;
}
.mic-Score .starGroup > input {
  position: absolute;
  margin-right: -100%;
  opacity: 0;
}
.mic-Score.square .starGroup {
  vertical-align: text-bottom;
  display: inline-block;
}
.mic-Score.square .items {
  display: block;
  line-height: 20px;
  margin-bottom: 10px;
}
.mic-Score.square .starGroup > label {
  width: 20px;
  height: 20px;
  background: none;
  background-color: #c2c2c2;
  border-radius: 3px;
}
.mic-Score.square .starGroup.readOnly > input:checked ~ label {
  background: none;
  background-color: #03b3b3;
}
.mic-Score.square .starGroup.default > input:checked ~ label,
.mic-Score.square .starGroup.default > input:focus ~ label,
.mic-Score.square .starGroup.default > input:hover ~ label {
  background: none;
  background-color: #03b3b3;
}