/* ---------------------------------------------
Color tokens
------------------------------------------------ */
:root {
  --black: #000000;
  --gray-9: #17161a;
  --gray-8: #2f2c35;
  --gray-7: #46434f;
  --gray-6: #5e596a;
  --gray-5: #756f84;
  --gray-4: #a29dae;
  --gray-3: #d7d5df;
  --gray-2: #efedf5;
  --gray-1: #fbfafd;
  --white: #ffffff;

  --blue-9: #001833;
  --blue-8: #002966;
  --blue-7: #023aa7;
  --blue-6: #0045f6;
  --blue-5: #007aff;
  --blue-4: #3395ff;
  --blue-3: #66afff;
  --blue-2: #99caff;
  --blue-1: #e5f1ff;
  --blue-core: var(--blue-5);

  --mint-9: #051d18;
  --mint-8: #0a3b30;
  --mint-7: #0f5949;
  --mint-6: #147761;
  --mint-5: #19957a;
  --mint-4: #1eb392;
  --mint-3: #23d1ab;
  --mint-2: #6ce0c7;
  --mint-1: #daf7f1;
  --mint-core: var(--mint-3);

  --green-9: #061c0a;
  --green-8: #0b3913;
  --green-7: #11551d;
  --green-6: #177226;
  --green-5: #1c8e30;
  --green-4: #22aa39;
  --green-3: #27c743;
  --green-2: #2de34c;
  --green-1: #cbf8d3;
  --green-core: var(--green-2);

  --yellow-9: #201800;
  --yellow-8: #403100;
  --yellow-7: #604900;
  --yellow-6: #806200;
  --yellow-5: #9f7a00;
  --yellow-4: #bf9200;
  --yellow-3: #dfab00;
  --yellow-2: #ffc300;
  --yellow-1: #fff0bf;
  --yellow-core: var(--yellow-2);

  --orange-9: #2b0f00;
  --orange-8: #551f00;
  --orange-7: #802e00;
  --orange-6: #aa3d00;
  --orange-5: #d54d00;
  --orange-4: #ff5c00;
  --orange-3: #ff8540;
  --orange-2: #ffae80;
  --orange-1: #ffebdf;
  --orange-core: var(--orange-4);

  --red-9: #2b080e;
  --red-8: #550f1c;
  --red-7: #80172b;
  --red-6: #aa1e39;
  --red-5: #d52647;
  --red-4: #ff2d55;
  --red-3: #ff6280;
  --red-2: #ff96aa;
  --red-1: #ffe5ea;
  --red-core: var(--red-4);

  --pink-9: #2b001a;
  --pink-8: #550033;
  --pink-7: #80004d;
  --pink-6: #aa0066;
  --pink-5: #d50080;
  --pink-4: #ff0099;
  --pink-3: #ff40b3;
  --pink-2: #ff80cc;
  --pink-1: #ffe3f4;
  --pink-core: var(--pink-4);

  --purple-9: #16093a;
  --purple-8: #2c1275;
  --purple-7: #411baf;
  --purple-6: #5724e9;
  --purple-5: #7349ed;
  --purple-4: #8f6df0;
  --purple-3: #ab92f4;
  --purple-2: #c7b6f8;
  --purple-1: #f0ebff;
  --purple-core: var(--purple-6);
}
/* -------------------------------------------------------
Spacing
------------------------------------------------------- */
:root {
  --spacing-1: 6px;
  --spacing-2: calc(var(--spacing-1) * 2);
  --spacing-3: calc(var(--spacing-1) * 3);
  --spacing-4: calc(var(--spacing-1) * 4);
  --spacing-5: calc(var(--spacing-1) * 5);
  --spacing-6: calc(var(--spacing-1) * 6);
  --spacing-7: calc(var(--spacing-1) * 7);
  --spacing-8: calc(var(--spacing-1) * 8);
  --spacing-9: calc(var(--spacing-1) * 9);
  --spacing-10: calc(var(--spacing-1) * 10);
}
/* -------------------------------------------------------
Color
------------------------------------------------------- */
:root,
[data-theme='light'] {
  /* Base */
  --main-bkg-color: var(--gray-1);
  --modal-bkg-color: var(--white);
  --modal-backdrop-opacity: 50%; /* Must be a percent to work with framer motion */
  --surface-bkg-color: var(--white);
  --border-color: var(--gray-5);
  --border-color-dim: var(--gray-3);
  --border-color-extra-dim: var(--gray-2);

  --error-color: var(--red-core);
  --text-color: var(--black);
  --text-color-dim: var(--gray-7);
  --text-color-inverse: var(--white);
  --text-color-inverse-dim: var(--gray-3);
  --link-color: var(--blue-6);
  --link-color-hover: var(--blue-4);
  --link-color-active: var(--blue-2);
  --highlight-color: var(--blue-6);

  /* Skeleton Loader */
  --color-skeleton-loader: var(--gray-3);

  /* Buttons */
  --btn-color: var(--gray-9);
  --btn-text-color: var(--white);
  --btn-color-hover: var(--gray-7);
  --btn-color-active: var(--gray-6);
  --btn-color-focus: var(--gray-2);
  --opacity-button-disabled: 0.5;
  --opacity-button-loading: 0.8;

  /* Dropdowns */
  --dropdown-bkg-hover-color: var(--gray-2);
  --dropdown-bkg-active-color: var(--gray-3);
  --dropdown-text-delete: var(--red-5);

  /* Banners */
  --banner-default-bkg-color: var(--blue-1);
  --banner-default-border-color: var(--blue-6);
  --banner-default-icon-color: var(--blue-6);
  --banner-default-text-color: var(--text-color);
  --banner-guidance-bkg-color: var(--purple-1);
  --banner-guidance-border-color: var(--purple-6);
  --banner-guidance-icon-color: var(--purple-6);
  --banner-guidance-text-color: var(--text-color);
  --banner-success-bkg-color: var(--green-1);
  --banner-success-border-color: var(--green-6);
  --banner-success-icon-color: var(--green-6);
  --banner-success-text-color: var(--text-color);
  --banner-warning-bkg-color: var(--yellow-1);
  --banner-warning-border-color: var(--yellow-6);
  --banner-warning-icon-color: var(--yellow-6);
  --banner-warning-text-color: var(--text-color);
  --banner-critical-bkg-color: var(--red-1);
  --banner-critical-border-color: var(--red-6);
  --banner-critical-icon-color: var(--red-6);
  --banner-critical-text-color: var(--text-color);
  --banner-border-radius: var(--border-radius-medium);
  --banner-padding: var(--spacing-2);
  --banner-border-width: 1px;
  --banner-box-shadow: none;
  --banner-content-max-width: 100%;
  --banner-copy-max-width: 636px;
  --banner-layout-gap: 6px;
  --banner-heading-font-size: var(--heading-font-size-xx-small);
  --banner-body-font-size: var(--body-text-font-size-small);

  /* ProgressBar */
  --progress-bar-bkg-color: var(--gray-3);
}
[data-theme='dark'] {
  /* Base */
  --main-bkg-color: var(--gray-9);
  --modal-bkg-color: var(--gray-8);
  --modal-backdrop-opacity: 60%; /* Must be a percent to work with framer motion */
  --surface-bkg-color: var(--gray-8);
  --border-color: var(--gray-5);
  --border-color-dim: var(--gray-7);
  --border-color-extra-dim: var(--gray-8);
  --error-color: var(--red-core);
  --text-color: var(--white);
  --text-color-dim: var(--gray-3);
  --text-color-inverse: var(--black);
  --text-color-inverse-dim: var(--gray-7);
  --link-color: var(--blue-3);
  --link-color-hover: var(--blue-5);
  --link-color-active: var(--blue-7);
  --highlight-color: var(--blue-3);

  /* Skeleton Loader */
  --color-skeleton-loader: var(--gray-6);

  /* Buttons */
  --btn-color: var(--gray-1);
  --btn-text-color: var(--black);
  --btn-color-hover: var(--gray-3);
  --btn-color-active: var(--gray-4);
  --btn-color-focus: var(--gray-8);

  /* Dropdowns */
  --dropdown-bkg-hover-color: var(--gray-7);
  --dropdown-bkg-active-color: var(--gray-6);
  --dropdown-text-delete: var(--red-3);

  /* Banners */
  --banner-default-bkg-color: var(--blue-8);
  --banner-default-border-color: var(--blue-1);
  --banner-default-icon-color: var(--blue-1);
  --banner-default-text-color: var(--text-color);
  --banner-guidance-bkg-color: var(--purple-8);
  --banner-guidance-border-color: var(--purple-1);
  --banner-guidance-icon-color: var(--purple-1);
  --banner-guidance-text-color: var(--text-color);
  --banner-success-bkg-color: var(--green-8);
  --banner-success-border-color: var(--green-1);
  --banner-success-icon-color: var(--green-1);
  --banner-success-text-color: var(--text-color);
  --banner-warning-bkg-color: var(--yellow-8);
  --banner-warning-border-color: var(--yellow-1);
  --banner-warning-icon-color: var(--yellow-1);
  --banner-warning-text-color: var(--text-color);
  --banner-critical-bkg-color: var(--red-8);
  --banner-critical-border-color: var(--red-1);
  --banner-critical-icon-color: var(--red-1);
  --banner-critical-text-color: var(--text-color);
  --banner-border-radius: var(--border-radius-medium);
  --banner-padding: var(--spacing-2);
  --banner-border-width: 1px;
  --banner-box-shadow: none;
  --banner-content-max-width: 100%;
  --banner-copy-max-width: 636px;
  --banner-layout-gap: 6px;
  --banner-heading-font-size: var(--heading-font-size-xx-small);
  --banner-body-font-size: var(--body-text-font-size-small);

  /* ProgressBar */
  --progress-bar-bkg-color: var(--gray-7);
}
/* -------------------------------------------------------
Typography
------------------------------------------------------- */
:root {
  /* Font-family - try to use component first */
  --heading-typeface: Inter, sans-serif;
  --body-text-typeface: Inter, sans-serif;
  --eyebrow-text-typeface: Inter, sans-serif;
  --mono-typeface: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;

  /* Font-weight - try to use font shorthand vars first */
  --heading-font-weight: 700;
  --body-text-normal-font-weight: 400;
  --body-text-bold-font-weight: 650;
  --eyebrow-text-font-weight: 650;

  --extra-bold-font-weight: 800;
  --normal-font-weight: 400;

  /* Font-size - try to use font shorthand vars first */
  --heading-font-size-large: 2.0625rem; /* 33px */
  --heading-font-size-medium: 1.6875rem; /* 27px */
  --heading-font-size-small: 1.4375rem; /* 23px */
  --heading-font-size-x-small: 1.1875rem; /* 19px */
  --heading-font-size-xx-small: var(--body-text-font-size-medium); /* 16px */

  --body-text-font-size-large: 1.1875rem; /* 19px */
  --body-text-font-size-medium: 1rem; /* 16px */
  --body-text-font-size-small: 0.875rem; /* 14px */
  --body-text-font-size-x-small: 0.75rem; /* 12px */

  --eyebrow-text-font-size: 0.75rem; /* 12px */

  /* Line-height - try to use font shorthand vars first */
  --heading-line-height-large: 2.5rem; /* 40px */
  --heading-line-height-medium: 2.0625rem; /* 33px */
  --heading-line-height-small: 1.75rem; /* 28px */
  --heading-line-height-x-small: 1.4375rem; /* 23px */
  --heading-line-height-xx-small: 1.1875rem; /* 19px */

  --body-text-line-height-large: 1.8125rem; /* 29px */
  --body-text-line-height-medium: 1.5rem; /* 24px */
  --body-text-line-height-small: var(--body-text-line-height-medium); /* 24px */
  --body-text-line-height-x-small: 1.125rem; /* 18px */

  --eyebrow-text-line-height: 1.125rem; /* 18px */

  /* Letter-spacing - try to use font shorthand vars first */
  --heading-letter-spacing-large: -0.015em;
  --heading-letter-spacing-medium: -0.015em;
  --heading-letter-spacing-small: -0.01em;
  --heading-letter-spacing-x-small: -0.01em;
  --heading-letter-spacing-xx-small: 0;

  --body-text-letter-spacing: 0;

  --eyebrow-text-letter-spacing: 0.022em;

  /*
    Font shorthands - try to use type components first because headings need
    letter-spacing styling, which using the component automatically gives you.
    If you can't use the component, remember to use an appropriate
    letter-spacing variable.
  */
  --heading-large: var(--extra-bold-font-weight) var(--heading-font-size-large) /
    var(--heading-line-height-large) var(--heading-typeface);
  --heading-medium: var(--heading-font-weight) var(--heading-font-size-medium) /
    var(--heading-line-height-medium) var(--heading-typeface);
  --heading-small: var(--heading-font-weight) var(--heading-font-size-small) /
    var(--heading-line-height-small) var(--heading-typeface);
  --heading-x-small: var(--heading-font-weight) var(--heading-font-size-x-small) /
    var(--heading-line-height-x-small) var(--heading-typeface);
  --heading-xx-small: var(--heading-font-weight)
    var(--heading-font-size-xx-small) / var(--heading-line-height-xx-small)
    var(--heading-typeface);

  --body-text-large: var(--body-text-normal-font-weight)
    var(--body-text-font-size-large) / var(--body-text-line-height-large)
    var(--body-text-typeface);
  --body-text-medium: var(--body-text-normal-font-weight)
    var(--body-text-font-size-medium) / var(--body-text-line-height-medium)
    var(--body-text-typeface);
  --body-text-small: var(--body-text-normal-font-weight)
    var(--body-text-font-size-small) / var(--body-text-line-height-small)
    var(--body-text-typeface);
  --body-text-x-small: var(--body-text-normal-font-weight)
    var(--body-text-font-size-x-small) / var(--body-text-line-height-x-small)
    var(--body-text-typeface);

  --eyebrow-text: var(--eyebrow-text-font-weight) var(--eyebrow-text-font-size) /
    var(--eyebrow-text-line-height) var(--eyebrow-text-typeface);
}
/* -------------------------------------------------------
Box-shadow
------------------------------------------------------- */
:root,
[data-theme='light'] {
  --box-shadow-small: 1px 3px 9px -3px hsla(0, 0%, 0%, 6%),
    -3px -4px 6px -6px hsla(0, 0%, 0%, 6%);
  --box-shadow-medium: 2px 6px 12px -3px hsla(0, 0%, 0%, 8%),
    -3px -4px 6px -6px hsla(0, 0%, 0%, 6%);
  --box-shadow-large: 3px 12px 18px -6px hsla(0, 0%, 0%, 9%),
    -3px -4px 6px -6px hsla(0, 0%, 0%, 6%);
  --box-shadow-dropdown: var(--box-shadow-small);
}
[data-theme='dark'] {
  --box-shadow-small: 1px 12px 18px -6px hsla(256, 100%, 9%, 72%),
    -3px -4px 6px -6px hsla(256, 100%, 9%, 72%);
  --box-shadow-medium: 2px 18px 24px -6px hsla(256, 100%, 9%, 78%),
    -3px -4px 6px -6px hsla(256, 100%, 9%, 72%);
  --box-shadow-large: 3px 24px 40px -12px hsla(256, 100%, 9%, 84%),
    -3px -4px 6px -6px hsla(256, 100%, 9%, 72%);
}
/* -------------------------------------------------------
Border-radii
------------------------------------------------------- */
:root {
  --border-radius-x-small: 3px; /* only for making items slightly off-square */
  --border-radius-small: 6px; /* innermost, smallest element corners */
  --border-radius-medium: 12px; /* mid-size and container element corners */
  --border-radius-large: 24px; /* outermost, largest element corners */
  --border-radius-round: 999px; /* fully rounds an elements like buttons */
}
/* -------------------------------------------------------
Transition
------------------------------------------------------- */
:root {
  --hover-transition: 200ms;
  --transition-easing: cubic-bezier(0.4, 0.05, 0.33, 0.95);
}
/* -------------------------------------------------------
Utility Classes
------------------------------------------------------- */
body.ps-scroll-lock {
  overflow: hidden;
  padding-right: var(--ps-scrollbar-width, 0);
}
html {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
body {
  background: var(--main-bkg-color);
  color: var(--text-color);
  font: var(--body-text-medium);
}
body,
#root {
  min-height: 100vh;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
blockquote,
q {
  quotes: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a img {
  border: none;
}
/* links (legacy) - temporary - remove with new brand */
a {
  color: var(--link-color);
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: var(--link-color-hover);
  text-decoration: underline;
}
a:active {
  color: var(--link-color-active);
  text-decoration: underline;
}
/* other */
b,
strong {
  font-weight: var(--body-text-bold-font-weight);
}
em {
  font-style: italic;
}
/* Libraries */
/* Variables declaration */
.rdp-root {
  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */

  --rdp-day-height: 44px; /* The height of the day cells. */
  --rdp-day-width: 44px; /* The width of the day cells. */

  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
  --rdp-day_button-height: 42px; /* The height of the day cells. */
  --rdp-day_button-width: 42px; /* The width of the day cells. */

  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */

  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */

  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */

  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */

  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
  --rdp-range_middle-color: inherit; /* The color of the range text. */

  --rdp-range_start-color: white; /* The color of the range text. */
  --rdp-range_start-background: linear-gradient(
    var(--rdp-gradient-direction),
    transparent 50%,
    var(--rdp-range_middle-background-color) 50%
  ); /* Used for the background of the start of the selected range. */
  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */

  --rdp-range_end-background: linear-gradient(
    var(--rdp-gradient-direction),
    var(--rdp-range_middle-background-color) 50%,
    transparent 50%
  ); /* Used for the background of the end of the selected range. */
  --rdp-range_end-color: white; /* The color of the range text. */
  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */

  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */

  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-gradient-direction: 90deg;

  --rdp-animation_duration: 0.3s;
  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
}
.rdp-root[dir="rtl"] {
  --rdp-gradient-direction: -90deg;
}
.rdp-root[data-broadcast-calendar="true"] {
  --rdp-outside-opacity: unset;
}
/* Root of the component. */
.rdp-root {
  position: relative; /* Required to position the navigation toolbar. */
  box-sizing: border-box;
}
.rdp-root * {
  box-sizing: border-box;
}
.rdp-day {
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}
.rdp-day_button {
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  justify-content: center;
  align-items: center;
  display: flex;

  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
  border: var(--rdp-day_button-border);
  border-radius: var(--rdp-day_button-border-radius);
}
.rdp-day_button:disabled {
  cursor: revert;
}
.rdp-caption_label {
  z-index: 1;

  position: relative;
  display: inline-flex;
  align-items: center;

  white-space: nowrap;
  border: 0;
}
.rdp-dropdown:focus-visible ~ .rdp-caption_label {
  outline: 5px auto Highlight;
  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
  outline: 5px auto -webkit-focus-ring-color;
}
.rdp-button_next,
.rdp-button_previous {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  appearance: none;

  width: var(--rdp-nav_button-width);
  height: var(--rdp-nav_button-height);
}
.rdp-button_next:disabled,
.rdp-button_next[aria-disabled="true"],
.rdp-button_previous:disabled,
.rdp-button_previous[aria-disabled="true"] {
  cursor: revert;

  opacity: var(--rdp-nav_button-disabled-opacity);
}
.rdp-chevron {
  display: inline-block;
  fill: var(--rdp-accent-color);
}
.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
  transform: rotate(180deg);
  transform-origin: 50%;
}
.rdp-dropdowns {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rdp-dropdown-gap);
}
.rdp-dropdown {
  z-index: 2;

  /* Reset */
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  border: none;
  line-height: inherit;
}
.rdp-dropdown_root {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
  opacity: var(--rdp-disabled-opacity);
}
.rdp-month_caption {
  display: flex;
  align-content: center;
  height: var(--rdp-nav-height);
  font-weight: bold;
  font-size: large;
}
.rdp-root[data-nav-layout="around"] .rdp-month,
.rdp-root[data-nav-layout="after"] .rdp-month {
  position: relative;
}
.rdp-root[data-nav-layout="around"] .rdp-month_caption {
  justify-content: center;
  margin-inline-start: var(--rdp-nav_button-width);
  margin-inline-end: var(--rdp-nav_button-width);
  position: relative;
}
.rdp-root[data-nav-layout="around"] .rdp-button_previous {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
}
.rdp-root[data-nav-layout="around"] .rdp-button_next {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
  justify-content: center;
}
.rdp-months {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rdp-months-gap);
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.rdp-month_grid {
  border-collapse: collapse;
}
.rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;

  display: flex;
  align-items: center;

  height: var(--rdp-nav-height);
}
.rdp-weekday {
  opacity: var(--rdp-weekday-opacity);
  padding: var(--rdp-weekday-padding);
  font-weight: 500;
  font-size: smaller;
  text-align: var(--rdp-weekday-text-align);
  text-transform: var(--rdp-weekday-text-transform);
}
.rdp-week_number {
  opacity: var(--rdp-week_number-opacity);
  font-weight: 400;
  font-size: small;
  height: var(--rdp-week_number-height);
  width: var(--rdp-week_number-width);
  border: var(--rdp-week_number-border);
  border-radius: var(--rdp-week_number-border-radius);
  text-align: var(--rdp-weeknumber-text-align);
}
/* DAY MODIFIERS */
.rdp-today:not(.rdp-outside) {
  color: var(--rdp-today-color);
}
.rdp-selected {
  font-weight: bold;
  font-size: large;
}
.rdp-selected .rdp-day_button {
  border: var(--rdp-selected-border);
}
.rdp-outside {
  opacity: var(--rdp-outside-opacity);
}
.rdp-disabled {
  opacity: var(--rdp-disabled-opacity);
}
.rdp-hidden {
  visibility: hidden;
  color: var(--rdp-range_start-color);
}
.rdp-range_start {
  background: var(--rdp-range_start-background);
}
.rdp-range_start .rdp-day_button {
  background-color: var(--rdp-range_start-date-background-color);
  color: var(--rdp-range_start-color);
}
.rdp-range_middle {
  background-color: var(--rdp-range_middle-background-color);
}
.rdp-range_middle .rdp-day_button {
  border: unset;
  border-radius: unset;
  color: var(--rdp-range_middle-color);
}
.rdp-range_end {
  background: var(--rdp-range_end-background);
  color: var(--rdp-range_end-color);
}
.rdp-range_end .rdp-day_button {
  color: var(--rdp-range_start-color);
  background-color: var(--rdp-range_end-date-background-color);
}
.rdp-range_start.rdp-range_end {
  background: revert;
}
.rdp-focusable {
  cursor: pointer;
}
@keyframes rdp-slide_in_left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes rdp-slide_in_right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes rdp-slide_out_left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes rdp-slide_out_right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
.rdp-weeks_before_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-weeks_before_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-weeks_after_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-weeks_after_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
@keyframes rdp-fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rdp-fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.rdp-caption_after_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-caption_after_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-caption_before_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.rdp-caption_before_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}