/* Legacy score explanation popup, centered within the viewport. */
#rating-note.rating-dialog {
  width: 370px;
  max-width: calc(100vw - 20px);
  max-height: calc(100dvh - 30px);
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 10px;
  overflow: auto;
  border: 0;
  border-radius: 5px;
  background: #d8e6fa;
  box-shadow: 0 0 20px #000;
  color: #111;
  font-size: 12px;
  line-height: 1.5;
}
#rating-note::backdrop { background: #0009; }
#rating-note > header {
  position: relative;
  display: flex;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #003394;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#1c40d3, #3976c6);
  color: #fff;
  text-shadow: 1px 1px #333;
}
#rating-note > header h2 { font-size: 16px; line-height: 40px; }
#rating-note .close-rating {
  position: absolute;
  top: 0;
  right: 10px;
  height: 40px;
  padding: 0;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}
#rating-note .rating-dialog-content { padding: 0; border: 1px solid #aaa; border-top: 0; border-bottom: 0; background: #fff; }
#rating-note .rating-dialog-content h2 {
  padding: 6px 10px;
  background: #3399ff;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-shadow: 1px 1px #777;
}
#rating-note .box { padding: 10px; }
#rating-note .box > ul { margin: 0 0 10px; padding-left: 20px; }
#rating-note .pictogram {
  display: flow-root;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #e84949 50%, #e00000 50%);
  color: #fff;
  text-align: center;
}
#rating-note .pictogram > p:first-child { line-height: 20px; }
#rating-note .title { font-size: 14px; }
#rating-note .small { font-size: 10px; }
#rating-note .xsmall { font-size: 10px; }
#rating-note .pictogram .star { color: #ffef00; font-size: 14px; line-height: 16px; }
#rating-note .group {
  display: block;
  width: 48%;
  margin: 5px 0 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #333;
  text-align: center;
}
#rating-note .group.fl { float: left; }
#rating-note .group.fr { float: right; }
#rating-note .group .red { color: #d00000; }
#rating-note .group .pt5 { padding-top: 5px; }
#rating-note .group img { width: 100%; height: auto; max-height: none; }
#rating-note .group ul { margin: 5px 0 0; padding-left: 14px; text-align: left; font-size: 12px; line-height: 18px; }
#rating-note .pictogram > .clear { clear: both; padding-top: 0; color: #fff; text-align: left; font-size: 10px; line-height: 15px; font-weight: bold; }
#rating-note .pictogram .group[style] { margin-bottom: 0; }
#rating-note .group[style] img { width: auto; max-width: 100%; }
#rating-note > form { margin: 0; padding: 0; border: 1px solid #aaa; border-top: 0; border-radius: 0 0 5px 5px; }
#rating-note .rating-close-button { padding: 10px 0; border: 0; border-radius: 0 0 5px 5px; background: #3399ff; font-size: 14px; line-height: 18px; color: #fff; }