$karl-overgrid-z-index: 9999;
$karl-color-1: map-get($k-colors, 'primary-1');
$karl-color-4: map-get($k-colors, 'primary-4');

.karl-Main {
  background-color: map-get($k-colors, 'background-2');
  margin: 0;
}

// Represent the grid visually

.karl-GridBox {
  min-height: 1rem;
  margin-bottom: 1rem;
  border: 1px solid white;
  border-radius: 2px;
  background: $karl-color-1;
}

.karl-RowBox {
  background-color: $karl-color-1;
  min-height: 1rem;

  &:nth-child(odd) {
    background-color: $karl-color-4;
  }
}

.karl-Link {
  @include k-typographyFontSize(-1, k-px-to-rem(40px));
  @include k-typographyFont('regular');
  text-decoration: none;
  color: map-get($k-colors, 'primary-1');

  &:hover {
    color: map-get($k-colors, 'primary-2');
  }
}

.karl-Height {
  height: k-px-to-rem(60px);
}

.karl-u-align-center\@xs-down {
  @include k-media-max('xs') {
    margin-left: auto;
    margin-right: auto;
  }
}

.karl-FormActions__button {
  @include k-media-max('s') {
    margin-bottom: k-px-to-rem(20px);
  }
}