// app global css in SCSS form
.text-gunmetal {
  color: $gunmetal !important;
}
.bg-gunmetal {
  background: $gunmetal !important;
}

.text-charcoal {
  color: $charcoal !important;
}
.bg-charcoal {
  background: $charcoal !important;
}

.kb-container {
  width: 100%;
}

.kb-page {
  padding-top: 8px;
  padding-right: 20px;
  padding-bottom: 8px;
  padding-left: 20px;
}

.kb-info-page {
  padding-top: 8px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 20px;
}

.kb-footer {
  padding: 20px 8px;
}

.kb-selected-input,
.q-field__native {
  color: $charcoal !important;
}

.kb-selected-input .q-field__append {
  align-self: flex-end;
}

@media (min-width: $breakpoint-md-max) {
  .kb-container {
    max-width: 900px;
  }
}

[data-amplify-authenticator] {
  --amplify-components-authenticator-router-box-shadow: 0;
  --amplify-components-authenticator-form-padding: var(--amplify-space-medium)
    var(--amplify-space-xl) var(--amplify-space-xl);
  --amplify-components-button-primary-background-color: var($primary);
  --amplify-components-fieldcontrol-focus-box-shadow: 0;
  --amplify-components-tabs-item-active-border-color: var(
    --amplify-colors-neutral-100
  );
  --amplify-components-tabs-item-color: var(--amplify-colors-neutral-80);
  --amplify-components-tabs-item-active-color: var(--amplify-colors-purple-100);
  --amplify-components-button-link-color: var($primary);
  --amplify-components-button-link-active-background-color: transparent;
  --amplify-components-button-link-focus-background-color: transparent;
  --amplify-components-button-link-hover-background-color: transparent;
  --amplify-components-fieldcontrol-outline-color: var($primary);
}

body.mobile [data-amplify-authenticator] {
  --amplify-components-authenticator-router-border-width: 0;
}

body.desktop [data-amplify-authenticator] {
  --amplify-components-authenticator-router-border-width: 1px;
}

.amplify-button--primary {
  background: $primary;
}

.amplify-input {
  outline-width: 2px !important;
  outline-style: solid !important;
  outline-color: #ffffff !important;
}

.amplify-input:focus {
  outline-color: $primary !important;
  border: none !important;
}

#scroll-placeholder {
  height: 1px;
}

.q-message-text:last-child {
  max-height: 0 !important;
}

.kb-message-sent-name {
  text-align: right;
}

.info-h1 {
  color: $primary;
  font-size: 2.4em;
  font-weight: 700;
}

.info-h2 {
  color: $primary;
  font-size: 2.2em;
  font-weight: 700;
  border-width: 0 0 1px 0;
  border-color: $secondary;
  border-style: solid;
}

.info-h3 {
  color: $gunmetal;
  font-size: 1.2em;
  font-weight: 700;
}
