.ui-datepicker {
    width: 21em !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 0px solid #c5c5c5;
    background: transparent;
    font-weight: normal;
    color: #454545;
    text-align: center;
    /* height: 29.94px; */
    height: 34.52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* @media(min-width: 576px) {
    .ui-datepicker {
        width: 21em!important;
    }

    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    .ui-button,
    html .ui-button.ui-state-disabled:hover,
    html .ui-button.ui-state-disabled:active {
        height: 34.52px;
    }
} */
.ui-datepicker {
    transform: translateY(5px);
    padding: 1em;
}

.ui-widget.ui-widget-content {
    background-color: #fff;
}

.ui-widget-header {
    background: #fff;
    border: 0px;
}



.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #4075C4;
    background: #4075C4;
    color: #fff;
    font-weight: bolder;
}

.ui-state-disabled.ui-datepicker-today span{
    background: #4075C4;
    color: #fff;
}


.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid #DEE8FF;
    background: #DEE8FF;
    font-weight: normal;
    color: #545454;
}

/* .ui-datepicker table.ui-datepicker-calendar {
    border-collapse: separate;
    border-spacing: 5px 5px;
} */

.ui-datepicker td{
    padding: 5px;
}

.ui-datepicker thead tr {
    border-bottom: 1px solid rgb(225, 225, 225);
}

.ui-datepicker .ui-datepicker-header {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0px;
    flex-grow: 1;
}

.NextYr,
.PrevYr,
.NextYr:hover,
.PrevYr:hover {
    display: block;
    border: 0px;
    background-color: transparent;
    box-shadow: none;
    position: relative;
    width: 1.8em;
    height: 1.8em;
}

.NextYr:hover,
.PrevYr:hover {
    border: 1px solid #ccc;
    background-color: #ededed;
    border-radius: 3px;
}

.NextYr span,
.NextYr span:hover,
.PrevYr span,
.PrevYr span:hover {
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background-position: center;
}

.NextYr span,
.NextYr span:hover {
    background-image: url(img/chevrons-right.svg);
}

.PrevYr span,
.PrevYr span:hover {
    background-image: url(img/chevrons-left.svg);

}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: relative;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    cursor: pointer;
}

.ui-datepicker .ui-widget-header .ui-icon {
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    margin-left: 0px;
    margin-top: 0px;
}

.ui-widget-header .ui-icon.ui-icon-circle-triangle-e {
    background-image: url(img/chevron-right.svg);


}

.ui-widget-header .ui-icon.ui-icon-circle-triangle-w {
    background-image: url(img/chevron-left.svg);
}