// Date picker
.date-picker,
.date-picker-no-year {
    position: relative;
    font-weight: normal;

    &:before {
        content: '';
        position: absolute;
        background: url('/assets/images/calendar-input-icon.svg');
        top: 8px;
        left: 7px;
        z-index: 2;
        width: 19px;
        height: 19px;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    input {
        padding-left: 30px;
    }
}

.date-picker .date-picker-input {
    width: 150px;
}

.date-picker .month-picker-input {
    width: 180px;
}
  
.bootstrap-datetimepicker-widget {
    .datepicker {
        table {

            // Color and sizing of previous button , next button, central date button and day letter
            .prev, .picker-switch, .next, th.dow  {
                color: $gray-800;
                height: 30px;
                line-height: 30px;
            }


            // Custom td colors
            td.day, td span {
                color: $gray-700;
            }

            // day picker height
            td.day {
                height: 30px;
                line-height: 30px;

                // Custom day colors for the previous and next month
                &.old, &.new  {
                    color: $gray-500;
                }

            }

            // makes the background of the currently picked day, month or year the primary color
            td.day.active, span.active  {
                color: var(--theme-primary-color-contrast);
                background: var(--theme-primary-color);
            }

        }
    }
}

//Time picker
.cla_time_picker {
    width: 94px !important;
}

// Date picker calendar widget customizations
.calendar-placeholder {
    z-index: 1031;
}

//Prevent Date pickers styles being affected when nested within <table>s
table .bootstrap-datetimepicker-widget table {
    border: none;
    background: $white;
    white-space: normal !important;

    thead {
        tr th {
            background: $white;
        }

        tr + tr th {
            border: none;
        }
    }

    td,
    th {
        border: none;
        padding: 0;
    }
}
