/* fonts */
/* NOTE : Convert to otf and ttf for iOS compatability;
@font-face{
  font-family: Opensans;
  src: url(../fonts/openSans.ttf), 
       url(../fonts/openSans.otf);
}
*/
*{
  transition: background 0.5s ease, color 0.5s ease;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
:root{
  --body-background : #2a2a2a;

  --max-mobile : 560px ;
  --body-color : #050202;

  --lllgray : #fafafa;
  --llgray  : #333333;
  --lgray   : #dedee0;
  --gray    : #707070;
  --dgray   : #2b2b32;
  --ddgray  : #333333;
  --dddgray : #333333;

  --fgold   : #9e874e;
  --lgold   : ;
  --gold    : #ebc76e;
  --dgold   : ;
  --orange  : #e3ac24;
}

body{
	font-family: "system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"";
	font-size:16px;
	color: var(--body-color);
	background: var(--body-background);
}
button{
  font-size: 100%;
  font-family: inherit;
  border:0;
  padding:0;
  background: none;
  color:inherit;
}

[v-cloak] { display:none }

a{
	color: inherit;
	text-decoration: none;
}
a:hover{
	color: inherit;
	text-decoration: none;
}


.xxs { font-size: xx-small; }
.xs { font-size: x-small; }
.smr { font-size: smaller; }
.sm { font-size: small; }
.md { font-size: medium; }
.lg { font-size: large; }
.lgr { font-size: larger; }
.xl { font-size: x-large; }
.xxl { font-size: xx-large; }
.normal{ font-size:1em; }

.pointer{cursor:pointer;}
.b{font-weight: bold;}
.hb{font-weight: 600;}
.ghost{ pointer-events: none; }
.cloak{ opacity:0; pointer-events: none;}
.fx3{flex: 0.33}
.fx1{flex: 1}
.wrap{flex-wrap: wrap}
.nowrap{white-space: nowrap;}

.white{color: white;}
.red{color:#ec2c2c;}
.green{color:#009903;}
.orange{color:var(--orange)}
.dorange{color: #fd841b}
.gray{color:var(--gray);}
.fgold{color: var(--fgold)}
.gold{color: var(--gold)}
.col-center{
  display:flex;
  align-items: center;
}
.col-end{
  display:flex;
  align-items: center;
  justify-content: flex-end;
}
.full-center{
  display:flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.col-spaced{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lh-auto{ line-height:auto; }
.lh-lg{ line-height:1.5em; }
.lh-md{ line-height:1.25em; }
.lh-sm{ line-height:1em; }

.spacer-1{height: 50px}
.spacer-2{height: 100px}
.spacer-3{height: 150px}
.spacer-4{height: 200px}
.spacer-5{height: 250px}

.text-reset{
  text-transform: none;
}

/* Page wrapper */

.page{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content-section{
  flex : 1;
}
.footer-section{
  flex:0;
}
.max-mobile{
  max-width: min(var(--max-mobile),100%);
  margin:0 auto;
}

.nav-footer {
  background: var(--lllgray);
  color: #707070;
  padding: 5px;
  font-size: small;
  position: fixed;
  bottom: 0;
  max-width: min(var(--max-mobile),100%);
  width: 100%;
  z-index: 2;
}
.nav-footer img{
  width: 32px;
}
.footer-item{
  margin:0 3%;
  text-align: center;
}
.footer-active{
  color: var(--fgold);
}

.dark .nav-footer{
  background: #050202;
  color: var(--fgold);
}
.dark .footer-active{
  color: white;
}

/*side bar */
.side-wrap{
  background: #00000040;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: 30;
}
.sidebar{
  background: #dfdfdf;
  position: fixed;
  left: 0;
  top: 0;
  width: min(400px,75%);
  z-index: 40;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
.sidebar hr{
  color: #e6c280;
}
.sports-side{
  flex: 1;
  height: 50%;
  display: flex;
  flex-direction: column;
}
.dark .sidebar{
  background: #050202;
  color: white;
}
.side-section{
  margin-bottom: 1em;
  padding: 1.5em;
  background: white;
}
.dark .side-section{
  background: #2b2b2b;
}
.side-background{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.side-selector{
  background: white;
  border: 1px solid white;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 3px 6px 0 rgba(178, 150, 97, 0.5);
}
.side-selector > button {
  padding: 5px 10px;
  border-radius: 5px;
}
.side-selector .active{
  background: #e3ac24;
}

.dark .side-selector{
  background: #1c1d21;
  border: 1px solid #937322;
}

.side-top{
  background: white url('../images/img-drawer-light.png') no-repeat 0 0 / contain;
}
.dark .side-top{
  background: black url('../images/img-drawer-dark.jpg') no-repeat 0 0 / contain;
}
.side-acctype{
  font-size: small;
  color: var(--fgold);
}
.side-sports{
  width: 100%;
  margin-bottom: 1em;
  padding: 10px;
  border-radius: 5px;
}
.toggleWC{
  background: #e3ac24;
}
.side-sports:last-of-type{
  margin-bottom: 0;
}
.side-sports > img{
  width: 30px;
  margin-right: 1em;
  }

.side-sport-selector{
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid #dfdfdf;
  color: #707070;
  font-size: large;
}
.side-sport-tab{
  width: 40%;
  text-align: center;
  padding: 10px;
}
.side-sport-tab.active{
  border-bottom: 4px solid #e2b976;
  color: #b29661;
}
.dark .side-sport-selector{
  color: #a7a7a7;
  border-color: #5f502c;
}
.side-sport-tab.active{
  border-bottom: 4px solid #e3ac24;
  color: #e3ac24;
}
/*Makes button click space bigger*/
.enlarge-btn{
  padding-left: 1em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

.btn-big-orange{
  background: #ec602c;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 1em;
  margin: 1em;
  border-radius: 30px;
  box-shadow: 0px 2px 6px #ec602c44;
  cursor: pointer;
}
.parley-report-card .parley-score{
  color: #ec602c;
  white-space: nowrap;
}
.close-btn{
  background: linear-gradient(to bottom, #f1d798, #dfb36e);
  padding: 10px 1em;
  border-radius: 2em;
  color: white;
  width: 150px;
  margin: 15px auto;
  font-weight: bold;
  cursor: pointer;
}