:root {
/*--sharpDarkBlue: #1d9bf0;  /*152A48  var(--sharpDarkBlue)*/
--sharpBlack: #404040;/*#2e2e2e;*/ /*#1E1E1E;*/  
--sharpWhite: #F9F8F8; 
--sharpGrey: #f0f0f0;  
--sharpGrey1: #dbdbdb;  
--sharpOrange: #0069FF; /*#1d9bf0;*/ 
--sharpDarkBlue: #091a2e;
--sharpLighBlue: #0069FF; 
}
 
body {
  background-color: var(--sharpGrey);
  color:var(--sharpDarkBlue);
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
.logoGR {
	grid-area:logoGR;
	margin-top:20px;
	font-size: 26px;
	font-family:Varela Round;/*, sans-serif;*/
	font-weight:500;
	color:var(--sharpLighBlue);
	margin-left:1px;
}
.navbar{
  background-color: var(--sharpWhite);
  height:70px;
  margin-bottom:10px;
  border-bottom: 4px solid lightgrey;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;

  }
.navGrid{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 60px 140px 1fr 600px 200px;
    grid-template-areas:
    "logoG logoGR blank1 openB userName";
}
.blank1{
	grid-area:blank1;
}
.openB{
	grid-area:openB;
}
.userName{
	grid-area:userName;
	color:var(--sharpDarkBlue);
}
.tagline{
  grid-area:tagline;
  font-size:12px;
  margin-left:8px;
  margin-top:-14px;
  color:var(--sharpDarkBlue);
}
.logoG{
  grid-area:logoG;
}
.tagline{
  grid-area:tagline;
}
input[type=submit] {
  	width: 60px;
  	background-color:var(--sharpLighBlue);
    color:var(--sharpWhite);     
    padding: 5px;
    border: none;
    font-size:16px;
    cursor: pointer;
}
input[type=text] {
  	width: 200px;
    background-color:var(--sharpWhite);
    color:var(--sharpDarkBlue);
    padding: 5px;
    font-size:16px;
    border-style: solid;
    border-width: 2px;
    text-align:center;
    border-color:var(--sharpGrey1); 
}
input[type=password] {
  	width: 200px;
  	background-color:var(--sharpWhite);
    color:var(--sharpDarkBlue);
    padding: 5px;
    font-size:16px;
    border-style: solid;
    border-width: 2px;
    text-align:center;
    border-color:var(--sharpGrey1); 
}
.container{
  max-width:100%;
  margin:auto;
}
.betFeedGrid{
  display: grid;
  grid-gap: 5px;
  margin-top:6px;
  padding: 8px;
  cursor: pointer;
  background-color:var(--sharpWhite);
  color:var(--sharpDarkBlue);
  grid-template-columns: 3fr 2fr 100px 100px;
    grid-template-areas:
    "team1team2 bookie stake rating"
    "betText bookie stake rating"
    "countryComp bookie stake rating"
    "timeToGo bookie stake rating";
}
.team1team2{
	grid-area:team1team2;
	font-weight: bold;
	font-size: 16px;
}
.betText{
	grid-area:betText;
	color:var(--sharpLighBlue);
	font-weight: bold;
	font-size: 16px;
}
.bookie{
	grid-area:bookie;
	font-size: 14px;
}
.stake{
	grid-area:stake;
	text-align: center;
	font-size: 14px;
}
.rating{
	grid-area:rating;
	font-size: 14px;
}
.countryComp{
	grid-area:countryComp;
	font-size: 14px;
}
.timeToGo{
	grid-area:timeToGo;
	font-size: 12px;
}
.goldBar{
	background-color:var(--sharpLighBlue);
	color:var(--sharpWhite);
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	padding: 5px;
	border-style: solid;
	border-radius: 10px;
	width:50px;
	border-color:var(--sharpWhite);
}
.silverBar{
	background-color:var(--sharpLighBlue);
	color:var(--sharpWhite);
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	padding: 5px;
	border-style: solid;
	border-radius: 10px;
	width:50px;
	border-color:var(--sharpWhite);
}
.bronzeBar{
	background-color:var(--sharpLighBlue);
	color:var(--sharpWhite);
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	padding: 5px;
	border-style: solid;
	border-radius: 10px;
	width:50px;
	border-color:var(--sharpWhite);
}
.openBetsGrid{
	display: grid;
  grid-gap: 10px; 
  margin-top: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 14px;
  max-width: 600px;
  grid-template-areas:
    "openEP openBetNo openTo ";
}
.openTo{
	grid-area:openTo;
	background-color:var(--sharpWhite);
	color:var(--sharpDarkBlue);
	border:  2px solid var(--sharpGrey1);
	padding: 8px;
	text-align: center;
	border-radius:12px;
}
.openBetNo{
	grid-area:openBetNo;
	background-color:var(--sharpWhite);
	color:var(--sharpDarkBlue);
	border:  2px solid var(--sharpGrey1);
	padding: 8px;
	text-align: center;
	border-radius:12px;
}
.openEP{
	grid-area:openEP;
	background-color:var(--sharpGrey1);
	color:var(--sharpDarkBlue);
	font-weight: bold;
	border:  2px solid var(--sharpGrey1);
	padding: 8px;
	text-align: center;
	border-radius:12px;
}
.dashTopGrid{
	display: grid;
  grid-gap: 25px; 
  grid-template-columns: 1fr 1fr 1fr 1fr;
  line-height: 1.6;
  grid-template-areas:
    "panelProfit panelRoi panelTurnover panelNoBets";
}
.panelProfit{
	grid-area:panelProfit;
	background-color:var(--sharpOrange);
	color:var(--sharpWhite);
	padding: 20px;
	text-align: center;
	font-weight: bold;
	border-style: solid;
	border-color:var(--sharpOrange);
	border-radius: 12px;
}
.panelRoi{
	grid-area:panelRoi;
	background-color:var(--sharpWhite);
	color:var(--sharpDarkBlue);
	padding: 20px;
	text-align: center;
	border-style: solid;
	border-color:var(--sharpGrey1);
	border-radius: 12px;
}
.panelTurnOver{
	grid-area:panelTurnover;
	background-color:var(--sharpWhite);
	color:var(--sharpDarkBlue);
	padding: 20px;
	text-align: center;
	border-style: solid;
	border-color:var(--sharpGrey1);
	border-radius: 12px;
}
.panelNoBets{
	grid-area:panelNoBets;
	background-color:var(--sharpWhite);
	color:var(--sharpDarkBlue);
	padding: 20px;
	text-align: center;
	border-style: solid;
	border-color:var(--sharpGrey1);
	border-radius: 12px;
}


.mainGrid{
  display: grid;
  margin-top: 70px;
  grid-gap: 25px;
  padding: 8px;
  grid-template-columns: 200px 5fr 3fr;
  padding: 20px;
  grid-template-areas:
    "leftMenu centerArea rightArea";
}

@media (max-width:1040px) {
	.mainGrid{
		grid-template-columns: 1fr;
		grid-template-areas:
    	"centreArea";
    grid-gap: 0px;
    padding: 0px;
	}
	.leftMenu{
		display:none;
	}
	.rightArea{
		display:none;
	}
}

.topArea{
	grid-area:topArea;
}
.leftMenu{
	grid-area:leftMenu;
	position: fixed;
}
.centerArea{
	grid-area:centerArea;
}
.rightArea{
	grid-area:rightArea;
}
.menuItem{
	display: grid;
	border-radius: 0px 25px 25px 0px;
  margin-top: 8px;
  grid-gap: 5px;
  padding: 8px;
  grid-template-columns: 40px 140px;
  grid-template-areas:
  "menuIcon menuName";
}
.menuItem:hover { 
  background-color: var(--sharpGrey1);
}
.menuIcon{
	grid-area:menuIcon;
	margin-left: 5px;
}
.menuName{
	grid-area:menuName;
	margin-top: 3px;
}
.whitePanel{
	background-color:var(--sharpWhite);
  color:var(--sharpDarkBlue);
  padding: 8px;
}

.betFeedTopGrid{
	display: grid;
	background-color:var(--sharpWhite);
  color:var(--sharpDarkBlue);
  margin-bottom: 6px;
  grid-gap: 5px;
  padding: 12px;
  grid-template-columns: 1fr 80px;
  grid-template-areas:
    "currentBetFeed refreshFeed"
    "feedNoBets refreshFeedn";  
}
}

#currentBetFeed{
	grid-area:currentBetFeed;
	font-weight: bold;
}
#refreshFeed{
	cursor: pointer;
	grid-area:refreshFeed;
}
#feedNoBets{
	grid-area:feedNoBets;
}


.betFeedFilter{
	display: grid;
	cursor: pointer;
	background-color:var(--sharpWhite);
  color:var(--sharpDarkBlue);
  margin-bottom: 6px;
  grid-gap: 5px;
  padding: 8px;
  grid-template-columns: 1fr 20px;
  grid-template-areas:
    "betFilterName betFilterEdit"
    "betFilterDescription betFilterDescription";  
}
.betFilterName{
	grid-area:betFilterName;
	font-weight: bold;
}
.betFilterEdit{
	grid-area:betFilterEdit;
	cursor: pointer;
}
.betFilterDescription{
	grid-area:betFilterDescription;
}
ul {
  list-style-type: none;
  padding-left: 0;
}
.searchBetfeed{
	display: grid;
	border-radius: 0px 25px 25px 0px;
  margin-top: 8px;
  grid-gap: 0px;
  padding: 8px;
  grid-template-columns: 30px 180px;
  grid-template-areas:
  "searchIcon searchBox";
}
.searchIcon{
	grid-area:searchIcon;
	padding: 4px;
	box-shadow: inset 0px 0 0 var(--sharpGrey), inset 0 -2px 0 var(--sharpGrey1), inset 2px 0 0 var(--sharpGrey1), inset 0 2px 0 var(--sharpGrey1);
}
.searchBox{
	grid-area:searchBox;
}

/*bet registration form*/
.betRegisterGrid{
  display: grid;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  line-height:1.6;
  max-width:400px;
  grid-gap: 10px;
  padding: 18px;
  background-color:var(--sharpWhite);
  color:var(--sharpDarkBlue);
  border-style: solid;
  border-width: 2px;
  border-color:var(--sharpGrey1); 
  border-radius: 25px;
  grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "closeX closeX closeX"
    "teams2 teams2 teams2"
    "countryComp2 countryComp2 countryComp2"
    "betSelection2 betSelection2 betSelection2"
    "rating2 rating2 rating2"
    "timeToGo2 timeToGo2 timeToGo2"
    "actualStake2 odds2 sportsbook2"
    "registerOddsUn2 registerOddsUn2 registerOddsUn2"
    "registerPaper2 registerPaper2 registerPaper2"
    "registerCash2 registerCash2 registerCash2";
}
.betRegisterGrid.active {
  transform: translate(-50%, -50%) scale(1);
}
#overlay {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .4);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

.redButton{
    background-color:var(--sharpLighBlue);
    color:var(--sharpWhite);    
    padding: 5px;
    font-size:24px;
    cursor: pointer;
    text-align:center;
    
}
.clearButton{
    background-color:white;
    color:var(--sharpDarkBlue);    
    padding: 5px;
    font-size:14px;
    cursor: pointer;
    border-style: solid;
    border-width: 2px;
    text-align:center;
    border-color:var(--sharpGrey1); 
}
#closeX{
	grid-area:closeX;
	font-size: 24px;
	margin-bottom:-10px;
	cursor: pointer;
}
#teams2{
	grid-area:teams2;
	font-size: 20px;
}

#countryComp2{
	grid-area:countryComp2;
	font-size: 16px;
}
#odds2{
	grid-area:odds2;
	font-size: 16px;
	text-align:center;
}
#timeToGo2{
	grid-area:timeToGo2;
	text-align:center;
}
#betSelection2{
	grid-area:betSelection2;
	font-weight: bold;
	font-size: 22px;
	text-align:center;
	color:var(--sharpDarkBlue);
}
#rating2{
	grid-area:rating2;
	text-align:center;
}
#actualStake2{
	grid-area:actualStake2;
	font-size: 16px;
	text-align:center;
}
#sportsbook2{
	grid-area:sportsbook2;
	font-size: 16px;
	text-align:center;
}
#registerCash2{
	grid-area:registerCash2;
}
#registerPaper2{
	grid-area:registerPaper2;
}
#registerOddsUn2{
	grid-area:registerOddsUn2;
}
#formBookieList{
	height:30px;
	width:100%;
	font-size:14px;
	background-color:white;
	color:var(--sharpGrey1)
	border-style: solid;
  border-width: 2px;
  text-align:center;
  border-color:var(--sharpGrey1); 
	}

/*ends bet registration form*/

/*bet presets form*/
.betfeedPresetGrid{
  display: grid;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  line-height:1.6;
  max-width:400px;
  grid-gap: 10px;
  padding: 18px;
  background-color:var(--sharpWhite);
  color:var(--sharpDarkBlue);
  border-style: solid;
  border-width: 2px;
  border-color:var(--sharpGrey1); 
  border-radius: 25px;
  grid-template-columns: 1fr 1fr 1fr fr;
  grid-template-areas:
  "close2X close2X close2X close2X"
  "presetName presetName presetName presetName"
  "presetDesc presetDesc presetDesc presetDesc"
  "oddsLow oddsHigh timeFrom timeTo"
  "bookieList bookieList bookieList bookieList"
  "ratingList ratingList ratingList ratingList"
  "betType betType betType betType"
  "orderBy orderBy orderBy orderBy"
  "savePreset savePreset savePreset savePreset";
}
.betfeedPresetGrid.active {
  transform: translate(-50%, -50%) scale(1);
}
#close2X{
	grid-area:close2X;
	font-size: 24px;
	margin-bottom:-10px;
	cursor: pointer;
}
#presetName{
	grid-area:presetName;
}
#presetDesc{
	grid-area:presetDesc;
}
#oddsLow{
	grid-area:oddsLow;
}
#oddsHigh{
	grid-area:oddsHigh;
}
#timeFrom{
	grid-area:timeFrom;
}
#timeTo{
	grid-area:timeTo;
}
#bookieList{
	grid-area:bookieList;
}
#ratingList{
	grid-area:ratingList;
}
#betType{
	grid-area:betType;
}
#orderBy{
	grid-area:orderBy;
}
#savePreset{
	grid-area:savePreset;
}

.clearButton2{
    background-color:white;
    color:var(--sharpDarkBlue);  
    margin-top:5px; 
    padding: 5px;
    font-size:14px;
    cursor: pointer;
    border-style: solid;
    border-width: 2px;
    text-align:center;
    border-color:var(--sharpGrey1); 
}
.clearButton3{
    background-color:white;
    color:var(--sharpDarkBlue);  
    margin-top:5px; 
    padding: 5px;
    font-size:14px;
    cursor: pointer;
    border-style: solid;
    border-width: 2px;
    text-align:center;
    border-color:var(--sharpGrey1); 
}
/*ends bet preset form*/
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid var(--sharpGrey);
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: var(--sharpGrey);
}
.pageButton{
	  display: inline;
    background-color:var(--sharpGrey1);
    color:var(--sharpDarkBlue);    
    padding: 8px;
    cursor: pointer;
    margin-right: 10px;
    text-align:center;
    border-radius: 5px;
}