:root {
    --divider-color: rgba(0,0,0,.12);
    --block-space: 15px;
    --disabled-bg: #aaa;
    --table-header-bg: #eaecf0;
    --success-color: #2BBF30;
    --loose-color: #f5222d;
    --pending-active-color: rgba(255, 255, 255, .8);
}


@keyframes progress-bar-stripes {
    from {
        background-position: 50px 0;
    }

    to {
        background-position: 0 0;
    }
}

.container--row {
    margin-top: var(--block-space);
    margin-bottom: var(--block-space);
}

.panel--header {
    margin-bottom: var(--block-space);
    border-bottom: 1px solid var(--divider-color);
}

.cell__disabled {
    background: var(--disabled-bg);
    border-color: var(--disabled-bg);
}

.cell__head {
    background: var(--table-header-bg);
    border-color: var(--table-header-bg);
}

.cell__success {
    background: var(--success-color);
}

.cell__loose {
    background: var(--loose-color);
}

.cell__playing {
    font-size: 12px;
    background-color: #fafbfd;
    background-image: linear-gradient(-45deg,#fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent);
    background-size: 50px 50px;
    animation: reverse progress-bar-stripes 0.8s linear infinite,animate-positive 2s;
}

.cell__highlight {
    filter: brightness(0.8);
}

.cell__pending.cell__highlight {
    background: var(--pending-active-color);
}

.mui-table {
    border-collapse: collapse;
}

.schedule--list {
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow: auto;
}

.schedule {
    padding: 5px 0;
    list-style: none;
    color: #2D2F33;
}

.schedule .time {
    margin-right: 20px;
}

.schedule .score {
    display: inline-block;
    width: 30px;
}

.schedule .team {
    display: inline-block;
    width: 50px;
}

.schedule__done .time {
    color: #a8abb3;
}

.schedule__running .time {
    color: #0d8dfc;
}