.calendar {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
}

.calendar.twoMonths {
    width: 680px;
}

.calendar .control {
    position: absolute;
    top: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    z-index: 9;
    cursor: pointer;
}

.calendar .control::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
}

.calendar .control.next {
    right: 8px;
}

.calendar .control.prev {
    left: 8px;
}

.calendar .control.next::after {
    background-image: url(../img/angle-right.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    left: calc(50% - 6px);
}

.calendar .control.prev::after {
    background-image: url(../img/angle-left.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    left: calc(50% - 8px);
}

.calendar .control:hover {
    background-color: #dce0ef;
}

.calendar .control.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.calendar .control.disabled:hover {
    background: none;
}


.calendar .months {
    position: relative;
    display: block;
    width: 100%;
}

.calendar .months::after {
    content: '';
    clear: both;
    display: table;
}

.calendar .month {
    position: relative;
    display: block;
    width: 280px;
    float: left;
}

.calendar.twoMonths .month+.month {
    position: relative;
    display: block;
    float: right;
}

.calendar .month .monthName {
    position: relative;
    display: block;
    width: 100%;
    padding: 3px 0;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 15px;
    line-height: 1.6em;
}

.calendar .month .monthName span {
    font-size: 13px;
    color: #898989;
    font-weight: 400;
    display: block;
    letter-spacing: 3px;
    line-height: 0.7em;
}

.calendar .month .week {
    position: relative;
    display: block;
    width: auto;
    margin: 3px 0px;
}

.calendar .month .week::after {
    content: '';
    clear: both;
    display: table;
}

.calendar .month .week .day {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    float: left;
    text-align: center;
    z-index: 1;
    cursor: pointer;
}

.calendar .month .week .day.disabled {
    opacity: 0.4;
}

.calendar .month .week .day.name {
    color: #878787;
    font-size: 13px;
}

.calendar .month .week .day.date b {
    color: #202231;
    font-weight: 500;
    font-size: 14px;
    z-index: 4;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: block;
    line-height: 40px;
    height: 40px;
}

.calendar .month .week .day.date.selected b {
    color: #ededed;
}

.calendar .month .week .day.date.in_range::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #eff2ff;
    z-index: 1;
}

.calendar .month .week .day.date.in_range.range_start::before {
    width: 50%;
    left: 50%;
}

.calendar .month .week .day.date.in_range.range_end::before {
    width: 50%;
}

.calendar .month .week .day.date.selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #283a81;
    border-radius: 50%;
    z-index: 2;
    border: 2px solid #9ca6cf;
}