:root {
  --rating-size: 5rem;
  --bar-size: 1rem;
  --background-color: #e7f2fa;
  --rating-color-default: #2980b9;
  --rating-color-background: #c7e1f3;
  --rating-color-good: #27ae60;
  --rating-color-meh: #f1c40f;
  --rating-color-bad: #e74c3c;
}

h1 {text-align: center;font-size: large; font-weight: 400; font-style: italic; line-height: 44px; margin: 0 0 12px}
p.explain {text-align: center;font-size: small; font-weight: 400; font-style: italic;
  margin: auto; max-width: 700px}

/* Rating item */
.ratingc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 90%;
  overflow: hidden;

  background: var(--rating-color-default);
  color: var(--rating-color-default);
  width: var(--rating-size);
  height: var(--rating-size);

  /* Basic style for the text */
  font-size: calc(var(--rating-size) / 3);
  line-height: 1;
}

/* Rating circle content */
.ratingc span {
  position: relative;
  display: flex;
  font-weight: bold;
  z-index: 2;
}

.ratingc span small {
  font-size: 0.5em;
  font-weight: 900;
  align-self: center;
}

/* Bar mask, creates an inner circle with the same color as thee background */
.ratingc::after {
  content: "";
  position: absolute;
  top: var(--bar-size);
  right: var(--bar-size);
  bottom: var(--bar-size);
  left: var(--bar-size);
  background: var(--background-color);
  border-radius: inherit;
  z-index: 1;
}

/* Bar background */
.ratingc::before {
  content: "";
  position: absolute;
  top: var(--bar-size);
  right: var(--bar-size);
  bottom: var(--bar-size);
  left: var(--bar-size);
  border-radius: inherit;
  box-shadow: 0 0 0 1rem var(--rating-color-background);
  z-index: -1;
}

/* Classes to give different colors to ratings, based on their score */
.ratingc.good {
  background: var(--rating-color-good);
  color: var(--rating-color-good);
}

.ratingc.meh {
  background: var(--rating-color-meh);
  color: var(--rating-color-meh);
}

.ratingc.bad {
  background: var(--rating-color-bad);
  color: var(--rating-color-bad);
}

.ratingc.bad span.low {
  font-size: 24px;
}

.card_extra {
  width: 90%;
  max-width: 500px;
  border-width: thick;
}

.auto_rate {
  font-size: x-small;
  text-align: center;
  color: gray;
}

.team_img {
  alignment: center;
  width:130px;
}

td.rating_td {
  padding: 10px 40px;
}

.card_header_footer_extra {
  background-color: whitesmoke;
}

.score_tr {
  visibility: hidden;
  height: 0;
}

table.main_card {
  margin-left: auto;
  margin-right: auto;
}

.team_name {
  text-align: center;
  padding-bottom: 5px;
}

.score_num {
  text-align: center;font-size: xx-large
}

.loading {
  text-align: center;
  font-size: large;
}

.main_div {
  text-align: center;
  font-size: small;
}

.clear_filter {
  text-align: center;
}

.period_score td {
  text-align: center;
}

.share_rating {
  font-size: x-small;
}

table.user_rating {
  width: 100%;
}

table.user_rating td {
  width: 50%;
}

td.pad_10 {
  padding: 10px;
}

div.contact {
  text-align: center; font-size: small
}

.anomalies-table {
  visibility: hidden;
  height: 0;
  padding: 3px;
}

/* Mobile-specific styles for .anomalies-table */
@media only screen and (max-width: 768px) {
  .anomalies-table {
    font-size: small;
  }
}

.anomaly_title {
  text-align: center;
  cursor: pointer;
  color: #0366D6;
}

.anomaly_title:hover {
  text-decoration: underline;
}