@font-face {
  font-family: "Roboto Condensed";
  src: url("../Fonts/RobotoCondensed-SemiBold.ttf");
}
.favicon-source {
  display: flex;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 5px;
  color: var(--Colors-Text-text-primary_on-brand, #FFF);
  text-align: center;
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  word-break: break-all;
}
.favicon-source.two {
  font-size: 25px;
  line-height: 22.5px; /* 90% */
}
.favicon-source.three {
  font-size: 16.25px;
  line-height: 7.5px; /* 46.154% */
}
.favicon-source.four {
  font-size: 20px;
  line-height: 16px; /* 80% */
}

.favicon-source-size {
  --favicon-size: var(--favicon-size, 16px);
  display: flex;
  width: var(--favicon-size);
  height: var(--favicon-size);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: calc(var(--favicon-size) / 8);
  color: var(--Colors-Text-text-primary_on-brand, #FFF);
  text-align: center;
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  word-break: break-all;
}
.favicon-source-size.two {
  font-size: calc(var(--favicon-size) * 0.625);
  line-height: calc(var(--favicon-size) * 0.625 * 0.9);
}
.favicon-source-size.three {
  font-size: calc(var(--favicon-size) * 0.40625);
  line-height: calc(var(--favicon-size) * 0.40625 * 0.46154);
}
.favicon-source-size.four {
  font-size: calc(var(--favicon-size) * 0.5);
  line-height: calc(var(--favicon-size) * 0.4);
}

.favicon-source-16 {
  display: flex;
  width: 16px;
  height: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 2px;
  color: var(--Colors-Text-text-primary_on-brand, #FFF);
  text-align: center;
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  word-break: break-all;
}
.favicon-source-16.two {
  font-size: 10px;
  line-height: 9px;
}
.favicon-source-16.three {
  font-size: 6.5px;
  line-height: 3px;
}
.favicon-source-16.four {
  font-size: 8px;
  line-height: 6.4px;
}

.favicon-source-32 {
  display: flex;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  color: var(--Colors-Text-text-primary_on-brand, #FFF);
  text-align: center;
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  word-break: break-all;
}
.favicon-source-32.two {
  font-size: 20px;
  line-height: 18px;
}
.favicon-source-32.three {
  font-size: 13px;
  line-height: 6px;
}
.favicon-source-32.four {
  font-size: 16px;
  line-height: 12.8px;
}

.favicon-source-64 {
  display: flex;
  width: 64px;
  height: 64px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--Colors-Text-text-primary_on-brand, #FFF);
  text-align: center;
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  word-break: break-all;
}
.favicon-source-64.two {
  font-size: 40px;
  line-height: 36px;
}
.favicon-source-64.three {
  font-size: 26px;
  line-height: 12px;
}
.favicon-source-64.four {
  font-size: 32px;
  line-height: 25.6px;
}

.favicon-source-128 {
  display: flex;
  width: 128px;
  height: 128px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 16px;
  color: var(--Colors-Text-text-primary_on-brand, #FFF);
  text-align: center;
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  word-break: break-all;
}
.favicon-source-128.two {
  font-size: 80px;
  line-height: 72px;
}
.favicon-source-128.three {
  font-size: 52px;
  line-height: 24px;
}
.favicon-source-128.four {
  font-size: 64px;
  line-height: 51.2px;
}

.favicon-source-180 {
  display: flex;
  width: 180px;
  height: 180px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 22.5px;
  color: var(--Colors-Text-text-primary_on-brand, #FFF);
  text-align: center;
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  word-break: break-all;
}
.favicon-source-180.two {
  font-size: 112.5px;
  line-height: 101.25px;
}
.favicon-source-180.three {
  font-size: 73.125px;
  line-height: 33.75px;
}
.favicon-source-180.four {
  font-size: 90px;
  line-height: 72px;
}

.favicon-source-192 {
  display: flex;
  width: 192px;
  height: 192px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 24px;
  color: var(--Colors-Text-text-primary_on-brand, #FFF);
  text-align: center;
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 600;
  word-break: break-all;
}
.favicon-source-192.two {
  font-size: 120px;
  line-height: 108px;
}
.favicon-source-192.three {
  font-size: 78px;
  line-height: 36px;
}
.favicon-source-192.four {
  font-size: 96px;
  line-height: 76.8px;
}

.Red {
  background: var(--Colors-Red-600, #EA1450);
}

.Orange {
  background: var(--Colors-Warning-600, #DC6803);
}

.Blue {
  background: var(--Colors-Brand-600, #0040DC);
}

.Green {
  background: var(--Colors-Success-600, #079455);
}

.Lime {
  background: var(--Colors-Lime-600, #5EA500);
}

.Pink {
  background: var(--Colors-Pink-600, #BA24D5);
}

.Purple {
  background: var(--Colors-Purple-600, #6938EF);
}

.Teal {
  background: var(--Colors-Teal-600, #009689);
}