ul.ttc-tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.ttc-tabs li {
    border-bottom: solid 3px transparent;
    margin-right: 12px;
    height: 32px;
    display: flex;
    align-items: center;
    transition: all .3s;
    cursor: pointer;
}

ul.ttc-tabs li.active, ul.ttc-tabs li:hover {
    transition: all .3s;
    border-color: red;
}
.ttc-top {
  font-optical-sizing: auto;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 24px 0;
}

.ttc-top .ttc-top-left {
  display: flex;
  width: 40%;
  flex-direction: column;
}

.ttc-top .ttc-top-left .ttc-top-left-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}

.ttc-top .ttc-top-left .ttc-top-left-count {
  text-align: center;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 16px;
}


.ttc-top .ttc-top-left .ttc-top-left-stars {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
}

.ttc-top .ttc-top-left .ttc-top-left-stars .ttc-top-left-star {
  height: 32px;
  width: 32px;
  margin: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color:#f1c40f;
}

.ttc-top .ttc-top-right {
  width: 40%;
  height: 100px;
}

.ttc-top .ttc-top-right .ttc-top-right-item {
  display: flex;
  margin-bottom: 8px;
}

.ttc-top .ttc-top-right .ttc-top-right-item .ttc-top-right-item-stars {
  display: flex;
  align-items: center;
  width: 75px;
  height: 16px;
}

.ttc-top .ttc-top-right .ttc-top-right-item .ttc-top-right-item-stars .ttc-top-right-item-star {
  width: 15px;
  height: 15px;
  font-size: 12px;
  color:#f1c40f;
}

.ttc-top .ttc-top-right .ttc-top-right-item .ttc-top-right-item-stars .ttc-top-right-item-star.passive {
  color: #95a5a6
}

.ttc-top .ttc-top-right .ttc-top-right-item .ttc-top-right-item-percent {
  width: calc(100% - 160px);
  background-color: #eaeaea;
  margin: 0 5px;
  border-radius:4px;
  overflow:hidden;
}
.ttc-top .ttc-top-right .ttc-top-right-item .ttc-top-right-item-text {
  width: 100px;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  color: rgba(33, 38, 171, 1);
}

.ttc-top .ttc-top-right .ttc-top-right-item .ttc-top-right-item-percent .ttc-top-right-item-percent-item {
  height: 100%;
  background: rgba(33, 38, 171, 1);
}
.ttc-comment-box {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    padding: 25px;
    border-radius: 30px;
}

.ttc-comment-box .ttc-comment-box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info {
    display: flex;
    align-items: center;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-stars {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-stars > .ttc-comment-box-star-item {
    filter: grayscale(1);
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-stars .ttc-comment-box-star-fill {
    position: absolute;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-name {
    font-size: 14px;
    font-weight: 700;
    margin-right: 12px;
}

.ttc-comment-box .ttx-comment-box-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 30px;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-badge {
    background-color: #bbdcc4;
    color: green;
    padding: 0 10px;
    line-height: 25px;
    border-radius: 20px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-date {
    color: #333333;
    font-weight: 800;
    font-size: 14px;
}

.ttc-comment-box .ttx-comment-box-content .ttc-comment-box-content-title {
    font-size: 24px;
    font-weight: 800;
    margin-top: 15px;
    margin-bottom: 16px;
}

.ttc-comment-box .ttx-comment-box-content .ttc-comment-box-content-desc {
    color: #333333;
    font-size: 18px;
}
ul.ttc-review-pagination {
    font-optical-sizing: auto;
    font-style: normal;
    width: 100%;
    margin: 24px 0;
    list-style-type: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.ttc-review-pagination>li {
    margin: 0 4px;
      height: 32px;
    width: 32px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #2126AB;
    border: solid 1px #2126AB;
    border-radius: 4px;
    cursor:pointer;
}

ul.ttc-review-pagination>li.disabled{
    opacity: .5;
    cursor: no-drop;
}
ul.ttc-review-pagination>li.current,
ul.ttc-review-pagination>li:hover {
    background: #2126AB;
    color: #fff;
}

ul.ttc-review-pagination>li>svg {
    height: 20px;
    width: 20px;
    fill: #2126AB;
}
ul.ttc-review-pagination>li:hover>svg{
    fill: #fff;
}
.ttc-comment-box {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    padding: 25px;
    border-radius: 30px;
}

.ttc-comment-box .ttc-comment-box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info {
    display: flex;
    align-items: center;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-stars {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-stars > .ttc-comment-box-star-item {
    color:#7f8c8d;
    font-size:24px;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-stars .ttc-comment-box-star-fill {
    position: absolute;
    display: flex;
    align-items: center;
    overflow: hidden;
}


.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-stars .ttc-comment-box-star-fill .ttc-comment-box-star-item{
    color:#f1c40f;
    font-size:24px;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-name {
    font-size: 14px;
    font-weight: 700;
    margin-right: 12px;
}

.ttc-comment-box .ttx-comment-box-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 30px;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-info .ttc-comment-box-badge {
    background-color: #bbdcc4;
    color: green;
    padding: 0 10px;
    line-height: 25px;
    border-radius: 20px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.ttc-comment-box .ttc-comment-box-title .ttc-comment-box-date {
    color: #333333;
    font-weight: 800;
    font-size: 14px;
}

.ttc-comment-box .ttx-comment-box-content .ttc-comment-box-content-title {
    font-size: 24px;
    font-weight: 800;
    margin-top: 15px;
    margin-bottom: 16px;
}

.ttc-comment-box .ttx-comment-box-content .ttc-comment-box-content-desc {
    color: #333333;
    font-size: 18px;
}

.ttc-question-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height:24px;
}
.ttc-question-row .ttc-question-row-count {
    font-weight: 500;
}


.ttc-comment-row {
  display: flex;
  align-items: center;
  height:24px;
  margin-bottom: 8px;
}
  .ttc-comment-row .ttc-comment-row-stars {
    display: flex;
    align-items: center;
    margin-right: 8px;
    position:relative;
    color:#95a5a6;
    font-size: 24px;
}
    .ttc-comment-row .ttc-comment-row-count {
    font-weight: 600;
}

.ttc-comment-row .ttc-comment-row-stars >  .ttc-comment-row-star-fill {
    position: absolute;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #f1c40f;
}