#jeu .row_fluid div{
    height:65px;
}
div[data-position]{
    border:1px solid transparent;
}

#your_turn{
    font-size:50px;
    text-align: center;
}

body .jouable{
    cursor:pointer;
    border:2px dashed black;
}

.jeton {
    width: 6vh;
    height: 6vh;
    -webkit-border-radius: 3vh;
    -moz-border-radius: 3vh;
    border-radius: 3vh;
    transition: 750ms all ease-out;
}
.jeton.pointe{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.jeton.player_1, .player_1 .count_1, .player_2 .count_2{
    background-color: #111;
}
.jeton.player_2, .player_1 .count_2, .player_2 .count_1{
    background-color: mediumpurple;
}

.player_1 .game-cell.out {
    text-align: left;
}

.player_2 .game-cell.out {
    text-align: right;
}

@media only screen and (max-width: 600px) {
    .player-ui.current-player {
        width: 50%;
    }
    .player-ui.other-player {
        width: 0;
    }
    .player-ui.content {
        width: 50%;
    }
    .menu_new_game {
        height: 50% !important;
    }
    .title {
        font-size: 20vw!important;
        line-height: 25vw!important;
        -webkit-text-stroke: 0.25vw black !important;
        padding: 20px;
    }
}
.menu_new_game {
    height: calc(100% - 50vh);
}

.fleche{
    font-size:62px;
    text-align:center;
}

.count_1, .count_2{
    text-align:center;
    color:white;
}

.player_1 #fin{
    color: #1111116e;
}

.player_1 #fin.jouable{
    color: #111111;
}

.player_2 #fin{
    color: #9370db6e;
}

.player_2 #fin.jouable{
    color: #9370db;
}

#fin{
    font-size: 8vh;
    font-weight: bold;
    color: #eee;
    border: none;
    line-height: 10px;
    vertical-align: middle;
}

#fin.jouable{
    color:#333;
}

#game-share{
    width: 300px;
}

#game_id_picker {
    width:150px;
}

.menu, .creating_game {
    height: 100%;
    background: url('../images/full_board.jpg') bottom;
    background-size: cover;
}

.join_game, .create_game, .game_created {
    padding: 20px;
    background: white;
}

.join_game, .bot_game {
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
}

.create_game, .share_game {
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
}

.game_created {
    display: block;
    margin: auto;
    padding: 20px;
}

#jeu {
    background: url(../images/game_board.jpg);
    background-size: contain;
    width: 27vh;
    height: 71vh;
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top:25px;
    margin-bottom:25px;
}

.game {
    display: table;
    width: 100%;
}
.player-ui {
    display: table-cell;
    width: 33.3%;
}
.game-cell {
    display: table-cell;
    width: 33.3%;
    height: 12.5%;
}
.game-cell-row {
    display: table-row;
}
.game-padding {
    padding: 1.5vh;
    display: table;
    width: 100%;
    height: 100%;
}
.align-top {
    vertical-align: top;
}
.align-center {
    vertical-align: middle;
}
.game-cell .out {
    font-size: 77px;
    vertical-align: middle;
    line-height: 10px;
    color: white;
    text-align: right;
}
.title {
    font-size: 20vh;
    text-align: center;
    font-family: 'Indie Flower', cursive;
    -webkit-text-stroke: 0.25vh black;
    line-height: 25vh;
    color: white;
}