.kt-ui-date-time-range {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kt-ui-date-time-range .kt-ui-date { flex: 1 0 120px; }
.kt-ui-date-time-range .kt-ui-time-range { flex-grow: 1; }
.kt-ui-date-time-range .kt-ui-time { flex: 1 1 90px; }

@container kt-ui-form (min-width: 420px) {
    .kt-ui-date-time-range { flex-wrap: wrap; }
    .kt-ui-date-time-range .kt-ui-date { flex-basis: 100%; width: 100%; }
}

@container kt-ui-form (min-width: 600px) {
    .kt-ui-date-time-range { flex-wrap: nowrap; gap: 16px; }
    .kt-ui-date-time-range .kt-ui-time-range { flex-grow: 0; }

    .kt-ui-date-time-range .kt-ui-date,
    .kt-ui-date-time-range .kt-ui-time {
        flex: 0 0 180px;
        width: auto;
    }
}