/* li button {
  border-radius: 50%;
  border: 1px solid black;
  padding-top: 3px;
} */
.Noborder {
  border: none !important;
  width: 374px; /* This is the width of the popup box */
}

li a {
  top: 10px; /* This moves the Blue circle */
  text-decoration: none !important;
  position: relative;
}

li a span {
  display: none;
}
li a:hover span {
  display: block;
  position: absolute;
  width: 160px; /* This is the width of the tooltip */
  left: 10px;
  top: 5px;
  /* padding: 5px; */
  /* margin: 10px; */
  z-index: 1000;
  color: rgb(115, 14, 14);
  background-color: #ffffcc;
  border: 1px solid #ccc;
  font: 10px Verdana, sans-serif;
  text-align: center;
}

/* SHAPES & Colors */
.AquaCircle,
.AquaCircleInOval,
.Rect,
.Oval,
.Box,
.YellowBox,
.RedBox {
  position: relative;
  width: 27px;
  height: 27px;
  padding: 1px;
  border: 1px solid #453e3e;
  color: #000;
  font: 14px Arial, sans-serif;
  cursor: pointer;
  text-align: center;
  margin-top: 18px;
}
.AquaCircle,
.AquaCircleInOval {
  top: -1px;    /* 3/23/25 was -19px  */
  left: -1px;
  width: 25px;
  height: 25px;
  border-radius: 52%;
  background: aqua;
}
.AquaCircleInOval{
  top: -19px;
  left: 3px;
}
.Rect {
  width: 35px;
}
.Oval {
  width: 35px;
  border-radius: 50%;
}

/* ---------------------- */

.Firefox_AquaText,
.Firefox_AquaTextSingleDigit {
  /* This moves TODAYS date */
  top: -8px;   /* Was -9px on July 4th 2025 - changed for Today with no events */
  left: -7px;
  position: absolute;
}
.Firefox_AquaTextSingleDigit {
  left: -4px;
}

.Firefox_GreenText,
.Firefox_GreenTextSD,
.Firefox_OvalText,
.Firefox_OvalTextSD,
.Chrome_GreenText {
  /* This moves the date in an event in Firefox*/
  top: -16px;
  left: -6px;
  position: absolute;
}
.Chrome_GreenText {
  /* This moves the date in an event in Chrome*/
  top: -3px;
}
.Firefox_GreenTextSD {
  left: -4px;
}
.Firefox_OvalText {
  left: -6px;
}
.Firefox_OvalTextSD {
  left: -4px;
}

/* If these events are today single digit (SD) or two digit */
.Firefox_smGreenText,
.Firefox_smGreenTextSD,
.Chrome_smGreenText,
.Chrome_smGreenTextSD {
  /* This moves TODAYS date in an event */
  top: -10px;
  left: -7px;
  position: absolute;
}
/* .Firefox_smGreenText is default, SD -4 not -7, Chrome Top -9 */
.Firefox_smGreenTextSD,
.Chrome_smGreenTextSD {
  left: -4px;
}
.Chrome_smGreenText,
.Chrome_smGreenTextSD {
  top: -9px;
}

/* Only used if today has events */
.shSmBox,
.shSmBoxInOval {
  width: 90%;
  height: 86%; /*was 90% 21 Feb 2024 */
  position: relative;
  top: 1px !important; /*was 0 21 Feb 2024 */
  /* Needed to control the Top */
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #453e3e;
  color: #000;
  background: rgb(189, 220, 195);
}
.shSmBoxInOval{
  top: -19px;
}

/* These move the red shapes  - TH off &*/
/* No Event, Event, No Ev but Today, Event Today */

.Firefox_TopLTri,
.Firefox_TopLTriEv,
.Firefox_TopLTriToday,
.Firefox_TopLTriEvToday,
.Chrome_TopLTriEvToday,
.Chrome_TopLTriEv,
.Chrome_TopLTriToday,
.Chrome_TopLTri {
  width: 0;
  height: 0;
  border-top: 6px solid red;
  border-right: 6px solid transparent;
  position: absolute;
}
.Firefox_TopLTriEvToday {
  top: -13px;
  left: -13px;
}
.Chrome_TopLTriEvToday {
  top: -14px;
  left: -14px;
}
.Firefox_TopLTriEv {
  top: -21px;
  left: -13px;
}
.Chrome_TopLTriEv {
  top: -10px;
  left: -12px;
}
.Firefox_TopLTriToday {
  top: -10px;
  left: -13px;
}
.Chrome_TopLTriToday {
  top: -11px;
  left: -13px;
}
.Firefox_TopLTri {
  top: -1px;
  left: -10px;
}
.Chrome_TopLTri {
  top: 8px;
  left: -10px;
}

/* The before and after will be rendered before and after the element with the css property */
.heartevtoday,
.heartev,
.hearttoday,
.heart {
  position: relative;
  width: 0px;
  height: 0px;
}

/* Two haves of the heart */
.heartEvToday:before,
.heartEvToday:after,
.heartEv:before,
.heartEv:after,
.heartToday:before,
.heartToday:after,
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 7px; /* moves heart part +>*/
  top: 23px;
  width: 5px;
  height: 7px;
  background: blue;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heartEvToday:after,
.heartEv:after,
.heartToday:after,
.heart:after {
  left: 3px; /* moves blue heart part +>*/
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
.heartEv:before,
.heartEv:after {
  top: 5px;
  left: -1px;
}
.heartEv:after {
  left: -5px;
}