.vanilla-calendar * {
    transition: all 500ms ease;
}
.vanilla-calendar {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    padding: 12px;
    border-radius: 4px;
    max-width:300px;
}

.vanilla-calendar-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 4px
}

.vanilla-calendar-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.vanilla-calendar-arrow {
    background: none;
    border:none;
}
.vanilla-calendar-arrow::before {
    content:'';
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    overflow:hidden;
    width:10px;
    height:10px;
    text-indent: -300px;
    background: none;
}

/*.vanilla-calendar-arrow::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 3px;*/
/*    width: 10px;*/
/*    height: 1px;*/
/*    background-color: #000;*/
/*    -webkit-transform: rotateZ(45deg);*/
/*    -ms-transform: rotate(45deg);*/
/*    transform: rotateZ(45deg)*/
/*}*/

/*.vanilla-calendar-arrow::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0;*/
/*    bottom: 3px;*/
/*    width: 10px;*/
/*    height: 1px;*/
/*    background-color: #000;*/
/*    -webkit-transform: rotateZ(-45deg);*/
/*    -ms-transform: rotate(-45deg);*/
/*    transform: rotateZ(-45deg)*/
/*}*/

.vanilla-calendar-arrow:hover::before, .vanilla-calendar-arrow:hover::after {
    background-color: #7f368a
}

.vanilla-calendar-arrow_prev::before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.vanilla-calendar-arrow_next::before {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.vanilla-calendar-month {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 15px;
    text-align: center;
}

.vanilla-calendar-week {
    display: grid;
    grid-template-columns:repeat(7, 1fr);
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
    justify-items: center
}

.vanilla-calendar-week__day {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #7f368a;
    width: 35px;
    height: 25px;
    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
}

.vanilla-calendar-week__day_weekend {
    color: #999
}

.vanilla-calendar-days {
    display: grid;
    grid-template-columns:repeat(7, 1fr);
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
    justify-items: center
}
.vanilla-calendar-days_selecting .vanilla-calendar-day{
    cursor:not-allowed;
}
.vanilla-calendar-days_selecting .vanilla-calendar-day_holiday {
    cursor: pointer
}

.vanilla-calendar-days_selecting .vanilla-calendar-day_prev, .vanilla-calendar-days_selecting .vanilla-calendar-day_next, .vanilla-calendar-days_selecting .vanilla-calendar-day_disabled {
    cursor: default
}

.vanilla-calendar-day {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    min-width:30px;
    min-height:30px;
    width: 25%;
    height: 30px;
    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-radius: 10%;
    background-color: #fff;
    cursor: default;
    margin-bottom: 10px;
}

.vanilla-calendar-day:hover {
    background-color: #f0f8ff
}

.vanilla-calendar-day_today {
    background-color: #f0f8ff;
    color: #7f368a;
    font-weight: 600
}

.vanilla-calendar-day_today:hover {
    color: #7f368a;
    background-color: #f0f8ff
}

.vanilla-calendar-day_selected,.vanilla-calendar-day_holiday {
    background-color: #7f368a;
    color: #fff
}

.vanilla-calendar-day_selected:hover,.vanilla-calendar-day_holiday:hover {
    background-color: #FFD700 !important;
    color: black;
}

.vanilla-calendar-day_weekend {
    color: #CCC
}


.vanilla-calendar-day_weekend:hover, .vanilla-calendar-day_holiday:hover {
    background-color: #fff5ee
}

.vanilla-calendar-day_weekend.vanilla-calendar-day_today, .vanilla-calendar-day_holiday.vanilla-calendar-day_today {
    color: #4B0082;
    background-color: #fff5ee
}

.vanilla-calendar-day_weekend.vanilla-calendar-day_today.vanilla-calendar-day_disabled, .vanilla-calendar-day_holiday.vanilla-calendar-day_today.vanilla-calendar-day_disabled {
    color: lightgrey;
    background-color: #f5f5f5
}

.vanilla-calendar-day_weekend.vanilla-calendar-day_selected, .vanilla-calendar-day_holiday.vanilla-calendar-day_selected {
    background-color: #4B0082;
    color: #fff
}

.vanilla-calendar-day_weekend.vanilla-calendar-day_selected:hover, .vanilla-calendar-day_holiday.vanilla-calendar-day_selected:hover {
    background-color: #4B0082
}

.vanilla-calendar-day_weekend.vanilla-calendar-day_selected.vanilla-calendar-day_disabled, .vanilla-calendar-day_holiday.vanilla-calendar-day_selected.vanilla-calendar-day_disabled {
    color: #f5f5f5;
    background-color: lightgrey
}

.vanilla-calendar-day_prev, .vanilla-calendar-day_next, .vanilla-calendar-day_disabled {
    background-color: #fff;
    color: lightgrey;
    pointer-events: none
}

.vanilla-calendar-day_prev:hover, .vanilla-calendar-day_next:hover, .vanilla-calendar-day_disabled:hover {
    background-color: #fff;
    color: lightgrey
}