/*
Ενδεικτικοί επιλογείς για τη διαμόρφωση του στυλ

Μπορείτε να προσθέσετε τις δηλώσεις στους παρακάτω κανόνες και να εμπλουτίσετε με δικούς σας κανόνες.
*/


/* Χρειάζεται για να φανούν οι σημαίες στους φυλλομετρητές chrome-based από Windows 10 */

@font-face {
    font-family: 'TwemojiMozilla';
    src: url('TwemojiMozilla.ttf');
}

body {
    margin: 40px;
    font-family: 'Open Sans', 'TwemojiMozilla';
    /* Η γραμματοσειρά open sans φορτώνεται στο αρχείο html*/
    background-color: #fff;
    color: #444;
	font-size:1.5em;
	box-sizing:border-box;
}

.game-panel {
    display: grid;
	 grid-template-columns: 1fr 5fr;
	 /*grid-auto-rows: minmax(150px, auto);
     ... */
}

@media (max-width: 800px) {
    /* ενδεικτικά */
    /*  ... */
}

#my-country {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  display:flex;
  background-color:#6600ff;
  color:white;
  padding:0 1em;
  }

#sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  display:flex;
  flex-direction:column;
  background-color: #ff3399;
  color:white;
  margin-right:10px;
  min-height:400px;
  /*gap:1em;*/
  
}

#score {grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;}

#neighbours-panel {grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  flex-wrap:wrap;
  gap:0.2em;}

#next-round-panel {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	align-items:center;
	z-index:-1;
	padding:2em;
	justify-content:center;
	font-size:2em;
	display:none;
	}

#progress {
    border-radius: 5px;
	height:20px;
	width:100%;
	border:1px solid lightgray;
}


/* ειδικά για τους φυλλομετρητές που προέρχονται από τον chrome καθώς 
υποστηρίζουν λιγότερο καλά το στοιχείο progress από ότι ο firefox,
όσον αφορά το CSS (που και σε αυτόν έχει προβληματική υποστήριξη)
*/
.mflag{
	display:flex;
	align-items:center;
	font-size:3em;
}
.mxora{
	display:flex;
	align-items:center;
	position:relative;
	padding-left:1em;
	}
.simaies{
	display:flex;
	align-items: center;
	flex-direction:column;
	cursor:pointer;
	font-size:3.5em;
	flex-basis:18%;
	padding:0;
	height:200px;
	/*border:2px solid black;*/
	flex-grow:1;
	}

#progress::-webkit-progress-bar {
    border-radius: 5px;
}
button{
	font-size:1em;
	margin:0.5em;
	padding:0.3em;
	width:8em;
}
#livescore{
		display:flex;
		flex-wrap:wrap;
		justify-content:space between;
		padding:1em;
}
#giros, #gir, #score, #sc{
	flex: 1 32%;
	
    }
	#gir,#sc{
		text-align:right;
	}
#keno{
	flex:1;
}
#playbuttons{
	flex:none;
}