/***************************************************************************/
/******************** css/calendar - F.E.G.l.P. e.V. ***********************/
/************************ MIT LICENSE **************************************/
/***************************************************************************/

#loader{
  position:fixed !important;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:15px;
  z-index:999999;
  margin:0;
  padding:0;
  font-size: 17px;
  font-weight:bold;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top: 4px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.month-wrapper {
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
    min-height: 100vh;
}

@media(min-width:1200px){

    .month-wrapper{
        display:block;
        column-count:2;
        column-gap:20px;
    }

    .month{
        display:inline-block;
        width:100%;
        margin:0 0 20px;
        break-inside:avoid;
    }

    .month.past{
        column-span:all;
    }
}

/* MONTH */
.month {
  border-radius:16px;
  overflow:hidden;
  opacity:0;
  transform:translateY(-25px);
  transition:all .6s ease;
}

.month.show-cal {
  opacity:1;
  transform:translateY(0);
}

.month.past {
  opacity:0.45;
  filter:grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.month-header {
  padding-left: 18px;
  padding-right: 18px;
  font-size:24px;
  font-weight:bold;
  cursor:pointer;
  max-width: 700px;
  margin: 0 auto;
}

.month-header:active,
.month-header:focus-visible {
  font-size: 22px;
}

.month-content {
  max-height:2000px;
  overflow:hidden;
  transition:all .4s ease;
  padding:15px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 15px;
  border-radius: 25px;
  /* backdrop-filter: blur(20px); */
  /* -webkit-backdrop-filter: blur(20px); */
  background-color: #393939f2;
  border: 2px solid #1b1b1b30;
  max-width: 700px;
  box-shadow: 0 0.6rem 0.6rem -0.2rem #00000040;
}

.month-content.closed {
  max-height:0;
  opacity:0;
  padding:0 15px;
}

.weekday {
  display:inline-flex;
  align-items:center;
  color: white;
  padding: 3px 8px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-bottom: 1px;
  padding-top: 1px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  background: #5ab8ff;
}

.event {
  display:flex;
  gap:15px;
  padding:15px 0;
  border-bottom: 1px solid #eeeeee14;
  opacity:0;
  transform:translateY(10px);
  transition:all .35s ease;
}

.event.show-cal {
  opacity:1;
  transform:translateY(0);
}

.event.past-day{
  opacity:0.45;
  filter:grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.event-desc{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform: translateY(-6px);
  transition: all .35s ease;
  font-size:13px;
  color:#ddd;
  margin-top:0;
  flex-basis:100%;
  width:100%;
  display:block;
}

.event-desc.open{
  max-height:250px;
  opacity:1;
  transform: translateY(0);
  margin-top:8px;
  font-size: 14px;
  font-style: italic;
  color: white;
  font-weight: bold;
  background: #8383831a;
  border-radius: 20px;
  padding: 10px 20px;
  margin-right: 20px;
}

.circle {
  width:45px;
  height:45px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: white;
  text-shadow: 0 0 2px black;
  font-weight:bold;
  font-size: 17px;
  border: 1px solid #8b8b8ba3;
}

.circle:hover {
  text-shadow: 0 0 2px #397af1;
  transform: scale(1.1);
}

.circle:active,
.circle:focus-visible {
  transform: scale(1.1);
}

.circle.today {
  width: 47px !important;
  height: 47px !important;
  border: 3px solid #ff6b01 !important;
  /* background: #fff !important; */
  /* color: #ff9800 !important; */
  box-shadow: 0 0 5px rgba(255, 238, 0, 0.94);
}

.circle.past-day-circle {
  background:#999 !important;
  color:#fff;
}

.info{
  flex:1;
  display:flex;
  flex-direction:column;
}

.title {
  font-weight:bold;
  font-size: 16px;
}

.meta{
  font-size:13px;
  color: #4f4f4f;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  align-items:center;
  width:100%;
}

.badge {
  background: #ff9800;
  color: white;
  padding:3px 8px;
  border-radius:20px;
  font-size:12px;
  font-weight:bold;
}

.desc {
  color: currentColor;
  cursor:pointer;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid #ffffff5c;
  padding-right: 5px;
  background-color: #f4f4f4;
}

.desc.active {
  background-color: #ffaa9cc7 !important;
}

.desc:hover {
  box-shadow: inset 0 0 10px rgba(194, 194, 194, 0.695);
}

.desc:active,
.desc:focus-visible {
  transform: scale(0.98);
}

.badge-time{
  background: #1976d2;
  color: white;
  padding:3px 8px;
  padding-bottom: 1px;
  padding-top: 1px;
  border-radius:20px;
  font-size:12px;
  font-weight:bold;
}

.badge-location{
  background:#4caf50;
  color: white;
  padding:3px 8px;
  padding-bottom: 1px;
  padding-top: 1px;
  border-radius:20px;
  font-size:12px;
  font-weight:bold;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.modal.show-cal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-content {
  background: #3d3d3d;
  width: 95%;
  padding:30px;
  border-radius:20px;
  transform: translateY(20px) scale(.98);
  opacity: 0;
  transition: all .25s ease;
  overflow-y: auto;
  margin-top: 5%;
  margin-bottom: 2%; 
}

.modal.show-cal .modal-content {
  transform:translateY(0) scale(1);
  opacity:1;
}

.close {
  position:absolute;
  right:15px;
  top:10px;
  font-size:45px;
  cursor:pointer;
  user-select:none;
  line-height:0.7;
  color: currentColor;
  transition: transform 0.2s ease;
}

.close:hover {
color: #848484;
}

.close:active,
.close:focus-visible {
  transform: scale(0.98);
}

.cal-dist {
padding-bottom: 30px;
}