.date-picker .input-group-item {
    margin-left: 0.125rem
}

.date-picker .input-group-text {
    background-color: transparent;
    border-color: transparent;
    min-width: 2rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem
}

@media(max-width: 575.98px) {
    .date-picker .input-group-text {
        font-size:inherit;
        height: 2rem;
        min-width: 1.5rem
    }
}

@media(max-width: 575.98px) {
    .date-picker .clay-time .form-control {
        border-radius:0.25rem;
        font-size: 0.875rem;
        height: 2rem;
        line-height: 1.5;
        min-height: 2rem;
        padding-bottom: 0.25rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.25rem
    }
}

.date-picker-dropdown-menu {
    max-height: none;
    max-width: 352px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 100%
}

@media(max-width: 575.98px) {
    .date-picker-dropdown-menu {
        font-size:0.75rem;
        margin: 0;
        max-height: 255px;
        max-width: 264px
    }
}

.date-picker-nav {
    display: flex;
    margin-left: -0.125rem;
    margin-right: -0.125rem
}

.date-picker-nav .nav-btn {
    color: #6b6c7e;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

@media(prefers-reduced-motion: reduce) {
    .date-picker-nav .nav-btn {
        transition: none
    }
}

.c-prefers-reduced-motion .date-picker-nav .nav-btn {
    transition: none
}

.date-picker-nav .nav-btn:hover {
    background-color: #f1f2f5;
    color: #272833
}

.date-picker-nav .nav-btn.focus,.date-picker-nav .nav-btn:focus-visible,.c-prefers-focus .date-picker-nav .nav-btn:focus {
    box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
    background-color: #f1f2f5;
    color: #272833
}

.date-picker-nav .nav-btn:active {
    background-color: #f1f2f5
}

.date-picker-nav .nav-btn:active:focus-visible,.c-prefers-focus .date-picker-nav .nav-btn:active:focus {
    box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff
}

.date-picker-nav .nav-btn.active {
    background-color: #f1f2f5
}

.date-picker-nav .nav-btn:disabled,.date-picker-nav .nav-btn.disabled {
    background-color: transparent;
    box-shadow: none;
    color: #a7a9bc
}

.date-picker-nav .nav-btn[aria-expanded=true],.date-picker-nav .nav-btn.show {
    background-color: #f1f2f5
}

.date-picker-nav .nav-btn-monospaced {
    margin-bottom: 0;
    margin-left: 0.125rem;
    margin-right: 0.125rem;
    margin-top: 0
}

@media(max-width: 575.98px) {
    .date-picker-nav .nav-btn-monospaced {
        font-size:0.75rem;
        height: 1.5rem;
        max-height: 1.5rem;
        max-width: 1.5rem;
        min-width: 1.5rem
    }
}

.date-picker-nav select.form-control {
    background-color: transparent;
    border-color: transparent;
    color: #6b6c7e;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semi-bold, 600);
    height: 2rem;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-top: 0
}

@media(max-width: 575.98px) {
    .date-picker-nav select.form-control {
        font-size:0.75rem;
        height: 1.5rem;
        color: #272833
    }
}

.date-picker-nav select.form-control:hover,.date-picker-nav select.form-control.hover {
    background-color: #f1f2f5;
    color: #272833
}

.date-picker-nav select.form-control.focus,.date-picker-nav select.form-control:focus-visible,.c-prefers-focus .date-picker-nav select.form-control:focus {
    background-color: #f1f2f5;
    color: #272833
}

.date-picker-nav select.form-control:disabled,.date-picker-nav select.form-control.disabled {
    background-color: transparent;
    color: #a7a9bc
}

.date-picker-nav .form-control-select {
    background-color: transparent;
    border-color: transparent;
    color: #6b6c7e;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semi-bold, 600);
    height: 2rem;
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-top: 0
}

@media(max-width: 575.98px) {
    .date-picker-nav .form-control-select {
        font-size:0.75rem;
        height: 1.5rem;
        color: #272833
    }
}

.date-picker-nav .form-control-select:hover,.date-picker-nav .form-control-select.hover {
    background-color: #f1f2f5;
    color: #272833
}

.date-picker-nav .form-control-select.focus,.date-picker-nav .form-control-select:focus-visible,.c-prefers-focus .date-picker-nav .form-control-select:focus {
    background-color: #f1f2f5;
    color: #272833
}

.date-picker-nav .form-control-select:disabled,.date-picker-nav .form-control-select.disabled {
    background-color: transparent;
    color: #a7a9bc
}

.date-picker-nav-item {
    align-items: center;
    display: flex;
    padding-left: .125rem;
    padding-right: .125rem
}

.date-picker-nav-item-expand {
    flex-grow: 1
}

.date-picker-nav-controls {
    display: flex;
    justify-content: flex-end
}


.date-picker-calendar {
    float: left;
    min-width: 100%
}

.date-picker-calendar-header {
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem
}

@media(max-width: 575.98px) {
    .date-picker-calendar-header {
        padding-bottom:0.25rem;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
        padding-top: 0.5rem
    }
}

.date-picker-calendar-body {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem
}

@media(max-width: 575.98px) {
    .date-picker-calendar-body {
        padding-left:0.375rem;
        padding-right: 0.375rem;
        padding-bottom: 0.25rem
    }
}

.date-picker-calendar-footer {
    border-color: #cdced9;
    border-style: solid;
    border-width: 1px 0 0 0;
    padding-bottom: 0.5rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 0.5rem
}

@media(max-width: 575.98px) {
    .date-picker-calendar-footer {
        padding-left:0.375rem;
        padding-right: 0.375rem;
        padding-top: 0.4375rem
    }
}

.date-picker-calendar-item {
    align-items: center;
    background-color: transparent;
    border-width: 0px;
    display: inline-flex;
    flex-shrink: 0;
    font-weight: var(--font-weight-semi-bold, 600);
    height: 2rem;
    justify-content: center;
    line-height: 1;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 2rem
}

@media(prefers-reduced-motion: reduce) {
    .date-picker-calendar-item {
        transition: none
    }
}




.c-prefers-reduced-motion .date-picker-calendar-item {
    transition: none
}

.date-picker-calendar-item:disabled,.date-picker-calendar-item.disabled {
    cursor: not-allowed
}

.date-picker-calendar-item .c-inner {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0
}

@media(max-width: 575.98px) {
    .date-picker-calendar-item {
        height:1.5rem;
        width: 1.5rem
    }
}

.date-picker-row {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    padding: 0
}

@media(max-width: 575.98px) {
    .date-picker-row {
        margin-bottom:0.25rem;
        margin-top: 0.25rem
    }
}

.date-picker-col {
    display: flex;
    flex-grow: 1;
    justify-content: center
}

.date-picker-col.c-selected {
    background-image: linear-gradient(#f0f5ff, #f0f5ff);
    background-repeat: no-repeat
}

.date-picker-col.c-selected:first-child {
    border-bottom-left-radius: 100px;
    border-top-left-radius: 100px
}

.date-picker-col.c-selected:last-child {
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px
}

.date-picker-col.c-selected-start {
    background-position: right top;
    background-size: 50% 100%
}

.date-picker-col.c-selected-end {
    background-position: left top;
    background-size: 50% 100%
}

.date-picker-days-row {
    margin-bottom: 1rem;
    margin-top: 0
}

@media(max-width: 575.98px) {
    .date-picker-days-row {
        margin-bottom:0.25rem
    }
}

.date-picker-day {
    height: 1.3125rem
}

.date-picker-date {
    border-radius: 100px;
    color: #6b6c7e;
    cursor: pointer;
    position: relative
}

.date-picker-date:hover {
    background-color: #f1f2f5;
    color: #272833
}

.date-picker-date.focus,.date-picker-date:focus-visible,.c-prefers-focus .date-picker-date:focus {
    box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff;
    outline: 0;
    background-color: #f1f2f5;
    color: #272833
}

.date-picker-date:active {
    background-color: #0b5fff;
    color: #fff
}

.date-picker-date:active:focus-visible,.c-prefers-focus .date-picker-date:active:focus {
    box-shadow: 0 0 0 0.125rem #fff , 0 0 0 0.25rem #80acff
}

.date-picker-date.active {
    background-color: #0b5fff;
    color: #fff
}

.date-picker-date:disabled,.date-picker-date.disabled {
    background-color: transparent;
    box-shadow: none;
    color: #a7a9bc
}

.date-picker-date[aria-expanded=true],.date-picker-date.show {
    background-color: #0b5fff;
    color: #fff
}

.previous-month-date {
    color: #a7a9bc
}

.previous-month-date:active {
    background-color: #b3cdff;
    color: #f0f5ff
}

.previous-month-date.active {
    background-color: #b3cdff;
    color: #f0f5ff
}

.previous-month-date[aria-expanded=true],.previous-month-date.show {
    background-color: #b3cdff;
    color: #f0f5ff
}

.next-month-date {
    color: #a7a9bc
}

.next-month-date:active {
    background-color: #b3cdff;
    color: #f0f5ff
}

.next-month-date.active {
    background-color: #b3cdff;
    color: #f0f5ff
}

.next-month-date[aria-expanded=true],.next-month-date.show {
    background-color: #b3cdff;
    color: #f0f5ff
}