.rtl {
    direction: rtl;
}

.vdp-datepicker {
    position: relative;
    text-align: left;

    * {
        box-sizing: border-box;
    }
}
.vdp-datepicker__calendar {
    position: absolute;
    z-index: 100;
    background: #fff;
    width: 300px;
    border: 1px solid #ccc;

    .today {
        background-color: #eee;
    }

    button {
        background: inherit;
        text-align: center;

        &:disabled {
            color: #ddd;
        }
    }

    header {
        display: flex;
        line-height: 40px;
        justify-content: space-between;

        button {
            border: none;

            &:hover:not(:disabled) {
                background: #eee;
                cursor: pointer;
            }

            &.day__month_btn,
            &.month__year_btn {
                color: #000;
                flex-grow: 5;
            }
        }

        span {
            text-align: center;
            width: 71.42857142857143%;
        }

        .prev,
        .next {
            width: 14.285714285714286%;
            text-indent: -10000px;
            position: relative;
            
            &:after {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                border: 6px solid transparent;
            }
        }

        .prev {
            &:after {
                border-right: 10px solid #000;
                margin-left: -5px;
            }

            &.disabled:after {
                border-right: 10px solid #ddd;
            }
        }

        .next {
            &:after {
                border-left: 10px solid #000;
                margin-left: 5px;
            }

            &.disabled:after {
                border-left: 10px solid #ddd;
            }
        }

        .prev:not(.disabled),
        .next:not(.disabled),
        .up:not(.disabled) {
            cursor: pointer;

            &:hover {
                background: #eee;
            }
        }
    }

    .disabled {
        color: #ddd;
        cursor: default;
    }

    .flex-rtl {
        display: flex;
        width: inherit;
        flex-wrap: wrap;
    }

    .cell {
        display: inline-block;
        padding: 0 5px;
        width: 14.285714285714286%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;

        &:not(.blank):not(.disabled).day,
        &:not(.blank):not(.disabled).month,
        &:not(.blank):not(.disabled).year {
            cursor: pointer;

            &:hover {
                border: 1px solid #4bd;
            }
        }

        &.selected {
            background: #4bd;

            &:hover {
                background: #4bd;
            }

            &.highlighted {
                background: #4bd;
            }
        }

        &.highlighted {
            background: #cae5ed;

            &.disabled {
                color: #a3a3a3;
            }
        }

        &.muted {
            color: #757575;

            &:hover {
                background: inherit;
            }
        }

        &.day-header {
            font-size: 75%;
            white-space: nowrap;
            cursor: inherit;

            &:hover {
                background: inherit;
            }
        }
    }
    
    .month,
    .year {
        width: 33.333%;
    }
}
.vdp-datepicker__clear-button,
.vdp-datepicker__calendar-button {
    border: none;
    font-style: normal;
    
    &.input-group-prepend,
    &.input-group-append {
          padding: 0;
    }
}