sendou.ink/app/features/sendouq/q.css

.twf {
  width: 1.5rem;
  height: 1.5rem;
}

.q__clocks-container {
  display: flex;
  gap: var(--s-2);
}

.q__clock {
  font-size: var(--fonts-sm);
  font-weight: var(--bold);
  color: var(--text-lighter);
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  line-height: 1.3;
}

.q__clock-country {
  color: var(--text) !important;
  white-space: nowrap;
  font-size: var(--fonts-xs);
}

.q__header {
  font-size: var(--fonts-lg);
}

.q__map-preference-label {
  margin-block-end: 0;
  font-weight: var(--semi-bold);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--text-lighter);
}

.q__map-pool-grid {
  display: grid;
  grid-template-columns: repeat(7, max-content);
  gap: var(--s-2-5);
  font-size: var(--fonts-xs);
  align-items: center;
}

.q__map-pool-grid__stage-image {
  border-radius: 7px;
}

.q__tab-button {
  width: 100px;
  background-color: var(--bg-lighter-solid);
  color: var(--text);
  font-size: var(--fonts-sm);
  border-color: transparent;
  gap: var(--s-2);
  position: relative;
}

.q__tab-button__icon {
  width: 14px;
}

.q__tab-button__badge {
  font-size: var(--fonts-xxs);
  display: grid;
  place-items: center;
  background-color: var(--theme);
  position: absolute;
  top: -4px;
  right: -1px;
  border-radius: 100%;
  width: 17px;
  height: 17px;
  color: var(--button-text);
}

.q__top-container {
  display: flex;
  gap: var(--s-3);
  max-width: 500px;
}

.q__top-container__divider {
  min-width: 3px;
  background-color: var(--border);
  height: 100%;
  border-radius: var(--rounded);
}

.q__chat-container {
  top: 60px;
  position: sticky;
}

.q__chat-messages-container {
  height: 350px;
}

.q__groups-container {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
}

.q__groups-container__mobile {
  grid-template-columns: 1fr;
  min-width: 300px;
  margin: 0 auto;
}

.q__groups-inner-container {
  max-width: 94vw;
}

.q__groups-container__right {
  margin-top: 45px;
}

.q__group {
  background-color: var(--bg-lighter-solid);
  width: 100%;
  border-radius: var(--rounded);
  padding: var(--s-2-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  color: var(--text);
}

.q__group__display-only {
  height: 100%;
  padding-block-end: var(--s-10);
}

.q__group-member {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  background-color: var(--bg-darker);
  border-radius: var(--rounded);
  font-size: var(--fonts-xsm);
  font-weight: var(--semi-bold);
  padding-inline-end: var(--s-2-5);
}

.q__group-member__name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 7.5rem;
  font-size: var(--fonts-xs);
}

.q__group-member__tier {
  margin-inline-start: auto;
}

.q__group-member__extra-info {
  font-size: var(--fonts-xs);
  background-color: var(--bg-darker);
  border-radius: var(--rounded);
  padding: var(--s-0-5) var(--s-2);
  width: max-content;
  display: flex;
  align-items: center;
  gap: var(--s-1-5);
  font-weight: var(--semi-bold);
}

.q__group-member__note-textarea {
  height: 4rem !important;
}

.q__member-placeholder {
  border-radius: 100%;
  background-color: var(--bg-lightest);
  height: 24px;
  width: 24px;
  display: grid;
  place-items: center;
  font-weight: var(--semi-bold);
}

.q__group-member-weapons {
  display: flex;
  gap: var(--s-1);
  margin-block-start: -2px;
}

.q__group-member-weapon {
  background-color: var(--bg);
  border-radius: 100%;
  padding: var(--s-1);
  overflow: visible;
}

.q__group-member-vc-icon {
  height: 15px;
  stroke-width: 2;
}

.q__group-member__star {
  min-width: 18px;
  max-width: 18px;
  color: var(--theme-secondary);
  stroke-width: 2;
}

.q__group-member__star__inactive {
  color: var(--text-lighter);
}

.q__group__display-group-tier {
  display: flex;
  gap: var(--s-1);
  align-items: center;
  position: absolute;
  border-radius: var(--rounded);
  background-color: var(--bg-darker);
  padding: var(--s-0-5) var(--s-2-5);
  font-size: var(--fonts-xs);
  font-weight: var(--semi-bold);
  bottom: -36px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.q__member-adder__input {
  --input-width: 11rem;
  width: 11rem;
}

.q-preparing__card-container {
  min-width: 250px;
  margin: 0 auto;
}

.q-match__join-discord-section {
  border-left: 4px solid var(--theme);
  padding-inline-start: var(--s-4);
  font-size: var(--fonts-sm);
  color: var(--text-lighter);
  margin-block-start: var(--s-1);
}

.q-match__join-discord-section__highlighted {
  font-size: var(--fonts-md);
  letter-spacing: 1px;
  color: var(--text);
  font-weight: var(--semi-bold);
}

.q-match__container {
  /** Push footer down to avoid it "flashing" when the score reporter animates */
  padding-bottom: 14rem;
}

.q-match__header {
  line-height: 1.2;
}

.q-match__teams-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}

.q-match__report__user-name-container {
  display: flex;
  gap: var(--s-2);
  width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.q-match__report-section {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: var(--s-2);
  column-gap: var(--s-4);
  align-items: center;
  font-size: var(--fonts-xs);
}

@media screen and (min-width: 640px) {
  .q-match__teams-container.with-chat {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .q-match__teams-container {
    grid-template-columns: 1fr 1fr;
  }
}