:root{
    --w_standIcon: 25px;
}
#boxCreator {
    display: flex;
    text-align: center;
    justify-content: center;

    padding: 8px;
    gap: 8px;

    border: 2px solid var(--border_color);
    border-radius: 8px;

    
}

#boxList{
    background-color: gray;

    padding: 12px;
}

.standIcon{
    width: var(--w_standIcon);
    height:var(--w_standIcon);
    user-select: none;
}

.draggableIcon{
    cursor: grab;
}

.stand{
    background-color: var(--accent_color);
    border: 2px solid var(--border_color);
    border-radius: 10px;

    padding-left: 8px;

    margin: 4px;
    
    display: flex;
    align-items:center;
    gap: 20px;

    width: 200px;
}

.standButton {
    background-color: var(--standButton_color, var(--border_color));
    width: var(--w_standIcon);
    height: var(--w_standIcon);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 0.5px solid black;
    margin: 2px;
}

.standButton:hover {
    filter: brightness(0.8);
}

.up {
    --standButton_color: hsl(182, 71%, 54%);
}

.down {
    --standButton_color: hsl(182, 71%, 54%);
}

.delete {
    --standButton_color: hsl(0, 64%, 40%);
}

.controls {
    display: flex;
    margin-left: auto;
    margin-right: 8px;
    justify-self: flex-end;

    border: 2px solid black;
    border-radius: 8px;

    padding: 4px 4px;

    background-color: var(--border_color);
}