/* src/styles.scss */
:root {
  --primary: #ff3c93;
  --secondary: #7d9ab2;
  --neutral: #7d9ab2;
  --success: #0ea6e7;
  --danger: #ff3c4c;
  --white: #fff;
  --black: #000;
  --primary-20: hsl(333.2307692308, 100%, 101.7647058824%);
  --primary-50: rgb(255, 243.6, 248.6861538462);
  --primary-100: rgb(255, 213, 231.7384615385);
  --primary-200: rgb(255, 167.1, 206.3169230769);
  --primary-300: rgb(255, 121.2, 180.8953846154);
  --primary-400: rgb(255, 90.6, 163.9476923077);
  --primary-600: #ff3c93;
  --primary-700: rgb(255, 14.1, 121.5784615385);
  --primary-800: rgb(238.5, 0, 106.4076923077);
  --primary-900: rgb(213, 0, 95.0307692308);
  --primary-1000: rgb(151.8, 0, 67.7261538462);
  --primary-1100: rgb(111, 0, 49.5230769231);
  --primary-1200: rgb(85.5, 0, 38.1461538462);
  --primary-1300: rgb(75.3, 0, 33.5953846154);
  --primary-1400: rgb(65.1, 0, 29.0446153846);
  --secondary-20: rgb(253.115942029, 253.5362318841, 253.884057971);
  --secondary-50: rgb(240.3043478261, 243.5826086957, 246.2956521739);
  --secondary-100: rgb(221.0869565217, 228.652173913, 234.9130434783);
  --secondary-200: rgb(192.2608695652, 206.2565217391, 217.8391304348);
  --secondary-300: rgb(163.4347826087, 183.8608695652, 200.7652173913);
  --secondary-400: rgb(144.2173913043, 168.9304347826, 189.3826086957);
  --secondary-600: #7d9ab2;
  --secondary-700: rgb(96.1739130435, 131.6043478261, 160.9260869565);
  --secondary-800: rgb(84.2536231884, 115.9855072464, 142.2463768116);
  --secondary-900: rgb(74.768115942, 102.9275362319, 126.231884058);
  --secondary-1000: rgb(52.0028985507, 71.5884057971, 87.7971014493);
  --secondary-1100: rgb(36.8260869565, 50.6956521739, 62.1739130435);
  --secondary-1200: rgb(27.3405797101, 37.6376811594, 46.1594202899);
  --secondary-1300: rgb(23.5463768116, 32.4144927536, 39.7536231884);
  --secondary-1400: rgb(19.752173913, 27.1913043478, 33.347826087);
  --neutral-20: rgb(253.115942029, 253.5362318841, 253.884057971);
  --neutral-50: rgb(240.3043478261, 243.5826086957, 246.2956521739);
  --neutral-100: rgb(221.0869565217, 228.652173913, 234.9130434783);
  --neutral-200: rgb(192.2608695652, 206.2565217391, 217.8391304348);
  --neutral-300: rgb(163.4347826087, 183.8608695652, 200.7652173913);
  --neutral-400: rgb(144.2173913043, 168.9304347826, 189.3826086957);
  --neutral-600: #7d9ab2;
  --neutral-700: rgb(96.1739130435, 131.6043478261, 160.9260869565);
  --neutral-800: rgb(84.2536231884, 115.9855072464, 142.2463768116);
  --neutral-900: rgb(74.768115942, 102.9275362319, 126.231884058);
  --neutral-1000: rgb(52.0028985507, 71.5884057971, 87.7971014493);
  --neutral-1100: rgb(36.8260869565, 50.6956521739, 62.1739130435);
  --neutral-1200: rgb(27.3405797101, 37.6376811594, 46.1594202899);
  --neutral-1300: rgb(23.5463768116, 32.4144927536, 39.7536231884);
  --neutral-1400: rgb(19.752173913, 27.1913043478, 33.347826087);
}
.buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 16px;
  align-self: end;
}
.buttons > .button-base,
.buttons > .button-danger,
.buttons > .button-icon-danger,
.buttons > .button-secondary-inverted,
.buttons > .list-action-secondary,
.buttons > .list-action-icon,
.buttons > .button-icon-secondary,
.buttons > .tab-back,
.buttons > .button-more,
.buttons > .button-secondary,
.buttons > .field-action-secondary,
.buttons > .button-primary-inverted,
.buttons > .list-action-primary,
.buttons > .button-icon-primary-inverted,
.buttons > .button-primary,
.buttons > .field-action-primary,
.buttons > .badge-primary,
.buttons > .button-icon-primary {
  width: 120px;
}
.button-base,
.button-danger,
.button-icon-danger,
.button-secondary-inverted,
.list-action-secondary,
.list-action-icon,
.button-icon-secondary,
.tab-back,
.button-more,
.button-secondary,
.field-action-secondary,
.button-primary-inverted,
.list-action-primary,
.button-icon-primary-inverted,
.button-primary,
.field-action-primary,
.badge-primary,
.button-icon-primary {
  min-width: 100px;
  height: 38px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  -webkit-user-select: none;
  user-select: none;
  border: none;
  border-radius: 8px;
  transition:
    background-color 0.5s,
    border 0.5s,
    color 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  touch-action: manipulation;
}
.button-base:disabled,
.button-danger:disabled,
.button-icon-danger:disabled,
.button-secondary-inverted:disabled,
.list-action-secondary:disabled,
.list-action-icon:disabled,
.button-icon-secondary:disabled,
.tab-back:disabled,
.button-more:disabled,
.button-secondary:disabled,
.field-action-secondary:disabled,
.button-primary-inverted:disabled,
.list-action-primary:disabled,
.button-icon-primary-inverted:disabled,
.button-primary:disabled,
.field-action-primary:disabled,
.badge-primary:disabled,
.button-icon-primary:disabled {
  cursor: default;
}
.button-base > app-icon,
.button-danger > app-icon,
.button-icon-danger > app-icon,
.button-secondary-inverted > app-icon,
.list-action-secondary > app-icon,
.list-action-icon > app-icon,
.button-icon-secondary > app-icon,
.tab-back > app-icon,
.button-more > app-icon,
.button-secondary > app-icon,
.field-action-secondary > app-icon,
.button-primary-inverted > app-icon,
.list-action-primary > app-icon,
.button-icon-primary-inverted > app-icon,
.button-primary > app-icon,
.field-action-primary > app-icon,
.badge-primary > app-icon,
.button-icon-primary > app-icon {
  transition: color 0.5s;
}
.button-primary,
.field-action-primary,
.badge-primary,
.button-icon-primary {
  color: rgb(255, 213, 231.7384615385);
  background-color: rgb(151.8, 0, 67.7261538462);
  border: 1px solid transparent;
}
.button-primary app-icon,
.field-action-primary app-icon,
.badge-primary app-icon,
.button-icon-primary app-icon {
  width: 20px;
  height: 20px;
  color: rgb(255, 213, 231.7384615385);
}
.button-primary:hover,
.field-action-primary:hover,
.badge-primary:hover,
.button-icon-primary:hover {
  color: rgb(255, 213, 231.7384615385);
  background-color: rgb(213, 0, 95.0307692308);
}
.button-primary:hover app-icon,
.field-action-primary:hover app-icon,
.badge-primary:hover app-icon,
.button-icon-primary:hover app-icon {
  color: rgb(255, 213, 231.7384615385);
}
.button-primary:disabled,
.field-action-primary:disabled,
.badge-primary:disabled,
.button-icon-primary:disabled {
  color: rgb(66.8017391304, 64.3530434783, 73.0259531773);
  border-color: transparent;
  background-color: rgb(46.1617391304, 21.7530434783, 40.2234916388);
}
.button-primary:disabled app-icon,
.field-action-primary:disabled app-icon,
.badge-primary:disabled app-icon,
.button-icon-primary:disabled app-icon {
  color: rgb(66.8017391304, 64.3530434783, 73.0259531773);
}
.button-primary-inverted,
.list-action-primary,
.button-icon-primary-inverted {
  color: rgb(255, 213, 231.7384615385);
  background-color: transparent;
  border: 1px solid transparent;
}
.button-primary-inverted app-icon,
.list-action-primary app-icon,
.button-icon-primary-inverted app-icon {
  width: 20px;
  height: 20px;
  color: rgb(255, 213, 231.7384615385);
}
.button-primary-inverted:hover,
.list-action-primary:hover,
.button-icon-primary-inverted:hover {
  color: rgb(255, 213, 231.7384615385);
  background-color: rgb(151.8, 0, 67.7261538462);
  border-color: transparent;
}
.button-primary-inverted:hover app-icon,
.list-action-primary:hover app-icon,
.button-icon-primary-inverted:hover app-icon {
  color: rgb(255, 213, 231.7384615385);
}
.button-primary-inverted:disabled,
.list-action-primary:disabled,
.button-icon-primary-inverted:disabled {
  color: rgba(255, 213, 231.7384615385, 0.4);
  border-color: transparent;
  background-color: transparent;
}
.button-primary-inverted:disabled app-icon,
.list-action-primary:disabled app-icon,
.button-icon-primary-inverted:disabled app-icon {
  color: rgba(255, 213, 231.7384615385, 0.4);
}
.button-secondary,
.field-action-secondary {
  color: rgb(221.0869565217, 228.652173913, 234.9130434783);
  background-color: rgb(52.0028985507, 71.5884057971, 87.7971014493);
  border: 1px solid transparent;
}
.button-secondary:hover,
.field-action-secondary:hover {
  color: rgb(221.0869565217, 228.652173913, 234.9130434783);
  background-color: rgb(74.768115942, 102.9275362319, 126.231884058);
}
.button-secondary:disabled,
.field-action-secondary:disabled {
  color: rgb(60.0191304348, 67.4834782609, 73.6608695652);
  background-color: rgb(26.2023188406, 36.0707246377, 44.2376811594);
  border-color: transparent;
}
.button-secondary-inverted,
.list-action-secondary,
.list-action-icon,
.button-icon-secondary,
.tab-back,
.button-more {
  color: rgb(221.0869565217, 228.652173913, 234.9130434783);
  background-color: transparent;
  border: 1px solid transparent;
}
.button-secondary-inverted:hover,
.list-action-secondary:hover,
.list-action-icon:hover,
.button-icon-secondary:hover,
.tab-back:hover,
.button-more:hover {
  color: rgb(221.0869565217, 228.652173913, 234.9130434783);
  background-color: rgb(52.0028985507, 71.5884057971, 87.7971014493);
  border-color: rgb(74.768115942, 102.9275362319, 126.231884058);
}
.button-secondary-inverted:disabled,
.list-action-secondary:disabled,
.list-action-icon:disabled,
.button-icon-secondary:disabled,
.tab-back:disabled,
.button-more:disabled {
  color: rgba(221.0869565217, 228.652173913, 234.9130434783, 0.4);
  background-color: transparent;
  border-color: transparent;
}
.button-danger,
.button-icon-danger {
  background-color: transparent;
  border: 1px solid rgb(111, 0, 9.1076923077);
  color: rgb(255, 213, 216.4461538462);
}
.button-danger app-icon,
.button-icon-danger app-icon {
  width: 20px;
  height: 20px;
  color: rgb(255, 213, 216.4461538462);
}
.button-danger:hover,
.button-icon-danger:hover {
  background-color: rgb(151.8, 0, 12.4553846154);
}
.button-danger:disabled,
.button-icon-danger:disabled {
  color: rgb(151.8, 0, 12.4553846154);
  background-color: transparent;
}
.button-danger:disabled app-icon,
.button-icon-danger:disabled app-icon {
  color: rgb(213, 0, 17.4769230769);
}
.button-icon-base,
.button-icon-danger,
.button-icon-secondary,
.tab-back,
.button-more,
.button-icon-primary-inverted,
.button-icon-primary {
  min-width: 38px;
  width: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.button-more {
  border: none;
  min-width: 30px;
  width: 30px;
}
.button-more > app-icon {
  transition: color 0.5s;
  color: #7d9ab2;
}
.button-more:hover {
  background-color: transparent;
}
.button-more:hover > app-icon {
  color: rgb(192.2608695652, 206.2565217391, 217.8391304348);
}
.badge-primary:hover {
  cursor: default;
  color: rgb(255, 213, 231.7384615385);
  background-color: rgb(151.8, 0, 67.7261538462);
  border: 1px solid transparent;
}
.badge-primary:hover app-icon {
  color: rgb(255, 213, 231.7384615385);
}
.page,
.page-with-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.card {
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  width: 100%;
  border: 1px solid transparent;
}
.card-header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4px;
  align-items: center;
  min-height: 38px;
}
.header-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.header-action-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.dialog-glass-pane {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog {
  position: fixed;
  min-width: 300px;
  min-height: 60px;
  max-width: calc(100vw - 16px);
  background-color: rgb(19.752173913, 27.1913043478, 33.347826087);
  border-radius: 16px;
  border: 1px solid rgb(52.0028985507, 71.5884057971, 87.7971014493);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.9);
}
.dialog-header {
  position: relative;
  font-size: 24px;
  font-family: "logofont", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: rgb(255, 14.1, 121.5784615385);
  height: 54px;
  -webkit-user-select: none;
  user-select: none;
}
.dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
  cursor: pointer;
}
.dialog-content {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px 8px;
}
.dialog-scroll {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(75vh - 48px - 16px);
  overflow-y: auto;
}
.dialog-message {
  color: rgb(221.0869565217, 228.652173913, 234.9130434783);
  display: flex;
  justify-content: center;
  padding: 16px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 8px 8px 8px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}
.fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-columns-50-50 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.field-label {
  color: #7d9ab2;
  font-size: 12px;
}
.field-group {
  font-size: 14px;
  padding: 6px;
}
.field-error {
  color: rgb(255, 213, 231.7384615385);
  font-size: 12px;
  background-color: rgb(111, 0, 49.5230769231);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px;
}
.field-info {
  color: rgb(221.0869565217, 228.652173913, 234.9130434783);
  font-size: 12px;
  background-color: rgb(27.3405797101, 37.6376811594, 46.1594202899);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px;
}
.field-text {
  background: rgb(27.3405797101, 37.6376811594, 46.1594202899);
  color: rgb(221.0869565217, 228.652173913, 234.9130434783);
  height: 38px;
  width: 100%;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.field-text::-webkit-outer-spin-button,
.field-text::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field-text[type=number] {
  -moz-appearance: textfield;
}
.field-text:hover {
  box-shadow: none;
  outline: none;
  background-color: rgb(36.8260869565, 50.6956521739, 62.1739130435);
  border-color: transparent;
}
.field-text:active {
  box-shadow: none;
  outline: none;
}
.field-text:disabled {
  background-color: rgb(27.3405797101, 37.6376811594, 46.1594202899);
}
.field-text::placeholder {
  color: rgb(96.1739130435, 131.6043478261, 160.9260869565);
}
.field-text-primary {
  background: rgb(111, 0, 49.5230769231);
  color: rgb(255, 213, 231.7384615385);
  height: 38px;
  width: 100%;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.field-text-primary::-webkit-outer-spin-button,
.field-text-primary::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field-text-primary[type=number] {
  -moz-appearance: textfield;
}
.field-text-primary:hover {
  box-shadow: none;
  outline: none;
  background-color: rgb(151.8, 0, 67.7261538462);
  border-color: transparent;
}
.field-text-primary:active {
  box-shadow: none;
  outline: none;
}
.field-text-primary:disabled {
  background-color: rgb(111, 0, 49.5230769231);
}
.field-text-primary::placeholder {
  color: rgb(255, 90.6, 163.9476923077);
}
.field-text-with-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.field-text-with-actions > *:first-child {
  width: 100%;
}
.field-text-with-actions > *:last-child:not(:first-child) {
  flex: 0;
}
textarea.field-text {
  min-height: 38px;
  resize: vertical;
  padding: 17px 6px;
  height: calc(38px - 12px);
}
.field-message {
  background: rgb(27.3405797101, 37.6376811594, 46.1594202899);
  color: #7d9ab2;
  height: 38px;
  width: 100%;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.field-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
}
@media (max-width: 768px) {
  .field-actions {
    padding: 8px;
    position: fixed;
    height: 66px;
    width: 100vw;
    bottom: 0;
    left: 0;
    justify-content: inherit;
    align-items: center;
    border-top: 1px solid transparent;
    background-color: rgb(36.8260869565, 50.6956521739, 62.1739130435);
    z-index: 450;
  }
  .field-action,
  .field-action-secondary,
  .field-action-primary {
    flex: 1;
    min-width: 0;
  }
}
.list {
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
}
.list-group {
  pointer-events: none;
  padding: 5px 4px 4px 4px;
  color: rgb(192.2608695652, 206.2565217391, 217.8391304348);
  background-color: rgb(19.752173913, 27.1913043478, 33.347826087);
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}
.list-item-base,
.list-item-primary,
.list-item-secondary {
  position: relative;
  min-height: 50px;
  display: grid;
  grid-template-columns: 1fr auto;
  cursor: pointer;
  transition: background-color 0.5s;
  color: rgb(192.2608695652, 206.2565217391, 217.8391304348);
}
.list-item-base:not(:last-child),
.list-item-primary:not(:last-child),
.list-item-secondary:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.list-item-secondary {
  background-color: rgb(27.3405797101, 37.6376811594, 46.1594202899);
}
.list-item-secondary:hover {
  background-color: rgb(36.8260869565, 50.6956521739, 62.1739130435);
}
.list-item-primary {
  color: rgb(255, 167.1, 206.3169230769);
  background-color: rgb(111, 0, 49.5230769231);
}
.list-item-primary:hover {
  background-color: rgb(151.8, 0, 67.7261538462);
}
.list-item-disabled {
  cursor: default !important;
}
.list-text-base,
.list-text-message,
.list-text-message-clickable,
.list-text-more,
.list-text-secondary,
.list-text-primary {
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: center;
  z-index: 1;
  gap: 2px;
  padding: 8px 6px;
  transition: background-color 0.5s;
}
.list-text-base div:not(:first-child),
.list-text-message div:not(:first-child),
.list-text-message-clickable div:not(:first-child),
.list-text-more div:not(:first-child),
.list-text-secondary div:not(:first-child),
.list-text-primary div:not(:first-child) {
  font-size: 12px;
}
.list-text-primary div:not(:first-child) {
  color: #ff3c93;
}
.list-text-secondary div:not(:first-child) {
  color: #7d9ab2;
}
.list-text-more {
  align-items: center;
  color: rgb(163.4347826087, 183.8608695652, 200.7652173913);
}
.list-text-more div:not(:first-child) {
  color: #7d9ab2;
}
.list-text-faded {
  color: rgb(96.1739130435, 131.6043478261, 160.9260869565);
}
.list-text-message,
.list-text-message-clickable {
  align-items: center;
  cursor: default;
}
.list-text-message div:not(:first-child),
.list-text-message-clickable div:not(:first-child) {
  color: #7d9ab2;
}
.list-text-message > app-icon,
.list-text-message-clickable > app-icon {
  height: 20px;
  width: 20px;
  color: #7d9ab2;
  margin-right: 4px;
}
.list-text-message-clickable {
  cursor: pointer;
  display: flex;
  flex-direction: row;
}
.list-subtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 1;
  padding: 8px;
  font-size: 14px;
}
.list-actions {
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: 2px;
  min-width: max-content;
}
.list-action-base,
.list-action-icon,
.list-action-primary,
.list-action-secondary {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 4px;
  padding: 0 10px 0 8px;
  background-color: transparent;
  width: 118px;
  border-radius: 0;
  height: inherit;
}
.list-action-base:hover,
.list-action-icon:hover,
.list-action-primary:hover,
.list-action-secondary:hover {
  border-color: transparent;
}
.list-action-icon {
  padding: 0;
  min-width: inherit;
  width: 50px;
}
.list-icon-base,
.list-icon-secondary,
.list-icon-primary-inverted,
.list-icon-primary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.list-icon-base app-icon,
.list-icon-secondary app-icon,
.list-icon-primary-inverted app-icon,
.list-icon-primary app-icon {
  width: 20px;
  height: 20px;
}
.list-icon-primary {
  color: rgb(255, 14.1, 121.5784615385);
}
.list-icon-primary app-icon {
  color: rgb(255, 14.1, 121.5784615385);
}
.list-icon-primary-inverted app-icon {
  color: rgb(255, 213, 231.7384615385);
}
.list-icon-secondary app-icon {
  color: rgb(163.4347826087, 183.8608695652, 200.7652173913);
}
.list-icons {
  display: flex;
  flex-direction: row;
  height: 100%;
  gap: calc(50px / 2 - 20px / 2);
  padding: 0 calc(50px / 2 - 20px / 2);
}
.list-icon-faded {
  color: rgba(221.0869565217, 228.652173913, 234.9130434783, 0.5);
}
.tabs-container {
  position: relative;
  height: 60px;
  min-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgb(36.8260869565, 50.6956521739, 62.1739130435);
  width: 100%;
  flex: 1;
  background-color: rgba(27.3405797101, 37.6376811594, 46.1594202899, 0.8);
}
.tabs-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 860px;
}
.tabs-center-with-back {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.tab,
.tab-disabled,
.tab-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  min-width: 100px;
  transition: color 0.5s, border-color 0.5s;
  padding: 16px 8px 8px 8px;
  height: 60px;
}
.tab:hover,
.tab-disabled:hover,
.tab-selected:hover {
  color: #ff3c93;
}
.tab-selected {
  font-weight: bold;
  color: #ff3c93;
  border-bottom: 2px solid #ff3c93;
  cursor: default;
}
.tab-disabled {
  color: rgb(60.0191304348, 67.4834782609, 73.6608695652);
  cursor: default;
}
.tab-disabled:hover {
  color: rgb(60.0191304348, 67.4834782609, 73.6608695652);
}
@media (max-width: 500px) {
  .tabs-center {
    gap: 0;
  }
  .tabs {
    gap: 0;
  }
}
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .tiles {
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }
}
.tile-base,
.tile-secondary,
.tile-primary {
  height: 128px;
  min-height: 128px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.5s, border 0.5s;
  overflow: hidden;
}
.tile-base .tile-top,
.tile-secondary .tile-top,
.tile-primary .tile-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 4px;
  padding: 8px;
  min-width: 50%;
}
.tile-base .tile-top > app-icon,
.tile-secondary .tile-top > app-icon,
.tile-primary .tile-top > app-icon {
  width: 38px;
  height: 38px;
}
.tile-base .tile-bottom,
.tile-secondary .tile-bottom,
.tile-primary .tile-bottom {
  text-align: center;
  align-content: center;
  width: 100%;
  transition: background-color 0.5s, border 0.5s;
  height: 52px;
  padding: 8px;
  border-top: 1px solid transparent;
}
.tile-primary {
  background-color: rgb(111, 0, 49.5230769231);
  border: 1px solid transparent;
}
.tile-primary:hover {
  background-color: rgb(151.8, 0, 67.7261538462);
  border-color: transparent;
}
.tile-primary:hover .tile-bottom {
  background-color: rgb(151.8, 0, 67.7261538462);
}
.tile-primary .tile-top {
  color: rgba(255, 213, 231.7384615385, 0.5);
}
.tile-primary .tile-bottom {
  background-color: rgb(111, 0, 49.5230769231);
  color: rgb(255, 213, 231.7384615385);
  border-color: transparent;
}
.tile-secondary {
  background-color: rgb(27.3405797101, 37.6376811594, 46.1594202899);
  border: 1px solid transparent;
}
.tile-secondary:hover {
  background-color: rgb(36.8260869565, 50.6956521739, 62.1739130435);
  border-color: transparent;
}
.tile-secondary:hover .tile-bottom {
  background-color: rgb(36.8260869565, 50.6956521739, 62.1739130435);
}
.tile-secondary .tile-top {
  color: rgba(221.0869565217, 228.652173913, 234.9130434783, 0.5);
}
.tile-secondary .tile-bottom {
  background-color: rgb(27.3405797101, 37.6376811594, 46.1594202899);
  color: rgb(221.0869565217, 228.652173913, 234.9130434783);
  border-color: transparent;
}
.text-unselectable,
.subtitle,
.title {
  -webkit-user-select: none;
  user-select: none;
}
.title {
  text-align: left;
  font-size: 26px;
  font-family: "logofont", sans-serif;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  width: 860px;
  color: rgb(255, 14.1, 121.5784615385);
}
@media (max-width: 1032px) {
  .title {
    width: inherit;
  }
}
.subtitle {
  font-size: 22px;
  font-family: "logofont", sans-serif;
  min-width: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  color: #7d9ab2;
}
.subtitle app-icon {
  margin-left: 4px;
  margin-right: 8px;
}
.subtitle span {
  margin: 0 4px;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-faded-secondary,
.subtitle span {
  color: #7d9ab2;
}
.text-faded-primary {
  color: rgba(255, 60, 147, 0.5);
}
@font-face {
  font-family: "logofont";
  src: url(/assets/fonts/teko.ttf);
}
html,
body {
  background-color: rgb(19.752173913, 27.1913043478, 33.347826087);
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}
textarea {
  font-family: "Roboto", sans-serif;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
img,
svg {
  user-select: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */