.player {
    display: flex;
    color: white;
}

.player-name {
    white-space: nowrap;
}

.player.left {
    position: relative;
    margin-left: 1ex;
    min-width: 7em;
    flex: 1 1 0px;
    text-align: left;
    flex-direction: row;
}

.player.right {
    text-align: right;
    margin-right: 1ex;
    flex-direction: row-reverse;
    position: relative;
    min-width: 7em;
    flex: 1 1 0px;
}

.player-info {
    margin-top: 1ex;
    margin-bottom: 2ex;
}

.player.left .player-messages {
    margin-left: 20px;
    margin-top: 20px;
}

.player.right .player-messages {
    margin-right: 20px;
    margin-top: 20px;
}

.player-messages {
    height: 5em;
}

.player.right ul.message {
    margin-right: 10px;
}

ul.message {
    margin-top: 0px;
    margin-bottom: 0px;
}

ul.message li {
    position: relative;
    /*background-color: rgba(0,0,0,0.5);*/
    background-color: white;
    color: black;
    font-weight: bold;
    border-radius: 0px 7px 7px 7px;
    padding: 5px 10px;
    margin-bottom: 5px;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.5);
}

ul.message li.major {
    font-size: 1.5em;
}

ul.message li.right {
    border-radius: 5px 0px 5px 5px;
}

ul.message li .triangle {
    position: absolute;
    top: -0px;
    width: 0px;
    height: 0px;
    transform: rotate(360deg);
    border-style: solid;
    border-width: 0px 15px 13px 0;
    /*border-color: transparent rgba(0,0,0,0.5) transparent transparent;*/
    border-color: transparent white transparent transparent;
}

ul.message li .triangle.left {
    left: -14px;
}

ul.message li .triangle.bottom {
    left: -14px;
}

ul.message li .triangle.right {
    right: -14px;
    transform: scaleX(-1);
}

.bot-symbol img {
    width: 1.5ex;
    height: 1.5ex;
    margin-left: 0.2ex;
    margin-right: 0.1ex;
}

.game-mode {
    font-weight: bold;
}