/* The datepicker interface is outside the form markup in the DOM. */
div.ui-datepicker {
    background-color: #fff;
    border: 1px solid #545456;
    border-radius: 10px;
}

div.ui-datepicker .ui-datepicker-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #545456;
    padding: 0.75rem 1rem;
}

div.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    order: 1; /* Display the month/year selects before the prev/next links. */
}

div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
div.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    cursor: pointer;
    order: 2; /* Display the prev/next selects after the month/year links. */

    /* Styles for displaying icons. */
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: center;
}

/* Treat 'Previous' and 'Next' text like screen reader text. */
div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev span.ui-icon,
div.ui-datepicker .ui-datepicker-header .ui-datepicker-next span.ui-icon {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev span.ui-icon:focus,
div.ui-datepicker .ui-datepicker-header .ui-datepicker-next span.ui-icon:focus {
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    display: block;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

/* Show icons rather than words. */
.ui-datepicker-prev {
    margin-left: auto;
    margin-right: 8px;
    background-image: url("../img/chevron-left.svg");
}
.ui-datepicker-prev:hover,
.ui-datepicker-prev:focus {
    background-image: url("../img/chevron-left-light.svg");
}
.ui-datepicker-next {
    background-image: url("../img/chevron-right.svg");
}
.ui-datepicker-next:hover,
.ui-datepicker-next:focus {
    background-image: url("../img/chevron-right-light.svg");
}

div.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    font-size: 18px;
}

div.ui-datepicker .ui-datepicker-header .ui-datepicker-title span {
    color: #545456;
    font-weight: bold;
}

div.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
    line-height: 2;
    border-radius: 3px;
    padding: 0 24px 0 8px;
    -webkit-appearance: none;
    background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
    background-size: 16px 16px;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 4px;
}

div.ui-datepicker .ui-datepicker-calendar {
    margin: 0.75rem;
}

div.ui-datepicker th,
div.ui-datepicker td {
    padding: 10px;
    text-align: center;
    font-size: 14px;
}

div.ui-datepicker th span {
    color: #545456;
    font-weight: normal;
}

div.ui-datepicker td a {
    text-decoration: none;
    color: #545456;
}

div.ui-datepicker .ui-datepicker-today a,
div.ui-datepicker .ui-datepicker-current-day a {
    font-weight: bold;
    color: #7e171b;
}

div.ui-datepicker .ui-datepicker-current-day {
    background-color: #f9f5ee;
}