#fixedTop {
  position: sticky;
  z-index: 100;
  top: 75px;
  left: 0;
  width: 100%;
  background-color: #FFF;
}

#calendar {
  margin: 0px 0px 20px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap; /* keeps content in one line */
}

.calCon {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}

#allCals {
  display: flex;
  width: 1200px
}

.calGroup {
  width: 235px;    
}


#content {
  position: relative;
  /*top: 400px;
  height: calc(100vh - 400px);
  overflow-y: scroll;
  overflow-x: hidden;
  border-bottom: 5px solid #000;*/
}

#contentCenter {
  position: relative;
  
  left: 50%;
  transform: translateX(-50%);
}

.eventsCon {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
.matchCon {
  max-width: 220px;
  /*float: left;*/
  margin: 0px 5px 40px 10px;
 
}

.infoCon {
  clear: both;
  border: 1px solid #CCC;
  padding: 10px;
  text-align: center;
   border-radius: 6px;
}

.timeScore {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 7px;
}
.grouploc {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  color: #555 !important;
  margin: 0px 0px 5px 0px !important;
  line-height: 1.4em !important;
}
.links {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 0px;
}
.dateHead {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-left: 10px;
}


.calsq {
  width: 32px;
  height: 50px;

  border: 1px solid #CCC;
  margin: 0px -1px -1px 0px;
  text-align: center;
  padding: 0px 7px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.calsq:hover {
  background-color: #f4f4f4;
}
.calsqBlue {
  color: #144aa8;
}
.invis {
  border: 1px solid #FFF;
}
.nogames {
  color: #999;
}
.caldot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #CCC;
  float: left;
  margin: 2px 2px 0px 1px;
}
.callabel {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #333;
  
}
.calNum {
  margin: 3px 0px 6px 0px;
  color: #333;
}
#julLabel {
  position: relative;
  left: 498px;
}
#stage2Label {
  position: relative;
  left: 450px;
}
#stage2LabelEsp {
  position: relative;
  left: 400px;
}
#countryDrop {
  margin-bottom: 15px;

}
.dropdown {
  margin-left: 5px;
}
.btn-secondary {
  background-color: #FFF;
  color: #333;
  font-size: 14px;
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}
.outHigh {
  background-color: #d9eefd;
}
.fillHigh {
  background-color: black;
}

#dtable {
        display: block;
        text-align: center;
        border-color: #CCC;
        border-radius: 4px;
        padding: 5px;
        margin-bottom: 10px;
        color: #333;
        font-size: 14px;
      }

.moreLink {
  color: #144aa8;
  text-decoration: none;
}

.calBottom {
  border: none;
  height: 1px;
  background-color: #999;
}

#may31, #august30 {
  border-bottom: 2px solid #CCC;
}

@media (max-width: 700px ) {
  

  .matchCon {
    width: 95%;
    max-width: none;
    margin: 5px 5px 20px 5px;
  }

  #calendar {
    background-color: #FFF;
    
  }

  #countryDrop { 
    
  }
  
  .calsq {
  
  }


  #content {
    /*top: 360px;*/
    height: auto;
  }

  #fixedTop {
    width: 97%;
  }

  .anchor {
    /*display: block;
    position: relative;
    top: -100px;
    visibility: hidden;*/
  }

  #contentCenter {
    width: 100%;
    left: 0;
    transform: translateX(0%);
  }

  
}