:root {
  --main-brand-color: 				#0DBAB3;
  --main-brand-textColor: 		#042020;

  --bg-color1: 								#8ad4d2;
  --bg-color2: 								#B7E1E1;
  --bg-color3: 								#cce8e8;

  --text-color2: 							#074B4A;
  --color-trans: 							#0DBAB3;

  --link-color: 							#520099;

  --default-animation-speed: 	.3s; 
}
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

html, body {
	font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, Arial, sans-serif;
	/*font-weight: 100;*/
	color:#024a49;
	background-color: var(--bg-color2);
}
a {
	text-decoration: none;
	color:var(--text-color2);
}
p {
	margin-bottom: 12px;
}
.odds {
	-webkit-appearance: none;
	font-size:14px;
	height:44px;
	padding:12px;
	min-width: 60px;
	border:0px solid #000;
	border-radius: 2px;
	background-color: var(--bg-color2);
	outline: none;
}
#container {
	display: flex;
	flex-direction: row;
  flex-wrap: wrap;
  
}

.head2head .selection .selectionName {
	display: inline-block;
	width:calc(100% - 60px);
}
.head2head .selection .selectionPrice {
	display: inline-block;
	width:60px;
}
.head2head .selection {
	margin-bottom: 12px;
}
.head2head .selection:last-child {
	margin-bottom: 0px;
}

header {
	height:50px;
	background-color: var(--main-brand-color);
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:10;

	background-image: url('/images/logo.svg');
	background-size: auto 35px;
	background-repeat: no-repeat;
	background-position: 12px center;

	transition: left var(--default-animation-speed);
}

footer {
	color:var(--main-brand-textColor);
	text-align: center;
	width:100%;
	order: 3;
	margin-left:0px;
	transition: .3s;
	background-color: var(--main-brand-color);
	padding:12px;
	min-height: 100px;
}
h1 {
	padding:18px 0px 12px;
	/*margin-bottom:12px;*/
	font-weight:normal;
}
h2 {
	font-weight:normal:;
	font-size:18px;
}
#sideNav {
	width:200px;
	background-color: #a7d9d8;
	/*border-right:1px solid #ccc;*/
	min-height: 100%;
	padding-top:50px;
	order: 1;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis:200px;
	-webkit-overflow-scrolling: touch;

	transition: left var(--default-animation-speed);
}
#sideNav ul {
	list-style: none;
	margin:12px 0;
}
#sideNav ul li {
	padding:6px 18px;
	/*border-bottom:1px solid #ddd;*/
}
#sideNav ul li a {
	color:var(--text-color2);
}
#sideNav .groupTitle {
	padding:24px 12px 0px;
	height:50px;
	/*border-bottom:1px solid #ddd;*/
	background-color:#64bdbb;
	color:var(--main-brand-textColor);

	position: -webkit-sticky; /* Safari */
  position: sticky;
  top:0px;
}

.mainContentContainer {
	padding-top:50px;
	order: 2;
	margin-left:0px;
	transition: margin-left .3s;
	flex-grow:1;
	flex: 1 0 50%;
	position: relative;
	background-color: #fffdf7;
	padding-bottom: 1px;
}
.mainContent {
	padding:0px 12px 12px;
}

.topNav {
	overflow-x:auto;
	/*position: absolute;*/
	top:50px;
	left:0px;
	right:0px;
	height:50px;
	background-color: var(--bg-color2);
}
.topNav ul {
	list-style: none;
	font-size:0px;
/*	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;*/
	white-space: nowrap;
	text-align: center;
	
	
}
.topNav ul li {
	font-size:14px;
	text-align: center;
	display: inline-block;
	/*border-right:1px solid #88d1d0;*/
	padding-left:50px;
	padding-right:24px;
	padding-top:18px;
	height:50px;

	background-image:url('/images/icon.svg');
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 30px;
}
.topNav ul li:last-child {
	border-right:0px solid #ccc;
}
.topNav ul li a {
	color:var(--text-color2);
}
.topNav ul li.selected a span {
	width:auto;
	border-bottom:3px solid var(--color-trans);
}



#betslip {
	position:fixed;
	bottom:0px;
	right:0px;
	width:100%;
	max-width:420px;

	transition: right var(--default-animation-speed);
}
#betslip .tabs {
	list-style: none;
	font-size:0px;
}
#betslip .tabs li {
	display:inline-block;
	width:50%;
	height:44px;
	text-align: center;
	font-size:16px;
	background-color: #a7d9d8;
	padding-top:12px;
}



@media (hover: none) {
  #sideNav {
		height: 100%;
		overflow: hidden;
		overflow-y:auto;
		position:fixed;
	}
	#sideNav ul li {
		height:44px;
		padding:12px 12px;
	}
}

@media only screen 
and (max-device-width : 1023px) 
and (orientation : portrait) {
	html {
		height: 100%;
  	width: 100%;
		/*overflow:hidden;*/
	}
	body {
		/*display: initial;*/
		height: 100%;
		width:100%;
		-webkit-text-size-adjust:100%;
		/*touch-action:manipulation;*/
		-webkit-overflow-scrolling: touch;
		overflow: hidden;
		overflow-y:scroll;
		position:relative;
	}
	#disabledOverlay {
		position:fixed;
		background-color:rgba(255,255,255,0);
		pointer-events: none;
		width:100%;
		height:100%;
		z-index: 1;
		top:0px;
		left:0px;
		box-shadow: -3px 0px 5px rgba(0,0,0,.3);

		transition: var(--default-animation-speed);
	}
	.menuOpen #disabledOverlay {
		left:250px;
		background-color:rgba(255,255,255,.0);
		pointer-events: auto;
		/*box-shadow: -3px 0px 5px rgba(0,0,0,.3);*/
	}
	.menuOpen,
	.menuOpen body {
/*		overflow:hidden;
		overflow-y: hidden;
		height:100%;
		-webkit-overflow-scrolling: auto;*/
		width:100%;
		height:100%;
		overflow:hidden;
		overflow-y: hidden;
	}
	.topNav {
		overflow-x:auto;
		position: relative;
		top:auto;
		left:auto;
		right:auto;
		height:auto;
	}
	.topNav ul li {
		width:75px;
		height:75px;
		background-position: center 12px;
		background-size: 36px;
		padding-left:0px;
		padding-right:0px;
		padding-top:0px;
	}
	.topNav ul li a {
		display:block;
		width:100%;
		height:100%;
		position: relative;
		text-align: center;
		padding-top: 40px;
	}
	.topNav ul li a span {
		/*position:absolute;*/
		/*width:100%;*/
		left:0px;
		bottom:0px;
		display: inline-block;
		vertical-align: top;
		padding:8px 0px 7px;
	}
	.topNav ul li.selected a span {
		/*padding:0px 0px 7px;	*/
	}
	#container {
		display:block;
		width:100%;
		min-height: 100vh;
		
		overflow-x:hidden;
		/*overflow-y: scroll;*/
		-webkit-overflow-scrolling: touch;
	}
	.mainContent {
		padding:0px;
	}
	h1 {
		padding:18px 12px 12px;
	}

	#sideNav {
		width:250px;
		left:-250px;
		top:0px;
		padding-top:0px;
	}

	.mainContentContainer {
		padding-top:0px;
		float: none;
		width:100%;
		min-height:calc(100vh - 50px);
		margin-top:50px;
	}

	.menuOpen #sideNav {
		left:0px;
	}
	.menuOpen .mainContentContainer,
	.menuOpen footer  {
		margin-left:250px;
	}

	header {
		background-position: center center;
		/*position:absolute;*/
		/*-webkit-transform: translateZ(0);*/

	}
	.menuOpen header {
		left:250px;
	}
	.menuOpen #betslip  {
		right:-250px;
	}
	header .menu {
		width:32px;
		height:3px;
		background-color: var(--main-brand-textColor);
		font-size:11px;
		text-align:center;
		display: block;
		position: relative;
		margin-left: 12px;
		margin-top:24px;
	}
	header .menu::after,
	header .menu::before {
		content: '';
		display: block;
		width:32px;
		height:3px;
		position: absolute;
		top:-8px;
		left:0px;
		background-color: var(--main-brand-textColor);

		transition: var(--default-animation-speed);
	}
	header .menu::after {
		top:8px;
	}
	.menuOpen .menu {
		background-color: transparent;
	}
	.menuOpen .menu::after {
		transform: rotate(45deg);
		top:0px;
	}
	.menuOpen .menu::before {
		transform: rotate(-45deg);
		top:0px;
	}
}

@media only screen 
and (min-device-width : 800px) 
and (hover: none) {
	.mainContentContainer {
		margin-left:200px;
		min-height: 100%;
	}
	#container {
		width:100%;
		height:100%;
		position: fixed;
		overflow-y: auto;
	}
	footer {
		margin-left:200px;
	}
}


@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3) { 
	#betslip .tabs li  {
		/*height:64px;*/
		--safe-area-inset-bottom: env(safe-area-inset-bottom);
		/*padding-top: env(safe-area-inset-bottom);*/
		height:calc(44px + var(--safe-area-inset-bottom));
	}
	footer {
		padding-bottom:calc(32px + var(--safe-area-inset-bottom));
	}
}