@import url(https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800&display=swap);
.knapsack-global-example {
  z-index: 616;
}

body {
  font-family: "Public Sans", sans-serif;
}

.ex-button {
  background-color: transparent;
  border: var(--spacing-1) solid transparent;
  border-radius: 3px;
  color: var(--color-brand-white);
  padding: calc(var(--spacing-s) - var(--spacing-xxs)) calc(var(--spacing-m) - var(--spacing-xxs));
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.ex-button--primary {
  border-color: var(--color-brand-primary);
  background-color: var(--color-brand-primary);
  color: var(--color-text-white);
}
.ex-button--primary:hover, .ex-button--primary:focus {
  border-color: var(--color-brand-secondary);
  background-color: var(--color-brand-secondary);
  color: var(--color-text-white);
}
.ex-button--secondary {
  background-color: var(--color-purple-medium);
  border-color: var(--color-purple-medium);
  color: var(--color-text-white);
}
.ex-button--secondary:hover, .ex-button--secondary:focus {
  border-color: var(--color-purple-rich);
  background-color: var(--color-purple-rich);
  color: var(--color-text-white);
}
.ex-button--success {
  border-color: var(--color-green-medium);
  background-color: var(--color-green-medium);
  color: var(--color-text-white);
}
.ex-button--success:hover, .ex-button--success:focus {
  border-color: var(--color-green-rich);
  background-color: var(--color-green-rich);
  color: var(--color-text-white);
}
.ex-button--danger {
  border-color: var(--color-red-medium);
  background-color: var(--color-red-medium);
  color: var(--color-text-white);
}
.ex-button--danger:hover, .ex-button--danger:focus {
  border-color: var(--color-red-deep);
  background-color: var(--color-red-deep);
  color: var(--color-text-white);
}
.ex-button--outline-primary {
  border-color: var(--color-brand-secondary);
  background-color: var(--color-text-white);
  color: var(--color-brand-secondary);
}
.ex-button--outline-primary:hover, .ex-button--outline-primary:focus {
  border-color: var(--color-brand-primary);
  background-color: var(--color-text-white);
  color: var(--color-brand-primary);
}
.ex-button--size-s {
  font-size: 12px;
  padding: calc(var(--spacing-xs) - var(--spacing-xxs)) calc(var(--spacing-s) - var(--spacing-xxs));
}
.ex-button--size-m {
  font-size: 16px;
}
.ex-button--size-l {
  font-size: 20px;
  padding: calc(var(--spacing-m) - var(--spacing-xxs)) calc(var(--spacing-l) - var(--spacing-xxs));
}
.ex-button--disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.ex-card {
  line-height: 1.4;
  font-size: 1rem;
  background-color: var(--color-layout-default-bg);
  border: var(--spacing-xxs) solid var(--color-layout-border);
  border-radius: var(--spacing-s);
  color: var(--color-text-default);
  font-size: 1rem;
  overflow: hidden;
}
.ex-card_img {
  width: 100%;
}
.ex-card_body {
  padding: var(--spacing-m);
}
.ex-card_body p:last-child {
  margin-bottom: 0;
}
.ex-card_title {
  color: var(--color-brand-primary);
  margin: 0;
  font-size: 1.2em;
}
.ex-card_subtitle {
  margin: var(--spacing-s) 0 0;
}
.ex-card_text {
  line-height: 1.4;
}
.ex-card_content + * {
  margin-top: var(--spacing-m);
}

.ex-chip {
  border-radius: 4px;
  display: inline-flex;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.ex-chip--small {
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1.2;
}
.ex-chip--medium {
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.2;
}
.ex-chip--neutral {
  background-color: #ccc;
  color: #666;
}
.ex-chip--info {
  background-color: #005172;
  color: #007ea3;
}

.ks-message {
  border-radius: 3px;
  color: var(--color-text-default);
  padding: var(--spacing-m) var(--spacing-m);
}
.ks-message__header {
  font-size: 20px;
  font-weight: 500;
}
.ks-message__header + .ks-message__inner {
  margin-top: var(--spacing-s);
  padding-top: var(--spacing-xs);
}
.ks-message__inner {
  font-weight: 300;
}
.ks-message__inner + .ks-message__footer {
  margin-top: var(--spacing-m);
}
.ks-message__footer a:link, .ks-message__footer a:visited {
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
}
.ks-message__footer a:hover {
  text-decoration: underline;
}
.ks-message__footer a {
  margin-right: var(--spacing-m);
}
.ks-message--type-info {
  background-color: var(--color-blue-sky);
}
.ks-message--type-info .ks-message__header {
  color: var(--color-blue-deep);
}
.ks-message--type-info .ks-message__footer a:link, .ks-message--type-info .ks-message__footer a:visited {
  color: var(--color-blue-deep);
}
.ks-message--type-success {
  background-color: var(--color-turquoise-lighter);
}
.ks-message--type-success .ks-message__header {
  color: var(--color-turquoise-deep);
}
.ks-message--type-success .ks-message__footer a:link, .ks-message--type-success .ks-message__footer a:visited {
  color: var(--color-turquoise-deep);
}
.ks-message--type-warning {
  background-color: var(--color-yellow-lighter);
}
.ks-message--type-warning .ks-message__header {
  color: var(--color-yellow-deep);
}
.ks-message--type-warning .ks-message__footer a:link, .ks-message--type-warning .ks-message__footer a:visited {
  color: var(--color-yellow-dee);
}
.ks-message--type-danger {
  background-color: var(--color-red-lightest);
}
.ks-message--type-danger .ks-message__header {
  color: var(--color-red-deep);
}
.ks-message--type-danger .ks-message__footer a:link, .ks-message--type-danger .ks-message__footer a:visited {
  color: var(--color-red-deep);
}


/*# sourceMappingURL=app-3f7845b6edd2132204d5.css.map*/