.amt-rating-container {
  position: relative; }
  .amt-rating-container:focus ul, .amt-rating-container:hover ul {
    transform: scale(1);
    opacity: 1; }
  .amt-rating-container ul {
    list-style: none;
    position: absolute;
    padding: 0 20px 30px 20px !important;
    color: #09c;
    background: #fafafa;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    transition: all .25s;
    transform: scale(0);
    opacity: 0;
    z-index: 10;
    width: calc( 130px * 2); }
    .amt-rating-container ul.top {
      top: -175px;
      left: calc(50% - 130px); }
    .amt-rating-container ul.bottom {
      top: 35px;
      left: calc(50% - 130px); }
    .amt-rating-container ul li {
      height: 25px; }
      .amt-rating-container ul li .fa {
        font-size: 16px; }
        .amt-rating-container ul li .fa.fa-inner {
          position: relative;
          display: inline-block;
          vertical-align: middle; }
        .amt-rating-container ul li .fa.fa-under {
          overflow: hidden;
          position: absolute;
          top: 0;
          left: 0;
          pointer-events: none; }
      .amt-rating-container ul li .progress {
        display: inline-grid;
        vertical-align: middle;
        height: 20px;
        width: 150px;
        position: relative;
        background: #333;
        background: -webkit-linear-gradient(#ccc, #eee);
        background: -moz-linear-gradient(#ccc, #eee);
        background: -o-linear-gradient(#ccc, #eee);
        background: linear-gradient(#ccc, #eee);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); }
      .amt-rating-container ul li .progress:before {
        content: attr(data-label);
        font-size: 0.8em;
        position: absolute;
        text-align: center;
        color: #000;
        top: 2px;
        left: 0;
        right: 0; }
      .amt-rating-container ul li .progress .value {
        background-color: #7CC3FF;
        display: inline-block;
        height: 100%; }