/* ************************************************************************** */
/* Modal Box
/* ************************************************************************** */
.MW_SelectMonth {
   position:fixed;
   overflow:scroll;
   background-color: rgba(000, 000, 000, 0.7);
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 9999;
   opacity: 0;
   pointer-events: none;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
 }
.MW_SelectMonth:target {
   opacity: 1;
   pointer-events: auto;
 }
.MW_SelectMonth>div {
   width: 400px;
   position: relative;
   margin: 10% auto;
   padding: 1rem;
   background: #fff;
   color: #444;
   border-radius: 10px;
 }
 @media screen and (max-width: 640px) {
   .MW_SelectMonth>div {
    width: 80%;
    margin: 25% auto;
   }
}
/* ********************************** */
/* content */
.MW-Content_SelectMonth h3 {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #00A0FF;
  text-shadow: none;
  margin: 0;
 }
.MW-modal-close {
  line-height: 50px;
  font-size: 22px  ;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  color: #444;
}
.MW-modal-close:hover {
  font-weight: bold;
  color: #000;
}
/* Anzeige Monat und Jahr neben einander */
.Month-Year-Body {
  width: 100%;
  padding: 15px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* - - - - - - - - - - - - - - - - - - - - - - -  */
/* Anzeige einstellungen innerhalb des DIV Monats */
.ContentMonth {
  width: 75%;
  height: 75%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}
/* Li Sheet */
.ContentMonth li {
  /* Posit horizont und vertical */
  width: 25%;
  display: flex;
  justify-content:center;
  align-items: center;
  list-style: none;
  font-size: 20px;
}
/* erzeugt ein Quatrat */
.ContentMonth li:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
/* - - - - - - - - - - - - - - - - - - - - - -  */
/* Anzeige Einstellungen innerhalb des DIV Jahr */
.ContentYear  {
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  font-size: 18px;
}
@media screen and (max-width: 640px) {
  .ContentYear {
    width: 16%;
    font-size: 15px;
  }
}
/* Li Sheet */
.ContentYear li {
  display: flex;
  justify-content:center;
  align-items: center;
  list-style: none;
}
/* erzeugt ein Quatrat */
.ContentYear li:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
/* - - - - - - - - - - - - - - - - - - - - - - -  */
/* Mouse Over Effekt */
.Month-Year-Body li:hover {
  background-color: #BFBFBF;
  border-radius: 50%;
  font-weight: bold;
}
/* Linkstyle */
.ContentMonth li>a , .ContentYear li>a {
  text-decoration: none;
  color: #444;
}
.homelink {
  position:absolute;
}
/* aktueller Monat / Jahr */
.today{
  background: linear-gradient(70deg, #D4E8F5,#89C1EB);
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
}