.mud-badge.mud-badge-top.right.mud-badge-overlap-closer {
    inset: auto auto calc(100% - 18px) calc(100% - 18px)
}

.mud-badge-icon-smaller {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
}

.mud-table-denser .mud-table-row th, .mud-table-denser .mud-table-row td {
    padding: 6px 12px 6px 12px !important;
    padding-inline-start: 12px !important;
    padding-inline-end: 12px !important;
}

.table-with-tooltip .mud-table-container {
    padding-top: 4px;
}

.notifications-popover {
    width: 400px;
    max-width: 100%;
    max-height: 85vh;
}

.responsive-datagrid-popover {
    max-height: calc(50vh - 100px);
    overflow-y: auto;
}

.sticky-header {
    position: sticky;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
    background-color: var(--mud-palette-surface);
    z-index: 1;
}

.mud-timeline-denser::before {
    left: 29px !important;
}

.mud-timeline-denser .mud-timeline-item-content {
    max-width: calc(100% - 46px) !important;
}

.mud-timeline-denser .mud-timeline-item-divider {
    min-width: 60px !important;
}

.mud-timeline-dot-size-xs .mud-timeline-item-dot {
    width: 21px !important;
    height: 21px !important;
}

.mud-timeline-dot-size-xs .mud-timeline-item-dot-inner {
    width: 15px !important;
    height: 15px !important;
}

.mud-timeline-dot-size-xxs .mud-timeline-item-dot {
    width: 18px !important;
    height: 18px !important;
}

.mud-timeline-dot-size-xxs .mud-timeline-item-dot-inner {
    height: 12px !important;
    width: 12px !important;
}

@media(min-width: 0px)and (orientation: landscape) {
    .sticky-header {
        top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4);
    }
}

@media(min-width: 600px) {
    .sticky-header {
        top: var(--mud-appbar-height);
    }
}

.custom-table-toolbar .mud-table-toolbar {
    height: 100%;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 12px;
}

@media(min-width: 600px) {
    .mud-table-toolbar .mud-button-filled-size-medium {
        height: 36px;
    }
}

.mud-data-grid .mud-chip {
    margin: 0px;
}

.section-with-comments {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: auto;
    padding: 16px;
}

@media (min-width: 1280px) {
    .section-with-comments {
        grid-template-columns: auto 535px;
    }

    .section-with-comments .comments {
        top: 144px;
        position: fixed;
        bottom: 16px;
        right: 16px;
        width: 535px;
    }
}

.attachment-thumbnail {
    width: 100%;
    height: 240px;
}

@media (min-width: 640px) {
    .attachment-thumbnail {
        width: 640px;
        height: 360px;
    }
}

.chip-bald {
    font-family: var(--mud-typography-button-family);
    font-weight: var(--mud-typography-button-weight);
    letter-spacing: var(--mud-typography-button-letterspacing);
    text-transform: var(--mud-typography-button-text-transform);
}

.snow {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.snow .layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.snow .track {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 200px;
    will-change: transform;
}

.snow .layer.near .track.a {
    background-image: url('snow1.png');
}

.snow .layer.near .track.b {
    background-image: url('snow1.png');
}

.snow .layer.mid .track.a {
    background-image: url('snow2.png');
}

.snow .layer.mid .track.b {
    background-image: url('snow2.png');
}

.snow .layer.far .track.a {
    background-image: url('snow3.png');
}

.snow .layer.far .track.b {
    background-image: url('snow3.png');
}


@keyframes slide-near {
    from {
        transform: translateY(-100%) translateX(-80px);
    }

    to {
        transform: translateY(100%) translateX(80px);
    }
}

@keyframes slide-mid {
    from {
        transform: translateY(-100%) translateX(-50px);
    }

    to {
        transform: translateY(100%) translateX(50px);
    }
}

@keyframes slide-far {
    from {
        transform: translateY(-100%) translateX(-20px);
    }

    to {
        transform: translateY(100%) translateX(20px);
    }
}

.snow .layer.near .track.a {
    animation: slide-near 10s linear infinite;
}

.snow .layer.near .track.b {
    animation: slide-near 10s linear infinite;
    transform: translateY(-100%);
    animation-delay: 5s;
}

.snow .layer.mid .track.a {
    animation: slide-mid 20s linear infinite;
}

.snow .layer.mid .track.b {
    animation: slide-mid 20s linear infinite;
    transform: translateY(-100%);
    animation-delay: 10s;
}

.snow .layer.far .track.a {
    animation: slide-far 40s linear infinite;
}

.snow .layer.far .track.b {
    animation: slide-far 40s linear infinite;
    transform: translateY(-100%);
    animation-delay: 20s;
}