.ds-button {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: relative;
    width: auto;
    overflow: visible;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-4);
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: calc(var(--space-base) - 2px) var(--space-m);
    border-radius: var(--border-radius-default);
    transition: color var(--duration-s) var(--ease-out), background-color var(--duration-s) var(--ease-out);
    color: var(--color-neutral-darker);
    background-color: var(--color-neutral-80)
}

.ds-button>* {
    pointer-events: none
}

.ds-button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.ds-button:disabled {
    opacity: var(--opacity-disabled);
    cursor: default;
    pointer-events: none
}

.ds-button:hover,
.ds-button.ds-button-hover {
    color: var(--color-neutral-darker);
    background-color: var(--color-neutral-90)
}

.ds-button-primary {
    color: var(--color-neutral-white);
    background-color: var(--color-primary)
}

.ds-button-primary:hover,
.ds-button-primary.ds-button-hover {
    color: var(--color-neutral-white);
    background-color: var(--color-primary-light)
}

.ds-button-primary:active {
    background-color: var(--color-primary-dark)
}

.ds-button-primary-lighter {
    color: var(--color-neutral-white);
    background-color: var(--color-primary-lighter)
}

.ds-button-primary-lighter:hover,
.ds-button-primary-lighter.ds-button-hover {
    color: var(--color-neutral-white);
    background-color: var(--color-primary-lighter)
}

.ds-button-primary-lighter:active {
    background-color: var(--color-primary-lighter)
}

.ds-button-secondary {
    color: var(--color-neutral-white);
    background-color: var(--color-secondary)
}

.ds-button-secondary:hover,
.ds-button-secondary.ds-button-hover {
    color: var(--color-neutral-white);
    background-color: var(--color-secondary-light)
}

.ds-button-secondary:active {
    background-color: var(--color-secondary-dark)
}

.ds-button-danger {
    color: var(--color-neutral-white);
    background-color: var(--color-danger)
}

.ds-button-danger:hover,
.ds-button-danger.ds-button-hover {
    color: var(--color-neutral-white);
    background-color: var(--color-danger-light)
}

.ds-button-danger:active {
    background-color: var(--color-danger-dark)
}

.ds-button-success {
    color: var(--color-neutral-white);
    background-color: var(--color-success)
}

.ds-button-success:hover,
.ds-button-success.ds-button-hover {
    color: var(--color-neutral-white);
    background-color: var(--color-success-light)
}

.ds-button-success:active {
    background-color: var(--color-success-dark)
}

.ds-button-ghost {
    color: var(--color-neutral-darker);
    background-color: transparent;
    box-shadow: none
}

.ds-button-ghost:focus {
    box-shadow: none
}

.ds-button-ghost:hover,
.ds-button-ghost.ds-hover {
    background-color: var(--color-neutral-40-opacity-10)
}

.ds-button-ghost:active {
    background-color: var(--color-neutral-40-opacity-20)
}

.ds-button-ghost.ds-button-primary {
    color: var(--color-primary)
}

.ds-button-ghost.ds-button-secondary {
    color: var(--color-secondary)
}

.ds-button-ghost.ds-button-danger {
    color: var(--color-danger)
}

.ds-button-ghost.ds-button-success {
    color: var(--color-success)
}

.ds-button-outlined {
    color: var(--color-neutral-darker);
    background-color: transparent;
    box-shadow: none;
    border: var(--border-size-l) var(--border-style-default) var(--color-neutral-60);
    border-radius: var(--border-radius-default);
    padding: var(--space-s) calc(var(--space-m) - var(--border-size-l))
}

.ds-button-outlined:focus {
    box-shadow: none
}

.ds-button-outlined:hover,
.ds-button-outlined.ds-hover {
    background-color: var(--color-neutral-40-opacity-10)
}

.ds-button-outlined:active {
    background-color: var(--color-neutral-40-opacity-20)
}

.ds-button-outlined.ds-button-primary {
    border-color: var(--border-color-primary);
    color: var(--color-primary)
}

.ds-button-outlined.ds-button-secondary {
    border-color: var(--border-color-secondary);
    color: var(--color-secondary)
}

.ds-button-outlined.ds-button-danger {
    border-color: var(--border-color-danger);
    color: var(--color-danger)
}

.ds-button-outlined.ds-button-success {
    border-color: var(--border-color-success);
    color: var(--color-success)
}

.ds-button-outlined.ds-button-size-s {
    padding: var(--space-xs) calc(var(--space-s) - var(--border-size-l))
}

.ds-button-outlined.ds-button-size-l {
    padding: calc(var(--space-base) - var(--border-size-l)) calc(var(--space-m) - var(--border-size-l))
}

.ds-button-outlined.ds-button-size-xs {
    padding: calc(var(--space-xs) - var(--border-size-l)) var(--space-xs)
}

.ds-button-white {
    background-color: var(--color-neutral-100)
}

.ds-button-white:hover,
.ds-button-white.ds-hover {
    background-color: var(--color-neutral-80)
}

.ds-button-white.ds-button-primary {
    color: var(--color-primary)
}

.ds-button-white.ds-button-secondary {
    color: var(--color-secondary)
}

.ds-button-white.ds-button-danger {
    color: var(--color-danger)
}

.ds-button-white.ds-button-success {
    color: var(--color-success)
}

.ds-button-white:active {
    background-color: var(--color-neutral-60)
}

.ds-button-white:active.ds-button-primary {
    color: var(--color-primary-dark)
}

.ds-button-white:active.ds-button-secondary {
    color: var(--color-secondary-dark)
}

.ds-button-white:active.ds-button-danger {
    color: var(--color-danger-dark)
}

.ds-button-white:active.ds-button-success {
    color: var(--color-success-dark)
}

.ds-button-white.ds-button-ghost,
.ds-button-white.ds-button-outlined {
    background-color: transparent;
    color: var(--color-neutral-100) !important
}

.ds-button-white.ds-button-ghost:hover,
.ds-button-white.ds-button-ghost.ds-hover,
.ds-button-white.ds-button-outlined:hover,
.ds-button-white.ds-button-outlined.ds-hover {
    background-color: var(--color-neutral-40-opacity-10)
}

.ds-button-white.ds-button-ghost:active,
.ds-button-white.ds-button-outlined:active {
    background-color: var(--color-neutral-40-opacity-20)
}

.ds-button-white.ds-button-outlined {
    border-color: var(--color-neutral-100) !important
}

.ds-button-size-s {
    font-size: var(--font-size-4);
    padding: calc(var(--space-s) - 2px) var(--space-s);
    line-height: var(--line-height-4)
}

.ds-button-size-xs {
    font-size: var(--font-size-3);
    padding: var(--space-xs) calc(var(--space-s) - 2px);
    line-height: var(--line-height-3);
    text-transform: uppercase
}

.ds-button-size-l {
    font-size: var(--font-size-5);
    padding: var(--space-base) var(--space-m);
    line-height: var(--line-height-5)
}

.ds-button-icon-only {
    width: var(--size-height-default);
    height: var(--size-height-default);
    border-radius: var(--border-radius-rounded)
}

.ds-button-icon-only:before,
.ds-button-icon-only:after {
    border-radius: var(--border-radius-rounded)
}

.ds-button-icon-only.ds-button-size-xs {
    width: var(--size-height-xs);
    height: var(--size-height-xs)
}

.ds-button-icon-only.ds-button-size-s {
    width: var(--size-height-s);
    height: var(--size-height-s)
}

.ds-button-icon-only.ds-button-size-l {
    width: var(--size-height-l);
    height: var(--size-height-l)
}

.ds-button-fullwidth {
    width: 100%
}

.ds-button-text {
    width: 100%;
    line-height: var(--line-height-4);
    display: inline;
    white-space: normal;
    margin: 0 var(--space-xxs)
}

.ds-button-text:first-child {
    margin-left: 0
}

.ds-button-text:last-child {
    margin-right: 0
}

.ds-button-size-s.ds-button-text-only .ds-button-text {
    line-height: var(--line-height-3)
}

.ds-button-fullwidth.ds-button-text-align-center .ds-button-text {
    text-align: center
}

.ds-button-fullwidth.ds-button-text-align-left .ds-button-text {
    text-align: left
}

.ds-button-fullwidth.ds-button-text-align-right .ds-button-text {
    text-align: right
}

.ds-button-size-xs .ds-button-text {
    line-height: var(--line-height-3)
}

.ds-button-text-only {
    line-height: var(--line-height-4);
    text-align: inherit;
    padding: 0;
    border-radius: 0;
    background-color: transparent !important;
    vertical-align: bottom
}

.ds-button-text-only.ds-button-size-s,
.ds-button-text-only.ds-button-size-xs {
    font-size: var(--font-size-3);
    line-height: var(--line-height-3)
}

.ds-button-text-only.ds-button-size-l {
    font-size: var(--font-size-5);
    line-height: var(--line-height-5)
}

.ds-button-text-only.ds-button-primary-lighter {
    color: var(--color-primary-lighter)
}

.ds-button-text-only:hover.ds-button-primary,
.ds-button-text-only.ds-button-hover.ds-button-primary {
    color: var(--color-primary-light)
}

.ds-button-text-only:hover.ds-button-secondary,
.ds-button-text-only.ds-button-hover.ds-button-secondary {
    color: var(--color-secondary-light)
}

.ds-button-text-only:hover.ds-button-danger,
.ds-button-text-only.ds-button-hover.ds-button-danger {
    color: var(--color-danger-light)
}

.ds-button-text-only:hover.ds-button-success,
.ds-button-text-only.ds-button-hover.ds-button-success {
    color: var(--color-success-light)
}

.ds-button-text-only:hover.ds-button-primary-lighter,
.ds-button-text-only.ds-button-hover.ds-button-primary-lighter {
    color: var(--color-primary-lighter)
}

a.ds-button-text-only {
    vertical-align: baseline;
    display: inline
}

a.ds-button-text-only.ds-button-has-icon-left {
    vertical-align: top
}

.ds-copy-field {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-xxs);
    position: relative;
    font-family: var(--font-family-text);
    line-height: var(--line-height-4);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--border-radius-default);
    letter-spacing: var(--letter-spacing-small-heading);
    background-color: var(--color-neutral-80)
}

.ds-copy-field:last-child {
    margin-bottom: 0
}

.ds-copy-field-s {
    font-size: var(--font-size-3)
}

.ds-copy-field-l {
    font-size: var(--font-size-5)
}

.ds-copy-field-link {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: absolute;
    right: var(--space-xxs);
    top: 50%;
    transform: translateY(-50%);
    user-select: none
}

.ds-copy-field-message {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    user-select: none;
    visibility: visible;
    opacity: 1;
    transition: all var(--duration-xl) var(--ease-out)
}

.ds-copy-field-message-text {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    padding: var(--space-xs) var(--space-s);
    transition: all var(--duration-xl) var(--ease-out);
    transform: scale(1);
    transform-origin: 0 50%
}

.ds-copy-field-message-enter,
.ds-copy-field-message-leave-to {
    visibility: hidden;
    opacity: 0
}

.ds-copy-field-message-enter .ds-copy-field-message-text,
.ds-copy-field-message-leave-to .ds-copy-field-message-text {
    transform: scale(1.2)
}

.ds-data-display {
    font-family: var(--font-family-default);
    color: var(--color-neutral-10)
}

.ds-data-display .data-display-text {
    overflow: hidden;
    text-overflow: ellipsis
}

.data-display-row {
    font-size: var(--font-size-5);
    line-height: var(--line-height-5);
    font-weight: var(--font-weight-default);
    padding-top: var(--space-xs)
}

.data-display-row:first-child {
    margin-top: 0;
    padding-top: 0
}

.display-row-with-action {
    display: flex;
    padding-bottom: var(--space-s);
    border-bottom: var(--border-size-default) var(--border-style-default) var(--color-neutral-60);
    position: relative
}

.display-row-with-action .data-display-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: var(--space-base)
}

.display-row-with-action .data-display-button {
    position: relative;
    margin-left: auto;
    bottom: -3px
}

.display-row-with-action .ds-button-text {
    flex: 1;
    white-space: nowrap
}

.display-row-error {
    color: var(--color-danger)
}

.display-row-disabled {
    opacity: var(--opacity-disabled)
}

.data-display-button {
    position: absolute;
    right: 0;
    bottom: var(--space-s)
}

.data-display-action:hover {
    cursor: pointer
}

.ds-list {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-m);
    margin-top: var(--space-base);
    font-family: var(--font-family-text);
    font-size: var(--font-size-4);
    line-height: var(--line-height-4);
    list-style-type: none;
    text-align: left
}

.ds-list:last-child {
    margin-bottom: 0
}

.ds-list:first-child {
    margin-top: 0
}

ol.ds-list {
    counter-reset: list-counter
}

.ds-list-size-s {
    font-size: var(--font-size-3);
    line-height: var(--line-height-3)
}

.ds-list-size-l {
    font-size: var(--font-size-5);
    line-height: var(--line-height-5)
}

.ds-list-size-xl {
    font-size: var(--font-size-6);
    line-height: var(--line-height-6)
}

.ds-list-item {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-s);
    display: flex
}

.ds-list-item:last-child {
    margin-bottom: 0
}

.ds-list-item-prefix {
    padding-right: .5rem;
    width: 2rem
}

ol .ds-list-item-prefix {
    width: 2.5em
}

.ds-list-item-content {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0
}

.ds-list-item>.ds-list-item-prefix:before {
    display: flex;
    justify-content: flex-end
}

ul>.ds-list-item>.ds-list-item-prefix:before {
    content: '\2022';
    font-size: 1.25em
}

ol>.ds-list-item>.ds-list-item-prefix:before {
    content: counter(list-counter) ".";
    counter-increment: list-counter
}

.ds-table-wrap {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: auto
}

.ds-table-wrap.ds-table-striped {
    border-radius: var(--border-radius-default)
}

.ds-table {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    width: 100%
}

.ds-table tr {
    background-color: var(--color-neutral-100)
}

.ds-table-col {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border-bottom: var(--color-neutral-80) var(--border-style-default) var(--border-size-default);
    vertical-align: top;
    padding: var(--space-s) var(--space-xxs)
}

.ds-table-striped .ds-table-col {
    padding: var(--space-s);
    border-bottom: none
}

.ds-table-small .ds-table-col {
    padding: var(--space-xs) var(--space-xxs)
}

.ds-table-small.ds-table-striped .ds-table-col {
    padding: var(--space-xs) var(--space-s)
}

.ds-table-col.ds-table-col-align-right {
    text-align: right
}

.ds-table-col.ds-table-col-align-center {
    text-align: center
}

.ds-table-head-col {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border-bottom: var(--color-neutral-80) var(--border-style-default) var(--border-size-default);
    padding: var(--space-s) var(--space-xxs);
    text-align: left;
    font-weight: var(--font-weight-bold)
}

.ds-table-striped .ds-table-head-col {
    padding: var(--space-s);
    border-bottom: none
}

.ds-table-small .ds-table-head-col {
    padding: var(--space-xs) var(--space-xxs)
}

.ds-table-small.ds-table-striped .ds-table-head-col {
    padding: var(--space-xs) var(--space-s)
}

.ds-table-head-col.ds-table-head-col-align-right {
    text-align: right
}

.ds-table-head-col.ds-table-head-col-align-center {
    text-align: center
}

.ds-table-striped tbody tr:nth-child(odd) {
    background-color: var(--color-neutral-90)
}

.ds-form-item {
    margin-bottom: var(--space-l);
    display: flex;
    flex-flow: column nowrap
}

.ds-form-item:last-child {
    margin-bottom: 0
}

.ds-input-error {
    color: var(--color-danger);
    font-size: var(--font-size-3);
    line-height: var(--line-height-3);
    margin-top: var(--space-xxs)
}

.ds-input-error-enter-active {
    transition: opacity var(--duration-default) var(--ease-out), transform var(--duration-default) var(--ease-out)
}

.ds-input-error-enter,
.ds-input-error-leave-to {
    opacity: 0;
    transform: translateY(-2px)
}

.ds-form-item-label-actions-container {
    min-height: var(--text-line-height-heading);
    line-height: var(--text-line-height-heading);
    margin-bottom: var(--space-xs);
    display: flex;
    justify-content: space-between
}

.ds-form-item-label-actions-container.ds-has-description {
    margin-bottom: var(--space-xxs)
}

.ds-action-label-after-tab {
    order: -1
}

.ds-input-label {
    color: var(--color-neutral-darker);
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-line-height-heading);
    font-family: var(--font-family-heading-s)
}

.ds-input-label .ds-icon-clickable {
    color: var(--color-primary)
}

.ds-input-action {
    align-self: flex-end;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-family-heading-s);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-bold);
    line-height: var(--space-base);
    margin-left: auto;
    white-space: nowrap
}

.ds-input-helper {
    margin-top: var(--space-xxs);
    color: var(--color-neutral-30);
    line-height: var(--line-height-3);
    font-size: var(--font-size-3)
}

.gutter {
    flex: 1 0 var(--space-xs)
}

.ds-input-description {
    margin-bottom: var(--space-xs);
    color: var(--color-neutral-30);
    line-height: var(--line-height-3);
    font-size: var(--font-size-3)
}

.ds-checkbox {
    outline: none;
    line-height: var(--text-line-height-default);
    display: flex;
    align-items: flex-start
}

.ds-input-is-disabled .ds-checkbox,
.ds-checkbox:disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
    cursor: not-allowed
}

.ds-checkbox-vertical {
    flex-direction: column
}

.ds-checkbox-option {
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none
}

.ds-checkbox-option:not(.ds-button) {
    margin-right: var(--space-s)
}

.ds-checkbox-option:not(.ds-button):last-child {
    margin-right: 0
}

.ds-checkbox-option.ds-checkbox-option-is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
    cursor: not-allowed
}

.ds-radio-option-vertical {
    margin-top: var(--space-s)
}

.ds-checkbox-option-mark-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--space-l);
    width: var(--space-l);
    min-width: var(--space-l);
    margin-right: var(--space-xs)
}

.ds-button .ds-checkbox-option-mark-container {
    height: auto
}

.ds-checkbox-option-mark {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    width: var(--font-size-5);
    height: var(--font-size-5);
    border: var(--border-size-default) var(--border-style-default) var(--color-neutral-30);
    background-color: var(--color-white);
    border-radius: var(--border-radius-s)
}

.ds-checkbox-option-mark .ds-checkbox-icon {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0);
    opacity: 0;
    width: var(--font-size-4);
    height: var(--font-size-4);
    color: var(--color-white);
    background-color: inherit
}

.ds-checkbox-option-is-selected .ds-checkbox-option-mark .ds-checkbox-icon {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%) scale(1)
}

.ds-checkbox-option-mark:hover {
    background-color: var(--color-primary-inverse);
    border-color: var(--color-primary)
}

.ds-checkbox-option-is-selected .ds-checkbox-option-mark {
    border-color: var(--color-primary);
    background-color: var(--color-primary)
}

.ds-input-is-disabled .ds-checkbox-option-is-selected .ds-checkbox-option-mark,
.ds-checkbox:disabled .ds-checkbox-option-is-selected .ds-checkbox-option-mark {
    border-color: var(--color-neutral-30);
    background-color: var(--color-neutral-30)
}

.ds-checkbox-option-is-selected.ds-checkbox-option-is-disabled .ds-checkbox-option-mark {
    border-color: var(--color-neutral-30);
    background-color: var(--color-neutral-30)
}

.ds-checkbox-option-label {
    font-size: var(--font-size-4);
    cursor: pointer
}

.ds-checkbox-option-slot {
    margin-left: calc(var(--space-l) + var(--space-xs))
}

.ds-input-wrap {
    position: relative
}

.ds-input {
    appearance: none;
    box-sizing: border-box;
    font-size: var(--font-size-4);
    line-height: var(--text-line-height-default);
    font-family: var(--font-family-text);
    width: 100%;
    padding: calc( var(--space-s) - var(--border-size-default)) calc( var(--space-s) - var(--border-size-default));
    height: var(--space-xxl);
    color: var(--color-neutral-darker);
    background: var(--color-white);
    border: var(--border-size-default) var(--border-style-default) var(--color-neutral-dark);
    border-radius: var(--border-radius-default);
    outline: none;
    transition: all var(--duration-s) var(--ease-out)
}

.ds-input::placeholder {
    color: var(--color-neutral)
}

.ds-input-has-focus .ds-input,
.ds-input:focus {
    border-width: var(--border-size-active);
    border-color: var(--border-color-active);
    padding: calc(var(--space-s) - var(--border-size-active));
    background: var(--color-white)
}

.ds-input-is-disabled .ds-input,
.ds-input:disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
    cursor: not-allowed
}

.ds-input-is-readonly .ds-input {
    pointer-events: none;
    background-color: var(--color-neutral-lighter);
    border-color: var(--color-neutral-lighter)
}

.ds-input-has-error .ds-input {
    border-color: var(--border-color-danger)
}

.ds-input-size-small {
    font-size: var(--font-size-3)
}

.ds-input-size-small .ds-input {
    font-size: var(--font-size-4);
    height: calc( var(--font-size-4) * var(--line-height-4) + (var(--space-xxs) + var(--border-size-default)) * 2);
    padding: var(--space-xxs) var(--space-xs)
}

.ds-input-size-large {
    font-size: var(--font-size-5)
}

.ds-input-size-large .ds-input {
    font-size: var(--font-size-5);
    height: calc( var(--font-size-5) * var(--line-height-4) + (var(--space-xs) + var(--border-size-default)) * 2);
    padding: var(--space-xs) var(--space-xs)
}

.ds-input-icon,
.ds-input-icon-right {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neutral-40);
    transition: color var(--duration-s) var(--ease-out);
    pointer-events: none;
    font-size: var(--font-size-5)
}

.ds-input-has-focus .ds-input-icon,
.ds-input-has-focus .ds-input-icon-right {
    color: var(--color-neutral-darker)
}

.ds-input-icon {
    padding-right: var(--space-xs);
    padding-left: var(--space-s)
}

.ds-input-icon-right {
    right: 0;
    left: auto;
    padding-right: var(--space-s);
    padding-left: var(--space-xs)
}

.ds-input-has-icon {
    padding-left: calc( var(--space-s) + var(--space-l) + var(--space-xs) - var(--border-size-default))
}

.ds-input-has-focus .ds-input-has-icon,
.ds-input-has-icon:focus {
    padding-left: calc( var(--space-xs) + var(--space-l) + var(--space-s) - var(--border-size-active))
}

.ds-input-has-icon-right {
    padding-right: calc( var(--space-xs) + var(--space-l) + var(--space-s) - var(--border-size-default))
}

.ds-input-has-focus .ds-input-has-icon-right,
.ds-input-has-icon-right:focus {
    padding-right: calc( var(--space-xs) + var(--space-l) + var(--space-s) - var(--border-size-active))
}

textarea.ds-input {
    height: auto;
    min-height: var(--space-xxl);
    resize: none
}

textarea.ds-input-size-small {
    min-height: calc( var(--font-size-4) * var(--line-height-4) + (var(--space-xxs) + var(--border-size-default)) * 2)
}

textarea.ds-input-size-large {
    min-height: calc( var(--font-size-5) * var(--line-height-4) + (var(--space-xs) + var(--border-size-default)) * 2)
}

.ds-icon-clickable-icon {
    pointer-events: all;
    cursor: pointer
}

.ds-icon-clickable-icon:hover .ds-icon {
    color: var(--color-primary)
}

.ds-icon-clickable-icon:active .ds-icon {
    color: var(--color-primary-dark)
}

.ds-radio {
    outline: none;
    line-height: var(--text-line-height-default)
}

.ds-input-is-disabled .ds-radio,
.ds-radio:disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
    cursor: not-allowed
}

.ds-radio-option {
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none
}

.ds-radio-option:not(.ds-button) {
    margin-right: var(--space-s)
}

.ds-radio-option:not(.ds-button):last-child {
    margin-right: 0
}

.ds-radio-option-vertical {
    display: flex;
    margin-top: var(--space-s)
}

.ds-radio-option-mark-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--space-l);
    width: var(--space-l);
    min-width: var(--space-l);
    margin-right: var(--space-xs)
}

.ds-button .ds-radio-option-mark-container {
    height: auto
}

.ds-radio-option-mark {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    width: var(--font-size-5);
    height: var(--font-size-5);
    border: var(--border-size-default) var(--border-style-default) var(--color-neutral-30);
    background-color: var(--color-white);
    border-radius: var(--border-radius-circle)
}

.ds-radio-option-mark:before {
    position: absolute;
    box-sizing: border-box;
    content: '';
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(0);
    opacity: 0;
    width: var(--font-size-3);
    height: var(--font-size-3);
    border-radius: var(--border-radius-circle);
    background-color: var(--color-primary);
    transition: all var(--duration-s) var(--ease-in-sharp)
}

.ds-radio-option-is-selected .ds-radio-option-mark:before {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%) scale(1)
}

.ds-input-is-disabled .ds-radio-option-mark:before,
.ds-radio:disabled .ds-radio-option-mark:before {
    background-color: var(--color-neutral-30)
}

.ds-radio-option-mark:hover {
    background-color: var(--color-primary-inverse);
    border-color: var(--color-primary)
}

.ds-radio-option-is-selected .ds-radio-option-mark {
    border-color: var(--color-primary);
    background-color: var(--color-white)
}

.ds-input-is-disabled .ds-radio-option-mark,
.ds-radio:disabled .ds-radio-option-mark {
    border-color: var(--color-neutral-30)
}

.ds-radio-option-label {
    font-size: var(--font-size-4);
    cursor: pointer;
    width: 100%;
    max-width: var(--size-width-xl)
}

.ds-radio-option-bold {
    font-weight: var(--font-weight-bold)
}

.ds-icon {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    height: 1em
}

.ds-icon-svg {
    line-height: 1;
    height: 1.2em;
    fill: currentColor
}

.ds-icon-clickable {
    cursor: pointer
}

.ds-icon-primary {
    color: var(--color-primary)
}

.ds-icon-primary:active {
    color: var(--color-primary-dark)
}

.ds-icon-danger {
    color: var(--color-danger)
}

.ds-icon-danger:active {
    color: var(--color-danger-dark)
}

.ds-icon-success {
    color: var(--color-success)
}

.ds-icon-success:active {
    color: var(--color-success-dark)
}

.ds-select-wrap {
    position: relative
}

.ds-select {
    appearance: none;
    box-sizing: border-box;
    font-size: var(--font-size-4);
    line-height: var(--text-line-height-default);
    font-family: var(--font-family-text);
    width: 100%;
    padding: calc( var(--space-s) - var(--border-size-default)) calc( var(--space-s) - var(--border-size-default));
    height: var(--space-xxl);
    color: var(--color-neutral-darker);
    background: var(--color-white);
    border: var(--border-size-default) var(--border-style-default) var(--color-neutral-dark);
    border-radius: var(--border-radius-default);
    outline: none;
    transition: all var(--duration-s) var(--ease-out)
}

.ds-select::placeholder {
    color: var(--color-neutral)
}

.ds-input-has-focus .ds-select,
.ds-select:focus {
    border-width: var(--border-size-active);
    border-color: var(--border-color-active);
    padding: calc(var(--space-s) - var(--border-size-active));
    background: var(--color-white)
}

.ds-input-is-disabled .ds-select,
.ds-select:disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
    cursor: not-allowed
}

.ds-input-is-readonly .ds-select {
    pointer-events: none;
    background-color: var(--color-neutral-lighter);
    border-color: var(--color-neutral-lighter)
}

.ds-input-has-error .ds-select {
    border-color: var(--border-color-danger)
}

.ds-input-size-small {
    font-size: var(--font-size-3)
}

.ds-input-size-small .ds-select {
    font-size: var(--font-size-4);
    height: calc( var(--font-size-4) * var(--line-height-4) + (var(--space-xxs) + var(--border-size-default)) * 2);
    padding: var(--space-xxs) var(--space-xs)
}

.ds-input-size-large {
    font-size: var(--font-size-5)
}

.ds-input-size-large .ds-select {
    font-size: var(--font-size-5);
    height: calc( var(--font-size-5) * var(--line-height-4) + (var(--space-xs) + var(--border-size-default)) * 2);
    padding: var(--space-xs) var(--space-xs)
}

.ds-select-icon,
.ds-select-icon-right {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neutral-40);
    transition: color var(--duration-s) var(--ease-out);
    pointer-events: none;
    font-size: var(--font-size-5)
}

.ds-input-has-focus .ds-select-icon,
.ds-input-has-focus .ds-select-icon-right {
    color: var(--color-neutral-darker)
}

.ds-select-icon {
    padding-right: var(--space-xs);
    padding-left: var(--space-s)
}

.ds-select-icon-right {
    right: 0;
    left: auto;
    padding-right: var(--space-s);
    padding-left: var(--space-xs)
}

.ds-select-has-icon {
    padding-left: calc( var(--space-s) + var(--space-l) + var(--space-xs) - var(--border-size-default))
}

.ds-input-has-focus .ds-select-has-icon,
.ds-select-has-icon:focus {
    padding-left: calc( var(--space-xs) + var(--space-l) + var(--space-s) - var(--border-size-active))
}

.ds-select-has-icon-right {
    padding-right: calc( var(--space-xs) + var(--space-l) + var(--space-s) - var(--border-size-default))
}

.ds-input-has-focus .ds-select-has-icon-right,
.ds-select-has-icon-right:focus {
    padding-right: calc( var(--space-xs) + var(--space-l) + var(--space-s) - var(--border-size-active))
}

.select-container {
    position: relative;
    width: 100%;
    height: var(--size-height-default);
    background-color: var(--color-transparent)
}

.ds-select {
    border: var(--border-size-default) var(--border-style-default) var(--color-neutral-30);
    border-radius: var(--border-radius-default);
    overflow: hidden;
    font-family: var(--font-family-heading-s)
}

.ds-select:focus-within~.focus-border {
    display: block
}

.focus-border {
    border: var(--border-size-l) var(--border-style-default) var(--color-primary-light);
    border-radius: var(--border-radius-default);
    background-color: var(--color-transparent);
    display: none;
    pointer-events: none
}

.ds-select-disabled {
    opacity: var(--opacity-disabled)
}

.ds-select-readonly {
    border-color: var(--color-neutral-80);
    background-color: var(--color-neutral-80)
}

.ds-select-readonly .select-icon-right {
    color: var(--color-neutral-50)
}

.align-with-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ds-select-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background-color: var(--color-transparent);
    font-size: var(--font-size-4);
    line-height: var(--line-height-5);
    color: var(--color-neutral-10);
    padding-left: var(--space-s);
    padding-right: var(--space-xxl);
    text-overflow: ellipsis;
    cursor: pointer
}

.ds-select-placeholder {
    color: var(--color-neutral-40);
    padding: var(--space-s)
}

.select-icon-right {
    position: absolute;
    right: var(--space-base);
    color: var(--color-primary);
    top: 50%;
    transform: translateY(-50%)
}

.select-text-has-icon {
    padding-left: calc( var(--space-s) + var(--space-l) + var(--space-xs))
}

.ds-select>.ds-select-icon {
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-40)
}

.ds-accordion {
    border: var(--border-size-default) var(--border-style-default) var(--color-neutral-50);
    border-radius: var(--border-radius-default);
    width: 100%
}

.ds-accordion.borderless {
    border: none
}

.ds-accordion.borderless .ds-accordion-header {
    padding: 0
}

.ds-accordion.borderless .ds-accordion-header:hover {
    color: var(--color-primary)
}

.ds-accordion.borderless .ds-accordion-header:active {
    color: var(--color-primary-dark)
}

.ds-accordion.borderless .ds-accordion-header.ds-accordion-white {
    color: var(--color-neutral-white)
}

.ds-accordion.borderless .ds-accordion-header.ds-accordion-white:hover {
    color: var(--color-neutral-white)
}

.ds-accordion.borderless .ds-accordion-header.ds-accordion-white:active {
    color: var(--color-neutral-white)
}

.ds-accordion.borderless .ds-accordion-header.ds-accordion-white .ds-icon {
    color: var(--color-neutral-white)
}

.ds-accordion.borderless .ds-accordion-body {
    padding: var(--space-xs) 0
}

.ds-accordion .ds-accordion-header {
    padding: var(--space-base);
    display: flex;
    justify-content: space-between;
    border-radius: inherit
}

.ds-accordion .ds-accordion-header:hover {
    cursor: pointer
}

.ds-accordion .ds-accordion-header:hover.hover-active-background {
    background-color: var(--color-primary-opacity-10);
    color: var(--color-primary)
}

.ds-accordion .ds-accordion-header:active.hover-active-background {
    background-color: var(--color-primary-opacity-20);
    color: var(--color-primary-dark)
}

.ds-accordion .ds-accordion-header:first-child {
    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0
}

.ds-accordion .ds-accordion-header:only-child {
    border-radius: inherit
}

.ds-accordion .ds-accordion-header.clarifying-action .ds-accordion-header-title {
    font-weight: var(--font-weight-default)
}

.ds-accordion .ds-accordion-header .ds-accordion-header-title {
    margin: 0
}

.ds-accordion .ds-accordion-header-right {
    margin-left: var(--space-xs)
}

.ds-accordion .ds-accordion-header-right,
.ds-accordion .ds-accordion-header-left {
    display: flex
}

.ds-accordion .ds-accordion-header-right .clarifying-action,
.ds-accordion .ds-accordion-header-left .clarifying-action {
    margin: 0;
    color: var(--color-primary)
}

.ds-accordion .ds-accordion-header-right .clarifying-action.ds-accordion-white,
.ds-accordion .ds-accordion-header-left .clarifying-action.ds-accordion-white {
    color: var(--color-neutral-white)
}

.ds-accordion .ds-accordion-header-right .ds-icon,
.ds-accordion .ds-accordion-header-left .ds-icon {
    height: var(--line-height-4);
    margin-left: var(--space-xxs);
    color: var(--color-primary)
}

.ds-accordion .ds-accordion-body {
    padding: var(--space-xs) var(--space-base) var(--space-l)
}

.ds-accordion.active:not(.borderless) {
    background-color: var(--color-primary-inverse)
}

.ds-accordion .ds-table-wrap {
    margin: var(--space-xs) 0 calc(-1 * var(--space-xs)) 0;
    color: var(--color-neutral-10)
}

.ds-accordion-stack {
    border: var(--border-size-default) var(--border-style-default) var(--color-neutral-50);
    border-radius: var(--border-radius-default);
    width: 100%
}

.ds-accordion-stack .ds-accordion-stack-header {
    padding: var(--space-base);
    display: flex;
    justify-content: space-between
}

.ds-accordion-stack .ds-accordion-stack-header:first-child {
    border-top: none
}

.ds-accordion-stack .ds-accordion-stack-header:hover {
    background-color: var(--color-primary-opacity-10);
    color: var(--color-primary);
    cursor: pointer
}

.ds-accordion-stack .ds-accordion-stack-header:active {
    background-color: var(--color-primary-opacity-20);
    color: var(--color-primary-dark)
}

.ds-accordion-stack .ds-accordion-stack-header .ds-accordion-stack-header-title {
    margin: 0
}

.ds-accordion-stack .ds-accordion-stack-header .ds-icon {
    height: var(--line-height-4);
    margin-left: var(--space-xxs);
    color: var(--color-primary)
}

.ds-accordion-stack .ds-accordion-stack-body {
    padding: var(--space-xs) var(--space-base) var(--space-l);
    border-radius: inherit
}

.ds-accordion-stack .active {
    background-color: var(--color-primary-inverse)
}

.ds-accordion-stack .ds-accordion-stack-entry+.ds-accordion-stack-entry {
    border-top: var(--border-size-default) var(--border-style-default) var(--color-neutral-50)
}

.ds-accordion-stack .ds-accordion-stack-entry:first-child .ds-accordion-stack-header {
    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0
}

.ds-accordion-stack .ds-accordion-stack-entry:last-child .ds-accordion-stack-header:only-child,
.ds-accordion-stack .ds-accordion-stack-entry:last-child .ds-accordion-stack-body-wrapper {
    border-radius: 0 0 var(--border-radius-default) var(--border-radius-default)
}

.ds-accordion-stack .ds-accordion-stack-entry:only-child .ds-accordion-stack-header {
    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0
}

.ds-accordion-stack .ds-accordion-stack-entry:only-child .ds-accordion-stack-header:only-child {
    border-radius: var(--border-radius-default)
}

.ds-accordion-stack .ds-accordion-stack-entry:only-child .ds-accordion-stack-body-wrapper {
    border-radius: 0 0 var(--border-radius-default) var(--border-radius-default)
}

.ds-app {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: var(--color-white);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    grid-template-areas: "header" "content";
    grid-template-columns: 1fr;
    display: flex
}

.ds-app:before,
.ds-app:after {
    display: table;
    content: '';
    clear: both
}

@media (min-width: 1024px) {
    .ds-app {
        grid-template-areas: "header header" "sidebar content";
        grid-template-columns: 256px 1fr
    }
}

@media (min-width: 1200px) {
    .ds-app {
        grid-template-columns: 320px 1fr
    }
}

.ds-app .ds-app-copyright {
    color: var(--color-neutral-30);
    position: absolute;
    left: var(--space-base);
    bottom: var(--space-s)
}

@media (min-width: 1024px) {
    .ds-app .ds-app-copyright {
        left: calc(2 * var(--space-xxl));
        bottom: var(--space-base)
    }
}

.ds-app-header {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-page-header);
    grid-area: header;
    clear: both
}

@media (min-width: 1024px) {
    .ds-app-header {
        display: none
    }
}

.ds-app-header-container {
    height: var(--size-height-default);
    background-color: var(--border-color-secondary);
    box-shadow: none;
    display: grid;
    grid-template-areas: "brand navbar action";
    grid-template-columns: 204px 1fr 204px;
    grid-template-rows: 1fr;
    justify-content: space-between
}

.ds-app-header-container.ds-app-header-banner {
    grid-template-areas: "brand action";
    grid-template-columns: 1fr;
    clear: both;
    position: fixed;
    z-index: 2;
    width: 100%
}

.ds-app-header-container.ds-app-header-navigation {
    height: auto;
    background: linear-gradient(var(--color-neutral-40-opacity-20), var(--color-neutral-40-opacity-20)), linear-gradient(var(--color-secondary), var(--color-secondary));
    display: block;
    clear: both;
    margin-top: var(--space-xxl);
    position: fixed;
    width: 100%
}

@media (min-width: 768px) {
    .ds-app-header-container.ds-app-header-navigation {
        display: grid
    }
}

.ds-app-brand {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--space-s);
    justify-content: left;
    grid-area: brand
}

.ds-app-brand .ds-logo-svg {
    max-height: 25px;
    max-width: 131px
}

.ds-app-navbar {
    display: flex;
    grid-area: navbar;
    max-height: var(--size-height-default);
    overflow: hidden;
    justify-content: center
}

@media (min-width: 1024px) {
    .ds-app-navbar {
        display: none
    }
}

.ds-app-navbar .ds-menu-item-link {
    color: rgba(255, 255, 255, 0.5) !important
}

.ds-app-navbar .ds-menu-item-link.router-link-active,
.ds-app-navbar .ds-menu-item-link:hover {
    color: var(--color-neutral-white) !important
}

.ds-app-action {
    display: flex;
    justify-self: right;
    align-items: center;
    grid-area: action
}

.ds-app-action .ds-button {
    padding: var(--space-base)
}

.ds-app-action .ds-button-text {
    font-size: var(--font-size-3)
}

.ds-app-sidebar {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: var(--z-index-page-sidebar);
    background-color: var(--color-secondary);
    color: var(--color-neutral-white);
    box-shadow: var(--box-shadow-default);
    display: none;
    height: calc(100vh - calc(2 * var(--size-height-default)));
    max-height: calc(100vh - calc(2 * var(--size-height-default)));
    overflow-x: hidden;
    overflow-y: auto
}

@media (min-width: 1024px) {
    .ds-app-sidebar {
        display: flex;
        background-color: var(--color-secondary);
        box-shadow: none;
        height: 100vh;
        max-height: 100vh;
        width: 256px;
        padding: var(--size-height-xl) var(--size-height-s) 0 var(--size-height-s)
    }
}

@media (min-width: 1200px) {
    .ds-app-sidebar {
        width: 320px;
        padding: var(--size-height-xl) var(--space-xxl) 0 var(--space-xxl)
    }
}

.ds-app-sidebar .ds-app-sidebar-body {
    flex: 1 0 auto
}

.ds-app-sidebar .ds-app-sidebar-body .ds-button {
    height: var(--size-height-s);
    display: block
}

.ds-app-sidebar .ds-app-sidebar-copyright {
    flex-shrink: 0;
    padding: var(--space-xl) 0 var(--space-l)
}

.ds-app-sidebar .ds-app-sidebar-copyright a {
    text-decoration: underline !important
}

.ds-app-sidebar .ds-app-sidebar-copyright a:link,
.ds-app-sidebar .ds-app-sidebar-copyright a:visited,
.ds-app-sidebar .ds-app-sidebar-copyright a:hover,
.ds-app-sidebar .ds-app-sidebar-copyright a:active {
    color: var(--color-neutral-100)
}

.ds-app-sidebar-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: static;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.ds-app-sidebar-content .ds-menu-item-link {
    height: var(--size-height-s);
    padding-left: 0;
    margin-bottom: var(--space-l);
    color: rgba(255, 255, 255, 0.5) !important
}

.ds-app-sidebar-content .ds-menu-item-link .ds-menu-item-link-icon-container {
    margin-right: 4px
}

.ds-app-sidebar-content .ds-menu-item-link .ds-icon-svg {
    height: var(--font-size-7);
    width: var(--font-size-7)
}

.ds-app-sidebar-content .ds-menu-item-link.router-link-active,
.ds-app-sidebar-content .ds-menu-item-link:hover {
    color: var(--color-neutral-white) !important
}

.ds-app-sidebar-content .ds-logo-svg {
    height: var(--space-xl);
    width: auto
}

.ds-app-sidebar-content .divider-container {
    display: flex;
    height: auto;
    margin-top: var(--space-xs)
}

.ds-app-sidebar-content .divider-container .divider-float hr {
    margin: 0
}

.ds-app-sidebar-content .ds-app-action button {
    padding: 0;
    margin-top: 28px
}

.ds-app-sidebar-content .ds-button {
    width: 100%;
    text-align: left;
    display: inline
}

.ds-app-content {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-top: calc(2 * var(--size-height-default));
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--box-shadow-xl);
    width: 100%;
    text-align: left
}

@media (min-width: 1024px) {
    .ds-app-content {
        margin-top: 0;
        margin-left: 256px
    }
}

@media (min-width: 1200px) {
    .ds-app-content {
        margin-left: 320px
    }
}

.ds-app-page {
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column
}

@media (min-width: 600px) {
    .ds-app-page {
        flex-direction: row
    }
}

@media (min-width: 1024px) {
    .ds-app-page {
        width: calc(100vw - 256px)
    }
}

@media (min-width: 1200px) {
    .ds-app-page {
        width: calc(100vw - 320px)
    }
}

.ds-app-page-subnav {
    display: none;
    background-color: var(--color-neutral-100);
    overflow-y: auto;
    padding: var(--space-xl) var(--space-l) 0 var(--space-l) !important;
    flex: 1 0 auto;
    width: 100%
}

.ds-app-page-subnav .ds-button-stack-container {
    margin: 0px calc(-1 * var(--space-base))
}

.ds-app-page-subnav .ds-button-text {
    width: 100%
}

.ds-app-page-subnav .ds-subhead-small {
    color: var(--color-neutral-40)
}

.ds-app-page-subnav .ds-app-subnav-body {
    flex: 1 0 auto;
    width: 100%
}

.ds-app-page-subnav .ds-app-subnav-copyright {
    flex-shrink: 0;
    padding: var(--space-xl) 0 var(--space-l)
}

@media (min-width: 600px) {
    .ds-app-page-subnav {
        background-color: var(--color-neutral-90);
        display: flex;
        flex-direction: column;
        flex: 2 0 0;
        max-width: 192px !important;
        position: fixed;
        height: calc(100vh - calc(2 * var(--size-height-default)));
        top: calc(2 * var(--size-height-default))
    }
}

@media (min-width: 768px) {
    .ds-app-page-subnav {
        width: 256px;
        max-width: 256px !important;
        padding: var(--size-height-s) var(--size-height-s) 0 var(--size-height-s) !important
    }
}

@media (min-width: 1024px) {
    .ds-app-page-subnav {
        height: 100vh;
        top: 0;
        padding: var(--size-height-xl) var(--size-height-s) 0 var(--size-height-s) !important
    }
    .ds-app-page-subnav .ds-app-subnav-copyright {
        padding: var(--space-xl) 0 var(--space-xl)
    }
    .ds-app-page-subnav .ds-app-subnav-copyright p {
        display: none
    }
}

@media (min-width: 1200px) {
    .ds-app-page-subnav {
        width: 320px;
        max-width: 320px !important;
        padding: var(--size-height-xl) var(--space-xxl) 0 var(--space-xxl) !important
    }
}

.ds-app-page-content {
    height: auto;
    overflow: hidden;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    width: 100%;
    z-index: 1
}

@media (min-width: 600px) {
    .ds-app-page-content {
        flex: 3 0 0;
        box-shadow: var(--box-shadow-xl);
        margin-left: 192px
    }
}

@media (min-width: 768px) {
    .ds-app-page-content {
        margin-left: 256px
    }
}

@media (min-width: 1200px) {
    .ds-app-page-content {
        margin-left: 320px
    }
}

.ds-app-subpage-copyright {
    display: flex;
    flex-direction: column;
    flex-basis: auto !important;
    flex-shrink: 0;
    width: 100%;
    margin: var(--space-xl) 0 var(--space-l) var(--space-l)
}

@media (min-width: 600px) {
    .ds-app-subpage-copyright {
        display: none
    }
}

.ds-app-subpage-layout {
    padding: 0;
    margin: var(--space-l) var(--space-l) 0
}

@media (min-width: 600px) {
    .ds-app-subpage-layout {
        margin: var(--space-xl)
    }
}

@media (min-width: 768px) {
    .ds-app-subpage-layout {
        margin: var(--size-height-s)
    }
}

@media (min-width: 1024px) {
    .ds-app-subpage-layout {
        margin: var(--size-height-xl) var(--size-height-s) var(--size-height-xl)
    }
}

@media (min-width: 1200px) {
    .ds-app-subpage-layout {
        margin: var(--size-height-xl) var(--space-xxl) var(--size-height-xl)
    }
}

.ds-app-subpage-layout .ds-app-subpage-content {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    max-width: 592px
}

@media (min-width: 600px) {
    .ds-app-subpage-layout .ds-app-subpage-content {
        height: 100%
    }
}

.ds-app-subpage-layout .ds-app-subpage-content .ds-app-subpage-body {
    flex: 1 0 auto
}

.ds-app-empty {
    background-color: var(--color-neutral-90)
}

.ds-app-empty .ds-app-page-subnav {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding-bottom: var(--space-l) !important
}

@media (min-width: 600px) {
    .ds-app-empty .ds-app-page-content {
        box-shadow: none
    }
}

.ds-app-empty .ds-app-subnav-copyright {
    display: none
}

@media (min-width: 600px) {
    .ds-app-empty .ds-app-subnav-copyright {
        display: flex
    }
}

.ds-app-hide-nav .ds-app-content {
    width: 100vw;
    margin-top: var(--size-height-default)
}

@media (min-width: 1024px) {
    .ds-app-hide-nav .ds-app-content {
        margin-top: 0;
        margin-right: 0
    }
}

@media (min-width: 600px) {
    .ds-app-hide-nav .ds-app-content .ds-app-page {
        flex-direction: column
    }
}

.ds-app-hide-nav .ds-app-content .ds-app-page .ds-app-page-content {
    flex: 1 0 auto !important;
    margin-left: 0
}

@media (min-width: 600px) {
    .ds-app-hide-nav .ds-app-content .ds-app-page .ds-app-page-content {
        box-shadow: none
    }
}

.ds-app-hide-nav .ds-app-subpage-copyright {
    display: flex
}

@media (min-width: 1024px) {
    .ds-app-hide-nav .ds-app-subpage-copyright p {
        display: none
    }
}

.ds-app-hide-nav .ds-app-subpage-layout {
    margin: var(--space-xl) var(--space-xl) 0
}

@media (min-width: 600px) {
    .ds-app-hide-nav .ds-app-subpage-layout {
        margin: var(--size-height-default) var(--size-height-xl) 0
    }
}

@media (min-width: 1024px) {
    .ds-app-hide-nav .ds-app-subpage-layout {
        margin: var(--size-height-xl) var(--size-height-s) var(--size-height-xl)
    }
}

@media (min-width: 1200px) {
    .ds-app-hide-nav .ds-app-subpage-layout {
        margin: var(--size-height-xl) var(--size-height-default) var(--size-height-xl)
    }
}

.ds-app-hide-nav .ds-app-subpage-layout .ds-app-subpage-content {
    height: 100%;
    margin: 0 auto
}

@media (min-width: 480px) {
    .ds-app-hide-nav .ds-app-subpage-layout .ds-app-subpage-content {
        max-width: 480px
    }
}

@media (min-width: 768px) {
    .ds-app-hide-nav .ds-app-subpage-layout .ds-app-subpage-content {
        max-width: 1024px
    }
}

@media (min-width: 1024px) {
    .ds-app-hide-nav .ds-app-subpage-layout .ds-app-subpage-content {
        max-width: 768px;
        margin-left: 0;
        margin-right: 0
    }
}

@media (min-width: 1200px) {
    .ds-app-hide-nav .ds-app-subpage-layout .ds-app-subpage-content {
        max-width: 1024px
    }
}

.breadcrumb-container {
    margin-bottom: var(--space-base) !important
}

.ds-app-content-only .ds-app-content {
    margin: 0 auto;
    text-align: center;
    padding: var(--space-xl);
    max-width: calc(480px + calc(2 * var(--space-xl)));
    box-shadow: none
}

@media (min-width: 600px) {
    .ds-app-content-only .ds-app-content {
        padding: 96px var(--size-height-xl);
        max-width: calc(480px + (2 * var(--size-height-xl)))
    }
}

@media (min-width: 768px) {
    .ds-app-content-only .ds-app-content {
        max-width: calc(1024px + (2 * var(--size-height-xl)))
    }
}

@media (min-width: 1024px) {
    .ds-app-content-only .ds-app-content {
        padding: 96px;
        max-width: calc(1024px + (2 * 96px))
    }
}

@media (min-width: 768px) {
    .ds-app-content-only.ds-app-stacked .ds-app-content {
        max-width: calc(480px + (2 * var(--size-height-xl)))
    }
}

@media (min-width: 1024px) {
    .ds-app-content-only.ds-app-stacked .ds-app-content {
        max-width: calc(480px + (2 * 96px))
    }
}

.ds-card {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border-top-left-radius: var(--border-radius-l);
    border-top-right-radius: var(--border-radius-l);
    border-bottom-left-radius: var(--border-radius-l);
    border-bottom-right-radius: var(--border-radius-l);
    background-color: var(--color-primary-inverse);
    color: var(--text-color-default)
}

.ds-card-centered {
    text-align: center
}

.ds-card-clickable:hover {
    cursor: pointer;
    background-image: linear-gradient(var(--color-primary-opacity-10), var(--color-primary-opacity-10)), linear-gradient(var(--color-primary-inverse), var(--color-primary-inverse))
}

.ds-card-clickable:hover.ds-card-danger-inverse {
    background-image: linear-gradient(var(--color-danger-opacity-10), var(--color-danger-opacity-10)), linear-gradient(var(--color-danger-inverse), var(--color-danger-inverse))
}

.ds-card-clickable:hover.ds-card-success-inverse {
    background-image: linear-gradient(var(--color-success-opacity-10), var(--color-success-opacity-10)), linear-gradient(var(--color-success-inverse), var(--color-success-inverse))
}

.ds-card-clickable:hover.ds-card-neutral {
    background-image: linear-gradient(var(--color-neutral-40-opacity-20), var(--color-neutral-40-opacity-20)), linear-gradient(var(--color-neutral-80), var(--color-neutral-80))
}

.ds-card-clickable:hover.ds-card-primary {
    background-image: none;
    background-color: var(--color-primary-light)
}

.ds-card-clickable:hover.ds-card-secondary {
    background-image: none;
    background-color: var(--color-secondary-light)
}

.ds-card-clickable .ds-button:disabled {
    opacity: inherit
}

.ds-card-image {
    border-top-left-radius: var(--border-radius-l);
    border-top-right-radius: var(--border-radius-l);
    overflow: hidden
}

.ds-card-image img {
    display: block;
    width: 100%;
    max-width: 100%
}

.ds-card-icon {
    padding: var(--space-base) var(--space-s) 0 var(--space-s);
    font-size: var(--font-size-9);
    opacity: var(--opacity-disabled)
}

.ds-card-container {
    display: flex;
    flex-direction: column
}

.ds-card-header {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border-top-left-radius: var(--border-radius-l);
    border-top-right-radius: var(--border-radius-l);
    padding: var(--space-base) var(--space-l) var(--space-xs) var(--space-l)
}

.ds-card-has-image .ds-card-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.ds-card-content {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    padding: 0 var(--space-l) var(--space-l);
    flex: 1 1 0
}

.ds-card-content .ds-accordion.borderless .ds-accordion-header {
    padding: 0 0 var(--space-xxs)
}

.ds-card-footer {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    padding: 0 var(--space-l) var(--space-l);
    align-items: flex-end;
    display: flex;
    flex: 1
}

.ds-card-centered .ds-card-footer {
    justify-content: center
}

.ds-card-primary {
    background-color: var(--color-primary);
    color: var(--color-neutral-100)
}

.ds-card-primary-inverse {
    background-color: var(--color-primary-inverse)
}

.ds-card-neutral {
    background-color: var(--color-neutral-80)
}

.ds-card-secondary {
    background-color: var(--color-secondary);
    color: var(--color-neutral-100)
}

.ds-card-success-inverse {
    background-color: var(--color-success-inverse)
}

.ds-card-danger-inverse {
    background-color: var(--color-danger-inverse)
}

.ds-container {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    padding: 0 var(--space-s);
    margin: 0 auto
}

@media (min-width: 768px) {
    .ds-container {
        padding: 0 var(--space-base)
    }
}

@media (min-width: 1024px) {
    .ds-container {
        padding: 0 var(--space-xl)
    }
}

.ds-container-centered {
    text-align: center
}

@media (min-width: 1024px) {
    .ds-container-xs {
        padding: 0 var(--space-base)
    }
}

.ds-container-no-padding {
    padding: 0
}

hr {
    border: 0;
    border-top: 1pt var(--border-style-default) var(--color-neutral);
    margin-top: 16pt
}

.divider-label-cell {
    flex: 0 0 auto;
    margin: 7pt 4pt;
    line-height: 20pt;
    font-size: 16pt
}

.divider-container {
    height: 32pt;
    position: relative
}

.divider-float {
    position: absolute;
    top: 0;
    height: 32pt;
    width: 100%
}

.ds-flex {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: flex
}

.ds-flex.ds-flex-hide-all,
.ds-flex.ds-flex-hide-s {
    display: none
}

.ds-flex.ds-flex-hide-sm {
    display: flex
}

@media (min-width: 600px) {
    .ds-flex.ds-flex-hide-sm {
        display: none
    }
}

.ds-flex.ds-flex-hide-sm-only {
    display: flex
}

@media (min-width: 600px) {
    .ds-flex.ds-flex-hide-sm-only {
        display: none
    }
}

@media (min-width: 768px) {
    .ds-flex.ds-flex-hide-sm-only {
        display: flex
    }
}

.ds-flex.ds-flex-hide-md {
    display: flex
}

@media (min-width: 768px) {
    .ds-flex.ds-flex-hide-md {
        display: none
    }
}

.ds-flex.ds-flex-hide-md-only {
    display: flex
}

@media (min-width: 768px) {
    .ds-flex.ds-flex-hide-md-only {
        display: none
    }
}

@media (min-width: 1024px) {
    .ds-flex.ds-flex-hide-md-only {
        display: flex
    }
}

.ds-flex.ds-flex-hide-lg,
.ds-flex.ds-flex-hide-lg-only {
    display: flex
}

@media (min-width: 1024px) {
    .ds-flex.ds-flex-hide-lg,
    .ds-flex.ds-flex-hide-lg-only {
        display: none
    }
}

.ds-flex.ds-flex-hide-lg-only,
.ds-flex.ds-flex-hide-lg-only-only {
    display: flex
}

@media (min-width: 1024px) {
    .ds-flex.ds-flex-hide-lg-only,
    .ds-flex.ds-flex-hide-lg-only-only {
        display: none
    }
}

@media (min-width: 1200px) {
    .ds-flex.ds-flex-hide-lg-only,
    .ds-flex.ds-flex-hide-lg-only-only {
        display: flex
    }
}

.ds-flex.ds-flex-show-all {
    display: flex
}

.ds-flex.ds-flex-show-sm {
    display: none
}

@media (min-width: 600px) {
    .ds-flex.ds-flex-show-sm {
        display: flex
    }
}

.ds-flex.ds-flex-show-sm-only {
    display: none
}

@media (min-width: 600px) {
    .ds-flex.ds-flex-show-sm-only {
        display: flex
    }
}

@media (min-width: 768px) {
    .ds-flex.ds-flex-show-sm-only {
        display: none
    }
}

.ds-flex.ds-flex-show-md {
    display: none
}

@media (min-width: 768px) {
    .ds-flex.ds-flex-show-md {
        display: flex
    }
}

.ds-flex.ds-flex-show-md-only {
    display: none
}

@media (min-width: 768px) {
    .ds-flex.ds-flex-show-md-only {
        display: flex
    }
}

@media (min-width: 1024px) {
    .ds-flex.ds-flex-show-md-only {
        display: none
    }
}

.ds-flex.ds-flex-show-lg,
.ds-flex.ds-flex-show-lg-only {
    display: none
}

@media (min-width: 1024px) {
    .ds-flex.ds-flex-show-lg,
    .ds-flex.ds-flex-show-lg-only {
        display: flex
    }
}

.ds-flex.ds-flex-show-lg-only,
.ds-flex.ds-flex-show-lg-only-only {
    display: none
}

@media (min-width: 1024px) {
    .ds-flex.ds-flex-show-lg-only,
    .ds-flex.ds-flex-show-lg-only-only {
        display: flex
    }
}

@media (min-width: 1200px) {
    .ds-flex.ds-flex-show-lg-only,
    .ds-flex.ds-flex-show-lg-only-only {
        display: none
    }
}

.ds-flex-item {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    min-width: 0;
    max-width: 100%
}

.ds-flex-item.ds-flex-hide-all,
.ds-flex-item.ds-flex-hide-s {
    display: none
}

.ds-flex-item.ds-flex-hide-sm {
    display: block
}

@media (min-width: 600px) {
    .ds-flex-item.ds-flex-hide-sm {
        display: none
    }
}

.ds-flex-item.ds-flex-hide-sm-only {
    display: block
}

@media (min-width: 600px) {
    .ds-flex-item.ds-flex-hide-sm-only {
        display: none
    }
}

@media (min-width: 768px) {
    .ds-flex-item.ds-flex-hide-sm-only {
        display: block
    }
}

.ds-flex-item.ds-flex-hide-md {
    display: block
}

@media (min-width: 768px) {
    .ds-flex-item.ds-flex-hide-md {
        display: none
    }
}

.ds-flex-item.ds-flex-hide-md-only {
    display: block
}

@media (min-width: 768px) {
    .ds-flex-item.ds-flex-hide-md-only {
        display: none
    }
}

@media (min-width: 1024px) {
    .ds-flex-item.ds-flex-hide-md-only {
        display: block
    }
}

.ds-flex-item.ds-flex-hide-lg,
.ds-flex-item.ds-flex-hide-lg-only {
    display: block
}

@media (min-width: 1024px) {
    .ds-flex-item.ds-flex-hide-lg,
    .ds-flex-item.ds-flex-hide-lg-only {
        display: none
    }
}

.ds-flex-item.ds-flex-hide-lg-only,
.ds-flex-item.ds-flex-hide-lg-only-only {
    display: block
}

@media (min-width: 1024px) {
    .ds-flex-item.ds-flex-hide-lg-only,
    .ds-flex-item.ds-flex-hide-lg-only-only {
        display: none
    }
}

@media (min-width: 1200px) {
    .ds-flex-item.ds-flex-hide-lg-only,
    .ds-flex-item.ds-flex-hide-lg-only-only {
        display: block
    }
}

.ds-flex-item.ds-flex-show-all {
    display: block
}

.ds-flex-item.ds-flex-show-sm {
    display: none
}

@media (min-width: 600px) {
    .ds-flex-item.ds-flex-show-sm {
        display: block
    }
}

.ds-flex-item.ds-flex-show-sm-only {
    display: none
}

@media (min-width: 600px) {
    .ds-flex-item.ds-flex-show-sm-only {
        display: block
    }
}

@media (min-width: 768px) {
    .ds-flex-item.ds-flex-show-sm-only {
        display: none
    }
}

.ds-flex-item.ds-flex-show-md {
    display: none
}

@media (min-width: 768px) {
    .ds-flex-item.ds-flex-show-md {
        display: block
    }
}

.ds-flex-item.ds-flex-show-md-only {
    display: none
}

@media (min-width: 768px) {
    .ds-flex-item.ds-flex-show-md-only {
        display: block
    }
}

@media (min-width: 1024px) {
    .ds-flex-item.ds-flex-show-md-only {
        display: none
    }
}

.ds-flex-item.ds-flex-show-lg,
.ds-flex-item.ds-flex-show-lg-only {
    display: none
}

@media (min-width: 1024px) {
    .ds-flex-item.ds-flex-show-lg,
    .ds-flex-item.ds-flex-show-lg-only {
        display: block
    }
}

.ds-flex-item.ds-flex-show-lg-only,
.ds-flex-item.ds-flex-show-lg-only-only {
    display: none
}

@media (min-width: 1024px) {
    .ds-flex-item.ds-flex-show-lg-only,
    .ds-flex-item.ds-flex-show-lg-only-only {
        display: block
    }
}

@media (min-width: 1200px) {
    .ds-flex-item.ds-flex-show-lg-only,
    .ds-flex-item.ds-flex-show-lg-only-only {
        display: none
    }
}

.ds-flex-item-aligned {
    display: flex
}

.ds-flex-item-aligned.ds-flex-hide-all,
.ds-flex-item-aligned.ds-flex-hide-s {
    display: none
}

.ds-flex-item-aligned.ds-flex-hide-sm {
    display: flex
}

@media (min-width: 600px) {
    .ds-flex-item-aligned.ds-flex-hide-sm {
        display: none
    }
}

.ds-flex-item-aligned.ds-flex-hide-sm-only {
    display: flex
}

@media (min-width: 600px) {
    .ds-flex-item-aligned.ds-flex-hide-sm-only {
        display: none
    }
}

@media (min-width: 768px) {
    .ds-flex-item-aligned.ds-flex-hide-sm-only {
        display: flex
    }
}

.ds-flex-item-aligned.ds-flex-hide-md {
    display: flex
}

@media (min-width: 768px) {
    .ds-flex-item-aligned.ds-flex-hide-md {
        display: none
    }
}

.ds-flex-item-aligned.ds-flex-hide-md-only {
    display: flex
}

@media (min-width: 768px) {
    .ds-flex-item-aligned.ds-flex-hide-md-only {
        display: none
    }
}

@media (min-width: 1024px) {
    .ds-flex-item-aligned.ds-flex-hide-md-only {
        display: flex
    }
}

.ds-flex-item-aligned.ds-flex-hide-lg,
.ds-flex-item-aligned.ds-flex-hide-lg-only {
    display: flex
}

@media (min-width: 1024px) {
    .ds-flex-item-aligned.ds-flex-hide-lg,
    .ds-flex-item-aligned.ds-flex-hide-lg-only {
        display: none
    }
}

.ds-flex-item-aligned.ds-flex-hide-lg-only,
.ds-flex-item-aligned.ds-flex-hide-lg-only-only {
    display: flex
}

@media (min-width: 1024px) {
    .ds-flex-item-aligned.ds-flex-hide-lg-only,
    .ds-flex-item-aligned.ds-flex-hide-lg-only-only {
        display: none
    }
}

@media (min-width: 1200px) {
    .ds-flex-item-aligned.ds-flex-hide-lg-only,
    .ds-flex-item-aligned.ds-flex-hide-lg-only-only {
        display: flex
    }
}

.ds-flex-item-aligned.ds-flex-show-all {
    display: flex
}

.ds-flex-item-aligned.ds-flex-show-sm {
    display: none
}

@media (min-width: 600px) {
    .ds-flex-item-aligned.ds-flex-show-sm {
        display: flex
    }
}

.ds-flex-item-aligned.ds-flex-show-sm-only {
    display: none
}

@media (min-width: 600px) {
    .ds-flex-item-aligned.ds-flex-show-sm-only {
        display: flex
    }
}

@media (min-width: 768px) {
    .ds-flex-item-aligned.ds-flex-show-sm-only {
        display: none
    }
}

.ds-flex-item-aligned.ds-flex-show-md {
    display: none
}

@media (min-width: 768px) {
    .ds-flex-item-aligned.ds-flex-show-md {
        display: flex
    }
}

.ds-flex-item-aligned.ds-flex-show-md-only {
    display: none
}

@media (min-width: 768px) {
    .ds-flex-item-aligned.ds-flex-show-md-only {
        display: flex
    }
}

@media (min-width: 1024px) {
    .ds-flex-item-aligned.ds-flex-show-md-only {
        display: none
    }
}

.ds-flex-item-aligned.ds-flex-show-lg,
.ds-flex-item-aligned.ds-flex-show-lg-only {
    display: none
}

@media (min-width: 1024px) {
    .ds-flex-item-aligned.ds-flex-show-lg,
    .ds-flex-item-aligned.ds-flex-show-lg-only {
        display: flex
    }
}

.ds-flex-item-aligned.ds-flex-show-lg-only,
.ds-flex-item-aligned.ds-flex-show-lg-only-only {
    display: none
}

@media (min-width: 1024px) {
    .ds-flex-item-aligned.ds-flex-show-lg-only,
    .ds-flex-item-aligned.ds-flex-show-lg-only-only {
        display: flex
    }
}

@media (min-width: 1200px) {
    .ds-flex-item-aligned.ds-flex-show-lg-only,
    .ds-flex-item-aligned.ds-flex-show-lg-only-only {
        display: none
    }
}

.ds-flex-item-divider-left {
    border-left: var(--border-size-default) var(--border-style-default) var(--color-neutral-40)
}

.ds-flex-item-divider-right {
    border-right: var(--border-size-default) var(--border-style-default) var(--color-neutral-40)
}

.ds-modal-overlay {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: 2147483700;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4)
}

.ds-modal-box {
    background-color: var(--color-neutral-100);
    border-radius: var(--border-radius-l);
    color: var(--color-neutral-10);
    margin: var(--size-height-xl) var(--space-l);
    text-align: left;
    box-shadow: var(--box-shadow-l);
    max-width: 480px;
    height: auto
}

.ds-modal-content {
    overflow-y: auto;
    margin-top: var(--space-base);
    margin-right: var(--space-xs);
    max-height: Min(calc(100vh - 72px - (2 * var(--size-height-xl))), 616px);
    position: relative;
    z-index: 1;
    background: var(--color-neutral-white) no-repeat;
    background-image: -webkit-radial-gradient(50% 0, farthest-side, var(--color-neutral-40-opacity-20), var(--color-transparent)), -webkit-radial-gradient(50% 100%, farthest-side, var(--color-neutral-40-opacity-20), var(--color-transparent));
    background-image: -moz-radial-gradient(50% 0, farthest-side, var(--color-neutral-40-opacity-20), var(--color-transparent)), -moz-radial-gradient(50% 100%, farthest-side, var(--color-neutral-40-opacity-20), var(--color-transparent));
    background-image: radial-gradient(farthest-side at 50% 0, var(--color-neutral-40-opacity-20), var(--color-transparent)), radial-gradient(farthest-side at 50% 100%, var(--color-neutral-40-opacity-20), var(--color-transparent));
    background-position: 0 var(--border-size-default), 0 100%;
    background-size: 100% var(--space-base)
}

.ds-modal-content:before,
.ds-modal-content:after {
    content: "";
    position: relative;
    z-index: -1;
    display: block;
    height: var(--space-l);
    margin: 0 0 calc(-1 * var(--space-base));
    background: -webkit-linear-gradient(top, var(--color-neutral-white), var(--color-neutral-white) 70%, var(--color-transparent));
    background: -moz-linear-gradient(top, var(--color-neutral-white), var(--color-neutral-white) 70%, var(--color-transparent));
    background: linear-gradient(to bottom, var(--color-neutral-white), var(--color-neutral-white) 70%, var(--color-transparent))
}

.ds-modal-content:after {
    margin: calc(-1 * var(--space-base)) 0 0;
    background: -webkit-linear-gradient(top, var(--color-transparent), var(--color-neutral-white) 30%, var(--color-neutral-white));
    background: -moz-linear-gradient(top, var(--color-transparent), var(--color-neutral-white) 30%, var(--color-neutral-white));
    background: linear-gradient(to bottom, var(--color-transparent), var(--color-neutral-white) 30%, var(--color-neutral-white))
}

.ds-modal-content {
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-70)
}

.ds-modal-content::-webkit-scrollbar {
    width: var(--space-xxs)
}

.ds-modal-content::-webkit-scrollbar-track {
    background: var(--color-neutral-70);
    margin-right: var(--space-xs)
}

.ds-modal-content::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-50);
    border-radius: var(--space-xs)
}

.ds-modal-image {
    overflow: hidden;
    max-width: 100%;
    margin-bottom: calc(-1 * var(--space-base));
    text-align: center
}

.ds-modal-image img {
    display: block;
    width: 100%;
    padding-top: 75%;
    margin-top: -75%;
    height: auto
}

.ds-modal-on-body {
    position: fixed;
    overscroll-behavior: none
}

.ds-modal-buttons {
    margin-top: var(--space-base)
}

.ds-modal-buttons-container {
    flex-direction: column-reverse;
    margin-bottom: var(--space-base)
}

.ds-modal-buttons-container .ds-modal-button:only-child,
.ds-modal-buttons-container .ds-modal-button+.ds-modal-button {
    padding-bottom: var(--space-xs)
}

@media (min-width: 480px) {
    .ds-modal-buttons-container:not(.ds-modal-buttons-vertical) {
        flex-direction: row;
        margin-bottom: var(--space-l)
    }
    .ds-modal-buttons-container:not(.ds-modal-buttons-vertical) .ds-modal-button:only-child,
    .ds-modal-buttons-container:not(.ds-modal-buttons-vertical) .ds-modal-button+.ds-modal-button {
        padding-bottom: 0
    }
    .ds-modal-buttons-container:not(.ds-modal-buttons-vertical) .ds-modal-button+.ds-modal-button {
        padding-left: var(--space-base)
    }
}

.ds-page {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: var(--color-white);
    min-height: 100vh;
    position: relative
}

.ds-page:before,
.ds-page:after {
    display: table;
    content: '';
    clear: both
}

.ds-page.ds-page-is-stacked {
    display: grid;
    grid-template-rows: [header] auto [content] auto;
    grid-column-gap: 0;
    grid-row-gap: var(--space-s);
    padding-top: var(--space-base)
}

.ds-page.ds-page-is-stacked.ds-page-is-centered {
    text-align: center;
    align-content: center
}

.ds-page.ds-page-is-contained {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto
}

.ds-page.ds-page-swap-nav {
    overflow: hidden;
    grid-template-areas: "header" "content";
    grid-template-columns: 1fr
}

@media (min-width: 1024px) {
    .ds-page.ds-page-swap-nav {
        grid-template-areas: "header header" "sidebar content";
        grid-template-columns: 64px 1fr
    }
}

.ds-page.ds-page-swap-nav.ds-page-has-top-banner {
    grid-template-rows: calc(2 * var(--size-height-default)) 1fr
}

.ds-page.ds-page-swap-nav.ds-page-hide-nav {
    grid-template-rows: var(--size-height-default) 1fr
}

@media (min-width: 768px) {
    .ds-page.ds-page-swap-nav.ds-page-hide-nav {
        grid-template-rows: calc(2 * var(--size-height-default)) 1fr
    }
}

.ds-page.ds-page-swap-nav.ds-page-hide-nav .ds-page-header-navigation {
    display: none
}

@media (min-width: 768px) {
    .ds-page.ds-page-swap-nav.ds-page-hide-nav .ds-page-copyright {
        left: var(--space-xl);
        padding-left: var(--space-base)
    }
}

@media (min-width: 1024px) {
    .ds-page.ds-page-swap-nav.ds-page-hide-nav .ds-page-copyright {
        left: var(--space-xxl)
    }
}

.ds-page.ds-page-swap-nav .ds-page-copyright {
    color: var(--color-neutral-30);
    position: absolute;
    left: var(--space-base);
    bottom: var(--space-s)
}

@media (min-width: 1024px) {
    .ds-page.ds-page-swap-nav .ds-page-copyright {
        left: calc( var(--space-xxl) + 64px);
        bottom: var(--space-base)
    }
}

.ds-page-header {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-page-header)
}

@media (min-width: 768px) {
    .ds-page-has-no-header .ds-page-header {
        right: auto;
        width: 220px
    }
}

@media (min-width: 1024px) {
    .ds-page-has-no-header .ds-page-header {
        width: 260px
    }
}

.ds-page-is-stacked .ds-page-header {
    grid-row: header
}

.ds-page-is-centered .ds-page-header {
    margin-left: auto;
    margin-right: auto;
    position: static
}

.ds-page-swap-nav .ds-page-header {
    grid-area: header;
    clear: both
}

.ds-page-header-container {
    height: var(--size-height-default);
    background: var(--color-white);
    box-shadow: var(--box-shadow-s);
    display: flex;
    justify-content: space-between
}

.ds-page-is-contained .ds-page-header-container {
    max-width: 1400px;
    margin: 0 auto
}

@media (min-width: 768px) {
    .ds-page-has-no-header .ds-page-header-container {
        height: 136px;
        background: var(--color-white);
        box-shadow: none
    }
}

.ds-page-is-stacked .ds-page-header-container {
    height: auto;
    background: var(--color-white);
    box-shadow: none;
    justify-content: center
}

.ds-page-header-container .ds-page-navbar {
    background-color: var(--color-neutral-lighter)
}

.ds-page-swap-nav .ds-page-header-container {
    background-color: var(--border-color-secondary);
    box-shadow: none;
    display: grid;
    grid-template-areas: "brand navbar action";
    grid-template-columns: 204px 1fr 204px;
    grid-template-rows: 1fr
}

.ds-page-swap-nav .ds-page-header-container.ds-page-header-banner {
    grid-template-areas: "brand action";
    grid-template-columns: 1fr;
    clear: both
}

.ds-page-swap-nav .ds-page-header-container .ds-page-navigation-toggle {
    display: none
}

.ds-page-swap-nav .ds-page-header-container.ds-page-header-navigation {
    height: auto;
    background-color: var(--color-neutral-80);
    display: block;
    clear: both
}

@media (min-width: 768px) {
    .ds-page-swap-nav .ds-page-header-container.ds-page-header-navigation {
        display: grid
    }
}

.ds-page-has-top-banner .ds-page-header-container {
    height: calc(2 * var(--size-height-default));
    grid-template-rows: var(--size-height-default) var(--size-height-default);
    grid-template-areas: "tag tag" "brand action"
}

.ds-page-brand {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--space-s);
    grid-area: header
}

@media (min-width: 768px) {
    .ds-page-has-no-header .ds-page-brand {
        height: 100%;
        justify-content: center
    }
}

.ds-page-has-header .ds-page-brand .ds-logo-svg {
    max-height: 25px;
    max-width: 131px
}

.ds-page-swap-nav .ds-page-brand {
    justify-content: left;
    align-items: center;
    display: flex;
    grid-area: brand;
    padding: 0 var(--space-s)
}

.ds-page-swap-nav .ds-page-brand .ds-logo-svg {
    max-height: 25px;
    max-width: 131px
}

.ds-page-navbar {
    display: none
}

.ds-page-swap-nav .ds-page-navbar {
    display: flex;
    grid-area: navbar;
    max-height: var(--size-height-default);
    overflow: hidden;
    justify-content: center
}

@media (min-width: 1024px) {
    .ds-page-swap-nav .ds-page-navbar {
        display: none
    }
}

.ds-page-navigation-toggle {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--space-s);
    color: var(--color-link);
    cursor: pointer
}

.ds-page-navigation-toggle:hover {
    color: var(--color-link-active)
}

@media (min-width: 768px) {
    .ds-page-navigation-toggle {
        display: none
    }
}

.ds-page-action {
    display: flex;
    justify-self: right;
    align-items: center;
    grid-area: action
}

.ds-page-action .ds-button {
    padding: var(--space-base)
}

.ds-page-action .ds-button-text {
    font-size: var(--font-size-3)
}

.ds-page-sidebar {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: fixed;
    top: var(--size-height-default);
    bottom: 0;
    width: 220px;
    z-index: var(--z-index-page-sidebar);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-default);
    display: none
}

@media (min-width: 768px) {
    .ds-page-sidebar {
        display: block
    }
}

@media (min-width: 1024px) {
    .ds-page-sidebar {
        width: 260px
    }
}

.ds-page-has-top-banner .ds-page-sidebar {
    top: calc(2 * var(--size-height-default))
}

@media (min-width: 768px) {
    .ds-page-has-no-header .ds-page-sidebar {
        top: 0
    }
}

.ds-page-swap-nav .ds-page-sidebar {
    display: none
}

@media (min-width: 1024px) {
    .ds-page-swap-nav .ds-page-sidebar {
        display: flex;
        background-color: var(--color-neutral-80);
        width: 64px;
        box-shadow: none
    }
}

.ds-page-hide-nav .ds-page-sidebar {
    background-color: var(--color-neutral-white)
}

.ds-page-sidebar-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto
}

@media (min-width: 768px) {
    .ds-page-has-no-header .ds-page-sidebar-content {
        top: 136px
    }
}

.ds-page-swap-nav .ds-page-sidebar-content {
    padding-top: var(--space-xxl);
    position: static
}

.ds-page-drawer {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: fixed;
    left: 0;
    top: var(--size-height-default);
    bottom: 0;
    overflow-y: auto;
    width: 100%;
    z-index: var(--z-index-page-sidebar);
    background-color: var(--color-white);
    transform: translateX(-100%);
    opacity: 0;
    transition: opacity var(--duration-l) var(--ease-out-sharp), transform var(--duration-l) var(--ease-out-sharp)
}

.ds-page-show-drawer .ds-page-drawer {
    opacity: 1;
    transform: translateX(0)
}

@media (min-width: 768px) {
    .ds-page-drawer {
        display: none
    }
}

.ds-page-content-container {
    display: flex;
    flex-direction: column
}

.ds-page-content {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    flex: 1 0 auto;
    margin-top: var(--size-height-default);
    padding: calc(var(--border-size-active) + var(--border-size-default));
    overflow: hidden
}

@media (min-width: 768px) {
    .ds-page-has-no-header .ds-page-content {
        margin-top: 0
    }
}

@media (min-width: 768px) {
    .ds-page-has-sidebar .ds-page-content {
        padding-left: 220px
    }
}

@media (min-width: 1024px) {
    .ds-page-has-sidebar .ds-page-content {
        padding-left: 260px
    }
}

.ds-page-is-stacked .ds-page-content {
    grid-row: content;
    margin-top: 0
}

.ds-page-swap-nav .ds-page-content {
    margin: calc(2 * var(--space-xxl) + var(--space-base)) var(--space-base) var(--space-base) var(--space-base);
    padding-left: 0
}

@media (min-width: 1024px) {
    .ds-page-swap-nav .ds-page-content {
        margin: calc(2 * var(--space-xxl)) var(--space-xxl) var(--space-xxl) var(--space-xxl);
        margin-left: calc(2 * var(--space-xxl));
        padding-left: var(--space-base)
    }
}

.ds-page-hide-nav .ds-page-content {
    margin-top: 64px
}

@media (min-width: 768px) {
    .ds-page-hide-nav .ds-page-content {
        margin-top: 146px;
        margin-left: var(--space-xxl)
    }
}

.ds-page-content.ds-page-content-left {
    text-align: left
}

.ds-page-content.ds-page-content-right {
    text-align: right
}

.ds-page-content.ds-page-content-center {
    text-align: center
}

.ds-page-footer {
    flex-shrink: 0;
    padding-top: var(--space-xl)
}

.ds-page-top-banner {
    grid-area: tag;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-modal)
}

.ds-page-title {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    padding: var(--space-l) 0;
    color: var(--color-primary);
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)' fill='none'%3E%3Crect width='1440' height='1024' fill='none'/%3E%3Ccircle opacity='0.04' cx='404.5' cy='789.5' r='335.5' fill='white'/%3E%3Ccircle opacity='0.04' cx='1243.5' cy='878.5' r='191.5' fill='white'/%3E%3Ccircle opacity='0.04' cx='653.5' cy='631.5' r='224.5' fill='white'/%3E%3Cg opacity='0.1'%3E%3Cpath d='M58.0292 971.25L187.5 747L316.971 971.25H58.0292Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1208.9 915.25L1253.5 838L1298.1 915.25H1208.9Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1284.09 832L1317 775L1349.91 832H1284.09Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1181.09 889L1214 832L1246.91 889H1181.09Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1260.56 988L1290 937L1319.44 988H1260.56Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1109.15 936.25L1129.5 901L1149.85 936.25H1109.15Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1311.15 890.25L1331.5 855L1351.85 890.25H1311.15Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M182.102 920.75L499.5 371L816.898 920.75H182.102Z' stroke='white' stroke-width='2'/%3E%3C/g%3E%3Ccircle opacity='0.04' cx='769' cy='877' r='440' stroke='white' stroke-width='2'/%3E%3Ccircle opacity='0.04' cx='248' cy='667' r='440' stroke='white' stroke-width='2'/%3E%3Cpath opacity='0.05' d='M979.5 187L1502.15 1092.25H456.854L979.5 187Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='1440' height='1024' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"), linear-gradient(0deg, var(--color-neutral-90), var(--color-neutral-80));
    background-repeat: no-repeat;
    background-position: bottom center
}

@media (min-width: 768px) {
    .ds-page-title {
        padding: var(--space-xl) 0
    }
}

.ds-page-title-highlight {
    color: var(--color-primary-inverse);
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)' fill='none'%3E%3Crect width='1440' height='1024' fill='none'/%3E%3Ccircle opacity='0.04' cx='404.5' cy='789.5' r='335.5' fill='white'/%3E%3Ccircle opacity='0.04' cx='1243.5' cy='878.5' r='191.5' fill='white'/%3E%3Ccircle opacity='0.04' cx='653.5' cy='631.5' r='224.5' fill='white'/%3E%3Cg opacity='0.1'%3E%3Cpath d='M58.0292 971.25L187.5 747L316.971 971.25H58.0292Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1208.9 915.25L1253.5 838L1298.1 915.25H1208.9Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1284.09 832L1317 775L1349.91 832H1284.09Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1181.09 889L1214 832L1246.91 889H1181.09Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1260.56 988L1290 937L1319.44 988H1260.56Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1109.15 936.25L1129.5 901L1149.85 936.25H1109.15Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1311.15 890.25L1331.5 855L1351.85 890.25H1311.15Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M182.102 920.75L499.5 371L816.898 920.75H182.102Z' stroke='white' stroke-width='2'/%3E%3C/g%3E%3Ccircle opacity='0.04' cx='769' cy='877' r='440' stroke='white' stroke-width='2'/%3E%3Ccircle opacity='0.04' cx='248' cy='667' r='440' stroke='white' stroke-width='2'/%3E%3Cpath opacity='0.05' d='M979.5 187L1502.15 1092.25H456.854L979.5 187Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='1440' height='1024' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"), linear-gradient(0deg, var(--color-primary-light), var(--color-primary));
    background-repeat: no-repeat;
    background-position: bottom center
}

.ds-placeholder {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    padding: var(--space-base);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-neutral-80);
    border: var(--border-size-default) dashed var(--color-neutral-60)
}

@media (min-width: 768px) {
    .ds-placeholder {
        padding: var(--space-xl) 0
    }
}

.ds-section {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    padding: var(--space-l) 0;
    background-color: var(--color-neutral-90)
}

@media (min-width: 768px) {
    .ds-section {
        padding: var(--space-xl) 0
    }
}

.ds-section-centered {
    text-align: center
}

.ds-section-primary {
    color: var(--color-primary-inverse);
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)' fill='none'%3E%3Crect width='1440' height='1024' fill='none'/%3E%3Ccircle opacity='0.04' cx='404.5' cy='789.5' r='335.5' fill='white'/%3E%3Ccircle opacity='0.04' cx='1243.5' cy='878.5' r='191.5' fill='white'/%3E%3Ccircle opacity='0.04' cx='653.5' cy='631.5' r='224.5' fill='white'/%3E%3Cg opacity='0.1'%3E%3Cpath d='M58.0292 971.25L187.5 747L316.971 971.25H58.0292Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1208.9 915.25L1253.5 838L1298.1 915.25H1208.9Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1284.09 832L1317 775L1349.91 832H1284.09Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1181.09 889L1214 832L1246.91 889H1181.09Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1260.56 988L1290 937L1319.44 988H1260.56Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1109.15 936.25L1129.5 901L1149.85 936.25H1109.15Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1311.15 890.25L1331.5 855L1351.85 890.25H1311.15Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M182.102 920.75L499.5 371L816.898 920.75H182.102Z' stroke='white' stroke-width='2'/%3E%3C/g%3E%3Ccircle opacity='0.04' cx='769' cy='877' r='440' stroke='white' stroke-width='2'/%3E%3Ccircle opacity='0.04' cx='248' cy='667' r='440' stroke='white' stroke-width='2'/%3E%3Cpath opacity='0.05' d='M979.5 187L1502.15 1092.25H456.854L979.5 187Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='1440' height='1024' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"), linear-gradient(0deg, var(--color-primary-light), var(--color-primary));
    background-repeat: no-repeat;
    background-position: bottom center
}

.ds-section-secondary {
    color: var(--color-secondary-inverse);
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)' fill='none'%3E%3Crect width='1440' height='1024' fill='none'/%3E%3Ccircle opacity='0.04' cx='404.5' cy='789.5' r='335.5' fill='white'/%3E%3Ccircle opacity='0.04' cx='1243.5' cy='878.5' r='191.5' fill='white'/%3E%3Ccircle opacity='0.04' cx='653.5' cy='631.5' r='224.5' fill='white'/%3E%3Cg opacity='0.1'%3E%3Cpath d='M58.0292 971.25L187.5 747L316.971 971.25H58.0292Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1208.9 915.25L1253.5 838L1298.1 915.25H1208.9Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1284.09 832L1317 775L1349.91 832H1284.09Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1181.09 889L1214 832L1246.91 889H1181.09Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1260.56 988L1290 937L1319.44 988H1260.56Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1109.15 936.25L1129.5 901L1149.85 936.25H1109.15Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M1311.15 890.25L1331.5 855L1351.85 890.25H1311.15Z' stroke='white' stroke-width='2'/%3E%3Cpath d='M182.102 920.75L499.5 371L816.898 920.75H182.102Z' stroke='white' stroke-width='2'/%3E%3C/g%3E%3Ccircle opacity='0.04' cx='769' cy='877' r='440' stroke='white' stroke-width='2'/%3E%3Ccircle opacity='0.04' cx='248' cy='667' r='440' stroke='white' stroke-width='2'/%3E%3Cpath opacity='0.05' d='M979.5 187L1502.15 1092.25H456.854L979.5 187Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='1440' height='1024' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"), linear-gradient(0deg, var(--color-secondary-light), var(--color-secondary));
    background-repeat: no-repeat;
    background-position: bottom center
}

.ds-section-fullheight {
    min-height: 100vh;
    display: flex;
    align-items: center
}

.ds-section-content {
    flex: 0 0 100%
}

.ds-space {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

.ds-space-centered {
    text-align: center
}

.ds-spinner {
    animation: rotate 16s linear infinite;
    position: relative;
    display: inline-block;
    width: var(--space-l);
    height: var(--space-l)
}

.ds-spinner.ds-size-small {
    width: var(--space-base);
    height: var(--space-base)
}

.ds-spinner.ds-size-large {
    width: var(--space-xl);
    height: var(--space-xl)
}

.ds-spinner-circle {
    stroke: var(--color-neutral-40);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite
}

.ds-spinner-inverse .ds-spinner-circle {
    stroke: var(--color-primary-inverse)
}

.ds-spinner-primary .ds-spinner-circle {
    stroke: var(--color-primary)
}

.ds-spinner-secondary .ds-spinner-circle {
    stroke: var(--color-secondary)
}

.ds-spinner-danger .ds-spinner-circle {
    stroke: var(--color-danger)
}

@keyframes rotate {
    100% {
        transform: rotate(2160deg)
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124
    }
}

.loader {
    padding: 5rem
}

.loader_container {
    animation: animball_two 5s infinite;
    width: 44px;
    height: 44px;
    margin: auto
}

.square_container {
    position: absolute;
    width: 44px;
    height: 44px
}

.square_container div {
    animation: animball_one 1s infinite;
    width: 20px;
    height: 20px;
    border-radius: 0;
    position: absolute
}

.square_container div.square1 {
    background-color: var(--color-primary-dark);
    top: 0;
    left: 0
}

.square_container div.square2 {
    background-color: var(--color-primary-light);
    top: 0;
    left: 24px
}

.square_container div.square3 {
    background-color: var(--color-primary-light);
    top: 24px;
    left: 0
}

.square_container div.square4 {
    background-color: var(--color-primary-dark);
    top: 24px;
    left: 24px
}

@keyframes animball_one {
    0% {
        position: absolute
    }
    50% {
        top: 12px;
        left: 12px;
        position: absolute;
        opacity: 0.5
    }
    100% {
        position: absolute
    }
}

@keyframes animball_two {
    0% {
        transform: rotate(0deg) scale(1)
    }
    50% {
        transform: rotate(360deg) scale(1.3)
    }
    100% {
        transform: rotate(0deg) scale(1)
    }
}

.ds-video {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: relative;
    height: 0;
    overflow: hidden
}

.ds-video-aspect-ratio-16-9 {
    padding-top: calc(9/16 * 100%)
}

.ds-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ds-button-stack {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: visible;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    text-align: left;
    text-decoration: none;
    padding: 0 var(--space-base);
    height: var(--size-height-default);
    border: none;
    border-radius: var(--border-radius-default);
    transition: color var(--duration-s) var(--ease-out), background-color var(--duration-s) var(--ease-out);
    box-shadow: none;
    width: 100%;
    font-size: var(--font-size-4);
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    align-items: center;
    justify-content: flex-start;
    background-color: transparent
}

.ds-button-stack.ds-button-stack-helper {
    height: var(--size-height-l)
}

.ds-button-stack::-moz-focus-inner {
    border: 0;
    padding: 0
}

.ds-button-stack-label {
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ds-button-stack-label .ds-button-stack-helper-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--font-weight-default)
}

.ds-button-stack-icon {
    height: var(--space-base);
    flex: 0 0 auto;
    margin-left: auto
}

.ds-button-stack-nav {
    color: var(--color-neutral-10)
}

.ds-button-stack-nav:hover,
.ds-button-stack-nav.ds-button-hover {
    color: var(--color-primary);
    background-color: var(--color-neutral-40-opacity-10)
}

.ds-button-stack-nav.router-link-active,
.ds-button-stack-nav.router-link-exact-active,
.ds-button-stack-nav.is-selected {
    color: var(--color-white);
    background-color: var(--color-primary)
}

.ds-button-stack-nav:active {
    color: var(--color-primary-dark);
    background-color: var(--color-neutral-40-opacity-20)
}

.ds-button-stack-link {
    padding-left: 0;
    padding-right: 0;
    color: var(--color-primary)
}

.ds-button-stack-link .ds-button-stack-helper-text {
    color: var(--color-neutral-10)
}

.ds-button-stack-link:hover,
.ds-button-stack-link.ds-button-hover {
    color: var(--color-primary-light);
    background-color: none
}

.ds-button-stack-link:hover .ds-button-stack-helper-text,
.ds-button-stack-link.ds-button-hover .ds-button-stack-helper-text {
    color: var(--color-primary-light)
}

.ds-button-stack-link:active {
    color: var(--color-primary-dark)
}

.tag-in-ds-button-stack {
    margin-left: var(--space-l);
    margin-right: var(--space-l)
}

.ds-menu {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

.ds-menu-inverse {
    background-color: var(--color-neutral-10)
}

.ds-menu-navbar {
    height: 100%;
    width: 100%
}

ul.ds-menu-list {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column
}

.ds-menu-navbar ul.ds-menu-list {
    flex-direction: row;
    height: 100%;
    justify-content: space-around
}

.ds-menu-item-link {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: block;
    color: var(--color-neutral-40);
    text-decoration: none;
    padding: var(--space-xs) var(--space-base);
    transition: color var(--duration-s) var(--ease-out)
}

.ds-menu-item-link.router-link-active {
    color: var(--color-neutral-10)
}

.ds-menu-item-link:hover {
    color: var(--color-neutral-10)
}

.ds-menu-item-link.router-link-exact-active {
    color: var(--color-neutral-10)
}

.ds-menu-item-inverse .ds-menu-item-link {
    color: var(--color-neutral-60)
}

.ds-menu-item-inverse .ds-menu-item-link.router-link-active {
    color: var(--color-link-active)
}

.ds-menu-item-inverse .ds-menu-item-link:hover {
    color: var(--color-link-active)
}

.ds-menu-item-inverse .ds-menu-item-link.router-link-exact-active {
    background-color: var(--color-black)
}

.ds-menu-item-inverse.ds-menu-item-show-submenu>.ds-menu-item-link {
    color: var(--color-link-active)
}

.ds-icon .ds-menu-item-link {
    margin-right: var(--space-xs)
}

.ds-icon-only .ds-menu-item-link {
    padding: var(--space-s)
}

@media (min-width: 1024px) {
    .ds-icon-only .ds-menu-item-link {
        padding: var(--space-base)
    }
}

.ds-icon-only .ds-menu-item-link .ds-icon {
    margin-right: 0;
    height: var(--font-size-7)
}

.ds-icon-only .ds-menu-item-link .ds-icon svg {
    height: var(--font-size-7);
    width: var(--font-size-7)
}

.ds-menu-item-link-icon-container {
    position: relative;
    display: inline-block
}

.ds-menu-item-link .ds-menu-item-label {
    margin-left: var(--space-xs)
}

.ds-menu-item-link-attention:before {
    position: absolute;
    top: -9px;
    right: 0;
    z-index: 2;
    color: var(--color-danger);
    content: '\25CF';
    font-size: var(--font-size-5);
    opacity: 1 !important
}

.ds-menu-item-level-1 .ds-menu-item-link {
    font-size: var(--font-size-3);
    padding-left: calc(var(--space-xs) * 3)
}

.ds-menu-item-level-2 .ds-menu-item-link {
    font-size: var(--font-size-3);
    padding-left: calc(var(--space-xs) * 4)
}

.ds-menu-item-navbar .ds-menu-item-link {
    font-size: var(--font-size-4);
    padding: var(--space-xs) var(--space-s)
}

.ds-menu-item-navbar.ds-menu-item-level-0>.ds-menu-item-link {
    position: relative;
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-weight: var(--font-weight-bold)
}

.ds-menu-item-navbar.ds-menu-item-level-0>.ds-menu-item-link,
.ds-menu-item-navbar.ds-menu-item-level-0>.ds-menu-item-link:hover,
.ds-menu-item-navbar.ds-menu-item-level-0>.ds-menu-item-link.router-link-exact-active {
    background-color: transparent
}

.ds-menu-item-navbar.ds-menu-item-show-submenu.ds-menu-item-level-0>.ds-menu-item-link {
    color: var(--color-link-active)
}

.ds-menu-item-navbar.ds-menu-item-show-submenu.ds-menu-item-level-0>.ds-menu-item-link:before {
    opacity: 1
}

.ds-icon-only.ds-menu-item-level-0 .ds-menu-item-link {
    position: relative;
    height: 100%;
    display: inline-flex;
    align-items: center
}

.ds-icon-only.ds-menu-item-level-0 .ds-menu-item-link,
.ds-icon-only.ds-menu-item-level-0 .ds-menu-item-link:hover,
.ds-icon-only.ds-menu-item-level-0 .ds-menu-item-link.router-link-exact-active {
    background-color: transparent
}

.ds-menu-item-navbar {
    position: relative
}

.ds-menu-item-navbar.ds-menu-item-level-0 {
    margin-right: var(--space-xs);
    height: 100%
}

.ds-menu-item-navbar.ds-menu-item-level-0.ds-icon-only a:before {
    top: unset;
    width: 100%
}

.ds-menu-item-navbar.ds-menu-item-level-0.ds-icon-only,
.ds-menu-item-navbar.ds-menu-item-level-0.ds-icon-only:hover,
.ds-menu-item-navbar.ds-menu-item-level-0.ds-icon-only.router-link-exact-active {
    background-color: transparent
}

ul.ds-menu-item-submenu {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    padding-left: 0
}

.ds-menu-item-navbar ul.ds-menu-item-submenu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 150px;
    z-index: var(--z-index-page-submenu);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-default);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--space-xs)) scaleY(0.5);
    transform-origin: 50% 0%;
    transition: all var(--duration-s) var(--ease-in)
}

.ds-menu-item-navbar.ds-menu-item-inverse ul.ds-menu-item-submenu {
    background-color: var(--color-neutral-10)
}

.ds-menu-item-navbar.ds-menu-item-show-submenu>ul.ds-menu-item-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(var(--space-xs)) scaleX(1);
    transition: all var(--duration-s) var(--ease-out)
}

*[data-v-32e18773] {
    will-change: height;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px
}

.expand-enter-active,
.expand-leave-active {
    transition: height var(--duration-default) var(--ease-out);
    overflow: hidden
}

.expand-enter,
.expand-leave-to {
    height: 0
}

.ds-banner {
    min-height: var(--size-height-s);
    font-family: var(--font-family-heading-s);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3);
    line-height: var(--line-height-3);
    border-radius: var(--border-radius-default);
    color: var(--color-neutral-10)
}

.ds-banner-slot {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s)
}

.ds-banner-slot-no-icon {
    padding-left: var(--space-base)
}

.ds-banner-icon {
    text-align: right
}

.ds-banner-icon .ds-icon {
    height: var(--size-height-s);
    margin-right: var(--space-xxs)
}

.ds-banner-icon .ds-icon-svg {
    height: var(--space-base);
    display: block;
    margin: auto
}

.ds-banner-default {
    background: var(--color-primary-inverse)
}

.ds-banner-success {
    background: var(--color-success-inverse)
}

.ds-banner-danger {
    background: var(--color-danger-inverse)
}

.ds-banner-warning {
    background: var(--color-warning-inverse)
}

.ds-banner-right-icon .ds-icon {
    width: var(--size-height-s);
    opacity: var(--opacity-disabled)
}

.ds-banner-right-icon .ds-icon:hover {
    opacity: 1
}

.ds-banner-left-icon .ds-icon {
    margin-left: var(--space-base);
    margin-right: var(--space-s)
}

.ds-banner-left-icon .ds-icon-svg {
    height: var(--line-height-4)
}

.ds-banner-button .ds-icon-svg {
    width: var(--line-height-3)
}

.ds-banner-button .ds-button-text {
    margin-right: 0
}

.ds-chip-container {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-xxs);
    margin-right: var(--space-xxs);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-s);
    margin-right: var(--space-xs);
    display: inline-flex;
    flex-direction: row-reverse;
    position: relative
}

.ds-chip-container:last-child {
    margin-bottom: 0
}

.ds-chip-container:last-child {
    margin-right: 0
}

.ds-chip-container .ds-icon {
    height: var(--space-l);
    width: var(--space-l);
    opacity: var(--opacity-disabled);
    position: absolute;
    right: var(--space-xs);
    top: var(--space-xs);
    border-radius: var(--border-radius-circle)
}

.ds-chip-container .ds-icon:before {
    content: '';
    position: absolute;
    height: var(--size-height-s);
    width: var(--size-height-xs);
    left: calc(-1 * var(--border-size-xl))
}

.ds-chip-container .ds-icon:hover {
    opacity: 1;
    background-color: var(--color-neutral-60)
}

.ds-chip-container .ds-icon:active~.ds-chip-main {
    background-color: var(--color-neutral-60)
}

.ds-chip-container .ds-icon-svg {
    height: var(--line-height-3);
    display: inline-block;
    position: absolute;
    right: var(--space-xxs)
}

.ds-chip-main {
    border-radius: var(--border-radius-rounded);
    background-color: var(--color-neutral-70);
    padding: var(--space-s) var(--space-base);
    height: var(--size-height-s);
    font-family: var(--font-family-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3);
    line-height: var(--line-height-3);
    color: var(--text-color-default)
}

.ds-chip-inverse {
    color: var(--text-color-inverse);
    background-color: var(--color-neutral-30)
}

.ds-chip-primary {
    color: var(--color-white);
    background-color: var(--color-primary)
}

.ds-chip-success {
    color: var(--color-white);
    background-color: var(--color-success)
}

.ds-chip-warning {
    color: var(--color-white);
    background-color: var(--color-warning)
}

.ds-chip-danger {
    color: var(--color-white);
    background-color: var(--color-danger)
}

.ds-chip-container-inverse .ds-icon {
    color: var(--color-white)
}

.ds-chip-container-inverse .ds-icon:active~.ds-chip-main,
.ds-chip-container-inverse .ds-icon:hover {
    background-color: var(--color-neutral-20)
}

.ds-chip-container-primary .ds-icon {
    color: var(--color-white)
}

.ds-chip-container-primary .ds-icon:active~.ds-chip-main,
.ds-chip-container-primary .ds-icon:hover {
    background-color: var(--color-primary-dark)
}

.ds-chip-container-success .ds-icon {
    color: var(--color-white)
}

.ds-chip-container-success .ds-icon:active~.ds-chip-main,
.ds-chip-container-success .ds-icon:hover {
    background-color: var(--color-success-dark)
}

.ds-chip-container-warning .ds-icon {
    color: var(--color-white)
}

.ds-chip-container-warning .ds-icon:active~.ds-chip-main,
.ds-chip-container-warning .ds-icon:hover {
    background-color: var(--color-warning-dark)
}

.ds-chip-container-danger .ds-icon {
    color: var(--color-white)
}

.ds-chip-container-danger .ds-icon:active~.ds-chip-main,
.ds-chip-container-danger .ds-icon:hover {
    background-color: var(--color-danger-dark)
}

.ds-chip-size-s {
    padding: var(--space-xs) var(--space-s);
    height: var(--space-xl)
}

.ds-chip-container-size-s .ds-icon {
    opacity: var(--opacity-disabled);
    position: absolute;
    top: var(--space-xxs);
    right: var(--space-xxs)
}

.ds-chip-container-size-s .ds-icon-svg {
    display: inline-block;
    position: absolute;
    right: var(--space-xxs)
}

.ds-chip-size-l {
    padding: var(--space-base) var(--font-size-5);
    height: var(--size-height-default);
    line-height: var(--line-height-3);
    font-size: var(--font-size-4)
}

.ds-chip-container-size-l .ds-icon {
    opacity: var(--opacity-disabled);
    position: absolute;
    top: var(--space-s);
    right: var(--space-s)
}

.ds-chip-container-size-l .ds-icon-svg {
    display: inline-block;
    position: absolute
}

.ds-chip-removable {
    padding-right: calc(var(--size-height-s) - var(--border-size-xl))
}

.ds-chip-removable.ds-chip-size-s {
    padding-right: var(--size-height-xs)
}

.ds-chip-removable.ds-chip-size-l {
    padding-right: calc(var(--size-height-default) - (var(--border-size-xl) * 2))
}

.ds-code {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-base);
    font-family: var(--font-family-code);
    line-height: var(--line-height-4);
    color: var(--text-color-inverse);
    background: var(--color-neutral-30);
    padding: var(--space-s);
    border-radius: var(--border-radius-default)
}

.ds-code:last-child {
    margin-bottom: 0
}

.ds-code-inline {
    display: inline-block;
    padding: var(--space-xxs) var(--space-xs);
    margin-bottom: 0
}

.ds-code-size-small {
    font-size: var(--font-size-3)
}

.ds-code-size-base {
    font-size: var(--font-size-4)
}

.ds-code-size-large {
    font-size: var(--font-size-5)
}

.ds-download-badge {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    width: 130px
}

.ds-heading {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-xs);
    margin-top: var(--font-size-7);
    font-family: var(--font-family-heading-s);
    line-height: var(--text-line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-bold)
}

.ds-heading:last-child {
    margin-bottom: 0
}

.ds-heading:first-child {
    margin-top: 0
}

.ds-heading-top-level {
    font-family: var(--font-family-heading-l)
}

.ds-heading-primary {
    color: var(--color-primary)
}

.ds-heading-soft {
    color: var(--color-neutral-60)
}

.ds-heading-h1,
.ds-heading-1 {
    font-family: var(--font-family-heading-l);
    font-size: var(--font-size-7);
    line-height: var(--line-height-7)
}

@media (min-width: 1024px) {
    .ds-heading-h1,
    .ds-heading-1 {
        font-size: var(--font-size-9);
        line-height: var(--line-height-9)
    }
}

.ds-heading-h2,
.ds-heading-2 {
    font-family: var(--font-family-heading-l);
    font-size: var(--font-size-6);
    line-height: var(--line-height-6)
}

@media (min-width: 1024px) {
    .ds-heading-h2,
    .ds-heading-2 {
        font-size: var(--font-size-7);
        line-height: var(--line-height-7)
    }
}

.ds-heading-h3,
.ds-heading-3 {
    font-size: var(--font-size-5);
    line-height: var(--line-height-5)
}

@media (min-width: 1024px) {
    .ds-heading-h3,
    .ds-heading-3 {
        font-size: var(--font-size-6);
        line-height: var(--line-height-6)
    }
}

.ds-heading-h4,
.ds-heading-4 {
    letter-spacing: var(--letter-spacing-small-heading);
    font-size: var(--font-size-5)
}

.ds-heading-h5,
.ds-heading-5 {
    letter-spacing: var(--letter-spacing-small-heading);
    font-size: var(--font-size-4)
}

.ds-heading-h6,
.ds-heading-6 {
    letter-spacing: var(--letter-spacing-small-heading);
    font-size: var(--font-size-3)
}

.ds-logo {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.ds-logo-svg {
    width: 262px;
    height: auto
}

.ds-logo-svg.icon-only {
    height: 72px;
    width: auto
}

.ds-logo-svg.vertical {
    width: 136px
}

.ds-logo-svg.vertical-updated {
    width: 215px
}

.ds-logo-svg.text {
    width: 136px
}

.ds-subhead {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-default);
    letter-spacing: var(--letter-spacing-all-caps);
    line-height: var(--line-height-4);
    text-transform: uppercase
}

.ds-subhead:last-child {
    margin-bottom: 0
}

.ds-subhead-small {
    font-size: var(--font-size-3);
    line-height: var(--line-height-3)
}

.ds-subhead-inline {
    display: inline
}

.ds-tag {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-xxs);
    margin-right: var(--space-xxs);
    display: inline-block;
    font-family: var(--font-family-text);
    line-height: var(--line-height-4);
    padding: 0 var(--space-xs);
    border-radius: var(--border-radius-s);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-all-caps);
    text-transform: uppercase;
    color: var(--text-color-default);
    background-color: var(--color-neutral-70)
}

.ds-tag:last-child {
    margin-bottom: 0
}

.ds-tag:last-child {
    margin-right: 0
}

.ds-tag-inverse {
    color: var(--text-color-inverse);
    background-color: var(--color-neutral-30)
}

.ds-tag-primary {
    color: var(--color-primary-inverse);
    background-color: var(--color-primary)
}

.ds-tag-success {
    color: var(--color-success-inverse);
    background-color: var(--color-success)
}

.ds-tag-warning {
    color: var(--color-white);
    background-color: var(--color-warning)
}

.ds-tag-danger {
    color: var(--color-danger-inverse);
    background-color: var(--color-danger)
}

.ds-tag-round {
    border-radius: var(--border-radius-rounded)
}

.ds-tag-size-base {
    font-size: var(--font-size-2)
}

.ds-tag-size-s {
    font-size: var(--font-size-1)
}

.ds-tag-size-l {
    font-size: var(--font-size-3)
}

.ds-text {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-base);
    font-family: var(--font-family-text);
    line-height: var(--line-height-4);
    display: block
}

.ds-text:last-child {
    margin-bottom: 0
}

.ds-text-bold {
    font-weight: var(--font-weight-bold)
}

.ds-text-inline {
    display: inline
}

.ds-text-size-s {
    font-size: var(--font-size-3);
    line-height: var(--line-height-3)
}

.ds-text-size-base {
    font-size: var(--font-size-4)
}

.ds-text-size-l {
    font-size: var(--font-size-5)
}

.ds-text-size-xl {
    font-size: var(--font-size-6)
}

.ds-text-soft {
    color: var(--color-neutral-40)
}

.ds-text-softer {
    color: var(--color-neutral-60)
}

.ds-text-primary {
    color: var(--color-primary)
}

.ds-text-success {
    color: var(--color-success)
}

.ds-text-danger {
    color: var(--color-danger)
}

.ds-text-warning {
    color: var(--color-warning)
}

.ds-toaster-overlay {
    justify-content: center;
    align-items: center;
    position: fixed;
    transform: translateX(-50%);
    z-index: 2147483650;
    left: 50%;
    bottom: calc(var(--space-l) - var(--space-s));
    width: 100%;
    pointer-events: none;
    padding-left: var(--space-l);
    padding-right: var(--space-l)
}

.ds-toaster-overlay .ds-icon-svg {
    height: var(--line-height-4)
}

.ds-toaster-fresh-toast {
    height: 0;
    opacity: 0;
    transform: translateX(var(--space-base))
}

.ds-toaster-pop-toast {
    transition: height 300ms, transform ease-out 300ms 300ms, opacity 300ms 300ms;
    opacity: 1
}

.ds-toaster-pop-first-toast {
    transition: transform ease-out 300ms, opacity 300ms;
    opacity: 1
}

.ds-toaster-dismiss-toast {
    transition: opacity ease-in 500ms, height 300ms 500ms;
    opacity: 0
}

.ds-toaster-left-icon {
    margin-right: var(--space-xs)
}

.ds-toast {
    min-height: var(--size-height-s);
    font-family: var(--font-family-heading-s);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3);
    line-height: var(--line-height-3);
    border-radius: var(--border-radius-l);
    color: var(--color-neutral-100);
    box-shadow: var(--box-shadow-default);
    pointer-events: all
}

.ds-toast-slot {
    padding-top: var(--space-s);
    padding-left: var(--space-base);
    padding-bottom: var(--space-s)
}

.ds-toast-icon {
    text-align: right
}

.ds-toast-icon .ds-icon {
    height: 100%;
    margin-right: var(--space-base);
    opacity: var(--opacity-disabled)
}

.ds-toast-icon .ds-icon:hover {
    opacity: 1
}

.ds-toast-icon .ds-icon-svg {
    height: var(--space-base);
    display: block;
    margin: auto
}

.ds-toast-button .ds-icon-svg {
    width: var(--line-height-3)
}

.ds-toast-button .ds-button-text {
    margin-right: 0
}

@font-face {
    font-family: 'LatoWeb';
    src: url(fonts/Lato-Semibold.8bb939ef.eot);
    src: url(fonts/Lato-Semibold.8bb939ef.eot?#iefix) format("embedded-opentype"), url(fonts/Lato-Semibold.8b4f872c.woff2) format("woff2"), url(fonts/Lato-Semibold.c2b50f4a.woff) format("woff"), url(fonts/Lato-Semibold.3b0cd725.ttf) format("truetype");
    font-style: normal;
    font-weight: 600;
    text-rendering: optimizeLegibility
}

@font-face {
    font-family: 'LatoWeb';
    src: url(fonts/Lato-SemiboldItalic.82b587d9.eot);
    src: url(fonts/Lato-SemiboldItalic.82b587d9.eot?#iefix) format("embedded-opentype"), url(fonts/Lato-SemiboldItalic.80f6811f.woff2) format("woff2"), url(fonts/Lato-SemiboldItalic.9fcec04c.woff) format("woff"), url(fonts/Lato-SemiboldItalic.d5fa302e.ttf) format("truetype");
    font-style: italic;
    font-weight: 600;
    text-rendering: optimizeLegibility
}

@font-face {
    font-family: 'LatoWeb';
    src: url(fonts/Lato-Italic.0acac383.eot);
    src: url(fonts/Lato-Italic.0acac383.eot?#iefix) format("embedded-opentype"), url(fonts/Lato-Italic.4eb103b4.woff2) format("woff2"), url(fonts/Lato-Italic.f28f2d64.woff) format("woff"), url(fonts/Lato-Italic.4ffc48d0.ttf) format("truetype");
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility
}

@font-face {
    font-family: 'LatoWeb';
    src: url(fonts/Lato-Regular.8ab18d93.eot);
    src: url(fonts/Lato-Regular.8ab18d93.eot?#iefix) format("embedded-opentype"), url(fonts/Lato-Regular.bd03a2cc.woff2) format("woff2"), url(fonts/Lato-Regular.27bd77b9.woff) format("woff"), url(fonts/Lato-Regular.6d4e7822.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility
}

html,
body {
    width: 100%;
    height: 100%
}

:focus {
    outline: none
}

body.using-keyboard-nav * {
    outline-offset: calc(-1 * var(--outline-width) + var(--outline-offset));
    transition-property: outline-offset;
    transition-duration: 0.05s;
    transition-timing-function: linear
}

body.using-keyboard-nav :focus {
    outline-color: var(--color-primary-opacity-50);
    outline-style: var(--border-style-default);
    outline-width: var(--outline-width);
    outline-offset: var(--outline-offset)
}

input::-ms-clear,
input::-ms-reveal {
    display: none
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    font-size: var(--font-size-4);
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

@-ms-viewport {
    width: device-width
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block
}

body {
    margin: 0;
    font-size: var(--font-size-4);
    line-height: var(--line-height-4);
    font-family: var(--font-family-text);
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-color-default);
    background-color: var(--color-white)
}

[tabindex="-1"]:focus {
    outline: none !important
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

a {
    text-decoration: none !important;
    color: var(--color-link)
}

a:hover,
a:active {
    color: var(--color-link-active)
}

pre,
code,
kbd,
samp {
    font-family: var(--font-family-code);
    font-size: 1em
}

pre {
    overflow: auto
}

img {
    vertical-align: middle;
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
    touch-action: manipulation
}

table {
    border-collapse: collapse
}

th {
    text-align: inherit
}

input,
button,
select,
optgroup,
textarea {
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html [type="button"]:not(.ds-button),
[type="reset"],
[type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: listbox
}

textarea {
    overflow: auto;
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    max-width: 100%;
    color: inherit;
    white-space: normal
}

progress {
    vertical-align: baseline
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none !important
}

::selection {
    background: var(--color-primary);
    color: var(--color-primary-inverse)
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 100;
    src: local("IBM Plex Serif Thin"), local("IBMPlexSerif-Thin"), url(fonts/ibm-plex-serif-latin-100-normal.cc2059fe.woff2) format("woff2"), url(fonts/ibm-plex-serif-latin-100-normal.01b7cd57.woff) format("woff")
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 200;
    src: local("IBM Plex Serif ExtraLight"), local("IBMPlexSerif-ExtraLight"), url(fonts/ibm-plex-serif-latin-200-normal.b2a0aa6a.woff2) format("woff2"), url(fonts/ibm-plex-serif-latin-200-normal.abc82aa4.woff) format("woff")
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: local("IBM Plex Serif Light"), local("IBMPlexSerif-Light"), url(fonts/ibm-plex-serif-latin-300-normal.b10b1df3.woff2) format("woff2"), url(fonts/ibm-plex-serif-latin-300-normal.7b29d679.woff) format("woff")
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local("IBM Plex Serif"), local("IBMPlexSerif"), url(fonts/ibm-plex-serif-latin-400-normal.7261ee2c.woff2) format("woff2"), url(fonts/ibm-plex-serif-latin-400-normal.0cc912a1.woff) format("woff")
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: local("IBM Plex Serif Medium"), local("IBMPlexSerif-Medium"), url(fonts/ibm-plex-serif-latin-500-normal.edd6220e.woff2) format("woff2"), url(fonts/ibm-plex-serif-latin-500-normal.6a44fbf0.woff) format("woff")
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: local("IBM Plex Serif SemiBold"), local("IBMPlexSerif-SemiBold"), url(fonts/ibm-plex-serif-latin-600-normal.08dab5f0.woff2) format("woff2"), url(fonts/ibm-plex-serif-latin-600-normal.a69ade26.woff) format("woff")
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local("IBM Plex Serif Bold"), local("IBMPlexSerif-Bold"), url(fonts/ibm-plex-serif-latin-700-normal.2e60e716.woff2) format("woff2"), url(fonts/ibm-plex-serif-latin-700-normal.3f04fff5.woff) format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"), url(fonts/open-sans-latin-300-normal.24f7b094.woff2) format("woff2"), url(fonts/open-sans-latin-300-normal.a7622f60.woff) format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"), url(fonts/open-sans-latin-400-normal.33543c5c.woff2) format("woff2"), url(fonts/open-sans-latin-400-normal.de0869e3.woff) format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(fonts/open-sans-latin-600-normal.819af3d3.woff2) format("woff2"), url(fonts/open-sans-latin-600-normal.449d681c.woff) format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"), url(fonts/open-sans-latin-700-normal.0edb7628.woff2) format("woff2"), url(fonts/open-sans-latin-700-normal.1f85e92d.woff) format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: local("Open Sans ExtraBold"), local("OpenSans-ExtraBold"), url(fonts/open-sans-latin-800-normal.ab3e500e.woff2) format("woff2"), url(fonts/open-sans-latin-800-normal.05ebdbe1.woff) format("woff")
}

.cancellation-image {
    height: 135px
}

@media (min-width: 480px) {
    .cancellation-image {
        height: 224px
    }
}

.banner-desktop[data-v-997f018e] {
    text-align: left
}

.notification-desktop[data-v-997f018e] {
    text-align: left
}

@media only screen and (max-width: 480px) {
    .page-contents[data-v-997f018e] {
        display: grid
    }
}

.xxl-gutter[data-v-33df423c] {
    margin-left: calc(2 * var(--xl))
}

.sign-in-logo[data-v-33df423c] {
    text-align: center
}

@media (min-width: 768px) {
    .sign-in-logo[data-v-33df423c] {
        text-align: left
    }
}

.sign-in-form[data-v-33df423c] {
    text-align: left
}

.navbar[data-v-31fb1f79] {
    color: var(--color-neutral-white)
}

.leftField[data-v-75944df0] {
    margin-right: var(--space-base)
}

.rightField[data-v-75944df0] {
    margin-left: var(--space-base)
}

.helper-text[data-v-75944df0] {
    color: var(--color-neutral-30)
}

.powered-by-stripe[data-v-75944df0] {
    color: var(--color-neutral-70);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1rem;
    position: absolute;
    right: 5px;
    bottom: -2px
}

.stripe-field[data-v-75944df0] {
    appearance: none;
    box-sizing: border-box;
    line-height: var(--text-line-height-default);
    width: 100%;
    padding: calc( var(--space-s) - var(--border-size-default)) calc( var(--space-s) - var(--border-size-default));
    padding-top: 0.8rem !important;
    height: var(--space-xxl);
    color: var(--color-neutral-darker);
    background: var(--color-white);
    border: var(--border-size-default) var(--border-style-default) var(--color-neutral-dark);
    border-radius: var(--border-radius-default);
    outline: none;
    transition: all var(--duration-s) var(--ease-out);
    margin-top: var(--space-xs)
}

.stripe-field-focused[data-v-75944df0] {
    border-width: var(--border-size-active);
    border-color: var(--border-color-active);
    padding: calc( var(--space-s) - var(--border-size-default)) calc( var(--space-s) - var(--border-size-default));
    padding-left: 0.63rem !important;
    padding-top: 0.74rem !important;
    background: var(--color-white);
    transition: all var(--duration-s) var(--ease-out)
}

.stripe-field-invalid[data-v-75944df0] {
    border-color: var(--border-color-danger)
}

li[data-v-c3eda4da] {
    margin-bottom: var(--space-s)
}

.mbg-badge[data-v-16d33589] {
    margin-right: var(--space-xs)
}