:root {
  --size-xsmall: .25em;
  --size-small: .5em;
  --size-medium: 1em;
  --size-large: 1.5em;
  --size-xlarge: 2em;
  --size-xxlarge: 3em;
}

.padding-xsmall { padding: var(--size-xsmall);}
.padding-xsmall-left { padding-left: var(--size-xsmall);}
.padding-xsmall-right { padding-right: var(--size-xsmall);}
.padding-xsmall-top { padding-top: var(--size-xsmall);}
.padding-xsmall-bottom { padding-bottom: var(--size-xsmall);}

.padding-small { padding: var(--size-small);}
.padding-small-left { padding-left: var(--size-small);}
.padding-small-right { padding-right: var(--size-small);}
.padding-small-top { padding-top: var(--size-small);}
.padding-small-bottom { padding-bottom: var(--size-small);}

.padding-medium { padding: var(--size-medium); }
.padding-medium-left { padding-left: var(--size-medium);}
.padding-medium-right { padding-right: var(--size-medium);}
.padding-medium-top { padding-top: var(--size-medium);}
.padding-medium-bottom{	padding-bottom: var(--size-medium);}

.padding-large { padding: var(--size-large);}
.padding-large-left { padding-left: var(--size-large);}
.padding-large-right { padding-right: var(--size-large);}
.padding-large-top { padding-top: var(--size-large);}
.padding-large-bottom { padding-bottom: var(--size-large);}

.padding-xlarge { padding: var(--size-xlarge);}
.padding-xlarge-left { padding-left: var(--size-xlarge);}
.padding-xlarge-right { padding-right: var(--size-xlarge);}
.padding-xlarge-top { padding-top: var(--size-xlarge);}
.padding-xlarge-bottom { padding-bottom: var(--size-xlarge);}

.margin-xsmall { margin: var(--size-xsmall);}
.margin-xsmall-left { margin-left: var(--size-xsmall);}
.margin-xsmall-right { margin-right: var(--size-xsmall);}
.margin-xsmall-top { margin-top: var(--size-xsmall);}
.margin-xsmall-bottom { margin-bottom: var(--size-xsmall);}

.margin-small { margin: var(--size-small);}
.margin-small-left { margin-left: var(--size-small);}
.margin-small-right { margin-right: var(--size-small);}
.margin-small-top { margin-top: var(--size-small);}
.margin-small-bottom { margin-bottom: var(--size-small);}

.margin-medium { margin: var(--size-medium); }
.margin-medium-left { margin-left: var(--size-medium);}
.margin-medium-right { margin-right: var(--size-medium);}
.margin-medium-top { margin-top var(--size-medium);}
.margin-medium-bottom{	margin-bottom: var(--size-medium);}

.margin-large { margin: var(--size-large);}
.margin-large-left { margin-left: var(--size-large);}
.margin-large-right { margin-right: var(--size-large);}
.margin-large-top { margin-top: var(--size-large);}
.margin-large-bottom { margin-bottom: var(--size-large);}

.margin-xlarge { margin: var(--size-xlarge);}
.margin-xlarge-left { margin-left: var(--size-xlarge);}
.margin-xlarge-right { margin-right: var(--size-xlarge);}
.margin-xlarge-top { margin-top: var(--size-xlarge);}
.margin-xlarge-bottom { margin-bottom: var(--size-xlarge);}

.text-align-center{ text-align: center;}
.text-align-right{ text-align: right;}

.flex { display: flex; }
.flex-column { flex-direction: column;}
.flex-space-evenly{ justify-content: space-evenly;}
.flex-center { justify-content: center;}
.flex-end{ justify-content: flex-end;}
.flex-middle {align-items: center;}
.flex-grow {flex-grow: 1;}
.flex-overflow-y{
	flex: 1;  /* <------------------- required     */
    overflow-y: auto;  /* <---------- required !!! */
}
.blue{background:#ff00ff;}
.width-1-1{ width: 100%;}
.height-1-1{ height: 100%;}

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

.popup-container{
	background: #e0eae9;
}

.popup-title-bar{
	background: #333333;
	color: #efefef;
	text-align: center;
	height: 1.2em;
	font-family: 'Aleo-Regular';
	font-size: 1em;
}

.popup-body{
}

.button-round{
	width: 6em;
	height: 6em;
	background: url('round-button-idle.png') no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

.button-round > img{
	width: 4em;
	height: 4em;
}

.button-round:active,
.button-round-pressed{
	width: 6em;
	height: 6em;
	background: url('round-button-pressed.png') no-repeat;
	background-size: cover;
}

.popup-title-close{
	position: absolute;
	right: -3em;
	top: -2em;
}

.popup-gameover-score{
	font-size: 7em;
	font-family: 'Aleo-Regular';
	color: #318D36;
}

table{
	border-collapse:collapse;
	color: #333333;
	font-family: 'Aleo-Regular';
	font-size: 1.2em;
}

td{ 
	padding: .75em .5em;
}

.leaderboards > tbody > tr:nth-child(odd){
	background: #CDDCDA;
}


.leaderboards > tbody > tr:nth-child(even){
	background: #DFEAE9;
}

.leaderboards > tbody> tr > td:nth-child(1){
	color: #666666;
	width: 9%;
	padding-left: 1em;
}

.leaderboards > tbody> tr > td:nth-child(2){
	color: #333333;
	text-align: right;
	width: 33%;
}

.leaderboards > tbody> tr > td{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.leaderboards > tbody> tr > td:nth-child(3){
	color: #666666;
	padding-left: 1em;
	text-align: center;
	width: 8%;
}

.leaderboards{
	table-layout: fixed;
}

#scorename-label{
	color: #333333;
	text-align: center;
	height: 1.2em;
	font-family: 'Aleo-Regular';
	font-size: 1.4em;
}

#scorename{
	font-size: 2em;
	font-family: 'Aleo-Regular';
	width: 100%;
	text-align: center;
}

#scoresmessages{
	font-family: 'Aleo-Regular';
	font-size: 1.5em;
	color: #333333;
	margin: .5em;
}

.hide{
	display: none;
}

p{
	font-family: 'Aleo-Regular';
	font-size: 1.2em;
	line-height: 1.8em;
	padding: 0 1em 1em 1em;
	color: #333333;
}

.about-image{
	width: 8em;
	height: 8em;
}

#confirm-message{
	font-family: 'Aleo-Regular';
	font-size: 1.2em;
	line-height: 1.8em;
}

.text{
	font-family: 'Aleo-Regular';
	font-size: 1.2em;
	color: #333333;
}

input[type="text"]{
	border: none;
    background: none;
    font-size: 20px!important;
	width: 100%;
	text-align: center;
}