flights_web/ClientApp/src/styles/_prime-calendar.scss

p-calendar {
    .p-calendar {
        cursor: pointer;

        .p-datepicker-header {
            .p-datepicker-prev {
                background-image: url('~src/assets/img/arrow-left.svg');
                background-position: center center;
                background-repeat: no-repeat;

                span {
                    display: none;
                }
            }

            .p-datepicker-title {
                .p-datepicker-month,
                .p-datepicker-year {
                    border: none;
                    color: $blue;
                    font-weight: $font-bold;
                    -webkit-appearance: none;
                    background: transparent !important;
                }

                .p-datepicker-year {
                    margin-left: $space-m;
                }
            }

            .p-datepicker-next {
                background-image: url('~src/assets/img/arrow-right.svg');
                background-position: center center;
                background-repeat: no-repeat;

                span {
                    display: none;
                }
            }

            .p-datepicker-prev,
            .p-datepicker-next {
            	width: 1.8em;
            	height: 1.8em;
            }
        }

        .p-datepicker-calendar-container {
            .p-datepicker-calendar {
                margin-top: $space-m;

                th {
                    font-size: 10px;
                    font-weight: $font-medium;
                    padding: 2px;
                    padding-bottom: $space-m;
                    color: $gray;
                }

                td {
                    padding: 2px;

                    &.p-datepicker-today {
                        a,
                        span {
                            border: 1px solid $blue;
                            background-color: $white;

                            &:hover {
                                background-color: $blue-icon;
                            }

                            &.p-highlight {
                                background-color: $blue-icon;
                                color: $extra-blue;
                            }
                        }
                    }

                    a,
                    span {
                        padding: 5px 6px;
                        font-size: 12px;
                        font-weight: $font-medium;
                        color: $extra-blue;

                        &.p-highlight {
                            background-color: $blue-icon;
                            color: $extra-blue;
                        }

                        &.p-highlight {
                            background-color: $white;
                        }

                        &:not(.p-highlight):hover {
                            background-color: $blue-icon;
                        }
                    }

                    span.p-disabled {
                        color: $gray;
                        opacity: 0.5;

                        &:hover {
                            background-color: transparent;
                        }
                    }
                }
            }
        }
    }
}

.calendar--mobile {
    display: none;

    @media (max-width: $media-breakpoint-mobile) {
        display: flex;
    }

    margin-bottom: $space-m;
    justify-content: space-between;

    .digit {
        width: 100%;
        @include control-border-shadow();
        display: flex;
        flex-direction: column;
        padding: $space-m;
        background-color: $white;
        @include font-overflow();

        &.selected {
            background-color: $blue-extra-light;
            border-color: $border-blue;

            &:focus,
            &:hover {
                background-color: $blue-extra-light !important;
                border-color: $border-blue !important;
            }
        }

        &:focus,
        &:hover {
            border: 1px solid $border-input !important;
            background-color: $white !important;
        }

        .p-button-label {
            display: none;
        }

        .date-day {
            display: flex;
            flex-direction: row;
            align-items: flex-end;

            .date {
                color: $text-color;
                font-size: $font-size-xl3;
            }

            .day {
                @include font-small();
                margin-bottom: $text-margin-bottom;
                margin-left: $space-s;
            }
        }

        .month {
            @include font-overflow();
            margin-top: $text-margin-bottom;
            @include font-small();
            width: 100%;
            text-align: left;
        }

        & + .digit {
            margin-left: $space-m;
        }
    }
}