/***************************/
/*Standard Date Time Picker*/
/***************************/
.date-picker-wrapper {
    display: grid;
    align-items: center;
    grid-template-columns: [phoenix-date-time-picker] minmax(auto, 100%) [date-picker-options] auto;
}

.date-picker-wrapper script {
    display: none;
}

.date-picker-wrapper .phoenix-date-time-picker {
    grid-area: phoenix-date-time-picker;
}

.date-picker-wrapper .date-picker-options {
    grid-area: date-picker-options;
    justify-self: end;
    margin-left: 10px;
}

.phoenix-date-time-picker.k-datetimepicker,
.phoenix-date-time-picker {
    width: 100%;
}

.phoenix-date-time-picker.k-datetimepicker .k-picker-wrap,
.phoenix-date-time-picker .k-picker-wrap {
    background-color: var(--inputfield-background);
    border-color: var(--inputfield-border);
    border-radius: 2px;
    height: 4rem;
}

.phoenix-date-time-picker.k-datetimepicker .k-picker-wrap.k-state-focused,
.phoenix-date-time-picker .k-picker-wrap.k-state-focused {
    background-color: transparent;
    box-shadow: none;
}

.phoenix-date-time-picker.k-datetimepicker .k-picker-wrap.k-state-default > .k-select,
.phoenix-date-time-picker .k-picker-wrap.k-state-default > .k-select {
    border: none;
}

.phoenix-date-time-picker.k-datetimepicker .k-picker-wrap.k-state-default .k-input,
.phoenix-date-time-picker .k-picker-wrap.k-state-default .k-input,
.phoenix-date-time-picker.k-datetimepicker .k-picker-wrap.k-state-default .k-input:focus,
.phoenix-date-time-picker .k-picker-wrap.k-state-default .k-input:focus {
    background-color: transparent;
    box-shadow: none;
}

.k-widget.phoenix-date-time-picker.k-datetimepicker:hover,
.k-widget.phoenix-date-time-picker:hover {
    box-shadow: var(--small-shadow);
}

/***************************************************/
/*Custom DatePicker for _GridFilterTemplates.cshtml*/
/***************************************************/
.phoenix-custom-date-picker {
    padding: 0 8px 0 5px;
    height: 4rem;
    border: 1px solid var(--inputfield-border);
    border-radius: 2px;
    width: 100%;
}

.phoenix-custom-date-picker.placeholder {
    color: var(--placeholder-font);
    font-weight: 300;
    font-style: italic;
    font-size: 1.8rem;
    line-height: 2.2rem;
    background-color: unset;
    opacity: 1;
}

.phoenix-custom-date-picker.value {
    color: var(--value-mutable-font);
    font-weight: normal;
    font-style: normal;
    font-size: 1.8rem;
    line-height: 2.2rem;
}

.phoenix-custom-date-picker:hover {
    box-shadow: var(--small-shadow);
    cursor: pointer;
}

::-webkit-calendar-picker-indicator {
    filter: var(--glyphicon-status-immutable);
}

/*************************************************/
/*Slightly smaller version for DatePickerInTables*/
/*************************************************/
td.phoenix-date .phoenix-date-time-picker.k-datetimepicker,
td.phoenix-date .phoenix-date-time-picker {
    width: 200px;
}

td.phoenix-date .phoenix-date-time-picker.k-datetimepicker span.k-picker-wrap input,
td.phoenix-date .phoenix-date-time-picker span.k-picker-wrap input {
    width: 200px !important;
}

td.phoenix-date .phoenix-date-time-picker.k-datetimepicker span.k-picker-wrap span.k-select,
td.phoenix-date .phoenix-date-time-picker span.k-picker-wrap span.k-select {
    width: 60px;
}

/***************/
/*Calendar View*/
/***************/
.k-animation-container .k-calendar-container {
    padding: 0;
    border: 1px solid var(--inputfield-border);
    border-radius: 2px;
    box-shadow: var(--small-shadow);
    background-color: var(--inputfield-background);
    position: relative !important;
}

.k-animation-container .k-calendar-container .k-calendar {
    width: 100%;
    height: 100%;
}

/*Calendar header*/
.k-animation-container .k-calendar-container .k-calendar .k-header {
    background-color: var(--primary);
    color: white;
    padding: 0;
    border-radius: 2px 2px 0 0;
}

.k-animation-container .k-calendar-container .k-calendar .k-header .k-nav-prev.k-button.k-flat.k-icon-button.k-state-disabled {
    color: transparent;
}

/*Calendar header - arrow back*/
.k-animation-container .k-calendar-container .k-calendar .k-header .k-nav-prev.k-button.k-flat.k-icon-button.k-state-disabled .k-icon.k-i-arrow-60-left {
    background-color: unset;
}

/*Calendar body*/
.k-animation-container .k-calendar-container .k-calendar .k-calendar-monthview,
.k-animation-container .k-calendar-container .k-calendar .k-calendar-yearview {
    padding: 0;
    width: 100%;
    height: auto;
}

.k-animation-container .k-calendar-container .k-calendar .k-calendar-monthview td,
.k-animation-container .k-calendar-container .k-calendar .k-calendar-yearview td {
    padding: 2px;
    width: 100%;
}

.k-animation-container .k-calendar-container .k-calendar .k-calendar-monthview table tbody tr .k-calendar-td.k-state-focused .k-link,
.k-animation-container .k-calendar-container .k-calendar .k-calendar-yearview table tbody tr .k-calendar-td.k-state-focused .k-link {
    box-shadow: none;
}

.k-animation-container .k-calendar-container .k-calendar .k-calendar-monthview table tbody tr .k-calendar-td.k-today .k-link,
.k-animation-container .k-calendar-container .k-calendar .k-calendar-yearview table tbody tr .k-calendar-td.k-today .k-link {
    color: var(--grey-dark-3);
    box-shadow: none;
    border: 1px solid var(--grey-dark-3);
    border-radius: 100%;
}

.k-animation-container .k-calendar-container .k-calendar .k-calendar-monthview table tbody tr .k-calendar-td.k-state-selected .k-link,
.k-animation-container .k-calendar-container .k-calendar .k-calendar-yearview table tbody tr .k-calendar-td.k-state-selected .k-link {
    background-color: var(--accent-1-tint-006);
    color: var(--accent-1);
    box-shadow: none;
    border: 1px solid var(--accent-1);
    border-radius: 100%;
}

.k-animation-container .k-calendar-container .k-calendar .k-calendar-monthview table tbody tr .k-calendar-td:hover .k-link,
.k-animation-container .k-calendar-container .k-calendar .k-calendar-yearview table tbody tr .k-calendar-td:hover .k-link {
    background-color: var(--accent-2-tint-015);
    color: var(--accent-2);
    box-shadow: none;
    border: 1px solid var(--accent-2);
    border-radius: 100%;
}

.k-animation-container .k-calendar-container .k-calendar .k-calendar-monthview table tbody tr .k-calendar-td.k-other-month .k-link {
    color: var(--grey-light-3);
}
/*Calendar footer*/
.k-animation-container .k-calendar-container .k-calendar .k-footer {
    padding: 5px 0 0 0;
    background-color: transparent;
}

.k-animation-container .k-calendar-container .k-calendar .k-footer .k-nav-today {
    color: #444444
}