.calendar {

    background-color: var(--primary-200)

}


.calendar__wrapper {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    flex-direction: column-reverse;

    gap: 0 30px;

    position: relative;

    padding-top: 66px

}


.calendar__slider-wrapper {

    position: relative;

    width: 100%

}


@media (min-width: 1290px) {

    .calendar__wrapper {

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

        -webkit-box-align: start;

        -ms-flex-align: start;

        align-items: flex-start;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

        min-height: 650px;

        padding-top: 0

    }


    .calendar__slider-wrapper {

        max-width: 500px

    }


    .calendar__slider-wrapper .swiper-pagination {

        display: none

    }

}


.calendar__slider-arrows {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 20px;

    position: absolute;

    top: 110px;

    left: 0

}


.calendar__slider-arrows .swiper-button-next, .calendar__slider-arrows .swiper-button-prev {

    position: relative;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: 0

}


.calendar__content {
    padding: 30px 16px 40px
}


@media (min-width: 760px) {
    .calendar__content {
        padding: 30px 40px 40px
    }
}


@media (min-width: 1290px) {

    .calendar__content {

        padding: 40px 0 40px 107px;

        -webkit-box-flex: 1;

        -ms-flex: 1;

        flex: 1

    }

}


@media (min-width: 1650px) {

    .calendar__wrapper {

        min-height: 950px

    }


    .calendar__slider-wrapper {

        max-width: 530px

    }


    .calendar__slider-arrows {

        top: 271px

    }


    .calendar__content {

        padding: 60px 0 83px 140px;
    }
}


@-webkit-keyframes marqueeVertical {

    0% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

    100% {

        -webkit-transform: translateY(-100%);

        transform: translateY(-100%)

    }

}


@keyframes marqueeVertical {

    0% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

    100% {

        -webkit-transform: translateY(-100%);

        transform: translateY(-100%)

    }

}


@-webkit-keyframes marqueeHorizontal {

    0% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

    100% {

        -webkit-transform: translateX(100%);

        transform: translateX(100%)

    }

}


@keyframes marqueeHorizontal {

    0% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

    100% {

        -webkit-transform: translateX(100%);

        transform: translateX(100%)

    }

}


.calendar__content-list-wrapper {

    padding: 15px 16px;

    background-color: var(--primary);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    overflow: hidden;

}


@media (min-width: 760px) {

    .calendar__content-list-wrapper {

        padding: 15px 27.5px

    }

}


.calendar__content-list {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-animation: 20s linear infinite marqueeHorizontal;

    animation: 20s linear infinite marqueeHorizontal

}


.calendar__content-list .event-heading {

    color: var(--white);

    font-size: var(--text-size-28);

    font-style: italic;

    font-weight: var(--fw-semi);

    letter-spacing: 3.36px;

    text-transform: uppercase;

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-flex: 0;

    -ms-flex: none;

    flex: none

}


.calendar__content-list .event-heading:not(:last-of-type):after {

    content: "";

    width: 1px;

    height: 100%;

    background-color: var(--white);

    display: block;

    margin: 0 30px

}


@media (min-width: 1290px) {

    .calendar__content-list-wrapper {

        -webkit-transform: rotate(180deg);

        -ms-transform: rotate(180deg);

        transform: rotate(180deg);

        -webkit-writing-mode: vertical-rl;

        -ms-writing-mode: tb-rl;

        writing-mode: vertical-rl;

        height: 100%;

        width: auto;

        padding: 15px 24px

    }


    .calendar__content-list {

        -webkit-animation: 20s linear infinite marqueeVertical;

        animation: 20s linear infinite marqueeVertical

    }


    .calendar__content-list .event-heading {

        font-size: var(--text-size-32);

        letter-spacing: 3.84px;

        max-height: initial

    }


    .calendar__content-list .event-heading:not(:last-of-type):after {

        width: 100%;

        height: 1px;

        margin: 30px 0

    }

}


.calendar__content-item-image-wrapper {

    width: 160px;

    height: 160px;

    border-radius: 50%;

    overflow: hidden;

    margin-bottom: 20px;

    margin-left: auto;

    display: none

}


@media (min-width: 1650px) {

    .calendar__content-list-wrapper {

        padding: 25.5px 44px

    }


    .calendar__content-list .event-heading {

        font-size: var(--text-size-36);

        letter-spacing: 4.32px

    }


    .calendar__content-item-image-wrapper {

        width: 317px;

        height: 317px

    }

}


.calendar__content-item-image {

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover

}


.calendar__content-item-period {

    color: var(--gray-100);

    font-size: var(--text-size);

    margin-bottom: 10px

}


@media (min-width: 1290px) {

    .calendar__content-item-image-wrapper {

        display: block

    }


    .calendar__content-item-period {

        font-size: var(--text-size-18)

    }

}


.calendar__content-item-title {

    color: var(--white)

}


.calendar__content-item-text {

    color: var(--gray-100);

    font-size: var(--text-size-14);

    line-height: var(--lh-default);

    margin-top: 20px

}


.calendar__content-item-detail-wrap {

    margin-top: 30px

}


.calendar__dates {

    position: relative

}


.calendar__dates .flatpickr-calendar {
    position: relative;
    z-index: 1;
    max-height: 100%;

    width: 100%;

    max-width: 100%;

    padding: 28.5px 16px 20px;

    border-radius: 0 0 0 32px;

    -webkit-box-shadow: none;

    box-shadow: none;

    top: 0;

    font-size: var(--text-size);

    font-weight: var(--fw-normal);
}

.calendar__dates .flatpickr-calendar::after, .calendar__dates .flatpickr-calendar::before {
    content: none
}

.calendar__wrapper {
    overflow: hidden;
}

.calendar__wrapper > .container {
    display: flex;
    align-self: stretch;
}

@media (max-width: 1289px) {
    .calendar__wrapper > .container {
        flex-direction: column-reverse;
        padding: 0;
    }
}

.calendar__dates .flatpickr-calendar::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 40px;
    width: 100vw;
    height: 100%;
    background-color: #fff;
}

.calendar__dates .flatpickr-calendar .flatpickr-months {

    position: relative;

    padding-bottom: 22px;

    padding-right: 120px;

    border-bottom: 1px solid var(--gray-300);

    margin-bottom: 20px

}


.calendar__dates .flatpickr-calendar .flatpickr-month {

    text-align: left;

    height: auto

}


.calendar__dates .flatpickr-calendar .flatpickr-current-month {

    font-size: var(--text-size-22);

    font-weight: 400;

    line-height: var(--lh-sm);

    position: relative;

    width: auto;

    height: auto;

    left: 0;

    padding-top: 0;

    text-align: left

}


@media (min-width: 760px) {

    .calendar__dates .flatpickr-calendar {

        font-size: var(--text-size);

        padding: 47px 40px 40px

    }


    .calendar__dates .flatpickr-calendar .flatpickr-current-month {

        font-size: var(--text-size-24)

    }

}


@media (min-width: 1290px) {

    .calendar__content-item-text {

        font-size: var(--text-size)

    }


    .calendar__dates .flatpickr-calendar {
        font-size: var(--text-size-18);
        max-width: 705px;
        width: 608px;
    }


    .calendar__dates .flatpickr-calendar .flatpickr-months {

        padding-bottom: 28px

    }


    .calendar__dates .flatpickr-calendar .flatpickr-current-month {

        font-size: var(--text-size-30)

    }

}


.calendar__dates .flatpickr-calendar .flatpickr-current-month span.cur-month {

    margin-left: 0;
    font-weight: 400;
    pointer-events: none

}


.calendar__dates .flatpickr-calendar .flatpickr-current-month .numInputWrapper {

    margin-left: 8px;

    pointer-events: none

}


.calendar__dates .flatpickr-calendar .flatpickr-current-month input.cur-year {

    padding: 0;

    font-weight: 400;

}


.calendar__dates .flatpickr-calendar .flatpickr-next-month, .calendar__dates .flatpickr-calendar .flatpickr-prev-month {

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    padding: 0;

    width: 46px;

    height: 46px;

    top: -7px

}


.calendar__dates .flatpickr-calendar .flatpickr-next-month svg, .calendar__dates .flatpickr-calendar .flatpickr-prev-month svg {

    display: none

}


.calendar__dates .flatpickr-calendar .flatpickr-prev-month {

    background-image: url(../../img/btn-calendar-prev.svg);

    left: auto;

    right: 66px

}


.calendar__dates .flatpickr-calendar .flatpickr-next-month {

    background-image: url(../../img/btn-calendar-next.svg);

    left: auto;

    right: 0

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer {

    width: 100%;

    display: block

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-weekdays {

    height: auto;

    margin-bottom: 20px

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer span.flatpickr-weekday {

    font-size: 100%;

    color: var(--black);

    line-height: var(--lh-sm)

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-days {

    width: 100%;

    overflow: initial

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .dayContainer {

    width: 100%;

    max-width: 100%;

    min-width: 100%

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day {

    max-width: 100%;

    max-height: 45px;

    height: 45px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border: none;

    border-radius: 0;

    color: var(--black);

    background-color: transparent;

    position: relative

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day:before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background-color: var(--primary-700);

    z-index: -2;

    opacity: 0;
    border: 1px solid transparent;
    transition: all 0.3s;

}

.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.selected:not(.today):before {
    border-color: #004188;
    background: #fff;
    opacity: 1;
}

.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day:hover:before {
    border-color: #004188;
    background: #fff;
    opacity: 1;
}


@media (min-width: 1290px) {

    .calendar__dates .flatpickr-calendar .flatpickr-next-month, .calendar__dates .flatpickr-calendar .flatpickr-prev-month {

        top: -2px

    }


    .calendar__dates .flatpickr-calendar .flatpickr-rContainer .dayContainer {

        gap: 10px 0

    }


    .calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day {

        height: 55px

    }


    .calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day:before {

        width: 55px;

        height: 55px

    }

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.has-holiday:after {

    content: "";

    position: absolute;

    top: calc(50% + 14px);

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background-color: var(--accent);

    z-index: -1;

    opacity: 0

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.has-holiday:after, .calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.selected:before {

    opacity: 1

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.disabled, .calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.nextMonthDay, .calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.prevMonthDay {

    color: var(--gray-200)

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.no-holiday {

    pointer-events: none

}


.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today {

    color: var(--primary)

}

.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today::before,
.calendar__dates .flatpickr-calendar .flatpickr-rContainer .flatpickr-day.today::after {
    opacity: 1;
}


.calendar__dates-bg-image {
    display: none;
    position: relative;
    z-index: 1;
    bottom: 30px;
}


@media (min-width: 1290px) {

    .calendar__dates-bg-image {

        display: block;

        position: absolute;

        right: 0;

        pointer-events: none;

        width: auto;

        height: auto;

        max-width: 218px

    }

}


@media (min-width: 1650px) {

    .calendar__content-item-period {

        margin-bottom: 20px

    }


    .calendar__content-item-text {

        margin-top: 30px

    }


    .calendar__content-item-detail-wrap {

        margin-top: 40px

    }


    .calendar__dates .flatpickr-calendar {

        max-height: 754px;

        width: 810px;

        max-width: 945px;

        padding: 150px 0 150px 140px;

    }


    .calendar__dates .flatpickr-calendar .flatpickr-current-month {

        font-size: var(--text-size-34)

    }


    .calendar__dates-bg-image {
        max-width: 459px
    }

}

@media (min-width: 2300px) {
    .calendar__content {
        padding-left: 0;
    }

    .calendar__dates-bg-image {
        right: -300px;
    }
}


@media (max-width: 1649px) {
    .calendar__dates-bg-image {
        bottom: 10px;
    }
}

.calendar .swiper-button-next.swiper-button-disabled,
.calendar .swiper-button-prev.swiper-button-disabled {
    color: #fff !important;
    background: none !important;
    opacity: 0.7 !important;
}