:root { --image-height: 38px; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; padding: 5px; }
div#inputArea { width: 100%; }
form { background: rgb(255, 255, 255); padding: 3px;}
form input { padding: 2px; }
span.label { display: inline-block; width: 10%; min-width: 60px; padding-right: 5px; text-align: left; padding-top: 5px;}
.dieImg { height: var(--image-height); }
#selectedDiceDisplay {display: inline-block; background: rgb(240, 240, 240); border: 1px solid rgb(0,0,0); width: 90%; }
#availableDice { min-width: calc(7*var(--image-height) + 6px); }
#availableDice, #selectedDiceDisplay { height: calc(var(--image-height) + 6px); padding: 2px; }
input#name, input#m { min-width: 100px; width: 75%; }
#msgandsend         { display: inline-block; width: 80%; }
button { min-width: 50px; background: rgb(224, 224, 224); padding: 2px; margin-left:auto; border-radius: 4px; }
form button { width: 9%; }
.input-row { display:flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 1px;}
.col40, .col60 { display: inline-block; }
.col40 { width: 39%; min-width: 200px;}
.col60 { width: 59%; min-width: 200px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: rgb(240, 240, 240); }
#participantsContainer { width: 20%; min-width: 120px; }
#participantsContainer, #serverStatusContainer  { float: right; background: rgb(255, 255, 255); border: 1px solid black; padding: 5px; margin-right: 5px;}
#changeroom  { float: right; margin-right: 10px; font-size: 10px; padding-top: 5px; padding-bottom: 4px; margin-top:1px;}
#participants { list-style-type: none; margin: 0; padding: 0; }
#participants li:nth-child(odd) { background: rgb(240, 240, 240); }
.disconnected { color: rgb(255, 0, 0); }
.connected    { color: rgb(0, 255, 0); }
.footer       { position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; padding-bottom: 5px; }