.date-input button {
    background: none;
    border: none;
    box-sizing: border-box;
}
.date-input button:not([disabled]) {
    cursor: pointer;
}
.date-input button:not([disabled]):hover {
    border: solid 2px teal;
}

.date-input {
    position: relative;
    width: fit-content;
    margin-bottom: 30px;
}

.date-input input.form-control[type="text"] {
    width: 200px;
    max-width: initial;
    margin-bottom: 0;
}

.date-picker-toggle, .date-picker-open, .date-picker-toggle-icon {
    aspect-ratio: 1/1;
    width: auto;
    position: absolute;
    margin: 0;
    top: 0;
}

.date-picker-toggle-icon {
    height: 50%;
    top: 50%;
    transform: translateY(-50%);
    right: 0.8em;
    background-image: url("data:image/svg+xml,%3Csvg%20style%3D%22color%3A%20rgb(0%2C%20133%2C%20127)%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20data-fa-i2svg%3D%22%22%3E%0A%09%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M400%2064h-48V12c0-6.6-5.4-12-12-12h-40c-6.6%200-12%205.4-12%2012v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6%200-12%205.4-12%2012v52H48C21.5%2064%200%2085.5%200%20112v352c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48V112c0-26.5-21.5-48-48-48zm-6%20400H54c-3.3%200-6-2.7-6-6V160h352v298c0%203.3-2.7%206-6%206z%22%20%3E%20%3C%2Fpath%20%3E%0A%3C%2Fsvg%3E");
}

.date-picker-toggle, .date-picker-open {
    right: 0;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.date-input:focus-within .date-picker-open {
    display: none;
}
.date-input:not(:focus-within) .date-picker-toggle {
    display: none;
}

.date-picker {
    position: absolute;
    top: 100%;
    z-index: 2;
    width: 350px;
    border-radius: 3px;
    box-shadow: 0px 5px 15px rgba(0,0,0, 0.2);
}

.focus-station {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.year-selector {
    scrollbar-width: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 35px;
    height: 200px;
    overflow-y: scroll;
}

.month-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 35px;
}

.date-picker-heading {
    display: grid;
    grid-template-columns: 50px 1fr 1fr 50px;
}
.date-picker-heading {
    background-color: #002235;
    height: 50px;
}
.date-picker-heading button {
    color: #fff;
}
.date-picker-previous-month, .date-picker-next-month {
    aspect-ratio: 1/1;
}

.date-picker-month-heading, .date-picker-year-heading {
    flex-basis: 0;
    flex-grow: 1;
}

.day-selector-weekdays, .day-selector-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 35px;
    text-align: center;
}

.day-selector-weekdays, .day-selector-days, .year-selector, .month-selector {
    background: #fff;
}

.day-selector-days {
    border-radius: 0 0 3px 3px;
}
.day-selector-weekdays {
    height: 35px;
}
.day-selector-weekdays * {
    display: flex;
    justify-content: center;
    align-items: center;
}

.date-picker-heading {
    border-radius: 3px 3px 0 0;
}
.year-selector, .month-selector {
    border-radius: 3px 3px 3px 3px;
}