@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

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

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

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

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

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

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

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

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

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

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

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

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

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

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

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

@font-face {
    font-family: Poppins;
    src: url(../font/Poppins-Regular.woff2) format("woff2"), url(../font/Poppins-Regular.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Poppins;
    font-weight: 700;
    src: url(../font/Poppins-Bold.woff2) format("woff2"), url(../font/Poppins-Bold.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Poppins;
    font-weight: 500;
    src: url(../font/Poppins-Medium.woff2) format("woff2"), url(../font/Poppins-Medium.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Poppins;
    font-weight: 600;
    src: url(../font/Poppins-SemiBold.woff2) format("woff2"), url(../font/Poppins-SemiBold.woff) format("woff");
    font-display: swap
}

:root {
    --data-table-header-breakpoint: 73em
}

::-moz-selection {
    background-color: #b3d4fc;
    text-shadow: none
}

::selection {
    background-color: #b3d4fc;
    text-shadow: none
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

html {
    box-sizing: border-box;
    height: 100%
}

*,
:after,
:before {
    box-sizing: inherit;
    margin: 0
}

body {
    z-index: 1;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-size: 100%;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: #f3f4f6;
    color: #515a6d
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em
}

h1 {
    margin-top: 0;
    margin-bottom: 0
}

a:hover {
    cursor: pointer
}

img {
    max-width: 100%;
    height: auto
}

[hidden] {
    display: none !important
}

textarea {
    height: auto;
    resize: vertical
}

@media print {

    *,
    :after,
    :before {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }

    pre {
        white-space: pre-wrap !important
    }

    blockquote,
    pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    img,
    tr {
        page-break-inside: avoid
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}

.visually-hidden:active,
.visually-hidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit
}

.a11y-skip-to {
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 7;
    clip: rect(0 0 0 0);
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    font-size: 1.5em;
    text-decoration: none;
    background-color: #fff;
    color: #23272f
}

@media print {
    .a11y-skip-to {
        display: none !important
    }
}

.a11y-skip-to:active,
.a11y-skip-to:focus {
    left: 0;
    clip: auto;
    overflow: visible;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 1em 2em;
    white-space: inherit
}

a[download] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #ab5e0f
}

a[download]::before {
    content: "";
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
    background-image: url(../img/icons/colored/download-link-primary-70.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.progress-indicator-parent {
    display: inline-flex;
    align-items: center
}

.progress-indicator {
    --progress-indicator-side: 1rem;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--progress-indicator-side);
    height: var(--progress-indicator-side);
    margin-right: calc(var(--progress-indicator-side)/ 2);
    border-radius: calc(var(--progress-indicator-side)/ 2);
    background-color: #f3f4f6
}

.progress-indicator:not(.is-completed, .is-due, .is-overdue, .is-accepted, .is-rejected, .is-waiting)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    margin: auto;
    background-color: #fff
}

.progress-indicator:is(.is-completed, .is-accepted) {
    background-color: #2ebe53
}

.progress-indicator:is(.is-completed, .is-accepted) svg {
    margin-top: 1px
}

.progress-indicator:is(.is-due, .is-waiting) {
    background-color: #f8cb02
}

.progress-indicator:is(.is-due, .is-waiting) path {
    stroke: #23272f;
    stroke-width: 1.5
}

.progress-indicator:is(.is-overdue, .is-rejected) {
    background-color: #ff3632
}

.progress-indicator:is(.is-overdue, .is-rejected) svg {
    margin-top: -1px
}

.progress-indicator svg {
    width: calc(var(--progress-indicator-side) * .65);
    height: calc(var(--progress-indicator-side) * .65)
}

.progress-indicator path {
    stroke: #fff;
    stroke-width: 3px
}

.company-logo {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .4em;
    text-decoration: none;
    text-transform: uppercase;
    color: #c96f11
}

.company-logo img {
    height: 2rem
}

@media (min-width:58em) {
    .company-logo img {
        height: 1.5rem
    }
}

.form-control {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem
}

@media (min-width:58em) {
    .form-control {
        gap: 0 1.5rem
    }
}

.form-control+.form-control {
    margin-top: 1.5rem
}

@media (min-width:58em) {
    .form-control+.form-control {
        margin-top: 2rem
    }
}

.form-control.has-label-link {
    grid-template-columns: 1fr auto
}

.form-control.has-label-link .form-error,
.form-control.has-label-link .form-input {
    grid-column: 1/3
}

.form-control.is-note {
    padding: 0;
    border: none
}

.form-control.is-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
    border: 0
}

@media (min-width:58em) {
    .form-control.is-checkbox-list {
        gap: 2rem
    }
}

.form-control.is-checkbox-list legend {
    margin-bottom: 1.25rem
}

@media (min-width:58em) {
    .form-control.is-checkbox-list legend {
        margin-bottom: 1.5rem
    }
}

.form-control.is-checkbox-list>div {
    display: flex;
    align-items: center;
    gap: .75rem
}

@media (min-width:58em) {
    .form-control.is-checkbox-list>div {
        gap: 1rem
    }
}

.form-control.is-checkbox-list input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: #23272f
}

@media (min-width:58em) {
    .form-control.is-checkbox-list input {
        width: 1.5rem;
        height: 1.5rem
    }
}

.form-control.is-checkbox-list input[disabled]+label {
    color: #68748d
}

.form-control.is-checkbox-list label {
    margin-bottom: 0;
    font-size: .875rem;
    font-weight: 400
}

@media (min-width:58em) {
    .form-control.is-checkbox-list label {
        font-size: 1rem
    }
}

.form-control label,
.form-control-label {
    display: inline-block;
    width: 100%;
    margin-bottom: .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: #23272f
}

@media (min-width:58em) {

    .form-control label,
    .form-control-label {
        margin-bottom: 1rem;
        font-size: 1rem
    }
}

.form-control-label-link {
    display: inline-block;
    font-weight: 500;
    color: #ab5e0f;
    grid-column: 2;
    margin-bottom: .75rem;
    font-size: .875rem
}

@media (min-width:58em) {
    .form-control-label-link {
        margin-top: 1rem;
        font-size: 1rem
    }
}

.form-error {
    grid-row: 3;
    margin-top: .25rem;
    font-size: .875rem;
    color: #eb0400
}

@media (min-width:58em) {
    .form-error {
        font-size: 1rem
    }
}

.form-input {
    width: 100%;
    padding: .5rem 1rem;
    border: 2px solid #c4c9d4;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    background-color: transparent;
    color: #23272f
}

@media (min-width:58em) {
    .form-input {
        font-size: 1rem
    }
}

.form-input:focus {
    outline: 0;
    border-color: #c96f11
}

.form-input[disabled] {
    background-color: #f9f9fa;
    color: #68748d
}

@media (min-width:58em) {
    .form-input.is-large {
        padding: .75rem 1.5rem
    }
}

.form-input.has-error {
    padding-right: 3rem;
    background-image: url(../img/icons/colored/alert-triangle-error-to-white.svg);
    background-repeat: no-repeat;
    background-position: center right 1rem;
    background-size: 1rem;
    border-color: #ff3632
}

@media (min-width:58em) {
    .form-input.has-error {
        padding-right: 3.5rem;
        background-position: center right 1.25rem
    }
}

.form-input::-moz-placeholder {
    color: #68748d
}

.form-input::placeholder {
    color: #68748d
}

.form-control textarea {
    field-sizing: content;
    min-height: 6.25rem
}

select.form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-image: url(../img/icons/chevron-down.svg);
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position: center right 1rem
}

.form-input[type=file] {
    padding: 12px;
    border: 1px solid #c4c9d4;
    background-color: #f9f9fa
}

.form-input[type=file]::-webkit-file-upload-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    color: #23272f;
    padding: .75rem 2rem;
    font-size: 1rem
}

.form-input[type=file]::file-selector-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    color: #23272f;
    padding: .75rem 2rem;
    font-size: 1rem
}

@media (min-width:58em) {
    .form-input[type=file]::-webkit-file-upload-button {
        font-size: 1rem
    }

    .form-input[type=file]::file-selector-button {
        font-size: 1rem
    }
}

.form-input[type=file]::-webkit-file-upload-button:active,
.form-input[type=file]::-webkit-file-upload-button:focus,
.form-input[type=file]::-webkit-file-upload-button:hover {
    background-color: #f3f4f6
}

.form-input[type=file]::file-selector-button:active,
.form-input[type=file]::file-selector-button:focus,
.form-input[type=file]::file-selector-button:hover {
    background-color: #f3f4f6
}

@media (min-width:58em) {
    .form-input[type=file]::-webkit-file-upload-button {
        padding: 12px 24px
    }

    .form-input[type=file]::file-selector-button {
        padding: 12px 24px
    }
}

.form-control.is-note p {
    padding: 1rem;
    font-size: .875rem;
    border-radius: .25rem;
    background-color: #f9f9fa;
    color: #515a6d
}

@media (min-width:58em) {
    .form-control.is-note p {
        font-size: 1rem
    }
}

.form-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #23272f;
    color: #fff;
    margin-top: 1.5rem;
    padding: .75rem 2rem
}

@media (min-width:58em) {
    .form-submit {
        font-size: 1rem
    }
}

.form-submit:active,
.form-submit:focus,
.form-submit:hover {
    border-color: #3d4352;
    background-color: #3d4352
}

@media (min-width:58em) {
    .form-submit {
        margin-top: 2.5rem;
        padding: 1rem 2.75rem
    }
}

.calendar-delivery {
    font-size: .875rem
}

@media (max-width:25rem) {
    .calendar-delivery {
        font-size: .75rem
    }

    .calendar-delivery [data-abbr] {
        font-size: 0
    }

    .calendar-delivery [data-abbr]::after {
        content: attr(data-abbr) ".";
        font-size: .75rem
    }
}

@media (min-width:58em) {
    .calendar-delivery {
        font-size: 1rem
    }
}

.calendar .calendar-delivery {
    font-size: .625rem
}

@media (min-width:83em) {
    .calendar .calendar-delivery {
        font-size: .875rem
    }
}

@media (max-width:37.9375em) {
    .calendar .calendar-delivery [data-abbr] {
        font-size: 0
    }

    .calendar .calendar-delivery [data-abbr]::after {
        content: attr(data-abbr) ".";
        font-size: .625rem
    }
}

@media (max-width:37.9375em) and (min-width:83em) {
    .calendar .calendar-delivery [data-abbr]::after {
        font-size: 1rem
    }
}

.calendar-delivery dd:not(:first-of-type),
.calendar-delivery dt:not(:first-of-type) {
    margin-top: .125rem
}

.calendar-delivery dt {
    clear: left;
    float: left;
    display: inline-flex;
    align-items: center;
    color: #68748d
}

.calendar-delivery dt::after {
    content: ":";
    margin-right: .25em
}

.calendar-delivery dt>svg {
    width: .75rem;
    height: .75rem;
    margin-right: .25rem
}

@media (min-width:83em) {
    .calendar-delivery dt>svg {
        width: 1rem;
        height: 1rem;
        margin-right: .5rem
    }
}

.calendar-delivery path {
    stroke: #c4c9d4
}

@media (max-width:82.9375em) {
    .calendar-delivery .progress-indicator {
        --progress-indicator-side: .75rem
    }
}

.calendar-delivery dd {
    float: left;
    font-weight: 700;
    color: #23272f
}

.calendar-delivery::after {
    content: " ";
    display: table;
    clear: both
}

.date {
    display: inline-flex;
    align-items: center
}

.date-readable {
    font-size: .875em;
    font-weight: 500;
    color: #68748d
}

@media (min-width:58em) {
    .date-readable {
        font-size: 1em
    }
}

.date-alert {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: .5rem
}

.date-alert button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    background: 0 0
}

.date-alert-tip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5rem;
    min-width: 13em;
    padding: 1rem;
    border-radius: .25rem;
    font-size: .875rem;
    font-weight: 500;
    background-color: #3d4352;
    color: #f9f9fa
}

@media (min-width:58em) {
    .date-alert-tip {
        font-size: 1rem
    }
}

.date-alert:not(.has-toggletip-initialized) .date-alert-tip {
    padding: .25rem .5rem
}

.date-alert.has-toggletip-initialized .date-alert-tip {
    position: absolute;
    top: -6rem;
    right: -1.875rem
}

.date-alert.has-toggletip-initialized .date-alert-tip::after {
    content: "";
    position: absolute;
    display: block;
    border: .5rem solid transparent;
    right: 2rem;
    bottom: -1rem;
    border-top-color: #3d4352
}

.address {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .25rem
}

.address>dd {
    color: #23272f
}

.address div:first-child dt {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}

.address dt {
    white-space: nowrap
}

.address dt::after {
    content: ":"
}

.address dd *,
.address dd dd {
    display: inline
}

.address span:not(:last-child)::after {
    content: ", "
}

.address br {
    display: none
}

.address div:nth-child(1)::after {
    content: "";
    display: block
}

.address div:nth-child(2) dd::after {
    content: ", "
}

.data-table-radio {
    grid-column: 1/3;
    margin-top: 1rem
}

@media (min-width:28em) {
    .data-table-radio {
        grid-column: 1
    }
}

@media (min-width:73em) {
    .data-table-radio {
        grid-column: 2/4;
        grid-row: 1;
        margin-top: 0
    }

    .data-table-radio:not(.is-radio) label {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .data-table-radio select {
        max-width: 10em
    }
}

.data-table-radio:not(.is-radio) label {
    margin-bottom: 0;
    color: #68748d
}

@media (min-width:28em) {

    .data-table-radio.is-links,
    .data-table-radio.is-radio {
        margin-top: 2.5rem
    }
}

@media (min-width:28em) and (min-width:58em) {

    .data-table-radio.is-links,
    .data-table-radio.is-radio {
        margin-top: 3rem
    }
}

@media (min-width:73em) {

    .data-table-radio.is-links,
    .data-table-radio.is-radio {
        margin-top: 0
    }
}

.data-table-radio.is-links,
.data-table-radio.is-radio fieldset {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
    padding: 0;
    border: none;
    list-style: none;
    font-weight: 500
}

.data-table-radio.is-radio input {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}

.data-table-radio.is-links a:focus,
.data-table-radio.is-radio input:focus-visible+label {
    outline: 2px solid #c96f11
}

.data-table-radio.is-links a[aria-current=page],
.data-table-radio.is-radio input:checked+label {
    font-weight: 600;
    color: #23272f
}

.data-table-radio.is-links a,
.data-table-radio.is-radio label {
    display: inline-flex;
    gap: .5rem;
    width: auto;
    margin-bottom: 0;
    padding: .25rem .5rem;
    text-decoration: none;
    color: #68748d;
    cursor: pointer
}

.data-table-radio-count {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    border-radius: .25rem;
    line-height: 1;
    font-size: .75rem;
    background-color: #e8e9ee
}

a[aria-current=page] .data-table-radio-count,
input:checked+label .data-table-radio-count {
    background-color: #f1a556
}

.data-table-filter {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch
}

.data-table-filter label {
    display: inline-flex;
    align-items: center;
    padding-left: .5rem;
    border: 2px solid #c4c9d4;
    border-right: none;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.data-table-filter label svg {
    width: 1.5rem;
    height: 1.5rem
}

.data-table-filter .form-input {
    padding-left: .75rem;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.data-table-filter .form-input:focus+label {
    border-color: #c96f11
}

.data-table-sort label {
    margin-bottom: 0;
    color: #68748d
}

.data-table-sort select {
    width: auto !important
}

.data-table-placeholder {
    margin-top: 1.5rem;
    font-size: .875rem
}

@media (min-width:58em) {
    .data-table-placeholder {
        font-size: 1rem
    }
}

.data-table {
    position: relative;
    min-height: 10rem;
    margin-top: 1.5rem;
    font-size: .875rem
}

@media (min-width:58em) {
    .data-table {
        font-size: 1rem
    }
}

.data-table.is-loading tbody::after {
    content: var(--i18n-data-table-loading, "Načítám...");
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2.5rem 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, .65);
    color: #23272f
}

.data-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem
}

.data-table td,
.data-table th {
    text-align: left;
    padding: .75rem 1rem
}

.data-table td:first-child,
.data-table th:first-child {
    padding-left: 1.5rem;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.data-table td:last-child,
.data-table th:last-child {
    padding-right: 1.5rem;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.data-table thead th {
    line-height: 2;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background-color: #e8e9ee;
    color: #68748d
}

.data-table thead th:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.data-table thead th:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.data-table thead th[aria-sort] {
    position: relative;
    color: #23272f
}

.data-table thead th[aria-sort]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: .5rem;
    background-image: url(../img/icons/resized/arrow-down-2-6.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.data-table thead th[aria-sort=ascending]::after {
    transform: rotate(180deg)
}

.data-table thead button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: 0 0;
    color: inherit
}

.data-table thead button:focus,
.data-table thead button:hover {
    text-decoration: underline
}

.data-table tbody {
    position: relative;
    top: -.5rem
}

.data-table tbody tr:last-child>:first-child {
    border-bottom-left-radius: .25rem
}

.data-table tbody tr:last-child>:last-child {
    border-bottom-right-radius: .25rem
}

.data-table tbody tr:is(:hover, :focus-within) td,
.data-table tbody tr:is(:hover, :focus-within) th {
    background-color: #e8e9ee
}

.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
    background-color: #f9f9fa
}

.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
    background-color: #e8e9ee
}

.data-table tbody td,
.data-table tbody th {
    font-weight: 500;
    background-color: #fff;
    color: #23272f
}

.data-table tbody td:first-child,
.data-table tbody th:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.data-table tbody td:last-child,
.data-table tbody th:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.data-table tbody th a {
    color: inherit
}

.data-table.has-white-bg thead th {
    background-color: #f9f9fa
}

.data-table.has-white-bg tbody tr>* {
    border-top: 1px solid #e8e9ee;
    border-bottom: 1px solid #e8e9ee
}

.data-table.has-white-bg tbody tr>:first-child {
    border-left: 1px solid #e8e9ee
}

.data-table.has-white-bg tbody tr>:last-child {
    border-right: 1px solid #e8e9ee
}

.data-table-unit {
    text-transform: none
}

.changelog {
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem
}

.changelog ul {
    max-width: 36em;
    padding-left: 1.4em;
    list-style-position: outside
}

.changelog li+li {
    margin-top: 1rem
}

.changelog:not([role=dialog]) {
    border-bottom: 2px solid rgba(0, 0, 0, .4)
}

.alerts {
    position: fixed;
    z-index: 6;
    top: 1.5rem;
    right: 1.25rem;
    left: auto;
    margin-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 31.5rem
}

@media (min-width:60em) {
    .alerts {
        right: 1.5rem
    }
}

.l-app .alerts {
    top: 5rem
}

@media (min-width:60em) {
    .l-app .alerts {
        top: 1.5rem
    }
}

.alerts p {
    display: inline-grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: .5rem;
    width: auto;
    padding: .75rem 1.5rem;
    border-radius: .25rem;
    font-size: .875rem;
    font-weight: 500;
    background-color: #fff
}

@media (min-width:58em) {
    .alerts p {
        font-size: 1rem
    }
}

.alerts p.is-success {
    background-color: #e0fdd9;
    color: #148044
}

.alerts p.is-success::before {
    background-image: url(../img/icons/colored/check-success-80-stroke-3.svg)
}

.alerts p.is-success button {
    background-image: url(../img/icons/colored/x-success-80-stroke-3.svg)
}

.alerts p.is-warning {
    background-color: #fef7cc;
    color: #907300
}

.alerts p.is-warning::before {
    background-image: url(../img/icons/colored/alert-triangle-warning-80-stroke-3.svg)
}

.alerts p.is-warning button {
    background-image: url(../img/icons/colored/x-warning-80-stroke-3.svg)
}

.alerts p.is-error {
    background-color: #ffe3d5;
    color: #b71930
}

.alerts p.is-error::before {
    background-image: url(../img/icons/colored/stop-error-70.svg)
}

.alerts p.is-error button {
    background-image: url(../img/icons/colored/x-error-70-stroke-3.svg)
}

.alerts p::before {
    content: "";
    flex-shrink: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    margin-top: .125rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

@media (min-width:58em) {
    .alerts p::before {
        margin-top: .25rem
    }
}

.alerts button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: -.5rem -1.5rem -.75rem auto;
    width: 4.5rem;
    height: 2.5rem;
    border: none;
    border-radius: .25rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    background-color: transparent
}

@media (min-width:60em) {
    .alerts button {
        margin-left: .5rem
    }
}

body.has-dialog-opened {
    overflow: hidden
}

.dialog-modal {
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background-color: rgba(0, 0, 0, .4)
}

@media (min-width:38.5em) {
    .dialog-modal:not(.is-fullscreen) {
        padding: 1.25rem
    }
}

.dialog {
    width: 100%;
    background-color: #fff
}

.dialog-modal:not(.is-fullscreen) .dialog {
    margin-top: auto
}

@media (min-width:38.5em) {
    .dialog-modal:not(.is-fullscreen) .dialog {
        position: relative;
        max-width: 36rem;
        margin-bottom: auto;
        border-radius: .5rem
    }
}

.dialog-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 1rem 1.25rem;
    align-items: center
}

@media (min-width:58em) {
    .dialog-header {
        padding: 2rem 2.5rem
    }
}

@media (min-width:38.5em) {
    .dialog-header {
        grid-template-columns: 1fr auto
    }
}

.dialog-header.is-simple {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem
}

.dialog-title {
    grid-column: 2;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    color: #23272f
}

@media (min-width:58em) {
    .dialog-title {
        font-size: 1.5rem
    }
}

@media (min-width:38.5em) {
    .dialog-title {
        grid-column: 1;
        text-align: left
    }
}

.dialog-header.is-simple .dialog-title {
    text-align: left
}

.dialog-close {
    grid-column: 3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background-image: url(../img/icons/x.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent
}

@media (min-width:38.5em) {
    .dialog-close {
        grid-column: 2
    }
}

.dialog-content {
    padding: 2rem 1.25rem;
    border-top: 1px solid #e8e9ee
}

@media (min-width:58em) {
    .dialog-content {
        padding: 2.5rem 2.5rem
    }
}

.dialog-footer {
    padding: .5rem 1.25rem 2.5rem
}

@media (min-width:58em) {
    .dialog-footer {
        padding: 2rem 2.5rem;
        border-top: 1px solid #e8e9ee
    }
}

.dialog-primary-close {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #23272f;
    color: #fff;
    width: 100%;
    margin-top: 2.5rem;
    padding: .75rem 2rem
}

@media (min-width:58em) {
    .dialog-primary-close {
        font-size: 1rem
    }
}

.dialog-primary-close:active,
.dialog-primary-close:focus,
.dialog-primary-close:hover {
    border-color: #3d4352;
    background-color: #3d4352
}

@media (min-width:58em) {
    .dialog-primary-close {
        padding: 1rem 2.75rem
    }
}

.error {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2.5rem
}

@media (min-width:58em) {
    .error {
        justify-content: center;
        height: 100%;
        margin-top: auto;
        margin-bottom: auto;
        padding-top: 0
    }
}

.error.is-loading {
    margin-right: auto;
    margin-left: auto;
    font-weight: 500
}

.error lottie-player {
    aspect-ratio: 1;
    max-width: 100%;
    width: 300px;
    height: auto
}

.error-icon {
    --error-icon-side: 7.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--error-icon-side);
    height: var(--error-icon-side);
    border-radius: calc(var(--error-icon-side)/ 2);
    background-color: #e8e9ee
}

@media (min-width:58em) {
    .error-icon {
        --error-icon-side: 11.25rem
    }
}

.error-icon svg {
    width: 3rem;
    height: 3rem
}

@media (min-width:58em) {
    .error-icon svg {
        width: 3.5rem;
        height: 3.5rem
    }
}

.error-icon path {
    stroke: #23272f
}

.error-title {
    margin-top: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: #23272f
}

@media (min-width:58em) {
    .error-title {
        margin-top: 2.5rem;
        font-size: 2rem
    }
}

.error-code {
    margin-top: .75rem;
    font-weight: 500;
    color: #515a6d
}

@media (min-width:58em) {
    .error-code {
        margin-top: 1rem
    }
}

.error-text {
    max-width: 24em;
    margin-top: 1.5rem;
    text-align: center;
    color: #515a6d
}

.error-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #23272f;
    color: #fff;
    margin-top: 2rem;
    padding: .75rem 1.5rem
}

@media (min-width:58em) {
    .error-link {
        font-size: 1rem
    }
}

.error-link:active,
.error-link:focus,
.error-link:hover {
    border-color: #3d4352;
    background-color: #3d4352
}

@media (min-width:58em) {
    .error-link {
        margin-top: 2.5rem;
        padding: 1rem 3.5rem
    }
}

.auth-form,
.auth-form-action {
    margin-top: 1.5rem
}

@media (min-width:58em) {

    .auth-form,
    .auth-form-action {
        margin-top: 2.5rem
    }
}

.auth-form-rules {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: .25rem;
    font-size: .875rem;
    background-color: #f9f9fa
}

@media (min-width:58em) {
    .auth-form-rules {
        margin-bottom: 2.5rem;
        padding: 1.5rem
    }
}

.auth-form-rules ul {
    margin-top: .5rem;
    padding-left: 1.4em;
    list-style-position: outside
}

@media (min-width:58em) {
    .auth-form-rules ul {
        margin-top: 1rem
    }
}

.auth-form-rules-title {
    font-size: 1rem;
    font-weight: 700;
    color: #23272f
}

.auth-form-alert {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: .25rem;
    font-size: .875rem;
    background-color: #ffe3d5;
    color: #b71930
}

@media (min-width:58em) {
    .auth-form-alert {
        margin-bottom: 2.5rem;
        padding: 1.5rem
    }
}

.auth-form-2fa-code {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch
}

.auth-form-2fa-code .form-control+.form-control {
    margin-top: 0
}

.auth-form-2fa-code label {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}

.auth-form-2fa-code input {
    width: 3.5rem;
    height: 4rem;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    color: #23272f
}

@media (min-width:58em) {
    .auth-form-2fa-code input {
        width: 5rem;
        height: 5.5rem;
        font-size: 1.75rem
    }
}

.auth-form-2fa-code input.is-large {
    padding: 0
}

.auth-form-2fa-code p {
    width: 100%
}

.auth-form .form-submit {
    width: 100%
}

.auth-form-action {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    color: #23272f;
    width: 100%;
    padding: .75rem 2rem
}

@media (min-width:58em) {
    .auth-form-action {
        font-size: 1rem
    }
}

.auth-form-action:active,
.auth-form-action:focus,
.auth-form-action:hover {
    background-color: #f3f4f6
}

@media (min-width:58em) {
    .auth-form-action {
        padding: 1rem 2.75rem
    }
}

.auth-form-secondary-actions {
    display: flex;
    flex-direction: column;
    margin-top: 5rem
}

@media (min-width:58em) {
    .auth-form-secondary-actions {
        margin-top: 7rem
    }
}

.auth-form-secondary-actions a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-weight: 500;
    text-decoration: none;
    color: #68748d
}

.auth-form-secondary-actions a svg {
    width: 1.25rem;
    height: 1.25rem
}

.rich-text {
    font-size: .875rem
}

@media (min-width:58em) {
    .rich-text {
        font-size: 1rem
    }
}

.rich-text>* {
    max-width: 36em
}

.rich-text>*+* {
    margin-top: 1.5rem
}

@media (min-width:58em) {
    .rich-text>*+* {
        margin-top: 1.75rem
    }
}

.rich-text h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .rich-text h2 {
        font-size: 1.5rem
    }
}

.dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: 1.5rem
}

@media (min-width:58em) {
    .dashboard {
        gap: 1.25rem;
        margin-top: 2rem
    }
}

@media (min-width:92em) {
    .dashboard {
        grid-template-columns: auto auto auto auto;
        gap: 1.25rem 0
    }
}

.dashboard-block-label {
    grid-row: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .dashboard-block-label {
        font-size: 1.5rem
    }
}

@media (max-width:44.9375em) {
    .dashboard-block-label {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }
}

@media (min-width:92em) {
    .dashboard-block-label:nth-of-type(1) {
        grid-column: 1/3
    }

    .dashboard-block-label:nth-of-type(2) {
        grid-column: 3/5
    }
}

.dashboard-block-summary {
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fff;
    grid-row: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    color: #68748d
}

@media (min-width:58em) {
    .dashboard-block-summary {
        padding: 1.5rem
    }
}

@media (min-width:58em) {
    .dashboard-block-summary {
        gap: .5rem;
        padding: 2rem;
        font-size: 1rem
    }
}

@media (min-width:45em) {
    .dashboard-block-summary {
        grid-row: 2;
        align-items: flex-start
    }
}

@media (min-width:92em) {
    .dashboard-block-summary {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0
    }

    .dashboard-block-summary:nth-of-type(1) {
        grid-column: 1
    }

    .dashboard-block-summary:nth-of-type(2) {
        grid-column: 3
    }
}

.dashboard-block-summary:only-of-type {
    grid-column: 1/3
}

@media (min-width:45em) {
    .dashboard-block-summary:only-of-type {
        grid-column: 1
    }
}

.dashboard-block-summary strong {
    font-size: 1.75rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .dashboard-block-summary strong {
        font-size: 2.5rem
    }
}

.dashboard-latest {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem 1rem;
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fff;
    grid-column: 1/3;
    font-size: .875rem
}

@media (min-width:58em) {
    .dashboard-latest {
        padding: 1.5rem
    }
}

@media (min-width:58em) {
    .dashboard-latest {
        font-size: 1rem
    }
}

@media (min-width:45em) {
    .dashboard-latest {
        grid-row: 3
    }

    .dashboard-latest:nth-of-type(1) {
        grid-column: 1
    }

    .dashboard-latest:nth-of-type(2) {
        grid-column: 2
    }

    .dashboard-latest:only-of-type {
        grid-column: 2;
        grid-row: 2
    }
}

@media (min-width:92em) {
    .dashboard-latest {
        grid-row: 2;
        position: relative;
        padding-left: 2.5rem;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }

    .dashboard-latest:nth-of-type(1) {
        grid-column: 2;
        margin-right: 1.5rem
    }

    .dashboard-latest:nth-of-type(2) {
        grid-column: 4
    }

    .dashboard-latest:only-of-type {
        grid-column: 2
    }

    .dashboard-latest::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 1px;
        height: 7rem;
        margin-top: auto;
        margin-bottom: auto;
        background-color: #f3f4f6
    }
}

.dashboard-latest a {
    display: inline-block;
    font-weight: 500;
    color: #ab5e0f;
    grid-column: 2
}

.dashboard-latest-label {
    grid-column: 1;
    grid-row: 1;
    font-size: .875rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .dashboard-latest-label {
        font-size: 1rem
    }
}

.dashboard-latest-data {
    grid-column: 1/3;
    padding: 1rem;
    border: 1px solid #e8e9ee;
    border-radius: .25rem
}

.dashboard-latest-data.is-contract dd:not(:first-of-type),
.dashboard-latest-data.is-contract dt:not(:first-of-type) {
    margin-top: .125rem
}

.dashboard-latest-data.is-contract dt {
    clear: both;
    float: left;
    color: #68748d
}

.dashboard-latest-data.is-contract dt::after {
    content: ":";
    margin-right: .25em
}

.dashboard-latest-data.is-contract dd {
    float: left;
    font-weight: 700;
    color: #23272f
}

.dashboard-latest-data.is-offer {
    display: grid;
    grid-template-columns: auto 1fr auto
}

.dashboard-latest-data-no {
    grid-column: 1/3;
    grid-row: 1;
    font-weight: 700;
    color: #23272f
}

.dashboard-latest-data-products-label {
    margin-top: .125rem;
    margin-right: .25em;
    color: #68748d
}

.dashboard-latest-data-products {
    margin-top: .125rem
}

.dashboard-latest-data-price {
    grid-column: 3;
    grid-row: 1;
    font-weight: 700;
    color: #23272f
}

.dashboard-latest-data-date {
    margin-top: .125rem;
    text-align: right;
    color: #68748d
}

.dashboard-calendar {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.75rem
}

@media (min-width:58em) {
    .dashboard-calendar {
        gap: 1.25rem;
        margin-top: 1.25rem
    }
}

@media (min-width:92em) {
    .dashboard-calendar {
        grid-column: span 4
    }
}

.calendar-summary {
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fff
}

@media (min-width:58em) {
    .calendar-summary {
        padding: 1.5rem
    }
}

.calendar-summary-delivery-label {
    font-size: .875rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .calendar-summary-delivery-label {
        font-size: 1rem
    }
}

.calendar-summary-delivery {
    display: flex;
    margin-top: .75rem;
    border: 1px solid #e8e9ee;
    border-radius: .25rem
}

.calendar-summary-delivery>time {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
    padding: 1rem 1.5rem 1rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: #68748d
}

@media (min-width:58em) {
    .calendar-summary-delivery>time {
        gap: .5rem;
        padding: 2rem;
        font-size: 1rem
    }
}

.calendar-summary-delivery>time strong {
    font-size: 2rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .calendar-summary-delivery>time strong {
        font-size: 2.5rem
    }
}

.calendar-summary-delivery dl {
    flex-grow: 2;
    padding: 1rem 1rem 1rem 1.5rem;
    border-left: 1px solid #e8e9ee
}

.calendar-header {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem
}

@media (min-width:34em) {
    .calendar-header {
        grid-template-columns: 1fr auto 1fr
    }
}

@media (min-width:58em) {
    .calendar-header {
        gap: 1.75rem
    }
}

.calendar-header button {
    display: inline-block;
    font-weight: 500;
    color: #ab5e0f;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    text-decoration: underline;
    font-size: .875rem;
    background: 0 0
}

@media (min-width:34em) {
    .calendar-header button {
        grid-column: 3;
        margin-left: auto
    }
}

@media (min-width:58em) {
    .calendar-header button {
        font-size: 1rem
    }
}

.calendar-header-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .calendar-header-title {
        font-size: 1.5rem
    }
}

.calendar-header.has-nav .calendar-header-title {
    grid-column: span 2
}

@media (min-width:34em) {
    .calendar-header.has-nav .calendar-header-title {
        grid-column: 1
    }
}

.calendar-header-month {
    font-weight: 600
}

@media (min-width:34em) {
    .calendar-header-month {
        grid-column: 2
    }
}

@media (min-width:58em) {
    .calendar-header-month {
        font-size: 1.125rem
    }
}

.calendar-header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-left: auto
}

@media (min-width:58em) {
    .calendar-header-nav {
        margin-right: -.5rem
    }
}

.calendar-header-nav button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 2rem;
    padding: 0;
    border: none;
    text-decoration: none;
    background: 0 0
}

@media (min-width:58em) {
    .calendar-header-nav button {
        width: 2rem
    }
}

.calendar-header-nav button::after {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../img/icons/chevron-right.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.calendar-header-nav-prev::after {
    transform: rotate(180deg)
}

.calendar {
    overflow: hidden;
    margin-top: .5rem;
    margin-right: -1.25rem;
    margin-left: -1.25rem;
    border-top: 1px solid #f3f4f6;
    background-color: #fff
}

@media (min-width:60em) {
    .calendar {
        margin-top: 0
    }
}

@media (min-width:60em) {
    .calendar {
        margin-right: 0;
        margin-left: 0;
        border-top: none
    }
}

.calendar table {
    width: 100%;
    border-collapse: collapse
}

.calendar td,
.calendar th {
    width: 20%;
    padding: .5rem
}

@media (min-width:90em) {

    .calendar td,
    .calendar th {
        width: 16.4%
    }
}

.calendar td:nth-child(n+6),
.calendar th:nth-child(n+6) {
    display: none
}

@media (min-width:90em) {

    .calendar td:nth-child(n+6),
    .calendar th:nth-child(n+6) {
        display: table-cell;
        width: 9%
    }
}

.calendar th {
    font-weight: 600
}

@media (min-width:58em) {
    .calendar th {
        padding: 1rem 1rem .75rem
    }
}

@media (max-width:29.9375em) {
    .calendar th[data-abbr] {
        font-size: 0
    }

    .calendar th[data-abbr]::after {
        content: attr(data-abbr);
        font-size: .875rem;
        letter-spacing: .05em;
        text-transform: uppercase
    }
}

.calendar td {
    height: 6rem;
    border: 1px solid #f3f4f6;
    text-align: center;
    vertical-align: top
}

@media (min-width:58em) {
    .calendar td {
        position: relative;
        height: 8rem;
        text-align: right;
        padding-bottom: 2.5rem
    }
}

.calendar td>time {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 700
}

@media (min-width:58em) {
    .calendar td>time {
        position: absolute;
        right: .5rem;
        bottom: .5rem
    }
}

.calendar td.is-another-month,
.calendar td:nth-child(n+6) {
    background-color: #f9f9fa;
    color: #68748d
}

.calendar td:not(.is-another-month):not(:nth-child(n+6)):not([aria-current=date])>time {
    color: #23272f
}

.calendar td[aria-current=date]>time {
    background-color: #23272f;
    color: #fff
}

.calendar a {
    color: inherit
}

.calendar .calendar-delivery {
    margin-top: .5rem;
    text-align: left
}

@media (min-width:58em) {
    .calendar .calendar-delivery {
        position: relative;
        margin-top: 0;
        padding-left: .5rem
    }

    .calendar .calendar-delivery::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: .25rem;
        height: 100%;
        border-radius: .5rem;
        background-color: #68748d
    }
}

.calendar-dialog .dialog-close {
    grid-column: 1;
    background-image: url(../img/icons/chevron-left.svg)
}

.calendar-dialog .dialog-header {
    grid-template-columns: auto 1fr auto
}

.calendar-dialog .dialog-title {
    grid-column: 2;
    text-align: center
}

.calendar-dialog .calendar {
    max-width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0
}

.calendar-dialog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.25rem;
    border-top: 1px solid #e8e9ee
}

.contracts-header-nav form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-items: center
}

@media (min-width:73em) {
    .contracts-header-nav form {
        grid-template-columns: auto auto auto 1fr
    }
}

@media (min-width:89em) {
    .contracts-header-nav form {
        grid-template-columns: auto 1fr auto auto
    }
}

.contracts-header-nav .form-control {
    gap: .25rem 1.5rem
}

@media (min-width:73em) {
    .contracts-header-nav .form-control {
        display: flex;
        flex-direction: column
    }
}

.contracts-header-fake-title {
    grid-column: 1/3;
    font-size: 1.5rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .contracts-header-fake-title {
        font-size: 2rem
    }
}

@media (min-width:73em) {
    .contracts-header-fake-title {
        grid-column: 1/3
    }
}

@media (min-width:89em) {
    .contracts-header-fake-title {
        grid-column: 1
    }
}

@media (min-width:73em) {
    .contracts-header-nav form::after {
        content: "";
        grid-column: span 4;
        grid-row: 2;
        width: 100%;
        height: 1px;
        margin-top: 1.75rem;
        background-color: #e8e9ee
    }
}

.contracts-header .data-table-filter {
    grid-column: 1/3;
    grid-row: 2;
    margin-top: 1.25rem
}

@media (min-width:73em) {
    .contracts-header .data-table-filter {
        grid-column: span 4;
        grid-row: 3;
        margin-top: 1.5rem;
        align-self: end;
        max-width: 40em
    }
}

@media (min-width:89em) {
    .contracts-header .data-table-filter {
        grid-column: 1/3
    }
}

@media (min-width:28em) {
    .contracts-header .data-table-radio {
        grid-column: 1/3
    }
}

@media (min-width:73em) {
    .contracts-header .data-table-radio {
        grid-column: 3/5
    }
}

@media (min-width:89em) {
    .contracts-header .data-table-radio {
        grid-column: 2/5
    }
}

.contracts-view {
    grid-column: 1/3
}

@media (min-width:28em) {
    .contracts-view {
        grid-column: 1
    }
}

@media (min-width:73em) {
    .contracts-view {
        grid-row: 4;
        grid-template-columns: auto auto;
        align-items: center
    }

    .contracts-view label {
        padding-left: 1rem
    }
}

@media (min-width:89em) {
    .contracts-view {
        grid-column: 3;
        grid-row: 3
    }
}

.form-control+.contracts-view {
    margin-top: 1rem
}

@media (min-width:73em) {
    .form-control+.contracts-view {
        margin-top: 1.5rem
    }
}

.contracts-view label {
    margin-bottom: 0;
    color: #68748d
}

.contracts-view select {
    margin-right: auto
}

.contracts-header .data-table-sort {
    grid-column: 1/3;
    margin-top: 1rem
}

@media (min-width:28em) {
    .contracts-header .data-table-sort {
        grid-column: 2
    }
}

@media (min-width:73em) {
    .contracts-header .data-table-sort {
        grid-column: 2/4;
        grid-row: 4;
        grid-template-columns: auto auto;
        align-items: center;
        margin-top: 1.5rem
    }

    .contracts-header .data-table-sort label {
        padding-left: 1rem
    }

    .contracts-header .data-table-sort .form-input {
        margin-right: auto
    }
}

@media (min-width:89em) {
    .contracts-header .data-table-sort {
        grid-column: 4;
        grid-row: 3
    }
}

@media (min-width:28em) {
    .contracts-header.has-copy-button .data-table-radio {
        grid-column: 1
    }

    .contracts-header.has-copy-button .contracts-view {
        grid-column: 2
    }

    .contracts-header.has-copy-button .data-table-sort {
        grid-column: 1
    }
}

@media (min-width:73em) {
    .contracts-header.has-copy-button form {
        grid-template-columns: auto auto auto 1fr
    }

    .contracts-header.has-copy-button form::after {
        grid-column: span 4
    }

    .contracts-header.has-copy-button .form-input {
        width: 100%
    }

    .contracts-header.has-copy-button .contracts-header-fake-title {
        grid-column: 1/3
    }

    .contracts-header.has-copy-button .data-table-radio {
        grid-column: 3/5
    }

    .contracts-header.has-copy-button .data-table-filter {
        grid-column: 1/5
    }

    .contracts-header.has-copy-button .contracts-view {
        grid-column: 1
    }

    .contracts-header.has-copy-button .data-table-sort {
        grid-column: 2/4;
        grid-row: 4
    }
}

@media (min-width:89em) {
    .contracts-header.has-copy-button form {
        grid-template-columns: auto 1fr auto auto auto
    }

    .contracts-header.has-copy-button form::after {
        grid-column: span 5
    }

    .contracts-header.has-copy-button .contracts-header-fake-title {
        grid-column: 1
    }

    .contracts-header.has-copy-button .data-table-radio {
        grid-column: 2/6
    }

    .contracts-header.has-copy-button .data-table-filter {
        grid-column: 1/3
    }

    .contracts-header.has-copy-button .contracts-view {
        grid-column: 3
    }

    .contracts-header.has-copy-button .data-table-sort {
        grid-column: 4;
        grid-row: 3
    }
}

.contracts-copy {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #23272f;
    color: #fff;
    grid-column: 1/3;
    margin-top: 1rem;
    padding: .5rem 1rem
}

@media (min-width:58em) {
    .contracts-copy {
        font-size: 1rem
    }
}

.contracts-copy:active,
.contracts-copy:focus,
.contracts-copy:hover {
    border-color: #3d4352;
    background-color: #3d4352
}

@media (min-width:28em) {
    .contracts-copy {
        grid-column: 2;
        margin-top: auto
    }
}

@media (min-width:73em) {
    .contracts-copy {
        grid-column: 4;
        grid-row: 4;
        margin-right: auto
    }
}

@media (min-width:89em) {
    .contracts-copy {
        grid-column: 5;
        grid-row: 3
    }
}

@media (max-width:93em) {

    .contracts.data-table table,
    .contracts.data-table td,
    .contracts.data-table th {
        display: block
    }

    .contracts.data-table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .contracts.data-table tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .contracts.data-table tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .contracts.data-table tr:is(:hover, :focus-within) td,
    .contracts.data-table tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .contracts.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .contracts.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .contracts.data-table td,
    .contracts.data-table th {
        padding: 0
    }

    .contracts.data-table td:first-child,
    .contracts.data-table th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .contracts.data-table td:last-child,
    .contracts.data-table th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .contracts.data-table th {
        font-weight: 600
    }

    .contracts.data-table td::before {
        font-weight: 500;
        color: #68748d
    }

    .contracts.data-table.has-white-bg tbody tr>* {
        border: none
    }

    .contracts.data-table tr {
        display: grid;
        grid-template-columns: auto auto auto
    }

    .contracts.data-table th {
        grid-column: 1/3;
        color: #23272f
    }

    .contracts.data-table td::after {
        font-weight: 500;
        color: #68748d
    }

    .contracts.data-table td:nth-child(2) {
        grid-column: 1/4;
        grid-row: 2;
        margin-top: .25rem;
        margin-bottom: 1rem;
        color: #68748d
    }

    .contracts.data-table td:nth-child(2)::before {
        content: var(--i18n-contracts-customer, "Zákaznický název") ": "
    }

    .contracts.data-table td:nth-child(3) {
        grid-column: 1/4;
        grid-row: 4;
        margin-top: 1rem;
        font-weight: 600
    }

    .contracts.data-table td:nth-child(3)::before {
        content: var(--i18n-contracts-products, "Počet kusů") ": ";
        padding-left: 1.5rem;
        background-image: url(../img/icons/colored/box-gray-50.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .contracts.data-table td:nth-child(4),
    .contracts.data-table td:nth-child(5),
    .contracts.data-table td:nth-child(6) {
        grid-row: 3;
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        gap: .25rem .5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-top: 1px solid #e8e9ee;
        border-bottom: 1px solid #e8e9ee;
        font-weight: 600
    }

    .contracts.data-table td:nth-child(4) .progress-indicator,
    .contracts.data-table td:nth-child(5) .progress-indicator,
    .contracts.data-table td:nth-child(6) .progress-indicator {
        margin-left: auto;
        margin-right: 0
    }

    .contracts.data-table td:nth-child(4)::after,
    .contracts.data-table td:nth-child(5)::after,
    .contracts.data-table td:nth-child(6)::after {
        grid-column: 1/3
    }

    .contracts.data-table td:nth-child(4) {
        padding-right: 1rem;
        padding-left: 1rem;
        border-left: 1px solid #e8e9ee;
        border-bottom-left-radius: .25rem;
        border-top-left-radius: .25rem
    }

    .contracts.data-table td:nth-child(4)::after {
        content: var(--i18n-contracts-processed, "Vyrobeno")
    }

    .contracts.data-table td:nth-child(5)::after {
        content: var(--i18n-contracts-delivered, "Dodáno")
    }

    .contracts.data-table td:nth-child(6) {
        padding-right: 1rem;
        padding-left: 1rem;
        border-right: 1px solid #e8e9ee;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem
    }

    .contracts.data-table td:nth-child(6)::after {
        content: var(--i18n-contracts-invoiced, "Fakturováno")
    }

    .contracts.data-table td:nth-child(7) {
        grid-column: 1/4;
        grid-row: 5;
        margin-top: .5rem;
        font-weight: 600
    }

    .contracts.data-table td:nth-child(7)::before {
        content: var(--i18n-contracts-date, "Datum dodání") ": ";
        padding-left: 1.5rem;
        background-image: url(../img/icons/colored/calendar-gray-50.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .contracts.data-table td:nth-child(8) {
        grid-column: 3;
        grid-row: 1;
        margin-left: auto
    }

    .contracts.data-table .progress-indicator {
        --progress-indicator-side: 1.25rem
    }
}

.contracts-day-top-scroll {
    scrollbar-color: #68748d #e8e9ee;
    overflow-x: auto;
    margin-top: .5rem
}

.contracts-day-top-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

.contracts-day-top-scroll::-webkit-scrollbar-thumb {
    background: #68748d;
    border-radius: 6px
}

.contracts-day-top-scroll::-webkit-scrollbar-track {
    background: #e8e9ee
}

.contracts-day.data-table {
    scrollbar-color: #68748d #e8e9ee;
    overflow-x: auto;
    white-space: nowrap;
    margin-top: .5rem
}

.contracts-day.data-table::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

.contracts-day.data-table::-webkit-scrollbar-thumb {
    background: #68748d;
    border-radius: 6px
}

.contracts-day.data-table::-webkit-scrollbar-track {
    background: #e8e9ee
}

.contracts-day.data-table td:nth-child(2) a {
    color: inherit
}

.contract {
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: .75rem
}

@media (min-width:58em) {
    .contract {
        padding: 1.5rem
    }
}

@media (min-width:83em) {
    .contract {
        grid-template-columns: repeat(5, auto)
    }
}

@media (min-width:98em) {
    .contract {
        grid-template-columns: repeat(7, auto)
    }
}

@media (min-width:24em) {
    .contract {
        font-size: .875rem
    }
}

@media (min-width:58em) {
    .contract {
        font-size: 1rem
    }
}

.contract-title {
    grid-column: span 2;
    font-size: 1.125rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:83em) {
    .contract-title {
        grid-column: span 4
    }
}

@media (min-width:98em) {
    .contract-title {
        grid-column: span 6
    }
}

@media (min-width:58em) {
    .contract-title {
        font-size: 1.5rem
    }
}

.contract:not(:has(.archive-open)) .contract-title {
    grid-column: span 3
}

.contract-archive {
    grid-column: -2;
    grid-row: 1/3;
    display: flex
}

.contract-customer {
    grid-column: span 2;
    margin-top: .25rem;
    font-weight: 500;
    color: #68748d
}

@media (min-width:83em) {
    .contract-customer {
        grid-column: span 5
    }
}

@media (min-width:98em) {
    .contract-customer {
        grid-column: span 7
    }
}

.contract:not(:has(.archive-open)) .contract-customer {
    grid-column: span 3
}

.contract-customer strong {
    font-weight: 600;
    color: #68748d
}

.contract-info {
    grid-column: span 3;
    display: grid;
    grid-template-columns: subgrid;
    font-weight: 500;
    color: #68748d
}

@media (min-width:83em) {
    .contract-info {
        grid-column: span 5
    }
}

@media (min-width:98em) {
    .contract-info {
        grid-column: span 7
    }
}

.contract-info dd {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    color: #23272f
}

.contract-info .progress-indicator {
    --progress-indicator-side: 1.25rem
}

@media (min-width:40em) {
    .contract-info .progress-indicator {
        --progress-indicator-side: 2rem
    }
}

.contract-area dd,
.contract-date dd,
.contract-delivered dd,
.contract-invoiced dd,
.contract-processed dd,
.contract-products dd,
.contract-weight dd {
    font-weight: 600
}

.contract .address,
.contract-area,
.contract-date,
.contract-manager,
.contract-products,
.contract-weight {
    grid-column: span 3;
    display: inline-flex;
    align-items: center
}

.contract .address>dt::after,
.contract-area>dt::after,
.contract-date>dt::after,
.contract-manager>dt::after,
.contract-products>dt::after,
.contract-weight>dt::after {
    content: ": ";
    margin-right: .25em
}

.contract-area dt,
.contract-date dt,
.contract-note dt,
.contract-products dt,
.contract-weight dt {
    display: inline-flex;
    align-items: center
}

.contract-area dt svg,
.contract-date dt svg,
.contract-note dt svg,
.contract-products dt svg,
.contract-weight dt svg {
    width: 1rem;
    height: 1rem;
    margin-right: .5rem
}

.contract-area dt path,
.contract-date dt path,
.contract-note dt path,
.contract-products dt path,
.contract-weight dt path {
    stroke: #68748d
}

.contract-weight {
    margin-top: 1rem
}

@media (min-width:58em) {
    .contract-weight {
        margin-top: 1.25rem
    }
}

.contract .address,
.contract-area,
.contract-date,
.contract-products {
    margin-top: .5rem
}

.contract-delivered,
.contract-invoiced,
.contract-processed {
    grid-row: 2;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: .25rem;
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid #e8e9ee;
    border-bottom: 1px solid #e8e9ee
}

@media (min-width:58em) {

    .contract-delivered,
    .contract-invoiced,
    .contract-processed {
        margin-top: 1.25rem
    }
}

@media (min-width:40em) {

    .contract-delivered,
    .contract-invoiced,
    .contract-processed {
        position: relative;
        align-items: flex-start;
        gap: 0;
        padding-left: 3rem
    }

    .contract-delivered dd,
    .contract-invoiced dd,
    .contract-processed dd {
        font-size: 1.125rem;
        font-weight: 700
    }

    .contract-delivered .progress-indicator,
    .contract-invoiced .progress-indicator,
    .contract-processed .progress-indicator {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin-top: auto;
        margin-bottom: auto
    }
}

.contract-processed {
    padding-right: 1.75rem;
    padding-left: 1rem;
    border-left: 1px solid #e8e9ee;
    border-bottom-left-radius: .25rem;
    border-top-left-radius: .25rem
}

@media (min-width:40em) {
    .contract-processed {
        padding-right: 1.25rem;
        padding-left: 4rem
    }

    .contract-processed .progress-indicator {
        margin-left: 1rem
    }
}

@media (min-width:83em) {
    .contract-processed {
        border-left: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }

    .contract-processed .progress-indicator {
        margin-left: 0
    }
}

.contract-invoiced {
    padding-right: 1rem;
    padding-left: 1.75rem;
    border-right: 1px solid #e8e9ee;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

@media (min-width:40em) {
    .contract-invoiced {
        padding-left: 4.25rem
    }

    .contract-invoiced .progress-indicator {
        left: 1.25rem
    }
}

@media (min-width:83em) {
    .contract-invoiced {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .contract-invoiced .progress-indicator {
        left: 0
    }
}

@media (min-width:83em) {

    .contract-area,
    .contract-weight {
        grid-column: span 5;
        margin-top: 1.25rem;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
        border-right: 1px solid #e8e9ee;
        border-left: 1px solid #e8e9ee
    }
}

@media (min-width:83em) and (min-width:98em) {

    .contract-area,
    .contract-weight {
        grid-column: 1/3;
        display: inline-flex;
        justify-content: space-between;
        gap: 1.75rem;
        margin-right: 1rem
    }

    .contract-area dt::after,
    .contract-weight dt::after {
        display: none
    }
}

@media (min-width:83em) {
    .contract-weight {
        padding-top: 1.25rem;
        border-top: 1px solid #e8e9ee;
        border-top-right-radius: .25rem;
        border-top-left-radius: .25rem
    }
}

@media (min-width:83em) and (min-width:98em) {
    .contract-weight {
        grid-row: 2
    }
}

@media (min-width:83em) {
    .contract-area {
        margin-top: 0;
        padding-top: .25rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #e8e9ee;
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: .25rem
    }
}

@media (min-width:83em) and (min-width:98em) {
    .contract-area {
        grid-row: 3
    }
}

@media (min-width:83em) {

    .contract-date,
    .contract-delivered,
    .contract-invoiced,
    .contract-processed,
    .contract-products {
        grid-row: 4;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-top: 1rem;
        padding: 1.25rem 1.25rem 1.25rem 3rem;
        border-top: 1px solid #e8e9ee;
        border-bottom: 1px solid #e8e9ee
    }
}

@media (min-width:83em) and (min-width:58em) {

    .contract-date,
    .contract-delivered,
    .contract-invoiced,
    .contract-processed,
    .contract-products {
        margin-top: 1.25rem
    }
}

@media (min-width:83em) and (min-width:98em) {

    .contract-date,
    .contract-delivered,
    .contract-invoiced,
    .contract-processed,
    .contract-products {
        grid-row: 2/4
    }
}

@media (min-width:83em) {

    .contract-date dt,
    .contract-delivered dt,
    .contract-invoiced dt,
    .contract-processed dt,
    .contract-products dt {
        white-space: nowrap
    }
}

@media (min-width:83em) {

    .contract-date dt svg,
    .contract-delivered dt svg,
    .contract-invoiced dt svg,
    .contract-processed dt svg,
    .contract-products dt svg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2rem;
        height: 2rem;
        margin-top: auto;
        margin-bottom: auto;
        padding: .5rem;
        border-radius: 1rem;
        background-color: #f3f4f6
    }
}

@media (min-width:83em) {

    .contract-date dd,
    .contract-delivered dd,
    .contract-invoiced dd,
    .contract-processed dd,
    .contract-products dd {
        white-space: nowrap;
        font-size: 1.125rem;
        font-weight: 700
    }
}

@media (min-width:83em) {
    .contract-products {
        grid-column: span 1;
        padding-left: 4.5rem;
        border-left: 1px solid #e8e9ee;
        border-bottom-left-radius: .25rem;
        border-top-left-radius: .25rem
    }

    .contract-products dt svg {
        left: 1.5rem
    }

    .contract-products dt::after {
        display: none
    }
}

@media (min-width:83em) {
    .contract-date {
        grid-column: span 1;
        padding-right: 1.5rem;
        border-right: 1px solid #e8e9ee;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem
    }

    .contract-date dt::after {
        display: none
    }
}

.contract-manager {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e8e9ee
}

@media (min-width:58em) {
    .contract-manager {
        margin-top: 1.25rem;
        padding-top: 1.25rem
    }
}

@media (min-width:83em) {
    .contract-manager {
        grid-column: 1;
        grid-row: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
        padding-right: 2.5rem
    }

    .contract-manager>dt::after {
        display: none
    }
}

@media (min-width:98em) {
    .contract-manager {
        grid-row: 4
    }
}

.contract .address {
    align-items: flex-start
}

@media (min-width:83em) {
    .contract .address {
        grid-column: span 2;
        grid-row: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
        margin-top: 1rem;
        padding-top: 1rem;
        padding-right: 2.5rem;
        border-top: 1px solid #e8e9ee
    }
}

@media (min-width:83em) and (min-width:58em) {
    .contract .address {
        margin-top: 1.25rem;
        padding-top: 1.25rem
    }
}

@media (min-width:83em) {
    .contract .address>dt::after {
        display: none
    }
}

@media (min-width:98em) {
    .contract .address {
        grid-column: span 3;
        grid-row: 4
    }
}

.contract-note {
    grid-column: span 3;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .25em;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fef7cc
}

@media (min-width:58em) {
    .contract-note {
        margin-top: 1.5rem
    }
}

@media (min-width:83em) {
    .contract-note {
        grid-column: span 5
    }
}

@media (min-width:98em) {
    .contract-note {
        grid-column: span 7
    }
}

.contract-note dt::after {
    content: ": "
}

.archive-open {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    color: #23272f;
    margin-bottom: auto;
    margin-left: auto;
    padding: 8px 16px
}

@media (min-width:58em) {
    .archive-open {
        font-size: 1rem
    }
}

.archive-open:active,
.archive-open:focus,
.archive-open:hover {
    background-color: #f3f4f6
}

.archive-open svg {
    width: 1.5em;
    height: 1.5em
}

.archive-title {
    margin-top: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .archive-title {
        margin-top: 40px;
        font-size: 1.5rem
    }
}

.archive-nav form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: end;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e8e9ee
}

@media (min-width:28em) {
    .archive-nav form {
        grid-template-columns: 1fr auto;
        gap: 1rem 2rem
    }
}

@media (min-width:1300px) {
    .archive-nav form {
        padding-bottom: 0;
        border-bottom: none
    }
}

.archive-nav .form-control {
    gap: .25rem 1.5rem
}

.archive-nav .data-table-filter {
    grid-column: 1/3
}

@media (min-width:28em) {
    .archive-nav .data-table-filter {
        grid-column: 1;
        max-width: 40em
    }
}

.archive-nav .data-table-sort {
    grid-column: 1/3
}

@media (min-width:28em) {
    .archive-nav .data-table-sort {
        grid-column: 2
    }
}

@media (min-width:62.5em) {
    .archive-nav .data-table-sort {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center
    }
}

.archive-dialog .archive-wrapper {
    padding: 16px
}

@media (min-width:58em) {
    .archive-dialog .archive-wrapper {
        padding: 24px
    }
}

.archive.data-table {
    padding-top: 16px
}

.archive.data-table td:first-child span {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #ab5e0f
}

.archive.data-table td:first-child svg {
    width: 20px;
    height: 20px
}

.archive.data-table th a[download]::before {
    display: none
}

@media (max-width:1300px) {

    .archive.data-table table,
    .archive.data-table td,
    .archive.data-table th {
        display: block
    }

    .archive.data-table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .archive.data-table tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .archive.data-table tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .archive.data-table tr:is(:hover, :focus-within) td,
    .archive.data-table tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .archive.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .archive.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .archive.data-table td,
    .archive.data-table th {
        padding: 0
    }

    .archive.data-table td:first-child,
    .archive.data-table th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .archive.data-table td:last-child,
    .archive.data-table th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .archive.data-table th {
        font-weight: 600
    }

    .archive.data-table td::before {
        font-weight: 500;
        color: #68748d
    }

    .archive.data-table.has-white-bg tbody tr>* {
        border: none
    }

    .archive.data-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        border: 1px solid #e8e9ee
    }
}

@media (max-width:1300px) and (min-width:600px) {
    .archive.data-table tr {
        grid-template-columns: auto 1fr auto
    }
}

@media (max-width:1300px) {
    .archive.data-table td::after {
        font-weight: 500;
        color: #68748d
    }
}

@media (max-width:1300px) and (min-width:600px) {
    .archive.data-table td:nth-child(1) {
        margin-right: 8px
    }
}

@media (max-width:1300px) {
    .archive.data-table th {
        grid-column: 1/3;
        margin-top: 8px
    }
}

@media (max-width:1300px) and (min-width:600px) {
    .archive.data-table th {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        margin-right: 1rem
    }
}

@media (max-width:1300px) {
    .archive.data-table td:nth-child(3) {
        grid-column: 1/3;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e8e9ee;
        color: #68748d
    }
}

@media (max-width:1300px) and (min-width:600px) {
    .archive.data-table td:nth-child(3) {
        grid-column: 1/4
    }
}

@media (max-width:1300px) {
    .archive.data-table td:nth-child(3)::before {
        content: var(--i18n-archive-user, "Uživatel") ": ";
        padding-left: 1.5rem;
        background-image: url(../img/icons/colored/user-gray-50.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }
}

@media (max-width:1300px) {
    .archive.data-table td:nth-child(4) {
        grid-column: 1/3;
        margin-top: .5rem;
        color: #68748d
    }
}

@media (max-width:1300px) and (min-width:600px) {
    .archive.data-table td:nth-child(4) {
        grid-column: 1/4
    }
}

@media (max-width:1300px) {
    .archive.data-table td:nth-child(4)::before {
        content: var(--i18n-archive-date, "Datum") ": ";
        padding-left: 1.5rem;
        background-image: url(../img/icons/colored/calendar-gray-50.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }
}

@media (max-width:1300px) {
    .archive.data-table td:nth-child(5) {
        grid-column: 2;
        grid-row: 1;
        margin-left: auto
    }
}

@media (max-width:1300px) and (min-width:600px) {
    .archive.data-table td:nth-child(5) {
        grid-column: 3
    }
}

@media (max-width:1300px) {
    .archive.data-table td:nth-child(6) {
        grid-column: 1/4;
        margin-top: 1.5rem;
        margin-right: 1.5rem
    }
}

@media (min-width:1440px) {
    .archive-dialog {
        padding: 40px
    }
}

.archive-dialog .dialog-header {
    grid-template-columns: auto 1fr;
    border-bottom: 1px solid #e8e9ee
}

@media (min-width:1440px) {
    .archive-dialog .dialog-header {
        grid-template-columns: 1fr auto;
        padding: 0
    }
}

.archive-dialog .dialog-title {
    grid-column: 2;
    text-align: center
}

@media (min-width:58em) {
    .archive-dialog .dialog-title {
        font-size: 2rem
    }
}

@media (min-width:1440px) {
    .archive-dialog .dialog-title {
        grid-column: 1;
        text-align: left
    }
}

.archive-dialog .dialog-close {
    grid-column: 1;
    background-image: url(../img/icons/chevron-left.svg)
}

@media (min-width:1440px) {
    .archive-dialog .dialog-close {
        position: absolute;
        top: 2.875rem;
        right: 2.5rem;
        background-image: url(../img/icons/x.svg)
    }
}

.archive-dialog .archive-wrapper {
    max-width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0
}

@media (min-width:1440px) {
    .archive-dialog .archive-wrapper {
        margin-top: 28px;
        padding: 0
    }
}

.archive-dialog .archive-info {
    font-size: .875rem
}

.dialog.is-archive {
    min-height: 100vh
}

@media (min-width:1440px) {
    .dialog.is-archive {
        width: 83rem;
        margin-left: auto
    }

    .dialog.is-archive.has-parent-overlay {
        width: 76rem
    }

    .dialog.is-archive .dialog-header {
        border-bottom: none
    }
}

.archive-active {
    color: #148044
}

.archive-inactive {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #eb0400
}

.archive-inactive::after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    -webkit-mask-image: url(../img/icons/alert-circle.svg);
    mask-image: url(../img/icons/alert-circle.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor
}

.positions-wrapper {
    grid-column: span 2
}

.positions-header {
    margin-top: 2rem
}

@media (min-width:58em) {
    .positions-header {
        margin-top: 2.5rem
    }
}

.positions-header-nav form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-items: center
}

@media (min-width:64em) {
    .positions-header-nav form {
        grid-template-columns: 1fr auto;
        gap: 0 3rem
    }
}

@media (min-width:73em) {
    .positions-header-nav form {
        grid-template-columns: auto 1fr auto
    }
}

.positions-header-nav form .form-control {
    gap: .25rem 1rem
}

.positions-header-fake-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .positions-header-fake-title {
        font-size: 1.5rem
    }
}

.positions-header-fake-title-count {
    font-size: 1rem;
    font-weight: 500;
    color: #68748d
}

.positions-header .data-table-filter {
    grid-column: 1/3;
    grid-row: 2;
    margin-top: 1.25rem
}

@media (min-width:64em) {
    .positions-header .data-table-filter {
        grid-column: 1;
        grid-row: 3;
        margin-top: 1.5rem;
        align-self: end;
        max-width: 40em
    }
}

@media (min-width:73em) {
    .positions-header .data-table-filter {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0
    }
}

.positions-header .data-table-sort {
    grid-column: 1/3;
    grid-row: 3;
    margin-top: 1rem
}

@media (min-width:64em) {
    .positions-header .data-table-sort {
        grid-column: 2;
        grid-row: 3;
        grid-template-columns: auto auto;
        align-items: center;
        margin-top: 1.5rem
    }
}

@media (min-width:73em) {
    .positions-header .data-table-sort {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0
    }
}

.data-table.positions td:nth-child(2) a {
    color: inherit
}

.data-table.positions td:nth-child(9) {
    position: relative
}

.data-table.positions td:nth-child(9) button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    font-size: 0;
    background: 0 0
}

@media (min-width:92.0625em) {
    .data-table.positions {
        font-size: .875rem
    }
}

@media (min-width:100em) {
    .data-table.positions {
        font-size: 1rem
    }
}

@media (max-width:92em) {

    .data-table.positions table,
    .data-table.positions td,
    .data-table.positions th {
        display: block
    }

    .data-table.positions thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .data-table.positions tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .data-table.positions tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .data-table.positions tr:is(:hover, :focus-within) td,
    .data-table.positions tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .data-table.positions:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .data-table.positions:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .data-table.positions td,
    .data-table.positions th {
        padding: 0
    }

    .data-table.positions td:first-child,
    .data-table.positions th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .data-table.positions td:last-child,
    .data-table.positions th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .data-table.positions th {
        font-weight: 600
    }

    .data-table.positions td::before {
        font-weight: 500;
        color: #68748d
    }

    .data-table.positions.has-white-bg tbody tr>* {
        border: none
    }

    .data-table.positions tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid #e8e9ee
    }

    .data-table.positions th {
        grid-column: 2;
        margin-left: auto;
        color: #68748d
    }

    .data-table.positions th::before {
        content: "# "
    }

    .data-table.positions td:nth-child(2) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
        color: #23272f
    }

    .data-table.positions td:nth-child(3) {
        grid-column: 1/3;
        margin-top: .25rem;
        color: #68748d
    }

    .data-table.positions td:nth-child(3)::before {
        content: var(--i18n-positions-commission, "Komise") ": "
    }

    .data-table.positions td:nth-child(5),
    .data-table.positions td:nth-child(6) {
        grid-row: 3;
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        gap: .25rem .5rem;
        margin-top: 1rem;
        padding: 1rem;
        border-top: 1px solid #e8e9ee;
        border-bottom: 1px solid #e8e9ee;
        font-weight: 600
    }

    .data-table.positions td:nth-child(5) .progress-indicator,
    .data-table.positions td:nth-child(6) .progress-indicator {
        --progress-indicator-side: 1.25rem;
        margin-left: auto;
        margin-right: 0
    }

    .data-table.positions td:nth-child(5)::after,
    .data-table.positions td:nth-child(6)::after {
        grid-column: 1/3;
        font-weight: 500;
        color: #68748d
    }

    .data-table.positions td:nth-child(5) {
        border-left: 1px solid #e8e9ee;
        border-bottom-left-radius: .25rem;
        border-top-left-radius: .25rem
    }

    .data-table.positions td:nth-child(5)::after {
        content: var(--i18n-positions-delivered, "Dodáno")
    }

    .data-table.positions td:nth-child(6) {
        position: relative;
        border-right: 1px solid #e8e9ee;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem
    }

    .data-table.positions td:nth-child(6)::before {
        content: "";
        position: absolute;
        top: 1rem;
        bottom: 1rem;
        left: 0;
        display: block;
        width: 1px;
        height: calc(100% - 2rem);
        margin-top: auto;
        margin-bottom: auto;
        background-color: #e8e9ee
    }

    .data-table.positions td:nth-child(6)::after {
        content: var(--i18n-positions-invoiced, "Fakturováno")
    }

    .data-table.positions td:nth-child(4),
    .data-table.positions td:nth-child(7),
    .data-table.positions td:nth-child(8),
    .data-table.positions td:nth-child(9) {
        grid-column: 1/3;
        margin-top: .5rem;
        font-weight: 600
    }

    .data-table.positions td:nth-child(4)::before,
    .data-table.positions td:nth-child(7)::before,
    .data-table.positions td:nth-child(8)::before,
    .data-table.positions td:nth-child(9)::before {
        padding-left: 1.5rem;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .data-table.positions td:nth-child(4) {
        margin-top: 1rem
    }

    .data-table.positions td:nth-child(4)::before {
        content: var(--i18n-positions-products, "Počet kusů") ": ";
        background-image: url(../img/icons/colored/box-gray-50.svg)
    }

    .data-table.positions td:nth-child(7)::before {
        content: var(--i18n-positions-size, "Rozměr") ": ";
        background-image: url(../img/icons/colored/calendar-gray-50.svg)
    }

    .data-table.positions td:nth-child(8)::before {
        content: var(--i18n-positions-date, "Datum dodání") ": ";
        background-image: url(../img/icons/colored/calendar-gray-50.svg)
    }

    .data-table.positions td:nth-child(9)::before {
        content: var(--i18n-positions-note, "Poznámka") ": ";
        background-image: url(../img/icons/colored/message-square-gray-50.svg)
    }

    .data-table.positions td:nth-child(9) button {
        display: none
    }

    .data-table.positions .positions-note {
        overflow: visible;
        display: inline;
        max-width: none;
        white-space: initial
    }
}

.positions-note {
    overflow: hidden;
    white-space: nowrap;
    max-width: 10em;
    text-overflow: ellipsis
}

.positions-note-toggletip .positions-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5rem;
    min-width: 13em;
    padding: 1rem;
    border-radius: .25rem;
    font-size: .875rem;
    font-weight: 500;
    background-color: #3d4352;
    color: #f9f9fa;
    position: absolute;
    top: -3.5rem;
    right: 3.25rem;
    overflow: visible;
    max-width: none
}

@media (min-width:58em) {
    .positions-note-toggletip .positions-note {
        font-size: 1rem
    }
}

.positions-note-toggletip .positions-note::after {
    content: "";
    position: absolute;
    display: block;
    border: .5rem solid transparent;
    right: 2rem;
    bottom: -1rem;
    border-top-color: #3d4352
}

.position {
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center
}

@media (min-width:58em) {
    .position {
        padding: 1.5rem
    }
}

.position-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .position-title {
        font-size: 1.5rem
    }
}

.position-nav {
    display: flex;
    gap: .25rem
}

.position-nav a {
    padding: .25rem .5rem;
    text-decoration: none
}

.position-nav svg {
    width: 1.5rem;
    height: 1.5rem
}

.position-nav path {
    stroke: #23272f
}

.position-info {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: .25rem;
    font-size: .875rem;
    font-weight: 500;
    color: #68748d
}

@media (min-width:58em) {
    .position-info {
        font-size: 1rem
    }
}

@media (min-width:79em) {
    .position-info {
        grid-template-columns: repeat(4, auto)
    }
}

@media (min-width:88em) {
    .position-info {
        grid-template-columns: repeat(5, auto)
    }
}

.position-info dd {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-weight: 600;
    color: #23272f
}

.position-info .progress-indicator {
    --progress-indicator-side: 1.25rem
}

@media (min-width:25em) {
    .position-info .progress-indicator {
        --progress-indicator-side: 1.75rem
    }
}

.position-comission,
.position-complaint,
.position-customer,
.position-date,
.position-drawing,
.position-name,
.position-number,
.position-products,
.position-size,
.position-weight {
    grid-column: span 2;
    display: inline-flex;
    align-items: center
}

.position-comission>dt::after,
.position-complaint>dt::after,
.position-customer>dt::after,
.position-date>dt::after,
.position-drawing>dt::after,
.position-name>dt::after,
.position-number>dt::after,
.position-products>dt::after,
.position-size>dt::after,
.position-weight>dt::after {
    content: ": ";
    margin-right: .25em
}

.position-date dt,
.position-note dt,
.position-products dt,
.position-size dt,
.position-weight dt {
    display: inline-flex;
    align-items: center
}

.position-date dt svg,
.position-note dt svg,
.position-products dt svg,
.position-size dt svg,
.position-weight dt svg {
    width: 1rem;
    height: 1rem;
    margin-right: .5rem
}

.position-date dt path,
.position-note dt path,
.position-products dt path,
.position-size dt path,
.position-weight dt path {
    stroke: #68748d
}

@media (min-width:79em) {

    .position-customer,
    .position-number {
        grid-column: span 3
    }
}

@media (min-width:88em) {

    .position-customer,
    .position-number {
        grid-column: span 4
    }
}

.position-customer dd,
.position-number dd {
    font-weight: 600;
    color: #68748d
}

.position-complaint {
    margin-top: 1rem;
    width: 100%
}

@media (min-width:58em) {
    .position-complaint {
        margin-top: 1.25rem
    }
}

@media (min-width:79em) {
    .position-complaint {
        grid-row: 1/3;
        grid-column: 4;
        width: auto;
        margin-left: auto
    }
}

@media (min-width:88em) {
    .position-complaint {
        grid-column: 5
    }
}

.position-complaint dd {
    width: 100%
}

.position-complaint button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    color: #23272f;
    width: 100%;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    padding: 8px 16px
}

@media (min-width:58em) {
    .position-complaint button {
        font-size: 1rem
    }
}

.position-complaint button:active,
.position-complaint button:focus,
.position-complaint button:hover {
    background-color: #f3f4f6
}

.position-complaint button svg {
    width: 1.5em;
    height: 1.5em
}

.position-weight {
    margin-top: 1rem
}

@media (min-width:58em) {
    .position-weight {
        margin-top: 1.25rem
    }
}

.position-comission,
.position-date,
.position-drawing,
.position-products,
.position-size {
    margin-top: .5rem
}

.position-delivered,
.position-invoiced {
    grid-row: 4;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: .25rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid #e8e9ee;
    border-bottom: 1px solid #e8e9ee
}

@media (min-width:58em) {

    .position-delivered,
    .position-invoiced {
        margin-top: 1.25rem
    }
}

@media (min-width:25em) {

    .position-delivered,
    .position-invoiced {
        position: relative;
        align-items: flex-start;
        gap: 0;
        padding-left: 2.75rem
    }

    .position-delivered dd,
    .position-invoiced dd {
        font-size: 1.125rem;
        font-weight: 700
    }

    .position-delivered .progress-indicator,
    .position-invoiced .progress-indicator {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin-top: auto;
        margin-bottom: auto
    }
}

.position-delivered {
    padding-right: 2rem;
    padding-left: 1rem;
    border-left: 1px solid #e8e9ee;
    border-bottom-left-radius: .25rem;
    border-top-left-radius: .25rem
}

@media (min-width:25em) {
    .position-delivered {
        padding-right: 1.25rem;
        padding-left: 3.75rem
    }

    .position-delivered .progress-indicator {
        margin-left: 1rem
    }
}

@media (min-width:79em) {
    .position-delivered {
        border-left: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }

    .position-delivered .progress-indicator {
        margin-left: 0
    }
}

.position-invoiced {
    position: relative;
    padding-right: 1rem;
    padding-left: 2rem;
    border-right: 1px solid #e8e9ee;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.position-invoiced::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 1px;
    height: calc(100% - 2rem);
    left: 0;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #e8e9ee
}

@media (min-width:79em) {
    .position-invoiced::before {
        display: none
    }
}

@media (min-width:25em) {
    .position-invoiced {
        padding-left: 4rem
    }

    .position-invoiced .progress-indicator {
        left: 1.25rem
    }
}

@media (min-width:79em) {
    .position-invoiced {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .position-invoiced .progress-indicator {
        left: 0
    }
}

@media (min-width:79em) {

    .position-size,
    .position-weight {
        grid-column: span 4;
        margin-top: 1.25rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
        border-right: 1px solid #e8e9ee;
        border-left: 1px solid #e8e9ee
    }
}

@media (min-width:79em) and (min-width:88em) {

    .position-size,
    .position-weight {
        grid-column: 1;
        display: inline-flex;
        justify-content: space-between;
        gap: 1.75rem;
        margin-right: 1rem
    }

    .position-size dt::after,
    .position-weight dt::after {
        display: none
    }
}

@media (min-width:79em) {
    .position-weight {
        padding-top: 1rem;
        border-top: 1px solid #e8e9ee;
        border-top-right-radius: .25rem;
        border-top-left-radius: .25rem
    }
}

@media (min-width:79em) and (min-width:88em) {
    .position-weight {
        grid-row: 3
    }
}

@media (min-width:79em) {
    .position-size {
        margin-top: 0;
        padding-top: .25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e8e9ee;
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: .25rem
    }
}

@media (min-width:79em) and (min-width:88em) {
    .position-size {
        grid-row: 4
    }
}

@media (min-width:79em) {

    .position-date,
    .position-delivered,
    .position-invoiced,
    .position-products {
        grid-row: 3;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-top: 1rem;
        padding: 1rem 1.25rem 1rem 2.75rem;
        border-top: 1px solid #e8e9ee;
        border-bottom: 1px solid #e8e9ee
    }
}

@media (min-width:79em) and (min-width:58em) {

    .position-date,
    .position-delivered,
    .position-invoiced,
    .position-products {
        margin-top: 1.25rem
    }
}

@media (min-width:79em) and (min-width:88em) {

    .position-date,
    .position-delivered,
    .position-invoiced,
    .position-products {
        grid-row: 3/5
    }
}

@media (min-width:79em) {

    .position-date dt,
    .position-delivered dt,
    .position-invoiced dt,
    .position-products dt {
        white-space: nowrap
    }
}

@media (min-width:79em) {

    .position-date dt svg,
    .position-delivered dt svg,
    .position-invoiced dt svg,
    .position-products dt svg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2rem;
        height: 2rem;
        margin-top: auto;
        margin-bottom: auto;
        padding: .5rem;
        border-radius: 1rem;
        background-color: #f3f4f6
    }
}

@media (min-width:79em) {

    .position-date dd,
    .position-delivered dd,
    .position-invoiced dd,
    .position-products dd {
        white-space: nowrap;
        font-size: 1.125rem;
        font-weight: 700
    }
}

@media (min-width:79em) {
    .position-products {
        grid-column: span 1;
        padding-left: 4.25rem;
        border-left: 1px solid #e8e9ee;
        border-bottom-left-radius: .25rem;
        border-top-left-radius: .25rem
    }

    .position-products dt svg {
        left: 1.25rem
    }

    .position-products dt::after {
        display: none
    }
}

@media (min-width:79em) {
    .position-date {
        grid-column: span 1;
        padding-right: 1.25rem;
        border-right: 1px solid #e8e9ee;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem
    }

    .position-date dt::after {
        display: none
    }
}

@media (min-width:79em) {

    .position-comission,
    .position-drawing,
    .position-name {
        grid-column: span 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
        margin-top: 1rem;
        padding-top: 1rem;
        padding-right: 2.5rem;
        border-top: 1px solid #e8e9ee
    }

    .position-comission>dt::after,
    .position-drawing>dt::after,
    .position-name>dt::after {
        display: none
    }
}

@media (min-width:79em) and (min-width:58em) {

    .position-comission,
    .position-drawing,
    .position-name {
        margin-top: 1.25rem;
        padding-top: 1.25rem
    }
}

@media (min-width:79em) and (min-width:88em) {

    .position-comission,
    .position-drawing,
    .position-name {
        grid-row: 5
    }
}

.position-name {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e8e9ee
}

@media (min-width:58em) {
    .position-name {
        margin-top: 1.25rem;
        padding-top: 1.25rem
    }
}

.position-drawing {
    align-items: flex-start
}

@media (min-width:79em) {
    .position-drawing {
        grid-column: span 2
    }
}

.position-drawing dt::after {
    margin-right: .5rem
}

.position-drawing dd {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem
}

@media (min-width:79em) {
    .position-drawing dd {
        gap: 0 2rem
    }
}

.position-drawing a {
    font-weight: 500
}

.position-drawing a:not(:last-child) {
    position: relative
}

.position-drawing a:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -.75rem;
    bottom: 0;
    display: block;
    width: 1px;
    height: 1.25rem;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #f3f4f6
}

@media (min-width:79em) {
    .position-drawing a:not(:last-child)::after {
        right: -1rem;
        height: 1rem
    }
}

.position-note {
    grid-column: span 3;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .25em;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fef7cc
}

@media (min-width:58em) {
    .position-note {
        margin-top: 1.5rem
    }
}

@media (min-width:79em) {
    .position-note {
        grid-column: span 4
    }
}

@media (min-width:88em) {
    .position-note {
        grid-column: span 5
    }
}

.position-note dt::after {
    content: ": "
}

.position-dialog .dialog-header {
    grid-template-columns: auto 1fr auto;
    border-bottom: 1px solid #e8e9ee
}

@media (min-width:70em) {
    .position-dialog .dialog-header {
        padding: 0
    }
}

.position-dialog .dialog-title {
    grid-column: 2;
    text-align: center
}

@media (min-width:70em) {
    .position-dialog .dialog-title {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }
}

.position-dialog .dialog-close {
    grid-column: 1;
    background-image: url(../img/icons/chevron-left.svg)
}

@media (min-width:70em) {
    .position-dialog .dialog-close {
        position: absolute;
        top: 2.875rem;
        right: 2.5rem;
        background-image: url(../img/icons/x.svg)
    }
}

.position-dialog .position {
    max-width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0
}

@media (min-width:70em) {
    .position-dialog .position {
        padding: 2.5rem
    }
}

@media (min-width:70em) {
    .position-dialog .position-nav {
        margin-right: 2.5rem
    }
}

.position-dialog .position-info {
    font-size: .875rem
}

.dialog.is-position {
    min-height: 100vh
}

@media (min-width:70em) {
    .dialog.is-position {
        width: 62.5rem;
        margin-left: auto
    }

    .dialog.is-position .dialog-header {
        border-bottom: none
    }
}

@media (min-width:30em) {
    .complaint-add .dialog-content {
        display: grid;
        gap: 2rem 1rem
    }

    .complaint-add .dialog-content .form-control {
        margin-top: 0
    }
}

@media (min-width:30em) {
    .complaint-add-3-cols {
        display: grid;
        gap: 0 1rem;
        grid-template-columns: repeat(3, 1fr)
    }
}

.complaint-add-3-cols+.form-control {
    margin-top: 1.5rem
}

@media (min-width:58em) {
    .complaint-add-3-cols+.form-control {
        margin-top: 2rem
    }
}

.complaint-add .dialog-footer {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

@media (min-width:30em) {
    .complaint-add .dialog-footer.has-cancel {
        grid-template-columns: auto auto
    }
}

@media (min-width:30em) {
    .complaint-add .dialog-footer.has-cancel .form-submit {
        grid-column: 2
    }
}

.complaint-add .dialog-footer>* {
    width: 100%
}

@media (min-width:30em) {
    .complaint-add .dialog-footer>* {
        width: auto
    }
}

.complaint-add .dialog-footer .form-submit {
    min-width: 11.5rem;
    margin-top: 0
}

.complaint-add-cancel {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    color: #23272f;
    padding: .75rem 2rem
}

@media (min-width:58em) {
    .complaint-add-cancel {
        font-size: 1rem
    }
}

.complaint-add-cancel:active,
.complaint-add-cancel:focus,
.complaint-add-cancel:hover {
    background-color: #f3f4f6
}

@media (min-width:58em) {
    .complaint-add-cancel {
        padding: 1rem 2.75rem
    }
}

@media (min-width:30em) {
    .complaint-add-cancel {
        grid-column: 1;
        grid-row: 1
    }
}

.products-wrapper {
    grid-column: span 2
}

.products-header {
    margin-top: 2rem
}

@media (min-width:58em) {
    .products-header {
        margin-top: 2.5rem
    }
}

.products-header-nav form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-items: center
}

@media (min-width:64em) {
    .products-header-nav form {
        grid-template-columns: 1fr auto;
        gap: 0 3rem
    }
}

@media (min-width:73em) {
    .products-header-nav form {
        grid-template-columns: auto 1fr auto
    }
}

.products-header-nav form .form-control {
    gap: .25rem 1rem
}

.products-header-fake-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .products-header-fake-title {
        font-size: 1.5rem
    }
}

.products-header-fake-title-count {
    font-size: 1rem;
    font-weight: 500;
    color: #68748d
}

.products-header .data-table-filter {
    grid-column: 1/3;
    grid-row: 2;
    margin-top: 1.25rem
}

@media (min-width:64em) {
    .products-header .data-table-filter {
        grid-column: 1;
        grid-row: 3;
        margin-top: 1.5rem;
        align-self: end;
        max-width: 40em
    }
}

@media (min-width:73em) {
    .products-header .data-table-filter {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0
    }
}

.products-header .data-table-sort {
    grid-column: 1/3;
    grid-row: 3;
    margin-top: 1rem
}

@media (min-width:64em) {
    .products-header .data-table-sort {
        grid-column: 2;
        grid-row: 3;
        grid-template-columns: auto auto;
        align-items: center;
        margin-top: 1.5rem
    }
}

@media (min-width:73em) {
    .products-header .data-table-sort {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0
    }
}

.dialog .data-table.products tbody tr>* {
    border-top: 1px solid #e8e9ee;
    border-bottom: 1px solid #e8e9ee
}

.dialog .data-table.products tbody tr>:first-child {
    border-left: 1px solid #e8e9ee
}

.dialog .data-table.products tbody tr>:last-child {
    border-right: 1px solid #e8e9ee
}

.data-table.products td a {
    font-weight: 500;
    text-decoration: none;
    color: #ab5e0f
}

.data-table.products td button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    font-weight: 500;
    text-decoration: underline;
    background: 0 0;
    color: #ab5e0f
}

.data-table.products .progress-indicator {
    --progress-indicator-side: 1.25rem
}

@media (min-width:44.0625em) {
    .data-table.products .progress-indicator {
        --progress-indicator-side: 1.5rem
    }
}

.data-table.products .product-processed {
    font-weight: 500;
    color: #68748d
}

@media (min-width:44.0625em) {
    .data-table.products .product-processed {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }
}

@media (max-width:44em) {

    .data-table.products table,
    .data-table.products td,
    .data-table.products th {
        display: block
    }

    .data-table.products thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .data-table.products tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .data-table.products tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .data-table.products tr:is(:hover, :focus-within) td,
    .data-table.products tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .data-table.products:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .data-table.products:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .data-table.products td,
    .data-table.products th {
        padding: 0
    }

    .data-table.products td:first-child,
    .data-table.products th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .data-table.products td:last-child,
    .data-table.products th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .data-table.products th {
        font-weight: 600
    }

    .data-table.products td::before {
        font-weight: 500;
        color: #68748d
    }

    .data-table.products.has-white-bg tbody tr>* {
        border: none
    }

    .dialog .data-table.products tbody tr>* {
        border: none
    }

    .data-table.products tr {
        display: grid;
        grid-template-columns: 1fr auto;
        border: 1px solid #e8e9ee
    }

    .data-table.products td:nth-child(2) {
        grid-column: 1/3;
        margin-top: .25rem;
        color: #68748d
    }

    .data-table.products td:nth-child(2)::before {
        content: var(--i18n-products-stand, "Číslo stojanu") ": "
    }

    .data-table.products td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-left: auto
    }

    .data-table.products .progress-indicator {
        margin-right: 0
    }

    .data-table.products td:nth-child(5),
    .data-table.products td:nth-child(6) {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        grid-column: 1/3;
        margin-top: .5rem;
        font-weight: 600
    }

    .data-table.products td:nth-child(4) {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #f3f4f6
    }

    .data-table.products td:nth-child(4)::before {
        content: var(--i18n-products-batch-no, "Výrobní dávka") ": "
    }

    .data-table.products td:nth-child(5)::before {
        content: var(--i18n-products-batch-seq, "Sekvence") ": "
    }
}

.complaints-header-nav form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-items: center
}

@media (min-width:73em) {
    .complaints-header-nav form {
        grid-template-columns: auto auto auto 1fr
    }
}

@media (min-width:89em) {
    .complaints-header-nav form {
        grid-template-columns: auto 1fr auto auto
    }
}

.complaints-header-nav .form-control {
    gap: .25rem 1.5rem
}

@media (min-width:73em) {
    .complaints-header-nav .form-control {
        display: flex;
        flex-direction: column
    }
}

.complaints-header-fake-title {
    grid-column: 1/3;
    font-size: 1.5rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .complaints-header-fake-title {
        font-size: 2rem
    }
}

@media (min-width:73em) {
    .complaints-header-fake-title {
        grid-column: 1/3
    }
}

@media (min-width:89em) {
    .complaints-header-fake-title {
        grid-column: 1
    }
}

@media (min-width:73em) {
    .complaints-header-nav form::after {
        content: "";
        grid-column: span 4;
        grid-row: 2;
        width: 100%;
        height: 1px;
        margin-top: 1.75rem;
        background-color: #e8e9ee
    }
}

.complaints-header .data-table-filter {
    grid-column: 1/3;
    grid-row: 2;
    margin-top: 1.25rem
}

@media (min-width:73em) {
    .complaints-header .data-table-filter {
        grid-column: span 4;
        grid-row: 3;
        margin-top: 1.5rem;
        align-self: end;
        max-width: 40em
    }
}

@media (min-width:89em) {
    .complaints-header .data-table-filter {
        grid-column: 1/3
    }
}

.complaints-header .data-table-sort {
    grid-column: 1/3;
    margin-top: 1rem
}

@media (min-width:28em) {
    .complaints-header .data-table-sort {
        grid-column: 2
    }
}

@media (min-width:73em) {
    .complaints-header .data-table-sort {
        grid-column: 2/4;
        grid-row: 4;
        grid-template-columns: auto auto;
        align-items: center;
        margin-top: 1.5rem
    }

    .complaints-header .data-table-sort label {
        padding-left: 1rem
    }

    .complaints-header .data-table-sort .form-input {
        margin-right: auto
    }
}

@media (min-width:89em) {
    .complaints-header .data-table-sort {
        grid-column: 4;
        grid-row: 3
    }
}

.complaints.data-table .progress-indicator {
    --progress-indicator-side: 1.5rem
}

.complaints.data-table img {
    border-radius: 4px
}

@media (max-width:1600px) {
    .complaints.data-table {
        font-size: .875rem
    }

    .complaints.data-table table,
    .complaints.data-table td,
    .complaints.data-table th {
        display: block
    }

    .complaints.data-table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .complaints.data-table tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .complaints.data-table tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .complaints.data-table tr:is(:hover, :focus-within) td,
    .complaints.data-table tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .complaints.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .complaints.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .complaints.data-table td,
    .complaints.data-table th {
        padding: 0
    }

    .complaints.data-table td:first-child,
    .complaints.data-table th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .complaints.data-table td:last-child,
    .complaints.data-table th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .complaints.data-table th {
        font-weight: 600
    }

    .complaints.data-table td::before {
        font-weight: 500;
        color: #68748d
    }

    .complaints.data-table.has-white-bg tbody tr>* {
        border: none
    }

    .complaints.data-table tr {
        display: grid;
        grid-template-columns: auto auto;
        gap: 0 16px
    }

    .complaints.data-table th {
        grid-column: 1;
        grid-row: 1;
        color: #23272f
    }

    .complaints.data-table td::after {
        font-weight: 500;
        color: #68748d
    }

    .complaints.data-table td:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
        margin-left: auto;
        text-align: right;
        align-items: center;
        display: flex;
        align-items: center;
        justify-content: flex-end
    }

    .complaints.data-table td:nth-child(4) .progress-indicator {
        flex-shrink: 0
    }

    .complaints.data-table td:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6), :nth-child(7)) {
        grid-column: 1/3;
        margin-top: .25rem;
        color: #23272f
    }

    .complaints.data-table td:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6), :nth-child(7)):before {
        padding-left: 1.5rem;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .complaints.data-table td:nth-child(2) {
        color: #68748d
    }

    .complaints.data-table td:nth-child(2)::before {
        content: var(--i18n-complaints-uid, "UID") ": ";
        padding-left: 0
    }

    .complaints.data-table td:nth-child(6) {
        grid-row: 3;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #e8e9ee
    }

    .complaints.data-table td:nth-child(6)::before {
        content: var(--i18n-complaints-user, "Uživatel") ": ";
        background-image: url(../img/icons/colored/user-gray-50.svg)
    }

    .complaints.data-table td:nth-child(3)::before {
        content: var(--i18n-complaints-amount, "Počet kusů") ": ";
        background-image: url(../img/icons/colored/user-gray-50.svg)
    }

    .complaints.data-table td:nth-child(5)::before {
        content: var(--i18n-complaints-new, "Nová výroba") ": ";
        background-image: url(../img/icons/colored/settings-gray-50.svg)
    }

    .complaints.data-table td:nth-child(7)::before {
        content: var(--i18n-complaints-date, "Datum") ": ";
        background-image: url(../img/icons/colored/calendar-gray-50.svg)
    }

    .complaints.data-table .complaints-add-photos,
    .complaints.data-table .complaints-open-gallery {
        margin-top: 12px;
        padding-top: 12px
    }
}

.complaints-add-photos,
.complaints-open-gallery {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: 0;
    font-weight: 500;
    background: 0 0;
    color: #515a6d;
    cursor: pointer
}

.complaints-add-photos svg,
.complaints-open-gallery svg {
    width: 1.5rem;
    height: 1.5rem
}

.complaints-add-photos span,
.complaints-open-gallery span {
    display: inline-flex;
    align-items: flex-end;
    height: 1.5rem;
    margin-left: .125em
}

.complaints-add-photos {
    padding-right: 8px
}

.complaints-add-photos+.complaints-open-gallery {
    padding-left: 8px
}

.complaints-open-gallery {
    display: inline-block;
    align-items: center
}

.complaint {
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center
}

@media (min-width:58em) {
    .complaint {
        padding: 1.5rem
    }
}

.complaint-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .complaint-title {
        font-size: 1.5rem
    }
}

.complaint-info {
    grid-column: 1/3;
    margin-top: 4px;
    font-size: .875rem;
    font-weight: 500;
    color: #68748d
}

@media (min-width:640px) {
    .complaint-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px
    }
}

@media (min-width:58em) {
    .complaint-info {
        font-size: 1rem
    }
}

.complaint-info div:nth-child(-n+4) {
    margin-top: 8px
}

@media (min-width:800px) {
    .complaint-info div:nth-child(-n+4) {
        display: flex;
        flex-wrap: wrap;
        gap: .5em
    }
}

.complaint-info div:nth-child(-n+4) dt::after {
    content: ":"
}

.complaint-info div:nth-child(-n+4) dd {
    font-weight: 600;
    color: #23272f
}

.complaint-info div:nth-child(n+5) {
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px
}

@media (min-width:58em) {
    .complaint-info div:nth-child(n+5) {
        gap: 16px
    }
}

@media (min-width:920px) {
    .complaint-info div:nth-child(n+5) {
        grid-column: span 1
    }
}

.complaint-info div:nth-child(n+5) dt {
    color: #23272f
}

.complaint-info div:nth-child(n+5) dd {
    flex-grow: 1;
    min-height: calc(24px + 4.5em);
    padding: 12px 16px;
    border: 1px solid #c4c9d4;
    border-radius: 4px;
    color: #23272f
}

.complaint-dialog .dialog-header {
    grid-template-columns: auto 1fr auto;
    border-bottom: 1px solid #e8e9ee
}

@media (min-width:90em) {
    .complaint-dialog .dialog-header {
        padding: 0
    }
}

.complaint-dialog .dialog-title {
    grid-column: 2;
    text-align: center
}

@media (min-width:90em) {
    .complaint-dialog .dialog-title {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }
}

.complaint-dialog .dialog-close {
    grid-column: 1;
    background-image: url(../img/icons/chevron-left.svg)
}

@media (min-width:90em) {
    .complaint-dialog .dialog-close {
        position: absolute;
        top: 2.875rem;
        right: 2.5rem;
        background-image: url(../img/icons/x.svg)
    }
}

.complaint-dialog .complaint {
    max-width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0
}

@media (min-width:90em) {
    .complaint-dialog .complaint {
        padding: 2.5rem
    }
}

.complaint-dialog .complaint-info {
    font-size: .875rem
}

.complaint-dialog .archive-wrapper {
    grid-column: 1/3;
    margin-top: 31px;
    border-top: 1px solid #e8e9ee
}

.complaint-dialog .archive-header {
    margin-top: 24px
}

@media (min-width:58em) {
    .complaint-dialog .archive-header {
        margin-top: 32px
    }
}

.complaint-dialog .archive-header-nav form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
    align-items: center
}

@media (min-width:680px) {
    .complaint-dialog .archive-header-nav form {
        grid-template-columns: 1fr auto
    }
}

.complaint-dialog .archive-header-nav form .form-control {
    gap: .25rem 1rem
}

.complaint-dialog .archive-header-fake-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .complaint-dialog .archive-header-fake-title {
        font-size: 1.5rem
    }
}

.complaint-dialog .archive-header .data-table-filter {
    margin-top: 16px;
    align-self: end
}

@media (min-width:680px) {
    .complaint-dialog .archive-header .data-table-filter {
        grid-column: 1/3;
        max-width: 40em;
        margin-top: 0
    }
}

.complaint-dialog .archive-header .data-table-sort {
    margin-top: 16px
}

@media (min-width:680px) {
    .complaint-dialog .archive-header .data-table-sort {
        grid-column: 3;
        margin-top: 0
    }
}

.dialog.is-complaint {
    min-height: 100vh
}

@media (min-width:90em) {
    .dialog.is-complaint {
        width: 80rem;
        margin-left: auto
    }

    .dialog.is-complaint .dialog-header {
        border-bottom: none
    }
}

.dialog:has(.complaints-add-photos-dialog) {
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem
}

@media (min-width:38.5em) {
    .complaints-add-photos-dialog {
        max-width: 36rem;
        margin-right: auto;
        margin-left: auto;
        border-radius: .5rem;
        background-color: #fff
    }
}

.complaints-add-photos-dialog .dialog-footer {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

@media (min-width:30em) {
    .complaints-add-photos-dialog .dialog-footer.has-cancel {
        grid-template-columns: auto auto
    }
}

@media (min-width:30em) {
    .complaints-add-photos-dialog .dialog-footer.has-cancel .form-submit {
        grid-column: 2
    }
}

.complaints-add-photos-dialog .dialog-footer>* {
    width: 100%
}

@media (min-width:30em) {
    .complaints-add-photos-dialog .dialog-footer>* {
        width: auto
    }
}

.complaints-add-photos-dialog .dialog-footer .form-submit {
    min-width: 11.5rem;
    margin-top: 0
}

.complaints-add-photos-dialog-cancel {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    color: #23272f;
    padding: .75rem 2rem
}

@media (min-width:58em) {
    .complaints-add-photos-dialog-cancel {
        font-size: 1rem
    }
}

.complaints-add-photos-dialog-cancel:active,
.complaints-add-photos-dialog-cancel:focus,
.complaints-add-photos-dialog-cancel:hover {
    background-color: #f3f4f6
}

@media (min-width:58em) {
    .complaints-add-photos-dialog-cancel {
        padding: 1rem 2.75rem
    }
}

@media (min-width:30em) {
    .complaints-add-photos-dialog-cancel {
        grid-column: 1;
        grid-row: 1
    }
}

.dialog-modal:not(.is-fullscreen) .dialog:has(.complaints-photos-dialog) {
    overflow-y: auto;
    max-width: 100%;
    max-height: 90vh;
    width: 1344px;
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem;
    padding-top: 0;
    padding-bottom: 0
}

@media (min-width:38.5em) {
    .dialog-modal:not(.is-fullscreen) .dialog:has(.complaints-photos-dialog) {
        max-height: calc(100vh - 2.5rem);
        padding-right: 1.25rem;
        padding-left: 1.25rem
    }
}

@media (min-width:38.5em) {
    .complaints-photos-dialog {
        margin-right: auto;
        margin-left: auto;
        border-radius: .5rem;
        background-color: #fff
    }
}

.complaints-photos-dialog .dialog-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 2.25rem;
    border-bottom: 1px solid #e8e9ee;
    background-color: #fff
}

@media (min-width:58em) {
    .complaints-photos-dialog .dialog-header {
        padding-top: 3.25rem
    }
}

.complaints-photos-dialog .dialog-body {
    max-height: 100%;
    padding-top: 1.25rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem
}

.complaints-photos-dialog-carousel .embla-arrows-wrapper {
    position: relative
}

.complaints-photos-dialog-carousel .embla-thumbs__viewport,
.complaints-photos-dialog-carousel .embla__viewport {
    overflow: hidden
}

.complaints-photos-dialog-carousel .embla__container {
    touch-action: pan-y pinch-zoom;
    display: flex;
    padding-left: 0;
    list-style: none
}

.complaints-photos-dialog-carousel .embla__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    padding-right: 32px;
    padding-left: 32px
}

.complaints-photos-dialog-carousel .embla__slide img {
    max-height: 60vh;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    border-radius: 8px
}

.complaints-photos-dialog-carousel .embla__slide .complaints-photos-remove {
    bottom: 16px;
    right: 16px
}

.complaints-photos-dialog-carousel .embla__next,
.complaints-photos-dialog-carousel .embla__prev {
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0;
    border: 0;
    background: 0 0
}

.complaints-photos-dialog-carousel .embla__prev {
    left: 0
}

.complaints-photos-dialog-carousel .embla__next {
    right: 0
}

.complaints-photos-dialog-carousel .embla-thumbs {
    --thumbs-slide-spacing: 16px;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: #fff
}

.complaints-photos-dialog-carousel .embla-thumbs__container {
    display: flex;
    margin-left: calc(var(--thumbs-slide-spacing) * -1)
}

.complaints-photos-dialog-carousel .embla-thumbs__slide {
    position: relative;
    flex: 0 0 calc(72px + var(--thumbs-slide-spacing));
    min-width: 0;
    padding-left: var(--thumbs-slide-spacing)
}

@media (min-width:58em) {
    .complaints-photos-dialog-carousel .embla-thumbs__slide {
        flex-basis: calc(104px + var(--thumbs-slide-spacing))
    }
}

.complaints-photos-dialog-carousel .embla-thumbs__slide img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 72px;
    height: 72px
}

@media (min-width:58em) {
    .complaints-photos-dialog-carousel .embla-thumbs__slide img {
        width: 104px;
        height: 104px
    }
}

.complaints-photos-dialog-carousel .embla-thumbs__slide__control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    padding: 0;
    border: 1px solid #c4c9d4;
    border-radius: 8px;
    background: 0 0
}

@-webkit-keyframes complaints-photos-remove-processing {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(90deg)
    }
}

@keyframes complaints-photos-remove-processing {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(90deg)
    }
}

.complaints-photos-remove {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 8px;
    border: 2px solid #23272f;
    border-radius: 4px;
    background: #fff;
    color: #b71930
}

.complaints-photos-remove svg {
    width: 1.25rem;
    height: 1.25rem
}

.complaints-photos-remove path {
    stroke-width: 3px;
    stroke: currentColor
}

.complaints-photos-remove.is-processing svg {
    -webkit-animation: complaints-photos-remove-processing .25s infinite linear;
    animation: complaints-photos-remove-processing .25s infinite linear
}

.offers-header-nav form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-items: center
}

@media (min-width:64em) {
    .offers-header-nav form {
        grid-template-columns: auto 1fr auto;
        gap: 0 3.5rem
    }
}

.offers-header-nav form .form-control {
    gap: .25rem 1rem
}

.offers-header-fake-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .offers-header-fake-title {
        font-size: 2rem
    }
}

@media (min-width:64em) {
    .offers-header-nav form::after {
        content: "";
        grid-column: 1/4;
        grid-row: 2;
        width: 100%;
        height: 1px;
        margin-top: 1.75rem;
        background-color: #e8e9ee
    }
}

.offers-header .data-table-filter {
    grid-column: 1/3;
    grid-row: 2;
    margin-top: 1.25rem
}

@media (min-width:64em) {
    .offers-header .data-table-filter {
        grid-row: 3;
        margin-top: 1.5rem;
        align-self: end;
        max-width: 40em
    }
}

.offers-header .data-table-sort {
    grid-column: 1/3;
    grid-row: 3;
    margin-top: 1rem
}

@media (min-width:64em) {
    .offers-header .data-table-sort {
        grid-column: 3;
        grid-row: 3;
        grid-template-columns: auto auto;
        align-items: center;
        margin-top: 1.5rem
    }
}

@media (max-width:76em) {

    .offers.data-table table,
    .offers.data-table td,
    .offers.data-table th {
        display: block
    }

    .offers.data-table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .offers.data-table tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .offers.data-table tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .offers.data-table tr:is(:hover, :focus-within) td,
    .offers.data-table tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .offers.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .offers.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .offers.data-table td,
    .offers.data-table th {
        padding: 0
    }

    .offers.data-table td:first-child,
    .offers.data-table th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .offers.data-table td:last-child,
    .offers.data-table th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .offers.data-table th {
        font-weight: 600
    }

    .offers.data-table td::before {
        font-weight: 500;
        color: #68748d
    }

    .offers.data-table.has-white-bg tbody tr>* {
        border: none
    }

    .offers.data-table tr {
        display: grid;
        grid-template-columns: auto auto
    }

    .offers.data-table th {
        grid-column: 1;
        color: #23272f
    }

    .offers.data-table td:nth-child(2) {
        grid-column: 1/3;
        margin-top: .25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e8e9ee;
        color: #68748d
    }

    .offers.data-table td:nth-child(2)::before {
        content: var(--i18n-offers-customer, "Zákaznický název") ": "
    }

    .offers.data-table td:nth-child(3),
    .offers.data-table td:nth-child(4),
    .offers.data-table td:nth-child(6) {
        grid-column: 1/3;
        margin-top: .5rem;
        font-weight: 600
    }

    .offers.data-table td:nth-child(3)::before,
    .offers.data-table td:nth-child(4)::before,
    .offers.data-table td:nth-child(6)::before {
        padding-left: 1.5rem;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .offers.data-table td:nth-child(3)::before {
        content: var(--i18n-offers-products, "Poečt kusů") ": ";
        background-image: url(../img/icons/colored/box-gray-50.svg)
    }

    .offers.data-table td:nth-child(4)::before {
        content: var(--i18n-offers-date, "Datum nabídky") ": ";
        background-image: url(../img/icons/colored/calendar-gray-50.svg)
    }

    .offers.data-table td:nth-child(5) {
        grid-column: 2;
        grid-row: 1;
        margin-left: auto
    }

    .offers.data-table td:nth-child(6)::before {
        content: var(--i18n-offers-price, "Cena") ": ";
        background-image: url(../img/icons/colored/shopping-cart-gray-50.svg)
    }
}

.offer {
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: .75rem
}

@media (min-width:58em) {
    .offer {
        padding: 1.5rem
    }
}

@media (min-width:83em) {
    .offer {
        grid-template-columns: repeat(4, auto)
    }
}

@media (min-width:24em) {
    .offer {
        font-size: .875rem
    }
}

@media (min-width:58em) {
    .offer {
        font-size: 1rem
    }
}

.dialog .offer {
    align-items: center
}

@media (min-width:32em) {
    .dialog .offer {
        grid-template-columns: 1fr auto auto
    }
}

@media (min-width:83em) {
    .dialog .offer {
        grid-template-columns: 1fr 1fr 1fr auto
    }
}

.offer-title {
    grid-column: span 2;
    font-size: 1.125rem;
    font-weight: 700;
    color: #23272f
}

.offer:has(.archive-open) .offer-title {
    grid-column: 1
}

@media (min-width:83em) {
    .offer-title {
        grid-column: span 3
    }
}

@media (min-width:58em) {
    .offer-title {
        font-size: 1.5rem
    }
}

.offer-nav {
    display: flex;
    gap: .25rem
}

@media (min-width:32em) {
    .offer-nav {
        margin-right: 1rem
    }
}

@media (min-width:83em) {
    .offer-nav {
        grid-column: 4
    }
}

@media (min-width:83em) {
    .offer:has(.archive-open) .offer-nav {
        grid-column: 3;
        margin-left: auto
    }
}

.offer-nav a {
    padding: .25rem .5rem;
    text-decoration: none
}

.offer-nav svg {
    width: 1.5rem;
    height: 1.5rem
}

.offer-nav path {
    stroke: #23272f
}

.offer-archive {
    grid-column: -2;
    grid-row: 1/3;
    display: flex
}

.offer-customer {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    margin-top: .25rem;
    font-weight: 500;
    color: #68748d
}

@media (min-width:83em) {
    .offer-customer {
        grid-column: span 3
    }
}

.offer-customer strong {
    font-weight: 600;
    color: #68748d
}

.dialog .offer-customer {
    grid-column: span 2
}

.offer-info {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr;
    font-weight: 500;
    color: #68748d
}

@media (min-width:83em) {
    .offer-info {
        grid-template-columns: subgrid;
        grid-column: span 4
    }
}

.offer-info dt {
    display: inline-flex;
    align-items: center
}

.offer-info dt svg {
    width: 1rem;
    height: 1rem;
    margin-right: .5rem
}

.offer-info dt path {
    stroke: #68748d
}

.offer-info dt::after {
    content: ": ";
    margin-right: .5em
}

@media (min-width:83em) {
    .offer-info dt::after {
        content: ""
    }
}

.offer-info dd {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-weight: 600;
    color: #23272f
}

.offer-date,
.offer-doc,
.offer-price,
.offer-products {
    display: inline-flex;
    align-items: center
}

.offer-date,
.offer-doc,
.offer-price,
.offer-products {
    margin-top: .5rem
}

@media (min-width:83em) {

    .offer-date,
    .offer-doc,
    .offer-price,
    .offer-products {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-top: 1.25rem;
        padding: 1.25rem 1.25rem 1.25rem 3rem;
        border-top: 1px solid #e8e9ee;
        border-bottom: 1px solid #e8e9ee
    }
}

@media (min-width:83em) and (min-width:58em) {

    .offer-date,
    .offer-doc,
    .offer-price,
    .offer-products {
        margin-top: 1.25rem
    }
}

@media (min-width:83em) {

    .offer-date dt,
    .offer-doc dt,
    .offer-price dt,
    .offer-products dt {
        white-space: nowrap
    }
}

@media (min-width:83em) {

    .offer-date dt svg,
    .offer-doc dt svg,
    .offer-price dt svg,
    .offer-products dt svg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2rem;
        height: 2rem;
        margin-top: auto;
        margin-bottom: auto;
        padding: .5rem;
        border-radius: 1rem;
        background-color: #f3f4f6
    }
}

@media (min-width:83em) {

    .offer-date dd,
    .offer-doc dd,
    .offer-price dd,
    .offer-products dd {
        white-space: nowrap;
        font-size: 1.125rem;
        font-weight: 700
    }
}

@media (min-width:83em) {
    .offer-products {
        padding-left: 4.5rem;
        border-left: 1px solid #e8e9ee;
        border-bottom-left-radius: .25rem;
        border-top-left-radius: .25rem
    }

    .offer-products dt svg {
        left: 1.5rem
    }
}

@media (min-width:83em) {
    .offer-info>div:last-child {
        padding-right: 4.5rem;
        border-right: 1px solid #e8e9ee;
        border-bottom-right-radius: .25rem;
        border-top-right-radius: .25rem
    }
}

.offer-dialog .dialog-header {
    grid-template-columns: auto 1fr auto;
    border-bottom: 1px solid #e8e9ee
}

@media (min-width:90em) {
    .offer-dialog .dialog-header {
        padding: 0
    }
}

.offer-dialog .dialog-title {
    grid-column: 2;
    text-align: center
}

@media (min-width:90em) {
    .offer-dialog .dialog-title {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }
}

.offer-dialog .dialog-close {
    grid-column: 1;
    background-image: url(../img/icons/chevron-left.svg)
}

@media (min-width:90em) {
    .offer-dialog .dialog-close {
        position: absolute;
        top: 2.875rem;
        right: 2.5rem;
        background-image: url(../img/icons/x.svg)
    }
}

.offer-dialog .offer {
    max-width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    font-size: .875rem
}

@media (min-width:90em) {
    .offer-dialog .offer {
        padding: 2.5rem
    }
}

@media (min-width:83em) {
    .offer-dialog .offer-title {
        grid-column: span 2
    }
}

.offer-dialog .offer-archive {
    grid-column: span 2;
    grid-row: 2
}

@media (min-width:32em) {
    .offer-dialog .offer-archive {
        grid-column: 3;
        grid-row: 1
    }
}

@media (min-width:90em) {
    .offer-dialog .offer-archive {
        grid-column: 4;
        margin-right: 2.5rem
    }
}

.offer-dialog .offer-archive button {
    margin-block: .25rem;
    margin-left: 0
}

@media (min-width:32em) {

    .offer-dialog .offer-info,
    .offer-dialog .positions-wrapper {
        grid-column: span 3
    }
}

@media (min-width:83em) {

    .offer-dialog .offer-info,
    .offer-dialog .positions-wrapper {
        grid-column: span 4
    }
}

.dialog.is-offer {
    min-height: 100vh
}

@media (min-width:90em) {
    .dialog.is-offer {
        width: 83rem;
        margin-left: auto
    }

    .dialog.is-offer .dialog-header {
        border-bottom: none
    }
}

.documents-header-nav form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
    align-items: center
}

@media (min-width:73em) {
    .documents-header-nav form {
        grid-template-columns: auto 1fr auto;
        gap: 0 3.5rem
    }
}

.documents-header-nav form .form-control {
    gap: .25rem 1.5rem
}

.documents-header-fake-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .documents-header-fake-title {
        font-size: 2rem
    }
}

@media (min-width:73em) {
    .documents-header-nav form::after {
        content: "";
        grid-column: 1/4;
        grid-row: 2;
        width: 100%;
        height: 1px;
        margin-top: 1.75rem;
        background-color: #e8e9ee
    }
}

.documents-header .data-table-filter {
    margin-top: 1.25rem
}

@media (min-width:73em) {
    .documents-header .data-table-filter {
        grid-column: 1/3;
        grid-row: 3;
        margin-top: 1.5rem;
        align-self: end;
        max-width: 40em
    }
}

.documents-header .data-table-sort {
    margin-top: 1rem
}

@media (min-width:73em) {
    .documents-header .data-table-sort {
        grid-column: 3;
        grid-row: 3;
        grid-template-columns: auto auto;
        align-items: center;
        margin-top: 1.5rem
    }
}

.invoices.data-table .progress-indicator {
    --progress-indicator-side: 1.25rem
}

.invoices.data-table a {
    color: #ab5e0f
}

@media (max-width:85em) {

    .invoices.data-table table,
    .invoices.data-table td,
    .invoices.data-table th {
        display: block
    }

    .invoices.data-table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .invoices.data-table tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .invoices.data-table tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .invoices.data-table tr:is(:hover, :focus-within) td,
    .invoices.data-table tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .invoices.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .invoices.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .invoices.data-table td,
    .invoices.data-table th {
        padding: 0
    }

    .invoices.data-table td:first-child,
    .invoices.data-table th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .invoices.data-table td:last-child,
    .invoices.data-table th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .invoices.data-table th {
        font-weight: 600
    }

    .invoices.data-table td::before {
        font-weight: 500;
        color: #68748d
    }

    .invoices.data-table.has-white-bg tbody tr>* {
        border: none
    }

    .invoices.data-table tr {
        display: grid;
        grid-template-columns: auto auto 1fr
    }

    .invoices.data-table td::after {
        font-weight: 500;
        color: #68748d
    }

    .invoices.data-table td:nth-child(2) {
        grid-column: 1/4;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e8e9ee;
        color: #68748d
    }

    .invoices.data-table td:nth-child(2)::before {
        content: var(--i18n-invoices-date, "Vystavení") ": ";
        padding-left: 1.5rem;
        background-image: url(../img/icons/colored/calendar-gray-50.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .invoices.data-table td:nth-child(3) {
        grid-column: 1/4;
        margin-top: .5rem;
        color: #68748d
    }

    .invoices.data-table td:nth-child(3)::before {
        content: var(--i18n-invoices-due, "Splatnost") ": ";
        padding-left: 1.5rem;
        background-image: url(../img/icons/colored/calendar-gray-50.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .invoices.data-table td:nth-child(4) {
        grid-column: 1/4;
        margin-top: .5rem;
        color: #68748d
    }

    .invoices.data-table td:nth-child(4)::before {
        content: var(--i18n-invoices-price, "Cena") ": ";
        padding-left: 1.5rem;
        background-image: url(../img/icons/colored/box-gray-50.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .invoices.data-table td:nth-child(5) {
        grid-column: 2/4;
        grid-row: 1;
        margin-left: auto
    }

    .invoices.data-table td:nth-child(n+6) {
        margin-top: 1.5rem;
        margin-right: 1.5rem
    }

    .invoices.data-table td:nth-child(8) {
        margin-right: auto
    }
}

@media (max-width:38.4375em) {
    .invoices-payment-dialog {
        min-height: 100vh
    }
}

.invoices-payment-dialog .dialog-title {
    grid-row: 1
}

.invoices-payment-dialog .dialog-close {
    margin-left: auto
}

.invoices-payment-dialog .dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem
}

.invoices-payment-no {
    align-self: flex-start;
    font-weight: 500;
    color: #68748d
}

.invoices-payment-no strong {
    font-weight: 700;
    color: #23272f
}

.transport-stands.data-table a {
    color: #ab5e0f
}

.transport-stands.data-table div:has(.progress-indicator) {
    display: inline-flex;
    align-items: baseline
}

.transport-stands.data-table .progress-indicator {
    --progress-indicator-side: 1.25rem;
    flex-shrink: 0
}

.transport-stands.data-table tr:hover .progress-indicator {
    background-color: #f8cb02 !important
}

.transport-stands.data-table td:nth-child(6) {
    overflow: hidden;
    white-space: nowrap;
    max-width: 10em;
    text-overflow: ellipsis
}

@media (max-width:1490px) {

    .transport-stands.data-table table,
    .transport-stands.data-table td,
    .transport-stands.data-table th {
        display: block
    }

    .transport-stands.data-table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .transport-stands.data-table tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .transport-stands.data-table tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .transport-stands.data-table tr:is(:hover, :focus-within) td,
    .transport-stands.data-table tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .transport-stands.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .transport-stands.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .transport-stands.data-table td,
    .transport-stands.data-table th {
        padding: 0
    }

    .transport-stands.data-table td:first-child,
    .transport-stands.data-table th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .transport-stands.data-table td:last-child,
    .transport-stands.data-table th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .transport-stands.data-table th {
        font-weight: 600
    }

    .transport-stands.data-table td::before {
        font-weight: 500;
        color: #68748d
    }

    .transport-stands.data-table.has-white-bg tbody tr>* {
        border: none
    }

    .transport-stands.data-table tr {
        display: grid;
        grid-template-columns: auto 1fr
    }

    .transport-stands.data-table td::after {
        font-weight: 500;
        color: #68748d
    }

    .transport-stands.data-table td:nth-child(2) {
        margin-left: auto;
        padding-left: 16px
    }

    .transport-stands.data-table td:nth-child(3),
    .transport-stands.data-table td:nth-child(4),
    .transport-stands.data-table td:nth-child(5),
    .transport-stands.data-table td:nth-child(6),
    .transport-stands.data-table td:nth-child(7) {
        grid-column: 1/3;
        margin-top: .5rem;
        color: #68748d
    }

    .transport-stands.data-table td:nth-child(3)::before,
    .transport-stands.data-table td:nth-child(4)::before,
    .transport-stands.data-table td:nth-child(5)::before,
    .transport-stands.data-table td:nth-child(6)::before,
    .transport-stands.data-table td:nth-child(7)::before {
        padding-left: 1.5rem;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .transport-stands.data-table td:nth-child(3) {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e8e9ee
    }

    .transport-stands.data-table td:nth-child(3)::before {
        content: var(--i18n-transport-stands-type, "Druh") ": ";
        background-image: url(../img/icons/colored/calendar-gray-50.svg)
    }

    .transport-stands.data-table td:nth-child(4)::before {
        content: var(--i18n-transport-stands-date, "Datum zapůjčení") ": ";
        background-image: url(../img/icons/colored/calendar-gray-50.svg)
    }

    .transport-stands.data-table td:nth-child(5)::before {
        content: var(--i18n-transport-stands-document-no, "Č. zápůjčního listu") ": ";
        background-image: url(../img/icons/colored/box-gray-50.svg)
    }

    .transport-stands.data-table td:nth-child(6) {
        max-width: none
    }

    .transport-stands.data-table td:nth-child(6)::before {
        content: var(--i18n-transport-stands-address, "Adresa") ": ";
        background-image: url(../img/icons/colored/box-gray-50.svg)
    }

    .transport-stands.data-table td:nth-child(7)::before {
        content: var(--i18n-transport-stands-comission, "Komise") ": ";
        background-image: url(../img/icons/colored/box-gray-50.svg)
    }

    .transport-stands.data-table td:nth-child(n+8) {
        margin-top: 1.5rem;
        margin-right: 1.5rem
    }

    .transport-stands.data-table td:nth-child(9) {
        margin-right: auto
    }
}

@media (max-width:34em) {

    .delivery-notes.data-table table,
    .delivery-notes.data-table td,
    .delivery-notes.data-table th {
        display: block
    }

    .delivery-notes.data-table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .delivery-notes.data-table tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .delivery-notes.data-table tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .delivery-notes.data-table tr:is(:hover, :focus-within) td,
    .delivery-notes.data-table tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .delivery-notes.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .delivery-notes.data-table:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .delivery-notes.data-table td,
    .delivery-notes.data-table th {
        padding: 0
    }

    .delivery-notes.data-table td:first-child,
    .delivery-notes.data-table th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .delivery-notes.data-table td:last-child,
    .delivery-notes.data-table th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .delivery-notes.data-table th {
        font-weight: 600
    }

    .delivery-notes.data-table td::before {
        font-weight: 500;
        color: #68748d
    }

    .delivery-notes.data-table.has-white-bg tbody tr>* {
        border: none
    }

    .delivery-notes.data-table tr {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 1rem 1.5rem
    }

    .delivery-notes.data-table td:nth-child(2) {
        grid-column: span 3
    }

    .delivery-notes.data-table td:nth-child(2)::before {
        content: var(--i18n-delivery-notes-date, "Datum vystavení") ": ";
        padding-left: 1.5rem;
        background-image: url(../img/icons/colored/calendar-gray-50.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 1rem
    }

    .delivery-notes.data-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 1
    }

    .delivery-notes.data-table td:nth-child(4) {
        grid-column: 3;
        grid-row: 1
    }
}

.settings-nav {
    overflow-x: auto;
    margin-top: .75rem;
    margin-right: -1.25rem;
    margin-left: -1.25rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    border-bottom: 1px solid #e8e9ee;
    font-size: .875rem;
    font-weight: 500;
    background-color: #fff
}

@media (min-width:58em) {
    .settings-nav {
        font-size: 1rem
    }
}

@media (min-width:60em) {
    .settings-nav {
        overflow: initial;
        margin-top: 2rem;
        margin-right: 0;
        margin-left: 0;
        padding-right: 3rem;
        padding-left: 3rem;
        border-top-right-radius: .25rem;
        border-top-left-radius: .25rem
    }
}

.settings-nav ul {
    display: flex;
    gap: 0 2rem;
    padding-left: 0;
    list-style: none
}

@media (min-width:58em) {
    .settings-nav ul {
        gap: 0 2.5rem
    }
}

@media (min-width:60em) {
    .settings-nav ul {
        flex-wrap: wrap
    }
}

.settings-nav li[aria-current=page] a {
    border-bottom-color: #ab5e0f;
    color: #ab5e0f
}

.settings-nav li:last-child {
    padding-right: 1.25rem
}

.settings-nav a {
    display: inline-block;
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid #fff;
    text-decoration: none;
    color: inherit;
    white-space: nowrap
}

@media (min-width:58em) {
    .settings-nav a {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }
}

.settings {
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-size: .875rem;
    background-color: #fff
}

@media (min-width:58em) {
    .settings {
        font-size: 1rem
    }
}

@media (min-width:60em) {
    .settings {
        padding: 3rem;
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: .25rem
    }
}

@media (min-width:85em) {
    .settings.is-password {
        display: flex;
        gap: 4rem
    }
}

.settings-form {
    flex-shrink: 0;
    flex-grow: 1;
    max-width: 31rem
}

@media (min-width:33.5em) {
    .settings-form.is-basic-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.5rem
    }

    .settings-form.is-basic-info .form-control:nth-child(1),
    .settings-form.is-basic-info .form-control:nth-child(4) {
        grid-column: span 2
    }
}

.settings-password {
    flex-shrink: 1;
    align-self: flex-start;
    position: relative;
    max-width: 25em;
    margin-top: 4rem;
    padding: 1.5rem;
    border-radius: .25rem;
    color: #515a6d;
    background-color: #f9f9fa
}

@media (min-width:58em) {
    .settings-password {
        padding: 2.5rem
    }
}

@media (min-width:85em) {
    .settings-password {
        margin-top: 0;
        margin-left: 3.75rem
    }
}

.settings-password::before {
    content: "";
    position: absolute;
    top: -2rem;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #f3f4f6
}

@media (min-width:85em) {
    .settings-password::before {
        top: 0;
        right: auto;
        bottom: 0;
        left: -3.75rem;
        width: 1px;
        height: 100%
    }
}

.settings-password h2 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .settings-password h2 {
        gap: .75rem
    }
}

.settings-password p {
    margin-top: .75rem
}

.settings-password svg {
    width: 1em;
    height: 1em
}

.settings-password path {
    stroke: currentColor
}

.settings-password h3 {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .settings-password h3 {
        margin-top: 2rem
    }
}

.settings-password ul {
    margin-top: 1rem;
    padding-left: 1em;
    list-style: outside
}

.login-subtitle {
    font-size: 1.125rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .login-subtitle {
        font-size: 1.5rem
    }
}

.login-subtitle:not(:first-child) {
    margin-top: 2.5rem
}

@media (min-width:58em) {
    .login-subtitle:not(:first-child) {
        margin-top: 3rem
    }
}

.login {
    gap: .5rem;
    max-width: 100%;
    width: 56rem;
    padding: 1rem;
    border: 1px solid #e8e9ee;
    border-radius: .25rem;
    color: #68748d;
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem
}

@media (min-width:58em) {
    .login {
        padding: 1.5rem
    }
}

@media (min-width:52em) {
    .login {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem 3.25rem
    }
}

@media (min-width:52em) and (min-width:58em) {
    .login {
        padding-right: 3.25rem
    }
}

.login div {
    display: inline-flex;
    gap: .25rem;
    align-items: center
}

@media (min-width:52em) {
    .login div {
        flex-direction: column;
        align-items: flex-start
    }
}

@media (max-width:52.0625em) {
    .login div:last-child {
        margin-top: .25rem;
        padding-top: .75rem;
        border-top: 1px solid #e8e9ee
    }
}

.login div:last-child dt::after {
    content: " *"
}

.login dt {
    font-weight: 500
}

@media (max-width:52.0625em) {
    .login dt::after {
        content: ": "
    }
}

.login dd {
    font-weight: 600;
    color: #23272f
}

@media (min-width:52em) {
    .login dd {
        font-weight: 500
    }
}

.login a {
    font-weight: 500;
    color: #ab5e0f
}

.login-note {
    margin-top: 1rem;
    font-weight: 500;
    color: #515a6d
}

.login-note::before {
    content: "* "
}

.data-table.logins {
    max-width: 56rem;
    margin-top: 1.5rem
}

@media (min-width:58em) {
    .data-table.logins {
        margin-top: 2rem
    }
}

@media (max-width:75em) {

    .data-table.logins table,
    .data-table.logins td,
    .data-table.logins th {
        display: block
    }

    .data-table.logins thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .data-table.logins tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .data-table.logins tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .data-table.logins tr:is(:hover, :focus-within) td,
    .data-table.logins tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .data-table.logins:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .data-table.logins:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .data-table.logins td,
    .data-table.logins th {
        padding: 0
    }

    .data-table.logins td:first-child,
    .data-table.logins th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .data-table.logins td:last-child,
    .data-table.logins th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .data-table.logins th {
        font-weight: 600
    }

    .data-table.logins td::before {
        font-weight: 500;
        color: #68748d
    }

    .data-table.logins.has-white-bg tbody tr>* {
        border: none
    }

    .data-table.logins tr {
        gap: .5rem;
        max-width: 100%;
        width: 56rem;
        padding: 1rem;
        border: 1px solid #e8e9ee;
        border-radius: .25rem;
        color: #68748d;
        display: grid;
        grid-template-columns: 1fr auto
    }
}

@media (max-width:75em) and (min-width:58em) {
    .data-table.logins tr {
        padding: 1.5rem
    }
}

@media (max-width:75em) {
    .data-table.logins th {
        grid-column: 2;
        font-weight: 500;
        color: #68748d
    }

    .data-table.logins th::before {
        font-weight: 500;
        color: #68748d;
        content: "# "
    }
}

@media (max-width:75em) {
    .data-table.logins td {
        grid-column: 1;
        font-weight: 600;
        color: #23272f
    }

    .data-table.logins td:nth-child(2) {
        grid-row: 1
    }
}

@media (max-width:75em) {
    .data-table.logins td:nth-child(2)::before {
        content: var(--i18n-logins-ip-address, "IP adresa") ": "
    }
}

@media (max-width:75em) {
    .data-table.logins td:nth-child(3)::before {
        content: var(--i18n-logins-location, "Město") ": "
    }
}

@media (max-width:75em) {
    .data-table.logins td:nth-child(4)::before {
        content: var(--i18n-logins-device, "Zařízení") ": "
    }
}

@media (max-width:75em) {
    .data-table.logins td:nth-child(5)::before {
        content: var(--i18n-logins-date, "Datum") ": "
    }
}

@media (max-width:75em) {
    .data-table.logins td:nth-child(6)::before {
        content: var(--i18n-logins-logout, "Odhlášení") ": "
    }
}

.data-table.logins td a {
    font-weight: 500;
    color: #ab5e0f
}

.organizations {
    max-width: 45.5rem;
    margin-left: auto;
    margin-right: auto
}

.organizations-title {
    font-size: 1.5rem;
    color: #23272f
}

@media (min-width:58em) {
    .organizations-title {
        font-size: 2rem
    }
}

.organizations-subtitle {
    margin-top: .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: #68748d
}

@media (min-width:58em) {
    .organizations-subtitle {
        margin-top: 1rem;
        font-size: 1rem
    }
}

.organizations-nav {
    margin-top: 1.5rem
}

@media (min-width:58em) {
    .organizations-nav {
        margin-top: 2rem
    }
}

.organizations-nav ol {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    margin-right: -.625rem;
    margin-left: -.625rem;
    padding-top: .75rem;
    padding-left: 0;
    list-style: none
}

@media (min-width:58em) {
    .organizations-nav ol {
        padding-top: 1rem
    }
}

.organizations-nav ol::before {
    content: "";
    position: absolute;
    top: 0;
    right: .625rem;
    left: .625rem;
    display: block;
    width: calc(100% - 1.25rem);
    height: 1px;
    background-color: #e8e9ee
}

.organizations-nav li {
    color: #c4c9d4
}

.organizations-nav li::marker {
    content: ""
}

.organizations-nav a,
.organizations-nav li.is-empty {
    display: inline-block;
    padding: .375rem .625rem;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none
}

@media (min-width:58em) {

    .organizations-nav a,
    .organizations-nav li.is-empty {
        font-size: 1rem
    }
}

.organizations-nav a {
    color: #515a6d
}

.organizations-list {
    padding-top: 1.75rem;
    padding-left: 0;
    list-style: none;
    font-size: .875rem
}

@media (min-width:58em) {
    .organizations-list {
        font-size: 1rem
    }
}

.organizations-list>li:not(:first-child) {
    padding-top: 1.5rem
}

.organizations-list>li::marker {
    content: ""
}

.organizations-list>li>p {
    font-size: 1.125em;
    font-weight: 700;
    color: #23272f
}

.organizations-list ol {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem;
    padding-left: 0;
    list-style: none
}

.organizations-list a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-radius: .25rem;
    font-weight: 500;
    text-decoration: none;
    background-color: #fff;
    color: #68748d
}

@media (min-width:58em) {
    .organizations-list a {
        padding-right: 2.5rem;
        padding-left: 2.5rem
    }
}

.organizations-list a:focus,
.organizations-list a:hover {
    background-color: #e8e9ee
}

.organizations-list a p {
    color: #23272f
}

.organizations-list a dd,
.organizations-list a dl,
.organizations-list a dt {
    display: inline
}

.organizations-list a dt::after {
    content: ": "
}

.organizations-list a dd {
    color: #23272f
}

.organization-header {
    padding: 1rem;
    border-radius: .25rem;
    background-color: #fff
}

@media (min-width:58em) {
    .organization-header {
        padding: 2rem
    }
}

@media (min-width:110em) {
    .organization-header {
        display: flex;
        align-items: center;
        gap: 6rem
    }
}

.organization-name {
    margin-right: auto;
    font-size: 1.25rem;
    color: #23272f
}

@media (min-width:58em) {
    .organization-name {
        font-size: 1.75rem
    }
}

@media (min-width:110em) {
    .organization-name {
        white-space: nowrap
    }
}

.organization-addresses {
    display: flex;
    flex-direction: column;
    gap: 1rem 3rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e8e9ee;
    font-size: .875rem;
    font-weight: 500
}

@media (min-width:58em) {
    .organization-addresses {
        font-size: 1rem
    }
}

@media (min-width:89em) {
    .organization-addresses {
        flex-direction: row
    }
}

@media (min-width:110em) {
    .organization-addresses {
        margin-top: 0;
        padding-top: 0;
        border-top: none
    }
}

.organization-addresses .address {
    flex-direction: column
}

.organization-addresses .address>dt {
    display: inline-flex;
    align-items: center;
    color: #68748d
}

.organization-addresses .address>dt::before {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
    background-image: url(../img/icons/colored/home-gray-50.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

@media (min-width:110em) {
    .organization-addresses .address {
        max-width: 31rem
    }

    .organization-addresses .address>dt::after,
    .organization-addresses .address>dt::before {
        display: none
    }
}

.members-header {
    margin-top: 2rem
}

.members-header-nav form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center
}

@media (min-width:73em) {
    .members-header-nav form {
        grid-template-columns: 1fr auto auto
    }
}

.members-header-nav form .form-control {
    gap: .25rem 1rem
}

.members-header-fake-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .members-header-fake-title {
        font-size: 1.5rem
    }
}

.members-header-fake-title-count {
    font-size: 1rem;
    font-weight: 500;
    color: #68748d
}

.members-header-add {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #23272f;
    color: #fff;
    grid-column: 2;
    margin-left: auto;
    padding: .5rem 1rem
}

@media (min-width:58em) {
    .members-header-add {
        font-size: 1rem
    }
}

.members-header-add:active,
.members-header-add:focus,
.members-header-add:hover {
    border-color: #3d4352;
    background-color: #3d4352
}

@media (min-width:73em) {
    .members-header-add {
        grid-column: 3
    }
}

.members-header-add::before {
    content: "+";
    line-height: 1;
    font-size: 1.5em
}

.members-header .data-table-sort {
    grid-column: 1/3
}

@media (min-width:73em) {
    .members-header .data-table-sort {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center
    }
}

@media (min-width:58em) {
    .data-table.members {
        margin-top: 2rem
    }
}

@media (max-width:40em) {

    .data-table.members table,
    .data-table.members td,
    .data-table.members th {
        display: block
    }

    .data-table.members thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .data-table.members tbody {
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: .5rem
    }

    .data-table.members tr {
        max-width: 42rem;
        border-radius: .25rem;
        padding: 1rem;
        border-top: 0;
        background-color: #fff
    }

    .data-table.members tr:is(:hover, :focus-within) td,
    .data-table.members tr:is(:hover, :focus-within) th {
        background-color: #fff
    }

    .data-table.members:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue) {
        background-color: #f3f4f6
    }

    .data-table.members:not(.has-no-progress-indicator-hover) tbody tr:hover .progress-indicator:not(.is-completed, .is-due, .is-overdue)::after {
        background-color: #fff
    }

    .data-table.members td,
    .data-table.members th {
        padding: 0
    }

    .data-table.members td:first-child,
    .data-table.members th:first-child {
        padding-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .data-table.members td:last-child,
    .data-table.members th:last-child {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .data-table.members th {
        font-weight: 600
    }

    .data-table.members td::before {
        font-weight: 500;
        color: #68748d
    }

    .data-table.members.has-white-bg tbody tr>* {
        border: none
    }

    .data-table.members td {
        font-weight: 500
    }

    .data-table.members td:nth-child(2) {
        color: #23272f
    }

    .data-table.members td:nth-child(3) {
        margin-top: .25rem;
        color: #68748d
    }

    .data-table.members td:nth-child(4) {
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px solid #e8e9ee;
        text-align: center
    }
}

.data-table.members a {
    font-weight: 500;
    color: inherit
}

.data-table.members td:last-child a {
    color: #ab5e0f
}

:not(.dialog)>.member {
    margin-top: -1.5rem;
    margin-right: -1.25rem;
    margin-left: -1.25rem
}

@media (min-width:38.5em) {
    :not(.dialog)>.member {
        max-width: 36rem;
        margin-right: auto;
        margin-left: auto;
        border-radius: .5rem;
        background-color: #fff
    }
}

@media (min-width:30em) {
    .member .dialog-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1rem
    }

    .member .dialog-content .form-control {
        margin-top: 0
    }

    .member .dialog-content .form-control:nth-child(n+3) {
        grid-column: span 2
    }
}

.member-permissions>div {
    position: relative
}

.member-permissions button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    font-size: 0;
    background: 0 0
}

.member-permissions input:not(:disabled)~button {
    display: none
}

.member-permission-note {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}

.member-permission-toggletip .member-permission-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5rem;
    min-width: 13em;
    padding: 1rem;
    border-radius: .25rem;
    font-size: .875rem;
    font-weight: 500;
    background-color: #3d4352;
    color: #f9f9fa;
    position: absolute;
    bottom: -4.5rem;
    left: 0;
    z-index: 1;
    overflow: visible;
    max-width: none;
    clip: initial;
    height: auto;
    margin: 0;
    width: auto;
    white-space: initial
}

@media (min-width:58em) {
    .member-permission-toggletip .member-permission-note {
        font-size: 1rem
    }
}

.member-permission-toggletip .member-permission-note::after {
    content: "";
    position: absolute;
    display: block;
    border: .5rem solid transparent;
    top: -1rem;
    left: 2rem;
    border-bottom-color: #3d4352
}

.member .dialog-footer {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

@media (min-width:30em) {
    .member .dialog-footer.has-cancel {
        grid-template-columns: auto auto
    }
}

@media (min-width:30em) {
    .member .dialog-footer.has-cancel .form-submit {
        grid-column: 2
    }
}

@media (min-width:30em) {
    .member .dialog-footer.has-cancel .member-delete {
        grid-column: span 2;
        margin-right: auto;
        margin-left: auto
    }
}

.member .dialog-footer>* {
    width: 100%
}

@media (min-width:30em) {
    .member .dialog-footer>* {
        width: auto
    }
}

.member .dialog-footer .form-submit {
    min-width: 11.5rem;
    margin-top: 0
}

.member-cancel {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border: 2px solid #23272f;
    border-radius: .25rem;
    line-height: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    color: #23272f;
    padding: .75rem 2rem
}

@media (min-width:58em) {
    .member-cancel {
        font-size: 1rem
    }
}

.member-cancel:active,
.member-cancel:focus,
.member-cancel:hover {
    background-color: #f3f4f6
}

@media (min-width:58em) {
    .member-cancel {
        padding: 1rem 2.75rem
    }
}

@media (min-width:30em) {
    .member-cancel {
        grid-column: 1;
        grid-row: 1
    }
}

.member-delete {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    color: #eb0400
}

@media (min-width:58em) {
    .member-delete {
        padding: 1rem 2rem;
        font-size: 1rem
    }
}

.member-delete:focus,
.member-delete:hover {
    text-decoration: underline
}

.member-delete svg {
    width: 1rem;
    height: 1rem
}

.member-delete path {
    stroke: currentColor
}

.l-auth {
    display: grid;
    min-height: 100vh;
    background-color: #fff
}

@media (min-width:40em) {
    .l-auth {
        grid-template-columns: 3fr 2fr
    }
}

@media (min-width:58em) {
    .l-auth {
        grid-template-columns: 1fr 1fr
    }
}

@media (min-width:91.5em) {
    .l-auth {
        grid-template-columns: 45.75rem 1fr
    }
}

.l-auth .company-logo img {
    height: 1.125rem
}

@media (min-width:58em) {
    .l-auth .company-logo img {
        height: 1.5rem
    }
}

.l-auth-content {
    display: flex;
    justify-content: center;
    padding: 2rem 1.25rem
}

@media (min-width:58em) {
    .l-auth-content {
        padding-top: 3rem;
        padding-bottom: 3rem
    }
}

.l-auth-content-column {
    display: flex;
    flex-direction: column;
    max-width: 30rem;
    width: 100%
}

.l-auth-welcome {
    max-width: 24rem;
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: .25rem;
    background-color: #f9f9fa
}

@media (min-width:58em) {
    .l-auth-welcome {
        max-width: 30rem;
        margin-top: 3.25rem;
        padding: 2rem
    }
}

.l-auth-welcome p {
    margin-top: 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: #68748d
}

@media (min-width:58em) {
    .l-auth-welcome p {
        font-size: 1rem
    }
}

.l-auth-welcome a {
    color: inherit
}

.l-auth-welcome-title {
    font-size: 1rem;
    font-weight: 700;
    color: #23272f
}

@media (min-width:58em) {
    .l-auth-welcome-title {
        font-size: 1.5rem
    }
}

.l-auth-main {
    padding-top: 2rem
}

@media (min-width:58em) {
    .l-auth-main {
        padding-top: 2.5rem
    }
}

@media (min-width:40em) {
    .l-auth-main {
        margin-top: auto;
        margin-bottom: auto
    }
}

.l-auth-title {
    font-size: 1.75rem;
    color: #23272f
}

@media (min-width:58em) {
    .l-auth-title {
        font-size: 2.5rem
    }
}

.l-auth-subtitle {
    margin-top: .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: #68748d
}

@media (min-width:58em) {
    .l-auth-subtitle {
        margin-top: 1.5rem;
        font-size: 1rem
    }
}

.l-auth-subtitle strong {
    color: #23272f
}

.l-auth-subtitle:not(:last-child):not(.has-not-divider)::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: .125rem;
    margin-top: 1.5rem;
    background-color: #f3f4f6
}

@media (min-width:58em) {
    .l-auth-subtitle:not(:last-child):not(.has-not-divider)::after {
        margin-top: 2.5rem
    }
}

.l-auth-img {
    background-color: #f3f4f6
}

@media (min-width:40em) {
    .l-auth-img img {
        width: 100%;
        height: 100%;
        -o-object-position: center;
        object-position: center;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.l-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

@media (min-width:60em) {
    .l-app {
        flex-direction: row
    }
}

.l-app-signed-in-as {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: .75rem 1.25rem;
    background-color: #23272f;
    font-size: .875rem;
    color: #fff
}

@media (min-width:58em) {
    .l-app-signed-in-as {
        font-size: 1rem
    }
}

@media (min-width:60em) {
    .l-app-signed-in-as {
        position: fixed;
        top: 0;
        right: 0;
        left: 0
    }
}

.l-app-signed-in-as h2 {
    position: relative;
    font-size: 1em;
    font-weight: 500
}

.l-app-signed-in-as h2::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1rem;
    bottom: 0;
    display: block;
    width: 1px;
    height: 1rem;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #515a6d
}

.l-app-signed-in-as a {
    white-space: nowrap;
    color: #f6c592
}

.l-app-header {
    z-index: 4;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    background-color: #fff
}

@media (min-width:60em) {
    .l-app-header {
        scrollbar-color: rgba(0, 0, 0, .15) rgba(252, 252, 252, .5);
        position: fixed;
        flex-shrink: 0;
        height: 100vh;
        overflow: auto;
        width: 15rem
    }

    .l-app-header::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }

    .l-app-header::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .15);
        border-radius: 6px
    }

    .l-app-header::-webkit-scrollbar-track {
        background: rgba(252, 252, 252, .5)
    }
}



@media (min-width:60em) {
    .l-app-signed-in-as+.l-app .l-app-header {
        top: 3rem;
        height: calc(100vh - 3rem)
    }
}

.l-app-header:not(.has-collapsible-navs) {
    padding-top: 1rem;
    padding-bottom: 1.5rem
}

@media (min-width:60em) {
    .l-app-header:not(.has-collapsible-navs) {
        padding-top: 1rem;
        padding-bottom: 1rem
    }
}

.l-app-header .company-logo {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    text-align: center
}

@media (min-width:60em) {
    .l-app-header .company-logo {
        padding-right: 2rem;
        padding-left: 2rem;
        text-align: left
    }
}

.l-app-header .company-logo::after {
    content: "";
    display: block;
    width: 100vw;
    height: 1px;
    margin-top: 1rem;
    margin-left: -1.25rem;
    background-color: #f3f4f6
}

@media (min-width:60em) {
    .l-app-header .company-logo::after {
        width: 2rem;
        margin-top: 2.25rem;
        margin-left: 0
    }
}

.l-app-nav {
    padding-bottom: .75rem
}

@media (min-width:60em) {
    .l-app-nav {
        padding-bottom: 0
    }
}

@media (min-width:60em) {
    .l-app-nav.is-user {
        margin-top: auto
    }
}

.l-app-nav ul {
    padding-left: 0;
    list-style: none
}

.l-app-nav [aria-current=page] a,
.l-app-nav li:focus a,
.l-app-nav li:hover a {
    color: #23272f
}

.l-app-nav [aria-current=page] path,
.l-app-nav li:focus path,
.l-app-nav li:hover path {
    stroke: #eb8214
}

.l-app-nav [aria-current=page] a {
    font-weight: 600
}

.l-app-nav [aria-current=page] a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: .25rem;
    height: 100%;
    background-color: #eb8214
}

.l-app-nav path {
    stroke: #c4c9d4
}

.l-app-nav .visually-hidden+ul {
    margin-top: 1rem
}

@media (min-width:60em) {
    .l-app-nav .visually-hidden+ul {
        margin-top: 1.75rem
    }
}

.l-app-nav-parent {
    margin-top: 1rem
}

@media (min-width:60em) {
    .l-app-nav-parent {
        margin-top: 1.5rem
    }
}

.l-app-nav a,
.l-app-nav-lang,
.l-app-nav-parent a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: #68748d
}





.l-app-nav a svg,
.l-app-nav-lang svg,
.l-app-nav-parent a svg {
    width: 1rem;
    height: 1rem
}

.l-app-nav-lang {
    width: auto
}

@media (min-width:60em) {
    .l-app-nav-lang {
        width: 100%
    }
}

.l-app-nav-label {
    margin-top: 8px;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    font-size: .75rem;
    font-weight: 600
}



.l-app-nav.is-main .l-app-nav-label {
    letter-spacing: .05em;
    text-transform: uppercase
}

.l-app-nav.is-user .l-app-nav-label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.25rem .75rem;
    color: #23272f
}

@media (min-width:60em) {
    .l-app-nav.is-user .l-app-nav-label {
        gap: 1.5rem .75rem
    }
}

.l-app-nav.is-user .l-app-nav-label::before {
    content: attr(data-initials);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .875rem;
    line-height: 1;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    background-color: #515a6d;
    color: #fff
}

.l-app-nav.is-user .l-app-nav-label::after {
    content: "";
    grid-column: 1/3;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #f3f4f6
}

.l-app-nav-parent~.l-app-nav-label:first-of-type {
    position: relative;
    margin-top: 8px;
    padding-top: 8px
}



.l-app-nav-parent~.l-app-nav-label:first-of-type::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    right: 1.25rem;
    display: block;
    width: calc(100% - 2.5rem);
    height: 1px;
    background-color: #f3f4f6
}

@media (min-width:60em) {
    .l-app-nav-parent~.l-app-nav-label:first-of-type::before {
        left: 2rem;
        right: 2rem;
        width: calc(100% - 4rem)
    }
}

.l-app-nav-label+ul {
    margin-top: 1.25rem
}

@media (min-width:60em) {
    .l-app-nav-label+ul {
        margin-top: 1rem
    }
}

body.has-l-app-nav-opened {
    overflow: hidden
}

body.has-l-app-nav-opened .l-app-nav {
    overflow: auto;
    position: absolute;
    top: calc(3.5rem + 1px);
    right: 0;
    left: 0;
    max-height: calc(100vh - 3.5rem - 1px);
    background-color: #fff
}

@media (min-width:60em) {
    body.has-l-app-nav-opened .l-app-nav {
        right: auto;
        width: 15rem
    }
}

@media (min-width:60em) and (min-width:120em) {
    body.has-l-app-nav-opened .l-app-nav {
        width: 18rem
    }
}

body.has-l-app-nav-opened::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5)
}

.l-app-header-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    border-bottom: 1px solid #f3f4f6
}

.l-app-header-controls>* {
    grid-row: 1
}

.l-app-header-controls .company-logo {
    grid-column: 2;
    padding-right: 0;
    padding-left: 0
}

@media (min-width:60em) {
    .l-app-header-controls .company-logo {
        padding-top: .25rem;
        font-size: .875rem;
        text-align: center
    }
}

.l-app-header-controls .company-logo::after {
    display: none
}

.l-app-nav-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 1rem 1.25rem;
    border: none;
    background-color: #fff
}

@media (min-width:60em) {
    .l-app-nav-toggle {
        padding-right: 1rem;
        padding-left: 1rem
    }
}

.l-app-nav-toggle.is-main::after {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../img/icons/colored/menu-gray-50.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

@media (min-width:60em) {
    .l-app-nav-toggle.is-main::after {
        width: 1rem;
        height: 1rem
    }
}

.l-app-nav-toggle.is-main[aria-expanded=true]::after {
    background-image: url(../img/icons/colored/menu-primary-60.svg)
}

.l-app-nav-toggle-user-initials {
    font-size: 0
}

.l-app-nav-toggle-user-initials::before {
    content: attr(data-initials);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .875rem;
    line-height: 1;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    background-color: #515a6d;
    color: #fff
}

@media (min-width:60em) {
    .l-app-nav-toggle-user-initials::before {
        width: 1.5rem;
        height: 1.5rem
    }
}

.l-app-nav-toggle[aria-expanded=true] .l-app-nav-toggle-user-initials::before {
    background-color: #c96f11
}

.l-app-main {
    max-width: 150rem;
    flex-grow: 1;
    padding: 8px 8px
}


@media (min-width:60em) {
    .l-app-main {
        width: calc(100% - 15rem);
        margin-left: 15rem
    }
}



@media (min-width:60em) {
    .l-app-signed-in-as+.l-app .l-app-main {
        margin-top: 3rem
    }
}

.l-app-main.has-mobile-white-bg {
    background-color: #fff
}

@media (min-width:60em) {
    .l-app-main.has-mobile-white-bg {
        background-color: transparent
    }
}

.l-app-title {
    font-size: 1.5rem;
    color: #23272f
}

@media (min-width:58em) {
    .l-app-title {
        padding-bottom: 1.75rem;
        border-bottom: 1px solid #e8e9ee;
        font-size: 2rem
    }
}

.l-app-main-card {
    padding: 1.5rem;
    border-radius: .25rem;
    background-color: #fff;
    margin-top: 1.5rem
}

@media (min-width:58em) {
    .l-app-main-card {
        padding: 3rem
    }
}

@media (min-width:58em) {
    .l-app-main-card {
        margin-top: 2rem
    }
}