html{
    font-family:ProximaNova,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
}
.bwc-logo{
    width:550px;
}
#top-bar{
border-bottom: 2px solid gainsboro;

}

.uk-subnav-pill > * > :first-child{
    padding: 0px 50px !important;
}

li.message{
    border-bottom:1px solid #eee;
    list-style:none;
}

li.message p{
    margin-top: 5px;
    font-size:12px;
}

.uk-form-label img{
    width: 200px;
}

img#playerCount{
    height:2em;
    background-size: 32em 2em;
    position:relative;top:7px;
    background-repeat: no-repeat;
}
img#playerCount_tens{
    height:2em;
    background-size: 32em 2em;
    background-repeat: no-repeat;
    position:relative;left:7px;top:7px;
}
img.hidden{
    display:none;
}

img.count-1{
    background: url(/img/numerals.png) 0 0;    
}
img.count-2{
    background: url(/img/numerals.png) -52px 0;    
}
img.count-3{
    background: url(/img/numerals.png) -100px 0;    
}
img.count-4{
    background: url(/img/numerals.png) -144px 0;    
}
img.count-5{
    background: url(/img/numerals.png) -190px 0;    
}
img.count-6{
    background: url(/img/numerals.png) -240px -1px;    
}
img.count-7{
    background: url(/img/numerals.png) -290px -1px;    
}
img.count-8{
    background: url(/img/numerals.png) -344px 0;    
}
img.count-9{
    background: url(/img/numerals.png) -390px -2px;    
}
img.count-0{
    background: url(/img/numerals.png) -426px 0;    
}

span.self{
    color: purple;
}

#game-status{
    display:none;
}

div#chat{
    flex-direction: column;
    padding: 15px;
    right: 0px;
    height: 90vh;
    border-left: 1px solid #e5e5e5;
}

.game-mode{
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    height: calc(90vh - 100px);
    border-top: 2px solid #bbb;
    padding-top: 2em;
}

#toggle_play .uk-badge{
    background: #eee;
    color: #666;
    font-weight:default;
}

.delete-tool{
    float:right;
    position:relative;
    right:40px;
    top:20px;
}

.card-template{
    flex-direction: column;
    width: min-content;
    min-width: 500px;
    box-shadow:    0 5px 15px rgba(0,0,0,0.08);
}

.card-preview{
    flex-direction: column;
    width: 250px;
    min-height:300px;
    margin:1rem;
    box-shadow:    0 5px 15px rgba(0,0,0,0.08);
}
.card-title{
    margin-top:0px;
}

div.card-picture{
    flex-grow: 1;
}

img.card-picture{
    max-height: 200px;
}

div.card-content{
    flex-grow: 3;
    flex-direction: column;
    align-items: center;
}

.new-card{
    display:none;
}

.new-card input{
    font-size:32.3px;
    line-height:1.5;
    text-align:center;
}

.card-content{
    font-size: 24px;
    text-align:left;
    margin: 1.5em;
}

.card-preview > .card-content {
    font-size: 16px;
}

.card-content-box{

    font-size: 24px;
    height: 200px;
    font-family:parent;
    padding:1em;
    margin-top:1em;
    width: 400px;
}

#submitCard{
    padding: 0px 10px !important;
    color:white;
    background: #06D6A0;
    width: 100px;
    top:3px;position:relative;
    margin-bottom:0px;
}
#submitCard:hover{
    background: #05B384;
}

#newCard{
    padding: 0px 10px !important;
    width: 100px;
    color:rgb(107, 58, 2);
    background: #fff9eb;
    top:3px;position:relative;
    margin-bottom:0px;
}
#newCard:hover{
    background: #ffedc2;
}



.image-tools{
    top:235px;
}

.image-tooltip{
    background:#333;
}

.image-tools a.uk-icon{
    margin: 1em;
}

form#imageModalContent::before{
    content: "";
}

input#giphySearch{
    border:1px solid #e5e5e5;
    padding-left: 15px;
}

.search-result{
    margin: 10px;
    max-width: 200px;
}

.uploader:hover{
    color: #0f6ecd;
}

.uk-modal-dialog{
    width: 800px;
    height: 75vh;
    overflow-y: auto;
    padding-bottom:2em;
}

.players-list-container{
    margin-bottom:2em !important;
    border-bottom: 1px dashed #e5e5e5;
    min-height: 135px;
}

.play-mode-username{
    width: 100%;
    text-align: center;
    text-decoration: underline;
}

.meta-turn{
    color: #1e87f0 !important;
    font-weight:bold;
}
.game-status div:hover{
    cursor:default;
    border:none;
    box-shadow:none;
    background:inherit;
    color:#999;
}

.game-status{
    align-items:baseline;
}

#number-of-players{
    font-weight:bold;
}

.player-list-text{
    list-style:none;
    margin: 1em;
    box-shadow:0 0 0 1px rgba(0,0,0,.1);
    width:50%;
    padding:1em;
    cursor:default;
}
.player-list-text:hover{
    background:ghostwhite;
    box-shadow:0 0 0 2px rgba(0,0,0,.1);
    cursor:pointer;
}
.play-list-vote{
    display:none;
}

#pick-first-turn{
    flex-direction:column;
}

#first-player-picker{
    display:none;
}

.game-status div{
    cursor:default;font-size:14px;color:#999;
    box-shadow:none;
}

.turn-indicator{
    display:none;    box-shadow:0 0 0 1px rgba(0,0,0,.1);
}

li.player{
    height:120px;
    width: 120px;
    padding: 0.5em;    
}

li.current-player{
    background:aliceblue;
    border: 1px solid #afafaf;
    border-radius: 5px;
    box-shadow: 0 0 2px 2px palegoldenrod;
    
}

b.currentPlayer{
    color:maroon;
}

.change-profile > svg{
    display:none;
}

.card-control > *{
    background-color: #f8f8f8;
    color: #666;
    box-shadow:    1px 1px 2px rgba(0,0,0,.2);
}

.card-control > *:hover{
    box-shadow:    inset 0 2px 4px rgba(0,0,0,.2);
    color:#666;
}

.card-control > *:focus{
    background-color: transparent !important;
    color: #999 !important;
    box-shadow:    1px 1px 2px rgba(0,0,0,.2);
    
}

.revealed, .revealed:focus{
    background: #ddd !important;
    color: #bbb !important;
}

.your-card{
    display:none;
}

.active-card-controls{
    display:none;
}

img.player{
    width:100px;height:100px;
    object-fit: cover;
}

#manual-img{
    display:none;
    height:200px;    
}

.revealed-card-notice{
    display:none;
}

.uk-search::before,.change-profile::before{
    content:"";
}


.change-profile:hover{
    color: #0f6ecd;
    cursor:pointer;
}

#profile-options .search-result{
    height:100px;
}

.play-mode-username{
    font-weight:bold;
    text-decoration:none;
}

.player-username{
    font-weight: bold;
}

.player-username:hover{
    cursor:default;
}

@media screen and (max-width: 479px) {
    div.card-content-box{

	max-width: 50vw;
	
    }


    /*
    div#draw_mode{
	align-items: flex-start;
    }
    div#chat{
	top:130px;
	width:100% !important;
	height: calc(90vh - 100px);
    }
    #chat h3{
	background:white;
	margin-bottom:0px;
    }
    #chat div.uk-text-center{
	text-align:left !important;
    }
    */
}