.calendar-list {
    margin: 0;
    list-style: none;
    /*
    padding: 0px 2px 2px 10px;
    background-image: url('/static/assets/img/icon-calendar.svg');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 15px;
    */
}

.calendar-popup-main {
  display:none;
  position: fixed;
  padding-top: 180px; /* Location of the box */
  left: 0;
  top: 0;
  overflow-y: scroll;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index: 20;
  font-family: 'Kanit', sans-serif;
}

.white {
  color: white;
}

.grey {
  color: #AAAAB1;
}

.calendar-popup {
  width: 50%;
  margin: auto;
  border-radius: 20px;
  background-color: #2487ce;
  position: relative;
  color: white;
  z-index: 19;
}

@media screen and (max-width: 800px) {
  .calendar-popup {
   width: 90%;
  }
  .calendar-popup-num-date {
  top: -100px;
  }
}

.calendar-popup-num-date {
  font-size: 800%;
  width: 100%;
  text-align: center;
  margin: auto;
  font-weight: 700;
  position: relative;
  top: -90px;
}

.calendar-popup-month {
  width: 50%;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  color: white;
  font-size: 150%;
  position: relative;
  top: 15px;
}

.calendar-popup-weekday {
  width: 50%;
  margin: auto;
  text-align: center;
  font-size: 150%;
  position: relative;
  top: 90px;
}

.calendar-popup-current-events {
  top: -90px;
  font-size: 80%;
  position: relative;
  margin-left: 25px;
}

.calendar-popup-event-line {
  width: 90%;
}

.cal-year {
  width: 100%;
  cursor: pointer;}

.cal-year-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
}

.cal-month {
  font-family: sans-serif;
  text-align: center;
  padding: 5px;
}

.cal-month-name {
  text-decoration: uppercase;
}

.cal-month-grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-gap: 2px;
  font-size: 85%;
}

.cal-day {
  background-color: #ff;
}

/* Close Button */
.cal-close {
  color: #ff;
  position: relative;
  font-size: 120%;
  font-weight: bold;
  float: right;
  padding: 10px 20px 0 0;
}

.cal-close:hover,
.cal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* event colors */
.red-bkgd {
  color: #ffffff;
  background-color: #ff0000;
}

.dark-red-bkgd {
  color: #ffffff;
  background-color: #880000;
}

.light-red-bkgd {
  background-color: #ffdcdc;
}

.blue-bkgd {
  color: #ffffff;
  background-color: #0088ff;
}

.middle-blue-bkgd {
  color: #ffffff;
  background-color: #0044ff;
}

.dark-blue-bkgd {
  color: #ffffff;
  background-color: #0000ff;
}
.light-blue-bkgd {
  background-color: #7bcffc;
}

.dark-purple-bkgd {
  color: #ffffff;
  background-color: #9703ad;
}

.light-purple-bkgd {
  background-color: #f6baff;
}

.green-bkgd {
  background-color: #00cc00;
}

.dark-green-bkgd {
  color: #ffffff;
  background-color: #007700;
}

.light-green-bkgd {
  background-color: #aaffaa;
}

.yellow-bkgd {
  background-color: #ffff88;
}

.orange-bkgd {
  background-color: #f7a533;
}

.brown-bkgd {
  color: #ffffff;
  background-color: #a55f03;
}

.black-bkgd {
  color: #ffffff;
  background-color: #000;
}

.grey-bkgd {
  background-color: #aaa;
}

/* Tooltip container */
.cal-tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.cal-tooltip .cal-tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #888;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
 
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.cal-tooltip:hover .cal-tooltiptext {
  visibility: visible;
}