﻿    .pilled-date-range {        
        /*background: #fafafa;*/
    }

    .pilled-date-range label {
        width: 50px;
        margin-right: 0 !important;
        text-align: center;
        color: var(--dark-grey);
        font-size: 12px;
    }

        .pilled-date-range .pill-left,
        .pilled-date-range .pill-right {
            /*outline: 1px solid green;*/
            width: 50%;
            border-radius: 0px !important;
            /*border-left: 1px solid #aaa;*/
            box-sizing: border-box;
            float: left;
            max-width: 358px;
            height: 36px;
        }

        .pilled-date-range .k-widget.k-datepicker {
            width: calc(100% - 50px);
            max-width: 353px;
            box-sizing: border-box;
            border-bottom-right-radius: 0px !important;
            border-top-right-radius: 0px !important;
            height: 34px;
        }
        .pilled-date-range .pill-left .k-widget.k-datepicker,
        .pilled-date-range .pill-left .k-widget.k-datepicker .k-picker-wrap.k-state-default {
            border-bottom-right-radius: 0px !important;
            border-top-right-radius: 0px !important;
        }

        .pilled-date-range .pill-left .k-widget.k-datepicker {
            border-right: 1px solid var(--border-grey);
            border-radius: 0px !important;
            border-left: 1px solid var(--border-grey);
        }

        .pilled-date-range .pill-right .k-widget.k-datepicker {
            border-left: 1px solid var(--border-grey);
            
        }


        .pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default {
            /*outline: 1px solid green;*/
            padding: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            border-bottom-right-radius: 40px !important;
            border-top-right-radius: 40px !important;
            height: 34px;
            line-height: 34px;
        }



        .pilled-date-range .k-widget.k-datepicker.right-pill,
        .pilled-date-range .k-widget.k-datepicker.right-pill .k-picker-wrap.k-state-default {
            border-bottom-right-radius: 40px !important;
            border-top-right-radius: 40px !important;

        }


    .pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default .k-input {
        /*outline: 1px solid red;*/
        padding: 0;
        margin: 0;
        border-radius: 0;
        background: none;
        background-color: transparent;
        min-height: 34px;
        height: 34px;
        line-height: 29px;
    }

    .pilled-date-range .k-widget.k-datepicker:nth-child(odd) .k-picker-wrap.k-state-default .k-input,
    .pilled-date-range .k-widget.k-datepicker:nth-child(odd) .k-picker-wrap.k-state-default .k-select {
    border-bottom-right-radius: 40px !important;
    border-top-right-radius: 40px !important;
    /*outline: 1px solid purple;*/
    }

    .pilled-date-range .k-widget.k-datepicker:nth-child(odd) .k-picker-wrap.k-state-default .k-select {
    border-bottom-right-radius: 40px !important;
    border-top-right-radius: 40px !important;
    /*outline: 1px solid blue;*/
    background-color: none;
    background: none !important;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    min-height: 29px !important;
    height: 33px;
    line-height: 22px !important;
    }


    .pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default .k-select {
    background-color: transparent;
    background: none !important;
    min-height: 29px !important;
    line-height: 22px !important;
    /*outline: 1px solid green;*/
    /*border-left: 1px solid #aaa;*/
    height: 34px;

    }
        .pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default .k-select span.k-icon{
            height: 34px;
            line-height: 43px;
            margin-top: 0px!important;
        }

       .pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default .k-select .k-icon.k-i-calendar::before {
            font-family: FontAwesome;
            content: "\f078";
            line-height: 25px;
            color: #aaa;
            font-size: 12px;
            padding: 0;
            margin: 0;
            background: none;
            background-color: transparent;
            line-height: 36px;
            }

    .pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default .k-select .k-icon.k-i-calendar {
    background-image: none;
    }

    .pilled-date-range .pill-left..k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover {
    /*outline: 1px solid green!important;*/
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    }
    /*.pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover:nth-child(odd) input.right-pill.k-input{*/
    /*outline: 1px solid blue!important;*/
    /*border-bottom-right-radius: 0px!important;
    border-top-right-radius: 0px!important;
    }*/
    .pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover .k-select {
    background: #f4effb !important;
    border-left: 1px solid #f4effb;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    height: 33px;
    }


    .pilled-date-range .pill-right:hover .k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover .k-input {
    border-bottom-right-radius: 40px !important;
    border-top-right-radius: 40px !important;
    }

    .pilled-date-range .pill-right:hover .k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover .k-select {
    border-bottom-right-radius: 40px !important;
    border-top-right-radius: 40px !important;
    }

    .pilled-date-range pill-right.k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover .k-input {
    border-bottom-right-radius: 40px !important;
    border-top-right-radius: 40px !important;
    }

    .pilled-date-range .k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover .k-select {
    background: #f4effb !important;
    border-left: 1px solid #f4effb;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    }

    .pilled-date-range pill-right.k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover .k-select {
    background: #f4effb !important;
    border-left: 1px solid #f4effb;
    border-bottom-right-radius: 40px !important;
    border-top-right-radius: 40px !important;
    }

    .pilled-date-range pill-right.k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-hover .k-input {
    border-bottom-right-radius: 40px !important;
    border-top-right-radius: 40px !important;
    }


    /* focused */
    .pilled-date-range .pill-right .k-widget.k-datepicker .k-picker-wrap.k-state-default.k-state-focused .k-input {
    border-bottom-right-radius: 40px !important;
    border-top-right-radius: 40px !important;
    }


    /* opened date picker */

    .pilled-date-range .k-widget.k-datepicker.k-state-border-down .k-picker-wrap.k-state-default.k-state-active.k-state-border-down,
    .pilled-date-range .k-widget.k-datepicker.k-state-border-down .k-picker-wrap.k-state-default.k-state-active.k-state-border-down .k-input {
    border-bottom-color: transparent !important;
    border-color: transparent !important;
    border-bottom: 0 !important;
    }

        .pilled-date-range .pill-left .k-widget.k-datepicker.k-state-border-down .k-picker-wrap.k-state-default.k-state-active.k-state-border-down .k-select,
        .pilled-date-range .pill-left .k-widget.k-datepicker.k-state-border-up .k-picker-wrap.k-state-default.k-state-active.k-state-border-up .k-select {
            background: #f4effb !important;
            background-color: #f4effb !important;
            border-left: 1px solid #f4effb !important;
            border-radius: 0px !important;
        }
        .pilled-date-range .pill-right .k-widget.k-datepicker.k-state-border-down .k-picker-wrap.k-state-default.k-state-active.k-state-border-down .k-select,
        .pilled-date-range .pill-right .k-widget.k-datepicker.k-state-border-up .k-picker-wrap.k-state-default.k-state-active.k-state-border-up .k-select {
            background: #f4effb !important;
            background-color: #f4effb !important;
            border-left: 1px solid #f4effb !important;
            border-bottom-right-radius: 40px !important;
            border-top-right-radius: 40px !important;
        }

    .k-animation-container {
    border-bottom-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset,
    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar {
    border-bottom-right-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar  .k-link.k-state-hover {
    background: var(--kb-light-purple);
    color: var(--kb-purple);
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar  .k-link.k-nav-prev.k-state-hover .k-icon {
    background-position: 0px -48px;
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar  .k-link.k-nav-next.k-state-hover .k-icon {
    background-position: 0px -16px;
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-state-selected {
    color: white !important;
    border: 0 !important;
    border: 0 !important;
    border-color: transparent;
    border-radius: 40px;
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-state-selected .k-link {
    color: white !important;
    border: 0 !important;
    border: 0 !important;
    border-color: transparent;
    border-radius: 40px;
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-state-hover,
    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-state-hover .k-link {
    border: 0 !important;
    box-shadow: 0 !important;
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-state-selected.k-state-focused .k-link {
    background: var(--kb-light-purple) !important;
    background-color: var(--kb-light-purple) !important;
    color: var(--kb-purple) !important;
    }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-weekend.k-state-focused,
    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-state-focused.k-today,
    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-state-focused {
    border: 0 !important;
    box-shadow: 0 !important;
    background: var(--kb-light-purple);
    border-radius: 40px;
    }

        .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-today {
            background: var(--kb-blue);
            background: var(--kb-purple);
        }

    .k-animation-container .k-calendar-container.k-popup.k-group.k-reset .k-widget.k-calendar .k-content .k-today .k-link {
    color: var(--kb-purple);
    color: white;
    }





 .pilled-date-range .pill-left {
    border: 1px solid var(--border-grey);
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    box-sizing: border-box;
    border-right: 0;
}
.pilled-date-range .pill-right {
    border: 1px solid var(--border-grey);
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    box-sizing: border-box;
}

.pilled-date-range .pill-left .k-widget.k-datepicker{
    border-right: 0;
}


/* CUSTOMISATION FOR DATE PAGINATOR - SCHEDULER FULL PAGE */
#scheduler #date-paginator {
    width: 100%;
    margin-top: -1px;
    display: block;
    webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#scheduler #date-paginator .pagination {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}
#scheduler #date-paginator .pagination > li {
    display: table-cell;
}
.Scheduler .k-widget * {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}


/* DAY ELEMENTS */
.Scheduler  .dp-item{
    color: #888;
}

/* WEEKENDS */
.Scheduler .dp-item.dp-off {
    background: var(--kb-light-purple)!important;
    background: #f2f2f2!important;
}
.Scheduler .dp-divider {
    border-left: 0 !important;
}

/* CURRENT DATE */
.Scheduler .dp-item.dp-today{
    background: white!important;
    color: var(--kb-purple)!important;
}
.Scheduler .dp-item.dp-today::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--kb-aqua);
    background: var(--kb-purple);
    display: block;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: -2px;
}


/* SELECTED DATE */
.Scheduler .dp-selected,
.Scheduler .dp-item.dp-selected.dp-off,
.Scheduler .dp-item.dp-selected.dp-today {
    background-color: var(--kb-purple) !important;
    /*padding: 8px 0 !important;*/
    border-top: 0;
    color: white!important;
}
.Scheduler .dp-item.dp-selected.dp-today::after{
    background: white;
}

