/*Tempus Dominus Date Picker*/

/*additional css*/
.append-icon.calender-icon {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M16.25 2.5H14.375V1.875C14.375 1.70924 14.3092 1.55027 14.1919 1.43306C14.0747 1.31585 13.9158 1.25 13.75 1.25C13.5842 1.25 13.4253 1.31585 13.3081 1.43306C13.1908 1.55027 13.125 1.70924 13.125 1.875V2.5H6.875V1.875C6.875 1.70924 6.80915 1.55027 6.69194 1.43306C6.57473 1.31585 6.41576 1.25 6.25 1.25C6.08424 1.25 5.92527 1.31585 5.80806 1.43306C5.69085 1.55027 5.625 1.70924 5.625 1.875V2.5H3.75C3.41848 2.5 3.10054 2.6317 2.86612 2.86612C2.6317 3.10054 2.5 3.41848 2.5 3.75V16.25C2.5 16.5815 2.6317 16.8995 2.86612 17.1339C3.10054 17.3683 3.41848 17.5 3.75 17.5H16.25C16.5815 17.5 16.8995 17.3683 17.1339 17.1339C17.3683 16.8995 17.5 16.5815 17.5 16.25V3.75C17.5 3.41848 17.3683 3.10054 17.1339 2.86612C16.8995 2.6317 16.5815 2.5 16.25 2.5ZM5.625 3.75V4.375C5.625 4.54076 5.69085 4.69973 5.80806 4.81694C5.92527 4.93415 6.08424 5 6.25 5C6.41576 5 6.57473 4.93415 6.69194 4.81694C6.80915 4.69973 6.875 4.54076 6.875 4.375V3.75H13.125V4.375C13.125 4.54076 13.1908 4.69973 13.3081 4.81694C13.4253 4.93415 13.5842 5 13.75 5C13.9158 5 14.0747 4.93415 14.1919 4.81694C14.3092 4.69973 14.375 4.54076 14.375 4.375V3.75H16.25V6.25H3.75V3.75H5.625ZM16.25 16.25H3.75V7.5H16.25V16.25Z" fill="%23717171"/></svg>');
}
.append-icon.clock-icon {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23717171" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"></path></svg>');
}
.datepicker, .timepicker {
    position: relative
}
.datepicker input.input-custom, .timepicker input.input-custom {
    padding-right: 32px;
}

/*tempus-dominus css override*/
.tempus-dominus-widget {
    padding: 16px;
    border-radius: var(--border-radius-default);
    box-shadow: var(--shadow-dropdown);
    margin: 8px 0px !important; /*for offset*/
    left: auto !important; /*for right align*/
    right: 0px !important; /*for right align*/
    width: 304px; /*fixed width given for year and month modes*/
}
.tempus-dominus-widget.light {
    background-color: var(--white);
    color: var(--black);
}

.tempus-dominus-widget .calendar-header {
    column-gap: 16px;
    grid-auto-columns: 32px auto 32px; /*32px for box btn width*/
    margin-bottom: 16px;
}
.tempus-dominus-widget .calendar-header .previous {
    padding-left: 8px; /*so that box btn padding not disturbed*/
}

.tempus-dominus-widget .calendar-header .next {
    padding-right: 8px; /*so that box btn padding not disturbed*/
}

.tempus-dominus-widget .date-container-days {
    grid-auto-columns: 32px;
    grid-auto-rows: 32px;
    gap: 8px;
}
.tempus-dominus-widget.light .date-container-days .dow {
    color: var(--subdued);
    font-size: var(--font-size-large);
    line-height: var(--line-height-default);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight) {
    color: var(--black);
}
.tempus-dominus-widget .date-container-days div:not(.no-highlight) {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-medium);
    width: auto;
    height: auto;
}
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).old {
    color: var(--subdued);
    font-weight: var(--font-weight-light);
}

.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active {
    background-color: var(--black);
    color: var(--white);
}
.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active {
    background-color: var(--black);
    color: var(--white);
}
.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active {
    background-color: var(--black);
    color: var(--white);
}
.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active {
    background-color: var(--black);
    color: var(--white);
}
.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).today:before{
    border-bottom-color: var(--black);
}

/*for time picker*/
.tempus-dominus-widget.light button.toggleMeridiem {
    background-color: var(--black);
    border-color: var(--black);
    color: var(--white);
}
.tempus-dominus-widget .toggleMeridiem {
    width: 42px;
    border: none;
}