:root {
	--baseColor: #121212;
	--ela-1: rgba(255,255,255,0.05);
	--ela-2: rgba(255,255,255,0.07);
	--ela-3: rgba(255,255,255,0.08);
	--ela-4: rgba(255,255,255,0.10);
	--ela-5: rgba(255,255,255,0.11);
	--color-main: rgba(79, 33, 179, 1);
	--color-main-highlight: rgba(150, 111, 213, 1);
	--scroll-padding: 17px;
	--shadow-menu-top: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	
	--borderRadius: 10px;
	--imageBig: 100px;
	--imageSmall: 60px;
	--padding: 10px;
	--min-width: 350px;
	--min-height: 768px;
	--fontSize-text-small:1rem;
	--fontSize-title-small:1.25rem;
	--fontSize-text-med:1.5rem;
	--fontSize-title-med:2rem;
	--fontSize-text-large:2rem;
	--fontSize-title-large:2.5rem;
	
	--site-menu:10vh;
	--site-menu-calc: 0.1;
	--site-header:15vh;
	--site-header-top: calc(var(--min-height) * var(--site-menu-calc));
	--site-body:80vh;
	--site-body-calc: 0.8;
	--site-status:5vh;
}

/*
 *
 *
 * [ FLEX START ]
 *
 *
 */

* {
  box-sizing: border-box;
}

.flex-table {
	display: flex;
	flex-basis: 100%;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	/*border-bottom: 1px solid;*/
}
	.flex-table.fill {
		align-items: stretch;
		align-content: stretch;
		height: 100%;
	}
.flex-row {
	overflow-y: auto;
}
[class*="row-"] {
	flex-basis: 100%;
	flex-grow: 9;
	flex-flow: row nowrap;
    display: flex;
    padding: 0px;
    justify-content: center;
	min-height: 25px;
}
.row-1  {height: 5%  ;}
.row-2  {height: 10% ;}
.row-3  {height: 15% ;}
.row-4  {height: 20% ;}
.row-5  {height: 25% ;}
.row-6  {height: 30% ;}
.row-7  {height: 35% ;}
.row-8  {height: 40% ;}
.row-9  {height: 45% ;}
.row-10 {height: 50% ;}
.row-11 {height: 55% ;}
.row-12 {height: 60% ;}
.row-13 {height: 65% ;}
.row-14 {height: 70% ;}
.row-15 {height: 75% ;}
.row-16 {height: 80% ;}
.row-17 {height: 85% ;}
.row-18 {height: 90% ;}
.row-19 {height: 95% ;}
.row-20 {height: 100%;}

.fill {
	align-items: stretch !important;
}
[class*="col-"] {
	flex-flow: row wrap;
	display: flex;
	padding: 0px;
	justify-content: center;
}

.col-1 {flex-basis: 8.33%;}
.col-2 {flex-basis: 16.66%;}
.col-3 {flex-basis: 25%;}
.col-4 {flex-basis: 33.33%;}
.col-5 {flex-basis: 41.66%;}
.col-6 {flex-basis: 50%;}
.col-7 {flex-basis: 58.33%;}
.col-8 {flex-basis: 66.66%;}
.col-9 {flex-basis: 75%;}
.col-10 {flex-basis: 83.33%;}
.col-11 {flex-basis: 91.66%;}
.col-12 {flex-basis: 100%;}

span {
	display:flex;
	align-items: center;
	justify-content: inherit;
	flex-grow: 1;
}
	.left {
		text-align:left;
		justify-content: left;
		text-align:left;
	}
	a.fill {
		width:100%;
	}

.tmargin {
	
}
	.jleft .tmargin {
		padding:0px;
		margin-right:2%;
	}
	.jright .tmargin {
		padding:0px;
		margin-left:2%;
	}
	.jleft.tpadding {
		padding:0px;
		padding-right:2%;
	}
	.jright.tpadding {
		padding:0px;
		padding-left:2%;
	}
	.tpadding {
		padding:2%;
	}

.tleft {
	text-align:left;
}
.tright {
	text-align:right;
}
.jleft {
	justify-content: flex-start;
}
.jright {
	justify-content: flex-end;
}
.priority-1 {
	flex-grow: 9;
}
.priority-2 {
	flex-grow: 8;
}
.row {
	
	border-color: #010101;
}
	.win {
		color: #669933; /*#499e25;*/
	}
	.loss {
		color: #ce3131;
	}

#pageUser #userBattles .flex-table [class*="row-"]:nth-of-type(even) {
	background-color: #1d1d1d;
	border-color: #010101;
}
#pageUser #userBattles .flex-table [class*="row-"]:nth-of-type(odd) {
	background-color: #101010;
	border-color: #010101;
}
#mainButton {
	position:fixed;
	top:0;
	margin:0 auto;
	height:5%;
	width:16.66%;
	font-size: 3vh;
}

/*
 *
 *
 * [ FLEX END ]
 *
 *
 */
 body {
	font-family: 'Roboto Condensed', sans-serif;
	background-color: var(--baseColor);
	color: #ffffff;
	opacity: 0.70;
	margin:0;
	z-index:1;
	min-width:350px;
	align-items: center;
    justify-content: center;
	display:block;
	min-height: var(--min-height);
	height:100%;
	width:100%;
	font-size: 1em;
}
span {
    display: flex;
    align-items: center;
    justify-content: inherit;
    flex-grow: 1;
}
a {
	/*font-family: ralewayLight, sans-serif;*/
	display:flex;
	align-items: center;
	justify-content: inherit;
	flex-grow: 1;
	text-align: inherit;
	margin: 0px;
    background-color: var(--color-main-highlight);
    color: #ffffff;
	cursor: pointer;
	text-decoration: none;
}
a:hover {
   text-decoration: none;
   color: #fff;
   background-color: #000;
}
.likea {
	display:flex;
	align-items: center;
	justify-content: inherit;
	flex-grow: 1;
	text-align: inherit;
	margin: 0px;
    background-color: var(--color-main-highlight);
    color: #ffffff;
	cursor: pointer;
	text-decoration: none;
}
.likea:hover {
	   text-decoration: none;
   color: #fff;
   background-color: #000;
}
.player.selected {
	background-color: var(--color-main-highlight)!important;
}
.warning {
	background-color:#B33A3A!important;
}
 #SiteMenu {
	min-height: 70px;
	position: fixed;
	display:block;
	z-index:1;
	height: var(--site-menu);
	top:0%;
	width:100%;
	min-width: var(--min-width);
}
	#SiteMenu .menu {
		background-color: var(--ela-5);
		box-shadow: var(--shadow-menu-top);
		position: relative;
	}
	#battleButton {
		font-size: var(--fontSize-text-med);
		box-shadow: var(--shadow-menu-top);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
		#battleButton.ru {
			background-image: url(/img/ru.png);
		}
		#battleButton.eu {
			background-image: url(/img/eu.png);
		}
		#battleButton.na {
			background-image: url(/img/na.png);
		}
		#battleButton.sea {
			background-image: url(/img/sea.png);
		}
 #SiteHeader {
	display:block;
	z-index:1;
	height: var(--site-header);
	width:100%;
	overflow: hidden;
	min-width: var(--min-width);
	padding-top: var(--site-menu);
	background-color:var(--color-main);
}
	#PageHeader {
		font-size: var(--fontSize-text-med);
		padding-right: var(--scroll-padding);
		/*color: var(--color-main-highlight);*/
	}
#SiteContainer {
	display:block;
	z-index:1;
	height: var(--site-body);
	width:100%;
	overflow: hidden;
	min-width: var(--min-width);
	font-size: var(--fontSize-text-small);
}
 #StatusBar {
	display: block;
	z-index:1;
	height: var(--site-status);
	width:100%;
	overflow: hidden;
	min-width: var(--min-width);
}

/* new */
.hidden {
	display: none!important;
}
#loginBox {
	display: block;
    position: absolute;
    width: 100%;
}
#regionSelect {
	display: block;
    position: absolute;
    width: 100%;
}

#siteContainer .table-header {
  height: 5%;
  overflow:hidden;
  font-size: var(--fontSize-title-small);
  padding-right: var(--scroll-padding);
}
  #siteContainer .table-header.mobile {
    padding-right:0px;
  }
  #siteContainer .table-header [class*="col-"] {
    /*padding: 5px 0px;*/
    
  }
#siteContainer .table-body {
  overflow-y: scroll;
  height: 95%;
}
  #siteContainer .flex-table [class*="row-"] {
    padding: 5px;
  }
  #siteContainer .table-body [class*="row-"]:first-of-type {
    /*margin-top:0px;*/
  }
  #siteContainer .table-body [class*="row-"]:last-of-type {
    margin-bottom:0px;
  }

  #siteContainer .table-body [class*="row-"] {
    margin-top: 5px;
    background-color: var(--ela-2);
  }
  #siteContainer .table-body [class*="row-"]:hover {
    background-color: var(--ela-5);
  }
.abbr {
	cursor: help;
	text-decoration: underline dotted;
}