.calendar-app {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.calendar-loading .calendar-cell.calendar-day {
	pointer-events: none;
	filter: blur(3px);
	transition: all .12s ease-in-out;
}

.calendar-controls {
    margin-bottom: 10px;
}

.calendar {
    background: transparent;
    color: #1c344c;
    overflow: hidden;
    border-left: 1px solid #d5d5d5;
    border-top: 1px solid #d5d5d5;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(40px, 1fr));
    gap: 0;
}

.calendar-events {
    flex: 1;
    color: #fff;
    margin-top: 67px;
}

.calendar .calendar-title {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    color: #E0FF00;
}

.calendar-weekday {
    font-size: 18px;
    font-weight: 400;
}

.calendar-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    padding: 12px;
    background: #efefef;
    border-radius: 0;
    align-items: flex-start;
    height: 120px;
    justify-content: space-between;
    /* outline: 1px solid #e0e0e0; */
    /* outline-offset: -1px; */
    border-bottom: 1px solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
}

.calendar-cell.calendar-day:hover {
    outline-color: #5d5d5d;
    transition: outline-color .12s ease;
}

.calendar-cell.calendar-day.has-event:hover {
    cursor: pointer;
    outline-color: #E0FF00;
    transition: outline-color .12s ease;
}

.calendar-cell.calendar-weekday {
    outline: none;
    max-height: 44px;
    text-align: left;
    align-items: flex-start;
    background: #efefef;
    border-radius: 0;
    height: auto;
    line-height: 1;
}


.calendar-cell.calendar-day.today {
    /* outline: 1px solid #e0ff00; */
    /* outline-offset: -1px; */
    background-color: #e3e3e3;
}

/* .calendar-day button {
    background-color: transparent;
    color: #fff;
    border: 1px solid transparent;
} */

.calendar-cell.calendar-day .day-date {
    font-size: 42px;
    font-weight: 400;
}

/* .calendar-day.has-event button {
    background: transparent;
    color: #E0FF00;
    font-weight: bold;
} */


/* .calendar-cell.calendar-day.has-event.has-multi::after {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -5px);
    height: 3px;
    width: calc(100% - 5px);
    background: #e0ff00;
    border-radius: 2px;
} */

.calendar-day button:hover {
    background-color: #2d3138;
}


.calendar-day.today button {
    border-color: #e0ff00;
}

.calendar-day button.active {
    border-color: #fff;
    color: #fff;
}

.calendar-arrows button.prev-btn, .calendar-arrows button.next-btn {
    padding: 0;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    max-width: 40px;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    background-color: transparent;
    opacity: .5;
    transition: all .12s ease-in-out;
}

.calendar-arrows button.prev-btn:hover, .calendar-arrows button.next-btn:hover {
    opacity: 1;
    transition: all .12s ease-in-out;
}


/* .calendar-arrows button.prev-btn {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNyAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMC44MTQ5NDEgNS40NDQyOEgxNi4wNzQ4TTAuODE0OTQxIDUuNDQ0MjhDMC44MTQ5NDEgNi43MDA5MyA1LjU4MzI3IDEwLjIxMzIgNS41ODMyNyAxMC4yMTMyTTAuODE0OTQxIDUuNDQ0MjhDMC44MTQ5NDEgNC4xODc2NCA1LjU4MzM2IDAuNjc1NzgxIDUuNTgzMzYgMC42NzU3ODEiIHN0cm9rZT0iI0UwRkYwMCIgc3Ryb2tlLXdpZHRoPSIxLjE0NDQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg==');
}

.calendar-arrows button.next-btn {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNyAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTYuMDc0OCA1LjQ0NDI4SDAuODE0OTQxTTE2LjA3NDggNS40NDQyOEMxNi4wNzQ4IDYuNzAwOTMgMTEuMzA2NCAxMC4yMTMyIDExLjMwNjQgMTAuMjEzMk0xNi4wNzQ4IDUuNDQ0MjhDMTYuMDc0OCA0LjE4NzY0IDExLjMwNjMgMC42NzU3ODEgMTEuMzA2MyAwLjY3NTc4MSIgc3Ryb2tlPSIjRTBGRjAwIiBzdHJva2Utd2lkdGg9IjEuMTQ0NDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+');
} */

/* .calendar-arrows button svg {
    display: flex;
    width: 17px;
    height: 11px;
} */

.calendar-app button.today-btn {
    color: #fff;
    font-size: 16px;
    border: none;
    width: 100%;
    transition: all .12s ease;
    border-left: none;
    border-right: none;
    outline: none;
    align-items: flex-start;
    background: #1c344c;
    border-radius: 0px;
    line-height: 1;
    text-align: center;
}

.calendar-app button.today-btn:hover {
    color: #E0FF00;
    background-color: #c6e070;
    color: #1c344c;
    transition: all .12s ease;
}

/* .calendar-controls {
    margin-bottom: 4px;
    display: flex;
    align-items: stretch;
    gap: 4px;
    justify-content: flex-start;
    flex-wrap: wrap;
} */

.calendar-controls {
    display: grid;
    grid-template-columns: repeat(7, minmax(40px, 1fr));
    gap: 4px;
    margin-bottom: 26px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.calendar-title {
    font-size: 42px;
    line-height: 120%;
    color: #1c344c;
    font-family: 'Alfa Slab One', Impact, Arial, Helvetica, sans-serif;
}

.calendar-arrows {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* .calendar-arrows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
} */

.calendar-base {
    width: 100%;
    /* height: 500px; */
    /* max-width: 395px; */
}

/* .event-item {
    border-bottom: 1px solid #fff;
    padding: 20px 16px 20px 16px;
} */

.event-list {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* .event-list > .event-item:nth-child(n+5) {
    display: none;
} */

.event-item {
    position: relative;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    background: #464646;
    border-radius: 3px;
    padding: 1px 3px;
    overflow: hidden;
    color: #fff;
}

.event-item {
    background: var(--event-color, #969696);
}

/* .calendar-day.has-event {
    background: color-mix(in srgb, var(--event-color, #464646) 10%, transparent);
} */


.event-list .no-events {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
}

.event-content {
    display: none;
    padding-top: 16px;
}

/* .event-title__title {
    margin: 0;
    position: relative;
    text-transform: uppercase;
    padding-right: 45px;
}

.event-title__title::after {
    position: absolute;
    display: flex;
    align-items: center;
    content: "";
    width: 24px;
    height: 24px;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuMTM1NzQgMi4yMDY1NEwyMi4wNTYgMjIuMTI2OE0yMi4wNTYgMjIuMTI2OFYyLjIwNjU0TTIyLjA1NiAyMi4xMjY4SDIuMTM1NzQiIHN0cm9rZT0iI0UwRkYwMCIgc3Ryb2tlLXdpZHRoPSIyLjk4ODA0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==");
    transition: background-image 0.3s ease;
} */

.event-item.active .event-title__title::after {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDI1IDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjMuODQwNiAzLjQ1MTkzSDEuODk2NzVDMS4zOTIwNCAzLjQ1MTkzIDAuOTgyNDIyIDIuODYwMjYgMC45ODI0MjIgMi4xMzEyNEMwLjk4MjQyMiAxLjQwMjIyIDEuMzkyMDQgMC44MTA1NDcgMS44OTY3NSAwLjgxMDU0N0gyMy44NDA2QzI0LjM0NTMgMC44MTA1NDcgMjQuNzU0OSAxLjQwMjIyIDI0Ljc1NDkgMi4xMzEyNEMyNC43NTQ5IDIuODYwMjYgMjQuMzQ1MyAzLjQ1MTkzIDIzLjg0MDYgMy40NTE5M1oiIGZpbGw9IiNFMEZGMDAiLz4KPC9zdmc+Cg==");
    transition: background-image 0.3s ease;
}

.event-description {
    font-size: 20px;
    text-transform: none;
    line-height: 150%;
}

.event-item.has-time {
    padding-right: 20px;
}

.event-item.has-time::after {
    position: absolute;
    content: '';
    top: 2px;
    right: 2px;
    display: block;
    width: 15px;
    height: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCI+DQo8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTUsM0M4LjM3MywzLDMsOC4zNzMsMywxNWMwLDYuNjI3LDUuMzczLDEyLDEyLDEyczEyLTUuMzczLDEyLTEyQzI3LDguMzczLDIxLjYyNywzLDE1LDN6IE0xNiwxNkg3Ljk5NSBDNy40NDUsMTYsNywxNS41NTUsNywxNS4wMDV2LTAuMDExQzcsMTQuNDQ1LDcuNDQ1LDE0LDcuOTk1LDE0SDE0VjUuOTk1QzE0LDUuNDQ1LDE0LjQ0NSw1LDE0Ljk5NSw1aDAuMDExIEMxNS41NTUsNSwxNiw1LjQ0NSwxNiw1Ljk5NVYxNnoiLz4NCjwvc3ZnPg==');
}

/* span.event-time-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    display: block;
    width: 15px;
    height: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCI+DQo8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTUsM0M4LjM3MywzLDMsOC4zNzMsMywxNWMwLDYuNjI3LDUuMzczLDEyLDEyLDEyczEyLTUuMzczLDEyLTEyQzI3LDguMzczLDIxLjYyNywzLDE1LDN6IE0xNiwxNkg3Ljk5NSBDNy40NDUsMTYsNywxNS41NTUsNywxNS4wMDV2LTAuMDExQzcsMTQuNDQ1LDcuNDQ1LDE0LDcuOTk1LDE0SDE0VjUuOTk1QzE0LDUuNDQ1LDE0LjQ0NSw1LDE0Ljk5NSw1aDAuMDExIEMxNS41NTUsNSwxNiw1LjQ0NSwxNiw1Ljk5NVYxNnoiLz4NCjwvc3ZnPg==');
} */

/* .calendar-day button:hover + span.event-time-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCIgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCI+DQo8cGF0aCBmaWxsPSIjZmYwMDAwIiBkPSJNMTUsM0M4LjM3MywzLDMsOC4zNzMsMywxNWMwLDYuNjI3LDUuMzczLDEyLDEyLDEyczEyLTUuMzczLDEyLTEyQzI3LDguMzczLDIxLjYyNywzLDE1LDN6IE0xNiwxNkg3Ljk5NSBDNy40NDUsMTYsNywxNS41NTUsNywxNS4wMDV2LTAuMDExQzcsMTQuNDQ1LDcuNDQ1LDE0LDcuOTk1LDE0SDE0VjUuOTk1QzE0LDUuNDQ1LDE0LjQ0NSw1LDE0Ljk5NSw1aDAuMDExIEMxNS41NTUsNSwxNiw1LjQ0NSwxNiw1Ljk5NVYxNnoiLz4NCjwvc3ZnPg==');
} */


.calendar-app-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 999;
    pointer-events: none;
}

.calendar-app-modal-content h3 {
    margin: 0;
    margin-bottom: 25px;
    font-size: 36px;
    line-height: normal;
}

.calendar-app-modal-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

.view-all-events-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: white;
    color: #000;
    padding: 40px 40px 20px 40px;
    border-radius: 8px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
    max-width: 720px;
    width: 100%;
    max-height: 80%;
    overflow-y: auto;
}

.view-all-events-modal.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.view-all-events-modal .modal-content {
    text-align: left;
}

ul.event-list-modal {
    list-style: none;
    padding-left: 0px;
    font-size: 18px;
}

ul.event-list-modal li {
    margin-bottom: 10px;
    border-left: 14px solid var(--event-color, #1C344C);
    border-radius: 6px;
    padding-left: 12px;
    background-color: #f3f3f3;
}

ul.event-list-modal li span.event-title {
    display: block;
    font-size: 22px;
    font-weight: 500;
}

/*  */
button.close-modal-btn {
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS4yOTI4OSA1LjI5Mjg5QzUuNjgzNDIgNC45MDIzNyA2LjMxNjU4IDQuOTAyMzcgNi43MDcxMSA1LjI5Mjg5TDEyIDEwLjU4NThMMTcuMjkyOSA1LjI5Mjg5QzE3LjY4MzQgNC45MDIzNyAxOC4zMTY2IDQuOTAyMzcgMTguNzA3MSA1LjI5Mjg5QzE5LjA5NzYgNS42ODM0MiAxOS4wOTc2IDYuMzE2NTggMTguNzA3MSA2LjcwNzExTDEzLjQxNDIgMTJMMTguNzA3MSAxNy4yOTI5QzE5LjA5NzYgMTcuNjgzNCAxOS4wOTc2IDE4LjMxNjYgMTguNzA3MSAxOC43MDcxQzE4LjMxNjYgMTkuMDk3NiAxNy42ODM0IDE5LjA5NzYgMTcuMjkyOSAxOC43MDcxTDEyIDEzLjQxNDJMNi43MDcxMSAxOC43MDcxQzYuMzE2NTggMTkuMDk3NiA1LjY4MzQyIDE5LjA5NzYgNS4yOTI4OSAxOC43MDcxQzQuOTAyMzcgMTguMzE2NiA0LjkwMjM3IDE3LjY4MzQgNS4yOTI4OSAxNy4yOTI5TDEwLjU4NTggMTJMNS4yOTI4OSA2LjcwNzExQzQuOTAyMzcgNi4zMTY1OCA0LjkwMjM3IDUuNjgzNDIgNS4yOTI4OSA1LjI5Mjg5WiIgZmlsbD0iIzBGMTcyOSIvPg0KPC9zdmc+");
    background-position: center;
    outline: none;
    border: none;
}


@media screen and (max-width: 1279px) {
    .calendar-grid {
        gap: 3px;
    }

    /* .calendar-cell.calendar-weekday {
        height: 36px;
    } */

    .calendar-cell {
        font-size: 14px;
        padding: 8px;
    }

    .calendar-cell.calendar-weekday > span {
        display: none;
    }

    .calendar-cell.calendar-weekday::before {
        content: attr(data-short-day);
    }
    
    .calendar-cell.calendar-day .day-date {
        font-size: 32px;
    }

    .calendar .calendar-title {
        font-size: 20px;
        line-height: 120%;
    }

    .calendar button.prev-btn,
    .calendar button.next-btn {
        width: 27px;
        height: 27px;
    }



    .calendar-cell button.today-btn {
        font-size: 16px;
    }

    .event-item {
        font-size: 12px;
    }

    .event-list .no-events {
        font-size: 12px;
    }

    .event-item.has-time {
        padding-right: 17px;
    }

    .event-item.has-time::after {
        width: 12px;
        height: 12px;
    }

}

/* @media screen and (max-width: 1023px) {

    .event-item.has-time::after {
        display: none;
    }
} */

@media screen and (max-width: 870px) {

    
    .calendar-controls {
        /* grid-template-columns: repeat(3, minmax(40px, 1fr)); */
        gap: 2px;
        margin-bottom: 12px;
    }

    .calendar-grid {
        gap: 3px;
    }


    .calendar-cell {
        font-size: 14px;
        padding: 6px;
        height: 102px;
    }
    
    .calendar-cell.calendar-day .day-date {
        font-size: 26px;
    }

    .event-item {
        font-size: 11px;
        letter-spacing: 0.3px;
    }

    .view-all-events-modal {
        max-width: 90%;
        padding: 40px 20px 10px 20px;
    }

    .calendar-app-modal-content h3 {
        font-size: 32px;
    }

    ul.event-list-modal {
        font-size: 18px;
    }

    ul.event-list-modal li span.event-title {
        font-size: 18px;
    }

}

@media screen and (max-width: 560px) {



    .calendar-grid {
        gap: 2px;
    }

    .calendar-title {
        font-size: 30px;
    }

    .calendar-arrows button.prev-btn, .calendar-arrows button.next-btn {
        max-width: 34px;
        width: 34px;
        height: 34px;
    }


     .calendar-controls {
        grid-template-columns: repeat(3, minmax(40px, 1fr));
    }

    .calendar-cell {
        font-size: 12px;
        padding: 3px;
        height: 60px;
    }
    
    .calendar-cell.calendar-day .day-date {
        font-size: 18px;
        line-height: 1;
    }

    .calendar-app button.today-btn {
        font-size: 14px;
    }

    
    .event-item {
        font-size: 10px;
        word-break: break-all;
        letter-spacing: 0.2px;
    }

    .event-item.has-time {
        padding-right: 3px;
    }

    .event-item.has-time::after {
        display: none;
    }

    .calendar-app-modal-content h3 {
        font-size: 26px;
    }
}