body {
	padding:0;
	margin:0;
	background-color:#000000;
	background-image: url("images/backgrounds.jpg");
	opacity:0.9;
	min-height:100vh;
	font-family: 'Oswald', sans-serif;
}

.main-container
{
	display: flex;
	flex-flow: column;
	min-height: 100vh;
}

.footer-gr
{
	display: flex;
	flex-grow: 4;
}

.matches-frame
{
	width:320px;
	display:inline-block;
	margin-right:10px;
}

.matches-frame legend
{
	font-size:12px;
}

.matches-table
{
	width:280px;
	font-size:11px;
}

.matches-table td
{
	text-align:center;
}

.matches-versus
{
	background-color:#dddddd;
	border-radius:5px;
}

.content-footer
{
	float:left;
	width: 100%;
	background-color: #000;
	color: white;
	text-align: center;
	padding-top:10px;
	padding-bottom:3px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	opacity:0.6;
}

.footer-hr
{
	color:#00ffff;
}

.button-more
{
	width:28px;
	border-style:solid;
	border-width:1px;
	height:28px;
	border-radius:50%;
	cursor:pointer;
	font-weight:bold;
	background-color:#aaaaaa;
	color:#ffffff;
	font-size:12px;
}

.button-cancel
{
	width:24px;
	border-radius:50%;
	border-style:solid;
	border-width:1px;
	background-color:#ff0000;
	color:#ffffff;
	padding-bottom:3px;
	cursor:pointer;
	font-size:12px;
}

.button-more:hover
{
	background-color:#8888ff;
}

.button-less
{
	width:28px;
	border-style:solid;
	border-width:1px;
	height:28px;
	border-radius:50%;
	cursor:pointer;
	font-weight:bold;
	background-color:#aaaaaa;
	color:#ffffff;
	font-size:12px;
}

.button-less:hover
{
	background-color:#8888ff;
}

.button-set
{
	border-radius:5px;
	background-color:#888888;
	color:white;
	font-size:12px;
}

.button-set:hover
{
	background-color:#8888ff;
	cursor:pointer;
}

.button-buy
{
	border-radius:14px;
	background-color:#888888;
	color:white;
	font-size:12px;
}

.button-buy:hover
{
	background-color:#8888ff;
	cursor:pointer;
}


.input-tips
{
	width:40px;
	border-style:solid;
	border-width:1px;
}

ul
{
	padding:0;
	margin:0;
}

.fieldset-new
{
	border-color:#00aa00;
	border-width:1px;
	border-radius:5px;
	margin:10px;
	height:90px;
	background:rgba(255,255,255,0.8);
}

.fieldset-new:hover
{
	border-color:#8888ff;
}

.fieldset-old
{
	border-color:#ff0000;
	border-width:1px;
	border-radius:5px;
	margin:10px;
	height:90px;
	background:rgba(255,255,255,0.8);
}

.fieldset-old:hover
{
	border-color:#8888ff;
}

.fieldset-hbox
{
	background-color:#121212;
	margin:0 auto;
	border-style:none;
	color:#ffffff;
	margin:40px;
	padding:20px;
	max-width:1200px;
	min-width:400px;
}

.loginline
{
	height:30px;
	width:100%;
}

.table-login
{
	min-width:400px;
	max-width:1200px;
}
.table-login-input
{
	width:395px;
	border-style:none;
	background-color:#cccccc;
}
.table-login th
{
	text-align:left;
	font-weight:normal;
}

.content-contact
{
	width:50%;
	margin:0 auto;
	text-align:center;
}

.table-contact
{
	width:100%;
}

.fieldset-contact
{
	border-color:#00aa00;
	border-width:1px;
	border-radius:5px;
	width:100%;
	background:rgba(255,255,255,0.8);
}

.fieldset-contact th
{
	text-align:left;
}
.fieldset-contact input
{
	width:100%;
	border-style:solid;
	border-width:1px;
	border-color:#cccccc;
}
.fieldset-contact textarea
{
	width:100%;
	height:200px;
	border-style:solid;
	border-width:1px;
	border-color:#cccccc;
}

.fieldset-tips
{
	border-color:#00aa00;
	border-width:1px;
	border-radius:5px;
	margin:10px;
	padding:10px;
	background:rgba(255,255,255,0.8);
	width:800px;
}

.fieldset-deposit
{
	border-color:#00aa00;
	border-width:1px;
	border-radius:5px;
	margin:10px;
	background:rgba(255,255,255,0.8);
}


.htable { margin: 0; padding: 0; width:100%; }
.htable td { padding-left:5px; padding-right:5px; white-space: nowrap; text-align:right; }
.htable th { border-width: 0 1px 1px 0; padding-left:5px; padding-right:5px; color:#000000; text-align:left; font-weight:normal; }
.htable tr:nth-child(odd) { background-color:#dddddd; }
.htable tr:nth-child(even) { background-color:#ffffff; }

.table-tips { margin: 0; padding: 0; width:800px; }
.table-tips td { padding-left:5px; padding-right:5px; white-space: nowrap; text-align:right; }
.table-tips th { border-width: 0 1px 1px 0; padding-left:5px; padding-right:5px; color:#ffffff; text-align:left; font-weight:normal; background-color:#444; }
.table-tips tr:nth-child(odd) { background-color:#dddddd; }
.table-tips tr:nth-child(even) { background-color:#ffffff; }
.table-tips tr:hover { background-color:#8888ff; }



.listtype-select select {
	width:240px;
	padding:3px;
	border-style:solid;
	border-width:1px;
	border-color:#cccccc;
	background: #444;
	color:#fff;
	cursor:pointer;
}

.listtype-select label {
	background-color:#005f5f;
}



.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	position:relative;
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
    animation-name: animatetop;
	animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
	from {top: -300px; opacity: 0}
	to {top: 0; opacity: 1}
} 

/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.loginhidden {
	transition: all 0.5s linear;
	opacity:0;
	visibility:hidden;
	height:0px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.loginshown {
	transition: all 0.5s linear;
	opacity:1;
	visibility:visible;
	height:300px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.createhidden {
	transition: all 0.5s linear;
	opacity:0;
	visibility:hidden;
	height:0px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.createshown {
	transition: all 0.5s linear;
	opacity:1;
	visibility:visible;
	height:550px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.recoverhidden {
	transition: all 0.5s linear;
	opacity:0;
	visibility:hidden;
	height:0px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.recovershown {
	transition: all 0.5s linear;
	opacity:1;
	visibility:visible;
	height:200px;
	display:flex;
	justify-content:center;
	align-items:center;
}


.content-buttons
{
	align-items: stretch;
	display: flex;
	min-height: 3.25rem;
	width: 100%;
	max-width: 1200px;
	flex-grow: 1;

	margin: 0 auto;

	position: relative;
	flex-wrap:wrap;
}


.btn-group button {
	background-color: #121212;
	color: #ffffff;
	padding: 10px 24px; /* Some padding */
	cursor: pointer; /* Pointer/hand icon */
	float: left; /* Float the buttons side by side */
	margin:10px;
	border-style:none;
}

.btn-group button:not(:last-child) {
	border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
	content: "";
	clear: both;
	display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
	background-color: #555555;
	color:#00ffff;
}

.btn-group .selected { background-color:#888888; }

.content-account
{
	display:flex; flex-direction:row;display:flex; flex-direction:row;
	flex-grow:1; flex-wrap:wrap;
	width:100%;
	max-width:1200px;
	margin: 0 auto;
}

.databox
{
	margin:10px;
	float:left;
	color:#aaaaaa;
	font-family: 'Oswald', sans-serif;
}

.databox:hover
{
	color:#00ffff;
}
.databox:hover .dvalue
{
	color:#00ffff;
}

.dheader
{
	text-align:center;
	padding:10px;
	font-size:12px;
	color:#ffffff;
}
.dvalue
{
	color:#ffffff;
	background-color:#000000;
	text-align:center;
	padding:10px;
}

.container-matches
{
	width:100%;
	float:left;
	display:flex; flex-direction:row; flex-grow:1; justify-content:space-around; flex-wrap:wrap;
	margin-top:10px;
	margin-bottom:30px;
}

.cms
{
	width:100%;
	float:left;
	display:flex; flex-direction:row; flex-grow:1; justify-content:space-around; flex-wrap:wrap;
}

.cmbox {
width:400px;
padding:20px;
background-color:#444444;
color:#ffffff;
border-radius:5px;
}

/*.cmbox:hover { background-color:#555555; color:#00ffff; }*/

.matchbox {
width:400px;
padding:5px;
background-color:#121212;
margin-bottom:20px;
color:#ffffff;
border-radius:10px;
}

.boxshadow { box-shadow:2px 2px rgba(0,0,0,0.5),4px 4px rgba(0,0,0,0.6); }

.matchbox:hover { background-color:#444444; color:#00ffff; box-shadow:2px 2px rgba(0,0,0,0.3),4px 4px rgba(0,0,0,0.32); }
.line { display:flex; flex-direction:row; width:400px; height:40px; flex-grow:1; justify-content:space-between; align-items:center; }
.team {
font-size:30px;
#font-family:arial;
}
.vs {
#font-family:arial;
padding-top:10px;
}
.rselector { display:flex; flex-direction:row; flex-grow:1; justify-content:center; }
.rsbutton { width:20px; height:27px; text-align:center; border-radius:4px; padding-top:7px;
border-style:solid; border-width:1px; border-color:#dddddd; cursor:pointer; }
.rsresult { width:80px; text-align:center; }
.red { background-color:#ff4444; color:#ffffff; }
.green { background-color:#44ff44; }
.rsresult input { width:68px; border-color:#dddddd; border-radius:4px; border-width:1px; border-style:solid; height:32px; }
@media all and (max-width:800px) {
.line { width:390px; }
.rselector { width:150px; }
.matchbox { width:400px; }
}
.lcol { width:150px; text-align:center; flex-grow:1; display:flex; justify-content:center; align-items:center; }
.mcol { width:90px; text-align:center; flex-grow:1; display:flex; justify-content:center; align-items:center; }
.rcol { width:150px; text-align:center; flex-grow:1; display:flex; justify-content:center; align-items:center; }
.lcolu { width:150px; text-align:center; flex-grow:1; display:flex; justify-content:center; align-items:center;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #00ffff;
}

.gray { color:#aaaaaa; }

.button { cursor:pointer; border-style:none; background-color:#e74c3c; padding:10px; color:#ffffff; border-radius:5px; }
.button:hover { background-color:#333333; color:#ffffff; }
.inpresult {
text-align:center; cursor:default;
border-style:none !important;
background-color:#777777;
border-radius:4px !important; color:#000000;

padding: 6px 20px;
  background-color: #888888;
}

.pager_line { display:flex; flex-direction:row; width:100%; height:40px; flex-grow:1; justify-content:center; align-items:center; }

.today { color:#8888ff; font-weight:bold; }
.matchbox_old { background-color:#222222; color:#999999; }

.content-deposit
{
	float:left;
}

.fieldset-deposit
{
	padding:10px;
}

.content-tips
{
	float:left;
}



.navbar {
min-height: 3.25rem;
}
.navbar, .navbar-menu, .navbar-start, .navbar-end {
align-items: stretch;
display: flex;
}
.navbar {
background-color:#121212;
min-height: 3.25rem;
position: relative;
z-index: 30;
}

.navchamps{
	background-color:#232323;
	min-height: 3.25rem;
	position: relative;
	z-index: 30;
}

.content-header
{
	align-items: stretch;
	display: flex;
	min-height: 3.25rem;
	width: 100%;
	max-width: 1200px;
	flex-grow: 1;

	margin: 0 auto;

	position: relative;
	flex-wrap:wrap;
}

.menu-option
{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height: 3.25rem;
	text-decoration:none;
	color:#ffffff;
	padding-left:5px;
	padding-right:5px;
}

.mlogo
{
	width:131px;
}

.menu-option a {
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	text-decoration: none;
	color: #fff;
	display: block;
	transition: .3s background-color;
	padding-left:5px;
	padding-right:5px;
	#line-height:40px;
}

.menu-option a:hover {
	color:#00ffff;
	cursor:pointer;
}
								 
.menu-option a.active {
	color: #00ffff;
	cursor: pointer;
	border-bottom-style:solid;
	border-bottom-width:2px;
	border-bottom-color:#00ffff;
}

.errorpos
{
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	color:#88ff88;
	padding:10px;
	display:flex;
	justify-content:center;
	align-items:center;
	height:40px;
	cursor:pointer;
}

.errorhide {
	transition: all 0.5s linear;
	opacity:0;
	visibility:hidden;
	height:0px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.commonfont
{
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
}

.fontwhite
{
	color:#ffffff;
}

.footer-lang
{
	display:flex;
	justify-content:center;
}


.input-container{
	position:relative;
	margin-bottom:25px;
}
.input-container label{
	position:absolute;
	top:0px;
	left:0px;
	font-size:16px;
	color:#fff;
    pointer-event:none;
	transition: all 0.5s ease-in-out;
	font-family: 'Oswald', sans-serif;
}
.input-container input{
  border:0;
  border-bottom:1px solid #aaa;
  background:transparent;
  width:100%;
  padding:8px 0 5px 0;
  font-size:16px;
  color:#fff;
}
.input-container input:focus{
 border:none;
 outline:none;
 border-bottom:1px solid #e74c3c;
}
.input-container input:focus ~ label,
.input-container input:valid ~ label{
	top:-12px;
	font-size:12px;

}

.lbinput
{
	font-size:16px;
	color:#fff;
    pointer-event:none;
	font-family: 'Oswald', sans-serif;
}


select {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

.rowflex { display:flex; margin-left:5px; margin-right:5px; }