#app {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

#gameMenu, #actionsMenu, #history {
overflow: auto;
width: 100%;
height: 100%;
}

@supports(display: grid){

#app.desktop1 {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 4em;
grid-template-areas:
"history game actions"
"chat chat chat";
}

#app.desktop2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 3fr 5fr 4em;
grid-template-areas:
"history history"
"game actions"
"chat chat";
}

#app.mobile3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 4em;
grid-template-areas:
"history game actions"
"chat chat chat";
}

#app.mobile1 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 3fr 5fr 4em;
grid-template-areas:
"history history"
"game actions"
"chat chat";
}

#app.mobile2  {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 3fr 4fr 3fr 4em;
grid-template-areas:
"history"
"game"
"actions"
"chat";
}

#historyArea {
grid-area: history;
}

#gameArea {
grid-area: game;
}

#actionsArea {
grid-area: actions;
}

#chatArea {
grid-area: chat;
}

} /*@supports(display: grid)*/
@supports not (display: grid){

#chatArea {
position: absolute;
left: 0;
bottom: 0;
width: 100vw;
height: 4em;
}

#app.desktop1 #historyArea {
position: absolute;
left: 0;
top: 0;
bottom: 4em;
width: 50vw;
height: calc(100vh - 4em);
}

#app.desktop1 #gameArea {
position: absolute;
left: 50vw;
top: 0;
bottom: 4em;
width: 25vw;
height: calc(100vh - 4em);
}

#app.desktop1 #actionsArea {
position: absolute;
left: 75vw;
top: 0;
bottom: 4em;
width: 25vw;
height: calc(100vh - 4em);
}

#app.desktop2 #historyArea {
position: absolute;
left: 0;
top: 0;
bottom: 4em;
width: 100vw;
height: 40vh;
}

#app.desktop2 #gameArea {
position: absolute;
left: 0;
top: 40vh;
bottom: 4em;
width: 50vw;
height: calc(60vh - 4em);
}

#app.desktop2 #actionsArea {
position: absolute;
left: 50vw;
top: 40vh;
bottom: 4em;
width: 50vw;
height: calc(60vh - 4em);
}

#app.mobile3 #historyArea {
position: absolute;
left: 0;
top: 0;
bottom: 4em;
width: 34vw;
height: calc(100vh - 4em);
}

#app.mobile3 #gameArea {
position: absolute;
left: 34vw;
top: 0;
bottom: 4em;
width: 33vw;
height: calc(100vh - 4em);
}

#app.mobile3 #actionsArea {
position: absolute;
left: 67vw;
top: 0;
bottom: 4em;
width: 33vw;
height: calc(100vh - 4em);
}

#app.mobile1 #historyArea {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 30vh;
}

#app.mobile1 #gameArea {
position: absolute;
left: 0;
top: 30vh;
bottom: 4em;
width: 50vw;
height: calc(70vh - 4em);
}

#app.mobile1 #actionsArea {
position: absolute;
left: 50vw;
top: 30vh;
bottom: 4em;
width: 50vw;
height: calc(70vh - 4em);
}

#app.mobile2 #historyArea {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 30vh;
}

#app.mobile2 #gameArea {
position: absolute;
left: 0;
top: 30vh;
width: 100vw;
height: 40vh;
}

#app.mobile2 #actionsArea {
position: absolute;
left: 0;
top: 70vh;
bottom: 4em;
width: 100vw;
height: calc(30vh - 4em);
}

} /*@supports not (display: grid)*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*IE specific*/

#chatArea {
position: absolute;
left: 0;
bottom: 0;
width: 100vw;
height: 4em;
}

#app.desktop1 #historyArea {
position: absolute;
left: 0;
top: 0;
bottom: 4em;
width: 50vw;
height: calc(100vh - 4em);
}

#app.desktop1 #gameArea {
position: absolute;
left: 50vw;
top: 0;
bottom: 4em;
width: 25vw;
height: calc(100vh - 4em);
}

#app.desktop1 #actionsArea {
position: absolute;
left: 75vw;
top: 0;
bottom: 4em;
width: 25vw;
height: calc(100vh - 4em);
}

#app.desktop2 #historyArea {
position: absolute;
left: 0;
top: 0;
bottom: 4em;
width: 100vw;
height: 40vh;
}

#app.desktop2 #gameArea {
position: absolute;
left: 0;
top: 40vh;
bottom: 4em;
width: 50vw;
height: calc(60vh - 4em);
}

#app.desktop2 #actionsArea {
position: absolute;
left: 50vw;
top: 40vh;
bottom: 4em;
width: 50vw;
height: calc(60vh - 4em);
}

#app.mobile3 #historyArea {
position: absolute;
left: 0;
top: 0;
bottom: 4em;
width: 34vw;
height: calc(100vh - 4em);
}

#app.mobile3 #gameArea {
position: absolute;
left: 34vw;
top: 0;
bottom: 4em;
width: 33vw;
height: calc(100vh - 4em);
}

#app.mobile3 #actionsArea {
position: absolute;
left: 67vw;
top: 0;
bottom: 4em;
width: 33vw;
height: calc(100vh - 4em);
}

#app.mobile1 #historyArea {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 30vh;
}

#app.mobile1 #gameArea {
position: absolute;
left: 0;
top: 30vh;
bottom: 4em;
width: 50vw;
height: calc(70vh - 4em);
}

#app.mobile1 #actionsArea {
position: absolute;
left: 50vw;
top: 30vh;
bottom: 4em;
width: 50vw;
height: calc(70vh - 4em);
}

#app.mobile2 #historyArea {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 30vh;
}

#app.mobile2 #gameArea {
position: absolute;
left: 0;
top: 30vh;
width: 100vw;
height: 40vh;
}

#app.mobile2 #actionsArea {
position: absolute;
left: 0;
top: 70vh;
bottom: 4em;
width: 100vw;
height: calc(30vh - 4em);
}

} /*@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) */



#historyArea, #gameArea, #actionsArea, #chatArea {
padding: 0.2em;
overflow: hidden;
}

span.chSystem, span.chAdmin { color: red !important; font-weight: bold; }
span.chGame { color: black !important; }
span.chChat { color: navy !important; }
span.chPM { color: #077 !important; }
span.chFriend, span.chInvitation { color: #074 !important; }
span.chTable { color: #060 !important; }
span.chGlobal { color: #666 !important; }

button.color0, span.color0 { color: black; }
button.color1, span.color1 { color: #409; }
button.color2, span.color2 { color: #909; }
button.color3, span.color3 { color: #904; }
button.color4, span.color4 { color: red; }
button.color5, span.color5 { color: #630; }
button.color6, span.color6 { color: #f90; }
button.color7, span.color7 { color: #990; }
button.color8, span.color8 { color: #260; }
button.color9, span.color9 { color: #050; }
button.color10, span.color10 { color: #077; }
button.color11, span.color11 { color: blue; }
button.color12, span.color12 { color: #006; }
button.color13, span.color13 { color: #666; }
button.color14, span.color14 { color: #bbb; }