* {
    transition-property: background, fill, background-color, border;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

html,
body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

main {
    min-height: 100%;
    display: flow-root;
    background-image: linear-gradient(22.5deg, rgba(67, 67, 67, 0.02) 0%, rgba(67, 67, 67, 0.02) 29%, rgba(47, 47, 47, 0.02) 29%, rgba(47, 47, 47, 0.02) 37%, rgba(23, 23, 23, 0.02) 37%, rgba(23, 23, 23, 0.02) 55%, rgba(182, 182, 182, 0.02) 55%, rgba(182, 182, 182, 0.02) 69%, rgba(27, 27, 27, 0.02) 69%, rgba(27, 27, 27, 0.02) 71%, rgba(250, 250, 250, 0.02) 71%, rgba(250, 250, 250, 0.02) 100%), linear-gradient(67.5deg, rgba(117, 117, 117, 0.02) 0%, rgba(117, 117, 117, 0.02) 14%, rgba(199, 199, 199, 0.02) 14%, rgba(199, 199, 199, 0.02) 40%, rgba(33, 33, 33, 0.02) 40%, rgba(33, 33, 33, 0.02) 48%, rgba(135, 135, 135, 0.02) 48%, rgba(135, 135, 135, 0.02) 60%, rgba(148, 148, 148, 0.02) 60%, rgba(148, 148, 148, 0.02) 95%, rgba(53, 53, 53, 0.02) 95%, rgba(53, 53, 53, 0.02) 100%), linear-gradient(135deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 6%, rgba(251, 251, 251, 0.02) 6%, rgba(251, 251, 251, 0.02) 18%, rgba(2, 2, 2, 0.02) 18%, rgba(2, 2, 2, 0.02) 27%, rgba(253, 253, 253, 0.02) 27%, rgba(253, 253, 253, 0.02) 49%, rgba(128, 128, 128, 0.02) 49%, rgba(128, 128, 128, 0.02) 76%, rgba(150, 150, 150, 0.02) 76%, rgba(150, 150, 150, 0.02) 100%);
}

#content {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.main {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.main_scroll {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    padding-top: 56px;
    
}

@media(max-width: 345px) {
    s-appbar>.logo {
        visibility: hidden;
    }
}

s-text-field {
    --border-radius: 10px;
}

s-appbar>.logo {
    display: flex;
    border-radius: 12px;
    height: 100%;
    width: min-content;
    align-items: center;
}

s-appbar>.logo>svg {
    fill: var(--s-color-primary);
    height: 32px;
    margin: 0 8px;
}

s-appbar>.logo>.title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 8px;
    color: var(--s-color-primary);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

s-picker-item::part(text) {
    display: flex;
    justify-content: center;
}

s-picker::part(container) {
    border-radius: 12px;
    min-width: 75px;
}