/* all */
#content {
    margin: auto;
    width: 80%;
    padding: 10px;
}

/* header */
h1 {
    font-size: 2em;
    margin: 0px;
    padding: 0px;
}

#userControls {}

/* chat */
#chatBox {
    height: 400px;
    display: flex;
    flex-direction: column;
}

#chatContainer {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.tabs {
    display: flex;
}

.tab {}

#userList {
    flex: 1;
}

#roomList {}

#chatMessages {
    flex: 4;
    display: flex;
    flex-direction: column;
}

#chatMessagesContent {
    border-radius: 5px;
    flex: 1;
    overflow-y: auto;
}

#chatInput {
    display: flex;
}

#chatInput input {
    flex: 1;
}

#chatInput button {}

/* game list */

#gameList {
    display: flex;
    flex-direction: column;
    margin: 5px;
}

.headerRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.listRow {
    display: flex;
}

.colCell {
    flex: 1;
}

.colCellDouble {
    flex: 2;
}