﻿.ui-datepicker {
    width: 17em;
    padding: .2em;
    border: 1px solid var(--brand-gray-transparent);
    background: var(--background-color);
    margin-top: 1px;
    z-index: 3;
    display: none;
}

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center;
    }

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0;
        border: 1px solid var(--brand-primary-blue);
        background: var(--brand-primary-blue);
        color: var(--background-color)
    }

    .ui-datepicker .ui-widget-header {
        font-weight: bold;
    }

    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        position: absolute;
        width: 1.8em;
        height: 1.8em;
        cursor: pointer;
        top: 3px;
        color: transparent;
        background: var(--background-color);
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 3px;
        -webkit-mask-image: url('/Content/symbols/arrow_left_circled.svg');
        mask-image: url('/Content/symbols/arrow_left_circled.svg');
    }

    .ui-datepicker .ui-datepicker-next {
        right: 3px;
        -webkit-mask-image: url(/Content/symbols/arrow_right_circled.svg);
        mask-image: url(/Content/symbols/arrow_right_circled.svg);
    }

    .ui-datepicker table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 .4em;
    }

        .ui-datepicker table thead th {
            padding: .7em .3em;
            text-align: center;
            font-weight: bold;
            border: 0;
        }

            .ui-datepicker table tbody td {
                padding: 1px;
            }

                .ui-datepicker table tbody td span,
                .ui-datepicker table tbody td a {
                    display: block;
                    padding: .2em;
                    text-align: right;
                    text-decoration: none;
                    border: 1px solid #d5d5d5;
                    line-height: normal;
                    font-size: var(--font-size)
                }

                .ui-datepicker table tbody td.ui-datepicker-today a {
                    color: white;
                    background-color: var(--brand-info-blue);
                }

                .ui-datepicker table tbody td:not(.ui-datepicker-today):not(.ui-datepicker-current-day) span,
                .ui-datepicker table tbody td:not(.ui-datepicker-today):not(.ui-datepicker-current-day) a {
                    color: unset;
                }

                .ui-datepicker table tbody td span.ui-state-active,
                .ui-datepicker table tbody td a.ui-state-active {
                    color: var(--background-color);
                    background-color: var(--brand-primary-blue);
                }

.ui-icon {
    display:block;
}

.ui-icon-circle-triangle-w,
.ui-icon-circle-triangle-e {
    display: none;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    background-image: none;
    pointer-events: none;
}
