.rtl {
    direction: rtl;
}

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

    .vdp-datepicker * {
        box-sizing: border-box;
    }

.custom-vdp-datepicker__calendar {
    position: absolute;
    background: var(--white);
    width: 200px;
    border: 1px solid var(--greyborder);
    z-index: 900;
    /*right: 0; valore x avere la data tutta a destra */
    right: 50%;
    transform: translateX(50%); /* questi 2 valori rendono il calendario centrato rispetto all'input, per avere meno bug di visualizzazione dove "esce" dalla finestra del browser */
    bottom: -248px; /* pederstia che serve a farlo tornare attaccato a tutti i campi data, sia alti che bassi  (04/09/2024 era -221)*/
    height: 252px; /* altezza fissa che serve a farlo tornare con la pederastia di cui sopra (20/09/2024 era 223px)*/
}

    .custom-vdp-datepicker__calendar header {
        display: block;
        line-height: 40px;
        position: relative;
    }

        .custom-vdp-datepicker__calendar header span {
            display: inline-block;
            text-align: center;
            width: 71.42857142857143%;
            float: left;
        }

        .custom-vdp-datepicker__calendar header .prev,
        .custom-vdp-datepicker__calendar header .next {
            width: 14.285714285714286%;
            float: left;
            text-indent: -10000px;
            position: relative;
        }

            .custom-vdp-datepicker__calendar header .prev:after,
            .custom-vdp-datepicker__calendar header .next:after {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                border: 6px solid transparent;
            }

            .custom-vdp-datepicker__calendar header .prev:after {
                border-right: 10px solid var(--black);
                margin-left: -5px;
            }

            .custom-vdp-datepicker__calendar header .prev.disabled:after {
                border-right: 10px solid #ddd;
            }

            .custom-vdp-datepicker__calendar header .next:after {
                border-left: 10px solid var(--black);
                margin-left: 5px;
            }

            .custom-vdp-datepicker__calendar header .next.disabled:after {
                border-left: 10px solid #ddd;
            }

            .custom-vdp-datepicker__calendar header .prev:not(.disabled),
            .custom-vdp-datepicker__calendar header .next:not(.disabled),
            .custom-vdp-datepicker__calendar header .up:not(.disabled) {
                cursor: pointer;
            }

                .custom-vdp-datepicker__calendar header .prev:not(.disabled):hover,
                .custom-vdp-datepicker__calendar header .next:not(.disabled):hover,
                .custom-vdp-datepicker__calendar header .up:not(.disabled):hover {
                    background: #eee;
                }

    .custom-vdp-datepicker__calendar .disabled {
        color: #ddd;
        cursor: default;
    }

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

    .custom-vdp-datepicker__calendar .cell {
        display: inline-block;
        font-size: 70%;
        padding: 0 5px;
        width: 14.285714285714286%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;
    }

        .custom-vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,
        .custom-vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,
        .custom-vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {
            cursor: pointer;
        }

            .custom-vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
            .custom-vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
            .custom-vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
                border: 1px solid var(--yellow);
            }

        .custom-vdp-datepicker__calendar .cell.selected {
            background: var(--yellow);
        }

            .custom-vdp-datepicker__calendar .cell.selected:hover {
                background: var(--yellow);
            }

            .custom-vdp-datepicker__calendar .cell.selected.highlighted {
                background: var(--yellow);
            }

        .custom-vdp-datepicker__calendar .cell.highlighted {
            background: #FFFEC8;
        }

            .custom-vdp-datepicker__calendar .cell.highlighted.disabled {
                color: #a3a3a3;
            }

        .custom-vdp-datepicker__calendar .cell.grey {
            color: var(--greytext);
        }

            .custom-vdp-datepicker__calendar .cell.grey:hover {
                background: inherit;
            }

        .custom-vdp-datepicker__calendar .cell.day-header {
            font-size: 70%;
            white-space: nowrap;
            cursor: inherit;
        }

            .custom-vdp-datepicker__calendar .cell.day-header:hover {
                background: inherit;
            }

    .custom-vdp-datepicker__calendar .month,
    .custom-vdp-datepicker__calendar .year {
        width: 33.333%;
    }

    .custom-vdp-datepicker__calendar .today {
        background: var(--greybg);
    }

.vdp-datepicker__clear-button,
.custom-vdp-datepicker__calendar-button {
    cursor: pointer;
    font-style: normal;
}

    .vdp-datepicker__clear-button.disabled,
    .custom-vdp-datepicker__calendar-button.disabled {
        color: #999;
        cursor: default;
    }

.vdp-datepicker__calendar-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}