.layout-container {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    padding: 0;
    width: 100%;
    height: calc(100vh - 64px);
    z-index: 1;
}

.scroll-no-bar {
    overflow-x: auto;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.scroll-no-bar::-webkit-scrollbar {
    display: none;  /* WebKit */
}

.dotted-background {
    background-color: var(--mud-palette-background);
    background-image: radial-gradient(
        rgba(var(--mud-palette-primary-rgb), 0.5) 0.5px,
        var(--mud-palette-background) 0.5px
    );
    background-size: 10px 10px;
}

.dotted-background > * {
    opacity: 1;
}

.drag-container {
    position: relative;
    transform-origin: top left;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px var(--mud-palette-success); }
    50% { box-shadow: 0 0 20px var(--mud-palette-success), 0 0 30px var(--mud-palette-success); }
    100% { box-shadow: 0 0 5px var(--mud-palette-success); }
}

.glow-card-selectable {
    animation: pulse-glow 2s infinite;
}

.glow-card-selectable:hover {
    animation: none;
    box-shadow: 0 0 25px var(--mud-palette-info) !important;
}

.glow-card-not-selectable {
    box-shadow: 0 0 15px var(--mud-palette-error) !important;
}

.bg {
    animation: slide 12s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, var(--mud-palette-primary-darken) 50%, var(--mud-palette-primary-lighten) 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

.bg2 {
    animation-direction: alternate-reverse;
    animation-duration: 16s;
}

.bg3 {
    animation-duration: 20s;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}


.frost-container {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.order-result-part-selected {
    background: var(--mud-palette-primary);
}

.order-result-part-not-selected {
    opacity: 0.5;
    background: var(--mud-palette-black);
}