.alertWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: var(--alertWrapperMargin);
}

.alertWidth {
  width: 300px;
}

.wrapper {
  padding: none;
  margin: none;

  display: flex;

  align-items: center;
  justify-content: center;
}

.info {
  align-self: center;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.scoreStats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
}

.score {
  display: flex;
  align-items: center;
  flex: 1 1 auto;

  margin: var(--scoreMargin);
  height: 150px;
  width: 150px;

  /*
    progress modal sets a -1 z-index on its content
    and this raises it above the app background
  */
  z-index: var(--scoreZIndex);
}

.scorePercentage {
  font-size: var(--scorePercentageFontSize);
  font-weight: var(--scorePercentageFontWeight);
}

.infoWrapper {
  flex: 1 1 auto;
  margin: var(--infoWrapperMargin);
  padding-left: var(--inforWrapperPadding);
}
