.#{$uiName}-date {

    display: flex;
    justify-content: center;
    align-items: center;
    @include transition(0.2s ease all);
    top: 100%;
    left:0;
    margin-top: 0;
    cursor: default;

    box-shadow: 0 0 0 0 transparent inset;
    line-height: 1.4;
    padding-top: 0;

    .krax-dropdown-content {
        @include border-radius-top(0);
    }

    &.is-date-inline {
        position: relative;

        .krax-dropdown-content {
            display: flex;
            justify-content: center;
            width: 100%;
        }
    }

    &.error, .error {
        background: lighten(red, 47%);
        border-color: red;

        .error-message-ui {
            display: block;
        }
    }

    .date-error-container {
        position: absolute;
        left: 0;
        color: red;
        font-size: 11px;
        top: calc(100% + 2px);
    }

    .DayPickerNavigation__verticalDefault {
        display: flex;
        align-items: center;
        justify-content: center;

        .DayPickerNavigation_button__verticalDefault {
            width: 55px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }

    @each $item in $jumpUiColors {
        &.#{$uiName}-date-#{map-get($item, 'name')} {
            .CalendarDay {
                vertical-align: middle;
            }

            .CalendarDay__selected,
            .CalendarDay__selected:active,
            .CalendarDay__selected:hover,
            .CalendarDay__selected_start,
            .CalendarDay__selected_end
            {
                background: map-get($item, 'background') !important;
                border-color: map-get($item, 'background') !important;
                color: map-get($item, 'color');
            }

            .CalendarDay__selected_span {
                @include background(map-get($item, 'background'), 30%, 'light');
                @include border-color(map-get($item, 'background'), 30%, 'light');
            }

            .CalendarDay__hovered_span,
            .CalendarDay__hovered_span:hover
            {
                @include background(map-get($item, 'background'), 30%, 'light');
                @include border-color(map-get($item, 'background'), 30%, 'light');
                color: map-get($item, 'color');
            }

            .CalendarDay__last_in_range {
                border-style: double;
            }
        }
    }
    
    .datepicker-time-container {
        margin-bottom: 10px;

        //margin-right: 10px;

        /*&:last-of-type {
            margin-right: 0;
        }*/
    }
}

.jump-input-inside-time {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    right: 0;
    padding-right: 10px;
    width: 180px;
}