div#div-action-bar {
    float: left;
    width: 20vw;
    height: 85vh;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
    margin-top: 5vh;
    margin-bottom: 5vh;
    background-color: rgba(0, 0, 0, 0.5);
}

div#div-game-area {
    float: left;
    width: 65vw;
    height: 75vh;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
    margin-top: 5vh;
    margin-bottom: 5vh;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    padding-top: 5vh;
    padding-bottom: 5vh;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: auto;
}

button.button-host {
    margin-left: 6vw;
    margin-right: 6vw;
    margin-top: 1.25vh;
    margin-bottom: 1.25vh;
}

p.p-game-info {
    font-family: "Blender Pro Thin";
    color: white;
    font-size: 1.5vh;
    margin-left: 3.75vw;
    margin-right: 3.75vw;
    margin-top: 1.25vh;
    margin-bottom: 1.25vh;
}

div.div-separator {

	width: 100%;
	height: 5vh;
	color: rgb(255, 255, 255);
	display: flex;
	align-items: center;
	font-size: 1.5vh;
	text-align: center;
	font-family: "Blender Pro Thin";

}

div.div-separator::before,
div.div-separator::after {

	content: '';
	flex: 1;
	border-bottom: 1px solid rgb(127, 127, 127);

}

div.div-separator:not(:empty)::before {

	margin-left: 1vw;
	margin-right: 0.5vw;

}

p.p-message {
    margin-left: 3.75vw;
    margin-right: 3.75vw;
    font-family: "Blender Pro Thin";
    color: white;
}

div.div-separator:not(:empty)::after {

	margin-left: 0.5vw;
	margin-right: 1vw;

}

input#input-messenger-field {
	margin-left: 5vw;
	margin-right: 5vw;
	width: 10vw;
	font-family: "Blender Pro Thin";
	font-size: 1.5vh;
	color: white;
	background: none;
	border-left: none;
	border-right: none;
	border-top: none;
	outline: none;
}

span.span-message {
    color: rgb(255, 255, 255);
    font-family: "Blender Pro Thin";
}