/*	Rating Background Layer	*/
.RatingBackgroundLayer {
  position: relative;
  display: inline-block;
  visibility: visible;
  width: 80px;
  max-width: 80px;
  height: 12px;
  max-height: 12px;
  background-color: transparent;
}

.RatingBackgroundLayerLarge {
  width: 100px;
  max-width: 100px;
  height: 15px;
  max-height: 15px;
}

.RatingBackgroundLayerWhite {
  background-color: var(--rating-bg-white);
}

.RatingBackgroundLayerGrey {
  background-color: var(--rating-bg-grey);
}

/*	Rating Spreading Layer	*/
.RatingSpreadingLayer {
  overflow: hidden;
  position: absolute;
  left: 0px;
  border: none;
  height: inherit;
  max-height: inherit;
  display: block;
  float: left;
  visibility: visible;
}

.RatingBackgroundLayer .RatingSpreadingLayer {
  background-color: var(--rating-spreading-layer);
}

.RatingBackgroundLayer:hover .RatingSpreadingLayer,
.RatingBackgroundLayer .RatingSpreadingLayer:hover {
  background-color: var(--rating-spreading-layer-hover);
}

.RatingBackgroundLayer.ReadOnly .RatingSpreadingLayer,
.RatingBackgroundLayer.ReadOnly:hover .RatingSpreadingLayer,
.RatingBackgroundLayer.ReadOnly .RatingSpreadingLayer:hover {
  background-color: var(--rating-spreading-layer-readonly);
}

.EntityBox .RatingBackgroundLayer.ReadOnly .RatingSpreadingLayer,
.EntityBox .RatingBackgroundLayer.ReadOnly:hover .RatingSpreadingLayer,
.EntityBox .RatingBackgroundLayer.ReadOnly .RatingSpreadingLayer:hover {
  background-color: var(--rating-spreading-layer-readonly-hover);
}

/*	Rating Image Layer	*/
.RatingBackgroundLayer .RatingImageLayer {
  width: inherit;
  max-width: inherit;
  height: inherit;
  max-height: inherit;
  left: 0px;
  display: block;
  float: left;
  visibility: visible;
  cursor: pointer;
}

.RatingBackgroundLayer.ReadOnly .RatingImageLayer {
  cursor: default !important;
}

.RatingBackgroundLayer .RatingImageLayer svg.RatingDot {
  width: 20%;
  height: calc(100% + 1px);
  top: -1px;
  display: block;
  float: left;
  position: relative;
  margin: 0px;
}

/*.RatingBackgroundLayerLarge .RatingImageLayer .RatingDot{
	height: 16px;
}*/
.RatingImageLayer svg.RatingDot .IconSVG.Frame {
  fill: var(--rating-dot-frame);
}

.RatingImageLayer.RatingDotFrameWhite svg.RatingDot .IconSVG.Frame {
  fill: var(--rating-dot-white-frame);
}

.RatingImageLayer svg.RatingDot .IconSVG.Cover {
  fill: var(--rating-dot-cover);
}

/*.EntityBox .RatingImageLayer:hover{ cursor:pointer; }*/
.EntityBox .RatingImageLayer svg.RatingDot .IconSVG.Cover {
  fill: var(--rating-entity-dot-cover);
}

.EntityBox:hover .RatingImageLayer svg.RatingDot .IconSVG.Cover {
  fill: var(--rating-entity-dot-cover-hover);
}

.EntityBox.Disabled .RatingImageLayer svg.RatingDot .IconSVG.Cover {
  fill: var(--rating-entity-dot-cover-disabled) !important;
}

.CourseList .CourseListItem .Social .RatingBackgroundLayer.ReadOnly .RatingSpreadingLayer,
.CourseList .CourseListItem .Social .RatingBackgroundLayer.ReadOnly:hover .RatingSpreadingLayer,
.CourseList .CourseListItem .Social .RatingBackgroundLayer.ReadOnly .RatingSpreadingLayer:hover {
  background-color: var(--rating-spreading-layer-readonly);
}

span.RatingSeparator {
  float: left;
  display: block;
  margin-left: 3px;
  margin-right: 2px;
  height: 12px;
  width: 1px;
}

span.RatingSeparatorLargeGrey {
  height: 23px;
  margin-left: 11px;
  margin-right: 10px;
  background-color: var(--rating-separator);
}

span.RatingSeparatorNone {
  display: none;
}

span.RatingTotalCountContainer {
  font-size: 11px;
}

span.TotalRatingsCountWhite {
  color: var(--rating-count-white);
}

span.TotalRatingsCountBlue {
  color: var(--rating-count-blue);
  text-align: left;
}

span.TotalRatingsCountBlack {
  color: var(--rating-count-black);
  margin-right: 8px;
}

span.TotalRatingsCountGrey {
  color: var(--rating-count-grey);
  margin-top: 5px;
  font-size: 12px;
  text-align: right;
  width: auto;
}