:root {
    --cs-color-action-primary: #36af84;
    --cs-color-action-primary-hover: #73c1a6;
    --cs-color-action-secondary: #222;
    --cs-color-action-secondary-hover: #555;
    --cs-color-action-tertiary: #ef7733;
    --cs-color-action-tertiary-hover: #ff8c47;
    --cs-color-action-link-primary: #4096ef;
    --cs-color-action-link-primary-hover: #3a87d7;
    --cs-color-action-link-secondary: #222;
    --cs-color-action-link-secondary-hover: #3a87d7;
    --cs-color-action-link-white: #fff;
    --cs-color-action-link-white-hover: #fff;
    --cs-color-action-hotspot: #fff;
    --cs-color-action-hotspot-hover: #ffffffa8;
    --cs-color-border-dark: #999;
    --cs-color-border-medium: #bebfc2;
    --cs-color-border-light: #eaeaea;
    --cs-color-background-primary: #fff;
    --cs-color-background-secondary: #f7fafd;
    --cs-color-background-inverted: #222;
    --cs-color-background-muted: #999;
    --cs-color-background-disabled: #eaeaea;
    --cs-color-background-tooltip: #000000d9;
    --cs-color-background-backdrop: #00000059;
    --cs-color-background-error: #fae9ed;
    --cs-color-background-info: #ecf5fe;
    --cs-color-background-success: #ebf7f3;
    --cs-color-background-warning: #fef2eb;
    --cs-color-text-headings: #222;
    --cs-color-text-body: #555;
    --cs-color-text-muted: #999;
    --cs-color-text-placeholder: #bebfc2;
    --cs-color-text-white: #fff;
    --cs-color-functional-default: #f7fafd;
    --cs-color-functional-error: #c81a47;
    --cs-color-functional-info: #4096ef;
    --cs-color-functional-success: #7aaf36;
    --cs-color-functional-warning: #ef7733;
    --cs-color-functional-info-overlay: #4096ef33;
    --cs-color-functional-error-hover: #d3486c;
    --cs-color-functional-info-hover: #66abf2;
    --cs-color-functional-success-hover: #94bf5e;
    --cs-color-functional-warning-hover: #f2925c;
    --cs-color-functional-highlight: #ecc030;
    --cs-color-functional-new: #36af84;
    --cs-color-functional-sale: #1c5f71;
    --cs-color-functional-bestseller: #ef7733;
    --cs-color-functional-our-choice: #0d2f66;
    --cs-form-control-background-color: var(--cs-color-background-primary);
    --cs-form-control-background-color-checked: var(--cs-color-functional-info);
    --cs-form-control-background-color-checked-hover: var(--cs-color-functional-info-hover);
    --cs-form-control-background-color-selected: var(--cs-color-background-secondary);
    --cs-form-control-background-color-disabled: var(--cs-color-background-disabled);
    --cs-form-control-border-color: var(--cs-color-border-light);
    --cs-form-control-border-color-disabled: var(--cs-color-background-disabled);
    --cs-form-control-border-color-error: var(--cs-color-functional-error);
    --cs-form-control-border-color-hover: var(--cs-color-functional-info-hover);
    --cs-form-control-border-color-success: var(--cs-color-functional-success);
    --cs-form-control-border-radius: var(--cs-border-radius-medium);
    --cs-form-control-border-width: var(--cs-border-width);
    --cs-form-control-color: var(--cs-color-text-body);
    --cs-form-control-color-hover: var(--cs-color-functional-info-hover);
    --cs-form-control-color-disabled: var(--cs-color-text-muted);
    --cs-form-control-font-family: var(--cs-font-family-body);
    --cs-form-control-font-size: 16px;
    --cs-form-control-height: 40px;
    --cs-form-control-padding-y: 0;
    --cs-form-control-padding-x: var(--cs-spacing-05);
    --cs-form-control-placeholder-color: var(--cs-color-text-placeholder);
    --cs-form-control-outline-focus: -webkit-focus-ring-color auto 1px;
    --cs-transition-duration: 0.3s;
    --cs-transition-timing-function: ease-in-out;
    --cs-border-radius-none: 0;
    --cs-border-radius-minimal: 2px;
    --cs-border-radius-subtle: 3px;
    --cs-border-radius-medium: 4px;
    --cs-border-radius-rounded: 10px;
    --cs-border-radius-full: 360px;
    --cs-border-width: 1px;
    --cs-shadow-default: 0 5px 10px 0 rgba(0, 0, 0, .15);
    --cs-shadow-down-small: 0 2px 3px 0 rgb(0 0 0/5%);
    --cs-shadow-up-small: 0 -2px 3px 0 rgb(0 0 0/5%);
    --cs-shadow-down-large: 0 20px 20px 0 rgba(0, 0, 0, .15);
    --cs-shadow-slide-in: -10px 0 20px 0 rgba(0, 0, 0, .15);
    --cs-shadow-text-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5);
    --cs-shadow-focus-default: 0 0 4px 0 var(--cs-color-action-secondary);
    --cs-shadow-focus-primary: 0 0 4px 0 var(--cs-color-action-primary);
    --cs-shadow-focus-secondary: 0 0 4px 0 var(--cs-color-action-secondary);
    --cs-spacing-00: 1px;
    --cs-spacing-01: 2px;
    --cs-spacing-02: 3px;
    --cs-spacing-03: 4px;
    --cs-spacing-04: 5px;
    --cs-spacing-05: 10px;
    --cs-spacing-06: 15px;
    --cs-spacing-07: 20px;
    --cs-spacing-08: 30px;
    --cs-spacing-09: 40px;
    --cs-spacing-10: 50px;
    --cs-spacing-11: 60px;
    --cs-spacing-12: 75px;
    --cs-spacing-13: 100px;
    --cs-font-family-body: "Roboto", arial, sans-serif;
    --cs-font-family-headings: "Poppins", arial, sans-serif;
    --cs-font-larger-title-color: var(--cs-color-text-headings);
    --cs-font-larger-title-font-family: var(--cs-font-family-headings);
    --cs-font-larger-title-font-size: 50px;
    --cs-font-larger-title-font-size-mobile: 36px;
    --cs-font-larger-title-font-weight: 400;
    --cs-font-larger-title-line-height: 1.2;
    --cs-font-larger-title-letter-spacing: normal;
    --cs-font-larger-title-text-transform: none;
    --cs-font-large-title-color: var(--cs-color-text-headings);
    --cs-font-large-title-font-family: var(--cs-font-family-headings);
    --cs-font-large-title-font-size: 40px;
    --cs-font-large-title-font-size-mobile: 30px;
    --cs-font-large-title-font-weight: 400;
    --cs-font-large-title-line-height: 1.2;
    --cs-font-large-title-letter-spacing: normal;
    --cs-font-large-title-text-transform: none;
    --cs-font-heading-1-color: var(--cs-color-text-headings);
    --cs-font-heading-1-font-family: var(--cs-font-family-headings);
    --cs-font-heading-1-font-size: 30px;
    --cs-font-heading-1-font-size-mobile: 26px;
    --cs-font-heading-1-font-weight: 400;
    --cs-font-heading-1-line-height: 1.2;
    --cs-font-heading-1-letter-spacing: normal;
    --cs-font-heading-1-text-transform: none;
    --cs-font-heading-2-color: var(--cs-color-text-headings);
    --cs-font-heading-2-font-family: var(--cs-font-family-headings);
    --cs-font-heading-2-font-size: 28px;
    --cs-font-heading-2-font-size-mobile: 24px;
    --cs-font-heading-2-font-weight: 400;
    --cs-font-heading-2-line-height: 1.2;
    --cs-font-heading-2-letter-spacing: normal;
    --cs-font-heading-2-text-transform: none;
    --cs-font-heading-3-color: var(--cs-color-text-headings);
    --cs-font-heading-3-font-family: var(--cs-font-family-headings);
    --cs-font-heading-3-font-size: 24px;
    --cs-font-heading-3-font-size-mobile: 20px;
    --cs-font-heading-3-font-weight: 400;
    --cs-font-heading-3-line-height: 1.2;
    --cs-font-heading-3-letter-spacing: normal;
    --cs-font-heading-3-text-transform: none;
    --cs-font-heading-4-color: var(--cs-color-text-headings);
    --cs-font-heading-4-font-family: var(--cs-font-family-headings);
    --cs-font-heading-4-font-size: 18px;
    --cs-font-heading-4-font-size-mobile: 18px;
    --cs-font-heading-4-font-weight: 400;
    --cs-font-heading-4-line-height: 1.2;
    --cs-font-heading-4-letter-spacing: normal;
    --cs-font-heading-4-text-transform: none;
    --cs-font-heading-5-color: var(--cs-color-text-headings);
    --cs-font-heading-5-font-family: var(--cs-font-family-body);
    --cs-font-heading-5-font-size: 16px;
    --cs-font-heading-5-font-size-mobile: 16px;
    --cs-font-heading-5-font-weight: 700;
    --cs-font-heading-5-line-height: 1.2;
    --cs-font-heading-5-letter-spacing: normal;
    --cs-font-heading-5-text-transform: none;
    --cs-font-heading-6-color: var(--cs-color-text-headings);
    --cs-font-heading-6-font-family: var(--cs-font-family-body);
    --cs-font-heading-6-font-size: 14px;
    --cs-font-heading-6-font-size-mobile: 14px;
    --cs-font-heading-6-font-weight: 700;
    --cs-font-heading-6-line-height: 1.2;
    --cs-font-heading-6-letter-spacing: normal;
    --cs-font-heading-6-text-transform: none;
    --cs-font-product-title-l-color: var(--cs-color-text-headings);
    --cs-font-product-title-l-font-family: var(--cs-font-family-body);
    --cs-font-product-title-l-font-size: 18px;
    --cs-font-product-title-l-font-size-mobile: 18px;
    --cs-font-product-title-l-font-weight: 700;
    --cs-font-product-title-l-line-height: 1.2;
    --cs-font-product-title-l-letter-spacing: normal;
    --cs-font-product-title-l-text-transform: none;
    --cs-font-product-title-m-color: var(--cs-color-text-headings);
    --cs-font-product-title-m-font-family: var(--cs-font-family-body);
    --cs-font-product-title-m-font-size: 16px;
    --cs-font-product-title-m-font-size-mobile: 16px;
    --cs-font-product-title-m-font-weight: 700;
    --cs-font-product-title-m-line-height: 1.2;
    --cs-font-product-title-m-letter-spacing: normal;
    --cs-font-product-title-m-text-transform: none;
    --cs-font-product-title-s-color: var(--cs-color-text-headings);
    --cs-font-product-title-s-font-family: var(--cs-font-family-body);
    --cs-font-product-title-s-font-size: 14px;
    --cs-font-product-title-s-font-size-mobile: 14px;
    --cs-font-product-title-s-font-weight: 700;
    --cs-font-product-title-s-line-height: 1.2;
    --cs-font-product-title-s-letter-spacing: normal;
    --cs-font-product-title-s-text-transform: none;
    --cs-font-intro-color: var(--cs-color-text-headings);
    --cs-font-intro-font-family: var(--cs-font-family-headings);
    --cs-font-intro-font-size: 20px;
    --cs-font-intro-font-size-mobile: 20px;
    --cs-font-intro-font-weight: 200;
    --cs-font-intro-line-height: 1.5;
    --cs-font-intro-letter-spacing: normal;
    --cs-font-intro-text-transform: none;
    --cs-font-quote-color: var(--cs-color-text-headings);
    --cs-font-quote-font-family: var(--cs-font-family-headings);
    --cs-font-quote-font-size: 30px;
    --cs-font-quote-font-size-mobile: 26px;
    --cs-font-quote-font-weight: 400;
    --cs-font-quote-line-height: 1.2;
    --cs-font-quote-letter-spacing: normal;
    --cs-font-quote-text-transform: none;
    --cs-font-body-color: var(--cs-color-text-body);
    --cs-font-body-font-family: var(--cs-font-family-body);
    --cs-font-body-font-size: 16px;
    --cs-font-body-font-size-mobile: 16px;
    --cs-font-body-font-weight: 400;
    --cs-font-body-line-height: 1.5;
    --cs-font-body-letter-spacing: normal;
    --cs-font-body-text-transform: none;
    --cs-font-body-s-color: var(--cs-color-text-body);
    --cs-font-body-s-font-family: var(--cs-font-family-body);
    --cs-font-body-s-font-size: 14px;
    --cs-font-body-s-font-size-mobile: 14px;
    --cs-font-body-s-font-weight: 400;
    --cs-font-body-s-line-height: 1.5;
    --cs-font-body-s-letter-spacing: normal;
    --cs-font-body-s-text-transform: none;
    --cs-font-caption-l-color: var(--cs-color-text-muted);
    --cs-font-caption-l-font-family: var(--cs-font-family-body);
    --cs-font-caption-l-font-size: 14px;
    --cs-font-caption-l-font-weight: 400;
    --cs-font-caption-l-line-height: 1.2;
    --cs-font-caption-l-letter-spacing: normal;
    --cs-font-caption-l-text-transform: none;
    --cs-font-caption-m-color: var(--cs-color-text-muted);
    --cs-font-caption-m-font-family: var(--cs-font-family-body);
    --cs-font-caption-m-font-size: 12px;
    --cs-font-caption-m-font-weight: 400;
    --cs-font-caption-m-line-height: 1.2;
    --cs-font-caption-m-letter-spacing: normal;
    --cs-font-caption-m-text-transform: none;
    --cs-font-caption-s-color: var(--cs-color-text-muted);
    --cs-font-caption-s-font-family: var(--cs-font-family-body);
    --cs-font-caption-s-font-size: 10px;
    --cs-font-caption-s-font-weight: 500;
    --cs-font-caption-s-line-height: 1.2;
    --cs-font-caption-s-letter-spacing: 0.3px;
    --cs-font-caption-s-text-transform: uppercase;
    --cs-font-price-l-color: var(--cs-color-text-body);
    --cs-font-price-l-font-family: var(--cs-font-family-body);
    --cs-font-price-l-font-size: 28px;
    --cs-font-price-l-font-size-mobile: 22px;
    --cs-font-price-l-font-weight: 700;
    --cs-font-price-l-line-height: 1.2;
    --cs-font-price-l-letter-spacing: normal;
    --cs-font-price-l-text-transform: none;
    --cs-font-price-m-color: var(--cs-color-text-body);
    --cs-font-price-m-font-family: var(--cs-font-family-body);
    --cs-font-price-m-font-size: 20px;
    --cs-font-price-m-font-size-mobile: 18px;
    --cs-font-price-m-font-weight: 700;
    --cs-font-price-m-line-height: 1.2;
    --cs-font-price-m-letter-spacing: normal;
    --cs-font-price-m-text-transform: none;
    --cs-font-price-s-color: var(--cs-color-text-body);
    --cs-font-price-s-font-family: var(--cs-font-family-body);
    --cs-font-price-s-font-size: 16px;
    --cs-font-price-s-font-size-mobile: 14px;
    --cs-font-price-s-font-weight: 700;
    --cs-font-price-s-line-height: 1.2;
    --cs-font-price-s-letter-spacing: normal;
    --cs-font-price-s-text-transform: none;
    --cs-font-price-discount-color: var(--cs-color-text-body);
    --cs-font-price-discount-font-family: var(--cs-font-family-body);
    --cs-font-price-discount-font-size: 12px;
    --cs-font-price-discount-font-size-mobile: 12px;
    --cs-font-price-discount-font-weight: 400;
    --cs-font-price-discount-line-height: 1.2;
    --cs-font-price-discount-letter-spacing: normal;
    --cs-font-price-discount-text-transform: none;
    --cs-font-price-discount-text-decoration: line-through
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    line-height: 1.15
}

h1 {
    font-size: 2em
}

dl dl, dl ol, dl ul, h1, hr, ol dl, ol ol, ol ul, ul dl, ul ol, ul ul {
    margin: 0
}

hr {
    box-sizing: content-box;
    color: inherit;
    height: 0;
    overflow: visible
}

main {
    display: block
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

audio, video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

table {
    border-color: inherit;
    text-indent: 0
}

button, input, select {
    margin: 0
}

button {
    overflow: visible;
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

fieldset {
    border: none;
    padding: 0
}

input {
    overflow: visible
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

select {
    text-transform: none
}

textarea {
    margin: 0;
    overflow: auto
}

[type="radio;"], [type=checkbox] {
    box-sizing: border-box;
    padding: 0
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:-moz-focusring {
    outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
    box-shadow: none
}

details, dialog {
    display: block
}

dialog {
    background-color: #fff;
    border: solid;
    color: #000;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content
}

dialog:not([open]) {
    display: none
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

[hidden], template {
    display: none
}

address {
    font-style: normal
}

*, :after, :before {
    box-sizing: border-box
}

body, html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--cs-color-background-primary);
    margin: 0;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

body main {
    flex: 1
}

body._no-scroll {
    overflow: hidden
}

body._no-scroll::-webkit-scrollbar {
    display: none
}

a, h1, h2, h3, h4, h5, h6, p {
    margin: 0
}

.clickable, [type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer
}

fieldset {
    border-image-width: 0;
    margin: 0
}

body {
    color: var(--cs-color-text-body);
    font-family: Roboto, arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5
}

.h1, .h2, .h3, .h4, body, h1, h2, h3, h4 {
    letter-spacing: normal;
    text-transform: none
}

.h1, .h2, .h3, .h4, h1, h2, h3, h4 {
    color: var(--cs-color-text-headings);
    font-family: Poppins, Roboto, arial, sans-serif;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0
}

.h1 .icon.fa, .h2 .icon.fa, .h3 .icon.fa, .h4 .icon.fa, h1 .icon.fa, h2 .icon.fa, h3 .icon.fa, h4 .icon.fa {
    font-size: 1.375rem
}

.larger-title {
    font-family: Poppins, Roboto, arial, sans-serif;
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none
}

@media (min-width: 768px) {
    .larger-title {
        font-size: 3.125rem
    }
}

.large-title {
    font-family: Poppins, Roboto, arial, sans-serif;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none
}

@media (min-width: 768px) {
    .large-title {
        font-size: 2.5rem
    }
}

.h1, h1 {
    font-size: 1.625rem
}

@media (min-width: 768px) {
    .h1, h1 {
        font-size: 1.875rem
    }
}

.h2, h2 {
    font-size: 1.375rem
}

@media (min-width: 768px) {
    .h2, h2 {
        font-size: 1.75rem
    }
}

.h3, h3 {
    font-size: 1.25rem
}

@media (min-width: 768px) {
    .h3, h3 {
        font-size: 1.375rem
    }
}

.h4, .intro, h4 {
    font-size: 1.125rem
}

.intro {
    font-family: Poppins, Roboto, arial, sans-serif;
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none
}

@media (min-width: 768px) {
    .intro {
        font-size: 1.25rem
    }
}

.small, small {
    font-size: .875rem
}

.caption {
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase
}

.caption, .caption-1 {
    color: var(--cs-color-text-muted);
    font-family: Roboto, arial, sans-serif;
    line-height: 1.2
}

.caption-1 {
    font-size: .875rem
}

.caption-2 {
    color: var(--cs-color-text-muted);
    font-size: .75rem;
    line-height: 1.2
}

.caption-2, .price {
    font-family: Roboto, arial, sans-serif
}

.price {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: none
}

@media (min-width: 768px) {
    .price {
        font-size: 1.25rem
    }
}

.price--small {
    font-size: 1rem
}

.discount-price {
    font-family: Roboto, arial, sans-serif;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: line-through
}

.discount-price + .price-sales {
    color: var(--cs-color-functional-error)
}

a {
    color: var(--cs-color-action-link-primary);
    font-weight: 400;
    text-decoration: underline;
    transition: color var(--cs-transition-duration) var(--cs-transition-timing-function)
}

a.hover, a:hover {
    color: var(--cs-color-action-link-primary-hover)
}

a.is-body {
    color: var(--cs-color-text-body);
    font-weight: inherit;
    text-decoration: none
}

a.is-body:hover {
    color: var(--cs-color-action-link-primary-hover)
}

.header {
    background-color: var(--cs-color-background-primary);
    box-shadow: var(--cs-shadow-down-small);
    left: 0;
    padding-block: var(--cs-spacing-07);
    position: sticky;
    top: 0;
    width: 100%
}

.header__inner {
    display: grid;
    gap: var(--cs-spacing-06);
    grid-template-areas:"title logo" "search search";
    grid-template-columns:1fr auto;
    grid-template-rows:repeat(2, auto);
    margin: 0 auto;
    max-width: 86.25rem;
    padding-inline: .9375rem;
    width: 100%
}

@media (min-width: 992px) {
    .header__inner {
        grid-template-areas:"title search logo";
        grid-template-columns:1fr 41.25rem 1fr;
        grid-template-rows:auto
    }
}

.header__title {
    grid-area: title
}

.header__search {
    column-gap: 10px;
    margin: 0 auto;
    grid-area: search;
    display: flex;
}

.header__logo {
    display: flex;
    grid-area: logo;
    justify-content: flex-end;
    padding-left: 20px;
}

.customer {
    border-bottom: solid var(--cs-border-width) var(--cs-color-border-light);
    display: flex;
    justify-content: space-between;
    padding-block: var(--cs-spacing-05)
}

.customer__list {
    margin: var(--cs-spacing-07) auto;
    max-width: 43.125rem;
    padding: 0 var(--cs-spacing-06)
}

@media (min-width: 992px) {
    .customer__list {
        margin-block: 2.8125rem
    }
}

.customer__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.customer__actions {
    display: flex;
    gap: var(--cs-spacing-04)
}

.btn {
  align-items: center;
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,.24);
  display: flex;
  column-gap: 10px;
  font-size: large;
  padding: 13px 20px;
  text-decoration: none;
  transition: background-color var(--cs-transition-duration) var(--cs-transition-timing-function);
}

.btn-primary {
  background: var(--cs-color-action-primary);
  border-color: var(--cs-color-action-primary);
  color: var(--cs-color-text-white);
}

.btn-secondary {
  background: var(--cs-color-action-secondary);
  border-color: var(--cs-color-action-secondary);
  color: var(--cs-color-text-white);
}

.btn-tertiary {
  background: var(--cs-color-action-tertiary);
  border-color: var(--cs-color-action-tertiary);
  color: var(--cs-color-text-white);
}

.btn-primary:hover {
  background: var(--cs-color-action-primary-hover);
}

.btn-secondary:hover {
  background: var(--cs-color-action-secondary-hover);
}

.btn-tertiary:hover {
  background: var(--cs-color-action-tertiary-hover);
}

th, td {
    padding: 3px 12px;
    text-align: left;
}