body {
  background-color: var(--fs-color-neutral-light-05);
}

.navbar-brand {
  height: auto !important;
}

.navbar-brand img {
  height: 32px;
}

.navbar-form {
  height: 58px;
  margin: 0 !important;
  display: flex;
  align-items: center;
}

.header h2 {
  font-weight: bold;
}

.header h2 span {
  color: var(--fs-color-brand-01-base);
}

.banner {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.footer {
  text-align: center;
  padding: 16px 0;
  font-size: 12px;
  color: var(--fs-color-neutral-light-30);
}

.banner {
  background-image: url('./banner.png');
  background-size: cover;
  background-position: top center;
  height: 336px;
}

.fluig-style-guide .card {
  border-bottom: 3px solid var(--fs-color-brand-01-base);
}

.fluig-style-guide .card-body {
  height: 270px
}

.fluig-style-guide .card-body > h4 {
  height: 42px;
}

.brand-color-1 {
  --fs-color-brand-01-lightest: #fde5e9;
  --fs-color-brand-01-lighter:  #fbbdc6;
  --fs-color-brand-01-light:    #f76b82; /* #F76B82 */
  --fs-color-brand-01-base:     #ec5564; /* #EC5564 */
  --fs-color-brand-01-dark:     #d94452; /* #D94452 */
  --fs-color-brand-01-darker:   #b33642;
  --fs-color-brand-01-darkest:  #8a2934;
  --fs-color-action-default: var(--fs-color-brand-01-base);
  --fs-color-action-hover: var(--fs-color-brand-01-dark);
  --fs-color-action-pressed: var(--fs-color-brand-01-darker);
  --fs-color-action-focus: var(--fs-color-brand-01-darkest);
  --btn-primary-bg-color: var(--fs-color-action-default);
  --btn-primary-bg-hover-color: var(--fs-color-action-hover);
  --btn-primary-bg-active-color: var(--fs-color-action-pressed);
  --btn-primary-border-color: var(--fs-color-transparent);
  --btn-primary-focus-border-color: var(--fs-color-brand-01-darkest);
  --btn-primary-border-hover-color: var(--fs-color-transparent);
}

.brand-color-2 {
  --fs-color-brand-01-lightest: #e0f7f4;
  --fs-color-brand-01-lighter:  #a6e9df;
  --fs-color-brand-01-light:    #62ddbd; /* #62DDBD */
  --fs-color-brand-01-base:     #46cead; /* #46CEAD */
  --fs-color-brand-01-dark:     #35b99b; /* #35B99B */
  --fs-color-brand-01-darker:   #28957e;
  --fs-color-brand-01-darkest:  #1b6b5b;
  --fs-color-action-default: var(--fs-color-brand-01-base);
  --fs-color-action-hover: var(--fs-color-brand-01-dark);
  --fs-color-action-pressed: var(--fs-color-brand-01-darker);
  --fs-color-action-focus: var(--fs-color-brand-01-darkest);
  --btn-primary-bg-color: var(--fs-color-action-default);
  --btn-primary-bg-hover-color: var(--fs-color-action-hover);
  --btn-primary-bg-active-color: var(--fs-color-action-pressed);
  --btn-primary-border-color: var(--fs-color-transparent);
  --btn-primary-focus-border-color: var(--fs-color-brand-01-darkest);
  --btn-primary-border-hover-color: var(--fs-color-transparent);
}

.brand-color-3 {
  --fs-color-brand-01-lightest: #dce9f9;
  --fs-color-brand-01-lighter:  #a7c4ee;
  --fs-color-brand-01-light:    #5b9be0;
  --fs-color-brand-01-base:     #3d7dc3;
  --fs-color-brand-01-dark:     #2f64a3;
  --fs-color-brand-01-darker:   #214b7f;
  --fs-color-brand-01-darkest:  #163358;
  --fs-color-action-default: var(--fs-color-brand-01-base);
  --fs-color-action-hover: var(--fs-color-brand-01-dark);
  --fs-color-action-pressed: var(--fs-color-brand-01-darker);
  --fs-color-action-focus: var(--fs-color-brand-01-darkest);
  --btn-primary-bg-color: var(--fs-color-action-default);
  --btn-primary-bg-hover-color: var(--fs-color-action-hover);
  --btn-primary-bg-active-color: var(--fs-color-action-pressed);
  --btn-primary-border-color: var(--fs-color-transparent);
  --btn-primary-focus-border-color: var(--fs-color-brand-01-darkest);
  --btn-primary-border-hover-color: var(--fs-color-transparent);
}

.brand-color-4 {
  --fs-color-brand-01-lightest: #f0f0f0;
  --fs-color-brand-01-lighter:  #d2d6da;
  --fs-color-brand-01-light:    #a9b1bc; /* #A9B1BC */
  --fs-color-brand-01-base:     #646c77; /* #646C77 */
  --fs-color-brand-01-dark:     #424953; /* #424953 */
  --fs-color-brand-01-darker:   #2e333a;
  --fs-color-brand-01-darkest:  #1b1e22;
  --fs-color-action-default: var(--fs-color-brand-01-base);
  --fs-color-action-hover: var(--fs-color-brand-01-dark);
  --fs-color-action-pressed: var(--fs-color-brand-01-darker);
  --fs-color-action-focus: var(--fs-color-brand-01-darkest);
  --btn-primary-bg-color: var(--fs-color-action-default);
  --btn-primary-bg-hover-color: var(--fs-color-action-hover);
  --btn-primary-bg-active-color: var(--fs-color-action-pressed);
  --btn-primary-border-color: var(--fs-color-transparent);
  --btn-primary-focus-border-color: var(--fs-color-brand-01-darkest);
  --btn-primary-border-hover-color: var(--fs-color-transparent);
}