.datepicker-wrap {
    position: relative;
}

.ui-datepicker-trigger {
    display: none;
}

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

#ui-datepicker-div {
    top: 100% !important;
    left: 0 !important;
}

@media(min-width:768px) {
    #ui-datepicker-div {
        top: 100% !important;
        left: 100% !important;
        margin-left: -40px !important;
    }
}

.ui-datepicker {
    width: 17em;
    padding: 0;
    border: 1px solid #dadada;
    font: 300 14px 'open sans';
    -webkit-box-shadow: 5px 5px 18px 0px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 5px 5px 18px 0px rgba(0, 0, 0, 0.13);
    box-shadow: 5px 5px 18px 0px rgba(0, 0, 0, 0.13);
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 7px 0;
    background: #123456;
    border: 0;
    margin: -1px;
    border-radius: 0;
}

.ui-datepicker table {
    margin: .2em 0;
}

.ui-datepicker th {
    color: #1e1e1e;
}

.ui-datepicker td {
    padding: 0;
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center;
    padding: 0;
    height: 34px;
    width: 34px;
    line-height: 34px;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font: 400 16px 'open sans';
    color: #1e1e1e;
    border-color: #123456;
    background: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 0;
    background: transparent url(none);
    color: #949094;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: #e6e6e6;
    color: #1e1e1e;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background: #acca28;
    color: #1e1e1e;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 8px;
}

.ui-widget-header .ui-state-hover,
.ui-widget-header .ui-state-focus {
    background: transparent none;
    border: 0;
    top: 8px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 2px;
}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
    background-image: none;
}

.ui-datepicker-prev .ui-icon:before,
.ui-datepicker-next .ui-icon:before {
    content: '\f0d9';
    font-family: fontAwesome;
    color: #fff;
    display: block;
    vertical-align: middle;
    text-align: center;
    text-indent: 0;
}

.ui-datepicker-next .ui-icon:before {
    content: '\f0da';
}

@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Viga&display=swap");

.datepicker-wrap *{
    font-family: 'Roboto';
}
.ui-datepicker *{
    font-family: 'Roboto'!important;
}
.datepicker-input{
    width: initial!important;
}