.circuloPassado {background: #bad1f5;width: 200px;height: 200px;border-radius: 50%;}
.circuloFinalizaHoje {background: #dba9fc;width: 200px;height: 200px;border-radius: 50%;}
.circuloAberto {background: #363636;border-radius: 50%;}
.passada {background-color: #bad1f5;}
.hoje {background-color: #dba9fc;}
.aberta {background-color: #dddddd;}
.imediato {background-color: #dff3b6;}
.sphere {
  height: 230px;
  width: 230px;
  border-radius: 50%;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%;  
  text-align: center;
  vertical-align: middle;
  text-shadow: 4px 4px 8px #FFFFFF;
  font-weight:bold;
  font-size: 7%;
  position: relative;
  box-shadow: inset -5px -5px 25px #00458a, 5px 5px 20px #000, inset 0px 0px 10px #363636;
  display: inline-block;
  margin: 0%;
}

.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 25%;
  position: absolute;
  top: 5%;
  left: 18%;
  border-radius: 60%;
  transform: rotate(45deg);
}
/*https://codepen.io/nordstromdesign/pen/sJlth*/

/*https://codepen.io/Merri/pen/gimKw*/
/*http://alistapart.com/article/creating-intrinsic-ratios-for-video/*/