.pool-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;

}

.pool-container > .pool {
    flex-grow: 1;
    width: calc(50% - 1rem);
    background: var(--bg-dark-color);
    border-radius: 1rem;
    box-shadow: var(--box-shadow);
}

.pool-container > .pool > h3 {
    padding: 0.5rem;
    margin: 0;
    text-align: right;
}

.pool-container > .pool > table {
    margin: 0.3rem 0;
    table-layout:fixed;
}

.pool-container > .pool > table > tbody > tr.player {
    cursor: pointer;
}

.pool-container > .pool > table > tbody > tr.player.selected {
    background: repeating-linear-gradient(
        45deg,
        var(--selected-main-color),
        var(--selected-main-color) var(--background-stripe-width),
        var(--selected-secondary-color) var(--background-stripe-width),
        var(--selected-secondary-color) var(--background-stripe-width-2)
    );
}

.pool-container > .pool > table > tbody > tr.player.downgraded {
    background: repeating-linear-gradient(
        45deg,
        var(--downgradable-main-color),
        var(--downgradable-main-color) var(--background-stripe-width),
        var(--downgradable-secondary-color) var(--background-stripe-width),
        var(--downgradable-secondary-color) var(--background-stripe-width-2)
    );
}

.pool-container > .pool.reserve {
    background: repeating-linear-gradient(
        45deg,
        var(--downgradable-main-color),
        var(--downgradable-main-color) var(--background-stripe-width),
        var(--downgradable-secondary-color) var(--background-stripe-width),
        var(--downgradable-secondary-color) var(--background-stripe-width-2)
    );
}

.pool-actions {
    display: none;
    position: absolute;
}

.pool-actions.show {
    display: block;
    background-color: var(--bg-color);
    border-radius: 0 0 1rem 1rem;
    box-shadow: var(--box-shadow);
}

.pool-actions > .close-action-panel-button {
    float: right;
    padding: 0.25rem 0.75rem;
}

.pool-container .pool-title:hover {
    background: var(--bg-dark-color);
    cursor: pointer;
}

.pool-container.action-swap-players tr.player {
    opacity: 1;
        background: repeating-linear-gradient(
        45deg,
        var(--targetable-main-color),
        var(--targetable-main-color) var(--background-stripe-width),
        var(--targetable-secondary-color) var(--background-stripe-width),
        var(--targetable-secondary-color) var(--background-stripe-width-2)
    );
}
.pool-container.action-swap-players .pool-title {
    opacity: 0.5;
}

.pool-container.action-move-player tr.player {
    opacity: 0.5;
}
.pool-container.action-move-player .pool-title {
    opacity: 1;
        background: repeating-linear-gradient(
        45deg,
        var(--targetable-main-color),
        var(--targetable-main-color) var(--background-stripe-width),
        var(--targetable-secondary-color) var(--background-stripe-width),
        var(--targetable-secondary-color) var(--background-stripe-width-2)
    );
}

.pool-list {
    margin: 1rem auto;
}

.pool-list thead > tr > th {
    border-bottom: 1px solid var(--text-color);
}

.pool-list td.number,
.pool-list th.number {
    text-align: right;
}


.pool-list tr.border-bottom > td {
    border-bottom: 1px dashed var(--text-color);
}