body {
    background: #f3f6f9;
}

.app-wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
}

.legend-text {
    margin-bottom: 0;
}

.legend-item {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 6px;
    padding: 6px 10px;
    color: #ffffff;
    border-radius: 4px;
    font-size: 0.9rem;
}

.legend-round {
    background: #f08a24;
}

.legend-square {
    background: #cc4b37;
}

.group-selector-box,
.group-info-box,
.completion-box {
    margin-bottom: 1rem;
}

.group-selector-form label {
    margin-bottom: 0.5rem;
}

.group-title,
.group-progress {
    margin-bottom: 0.25rem;
}

.word-list {
    min-height: 120px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 4px;
}

.word-item {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 10px 14px;
    background: #1779ba;
    color: #ffffff;
    border-radius: 4px;
    cursor: move;
    user-select: none;
}

.word-item.word-round {
    background: #f08a24;
}

.word-item.word-square {
    background: #cc4b37;
}

.word-item.dragging {
    opacity: 0.5;
}

.word-item.over {
    outline: 2px dashed #0a0a0a;
}