@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap);
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-button {
  box-sizing: border-box;
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  border-color: transparent;
  border-radius: 4px;
  border-style: solid;
  border-width: 2px;
}
.gnt-button--variant-primary {
  transition: background-color 120ms;
  will-change: background-color;
  background-color: #26bbff;
}
.gnt-button--variant-primary:hover:not(:active) {
  background-color: #61cdff;
  transition: background-color 60ms;
  will-change: background-color;
}
.gnt-button--variant-primary:hover {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
}
.gnt-button--variant-secondary {
  transition: background-color 120ms;
  will-change: background-color;
  background-color: rgba(255, 255, 255, 0.1);
}
.gnt-button--variant-secondary:hover:not(:active) {
  background-color: rgba(255, 255, 255, 0.15);
  transition: background-color 60ms;
  will-change: background-color;
}
.gnt-button--variant-secondary:hover {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
}
.gnt-button--variant-red {
  transition: background-color 120ms;
  will-change: background-color;
  background-color: #ff4040;
}
.gnt-button--variant-red:hover:not(:active) {
  background-color: #ff6a6a;
  transition: background-color 60ms;
  will-change: background-color;
}
.gnt-button--variant-red:hover {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
}
.gnt-button--variant-green {
  transition: background-color 120ms;
  will-change: background-color;
  background-color: #8bc24a;
}
.gnt-button--variant-green:hover:not(:active) {
  background-color: #a8d177;
  transition: background-color 60ms;
  will-change: background-color;
}
.gnt-button--variant-green:hover {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
}
.gnt-button--variant-orange {
  transition: background-color 120ms;
  will-change: background-color;
  background-color: #fe9b07;
}
.gnt-button--variant-orange:hover:not(:active) {
  background-color: #feb64a;
  transition: background-color 60ms;
  will-change: background-color;
}
.gnt-button--variant-orange:hover {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
}
.gnt-button * {
  box-sizing: border-box;
}
.gnt-button.l-align-start {
  justify-content: flex-start;
}
.gnt-button:focus {
  outline: none;
}
.gnt-button--is-disabled {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.gnt-button--is-disabled:hover {
  background: none;
  box-shadow: initial;
}
.gnt-button--size-small {
  height: 24px;
  padding: 0 24px;
}
.gnt-button--size-medium {
  height: 32px;
  padding: 0 32px;
}
.gnt-button--size-large {
  height: 40px;
  padding: 0 40px;
}
.gnt-button--size-xlarge {
  height: 48px;
  padding: 0 48px;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-textlabel {
  font-family: Roboto;
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gnt-textlabel--color-blue {
  color: #26bbff;
}
.gnt-textlabel--color-red {
  color: #ff4040;
}
.gnt-textlabel--color-green {
  color: #8bc24a;
}
.gnt-textlabel--color-orange {
  color: #fe9b07;
}
.gnt-textlabel--color-black {
  color: #242424;
}
.gnt-textlabel--color-white {
  color: #fff;
}
.gnt-textlabel--color-white50 {
  color: rgba(255, 255, 255, 0.5);
}
.gnt-textlabel--color-white25 {
  color: rgba(255, 255, 255, 0.25);
}
.gnt-textlabel--color-white10 {
  color: rgba(255, 255, 255, 0.1);
}
.gnt-textlabel--variant-heading {
  font-family: Roboto Condensed;
  text-transform: uppercase;
}
.gnt-textlabel--variant-heading.gnt-textlabel--size-xsmall {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 20px;
}
.gnt-textlabel--variant-heading.gnt-textlabel--size-small {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 26px;
}
.gnt-textlabel--variant-heading.gnt-textlabel--size-medium {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 36px;
}
.gnt-textlabel--variant-heading.gnt-textlabel--size-large {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 48px;
}
.gnt-textlabel--variant-heading.gnt-textlabel--size-xlarge {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 72px;
}
.gnt-textlabel--variant-body.gnt-textlabel--size-xsmall {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 14px;
}
.gnt-textlabel--variant-body.gnt-textlabel--size-small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 18px;
}
.gnt-textlabel--variant-body.gnt-textlabel--size-medium {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 20px;
}
.gnt-textlabel--variant-body.gnt-textlabel--size-large {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
}
.gnt-textlabel--variant-body.gnt-textlabel--size-xlarge {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
}
.gnt-textlabel--variant-caption {
  text-transform: uppercase;
}
.gnt-textlabel--variant-caption.gnt-textlabel--size-small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 10px;
}
.gnt-textlabel--variant-caption.gnt-textlabel--size-medium {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 12px;
}
.gnt-textlabel--variant-caption.gnt-textlabel--size-large {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 14px;
}
.gnt-textlabel--variant-caption.gnt-textlabel--size-xlarge {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 16px;
}
.gnt-textlabel--variant-button {
  text-transform: uppercase;
  white-space: nowrap;
}
.gnt-textlabel--variant-button.gnt-textlabel--size-small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 10px;
}
.gnt-textlabel--variant-button.gnt-textlabel--size-medium {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 12px;
}
.gnt-textlabel--variant-button.gnt-textlabel--size-large {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 14px;
}
.gnt-textlabel--variant-button.gnt-textlabel--size-xlarge {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 16px;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-text-button {
  background: none;
  border: 0;
  display: block;
  font: inherit;
  padding: 0;
  text-align: initial;
  width: 100%;
  width: initial;
}
.gnt-text-button:focus {
  outline: none;
}
.gnt-text-button--has-icon {
  align-items: center;
  display: inline-grid;
  grid-template-columns: auto 1fr;
}
.gnt-text-button--is-disabled {
  pointer-events: none;
}
.gnt-text-button--is-disabled:hover {
  background: none;
  box-shadow: initial;
}
.gnt-text-button--icon-right .gnt-text-button__icon {
  order: 2;
}
.gnt-text-button--size-large {
  column-gap: 12px;
}
.gnt-text-button--size-medium {
  column-gap: 8px;
}
.gnt-text-button--size-small {
  column-gap: 4px;
}

.gnt-text-button:hover:not(:active) .gnt-text-button__icon {
  --icon-color: #fff;
}
.gnt-text-button:hover:not(:active) .gnt-text-button__icon path {
  transition: fill 60ms, stroke 60ms;
  will-change: fill, stroke;
}
.gnt-text-button:hover:not(:active) .gnt-text-button__caption {
  transition: color 60ms;
  will-change: color;
  color: #fff;
}

.gnt-text-button__icon path {
  transition: fill 120ms, stroke 120ms;
  will-change: fill, stroke;
}

.gnt-text-button__caption {
  transition: color 120ms;
  will-change: color;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-icon {
  --icon-color: none;
  --icon-color-secondary: #242424;
  height: 24px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
  width: 24px;
}
.gnt-icon--color-blue {
  --icon-color: #26bbff;
}
.gnt-icon--color-blue.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}
.gnt-icon--color-red {
  --icon-color: #ff4040;
}
.gnt-icon--color-red.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}
.gnt-icon--color-green {
  --icon-color: #8bc24a;
}
.gnt-icon--color-green.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}
.gnt-icon--color-orange {
  --icon-color: #fe9b07;
}
.gnt-icon--color-orange.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}
.gnt-icon--color-black {
  --icon-color: #242424;
}
.gnt-icon--color-black.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}
.gnt-icon--color-white {
  --icon-color: #fff;
}
.gnt-icon--color-white.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}
.gnt-icon--color-white50 {
  --icon-color: rgba(255, 255, 255, 0.5);
}
.gnt-icon--color-white50.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}
.gnt-icon--color-white25 {
  --icon-color: rgba(255, 255, 255, 0.25);
}
.gnt-icon--color-white25.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}
.gnt-icon--color-white10 {
  --icon-color: rgba(255, 255, 255, 0.1);
}
.gnt-icon--color-white10.gnt-icon--is-clickable:hover {
  --icon-color: #fff;
}

.gnt-icon--is-clickable .gnt-icon__path {
  transition: fill 120ms, stroke 120ms;
  will-change: fill, stroke;
}
.gnt-icon--is-clickable:hover .gnt-icon__path {
  transition: fill 60ms, stroke 60ms;
  will-change: fill, stroke;
}
.gnt-icon__path--fill {
  fill: var(--icon-color);
}
.gnt-icon__path--stroke {
  stroke: var(--icon-color);
}
.gnt-icon__path--stroke-secondary {
  stroke: var(--icon-color-secondary);
}
.gnt-icon__path--fill-secondary {
  fill: var(--icon-color-secondary);
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-card {
  background-color: #1a1a1a;
  border-radius: 8px;
  display: grid;
  grid-template-areas: "main";
  overflow: hidden;
}
.gnt-card:focus {
  outline: none;
}
.gnt-card--is-hovered {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24), 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.gnt-card--is-selected {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24), 0 0 0 2px #26bbff;
}

.gnt-card__image {
  --aspect-ratio: 1;
  align-items: stretch;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  border: initial;
  display: grid;
  grid-area: main;
  grid-template-areas: "main";
  outline: none;
  padding: 0;
}
.gnt-card__image--variant-contain {
  background-size: contain;
  margin: 10%;
}
.gnt-card__image--variant-cover {
  background-size: cover;
}
.gnt-card__image--variant-contain.gnt-card__image--ar-horizontal {
  margin: 5%;
}

.gnt-card:hover .gnt-card__image--has-gradient:before, .gnt-card--is-hovered .gnt-card__image--has-gradient:before {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4428) 19%, rgba(0, 0, 0, 0.3246) 34%, rgba(0, 0, 0, 0.2292) 47%, rgba(0, 0, 0, 0.1668) 56.5%, rgba(0, 0, 0, 0.1164) 65%, rgba(0, 0, 0, 0.0756) 73%, rgba(0, 0, 0, 0.045) 80.2%, rgba(0, 0, 0, 0.0252) 86.1%, rgba(0, 0, 0, 0.0126) 91%, rgba(0, 0, 0, 0.0048) 95.2%, rgba(0, 0, 0, 0.0012) 98.2%, rgba(0, 0, 0, 0) 100%);
  content: "";
  grid-area: main;
  height: 56px;
}
.gnt-card:hover .gnt-card__image--has-gradient:after, .gnt-card--is-hovered .gnt-card__image--has-gradient:after {
  align-self: end;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4428) 19%, rgba(0, 0, 0, 0.3246) 34%, rgba(0, 0, 0, 0.2292) 47%, rgba(0, 0, 0, 0.1668) 56.5%, rgba(0, 0, 0, 0.1164) 65%, rgba(0, 0, 0, 0.0756) 73%, rgba(0, 0, 0, 0.045) 80.2%, rgba(0, 0, 0, 0.0252) 86.1%, rgba(0, 0, 0, 0.0126) 91%, rgba(0, 0, 0, 0.0048) 95.2%, rgba(0, 0, 0, 0.0012) 98.2%, rgba(0, 0, 0, 0) 100%);
  content: "";
  grid-area: main;
  height: 56px;
}

.gnt-card__regions {
  display: grid;
  grid-area: main;
  grid-template-areas: "ltop top rtop" "l mid r" "lbot bot rbot";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 40px 1fr 40px;
  pointer-events: none;
}

.gnt-card__region {
  align-items: center;
  display: grid;
  grid-auto-flow: column;
  padding: 8px;
  visibility: hidden;
}
.gnt-card__region--is-interactive > * {
  pointer-events: initial;
}
.gnt-card__region--is-persistent, .gnt-card--is-hovered .gnt-card__region--is-overlay, .gnt-card:hover .gnt-card__region--is-overlay {
  visibility: initial;
}
.gnt-card__region--position-top-left {
  grid-area: ltop;
  justify-self: flex-start;
}
.gnt-card__region--position-top-right {
  grid-area: rtop;
  justify-self: flex-end;
}
.gnt-card__region--position-bottom-left {
  grid-area: lbot;
  justify-self: flex-start;
}
.gnt-card__region--position-bottom-right {
  grid-area: rbot;
  justify-self: flex-end;
}

.gnt-card__labelwrapper {
  padding: 0 4px;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-grid {
  --columns: 3;
  --cellgap: 8;
  align-items: stretch;
  display: grid;
  grid-gap: calc(var(--cellgap) * 1px);
  grid-template-columns: repeat(var(--columns), 1fr);
  justify-content: center;
}
.gnt-grid--boxpack {
  grid-auto-flow: row dense;
}

.gnt-grid__cell {
  --colspan: 1;
  --colspanadjusted: min(var(--colspan), var(--columns));
  --rowspan: 1;
  display: grid;
  grid-column-end: span var(--colspanadjusted);
  grid-row-end: span var(--rowspan);
  grid-template-areas: "main";
}
.gnt-grid__cell > * {
  grid-area: main;
}
.gnt-grid__cell::before {
  content: "";
  display: block;
  grid-area: main;
  padding-bottom: calc((calc(var(--rowspan) / var(--colspanadjusted)) * 100%) + calc((calc(var(--rowspan) / var(--colspanadjusted)) - 1) * ((var(--cellgap) * 1px))));
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-icon-button {
  --fillcolor: transparent;
  --bordercolor: transparent;
  --hovercolor: transparent;
  background-color: transparent;
  border-radius: 50%;
  border-style: none;
  display: grid;
  grid-template-areas: "main";
  height: var(--size);
  padding: 0;
  place-items: center;
  stroke-width: 1.5;
  width: var(--size);
}
.gnt-icon-button:hover:not(:active) {
  --fillcolor: var(--hovercolor);
  --bordercolor: var(--hovercolor);
}
.gnt-icon-button:hover:not(:active) .gnt-icon-button__circle {
  transition: fill 60ms, stroke 60ms;
  will-change: fill, stroke;
}
.gnt-icon-button:focus {
  outline: none;
}
.gnt-icon-button--variant-primary {
  --fillcolor: #26bbff;
  --bordercolor: #26bbff;
  --hovercolor: #61cdff;
}
.gnt-icon-button--variant-secondary {
  --fillcolor: #383838;
  --bordercolor: #383838;
  --hovercolor: #6a6a6a;
}
.gnt-icon-button--variant-green {
  --fillcolor: #8bc24a;
  --bordercolor: #8bc24a;
  --hovercolor: #a8d177;
}
.gnt-icon-button--variant-orange {
  --fillcolor: #fe9b07;
  --bordercolor: #fe9b07;
  --hovercolor: #feb64a;
}
.gnt-icon-button--variant-red {
  --fillcolor: #ff4040;
  --bordercolor: #ff4040;
  --hovercolor: #ff6a6a;
}
.gnt-icon-button--size-small {
  --size: 24px;
}
.gnt-icon-button--size-large {
  --size: 32px;
}
.gnt-icon-button--is-disabled {
  --fillcolor: transparent;
  --bordercolor: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  pointer-events: none;
}
.gnt-icon-button--is-disabled:hover {
  background: none;
  box-shadow: initial;
}
.gnt-icon-button--has-shadow {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
}

.gnt-icon-button__plate {
  grid-area: main;
}

.gnt-icon-button__circle {
  transition: fill 120ms, stroke 120ms;
  will-change: fill, stroke;
  fill: var(--fillcolor);
  height: var(--size);
  stroke: var(--bordercolor);
  stroke-linecap: round;
  stroke-linejoin: round;
  width: var(--size);
}

.gnt-icon-button__icon {
  grid-area: main;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-avatar {
  background-color: #383838;
  border-radius: 50%;
  overflow: hidden;
}
.gnt-avatar__initials {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-family: Roboto;
  height: 100%;
  width: 100%;
}
.gnt-avatar__initials.l-align-start {
  justify-content: flex-start;
}
.gnt-avatar__image {
  background-size: 100%;
  border-radius: 50%;
  display: block;
  height: 100%;
  width: 100%;
}
.gnt-avatar__image--has-initials {
  transform: translate(0, -100%);
}
.gnt-avatar--size-xlarge {
  font-size: 56px;
  height: 128px;
  line-height: calc(56px - 0.1px);
  width: 128px;
}
.gnt-avatar--size-large {
  font-size: 24px;
  height: 64px;
  line-height: calc(24px - 0.1px);
  width: 64px;
}
.gnt-avatar--size-medium {
  font-size: 16px;
  height: 48px;
  line-height: calc(16px - 0.1px);
  width: 48px;
}
.gnt-avatar--size-small {
  font-size: 12px;
  height: 32px;
  line-height: calc(12px - 0.1px);
  width: 32px;
}
.gnt-avatar--size-xsmall {
  font-size: 8px;
  height: 20px;
  line-height: calc(8px - 0.1px);
  width: 20px;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-checkbox-outerwrap {
  font-size: 0;
}

.gnt-checkbox-wrap {
  display: inline-block;
}
.gnt-checkbox-wrap:focus {
  outline: none;
}

.gnt-checkbox {
  align-items: flex-start;
  column-gap: 8px;
  cursor: default;
  display: inline-grid;
  grid-auto-flow: column;
}
.gnt-checkbox:focus {
  outline: none;
}
.gnt-checkbox--is-disabled {
  pointer-events: none;
}
.gnt-checkbox--is-disabled:hover {
  background: none;
  box-shadow: initial;
}

.gnt-checkbox__input {
  display: none;
}

.gnt-checkbox__icon {
  transition: opacity 120ms;
  will-change: opacity;
}
.gnt-checkbox__icon--is-disabled {
  opacity: 0.25;
}
.gnt-checkbox-wrap[aria-checked=false] .gnt-checkbox__icon--is-enabled:hover {
  --icon-color: #fff;
  transition: opacity 60ms;
  will-change: opacity;
  opacity: 1;
}

.gnt-checkbox__icon > * {
  transition: fill 120ms, stroke 120ms;
  will-change: fill, stroke;
}
.gnt-checkbox:hover .gnt-checkbox__icon > * {
  transition: fill 60ms, stroke 60ms;
  will-change: fill, stroke;
}

.gnt-checkbox__label {
  user-select: none;
}
.gnt-checkbox__label--medium {
  margin-top: 2px;
}
.gnt-checkbox__label--small {
  margin-top: 3px;
}

.gnt-checkbox__description {
  margin-left: 32px;
}
.gnt-checkbox__description--medium {
  margin-top: 4px;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-color-tag {
  height: 24px;
  width: 24px;
}
.gnt-color-tag--color-blue {
  --bgcolor: #26bbff;
}
.gnt-color-tag--color-orange {
  --bgcolor: #fe9b07;
}
.gnt-color-tag--color-green {
  --bgcolor: #8bc24a;
}
.gnt-color-tag--color-red {
  --bgcolor: #ff4040;
}
.gnt-color-tag--color-yellow {
  --bgcolor: #ffdc1a;
}
.gnt-color-tag--color-brown {
  --bgcolor: #804d39;
}
.gnt-color-tag--color-pink {
  --bgcolor: #ff729c;
}
.gnt-color-tag--color-purple {
  --bgcolor: #a139bf;
}
.gnt-color-tag--color-gray {
  --bgcolor: #808080;
}
.gnt-color-tag--color-black {
  --bgcolor: #0f0f0f;
}
.gnt-color-tag--color-white {
  --bgcolor: #fff;
}
.gnt-color-tag--has-emphasis circle {
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 2px;
}

.gnt-color-tag--variant-small .gnt-color-tag__path {
  fill: var(--bgcolor);
}
.gnt-color-tag--variant-large .gnt-color-tag__path {
  fill: var(--bgcolor);
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-input-wrap {
  align-items: center;
  display: inline-grid;
  flex-flow: row nowrap;
  grid-template-areas: "icon-left main icon-right" "error error error";
  grid-template-columns: 0 auto 0;
  grid-template-rows: auto auto;
  line-height: 0;
}

.gnt-input {
  background-color: #1a1a1a;
  border-radius: 4px;
  border-style: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: Roboto;
  grid-area: main;
  padding: 0 12px;
}
.gnt-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.gnt-input--size-small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 18px;
  height: 24px;
  padding: 0 8px;
}
.gnt-input--size-large {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 20px;
  height: 32px;
}
.gnt-input--has-icon-left {
  padding-left: 32px;
}
.gnt-input--has-icon-right {
  padding-right: 32px;
}
.gnt-input--has-value {
  color: #fff;
}
.gnt-input--is-multiline {
  height: auto;
  padding: 6px 12px;
  resize: none;
}
.gnt-input--is-number::-webkit-inner-spin-button {
  visibility: hidden;
}
.gnt-input:disabled {
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.gnt-input:disabled:placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.gnt-input:hover {
  box-shadow: 0 0 0 2px #383838;
}
.gnt-input:focus {
  box-shadow: 0 0 0 2px #26bbff;
  outline: none;
}
.gnt-input--has-warning, .gnt-input--has-warning:hover, .gnt-input--has-warning:focus {
  box-shadow: 0 0 0 2px #fe9b07;
}
.gnt-input--has-error, .gnt-input--has-error:hover, .gnt-input--has-error:focus {
  box-shadow: 0 0 0 2px #ff4040;
}

.gnt-input__icon-wrap {
  display: inline-block;
  width: 0;
}
.gnt-input__icon-wrap--left {
  grid-area: icon-left;
  transform: translate(4px, 0);
}
.gnt-input__icon-wrap--right {
  grid-area: icon-right;
  transform: translate(-28px, 0);
}

.gnt-input__helper {
  grid-area: error;
  padding-top: 8px;
}

.gnt-input::-webkit-credentials-auto-fill-button {
  transition: background-color 120ms;
  will-change: background-color;
  background-color: rgba(255, 255, 255, 0.5);
}
.gnt-input::-webkit-credentials-auto-fill-button:hover {
  transition: background-color 60ms;
  will-change: background-color;
  background-color: #fff;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-pill {
  transition: background-color 120ms;
  will-change: background-color;
  background-color: rgba(255, 255, 255, 0.1);
  align-items: center;
  border-radius: calc(var(--size) / 2);
  display: inline-grid;
  grid-template-columns: 1fr auto;
  height: var(--size);
  justify-content: space-between;
  user-select: none;
}
.gnt-pill:hover:not(:active) {
  background-color: rgba(255, 255, 255, 0.15);
  transition: background-color 60ms;
  will-change: background-color;
}
.gnt-pill:hover {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
}
.gnt-pill--variant-large {
  --size: 24px;
  padding: 0 12px;
}
.gnt-pill--variant-large.gnt-pill--has-icon {
  gap: 2px;
  padding-right: 4px;
}
.gnt-pill--variant-medium {
  --size: 20px;
  padding: 0 10px;
}
.gnt-pill--variant-medium.gnt-pill--has-icon {
  padding-right: 2px;
}
.gnt-pill--variant-small {
  --size: 16px;
  padding: 0 8px;
}
.gnt-pill--variant-small.gnt-pill--has-icon {
  padding-right: 0;
}
.gnt-pill:focus {
  outline: none;
}

.gnt-pill--variant-small .gnt-pill__icon {
  margin: -4px 0;
}
.gnt-pill--variant-medium .gnt-pill__icon {
  margin: -2px 0;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-progress {
  --value: 0;
  --meter-color: #26bbff;
  display: grid;
  grid-template-areas: "main";
}
.gnt-progress--variant-linear {
  border-radius: 4px;
  height: 4px;
  min-width: 96px;
  overflow: hidden;
  will-change: transform;
}
.gnt-progress--variant-radial {
  height: var(--size);
  stroke-width: 1.5;
  width: var(--size);
}
.gnt-progress--size-small {
  --size: 24px;
}
.gnt-progress--size-large {
  --size: 32px;
}

.gnt-progress__glyph {
  grid-area: main;
}

.gnt-progress__track--variant-linear {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  grid-area: main;
  height: 4px;
}
.gnt-progress__track--variant-radial {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-linecap: round;
}

.gnt-progress__meter--color-blue {
  --meter-color: #26bbff;
  stroke: url("#gnt-progress__gradient--color-blue");
}
.gnt-progress__meter--color-red {
  --meter-color: #ff4040;
  stroke: url("#gnt-progress__gradient--color-red");
}
.gnt-progress__meter--color-green {
  --meter-color: #8bc24a;
  stroke: url("#gnt-progress__gradient--color-green");
}
.gnt-progress__meter--color-orange {
  --meter-color: #fe9b07;
  stroke: url("#gnt-progress__gradient--color-orange");
}
.gnt-progress__meter--color-black {
  --meter-color: #242424;
  stroke: url("#gnt-progress__gradient--color-black");
}
.gnt-progress__meter--color-white {
  --meter-color: #fff;
  stroke: url("#gnt-progress__gradient--color-white");
}
.gnt-progress__meter--color-white50 {
  --meter-color: rgba(255, 255, 255, 0.5);
  stroke: url("#gnt-progress__gradient--color-white50");
}
.gnt-progress__meter--color-white25 {
  --meter-color: rgba(255, 255, 255, 0.25);
  stroke: url("#gnt-progress__gradient--color-white25");
}
.gnt-progress__meter--color-white10 {
  --meter-color: rgba(255, 255, 255, 0.1);
  stroke: url("#gnt-progress__gradient--color-white10");
}
.gnt-progress__meter.gnt-progress__meter--variant-linear {
  border-radius: 4px;
  grid-area: main;
}
.gnt-progress__meter.gnt-progress__meter--variant-linear.gnt-progress__meter--has-value {
  background-color: var(--meter-color);
  transition: width 240ms;
  width: calc(var(--value) * 100%);
  will-change: width;
}
.gnt-progress__meter.gnt-progress__meter--variant-linear.gnt-progress__meter--no-value {
  animation: gnt-progress__anim-runner 1.8s linear infinite;
  background-image: linear-gradient(90deg, transparent, var(--meter-color));
  background-position: right;
  background-repeat: repeat-y;
  background-size: 100% 100%;
  will-change: transform;
}
.gnt-progress__meter.gnt-progress__meter--variant-radial {
  --origin: calc(var(--size) / 2);
  fill: transparent;
  transform-origin: var(--origin) var(--origin);
  will-change: transform;
}
.gnt-progress__meter.gnt-progress__meter--variant-radial.gnt-progress__meter--has-value {
  stroke: var(--meter-color);
  transform: rotate(-90deg);
}
.gnt-progress__meter.gnt-progress__meter--variant-radial.gnt-progress__meter--no-value {
  animation: gnt-progress__anim-rot 1.2s linear infinite;
}
.gnt-progress__meter.gnt-progress__meter--variant-radial.gnt-progress__meter--is-running {
  stroke-linecap: round;
}

@keyframes gnt-progress__anim-rot {
  to {
    transform: rotate(360deg);
  }
}
@keyframes gnt-progress__anim-runner {
  from {
    transform: translate(-100%, 0);
  }
  to {
    transform: translate(100%, 0);
  }
}
#gnt-progress__gradient--color-blue {
  --meter-color: #26bbff;
}

#gnt-progress__gradient--color-red {
  --meter-color: #ff4040;
}

#gnt-progress__gradient--color-green {
  --meter-color: #8bc24a;
}

#gnt-progress__gradient--color-orange {
  --meter-color: #fe9b07;
}

#gnt-progress__gradient--color-black {
  --meter-color: #242424;
}

#gnt-progress__gradient--color-white {
  --meter-color: #fff;
}

#gnt-progress__gradient--color-white50 {
  --meter-color: rgba(255, 255, 255, 0.5);
}

#gnt-progress__gradient--color-white25 {
  --meter-color: rgba(255, 255, 255, 0.25);
}

#gnt-progress__gradient--color-white10 {
  --meter-color: rgba(255, 255, 255, 0.1);
}

.gnt-progress__gradient-stop {
  stop-color: var(--meter-color);
}
.gnt-progress__gradient-stop__start {
  stop-opacity: 0;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-radio-button {
  display: inline-block;
  font-size: 0;
}
.gnt-radio-button[aria-disabled=true] {
  pointer-events: none;
}
.gnt-radio-button:focus {
  outline: none;
}

.gnt-radio-button__inner {
  align-items: flex-start;
  column-gap: 8px;
  display: inline-grid;
  grid-auto-flow: column;
}
.gnt-radio-button__inner:focus {
  outline: none;
}

.gnt-radio-button__input {
  display: none;
}

.gnt-radio-button__icon {
  transition: opacity 120ms;
  will-change: opacity;
}
.gnt-radio-button__icon--is-disabled {
  opacity: 0.25;
}
.gnt-radio-button[aria-checked=false] .gnt-radio-button__icon--is-enabled:hover {
  --icon-color: #fff;
  transition: opacity 60ms;
  will-change: opacity;
  opacity: 1;
}

.gnt-radio-button__icon path {
  transition: fill 120ms, stroke 120ms;
  will-change: fill, stroke;
}
.gnt-radio-button:hover .gnt-radio-button__icon path {
  transition: fill 60ms, stroke 60ms;
  will-change: fill, stroke;
}

.gnt-radio-button__label {
  color: #fff;
  user-select: none;
}
.gnt-radio-button__label--medium {
  margin-top: 2px;
}
.gnt-radio-button__label--small {
  margin-top: 3px;
}
.gnt-radio-button[aria-disabled=true] .gnt-radio-button__label {
  color: rgba(255, 255, 255, 0.25);
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-radiogroup {
  display: grid;
  grid-auto-flow: row;
  justify-items: flex-start;
  row-gap: 16px;
}
.gnt-radiogroup:focus {
  outline: none;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-segcontrol {
  display: inline-grid;
  font-size: 0;
  grid-auto-columns: auto;
  grid-auto-flow: column;
}
.gnt-segcontrol--is-disabled {
  pointer-events: none;
}

.gnt-segcontrol__option {
  background-color: #383838;
}
.gnt-segcontrol__option:first-child {
  border-radius: 4px 0 0 4px;
}
.gnt-segcontrol__option:last-child {
  border-radius: 0 4px 4px 0;
}
.gnt-segcontrol__option--is-active {
  background-color: #1a1a1a;
}
.gnt-segcontrol__option--is-disabled {
  background-color: #383838;
}
.gnt-segcontrol__option:focus {
  outline: none;
}

.gnt-segcontrol__iconwrap {
  align-items: center;
  display: grid;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.gnt-segcontrol__iconwrap:focus {
  outline: none;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-tabcontrol__list {
  align-items: stretch;
  column-gap: 24px;
  display: inline-grid;
  font-size: 0;
  grid-auto-flow: column;
  justify-content: center;
  padding: 0 24px;
}
.gnt-tabcontrol__list--size-large {
  height: 48px;
}
.gnt-tabcontrol__list--size-medium {
  height: 40px;
}
.gnt-tabcontrol__list--size-small {
  height: 32px;
}

.gnt-tabcontrol__tab {
  cursor: default;
  display: grid;
  place-items: center;
}
.gnt-tabcontrol__tab:focus {
  outline: none;
}

.gnt-tabcontrol__label {
  transition: color 120ms;
  will-change: color;
}
.gnt-tabcontrol__tab:focus .gnt-tabcontrol__label, .gnt-tabcontrol__tab:hover .gnt-tabcontrol__label {
  transition: color 60ms;
  will-change: color;
  color: #fff;
}

.gnt-tabcontrol__cursor {
  transition: left 120ms, width 120ms;
  will-change: left, width;
  background-color: #26bbff;
  height: 2px;
  position: absolute;
}
.gnt-tabcontrol__cursor--size-large {
  transform: translate(0, 46px);
}
.gnt-tabcontrol__cursor--size-medium {
  transform: translate(0, 38px);
}
.gnt-tabcontrol__cursor--size-small {
  transform: translate(0, 30px);
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-dropdown {
  transition: box-shadow 120ms;
  will-change: box-shadow;
  background-color: #1a1a1a;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  min-width: 96px;
  padding: 0 0 0 12px;
  place-items: center start;
  user-select: none;
}
.gnt-dropdown--variant-xsmall {
  height: 20px;
}
.gnt-dropdown--variant-small {
  height: 24px;
}
.gnt-dropdown--variant-large {
  height: 32px;
}
.gnt-dropdown:focus {
  outline: none;
}
.gnt-dropdown:hover {
  transition: box-shadow 60ms;
  will-change: box-shadow;
  box-shadow: 0 0 0 2px #383838;
}

.gnt-dropdown__value {
  cursor: default;
  padding: 0 32px 0 0;
}

.gnt-dropdown__icon {
  align-items: center;
  align-self: stretch;
  border-left: 2px solid #242424;
  display: grid;
  min-height: 1px;
  place-content: center;
  width: 32px;
}
.gnt-dropdown__icon:hover > * {
  transition: opacity 60ms;
  will-change: opacity;
  opacity: 1;
}
.gnt-dropdown__icon > * {
  transition: opacity 120ms;
  will-change: opacity;
  flex: 1 1 auto;
  opacity: 0.25;
}

.gnt-dropdown__popup {
  border-radius: 6px;
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
  overflow: hidden;
  z-index: 1;
}

.gnt-dropdown__option {
  background-color: #383838;
  display: grid;
  gap: 8px;
  grid-template-areas: "icon label";
  grid-template-columns: 24px 1fr;
  height: 32px;
  padding: 0 8px;
  place-items: center start;
}
.gnt-dropdown__option--hovered {
  background-color: #2f2f2f;
  outline: none;
}
.gnt-dropdown__option--current {
  background: #242424;
}
.gnt-dropdown__option--variant-xsmall {
  height: 24px;
}
.gnt-dropdown__option--variant-small {
  height: 24px;
}
.gnt-dropdown__option--variant-large {
  height: 32px;
}

.gnt-dropdown__check {
  grid-area: check;
  pointer-events: none;
}

.gnt-dropdown__option-label {
  cursor: default;
  grid-area: label;
  pointer-events: none;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-asseticon {
  display: grid;
  grid-template-areas: "icon" "label";
  height: 72px;
  place-items: center;
  width: 72px;
}

.gnt-asseticon__icon {
  grid-area: icon;
}

.gnt-asseticon__label {
  grid-area: label;
}

.gnt-asseticon__variations {
  grid-area: icon;
}

.gnt-asseticonasset__path {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}
.gnt-asseticonasset__path--fill {
  fill: rgba(255, 255, 255, 0.5);
}
.gnt-asseticonasset__path--stroke {
  stroke: rgba(255, 255, 255, 0.5);
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-progressbutton {
  align-items: center;
  column-gap: 4px;
  display: grid;
  grid-template-areas: "main" "caption";
  justify-content: center;
  overflow: hidden;
  row-gap: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gnt-progressbutton--size-large {
  padding: 4px 0 0;
  width: 72px;
}
.gnt-progressbutton--size-large > .gnt-textlabel {
  text-align: center;
}
.gnt-progressbutton--size-small {
  grid-template-areas: "caption main";
  grid-template-columns: 1fr auto;
}
.gnt-progressbutton--size-small > .gnt-textlabel {
  text-align: right;
}

.gnt-progressbutton__button {
  display: grid;
  grid-area: main;
  grid-template-areas: "main";
  place-items: center;
}

.gnt-progressbutton__start-button {
  transition: opacity 120ms;
  will-change: opacity;
  grid-area: main;
  opacity: 0;
}
.gnt-progressbutton__start-button--state-initial {
  opacity: 1;
}
.gnt-progressbutton .gnt-progressbutton__start-button--state-completed:hover, .gnt-progressbutton .gnt-progressbutton__start-button--state-failed:hover {
  transition: opacity 60ms;
  will-change: opacity;
  opacity: 1;
}

.gnt-progressbutton__stop-button {
  transition: opacity 120ms;
  will-change: opacity;
  grid-area: main;
  opacity: 0;
  pointer-events: none;
}
.gnt-progressbutton--size-small .gnt-progressbutton__stop-button--state-running {
  pointer-events: initial;
}
.gnt-progressbutton--size-small .gnt-progressbutton__stop-button--state-running:hover, .gnt-progressbutton--size-large .gnt-progressbutton__stop-button--state-running {
  transition: opacity 60ms;
  will-change: opacity;
  opacity: 1;
  pointer-events: initial;
}

.gnt-progressbutton__progress {
  transition: opacity 120ms;
  will-change: opacity;
  grid-area: main;
}
.gnt-progressbutton__progress--state-initial {
  display: none;
}
.gnt-progressbutton__progress--state-initial, .gnt-progressbutton__button:hover .gnt-progressbutton__progress--state-completed, .gnt-progressbutton__button:hover .gnt-progressbutton__progress--state-failed {
  transition: opacity 60ms;
  will-change: opacity;
  opacity: 0;
}

.gnt-progressbutton__icon {
  grid-area: main;
  opacity: 0;
}
.gnt-progressbutton .gnt-progressbutton__icon--state-completed:not(:hover), .gnt-progressbutton .gnt-progressbutton__icon--state-failed:not(:hover) {
  transition: opacity 60ms;
  will-change: opacity;
  opacity: 1;
}

.gnt-progressbutton__caption {
  grid-area: caption;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-popup {
  border-radius: 6px;
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.gnt-popup__header {
  align-items: center;
  background: #2f2f2f;
  display: grid;
  grid-auto-flow: column;
  height: 48px;
  justify-content: space-between;
  padding: 0 12px 0 16px;
}

.gnt-popup__guts {
  background: #242424;
  padding: 48px;
}

.gnt-popup__footer {
  background: #242424;
  border-top: 2px solid #1a1a1a;
  padding: 16px;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-stack {
  align-items: center;
  display: grid;
  grid-gap: 16px;
  justify-content: start;
}

.gnt-stack--h {
  grid-auto-flow: column;
}

.gnt-stack--v {
  grid-auto-flow: row;
}

.gnt-stack--separators {
  grid-gap: 12px;
}

.gnt-stack--space-between {
  justify-content: space-between;
}

.gnt-stack__separator {
  background: rgba(255, 255, 255, 0.5);
  height: 10px;
  width: 1px;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-menu {
  background-color: #383838;
  border-radius: 8px;
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
  display: grid;
  max-width: 240px;
  min-width: 160px;
  padding: 8px 0;
}

.gnt-menu__submenu {
  display: grid;
}

.gnt-menu__header {
  display: flex;
  padding: 0 16px;
  place-items: center start;
}
.gnt-menu__header--size-small {
  height: 24px;
}
.gnt-menu__header--size-large {
  height: 32px;
}

.gnt-menu__divider {
  background-color: #2f2f2f;
  height: 2px;
  margin: 8px 0;
  user-select: none;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-menu-item-wrap {
  background: none;
  border: 0;
  display: block;
  font: inherit;
  padding: 0;
  text-align: initial;
  width: 100%;
  background-color: #383838;
}
.gnt-menu-item-wrap:focus {
  outline: none;
}

.gnt-menu-item {
  align-items: center;
  border-radius: 4px;
  cursor: default;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 8px;
  grid-template-areas: "main chevron";
  grid-template-columns: 1fr auto;
  margin: 0 8px;
  max-width: 100%;
  overflow: hidden;
  padding: 0 8px;
  user-select: none;
  white-space: nowrap;
}

.gnt-menu-item:focus,
.gnt-menu-item-wrap--can-self-highlight:hover .gnt-menu-item,
.gnt-menu-item--has-highlight {
  background-color: #2f2f2f;
  outline: none;
}

.gnt-menu-item--variant-small {
  height: 24px;
}

.gnt-menu-item--variant-large {
  height: 32px;
}

.gnt-menu-item--is-checkable {
  grid-template-areas: "check main chevron";
  grid-template-columns: 12px 1fr auto;
}

.gnt-menu-item--has-icon {
  grid-template-areas: "icon main chevron";
  grid-template-columns: 24px 1fr auto;
}

.gnt-menu-item--has-icon.gnt-menu-item--is-checkable {
  grid-template-areas: "icon check main chevron";
  grid-template-columns: 24px 12px 1fr auto;
}

.gnt-menu-item__icon {
  grid-area: icon;
}

.gnt-menu-item__check {
  display: grid;
  grid-area: check;
}

.gnt-menu-item__label {
  grid-area: main;
}

.gnt-menu-item__chevron {
  grid-area: chevron;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-card-base {
  background-repeat: no-repeat;
  background-size: cover;
  cursor: default;
  display: grid;
  grid-template-areas: "main";
}
.gnt-card-base:focus {
  outline: none;
}

.gnt-card-base--is-clickable {
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
}
.gnt-card-base--is-clickable:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 16px 24px 0 rgba(0, 0, 0, 0.24);
}

.gnt-card-base--has-aspectratio::after {
  content: "";
  grid-area: main;
  padding-bottom: 56.25%;
  pointer-events: none;
}

.gnt-card-base__content {
  align-content: end;
  display: grid;
  grid-area: main;
  grid-gap: 8px;
  grid-template-areas: "main";
  padding: var(--content-padding);
}

.gnt-card-base__content--gradient-horizontal {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6273) 19%, rgba(0, 0, 0, 0.45985) 34%, rgba(0, 0, 0, 0.3247) 47%, rgba(0, 0, 0, 0.2363) 56.5%, rgba(0, 0, 0, 0.1649) 65%, rgba(0, 0, 0, 0.1071) 73%, rgba(0, 0, 0, 0.06375) 80.2%, rgba(0, 0, 0, 0.0357) 86.1%, rgba(0, 0, 0, 0.01785) 91%, rgba(0, 0, 0, 0.0068) 95.2%, rgba(0, 0, 0, 0.0017) 98.2%, rgba(0, 0, 0, 0) 100%);
  background-repeat: no-repeat;
  justify-self: flex-start;
  padding-right: calc(var(--content-padding) * 4);
}

.gnt-card-base__content--gradient-vertical {
  align-self: flex-end;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6273) 19%, rgba(0, 0, 0, 0.45985) 34%, rgba(0, 0, 0, 0.3247) 47%, rgba(0, 0, 0, 0.2363) 56.5%, rgba(0, 0, 0, 0.1649) 65%, rgba(0, 0, 0, 0.1071) 73%, rgba(0, 0, 0, 0.06375) 80.2%, rgba(0, 0, 0, 0.0357) 86.1%, rgba(0, 0, 0, 0.01785) 91%, rgba(0, 0, 0, 0.0068) 95.2%, rgba(0, 0, 0, 0.0017) 98.2%, rgba(0, 0, 0, 0) 100%);
  background-repeat: no-repeat;
  padding-top: calc(var(--content-padding) * 2);
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-banner-card {
  height: 400px;
}

.gnt-banner-card__content {
  max-width: min(560px, 50%);
  min-width: min(480px, 75%);
}

.gnt-banner-card__body {
  display: grid;
  grid-gap: 8px;
}

.gnt-banner-card__actions {
  display: flex;
  grid-gap: 24px;
  margin: 16px 0 0 0;
  place-items: center left;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
/* stylelint-disable function-parentheses-space-inside */
.gnt-brand-logo {
  --bgcolor: transparent;
  --symbolcolor: #fff;
  background-color: var(--bgcolor);
  display: block;
  height: calc(var(--size) * 1px);
  width: calc(var(--size) * 1px);
}
.gnt-brand-logo--quixel {
  --hovercolor: transparent;
}
.gnt-brand-logo--megascans {
  --bgcolor: #8bc24a;
  --hovercolor: #a8d177;
}
.gnt-brand-logo--bridge {
  --bgcolor: #26bbff;
  --hovercolor: #61cdff;
}
.gnt-brand-logo--mixer {
  --bgcolor: #ff4040;
  --hovercolor: #ff6a6a;
}
.gnt-brand-logo--tracker {
  --bgcolor: #fe9b07;
  --hovercolor: #feb64a;
}
.gnt-brand-logo--palette {
  --bgcolor: transparent;
  background-image: conic-gradient(from -90deg at 50% 50%, #fe9b07 -44.92deg, #8bc24a 44.85deg, #26bbff 135.08deg, #ff4040 225.15deg, #fe9b07 315.08deg, #8bc24a 404.85deg);
}

.gnt-brand-logo--is-hoverable {
  transition: background-color 120ms, background-image 120ms;
  will-change: background-color, background-image;
}
.gnt-brand-logo--is-hoverable:hover {
  transition: background-color 60ms, background-image 60ms;
  will-change: background-color, background-image;
  background-color: var(--hovercolor);
}
.gnt-brand-logo--is-hoverable:hover.gnt-brand-logo--quixel {
  --symbolcolor: rgba(255, 255, 255, 0.85);
}
.gnt-brand-logo--is-hoverable:hover.gnt-brand-logo--palette {
  --hovercolor: transparent;
  background-image: conic-gradient(from -90deg at 50% 50%, #feb64a -44.92deg, #a8d177 44.85deg, #61cdff 135.08deg, #ff6a6a 225.15deg, #feb64a 315.08deg, #a8d177 404.85deg);
}

.gnt-brand-logo__symbol {
  transition: fill 120ms;
  will-change: fill;
  fill: var(--symbolcolor);
}
.gnt-brand-logo--is-hoverable:hover .gnt-brand-logo__symbol {
  transition: fill 60ms;
  will-change: fill;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-toast {
  background-color: #383838;
  border-radius: 4px;
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
  padding: 16px;
  padding-right: 24px;
  position: relative;
  width: 320px;
}

.gnt-toast__close {
  position: absolute;
  right: 4px;
  top: 4px;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-select {
  cursor: default;
  display: grid;
  -webkit-user-select: none;
  user-select: none;
}
.gnt-select > div[role=listbox]:focus {
  outline: none;
}

.gnt-select__toggle {
  align-items: center;
  background-color: #1a1a1a;
  border: 0;
  border-radius: 4px;
  display: grid;
  grid-template-areas: "main chevron";
  grid-template-columns: 1fr auto;
  padding: 0;
  text-align: initial;
}
.gnt-select__toggle--variant-small {
  height: 24px;
  padding-left: 8px;
}
.gnt-select__toggle--variant-large {
  height: 32px;
  padding-left: 12px;
}
.gnt-select__toggle:focus {
  outline: none;
}

.gnt-select:hover .gnt-select__toggle {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.gnt-select:focus-within .gnt-select__toggle {
  box-shadow: 0 0 0 2px #26bbff;
}
.gnt-select:focus-within .gnt-select__label {
  color: #fff;
}
.gnt-select:focus-within .gnt-select__chevron {
  --icon-color: #fff;
}

.gnt-select__chevron {
  grid-area: chevron;
}

.gnt-select__menu {
  background-color: #383838;
  border-radius: 4px;
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 8px 0;
}

.gnt-select__item {
  list-style: none;
  text-indent: 0;
}
/**
 * Color palette choices
 */
/**
 * Box shadow size choices
 */
/**
 * Font size choices
 */
/**
 * Line height choices
 */
/**
 * Letter spacing choices
 */
/**
 * Border size choices
 */
/**
 * Padding choices
 */
/**
 * Element fixed height choices
 */
/**
 * Font family choices
 */
/**
 * Font weight choices
 */
/**
 * Timing choices
 */
.gnt-combo-box {
  align-items: center;
  background-color: #1a1a1a;
  border-radius: 4px;
}
.gnt-combo-box--variant-small {
  height: 24px;
  padding-left: 8px;
}
.gnt-combo-box--variant-large {
  height: 32px;
  padding-left: 12px;
  padding-right: 4px;
}

.gnt-combo-box__combo {
  display: grid;
  grid-template-areas: "main toggle";
  grid-template-columns: minmax(0, 1fr) auto;
}

.gnt-combo-box:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.gnt-combo-box:focus-within {
  box-shadow: 0 0 0 2px #26bbff;
}
.gnt-combo-box:focus-within .gnt-combo-box__input {
  color: #fff;
}
.gnt-combo-box:focus-within .gnt-combo-box__chevron {
  --icon-color: #fff;
}

.gnt-combo-box__input {
  background-color: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: Roboto;
  grid-area: main;
  padding: 0;
}
.gnt-combo-box__input--has-value {
  color: #fff;
}
.gnt-combo-box__input--variant-small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 18px;
  height: 24px;
}
.gnt-combo-box__input--variant-large {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 20px;
  height: 32px;
}
.gnt-combo-box__input:focus {
  outline: none;
}

.gnt-combo-box__button {
  background: none;
  border-left: 2px solid #242424;
  display: grid;
  grid-area: toggle;
  padding: 0;
  place-items: center;
}

.gnt-combo-box__menu {
  background-color: #383838;
  border-radius: 4px;
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.24);
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 8px 0;
}

.gnt-combo-box__menu-item {
  list-style: none;
}

.gnt-combo-box__not-found-msg {
  padding: 4px 8px;
  text-align: center;
}

/*# sourceMappingURL=granite.css.map*/