.mdc-datepicker-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: var(--z-axis-24-index);
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    will-change: opacity, visibility;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    margin: 0 !important;
    padding: 0 !important;
}

.mdc-datepicker-container.active {
    visibility: visible;
    opacity: 1;
}

.mdc-datepicker {
    background-color: rgb(var(--bg-cards));
    box-shadow: var(--z-axis-24-shadow);
    border-radius: 0.25rem;
    overflow: hidden;
    will-change: transform;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mdc-datepicker-container:not(.active) > .mdc-datepicker {
    -ms-transform: scale(1.12);
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
}

.mdc-datepicker > .header {
    background-color: rgb(var(--mdc-foreground, var(--bg-status-bar)));
    color: rgba(var(--mdc-theme, var(--foreground-color)), var(--opacity-primary));
    padding: 0 1.5rem;
}

.mdc-datepicker::before, .mdc-datepicker::after,
.mdc-datepicker > .header::before, .mdc-datepicker > .header::after {
    content: '';
    display: table;
}

.mdc-datepicker > .header > .label {
    margin-top: 1.25rem;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
}

.mdc-datepicker > .header > .selected-date {
    margin-top: 2.125rem;
    margin-bottom: 0.75rem;
    font-size: 2.125rem;
    letter-spacing: 0.007353em;
    font-weight: 400;
}

.mdc-datepicker > .mdc-calendar-controls {
    --foreground-color: var(--initial-foreground-color);

    margin: 1rem 0;
    color: rgba(var(--foreground-color), var(--opacity-secondary));
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.mdc-datepicker > .mdc-calendar-controls > .selected-month {
    font-size: 0.875rem;
    letter-spacing: 0.007143em;
    font-weight: 500;
    line-height: 1.5rem;
    white-space: nowrap;
    margin-left: 1.5rem;
    margin-right: 0.25rem;
}

html[dir="ltr"] .mdc-datepicker > .mdc-calendar-controls > .selected-month,
html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .mdc-calendar-controls > .selected-month {
    margin-left: 1.5rem;
    margin-right: 0.25rem;
}

html[dir="rtl"] .mdc-datepicker > .mdc-calendar-controls > .selected-month,
html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .mdc-calendar-controls > .selected-month {
    margin-left: 0.25rem;
    margin-right: 1.5rem;
}

.mdc-datepicker > .mdc-calendar-controls > .toggle-years {
    cursor: pointer;
    will-change: transform;
    transition: transform 365ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-datepicker.show-years > .mdc-calendar-controls > .toggle-years {
    transform: rotate(-180deg);
}

.mdc-datepicker > .mdc-calendar-controls > .month-controls {
    display: -ms-flexbox;
    display: flex;
    width: 4.5rem;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 1.5rem 0 auto;
    will-change: visibility, opacity, transform;
    transition: visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html[dir="ltr"] .mdc-datepicker > .mdc-calendar-controls > .month-controls,
html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .mdc-calendar-controls > .month-controls {
    margin: 0 1.5rem 0 auto;
}

html[dir="rtl"] .mdc-datepicker > .mdc-calendar-controls > .month-controls,
html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .mdc-calendar-controls > .month-controls {
    margin: 0 auto 0 1.5rem;
}

html[dir="rtl"] .mdc-datepicker > .mdc-calendar-controls > .month-controls > button,
html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .mdc-calendar-controls > .month-controls > button {
    transform: rotate(180deg);
}

.mdc-datepicker.show-years > .mdc-calendar-controls > .month-controls {
    visibility: hidden;
    opacity: 0;
    transform: translateY(20%);
}

.mdc-datepicker > table.month-days {
    margin: 0 0.625rem;
    width: auto;
    will-change: visibility, opacity, transform;
    transition: visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-datepicker.show-years > table.month-days {
    visibility: hidden;
    opacity: 0;
    transform: translateY(20%);
}

.mdc-datepicker > table.month-days th {
    font-size: 0.75rem;
    text-align: center;
    color: rgba(var(--initial-foreground-color), var(--opacity-secondary));
    text-transform: uppercase;
    line-height: 2.25rem;
    padding: 0.125rem 0.25rem;
    border: none;
    width: 2.75rem;
}

.mdc-datepicker > table.month-days td {
    font-size: 0.75rem;
    text-align: center;
    padding: 0;
    border: none;
    width: 2.75rem;
    height: 2.5rem;
}

.mdc-datepicker > table.month-days td > .month-day {
    font-size: 0.75rem;
    padding: 0;
    margin: 0.125rem 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    border-radius: 100%;
    color: rgba(var(--initial-foreground-color), var(--opacity-primary));
    position: relative;
    cursor: pointer;
    will-change: background-color, color;
    transition: background-color 0.3s, color 0.3s;
}

.mdc-datepicker > table.month-days td > div.month-day,
.mdc-datepicker > table.month-days td > .month-day.disabled {
    cursor: default;
    color: rgba(var(--initial-foreground-color), var(--opacity-hint));
}

.mdc-datepicker > table.month-days td > .month-day.active:not(.disabled) {
    background-color: rgb(var(--mdc-foreground, var(--bg-status-bar)));
    color: rgba(var(--mdc-theme, var(--foreground-color)), var(--opacity-primary));
    font-weight: 500;
}

.mdc-datepicker > table.month-days td > .month-day.today::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    pointer-events: none;
    border: solid 0.0625rem rgba(var(--foreground-color), var(--opacity-divider));
}

.mdc-datepicker > table.month-days td > .month-day.today.active::before {
    display: none;
}

.mdc-datepicker > .years-list {
    position: absolute;
    top: 11rem;
    right: 0;
    left: 0;
    bottom: 3.25rem;
    width: 20.5rem;
    height: 17.5rem;
    border-bottom: solid 0.0625rem rgba(var(--foreground-color), var(--opacity-divider));
    background-color: rgb(var(--bg-cards));
    will-change: visibility, opacity, transform;
    transition: visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-datepicker:not(.show-years) > .years-list {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20%);
    pointer-events: none;
    z-index: -9;
}

.mdc-datepicker > .years-list .years-items {
    padding: 0 1.25rem;
    bottom: auto;
    height: auto;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.mdc-datepicker > .years-list .years-items .year-box {
    margin: 0;
    width: 6rem;
    height: 3.25rem;
}

.mdc-datepicker > .years-list .years-items .year-box > button {
    margin: 0.5rem 0.75rem;
    width: 4.5rem;
    height: 2.25rem;
    color: rgba(var(--initial-foreground-color), var(--opacity-primary));
    background: none;
    border: 0;
    padding: 0;
    line-height: 2.25rem;
    font-size: 1rem;
    border-radius: 2.25rem;
    cursor: pointer;
}

.mdc-datepicker > .years-list .years-items .year-box > button.active {
    background-color: rgb(var(--mdc-foreground, var(--bg-status-bar)));
    color: rgba(var(--mdc-theme, var(--foreground-color)), var(--opacity-primary));
    font-weight: 500;
}

.mdc-datepicker > .mdc-button-group {
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin: 0;
    padding-left: 1.25rem;
    padding-right: 0.25rem;
}

html[dir="ltr"] .mdc-datepicker > .mdc-button-group,
html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .mdc-button-group {
    padding-left: 1.25rem;
    padding-right: 0.25rem;
}

html[dir="rtl"] .mdc-datepicker > .mdc-button-group,
html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .mdc-button-group {
    padding-left: 0.25rem;
    padding-right: 1.25rem;
}

@media (max-width: 320px) {
    .mdc-datepicker-container:not(.inline) > .mdc-datepicker {
        transform: scale(0.8);
    }
}

@media (max-height: 460px) {
    .mdc-datepicker-container:not(.inline) > .mdc-datepicker {
        transform: scale(0.8);
    }
}

@media (orientation: landscape) {
    .mdc-datepicker {
        padding-left: 10.5rem;
    }

    html[dir="ltr"] .mdc-datepicker,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker {
        padding-left: 10.5rem;
        padding-right: 0;
    }
    
    html[dir="rtl"] .mdc-datepicker,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker {
        padding-left: 0;
        padding-right: 10.5rem;
    }

    .mdc-datepicker > .header {
        width: 10.5rem;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }

    html[dir="ltr"] .mdc-datepicker > .header,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .header {
        left: 0;
        right: auto;
    }
    
    html[dir="rtl"] .mdc-datepicker > .header,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .header {
        left: auto;
        right: 0;
    }

    .mdc-datepicker > .header > .selected-date {
        margin-top: 3.125rem;
    }

    .mdc-datepicker > .header > .selected-date > span {
        display: block;
    }

    .mdc-datepicker > .mdc-calendar-controls {
        margin-bottom: 0.5rem;
    }

    .mdc-datepicker > table.month-days {
        margin: 0 1.125rem;
    }

    .mdc-datepicker > table.month-days th {
        line-height: 1.75rem;
        padding: 0 0.25rem;
    }

    .mdc-datepicker > .years-list {
        top: 3rem;
        left: 10.5rem;
        width: 21.5rem;
        height: 16.25rem;
    }

    html[dir="ltr"] .mdc-datepicker > .years-list,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .years-list {
        left: 10.5rem;
        right: auto;
    }
    
    html[dir="rtl"] .mdc-datepicker > .years-list,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .years-list {
        left: auto;
        right: 10.5rem;
    }

    .mdc-datepicker > .years-list .years-items .year-box {
        width: 4.75rem;
        height: 2.75rem;
    }

    .mdc-datepicker > .years-list .years-items .year-box > button {
        margin: 0.25rem 0.125rem;
    }

    .mdc-datepicker > .mdc-button-group {
        padding-top: 0;
    }
}

@media (min-width: 960px) {
    .mdc-datepicker-container {
        height: auto;
        width: auto;
        position: absolute;
        top: auto;
        right: auto;
        bottom: auto;
        left: 0;
        background-color: transparent;
        border-radius: 0.25rem;
        box-shadow: var(--z-axis-2-shadow);
    }

    html[dir="ltr"] .mdc-datepicker-container,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker-container {
        left: 0;
        right: auto;
    }

    html[dir="rtl"] .mdc-datepicker-container,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker-container {
        right: 0;
        left: auto;
    }

    .mdc-datepicker,
    html[dir="ltr"] .mdc-datepicker,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker,
    html[dir="rtl"] .mdc-datepicker,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker {
        padding-left: 0;
        padding-right: 0;
    }

    .mdc-datepicker > .header {
        display: none;
    }

    .mdc-datepicker > .mdc-calendar-controls {
        margin-bottom: 0.75rem;
    }

    .mdc-datepicker > .mdc-calendar-controls > .month-controls {
        margin: 0 0.5rem 0 auto;
    }

    html[dir="ltr"] .mdc-datepicker > .mdc-calendar-controls > .month-controls,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .mdc-calendar-controls > .month-controls {
        margin: 0 0.5rem 0 auto;
    }

    html[dir="rtl"] .mdc-datepicker > .mdc-calendar-controls > .month-controls,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .mdc-calendar-controls > .month-controls {
        margin: 0 auto 0 0.5rem;
    }

    .mdc-datepicker > table.month-days {
        margin: 0 1rem 0.5rem;
    }

    .mdc-datepicker > table.month-days th {
        line-height: 1.75rem;
        padding: 0;
        width: 2rem;
        height: 1.75rem;
    }

    .mdc-datepicker > table.month-days td {
        width: 2rem;
        height: 2rem;
    }

    .mdc-datepicker > table.month-days td > .month-day {
        margin: 0.125rem;
        width: 1.75rem;
        height: 1.75rem;
        line-height: 1.75rem;
    }

    .mdc-datepicker > .years-list,
    html[dir="ltr"] .mdc-datepicker > .years-list,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .years-list,
    html[dir="rtl"] .mdc-datepicker > .years-list,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .years-list {
        width: auto;
        height: auto;
        top: 3.25rem;
        right: 0;
        bottom: 0.5rem;
        left: 0;
        border-bottom: none;
    }

    .mdc-datepicker > .years-list .years-items {
        padding: 0.25rem 1.25rem 0 0.75rem;
    }

    html[dir="ltr"] .mdc-datepicker > .years-list .years-items,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .years-list .years-items {
        padding: 0.25rem 1.25rem 0 0.75rem;
    }

    html[dir="rtl"] .mdc-datepicker > .years-list .years-items,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .years-list .years-items {
        padding: 0.25rem 0.75rem 0 1.25rem;
    }

    .mdc-datepicker > .years-list .years-items .year-box {
        width: 3.5rem;
        height: 2rem;
    }

    .mdc-datepicker > .years-list .years-items .year-box > button {
        margin: 0.125rem;
        width: 3.25rem;
        height: 1.75rem;
        font-size: 0.875rem;
        line-height: 1.75rem;
    }

    .mdc-datepicker > .years-list > .os-scrollbar {
        opacity: 1;
        right: 0.5rem;
    }

    html[dir="ltr"] .mdc-datepicker > .years-list > .os-scrollbar,
    html[dir] .has-datepicker[dir="ltr"] .mdc-datepicker > .years-list > .os-scrollbar {
        left: auto;
        right: 0.5rem;
    }

    html[dir="rtl"] .mdc-datepicker > .years-list > .os-scrollbar,
    html[dir] .has-datepicker[dir="rtl"] .mdc-datepicker > .years-list > .os-scrollbar {
        left: 0.5rem;
        right: auto;
    }

    .mdc-datepicker > .mdc-button-group {
        display: none;
    }
}