/*DatePicker & Calendar */
body .ui-datepicker {
    padding: 0;
    border: none;

    .ui-widget-content {
        border: none;
    }

    &.ui-datepicker-inline {
        border: 0;
        .box-shadow(0 5px 10px rgba(0,0,0,0.8))
    }

    span.ui-icon-circle-triangle-e {
        background-image: none;
        display: inline;
        position: relative;
        color: transparent;
        opacity: 1;

        &:before {
            font-family: FontAwesome;
            color: #fff;
            position: relative;
            margin: 0 7px;
            top: -10px;
            font-size: @font-awesome-icon-size;
            overflow: hidden;
            content: "\f0da" !important;
        }

        &:hover {
            opacity: .8;
        }
    }

    .ui-datepicker-header, .ui-timepicker-div > .ui-widget-header {
        position: relative;
        padding: .2em 0;
        background: @light-blue;
        /* Old browsers */
        background: -moz-linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @light-blue), color-stop(100%, darken(@light-blue, 10%)));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* IE10+ */
        background: linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@light-blue', endColorstr='darken(@light-blue, 10%)', GradientType=0);
        /* IE6-9 */
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
        -webkit-border-radius: @default-border-radius;
        -moz-border-radius: @default-border-radius;
        border-radius: @default-border-radius;
        border: 1px solid darken(@light-blue, 5%);
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;

        &.ui-state-hover {
            border: 0;
            background: none;
        }
    }

    .ui-datepicker-calendar {
        a.ui-state-active {
            background-color: @light-blue;
            color: #fff;
            transform: scale(0.9);
            border-radius: 50%;
        }

        span.ui-state-disabled {
            border: none;
        }
    }

    a.ui-monthpicker-month {
        &.ui-state-active {
            background-color: @light-blue;
            color: #fff;
        }
    }

    span.ui-icon-circle-triangle-w {
        background-image: none;
        display: inline;
        position: relative;
        color: transparent;
        opacity: 1;

        &:before {
            font-family: FontAwesome;
            color: #fff;
            position: relative;
            margin: 0 7px;
            top: -10px;
            font-size: @font-awesome-icon-size;
            overflow: hidden;
            content: "\f0d9" !important;
        }

        &:hover {
            opacity: .8;
        }
    }

    table {
        font-size: .9em;
        border-collapse: collapse;
        margin: -1px 0 0 0 !important;
        border-spacing: 0;
    }

    th {
        color: #fff !important;
        text-shadow: none;
        border: #27292b solid !important;
        border-width: 1px 0 !important;
        background: @light-blue;
        /* Old browsers */
        background: -moz-linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @light-blue), color-stop(100%, darken(@light-blue, 10%)));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* IE10+ */
        background: linear-gradient(top, @light-blue 0%, darken(@light-blue, 10%) 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@light-blue', endColorstr='darken(@light-blue, 10%)', GradientType=0);
        /* IE6-9 */
        .box-shadow(none);
        padding: .7em 0;
        text-align: center;
        font-weight: bold;
        border: 0;
        font-size: 10px;
        color: #acacac;
        border-bottom: 1px solid #cdcdcd !important;
    }

    tbody td.ui-datepicker-today a {
        border: 1px solid @light-blue !important;
        font-weight: bold !important;
        height: 30px;
        width: 30px;
        padding: 3px;

        &.ui-state-active {
            border: none !important;
        }
    }

    td {
        border: 0;
        border: 1px solid #cdcdcd;

        a {
            display: block;
            border: 0 none !important;
            /*border: 1px solid #cdcdcd !important;*/
            line-height: 30px;
            text-align: center !important;
            font-size: 12px;
            text-decoration: none;

            &.ui-state-default {
                color: #5d5d5d;
                background: #fff;
                font-weight: 600;
                /* Old browsers */
                .box-shadow(none);
            }
        }

        &.ui-datepicker-unselectable {
            border-color: #ebebeb !important;
            opacity: @opacity-disabled;
        }
    }

    .ui-datepicker-prev, .ui-datepicker-next {
        position: absolute;
        width: 1.8em;
        height: 1.8em;
        cursor: pointer;
    }

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

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

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

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

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


    .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center;
        color: #fff;
        text-shadow: none;
    }

    .ui-datepicker-title select {
        font-size: 1em;
        margin: 1px 0;
    }

    select.ui-datepicker-month-year {
        width: 100%;
    }

    select.ui-datepicker-month {
        margin-right: 2px;
    }

    select.ui-datepicker-month, select.ui-datepicker-year {
        width: 49%;
        -moz-appearance: none;
        color: @admin-text-color;
        background-color: #fff !important;
        border: #d2d6de;
    }

    select.ui-datepicker-month::-ms-expand {
        display: none;
    }

    .ui-datepicker-today {
        a.ui-state-highlight, span.ui-state-highlight {
            text-shadow: none;
            color: #222;
            transform: scale(0.9);
            border-radius: 50%;
            background: #fff;
            border: 1px solid @light-blue;
            &.ui-state-active {
                color: @calendar-selected-color;
                background: @light-blue;
            }
        }

        a.ui-state-hover, a:hover {
            background-color: @hover-color;
        }
    }

    .ui-datepicker-buttonpane button.ui-datepicker-current {
        float: left;
    }

    .ui-datepicker-buttonpane {
        background-image: none;
        margin: .7em 0 0 0;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;

        button {
            float: right;
            margin: .5em .2em .4em;
            cursor: pointer;
            padding: .2em .6em .3em .6em;
            width: auto;
            overflow: visible;
        }
    }

    button.ui-today-button {
        color: #fff !important;
        background-color: #3c8dbc !important;
        border-color: #367fa9 !important;
    }

}


/* with multiple calendars */
.ui-datepicker-multi {
    width: auto;

    .ui-datepicker-group {
        float: left;
    }

    .ui-datepicker-group table {
        width: 95%;
        margin: 0 auto .4em;
    }

    .ui-datepicker-group-last .ui-datepicker-header {
        border-left-width: 0;
    }

    .ui-datepicker-group-middle .ui-datepicker-header {
        border-left-width: 0;
    }

    .ui-datepicker-buttonpane {
        clear: left;
    }
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}


.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0em;
}

#ui-datepicker-div {
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
}

body .ui-calendar {
    position: relative;

    button.ui-datepicker-trigger {
        height: 32px;
        top: -12px;
        .box-shadow(none);
        border: none;
        overflow: visible;
        background: transparent;
        position: absolute;
        right: -2px;
        width: 2.4em;

        > span.ui-icon-calendar {
            background: none !important;
            position: relative !important;
            top: 0 !important;
            display: inline;
            overflow: hidden;

            &:before {
                font-family: FontAwesome;
                color: @admin-text-color;
                position: relative;
                top: 0;
                font-size: 20px;
                overflow: hidden;
                content: "\f073" !important;
            }

            &.icon-ripple {
                left: 1px;
            }
        }

        .ui-button {
            background: @light-blue;
        }

    }
}

span.p-datepicker {
    display: inline;
}

//ie11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    body span.ui-calendar button.ui-datepicker-trigger > span.ui-icon-calendar {
        top: -4px !important;
    }
}

.ui-datepicker .ui-datepicker-header,
.ui-datepicker .ui-timepicker-div > .ui-widget-header,
.ui-datepicker-year,
.ui-datepicker-month {
    background: @light-blue !important;
}

body .ui-datepicker tbody td {
    box-sizing: border-box;
    padding: 0!important;
    border: 0!important;
}

body .ui-datepicker tbody td a {
    height: 32px;
    width: 32px;
    line-height: 24px;
    padding: .4em;

    &.ui-state-hover, &:hover {
        background-color: @hover-color;
    }

    border-radius: 50%;
}

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

body .ui-timepicker-div .ui-slider.ui-slider-horizontal {
    margin-top: 18px;
}

div.ui-timepicker {
    a.ui-picker-down .ui-icon-carat-1-s {
        background-image: none !important;
        display: inline !important;

        &:before {
            font-family: 'Glyphicons Halflings';
            color: @admin-text-color;
            position: relative;
            font-size: @spinner-icon-size;
            top: -6px;
            left: -7px;
            font-weight: bold;
            overflow: hidden;
            content: "\e259" !important;
            @media (max-width: @screen-sm) {
                font-size: @spinner-icon-size + 1;
            }
        }
    }

    a.ui-picker-up .ui-icon-carat-1-n {
        background-image: none !important;
        display: inline !important;

        &:before {
            font-family: 'Glyphicons Halflings';
            color: @admin-text-color;
            position: relative;
            font-size: @spinner-icon-size;
            top: -3px;
            left: -7px;
            font-weight: bold;
            overflow: hidden;
            content: "\e260" !important;
            @media (max-width: @screen-sm) {
                font-size: @spinner-icon-size + 1;
            }
        }
    }
}