@font-face {
    font-family: 'PT Root UI';
    src: url('/assets/fonts/PT-Root-UI_Regular.woff2') format('woff2'),
    url('/assets/fonts/PT-Root-UI_Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PT Root UI';
    src: url('/assets/fonts/PT-Root-UI_Medium.woff2') format('woff2'),
    url('/assets/fonts/PT-Root-UI_Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'PT Root UI';
    src: url('/assets/fonts/PT-Root-UI_Bold.woff2') format('woff2'),
    url('/assets/fonts/PT-Root-UI_Bold.woff') format('woff');
    font-weight: bold;
    font-display: swap;
}

* {
    box-sizing: border-box;
    font-family: "PT Root UI", sans-serif;
    outline: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --padding: max(12px, max(env(safe-area-inset-left), env(safe-area-inset-right)));
    --accent-background: linear-gradient(132.77deg, #EF8031 0.65%, #EF5F31 98.05%);
    --backdrop-filter: saturate(2) blur(25px);
    --underheader-padding: 117px;
    --horizontal-padding: 18px;
    --backdrop-opacity: 0.9;
    --accent-color: white;
    --background: white;
    --color: black;

    --litepicker-container-months-color-bg: #ffffff !important;
    --litepicker-is-end-color-bg: var(--litepicker-is-start-color-bg);
    --litepicker-is-in-range-color: rgba(243, 156, 95, 0.25);
    --litepicker-month-weekday-color: #000000;
    --litepicker-is-start-color-bg: #ef8031;
    --litepicker-day-color: #000000;
    --litepicker-day-width: 40px;

    --litepicker-button-prev-month-color-hover: black;
    --litepicker-button-next-month-color-hover: black;
    --litepicker-button-prev-month-color: black;
    --litepicker-button-next-month-color: black;
    --litepicker-month-header-color: black;

    height: 100%;
}

body {
    margin: unset;
    height: 100%;
    /*background: #E5E5E5;*/
}

@media (min-width: 480px) {
    :root {
        --horizontal-padding: calc((100vw - 340px) / 2);
    }
}

@media (min-width: 840px) {
    :root {
        --horizontal-padding: calc((100vw - 712px) / 2);
        --underheader-padding: 0;
    }
}

@media (min-width: 1140px) {
    :root {
        --horizontal-padding: 80px;
    }
}

@media (min-width: 1440px) {
    :root {
        --horizontal-padding: 160px;
    }
}

@media (min-width: 1680px) {
    :root {
        --horizontal-padding: calc((100vw - 1348px) / 2);
    }
}

.litepicker {
    font-family: "PT Root UI", sans-serif;
    font-size: 16px;
    font-weight: bold;
    background: #ffffff;
    /* Color/15% Black */
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.litepicker button, .litepicker .day-item:not(.is-locked) {
    cursor: pointer !important;
}

.litepicker .clear {
    font-size: 12px;
    color: #EA7420;
    padding: 5px;
}

.litepicker .month-item-header {
    padding-top: 0;
}

.litepicker .container__months {
    padding: 10px;
}

.litepicker .container__months .month-item-weekdays-row {
    --border: 1px solid #D9D9D9;
    border-bottom: var(--border);
    border-top: var(--border);
}

.litepicker .container__months .month-item-weekdays-row > div {
    font-size: 14px;
}

.litepicker .container__days .day-item.is-today {
    color: var(--litepicker-day-color);
    border: 1px solid #292a30;
    box-sizing: border-box;
    line-height: 28px;
}

.litepicker .container__days .day-item.is-today:not(.is-in-range, .is-start-date, .is-end-date) {
    border-radius: 100px;
}

.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date.is-flipped {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.litepicker .container__days .day-item.is-end-date,
.litepicker .container__days .day-item.is-start-date.is-flipped {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.litepicker .container__days .day-item.is-start-date.is-end-date {
    border-radius: 100px;
}

.litepicker .container__days .day-item {
    margin: 4px 0;
    font-weight: 500;
    line-height: 30px;
    transition: unset;
}

.litepicker .container__days .day-item:not(.is-locked):hover {
    color: white;
    box-shadow: unset;
    background: #ffb47b;
}

.litepicker .container__days .day-item:not(.is-locked, .is-in-range, .is-start-date, .is-end-date):hover {
    border-radius: 100px;
}