#area {
    background: #EFEFEF;
}

#events-calendar {
}

#events-calendar #calendar-topbar {
}

#events-calendar #calendar-area {
    display: flex;
    gap: 4rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
    align-items: flex-start;
}

#events-calendar #calendar-area #calendar-sidebar {
    background-color: white;
    border-radius: 10px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    min-width: 200px;
    flex: none;
    position: sticky;
    top: 2rem;
}

#events-calendar #calendar-area #calendar-sidebar .calendar-filters {
    margin-bottom: 2rem;
}

#events-calendar #calendar-area #calendar-sidebar .calendar-filters > p {
    font-weight: bold;
    margin-bottom: 1rem;
}

#events-calendar #calendar-area #calendar-sidebar .calendar-filters form {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}

#events-calendar #calendar-area #calendar-sidebar .calendar-filters form label {
    flex: 1;
    position: sticky;
}

#events-calendar #calendar-area #calendar-sidebar .calendar-filters form label::before {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-image: url('/plugins/extranet/widgets/events/assets/svg/calendar-icon.svg');
    z-index: 999;
}

#events-calendar #calendar-area #calendar-sidebar .calendar-filters form label input.datepicker {
    border: 1px solid #E5ECED !important;
    border-radius: 10px;
    padding-left: 50px;
}

#events-calendar #calendar-area #calendar-sidebar .the-calendar {
    margin-bottom: 2rem;
}

#events-calendar #calendar-area #calendar-sidebar .calendar-categories {
}

#events-calendar #calendar-area #calendar-sidebar .calendar-categories > p{
    font-weight: bold;
    margin-bottom: 1rem;
    font-size: 20px;
}

#events-calendar #calendar-area #calendar-sidebar .calendar-categories ul { }
#events-calendar #calendar-area #calendar-sidebar .calendar-categories ul li {display: flex;gap: 0.5rem;margin-bottom: 0.5rem;align-items: center;}
#events-calendar #calendar-area #calendar-sidebar .calendar-categories ul li span.color{width: 10px;border-radius: 10px;height: 20px;color: black;font-size: 12px;text-align: center;display: flex;align-items: center;justify-content: center;font-weight: bold;}
#events-calendar #calendar-area #calendar-sidebar .calendar-categories ul li a {text-decoration: none;display: block;display: flex;align-items: center;gap: 0.5rem;}
#events-calendar #calendar-area #calendar-sidebar .calendar-categories ul li.active a{ font-weight: bold; }

#events-calendar #calendar-area #calendar-content {
    flex: 1;
}

#events-calendar #calendar-area #calendar-content .calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

#events-calendar #calendar-area #calendar-content .calendar-toolbar img {
    width: 25px;
    height: 25px;
}

#events-calendar #calendar-area #calendar-content .calendar-toolbar img.active {
    filter:
    invert(18%)        /* kick grey towards colour */
    sepia(100%)        /* warm it up */
    saturate(6000%)    /* boost intensity */
    hue-rotate(196deg) /* spin to blue */
    brightness(92%)    /* tweak lightness */
    contrast(92%);     /* tighten the look */
}

#events-calendar #calendar-area #calendar-content .calendar-toolbar .calendar-toolbar-views {
    display: flex;
    align-items: center;
    gap: 1rem;
}



/** Default - grid view **/
#events-calendar #calendar-area #calendar-content #calendar-today { background-color: white; border-radius: 10px; padding: 3rem; width: 100%; margin-top: 2rem; display: flex; gap: 2rem; }
#events-calendar #calendar-area #calendar-content #calendar-today > div:nth-child(1) { width: 30%; font-size: 60px; color: #005CB9; font-weight: bold; line-height: 1; }
#events-calendar #calendar-area #calendar-content #calendar-today > div:nth-child(2) { flex: 1; display: flex; flex-wrap: wrap; gap: 1rem; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block { border: 1px solid #E5ECED; display: flex; gap: 1rem; align-items: center; padding: 1rem; width: 48.8%; border-radius: 10px; border-left: 10px solid #b5b0b0; transition: transform 2s linear; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block:hover { transform: scale(1.02) !important; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block .event-block-featured {}
#events-calendar #calendar-area #calendar-content #calendar-today .event-block .event-block-featured svg, #events-calendar #calendar-area #calendar-content #calendar-today .event-block .event-block-featured img { width: 70px; aspect-ratio: 1 / 1; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block .event-block-title { font-weight: bold; font-size: 18px; margin-bottom: 0.5rem; text-decoration: underline; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block .event-block-description { line-height: 1.2; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block .event-block-arrow { display: none; }

#events-calendar #calendar-area #calendar-content #calendar-days { margin-top: 2rem; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry { column-count: 3; column-gap: 1rem; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box { background-color: white; border-radius: 10px; padding: 2rem; break-inside: avoid; margin-bottom: 1rem; display: inline-block; width: 100%; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-date { display: flex; gap: 0.4rem; align-items: flex-start; margin-bottom: 1rem; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-date > div:nth-child(1) { font-weight: bold; font-size: 46px; color: #005CB9; margin-top: -3px; margin-left: -10px; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-date > div:nth-child(2) { color: #005CB9; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-date > div:nth-child(2) span:nth-child(1) { font-weight: bold; display: block; font-size: 22px; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-date > div:nth-child(2) span:nth-child(2) { color: initial; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-events {}
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-events > p { font-weight: bold; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-events ul {}
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-events ul li { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-events ul li span.color { width: 10px; border-radius: 10px; height: 20px; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box-events ul li a { text-decoration: none; display: flex; align-items: center; gap: 0.5rem; font-weight: bold; margin: 0; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
#events-calendar #calendar-area #calendar-content #calendar-today, #events-calendar #calendar-area #calendar-content #calendar-today .event-block, #events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box { opacity: 0; transform: translateY(20px); }
#events-calendar #calendar-area #calendar-content #calendar-today { animation: fadeInUp 0.6s ease-out forwards; animation-delay: 0.1s; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block {animation: fadeInUp 0.4s ease-out forwards;text-decoration: none;}
#events-calendar #calendar-area #calendar-content #calendar-today .event-block:nth-child(1) { animation-delay: 0.3s; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block:nth-child(2) { animation-delay: 0.4s; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block:nth-child(3) { animation-delay: 0.5s; }
#events-calendar #calendar-area #calendar-content #calendar-today .event-block:nth-child(4) { animation-delay: 0.6s; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box { animation: fadeInUp 0.4s ease-out forwards; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box:nth-child(1) { animation-delay: 0.5s; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box:nth-child(2) { animation-delay: 0.6s; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box:nth-child(3) { animation-delay: 0.7s; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box:nth-child(4) { animation-delay: 0.8s; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box:nth-child(5) { animation-delay: 0.9s; }
#events-calendar #calendar-area #calendar-content #calendar-days.masonry .event-day-box:nth-child(6) { animation-delay: 1.0s; }


/** Default - list view **/
#events-calendar #calendar-area #calendar-content.list-view #calendar-today{display: block;}
#events-calendar #calendar-area #calendar-content.list-view #calendar-today > div:nth-child(1){width: 100%; margin-bottom: 2rem; }
#events-calendar #calendar-area #calendar-content.list-view #calendar-today > div:nth-child(1) br{ display: none; }
#events-calendar #calendar-area #calendar-content.list-view #calendar-today > div:nth-child(2){flex-direction: column;gap: 0;}
#events-calendar #calendar-area #calendar-content.list-view #calendar-today .event-block{width: 100%;border-top: none;border-bottom: 2px solid #eee;border-right: none;margin-bottom: 0.2rem;}
#events-calendar #calendar-area #calendar-content.list-view #calendar-today .event-block .event-block-featured{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-today .event-block .event-block-featured svg,
#events-calendar #calendar-area #calendar-content.list-view #calendar-today .event-block .event-block-featured img{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-today .event-block .event-block-title{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-today .event-block .event-block-description{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-today .event-block .event-block-arrow{display: block;width: 40px;height: 40px;margin-left: auto;}

#events-calendar #calendar-area #calendar-content.list-view #calendar-days{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry{column-count: 1;column-gap: 0;}
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box{margin-bottom: 0;border-radius: 0;border-top: 1px solid #ccc;}
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box:first-of-type{border-top-left-radius: 10px;border-top-right-radius: 10px;border-top: none;}
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box:last-of-type{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-date{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-date > div:nth-child(1){  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-date > div:nth-child(2){  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-date > div:nth-child(2) span:nth-child(1){  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-date > div:nth-child(2) span:nth-child(2){  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-events{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-events > p{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-events ul{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-events ul li{  }
#events-calendar #calendar-area #calendar-content.list-view #calendar-days.masonry .event-day-box-events ul li a {  }


/** The Calendar **/
#calendar .fc-toolbar-title{ font-size: 1.4em; }
#calendar .fc-button-primary{ background-color: var(--sidebar-bg-color); border: none; }
#calendar .fc-col-header-cell { background-color: var(--sidebar-bg-color); font-size: 13px; font-weight: bold; color: white; padding-top: 5px; padding-bottom: 5px; }
#calendar .fc-daygrid-header .fc-col-header-cell { background-color: var(--sidebar-bg-color); font-size: 14px; color: white; }
#calendar .fc-daygrid-day-frame {padding-top: 4px;padding-bottom: 4px;min-height: 30px;cursor: pointer;}
#calendar .fc-daygrid-body-natural .fc-daygrid-day-events { margin-bottom: 0; }
#calendar .dots-container{display: flex;gap: 2px;position: absolute;top: 30px;left: 3px;}
#calendar .dots-container span.event-dot{width: 5px;height: 5px;border-radius: 5px;display: block;}