:root {
  /* --primaryColor: #009688; */
  --primaryColor: #000000;
  --primaryFontColor: #cccccc;
  --secondaryColor: #cccccc;
  --secondaryFontColor: #000000;
  --shinySilver: linear-gradient(135deg, #919191 10%, white 50%, #919191 90%);
  --scrollWidth: 15px;
  --buttonHieght: 10vh
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-touch-callout: none; /* Safari */
        -webkit-user-select: none; /* Chrome */     
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; 
}
html {
  margin: 0%;
  height: 100%;
  background-color: var(--primaryColor) !important;
  color: var(--primaryFontColor) !important;
}
body {
    margin: 0%;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-transform: uppercase;
  }
a{
  /* all: unset; */
}
button {
  all:unset;
  -webkit-touch-callout: none; /* Safari */
        -webkit-user-select: none; /* Chrome */     
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; 
}
  .headerText {
    font-size: 3vh;
    font-weight: bold;
    width: auto;
    border: none;
    outline: 0;
    text-align: center;
  }
  .header {
    color: var(--primaryFontColor) !important;
    background-color: var(--primaryColor) !important;
    top: 0;
    height: 25%;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    display: block;
  }
  .footer {
    color: var(--primaryFontColor) !important;
    background-color: var(--primaryColor) !important;
    top: 0;
    height: 15%;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    display: block;
  }
  #innerBody {
    height: 60%;
    width: 100%;
    /* background: var(--shinySilver); */
    /* background-image: linear-gradient(135deg, #919191 25%, white 50%, #919191 75%);; */
    background-color: #000000;
  }
  .itemFormat {
    /* background-color: var(--secondaryColor);
    background-image: var(--shinySilver);
    color: var(--secondaryFontColor);
    border-radius: 2vh; */
    /* height: 90%; */
    width: 100%;
    /* border: var(--primaryColor); */
    /* border-width: thin; */
    /* border-style: solid; */
    box-sizing: border-box;
  }
  .primaryStyle{
    background-color: var(--primaryColor);
    /* background-image: var(--shinySilver); */
    color: var(--primaryFontColor);
    /* border-radius: 2vh; */
    /* height: 11vh;
    width: 100%; */
    /* border: var(--primaryFontColor);
    border-width: thin;
    border-style: solid;
    box-sizing: border-box; */
  }
  .primaryBorder{
    /* border-radius: 2vh; */
    border: var(--primaryFontColor);
    border-width: thick;
    border-style: solid;
    box-sizing: border-box;
  }
  .secondaryStyle{
    background-color: var(--secondaryColor);
    background-image: var(--shinySilver);
    color: var(--secondaryFontColor);
    border-radius: 2vh;
    /* height: 11vh;
    width: 100%; */
    border: var(--primaryColor);
    border-width: thin;
    border-style: solid;
    box-sizing: border-box;
  }
  a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
  }

.roundcorners {
  border-radius: 10px;
}

.teamColumn {
  float: left;
  width: 50%;
  height: 100%;
}
.doubleColumn {
  float: left;
  width: 50%;
  height: 100%;
}
.singleColumn {
  float: left;
  width: 100%;
  height: 100%;
}
.fielderColumn {
  width: 100%;
  height: 100%;
  overflow: scroll;
  touch-action: auto;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.fielderColumn::-webkit-scrollbar {
  display: none;
}
/* Chrome, Safari, Edge, Opera */
/* input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
} */

/* Firefox */
/* input[type=number] {
  -moz-appearance: textfield;
} */
.statButton{
  all: unset;
  float: left;
  /* border-radius: 50%; */
  font-size: 100%;
  height: 7vh;
  width: 25%;
  text-align: center;
  position: relative;
}
.statButton button{
  height: 90%;
}
.playerButton{
  all: unset;
  width: 100%;
  padding-bottom: .5vh;
}
.navButton{
  height: 100%;
  width: 100%;
}
.statItem{
  float: left;
  font-size: 100%;
  height: 100%;
  width: calc(100%/2);
  text-align: center;
}
.gameInfo{
  float: left;
  font-size: 110%;
  height: 100%;
  width: calc(100%/3);
  text-align: center;
}
.teamStandingsItem{
  float: left;
  font-size: 110%;
  height: 100%;
  width: calc(100%/8);
  text-align: center;
}
.individualStandingsItem{
  float: left;
  font-size: 110%;
  height: 100%;
  width: calc(100%/5);
  text-align: center;
}
.scheduleGameItem{
  float: left;
  font-size: 110%;
  height: 100%;
  width: calc(100%/5);
  text-align: center;
}
.keeperStandingsItem{
  float: left;
  font-size: 110%;
  height: 100%;
  width: calc(100%/6);
  text-align: center;
}
.statLabel{
  float: left;
  background-color: var(--secondaryColor);
  font-size: 100%;
  height: calc(100%/3);
  width: 100%;
}
.plusMinusButton{
  all: unset;
  float: left;
  background-color:var(--secondaryColor);
  font-size: 100%;
  height: calc(100%/3);
  width: 100%;
}
.triColumn{
  float: left;
  /* font-size: 110%; */
  height: 100%;
  width: calc(100%/3);
  
}
.textCenter{
  text-align: center;
}

.floatingActionButtons{
  position: absolute; 
  z-index: 5; 
  left: 50%; 
  translate: -50%; 
  /* display: block; */
}
.floating{
  z-index: 5;
}
/* .floatingActionButtons:hover, .floatingActionButtons:active{
  
} */
/* .floatingActionButtons:hover, .floatingActionButtons:active{
  background-image: linear-gradient(135deg, red 10%, rgb(255, 140, 159) 50%, red 90%);
} */
.floatAbove{
  translate: -50% -100%;
}
.floatAbove:hover, .floatAbove:active{
  background-image: linear-gradient(135deg, green 10%, rgb(159, 255, 159) 50%, green 90%);
}
.floatBelow{
  translate: -50% ;
}
.floatBelow:hover, .floatBelow:active{
  background-image: linear-gradient(135deg, red 10%, rgb(255, 140, 159) 50%, red 90%);
}
.hidden{
  display: none;
}
.block{
  display: block;
}
.plusMinusLabel{
  background-color: var(--secondaryColor);
  font-size: 100%;
  height: 100%;
  width: 100%;
}
.statContainer{
  display : flex;
  align-items : center;
  height: 30%;
}
.playerTag{
  height: 70%;
  width: 100%;
  vertical-align: top;
  /* text-align: center; */
}
.playerName{
  margin:0% auto 0% auto;
  /* display: table; */
  /* font-size: 150%; */
  vertical-align: middle;
}
.playerImage{
  width: auto;
  height: 70%;
  margin: auto;
  display: table;
}

#content{
  height: 100%;
}

@keyframes pointerEvent {
  100% {
    pointer-events: auto;
 }
}
.popupForm{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* height: 23vh; */
    z-index: 3;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
}
.floatingPopupForm{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  /* height: 23vh; */
  z-index: 4;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
}
#formBackground{
  width:100%;
  height:100%;
  left:0;/*IE*/
  top:0;
  text-align:center;
  z-index:2;
  position:fixed;
  background-color:#000000;
  opacity: 60%;
}
#floatingBackground{
  width:100%;
  height:100%;
  left:0;/*IE*/
  top:0;
  text-align:center;
  z-index:4;
  position:fixed;
  background-color:#000000;
  opacity: 60%;
}
.popupBackground{
  width:100%;
  height:100%;
  left:0;/*IE*/
  top:0;
  text-align:center;
  z-index:4;
  position:fixed;
  background-color:#000000;
  opacity: 60%;
}
#pageName{
  height: 100%;
}
.headerButton{
  all: unset;
  height: 100%;
}
.listItem{
  height: var(--buttonHieght);
}
#timerForm{
  height: 100%;
}
#mainLogo{
  height: 75%;
  position: relative;
  top: 12.5%;
}
#newPlayerLogo{
  height: 90%;
  position: relative;
  top: 10%;
}
.formLogo{
  height: 90%;
  position: relative;
  top: 10%;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px; /* Adjust as needed */
  width: 20px; /* Adjust as needed */
  background-color: #eee;
  border: 1px solid #ccc;
}

#waiver:checked + .checkmark:after {
  content: 'Your custom message here';
  position: absolute;
  left: 25px; /* Adjust as needed */
  top: 0;
  color: #333; /* Adjust text color as needed */
}

.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}
.headerTopRow{
  height: 70%;
}