[v-cloak]
{
    display: none;
}
html, body {
    height: 100%;
    margin:0px;
}

body
{
    background: rgb(34,193,195);
    background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
    display: flex;
    flex-direction: column;
}
input
{
    cursor:pointer;
    flex:1;
}

#game
{
    height:70px;
    padding: 8px;
}

.flex-row
{
    display: flex;
    flex-flow: row wrap;
    text-align: center;
}

.flex-column
{
    display: flex;
    flex-flow: column wrap;
    text-align: center;
}

.status
{
    padding: 5px;
    vertical-align: middle;
}

.player-card
{
    border-radius: 25px;
    width:125px;
}

.red-card
{
    border-radius: 8px;
    border: 3px solid red;
}

#meet
{
    flex:1;
}

#headergame{
    display: flex;
    flex-flow: row wrap;
    text-align: center;
}
#lefthead{
    display: flex;
    flex:1;
    flex-direction: row;
}
#centerhead{

    display: flex;
    justify-content: center;
    align-items: center;
}
#centerhead img{

    width:150px;
    height:66px;
}
#righthead{
    flex:1;
    display: flex;
}
.cardscont
{
    position: fixed;
    top:90px;
    left:0px;
    display:flex;
    flex-direction: column;
    z-index:20;
    align-items: flex-start;
    margin:0px 5px;
}

.cards 
{
    z-index:19;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
    margin:1px 0px;
}
.fcard{

   margin:0px 1px;
    border-radius: 4%;
    flex:1;
    overflow:hidden; 

}
.fcard div{
    position: absolute;
    width:25%;
    transform: translateY(-55px);
}
.card
{
    margin:0px 1px;
    border-radius: 4%;
    flex:1;
    overflow:hidden;
}
img
{
    width:100%;
    border-radius: 4%;
}
.winner {
    display: flex;
    flex-direction: column;
    border-radius: 4%;
    overflow: hidden;
    height:100%;
    justify-content: center;
}
.winner input{   
    
}
#hand-0 .card
{
    opacity:0.5
}
#hand-0 .card:hover
{
    flex:1.3;
    opacity:1;
}
#hand{
    width:100%;
    display: flex;
    justify-content: center;
}
#hand-0{
    align-items: flex-end;
    position: fixed;
    bottom:70px;
    justify-content: center;
    flex-wrap: wrap;
     
}
/*------------------FNT status --------------------*/
.above{
    z-index:30;
    display:flex;
}
.below{
    z-index:10;
    display:none;
}

 .overflow
{
    overflow-y: auto;
    max-height:20%;
}
 .overflow:hover
{
    max-height:70%;
    overflow-y: auto;
}

/*----------------!= screens ------------------------*/
@media screen and (max-width: 400px) {
   
    #righthead{
    flex:auto;
    display: none;
    }
    #centerhead{
    flex:auto;
    display: none;
    }
    #hand{
        justify-content: flex-start;
    }
}
@media screen and (max-width: 600px) {
    .cardscont 
    {
        top:90px;
        width:97%;
        max-height:30%;
        overflow-y:scroll;
    }

    .card {
        flex:auto;
        width:60px;
    }
    .fcard {
        flex:auto;
        width:60px;
    }
    #hand{
        justify-content: flex-start;
    }
    #hand-0 .card:hover, #hand-0 .card:active
    {
        flex:auto;
        width:70px;
    }
    #hand-0{
        align-items: flex-end;
        width:300px;
    }
    #righthead{
    flex:auto;
    display: none;
    }
    #centerhead{
    flex:1;
    }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
    .cardscont 
{
    width:50%;
}

   .cardscont:hover
{
    width:70%;
}
#hand{
        justify-content: flex-start;
    }
#hand-0{
    width:80%;
}

}
@media screen and (min-width: 900px) and (max-width: 1100px) {
    .cardscont 
{
    width:40%;
}
   .cardscont:hover
{
    width:60%;
}
#hand{
        justify-content: flex-start;
    }
#hand-0{
    width:70%;
}

}
@media screen and (min-width: 1100px) and (max-width: 1300px) {
    .cardscont 
{
    width:35%;
}
   .cardscont:hover
{
    width:45%;
}

#hand-0{
    width:60%;
}

}
@media screen and (min-width: 1300px) {
    .cardscont 
{
    width:30%;
}
   .cardscont:hover
{
    width:35%;
}

#hand-0{
    width:50%;
}

}