.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%;
}

.ui-datepicker {
    transform: translateY(5px);
    padding: 2.7vw;
}

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


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

.ui-state-default {
    display: block;
}


.ui-datepicker-calendar td {
    position: relative;
    height: 9.5vw;
}

.ui-datepicker-calendar td a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.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 {
    color: #ffffff;

}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    color: #545454;
}


.ui-state-active+div,
.ui-widget-content .ui-state-active+div,
.ui-widget-header .ui-state-active+div,
a.ui-button:active+div,
.ui-button:active+div,
.ui-button.ui-state-active:hover+div{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #0082be;
    background: #0082be;
    font-weight: normal;
    border-radius: 50%;
    width: 8.5vw;
    height: 8.5vw;

}

.ui-datepicker-today .ui-state-highlight+div,
.ui-datepicker-today .ui-widget-content .ui-state-highlight+div,
.ui-datepicker-today .ui-widget-header .ui-state-highlight+div{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #0082be;
    background: transparent;
    font-weight: bolder;
    border-radius: 50%;
    width: 8.5vw;
    height: 8.5vw;
}

.close_calendar {
    position: absolute;
    font-weight: bold;
    color: #0082be;
    right: 7vw;
    top: 7vw;
    font-size: 4.7vw;
    letter-spacing: 1vw;
    border-bottom: 1px solid #0082be;
}

.close_calendar span {
    display: block;
    position: relative;
}

.close_calendar span:before {
    content: "";
    position: absolute;
    background-color: #fff;
    bottom: -1px;
    right: 0;
    height: 100%;
    width: 1vw;
}


.ui-datepicker table.ui-datepicker-calendar tr {
    background-color: #fff;
}

.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;
    padding-bottom: 10px;
    border-radius: 0;
}

.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);
}

.ui-datepicker {
    width: 100% !important;
    left: 0 !important;
    background-color: #999999 !important;
    height: 100vw;
}

.ui-datepicker table.ui-datepicker-calendar,
.ui-datepicker .ui-datepicker-header {
    width: 82%;
    margin: auto;
}

.ui-datepicker .ui-datepicker-header {
    margin-left: 50%;
    transform: translateX(-50%);
    font-size: 3.5vw;
    margin-top: 15vw;
}

#start_date_datepicker,
#end_date_datepicker {
    height: 100%;
    margin-top: -3vw;
    position: relative;
}

#start_date_datepicker>.ui-helper-clearfix:before,
#end_date_datepicker>.ui-helper-clearfix:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 94vw;
    height: 93.5vw;
    background-color: #ffffff;
    z-index: -1;
    display: block;
}

/*  */
.ui-datepicker {
    position: relative;
}

#point_start,
#point_end {
    position: absolute;
    width: 0;
    height: 0;
    border-width: 0 2vw 3vw;
    border-style: solid;
    border-color: transparent transparent #999999;
    display: block;
    top: -1.5vw;

}

.ui-datepicker table {
    font-size: 3.5vw;
}

.ui-corner-all {
    border-radius: 0px;
}

.ui-datepicker-title {
    transform: translateY(-3vw);
}

@media(min-width: 768px) {

    /* .ui-datepicker {
        width: 16.8em !important;
    } */
    .ui-datepicker {
        padding: 2.16vw;
    }
    .ui-datepicker-calendar td {
        height: 7.22vw;
    }

    .ui-state-active+div,
    .ui-widget-content .ui-state-active+div,
    .ui-widget-header .ui-state-active+div,
    a.ui-button:active+div,
    .ui-button:active+div,
    .ui-button.ui-state-active:hover+div {
        content: "";
        width: 6.8vw;
        height: 6.8vw;
    }

    .ui-state-highlight+div,
    .ui-widget-content .ui-state-highlight+div,
    .ui-widget-header .ui-state-highlight+div {
        content: "";
        width: 6.8vw;
        height: 6.8vw;
    }

    .close_calendar {
        right: 5.6vw;
        top: 5.6vw;
        font-size: 3.76vw;
        letter-spacing: .8vw;
    }

    .close_calendar span:before {
        content: "";
        width: .8vw;
    }
    .ui-datepicker {
        height: 80vw;
    }
    .ui-datepicker table.ui-datepicker-calendar,
    .ui-datepicker .ui-datepicker-header {
        width: 65.6%;
    }

    .ui-datepicker .ui-datepicker-header {
        font-size: 2.8vw;
        margin-top: 12vw;
    }

    #start_date_datepicker,
    #end_date_datepicker {
        margin-top: -2.4vw;
    }

    #start_date_datepicker>.ui-helper-clearfix:before,
    #end_date_datepicker>.ui-helper-clearfix:before {
        content: "";
        width: 95.68vw;
        height: 74.8vw;
    }

    #point_start,
    #point_end {
        border-width: 0 1.6vw 2.4vw;
        top: -1.2vw;

    }

    .ui-datepicker table {
        font-size: 2.8vw;
    }

    .ui-datepicker-title {
        transform: translateY(-2.4vw);
    }
}

@media(orientation: landscape) {

    /* .ui-datepicker {
        width: 10.5em !important;
    } */
    .ui-datepicker {
        padding: 1.35vw;
    }
    .ui-datepicker-calendar td {
        height: 4.75vw;
    }

    .ui-state-active+div,
    .ui-widget-content .ui-state-active+div,
    .ui-widget-header .ui-state-active+div,
    a.ui-button:active+div,
    .ui-button:active+div,
    .ui-button.ui-state-active:hover+div {
        content: "";
        width: 4.25vw;
        height: 4.25vw;

    }

    .ui-state-highlight+div,
    .ui-widget-content .ui-state-highlight+div,
    .ui-widget-header .ui-state-highlight+div {
        content: "";
        width: 4.25vw;
        height: 4.25vw;
    }

    .close_calendar {
        right: 3.5vw;
        top: 3.5vw;
        font-size: 2.35vw;
        letter-spacing: .5vw;
    }

    .close_calendar span:before {
        content: "";
        width: .5vw;
    }
    .ui-datepicker {
        height: 50vw;
    }

    .ui-datepicker table.ui-datepicker-calendar,
    .ui-datepicker .ui-datepicker-header {
        width: 41%;
    }
    .ui-datepicker .ui-datepicker-header {
        font-size: 1.75vw;
        margin-top: 7.5vw;
    }

    #start_date_datepicker,
    #end_date_datepicker {
        margin-top: -1.5vw;
    }

    #start_date_datepicker>.ui-helper-clearfix:before,
    #end_date_datepicker>.ui-helper-clearfix:before {
        content: "";
        width: 97.3vw;
        height: 46.75vw;
    }

    #point_start,
    #point_end {
        border-width: 0 1vw 1.5vw;
        top: -.75vw;
    }

    .ui-datepicker table {
        font-size: 1.75vw;
    }

    .ui-datepicker-title {
        transform: translateY(-1.5vw);
    }

}