@import 'animations.css';
@import 'browser.css';

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

:root {
    --jj-gray: #7B8E8D;
    --jj-yellow: #FFC72C;
    --jj-orange: #FF6600;
    --jj-green: #8DC63F;
    --jj-white: #ffffff;
    --jj-blue: #0F0DAA;
    --jj-purple: #704785;
    --jj-brown: #6B5332;
    --jj-black: #323232;
    --md-theme-default-background: #fafafa;
    --md-theme-default-background-light: rgba(250, 250, 250, 0.75);
    --md-theme-default-primary: hsl(270, 50%, 40%);
    --md-theme-default-primary-on-: color-mix(in srgb, var(--md-theme-default-primary) 20%, #fff);
    --md-theme-default-accent: hsl(293, 96%, 40%);
    --md-theme-default-accent-on-: color-mix(in srgb, var(--md-theme-default-warn) 15%, #fff);
    --md-theme-default-warn: #e40431;
    --md-theme-default-primary-on-background: var(--md-theme-default-primary);
    --md-theme-default-rowvariant: #fff;
    --md-theme-default-divider-on-background: #ededed;
    --md-theme-default-text-primary-on-background: #364149;
    --background-semi: color-mix(in srgb, var(--md-theme-default-primary), var(--md-theme-default-accent));
}

error {
    position: fixed;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -70%);
    white-space: pre-line;
    opacity: 0;
    animation: fadein .25s;
    animation-delay: 1s;
    animation-fill-mode: forwards;

    &::first-line {
        text-transform: uppercase;
        line-height: 3rem;
    }
}

html,
body {
    background-color: white !important;
}

body {
    opacity: 0;
    font-family: Rubik;
    animation: fadein .5s forwards;
    animation-delay: .25s;
    animation-fill-mode: forwards;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;

    .page-container {
        transition: transform .2s ease-in-out;
        border-radius: 8px;
    }
}

@media print {

    .md-drawer,
    .md-menu {
        display: none !important;
    }
}

@media (max-width:600px) {
    .md-card {
        margin: 0 !important;
    }
}

.button-multiline,
.button-multiline button {
    height: unset;
    text-align: left;

    &:before {
        display: none;
    }

    .md-button-content,
    .md-list-item-content {
        flex-direction: column;
        padding: 10px !important;
        align-items: flex-start !important;
        gap: 2px !important;

        >div {
            color: inherit;
        }

        .md-caption+.md-caption {
            font-weight: 100;
        }
    }
}

.md-button {
    margin: 0;

    .md-chip {
        padding: 0;
    }

    i.disabled {
        opacity: .5;
    }

    &.md-raised:not(.md-active) {
        box-shadow: none;
    }

    &.md-accent {

        color: var(--md-theme-default-primary) !important;

        &:before {
            opacity: .15;
            background-color: var(--md-theme-default-primary);
        }
    }

    &.white {
        background-color: var(--md-theme-default-background);
        min-width: unset;
        font-weight: 400;
    }


    &.md-mini {
        font-weight: 400;
        font-size: 8pt;
        margin: 0;

        .md-button-content {
            text-transform: capitalize !important;
        }
    }

    &.md-accent:not(.md-raised) {
        color: var(--md-theme-default-accent);
    }

    &.md-raised:not([disabled]) {
        box-shadow: 0 1px 1px 0 rgba(0 0 0 / 17%);
        min-width: unset;
    }

    &.md-icon-button {
        &.md-small {
            width: 24px;
            min-width: 24px;
            height: 24px;

            i {
                font-size: 11pt !important;
            }
        }
    }

    .md-ripple {
        padding: 0;
    }

    &:disabled {
        filter: grayscale(1);
    }

    &:not(.md-input-action) {
        .md-button-content {
            text-transform: initial;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 12px;
            overflow: hidden;
            height: 100%;

            div {
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.fa-solid,
.fa-regular {
    line-height: inherit !important;
}

.md-icon {
    font-style: normal;
    font-size: 20px !important;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;

    img {
        border-radius: 30pt;
    }
}

.toasted-container {

    .toasted {
        font-weight: 400 !important;
        gap: 15pt;
        line-height: 160% !important;
        padding: 12px 20px !important;
        justify-content: start !important;
        border-radius: 3.5pt !important;

        i {
            font-size: 14pt;
            margin-left: 8px !important;
        }

        .action {
            color: #000 !important;
            background-color: var(--md-theme-default-background-light);
            padding: 6pt 9pt !important;
            text-decoration: none !important;
        }

        &.info {
            background: var(--md-theme-default-rowvariant) !important;
            color: #000 !important;
            box-shadow: none !important;
        }

        &.md-warn,
        .md-warn {
            color: #fff !important;
            background: var(--md-theme-default-warn);
        }
    }
}

[v-cloak] {
    display: none;
}

.md-divider {
    opacity: .5;
    z-index: 1;

    @media (orientation:landscape) {
        height: auto;
        width: 1px;
    }

    @media (orientation:portrait) {
        height: 1px;
        width: 100%;
    }

    &.horizontal {
        height: 1px;
        width: 100%;
        margin: 10px 0;
    }
}

iframe {
    border: 0;
    opacity: 0;

    &:not([allowtransparency]) {
        width: 100%;
        height: 100% !important;
    }

    &.animate {
        animation: fadein .5s ease-in-out 0s forwards;
        animation-delay: .25s;

    }

    &#pdf {
        background: var(--md-theme-default-divider-on-background);
        min-height: min(580px, 80dvh);
    }
}

.md-app-container {

    .md-app-scroller {
        scroll-behavior: smooth;

        .md-app-content {
            border: 0;

            >.md-content {
                display: flex;
                flex-direction: column;
                max-width: 100dvw;

                th,
                td {
                    &:nth-child(1) {
                        border-radius: 6px 0 0 6px;
                    }

                    &:nth-last-child(1) {
                        border-radius: 0 6px 6px 0;
                    }
                }

                thead {

                    th {
                        background-color: var(--md-theme-default-accent);
                    }

                    div {
                        color: #fff !important;
                        text-transform: capitalize;

                        svg {
                            fill: #fff;
                        }
                    }
                }

                tbody {
                    tr {
                        &:not(.row-hide) {
                            td {
                                padding-top: 24px;
                            }
                        }
                    }
                }

                &:empty {
                    width: 100%;
                    animation: fadein 2s infinite;

                    &::after {
                        content: 'Loading..';
                        position: relative;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        left: 50%;
                        width: fit-content;
                    }
                }
            }
        }
    }
}

.md-app-content {
    position: relative;

    @media (orientation:portrait) {
        padding: 0;
    }
}

.md-toolbar {

    .md-toolbar-section-start,
    .md-toolbar-section-end {

        .md-menu:first-child {
            margin-left: 0;
        }

        .md-button {
            margin: 6px 8px;
        }
    }

    .md-toolbar-section-end {
        flex-grow: 5;
    }

    .logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 50px;
        width: 50px;

        +span>div {
            line-height: 20px;
        }

        >img,
        >span {
            width: 50px;
            height: 50px;

            svg {
                width: inherit;
                height: inherit;
            }
        }
    }

    .md-field {
        &:last-of-type {
            width: 80%;
        }

        i[class*='fa-'] {
            opacity: .5;
            margin: 8px 0 8px 12px;
        }
    }

    .md-chips {
        input {
            display: none;
        }
    }

    .md-caption {
        white-space: nowrap;
    }

    .md-button {
        min-width: unset;
    }

    &.md-table-toolbar {

        .md-layout-item {
            display: flex;
            align-items: center;
        }

        button {
            text-transform: initial;

            &.md-primary {
                .md-icon {
                    color: var(--md-theme-default-primary);
                }
            }

            &.md-warn {
                color: var(--md-theme-default-warn) !important;

                .md-icon {
                    color: var(--md-theme-default-warn);
                }
            }
        }
    }

    .md-radio {
        display: flex;
        margin: 0;

        label {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 90px;
            font-size: 90%;
            padding-left: 5pt;
        }
    }
}

.md-menu-content {
    overflow: hidden;
    z-index: 100;

    ul {

        .md-menu-item {
            &.selected button {
                background-color: var(--md-theme-default-divider-on-background);
            }

            .md-list-item-content {
                justify-content: left;
                gap: 16pt;
                font-size: .8rem;
                min-height: unset;
                line-height: 2rem;

                .md-chip {
                    transform: scale(.8);
                    transform-origin: left;
                }

                .md-avatar {
                    margin: 0;
                    border-radius: unset;
                }
            }
        }
    }
}

.chip-selectors {
    .md-chip {
        box-shadow: none !important;
        height: 32px;
    }

    .md-layout-item {

        >.md-chip {
            margin: 10px 20px 10px 0;

            &.md-button {
                background: var(--md-theme-default-primary-on-);
            }

            &:not(.md-button) {
                background: transparent;
                font-weight: 400 !important;
            }
        }
    }
}

.list-chips {
    gap: 10px;

    .md-chip {
        min-width: unset;
        padding: 0;
        transform: scale(.7);
        transform-origin: right;
    }
}

.flex {
    flex: 1;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
}

.nopoint {
    pointer-events: none;
}


.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.pre {
    white-space: pre !important;
}

.md-tooltip {
    font-size: inherit;
    height: auto;
    max-width: calc(100dvw - 32px);
    padding: 10px 14px;
    white-space: normal;
    font-variant-numeric: tabular-nums !important;

    .md-chip {
        border: 1pt solid #fff;
    }

    &.md-small {
        transform: scale(.6);

        &.md-tooltip-left {
            transform-origin: right;
        }

        &.md-tooltip-right {
            transform-origin: left;
        }

        &.md-tooltip-bottom {
            transform-origin: top;
        }
    }

    li {
        margin: 0 0 0 10px;

        &::marker {
            color: rgba(255, 255, 255, .75);
            margin-right: 20px;
            padding-right: 20px;
            transform: scale(.5);
            display: inline-block;
        }
    }

    table {
        border-collapse: collapse;

        tr {
            td {
                color: #fff !important;
                vertical-align: top;
                line-height: 1.25rem;

                &:not(:last-of-type) {
                    padding-right: 12px;
                }

                &:last-of-type {
                    text-align: right;
                }
            }
        }
    }

    hr {
        border-top: 0;
    }
}

.md-tooltip,
.md-table-cell {

    .md-chip {
        font-variant-numeric: tabular-nums;

        &[color=White] {
            color: #000 !important;
        }

        &[color]:not([color=White]):not([color=False]) {
            color: #fff !important;
        }
    }

    .md-badge {
        &.md-square {
            right: unset;
            position: initial;
            white-space: nowrap;

            &.md-accent {
                background: var(--md-theme-default-rowvariant) !important;
                color: var(--md-theme-default-text-primary-on-background);
            }
        }

        &.md-warn {
            background: var(--md-theme-default-warn);
        }
    }
}

.md-headlines {
    white-space: nowrap;

    >.md-title {
        font-weight: 400;
        margin-left: 0;
        flex: max-content;

        &:first-of-type {
            color: var(--md-theme-default-accent) !important;
        }
    }
}

.md-headline,
.md-button,
.md-chip {
    font-family: 'Rubik' !important;
}

.md-chip {
    height: 24px;
    user-select: none;
    color: currentColor !important;
    text-transform: initial;
    align-items: center;
    display: inline-flex;
    cursor: pointer;

    &.md-deletable {
        height: unset;
        line-height: 25px;
        padding: 0 4px 0 10px !important;
        gap: 6px;

        .md-clear {
            position: relative !important;
            transform: unset !important;
            right: unset;
        }

        img {
            max-width: 100px;
        }
    }

    &:empty {
        width: 32px;
    }

    &[color] {
        width: 24px;
        flex-shrink: 0;
    }

    .md-chip {
        &[color] {
            height: 14px;
            width: 14px;
            min-width: unset;
            padding: 0;
        }
    }

    &:not(.md-chip)[color=mask] {
        mask: radial-gradient(circle closest-side, transparent 7px, white 8px);
        filter: saturate(1.5);

        &.margin {
            height: 30px;
            width: 30px;
            margin: 8pt 0;
        }
    }

    &.md-chip[color=mask] {
        mask: radial-gradient(circle closest-side, transparent 3px, white 4px);
        filter: saturate(1.5);
    }

    &[color='False'] {
        background: transparent !important;
    }

    &[color=White] {
        background: var(--jj-white) !important;
        border: 1px solid rgba(0 0 0 / 35%);
    }

    &[color=Blue] {
        background: var(--jj-blue) !important;
    }

    &[color=Gray] {
        background: var(--jj-gray) !important;
    }

    &[color='Gray/White'] {
        background: linear-gradient(-45deg, var(--jj-gray) 50%, var(--jj-white) 50%) !important;
    }

    &[color='Gray/Black'] {
        background: linear-gradient(-45deg, var(--jj-gray) 50%, var(--jj-black) 50%) !important;
    }

    &[color='Yellow/White'] {
        background: linear-gradient(-45deg, var(--jj-yellow) 50%, var(--jj-white) 50%) !important;
    }

    &[color=Yellow] {
        background: var(--jj-yellow) !important;
    }

    &[color='Yellow/Black'] {
        background: linear-gradient(-45deg, var(--jj-yellow) 50%, var(--jj-black) 50%) !important;
    }

    &[color='Green/White'] {
        background: linear-gradient(-45deg, var(--jj-green) 50%, var(--jj-white) 50%) !important;
    }

    &[color=Green] {
        background: var(--jj-green) !important;
    }

    &[color='Green/Black'] {
        background: linear-gradient(-45deg, var(--jj-green) 50%, var(--jj-black) 50%) !important;
    }

    &[color='Orange/White'] {
        background: linear-gradient(-45deg, var(--jj-orange) 50%, var(--jj-white) 50%) !important;
    }

    &[color=Orange] {
        background: var(--jj-orange) !important;
    }

    &[color='Orange/Black'] {
        background: linear-gradient(-45deg, var(--jj-orange) 50%, var(--jj-black) 50%) !important;
    }

    &[color=Purple] {
        background: var(--jj-purple) !important;
    }

    &[color=Brown] {
        background: var(--jj-brown) !important;
    }

    &[color=Black] {
        background: var(--jj-black) !important;
    }

    &[color='Black/White'] {
        background: linear-gradient(-45deg, var(--jj-black) 50%, var(--jj-white) 50%) !important;
    }

    .md-avatar {
        margin: -1px 5px auto -11px;
    }

    button {
        background: transparent !important;

        svg {
            fill: white !important;
        }

        &:hover {
            background: var(--md-theme-default-warn) !important;
        }
    }

    &.router-link-exact-active {
        box-shadow: 0 0 0 1.5pt var(--md-theme-default-accent) inset !important;
    }

    &.md-accent {
        background: var(--md-theme-default-accent) !important;
        color: #fff !important;
    }

    &.md-primary {
        background: var(--md-theme-default-primary) !important;
        color: #fff !important;
    }

    &.md-warn {
        background: var(--md-theme-default-warn) !important;
        color: #fff !important;
    }

    ~.md-autocomplete {
        flex-basis: 100%;
    }
}

.md-table-cell.prices,
.md-table-cell.cost {

    .md-table-cell-container {
        .md-field {
            min-width: unset !important;

            textarea {
                text-transform: uppercase;
                text-align: right;
                line-height: 1.5em;
            }
        }
    }
}

.md-dialog {

    @media (orientation:portrait) {
        top: inherit;

        .md-dialog-container {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
    }

    &:not(.loading) {
        .md-progress-bar {
            display: none;
        }
    }

    &.loading {
        .md-progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            margin: 0;
            border-radius: 0;
        }

        .md-button {
            &::after {
                content: '';
                width: 20px;
                height: 20px !important;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='10' stroke-width='3' stroke='%23fff' stroke-linecap='round' stroke-dasharray='20' fill='none'%3E%3C/circle%3E%3C/svg%3E");
                animation: spin 1s linear infinite;
                background-color: transparent;
                position: absolute;
                top: 9px;
                margin-left: 100%;
                left: -30px;
                opacity: .1;
            }
        }
    }

    .md-toolbar {
        box-shadow: none;
        background-color: transparent;
        gap: 10pt;
    }

    li.image {
        border: 1px solid var(--md-theme-default-primary-on-);
        border-radius: 17px;
        min-width: 100px;
        overflow: hidden;

        >.md-chip {
            border-radius: 0;
            background: transparent !important;

            svg {
                fill: var(--md-theme-default-warn) !important;
            }
        }
    }

    .md-dialog-title {
        background: var(--md-theme-default-background);
        padding: 24px;
    }

    &#editMore .md-dialog-container {
        min-width: min(900px, 100dvw) !important;
    }

    .md-dialog-container {
        min-width: min(400px, 100dvw);
        max-height: 100vh;
        max-width: 100%;
        background: var(--md-theme-default-rowvariant);

        .md-dialog-content {

            .md-table-content {
                overflow: visible;
            }

            .md-field {
                margin: 0;
                display: flex;
                gap: 2pt;
            }
        }
    }

    .md-table {
        height: unset;
        overflow-x: hidden;
        display: unset;

        .md-table-content {
            border-radius: 0;
            background-color: transparent;

            .md-table-row {
                border-top: none;

                .md-table-cell {

                    &.baseline {
                        vertical-align: baseline;
                    }

                    .md-table-cell-container {

                        label {
                            flex-direction: column;
                            display: flex;
                            gap: 6px;

                            input {
                                &:disabled {
                                    display: none;
                                }
                            }
                        }

                        .images {
                            .md-chip {
                                position: absolute !important;
                                margin-left: 45px !important;
                                z-index: 1;

                                &.md-deletable {
                                    padding-right: 14px;
                                }
                            }

                            img {
                                border-radius: 5pt;
                                margin: 5pt 10pt 5pt 0;
                                width: 65px;
                                height: 65px;
                            }
                        }
                    }
                }
            }

            textarea {
                min-width: 350px;
            }

            .scan-incomplete {
                input {
                    box-shadow: 0 0 0 2px var(--md-theme-default-warn) inset;
                }
            }

            .row-ok {
                filter: grayscale(1) opacity(.5);
                pointer-events: none;
            }
        }
    }

    .md-file {
        .md-input {
            margin-left: 0;
        }

        .md-input:read-only {

            display: none;
        }
    }

    &.warn {
        .md-button:last-of-type {
            &:not([disabled]):hover::before {
                background-color: var(--md-theme-default-warn);
                opacity: .12;
            }

            * {
                color: var(--md-theme-default-warn);
            }
        }
    }

    .md-warn {
        color: var(--md-theme-default-warn);
    }

    .md-dialog-actions {
        background: var(--md-theme-default-primary-on-);
        gap: 16px;
        padding: 18px 24px;

        .md-button {
            min-width: 125px;

            &.md-accent {
                color: #fff !important;
            }
        }
    }
}

.md-overlay {
    background: rgba(0, 0, 0, .45);
}

.md-toolbar {

    .md-field:not(.md-chips) {
        min-width: 170px;
        max-width: 200px;

        &[type=email] {
            max-width: inherit;
        }

        .md-input-action {
            top: 2px;
        }

        &.md-datepicker i {
            display: none;
        }

        input {
            width: inherit;
            margin-left: 0;
            text-indent: 10px !important;
        }
    }

    .md-layout {
        gap: 32px;

        button {
            margin: 0;
        }
    }
}

.md-list {
    &.filter-list {
        flex-direction: row;

        .md-list-item-content {
            gap: 10px;

            .fa-solid {
                color: rgba(0 0 0 / 15%);
            }
        }
    }
}


.shine,
.md-layout div[shine] {
    &:empty {
        animation: 1.25s shine linear infinite;
        background: linear-gradient(110deg, rgba(0, 0, 0, .2) 8%, rgba(0, 0, 0, .1) 18%, rgba(0, 0, 0, .2) 33%);
        border-radius: 5px;
        background-size: 200% 100%;
        width: 80%;
        min-width: 120px;
        line-height: 100%;
        min-height: 20px;

        &::before {
            content: '\00a0';
        }
    }
}

.md-badge {
    pointer-events: all;

    &.md-dense {
        font-weight: 500;
    }

    &.md-square {
        width: fit-content;
        padding: 4px 5px;
    }
}

.v-top {
    .md-table-cell {
        vertical-align: top;
    }
}

@keyframes changeToSticky {
    to {
        position: sticky;
    }
}

.md-app-content {
    >.md-content {
        &[selectedcount='0'] {
            .md-table-alternate-header {
                display: none;
            }

            .md-table-content {
                overflow: visible;
            }

            .md-table-content thead {
                animation: fadein .25s;
            }
        }

        &:not([selectedcount='0']) {
            .md-table-content thead {
                display: none;
            }
        }
    }
}

.md-table {

    >.md-table-toolbar {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    >.md-table-toolbar {
        padding-left: var(--app-width);
        padding-right: var(--app-width);
        margin-left: 32px;
        width: calc(100% - 32px);
    }

    >.md-table-alternate-header {
        position: relative;
        animation: changeToSticky 1ms forwards;
        transform: translateY(0) !important;
    }

    .md-table-content {
        max-width: 100%;
        overflow-x: auto;
    }

    .md-table-row {

        &:first-of-type {
            td {
                border-top: none !important;
            }
        }
    }

    .md-table-cell {

        &:first-of-type {
            min-width: 80px;
        }

        @media (orientation:portrait) {

            .md-field {

                &:before,
                input {
                    max-width: 50px !important;
                }
            }
        }
    }

    .md-table-cell-container {
        display: grid !important;
        grid-template-columns: minmax(auto, 1fr);
        text-overflow: ellipsis;
        flex-wrap: wrap;
        grid-gap: 10px;
        align-items: center;
        cursor: default;

        @media (orientation:landscape) {
            >div {
                max-width: 16.1dvw;
            }
        }

        @media (orientation:portrait) {
            >div {
                max-width: 50dvw;
            }
        }

        .md-chip {
            &.md-deletable {
                background: var(--md-theme-default-primary-on-) !important;
            }

            .overflow {
                max-width: 74px;
            }
        }

        .image>.md-chip {
            box-shadow: none;
        }

        .md-switch {
            width: fit-content;

            .md-switch-label {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                height: initial;
                line-height: initial;
            }
        }
    }

    .md-table-alternate-header {
        z-index: 12;

        .md-toolbar {
            padding: 3px;
            min-height: unset;

            .md-toolbar-section-start {
                flex-wrap: wrap;

                .md-menu {
                    position: relative;

                    .md-button {
                        width: 100%;
                    }
                }

                .step {
                    display: flex;
                    flex-wrap: wrap;
                    column-gap: 20px;

                    button {
                        overflow: visible;

                        &:before {
                            border-radius: 4.5pt;
                        }

                        &:not(:last-of-type):after {
                            content: '';
                            position: absolute;
                            top: 50%;
                            border-bottom: 1px solid rgba(0 0 0 / 30%);
                            pointer-events: none;
                            width: 20px;
                            right: -23px;
                        }

                        &[disabled]:after {
                            opacity: .15;
                        }
                    }
                }
            }

            .md-button {

                i {
                    color: currentColor !important;
                }
            }

            hr {
                height: 30px;
                width: 1pt;
                border-radius: 30pt;
            }

            .fa-chevron-right {
                opacity: .2;
            }
        }

    }

    tr {
        &:hover td {
            background-color: inherit !important;
        }

        .md-checkbox {
            margin: 4px 0;

            .md-checkbox-container {
                margin: 0 32px;
            }
        }

        &.md-table-row {

            &.repay {
                background: transparent !important;
                pointer-events: none;
                opacity: .5;
                filter: grayscale();
            }
        }

        &.row-hide {
            display: none;
        }

        th {
            .md-checkbox-container {
                border-color: var(--md-theme-default) !important;
            }
        }

        td {
            .md-checkbox-container {
                border-color: var(--md-theme-default-primary-on-) !important;
            }
        }

        td,
        th {
            &.seperator {
                border-right: 1px solid var(--md-theme-default-divider-on-background);
            }

            &:first-of-type .md-checkbox.md-checked {

                &.md-disabled {
                    .md-checkbox-container {
                        border-color: transparent !important;
                        background: transparent !important;
                    }
                }
            }

            &:not(:first-of-type) .md-checkbox {
                margin: unset;

                .md-checkbox-container {
                    background-color: var(--md-theme-default-primary-on-) !important;
                    border: 0;
                    width: 32px;
                    height: 32px;

                    &:after {
                        border-color: var(--md-theme-default-theme);
                        margin: 8px;
                        border-width: 1px;
                    }
                }
            }
        }
    }

    .md-field {
        margin: 0;
        min-height: unset;
        padding: 0;

        &::before {
            border-radius: 0 0 3.5pt 3.5pt !important;
            height: 2pt;
        }

        &::after {
            opacity: 0;
        }
    }

    .firstDate {
        border-top: 2px solid rgba(0, 0, 0, .02);
    }

    .md-table-cell {

        img {
            border-radius: 2.5pt;
        }

        &.center .md-table-cell-container {
            display: block !important;
            text-align: center;
        }

        .md-card-header {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-left: 0;
        }
    }

    .md-table-row {

        &.md-warn {

            * {
                color: var(--md-theme-default-warn);
            }
        }

        &.no-site {
            pointer-events: none;

            td {
                height: inherit;
                border: none;

                >div {
                    padding-right: 0;
                    padding-top: 0 !important;
                    padding-bottom: 0 !important;

                    >div {
                        color: var(--md-theme-default-text-primary-on-background);
                        opacity: .54;
                        line-height: 38px;
                    }
                }
            }

            td:first-of-type,
            td:nth-child(n+3) {

                .md-table-cell-container {
                    div {
                        display: none !important;
                    }
                }
            }
        }

        &[disabled],
        &[readonly] {

            .md-table-cell-container {

                &:first-of-type {
                    .md-checkbox {
                        opacity: 0;
                    }
                }

                .md-field,
                .md-chip {
                    pointer-events: none;
                }
            }
        }

        &.no-select {
            user-select: none;
        }

        .md-table-cell {

            .md-table-cell-container {
                padding-top: 16px;
                padding-bottom: 16px;
            }

            .md-table-cell-container {

                >div:not([class]) {
                    min-height: 24px;
                    display: flex;
                    flex-wrap: inherit;
                    align-items: center;
                }

                >div.wrap {
                    line-height: 38px;
                    min-height: 38px;
                    display: flex;
                    align-items: center;
                    white-space: normal;
                }

                div:not(>div) {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .md-field {
                    min-width: 55px;
                }

                .md-has-textarea {
                    min-width: fit-content;
                }

                input,
                textarea {
                    max-width: 100%;
                    display: inline-grid;
                    background: var(--md-theme-default-primary-on-);
                    padding-left: 10px;
                    padding-right: 10px;
                    font-size: inherit;
                    font-family: 'Roboto Mono';

                    &[type=number]:placeholder-shown {
                        background-color: var(--md-theme-default-divider-on-background);

                        &::placeholder {
                            opacity: .2;
                        }
                    }
                }

                .md-prefix {
                    position: absolute;
                    left: 5pt;
                    font-size: 12px;
                    color: rgba(0, 0, 0, .4);
                    pointer-events: none;

                    +input {
                        text-align: right;
                    }
                }

                .md-caption {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-variant-numeric: tabular-nums;

                    &.tabular {
                        white-space: pre;
                    }
                }

                .md-suffix {
                    position: absolute;
                    white-space: pre;
                    left: calc(100% - 11pt);

                    &:not(.md-icon-button) {
                        font-size: 12px;
                        color: rgba(0, 0, 0, .4);
                        pointer-events: none;
                    }
                }
            }

            .md-autocomplete {

                &[count='0'] input {
                    filter: hue-rotate(80deg);
                }

                input {
                    padding-right: initial;
                }

                button {
                    display: none;
                }
            }

            .md-badge-content {

                &[value='0'],
                &[length='1'] {
                    .md-badge {
                        display: none;
                    }
                }

                .md-badge {
                    font-weight: bolder;
                    font-variant-numeric: tabular-nums;
                }
            }
        }
    }
}

div[pup-main] {
    display: flex;
    flex-direction: column;
    flex: 10;

    >.md-layout {
        display: flex;
        flex: 10;
    }
}

#app[loading] {

    &::before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 4px;
        background-color: var(--md-theme-default-primary);
        z-index: 100;
        animation: loading-animation 5s linear infinite alternate;
    }

    .md-field {
        &::after {
            content: '';
            width: 20px;
            height: 20px !important;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='10' stroke-width='3' stroke='%23404040' stroke-linecap='round' stroke-dasharray='20' fill='none'%3E%3C/circle%3E%3C/svg%3E");
            animation: spin 1s linear infinite;
            background-color: transparent;
            position: absolute;
            top: 9px;
            margin-left: 100%;
            left: -30px;
            opacity: .1;
        }
    }

    .md-display-1,
    .md-dialog-title {
        &:first-of-type {
            filter: brightness(.75) opacity(.6) grayscale(.5);
        }
    }
}


.md-shadow {
    box-shadow: none;
    border: 0;
    border-radius: 2.5pt;
    margin: 0 16px !important;
    overflow: hidden;

    iframe {
        border: 1px solid var(--md-theme-default-rowvariant);
    }
}

.page-container {
    border-radius: 0;

    .md-table {

        tr .md-table-head,
        tr .md-table-cell {

            @media (orientation:landscape) {
                transition: none;

                &:first-of-type {
                    padding-left: var(--app-width);
                }

                &:last-of-type {
                    padding-right: var(--app-width);
                }
            }
        }
    }

    .md-app {
        height: 100dvh;

        .md-drawer {
            gap: 24px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            max-width: 260px;
            background: #fff !important;
            z-index: 1;

            &:not(.md-active) {
                +main {
                    .menu-toggler {
                        width: 0;
                        position: relative;
                        left: -10px;
                    }
                }
            }

            &.md-active+main {
                .menu-toggler {
                    display: none;
                }
            }

            .md-menu {
                .md-button {
                    height: 40px;
                }
            }

            ul {
                ul {
                    margin-left: 22px;

                    &:before {
                        content: '';
                        display: block;
                        width: 0;
                        position: absolute;
                        top: 0;
                        bottom: 11px;
                        left: 0;
                        border-left: 1px solid;
                        border-color: rgba(0 0 0 / 25%);
                    }

                    li:last-of-type:after {
                        content: '';
                        display: block;
                        width: 0;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        border-left: 1px solid;
                        border-color: #fff;
                        height: calc(32px / 2);
                    }

                    li {
                        padding-left: 1.2em;

                        &:before {
                            content: '';
                            display: block;
                            width: 10px;
                            height: 0;
                            border-top: 1px solid;
                            margin-left: 1px;
                            position: absolute;
                            bottom: calc(32px / 2);
                            left: 0;
                            border-color: rgba(0 0 0 / 25%);
                        }
                    }
                }
            }

            li {
                user-select: none;

                &.double {

                    .md-avatar {
                        text-transform: capitalize;
                    }

                    .md-list-item-text {
                        span {
                            &:first-of-type {
                                line-height: 22px;
                            }
                        }
                    }
                }

                a,
                button {

                    &:hover,
                    &.router-link-active,
                    &.router-link-active .md-list-item-content {
                        color: var(--md-theme-default-accent) !important;
                    }

                    .md-list-item-text {
                        flex-direction: row;
                        gap: 10px;
                        align-items: center;

                        * {
                            width: unset;
                        }
                    }
                }
            }

            h3 {
                font-size: 1.6rem;
                font-weight: 400;
                margin: 0;
            }

            ~.md-overlay {
                display: none;
            }

            .md-menu {
                line-height: normal;

                >div[md-menu-trigger] {
                    cursor: pointer;
                }
            }

            .md-badge {

                &.md-dense {
                    height: 16px;
                    width: 16px;
                    font-size: 75%;
                }
            }

            .md-list {
                gap: 2pt;
                background: transparent;

                i {
                    min-width: 15px;
                    text-align: center;
                }

                .md-list-item {

                    .md-list-item-content {
                        gap: 23px;

                        .md-list-expand-icon {
                            opacity: .2;
                        }
                    }

                    .md-list-item-expand.md-active {
                        padding-bottom: 10px;
                        margin-bottom: 10px;
                        border-bottom-left-radius: 0 !important;
                        border-bottom-right-radius: 0 !important;
                        border-color: rgba(0 0 0 / 5%);
                    }

                    .md-list-item-expand {
                        border-top: none;

                        .md-list-item-content {
                            min-height: 32px;

                            .md-list-item-text {
                                i {
                                    font-size: 7pt;
                                }

                                span {
                                    font-size: smaller;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .md-toolbar {
        column-gap: 48pt;
        row-gap: 10pt;
        align-items: flex-start;

        .md-layout {
            flex-wrap: inherit;
        }

        @media (orientation:portrait) {
            >.md-layout>div {
                flex-wrap: nowrap;
                overflow: auto;
            }

            .flex {
                display: none;
            }
        }

        @media (orientation:landscape) {
            flex-wrap: initial;

            >.md-layout>div {
                flex-wrap: wrap;
            }
        }

        >div.md-layout>div {
            max-width: calc(100dvw - 48pt);
            gap: 5pt;
            display: flex;

            button {
                min-width: fit-content;
            }
        }

        >span {
            display: flex;
            flex-wrap: wrap;
        }

        .md-field:not(.md-chips) {
            background: var(--md-theme-default-rowvariant);

            &:after {
                height: 0 !important;
            }

            input {
                height: 36px;
            }
        }

    }

    .md-card {

        .md-card-header {
            white-space: nowrap;
            margin-bottom: 0;

            .shop-header {

                .md-title {
                    font-size: min(24px, 1.8vmax);
                }

                >div,
                >h2 {
                    display: flex;
                    gap: 12px;
                    justify-content: space-between;

                    div {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .md-chip {
                        transform: scale(.7);
                        transform-origin: right;
                        filter: saturate(1.5);
                    }
                }
            }

            h2 {
                text-overflow: ellipsis;
                overflow: hidden;

                &+.md-chip {
                    &+.md-chip {
                        margin-right: 0;
                    }
                }
            }
        }

        .md-card-area+.md-card-content {
            padding-top: 0;
        }

        .md-card-area+.md-card-content+.md-card-content {
            padding-top: 0;
        }

        .md-card-content {

            &:last-of-type {
                padding-bottom: 16px;
            }

            .md-button:not(.md-chip) {
                width: 100%;
            }
        }

        sup {
            position: relative;
            top: 3px;
            font-size: 60%;
            font-weight: 600;
        }
    }
}

.more-container {
    margin: 32px;

    >.md-layout {
        >div {
            flex: 1;
        }
    }

    input[type=range] {
        display: block;
        width: 100%;
        height: 10px;
        margin: 6px 0;
    }

    input[type="range"]::-webkit-slider-runnable-track,
    input[type="range"]::-moz-range-track {
        height: 100%;
        border-radius: 30pt;
        background-image: linear-gradient(to right, hsl(0, 50%, 40%), hsl(10, 50%, 40%), hsl(20, 50%, 40%), hsl(30, 50%, 40%), hsl(40, 50%, 40%), hsl(50, 50%, 40%), hsl(60, 50%, 40%), hsl(70, 50%, 40%), hsl(80, 50%, 40%), hsl(90, 50%, 40%), hsl(100, 50%, 40%), hsl(110, 50%, 40%), hsl(120, 50%, 40%), hsl(130, 50%, 40%), hsl(140, 50%, 40%), hsl(150, 50%, 40%), hsl(160, 50%, 40%), hsl(170, 50%, 40%), hsl(180, 50%, 40%), hsl(190, 50%, 40%), hsl(200, 50%, 40%), hsl(210, 50%, 40%), hsl(220, 50%, 40%), hsl(230, 50%, 40%), hsl(240, 50%, 40%), hsl(250, 50%, 40%), hsl(260, 50%, 40%), hsl(270, 50%, 40%), hsl(280, 50%, 40%), hsl(290, 50%, 40%), hsl(300, 50%, 40%), hsl(310, 50%, 40%), hsl(320, 50%, 40%), hsl(330, 50%, 40%), hsl(340, 50%, 40%), hsl(350, 50%, 40%), hsl(360, 50%, 40%));
    }

    .palette {
        text-align: center;
        line-height: 100px;
        border-radius: 8px;
        overflow: hidden;
    }

    iframe {
        border-radius: 8px;
        height: 750px !important;
    }
}

.md-switch-container {
    background-color: rgba(0, 0, 0, .1) !important;
}

.md-title,
.md-headline,
.md-display-1 {
    &.md-accent {
        color: var(--md-theme-default-accent);
    }
}

.md-subheading {
    font-weight: 500 !important;
}

.md-fab {
    box-shadow: none;
    color: #fff !important;

    &:not(.active) {
        background: var(--md-theme-default-primary-on-) !important;
        color: var(--md-theme-default-primary) !important;
    }
}

.md-field {

    input:disabled {
        opacity: .5;
    }

    &.center {
        .md-input {
            text-align: center;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }

    &.size-6 {
        width: calc(6 * .61em + 12pt);
    }

    &.size-8 {
        width: calc(8 * .61em + 12pt);
    }

    &.size-10 {
        width: calc(10 * .61em + 12pt);
    }

    &.size-12 {
        width: calc(12 * .61em + 12pt);
    }

    &.size-14 {
        width: calc(14 * .61em + 12pt);
    }

    &.size-15 {
        width: calc(15 * .61em + 12pt);
    }

    .md-select {
        input {
            text-align: center;
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
    }

    .md-input-action {
        right: 2px;
    }

    .md-date-icon {
        margin: 0;

        &:after {
            opacity: .0;
        }
    }
}

.md-field:not(.md-has-value):not(.md-focused) label {
    padding-left: 10px;
}

#app {
    &:not([loading]) {
        .md-empty-state {
            .md-layout {
                display: none;
            }
        }
    }
}

.md-empty-state {
    max-width: unset;
    padding-left: 0;
    padding-right: 0;

    .md-empty-state-container {
        align-items: unset;
        width: 100%;

        .md-layout {
            gap: 20px;
            min-width: 80dvw;
            padding: 0 24px;
            margin: 0 auto;
        }

        .fa-2xl {
            font-size: 3em;
            line-height: 90px;
        }
    }
}

.preview-butt {
    border-radius: 3pt;
    width: 60px;
    height: 60px;

    div {
        border-radius: 0 !important;
    }
}

mono {
    display: contents;
    font-family: monospace;
    font-weight: bolder;
}

.rules-check::before {
    content: '*';
    position: absolute;
    margin-left: -10px;
}

.price {
    display: inline-block !important;

    >div {
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }

    .strike-price {
        position: relative;
        display: inline-block !important;
        font-size: 75%;
        line-height: initial;
        opacity: .65;

        &:before {
            content: '';
            width: 100%;
            height: .55pt;
            background: currentColor;
            position: absolute;
            bottom: 46%;
            left: 0;
            border-radius: 5pt;
            transform: rotate(-7deg);
        }

        +span {
            display: block;
        }
    }

    .discount {
        display: inline-block;
        background: var(--md-theme-default-background-light);
        border-radius: 3pt;
        padding: 5pt;
        font-size: 50%;
        white-space: nowrap;
        color: #222;
        letter-spacing: .01em;
        line-height: normal;
    }
}

.md-avatar {
    background: transparent !important;

    &.shadow {
        box-shadow: #fff 0 0 0 2px;
        background: #fff !important;
    }

    .flag {
        height: 100%;
        width: 100%;
        min-width: unset;
        border-radius: 100%;
        background: var(--md-theme-default-divider-on-background);

        &.DE {
            background: linear-gradient(180deg, #000, #000 33%, #f00 33%, #f00 67%, #fc0 67%, #fc0);
        }

        &.DK {
            background: linear-gradient(90deg, transparent 30%, #fff 0, #fff 45%, transparent 0), linear-gradient(180deg, transparent 38%, #fff 0, #fff 59%, transparent 0), #C60C30;
        }

        &.SE {
            background: linear-gradient(90deg, transparent 30%, #fecc00 0, #fecc00 45%, transparent 0), linear-gradient(180deg, transparent 38%, #fecc00 0, #fecc00 59%, transparent 0), #006aa7;
        }

        &.ES {
            background: linear-gradient(180deg, #AA151B, #AA151B 25%, #F1BF00 25%, #F1BF00 75%, #AA151B 75%, #AA151B);
        }

        &.PT {
            background: linear-gradient(90deg, #006600 40%, #FF0000 40%);
        }

        &.IT {
            background: linear-gradient(90deg, #009246, #009246 33%, #FFF 33%, #FFF 67%, #CE1126 67%, #CE1126);
        }

        &.NL {
            background: linear-gradient(180deg, #AA151B, #AA151B 33%, #FFF 33%, #FFF 67%, #21468B 67%, #21468B);
        }

        &.BE {
            background: linear-gradient(90deg, #000, #000 33%, #FDBB30 33%, #FDBB30 67%, #ED2939 67%, #ED2939);
        }

        &.BR {
            background-color: #FFE000;
            background-image: linear-gradient(147deg, #009639 0, #009639 34.09%, transparent 34.09%), linear-gradient(213deg, #009639 0, #009639 34.09%, transparent 34.09%), linear-gradient(-33deg, #009639 0, #009639 34.09%, transparent 34.09%), linear-gradient(33deg, #009639 0, #009639 34.09%, transparent 34.09%);

            &::before {
                content: '';
                display: block;
                position: absolute;
                width: 30%;
                height: 30%;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                background-color: #012169;
                background-image: radial-gradient(circle at 17px 116px, #012169 88px, transparent 89px), radial-gradient(circle at 17px 116px, #FFFFFF 94px, transparent 95px);
                transform: translate(-50%, -50%);
            }
        }

        &.UK {
            background: linear-gradient(90deg, transparent 40%, #DE2910 0, #DE2910 55%, transparent 0), linear-gradient(180deg, transparent 40%, #DE2910 0, #DE2910 59%, transparent 0), #fff;
        }

        &.US {
            background: repeating-linear-gradient(180deg, red, red 50%, white 50%, white 100%);
            background-size: 20% 20%;

            &:before {
                content: '';
                background: #191b6d;
                display: block;
                width: 50%;
                height: 50%;
                position: absolute;
            }
        }
    }
}

.nowrap {
    white-space: nowrap;
}

.md-progress-bar {
    border-radius: 4pt;
}

#cart {
    --md-theme-default-primary: #000;
    --md-theme-default-primary-on-background: #000;
    --md-theme-default-accent: #000;

    .md-dialog-container {
        min-width: min(600px, 100vw);
        max-height: 100dvh;
        overflow: hidden;
        transition: height .5s ease-out;

        .md-steppers {
            display: flex;
            flex-direction: column;
            flex-grow: 1;

            .md-steppers-navigation {

                .md-stepper-header,
                .md-stepper-header .md-ripple {
                    height: 100px;
                    min-height: 100px;
                    max-height: 100px;

                    &:hover::before {
                        background-color: transparent;
                    }

                    .md-stepper-number {
                        background: transparent;
                        color: black;
                        box-shadow: 0 0 0 2px black;
                        opacity: .2;

                        svg {
                            fill: var(--md-theme-default-accent);
                        }
                    }

                    &.md-button:not(.md-active):not(.md-done) {
                        pointer-events: none;
                    }

                    &.md-active,
                    &.md-done {
                        .md-stepper-number {
                            color: var(--md-theme-default-accent);
                            box-shadow: 0 0 0 2px var(--md-theme-default-accent) !important;
                            opacity: 1;
                        }
                    }
                }
            }
        }

        .md-steppers-wrapper {
            flex-grow: 1;
            transition: height .25s ease-in-out;

            .md-steppers-container {
                .md-stepper {
                    background: var(--md-theme-default-divider-on-background);
                    max-height: calc(100dvh - 132px);
                    padding: 0;
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    overflow-y: auto;
                    overflow-x: hidden;

                    .md-stepper-content {
                        flex-grow: 1;
                        display: flex;
                        flex-direction: column;
                        position: relative;

                        >div:not(.expander) {
                            &:first-of-type {
                                padding: 32px 32px 24px 32px !important;
                            }

                            &:not(:last-of-type) {
                                padding: 16px;
                            }
                        }
                    }
                }
            }
        }

        .md-chip {
            justify-content: center;
        }

        .expander {
            flex-grow: 2;
            justify-content: center;
            display: flex;
            align-items: center;
            text-align: center;
            margin: 16px 0;
        }

        .actions {
            background: var(--md-theme-default-background, #fff);
            display: flex;
            gap: 16px;
            position: sticky;
            min-height: 84px;
            justify-content: center;
            width: 100%;
            padding: 24px 16px;
            bottom: 0;

            >.md-button {
                flex-basis: 50%;

                .md-button-content {
                    flex-grow: 1;

                    span {
                        flex-grow: 1;
                    }
                }
            }
        }
    }

    .row {
        border-top: 1px dashed rgba(0 0 0 / 10%);
        column-gap: 8px;
        margin: 0 16px;
        justify-content: space-between;
        align-items: baseline;

        &.link {
            cursor: pointer;
        }

        .md-radio {
            margin: unset;
        }

        .md-layout-item {

            &.md-size-20:first-of-type {
                display: flex;
                justify-content: flex-start;
                align-self: center;
            }

            &:not(.md-size-50)>div {
                gap: 10px;
                display: flex;
                flex-direction: column;
            }

            .md-radio {
                margin: 10px 16px;
            }

            img {
                &.v-lazy-image {
                    width: 50px;
                    height: 50px;
                }
            }

            .md-field {
                min-height: inherit;
                padding: 0;

                input {
                    height: inherit;
                    font-size: inherit;
                }
            }

            .md-radio-label {
                height: initial;
            }

            &.center>div {
                text-align: center;
                justify-content: center;
            }

            &.right {
                text-align: right;
                display: flex;
                flex-direction: column;

                >div,
                >span {
                    text-align: end;
                    justify-content: end;
                }
            }

            .price {
                margin: 0;

                &.md-headline {
                    font-size: 20px;
                }
            }
        }
    }
}

.my-logo {
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    min-width: 4.1pt;
    min-height: 4.1pt;
}

.md-avatar {
    .my-logo {
        min-width: 100%;
        min-height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}


#app[path^='/prices'] {

    .md-table-fixed-header-container {
        display: none;
    }
}

.markdown {
    overflow: auto;

    table {
        border-collapse: collapse;
        width: 100%;

        th,
        td {
            padding: 2pt 5pt;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        th {
            background-color: transparent !important;
            font-weight: normal;
            border-bottom: 1px solid var(--md-theme-default-divider-on-background);
        }

        td {
            font-weight: lighter;
        }
    }

    h3 {
        font-weight: 400;
        text-align: center;
        background: var(--md-theme-default-divider-on-background);
        padding: 5pt;
        border-radius: 5pt;
    }

    hr {
        margin: 20pt 0;
        border-bottom: 0;
        opacity: .1;
    }
}

#app[path^='/shop'],
.md-dialog .actions {

    a:not([href]) {
        pointer-events: none;
    }

    flex-direction: column;

    >div {
        display: grid;
        column-gap: 20px;
        grid-template-columns: auto minmax(auto, 275px);
    }

    .md-button {
        &:hover {
            &:before {
                opacity: .9;
            }
        }

        &:not(.md-chip) {
            &:before {
                opacity: .1;
                background-color: var(--md-theme-default-primary);
            }

            &:hover {
                &:before {
                    opacity: .25;
                }
            }
        }

        &.no-bg:not(:hover):before {
            background-color: white;
        }

        &.md-chip {
            &.md-theme-default {
                background-color: var(--md-theme-default-divider-on-background);
            }
        }

        &.md-chip:hover {
            &:before {
                background-color: unset;
            }
        }
    }
}

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

    &.max {
        min-width: fit-content;
        gap: 10px;
        display: flex;
    }

    &.md-primary {
        background-color: var(--md-theme-default-primary-on-) !important;
        color: initial !important;
    }

    &.md-warn {
        color: var(--md-theme-default-warn);
    }
}

#products {
    .md-card {
        &:hover {
            .md-card-media {

                &:not(.Kids),
                &.Belt {
                    .lazy-wrapper {
                        transform: scale(1.05) !important;
                    }
                }

                &.Kids:not(.Belt) {
                    .lazy-wrapper {
                        transform: scale(.96) !important;
                    }
                }
            }
        }
    }
}

.md-card-media {
    min-width: 1px;
    display: flex;

    .md-badge {
        pointer-events: none !important;
    }

    .lazy-wrapper {
        transform: scale(1);
        transform-origin: bottom;
        transition: transform .2s ease-in-out .01s;
    }

    &.Kids:not(.Belt) {
        .lazy-wrapper {
            transform: scale(.9);
        }
    }

    .lazy-wrapper {
        width: 100%;
    }

    iframe~svg,
    iframe~img {
        display: none;
    }

    >div {
        position: absolute;
        background-size: cover;
    }

    >.md-chip {
        padding: 7%;
        height: fit-content;
        position: absolute;
        z-index: 10;
        opacity: .9;
    }

    .md-badge {
        background: white;
        color: var(--md-theme-default-text-primary-on-background);
        font-weight: 500;
        margin: 7%;
        bottom: 0;
        right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &.md-ratio-1-1 {
        box-shadow: 0 -20px 140px -30px var(--md-theme-default-divider-on-background) inset;
        height: fit-content;

        &.animate {

            >* {
                animation: fadein .5s ease-in-out 0s forwards;
            }
        }

        &:not(.animate) {

            >* {
                opacity: 0;
            }
        }

        .my-logo {
            transform: initial;
        }

        img:not(.my-logo) {
            position: initial;
            transform: initial;
        }
    }
}

#app[path^='/shop'] {
    background-color: #fff;

    .md-content {
        background-color: transparent;
    }

    .md-overlay {
        display: none;
    }

    .md-toolbar {
        user-select: none;

        @media screen and (orientation:portrait) {
            padding: 0 16px;
        }
    }

    .md-app-scroller {
        overflow-y: scroll !important;
        overflow-x: hidden;

        .md-app-content {
            border: none;
            margin-top: 0;
        }
    }

    .banner-warn {
        background: var(--md-theme-default-warn);
        color: rgb(255, 255, 255);
        font-size: 1rem;
        padding: 10pt;
        border-radius: 2pt;
        text-align: center;
        z-index: 10;
        margin-bottom: 25pt;
    }

    .md-badge-content {
        .md-button+.md-badge {
            pointer-events: none;
        }
    }

    #product {
        margin-top: 32px;

        >.md-card {
            max-width: 100vw;

            >div:first-of-type {
                gap: 2px;
                width: 100vw;
                display: grid;
                grid-template-rows: auto;
                grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
                height: fit-content;

                @media (orientation:landscape) and (min-width: 1440px) {
                    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
                }
            }

            >div {
                &:last-of-type {
                    margin: 16px 32px;
                }
            }
        }
    }

    #products {
        display: grid;
        grid-template-rows: auto;
        width: 100%;

        @media screen and (orientation:portrait) {
            grid-gap: 6px;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }

        @media (orientation:landscape) {
            grid-gap: 16px;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            margin: 0 16px;
        }
    }

    #products-alternative {
        display: grid;
        grid-template-rows: auto;
        width: 100%;

        @media screen and (orientation:portrait) {
            grid-gap: 6px;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        @media (orientation:landscape) {
            grid-gap: 16px;
            grid-template-columns: repeat(8, minmax(0, 1fr));
            align-items: center;
        }

        .md-card-content {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .md-card {
        overflow: hidden;
        user-select: none;
        box-shadow: none;
        margin: 0;
        flex-grow: 1;
        background-color: transparent;

        &:after {
            background-color: rgba(0 0 0 / 3%);
        }

        &.unavailable {
            filter: grayscale(.5) opacity(.4);
        }

        &.hide {
            display: none;
        }

        .md-card-header {

            &:first-of-type {
                display: flex;
                align-items: center;

                h2 {
                    flex-shrink: 0;
                    margin-right: 10pt;
                    max-width: 75dvw;
                }
            }

            &+.md-card-header {
                padding-top: 0;
            }
        }
    }

    .md-layout-item>.md-chip {
        >div {
            column-gap: 10px;
            display: flex;
            align-items: center;
            color: initial;
        }
    }

    .md-chip {
        cursor: default;

        &.router-link-exact-active {

            .fa-regular::before,
            .fa-solid::before {
                color: var(--md-theme-default-accent) !important;
            }
        }

        &.md-theme-default .fa-regular::before {
            color: var(--md-theme-default-primary);
        }

        &.md-button {
            cursor: pointer;
            font-weight: 400 !important;
            min-width: unset;
            height: 32px;
        }
    }
}

.filter-bar {
    gap: 8px;
    padding: 16px;

    .md-divider {
        height: 32px;
        width: 1px !important;
        margin: 0 18px;
    }

    .md-button {
        gap: 5pt;
    }
}

button {
    &.md-chip {
        padding: 0;
    }
}

.md-button.filter-button {
    gap: 5pt;

    &.md-icon-button {
        transform: translateX(-16px) scale(.75);
        position: absolute;

        &:before {
            background-color: var(--md-theme-default-warn) !important;
            opacity: initial !important;
        }

        .md-button-content {
            color: var(--md-theme-default-background);
        }
    }
}

.link {
    height: initial;
    font-size: inherit;
    font-weight: inherit;
    min-width: unset;
    line-height: inherit;

    .md-button-content {
        color: var(--md-theme-default-primary) !important;
    }

    &:not(.router-link-active) {
        .md-button-content {
            text-decoration: underline;
        }
    }

    &:before {
        background: transparent !important;
    }

    .md-ripple {
        padding: initial;
    }
}

.footer {
    opacity: .5;
    font-size: .7rem;
    margin: 0 auto 16px auto;
    filter: grayscale();

    b {
        font-weight: 500;
    }

    a {
        margin: 0;
    }

    p {
        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

a:not(.action):not(.md-button):not(.md-button-clean) {
    text-underline-offset: 2px;
}

/* Embed */
#template-container-shop {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &:not(.embed) {
        #cart-trigger-embed {
            display: none;
        }
    }

    &.embed {

        .filter-bar {
            overflow-x: auto !important;
            flex-wrap: nowrap !important;
            justify-content: left !important;
        }

        >div.md-toolbar {
            display: none;
        }

        #cart-trigger-embed {
            float: right;
            margin-right: 32px;
        }
    }
}


#version {
    font-size: .5rem;
    opacity: .4;
    position: absolute;
}

@media (max-width: 600px) {
    .md-xsmall-hide {
        display: none !important; /* !important needed for overriding flexboxes to work */
    }
}

@media (max-width: 960px) {
    .md-small-hide {
        display: none !important; /* important needed */
    }
}