﻿.eControls .eDatePicker {
    display: flex;
    flex-direction: column;

    & .e-pill-date.k-datepicker {
        position: relative;               
        display: flex;
        gap: 4px;
        padding: 4px 12px 4px 12px;       
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        background: var(--white);
        cursor: pointer;
        font-family: inherit;
        width: fit-content;
        min-height: 40px;
    }

    & .e-pill-date.k-focus,
    & .e-pill-date:focus {              
        border: 1px solid var(--brand-600);
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }

    & .e-pill-date .k-input-inner,
    & .e-pill-date .k-input {
        border: none !important;
        outline: none;
        width: 98px;                   
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-700);
        order: 1;                
        padding: 0;
        text-align: center;
    }

    & .e-pill-date .k-icon svg { display: none !important; }

    & .k-input-button {
        border-inline-start-width: 0 !important;
    }

    & .k-input-button .k-svg-i-calendar {
        display: flex;
        order: 0;
        background-color: transparent !important;
        /*ackground: url(/images/Calendar-icon.svg) !important;*/
        background-repeat: no-repeat !important;
        background-position: center;
        width: 20px;
        border: none !important;
    }

    & .k-button-solid-base.k-active, 
    & .k-button-solid-base:active {
        background-color: transparent !important;
    }

    & .k-button-solid-base.k-hover, 
    & .k-button-solid-base:hover {
        background-color: transparent !important;
    }

    & .k-datepicker {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 400;
        height: 40px;
    }

    & .k-input-solid.k-focus,
    & .k-input-solid:focus {
        border: 1px solid var(--brand-600);
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }

    & .k-input-button {
        background: transparent;
    }
}